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>

<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

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

$('.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';

}

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

});

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