Perancangan Aplikasi Pembelajaran Tata Bahasa Inggris Tingkat Primary Berbasis Multimedia

(1)

L

A

M

P

I

R

A

(2)

LISTING PROGRAM

1.

index.php

<?php session_start(); ?>

<?php

include 'koneksi.php';

$page='';

if (isset($_GET['page'])){

$page=$_GET['page'];

}

?>

<!DOCTYPE html>

<head>

<link

href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'>

(3)

$(document).ready(function(){

$('.slider')._TMS({

show:0,

pauseOnHover:true,

prevBu:'.prev',

nextBu:'.next',

playBu:false,

duration:800,

preset:'fade',

pagination:true,

pagNums:false,

slideshow:7000,

numStatus:false,

banners:false,

waitBannerAnimation:false,

progressBar:false

})

});

</script>

<!--[if lt IE 8]>

<img

src="http://storage.ie6countdown.com/assets/100/images/banners/war ning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing

experience, upgrade for free today." />

</a>

</div>

<![endif]-->

<!--[if lt IE 9]>

(4)

<![endif]-->

</head>

<body>

<?php include 'slider.php'; ?>

</header>

<h2 class="top-1 p2">Topics</h2>

<?php

$qry=mysql_query("select * from tblmateri order by materi asc");

while ($data=mysql_fetch_array($qry)){

?>

<p><a href="index.php?page=view&materi=<?php echo $data['materi']; ?>" class="text-1 p3">"<?php echo

$data['materi']; ?>”<a/></p> <?php } ?>

<h2 class="top-1 p2">Exercise</h2>

<?php

(5)

echo "<p><a

href='index.php?page=pilihmateri&materi=$data[materi]'>Exercise $data[materi]</a></p>";

}

?>

<a href="administrator/index.php" class="link-1 top-3">Login Admin</a>

</div>

<h2 class="p2">Welcome to English Learning</h2>

<p class="text-1">English Learning adalah suatu

media pembelajaran yang mengajarkan mengenai dasar-dasar grammar Bahasa Inggris berbasis multimedia yang ditujukan anak-anak.</p>

</div>

<?php

if (isset($_GET['page'])){

if (file_exists($page.'.php')){

include $page.'.php';

#echo 'Ada';

}

else{

#echo 'Tidak ada!';

}

#echo '#';

}

else{

#echo '-';

include 'home.php';

(6)

?>

</div>

</div>

<p>Website Powered by Elsaria Manalu</p>

</footer>

</div>

</div>

</section>

</div>

</body>

</html>

2.

koneksi.php

<?php

if (file_exists('config.php')){

include 'config.php';

}

elseif (file_exists('../config.php')){

include '../config.php';

}

elseif (file_exists('../../config.php')){

include '../../config.php';

(7)

elseif (file_exists('../../../config.php')){

include '../../../config.php';

}

$db=new database("localhost", "root", "", "dbvideo");

$db->konekdb();

?>

</body>

</html>

3.

view.php

<?php

$materi=$_GET['materi'];

$video=$db->tampilrecord("tblvideo", "materi='$materi' order by idvideo desc", "video");

echo "<p>$video</p>";

?>

<style>

#my-video{

padding:0;

background-color:#000000;

border:solid 1px #9F9F9F;

box-shadow:0 1px 2px 3px;

}

</style>

<video id="my-video" class="video-js" controls preload="auto" width="100%" height="400"

poster="MY_VIDEO_POSTER.jpg" data-setup="{}">

<source src="administrator/video/<?php echo $video; ?>" type='video/mp4'>

(8)

To view this video please enable JavaScript, and consider upgrading to a web browser that

<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>

</p>

</video>

<tbody>

<tr>

<td bgcolor="#9E0002" style="color: #FFFFFF">Komentar</td>

</tr>

<tr>

<td width="19%">Email</td>

</tr>

<tr>

<td>Komentar</td>

</tr>

<tr>

</tr>

</tbody>

(9)

<tbody>

<tr>

<td bgcolor="#7B0002" style="color: #FFFD00">Daftar Komentar</td>

</tr>

<?php

$qry=mysql_query("select * from tblkomentar where materi='$materi' and idbalas='0' order by idkomentar desc");

?>

<tr>

<td><p style="font-size:12px; font-weight:bold;"><?php echo $data['email']; ?><br/><small><?php echo $data['waktu'];

?></small></p>

<?php

$idbalas=$db->tampilrecord("tblkomentar", "idbalas='$data[idkomentar]'", "idbalas");

if ($idbalas>=1){

$balas=$db->tampilrecord("tblkomentar", "idbalas='$idbalas'", "komentar");

$waktu=$db->tampilrecord("tblkomentar", "idbalas='$idbalas'", "waktu");

?>

<div style="padding:8px; border:solid 1px #CC3900; background-color:#EDC775; box-shadow:0 2px 2px #ABABAB; margin-left:50px;">reply : <br><?php echo $balas; ?><br><small

style="font-size:10px; color:#FFF89E;"><?php echo $waktu; ?></small></div>

<?php } ?>

</td>

</tr>

<?php } ?>

(10)

</table>

$(document).ready(function(e) {

$('#cmdkirim').click(function(e) {

var email=$('#txtemail').val();

if (email==''){

alert('email belum diisi!');

return false;

}

var komentar=$('#txtkomentar').val();

if (komentar==''){

alert('Komentar belum diisi!');

return false;

}

$.post('komentarsimpan.php', {

materi:$('#txtmateri').val(),

email:$('#txtemail').val(),

komentar:$('#txtkomentar').val()

},function (data, status){

if (data==''){

document.location.href='index.php?page=view&materi='+ $('#txtmateri').val();

}

else{

alert(data);

}

});

(11)

</script>

4.

slider.php

<nav>

<?php

$qry=mysql_query("select * from tblslider order by idslider desc");

?>

<?php } ?>

</ul>

</div>

</div>

<li><a href="index.php?page=about" class="clr-2">About</a></li>

<li><a href="index.php?page=materi" class="clr-3">Topics</a></li>

<li><a href="index.php?page=ujian" class="clr-4">Exercise</a></li>

(12)

</nav>

5.

about.php

<h2 class="clr-6 p6">A Few Words About Me</h2>

<p>Hello, my name is Elsari Manalu,

you can call me Elsa. I was born in Lubuk Pakam on Mei 11 1995. I am creator and autor of this website. This is my last project, my final assignment. I interest to make website because I consider, website is interaktif, sought and needed a lot of people,

interesting for many things, full of technologies and update. I'm still a beginner in design, but I've do my best so I am sorry if this not too good for your eyes. I'll learn more</p>

</div>

6.

ujian.php

<tbody>

<tr>

<td bgcolor="#324BC1" style="font-size: 20px; font-family: Segoe, 'Segoe Print', 'Liberation Serif', Times, 'Segoe Print', serif; color: #FFFFFF;">Pilih Materi</td>

</tr>

<?php

?>

(13)

</tr>

<?php } ?>

</tbody>

</table>

7.

soal.php

<?php include 'koneksi.php'; ?>

<?php

if (!isset($_SESSION['purutsoal'])){

$_SESSION['purutsoal']=0;

}

if ($_SESSION['xpurutsoal']==''){

$_SESSION['xpurutsoal']=0;

}

#

if (isset($_SESSION['akhir'])){

if ($_SESSION['akhir']>=1){

echo "<script>

document.location.href='index.php?page=hasil'; </script>";

}

#

$xsoal=explode(',', $_SESSION['pidsoal']);

$idsoal=$xsoal[$_SESSION['xpurutsoal']];

#

(14)

#

$soal=$db->tampilrecord("tblsoal", "idsoal='$idsoal'", "soal");

$jwba=$db->tampilrecord("tblsoal", "idsoal='$idsoal'", "jwba");

$jwbb=$db->tampilrecord("tblsoal", "idsoal='$idsoal'", "jwbb");

$jwbc=$db->tampilrecord("tblsoal", "idsoal='$idsoal'", "jwbc");

$jwbd=$db->tampilrecord("tblsoal", "idsoal='$idsoal'", "jwbd");

#echo $_SESSION['xpurutsoal'].' idsoal '.$idsoal. ' ....'.$_SESSION['pidsoal'];

echo "<strong>NO SOAL :

".($_SESSION['xpurutsoal']+1)."</strong>";

?>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

(15)

</tr>

<tr>

</tr>

</tbody>

</table>

$('#cmda').click(function(e) {

$.post('soaljawab.php', {

jawab:'A'

}, function (data, status){

});

/* */

$('#cmdb').click(function(e) {

jawab:'B'

(16)

});

/* */

$('#cmdc').click(function(e) {

jawab:'C'

});

/* */

$('#cmdd').click(function(e) {

jawab:'D'

});

</script>

8.

soaljawab.php

<?php

$xsoal=explode(',', $_SESSION['pidsoal']);

(17)

if (!isset($idsoal)){

}

echo $idsoal.' '.$_SESSION['xpurutsoal'];

$email=$_POST['email'];

$materi=$_POST['materi'];

$jawab=$_POST['jawab'];

#

$j=$db->tampilrecord("tblsoal", "idsoal='$idsoal'", "jwb");

if ($j==$jawab){

$st=1;

}

else{

$st=0;

}

if ($db->cekrecord("select * from tbljawaban where email='$email' and materi='$materi' and idsoal='$idsoal'")==true){

$qry=mysql_query("update tbljawaban set jwb='$jawab', st='$st' where email='$email' and materi='$materi' and idsoal='$idsoal'");

if ($qry){

}

else{

echo 'Terjadi kesalahan!';

}

else{

(18)

if ($qry){

}

else{

echo "Terjadi kesalahan!!";

}

$_SESSION['akhir']=0;

$_SESSION['xpurutsoal']=$_SESSION['xpurutsoal']+1;

if ($_SESSION['xpurutsoal']>=5){

$_SESSION['akhir']='1';

}

echo "URUT ".$_SESSION['xpurutsoal'];

?>

9.

hasil.php

<h2 class="clr-5 p6">Hasil</h2>

<?php

$materi=$_SESSION['pmateri'];

$email=$_SESSION['pemail'];

$j=0;

$jbenar=0;

$jsalah=0;

$qry=mysql_query("select * from tbljawaban where email='$email' and materi='$materi'");

$j++;

(19)

$jbenar++;

}

else{

$jsalah++;

}

$hasil=($jbenar/$j)*100;

$qry=mysql_query("update tblujian set nilai='$hasil' where email='$email' and materi='$materi'");

if ($qry){

}

else{

echo 'Terjadi kesalahan!';

}

?>

<table width="100%" border="0" cellspacing="0" cellpadding="5" style="font-size:24px; font-family:Century, 'Hoefler Text', 'Liberation Serif', Times, 'Century Gothic', serif;

color:#8B3400;">

<tbody>

<tr>

<td width="25%">Materi</td>

</tr>

<tr>

<td>Jumlah Soal</td>

(20)

</tr>

<tr>

<td>Jumlah Benar</td>

</tr>

<tr>

<td>Jumlah Salah</td>

</tr>

<tr>

<td>Nilai</td>

</tr>

<tr>

</tr>

</tbody>

</table>

$('#cmdkembali').click(function(e) {

document.location.href='index.php?page=ujian';

});

</script>

(21)

<?php

$email=$_POST['email'];

$komentar=$_POST['komentar'];

$waktu=date('Y-m-d H:i:s');

$qry=mysql_query("insert into tblkomentar (email, waktu, materi, komentar) values ('$email', '$waktu', '$materi', '$komentar')");

if ($qry){

echo '';

}

else{

echo 'Terjadi kesalahan, silahkan hubungi sistem administrator anda!';

}

?>

11.

login.php

<tbody>

<tr>

<td bgcolor="#6B0001" style="color: #F0FF5A">Login</td>

</tr>

<tr>

<td width="16%">Username</td>

</tr>

(22)

<td>Password</td>

</tr>

<tr>

</tr>

</tbody>

</table>

$('#cmdregistrasi').click(function(e) {

document.location.href='index.php?page=reg';

});

$('#cmdlogin').click(function(e) {

var u=$('#txtusername').val();

var p=$('#txtpassword').val();

if (p=='' || u==''){

return false;

}

$.post('logincek.php', {

u:u,

p:p

(23)

document.location.href='index.php?page=ujian';

}

else{

alert(data);

}

});

</script>

12.

administrator/index.php

<?php include 'cek.php'; ?>

<?php include '../koneksi.php'; ?>

<!DOCTYPE html>

<html>

<head>

<title>Halaman Administrator</title>

(24)

href="codebrush/css/shCoreDefault.css" type="text/css"/>

<style>

input[type="text"], select, textarea{

border:solid 1px #A2A2A2;

}

select{

border:solid 1px #A2A2A2;

}

</style>

(25)

</script>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

data-target="#sidebar-collapse">

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#"><span>Video</span>Admin</a>

(26)

<li><a href="#"><svg class="glyph stroked gear"><use

xlink:href="#stroked-gear"></use></svg> Settings</a></li> -->

<li><a

href="logout.php"><svg class="glyph stroked cancel"><use xlink:href="#stroked-cancel"></use></svg> Logout</a></li>

</ul>

</li>

</ul>

</div>

</div>

</nav>

<?php include 'menu.php'; ?>

<li class="active">Administrator Page</li>

</ol>

</div>

<?php include 'isi.php'; ?>

</div>

$('#calendar').datepicker({

(27)

!function ($) {

$(document).on("click","ul.nav li.parent > a > span.icon", function(){

$(this).find('em:first').toggleClass("glyphicon-minus");

});

$(".sidebar

span.icon").find('em:first').addClass("glyphicon-plus");

}(window.jQuery);

$(window).on('resize', function () {

if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')

})

$(window).on('resize', function () {

if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')

})

</script>

</body>

</html>

<?php include 'footer.php'; ?>

13.

administrator/cek.php

<?php

if (!isset($_SESSION['videouser']) or !isset($_SESSION['videopwd'])){

echo "<script> document.location.href='login.php'; </script>";

} ?>

14.

administrator/menu/index.php

(28)

xlink:href="#stroked-dashboard-dial"></use></svg> Dashboard</a></li>

<li><a href="index.php?page=slider"><svg class="glyph stroked calendar"><use xlink:href="#stroked-calendar"></use></svg> Slider</a></li>

<li><a href="index.php?page=materi"><svg

class="glyph stroked calendar"><use xlink:href="#stroked-calendar"></use></svg> Materi</a></li>

<li><a href="index.php?page=video"><svg

class="glyph stroked line-graph"><use xlink:href="#stroked-line-graph"></use></svg> Video</a></li>

<li><a href="index.php?page=soal"><svg

class="glyph stroked table"><use xlink:href="#stroked-table"></use></svg> Soal</a></li>

<!--<li><a href="index.php?page=hasil"><svg

class="glyph stroked pencil"><use xlink:href="#stroked-pencil"></use></svg> Hasil Test</a></li>-->

<li><a href="index.php?page=komentar"><svg class="glyph stroked pencil"><use xlink:href="#stroked-pencil"></use></svg> Komentar</a></li>

<li><a href="index.php?page=gambar"><svg class="glyph stroked pencil"><use xlink:href="#stroked-pencil"></use></svg> File Gambar</a></li>

</ul>

</div

15.

administrator/page/materi/index.php

<div class="panel-heading">Materi</div> <div class="panel-body">

<p>

<a href="index.php?page=materi&sfile=tambah" class="btn btn-info btn-sm">Tambah Materi</a>

</p>

<td width="3%"><strong>No</strong></td> <td width="65%"><strong>Materi</strong></td> <td width="10%" align="right"><strong>Jumlah Soal</strong></td>

<?php $no=0;

$no++;

(29)

<tr>

<td align="right"><?php echo $data['jlhsoal']; ?></td> <td align="right"><a

href="index.php?page=materi&sfile=edit&materi=<?php echo $data['materi']; ?>" class="btn btn-warning btn-sm">Edit</a> <a href="#" class="btn btn-danger btn-sm cmdhapus" id="<?php echo $data['materi']; ?>">Hapus</a></td>

</tr> <?php } ?> </tbody> </table> </div> </div> </div> </div> <script> $(document).ready(function(e) { $('.cmdhapus').click(function(e) { var nilai=$(this).attr('id'); $.confirm({ title:'Konfirmasi',

content:'Apakah anda yakin ingin menghapus data

ini?',

confirm:function(){

$.post('page/materi/hapus.php', {

materi:nilai

if (data==''){ document.location.href='index.php?page=materi'; } else{ $.alert({content:data}); } }); } }); }); }); </script>

16.

administrator/page/materi/tambah.php

<div class="panel-heading">Tambah Materi</div>

(30)

<tbody>

<tr>

</tr>

<tr>

<td>Jumlah Soal</td>

</tr>

<tr>

</tr>

<tr>

<td><div class="col-md-12"><input type="button"

name="cmdsimpan" id="cmdsimpan" value="Simpan" class="btn btn-primary btn-sm">

</tr>

</tbody>

</table>

</div>

(31)

$('#txtmateri').focus();

document.location.href='index.php?page=materi';

});

$('#cmdsimpan').click(function(e) {

var materi=$('#txtmateri').val();

if (materi==''){

$.alert({content:'Materi tidak boleh kosong!'});

return false;

}

$.post('page/materi/simpan.php', {

jlh:$('#txtjlh').val(),

waktu:$('#txtwaktu').val()

}, function(data, status){

if (data==''){

}

else{

$.alert({content:data});

}

});

(32)

17.

administrator/page/materi/simpan.php

<?php

include '../../../koneksi.php';

$jlh=$_POST['jlh'];

$waktu=$_POST['waktu'];

if ($db->cekrecord("select * from tblmateri where materi='$materi'")==true){

echo 'Materi sudah ada, periksa kembali data anda!';

}

else{

$qry=mysql_query("insert into tblmateri (materi, waktu, jlhsoal) values ('$materi', '$waktu', '$jlh')");

if ($qry){

echo '';

}

else{

echo 'Terjadi kesalahan, silahkan hubungi sistem administrator anda!';

}

?>

18.

administrator/page/materi/hapus.php

<?php

include '../../../koneksi.php';

(33)

if ($qry){

echo '';

}

else{

echo 'Terjadi kesalahan, periksa kembali data anda!';

}

?>

19.

administrator/page/materi/edit.php

<?php

$materi=$_GET['materi'];

$jlhsoal=$db->tampilrecord("tblmateri", "materi='$materi'", "jlhsoal");

$waktu=$db->tampilrecord("tblmateri", "materi='$materi'", "waktu");

?>

<div class="panel-heading">Edit Materi</div>

<tbody>

<tr>

<td width="87%"><div class="col-md-12"><input

name="txtmateri" type="text" class="form-control" id="txtmateri" value="<?php echo $materi; ?>" readonly></div></td>

</tr>

<tr>

(34)

</tr>

<tr>

</tr>

<tr>

<td><div class="col-md-12"><input type="button"

name="cmdsimpan" id="cmdsimpan" value="Simpan" class="btn btn-primary btn-sm">

</tr>

</tbody>

</table>

</div>

});

(35)

var materi=$('#txtmateri').val();

if (materi==''){

$.alert({content:'Materi tidak boleh kosong!'});

return false;

}

$.post('page/materi/update.php', {

jlh:$('#txtjlh').val(),

waktu:$('#txtwaktu').val()

}, function(data, status){

if (data==''){

}

else{

}

});

</script>

20.

administrator/page/video/index.php

<div class="panel-heading">Pilih Materi</div>

(36)

?>

<li class="list-group-item"><a

href="index.php?page=video&sfile=pilih&materi=<?php echo $data['materi']; ?>"><?php echo $data['materi']; ?></a></li>

<?php } ?>

</ul>

</div>

21.

administrator/page/soal/index.php

<div class="panel-heading">Input Soal</div>

<?php

?>

<li class="list-group-item"><a

href="index.php?page=soal&sfile=tambah&materi=<?php echo $data['materi']; ?>"><?php echo $data['materi']; ?></li>

<?php } ?>

</ul>

</div>

(37)

</div>

22.

administrator/page/komentar/index.php

<div class="panel-heading">Daftar Komentar</div>

<tbody>

<tr>

<td width="22%">Waktu</td>

<td width="62%">Komentar</td>

</tr>

<?php

$no=0;

$qry=mysql_query("select * from tblkomentar order by idkomentar desc limit 0, 100");

$no++;

if ($data['idbalas']>=1){

$hasil= "<div class='alert alert-info'>".nl2br($data['komentar'])."</div>";

}

else{

$hasil=nl2br($data['komentar']);

}

?>

(38)

<td align="right"><a href="#" class="btn btn-danger btn-sm cmdhapus" id="<?php echo $data['idkomentar']; ?>">Hapus</a> <a href="index.php?page=komentar&sfile=balas&id=<?php echo

$data['idkomentar']; ?>" class="btn primary btn-sm">Balas</a></td>

</tr>

<?php } ?>

</tbody>

</table>

</div>

$('.cmdhapus').click(function(e) {

var nilai=$(this).attr('id');

$.confirm({

title:'Konfirmasi',

content:'Apakah anda yakin ingin menghapus data ini?',

confirm:function(){

$.post('page/komentar/hapus.php', {

id:nilai

if (data==''){

document.location.href='index.php?page=komentar';

}

(39)

}

});

}

});

</script>

23.

logout.php

<?php

unset($_SESSION['videouser']);

unset($_SESSION['videopwd']);

echo "<script> document.location.href='index.php'; </script>";

(40)

50

DAFTAR PUSTAKA

Adi. 2006. Aplikasi Pembelajaran

E-learning

Bahasa Inggris. Surabaya

Arsyad, Azhar. 1996. Media Pembelajaran, Raja Gravindo Persada, Jakarta

Julbilate, Ari. 2011 Analisis Dan Perancangan Aplikasi Pengajaran Bahasa

Inggris Berbasis Web. Palembang

Sulaeman, Arief. 2009.

E-learning

Bahasa Inggris Berbasis Web. Semarang

Surya, Ryandi. 2011. Rancangan Bangun Bahasa Inggris Berbasis Multimedia

Pada Bimbel Exellence. Palembang

Wahyu,

2013

.

Pengertian

Tutorial

atau

Tutoring

,

http://wahyualinursalim.blogspot.co.id/2013/06/pengertian-tutorial-atau-tutoring.html. Diakses 29 Maret 2016, 18.00 wib

(41)

BAB 3

ANALISA PERANCANGAN SISTEM

3.1 Perancangan Sistem

Perancangan Sistem adalah upaya suatu organisasi atau lembaga untuk memulai

memiliki suatu sistem yang lebih baik lagi dari sistem yang sebelumnya.

Perancangan sistem dilakukan setelah mendapat gambaran dengan jelas apa yang

harus dikerjakan. Tujuan dari perancangan sistem adalah untuk memenuhi

kebutuhan pemakai (

user

) mengenai gambaran yang jelas tentang perancangan

sistem yang akan dibuat serta diimplementasikan. Perancangan sistem adalah

suatu upaya untuk membuat suatu sistem yang baru atau memperbaiki sistem

yang lama secara keseluruhan atau memperbaiki sistem yang telah ada. Desain

sistem secara umum mengidentifikasikan komponen-komponen sistem informasi

yang akan didesain secara terinci. Desain terinci dimaksudkan untuk pemrogram

komputer dan ahli teknik lainnya yang akan mengimplementasikan sistem.

3.2 Data Flow Diagram (DFD)

Data Flow Diagram

(DFD) adalah suatu diagram yang menggunakan

notasi-notasi untuk menggambarkan arus dari data sistem, yang penggunaannya sangat

membantu untuk memahami sistem secara logika, tersruktur dan jelas. DFD

merupakan alat bantu dalam menggambarkan atau menjelaskan sistem yang

(42)

25

Diagram konteks merupakan diagram yang menggambarkan hubungan

antarsistem dengan entitas di luar sistem, merupakan sistem secara keseluruhan.

Diagram rinci menggambarkan sistem sebagai jaringan kerja antara fungsi yang

berhubungan satu dengan yang lain dengan aliran penyimpanan data, model ini

hanya memodelkan sistem dari sudut pandang fungsi.

English Learning

Pengunjung Administrator

Ujian

Data Materi Video

Soal Data Pengunjung Pembelajaran

[image:42.595.120.538.230.375.2]

Soal

(43)

26

Berikut rancangan diagram level 0 Media Pembelajaran tata bahasa Inggris

[image:43.595.121.554.116.718.2]

Administrator Username, Password 1.0 Login Administrator 2.0 Slider 3.0 Materi 4.0 Video 5.0 Komentar Slider Materi Video Balas Komentar tblslider tblmateri tblvideo tblkomentar tbllogin Pengunjung 7.0 Video Materi 8.0 Ujian 6.0 Soal 10.0 Komentar Pengunjung Data Login Data Login Hasil Verifikas Data Slider Data Materi Data Video Data Komentar Data Soal tblsoal Data Soal Video Materi Data Soal tbljawaban 9.0 Hasil Ujian Komentar Komentar Data Komentar jawaban Hasil

Gambar 3.2.2 DFD Level 0

Pengunjung Admin 7.1 Input Video Materi 7.2 Data Video Materi Data Video tblvideo Data Video

Data Video Data Video

Data Video

(44)

27

3.3 Entity Relationship Diagram (ERD)

Berikut ini adalah gambaran dari

Entity Relationship Diagram

(ERD) dari aplikasi

pembelajaran tata bahasa Inggris. Entitas yang berhubungan adalah entitas soal,

admin, dan video. Admin menyimpan data soal dan video. Setiap entitas memiliki

atribut-atribut, yang dapat dilihat pada gambar dibawah ini

Menyimpan

Admin Menyimpan Video

n

n 1

Soal

1

jwbb jwba

jwbc soal

materi jwbd

jwb Idsoal

user pass

[image:44.595.113.503.210.508.2]

idvideo video materi keterangan

Gambar 3.3.1 ERD Pembelajaran

3.4 Perancangan Database

Perancangan

database

adalah perancangan yang dilakukan untuk menentukan file

database

seperti

field

dan tipe data. Dalam hal merancang sebuah sistem yang

berbasis

database

, perancangan

database

merupakan hal yang perlu mendapat

perhatian khusus. Karena

database

berperan penting untuk memanipulasi data

user

dari aplikasi yang dibuat. Berikut adalah rancangan tabel yang digunakan

(45)

[image:45.595.114.475.95.626.2]

28

Tabel 3.1 Tabel Admin

No

Field Nama

Data Tipe

Size

Keterangan

[image:45.595.114.478.109.209.2]

1

2

user

pass

Varchar

50

Username

Password

Tabel 3.2 Tabel Materi

No

Field Nama

Data Tipe

Size

Keterangan

1

2

3

materi

waktu

jlhsoal

Varchar

Integer

50

4

Nama Materi

Waktu

Jumlah Soal

Tabel 3.3 Tabel Video

No

Field Nama

Data Tipe

Size

Keterangan

1

2

3

4

idvideo*

video

materi

keterangan

Integer

Varchar

Text

11

225

50

-

Id Video

Nama Video

Nama Materi

Keterangan Video

Tabel 3.4 Tabel Komentar

No

Field Nama

Data Tipe

Size

Keterangan

[image:45.595.112.481.464.621.2] [image:45.595.114.480.685.756.2]

(46)

29

2

3

4

5

6

email

materi

waktu

komentar

idbalas

Varchar

Datetime

Text

Integer

50

-

11

Email Komentar

Nama Materi

Waktu Komentar

Komentar

[image:46.595.113.479.85.226.2]

Id Balasan Komentar

Tabel 3.5 Tabel Soal

No

Field Nama

Data Tipe

Size

Keterangan

[image:46.595.113.477.293.586.2]

1

2

3

4

5

6

7

8

idsoal*

materi

soal

jwba

jwbb

jwbc

jwbd

jwb

Integer

Varchar

Text

Varchar

11

50

-

1

Id Soal

Nama Materi

Soal

Jawaban A

Jawaban B

Jawaban C

Jawaban D

Jawaban Benar

Tabel 3.6 Tabel Jawaban

No

Field Nama

Data Tipe

Size

Keterangan

(47)

[image:47.595.112.478.84.141.2]

30

5

6

materi

email

Varchar

50

Nama Materi

Nama Email

Tabel 3.7 Tabel Ujian

No

Field Nama

Data Tipe

Size

Keterangan

1

2

3

4

5

6

idujian*

email

materi

waktu

st

nilai

Integer

Varchar

Integer

Text

11

50

11

1

11

Id Ujian

Email

Nama Materi

Waktu

Jawaban Benar/Salah

Nilai

Tabel 3.8 Tabel Gambar

No

Field Nama

Data Tipe

Size

Keterangan

[image:47.595.111.479.145.407.2]

1

2

idgambar

gambar

Integer

Varchar

11

255

Id Gambar

Nama Gambar

Tabel 3.9 Tabel Slider

No

Field Nama

Data Tipe

Size

Keterangan

[image:47.595.113.478.623.750.2]

(48)

31

3.5 Flowchart

Flowchart

adalah sekumpulan simbol-simbol yang menunjukkan atau

menggambarkan rangkaian kegiatan-kegiatan program dari awal hingga akhir,

flowchart

juga digunakan untuk menggambarkan urutan langkah-langkah

pekerjaan di suatu algoritma. Di dalam web ini ada beberapa

flowchart

, yaitu

flowchart

menu utama,

flowchart

administrator

, dan lain-lain. Berikut ini

merupakan penjelasan logika program Sistem Informasi penerimaan siswa baru

pada SMP Bersubsidi Budi Sukamaju berbasis multimedia berikut ini.

3.5.1 Flowchart Menu Utama

Flowchar

t menu utama menjelaskan bagan dari halaman menu utama

website

. Di

dalam tampilan halaman utama tersebut ada beberapa halaman yang telah

disajikan oleh admin agar dapat dilihat oleh

user

. Dimulai dari

start

masuk ke

halaman pertama yaitu

home

.

Jika

user

memilih halaman

home

maka yang akan muncul adalah menu

dalam

home

. Halaman home terdapat menu-menu yaitu home, about, topics, dan

exercise.

(49)

32

Start

Tampilan Home

Menu Home

Menu About

Menu Topics

Menu Exercise

Selesai

Tampilan Menu Home

Tampilan Menu About

Tampilan Menu Topics

Tampilan Menu Exercise

B

S

B

S

B

S

B

S

Keluar

s

[image:49.595.168.468.80.561.2]

B

Gambar 3.4.1

Flowchart

Menu Utama

3.5.2 Flowchart Menu Admin

Flowchart

ini menjelaskan bagan dari halaman

web administrator

. Untuk masuk

ke halaman ini admin maka akan muncul tampilan halaman admin. Selanjutnya

(50)

33

halaman admin. Terdapat menu materi, jika admin memilih menu materi maka

terdapat pilihan-pilihan lagi dalam menu materi jika tidak maka admin ke menu

video yang terdapat pilihan menu video. Jika admin tidak memilih menu video

maka admin ke menu soal yang terdapat pilihan menu soal didalamnya jika tidak

juga maka ke menu komentar yang berisi komentar-komentar admin, jika tidak

juga maka admin keluar jika tidak maka admin kembali lagi ke tampilan halaman

admin

Mulai

Tampilan Halaman Admin

Menu Materi

Menu Video

Menu Soal

Menu Komentar Materi

Video

Soal

Komentar

Keluar

Selesai Admin

S

B _S

B

B S

S

B S

[image:50.595.134.464.268.717.2]

B

(51)

34

3.5.3 Flowchart Menu Materi

Dalam menu materi, admin dapat menambah, mengedit dan menghapus materi.

Didalam menu materi terdapat tampilan materi, kemudian di dalam materi

terdapat tombol untuk menambahkan materi baru, jika admin tidak ingin

menambah materi maka admin memilih tombol edit materi. Jika admin juga tidak

ingin mengedit maka ke tombol hapus, dalam pilihan hapus admin dapat

menghapus materi. Jika materi dihapus maka video dan soal-soal otomatis juga

terhapus semua. Berikut ini merupakan penjelasan

flowchart

halaman menu

materi

Mulai

Materi

Tampilan Materi

Tambah Materi

Edit Materi

Hapus Materi Simpan

Materi

Simpan Hasil Editan

Hapus Materi

Keluar

Selesai S

S B

B

S

B

[image:51.595.179.433.326.716.2]

B S

(52)

35

3.5.4 Flowchart Menu Video

Berikut ini merupakan penjelasan

flowcahart

menu video. Didalam menu video

terdapat video berdasarkan nama materi yang telah disimpan tadi. Terdapat

materi-materi yang akan dipilih, setelah dipilih maka admin akan melihat materi

tersebut sudah memiliki video atau tidak, jika belum maka admin dapat

menambahkan video, jika sudah maka video tersebut dapat dihapus. Untuk lebih

jelasnya dapat dilihat pada gambar berikut ini.

Mulai

Video

Tampilan Materi

Video

Pilih Materi Video Sudah

ada? Hapus Video

Tambah Video

Keluar

Selesai

Video Dihapus

Video Ditambah B

S

B

S

S B

B

S

[image:52.595.151.519.259.674.2]

B S

(53)

36

3.5.5 Flowchart Menu Soal

Berikut ini merupakan penjelasan

flowchart

menu soal, dimana dalam menu soal

terdapat soal-soal berdasarkan nama materi yang telah disimpan tadi. Pertama

admin memilih materi kemudian terdapat pilihan tambah soal, jika user ingin

menambah soal jika tidak maka menuju pillihan edit soal, soal yang tersimpan

sebelumnya, jika admin tidak ingin mengedit soal maka ke pilihan hapus soal.

Untuk lebih jelasnya dapat dilihat pada gambar berikut ini.

Mulai

Soal

Tampilan Materi

Pilih Materi

Edit Soal

Hapus Soal Simpan Hasil

Editan

Soal Dihapus

Keluar

Selesai B

S S

B Tambah Soal

Simpan Soal

B S

S

B

[image:53.595.144.470.270.701.2]

S B

(54)

37

1.

Tampilan Menu Utama

Pada form ini

user

atau pengunjung setelah membuka

web

aplikasi pembelajaran

ini maka terlihat slider berserta menu-menunya. Dalam setiap menu terdapat

slider,

sub menu

topics

dan

exercises

dan

login admin

. Di dalam sub menu topics

terdapat topik-topik pembahasan. Untuk lebih jelasnya dapat dilihat pada gambar

tampilan berikut ini.

[image:54.595.115.540.277.491.2]

(55)

38

[image:55.595.113.511.107.313.2]

2.

Tampilan Menu Home

Gambar 3.4.7 Tampilan Menu Home

3.

Tampilan Menu

About

Di dalam menu

about

terdapat penjelasan tentang admin. Untuk lebih jelasnya

dapat dilihat pada gambar tampilan menu berikut ini.

[image:55.595.115.514.489.688.2]

(56)

39

4.

Tampilan Menu

Topics

Di dalam menu

topics

ada beberapa pilihan materi daftar materi. Untuk lebih

[image:56.595.114.511.165.361.2]

jelasnya dapat dilihat pada gambar. Tampilan menu

topics

berikut ini.

Gambar 3.4.9 Tampilan Menu

Topics

Untuk dapat melihat video pembelajaran maka pilih salah satu materi yang

disediakan. Setelah di klik maka akan muncul video pembelajaran, pengunjung

juga bisa memberi komentar tentang video tersebut. Untuk lebih jelasnya dapat

dilihat pada gambar tampilan video berikut ini.

[image:56.595.113.514.516.717.2]

(57)

40

5.

Tampilan Menu

Exercise

Di dalam menu

exercise

terdapat materi yang akan diujikan. Pengunjung bisa

membuka latihan/ujian berdasarkan materi yang telah video pembelajaran yang

telah ditonton. Untuk lebih jelasnya dapat dilihat pada gambar tampilan menu

[image:57.595.113.512.249.449.2]

exercise

berikut ini.

(58)

BAB 4

IMPLEMENTASI SISTEM

4.1 Definisi Implementasi Sistem

Implementasi sistem adalah suatu prosedur yang dilakukan untuk menyelesaikan

sistem yang ada dalam dokumen rancangan sistem yang telah disetujui dan telah

diuji, menginstal dan menggunakan sistem baru yang telah diperbaiki. Adapun

langkah-langkah yang dibutuhkan dalam implementasi sistem adalah:

1.

Mendapatkan

software

dan

hardware

yang tepat serta sesuai untuk merancang

website.

2.

Menyelesaikan rancangan sistem.

3.

Menulis, menguji, mengontrol, dan mendokumentasikan

website.

4.

Mendapatkan persetujuan.

4.2 Tujuan Implementasi Sistem

Adapun tujuan dari implementasi sistem ini adalah sebagai berikut:

1.

Menyelesaikan desain sistem yang telah disetujui sebelumnya.

2.

Memastikan bahwa pemakai (

user

) dapat mengoperasikan sistem baru

3.

Menguji apakah sistem baru tersebut sesuai dengan pemakai.

4.

Memastikan bahwa konversi ke sistem baru berjalan yaitu dengan

(59)

42

4.3 Komponen Sistem

Komponen-komponen system yang dibutuhkan dalam membangun aplikasi ini

diantaranya adalah:

a.

Hardware

adalah suatu komponen yang sangat dibutuhkan dalam mewujudkan

sistem yang diusulkan. Dalam hal ini penulis merinci spesifikasi komponen

hardware yaitu:

1.

Sistem Operasi menggunakan windows 7

2.

PC dengan processor intel inside

3.

RAM dengan kapasitas 2.00 GB.

4.

Flash disk 8 GB

5.

Monitor super VGA.

6.

Memory minimal 150MB.

7.

Keyboard.

8.

Mouse.

b.

Software

Hardware

tidak akan pernah memecahkan suatu masalah tanpa adanya komponen

software

. Adapun

software

yang digunakan dalam pembuatan

website

ini adalah :

1.

Sistem Opersai Ms. Windows .

2.

Internet explorer, Mozila firefox, Google Chrome sebagai browser.

3.

Xampp versi 3.1.0

4.

Apache 2.2.18

5.

PHP versi 5.3.5

(60)

43

7.

Sparkol VideoScribe 2.3.0

c.

Brainware

adalah semua pihak yang bertanggung jawab dalam pengembangan

sistem informasi, pemrosesan, dan penggunaan keluaran sistem informasi.

Brainware

dalam sistem informasi terbagi 3 yaitu:

1.

Sistem Analis :

orang yang menganalisa sistem dengan mempelajari

masalah-masalah yang timbul dan menentukan kebutuhan pemakai dan

mengidentifikasi pemecahan yang beralasan.

2.

Programmer : orang yang membuat system dengan menggunakan salah satu

bahasa pemrograman yang dikuasai.

3.

Operator : orang yang memakai sistem.

Ketika telah selesai mengerjakan tahap perancangan sistem, baik dalam

merancang tabel-tabel didalam

database

dengan menggunakan

php Myadmin

maupun dalam merancang halaman-halaman

websit

e. Kini program tersebut dapat

dijalankan.Adapun prosedur penggunaan system secara manual dapat diuraikan

sebagai berikut:

1.

Aktifkan

software

Apache, PHP, dan MySQL yang telah diinstal pada

computer dengan cara mengklik start.

2.

Kemudian buka salah satu aplikasi web browser yang ada pada komputer anda

seperti Mozila firefox.

3.

Lalu ketikan pada alamat website sesuai dengan nama folder dimana

disimpannn, contoh : http://locaslhost/video dalam

address bar

untuk menu

(61)

44

4.

Setelah halaman menu utama terbuka, ada terdapat beberapa pilihan halaman

link yang disajikan untuk user. Pilih salah satu link tersebut.

4.4 Tampilan Menu-menu Website

Pada form ini

user

atau pengunjung setelah membuka

web

aplikasi pembelajaran

ini maka terlihat slider berserta menu-menunya. Dalam setiap menu terdapat

slider,

sub menu

topics

dan

exercises

dan

login admin

. Di dalam sub menu topics

terdapat topik-topik pembahasan. Untuk lebih jelasnya dapat dilihat pada gambar

tampilan berikut ini.

[image:61.595.115.540.372.589.2]

(62)

[image:62.595.113.516.85.285.2]

45

Gambar 4.4.2 Tampilan Menu Home

Di dalam menu

about

terdapat penjelasan tentang admin. Untuk lebih jelasnya

dapat dilihat pada gambar tampilan menu berikut ini.

about

Di dalam menu

topics

ada beberapa pilihan materi daftar materi. Untuk lebih

[image:62.595.113.512.433.632.2]

(63)

[image:63.595.113.512.84.284.2]

46

Topics

Untuk dapat melihat video pembelajaran maka pilih salah satu materi yang

disediakan. Setelah di klik maka akan muncul video pembelajaran, pengunjung

juga bisa memberi komentar tentang video tersebut. Untuk lebih jelasnya dapat

dilihat pada gambar tampilan video berikut ini.

[image:63.595.113.514.490.689.2]

(64)

47

Di dalam menu

exercise

terdapat materi yang akan diujikan. Pengunjung bisa

membuka latihan/ujian berdasarkan materi yang telah video pembelajaran yang

telah ditonton. Untuk lebih jelasnya dapat dilihat pada gambar tampilan menu

[image:64.595.113.512.221.422.2]

exercise

berikut ini.

(65)

BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Dalam penulisan tugas akhir ini telah dijelaskan seluruh proses perancangan

sistem hingga pembuatan media pembelajaran tata bahasa Inggris berbasis

multimedia dan berdasarkan pembahasan dan evaluasi dari bab-bab

sebelumnya, maka dapat diperoleh beberapa kesimpulan sebagai berikut:

1.

Penggunaan dan pemanfaatan aplikasi pembelajaran ini dapat

memberikan kemudahan siswa pada tingkat

primary

atau siapa saja

yang membutuhkan pemembelajaran tanpa adanya guru

2.

Aplikasi pembelajaran ini juga dibuat untuk melatih siswa dalam

pemahaman mengenai materi dengan menjawab beberapa tes yang telah

disediakan sehingga pembelajaran lebih efisien.

3.

Dikarenakan media pembelajaran ini dihubungkan ke

web

, sehingga

materi yang disediakan lebih dinamis dan uptodate (mudah diupdate

oleh admin)

4.

Dengan bantuan

Sparkol VideoScribe

sebagai desain editor video

memudahkan penulis dalam merancang dan mendesain aplikasi

pembelajaran ini.

5.2 Saran

Dari kesimpulan yang telah diambil, maka dapat dikemukakan saran-saran

untuk pengembangan lebih lanjut terhadap media pembelajaran berbasis

(66)

49

1.

Untuk

pengembangan

program

selanjutnya

perlu

dilakukan

pengembangan topik yang lebih luas dan lebih penting, sehingga

informasi yang dimiliki oleh sistem semakin banyak tidak hanya

sebatas beberapa topik.

2.

Pemeliharaan database dan seluruh data lainnya harus selalu dilakukan

agar tidak terjadi kesalahan data saat mengupload data. Database

tersebut berguna untuk menyimpan isi materi yang akan disampaikan,

selain itu dengan adanya database tersebut admin bisa lebih mudah

untuk melakukan perubahan ataupun penambahan isi dan pemanggilan

data ke halaman website serta diharapkan dilakukan pengupdatean

materi.

3.

Interface

website yang masih sederhana sehingga diharapkan

selanjutnya dibuat dengan interface yang lebih menarik oleh pengguna

(67)

BAB 2

LANDASAN TEORI

2.1 Pengertian Komputer

Komputer berasal dari bahasa latin yaitu “computare” yang mengandung arti

menghitung. Para pakar dan peneliti sedikit mendefenisikan terminologi

komputer sebagai berikut :

1.

Menurut Sutedjo, komputer adalah suatu perangkat elektronika yang bekerja

secara terintegrasi dan terkoordinasi yang dapat menerima input, mengolah

dengan prosedur tertentu, baik masukan maupun hasil proses serta

menampilkan hasil proses tersebut .

2.

Menurut Hamacher, komputer adalah mesin penghitung elektronik yang

cepat dan menerima informasi

input

digital. Kemudian memeprosesnya

sesuai dengan program yang tersimpan di memorinya, dan menghasilkan

output

berupa informasi.

3.

Menurut Blissmer computer adalah suatu alat elektronik yang mampu

melakukan beberapa tugas sebagai berikut :

a.

Menerima input ,memproses input tadi sesuai dengan programnya.

b.

Menyimpan perintah-perintah dan hasil dari pengelolahan.

(68)

8

2.1.1 Sistem Komputer

Agar computer dapat digunakan dalam proses pengolahan data, maka haruslah

terbentuk sistem komputer. Tujuan pokok dari sistem komputer adalah

mengolah data untuk menghasilkan informasi. Agar tujuan pokok tersebut

dapat terlaksana, maka harus ada elemen-elemen yang mendukungnya.

Elemen-elemnen dari sistem komputer adalah perangkat keras

(hardware)

,