Erwin Heldy Blog

14 Tutorial Membuat Halaman Login Sederhana Yang Aman

Kali ini saya akan memberikan contoh penggunaan database, session, dan enkripsi MD5 untuk menjadikannya sebagai halaman login yang cukup aman.

Kebutuhan:
- Webserver dengan dukungan PHP
- Myslq Database Server

Secara sederhana, cara kerjanya adalah sbb:
- Ketika user memasukkan username dan password-nya, maka yang pertama kali dilakukan adalah mengeceknya dalam database apakah username tersebut telah terdaftar.
- Jika telah terdaftar dan berhasil melakukan login, maka sang user akan diberi sebuah session yang diambil dari usernamenya
- Jika kesemuanya tidak sesuai maka sang user akan diredirect ke halaman login.php, sehingga terlihat seperti diam ditempat.

Pertama-tama kita buat databasenya

create database coba;
use coba;
CREATE TABLE IF NOT EXISTS `users` (
  `username` varchar(20) NOT NULL,
  `password` varchar(200) NOT NULL,
  PRIMARY KEY (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

selanjutnya kita buat file-file php-nya

config.php

<?php 
//membuat koneksi ke database
mysql_connect("localhost", "root", "admin");

//localhost = nama server-nya
//root  = user mysql
//admin  = password user root
 
//memilih database
mysql_select_db("coba");
?>

<?php 
//memulai session
session_start(); 

//cek adanya session, jika session sudah ada maka diarahkan ke index.php
if (ISSET($_SESSION['username'])){
header("location: index.php");
}
?>


<form method="post" action="cek.php">
<pre>Username <input name="username" type="text">
Password <input name="password" type="password">
  <input name="submit" value="Login" type="submit">

  Bukan Member? Silahkan Daftar
  <a href="signup.php">Daftar</a>
  
</pre>
</form>

cek.php

<?php 
//memulai session
session_start(); 

//koneksi ke database
include "config.php" ; 

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

//enkripsi password dengan md5
$password_md5   = md5($password);

//cek username dan password dari database
$perintah   = "select * from  users where username='$username'&&password='$password_md5'"; 
$perintah_di_query = mysql_query($perintah); 
$ketersediaan  = mysql_num_rows($perintah_di_query); 

//Cek adanya username dan password di database dilanjutkan dengan membuat session
if ($ketersediaan >= 1 ){ 
$_SESSION['username'] = $username; 
header("location: index.php"); 
}else{
header("location: login.php"); 
}
?>

index.php

<?php 
//memulai session
session_start(); 

//cek adanya session
if (ISSET($_SESSION['username'])){
echo "Anda Login Sebagai ";
echo $_SESSION['username']; 
echo "<br><a href='logout.php'>logout</a>"; 

//jika tidak ada session
}else{
header("location: login.php");
}
?> 
<html><body>
<br><br><h2>
Home Page
<br><br></h2>
</body></html>

logout.php

<?php  
//memulai session
session_start(); 

//cek adanya session, jika session ada maka akan di unset dan dilanjutkan dengan destroy session
if(ISSET($_SESSION['username'])) { 
UNSET($_SESSION['username']); 
} 
header("location: index.php"); 
session_destroy(); 
?>

signup.php

<form method="post" action="signup_process.php">
<pre><h2>Form Pendaftaran</h2>
Username <input name="username" type="text">
Password <input name="password" type="password">
  <input name="submit" value="Daftar" type="submit">
</pre>
</form>

signup_process.php

<?php 
include "config.php";

///mengambil data dari form
$username  = $_POST['username'];
$password  = $_POST['password'];
$password_md5 = md5($password);

//cek pengisian data
if($username=='' || $password==''){
echo "Data tidak lengkap<br--><a href=signup.php>Back</a>";

//jika data sudah lengkap, dilanjutkan input data ke database
}else{
$perintah   = "insert into users values ('$username', '$password_md5')"; 
$perintah_di_query = mysql_query($perintah); 

//Jika input data berhasil, dilanjutkan dengan pemberitahuan pendaftaran berhasil
if ($perintah_di_query) {
echo "Daftar berhasil, silakan <a href='index.php'>login</a>";

//jika input data gagal, dilanjutkan dengan pemberitahuan pendaftaran gagal
}else{
echo "Daftar gagal atau username telah terdaftar silakan <a href='signup.php'>Ulangi</a> atau <a href='login.php'>Login</a>";
}
}
?>

- Pengujian dilakukan dengan membuat sebuah user dan melakukan proses login, jika berhasil maka Home Page akan tampil.

1 Security Image Menggunakan PHP

Security image adalah bentuk perlindungan terhadap suatu form dari serangan SPAM. Sebagai contoh, anda mengisi formulir pendaftaran untuk mendapatkan account tertentu dan contoh lainnya adalah pengisian kotak komentar di halaman tertentu yang menggunakan security image.

Screenshot:

----------------------------------------------------------------------------

Cara kerjanya:
- Formulir akan menampilkan security code yang di generate oleh script PHP, apabila page tersebut di refresh maka security code akan di generate lagi sehingga berubah codenya hal ini sangat berguna sekali untuk menangkal serangan spam.
- Setelah di submit, script php akan memvalidasi data anda dan mencocok kan security code yang telah anda masukkan apabila security code tidak sama, maka proses akan di batalkan apabila security code sama, maka proses akan dilanjutkan.

Berikut file-file yang akan digunakan:
- index.html
- action.php
- captcha.php
- DoradoHeadline.ttf

File index.html

<form action="action.php" method="post">
Pesan: 

<textarea cols="50" name="message" rows="10"></textarea>



<img src="captcha.php">

Security Code: <input id="security_code" name="security_code" type="text">

<input name="submit" value="Submit" type="submit"> 
</form>

File action.php

<?php   
session_start(); 
if( isset($_POST['submit'])) { 
   if(($_SESSION['security_code'] == $_POST['security_code']) &&  
(!empty($_SESSION['security_code'])) ) { 
      // masukkan script anda jika validasi benar 
      echo 'Terimakasih Pesan anda sudah muncul
"'.$_POST['message'].'"'; 
   echo "
<a href='index.html'>kembali</a>";
   } else { 
      // masukkan script anda jika validasi salah 
      echo 'Sorry, anda memasukkan security code yang salah
'; 
      include "index.html"; 
   } 
} else { 
      include "index.html"; 
    } 
?>

File captcha.php

<?php 
session_start();

class CaptchaSecurityImages {

   var $font = './DoradoHeadline.ttf';
   
   function generateCode($characters) {
      /* list all possible characters, similar looking characters and vowels have been removed */
      $possible = 'BCDFGHJKMNPQRSTVWXYZ23456789bcdfghjkmnpqrstvwxyz';
      $code = '';
      $i = 0;
      while ($i < $characters) {
         $code .= substr($possible, mt_rand(0, strlen($possible)-1), 1);
         $i++;
      }
      return $code;
   }

   function CaptchaSecurityImages($width='120',$height='40',$characters='6') {

      $code = $this->generateCode($characters);

      /* font size will be 75% of the image height */
      $font_size = $height * 0.50;
      $image = imagecreate($width, $height) or die('Cannot initialize new GD image stream');

      /* set the colours */
      $background_color = imagecolorallocate($image, 255, 255, 255);

      /* red text */
      //$text_color = imagecolorallocate($image, 220, 10, 10);

      /* black text */
      $text_color = imagecolorallocate($image, 1, 1, 1);

 $rndR = rand(98,198);
 $rndG = rand(98,198);
 $rndB = rand(98,198);
      $noise_color = imagecolorallocate($image, $rndR, $rndG, $rndB);

      /* generate random dots in background */
      for( $i=0; $i<($width*$height)/3; $i++ ) {
         imagefilledellipse($image, mt_rand(0,$width), mt_rand(0,$height), 1, 1, $noise_color);
      }

      /* generate random lines in background */
      for( $i=0; $i<($width*$height)/150; $i++ ) {
         imageline($image, mt_rand(0,$width), mt_rand(0,$height), mt_rand(0,$width), mt_rand(0,$height), $noise_color);
      }

      /* create textbox and add text */
      $textbox = imagettfbbox($font_size, 0, $this->font, $code) or die('Error in imagettfbbox function');
      $x = ($width - $textbox[4])/2;
      $y = ($height - $textbox[5])/2;
      imagettftext($image, $font_size, 0, $x, $y, $text_color, $this->font , $code) or die('Error in imagettftext function');

      // Show the image.
 if (function_exists('imagegif'))
 {
  header('Content-type: image/gif');
  imagegif($image);
 }
 else
 {
  header('Content-type: image/png');
  imagepng($image);
 }

 // Bail out.
 imagedestroy($image);

      $_SESSION['security_code'] = $code;

      die();


   }

}

$width = isset($_GET['width']) && $_GET['height'] < 600 ? $_GET['width'] : '132';
$height = isset($_GET['height']) && $_GET['height'] < 200 ? $_GET['height'] : '36';
$characters = isset($_GET['characters']) && $_GET['characters'] > 2 ? $_GET['characters'] : '6';

$captcha = new CaptchaSecurityImages($width,$height,$characters);

?>

Erwin Heldy Blog

14 Tutorial Membuat Halaman Login Sederhana Yang Aman

1 Security Image Menggunakan PHP

Category

Blog Archive