Tutorial Lengkap! Membuat Login dan Register Dengan PHP & MySQL

Maka nanti tampilannya akan seperti ini (jika sudah didesain nanti):

DailyBlog.id - Saat ini hampir setiap situs web menyediakan halaman login dan register. Oleh karena itu, perlu adanya penambahan sistem login dan register pada aplikasi web modern. Maka dari itu di sini saya akan membahas bagaimana cara membuat halaman login dan register menggunakan script PHP dan MySQL.


Dalam pembuatan halaman login dan register ini, nantinya diharapkan pengguna dapat memilki dan membuat akun dengan data pada akun yaitu nama pengguna, kata sandi, dan email. Setelah itu jika pengguna telah membuat akun mereka pada halaman register, maka pengguna akan masuk ke akun mereka pada halaman login nanti dan akan dialihkan menuju halaman dasbor, jika pengguna berhasil login ke akunnya. Maka dari itu perlu menggunakan PHP dan MySQL dalam pembuatan halaman login dan register, agar semuanya bisa saling terkoneksi satu sama lain.

Dan tidak lupa nanti saya akan menunjukkan kepada kalian, bagaimana cara membuat halaman aman yang hanya dapat diakses oleh pengguna yang masuk. Tanpa login, pengguna tidak dapat mengakses halaman.

Membuat Login dan Register Dengan PHP & MySQL

Berikut adalah langkah-langkah yang harus kalian ikuti untuk membuat halaman login dan register nantinya.
  1. Membuat database dan tabel databasenya
  2. Menghubungkan ke database
  3. Membuat session untuk pengguna yang masuk
  4. Membuat halaman login dan register
  5. Membuat halaman dasbor
  6. Membuat halaman logout
  7. Membuat CSS untuk desain tampilan

Maka langsung saja ikuti tutorial yang ada di bawah ini:

1. Membuat database dan tabel databasenya

Disaat membuat database beserta tabelnya, kalian bisa menuju pada halaman phpMyAdmin setelah itu buat database baru jika belum mempunyai databasenya. Untuk membuat database baru, kalian bisa klik Create Database pada halaman Database. Setelah itu masukan nama database yang ingin kalian buat, seperti ini:

Tutorial Lengkap! Membuat Login dan Register Dengan PHP & MySQL

atau kalian juga bisa ketik dan execute query yang ada di bawah ini di halaman SQL:

CREATE DATABASE dailyblogid_db;


Setelah itu masuk pada database yang sudah kalian buat. Dan tahap selanjutnya yaitu pembuatan tabel databasenya. Tabel yang akan dibuat yaitu tabel pengguna dan memiliki fields :

  • id  int(11)
  • nama_pengguna – varchar(50)
  • email – varchar(50)
  • kata_sandi – varchar(255)
  • tanggal_buat – datetime

Kalian bisa copy query yang ada di bawah ini lalu jalankan pada halaman SQL:

CREATE TABLE IF NOT EXISTS `pengguna` (
    `id` int NOT NULL AUTO_INCREMENT,
    `nama_pengguna` varchar(50) NOT NULL,
    `email` varchar(50) NOT NULL,
    `kata_sandi` varchar(255) NOT NULL,
    `tanggal_buat` datetime NOT NULL,
    PRIMARY KEY (`id`)
);

Tutorial Lengkap! Membuat Login dan Register Dengan PHP & MySQL

Setelah dibuat, maka tampilan dari struktur tabelnya akan seperti ini:

Tutorial Lengkap! Membuat Login dan Register Dengan PHP & MySQL


2. Menghubungkan ke database

Setelah membuat database beserta tabelnya, maka langkah selanjutnya agar PHP dan Databasenya bisa saling terkoneksi, maka kalian harus membuat script untuk mengkoneksikan ke MySQL nya. Untuk mengkonekannya, kalian bisa buat file dengan nama db.php lalu copy script yang ada di bawah ini.

db.php

<?php

// Ganti localhost, root, katasandi, dan nama database sesuai dengan punya kalian
$con = mysqli_connect("localhost", "root", "sandi", "dailyblogid_db");

// Cek apakah berhasil terkoneksi atau tidak
if (mysqli_connect_errno()) 
{
    echo "Gagal terhubung ke database: ".mysqli_connect_error();
}

?>


3. Membuat session untuk pengguna yang masuk

Setelah itu, untuk mendeteksi apakah pengguna sudah masuk atau belum. Kalian bisa membuat file untuk cek session pengguna nantinya. Untuk nama filenya session_pengguna.php, lalu copy script yang ada di bawah ini.

session_pengguna.php

<?php

session_start();
if (!isset($_SESSION["login"])) {
    header("Location: login.php");
    exit();
}

?>

4. Membuat halaman register dan login

Berikut ini cara buat halaman register dan login untuk pengguna nantinya.

- Halaman Register

Buat file dengan nama register.php setelah itu kalian copy script yang ada di bawah ini.

<?php include('db.php'); ?>
<!DOCTYPE html>
<html>
<head>
    <title>Halama Register</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="style.css"/>
</head>
<body>

    <?php

        // Disaat pengguna klik submit, maka insert ke database
        if (isset($_POST['submit'])) 
        {
            // cegah karakter spesial (biar ga bisa di sql injection)
            // hapus backslashes
            $namapengguna = mysqli_real_escape_string($con, stripslashes($_POST['username']));
            $email = mysqli_real_escape_string($con, stripslashes($_POST['email']));
            $sandi = mysqli_real_escape_string($con, stripslashes($_POST['password']));
            $sandi = password_hash($sandi, PASSWORD_BCRYPT);
            $tanggalbuat = date("Y-m-d H:i:s");

            $result   = mysqli_query($con, "INSERT into `pengguna` (nama_pengguna, kata_sandi, email, tanggal_buat)
            VALUES ('$namapengguna', '$sandi', '$email', '$tanggalbuat')");

            if ($result) 
            {
                echo "<div class='form'>
                        <h3>Anda berhasil mendaftar.</h3><br/>
                        <p class='link'>Sekarang Anda bisa masuk ke akun, <a href='login.php'>masuk Sekarang</a>.</p>
                      </div>";
            }
            else 
            {
                echo "<div class='form'>
                        <h3>Tidak dapat membuat akun.</h3><br/>
                        <p class='link'>Silahkan klik <a href='register.php'>daftar</a> lagi.</p>
                      </div>";
            }
        } 
        else { ?>

        <form class="form" method="post">
            <h1 class="login-title">Pendaftaran</h1>
            <input type="text" class="login-input" name="username" placeholder="Nama Pengguna" required /><br/>
            <input type="text" class="login-input" name="email" placeholder="Alamat Email"><br/>
            <input type="password" class="login-input" name="password" placeholder="Kata Sandi"><br/>
            <input type="submit" name="submit" value="Daftar" class="login-button"><br/><br/>

            <p class="link">Apakah sudah memiliki akun? <a href="login.php">Masuk sekarang</a>.</p>
        </form>
        
        <?php } ?>

    </body>
</html>


Maka nanti tampilannya akan seperti ini (jika sudah didesain nanti):

Tutorial Lengkap! Membuat Login dan Register Dengan PHP & MySQL

- Halaman Login

Kalian bisa buat file dengan nama login.php dan copy script yang ada di bawah ini. Di halaman login nantinya, pengguna akan memasukan email dan kata sandinya.

login.php

<?php include('db.php'); ?>
<!DOCTYPE html>
<html>
<head>
    <title>Halaman Login</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <?php

        session_start();

        // Disaat pengguna klik submit, cek dan buat session login
        if (isset($_POST['submit'])) 
        {
            $email = mysqli_real_escape_string($con, stripslashes($_POST['email']));
            $password = mysqli_real_escape_string($con, stripslashes($_POST['password']));

            // Cek nama pengguna ada atau tidak. Dan katasandinya benar atau salah.
            $result = mysqli_query($con, "SELECT email, nama_pengguna, kata_sandi FROM `pengguna` WHERE email='$email'") or die(mysql_error());
            $fetch = mysqli_fetch_object($result);

            // Cek pengguna dan katasandinya
            if (mysqli_num_rows($result) == 1 && password_verify($password, $fetch->kata_sandi) > 0)
            {
                $_SESSION['login'] = $fetch->nama_pengguna;

                // Redirect pengguna ke halaman dashboard
                header("Location: dashboard.php");
            }
            else 
            {
                echo "<div class='form'>
                        <h3>Nama pengguna atau kata sandi salah.</h3><br/>
                        <p class='link'>Klik disini untuk <a href='login.php'>Login</a> lagi.</p>
                      </div>";
            }
        }
        else { ?>

            <form class="form" method="post" name="login">
                <h1 class="login-title">Masuk</h1>
                <input type="text" class="login-input" name="email" placeholder="Alamat Email" autofocus="true"/>
                <input type="password" class="login-input" name="password" placeholder="Kata Sandi"/>
                <input type="submit" value="Login" name="submit" class="login-button"/>

                <p class="link">Belum memiliki akun? <a href="register.php">Daftar Sekarang</a></p>
            </form>

    <?php } ?>
</body>
</html>


Maka nanti tampilannya akan seperti ini (jika sudah didesain nanti):

Maka nanti tampilannya akan seperti ini (jika sudah didesain nanti):


5. Membuat halaman dasbor

Setelah halaman login dan registernya sudah dibuat, langkah selanjutnya yaitu membuat halaman dasbor penggunanya. Kalian bisa buat file dengan nama dashboard.php, lalu copy script yang ada di bawah ini.

dashboard.php

<?php include("session_pengguna.php"); ?>
<!DOCTYPE html>
<html>
<head>
    <title>Halaman Dashboard</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="form">
        <p>Hai kamu, <b><?=$_SESSION['login'];?></b>!</p>
        <p>Ini merupakan tampilan dashboard setelah pengguna melakukan login.</p>
        <p><a href="logout.php">Keluar dari akun</a></p>
    </div>
</body>
</html>


Untuk tampilan dari dashboard setelah pengguna melakukan login akan seperti ini (jika sudah didesain nanti):

Tutorial Lengkap! Membuat Login dan Register Dengan PHP & MySQL


6. Membuat halaman logout

Tidak lupa jika pengguna telah melakukan login, maka ada halaman untuk keluar dari akun pengguna. Maka kalian bisa buat file dengan nama logout.php, setelah itu copy script yang ada di bawah ini.

logout.php

<?php

session_start();

// Hapus atau destroy session masuk pengguna
if (session_destroy()) {
    // Redirect user ke halaman login
    header("Location: login.php");
}

?>



7. Membuat CSS untuk desain tampilan

Agar tampilan dari halaman login, register, dan dashboard terlihat menarik seperi gambar screenshot di atas. Kalian bisa buat file dengan nama style.css, lalu copy css yang ada di bawah ini.

style.css

body {
    background: #3e4144;
}
.form {
    margin: 50px auto;
    width: 300px;
    padding: 30px 25px;
    background: white;
}
h1.login-title {
    color: #666;
    margin: 0px auto 25px;
    font-size: 25px;
    font-weight: 300;
    text-align: center;
}
.login-input {
    font-size: 15px;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 25px;
    height: 25px;
    width: calc(100% - 23px);
}
.login-input:focus {
    border-color:#6e8095;
    outline: none;
}
.login-button {
    color: #fff;
    background: #55a1ff;
    border: 0;
    outline: 0;
    width: 100%;
    height: 50px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}
.link {
    color: #666;
    font-size: 15px;
    text-align: center;
    margin-bottom: 0px;
}
.link a {
    color: #666;
}
h3 {
    font-weight: normal;
    text-align: center;
}


Dan begitulah cara buat halaman login dan register menggunakan PHP dan MySQL. Kalian bisa coba untuk daftar pengguna baru, lalu login seperti biasa.  Jika kalian ingin unduh scriptnya, kalian bisa unduh melalui link berikut ini.

https://github.com/andspdev/tutorial-login-register-php-mysql

Mungkin cukup sekian artikel yang saya berikan, semoga artikel ini dapat bermanfaat bagi kalian. Dan jika ada script yang error atau masih belum tau fungsinya apa. Silahkan komen atau hubungi saya lewat email. Jika saya ada salah kata atau pengetikan, mohon maaf. Sekian dan terima kasih!.

Selamat mencoba!

Posting Komentar (0)
Lebih baru Lebih lama