Pada artikel Belajar CRUD dan Login dengan PHP Native: Studi Kasus Aplikasi Catatan kita telah membahas rancangan aplikasi Catatan berbasis Web. Setelah memahami fitur-fitur yang akan dibuat serta desain user interface-nya kita sudah siap untuk memulai pembuatan script. Penulis sudah menyiapkan starter code yang berisi UI semua halaman note app yang akan kita buat, ayo kita mulai setup project lalu mulai kerjakan fitur-fiturnya.
Daftar Isi
Step 1 – Buat Project baru pada Laragon
Buat sebuah project baru di laragon dengan nama pplg-note-app untuk keseragaman pada pembahasan kita. Namun kamu juga boleh memberikan nama yang berbeda jika kamu mau. Jika kamu lupa bagaimana caranya, kamu bisa membaca kembali tutorial sebelumnya tentang laragon pada artikel ini.
Selanjutnya pastikan project kamu sudah berjalan dengan mengaksesnya pada browser dengan alamat http://pplg-note-app.test . Pastikan juga laragon sudah berhasil membuat databasenya dengan melihatnya menggunakan HeidiSQL (cek artikel ini)
Step 2 – Menggunakan Starter Project
Untuk memudahkan pembahasan kita, Penulis sudah menyediakan starter project berisi 6 halaman yang sudah siap edit sehingga kita bisa lebih fokus ke pembahasan pemrograman PHP nya saja. Ikuti langkah-langkah berikut
1. Buka repository pada link berikut: https://github.com/faiz-dev/pplg-note-app
2. Tekan tombol Code > Download ZIP
3. Ekstrak file zip ke dalam folder project pada laragon. Kamu bisa melihat cara membuka folder project pada artikel ini
4. Buka folder project dengan Visual Studio Code dan pastikan kamu melihat 6 file tadi
5. Coba akses melalui browser dengan alamat http://pplg-note-app.test lalu coba semua halaman dengan menekan tombol yang ada
Step 3 – Membuat Fitur Autentikasi Sederhana dengan PHP Native
Sekarang UI semua halaman sudah berjalan dengan benar dan kita siap untuk mulai membuat fiturnya satu persatu. Sebagai pemanasan kita akan membuat mekanisme Login sederhana dengan target User dapat login menggunakan dummy email & password yang kita tentukan. Untuk lebih jelasnya perhatikan deskripsi teknis di bawah
Dummy data
Untuk memudahkan proses belajar kita akan simulasikan credential user sebagai berikut:
| test@gmail.com | |
| Password | test-password |
Kriteria Fitur
Dengan menuliskan kriteria fitur akan membantu kita untuk lebih memahami bagaimana fitur berjalan dan batasan-batasan apa saja yang berlaku di dalam fitur. Berikut ini kriteria fitur autentikasi sederhana:
- Belum menggunakan database
- Proses pengecekan email & password langsung ditulis menggunakan if-else sederhana
- Jika email & password yang diinput user sesuai dengan data dummy maka tampilkan
“Anda berhasil Login” - Jika email sesuai namun password tidak maka tampilkan
“Password Anda salah” - Jika email tidak sesuai maka tampilkan
Akun tidak ditemukan”
Tahap Implementasi
Setelah memahami kriterianya mari kita mulai buat scriptnya. Ikuti langkah-langkah berikut:
1. Buka script index.php di visual studio code
2. Perhatikan baris 28 s.d 41 terdapat elemen <form>. Kamu perlu ingat tag ini berguna untuk merekam data dari user malalui elemen input lalu mendefinisikan ke mana data ini dikirim
3. Perhatikan 2 input pada baris 31 dan 35. HTML input ini adalah elemen yang digunakan user untuk menuliskan email dan password. Data yang diinput inilah yang nanti akan dikirimkan oleh form ke server lalu diperiksa apakah sesuai dengan dummy data atau tidak
4. Perhatikan setiap input di dalam form harus memiliki attribute name. Attribut ini nanti akan dipanggil di server untuk dibaca datanya. Data email akan dipanggil sebagai “input_email” dan data password akan dipanggil sebagai “input_password”. Jika pemanggilan tidak sesuai name maka data tidak akan terbaca di server
5. Perhatikan baris 28, tag form dilengkapi dengan attribut action. Attribut ini digunakan untuk menentukan ke mana data akan dikirim ketika form di-submit oleh user. Saat ini attribut action berisi main.php sehingga ketika kamu mencoba klik tombol Sign In maka halaman akan berpindah ke main.php dan tampil halaman daftar Notes
6. Ubah attribut action menjadi action-login.php karena kita akan meletakkan logika pengecekan data Log in di file ini.
7. Buat file baru dengan nama action-login.php lalu isi dengan script di bawah lalu simpan
<?php
echo $_POST['input_email'];
echo "<br />";
echo $_POST['input_password'];8. Cek pada browser dengan input email dan password lalu klik Sign In dan perhatikan halaman akan berpindah ke action-login.php serta menampilkan email & password yang sebelumnya diinputkan pada form
9. Mari kita bahas script-nya. Pada baris ke 3 dan 5 kamu bisa menemukan perintah echo lalu diikuti variabel $_POST. Variabel ini berisi data-data yang dikirimkan user melalui form yang dalam konteks kita sekarang adalah email dan password.
Kamu masih ingat attribut name pada input kita mengisi input_email dan input_password? Kedua name ini dipanggil di dalam $_POST sehingga action-login.php dapat membaca data yang dikirimkan.
10. Sekarang kita sudah bisa mengirimkan data dari input pada index.php ke action-login.php. Berikutnya kita akan memeriksa apakah data yang dikirimkan oleh user sama dengan dummy data atau tidak. Comment baris 3 s.d. 5 pada action-login.php lalu tambahkan script berikut
// echo $_POST['input_email'];
// echo "<br />";
// echo $_POST['input_password'];
$dummy_email = "test@gmail.com";
$dummy_password = "test-password";Pada baris 7 dan 8 kita membuat 2 variabel untuk menyimpan dummy email & password. Kedua variabel inilah yang akan kita bandingkan dengan data yang ada pada variabel $_POST sebagai proses autentikasi
11. Tambahkan conditional (if) sebagai berikut:
if ($_POST['input_email'] == $dummy_email) {
// jika email benar
echo "Email benar";
} else {
// jika email salah berarti akun tidak ditemukan
echo "Akun tidak ditemukan";
}Dengan script di atas kita memeriksa email yang diinputkan oleh user apakah sama dengan variabel $dummy_email. Jika benar maka tampilkan “Email Benar” dan jika salah maka kita langsung masuk ke kesimpulan “Akun tidak ditemukan”. Di sini kita sudah menyelesaikan salah satu kriteria. Jika kamu belum memahaminya coba baca kembali pelan-pelan script-nya
12. Coba akses menggunakan email yang sesuai dan ulangi untuk email yang tidak sesuai
13. Berikutnya kita buat pengecekan password jika email benar. Tambahkan kondisional di baris 12 sehingga menjadi seperti berikut
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";
}Perhatikan penulisannya, baca ulang dengan teliti sekaligus memahami logika yang kita pakai.
14. Cek kembali dengan mengakses halaman login dan mencoba dengan credentials salah dan credential benar
15. Nah, sekarang kita sudah memenuhi seluruh kriteria fitur autentikasi sederhana. $_POST[‘input_email’] dan $_POST[‘input_password’] sudah bisa kita cek kesesuaiannya dengan dummy data. Selanjutnya kita akan mengembangkan fitur ini agar bisa melakukan autentikasi berdasarkan data yang ada di database bukan disimpan di dalam variabel.
Penutup
Kita telah sampai pada bagian akhir artikel ini. Kita berhasil menyiapkan project awal note-app dan membangun autentikasi sederhana menggunakan data dummy sebagai simulasi login. Tahapan ini menjadi dasar penting sebelum aplikasi dikembangkan ke tahap yang lebih lanjut.
Pada artikel berikutnya, kita akan mengembangkan sistem autentikasi ini dengan memanfaatkan database agar data pengguna dapat dikelola secara dinamis. Sampai jumpa di artikel selanjutnya, tetap semangat belajar dan terus berlatih menulis kode.
