Perancangan Aplikasi Pembelajaran Tata Bahasa Inggris Tingkat Primary Berbasis Multimedia

(1)

L

A

M

P

I

R

A

N

(2)

LISTING PROGRAM

1. index.php

<?php session_start(); ?> <?php

include 'koneksi.php'; $page='';

if (isset($_GET['page'])){ $page=$_GET['page']; }

<!DOCTYPE html> <html lang="en"> <head>

<link

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

<script src="js/jquery.easing.1.3.js"></script>

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

<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"> <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

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

(5)

while ($data=mysql_fetch_array($qry)){ 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 class="clear"> </div>

</div>

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

</footer>

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

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

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

<tr>

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

</tr> <tr>

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

</tr> <tr>

<td>Komentar</td>

</tr> <tr>

</tr> </tbody> </table>

(9)

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

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

<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 } ?> </tbody>

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

<div id="slide"> <div class="slider"> <ul class="items"> <?php

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

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

<?php } ?> </ul> </div>

</div>

<center><ul class="menu">

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

6. ujian.php

<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

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

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

(13)

<?php } ?> </tbody> </table>

7. soal.php

<?php session_start(); ?>

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

<tr>

</tr> <tr>

<tr>

(15)

<tr>

</tbody> </table>

$(document).ready(function(e) { $('#cmda').click(function(e) { $.post('soaljawab.php', {

email:$('#txtemail').val(), materi:$('#txtmateri').val(), jawab:'A'

}, function (data, status){

}); });

/* */

$('#cmdb').click(function(e) { $.post('soaljawab.php', {

email:$('#txtemail').val(), materi:$('#txtmateri').val(), jawab:'B'

}, function (data, status){

(16)

}); /* */

$('#cmdc').click(function(e) { $.post('soaljawab.php', {

email:$('#txtemail').val(), materi:$('#txtmateri').val(), jawab:'C'

}, function (data, status){

}); });

/* */

$('#cmdd').click(function(e) { $.post('soaljawab.php', {

email:$('#txtemail').val(), materi:$('#txtmateri').val(), jawab:'D'

}, function (data, status){

}); });

});

</script>

8. soaljawab.php

<?php session_start(); ?> <?php

include 'koneksi.php';

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

(17)

if (!isset($idsoal)){

$_SESSION['xpurutsoal']=0; }

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{

$qry=mysql_query("insert into tbljawaban (idsoal, materi, email, jwb, st) values ('$idsoal', '$materi', '$email', '$jawab', '$st')");

(18)

if ($qry){

} else{

echo "Terjadi kesalahan!!"; }

}

$_SESSION['akhir']=0;

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

$_SESSION['xpurutsoal']=0; $_SESSION['akhir']='1'; }

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

9. hasil.php

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

<?php

$materi=$_SESSION['pmateri']; $email=$_SESSION['pemail']; $_SESSION['xpurutsoal']=0; $j=0;

$jbenar=0; $jsalah=0;

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

while ($data=mysql_fetch_array($qry)){ $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>

<td>Jumlah Soal</td>

(20)

</tr> <tr>

<td>Jumlah Benar</td>

<tr>

<td>Jumlah Salah</td>

<tr>

<td>Nilai</td>

<tr>

</tr>

</tbody> </table>

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

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

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

});

</script>

(21)

<?php

include 'koneksi.php';

$email=$_POST['email'];

$komentar=$_POST['komentar']; $waktu=date('Y-m-d H:i:s'); $materi=$_POST['materi'];

$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

<tr>

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

</tr> <tr>

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

</tr> <tr>

(22)

<td>Password</td>

</tr> <tr>

</tbody> </table>

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

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

}, function (data, status){ if (data==''){

(23)

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

else{

alert(data); }

}); });

});

</script>

12. administrator/index.php

<?php session_start(); ?> <?php include 'cek.php'; ?>

<?php include '../koneksi.php'; ?> <!DOCTYPE html>

<title>Halaman Administrator</title>

type="text/css" media="all" /> <link rel="stylesheet"

href="codebrush/css/shThemeEclipse.css" type="text/css" media="all" />

(24)

href="codebrush/css/shCoreDefault.css" type="text/css"/> <link rel="stylesheet" type="text/css"

href="css/classicTheme/style.css" /> <style>

input[type="text"], select, textarea{ border:solid 1px #A2A2A2;

}

select{

border:solid 1px #A2A2A2; }

</style>

(25)

</script>

<!--[if lt IE 9]>

</head>

<body>

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

data-target="#sidebar-collapse">

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

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

<!--<li><a href="#"><svg class="glyph stroked male-user"><use xlink:href="#stroked-male-user"></use></svg> Profile</a></li>

(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

<li class="active"><a href="index.php"><svg class="glyph stroked dashboard-dial"><use

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

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

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

$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

}, function (data, status){

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> <div class="panel-body">

(30)

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

<tr>

<td>Jumlah Soal</td>

</tr> <tr>

<tr>

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

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

</tbody> </table>

</div> </div> </div> </div>

(31)

$(document).ready(function(e) { $('#txtmateri').focus();

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

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

$('#cmdsimpan').click(function(e) { var materi=$('#txtmateri').val();

if (materi==''){

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

return false; }

$.post('page/materi/simpan.php', { materi:$('#txtmateri').val(), jlh:$('#txtjlh').val(),

waktu:$('#txtwaktu').val() }, function(data, status){

if (data==''){

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

else{

$.alert({content:data}); }

}); });

});

(32)

17. administrator/page/materi/simpan.php

<?php

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

$materi=$_POST['materi']; $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';

$materi=$_POST['materi'];

(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> <div class="panel-body">

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

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

</tbody> </table>

</div> </div> </div> </div>

$(document).ready(function(e) { $('#txtmateri').focus();

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

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

(35)

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

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

return false; }

$.post('page/materi/update.php', { materi:$('#txtmateri').val(), jlh:$('#txtjlh').val(),

waktu:$('#txtwaktu').val() }, function(data, status){

if (data==''){

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

else{

$.alert({content:data}); }

}); });

});

</script>

20. administrator/page/video/index.php

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

<ul class="list-group"> <?php

(36)

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

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

</div> </div>

21. administrator/page/soal/index.php

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

<ul class="list-group"> <?php

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

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

(37)

</div> </div>

22. administrator/page/komentar/index.php

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

<td width="3%">No</td> <td width="22%">Waktu</td> <td width="62%">Komentar</td> <td width="13%"> </td> </tr>

<?php $no=0;

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

while ($data=mysql_fetch_array($qry)){ $no++;

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

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

} else{

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

?> <tr>

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

</div>

$(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/komentar/hapus.php', { id:nilai

}, function (data, status){ if (data==''){

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

(39)

$.alert({content:data}); }

}); }

}); });

});

</script>

23. logout.php

<?php session_start(); ?> <?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

Yossie,

2011.

Pembelajaran

Berbasis

Multimedia

,

https://yossiekudotcom.wordpress.com/2011/09/27/pembelajaran-berbasis-multimedia/. Diakses 15 Maret 2016, 17: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

sedang berjalan logis. DFD terdiri dari diagram konteks dan diagram rinci.

(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

Soal

(43)

26 Berikut rancangan diagram level 0 Media Pembelajaran tata bahasa Inggris

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 1

Soal

jwbb jwba

jwbc soal

materi jwbd

jwb Idsoal

user pass

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

dalam membangun

database

:

(45)

28 Tabel 3.1 Tabel Admin

No

Field Nama

Data Tipe

Size

Keterangan

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

1 idkomentar*

Integer

11 Id Komentar

(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

Id Balasan Komentar

Tabel 3.5 Tabel Soal

No

Field Nama

Data Tipe

Size

Keterangan

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

1

2

3

4 idjawaban*

idsoal*

jwb

st

Integer

Varchar

Integer

11

1 Id Jawaban

Id Soal

Jawaban

Jawaban Benar/Salah

(47)

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

1

2 idgambar

gambar

Integer

Varchar

11

255 Id Gambar

Nama Gambar

Tabel 3.9 Tabel Slider

No

Field Nama

Data Tipe

Size

Keterangan

1

2

3 idslider

gambar

Keterangan

Integer

Varchar

11

255 Id Slider

Gambar Slider

Keterangan Slider

(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

Keluar

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

B _S

B S

(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

(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

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

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

(55)

38

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.

(56)

39

4. Tampilan Menu

Topics

Di dalam menu

topics

ada beberapa pilihan materi daftar materi. Untuk lebih

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.

(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

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

membuat rencana, mengontrol dan melakukan instalasi baru secara benar.

(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

6. MySQL 5.0.20

(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

utama, kemudaian tekan enter.

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

(62)

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.

Gambar 4.4.3 Tampilan Menu

about

Di dalam menu

topics

ada beberapa pilihan materi daftar materi. Untuk lebih

jelasnya dapat dilihat pada gambar. Tampilan menu

topics

berikut ini.

(63)

46 Gambar 4.4.4 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.

(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

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

multimedia adalah:

(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

program ini.

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

,

perangkat lunak

(software)

, dan pengguna

(brainware).

1. Perangkat keras (

hardware

) adalah peralatan pada system computer yang

secra fisik dapat dilihat dan dapat disentuh.

2. Perangkat lunak

(

software

) adalah program yang berisi perintah-perintah

untuk melakukan pengolahan data.

3. Pengguna

(brainware)

adalah manusia yang terlibat dalam mengoprasikan

serta mengatur system computer.

Ketiga sistem komputer tersebut harus saling berhubungan dan

membentuk satu kesatuan. Perangkat keras (

hardware)

tanpa adanya perangkat

lunak (

software)

, maka tidak akan berfungsi seperti yang diharapkan hanya

berupa benda mati saja

.

Perangkat keras yang telah didukung oleh

perangkat

lunak juga tidak akan berfungsi jika tidak ada manusia yang

mengoprasikannya. Akan tetapi jika ketiga elemen komputer tersebut sudah

berhubungan dan berinteraksi dengan baik, maka kita dapat mengeloh hasil

sesuai yang diharapkan.

(69)

9 2.1.2 Konsep Dasar Pembelajaran

Belajar adalah perubahan dalam tingkah laku (M. Ngalim P, 1997:85) yaitu

proses perubahan perilaku secara aktif, proses mereaksi terhadap semua situasi

yang ada di sekitar individu, proses yang diarahkan pada suatu tujuan, proses

berbuat melalui berbagai pengalaman, proses melihat, mengamati, dan

memahami sesuatu yang dipelajari.

Pembelajaran yang diidentikkan dengan kata “mengajar” berasal dari

kata dasar “ajar” yang berarti petunjuk yang diberikan kepada orang supaya

diketahui (diturut) ditambah dengan awalan “pe” dan akhiran “an menja

di

“pembelajaran”, yang berarti proses, perbuatan, cara mengajar atau

mengajarkan sehingga anak didik mau belajar.

Pembelajaran adalah proses interaksi peserta didik dengan pendidik dan

sumber belajar pada suatu lingkungan belajar. Pembelajaran merupakan

bantuan yang diberikan pendidik agar dapat terjadi proses pemerolehan ilmu

dan pengetahuan, penguasaan kemahiran dan tabiat, serta pembentukan sikap

dan kepercayaan pada peserta didik. Dengan kata lain, pembelajaran adalah

proses untuk membantu peserta didik agar dapat belajar dengan baik.

2.1.3 Konsep Dasar Multimedia

Multimedia diambil dari kata multi dan media. Multi berarti banyak dan media

berarti media atau perantara. Multimedia adalah gabungan dari beberapa unsur

yaitu teks, grafik, suara, video dan animasi yang menghasilkan presentasi yang

menakjubkan. Multimedia juga mempunyai komunikasi interaktif yang tinggi.

Bagi pengguna komputer multimedia dapat diartikan sebagai informasi

(70)

10 komputer yang dapat disajikan melalui audio atau video, teks, grafik dan

animasi.

Multimedia

adalah penggunaan komputer untuk menyajikan dan

menggabungkan teks, suara, gambar, animasi dan video dengan alat bantu

(

tool

) dan koneksi (

link

) sehingga pengguna dapat melakukan navigasi,

berinteraksi, berkarya dan berkomunikasi. Multimedia sering digunakan dalam

dunia hiburan. Selain dari dunia hiburan, Multimedia juga diadopsi oleh

dunia game.

Multimedia dimanfaatkan juga dalam dunia pendidikan dan bisnis. Di

dunia pendidikan, multimedia digunakan sebagai media pengajaran, baik dalam

kelas maupun secara sendiri-sendiri. Di dunia bisnis, multimedia digunakan

sebagai media profil perusahaan, profil produk, bahkan sebagai media kios

informasi dan pelatihan dalam sistem

e-learning

. Ada awalnya multimedia

hanya mencakup media yang menjadi konsumsi indra penglihatan (gambar

diam, teks, gambar gerak video, dan gambar gerak rekaan/animasi), dan

konsumsi indra pendengaran (suara).

2.1.4 Konsep Dasar Perancangan Aplikasi Pembelajaran Berbasis

Multimedia

Konsep Merancang Multimedia merupakan aplikasi multimedia yang akan

dibuat. Untuk dapat merancang konsep dalam membuat aplikasi multimedia

dibutuhkan kreatifitas. Kreatifitas adalah kemampuan untuk menyajikan

gagasan atau ide baru. Sedangkan inovasi merupakan aplikasi

dari gagasan

(71)

11 atau ide baru tersebut. Untuk menciptakan ide yang orisinil tidaklah mudah,

maka dapat digunakan beberapa teknik untuk menciptakan ide, yaitu

penyesuaian (adaptasi), Multimedia yang telah ada dianggap belum sesuai

dengan lingkungan yang dituju.

Merancang Konsep Analisis sistem bekerjasama dengan pemakai,

mungkin juga bekerjasama dengan profesional komunikasi seperti produser,

sutradara, penulis naskah, editor elektronik terlibat dalam merancang konsep

yang menentukan keseluruhan pesan dan membuat aliran (urutan) pada aplikasi

multimedia yang akan dibuat. Untuk dapat merancang konsep dalam membuat

aplikasi multimedia dibutuhkan kreativitas. Kreativitas adalah kemampuan

untuk menyajikan gagasan atau ide baru. Sedangkan inovasi merupakan

aplikasi dari gagasan atau ide baru tersebut. Untuk menciptakan ide yang

orisinil tidaklah mudah, maka dapat digunakan beberapa teknik untuk

menciptakan ide, yaitu penyesuaian (adaptasi).

Multimedia yang telah ada dianggap belum sesuai dengan lingkungan

yang

dituju

walaupun

isinya

telah

sesuai

dengan

lingkungan.

Misalnya multimedia ditujukan ke kalangan kawula muda namun multimedia

yang ada hanya sesuai untuk kalangan orang tua (dari sisi desain tampian,

bahasa dll) pembesaran (maksimasi), Multimedia yang ada dianggap sangat

sederhana, sehingga perlu untuk dikembangkan lebih komplekspengecilan

(minimasi), Multimedia yang ada dianggap terlalu rumit dan sulit untuk

difahami, dimengerti, dioperasikan dll. Sehingga perlu untuk dilakukan.

Penyederhanaan pembalikan (inversi), Multimedia yang telah ada dianggap

(1)

5. Seluruh teman D-3 Teknik Informatika yang memberi dukungan dan bantuan kepada penulis dalam pengerjaan Tugas Akhir ini

6. Teristimewa kepada kedua orang tua penulis, Bapak Tohap Manalu dan Ibu Almaria Nainggolan atas segala kasih sayang, doa, dukungan dan bantuan yang senantiasa diberikan

Akhir kata, penulis berharap semoga Tugas Akhir ini bermanfaat bagi siapa pun yang membacanya. Semoga Tuhan Yang Maha Esa senantiasa memberikan rahmat kepada kita semua. Amin

Medan, Juni 2016 Penulis,

Elsaria Manalu

(2)

ABSTRAK

Perancangan Aplikasi Pembelajaran Tata Bahasa Inggris Tingkat Primary Berbasis Multimedia bertujuan untuk menyediakan pembelajaran yang interaktif mengenai tata bahasa Inggris untuk anak-anak. Aplikasi pembelajaran berbasis multimedia ini memberi daya tarik dan kemudahan dalam pemahaman mengenai tata bahasa Inggris. Pada Proses pembuatan aplikasi ini perangkat lunak yang digunakan adalah XAMPP yang merupakan gabungan dari Apache Web Server, PHP, dan MySQL, VideoScribe dan browser Google Chrome.

(3)

vi DAFTAR ISI

Halaman

Persetujuan ... i

Pernyataan ii Penghargaan ... iii

Abstrak v Daftar Isi... vi

Daftar Tabel ... viii

Daftar Gambar ... ix

Bab 1. Pendahuluan 1.1 Latar Belakang ... 1

1.2 Perumusan Masalah ... 2

1.3 Batasan Masalah ... 3

1.4 Tujuan Penelitian ... 3

1.5 Manfaat Penelitian ... 4

1.6 Metodeologi Penelitian ... 4

1.7 Sistematika Penulisan... 5

BAB 2. LANDASAN TEORI 2.1 Pengertian Komputer 7

2.1.1 Sistem Komputer 8

2.1.2 Konsep Dasar Pembelajaran 9

2.1.3 Konsep Dasar Multimedia 9

2.1.4 Konsep Dasar Perancangan Aplikasi Berbasis Multimedia 10 2.1.5 Metode Tutorial 12 2.2 Bagan Alir (Flowchart) 15 2.3 Pengertian Basis Data (Database) 16 2.4 Internet 16 2.4.1 Jaringan Internet 17 2.4.2 Sekilas Mengenai Web 19 2.4.3 Web Browser 19 2.4.4 Web Server 20 2.5 VideoSribe 21 2.6 PHP 22 2.7 MySQL 23 2.8 Java Script 22 BAB 3. ANALISA PERANCANGAN SISTEM 3.1 Perancangan Sistem ... 24

3.2 Data Flow Diagram (DFD) ... 224 3.3 Perancangan Database ... 227 3.4 Flowchart ... 31

3.4.1 Flowchart Menu Utama ... 31

(4)

3.4.2 Flowchart Menu Admin ... 32

3.4.3 Flowchart Menu Materi ... 34

3.4.2 Flowchart Menu Video ... 35

3.4.4 Flowchart Menu Soal ... 36

BAB 4. IMPLEMENTASI SISTEM 4.1 Defenisi Implementasi Sistem ... 41

4.2 Tujuan Implementasi Sistem ... 241 4.3 Komponen Sistem ... 242 4.4 Tampilan Menu-menu Website ... 44

BAB 5. KESIMPULAN DAN SARAN 5.1 Kesimpulan ... 48 5.2 Saran ... 248

(5)

viii

DAFTAR TABEL

Nomor Judul Halaman Gambar

2.2 Tabel Simbol-Simbol flowchart 15

3.1 Tabel Admin 28

3.2 Tabel Materi 28

3.3 Tabel Video 28

3.4 Tabel Komentar 28

3.5 Tabel Soal 29

3.6 Tabel Jawaban 29

3.7 Tabel Ujian 30

3.8 Tabel Gambar 30

3.9 Tabel Slider 30

(6)

DAFTAR GAMBAR

Nomor Judul Halaman Gambar

3.1.1 Diagram Konteks 25

3.2.2 DFD Level 0 26

3.2.3 DFD Level 1 27

3.4.1 Flowchart Menu Utama 32

3.4.2 Flowchart Menu Administrator 33

3.4.3 Flowchart Menu Materi 34

3.4.4 Flowchart Menu Video 25

3.4.5 Flowchart Menu Soal 36

3.4.6 Tampilan Slider 37

3.4.7 Tampilan Menu Home 38

3.4.8 Tampilan Menu About 38

3.4.9 Tampilan Menu Topics 39

3.4.10 Tampilan Video Pembelajaran 39

3.4.11 Tampilan Menu Exercise 40

4.4.1 Tampilan Slider 44

4.4.2 Tampilan Menu Home 45

4.4.3 Tampilan Menu About 45

4.4.4 Tampilan Menu Topics 46

4.4.5 Tampilan Video Pembelajaran 46

4.5.6 Tampilan Menu Exercise 47