TUTORIAL CRUD DATA
Create-Read-Update-Delete
Dengan Script PHP dan MySQL
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 (Misalnya XAMPP) pada PC anda.
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).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?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
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
45
46
47
48
49
|
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<?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.
1
2
3
4
5
6
7
8
9
10
11
|
...
<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
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
45
46
47
48
49
50
51
52
|
<?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>.
1
2
3
4
5
6
7
|
...
</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.
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<?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.
1
|
<td><a href="edit.php?id=<?php
echo $data['user_id']; ?>">Edit</a> || <a href="#">Hapus</a></td>
|
Umumnya, username seseorang 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<?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).
1
2
3
4
5
|
<?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.
1
2
3
4
5
6
7
8
9
10
11
|
<?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.
1
2
3
4
|
<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>
|