Web Dinamis Bagian IV ( Membuat Sistem Login)

Kamis, 20 September 2012

Sebelum Melanjutkan pada Tahan IV ini pada pembuatan Website Dinamis Berbasis PHP Mysql, ada baiknya kita mencoba meriview dari tahap-tahap sebelumnya :

1. Membuat Web Dinamis Bagian 1 kita sudah membuat halaman index
2. Membuat Web Dinamis Bagian II kita sudah membuat halaman admin,
3. Membuat Web dinamis Bagian III kita sudah membuat file koneksi.php

Nah pada kali ini kita akan membuat Sistem Login , dimana ini digunakan untuk masuk ke halaman admin bagi yang mempunyai , Password, username dan hak akses, intinya kira-kira begitu.

Sekarang aktifkan Xampp Control->Service Apache dan Mysql->buat database dengan nama "db_ebsof" pada phpmyadmin

Gambar Xampp Control

Pembuatan Database "db_ebsof"

Setelah itu buatlah tabel, di dalam database "db_ebsof" dengan nama tbl_user

berikut script nya tbl_user:

CREATE TABLE `db_ebsof`.`tbl_user` (
`id_user` INT( 3 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 40 ) NOT NULL ,
`password` VARCHAR( 40 ) NOT NULL ,
`level` VARCHAR( 40 ) NOT NULL ,
`blokir` ENUM( 'Y', 'N' ) NOT NULL
) ENGINE = MYISAM ;

Setelah tbl_user berhasil dibuat , insertkan data sebagai berikut :

INSERT INTO `db_ebsof`.`tbl_user` (
`id_user` ,
`username` ,
`password` ,
`level` ,
`blokir`
)
VALUES (
'1', 'admin', 'admin', 'admin', 'N'

Pada tahap ini kita sudah selesai membuat Database dengan nama "db_ebsof" dan tabel dengan nama "tbl_user" ,

Nah.. Langkah selanjutnya ialah kita membuat FORM login pada halaman index.php , berikut tampilannya :

Form Login
User	:
Pass	:

langkah penambahan Form login yaitu dengan menambahkan form dan table dengan ukuran 200 px, dengan baris 5 , dan 2 kolom, baris boleh lebih ,, tergantung selera anda

Tambahkan Form Login ini di antara code :

    <td width="200" height="600" valign="top" bgcolor="#00CCFF">
...... </td>

dan berikut ini code form login.

<table width="200" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><form name="form1" method="post" action="cek_login.php">
          <table width="200" border="0" cellspacing="0" cellpadding="2">
            <tr bgcolor="#003366">
              <td height="30" colspan="2"><div align="center"><strong>Form Login </strong></div></td>
              </tr>
            <tr>
              <td width="74" height="30">Username</td>
              <td width="126">: 
                <input name="username" type="text" id="username" size="10"></td>
            </tr>
            <tr>
              <td height="30">Password</td>
              <td>: 
                <input name="password" type="password" id="password" size="10"></td>
            </tr>
            <tr>
              <td height="30">&nbsp;</td>
              <td><input type="submit" name="Submit" value="Login"></td>
            </tr>
          </table>
        </form></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>

Sehingga kode html "index.php" yang sudah di modifikasi dengan penambahan form login akan seperti ini

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Web Portal Ebsof</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>



<body>

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr bgcolor="#003366">

    <td height="100" colspan="2">&nbsp;</td>

  </tr>

  <tr bgcolor="#CCFF66">

    <td colspan="2">&nbsp;</td>

  </tr>

  <tr>

    <td width="200" height="600" valign="top" bgcolor="#00CCFF"><table width="200" border="0" cellspacing="0" cellpadding="0">

      <tr>

        <td><form name="form1" method="post" action="cek_login.php">

          <table width="200" border="0" cellspacing="0" cellpadding="2">

            <tr bgcolor="#003366">

              <td height="30" colspan="2"><div align="center"><strong>Form Login </strong></div></td>

              </tr>

            <tr>

              <td width="74" height="30">Username</td>

              <td width="126">: 

                <input name="username" type="text" id="username" size="10"></td>

            </tr>

            <tr>

              <td height="30">Password</td>

              <td>: 

                <input name="password" type="password" id="password" size="10"></td>

            </tr>

            <tr>

              <td height="30">&nbsp;</td>

              <td><input type="submit" name="Submit" value="Login"></td>

            </tr>

          </table>

        </form></td>

      </tr>

      <tr>

        <td>&nbsp;</td>

      </tr>

    </table></td>

    <td valign="top">&nbsp;</td>

  </tr>

  <tr bgcolor="#0099FF">

    <td height="80" colspan="2">&nbsp;</td>

  </tr>

</table>

</body>

</html>

Pada tahap ini kita sudah menyelesaikan 2 pekerjaan untuk membuat sistem login yaitu :

1. Membuat Database dimana databasenya bernama "db_ebsof" dan tbl_user , serta id user yang nantinya kita gunakan adalah :

userid : admin
password : admin

2. Memodifikasi "index.php" guna membuat Form Login

Setelah selesai pada 2 tahap di atas , tahap selanjutnya adalah membuat coding PHP, yang berguna untuk memproses atau mengecek userid dan password yang di inputkan lewat form Login, dengan yang terdaftar di dalam database :
dengan logika : "APABILA userid dan password yang diinputkan sama dengan Yang ada di DATABASE".. maka ia berhak masuk ke halaman admin"

berikut adalah script php "cek_login.php" yang berfungsi memproses dan mengecek user id dan password yang di inputkan :

<?php

// pemanggilan file koneksi

include "koneksi.php";

// pembuatan variabel pada penginputan username dan password

$username = $_POST['username'];

$pass      = $_POST['password'];



// Pengecekan user id dan password dengan yang ada di database

$login=mysql_query("SELECT * FROM tbl_user WHERE username='$username' AND password='$pass' AND blokir='N'");

$ketemu = mysql_num_rows($login);

$r=mysql_fetch_array($login);



if ($ketemu > 0) {

session_start ();



    $_SESSION[namauser] = $r[username];

    $_SESSION[passuser] = $r[password];

    $_SESSION[leveluser]= $r[level];

    

    header('location:admin.php');

}

else {

    echo "<center>LOGIN GAGAL <br>

            Username atau Password Anda Tidak benar <br>

            Atau Acount Anda Sedang Di blokir <br>";

    echo "<a href='index.php'>Ulangi Lagi</a>";

}

?>

copy paste, coding php di atas ke text editor, simpan dengan nama "cek_login.php" di folder yang sama dengan file-file yang telah kita buat sebelumnya..

Untuk melihat hasil nya, silahkan jalankan file index.php.. dan masukkan
userid : admin
password : admin

maka akan masuk ke halaman admin, dan jika user id dan password salah,, akan keluar pesan " username atau Password Tidak benar, Atau Acount Anda Sedang Di blokir.

Silahkan mencoba

Ebsof Blog

Web Dinamis Bagian IV ( Membuat Sistem Login)

Bloglawas Kamis, 20 September 2012 Tags: PHP MySQL