Ajax : Dynamic Text Box #2

This picture below is stolen from http://josegjimenez.files.wordpress.com/2008/04/ajax-logo.jpg?w=474&h=236

Maaf ya tutorialnya telat keluar, soalnya tadi lagi abis blogwalking…

Ya udah, untuk mempersingkat waktu *hiperbola banget* kita langsung ke tutorialnya aja yah…

Kemaren kita udah ngebahas tentang dynamic text box. Nah, namun program yang kita bahas kemaren itu belum selesai. Karena belum ada sisi penggunaan dari program kecil yang udah kita buat sebelumnya.

Untuk itu, kita akan belajar membuat sebuah program jadi yang udah kecil sebagai implementasi program tadi.

Ada tools tambahan yang kita butuhkan dalam pengerjaan aplikasi ini yaitu:

PHP Engine

Kita memerlukan sebuah PHP Engine yang bisa kamu dapatkan versi terbarunya dari official web php. PHP Engine ini berfungsi untuk menginterpret script php yang kita perlukan untuk mengambil data dari database, menampilkan data tersebut ke web browser dan menyimpan data ke dalam database.

Web Server

Karena aplikasi yang akan kita buat adalah aplikasi berbasis web yang di jalankan di atas platform bahasa php, maka kita membutuhkan sebuah web server yang dapat memanggil fungsi PHP Engine untuk meng-interpret kode php tersebut. Web server yang sering digunakan adalah Apache. Kamu bisa men-download versi terbaru dari official web-nya.

Database Server

Database server kita perlukan untuk menyimpan data-data yang kita gunakan dalam aplikasi ini. Untuk keperluan database server ini, kita akan menggunakan MySQL Database Server. Kamu bisa mengunduh aplikasi ini dari official web-nya.

Kalau kamu masih bingung tentang istilah-istilah ini, kamu boleh menanyakannya kepada saya di sini. Dengan senang hati saya akan menjawabnya.

Jika kamu sudah memiliki hostingan, kamu bisa menggunakan hostingan tersebut sebagai Web server dan Database server karena pada umumnya hosting sudah mendukung PHP, MySQL dan Apache Web Server.

Langkah-langkah

Install semua tools yang kita butuhkan untuk membuat aplikasi ini.

Bagi yang memiliki hostingan, buka panel PHP MyAdmin kamu dan eksekusi skrip sql berikut.

Use namadatabase;

CREATE TABLE `t_pengguna` (
`id` int(11) NOT NULL auto_increment,
`nama` varchar(50) NOT NULL,
`no_hp` longtext NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Bagi kamu yang menjalankan aplikasi ini pada localhost, buka command prompt kamu/layar console dan ketikkan perintah berikut untuk login ke mysql server.

mysql -u username -p

Lalu ketikkan password MySQL Server kamu. Setelah login berhasil, ketikkan kode diatas untuk membuat tabel yang akan kita gunakan untuk menyimpan data.

Buat suatu folder [namanya boleh apa saja - asumsi nama foldernya adalah dyntextbox] pada web server kamu/hostingan untuk menyimpan seluruh file dan folder untuk kebutuhan aplikasi. Buat dua buah folder baru dan beri nama masing-masing folder config dan function.

Pada folder config, buat sebuah file baru yang bernama config.inc.php dan ketikkan list code berikut ini. File ini berisi konfigurasi database server seperti username, password, ip(internet protocol), dan nama database.

<?
/* MySQL Server Connection Configuration */
global $DB_SERVER;
$DB_SERVER = “172.16.1.2″;
$DB_USER = “username”;
$DB_PASSWORD = “password”;
$DB_NAME = “databasename”;
?>

Pada folder function buat sebuah file php dan beri nama dbConnect.php dan ketikkan list code berikut pada file tersebut. File ini berfungsi untuk membangun sebuah koneksi ke database server dan mengambil data dari database server.

<?php
function doConnect()
{
global $DB_SERVER;
global $DB_USER;
global $DB_PASSWORD;
global $DB_NAME;
$con = mysql_connect($DB_SERVER, $DB_USER, $DB_PASSWORD) or die(mysql_error());
mysql_select_db($DB_NAME, $con) or die(mysql_error());
return $con;
}

function doQuery($sql)
{
$result = mysql_query ($sql) or die (”ERROR: Unable to query database.” . mysql_error());
return $result;
}

function fetchResultset($result)
{
$res_array = array();

for($count=0;$row = mysql_fetch_array($result);$count++) {
$res_array[$count] = $row;
}
return $res_array;
}
?>

Pada folder dyntextbox buat sebuah file php dan beri nama form.php dan isikan file tersebut dengan list code di bawah ini. File ini kita gunakan sebagai tampilan untuk menambahkan data baru ke dalam database server.

<html>
<head>
<title> Dynamic Text Box </title>
<script type=”text/javascript”>
<!–

function addTxtBox()
{
var lastField = 0;

for (var i = 0; i < document.dynTxtBox.elements.length; i++)
{
if (document.dynTxtBox.elements[i].type == ‘text’ && document.dynTxtBox.elements[i].name.substr(0, 7) == ‘nomrhp_’)
{
lastField = document.dynTxtBox.elements[i].name.substr(7, document.dynTxtBox.elements[i].name.length);
}
}

var lastRow = document.getElementById(’text_box_row_’ + lastField );
if (lastRow)
{
var newRow = document.createElement(’TR’);
newRow.id = ‘text_box_row_’ + (parseInt(lastField) + 1);
var td = document.createElement(’TD’);
td.align = ‘left’;
newRow.appendChild(td);

td.appendChild(document.createTextNode(”No Hp #Alternatif : “));

newRow.appendChild(td);

td = document.createElement(’TD’);
/*var txtbox = document.createElement(’INPUT’);
txtbox.type = ‘text’;
td.appendChild(txtbox);
txtbox.name = ‘nomrhp_’ + (parseInt(lastField) + 1);
td = document.createElement(’TD’);*/
td.appendChild(document.createTextNode(’:'));
td.align=’center’;

newRow.appendChild(td);

var txtbox = document.createElement(’INPUT’);
txtbox.type = ‘text’;
td.appendChild(txtbox);
txtbox.name = ‘nomrhp_’ + (parseInt(lastField) + 1);

var btn = document.createElement(’INPUT’);
btn.type = ‘button’;
btn.value = “-”;
btn.onclick = function() { delTxtBox(parseInt(lastField) + 1); };

td = document.createElement(’TD’);
td.align = ‘left’;
td.appendChild(txtbox);
td.appendChild(btn);
newRow.appendChild(td);
lastRow.parentNode.insertBefore(newRow, lastRow.nextSibling);
}
}

function delTxtBox(fieldNumber)
{
var lastRow = document.getElementById(’text_box_row_’ + fieldNumber);
if (lastRow)
{
lastRow.removeNode(true);
}
}

function checkSemuaField()
{
var form = document.getElementById(”dynTxtBox”);
var nama = form.nama.value;
var retValue = true;
if(trim(nama)==”")
{
alert(”Enter the name.”);
retValue = false;
}
else
{
for (var i = 0; i < form.elements.length; i++)
{
if (document.dynTxtBox.elements[i].type == ‘text’ && document.dynTxtBox.elements[i].name.substr(0, 7) == ‘nomrhp_’)
{
if(trim(document.dynTxtBox.elements[i].value)==”" || isNaN(trim(document.dynTxtBox.elements[i].value)))
{
alert(”Enter all phone number and fill by number.”);
retValue = false;
break;
}
}
}
}
return retValue;
}

function trim(string)
{
return string.replace(/^\s*/, “”).replace(/\s*$/, “”);
}
</script>
</head>

<body>
<form method=post name=”dynTxtBox” onsubmit=”return checkSemuaField()” action=”tambahdata.php”>
<table border=1 cellspacing=0 cellpadding=0 width=300>
<tr>
<td>Nama</td>
<td align=center width=20>:</td>
<td><input type=”text” name=”nama”></td>
</tr>
<tr id=”text_box_row_1″>
<td>No Hp </td>
<td width=”20″ align=center>:</td>
<td><input type=”text” name=”nomrhp_1″><INPUT TYPE=”button” value=”+” onclick=”addTxtBox()”></td>
</tr>
<tr>
<td colspan=”3″>
<INPUT TYPE=”submit” value=”Tambahkan Data”><INPUT TYPE=”button” value=”Lihat Semua Data” onclick=”window.location=’data.php’”>
</td>
</tr>
</table>
</form>
</body>
</html>

Kemudian, buat lagi sebuah file baru pada folder dyntextbox dan beri nama data.php dan ketikkan list code dibawah ini. File ini kita gunakan untuk menampilkan semua data yang diambil dari database server.

<?
include_once “config/config.inc.php”;
include_once “function/dbConnect.php”;

$sql = “select * from t_pengguna”;
$con = doConnect();
$rs = doQuery($sql);
$rs = fetchResultset($rs);
$jlData = count($rs);
?>
<table border=1>
<tr bgcolor=#efefef>
<td><B>Nama Pengguna</B></td>
<td><B>No Hp</B></td>
</tr>
<?
for($i=0; $i<$jlData; $i++)
{
if($i%2)
$bgcolor = “#618C05″;
else
$bgcolor = “#C8FA5B”;
echo “<tr bgcolor=$bgcolor><td>”.$rs[$i]["nama"].”</td>”;
echo “<td>”;
$nohp = split(”[|]“, $rs[$i]["no_hp"]);
for($j=0;$j<count($nohp);$j++)
{
echo $nohp[$j].”<br>”;
}
echo “</td></tr>”;
}
?>
<A HREF=’form.php’>Tambah Data Baru</A>
</table>

Kemudian buat sebuah file php baru pada folder dyntextbox dan beri nama tambahdata.php dan kita ketikkan list code dibawah

<?
include_once “config/config.inc.php”;
include_once “function/dbConnect.php”;

$post = $_POST;
$arr = Array();
$i = 0;

foreach ($post as $key => $value)
{
$arr[$i]= $value;
$i++;
}

$nama = $arr[0];
$nohp = “”;

$jlVar = count($arr);

for($i=1;$i<$jlVar;$i++)
{
$nohp .= $arr[$i].”|”;
}

$nohp = substr($nohp, 0, strlen($nohp)-1);
$nama = addslashes($nama);
$nohp = addslashes($nohp);
$sql = “insert into t_pengguna values(”, ‘$nama’, ‘$nohp’)”;

$con = doConnect();
doQuery($sql);
echo “Data anggota baru berhasil ditambahkan<br>”;
echo “<A HREF=’form.php’>Tambah Data Baru</A> | <A HREF=’data.php’>Lihat Semua Data</A>”;
?>

Buka sebuah web browser dan ketikkan url file form.php untuk menambahkan data ke dalam database server.

Ahh… gimana?? Enak kan ngecoding? Oh ya, klo ada sesuatu yang gak kamu mengerti, tanyain aja kesini. Dengan senang hati saya akan menjawabnya…

Oh ya, saya hampir lupa. Aplikasi jadi dapat kamu download di sini. Jangan lupa untuk men-dump file table.sql terlebih dahulu.

Happy coding