Halaman E-Learning - Implementasi Program

BAB IV HASIL DAN PEMBAHASAN

4.1 Implementasi Program

4.1.3 Halaman E-Learning

Pada field ini, member dapat melakukan login maupun registrasi pada field yang tersedia di halaman indeks Student Center Course yang terletak pada bagian paling atas halaman indeks. Terbagi menjadi 2 button yang pertama button untuk login dan yang kedua button untuk daftar.

Proses login member sistem menerima data yang dikirim melalui form kemudian sistem memeriksa apakah data tersedia. Jika tersedia session akan dibentuk berdasarkan username dan sistem akan mengalihkan ke halaman member. Jika data tidak tersedia, maka sistem akan menampilkan pesan “invalid username or password”.

4.1.3 Halaman E-Learning

Halaman ini digunakan oleh user, member maupun siswa dan lecturer untuk mendapatkan informasi yang diperlukan dalam suatu sistem sesuai kebutuhan masing - masing yang disajikan di dalam sistem e-learning tersebut.

Halaman ini merupakan halaman primary dari suatu sistem yang didalamnya merupakan kumpulan akses penting untuk melakukan kegiatan belajar – mengajar dan kegiatan interaksi. Seperti E-Book, Daftar Pengajar, Beasiswa, dan Chat Area ( khusus member, lecturer, dan siswa).

Gambar 4.14 Implementasi halaman E-Book untuk user

Source code untuk implementasi halaman E-Book untuk user adalah sebagai berikut : <? $ebook=tampilEbook(); foreach($ebook as $books){ ?> <tr class="gradeX"> <td><?php echo $books['judul'] ?></td> <td><?php echo $books['keterangan'] ?></td> <td><?php echo $books['lecturer'] ?></td> <td><?php echo $books['kategori'] ?></td> </tr> <? } ?> </tbody> </table>

Pada halaman e-book ini semua daftar atau list materi dan tugas – tugas siswa dapat ditampilkan didalam sistem namun user tidak dapat mengunduh materi – materi tersebut hanya dapat diunduh oleh siswa online, lecturer dan admin saja. Data yang ditampilkan adalah E-Book, Deskripsi, Author, dan Program Studi.

E-Book merupakan nama file atau materi yang di –upload oleh admin maupun siswa dan pengajar. Deskripsi merupakan keterangan tentang materi atau file tersebut. Author yaitu merupakan nama admin yang menambahkan materi atau file ke daftar e-book. Program Studi merupakan jenis mata pelajaran atau bidang studi pada materi yang di-upload tersebut.

Gambar 4.15 Implementasi halaman E-Book untuk lecturer / siswa

Source Code halaman e-book untuk lecturer atau siswa adalah sebagai berikut : <? $ebook=tampilEbook(); foreach($ebook as $books){ ?> <tr class="gradeX"> <td><?php echo $books['judul'] ?></td> <td><?php echo $books['keterangan'] ?></td>

</td>

<td class="center"><a href="<?php echo

$url."download.php?id=".$books['id']."" ?>"><span class="icon-download-alt"></span></a></td> </tr> <? } ?> </tbody> </table>

Pada halaman e-book ini semua daftar atau list materi dan tugas – tugas siswa dapat ditampilkan didalam sistem untuk lecturer dan siswa dimana semua materi maupun tugas siswa dapat diunduh oleh siswa online, lecturer dan admin saja.

Data yang ditampilkan antara lain : E-Book, Deskripsi, Author, Program Studi, dan Unduh. E-Book merupakan nama file atau materi yang di –upload oleh admin maupun siswa dan pengajar. Deskripsi merupakan keterangan tentang materi atau file tersebut. Author yaitu merupakan nama admin yang menambahkan materi atau file ke daftar e-book. Program Studi merupakan jenis mata pelajaran atau bidang studi pada materi yang di-upload tersebut. Unduh merupakan button untuk mengunduh file atau materi tersebut, jika di klik maka akan tampil download box.

Gambar 4.16 Implementasi halaman E-Book untuk admin Source Code halaman e-book untuk 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"><i class="icon-pencil"></i></a>   <a rel="tooltip" data-placement="top" title="Remove"

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

</tr> <? } ?>

Pada halaman ini admin dapat mengelola data e-book seperti edit dan hapus file e-book. Data yang ditampilkan antara lain : Title, Description, Size, Author, Category, dan Action. Title merupakan nama file atau materi yang di –

upload oleh admin maupun siswa dan pengajar. Description merupakan keterangan tentang materi atau file tersebut.

Fungsi lainnya yaitu Size, merupakan ukuran dari file atau materi, dan terhitung dari ukuran terkecil yaitu kilobyte. Author yaitu merupakan nama admin yang menambahkan materi atau file ke daftar e-book. Category merupakan jenis mata pelajaran atau bidang studi pada materi yang di-upload tersebut. Action merupakan field untuk menghapus materi dan megubah materi.

Gambar 4.17 Implementasi halaman Daftar Pengajar pada halaman siswa Source Code halaman Daftar Pengajar pada halaman siswa adalah sebagai berikut : <? $isha=tampilTable(); foreach($isha as $table){ ?> <tr class="gradeX"> <td>

<?php echo $table['nama_depan'] ?> <?php echo $table['nama_belakang'] ?></td>

<td class="center"><?php echo $table['hari'] ?><br /><?php echo $table['jam_awal'] ?> - <?php echo

</td>

</tr> <? } ?>

Pada halaman daftar pengajar yang ditampilkan kepada siswa online adalah nama lengkap pengajar, program studi yang diajarkan, jenjang pendidikan, dan jadwal pengajar. Jadwal pengajar hanya ditampilkan kepada pengguna tertentu seperti pengajar sendiri dan siswa online.

Pengajar dan siswa dapat melakukan kegiatan belajar mengajar secara online pada jam dan hari yang dimiliki pengajar. Sehingga kegiatan belajar mengajar dapat dilaksanakan dengan baik dan fokus.

Data pengajar yang ditampilkan antara lain adalah : Nama Lengkap, Jenjang Pendidikan, Program Studi dan Jadwal. Jadwal disini adalah merupakan jadwal pengajar untuk mengajar di kelas online.

Gambar 4.18 Implementasi halaman Daftar Pengajar pada halaman member / user

Source code halaman Daftar Pengajar pada halaman member / user adalah sebagai berikut : <?php $isha=tampilTable(); foreach($isha as $table){ ?> <tr class="gradeX">

</tr>

<? } ?>

Pada halaman gambar 4.18 merupakan implementasi halaman daftar pengajar dimana level member dan common user dapat browse informasi semua pengajar di Student Center Course.

Untuk melihat data pengajar, user atau member masuk kedalam menu E-Learning dan pada sub-menu Data Pengajar. Data yang ditampilkan untuk user umum antara lain adalah : Nama Lengkap, Jenjang Pendidikan dan Program Studi. Nama Lengkap merupakan nama pengajar Student Center Course, Jenjang Pendidikan merupakan pendidikan terakhir pengajar, dan Program Studi yaitu bidang studi yang diajarkan oleh pengajar Student Center Course.

Gambar 4.19 Implementasi halaman Chat Box pada halaman lecturer, siswa dan member

Source Code halaman chat box untuk lecturer,siswa dan member adalah sebagai berikut :

<?php

$function = htmlentities(strip_tags($_POST['function']), ENT_QUOTES);

$file = htmlentities(strip_tags($_POST['file']), ENT_QUOTES); $log = array(); switch ($function){ case ('getState'): if (file_exists($file)){ $lines = file($file); } $log['state'] = count($lines); break; case ('send'): $nickname = htmlentities(strip_tags($_POST['nickname']), ENT_QUOTES); $reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/"; $blankexp = "/^\n/"; $message = htmlentities(strip_tags($_POST['message']), ENT_QUOTES);

$message = str_replace(":)", "<img src=\"smiles/smile.gif\">", $message);

if(!preg_match($blankexp, $message)){

if(preg_match($reg_exUrl, $message, $url)){

$message = preg_replace($reg_exUrl, '<a

href="'.$url[0].'" target="_blank">'.$url[0].'</a>', $message); }

fwrite(fopen("../../room". $file, 'a'),

"<span>". $nickname . "</span>" . $message = str_replace("\n", " ", $message) . "\n"); } break; } echo json_encode($log); ?>

Didalam chat room terdiri dari 3 kolom, diantaranya :

1. Kolom Chat, merupakan kolom untuk menampilkan teks chat yang dikirimkan oleh user online yang mengirim pesan.

2. Kolom Current Chatters, merupakan kolom untuk menampilkan siapa saja yang sedang online didalam chat room.

3. Kolom Text, merupakan kolom yang digunakan untuk menulis pesan teks yang akan dikirim.

Chat box prosesnya adalah ketika pengajar / siswa / member login ke sistem, maka chat box akan otomatis mendeteksi username siapa yang telah login dan saat ingin berdiskusi di dalam forum chat, hanya menginputkan e-mail untuk login ke dalam chat box.

Chat box sidebar kanan menampilkan user siapa saja yang sedang online sedangkan chat box sidebar kiri menampilkan pesan chat yang dikirim oleh semua pengguna.

Gambar 4.20 Implementasi halaman E-Book download Source Code halaman e-book download adalah sebagai berikut :

<?php

include "conn/config.inc.php"; // membaca id file dari link $id = abs((int)$_GET['id']);

// membaca informasi file dari tabel berdasarkan id nya $query = "SELECT * FROM materi WHERE id = '$id'"; $hasil = mysql_query($query);

$books = mysql_fetch_array($hasil);

// header yang menunjukkan nama file yang akan didownload header("Content-Disposition: attachment; filename=" . preg_replace("/\s/", "", $books['filename']));

// header yang menunjukkan ukuran file yang akan didownload header("Content-length: ".$books['size']);

// header yang menunjukkan type file yang akan didownload header("Content-type: ".$books['type']);

header("Pragma: no-cache"); header("Expires: 0");

Script diatas merupakan kode untuk mengunduh materi – materi di dalam halaman e-book. Materi hanya dapat diunduh oleh pengajar, siswa dan admin. Ketika file telah di-upload maka pada kolom Author akan menampilkan siapa yang menambahkan materi di dalam e-book tersebut.

Data e-book berupa tipe file : pdf, ms word, power point, zip, dan format file .txt atau text. Selain format diatas maka data tidak dapat disimpan.

Dalam dokumen E-LEARNING SEBAGAI MEDIA PEMBELAJARAN DENGAN BOOTSTRAP FRAMEWORK. (Halaman 91-102)