Cover

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

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

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> </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> </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)
2. Buatlah notepad baru , lalu ubah namanya menjadi register.php Ketikkan script
seperti berikut.
html>
<head>
</head>
<body>
<div id="main">
<header>
<div id="logo">
</div>
</div>
</header>

</div>
</div>
<?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> </span><input class="submit"
type="submit" name="contact_submitted" value="Sign Up" /></p>
</div>
</form>
</div>
</div>
<footer>
</footer>
</div>
<p> </p>
});

</script>
</body>
</html>
Lalu save dengan menekan tombol CTRL + S
firefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini
3. 5, Membuat Page Menu 3 (home page)
seperti berikut.
html>
<head>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<header>
<div id="logo">

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

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

});
</script>
</body>
</html>
3. 5, Membuat Page Menu 4 (tentang kami)
seperti berikut.
<html>
<head>
</head>
<body>
<div id="main">

<header>
<div id="logo">
</div>
</div>
<nav>
<ul>
<li><a href="daftar_buku.phpkategori=sains">Sains</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<div id="search">
</div>

</div>
}
</script>
</div>
<h5>25 April 2013</h5>
</p>
</div>
</div>
<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>
</footer>
</div>
<p> </p>

});
</script>
</body>
</html>
3. 5, Membuat Page Menu 5(daftar buku)
seperti berikut.
html>
<head>
</head>
<body>
<div id="main">

<header>
<div id="logo">
</div>
</div>
<nav>
<ul>
<li><a href="daftar_buku.php?kategori=sains">Sains</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<div id="search">
</div>

</div>
}
</script>
</div>
<h5>25 April 2013</h5>
</p>
</div>
</div>
<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>
</footer>
</div>
<p> </p>
});
</script>
</body>
</html>

“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,
________________

Cover

More Related Content

What's hot

Viewers also liked

Similar to Cover

Cover