Tutorial Membuat Form Login & Register PHP Dan MYSQL


Assalamualakum Teman teman
Btw apakabar nih keadaaan kalian semua pasti sehat dong semoga selalu sehat dan baik hatinya :D.
Tutorial Membuat Form Login & Register PHP Dan MYSQL
Kali ini saya akan memberikan sedikit tutorial untuk Membuat Login Dan Register Database Mysql. Komponen yang akan digunakan tetap sama, yaitu PHP, HTML, JavaScript, MYSQL dan CSS yang kali ini saya gunakan dari Bootsrap.Seperti biasanya, hal-hal yang harus dipersiapkan adalah Server Apache, Mysql, Browser, dan Editor. Oke, tidak berlama-lama, kita akan memulai tahap pertama. Oia, sebelumnya, kira-kira
hasil akhirnya akan tampak seperti ini:


  1. Pertama, siapkan susunan folder, dengan root folder adalah berita, kemudian subfoldernya adalah css, gambar, dan js, jangan lupa letakkan folder loginku didalam folder htdocs atau www server apache Anda. sebagai berikut.
2. Kedua, buat database dan tabel sebagai berikut.
    bisa menggunakan database dari

    Nama database : loginku
    Nama tabel : admin

Code sql :

-- phpMyAdmin SQL Dump
-- version 4.7.4
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 29, 2018 at 07:11 AM
-- Server version: 10.1.26-MariaDB
-- PHP Version: 7.0.22

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
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: `loginku`
--

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

--
-- Table structure for table `admin`
--

CREATE TABLE `admin` (
  `id_admin` int(11) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `admin`
--

INSERT INTO `admin` (`id_admin`, `username`, `password`) VALUES
(1, 'admin', '21232f297a57a5a743894a0e4a801fc3'),
(2, 'admin', '21232f297a57a5a743894a0e4a801fc3'),
(3, 'admin', '21232f297a57a5a743894a0e4a801fc3'),
(4, 'kocak', '944d0f3ad1dc4fa234c3a0bc5cb963aa');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `admin`
--
ALTER TABLE `admin`
  ADD PRIMARY KEY (`id_admin`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `admin`
--
ALTER TABLE `admin`
  MODIFY `id_admin` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
COMMIT;

/*!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 */;


3. Ketiga, buat file untuk melakukan koneksi antara PHP dengan MySQL.
    File name: koneksiku.php

  
<?php
$conn = new mysqli('localhost','root','','loginku');
if ($conn->connect_errno) {
      echo die("Error :".$conn->error."");
}
 ?>

4. Keempat, silahkan buat tampilan halaman Login, atau biasa disebut dengan        HOME Login . dalam hal ini saya akan menggunakan file loginku
  • Filename : loginku.php

<?php
session_start();
include 'koneksiku.php';
if ($_SESSION) {
echo "<script>window.location.assign('dashboardku.php');</script>";
}
if (isset($_POST['masuk'])) {
$username= $_POST['username'];
$password = md5($_POST['password']);
$query = "SELECT * from admin where username='$username' AND password ='$password'";
$result = mysqli_query($conn,$query);
if (mysqli_fetch_assoc($result)) {
$_SESSION['username'] = $username;
$_SESSION['password'] = $password;
echo "<script>window.location.assign('loginku.php');</script>";
}

else{
echo "<script>alert('gagal');</script>";
}
}

?>
<!DOCTYPE html>
<html>
<head>
<title>Logim</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link  href="assets/vendor/font-awesome/css/font-awesome.min.css"  rel ="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/vendor/linearicons/style.css">
<link rel="stylesheet" href="assets/vendor/toastr/toastr.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form method="post">
<br><br><br><br><br><br><br><br>
<center>
<a href="register.php"> Register Here!</a>
<h1 style="text-align: center;font-family: Comic Sans MS;">Login Training</h1>

</center>
<br>
<!--Input Username-->
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user" aria-hidden="true">
</span></span>
<input type="text" name="username" placeholder="Username" required class="form-control"
aria-describedby="basic-addon1">
</div>
<br/>
<!--Input Password-->
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-lock" aria-hidden="true">
</span>
</span>
<input type="password" name="password" placeholder="Password"  required class="form-control"><br/>
</div>
<br/>

<button type="submit" name="masuk" class="btn btn-primary btn-lg btn-block">Login</button>

</form>
</div>
</div>
</div>
<?php if(!empty($error)): ?>
<?php echo $error; ?>
<?php endif ?>
</body>
</html>

Tampilannya Seperti ini :


5. Kelima, silahkan buat tampilan untuk form Register.php
  • filename: register.php
<?php
error_reporting(0);
include 'koneksiku.php';
if (isset($_POST['register'])) {
$id_admin = $_POST['id_admin'];
$username =$_POST['username'];
$password = md5($_POST['password']);
$query = mysqli_query($conn,"INSERT INTO admin (id_admin,username,password) values ('$id_admin','$username','$password')");
if ($query) {
echo "<script>alert('success register');</script>";
}

else{
echo "<script>alert('failed register');</script>";
}
}


?>
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<br><br>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<a href="loginku.php">Login here !</a>
<form method="post">
<div class="form-group">
<label>User</label>
<input type="text" name="username" class="form-control" placeholder="Isi Username">
</div>
<div class="form-group">
<label>pass</label><br>
<input type="password" name="password" class="form-control" placeholder="Isi Password"><br>
</div>
<button type="submit" name="register" class="btn btn-success btn-lg btn-block">Register</button>
</div>
</div>
</div>
</form>
</body>
</html>

Tampilannya Seperti ini :
6. Keenam, buatlah file untuk masuk ke dashboard adminnya ke server.
  • filename: dashboardku.php
<?php
session_start();
if (empty($_SESSION)) {
echo "<script>window.location.assign('loginku.php');</script>";
}    
elseif (isset($_POST['keluar'])) {
session_destroy();
echo "<script>window.location.assign('loginku.php');</script>";
}
else{
include 'koneksiku.php';
?>

<!DOCTYPE html>
<html>
<head>
<title>DashboardKu</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<center><h1>MY DASHBOARD</h1></center>
<form method="post">
<button type="submit" name="keluar">Logout/Keluar</button>
</form>

</body>
</html>

<?php } ?>






Langkah selanjutnya adalah membuat CSS, ada 3 buah css yang akan kita buat, (Karena file terlalu panjang, Anda bisa mengunduhnya disini). Setelah diunduh ekstrak file tersebut dan letakkan didalam folder css.
  • filename: bootstrap.min.css 
  • filename: bootstrap-responsive.min.css
  • filename: bootswatch.css

Untuk Project yang saya buat bisa anda download : DISINI

SELAMAT MENCOBA

Atau yang blom bisa liat vidio pembuatannya dibawah ini : 


0 Response to "Tutorial Membuat Form Login & Register PHP Dan MYSQL"

Catat Ulasan

Komentar !!!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel