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 kalian sudah menginstall server lokal pada PC. Saya menggunakan
XAMPP sebagai bundled server apache dan PHP.
Download “CRUD dan Login” belajar.zip – Downloaded 58600 times – 6 kB
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 kalian.
Langkah 2 – Database
Buat database dengan nama belajar. Kemudian buat tabel dengan nama
user dengan data berikut:
|
|
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. Buat file baru dan simpan
dengan nama
config.php.
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
50
|
<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>
|
Attribut
action="insert.php" adalah file yang digunakan untuk memproses data yang dimasukkan melalui form ini. Attribut
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
berikut:
|
|
http://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');
}
|
Syntax
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.
Variabel
$_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'].
Syntax
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
12
|
...
<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 kalian ketik. 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
|
<?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.
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
66
|
<?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>
|
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).
|
|
<?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
12
|
<?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
Sumber
