36
3.5 Perancangan Tabel
Pemecahan informasi menjadi beberapa tabel merupakan satu cara agar dalam pengaksesan data lebih cepat, dan agar tidak terjadi overload jika data yang disimpan
sangat besar. Berikut ini adalah gambaran singkat perencanaan tabel yang diperlukan dalam desain sistem informasi pada tugas akhir kali ini :
1. Tabel Product
Fungsinya : untuk menyimpan informasi alat yang di miliki .
Gambar 3.2. Tabel Product
2. Tabel User
Fungsinya : untuk menyimpan informasi pelanggan yang telah terdaftar.
Gambar 3.3. Tabel pelanggan
37
3. Tabel peminjaman
Fungsinya : untuk menyimpan data dan transaksi peminjaman.
Gambar 3.4. Tabel Peminjaman
Gambar 3.5 ER-Diagram Tabel
38
3.6 Perancangan Page
Page digunakan untuk menampilkan hasil dari pengolahan skrip di browser. Berikut ini adalah page yang ada dalam perancangan sistem, yang merupakan
penjelasan lanjutan dari flowchart yang sudah dijelaskan sebelumnya :
Gambar 3.6 Peta Web Keterangan
Header : Judul Halaman Web. Navigasi : Penghubung antara satu halaman dengan halaman yang lainnya.
Content : Isi halaman web
Header
CONTENT
NAVIGASI NAVIGASI
39
Tampilan awal
Verifikasi
Ya Tidak
Connect DB default
erro
r
selesai
1. Default page
Halaman utama ini berisi text box username dan password yang mengharuskan user login untuk dapat mengakses halaman selanjutnya dan mendaftar menjadi member
apabila belum mempunyai username dan password.
Gambar 3.7 Flowchart default
mulai
40
Gambar 3.8 default Page
Perintah sql yang digunakan untuk menampilkan default page:
p span class=gayaTitleBlueLoginspan
span class=gayaTitleWhiteNowspan p
form name=form method=post action=do_login.asp
table width=100 border=0 cellpadding=0 cellspacing=0
tr td If Request.QueryStringerr = 0
Then Response.Writefont color=FF0000Invalid User Name Or Passwordfont End If
41
If Request.QueryStringerr = 1 Then Response.Writefont color=FF0000Invalid Passwordfont End
If If Request.QueryStringerr = 2
Then Response.Writefont color=FF0000User Account Disabledfont End If
If Request.QueryStringerr = 4 Then Response.Writefont color=FF0000User Account being
usedfont End If If Request.QueryStringtime = 0 then
lngTime = 5 end if If Request.QueryStringtime = 1
then lngTime = 4 end if If Request.QueryStringtime = 2
then lngTime = 3 end if If Request.QueryStringtime = 3
then lngTime = 2 end if If Request.QueryStringtime = 4
then lngTime = 1 end if If Request.QueryStringerr = 5
Then Response.Writefont color=FF0000This account being used by another user.font end if
42
Alat Pilih kategori
selesai
2. Page menu
Page ini untuk menampilkan daftar produk berdasarkan kategori
Gambar 3.9 Flowchart Menu
Gambar 3.10 Tampilan Page Menu
Script untuk menampilkan menu web inventaris :
td width=134 height=22 class=headertext form action=booksearch_book.asp method=post target=mainFrame
input name=txtSearch type=text size=15input name=btnSearch type=submit value=Cari
mulai
43
formtd tr
tr td width=134 height=22 class=headertexta
href=switchboard.asp target=mainFrameHomeatd tr
tr td width=134 height=22 class=headertexta href=
onClick=parent.location.href=do_logoff.aspLog Offatd tr
tr td width=134 height=22 class=headertextCategorytd
td height=22 class=headertextUser Management td tr
td height=22 class=headertextProduct Management td tr
44
Masukkan keyword
Hasil Search
Search lagi Ya
Tidak
mulai
selesai
3. Page Search
Page search ini menggunakan keyword atau kata kunci pencarian yang diisinkan secara manual untuk melakukan pencarian alat
.
Gambar 3.11 Flowchart Search
Gambar 3.12 Tampilan Page Search
45
Gambar 3.13 Tampilan Hasil Page Search
Script untuk menampilkan daftar alat yang ingin dicari :
td align=center valign=topnbsp;br table width=95 border=0 cellspacing=0 cellpadding=0
tr td width=50 class=headerReportSearch
Producttd td align=right = FormatDateTimeNow,1 td
tr tr
td colspan=2nbsp;td tr
46
tr td colspan=2input name=txtSearch type=text
value==request.FormtxtSearchinput name=btnSearch type=submit value=Caritd
tr tr
td colspan=2hr width=100 align=center size=1 noshadetd
tr tr
td colspan=2table width=100 border=1 cellpadding=2 cellspacing=0
tr td align=center class=headertextnotd
td align=center class=headertextKodetd td align=center class=headertextNamatd
td align=center class=headertextMerktd td align=center class=headertextOpentd
tr
i = 1
47
strSearch = request.FormtxtSearch Set rs = Server.CreateObjectADODB.Recordset
strSQL = SELECT FROM tblProduct WHERE ProductName Like strSearch ORDER BY ProductCode
rs.Open strSQL, strCon,0,2 do while not rs.eof
tr If Odd = True Then Response.Writebgcolor=FFFFDD End If
td align=center = i .td td = rsProductCode td
td = rsProductName td td = rsQty td
td align=centerinput name=btnOpen type=button class=inputbtn id=btnOpen value=Open
onClick=location.href=view_product.asp?productid= = rsproductid td
tr
i = i + 1 Odd = Not Odd
48
rs.MoveNext loop
rs.Close Set rs = Nothing
tabletd tr
tr td colspan=2hr width=100 align=center
size=1 noshadetd tr
tr align=left td colspan=2nbsp;td
tr table
td
49
4. Perancangan Entry Data
1. Input Data
Input data digunakan untuk memasukkan informasi pendukung ke dalam database sehingga alat yang ditampilkan di halaman utama dapat dilihat user. Selain itu
halaman ini digunakan untuk mengubah edit data alat dan sekaligus juga dimanfaatkan untuk melakukan penghapusan data alat oleh staff atau admin,
Gambar 3.14 Flowchart Input Data
Input data
Simpan Data Input lagi
Tampilkan data ya
tidak
mulai
selesai
50
Gambar 3.15 Tampilan Input Data Alat
Script untuk menampilkan input alat yang ingin dimasukan :
td align=center valign=topnbsp;br table width=95 border=0 cellspacing=0 cellpadding=0
tr td width=50 class=headerReportInput Produktd
td align=right = FormatDateTimeNow,1 td tr
tr td colspan=2nbsp;td
tr tr
td colspan=2span class=errormsg If request.QueryStringe = 1 Then Response.WriteUpload error end if spantd
51
tr tr
td colspan=2hr width=100 align=center size=1 noshadetd tr
tr td colspan=2table width=95 border=0 cellspacing=0
cellpadding=2
tr td nowrapNamatd
td:td tdinput name=txtProductName type=text class=inputtype
id=txtProductNametd tdnbsp;td
td nowrapnbsp;td tdnbsp;td
td valign=topnbsp;td tr
tr td width=14 nowrapKodetd
52
td width=1:td td width=37input name=txtProductCode type=text
class=inputtype id=txtProductCodetd td width=1nbsp;td
td width=18 nowrapnbsp;td td width=1nbsp;td
td width=28 valign=topnbsp;td tr
tr td nowrapMerktd
td:td tdinput name=txtBrand type=text class=inputtype
id=txtBrandtd tdnbsp;td
td nowrapnbsp;td tdnbsp;td
td width=28 valign=topnbsp;td tr
tr td nowrapKategoritd
53
td:td tdselect name=cmbCategory id=cmbCategory
option value=KomputerKomputeroption option value=ElektronikaElektronikaoption
option value=Tenaga ListrikTenaga Listrikoption selecttd
tdnbsp;td td nowrapnbsp;td
tdnbsp;td tdnbsp;td
tr tr
td nowrapQtytd td:td
tdinput name=txtQty type=text class=inputtype id=txtQty size=10td
tdnbsp;td td nowrapnbsp;td
tdnbsp;td tdnbsp;td
54
tr tabletd
tr tr
td colspan=2hr width=100 align=center size=1 noshadetd tr
tr align=right td colspan=2input name=Submit type=button
onClick=checkformdocument.form; class=inputbtn value=Savetd tr
table td
55
2. Input Data Pelanggan
Input data pelanggan digunakan user untuk mendaftarkan diri sebagai member sehingga user sehingga user yang sudah terdaftar dapat melanjutkan meminjam alat
yang diinginkannya.
Gambar 3.16 Flowchart Input Data Pelanggan
Gambar 3.17 Tampilan Form Pelanggan
Form Pelanggan
Input Data Diri
mulai
selesai
56
Script untuk menampilkan input data pelanggan yang ingin meminjam :
td align=center valign=topnbsp;br table width=95 border=0 cellspacing=0 cellpadding=0
tr td width=50 class=headerReportDaftar Usertd
td align=right = FormatDateTimeNow,1 td tr
tr td colspan=2nbsp;td
tr tr
td colspan=2span class=errormsg If request.QueryStringe = 1 Then Response.WriteUser name is already exist on database. end
if spantd tr
tr td colspan=2hr width=100 align=center size=1 noshadetd
tr tr
57
td colspan=2table width=95 border=0 cellspacing=0 cellpadding=2
tr td width=14 nowrap Username td
td width=1:td td width=37input name=txtUserName type=text
class=inputtype id=txtUserName size=15 maxlength=15td td width=1nbsp;td
td width=18 nowrap Nama Lengkaptd td width=1:td
td width=28input name=txtFullName type=text class=inputtype id=txtFullName size=30td
tr tr
td nowrap Password td td:td
tdinput name=txtPassword type=password class=inputtype id=txtPassword size=15 maxlength=15td
tdnbsp;td td nowrapAlamattd
td:td
58
tdinput name=txtaddress type=text class=inputtype id=txtaddress size=30td
tr tr
td nowrap Konfirmasi Passwordtd td:td
tdinput name=txtPassword2 type=password class=inputtype id=txtPassword2 size=15 maxlength=15td
tdnbsp;td td nowrapTelephonetd
td:td td valign=topinput name=txtPhone type=text class=inputtype
id=txtPhone size=30td tr
tr td nowrapnbsp;td
tdnbsp;td tdnbsp;td
tdnbsp;td td nowrapTypetd
td:td
59
td valign=topselect name=cmbType id=cmbType option value=customerCustomeroption
option value=staffStaffoption selecttd
tr tabletd
tr tr
td colspan=2hr width=100 align=center size=1 noshadetd tr
tr align=right td colspan=2input name=Submit type=button
onClick=checkformdocument.form; class=inputbtn value=Simpantd tr
table td
60
Pilih Alat Edit Alat
Simpan
Edit Lagi ya
tidak
selesai
3.7 Perancangan Edit
Kategori