Cara Membuat Form Login Dengan PHP dan MySQL

Hallo minasan Konijiwa , disini saya akan membuat tutorial cara membuat form login dengan PHP dan MySQL, kita akan belajar membuat halaman login untuk website dengan menggunakan PHP Session. Tutorial ini merupakan tutorial tingkat dasar, sederhana dan mudah untuk diikuti., Langsung saja ke tutorialnya .... Pertama Kalian harus menginstall terlebih dahulu XAMPP/LAMPP untuk menjalankan php ini..

Langkah 1: Membuat Tabel MySQL User/Pengguna

Untuk membuat database dan tabel, jalankan kode berikut di software MySQL Anda, bisa menggunakan phpMyAdmin atau software kesukaan saya HeidiSQL. Langsung saja Kalian Copy code di bawah ini dah simpan dengan extensi .sql

-- phpMyAdmin SQL Dump
-- version 4.6.5.2
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: May 22, 2019 at 12:32 AM
-- Server version: 10.1.21-MariaDB
-- PHP Version: 5.6.30

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `haxor.id_login`
--

-- --------------------------------------------------------

--
-- Table structure for table `user`
--

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `nama` varchar(225) NOT NULL,
  `username` varchar(225) NOT NULL,
  `password` varchar(225) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `user`
--

INSERT INTO `user` (`id`, `nama`, `username`, `password`) VALUES
(1, 'Admin', 'admin', '21232f297a57a5a743894a0e4a801fc3');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `user`
--
ALTER TABLE `user`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Cara Memasangkan .sql ini . Buat Database dengan nama haxor.id_login , dan kita pastekan Code .sql diatas ke Menu SQL

Dan Klik Go Maka Database Berhasil di buat

Username : admin
Password : admin

Langkah 2: Membuat Form Login HTML + CSS

Dalam script ini kita akan membuat form tempat untuk memasuk-kan username dan password. Ketik-kan script berikut untuk membuat Form login dengan script HTML yang terdiri dari kolom username, kolom password dan tombol submit. Simpan script berikut dalam file dengan nama index.php.

<html>
<head>
 <title>Login</title>
<style>
body {
 background: white;
 font-family: sans-serif;
}

h2 {
  color: #fff;
}

.login {
  padding: 1em;
  margin: 2em auto;
  width: 17em;
  background: #fff;
  border-radius: 5px;
}

.log {
 border-radius: 60px;
 width: 120px; 
 height: 120px; 
}

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 {
  background: #3498db;
  color: #fff;
  border: 0;
  padding: 5px 8px;
  margin: 20px 0px;
}
</style>
</head>
<body>
 <br/>
 <br/><br/><p><br/><br/> 
 <div class="login"><br/>
  <form action="login.php" method="post" onSubmit="return validasi()">
   <div>
   <center><img src="log.gif" class="log" /><br></center>
    <label>Username:</label>
    <input type="text" name="username" id="username" />
   </div>
   <div>
    <label>Password:</label>
    <input type="password" name="password" id="password" />
   </div>   
   <div>
    <center><input type="submit" value="Login" class="tombol"></center>
   </div>
  </form>
 </div>
</body>
<script type="text/javascript">
 function validasi() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;  
  if (username != "" && password!="") {
   return true;
  }else{
   alert('Username dan Password harus di isi !');
   return false;
  }
 }
</script>
</html>

Langkah 3: Membuat Script Config Connect MySQL

Dala script ini kita akan membuat script PHP yang bertugas untuk mengConnect kan antara index.php dengan MySQL. Ketikan / Copykan script berikut dan simpan dalam file dengan nama config.php.

<?php 
mysql_connect('localhost','root',''); //sesuaikan dengan password dan username mysql anda
mysql_select_db('haxor_login'); //nama database yang kita gunakanmu
?>

Langkah 4: Membuat Script Login

Dalam script ini kita akan membuat script PHP yang bertugas untuk memulai sesi (session) dan memeriksa apakah username dan password yang diberikan terdapat dalam tabel karyawan, jika data tidak ditemukan akan menampilkan pesan ” Username atau Password belum terdaftar “. Ketik-kan script berikut dan simpan dalam file dengan nama login.php.

<?php 
include 'config.php';

$username = $_POST['username'];
$password = md5($_POST['password']);

$login = mysql_query("select * from user where username='$username' and password='$password'");
$cek = mysql_num_rows($login);

if($cek > 0){
 session_start();
 $_SESSION['username'] = $username;
 $_SESSION['status'] = "login";
 header("location:admin.php");
}else{
 header("location:index.php"); 
}
?>

Langkah 5: Membuat Script Tampilan Admin Sederhana

Jika login telah berhasil, maka pengguna akan diarahkan langsung ke halaman profile yang berisi data pribadi user (lihat gambar halaman profil diatas). Ketik-kan script berikut dan simpan dalam file dengan nama admin.php.

<?php 
include 'config.php'; // Authentication Ke DB
session_start(); // mengaktifkan session

// Dibawah ini untuk cek apakah user telah login, 
// jika belum login maka di alihkan ke halaman login
if($_SESSION['status'] !="login"){ 
 header("location:./index.php");
 exit;
}
// menampilkan pesan selamat datang
echo "<center><br/><h2>Hai, selamat datang ". $_SESSION['username'];
?>
<br/><br/><a href="logout.php">LOGOUT</a>

Langkah 6: Membuat Script Fungsi Logout PHP

Script ini bertugas untuk menghapus semua sesi dan langsung mengarahkan ke halaman utama (index.php) tempat form login berada. Ketik-kan script berikut dan simpan dalam file dengan nama logout.php.

<?php 
session_start();
session_destroy(); // Menghapus Sessions
header("location:./index.php"); // Langsung mengarah ke Home index.php
?>

Simpan semua file HTML, PHP dan CSS dalam satu folder bernama ” form-login ” dan letakkan folder tersebut dalam folder htdocs. Folder htdocs terletak dalam folder XAMPP, dalam tutorial ini kami menggunakan XAMPP sebagai web server.

Setelah melakukan semua langkah cara membuat form login diatas, sekarang saatnya kita untuk mencoba form login dengan PHP dan MySQL yang dilengkapi session dengan mengetik-kan alamat ” http://localhost/form-login/index.php ” pada halaman browser. dan tampilan yang kita buat bisa di lihat di atas
Demikian tutorial cara membuat form login dengan PHP dan MySQL, jika terdapat langkah yang kurang dimengerti, silahkan kirim pertanyaan melalui kolom komentar dibawah ini. Terimakasih.

Tags :

Cara Membuat Form Login Dengan PHP dan MySQL
Membuat Form Login Dengan PHP dan MySQL
Cara Membuat Form Login PHP dan MySQL
Membuat Form Login PHP dan MySQL
Form Login PHP dan MySQL
Script Form Login PHP dan MySQL

Haxor

Search this blog