Geeks Programming - Learning To Make Simple Your Code: Ajax

Tampilkan postingan dengan label Ajax. Tampilkan semua postingan

Sabtu, 24 Desember 2011

Create Simple Comments box With JQuery AJAX

For this occasion I want to try to share about making a comment using jQuery and Ajax. To use this jQuery plugin you should at least understand a little about javascript so that the application runs smoothly on your website.

Well first make his first style that seems a little bit nice but for this example I created a simple, if you want a nice view of the brain-tweaking own please css.

File used to create a form using jQuery and Ajax comments need 3 files namely:

style.css
komentar.php
komentarajak.php
style.css
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
# Header {
height: 90px;
padding: 30px 0px;
background: url (http://www.deadbyarticle.com/asset/_img/header1.png) repeat-x;
min-width: 900px;
}
. Comment_box {
background-color: # D3E7F5; border-bottom: 1px solid # ffffff; padding-top: 3px
}
a {
text-decoration: none;
color: # d02b55;
}
a: hover {
text-decoration: underline;
color: # d02b55;
}
* {
margin: 0; padding: 0;
}
ol.timeline {
list-style: none;
font-size: 1.2em;
}
ol.timeline li {
display: none;
position: relative;
padding: 0 .7 em .6 em 0;
}
ol.timeline li: first-child {}
# Main {
margin-top: 20px; margin-left: 100px;
font-family: "Trebuchet MS";
}
# Flash {
margin-left: 100px;
}
. Box {
height: 85px;
border-bottom: 1px dashed # dedede;
margin-bottom: 20px;
}
input [type = 'text'] {
color: # 000000;
font-size: 14px;
border: 1px solid # CCC;
height: 24px;
margin-bottom: 10px;
width: 200px;
}
# Buttonkomen {
font-family: Lucida Sans Unicode;
background-color: # 60205A;
background-image:-moz-linear-gradient (# 954A8F, # 60205A);
border-color: # 4C1548;
padding-bottom: 1px;
padding-top: 2px;
margin-top:-3px;
border-radius: 4px 4px 4px 4px;
font-weight: bold;
color: # FFFFFF;
}
textarea {
color: # 000000;
font-size: 14px;
border: 1px solid # CCC;
height: 124px;
margin-bottom: 10px;
width: 200px;
}

After that we started to apply has JavaScript is used to send data ($ _POST) and then taken back to the data to be displayed directly penngriminan way through the invite.

$. Ajax ({
type: "POST",
url: "komentarajax.php",
data: dataString,
cache: false,
success: function (html).

type: "POST" is a form of delivery of data to be displayed, url: "komentarajax.php" where the data is sent or posted data: dataString or sent earlier and if successful will be displayed again transmitted data.

Direct any comments on the form.

komentar.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Comments using jQuery and Ajax </ title>
<link rel="stylesheet" type="text/css" /> href="style.css"
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ (". Kirimkeun"). Click (function () {
ngaran var = $ ("# ngaran"). val ();
var email = $ ("# email"). val ();
var comment = $ ("# comment"). val ();
dataString var = 'ngaran =' + ngaran + '& email =' + email + '& comment =' + comment;
if (ngaran ==''| | email ==''| | comment =='')
{
alert ('Not Allowed There are empty');
}
else
{
$ ('# Flash'). Show ();
$ ('# Flash'). FadeIn (400). Html ('<img src="loading.gif" align="absmiddle"> <span class="loading"> Please wait ...</ div>') ;
$. Ajax ({
type: "POST",
url: "komentarajax.php",
data: dataString,
cache: false,
success: function (html) {

$ ('Ol # update "). Append (html);
$ ("# Update ol li: last"). FadeIn ("slow");
document.getElementById ('email'). value ='';
document.getElementById ('ngaran'). value ='';
document.getElementById ('comment'). value ='';
$ ("# Name"). Focus ();

$ ('# Flash'). Hide ();
}
});
}
return false;
});

});

</ Script>
</ Head>
<body>
<div id="header">
<div style="height:90px; border-bottom:#dedede Dashed padding-left:10px; 2px; ">
<a href="http://www.deadbyarticle.com" style="color:#0099CC">
<img src="http://www.deadbyarticle.com/asset/_img/logo.png">
</ A>
</ Div>
</ Div>
<div id="main">
<ol id="update" class="timeline">
</ Ol>
id="flash" <div align="left"> </ div>
<center>
<form method="POST" action="#" id="formurang">
<Input type = "text" name = "ngaran" id = "ngaran" placeholder = "Your name ..." style = "padding-left: 8px" />
<Input type = "text" name = "email" id = "email" placeholder = "Your Email ..." style = "padding-left: 8px" />
<textarea name="comment" id="comment" style="width:420px" placeholder="Komentar Anda...">
<div style="margin-left:360px">
<button class="kirimkeun" id="buttonkomen" type="submit" onclick="$.('#formurang').submit();"> Submit </ button>
</ Div>
</ Form>
</ Center>
</ Div>
</ Body>
</ Html>

After making the comment form you just make a file to send data from the comment form is komentarajax.php and the same as ordinary data sent using ($ _POST). Immediately, the script for komentarajax.php.

komentarajax.php

<? Php
if ($ _POST)
{
$ Ngaran = $ _POST ['ngaran'];
$ Email = $ _POST ['email'];
$ Comment = $ _POST ['comment'];
Else {}
$ Lowercase = strtolower ($ email);
$ Image = md5 ($ lowercase);
}

?>
<li class="box">
<img src="http://www.deadbyarticle.com/image/no-avatar.png" style="float:left; width:80px; height:80px; margin-right:20px"/> <span style = "font-size: 16px; color: # 663399; font-weight: bold"> <? php echo $ ngaran ;?></ span> /> <br />
<? Php echo $ comment;?>
</ Li>

Once everything is done live you apply on your website but to implement it you need to know a little about javascript so you do not get into trouble when applying
Demo Download

Ajax Autocomplete (Autosuggestion) with jQuery in CodeIgniter

After receiving a question from my friend last few days about how to make the autocomplete, I decided to make a tutorial only. This tutorial will teach you to be able to make the autocomplete feature / autosuggestion in an input field in your web form. I will use the autocomplete jquery plugin and will be integrated in the framework CodeIgniter.

Autocompletenya own jQuery plugins you can download linked to this. For CodeIgniter itself can be downloaded at codeigniter.com to the latest version is 2.0 but I use ditutorial CI is still the version 1.7.3. Broadly speaking, who should be the same as version 2.0. One more note, for jQuery autocomplete plugin that I was a little modif jquery.autocomplete.js file section, because this plugin sends file search parameters to call ajax with $ _GET, whereas in CodeIgniter itself does not use $ _GET but $ _POST.

I'll include the source code for this tutorial and can be downloaded at this link. Once downloaded you can install on your localhost web server, in accordance with generally how you install CodeIgniter application. you simply change the file / www / system / application / config / config.php and find this line
PHP Code:
$ Config ['base_url'] = "http://localhost/demo_autocomplete_ci/";
/ * Change the following url in accordance with where you install it on your localhost * /
If you successfully installed it will look like this picture

For an explanation kodingnya we can start from the file / system / application / views / niko.php, these files play our template file for this tutorial.
PHP Code:

<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Nikolius Luiso" />
<title> jQuery Autocomplete Demo </ title>
<! - Load jquery library framework ->
<Script type = "text / javascript" src = "<? Php echo base_url ()?> Js/jquery144.min.js"> </ script>
<! - Load library jquery autocomplete plugin ->
<Script type = "text / javascript" src = "<? Php echo base_url ()?> Js / jquery.autocomplete.js"> </ script>
<script type="text/javascript">
/ * This script is the script jquery autocomplete plugin to run it * /
$ (Function () {
/ * Find the element with id = "inputCari" * /
$ ("# InputCari"). Autocomplete ({
/ * Url autocomplete ajax reply destination * /
url: '<? php echo base_url ();?> index.php / search /',
/ * Result returned from the ajax was given a span tag to be red * /
showResult: function (value, data) {
return '<span style="color:red">' + value + '</ span>';
},
/ * Maximum number of items that will be displayed * /
maxItemsToShow: 8
});
});
</ Script>
<! - Needful load css file ->
<Link rel = "stylesheet" type = "text / css" href = "<? Php echo base_url ()?> Css / base.css">
<Link rel = "stylesheet" type = "text / css" href = "<? Php echo base_url ()?> Css / jquery.autocomplete.css">
<Link rel = "stylesheet" type = "text / css" href = "<? Php echo base_url ()?> Css / style.css">
</ Head>
<body>
<div id="container">
<h1> jQuery Autocomplete Demo </ h1>
<div align="center">
<form>
<span style="margin-right:30px;"> Search </ span>
<input type="text" size="35" id="inputCari" />
</ Form>
</ Div>
style="clear:both;" <br />
<div id="copyright" align="right">
Copyright 2011 <a href="http://nikolius-luiso.web.id" title=""> Nikolius Luiso </ a>
</ Div>
</ Div>
</ Body>
</ Html>

This application has been set for the controller automatically opens niko.php as front page or pages indexnya. For these settings in the file / system / application / config / routes.php following dibaris
PHP Code:

$ Route ['default_controller'] = "niko";
and content for niko controller located in / system / application / controllers / niko.php are as follows
PHP Code:
Niko class extends Controller {
Niko function ()
{
parent:: Controller ();
}

function index ()
{
/ * Call the view template we had over who is located in / system / application / views / niko.php * /
$ This-> load-> view ('niko');
}
}

The main action of this tutorial is actually located below dizscript who call the jquery jquery autocomplete plugin and controller that will return a value when invoked by the plugin ajax. I include it again zscript js as follows
PHP Code:

$ (Function () {
/ * Find the element with id = "inputCari" * /
$ ("# InputCari"). Autocomplete ({
/ * Url autocomplete ajax reply destination * /
url: '<? php echo base_url ();?> index.php / search /',
/ * Result returned from the ajax was given a span tag to be red * /
showResult: function (value, data) {
return '<span style="color:red">' + value + '</ span>';
},
/ * Maximum number of items that will be displayed * /
maxItemsToShow: 8
});
});

And this is the content of the search controller who is located in / system / application / controllers / pencarian.php who jquery autocomplete plugin called by us earlier.
PHP Code:

class Search extends Controller {
function search ()
{
parent:: Controller ();
}

function index ()
{
/ * Grab the key parameters being sent from the autocomplete jquery plugin earlier * /
$ Q = $ this-> input-> post ('q');

/ *
for the purposes of this tutorial is a direct list of data items declared in the form of an array,
cuman usually in practice will usually list these items will be in the query / generated from the database application
* /
$ Items = array (
"Great Bittern" => "Botaurus Stellaris',
"Little Grebe" => "Tachybaptus ruficollis",
"Black-necked Grebe" => "Podiceps nigricollis",
"Little Bittern" => "Ixobrychus minutus",
"Black-crowned Night Heron" => "Nycticorax nycticorax",
/ *
....
....
....
list items that will be returned
....
....
....
* /
"Madeira Little Shearwater" => "Puffinus baroli",
"House Finch" => "Carpodacus mexicanus",
"Green Heron" => "Butorides virescens",
"Solitary Sandpiper" => "Tringa solitaria",
"Heuglin's Gull" => "Larus heuglini"
);

/ * Parsing the data return and remove the items that match the keywords * /
foreach ($ items as $ key => $ value) {
if (strpos (strtolower ($ key), $ q)! == false) {
echo "$ key | $ valuen";
}
}
}
}

So that was the outline to make the autocomplete feature or autosuggestion in your web form. Quite simple is not it? Do not forget to download the source code of this tutorial for you to test yourself though more clearly what kind of how it works. You can also try directly through who I provide a demo page. As always, comments and suggestions are expected to make my spirit to write another articles. Thank you.

Demo Page dan Source Code
DownloadDemo dan Download Source Code

Creating Your Own Article Rewriter with Ajax

What is article rewriter? Article rewriter is a kind of program that rewrote a paper or an article with the words that are different from the original article, so as to create a little unique content. For the lazy writing but want to make for chasing dollars from google adsense, usually using articel rewriter to copy and paste an article. But here we will see how the code rewriter to make the code simpler.

We will make the code rewriter with using PHP, MySQL and jQuery Ajax for data communication and display. We will also learn how to make a highlight words already in the rewrite. For details, please see Demo Article Rewriter. And the following algorithm and the code:

Rewriter algorithm is as follows:

Make text textarea to rewrite articles that will be
Taking the text of the article and send it through ajax
Processing the text sent to the server for at-rewrite, by searching the word synonyms in the database.
Showing results rewrite.
Make text textarea to rewrite articles that will be

<textarea rows="10" cols="80" name="komentar" id="artikel"> </ textarea>
<b> Result: </ b>
<br>
<img src="ajax-loader.gif" style="display:none" id="loading">
<br>

<Div id = "re-articel" style = "width: 650; height: 200; border: 1px solid black;
text-align: left; padding: 10; overflow: auto ">
</ Div>
Taking the text of the article and send it through ajax
<script type="text/javascript" src="jquery-1.4.4.min.js"> </ script>
<script>
$ (Document). Ready (function () {
$ ("# Button"). Click (function () {
/ / Show loading animation
$ ("# Loading"). Show ();
/ / Retrieve text from a textarea
var article = $ ("# article"). val ();
/ / Send a text article to the server
$. Ajax ({
type: "POST",
url: "rewriter.php",
Data: "article =" + articles,
success: function (msg) {
/ / If it is sent is shown
$ ("# Re-articel"). Html (msg);
$ ("# Loading"). Hide ();
}
});
});
$ ("# Reset"). Click (function () {
$ ("# Re-articel"). Html ("");
});
});
</ Script>

Processing the text sent to the server for at-rewrite, by searching the word synonyms in the database.

In the above code we send the text of the article to the server to be processed by the PHP code rewriter.php

<? Php
if ($ _POST ['article']) {
include "koneksi.php";
$ Article = nl2br ($ _POST ['article']);
/ / We separate sentences based on a space
/ / To retrieve the words
$ Ar = explode ("", $ article);
$ Result = "";
foreach ($ ar as $ value) {
if (preg_match ("/ \ .|'/",$ value)) {
/ / We find these words in MySQL database
$ Search = mysql_query ("select * from synonyms where kata1 = '$ value'");
$ J = mysql_num_rows ($ search);
if ($ j> 0) {
$ Ka = mysql_fetch_array ($ search);
$ Result = $ result. "<span Class='re'>". Stripslashes ($ ka ['kata2'])."</ span> ";
Else {}
$ Cari2 = mysql_query ("select * from synonyms where kata2 = '$ value'");
$ J2 = mysql_num_rows ($ cari2);
if ($ j2> 0) {
$ Ka2 = mysql_fetch_array ($ cari2);
$ Result = $ result. "<span Class='re'>". Stripslashes ($ ka2 ['kata1'])."</ span> ";
Else {}
$ Result = $ hasil.stripslashes ($ value). "";
}
}
Else {}
$ Ka = preg_replace ("/ \ ./","",$ value);
$ Search = mysql_query ("select * from synonyms where kata1 = '$ ka'");
$ J = mysql_num_rows ($ search);
if ($ j> 0) {
$ Kax = mysql_fetch_array ($ search);
$ Result = $ result. "<span Class='re'>". Stripslashes ($ kax ['kata2'])."</ span>. ";
Else {}
$ Result = $ hasil.stripslashes ($ ka) "..";
}
}
}
echo $ result;
}
?>

Showing results rewrite.

$ ("# Re-articel"). Html (msg);
Where # is the tag re-articel <div> who had ID = re-articel

For the full code please download the source code. For demo see article rewriter.
via codingwear