Cara Membuat Sistem Login Keren Dengan PHP ~ Be Programer

Cara Membuat Sistem Login Keren Dengan PHP - Kali ini kita akan membuat sitem login dengan session yang di sertai dengan fitur logout menggunakan PHP. Sistem login digunakan untuk otentikasi user masuk ke dalam suatu sistem dengan mengirimkan data seperti username atau password yang nantinya di cocokan dengan data yang ada dalam database. Lebih jelasnya langsung ke prakteknya memebuat sistem login dengan PHP.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Database

Pertama buatlah sebuah database terlebih dahulu dengan nama db_login kemudian buatlah sebuah table di dalamnya dengan nama tbl_login dengan struktur :

Name	Type	Size	Extra	Primary
id	INT	100	auto_increment	yes
username	VARCHAR	50
password	VARCHAR	100

Masukan sebuah data untuk kita login :

username : admin
password : admin ( enkripsi password dengan MD5 agar lebih aman )

PHP

Pertama buatlah sebuah folder dengan nama login_keren di dalam webserver anda

login.php

Untuk form loginnya buatlah sebuah file PHP baru dengan nama login.php di dalam folder login_keren dengan isi script :

<!DOCTYPE html>
<head>
   <title>Login Form | Jin Toples Programming</title>
   <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
 <?php
  //ini digunakan untuk mengecek apakah session login username ada
  session_start();
  if (!empty($_SESSION['username'])) {
   //jika ada redirect ke halaman index 
   header('location:index.php');
  } 
 ?>
  <div class="login"> <!-- Login -->
    <h1>Login to your account</h1>

    <form class="form" action="cek_login.php" method="post" action="">
  <?php 
   //kode php ini kita gunakan untuk menampilkan pesan eror
   if (!empty($_GET['error'])) {
    if ($_GET['error'] == 1) {
     echo '<h3 class="error">Username dan Password belum diisi!</h3>';
    } else if ($_GET['error'] == 2) {
     echo '<h3 class="error">Username belum diisi!</h3>';
    } else if ($_GET['error'] == 3) {
     echo '<h3 class="error">Password belum diisi!</h3>';
    } else if ($_GET['error'] == 4) {
     echo '<h3 class="error">Username dan Password tidak terdaftar!</h3>';
    }
   }
  ?>
      <p class="field">
        <input type="text" name="username" placeholder="Username or email" required/>
      </p>

      <p class="field">
        <input type="password" name="password" placeholder="Password" required/>
      </p>

      <p class="submit"><input class="btn" type="submit" name="commit" value="Login"></p>
    </form>
  </div> <!--/ Login-->
</body>
</html>

config.php

Untuk koneksi ke database buatlah sebuah file baru dengan nama config.php di dalam folder yang sama.

<?php
 //digunakan untuk koneksi ke database
 mysql_connect("localhost","root","");
 mysql_select_db("db_login");
?>

cek_login.php

Untuk otentikasi data yang di kirimkan dari form login buatlah sebuah file baru dengan nama cek_login.php di dalam folder yang sama.

<?php
 //memanggil file koneksi database
 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 = MD5(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;
 }
 
 //mencari data dengan username dan password yang sama di dalam tabel tbl_user
 $q = mysql_query("select * from tbl_user where username='$username' and password='$password'");
 
 //mengecek apakah hasil pencarian data di atas ada
 if (mysql_num_rows($q) == 1) {
  session_start();
  //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 {
  //kalau username ataupun password tidak terdaftar di database
  header('location:login.php?error=4');
 }
?>

cek_session.php

Sekarang untuk mengecek apakah session login username ada atau tidak buatlah sebuah file baru dengan nama cek_session.php di dalam folder yang sama.

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

index.php

Untuk halaman yang muncul ketika berhasil login buatlah sebuah file baru dengan nama index.php di dalam folder yang sama

<!DOCTYPE html>
<head>
   <title>Login Form | Jin Toples Programming</title>
   <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
 <?php
  //memanggil file cek_session.php
  include('cek_session.php');
 ?>
  <div class="login"> <!-- Login -->
    <h1>Login Success</h1>
    <form class="form" method="post" action="">  
  <h3 class="sukses">Login Berhasil</h3>
      <p class="submit"><a href="logout.php"><input class="btn" type="button" name="commit" value="Logout"></a></p>
    </form>
  </div> <!--/ Login-->
</body>
</html>

Logout.php

Terakhir untuk menghapus semua session yang ada atau logout buat sebuah file baru dengan nama logout.php di dalam folder yang sama.

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

 //hapus session yang sudah dibuat
 session_destroy();

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

Css

Terakhir untuk mempercanti tampilann form anda agar lebih keren buat sebuah folder baru dengan nama CSS di dalam folder login_keren kemudian buatlah sebuah file CSS di dalamnya dengan nama style.css

body {
  font: 13px/20px "Open Sans", Tahoma, Verdana, sans-serif;
  color: #a7a599;
  background: #31302b;
}

/* === Form === */
.form {
    width: 100%;
}

.form .field {
    text-align: center;
}

.form .field i {
    font-size: 14px;
    left: 0px;
    top: 0px;
    position: absolute;
    height: 44px;
    width: 44px;
    color: #f7f3eb;
    background: #676056;
    text-align: center;
    line-height: 44px;
    transition: all 0.3s ease-out;
    pointer-events: none;
}

/* === Login === */
.login {
 position: relative;
 margin: 150px auto;
 width: 500px;
 background: white;
 border-radius: 3px;
}

.login:before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  z-index: -1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.login h1 {
  line-height: 55px;
  font-size: 18px;
  font-weight: bold;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  background: #f2672e;

  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.error {
 text-align: center;
 margin: 10px 0px;
 font-size: 20px;
 background: #f2dede;
 color: #a94442;
 padding: 20px 0px;
}

.sukses{
 text-align: center;
 margin: 10px 0px;
 font-size: 20px;
 background: #dff0d8;
 color: #3c763d;
 padding: 20px 0px;
}

.login p:first-child {
  margin-top: 30px;
}

.login p.submit {
  text-align: center;
}

/* === Input Form === */
::-webkit-input-placeholder {
  color: #ded9cf;
  font-family:'Open Sans';
}

:-moz-placeholder {
  color: #ded9cf !important;
  font-family:'Open Sans';
}

.form input[type=text],
.form input[type=password] {
 font-family: 'Open Sans', Calibri, Arial, sans-serif;
 font-size: 18px;
 font-weight: 400;
 padding: 20px 15px 20px 15px;
 position: relative;
 width: 72%;
 height: 24px;
 color: #676056;
 border: none;
 background: #f7f3eb;
 color: #777;
 transition: color 0.3s ease-out;
}

.form input[type=text] {
    margin-bottom: 15px;
}

.form input[type=text]:hover ~ i,
.form input[type=password]:hover ~ i {
    color: #ded9cf;
}

.form input[type=text]:focus ~ i,
.form input[type=password]:focus ~ i {
    color: #f2672e;
}

.form input[type=text]:focus,
.form input[type=password]:focus,
.btn {
    outline: none;
}

.btn {
 margin-top: 15px;
 width: 80%;
 text-align: center;
 font-size: 14px;
 font-family: 'Open Sans',sans-serif;
 font-weight: bold;
 padding: 18px 0;
 letter-spacing: 0;
 -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
 -moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
 box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
 color: #fff;
 background-color: #f2672e;
 text-shadow: none;
 text-transform: uppercase;
 border: none;
 cursor: pointer;
 position: relative;
 margin-bottom: 20px;
 -webkit-animation: shadowFadeOut 0.4s;
 -moz-animation: shadowFadeOut 0.4s;
}

.btn:hover,.btn:focus{
  color: #fff;
  -webkit-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
  -moz-box-shadow:    inset 0px 54px 0px 0px rgba(204,86,15,1);
  box-shadow:         inset 0px 54px 0px 0px rgba(204,86,15,1);
  -webkit-animation: shadowFade 0.4s;
  -moz-animation: shadowFade 0.4s;
}

@keyframes shadowFade {
    0% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 54px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 54px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

@keyframes shadowFadeOut {
    0% {
      -webkit-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 54px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 54px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

@-webkit-keyframes shadowFade {
    0% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 54px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 54px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

@-webkit-keyframes shadowFadeOut {
    0% {
      -webkit-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 54px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 54px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

@-moz-keyframes shadowFade {
    0% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 54px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 54px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

@-moz-keyframes shadowFadeOut {
    0% {
      -webkit-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 54px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 54px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

Anda sekarang dapat mencobanya anda dengan cara membukanya di browser anda, dengan mengetikan url :

http://localhost/login_keren

Cobalah anda login dengan menggunakan username : admin password : admin.

Anda dapat mengunduh file jadinya di sini : DOWNLOAD

Sistem Login Keren Dengan PHP anda sekarang sudah selesai, baca juga tutorial program PHP lainnya.

Be Programer