Kali ini saya akan berbagi Tutorial Membuat Form Login denga PHP dan MySQL.
saya menggunakan web buatan saya sendiri ya itu Penyewaan Studio Musik sebagai contoh nya.
Silahkan Simak Tutorial dari saya sob.
Saya memberi contoh dengan "Membuat Form Login denga PHP dan MySQL dengan Session."
atau bisa download script nya sini
Langkah-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.
Langkah 1: Membuat Tabel MySQL User/Pengguna
Untuk membuat database dan tabel, anda bisa menggunakan phpmyadmin/sqlyog/heidisql.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
--
-- Database: `studio`
--
CREATE DATABASE IF NOT EXISTS `studio` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `studio`;
-- --------------------------------------------------------
-- -- Table structure for table `t_masuk` -- CREATE TABLE `t_masuk` ( `user_id` varchar(10) NOT NULL, `pass_id` varchar(25) NOT NULL, `nama` varchar(50) NOT NULL, `kategori` varchar(50) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `t_masuk` -- INSERT INTO `t_masuk` (`user_id`, `pass_id`, `nama`, `kategori`) VALUES ('aasda', 'asdasd', 'sdasd', 'asdad'), ('admin', '123456', 'Studio Musik', 'Admin'), ('asdas', 'asdasd', 'asdad', 'adas'); |
Langkah 2: Membuat Form Login HTML
Kemudian membuat script masuk.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<title>Login Studio</title>
<style type="text/css">
body{
font-family: arial;
font-size: 14px;
background: url('gambar/masuk.jpg');
background-size: 100%;
background-attachment: fixed;
}
#utama{
width: 300px;
margin: 250px auto;
margin-top: 4%;
}
#judul{
padding: 15px;
text-align: center;
color: #fff;
font-size: 20px;
background-color: #2980b9;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom: 3px solid #336666;
}
#inputan{
background-color: #ccc;
padding: 20px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input{
padding: 10px;
border: 0;
}
.lg{
width: 240px;
}
.kc{
background-color: #2980b9;
border-radius: 10px;
color: #fff;
width: 260px;
}
.kc:hover{
background-color: #336666;
cursor: pointer;
}
#header{
background: white;
width: 100%;
height: 20px;
position: fixed;
top: 0px;
left: 0px;
}
#page_title, h2{
text-align: center;
font-family: times new romance;
color: #ffffff;
font-size: 60px;
margin: auto;
margin-top: 2%;
}
.status {
text-align: center;
color: red;
}
</style>
<script>
function inform(){
alert("Anda yakin ingin Login?")
}
</script>
</head>
<body>
<div id="page_title"><h2>Selamat Datang Admin</h2></div>
<div id="utama">
<div id="judul">
Login Pengelola<br/>
Studio Musik
</div>
<div id="inputan">
<form action="" method="post">
<div>
<input type="text" id="username" name="username" placeholder="Username" class="lg" />
</div>
<div style="margin-top:10px">
<input type="password" id="password" name="password" placeholder="Password"class="lg" />
</div>
<div style="margin-top:10px">
<input type="submit" name="submit" id="submit" value="Login" class="kc" onclick="inform()"/>
</div>
<br/>
<div class="status">
<?php include("login.php");
if(isset($_SESSION['t_masuk'])){
header("location: index.php");
}
?>
</div>
</form>
</div>
</div>
</body>
</html>
|
Langkah 3: Membuat Skrip Login
Ketik-kan skrip berikut dan simpan dalam file dengan nama
login.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<?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
$username = stripslashes($username);
$password = stripslashes($password);
$username = mysql_real_escape_string($username);
$password = mysql_real_escape_string($password);
// Seleksi Database
$db = mysql_select_db("studio", $connection);
// SQL query untuk memeriksa apakah karyawan terdapat di database?
$query = mysql_query("select * from t_masuk where pass_id='$password' AND user_id='$username'", $connection);
$rows = mysql_num_rows($query);
if ($rows == 1 ) {
$_SESSION['t_masuk']=$username; // Membuat Sesi/session
header("location: index.php"); // Mengarahkan ke halaman profil
} else {
$error = "Username atau Password belum terdaftar";
echo 'Username atau Password Salah';
}
mysql_close($connection); // Menutup koneksi
}
}
?>
|
Langkah 4: Membuat Halaman Profil
Kemudian membuat script index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<?php
include('session.php');
?>
<html>
<head>
<title>Studio Musik</title>
<link href="homepage.css" rel="stylesheet" type="text/css">
<script>
function inform(){
alert("Anda yakin ingin Logout?")
}
</script>
</head>
<body>
<div id="header">
<nav>
<ul>
<a href="logout.php"><li onclick="inform()"><p class="navtext">Logout</p></li></a>
</ul>
</nav>
</div>
<div class="konten">
<div id="page_title"><h2>Selamat Datang, <b><i><?php echo $login_session; ?></i></b></h2>
<embed src="musik/canon.mp3" autostart="true" loop="true" hidden="true">
</div>
<hr class="garis">
<div id="menu_body">
<div id="home_menu">
<a href="booking.php"><div id="menu_body1"><p class="text1"><b>Booking</p></div></a>
</div>
<div id="about_us">
<a href="status.php"><div id="menu_body2"><p class="text2"><b>Status</p></div></a>
</div>
<div id="tutorial">
<a href="bayar.php"><div id="menu_body3"><p class="text3"><b>Pembayaran</p></div></a>
</div>
<div id="download">
<a href="fpdf/laporan.php" target="_blank"><div id="menu_body4"><p class="text4"><b>Laporan</p></div></a>
</div>
</div>
</div>
<div class="footer"><p class="footertext">© 2016 Studio Musik Desain By Ahmad Dwi Alfian</p></div>
</body>
</html>
|
Kemudian membuat script css nya homepage.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
*{
padding: 0;
margin: 0;
}
html, body{
height: auto;
}
body{
background: url('gambar/masuk.jpg');
background-size: 100%;
background-attachment: fixed;
}
#header{
background: #2980b9;
width: 100%;
height: 40px;
position: fixed;
top: 0px;
}
nav ul{
background: #2980b9;
width: 400px;
height: 40px;
float: right;
}
nav ul a li{
margin-right: -4px;
background: #2980b9;
width: 100px;
height: 40px;
display: inline-block;
}
nav ul a li:hover{
background: blue;
}
nav ul li .navtext:hover{
color: white;
}
nav ul li .navtext{
text-align: center;
font-family: aBeeZee;
font-size: 12pt;
color: #ffffff;
margin: 10px 0 0 0;
}
#page_title, h2{
text-align: center;
font-family: aBeeZee;
color: #ffffff;
margin: 100px 0 0 0;
}
#page_title2{
text-align: center;
font-family: aBeeZee;
color: #ffffff;
margin:auto;
}
#logout:hover{
color: #49ACEF;
}
#logout {
text-align: right;
}
#page_title, h2, a{
text-decoration: none;
}
.garis{
margin: auto;
width: 850px;
margin-top: 10px;
background-color: #2980b9;
}
#menu_body{
background: transparent;
width: 1200px;
height: 160px;
float: left;
margin: 80px 0 0 230px;
}
#home_menu{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body1{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#home_menu:hover{
background: #2980b9;
}
#about_us{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body2{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#about_us:hover{
background: #2980b9;
}
#tutorial{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body3{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#tutorial:hover{
background: #2980b9;
}
#download{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body4{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#download:hover{
background: #2980b9;
}
.text1{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 55px;
}
.text2{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 60px;
}
.text3{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 35px;
}
.text4{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 55px;
}
.footer{
background: #2980b9;
width: 100%;
height: 50px;
position: fixed;
top: 610px;
}
.footertext{
text-align: center;
font-family: aBeeZee;
position: relative;
top: 18px;
color: #ffffff;
font-size: 15px;
margin-bottom: 0px;
}
table {
background-color: white;
margin: 20px auto 20px auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
*{
padding: 0;
margin: 0;
}
html, body{
height: auto;
}
body{
background: url('gambar/masuk.jpg');
background-size: 100%;
background-attachment: fixed;
}
#header{
background: #2980b9;
width: 100%;
height: 40px;
position: fixed;
top: 0px;
}
nav ul{
background: #2980b9;
width: 400px;
height: 40px;
float: right;
}
nav ul a li{
margin-right: -4px;
background: #2980b9;
width: 100px;
height: 40px;
display: inline-block;
}
nav ul a li:hover{
background: blue;
}
nav ul li .navtext:hover{
color: white;
}
nav ul li .navtext{
text-align: center;
font-family: aBeeZee;
font-size: 12pt;
color: #ffffff;
margin: 10px 0 0 0;
}
#page_title, h2{
text-align: center;
font-family: aBeeZee;
color: #ffffff;
margin: 100px 0 0 0;
}
#page_title2{
text-align: center;
font-family: aBeeZee;
color: #ffffff;
margin:auto;
}
#logout:hover{
color: #49ACEF;
}
#logout {
text-align: right;
}
#page_title, h2, a{
text-decoration: none;
}
.garis{
margin: auto;
width: 850px;
margin-top: 10px;
background-color: #2980b9;
}
#menu_body{
background: transparent;
width: 1200px;
height: 160px;
float: left;
margin: 80px 0 0 230px;
}
#home_menu{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body1{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#home_menu:hover{
background: #2980b9;
}
#about_us{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body2{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#about_us:hover{
background: #2980b9;
}
#tutorial{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body3{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#tutorial:hover{
background: #2980b9;
}
#download{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body4{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#download:hover{
background: #2980b9;
}
.text1{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 55px;
}
.text2{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 60px;
}
.text3{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 35px;
}
.text4{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 55px;
}
.footer{
background: #2980b9;
width: 100%;
height: 50px;
position: fixed;
top: 610px;
}
.footertext{
text-align: center;
font-family: aBeeZee;
position: relative;
top: 18px;
color: #ffffff;
font-size: 15px;
margin-bottom: 0px;
}
table {
background-color: white;
margin: 20px auto 20px auto;
}
|
Langkah 5: Membuat Skrip Fungsi Session PHP
Skrip ini bertugas untuk mengambil data tentang user dan menampilkan-nya pada halaman profil. Ketik-kan skrip dengan nama
session.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<?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("studio", $connection);
session_start();// Memulai Session
// Menyimpan Session
$user_check=$_SESSION['t_masuk'];
// Ambil nama berdasarkan username karyawan dengan mysql_fetch_assoc
$ses_sql=mysql_query("select nama from t_masuk where user_id='$user_check'", $connection);
$row = mysql_fetch_assoc($ses_sql);
$login_session =$row['nama'];
if(!isset($login_session)){
mysql_close($connection); // Menutup koneksi
header('Location: masuk.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/login (index.php) namun langsung di alihkan ke masuk.php karena di atur tidak bisa masuk homepage sebelum login. Ketik-kan skrip berikut dan simpan dalam file dengan nama logout.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
session_start();
if(session_destroy()) // Menghapus Sessions
{
header("Location: index.php"); // Langsung mengarah ke Home index.php
}
?>
logout.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<?php
session_start();
if(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 "Studio" ke folder xampp. tepatnya di dalam folder htdoc.
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/studio/” pada halaman browser.
Demikian tutorial cara membuat form login dengan PHP dan MySQL. Jika masih ada yang kurang jelas, silahkan tinggalkan JEJAK di komentar atau email langsung ke saya sob. E-Mail ada di TOP halaman ini sob.
THANKS!! Selamat Mencoba!
hasil belajar dari web nyekrip.com
0 comments:
Post a Comment