Post on 28-Mar-2021
11
BAB II
RANCANGAN APLIKASI
2.1. Rancangan Database
Sebelum memulai merancang database tentu saja yang harus
kita perhatikan dan kita lakukan adalah mepersiapkan software
untuk membuat database tersebut, dimana kami disini menggunakan
software xampp versi 2.5 untuk membuat database ,lalu aktifkan
nya dan aktifkan juga appace dan mysql nya.
A. Membuat Database
Setelah xampp diaktifkan mari kita buat database nya dengan nama
ujianonline seperti pada gambar dibawah ini:
Gambar II.1
Pembuatan Database
B. Membuat tabel
Dalam database ujianonline kami membuat 14 tabel yaitu sebagai
berikut:
1. Tabel MS_Admin
Tabel ini digunakan untuk data master admin aplikasi ,dan
untuk atribut atribut dan spesifikasi dalam tabelnya sebagai
berikut :
12
Gambar II.2
Tabel Ms_Admin
2. Tabel MS_Class
Tabel ini digunakan untuk menampung data master kelas , dan
untuk atribut atribut dan spesifikasi dalam tabelnya sebagai
berikut:
Gambar II.3
Tabel Ms_Class
3. Tabel MS_Lesson
Tabel ini digunakan untuk menampung data master pelajaran , dan
untuk atribut atribut dan spesifikasi dalam tabelnya sebagai
berikut:
Gambar II.4
Tabel Ms_Lesson
4. Tabel MS_Teacher
Tabel ini digunakan untuk menampung data master guru sekolah ,
dan untuk atribut atribut dan spesifikasi dalam tabelnya sebagai
berikut:
13
Gambar II.5
Tabel Ms_Teacher
5. Tabel Teacher_class
Tabel untuk menampung data kelas yang diajarkan oleh masing-
masing guru, dan untuk atribut atribut dan spesifikasi dalam
tabelnya sebagai berikut:
Gambar II.6
Tabel Techer_Class
6. Tabel Teacher_lesson
Tabel ini digunakan untuk menampung data pelajaran yang
diajarkan oleh masing-masing guru, dan untuk atribut atribut dan
spesifikasi dalam tabelnya sebagai berikut:
Gambar II.7
Tabel Teacher_Lesson
7. Tabel Ms_Student
Tabel ini digunakan untuk menampung data master siswa sekolah ,
dan untuk atribut atribut dan spesifikasi dalam tabelnya sebagai
berikut:
14
Gambar II.8
Tabel Ms_Student
8. Tabel Ms_Question
Tabel ini digunakan untuk menampung data pertanyaan dari
masing-masing ujian yang telah dibuat , dan untuk atribut-atribut
dan spesifikasi dalam tabelnya sebagai berikut:
Gambar II.9
Tabel Ms_Question
9. Tabel Question_option
Tabel ini digunakan untuk menampung data jawaban dari
pertanyaan-pertanyaan di tabel Ms_Question , dan untuk atribut
atribut dan spesifikasi dalam tabelnya sebagai berikut:
Gambar II.10
Tabel Question_Option
15
10. Tabel Ms_Assignment
Tabel ini digunakan untuk menampung data ujian yang akan
menjadi inti dari aplikasi ,dan untuk atribut atribut dan spesifikasi
dalam tabelnya sebagai berikut:
Gambar II.11
Gambar II.11
Tabel Ms_Assignment
11. Tabel Assignment_class
Tabel ini digunakan untuk menampung kelas mana saja yang
diikutsertakan dalam ujian yang telah terdaftar di tabel
Ms_Assignment , dan untuk atribut atribut dan spesifikasi dalam
tabelnya sebagai berikut:
Gambar II.12
Tabel Assignment_class
12. Tabel Assignment_question
Tabel ini digunakan untuk menampung pertanyaan-pertanyaan
yang terdapat di ujian ini. Tabel ini mengacu pada Ms_Question
sebagai penampungan data pertanyaan dan Ms_Assignment
sebagai data ujiannya , dan untuk atribut atribut dan spesifikasi
dalam tabelnya sebagai berikut:
16
Gambar II.13
Tabel Assignment_Question
13. Tabel Assignment_result
Tabel ini digunakan untuk menampung hasil ujian , dan untuk
atribut atribut dan spesifikasi dalam tabelnya sebagai berikut:
Gambar II.14
Tabel Assignment_Result
14. Tabel Assignment_analytics
Tabel ini digunakan untuk menampung analisis pertanyaan mana
saja yang dijawab benar dan pertanyaan mana saja yang dijawab
salah oleh masing-masing siswa. Table ini bertujuan sebagai
koreksi bagi guru tentang soal mana saja yang paling banyak salah
dijawab sehingga guru dapat mengambil keputusan jika soal
tersebut harus dikaji ulang dikelas , dan untuk atribut atribut dan
spesifikasi dalam tabelnya sebagai berikut:
Gambar II.15
Tabel Assignment_Analytics
17
2.2.Rancangan Form Master
2.2.1. Rancangan Form admin
Disini untuk tampilan aplikasi kami menggunakan template untuk
tampilan aplikasi menjadi lebih menarik dan untuk mempersingkat waktu
juga dalam membangun aplikasi ini. Setelah templatenya kita download
,lalu gabungkan template tersebut kedalam codeigniter.
1. Pertama, kita buat folder assets di dalam folder codeigniter.
Gambar II.16
Folder Assets
2. Lalu, copy semua isi file dari template yang sudah di download tadi ke
dalam folder assets. setelah itu buat file MY_Controller.php di dalam
folder application/core/ sebagai dasar dari templating, lalu tuiskan kode
berikut:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class MY_Controller extends CI_Controller {
public function __construct() {
parent::__construct();
date_default_timezone_set('Asia/Jakarta');
$this->load->model('MasterModel','master',TRUE);
$this->load->model('AuthModel','auth',TRUE);
$this->load-
>model('AssignmentModel','assignment',TRUE);
$this->load->model('ClassModel','class',TRUE);
$this->load->model('PresenceModel','presence',TRUE);
$this->checkAuth();
}
public $parseData =[
'navbar' => 'inc/navbar',
18
'footer' => 'inc/footer',
'title' => 'No Title',
'content' => '',
'sidebar' => 'inc/sidebar'
];
3. Setelah itu kita buat folder inc di dalam folder application/view/ dan
buat file di dalam folder inc tadi dengan nama navbar.php dan
sidebar.php ,
seperti ini :
Gambar II.17
Folder inc
4. Lalu potong masing masing skrip tadi baik yang bagian navbar.php
maupun yang sidebar.php, seperti sebagai berikut :
Skrip navbar.php
<nav class="navbar"> <!-- Logo Area -->
<div class="navbar-header">
<a href="<?= site_url() ?>" class="navbar-brand"
style="color:black">
<span class="logo-expand"><img
src="assets/img/logo.png"></span>
<span class="logo-collapse">v.1</span>
</a>
</div>
<!-- /.navbar-header -->
<!-- Left Menu & Sidebar Toggle -->
<ul class="nav navbar-nav">
<li class="sidebar-toggle"><a href="javascript:void(0)"
class="ripple"><i class="feather feather-menu list-icon fs-
20"></i></a>
</li>
</ul>
19
<!-- /.navbar-left -->
<!-- /.navbar-search -->
<div class="spacer"></div>
<!-- User Image with Dropdown -->
<ul class="nav navbar-nav">
<li class="dropdown"><a href="javascript:void(0);"
class="dropdown-toggle ripple" data-toggle="dropdown"><span
class="avatar thumb-xs2"><img src="<?= base_url()
?>/assets/images/icon-user.png" class="rounded-circle" alt="">
<span style="margin-right:20px"><?= $this->session-
>userdata('fullName'); ?></span> <i class="feather feather-chevron-
down list-icon"></i></span></a>
<div class="dropdown-menu dropdown-left dropdown-card
dropdown-card-profile animated flipInY">
<div class="card">
<ul class="list-unstyled card-body" style="padding:5px">
<li><a href="<?= site_url('page/logout')
?>"><span><span class="align-middle"><i class="feather feather-
log-out"></i> Keluar</span></span></a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
Skrip sidebar.php
<style type="text/css">
#navForSideBar::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#navForSideBar::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
20
#navForSideBar::-webkit-scrollbar-thumb {
background-color: #000000;
border: 2px solid #555555;
}
</style>
<aside class="site-sidebar scrollbar-enabled" data-suppress-scroll-
x="true">
<!-- /.side-user -->
<!-- Sidebar Menu -->
<nav id="navForSideBar" class="sidebar-nav" style="overflow-
y:scroll">
<ul class="nav in side-menu">
<li class="current-pag"><a href="<?= site_url() ?>"><i
class="list-icon feather feather-command"></i> <span class="hide-
menu">Dashboard</span></a></li>
<li class="menu-item-has-children"><a
href="javascript:void(0);"><i class="list-icon feather feather-
briefcase"></i> <span class="hide-menu">Master</span></a>
<ul class="list-unstyled sub-menu">
<li><a href="<?= site_url('page/users')
?>">Pengguna</a></li>
<li><a href="<?= site_url('page/lessons')
?>">Pelajaran</a></li>
<li><a href="<?= site_url('page/classes')
?>">Kelas</a></li>
<li><a href="<?= site_url('page/teachers')
?>">Guru</a></li>
<li><a href="<?= site_url('page/students')
?>">Siswa</a></li>
</ul>
</li>
21
<li class="menu-item-has-children"><a
href="javascript:void(0);"><i class="list-icon feather feather-
edit"></i> <span class="hide-menu">Ujian</span></a>
<ul class="list-unstyled sub-menu">
<li><a href="<?= site_url('page/create') ?>">Buat
Ujian</a></li>
<li><a href="<?= site_url('page/assignments') ?>">List
Ujian</a></li>
<li><a href="<?= site_url('page/bank') ?>">Bank
Soal</a></li>
</ul>
</li>
<li class="menu-item-has-children"><a
href="javascript:void(0);"><i class="list-icon feather feather-file-
text"></i> <span class="hide-menu">Laporan</span></a>
<ul class="list-unstyled sub-menu">
<li><a href="<?= site_url('page/results') ?>">Hasil
Ujian</a></li>
<li><a href="<?= site_url('page/analytics')
?>">Analysis Ujian</a></li>
</ul>
</li>
<li class=""><a href="<?= site_url('page/logs') ?>"><i
class="list-icon feather feather-file"></i> <span class="hide-
menu">Log Aktifitas</span></a></li>
</ul>
<!-- /.side-menu -->
</nav>
<!-- /.sidebar-nav -->
</aside>
5. Selanjutnya kita buat controller di dalam folder
application/controllers/, kita buat dengan nama MainPage.php pada
controller ini, nantinya akan digunakan sebagai tempat untuk membuat
halaman halaman pada aplikasi yang akan dibuat, skripnya seperti
berikut:
22
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class MainPage extends MY_Controller {
public function index() {
$this->parseData['content'] = 'content/dashboard';
$this->parseData['title'] = 'Home ';
$this->load->view('MainView',$this->parseData);
}
}
6. Tahap selanjutnya, Kita buat MainView.php sebagai halaman dasar
untuk menampung file-file lain. buat di dalam folder application/views/
dan masukan skrip di bawah ini:
Skrip MainView.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-
scale=1,shrink-to-fit=no">
<title><?= $title ?></title>
<!-- CSS -->
<link href="<?= base_url() ?>/assets\vendors\material-
icons\material-icons.css" rel="stylesheet" type="text/css">
<link href="<?= base_url() ?>/assets\vendors\feather-
icons\feather.css" rel="stylesheet" type="text/css">
<link href="<?= base_url() ?>/assets\css\style.css"
rel="stylesheet" type="text/css">
<link href="<?= base_url('assets/datatables/datatables.min.css')
?>" rel="stylesheet" type="text/css">
<link href="<?= base_url('assets/sweetalert/swal.css') ?>"
rel="stylesheet" type="text/css">
23
<link href="<?= base_url('assets/switchery/switchery.min.css')
?>" rel="stylesheet" type="text/css">
<link href="<?= base_url('assets/mediaelement/mmp.min.css')
?>" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="<?=
base_url('assets/fancy/jquery.fancybox.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?=
base_url('assets/jquery-ui-1.12.1/jquery-ui.min.css') ?>">
<script src="<?= base_url('assets/bootstrap-wysihtml5-
0.0.2/libs/js/wysihtml5-0.3.0_rc2.js') ?>"></script>
<script data-pace-options='{ "ajax": false }' src="<?=
base_url('assets/downloaded/pace.min.js') ?>"></script>
<script src="<?= base_url('assets/downloaded/jquery.min.js')
?>"></script>
<style type="text/css">
.imagePreview {
width: 100%;
height: 300px;
margin-top:10px;
margin-right:50px;
background-position: center center;
background-size: cover;
box-shadow : 0px 1px 2px 0px black;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}
.form-group {
margin-bottom: 5px;
}
</style>
</head>
<body class="header-dark sidebar-light sidebar-expand">
<script type="text/javascript">
$(function(){
var title = '<?= $this->session->flashdata("title") ?>';
24
var text = '<?= $this->session->flashdata("text") ?>';
var type = '<?= $this->session->flashdata("type") ?>';
if (title) {
swal({
title: title,
text: text,
type: type,
button: true,
});
};
});
</script>
<div id="wrapper" class="wrapper">
<!-- HEADER & TOP NAVIGATION -->
<?php $this->load->view($navbar); ?>
<!-- /.navbar -->
<div class="content-wrapper">
<!-- SIDEBAR -->
<?php $this->load->view($sidebar); ?>
<!-- /.site-sidebar -->
<main class="main-wrapper clearfix"
style="padding:10px">
<?php $this->load->view($content); ?>
</main>
</div><!-- /.content-wrapper -->
<!-- FOOTER -->
<footer class="footer"><span class="heading-font-
family">Copyright @ <?= date('Y') ?>. BraderPedia</span>
</footer>
</div> <!--/ #wrapper -->
<!-- Scripts -->
<script src="<?= base_url('assets/jquery-ui-1.12.1/jquery-
ui.min.js') ?>"></script>
<script src="<?= base_url('assets/downloaded/popper.min.js')
?>"></script>
<script src="<?= base_url()
?>/assets\js\bootstrap.min.js"></script>
25
<script src="<?= base_url('assets/downloaded/jquery.magnific-
popup.min.js') ?>"></script>
<script src="<?=
base_url('assets/downloaded/metisMenu.min.js') ?>"></script>
<script src="<?= base_url('assets/downloaded/perfect-
scrollbar.jquery.js') ?>"></script>
<script src="<?= base_url() ?>/assets\vendors\theme-
widgets\widgets.js"></script>
<script src="<?= base_url('assets/datatables/datatables.min.js')
?>"></script>
<script src="<?= base_url('assets/sweetalert/swal.min.js')
?>"></script>
<script src="<?= base_url('assets/switchery/switchery.min.js')
?>"></script>
<script src="<?= base_url() ?>/assets\js\theme.js"></script>
<script src="<?= base_url() ?>/assets\js\custom.js"></script>
<script type="text/javascript" src="<?=
base_url('assets/fancy/jquery.fancybox.min.js') ?>"></script>
<script src="<?= base_url('assets/bootstrap-wysihtml5-
0.0.2/bootstrap-wysihtml5-0.0.2.min.js') ?>"
type="text/javascript"></script>
<script type="text/javascript">
$("#textarea-blank").wysihtml5({
"font-styles": false, // Font styling, e.g. h1, h2, etc.
"emphasis": false, // Italics, bold, etc.
"lists": false, // (Un)ordered lists, e.g. Bullets, Numbers.
"html": false, // Button which allows you to edit the
generated HTML.
"link": false, // Button to insert a link.
"image": false, // Button to insert an image.
"color": false, // Button to change color of font
"blockquote": false, // Blockquote
});
$("#datapicker").datepicker({
dateFormat : 'yy-mm-dd'
});
$("#datapicker2").datepicker({
26
dateFormat : 'yy-mm-dd'
});
</script>
</body>
</html>
7. Selanjutnya, kita buat folder content di dalam folder view, lalu buat file
dashboard.php sebagai halaman pertama.
Skrip dashboard.php
<!-- Page Title Area -->
<div class="row page-title clearfix" style="margin-top:-10px">
<div class="page-title-left">
<h6 class="page-title-heading mr-0 mr-r-5">Dashboard</h6>
<p class="page-title-description mr-0 d-none d-md-inline-
block"></p>
</div>
<!-- /.page-title-left -->
<div class="page-title-right d-inline-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item active">Dashboard</li>
</ol>
</div>
</div><!-- /.page-title -->
<div class="widget-list row" style="margin-top:10px;margin-
bottom:80px">
<div class="widget-holder widget-full-height col-md-12">
<div class="widget-bg">
<div class="widget-body">
</div><!-- / BODY -->
</div><!-- / BG -->
</div><!-- / HOLDER -->
</div>
8. Karena kita menggunakan route untuk mengakses project kita di
browser ,kita akan menentukan controller yang pertama kali dibaca,
27
yaitu dengan cara mengubah default route, caranya silahkan buka file
route.php yang berlokasi di application/config/route.php. seperti pada
gambar dibawah ini :
$route['page'] = 'MainPage';
$route['page/(:any)'] = 'MainPage/$1';
$route['page/(:any)/(:any)'] = 'MainPage/$1/$2';
$route['page/(:any)/(:any)/(:any)'] = 'MainPage/$1/$2/$3';
$route['page/(:any)/(:any)/(:any)/(:any)'] = 'MainPage/$1/$2/$3/$4';
$route['page/(:any)/(:any)/(:any)/(:any)/(:any)'] =
'MainPage/$1/$2/$3/$4/$5';
Ini adalah tampilan dashboard yang telah kita buat tadi
Gambar II.18
Tampilan Dashboard Aplikasi
2.2.2. Rancangan login dan logout
Sebagai autentikasi aplikasi kita akan membuat form login dan
logout. Langsung saja buat folder auth di dalam folder views, lalu buat file
dengan nama login.php skripnya sebagai berikut :
Skrip login.php
<!DOCTYPE html>
<html lang="en">
<head>
28
<script src="<?= base_url('assets/downloaded/pace.min.js')
?>"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-
scale=1,shrink-to-fit=no">
<title>Login </title>
<!-- CSS -->
<link href="<?= base_url() ?>/assets\vendors\material-
icons\material-icons.css" rel="stylesheet" type="text/css">
<link href="<?= base_url() ?>/assets\vendors\linea-
icons\styles.css" rel="stylesheet" type="text/css">
<link href="<?= base_url() ?>/assets\vendors\mono-social-
icons\monosocialiconsfont.css" rel="stylesheet" type="text/css">
<link href="<?= base_url() ?>/assets\vendors\feather-
icons\feather.css" rel="stylesheet" type="text/css">
<link href="<?= base_url('assets/sweetalert/swal.css') ?>"
rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,
700" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Montserrat:200,200i,300,3
00i,400,400i,500,500i,600,600i,700,700i,900,900i" rel="stylesheet"
type="text/css">
<link href="<?= base_url() ?>/assets\css\style.css" rel="stylesheet"
type="text/css">
<script src="<?= base_url('assets/downloaded/jquery.min.js')
?>"></script>
</head>
<body class="body-bg-full profile-page">
<script type="text/javascript">
$(function(){
var title = '<?= $this->session->flashdata("title") ?>';
var text = '<?= $this->session->flashdata("text") ?>';
var type = '<?= $this->session->flashdata("type") ?>';
29
if (title) {
swal({
title: title,
text: text,
type: type,
button: true,
});
};
});
</script>
<style>
.login-left {
background: url('<?= base_url("assets/img/1.jpg") ?>');
background-size: cover;
background-position: center;
}
@media(max-width:1000px) {
#bigOne {
display:none;
}
}
</style>
<div id="wrapper" class="row wrapper">
<div class="row container-min-full-height">
<div class="col-lg-8 col-md-4 p-3 login-left" id="bigOne">
<div class="w-50"></div>
</div>
<div class="col-lg-4 col-md-12 login-right d-lg-flex pos-fixed
pos-right text-inverse container-min-full-height" style="background-
color:#2C9DE5">
<div class="login-content px-3 w-75 text-center">
<h2 class="mb-4 text-center fw-300">Login Panel</h2>
<p class="heading-font-family fw-300 letter-spacing-
minus pd-b-30">Silahkan masukan username dan password anda di form
berikut!</p>
30
<form class="text-center" action="<?=
site_url('Auth/login') ?>" method="POST">
<div class="form-group">
<input type="text" placeholder="Username"
class="form-control form-control-line" name="username">
</div>
<div class="form-group">
<input type="password" placeholder="Password"
class="form-control form-control-line" name="password" value="">
</div>
<div class="form-group mr-b-20">
<button class="btn btn-block btn-md btn-success
text-uppercase fw-600 ripple" type="submit">Masuk <i class="feather
feather-log-in"></i></button>
</div>
</form>
<!-- /form -->
</div>
<!-- /.login-content -->
</div>
<!-- /.login-right -->
</div>
<!-- /.row -->
</div>
<!-- /.body-container -->
<!-- Scripts -->
<script src="<?= base_url('assets/sweetalert/swal.min.js')
?>"></script>
<script src="<?= base_url() ?>/assets\js\bootstrap.min.js"></script>
<script src="<?= base_url() ?>/assets\js\material-
design.js"></script>
</body>
</html>
31
Selanjutnya, buka file MY_Controller.php lalu tambahkan skrip
berikut, taruh dibagian construct(), skrip ini bertujuan sebagai autentikasi
jika didalam aplikasi ini tidak terdapat session bernama “backToken”
maka halaman akan dialihkan ke halaman login. Skrip nya seperti di
bawah ini :
if (!$this->session->userdata('backToken')) {
redirect('Auth');
} else {
if (!$this->auth->checkToken($this->session-
>userdata('backToken'))) {
redirect('page/logout');
}
}
Selanjutnya buat controller Auth.php di dalam folder controllers
Skrip Auth.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Auth extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->model('AuthModel','auth',TRUE);
}
public function message($title = NULL,$text = NULL,$type = NULL)
{
return $this->session->set_flashdata([
'title' => $title,
'text' => $text,
'type' => $type
]
);
}
public function checkToken() {
32
if ($this->session->userdata('backToken')) {
if ($this->auth->checkToken($this->session-
>userdata('backToken'))) {
redirect('page');
} else {
$this->session->unset_userdata('backToken');
redirect('page/logout');
}
}
}
public function index() {
$this->checkToken();
$this->load->view('auth/login');
}
public function login() {
$data = $this->input->post();
if ($this->input->post()) {
$dataAdmin = $this->auth-
>getAdminByUsername($data['username']);
if ($dataAdmin) {
if (password_verify($data['password'],$dataAdmin-
>password)) {
$sess_ = [
'fullName' => $dataAdmin-
>full_name,
'username' => $dataAdmin-
>username,
'level' => $dataAdmin->level,
'id_' => $dataAdmin->id_admin,
'backToken' => crypt($dataAdmin-
>full_name,'')
];
$this->session->set_userdata( $sess_ );
$this->auth->registToken($forToken =
['access_token' => $sess_['backToken']]);
33
$this->message('Selamat datang
'.$dataAdmin->full_name.'!','Semoga hari anda
menyenangkan:)','success');
redirect('page');
} else {
$this->message('Ooppsss','Username dan
password tidak sesuai, silahkan coba lagi','error');
}
} elseif($dataTeacher) {
if
(password_verify($data['password'],$dataTeacher->teacher_password)) {
$sess_ = [
'fullName' => $dataTeacher-
>teacher_name,
'username' => $dataTeacher-
>teacher_username,
'level' => 'guru',
'id_' => $dataTeacher->id_teacher,
'backToken' => crypt($dataTeacher-
>teacher_name,'')
];
$this->session->set_userdata( $sess_ );
$this->auth->registToken($forToken =
['access_token' => $sess_['backToken']]);
$this->message('Selamat datang
'.$dataTeacher->teacher_name.'!','Semoga hari anda
menyenangkan:)','success');
redirect('page');
} else {
$this->message('Ooppsss','Username dan
password tidak sesuai, silahkan coba lagi','error');
}
} else {
$this->message('Ooppsss','Username tidak terdaftar,
silahkan coba username lain','error');
}
}
34
redirect('Auth');
}
public function exam() {
if ($this->input->post()) {
$data = $this->input->post();
$student = $this->auth-
>getStudentByNis($data['student_nis']);
if ($student) {
if
(password_verify($data['student_password'],$student-
>student_password)) {
$sess_ = [
'globalStudent' => $student,
'examToken' => crypt($student-
>student_password,'')
];
$this->session->set_userdata( $sess_ );
$this->message('Wohoooo!!','Login berhasil
di verifikasi, selamat datang '.$student->student_name,'success');
redirect('exam/lists');
} else {
$this->message('Oooppss','NIS dan
password tidak sesuai, silahkan coba lagi','danger');
redirect('Auth/exam');
}
} else {
$this->message('Oooppss','NIS tidak terdaftar,
silahkan coba lagi','danger');
redirect('Auth/exam');
}
} else {
if ($this->session->userdata('examToken') AND $this-
>session->userdata('globalStudent')) {
redirect('exam');
}
$this->load->view('auth/loginExam');
}
35
}
public function not_found() {
echo "Page not found";
}
}
Lalu buat model dengan nama AuthModel.php didalam folder model.
Skrip AuthModel.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class AuthModel extends CI_Model {
public function getAdminByUsername($username) {
$this->db->where('username', $username);
$this->db->where('admin_hide', 0);
return $this->db->get('ms_admin')->row_object();
}
public function getTeacherByUsername($username) {
$this->db->where('teacher_username', $username);
$this->db->where('teacher_hide', 0);
return $this->db->get('ms_teacher')->row_object();
}
public function checkToken($access_token) {
$this->db->where('access_token', $access_token);
return $this->db->get('ms_token')->row_object();
}
public function registToken($data) {
return $this->db->insert('ms_token', $data);
}
public function deleteToken($access_token) {
$this->db->where('access_token', $access_token);
return $this->db->delete('ms_token');
}
public function getStudentByNis($nis) {
36
$this->db->where('student_nis', $nis);
$this->db->where('student_hide', 0);
return $this->db->get('ms_student')->row_object();
}
}
Jika sudah sesuai akan muncul halaman login seperti dibawah ini :
Gambar II.19
Login admin
Kita bisa melakukan login dengan username = admin password
admin sebagai user administrator atau user default yang telah penulis
buatkan. Silahkan langsung melakukan login dan jika berhasil maka kita
akan langsung dialihkan ke halaman dashboard yang telah di buat
sebelum nya.
Selanjutnya kita akan membuat fungsi logout, silahkan buka halaman
MainPage.php yang telah kita buat sebelum nya lalu tambahkan fungsi
berikut :
37
Skrip Logout
public function logout() {
$this->auth->deleteToken($this->session-
>userdata('backToken'));
$this->session->unset_userdata('backToken');
$this->message('Logout berhasil!','Silahkan login kembali
untuk melanjutkan :)','success');
redirect('Auth');
}
Jika proses logout berhasil , kita akan dialihkan ke halaman login
kembali.
2.2.3. Dashboard Aplikasi
Dashboard yang akan kita buat merupakan rangkuman dari data-
data transaksi yang terjadi. Pada dashboard aplikasi ujian online kita akan
menampilkan data data total ujian tersedia, total ujian aktif, total
keseluruhan siswa , dan persentasi kelulusan siswa. Silahkan buka file
dashboard.php dan tambahkan beberapa skrip berikut.didalam folder
views/content/dashboard.php
Skrip dashboard.php
<!-- Page Title Area -->
<div class="row page-title clearfix" style="margin-top:-10px">
<div class="page-title-left">
<h6 class="page-title-heading mr-0 mr-r-5">Dashboard</h6>
<p class="page-title-description mr-0 d-none d-md-inline-
block"></p>
</div>
<!-- /.page-title-left -->
<div class="page-title-right d-inline-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item active">Dashboard</li>
</ol>
</div>
38
</div><!-- /.page-title -->
<style type="text/css">
.boxDash {
width: 100%;
min-height: 130px;
text-align: center;
padding-top: 40px;
border-radius: 6px;
font-size: 25px;
color: white;
}
.boxDash.green { background-color: #077A1F; }
.boxDash.blue { background-color: #0F1FBC; }
.boxDash.red { background-color: #C60013; }
.boxDash.purple { background-color: #A004BC; }
</style>
<div class="widget-list row" style="margin-top:10px;margin-
bottom:80px">
<div class="widget-holder widget-full-height col-md-12">
<div class="widget-bg">
<div class="widget-body">
<div class="row">
<div class="col-sm-3">
<div class="boxDash green">
<i class="feather feather-check"></i> <?=
$activeAssignment ?> Ujian Aktif
</div>
</div>
<div class="col-sm-3">
<div class="boxDash blue">
<i class="feather feather-edit"></i> <?=
$totalAssignment ?> Ujian Tersedia
</div>
</div>
<div class="col-sm-3">
<div class="boxDash red">
39
<i class="feather feather-users"></i> <?= $totalStudent
?> Siswa/i
</div>
</div>
<div class="col-sm-3">
<div class="boxDash purple">
<?php
if ($totalGraduated < 1 OR $totalResult < 1) {
$percentage = 0;
} else {
$percentage = ($totalGraduated / $totalResult) *
100;
$percentage = ceil($percentage);
}
echo '<i class="feather feather-activity"></i>
'.$percentage.'% Kelulusan';
?>
</div>
</div>
</div><!-- / Row -->
</div><!-- / BODY -->
</div><!-- / BG -->
</div><!-- / HOLDER -->
</div>
Selanjutnya tambahkan skrip pada controller MainPage.php tepat
nya pada fungsi index yang berfungsi sebagai penarikan data dari database
yang akan di tampilkan di file dashboard.php diatas
Skrip fungsi index pada MainPage.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class MainPage extends MY_Controller {
40
public function index() {
$totalStudent = 0;
if ($this->session->userdata('level') == 'admin') {
$totalStudent = count($this->master-
>getAllStudent());
$totalResult = $this->assignment->getAllResult();
} else {
foreach ($this->master->getClassByTeacher($this-
>session->userdata('id_')) as $row => $value) {
foreach ($this->master-
>getStudentByClass($value->id_class) as $r => $v) {
$totalStudent++;
}
}
$totalResult = [];
foreach ($this->assignment-
>getAssignmentByTeacher($this->session->userdata('id_')) as $r_ =>
$v_) {
foreach ($this->assignment-
>getResultByAssignment($v_->id_assignment) as $__r => $__v) {
array_push($totalResult, $__v);
}
}
}
$totalGraduated = 0;
foreach ($totalResult as $row => $value) {
if ($value->result_status == 'lulus') {
$totalGraduated++;
}
}
$this->parseData['totalResult'] = count($totalResult);
$this->parseData['totalGraduated'] = $totalGraduated;
$this->parseData['activeAssignment'] = count($this-
>assignment->getActiveAssignment());
$this->parseData['totalAssignment'] = count($this-
>assignment->getAllAssignment());
$this->parseData['totalStudent'] = $totalStudent;
41
// END //
if ($this->session->userdata('level') == 'guru') {
$dataClass = $this->master-
>getClassByTeacher($this->session->userdata('id_'));
} else {
$dataClass = $this->master->getAllClass();
}
$this->parseData['dataClass'] = $dataClass;
$this->parseData['content'] = 'content/dashboard';
$this->parseData['title'] = 'Home ';
$this->load->view('MainView',$this->parseData);
}
Jika sudah berhasil maka tampilan Dashboard akan seperti berikut ini :
Gambar II.20
Halaman Dashboard Aplikasi
2.2.4. Membuat Form Admin
Pada halaman ini kita akan membuat halaman master untuk admin,
buat file bernama user.php didalam folder views/content/master/user.php.
Kemudian sebelum membuat file users.php tambahkan fungsi di bawah ini
di dalam file MainPage.php yang telah kita buat sebelum nya :
public function users() {
$this->parseData['dataUsers'] = $this->master-
>getAllUser();
42
$this->parseData['content'] = 'content/master/users';
$this->parseData['title'] = 'Data Pengguna ';
$this->load->view('MainView',$this->parseData);
}
Selanjutnya tambahkan skrip users.php berikut :
Skrip users.php
<!-- Page Title Area -->
<div class="row page-title clearfix" style="margin-top:-10px">
<div class="page-title-left">
<h6 class="page-title-heading mr-0 mr-r-5">Data Pengguna <a
href="#add" data-toggle="modal" class="btn btn-info btn-circle btn-
sm"><i class="feather feather-plus"></i></a></h6>
<p class="page-title-description mr-0 d-none d-md-inline-
block"></p>
</div>
<!-- /.page-title-left -->
<div class="page-title-right d-inline-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?= site_url()
?>">Dashboard</a></li>
<li class="breadcrumb-item active">Pengguna</li>
</ol>
</div>
</div><!-- /.page-title -->
<div class="widget-list row" style="margin-top:10px;margin-
bottom:80px">
<div class="widget-holder widget-full-height col-md-12">
<div class="widget-bg">
<div class="widget-body">
<table class="table table-striped table-responsive" data-
toggle="datatables">
<thead>
43
<tr>
<th>#</th>
<th>Username</th>
<th>Nama Lengkap</th>
<th>Level</th>
<th>Dibuat</th>
<th style="width:10%">Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($dataUsers as $row => $value): ?>
<tr>
<td><?= $row + 1 ?></td>
<td><?= $value->username ?></td>
<td><?= $value->full_name ?></td>
<td><?= $value->level ?></td>
<td><?= $value->admin_created ?></td>
<td>
<a href="#edit<?= $row ?>" data-toggle="modal"
class="btn btn-primary btn-sm"><i class="feather feather-edit"></i></a>
<a href="#delete<?= $row ?>" data-toggle="modal"
class="btn btn-danger btn-sm"><i class="feather feather-trash"></i></a>
</td>
</tr>
<!-- MODAL DELETE -->
<div class="modal modal-danger fade" id="delete<?= $row
?>">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header text-inverse">
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Anda yakin ingin
menghapus data ini?</h4>
</div>
<div class="modal-footer" style="padding:10px">
44
<a href="<?= site_url('MasterCtrl/users/'.$value-
>id_admin) ?>" class="btn btn-outline-danger btn-block"><i
class="feather feather-check-square"></i> Ya, Hapus data ini!</a>
</div>
</div>
</div>
</div>
<!-- MODAL EDIT -->
<div class="modal modal-primary fade" id="edit<?= $row
?>">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header text-inverse">
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Ubah Pengguna</h4>
</div>
<div class="modal-body">
<form action="<?= site_url('MasterCtrl/users')
?>" method="POST">
<input type="hidden" name="id_admin"
value="<?= $value->id_admin ?>">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control"
name="username" placeholder="Username" required value="<?= $value-
>username ?>">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-
control" name="password" placeholder="Boleh dikosongkan">
</div>
<div class="form-group">
<label>Nama Lengkap</label>
45
<input type="text" class="form-control"
name="full_name" placeholder="Nama Lengkap" required value="<?=
$value->full_name ?>">
</div>
<div class="form-group">
<label>Level</label>
<select class="form-control" name="level">
<?php $level = ['admin','staff'] ?>
<?php foreach ($level as $vLevel): ?>
<option <?php if($vLevel == $value-
>level): echo "selected"; endif; ?> value="<?= $vLevel ?>"><?= $vLevel
?></option>
<?php endforeach ?>
</select>
</div>
</div>
<div class="modal-footer" style="padding:10px">
<button type="submit" class="btn btn-outline-
info btn-block"><i class="feather feather-check-square"></i>
Simpan!</button>
</div>
</form>
</div>
</div>
</div>
<?php endforeach ?>
</tbody>
</table>
</div>
<!-- /.widget-body -->
</div>
<!-- /.widget-bg -->
</div>
</div>
<!-- MODAL -->
<div class="modal modal-info fade" id="add">
46
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header text-inverse">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<h4 class="modal-title">Tambah Pengguna</h4>
</div>
<div class="modal-body">
<form action="<?= site_url('MasterCtrl/users') ?>"
method="POST">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username"
placeholder="Username" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control"
name="password" placeholder="Password" required>
</div>
<div class="form-group">
<label>Nama Lengkap</label>
<input type="text" class="form-control"
name="full_name" placeholder="Nama Lengkap" required>
</div>
<div class="form-group">
<label>Level</label>
<select class="form-control" name="level">
<option value="admin">admin</option>
<option value="staff">staff</option>
</select>
</div>
</div>
<div class="modal-footer" style="padding:10px">
<button type="submit" onclick="return confirm('Anda yakin ?')"
class="btn btn-outline-info btn-block"><i class="feather feather-check-
square"></i> Simpan!</button>
47
</div>
</form>
</div>
</div>
</div>
Setelah itu buat file MasterCtrl.php pada folder controllers lalu tuliskan
skrip berikut:
Skrip MasterCtrl.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class MasterCtrl extends MY_Controller {
public function index() {
redirect('page');
}
public function users($id_admin = NULL) {
if ($this->input->post()) {
$data = $this->input->post();
if ($this->input->post('id_admin')) {
if ($this->input->post('password') == '') {
unset($data['password']);
} else {
$data['password'] = crypt($this-
>input->post('password'),'');
}
}
if ($this->input->post('id_admin')) {
$user = $this->master-
>checkAvailableUser($data['username']);
if ($data) {
if ($data['id_admin'] != $user-
>id_admin) {
48
$this-
>message('Ooppsss!','Username sudah terdaftar, silahkan coba username
lain','error');
redirect('page/users');
}
}
$this->master->updateUser($data);
$this->message('Selamat!','Data pengguna
berhasil diubah','success');
} else {
if ($this->master-
>checkAvailableUser($data['username'])) {
$this-
>message('Ooppsss!','Username sudah terdaftar, silahkan coba username
lain','error');
redirect('page/users');
}
$data['admin_created'] = date('Y-m-d');
$data['password'] = crypt($this->input-
>post('password'),'');
$this->master->insertUser($data);
$this->message('Selamat!','Data pengguna
berhasil ditambahkan','success');
// SIMPAN LOG //
$this->SetLog('User menambahkan siswa
baru');
}
} elseif($id_admin) {
$data = [
'id_admin' => $id_admin,
'admin_hide' => 1
];
$this->master->updateUser($data);
$this->message('Selamat!','Data pengguna berhasil
dihapus','success');
}
redirect('page/users');
49
}
public function lessons($id_lesson = NULL) {
if ($this->input->post()) {
$data = $this->input->post();
if ($this->input->post('id_lesson')) {
$this->master->updateLesson($data);
$this->message('Selamat!','Data pelajaran
berhasil diubah','success');
} else {
$data['lesson_created'] = date('Y-m-d');
$this->master->insertLesson($data);
$this->message('Selamat!','Data pelajaran
berhasil ditambahkan','success');
}
} elseif($id_lesson) {
$data = [
'id_lesson' => $id_lesson,
'lesson_hide' => 1
];
$this->master->updateLesson($data);
$this->message('Selamat!','Data pelajaran berhasil
dihapus','success');
}
redirect('page/lessons');
}
public function classes($id_class = NULL) {
if ($this->input->post()) {
$data = $this->input->post();
if ($this->input->post('id_class')) {
$this->master->updateClass($data);
$this->message('Selamat!','Data kelas
berhasil diubah','success');
} else {
$data['class_created'] = date('Y-m-d');
$this->master->insertClass($data);
50
$this->message('Selamat!','Data kelas
berhasil ditambahkan','success');
}
} elseif($id_class) {
$data = [
'id_class' => $id_class,
'class_hide' => 1
];
$this->master->updateClass($data);
$this->message('Selamat!','Data kelas berhasil
dihapus','success');
}
redirect('page/classes');
}
public function teachers($id_teacher = NULL) {
if ($this->input->post()) {
$data = $this->input->post();
$teacherUsername = $this->preg($this->input-
>post('teacher_username'));
if ($this->master-
>getTeacherByUsername($teacherUsername)) {
$this->message('Ooppsss','Username telah
terdaftar, silahkan coba username lain','error');
redirect('page/teacher_add');
}
if ($_FILES['teacher_photo']['name']) {
$this->imageConf('teachers'); // Validation
image
if(!$this->upload->do_upload('teacher_photo')) :
$this->message('Oopppsss',$this->upload-
>display_errors(),'error');
redirect('page/teachers');
else :
$dataUpload = $this->upload->data();
$data['teacher_photo'] = str_replace(' ', '_',
$dataUpload['file_name']);
51
// COMPRESS IMAGE //
$resolution = ['width' => 500, 'height' => 500];
$this-
>compreesImage('teachers',$dataUpload['file_name'],$resolution);
endif;
}
$data['teacher_created'] = date('Y-m-d');
unset($data['id_class']);
unset($data['id_lesson']);
$data['teacher_password'] = crypt($this->input-
>post('teacher_password'),'');
$data['teacher_username'] = $teacherUsername;
$idTeacher = $this->master->insertTeacher($data);
foreach ($this->input->post('id_class') as $rClass
=> $vClass) {
$singleClass = [
'id_teacher' => $idTeacher,
'id_class' => $vClass,
];
$this->master-
>insertTeacherClass($singleClass);
}
foreach ($this->input->post('id_lesson') as $rLesson
=> $vLesson) {
$singleLesson = [
'id_teacher' => $idTeacher,
'id_lesson' => $vLesson,
];
$this->master-
>insertTeacherLesson($singleLesson);
}
$this->message('Selamat!','Data guru berhasil
ditambahkan','success');
} elseif($id_teacher) {
$data = [
'id_teacher' => $id_teacher,
'teacher_hide' => 1
52
];
$this->master->updateTeacher($data);
$this->message('Selamat!','Data guru berhasil
dihapus','success');
}
redirect('page/teachers');
}
public function teacher_update() {
if ($this->input->post()) {
$data = $this->input->post();
$teacherUsername = $this->preg($this->input-
>post('teacher_username'));
$teacher = $this->master-
>getTeacherByUsername($teacherUsername);
if ($data) {
if ($data['id_teacher'] != $teacher-
>id_teacher) {
$this-
>message('Ooppsss!','Username sudah terdaftar, silahkan coba username
lain','error');
redirect('page/teacher_add');
}
} // VALIDATION USERNAME //
if ($_FILES['teacher_photo']['name']) {
$this->imageConf('teachers'); // Validation
image
if(!$this->upload->do_upload('teacher_photo')) :
$this->message('Oopppsss',$this->upload-
>display_errors(),'error');
redirect('page/teachers');
else :
$dataUpload = $this->upload->data();
$data['teacher_photo'] = str_replace(' ', '_',
$dataUpload['file_name']);
// COMPRESS IMAGE //
$resolution = ['width' => 500, 'height' => 500];
53
$this-
>compreesImage('teachers',$dataUpload['file_name'],$resolution);
endif;
}
unset($data['id_class']);
unset($data['id_lesson']);
if ($this->input->post('password') != '') {
$data['teacher_password'] = crypt($this-
>input->post('teacher_password'),'');
} else {
unset($data['teacher_password']);
}
$data['teacher_username'] = $teacherUsername;
$this->master->updateTeacher($data);
// FOR CLASS //
foreach ($this->master->getClassByTeacher($this-
>input->post('id_teacher')) as $rClass => $vClass) {
$classDel = true;
foreach ($this->input->post('id_class') as
$_rClass => $_vClass) {
if ($_vClass == $vClass->id_class) {
$classDel = false;
}
}
if ($classDel) {
$this->master-
>deleteClassByTeacher($this->input->post('id_teacher'),$vClass-
>id_class);
}
}
foreach ($this->input->post('id_class') as $__rClass
=> $__vClass) {
$classIns = true;
foreach ($this->master-
>getClassByTeacher($this->input->post('id_teacher')) as $rClass_ =>
$vClass_) {
54
if ($__vClass == $vClass_-
>id_class) {
$classIns = false;
}
}
if ($classIns) {
$singleClass = [
'id_teacher' => $this->input-
>post('id_teacher'),
'id_class' => $__vClass,
];
$this->master-
>insertTeacherClass($singleClass);
}
}
// FOR LESSON //
foreach ($this->master-
>getLessonByTeacher($this->input->post('id_teacher')) as $rLesson =>
$vLesson) {
$lessonDel = true;
foreach ($this->input->post('id_lesson') as
$_rLesson => $_vLesson) {
if ($_vLesson == $vLesson-
>id_lesson) {
$lessonDel = false;
}
}
if ($lessonDel) {
$this->master-
>deleteLessonByTeacher($this->input->post('id_teacher'),$vLesson-
>id_lesson);
}
}
foreach ($this->input->post('id_lesson') as
$__rLesson => $__vLesson) {
$lessonIns = true;
55
foreach ($this->master-
>getLessonByTeacher($this->input->post('id_teacher')) as $rLesson_ =>
$vLesson_) {
if ($__vLesson == $vLesson_-
>id_lesson) {
$lessonIns = false;
}
}
if ($lessonIns) {
$singleLesson = [
'id_teacher' => $this->input-
>post('id_teacher'),
'id_lesson' => $__vLesson,
];
$this->master-
>insertTeacherLesson($singleLesson);
}
}
$this->message('Selamat!','Data guru berhasil
diubah','success');
}
redirect('page/teachers');
}
public function students($id_student = NULL) {
if ($this->input->post()) {
$data = $this->input->post();
// CHECK NIS //
if ($this->input->post('id_student')) {
$dataStudent = $this->master-
>getStudentByNis($data['student_nis']);
if ($dataStudent) {
if ($dataStudent->id_student !=
$data['id_student']) {
$this-
>message('Ooppsss!','NIS sudah terdaftar, silahkan coba NIS lain','error');
56
redirect('page/student_edit/'.$data['id_student']);
}
}
} else {
if ($this->master-
>getStudentByNis($data['student_nis'])) {
$this->message('Ooppsss!','NIS
sudah terdaftar, silahkan coba NIS lain','error');
redirect('page/student_add');
}
} // VALIDATION NIS AVAILABLE //
if ($_FILES['student_photo']['name']) {
$this->imageConf('students'); // Validation
image
if(!$this->upload->do_upload('student_photo')) :
$this->message('Oopppsss',$this->upload-
>display_errors(),'error');
redirect('page/students');
else :
$dataUpload = $this->upload->data();
$data['student_photo'] = str_replace(' ', '_',
$dataUpload['file_name']);
// COMPRESS IMAGE //
$resolution = ['width' => 500, 'height' => 500];
$this-
>compreesImage('students',$dataUpload['file_name'],$resolution);
endif;
} // IMAGE //
if ($this->input->post('student_password') != '') {
$data['student_password'] = crypt($this-
>input->post('student_password'),'');
} else {
unset($data['student_password']);
57
}
if ($this->input->post('id_student')) {
$this->master->updateStudent($data);
$this->message('Selamat!','Data siswa
berhasil diubah','success');
} else {
$data['student_created'] = date('Y-m-d');
$this->master->insertStudent($data);
$this->message('Selamat!','Data siswa
berhasil ditambahkan','success');
}
} elseif($id_student) {
$data = [
'id_student' => $id_student,
'student_hide' => 1
];
$this->master->updateStudent($data);
$this->message('Selamat!','Data siswa berhasil
diubah','success');
}
redirect('page/students');
}
public function findTypeAndClassForReport($id_lesson) {
if (!$id_lesson) {
echo "failure";
}
$dataLesson = $this->assignment-
>getLessonById($id_lesson);
if (!$dataLesson) {
echo "failure";
}
$dataType = $this->assignment-
>getAsssignmentTypeByLesson($id_lesson);
$dataClass = [];
$assignmentClass = [];
58
foreach ($this->assignment-
>getAssignmentByLesson($id_lesson) as $r => $v) {
foreach ($this->assignment-
>getClassByAssignment($v->id_assignment) as $_r => $_v) {
if ($this->session->userdata('level') ==
'guru') {
$valPush = false;
foreach ($this->master-
>getClassByTeacher($this->session->userdata('id_')) as $__r => $__v) {
if ($__v->id_class == $_v-
>id_class) {
$valPush = true;
}
}
if ($valPush) {
array_push($assignmentClass, $_v);
}
} else {
array_push($assignmentClass, $_v);
}
}
}
foreach ($assignmentClass as $r_ => $v_) {
if ($dataClass) {
$val = true;
foreach ($dataClass as $row => $value) {
if ($value->id_class == $v_-
>id_class) {
$val = false;
}
}
if ($val) {
array_push($dataClass, $v_);
}
} else {
array_push($dataClass,$v_);
59
}
}
if ($dataType) {
$callback = ['dataType' => $dataType, 'dataClass'
=> $dataClass ];
echo json_encode($callback);
} else {
echo "failure";
}
}
}
Pada langkah terakhir kita akan membuat model dengan nama
MasterModel.php di folder models, lalu tulis skrip berikut ini.
Skrip MasterModel.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class MasterModel extends CI_Model {
// USERS //
public function getAllUser() {
$this->db->order_by('full_name', 'asc');
$this->db->where('admin_hide', 0);
return $this->db->get('ms_admin')->result_object();
}
public function checkAvailableUser($username,$id_admin =
NULL) {
$this->db->where('username', $username);
if ($id_admin) {
$this->db->where('id_admin', $id_admin);
}
$this->db->where('admin_hide', 0);
return $this->db->get('ms_admin')->row_object();
}
public function insertUser($data) {
return $this->db->insert('ms_admin', $data);
}
60
public function updateUser($data) {
$this->db->where('id_admin', $data['id_admin']);
return $this->db->update('ms_admin', $data);
}
// END //
// LESSONS //
public function getAllLesson() {
$this->db->where('lesson_hide', 0);
$this->db->order_by('lesson_name', 'asc');
return $this->db->get('ms_lesson')->result_object();
}
public function insertLesson($data) {
return $this->db->insert('ms_lesson', $data);
}
public function updateLesson($data) {
$this->db->where('id_lesson', $data['id_lesson']);
return $this->db->update('ms_lesson', $data);
}
// END //
// CLASSES //
public function getAllClass() {
$this->db->where('class_hide', 0);
$this->db->order_by('class_name', 'asc');
return $this->db->get('ms_class')->result_object();
}
public function getClassById($id_class) {
$this->db->where('id_class', $id_class);
return $this->db->get('ms_class')->row_object();
}
public function insertClass($data) {
return $this->db->insert('ms_class', $data);
}
public function updateClass($data) {
$this->db->where('id_class', $data['id_class']);
return $this->db->update('ms_class', $data);
}
// END //
// TEACHERS //
public function getAllTeacher() {
61
$this->db->order_by('teacher_name', 'asc');
$this->db->where('teacher_hide', 0);
return $this->db->get('ms_teacher')->result_object();
}
public function getTeacherById($id_teacher) {
$this->db->where('id_teacher', $id_teacher);
$this->db->where('teacher_hide', 0);
return $this->db->get('ms_teacher')->row_object();
}
public function getTeacherByUsername($teacher_username) {
$this->db->where('teacher_username', $teacher_username);
$this->db->where('teacher_hide', 0);
return $this->db->get('ms_teacher')->row_object();
}
public function getClassByTeacher($id_teacher) {
$this->db->where('teacher_class.id_teacher', $id_teacher);
$this->db->join('ms_class', 'teacher_class.id_class =
ms_class.id_class', 'left');
return $this->db->get('teacher_class')->result_object();
}
public function getLessonByTeacher($id_teacher) {
$this->db->where('teacher_lesson.id_teacher', $id_teacher);
$this->db->join('ms_lesson', 'teacher_lesson.id_lesson =
ms_lesson.id_lesson', 'left');
return $this->db->get('teacher_lesson')->result_object();
}
public function insertTeacher($data) {
$this->db->insert('ms_teacher', $data);
return $this->db->insert_id();
}
public function insertTeacherClass($data) {
return $this->db->insert('teacher_class',$data);
}
public function insertTeacherLesson($data) {
return $this->db->insert('teacher_lesson', $data);
}
public function updateTeacher($data) {
$this->db->where('id_teacher', $data['id_teacher']);
return $this->db->update('ms_teacher', $data);
}
public function deleteClassByTeacher($id_teacher,$id_class) {
$this->db->where('id_teacher', $id_teacher);
62
$this->db->where('id_class', $id_class);
return $this->db->delete('teacher_class');
}
public function deleteLessonByTeacher($id_teacher,$id_lesson) {
$this->db->where('id_teacher', $id_teacher);
$this->db->where('id_lesson', $id_lesson);
return $this->db->delete('teacher_lesson');
}
// END //
// STUDENTS //
public function getAllStudent($class = null) {
$this->db->order_by('ms_student.student_name', 'asc');
$this->db->where('ms_student.student_hide', '0');
$this->db->where('ms_student.id_class',$class);
$this->db->join('ms_class', 'ms_student.id_class =
ms_class.id_class', 'left');
return $this->db->get('ms_student')->result_object();
}
public function getStudentById($id_student) {
$this->db->where('id_student', $id_student);
$this->db->where('student_hide', 0);
return $this->db->get('ms_student')->row_object();
}
public function getStudentByClass($id_class) {
$this->db->where('ms_student.id_class', $id_class);
$this->db->where('ms_student.student_hide', 0);
$this->db->join('ms_class', 'ms_student.id_class =
ms_class.id_class', 'left');
return $this->db->get('ms_student')->result_object();
}
public function getStudentByNis($student_nis) {
$this->db->where('student_nis', $student_nis);
$this->db->where('student_hide', 0);
return $this->db->get('ms_student')->row_object();
}
public function insertStudent($data) {
return $this->db->insert('ms_student', $data);
}
public function updateStudent($data) {
$this->db->where('id_student', $data['id_student']);
return $this->db->update('ms_student', $data);
63
}
public function getPresenceByCondition($nis,$from,$until) {
$query = "SELECT * FROM st_presence WHERE
LEFT(presence_log,10) BETWEEN '$from' AND '$until' AND nis =
'$nis'";
return $this->db->query($query)->result_object();
}
// END //
public function getAbsenThisMonth() {
$month = date('Y-m');
$query = "SELECT * FROM st_presence WHERE
LEFT(presence_log,7) = '$month'";
return $this->db->query($query)->result_object();
}
public function getAbsenWithCondition($date,$type) {
$query = "SELECT * FROM st_presence WHERE
LEFT(presence_log,10) = '$date' AND presence_type = '$type'";
return $this->db->query($query)->result_object();
}
public function
getAbsenWithFilteringDashboard($student_nis,$from,$until) {
$query = "SELECT * FROM st_presence WHERE
LEFT(presence_log,10) = '$date' AND presence_type = '$type'";
return $this->db->query($query)->row_object();
}
public function
getAbsenWithConditionAndNis($date,$type,$student_nis) {
$query = "SELECT * FROM st_presence WHERE
LEFT(presence_log,10) = '$date' AND presence_type = '$type' AND nis =
'$student_nis'";
// return $query;
return $this->db->query($query)->result_object();
}
public function tendayschart() {
$arr = [];
for ($n = 0; $n <= 9; $n++) {
$tglto = date('Y-m-d',strtotime("-$n days"));
$qa = "SELECT nis FROM `st_presence` WHERE
DATE(presence_log) = '$tglto' And presence_type = 'attend'";
$ql = "SELECT nis FROM `st_presence` WHERE
DATE(presence_log) = '$tglto' And presence_type = 'leave'";
64
$qs = "SELECT nis FROM `st_presence` WHERE
DATE(presence_log) = '$tglto' And presence_type = 'sick'";
$qp = "SELECT nis FROM `st_presence` WHERE
DATE(presence_log) = '$tglto' And presence_type = 'alpha'";
$ra = $this->db->query($qa)->num_rows();
$rl = $this->db->query($ql)->num_rows();
$rs = $this->db->query($qs)->num_rows();
$rp = $this->db->query($qp)->num_rows();
array_unshift($arr, ['logdate' => date('d-m-Y',
strtotime($tglto)), 'attend' => $ra, 'leave' => $rl, 'sick' => $rs, 'alpha' =>
$rp]);
}
return $arr;
}
public function getAllLog() {
$this->db->order_by('id_log', 'desc');
return $this->db->get('ms_log')->result_object();
}
}
Setelah semua tahap tersebut sudah dilakukan kita tinggal masuk ke
halaman master admin pada list menu di sebelah kiri tepatnya pada menu
master -> pengguna , tampilan yang telah di buat seperti berikut.
Gambar II.21
Halaman Pengguna
65
2.2.5. Membuat Form Siswa
Halaman ini merupakan halaman master dari data siswa-siswi yang
tersimpan pada aplikasi Si Ulen. Pada halaman ini kita bisa menambahkan
siswa baru, mengubah , dan menghapusnya. Namun sebelum melakukan
koding, anda harus membuat folder images di dalam folder assets yang
berada pada project root kita. Dalam folder images , silahkan buat 3 folder
berbeda dengan nama sebagai berikut.
Gambar II.22
List Folder Gambar
Sekarang, posisi folder adalah assets/images/students/, pastikan
penempatan folder sudah sesuai. Folder-folder diatas berguna untuk
menampung gambar-gambar sesuai dengan namanya, seperti contoh folder
assignment untuk menampung gambar soal-soal ujian, folder students
untuk menampung foto profil siswa , dan folder teacher menampung foto
profil guru.
Jika sudah langsung kita buat file bernama students.php di dalam
folder views/content/master/. Namun, sebelum membuat file students.php
tambahkan sedikit skrip di dalam file MainPage.php yang telah di buat
sebelumnya.
public function students($class = null) {
if ($this->session->userdata('level') == 'admin' OR $this-
>session->userdata('level') == 'staff') {
$dataStudent = $this->master-
>getAllStudent($class);
66
} else {
$dataStudent = [];
foreach ($this->master->getClassByTeacher($this-
>session->userdata('id_')) as $row => $value) {
foreach ($this->master-
>getStudentByClass($value->id_class) as $r => $v) {
array_push($dataStudent, $v);
}
}
}
// SEND TO SESSION //
if ($dataStudent AND $class) {
$SESS_ = [
'STUDENT_DATA_EXPORT' =>
$dataStudent,
'CLASS_DATA_EXPORT' => $class
];
$this->session->set_userdata($SESS_);
}
// END //
$this->parseData['mclass'] = $this->master->getAllClass();
$this->parseData['cls'] = $class;
$this->parseData['dataStudents'] = $dataStudent;
$this->parseData['content'] = 'content/master/students';
$this->parseData['title'] = 'Ubah Siswa ';
$this->load->view('MainView',$this->parseData);
Skrip students.php
<!-- Page Title Area -->
<div class="row page-title clearfix" style="margin-top:-10px">
<div class="page-title-left">
<h6 class="page-title-heading mr-0 mr-r-5">Data Siswa <a
href="<?= site_url('page/student_add') ?>" class="btn btn-info btn-circle
btn-sm"><i class="feather feather-plus"></i></a></h6>
<p class="page-title-description mr-0 d-none d-md-inline-
block"></p>
</div>
<!-- /.page-title-left -->
<div class="page-title-right d-inline-flex">
67
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?= site_url()
?>">Dashboard</a></li>
<li class="breadcrumb-item active">Data Siswa</li>
</ol>
</div>
</div><!-- /.page-title -->
<div class="widget-list row" style="margin-top:10px;margin-
bottom:80px">
<div class="widget-holder widget-full-height col-md-12">
<div class="widget-bg">
<div class="widget-body">
<div class="row">
<div class="col-sm-4">
<div class="input-group">
<select id="iclass" class="form-
control" onchange="chclass(this.value)">
<option value="null">Pilih
kelas</option>
<?php
foreach ($mclass as
$c) {
if ($c-
>id_class == $cls) {
$s =
'selected';
} else {
$s = '';
}
echo "<option
value='$c->id_class' $s>$c->class_name</option>";
}
?>
</select>
<div class="input-group-addon"><i class="feather
feather-filter"></i></div>
</div>
68
</div>
<div class="col-sm-2">
<div class="form-group">
<?php if ($cls > 0): ?>
<a href="<?= site_url('page/ExportStudent') ?>"
onclick="return confirm('Apa anda yakin ?')" class="btn btn-success">
Export Excel</a>
<?php endif ?>
</div>
</div>
</div>
<table class="table table-stripped table-responsive" data-
toggle="datatables">
<thead>
<tr>
<th style="width:5%">#</th>
<th>Nama</th>
<th>NIS</th>
<th>Kelas</th>
<th>Telepon</th>
<th>Dibuat</th>
<th style="width:10%">Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($dataStudents as $row => $value): ?>
<tr>
<td><?= $row + 1 ?></td>
<td><?= $value->student_name ?></td>
<td><?= $value->student_nis ?></td>
<td><?= $value->class_name ?></td>
<td><?= $value->student_phone ?></td>
<td><?= $value->student_created ?></td>
<td>
69
<a href="<?= site_url('page/student_edit/'.$value-
>id_student) ?>" class="btn btn-primary btn-sm"><i class="feather
feather-edit"></i></a>
<a href="#delete<?= $row ?>" data-toggle="modal"
class="btn btn-danger btn-sm"><i class="feather feather-trash"></i></a>
</td>
</tr>
<!-- MODAL DELETE -->
<div class="modal modal-danger fade" id="delete<?=
$row ?>">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header text-inverse">
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Anda yakin ingin
menghapus data ini?</h4>
</div>
<div class="modal-footer"
style="padding:10px">
<a href="<?=
site_url('MasterCtrl/students/'.$value->id_student) ?>" class="btn btn-
outline-danger btn-block"><i class="feather feather-check-square"></i>
Ya, Hapus data ini!</a>
</div>
</div>
</div>
</div>
<?php endforeach ?>
</tbody>
</table>
</div>
<!-- /.widget-body -->
</div>
<!-- /.widget-bg -->
</div>
</div>
70
<script>
function chclass(id) {
window.location = "<?=base_url('page/students')?>/"+id;
}
</script>
Selanjutnya akan muncul tampilan halaman yang seperti ini :
Gambar II.23
Tabel Siswa
Selanjutnya kita akan membuat halaman tambah siswa dengan nama
students_add.php di dalam folder views/content/master/ , berikut skrip
untuk halaman tambah siswa :
Skrip student_add.php
<script type="text/javascript">
$(function(){
$("#student_photo").on("change", function() {
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) {
$("#imagePreview").css("background", "transparent");
}; // no file selected, or no FileReader support
71
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background
of div
$("#imagePreview").css({"background-image" :
"url("+this.result+")","background-size" : "cover","background-position" :
"center center"});
}
}
});
});
</script>
<!-- Page Title Area -->
<div class="row page-title clearfix" style="margin-top:-10px">
<div class="page-title-left">
<a href="#save" data-toggle="modal" class="btn btn-info btn-sm"><i
class="feather feather-check-square"></i> Simpan</a>
<p class="page-title-description mr-0 d-none d-md-inline-
block"></p>
</div>
<!-- /.page-title-left -->
<div class="page-title-right d-inline-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?= site_url()
?>">Dashboard</a></li>
<li class="breadcrumb-item"><a href="<?=
site_url('page/students') ?>">Data Siswa</a></li>
<li class="breadcrumb-item active">Tambah Siswa</li>
</ol>
</div>
</div><!-- /.page-title -->
<div class="widget-list row" style="margin-top:10px;margin-
bottom:80px">
<div class="widget-holder widget-full-height col-md-12">
72
<div class="widget-bg">
<div class="widget-body">
<form action="<?= site_url('MasterCtrl/students') ?>"
method="POST" enctype="multipart/form-data">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Nama Lengkap</label>
<input type="text" class="form-control"
name="student_name" placeholder="Nama Lengkap" required>
</div>
<div class="form-group">
<label>NIS</label>
<input type="text" class="form-control"
name="student_nis" placeholder="NIS" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control"
name="student_password" placeholder="Password" required>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control"
name="student_email" placeholder="info@youremail.com">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Nomor Telepon</label>
<input type="number" class="form-control"
name="student_phone" placeholder="Nomor Telepon">
</div>
</div>
</div><!-- / Row -->
73
<div class="form-group">
<label>Kelas</label>
<select class="form-control" name="id_class">
<?php foreach ($dataClasses as $row => $value): ?>
<option value="<?= $value->id_class ?>"><?= $value-
>class_name ?></option>
<?php endforeach ?>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Foto Siswa</label>
<input type="file" name="student_photo"
id="student_photo" class="form-control">
<div class="imagePreview" id="imagePreview"></div>
</div>
</div>
</div><!-- / Row -->
<!-- MODAL SAVE -->
<div class="modal modal-info fade" id="save">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-inverse">
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Apa anda sudah yakin
dengan data ini ?</h4>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-outline-info
btn-block">Ya, Simpan dan lanjutkan!</button>
</div>
</div>
</div>
</div><!-- / END MODAL SAVE -->
</form>
74
</div>
<!-- /.widget-body -->
</div>
<!-- /.widget-bg -->
</div>
</div>
Jika sudah sesuai tampilan halaman tambah siswa akan berikut :
Gambar II.24
Tabel Tambah Siswa
Selanjutnya adalah halaman untuk mengubah data siswa, buat file bernama
student_edit.php lalu tuliskan skirp berikut :
Skrip student_edit.php
<script type="text/javascript">
$(function(){
$("#student_photo").on("change", function() {
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) {
$("#imagePreview").css("background", "transparent");
}; // no file selected, or no FileReader support
75
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background
of div
$("#imagePreview").css({"background-image" :
"url("+this.result+")","background-size" : "cover","background-position" :
"center center"});
}
}
});
});
</script>
<!-- Page Title Area -->
<div class="row page-title clearfix" style="margin-top:-10px">
<div class="page-title-left">
<a href="#save" data-toggle="modal" class="btn btn-info btn-sm"><i
class="feather feather-check-square"></i> Simpan</a>
<p class="page-title-description mr-0 d-none d-md-inline-
block"></p>
</div>
<!-- /.page-title-left -->
<div class="page-title-right d-inline-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?= site_url()
?>">Dashboard</a></li>
<li class="breadcrumb-item"><a href="<?=
site_url('page/students') ?>">Data Siswa</a></li>
<li class="breadcrumb-item active">Ubah Siswa</li>
</ol>
</div>
</div><!-- /.page-title -->
<div class="widget-list row" style="margin-top:10px;margin-
bottom:80px">
<div class="widget-holder widget-full-height col-md-12">
76
<div class="widget-bg">
<div class="widget-body">
<form action="<?= site_url('MasterCtrl/students') ?>"
method="POST" enctype="multipart/form-data">
<input type="hidden" name="id_student" value="<?=
$dataStudent->id_student ?>">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Nama Lengkap</label>
<input type="text" class="form-control"
name="student_name" placeholder="Nama Lengkap" required
value="<?= $dataStudent->student_name ?>">
</div>
<div class="form-group">
<label>NIS</label>
<input type="text" class="form-control"
name="student_nis" placeholder="NIS" required value="<?=
$dataStudent->student_nis ?>">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control"
name="student_password" placeholder="Boleh dikosongkan">
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control"
name="student_email" placeholder="info@youremail.com" value="<?=
$dataStudent->student_email ?>">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Nomor Telepon</label>
77
<input type="number" class="form-control"
name="student_phone" placeholder="Nomor Telepon" value="<?=
$dataStudent->student_phone ?>">
</div>
</div>
</div><!-- / Row -->
<div class="form-group">
<label>Kelas</label>
<select class="form-control" name="id_class">
<?php foreach ($dataClasses as $row => $value): ?>
<option <?php if ($value->id_class == $dataStudent-
>id_class): echo "selected"; endif; ?> value="<?= $value->id_class
?>"><?= $value->class_name ?></option>
<?php endforeach ?>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Foto Siswa</label>
<input type="file" name="student_photo"
id="student_photo" class="form-control">
<div class="imagePreview" id="imagePreview"
style="background:url('<?=
base_url('assets/images/students/'.$dataStudent->student_photo)
?>');background-size:cover;background-position:center center"></div>
</div>
</div>
</div><!-- / Row -->
<!-- MODAL SAVE -->
<div class="modal modal-info fade" id="save">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-inverse">
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
78
<h4 class="modal-title">Apa anda sudah yakin
dengan data ini ?</h4>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-outline-info
btn-block">Ya, Simpan dan lanjutkan!</button>
</div>
</div>
</div>
</div><!-- / END MODAL SAVE -->
</form>
</div>
<!-- /.widget-body -->
</div>
<!-- /.widget-bg -->
</div>
</div>
Jika semua halaman sudah selesai kita buat, langkah selanjutnya adalah
membuat skrip action-nya agar data bisa tersimpan ke database dan
gambar yang di unggah tersimpan di folder yang telah kita buat. Silahkan
buka file MasterCtrl.php yang telah kita buat sebelumnya lalu tuliskan
skrip berikut :
Skrip Fungsi Aksi Siswa
public function students($id_student = NULL) {
if ($this->input->post()) {
$data = $this->input->post();
// CHECK NIS //
if ($this->input->post('id_student')) {
$dataStudent = $this->master-
>getStudentByNis($data['student_nis']);
if ($dataStudent) {
if ($dataStudent->id_student !=
$data['id_student']) {
79
$this-
>message('Ooppsss!','NIS sudah terdaftar, silahkan coba NIS lain','error');
redirect('page/student_edit/'.$data['id_student']);
}
}
} else {
if ($this->master-
>getStudentByNis($data['student_nis'])) {
$this->message('Ooppsss!','NIS
sudah terdaftar, silahkan coba NIS lain','error');
redirect('page/student_add');
}
} // VALIDATION NIS AVAILABLE //
if ($_FILES['student_photo']['name']) {
$this->imageConf('students'); // Validation
image
if(!$this->upload->do_upload('student_photo')) :
$this->message('Oopppsss',$this->upload-
>display_errors(),'error');
redirect('page/students');
else :
$dataUpload = $this->upload->data();
$data['student_photo'] = str_replace(' ', '_',
$dataUpload['file_name']);
// COMPRESS IMAGE //
$resolution = ['width' => 500, 'height' => 500];
$this-
>compreesImage('students',$dataUpload['file_name'],$resolution);
endif;
} // IMAGE //
if ($this->input->post('student_password') != '') {
$data['student_password'] = crypt($this-
>input->post('student_password'),'');
80
} else {
unset($data['student_password']);
}
if ($this->input->post('id_student')) {
$this->master->updateStudent($data);
$this->message('Selamat!','Data siswa
berhasil diubah','success');
} else {
$data['student_created'] = date('Y-m-d');
$this->master->insertStudent($data);
$this->message('Selamat!','Data siswa
berhasil ditambahkan','success');
}
} elseif($id_student) {
$data = [
'id_student' => $id_student,
'student_hide' => 1
];
$this->master->updateStudent($data);
$this->message('Selamat!','Data siswa berhasil
diubah','success');
}
redirect('page/students');
}
Selanjutnya untuk menambahkan query builder pada MasterModel.php
yang telah kita buat sebelum nya, tambahkan skrip berikut :
public function getAllStudent($class = null) {
$this->db->order_by('ms_student.student_name', 'asc');
$this->db->where('ms_student.student_hide', '0');
$this->db->where('ms_student.id_class',$class);
$this->db->join('ms_class', 'ms_student.id_class =
ms_class.id_class', 'left');
return $this->db->get('ms_student')->result_object();
}
81
public function getStudentById($id_student) {
$this->db->where('id_student', $id_student);
$this->db->where('student_hide', 0);
return $this->db->get('ms_student')->row_object();
}
public function getStudentByClass($id_class) {
$this->db->where('ms_student.id_class', $id_class);
$this->db->where('ms_student.student_hide', 0);
$this->db->join('ms_class', 'ms_student.id_class =
ms_class.id_class', 'left');
return $this->db->get('ms_student')->result_object();
}
public function getStudentByNis($student_nis) {
$this->db->where('student_nis', $student_nis);
$this->db->where('student_hide', 0);
return $this->db->get('ms_student')->row_object();
}
public function insertStudent($data) {
return $this->db->insert('ms_student', $data);
}
public function updateStudent($data) {
$this->db->where('id_student', $data['id_student']);
return $this->db->update('ms_student', $data);
}
2.2.6. Membuat Form Mata Pelajaran
Form mata pelajaran berfungsi sebagai data master mata pelajaran
yang akan kita gunakan untuk membuat soal-soal ujian. Untuk memulai
nya kita akan membuat file dengan nama lessons.php didalam folder
views/content/master/, namun sebelum itu tambahkan skrip berikut di
dalam file MainPage.php :
public function lessons() {
$this->parseData['dataLessons'] = $this->master-
>getAllLesson();
$this->parseData['content'] = 'content/master/lessons';
82
$this->parseData['title'] = 'Data Pelajaran ';
$this->load->view('MainView',$this->parseData);
}
Skrip lessons.php
<!-- Page Title Area -->
<div class="row page-title clearfix" style="margin-top:-10px">
<div class="page-title-left">
<h6 class="page-title-heading mr-0 mr-r-5">Data Pelajaran <a
href="#add" data-toggle="modal" class="btn btn-info btn-circle btn-
sm"><i class="feather feather-plus"></i></a></h6>
<p class="page-title-description mr-0 d-none d-md-inline-
block"></p>
</div>
<!-- /.page-title-left -->
<div class="page-title-right d-inline-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?= site_url()
?>">Dashboard</a></li>
<li class="breadcrumb-item active">Pelajaran</li>
</ol>
</div>
</div><!-- /.page-title -->
<div class="widget-list row" style="margin-top:10px;margin-
bottom:80px">
<div class="widget-holder widget-full-height col-md-12">
<div class="widget-bg">
<div class="widget-body">
<table class="table table-striped table-responsive" data-
toggle="datatables">
<thead>
<tr>
<th style="width:7%">#</th>
<th>Nama Pelajaran</th>
<th>Dibuat</th>
83
<th style="width:15%">Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($dataLessons as $row => $value): ?>
<tr>
<td><?= $row + 1 ?></td>
<td><?= $value->lesson_name ?></td>
<td><?= $value->lesson_created ?></td>
<td>
<a href="#edit<?= $row ?>" data-toggle="modal"
class="btn btn-primary btn-sm"><i class="feather feather-edit"></i></a>
<a href="#delete<?= $row ?>" data-toggle="modal"
class="btn btn-danger btn-sm"><i class="feather feather-trash"></i></a>
</td>
</tr>
<!-- MODAL DELETE -->
<div class="modal modal-danger fade" id="delete<?= $row
?>">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header text-inverse">
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Anda yakin ingin
menghapus data ini?</h4>
</div>
<div class="modal-footer" style="padding:10px">
<a href="<?=
site_url('MasterCtrl/lessons/'.$value->id_lesson) ?>" class="btn btn-
outline-danger btn-block"><i class="feather feather-check-square"></i>
Ya, Hapus data ini!</a>
</div>
</div>
</div>
</div>
<!-- MODAL EDIT -->
84
<div class="modal modal-primary fade" id="edit<?= $row
?>">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header text-inverse">
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Ubah Pelajaran</h4>
</div>
<div class="modal-body">
<form action="<?= site_url('MasterCtrl/lessons')
?>" method="POST">
<input type="hidden" name="id_lesson"
value="<?= $value->id_lesson ?>">
<div class="form-group">
<label>Nama Pelajaran</label>
<input type="text" class="form-control"
name="lesson_name" placeholder="Nama Pelajaran" required value="<?=
$value->lesson_name ?>">
</div>
</div>
<div class="modal-footer" style="padding:10px">
<button type="submit" class="btn btn-outline-
info btn-block"><i class="feather feather-check-square"></i>
Simpan!</button>
</div>
</form>
</div>
</div>
</div>
<?php endforeach ?>
</tbody>
</table>
</div>
<!-- /.widget-body -->
</div>
85
<!-- /.widget-bg -->
</div>
</div>
<!-- MODAL -->
<div class="modal modal-info fade" id="add">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header text-inverse">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<h4 class="modal-title">Tambah Pelajaran</h4>
</div>
<div class="modal-body">
<form action="<?= site_url('MasterCtrl/lessons') ?>"
method="POST">
<div class="form-group">
<label>Nama Pelajaran</label>
<input type="text" class="form-control"
name="lesson_name" placeholder="Nama Pelajaran" required>
</div>
</div>
<div class="modal-footer" style="padding:10px">
<button type="submit" onclick="return confirm('Anda yakin ?')"
class="btn btn-outline-info btn-block"><i class="feather feather-check-
square"></i> Simpan!</button>
</div>
</form>
</div>
</div>
</div>
Selanjutnya tambahkan fungsi pada file MasterCtrl.php dan
MasterModel.php untuk penyimpanan ke database.
86
Pada file MasterCtrl.php
public function lessons($id_lesson = NULL) {
if ($this->input->post()) {
$data = $this->input->post();
if ($this->input->post('id_lesson')) {
$this->master->updateLesson($data);
$this->message('Selamat!','Data pelajaran
berhasil diubah','success');
} else {
$data['lesson_created'] = date('Y-m-d');
$this->master->insertLesson($data);
$this->message('Selamat!','Data pelajaran
berhasil ditambahkan','success');
}
} elseif($id_lesson) {
$data = [
'id_lesson' => $id_lesson,
'lesson_hide' => 1
];
$this->master->updateLesson($data);
$this->message('Selamat!','Data pelajaran berhasil
dihapus','success');
}
redirect('page/lessons');
}
Pada file MasterModel.php
public function getAllLesson() {
$this->db->where('lesson_hide', 0);
$this->db->order_by('lesson_name', 'asc');
return $this->db->get('ms_lesson')->result_object();
}
public function insertLesson($data) {
return $this->db->insert('ms_lesson', $data);
}
87
public function updateLesson($data) {
$this->db->where('id_lesson', $data['id_lesson']);
return $this->db->update('ms_lesson', $data); }
Gambar II.25
Halaman Tabel Pelajaran
2.2.7.Membuat Form Kelas
Form ini hanya digunakan sebagai data master untuk kelas yang
berguna saat pembuatan ujian dan saat pengolahan data siswa. Silahkan
tambahkan skrip dibawah ini pada file MainPage.php :
public function classes() {
$this->parseData['dataClasses'] = $this->master-
>getAllClass();
$this->parseData['content'] = 'content/master/classes';
$this->parseData['title'] = 'Data Kelas ';
$this->load->view('MainView',$this->parseData);
}
Setelah itu buat file dengan nama classes.php di folder
views/content/master/ dan masukan skrip berikut:
88
<!-- Page Title Area -->
<div class="row page-title clearfix" style="margin-top:-10px">
<div class="page-title-left">
<h6 class="page-title-heading mr-0 mr-r-5">Data Kelas <a
href="#add" data-toggle="modal" class="btn btn-info btn-circle btn-
sm"><i class="feather feather-plus"></i></a></h6>
<p class="page-title-description mr-0 d-none d-md-inline-
block"></p>
</div>
<!-- /.page-title-left -->
<div class="page-title-right d-inline-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?= site_url()
?>">Dashboard</a></li>
<li class="breadcrumb-item active">Kelas</li>
</ol>
</div>
</div><!-- /.page-title -->
<div class="widget-list row" style="margin-top:10px;margin-
bottom:80px">
<div class="widget-holder widget-full-height col-md-12">
<div class="widget-bg">
<div class="widget-body">
<table class="table table-striped table-responsive"
data-toggle="datatables">
<thead>
<tr>
<th style="width:7%">#</th>
<th>Nama Kelas</th>
<th>Dibuat</th>
<th style="width:15%">Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($dataClasses as $row => $value): ?>
<tr>
<td><?= $row + 1 ?></td>
89
<td><?= $value->class_name ?></td>
<td><?= $value->class_created ?></td>
<td>
<a href="#edit<?= $row ?>" data-toggle="modal"
class="btn btn-primary btn-sm"><i class="feather feather-edit"></i></a>
<a href="#delete<?= $row ?>" data-toggle="modal"
class="btn btn-danger btn-sm"><i class="feather feather-trash"></i></a>
</td>
</tr>
<!-- MODAL DELETE -->
<div class="modal modal-danger fade" id="delete<?= $row
?>">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header text-inverse">
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Anda yakin ingin
menghapus data ini?</h4>
</div>
<div class="modal-footer" style="padding:10px">
<a href="<?=
site_url('MasterCtrl/classes/'.$value->id_class) ?>" class="btn btn-outline-
danger btn-block"><i class="feather feather-check-square"></i> Ya,
Hapus data ini!</a>
</div>
</div>
</div>
</div>
<!-- MODAL EDIT -->
<div class="modal modal-primary fade" id="edit<?= $row
?>">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header text-inverse">
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
90
<h4 class="modal-title">Ubah Kelas</h4>
</div>
<div class="modal-body">
<form action="<?= site_url('MasterCtrl/classes')
?>" method="POST">
<input type="hidden" name="id_class"
value="<?= $value->id_class ?>">
<div class="form-group">
<label>Nama Kelas</label>
<input type="text" class="form-control"
name="class_name" placeholder="Nama Kelas" required value="<?=
$value->class_name ?>">
</div>
</div>
<div class="modal-footer" style="padding:10px">
<button type="submit" class="btn btn-outline-
info btn-block"><i class="feather feather-check-square"></i>
Simpan!</button>
</div>
</form>
</div>
</div>
</div>
<?php endforeach ?>
</tbody>
</table>
</div>
<!-- /.widget-body -->
</div>
<!-- /.widget-bg -->
</div>
</div>
<!-- MODAL -->
<div class="modal modal-info fade" id="add">
<div class="modal-dialog modal-md">
<div class="modal-content">
91
<div class="modal-header text-inverse">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<h4 class="modal-title">Tambah Kelas</h4>
</div>
<div class="modal-body">
<form action="<?= site_url('MasterCtrl/classes') ?>"
method="POST">
<div class="form-group">
<label>Nama Kelas</label>
<input type="text" class="form-control"
name="class_name" placeholder="Nama Kelas" required>
</div>
</div>
<div class="modal-footer" style="padding:10px">
<button type="submit" onclick="return confirm('Anda yakin ?')"
class="btn btn-outline-info btn-block"><i class="feather feather-check-
square"></i> Simpan!</button>
</div>
</form>
</div>
</div>
</div>
Untuk selanjutnya, tambahkan skrip berikut di dalam file MasterCtrl.php
dan MasterModel.php :
Skrip MasterCtrl.php
public function classes($id_class = NULL) {
if ($this->input->post()) {
$data = $this->input->post();
if ($this->input->post('id_class')) {
$this->master->updateClass($data);
$this->message('Selamat!','Data kelas
berhasil diubah','success');
} else {
92
$data['class_created'] = date('Y-m-d');
$this->master->insertClass($data);
$this->message('Selamat!','Data kelas
berhasil ditambahkan','success');
}
} elseif($id_class) {
$data = [
'id_class' => $id_class,
'class_hide' => 1
];
$this->master->updateClass($data);
$this->message('Selamat!','Data kelas berhasil
dihapus','success');
}
redirect('page/classes');
}
Skrip MasterModel.php
public function getAllClass() {
$this->db->where('class_hide', 0);
$this->db->order_by('class_name', 'asc');
return $this->db->get('ms_class')->result_object();
}
public function getClassById($id_class) {
$this->db->where('id_class', $id_class);
return $this->db->get('ms_class')->row_object();
}
public function insertClass($data) {
return $this->db->insert('ms_class', $data);
}
public function updateClass($data) {
$this->db->where('id_class', $data['id_class']);
return $this->db->update('ms_class', $data);
}
:
93
2.2.8.Membuat Form Pembuatan Ujian
Disini kita akan membuat halaman yang berfungsi untuk
membuat,mengubah, dan menghapus ujian atau soal-soal yang akan
digunakan untuk kegiatan ujian online. Pertama tambahkan skrip berikut
di dalam file MainPage.php :
public function assignments() {
$dataAssignment = $this->assignment-
>getAllAssignment();
foreach ($dataAssignment as $row => $value) {
$dataAssignment[$row]->totalQuestion =
count($this->assignment->getQuestionByAssignment($value-
>id_assignment));
}
$this->parseData['dataAssignment'] = $dataAssignment;
$this->parseData['content'] = 'content/assignment/list';
$this->parseData['title'] = 'List Ujian ';
$this->load->view('MainView',$this->parseData);
}
Setelah itu buat folder baru dengan nama assignment di dalam folder
views/content/. Setelah itu buat file dengan nama list.php untuk
menampilakn list ujian yang sudah kita buat :
Skrip list.php
<style type="text/css">
.switchery {
}
.switchery-small {
}
</style>
<!-- Page Title Area -->
<div class="row page-title clearfix" style="margin-top:-10px">
<div class="page-title-left">
94
<h6 class="page-title-heading mr-0 mr-r-5">List Ujian <a href="<?=
site_url('page/create') ?>" class="btn btn-info btn-circle btn-sm"><i
class="feather feather-plus"></i></a></h6>
<p class="page-title-description mr-0 d-none d-md-inline-
block"></p>
</div>
<!-- /.page-title-left -->
<div class="page-title-right d-inline-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?= site_url()
?>">Dashboard</a></li>
<li class="breadcrumb-item active">List Ujian</li>
</ol>
</div>
</div><!-- /.page-title -->
<div class="widget-list row" style="margin-top:10px;margin-
bottom:80px">
<div class="widget-holder widget-full-height col-md-12">
<div class="widget-bg">
<div class="widget-body">
<table class="table table-striped table-responsive" data-
toggle="datatables">
<thead>
<tr>
<th>#</th>
<th>Pelajaran - Tipe</th>
<th>KKM</th>
<th>Total Soal</th>
<th>Penulis</th>
<th>Dibuat</th>
<th style="width:10%">Aktif</th>
<th style="width:15%">Aksi</th>
</tr>
</thead>
<tbody>
95
<?php foreach ($dataAssignment as $row => $value): ?>
<tr>
<td><?= $row + 1 ?></td>
<td><?= $value->lesson_name.' - '.$value-
>assignment_type ?></td>
<td><?= $value->assignment_kkm ?>%</td>
<td><?= $value->totalQuestion ?> Soal</td>
<td><?= $value->assignment_author ?></td>
<td><?= $value->assignment_created ?></td>
<td>
<?php if ($value->totalQuestion < 1): ?>
<center><i class="text-danger">Anda belum
membuat soal</i></center>
<?php else: ?>
<?php if ($value->assignment_active == 1): ?>
<label class="d-flex flex-md-row flex-column
align-items-center cursor-pointer">
<input type="checkbox"
name="assignment_active" id="assignment_active<?= $value-
>id_assignment ?>" checked class="js-switch" onclick="forCheck('<?=
$value->id_assignment ?>')" data-color="#8253eb" data-size="small">
<span id="textLoading<?= $value-
>id_assignment ?>" style="display:none" class="text-muted d-inline-
block"> </span>
</label>
<?php else: ?>
<label class="d-flex flex-md-row flex-column
align-items-center cursor-pointer">
<input type="checkbox"
name="assignment_active" id="assignment_active<?= $value-
>id_assignment ?>" class="js-switch" onclick="forCheck('<?= $value-
>id_assignment ?>')" data-color="#8253eb" data-size="small">
<span id="textLoading<?= $value-
>id_assignment ?>" style="display:none" class="text-muted d-inline-
block"> </span>
</label>
<?php endif ?>
96
<?php endif ?>
</td>
<td>
<a title="Buat Soal" href="<?=
site_url('page/list_question/'.$value->id_assignment) ?>" class="btn btn-
success btn-sm"><i class="feather feather-layers"></i></a>
<a title="Ubah Data Ujian" href="<?=
site_url('page/edit/'.$value->id_assignment) ?>" class="btn btn-primary
btn-sm"><i class="feather feather-edit"></i></a>
<a title="Hapus Ujian" href="#delete<?= $row ?>"
data-toggle="modal" class="btn btn-danger btn-sm"><i class="feather
feather-trash"></i></a>
</td>
</tr>
<!-- MODAL DELETE -->
<div class="modal modal-danger fade" id="delete<?= $row
?>">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header text-inverse">
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Anda yakin ingin
menghapus data ini?</h4>
</div>
<div class="modal-footer" style="padding:10px">
<a href="<?=
site_url('AssignmentCtrl/deleteAssignment/'.$value->id_assignment) ?>"
class="btn btn-outline-danger btn-block"><i class="feather feather-check-
square"></i> Ya, Hapus data ini!</a>
</div>
</div>
</div>
</div>
<?php endforeach ?>
</tbody>
97
</table>
</div>
<!-- /.widget-body -->
</div>
<!-- /.widget-bg -->
</div>
</div>
<script type="text/javascript">
$(function(){
// $("#textLoading").text('');
});
function changeStatus(idAssignment,param) {
$.ajax({
url : '<?=
site_url("AssignmentCtrl/changeStatusAssignment/'+idAssignment+'/'+pa
ram+'") ?>',
type : 'GET',
success:function(res){
return res;
}
});
// return callback;
}
function forCheck(idAssignment) {
if
(document.getElementById("assignment_active"+idAssignment).checked
== true) {
$("#assignment_active"+idAssignment).prop("disabled",true);
$("#textLoading"+idAssignment).text('loading');
$.ajax({
url : '<?=
site_url("AssignmentCtrl/changeStatusAssignment/'+idAssignment+'/1")
?>',
type : 'GET',
success:function(res){
if(res === 'limit') {
98
document.getElementById("assignment_active"+idAssignment).checked
= false;
setTimeout(function(){
$("#assignment_active"+idAssignment).prop("disabled",false);
$("#textLoading"+idAssignment).text('');
swal({
title: "Ooppss! Ujian aktif sudah 10",
text: "Memuat ulang dalam 2 detik",
type: "error",
timer: 2000,
showConfirmButton: false
});
setTimeout(function() {
window.location ="<?= site_url('page/assignments')
?>"
},2000)
},1200);
} else {
setTimeout(function(){
$("#assignment_active"+idAssignment).prop("disabled",false);
$("#textLoading"+idAssignment).text('');
swal({
title: "Woohoo!",
text: "Status ujian berhasil diubah menjadi aktif",
type: "success",
button: true,
});
},1200);
};
}
});
} else
if(document.getElementById("assignment_active"+idAssignment).checke
d == false) {
99
$("#assignment_active"+idAssignment).prop("disabled",true);
$("#textLoading"+idAssignment).text('loading');
changeStatus(idAssignment,2);
setTimeout(function(){
$("#assignment_active"+idAssignment).prop("disabled",false);
$("#textLoading"+idAssignment).text('');
swal({
title: "Woohoo!",
text: "Status ujian berhasil diubah menjadi tidak aktif",
type: "success",
button: true,
});
},1200);
};
}
</script>
Dan akan muncul tampilan dari list ujian seperti ini:
Gambar II.26
Halaman List Ujian
100
Lalu buat file dengan nama AssignmentCtrl.php pada folder controller dan
masukan skrip dibawah ini :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class AssignmentCtrl extends MY_Controller {
public function index() {
redirect('page/assignments');
}
public function create() {
if (!$this->input->post()) {
redirect('page/create');
}
$data = $this->input->post();
unset($data['show_report']);
unset($data['show_analytic']);
unset($data['id_class']);
if ($this->input->post('show_analytic')) {
$data['show_analytic'] = 1;
}
if ($this->input->post('show_report')) {
$data['show_report'] = 1;
}
$data['id_'] = $this->session->userdata('id_');
$data['author_'] = $this->session->userdata('level');
$data['assignment_created'] = date('Y-m-d H:i:s');
$dirName = date('s').'-'.substr(sha1($data['id_']), 4,7).'-
'.$data['id_'];
if (!is_dir('assets/images/assignments/'.$dirName)) {
mkdir('./assets/images/assignments/' . $dirName,
0777, TRUE);
}
101
$data['assignment_path'] = $dirName;
$idAssignment = $this->assignment-
>insertAssignment($data);
// CLASS //
foreach ($this->input->post('id_class') as $row => $value)
{
$single = [
'id_assignment' => $idAssignment,
'id_class' => $value
];
$this->assignment-
>insertAssignmentClass($single);
}
$this->message('Selamat!','Data ujian berhasil di simpan,
silahkan buat soal untuk melanjutkan','success');
redirect('page/list_question/'.$idAssignment);
}
public function update() {
if (!$this->input->post()) {
redirect('page/assignments');
}
$data = $this->input->post();
unset($data['show_report']);
unset($data['show_analytic']);
unset($data['id_class']);
if ($this->input->post('show_analytic')) {
$data['show_analytic'] = 1;
} else {
$data['show_analytic'] = 0;
}
if ($this->input->post('show_report')) {
$data['show_report'] = 1;
} else {
$data['show_report'] = 0;
}
$this->assignment->updateAssignment($data);
102
// CLASS //
foreach ($this->assignment->getClassByAssignment($this-
>input->post('id_assignment')) as $r => $v) {
$valDel = true;
foreach ($this->input->post('id_class') as $row =>
$value) {
if ($value == $v->id_class) {
$valDel = false;
}
}
if ($valDel) {
$this->assignment-
>deleteAssignmentClassId($v->id_aclass);
}
}
foreach ($this->input->post('id_class') as $_row =>
$_value) {
$valIns = true;
foreach ($this->assignment-
>getClassByAssignment($this->input->post('id_assignment')) as $_r =>
$_v) {
if ($_v->id_class == $_value) {
$valIns = false;
}
}
if ($valIns) {
$single = [
'id_assignment' => $this->input-
>post('id_assignment'),
'id_class' => $_value
];
$this->assignment-
>insertAssignmentClass($single);
}
}
103
$this->message('Selamat!','Data ujian berhasil di
ubah','success');
redirect('page/edit/'.$this->input->post('id_assignment'));
}
public function create_question() {
if ($this->input->post('question_') == '') {
$this->message('Ooppsss','Anda belum membuat
soal, pastikan anda membuat soal terlebih dahulu','error');
redirect('page/create_question/'.$this->input-
>post('id_assignment'));
}
$dataQuestion = [
'id_lesson' => $this->input->post('id_lesson'),
'question_' => $this->input->post('question_'),
'question_created' => date('Y-m-d H:i:s')
];
// IMAGE QUESTION //
if ($_FILES['question_image']['name']) {
$this->imageConf('assignments/'.$this->input-
>post('assignment_path')); // Validation image
if(!$this->upload->do_upload('question_image')) :
$this->message('Oopppsss',$this->upload-
>display_errors(),'error');
redirect('page/create_question/'.$this->input-
>post('id_assignment'));
else :
$dataUpload = $this->upload->data();
$dataQuestion['question_image'] = str_replace(' ', '_',
$dataUpload['file_name']);
// COMPRESS IMAGE //
$resolution = ['width' => 500, 'height' => 500];
$this->compreesImage('assignments/'.$this->input-
>post('assignment_path'),$dataUpload['file_name'],$resolution);
endif;
} // IMAGE QUESTION //
// SOUND QUESTION //
104
if ($_FILES['question_sound']['name']) {
$this->soundConf('assignments/'.$this->input-
>post('assignment_path')); // Validation image
if(!$this->upload->do_upload('question_sound')) :
$this->message('Oopppsss',$this->upload-
>display_errors(),'error');
redirect('page/create_question/'.$this->input-
>post('id_assignment'));
else :
$dataUpload = $this->upload->data();
$dataQuestion['question_sound'] = str_replace(' ', '_',
$dataUpload['file_name']);
endif;
} // SOUND QUESTION //
$idQuestion = $this->assignment-
>insertQuestion($dataQuestion);
// FOR OPTION //
foreach (json_decode($this->input->post('JSONanswer'))
as $row => $value) {
$answer = [
'id_question' => $idQuestion,
'option_' => $this->input-
>post('option_'.$value->row),
'option_created' => date('Y-m-d H:i:s')
];
if ($value->row == $this->input-
>post('choosedAnswer')) {
$answer['option_true'] = 1;
}
// IMAGE OPTION //
if ($_FILES['option_image'.$value->row]['name'])
{
$this->imageConf('assignments/'.$this-
>input->post('assignment_path')); // Validation image
if(!$this->upload->do_upload('option_image'.$value-
>row)) :
105
$this->message('Oopppsss','Unggah jawaban nomor
'.($value->row + 1).' gagal, detail -> '.$this->upload-
>display_errors(),'error');
redirect('page/create_question/'.$this->input-
>post('id_assignment'));
else :
$dataUpload = $this->upload->data();
$answer['option_image'] = str_replace(' ', '_',
$dataUpload['file_name']);
// COMPRESS IMAGE //
$resolution = ['width' => 500, 'height' => 500];
$this->compreesImage('assignments/'.$this->input-
>post('assignment_path'),$dataUpload['file_name'],$resolution);
endif;
} // END IMAGE OPTION //
$this->assignment->insertOption($answer);
}
// INSERT ASSIGNMENT QUESTION //
$assignmentQuestion = [
'id_assignment' => $this->input-
>post('id_assignment'),
'id_question' => $idQuestion
];
$this->assignment-
>insertAssignmentQuestion($assignmentQuestion);
$this->message('Yeeayy!','Soal dan jawaban berhasil
disimpan :)','success');
redirect('page/create_question/'.$this->input-
>post('id_assignment'));
}
public function updateQuestion() {
if ($this->input->post('question_') == '') {
$this->message('Ooppsss','Anda belum membuat
soal, pastikan anda membuat soal terlebih dahulu','error');
redirect('page/update_question/'.$this->input-
>post('id_assignment').'/'.$this->input->post('id_question'));
}
106
$dataQuestion = [
'id_question' => $this->input->post('id_question'),
'id_lesson' => $this->input->post('id_lesson'),
'question_' => $this->input->post('question_'),
'question_created' => date('Y-m-d H:i:s')
];
// IMAGE QUESTION //
if ($_FILES['question_image']['name']) {
$this->imageConf('assignments/'.$this->input-
>post('assignment_path')); // Validation image
if(!$this->upload->do_upload('question_image')) :
$this->message('Oopppsss',$this->upload-
>display_errors(),'error');
redirect('page/update_question/'.$this->input-
>post('id_assignment').'/'.$this->input->post('id_question'));
else :
$dataUpload = $this->upload->data();
$dataQuestion['question_image'] = str_replace(' ', '_',
$dataUpload['file_name']);
// COMPRESS IMAGE //
$resolution = ['width' => 500, 'height' => 500];
$this->compreesImage('assignments/'.$this->input-
>post('assignment_path'),$dataUpload['file_name'],$resolution);
endif;
} // IMAGE QUESTION //
// SOUND QUESTION //
if ($_FILES['question_sound']['name']) {
$this->soundConf('assignments/'.$this->input-
>post('assignment_path')); // Validation image
if(!$this->upload->do_upload('question_sound')) :
$this->message('Oopppsss',$this->upload-
>display_errors(),'error');
redirect('page/update_question/'.$this->input-
>post('id_assignment').'/'.$this->input->post('id_question'));
else :
$dataUpload = $this->upload->data();
107
$dataQuestion['question_sound'] = str_replace(' ', '_',
$dataUpload['file_name']);
endif;
} // SOUND QUESTION //
$this->assignment->updateQuestion($dataQuestion);
// FOR OPTION //
foreach (json_decode($this->input->post('JSONanswer'))
as $row => $value) {
$answer = [
'id_question' => $this->input-
>post('id_question'),
'option_' => $this->input-
>post('option_'.$value->row),
'option_created' => date('Y-m-d H:i:s')
];
if ($value->row == $this->input-
>post('choosedAnswer')) {
$answer['option_true'] = 1;
}
// IMAGE OPTION //
if ($_FILES['option_image'.$value->row]['name'])
{
$this->imageConf('assignments/'.$this-
>input->post('assignment_path')); // Validation image
if(!$this->upload->do_upload('option_image'.$value-
>row)) :
$this->message('Oopppsss','Unggah jawaban nomor
'.($value->row + 1).' gagal, detail -> '.$this->upload-
>display_errors(),'error');
redirect('page/update_question/'.$this->input-
>post('id_assignment').'/'.$this->input->post('id_question'));
else :
$dataUpload = $this->upload->data();
$answer['option_image'] = str_replace(' ', '_',
$dataUpload['file_name']);
// COMPRESS IMAGE //
$resolution = ['width' => 500, 'height' => 500];
108
$this->compreesImage('assignments/'.$this->input-
>post('assignment_path'),$dataUpload['file_name'],$resolution);
endif;
} // END IMAGE OPTION //
if ($this->input->post('id_option'.$row)) {
$answer['id_option'] = $this->input-
>post('id_option'.$row);
unset($answer['option_created']);
$this->assignment->updateOption($answer);
} else {
$this->assignment->insertOption($answer);
}
}
$this->message('Yeeayy!','Soal dan jawaban berhasil
diubah :)','success');
redirect('page/update_question/'.$this->input-
>post('id_assignment').'/'.$this->input->post('id_question'));
}
public function removeQuestion($id_question = NULL,
$id_assignment = NULL) {
if (!$id_question OR !$id_assignment) {
redirect('page/assignments');
}
$dataQuestion = $this->assignment-
>getQuestionById($id_question);
$dataAssignment = $this->assignment-
>getAssignmentById($id_assignment);
if (!$dataQuestion OR !$dataAssignment) {
redirect('page/assignments');
}
$forQuestion = [
'id_question' => $id_question,
'question_hide' => 1
];
$this->assignment->updateQuestion($forQuestion);
$forAssignmetnQuestion = [
109
'id_assignment' => $id_assignment,
'id_question' => $id_question,
'val_hide' => 1
];
$this->assignment-
>updateAssignmentQuestion($forAssignmetnQuestion);
$this->message('Yeeayy!','Soal yang anda pilih berhasil
dihapus :)','success');
redirect('page/list_question/'.$id_assignment);
}
public function deleteAssignment($id_assignment = NULL) {
if (!$id_assignment) {
redirect('page/assignments');
}
$dataAssignment = $this->assignment-
>getAssignmentById($id_assignment);
if (!$dataAssignment) {
redirect('page/assignments');
}
$data = [
'id_assignment' => $id_assignment,
'assignment_hide' => 1
];
$this->assignment->updateAssignment($data);
$this->message('Sukses!','Data ujian berhasil dihapus
:)','success');
redirect('page/assignments');
}
// AJAX //
public function changeStatusAssignment($id_assignment,$status)
{
if ($status == 2) {
$status = 0;
}
$data = [
'id_assignment' => $id_assignment,
110
'assignment_active' => $status,
];
$totalAssignment = 0;
foreach ($this->assignment->getAllAssignment() as $row
=> $value) {
if ($value->assignment_active == 1) {
$totalAssignment++;
}
}
if ($totalAssignment >= 10 AND $status == 1) {
echo "limit";
} else {
$this->assignment->updateAssignment($data);
return true;
}
}
}
Selanjutnya buat lagi file dengan nama create.php di dalam folder
views/content/assignment/, file ini bertujuan sebagai form pembuatan ujian
baru, namun sebelumnya tambahkan skrip berikut pada file MainPage.php
berikut:
public function create() {
if ($this->session->userdata('level') == 'guru') {
$dataClasses = $this->master-
>getClassByTeacher($this->session->userdata('id_'));
$dataLessons = $this->master-
>getLessonByTeacher($this->session->userdata('id_'));
} else {
$dataClasses = $this->master->getAllClass();
$dataLessons = $this->master->getAllLesson();
}
$this->parseData['dataLessons'] = $dataLessons;
$this->parseData['dataClasses'] = $dataClasses;
$this->parseData['content'] = 'content/assignment/create';
$this->parseData['title'] = 'Buat Ujian ';
111
$this->load->view('MainView',$this->parseData);
}
Akan muncul tampilan dari halaman membuat ujian seperti berikut ini :
Gambar II.27
Halaman Buat Ujian
Selanjutnya kita akan membuat form pembuatan soal dan preview soal
,namun yang pertama kita buat form pembuatan soal terlebih dahulu
,langsung saja buka file MainPage.php yang berada di dalam folder
controllers dan masukan skrip berikut :
public function create_question($id_assignment = NULL) {
if (!$id_assignment) {
redirect('page/assignments');
}
$dataAssignment = $this->assignment-
>getAssignmentById($id_assignment);
if (!$dataAssignment) {
redirect('page/assignments');
}
$this->parseData['dataAssignment'] = $dataAssignment;
112
$this->parseData['content'] =
'content/assignment/create_question';
$this->parseData['title'] = 'Buat Soal ';
$this->load->view('MainView',$this->parseData);
}
Skrip diatas berfungsi untuk memanggil halaman create_question.php, jadi
kita harus membuat file create_question.php dan skrip nya seperti dibawah
ini :
Skrip create_question.php
<script type="text/javascript">
$(function(){
$("#question_image").on("change", function() {
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) {
$("#imagePreview").css("background", "transparent");
}; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background
of div
$("#imagePreview").css({"background-image" :
"url("+this.result+")","background-size" : "cover","background-position" :
"center center"});
}
}
});
});
</script>
<form action="<?= site_url('AssignmentCtrl/create_question') ?>"
method="POST" enctype="multipart/form-data">
<input type="hidden" name="id_assignment" value="<?=
$dataAssignment->id_assignment ?>">
113
<input type="hidden" name="assignment_path" value="<?=
$dataAssignment->assignment_path ?>">
<input type="hidden" name="id_lesson" value="<?= $dataAssignment-
>id_lesson ?>">
<div class="row page-title clearfix" style="margin-top:-10px">
<div class="page-title-left">
<!-- <h6 class="page-title-heading mr-0 mr-r-5">Tambah Soal</h6>
<p class="page-title-description mr-0 d-none d-md-inline-
block"></p> -->
<a href="<?= site_url('page/list_question/'.$dataAssignment-
>id_assignment) ?>" class="btn btn-primary btn-sm"><i class="feather
feather-arrow-left"></i> Kembali</a>
<a href="#save" data-toggle="modal" class="btn btn-info btn-sm"><i
class="feather feather-check-square"></i> Simpan!</a>
</div>
<!-- /.page-title-left -->
<div class="page-title-right d-inline-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?= site_url()
?>">Dashboard</a></li>
<li class="breadcrumb-item"><a href="<?=
site_url('page/assignments') ?>">List Ujian</a></li>
<li class="breadcrumb-item"><a href="<?=
site_url('page/list_question/'.$dataAssignment->id_assignment) ?>">List
Soal</a></li>
<li class="breadcrumb-item active">Tambah Soal</li>
</ol>
</div>
</div><!-- /.page-title -->
<div class="widget-list row" style="margin-top:10px;margin-
bottom:80px">
<div class="widget-holder widget-full-height col-md-12">
<div class="widget-bg">
<div class="widget-body">
114
<legend>Pertanyaan <a href="#"
onclick="hideShowQuest()"><i id="iconQuest" class="feather feather-
chevron-down"></i></a></legend>
<script type="text/javascript">
var i = 1;
function hideShowQuest() {
if (i === 1) {
$("#question_").hide(200);
$("#iconQuest").removeClass('feather-chevron-down');
$("#iconQuest").addClass('feather-chevron-up');
i = 0;
} else {
$("#question_").show(200);
$("#iconQuest").removeClass('feather-chevron-up');
$("#iconQuest").addClass('feather-chevron-down');
i = 1;
};
}
</script>
<style type="text/css">
#question_ {
margin-bottom: 10px;
width: 100%;
min-height: 100px;
}
.line {
border-bottom: 1px solid #E9E9E9;
width: 100%;
min-height: 1px;
margin: 10px 0px;
}
</style>
<!-- QUESTION -->
<div id="question_">
<textarea data-toggle="tinymce" name="question_" data-
plugin-options='{ "height": 300 }'></textarea>
115
<br />
<div class="row">
<div class="col-sm-2">
<a href="#imageQuestion" data-toggle="modal"
class="btn btn-outline-primary btn-block btn-sm"><i class="feather
feather-image"></i> Unggah Gambar</a>
</div>
<div class="col-sm-2">
<a href="#soundQuestion" data-toggle="modal"
class="btn btn-outline-success btn-block btn-sm"><i class="feather
feather-music"></i> Unggah Suara</a>
</div>
</div><!-- / Row -->
</div><!-- / Question_ -->
<!-- END QUESTION -->
<div class="line"></div>
<!-- OPTION -->
<div class="row">
<div class="col-sm-9">
<legend>
Jawaban
<a href="javascript:;;" onclick="hideShowAnswer()"><i
id="iconAnswer" class="feather feather-chevron-down"></i></a>
</legend>
</div>
<div class="col-sm-3" style="text-align:right">
<button title="Tambah 1 Jawaban" type="button"
onclick="cloneAnswer()" class="btn btn-info btn-circle"><i
class="feather feather-plus"></i></button>
</div>
</div><!-- / Row -->
<script type="text/javascript">
var b = 1;
function hideShowAnswer() {
if (b === 1) {
116
$("#option_").hide(200);
$("#iconAnswer").removeClass('feather-chevron-down');
$("#iconAnswer").addClass('feather-chevron-up');
b = 0;
} else {
$("#option_").show(200);
$("#iconAnswer").removeClass('feather-chevron-up');
$("#iconAnswer").addClass('feather-chevron-down');
b = 1;
};
}
</script>
<style type="text/css">
.chooseAnswer {
width: 100%;
height: 150px;
background-color: #737373;
cursor: pointer;
border-radius: 4px;
color: white;
font-size: 35px;
text-align: center;
padding-top: 40px;
}
.chooseAnswer.active {
background-color: #32B61C;
}
textarea.form-control {
/*border-color:black !important;*/
}
</style>
<input type="hidden" id="totalAnswer" name="totalAnswer"
value="0">
<input type="hidden" id="choosedAnswer"
name="choosedAnswer" value="0">
<input type="hidden" id="JSONanswer" name="JSONanswer">
<script type="text/javascript">
117
var JSONanswer = [];
$(function(){
var initAnswer = { row : 0 };
JSONanswer.push(initAnswer);
$("#JSONanswer").val(JSON.stringify(JSONanswer));
});
</script>
<div id="option_">
<?php for ($i=0; $i < 1 ; $i++) : ?>
<script type="text/javascript">
$(function(){
var c = '<?= $i ?>';
$("#option_image"+c).on("change", function() {
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) {
$("#imagePreview"+c).css("background",
"transparent");
}; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the
FileReader
reader.readAsDataURL(files[0]); // read the local
file
reader.onloadend = function(){ // set image data
as background of div
$("#imagePreview"+c).css({"background-image"
: "url("+this.result+")","background-size" : "cover","background-position"
: "center center"});
}
}
});
});
</script>
<div class="row" id="rowAnswer">
<div class="col-sm-1">
118
<div id="chooseAnswer<?= $i ?>"
class="chooseAnswer" onclick="chooseAnswer('<?= $i ?>')"><?php
include "numberToChar.php"; ?></div>
</div>
<div class="col-sm-11">
<textarea class="form-control" style="height:150px"
name="option_<?= $i ?>" data-toggle="tinymce"></textarea>
<a style="margin-top:10px" href="#answerImage<?=
$i ?>" data-toggle="modal" class="btn btn-sm btn-outline-primary"><i
class="feather feather-image"></i> Unggah Gambar</a>
</div>
</div><!-- / Row -->
<br />
<!-- MODAL IMAGE -->
<div class="modal modal-primary fade"
id="answerImage<?= $i ?>">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-inverse">Unggah
Gambar (max. 2mb)</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="file" name="option_image<?= $i
?>" id="option_image<?= $i ?>" class="form-control">
<div id="imagePreview<?= $i ?>"
class="imagePreview"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-
primary btn-block" data-dismiss="modal">Simpan!</button>
</div>
</div>
119
</div>
</div>
<?php endfor; ?>
<script type="text/javascript">
function cloneAnswer() {
// TOTAL ANSWER //
var totalAnswer = $("#totalAnswer").val();
totalAnswer++;
$("#totalAnswer").val(totalAnswer);
// JSON ANSWER //
var newInit = { row : totalAnswer };
JSONanswer.push(newInit);
$("#JSONanswer").val(JSON.stringify(JSONanswer));
// FOR ANSWER //
var _html = '';
var alph = alphabet(totalAnswer);
_html += '<div class="row"
id="rowAnswer'+totalAnswer+'">';
_html += '<div class="col-sm-1">';
_html += '<div id="chooseAnswer'+totalAnswer+'"
class="chooseAnswer" onclick="chooseAnswer(\'' + totalAnswer +
'\')"><span class="forAlph">'+alph+'</span></div>';
_html += '</div>';
_html += '<div class="col-sm-11">';
_html += '<textarea class="form-control"
style="height:150px" name="option_'+totalAnswer+'"
id="textareaBlank'+totalAnswer+'"></textarea>';
_html += '<a style="margin-top:10px"
href="#answerImage'+totalAnswer+'" data-toggle="modal" class="btn
btn-sm btn-outline-primary"><i class="feather feather-
image"></i> Unggah Gambar</a>';
_html += '<button type="button" style="margin-
top:10px;margin-left:10px" onclick="removeAnswer(\'' + totalAnswer +
'\')" class="btn btn-sm btn-outline-danger"><i class="feather feather-
x"></i> Hapus Jawaban</a>';
_html += '</div>';
_html += '</div>'; // ROW END
120
// FOR MODAL IMAGE //
_html += '<div class="modal modal-primary fade"
id="answerImage'+totalAnswer+'">';
_html += '<div class="modal-dialog">';
_html += '<div class="modal-content">';
_html += '<div class="modal-header">';
_html += '<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">×</button>';
_html += '<h4 class="modal-title text-
inverse">Unggah Gambar (max. 2mb)</h4>';
_html += '</div>';
_html += '<div class="modal-body">';
_html += '<div class="form-group">';
_html += '<input type="file"
name="option_image'+totalAnswer+'" id="option_image'+totalAnswer+'"
class="form-control">';
_html += '<div
id="imagePreview'+totalAnswer+'" class="imagePreview"></div>';
_html += '</div>';
_html += '</div>';
_html += '<div class="modal-footer">';
_html += '<button type="button" class="btn
btn-outline-primary btn-block" data-dismiss="modal">Simpan!</button>';
_html += '</div>';
_html += '</div>';
_html += '</div>';
_html += '</div>';
// END MODAL IMAGE //
_html += '<br />';
$("#appendAnswer").append(_html);
// VALIDATION IMAGE //
$("#option_image"+totalAnswer).bind("change",
function() {
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) {
$("#imagePreview"+totalAnswer).css("background", "transparent");
121
}; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the
FileReader
reader.readAsDataURL(files[0]); // read the local
file
reader.onloadend = function(){ // set image data as
background of div
$("#imagePreview"+totalAnswer).css({"background-image" :
"url("+this.result+")","background-size" : "cover","background-position" :
"center center"});
}
}
});
tinymce.EditorManager.execCommand('mceAddEditor',true,
"textareaBlank"+totalAnswer);
// END VALIDATION IMAGE //
}
</script>
<!-- FOR APPEND ANSWER -->
<div id="appendAnswer"></div>
<!-- FOR APPEND ANSWER -->
</div>
<script type="text/javascript">
function chooseAnswer(count) {
$.each($(".chooseAnswer"),function(i,v){
$(this).removeClass('active');
});
$("#chooseAnswer"+count).addClass('active');
$("#choosedAnswer").val(count);
}
function removeAnswer(row) {
var sure = confirm('Anda yakin ingin menghapus jawaban
ini ?');
122
if (sure) {
var choosedAnswer = $("#choosedAnswer").val();
var totalAnswer = $("#totalAnswer").val();
totalAnswer--;
$("#totalAnswer").val(totalAnswer);
if (row === choosedAnswer) {
chooseAnswer(0);
};
$("#rowAnswer"+row).remove();
// RE-PUSH JSONanswer
JSONanswer.splice(row,1);
$("#JSONanswer").val(JSON.stringify(JSONanswer));
recount();
};
}
function recount() {
var x = 1;
$.each($(".forAlph"),function(){
$(this).text(alphabet(x));
x++;
});
}
</script>
<!-- END OPTION -->
</div><!-- / BODY -->
</div><!-- / BG -->
</div>
</div>
<!-- MODAL IMAGE -->
<div class="modal modal-primary fade" id="imageQuestion">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
123
<h4 class="modal-title text-inverse">Unggah Gambar (max.
2mb)</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="file" name="question_image"
id="question_image" class="form-control">
<div id="imagePreview" class="imagePreview"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary btn-
block" data-dismiss="modal">Simpan!</button>
</div>
</div>
</div>
</div>
<!-- MODAL SOUND -->
<div class="modal modal-success fade" id="soundQuestion">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<h4 class="modal-title text-inverse">Unggah Suara (max. 2mb,
.mp3)</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="file" name="question_sound" class="form-
control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-success btn-block"
data-dismiss="modal">Simpan!</button>
</div>
124
</div>
</div>
</div>
<!-- MODAL SAVE -->
<div class="modal modal-info fade" id="save">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<h4 class="modal-title text-inverse">Apa sudah anda yakin
dengan data ini ?</h4>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-outline-info btn-
block">Ya, Simpan dan lanjutkan!</button>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
function alphabet(data) {
var callback = '';
switch(parseInt(data)) {
case 1 :
callback = 'B';
break;
case 2 :
callback = 'C';
break;
case 3 :
callback = 'D';
break;
125
case 4 :
callback = 'E';
break;
case 5 :
callback = 'F';
break;
case 6 :
callback = 'G';
break;
case 7 :
callback = 'H';
break;
case 8 :
callback = 'I';
break;
case 9 :
callback = 'J';
break;
case 10:
callback = "K";
break;
case 11:
callback = "L";
break;
case 12:
callback = "M";
break;
case 13:
callback = "N";
break;
case 14:
callback = "O";
break;
case 15:
callback = "P";
break;
case 16:
126
callback = "Q";
break;
case 17:
callback = "R";
break;
case 18:
callback = "S";
break;
case 19:
callback = "T";
break;
case 20:
callback = "U";
break;
case 21:
callback = "V";
break;
case 22:
callback = "W";
break;
case 23:
callback = "X";
break;
case 24:
callback = "Y";
break;
case 25:
callback = "Z";
break;
default :
callback = data;
break;
}
return callback;
}
</script>
127
Selanjutnya kita akan membuat halaman tambahan ,untuk review soal
yang telah kita buat langsung saja kembali ke MainPage.php yang ada di
folder controllers ,lalu masukan skrip berikut :
public function detail_question($id_assignment = NULL, $id_question =
NULL,$bank = NULL) {
if (!$id_question OR !$id_assignment) {
redirect('page/assignments');
}
$dataQuestion = $this->assignment-
>getQuestionById($id_question);
$dataAssignment = $this->assignment-
>getAssignmentById($id_assignment);
if (!$dataQuestion OR !$dataAssignment) {
redirect('page/assignments');
}
$dataQuestion->options = $this->assignment-
>getOptionByQuestion($id_question);
$this->parseData['dataQuestion'] = $dataQuestion;
$this->parseData['dataAssignment'] = $dataAssignment;
$this->parseData['bank'] = $bank;
$this->parseData['content'] =
'content/assignment/detail_question';
$this->parseData['title'] = 'Rincial Soal ';
$this->load->view('MainView',$this->parseData);
}
Langkah selanjutnya membuat file dengan nama detail_question.php pada
folder views/content/assignment/detail_question/, lalu masukan skrip
berikut :
Skrip detail_question
<!-- Page Title Area -->
<div class="row page-title clearfix" style="margin-top:-10px">
<div class="page-title-left">
<h6 class="page-title-heading mr-0 mr-r-5">Rincial Soal</h6>
128
<p class="page-title-description mr-0 d-none d-md-inline-
block"></p>
</div>
<!-- /.page-title-left -->
<div class="page-title-right d-inline-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?= site_url()
?>">Dashboard</a></li>
<?php if ($bank): ?>
<li class="breadcrumb-item"><a href="<?= site_url('page/bank')
?>">Bank Soal</a></li>
<?php else: ?>
<li class="breadcrumb-item"><a href="<?=
site_url('page/assignments') ?>">List Ujian</a></li>
<li class="breadcrumb-item"><a href="<?=
site_url('page/list_question/'.$dataAssignment->id_assignment) ?>">List
Soal</a></li>
<?php endif ?>
<li class="breadcrumb-item active">Rincial Soal</li>
</ol>
</div>
</div><!-- /.page-title -->
<style type="text/css">
.line {
width: 100%;
min-height: 1px;
border-bottom: 1px solid #E9E9E9;
margin: 10px 0px;
}
.bigLine {
width: 100%;
border-bottom: 1px solid black;
min-height: 2px;
}
.audio {
margin-top:20px;
129
background-color: black;
width: 100% !important;
}
</style>
<div class="widget-list row" style="margin-top:10px;margin-
bottom:80px">
<div class="widget-holder widget-full-height col-md-12">
<div class="widget-bg">
<div class="widget-body">
<legend>Pertanyaan</legend>
<div class="question_">
<div class="row">
<?php if ($dataQuestion->question_image != ''): ?>
<div class="col-sm-8">
<?php else: ?>
<div class="col-sm-12">
<?php endif; ?>
<?= $dataQuestion->question_ ?>
<div class="line"></div>
<?php if ($dataQuestion->question_sound != ''): ?>
<a href="#playMusic" data-toggle="modal"
class="btn btn-sm btn-outline-primary"><i class="feather feather-
music"></i> Mainkan Suara</a>
<div class="modal modal-primary fade"
id="playMusic">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-
inverse">Mainkan Suara</h4>
</div>
<div class="modal-body">
<audio class="audio" src="<?=
base_url('assets/images/assignments/'.$dataAssignment-
130
>assignment_path.'/'.$dataQuestion->question_sound) ?>"
type="audio/mp3"></audio>
</div>
</div>
</div>
</div>
<?php endif ?>
</div>
<?php if ($dataQuestion->question_image != ''): ?>
<div class="col-sm-4">
<a data-fancybox="gallery" href="<?=
base_url('assets/images/assignments/'.$dataAssignment-
>assignment_path.'/'.$dataQuestion->question_image) ?>"><img
src="<?= base_url('assets/images/assignments/'.$dataAssignment-
>assignment_path.'/'.$dataQuestion->question_image) ?>" class="img-
thumbnail"></a>
</div>
<?php endif ?>
</div><!-- / Row -->
</div><!-- / Question -->
<br />
<div class="bigLine"></div>
<legend>Jawaban</legend>
<div class="option_">
<?php foreach ($dataQuestion->options as $row => $value):
?>
<div class="row" style="margin-bottom:20px;border-
bottom:1px solid #E9E9E9">
<div class="col-sm-1">
<center><?php $i = $row; include
"numberToChar.php"; ?></center>
</div>
<div class="col-sm-11">
<div class="row">
<?php if ($value->option_image != ''): ?>
<div class="col-sm-9">
<?php else : ?>
131
<div class="col-sm-12">
<?php endif; ?>
<?php if ($value->option_true == 1): ?>
<div class="alert alert-success"
style="padding:5px">
Jawaban Benar
</div>
<?php endif ?>
<?= $value->option_ ?>
</div>
<?php if ($value->option_image != ''): ?>
<div class="col-sm-3">
<a data-fancybox="gallery" href="<?=
base_url('assets/images/assignments/'.$dataAssignment-
>assignment_path.'/'.$value->option_image) ?>"><img src="<?=
base_url('assets/images/assignments/'.$dataAssignment-
>assignment_path.'/'.$value->option_image) ?>" class="img-
thumbnail"></a>
</div>
<?php endif ?>
</div><!-- / Row -->
</div>
</div><!-- / Row -->
<?php endforeach ?>
</div>
Jika sudah maka tampilannya akan seperti berikut :
Gambar II.28
Tombol Membuka List Soal
132
Dihalaman ini guru bisa melihat jawaban dari masing-masing pertanyaan
yang telah dibuat.
Selanjutnya kita akan membuat halaman listing soal-soal ujian yang telah
dibuat, langsung sja kita buka saja file MainPage.php dan masukan skrip
berikut :
public function list_question($id_assignment = NULL) {
if (!$id_assignment) {
redirect('page/assignments');
}
$dataAssignment = $this->assignment-
>getAssignmentById($id_assignment);
if (!$dataAssignment) {
redirect('page/assignments');
}
$dataAssignment->questions = $this->assignment-
>getQuestionByAssignment($id_assignment);
foreach ($dataAssignment->questions as $row => $value) {
$dataAssignment->questions[$row]->totalAnswer =
count($this->assignment->getOptionByQuestion($value->id_question));
}
$this->parseData['dataAssignment'] = $dataAssignment;
$this->parseData['content'] =
'content/assignment/list_question';
$this->parseData['title'] = 'List Soal ';
$this->load->view('MainView',$this->parseData);
}
Tahap selanjutnya kita buat file bernama list_question.php di dalam folder
views/content/assignment/ dan masukan skrip berikut :
Skrip list_question.php
<div class="row page-title clearfix" style="margin-top:-10px">
<div class="page-title-left">
<h6 class="page-title-heading mr-0 mr-r-5">List Soal <a href="<?=
site_url('page/create_question/'.$dataAssignment->id_assignment) ?>"
133
class="btn btn-circle btn-info btn-sm"><i class="feather feather-
plus"></i></a></h6>
<p class="page-title-description mr-0 d-none d-md-inline-
block"></p>
</div>
<!-- /.page-title-left -->
<div class="page-title-right d-inline-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?= site_url()
?>">Dashboard</a></li>
<li class="breadcrumb-item"><a href="<?=
site_url('page/assignments') ?>">List Ujian</a></li>
<li class="breadcrumb-item active">List Soal</li>
</ol>
</div>
</div><!-- /.page-title -->
<div class="widget-list row" style="margin-top:10px;margin-
bottom:80px">
<div class="widget-holder widget-full-height col-md-12">
<div class="widget-bg">
<div class="widget-body">
<a href="<?= site_url('page/reuse_question/'.$dataAssignment-
>id_assignment) ?>" class="btn btn-primary"><i class="feather feather-
file"></i> Gunakan Soal Lain</a>
<table class="table table-striped table-responsive" data-
toggle="datatables">
<thead>
<tr>
<th style="width:5%">#</th>
<th>Pertanyaan</th>
<th style="width:10%">Total</th>
<th style="width:15%">Aksi</th>
</tr>
</thead>
<tbody>
134
<?php foreach ($dataAssignment->questions as $row =>
$value): ?>
<tr>
<td><?= $row + 1 ?></td>
<td><?= $value->question_ ?></td>
<td><?= $value->totalAnswer ?> Jawaban</td>
<td>
<a title="Lihat detail" href="<?=
site_url('page/detail_question/'.$dataAssignment-
>id_assignment.'/'.$value->id_question) ?>" class="btn btn-primary btn-
sm"><i class="feather feather-eye"></i></a>
<a title="Edit soal" href="<?=
site_url('page/update_question/'.$dataAssignment-
>id_assignment.'/'.$value->id_question) ?>" class="btn btn-success btn-
sm"><i class="feather feather-edit"></i></a>
<a href="#delete<?= $row ?>" data-toggle="modal"
class="btn btn-danger btn-sm"><i class="feather feather-trash"></i></a>
</td>
</tr>
<!-- MODAL DELETE -->
<div class="modal modal-danger fade" id="delete<?=
$row ?>">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-inverse">Anda
yakin ingin menhapus soal ini ?</h4>
</div>
<div class="modal-footer">
<a href="<?=
site_url('AssignmentCtrl/removeQuestion/'.$value-
>id_question.'/'.$dataAssignment->id_assignment) ?>" class="btn btn-
outline-danger btn-block">Ya, Hapus soal ini!</a>
</div>
</div>
135
</div>
</div>
<?php endforeach ?>
</tbody>
</table>
</div><!-- / BODY -->
</div><!-- / BG -->
</div>
</div>
2.3. Rancangan Form Transaksi
2.3.1.Mambuat template frontend untuk transaksi
Disini untuk tampilan aplikasi kami menggunakan template untuk
tampilan aplikasi menjadi lebih menarik dan untuk mempersingkat waktu
juga dalam membangun aplikasi ini. Setelah templatenya kita download
,lalu masukan ke folder exam-assets. Yang telah kita buat :
Gambar II.29
Menambahkan Folder exam-assets
Langkah selanjutnya membuat routing untuk mengakses halaman
frontend, caranya buka file routes.php di dalam folder
application/config/routes.php dan masukan skrip berikut :
$route['exam'] = 'ExamCtrl';
$route['exam/(:any)'] = 'ExamCtrl/$1';
$route['exam/(:any)/(:any)'] = 'ExamCtrl/$1/$2';
$route['exam/(:any)/(:any)/(:any)'] = 'ExamCtrl/$1/$2/$3';
$route['exam/(:any)/(:any)/(:any)/(:any)'] = 'ExamCtrl/$1/$2/$3/$4';
136
$route['exam/(:any)/(:any)/(:any)/(:any)/(:any)'] =
'ExamCtrl/$1/$2/$3/$4/$5';
Setelah itu buat controller dengan nama ExamCtrl.php untuk mengelola
data transaksi pada halaman frontend, skripnya sebagai berikut :
Skrip ExamCtrl.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class ExamCtrl extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load-
>model('AssignmentModel','assignment',TRUE);
$this->load->model('MasterModel','master',TRUE);
date_default_timezone_set('Asia/Jakarta');
if (!$this->session->userdata('examToken')) {
$this->session->sess_destroy();
redirect('Auth/exam');
}
}
public function message($title = NULL,$text = NULL,$type =
NULL) {
return $this->session->set_flashdata([
'title' => $title,
'text' => $text,
'type' => $type
]
);
}
public $dataParse = [
'navbar' => 'exam/inc/navbar',
'title' => 'No title',
137
'content' => ''
];
public function index() {
redirect('exam/lists');
// $this->dataParse['title'] = 'Dashboard - Boy Science
Club';
// $this->dataParse['content'] = 'exam/content/dashboard';
// $this->load->view('MainExam',$this->dataParse);
}
public function lists() {
$dataAssignments = [];
foreach ($this->assignment->getAllAssignmentStudent() as
$row => $value) {
$push = false;
foreach ($this->assignment-
>getClassByAssignment($value->id_assignment) as $r => $v) {
if ($v->id_class == $this->session-
>userdata('globalStudent')->id_class) {
$push = true;
}
}
if ($push) {
if ($value->assignment_active == 1) {
if (!$this->assignment-
>checkDoneAssignment($value->id_assignment,$this->session-
>userdata('globalStudent')->id_student)) {
array_push($dataAssignments, $value);
}
}
}
}
foreach ($dataAssignments as $r => $v) {
$dataAssignments[$r]->totalQuestion =
count($this->assignment->getQuestionByAssignment($v-
>id_assignment));
138
}
$this->dataParse['dataAssignments'] = $dataAssignments;
$this->dataParse['title'] = 'List Ujian - Boy Science Club';
$this->dataParse['content'] = 'exam/content/lists';
$this->load->view('MainExam',$this->dataParse);
}
}
Selanjutnya kita buat file sebagai main view untuk frontend kita buat file
dengan nama MainExam.php didalam folder view.
Skrip MainExam.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META SECTION -->
<title><?= $title ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<!-- <link rel="icon" href="favicon.ico" type="image/x-icon"> -->
<!-- END META SECTION -->
<!-- CSS INCLUDE -->
<link rel="stylesheet" type="text/css" id="theme" href="<?=
base_url('exam-assets/css/theme-default.css') ?>">
<link href="<?= base_url('assets/mediaelement/mmp.min.css') ?>"
rel="stylesheet" type="text/css">
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.1.3/mediaele
mentplayer.min.css" rel="stylesheet" type="text/css">
<link href="<?= base_url('assets/sweetalert/swal.css') ?>"
rel="stylesheet" type="text/css">
139
<script type="text/javascript" src="<?= base_url('exam-assets')
?>/js\plugins\jquery\jquery.min.js"></script>
<script src="<?= base_url('assets/countdown/js/jquery.plugin.min.js')
?>"></script>
<script src="<?= base_url('assets/countdown/js/jquery.countdown.js')
?>"></script>
<!-- EOF CSS INCLUDE -->
<style type="text/css">
.myContainer {
width: 100%;
margin-top: 80px;
background-color: #F3EEEE;
min-height: 400px;
padding: 10px 50px;
}
</style>
</head>
<body class="x-dashboard">
<script type="text/javascript">
// $(function(){
// setTimeout(function(){
// $("#messageTimeout").hide(200);
// },4000);
// });
</script>
<!-- <?php if ($this->session->flashdata('text')): ?>
<div class="alert alert-<?= $this->session->flashdata('type'); ?>"
style="border-radius:0px" id="messageTimeout">
<button type="button" class="close" data-dismiss="alert" aria-
hidden="true">×</button>
<center><strong><?= $this->session->flashdata('title');
?></strong> <?= $this->session->flashdata('text'); ?></center>
</div>
<?php endif ?> -->
<script type="text/javascript">
$(function(){
140
var title = '<?= $this->session->flashdata("title") ?>';
var text = '<?= $this->session->flashdata("text") ?>';
var type = '<?= $this->session->flashdata("type") ?>';
if (title) {
swal({
title: title,
text: text,
type: type,
button: true,
});
};
});
</script>
<!-- START PAGE CONTAINER -->
<div class="page-container">
<!-- PAGE CONTENT -->
<div class="page-content" style="background:#F3EEEE;">
<!-- PAGE CONTENT WRAPPER -->
<div class="page-content-wrap">
<!-- NAVBAR -->
<?php $this->load->view($navbar); ?>
<!-- END NAVBAR -->
<div class="">
<div class="myContainer">
<?php $this->load->view($content); ?>
</div>
</div>
<div class="x-content-footer" style="color:black;background-
color:white">
Copyright © <?= date('Y') ?>. BraderPedia
</div>
</div>
<!-- END PAGE CONTENT WRAPPER -->
141
</div>
<!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->
<!-- MESSAGE BOX-->
<div class="message-box animated fadeIn" data-sound="alert"
id="mb-signout">
<div class="mb-container">
<div class="mb-middle">
<div class="mb-title"><span class="fa fa-sign-out"></span>
Keluar <strong>Aplikasi</strong> ?</div>
<div class="mb-content">
<p>Apa anda yakin ingin keluar dari aplikasi?</p>
<p>Pencet tombol tidak jika untuk membatalkan proses
ini.</p>
</div>
<div class="mb-footer">
<div class="pull-right">
<a href="<?= site_url('exam/logout') ?>" class="btn btn-
success btn-lg">Ya</a>
<button class="btn btn-default btn-lg mb-control-
close">Tidak</button>
</div>
</div>
</div>
</div>
</div>
<!-- END MESSAGE BOX-->
<script type="text/javascript" src="<?= base_url('exam-assets')
?>/js\plugins\jquery\jquery-ui.min.js"></script>
<script type="text/javascript" src="<?= base_url('exam-assets')
?>/js\plugins\bootstrap\bootstrap.min.js"></script>
<script type="text/javascript" src="<?= base_url('exam-assets')
?>/js\plugins\datatables\jquery.dataTables.min.js"></script>
142
<script type="text/javascript" src="<?= base_url('exam-assets')
?>/js\plugins.js"></script>
<script type="text/javascript" src="<?= base_url('exam-assets')
?>/js\actions.js"></script>
<script src="<?= base_url('assets/sweetalert/swal.min.js')
?>"></script>
<script src="<?= base_url('assets/mediaelement/mmp.min.js')
?>"></script>
</body>
</html>
Selanjutnya kita harus membuat folder include seperti yang kita lakukan
ketika templating aplikasi admin. Caranya buat folder bernama exam di
dalam folder views, lalu di dalam folder exam buat 2 folder lagi dengan
nama inc dan cintent seperti tampilan dibawah ini:
Gambar II.30
Struktur Folder View
Lalu buat file navbar.php di dalam folder inc yang sudah kita buat tadi dan
masukan skrip berikut:
Skrip Navbar.php
<nav class="navbar">
<!-- Logo Area -->
<div class="navbar-header">
<a href="<?= site_url() ?>" class="navbar-brand" style="color:black">
<span class="logo-expand"><img
src="assets/img/logo.png"></span>
<span class="logo-collapse">v.1</span>
</a>
</div>
143
<!-- /.navbar-header -->
<!-- Left Menu & Sidebar Toggle -->
<ul class="nav navbar-nav">
<li class="sidebar-toggle"><a href="javascript:void(0)"
class="ripple"><i class="feather feather-menu list-icon fs-20"></i></a>
</li>
</ul>
<!-- /.navbar-left -->
<!-- /.navbar-search -->
<div class="spacer"></div>
<!-- User Image with Dropdown -->
<ul class="nav navbar-nav">
<li class="dropdown"><a href="javascript:void(0);" class="dropdown-
toggle ripple" data-toggle="dropdown"><span class="avatar thumb-
xs2"><img src="<?= base_url() ?>/assets/images/icon-user.png"
class="rounded-circle" alt=""> <span style="margin-right:20px"><?=
$this->session->userdata('fullName'); ?></span> <i class="feather feather-
chevron-down list-icon"></i></span></a>
<div class="dropdown-menu dropdown-left dropdown-card
dropdown-card-profile animated flipInY">
<div class="card">
<ul class="list-unstyled card-body" style="padding:5px">
<li><a href="<?= site_url('page/logout') ?>"><span><span
class="align-middle"><i class="feather feather-log-out"></i>
Keluar</span></span></a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
144
Setelah itu kita tinggal membuat halaman list ujian sebagai halaman
dashboard, buat file dengan nama lists.php di dalam folder
views/exam/content/ ,dan masukan skrip dibawah ini :
Skrip lists.php
<style type="text/css">
table.table tbody tr td {
background-color: transparent !important;
}
</style>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">List Ujian</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table datatable table-condensed">
<thead>
<tr>
<th>#</th>
<th>Pelajaran - Tipe</th>
<th>KKM</th>
<th>Lama Ujian</th>
<th>Soal</th>
<th>Penulis</th>
<th style="width:5%"></th>
</tr>
</thead>
<tbody>
<?php foreach ($dataAssignments as $row => $value): ?>
<tr>
<td><?= $row + 1 ?></td>
<td><?= $value->lesson_name.' - '.$value-
>assignment_type ?></td>
<td><?= $value->assignment_kkm ?>%</td>
<td><?= $value->assignment_duration ?>
Menit</td>
145
<td><?= $value->totalQuestion ?> Soal</td>
<td><?= $value->assignment_author ?></td>
<td>
<a href="#question<?= $row ?>" data-
toggle="modal" class="btn btn-primary"><i class="fa fa-pencil"></i>
Ujian</a>
</td>
</tr>
<!-- MODAL -->
<div class="modal fade" id="question<?= $row ?>">
<div class="modal-dialog" style="width:30%">
<div class="modal-content">
<div class="modal-header">
<button type="button"
class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-
title">Anda sudah siap ingin melaksanakan ujian ?</h4>
</div>
<div class="modal-footer">
<a href="<?=
site_url('exam/begin/'.$value->id_assignment) ?>" class="btn btn-primary
btn-block">Ya, Saya siap!</a>
</div>
</div>
</div>
</div>
<?php endforeach ?>
</tbody>
</table>
</div>
</div>
</div>
146
2.3.2. Membuat Halaman login dan logout
Halaman dashboard sudah kita buat ,selanjutnya kita harus membuat login
dan logout yang berfungsi sebagai keamanan pertama. Karena di siswa
juga harus melakukan login sebagai autentikasi sebelum mengikuti ujian.
Langsung saja kita buat file dengan nama loginExam.php di dalam folder
views/auth/. skripnya seperti dibawah ini :
Skrip loginExam.php
<!DOCTYPE html>
<html lang="en" class="body-full-height">
<head>
<title>Login </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<!-- CSS INCLUDE -->
<link rel="stylesheet" type="text/css" id="theme" href="<?=
base_url('exam-assets/css/theme-default.css') ?>">
<script src="<?= base_url('assets/downloaded/jquery.min.js')
?>"></script>
<!-- EOF CSS INCLUDE -->
</head>
<body>
<script type="text/javascript">
$(function(){
setTimeout(function(){
$("#messageTimeout").hide(200);
},4000);
});
</script>
<?php if ($this->session->flashdata('text')): ?>
<div class="alert alert-<?= $this->session->flashdata('type'); ?>"
style="border-radius:0px" id="messageTimeout">
147
<button type="button" class="close" data-dismiss="alert" aria-
hidden="true">×</button>
<center><strong><?= $this->session->flashdata('title');
?></strong> <?= $this->session->flashdata('text'); ?></center>
</div>
<?php endif ?>
<div class="login-container login-v2">
<div class="login-box animated fadeInDown">
<div class="login-body">
<div class="login-title"><strong>Login Siswa</strong>,
Ujian Online.</div>
<form action="<?= site_url('Auth/exam') ?>" class="form-
horizontal" method="post">
<div class="form-group">
<div class="col-md-12">
<div class="input-group">
<div class="input-group-addon">
<span class="fa fa-user"></span>
</div>
<input type="number" class="form-control"
placeholder="NIS" name="student_nis" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="input-group">
<div class="input-group-addon">
<span class="fa fa-lock"></span>
</div>
<input type="password" class="form-control"
placeholder="Password" required name="student_password">
</div>
</div>
</div>
<div class="form-group">
148
<div class="col-md-12">
<button class="btn btn-primary btn-lg btn-
block">Login</button>
</div>
</div>
</form>
</div>
<div class="login-footer">
<div class="pull-left">
© 2019 - BraderPedia
</div>
</div>
</div>
</div>
</body>
</html>
Selanjutnya untuk aksi login kita tambahkan skrip aksi di dalam file
auth.php yang telah kita buat sebelumnya. Dan masukan skrip berikut di
dalam file auth tadi :
Skrip auth.php
public function exam() {
if ($this->input->post()) {
$data = $this->input->post();
$student = $this->auth-
>getStudentByNis($data['student_nis']);
if ($student) {
if
(password_verify($data['student_password'],$student-
>student_password)) {
$sess_ = [
'globalStudent' => $student,
'examToken' =>
crypt($student->student_password,'')
];
149
$this->session->set_userdata( $sess_
);
$this->message('Wohoooo!!','Login
berhasil di verifikasi, selamat datang '.$student->student_name,'success');
redirect('exam/lists');
} else {
$this->message('Oooppss','NIS dan
password tidak sesuai, silahkan coba lagi','danger');
redirect('Auth/exam');
}
} else {
$this->message('Oooppss','NIS tidak
terdaftar, silahkan coba lagi','danger');
redirect('Auth/exam');
}
} else {
if ($this->session->userdata('examToken') AND
$this->session->userdata('globalStudent')) {
redirect('exam');
}
$this->load->view('auth/loginExam');
}
}
Silahkan coba masuk ke login siswa,dan jika berhasil maka tampilannya
akan seperti ini :
150
Gambar II.31
Halaman Login Siswa
Membuat login sudah selesai kita tinggal membuat logoutnya, kita hanya
perlu menambahkan skrip pada file ExamCtrl.php ,skripnya sebagai
berikut :
public function logout() {
$this->session->unset_userdata('globalStudent');
$this->session->unset_userdata('examToken');
$this->message('','Silahkan login kembali untuk
melanjutkan','success');
redirect('Auth/exam');
}
2.3.3. Membuat proses ujian dengan ajax
Di bagian ini kita akan fokus pada saat ujian berlangsunng dan kita
akan menggunakan ajax, kenapa kita menggunakan ajax ? Menurut Anna
Fitriya, Mukhamad Nurkamid, Taufik Khotimah(2015:4) Web yang
disertai model ajax akan berkomunikasi dengan server tanpa harus me-
refresh semua klien dibagi menjadi dua bagian, yaitu layer user interface
dan layer ajax. Jadi ajax ini bisa bekerja dibelakang layar .seperti ,ketika
siswa mengerjakan ujian dan waktu yang ditentukan telah habis, ajax
secara otomatis akan menyimpan jawaban yang sudah dijawab. Dan jua
ajax akan menghentikan proses ujian secara paksa.
Langsung saja ke bagian skrip , masukan skrip di file ExamCtrl.php untuk
load halamn ujian, skripnya sebagai berikut :
public function begin($id_assignment = NULL) {
if (!$id_assignment) {
151
redirect('exam/lists');
}
$dataAssignment = $this->assignment-
>getAssignmentById($id_assignment);
if (!$dataAssignment) {
redirect('exam/lists');
} else {
$red = true;
foreach ($this->assignment-
>getClassByAssignment($id_assignment) as $r => $v) {
if ($v->id_class == $this->session-
>userdata('globalStudent')->id_class) {
$red = false;
}
}
if ($red) {
redirect('exam/lists');
}
}
$long = 0;
$begin = [
'id_assignment' => $id_assignment,
'id_student' => $this->session-
>userdata('globalStudent')->id_student,
'time_begin' => date('H:i')
];
$lastBegin = $this->assignment->checkBegin($begin);
if ($lastBegin) {
$to_time = strtotime(date("H:i:s"));
$from_time = strtotime($lastBegin->time_begin);
$long = round(abs($to_time - $from_time) / 60);
} else {
$this->assignment->insertBegin($begin);
}
$dataAssignment->questions = $this->assignment-
>getQuestionByAssignment($id_assignment,$dataAssignment-
>assignment_order);
152
foreach ($dataAssignment->questions as $row => $value) {
$dataAssignment->questions[$row]->options =
$this->assignment->getOptionByQuestion($value->id_question);
}
$this->dataParse['long'] = $long;
$this->dataParse['dataAssignment'] = $dataAssignment;
$this->dataParse['title'] = 'Selamat Mengerjakan - Boy
Science Club';
$this->dataParse['content'] = 'exam/content/begin';
$this->load->view('MainExam',$this->dataParse);
}
Setelah itu kita buat halaman untuk siswa ujian. Buat file dengan nama
begin.php di dalam folder views/exam/content/. Dan masukan skrip
dibawah ini :
<link rel="stylesheet" href="<?=
base_url('assets/fancy/jquery.fancybox.min.css') ?>" type="text/css"
media="screen" />
<style type="text/css">
.boxWhite {
width: 100%;
padding: 10px;
min-height: 100px;
background-color: white;
border: 1px solid black;
border-radius: 6px;
}
p.number {
font-size: 20px;
margin-top: -5px;
color: black;
}
.is-countdown {
background-color: transparent;
border: none;
}
153
.is-countdown .countdown-row .countdown-section {
font-size: 15px;
font-weight: bold;
color: white;
}
.is-countdown .countdown-row .countdown-section:first-child {
margin-right: 10px;
}
.is-countdown .countdown-row .countdown-section:last-child {
margin-left: 10px;
}
.btn-own {
background-color: #119AE1;
border-color: #119AE1;
color: white;
}
.btn-own:hover {
background-color: #119AE1;
border-color: #119AE1;
color: white;
}
.btn-own:visited {
background-color: #119AE1;
border-color: #119AE1;
color: white;
}
.line {
border-bottom: 1px solid black;
width: 100%;
min-height: 2px;
margin:10px 0px;
}
</style>
<script type="text/javascript">
$(function(){
var D = '<?= $dataAssignment->assignment_duration ?>';
var divide = '<?= $long ?>';
154
var clean = D - parseInt(divide);
if (parseInt(clean) < 1) {
timesUp();
} else {
var duration = parseInt(clean * 60);
$("#countdown").countdown({
until: duration, format: 'HMS',
onExpiry: timesUp,
});
};
});
function timesUp() {
var data = $('form').serialize();
var showReport = '<?= $dataAssignment->show_report ?>';
$.ajax({
url : '<?= site_url("exam/calculate") ?>',
type : 'POST',
data : data,
success:function(res) {
swal({
title: 'Oooppss waktu telah berakhir!',
type: 'error',
text: 'Jawaban anda akan disimpan secara otomatis.',
timer: 3000,
showConfirmButton: false
});
setTimeout(function(){
if (parseInt(showReport) == 1) {
window.location.href = "<?=
site_url('exam/report/'.$dataAssignment->id_assignment) ?>";
} else {
window.location.href = "<?= site_url('exam') ?>";
}
},3000);
}
});
}
155
</script>
<div class="panel panel-info">
<div class="panel-heading" style="background-color:#13C3E3">
<div class="row">
<div class="col-sm-8">
<h3 class="panel-title" style="color:white">
<i class="fa fa-edit"></i> Ujian :
<?= $dataAssignment->assignment_type.' - '.$dataAssignment-
>lesson_name ?>
</h3>
</div>
<div class="col-sm-4">
<span class="pull-right"><div
id="countdown"></div></span>
<span class="pull-right"><i
style="color:white" class="fa fa-clock-o"></i> </span>
</div>
</div><!-- / Row -->
</div>
<div class="panel-body">
<legend><i class="fa fa-list"></i> List Soal</legend>
<?php foreach($dataAssignment->questions as $rBottom
=> $vBottom): ?>
<button id="buttonNavigation<?= $rBottom ?>"
onclick="openQuestion('<?= $rBottom ?>')" type="button"
style="margin-bottom:5px" class="btn btn-flat btn-default"><?= $rBottom
+ 1 ?></button>
<?php endforeach ?>
</div>
</div>
<div class="panel panel-info">
<div class="panel-body">
<form action="<?= site_url('exam/calculate') ?>"
method="POST">
156
<input type="hidden" id="totalQuestion" value="<?=
count($dataAssignment->questions) ?>">
<input type="hidden" id="questNow" value="0">
<input type="hidden" name="id_assignment" value="<?=
$dataAssignment->id_assignment ?>">
<?php foreach ($dataAssignment->questions as $rows =>
$value): ?>
<input type="hidden" name="id_question[]"
value="<?= $value->id_question ?>">
<script type="text/javascript">
$(function(){
// VALIDATION HIDE //
var count = '<?= $rows ?>';
if (count > 0) {
$("#question"+count).hide();
};
// END VALIDATION HIDE //
});
</script>
<div class="row" id="question<?= $rows ?>"
class="globalQuestion">
<div class="col-sm-1" style="margin-right:-50px">
<p style="font-size:14px;margin-top:0px"
class="number"><b><?= $rows + 1 ?>.</b></p>
</div>
<?php if ($value->question_image == ''): ?>
<div class="col-sm-11">
<span style="color:black !important;font-size:14px"><?= $value-
>question_ ?></span>
<br />
<?php if ($value->question_sound != ''): ?>
<a href="#questionSound<?= $rows ?>" data-toggle="modal"
class="btn btn-info pull-right"><i class="fa fa-play"></i> Putar Suara</a>
<div class="modal fade" id="questionSound<?= $rows ?>">
<div class="modal-dialog">
<div class="modal-content">
157
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<h4 class="modal-title">Dengarkan baik baik</h4>
</div>
<div class="modal-body">
<audio style="width:100%" src="<?=
base_url('assets/images/assignments/'.$dataAssignment-
>assignment_path.'/'.$value->question_sound) ?>"></audio>
</div>
</div>
</div>
</div>
<br /><br />
<?php endif ?>
<div class="line"></div>
<!-- OPTION -->
<?php include('optionList.php') ?>
<!-- END OPTION -->
</div>
<?php else: ?>
<div class="col-sm-7">
<span style="color:black !important;font-size:17px"><?= $value-
>question_ ?></span>
<br />
<?php if ($value->question_sound != ''): ?>
<a href="#questionSound<?= $rows ?>" data-toggle="modal" class="btn
btn-info pull-right"><i class="fa fa-play"></i> Putar Suara</a>
<div class="modal fade" id="questionSound<?= $rows ?>">
<div class="modal-dialog">
158
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<h4 class="modal-title">Dengarkan file suara untuk menjawab
pertanyaan</h4>
</div>
<div class="modal-body">
<audio style="width:100%" src="<?=
base_url('assets/images/assignments/'.$dataAssignment-
>assignment_path.'/'.$value->question_sound) ?>"></audio>
</div>
</div>
</div>
</div>
<br /><br />
<?php endif ?>
<div class="line"></div>
<!-- OPTION -->
<?php
include('optionList.php') ?>
<!-- END OPTION -->
</div>
<div class="col-sm-4">
<a data-fancybox="gallery"
href="<?= base_url('assets/images/assignments/'.$dataAssignment-
>assignment_path.'/'.$value->question_image) ?>"><img src="<?=
base_url('assets/images/assignments/'.$dataAssignment-
>assignment_path.'/'.$value->question_image) ?>" class="img-
thumbnail"></a>
159
</div>
<?php endif ?>
</div><!-- / Row -->
<?php endforeach ?>
<div class="col-sm-4 col-sm-offset-8">
<hr />
<center>
<button type="button" id="prev"
onclick="prevQuest()" class="btn btn-flat btn-default"><i class="fa fa-
arrow-left"></i> Sebelumnya</button>
<button type="button" id="next"
onclick="nextQuest()" class="btn btn-flat btn-default">Selanjutnya <i
class="fa fa-arrow-right"></i></button>
<a id="finished" href="#finish" data-
toggle="modal" class="btn btn-flat btn-block btn-primary"><i class="fa
fa-check-square"></i> Kumpulkan!</a>
</center>
</div>
<!-- MODAL FINISH -->
<div class="modal fade" id="finish">
<div class="modal-dialog " style="width:35%">
<div class="modal-content">
<div class="modal-header">
<button type="button"
class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Apa
anda sudah yakin dengan jawaban anda ?</h4>
</div>
<div class="modal-footer">
<button type="submit"
class="btn btn-primary btn-flat btn-block"><i class="fa fa-check-
square"></i> Ya, simpan jawaban saya!</button>
</div>
</div>
</div>
</div>
<!-- END MODAL FINISH -->
160
</form>
</div>
</div>
<!-- JAVASCRIPT -->
<script type="text/javascript">
$(function() {
var tQuestion = parseInt($("#totalQuestion").val());
if (tQuestion > 1) {
$("#finished").hide();
$("#prev").hide();
} else {
$("#finished").show();
$("#next").hide();
$("#prev").hide();
};
$("#buttonNavigation0").removeClass('btn-default');
$("#buttonNavigation0").addClass('btn-own');
});
function nextQuest() {
var questNow = parseInt($("#questNow").val());
var total = parseInt($("#totalQuestion").val());
questNow++;
if (questNow >= (parseInt(total) - 1)) {
$("#finished").show();
$("#next").hide();
$("#prev").hide();
} else {
$("#prev").show();
};
openQuestion(questNow);
$("#questNow").val(questNow);
}
function clearButton() {
var total = $("#totalQuestion").val();
for (var i = 0; i <= parseInt(total); i++) {
161
$("#buttonNavigation"+i).addClass('btn-
default');
$("#buttonNavigation"+i).removeClass('btn-
own');
};
}
function prevQuest() {
var questNow = parseInt($("#questNow").val());
questNow--;
if (questNow === 0) {
$("#finished").hide();
$("#prev").hide();
$("#next").show();
} else {
$("#finished").hide();
};
openQuestion(questNow);
$("#questNow").val(questNow);
}
function openQuestion(rows) {
var total = $("#totalQuestion").val();
for (var i = 0; i <= parseInt(total); i++) {
$("#question"+i).hide();
// BUTTON VAL //
if ($("#buttonNavigation"+i).hasClass('btn-
success')) {
} else {
$("#buttonNavigation"+i).removeClass('btn-
own');
$("#buttonNavigation"+i).addClass('btn-
default');
};
};
// SECOND BUTTON VAL //
162
if ($("#buttonNavigation"+rows).hasClass('btn-success'))
{} else {
$("#buttonNavigation"+rows).removeClass('btn-
default');
$("#buttonNavigation"+rows).addClass('btn-own');
}
// END SECOND BUTTON VAL //
$("#question"+rows).show();
// NEXT PREV VAL //
if (parseInt(rows) === parseInt(total - 1)) {
$("#next").hide();
$("#prev").hide();
$("#finished").show();
} else if(parseInt(rows) === 0) {
$("#finished").hide();
$("#prev").hide();
$("#next").show();
} else {
$("#finished").hide();
$("#next").show();
$("#prev").show();
};
$("#questNow").val(rows);
}
function answered(rows) {
$("#buttonNavigation"+rows).removeClass('btn-default');
$("#buttonNavigation"+rows).removeClass('btn-own');
$("#buttonNavigation"+rows).addClass('btn-success');
}
</script>
<script src="<?= base_url('assets/fancy/jquery.fancybox.min.js') ?>"
type="text/javascript"></script>
2.3.4.Membuat Hitungan Mundur
163
Dibagian ini kita akan membuat penghitungan mundur atau countdown
,disini kita akan menggunakan plugin. Walaupun sebenarnya bisa
menggunakan javascript sederhana tetapi untuk mempercepat pembuatan
aplikasi kita menggunakan plugin. Plugin yang akan kita pakai bernama
jQuery countdown, kita bisa melihatnya di website resminya yaitu
http://hilios.github.io/jQuery.countdown/.
Skrip jQuery countdown :
<script type="text/javascript">
$(function(){
var D = '<?= $dataAssignment->assignment_duration ?>';
var divide = '<?= $long ?>';
var clean = D - parseInt(divide);
if (parseInt(clean) < 1) {
timesUp();
} else {
var duration = parseInt(clean * 60);
$("#countdown").countdown({
until: duration, format: 'HMS',
onExpiry: timesUp,
});
};
});
2.4. Rancangan Laporan
2.4.1.Laporan Data Siswa
Disini kita akan membuat output berupa sebuah laporan dari proses yang
telah terjadi. Dalam subuah aplikasi berbasis website , ada beberapa
format laporan yang bisa didapatkan, seperti format excel, PDF, CSV.
Namun untuk laporan internal umunya menggunakan format excel atau
CSV ,sedangkan laporan external biasanya menggunakan format PDF.
Pada laporan data siswa kita menggunakan format excel . cara
membuatnya pertama buka file MainPage.php yang ada di folder
controllers dan cari function bernama student(). Dan masukan skrip
dibawah ini di dalam function student():
164
if ($dataStudent AND $class) {
$SESS_ = [
'STUDENT_DATA_EXPORT' =>
$dataStudent,
'CLASS_DATA_EXPORT' => $class
];
$this->session->set_userdata($SESS_);
}
Setelah itu, buka halaman studets.php yang berada di folder
views/content/master/ dan masukan skrip berikut :
<div class="col-sm-2">
<div class="form-group">
<?php if ($cls > 0): ?>
<a href="<?= site_url('page/ExportStudent') ?>"
onclick="return confirm('Apa anda yakin ?')" class="btn btn-success">
Export Excel</a>
<?php endif ?>
</div>
</div>
Langkah selanjutnya ,membuat function untuk mengambil data dari
session. Buka file MainPage.php yang berada di dalam folder
controllers.php, dan masukan skrip berikut:
public function ExportStudent() {
$DataStudent = $this->session-
>userdata('STUDENT_DATA_EXPORT');
$DataClass = $this->master->getClassById($this->session-
>userdata('CLASS_DATA_EXPORT'));
if ($DataStudent AND $DataClass) {
$Data = [
'DataStudent' => $DataStudent,
'DataClass' => $DataClass
];
$this->load-
>view('content/report/export_student',$Data);
} else {
165
redirect('page/students');
}
}
Jika sudah ,langkah selanjutnya adalah membuat file view untuk
menampilkan data siswa yang tersimpan di dalam session tersebut. Kita
buat file bernama export_students.php terlebih dahulu di dalam folder
views/content/report/ lalu masukan skrip berikut :
Skrip export_students.php
<?php
header("Content-type: application/octet-stream");
header("Content-disposition: attachement; filename=Laporan-Siswa-
Kelas-".$DataClass->class_name.".xls");
header("Pragma: no-cache");
header("Expires: 0");
?>
<style type="text/css">
table.table {
width: 100%;
border-collapse: collapse;
}
table.table thead tr th,
table.table tbody tr td {
padding: 5px;
}
</style>
<h2>
Laporan Data Siswa Kelas : <?= $DataClass->class_name ?>
</h2>
<table class="table" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th style="width:5%">#</th>
<th>Nama</th>
<th>NIS</th>
<th>NISN</th>
<th>Email</th>
166
<th>Telepon</th>
<th>Nama Orang Tua</th>
<th>Telepon Orang Tua</th>
<th>Dibuat</th>
</tr>
</thead>
<tbody>
<?php foreach ($DataStudent as $row => $value): ?>
<tr>
<td><?= $row + 1 ?></td>
<td><?= $value->student_name ?></td>
<td><?= $value->student_nis ?></td>
<td><?= $value->student_nisn ?></td>
<td><?= $value->student_email ?></td>
<td><?= $value->student_phone ?></td>
<td><?= $value->parent_name ?></td>
<td><?= $value->parent_phone ?></td>
<td><?= $value->student_created ?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
Skrip diatas merupakan skrip yang mengubah file HTML menjadi file
excel dengan menggunakan header.
2.4.2.Laporan hasil ujian
Laporan ini adalah inti dari laporan aplikasi ujian online karena data yang
diambil merupakan hasil keseluruhan proses yang terjadi pada aplikasi ini.
Langsung saja buka file MainPage.php pada folder controllers, dan
masukan skrip berikut :
public function results() {
$dataLessons = $this->assignment->getLessonInAssignment();
foreach ($dataLessons as $row => $value) {
$dataLessons[$row]->lesson_name = $this-
>assignment- >getLessonById($value->id_lesson)->lesson_name;
}
167
$this->parseData['dataLessons'] = $dataLessons;
$this->parseData['content'] = 'content/report/result';
$this->parseData['title'] = 'Laporan Hasil Ujian ';
$this->load->view('MainView',$this->parseData);
}
Selanjutnya, buat file bernama result.php pada folder views/content/report,
lalu masukan skrip berikut:
Skrip result.php
<!-- Page Title Area -->
<div class="row page-title clearfix" style="margin-top:-10px">
<div class="page-title-left">
<h6 class="page-title-heading mr-0 mr-r-5">Hasil Ujian</h6>
<p class="page-title-description mr-0 d-none d-md-inline-
block"></p>
</div>
<!-- /.page-title-left -->
<div class="page-title-right d-inline-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?= site_url()
?>">Dashboard</a></li>
<li class="breadcrumb-item active">Hasil Ujian</li>
</ol>
</div>
</div><!-- /.page-title -->
<div class="widget-list row" style="margin-top:10px;margin-
bottom:0px">
<div class="widget-holder widget-full-height col-md-12">
<div class="widget-bg">
<div class="widget-body">
<form action="<?= site_url('page/results') ?>"
method="POST">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>Nama Pelajaran</label>
168
<select class="form-control" name="id_lesson"
id="id_lesson" onchange="find(this.value)">
<option value="0">-- Pilih Pelajaran --</option>
<?php foreach ($dataLessons as $row => $value): ?>
<option value="<?= $value->id_lesson ?>"><?=
$value->lesson_name ?></option>
<?php endforeach ?>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Kelas</label>
<select class="form-control" name="id_class"
id="id_class" readonly></select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Tipe Ujian</label>
<select class="form-control" name="assignment_type"
id="assignment_type" readonly></select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label> </label>
<button id="buttonSubmit" type="submit" class="btn
btn-outline-primary btn-block"><i class="feather feather-search"></i>
Cari</button>
</div>
</div>
</div><!-- / Row -->
</form>
</div><!-- / BODY -->
</div><!-- / BG -->
</div>
169
</div>
Lalu sisipkan skrip berikut pada halaman result.php untuk pemanggilan
ajax karena ajax berperan untuk mencari hasil ujian :
<script type="text/javascript">
function find(value) {
$("#buttonSubmit").html('Sedang mencari...');
$("#buttonSubmit").prop('disabled',true);
$.ajax({
url : '<?=
site_url("MasterCtrl/findTypeAndClassForReport/'+value+'") ?>',
type : 'GET',
success:function(res){
if (res === 'failure') {
swal({
title : 'Oooppss!',
text : 'Tidak ditemukan laporan sesuai data yang dipilih',
timer : 3000,
button : true,
type : 'error'
});
} else {
var callback = $.parseJSON(res);
_type = '';
$.each(callback.dataType,function(i,v){
_type += '<option
value="'+v.assignment_type+'">'+v.assignment_type+'</option>';
});
_class = '';
$.each(callback.dataClass,function(i,v){
_class += '<option
value="'+v.id_class+'">'+v.class_name+'</option>';
});
// INJECT //
setTimeout(function(){
$("#buttonSubmit").html('<i class="feather feather-
search"></i> Cari');
170
$("#buttonSubmit").prop('disabled',false);
$("#assignment_type").html(_type);
$("#id_class").html(_class);
},700);
};
}
});
}
</script>
Selanjutnya buka file MasterCtrl.php yang berada di dalam folder
controllers, lalu tambahkan function findTypeAndClassForReport().
Fungsi tersebut merupakan aksi yang dipanggil oleh ajax ketika memilih
pelajaran.
public function findTypeAndClassForReport($id_lesson) {
if (!$id_lesson) {
echo "failure";
}
$dataLesson = $this->assignment-
>getLessonById($id_lesson);
if (!$dataLesson) {
echo "failure";
}
$dataType = $this->assignment-
>getAsssignmentTypeByLesson($id_lesson);
$dataClass = [];
$assignmentClass = [];
foreach ($this->assignment-
>getAssignmentByLesson($id_lesson) as $r => $v) {
foreach ($this->assignment-
>getClassByAssignment($v->id_assignment) as $_r => $_v) {
if ($this->session->userdata('level') ==
'guru') {
$valPush = false;
foreach ($this->master-
>getClassByTeacher($this->session->userdata('id_')) as $__r => $__v) {
171
if ($__v->id_class == $_v-
>id_class) {
$valPush = true;
}
}
if ($valPush) {
array_push($assignmentClass, $_v);
}
} else {
array_push($assignmentClass, $_v);
}
}
}
foreach ($assignmentClass as $r_ => $v_) {
if ($dataClass) {
$val = true;
foreach ($dataClass as $row => $value) {
if ($value->id_class == $v_-
>id_class) {
$val = false;
}
}
if ($val) {
array_push($dataClass, $v_);
}
} else {
array_push($dataClass,$v_);
}
}
if ($dataType) {
$callback = ['dataType' => $dataType, 'dataClass'
=> $dataClass ];
echo json_encode($callback);
} else {
echo "failure";
}
172
}
}
Selanjutnya kita buat aksi di MainPage.php pada function results ketika
tombol submit ditekan, berikut ini adalah skrip action ketika tombol
submit ditekan :
if ($this->input->post()) {
$dataAssignments = [];
$forAssignment = [];
foreach ($this->assignment-
>getAssignmentByClassNew($this->input->post('id_class')) as $row =>
$value) {
if ($forAssignment) {
$val = false;
foreach ($forAssignment as $_rr =>
$_vv) {
if ($_vv->id_assignment ==
$value->id_assignment) {
$val = true;
}
}
if ($val) {
array_push($forAssignment,
$value);
}
} else {
array_push($forAssignment, $value);
}
}
// NEW LOGIC //
foreach ($forAssignment as $row => $value) {
$assignment = $this->assignment-
>getAssignmentByTypeLessonAndId($this->input-
>post('assignment_type'),$this->input->post('id_lesson'),$value-
>id_assignment);
if ($assignment) {
173
array_push($dataAssignments,$assignment);
}
}
// END //
foreach ($dataAssignments as $r => $v) {
$students = $this->master-
>getStudentByClass($this->input->post('id_class'));
if ($students) {
foreach ($students as $_r => $_v) {
$students[$_r]->result =
$this->assignment->getResultByStudentAndAssignment($_v-
>id_student,$v->id_assignment);
}
$dataAssignments[$r]->students =
$students;
} else {
unset($dataAssignments[$r]);
}
}
// DATA FILTERING AUTH //
$clearAssignment = [];
foreach ($dataAssignments as $rAssignment =>
$vAssignment) {
if ($this->session->userdata('level') !=
'admin') {
if ($vAssignment->id_ == $this-
>session->userdata('id_')) {
array_push($clearAssignment, $vAssignment);
}
} else {
array_push($clearAssignment,
$vAssignment);
}
}
174
// END //
if ($dataAssignments) {
$this->parseData['dataAssignments'] =
$clearAssignment;
$this->parseData['post'] = $this->input-
>post();
$this->parseData['dataClass'] = $this-
>master->getClassById($this->input->post('id_class'));
$this->parseData['dataLesson'] = $this-
>assignment->getLessonById($this->input->post('id_lesson'));
} else {
$this->message('Woopsss!','Tidak
ditemukan laporan hasil ujian pada data ini','error');
redirect('page/results');
}
}
Gambar II.32
Halaman Hasil Ujian
2.4.3. Laporan Analisis ujian
Pada laporan kali ini, memungkinkan admin atau guru mengetahui soal
mana saja yang paling banyak dijawab salah oleh siswa-siswi dan soal
mana saja yang paling banyak dijawab benar oleh siswa-siswi pada
masing-masing ujian.
175
Langsung saja kita buat halaman untuk menampilkan form. Silahkan buka
file MainPage.php pada controllers, lalu tambahkan skrip berikut:
public function analytics() {
if ($this->input->post()) {
$dataAssignments = [];
foreach ($this->assignment-
>getAssignmentByClass($this->input->post('id_class')) as $row =>
$value) {
$assignment = $this->assignment-
>getAssignmentByTypeLessonAndId($this->input-
>post('assignment_type'),$this->input->post('id_lesson'),$value-
>id_assignment);
if ($assignment) {
array_push($dataAssignments,$assignment);
}
}
$students = $this->master-
>getStudentByClass($this->input->post('id_class'));
foreach ($dataAssignments as $r => $v) {
$questions = $this->assignment-
>getQuestionByAssignment($v->id_assignment);
foreach ($questions as $rQuestion =>
$vQuestion) {
$notYet = 0;
$true = 0;
$false = 0;
$empty = 0;
foreach ($students as $rStudent =>
$vStudent) {
$analytics = $this-
>assignment->getAnalyticsByStudentAndAssignment($vStudent-
>id_student,$v->id_assignment);
if ($analytics) {
foreach($analytics as $rAnalytics => $vAnalytic) {
if ($vAnalytic->id_question == $vQuestion->id_question) {
176
if ($vAnalytic->analytics_status == 'true') {
$true++;
} elseif($vAnalytic->analytics_status == 'false') {
$false++;
} elseif($vAnalytic->analytics_status == 'empty') {
$empty++;
}
}
}
} else {
$notYet++;
}
}
$questions[$rQuestion]->notYet = $notYet;
$questions[$rQuestion]->true = $true;
$questions[$rQuestion]->false = $false;
$questions[$rQuestion]->empty = $empty;
}
$dataAssignments[$r]->questions = $questions;
}
// DATA FILTERING AUTH //
$clearAssignment = [];
foreach ($dataAssignments as $rAssignment => $vAssignment) {
if ($this->session->userdata('level') !=
'admin') {
if ($vAssignment->id_ == $this-
>session->userdata('id_')) {
array_push($clearAssignment, $vAssignment);
}
} else {
array_push($clearAssignment,
$vAssignment);
}
}
// END //
177
if ($dataAssignments) {
$this->parseData['dataAssignments'] =
$clearAssignment;
$this->parseData['post'] = $this->input-
>post();
$this->parseData['dataClass'] = $this-
>master->getClassById($this->input->post('id_class'));
$this->parseData['dataLesson'] = $this-
>assignment->getLessonById($this->input->post('id_lesson'));
} else {
$this->message('Woopsss!','Tidak
ditemukan laporan hasil ujian pada data ini','error');
redirect('page/results');
}
}
$dataLessons = $this->assignment-
>getLessonInAssignment();
foreach ($dataLessons as $row => $value) {
$dataLessons[$row]->lesson_name = $this-
>assignment->getLessonById($value->id_lesson)->lesson_name;
}
$this->parseData['dataLessons'] = $dataLessons;
$this->parseData['content'] = 'content/report/analytics';
$this->parseData['title'] = 'Laporan Analysis Ujian ';
$this->load->view('MainView',$this->parseData);
}
178
Gambar II.33
Halaman Hasil Ujian
2.5. Rancangan Backup Data/Keamanan
Menurut Edi wijaya S.Kom, M.Kom, Robert S.Kom M.Kom, Robin
S.Kom ( 2015:26 ) Pada teknologi informasi, backup mengacu pada
menyalin data dimana data tersebut merupakan data salinan yang dapan di
restore kembali apabila ada data yang hilang.
1. Secrecy : Kategori keamanan komputer yang meliputi perlindungan
data/informasi terhadap akses dari pihak-pihak yang tidak berhak serta
masalah keaslian ( autentik ) dari sumber data/informasi.
2. Integrity : kategori keamanan data yang menjamin bahwa data tidak
terganggu selama proses transfer dari sumber ketujuan melalui saluran-
saluran komunikasi.
3. Availability : Kategori keamanan data yang bisa mepertahankan sumber
informasi agar selalu sedia dan aktif melayani pengguna.