26 July 2016

Membuat Form Login Sederhana Menggunakan PHP,MySQL dan Bootstrap

  3 comments
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

3 comments :

  1. Replies
    1. Sama2 gan
      semoga bermanfaat
      makasih juga udah berkunjung :D

      Delete
  2. 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

    ReplyDelete