1 2 E-trik Ajax Ajax dan MySQL Dedi Alnas3 Ajax dan MySQL Tutorial kali ini akan membahas cara pembuatan aplikasi Ajax yang dapat dihubungkan dengan M...
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
Ajax dan MySQL 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
Ajax dan MySQL
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
Ajax dan MySQL 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
Ajax dan MySQL 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 2 data varchar ( 100 ) , field judul tipe data text dan not null ( tipe tidak boleh kosong ) . Ketiklah perintah di bawah ini
Klik tab SQL
Klik tombol Go
Gambar 8 Membuat tabel dengan perintah SQL
6
Ajax dan MySQL 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
Ajax dan MySQL
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
Ajax dan MySQL Aktifkan database katalog
Klik tab SQL
Ketik Perintah Klik tombol Go di sini
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
Ajax dan MySQL
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 baru seperti Gambar 15.
maka akan tampil jendela dokumen
Gambar 13 Membuka Program aplikasi Macromedia Dreaweaver 8
10
Ajax dan MySQL
Gambar 14 Memilih PHP
Gambar 15 Tampilan Jendela dokumen PHP
11
Ajax dan MySQL 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
• 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
Ajax dan MySQL
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.
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
Ajax dan MySQL • 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
Ajax dan MySQL
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.
• 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
Ajax dan MySQL 4. Simpan ke dalam lokasi c:/xampp/htdocs/xampp/ajax_database, simpan file dengan nama index.php . Perhatikan Gambar 22.
Tempat penyimpanan lokasi
Klik save Beri nama File Index.php 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
Ajax dan MySQL
Local disk C:/
Gambar 23 membuka jendela explorer
Gambar 24 Menyimpan gambar pada direktori
20
Ajax dan MySQL 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
Ajax dan MySQL 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
Ajax dan MySQL 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.
