Pada artikel Setup Project Aplikasi Catatan Berbasis Web dengan PHP Native kita sudah berhasil membuat fitur login sederhana, sekarang saatnya kita buat menjadi lebih dinamis dengan menambahkan basis data ke dalam sistem kita.
Daftar Isi
Step 1 – Menyiapkan tabel user Database
Basis data ini akan kita gunakan untuk tempat menyimpan data yang berupa data pengguna untuk autentikasi maupun data catatan sebagai fitur utamanya. Sebagai gambaran jika seseorang ingin melakukan login maka sebelumnya harus mengisinya di halaman registrasi, ketika user melakukan submit maka data tersebut akan dicek dan disimpan di database.
Selanjutnya ketika user tersebut kembali ke halaman login dia sudah bisa mengirimkan email & passwordnya dan aplikasi akan mengakses data yang sudah tersimpan di database dan memeriksanya dengan inputan user. Sehingga posisi dummy_data di Step 3 akan digantikan dengan data yang berhasil disimpan dari dalam database. Ayo ikuti langkah-langkah berikut untuk menyiapkan tabel user dalam database
1. Buka HeidiSQL dari Laragon. Kamu bisa membaca Artikel ini jika lupa langkah-langkahnya
2. Pilih Database pplg-note-app
3. Jalankan Query berikut
CREATE TABLE `users` (
`id` INT AUTO_INCREMENT PRIMARY KEY,
`fullname` VARCHAR(50) NOT NULL DEFAULT '',
`email` VARCHAR(50) NOT NULL DEFAULT '',
`password` VARCHAR(50) NOT NULL DEFAULT '0'
)4. Pastikan tabel berhasil dibuat dengan klik kanan nama database lalu klik refresh. Klik tanda panah di kiri nama database untuk melihat tabel yang ada
5. Selanjutnya kita akan memasukkan data user secara manual ke dalam tabel. Buka tab query lalu jalankan perintah berikut ini:
INSERT INTO users (fullname, email, password) VALUES ("Didik", "didik@gmail.com", "pwd-didik");
INSERT INTO users (fullname, email, password) VALUES ("Andin", "andin@gmail.com", "pwd-andin");6. Pastikan data sudah masuk ke dalam tabel dengan klik pada nama tabel users, lalu buka tab Data
7. Sekarang kita sudah mempunya 2 user dalam database, kita akan menggunakan data ini untuk mencoba fitur autentikasi yang dinamis.
Step 2 Mengembangkan fitur Autentikasi dengan Database
Sebelumnya kita telah membuat autentikasi sederhana dengan membandingkan data input user pada $_POST dengan variabel $dummy_email & $dummy_password yang kita tulis langsung di action-login.php. Pada bagian ini kita akan mengembangkan fitur ini agar bisa berjalan secara dinamis dengan membandingkan $_POST dengan data yang ada dalam database. Ikuti langkah berikut untuk mengembangkan fitur autentikasi dengan database
1. Buat file config.php dan isi dengan script berikut:
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "pplg-note-app";
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}file ini berfungsi untuk membangun koneksi dengan database. Perhatikan baris 7 kamu bisa menemukan new mysqli($host, $user, $pass, $db). Perintah ini berfungsi untuk membuat koneksi ke database yang mana memerlukan 4 parameter sebagai berikut:
- Parameter pertama diambil dari variabel $host. Parameter pertama ini berisi alamat server yang mana pada tutorial ini server database terpasang di laragon bersama dengan web server sehingga ditulis “localhost” di baris 2
- Parameter kedua diambil dari variabel $user. Parameter kedua ini berisi username untuk login ke server database. Secara default di laragon kita menggunakan user “root” (baris ke 3)
- Parameter ketiga diambil dari variabel $pass. Parameter ketiga ini berisi password untuk login ke server database. Secara default di laragon user root tidak memiliki password sehingga kita menulis “” di baris ke 4
- Parameter terakhir diambil dari variabel $db. Parameter ini berisi nama database yang ingin kita hubungkan. Pada project ini nama databasenya adalah note-app sama dengan nama projectnya.
2. Berikutnya kita kembali ke file action-login.php. Kita akan memafaatkan koneksi dari config.php untuk mengambil data dari database pada file action-login.php.
3. Tambahkan script berikut pada action-login.php
<?php
// memanggil koneksi di config.php
include "./config.php";
// echo $_POST['input_email'];
// echo "<br />";
// echo $_POST['input_password'];Keterangan:
pada baris ke 4 kita menggunakan keyword include untuk memanggil script config.php di dalam action-login.php. variabel $conn di config.php akan berjalan dan akan kita gunakan di dalam action-login.php
4. Tambahkan baris kode berikut untuk menjalankan query select
// memanggil koneksi di config.php
include "./config.php";
// query untuk mengambil data dari user dengan email = $_POST['input_email']
$query = "SELECT * FROM users WHERE email='".$_POST['input_email']."'";
// menjalankan query dengan koneksi dari $conn
// result di sini akan digunakan untuk memanggil data
$result = $conn->query($query);
// cek jumlah data menggunakan $result
echo "jumlah data: ";
echo $result->num_rows;
echo "<br /> <br />";Keterangan:
- Pada baris ke 7 kita menuliskan query untuk mengambil data dari tabel users di mana kolom email sama dengan data email yang diinputkan oleh user
- Pada baris ke 10 kita menjalankan query dengan menggunakan perintah $conn->query($query). Data yang didapatkan akan masuk ke variabel $result
- Baris ke 13 dan 14 dijalankan untuk melihat menampilkan jumlah data yang didapat dari query select sebelumnya.
5. Coba akses website dan inputkan email didik@gmail.com dan perhatikan apa yang muncul
Jika kita login dengan didik@gmail.com atau andin@gmail.com akan muncul angka 1 yang berarti ditemukan 1 data dari database, jika selainnya muncul angka 0 artinya tidak ada data ditemukan dalam database.
6. Sekarang kita sudah memastikan bahwa kita bisa ambil data dari database berdasarkan email yang diinput user, sekarang coba kita tampilkan datanya. Tambahkan script berikut
// cek jumlah data menggunakan $result
echo "jumlah data: ";
echo $result->num_rows;
echo "<br /> <br />";
// memanggil data dengan $result
$row = $result->fetch_assoc();
// menampilkan data pada variabel $row
echo "<pre />";
print_r($row);Keterangan
- Baris ke 19 kita memanggil data pertama dari $result dengan menggunakan fetch_assoc() dan memasukkannya ke variabel $row. Pada baris ini data user sudah ada di dalam variabel
- Baris 22 dan 23 kita coba tampilkan ke layar menggunakan perintah print_r($row)
7. Cek akses dengan browser untuk melihat datanya
Kamu bisa melihat data user didik bisa tampil di layar, kamu bisa mencobanya untuk user andin@gmail.com
8. Karena kita sudah bisa mendapatkan data email & password user, selanjutnya kita akan gunakan data pada $row tadi untuk memeriksa password yang diinputkan user. Kita lanjut ke bagian pengecekan kondisi yang sudah kita buat sebelumnya. Perhatikan kembali bagian script kita sebelumnya
// menampilkan data pada variabel $row
echo "<pre />";
print_r($row);
$dummy_email = "test@gmail.com";
$dummy_password = "test-password";
if ($_POST['input_email'] == $dummy_email) {
// jika email benar
if ($_POST['input_password'] == $dummy_password) {
echo "Anda berhasil login";
} else {
echo "Password anda salah";
}
} else {
// jika email salah berarti akun tidak ditemukan
echo "Akun tidak ditemukan";
}Pada script sebelumnya (baris 28 dan 31) kita melakukan pengecekan input email apakah sama dengan $dummy_email atau tidak, dan input password apakah sama dengan $dummy_password atau tidak. Selanjutnya karena kita sudah mendapatkan data dari database maka kita tidak akan menggunakan $dummy_email dan $dummy_password melainkan data pada variabel $row tadi.
9. Lakukan perubahan pada baris 28 dan 31 dengan mengganti variabel dummy ke variabel row
// menampilkan data pada variabel $row
echo "<pre />";
print_r($row);
$dummy_email = "test@gmail.com";
$dummy_password = "test-password";
if ($_POST['input_email'] == $row['email']) {
// jika email benar
if ($_POST['input_password'] == $row['password']) {
echo "Anda berhasil login";
} else {
echo "Password anda salah";
}
} else {
// jika email salah berarti akun tidak ditemukan
echo "Akun tidak ditemukan";
}10. Cek proses loginnya dengan data sebelumnya
Jika kamu perhatikan, ketika email yang diinputkan tidak tersedia di database (test@gmail.com) maka akan muncul error dan pesan Akun tidak ditemukan. Error tersebut disebabkan tidak ada data yang didapat dari database sehingga variabel $row berisi null. sehingga ketika kita panggil $row[’email’] akan menyebabkan error. Untuk memperbaiki error ini ikuti langkah berikut:
11. Kita akan mengubah logika pengecekan email dengan memeriksa apakah data ditemukan atau tidak baru jika sudah ditemukan kita boleh cek apakah email dan paswordnya benar atau tidak
// memanggil data dengan $result
$row = $result->fetch_assoc();
// menampilkan data pada variabel $row
echo "<pre />";
print_r($row);
if ($result->num_rows == 0) {
// jika num_rows = 0 berarti tidak ada data yang ditemukan dari database
echo "Akun tidak ditemukan";
exit(); // langsung akhiri eksekusi tanpa harus lanjut ke bawah
} else {
if ($_POST['input_password'] == $row['password']) {
echo "Anda berhasil login";
} else {
echo "Password anda salah";
}
}
12. Hapus echo & print_r untuk membersihkan tampilan
// memanggil data dengan $result
$row = $result->fetch_assoc();
if ($result->num_rows == 0) {
// jika num_rows = 0 berarti tidak ada data yang ditemukan dari database
echo "Akun tidak ditemukan";
exit(); // langsung akhiri eksekusi tanpa harus lanjut ke bawah
} else {
if ($_POST['input_password'] == $row['password']) {
echo "Anda berhasil login";
} else {
echo "Password anda salah";
}
}
Logika pengecekan credentials (email & password) sederhana sudah selesai namun pengguna hanya mendapatkan informasi berhasil atau gagalnya bukannya tampil daftar notes atau kembali ke halaman login. Untuk memperbaikinya ikuti langkah berikutnya
Step 3 Redirect ke halaman main.php
Pada bagian ini kita akan membuat pengguna berpindah ke halaman main.php ketika berhasil, dan kembali ke halaman index.php ketika autentikasi gagal.
1. Buka kembali action-login.php dan tambahkan perintah untuk redirect ketika berhasil. Tutup juga semua echo
// cek jumlah data menggunakan $result
// echo "jumlah data: ";
// echo $result->num_rows;
// echo "<br /> <br />";
// memanggil data dengan $result
$row = $result->fetch_assoc();
if ($result->num_rows == 0) {
// jika num_rows = 0 berarti tidak ada data yang ditemukan dari database
// echo "Akun tidak ditemukan";
header("location:index.php");
exit(); // langsung akhiri eksekusi tanpa harus lanjut ke bawah
} else {
if ($_POST['input_password'] == $row['password']) {
// echo "Anda berhasil login";
header("location:main.php");
} else {
// echo "Password anda salah";
header("location:index.php");
}
}
2. Coba akses dengan menggunakan credential yang benar dan salah
