Membuat Form Login Sederhana Menggunakan PHP,MySQL dan Bootstrap | Catatan Lamers

26 July 2016

Membuat Form Login Sederhana Menggunakan PHP,MySQL dan Bootstrap

  15 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

15 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
    Replies
    1. This comment has been removed by a blog administrator.

      Delete
  3. good blog :) keren programnya

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

    ReplyDelete
  5. kok Password atau Username Salah ? padahal udah benar

    ReplyDelete
  6. 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 :)

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. 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

    ReplyDelete
  10. 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 ^_^

    ReplyDelete