Home PHP Tutorial Cara Membuat Login dan Register Sederhana dengan PHP dan MySQL

Monday 4 September 2017

Cara Membuat Login dan Register Sederhana dengan PHP dan MySQL

Diterbitkan
Tags

Selamat Malam Sahabat gudang coding, gimana nih kabarnya? sehat kan? kembali lagi di blog gudang coding aplikasi tempat berbagi mengenai dunia pemrograman dan aplikasi dan kali ini kami akan memberikan Tutorial tentang membuat Sebuah Form Login dan Register sederhana Menggunakan PHP dan MySQL.

  • Program dibuat menggunakan PHP Murni ( Native )
  • Database Program Menggunakan MySQL.
  • Tabel yang digunakan hanya 1 ( satu )
  • CSS menggunakan Bootstrap Framework
  • Implementasi Form dan Session pada PHP.
  • File dari Tutorial bisa Anda Download.
Pertama, Buat sebuah Database dengan nama simplelogin lalu buat Table "user" dengan detail sebagai berikut:
- username : varchar : 50 : Primary Key 
- password: varchar : 100 : - 
- email: varchar : 50 : Unique 
- nama: varchar : 35: - 
Pastikan Urutannya Sama. 

Lalu buat struktur Folder seperti gambar dibawah : 

Buat File File yang dibutuhkan Seperti gambar diatas. 
Download Bootstrap Framework disini. Pilih Download Bootstrap 
Jika sudah di download, Extract File Bootstrap, lalu buka folder bootstrap-3.x.x-dist copykan Folder dibawah ini . 

Paste seluruh Folder yang sudah didownload Kedalam Folder Bootstrap yang ada di project / HTDOCS kita 
Masuk ke Folder config di Project Folder kita. 
Lalu buat sebuah File dengan nama koneksi.php, isi dengan script Berikut :
<?php$koneksi = mysql_connect("localhost", "root", "") or die ("Koneksi Gagal");
if(!$koneksi) {
echo "Gagal Koneksi";
}else {
mysql_select_db("simplelogin");
}
<?
Sekarang buka File index.php buat Form login dengan coding seperti dibawah.
<html><head>
  <title> GudangCoding - Simple Login and Register with PHP </title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
  <script language="text/javascript" src="bootstrap/js/bootstrap.js"></script>
  <script language="text/javascript" src="bootstrap/js/bootstrap..min.js"></script>
</head>
<body style="background-color: gray">
  <div class="row">
<div class="container">
  <div class="row">
    <div align="center">
      <h1> GUDANG KODING </h1>
      <a href="http://www.gudang-koding.ga/" target="_blank"> www.gudang-koding.ga </a> <br>
      Kumpulan Tutorial Programming <hr>
      <div class="panel panel-success" style="width: 50%; margin-top: 50px">
        <div class="panel-heading">
          Login Form
        </div>
        <div class="panel-body">
          <div align="left">
          <form action="validasi.php" method="POST">
          <div class="form-group">
            <label for="username">Username :</label>
            <input type="text" name="username" class="form-control" id="username" required>
          </div>
          <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" name="password" class="form-control" id="password" required>
          </div>
          <button type="submit" class="btn btn-default">Login</button>
          <center>
            Belum Punya Akun ? Register <a href="register.php">disini</a>.
          </center>
        </form>
      </div>
        </div>
      </div>
  </div>
  </div>
</div>
</div>
</body>
</html>

Sekarang buat file validasi.php untuk menangkap file dari Form dan menjalankan Query SQL.
 <?php
//Mengambil File Koneksi Database.
include 'config/koneksi.php';
session_start();
//Ambil Data dari FORM
$username = $_POST["username"];
$password = md5($_POST["password"]);
//Untuk Mencegah SQL Injection
mysql_escape_string($username);
mysql_escape_string($password);
//Query SELECT dari DB
$query = "SELECT * FROM user WHERE username= '$username' AND password = '$password'";
$hasil = mysql_query($query);
if(mysql_num_rows($hasil) >= 1) {
  while($data=mysql_fetch_array($hasil)) {
    $_SESSION["username"] = $data["username"];
    $_SESSION["nama"] = $data["nama"];
    $_SESSION["email"] = $data["email"];
  }
  header('Location: home.php');
}else {
  header('Location: index.php?status=gagal ');
}
?>

Sekarang silahkan Anda coba isikan Field username dan password, lalu Login.
Sekarang Kita buat File File Pendukung Lainnya :
register.php
<html><head>
  <title> GudangKoding - Simple Login and Register with PHP </title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
  <script language="text/javascript" src="bootstrap/js/bootstrap.js"></script>
  <script language="text/javascript" src="bootstrap/js/bootstrap..min.js"></script>
</head>
<body style="background-color: gray">
  <div class="row">
<div class="container">
  <div class="row">
    <div align="center">
      <h1> GUDANG KODING </h1>
      <a href="http://www.gudang-koding.ga/" target="_blank"> www.gudang-koding.ga </a> <br>
      Kumpulan Tutorial Programming <hr>
      <div class="panel panel-success" style="width: 50%; margin-top: 50px">
        <div class="panel-heading">
          Register Form
        </div>
        <div class="panel-body">
          <div align="left">
          <form action="proses.php" method="POST">
          <div class="form-group">
            <label for="username">Username :</label>
            <input type="text" name="username" class="form-control" id="username" required>
          </div>
          <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" name="password" class="form-control" id="password" required>
          </div>
          <div class="form-group">
            <label for="email">Email :</label>
            <input type="email" name="email" class="form-control" id="email" required>
          </div>
          <div class="form-group">
            <label for="nama">Nama :</label>
            <input type="text" name="nama" class="form-control" id="nama" required>
          </div>
            <center>
          <button type="submit" class="btn btn-default">Register</button> <br><br>
            Sudah Punya Akun ? Login <a href="index.php">disini</a>.
          </center>
        </form>
      </div>
        </div>
      </div>
  </div>
  </div>
</div>
</div>
</body>
</html>



proses.php 
<?php//Mengambil File Koneksi Database.
include 'config/koneksi.php';
//Ambil Data dari FORM
$username = $_POST["username"];
$password = md5($_POST["password"]);
$email = $_POST["email"];
$nama = $_POST["nama"];
//Query INSERT ke DB
$query = "INSERT INTO user VALUES ('$username', '$password', '$email', '$nama')";
$hasil = mysql_query($query);
if($hasil) {
  header("Location: index.php?status=success");
}else {
  header("Location: index.php?status=failed");
}
?>

home.php
<?phpsession_start();
if(!isset($_SESSION["username"])) {
header("Location: index.php?status=login");
}
$username = $_SESSION["username"];
$nama = $_SESSION["nama"];
$email = $_SESSION["email"];
?>
<html>
<head>
  <title> GudangKoding - Simple Login and Register with PHP </title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
  <script language="text/javascript" src="bootstrap/js/bootstrap.js"></script>
  <script language="text/javascript" src="bootstrap/js/bootstrap..min.js"></script>
  <style>
    #loginbox: {
      position: absolute;
      left: 0;
      top: 50%;
      width: 50%%;
      text-align: center;
      font-size: 18px;
    }
  </style>
</head>
<body style="background-color: gray">
<div class="container">
  <br>
  <div align="center">
    <div class="panel panel-success" style="width: 50%; margin-top: 100px">
      <div class="panel-heading">
          <h3> Selamat Datang User <?php echo $nama ?> </h3>
      </div>
      <div class="panel-body">
        <div align="left">
          <div align="left">
         Data Diri Anda : <br>
          Nama : <?php echo $nama ?> <br>
          Email : <?php echo $email ?> <br>
          Username : <?php echo $username ?> <br>
          <hr>
          <center>
            <a href="logout.php">
              <button class="btn btn-danger"> Logout </button>
          </center>
    </div>
      </div>
    </div>
 
   </div>
  </div>
</div>
</body>
</html>

logout.php
<?phpsession_start();
$_SESSIOn["username"] = "";
$_SESSIOn["email"] = "";
$_SESSIOn["nama"] = "";
session_destroy();
header('Location: index.php?status=logout')
?>

Tutorial ini juga  dapat dijadikan referensi dalam menyusun tugas atau dapat juga langsung diaplikasikan. Sourcecode ini bisa sahabat gudang coding download  melalui link download yang tersedia dibawah ini. 

Free Download Login dan Register dengan Php
Baca cara Downloadnya Disini


Link Download Sourcecode

Artikel Terkait

gudang coding

Next Post
Previous Post