Halaman Admin - Implementasi Program

BAB IV HASIL DAN PEMBAHASAN

4.1 Implementasi Program

4.1.5 Halaman Admin

Halaman ini khusus dipakai admin dalam mengelola data – data dan semua file siswa, pengajar, e-book, galeri, berita, lowongan kerja dan video. Halaman admin terbagi menjadi : Dashboard, Forms, Data Tables, File Manager, Comments, dan Help dimana terdapat beberapa fungsi lagi didalamnya.

Gambar 4.25 Implementasi Form Add New Regular Student berhasil disimpan

Source code halaman implementasi Form Add New Regular Student berhasil

if ($act=='student' AND $do=='submit'){

$nama_depan = ucwords(uninjection($_POST['nama_depan'])); $nama_belakang = ucwords(uninjection($_POST['nama_belakang'])); $tempat_lahir = ucwords(uninjection($_POST['tempat_lahir'])); $alamat = ucwords($_POST['alamat']); $email = strtolower(uninjection($_POST['email'])); $prestasi = ucwords($_POST['prestasi']); date_default_timezone_set("Asia/Jakarta");

$tgl_daftar = gmdate("Y-m-d H:i:s", time()+60*60*7); $waktu = gmdate("H:i:s", time()+60*60*7);

$insert = mysql_query("INSERT INTO

formulir_pendaftaran(nama_depan,nama_belakang,jenis_kelamin,agama, tempat_lahir,tanggal_lahir,alamat,programstudi_pilihan,sekolah,no_ telp,email,prestasi,tgl_daftar,waktu) VALUES ('$nama_depan','$nama_belakang','$_POST[jenis_kelamin]','$_POST[ag ama]','$tempat_lahir','$_POST[tanggal_lahir]','$alamat','$_POST[pr ogramstudi_pilihan]','$_POST[sekolah]','$_POST[no_telp]','$email', '$prestasi','$tgl_daftar','$waktu')") or die("Oops, can't update. Perharps there's fault on sending data");

echo "Data has been saved"; }

Gambar diatas merupakan proses penambahan data siswa reguler yang ada didalam menu “Forms” pada dashboard admin. Tiap field harus diisi dan tidak boleh dikosongkan, apabila dikosongkan maka notifikasi error akan tampil di bawah field yang kosong tersebut.

Data didalamnya antara lain :

1. First Name, yaitu mengisi data nama depan siswa yang ingin mendaftar sebagai siswa reguler di Student Center Course. Diisi dengan karakter minimal 3 karakter.

2. Last Name, yaitu mengisi data nama belakang siswa yang ingin mendaftar sebagai siswa reguler di Student Center Course. Diisi dengan minimal 3 karakter. 3. Gender, yaitu mengisi data jenis kelamin siswa dengan metode option radio button. Jika tidak diisi maka akan menampilkan tulisan warna merah.

4. Religion, yaitu mengisi data agama siswa yang pilihannya berupa combo box. Jika tidak diisi maka akan menampilkan tulisan warna merah.

5. Place of Birth, yaitu mengisi data tempat lahir siswa yang ingin mendaftar sebagai siswa reguler di Student Center Course.

Jenis Kelamin, yaitu mengisi data jenis kelamin siswa dengan metode option radio button. Jika tidak diisi maka akan menampilkan tulisan warna merah.

6. Date of Birth, yaitu mengisi data tanggal lahir siswa dengan format otomatis tanggal pada sistem informasi Student Center Course. Jika kosong akan tampil notifikasi “Tempat lahir tidak boleh kosong”.

7. Address, yaitu mengisi data alamat lengkap siswa. Field akan berubah warna merah jika tidak diisi.

8. Field of Study, yaitu siswa memilih bidang studi yang ingin dipelajari didalam kelas reguler Student Center Course. Pilihan bidang studi didalam field berupa combo box. Jika tidak diisi akan menampilkan tulisan warna merah.

9. Origin School, yaitu mengisi data asal sekolah siswa. Field akan berubah warna merah jika dikosongkan atau tidak diisi.

10. Phone, yaitu mengisi data nomor telepon rumah siswa atau nomor handphone siswa atau orang tua siswa. Jika tidak diisi maka akan menampilkan notifikasi “No.Telepon wajib diisi”.

101

11. E-mail, yaitu mengisi data e-mail siswa atau e-mail orang tua siswa. Jika dikosongi, maka akan tampil notifikasi “Email tidak boleh kosong”.

12. Achievement, yaitu mengisi data prestasi apa saja yang pernah didapatkan siswa baik prestasi akademis maupun non-akademis. Jika tidak diisi tidak ada notifikasi error.

Pada proses pengisian form registrasi kelas reguler tersebut, merupakan proses black box atau biasa disebut error notifikasi (pesan kesalahan) dalam pengisian data.

Gambar 4.26 Implementasi Form Add New Regular Student yang error

Source code halaman implementasi Form Add New Regular Student yang error adalah sebagai berikut :

jQuery.noConflict(); jQuery(function($) {

$('#rootwizard').bootstrapWizard({ 'nextSelector': '.next-button',

'previousSelector': '.previous-button',

onTabClick: function (tab, navigation, index) { return false;

onNext: function(tab, navigation, index) { var total = navigation.find('li').length; var current = index + 1;

if (current == 1) { $('#rootwizard').find('.previous-button').hide(); } else { $('#rootwizard').find('.previous-button').show(); } if (current >= total) { $('#rootwizard').find('.next-button').hide(); $('#rootwizard').find('.submit-button').show(); } else { $('#rootwizard').find('.next-button').show(); $('#rootwizard').find('.submit-button').hide(); } },

onPrevious: function (tab, navigation, index) { var total = navigation.find('li').length; var current = index + 1;

103 $('#rootwizard').find('.previous-button').hide(); } else { $('#rootwizard').find('.previous-button').show(); } if (current >= total) { $('#rootwizard').find('.next-button').hide(); $('#rootwizard').find('.submit-button').show(); } else { $('#rootwizard').find('.next-button').show(); $('#rootwizard').find('.submit-button').hide(); } },

onTabShow: function(tab, navigation, index) { console.log('onTabShow');

var $total = navigation.find('li').length; var $current = index+1;

var $percent = ($current/$total) * 100; $('#rootwizard').find('.bar').animate({ 'width': $percent+'%' }); } }); $('#rootwizard').find('.previous-button').hide(); $('#rootwizard').find('.submit-button').hide(); var $validator = $("#rootwizard_form").validate({

rules: { nama_depan: { required: true, minlength: 3, maxlength: 10 },

nama_belakang: { required: true, minlength: 3, maxlength: 30 }, jenis_kelamin: "required", agama: "required", tempat_lahir: "required", tanggal_lahir: "required", alamat: "required", programstudi_pilihan: "required", sekolah: "required", no_telp: { required: true, number: true, minlength: 6, maxlength: 12 }, email: { required: true, email: true, remote: "aksi.php?data=email" }, }, messages: { nama_depan: {

required: "Please Enter First Name",

minlength: "First Name minimal 3 characters", maxlength: "First Name must be at least 10 characters long"

105

required: "Please Enter Last Name",

minlength: "Last Name minimal 3 characters", maxlength: "Last Name must be at least 30 characters long"

jenis_kelamin: " ",

agama: "Please select one",

tempat_lahir: "Please Enter Place of birth", tanggal_lahir: "Please Enter Date of Birth", alamat: "Please Enter your address",

programstudi_pilihan: "Please select one", sekolah: "Please Enter Origin School", no_telp: {

required: "Please Enter Phone Number", minlength: "Phone number minimal 6 digit", maxlength: "Phone number must be at less 13 characters long"

email: {

required: "Please Enter Email Address", remote: "Email address already exist" }, }, highlight: function(element) { $(element).closest('.form_row').removeClass('success').addCl ass('error'); }, success: function(element) { element.text('').addClass('valid').closest('.form_row').remo veClass('error').addClass('success'); }, submitHandler: function(form) { // do other stuff for a valid

form$.post('aksi.php?act=student&do=submit',

$("#rootwizard_form").serialize(), function(data) {

$('#results').fadeOut(3000).html(data); $('#rootwizard_form').each(function(){ this.reset(); }); }); return false; } }); $('#rootwizard2').bootstrapWizard({ 'nextSelector': '.next-button', 'previousSelector': '.previous-button',

onTabClick: function (tab, navigation, index) { return false;

onNext: function(tab, navigation, index) { var $valid = $("#rootwizard_form").valid(); if(!$valid) {

$validator.focusInvalid(); return false; }

var total = navigation.find('li').length; var current = index + 1;

if (current == 1) { $('#rootwizard2').find('.previous-button').hide(); } else { $('#rootwizard2').find('.previous-button').show(); } if (current >= total) { $('#rootwizard2').find('.next-button').hide(); $('#rootwizard2').find('.submit-button').show(); } else { $('#rootwizard2').find('.next-button').show();

107

$('#rootwizard2').find('.submit-button').hide(); }

onPrevious: function (tab, navigation, index) { var total = navigation.find('li').length; var current = index + 1;

onTabShow: function(tab, navigation, index) { console.log('onTabShow');

var $total = navigation.find('li').length; var $current = index+1;

var $percent = ($current/$total) * 100; $('#rootwizard2').find('.bar').animate({ 'width': $percent+'%' }); } }); $('#rootwizard2 .submit-button').click(function() { var $valid = $("#rootwizard_form").valid();

if(!$valid) { $validator.focusInvalid(); return false; } }); $('#rootwizard2').find('.previous-button').hide(); $('#rootwizard2').find('.submit-button').hide();

Script diatas merupakan blackbox dari isi data baru siswa reguler. Jika admin mengisi data diri siswa kemudian ada 1 field yang terlewat maka sistem akan memberikan notifikasi atau warning bahwa field kosong dan harus diisi.

Dan apabila data yang di-input-kan tidak sesuai maka sistem akan menampilkan notifikasi bahwa data harus diisi sesuai dengan format yang ditentukan oleh sistem.

Data didalamnya antara lain :

1. First Name, yaitu mengisi data nama depan siswa yang ingin mendaftar sebagai siswa reguler di Student Center Course. Diisi dengan karakter minimal 3 karakter.

4. Religion, yaitu mengisi data agama siswa yang pilihannya berupa combo box. Jika tidak diisi maka akan menampilkan tulisan warna merah.

5. Place of Birth, yaitu mengisi data tempat lahir siswa yang ingin mendaftar sebagai siswa reguler di Student Center Course.

109

Jenis Kelamin, yaitu mengisi data jenis kelamin siswa dengan metode option radio button. Jika tidak diisi maka akan menampilkan tulisan warna merah.

7. Address, yaitu mengisi data alamat lengkap siswa. Field akan berubah warna merah jika tidak diisi.

9. Origin School, yaitu mengisi data asal sekolah siswa. Field akan berubah warna merah jika dikosongkan atau tidak diisi.

10. Phone, yaitu mengisi data nomor telepon rumah siswa atau nomor handphone siswa atau orang tua siswa. Jika tidak diisi maka akan menampilkan notifikasi “No.Telepon wajib diisi”.

11. E-mail, yaitu mengisi data e-mail siswa atau e-mail orang tua siswa. Jika dikosongi, maka akan tampil notifikasi “Email tidak boleh kosong”.

12. Achievement, yaitu mengisi data prestasi apa saja yang pernah didapatkan siswa baik prestasi akademis maupun non-akademis. Jika tidak diisi tidak ada notifikasi error.

Pada proses pengisian form registrasi kelas reguler tersebut, merupakan proses black box atau biasa disebut error notifikasi (pesan kesalahan) dalam pengisian data.

Gambar 4.27 Implementasi Form Kelola Data Pengajar pada halaman admin Source code halaman implementasi Form Data Pengajar pada halaman admin adalah sebagai berikut :

<?php

$ml=manageLecturer();

foreach($ml as $mlecturer){ ?>

<tr><td> <?php echo $mlecturer['nama_depan']; ?> <?php echo

$mlecturer['nama_belakang']; ?> Register Since: <?php echo

human_time(strtotime($mlecturer['tgl_daftar'])); ?></td> <td><?php echo $mlecturer['alamat']; ?></td>

<td><center><a rel="tooltip" data-placement="top" title="Create Account"

href="?act=account-lecturer&id=<?=$mlecturer['id']?>"></a>   <a rel="tooltip" data-placement="top" title="Add Schedule" href="?act=add-schedule&id=<?=$mlecturer['id']?>"></a>   <a rel="tooltip" data-placement="top" title="Edit" href="?act=lecturer-edit&id=<?=$mlecturer['id']?>"></a>

<a rel="tooltip" data-placement="top" title="Detail" href="?act=schedule-lecturer&id=<?=$mlecturer['id']?>"></a>   <a rel="tooltip" data-placement="top" title="Remove"

href="aksi.php?act=lecturer&do=remove&id=<?=$mlecturer['id'];?>"></a></center></td>

111

</tr> <? } ?>

Pada halaman kelola data pengajar di halaman admin, terdapat 5 aksi untuk mengelola data pengajar, antara lain :

1. Add Account. Merupakan fungsi untuk membuat akun online pengajar. 2. Add Schedule. Merupakan fungsi untuk menambah jadwal pengajar. 3. Edit. Merupakan fungsi untuk merubah data diri pengajar.

4. Delete. Merupakan fungsi untuk menghapus data diri pengajar didalam sistem student center course.

Gambar 4.28 Implementasi Form kelola e-book halaman admin

Source code halaman implementasi Form kelola e-book halaman admin adalah sebagai berikut :

<?php $f=manageFile(); foreach($f as $mfile){; ?> <tr> <td><?php echo $mfile['judul']; ?></td> <td><?php echo $mfile['keterangan']; ?></td> <td><?php echo byte_convert($mfile['size']); ?></td> <td><?php echo $mfile['lecturer']; ?></td> <td><?php echo $mfile['kategori']; ?></td>

<td><center><a rel="tooltip"

data-placement="top" title="Edit" href="?act=menu"></a>   <a rel="tooltip" data-placement="top" title="Remove"

href="aksi.php?act=file&do=remove&id_materi=<?=$mfile['id_materi'] ?>"></a></center></td>

</tr>

<? } ?>

Pada halaman kelola e-book milik admin, terdapat 2 action untuk mengelola data materi, yaitu edit dan delete. Untuk fungsi edit, admin merubah file lama dengan file yang baru dengan upload ulang, dan untuk fungsi delete admin menghapus file materi tersebut.

Daftar file yang ditampilkan didalam halaman terdiri dari judul atau nama file, deskripsi atau keterangan, ukuran file, publisher atau nama user yang meng-upload dengan nama author, kategori atau program studi, dan action untuk kuasa kelola file.

113

Dalam dokumen E-LEARNING SEBAGAI MEDIA PEMBELAJARAN DENGAN BOOTSTRAP FRAMEWORK. (Halaman 108-123)