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: [Link]
usp=sharing
Langkah Persiapan
Sebelum tutorial ini dimulai, Anda harus mendownload:
1. File atau folder assets untuk latihan. Silakan download
di: [Link]
usp=sharing
2. Framework Codeigniter 3, silakan download di [Link]
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 [Link] dan
untuk mengakses folder/webroot utama dengan mengakses [Link] Pastikan
hasilnya seperti gambar di bawah ini:
Testing Assets Codeigniter – Java Web Media Depok
Konfigurasi Codeigniter 3
Konfigurasi [Link]
Langkah selanjutnya adalah konfigurasi beberapa file Codeigniter.
1. Pastikan Anda telah mengakses folder login
2. Buka file [Link] dalam folder application/config
3. Lalu pada opsi $config[‘base_url’] = ”; ubah menjadi kode ini $config[‘base_url’] =
‘[Link]
4. Simpan kembali file tersebut
Login Codeingiter
Konfigurasi [Link]
Selanjutnya adalah konfigurasi file [Link]. Berikut langkah-langkahnya:
1. Buka file [Link] 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 [Link] sehingga
menjadi [Link]
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 .* [Link]/$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 [Link]
(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: [Link]
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: [Link]
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: [Link]
usp=sharing.
Membuat Controller [Link]
1. Buat file PHP baru dalam folder login/application/controllers
2. Simpan dengan nama [Link] (ingat, huruf pertama harus besar. Ini aturan
Codeigniter)
Membuat Controller Login
3. Lalu buka file [Link] 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 [Link] Anda dapat meng-copy kode dasarnya dari
file [Link] 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 [Link] yang ada di folder login/assets
5. Copy seluruh kode dalam file [Link] 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/[Link]”
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/[Link]”
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 [Link] 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. [Link], berisi data informasi title, css dan icon
2. [Link], berisi informasi header dan navigasi menu
3. [Link], berisi informasi halaman yang akan diakses
4. [Link], beris data informasi footer website
5. [Link], berfungsi untuk menggabungkan file-file layout
2. Buka file-file tersebut, lalu hapus kode-kode yang ada jika ada sehingga menjadi
kosong
Menyiapkan file [Link]
1. Buka file [Link] dalam folder login/assets (pastikan Anda tidak melakukan
perubahan sama sekali pada file [Link] ini karena akan menjadi acuan dasar baris
kode)
2. Buka file [Link] dalam foler login/application/views/layout
3. Lalu Copy kode baris ke-1 sampai ke-11 yang ada di file [Link]
4. Lalu Paste di file [Link]
5. Kemudian lakukan perubahan sehingga menjadi seperti gambar di bawah ini:
File [Link] Codeigniter
6. Simpan file
Menyiapkan file [Link]
1. Buka file [Link] di folder login/assets
2. Buka file [Link] di folder application/views/layout
3. Copy kode baris ke-12 sampai ke-25 di file [Link]
4. Lalu Paste di file [Link]
5. Kemudian lakukan perubahan sehingga seperti gambar di bawah ini:
File [Link] Codeigniter
6. Simpan file
Menyiapkan file [Link]
1. Buka file [Link] di folder login/assets
2. Buka file [Link] di folder application/views/layout
3. Copy kode baris ke-26 sampai ke-32 di file [Link]
4. Lalu Paste di file [Link]
File [Link] Codeigniter
5. Simpan file
Menyiapkan file [Link]
1. Buka file [Link] di folder login/application/views/layout
2. Hapus semua kode yang ada (jika ada)
3. Lalu ketik kode ini:
File [Link] Codeigniter
4. Simpan file
Menyiapkan file [Link]
1. Buka file [Link] di folder login/application/views/layout
2. Hapus semua kode yang ada (jika ada)
3. Lalu ketik kode ini:
File [Link] 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 [Link]
Controller [Link] 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 [Link] (huruf pertama besar/capital)
File [Link] 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 [Link]
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 [Link] di folder application/config
2. Lalu ubah kode yang semula: $route[‘default_controller’] = ‘welcome’;
3. Menjadi kode ini: $route[‘default_controller’] = ‘dasbor’;
Setting [Link] Codeigniter
Untuk mengetes apakan routes sudah benar apa belum, cobalah
akses [Link] dan [Link] 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:[Link]
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: [Link]
Membuat database
Pastikan XAMPP (Apache dan MySQL) Anda telah berjalan.
1. Buka browser Anda
2. Lalu akses [Link]
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 [Link]
1. Buka file [Link] di folder login/application/config
2. Lalu ubah 3 hal ini:
‘username’ => ‘root’,
‘password’ => ”,
‘database’ => ‘ci_login’,
3. Simpan file
Koneksi database Codeigniter
Konfigurasi [Link]
Konfigurasi di [Link] ini berfungsi untuk men-load library dan helper yang
dibutuhkan.
1. Buka file [Link] 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