Modul Pembelajaran

Pengenalan Frameword CodeIgniter

Framework CodeIgniter merupakan framework berbasis bahasa
pemrograman PHP yang menggunakan model MVC (model, view, dan
controller) untuk membangun sebuah aplikasi berbasis web yang dinamis,
dengan konsep ini akan mudah dalam membangun sebuah aplikasi dan
desain tampilan yang terstuktur sehingga maintenance aplikasi lebih mudah.
CodeIgniter merupakan salah satu framework yang banyak dipakai saat ini,
selain mudah dalam penggunaan, dokumentasi yang disediakan oleh
komunitas (khususnya di Indonesia) juga banyak karena notabene CI bersifat
open source sehingga dapat diunduh gratis dan semua orang bisa ikut untuk
mengembangkannya.

Konsep MVC merupakan sebuah patern teknik pemprograman yang

memisahkan antara alur, data dan antarmuka suatu sistem, untuk lebih
jelasnya konsep MVC sebagai berikut:

• Model, biasanya berhubungan langsung dengan database (query)

untuk manajemen data.
• View, biasanya berupa file HTML, yang diatur oleh controller. View
berfungsi untuk menerima dan merepresentasikan data kepada user.
• 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.

Pembuatan Project
1
1. Siapkan server (bersifat local saja) untuk mengeksekusi bahasa PHP, disini
yang dipakai adalah XAMPP (bisa di download di
https://www.apachefriends.org/download.html)
2. Database server, ketika download XAMPP telah include yaitu MySQL
Database
3. Hidupkan service Apache dan MySQL
4. Text Editor, bisa Notepad++, Sublime Text 3, Visual Studio Code, dll
5. Framework codeigniter, jika belum ada bisa di download di
https://github.com/bcit-ci/CodeIgniter/archive/3.1.10.zip. Kemudian
ekstrak di letakkan di folder htdocs nama project sesuaikan dengan
keinginan.
Berikut tampilan awal dari framework codeigniter

6. Membuat database
Tabel dosen
CREATE TABLE `dosen` (
`id` int(10) NOT NULL,
`nip` varchar(18) NOT NULL,
`nama` varchar(100) NOT NULL,
2
 `alamat` varchar(100) NOT NULL,
`deleted` enum('0','1') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `dosen` ADD PRIMARY KEY (`id`);
ALTER TABLE `dosen` MODIFY `id` int(10) NOT NULL AUTO_INCREMENT;

Tabel mata_kuliah
CREATE TABLE `mata_kuliah` (
`id` int(10) NOT NULL,
`mata_kuliah` varchar(100) NOT NULL,
`deleted` enum('0','1') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `mata_kuliah` ADD PRIMARY KEY (`id`);
ALTER TABLE `mata_kuliah` MODIFY `id` int(10) NOT NULL AUTO_INCREMENT;

Tabel pengampu
CREATE TABLE `pengampu` (
`id` int(10) NOT NULL,
`dosen_id` int(10) NOT NULL,
`mata_kuliah_id` int(10) NOT NULL,
`deleted` enum('0','1') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `pengampu`

ADD PRIMARY KEY (`id`),
ADD KEY `dosen_id` (`dosen_id`),
ADD KEY `mata_kuliah_id` (`mata_kuliah_id`);

ALTER TABLE `pengampu` MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

ALTER TABLE `pengampu`

ADD CONSTRAINT `fk_dosen` FOREIGN KEY (`dosen_id`) REFERENCES `dosen` (`id`) ON DELETE CASCADE ON UPDATE CASCADE,
ADD CONSTRAINT `fk_mata_kuliah` FOREIGN KEY (`mata_kuliah_id`) REFERENCES `mata_kuliah` (`id`) ON DELETE CASCADE ON
UPDATE CASCADE;

Constraint diatas menunjukkan relasi antar tabel, dimana dalam teori

terbagi menjadi 3 jenis yaitu many to many, many to one, dan one to
many. Dalam sebuah relasi antar tabel, database (khususnya MySQL)
sendiri sudah memberi option ketika hal itu terjadi yaitu berupa cascade,
set null, no action, dan restrict. Berikut penjelasanya :
Cascade = apabila id pada tabel A dihapus maka tabel B juga ikut
terhapus
SET NULL = apabila id pada table A dihapus maka table B di set null
No action = apabila id pada table A dihapus maka tidak dilakukan apa-
apa
Restrict = apabila id pada table A ingin dihapus maka tidak
diperbolehkan jika di table B ditemukan ID yang berelasi
3
7. Setting awal, masuk ke folder application > config
config.php  $config['base_url'] = 'http://localhost/latihan/';
autoload.php  $autoload['helper'] = array('url');
$autoload['libraries'] = array('database');
database.php  'username' => 'root',
'password' => '',
'database' => 'latihan',
8. Membuat controller baru dengan nama controller Home, karena default
aplikasi ketika di buka adalah controller Welcome maka kita ubah ke
controller yg baru atau yg lainnya sesuai kebutuhan di file routes.php 
$route['default_controller'] = 'Home';, selain itu bisa juga mengarahkan
tampilan error 404 ketika user mengakses halaman yg tidak memiliki
akses, serta manipulasi url juga bisa dilakukan di file ini.
1. <?php
2. defined('BASEPATH') OR exit('No direct script access allowed');
3.
4. class Home extends CI_Controller {
5. public function index()
6. {
7. }
8. }

9. Membuat sebuah model yg isinya patern query karena nantinya akan

digunakan berulang kali.
Masuk ke folder application > folder model
1. <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
2. class Master_model extends CI_Model{
3. function manualQuery($q)
4. {
5. return $this->db->query($q)->result();
6. }
7. function insertData($table,$data){
8. $res = $this->db->insert($table,$data);
9. return $res;
10. }
11. function updateData($table,$data,$field_key)
12. {
13. $this->db->update($table,$data,$field_key);
14. }
15. function deleteData($table,$data)
16. {
17. $this->db->delete($table,$data);
18. }
19. }
4
 Karena model ini akan dipakai berulang kali, agar memudahkan dalam
pemanggilan set di file autoload.php  $autoload['model'] =
array('Master_model');
10. Buat tampilan home, masuk ke folder application > views
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Latihan</title>
5. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
6. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
7. </head>
8. <body>
9. <div class="w3-row">
10. <div class="w3-container w3-quarter"></div>
11. <div class="w3-container w3-half">
12. <center><h1>Pengampu Mata Kuliah</h1></center>
13. <hr>
14. <button class="w3-button w3-small w3-teal">+ Tambah Data</button>
15. <br>
16. <br>
17. <table class="w3-table-all w3-card-4 w3-centered w3-border">
18. <thead>
19. <tr class="w3-gray">
20. <th style='text-align: center'>#</th>
21. <th style='text-align: center'>Mata Kuliah</th>
22. <th style='text-align: center'>Nama Dosen</th>
23. <th style='text-align: center'>Aksi</th>
24. </tr>
25. </thead>
26. <tbody>
27. <tr>
28. <th style='text-align: center'>1.</th>
29. <td>Mark</td>
30. <td>Otto</td>
31. <td><a href="" title='Ubah Data'><i class="fa fa-pencil"
style="color:blue;"></i></a>|<a href="" title='Hapus Data'><i class="fa fa-trash"
style="color:red;"></i></a></td>
32. </tr>
33. </tbody>
34. </table>
35. </div>
36. <div class="w3-container w3-quarter"></div>
37. </div>
38. </body>
39. </html>

11. Persiapkan data di controller yg nantinya akan ditampilkan di view

1. $data_matkul = $this->Master_model->manualQuery("SELECT a.* FROM mata_kuliah a WHERE a.deleted='0'");
2. $data = array();
3. foreach ($data_matkul as $key => $value) {
4. $pengampu = '';
5. $data_dosen = $this->Master_model->manualQuery("SELECT b.nama FROM pengampu a LEFT JOIN dosen b ON
a.dosen_id=b.id WHERE a.mata_kuliah_id=".$value->id." AND a.deleted='0' AND b.deleted='0'");
6. foreach ($data_dosen as $key => $value2) {
7. $pengampu .= $value2->nama.'<br>';
8. }
9. $data[] = array(
10. 'id' => $value->id,
5
 11. 'mata_kuliah' => $value->mata_kuliah,
12. 'pengampu' => $pengampu
13. );
14. }
15. $data_tampil['data_matkul'] = $data;
16. $this->load->view('home',$data_tampil);

Kodingan diletakkan di fungsi index, karena setiap memanggil sebuah

controller defaultnya akan membaca fungsi index.
*Catatan: foreach sendiri adalah perulangan khusus untuk array yg
disediakan php, yg tentunya dapat menyimpan banyak data dalam satu
variabel akan sangat berguna untuk menyederhanakan dan menghemat
penggunaan variabel.
12. Integrasikan data yg dibawa dari controller dengan tabel yg telah dibuat
di view
1. <?php
2. $no = 1;
3. foreach ($data_matkul as $value) {
4. ?>
5. <tr>
6. <th style='text-align: center'><?= $no++; ?>.<br></th>
7. <td><?= $value['mata_kuliah']; ?></td>
8. <td><?= ($value['pengampu'] == "") ? '-' : $value['pengampu']; // ternary operators
?></td>
9. <td><a href="" title='Ubah Data'><i class="fa fa-pencil"
style="color:blue;"></i></a>|<a href="" title='Hapus Data'><i class="fa fa-trash"
style="color:red;"></i></a></td>
10. </tr>
11. <?php } ?>

13. Buat tampilan untuk menambahkan data

Karena menggunakan modal kita tambahkan dulu atribut untuk
memanggil css dan jquery
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

Kemudian persiapkan tombol yg akan digunakan untuk memunculkan

modal
<button data-toggle="modal" href="#tambahdata" class="w3-button w3-small w3-teal">+ Tambah Data</button>

Karena membutuhkan list data mata kuliah dan list data dosen maka harus
ada di controller
6
$data_tampil['data_matkul_master'] = $data_matkul;
$data_tampil['data_dosen'] = $this->Master_model->manualQuery("SELECT a.* FROM dosen a WHERE a.deleted='0'");

Tampilan untuk modalnya

<div class="modal fade bs-modal-lg" id="tambahdata" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-
hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Form Tambah Data</h4>
</div>
<div class="modal-body">
<div class="box box-primary">
<!-- form start -->
<form role="form" class="form-horizontal" action="<?=site_url('Home/simpan_data');?>"
method="post">
<div class="form-body">
<div class="form-group form-md-line-input has-danger">
<label class="col-md-2 control-label" for="form_control_1">Mata Kuliah <span
class="required"> * </span></label>
<div class="col-md-10">
<?php
echo '<select name="matkul" class="form-control" required><option value="">--
Pilih --</option>';
foreach ($data_matkul_master as $key => $value) {
echo '<option value="'.$value->id.'">'.$value->mata_kuliah.'</option>';
}
echo '</select>';
?>
</div>
</div>
<div class="form-group form-md-line-input has-danger">
<label class="col-md-2 control-label" for="form_control_1">Daftar Dosen <span
class="required"> * </span></label>
<div class="col-md-10">
<?php
foreach ($data_dosen as $key => $value) {
echo'
<div class="col-md-6">
<input type="checkbox" name="dosen[]" value="'.$value->id.'">
'.$value->nama.'
</div>
';
}
?>
</div>
</div>
</div>
<br>
<div class="form-actions margin-top-10">
<div class="row">
<div class="col-md-offset-2 col-md-10">
<button type="button" data-dismiss="modal" class="btn default">Batal</button>
<button type="submit" class="btn blue">Simpan</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
7
 </div>

14. Membuat fungsi untuk menambahkan data

Karena di modal sudah kita tuliskan nama fungsinya maka di controller
disamakan dengan nama fungsi simpan_data (tetap menggunakan
controller Home)
public function simpan_data(){
$this->db->trans_start();
for ($i=0; $i < COUNT($this->input->post('dosen')); $i++) {
$data = array(
'dosen_id' => $this->input->post('dosen')[$i],
'mata_kuliah_id' => $this->input->post('matkul')
);
$this->Master_model->insertData('pengampu',$data);
}
$this->db->trans_complete();
if($this->db->trans_status() === false){
echo 'alert("Gagal tambah data!!")';
echo "<script>window.location='".site_url()."'</script>";
}
else{
echo '<script>alert("Berhasil tambah data!!")</script>';
echo "<script>window.location='".site_url()."'</script>";
}
}

*Catatan:
o Transactions digunakan saat kita menjalankan beberapa query sebagai
satu kesatuan, untuk memastikan bahwa semua query tersebut
berhasil dijalankan, ketika salah satu ada yg gagal maka query yg lain
(dalam satu kesatuan dan itu berhasil) maka akan di cancel dan
memiliki balikan berupa false/ gagal.
o Modifier
 Public  seluruh kode program di luar class bisa mengaksesnya,
termasuk class turunan.
 Protected  property atau method tersebut tidak bisa diakses dari
luar class, namun bisa diakses oleh class itu sendiri atau turunan
class tersebut.
 Private  satu-satunya yang bisa mengakses adalah class itu
sendiri.
Operator Nama Contoh Hasil
8
 == Sama $x == Jika $x sama dengan $y, Benar
dengan $y
=== Identik $x === Jika $x sama dengan $y, dan memiliki
$y jenis yg sama, Benar

Kolarborasi Code dengan Git

Apa itu git?

Sebelum menggunakan git

Setelah menggunakan git

Apa perbedaannya?
9
Saat kita ingin menyimpan semua perubahan pada file, biasanya kita
membuat file baru dengan “save as”. Lalu, file akan menumpuk dalam
direktori proyek seperti pada ilustrasi di atas. Tapi setelah menggunakan git,
hanya akan ada satu file dalam proyek dan perubahannya disimpan dalam
database. Git hanya akan menyimpan delta perubahannya saja, dia tidak akan
menyimpan seluruh isi file yang akan memakan banyak memori.

Selain untuk mengontrol versi, git juga digunakan untuk kolaborasi code, dari
situ kita bisa tahu apa yang diubah dan siapa yang mengubahnya. Berikut
cara penggunaan git,

1. Install git, jika belum ada download di https://git-scm.com/downloads.

2. Selanjutnya pemilihan terminal emolator pilih Use Windows' default
console window.
3. Kemudian install sampai finish
4. Konfigurasi awal masukkan name dan email, jika kamu memiliki akun
Github, Gitlab, Bitbucket atau yang lainnya, maka username dan email
harus mengikuti akun tersebut agar mudah diintegrasikan.
git config --global user.name "fakhirrizal"
git config --global user.email [email protected]

untuk mengecek konfigurasinya bisa jalankan perintah berikut,

git config --list

6. Fork & clone repository

Fork bisa kita artikan sebagai menyalin repository dari akun orang lain ke
akun kita sendiri. https://github.com/fakhirrizal/latihan

7. Selanjutnya silahkan clone (download) repository tersebut ke komputer

lokal, ada pilihan antara https dan ssh, jika pilih ssh ketika melakukan push
maka tidak perlu memasukkan password. Namun disini agar cepat
10
 menggunakan https saja, ssh membutuhkan setting public key terlebih
dahulu

git clone https://github.com/nama_akun/latihan.git /* jika belum ada repository dengan nama latihan */
8. Lakukan modifikasi pada code, kemudian commit terhadap apa yang
kamu rubah.
git add nama_file
git commit -m “pesan”
9. Melakukan push ke repository kita yg telah di fork dari project sumber
git push origin master
10. Mengupload perubahan ke project sumber
Melakukan pull request terlebih dahulu, pull request adalah istilah yang
bisa kita artikan sebagai permintaan untuk menggabungkan kode.

Setelah itu github akan memproses, jika berhasil makan akan muncul
pesan Able to merge, selanjutnya silahkan klik tombol Create pull
request.

Tambahkan catatan dari apa yg akan kamu kerjakan.

Setelah owner melihat hasil kodinganmu apakah sesuai dengan yg
diinginkan atau harus ada bagian direvisi, jika diterima biasanya akan ada
tulisan “Marged” berwarna ungu.
11
Jika kalian sebagai project manager yg bertugas untuk membuat repository,
kemudian akan mengupload proyek dari local ke GitHub
1. Masuk ke situs github.com kemudian buat sebuah repository baru
2. Berilah nama kemudian atur tingkat publikasinya, apakah public atau
private

3. Kemudian upload vie terminal dengan perintah berikut

git init git add . // titik dibelakang artinya upload all file
git commit -m "pesan"
git remote add origin https://github.com/username/nama_repository.git
git push -u origin master
4. Kemudian akan diminta akses ke akun GitHub untuk memproses upload
file, tunggu sampai selesai.
12