DISPOSISI SURAT

Persiapan dan Tools Sebelum Belajar CI v3

Prasyarat belajar Codeigniter

1. Memahami basic bahasa pemrograman PHP.

2. Untuk bisa belajar Codeigniter dengan lancar setidaknya kamu sudah paham konsep

pemrograman berorientasikan objek (OOP) dengan PHP.

3. Memahami sintaks dasar SQL.

Nah, setelah prasyarat ini terpenuhi. Selanjutnya silahkan siapkan alat-alatnya untuk
mulai belajar.

Berikut ini beberapa peralatan yang harus kamu siapkan di komputermu:

1. Teks Editor
2. Web Browser
3. Web Server: PHP, MySQL, Phpmyadmin
4. File Project Codeigniter

Mari kita siapkan satu-per-satu.

1. Teks Editor
Teks editor akan kita gunakan untuk menulis kode. Kamu bebas menggunakan teks editor apa
saja untuk coding CI.

Saya merekomendasikan menggunakan Visual Studio Code, karena mudah digunakan dan
punya banyak fitur.
Bagi yang belum punya text editor tesrsebut bisa langsung mendownloadnya di site resmi vs
code : https://code.visualstudio.com/download

2. Web Browser
Web browser akan kita gunakan untuk melihat hasil dari aplikasi. Kamu juga bebas
menggunakan web browser apapun, asalkan masih mendukung teknologi web modern zaman
sekarang.

Rekomendasi, gunakan Google Chrome atau Firefox.

3. Web Server
Codeigniter merupakan framework PHP, karena itu ia pasti membutuhkan web server.
Berikut ini requirement server untuk Codeigniter 3:

 PHP Versi 5.6+

 MySQL Versi 5.1+
 Phpmyadmin

Jika kamu sudah menginstal XAMPP, maka ketiga aplikasi server ini sudah terpenuhi.
4. File Project Codeigniter
File project Codeigniter dapat di-download di website resmi Codeigniter. Nanti kita akan
mendapatkan file berupa ZIP. File inilah yang akan kita gunakan untuk mulai membuat proyek
Codeigniter.

Silahkan ikuti:

Cara Membuat Project Codeigniter

Langkah-langkah yang harus dilakukan untuk membuat project CI:

1. Download Codeigniter;
2. Ekstrak File ZIP Codeigniter ke htdocs.

Silahkan buka website Codeigniter untuk mendownload. https://www.codeigniter.com/download

Kita akan mendapatkan sebuah file zip bcit-ci-CodeIgniter-3.1.11-0-gb73eb19.zip,

ekstrak file tersebut ke dalam c:\xampp\htdocs (XAMPP) Setelah itu, ubah
nama bcit-ci-CodeIgniter-3.1.11-0-gb73eb19.xx menjadi disposisi.
Kenapa namanya disposisi ?

Karena kita akan membuat proyek semacam web portal sederhana yang berisi berita tentang
dunia coding. Tujuannya, agar kita paham konsep dasar dari Codeigniter.

Sekarang coba buka web browser dan buka alamat: http://localhost/ disposisi /

Jika sudah tampil seperti gambar berikut selamat kita sdah berhasil install codeigniter

Mengenal Struktur Direktori Codeigniter

Jika kamu baru pertama kali belajar Codeigniter, maka wajib hukumnya mengetahui apa saja
isi direktori dan file yang ada di dalam project codeigniter.

Silahkan buka teks Editor VS Code, lalu pilih File->Open Folder. Cari folder disposisi pada
direktori htdocs.

Maka kita akan mendapatan struktur direktori seperti ini:

Tedapat dua direktori penting di dalam CI yang harus kamu perhatikan, yakni: application dan
system.

Selain itu terdapat juga direktori user_guide dan beberapa file lainnya.
Berikut ini penjelasannya:

1. 📁 application berisi semua kode aplikasi. Di dalam direktori inilah kita akan menulis
semua kode aplikasi kita.
2. 📁 system berisi kode-kode inti dari Codeigniter. Jangan mengubah apapun di dalam
direktori ini. Jika kita ingin upgrade versi, kita cukup me-replace direktori ini dengan
yang baru.
3. 📁 tests berisi kode untuk melakukan testing.

4. 📁 user_guide berisi dokumentasi codeigniter. Kita bisa menghapus direktori ini saat
web sudah jadi.
5. 📄 .editor_config berisi konfigurasi untuk teks editor.

6. 📄 .gitignore berisi daftar file dan folder yang akan diabaikan oleh Git.

7. 📄 comspoer.json adalah file yang berisi keterangan project dan keterangan library
yang digunakan. File ini dibutuhkan oleh composer.
8. 📖 contributing.md adalah file yang berisi penjelasan cara berkontribusi di proyek CI.
Kita bisa menghapus file ini, apabila web sudah jadi.
9. 📖 license.txt adalah file yang berisi keterangan lisensi dari CI. Kita juga bisa
menghapus file saat web sudah jadi.
 10. 📖 readme.rst sama seperti file 📄 contributing.md file ini berisi penjelasan dan
informasi tentang project CI. Kita juga bisa menghapus file ini saat web sudah selesai.
11. 📄 index.php adalah file utama dari CI. File yang akan dibuka pertamakali saat
aplikasi dibuka.

Selanjutnya silahkan buka direktori 📁 application dan perhatikan direktori yang ada di sana.

 📁 cache berisi cache dari aplikasi.

 📁 config berisi konfigurasi aplikasi.

o 📄 autoload.php tempat kita mendefinisikan autoload;

o 📄 config.php konfigurasi aplikasi;

o 📄 constants.php berisi konstanta;

o 📄 database.php konfigurasi database aplikasi;

o 📄 doctypes.php berisi definisi untuk doctype HTML;

o 📄 foreign_chars.php berisi karakter dan simbol;

o 📄 hooks.php berisi konfigurasi hooks;

o 📄 index.html untuk mencegah direct access;

o 📄 memcached.php berisi konfigurasi untuk memcached;

o 📄 migration.php konfigurasi untuk migrasi;

o 📄 mimes.php berisi definisi tipe file;

o 📄 profiler.php konfigurasi untuk profiler;

o 📄 routers.php tempat kita menulis route aplikasi;

o 📄 smileys.php berisi kode untuk emoji;

o 📄 user_agents.php berisi definisi untuk user agents.

 📁 controller berisi kode untuk controller.

 📁 core berisi kode untuk custom core.

 📁 helpers berisi fungsi-fungsi helper.

 📁 hooks berisi kode untuk script hook.

 📁 language berisi string untuk bahasa, apabila web mendukung multibahasa.

 📁 libraries berisi library.

  📁 logs berisi logs dari aplikasi.

 📁 models berisi kode untuk model.

 📁 thrid_party berisi library dari pihak ketiga.

 📁 views berisi kode untuk view.

 📄 index.html file html untuk mencegah direct access.

Mengenal Konsep MVC pada Codeigniter

MVC (Model, View, Controller) adalah sebuah pola desain (design pattern) arsitektur
pengembangan aplikasi yang memisahkan dan mengelompokan beberapa kode sesuai degan
fungsinya.1

MVC membagi aplikasi ke dalam tiga bagian fungsional: model, view, dan controller.

 Model adalah kode-kode untuk model bisnis dan data. biasanya berhubungan
langsung dengan database untuk memanipulasi data (insert, update, delete,
search), menangani validasi dari bagian controller, namun tidak dapat
berhubungan langsung dengan bagian view.
 View merupakan bagian yang menangani presentation logic. berisi kode-kode
untuk tampilan.
 Controller merupakan bagian yang mengatur hubungan antara
bagian model dan bagian view, controller berfungsi untuk menerima request dan
data dari user kemudian menentukan apa yang akan diproses oleh aplikasi.
Alur kerjanya seperti ini:

1. Mulai;
2. User mengirim request ke web;
3. File yang pertama kali dieksekusi adalah index.php;
4. Lalu dari index.php, request akan diteruskan oleh routers.php;

5. routers.php akan mencari cache di server, apabila tedapat cache maka cache itu yang
akan dikirim sebagai balasan (response). Apabila tidak
ada cache barulah request diteruskan ke Controller;
6. Controller akan bertanggunag jawab untuk mengambil data dari Model dan me-
rendernya ke dalam View dengan menggunakan library, plugin, dan helper yang ada.
7. Hasil render (view) dikirim ke pengguna dan disimpan dalam cache, apabila
fitur cache aktif;
8. Selesai.
Memahami Router pada Codeigniter

Router pada Codeigniter bertugas untuk menentukan controller dan method/fungsi yang akan
dieksekusi.

Ketika kita membuka, http://localhost/disposisi/ maka fungsi yang akan dieksekusi adalah
fungsi index() yang berada di dalam controller welcome.

class Welcome extends CI_Controller {

public function index()
{
$this->load->view('welcome_message');
}
}

Kenapa bisa begitu?

Ini karena konfigurasi router defaultnya adalah controller welcome.

Coba saja buka pada file 📄 config/routers.php.

Membuat Beberapa Router

Sebagai latihan, coba tambahkan route /about/ dan /profile/ di
dalam Controller Welcome dengan method ini: sekarang kita akan coba latihan sederhana
dengan menggunakan route.

public function about()

{
// fungsi untuk me-load view about.php
$this->load->view('about');
}

public function profile()

{
// fungsi untuk me-load view contact.php
$this->load->view('profile');
}

Setelah itu tambahkan dua buah file view di dalam direktori 📁 views dengan
isi sebagai berikut.

📄 views/about.php

<h1>About Us</h1>
<p>Ini adalah halaman about</p>
📄 views/profile.php
<h1>Profile Us</h1>
<p>Ini adalah halaman profile</p>

Route sudah kita tambahkan.

Sekarang coba buka:

 http://localhost/disposisi/index.php/welcome/about/
 dan http://localhost/disposisi/index.php/welcome/profile/

Hasilnya:
Apabila kita membuka http://localhost/disposisi/index.php/profile/, maka
akan terjadi error 404 not found.

Kenapa bisa begitu?

Ini karena route yang baru saja kita buat, belum didaftarkan ke dalam routers.php.

Sekarang buka file 📄 config/routers.php, lalu tambahkan kode berikut.

$route['about'] = 'welcome/about';
$route['profile'] = 'welcome/profile';
Sekarang kita coba setelah kita daftarkan diroute,

Apakah kita harus menambahkan route pada routers.php di setiap

pembuatan route baru?

Jawabannya:
Tidak harus, karena CI juga mampu mendeteksi otomatis route berdasarkan nama
controller dan method yang dibuat

Konfigurasi Template
Rencananya pada aplikasi yang akan kita buat, kita akan menggunakan template SB Admin.
Link download : https://startbootstrap.com/template/sb-admin
Kenapa SB Admin?
Karena sederhana, gartis, menggunakan bootstrap 4, dan mudah diimplementasikan pada
Codeigniter.

KONFIGURASI AWAL CODEIGNITER

Walaupun cukup dengan konfigurasi default codeigniter sudah dapat berjalan,

tetapi untuk pembuatan aplikasi kita perlu melakukan beberapa konfigurasi agar

dalam pengembangan bisa menjadi lebih mudah. Setidaknya konfigurasi yang

perlu dilakukan ada pada file autoload.php, config.php, database.php, dan

route.php
• Autoload.php: konfigurasi ini untuk menentukan sumber daya apa yang akan di

load otomatis.

• Config.php: konfigurasi ini digunakan untuk mengatur alamat url aplikasi

(base_url).

• Database.php: konfigurasi ini digunakan untuk mengatur koneksi ke database,

ada beberapa yang bisa kita atur disini seperti host, user, password dan

database yang mau digunakan.

• Route.php: konfigurasi ini untuk menentukan default controller awal.

Autoload.php

Berikutnya, silahkan buka application/config/autoload.php.Kemudian cari

$autoload['libraries'] dan tambahkan database dan session dan helper = url cek
gambar berikut. Ini artinya, kita akan me-load library database dan session secara
otomatis. Library database akan menyediakan fungsi-fungsi untuk operasi database.
Kita butuh ini, karena kita akan menggunakan database dalam aplikasi;

Library session menyediakan fungsi-fungsi untuk mengakses variabel $_SESSION.

Kita butuh ini untuk menampilkan flash message dan membuat login.

Config.php
• File config.php ini bertujuan untuk mengatur lokasi default aplikasi. Buka file
config.php yang ada pada folder application/config
• Atur pada bagian base_url dengan alamat projek kita yaitu isi dengan
http://localhost/disposisi
• Masih pada file config.php, cari bagian index lalu hapus index.php nya

Database.php

• File database.php ini digunakan untuk mengatur koneksi ke database. Buka file
database.php yang ada pada folder application/config

• Lalu atur pada bagian username, password, dan database. Username diisi dengan root,
password dikosongkan(default) dan database diisi dengan nama database yang akan kita
gunakan. Dalam kasus ini database yang kita gunakan adalah sikrepsi.
Routes.php

• File route.php ini digunakan untuk mengatur Controller mana yang akan dijadikan

sebagai default atau yang jalan pertama kali saat projek dipanggil melalui

browser. Buka file routes.php yang ada pada folder application/config

• Secara default, nilai default_controller yang dipanggil adalah Controller

welcome(bawaan CI).

• Karena kita belum membuat Controller, untuk sementara default_controller nya

kita ganti dengan menu. Karena controller ini yang akan kita buat setelah ini.
File .htaccess

• Tambahkan file baru menggunakan text editor dengan nama .htacces. Pastikan saat
menyimpan save as type nya adalah All Files.

• Lokasi penyimpanannya pada folder utama (disposisi)

• Kemudian ketik code berikut:

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php/$1 [L]

Langkah berikutnya kita akan membuat tampilan baru dengan menambahkan template sb-

admin, langkah pertama buat controller dengan nama Menu.php pada lokasi folder

application/controllers/Menu.php dan isi code seperti berikut:

Jika file controller sudah dibuat maka tampilan susunan file dikontroler akan seperti berikut :
Tambahkan 1 file di view/template/menu.php

Tambahkan kode berikut, kita akan copy paste dari template yang sebelumnya pernah
kita download yaitu file layout-static.html copy semua kode difile tersebut dan paste ke
file menu.php kita yang ada difolder view/template/menu.php seperti berikut:
Dan copy paste juga 2 folder css dan js ke folder assets diproject kita:
Jika sudah sesuai dengan intruksi diatas maka akan tampil seperti berikut waktu

diakses url localhost/disposisi-kel-g/menu

Difolder view/template/menu.php perbaiki 2 baris kode berikut tepatnya baris 10 dan

baris 147 menjadi seperti ini :

<link href="<?=base_url('assets/css/styles.css')?>" rel="stylesheet" />

<script src="<?= base_url('assets/js/scripts.js')?>"></script>

Jika kita refresh tab sebelumnya maka akan tampil lebih bagus dari sebelumnya

Langkah selanjutnya kita akan memperbaiki template agar lebih mudah digunakan

selanjutnya.

Ditahapan ini kita akan memperbaiki struktur template agar bisa digunakan secara
pleksibel dan dinamis dalam melakukan load data di pengerjaan berikutnya, Tahapan
selanjutnya pertama kita akses file berikut Controllers/Menu.php dan rubah isi
menjadi seperti berikut:
Difile views/template/menu.php ini adalah template original akan kita pecah menjadi
beberapa bagian

Sekarang kita akan sederhanakan template tersebut agar kedepannya bisa lebih
mudah digunakan,
Template yang sekarang kita gunakan hanya 1 file dan sekarang struktur akan dipecah
menjadi beberapa bagian utama, mulai dari header.php ,navbar.php ,sidebar.php
,footer.php dan main.php. buat beberapa file seperti nama berikut dan biarkan saja
terlebih dahulu dalam kondisi kosong,

Kita akan melakukan pemecahan kode dengan cara menyalin kode program mulai dari
header yaitu dari file template sb-admin sebelumnya di view/template/menu.php copy
1-13 dan paste difile Application/Views/template/header.php

Application/Views/template/navbar.php copy 14 - 38
copy baris 39 -109 di file view/template/menu.php dan paste di file
Application/Views/template/sidebar.php

Application/Views/template/footer.php copy 132 - 149

Application/Views/template/main.php tambahkan di main kode

Maka jika akses http://localhost/disposisi/menu Tampilan menu akan seperti berikut.