Home » Programming » Membuat Form Login PHP, MySQL & Bootstrap 4
form login php bootstrap

Membuat Form Login PHP, MySQL & Bootstrap 4

Membuat Form Login PHP, MySQL & Bootstrap 4 


Membuat Form Login [Download Source Code]

form login php bootstrap

Name : form login bootstrap php & mysql

Format : rar

Size : 500 KB

Download






Membuat Form login php, mysql dan bootstrap 4. login adalah sebuah fitur penting yang berguna untuk membatasi akses user dengan menggunakan session.

Banyak contoh penggunaan session, misalnya saja pada facebook, twitter atau aplikasi social media lainnya yang memerlukan login.

Nah untuk kesempatan kali ini wowotek akan membagikan source code form login menggunakan php, mysql dan bootstrap 4.

Baca :

Bootstrap 4 Offline Documentation Download

Download Simple CRUD CodeIgniter Dengan Bootstrap 4

Apa Yang Diperlukan Untuk Membuat Form Login PHP, MySQL & Bootstrap

Apa saja yang diperlukan?:

Struktur Folder dan File:

membuat form login

  • Folder admin 2 file(index.php & logout.php)
  • Folder koneksi 1 file(koneksi_db.php)
  • Folder Bootstrap(JS & CSS)
  • 2 File PHP (cek_login.php & index.php)

Langkah-Langkah Membuat Form Login PHP, MySQL & Bootstrap

Buat Database

  1. Jalankan web server
  2. Buat sebuah database baru dengan nama login_bootstrap > buat table baru bernama login dengan 4 kolom : id int (11) Primary Key Auto Increment, nama varchar (40), email varchar (50) dan password varchar (32) > klik simpan.
    database login md5
  3. Klik Insert atau tambahkan untuk menambah data kedalam table, isi seperti berikut :
    login md 5

Jika anda tidak ingin terlalu repot, silahkan buat database seperti diatas > klik menu SQL kemudian masukkan kode berikut:

-- phpMyAdmin SQL Dump

-- version 4.2.11

-- http://www.phpmyadmin.net

--

-- Host: 127.0.0.1

-- Generation Time: 03 Mar 2019 pada 14.32

-- Versi Server: 5.6.21

-- PHP Version: 5.6.3
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8 */;
--

-- Database: `login_bootstrap`

--




-- --------------------------------------------------------




--

-- Struktur dari tabel `login`

--




CREATE TABLE IF NOT EXISTS `login` (

`id` int(11) NOT NULL,

  `nama` varchar(40) NOT NULL,

  `email` varchar(50) NOT NULL,

  `password` varchar(32) NOT NULL

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




--

-- Dumping data untuk tabel `login`

--




INSERT INTO `login` (`id`, `nama`, `email`, `password`) VALUES

(1, 'wowotek', 'admin@wowotek.com', 'd69b6aed538e105af2f4869715c0b23b');




--

-- Indexes for dumped tables

--




--

-- Indexes for table `login`

--

ALTER TABLE `login`

 ADD PRIMARY KEY (`id`);




--

-- AUTO_INCREMENT for dumped tables

--




--

-- AUTO_INCREMENT for table `login`

--

ALTER TABLE `login`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=3;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Buat File Folder Baru di htdocs & pindahkah folder Bootstrap CSS & JS (login/css & login/js)

  1. Download Bootstrap CSS & JS kemudian ekstrak
  2. Langkah selanjutnya pergi ke folder xampp/htdocs > klik kanan > new > folder>berinama “login” > enter, pindahkan file css dan js bootstrap ke folder tersebut.
Baca :  Bootstrap 4 Offline Documentation Download

Membuat file koneksi/koneksi_db.php

Buatlah sebuah folder koneksi kemudian buat file baru bernama koneksi_db.php di folder tersebut, lalu ketikkan script berikut :

<?php

mysql_connect('localhost','root','');

mysql_select_db('login_bootstrap');

?>

Membuat Form Login index.php

Buat file baru bernama index.php letakkan di root folder, edit file index.php kemudian ketikkan kode berikut :

<!DOCTYPE html>

<html>

<head>

                <meta charset="UTF-8">

                <title>Bootstrap Button</title>

                <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

                <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

                <script src="js/bootstrap.min.js"></script>

                <script src="js/jquery.min.js"></script>

<style type="text/css">

:root {

  --input-padding-x: 1.5rem;

  --input-padding-y: .75rem;

}




body {

  background: #007bff;

  background: linear-gradient(to left,#ffd86f,#fc6262);

}




.card-signin {

  border: 0;

  border-radius: 1rem;

  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);

}

.bg-info{

  border: 0;

  border-radius: 1rem 1rem 0rem 0rem !important;

  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1)!important;

}




.card-signin {

  margin-bottom: 2rem;

}

.card-title{

                font-weight: 300;

  font-size: 1.5rem;

}




.card-signin .card-body {

  padding: 2rem;

}




.form-signin {

  width: 100%;

}




.form-signin .btn {

  font-size: 80%;

  border-radius: 5rem;

  letter-spacing: .1rem;

  font-weight: bold;

  padding: 1rem;

  transition: all 0.2s;

}




.form-label-group {

  position: relative;

  margin-bottom: 1rem;

}




.form-label-group input {

  height: auto;

  border-radius: 2rem;

}




.form-label-group>input,

.form-label-group>label {

  padding: var(--input-padding-y) var(--input-padding-x);

}




.form-label-group>label {

  position: absolute;

  top: 0;

  left: 0;

  display: block;

  width: 100%;

  margin-bottom: 0;

  /* Override default `<label>` margin */

  line-height: 1.5;

  color: #495057;

  border: 1px solid transparent;

  border-radius: .25rem;

  transition: all .1s ease-in-out;

}




.form-label-group input::-webkit-input-placeholder {

  color: transparent;

}




.form-label-group input:-ms-input-placeholder {

  color: transparent;

}




.form-label-group input::-ms-input-placeholder {

  color: transparent;

}




.form-label-group input::-moz-placeholder {

  color: transparent;

}




.form-label-group input::placeholder {

  color: transparent;

}




.form-label-group input:not(:placeholder-shown) {

  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));

  padding-bottom: calc(var(--input-padding-y) / 3);

}




.form-label-group input:not(:placeholder-shown)~label {

  padding-top: calc(var(--input-padding-y) / 3);

  padding-bottom: calc(var(--input-padding-y) / 3);

  font-size: 12px;

  color: #777;

}

</style>

</head>

<body>

                  <div class="container">

    <div class="row">

      <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">

        <div class="card card-signin my-5">

        <div class="card-header bg-info"><h5 class="card-title text-center text-light">Masuk</h5></div>

          <div class="card-body">

            <small id="emailHelp" class="form-text text-muted"><p class="text-danger text-center">

                <?php

                                                if(isset($_GET['pesan'])){

                                                                if($_GET['pesan'] == "gagal"){

                                                                                echo "Login gagal! Email atau Password salah!";

                                                                }

                                                }

                                                ?>

                                                </p>Silahkan masukkan Email dan Password dengan benar kemudian klik <span class="badge badge-info">Masuk</span></small>

            <hr class="my-3">

            <form action="cek_login.php" method="post" class="form-signin">

              <div class="form-label-group">

                <input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>

                <label for="inputEmail">Email address</label>

              </div>




              <div class="form-label-group">

                <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>

                <label for="inputPassword">Password</label>

              </div>

              <button class="btn btn-lg btn-info btn-block text-uppercase" type="submit">Masuk</button>

            </form>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>

</script>

</html>

Buat file cek_login.php        

Buat file baru bernama cek_login.php di root folder, edit file tersebut dan ketikkan kode berikut :

<?php

include ('koneksi/koneksi_db.php');




$email = $_POST['email'];

$password = md5($_POST['password']);




$login = mysql_query("select * from login where email='$email' and password='$password'");

$cek = mysql_num_rows($login);




if($cek > 0){

                session_start();

                $_SESSION['email'] = $email;

                $_SESSION['status'] = "login";

                header("location:admin/index.php");

}else{

                header("location:index.php?pesan=gagal");

}




?>

Buat Folder Baru Bernama “admin” Beserta 1 File “index.php” (admin/index.php)

Edit index.php yang ada di folder admin kemudian masukkanskript di bawah ini:

<?php

include '../koneksi/koneksi_db.php';

// mengaktifkan session

session_start();

// cek apakah user telah login, jika belum login maka di alihkan ke halaman login

if($_SESSION['status'] !="login"){

                       header("location:../index.php");

}

?>

  <h1 class="display-3"><?php echo "Hai, selamat datang ". $_SESSION['email']; ?></h1>

<br/>

<br/>

<a href="logout.php">LOGOUT</a>

Buat file logout.php di folder admin (admin/logout.php)

Buatlah file logout.php di folder admin kemudian edit fiole tersebut dan masukkan source kode di bawah ini:

<?php

session_start();

session_destroy();

header("location:../index.php");

?>

Selesai                                                                    

Baca :  Bootstrap Tutorial: Membuat Tabel Responsive

Langkah terakhir simpan semua file tersebut kemudian jalankan di localhost (localhost/login):

Berikut tampilannya:
bootstrap login form

Download Source Code Bootstrap login PHP & Mysql

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *