Pemrograman Berbasis Web Menggunakan Framework ......aplikasi dengan UI (User Interface) maupun UX...
Transcript of 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:
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
defined('BASEPATH') OR exit('No direct script access allowed');
class Auth extends CI_Controller {
public function __construct()
{
parent::__construct();
}
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
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
<!-- Buka file 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">
<!-- judul web -->
<title>Mahasiswa - STMIK</title>
<!-- favicon -->
<link rel="icon" href="<?php echo base_url('/assets/images/CodeIgniter_ico
n.png') ?>" type="image/icon">
<!-- font awesome -->
<link href="<?php echo base_url('assets/sb-admin-2/vendor/fontawesome-
free/css/all.min.css');?>" rel="stylesheet" type="text/css">
<!-- sb admin 2 CSS-->
<link href="<?php echo base_url('assets/sb-admin-2/css/sb-admin-
2.min.css') ?>" rel="stylesheet">
<!-- datatables -->
<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">
<!-- custom css -->
<link href="<?php echo base_url('assets/css/custom.css') ?>" rel="styleshe
et">
<!-- Tutup file head.php -->
_partials/js.php
<!-- Buka file js.php -->
13
<!-- Bootstrap core javascript -->
<script src="<?php echo base_url('assets/sb-admin-
2/vendor/jquery/jquery.min.js') ?>"></script>
<script src="<?php echo base_url('assets/sb-admin-
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>
<!-- sb admin 2 -->
<script src="<?php echo base_url('assets/sb-admin-2/js/sb-admin-
2.js') ?>"></script>
<script src="<?php echo base_url('assets/sb-admin-
2/vendor/datatables/jquery.dataTables.js') ?>"></script>
<!-- Datatables -->
<script src="<?php echo base_url('assets/sb-admin-
2/vendor/datatables/dataTables.bootstrap4.js') ?>"></script>
<script src="<?php echo base_url('assets/js/dataTables.responsive.min.js')
?>"></script>
<!-- Datatables button -->
<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>
<!-- jszip untuk export datatables ke excel-->
<script src="<?php echo base_url('assets/js/jszip.min.js') ?>"></script>
<!-- pdfmake untuk export datatables ke pdf-->
<script src="<?php echo base_url('assets/js/pdfmake.min.js') ?>"></script>
<script src="<?php echo base_url('assets/js/vfs_fonts.js') ?>"></script>
<!-- menampilkan animasi gif saat ajax loading -->
<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>
<!-- Tutup file js.php -->
signin.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!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>
<div class="form-group col-12 row">
<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="form-group col-12 row">
<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
defined('BASEPATH') OR exit('No direct script access allowed');
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
defined('BASEPATH') OR exit('No direct script access allowed');
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();
$query = $this->db->get();
return $query->num_rows();
}
public function count_all()
// mendapatkan jumlah record tanpa filter dari datatables
{
$this->db->from('mahasiswa');
$query = $this->db->get();
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);
return $this->db->affected_rows();
}
public function delete_mahasiswa($nim)
21
// melakukan penghapusan data mahasiswa
{
$this->db->where('nim',$nim);
$this->db->delete('mahasiswa');
return $this->db->affected_rows();
}
}
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
defined('BASEPATH') OR exit('No direct script access allowed');
class Mahasiswa extends CI_Controller {
public function __construct()
{
parent::__construct();
$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;
echo json_encode($data);
}
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();
$data['status'] = FALSE;
foreach ($invalid as $key=>$value)
{
$data['inputerror'][] = $key;
$data['error_string'][] = $value;
}
echo json_encode($data);
}
}
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['status'] = FALSE;
$data['inputerror'][] = 'userfile';
$data['error_string'][] = $this->upload->display_errors('', '');;
echo json_encode($data);
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',
'rules' => 'required'
),
array(
'field' => 'tanggal',
'label' => 'Tanggal Lahir',
'rules' => 'required'
),
array(
'field' => 'jenis_kelamin',
'label' => 'Jenis Kelamin',
'rules' => 'required'
),
array(
'field' => 'id_program_studi',
'label' => 'Program Studi',
'rules' => 'required'
)
);
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
<!-- File 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>
<!-- / file footer.php -->
_partials/modal.php
<!-- modal.php signout modal-->
<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">
<span aria-hidden="true">×</span>
</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>
<!-- / modal.php -->
_partials/navbar.php
<!-- File navbar.php -->
<nav class="navbar navbar-expand navbar-light bg-light shadow static-top">
<!-- Navbar Sitename -->
<div class="navbar-brand mr-1" href="<?= base_url('Mahasiswa') ?>">
<!-- Navbar Toggle Sidebar -->
<button class="btn text-dark" id="sidebarToggle" href="#">
<i class="fas fa-bars"></i> Data Mahasiswa
</button>
</div>
29
<!-- Navbar Usermenu -->
<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>
<!-- / File navbar.php -->
_partials/scrolltop.php
<!-- scrolltop.php-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- / scrolltop.php -->
_partials/sidebar.php
<!-- File 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>
<!-- / File sidebar.php -->
mahasiswa/list.php
<!-- 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>
<th class="align-middle" data-
priority="1">Nama</th>
<th class="align-middle" data-
priority="2">Jenis Kelamin</th>
<th class="align-middle" data-
priority="2">Tempat</th>
<th class="align-middle" data-
priority="2">Tanggal Lahir</th>
<th class="align-middle" data-
priority="1">Program Studi</th>
<th class="align-middle" data-
priority="1">Foto</th>
<th class="align-middle" data-
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/list.php -->
mahasiswa/js.php
<!-- 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
$('#message').html('');
$('#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-
dismiss="alert" aria-label="Close"><span aria-
hidden="true">×</span></button></div>');
}
},
error: function (jqXHR, textStatus, errorThrown)
{
$('#message').html('<div class="mb-0 alert alert-
danger shadow border-left-danger mt-
2" role="alert">Kesalahan sistem<button type="button" class="close" data-
dismiss="alert" aria-label="Close"><span aria-
hidden="true">×</span></button></div>');
}
});
}
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",
success: function(data)
{
if(data.status) //if success close modal and reload ajax table
{
$('#modal_mahasiswa').modal('hide');
$('#message').html('<div class="mb-0 alert alert-
success shadow border-left-success mt-
2" role="alert">'+data.message+'<button type="button" class="close" data-
dismiss="alert" aria-label="Close"><span aria-
hidden="true">×</span></button></div>');
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').text('Simpan'); //change button text
$('#btnSave').attr('disabled',false); //set button enable
},
error: function (jqXHR, textStatus, errorThrown)
{
$('#modal_mahasiswa').modal('hide');
$('#message').html('<div class="mb-0 alert alert-
danger shadow border-left-danger mt-
2" role="alert">Kesalahan sistem<button type="button" class="close" data-
dismiss="alert" aria-label="Close"><span aria-
hidden="true">×</span></button></div>');
reload_table();
$('#btnSave').text('Simpan'); //change button text
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",
success: function(data)
{
if (data.status)
{
//if success reload ajax table
$('#modal_delete_mahasiswa').modal('hide');
$('#message').html('<div class="mb-0 alert alert-
success shadow border-left-success mt-
2" role="alert">'+data.message+'<button type="button" class="close" data-
dismiss="alert" aria-label="Close"><span aria-
hidden="true">×</span></button></div>');
reload_table();
}
else
{
$('#modal_delete_mahasiswa').modal('hide');
$('#message').html('<div class="mb-0 alert alert-
danger" role="alert">'+data.message+'<button type="button" class="close" data-
dismiss="alert" aria-label="Close"><span aria-
hidden="true">×</span></button></div>');
}
},
error: function (jqXHR, textStatus, errorThrown)
{
$('#delete_document_modal').modal('hide');
$('#message').html('<div class="mb-0 alert alert-
danger shadow border-left-danger mt-
2" role="alert">Kesalahan sistem<button type="button" class="close" data-
dismiss="alert" aria-label="Close"><span aria-
hidden="true">×</span></button></div>');
reload_table();
}
});
}
// menampilkan modal confirmation delete user
function delete_confirm(nim){
37
$('#message').html('');
$('#btn-delete').attr('onclick',"delete_mahasiswa('"+nim+"')");
$('#modal_delete_mahasiswa').modal();
}
function reload_table()
{
table.ajax.reload(null,false); // reload ajax datatable
}
</script>
<!-- / mahasiswa/js.php -->
mahasiswa/modal.php
<!-- File mahasiswa/modal.php -->
<!-- modal_mahasiswa -->
<div class="modal fade" id="modal_mahasiswa" role="dialog" aria="">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<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" >
<div class="form-group col-12 row">
<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>
<div class="form-group col-12 row">
<label class="d-none d-lg-block col-lg-
3" for="nama">Nama</label>
<input class="form-control col-md-12 col-lg-
9" name="nama" type="text" placeholder="Nama" required />
<div class="help-block col-12 small text-
danger"></div>
</div>
<div class="form-group col-12 row">
38
<label class="d-none d-lg-block col-lg-
3" for="tempat">Tempat Lahir</label>
<input class="form-control col-md-12 col-lg-
9" name="tempat" type="text" placeholder="Tempat Lahir" required />
<div class="help-block col-12 small text-
danger"></div>
</div>
<div class="form-group col-12 row">
<label class="d-none d-lg-block col-lg-
3" for="tanggal">Tanggal Lahir</label>
<input class="form-control col-md-12 col-lg-
9" name="tanggal" type="date" placeholder="Tanggal Lahir" required />
<div class="help-block col-12 small text-
danger"></div>
</div>
<div class="form-group col-12 row">
<label class="d-none d-lg-block col-lg-
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>
<div class="help-block col-12 small text-
danger"></div>
</div>
<div class="form-group col-12 row">
<label class="d-none d-lg-block col-lg-
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>
<div class="help-block col-12 small text-
danger"></div>
</div>
<div class="form-group mt-0 mb-1 col-md-12 col-lg-12 row">
<label class="d-none d-lg-block col-lg-
3" for="userfile">Foto</label>
<input class="form-control-file pl-0 col-md-12 col-lg-
9" type="file" name="userfile" id="userfile"/>
<div class="help-block col-12 small text-
danger"></div>
39
<div class="col-12" id="file_info"></div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary w100px" data-
dismiss="modal">Batal</button>
<button type="button" class="btn btn-
primary w100px" id="btnSave" onclick="save()">Simpan</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal mahasiswa -->
<!-- Delete Confirmation-->
<div class="modal fade" id="modal_delete_mahasiswa" 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">Anda yakin?</h5>
<button class="close" type="button" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-
body">Mahasiswa yang dihapus tidak akan bisa dikembalikan.</div>
<div class="modal-footer">
<button class="btn btn-secondary w100px" type="button" data-
dismiss="modal">Batal</button>
<a id="btn-delete" class="btn btn-danger w100px" href="#">Delete</a>
</div>
</div>
</div>
</div> <!-- /.Delete confirmation -->
<!-- / File mahasiswa/modal.php -->
template.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php $this->load->view('_partials/head'); ?>
</head>
40
<body id="page_top">
<!-- Ajax Image loader -->
<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>
<!-- tutup content -->
<?php $this->load->view('_partials/footer');?>
</div>
<!-- tutup content-wrapper -->
</div>
<!-- tutup wrapper -->
<?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://www.navicat.com/
https://google.com/chrome/
https://www.petanikode.com/
https://mbahcoding.com/