s
Postingan kali ini saya dapat dari nurwahyudin.com. Dalam tutorial ini akan
dipelajari cara untuk membuat koneksi ke database dan CRUD data (Create,
Read, Update, Delete) dengan studi kasus data user. Tutorial ini belum membahas
tentang validasi inputan baik client side maupun server side.
Untuk dapat mengikuti
tutorial ini, pastikan anda sudah menginstall server lokal pada PC anda. Saya
menggunakan XAMPP sebagai bundled server apache dan PHP.
Langkah 1 - Struktur Folder
Buat folder baru pada C:\xampp\htdocs\ dengan nama belajar. Folder ini akan menjadi area kerja kita dalam
membuat aplikasi yang nantinya dapat diakses menggunakan browser dengan
mengetikkan localhost/nama_folder. Karena nama folder kita adalah belajar, maka untuk mengakses aplikasi ketikkan localhost/belajar pada address bar browser anda.
Langkah 2 - Database
Buat database dengan
nama belajar. Kemudian buat tabel dengan nama user dengan data berikut:
Fieldname
|
Datatype
|
user_id
|
int(4), PRIMARY,
AUTO INCREMENT
|
username
|
varchar(20)
|
password
|
varchar(255)
|
email
|
varchar(100)
|
fullname
|
varchar(100)
|
agama
|
varchar(15)
|
no_hp
|
bigint(14)
|
Langkah 3 - File Konfigurasi
Sebelum dapat melakukan
CRUD data kedalam database, kita harus membuat koneksi ke database
terlebih dahulu. Tulis kode berikut dengan menggunakan teks editor kesayangan
anda (saya
pake dreamweaver).
<?php
//host yang digunakan
//99,9% tidak perlu dirubah
$host = 'localhost';
//username untuk login ke host
//biasanya didapatkan pada email konfirmasi order hosting
$user = 'root';
//jika menggunakan PC sendiri sebagai host,
//secara default password dikosongkan
$pass = '';
//isikan nama database sesuai database
//yang dibuat pada langkah-1
$dbname = 'belajar';
//mengubung ke host
$connect = mysql_connect($host, $user, $pass) or die(mysql_error());
//memilih database yang akan digunakan
$dbselect = mysql_select_db($dbname);
?>
File config.php ini nantinya akan banyak kita gunakan pada
file-file lain yang perlu menghubung ke server untuk menyimpan, merubah, maupun
menghapus data.
Langkah 4 - Form Input Data
Ketikkan kode berikut,
kemudian simpan dalam folder belajar dengan nama index.php
<html>
<head>
<title>Belajar PHP</title>
</head>
<body>
<h1>Form Input Data</h1>
<form name="input_data" action="insert.php" method="post">
<table border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>Username</td>
<td>:</td>
<td><input type="text" name="username" maxlength="20" required="required" /></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" name="password" maxlength="20" required="required" /></td>
</tr>
<tr>
<td>Fullname</td>
<td>:</td>
<td><input type="text" name="fullname" maxlength="100" required="required" /></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type="email" name="email" required="required" /></td>
</tr>
<tr>
<td>Agama</td>
<td>:</td>
<td><input type="text" name="agama" required="required" /></td>
</tr>
<tr>
<td>Nomor HP</td>
<td>:</td>
<td><input type="text" name="no_hp" maxlength="14" required="required" /></td>
</tr>
<tr>
<td align="right" colspan="3"><input type="submit" name="submit" value="Simpan" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
action=”insert.php” adalah file yang digunakan untuk memproses
data yang dimasukkan melalui form ini. method=”post” adalah metode pengiriman data yang
digunakan. Ada dua jenis menthod untuk mengirim data, yaitu post dan get.
Pengiriman dengan method
POST berarti bahwa variabel-variabel data tidak ditampilkan pada url, sedangkan
pengiriman dengan method GET, variabel-variabel data disertakan pada url
sehingga url terlihat seperti ini: localhost/belajar/insert.php?username=namanya&password=passwordnya&fullname=nama_lengkapnya
Sekarang coba buka pada
browser anda dengan mengetikkan localhost/belajar pada address bar browser. Akan tampil form input data seperti ini.
Langkah 5 - Menyimpan Data
Ketikkan kode berikut,
kemudian dengan nama insert.php
<?php
//panggil file config.php untuk menghubung ke server
include('config.php');
//tangkap data dari form
$username = $_POST['username'];
$password = $_POST['password'];
$fullname = $_POST['fullname'];
$email = $_POST['email'];
$agama = $_POST['agama'];
$no_hp = $_POST['no_hp'];
//simpan data ke database
$query = mysql_query("insert into user values('', '$username', '$password', '$email', '$fullname', '$agama', '$no_hp')") or die(mysql_error());
if ($query) {
header('location:index.php?message=success');
}
?>
include() digunakan untuk menyertakan file lain
dalam file ini. Ingat bahwa pada langkah pertama kita sudah membuat file config.php yang berisi konfigurasi untuk menghubung
ke server, maka setiap kali kita perlu untuk menghubung ke database, kita cukup
memanggil file config.php saja
tanpa harus menuliskan kembali kode-kodenya.
$_POST['name'] digunakan untuk menangkap value yang
dikirim dari form. Untuk menangkap data, gunakan name yang sama dengan name dari form. Contoh: untuk menangkap data username dari form, maka gunakan $_POST['username'].
mysql_query() digunakan untuk menjalankan script SQL.
Pada langkah ini, script SQL yang kita gunakan adalah untuk menambah data ke
database.
Tambahkan kode berikut
pada file index.php setelah <h1></h1> untuk menampilkan pesan sukses ketika berhasil menyimpan
data.
...
<h1>Form Input Data</h1>
<?php
if (!empty($_GET['message']) && $_GET['message'] == 'success') {
echo '<h3>Berhasil menambah data!</h3>';
}
?>
<form name="input_data" action="insert.php" method="post">
...
Sekarang coba jalankan
aplikasi dengan membuka localhost/belajar dan isikan data pada form dan klik tombol simpan. Jika
berhasil, anda akan melihat pesan Berhasil menambah data! seperti gambar dibawah. Jika gagal,
periksa kembali kode yang anda tuliskan. Pastikan tidak ada salah pengetikan.
Langkah 6 - Menampilkan Data
Setelah kita berhasil
menyimpan data kedalam database, sekarang kita buat halaman untuk menampilkan
data-data yang sudah kita simpan. Ketikkan kode berikut dan simpan dengan nama view.php
<?php
include('config.php');
?>
<html>
<head>
<title>Belajar PHP</title>
</head>
<body>
<h1>Data User</h1>
<a href="index.php">+ Tambah Data</a>
<table border="1" cellpadding="5" cellspacing="0">
<thead>
<tr>
<td>No.</td>
<td>Username</td>
<td>Password</td>
<td>Email</td>
<td>Fullname</td>
<td>Agama</td>
<td>No. HP</td>
<td>Opsi</td>
</tr>
</thead>
<tbody>
<?php
$query = mysql_query("select * from user");
$no = 1;
while ($data = mysql_fetch_array($query)) {
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $data['username']; ?></td>
<td><?php echo $data['password']; ?></td>
<td><?php echo $data['email']; ?></td>
<td><?php echo $data['fullname']; ?></td>
<td><?php echo $data['agama']; ?></td>
<td><?php echo $data['no_hp']; ?></td>
<td><a href="#">Edit</a> || <a href="#">Hapus</a></td>
</tr>
<?php
$no++;
}
?>
</tbody>
</table>
</body>
</html>
Kemudian tambahkan kode
berikut pada file index.php setelah </form> sebelum </body>.
...
</form>
<a href="view.php">Lihat Data</a>
</body>
</html>
Sekarang bukalah localhost/belajar/view.php untuk melihat hasilnya.
Pada kolom opsi terdapat
dua menu, yaitu edit dan hapus. Pada langkah ini, kedua menu tersebut masih
belum dapat digunakan. Pada langkah berikutnya akan kita buat menu edit
tersebut.
Langkah 7 - Merubah/Update Data
Dalam menginputkan data
bisa terjadi kesalahan seperti kesalahan input, kesalahan data yang dimasukkan,
ataupun lainnya. Untuk itu, data yang sudah disimpan harus dapat dirubah
sehingga kesalahan dapat diperbaiki.
Pada dasarnya, form
untuk mengedit data adalah sama dengan form untuk menginputkan data. Hanya saja
pada form untuk mengedit data, form tersebut harus menampilkan data yang akan
dirubah.
Untuk itu, buat file
baru dengan nama edit.php, kemudian copy-kan
semua kode yang ada pada file index.php kedalam file edit.php. Selanjutnya kita harus menambahkan beberapa kode agar form edit
dapat menampilkan data yang akan di edit.
Kode untuk file edit.php menjadi seperti ini. Highlight yang saya
berikan adalah baris-baris kode yang ditambahkan ataupun dirubah.
<?php
include('config.php');
?>
<html>
<head>
<title>Belajar PHP</title>
</head>
<body>
<h1>Form Input Data</h1>
<?php
$id = $_GET['id'];
$query = mysql_query("select * from user where user_id='$id'") or die(mysql_error());
$data = mysql_fetch_array($query);
?>
<form name="update_data" action="update.php" method="post">
<input type="hidden" name="user_id" value="<?php echo $id; ?>" />
<table border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>Username</td>
<td>:</td>
<td><input type="text" name="username" maxlength="20" required="required" value="<?php echo $data['username']; ?>" disabled /></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" name="password" maxlength="20" required="required" value="<?php echo $data['password']; ?>" /></td>
</tr>
<tr>
<td>Fullname</td>
<td>:</td>
<td><input type="text" name="fullname" maxlength="100" required="required" value="<?php echo $data['fullname']; ?>" /></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type="email" name="email" required="required" value="<?php echo $data['email']; ?>" /></td>
</tr>
<tr>
<td>Agama</td>
<td>:</td>
<td><input type="text" name="agama" required="required" value="<?php echo $data['agama']; ?>" /></td>
</tr>
<tr>
<td>Nomor HP</td>
<td>:</td>
<td><input type="text" name="no_hp" maxlength="14" required="required" value="<?php echo $data['no_hp']; ?>" /></td>
</tr>
<tr>
<td align="right" colspan="3"><input type="submit" name="submit" value="Simpan" /></td>
</tr>
</tbody>
</table>
</form>
<a href="view.php">Lihat Data</a>
</body>
</html>
Kemudian ubah link pada
file view.php menjadi seperti ini.
<td><a href="edit.php?id=<?php echo $data['user_id']; ?>">Edit</a> || <a href="#">Hapus</a></td>
tidak boleh dirubah
setelah ia terdaftar. Untuk membuat agar field input username tidak dapat
dirubah, kita gunakan atribut disabled. Sampai langkah ini kita belum dapat melakukan perubahan data, kita
baru dapat menampilkan data pada form edit. Untuk merubah data pada database,
kita perlu membuat query SQL
lagi untuk meng-update database dengan
data yang baru.
Buat file baru dengan
nama update.php dan ketikkan kode berikut.
<?php
include('config.php');
//tangkap data dari form
$id = $_POST['user_id'];
$password = $_POST['password'];
$fullname = $_POST['fullname'];
$email = $_POST['email'];
$agama = $_POST['agama'];
$no_hp = $_POST['no_hp'];
//update data di database sesuai user_id
$query = mysql_query("update user set password='$password', fullname='$fullname', email='$email', agama='$agama', no_hp='$no_hp' where user_id='$id'") or die(mysql_error());
if ($query) {
header('location:view.php?message=success');
}
?>
Kemudian tambahkan baris
kode berikut pada file view.php setelah <h1></h1> (sama seperti pada file index.php).
<?php
if (!empty($_GET['message']) && $_GET['message'] == 'success') {
echo '<h3>Berhasil meng-update data!</h3>';
}
?>
Sekarang bukalah halaman view.php pada browser dan ubah-lah salah satu data
yang sudah di inputkan dengan meng-klik tombol edit.
Langkah 8 - Menghapus/Delete Data
Setelah bisa menambah
dan merubah data, sekarang kita buat untuk menghapus data. Buat file baru
dengan nama delete.php dan ketikkan kode berikut.
<?php
include('config.php');
$id = $_GET['id'];
$query = mysql_query("delete from user where user_id='$id'") or die(mysql_error());
if ($query) {
header('location:view.php?message=delete');
}
?>
Kemudian tambahkan kode
pada link dalam file view.php seperti berikut.
<td>
<a href="edit.php?id=<?php echo $data['user_id']; ?>">Edit</a> ||
<a href="delete.php?id=<?php echo $data['user_id']; ?>">Hapus</a>
</td>
Sekarang cobalah untuk
menghapus beberapa data yang sudah di-input-kan.
Kesimpulan
Cobalah ber-eksperimen
membuat aplikasi dengan lebih banyak input-an data sehingga tabel didalam
database juga menjadi semakin banyak, agar pemahaman konsep dasar tentang
pembuatan aplikasi web dengan PHP semakin kental dan mendalam.
Untuk pembuatan aplikasi
yang lebih kompleks, tentu tutorial ini tidak cukup karena masih banyak sekali
yang harus disertakan seperti validasi, security, user interface, dan banyak
lagi materi lainnya yang akan dibahas dalam tutorial berikutnya.
I hope you enjoyed this
tutorial and have learn something new today. Yang berhasil mengikuti tutorial,
WAJIB isi komentar! Yang masih error, juga WAJIB isi komentar! Karena isi
komentar itu hukumnya WAJIB… haha
23.57
My Profile's
semoga tidak lah….
