Anda di halaman 1dari 36

SISTEM INFORMASI PERPUSTAKAAN BEBASIS WEB (BackOffice/Administrator)

Di Susun Oleh: SAHIT TRIYNTO 09071003037

UNIVERSITAS SRIWIJAYA FAKULTAS ILMU KOMPUTER SISTEM INFORMASI 6B

ANGKATAN 2007

DAFTAR ISI
Table of Contents Daftar isi
2

1.Form
3 2.Form 5 3.Form 20 4.Form 25 5.Form 28 6.Form 32 7.Daftar 37

Login Utama Buku Penulis Penerbit Peminjam Pustaka

1. Form Login

login.html <html> <head> <title>LOGIN</title>


3

</head> <body> <center> <h3>PERPUSTAKAAN ONLINE</h3> <br> <br> <br> <table border="1"> <tr> <td> <form action="" method="post"> <table> <tr> <td>Username</td><td>:</td><td><input type="text" name="user"></td> </tr> <tr> <td>Password</td><td>:</td><td><input type="password" name="password"></td> </tr> <tr> <td>&nbsp;</td><td>&nbsp;</td><td align="right"><input type="submit" value="Login"></td> </tr> </table> </form> </td>
4

</tr> </table> </center> </body> </html>

2. Form Utama

index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
5

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Buku adalah Gudang Ilmu</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" /> <script language="javascript" src="js/equip2.js"></script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script> <script type="text/javascript"> $(function(){ $('#datepicker').datepicker({ inline: true }); }); </script> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"> <h1>Perpustakaan.ac.id</h1> <p>Buku adalah Gudang Ilmu</p> </div> </div> <div id="body"> <div id="categories">
6

<h2>MENU</h2> <ul> <li><a href="javascript:onClick=AJAX('dataBuku.php');">BUKU</a></li> <li><a href="javascript:onClick=AJAX('penulis.html');">Penulis</a></li> <li><a href="javascript:onClick=AJAX('penerbit.html');">Penerbit</a></li> <li><a href="javascript:onClick=AJAX('anggota.html');">Peminjam</a></li> </ul> <h2 class="demoHeaders">Kalender</h2> <div id="datepicker"></div> </div> <div id="seasonal"> <div class="inner"> <h2>Halaman Admin</h2> <h3>Selamat Datang</h3> <p>Anda dapat mengedit data-data tentang peminjaman dan pengembalian buku dari halaman ini.</p> <p>dan anda juga dapat menghapus data-data tersebut sesuai dengan ketentuan yang anda buat.</p> <p>Selamat bekerja</p> <p>If you're having problems editing the template please don't hesitate to ask for help on <a href="http://www.freewebsitetemplates.com/forum/">the forum</a>.</p> <br><br><br><br><br><br><br><br><br><br> <p class="more"></p> </div> </div> <div class="clear"> </div>
7

<div id="seas"> <div id="seas-one"> <p>Donal</p> <p class="date">2010</p> </div> <div id="seas-two"> <p>Summer</p> <p class="date">2010</p> </div> <div id="seas-three"> <p>Monsoon</p> <p class="date">2010</p> </div> <div class="clear"> </div> </div> </div> <div id="copyright"> <p>Copyright &copy; 2010. Company name all rights reserved</p> </div> </div> </body> </html>

style.css html, body, h1, h2, h3, h4, ul, li {


8

margin: 0; padding: 0; } h1 img { display: block; } img { border: 0; } a{ color: #464544; } a:hover { color: #FFA405; } .left { float: left; } .right { float: right; } .more { text-align: right; } .clear {
9

clear: both; }

body { background: #504634; text-align: center; font: 11px verdana, arial, sans-serif; color: #695F4C; padding-bottom: 10px; }

/** layout **/ #wrapper { text-align: left; margin: 37px auto; width: 672px; background: #ffffff; position: relative; }

#header { background: #D9D1BC url(images/header.jpg) no-repeat; height: 266px; } #logo {


10

position: absolute; top: 12px; left: 300px; width: 170px; color: #52616E; } #logo h1 { font: bold 24px "arial narrow", arial, sans-serif; } #logo p { margin: 0; font-weight: bold; }

#cart { position: absolute; top: 10px; left: 454px; width: 208px; background: #4B5360; width: 209px; } #cart-top { background: url(images/cart_top.gif) no-repeat; } #cart-bot { background: bottom left url(images/cart_bot.gif) no-repeat; } #cart-cart { background: 9px 11px url(images/cart.gif) no-repeat; }
11

#cart-cart { padding: 8px 8px 8px 60px; color: white; } #cart p { margin: 0; } #cart .orange { color: #FFB400; font-size: 10px; } #cart a { color: white; font-size: 10px; }

#nav { background: #4B5360; position: absolute; top: 101px; left: 287px; width: 385px; padding: 9px 0; text-align: center; }
12

#nav li { list-style: none; display: inline; color: #fff; } #nav a { text-decoration: none; color: #fff; } #gallery { position: absolute; top: 155px; left: 287px; width: 385px; } #gallery li { list-style: none; text-indent: -999px; float: left; overflow: hidden; height: 111px; } #gallery .gwomen { background: url(images/pic_1.jpg) no-repeat; width: 127px;
13

} #gallery .gkids { background: url(images/pic_2.jpg) no-repeat; width: 130px; } #gallery .gmen { background: url(images/pic_3.jpg) no-repeat; width: 128px; }

#body { padding-top: 3px; background-color:#FFF; } #categories { float: left; width: 195px; } #seasonal, #collection { float: right; width: 474px; background: #D4CAB6; margin-bottom: 2px; } #seasonal .inner, #collection .inner {
14

padding: 6px 12px; } #seasonal p, #collection p { margin: 0.9em 0; }

.more a { font-size: 12px; color: #000; text-decoration: none; } .more a:hover { text-decoration: underline; }

h3 { font: bold 14px "arial narrow", arial, sans-serif; color: #1B1812; }

h2 { font: 18px "arial narrow", arial, sans-serif; color: #695F4C; padding-bottom: 10px; }
15

#categories h2 { color: #fff; padding: 4px 0 5px 39px; background: #847A67; } #categories li { background: #D4CAB6 left url(images/bullet.gif) no-repeat; border-top: 1px solid #F4EFDF; list-style: none; font-size: 12px; padding: 7px 0 8px 35px; } #categories a { text-decoration: none; color: #000000; } #categories a:hover { text-decoration: underline; }

#collection { background: #D4CAB6 bottom right url(images/person_bg.jpg) no-repeat; } #collection .inner { padding-right: 98px;
16

} #minigal { float: right; width: 222px; margin-top: 1em; margin-bottom: 1em; } #minigal div { float: left; margin: 6px; } #collection ul { margin-left: 1.5em; } #collection li { margin: 0.2em 0; color: #463F32; font-size: 16px; font-weight: bold; font-family: "arial narrow", arial, sans-serif; } #collection p { width: 103px; margin-left: 1.5em; }
17

#seas-one, #seas-two, #seas-three { height: 146px; }

#seas-one { float: left; width: 195px; margin-right: 3px; background: url(images/foot_1.jpg) no-repeat; } #seas-two { float: left; width: 249px; margin-right: 3px; background: url(images/foot_2.jpg) no-repeat; } #seas-three { float: left; width: 222px; background: url(images/foot_3.jpg) no-repeat; }

#seas p { text-align: right;


18

color: #000; margin: 80px 15px 0 0; font-size: 23px; font-weight: bold; } #seas p.date { margin-top: 0; font-size: 16px; }

#copyright { text-align: center; font-size: 9px; padding: 3px; }

3. Form Buku

19

dataBuku.html <html> <head> <title>DATA BUKU</title> </head> <body> <h3>Data Buku</h3> <br> <br> <form action="dataBuku_proses.php" method="post"> <table>
20

<tr> <td>Kata Kunci</td> <td>:</td> <td><input type="text" name="cari"></td> <td><input type="submit" value="Cari"></td> </tr> </table> </form> Page :<a href="hal2.php">1</a> <a href="hal2.php">2</a> <a href="hal2.php">>></a> <table border="1"> <tr> <th>ISBN</th> <th>Judul</th> <th>Sinopsis</th> <th>Tahun Terbit</th> <th>Aksi</th> </tr> <tr> <td>isi</td> <td>isi</td> <td>isi</td> <td>isi</td> <td><a href="update_buku.php">Update</a> | <a href="delete_buku.php">Delete</a></td>
21

</tr> </table> Page :<a href="hal2.php">1</a> <a href="hal2.php">2</a> <a href="hal2.php">>></a> <br><br><br> <h2>Insert Data Buku</h2> <br> <table> <tr> <td>ISBN</td> <td>:</td> <td><input type="text" name="isbn"></td> </tr> <tr> <td>Judul Buku</td> <td>:</td> <td><input type="text" name="jdl"></td> </tr> <tr> <td>Sinopsis</td> <td>:</td> <td><textarea name="sinopsis"></textarea></td> </tr> <tr>
22

<td>Penerbit</td> <td>:</td> <td> <input type='text'name='penerbit'> <input type="submit" value="Browse"> </td> </tr> <tr> <td>Penulis</td> <td>:</td> <td> <input type='text'name='penulis'> <input type="submit" value="Browse"> </td> </tr> <tr> <td>Tanggal</td> <td>:</td> <td> <input type='text'name='tgl'></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td align="right"><input type='submit' value="Simpan"></td>
23

</tr> </table> </body> </html>

4. Form Penulis

24

penulis.html <!--To change this template, choose Tools | Templates and open the template in the editor.--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h3>Data Penulis</h3> <br>
25

<br> <form action="dataPenulis_proses.php" method="post"> <table> <tr><td>Kata Kunci</td><td>:</td><td><input type="text" name="cari"></td> <td><input type="submit" value="Cari"></td></tr> </table> </form> Page :<a href="hal2.php">1</a><a href="hal2.php">2</a><a href="hal2.php">>></a> <table border="1"> <tr> <th>Id</th> <th>Nama</th> <th>Deskripsi</th> <th>Aksi</th> </tr> <tr> <td>isi</td> <td>isi</td> <td>isi</td> <td><a href="update_penulis.php">Update</a> | <a href="delete_penulis.php">Delete</a></td> </tr> </table> Page :<a href="hal2.php">1</a><a href="hal2.php">2</a><a href="hal2.php">>></a> <br><br><br>

26

<h2>Insert Data Penulis</h2> <br> <table> <tr> <td>Id</td> <td>:</td> <td><input type="text" name="id"></td> </tr> <tr> <td>Nama</td> <td>:</td> <td><input type="text" name="nama"></td> </tr> <tr> <td>Deskripsi</td> <td>:</td> <td><textarea name="sinopsis"></textarea></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td align="right"><input type='submit' value="Simpan"></td> </tr> </table> </body>
27

</html>

5. Form Penerbit

penerbit.html <!--To change this template, choose Tools | Templatesand open the template in the editor. --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head>
28

<body> <h3>Data Penerbit</h3> <br> <br> <form action="dataPenerbit_proses.php" method="post"> <table> <tr> <td>Kata Kunci</td> <td>:</td> <td><input type="text" name="cari"></td> <td><input type="submit" value="Cari"></td> </tr> </table> </form> Page :<a href="hal2.php">1</a> <a href="hal2.php">2</a> <a href="hal2.php">>></a> <table border="1"> <tr> <th>Id</th> <th>Nama</th> <th>Kota</th> <th>Negara</th> <th>Aksi</th> </tr>
29

<tr> <td>isi</td> <td>isi</td> <td>isi</td> <td>isi</td> <td><a href="update_penerbit.php">Update</a> | <a href="delete_penerbit.php">Delete</a></td> </tr> </table> Page :<a href="hal2.php">1</a> <a href="hal2.php">2</a> <a href="hal2.php">>></a> <br><br><br> <h2>Insert Data Penerbit</h2> <br> <table> <tr> <td>Id</td> <td>:</td> <td><input type="text" name="id"></td> </tr> <tr> <td>Nama</td> <td>:</td> <td><input type="text" name="nama"></td>
30

</tr> <tr> <td>Kota</td> <td>:</td> <td><input type="text" name="kota"></td> </tr> <tr> <td>Negara</td> <td>:</td> <td><input type="text" name="negara"></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td align="right"><input type='submit' value="Simpan"></td> </tr> </table> </body> </html>

6. Form Peminjam
31

anggota.html <!--To change this template, choose Tools | Templatesand open the template in the editor.--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h3>Data Anggota</h3> <br>
32

<br> <form action="dataAnggota_proses.php" method="post"> <table> <tr> <td>Kata Kunci</td> <td>:</td> <td><input type="text" name="cari"></td> <td><input type="submit" value="Cari"></td> </tr> </table> </form> Page :<a href="hal2.php">1</a> <a href="hal2.php">2</a> <a href="hal2.php">>></a> <table border="1"> <tr> <th>Id</th> <th>Nama Anggota</th> <th>Alamat</th> <th>Jenis Kelamin</th> <th>Telepon</th> <th>NIM</th> <th>Aksi</th> </tr> <tr>
33

<td>isi</td> <td>isi</td> <td>isi</td> <td>isi</td> <td>isi</td> <td>isi</td> <td><a href="update_anggota.php">Update</a> | <a href="delete_anggota.php">Delete</a></td> </tr> </table> Page :<a href="hal2.php">1</a> <a href="hal2.php">2</a> <a href="hal2.php">>></a> <br><br><br> <h2>Insert Data Anggota</h2> <br> <table> <tr> <td>Id</td> <td>:</td> <td><input type="text" name="id"></td> </tr> <tr> <td>Nama Anggota</td> <td>:</td>
34

<td><input type="text" name="nama"></td> </tr> <tr> <td>Alamat</td> <td>:</td> <td><input type="text" name="almat"></td> </tr> <tr> <td>Jenis Kelamin</td> <td>:</td> <td><input type="text" name="jk"></td> </tr> <tr> <td>Telepon</td> <td>:</td> <td><input type="text" name="telepon"></td> </tr> <tr> <td>NIM</td> <td>:</td> <td><input type="text" name="nim"></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td>
35

<td align="right"><input type='submit' value="Simpan"></td> </tr> </table> </body> </html>

Daftar Pustaka
www.freewebsitetemplates.com

36