-->

Cara Membuat Form Login dengan PHP MySQLi

Konten [Tampil]
Cara Membuat Form Login dengan PHP MySQLi
Cara Membuat Form Login dengan PHP MySQLi - Pada kesempatan saya akan membuat halaman login menggunakan pemograman PHP dan MySQLi.

Untuk kode halaman login sendiri sudah support mysqli (PHP versi terbaru), jadi tidak akan terjadi error.

Sebelum melanjutkan untuk membuat halaman login apakah anda sudah menyiapkan aplikasinya?, kalau belum silahkan disiapkan terlebih dahulu.

Cara Membuat Login dengan PHP MySQLi

Adapun alat dan bahan yang anda butuhkan untuk membuat halaman login ini adalah:
  1. Komputer/PC. jika belum punya silahkan pergi ke warnet.
  2. Aplikasi XAMPP. belum punya? silahkan unduh disitus resminya.
  3. Text Editor. pakai Notepad juga tidak apa-apa.
  4. Browser. rekomendasi pakai Chrome.
  5. Niat. tanpa niat yang tulus tutorial ini jadi tidak berfaedah😅.
Jika anda bosan memakai aplikasi Notepad, anda bisa mendownload rekomendasi dari saya:
  1. Sublime Text
  2. Notepad++
  3. Komodo Edit
  4. Atom
  5. BlueFish
  6. Vim
  7. Emacs
  8. dan sebagainya..

Langkah 1: Buat Database

Buka terlebih dahulu dan aktifkan xampp control, kemudian masuk dibrowser dan buka localhost/phpmyadmin setelah itu buat database baru. Jika sudah membuatnya silahkan buat table dengan nama "user". Dan buat seperti contoh gambar dibawah ini. Jika sudah klik Save.

Kemudian silahkan input username dan password dimenu Insert.
Langkah 1: Buat Database

Langkah 2: Buat Sebuah Folder

Setelah itu buat sebuah folder berinama bebas, contoh "web-rpl".

Langkah 3: Buat File "index.php"

Kemudian buat sebuah file dan beri nama "index.php" dan kemudian copy kode script dibawah ini.

<!DOCTYPE html>
<html>
<head>
 <title>Login</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
</head>
<body>
 <?php
 if(isset($_GET['pesan'])){
  if($_GET['pesan'] == "gagal"){
   echo "Login gagal! username dan password salah!";
  }else if($_GET['pesan'] == "logout"){
   echo "Anda telah berhasil logout";
  }else if($_GET['pesan'] == "belum_login"){
   echo "Anda harus login untuk mengakses halaman admin";
  }
 }
 ?>
 <div id="container">
   <div class="login">
    <h1>Login</h1>
    <p>Masuk Terlebih Dahulu Ya!</p>
  <form action="auth.php" method="post" onSubmit="return validasi()">
   <div>
    <label>Username:</label>
    <input type="text" name="username" id="username" />
   </div>
   <div>
    <label>Password:</label>
    <input type="password" name="password" id="password" />
   </div>  
   <div>
    <input type="submit" value="Login" class="tombol">
   </div>
  </form>
 </div>
 </div>
<script type="text/javascript" src="login.js"></script>
</body>
</html>

Langkah 4: Buat File "style.css"

Kemudian buat sebuah file dan beri nama "style.css" dan kemudian copy kode script dibawah ini.

* {
 padding: 0;
 margin: 0;
}
body {
 font-family: arial;
 background: #B2C6DE;
}
#container {
 padding: 15px;
}
.login {
  padding: 1em;
  margin: 2em auto;
  width: 17em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.19);
 border-radius: 20px;
 background: white;
  border-radius: 15px;
}
.login h1, p {
 text-align: center;
 padding-bottom: 20px;
}

label {
  font-size: 10pt;
  color: #555;
}

input[type="text"],
input[type="password"],
textarea {
  padding: 8px;
  width: 95%;
  background: #efefef;
  border: 0;
  font-size: 10pt;
  margin: 6px 0px;
}

.tombol {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.19);
 border-radius: 20px;
 background: white;
  color: black;
  border: 0;
  padding: 10px 15px;
  margin: 20px 100px;
  border-radius: 20px;
  cursor: pointer;
}
.tombol:hover {
  color: red;
}

Langkah 5: Buat File "login.js"

Kemudian buat sebuah file dan beri nama "login.js" dan kemudian copy kode script dibawah ini.

function validasi() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;    if (username != "" && password!="") {
   return true;
  }else{
   alert('Username dan Password Wajib Diisi :V');
   return false;
  }
 }

Langkah 6: Buat File "koneksi.php"

Kemudian buat sebuah file dan beri nama "koneksi.php" dan kemudian copy kode script dibawah ini.

<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'nama_database'; //sesuai nama databasemu//
$connect = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname) or die('koneksi gagal');
?>

Langkah 7: Buat File "auth.php"

Kemudian buat sebuah file dan beri nama "auth.php" dan kemudian copy kode script dibawah ini.
<?php
include "koneksi.php";
$username = $_POST['username'];
$pass     = $_POST['password'];
$login = mysqli_query($connect, "SELECT * FROM user WHERE username = '$username' AND password='$pass'");
$row=mysqli_fetch_array($login);
if ($row['username'] == $username AND $row['password'] == $pass)
{
  session_start();
  $_SESSION['username'] = $row['username'];
  $_SESSION['password'] = $row['password'];
  header('location:berhasil.html'); //jika login berhasil, maka ganti/letakkan halaman utamamu disini
  }else{
   echo "<script>alert('Username atau Password Admin tidak benar !!!');</script>";
    echo "<script>location='index.php';</script>";
  }
?>

Langkah 8: Buat File "berhasil.html"

Kemudian buat sebuah file dan beri nama "berhasil.html" dan kemudian copy kode script dibawah ini.

<!DOCTYPE html>
<html>
<head>
 <title>Selamat Datang</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>Kunjungi <a href="https://www.ansoriweb.com" target="blank">blog saya</a>.
</body>
</html>
Itulah tadi artikel mengenai Cara Membuat Form Login dengan PHP MySQLi. Semoga bermanfaat tutorial bagi anda yang sedang mencari script untuk halaman login. Saya tahu rata-rata digoogle scriptnya error terus karena masih menggunakan PHP versi rendah.

Jika ada pertanyaan baik kritik dan saran anda bisa berkomentar dibawah ini.

10 Responses to "Cara Membuat Form Login dengan PHP MySQLi"

  1. Gan saya sudah download source code PHP my SQL database Koperasi, sudah dijalankan xamp, pas Login gak masuk ke Index.php, gimana nih Gan tolong solusinya..
    untuk konfigurasi dari PHP ke db koperasi gimana ya..koq saya gak bisa masuk, Thanks

    ReplyDelete
    Replies
    1. gimana ya mas.. mungkin versi phpnya rendah tidak berfungsi dixampp versi terbaru. kayaknya masih mysql. Versi terbarunya mysqli. Dicek lagi dan perbaiki mas.

      Delete
    2. cara perbaikinya gmn ya mas, apakah di source code atau versi PHP or xampp

      Delete
  2. maksud di langkah 7 jika berhasil login maka ganti/letakan halaman utama itu maksudnya gimn ya? saya masih belum faham

    ReplyDelete
    Replies
    1. itu lokasi user jika berhasil login mau ditaruh dimana, kalau gagal masukkan user dan password lagi. kalau berhasil mau diarahkan ke halaman mana.

      maaf agak bertele-tele kata"nya :D

      Delete
  3. username dan password saya selalu tidak benar mas, bagaimana solusinya?

    ReplyDelete
Bebas berkomentar asalkan sopan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel