12 Dec 2011

Membuat Sistem Login Dengan PHP

33 Comments PHP

Tutorial Details 
Difficulty: Beginner
Language: PHP
Software used: Dreamweaver
Estimated Completion Time: 30 minutes
Source: insert_dan_login (195)

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 ^_^.

Tags: ,
written by
I am an Indonesian Web Designer and Developer, and i love rain.
Related Posts

33 Responses to “Membuat Sistem Login Dengan PHP”

  1. Reply abie says:
    December 19, 2011 at 2:52 am

    sistim login berjalan sukses om, tapi aye masih ga ngerti,,

    buat syntac nya masih blom apal.. tricksnya gimana seh om?

    • Reply maswahyu says:
      December 19, 2011 at 3:08 am

      hehe… biar lebih ngerti coba pelajari yg namanya session di php… itu kuncinya buat tutorial ini…

      soal syntax, itu mah gk usah dihapalin… :D
      praktekin aja tiap hari… minimal praktek 1 jam/hari

      ntar jg cepet apal… ^_^

  2. Reply Aji says:
    December 21, 2011 at 12:31 pm

    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?

    Read more: http://www.nurwahyudin.com/php/membuat-aplikasi-input-data-sederhana-dengan-php#ixzz1hAiMPuXr

  3. Reply maswahyu says:
    December 21, 2011 at 5:48 pm

    Kalo ngikutin tutorial ini, emang sengaja dibuat begitu… tidak dibedakan usernya… jadi semua user bisa melihat data yang diinputkan…

    nah.. kalo pingin biar user yg bisa melihat data user yg login cuma user yg login itu, ada beberapa cara….
    - bisa dengan cara kita buat beberapa hak akses untuk user seperti admin, editor, anggota, dan lainnya

    - bisa juga cuma load data user yg login saja dari database… ini cukup di SQL query-nya saja…
    contoh:

    $user_id = $_GET['id'];

$query = mysql_query("SELECT * FROM user WHERE user_id='$user_id'");

$data = mysql_fetch_array($query);

echo "Nama: ".$data['nama'];
//dan seterusnya...

    kalau dijelaskan di kotak komentar ini cukup panjang. Insya Allah nanti saya buatkan tutorial tentang Hak Akses untuk menjawab pertanyaan Om Aji :)

  4. Reply dhani says:
    December 30, 2011 at 8:44 am

    mas wahyu.. bs tolong aku buat bikin nin program pendataan karyawan yang sederhana ga , berserta foto dan data cuti nya .. Fb mas wahyu apa ??

    • Reply maswahyu says:
      December 30, 2011 at 5:37 pm

      boleh aja…
      coba detil request nya lewat halaman kontak ya…
      http://www.nurwahyudin.com/contact

      nanti kita diskusi via email…

  5. Reply Fanny says:
    January 19, 2012 at 7:05 am

    mas mau nanya, jika login dengan NIK, tapi setelah login ditampilkan NAMA atas user yang login, bagaiamana caranya. mohon bantuannya, tolong di kirim via email juga ya mas…terima kasih

    • Reply maswahyu says:
      January 19, 2012 at 8:02 am

      Kalo loginnya pake NIK, untuk menampilkan data user yang login cukup dengan menggunakan NIK itu pada query sql nya.


      $nik = $_GET['nik'];

      $q = mysql_query("select * from user where nik='$nik'");

      $data = mysql_fetch_array($q);

      //tampilkan datanya
      echo "NIK: ".$data['nik'];
      echo "Nama: ".$data['nama'];

      Semoga membantu :)

      • Reply Fanny says:
        January 19, 2012 at 9:22 am

        maksud saya setelah login dengan input NIK dan password dan klik tombol submit, maka akan tampil tulisan “Selamat Datang Fanny”, apakah sama caranya?

        • Reply maswahyu says:
          January 19, 2012 at 10:48 am

          sama saja…
          intinya, ambil NIK yang diinputkan user yang login untuk digunakan dalam sql query nya… kemudian data hasil eksekusi query dapat digunakan untuk membuat info sesuai yang diperlukan…

          contoh:


          $nik = $_GET['nik'];

          $q = mysql_query("select * from user where nik='$nik'");

          $data = mysql_fetch_array($q);

          //tampilkan datanya
          echo "Selamat Datang: ".$data['nama'];

          • Fanny says:
            January 20, 2012 at 1:59 am

            namanya tetep ga tampil mas


            $vnik = $_GET['txtnik']; --> txtnik dari form

            $sql = mysql_query("SELECT * FROM tblkaryawan WHERE nik='$vnik'");

            $data = mysql_fetch_array($sql);

            #menampilkan nama user
            echo "Anda Berhasil Masuk".$riceklagi['namakaryawan']; --> namakaryawan dari field database mysql

            tapi ko namanya ga tampil ya mas?

          • maswahyu says:
            January 20, 2012 at 2:45 am

            coba perhatikan bagian ini:

            $data = mysql_fetch_array($sql);

#menampilkan nama user
echo “Anda Berhasil Masuk”.$riceklagi['namakaryawan']; –> namakaryawan dari field database mysql

            Biar bisa nampilin nama karyawan, seharusnya variabel yang dipake adalah variabel yg diisi dara dari mysql_fetch_array(). Dari kode diatas berarti harusnya variabel $data, bukan variabel $riceklagi. Kemudian nama didalam kurung siku [] itu diisi nama kolom dari tabel yang ingin diambil datanya. Misal di tabel tblkaryawan ada kolom nik, namakaryawan, alamat. Maka untuk mengambil nama karyawan, variabel nya jadi $data['namakaryawan']

            Jadi script nya seharusnya:

            $data = mysql_fetch_array($sql);

#menampilkan nama user
echo “Anda Berhasil Masuk”.$data['namakaryawan']; // namakaryawan dari field database mysql
  6. Reply Faozi says:
    January 19, 2012 at 2:48 pm

    mas,yang tambahan di file otentikasi ditambahkan di bagian mana ya? saya mengikutinya kog eror terus. Terima kasih sebelumnya

  7. Reply Fanny says:
    January 20, 2012 at 10:24 am

    mas ko tetep namanya ga masuk yaa? jadi binun saya….

  8. Reply Fanny says:
    January 20, 2012 at 10:27 am

    $vnik = $_GET['txtnik']; –>; txtnik dari form apa ini yang salah ?

    • Reply maswahyu says:
      January 20, 2012 at 10:34 am

      masa sih masih gk bisa…??? :-/

      mungkin aja dari form inputannya….
      misal, kalo input name nya “txtnik”, maka buat ngambik data inputan itu harus make name dari inputannya. Trus perhatikan juga method pengiriman dari form nya, pake POST, atau GET. kalo pake POST, maka di php buat nerima datanya juga harus pake POST.

      <form name="login" method="post" action="login.php">
    <input type="text" name="txtnik" />
</form>

      maka ngambil nya disesuaikan dengan method dan name nya

      $nik = $_POST['txtnik']; //sesuaikan dengan method dan name inputannya
  9. Reply Fanny says:
    January 20, 2012 at 10:58 am

    mas, tetep ga tampil, apanya yang salah yaa….mas ada alamat email? saya kirimin filenya yaa…..gimana? boleh?

  10. Reply Fanny says:
    January 20, 2012 at 11:23 am

    mas sudah terima?

  11. Reply Faozi says:
    January 20, 2012 at 1:12 pm

    ini merupakan warning error yang ada di halaman login.php mas…
    Warning: session_start() [function.session-start]: Cannot send session cache limiter – headers already sent (output started at C:\xampplite\htdocs\Belajar\login.php:8) in C:\xampplite\htdocs\Belajar\login.php on line 9

    Warning: Cannot modify header information – headers already sent by (output started at C:\xampplite\htdocs\Belajar\login.php:8) in C:\xampplite\htdocs\Belajar\login.php on line 12

  12. Reply Fanny says:
    January 20, 2012 at 2:07 pm

    mas, udah saya kirim ulang

  13. Reply julianz park says:
    January 22, 2012 at 10:15 am

    thanks for informasiny ….

  14. Reply Zemeckis says:
    January 23, 2012 at 9:13 pm

    mas wahyu.., blog ini bermanfaat dan jelas sekali klo menerangkan, aku newbie d PHP tpi berhubung baca blog mas wahyu, ane jadi mulai paham tentang PHP. biar lebih mendalam soal PHP, mas wahyu kasih download ebook format .pdf atau .doc donk..,
    sebelumnya saya berterima kasih udh d’kasih jalan menuju k blog ini.., akhir nya saya trtarik sm PHP. :D

    Sukses terus mas wahyu dan www.nurwahyudin.com nya. ^_^

  15. Reply Fanny says:
    January 24, 2012 at 11:54 am

    pagi mas wahyu..

    mas saya mau tanya, supaya pada saat sudah login, user tidak bisa klik back bagaimana caranya yaa? dan jika user klik home (menuju halaman utama) kenapa kondisi halaman utama kembali kosong ya, tidak ada nama user yang sudah login. mohon bantuannya ya mas…

  16. Reply endylah says:
    January 27, 2012 at 7:44 pm

    ini website sangat berguna, mas saya ada tugas buat ujian praktek kejuruan membuat website ppd. tutorial yang dari pertama sampai yang ini apakah bisa buat database input data pdd?
    trima kasih

    • Reply maswahyu says:
      January 28, 2012 at 12:36 am

      Alhamdulillah…

      Untuk sekedar input data, ini sudah cukup. Tapi kalo untuk bikin website yang lebih kompleks, ini masih sangat kurang. Insya Allah nanti saya buatkan tutorial untuk materi yang lainnya lagi seperti validasi, security, dan lainnya. Sekarang belum sempat nulis lagi, masih sibuk sama kerjaan soalnya :)

  17. Reply kartika says:
    February 21, 2012 at 12:50 pm

    siank mz.. tutornya sngat bermanfaat.. tpi bisa bikin yang pke hak akses antara user, admin, user spesial g ya?? mksh mz sblmnya… mohon bntuannya..

    • Reply maswahyu says:
      February 21, 2012 at 1:33 pm

      Terimakasih mba kartika sudah mengikuti tutorialnya…

      Tutorial berikutnya sedang ditulis tentang hak akses. Tapi masih belum selesai mba…

      Silahkan bekrunjung lagi nanti untuk cek sudah ada tutorial baru atau belum… :)

Leave a Reply

CAPTCHA Image
*

web design

Categories