Widget HTML #1

Contoh dan Cara Membuat Aplikasi Login Multi Level Akses dengan PHP dan MySQLi

PHP menjadi bahasa yang populer di kalangan programer web. Aplikasi web saat ini menjadi aplikasi yang banyak diimplementasikan selain aplikasi mobile seperti Android dan IOS.

Aplikasi web seperti sistem informasi yang banyak digunakan biasanya memiliki level akses user yang lebih dari satu. Misalkan ada pengguna Admin yang dapat mengakses semua modul dalam aplikasi, dan level user lain seperti kasir yang hanya dapat mengakses beberapa modul saja.

Dengan PHP dan database MySQL dengan extension MySQLi kita dapat membuat aplikasi dengan multilevel akses. Seperti yang akan saya bahas dalam postingan ini. Saya akan berikan contoh dan cara membuat Login Multi Level Akses dengan PHP dan MySQLi.

Contoh Login dengan Level Kasir

Gambar di atas adalah contoh tampilan halaman Dashboard ketika seorang pengguna login sebagai Kasir. Menu yang ditampilkan juga menyesuaikan dengna level usernya.

Sekarang saya akan bagikan cara membuatnya dan apa saja yang mesti dipersiapkan.

Kebutuhan Software

Software yang dibutuhkan untuk praktek membuat Login Multi Level Akses dengan PHP dan MySQLi adalah sebagai berikut:
  1. XAMPP digunakan untuk memenuhi kebutuhan Apache sebagai Web Server, PHP sebagai bahasa pemrograman dan MySQL/Mariadb sebagai DBMSnya, dan phpMyAdmin untuk mengelola databasenya.
  2. Visual Studio Code digunakan sebagai Editor Coding.
  3. Browser seperti Chrome, Firefox atau Edge yang akan kita gunakan untuk mengakses atau membuka aplikasinya.

Tahapan Membuat Login Multi Level Akses dengan PHP dan MySQLi

Membuat Database Untuk Aplikasi Login Multi Level Akses dengan PHP dan MySQLi

Pertama (1) - Pastikan kalian telah menginstall XAMPP dan menjalankan 2 modulnya yaitu Apache dan MySQL


Kedua (2) - Membuat database dengan nama "multilevelakses" di phpMyadmin. Kalian dapat mengakses url : http://localhost/phpmyadmin kemudian klik menu basis data dan buat database dengan nama multilevelakses seperti yang terlihat pada gambar berikut ini.


Ketiga (3) - Buatlah tabel di dalam database multilevelakses, buat tabel dengan nama users, dengan 5 kolom.


Selanjutnya, silahkan kalian atur struktur databasenya seperti nama kolom atau field, panjang karakter atau size dan beberapa parameter seperti terlihat pada gambar di bawah ini.


Setalah selesai penyesuaian struktur tabel di atas, silahkan klik Save / Simpan

Setelah tahapan Ketiga (3) selesai dikerjakan, maka hasilnya bisa dilihat seperti pada gambar berikut ini.



Keempat (4) - Selanjutnya kita akan mengisi tabel users secara manual dari phpMyAdmin. Untuk mengisi tabel silahkan klik menu Tambahkan, dan lengkapi form seperti pada gambar berikut ini.


Dari gambar di atas, saya melakukan pengisian data users dengan data berikut :
  • Username : admin
  • Password : admin123 dengan function md5
  • Nama Lengkap : Alexander Paijo
  • Level : Admin
Jika sudah sesuai silahkan klik Kirim.

Lakukan langkah yang sama untuk menambahkan data user dengan level kasir dengan mengikuti petunjuk pada gambar di bawah ini.


Setelah semua input data telah selesai, selanjutnya kita akan berpindah ke Coding PHP menggunakan Visual Studio Code.


Coding Aplikasi Login Multi Level Akses dengan PHP dan MySQLi

Setalah database sudah kita siapkan dengan mengikuti beberapa langkah di atas, selanjutnya kita akan membuat coding aplikasi dengan PHP dan editor Visual Studio Code.

Pertama (1) - Buatlah folder pada htdocs, dengan nama folder aplikasi appmultilevelakses. 



Kedua (2) - Jalankan Visual Studio Code, kemudian klik File -> Open Folder dan pilih folder appmultilevelakses yang telah dibuat sebelumnya. Setalah itu di dalam folder inilah kita akan membuat folder dan beberapa file yang dibutuhkan.

Kemudian disini saya hanya akan menjelaskan bagian-bagian penting yang terkait dengan fungsi untuk aplikasi Login Multi Level Akses dengan PHP dan MySQLi.

File config.php,  file ini berisi script untuk melakukan koneksi dari PHP ke Database MySQL multilevelakses.


Kemudian pada aplikasi ini saya mengumpulkan file header.php, footer.php dan style.css di dalam folder template.


File-file tersebut digunakan untuk menseragamkan bagian dan bawah halaman web kita, kemudian style.css berisi script css untuk mengatur beberapa tampilan.

Pada bagian file header.php, terdapt script untuk memvalidasi apakah pengguna yang mengakses aplikasi sudah login atau belum?.


Dengan script di atas maka aplikasi akan mengarahkan ke file login.php  jika tidak ada session login. Session login sendiri dibuat ketika user berhasil login melalui form login yang telah disediakan.

Selain itu terdapat script untuk navigasi atau menu seperti pada gambar berikut ini.



Dari gambar di atas, perhatikan pada bagian yang saya beri kotak merah. Script tersebut digunakan untuk memastikan hanya user dengan level Admin yang akan ditampilkan menu Data Barang. Jadi ketika user yang login levelnya Kasir, maka menu Data Barang ini tidak akan ditampilkan.

Adapun untuk mendaftarkan sessionnya kalian bisa cek di file login.php seperti yang terlihat pada gambar di bawah ini.


Nah, dari gambar di atas, pada bagian yang saya kotakin merah itu adalah script untuk membuat atau mendaftarkan SESSION  yang digunakan untuk memastikan user telah login dan level aksesnya apa.

--------------------------------
Mohon maaf, rencana saya akan jelaskan detail pembuatan Aplikasi Login Multi Level Akses dengan PHP dan MySQLi ini, namun setelah sampai penjelasan ini saya sudah capek, jadi saya memutuskan untuk membagikan saja source codenya.



Ketiga (3) - Silahkan kalian copykan aplikasi ke folder htdocs kalian dan sesuaikan pengaturan databasenya.

Keempat (4) - Jalankan Aplikasi dengan url http://localhost/appmultilevelakses

Tampilan Login Aplikasi
Tampilan Dashboard Admin
Dashboard Admin


Ok ya, silahkan dicoba-coba, silahkan login sebagai Admin dan sebagai kasir, lihat perbedaan menu yang ditampilkan. dan jika kalian...

Amati hasil aplikasi dan coding PHP nya, mudah-mudahan kalian bisa memahami contoh sederhana ini dan dapat mengembangkan ke aplikasi yang lebih kompleks.

Demikian, jika ada pertanyaan silahkan mengisi kolom komentar di bawah postingan ini.