E-trik Ajax. Database MySQL. Dedi Alnas

E-trik Ajax Database MySQL Dedi Alnas

Pengenalan MySQL Tutorial kali ini akan membahas cara pembuatan aplikasi web yang dapat dihubungkan dengan MySQL. Pada paket instalasi Xampp terdapat MySQL dan phpmyadmin. Sebetulnya apa itu MySQL dan phpmyadmin?. MySQL adalah database yang menghubungkan script PHP menggunakan perintah query dan escaps character yang sama dengan PHP. MySQL mempunyai tampilan client yang mempermudah Anda dalam mengakses database. Gambar 1 Logo MySQL Sedangkan phpmyadmin merupakan halaman yang terdapat pada web server. Fungsi dari halaman ini adalah sebagai pengendali database MySQL menggunakan web server. Gambar 2 Logo phpmyadmin Adapun langkah-langkah untuk menjalankan phpmyadmin, adalah berikut ini. 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. 2

3. Maka akan tampil halaman phpmyadmin seperti pada Gambar 3. Gambar 3 Halaman phpmyadmin 4. Anda dapat memilih bahasa yang digunakan pada halaman phpmyadmin. Caranya pada bagian Language, Anda ganti bahasa English ke Bahasa Indonesia. Lihat Gambar 4. Pilih Bahasa Indonesia Gambar 4 Mengganti bahasa yang digunakan 3

5. 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 5. Gambar 5 Membuka Aplikasi xampp control panel 6. Selanjutnya Anda Klik Start pada bagian Apache dan MySQL, maka akan tampil status menjadi running. Lihat Gambar 6. Gambar 6 Apache dan MySQL telah diaktifkan 4

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

3. Apabila proses pembuatan database berhasil, maka akan tercipta database baru pada phpmyadmin seperti pada Gambar 9. 2 Gambar 9 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 maxi. Perhatikan Gambar 10. Gambar 10 Halaman phpmyadmin 6

2. Perhatikan Gambar 11. 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 6 7 CREATE TABLE buku ( id INT NOT NULL primary key auto_increment, judul VARCHAR ( 50 ) NOT NULL, pengarang VARCHAR ( 50 ) NOT NULL, penerbit VARCHAR ( 30 ) NOT NULL, tahun INT ( 4 ) NOT NULL ) ; Keterangan Kode Baris 1-2 Perintah di atas akan membuat tabel dengan nama buku, 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 judul dengan tipe data varchar ( 50 ), field pengarang tipe data varchar (50), penerbit tipe data varchar ( 30 ) dan not null ( tidak boleh kosong ). Baris 6-7 Perintah berikutnya membuat field tahun dengan tipe int dan not null ( tidak boleh kosong). 3. Untuk melihat hasil pembuatan tabel, Anda dapat melihat penambahan tabel di bawah combo database. Perhatikan Gambar 12. Klik buku. 4.Struktur tabel yag Anda buat akan tampil pada halaman phpmyadmin. Lihat Gambar 13. 7

Klik tab SQL Ketiklah perintah di bawah ini Gambar 11 Membuat tabel dengan perintah Klik SQL tombol Go. Klik buku Gambar 12 Melihat tabel buku 8

Gambar 13 Menampilkan hasil pembuatan tabel 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 maxi, kemudian aktifkan tab SQL dan ketiklah perintah di bawah untuk menambah data ke dalam tabel buku dan klik tombol Go. Perhatikan Gambar 14. 9

1 2 3 4 5 6 7 8 INSERT INTO buku values (1, pemrograman java, Irawan, maxikom,2009), (2, pemrograman Visual Basic, M.Sadeli, maxikom, 2009), (3, Manipulasi Photoshop CS4, Jayan, maxikom, 2009), (4, Pemrograman PHP, Rulianto Kurniawan, maxikom, 2009), (5, Desain Grafis, Fandi, maxikom, 2009) ; Keterangan Kode Baris 1 Perintah Insert di atas adalah menyisipkan atau menambah data pada tabel buku. 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. 3. Untuk melihat hasil peng-inputan data, klik tabel buku. Setelah itu, klik tab Browse.Lihat Gambar 15. Aktifkan database Maxi Klik tab SQL Ketiklah perintah di bawah ini Gambar 14 Perintah memasukkan data Klik Go 10

Gambar 15 Hasil memasukkan data 4 4 MENGHUBUNGKAN SCRIPT PHP KE MYSQL A. MEMBUKA KONEKSI KE SERVER Untuk melakukan koneksi ke server, Anda perlu membuat file khusus yang berfungsi sebagai panghubung antara script 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. 2. Setelah tampil jendela Start page Anda Klik icon dengan tulisan PHP, Perhatikan Gambar 16. 11

3. Setelah diklik icon maka akan tampil jendela dokumen baru seperti Gambar 17. Gambar 16 Memilih PHP Gambar 17 Tampilan Jendela dokumen PHP 12

4. Selanjutnya Anda pastikan tab yang aktif pada Code. Lihat Gambar 18. Gambar 18 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 <?php $pass);?> Keterangan Kode Baris 1 Baris 2-6 si. $host = localhost ; $user = root ; $pass = ; $koneksi = mysql_connect($host, $user, if (!$koneksi) { echo Koneksi ke database gagal ; }; Awal tag PHP. Variabel host, user, password pada server dan konek- Baris 7-9 Jika koneksi database gagal, maka akan tampilkan pesan bahwa koneksi ke database gagal. Baris 10 Akhiri Tag PHP. 13

6. Simpan ke dalam lokasi c:/xampp/htdocs/xampp, lalu Anda buat folder baru dengan nama koneksi_php dan simpan file dengan nama koneksi.php. Per hatikan Gambar 19. Tempat penyimpan lokasi Beri nama koneksi.php Gambar 19 Menyimpan dengan nama file koneksi.php Klik Save B. MENYELEKSI DATABASE Setelah data terhubung ke dalam Server, Anda diizinkan untuk menghubungkan databse yang akan digunakan. Perintah untuk menyeleksi database adalah mysql_select_db( ). Adapun langkah-langkahnya adalah sebagai berikut; 1. Pastikan jendela Dreamweaver Anda masih aktif. Buatlah halaman PHP yang baru. 2. Ketiklah perintah di bawah ini untuk menyeleksi database maxi yang telah Anda buat sebelumnya. 14

1 2 3 4 5 6 7 8 <?php?> include ( koneksi.php ); $database = maxi ; $selek_db = mysql_select_db ($database); if (!$selek_db) { die ( Database tidak terseleksi ); } Keterangan Kode Baris 1 Baris 2 Awal tag PHP. Memanggil file koneksi.php. Baris 3-4 Variabel database diisi dengan nama database yang akan dipanggil dan variabel unutk penyeleksian database. Baris 5-7 Jika Penyeleksian database tidak berhasil maka tampilkan pesan Databse tidak terseleksi. Baris 8 Akhiri Tag PHP. 3. Simpan ke dalam lokasi c:/xampp/htdocs/xampp/koneksi_php dan simpan file dengan nama seleksi_db.php. Perhatikan Gambar 20. Tempat penyimpan lokasi Beri nama seleksi_db.php Klik Save Gambar 21 Menyimpan file dengan nama seleksi_db.php 15

C. MENAMPILKAN HASIL QUERY Untuk menampilkan seluruh data di dalam tabel. Anda dapat menampilkannya melalui halaman PHP yang akan Anda buat.adapun langkah-langkahnya adalah sebagai berikut; 1. Bukalah Program Dreamweaver Anda dan pilihlah jenis halaman PHP. 2. Kemudian ketiklah perintah di bawah ini untuk menampilkan semua data pada tabel buku. 1 <html> 2 <title>menampilkan data ke dalam tabel</title> 3 <body> 4 <table border= 1 > 5 <tr> 6 <th>kode Buku</th> 7 <th>judul Buku</th><th>Pengarang<th> 8 <th>penerbit</th><th>tahun</th> 9 </tr> 10 <?php 11 include ( koneksi.php ); 12 include ( seleksi_db.php ); 13 $seleksi = SELECT * FROM buku ; 14 $hasil_seleksi = mysql_query ($seleksi); 15 if (!$hasil_seleksi){ 16 echo Proses penyeleksian tabel buku gagal!!! ; 17 18 } else { 19 while ($baris = mysql_fetch_ 20 array ($hasil_seleksi)) { 21 echo <tr> 22 <td>$baris[id]</td> 23 <td>$baris[judul]</td> 24 <td>$baris[pengarang]</td> 25 <td>$baris[penerbit]</td> 26 <td>$baris[tahun]</td> 27 <tr> ; 28 }; 29 }; 30?> 31 </table> 32 </body> 33 </html> 16

Keterangan Kode Baris 1-2 Awal tag HTML dan membuat title atau judul halaman. Baris 3-9 Pada bagian body, dibuat perintah pembuatan tabel dengan tag <th> untuk memasukkan judul masing-masing kolom. Baris 10-13 Awal tag PHP, perintah Include akan menghubungkan dan menyeleksi database dengan memanggil file koneksi.php dan seleksi_db.php yang telah Anda buat sebelumnya. Baris 14 Variabel $seleksi diisi dengan perintah untuk menyeleksi seluruh data di dalam tabel buku, sedangkan variabel $hasil_seleksi diisi dengan perintah untuk meng-eksekusi query penyeleksian tabel. Baris 15-29 Apabila proses penyeleksian gagal, maka akan ditampilkan pesan bahwa proses penyeleksian tabel gagal dan apabila berhasil dilakukan perintah pengulangan WHILE sebanyak baris yang terdapat di dalam tabel buku. Kemudian, hasil dari perintah mysql_fetch_array ditampilkan ke dalam tabel. penulisan nama array harus sesuai dengan nama field yang terdapat pada tabel buku. Baris 30 Akhiri dan tutup tag PHP. Baris 31-33 Akhiri tag tabel body dan HTML. 3. Simpan ke dalam lokasi c:/xampp/htdocs/xampp/koneksi_php dan simpan file dengan nama index.php. Perhatikan Gambar 21. Tempat penyimpan lokasi Beri nama index.php Gambar 21 Menyimpan file dengan nama index.php Klik Save 17

45 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 Mozila Firefox. Adapun langkah-langkahnya sebagai berikut : 1. Anda buka Klik Tombol Start pada Start menu. Kemudian Anda pilih menu All Programs > Mozila Firefox. Lihat Pada Gambar 22. Gambar 22 Membuka Progam Mozila Firefox 2. Kemudian akan tampak jendela browser Mozila Firefox. terlihat pada Gambar 23 di bawah ini. 18

Gambar 23 Jendela Mozila Firefox 3. Setelah itu Anda Ketik dialamat address pada browser Mozila Firefox yaitu http:/localhost/xampp/koneksi_php lalu tekan Enter, maka akan tampil halaman yang telah Anda buat. Perhatikan Gambar 24 Ketik alamat URL di sini Gambar 24 Halaman Index.php 19