pemrograman berbasis web menggunakan framework ......aplikasi dengan ui (user interface) maupun ux...

Pemrograman Berbasis Web Menggunakan Framework CodeIgniter 3 Studi Kasus Projek Mahasiswa

Wendy, S.Kom., M.Sc.

Tags: PHP, MySQL, HTML, Bootstrap 4, AJAX, jQuery, JavaScript, CI3, Sb-Admin-2, DataTables,

Framework, Export PDF, Export Excel

i

Contents Framework PHP .................................................................................................................................... 1

What? ............................................................................................................................................... 1

Why? ................................................................................................................................................. 1

Persiapan Pengembangan Aplikasi Web ............................................................................................... 2

Web Server dan Database Server ..................................................................................................... 2

Framework PHP ................................................................................................................................ 2

Library dan Framework Frontend ..................................................................................................... 2

Integrated Developement Environment atau Editor ......................................................................... 2

Database Management Software ..................................................................................................... 2

Web Browser .................................................................................................................................... 2

Memulai ................................................................................................................................................ 3

Tentang Projek Tutorial..................................................................................................................... 3

Database ........................................................................................................................................... 3

Instalasi CodeIgniter ......................................................................................................................... 4

Struktur CodeIgniter ......................................................................................................................... 4

Konfigurasi CodeIgniter .................................................................................................................... 6

File application/config/config.php ................................................................................................ 6

File application/config/database.php ........................................................................................... 7

File application/config/autoload.php ............................................................................................ 7

File application/config/routes.php................................................................................................ 7

File .htaccess ................................................................................................................................. 7

Penjelasan ..................................................................................................................................... 8

Folder assets ..................................................................................................................................... 8

css ................................................................................................................................................. 8

js ................................................................................................................................................... 8

images ........................................................................................................................................... 8

sb Admin 2 .................................................................................................................................... 8

Folder uploads .................................................................................................................................. 9

Modul Login ........................................................................................................................................ 10

Model Auth_model.php .................................................................................................................. 10

Controller Auth.php ........................................................................................................................ 10

index() ......................................................................................................................................... 11

signin() ........................................................................................................................................ 11

signout() ...................................................................................................................................... 12

Views .............................................................................................................................................. 12

ii

_partials/head.php ..................................................................................................................... 12

_partials/js.php ........................................................................................................................... 12

signin.php ................................................................................................................................... 14

Menjalankan Modul Login .............................................................................................................. 15

Modul Mahasiswa ............................................................................................................................... 18

Model Program_studi_model.php .................................................................................................. 18

Model Mahasiswa_model.php........................................................................................................ 18

Penjelasan Mahasiswa_model.php ............................................................................................. 21

Controller Mahasiswa.php .............................................................................................................. 21

Penjelasan Mahasiswa.php ......................................................................................................... 27

Views .............................................................................................................................................. 27

_partials/footer.php ................................................................................................................... 28

_partials/modal.php ................................................................................................................... 28

_partials/navbar.php .................................................................................................................. 28

_partials/scrolltop.php................................................................................................................ 29

_partials/sidebar.php .................................................................................................................. 29

mahasiswa/list.php ..................................................................................................................... 30

mahasiswa/js.php ....................................................................................................................... 31

mahasiswa/modal.php ................................................................................................................ 37

template.php .............................................................................................................................. 39

Menjalankan Modul Mahasiswa ..................................................................................................... 40

List............................................................................................................................................... 41

Add.............................................................................................................................................. 41

Edit .............................................................................................................................................. 42

Delete ......................................................................................................................................... 43

Export PDF dan Excel .................................................................................................................. 43

Penutup .............................................................................................................................................. 45

Links & Reading Materials ................................................................................................................... 45

1

Framework PHP

What? PHP (Hypertext Preprocessor), merupakan salah satu bahasa script open source populer karena

fleksibel, mudah digunakan, gratis, dan sebagainya; dimana script tersebut dieksekusi di sisi server.

Sedangkan framework, secara harfiah dapat diartikan sebagai rangka atau kerangka. Dalam dunia

komputasi framework PHP bisa dipahami sebagai sebuah platform yang digunakan untuk membangun

aplikasi web. Dimana framework PHP tersebut sudah dilengkapi dengan library yang telah dikemas

dengan kelas-kelas, fungsi-fungsi dan elemen-elemen yang dibutuhkan untuk mewujudkan pola

design perangkat lunak.

Gagasan yang mendasari framework PHP adalah MVC yaitu model view controller. MVC adalah pola

arsitektur dalam programming yang memisahkan business logic dari user interface, sehingga dapat

dimodifikasi secara terpisah satu dari lainnya (separation of concern). Model mengacu pada data,

View mengacu pada presentasi dan Controller mengacu pada business logic. Pada dasarnya MVC

memisahkan proses pengembangan sebuah aplikasi sehingga dapat dikembangkan pada sebuah

elemen individu tanpa mempengaruhi elemen lainnya. Hal ini membuat coding dalam PHP menjadi

lebih cepat dan mengurangi kompleksitas coding.

Why? Alasan utama para pengembang web menggunakan framework PHP adalah untuk mempercepat

proses pengembangan aplikasi web. Penggunaan ulang (reuse) code lintas projek yang serupa akan

menghemat waktu dan tenaga pengembangan web secara drastis, selain itu framework juga sudah

dibekali dengan modul-modul untuk melaksanakan tugas coding yang membosankan, sehingga

pengembang dapat menggunakan waktunya untuk mengembangkan aplikasi daripada membangun

ulang pondasi dari setiap projek.

Alasan kedua adalah stabilitas dengan penggunaan framework. Dimana kesederhanaan merupakan

aset utama PHP, sehingga banyak pengembang memilih menggunakan bahasa script PHP, namun hal

ini juga bisa menjadi awal kehancuran PHP. Pengembang, terutama pengembang aplikasi pemula,

dapat membuat code yang buruk tanpa sepengetahuannya sendiri. PHP seringkali masih dapat

berjalan dengan code yang buruk tersebut namun bisa saja hal tersebut menyebabkan celah pada

keamanan aplikasi.

Selanjutnya, ketersediaan framework PHP yang luas, sehingga pengembang dapat bebas memilih

framework yang ingin digunakan.

Adapun beberapa framework PHP yang populer adalah:

• Laravel

• Symfony

• Codeigniter

• Yii

• Phalcon

• Cake PHP

• Zend Framework

• etc

2

Persiapan Pengembangan Aplikasi Web

Web Server dan Database Server Pada tutorial ini akan digunakan XAMPP versi 7.4.8 (https://www.apachefriends.org/download.html)

sebagai web server sekaligus database server.

Framework PHP Framework yang digunakan adalah Codeigniter 3 versi 3.1.11 (https://codeigniter.com/download).

Library dan Framework Frontend SB Admin 2 Template (https://startbootstrap.com/themes/sb-admin-2/) sebuah template yang

dirancang untuk halaman admin dengan memanfaatkan bootstrap 4 dan font awesome.

Integrated Developement Environment atau Editor Visual Studio Code (https://code.visualstudio.com/download) dengan plugin Prettier – Code

formatter

Database Management Software Navicat Premium (https://www.navicat.com/) (optional karena berbayar).

Web Browser Chrome (https://www.google.com/chrome/) (atau browser lain).

Catatan, untuk kemudahan tutorial ini tools dan assets yang diperlukan dapat diunduh melalui link

berikut:

https://www.apachefriends.org/download.html

https://codeigniter.com/download

https://startbootstrap.com/themes/sb-admin-2/

https://code.visualstudio.com/download

https://www.navicat.com/

https://www.google.com/chrome/

3

Memulai • Instalasi XAMPP, Visual Studio Code, Navicat dan pembuatan database serta table dilewati,

mahasiswa informatika dianggap sudah paham.

Tentang Projek Mahasiswa Pada tutorial ini kita akan membuat project mahasiswa yaitu sebuah aplikasi untuk menampung data

mahasiswa (termasuk upload file) yang terdiri dari:

• Modul Login

• Modul Mahasiswa

Projek ini juga akan menggunakan AJAX (Asynchronous Javascript and XML) untuk membangun

aplikasi dengan UI (User Interface) maupun UX (User eXperience) yang lebih baik.

Catatan: tutorial ini dikembangkan pada localhost sehingga ada beberapa konfigurasi yang perlu

disesuaikan apabila ingin diterapkan di live server.

Database Buatlah database dengan detil berikut:

• Nama Database db_mahasiswa

o Nama Tabel mahasiswa

▪ nim char(9) NOT NULL PRIMARY

▪ nama varchar(100)

▪ tempat varchar(100)

▪ tanggal date

▪ jenis_kelamin varchar(10)

▪ id_program_studi int

▪ file_foto varchar(255)

o Nama Tabel: user

▪ username varchar(50) NOT NULL PRIMARY

▪ password char(32 NOT NULL

o Nama Tabel: program_studi

▪ id int NOT NULL AUTO_INCREMENT PRIMARY

▪ nama varchar(255)

Kemudian isikan data awal berikut kedalam tabel-tabel tersebut melalui query

INSERT INTO user VALUES ('admin',md5('stmikpontianak'));

INSERT INTO program_studi (nama) VALUES ('TEKNIK INFORMATIKA');

INSERT INTO program_studi (nama) VALUES ('SISTEM INFORMASI');

Catatan, MD5 merupakan sebuah hash function, yaitu fungsi untuk melakukan mengacakan text

sehingga tidak dapat dibaca secara langsung. Berbeda dengan encrypt fungsi hash tidak dapat dibalik,

artinya md5(‘stmikpontianak’) akan menghasilkan sebuah string acak (md5 menghasilkan string yang

ukurannya selalu 32 character) yang tidak dapat dikembalikan lagi ke stmikpontianak.

4

Instalasi CodeIgniter Extract file .zip codeigniter ke dalam folder C:/xampp/htdocs/ kemudian ubah nama foldernya

menjadi nama project yaitu mahasiswa.

Buka chrome kemudian masukkan url localhost/mahasiswa

Selamat instalasi CodeIgniter telah berhasil.

Controller yang ditampilkan adalah controller default yaitu controller welcome.php, controller default

dapat di atur pada file application/config/route.php.

Struktur CodeIgniter Di dalam project kita akan terdapat beberapa folder dan file.

• user_guide

Berisi file pedoman codeigniter, folder ini tidak terlalu penting untuk project codeigniter.

• system

5

Berisi file sistem codeigniter, semua fungsi-fungsi bawaan codeigniter ada di dalam folder ini.

Jangan lakukan perubahan / penghapusan dari file maupun folder di dalam folder system ini

tanpa pengetahuan yang mendalam.

• application

Berisi / menampung folder dan file yang akan kita ubah atau tambah. Di dalam folder inilah

kita akan bekerja.

6

Konfigurasi CodeIgniter Jalankan aplikasi Visual Studio Code, kemudian klik menu File / Open Folder, jelajahi ke folder

C:/xampp/htdocs/ kemudian pilih folder mahasiswa dan klik tombol Select Folder.

Kemudian lakukan perubahan pada beberapa file di dalam folder application/config sebagai berikut:

File application/config/config.php

$config['base_url'] = 'http://localhost/mahasiswa/';

// dan baris berikut

$config['index_page'] = '';

7

File application/config/database.php Perhatikan bagian hostname, username, password, database!

$db['default'] = array(

'dsn' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => '',

'database' => 'db_mahasiswa',

'dbdriver' => 'mysqli',

'dbprefix' => '',

'pconnect' => FALSE,

'db_debug' => (ENVIRONMENT !== 'production'),

'cache_on' => FALSE,

'cachedir' => '',

'char_set' => 'utf8',

'dbcollat' => 'utf8_general_ci',

'swap_pre' => '',

'encrypt' => FALSE,

'compress' => FALSE,

'stricton' => FALSE,

'failover' => array(),

'save_queries' => TRUE

);

File application/config/autoload.php

$autoload['libraries'] = array('database','session','form_validation');

$autoload['helper'] = array('form','url');

File application/config/routes.php

$route['default_controller'] = 'auth';

File .htaccess Kemudian tambahkan file baru .htaccess di folder root (mahasiswa)

Ada pun isi file sebagai berikut

8

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

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

Penjelasan

• config.php dan .htaccess

Pada file config.php kita mengisikan base_url berupa root dari project kita sehingga fungsi

base_url() yang akan kita gunakan nanti di code kita akan mengacu pada url yang kita isikan

disini.

Pada file config.php pada item index_page yang kita ubah sehingga berisi string kosong dan

membuat file .htaccess di root dengan tujuan menghilangkan index.php dari url, dimana

secara default cara CodeIgniter membaca URL adalah dengan format

contoh.com/index.php/class/function/id. Dengan menggunakan cara ini kita bisa

menghilangkan index.php sehingga formatnya menjadi contoh.com/class/function/id.

• database.php

File ini berisi configurasi database yang kita gunakan untuk project kita

• routes.php

File ini berisi rute url CodeIgniter, secara default CodeIgniter akan memanggil controller

welcome, kita ubah sehingga CodeIgniter memanggil controller auth (yang akan kita gunakan

untuk modul login)

• autoload.php

File ini berisi library, helper dan sebagainya yang akan diload controller yang kita gunakan.

Folder assets Buatlah sebuah folder di root (mahasiswa) dengan nama assets. Folder ini akan digunakan untuk file-

file yang akan kita gunakan untuk project ini termasuk file images, bootstrap, dan sebagainya. Di dalam

folder assets buatlah beberapa folder lain sebagai berikut

Catatan, Anda dapat mengunduh file assets.zip yang telah disediakan. Extract file tersebut pada root

project sehingga akan menghasilkan mahasiswa/assets/ beserta dengan file yang diperlukan.

css Folder ini digunakan untuk menampung file css yang belum terdapat di sb admin 2 dan juga

menampung custom css untuk modifikasi tampilan applikasi web.

js Serupa dengan folder css folder ini digunakan untuk menampung file js yang belum terdapat di sb

admin 2 dan custom js.

images Buat sebuah folder di assets dengan nama images. Folder ini menampung file images yang kita

gunakan. Copy file CodeIgniter_banner.png dan CodeIgniter_icon.png ke dalam folder ini.

sb-admin-2 Copy dan extract file sb admin 2, kemudian rename folder nya menjadi sb-admin-2.

9

Folder uploads Buatlah sebuah folder bernama uploads di root directory project kita (mahasiswa/uploads). Folder ini

akan digunakan untuk menampung file uploads dari user

10

Modul Login

Model Auth_model.php Buahlah file bernama Auth_model.php di dalam folder application/model

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Auth_model extends CI_Model

{

public function __construct()

{

parent::__construct();

}

public function authenticate()

// melakukan authentikasi user

{

$username = $this->input->post('username',TRUE);

$password = md5($this->input->post('password'));

$this->db->where('username',$username);

$this->db->where('password',$password);

$result = $this->db->get('user');

if ($result->num_rows()>0){

return TRUE;

}

else

{

return FALSE;

}

}

}

Controller Auth.php Buatlah sebuah file bernama Auth.php di dalam folder application/controller

<?php


class Auth extends CI_Controller {


{


}

public function index()

// fungsi default controller Auth

11

{

if($this->session->userdata('login'))

{

redirect('Mahasiswa');

}

$this->load->view('signin');

}

public function signin()

{

$this->load->model('Auth_model');

if ($this->Auth_model->authenticate())

// jika autentikasi benar

// simpan ke data sesi dan panggil controller Mahasiswa

{

$data_session = array(

'username'=>$this->input->post('username'),

'login'=>TRUE

);

$this->session->set_userdata($data_session);

redirect('Mahasiswa');

}

else

// jika autentikasi salah

{

$this->session-

>set_flashdata('fail','Username dan password salah!');

redirect('Auth');

}

}

public function signout()

{

$this->session->sess_destroy();

redirect('Auth');

}

}

index() Fungsi index() merupakan fungsi default atau fungsi yang akan dijalankan bila kita panggil nama

controller saja. Dalam kasus ini jika kita akses melalui url http://localhost/mahasiswa/Auth, maka

fungsi index() inilah yang akan dipanggil. Fungsi ini mengecek apakah sudah sesi login bernilai TRUE

jika ia maka akan memanggil controller Mahasiswa, jika tidak maka akan memanggil view signin.

signin() Fungsi signin() memanggil fungsi authenticate() pada model Auth_model untuk memastikan bahwa

username dan password yang diisi terdapat di database. Jika ada maka simpan data session dan

http://localhost/mahasiswa/Auth

12

panggil controller Mahasiswa, jika tidak maka beri peringatan melalui session flashdata bahwa

username dan password salah, dan panggil kembali controller Auth

signout() Fungsi signout() menghapus session user kemudian memanggil controller Auth

Views Pada view kita akan membuat beberapa file yaitu:

• _partials/head.php, file ini digunakan untuk load head file html, seperti css dsb.

• _partials/js.php, file ini digunakan untuk load file js dan script tambahan.

• signin.php, file ini digunakan untuk menampilkan form signin.

Folder _partials kita gunakan untuk menampung file php yang berupa penggalan code. Tujuan utama

dalam melakukan hal ini adalah supaya kita dapat mengurangi baris code yang sama.

_partials/head.php



<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-

scale=1.0, shrink-to-fit=no">



<title>Mahasiswa - STMIK</title>



<link rel="icon" href="<?php echo base_url('/assets/images/CodeIgniter_ico

n.png') ?>" type="image/icon">



<link href="<?php echo base_url('assets/sb-admin-2/vendor/fontawesome-

free/css/all.min.css');?>" rel="stylesheet" type="text/css">



<link href="<?php echo base_url('assets/sb-admin-2/css/sb-admin-

2.min.css') ?>" rel="stylesheet">



<link href="<?php echo base_url('assets/sb-admin-

2/vendor/datatables/dataTables.bootstrap4.css') ?>" rel="stylesheet">

<link href="<?php echo base_url('assets/css/buttons.dataTables.min.css') ?

>" rel="stylesheet">

<link href="<?php echo base_url('assets/css/responsive.dataTables.min.css'

) ?>" rel="stylesheet">



<link href="<?php echo base_url('assets/css/custom.css') ?>" rel="styleshe

et">



_partials/js.php

13



<script src="<?php echo base_url('assets/sb-admin-

2/vendor/jquery/jquery.min.js') ?>"></script>


2/vendor/bootstrap/js/bootstrap.bundle.min.js');?>"></script>

<script src="<?php echo base_url('assets/sb-admin-2/vendor/jquery-

easing/jquery.easing.min.js');?>"></script>



<script src="<?php echo base_url('assets/sb-admin-2/js/sb-admin-

2.js') ?>"></script>


2/vendor/datatables/jquery.dataTables.js') ?>"></script>




2/vendor/datatables/dataTables.bootstrap4.js') ?>"></script>

<script src="<?php echo base_url('assets/js/dataTables.responsive.min.js')

?>"></script>



<script src="<?php echo base_url('assets/js/dataTables.buttons.min.js') ?>

"></script>

<script src="<?php echo base_url('assets/js/buttons.flash.min.js') ?>"></s

cript>

<script src="<?php echo base_url('assets/js/buttons.html5.min.js') ?>"></s

cript>

<script src="<?php echo base_url('assets/js/buttons.print.min.js') ?>"></s

cript>



<script src="<?php echo base_url('assets/js/jszip.min.js') ?>"></script>



<script src="<?php echo base_url('assets/js/pdfmake.min.js') ?>"></script>

<script src="<?php echo base_url('assets/js/vfs_fonts.js') ?>"></script>



<script>

$(document).ajaxStart(function(){

$("#loader").css("display", "block");

});

$(document).ajaxComplete(function(){

$("#loader").css("display", "none");

});

$(document).ajaxError(function(){

$("#loader").css("display", "none");

$('#message').html('<div class="alert alert-

danger" role="alert">Kesalahan sistem<button type="button" class="close" data-

dismiss="alert" aria-label="Close"><span aria-

hidden="true">×</span></button></div>');

});

function is_number(evt) {

14

evt = (evt) ? evt : window.event;

var charCode = (evt.which) ? evt.which : evt.keyCode;

if (charCode > 31 && (charCode < 48 || charCode > 57))

{

return false;

}

return true;

}

</script>



signin.php

<?php


?>

<!DOCTYPE html>

<html lang="en">

<head>

<?php $this->load->view('_partials/head'); ?>

</head>

<body>

<div class="row">

<div class="container card col-xs-10 col-sm-8 col-md-6 mx-auto mr-auto ml-

auto mt-5" id="container">

<div id="banner"><img class="img-

fluid" src="<?php echo base_url('assets/images/CodeIgniter_banner.png');?>"></

div>

<div class="h4 text-center">Aplikasi Data Mahasiswa</div>

<div class="card-body">

<form class="row" action="<?php echo base_url('Auth/signin');?>" m

ethod="post">

<?php // jika terdapat pesan kesalahan

if ($this->session->flashdata('fail')): ?>

<div class="alert alert-danger col-lg-12" role="alert">

<?php echo $this->session->flashdata('fail'); ?>

<button type="button" class="close" data-

dismiss="alert" aria-label="Close">

<span aria-hidden="true">×</span>

</button>

</div>

<?php endif; ?>

<div class="form-group col-12 row">

<label class="d-none d-md-block col-md-

4" for="username">Nama User</label>

<input class="form-control col-sm-12 col-md-8" required

15

type="text" name="username" id="username" placeholder=

"Username" maxlength="50"/>

</div>


<label class="d-none d-md-block col-md-

4" for="password">Kata Sandi</label>

<input class="form-control col-sm-12 col-md-8" required

type="password" name="password" id="password" placehol

der="Password" minlength="8"/>

</div>


<div class="col-4"></div>

<div class="col-8 pl-0">

<input class="btn btn-

primary w100px" type="submit" value="Sign In" />

</div>

</div>

</form>

</div>

</div>

</div>

<?php $this->load->view("_partials/js.php") ?>

</body>

</html>

Menjalankan Modul Login Bukalah browser chrome lalu masukkan URL localhost/mahasiswa, URL ini tidak mendefinisikan

controller yang digunakan, sehingga CodeIgniter akan memanggil controller default yang telah kita set

menjadi controller Auth (sebelumnya controller Welcome) pada file config/routes.php, serta fungsi

default pada controller Auth tersebut yaitu fungsi index().

Apabila berhasil akan muncul tampilan sebagai berikut:

16

Selanjutnya kita bisa coba melakukan signin dengan memasukkan data keliru seperti username

cobausername dan password cobaaja kemudian klik tombol Sign In, maka akan muncul tampilan

berikut:

Akan muncul pesan kesalahan bahwa panjang karakter minimal 8 karakter (pesan bisa saja berbeda

tergantung setting bahasa), hal ini merupakan bentuk validasi di sisi client (file

application/view/signin.php).

Selanjutnya kita bisa coba lagi dengan data keliru seperti username cobausername dan password

cobalagi kemudian klik tombol Sign In, maka akan muncul tampilan berikut:

Akan muncul pesan kesalahan bahwa username dan password salah!

Berikutnya kita bisa cobalagi dengan data yang benar yaitu ....... coba diingat lagi username dan

password yang sudah kita buat ketika membuat database. Kemudian akan muncul tampilan berikut:

17

Silahkan diskusikan kenapa muncul tampilan error tersebut di atas.

Catatan, pada file view/signin.php kita telah menggunakan bootstrap 4 untuk merancang sebuah

tampilan yang responsive. Hal ini dapat kita lihat apabila kita melakukan resize pada browser kita,

maka ukuran form dan isikan akan menyesuaikan dengan ukuran jendela browser.

18

Modul Mahasiswa

Model Program_studi_model.php Buahlah file bernama Program_studi_model.php di dalam folder application/model

<?php


class Program_studi_model extends CI_Model

{

public function get_by_id($id)

{

$this->db->where('id',$id);

return $this->db->get('program_studi')->row_array();

}

public function get_all()

{

return $this->db->get('program_studi')->result_array();

}

} Model Program_studi_model.php berfungsi untuk mengambil data program studi secara dinamis dari

database.

Model Mahasiswa_model.php Buahlah file bernama Mahasiswa_model.php di dalam folder application/model

<?php


class Mahasiswa_model extends CI_Model

{

// column yang kita gunakan untuk sorting

var $column_order = array('nim','nama','jenis_kelamin','tempat','tanggal')

;

// column yang kita gunakan untuk searching

var $column_search = array('nim','nama','jenis_kelamin','tempat','tanggal'

);

// field sorting default

var $order = array('nim' => 'desc');

private function _get_datatables_query()

{

$this->db->from('mahasiswa');

$i = 0;

foreach($this->column_search as $item)

{

19

// jalankan ketika user mengetik value di kotak search datatables

if ($_POST['search']['value'])

{

if ($i == 0) // loop pertama

{

$this->db->group_start();

$this->db->like($item, $_POST['search']['value']);

}

else // loop kedua gunakan or_like

{

$this->db->or_like($item, $_POST['search']['value']);

}

if (count($this->column_search)-1 == $i) // loop terakhir

{

$this->db->group_end();

}

}

$i++;

}

}

public function get_datatables()

{

$this->_get_datatables_query();

// jika length bukan unlimited maka gunakan limit sebanyak length dimu

lai dari index start

// length dan start dari datatables

if ($_POST['length'] != -1) $this->db-

>limit($_POST['length'], $_POST['start']);

$query = $this->db->get();

return $query->result_array();

}

public function count_filtered()

// mendapatkan jumlah record termasuk ketika sudah di filter dari searchny

a datatables

{

$this->_get_datatables_query();


return $query->num_rows();

}

public function count_all()

// mendapatkan jumlah record tanpa filter dari datatables

{

$this->db->from('mahasiswa');


return $query->num_rows();

20

}

public function get_mahasiswa_by_nim($nim)

{

$this->db->where('nim', $nim);

return $this->db->get('mahasiswa')->row_array();

}

public function insert_mahasiswa($file_foto)

// melakukan penambahan data mahasiswa baru

{

$data_mahasiswa = array(

'nim' => $this->input->post('nim',TRUE),

'nama' => $this->input->post('nama',TRUE),

'tempat' => $this->input->post('tempat',TRUE),

'tanggal' => $this->input->post('tanggal',TRUE),

'jenis_kelamin' => $this->input->post('jenis_kelamin',TRUE),

'id_program_studi' => $this->input->post('id_program_studi',TRUE),

'file_foto' => $file_foto

);

$this->db->set($data_mahasiswa);

$this->db->insert('mahasiswa');

return $this->db->affected_rows();

}

public function update_mahasiswa($file_foto = NULL)

// melakukan perubahan data mahasiswa, nim tidak boleh diubah

{

$data_mahasiswa = array(

'nama' => $this->input->post('nama',TRUE),

'tempat' => $this->input->post('tempat',TRUE),

'tanggal' => $this->input->post('tanggal',TRUE),

'jenis_kelamin' => $this->input->post('jenis_kelamin',TRUE),

'id_program_studi' => $this->input->post('id_program_studi',TRUE)

);

if ($file_foto != NULL)

// jika file_foto terisi maka di update

// jika NULL maka file_foto tidak perlu di update

{

$data_mahasiswa['file_foto'] = $file_foto;

}

$nim = $this->input->post('nim',TRUE);

$this->db->where('nim',$nim);

$this->db->update('mahasiswa',$data_mahasiswa);


}

public function delete_mahasiswa($nim)

21

// melakukan penghapusan data mahasiswa

{

$this->db->where('nim',$nim);

$this->db->delete('mahasiswa');


}

}

Penjelasan Mahasiswa_model.php Model Mahasiswa_model.php terdiri dari beberapa fungsi berikut:

• _get_datatables_query()

Fungsi ini digunakan untuk mendapatkan query berdasarkan interaksi user dengan datatables

seperti filter (atau search), merubah length (jumlah record yg ditampilkan), pagination dan

sebagainya.

• get_datatables()

Fungsi ini digunakan untuk mendapatkan data berdasarkan query dari

_get_datatables_query().

• count_filtered()

Fungsi ini digunakan untuk mendapatkan jumlah data berdasarkan query dari

_get_datatables_query().

• count_all()

Fungsi ini digunakan untuk mendapatkan jumlah data keseluruhan.

• get_mahasiswa_by_nim($nim)

Fungsi ini digunakan untuk mendapatkan data mahasiswa berdasarkan nim.

• insert_mahasiswa()

Fungsi ini digunakan untuk melakukan insert dari POST ke tabel mahasiswa.

• update_mahasiswa($file_foto = NULL)

Fungsi ini digunakan untuk melakukan update dari POST ke tabel mahasiswa, apabila user

tidak memilih file foto baru maka, file foto tidak akan di upload.

• delete_mahasiswa($nim)

Fungsi ini digunakan untuk melakukan penghapusan data mahasiswa.

Catatan, fungsi yang diawali dengan underscore ( _ ) merupakan fungsi bersifat private yang hanya

dapat digunakan pada kelas itu sendiri.

Controller Mahasiswa.php Buatlah sebuah file bernama Mahasiswa.php di dalam folder application/controller

<?php


class Mahasiswa extends CI_Controller {


{


$this->load->model('Mahasiswa_model');

22

$this->load->model('Program_studi_model');

if (!$this->session->userdata('login'))

// jika login false maka redirect ke controller Auth

{

redirect('Auth');

}

}

public function index()

{

$data['content'] = 'mahasiswa/list';

$data['partials'] = array(

'mahasiswa/js','mahasiswa/modal'

);

$data['program_studies'] = $this->Program_studi_model->get_all();

$this->load->view('template', $data);

}

public function ajax_list()

{

$list = $this->Mahasiswa_model->get_datatables();

$data = array();

$no = $this->input->post('start');

// $row berisi array yang akan di tampilkan pada satu row di datatable

s

// $data berisi array dari $row

foreach ($list as $item)

{

$row = array();

$row[] = $item['nim'];

$row[] = strtoupper($item['nama']);

$row[] = strtoupper($item['jenis_kelamin']);

$row[] = strtoupper($item['tempat']);

$row[] = $item['tanggal'];

$program_studi = $this->Program_studi_model-

>get_by_id($item['id_program_studi']);

$row[] = strtoupper($program_studi['nama']);

$row[] = "<img class='img-

fluid' style='width:100px;' src=".site_url('uploads/'.$item['file_foto']).">";

$row[] = "<a class='btn btn-small text-warning ml-1 pl-0 mr-1 pr-

0' onclick=edit_mahasiswa('".$item['nim']."')><i class='fas fa-

edit' title='Update'></i></a><a class='btn btn-small text-danger ml-1 pl-0 mr-

1 pr-0' onclick=delete_confirm('".$item['nim']."')><i class='fas fa-

trash' title='Hapus'></i></a>";

$data[] = $row;

}

$output = array(

"draw"=>$_POST['draw'],

23

"recordsTotal"=> $this->Mahasiswa_model->count_all(),

"recordsFiltered" => $this->Mahasiswa_model->count_filtered(),

"data"=>$data

);

echo json_encode($output);

}

public function ajax_add()

{

// melakukan validasi berdasarkan rules

$rules = $this->_get_validation_rules();

$this->form_validation->set_rules($rules);

// nim ketika add harus unik

$this->form_validation-

>set_rules('nim','NIM','required|exact_length[9]|is_unique[mahasiswa.nim]');

// userfile wajib diisi ketika nambah data baru

if (empty($_FILES['userfile']['name']))

{

$this->form_validation->set_rules('userfile', 'Foto', 'required');

}

if ($this->form_validation->run())

{

$file_foto = $this->_do_upload();

if ($this->Mahasiswa_model->insert_mahasiswa($file_foto) > 0)

{

echo json_encode(array('status'=>TRUE,'message'=>'Tambah mahas

iswa berhasil'));

}

else

{

echo json_encode(array('status'=>FALSE,'message'=>'Tambah maha

siswa gagal'));

}

}

else

{

$invalid = $this->form_validation->error_array();

$data = array();

$data['error_string'] = array();

$data['inputerror'] = array();

$data['status'] = FALSE;

foreach ($invalid as $key=>$value)

{

$data['inputerror'][] = $key;

$data['error_string'][] = $value;

}

echo json_encode($data);

}

24

}

public function ajax_edit($nim)

{

$data = $this->Mahasiswa_model->get_mahasiswa_by_nim($nim);

if (empty($data))

{

echo json_encode(array('status'=>FALSE,'message'=>'Mahasiswa tidak

ketemu'));

exit();

}

$data['status'] = TRUE;


}

public function ajax_update()

{

// melakukan validasi berdasarkan rules

$rules = $this->_get_validation_rules();

$this->form_validation->set_rules($rules);

// nim ketika edit tidak unik

$this->form_validation-

>set_rules('nim','NIM','required|exact_length[9]');

// userfile tidak wajib diisi ketika edit

if ($this->form_validation->run())

{

if (!empty($_FILES['userfile']['name']))

{

$file_foto = $this->_do_upload();

}

$this->load->model('Mahasiswa_model');

if (isset($file_foto))

{

$result = $this->Mahasiswa_model-

>update_mahasiswa($file_foto);

}

else

{

$result = $this->Mahasiswa_model->update_mahasiswa();

}

if ($result > 0)

{

echo json_encode(array('status'=>TRUE,'message'=>'Update mahas

iswa berhasil'));

}

else

{

25

echo json_encode(array('status'=>FALSE,'message'=>'Update maha

siswa gagal'));

}

}

else

{

$invalid = $this->form_validation->error_array();

$data = array();

$data['error_string'] = array();

$data['inputerror'] = array();


foreach ($invalid as $key=>$value)

{

$data['inputerror'][] = $key;

$data['error_string'][] = $value;

}


}

}

public function ajax_delete($nim)

{

$mahasiswa = $this->Mahasiswa_model->get_mahasiswa_by_nim($nim);

// hapus file foto mahasiswa tersebut dari server

if (file_exists('uploads/'.$mahasiswa['file_foto']))

{

unlink('uploads/'.$mahasiswa['file_foto']);

}

$result = $this->Mahasiswa_model->delete_mahasiswa($nim);

if ($result > 0)

{

echo json_encode(array('status'=>TRUE,'message'=>'Hapus mahasiswa

berhasil'));

}

else

{

echo json_encode(array('status'=>FALSE,'message'=>'Hapus mahasiswa

gagal'));

}

}

private function _do_upload()

{

$config = array(

'file_name' => $this->input->post('nim',TRUE),

'upload_path' => "uploads",

'allowed_types' => "jpg|jpeg|png",

'overwrite' => TRUE,

26

'max_size' => "512"

);

$this->load->library('upload', $config);

if ($this->upload->do_upload())

{

return $this->upload->data('file_name');

}

else

{

$data = array();


$data['inputerror'][] = 'userfile';

$data['error_string'][] = $this->upload->display_errors('', '');;


exit();

}

}

private function _get_validation_rules()

// validasi form kecuali nim dan userfile

{

$rules = array(

array(

'field' => 'nama',

'label' => 'Nama',

'rules' => 'required'

),

array(

'field' => 'tempat',

'label' => 'Tempat Lahir',


),

array(

'field' => 'tanggal',

'label' => 'Tanggal Lahir',


),

array(

'field' => 'jenis_kelamin',

'label' => 'Jenis Kelamin',


),

array(

'field' => 'id_program_studi',

'label' => 'Program Studi',


)

);

27

return $rules;

}

}

Penjelasan Mahasiswa.php Controller Mahasiswa.php terdiri dari beberapa fungsi berikut:

• __contruct()

Merupakan fungsi construktor controller Mahasiswa. Baris kode disini akan dijalankan

terlebih dahulu sebelum fungsi lainnya, seperti memanggil model dan mengecek apakah user

sudah melakukan login.

• index()

Merupakan fungsi default controller Mahasiswa, fungsi ini digunakan untuk memanggil data

dan menampilkannya pada view.

• ajax_list()

Fungsi ini digunakan untuk mendapatkan data yang akan ditampilkan baris per baris pada

datatable di view.

• ajax_add()

Fungsi ini digunakan untuk melakukan validasi isian form kemudian melakukan upload file foto

serta penambahan data mahasiswa.

• ajax_edit($nim)

Fungsi ini digunakan untuk mendapatkan data mahasiswa (berdasarkan nim) yang akan diedit.

• ajax_update()

Fungsi ini digunakan untuk melakukan validasi isian form kemudian melakukan upload file foto

(jika ada) serta perubahan data mahasiswa.

• ajax_delete($nim)

Fungsi ini digunakan untuk melakukan penghapusan data mahasiswa berdasarkan nim.

• _do_upload()

Fungsi ini digunakan untuk melakukan upload file foto dari perangkat client ke server.

• _get_validation_rules()

Fungsi ini digunakan untuk mendapatkan aturan validasi untuk item pada form mahasiswa.

Views Pada view kita akan membuat beberapa file yaitu:

• _partials/footer.php, file ini berisi tampilan footer.

• _partials/modal.php, file ini berisi modal untuk signout.

• _partials/navbar.php, file ini berisi tampilan untuk bar navigasi.

• _partials/scrolltop.php, file ini berisi tampilan untuk scroll ke halaman atas.

• _partials/sidebar.php, file ini berisi tampilan menu samping.

• mahasiswa/list.php, file ini berisi tampilan laman mahasiswa.

• mahasiswa/js.php, file ini berisi javascript yang digunakan pada laman mahasiswa.

• mahasiswa/modal.php, file ini berisi modal form mahasiswa dan form confirmasi hapus data

mahasiswa.

• template.php, file ini berisi kerangka tampilan admin (setelah user login).

28

_partials/footer.php



<footer class="sticky-footer bg-light">

<div class="container my-auto">

<div class="copyright text-center my-auto">

<span>Wendy © 2020 - STMIK Pontianak</span>

</div>

</div>

</footer>



_partials/modal.php



<div class="modal fade" id="signout_modal" tabindex="-1" role="dialog" aria-

labelledby="exampleModalLabel" aria-hidden="true">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>

<button class="close" type="button" data-dismiss="modal" aria-

label="Close">


</button>

</div>

<div class="modal-

body">Klik "Sign Out" jika ingin mengakhiri sesi ini.</div>

<div class="modal-footer">

<button class="btn btn-secondary w100px" type="button" data-

dismiss="modal">Batal</button>

<a class="btn btn-

primary w100px" href="<?php echo base_url('Auth/signout')?>">Sign Out</a>

</div>

</div>

</div>

</div>



_partials/navbar.php



<nav class="navbar navbar-expand navbar-light bg-light shadow static-top">



<div class="navbar-brand mr-1" href="<?= base_url('Mahasiswa') ?>">



<button class="btn text-dark" id="sidebarToggle" href="#">

<i class="fas fa-bars"></i> Data Mahasiswa

</button>

</div>

29



<ul class="navbar-nav ml-auto float-right">

<li class="nav-item dropdown no-arrow">

<a class="nav-link dropdown-

toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-

haspopup="true"

aria-expanded="false">

<i class="fas fa-user-circle fa-

fw"></i> Selamat datang, <?= $this->session->userdata('username');?>

</a>

<div class="dropdown-menu dropdown-menu-right" aria-

labelledby="userDropdown">

<a class="dropdown-item" href="#">Ubah Password</a>

<div class="dropdown-divider"></div>

<a class="dropdown-item" href="#" data-toggle="modal" data-

target="#signout_modal">Sign Out</a>

</div>

</li>

</ul>

</nav>



_partials/scrolltop.php



<a class="scroll-to-top rounded" href="#page-top">

<i class="fas fa-angle-up"></i>

</a>



_partials/sidebar.php



<ul class="sidebar sidebar-dark bg-primary navbar-nav">

<li class="nav-item <?php echo (strtolower($this->uri-

>segment(1)) == 'dashboard') ? 'active' : '' ?>">

<a class="nav-link" href="#">

<i class="fas fa-fw fa-tachometer-alt"></i>

<span>Dashboard</span>

</a>

</li>

<li class="nav-item <?php echo (strtolower($this->uri-

>segment(1)) == 'mahasiswa') ? 'active' : '' ?>">

<a class="nav-link" href="<?= base_url('Mahasiswa') ?>">

<i class="fas fa-fw fa-users"></i>

<span>Mahasiswa</span>

</a>

</li>

30

<li class="nav-item <?= (strtolower($this->uri-

>segment(1)) == 'setting') ? 'active' : '' ?>">

<a class="nav-link" href="#">

<i class="fas fa-fw fa-cog"></i>

<span>Setting</span>

</a>

</li>

</ul>



mahasiswa/list.php



<div class="container-fluid">

<div class="row">

<div class="col-12 mb-2 mt-2">

<div class="card border-left-primary h-100 shadow py-2">

<div class="card-body">

<div class="row mb-2">

<div class="col-8 text-lg font-weight-bold text-

primary"><i class="fas fa-users"></i> <span>Data Mahasiswa</span></div>

<div class="col-4 ml-auto">

<button class="float-right btn btn-

primary w100px" onclick="add_mahasiswa()"><i class="fas fa-

plus"></i> Add</button>

</div>

</div>

<table class="w-100 table table-

hover" id="datatable_mahasiswa">

<thead>

<tr>

<th class="align-middle" data-

priority="1">NIM</th>


priority="1">Nama</th>


priority="2">Jenis Kelamin</th>


priority="2">Tempat</th>


priority="2">Tanggal Lahir</th>


priority="1">Program Studi</th>


priority="1">Foto</th>


priority="1">Aksi</th>

</tr>

31

</thead>

<tbody>

</tbody>

<tfoot>

<tr>

<th class="align-middle">NIM</th>

<th class="align-middle">Nama</th>

<th class="align-middle">Jenis Kelamin</th>

<th class="align-middle">Tempat</th>

<th class="align-middle">Tanggal Lahir</th>

<th class="align-middle">Program Studi</th>

<th class="align-middle">Foto</th>

<th class="align-middle">Aksi</th>

</tr>

</tfoot>

</table>

</div>

</div>

</div>

</div>

</div>



mahasiswa/js.php



<script>

id = '';

$(document).ready(function() {

// inisiasi dataTable document

table = $('#datatable_mahasiswa').DataTable({

// datatable dengan filter di sisi server

"serverSide": true,

"order": [],

// memanggil ajax_list untuk menampilkan data mahasiswa

"ajax": {

"url": "<?php echo site_url('Mahasiswa/ajax_list/');?>",

"data" : {},

"type": "POST"

},

// kolom paling kanan tidak bisa di sortir (kolom aksi)

"columnDefs": [{

"targets": [-1],

"orderable": false,

},],

// mengubah bahasa datatable

language: {

search: "",

32

searchPlaceholder: "Cari",

lengthMenu: "Tampil _MENU_"

},

// menggunakan plugin responsive pada datatables

responsive: true,

// menggunakan bootstrap untuk tampilan datatables

dom:

"<'ui grid'"+

"<'row'"+

"<'d-none d-md-block col-md-3'"+

"<'float-left'l>"+

">"+

"<'d-none d-md-block col-md-6'"+

"<'float-left'f>"+

">"+

"<'col-xs-6 col-md-3'"+

"<'float-right'B>"+

">"+

">"+

"<'row dt-table'"+

"<'col-12'tr>"+

">"+

"<'row'"+

"<'col-8'i>"+

"<'text-right col-4'p>"+

">"+

">",

// menggunakan plugin buttons pada datatables

buttons: [

{

extend: 'excel',

exportOptions: {

columns: [0, 1, 2, 3, 4, 5]

}

},

{

extend: 'pdf',

exportOptions: {

columns: [0, 1, 2, 3, 4, 5]

}

}

]

});

//set input/textarea/select event when change value, remove class erro

r and remove text help block

$("input").change(function(){

$(this).parent().parent().removeClass('has-error');

33

$(this).next().empty();

});

$("select").change(function(){

$(this).parent().parent().removeClass('has-error');

$(this).next().empty();

});

$('#userfile').bind('change', function()

// menampilkan ukuran file ketika user input file

{

$('#file_info').html('<small class="text-

muted">file size='+Math.ceil(this.files[0].size/1024)+' KB, tipe='+this.files[

0].name.split('.').pop()+'</small>');

});

})

function add_mahasiswa()

{

save_method = 'add';

$('#form_mahasiswa')[0].reset(); // reset form

$('.form-group').removeClass('has-error'); // clear error class

$('.help-block').empty();// clear error string

$('#btnSave').text('Simpan'); //change button text

$('#modal-mahasiswa-title').text(' Tambah Mahasiswa');

$('#nim').attr('readonly',false); // dapat mengubah nim

$('#message').html('');

$('#file_info').html('');

$('#modal_mahasiswa').modal('show'); // show bootstrap modal when comp

lete loaded

}

function edit_mahasiswa(nim)

{

save_method = 'update';

$('#form_mahasiswa')[0].reset(); // reset form

$('.form-group').removeClass('has-error'); // clear error class

$('.help-block').empty(); // clear error string

$('#btnSave').text('Update'); //change button text

$('#modal-mahasiswa-title').text(' Update Mahasiswa');

$('#nim').attr('readonly',true); // tidak dapat mengubah nim


$('#file_info').html('');

//Ajax Load data from ajax

$.ajax({

url : "<?php echo site_url('Mahasiswa/ajax_edit/')?>/" + nim,

type: "GET",

dataType: "JSON",

success: function(data)

34

{

if (data.status)

{

$('[name="nim"]').val(data.nim);

$('[name="nama"]').val(data.nama);

$('[name="tempat"]').val(data.tempat);

$('[name="tanggal"]').val(data.tanggal);

$('[name="jenis_kelamin"]').val(data.jenis_kelamin);

$('[name="id_program_studi"]').val(data.id_program_studi);

$('#modal_mahasiswa').modal('show');

}

else

{

$('#modal_mahasiswa').modal('hide');

$('#message').html('<div class="mb-0 alert alert-

danger shadow border-left-danger mt-

2" role="alert">'+data.message+'<button type="button" class="close" data-



}

},

error: function (jqXHR, textStatus, errorThrown)

{



2" role="alert">Kesalahan sistem<button type="button" class="close" data-



}

});

}

function save()

{

$('#btnSave').text('Menyimpan...'); //change button text

$('#btnSave').attr('disabled',true); //set button disable

var url;

if(save_method == 'add') {

url = "<?php echo base_url('Mahasiswa/ajax_add')?>";

} else {

url = "<?php echo base_url('Mahasiswa/ajax_update')?>";

}

var form_data = new FormData($('#form_mahasiswa')[0]);

// ajax adding data to database

$.ajax({

url : url,

35

type: "POST",

data: form_data,

contentType: false,

processData: false,

dataType: "JSON",


{

if(data.status) //if success close modal and reload ajax table

{



success shadow border-left-success mt-




reload_table();

}

else

{

$('.form-group').removeClass('has-

error'); // clear error class

$('.help-block').empty(); // clear error string

for (var i = 0; i < data.inputerror.length; i++)

{

$('[name="'+data.inputerror[i]+'"]').parent().parent()

.addClass('has-error'); //select parent twice to select div form-

group class and add has-error class

$('[name="'+data.inputerror[i]+'"]').next().addClass()

; //select span help-block class set text error string

$('[name="'+data.inputerror[i]+'"]').next().text(data.

error_string[i]); //select span help-block class set text error string

}

}


$('#btnSave').attr('disabled',false); //set button enable

},


{







reload_table();


36

$('#btnSave').attr('disabled',false); //set button enable

}

});

}

function delete_mahasiswa(nim)

{

// ajax delete data to database

$.ajax({

url : "<?php echo base_url('Mahasiswa/ajax_delete')?>/"+nim,

type: "POST",

dataType: "JSON",


{

if (data.status)

{

//if success reload ajax table

$('#modal_delete_mahasiswa').modal('hide');


success shadow border-left-success mt-




reload_table();

}

else

{

$('#modal_delete_mahasiswa').modal('hide');


danger" role="alert">'+data.message+'<button type="button" class="close" data-



}

},


{

$('#delete_document_modal').modal('hide');






reload_table();

}

});

}

// menampilkan modal confirmation delete user

function delete_confirm(nim){

37


$('#btn-delete').attr('onclick',"delete_mahasiswa('"+nim+"')");

$('#modal_delete_mahasiswa').modal();

}

function reload_table()

{

table.ajax.reload(null,false); // reload ajax datatable

}

</script>



mahasiswa/modal.php





<div class="modal fade" id="modal_mahasiswa" role="dialog" aria="">

<div class="modal-dialog modal-lg">



<h4><i class="fas fa-user"></i><span class="modal-

title" id="modal-mahasiswa-title"></span></h4>

<button type="button" class="close" data-dismiss="modal" aria-

label="Close"><div aria-hidden="true">×</div></button>

</div>

<div class="modal-body form">

<form action="#" id="form_mahasiswa" class="form-

horizontal" enctype="multipart/form-data" >


<label class="d-none d-lg-block col-lg-

3" for="nim">NIM</label>

<input class="form-control col-md-12 col-lg-

9" name="nim" id="nim" type="text" placeholder="NIM" onkeypress="return is_num

ber(event)" maxlength="9" required />

<div class="help-block col-12 small text-

danger"></div>

</div>



3" for="nama">Nama</label>


9" name="nama" type="text" placeholder="Nama" required />


danger"></div>

</div>

38


3" for="tempat">Tempat Lahir</label>


9" name="tempat" type="text" placeholder="Tempat Lahir" required />


danger"></div>

</div>



3" for="tanggal">Tanggal Lahir</label>


9" name="tanggal" type="date" placeholder="Tanggal Lahir" required />


danger"></div>

</div>



3" for="jenis_kelamin">Jenis Kelamin</label>

<select class="form-control col-md-12 col-lg-

9" name="jenis_kelamin" required>

<option value="">--Pilih--</option>

<option value="Laki-laki">Laki-laki</option>

<option value="Perempuan">Perempuan</option>

</select>


danger"></div>

</div>



3" for="id_program_studi">Program Studi</label>

<select class="form-control col-md-12 col-lg-

9" name="id_program_studi" required>

<option value="">--Pilih--</option>

<?php foreach($program_studies as $row):?>

<option value="<?= $row['id']?>"><?= $row['nama']?

></option>

<?php endforeach;?>

</select>


danger"></div>

</div>

<div class="form-group mt-0 mb-1 col-md-12 col-lg-12 row">


3" for="userfile">Foto</label>

<input class="form-control-file pl-0 col-md-12 col-lg-

9" type="file" name="userfile" id="userfile"/>


danger"></div>

39

<div class="col-12" id="file_info"></div>

</div>

</form>

</div>


<button type="button" class="btn btn-secondary w100px" data-


<button type="button" class="btn btn-

primary w100px" id="btnSave" onclick="save()">Simpan</button>

</div>

</div>

</div>

</div>



<div class="modal fade" id="modal_delete_mahasiswa" tabindex="-

1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

<div class="modal-dialog" role="document">



<h5 class="modal-title" id="exampleModalLabel">Anda yakin?</h5>

<button class="close" type="button" data-dismiss="modal" aria-

label="Close">


</button>

</div>

<div class="modal-

body">Mahasiswa yang dihapus tidak akan bisa dikembalikan.</div>


<button class="btn btn-secondary w100px" type="button" data-


<a id="btn-delete" class="btn btn-danger w100px" href="#">Delete</a>

</div>

</div>

</div>

</div> 



template.php

<?php


?>

<!DOCTYPE html>

<html lang="en">

<head>

<?php $this->load->view('_partials/head'); ?>

</head>

40

<body id="page_top">



<div id='loader' style="display:none;top:50%;left:50%;margin-left:-

213px;margin-top:-120px;position:fixed;padding:2px;z-index:1060;">

<img src='<?php echo site_url('assets/images/loading_cat_girl.gif');?>

'>

</div>

<?php $this->load->view('_partials/navbar');?>

<div id="wrapper">

<?php $this->load->view('_partials/sidebar');?>

<div id="content-wrapper">

<div id="content">

<div class="container-fluid" id="message">

</div>

<?php (!empty($content)) ? $this->load->view($content) : '';?>

</div>



<?php $this->load->view('_partials/footer');?>

</div>



</div>



<?php $this->load->view("_partials/scrolltop"); ?>

<?php $this->load->view("_partials/modal"); ?>

<?php $this->load->view("_partials/js"); ?>

<?php if(isset($partials))

{

foreach($partials as $partial)

{

$this->load->view($partial);

}

}

?>

</body>

</html>

Menjalankan Modul Mahasiswa Untuk dapat mengakses modul mahasiswa kita harus melakukan login dulu (lihat bagian sebelumnya),

setelah login Anda akan diarahkan ke laman Mahasiswa.

41

List

Keterangan:

1. Navigation bar, file _partials/navbar.php

2. Side bar, file _partials/sidebar.php

3. Content, file mahasiswa/list.php

4. Footer, file _partials/footer.php

Add Untuk melakukan penambahan data klik tombol Add di kanan atas.

Maka akan muncul modal berupa form mahasiswa

42

Edit Mirip dengan add namun data form telah terisi

43

Delete

Export PDF dan Excel Dengan memanfaatkan extension dari datatables kita dapat melakukan export data pada datatables

ke beberapa format, namun disini kita menggunakan PDF dan Excel.

Anda hanya perlu melakukan filter dan display untuk mendapatkan tampilan yang Anda inginkan pada

datatables kemudian klik tombol PDF maupun Excel.

44

Anda bisa lakukan modifikasi pada file mahasiswa/js.php untuk menampilkan / menyembunyikan field

/ kolom sesuai kebutuhan Anda.

45

Penutup Melalui tutorial ini, besar harapan saya agar mahasiswa, maupun calon mahasiswa dapat memahami

bahwa penggunaan framework dan template yang tepat dapat menghemat waktu dan tenaga secara

signifikan, secara khusus tutorial ini di bangun dengan PHP Framework CodeIgniter 3 dan beberapa

extension tambahan seperti sb-admin-2, bootstrap 4, jQuery, datatables, dan sebagainya.

Penggunaan extension tersebut proses pengembangan aplikasi kita jauh lebih mudah.

Sebagai contohnya, penggunaan datatables membuat kita dengan mudah membuat tampilan tabel

lengkap dengan fitur filter, display, paggination bahkan extension datatables (seperti buttons, jszip,

pdfmake) memungkinkan kita melakukan export data ke format lain dengan ckup menambahkan

beberapa baris script.

Akhir kata penulis menyampaikan permintaan maaf apabila terdapat kekurangan serta mengucapkan

banyak terima kasih atas dukungan dari para sahabat dan keluarga yang selalu mendukung penuh

hingga terealisasinya tutorial ini.

Pontianak, 22 Agustus 2020

Wendy, S.Kom., M.Sc.

Links & Reading Materials https://codeigniter.com/

https://www.apachefriends.org/

https://getbootstrap.com/

https://startbootstrap.com/

https://code.visualstudio.com/


https://google.com/chrome/

https://www.petanikode.com/

https://mbahcoding.com/

https://codeigniter.com/

https://www.apachefriends.org/

https://getbootstrap.com/

https://startbootstrap.com/

https://code.visualstudio.com/


https://google.com/chrome/

https://www.petanikode.com/

https://mbahcoding.com/

pemrograman berbasis web menggunakan framework ......aplikasi dengan ui (user interface) maupun ux...

Documents