laporan aplikasi

1,125 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,125
On SlideShare
0
From Embeds
0
Number of Embeds
66
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

laporan aplikasi

  1. 1. TUGAS LAPORAN PROYEK APLIKASIPerpustakaan Online SMK Negri 1 depok”APPLAUS: DATABASE”OlehFitra SaniNISN : 9978496453Kelas X RPL 1SMK NEGERI 1 DEPOK2013
  2. 2. KATA PENGANTARAssalamualaikum warahmatullahi wabarokatuhAllhamdulillahhirabbilalamin banyak nimat yang allah berikan, tetapi sedikit sekaliyang kita ingat. Segala puji hanya layak untuk allah tuhan seru sekalian alam atassegala berkat,rahmat,taufik, serta hidayahnya yang tiada terkira besarnya, sehinggakami dapat menyelesaikan laporan hasil aplikasi yang berbasis web yang berjdul“PERPUSTAKAAN ONLINE SMK NEGERI 1 DEPOK”Dalam penyusunannya, kami memperoleh banyak bantuan dari berbagaipihak, karena itu kami mengucapkan terimakasih yang sebesar-besarnya kepadaorangtua dan segenap keluarga besar kami yang telah memberikan dukungan, kasih,dan kepercayaan yang begitu besar.Dari sanalah semua kesuksesan ini berawal, semoga semua ini bisamemberikan 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 saranyang membangun agar laporan ini dapat lebih baik lagi. Akhir kata kami berharaplaporan kami bermanfaat bagi semua pembacanya .Depok,24 mei 2013Fitra sani & Nur Fauziah
  3. 3. DAFTAR ISIKATA PENGANTAR............................................................................................................................vDAFTAR ISI..........................................................................................................................................viDAFTAR TABEL..................................................................................................................................viDAFTAR GAMBAR............................................................................................................................viiBAB I instalasi development softwere....................................................................................................1I.1. XAMPP....................................................................................................................................1BAB II. Pembuatanperancangan aplikasi.............................................................................................13II.1.story board…………………………………………………………………………………………15II.1.1IDE (Integrated Development Environment).................................................................19II.1.2Virtual Server (Apache/ Tomcat)...................................................................................20II.1.4. Plug Ins........................................................................................................................20rancangandanRealisasiAplikasi....................................................................................................21II.2.2. Diagram Flowchart......................................................................................................23II.2.4. StrukturTabel Basis Data.............................................................................................23II.4.1. RealisasiAntarMuka (desain interface)………………………………………………………24BAB III.Pembuatan aplikasi WEB.......................................................................................................25III.1.1. Pembuatan project.......................................................................................................27III.1.2. pembuatan database....................................................................................................28III.1.3. mengkoneksikan database ke-WEB............................................................................29BAB VI. Penutup..................................................................................................................................311.1 kesimpulan…………………………………………………………………………………………..321.2 saran……………………………………………………………………………33
  4. 4. BAB IINSTALASI DEFLOMENT SOFTWERE1.1 Instalasi softwere XAMPPPengertian XAMPPXAMPP merupakan singkatan dari X (empat sistem oprasi apapun ) Apache ,My SQL , Php , dan perl . XAMPP merupakan tool, yang menyediakan paketdalam sebuah perangkat lunak . dalam sebuah paketnya sudah terdapat Apache(web server) , My SQL (database) , PHP (server web scripting) , Perl , FTPserfer , PhpMyAdmin , dan berbagai pustaka bantu lainnya .Dengan menginstal xampp tidak perlu lagi menginstal dan mengkonfigurasi webgerfer APACHE , Php , dan My SQL secara manual . XAMPP akanmenginstalasi secara otomatis untuk anda . (XAMPP versi 1.7.3)1. Tampilan instalasi xampp2. sestelah itu pilih next>.
  5. 5. 3. Tampilan selanjutnya klik next .4. lalu tunggu proses instalasi
  6. 6. 5. Selesai . klik finish
  7. 7. BAB IILANDASAN TEORI1. StoryboardWeb ini adalah web pelayanan yang berupa perpustakaan online yang memilikimanfaat sebagai softwere jasa peminjaman buku secara online2. Penggunaan 1IDE (Integrated Development Environment)Penggunaan jQueryPengertian jQuery | Fitur dan kelebihan jQuery-,Semenjak dirilis pertama kali pada tahun 2006 oleh john Resig, jQuery telah mencuriperhatian pada developer web. buktinya, pada tahun-tahun berikutnya jQuery telah banyak
  8. 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 sebagaiseorang developer web belum kenal ama jQuery,waduhhhh bisa dikatain KUPER(kagakgaul)..oleh karena itu mari sob kita jelajahi dunia jQuery ini dengan penuh keindahan.JQuery adalah library Javascript yang dibuat untuk memudahkan pembuatan websitedengan HTML yang berjalan di sisi Client. Script JQuery dibuat untuk memudahkanpengaturan document seperti menyeleksi object dengan element DOM dan membuataplikasi dengan AJAX. Jquery juga menyediakan layanan atau support para developersuntuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga memungkinkanpara developer website membuat website lebih interaktif dengan animasi, efek – efek, temadan widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuatwebsite 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.NETAJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalamkerangka Web Run-Time mereka.Berikut ini beberapa Fitur yang ada di JQuery :1. Dalam Pemakaian menggunakan seleksi element DOM, sehinggawebsite lebih dinamis dan interaktif.2. JQuery bisa memanipulasi Class pada CSS dan Support CSS 33. Event4. AJAX5. Efek-efek dan animasi6. Ekstensi dan Plug-ins7. Kompatibilitas dengan hampir semua Browser modern8. Keperluan lain seperti : User Agent, Feature detection dan lainnya3. Virtual server (tomcat/apache)Apache Tomcat (atau Jakarta Tomcat atau hanya Tomcat) adalah sebuah servlet kontaineropen source yang dikembangkan oleh Apache Software Foundation (ASF). Tomcatmenerapkan Java Servlet dan JavaServer Pages (JSP) spesifikasi dari Sun Microsystems,dan menyediakan sebuah "Pure Java" HTTP lingkungan web server untuk menjalankan kodeJava.Tomcat tidak boleh disamakan dengan server web Apache, yang merupakan implementasi Cdari web server HTTP; kedua server web tidak dibundel bersama. Apache Tomcat mencakupperangkat untuk konfigurasi dan manajemen, tetapi juga dapat dikonfigurasi denganmengedit file konfigurasi XML.
  9. 9. Tomcat versi 4.x dirilis dengan komponen diantaranya Catalina (wadah servlet), Coyote(konektor HTTP) dan Jasper (mesin JSP).4. Plug insPengertian plugin adalah program tambahan yang disisipkan atau didaftarkan agardikenal oleh browser web, sehingga menambahan kemampuan standar suatubrowser web. Kemampuan tambahan yang diberikan oleh plugin adalahkemampuan untuk dapat menyajikan suatu komponen multimedia multimedia yangtidak standar dalam suatu dokumen HTML yang disajikan dalam browserpengakses web.5. flowchart6. Struktur tabel basis data ( database )
  10. 10. Basis data dan teknologinya telah memainkan peran penting seiring denganpertumbuhan penggunaan komputer. Basis data telah digunakan pada hampirseluruh area dimana komputer digunakan, termasuk bisnis, teknik, kesehatan,hukum, pendidikan dan sebagainya.Kata basis data dapat didefinisikan sebagai kumpulan data yang salingberhubungan. Sedangkan kata data dapat didefinisikan sebagai fakta yangdirekam atau dicatat. Sebagai contoh adalah nama, nomor telepon, dan alamatdari orang-orang yang anda kenal. Anda mungkin telah merekam data ini padabuku alamat, atau anda dapat menyimpannya dalam disket, menggunakankomputer personal dan perangkat lunak seperti dBASE IV,
  11. 11. 6.Desain interfaceinterface regestrasiinterface logininterface home
  12. 12. interface tentangkami
  13. 13. BAB IIIPembuatan aplikasi3. 1. Membuat Database Login Admin1. Pastikan aplikasi xampp telah terinstall di komputer kamu dan telah kamujalankan2. Buka browser anda, seperti gambar yang ada di bawah ini:3. buka http://localhost/phpmyadmin/ pada jendela browser anda , makaakan 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 loadingselesai, maka akan muncul database bernamakan "webfitra"8. . Setelah database terbuat, selanjutnya adalah membuat table di dalamdatabase tersebut. Lalu klik database "webfitra” tadi, lalu klik menu SQLkembali.
  14. 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 prosesloading selesai, maka akan muncul table bernamakan "login" dalam database"webfitra"11. . Dalam keadaan ini, table "webfitra" masih dalam keadaan kosong. Untukmembuat record nama admin pada table "webfitra", maka klik tombol clear.12. Setelah anda meng-klik clear, otomatis script anda akan terhapus. Untukmembuat record pada table "alamat", silahkan tulis script seperti di bawahini.insert into alamat values(,webfitra,webfitra)Jika sudah, lalu klik Go.13. Setelah meng-klik Go, maka akan muncul proses loading. Tunggu hingga prosesloading selesai. Dan jika berhasil, klik table login untuk melihat recordnya sepertitampilan di bawah ini.
  15. 15. 14. Dengan ini, kerangka database telah dibuat. Selanjutnya kita akan membuat page.html login dan menyambungkannya ke database tersebut. Sehingga, sebelummemasuki website akan ada tampilan page login yang dapat diakses oleh adminpembuat website itu sendiri sesuai record yang telah diisi pada database tersebut.Kita memerlukan page login, koneksi database dan koneksi database dengan pagelogin.15. Sebelum itu, pastikan kamu telah membuat folder kosong untuk website kamu didalam folder installan XAMPP yang berletak di local disk c/xampp/htdocs/ dan buatfolder baru disitu dengan nama yang kamu kehendaki.16. Mulai membuat koneksi database, masuk ke dalam folder itu dan buat notepadbaru dengan cara klik kanan – lalu pilih New Text Document, ubah namanyamenjadi ”koneksi.php” (tanpa tanda kutip), lalu buka file tersebut ke dalam notepaddengan cara klik kanan – open with notepad.17. Setelah file terbuka, ketikkan script tersebut<?phpmysql_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 databasedengan page login .html. Buat notepad baru dengan cara yang sama pada stepsebelumnya, lalu ubah namanya menjadi ”ceklogin.php” (tanpa tanda kutip), bukafile tersebut dengan cara yang sama pada step sebelumnya.19. Setelah file terbuka, ketikkan script tersebut.
  16. 16. <?phpinclude "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. 17. Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuaikehendak kamu masing masing.2. Buatlah notepad baru , lalu ubah namanya menjadi siapa_irwan.html. Ketikkanscript 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. 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 + S3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozillafirefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini.
  19. 19. 3. 4. Membuat Page Menu 2 (registrasi)Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuaikehendak kamu masing masing.2. Buatlah notepad baru , lalu ubah namanya menjadi register.php Ketikkan scriptseperti 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. 20. </div></div><div class="content"><?phpecho $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. 21. <?phpfor($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. 22. </script></body></html>Lalu save dengan menekan tombol CTRL + S3. Untuk melihat hasilnya, klik kanan file tersebut, lalu pilih open with mozillafirefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini3. 5, Membuat Page Menu 3 (home page)Siapkan beberapa gambar untuk banner dan content seperti layout di atas sesuaikehendak kamu masing masing.2. Buatlah notepad baru , lalu ubah namanya menjadi register.php Ketikkan scriptseperti 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. 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. 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 pentingmembacanya 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 bukuyang menarik untuk dibaca oleh semua kalangan. Dari mulai novel,majalah,bukupelajaran, buku-buku umum, ataupun agama, semuanya tersedia di perpustakaanini.</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. 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 mozillafirefox 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 sesuaikehendak kamu masing masing.2. Buatlah notepad baru , lalu ubah namanya menjadi register.php Ketikkan scriptseperti 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. 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. 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 pentingmembacanya 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. Perpustakaanini 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. 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 mozillafirefox 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 sesuaikehendak kamu masing masing.2. Buatlah notepad baru , lalu ubah namanya menjadi register.php Ketikkan scriptseperti 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. 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. 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 pentingmembacanya mengingat mobile programming saat ini sedang berkembang.<br /></p></div></div><div class="content"><h1>Daftar Buku</h1><?phpif(isset($_GET[kategori])){include("koneksi.php");$jenis=mysql_real_escape_string($_GET[kategori]);$query="selectjudul_buku,pengarang_buku,penerbit_buku,tahun_terbit,jumlah_buku,sampul_bukufrom tbl_buku where jenis_buku=$jenis";$minta=mysql_query($query)or die();while($hs=mysql_fetch_array($minta))
  31. 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="selectjudul_buku,pengarang_buku,penerbit_buku,tahun_terbit,jumlah_buku,sampul_bukufrom tbl_buku where judul_buku LIKE %$keyword% OR pengarang_buku LIKE%$keyword% OR penerbit_buku LIKE %$keyword% ORtahun_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. 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 mozillafirefox atau browser yang kamu kehendaki. Hasil script tersebut akan seperti ini.
  33. 33. “Perpustakaan online SMK Negeri 1 Depok”Oleh :Fitra sani NISN : 9978496453Tugas Laporan Proyek AplikasiTelah diuji sebagai syarat kelulusan mata pelajaran produktif RPLSemester Genap Tingkat XTahun Ajaran 2012/ 2013diSMK NEGERI 1 DEPOKDepok, ....27 mei 2013Penguji,________________

×