Seri Dreamweaver - Pencarian Data Mahasiswa

Tutorial Macromedia Dreamweaver – PHP – MySQL

Membuat Pencarian Data Mahasiswa Oleh Achmad Solichin, http://achmatim.net, [email protected]

M Membu uat Pencariaan Datta Mah hasisw wa Dalaam Tutorial Ini Diaasumssikan… … Bahw wa: 1. D Di kompu uter yan ng Anda gunakan n sudah terinstaall denga an baik PHP, Ap pache, MySQL M dan Macromediaa Dream mweaverr karenaa dalam tutorial ini kitaa akan menggun m nakan keeempat softwarre terseb but. 2. A Anda meengetahui bagaimana ccara loggin ke MySQL M berikut informasi userr dan password d yang dapat diggunakan.. Anda sudah meembuat Site Definition n pada Dreamw weaver, berikut bagaimana 3. A m mengkolaaborasikkan Dreaamweaveer dengaan PHP‐M MySQL. 4. A Anda su udah cu ukup mengerti bagaim mana membuat m t datab base, membuatt dan m memanip pulasi tab bel di MySQL M baaik melallui conso ole maup pun dengan fron nt‐end seeperti PHPMyAd dmin dan MySQ QLFront. 5. A Anda sud dah cuku up mengerti beberapa peerintah SQL S dasa ar (DDL, DML). 6. D Disarankaan Andaa sudah cukup mengerrti bagaimana membua m t aplikasi entri, edit, delete dan tampil denggan PHP P, MySQ QL dan Dreamw weaver (Lihat tutorialn t nya di http://achmatim.net/200 08/12/22/dream mweaverr‐php‐da an‐mysql‐untuk‐aplikasi‐‐data‐ m mahasisw wa/).

Mem mperssiapkan Dataabase dan TTabel MySQL M L

D

atabaase dan tabel yaang digunakan d dalam tu utorial ini, sama seperti database dan tabel dalam tutoriaal sebeelumnya,, mengenai en ntri, edit dan delete data mahaasiswa. JJadi, langgkah meembuat databasse dan ta abel ini tidak peerlu dilakkukan jika A Anda sud dah men ncoba tutorial tersebut. Pertaama kali buatlaah datab base di MySQLL dengan nama a dbmah hasiswa. Selanjutnya buatllah tabel di MySQL denggan nama mhs d dan denggan spesifikasinyya sebaggai beriku ut: +----------+-------------+------+-----+---------+ +-------+ | Field | Type e | Nul ll | Ke ey | Default | Extra a | +----------+-------------+------+-----+---------+ +-------+ | nim m | varc char(10) | NO | PR RI | | | | nam ma | varc char(30) | NO | | | | | alamat | text t | NO | | | | | tgllahir | date e | NO | | | | +----------+-------------+------+-----+---------+ +-------+

Setelah tabellnya dibuat, kuraang lebih tampillan di PH HPMyAdmin seb bagai berrikut:

Gam mbar 1 Struktur Tab bel mhs di PHPMyAdmin

Tutorrial ini ditujukan d n untuk membu uat aplikasi penccarian da ata sedeerhana. Dalam hal h ini kita aakan meelakukan pencarian berd dasarkan n salah satu field d (yaitu nama) n d tabeel mhs dari

Achm mad Soliichin (Univ. Bud di Luhurr)

P Page 2

M Membu uat Pencariaan Datta Mah hasisw wa yang sudah dibuat. Setelah Anda memahami tu utorial ini, selanjutnya dapat Anda kemb bangkan sendiri menjadi pencarrian yangg lebih kompleks k s.

Mem mbuatt Koneeksi ke e MySQ QL di D Dream mweavver

S

elanjuttnya kitaa akan mengko m neksikan n PHP dengan d MySQL memanfaatkan tools yang su udah terrsedia di Macro omedia D Dreamw weaver. Jangan lupa passtikan bahwa b Site De efinition di Dreaamweaveer sudah h dibuatt dengan n benar, karena keberhasilan dari kkoneksi ke MySSQL juga bergantung daari site definition d n tersebut. Sekaali lagi bahwa b langkkah inipu un tidakk perlu dilakukan d n, jika A Anda sud dah men ncoba ap plikasi entri, ediit dan delette di tuto orial seb belumnya. Berikkut ini lan ngkah‐laangkahnya: 1. Buatlah file f denggan nam ma searcch_mhs.php seb bagai halaman untuk u peencarian n data m mahasisw wa. 2. A Aktifkan (buka) panel Applicat A tion yan ng beraada di sebelah s sisi window utama u D Dreamweeaver (lih hat gambar) 3. Buka tab Databasses padaa panel A Applicattion terseebut. bol [+] yyang terrdapat d di dalam m tab Daatabases dan pillih sub‐m menu MySQL M 4. Klik tomb C Connection. 5. A Akan ditaampilkan n window w isian M MySQL C Connection (Liha at gambar). Isi nama n koneksi, host myssql, userrname, dan passsword MySQL dengan benar (1), lalu u klik to ombol Select… untuk u m memilih databasse yang akan digunakan n (2) dan klik to ombol OK O (3) untuk meenyimpan konfiggurasi ko oneksi M MySQL. 6. Jika koneeksi berh hasil maka padaa panel A Applicattion tab Databases akan n ditamp pilkan in nformasii database berikkut tabel‐tabel yaang terd dapat dalam dataabase teersebut.

Gam mbar 2. Pan nel Application Tab Database untuk Meembuat Kooneksi

Achm mad Soliichin (Univ. Bud di Luhurr)

P Page 3

M Membu uat Pencariaan Datta Mah hasisw wa

Gambar 33. Window w MySQL Connection C n

Gambar 4. Tamp pilan jika Koneksi Database D Berhasil B

Mem mbuatt Halaman untuk u P Pencarian Data D Mahasi M swa

S

etelah koneksi ke dataabase MyySQL beerhasil dilakukan n, maka selanjuttnya kitaa akan membu uat halaaman un ntuk meelakukan n pencaarian da ata mah hasiswa ke dataabase MySQL. Kita aakan meembuat form untuk meemasukkkan keyyword pencarian n dan selan njutnya data d hasil pencarian akaan ditampilkan dalam d be entuk tab bel. Dalaam tutorrial ini pencarian akkan dilakukan beerdasarkaan namaa mahassiswa. ngkah‐laangkahnya: Berikkut ini lan 1. Buatlah file f denggan nam ma searcch_mhs.php seb bagai halaman untuk u peencarian n data m mahasisw wa (jika ssudah dibuat, tid dak perlu u dibuatt lagi). 2. Buatlah form f peencarian yang terdiri daari inpu utan texttfield deengan nama n inputan ‘kkeyword d’ dan to ombol ‘Search!’. Lihat gaambar 5!. 3. U Ubah method dari form menjadii GET dengan cara memilih (klik) area fo orm dan ubah di bagian n Properrties (dibawah w window utama)). Metho od GET banyak dipilih dalam d aplikasi pencarian p n karenaa kemud dahannyaa dan daapat diakkses melalui URLL. 4. Buatlah Recordse R et melalui menu u Insert > Appliccation Objects O > Record dset atau u icon yang berada pada meenu App plication.. 5. Pada window Reccordset (lihat gaambar 6!), atur nama n re ecordset,, konekssi, nama tabel unakan d dan jugaa filter. Filter merupakaan bagian yang penting p p yaang digu dalam proses pencarian n diman na akan menenttukan reecord yaang akan n ditamp pilkan sesuai deengan keeyword pencariaan. Tekaan tombo ol OK un ntuk mellanjutkan. 6. Seetelah Records R et hasil pencarrian terrbentuk, sekarang tingggal men nampilkaannya dalam beentuk taabel. Lettakkan ccursor dii posisi hasil pe encarian yang diiinginkan n dan pilih men nu Inserrt > App plication n Objects > Dyynamic Data D > Dynamic Table. Dan Achm mad Soliichin (Univ. Bud di Luhurr)

P Page 4

M Membu uat Pencariaan Datta Mah hasisw wa seelanjutn nya akan n ditamp pilkan w window Dynamiic Table. Atur Recordse R et dan tekan to ombol OK O untukk melanju utkan. Lihat gam mbar 7! 7. H Halaman sudah d dapat diccoba (ru unning), coba keetikkan keyword k pencariian dan tekan to ombo Seearch! m maka akan keluarr hasil peencarian nnya. 8. Seebagai tambahan, kitaa juga d dapat m mengatur agar tabel hasil h pen ncarian tidak dimuncullkan terlebih dah hulu saaat pertam ma kali halaman h diakses. Jika dittemukan n data seesuai keeyword yang diberikan d n makan n tabel hasil pencaria p n akan ditamp pilkan, seebaliknyya jika tid dak ditemukan m maka tampilkan n pesan bahwa b d data tidaak ditem mukan. U Untuk menjadikaan tabell hasil p pencarian hanyaa muncu ul jika data d diteemukan,, blok taabel hassil pencaarian dan n pilih m menu Inssert > Applicatio A on Obje ects > Sh how Reggion > Show If Record dset No ot Emptty dan akan ditampilkkan window un ntuk meemilih R Recordseet (lihat ggambar 9). Pilih Recordsset dan tekan t to ombol OK untuk melanju utkan. Seedangkaan untukk menam mpilkan pesan jjika dataa tidak ditemuk d kan, laku ukan hal yang saama, tettapi pilih h Show If Record dset Emp pty. 9. Preview program p m di brow wser den ngan menekan to ombol F12.

Gaambar 5. F Form Penccarian Datta Mahasisswa

Achm mad Soliichin (Univ. Bud di Luhurr)

P Page 5

M Membu uat Pencariaan Datta Mah hasisw wa

Gambar 6. Recordsset untuk m menampilk kan Hasil Pencarian n

Gaambar 7. Menampilk M kan Hasil P Pencarian dengan Dynamic Taable

Achm mad Soliichin (Univ. Bud di Luhurr)

Page 6

M Membu uat Pencariaan Datta Mah hasisw wa

Gam mbar 8. Seelect (Blok k) Tabel Hasil Pencarian

Gamb bar 9. Wind dow Show w If Record dset Is Not Empty

Gam mbar 10. Tampilan T ssetelah diaatur Region n yang aka an ditampiilkan

Achm mad Soliichin (Univ. Bud di Luhurr)

Page 7

M Membu uat Pencariaan Datta Mah hasisw wa

Gam mbar 11. H Hasil Tamp pilan Progrram di Bro owser

Kesiimpulaan

M

acromediaa Dream mweaverr selain dapat digunakkan untu uk mem mbuat ap plikasi en ntri, edit, delete dan tam mpil, jugga dapatt digunakan unttuk mem mbuat ap plikasi peencarian data deengan ceepat. Daalam tuto orial ini hanya disampa d ikan lan ngkah‐ untuk taampilan yang lebih baagus, kitta bisa mengem mbangkaannya langkkah dasaarnya, u sendiiri.

Artikel Te erkait LLainnyya 1. http:///achmatiim.net/22008/12/222/dream mweaverr-php-daan-mysqql-untuk--aplikasiidata-m mahasisw wa/ 2. http:///achmatiim.net/22009/01/05/dream mweaverr-php-daan-mysqql-untuk--aplikasiidata-m mahasisw wa-bag-2/ web-denggan-php-dan3. http:///achmatiim.net/22009/04/15/bukuu-gratis-ppemrograman-w mysql/

Achm mad Soliichin (Univ. Bud di Luhurr)

P Page 8

Membuat Pencarian Data Mahasiswa Tentang Penulis Achmad Solichin. Adalah Lulusan Teknik Informatika, Fakultas Teknologi Informasi, Universitas Budi Luhur, Jakarta (S1, 2005). Saat ini sedang menempuh pendidikan S2 di Magister Teknologi Informasi Universitas Indonesia (2008). Kegiatan sehari‐hari adalah sebagai Dosen di Universitas Budi Luhur (http://www.bl.ac.id), sekaligus sebagai Kepala Laboratorium Komputer Universitas Budi Luhur (http://labkom.bl.ac.id). Kegiatan lain aktif sebagai programmer, web developer, system analyst dan memberikan pelatihan di berbagai bidang komputer serta membuat tutorial‐tutorial praktis di bidang komputer. Penulis juga terlibat dalam pengembangan E‐Learning di Universitas Budi Luhur. Penulis memiliki situs utama di http://achmatim.net yang berisi berbagai tutorial praktis. Penulis dapat dihubungi melalui email di [email protected] atau YM achmatim.

Achmad Solichin (Univ. Budi Luhur)

Page 9