Tutorial Codeigniter 3 – Membuat

Halaman Login: Bagian 1 – Installasi dan

Konfigurasi Awal Codeigniter
Tutorial Codeigniter – Halaman Login

Pada tutorial kali ini, Anda akan belajar menggunakan framework Codeigniter 3 untuk
membuat:

 Halaman login
 Halaman yang diproteksi
 Halaman Logout dan
 Manajemen user

Hasil akhir dari tutorial Bagian 1 ini dapat Anda download

di: https://drive.google.com/file/d/0B5BhV6c89_2YYU5wS3ZHaDUweEU/view?
usp=sharing

Langkah Persiapan

Sebelum tutorial ini dimulai, Anda harus mendownload:

1. File atau folder assets untuk latihan. Silakan download

di: https://drive.google.com/file/d/0B5BhV6c89_2YR0ZqenZRU2NaYjg/view?
usp=sharing
2. Framework Codeigniter 3, silakan download di www.codeigniter.com

Tutorial dalam web ini menggunakan XAMPP sebagai aplikasi web server. Pastikan seluruh
XAMPP (Apache, MySQL dan PHPMyAdmin) berjalan dengan baik. Anda akan
membutuhkan Code Editor misalnya Notepad++, Netbeans dsb. Dalam tutorial ini digunakan
Dreamweaver CS6 sebagai aplikasi Code Editor-nya.

Konfigurasi webroot

Langkah selanjutnya adalah menggabungkan file atau folder assets dan framework
Codeigniter 3 yang telah didownload.

Konfigurasi Webroot Codeigniter

Berikut langkah-langkahnya:

1. Buka folder htdocs di dalam folder xampp Anda

2. Buat folder baru dengan nama login, lalu buka folder login tersebut
3. Lalu extract file assets yang telah didownload
 4. Kemudian extract juga framework Code Igniter yang telah didownload

Lalu lakukan pengetesan folder assets dengan mengakses http://localhost/login/assets dan

untuk mengakses folder/webroot utama dengan mengakses http://localhost/login. Pastikan
hasilnya seperti gambar di bawah ini:
Testing Assets Codeigniter – Java Web Media Depok
Konfigurasi Codeigniter 3

Konfigurasi config.php

Langkah selanjutnya adalah konfigurasi beberapa file Codeigniter.

1. Pastikan Anda telah mengakses folder login

2. Buka file config.php dalam folder application/config
3. Lalu pada opsi $config[‘base_url’] = ”; ubah menjadi kode ini $config[‘base_url’] =
‘http://localhost/login’;
4. Simpan kembali file tersebut
 Login Codeingiter

Konfigurasi autoload.php

Selanjutnya adalah konfigurasi file autoload.php. Berikut langkah-langkahnya:

1. Buka file autoload.php dalam folder application/config

2. Lalu pada opsi $config[‘libraries’] = ”; tambahkan library lain sehingga menjadi
kode ini $autoload[‘libraries’] = array(‘form_validation’,’session’);
3. Lalu pada opsi $autoload[‘helper’] = array();, tambahkan fungsi helper lain
sehingga menjadi $autoload[‘helper’] = array(‘url’,’form’);
4. Simpan kembali file tersebut
 Autoload Codeigniter

Membuat file .htaccess

File .htaccess ini nantinya berfungsi untuk mempercantik URL,

misalnya yang semula http://localhost/login/index.php/home sehingga

menjadi http://localhost/login/home.

Berikut langkah-langkahnya:

1. Buka program Notepad yang Anda miliki

2. Kemudian ketik kode iniRewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* index.php/$0 [PT,L]
3. Lalu simpan, pastikan pada opsi Save as type Anda pilih All files
4. Lalu pada nama file ketik .htaccess (ingat ada titik di depan htaccess)
5. Simpan file tersebut
6. Lalu lakukan pengetesan dengan mengakses http://localhost/login/welcome
(dimana welcome adalah default controller bawaan Code Igniter). Pastikan tidak ada
error

Konfigurasi .htaccess Codeigniter

Alhamdulillah, proses installasi dan konfigurasi Codeigniter untuk belajar membuat halaman
login telah selesai.

Hasil akhir dari tutorial Bagian 1 ini dapat Anda download

di: https://drive.google.com/file/d/0B5BhV6c89_2YYU5wS3ZHaDUweEU/view?
usp=sharing

Kursus Codeigniter?

Bagi Anda yang menginginkan tutorial lebih dalam dan advanced terkait Codeingiter,

Tutorial Codeigniter 3 – Membuat

Halaman Login:
Bagian 2 – Membuat Controller dan View
Halaman Statis

Halaman Dasbor

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)

Membuat Controller Login

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

Controller Login
 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

Membuat tampilan login

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’) ?>”
 Login View Codeigniter

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:
 Halaman Login Administrator

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.

Folder Layout Template

Menyiapkan file-file template

File-file template akan berisi potongan-potongan kode dari keseluruhan halaman yang akan
menjadi satu tampilan.

File-file Layout Codeigniter – Kursus Web Java Web Media

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:
 File head.php Codeigniter

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:

File Header.php Codeigniter

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

 File Footer.php Codeigniter

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:

File Konten.php Codeigniter

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:
 File wrapper.php Codeigniter

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. File dasbor_view.php Codeigniter

File dasbor_view.php Codeigniter

 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)

File Dasbor.php Codeigniter

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

Controller Dasbor Codeigniter

5. Simpan file

Melakukan pengetesan
Anda dapat mengetes halaman Dasbor dengan mengakses http://localhost/login/dasbor.
Lihat hasilnya di gambar berikut ini:

Halaman Dasbor Java Web Media

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’;

 Setting routes.php Codeigniter

Untuk mengetes apakan routes sudah benar apa belum, cobalah

akses http://localhost/login dan http://localhost/login/dasbor. Pastikan tampilan keduanya
sama

Tutorial Codeigniter 3 – Membuat

Halaman Login: Bagian 3 – Membuat
Database User dan Konfigurasinya
Pada tutorial kali ini, Anda akan membuat:

1. Database dan tabel users

2. Konfigurasi database di Codeigniter

Sebelum mengikuti tutorial ini, pastikan Anda telah mengikuti tutorial ini:

1. File hasil akhir Tutorial Bagian 2, silakan download

di:https://drive.google.com/file/d/0B5BhV6c89_2YNFEwSzBnaGEwM2c/view?
usp=sharing.
2. Membaca Tutorial Codeigniter 3 – Membuat Halaman Login: Bagian 1 – Installasi
dan Konfigurasi Awal Codeigniter 3
 3. Membaca Tutorial Codeigniter 3 – Membuat Halaman Login: Bagian 2 – Membuat
Controller dan View Halaman Statis

Hasil akhir tutorial Bagian 3 ini bisa Anda download

di: https://drive.google.com/file/d/0B5BhV6c89_2YYzhhbjVNZDFLZFk/view?usp=sharing.

Membuat database

Pastikan XAMPP (Apache dan MySQL) Anda telah berjalan.

1. Buka browser Anda

2. Lalu akses http://localhost/phpmyadmin
3. Lalu klik menu Database
4. Buat database baru dengan nama ci_login
5. Kemudian klik tombol Create

Database MySQL

6. Tunggu beberapa saat sampai konfirmasi (Database ci_login has been created)
muncul

Membuat tabel users

Tabel users akan berisi data-data user yang nantinya bisa login ke dalam sistem yang akan kita buat.
Berikut spesifikasi tabel user:

Kolom Type Panjang Keterangan

id_user INT 11 Primary Key, Auto_increment
nama VARCHAR 100
email VARCHAR 255
username VARCHAR 32 Unique
password VARCHAR 64
Berikut langkah-langkahnya:

1. Klik database ci_login

2. Lalu buat tabel baru. Pada input Create table name
1. Name: users

2. Number of columns: 5

Membuat tabel Users – Kursus

3. Klik tombol GO
4. Lalu isi data-data berikut
 Database Login dengan
Codeigniter

5. Klik tombol Save

Menambah satu user untuk login

Kita telah berhasil membuat database ci_login dan tabel users.

Langkah selanjutnya adalah menambahkan satu data user untuk contoh login nantinya.

1. Buka database ci_login

2. Lalu klik tabel users

3. Kemudian klik tombol Insert

4. Lalu masukkan data-data nama, email, username dan password

Tabel user untuk login Codeigniter

5. Klik tombol GO

Konfigurasi database di Codeigniter

Langkah selanjutnya adalah melakukan konfigurasi database baik itu koneksi, library dan
helper yang harus diload.

Konfigurasi database.php

1. Buka file database.php di folder login/application/config

 2. Lalu ubah 3 hal ini:
‘username’ => ‘root’,
‘password’ => ”,
‘database’ => ‘ci_login’,
3. Simpan file

Koneksi database Codeigniter

Konfigurasi autoload.php

Konfigurasi di autoload.php ini berfungsi untuk men-load library dan helper yang
dibutuhkan.

1. Buka file autoload.php di folder login/application/config

2. Lalu pada setting $autoload[‘libraries’] = array(‘form_validation’,’session’);,
tambahkan library database sehingga menjadi $autoload[‘libraries’] =
array(‘form_validation’,’session’,’database’);
3. Simpan file

Library Dataase