Yuk Kita Membuat Login Dengan PHP dan MySQLi

Cara Membuat Login dengan PHP MySQLi

Adapun alat dan bahan yang anda butuhkan untuk membuat halaman login ini adalah:

Komputer/PC. jika belum punya silahkan pergi ke warnet.
Aplikasi XAMPP. belum punya? silahkan unduh disitus resminya.
Text Editor. pakai Notepad juga tidak apa-apa.
Browser. rekomendasi pakai Chrome.
Niat. tanpa niat yang tulus mungkin tidak bisa jalan aplikasinya he he

Jika anda bosan memakai aplikasi Notepad, anda bisa mendownload rekomendasi dari saya:

Sublime Text
Notepad++
Komodo Edit
Atom
BlueFish
Vim
Emacs
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 2:

Buat Sebuah Folder

Setelah itu buat sebuah folder beri nama 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>

Nah itulah tutorialnya semoga bermanfaat

link sumber

https://www.ansoriweb.com/2020/03/login-php-mysqli.html

Search This Blog

SMK HASAN KAFRAWI MAYONG JEPARA