navbar
navbar

Beranda >

Tutorial Membuat register Login Logout dengan PHP dan Mysqli

Tutorial Membuat register Login Logout dengan PHP dan Mysqli

Membuat register Login Logout dengan PHP dan Mysqli

Setelah pada tutorial sebelumnya kita telah membuat sebuah tampilan html form register dan form login menggunakan bootstrap, pada tutorial kali ini kita akan melanjutkanya dengan membuat register Login Logout dengan PHP dan Mysqli. Register , login dan logout biasanya ada pada sebuah website yang membutuhkan izin tertentu untuk mengaksesnya. Proses Register , login dan logout diciptakan dalam rangka untuk meng authentikasi user yang masuk kedalam sistem tersebut. Autorisasi ini di set up oleh administrator, webmaster atau pemilik situs (pemegang hak tertinggi atau mereka yang ditunjuk di sistem tersebut). Contoh penggunaan register login dan logout sendiri sering kita temui pada aplikasi-aplikasi seperti facebook, instagram ,twitter dan lain-lain.

Sebenarnya proses register, login dan logout terbagi kedalam 3 tahapan yang berbeda dimana tahapan pertama adalah proses registrasi user. Registrasi bisanya ada pada sebuah sistem yang membutuhkan login untuk masuk kedalamnya. Registrasi ini digunakan sebagai pendaftaran user baru untuk memperoleh izin masuk kedalam sistem tersebut.

Menyiapkan Database MYSQL

Sebelum kita memulai proses coding nya terlebih dahulu kita harus menyiapkan database untuk menyimpan data registrasi user. Maka dari itu jalankan XAMPP kalian (pada tutorial ini saya menggunakan xampp jika kalian terbiasa dengan lampp, laragon atau dll kalianpun dapat menggunakanya).

Silahkan buka Phpmyadmin kalian melalui browser kalian masing-masing dengan mengetikkan url http://localhost/phpmyadmin dan buat database baru dengan nama belajar_authentikasi. Setelah itu buat sebuah tabel baru dengan nama users dan isikan kolomnya seperti pada gambar berikut ini :

Tutorial Login & Registrasi 2 - Membuat Register PHP dengan Mysqli

Atau kalian juga dapat menggunakan sql berikut ini untuk mengisikan kolom-kolom pada tabel users. 

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";
CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `name` varchar(70) NOT NULL,
  `username` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
ALTER TABLE `users`
  ADD PRIMARY KEY (`id`);
ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;
COMMIT;

Membuat Koneksi Database PHP Mysqli

Setelah database siap langkah selanjutnya yang perlu kita kerjakan untuk membuat koneksi PHP ke database mysql. Cara membuat koneksi php ke database mysql dapat dilakukan dengan cara membuat sebuah file baru dengan nama koneksi.php pada folder belajar-authentikasi yang sebelumnya telah kalian buat. Setelah itu tambahkan sintak koneksi php kedalam file yang telah kalian buat :

<?php
$host     = 'localhost';
$user     = 'root'; // diisi dengan user database kalian biasanya
                    // defaultnya bernama root jika kita belum 
                    // merubahnya
$password = '';  //diisi dengan password database kalian biasanya
                 // defaultnya kosong
$db       = 'belajar_authentikasi'; //diisi dengan nama database kalian
 
$con = mysqli_connect($host, $user, $password, $db) or die(mysqli_error());
?>

Kita telah berhasil membuat koneksi ke database mysql . Untuk melakukan koneksi ke database mysql pada file php lainya kita perlu mengincludekan file koneksi ini dalam file php yang membutuhkan koneksi ke database. Selanjutnya kita akan Membuat login dan register dengan PHP , namun sebelum membuat proses login terlebih dahulu kita harus membuat file register .

Membuat Register PHP dengan Mysqli

Dalam contoh saya kali ini , saya telah membuat registrasi user di PHP menggunakan mysqli .

Skenario dari program yang telah saya buat kali ini adalah ketika user membuka halaman register maka akan didapati sebuah form untuk menginputkan data informasi user seperti nama,username,password serta email. Pengisian data-data ini sifatnya wajib harus terisi semua sehingga ketika user tidak menginputkan salah satu atau bahkan semua inputan maka akan didapati pesan error. Selain itu saya juga melakukan validasi terhadap password yang diinputkan user untuk memastikan bahwa password yang diinputkan user telah benar. Ketika user telah berhasil melakukan registrasi maka data akan disimpan kedalam sebuah database mysql. Untuk keamanan sebelum password disimpan ke database mysql sebelumnya password harus di hashing terlebih dahulu untuk mengamankan informasi user ketika ada peretas yang berhasil masuk ke database sistem. Setelah data berhasil tersimpan di database MYSQL maka user akan diredirect ke halaman index.php serta data user akan disimpan pada sebuah session di register.php. Data pada session inilah yang akan digunakan untuk memvalidasi user apakah user telah berhasil registrasi/login atau belum.

Proses Coding Register PHP MYSQLI

Setelah database telah siap semua kemudian buka folder dengan nama belajar-authentikasi yang sebelumnya telah kalian buat pada tutorial sebelumnya Contoh Form Registrasi Bootstrap dan Cara Membuatnya. Kemudian buka file register.php dan modifikasi menjadi seperti berikut ini :

<?php
//menyertakan file program koneksi.php pada register
require('koneksi.php');
//inisialisasi session
session_start();
$error = '';
$validate = '';
//mengecek apakah form registrasi di submit atau tidak
if( isset($_POST['submit']) ){
        // menghilangkan backshlases
        $username = stripslashes($_POST['username']);
        //cara sederhana mengamankan dari sql injection
        $username = mysqli_real_escape_string($con, $username);
        $name     = stripslashes($_POST['name']);
        $name     = mysqli_real_escape_string($con, $name);
        $email    = stripslashes($_POST['email']);
        $email    = mysqli_real_escape_string($con, $email);
        $password = stripslashes($_POST['password']);
        $password = mysqli_real_escape_string($con, $password);
        $repass   = stripslashes($_POST['repassword']);
        $repass   = mysqli_real_escape_string($con, $repass);
        //cek apakah nilai yang diinputkan pada form ada yang kosong atau tidak
        if(!empty(trim($name)) && !empty(trim($username)) && !empty(trim($email)) && !empty(trim($password)) && !empty(trim($repass))){
            //mengecek apakah password yang diinputkan sama dengan re-password yang diinputkan kembali
            if($password == $repass){
                //memanggil method cek_nama untuk mengecek apakah user sudah terdaftar atau belum
                if( cek_nama($name,$con) == 0 ){
                    //hashing password sebelum disimpan didatabase
                    $pass  = password_hash($password, PASSWORD_DEFAULT);
                    //insert data ke database
                    $query = "INSERT INTO users (username,name,email, password ) VALUES ('$username','$nama','$email','$pass')";
                    $result   = mysqli_query($con, $query);
                    //jika insert data berhasil maka akan diredirect ke halaman index.php serta menyimpan data username ke session
                    if ($result) {
                        $_SESSION['username'] = $username;
                       
                        header('Location: index.php');
                    
                    //jika gagal maka akan menampilkan pesan error
                    } else {
                        $error =  'Register User Gagal !!';
                    }
                }else{
                        $error =  'Username sudah terdaftar !!';
                }
            }else{
                $validate = 'Password tidak sama !!';
            }
            
        }else {
            $error =  'Data tidak boleh kosong !!';
        }
    } 
    //fungsi untuk mengecek username apakah sudah terdaftar atau belum
    function cek_nama($username,$con){
        $nama = mysqli_real_escape_string($con, $username);
        $query = "SELECT * FROM users WHERE username = '$nama'";
        if( $result = mysqli_query($con, $query) ) return mysqli_num_rows($result);
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- costum css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
        <section class="container-fluid mb-4">
            <!-- justify-content-center untuk mengatur posisi form agar berada di tengah-tengah -->
            <section class="row justify-content-center">
            <section class="col-12 col-sm-6 col-md-4">
                <form class="form-container" action="register.php" method="POST">
                    <h4 class="text-center font-weight-bold"> Sign-Up </h4>
                    <?php if($error != ''){ ?>
                        <div class="alert alert-danger" role="alert"><?= $error; ?></div>
                    <?php } ?>
                   
                    <div class="form-group">
                        <label for="name">Nama</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="Masukkan Nama">
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Alamat Email</label>
                        <input type="email" class="form-control" id="InputEmail" name="email" aria-describeby="emailHelp" placeholder="Masukkan email">
                    </div>
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="Masukkan username">
                    </div>
                    <div class="form-group">
                        <label for="InputPassword">Password</label>
                        <input type="password" class="form-control" id="InputPassword" name="password" placeholder="Password">
                        <?php if($validate != '') {?>
                            <p class="text-danger"><?= $validate; ?></p>
                        <?php }?>
                    </div>
                    <div class="form-group">
                        <label for="InputPassword">Re-Password</label>
                        <input type="password" class="form-control" id="InputRePassword" name="repassword" placeholder="Re-Password">
                        <?php if($validate != '') {?>
                            <p class="text-danger"><?= $validate; ?></p>
                        <?php }?>
                    </div>
                    <button type="submit" name="submit" class="btn btn-primary btn-block">Register</button>
                    <div class="form-footer mt-2">
                        <p> Sudah punya account? <a href="login.php">Login</a></p>
                    </div>
                </form>
            </section>
            </section>
        </section>
    <!-- Bootstrap requirement jQuery pada posisi pertama, kemudian Popper.js, dan  yang terakhit Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Membuat Halaman Index.php

Setelah membuat halaman register kemudian buat sebuah file lagi didalam folder belajar-authentikasi dengan nama index.php . File ini nantinya akan digunakan sebagai halaman home yang akan ditampilkan ketika user berhasil melakukan registrasi. Kemudian buka file index.php dan isikan script php berikut ini di dalamnya :

<?php
//inisialisasi session
session_start();
//mengecek username pada session
if( !isset($_SESSION['username']) ){
  $_SESSION['msg'] = 'anda harus login untuk mengakses halaman ini';
  header('Location: login.php');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<nav class='navbar navbar-expand-lg navbar-dark bg-dark text-light '>
    <div class="container">
        <a href="index.php" class="navbar-brand">HOME</a>
        <button class="navbar-toggler" type="button" data-togle="collapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <ul class="navbar-nav ml-auto pt-2 pb-2">
            <li class="nav-item">
                <a href="index.php" class="nav-link text-light">Home</a>
            </li>
            <li class="nav-item ml-4">
                <a href="logout.php" class="nav-link text-light"> Log Out </a>
            </li>
        </ul>
    </div>
</nav>
<div class="jumbotron jumbotron-fluid bg-light" style="height:90vh">
  <div class="container">
    <h1 class="display-4 text-center mt-4">HOME</h1>
    <p class="lead text-center">LOGIN OR REGISTER SUCCESSFULLY ):</p>
  </div>
</div>
</body>
 <!-- Bootstrap requirement jQuery pada posisi pertama, kemudian Popper.js, dan  yang terakhit Bootstrap JS -->
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Setelah membuat register php menggunakan mysqli , pada tutorial selanjutnya kita akan membuat login user sehingga user yang sudah melakukan registrasi tidak perlu melakukan pendaftaran lagi untuk dapat masuk kedalam aplikasi.

Membuat Login Dengan PHP

Setelah kita berhasil membuat sebuah sistem registrasi user maka pada tahap selanjutnya yang perlu kita lakukan adalah membuat login dengan php mysqli.

Skenario dari script login yang akan kita buat ini adalah ketika user membuka halaman login.php maka akan didapati sebuah form untuk menginputkan username dan password yang telah didaftarkan oleh user sebelumnya. Pengisian data-data ini sifatnya wajib harus terisi semua sehingga ketika user tidak menginputkan salah satu atau bahkan semua inputan maka akan didapati pesan error. Proses login dimulai dengan mengecek apakah username yang di inputkan user ada tidak di database. Jika ada maka data password yang ada di database selanjutnya dilakukan pencocokan dengan data password yang di inputkan user pada form login yang sebelumnya telah di lakukan proses hashing. Jika didapati kecocokan antara password dari database dengan password inputan user yang telah di hashing maka user akan diredirect ke halaman index.php serta data user akan disimpan pada sebuah session . Penyimpanan data user pada session ini bertujuan agar ketika user keluar dari sistem tanpa melakukan logout maka ketika user masuk ke sistem kembali , user tidak perlu melakukan login kembali.

Proses Coding Login PHP MYSQLI

Cara membuat login dengan PHP menggunakan session dapat dilakukan dengan cara sebagai berikut ini. yang pertama buat sebuah file dengan nama login.php pada folder yang sama dengan file register sebelumnya. Kemudian copykan script login php mysqli berikut ini :

<?php
//menyertakan file program koneksi.php pada register
require('koneksi.php');
//inisialisasi session
session_start();
$error = '';
$validate = '';
//mengecek apakah sesssion username tersedia atau tidak jika tersedia maka akan diredirect ke halaman index
if( isset($_SESSION['username']) ) header('Location: index.php');
//mengecek apakah form disubmit atau tidak
if( isset($_POST['submit']) ){
        
        // menghilangkan backshlases
        $username = stripslashes($_POST['username']);
        //cara sederhana mengamankan dari sql injection
        $username = mysqli_real_escape_string($con, $username);
         // menghilangkan backshlases
        $password = stripslashes($_POST['password']);
         //cara sederhana mengamankan dari sql injection
        $password = mysqli_real_escape_string($con, $password);
       
        //cek apakah nilai yang diinputkan pada form ada yang kosong atau tidak
        if(!empty(trim($username)) && !empty(trim($password))){
            //select data berdasarkan username dari database
            $query      = "SELECT * FROM users WHERE username = '$username'";
            $result     = mysqli_query($con, $query);
            $rows       = mysqli_num_rows($result);
            if ($rows != 0) {
                $hash   = mysqli_fetch_assoc($result)['password'];
                if(password_verify($password, $hash)){
                    $_SESSION['username'] = $username;
               
                    header('Location: index.php');
                }
                            
            //jika gagal maka akan menampilkan pesan error
            } else {
                $error =  'Register User Gagal !!';
            }
            
        }else {
            $error =  'Data tidak boleh kosong !!';
        }
    } 
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- costum css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
        <section class="container-fluid mb-4">
            <!-- justify-content-center untuk mengatur posisi form agar berada di tengah-tengah -->
            <section class="row justify-content-center">
            <section class="col-12 col-sm-6 col-md-4">
                <form class="form-container" action="login.php" method="POST">
                    <h4 class="text-center font-weight-bold"> Sign-In </h4>
                    <?php if($error != ''){ ?>
                        <div class="alert alert-danger" role="alert"><?= $error; ?></div>
                    <?php } ?>
                   
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="Masukkan username">
                    </div>
                    <div class="form-group">
                        <label for="InputPassword">Password</label>
                        <input type="password" class="form-control" id="InputPassword" name="password" placeholder="Password">
                        <?php if($validate != '') {?>
                            <p class="text-danger"><?= $validate; ?></p>
                        <?php }?>
                    </div>
                 
                    <button type="submit" name="submit" class="btn btn-primary btn-block">Sign In</button>
                    <div class="form-footer mt-2">
                        <p> Belum punya account? <a href="register.php">Register</a></p>
                    </div>
                </form>
            </section>
            </section>
        </section>
    <!-- Bootstrap requirement jQuery pada posisi pertama, kemudian Popper.js, dan  yang terakhit Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Membuat logout PHP MySQLi

Tahap terakhir dari tutorial membuat register login logout dengan PHP dan Mysqli adalah membuat form untuk logout. Fungsi logout sendiri berguna ketika user ingin keluar dari sistem sehingga informasi user yang tadinya disimpan di session akan dihapus semua sehingga ketika user akan masuk kembali ke sistem user harus login kembali. Cara membuat logout dengan php dan MySQLI adalah sebagai berikut ini.

Yang pertama buat sebuah file dengan nama logout.php pada folder yang sama dengan file register dan file login sebelumnya. Kemudian copykan script logout php mysqli berikut ini pada file logout.php :

<?php
    session_start(); //inisialisasi session
    if(session_destroy()) {//menghapus session
        header("Location: index.php"); //jika berhasil maka akan diredirect ke file index.php
    }
?>

Hasil Script Program Login, Register dan Logout

Tampilan halaman register.php

Tampilan form register

Tampilan halaman login.php

Tampilan form login

Tampilan Halaman index.php

Tampilan halaman index dan button logout

Sekian artikel kali ini tentang Membuat register Login Logout dengan PHP dan Mysqli untuk sourcode lengkapnya kalian dapat melihatnya di link berikut ini download script login php .

Pencarian Terkait :

  • cara membuat form daftar, login dan logout dengan php mysql
  • cara membuat login dengan php menggunakan session
  • membuat login dengan php mysqli
  • registerphp mysqli
  • cara membuat database login di xampp

SHARE

Other Posts

profil
firman
Fullstack engineer
Getting started with Go modules

Getting started with Go modules – Go tutorial 3

Go modules are an essential part of Go’s package management system introduced in Go 1.11

profil
firman
Fullstack engineer
Getting started with Go modules

Getting started with Go modules – Go tutorial 3

Go modules are an essential part of Go’s package management system introduced in Go 1.11

profil
firman
Fullstack engineer
How to install Golang on Windows, Linux, and MacOS

How to install Golang on Windows, Linux, and MacOS – Go tutorial 2

If in the previous tutorial we have learned about What is Golang ?, now in this tutorial

profil
firman
Fullstack engineer
go tutorial

What is Golang (google language) – Go tutorial 1

What is Golang (google language) ? . Google language, also known as Go or Golang is an

Kodekreasi

Cangkringan Sleman, Yogyakarta

(123) 456-7890

youremail@example.com

facebookinstagramtwitterlinkedln
Tags
#authentikasi php #coding loginphp #form loginphp #login php #login registerphp #logout php #register php #registerphp mysqli #turorial login & register #Tutorial PHP

Copyright © 2022 KodeKreasi | Powered by KodeKreasi

Desclaimer

Terms of service