Membuat Login dan Register Page (PHP & MySQL)

Belajar kali ini dimulai dengan membuat simple local website berisi page login dan register dengan menggunakan PHP dan MySQL. Tools yang saya gunakan adalah VS Code sebagai text editor, web browser(Firefox), dan juga Apache Web Server. Menginstall XAMPP

Langkah pertama yang dilakukan adalah mempersiapkan web server. Untuk itu perlu dilakukan penginstallan XAMPP. Download file instalasi XAMPP. Berikan izin akses untuk run instalasi.

sudo chmod 755 nama_package.run

Kemudian melalui XAMPP menjalankan MySQL Database dan juga Apache Web Server. Setelah memastikan keduanya berjalan, buat directory untuk website yang akan dibuat pada directory /opt/lampp/htdocs/. Untuk membuat directory baru, diperlukan pengaturan file permission.

sudo chmod 777 /opt/lampp/htdocs/

Penjelasan mengenai chmod dapat dipelajari disini.

Berikut adalah perintah untuk menjalankan xampp di linux

#hidupkan xampp

sudo /opt/lampp/lampp start


#hidupkan xampp ui

sudo /opt/lampp/manager-linux-x64.run


#menjalankan php

php -S localhost:8000

Menyiapkan Database

Siapkan database yang akan digunakan untuk page login/register pada phpMyAdmin.

Struktur database login/register page

Koneksi ke Database

Buat config.php untuk membuat koneksi ke database.

$server = "127.0.0.1";
$user = "root";
$pass = "";
$database = "login_register_pure_coding";

$conn = mysqli_connect($server, $user, $pass, $database);

if (!$conn) {
    die("<script>alert('Connection Failed.')</script>");
}

Buat variabel untuk menyimpan konfigurasi database. Pada kode di atas host diubah localhost ke 127.0.0.1 karena catch error mysqli_real_connect(): (HY000/2002): No such file or directory.Untuk mengasi hal ini dapat dilakukan langkah berikut. Default value password dan username jika tidak pernah diset adalah username:"root" dan password:"". Periksa koneksi dengan menjalankan perintah ini pada terminal. Cek pada browser http://127.0.0.1:8000/.

php -S localhost:8000

Fitur Register di PHP

Buat halaman register.php untuk menyimpan source code halaman register. Karena akan digunakan objek $db dalam kode ini, maka objek diimpor dari koden config.php

include 'config.php';

Cek terlebih dahulu apakah tombol submit sudah di-klik.

if (isset($_POST['submit'])) {
...
}

Jika field belum diisi/salah echo pesan error.

echo "<script>alert('Woops! Email or Password is Wrong.')</script>";

Simpan input value dari field ke dalam parameter untuk memudahkan operasi. Password disini di encrypt dengan md5.

    $username = $_POST['username'];
    $email = $_POST['email'];
    $password = md5($_POST['password']);
    $cpassword = md5($_POST['cpassword']);

Lakukan pengecekan apakah value yang dimasukkan sudah exist di database atau belum.

    if ($password == $cpassword) {

...

}

    else {

    echo "<script>alert('Woops! Something Wrong Went.')</script>";
    }

Insert value ke dalam tabel database jika semua data sesuai.

    $sql = "INSERT INTO users (username, email, password)
            VALUES ('$username', '$email', '$password')";

Berikut ini adalah contoh tampilan register website yang sudah dibuat.

Tampilan Halaman Registrasi

Fitur Login Page

Halaman ini hampir sama dengan halaman register, bedanya pada login dilakukan query pada database users yang memiliki username/email yang sama dengan yang diinputkan. Halaman ini akan menjadi halaman default. Buat file index.php.

    $sql = "SELECT * FROM users WHERE email='$email' AND password='$password'";

Berikut adalah contoh tampilan halaman login.

Tampilan Halaman Login

Reference:

https://purecodingweb.blogspot.com/

https://www.petanikode.com/

Source Code:

https://github.com/shasa81/cyseclearning

Security Learning Journal