Tutorial Membuat Register & Login Ajax di PHP Dengan Bootstrap 4 : Koneksi Database


Tutorial Membuat Register & Login Ajax di PHP Dengan Bootstrap 4 : Koneksi Database

Tutorial Membuat Register & Login Ajax di PHP Dengan Bootstrap 4 : Koneksi Database - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat sebuh proses Register dan Login Menggunakan Ajax di PHP dan MySQLi. Dan tentu saja untuk tampilannya kita akan menggunakan Famework Bootstrap 4.

Register dan Login umumnya merupakan sebuah fitur yang ada didalam website, seperti halnya jika kita tahu ada Facebook, Twitter, Github dan masih banyak lagi. Situs-situs tersebut mempunyai fitur register untuk mendaftar sebuah akun dan login untuk masuk kedalam akun tersebut.

Oke pada artikel kali ini kita semua akan mencoba membuat proses Register dan Login dengan menggunakan PHP dan MySQLi dengan menggunakan teknik AJAX.

Sebelum kita membuat proses Register dan Login tentunya kita harus membuat sebuah koneksi antara PHP kita dengan MySQL. Jadi pembahasan diartikel pertama ini adalah bagaimana cara membuat sebuah koneksi database yang fungsinya untuk menghubungkan project kita nanti ke database.

Oke mari kita mulai, silahkan buat folder baru dengan nama register-login-ajax-php didalam folder C:/XAMPP/htdocs (jika kalian menggunakan XAMPP).

Setelah itu silahkan kalian buka project kalian dengan text editor seperti Sublime Text, Visual Studi Code atau dengan yang lainnya.

Sekarang silahkan kalian buat sebuah file baru dengan nama koneksi.php dan simpanlah didalam folder project kalian, yaitu didalam folder register-login-ajax-php.

Dan sialhkan kalian tulis kode dibawah ini ke dalam file koneksi.php, berikut kodenya :

<?php

//deklasrasi variabel
$db_host = "localhost";
$db_user = "root";
$db_pass = "";
$db_name = "db_ajax_php";    

$connection = mysqli_connect($db_host, $db_user, $db_pass, $db_name);

if($connection) {
    //echo "Koneksi Berhasil!";
} else {
    echo "Koneksi Gagal! : ". mysqli_connect_error();
}

?>

Dari kode diatas kurang lebih fungsi-fungsinya seperti berikut ini.

  • $db_host - variabel ini digunakan untuk menyimpan nama host kita, yaitu localhost.
  • $db_user - variabel ini digunakan untuk menyimpan username dari MySQL kita, jika kita menggunakan XAMPP maka default isinya adalah root.
  • $db_pass - variabel ini digunakan untuk menympan password dari MySQL kita, secara default adalah kosong, maka kita tidak perlu mengisi variabel ini.
  • $db_name - variabel ini digunakan untuk menyimpan nama database yang sudah kita buat sebelumnya.

Kita bisa lihat dari file koneksi.php diatas, kita sudah memberikan nama database yang akan kita gunakan nanti yaitu db_ajax_php, oleh sebab itu berarti sekarang kita buat sebuah database baru dengan nama tersebut.

Sialhkan buka http://localhost/phpmyadmin, dan silahkan buat database baru dengan nama db_ajax_php. Oke setelah itu silahkan kita bikin sebuah tabel baru didalam database tersebut.

Sialhakan buat tabel baru dengan nama tbl_users. Dengan memiliki 4 kolom, kurang lebih strukturnya seperti gambar dibawah ini :


Dari gambar pembuatan tabel diatas, berikut penjelasan singkatnya:

  • id_user - digunakan sebagai PRIMARY KEY dan dijadikan AUTO INCREMENT dengan tipe data INT dan dengan Lenght / Value 11, dimana kolom ini sebagai perwakilan satu record / satu baris.
  • nama_lengkap - kolom ini digunakan untuk menyimpan data nama lengkap dengan tipe data VARCHAR dengan Lenght / Value 100.
  • username - kolom ini digunakan untuk menyimpan username dengan tipe data VARCHAR dengan Lenght / Value 100.
  • password - dan yang kolom terakhir ini adalah untuk menyimpan password, di kolom ini kita menggunakan tipe data VARCHAR dengan Lenght / Value 100 juga.

Oke sampai sini dulu pembahasannya, kita akan lanjutkan bagaimana cara membuat sebuah proses Register menggunakan teknik Ajax di artikel selanjutnya. Terima Kasih


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami