bab ii rancangan aplikasi - bina sarana informatikabab ii rancangan aplikasi 2.1. rancangan database...

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


berikut:

Gambar II.3

Tabel Ms_Class

3. Tabel MS_Lesson

Tabel ini digunakan untuk menampung data master pelajaran , dan


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"> 

<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>





<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





<div class="spacer"></div>




<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">





<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


href="javascript:void(0);"><i class="list-icon feather feather-

edit"></i> <span class="hide-menu">Ujian</span></a>


<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>


href="javascript:void(0);"><i class="list-icon feather feather-file-

text"></i> <span class="hide-menu">Laporan</span></a>


<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>



</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


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>



<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') ?>"

23

<link href="<?= base_url('assets/switchery/switchery.min.css')


<link href="<?= base_url('assets/mediaelement/mmp.min.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>


.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">



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



<div class="content-wrapper">



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



<main class="main-wrapper clearfix"

style="padding:10px">

<?php $this->load->view($content); ?>

</main>

</div>



<footer class="footer"><span class="heading-font-

family">Copyright @ <?= date('Y') ?>. BraderPedia</span>

</footer>

</div> 



<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>


$("#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



<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>



<div class="page-title-right d-inline-flex">

<ol class="breadcrumb">

<li class="breadcrumb-item active">Dashboard</li>

</ol>

</div>

</div>

<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>

</div>

</div>

</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 name="viewport" content="width=device-width,initial-

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

<title>Login </title>



<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="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>

</head>

<body class="body-bg-full profile-page">


$(function(){

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>


<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>



</div>



</div>



</div>



</div>






?>"></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


class Auth extends CI_Controller {



$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');

}

}

}


$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->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() {



$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->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');


}

} 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


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




<h6 class="page-title-heading mr-0 mr-r-5">Dashboard</h6>


block"></p>

</div>




<li class="breadcrumb-item active">Dashboard</li>

</ol>

</div>

38



.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>


bottom:80px">




<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="boxDash blue">

<i class="feather feather-edit"></i> <?=

$totalAssignment ?> Ujian Tersedia

</div>

</div>


<div class="boxDash red">

39

<i class="feather feather-users"></i> <?= $totalStudent

?> Siswa/i

</div>

</div>


<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>

</div>

</div>

</div>

</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


class MainPage extends MY_Controller {

40


$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_) {


>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 ';


}

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 ';


}

Selanjutnya tambahkan skrip users.php berikut :

Skrip users.php




<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>


block"></p>

</div>




<li class="breadcrumb-item"><a href="<?= site_url()

?>">Dashboard</a></li>

<li class="breadcrumb-item active">Pengguna</li>

</ol>

</div>



bottom:80px">




<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>



<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>



<div class="modal modal-primary fade" id="edit<?= $row

?>">






<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 ?>">


<label>Username</label>

<input type="text" class="form-control"

name="username" placeholder="Username" required value="<?= $value-

>username ?>">

</div>


<label>Password</label>

<input type="password" class="form-

control" name="password" placeholder="Boleh dikosongkan">

</div>


<label>Nama Lengkap</label>

45


name="full_name" placeholder="Nama Lengkap" required value="<?=

$value->full_name ?>">

</div>


<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>


<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>



</div>



</div>

</div>



<div class="modal modal-info fade" id="add">

46




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

hidden="true">×</button>

<h4 class="modal-title">Tambah Pengguna</h4>

</div>


<form action="<?= site_url('MasterCtrl/users') ?>"

method="POST">


<label>Username</label>

<input type="text" class="form-control" name="username"

placeholder="Username" required>

</div>



<input type="password" class="form-control"

name="password" placeholder="Password" required>

</div>




name="full_name" placeholder="Nama Lengkap" required>

</div>


<label>Level</label>

<select class="form-control" name="level">

<option value="admin">admin</option>

<option value="staff">staff</option>

</select>

</div>

</div>


<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


class MasterCtrl extends MY_Controller {


redirect('page');

}

public function users($id_admin = NULL) {



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-


lain','error');


}

$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');

}


49

}

public function lessons($id_lesson = NULL) {



if ($this->input->post('id_lesson')) {

$this->master->updateLesson($data);

$this->message('Selamat!','Data pelajaran


} else {

$data['lesson_created'] = date('Y-m-d');

$this->master->insertLesson($data);



}

} elseif($id_lesson) {

$data = [

'id_lesson' => $id_lesson,

'lesson_hide' => 1

];


$this->message('Selamat!','Data pelajaran berhasil


}

redirect('page/lessons');

}

public function classes($id_class = NULL) {



if ($this->input->post('id_class')) {

$this->master->updateClass($data);

$this->message('Selamat!','Data kelas


} else {

$data['class_created'] = date('Y-m-d');

$this->master->insertClass($data);

50



}

} elseif($id_class) {

$data = [

'id_class' => $id_class,

'class_hide' => 1

];


$this->message('Selamat!','Data kelas berhasil


}

redirect('page/classes');

}

public function teachers($id_teacher = NULL) {



$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);



}


}

public function teacher_update() {



$teacherUsername = $this->preg($this->input-

>post('teacher_username'));

$teacher = $this->master-

>getTeacherByUsername($teacherUsername);

if ($data) {

if ($data['id_teacher'] != $teacher-

>id_teacher) {

$this-


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')) :




else :


$data['teacher_photo'] = str_replace(' ', '_',




53

$this-

>compreesImage('teachers',$dataUpload['file_name'],$resolution);

endif;

}


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 //


>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;


>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 //


>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


>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);

}

}


diubah','success');

}


}

public function students($id_student = NULL) {



// CHECK NIS //

if ($this->input->post('id_student')) {

$dataStudent = $this->master-


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')) :



redirect('page/students');

else :


$data['student_photo'] = str_replace(' ', '_',




$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

}


$this->master->updateStudent($data);

$this->message('Selamat!','Data siswa


} else {

$data['student_created'] = date('Y-m-d');

$this->master->insertStudent($data);



}

} elseif($id_student) {

$data = [

'id_student' => $id_student,

'student_hide' => 1

];


$this->message('Selamat!','Data siswa berhasil

diubah','success');

}


}

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


>getAssignmentByLesson($id_lesson) as $r => $v) {


>getClassByAssignment($v->id_assignment) as $_r => $_v) {

if ($this->session->userdata('level') ==

'guru') {

$valPush = false;


>getClassByTeacher($this->session->userdata('id_')) as $__r => $__v) {

if ($__v->id_class == $_v-

>id_class) {

$valPush = true;

}

}

if ($valPush) {

array_push($assignmentClass, $_v);

}

} else {


}

}

}

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


class MasterModel extends CI_Model {

// USERS //

public function getAllUser() {

$this->db->order_by('full_name', 'asc');


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);

}


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');


return $this->db->get('ms_teacher')->result_object();

}

public function getTeacherById($id_teacher) {

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



}

public function getTeacherByUsername($teacher_username) {

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



}

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) {


62


return $this->db->delete('teacher_class');

}

public function deleteLessonByTeacher($id_teacher,$id_lesson) {


$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 =


return $this->db->get('ms_student')->result_object();

}

public function getStudentById($id_student) {

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



}

public function getStudentByClass($id_class) {

$this->db->where('ms_student.id_class', $id_class);

$this->db->where('ms_student.student_hide', 0);




}

public function getStudentByNis($student_nis) {

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



}

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');


LEFT(presence_log,7) = '$month'";


}

public function getAbsenWithCondition($date,$type) {


LEFT(presence_log,10) = '$date' AND presence_type = '$type'";


}

public function

getAbsenWithFilteringDashboard($student_nis,$from,$until) {


LEFT(presence_log,10) = '$date' AND presence_type = '$type'";

return $this->db->query($query)->row_object();

}

public function

getAbsenWithConditionAndNis($date,$type,$student_nis) {


LEFT(presence_log,10) = '$date' AND presence_type = '$type' AND nis =

'$student_nis'";

// return $query;


}

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') {


>getAllStudent($class);

66

} else {

$dataStudent = [];


>session->userdata('id_')) as $row => $value) {


>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 ';


Skrip students.php




<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>


block"></p>

</div>



67




<li class="breadcrumb-item active">Data Siswa</li>

</ol>

</div>



bottom:80px">




<div class="row">


<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>



<?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-


<thead>

<tr>

<th style="width:5%">#</th>

<th>Nama</th>

<th>NIS</th>

<th>Kelas</th>

<th>Telepon</th>

<th>Dibuat</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>



</td>

</tr>


<div class="modal modal-danger fade" id="delete<?=

$row ?>">








</div>

<div class="modal-footer"


<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>


</div>


</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


$(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>




<a href="#save" data-toggle="modal" class="btn btn-info btn-sm"><i

class="feather feather-check-square"></i> Simpan</a>


block"></p>

</div>






<li class="breadcrumb-item"><a href="<?=

site_url('page/students') ?>">Data Siswa</a></li>

<li class="breadcrumb-item active">Tambah Siswa</li>

</ol>

</div>



bottom:80px">


72



<form action="<?= site_url('MasterCtrl/students') ?>"

method="POST" enctype="multipart/form-data">

<div class="row">

<div class="col-md-6">




name="student_name" placeholder="Nama Lengkap" required>

</div>


<label>NIS</label>


name="student_nis" placeholder="NIS" required>

</div>




name="student_password" placeholder="Password" required>

</div>

<div class="row">



<label>Email</label>

<input type="email" class="form-control"

name="student_email" placeholder="[email protected]">

</div>

</div>



<label>Nomor Telepon</label>

<input type="number" class="form-control"

name="student_phone" placeholder="Nomor Telepon">

</div>

</div>

</div>

73


<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>



<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>



<div class="modal modal-info fade" id="save">

<div class="modal-dialog">





<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>

</form>

74

</div>


</div>


</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


$(function(){

$("#student_photo").on("change", function() {





75





of div



"center center"});

}

}

});

});

</script>





class="feather feather-check-square"></i> Simpan</a>


block"></p>

</div>







site_url('page/students') ?>">Data Siswa</a></li>

<li class="breadcrumb-item active">Ubah Siswa</li>

</ol>

</div>



bottom:80px">


76



<form action="<?= site_url('MasterCtrl/students') ?>"


<input type="hidden" name="id_student" value="<?=

$dataStudent->id_student ?>">

<div class="row">





name="student_name" placeholder="Nama Lengkap" required

value="<?= $dataStudent->student_name ?>">

</div>


<label>NIS</label>


name="student_nis" placeholder="NIS" required value="<?=

$dataStudent->student_nis ?>">

</div>




name="student_password" placeholder="Boleh dikosongkan">

</div>

<div class="row">



<label>Email</label>

<input type="email" class="form-control"

name="student_email" placeholder="[email protected]" value="<?=

$dataStudent->student_email ?>">

</div>

</div>



<label>Nomor Telepon</label>

77


name="student_phone" placeholder="Nomor Telepon" value="<?=

$dataStudent->student_phone ?>">

</div>

</div>

</div>



<select class="form-control" name="id_class">


<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>



<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>

78

<h4 class="modal-title">Apa anda sudah yakin


</div>


<button type="submit" class="btn btn-outline-info

btn-block">Ya, Simpan dan lanjutkan!</button>

</div>

</div>

</div>

</div>

</form>

</div>


</div>


</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) {



// CHECK 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')) :




else :


$data['student_photo'] = str_replace(' ', '_',




$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']);

}





} else {

$data['student_created'] = date('Y-m-d');

$this->master->insertStudent($data);



}

} elseif($id_student) {

$data = [

'id_student' => $id_student,

'student_hide' => 1

];


$this->message('Selamat!','Data siswa berhasil

diubah','success');

}


}

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);




}

81

public function getStudentById($id_student) {

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



}

public function getStudentByClass($id_class) {

$this->db->where('ms_student.id_class', $id_class);

$this->db->where('ms_student.student_hide', 0);




}

public function getStudentByNis($student_nis) {

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



}

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 ';


}

Skrip lessons.php




<h6 class="page-title-heading mr-0 mr-r-5">Data Pelajaran <a




block"></p>

</div>






<li class="breadcrumb-item active">Pelajaran</li>

</ol>

</div>



bottom:80px">






<thead>

<tr>


<th>Nama Pelajaran</th>

<th>Dibuat</th>

83


</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>





</td>

</tr>



?>">








</div>


<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>

84


?>">






<h4 class="modal-title">Ubah Pelajaran</h4>

</div>


<form action="<?= site_url('MasterCtrl/lessons')

?>" method="POST">

<input type="hidden" name="id_lesson"

value="<?= $value->id_lesson ?>">


<label>Nama Pelajaran</label>


name="lesson_name" placeholder="Nama Pelajaran" required value="<?=

$value->lesson_name ?>">

</div>

</div>




Simpan!</button>

</div>

</form>

</div>

</div>

</div>

<?php endforeach ?>

</tbody>

</table>

</div>


</div>

85


</div>

</div>









<h4 class="modal-title">Tambah Pelajaran</h4>

</div>


<form action="<?= site_url('MasterCtrl/lessons') ?>"

method="POST">




name="lesson_name" placeholder="Nama Pelajaran" required>

</div>

</div>





</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('id_lesson')) {




} else {

$data['lesson_created'] = date('Y-m-d');

$this->master->insertLesson($data);



}

} elseif($id_lesson) {

$data = [

'id_lesson' => $id_lesson,

'lesson_hide' => 1

];


$this->message('Selamat!','Data pelajaran berhasil


}

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 ';


}

Setelah itu buat file dengan nama classes.php di folder

views/content/master/ dan masukan skrip berikut:

88




<h6 class="page-title-heading mr-0 mr-r-5">Data Kelas <a




block"></p>

</div>






<li class="breadcrumb-item active">Kelas</li>

</ol>

</div>



bottom:80px">




<table class="table table-striped table-responsive"

data-toggle="datatables">

<thead>

<tr>


<th>Nama Kelas</th>

<th>Dibuat</th>


</tr>

</thead>

<tbody>


<tr>

<td><?= $row + 1 ?></td>

89

<td><?= $value->class_name ?></td>

<td><?= $value->class_created ?></td>

<td>





</td>

</tr>



?>">








</div>


<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>




?>">

90

<h4 class="modal-title">Ubah Kelas</h4>

</div>


<form action="<?= site_url('MasterCtrl/classes')

?>" method="POST">

<input type="hidden" name="id_class"

value="<?= $value->id_class ?>">


<label>Nama Kelas</label>


name="class_name" placeholder="Nama Kelas" required value="<?=

$value->class_name ?>">

</div>

</div>




Simpan!</button>

</div>

</form>

</div>

</div>

</div>

<?php endforeach ?>

</tbody>

</table>

</div>


</div>


</div>

</div>

91




<h4 class="modal-title">Tambah Kelas</h4>

</div>


<form action="<?= site_url('MasterCtrl/classes') ?>"

method="POST">


<label>Nama Kelas</label>


name="class_name" placeholder="Nama Kelas" required>

</div>

</div>





</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('id_class')) {




} else {

92

$data['class_created'] = date('Y-m-d');

$this->master->insertClass($data);



}

} elseif($id_class) {

$data = [

'id_class' => $id_class,

'class_hide' => 1

];


$this->message('Selamat!','Data kelas berhasil


}

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) {


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 ';


}

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


.switchery {

}

.switchery-small {

}

</style>




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>


block"></p>

</div>






<li class="breadcrumb-item active">List Ujian</li>

</ol>

</div>



bottom:80px">






<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>


</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>



?>">








</div>


<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>


</div>


</div>

</div>


$(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',


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 {




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);




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


class AssignmentCtrl extends MY_Controller {


redirect('page/assignments');

}

public function create() {

if (!$this->input->post()) {

redirect('page/create');

}


unset($data['show_report']);

unset($data['show_analytic']);


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()) {


}


unset($data['show_report']);

unset($data['show_analytic']);


if ($this->input->post('show_analytic')) {


} else {


}

if ($this->input->post('show_report')) {


} else {


}

$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;


>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')) :





else :


$dataQuestion['question_image'] = str_replace(' ', '_',




$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-


if(!$this->upload->do_upload('question_sound')) :





else :


$dataQuestion['question_sound'] = str_replace(' ', '_',


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-




else :


$answer['option_image'] = str_replace(' ', '_',






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');



}

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-


if(!$this->upload->do_upload('question_image')) :





else :


$dataQuestion['question_image'] = str_replace(' ', '_',






endif;

} // IMAGE QUESTION //

// SOUND QUESTION //

if ($_FILES['question_sound']['name']) {

$this->soundConf('assignments/'.$this->input-


if(!$this->upload->do_upload('question_sound')) :





else :


107

$dataQuestion['question_sound'] = str_replace(' ', '_',


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-




else :


$answer['option_image'] = str_replace(' ', '_',




108



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');



}

public function removeQuestion($id_question = NULL,

$id_assignment = NULL) {

if (!$id_question OR !$id_assignment) {


}

$dataQuestion = $this->assignment-

>getQuestionById($id_question);


>getAssignmentById($id_assignment);

if (!$dataQuestion OR !$dataAssignment) {


}

$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) {


}



if (!$dataAssignment) {


}

$data = [


'assignment_hide' => 1

];


$this->message('Sukses!','Data ujian berhasil dihapus

:)','success');


}

// AJAX //

public function changeStatusAssignment($id_assignment,$status)

{

if ($status == 2) {

$status = 0;

}

$data = [


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 {


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


}

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) {



}





}


112

$this->parseData['content'] =

'content/assignment/create_question';

$this->parseData['title'] = 'Buat Soal ';


}

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


$(function(){

$("#question_image").on("change", function() {









of div



"center center"});

}

}

});

});

</script>

<form action="<?= site_url('AssignmentCtrl/create_question') ?>"


<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 ?>">





<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>


class="feather feather-check-square"></i> Simpan!</a>

</div>







site_url('page/assignments') ?>">List Ujian</a></li>


site_url('page/list_question/'.$dataAssignment->id_assignment) ?>">List

Soal</a></li>

<li class="breadcrumb-item active">Tambah Soal</li>

</ol>

</div>



bottom:80px">

114

<legend>Pertanyaan <a href="#"

onclick="hideShowQuest()"><i id="iconQuest" class="feather feather-

chevron-down"></i></a></legend>


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>


#question_ {

margin-bottom: 10px;

width: 100%;

min-height: 100px;

}

.line {

border-bottom: 1px solid #E9E9E9;

width: 100%;

min-height: 1px;

margin: 10px 0px;

}

</style>



<div id="question_">

<textarea data-toggle="tinymce" name="question_" data-

plugin-options='{ "height": 300 }'></textarea>

115

<br />

<div class="row">


<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>


<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>

</div>



<div class="line"></div>



<div class="row">


<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>


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>


.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">


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++) : ?>


$(function(){

var c = '<?= $i ?>';

$("#option_image"+c).on("change", function() {



$("#imagePreview"+c).css("background",

"transparent");



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">


118

<div id="chooseAnswer<?= $i ?>"

class="chooseAnswer" onclick="chooseAnswer('<?= $i ?>')"><?php

include "numberToChar.php"; ?></div>

</div>


<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>

<br />



<div class="modal modal-primary fade"

id="answerImage<?= $i ?>">



<div class="modal-header">



<h4 class="modal-title text-inverse">Unggah

Gambar (max. 2mb)</h4>

</div>



<input type="file" name="option_image<?= $i

?>" id="option_image<?= $i ?>" class="form-control">

<div id="imagePreview<?= $i ?>"

class="imagePreview"></div>

</div>

</div>


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

primary btn-block" data-dismiss="modal">Simpan!</button>

</div>

</div>

119

</div>

</div>

<?php endfor; ?>


function cloneAnswer() {

// TOTAL ANSWER //

var totalAnswer = $("#totalAnswer").val();

totalAnswer++;

$("#totalAnswer").val(totalAnswer);

// JSON ANSWER //

var newInit = { row : totalAnswer };

JSONanswer.push(newInit);


// 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() {



$("#imagePreview"+totalAnswer).css("background", "transparent");

121



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" :


"center center"});

}

}

});

tinymce.EditorManager.execCommand('mceAddEditor',true,

"textareaBlank"+totalAnswer);

// END VALIDATION IMAGE //

}

</script>



<div id="appendAnswer"></div>



</div>


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);


recount();

};

}

function recount() {

var x = 1;

$.each($(".forAlph"),function(){

$(this).text(alphabet(x));

x++;

});

}

</script>



</div>

</div>

</div>

</div>



<div class="modal modal-primary fade" id="imageQuestion">

123

<h4 class="modal-title text-inverse">Unggah Gambar (max.

2mb)</h4>

</div>



<input type="file" name="question_image"

id="question_image" class="form-control">

<div id="imagePreview" class="imagePreview"></div>

</div>

</div>


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

block" data-dismiss="modal">Simpan!</button>

</div>

</div>

</div>

</div>



<div class="modal modal-success fade" id="soundQuestion">






<h4 class="modal-title text-inverse">Unggah Suara (max. 2mb,

.mp3)</h4>

</div>



<input type="file" name="question_sound" class="form-

control">

</div>

</div>


<button type="button" class="btn btn-outline-success btn-block"

data-dismiss="modal">Simpan!</button>

</div>

124

</div>

</div>

</div>









<h4 class="modal-title text-inverse">Apa sudah anda yakin


</div>


<button type="submit" class="btn btn-outline-info btn-

block">Ya, Simpan dan lanjutkan!</button>

</div>

</div>

</div>

</div>

</form>


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) {


}

$dataQuestion = $this->assignment-

>getQuestionById($id_question);



if (!$dataQuestion OR !$dataAssignment) {


}

$dataQuestion->options = $this->assignment-

>getOptionByQuestion($id_question);

$this->parseData['dataQuestion'] = $dataQuestion;


$this->parseData['bank'] = $bank;


'content/assignment/detail_question';

$this->parseData['title'] = 'Rincial Soal ';


}

Langkah selanjutnya membuat file dengan nama detail_question.php pada

folder views/content/assignment/detail_question/, lalu masukan skrip

berikut :

Skrip detail_question




<h6 class="page-title-heading mr-0 mr-r-5">Rincial Soal</h6>

128


block"></p>

</div>






<?php if ($bank): ?>

<li class="breadcrumb-item"><a href="<?= site_url('page/bank')

?>">Bank Soal</a></li>

<?php else: ?>




site_url('page/list_question/'.$dataAssignment->id_assignment) ?>">List

Soal</a></li>

<?php endif ?>

<li class="breadcrumb-item active">Rincial Soal</li>

</ol>

</div>



.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>


bottom:80px">




<legend>Pertanyaan</legend>

<div class="question_">

<div class="row">

<?php if ($dataQuestion->question_image != ''): ?>


<?php else: ?>


<?php endif; ?>

<?= $dataQuestion->question_ ?>


<?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">






<h4 class="modal-title text-

inverse">Mainkan Suara</h4>

</div>


<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 != ''): ?>


<a data-fancybox="gallery" href="<?=


>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>

</div>

<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">


<center><?php $i = $row; include

"numberToChar.php"; ?></center>

</div>


<div class="row">

<?php if ($value->option_image != ''): ?>


<?php else : ?>

131


<?php endif; ?>

<?php if ($value->option_true == 1): ?>

<div class="alert alert-success"


Jawaban Benar

</div>

<?php endif ?>

<?= $value->option_ ?>

</div>

<?php if ($value->option_image != ''): ?>


<a data-fancybox="gallery" href="<?=


>assignment_path.'/'.$value->option_image) ?>"><img src="<?=


>assignment_path.'/'.$value->option_image) ?>" class="img-

thumbnail"></a>

</div>

<?php endif ?>

</div>

</div>

</div>

<?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) {



}





}

$dataAssignment->questions = $this->assignment-

>getQuestionByAssignment($id_assignment);

foreach ($dataAssignment->questions as $row => $value) {

$dataAssignment->questions[$row]->totalAnswer =

count($this->assignment->getOptionByQuestion($value->id_question));

}



'content/assignment/list_question';

$this->parseData['title'] = 'List Soal ';


}

Tahap selanjutnya kita buat file bernama list_question.php di dalam folder

views/content/assignment/ dan masukan skrip berikut :

Skrip list_question.php



<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>


block"></p>

</div>








<li class="breadcrumb-item active">List Soal</li>

</ol>

</div>



bottom:80px">




<a href="<?= site_url('page/reuse_question/'.$dataAssignment-

>id_assignment) ?>" class="btn btn-primary"><i class="feather feather-

file"></i> Gunakan Soal Lain</a>



<thead>

<tr>


<th>Pertanyaan</th>

<th style="width:10%">Total</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>



</td>

</tr>


<div class="modal modal-danger fade" id="delete<?=

$row ?>">






<h4 class="modal-title text-inverse">Anda

yakin ingin menhapus soal ini ?</h4>

</div>


<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>

</div>

</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


class ExamCtrl extends CI_Controller {



$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();


}

}

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' => ''

];



// $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;


>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>



<title><?= $title ?></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-

8">


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

scale=1">







<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') ?>"


<link

href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.1.3/mediaele

mentplayer.min.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>




.myContainer {

width: 100%;

margin-top: 80px;

background-color: #F3EEEE;

min-height: 400px;

padding: 10px 50px;

}

</style>

</head>

<body class="x-dashboard">


// $(function(){

// setTimeout(function(){

// $("#messageTimeout").hide(200);

// },4000);

// });

</script>




$(function(){

140




if (title) {

swal({

title: title,

text: text,

type: type,

button: true,

});

};

});

</script>



<div class="page-container">



<div class="page-content" style="background:#F3EEEE;">



<div class="page-content-wrap">



<?php $this->load->view($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>

141

</div>



</div>





<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>




?>/js\plugins\jquery\jquery-ui.min.js"></script>


?>/js\plugins\bootstrap\bootstrap.min.js"></script>


?>/js\plugins\datatables\jquery.dataTables.min.js"></script>

142


?>/js\plugins.js"></script>


?>/js\actions.js"></script>


?>"></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">



<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






<li class="sidebar-toggle"><a href="javascript:void(0)"

class="ripple"><i class="feather feather-menu list-icon fs-20"></i></a>

</li>

</ul>





<div class="spacer"></div>




<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


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>



<div class="modal fade" id="question<?= $row ?>">

<div class="modal-dialog" style="width:30%">



<button type="button"

class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4 class="modal-

title">Anda sudah siap ingin melaksanakan ujian ?</h4>

</div>


<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 name="viewport" content="width=device-width, initial-

scale=1">



<link rel="stylesheet" type="text/css" id="theme" href="<?=

base_url('exam-assets/css/theme-default.css') ?>">


?>"></script>



</head>

<body>


$(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-


<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="input-group-addon">

<span class="fa fa-user"></span>

</div>


placeholder="NIS" name="student_nis" required>

</div>

</div>

</div>




<div class="input-group-addon">

<span class="fa fa-lock"></span>

</div>


placeholder="Password" required name="student_password">

</div>

</div>

</div>


148


<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() {



$student = $this->auth-


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');


} else {

$this->message('Oooppss','NIS dan

password tidak sesuai, silahkan coba lagi','danger');


}

} else {

$this->message('Oooppss','NIS tidak

terdaftar, silahkan coba lagi','danger');


}

} 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');


}

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) {


151


}





} else {

$red = true;


>getClassByAssignment($id_assignment) as $r => $v) {

if ($v->id_class == $this->session-

>userdata('globalStudent')->id_class) {

$red = false;

}

}

if ($red) {


}

}

$long = 0;

$begin = [


'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" />


.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 {



color: white;

}

.btn-own:visited {



color: white;

}

.line {

border-bottom: 1px solid black;

width: 100%;

min-height: 2px;

margin:10px 0px;

}

</style>


$(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

});


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-heading" style="background-color:#13C3E3">

<div class="row">


<h3 class="panel-title" style="color:white">

<i class="fa fa-edit"></i> Ujian :

<?= $dataAssignment->assignment_type.' - '.$dataAssignment-

>lesson_name ?>

</h3>

</div>


<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>

</div>


<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>



<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 ?>">


$(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 == ''): ?>


<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 ?>">



157




<h4 class="modal-title">Dengarkan baik baik</h4>

</div>


<audio style="width:100%" src="<?=


>assignment_path.'/'.$value->question_sound) ?>"></audio>

</div>

</div>

</div>

</div>

<br /><br />

<?php endif ?>




<?php include('optionList.php') ?>



</div>

<?php else: ?>


<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 ?>">

158





<h4 class="modal-title">Dengarkan file suara untuk menjawab

pertanyaan</h4>

</div>


<audio style="width:100%" src="<?=


>assignment_path.'/'.$value->question_sound) ?>"></audio>

</div>

</div>

</div>

</div>

<br /><br />

<?php endif ?>




<?php

include('optionList.php') ?>



</div>


<a data-fancybox="gallery"

href="<?= base_url('assets/images/assignments/'.$dataAssignment-

>assignment_path.'/'.$value->question_image) ?>"><img src="<?=


>assignment_path.'/'.$value->question_image) ?>" class="img-

thumbnail"></a>

159

</div>

<?php endif ?>

</div>

<?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>



<div class="modal fade" id="finish">

<div class="modal-dialog " style="width:35%">



<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>


<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>

160

</form>

</div>

</div>




$(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)) {


$("#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) {


$("#prev").hide();

$("#next").show();

} else {


};

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();


} else if(parseInt(rows) === 0) {


$("#prev").hide();

$("#next").show();

} else {


$("#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 :


$(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():

http://hilios.github.io/jQuery.countdown/

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 :



<?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


}

}

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");

?>


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>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['content'] = 'content/report/result';

$this->parseData['title'] = 'Laporan Hasil Ujian ';


}

Selanjutnya, buat file bernama result.php pada folder views/content/report,

lalu masukan skrip berikut:

Skrip result.php




<h6 class="page-title-heading mr-0 mr-r-5">Hasil Ujian</h6>


block"></p>

</div>






<li class="breadcrumb-item active">Hasil Ujian</li>

</ol>

</div>



bottom:0px">




<form action="<?= site_url('page/results') ?>"

method="POST">

<div class="row">




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>




<select class="form-control" name="id_class"

id="id_class" readonly></select>

</div>

</div>



<label>Tipe Ujian</label>

<select class="form-control" name="assignment_type"

id="assignment_type" readonly></select>

</div>

</div>



<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>

</form>

</div>

</div>

</div>

169

</div>

Lalu sisipkan skrip berikut pada halaman result.php untuk pemanggilan

ajax karena ajax berperan untuk mencari hasil ujian :


function find(value) {

$("#buttonSubmit").html('Sedang mencari...');

$("#buttonSubmit").prop('disabled',true);

$.ajax({

url : '<?=

site_url("MasterCtrl/findTypeAndClassForReport/'+value+'") ?>',

type : 'GET',


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 //


$("#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 = [];


>getAssignmentByLesson($id_lesson) as $r => $v) {


>getClassByAssignment($v->id_assignment) as $_r => $_v) {

if ($this->session->userdata('level') ==

'guru') {

$valPush = false;


>getClassByTeacher($this->session->userdata('id_')) as $__r => $__v) {

171

if ($__v->id_class == $_v-

>id_class) {

$valPush = true;

}

}

if ($valPush) {


}

} else {


}

}

}

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 :



$forAssignment = [];


>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 //


$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() {




>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'));


$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['content'] = 'content/report/analytics';

$this->parseData['title'] = 'Laporan Analysis Ujian ';


}

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.

bab ii rancangan aplikasi - bina sarana informatikabab ii rancangan aplikasi 2.1. rancangan database...

Documents