Source Code Cara Membuat Halaman Login Website dengan PHP dan MySQL

Pada kesempatan kali ini, saya mencoba menulis kecil tentang Source Code bagaimana caranya membuat halaman login dengan php dan dengan database mysql. Dan, semua latihan atau tutorial yang di postingkan di blog ini, nantinya akan kita gabungkan jadi satu dengan beberapa modifikasi dan pengembangan skrip dan fungsi serta database, agar di ujung latihan nanti kita bisa membuat sebuah website personal. Aamiin. Selamat membaca dan melatih keahlian pemrograman Anda. :)
Spesifikasi program yang saya gunakan ialah:
  • PHP Version 5.5.30
  • MySQL Version 5.6.26-74.0
  • Apache 2.4.17
  • Sistem Operasi: Ubuntu 15.10
  • Text Editor: Sublime Text 3 build 3103
  • MySQL Editor: MySQL Workbench Version 6.3
Kita buat tiga (3) langkah untuk membuat halaman login dengan php dan database mysql.

Langkah Pertama (1)
Buat database MySQL dengan menggunakan MySQL editor kesukaan teman-teman. Bisa menggunakan Command Line atau menggunakan PHPMyAdmin. Disini saya menggunakan MySQL Workbench karena saya menggunakan sistem operasi linux, agak kesulitan untuk menggunakan tool sql editor yang basis GUI, dan hanya tool tersebut diatas yang nyaman saya gunakan :).

Buat database dengan nama dbase_personal:
CREATE DATABASE `dbase_personal`;

Kemudian buat tabel dengan nama tbl_login dengan field sebagai berikut:
CREATE TABLE `dbase_personal`.`tbl_login` (
 `idtbl_login` INT NOT NULL AUTO_INCREMENT COMMENT '',
 `username` VARCHAR(10) NULL COMMENT '',
 `password` VARCHAR(45) NULL COMMENT '',
 PRIMARY KEY (`idtbl_login`) COMMENT '');

Selanjutnya isikan data ke dalam tbl_login. Saya mengisi data dengan isi sebagai berikut ini:
INSERT INTO `dbase_personal`.`tbl_login` (`username`, `password`) VALUES ('admin', 'gatau');

Langkah Kedua (2)
Kita lanjutkan dengan menuliskan kode-kode php dan html. Kita buka text editor favorite Anda, kalau saya menggunakan yang tersebut diatas, dan kemudian kita ketikkan kode berikut ini:
<?php
/*
-- --------------------------------------------------------
-- --------------------------------------------------------
-- Nama File : index.php
-- Author : Fitri Ariyanto
-- Email : seorang.fitri@gmail.com
-- Website : http://phpbejo.blogspot.com
-- Copyright [c] 2016 Fitri Ariyanto
-- --------------------------------------------------------
*/
// fungsi koneksi ke data server mysql
   $host    = "localhost";
   $user    = "root";
   $pass    = "";
   $dbase   = "dbase_personal";
   $konek   = mysql_connect($host, $user, $pass) or die("Gagal membuat koneksi ke Database! <br/> Pastikan service MySQL sudah berjalan.");
   $pilihdb = mysql_select_db($dbase, $konek) or die("Gagal memilih Database! <br/> Pastikan database sudah dibuat.");
   // fungsi post dan verifikasi login
   $_user = @$_POST['user'];
   $_pass = @$_POST['pass'];
   if(isset($_POST['submit'])){
      if(!empty($_user)){
         $result = mysql_query("SELECT * FROM tbl_login WHERE username='".$_user."' AND password='".$_pass."'");
         $row = mysql_fetch_array($result);
         if(!empty($row['username']) AND !empty($row['password'])){
            echo "Selamat datang di Halaman Administrator";
         }else{
            echo "Gagal Login! Silahkan periksa Pengguna dan Kata Sandi Anda!";
         }
      }
   }
?>
Langkah Kedua (3) 
Masih di text editor sebelumnya, lanjutkan ketikkan script html berikut ini
<!DOCTYPE html>
<html>
<head>
   <title>Form Login | phpbejo.blogspot.com</title>
</head>
<body>
   <form method="POST" action="<?php $_SERVER['PHP_SELF'];?>">
      Pengguna <br>
      <input type="text" name="user" size="40"><br>
      Kata Sandi <br>
      <input type="password" name="pass" size="40"><br>
      <input id="button" type="submit" name="submit" value="Log-In">
   </form>
</body>
</html> 

untuk kode lengkap atau keseluruhan bisa dilihat di bawah ini:
<?php
/*
-- --------------------------------------------------------
-- --------------------------------------------------------
-- Nama File : index.php
-- Author : Fitri Ariyanto
-- Email : seorang.fitri@gmail.com
-- Website : http://phpbejo.blogspot.com
-- Copyright [c] 2016 Fitri Ariyanto
-- --------------------------------------------------------
*/
   // fungsi koneksi ke data server mysql
   $host = "localhost";
   $user = "root";
   $pass = "";
   $dbase = "dbase_personal";
   $konek = mysql_connect($host, $user, $pass) or die("Gagal membuat koneksi ke Database! <br/> Pastikan service MySQL sudah berjalan.");
   $pilihdb = mysql_select_db($dbase, $konek) or die("Gagal memilih Database! <br/> Pastikan database sudah dibuat.");
   // fungsi post dan verifikasi login
   $_user = @$_POST['user'];
   $_pass = @$_POST['pass'];
   if(isset($_POST['submit'])){
      if(!empty($_user)){
      $result = mysql_query("SELECT * FROM tbl_login WHERE username='".$_user."' AND password='".$_pass."'");
      $row = mysql_fetch_array($result);
      if(!empty($row['username']) AND !empty($row['password'])){
        echo "Selamat datang di Halaman Administrator";
      }else{
        echo "Gagal Login! Silahkan periksa Pengguna dan Kata Sandi Anda!";
      }
   }
}
?>
<!DOCTYPE html>
<html>
<head>
   <title>Form Login | phpbejo.blogspot.com</title>
</head>
<body>
   <form method="POST" action="<?php $_SERVER['PHP_SELF'];?>">
      Pengguna <br>
      <input type="text" name="user" size="40"><br>
      Kata Sandi <br>
      <input type="password" name="pass" size="40"><br>
      <input id="button" type="submit" name="submit" value="Log-In">
   </form>
</body>
</html> 
Dan yang terakhir kita coba jalankan script yang telah kita buat dengan membuka browser, bisa menggunakan mozilla atau chrome. Berikut hasil akhir yang saya coba di komputer saya :)
ketika login gagal akan tampil pesan seperti gambar berikut ini:
dan hasil sukses atau berhasil login seperti berikut ini:
Sekian tutorial dari phpbejo, sebagai tambahan kode diatas adalah sebagai konsep dasar membuat halaman login website dengan php dan database mysql, dilatihan selanjutnya kita akan menggunakan session, dan membuat terpisah antara berkas halaman utama, formulir login, dan halaman berhasil login. 
Download full source code klik disini.
Sampai jumpa di latihan selanjutnya. :)

Posting Komentar

Lebih baru Lebih lama