SlideShare a Scribd company logo
1 of 33
Download to read offline
TUGAS LAPORAN PROYEK APLIKASI
Perpustakaan Online SMK Negri 1 depok
”APPLAUS: DATABASE”
Oleh
Fitra Sani
NISN : 9978496453
Kelas X RPL 1
SMK NEGERI 1 DEPOK
2013
KATA PENGANTAR
Assalamualaikum warahmatullahi wabarokatuh
Allhamdulillahhirabbilalamin banyak nimat yang allah berikan, tetapi sedikit sekali
yang kita ingat. Segala puji hanya layak untuk allah tuhan seru sekalian alam atas
segala berkat,rahmat,taufik, serta hidayahnya yang tiada terkira besarnya, sehingga
kami dapat menyelesaikan laporan hasil aplikasi yang berbasis web yang berjdul
“PERPUSTAKAAN ONLINE SMK NEGERI 1 DEPOK”
Dalam penyusunannya, kami memperoleh banyak bantuan dari berbagai
pihak, karena itu kami mengucapkan terimakasih yang sebesar-besarnya kepada
orangtua dan segenap keluarga besar kami yang telah memberikan dukungan, kasih,
dan kepercayaan yang begitu besar.
Dari sanalah semua kesuksesan ini berawal, semoga semua ini bisa
memberikan sedikit kebahgian dan menuntun pada langkah yang lebih baik lagi.
Meskipun kami berharap isi dari makalah ini bebas dari kekurangan dan keslahan,
namun selalu ada yang kurang. Oleh karena itu, kami mengharapkan kritik dan saran
yang membangun agar laporan ini dapat lebih baik lagi. Akhir kata kami berharap
laporan kami bermanfaat bagi semua pembacanya .
Depok,24 mei 2013
Fitra sani & Nur Fauziah
DAFTAR ISI
KATA PENGANTAR............................................................................................................................v
DAFTAR ISI..........................................................................................................................................vi
DAFTAR TABEL..................................................................................................................................vi
DAFTAR GAMBAR............................................................................................................................vii
BAB I instalasi development softwere....................................................................................................1
I.1. XAMPP....................................................................................................................................1
BAB II. Pembuatanperancangan aplikasi.............................................................................................13
II.1.story board
…………………………………………………………………………………………15
II.1.1IDE (Integrated Development Environment).................................................................19
II.1.2Virtual Server (Apache/ Tomcat)...................................................................................20
II.1.4. Plug Ins........................................................................................................................20
rancangandanRealisasiAplikasi....................................................................................................21
II.2.2. Diagram Flowchart......................................................................................................23
II.2.4. StrukturTabel Basis Data.............................................................................................23
II.4.1. RealisasiAntarMuka (desain interface)
………………………………………………………24
BAB III.Pembuatan aplikasi WEB.......................................................................................................25
III.1.1. Pembuatan project.......................................................................................................27
III.1.2. pembuatan database....................................................................................................28
III.1.3. mengkoneksikan database ke-WEB............................................................................29
BAB VI. Penutup..................................................................................................................................31
1.1 kesimpulan
…………………………………………………………………………………………..32
1.2 saran
……………………………………………………………………………33
BAB I
INSTALASI DEFLOMENT SOFTWERE
1.1 Instalasi softwere XAMPP
Pengertian XAMPP
XAMPP merupakan singkatan dari X (empat sistem oprasi apapun ) Apache ,
My SQL , Php , dan perl . XAMPP merupakan tool, yang menyediakan paket
dalam sebuah perangkat lunak . dalam sebuah paketnya sudah terdapat Apache
(web server) , My SQL (database) , PHP (server web scripting) , Perl , FTP
serfer , PhpMyAdmin , dan berbagai pustaka bantu lainnya .
Dengan menginstal xampp tidak perlu lagi menginstal dan mengkonfigurasi web
gerfer APACHE , Php , dan My SQL secara manual . XAMPP akan
menginstalasi secara otomatis untuk anda . (XAMPP versi 1.7.3)
1. Tampilan instalasi xampp
2. sestelah itu pilih next>.
3. Tampilan selanjutnya klik next .
4. lalu tunggu proses instalasi
5. Selesai . klik finish
BAB II
LANDASAN TEORI
1. Storyboard
Web ini adalah web pelayanan yang berupa perpustakaan online yang memiliki
manfaat sebagai softwere jasa peminjaman buku secara online
2. Penggunaan 1IDE (Integrated Development Environment)
Penggunaan jQuery
Pengertian jQuery | Fitur dan kelebihan jQuery-,
Semenjak dirilis pertama kali pada tahun 2006 oleh john Resig, jQuery telah mencuri
perhatian pada developer web. buktinya, pada tahun-tahun berikutnya jQuery telah banyak
di gunakan oleh website-website terkemuka di dunia seperti Google, microsoft, Intel, Nokia,
Oracle, IBM, DELL, BBC, NBC, ESPN, EASport, Twitter, Facebook, Amazon, Time,
Youtube, Apple, WordPress, Mozilla, Netflix, Digg, Technorati, dan masih banyak lagi..
bahkan website local pun tidak mau ketinggalan,lihat saja detik, Studio21(21cineplex.com),
indosiar, Vivanews, Kompas dan masih banyak lagi.
Dan Sampai saat ini sudah tercatat ada jutaan website yang telah menggunakan jQuery.
untuk lebih jelasnya sobat bisa lait ja di docs.jQuery. jadi jika kita ngaku-ngaku sebagai
seorang developer web belum kenal ama jQuery,waduhhhh bisa dikatain KUPER(kagak
gaul)..oleh karena itu mari sob kita jelajahi dunia jQuery ini dengan penuh keindahan.
JQuery adalah library Javascript yang dibuat untuk memudahkan pembuatan website
dengan HTML yang berjalan di sisi Client. Script JQuery dibuat untuk memudahkan
pengaturan document seperti menyeleksi object dengan element DOM dan membuat
aplikasi dengan AJAX. Jquery juga menyediakan layanan atau support para developers
untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga memungkinkan
para developer website membuat website lebih interaktif dengan animasi, efek – efek, tema
dan widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat
website dinamis atau website aplikasi menjadi Powerfull..!
Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka.
Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET
AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam
kerangka Web Run-Time mereka.
Berikut ini beberapa Fitur yang ada di JQuery :
1. Dalam Pemakaian menggunakan seleksi element DOM, sehingga
website lebih dinamis dan interaktif.
2. JQuery bisa memanipulasi Class pada CSS dan Support CSS 3
3. Event
4. AJAX
5. Efek-efek dan animasi
6. Ekstensi dan Plug-ins
7. Kompatibilitas dengan hampir semua Browser modern
8. Keperluan lain seperti : User Agent, Feature detection dan lainnya
3. Virtual server (tomcat/apache)
Apache Tomcat (atau Jakarta Tomcat atau hanya Tomcat) adalah sebuah servlet kontainer
open source yang dikembangkan oleh Apache Software Foundation (ASF). Tomcat
menerapkan Java Servlet dan JavaServer Pages (JSP) spesifikasi dari Sun Microsystems,
dan menyediakan sebuah "Pure Java" HTTP lingkungan web server untuk menjalankan kode
Java.
Tomcat tidak boleh disamakan dengan server web Apache, yang merupakan implementasi C
dari web server HTTP; kedua server web tidak dibundel bersama. Apache Tomcat mencakup
perangkat untuk konfigurasi dan manajemen, tetapi juga dapat dikonfigurasi dengan
mengedit file konfigurasi XML.
Tomcat versi 4.x dirilis dengan komponen diantaranya Catalina (wadah servlet), Coyote
(konektor HTTP) dan Jasper (mesin JSP).
4. Plug ins
Pengertian plugin adalah program tambahan yang disisipkan atau didaftarkan agar
dikenal oleh browser web, sehingga menambahan kemampuan standar suatu
browser web. Kemampuan tambahan yang diberikan oleh plugin adalah
kemampuan untuk dapat menyajikan suatu komponen multimedia multimedia yang
tidak standar dalam suatu dokumen HTML yang disajikan dalam browser
pengakses web.
5. flowchart
6. Struktur tabel basis data ( database )
Basis data dan teknologinya telah memainkan peran penting seiring dengan
pertumbuhan penggunaan komputer. Basis data telah digunakan pada hampir
seluruh area dimana komputer digunakan, termasuk bisnis, teknik, kesehatan,
hukum, pendidikan dan sebagainya.
Kata basis data dapat didefinisikan sebagai kumpulan data yang saling
berhubungan. Sedangkan kata data dapat didefinisikan sebagai fakta yang
direkam atau dicatat. Sebagai contoh adalah nama, nomor telepon, dan alamat
dari orang-orang yang anda kenal. Anda mungkin telah merekam data ini pada
buku alamat, atau anda dapat menyimpannya dalam disket, menggunakan
komputer personal dan perangkat lunak seperti dBASE IV,
6.Desain interface
interface regestrasi
interface login
interface home
interface tentangkami
BAB III
Pembuatan aplikasi
3. 1. Membuat Database Login Admin
1. Pastikan aplikasi xampp telah terinstall di komputer kamu dan telah kamu
jalankan
2. Buka browser anda, seperti gambar yang ada di bawah ini:
3. buka http://localhost/phpmyadmin/ pada jendela browser anda , maka
akan muncul tampilan sebagai berikut :
4. lalu klik SQL :
6. . Setelah masuk menu SQL, silahkan tulis script (tanpa tanda kutip):
“ create database webfitra “
Lalu klik Go.
7. Setelah klik Go, maka akan muncul proses loading. Setelah proses loading
selesai, maka akan muncul database bernamakan "webfitra"
8. . Setelah database terbuat, selanjutnya adalah membuat table di dalam
database tersebut. Lalu klik database "webfitra” tadi, lalu klik menu SQL
kembali.
9. Setelah masuk menu SQL, silahkan tulis script:
create table login(
no int(3) not null auto_increment,
NISN varchar(100) not null,
password varchar(100) not null,
primary key(no)
)
10. . Setelah meng-klik Go, maka akan muncul proses loading. Setelah proses
loading selesai, maka akan muncul table bernamakan "login" dalam database
"webfitra"
11. . Dalam keadaan ini, table "webfitra" masih dalam keadaan kosong. Untuk
membuat record nama admin pada table "webfitra", maka klik tombol clear.
12. Setelah anda meng-klik clear, otomatis script anda akan terhapus. Untuk
membuat record pada table "alamat", silahkan tulis script seperti di bawah
ini.
insert into alamat values
('','webfitra','webfitra')
Jika sudah, lalu klik Go.
13. Setelah meng-klik Go, maka akan muncul proses loading. Tunggu hingga proses
loading selesai. Dan jika berhasil, klik table login untuk melihat recordnya seperti
tampilan di bawah ini.
14. Dengan ini, kerangka database telah dibuat. Selanjutnya kita akan membuat page
.html login dan menyambungkannya ke database tersebut. Sehingga, sebelum
memasuki website akan ada tampilan page login yang dapat diakses oleh admin
pembuat website itu sendiri sesuai record yang telah diisi pada database tersebut.
Kita memerlukan page login, koneksi database dan koneksi database dengan page
login.
15. Sebelum itu, pastikan kamu telah membuat folder kosong untuk website kamu di
dalam folder installan XAMPP yang berletak di local disk c/xampp/htdocs/ dan buat
folder baru disitu dengan nama yang kamu kehendaki.
16. Mulai membuat koneksi database, masuk ke dalam folder itu dan buat notepad
baru dengan cara klik kanan – lalu pilih New Text Document, ubah namanya
menjadi ”koneksi.php” (tanpa tanda kutip), lalu buka file tersebut ke dalam notepad
dengan cara klik kanan – open with notepad.
17. Setelah file terbuka, ketikkan script tersebut
<?php
mysql_connect("localhost","root","");
mysql_select_db("webfitra");
?>
Setelah script tertulis, save script tersebut dengan cara CTRL + S.
18. Koneksi database telah terbuat, selanjutnya kita membuat koneksi database
dengan page login .html. Buat notepad baru dengan cara yang sama pada step
sebelumnya, lalu ubah namanya menjadi ”ceklogin.php” (tanpa tanda kutip), buka
file tersebut dengan cara yang sama pada step sebelumnya.
19. Setelah file terbuka, ketikkan script tersebut.
<?php
include "koneksi.php" ;
$NISN=$_POST['username'] ;
$password=$_POST['password'] ;
$login="select * from login where NISN='$username' and password='$password'" ;
$sql=mysql_query($login) ;
$query=mysql_num_rows($sql) ;
if(empty($username) || empty ($password))
echo "<script>window.alert('gagal masuk'); window.location('index.php');
</script>" ;
else{
if($query > 0) {
header('location:index.php) ;
} else {
echo "<script>window.alert('gagal masuk'); window.location('index.html');
</script>" ;
}
}
?>
Setelah selesai, save dengan menekan CTRL + S.
20. Dengan ini, kita tinggal membuat page login .html.
3. 3. Membuat Page Menu 1 (login)
Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai
kehendak kamu masing masing.
2. Buatlah notepad baru , lalu ubah namanya menjadi siapa_irwan.html. Ketikkan
script seperti berikut.
<html>
<head>
<title>Perpustakaan Online SMK Negeri 1 Depok</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo">
<div id="logo_text">
<h2>Perpustakaan Online SMK Negeri 1 Depok</h2>
</div>
</div>
</header>
<div id="site_content">
<div id="sidebar_container">
<div class="sidebar">
<h1>Belum punya akun, silahkan <a href="register.php">Sign Up</a></h1>
</div>
</div>
<div class="content">
<h1>Silahkan Login</h1>
<?php echo $response; ?>
<form id="login" method="post">
<div class="form_settings">
<p><span>NISN</span><input class="contact" type="text" name="nis"
id="nis" value="" /></p>
<p><span>Password</span><input class="contact" type="password"
name="pass" id="pass" value="" /></p>
<p style="padding-top: 15px"><span>&nbsp;</span><input class="submit"
type="submit" name="contact_submitted" value="Sign In" /></p>
</div>
</form>
</div>
</div>
<footer>
<p>Perpustakaan Online SMK Negeri 1 Depok</p>
</footer>
</div>
<p>&nbsp;</p>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>
Lalu save dengan menekan tombol CTRL + S
3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozilla
firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini.
3. 4. Membuat Page Menu 2 (registrasi)
Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai
kehendak kamu masing masing.
2. Buatlah notepad baru , lalu ubah namanya menjadi register.php Ketikkan script
seperti berikut.
html>
<head>
<title>Perpustakaan Online SMK Negeri 1 Depok</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo">
<div id="logo_text">
<h2>Perpustakaan Online SMK Negeri 1 Depok</h2>
</div>
</div>
</header>
<div id="site_content">
<div id="sidebar_container">
<div class="sidebar">
</div>
</div>
<div class="content">
<?php
echo $sukses;
?>
<h1>Form Pendaftaran</h1>
<form id="contact" method="post">
<div class="form_settings">
<p><span>NISN</span><input class="contact" type="text" name="nis"
id="nis" value="" /></p>
<p><span>Password</span><input class="contact" type="password"
name="pass" id="pass" value="" /></p>
<p><span>Nama</span><input class="contact" type="text" name="nama"
id="nama" value="" /></p>
<p><span>Email</span><input class="contact" type="text" name="email"
id="email" value="" /></p>
<p><span>HP</span><input class="contact" type="text" name="hp"
id="hp" value="" /></p>
<p><span>Alamat</span><textarea class="contact textarea" rows="5"
cols="50" name="alamat" id="alamat" lang="id"></textarea></p>
<p><span>Jurusan</span>
<select name="jurusan" id="jurusan">
<option value="1">Teknik Kendaraan Ringan</option>
<option value="2">Akomodasi Perhotelan</option>
<option value="3">Rekayasa Perangkat Lunak</option>
<option value="4">Akuntansi</option>
<option value="5">Teknik Sepeda Motor</option>
</select>
</p>
<p><span>Kelas</span>
<select name="kelas" id="kelas">
<?php
for($i=10;$i<13;$i++)
{
for($j=1;$j<3;$j++)
{
echo "<option value="$i-$j">$i-$j</option>";
}
}
?>
</select>
</p>
<p><span>Angkatan</span><input class="contact" type="text"
name="angkatan" id="angkatan" value="" />
</p>
<p style="padding-top: 15px"><span>&nbsp;</span><input class="submit"
type="submit" name="contact_submitted" value="Sign Up" /></p>
</div>
</form>
</div>
</div>
<footer>
<p>Perpustakaan Online SMK Negeri 1 Depok</p>
</footer>
</div>
<p>&nbsp;</p>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>
Lalu save dengan menekan tombol CTRL + S
3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozilla
firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini
3. 5, Membuat Page Menu 3 (home page)
Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai
kehendak kamu masing masing.
2. Buatlah notepad baru , lalu ubah namanya menjadi register.php Ketikkan script
seperti berikut.
html>
<head>
<title>Perpustakaan Online SMK Negeri 1 Depok</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="style2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo">
<div id="logo_text">
<h1>Perpustakaan Online SMK Negeri 1 Depok</h1>
</div>
</div>
<nav>
<div id="menu_container">
<ul class="sf-menu" id="nav">
<li><a href="home.php">Beranda</a></li>
<li><a href="about.php">Tentang Kami</a></li>
<li><a href="#">Daftar Buku</a>
<ul>
<li><a href="daftar_buku.php?kategori=novel">Novel</a></li>
<li><a href="daftar_buku.php?kategori=majalah">Majalah</a></li>
<li><a href="daftar_buku.php?kategori=komputer">Komputer</a></li>
<li><a href="daftar_buku.php?kategori=sains">Sains</a></li>
<li><a href="daftar_buku.php?kategori=umum">Umum</a></li>
</ul>
</li>
<li><a href="logout.php">Keluar</a></li>
</ul>
</div>
</nav>
</header>
<div id="site_content">
<div id="sidebar_container">
<div class="sidebar">
<div id="search">
<div class="searchfield">
<input type="text" name="keyword" id="keyword">
</div>
<div class="searchbtn">
<input type="image" src="images/searchbtn.png" alt="search"
onClick="cariTutorial();">
</div>
<script type="text/javascript">
function cariTutorial(){
var kata_kunci=document.getElementById("keyword").value;
document.location.href="daftar_buku.php?keyword="+kata_kunci;
}
</script>
</div>
<h3>Buku Terbaru</h3>
<h4>Buku Komputer terbaru terbit</h4>
<h5>25 April 2013</h5>
<p>Buku tutorial pemrograman Android telah hadir. Anda penting
membacanya mengingat mobile programming saat ini sedang berkembang.<br />
</p>
</div>
</div>
<div class="content">
<h1>Selamat Datang ke Perpustakaan SMK Negeri 1 Depok</h1>
<p>Perpustakaan SMK Negeri 1 Depok menyediakan berbagai macam buku
yang menarik untuk dibaca oleh semua kalangan. Dari mulai novel,majalah,buku
pelajaran, buku-buku umum, ataupun agama, semuanya tersedia di perpustakaan
ini.</p>
</div>
</div>
<footer>
<p>Perpustakaan Online SMK Negeri 1 Depok</p>
</footer>
</div>
<p>&nbsp;</p>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>
3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozilla
firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini.
3. 5, Membuat Page Menu 4 (tentang kami)
Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai
kehendak kamu masing masing.
2. Buatlah notepad baru , lalu ubah namanya menjadi register.php Ketikkan script
seperti berikut.
<html>
<head>
<title>Perpustakaan Online SMK Negeri 1 Depok</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="style2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo">
<div id="logo_text">
<h1>Perpustakaan Online SMK Negeri 1 Depok</h1>
</div>
</div>
<nav>
<div id="menu_container">
<ul class="sf-menu" id="nav">
<li><a href="home.php">Beranda</a></li>
<li><a href="about.php">Tentang Kami</a></li>
<li><a href="#">Daftar Buku</a>
<ul>
<li><a href="daftar_buku.php?kategori=novel">Novel</a></li>
<li><a href="daftar_buku.php?kategori=majalah">Majalah</a></li>
<li><a href="daftar_buku.php?kategori=komputer">Komputer</a></li>
<li><a href="daftar_buku.phpkategori=sains">Sains</a></li>
<li><a href="daftar_buku.php?kategori=umum">Umum</a></li>
</ul>
</li>
<li><a href="logout.php">Keluar</a></li>
</ul>
</div>
</nav>
</header>
<div id="site_content">
<div id="sidebar_container">
<div class="sidebar">
<div id="search">
<div class="searchfield">
<input type="text" name="keyword" id="keyword">
</div>
<div class="searchbtn">
<input type="image" src="images/searchbtn.png" alt="search"
onClick="cariTutorial();">
</div>
<script type="text/javascript">
function cariTutorial(){
var kata_kunci=document.getElementById("keyword").value;
document.location.href="daftar_buku.php?keyword="+kata_kunci;
}
</script>
</div>
<h3>Buku Terbaru</h3>
<h4>Buku Komputer terbaru terbit</h4>
<h5>25 April 2013</h5>
<p>Buku tutorial pemrograman Android telah hadir. Anda penting
membacanya mengingat mobile programming saat ini sedang berkembang.<br />
</p>
</div>
</div>
<div class="content">
<h1>Tentang Kami</h1>
<p>Perpustakaan SMK Negeri 1 Depok sudah berdiri sejak 2010. Perpustakaan
ini selalu mengalami perkembangan setiap tahunnya.</p>
</div>
</div>
<footer>
<p>Perpustakaan Online SMK Negeri 1 Depok</p>
</footer>
</div>
<p>&nbsp;</p>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>
3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozilla
firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini.
3. 5, Membuat Page Menu 5(daftar buku)
Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai
kehendak kamu masing masing.
2. Buatlah notepad baru , lalu ubah namanya menjadi register.php Ketikkan script
seperti berikut.
html>
<head>
<title>Perpustakaan Online SMK Negeri 1 Depok</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="style2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo">
<div id="logo_text">
<h1>Perpustakaan Online SMK Negeri 1 Depok</h1>
</div>
</div>
<nav>
<div id="menu_container">
<ul class="sf-menu" id="nav">
<li><a href="home.php">Beranda</a></li>
<li><a href="about.php">Tentang Kami</a></li>
<li><a href="#">Daftar Buku</a>
<ul>
<li><a href="daftar_buku.php?kategori=novel">Novel</a></li>
<li><a href="daftar_buku.php?kategori=majalah">Majalah</a></li>
<li><a href="daftar_buku.php?kategori=komputer">Komputer</a></li>
<li><a href="daftar_buku.php?kategori=sains">Sains</a></li>
<li><a href="daftar_buku.php?kategori=umum">Umum</a></li>
</ul>
</li>
<li><a href="logout.php">Keluar</a></li>
</ul>
</div>
</nav>
</header>
<div id="site_content">
<div id="sidebar_container">
<div class="sidebar">
<div id="search">
<div class="searchfield">
<input type="text" name="keyword" id="keyword">
</div>
<div class="searchbtn">
<input type="image" src="images/searchbtn.png" alt="search"
onClick="cariTutorial();">
</div>
<script type="text/javascript">
function cariTutorial(){
var kata_kunci=document.getElementById("keyword").value;
document.location.href="daftar_buku.php?keyword="+kata_kunci;
}
</script>
</div>
<h3>Buku Terbaru</h3>
<h4>Buku Komputer terbaru terbit</h4>
<h5>25 April 2013</h5>
<p>Buku tutorial pemrograman Android telah hadir. Anda penting
membacanya mengingat mobile programming saat ini sedang berkembang.<br />
</p>
</div>
</div>
<div class="content">
<h1>Daftar Buku</h1>
<?php
if(isset($_GET['kategori']))
{
include("koneksi.php");
$jenis=mysql_real_escape_string($_GET['kategori']);
$query="select
judul_buku,pengarang_buku,penerbit_buku,tahun_terbit,jumlah_buku,sampul_buku
from tbl_buku where jenis_buku='$jenis'";
$minta=mysql_query($query)or die();
while($hs=mysql_fetch_array($minta))
{
echo "<h2>".$hs['judul_buku']."</h2>";
echo "<span class="left"><img src="cover_buku/".
$hs['sampul_buku']."" width="80" height="100" /></span>";
echo "<p>";
echo "Pengarang : ".$hs['pengarang_buku']."<br />";
echo "Penerbit : ".$hs['penerbit_buku']."<br />";
echo "Tahun Terbit : ".$hs['tahun_terbit']."<br />";
echo "Stok saat ini: ".$hs['jumlah_buku'];
echo "</p>";
}
}
else if(isset($_GET['keyword']))
{
include("koneksi.php");
$keyword=mysql_real_escape_string($_GET['keyword']);
$query="select
judul_buku,pengarang_buku,penerbit_buku,tahun_terbit,jumlah_buku,sampul_buku
from tbl_buku where judul_buku LIKE '%$keyword%' OR pengarang_buku LIKE
'%$keyword%' OR penerbit_buku LIKE '%$keyword%' OR
tahun_terbit='$keyword' ";
$minta=mysql_query($query)or die();
while($hs=mysql_fetch_array($minta))
{
echo "<h2>".$hs['judul_buku']."</h2>";
echo "<span class="left"><img src="cover_buku/".
$hs['sampul_buku']."" width="80" height="100" /></span>";
echo "<p>";
echo "Pengarang : ".$hs['pengarang_buku']."<br />";
echo "Penerbit : ".$hs['penerbit_buku']."<br />";
echo "Tahun Terbit : ".$hs['tahun_terbit']."<br />";
echo "Stok saat ini: ".$hs['jumlah_buku'];
echo "</p>";
}
}
?>
</div>
</div>
<footer>
<p>Perpustakaan Online SMK Negeri 1 Depok</p>
</footer>
</div>
<p>&nbsp;</p>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>
3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozilla
firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini.
“Perpustakaan online SMK Negeri 1 Depok”
Oleh :
Fitra sani NISN : 9978496453
Tugas Laporan Proyek Aplikasi
Telah diuji sebagai syarat kelulusan mata pelajaran produktif RPL
Semester Genap Tingkat X
Tahun Ajaran 2012/ 2013
di
SMK NEGERI 1 DEPOK
Depok, ....27 mei 2013
Penguji,
________________

More Related Content

What's hot

Buku pemrograman web html-css-javascript
Buku pemrograman web html-css-javascriptBuku pemrograman web html-css-javascript
Buku pemrograman web html-css-javascriptDeka M Wildan
 
Tutorial Penggunaan Laravel
Tutorial Penggunaan LaravelTutorial Penggunaan Laravel
Tutorial Penggunaan LaravelEka Rahmawati
 
Modul web design - studi kasus website portal berita
Modul web design - studi kasus website portal beritaModul web design - studi kasus website portal berita
Modul web design - studi kasus website portal beritaDoni Andriansyah
 
Java web application 2 - membuat template web
Java web application 2 - membuat template webJava web application 2 - membuat template web
Java web application 2 - membuat template webDoni Andriansyah
 
Modul Pemrograman Visual
Modul Pemrograman VisualModul Pemrograman Visual
Modul Pemrograman VisualWahyu Widodo
 
Modul dasar pemrograman web
Modul dasar pemrograman webModul dasar pemrograman web
Modul dasar pemrograman webDeka M Wildan
 
Menjadi webmaster dalam 30 hari
Menjadi webmaster dalam 30 hariMenjadi webmaster dalam 30 hari
Menjadi webmaster dalam 30 hariDidit Septiawan
 
Tugas laporan aplikasi web nova muhdalifah
Tugas laporan aplikasi web nova muhdalifahTugas laporan aplikasi web nova muhdalifah
Tugas laporan aplikasi web nova muhdalifahzakianadalina97
 
Modul pemrograman web
Modul pemrograman webModul pemrograman web
Modul pemrograman webexkun
 
Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSON
Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSONTutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSON
Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSONDimas Prawira
 
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta DatabasenyaTutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta DatabasenyaRCH_98
 

What's hot (19)

Buku pemrograman web html-css-javascript
Buku pemrograman web html-css-javascriptBuku pemrograman web html-css-javascript
Buku pemrograman web html-css-javascript
 
Tutorial Penggunaan Laravel
Tutorial Penggunaan LaravelTutorial Penggunaan Laravel
Tutorial Penggunaan Laravel
 
Laporan Aplikasi Website
Laporan Aplikasi WebsiteLaporan Aplikasi Website
Laporan Aplikasi Website
 
Laporan tugas besar_web
Laporan tugas besar_webLaporan tugas besar_web
Laporan tugas besar_web
 
02 Teknologi Web
02 Teknologi Web02 Teknologi Web
02 Teknologi Web
 
Modul web design - studi kasus website portal berita
Modul web design - studi kasus website portal beritaModul web design - studi kasus website portal berita
Modul web design - studi kasus website portal berita
 
Java web application 2 - membuat template web
Java web application 2 - membuat template webJava web application 2 - membuat template web
Java web application 2 - membuat template web
 
JQURTY
JQURTYJQURTY
JQURTY
 
TEKNOLOGI WEB
TEKNOLOGI WEBTEKNOLOGI WEB
TEKNOLOGI WEB
 
Modul Pemrograman Visual
Modul Pemrograman VisualModul Pemrograman Visual
Modul Pemrograman Visual
 
Java web application 1
Java web application 1Java web application 1
Java web application 1
 
Modul dasar pemrograman web
Modul dasar pemrograman webModul dasar pemrograman web
Modul dasar pemrograman web
 
Menjadi webmaster dalam 30 hari
Menjadi webmaster dalam 30 hariMenjadi webmaster dalam 30 hari
Menjadi webmaster dalam 30 hari
 
Tugas laporan aplikasi web nova muhdalifah
Tugas laporan aplikasi web nova muhdalifahTugas laporan aplikasi web nova muhdalifah
Tugas laporan aplikasi web nova muhdalifah
 
Tutorial ci
Tutorial ciTutorial ci
Tutorial ci
 
Modul pemrograman web
Modul pemrograman webModul pemrograman web
Modul pemrograman web
 
Cara Membuat Web Dasar
Cara Membuat Web DasarCara Membuat Web Dasar
Cara Membuat Web Dasar
 
Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSON
Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSONTutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSON
Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSON
 
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta DatabasenyaTutorial Pembuatan Aplikasi Website Beserta Databasenya
Tutorial Pembuatan Aplikasi Website Beserta Databasenya
 

Viewers also liked

Ideologi dan dasar negara kita adalah pancasila
Ideologi dan dasar negara kita adalah pancasilaIdeologi dan dasar negara kita adalah pancasila
Ideologi dan dasar negara kita adalah pancasilaFitra Sani
 
Tutorial dreamweaver
Tutorial dreamweaverTutorial dreamweaver
Tutorial dreamweaverFitra Sani
 
Tugas kewirausahaan fitra sani
Tugas kewirausahaan fitra saniTugas kewirausahaan fitra sani
Tugas kewirausahaan fitra saniFitra Sani
 
Website evaluation in elt
Website evaluation in eltWebsite evaluation in elt
Website evaluation in eltJair Plateado
 
Rangkuman tentang java
Rangkuman tentang javaRangkuman tentang java
Rangkuman tentang javaFitra Sani
 
Pendistribusian beras bulog
Pendistribusian beras bulogPendistribusian beras bulog
Pendistribusian beras bulogFitra Sani
 
Bab 1laporan kunjungan industri
Bab 1laporan kunjungan industriBab 1laporan kunjungan industri
Bab 1laporan kunjungan industriFitra Sani
 
Modul web programing
Modul web programingModul web programing
Modul web programingFitra Sani
 
Tugas remedial fisika eko santoso power poin
Tugas remedial fisika eko santoso power poinTugas remedial fisika eko santoso power poin
Tugas remedial fisika eko santoso power poinFitra Sani
 
laporan aplikasi
laporan aplikasilaporan aplikasi
laporan aplikasiFitra Sani
 
Manusia dan-alam-semesta-new
Manusia dan-alam-semesta-newManusia dan-alam-semesta-new
Manusia dan-alam-semesta-newFitra Sani
 
Introduction to web design
Introduction to web designIntroduction to web design
Introduction to web designFitra Sani
 
Pengantar desain web
Pengantar desain webPengantar desain web
Pengantar desain webFitra Sani
 

Viewers also liked (15)

Ideologi dan dasar negara kita adalah pancasila
Ideologi dan dasar negara kita adalah pancasilaIdeologi dan dasar negara kita adalah pancasila
Ideologi dan dasar negara kita adalah pancasila
 
Tutorial dreamweaver
Tutorial dreamweaverTutorial dreamweaver
Tutorial dreamweaver
 
Tugas kewirausahaan fitra sani
Tugas kewirausahaan fitra saniTugas kewirausahaan fitra sani
Tugas kewirausahaan fitra sani
 
Website evaluation in elt
Website evaluation in eltWebsite evaluation in elt
Website evaluation in elt
 
Cover
CoverCover
Cover
 
Rangkuman tentang java
Rangkuman tentang javaRangkuman tentang java
Rangkuman tentang java
 
Pendistribusian beras bulog
Pendistribusian beras bulogPendistribusian beras bulog
Pendistribusian beras bulog
 
Nama kelompok
Nama kelompokNama kelompok
Nama kelompok
 
Bab 1laporan kunjungan industri
Bab 1laporan kunjungan industriBab 1laporan kunjungan industri
Bab 1laporan kunjungan industri
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
Tugas remedial fisika eko santoso power poin
Tugas remedial fisika eko santoso power poinTugas remedial fisika eko santoso power poin
Tugas remedial fisika eko santoso power poin
 
laporan aplikasi
laporan aplikasilaporan aplikasi
laporan aplikasi
 
Manusia dan-alam-semesta-new
Manusia dan-alam-semesta-newManusia dan-alam-semesta-new
Manusia dan-alam-semesta-new
 
Introduction to web design
Introduction to web designIntroduction to web design
Introduction to web design
 
Pengantar desain web
Pengantar desain webPengantar desain web
Pengantar desain web
 

Similar to Cover

Aplikasi Jaringan Pendukung Sistem Infrmasi Berbasis Website Sma Arinda Palem...
Aplikasi Jaringan Pendukung Sistem Infrmasi Berbasis Website Sma Arinda Palem...Aplikasi Jaringan Pendukung Sistem Infrmasi Berbasis Website Sma Arinda Palem...
Aplikasi Jaringan Pendukung Sistem Infrmasi Berbasis Website Sma Arinda Palem...JpPhone
 
Tugas i rekayasa web arie firmandani
Tugas i rekayasa web arie firmandaniTugas i rekayasa web arie firmandani
Tugas i rekayasa web arie firmandaniArie Firmandani
 
Tugas 1 (rekayasa web)
Tugas 1 (rekayasa web)Tugas 1 (rekayasa web)
Tugas 1 (rekayasa web)Linda Lestari
 
Xii rpl5 siti muawanah_laporan_ukk
Xii rpl5 siti muawanah_laporan_ukkXii rpl5 siti muawanah_laporan_ukk
Xii rpl5 siti muawanah_laporan_ukkyopitasariotopia125
 
Laporan akhir
Laporan akhirLaporan akhir
Laporan akhiryudhigcgc
 
Langkah langkah memasang konten management sistem dengan mudah
Langkah langkah memasang konten management sistem dengan mudahLangkah langkah memasang konten management sistem dengan mudah
Langkah langkah memasang konten management sistem dengan mudahtukangojek48
 
Tugas-4 REKAYASA WEB
Tugas-4 REKAYASA WEBTugas-4 REKAYASA WEB
Tugas-4 REKAYASA WEBElisanendes
 
Tugas 4 rekayasa web
Tugas 4 rekayasa webTugas 4 rekayasa web
Tugas 4 rekayasa webrizkyripai
 
Laporan Pemrograman API XML dengan PHP-MySQL (Lukie Perdanasari - 1110651187)
Laporan Pemrograman API XML dengan PHP-MySQL (Lukie Perdanasari - 1110651187)Laporan Pemrograman API XML dengan PHP-MySQL (Lukie Perdanasari - 1110651187)
Laporan Pemrograman API XML dengan PHP-MySQL (Lukie Perdanasari - 1110651187)QyeChildist Parth-ll
 
Laporan tugas besar
Laporan tugas besarLaporan tugas besar
Laporan tugas besar1110651055
 

Similar to Cover (20)

Aplikasi Jaringan Pendukung Sistem Infrmasi Berbasis Website Sma Arinda Palem...
Aplikasi Jaringan Pendukung Sistem Infrmasi Berbasis Website Sma Arinda Palem...Aplikasi Jaringan Pendukung Sistem Infrmasi Berbasis Website Sma Arinda Palem...
Aplikasi Jaringan Pendukung Sistem Infrmasi Berbasis Website Sma Arinda Palem...
 
Tugas individu Rekweb 1
Tugas individu Rekweb 1Tugas individu Rekweb 1
Tugas individu Rekweb 1
 
Tugas i rekayasa web arie firmandani
Tugas i rekayasa web arie firmandaniTugas i rekayasa web arie firmandani
Tugas i rekayasa web arie firmandani
 
Module desain web
Module desain webModule desain web
Module desain web
 
Tugas 1 (rekayasa web)
Tugas 1 (rekayasa web)Tugas 1 (rekayasa web)
Tugas 1 (rekayasa web)
 
Xii rpl5 siti muawanah_laporan_ukk
Xii rpl5 siti muawanah_laporan_ukkXii rpl5 siti muawanah_laporan_ukk
Xii rpl5 siti muawanah_laporan_ukk
 
Laporan akhir
Laporan akhirLaporan akhir
Laporan akhir
 
Travel
TravelTravel
Travel
 
Travel
TravelTravel
Travel
 
Langkah langkah memasang konten management sistem dengan mudah
Langkah langkah memasang konten management sistem dengan mudahLangkah langkah memasang konten management sistem dengan mudah
Langkah langkah memasang konten management sistem dengan mudah
 
Tugas-4 REKAYASA WEB
Tugas-4 REKAYASA WEBTugas-4 REKAYASA WEB
Tugas-4 REKAYASA WEB
 
Prasta adriansyah
Prasta adriansyahPrasta adriansyah
Prasta adriansyah
 
Tugas 4 rekayasa web
Tugas 4 rekayasa webTugas 4 rekayasa web
Tugas 4 rekayasa web
 
Mari belajar vue js
Mari belajar vue jsMari belajar vue js
Mari belajar vue js
 
J query
J queryJ query
J query
 
J query.
J query.J query.
J query.
 
J query
J queryJ query
J query
 
J query
J queryJ query
J query
 
Laporan Pemrograman API XML dengan PHP-MySQL (Lukie Perdanasari - 1110651187)
Laporan Pemrograman API XML dengan PHP-MySQL (Lukie Perdanasari - 1110651187)Laporan Pemrograman API XML dengan PHP-MySQL (Lukie Perdanasari - 1110651187)
Laporan Pemrograman API XML dengan PHP-MySQL (Lukie Perdanasari - 1110651187)
 
Laporan tugas besar
Laporan tugas besarLaporan tugas besar
Laporan tugas besar
 

Cover

  • 1. TUGAS LAPORAN PROYEK APLIKASI Perpustakaan Online SMK Negri 1 depok ”APPLAUS: DATABASE” Oleh Fitra Sani NISN : 9978496453 Kelas X RPL 1 SMK NEGERI 1 DEPOK 2013
  • 2. KATA PENGANTAR Assalamualaikum warahmatullahi wabarokatuh Allhamdulillahhirabbilalamin banyak nimat yang allah berikan, tetapi sedikit sekali yang kita ingat. Segala puji hanya layak untuk allah tuhan seru sekalian alam atas segala berkat,rahmat,taufik, serta hidayahnya yang tiada terkira besarnya, sehingga kami dapat menyelesaikan laporan hasil aplikasi yang berbasis web yang berjdul “PERPUSTAKAAN ONLINE SMK NEGERI 1 DEPOK” Dalam penyusunannya, kami memperoleh banyak bantuan dari berbagai pihak, karena itu kami mengucapkan terimakasih yang sebesar-besarnya kepada orangtua dan segenap keluarga besar kami yang telah memberikan dukungan, kasih, dan kepercayaan yang begitu besar. Dari sanalah semua kesuksesan ini berawal, semoga semua ini bisa memberikan sedikit kebahgian dan menuntun pada langkah yang lebih baik lagi. Meskipun kami berharap isi dari makalah ini bebas dari kekurangan dan keslahan, namun selalu ada yang kurang. Oleh karena itu, kami mengharapkan kritik dan saran yang membangun agar laporan ini dapat lebih baik lagi. Akhir kata kami berharap laporan kami bermanfaat bagi semua pembacanya . Depok,24 mei 2013 Fitra sani & Nur Fauziah
  • 3. DAFTAR ISI KATA PENGANTAR............................................................................................................................v DAFTAR ISI..........................................................................................................................................vi DAFTAR TABEL..................................................................................................................................vi DAFTAR GAMBAR............................................................................................................................vii BAB I instalasi development softwere....................................................................................................1 I.1. XAMPP....................................................................................................................................1 BAB II. Pembuatanperancangan aplikasi.............................................................................................13 II.1.story board …………………………………………………………………………………………15 II.1.1IDE (Integrated Development Environment).................................................................19 II.1.2Virtual Server (Apache/ Tomcat)...................................................................................20 II.1.4. Plug Ins........................................................................................................................20 rancangandanRealisasiAplikasi....................................................................................................21 II.2.2. Diagram Flowchart......................................................................................................23 II.2.4. StrukturTabel Basis Data.............................................................................................23 II.4.1. RealisasiAntarMuka (desain interface) ………………………………………………………24 BAB III.Pembuatan aplikasi WEB.......................................................................................................25 III.1.1. Pembuatan project.......................................................................................................27 III.1.2. pembuatan database....................................................................................................28 III.1.3. mengkoneksikan database ke-WEB............................................................................29 BAB VI. Penutup..................................................................................................................................31 1.1 kesimpulan …………………………………………………………………………………………..32 1.2 saran ……………………………………………………………………………33
  • 4. BAB I INSTALASI DEFLOMENT SOFTWERE 1.1 Instalasi softwere XAMPP Pengertian XAMPP XAMPP merupakan singkatan dari X (empat sistem oprasi apapun ) Apache , My SQL , Php , dan perl . XAMPP merupakan tool, yang menyediakan paket dalam sebuah perangkat lunak . dalam sebuah paketnya sudah terdapat Apache (web server) , My SQL (database) , PHP (server web scripting) , Perl , FTP serfer , PhpMyAdmin , dan berbagai pustaka bantu lainnya . Dengan menginstal xampp tidak perlu lagi menginstal dan mengkonfigurasi web gerfer APACHE , Php , dan My SQL secara manual . XAMPP akan menginstalasi secara otomatis untuk anda . (XAMPP versi 1.7.3) 1. Tampilan instalasi xampp 2. sestelah itu pilih next>.
  • 5. 3. Tampilan selanjutnya klik next . 4. lalu tunggu proses instalasi
  • 6. 5. Selesai . klik finish
  • 7. BAB II LANDASAN TEORI 1. Storyboard Web ini adalah web pelayanan yang berupa perpustakaan online yang memiliki manfaat sebagai softwere jasa peminjaman buku secara online 2. Penggunaan 1IDE (Integrated Development Environment) Penggunaan jQuery Pengertian jQuery | Fitur dan kelebihan jQuery-, Semenjak dirilis pertama kali pada tahun 2006 oleh john Resig, jQuery telah mencuri perhatian pada developer web. buktinya, pada tahun-tahun berikutnya jQuery telah banyak
  • 8. di gunakan oleh website-website terkemuka di dunia seperti Google, microsoft, Intel, Nokia, Oracle, IBM, DELL, BBC, NBC, ESPN, EASport, Twitter, Facebook, Amazon, Time, Youtube, Apple, WordPress, Mozilla, Netflix, Digg, Technorati, dan masih banyak lagi.. bahkan website local pun tidak mau ketinggalan,lihat saja detik, Studio21(21cineplex.com), indosiar, Vivanews, Kompas dan masih banyak lagi. Dan Sampai saat ini sudah tercatat ada jutaan website yang telah menggunakan jQuery. untuk lebih jelasnya sobat bisa lait ja di docs.jQuery. jadi jika kita ngaku-ngaku sebagai seorang developer web belum kenal ama jQuery,waduhhhh bisa dikatain KUPER(kagak gaul)..oleh karena itu mari sob kita jelajahi dunia jQuery ini dengan penuh keindahan. JQuery adalah library Javascript yang dibuat untuk memudahkan pembuatan website dengan HTML yang berjalan di sisi Client. Script JQuery dibuat untuk memudahkan pengaturan document seperti menyeleksi object dengan element DOM dan membuat aplikasi dengan AJAX. Jquery juga menyediakan layanan atau support para developers untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga memungkinkan para developer website membuat website lebih interaktif dengan animasi, efek – efek, tema dan widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis atau website aplikasi menjadi Powerfull..! Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka. Berikut ini beberapa Fitur yang ada di JQuery : 1. Dalam Pemakaian menggunakan seleksi element DOM, sehingga website lebih dinamis dan interaktif. 2. JQuery bisa memanipulasi Class pada CSS dan Support CSS 3 3. Event 4. AJAX 5. Efek-efek dan animasi 6. Ekstensi dan Plug-ins 7. Kompatibilitas dengan hampir semua Browser modern 8. Keperluan lain seperti : User Agent, Feature detection dan lainnya 3. Virtual server (tomcat/apache) Apache Tomcat (atau Jakarta Tomcat atau hanya Tomcat) adalah sebuah servlet kontainer open source yang dikembangkan oleh Apache Software Foundation (ASF). Tomcat menerapkan Java Servlet dan JavaServer Pages (JSP) spesifikasi dari Sun Microsystems, dan menyediakan sebuah "Pure Java" HTTP lingkungan web server untuk menjalankan kode Java. Tomcat tidak boleh disamakan dengan server web Apache, yang merupakan implementasi C dari web server HTTP; kedua server web tidak dibundel bersama. Apache Tomcat mencakup perangkat untuk konfigurasi dan manajemen, tetapi juga dapat dikonfigurasi dengan mengedit file konfigurasi XML.
  • 9. Tomcat versi 4.x dirilis dengan komponen diantaranya Catalina (wadah servlet), Coyote (konektor HTTP) dan Jasper (mesin JSP). 4. Plug ins Pengertian plugin adalah program tambahan yang disisipkan atau didaftarkan agar dikenal oleh browser web, sehingga menambahan kemampuan standar suatu browser web. Kemampuan tambahan yang diberikan oleh plugin adalah kemampuan untuk dapat menyajikan suatu komponen multimedia multimedia yang tidak standar dalam suatu dokumen HTML yang disajikan dalam browser pengakses web. 5. flowchart 6. Struktur tabel basis data ( database )
  • 10. Basis data dan teknologinya telah memainkan peran penting seiring dengan pertumbuhan penggunaan komputer. Basis data telah digunakan pada hampir seluruh area dimana komputer digunakan, termasuk bisnis, teknik, kesehatan, hukum, pendidikan dan sebagainya. Kata basis data dapat didefinisikan sebagai kumpulan data yang saling berhubungan. Sedangkan kata data dapat didefinisikan sebagai fakta yang direkam atau dicatat. Sebagai contoh adalah nama, nomor telepon, dan alamat dari orang-orang yang anda kenal. Anda mungkin telah merekam data ini pada buku alamat, atau anda dapat menyimpannya dalam disket, menggunakan komputer personal dan perangkat lunak seperti dBASE IV,
  • 13. BAB III Pembuatan aplikasi 3. 1. Membuat Database Login Admin 1. Pastikan aplikasi xampp telah terinstall di komputer kamu dan telah kamu jalankan 2. Buka browser anda, seperti gambar yang ada di bawah ini: 3. buka http://localhost/phpmyadmin/ pada jendela browser anda , maka akan muncul tampilan sebagai berikut : 4. lalu klik SQL : 6. . Setelah masuk menu SQL, silahkan tulis script (tanpa tanda kutip): “ create database webfitra “ Lalu klik Go. 7. Setelah klik Go, maka akan muncul proses loading. Setelah proses loading selesai, maka akan muncul database bernamakan "webfitra" 8. . Setelah database terbuat, selanjutnya adalah membuat table di dalam database tersebut. Lalu klik database "webfitra” tadi, lalu klik menu SQL kembali.
  • 14. 9. Setelah masuk menu SQL, silahkan tulis script: create table login( no int(3) not null auto_increment, NISN varchar(100) not null, password varchar(100) not null, primary key(no) ) 10. . Setelah meng-klik Go, maka akan muncul proses loading. Setelah proses loading selesai, maka akan muncul table bernamakan "login" dalam database "webfitra" 11. . Dalam keadaan ini, table "webfitra" masih dalam keadaan kosong. Untuk membuat record nama admin pada table "webfitra", maka klik tombol clear. 12. Setelah anda meng-klik clear, otomatis script anda akan terhapus. Untuk membuat record pada table "alamat", silahkan tulis script seperti di bawah ini. insert into alamat values ('','webfitra','webfitra') Jika sudah, lalu klik Go. 13. Setelah meng-klik Go, maka akan muncul proses loading. Tunggu hingga proses loading selesai. Dan jika berhasil, klik table login untuk melihat recordnya seperti tampilan di bawah ini.
  • 15. 14. Dengan ini, kerangka database telah dibuat. Selanjutnya kita akan membuat page .html login dan menyambungkannya ke database tersebut. Sehingga, sebelum memasuki website akan ada tampilan page login yang dapat diakses oleh admin pembuat website itu sendiri sesuai record yang telah diisi pada database tersebut. Kita memerlukan page login, koneksi database dan koneksi database dengan page login. 15. Sebelum itu, pastikan kamu telah membuat folder kosong untuk website kamu di dalam folder installan XAMPP yang berletak di local disk c/xampp/htdocs/ dan buat folder baru disitu dengan nama yang kamu kehendaki. 16. Mulai membuat koneksi database, masuk ke dalam folder itu dan buat notepad baru dengan cara klik kanan – lalu pilih New Text Document, ubah namanya menjadi ”koneksi.php” (tanpa tanda kutip), lalu buka file tersebut ke dalam notepad dengan cara klik kanan – open with notepad. 17. Setelah file terbuka, ketikkan script tersebut <?php mysql_connect("localhost","root",""); mysql_select_db("webfitra"); ?> Setelah script tertulis, save script tersebut dengan cara CTRL + S. 18. Koneksi database telah terbuat, selanjutnya kita membuat koneksi database dengan page login .html. Buat notepad baru dengan cara yang sama pada step sebelumnya, lalu ubah namanya menjadi ”ceklogin.php” (tanpa tanda kutip), buka file tersebut dengan cara yang sama pada step sebelumnya. 19. Setelah file terbuka, ketikkan script tersebut.
  • 16. <?php include "koneksi.php" ; $NISN=$_POST['username'] ; $password=$_POST['password'] ; $login="select * from login where NISN='$username' and password='$password'" ; $sql=mysql_query($login) ; $query=mysql_num_rows($sql) ; if(empty($username) || empty ($password)) echo "<script>window.alert('gagal masuk'); window.location('index.php'); </script>" ; else{ if($query > 0) { header('location:index.php) ; } else { echo "<script>window.alert('gagal masuk'); window.location('index.html'); </script>" ; } } ?> Setelah selesai, save dengan menekan CTRL + S. 20. Dengan ini, kita tinggal membuat page login .html. 3. 3. Membuat Page Menu 1 (login)
  • 17. Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai kehendak kamu masing masing. 2. Buatlah notepad baru , lalu ubah namanya menjadi siapa_irwan.html. Ketikkan script seperti berikut. <html> <head> <title>Perpustakaan Online SMK Negeri 1 Depok</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/modernizr-1.5.min.js"></script> </head> <body> <div id="main"> <header> <div id="logo"> <div id="logo_text"> <h2>Perpustakaan Online SMK Negeri 1 Depok</h2> </div> </div> </header> <div id="site_content"> <div id="sidebar_container"> <div class="sidebar"> <h1>Belum punya akun, silahkan <a href="register.php">Sign Up</a></h1> </div> </div> <div class="content"> <h1>Silahkan Login</h1> <?php echo $response; ?>
  • 18. <form id="login" method="post"> <div class="form_settings"> <p><span>NISN</span><input class="contact" type="text" name="nis" id="nis" value="" /></p> <p><span>Password</span><input class="contact" type="password" name="pass" id="pass" value="" /></p> <p style="padding-top: 15px"><span>&nbsp;</span><input class="submit" type="submit" name="contact_submitted" value="Sign In" /></p> </div> </form> </div> </div> <footer> <p>Perpustakaan Online SMK Negeri 1 Depok</p> </footer> </div> <p>&nbsp;</p> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easing-sooper.js"></script> <script type="text/javascript" src="js/jquery.sooperfish.js"></script> <script type="text/javascript"> $(document).ready(function() { $('ul.sf-menu').sooperfish(); }); </script> </body> </html> Lalu save dengan menekan tombol CTRL + S 3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozilla firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini.
  • 19. 3. 4. Membuat Page Menu 2 (registrasi) Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai kehendak kamu masing masing. 2. Buatlah notepad baru , lalu ubah namanya menjadi register.php Ketikkan script seperti berikut. html> <head> <title>Perpustakaan Online SMK Negeri 1 Depok</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/modernizr-1.5.min.js"></script> </head> <body> <div id="main"> <header> <div id="logo"> <div id="logo_text"> <h2>Perpustakaan Online SMK Negeri 1 Depok</h2> </div> </div> </header> <div id="site_content"> <div id="sidebar_container"> <div class="sidebar">
  • 20. </div> </div> <div class="content"> <?php echo $sukses; ?> <h1>Form Pendaftaran</h1> <form id="contact" method="post"> <div class="form_settings"> <p><span>NISN</span><input class="contact" type="text" name="nis" id="nis" value="" /></p> <p><span>Password</span><input class="contact" type="password" name="pass" id="pass" value="" /></p> <p><span>Nama</span><input class="contact" type="text" name="nama" id="nama" value="" /></p> <p><span>Email</span><input class="contact" type="text" name="email" id="email" value="" /></p> <p><span>HP</span><input class="contact" type="text" name="hp" id="hp" value="" /></p> <p><span>Alamat</span><textarea class="contact textarea" rows="5" cols="50" name="alamat" id="alamat" lang="id"></textarea></p> <p><span>Jurusan</span> <select name="jurusan" id="jurusan"> <option value="1">Teknik Kendaraan Ringan</option> <option value="2">Akomodasi Perhotelan</option> <option value="3">Rekayasa Perangkat Lunak</option> <option value="4">Akuntansi</option> <option value="5">Teknik Sepeda Motor</option> </select> </p> <p><span>Kelas</span> <select name="kelas" id="kelas">
  • 21. <?php for($i=10;$i<13;$i++) { for($j=1;$j<3;$j++) { echo "<option value="$i-$j">$i-$j</option>"; } } ?> </select> </p> <p><span>Angkatan</span><input class="contact" type="text" name="angkatan" id="angkatan" value="" /> </p> <p style="padding-top: 15px"><span>&nbsp;</span><input class="submit" type="submit" name="contact_submitted" value="Sign Up" /></p> </div> </form> </div> </div> <footer> <p>Perpustakaan Online SMK Negeri 1 Depok</p> </footer> </div> <p>&nbsp;</p> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easing-sooper.js"></script> <script type="text/javascript" src="js/jquery.sooperfish.js"></script> <script type="text/javascript"> $(document).ready(function() { $('ul.sf-menu').sooperfish(); });
  • 22. </script> </body> </html> Lalu save dengan menekan tombol CTRL + S 3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozilla firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini 3. 5, Membuat Page Menu 3 (home page) Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai kehendak kamu masing masing. 2. Buatlah notepad baru , lalu ubah namanya menjadi register.php Ketikkan script seperti berikut. html> <head> <title>Perpustakaan Online SMK Negeri 1 Depok</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link href="style2.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/modernizr-1.5.min.js"></script> </head> <body> <div id="main"> <header> <div id="logo"> <div id="logo_text"> <h1>Perpustakaan Online SMK Negeri 1 Depok</h1>
  • 23. </div> </div> <nav> <div id="menu_container"> <ul class="sf-menu" id="nav"> <li><a href="home.php">Beranda</a></li> <li><a href="about.php">Tentang Kami</a></li> <li><a href="#">Daftar Buku</a> <ul> <li><a href="daftar_buku.php?kategori=novel">Novel</a></li> <li><a href="daftar_buku.php?kategori=majalah">Majalah</a></li> <li><a href="daftar_buku.php?kategori=komputer">Komputer</a></li> <li><a href="daftar_buku.php?kategori=sains">Sains</a></li> <li><a href="daftar_buku.php?kategori=umum">Umum</a></li> </ul> </li> <li><a href="logout.php">Keluar</a></li> </ul> </div> </nav> </header> <div id="site_content"> <div id="sidebar_container"> <div class="sidebar"> <div id="search"> <div class="searchfield"> <input type="text" name="keyword" id="keyword"> </div> <div class="searchbtn"> <input type="image" src="images/searchbtn.png" alt="search" onClick="cariTutorial();"> </div>
  • 24. <script type="text/javascript"> function cariTutorial(){ var kata_kunci=document.getElementById("keyword").value; document.location.href="daftar_buku.php?keyword="+kata_kunci; } </script> </div> <h3>Buku Terbaru</h3> <h4>Buku Komputer terbaru terbit</h4> <h5>25 April 2013</h5> <p>Buku tutorial pemrograman Android telah hadir. Anda penting membacanya mengingat mobile programming saat ini sedang berkembang.<br /> </p> </div> </div> <div class="content"> <h1>Selamat Datang ke Perpustakaan SMK Negeri 1 Depok</h1> <p>Perpustakaan SMK Negeri 1 Depok menyediakan berbagai macam buku yang menarik untuk dibaca oleh semua kalangan. Dari mulai novel,majalah,buku pelajaran, buku-buku umum, ataupun agama, semuanya tersedia di perpustakaan ini.</p> </div> </div> <footer> <p>Perpustakaan Online SMK Negeri 1 Depok</p> </footer> </div> <p>&nbsp;</p> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
  • 25. <script type="text/javascript" src="js/jquery.sooperfish.js"></script> <script type="text/javascript"> $(document).ready(function() { $('ul.sf-menu').sooperfish(); }); </script> </body> </html> 3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozilla firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini. 3. 5, Membuat Page Menu 4 (tentang kami) Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai kehendak kamu masing masing. 2. Buatlah notepad baru , lalu ubah namanya menjadi register.php Ketikkan script seperti berikut. <html> <head> <title>Perpustakaan Online SMK Negeri 1 Depok</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link href="style2.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/modernizr-1.5.min.js"></script> </head> <body> <div id="main">
  • 26. <header> <div id="logo"> <div id="logo_text"> <h1>Perpustakaan Online SMK Negeri 1 Depok</h1> </div> </div> <nav> <div id="menu_container"> <ul class="sf-menu" id="nav"> <li><a href="home.php">Beranda</a></li> <li><a href="about.php">Tentang Kami</a></li> <li><a href="#">Daftar Buku</a> <ul> <li><a href="daftar_buku.php?kategori=novel">Novel</a></li> <li><a href="daftar_buku.php?kategori=majalah">Majalah</a></li> <li><a href="daftar_buku.php?kategori=komputer">Komputer</a></li> <li><a href="daftar_buku.phpkategori=sains">Sains</a></li> <li><a href="daftar_buku.php?kategori=umum">Umum</a></li> </ul> </li> <li><a href="logout.php">Keluar</a></li> </ul> </div> </nav> </header> <div id="site_content"> <div id="sidebar_container"> <div class="sidebar"> <div id="search"> <div class="searchfield"> <input type="text" name="keyword" id="keyword"> </div>
  • 27. <div class="searchbtn"> <input type="image" src="images/searchbtn.png" alt="search" onClick="cariTutorial();"> </div> <script type="text/javascript"> function cariTutorial(){ var kata_kunci=document.getElementById("keyword").value; document.location.href="daftar_buku.php?keyword="+kata_kunci; } </script> </div> <h3>Buku Terbaru</h3> <h4>Buku Komputer terbaru terbit</h4> <h5>25 April 2013</h5> <p>Buku tutorial pemrograman Android telah hadir. Anda penting membacanya mengingat mobile programming saat ini sedang berkembang.<br /> </p> </div> </div> <div class="content"> <h1>Tentang Kami</h1> <p>Perpustakaan SMK Negeri 1 Depok sudah berdiri sejak 2010. Perpustakaan ini selalu mengalami perkembangan setiap tahunnya.</p> </div> </div> <footer> <p>Perpustakaan Online SMK Negeri 1 Depok</p> </footer> </div> <p>&nbsp;</p> <script type="text/javascript" src="js/jquery.js"></script>
  • 28. <script type="text/javascript" src="js/jquery.easing-sooper.js"></script> <script type="text/javascript" src="js/jquery.sooperfish.js"></script> <script type="text/javascript"> $(document).ready(function() { $('ul.sf-menu').sooperfish(); }); </script> </body> </html> 3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozilla firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini. 3. 5, Membuat Page Menu 5(daftar buku) Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuai kehendak kamu masing masing. 2. Buatlah notepad baru , lalu ubah namanya menjadi register.php Ketikkan script seperti berikut. html> <head> <title>Perpustakaan Online SMK Negeri 1 Depok</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link href="style2.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/modernizr-1.5.min.js"></script> </head> <body> <div id="main">
  • 29. <header> <div id="logo"> <div id="logo_text"> <h1>Perpustakaan Online SMK Negeri 1 Depok</h1> </div> </div> <nav> <div id="menu_container"> <ul class="sf-menu" id="nav"> <li><a href="home.php">Beranda</a></li> <li><a href="about.php">Tentang Kami</a></li> <li><a href="#">Daftar Buku</a> <ul> <li><a href="daftar_buku.php?kategori=novel">Novel</a></li> <li><a href="daftar_buku.php?kategori=majalah">Majalah</a></li> <li><a href="daftar_buku.php?kategori=komputer">Komputer</a></li> <li><a href="daftar_buku.php?kategori=sains">Sains</a></li> <li><a href="daftar_buku.php?kategori=umum">Umum</a></li> </ul> </li> <li><a href="logout.php">Keluar</a></li> </ul> </div> </nav> </header> <div id="site_content"> <div id="sidebar_container"> <div class="sidebar"> <div id="search"> <div class="searchfield"> <input type="text" name="keyword" id="keyword"> </div>
  • 30. <div class="searchbtn"> <input type="image" src="images/searchbtn.png" alt="search" onClick="cariTutorial();"> </div> <script type="text/javascript"> function cariTutorial(){ var kata_kunci=document.getElementById("keyword").value; document.location.href="daftar_buku.php?keyword="+kata_kunci; } </script> </div> <h3>Buku Terbaru</h3> <h4>Buku Komputer terbaru terbit</h4> <h5>25 April 2013</h5> <p>Buku tutorial pemrograman Android telah hadir. Anda penting membacanya mengingat mobile programming saat ini sedang berkembang.<br /> </p> </div> </div> <div class="content"> <h1>Daftar Buku</h1> <?php if(isset($_GET['kategori'])) { include("koneksi.php"); $jenis=mysql_real_escape_string($_GET['kategori']); $query="select judul_buku,pengarang_buku,penerbit_buku,tahun_terbit,jumlah_buku,sampul_buku from tbl_buku where jenis_buku='$jenis'"; $minta=mysql_query($query)or die(); while($hs=mysql_fetch_array($minta))
  • 31. { echo "<h2>".$hs['judul_buku']."</h2>"; echo "<span class="left"><img src="cover_buku/". $hs['sampul_buku']."" width="80" height="100" /></span>"; echo "<p>"; echo "Pengarang : ".$hs['pengarang_buku']."<br />"; echo "Penerbit : ".$hs['penerbit_buku']."<br />"; echo "Tahun Terbit : ".$hs['tahun_terbit']."<br />"; echo "Stok saat ini: ".$hs['jumlah_buku']; echo "</p>"; } } else if(isset($_GET['keyword'])) { include("koneksi.php"); $keyword=mysql_real_escape_string($_GET['keyword']); $query="select judul_buku,pengarang_buku,penerbit_buku,tahun_terbit,jumlah_buku,sampul_buku from tbl_buku where judul_buku LIKE '%$keyword%' OR pengarang_buku LIKE '%$keyword%' OR penerbit_buku LIKE '%$keyword%' OR tahun_terbit='$keyword' "; $minta=mysql_query($query)or die(); while($hs=mysql_fetch_array($minta)) { echo "<h2>".$hs['judul_buku']."</h2>"; echo "<span class="left"><img src="cover_buku/". $hs['sampul_buku']."" width="80" height="100" /></span>"; echo "<p>"; echo "Pengarang : ".$hs['pengarang_buku']."<br />"; echo "Penerbit : ".$hs['penerbit_buku']."<br />"; echo "Tahun Terbit : ".$hs['tahun_terbit']."<br />"; echo "Stok saat ini: ".$hs['jumlah_buku'];
  • 32. echo "</p>"; } } ?> </div> </div> <footer> <p>Perpustakaan Online SMK Negeri 1 Depok</p> </footer> </div> <p>&nbsp;</p> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easing-sooper.js"></script> <script type="text/javascript" src="js/jquery.sooperfish.js"></script> <script type="text/javascript"> $(document).ready(function() { $('ul.sf-menu').sooperfish(); }); </script> </body> </html> 3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozilla firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini.
  • 33. “Perpustakaan online SMK Negeri 1 Depok” Oleh : Fitra sani NISN : 9978496453 Tugas Laporan Proyek Aplikasi Telah diuji sebagai syarat kelulusan mata pelajaran produktif RPL Semester Genap Tingkat X Tahun Ajaran 2012/ 2013 di SMK NEGERI 1 DEPOK Depok, ....27 mei 2013 Penguji, ________________