TUTORIAL CODEIGNITER

(PERSIAPAN AWAL)

ALFIAN S UTOMO
TUTORIAL CODEIGNITER - PERSIAPAN AWAL
Saya akan membuat tutorial sederhana persiapan dan perancangan awal
menggunakan Codeigniter.
Disini alat dan bahan yang akan saya gunakan adalah sebagai berikut :

• XAMPP sebagai web server local dan database MySQL,

• Sublime Text 3 sebagai text Editor,
• Chrome sebagai web browser,
• Codeigniter 3.1.11
• Bootstrap Theme “SB-Admin 2”
Ok, langsung saja kita mulai
1. Download Codeigniter versi 3.1.11 di https://codeigniter.com/

2. Download template bootstrap sb-admin-2 di https://startbootstrap.com/themes/sb-

admin-2/

CODEIGNITER – PERSIAPAN AWAL ALFIAN S UTOMO

 3. Setelah download CI dan template bootstrap, lalu extract keduanya.

4. Rename folder CI tersebut menjadi "toko_online", lalu copy ke dalam XAMPP di folder
htdocs

5. Jalankan XAMPP, lalu Start web server Apache. Sekalian Start server MySQL karena
nanti kita akan menggunakan database.

6. Buka browser, lalu ketikan "localhost/toko_online". Maka akan tampil halaman awal
Codeigniter.

CODEIGNITER – PERSIAPAN AWAL ALFIAN S UTOMO

 7. Buka folder template bootstrap sb-admin-2 tadi, lalu copy semua folder (css, img, js,
scss, vendor). Lalu buka folder toko_online tadi dan buat folder bernama "assets" dan
paste semua folder tadi ke dalam folder assets.

8. Jalankan Sublime Text, lalu buka folder toko_online.

9. Buka application --> config --> autoload.php, lalu tambahkan 'url' pada helper.

10. Buka application --> config --> config.php, lalu tambahkan alamat url toko_online pada
bas_url.

CODEIGNITER – PERSIAPAN AWAL ALFIAN S UTOMO

 11. Buka file index.html dari template bootstrap tadi ke browser. lalu klik kanan --> View
Page Source. Lalu Copy semua code html dari index tersebut

12. Pada Sublime, klik kanan pada folder Views lalu buat file baru, beri nama
dashboard.php lalu paste code index.html yang kita copy sebelumnya.

13. Lalu klik kanan pada folder Controller lalu buat file baru, beri nama dashboard.php
Lalu ketikan code dibawah.

14. Buka application --> config --> routes.php, lalu tambahkan 'dashboard' pada
default_controller. Jadi saat web dibuka pertama kali dengan mengacu pada bas_url,
maka akan mengeksekusi controller Dashboard dengan function index.

CODEIGNITER – PERSIAPAN AWAL ALFIAN S UTOMO

 15. Pada folder View klik kanan lalu buat folder baru dan beri nama "templates". dan di
dalam folder templates kita buat file baru header.php, sidebar.php, dan footer.php

Script index dari template sb-admin-2 yang kita copy ke Views → dashboard.php kita
pecah sesuai dengan script tampilannya.
- header.php : pecahan yang berisi pemanggilan css, judul web, head html
- sidebar.php : pecahan yang berisi menu item dan topbar
- footer.php : pecahan yang berisi pemanggilan javasript, dll

16. Pada Controller 'dashboard' tambahkan pecahan template dashboard tadi.

17. Untuk setiap template View yang memanggil file css, js, vendor dan lain-lain, pada link
href kita tambahkan didepannya lokasi folder assets karena kita memasukan semua
tadi ke dalam folder assets.

CODEIGNITER – PERSIAPAN AWAL ALFIAN S UTOMO

 18. Berikutnya kita buat database took online beserta table barang, caranya pada browser
buka ‘http://localhost/phpmyadmin/’, lalu login sebagai root atau user lain jika telah
dibuat. Lalu buat New Database dengan nama ‘toko_online’

19. Lalu setelah membuat database, kita buat table nya. Create Table, masukan nama
table ‘tb_barang’ dengan jumlah kolom 7, lalu buat kolom-kolomnya beserta type
datanya.

20. Pada Sublime, buka application --> config --> database.php, lalu isikan hostname,
username, password dan nama database.

CODEIGNITER – PERSIAPAN AWAL ALFIAN S UTOMO

 21. Buka application --> config --> autoload.php, lalu pada libraries isikan ‘database’ dan
‘session’.
*session akan kita gunakan nanti, jadi sekalian dimasukan

Link Sumber :
https://www.youtube.com/watch?v=3v5fOQWUiuA&list=PLce3Eyp7oY9_5lzhkUtrV6ygriYcttMlg
&index=21&t=0s

========END========

CODEIGNITER – PERSIAPAN AWAL ALFIAN S UTOMO