Tutorial Details
Difficulty: Beginner
Language: PHP
Software used: Dreamweaver
Estimated Completion Time: 1 Hours – 2 Hours
Source: insert_dan_login (195)
Untuk mengawali kembalinya blog yang sudah lama tidur ini, saya membuat tutorial untuk aplikasi input data sederhana dengan menggunakan 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) |
| 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>
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.
<?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 
mas,.,
nama databasenya ‘belajar’
terus nama tabelnya apa mas??
apa belajar juga??
A’am
Wah iya, saya lupa gak nyebutin nama buat tabel nya,,,,
Disitu nama untuk tabel nya, saya pake user
Yok dilanjutin tutorialnya..
thanks a lot….
udah membantu menjawab rasa penasaranku selama ini………
(((^_____^)))
Semoga bermanfaat ^_^
mantap mas. niceshare.
Thanks gempa…
[...] dapat masuk kedalam sistem aplikasi. Tutorial ini merupakan lanjutan dari tutorial sebelumnya: Membuat Aplikasi Input Data Sederhana Dengan PHP, sehingga database yang digunakan adalah database dalam tutorial sebelumnya. Jadi, untuk dapat [...]
om, aye ga bisa yg edit..
muncul error : Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in C:\xampp\htdocs\belajar\edit.php on line 16
ada yg salah kah?
terima kasih
Dari sisi HTML kode-nya, masih banyak yg kurang2 tuh om…
Coba dilengkapin dulu antara kutip (“) dan closing tag nya…
Untuk pesan eror nya itu dari code PHP nya…
Bisa sekalian smua code di file itu ditampilkan om… biar bisa kasih solusi
Mas numpang tanya nih… Seumpama saya buat dua user, User A n user B. lalu saya login pake user A n input data. Kemudian saya ganti user dengan user B kemudian saya tampil data. kok datanya user A bisa kelihatan di user B? biar data user A tidak kelihatan di user B gimana scriptnya mas?
mas, gimana caranya membuat scrip menyimpan data (insert.php) cukup dituliskan di satu file saja yaitu di index.php, khan tidak memperbanyak file di dalam directory
biar cukup di 1 file saja, coba pake case.
Contoh index.php:
<?php $action = $_GET['act']; switch ($action) { case '': ?> <form name="input_data" action="index.php?act=insert" method="post"> ... code untuk form tulis disini ... <?php break; case 'insert': //code buat insert data taruh disini break; } ?>Perhatikan baris kode untuk form, disitu action nya diarahkan ke file index.php dengan tambahan ?act=insert sehingga url nya menjadi index.php?act=insert. nah, variabel act ini yang akan dibaca untuk menentukan action apa yg akan dilakukan oleh file index.php dengan menggunakan case.
sore mas, untuk yang edit, setelah saya ubah datanya dan saya klik save. Pada lihat data, data yang sudah di edit, malah hilang. mohon bantuannya mas….file sudah saya kirim by email…mohon bantuannya…
asalamualaikum gan neh tutorial emang mantep tp kok pas lg menghapus tuh data ilaang semua ya gan tolong gan ane kasih yang menghapusnya satu record ajh
……
mantap bin ajep neh tutorial
waalaikumsalam…
wah tanks nih gan udah dibilang mantepp..
itu di tutorial buat hapus datanya emang satu-satu koq gan, delete per record, gk delete semuanya
keknya agan ada di SQL syntax nya…
coba dicek lagi gan
delete from userkalo kek gini, bakalan ngehapus semua data di tabel gan.buat ngehapus data tertentu, harusnya kek gini gan
delete from user where id_user='idnya_si_user'dicoba gan…
Makasih masbro, mantab..
mas.. mau tny.. smw script yg dibuat iki.. dsmpenny neng folder belajar iku yoo? matur suwon..
iya..
langkah 7 agk ora mudeng e mas.. buat lbh jlas mas.. please. btuh tenan iki..
selamat pagi mas, saya membuat projek yang hampir mirip dengan yang mas ajarkan. tapi ada error,
Parse error: syntax error, unexpected ‘}’ in C:\xampp\htdocs\adira\view.php on line 45
mohon bantuannya mas
DATA PESERTA
DATA PESERTA ADIRA AICI 2012
Tambah Data
USER ID
DIVISI
NAMA PESERTA
JOB TITLE
ORGANIZATION NAME
PHOTO
ACTION
Edit || Hapus
Parse error: syntax error, unexpected ‘}’ in C:\xampp\htdocs\adira\view.php on line 45Coba di cek lagi buka tutup blok kode nya {}
Setiap ada blok pembuka seperti ini {, maka harus ada blok penutupnya seperti ini }
Cek juga, mungkin blok penutupnya kelebihan, jadi seperti ini {}}
contoh:
if (condition) {
Ini bisa jadi error, karena tidak ada blok penutupnya
contoh 2:
if (condition) {
kode program
}
}
Ini juga error, karena kelebihan blok penutup.
thanks buat tutorialnya, sangat membantu
untuk tambah data kok muncul “Duplicate entry ’0′ for key 1″ itu gmn?klo primary selain user_id bisa..trims
“Duplicate entry ’0′ for key 1″Ini berarti errornya karena ada row yang bernilai sama dalam 1 field yang diharuskan unik (tidak boleh sama).
Dari tutorial, saya cek tidak ada yang salah. Coba mas wawan cek lagi di SQL syntax nya. Untuk belajar, pastikan coding yang dituliskan sama persis dengan yang ada dalam tutorial ini.
Kalo masih ada masalah, silahkan ditanyakan lagi, and Thanks udah ngikutin tutorialnya…