Pada tutorial Bagian 2 ini, Anda akan membuat dua halaman utama:
- Controller dan View halaman Login, di halaman ini akan ada form login
- Controller dan View halaman Dasbor, ini adalah halaman yang akan diproteksi dengan username dan password dan nantinya hanya akan dapat diakses jika sudah melakukan login dengan benar.
Langkah Persiapan
Sebelum tutorial ini dimulai, Anda harus mendownload:
- File hasil akhir Tutorial Bagian 1, silakan download di: https://drive.google.com/file/d/0B5BhV6c89_2YYU5wS3ZHaDUweEU/view?usp=sharing
- Membaca tutorial Tutorial Codeigniter 3 – Membuat Halaman Login: Bagian 1 – Installasi dan Konfigurasi Awal Codeigniter 3
Anda dapat mendownload hasil akhir dari tutorial Bagian 2 ini di: https://drive.google.com/file/d/0B5BhV6c89_2YNFEwSzBnaGEwM2c/view?usp=sharing.
Membuat Controller Login.php
- Buat file PHP baru dalam folder login/application/controllers
- Simpan dengan nama Login.php (ingat, huruf pertama harus besar. Ini aturan Codeigniter)
- Lalu buka file Login.php tersebut, hapus kode yang ada jika ada
- Lalu ketik kode ini:
- Simpan file tersebut
Membuat view login_view.php
Secara default, tutorial ini telah memberikan desain halaman login yang dapat diakses di http://localhost/login/assets/login.html. Anda dapat meng-copy kode dasarnya dari file login.html yang ada dalam folder assets tersebut.
- Buat file PHP baru di folder login/application/views
- Simpan dengan nama login_view.php
- Hapus seluruh kode di dalamnya jika ada
- Kemudian buka file login.html yang ada di folder login/assets
- Copy seluruh kode dalam file login.html tersebut
- Lalu Paste ke dalam file login_view.php
- Kemudian lakukan perubahan sebagai berikut:
- Pada bagian link icon, ubah menjadi href=”<?php echo base_url() ?>assets/images/icon-javawebmedia.png”
- Pada bagian <title>, ubah menjadi <title><?php echo $title ?></title>
- Pada baian link CSS, ubah menjadi href=”<?php echo base_url() ?>assets/css/style.css”
- Pada bagian action form, ubah menjadi action=”<?php echo base_url(‘login’) ?>”
- Simpan file tersebut
Melakukan uji coba halaman login
Buka browser Anda lalu akses http://localhost/login/login. Lihat hasilnya akan seperti gambar di bawah ini:
Membuat template untuk halaman yang diproteksi
Sebenarnya kita bisa saja membuat halaman admin dengan cara yang mirip dalam membuat halaman login. Namun dalam tutorial ini, halaman yang diproteksi akan dibuat dengan konsep template dimana masing-masing bagian halaman akan dipotong-potong misalnya menjadi head, header, nav, konten, footer dan sebagainya.
Membuat folder layout
Buat folder baru dengan nama layout di dalam folder login/application/views. Folder ini akan digunakan untuk menyimpan file-file template.
Menyiapkan file-file template
File-file template akan berisi potongan-potongan kode dari keseluruhan halaman yang akan menjadi satu tampilan.
- Buat file-file PHP ini di dalam folder application/views/layout
- head.php, berisi data informasi title, css dan icon
- header.php, berisi informasi header dan navigasi menu
- konten.php, berisi informasi halaman yang akan diakses
- footer.php, beris data informasi footer website
- wrapper.php, berfungsi untuk menggabungkan file-file layout
- Buka file-file tersebut, lalu hapus kode-kode yang ada jika ada sehingga menjadi kosong
Menyiapkan file head.php
- Buka file index.html dalam folder login/assets (pastikan Anda tidak melakukan perubahan sama sekali pada file index.html ini karena akan menjadi acuan dasar baris kode)
- Buka file head.php dalam foler login/application/views/layout
- Lalu Copy kode baris ke-1 sampai ke-11 yang ada di file index.html
- Lalu Paste di file head.php
- Kemudian lakukan perubahan sehingga menjadi seperti gambar di bawah ini:
- Simpan file
Menyiapkan file header.php
- Buka file index.html di folder login/assets
- Buka file header.php di folder application/views/layout
- Copy kode baris ke-12 sampai ke-25 di file index.html
- Lalu Paste di file header.php
- Kemudian lakukan perubahan sehingga seperti gambar di bawah ini:
- Simpan file
Menyiapkan file footer.php
- Buka file index.html di folder login/assets
- Buka file footer.php di folder application/views/layout
- Copy kode baris ke-26 sampai ke-32 di file index.html
- Lalu Paste di file footer.php
- Simpan file
Menyiapkan file konten.php
- Buka file konten.php di folder login/application/views/layout
- Hapus semua kode yang ada (jika ada)
- Lalu ketik kode ini:
- Simpan file
Menyiapkan file wrapper.php
- Buka file wrapper.php di folder login/application/views/layout
- Hapus semua kode yang ada (jika ada)
- Lalu ketik kode ini:
- Simpan file
Membuat view dasbor_view.php
File dasbor_view.php akan berisi file utama tampilan dasbor.
- Buat file PHP baru di folder login/application/views
- Simpan dengan nama dasbor_view.php
- Hapus semua kode yang ada (jika ada)
- Lalu ketik kode di bawah ini
- Simpan file
Membuat controller Dasbor.php
Controller Dasbor.php akan berisi fungsi untuk menampilkan halaman dasbor. Halaman ini nantinya hanya dapat diakses jika sudah login.
- Buat file PHP baru di folder login/application/controllers
- Simpan dengan nama Dasbor.php (huruf pertama besar/capital)
- Buka file tersebut lalu hapus semua kode yang ada (jika ada)
- Lalu ketik kode ini:
- Simpan file
Melakukan pengetesan
Anda dapat mengetes halaman Dasbor dengan mengakses http://localhost/login/dasbor. Lihat hasilnya di gambar berikut ini:
Mengubah Route Utama
Secara default Codeigniter mengalihkan halaman utama website ke controller Welcome. Nah kita dapat mengubahnya sehingga ketika diakses maka yang muncul adalah halaman Dasbor.
- Buka file routes.php di folder application/config
- Lalu ubah kode yang semula: $route[‘default_controller’] = ‘welcome’;
- Menjadi kode ini: $route[‘default_controller’] = ‘dasbor’;
Untuk mengetes apakan routes sudah benar apa belum, cobalah akses http://localhost/login dan http://localhost/login/dasbor. Pastikan tampilan keduanya sama.
Mendownload hasil akhir
Anda dapat mendownload hasil akhir dari tutorial Bagian 2 ini di: https://drive.google.com/file/d/0B5BhV6c89_2YNFEwSzBnaGEwM2c/view?usp=sharing.
Materi lebih mendalam dapat Anda ikuti dengan mengikuti kursus di Java Web Media (www.javawebmedia.com) atau menghubungi kami melalui 0857-1510-0485.
Kang, sudah sampai pada tahap pengetesan dasrbor, Ini kenapa dasbor_view nya tidak kepanggil?
http://i.imgur.com/wHBIs13.jpg
kang , ini login ndak connect ke database sama sekali yaa
Kang saya mau nanya, saya sudah sampai tahap uji coba tampilan lpgin, tapi ga sama hasilnya kya yang tampilan login diatas, kenapa yaa mas, Terima kasih
Hello there! This blog post couldn’t be written any better! Looking through this post reminds me of my previous roommate! He constantly kept preaching about this. I’ll forward this post to him. Pretty sure he’s going to have a great read. Thanks for sharing!
mantap mass tutorial nya
Makasihh banyak tutorialnya mas. Keren!!
Great post.
Very good article. I’m experiencing some of these issues as well..
Dropping on Oct.
Terimkasih mas, sebelumnya artikelnya sangat membantu.
saya ingin bertanya,
yang di controller Dasbor.php nya, yang array “isi” itu jika kita ingin load halaman user misalnya, berarti kita buat function baru ya di situ dengan menambahkan isi = user_view (misalnya).
mohon penjelasannya mas,
file dasbor_view.php harusnya ada di folder views bukan di folder layout