Membuat CRUD Ajax JQuery Tanpa Reload Halaman di Codeigniter 3 #Autentikasi Multiple User Akses

Initekno – Mungkin sebagian orang masih kebingungan untuk membuat sistem autentikasi yang bagus, aman dan dapat membagi level akses setiap usernya. Dalam tutorial kali ini studi kasus sederhana yaitu sistem informasi penilaian harian dan absensi siswa di bimbingan belajar, saya tidak sebut merek bimbelnya karena ini adalah bagian dari contoh studi kasus pembahasan sebuah sistem sederhana.

Jika mengacu pada judul yaitu CRUD ajax jquery tanpa reload, yups.. benar banget, saya akan membuat fitur CRUD data dengan ajax jquery tanpa browser harus melakukan reload halaman. Mungkin kamu sudah tidak asing dengan teknik pemrosesan data di belakang layar.

Seperti biasa.. ada beberapa tahapan yang harus di persiapkan untuk membuat sistem ini. Saya akan menggunakan framework codeigniter dan database mysql. Dan berikut beberapa tahapan yang harus di persiapkan :

  1. Framework Codeigniter
  2. XAMPP (include apache dan mysql server)
  3. Visual Studio Code
  4. Git
  5. Akun Bitbucket
  6. Datatables
  7. Jquery CDN
  8. Bootstrap 4

Baik, jika semua hal diatas sudah kamu dapatkan dan kamu unduh, maka sesuai judulnya yaitu membuat modul autentikasi multiple user akses terlebih dahulu. Ada 3 tipe akses disini, yaitu pengajar, lokasi dan superadmin. user akses ini nantinya bisa kamu tambahkan sesuai kebutuhan. Untuk sampel saya menggunakan 3 user akses saja.

Jadi alur kesimpulannya akan seperti ini :

Pengajar :

  • Pengajar melakukan login kedalam sistem dengan menggunakan nopeg dan password
  • Pengajar dapat menambah, menghapus dan merubah nilai siswa

Lokasi :

  • Lokasi melakukan login kedalam sistem dengan menggunakan nopeglokasi dan password
  • Lokasi dapat melihat nilai detail siswa di setiap mata pelajaran
  • Lokasi mengelola data kelas di masing-masing mereka

Superadmin :

  • Superadmin melakukan login kedalam sistem seperti kedua user diatas
  • Mengelola data induk siswa
  • Mengelola data pengajar
  • Mengelola data lokasi cabang
  • Mengelola master data pendukung : seperti data kelas, data mapel, data pertemuan dll.

Tahapan selanjutnya instal XAMPP pada komputer kamu, instal codeigniter dan konfigurasi codeigniter kamu dengan benar. Silahkan baca pada artikel berikut ini

Membuat Sistem Informasi Akademik Kampus #Bagian 2 Konfigurasi Codeigniter

Instal visual studio code dan git bash. Jangan lupa untuk membuat sebuah akun bitbucket jika kamu belum mempunyainya. Bitbucket adalah pilihan terbaik setelah github. Gunanya untuk menyimpan repository kode yang kamu buat agar tertata dengan rapih. Jika suatu saat kamu membutuhkannya kembali, maka hanya tinggal melakukan cloning ke dalam server lokal komputer kamu.

Buat database dengan nama db_initekno dan buat tabel baru dengan nama trx_user. Maka rancangan tabelnya akan terlihat seperti ini :

Sekarang silahkan instal git, untuk tutorialnya silahkan baca disini:

Belajar Version Control System Adalah Jutsu Wajib Programer Milenial #Bagian1

Kemudian buat juga akun bitbucket dan tambahkan repository baru dengan nama initekno karena kita akan membuat proyek website dengan nama initekno. Untuk tutorial membuat akun bitbucket ada di bawah ini :

Belajar Version Control System Adalah Jutsu Wajib Programer Milenial #Bagian2

Sekarang peralatan sudah siap semua. Buka visual studio code yang sudah kamu instal sebelumnya dan buka project website melalui file exspoler windows. Buka direktori C:\xampp\htdocs klik kanan pada project ini tekno.

Ketik kan code . pada terminal git bash. maka nanti akan muncul visual studio code sesuai direktori dari nama website kamu. Manfaatnya adalah kamu tidak udah repot repot ketika akan melakukan commit dan push pada vscode karena fiturnya sudah di sediakan.

Pastikan kamu melakukan konfigurasi git dengan cara memasukkan email dan nama user pada bitbucket agar nantinya akan langsung sinkron dengan file lokal di komputer kamu. untuk tutorialnya ada link diatas, yaitu belajar version control sistem.

Pastikan langkah diatas sudah kamu ikuti semua, dalam langkah ini pastikan kamu sudah melakukan konfigurasi codeigniter dengan benar sesuai panduan diatas.  Sekarang buka folder controller dan buat file baru bernama auth.php ketikkan kode berikut ini :

dari code controller auth.php diatas jika login berhasil maka akan langsung direct ke halaman dashboard, maka buat controller satu lagi dengan nama dashboard.php

Buat model baru pada folder model, beri nama dengan usermodel.php dan tuliskan kode seperti berikut ini:

Selanjutnya kita akan membuat viewnya.

Buat file baru dan simpan pada folder views, dan beri nama dengan authview.php

Setelah selesai membuat controller, model dan view. maka selanjutnya kita akan membagi akses user yang sessionnya sudah kita buat. Maka dari itu kita akan membaginya dalam view dashboardview.php

Untuk logika pembagian akses setiap user kurang lebih seperti berikut ini:

jika kita terapkan pada studi kasus diatas maka kode lengkapnya akan menjadi seperti berikut ini:

Terakhir buat sebuah controller baru dan beri nama dashboard.php tulis kode seperti berikut ini:

dan selesai.. mungkin artikelnya terlalu panjang, tapi silahkan coba kamu jalankan seluruh rangkaian skrip seperti yang sudah saya jelaskan diatas.hasilnya kurang lebih akan seperti berikut ini jika kita login dengan superadmin

Sekarang silahkan login menggunakan user akses pengajar dan lokasi cabang. Maka kamu akan menemui bahwa menu akan berbeda di setiap levelnya aksesnya. Jika kamu amati dari struktur kode dashboard.php, disitu ada kode yang harus kamu terapkan di seluruh controller yang memerlukan login user. fungsinya tentu adalah agar tidak sembarangan orang dapat mengakses fitur inti web kamu. kode tersebut adalah seperti berikut :

Jika kamu bingung dan menemui error silahkan tinggalkan komentar dibawah ini. atau bisa kontek saya di email saefulmujab.nf@gmail.com, semoga dapat bermanfaat untuk kamu.

Artikel selanjutnya yaitu :

# Menyimpan kode kedalam repository server dengan bitbucket

# Membuat modul CRUD pengajar untuk input nilai siswa kedalam sistem.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *