IMPLEMENTASI DAN ANALISA
4.2 Implementasi Sistem
4.2.1 Halaman Front End
Halaman front end adalah halaman yang dapat dilihat public (pengunjung). Halaman terbut antara lain:
1. Halaman Index / Home
Halaman ini adalah halaman yang pertama kali terbuka ketika mengetikkan alamat websitenya. Di halaman ini terdapat menu-menu utama yaitu Home, Register, dan Login. Halaman index ini adalah salah satu halaman umum, maksud dari halaman umum adalah halaman yang dapat diakses oleh pengunjung biasa atau bias disebut pengunjung bukan member dan juga dapat diakses oleh pengunjung member. Namun ketika pengunjung member mengakses halaman index ini menu utamanya berubah menjadi Home, label yang bertuliskan nama member yang memiliki link ke profile member tersebut dan logout. Dihalaman index ini juga terdapat beberapa pilihan kategori yang memiliki subkategori yang mana subkategori tersebut berfungsi mengelompokkan barang-barang yang dilelang kedalam beberapa pengelompokan sesuai yang telah ditentukan. Di halaman index ini tedapat sebuah banner gambar yang bisa berubah-ubah secara otomatis. Banner tersebut bisa berisi iklan berbentuk gambar yang diatur oleh administrator. Di sebelah kanan banner terdapat tiga list barang yang dilelang yang pemunculannya disetting secara random. Di bawah banner dan list barang lelang tadi juga ada empat list barang lelang yang ditampilkan. Keempat barang lelang yang tampil di list tersebut adalah barang-barang yang dalam waktu dekat akan habis waktu lelangnya. Dibawah list barang lelang juga ada list berita yang dibuat oleh administrator. Terdapat tiga judul berita yang ditampilkan, yang mana penampilannya diurutkan berdasarkan berita terbaru. Berikut adalah tampilan dari halaman index.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
35
commit to user
2. Form Registrasi
Form registrasi ini digunakan untuk melakukan pendaftaran seorang pengunjung bukan member untuk menjadi pengunjung member. Form register ini dibuat dengan menggunakan pop-up JQuery, jadi di halaman manapun menu register diklik makan di halaman itu juga form tersebut akan muncul tanpa harus pindah ke halaman khusus. Di dalam form tersebut ada beberapa data yang harus diisi. Data tersebut yaitu username, password, email, nama, jenis kelamin, alamat, nomer telpon, nomer KTP, dan foto KTP yang diupload. Data nomer KTP dan Foto KTP digunakan untuk pengecekan kebenaran data seorang user yang mana nantinya akan menjadi pertimbangan administrator untuk memberikan hak sebagai member. Ini adalah salah satu upaya meminimalisir penipuan antara member dengan member lainnya. Berikut adalah tampilan form registrasinya.
Gambar 4.2 Form Registrasi
3. Form Login
Form login ini digunakan untuk melakukan login user seorang pengunjung bukan member untuk mengubah menjadi pengunjung member(jika sudah melakukan registrasi dan data disetujui administrator). Form login ini juga dibuat dengan menggunakan JQuery, jadi di halaman manapun menu register diklik
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
37
makan di halaman itu juga form tersebut akan muncul tanpa harus pindah ke halaman khusus. Bedanya dengan form register, form login ini dibuat menu
dropdown berbeda dengan form register yang menggunakan pop-up. Di dalam form tersebut user harus mengisi username dan password yang sesuai dengan data yang pernah didaftarkan. Berikut adalah tampilan form login.
Gambar 4.3 Form Login
4. Halaman List Barang Lelang
Halaman list barang lelang ini adalah halaman yang berisi list barang. Halaman ini dapat ditampilkan ketika seorang pengunjung mengklik salah satu subkategori yang telah ditentukan, dan juga bisa mengklik link lainnya yang berada pada halaman index dibagian pojok kanan atas lelang detik terakhir. Jika pengunjung menklik salah satu subkategori yang ada di sidebar, maka di list barang lelang yang ditampilkan, barang-barangnya sesuai kategori yang diklik sebelumnya. Berikut adalah tampilan halaman dari list barang lelang.
Gambar 4.4 Halaman List Barang Lelang
5. Halaman List Berita
Halaman list Berita ini akan tampil jika mengklik link berita lainnya yang berada di halaman index. Pada halaman list berita ini terdapat beberapa berita yang ditampilkan, yang mana penampilannya diurutkan berdasarkan berita yang terakhir kali diposting oleh administrator. Berikut adalah tampilan dari halaman list berita.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
39
Gambar 4.5 Halaman List Berita
6. Halaman Detail Barang Lelang
Halaman detail barang lelang ini akan muncul ketika mengklik salah satu barang di list barang. Di list barang ini terdapat beberapa data yang ditampilkan, data tersebut antara lain adalah nama barang, gambar barang, nama pelelang, kategori barang, harga awal barang, sisa waktu lelang, deskripsi barang dan record penawar yang pernah nelakukan penawaran terhadap barang tersebut. Dihalaman
detail barang ini ada sebuah texfield yang digunakan untuk menginputkan harga penawaran terhadap barang. Penawaran akan diproses hanya pada seorang member yang melakukan penginputan, jika user bukan member melakukan penginputan, maka tidak akan dilakukan proses dan ada pemberitahuan. Harga yang diinput pun harus lebih tinggi dari harga penawaran terakhir, jika harga lebih rendah, maka aka nada pemberitahuan dan penginputan tidak akan dip roses. Berikut adalah tampilan dari halaman detail barang.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
41
7. Halaman Profile Member
Halaman profile member akan tampil ketika member berhasil melakukan member maka akan langsung diarahkan ke halaman ini. Di halaman profile member ini ada beberapa menu tambahan yang mana menu tersebut hanya dapat diakses oleh member website. Menu-menu tersebut adalah edit informasi member, lelang barang, melihat history pelelangan yang pernah dilakukan member tersebut, dan melihat histori penawaran barang yang pernah dilakukan oleh member tersebut.
Di halaman ini juga terdapat beberapa data yang ditampilkan data tersebut adalah nama member, avatar member, jenis kelamin, nomer telepon, email , alamat, dan tanggal register. Halaman profile berfungsi agar setiap member dapat mengetahui informasi member lain. Jadi setiap member bisa mengetahui informasi pelelang barang dengan mengklik nama pelelang pada detail barang yang dilinkkan ke profile member tersebtu. Di halaman profile ini juga terdapat list barang-barang yang pernah dilelang . beritkut tampilan halaman profile.
Gambar 4.7 Halaman Profile Member
8. Form Edit Informasi Member
Form edit informasi member ini digunakan untuk melakukan pengeditan informasi seorang pengunjung member. Form edit ini dibuat dengan menggunakan pop-up JQuery, jadi form ini akan muncul tanpa haru membuka halaman baru. Pada form edit ini terdapat beberapa informasi member yang dapat diubah, antara lain adalah nama, jenis kelamin, nomer telepon, alamat, gambar avata, username, email, dan ubah password. Berikut tampilan dari form edit informasi member.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
43
Gambar 4.8 Form Edit Informasi Member
9. Halaman Input Barang Lelang
Halaman input barang lelang adalah halaman yang digunakan untuk menginputkan data-data barang yang akan dilelang kedalam database. Data-data tersebut adalah nama barang, kategori barang, deskripsi barang, harga awal, dan gambar barang. Di bawah form input barang juga ada list barang-barang yang sebelumnya pernah dilelang. Berikut tampilan halaman input barang lelang.
Gambar 4.9 Halaman Input Barang Lelang
4.2.2 Halaman Back End
Halaman back end adalah halaman yang hanya dapat diakses oleh administrator suatu website.
1. Halaman Login Administrator
Halaman login administrator ini adalah halaman yang digunakan untuk menseleksi user, di halaman ini diminta username dan password administrator. Untuk dapat menuju kehalaman ini tinggal mengetikkan tambahan administrator di belakang alamat. Missal http://localhost/wanipiro, maka untuk masuk
kehalaman administrator http://localhost/wanipiro/administarator. Berikut
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
45
Gambar 4.10 Halaman Login Administrator
2. Halaman Index Administrator
Halaman index administrator berisi berbagai menu-menu yang digunakan untuk memanagement konten yang ditampilkan di halaman front end, dan juga mengatur lalulintas member website. Berikut tampilan dari halaman index administrator.