Membuat Login dan Register (dengan Bootstrap 4)

#PHP #MySQL

Biasanya saat membuat halaman admin. Kita pasti akan membuat login dan register.

Lalu bagaimana cara membuatnya?

Tulisan ini akan menjawabnya…

Sebelum itu, saya ingin menyampaikan apa saja yang akan dibahas di sini.

Tutorial ini menggunakan PHP Native dan PDO sebagai koneksi ke database;
Tutorial ini menggunakan Framework Bootstrap 4 untuk tampilan;
Tutorial ini hanya akan fokus membahas fitur login dan register saja, untuk class-class bootstrap saya tidak akan jelaskan. Saya anggap, pembaca sudah paham dengan Bootstrap.

Baiklah, mari kita mulai…

Persiapan Alat dan Bahan

Berikut ini alat-alat yang dibutuhkan:

Teks Editor: VS Code (pakai yang lain juga boleh);
Web Browser: Google Chrome, Opera, Firefox, dll;
Server: PHP (versi 5.6 ke atas), Apache2/Nginx, dan MySQL.

Membuat Project Baru

Buatlah sebuah direktori baru bernama php-login-register di htdocs buat yang menggunakan XAMPP. Sedangkan yang menggunakan server apache2 dan nginx, silakan buat di /var/www/html.

Ikuti perintah berikut:

sudo chmod 777 /var/www/html -R # berikan hak akses dulu
mkdir /var/www/html/php-login-register # buat direktori baru
cd /var/www/html/php-login-register # pindah ke direktori baru

Buat tiga direktori di dalamnya:

mkdir css js img # buat tiga direktori sekaligus

Setelah itu buat file yang dibutuhkan:

# membuat file kosong
touch index.php login.php register.php logout.php timeline.php auth.php config.php

Buka dengan VS Code:

# buka direktori ini dengan VS Code, pastikan kamu sudah menginstall VS Code
code .

Sehingga kita memiliki struktur direktori seperti ini:

Setelah itu, silakan ekstrak dan copy semua bahan yang di-download tadi ke sana.

Beres…

Semua bahan-bahan sudah siap.

Setelah itu, buatlah sebuah tabel baru dengan nama users dan buat kolomnya seperti ini:

Kode SQL-nya:

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `username` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `name` varchar(255) NOT NULL,
  `photo` varchar(255) NOT NULL DEFAULT 'default.svg'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for table `users`
--
ALTER TABLE `users`
  ADD PRIMARY KEY (`id`),
  ADD UNIQUE KEY `username` (`username`);

--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=0;

Selesai, selanjutnya kita mulai coding…

Membuat Koneksi ke Database

Hal pertama yang harus kita lakukan adalah membuat kode untuk koneksi ke database.

Silakan buka file config.php, lalu isi kodenya seperti ini:

php

$db_host = "localhost";
$db_user = "root";
$db_pass = "kopi";
$db_name = "pesbuk";

try {    
    //create PDO connection 
    $db = new PDO("mysql:host=$db_host;dbname=$db_name", $db_user, $db_pass);
} catch(PDOException $e) {
    //show error
    die("Terjadi masalah: " . $e->getMessage());
}

Sesuaikan user dan password-nya dengan konfigurasi di komputermu. Karena di komputer saya, password mysql-nya menggunakan kopi.

Jika tidak menggunakan password, maka dikosongkan saja.

$db_pass = "";

Apa maksud kode config.php di atas?

Membuat Halaman Utama

Halaman utama adalah halaman yang akan dibuka pertama kali oleh pengunjung web.

Halaman ini bertugas sebagai landing page, isinya cuma html saja.

Silakan buka file index.php lalu isi kodenya seperti ini:

<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>Pesbuktitle>

    
     <link rel="stylesheet" href="css/bootstrap.min.css" />
head>
<body class="bg-light">
    <header>
        <div class="jumbotron jumbotron-fluid">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <h1>Selamat datang di Pesbukh1>
                        <p>Bergabunglah bersama jutaan orang lainnya...p>
                    div>
                    <div class="col-md-4">
                        <a href="login.php" class="btn btn-secondary">Masuka>
                        <a href="register.php" class="btn btn-success">Daftara>
                    div>
                div>
            div>
        div>
    header>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <img class="img img-responsive" src="img/connect.png" />
                div>
            div>
        div>
    section>

body>
html>

Setelah itu, coba buka http://localhost:8000/.

Keren ‘kan?

O ya gambarnya kita pinjam dari Facebook ????.

Tidak apa-apa, ini kan hanya untuk belajar saja. Nanti kalau sudah buat web sungguhan, tidak boleh menggunakan gambar orang lain tanpa izin.

Membuat Fitur Register di PHP

Berikutnya kita akan membuat fitur registrasi.

Alur kerjanya:

Input data dari form;
Filter data yang diinputkan;
Simpan ke database;
Kalau berhasil, alihkan ke halaman login.

Mari kita buat.

Silakan buka file register.php, lalu isi dengan kode berikut:

SMK Negeri 1 Tanjung Lago Official Site