laporan aplikasi

TUGAS LAPORAN PROYEK APLIKASI

Perpustakaan Online SMK Negri 1 depok

”APPLAUS: DATABASE”

Oleh

Fitra Sani

NISN : 9978496453

Kelas X RPL 1

SMK NEGERI 1 DEPOK2013

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 IINSTALASI 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 IILANDASAN 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 33. 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.

http://upyes.wordpress.com/2013/01/29/cascading-style-sheets-css/

http://upyes.wordpress.com/2013/01/29/hypertext-markup-language-html/

http://docs.jquery.com/site_using_jquery

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

http://localhost/phpmyadmin/

)

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

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)




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

http://www.klikiri.com/wp-content/uploads/2013/01/jquery4.png

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,

________________

Education

laporan aplikasi