TutorialWeb Application

Membuat Sistem Login & Register dengan PHP dan MySQL

0 Comments

Login dan register adalah sebuah fitur penting dalam membangun sebuah web aplikasi. Dimana perannya sebagai pintu untuk masuk ke sebuah aplikasi. Kalian bisa dengan mudah membuat Sistem login dan register dengan PHP dan MySQL. Nah, pada tutorial kali ini saya akan share sedikit ilmu bagaimana membuatnya sistem login dan register sederhana menggunakan PHP dan MySQL. Disini saya akan menggunakan teknik OOP (Objek Oriented Programming) dalam membangun sistemnya.

Requirement :

  • PHP v5+
  • MySQL v5.5+
  • JQuery v2+

Struktur File dan Folder :

  • css
    • style.css
  • include
    • class.user.php
    • db_config.php
  • js
    • jquery-2.1.3.min.js
  • home.php
  • index.php
  • login.php
  • register.php

Oke langsung saja, pertama tama kalian buat dahulu database di localhost dengan nama macode kemudian buat lah tabel user dengan 4 record:

CREATE TABLE `user` (
    `user_id` int(11) NOT NULL AUTO_INCREMENT,
    `user_name` varchar(200) COLLATE utf8_unicode_ci NOT NULL,
    `email` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
    `password` varchar(200) COLLATE utf8_unicode_ci NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Konfigurasi Database (db_config.php)

Setelah kita membuat database beserta tabelnya diatas, selanjutnya adalah kita mengkoneksikan database yang telah kita buat tadi.

<?php
// Konfigurasi database
class DB_Config {
    public $db_servername   = 'localhost';
    public $db_username     = 'root';
    public $db_password     = '';
    public $db_name         = 'macode';
}

Class User (class.user.php)

Kelas user bertujuan untuk menghandle koneksi ke database yang telah dibuat. Kalau sebelumnya kita membuat kelas konfigurasi database nah di kelas user ini kita tinggal memanggil konfigurasi tersebut dan dihubungkan di kelas ini, serta terdapat beberapa fungsi nantinya yang akan digunakan untuk mengambil / membaca data pada database. Terdapat 6 method didalam kelas ini yaitu _construct, registration, check_login, get_session, get_username, dan user_logout.

<?php

include "db_config.php";

class User extends DB_Config {

    public $db;

    public function __construct() {
        // Konek ke database
        $this->db = new mysqli($this->db_servername, $this->db_username, $this->db_password, $this->db_name);

        // Cek koneksi
        if ( $this->db->connect_errno ) {
            printf( "Koneksi gagal: %s\n", $this->db->connect_error );
            exit();
        }
    }

    public function registration( $username, $email, $password ) {
        $sql = "SELECT * FROM user WHERE email='$email'";

        // Mengecek apakah email tersebut sudah terdaftar di database atau belum.
        $check =  $this->db->query($sql) ;

        // Jika email belum terdaftar di database maka record akan dimasukkan ke tabel
        if (is_object($check) && empty($check->num_rows)) {
            $sql1 = "INSERT INTO user (user_name, email, password) VALUES ('$username', '$email', '$password')";
            mysqli_query($this->db, $sql1);
            return true;
        }
        else {
            return false;
        }
    }

    public function check_login( $username, $password ) {
            $sql = "SELECT user_id FROM user WHERE email = '$username' OR user_name = '$username' AND password = '$password'";
            
			// Mengecek apakah email tersebut sudah terdaftar di database atau belum.
        	$result = $this->db->query( $sql );

            if( is_object( $result ) && !empty( $result->num_rows ) ) {
                // Session login untuk memastikan user tersebut sedang aktif
                $_SESSION['login'] = true;
                while( $user_data = $result->fetch_array() ) {
                    $_SESSION['user_id'] = $user_data['user_id'];
                }
	            return true;
            }
	        else {
			    return false;
            }
            
            $this->db->close();
    }

    public function get_username($user_id) {
        $sql = "SELECT user_name FROM user WHERE user_id = '$user_id'";
        $result = $this->db->query($sql);

        if(is_object($result) && !empty($result->num_rows)) {
            while($user_data = $result->fetch_array()) {
                echo $user_data['user_name'];
            }
        }
        else {
            echo "Error: " . $sql . "<br>" . $this->db->error;
        }
    }

    // Memulai session
    public function get_session(){
        return $_SESSION['login'];
    }

    // Keluar dari aplikasi
    public function user_logout() {
        $_SESSION['login'] = FALSE;
        session_destroy();
    }
}?>

Halaman Login/Register (index.php)

Kalian dapat menggunakan template login manapun, bisa kalian dapatkan di codepen atau github. Disini template yang saya gunakan sekaligus login dan register menjadi 1 halaman.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Simple Login - MACode</title>
    
    <link rel="Shortcut icon" type="text/ico" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="login-page">
    <div class="form">
        <div class="img-place">
            <img src="favicon.ico" alt="LOGO">
        </div>
        <br>
        <form class="register-form" action="register.php" method="post">
            <input type="text" name="name" placeholder="Nama" required/>
            <input type="text" name="email" placeholder="Email" required/>
            <input type="password" name="password" placeholder="Password" required/>
            <button type="submit">Create</button>
            <p class="message">Already registered? <a href="javascript:void(0)">Sign In</a></p>
        </form>
        <form class="login-form" action="login.php" method="post">
            <input type="text" name="username" placeholder="Username atau Email" required/>
            <input type="password" name="password" placeholder="Password" required/>
            <button type="submit">Login</button>
            <p class="message">Not registered? <a href="javascript:void(0)">Create an account</a></p>
        </form>
    </div>
</div>
<h3 style="text-align: center; margin-top: 50px">Source code gratis hanya di <a href="">macode.web.id</a><h3>


<script src='js/jquery-2.1.3.min.js'></script>
<script>
$('.message a').click(function(){
   $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
</script>

</body>
</html>

Kontroler Login & Register

Kontroler login dengan register dipisah agar lebih mudah dipahami, dan jika terjadi masalah dapat diketahui dengan mudah di file mana yang terjadi masalah.

Login:

<?php
    session_start();
	
    include_once 'include/class.user.php';
	$user = new User();

	if (isset($_POST['username']) && isset($_POST['password'])) {

        $login = $user->check_login($_POST['username'], $_POST['password']);
        
	    if ($login) {
	        // Registrasi sukes
	       header("location:home.php");
        }
        else {
            // Registrasi gagal
	        echo '<script>alert("Username atau Password salah, silahkan coba lagi!"); history.go(-1);</script>';
        }
        
    }
?>

Register:

<?php

    include_once 'include/class.user.php';

    $user = new User();

    if (isset($_POST['name']) && isset($_POST['email']) && isset($_POST['password'])) {

        $register = $user->registration($_POST['name'], $_POST['email'], $_POST['password']);

        if ($register) {
            // Registrasi sukes
            echo '<h2>Registration successful <a href="index.php">Click here</a> to login</h2>';
        } else {
            // Registrasi gagal
            echo '<h2>Registration failed. Email or Username already exits please try again</h2>';
        }
    }
?>

Halaman Pengguna (home.php)

Terakhir adalah halaman pengguna, yang dimana di halaman ini sudah masuk / dimulainya session untuk memastikan user tersebut berhak atau tidaknya masuk ke sistem.

<?php
    
    session_start();
    
    include_once 'include/class.user.php';
    $user = new User();
    
    $user_id = $_SESSION['user_id'];

    if (!$user->get_session()){
        header("location:index.php");
    }

    if (isset($_GET['q'])) {
        $user->user_logout();
        header("location:index.php");
    }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
</head>

<body>

<div id="container">
    <div id="main-body">
        <h1>Hello <?php $user->get_username($user_id); ?></h1>
    </div>
    <div id="footer">
    <a href="home.php?q=logout">LOGOUT</a>
    </div>
</div>

</body>
</html>

Oke mungkin cukup sekian tutorial kali ini, jangan lupa share juga keteman kalian. Kalian juga dapat mendownload full source code pada tombol dibawah ini :

Source Code Database

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *