Nurwahyudin.Com http://www.nurwahyudin.com Just another Tutorials Blog Fri, 20 Jan 2012 11:05:22 +0000 en hourly 1 Membuat Sistem Login Dengan PHP http://www.nurwahyudin.com/php/membuat-sistem-login-dengan-php http://www.nurwahyudin.com/php/membuat-sistem-login-dengan-php#comments Mon, 12 Dec 2011 04:33:36 +0000 maswahyu http://www.nurwahyudin.com/?p=401 Tutorial Details 
Difficulty: Beginner
Language: PHP
Software used: Dreamweaver
Estimated Completion Time: 30 minutes
Source: insert_dan_login (116)

Tutorial kali ini saya ingin membahas tentang pembuatan sistem login sederhana untuk 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 mengikuti tutorial kali ini, anda harus mengikuti tutorial sebelumnya terlebih dahulu.

Berikut saya tampilkan kembali struktur database dari tutorial sebelumnya.

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 1 – Form Login

Buat form login dengan mengetikkan kode berikut. Kemudian simpan pada folder yang sama dengan tutorial sebelumnya (folder belajar) dengan nama login.php.

<html>
<head>
<title>LOGIN</title>
</head>

<body>
<h1>LOGIN</h1>

<?php
//kode php ini kita gunakan untuk menampilkan pesan eror
if (!empty($_GET['error'])) {
	if ($_GET['error'] == 1) {
		echo '<h3>Username dan Password belum diisi!</h3>';
	} else if ($_GET['error'] == 2) {
		echo '<h3>Username belum diisi!</h3>';
	} else if ($_GET['error'] == 3) {
		echo '<h3>Password belum diisi!</h3>';
	} else if ($_GET['error'] == 4) {
		echo '<h3>Username dan Password tidak terdaftar!</h3>';
	}
}
?>

<form name="login" action="otentikasi.php" method="post">
<table border="0" cellpadding="5" cellspacing="0">
	<tr>
    	<td>Username</td>
    	<td>:</td>
    	<td><input type="text" name="username" /></td>
    </tr>
	<tr>
    	<td>Password</td>
    	<td>:</td>
    	<td><input type="password" name="password" /></td>
    </tr>
	<tr align="right">
    	<td colspan="3"><input type="submit" name="login" value="Login" /></td>
    </tr>
</table>
</form>
</body>
</html>

Untuk melihat halaman login ini, bukalah http://localhost/belajar/login.php pada browser.

Langkah 2 – Otentikasi Login

Setelah membuat form login, kita harus membuat sebuah file untuk memproses data login yang dimasukkan user apakah valid atau tidak. Ketikkan kode berikut dan simpan dengan nama otentikasi.php.

<?php
include('config.php');

//tangkap data dari form login
$username = $_POST['username'];
$password = $_POST['password'];

//untuk mencegah sql injection
//kita gunakan mysql_real_escape_string
$username = mysql_real_escape_string($username);
$password = mysql_real_escape_string($password);

//cek data yang dikirim, apakah kosong atau tidak
if (empty($username) && empty($password)) {
	//kalau username dan password kosong
	header('location:login.php?error=1');
	break;
} else if (empty($username)) {
	//kalau username saja yang kosong
	header('location:login.php?error=2');
	break;
} else if (empty($password)) {
	//kalau password saja yang kosong
	//redirect ke halaman index
	header('location:login.php?error=3');
	break;
}

$q = mysql_query("select * from user where username='$username' and password='$password'");

if (mysql_num_rows($q) == 1) {
	//kalau username dan password sudah terdaftar di database
	header('location:index.php');
} else {
	//kalau username ataupun password tidak terdaftar di database
	header('location:login.php?error=4');
}
?>

Kode diatas akan melakukan pengecekan terhadap inputan user yang berupa username dan password apakah username dan password terdaftar atau tidak dalam database. Penjelasan kode program sudah saya sertakan dalam baris-baris komentar pada kode program tersebut.

Sampai disini, sistem login sudah dapat digunakan. Cobalah buka halaman login dengan membuka http://localhost/belajar/login.php pada browser. Kemudian masukkan username dan password yang sudah dibuat pada tutorial sebelumnya. Coba juga untuk memasukkan berbagai kondisi yang berbeda seperti memasukkan username dan password yang salah, mengosongkan field username ataupun password, ataupun mengosongkan keduanya untuk menguji sistem otentikasi yang dibuat.

Sistem login memang sudah berhasil, namun jika hanya sampai tahap ini saja maka fungsi login belum berfungsi maksimal karena user masih dapat masuk kedalam aplikasi tanpa harus login terlebih dahulu. Cobalah buka http://localhost/belajar/. Halaman tersebut masih dapat diakses tanpa harus login terlebih dahulu karena kita belum membuat otentikasi pada setiap halaman apakah user harus login terlebih dahulu atau tidak untuk mendapat akses ke setiap halaman.

Langkah 3 – Otentikasi pada file-file lain

Agar setiap halaman hanya dapat diakses setelah login, kita perlu menambahkan beberapa baris kode pada file otentikasi.php seperti berikut.

<?php
include('config.php');

session_start();

...

if (mysql_num_rows($q) == 1) {
	//kalau username dan password sudah terdaftar di database
	//buat session dengan nama username dengan isi nama user yang login
	$_SESSION['username'] = $username;

	//redirect ke halaman index
	header('location:index.php');
} else {
...

Untuk dapat membuat otentikasi pada setiap halaman, kita menggunakan session untuk menyimpan data username dari user yang telah login. session_start() digunakan untuk membuat session baru (jika session belum dibuat) ataupun melanjutkan session (jika session sudah dibuat sebelumnya). Kemudian data username disimpan dalam session ini dengan menggunakan perintah $_session['username'] = $username yang berarti menyimpan data username kedalam session dengan nama session adalah username. Selanjutnya, data session inilah yang akan selalu kita gunakan untuk men-cek apakah user sudah login atau belum.

Untuk melakukan pengencekan, buat dokumen baru dan ketikkan kode berikut. Kemudian simpan dengan nama cek-login.php.

<?php
session_start();

//jika session username belum dibuat, atau session username kosong
if (!isset($_SESSION['username']) || empty($_SESSION['username'])) {
	//redirect ke halaman login
	header('location:login.php');
}
?>

Kemudian kita harus meng-include kan file cek-login.php ini pada file-file yang hanya boleh diakses setelah user login (index.php, edit.php, dan view.php).

<?php
include('cek-login.php');
?>

Cobalah buka halaman index.php, edit.php, dan view.php pada browser. Jika anda belum login, maka anda akan secara otomatis dialihkan ke halaman login. Setelah login, cobalah untuk membuka halaman login.php. Masih dapat dibuka? Meskipun anda sudah login? Ya, kita belum membuat pengecekan login pada halaman login itu sendiri.

Tambahkan kode berikut pada file login.php.

<?php
session_start();

if (!empty($_SESSION['username'])) {
	header('location:index.php');
}
?>
<html>
<head>
...

Sekarang cobalah buka halaman login.php. Jika anda sudah login, maka anda akan dialihkan ke halaman index.php.

Langkah 4 – Logout

Sekarang kita buat file untuk logout. Karena kita menggunakan session untuk menyimpan variabel yang digunakan dalam validasi login, maka untuk logout, kita cukup menghapus session yang digunakan. Ketikkan kode berikut dan simpan dengan nama logout.php.

<?php
//lanjutkan session yang sudah dibuat sebelumnya
session_start();

//hapus session yang sudah dibuat
session_destroy();

//redirect ke halaman login
header('location:login.php');
?>

Kemudian buat link ke file logout.php pada halaman index.php.

</table>
</form>

<a href="view.php">Lihat Data</a> || <a href="logout.php">Logout</a>

</body>
</html>

Sekarang, sistem login sudah selesai dibuat. Cobalah untuk login dan logout dengan mencoba-coba berbagai kombinasi username  dan password.

Kesimpulan

Dasar pembuatan sistem login adalah dengan menggunakan session untuk menyimpan data login yang kemudian variabel session inilah yang kita gunakan dalam pengecekan apakah user sudah login ataupun belum. Aplikasi ini hanyalah contoh sederhana penggunaan sistem login. Dalam aplikasi yang lebih kompleks, akan lebih banyak lagi pengecekan yang digunakan. Semoga bermanfaat dan jangan lupa isi komentar ya ^_^.

Nurwahyudin.Com http://www.nurwahyudin.com Just another Tutorials Blog Fri, 20 Jan 2012 11:05:22 +0000 en hourly 1 Membuat Sistem Login Dengan PHP http://www.nurwahyudin.com/php/membuat-sistem-login-dengan-php http://www.nurwahyudin.com/php/membuat-sistem-login-dengan-php#comments Mon, 12 Dec 2011 04:33:36 +0000 maswahyu http://www.nurwahyudin.com/?p=401 Tutorial Details 
Difficulty: Beginner
Language: PHP
Software used: Dreamweaver
Estimated Completion Time: 30 minutes
Source: insert_dan_login (116)

Tutorial kali ini saya ingin membahas tentang pembuatan sistem login sederhana untuk 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 mengikuti tutorial kali ini, anda harus mengikuti tutorial sebelumnya terlebih dahulu.

Berikut saya tampilkan kembali struktur database dari tutorial sebelumnya.

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 1 – Form Login

Buat form login dengan mengetikkan kode berikut. Kemudian simpan pada folder yang sama dengan tutorial sebelumnya (folder belajar) dengan nama login.php.

<html>
<head>
<title>LOGIN</title>
</head>

<body>
<h1>LOGIN</h1>

<?php
//kode php ini kita gunakan untuk menampilkan pesan eror
if (!empty($_GET['error'])) {
	if ($_GET['error'] == 1) {
		echo '<h3>Username dan Password belum diisi!</h3>';
	} else if ($_GET['error'] == 2) {
		echo '<h3>Username belum diisi!</h3>';
	} else if ($_GET['error'] == 3) {
		echo '<h3>Password belum diisi!</h3>';
	} else if ($_GET['error'] == 4) {
		echo '<h3>Username dan Password tidak terdaftar!</h3>';
	}
}
?>

<form name="login" action="otentikasi.php" method="post">
<table border="0" cellpadding="5" cellspacing="0">
	<tr>
    	<td>Username</td>
    	<td>:</td>
    	<td><input type="text" name="username" /></td>
    </tr>
	<tr>
    	<td>Password</td>
    	<td>:</td>
    	<td><input type="password" name="password" /></td>
    </tr>
	<tr align="right">
    	<td colspan="3"><input type="submit" name="login" value="Login" /></td>
    </tr>
</table>
</form>
</body>
</html>

Untuk melihat halaman login ini, bukalah http://localhost/belajar/login.php pada browser.

Langkah 2 – Otentikasi Login

Setelah membuat form login, kita harus membuat sebuah file untuk memproses data login yang dimasukkan user apakah valid atau tidak. Ketikkan kode berikut dan simpan dengan nama otentikasi.php.

<?php
include('config.php');

//tangkap data dari form login
$username = $_POST['username'];
$password = $_POST['password'];

//untuk mencegah sql injection
//kita gunakan mysql_real_escape_string
$username = mysql_real_escape_string($username);
$password = mysql_real_escape_string($password);

//cek data yang dikirim, apakah kosong atau tidak
if (empty($username) && empty($password)) {
	//kalau username dan password kosong
	header('location:login.php?error=1');
	break;
} else if (empty($username)) {
	//kalau username saja yang kosong
	header('location:login.php?error=2');
	break;
} else if (empty($password)) {
	//kalau password saja yang kosong
	//redirect ke halaman index
	header('location:login.php?error=3');
	break;
}

$q = mysql_query("select * from user where username='$username' and password='$password'");

if (mysql_num_rows($q) == 1) {
	//kalau username dan password sudah terdaftar di database
	header('location:index.php');
} else {
	//kalau username ataupun password tidak terdaftar di database
	header('location:login.php?error=4');
}
?>

Kode diatas akan melakukan pengecekan terhadap inputan user yang berupa username dan password apakah username dan password terdaftar atau tidak dalam database. Penjelasan kode program sudah saya sertakan dalam baris-baris komentar pada kode program tersebut.

Sampai disini, sistem login sudah dapat digunakan. Cobalah buka halaman login dengan membuka http://localhost/belajar/login.php pada browser. Kemudian masukkan username dan password yang sudah dibuat pada tutorial sebelumnya. Coba juga untuk memasukkan berbagai kondisi yang berbeda seperti memasukkan username dan password yang salah, mengosongkan field username ataupun password, ataupun mengosongkan keduanya untuk menguji sistem otentikasi yang dibuat.

Sistem login memang sudah berhasil, namun jika hanya sampai tahap ini saja maka fungsi login belum berfungsi maksimal karena user masih dapat masuk kedalam aplikasi tanpa harus login terlebih dahulu. Cobalah buka http://localhost/belajar/. Halaman tersebut masih dapat diakses tanpa harus login terlebih dahulu karena kita belum membuat otentikasi pada setiap halaman apakah user harus login terlebih dahulu atau tidak untuk mendapat akses ke setiap halaman.

Langkah 3 – Otentikasi pada file-file lain

Agar setiap halaman hanya dapat diakses setelah login, kita perlu menambahkan beberapa baris kode pada file otentikasi.php seperti berikut.

<?php
include('config.php');

session_start();

...

if (mysql_num_rows($q) == 1) {
	//kalau username dan password sudah terdaftar di database
	//buat session dengan nama username dengan isi nama user yang login
	$_SESSION['username'] = $username;

	//redirect ke halaman index
	header('location:index.php');
} else {
...

Untuk dapat membuat otentikasi pada setiap halaman, kita menggunakan session untuk menyimpan data username dari user yang telah login. session_start() digunakan untuk membuat session baru (jika session belum dibuat) ataupun melanjutkan session (jika session sudah dibuat sebelumnya). Kemudian data username disimpan dalam session ini dengan menggunakan perintah $_session['username'] = $username yang berarti menyimpan data username kedalam session dengan nama session adalah username. Selanjutnya, data session inilah yang akan selalu kita gunakan untuk men-cek apakah user sudah login atau belum.

Untuk melakukan pengencekan, buat dokumen baru dan ketikkan kode berikut. Kemudian simpan dengan nama cek-login.php.

<?php
session_start();

//jika session username belum dibuat, atau session username kosong
if (!isset($_SESSION['username']) || empty($_SESSION['username'])) {
	//redirect ke halaman login
	header('location:login.php');
}
?>

Kemudian kita harus meng-include kan file cek-login.php ini pada file-file yang hanya boleh diakses setelah user login (index.php, edit.php, dan view.php).

<?php
include('cek-login.php');
?>

Cobalah buka halaman index.php, edit.php, dan view.php pada browser. Jika anda belum login, maka anda akan secara otomatis dialihkan ke halaman login. Setelah login, cobalah untuk membuka halaman login.php. Masih dapat dibuka? Meskipun anda sudah login? Ya, kita belum membuat pengecekan login pada halaman login itu sendiri.

Tambahkan kode berikut pada file login.php.

<?php
session_start();

if (!empty($_SESSION['username'])) {
	header('location:index.php');
}
?>
<html>
<head>
...

Sekarang cobalah buka halaman login.php. Jika anda sudah login, maka anda akan dialihkan ke halaman index.php.

Langkah 4 – Logout

Sekarang kita buat file untuk logout. Karena kita menggunakan session untuk menyimpan variabel yang digunakan dalam validasi login, maka untuk logout, kita cukup menghapus session yang digunakan. Ketikkan kode berikut dan simpan dengan nama logout.php.

<?php
//lanjutkan session yang sudah dibuat sebelumnya
session_start();

//hapus session yang sudah dibuat
session_destroy();

//redirect ke halaman login
header('location:login.php');
?>

Kemudian buat link ke file logout.php pada halaman index.php.

</table>
</form>

<a href="view.php">Lihat Data</a> || <a href="logout.php">Logout</a>

</body>
</html>

Sekarang, sistem login sudah selesai dibuat. Cobalah untuk login dan logout dengan mencoba-coba berbagai kombinasi username  dan password.

Kesimpulan

Dasar pembuatan sistem login adalah dengan menggunakan session untuk menyimpan data login yang kemudian variabel session inilah yang kita gunakan dalam pengecekan apakah user sudah login ataupun belum. Aplikasi ini hanyalah contoh sederhana penggunaan sistem login. Dalam aplikasi yang lebih kompleks, akan lebih banyak lagi pengecekan yang digunakan. Semoga bermanfaat dan jangan lupa isi komentar ya ^_^.

]]> http://www.nurwahyudin.com/php/membuat-sistem-login-dengan-php/feed 31 Membuat Aplikasi Input Data Sederhana Dengan PHP http://www.nurwahyudin.com/php/membuat-aplikasi-input-data-sederhana-dengan-php http://www.nurwahyudin.com/php/membuat-aplikasi-input-data-sederhana-dengan-php#comments Thu, 24 Nov 2011 07:52:41 +0000 maswahyu http://www.nurwahyudin.com/?p=296 Tutorial Details 
Difficulty: Beginner
Language: PHP
Software used: Dreamweaver
Estimated Completion Time: 1 Hours – 2 Hours
Source: insert_dan_login (116)

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)
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.

form input data

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.

berhasil input data

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.

view data

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.

form edit databerhasil edit data

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 :D

]]> http://www.nurwahyudin.com/php/membuat-aplikasi-input-data-sederhana-dengan-php/feed 19