26 July 2016

Membuat Form Login Sederhana Menggunakan PHP,MySQL dan Bootstrap

Postingan yang membahas tentang Pemrograman di dalam Blog ini masih sangat sedikit, itu dikarenakan Sejak pertama kali Blog ini saya buat, saya sudah tidak pernah lagi ngoding, karenanya dalam Blog ini lebih banyak Postingan tentang jaringan, Wireless, mikrotik dan beberapa Postingan tentang Pokemon Go yang sedang Ngetrend Belakangan ini.

Kebetulan, hari ini saya dapat sebuah project untuk membuat Sebuah sistem informasi yang diminta untuk dibuat menggunakan Pemrograman Web. Makanya postingan ini saya buat,sekedar untuk merefresh kembali ingatan tentang Pemrograman Web Khususnya PHP

Postingan ini lebih spesifik membahas tentang membuat Form Login Sederhana dengan PHP dan MySQL sebagai databasenya dan Juga Bootstrap sebagai Pemanis Interfacenya.

Membuat Form Login Sederhana Menggunakan PHP,MySQL dan Bootstrap

Karena hanya sederhana, Maka Field yang akan digunakan dalam database hanyalah 3 field saja yaitu : username,password dan nama

Oke langsung saja
Buat dulu database melalui PHPMyadmin dengan Nama "login"
selanjutnya buat Tabel di dalam database login dan beri nama tabel "user" dengan 3 buah field, yaitu username,password dan nama
Membuat Form Login Sederhana Menggunakan PHP,MySQL dan Bootstrap
Selanjutnya isi Field2 tersebut
Membuat Form Login Sederhana Menggunakan PHP,MySQL dan Bootstrap

Atau, Setelah membuat database, maka cukup Copy dan Paste Kode dibawah ini ke kolom SQL untuk membuat dan mengisi Tabel secara cepat seperti pada contoh gambar dibawah ini
Membuat Form Login Sederhana Menggunakan PHP,MySQL dan Bootstrap

CREATE TABLE `user` (
  `username` varchar(10) NOT NULL,
  `password` varchar(10) NOT NULL,
  `nama` varchar(20) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `user` VALUES ('admin', 'admin', 'Catatan Lamers');


Setelah Pembuatan database selesai selanjutnya mulai membuat File PHP nya
Download dulu Bootstrap untuk mempercantik tampilannya nanti. namun Bootstrap sebenarnya Hanya optional saja, jadi jika anda ingin yang simpel ya tidak perlu menggunakan Boostrap. Namun jika sebaliknya maka gunakanlah Bootstrap

Buat sebuah Folder baru di dalam Folder Webserver anda dengan nama sesuka anda. Jika anda menggunakan XAMPP sebagai Webserver maka letak Folder webnya ada di C:\Xampp\htdocs\ . namun karena saya menggunakan Appserv maka letak Foldernya ada di C:\Appserv\www

Taruh Isi Folder Bootstrap (CSS,Fonts,JS) Kedalam Folder tersebut. Lalu  buatlah 4 Buah File dengan nama index.php , login.php , koneksi.php dan logout.php
Membuat Form Login Sederhana Menggunakan PHP,MySQL dan Bootstrap

koneksi.php

Buka dan edit koneksi.php lalu isi dengan Kode dibawah ini

<?php 
$hostname = "localhost";
$username = "root";
$password = "root";
$database = "login";

mysql_connect($hostname,$username,$password) or die ("Koneksi Gagal");
mysql_select_db($database) or die ("Database Tidak Bisa dibuka");
?>

login.php

<html>
<head>
<title> Belajar Form  Login</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="col-md-6 col-md-offset-3">
<form action="" method="POST">
<div class="form-group">
<label> Username </label>
<input type="text"  name="username" class="form-control">
</div>
<div class="form-group">
<label> Password </label>
<input type="password"  name="password" class="form-control">
</div>
<input type="submit" class="btn btn-primary" value="Login" name="login"/>
  </form>
</div>
</body>
</html>
<?php
include "koneksi.php";
IF(ISSET($_POST['login'])){
$username = $_POST['username'];
$password = $_POST['password'];
$cek = mysql_num_rows(mysql_query("SELECT * FROM user WHERE username='$username' AND password='$password'"));
$data = mysql_fetch_array(mysql_query("SELECT * FROM user WHERE username='$username' AND password='$password'"));
IF($cek > 0)
{
session_start();
$_SESSION['username'] = $data['username'];
$_SESSION['nama'] = $data['nama'];
echo "<script language=\"javascript\">alert(\"Selamat Datang\");document.location.href='index.php';</script>";
}else{
echo "<script language=\"javascript\">alert(\"Password atau Username Salah !!!\");document.location.href='login.php';</script>";
}
}
?>

index.php

<?php 
session_start();
IF(ISSET($_SESSION['username'])){
?>
<html>
<head>
<title> Belajar Form  Login</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1> Berhasil Login selamat datang <?=$_SESSION['nama']?> </h1>
<br/>
<a href="logout.php?keluar"> Klik Disini Untuk Keluar </a>
</body>
</html>
<?php 

}else{
echo "<script language=\"javascript\">alert(\"Silahkan Login Terlebih Dahulu\");document.location.href='login.php';</script>";
}
?>

logout.php

<?php  
session_start();
if(isset($_SESSION['username']))
{
session_destroy();
header('Location:but_login.php?status=Anda sudah Keluar');
}else{
session_destroy();
header('Location:but_login.php?status=Silahkan Login!');
}
?>




Atau anda bisa Mendownload File lengkapnya melalui link dibawah ini

19 komentar

makasih min tutorialnya

Sama2 gan
semoga bermanfaat
makasih juga udah berkunjung :D

tutorialnya detail gan...bahasanya juga dapat di pahami pemula....awesome...
saya juga bikin tutor yg sama namun saya sertakan dengan pencegahan Sql Injection...
kalo mau silahkan kunjungannya gan....

http://www.ijo-gading.com/2017/03/login-dengan-php-mysql.html?m=1

good blog :) keren programnya

wah mantap Blog nya mas... Kebetulan lagi cari2 referensi. mudah di pahami ! Maju trus gan :)

kok Password atau Username Salah ? padahal udah benar

blognya bagus banget, detail, tapi yang saya cobain si gambar/tampilannya tidak muncul, tetapi kalau dalam koneknya sudah jalan, hanya saja tampilannya tidak sesuai gambar yang ada di blog ini, terus si codingnya pas mau login itu masih muncul di halaman webnya, kenapa ya mas, mohon bantuannya :)

Makasih udah bantu jawab :D

This comment has been removed by a blog administrator.
This comment has been removed by the author.
This comment has been removed by the author.

Mas mau tanya saya khan coba post di 000webhost ni
tapi koq error ya...

Fatal error: Uncaught Error: Call to undefined function mysql_connect() in /storage/ssd3/457/1803457/public_html/koneksi.php:7 Stack trace: #0 {main} thrown in /storage/ssd3/457/1803457/public_html/koneksi.php on line 7

Kalo di Xampp udah berhasil cuma pas di upload ke 000webhost error

mas mau tanya kok saya error disini mulu ya? padahal udah sama kaya diatas tapi masih error

error nya gini mas Parse error: syntax error, unexpected 'echo' (T_ECHO) in C:\xampp\htdocs\ftp\login.php on line 35

baru belajar bikin ginian jadi masih kurang paham hehehe

makasih ^_^

Fatal error: Uncaught Error: Call to undefined function mysql_num_rows() in C:\xampp\htdocs\dak_2017\login.php:38 Stack trace: #0 {main} thrown in C:\xampp\htdocs\dak_2017\login.php on line 38

periksa baris 35 ada semicolon yg hilang pada perintah echo

pada versi PHP terbaru, fungsi MySQL udah di tiadakan
solusinya ada 2
1. Ubah setiap perintah Mysql dengan MySQLi

2. Downgrade Versi PHP yang ada di webserver ( Ganti dengan Xampp jaman Old)

Parse error : syntax error,unexpected '=' in C:\xampp\htdocs\catatan-lamers\index.php on line 19

sedangkan isi line sudah sama


EmoticonEmoticon