Final Project Pemrograman Berbasis Kerangka Kerja

Radhiyan Muhammad Hisan

5025211166

Pemrograman Berbasis Kerangka Kerja B

 

 

Rancangan Aplikasi Login dengan Multiple Authentication untuk Website Menggunakan Framework CodeIgniter

Deskripsi Studi Kasus

Semakin banyaknya layanan aplikasi atau perangkat lunak yang meminta penggunanya untuk terdaftar dan masuk (signed up & logged in) di situs tersebut, semakin banyak pula akun yang harus dibuat oleh pengguna. Tentunya hal ini dapat sangat merepotkan, harus membuat dan mengingat-ingat informasi akun tersebut, baik nama pengguna, kata sandi, juga untuk layanan yang mana akun tersebut digunakan.

Oleh karena itu, akan sangat membantu dan praktis jika kita membuat situs kita dapat menggunakan akun yang terdaftar di situs lain. Yaitu dengan mengimplementasikan login dengan multiple authentication. Dalam Final Project ini akan dijelaskan bagaimana perancangan aplikasi login dengan multiple authentication menggunakan framework CodeIgniter (CI).

Dari sisi Model-View-Controller (MVC), studi kasus ini memerlukan controller untuk mengelola data pengguna. Kemudian di controller itulah model yang berisi konfigurasi yang berkaitan dengan tabel dan basis data dimanfaatkan sedemikian rupa untuk memberi data yang akan diterima oleh view.

Referensi

Rancangan Aplikasi Login dengan Multiple Authentication di Situs PPET Menggunakan Framework YII

Rancangan Umum Arsitektur

Desain Basis Data

Karena dalam sistem ini data yang perlu dikelola hanya data pengguna, maka basis data hanya memiliki 1 tabel yaitu tabel pengguna yang diberi nama pbkk_pengguna. Tabel memiliki 7 kolom:

1. id_oauth untuk menyimpan id jika pengguna masuk dengan akun Google
2. nama_pengguna untuk menyimpan nama pengguna
3. sandi untuk menyimpan kata sandi
4. surel untuk menyimpan surel dari akun yang dipakai
5. created_at untuk mencatat kapan akun tersebut ditambahkan ke sistem
6. updated_at untuk mencatat kapan akun tersebut terakhir diperbarui
7. deleted_at untuk mencatat kapan akun tersebut dihapus dari sistem

Conceptual Data Model (CDM)

Physical Data Model (PDM)

Desain Front-end

Laman selamat datang

Laman login

 

Logika Kontrol Back-end

 Perutean

Mode login dengan Google

Setelah pengguna memilih untuk masuk dengan Google, akan dilakukan pengecekan token. Jika token tidak error, sistem mengambil data akun Google tersebut lalu menyimpannya ke basis data.

Mode login dengan nama pengguna

Setelah menerima input pengguna, sistem akan mengecek rekord basis data dengan nama_pengguna sesuai. Jika tidak ada, data pengguna baru akan ditambahkan. Jika ada, dicek kembali apakah sandi sesuai. Jika sesuai, maka bisa masuk. Jika tidak sesuai, pengguna akan dianggap mencoba menerobos masuk.

Isi basis data

Implementasi Rancangan

Mode login dengan Google

Untuk membuat sistem yang bisa dimasuki menggunakan akun dari situs lain, dalam FP ini adalah akun Google, kita harus menggunakan API dari Google Developer Console. Langkah-langkahnya adalah:

1. Masuk ke Google Developer Console dan membuat proyek baru
2. Pergi ke APIs and services > OAuth consent screen. Pilih external lalu Submit
3. Isikan isian-isian yang disediakan sampai dengan section terakhir (terdapat 4 section)
4. Buat kredensial di APIs and services > Credentials. Pilih di bagian OAuth client ID 
5. Tambahkan Authorised redirect URIs lalu tekan Create

Selain itu kita juga perlu menginstal library tambahan untuk melakukan autentikasi menggunakan akun Google. Instalasi dapat dilakukan di composer dengan mengetikkan perintah composer require google/apiclient:^2.7 di terminal.

Setelah jadi, akan terlihat seperti ini:

Mode login dengan nama pengguna

Perhatikan isian! Dengan nama pengguna yang sama, akan digunakan kata sandi yang berbeda. Dengan begitu, view yang akan tampil juga berbeda.

Tautan

Video demo

File dapat diunduh di sini