E-trik Ajax. Ajax dan MySQL. Dedi Alnas

E-trik Ajax Ajax dan MySQL Dedi Alnas

Ajax dan MySQL Tutorial kali ini akan membahas cara pembuatan aplikasi Ajax yang dapat dihubungkan dengan MySQL. Pada paket instalasi Xampp terdapat MySQL dan phpmyadmin. Pada tutorial kali ini Anda akan menggunakan teknologi Ajax. Adapun langkah-langkah untuk membuatnya adalah sebagai berikut. 1. Terlebih dahulu Anda buka Web browser yang ada pada komputer caranya klik Start Programs Internet Explorer atau web browser lain seperti Mozila Firefox atau opera. 2. Kemudian pada kotak alamat address. Anda ketik http://localhost/phpmyadmin, lalu tekan Enter pada keyboard. 3. Maka akan tampil halaman phpmyadmin seperti pada Gambar 1. Gambar 1 Halaman phpmyadmin 2

4. Apabila Halaman phpmyadmin tidak muncul seperti gambar di atas maka Anda harus mengeceknya dengan cara Klik Start All Programs Apache Friends XAMPP XAMPP Control Panel. Perhatikan Gambar 2. Gambar 2 Membuka Aplikasi xampp control panel 5. Selanjutnya Anda Klik Start pada bagian Apache dan MySQL, maka akan tampil status menjadi running. Lihat Gambar 6. Gambar 3 Apache dan MySQL telah diaktifkan 3

1 MEMBUAT DATABASE 1. Pastikan Anda masih berada pada halaman phpmyadmin. Lihat Gambar 4. Gambar 4 Halaman phpmyadmin 2. Untuk membuat database baru, caranya pada kotak teks Ciptakan database baru Anda ketik nama katalog setelah itu klik tombol Ciptakan. Lihat Gambar 5. Ketik di sini Klik Ciptakan Gambar 5 Membuat database baru 4

3. Apabila proses pembuatan database berhasil, maka akan tercipta database baru pada phpmyadmin seperti pada Gambar 6. Gambar 6 Pembuatan database berhasil 2 MEMBUAT TABEL Setelah Anda membuat database. Tahap selanjutnya adalah membuat table. Table ini nantinya akan digunakan untuk menyimpan data - data yang akan ditampilkan pada halaman web. Adapun cara-cara pembuatan table adalah sebagai berikut. 1. Pastikan Anda telah membuka halaman phpmyadmin dan mengaktifkan database katalog. Perhatikan Gambar 7. Gambar 7 Halaman phpmyadmin 5

2. Perhatikan Gambar 8. Klik pada tab SQL,kemudian akan tampil area input perintah SQL. Ketiklah perintah di bawah ini, setelah itu klik tombol Go. 1 2 3 4 5 CREATE TABLE IF NOT EXISTS katalog ( id int(27) NOT NULL PRIMARY KEY AUTO_INCREMENT, foto varchar(100) DEFAULT NULL, judul text NOT NULL ) ; Keterangan Kode Baris 1-2 Perintah di atas akan membuat tabel dengan nama katalog, field pertama yaitu field id. field ini adalah field sebagai primary key ( unik) dengan auto_increment ( penomoran secara otomatis ). Baris 3-5 Perintah berikutnya akan membuat field Fotodengan tipe 2 data varchar ( 100 ), field judul tipe data text dan not null ( tidak boleh kosong ). Klik tab SQL Ketiklah perintah di bawah ini Klik tombol Go Gambar 8 Membuat tabel dengan perintah SQL 6

3. Untuk melihat hasil pembuatan tabel, Anda dapat melihat penambahan tabel di bawah combo database. Perhatikan Gambar 9. Klik katalog. Gambar 9 Tabel yang baru tercipta 4.Struktur tabel yag Anda buat akan tampil pada halaman phpmyadmin. Lihat Gambar 10. Gambar 10 Struktur tabel katalog 7

3 MENAMBAH DATA PADA TABEL a. Perintah INSERT Setelah Anda membuat tabel, Anda akan menggunakan perintah INSERT untuk menambah data baru ke dalam tabel. Sintaks: INSERT INTO nama_tabel ( fields) VALUES ( nilai_fields); 1. Buka jendela browser Anda, ketik http://localhost/phpmyadmin pada textbox address. 2. Aktifkan database katalog, kemudian aktifkan tab SQL dan ketiklah perintah di bawah untuk menambah data ke dalam tabel katalog dan klik tombol Go. Perhatikan Gambar 11. 1 2 3 4 5 6 7 8 INSERT INTO katalog VALUES (1, after.jpg, After Effect CS4 untuk Orang Awam ), (2, vb.jpg, Aplikasi Mini Market dengan Visual Basic 6.0 ), (3, autocad.jpg, 7 Jam Belajar Interaktif AutoCAD 2009 untuk 3D ), (4, facebook.jpg, Facebook untuk Orang Awam ), (5, excel.jpg, Excel 2007 untuk Akuntansi ); Keterangan Kode Baris 1 Perintah Insert di atas adalah menyisipkan atau menambah data pada tabel katalog. Baris 2 Menambahkan record atau data dengan id 1. Baris 3-4 Menambahkan record atau data dengan id 2. Baris 5 Menambahkan record atau data dengan id 3. Baris 6-7 Menambahkan record atau data dengan id 4. Baris 8 Menambahkan record atau data dengan id 5. 8

Aktifkan database katalog Klik tab SQL Ketik Perintah di sini Klik tombol Go 3 Gambar 11 Perintah memasukkan data 3. Untuk melihat hasil peng-inputan data, klik tabel buku. Setelah itu, klik tab Browse.Lihat Gambar 15. Gambar 12 Hasil memasukkan data 9

4 MEMBUAT SCRIPT PHP Untuk melakukan koneksi ke server, Anda perlu membuat file khusus yang berfungsi sebagai panghubung antara script PHP dan database. Untuk membuka koneksi ke server Anda harus memerlukan alamat server, username dan password. Adapun langkah-langkahnya adalah sebagai berikut: 1. Anda buka aplikasi Macromedia Dreamweaver 8. Klik Tombol Start pada Start menu. Kemudian Anda pilih menu All Programs > Macromedia > Macromedia Dreamweaver 8.Lihat Gambar 13. 2. Setelah tampil jendela Start page Anda Klik icon dengan tulisan PHP, Perhatikan Gambar 14. 3. Setelah diklik icon maka akan tampil jendela dokumen baru seperti Gambar 15. Gambar 13 Membuka Program aplikasi Macromedia Dreaweaver 8 10

Gambar 14 Memilih PHP Gambar 15 Tampilan Jendela dokumen PHP 11

4. Selanjutnya Anda pastikan tab yang aktif pada Code. Lihat Gambar 16. Gambar 16 Mengaktifkan tab Code 5. Kemudian Anda hapus semua kode, lalu ketikkan kode di bawah ini. 1 <?php 2 $q=$_get[ maxi ]; 3 $con = mysql_connect( localhost, root, ); 4 if (!$con){ die( Koneksi gagal:. mysql_error()); 5 } 6 mysql_select_db( katalog, $con); 7 $sql= SELECT * FROM katalog WHERE Id =.$q. ; 8 $result = mysql_query($sql); 9 echo <table border= 1 > 10 <tr> 11 <th>cover</th> 12 <th>judul buku</th> 13 </tr> ; 14 while($baris = mysql_fetch_array($result)) 15 { 16 echo <tr> 17 <td><img src=\ $baris[foto]\ /></td> 18 <td align= justify >$baris[judul]</ 19 td><tr> ; 20 } 21 echo </table> ; 22 mysql_close($con); 23?> 12

Keterangan Kode Baris 1-3 Awal tag PHP, perintah berikutnya adalah variabel get dengan nama maxi lalu membuat variabel untuk menghubungkan koneksi database ke server Baris 4-5 Suatu kondisi apabila gagal tampilkan pesan. Baris 6-8 Perintah untuk menyeleksi data, kemudian membuat variabel untuk menampilkan data dan variabel hasil query. Baris 9-13 perintah untuk membuat tabel, kolom dan baris dengan nama cover dan judul. Baris 14-20 Perintah pengulangan WHILE sebanyak baris yang terdapat di dalam tabel katalog. Kemudian, hasil dari perintah mysql_fetch_array ditampilkan ke dalam tabel. Penulisan nama array harus sesuai dengan nama field yang terdapat pada tabel katalog. Baris 21-23 Akhiri tag tabel dan koneksi mysql kemudian tutup tag php. 6. Simpan ke dalam lokasi c:/xampp/htdocs/xampp, lalu Anda buat folder baru dengan nama ajax_database dan simpan file dengan nama get_katalog.php. Perhatikan Gambar 17. Tempat penyimpanan Lokasi Klik Save Beri nama file get_katalog.php Gambar 17 Menyimpan dengan nama file get_katalog.php 13

5 MEMBUAT OBJECT XMLHTTPREQUEST Pada tahap ini, Anda akan membuat file Javascript untuk melakukan permintaan ke server yaitu adalah menggunakan teknologi asynchronous atau Ajax. Adapun langkah-langkah pembuatannya adalah sebagai berikut. 1. Anda buka kembali aplikasi Macromedia Dreamweaver 8 Klik tombol start pada start menu lalu Anda pilih menu All programs > Macromedia > Macormedia Dreamweaver 8. 2. Setelah Tampil jendela Start Page Anda klik icon dengan tulisan JavaScript 3. Setelah itu Anda Klik icon maka akan tampil jendela dokumen baru seperti pada Gambar 18. Gambar 18 Jendela dokumen Javascript 4. Kemudian Anda ketikkan kode berikut ini. Perhatikan Gambar 19. Ketikkan kode di sini Gambar 19 Posisi kode 14

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 var xmlhttp function showbook(str) { xmlhttp=getxmlhttpobject() if (xmlhttp==null) { alert ( Browser tidak support HTTP Request ) return } var url= get_katalog.php url=url+?maxi= +str url=url+ &sid= +Math.random() xmlhttp.onreadystatechange=statechanged xmlhttp.open( GET,url,true) xmlhttp.send(null) } function statechanged() { if (xmlhttp.readystate==4 xmlhttp.readystate== complete ) { document.getelementbyid( txthint ).innerhtml=xmlhttp.responsetext } } function GetXmlHttpObject() { var xmlhttp=null; try { xmlhttp=new XMLHttpRequest(); } catch (e) { try { xmlhttp=new ActiveXObject( Msxml2.XMLHTTP ); } catch (e) { xmlhttp=new ActiveXObject( Microsoft.XMLHTTP ); } } return xmlhttp; } 15

Keterangan Kode Baris 1 Perintah membuat variabel XMLhttp. Baris 2-3 Membuat fungsi dengan nama showbook. Baris 4 Kode untuk membentuk XMLhttpObject. Baris 5-9 Suatu kondisi jika browser gagal maka tampilkan pesan. Baris 10-12 Variabel memanggil file get_katalog.php dan menghubungkan parameter maxi ke url dengan isi input dari drop down box. Baris 13-16 Membuka koneksi ke server, kemudian mengirimkan request ke server. Baris 17-18 Membentuk fungsi status. Baris 19-20 Jika readystate=4 dan Status=complete. Baris 21-24 kode untuk mengambil suatu element class dengan nama txthint kemudian tampilkan respon. Baris 25-26 kode membentuk object XMLhttp. Baris 27-31 kode untuk penanganan kesalahan jika menggunakan browser firefox atau opera. Baris 32-44 penanganan kesalahan jika menggunakan browser Internet explorer. 6. Simpan ke dalam lokasi c:/xampp/htdocs/xampp/ajax_database, simpan file dengan nama ajax.js. Perhatikan Gambar 20. Tempat penyimpanan lokasi Klik save Beri nama File Ajax.js Gambar 20 Menyimpan file dengan nama ajax.js 16

6 MEMBUAT HALAMAN UTAMA Tahap selanjutnya Anda akan membuat halaman utama pada aplikasi web yang Anda buat. Adapun langkah-langkahnya adalah sebagai berikut. 1. Pastikan jendela Dreamweaver Anda masih aktif. Buatlah halaman PHP yang baru. 2. Selanjutnya Anda pastikan tab yang aktif pada Code. Lihat Gambar 21. Gambar 21 Mengaktifkan tab Code 3. Kemudian Anda hapus semua kode, lalu ketikkan kode di bawah ini. 17

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html> <head> <script src= ajax.js ></script> </head> <body> <form> <div align= center >Pilih Buku Baru: <select name= Buku yang akan terbit onchange= showbook(this.value) ></div> <option value= 1 >After Effect</option> <option value= 2 >Aplikasi VB</option> <option value= 3 >Autocad2009</option> <option value= 4 >Facebook</option> <option value= 5 >Excel</option> </select> </form> <p> <div id= txthint ><b>informasi Buku baru akan tampil di sini.</b></div> </p> </body> </html> Keterangan Kode Baris 1-2 Awal Tag HTML dan Head. Baris 3 Memanggil file javascript yaitu Ajax.js. Baris 4 Akhiri tag head. Baris 5 Awal tag body. Baris 6-16 Kode untuk membuat Form dan select dengan memanggil fungsi Javascript dengan menu pilihan kemudian akhiri tag Form. Baris 17 Awal tag paragraf Baris 18-19 Awal tag div class dengan nama txthint kemudian akhiri tag div. Baris 20 Akhiri tag paragraf. Baris 21 Akhiri tag body. Baris 22 Akhiri tag HTML. 18

4. Simpan ke dalam lokasi c:/xampp/htdocs/xampp/ajax_database, simpan file dengan nama index.php. Perhatikan Gambar 22. Tempat penyimpanan lokasi Beri nama File Index.php Klik save Gambar 21 Menyimpan file dengan nama index.php 7 MENYIAPKAN GAMBAR Tahap berikutnya yang harus dilakukan adalah menyiapkan gambar. Gambar disini maksudnya gambar yang akan ditampilkan pada halaman yang telah Anda buat Anda juga dapat menggunakan gambar-gambar lain yang dibutuhkan dalam pembuatannya. Adapun lokasi gambar yang akan ditampilkan pada halaman web adalah sebagai berikut : 1. Anda buka buka localdisk C:/ yang ada pada jendela Windows explorer. Lihat Gambar 23. 2. Setelah itu Anda simpan pada lokasi C:/Xampp/htdocs/xampp/ ajax_database/. Perhatikan Gambar 24. 19

Local disk C:/ Gambar 23 membuka jendela explorer Gambar 24 Menyimpan gambar pada direktori 20

4. Selanjutnya Anda letakkan File Gambar yang akan ditampilkan pada Web Anda ke dalam direktori tersebut dengan nama harus sama dengan isi pada tabel katalog. Perhatikan Gambar 25. Gambar 25 File gambar yang akan ditampilkan 8 MENJALANKAN PROGRAM Sekarang Anda coba jalankan web yang telah Anda buat menggunakan browser, baik itu Internet Explorer atau browser lainnya.pada tutorial kali ini menggunakan browser Opera. Adapun langkah-langkahnya sebagai berikut : 1. Anda buka Klik Tombol Start pada Start menu. Kemudian Anda pilih menu All Programs > Opera. Lihat Pada Gambar 26. Gambar 26 Membuka browser Opera 21

2. Kemudian akan tampak jendela Opera. Terlihat pada Gambar 27. Gambar 27 Jendela Opera 3. Setelah itu Anda ketik dialamat address pada Opera yaitu http://localhost/xampp/ajax_database lalu tekan Enter, maka akan tampil halaman Web Yang telah Anda buat. Lihat Gambar 28. Ketik Alamat address Gambar 28 Halaman Index 22

4. Pilih salah satu menu buku yang akan ditampilkan. Perhatikan Gambar 29. Gambar 29 Pilihan kategori 5. Gambar tersebut akan tampil pada halaman web Anda. LIhat Gambar 30. Gambar 30 Tampilan keterangan 23