Cara Membuat Form Login Dengan PHP MySQL

08:01:00

Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL

Konsep dalam cara membuat form login dengan php dan mysql adalah membuat halaman form login dengan HTML terlebih dahulu dan selanjutnya akan dilengkapi dengan skrip php untuk memeriksa data pengguna di database MySQL. Jika pengguna terdapat dalam database MySQL, maka PHP akan membuat session untuk pengguna tersebut dan sekaligus akan mengarahkan pada halaman web yang telah diproteksi.

Ikuti Langkah-langkah dibawah ini untuk cara membuat form login sederhana dengan PHP dan database MySQL yang dilengkapi session sesuai konsep diatas.

Download SCRIPT full form login :

Langkah 1: Membuat Tabel MySQL Database

Untuk membuat database dan tabel, jalankan kode berikut di software MySQL Anda, bisa menggunakan PHPMYADMIN atau software kesukaan saya HeidiSQL. Untuk lebih jelas tentang membuat database nya tunggu saja update berikut nya hehe.

Skrip Mysql nya

-- Dumping database structure for tutorial_db

CREATE DATABASE IF NOT EXISTS `tutorial_db` /*!40100 DEFAULT CHARACTER SET latin1 */;

USE `tutorial_db`;

-- Dumping structure for table tutorial_db.murid

CREATE TABLE IF NOT EXISTS `murid` (

`id_murid` int(10) NOT NULL AUTO_INCREMENT,

`pass_murid` varchar(50) NOT NULL DEFAULT '0',

`user_murid` varchar(50) NOT NULL DEFAULT '0',

`nama_murid` varchar(50) DEFAULT NULL,

`alm_murid` varchar(50) DEFAULT NULL,

`gaji_murid` int(10) DEFAULT NULL,

`tgl_gabung` date DEFAULT NULL,

PRIMARY KEY (`id_murid`)

) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1;

-- Dumping data for table tutorial_db.murid: ~10 rows (approximately)

INSERT IGNORE INTO `murid` (`id_murid`, `pass_murid`, `user_murid`, `nama_murid`, `alm_murid`, `gaji_murid`, `tgl_gabung`) VALUES

(1, '1234', 'admin', 'Admin', 'Website', 300000, '2015-04-16'),

(2, '4321', 'staf', 'Staf', 'Server', 25000, '2015-04-16');

Langkah 2: Membuat Form Login HTML

Dalam skrip ini kita akan membuat form tempat untuk memasuk-kan username dan password. Ketik-kan skrip berikut untuk membuat Form login dengan skrip HTML yang terdiri dari kolom username, kolom password dan tombol submit. Simpan skrip berikut dalam file dengan nama INDEX.PHP Dalam tutorial ini kita menggunakan metode POST.

Skrip HTML form login nya

<?php

include('login.php'); // memanggil script login.php

if(isset($_SESSION['login_user'])){

header("location: profile.php");

}

<!DOCTYPE html>

<html>

<head>

<title>Form Login</title>

</head>

<body>

<h2>TUTORIAL BERSAMA FORM LOGIN DENGAN PHP</h2><hr/>

<label>Username :</label>

<label>Password :</label>

</form>

</div>

</body>

</html>

Langkah 3: Membuat Skrip Login

Dalam skrip ini kita akan membuat skrip 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 skrip berikut dan simpan dalam file dengan nama Login.php

Skrip PHP LOGIN.PHP

<?php

session_start(); // Memulai Session

$error=''; // Variabel untuk menyimpan pesan error

if (isset($_POST['submit'])) {

if (empty($_POST['username']) || empty($_POST['password'])) {

$error = "Username or Password is invalid";

}

else

{

// Variabel username dan password

$username=$_POST['username'];

$password=$_POST['password'];

// Membangun koneksi ke database

$connection = mysql_connect("localhost", "root", "");

// Mencegah MySQL injection (Dihack Orang)

$username = stripslashes($username);

$password = stripslashes($password);

$username = mysql_real_escape_string($username);

$password = mysql_real_escape_string($password);

// Seleksi Database

$db = mysql_select_db("tutorial_db", $connection);

// SQL query untuk memeriksa apakah murid terdapat di database?

$query = mysql_query("select * from murid where pass_murid='$password' AND user_murid='$username'", $connection);

$rows = mysql_num_rows($query);

if ($rows == 1) {

$_SESSION['login_user']=$username; // Membuat Sesi

header("location: profile.php"); // Mengarahkan ke halaman profil

} else {

$error = "Username atau Password belum terdaftar";

}

mysql_close($connection); // Menutup koneksi

}

Langkah 4 : Membuat Halaman Profil

Jika login telah berhasil, maka pengguna akan diarahkan langsung ke halaman profile yang berisi data pribadi user (lihat gambar halaman profil diatas). Dalam halaman ini juga dilengkapi dengan link logout untuk keluar dari halaman sekaligus menghapus session. Ketik-kan skrip berikut dan simpan dalam file dengan nama PROFILE.PHP

Skrip PHP PROFILE.PHP

<?php
include('session.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Powered Tutorial Bersama</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="profile">
<b id="welcome">Selamat Datang : <i><?php echo $login_session; ?></i></b>
<b id="logout"><a href="logout.php">Log Out</a></b>
</div>
</body>
</html>

Langkah 5: Membuat Skrip Fungsi Session PHP

Skrip ini bertugas untuk mengambil data tentang user dan menampilkan-nya pada halaman profil. Ketik-kan skrip berikut dan simpan dalam file dengan nama SESSION.PHP

Skrip PHP SESSION.PHP

<?php
// Membangun Koneksi dengan Server dengan nama server, user_id dan password sebagai parameter
$connection = mysql_connect("localhost", "root", "");
// Seleksi Database
$db = mysql_select_db("tutorial_db", $connection);
session_start();// Memulai Session
// Menyimpan Session
$user_check=$_SESSION['login_user'];
// Ambil nama murid berdasarkan username murid dengan mysql_fetch_assoc
$ses_sql=mysql_query("select nama_murid from murid where user_murid='$user_check'", $connection);
$row = mysql_fetch_assoc($ses_sql);
$login_session =$row['nama_murid'];
if(!isset($login_session)){
mysql_close($connection); // Menutup koneksi
header('Location: index.php'); // Mengarahkan ke Home Page
}
?>

Langkah 6: Membuat Skrip Fungsi Logout PHP

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

Skrip HTML LOGOUT.PHP

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

Langkah 7: Membuat Skrip CSS Untuk Style Form Login

Skrip CSS ini untuk memberikan dan mengatur style HTML pada halaman form login dan halaman profil. Ketik-kan skrip berikut dan simpan dalam file dengan nama STYLE.CSS

Skrip CSS STYLE.CSS

.container {
width: 50%;
margin: 0 auto;
}
h2{
background-color: #66FF99;
padding: 30px 35px;
margin: -10px -50px;
text-align: center;
color: #09F;
}

span{
display: block;
margin-bottom: 20px;
color: red;
}

.success{
display: block;
margin-top: 20px;
margin-bottom: 0;
font-size: 14px;
}
b{
color: #03F;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 25px;
}

div.main{
width: 306px;
padding: 10px 50px 30px;
border: 2px solid gray;
font-family: raleway;
float:left;
margin-top:15px;
}

input[type=text]{
width: 96%;
height: 25px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #000000;
font-size: 16px;
}
input[type=password]{
width: 96%;
height: 25px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #000000;
font-size: 16px;
}

label{
color: #53bd84;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}

input[type=submit]{
font-size: 16px;
background: linear-gradient(#53bd84 5%, #fff 100%);
color: #00CCFF;
font-weight: bold;
cursor: pointer;
width: 100%;
padding: 10px 0;
outline: none;
}
#profile {
padding: 50px;
border: 1px solid grey;
font-size: 20px;
background-color: #99FFFF;
}
#logout {
float:right;
padding:5px;
border:dashed 1px gray
}
a {
text-decoration:none;
color:#6495ed
}
i {
color:#6495ed
}

Simpan semua file HTML, PHP dan CSS dalam satu folder bernama ” tutorial-formlogin ” dan letakkan folder tersebut dalam folder htdocs. Folder htdocs terletak dalam folder XAMPP, dalam tutorial ini kami menggunakan XAMPP sebagai web server. Jika anda juga ingin memakai XAMPP, ikuti tutorial ” Cara Install XAMPP Web Server di Windows “. 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/tutorial-form-login/index.php ” pada halaman browser. 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.

Saturday, 27 February 2016