1 2 E-trik Ajax Database MySQL Dedi Alnas3 Pengenalan MySQL Tutorial kali ini akan membahas cara pembuatan aplikasi web yang dapat dihubungkan dengan ...
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
Database MySQL 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
Database MySQL 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
Database MySQL
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
Database MySQL 3. Apabila proses pembuatan database berhasil, maka akan tercipta database baru pada phpMyAdmin seperti pada Gambar 9.
2 2
Gambar 9 Pembuatan database berhasil
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
Database MySQL 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
Database MySQL Klik tab SQL
Ketiklah perintah di bawah ini
Gambar 11 Membuat tabel dengan perintah Klik SQLtombol Go.
Klik buku Gambar 12 Melihat tabel buku
8
Database MySQL
Gambar 13 Menampilkan hasil pembuatan tabel
3 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.
• 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
10
Klik Go
Database MySQL
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
Database MySQL 3. Setelah diklik icon baru seperti Gambar 17.
maka akan tampil jendela dokumen
Gambar 16 Memilih PHP
Gambar 17 Tampilan Jendela dokumen PHP
12
Database MySQL 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
• Baris 1 Awal tag PHP. • Baris 2 - 6 Variabel host , user , password pada server dan koneksi. • Baris 7 -9 Jika koneksi database gagal , maka akan tampilkan pesan bahwa koneksi ke database gagal. • Baris 10 Akhiri Tag PHP.
13
Database MySQL 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
Klik Save Beri nama koneksi.php
Gambar 19 Menyimpan dengan nama file koneksi.php
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
Database MySQL 1 2 3 4 5 6 7 8
include (“koneksi.php”); $database = “maxi”; $selek_db = mysql_select_db ($database); if (!$selek_db) { die (“Database tidak terseleksi”); }
• Keterangan Kode
• Baris 1 Awal tag PHP. • Baris 2 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
Klik Save
Beri nama seleksi_db.php
Gambar 21 Menyimpan file dengan nama seleksi_db.php
15
Database MySQL 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 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
Menampilkan data ke dalam tabel
Kode Buku
Judul Buku
Pengarang
Penerbit
tahun
$baris[id]
$baris[judul]
$baris[pengarang]
$baris[penerbit]
$baris[tahun]
”; }; }; ?>
16
Database MySQL • 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
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
Klik Save
Gambar 21 Menyimpan file dengan nama index.php
17
Database MySQL
54
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
Database MySQL
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
