Perancangan Website Integritas Bangsa (Learning Center) Menggunakan PHP Dan MySQL

(1)

DEPARTEMEN PENDIDIKAN DAN KEBUDAYAAN UNIVERSITAS SUMATERA UTARA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

Jln. Bioteknologi No. 1 Kampus USU Telp. (061) 8212050-8214920. Fax. (061) 8214290 Medan 20155

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama : Dea Yulianda Pratiwi

Nomor Induk Mahasiswa : 112406028

Judul Tugas Akhir : Perancangan Website Integritas Bangsa

(Learning Center) Menggunakan PHP dan MySQL

Dosen Pembimbing : Drs. Rachmad Sitepu, M.Si

Tanggal Mulai Bimbingan :

Tanggal Selesai Bimbingan :

No TANGGAL BIMBINGAN

PEMBAHASAN ASISTENSI MENGENAI BAB

PARAF DOSEN PEMBIMBING

KETERANGAN

1 2 3 4 5

6

7

 Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan mahasiswa telah selesai

Diketahui, Disetujui,

Program Studi D-3 Teknik Informatika Pembimbing

Fmipa USU

Dr. Elly Rosmaini, M.Si Drs. Rachmad Sitepu, M.Si

(2)

SURAT KETERANGAN Hasil Uji Program Tugas Akhir

Yang bertanda tangan dibawah ini, menerangkan bahwa Mahasiswa Tugas Akhir Program D3 Teknik Informatika :

Nama : DEA YULIANDA PRATIWI

NIM : 112406028

Prog. Studi : DIPLOMA (D3) TEKNIK INFORMATIKA

Judul Tugas Akhir : PERANCANGAN WEBSITE INTEGRITAS BANGSA

(LEARNING CENTER) MENGGUNAKAN PHP DAN MYSQL

Telah melaksanakan test program Tugas Akhir Mahasiswa tersebut di atas pada tanggal……….

Dengan Hasil : Sukses / Gagal

Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran Ujian Meja Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU Medan.

Medan, Mei 2014

Dosen Pembimbing

Drs. Rachmad Sitepu, M.Si

(3)

LISTING PROGRAM

Index.php <html> <head>

<title>Integritas Bangsa (LEARNING CENTER)</title> <link href="header.css" rel="stylesheet" type="text/css"> <style type="text/css">

<!-- #Layer1 {

position:absolute; left:204px;

top:3px; width:809px; height:195px; z-index:1;

line-height: normal; color: #000000;

border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; }

#Layer4 {

position:absolute; left:1068px; top:24px; width:220px; height:83px; z-index:2;

border: thick ridge #EEEEEE; background-color: #0099FF; }

.style1 {

font-family: "Times New Roman", Times, serif; font-size: 14px;

(4)

#Layer6 {

background-color: #0099FF; border: medium double #EEEEEE; }

#Layer2 {

border: medium double #EEEEEE; background-color: #0099FF; }

#Layer3 {

position:absolute; left:1137px; top:120px; width:149px; height:93px; z-index:5; }

--> </style>

<style> #wrapper {

width:920px; height:780px; background:; margin:0px auto; }

(5)

height:200px;

background-color: #FF9900; }

#menu {

height:55px; padding:0px;

background-color: #99FF33; }

#content {

height:1150px;

background-color:#CC0099; background-image: none; }

#left_content {

margin: 20px 3px 5px 3px; padding: 8px;

float: left; height: 780px; width: 300px; border: ;

border-radius :5px 5px 5px 5px; }

#right_content {

float: right; height: 1040px; width: 550px;

border: 1px solid #000000; border-radius :5px 5px 5px 5px; background-color:#CCFFFF;

font-family: Arial, Helvetica, sans-serif; font-size: 16px;

(6)

#footer {

height:20px;

background-color: #C46200; }

.style3 {font-size: 24px} .style6 {font-size: 36px} .style8 {font-size: 18px} .style9 {

font-family: Geneva, Arial, Helvetica, sans-serif; color: #EEEEEE;

text-decoration: blink; }

.style12 {

font-family: Geneva, Arial, Helvetica, sans-serif; font-style: italic;

color: #EEEEEE; font-size: 17px; }

.style13 {

font-family: "Monotype Corsiva"; font-style: italic;

color: #CC0000; font-size: 36px; }

</style>

INTEGRITAS BANGSA</span></span></strong></h2>

<h3 align="center" class="style6" style="color: black; font-family: Times New Roman"> <strong>(Learning Center)</strong></h3>

</div>

<p><span class="style1" style="color: black">Jl. Binjai KM 8,5 No. 16/470 MEDAN KAMPUNG LALANG<br>

(7)

Telp.(061)8451083</span><br> </p>

</div>

<p align="center"><span class="flt1 lp_box2bg"><img src="g/say.jpg" alt="" width="140" height="183" align="left" class="flt1 lp_imgclient" /><span class="flt lp_txtclint style5 style8 style9">Child Speak<br>

</span></span><span class="flt1 lp_box2bg"><span class="flt lp_txtclint style5 style8"><br>

<span class="style12">waktunya generasi muda berbicara bersama Integritas Bangsa </span></span></span><br>

<span class="flt1 lp_box2txt">“<span id="result_box"

lang="en">One hour of fun and intensive, much better and profitable than many years of dreaming and pondering.</span>”<br />

<span style="float:right; color:#F3FF9F;">- John Ambrose</span></span></p>

</div>

function showTime() { var a_p = "";

var today = new Date();

var curr_hour = today.getHours(); var curr_minute = today.getMinutes(); var curr_second = today.getSeconds(); if (curr_hour < 12) {

a_p = "AM"; } else {

a_p = "PM"; }

if (curr_hour == 0) { curr_hour = 12; }

if (curr_hour > 12) {

curr_hour = curr_hour - 12; }

(8)

document.getElementById('clock').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p;

}

function checkTime(i) { if (i < 10) {

i = "0" + i; }

return i; }

setInterval(showTime, 500); //-->

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

<li><a href="inggris.php">ENGLISH COURSE</a></li> <li><a href="musik.php">MUSIC COURSE</a></li> <li><a href="play.php">PLAYGROUP & TAMAN KANAK-KANAK</a></li>

<li><a href="galeri.php">GALERI</a></li> <li><a href="kontak.php">CONTACT</a></li> <link href="style1.css" rel="stylesheet" type="text/css">

</ul> </nav> </div>

(9)

<div align="center"><span class="style7">  <span class="style3">STAF PENGAJAR </span> </span><br> <br>

<div id="htmlcaption" style="display: none;"> <em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>. </div>

</div> </p> </div> <br> <div>

<p>Gambar di atas merupakan beberapa dari staf pengajar di Yayasan Ambasador Integritas Bangsa. </p>

<p>Dengan profesionalisme dan dalam bidang masing-masing yang di terapkan pada Integritas Bangsa School bersama-sama mencerdaskan bangsa Indonesia. </p>

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

(10)

<p class="style13"><strong>our services...</strong></p> </span>

<div align="justify"><span class="flt rp_weltxt">Bahasa inggris adalah bahasa yang paling banyak digunakan di dunia. bahasa ini merupakan

bahasa ibu untuk lebih dari 400 juta orang diseluruh dunia. dalam setiap hari jutaan orang menggunakan bahasa inggris di tempat kerja maupun di

kehidupan sosial. Ketika kepala pemerintahan bertemu, Bahasa inggris adalah bahasa yang paling sering digunakan. Dan ketika orang-orang dari bangsa yang berbeda saling bertemu, bahasa inggris adalah satu-satunya bahasa penghubung yang digunakan oleh mereka. <br>

<br>

Kami memberikan pelayanan terbaik untuk meningkatkan

pengetahuan siswa dalam hal ini adalah memperlancar komunikasi dalam bahasa internasional yaitu bahasa inggris. kami menyediakan pelayanan diskusi dengan staf pengajar dan para siswa membentuk sebuah forum diskusi diluar kegiatan akademik di Integritas Bangsa dengan menggunakan bahasa inggris (conversation) untuk melatih kelancaran dalam berbahasa asing<br>

<br>

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

<div align="justify"> <p class="flt

rp_weltxt">... ...</p>

<p class="flt rp_weltxt"><img src="g/tesss.jpeg" alt="" width="148" height="108" align="left" class="flt1 rp_abacus" />Proses mendengar musik merupakan salah satu bentuk komunikasi afektif dan memberikan pengalaman emosional. Emosi yang merupakan suatu pengalaman subjektif yang inherent terdapat pada setiap manusia. Untuk dapat merasakan dan menghayati serta mengevaluasi makna dari interaksi dengan lingkungan, ternyata dapat dirangsang dan dioptimalkan

perkembangannya melalui musik sejak masa dini. Efek atau suasana perasaan dan emosi baik persepsi, ekspresi, maupun kesadaran pengalaman

emosional, secara predominan diperantarai oleh hemisfer otak kanan. Artinya, hemisfer ini memainkan peran besar dalam proses perkembangan emosi, yang sangat penting bagi perkembangan sifat-sifat manusia yang manusiawi.<br>

<br>

(11)

seseorang untuk dapat berkomunikasi dengan baik dan manusiawi dengan orang lain merupakan percampuran (blending antara otak kanan dan kiri).<br>

</div> <p><br> </p>

</p>

</div> </div>

</div> </div> </body> </html>

Inggris.php <html> <head>

<!-- #Layer1 {

(12)

border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; }

#Layer4 {

border: thick ridge #EEEEEE; background-color: #0099FF; }

.style1 {

}

#Layer6 {

background-color: #0099FF; font-style: normal;

border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-style: none; border-right-style: dashed; border-bottom-style: none; border-left-style: none; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; }

#Layer2 {

(13)

width:805px; height:711px; z-index:4;

#Layer3 {

border: medium none #EEEEEE; }

#Layer5 {

background-color: #800000; border: medium solid #EEEEEE; }

#Layer7 {

(14)

--> </style>

<style> #wrapper {

#header {

height:200px;

#menu {

#content {

height:1170px;

background-color:#800000;

}

#footer {

height:20px;

(15)

font-size: 24px; font-weight: bold; font-style: italic; }

</style> </head>

</div>

(SIMP. PINANG BARIS)<br> Telp.(061)8451083</span><br> </p>

</div>

<li><a href="inggris.php">ENGLISH COURSE</a></li> <li><a href="musik.php">MUSIC COURSE</a>

<li><a href="play.php">PLAYGROUP & TAMAN KANAK-KANAK</a></li>

<li><a href="galeri.php">GALERI</a> </li> <li><a href="kontak.php">CONTACT</a></li> </li>

</ul> </nav> </div>

(16)

         &nbs p;IB <em>Integritas Bangsa</em> menyediakan beragam kursus bahasa Inggris bagi kelompok usia yang berbeda-beda. Mulai dari program kursus bahasa Inggris untuk anak-anak, remaja dan dewasa, serta pelatihan bahasa Inggris untuk perusahaan, semua bisa Anda temukan di Integritas Bangsa School.</p>

<p

align="justify">        &nbs p; IB <em>Integritas Bangsa</em> menyediakan serangkaian program <strong>kursus bahasa inggris untuk anak - anak</strong> untuk memenuhi kebutuhan belajar anak dari kelompok usia yang berbeda. Anak usia 4 tahun sudah dapat bergabung dengan program Small Stars dari IB. Sedangkan bagi anak berusia 7-9 tahun, tersedia program High Flyers.</p>

<p

align="justify">        &nbs p;  Program<strong> kursus bahasa ingris untuk

remaja</strong> di IB <em>Integrita Bangsa</em> dibedakan menjadi program Trailblazers untuk remaja berusia 10-13 tahun dan program Frontrunner untuk remaja berusia 14 tahun keatas. Selain kedua program ini, para remaja juga bisa mengikuti program Conversation Club untuk meningkatkan kemampuan berbahasa Inggris lisan dan International Exams Preparation untuk mempersiapkan diri mengikuti berbagai ujian

internasional.</p> </div>

<div id="Layer7"> <p

align="justify">        &nbs p;Selain untuk anak-anak dan remaja, IB <em>Integritas Bangsa</em> juga menyediakan rangkaian <strong>kursus bahasa inggris untuk

dewasa</strong> dan <strong>pelatihan bahasa inggris untuk

(17)

<p

align="justify">        &nbs p;Produk inovatif IB dibangun berdasarkan sistem Efekta. Sistem ini

merupakan gabungan sempurna antara teknik pengajaran terbaik dan teknologi mutakhir. Guru berpengalaman dan bersertifikasi memberikan pengajaran di dalam kelas menggunakan teknologi pendukung terkini. Pembelajaran di dalam kelas ini juga didukung oleh tutorial online iLAB yang dapat diakses kapan saja, di mana saja. </p>

<p align="justify"><strong><em>" Temukan program yang sesuai dengan kelompok usia dan tingkat kemampuan Anda di Integritas Bangsa! "</em></strong></p>

</div>

<p><span class="style16">Beragam Kursus Bahasa Inggris di IB </span></p>

</div> </div>

</div> </div>

Musik.php <html> <head>

<!-- #Layer1 {

(18)

color: #000000;

#Layer4 {

background-color: #0099FF; border: thick ridge #EEEEEE; }

.style1 {

}

#Layer6 {

background-color: #0099FF; border: thick double #EEEEEE; font-style: italic;

}

#Layer2 {

(19)

#Layer3 {

background-color: #CC0099; border: medium solid #EEEEEE; }

#Layer5 {

#Layer7 {

--> </style>

<style> #wrapper {

(20)

{

height:200px;

#menu {

#content {

height:1050px;

background-color:#CC0099;

}

#left_content {

wmargin: 20px 40px 20px 40px; padding: 8px;

float: left; height: 780px; width: 300px; border: ;

border-radius :5px 5px 5px 5px; font-family: "Monotype Corsiva"; font-size: 18px;

text-transform: capitalize; color: #EEEEEE;

font-style: italic; font-variant: normal; border: thin none #000000; }

#right_content {

(21)

background-color:#0099FF;

font-style: normal; line-height: normal; color: #EEEEEE; }

#footer {

height:20px;

.style3 {font-size: 24px} .style6 {

font-size: 36px;

font-family: "Monotype Corsiva"; color: #0099FF;

font-style: italic; }

font-family: Geneva, Arial, Helvetica, sans-serif; color: #EEEEEE;

text-decoration: blink; }

.style12 {

font-family: Geneva, Arial, Helvetica, sans-serif; font-style: italic;

color: #EEEEEE; }

.style13 {

font-family: "Monotype Corsiva"; font-style: italic;

color: #CC0000; font-size: 36px; }

.style14 {font-size: 36px} </style>

</head>

<h2 align="center" style="color: black"; font-family: Times New

(22)

</div>

</div>

<div align="center"><span class="style6"></span><span

class="style6">Violin</span><br> <br>

</div>

<div align="center"><img src="g/tess.jpeg" width="113" height="150" align="left"> <p>Integritas Bangsa menyediakan les musik salah satunya adalah biola (violin). </p>

<p>Semua pelajaran yang kami berikan didukung dengan teori, praktek serta ear training (pelatihan ketajaman telinga) untuk membentuk murid-murid kami menjadi musisi handal.</p>

</div> </div>

<p align="center"><span class="style6">Piano</span></p>

<p align="justify"><img src="g/piano.jpg" width="116" height="157" align="left">Integritas Bangsa menawarkan pelajaran piano bagi anak dan dewasa. Kursus les piano yang kami berikan akan disesuaikan dengan keadaan dan tingkat kemampuan Anda, sehingga akan membuahkan hasil yang optimal bagi setiap orang. Selain memberikan pelajaran piano. Semua pelajaran yang kami berikan didukung dengan teori, praktek serta ear training (pelatihan ketajaman telinga) untuk membentuk murid-murid kami menjadi musisi handal.</p>

</div>

<p align="center"><span class="style6">Guitar</span></p> </div>

(23)

Sekolah Gitar Jakarta bisa membuat masyarakat lebih mencintai alat musik gitar.</p>

<p align="center">"Guitar is a mini Orchestra"</p> <p align="center-Beethoven-</p>

</div>

<ul>

<li><a href="play.php">PLAYGROUP & TAMAN

KANAK-KANAK</a></li>

<li><a href="galeri.php">GALERI</a> </li>

<li><a href="kontak.php">CONTACT</a></li> </li>

</ul> </nav> </div>

Bagi anak-anak, musik bahkan memiliki manfaat yang lebih dari hanya sekedar bermain dengan nada. Mulai dari membantu perkembangan otak sampai psikologis, dan itu dapat ditemukan secara khusus pada musik klasik. Ada banyak faktor penting yang dapat memengaruhi perkembangan otak si kecil. Salah satunya adalah musik. Menurut Dr Kuei Pin Yeo, orang Indonesia pertama yang berhasil meraih gelar Doctor dalam bidang seni permainan piano dari Manhattan School of Music, New York menjelaskan bahwa mengenalkan musik pada anak sebaiknya dilakukan sejak dini, karena peran musik sangat besar dalam menstimulasi pertumbuhan jaringan sel otak anak. <br>

</div> <br>

</div> </div>

(24)

Play.php <html> <head>

<!-- #Layer1 {

#Layer4 {

.style1 {

(25)

font-size: 14px; }

#Layer6 {

background-color: #0099FF; border: thick solid #EEEEEE; font-style: italic;

}

#Layer2 {

#Layer3 {

background-color: #FF80C0; border: thick solid #EEEEEE; }

#Layer5 {

background-color: #0099FF; border: thick solid #EEEEEE; }

#Layer7 {

(26)

background-color: #0099FF; border: thick solid #EEEEEE; }

#Layer8 {

top:280px; width:895px; height:405px; z-index:7; }

--> </style>

<style> #wrapper {

#header {

height:200px;

#menu {

#content {

(27)

background-color: #FF80C0;

}

#footer {

height:20px;

font-size: 36px;

font-family: "Monotype Corsiva"; color: #0099FF;

font-style: italic; }

.style14 {font-size: 36px}

.style15 {color: #EEEEEE} </style>

</head>

Roman"><strong><span class="style3"><br> <span class="style14"><br>

</div>

</div>

(28)

<p align="justify"><img src="g/tk9.jpg" width="306" height="144" align="left"><span class="style15">Pendidikan bagi anak usia dini sangat penting , karena saat itu dimulainya pembentukan mental dan karakter semasa kecil atau pada usia 0-5 tahun sebelum masuk sekolah pada tingkat pertama di sekolah dasar (SD). "Ini yang disebut masa masa emas pada si anak" . Tidak hanya bermain di outdoor dan belajar di indoor tetapi kami juga menyediakan perlombaan - perlombaan mewarni, menggambar, dan yang lainnya sehingga anak - anak tidak bosan dalam dunia belajarnya. Dan juga Integritas bangsa mendidik anak - anak tidak hanya bermain tetapi juga sambil belajar memperkenalkan dunia luar agar mereka tau mau jadi apa nantinya. Gambar disamping adalah salau satu contoh dimana mereka sedang berakting layaknya sebagai polisi seperti yang dicita - citakannya. melalui pendidikan pra sekolah ini, selain mental, seoarang anak dipersiapkan secara matang untuk bersaing, mempunyai ketrampilan tersendiri, menjadi seorang pemipin yang handal, dan berani tampil ditengah-tengah masyarakat.</p>

<p align="justify"> <img src="g/tk45.jpg" width="233" height="155" align="left"><span class="style15">Upaya promosi kesehatan yang ditujukan untuk meningkatkan status/ derajad kesehatan yang optimal. Sasarannya adalah anak - anak yang sehat. Agar anak - anak mampu meningkatkan kesehatannya, kelompok anak sehat meningkat dan kelompok anak sakit menurun. Bentuk kegiatannya adalah pendidikan kesehatan tentang cara memelihara kesehatan. Integritas Bangsa menyediakan gratis pemeriksaan kesehatan untuk anak - anak secara berkala oleh dokter. Dengan begitu dapat mencega penghambatan dalam proses belajar - mengajar yang dikarenakan sakit. </p>

</div>

</a>

(29)

</div>

<ul>

</ul> </nav> </div>

</div> </div>

(30)

<?php

error_reporting(null);

@$operasi = $_POST['operasi']; $int_id=$_POST['id'];

$var_nama=$_POST['nama']; $var_email=$_POST['email']; $var_saran=$_POST['saran'];

if (strtolower($operasi) == "kirim") { include'koneksi.php';

mysql_query("INSERT INTO `buku` VALUES

('$int_id','$var_nama','$var_email','$var_saran')"); }

?> <html> <head>

<!-- #Layer1 {

#Layer4 {

(31)

z-index:2;

.style1 {

color: #000000; }

#Layer6 {

background-color: #0099FF; border: medium double #000000; font-style: italic;

}

#Layer2 {

#Layer3 {

#Layer5 {

(32)

height:292px; z-index:5;

#Layer7 {

background-color: #0099FF; border: medium solid #EEEEEE; color: #000000;

}

.style22 {

font-size: 18px; font-weight: bold; }

#Layer8 {

position:absolute; left:1135px; top:122px; width:155px; height:51px; z-index:7; }

--> </style>

<style> #wrapper {

(33)

height:200px;

#menu {

#content {

height:1330px;

background-color: #BBBBBB;

}

#left_content {

float: left; height: 1250px; width: 450px;

border: 1px solid #000000; border-radius :5px 5px 5px 5px; font-family: "Monotype Corsiva"; font-size: 24px;

text-transform: capitalize; color: #000000;

font-style: italic; font-variant: normal; border: thin none #000000; background-color:#0099FF; }

#right_content {

(34)

background-color:#DDDDDD;

font-style: normal; line-height: normal; color: #000000; }

#footer {

height:20px;

.style3 {font-size: 24px} .style14 {font-size: 36px} .style20 {font-size: 16px} </style>

#container { width:400px; padding:1px 2px; margin:5px auto; border:0px solid #555; box-shadow:0px 0px 2px #555; }

input[type="text"] { width:200px; }

input[type="text"], textarea { padding:5px; margin:2px 0px; border: 1px solid #777; }

input[type="submit"], input[type="reset"] { padding: 5px 20px; margin:2px 0px; font-weight:bold; cursor:pointer; }

#error { border:1px solid red; background:#ffc0c0; padding:5px; } </style>

span.label

{color:black;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}

span.c1

{cursor:hand;color:black;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}

span.c2

{cursor:hand;color:red;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}

span.c3

{cursor:hand;color:#b0b0b0;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 12px Arial} .style23 {font-size: 16}

--> </style>

(35)

<!-- Begin

function maxDays(mm, yyyy){ var mDay;

if((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)){ mDay = 30;

} else{

mDay = 31 if(mm == 1){

if (yyyy/4 - parseInt(yyyy/4) != 0){ mDay = 28

} else{

mDay = 29 }

} }

return mDay; }

function changeBg(id){

if (eval(id).style.backgroundColor != "blue"){ eval(id).style.backgroundColor = "blue" }

else{

eval(id).style.backgroundColor = "#ffffff" }

}

function writeCalendar(){ var now = new Date var dd = now.getDate() var mm = now.getMonth() var dow = now.getDay() var yyyy = now.getFullYear()

var arrM = new

Array("January","February","March","April","May","June","July","August","Septemb er","October","November","December")

var arrY = new Array() for (ii=0;ii<=4;ii++){ arrY[ii] = yyyy - 2 + ii }

var arrD = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")

(36)

text = "<form name=calForm>" text += "<table border=5>" text += "<tr><td>"

text += "<table width=100%><tr>" text += "<td align=left>"

text += "<select name=selMonth onChange='changeCal()'>" for (ii=0;ii<=11;ii++){

if (ii==mm){

text += "<option value= " + ii + " Selected>" + arrM[ii] + "</option>" }

else{

text += "<option value= " + ii + ">" + arrM[ii] + "</option>" }

}

text += "</select>" text += "</td>"

text += "<td align=right>"

text += "<select name=selYear onChange='changeCal()'>" for (ii=0;ii<=4;ii++){

if (ii==2){

text += "<option value= " + arrY[ii] + " Selected>" + arrY[ii] + "</option>" }

else{

text += "<option value= " + arrY[ii] + ">" + arrY[ii] + "</option>" }

}

text += "</select>" text += "</td>"

text += "</tr></table>" text += "</td></tr>" text += "<tr><td>"

text += "<table border=5>" text += "<tr>"

for (ii=0;ii<=6;ii++){

text += "<td align=center><span class=label>" + arrD[ii] + "</span></td>" }

text += "</tr>" aa = 0

for (kk=0;kk<=5;kk++){ text += "<tr>" for (ii=0;ii<=6;ii++){

text += "<td align=center><span id=sp" + aa + "

onClick='changeBg(this.id)'>1</span></td>" aa += 1

}

(37)

}

text += "</table>" text += "</td></tr>" text += "</table>" text += "</form>" document.write(text) changeCal()

}

function changeCal(){ var now = new Date var dd = now.getDate() var mm = now.getMonth() var dow = now.getDay() var yyyy = now.getFullYear()

var currM = parseInt(document.calForm.selMonth.value) var prevM

if (currM!=0){ prevM = currM - 1 }

else{

prevM = 11 }

var currY = parseInt(document.calForm.selYear.value) var mmyyyy = new Date()

mmyyyy.setFullYear(currY) mmyyyy.setMonth(currM) mmyyyy.setDate(1)

var day1 = mmyyyy.getDay() if (day1 == 0){

day1 = 7 }

var arrN = new Array(41) var aa

for (ii=0;ii<day1;ii++){

arrN[ii] = maxDays((prevM),currY) - day1 + ii + 1 }

aa = 1

for (ii=day1;ii<=day1+maxDays(currM,currY)-1;ii++){ arrN[ii] = aa

aa += 1 }

aa = 1

for (ii=day1+maxDays(currM,currY);ii<=41;ii++){ arrN[ii] = aa

(38)

for (ii=0;ii<=41;ii++){

eval("sp"+ii).style.backgroundColor = "#FFFFFF" }

var dCount = 0

for (ii=0;ii<=41;ii++){

if (((ii<7)&&(arrN[ii]>20))||((ii>27)&&(arrN[ii]<20))){ eval("sp"+ii).innerHTML = arrN[ii]

eval("sp"+ii).className = "c3" }

else{

eval("sp"+ii).innerHTML = arrN[ii] if ((dCount==0)||(dCount==6)){ eval("sp"+ii).className = "c2" }

else{

eval("sp"+ii).className = "c1" }

if ((arrN[ii]==dd)&&(mm==currM)&&(yyyy==currY)){ eval("sp"+ii).style.backgroundColor="#90EE90" }

}

dCount += 1 if (dCount>6){ dCount=0 }

} }

// End --> </script> </head>

Roman"><strong><span class="style3"><br> <span class="style14"><br>

</div>

(39)

</p> </div>

function showTime() { var a_p = "";

var today = new Date();

var curr_hour = today.getHours(); var curr_minute = today.getMinutes(); var curr_second = today.getSeconds(); if (curr_hour < 12) {

a_p = "AM"; } else {

a_p = "PM"; }

if (curr_hour == 0) { curr_hour = 12; }

if (curr_hour > 12) {

curr_hour = curr_hour - 12; }

curr_hour = checkTime(curr_hour); curr_minute = checkTime(curr_minute); curr_second = checkTime(curr_second);

document.getElementById('clock').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p;

}

function checkTime(i) { if (i < 10) {

i = "0" + i; }

return i; }

setInterval(showTime, 500); //-->

</script> </div>

</div>

(40)

<ul>

</ul> </nav> </div>

<div><span class="style12">Integritas bangsa</div>

<div><span class="style20">Head Office</div>

<h4>Contacts Us</h4> <dl>

<dt class="style20"><dt class="style20">Address :Jl. Binjai KM 8,5 No. 16/470 Medan Kampung Lalang <br>

           &nbs p;  (Simp. Pinang Baris)</dt><br>

(41)

<dt class="style20">Telephone : (061)8451083</dt><br>

<dt class="style20">Email :<a

class="color-2">[email protected]</a></dt> </dl>

<h4>GUESTBOOK</h4> <br>

<p span class="style20">Silahkan isi buku tamu di bawah ini untuk meninggalkan pesan Anda!</p></td>

<tr>

<tr>

<td width="130" height="18" valign="middle"><span class="style20">Nama Lengkap* : </span></td>

<td width="377" valign="middle"><input name="nama" type="text"

id="nama" placeholder="Integritas Bangsa" required size="20"

maxlength="50"></td> </tr>

<tr>

<td height="18" valign="middle"><span class="style20">Email*            &nbs p;   : </span></td>

<td valign="middle"><input name="email" type="text"

id="email" placeholder="[email protected]" required size="20"

maxlength="50"></td> </tr> <tr>

<td height="101" valign="top"><span class="style20">Saran*            &nbs p;   : </span></td>

<tr>

(42)

<tr>

<tr>

</tr> </form> </table>

</div>

  <br>

<br>

<div align="center"><span class="style3">Anda Pengunjung Ke : <?php

if(file_exists("data.txt")) { $PF = fopen("data.txt",'r'); $count = fgets($PF,4096); fclose($PF);

$count++;

$PF = fopen("data.txt",'w'); fputs($PF,$count);

fclose($PF); chop($count);

$nb_digits = max(strlen($count), 6);

$count = substr(" 0000000000".$count, -$nb_digits); echo $count;

}else{

echo "Kosong."; }

?>

(43)

</div>

</div>

<p><strong>PETA LOKASI YAYASAN<br>

</strong><strong>INTEGRITAS BANGSA </strong></p> </div>

</div> </div>

Delete-galeri.php <?php

//koneksi ke database

$conn = mysql_connect('localhost', 'root', ''); mysql_select_db('galeri');

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

$id = (int) $_GET['id'];

$sql = "select * from table_foto where id='$id'"; $result = mysql_query($sql);

if(mysql_num_rows($result) > 0 ){

$data = mysql_fetch_array($result); //delete file

@unlink('upload/'.$data['nama_file']); //delete data di database

mysql_query("delete from foto where id='$id'"); }

}

header("Location: galeri.php");

(44)

<?php

if($_POST){

$update = "update foto set deskripsi='".$_POST['deskripsi']."' "; if($_FILES['file']['size'] > 0 && $_FILES['file']['error'] == 0){

$move = move_uploaded_file($_FILES['file']['tmp_name'],

"upload/".$_FILES['file']['name']); if($move){

$update .= ", nama_file='".$_FILES['file']['name']."'"; }

}

$update .= " where id='".$_POST['id']."'"; mysql_query($update);

header("Location: galeri.php"); exit;

} ?> <html> <head>

<title>Edit Picture</title> </head>

<body>

<?php

$sql = "select * from table_foto where id='".intval($_GET['id'])."'"; $data = mysql_fetch_array(mysql_query($sql));

?>

<img src="upload/<?php echo $data['nama_file'];?>" alt="" width="200"/><br/>

File: <input type="file" name="file" id="file"/><br/>

Deskripsi: <textarea name="deskripsi" id="deskripsi"><?php echo $data['deskripsi'];?></textarea><br/>

</body> </html>

(45)

<title>New Picture</title> </head>

<body>

<form name="form1" action="save-galeri.php" method="post"

enctype="multipart/form-data">

File: <input type="file" name="file" id="file"/><br/>

Deskripsi: <textarea name="deskripsi"

id="deskripsi"></textarea><br/>

</body> </html>

Input.php <?php

error_reporting(null);

include("koneksi.php"); $int_id=$_GET['id'];

$var_nama=$_POST['nama']; $var_email=$_POST['email']; $var_saran=$_POST['saran'];

$query="INSERT INTO `buku`

VALUES('$int_id','$var_nama','$var_email','$var_saran')";

if(mysql_query($query)){

} else{

echo "<p>Data gagal di input: <br /><b>".mysql_error()."</b></p>"; }

?>

Koneksi.php <?php

mysql_connect("localhost", "root", ""); mysql_select_db("tamu");

?>

(46)

<?php

//koneksi ke database

//upload file

if(!empty($_FILES) && $_FILES['file']['size'] > 0 && $_FILES['file']['error'] == 0){ $fileName = $_FILES['file']['name'];

$move = move_uploaded_file($_FILES['file']['tmp_name'],

'upload/'.$fileName); if($move){

//simpan deskripsi dan nama file ke database

$sql = "insert into table_foto (nama_file, deskripsi) values ('$fileName', '".$_POST['deskripsi']."')"; mysql_query($sql);

header("Location: galeri.php"); exit;

} }

Menu.css

#Layer1 {

top:219px; width:321px; height:399px; z-index:1; }

--> </style> </head>

<ul>

<li><a href="play.php">MATHEMATICS</a></li>

<li><a href="galeri.php">PLAYGROUP & TAMAN

(47)

</li> <p> </p> </ul>

</nav>

Dropdown.css *{

margin:1; padding:3;

font-family:times new roman; } /* simple CSS Reset */

nav ul {

list-style:none;

background-image:url(url(url(url(url(url(url(url(-webkit-linear-gradient(top,#ffa500,#ffa500)))))))));

background-color:#0099CC;

box-shadow:0 10px 15px rgba(0,60,0,90);

}

nav ul:after{ content:" "; display:block; clear:both; }

nav ul li{

float:left;

position:relative; }

nav ul li a{

color:black; display:block; font-size:14px; padding:5px 16px; text-decoration:none; }

nav ul ul{

color:black; display:block; visibility:invisible; position:absolute; top:90%;

(48)

}

nav ul ul li{

float:none; }

nav ul ul{

position:right; top:90%;

display:none; /* sembunyikan sub menu */ }

nav ul li:hover > ul{ display:block; }

nav ul li:hover > a, nav ul ul li:hover > a { color :#FF9900;

background-image:url(-webkit-linear-gradient(top,%20#506def,#2041DE)); background-color:#0000FF;

}

js-image-slider.css

#sliderFrame {

position:left; width:200px;

margin:0 auto; /*center-aligned*/ }

#slider, #slider div.sliderInner {

width:195px;height:145px;/* Must be the same size as the slider images */ }

#slider {

background:#fff url(loading.gif) no-repeat 50% 50%; position:relative;

margin:0 auto; /*center-aligned*/ transform: translate3d(0,0,0);

box-shadow: 0px 1px 5px #999999; }

/* image wrapper */

#slider a.imgLink, #slider div.video { z-index:2;

position:absolute;

top:0px;left:0px;border:0;padding:0;margin:0; width:100%;height:100%;

(49)

#slider .video {

background:transparent url(video.png) no-repeat 50% 50%; }

/* Caption styles */

#slider div.mc-caption-bg, #slider div.mc-caption-bg2 { position:absolute;

width:100%; height:auto;

padding:10px 0;/* 10px will increase the height.*/

left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/

bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/

z-index:3;

overflow:hidden; font-size: 0; }

#slider div.mc-caption-bg {

/* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/

background:Black;/* or any other colors such as White, or: background:none; */

}

#slider div.mc-caption-bg2 { background:none;

}

#slider div.mc-caption {

font: bold 14px/20px Arial; color:#EEE;

z-index:4;

text-align:center; background:none; }

#slider div.mc-caption a { color:#FB0; }

#slider div.mc-caption a:hover { color:#DA0;

}

/* --- built-in navigation bullets wrapper ---*/

(50)

top:150px;/* Its position is relative to the #slider */ text-align:center;

background:none; position:relative; z-index:1;

}

/* each bullet */

#slider div.navBulletsWrapper div {

width:11px; height:11px;

font-size:5;color:white;/*hide the index number in the bullet element*/ background:transparent url(bullet.png) no-repeat 0 0;

display:inline-block; *display:inline; zoom:1; overflow:hidden;cursor:pointer;

margin:0 6px;/* set distance between each bullet*/ }

#slider div.navBulletsWrapper div.active {background-position:0 -11px;}

/* --- Others --- */

#slider div.loading {

width:100%; height:100%;

background:transparent url(loading.gif) no-repeat 50% 50%; filter: alpha(opacity=60);

opacity:0.6; position:absolute; left:0;

top:0; z-index:9; }

#slider img, #slider>b, #slider a>b {

position:absolute; border:none; display:none; }

#slider div.sliderInner { overflow:hidden;

-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/