Anda di halaman 1dari 24

1

Copyright 2011 http://kangmoen.blogspot.com

KATA PENGANTAR

Bismillahirrohmanirrohim Puji syukur Al-hamdulillahi rabbil alamin penulis panjatkan kehadirat Allah SWT, yang telah menganugerahkan kasih, sayang dan cinta kepada setiap hamba yang di Ridhai-Nya. Ebook MEMBUAT APLIKASI PHONEBOOK MENGGUNAKAN PHP & MySQL ini tercipta tak luput dari kenikmatan yang Allah berikan kepada kita semua. Shalawat dan salam senantiasa tercurah kepada baginda Muhammad SAW, segenap keluarganya, para sahabatnya dan pengikut seluruhnya. Rasul akhir zaman yang selalu kita nantikan syafaatnya dihari kiamat nanti. Semoga kita termasuk pengikut yang mendapat syafaatnya, amin. Penulis menyadari bahwa penyusunan ebook ini banyak sekali kekurangan karena keterbatasan ilmu. Penulis sangat senang apabila para pembaca mau memberikan masukan, kritikan dan berbagi ilmunya sehingga ebook yang akan datang bisa lebih baik. Semoga dengan adanya ebook ini dapat menambah wawasan untuk menjadi manusia-manusia yang berilmu. Akhir kata, penulis mohon maaf yang sebesar-besarnya.

Wonosobo, 12 Agustus 2011

Kang Moen Ad-Dimai

Copyright 2011 http://kangmoen.blogspot.com

PENDAHULUAN

Pernahkah anda kehilangan handphone beserta sim card? Jika pernah, tentunya anda merasakan sedih dan kecewa bukan? Terkadang bukan karena mahalnya harga handphone yang kita punya, melainkan ikut hilangnya nomor-nomor telephone penting yang mungkin nilainya melebihi harga handphone kita. Bisa nomor keluarga, sahabat, rekan bisnis dan lain sebagainya. Oleh karena itu, dalam ebook ini akan dibahas bagaimana membuat aplikasi buku telephone berbasis web sebagai backup dari daftar nomor dihandphone anda. Sehingga apabila kita mengalami hal diatas, tidak perlu merasa sedih dan kecewa lagi. Bagi para pelajar, mahasiswa atau programer (berbasis web) yang sedang belajar atau mendalami php dan mysql, ebook ini juga bisa dijadikan sebagai bahan latihan untuk

memperkaya pengetahuan diri. Menu-menu yang akan dibuat merupakan inti minimal dari aplikasi database (form, input, tampil, edit, update dan hapus), tentunya mengembangkan lagi. anda dapat

Ikuti dan praktekan langkah-langkah dengan teliti! Huruf besar dan kecil sangat berpengaruh !!!

Lisensi Dokumen
Ebook ini dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat mencantumkan sumber asal dan tidak menghapus atau merubah atribut penulis serta pernyataan copyright yang disertakan dalam ebook. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin dari penulis.

Hak cipta dilindungi oleh Undang-Undang.

Copyright 2011 http://kangmoen.blogspot.com

PEMBAHASAN

A. Instalasi XAMPP Langkah-langkah menginstall XAMPP adalah sebagai berikut: 1. Double klik master program xampp

2. Muncultampilan awal instalasi, klik Next

3. Pilih lokasi instalasi, secara default di C:\xampp. Klik Next

Copyright 2011 http://kangmoen.blogspot.com

4. Pilih opsi install seperti gambar dibawah kemudian klik Install

5. Tunggu proser instalasi sampai selesai, klik Finish

Copyright 2011 http://kangmoen.blogspot.com

6. Instalasi selesai, akan ada komentar untuk menjalankan xampp control panel. Pilih Yes.

7. Klik Start pada Apache dan MySql.

Copyright 2011 http://kangmoen.blogspot.com

8. Tutup xampp control panel.

Saat kita menjalankan program, Apache dan MySql pada xampp control panel harus aktif. Lalu bagaimana jika komputer telah mati dan ingin mengaktikan Apache dan MySql pada xampp control panel? Biasanya setelah mengintall xampp, terdapat sortchut xampp control panel pada desktop. Jadi tinggal double klik, dan tekan tombol start keduanya maka sudah aktif.

B. Membuat DataBase Database merupakan tempat untuk menyimpan data-data nomor telephon yang akan kita backup. Langkah dalam membuat database adalah sebagai berikut: 1. Buka web browser (misal: mozila firefox), ketik localhost/phpmyadmin 2. Isi nama database dengan phonebook pada kolom Create new database, kemudian klik Create

3. Database telah dibuat, lanjut ke Membuat Tabel

C. Membuat Tabel Ibarat sebuah rumah tentunya terdapat kamar-kamar. Kamar orang tua, kamar anak, kamar tamu dan lain sebagainya. Database kita asumsikan sebagai sebuah rumah sedangkan tabel adalah sebuah kamar. Aplikasi membuat phonebook ini membuat satu tabel yakni tabel
Copyright 2011 http://kangmoen.blogspot.com

telp yang fungsinya untuk menampung data inputan nomor telephon. Anda bisa menambah kamar (tabel) lagi misalkan tabel user, tentu programnya harus anda kembangkan lagi. Langkah membuat tabel: 1. Klik database yang telah kita buat 2. Isikan kolom Name=telp dan Number of fields=7

3. Klik Go, isikan data seperti dibawah ini

4. Klik Save

Copyright 2011 http://kangmoen.blogspot.com

5. Tabel telah dibuat, siap untuk menyimpan data inputan.

D. Membuat File Koneksi File koneksi memiliki fungsi sebagai penghubung antara database dengan program aplikasi yang akan kita buat. File ini bisa ditulis atau digabung kedalam satu file program lainya tetapi bisa juga dibuat secara terpisah. Ebook ini membahas file koneksi secara terpisah karena memiliki beberapa keuntungan diantaranya meminimalisir ukuran file, cukup satu kali penulisan (nantinya tinggal dipanggil dengan perintah include) dan mempermudah pengecekan kesalahan program. Langkah membuat kode program file koneksi adalah sebagai berikut : 1. Buatlah folder baru di C:\xampp\htdocs\ dengan cara klik kanan New>Folder beri nama phone 2. Buka text editor (misal: notepad) , kemudian ketikan kode dibawah ini:
<?php $hosting="localhost";//lokasi $user="root"; $pass=""; $db="phonebook";
server

//defaut user //defaut password, jika ada password biasanya diisi root //nama database

mysql_connect($hosting,$user,$pass) or mysql_select_db($db) or ?>

die ("Maaf, koneksi gagal");

die ("Maaf, database tidak ditemukan");

3. Simpan kedalam folder phone, beri nama konek.php 4. Buka web browser (misal:mozila firefox), ketikan localhost/phone/konek.php. Jika tampilan browser kosong, maka program berhasil. Tetapi jika browser terdapat

Copyright 2011 http://kangmoen.blogspot.com

10

komentar Maaf, koneksi gagal dan atau Maaf, database tidak ditemukan, maka masih ada kesalahan. Bisa dari kesalahan penulisan program, bisa dari database yang belum dibuat atau bisa juga terdapat password root.

E. Membuat Form Input Interface dalam memasukkan data adalah form input. Persiapkan dahulu data apa saja yang nantinya akan dimasukkan ke form input, seperti pada tabel yang telah kita buat ada no_hp, nama, jns_kel, agama, alamat dan email. Disini id_hp tidak dibuat karena kita memakai auto_increment, jadi nanti secara otomatis akan terisi. Untuk lebih jelasnya kita praktekan langkah berikut: 1. Buka notepad, ketikan kode dibawah ini
<?php include"konek.php"; echo"<center><font color=blue> <h3><hr width=400 size=3>FORM INPUT NOMOR TELEPHONE</font> <hr width=400 size=3></h3> <form method=POST action=input.php> <table> <tr> <td><b>Nomor HP</b></td> <td>:</td> <td><input type=text name='no_hp'></td> </tr> <tr>

Copyright 2011 http://kangmoen.blogspot.com

11
<td><b>Nama Lengkap</b></td> <td>:</td> <td><input type=text name='nama'></td> </tr> <tr> <td valign=top><b>Jenis Kelamin</b></td> <td valign=top>:</td> <td><input type=radio name='jns_kel' value=Laki-Laki> <b>Laki-Laki</b><br> <input type=radio name='jns_kel' value=Perempuan> <b>Perempuan</b></td> </tr> <tr> <td><b>Agama</b></td> <td>:</td> <td><select name='agama'> <option value=Islam>Islam <option value=Katholik>Katholik <option value=Protestan>Protestan <option value=Budha>Budha <option value=Hindu>Hindu <option value=Konghuchu>Konghuchu </select> </td> </tr> <tr> <td valign=top><b>Alamat</b></td> <td valign=top>:</td> <td><textarea name='alamat'></textarea></td> </tr> <tr> <td><b>Email</b></td> <td>:</td> <td><input type=text name='email'></td> </tr> <tr> <td colspan=3><br><center>

Copyright 2011 http://kangmoen.blogspot.com

12
<input type=submit value=SIMPAN> <input type=reset value=RESET> </center></td> </tr> </table> </form> <hr width=400 size=5> <font color=blue size=2><b> Copyright &copy 2011 by http://kangmoen.blogspot.com </b></font> </center>"; ?>

2. Simpan dalam folder phone beri nama form.php 3. Buka mozila firefox, ketikan localhost/phone/form.php. Jika tampak seperti gambar dibawah berarti form input berhasil, jika gagal silakan cek kembali penulisan kode program diatas.

Silakan coba isi form tetapi jangan dulu meng-klik simpan, karena kita belum membuat perintah untuk inputnya. Lanjut ke tahap Membuat Perintah Input agar program bisa dijalankan.

Copyright 2011 http://kangmoen.blogspot.com

13

F. Membuat Perintah Input Agar data yang kita masukkan kedalam form bisa tersimpan di database mysql, maka perlu membuat query (perintah) terlebih dahulu. Langkah-langkahnya adalah 1. Buka notepad, ketikan kode program dibawah ini:
<?php include"konek.php"; echo"<center><font color=blue> <h3><hr width=400 size=3>STATUS INPUT NOMOR TELEPHONE</font> <hr width=400 size=3></h3></center>"; $a=mysql_query("INSERT INTO telp(no_hp,nama,jns_kel,agama,alamat,email) VALUE('$_POST[no_hp]','$_POST[nama]','$_POST[jns_kel]','$_POST[agama]', '$_POST[alamat]','$_POST[email]')");

if($a){ echo"<center><b><blink>Nomor Telephon Berhasil Disimpan</blink></b> <br><br>"; echo"<a href=form.php><b>Tambah Daftar Telephon</b></a><br>"; echo"<a href=lihat.php><b>Lihat Daftar Telephon</b></a></center><br>"; } else{ echo"<center><blink><b>Maaf, Nomor Telephon Gagal Disimpan</b> </blink></center>"; echo"<br>Silahkan <a href=form.php>Ulangi Kembali</a></center>"; } echo"<center><hr width=400 size=5> <font color=blue size=2> <b>Copyright &copy 2011 by http://kangmoen.blogspot.com</b> </font></center>"; ?>

2. Simpan dalam folder phone beri nama input.php 3. Buka mozila firefox, ketikan localhost/phone/form.php. Isi kolom-kolom yang tersedia pada form kemudian klik SIMPAN

Copyright 2011 http://kangmoen.blogspot.com

14

4. Jika terdapat komentar seperti gambar dibawah, berarti program telah berjalan dengan baik. Jika terdapat komentar Maaf, Nomor Telephon Gagal Disimpan, berarti ada kesalahan dalam penulisan program. Lakukan pengecekan dengan teliti

5. Jika kita klik link Tambah Daftar Telephon maka akan diproses ke form inputan (form.php), sedangkan jika meng-klik link Lihat Daftar Telephon maka akan diproses ke tabel output (lihat.php). 6. Lakukan langkah berikutnya agar program bisa berjalan sesuai yang harapan.

G. Membuat Tabel Output Langkah selanjutnya adalah Membuat Tabel Output untuk melihat nomor-nomor yang telah diinputkan.
Copyright 2011 http://kangmoen.blogspot.com

15

1. Buka notepad, ketikan kode berikut:


<? echo"<center><font color=blue><h3> <hr width=400 size=3>TAMPILAN DAFTAR NOMOR TELEPHONE<hr width=400 size=3> </h3></center></font>"; ?> <center> <form method=POST action=form.php> <table border="1" cellpadding="3"> <input type=submit value='Tambah Nomor'> <font color=white> <tr height="25" bgcolor=green> <td rowspan="1" valign="middle"><b><center>No.</center></b></td> <td rowspan="1" valign="middle"><b><center>Nomor HP</center></b> </td> <td rowspan="1" valign="middle"><b><center>Nama</center></b></td> <td rowspan="1" valign="middle"><b><center>Jenis Kelamin</center> </b></td> <td rowspan="1" valign="middle"><b><center>Alamat</center></b> </td> <td rowspan="1" valign="middle"><b><center>Agama</center></b> </td> <td rowspan="1" valign="middle"><b><center>Email</center></b> </td> <td rowspan=1 valign=center align=center><b>Edit</b></td> <td rowspan=1 valign=center align=center><b>Hapus</b></td> </tr> </font> <?php include"konek.php"; $no=1; $lihat=mysql_query("SELECT * FROM telp order by id_hp DESC"); while($a=mysql_fetch_array($lihat)){ echo" <tr>

Copyright 2011 http://kangmoen.blogspot.com

16
<td align=right><b>$no.</b></td> <td align=right>$a[no_hp]</td> <td>$a[nama]</td> <td>$a[jns_kel]</td> <td>$a[alamat]</td> <td>$a[agama]</td> <td>$a[email]</td> <td align=center><a href=edit.php?id=$a[id_hp]>edit</a></td> <td align=center><a href=\"hapus.php?id=$a[id_hp]\" onClick=\"return confirm ('Yakin Hapus Nomor Telephone : $a[no_hp], Nama : $a[nama]?')\"> Hapus</a></td> </tr> "; $no++; } ?> </table> </form> </center> <hr width=400 size=5> <font color=blue size=2> <center><b>Copyright &copy 2011 by http://kangmoen.blogspot.com</b> </center> </font>

2. Simpan dalam folder phone, beri nama lihat.php 3. Klik link Lihat Daftar Telephon, maka akan muncul tampilan seperti dibawah

Copyright 2011 http://kangmoen.blogspot.com

17

4. Untuk sementara link edit dan hapus belum bisa digunakan karena kita belum membuat kode programnya. 5. Tombol Tambah Nomor akan memproses ke form inputan.

H. Membuat Form Edit Kita tentu pernah ganti kartu atau beli kartu perdana. Baik hal itu disebabkan karena kartu lama hilang, rusak maupun memang ingin ganti nomor. Maka dari itu kita perlu membuat program untuk edit nomor. 1. Buka notepad, ketikan kode dibawah ini:
<?php include"konek.php"; $edit=mysql_query("SELECT * FROM telp WHERE id_hp='$_GET[id]'"); $a=mysql_fetch_array($edit); echo"<center><font color=blue> <h3><hr width=400 size=3>EDIT DAFTAR NOMOR TELEPHONE <hr width=400 size=3></h3></font> <form method=POST action=update.php> <input type=hidden name=id value=$a[id_hp]> <table> <tr> <td>Nomor HP</td><td>:</td><td><input type=text name='no_hp' value='$a[no_hp]'> </font></td> </tr> <tr> <td>Nama</td><td>:</td><td><input type=text name='nama' value='$a[nama]'></td> </tr> <tr> <td>Jenis Kelamin</td><td>:</td>"; if($a[jns_kel]==Perempuan){ echo" <td><select name='jns_kel'>

Copyright 2011 http://kangmoen.blogspot.com

18
<option value='$a[jns_kel]'>$a[jns_kel] <option value=Laki-Laki>Laki-Laki"; } else{ echo" <td><select name='jns_kel'> <option value='$a[jns_kel]'>$a[jns_kel] <option value=Perempuan>Perempuan</select> </td>"; } echo" </tr> <tr> <td>Alamat</td><td>:</td> <td><textarea name='alamat' value='$a[alamat]'>$a[alamat] </textarea></td> </tr> <tr> <td>Agama</td><td>:</td>"; if ($a[agama]==Katolik){ echo" <td><select name='agama'> <option value=$a[agama]>$a[agama] <option value=Islam>Islam <option value=Protestan>Protestan <option value=Budha>Budha <option value=Hindu>Hindu <option value=Konghuchu>Konghuchu";} else if ($a[agama]==Islam){ echo" <td><select name='agama'> <option value=$a[agama]>$a[agama] <option value=Katolik>Katolik <option value=Protestan>Protestan <option value=Budha>Budha <option value=Hindu>Hindu <option value=Konghuchu>Konghuchu";}

Copyright 2011 http://kangmoen.blogspot.com

19
else if ($a[agama]==Hindu){ echo" <td><select name='agama'> <option value=$a[agama]>$a[agama] <option value=Katolik>Katolik <option value=Protestan>Protestan <option value=Budha>Budha <option value=Islam>Islam <option value=Konghuchu>Konghuchu";} else if ($a[agama]==Budha){ echo" <td><select name='agama'> <option value=$a[agama]>$a[agama] <option value=Katolik>Katolik <option value=Protestan>Protestan <option value=Hindu>Hindu <option value=Islam>Islam <option value=Konghuchu>Konghuchu";} else if($a[agama]==Protestan){ echo" <td><select name='agama'> <option value=$a[agama]>$a[agama] <option value=Katolik>Katolik <option value=Hindu>Hindu <option value=Budha>Budha <option value=Islam>Islam <option value=Konghuchu>Konghuchu";} else{ echo" <td><select name='agama'> <option value=$a[agama]>$a[agama] <option value=Katolik>Katolik <option value=Hindu>Hindu <option value=Budha>Budha <option value=Islam>Islam </select></td>";} echo"

Copyright 2011 http://kangmoen.blogspot.com

20
</tr> <tr> <td valign=top>Email</td><td valign=top>:</td> <td><input type=text name='email' value='$a[email]'></td> </tr> </table><br> <input type=submit value=UPDATE> <input type=button value=BATAL onClick=self.history.back()> </form> <hr width=400 size=5> <font color=blue size=2><b> Copyright &copy 2011 by http://kangmoen.blogspot.com </b></font> "; ?>

2. Simpan dalam folder phone, beri nama edit.php 3. Klik link edit, akan muncul tampilan edit nomor telephon

4. Sebelum mengklik UPDATE untuk memasukkan / menyimpan data yang telah diedit, lakukan tahap berikutnya 5. Tombol BATAL akan memproses ke halaman sebelumnya, yakni lihat.php

Copyright 2011 http://kangmoen.blogspot.com

21

I.

Membuat Perintah Update Fungsi Update pada Edit seperti halnya fungsi Input pada Form, yaitu untuk memasukkan data ke tabel database. Input (INSERT) untuk memasukkan dan update (UPDATE) untuk mengganti yang baru. 1. Buka notepad, ketikan kode berikut:
<?php include"konek.php"; $a=mysql_query("UPDATE telp SET no_hp='$_POST[no_hp]', nama='$_POST[nama]', jns_kel='$_POST[jns_kel]', alamat='$_POST[alamat]', agama='$_POST[agama]' WHERE id_hp='$_POST[id]'"); if($a){ header('location:lihat.php'); } else{ echo"Daftar Gagal Diupdate<br> <a href=lihat.php>Laporan Transaksi</a>"; } ?>

2. Simpan dalam forlder phone, beri nama update.php 3. Klik UPDATE ada tampilan edit, akan tampil data yang telah diedit seperti gambar dibawah

Copyright 2011 http://kangmoen.blogspot.com

22

J.

Membuat Perintah Hapus Terakhir, adalah perintah hapus. Fungsinya adalah jika terdapat data-data yang sudah tidak dipakai maka perlu untuk dihapus. 1. Buka notepad, ketikan kode berikut:
<?php include"konek.php"; mysql_query("DELETE FROM telp WHERE id_hp='$_GET[id]'"); header("location:lihat.php"); ?>

2. Simpan dalam folder phone, beri nama hapus.php 3. Klik link hapus, akan muncul komentar seperti pada gambar dibawah

4. Klik OK, data akan terhapus.

Copyright 2011 http://kangmoen.blogspot.com

23

PENUTUP

Selesai sudah tutorial membuat aplikasi phonebook. Silakan kembangkan lagi sesuai kreasi yang anda mau. Jangan lupa, jika anda telah mengembangkannya maka saya sangat senang hati apabila anda mau berbagi.

Selamat belajar dan berkreasi!!!

Copyright 2011 http://kangmoen.blogspot.com

24

TENTANG PENULIS

Kang Moen, begitu panggilan akrab teman-teman kepada penulis. Nama aslinya adalah Miftakhul Munip. Lahir di Kota Demak, Tanggal 03 Agustus 1987. Jenjang SMU di lewatinya di SMA AL-MUAYYAD Surakarta dan menyelesaikan jenjang S-1 di Universitas Sains Al-Quran (UNSIQ) Wonosobo Program Studi Teknik Informatika (TI).

Motto : Belajar dari hal kecil, Mulai dari yang kita bisa

Pertanyaan, kritik dan menghubungi lewat:

saran

demi

peningkatan

ilmu

pengetahuan

bersama

bisa

Email : mmkangmoen@gmail.com Blog : http://www.kangmoen.blogspot.com http://www.kangmoen-ebook.blogspot.com

Copyright 2011 http://kangmoen.blogspot.com