Membuat Aplikasi Input Data
Sederhana Dengan PHP
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.
|
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:
|
1
|
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');
}
?>
|
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.
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>
|
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 
0 komentar:
Post a Comment