Showing posts with label MySQL. Show all posts

Wednesday, April 13, 2011

Mengetahui Fitur Login/Logout Halaman Web Dengan PHP

2:53 AM

Kajetz

Banyak sekali aplikasi di internet yang menggunakan fitur login dan logout. Fungsinya tentu saja membatasi akses terhadap layanan tertentu yang disediakan pada situs tersebut. Hanya anggota yang telah terdaftar saja yang diijinkan mengakses layanan-layanan khusus tersebut. Kali ini PCplus akan membahas bagaimana membuat aplikasi yang memiliki fitur login/logout. Yang dibahas di sini adalah halaman login dan logoutnya saja, sedangkan isi aplikasi yang terletak di dalamnya bisa Anda kembangkan sendiri.

Dalam pembuatan aplikasi ini kita membutuhkan database yang akan menyimpan data-data dari para anggota yang telah terdaftar. Buatlah database dengan MySQL sebagai berikut:

mysql> create database daftar;

mysql> create table anggota(

-> uname varchar(20),

-> pswd varchar(32));

Database tersebut terdiri dari satu tabel bernama “anggota” dan tabel tersebut memiliki 2 buah field yaitu uname untuk menyimpan user name dan pswd untuk menyimpan password. Mengapa field pswd ditentukan untuk memiliki 32 karakter? Kita akan bahas nanti.

Sekarang mula-mula kita akan buat dahulu halaman pendaftaran anggota. Skripnya diberikan pada listing 1.

Listing 1. Halaman pendaftaran

<HTML>

<HEAD>

<TITLE> Sign Up </TITLE>

</HEAD>

<BODY>

Isilah username dan password yang Anda inginkan <BR>

<PRE>

<FORM NAME="frmSignUp" METHOD="post" ACTION="process.php">

Username :

Password : <INPUT TYPE="password" NAME="pswd">

<INPUT TYPE="submit" VALUE="Submit">

</FORM>

</BODY>

</HTML>

Simpanlah skrip ini dengan nama signup.php. Diberi nama signup.htm pun boleh karena pada kenyataannya tidak ada skrip php pada file ini. Jika dijalankan pada browser hasilnya akan nampak seperti gambar 1.

Berikutnya kita akan membuat file process.php yang akan memproses pendaftaran kita tadi. Skripnya diberikan pada listing 2.

Listing 2. Halaman proses

<HTML>

<HEAD>

<TITLE> Processing your Account </TITLE>

</HEAD>

<BODY>

<?

$uname = $_POST['uname'];

$pswd = md5($_POST['pswd']);

$host = "localhost";

$user = "root";

$pwd = "rahasia";

$db = "daftar";

$stop = 0;

$sql = "select uname from anggota";

$conn = @mysql_connect($host,$user,$pwd) or

die("Koneksi gagal : " . mysql_error());

mysql_select_db($db);

$qry = mysql_query($sql) or

die("Query salah : " . mysql_error());

while ($row = mysql_fetch_array($qry)) {

if ($uname == $row['uname']) {

echo "Username $uname was already chosen by someone else <BR>";

echo "Go back and choose another username";

$stop = 1;

break;

}

}

if ($stop==0) {

$sql = "insert into anggota values ('$uname','$pswd')";

$qry = mysql_query($sql) or

die("Query salah : " . mysql_error());

echo "Your account is successfully created <BR>";

echo "<A HREF='login.php'> Click here </A> to login";

}

?>

</BODY>

</HTML>

Perhatikan bahwa pada baris kedua skrip php (setelah bagian <BODY>) terdapat fungsi md5. Fungsi md5 merupakan fungsi yang menghitung md5 hash dari suatu string. (Mengenai hal ini Anda dapat mendapatkan informasi lebih detil di http://www.faqs.org/rfcs/rfc1321.html). Md5 hash menghasilkan 32 karakter dalam format heksadesimal. Itulah sebabnya mengapa field pswd dibuat bertipe data karakter dengan panjang 32 karakter. Dengan md5 hash ini password Anda akan disimpan dalam bentuk yang sangat sulit ditebak.

Pada skrip ini mula-mula diperiksa apakah username yang dipilih telah ada di dalam database. Jika telah ada, maka php akan memberikan peringatan bahwa username tersebut telah ada dan Anda dipersilakan membuat username baru. Jika belum ada, maka informasi username dan password Anda akan didaftarkan ke dalam database dan Anda akan diberitahu bahwa account Anda telah dibuat. Bandingkan dengan gambar 2 dan gambar 3.

Setelah proses sign up berhasil, kini kita akan membuat halaman untuk login. Skripnya diberikan pada listing 3.

Listing 3. Halaman login

<HTML>

<HEAD>

<a class="zem_slink" href="http://en.wikipedia.org/wiki/Login" title="Login" rel="wikipedia">Login</a>

</HEAD>

<BODY>

Registered user log in:

<PRE>

<FORM NAME="frmLogIn" METHOD="post" ACTION="main.php">

Username : <INPUT TYPE="text" NAME="uname">

Password : <INPUT TYPE="password" NAME="pswd">

<INPUT TYPE="submit" VALUE="Submit">

</FORM>

</PRE>

New user please register

<A HREF="signup.php"> here </A>

</BODY>

</HTML>

Simpanlah file ini dengan nama login.php atau login.htm. Jika dijalankan pada browser hasilnya akan nampak seperti gambar 4. Skrip ini akan diolah pada file main.php. Nah, skrip dari file main.php itu sendiri diberikan pada listing 4.

Listing 4. Pengolah login

<HTML>

<HEAD>

<TITLE> Main Page </TITLE>

</HEAD>

<BODY>

<?

$uname = $_POST['uname'];

$pswd = md5($_POST['pswd']);

$host = "localhost";

$user = "root";

$pwd = "rahasia";

$db = "daftar";

$stop = 0;

$sql = "select * from anggota where uname='$uname'";

$conn = @mysql_connect($host,$user,$pwd) or

die("Koneksi gagal : " . mysql_error());

mysql_select_db($db);

$qry = mysql_query($sql) or

die("Query salah : " . mysql_error());

$num = mysql_num_rows($qry);

$row = mysql_fetch_array($qry);

if ($num==0) {

echo "Username not found <BR>";

echo "Go back and try another username";

} else {

if ($pswd!=$row['pswd']) {

echo "Your password is incorrect <BR>";

echo "Go back and type the correct password";

} else {

echo "You are successfully logged in";

}

}

?>

</BODY>

</HTML>

Pada prinsipnya skrip main.php ini mengolah data-data dari halaman login. Langkah pertama yang dilakukan tentu saja adalah koneksi ke database. Setelah itu mencocokkan username yang ada di database, jika tidak cocok Anda diminta memasukkan username kembali. Jika username cocok dengan record yang ada pada database, diperiksa passwornya. Jika passwordnya cocok, maka Anda akan dapat login, jika tidak Anda diminta untuk mengisi password yang tepat. Mudah bukan?

Namun sebenarnya skrip tersebut di atas belumlah selesai. Mengapa? Sebab skrip seperti di atas (sekalipun telah diberi “pagar” di sana-sini) tetap mudah ditembus oleh siapapun, bahkan Anda tidak perlu belajar menjadi hacker untuk dapat menembusnya.

Contoh mudah, isilah form login dengan data yang ada pada database Anda. Dengan sendirinya Anda akan login dan masuk ke halaman main.php yang bertuliskan “You are successfully logged in”. Sekarang tekan tombol “back” browser Anda, lalu setelah Anda tiba kembali ke halaman login, tekan tombol “forward”. Apa yang terjadi? Ya, Anda akan kembali masuk ke halaman main.php dan login dengan sukses. Itu artinya jika Anda lalai dan meninggalkan komputer Anda, orang lain dengan mudah akan masuk menggunakan account Anda.

Lalu bagaimana solusinya? Salah satu caranya adalah dengan menambahkan session ke dalam aplikasi tersebut. Dengan memeriksa apakah suatu variabel session pernah didaftarkan atau belum, maka aplikasi tersebut menjadi lebih aman. Dengan menggunakan solusi ini, fitur login/logout pada aplikasi kita akan terpecah menjadi lima file yang diberikan pada listing 5 hingga listing 9.

Listing 5. File login.php

<HTML>

<HEAD>

<TITLE> Login </TITLE>

</HEAD>

<BODY>

Registered user log in: <BR>

<PRE>

<FORM NAME="frmLogIn" METHOD="post" ACTION="cekpswd.php">

Username : <INPUT TYPE="text" NAME="uname">

Password : <INPUT TYPE="password" NAME="pswd">

<INPUT TYPE="submit" VALUE="Submit">

</FORM>

</PRE>

New user please register

<A HREF="signup.php"> here </A>

</BODY>

</HTML>

File login.php tersebut hanyalah form login biasa seperti gambar 4. Parameter ACTION dari tag <FORM> diisi dengan cekpswd.php, karena isian dari form ini akan diperiksa oleh file cekpswd.php.

Listing 6. File cekpswd.php

<?

session_start();

$uname = $_POST['uname'];

$pswd = md5($_POST['pswd']);

$host = "localhost";

$user = "root";

$pwd = "rahasia";

$db = "daftar";

$sql = "select * from anggota where uname='$uname'";

$conn = @mysql_connect($host,$user,$pwd) or

die("Koneksi gagal : " . mysql_error());

mysql_select_db($db);

$qry = mysql_query($sql) or

die("Query salah : " . mysql_error());

$num = mysql_num_rows($qry);

$row = mysql_fetch_array($qry);

if ($num==0 OR $pswd!=$row['pswd']) {

header("Location: sorry.php");

} else {

$_SESSION['login']=1;

header("Location: main.php");

}

?>

File cekpasswd.php digunakan untuk memeriksa username dan password yang dimasukkan pada file login.php. Pada file ini mulai diinisiasi sebuah session. Langkah selanjutnya adalah mencocokkan username dan password dengan record yang terdapat pada database. Jika username dan password itu tidak cocok – bisa usernamenya tidak terdaftar atau passwordnya yang salah – maka skrip tersebut akan mengarahkan langkahnya menuju ke file sorry.php, tapi jika benar maka arahnya akan menuju ke file main.php dan sebuah variabel session diinisiasi. (Pada skrip kita variabel tersebut diberi nama $_SESSION[‘login’]). Yang berfungsi sebagai “pengatur arah” adalah fungsi header(). Fungsi header() akan memberikan output berupa HTTP header yang harus diberikan sebelum ada tag HTML apapun. Itu sebabnya file cekpswd.php hanya terdiri dari skrip php saja dan tidak memiliki tag HTML. (Kalaupun toh ada, itu harus dibawah skrip php yang mengeluarkan HTTP header). Untuk informasi lebih lanjut mengenai HTTP header Anda dapat mengunjungi http://www.w3.org/Protocols/rfc2616/rfc2616. Yang jelas fungsi header() pada skrip kita di atas digunakan untuk redirection, yaitu mengarahkan browser untuk memanggil URL lain. Oleh karena output file cekpswd.php hanya HTTP header saja, maka file ini tidak memiliki “penampakan fisik” pada browser.

Listing 7. File main.php

<?

session_start();

if(!isset($_SESSION['login'])) {

include("login.php");

} else {

?>

<HTML>

<HEAD>

<TITLE> Main Page </TITLE>

</HEAD>

<BODY>

You are successfully logged in <BR>

You can access this application <BR> <BR>

<A HREF="logout.php"> Log Out </A>

</BODY>

</HTML>

<?

}

?>

File main.php adalah file yang akan dipanggil apabila username dan password yang dimasukkan pada halaman login.php berhasil melewati “satpam” cekpswd.php. Lihat gambar 5. File inilah yang nantinya bisa dikembangkan untuk menyusun aplikasi-aplikasi web yang diperuntukkan bagi mereka yang login. Sebelumnya pada bagian awal dari file ini diperiksa terlebih dahulu apakah variabel $_SESSION[‘login’] sudah pernah diinisiasi dengan fungsi isset(). Seandainya belum, itu artinya user yang mengakses halaman main.php belum login. Jika demikian, maka orang tersebut akan “diangkut” menuju ke halaman login.php untuk login terlebih dahulu. Apakah mungkin user yang belum login dapat langsung menuju ke halaman main.php? Mungkin saja apabila ia langsung mengetikkan “http://bla..bla..bla/main.php” di bagian address browser. Oleh karena itu harus diberi “satpam” agar user tersebut tidak main selonong saja.

Jika seandainya aplikasi Anda terdiri dari beberapa halaman, maka pada prinsipnya setiap halaman harus diberi skrip sebagai berikut:

<?

session_start();

if(!isset($_SESSION['login'])) {

include("login.php");

} else {

?>

Di bawah skrip ini baru diberikan tag-tag HTML atau skrip PHP lain yang menyusun aplikasi. Dengan demikian setiap halaman selalu memeriksa apakah variabel session $_SESSION['login'] telah diinisiasi. Jika belum, maka redirection akan beraksi dan “menendang” user untuk kembali ke halaman login.php.

Listing 8. File sorry.php

<HTML>

<HEAD>

<TITLE> Sorry </TITLE>

</HEAD>

<BODY>

Your user name or password is incorrect <BR>

Sorry, you are not allowed to access this page

</BODY>

</HTML>

File ini akan muncul apabila user salah memasukkan username atau password pada halaman login. Lihat gambar 6. User tersebut dapat mengklik tombol back di browser untuk kembali ke halaman login dan memasukkan username dan password yang benar.

Listing 9. File logout.php

<?

session_start();

unset($_SESSION['login']);

session_destroy();

header("Location: login.php");

?>

File ini digunakan untuk melakukan proses logout. Pada file ini variabel $_SESSION['login'] dihilangkan sekaligus bersama dengan sessionnya. Langkah selanjutnya adalah mengarahkan aplikasi ke halaman login.php. Setelah session dihilangkan, maka user harus login lagi untuk dapat mengakses aplikasi tersebut.

Pada dasarnya fungsi header() tidak harus mengarahkan aplikasi ke file login.php. Bisa saja Anda membuat sebuah file lain yang bernama goodbye.php misalnya yang isinya adalah ucapan perpisahan.

Nah, selamat belajar mengembangkan aplikasi dengan menggunakan fitur login/logout.

Read more »

Posted in: Anda,Database,FAQs Help and Tutorials,Internet,Kali,Komputer,Languages,MySQL,Programming,Super Junior

Membuat Aplikasi Jajak Pendapat Dengan PHP

2:39 AM

Kajetz

No comments

Akhir-akhir ini aplikasi jajak pendapat cukup marak terdapat di situs-situs internet. Masalah yang diangkat pun bisa beragam, misalnya politik, sosial, budaya, sains, dan lain-lain. Situs-situs yang bernuansa khusus juga seringkali memiliki jajak pendapat sesuai dengan nuansa yang dimilikinya. Misalnya situs sepakbola akan mengangkat jajak pendapat siapa pemain terbaik di suatu liga, situs tentang Linux akan mengangkat jajak pendapat tentang distro apa yang paling favorit, situs handphone akan mengangkat jajak pendapat tentang ringtone favorit, dan masih banyak lagi.

Nah, sekalipun tema yang diangkat bisa bermacam-macam, namun pada dasarnya aplikasi jajak pendapat cukup mudah untuk dibuat. Umumnya aplikasi jajak pendapat hanya terdiri dari 2 halaman saja, yaitu form HTML yang berisi item-item pilihan dan hasil dari jajak pendapat tersebut. Hasil jajak pendapat dapat ditampilkan dengan bantuan HTML biasa atau dengan suatu aplikasi yang dapat menghasilkan gambar-gambar yang menarik sehingga hasil jajak pendapat dapat ditampilkan dalam bentuk pie chart misalnya. Untungnya, PHP juga dapat digunakan untuk menghasilkan gambar.

Aplikasi jajak pendapat yang akan dibahas pada bagian ini nantinya akan memberikan output berupa Pie Chart.

Untuk menyimpan hasil jajak pendapat diperlukan database, sehingga aplikasi ini juga akan menggunakan MySQL.

Aplikasi jajak pendapat yang kita buat kali ini akan mengangkat tema Pemain Terbaik Liga Italia musim kompetisi 2005/2006. Mengapa bukan tema yang berbau komputer? Distro Linux favorit misalnya? Yah, semata-mata hanya untuk “having fun” saja agar otak kita nggak berisi komputer melulu.

Mula-mula kita persiapkan dahulu databasenya. Kita akan buat database baru bernama poll sebuah tabel bernama favplayer yang berisi dua buah kolom yaitu “nama” dan “suara”. Langkah-langkahnya adalah sebagai berikut:

mysql> create database poll;

mysql> use poll

Database changed

mysql> create table favplayer(

-> nama varchar(20),

-> suara int);

Query OK, 0 rows affected (0.05 sec)

Anda juga dapat memanfaatkan phpMyAdmin untuk membuat database di atas.

Sebagai nilai awal kita isikan dahulu beberapa data sebagai berikut:

Nama	Suara
Del Piero	101
Totti	23
Nedved	215
Toni	73
Adriano	36
Kaka	41
Ibrahimovic	100
Trezeguet	88
Cassano	25

Setelah database disiapkan, sekarang kita buat halaman form yang berisi item-item pilihan. Script dari halaman item pilihan diberikan pada listing 1.

Listing 1. Halaman item pilihan

<HTML>

<HEAD>

<TITLE> Jajak Pendapat </TITLE>

</HEAD>

<BODY>

<H1> Jajak Pendapat </H1>

<H2> Pilih pemain terbaik <br>

Liga Italia musim 2005/2006 </H2>

<FORM NAME="poll" METHOD="post" ACTION="result.php">

<?

$host = "localhost";

$user = "myuser";

$pswd = "rahasia";

$conn = @mysql_connect($host,$user,$pswd)

or die("Koneksi gagal: " . mysql_error());

mysql_select_db("poll",$conn);

$strSQL = "select nama from favplayer";

$qry = @mysql_query($strSQL,$conn)

or die("Query salah: " . mysql_error());

while ($row = mysql_fetch_array($qry)) {

?>

<INPUT TYPE="radio" NAME="player" VALUE="<?=$row['nama']?>">

<?=$row['nama']?> <BR>

<?

}

?>

<BR>

<INPUT TYPE="submit" VALUE="VOTE!">

</FORM>

</BODY>

</HTML>

Berilah nama skrip ini dengan polling.php. Jika dijalankan di browser akan nampak seperti gambar 1.

Item-item pilihan yang terdapat pada halaman ini diambil dari record-record pada field “nama” tabel favplayer. Dengan demikian jika isi dari field nama diubah, otomatis item pilihan tersebut akan ikut berubah, sehingga memudahkan Anda untuk berganti tema jajak pendapat.

Jika Anda klik tombol “VOTE!”, maka data-data pada form ini akan diolah di halaman result.php. Nah, isi skrip file result.php diberikan pada listing 2.

Listing 2. Hasil jajak pendapat

<?

Header("Content-Type:image/jpeg");

// --- Koneksi ke MySQL --- //

$host = "localhost";

$user = "root";

$pswd = "";

$player = $_POST['player'];

$conn = @mysql_connect($host,$user,$pswd)

or die("Koneksi gagal: " . mysql_error());

mysql_select_db("poll",$conn);

// --- mengupdate suara --- //

$strSQL = "update favplayer set suara=suara+1 where nama='$player'";

$upd = @mysql_query($strSQL,$conn)

or die("Query salah: " . mysql_error());

// --- Ambil data dari database --- //

$strSQL = "select * from favplayer";

$qry = @mysql_query($strSQL,$conn)

or die("Query salah: " . mysql_error());

// --- menentukan data yang akan dibuat pie chartnya --- //

$i=0;

while ($row=mysql_fetch_array($qry)) {

$data[$i] = $row["suara"];

$str[$i] = "$row[nama]" . " = " . "$row[suara]";

$i++;

}

// --- deklarasi variabel --- //

$total = 0;

$d = array();

$kor_x = array();

$kor_y = array();

$t_x = array();

$t_y = array();

// --- menentukan besar sudut setiap bagian pie --- //

for($j=0;$j<=$i-1;$j++) {

$total += $data[$j];

}

$d[0] = 0;

for($x=1;$x<=$i;$x++) {

$d[$x] = ($data[$x-1]/$total) * 360;

$d[$x] += $d[$x-1];

}

// --- menentukan warna --- //

$img = ImageCreate(700,700);

$warna[0] = ImageColorAllocate($img,0,255,0);

$warna[1] = ImageColorAllocate($img,255,0,0);

$warna[2] = ImageColorAllocate($img,0,0,255);

$warna[3] = ImageColorAllocate($img,255,0,255);

$warna[4] = ImageColorAllocate($img,255,255,0);

$warna[5] = ImageColorAllocate($img,128,128,128);

$warna[6] = ImageColorAllocate($img,255,128,0);

$warna[7] = ImageColorAllocate($img,0,150,255);

$warna[8] = ImageColorAllocate($img,112,0,255);

$warna[9] = ImageColorAllocate($img,128,255,0);

$warna[10] = ImageColorAllocate($img,255,255,255);

$hitam = ImageColorAllocate($img,0,0,0);

$putih = ImageColorAllocate($img,255,255,255);

ImageFill($img,0,0,$putih);

// --- membentuk pie --- //

for($k=1;$k<=$i;$k++) {

// --- menggambar bagian-bagian pie --- //

ImageArc($img,150,150,250,250,$d[$k-1],$d[$k],$hitam);

// --- mencari koordinat batas --- //

$kor_x[$k] = round(150+(125*cos(deg2rad($d[$k-1]))));

$kor_y[$k] = round(150+(125*sin(deg2rad($d[$k-1]))));

// --- mencari titik tengah --- //

$t = round(($d[$k-1]+$d[$k])/2);

$t_x[$k] = round(150+(62.5*cos(deg2rad($t))));

$t_y[$k] = round(150+(62.5*sin(deg2rad($t))));

ImageLine($img,150,150,$kor_x[$k],$kor_y[$k],$hitam);

}

// --- mewarnai bagian pie --- //

// --- sekaligus membuat keterangan --- //

for($k=1;$k<=$i;$k++) {

ImageFillToBorder($img,$t_x[$k],$t_y[$k],$hitam,$warna[$k-1]);

ImageFilledRectangle($img,310,20*$k+50,320,20*$k+60,$warna[$k-1]);

ImageString($img,2,330,20*$k+50,$str[$k-1],$hitam);

}

// --- output gambar -- //

ImageJPEG($img);

?>

Pada dasarnya isi skrip ini adalah menghitung jumlah total suara, kemudian mengambil seluruh data jajak pendapat dari database dan kemudian menampilkannya dalam bentuk pie chart.

Sekarang aplikasi tersebut sudah siap. Jika Anda memberikan suara Anda, maka hasil jajak pendapat akan ditampilkan seperti pada gambar 2.

Anda dapat menambahkan sedikit skrip JavaScript untuk mencegah agar pemilih tidak dapat men-submit form sebelum dia memberikan suaranya.

Read more »

Posted in: FAQs Help and Tutorials,HTML,Internet,Komputer,Languages,Linux,MySQL,PHP,PhpMyAdmin,Programming

Membuat Buku Tamu Dengan PHP

2:13 AM

Kajetz

No comments

Buku tamu merupakan salah satu fitur standar yang terdapat dalam situs-situs di Internet, terutama situs-situs pribadi. Hampir dapat dipastikan, aplikasi buku tamu akan menggunakan database yang fungsinya adalah menyimpan daftar tamu yang pernah mengunjungi situs tersebut dan memberikan komentarnya. Untuk itu mula-mula kita persiapkan sebuah database – tentu saja menggunakan MySQL – dengan struktur sebagai berikut:

Field	Tipe Data
Nama	Varchar(30)
Email	Varchar(40)
Komentar	Text

Tabel disimpan dengan nama guest, sedangkan databasenya disimpan dengan nama gsbook.

Halaman web yang nantinya dirancang akan memiliki 3 halaman, yaitu halaman form buku tamu, halaman daftar tamu, dan halaman terima kasih.

Halaman form buku tamu akan berisi form untuk pengisian buku tamu.

Halaman daftar tamu akan berisi daftar tamu yang telah mengisi buku tamu.

Halaman terima kasih akan berisi ucapan terima kasih atas diisinya buku tamu.

Kita mulai perancangan kita dari halaman form buku tamu. Halaman form buku tamu berisi form untuk pengisian buku tamu. Pada halaman ini nanti akan ditambahkan suatu skrip yang akan melakukan verifikasi terhadap form yang belum diisi. Skrip halaman form buku tamu selengkapnya diberikan pada listing 1.

Listing 1. Form buku tamu

<HTML>

<HEAD>

<TITLE> Form </TITLE>

// 
JavaScript">
// ]]>

function pesan() {

var ceknama = document.forms[0].elements[0].value;

var cekemail = document.forms[0].elements[1].value;

var cekkom = document.forms[0].elements[2].value;

if (ceknama.length == 0) {

window.alert("Anda belum memasukkan nama Anda");

} else {

if ((cekemail.length == 0) || (cekemail.indexOf("@",1) == -1)) {

window.alert("Periksa kembali alamat email Anda");

} else {

if ((cekkom.length == 0)) {

window.alert("Anda belum berkomentar");

} else {

document.forms[0].submit();

}

}

}

}

</SCRIPT>

</HEAD>

<BODY>

Selamat Datang di Situs Kami

Silakan isi identitas Anda

<FORM NAME="identity" METHOD="post" ACTION="guest.php">

<PRE>

Nama : nama">

Email : <INPUT TYPE="text" NAME="email">

Komentar :

<TEXTAREA NAME="komentar" ROWS=10 COLS=30>

</TEXTAREA>

<INPUT TYPE="button" VALUE="Submit" onClick=pesan()>

</PRE>

</FORM>

</BODY>

</HTML>

Simpanlah file dengan nama bukutamu.html. Halaman form buku tamu akan terlihat seperti gambar 1. Yang perlu diingat adalah bahwa walaupun memiliki ekstensi .html, halaman ini harus tetap dijalankan di virtual direktori dengan mengetikkan http://localhost/direktori/namafile.html di bagian address browser.

Pembahasan dari skrip di atas adalah sebagai berikut: pada bagian head terdapat skrip JavaScript, skrip ini digunakan untuk verifikasi terhadap form yang belum diisi. Skrip tersebut dimulai dari bagian yang bertanda // .

Mula-mula skrip tersebut mengambil nilai dari setiap elemen form. Setelah itu nilai setiap elemen tersebut diperiksa, jika kosong, maka akan muncul peringatan. Bagian berikutnya merupakan form HTML biasa, tetapi pada bagian submit akan ditambahkan sebuah event handler yang mengacu pada skrip JavaScript yang terletak di bagian head sebagai berikut:

<INPUT TYPE="button" VALUE="Submit" onClick=pesan()>

Halaman berikutnya adalah halaman terima kasih. Halaman terima kasih merupakan halaman yang akan menampilkan ucapan terima kasih sekaligus di dalamnya terdapat skrip PHP yang digunakan untuk mengolah data yang dimasukkan pada halaman form buku tamu. Skrip selengkapnya diberikan pada listing 2.

Listing 2. Halaman terima kasih

<HTML>

<HEAD>

Buku Tamu

</HEAD>

<BODY>

<?

$host = "localhost";

$user = "root";

$pwd = "";

$conn = @mysql_connect ($host, $user, $pwd)

or die ("Koneksi Gagal, karena " . mysql_error());

mysql_select_db("gsbook",$conn);

$strSQL = "INSERT INTO guest (nama,email,komentar)

VALUES ('$_POST[nama]','$_POST[email]','$_POST[komentar]')";

$qry = @mysql_query($strSQL,$conn)

or die ("Query salah, karena: " . mysql_error());

?>

Terima kasih atas kesediaan Anda mengisi buku tamu.

<HR>

Klik di sini untuk melihat daftar para pengisi buku tamu.

</BODY>

</HTML>

Simpanlah file dengan nama guest.php. Halaman terima kasih akan terlihat seperti gambar 2.

Skrip di atas pada prinsipnya hanyalah membuka koneksi ke mysql dan menyimpan data-data yang telah dimasukkan ke dalam tabel. Pada bagian bawah terletak sebuah link yang merujuk pada halaman daftar tamu.

Klik di sini untuk melihat daftar para pengisi buku tamu.

File table.php inilah yang nantinya menampilkan daftar para pengisi buku tamu yang disajikan dalam bentuk tabel. Skrip selengkapnya dari file table.php diberikan pada listing 3.

Listing 3. Halaman daftar tamu

<HTML>

<HEAD>

Buku Tamu

</HEAD>

<BODY>

<CENTER>

<?

$host = "localhost";

$user = "root";

$pswd = "rahasia";

$conn = @mysql_connect ($host, $user, $pswd)

or die ("Koneksi Gagal: " . mysql_error());

mysql_select_db("gsbook",$conn);

$strSQL = "Select * from guest";

$qry= @mysql_query($strSQL,$conn)

or die ("Query salah: " . mysql_error());

$jml = mysql_num_rows($qry);

echo "Jumlah pengisi = $jml
";

?>

<TABLE BORDER=1>

<TR>

<TD BGCOLOR=#f32142> Nama </TD>

<TD BGCOLOR=#f32142> Email </TD>

Komentar

</TR>

<?

while ($row = mysql_fetch_array ($qry)) {

echo "<TR>";

echo "" . $row["nama"] . "";

echo "<TD BGCOLOR=#f7efde>" . $row["email"] . "</TD>";

echo "" . $row["komentar"] . "";

echo "</TR>";

}

?>

</TABLE>

</BODY>

</HTML>

Anggap saja buku tamu tersebut telah diisi oleh banyak orang, sehingga jika skrip di atas dijalankan tampilan yang didapatkan kurang lebih seperti pada gambar 3. Nama-nama yang tertera di sana hanya fiktif saja, jadi apabila ternyata ada yang memiliki nama dan email yang sama, itu hanya kebetulan belaka.

Nah, seandainya situs tersebut merupakan situs yang ramai oleh pengunjung dan pengisi buku tamunya banyak, maka menampilkan daftar tamu seperti skrip di atas tentu kurang baik karena halaman tersebut akan menjadi sangat panjang.

Alternatif yang digunakan adalah menampilkan sejumlah record tertentu per halaman dan di bagian bawah halaman terdapat link untuk menuju ke halaman berikutnya atau sebelumnya. Kira-kira seperti hasil search di Google itu lho. Untuk membuat bentuk halaman seperti itu, berikut akan diberikan salah satu contoh skrip alternatifnya. Gantilah isi skrip file table.php dengan skrip seperti pada listing 4.

Listing 4. Halaman daftar tamu alternatif

<HTML>

<HEAD>

Daftar Tamu

</HEAD>

<BODY>

<CENTER>

<?

$host = "localhost";

$user = "root";

$pswd = "rahasia";

$conn = @mysql_connect ($host,$user, $pswd)

or die ("Koneksi Gagal: " . mysql_error());

mysql_select_db("gsbook",$conn);

$hal = $_REQUEST['hal'];

$batas = ($hal - 1) * 5;

$strSQL1 = "Select * from guest limit $batas,5";

$strSQL2 = "Select * from guest";

$qry = @mysql_query($strSQL1,$conn)

or die ("Query salah: " . mysql_error());

$tot = @mysql_query($strSQL2,$conn)

or die ("Query salah: " . mysql_error());

$jml = mysql_num_rows($tot);

$kel = $jml/5;

if ($kel==floor($jml/5)){

$page = $kel;

} else {

$page = floor($jml/5)+1;

}

$pct = 100/($page+4);

echo "Jumlah pengisi = $jml
";

echo "Jumlah halaman = $page
";

echo "<HR>";

?>

<TABLE BORDER=1>

<TR>

<TD BGCOLOR=#f32142> Nama </TD>

<TD BGCOLOR=#f32142> Email </TD>

Komentar

</TR>

<?

while ($row = mysql_fetch_array ($qry)) {

echo "<TR>";

echo "<TD BGCOLOR=#f7efde>" . $row["nama"] . "</TD>";

echo "<TD BGCOLOR=#f7efde>" . $row["email"] . "</TD>";

echo "<TD BGCOLOR=#f7efde>" . $row["komentar"] . "</TD>";

echo "</TR>";

}

?>

</TABLE>

<HR>

<TABLE BORDER=0>

<TR>

<?

$lebar=$pct*2;

$prev=$hal-1;

$next=$hal+1;

echo "<TD WIDTH=$lebar"."%>";

if ($hal!=1) {

echo "<A HREF='table.php?hal=$prev'> Prev </A>";

} else {

echo "Prev";

}

echo "</TD>";

for ($i=1;$i<=$page;$i++) {

if ($i==$hal) {

echo "<TD WIDTH=$pct"."%>";

echo "$i";

echo "</TD>";

} else {

echo "<TD WIDTH=$pct"."%>";

echo "<A HREF='table.php?hal=$i'> $i </A>";

echo "</TD>";

}

}

echo "<TD WIDTH=$lebar"."%>";

if ($hal!=$page) {

echo "<A HREF='table.php?hal=$next'> Next </A>";

} else {

echo "Next";

}

echo "</TD>";

?>

</TR>

</TABLE>

</BODY>

</HTML>

Contoh skrip ini menggunakan query string di dalam menentukan halaman mana yang aktif saat itu. Setiap link untuk menuju ke suatu halaman tertentu akan memiliki bentuk seperti ini:

<A HREF=”table.php?hal=$i”>

Variabel $i akan berisi nomor halaman yang dituju.

Karena skrip table.php mengalami sedikit perubahan, maka skrip pada halaman terima kasih (listing 2) perlu dimodifikasi menjadi sebagai berikut:

Klik di sini untuk melihat daftar para pengisi buku tamu.

Mengapa query string “hal” diisi dengan angka 1? Tentu saja agar link tersebut menuju ke halaman 1 dari file table.php.

Nah, hasil run dari skrip table.php yang baru dapat dilihat pada gambar 4.

Read more »

Posted in: Anda,Dan (rank),HTML,Internet,JavaScript,Komputer,MySQL,PHP,Programming,Shinee