Tutorial Codeigniter 3 – Membuat Halaman Login: Bagian 2 – Membuat Controller dan View Halaman Statis

Pada tutorial Bagian 2 ini, Anda akan membuat dua halaman utama:

1. Controller dan View halaman Login, di halaman ini akan ada form login
2. 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:

1. File hasil akhir Tutorial Bagian 1, silakan download di: https://drive.google.com/file/d/0B5BhV6c89_2YYU5wS3ZHaDUweEU/view?usp=sharing
2. 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

1. Buat file PHP baru dalam folder login/application/controllers
2. Simpan dengan nama Login.php (ingat, huruf pertama harus besar. Ini aturan Codeigniter)

   

3. Lalu buka file Login.php tersebut, hapus kode yang ada jika ada
4. Lalu ketik kode ini:

   

5. 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.

1. Buat file PHP baru di folder login/application/views
2. Simpan dengan nama login_view.php
   

   

3. Hapus seluruh kode di dalamnya jika ada
4. Kemudian buka file login.html yang ada di folder login/assets
5. Copy seluruh kode dalam file login.html tersebut
6. Lalu Paste ke dalam file login_view.php
7. Kemudian lakukan perubahan sebagai berikut:
   1. Pada bagian link icon, ubah menjadi href=”<?php echo base_url() ?>assets/images/icon-javawebmedia.png”
   2. Pada bagian <title>, ubah menjadi <title><?php echo $title ?></title>
   3. Pada baian link CSS, ubah menjadi href=”<?php echo base_url() ?>assets/css/style.css”
   4. Pada bagian action form, ubah menjadi action=”<?php echo base_url(‘login’) ?>”
      

      

8. 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.

1. Buat file-file PHP ini di dalam folder application/views/layout
   1. head.php, berisi data informasi title, css dan icon
   2. header.php, berisi informasi header dan navigasi menu
   3. konten.php, berisi informasi halaman yang akan diakses
   4. footer.php, beris data informasi footer website
   5. wrapper.php, berfungsi untuk menggabungkan file-file layout
2. Buka file-file tersebut, lalu hapus kode-kode yang ada jika ada sehingga menjadi kosong

Menyiapkan file head.php

1. 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)
2. Buka file head.php dalam foler login/application/views/layout
3. Lalu Copy kode baris ke-1 sampai ke-11 yang ada di file index.html
4. Lalu Paste di file head.php
5. Kemudian lakukan perubahan sehingga menjadi seperti gambar di bawah ini:

   

6. Simpan file

Menyiapkan file header.php

1. Buka file index.html di folder login/assets
2. Buka file header.php di folder application/views/layout
3. Copy kode baris ke-12 sampai ke-25 di file index.html
4. Lalu Paste di file header.php
5. Kemudian lakukan perubahan sehingga seperti gambar di bawah ini:

   

6. Simpan file

Menyiapkan file footer.php

1. Buka file index.html di folder login/assets
2. Buka file footer.php di folder application/views/layout
3. Copy kode baris ke-26 sampai ke-32 di file index.html
4. Lalu Paste di file footer.php
   

   

5. Simpan file

Menyiapkan file konten.php

1. Buka file konten.php di folder login/application/views/layout
2. Hapus semua kode yang ada (jika ada)
3. Lalu ketik kode ini:

   

4. Simpan file

Menyiapkan file wrapper.php

1. Buka file wrapper.php di folder login/application/views/layout
2. Hapus semua kode yang ada (jika ada)
3. Lalu ketik kode ini:

   

4. Simpan file

Membuat view dasbor_view.php

File dasbor_view.php akan berisi file utama tampilan dasbor.

1. Buat file PHP baru di folder login/application/views
2. Simpan dengan nama dasbor_view.php
3. Hapus semua kode yang ada (jika ada)
4. Lalu ketik kode di bawah ini

   

   

5. 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.

1. Buat file PHP baru di folder login/application/controllers
2. Simpan dengan nama Dasbor.php (huruf pertama besar/capital)

   

3. Buka file tersebut lalu hapus semua kode yang ada (jika ada)
4. Lalu ketik kode ini:

   

5. 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.

1. Buka file routes.php di folder application/config
2. Lalu ubah kode yang semula: $route[‘default_controller’] = ‘welcome’;
3. 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.