1.

PRA - PERSIAPAN
Silahkan klik link playlist video ini
https://www.youtube.com/watch?v=8ROgaHfLRq0&list=PLFIM0718LjIXU8ul9FiN-
owk04cQKtHPw. Tonton video nya sampai ke 5 atau ikuti modul ini

2. PERSIAPAN
a. Codeigniter
https://www.codeigniter.com

b. Bootstrap
https://www.getbootstrap.com

c. SBAdmin
https://www.startbootstrap.com/themes/sb-admin-2

d. Font Awesome
https://www.fontawesome.com

e. Langkah – Langkah
1. Extract File Codeigniter.zip nya didalam folder htdocs, dan beri nama wpu-login
2. Buat 2 folder baru bernama assets dan vendor
3. Extract File SBAdmin kedalam folder vendor yang baru saja tadi dibuat, lalu rename folder
Sbadmin nya menjadi SBAdmin2

4. Setelah itu lakukan konfigurasi awal pada codeigniter nya seperti base_url, libraries,
database dll (lihat di modul – modul sebelumnnya)
5. Buat 1 controller baru bernama Auth.php yang berisi seperti ini
6. Buka folder views lalu buat 1 folder dengan nama auth dan didalam nya buat 1 file baru
bernama login.php
7. Buka vendor/SBAdmin2/login.html, copy semua isi nya dan paste kedalam
views/auth/login.php
8. Setelah itu copy juga folder css, img, js dan vendor yang ada di SBAdmin2 kedalam folder
assets

9. Buka kembali login.php, tulis <?= base_url(‘assets/’); ?> pada semua href tag link dan src
pada tag script
10. Dan buat lah tampilan login nya kurang lebih hingga seperti ini
11. Masuk ke controllers/Auth dan sesuaikan seperti pada gambar berikut (ini bertujuan untuk
membuat html kita modular dengan cara memisahkan file auth_header dan auth_footer nya)
12. Buka folder views dan buat folder dengan nama templates yang berisi file auth_footer.php
dan auth_header.php sehingga struktur folder pada views nya seperti berikut

13. Setelah itu buka file views/auth/login.php, block bagian akhir seperti pada gambar dibawah
ini dan cut and paste ke dalam file auth_footer.php
14. Buka kembali file views/auth/login.php, block bagian awal seperti pada gambar dibawah
ini dan cut and paste ke dalam file auth_header.php
15. Masuk ke controllers/Auth tambahkan 1 method baru yaitu registration dan 1 file baru pada
views/auth/registration.php seperti pada gambar berikut

16. Buka vendor/SBAdmin2/register.html, copy semua isi nya dan paste kedalam
views/auth/registration.php
17. Selanjutnya block dan hapus bagian atas sampai ke baris 23 dan footer nya atau seperti
pada gambar berikut
18. Untuk mengakses nya kita bisa ke localhost/wpu-login/auth/registration dan ubah
tampilannya hingga seperti ini
 3. User Registration
Sebelum masuk ke registrasi & login siapkan dahulu database nya dengan nama wpu_login,
lalu buat tabel dengan nama user yang beratribut id, name, email, image, password, role_id, is_active
dan date_created seperti gambar dibawah ini

Buat juga tabel dengan nama user_role yang beratribut id dan role seperti gambar dibawah ini

Lalu isi data pada tabel user_role hingga seperti berikut

f. Registrasi
Buka views/registration cari bagian form dan tambahkan method=”post” dan action=”<?=
base_url(‘auth/registration’); ?>”
Pastikan juga tombol register account nya bertipe submit

Buka Buka controllers/Auth.php, ubah seperti gambar berikut

, ubah seperti gambar berikut

Buka views/templates/auth_header.php, cari tag title dan ubah isinya seperti gambar berikut
 Balik lagi ke controllers/Auth.php, sekarang kita akan membuat validasi registrasi nya , yang
kita lakukan adalah memuat library form_validation nya di konstruktor controller Auth nya seperti
gambar berikut

Setelah itu tambahkan pengkondisian validasinya pada method registration seperti berikut

Lalu sebelum pengkondisan if tambahkan rules form validation nya seperti berikut
 Untuk menampilkan form error nya , buka kembali view/auth/registration.php dan tambahkan
kode <?= form_error(‘name’, ‘<small class=”text-danger pl-3”>’,’</small>’); ?> dibawah input name
dan <?= form_error(‘email’, ‘<small class=”text-danger pl-3”>’,’</small>’); ?> dibawah input email
seperti gambar berikut

Jangan lupa tambahkan juga form_error nya untuk inputan password1 dan password2. Lalu
lihat hasilnya
Sampai sini ada yang masih kurang yaitu inputan name atau email yang telah diinput lalu klik
tombol register maka inputan name atau email nya akan hilang , untuk mengatasi itu tambahkan kode
value=”<?= set_value(‘name’); ?>” pada input name dan value=”<?= set_value(‘email’); ?>” pada
input email seperti gambar berikut
 Selanjutnya kembali lagi controllers/Auth.php dan perbaiki rules form validationnya seperti ini

Lalu pada kondisi else ubah seperti berikut

}else{
$data = [
'name' => htmlspecialchars($this->input->post('name', true)),
'email' => htmlspecialchars($this->input->post('email', true)),
'image' => 'default.jpg',
'email' => password_hash(htmlspecialchars($this->input-
>post('password1')), PASSWORD_DEFAULT),
'role_id' => 2,
'is_active' => 1,
'date_created' => time(),
];

$this->db->insert('user', $data);
 $this->session->set_flashdata('message', '<div class="alert alert-
success" role="alert">Congratulation! your account has been created. Please Login</div>')
redirect('auth');
}
Lalu method index ubah seperti ini

Buka views/auth/login.php dan tambahkan kode flash data untuk menampilkan pesannya

Jangan lupa koneksikan aplikasi ci dengan database, buka config/database.php dan

sesuaikan hostname, username, password dan database kalian masing - masing
 Lalu buka juga config/autoload.php dan tambahkan ‘database’ seperti gambar berikut

Lakukan registrasi, jika berhasil coba cek di phpmyadmin maka di tabel user
seharusnya akan ada data baru seperti berikut
g. Login
Untuk membuat login sebetulnya cukup sederhana yang akan dilakukan antara lain:
1. Validasi inputannya
2. Lalu cek apakah ada user yang sudah terdaftar di database , jika ada cek passwordnya sesuai
atay tidak
Buka file controllers/Auth.php lalu set rules dan kasih kondisi pada method index nya hingga
seperti ini
 Buka file views/auth/login.php

Buka file controllers/Auth.php lalu set rules dan kasih kondisi else pada method index
menjadi seperti ini.
Membuat method login pada controller Auth yang methodnya private

Lalu buat fungsi login dibawahnya, seperti ini:

Lalu ambil data user lalu kita query builder CodeIgniter seperti ini:
 Lalu buat pengkondisisan seperti ini, jika usernya belum terdaftar:

Lalu dicek dengan cara memasukkan email yang belum terdaftar dan password bebas, lalu
klik login.

Jika sudah kita buat pengkondisian bila user sudah terdaftar, seperti ini:
Jika kita kebetulan kita membuat user tersebut aktif maka masuk ke database lalu kita non-aktifkan
user yang sedang aktif dengan cara seperti ini:

Setelah itu dicek kembali misalkan:

Klik login, lalu seperti ini:

Setelah berhasil kembali ke database lalu diubah kembali menjadi 1.

Lalu kita buat pengkondisian untuk mengecek apakah password benar atau salah.

Karena jika password benar diarahkan ke halaman user, sedangkan belum mempunyai halaman user
maka dibuat terlebih dahulu controller dengan cara controller -> new file -> User.php. Jika sudah
ketikkan script seperti ini.
Lalu kita cek apakah bisa masuk atau tidak.

Lalu klik Login.

Jika sudah kembali ke controller User lalu ambil data dari session.

Setelah itu kita refresh kembali apakah datanya sudah diganti atau belum.
Jika sudah selesai , kembali lagi ke controller Auth.php dan kita tambahkan fungsi Logout.

Untuk mengeceknya kita ubah terlebihi dahulu url-nya lalu enter, dikarenakan belum mempunyai
tombol untuk logout.

Lalu kembali ke halaman Login, seperti ini:

 4.User & Admin Page

Sebelumnya kita buka terlebih dahulu controller User lalu kita perbaiki menjadi seperti ini:

Lalu kita cek dengan cara masuk ke halaman login, diisi email dan password maka hasilnya seperti
ini:

Tampilan masih error dikarenakan belum ada halaman index.

Untuk tahap selajutnya kita buat halaman index dengan cara buka folder vendor->blank.html berupa
tampilan seperti ini:

Lalu buka file blank.html dengan cara seperti ini:

Setelah terbuka di browser maka tampilan akan seperti ini:

Jika belum install ekstension maka dapat dijalankan dengan cara seperti ini:

Jika sudah maka copy semua kodingan dari blank.html lalu buat view di folder views dengan cara
folder views -> new folder - > user -> new file -> index.php
Jika sudah kodingan yang tadi di copy, kita paste d index.php

Setelah di save lalu kita refresh kembali, dan muncul tampilan seperti ini:

Tampilan seperti diatas masih polos hanya ada tulisan, dikarenakan css dan javascript belum
terpanggil. Unutk selanjutnya kita perbaiki kodinganya untuk memanggil css dan javascript.
Untuk memanggil css dan javascript seperti ini:

Jika sudah save lalu refresh, dan tampilan menjadi seperti ini:
Ada beberapa tampilan yang perlu diubah , untuk mengubahnya lakukan tahapan seperti berikut:
1. Ubah title yang diambil dari controller

2. Ubah image dan nama websitenya. Karena untuk mengubah image kita membutuhkan font
awesome maka sebelumnya kita download terlebih dahulu file imagenya dengan cara buka
browser -> ketik fontawesome -> klik title Font Awesome -> Start Using Free -> Klik icon ->
Filter free -> lalu cari image yang akan digunakan, misalkan code -> klik gambar ->

Jika sudah copy <i class = “fas fa-code”></i> lalu paste seperti gambar berikut

3. Jika sudah kita refresh kembali untuk memastikan image dan judul web sudah diubah.
4. Jika sudah mulai sudah mulai untuk mengubah di bagian sidebar untuk admin, untuk tahapannya
seperti dibawah ini:

5. Lalu refresh kembali

6. Jika sudah maka tahap selanjutnya kita akan membuat halaman untuk user.

7. Refresh kembali
8. Kita ubah icon untuk user, caranya sama seperi mengganti image pada poin 2.

9. Ubah bagian topbar, karena untuk bagian search, notifikasi tidak dibutuhkan maka dihapus, dan
menjadi seperti ini.

10. Jika sudah maka kita ubah nama yang kita ambil dari controller user, seperti ini:

Lalu tambahkan $data pada controller User

11. Karena di phpmyadmin sudah mengisi gambar default, jika belum memiliki gambar silahkan
membuat folder image seperti ini.

Untuk penamaanya samakan yang ada di database.

12. Jika sudah ubah kode seperti dibawah ini.

13. Jika sudah refresh kembali.

14. Lalu ubah beberapa di dropdown, dan yang tidak terpakai seperti setting dan Activity Log bisa
dihapus.

Lalu copy base_url dan paste seperti dibawah ini:

15. Jika sudah refresh kembali untuk mengecek fungsi logout.

Lalu ada pop-up, dan klik Logout

Lalu berhasil Logout.

16. Untuk tahap selanjutnya kita tambahkan fungsi logout di sidebar agar user dapat memilih untuk
logout dari menu user atau sidebar.

Lalu refresh kembali

Sudah terdapat 2 Logout

17. Lalu masuk ke halaman utama, ubah title pada page heading

Lalu buka browser -> Bootstrap -> pilih Documentation -> lalu cari card -> lalu cari Horizontal -
> lalu klik -> lalu copy.
 Setelah itu paste tepat dibawah title

18. Refresh kembali, dan tampilan menjadi seperti dibawah ini.

19. Foto pada card title masi belum ada, jadi kita mengubah foto dengan cara seperti berikut.
 Lalu tampilan menjadi seperti berikut, gambar telah diubah.

20. Selanjutnya mengubah title.

21. Refresh kembali, dan tampilan seperti ini.

22. Lalu lanjut ke bagian footer.

 Refresh kembali dan tampilan footer menjadi seperti berikut.

23. Untuk halaman user sudah selesai, maka lanjut ke tahap berikutnya. Selanjutnya yaitu cut script
index.php dari paling atas sampai page wrapper.

Script tersebut akan disimpan kedalam folder views lalu kita membuat file baru didalam folder
templates lalu diberi nama header.php

24. Jika sudah membuat file header.php, langkah selanjutnya script yang tadi di cut lalu di paste
didalam file header.php

25. Jika header sudah maka langakah selanjutnya kita copy bagian sidebar. Caranya yaitu membuat
file sidebar.php didalam folder templates.
- Cut script sidebar dari awal sampai akhir sidebar
 - Lalu paste kedalam file sidebar.php

26. Selanjutnya topbar caranya buat file dengan nama topbar.php, lalu cut script dari awal topbar
sampai akhir topbar.

Jika sudah lalu paste kedalam file topbar.php

27. Yang terakhir bagian footer, caranya buat filefooter.php didalam folder templates. Lalu cut script
dari awal footer sampai akhir footer.

Jika sudah paste kedalam file footer.php

28. Jika sudah jangan lupa file index.php di save.
29. Lalu kembali ke controller User. Ubah beberapa script seperti berikut.
 Lalu save, dan refresh kembali maka halaman menjadi seperti ini.

30. Jika sudah, maka langkah selanjutnya yaitu membuat controller untuk admin. Agar dapat
membedakan jika login sebagai admin tampilan seperti apa dadn sebagai user tampilan seperti
apa.
31. Caranya buka folder controller lalu buat file baru dengan nama Admin.php. lalu ketikkan script
seperti dibawah ini.

32. Jika sudah ubah url apakah sudah berfungsi atau belum.

Error dikarenakan belum membuat view untuk admin.

33. Jadi langkah selanjutnya kita ke folder views, lalu buat folder yang diberi nama admin dan
didalam folder admin buat file baru dengan nama index.php. untuk isi file bisa copy dari file
User.php dari awal sampai akhir. Namun ada beberapa yang diubah yaitu card, karena kita tidak
membutuhkan card, maka jadi seperti ini.

Jika sudah maka refresh kembali.

34. Maka tampilan menjadi seperti ini

Karena ketika login sebagai admin, namun tampilan untuk user. Maka kita ubah di bagian Login
untuk mengubah role apakah login sebagai admin atau user.
35. Caranya kembali ke Auth.php dan cari method Login, dan menambahkan pengkondisian seperti
berikut.

36. Jika sudah refresh kembali, lalu logout dan login kembali sebagai admin, jika berhasil login
sebagai admin maka tampilan menjadi seperti berikut.

37. Lalu logout kembali dan login sebagai user, jika berhasil maka tampilan menjadi seperti berikut
ini.
“TERIMA KASIH ”