PEMBANGUNAN PORTAL LELANG ONLINE BERBASIS WEB TUGAS AKHIR

perpustakaan.uns.ac.id

digilib.uns.ac.id

PEMBANGUNAN PORTAL LELANG ONLINE BERBASIS WEB

TUGAS AKHIR

Diajukan untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya Program Diploma III Teknik Informatika

Disusun Oleh: TAMA PRIAMBODO NIM. M3109075

PROGRAM DIPLOMA III TEKNIK INFORMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SEBELAS MARET SURAKARTA 2012 commit to user


digilib.uns.ac.id

HALAMAN PERSETUJUAN

PEMBANGUNAN PORTAL LELANG ONLINE BERBASIS WEB

Disusun Oleh

TAMA PRIAMBODO NIM. M3109075

Tugas Akhir ini telah disetujui untuk dipertahankan Di hadapan dewan penguji Pada tanggal 2 Juli 2012

Dibimbing oleh Pembimbing Utama

Wisnu Widiarto, S.Si., M.T. NIP. 197006012008011009

commit to user

ii


digilib.uns.ac.id

HALAMAN PENGESAHAN PEMBANGUNAN PORTAL LELANG ONLINE BERBASIS WEB

Disusun Oleh

TAMA PRIAMBODO NIM. M3109075 Dibimbing oleh Pembimbing Utama

Wisnu Widiarto, S.Si., M.T. NIP. 197006012008011009

Tugas Akhir ini telah diterima dan disahkan oleh dewan penguji Tugas Akhir Program Diploma III Teknik Informatika Pada hari Senin tanggal 2 Juli 2012 Dewan Penguji : 1. Wisnu Widiarto, S.Si., M.T. NIP. 197006012008011009 2. Nanang Maulana, S.Si NIDN. 0614078103 3. Meiyanto Eko Sulistyo, S.T., M.Eng NIP. 197705132009121004

(

)

(

)

(

)

Disahkan oleh : Dekan Fakultas MIPA UNS

Ketua Program Studi DIII Teknik Informatika UNS

Prof.Ir.Ari Handono Ramelan, M.Sc(Hons) PhD commit to user NIP. 19610223 198601 1 001

iii

Drs. YS. Palgunadi, M.Sc NIP. 19560407 198303 1 004


digilib.uns.ac.id

ABSTRACT

Tama Priambodo. 2012. The CONSTRUCTION OF A WEB BASED AUCTION PORTAL. Engineering Informatics of Diploma III, Faculty of Mathematics and Natural Science, Sebelas Maret University Surakarta. Now days, the development of technology is getting faster. The technology is already used in various aspects of public life, for example internet technology is applied by people to help them in acquiring information. People can access information easily without limitation through internet technology. Auction portal online based on website is designed by using PHP programming language with Apache as the webserver and MySOL as its data base. In this study, the writer uses Adobe Dreamweaver, which is used as the HTML editor and PHP. On the other hand, the writer uses Adobe Photoshop and Corel Draw in making the design of website page. This website has three levels of users. First, the users, who do not belong to the member, can only see the products that will be auction. They also can access the common information or the common contents of this website. Second, both users can see the products which were on an auction by another member, can access all content website, can also conduct an auction of the product and also do the bidding of the item that is currently at auction the other member. The third, the administrators who monitor the traffic auction of each items and organize content in the any display on Web page. Keywords: Auction, MySQL, PHP, Website

commit to user

iv


digilib.uns.ac.id

ABSTRAK

Tama Priambodo. 2012. PEMBANGUNAN PORTAL LELANG ONLINE BERBASIS

WEBSITE.

Informatikan,

Fakultas

Teknik

Informatika,

Matematika

dan

Ilmu

Diploma

III

Pengetahuan

Teknik Alam,

Universitas Sebelas Maret Surakarta. Perkembangan dunia teknologi semakin cepat dewasa ini. Teknologi sudah di pakai dalam berbagai macam aspek kehidupan masyarakat, khususnya teknologi internet. Penerapan teknologi internet ini memudahkan masyarakat dalam mengakses informasi karena tidak adanya batasan dalam hal akses informasi. Portal lelang online berbasis website ini dirancang dengan menggunakan bahasa pemrograman PHP dengan Apache sebagai webservernya dan MySQL sebagai basis datanya. Dalam pembuatannya Adobe Dreamweaver di gunakan sebagai editor HTML dan PHP, sedangkan pembuatan desain halaman websitenya menggunakan Adobe Photoshop dan Corel Draw. Website ini memiliki tiga tingkatan pengguna. Pertama pengguna bukan member yang hanya dapat melihat barang apa saja yang sedang di lelang, dan dapat mengakses konten-konten website yang sifatnya umum. Kedua pengguna member yang dapat melihat barang apa saja yang sedang di lelang oleh member lain, dapat mengakses semua konten-konten website dan juga dapat melakukan lelang barang serta dapat juga melakukan penawaran terhadap barang yang sedang di lelang member lain. Ketiga adalah administrator yang memantau lalulintas pelelangan barang dan mengatur konten-konten apa saja yang di tampilkan pada halaman website. Kata kunci : Lelang, MySQL, PHP, Website

commit to user

v


digilib.uns.ac.id

MOTTO PERSEMBAHAN “Ini adalah laporan terakhir saya, kedepannya saya yang akan menerima laporan” (Tama Priambodo)

Laporan tugas akhir ini penulis persembahkan untuk : 1. Keluarga tercinta 2. Sahabat-sahabat ku dan orang-orang tersayang 3. Temen-temen TI’B 09 DIII TI FMIPA UNS 4. Teman-teman seperjuangan di D3 Teknik Informatika 2009

commit to user

vi


digilib.uns.ac.id

KATA PENGANTAR

Segala puji dan rasa syukur kehadirat Tuhan Yang Maha Esa atas segala berkat dan karunia-Nya yang telah diberikan, sehingga penulis dapat menyelesaikan tugas akhir dengan judul ” Pembangunan Portal Lelang Online Berbasis Website” Tugas akhir ini bertujuan untuk memenuhi dan melengkapi salah satu syarat dalam menempuh ujian untuk memperoleh derajat Ahli Madya pada studi Diploma III Teknik Informatika FMIPA Universitas Sebelas Maret. Penulis mengucapkan banyak terima kasih dan memberikan penghargaan yang sebesar-besarnya kepada semua pihak yang telah membantu dan mendukung baik itu secara langsung

maupun tidak langsung dalam penyusunan laporan

Tugas Akhir ini mulai dari persiapan hingga tahap penyelesaiannya, terutama kepada: 1. Bapak Drs. YS. Palgunadi, M.Sc, selaku Ketua Program Diploma III Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret. 2. Bapak Wisnu Widiarto, S.Si., M.T. selaku pembimbing tugas akhir yang telah berbaik hati dan banyak memberi toleransi selama membimbing penulis sehingga tugas akhir ini dapat terselesaikan. 3. Bapak Meiyanto Eko, M.Eng. dan Bapak Nanang Maulana Y., S.Si selaku penguji tugas akhir yang telah memberikan kebenaran atas penyusunan laporan tugas akhir ini. Akhir kata semoga tulisan ini bermanfaat khususnya untuk penulis dan para pembaca pada umumnya.

Surakarta,

Juni 2012

Penulis commit to user

vii


digilib.uns.ac.id

DAFTAR ISI

Halaman HALAMAN JUDUL................................................................................................ i HALAMAN PERSETUJUAN ................................................................................ ii HALAMAN PENGESAHAN ................................................................................ iii HALAMAN ABSTRAK ........................................................................................ iv HALAMAN INTISARI ...........................................................................................v MOTTO DAN PERSEMBAHAN ......................................................................... vi KATA PENGANTAR .......................................................................................... vii DAFTAR ISI ........................................................................................................ viii DAFTAR TABEL ....................................................................................................x DAFTAR GAMBAR ............................................................................................. xi

BAB I PENDAHULUAN ......................................................................................1 1.1 Latar Belakang Masalah ........................................................................... 1 1.2 Rumusan Masalah ..................................................................................... 2 1.3 Batasan Masalah........................................................................................ 2 1.4 Tujuan dan Manfaat .................................................................................. 2 1.5 Metodologi Penelitian ............................................................................... 3 1.6 Sistematika Penulisan ............................................................................... 4

BAB II LANDASAN TEORI ................................................................................5 2.1 Lelang ........................................................................................................ 5 2.2 Data Flow Diagram (DFD) ...................................................................... 6 2.3 Entity Relationship Diagram (ERD) ......................................................... 7 2.3.1 Entity ................................................................................................ 8 commit to user 2.3.2 Atribut .............................................................................................. 8

viii


digilib.uns.ac.id

2.3.1 Hubungan/Relasi .............................................................................. 8 2.4 Website ...................................................................................................... 9 2.5 Bahasa Pemograman HTML ................................................................... 10 2.6 Bahasa Pemograman JavaScript ............................................................. 11 2.7 Bahasa Pemograman CSS ....................................................................... 11 2.8 Bahasa Pemograman PHP ....................................................................... 11 2.9 jQuery...................................................................................................... 12

BAB III ANALISIS DAN PERANCANGAN SISTEM .....................................13 3.1 Perancangan Arsitektur ........................................................................... 13 3.2 Perancangan Sistem ................................................................................ 13 3.2.1 Context Diagram (CD)................................................................... 13 3.2.2 Data Flow Diagram (DFD) ........................................................... 15 3.2.3 Entitiy Relationship Diagram (ERD) ............................................. 20 3.2.4 Relasi Antar Tabel ..........................................................................20 3.2.5 Struktur Tabel ................................................................................ 21 3.2.6 Struktur Navigasi ........................................................................... 31

BAB IV IMPLEMENTASI DAN ANALISA .....................................................33 4.1 Kebutuhan Sistem ................................................................................... 33 4.2 Implementasi Sistem ............................................................................... 34 4.2.1 Halaman Front End ........................................................................ 34 4.2.2 Halaman Back End ......................................................................... 44

BAB V PENUTUP ...............................................................................................48 4.1 Kesimpulan .............................................................................................. 48 4.2 Saran ........................................................................................................ 48 DAFTAR PUSTAKA ............................................................................................ 49 commit to user

ix


digilib.uns.ac.id

DAFTAR TABEL Halaman 1. Tabel 3.1 admin ............................................................................................ 21 2. Tabel 3.2 banner ........................................................................................... 22 3. Tabel 3.3 bid................................................................................................. 23 4. Tabel 3.4 conten ........................................................................................... 24 5. Tabel 3.5 kategori......................................................................................... 24 6. Tabel 3.6 kat_par .......................................................................................... 25 7. Tabel 3.7 lelang ............................................................................................ 26 8. Tabel 3.8 member......................................................................................... 28 9. Tabel 3.9 news ............................................................................................. 30 10. Tabel 3.10 email ........................................................................................... 30

commit to user

x


digilib.uns.ac.id

DAFTAR GAMBAR

Halaman 1. Gambar 2.1 Simbol Entity Luar ........................................................................ 6 2. Gambar 2.2 Simbol Aliran Data........................................................................ 6 3. Gambar 2.3 Simbol Proses ................................................................................ 7 4. Gambar 2.4 Simbol Berkas ............................................................................... 7 5. Gambar 2.5 Simbol Entity ................................................................................. 8 6. Gambar 2.6 Simbol Atribut ............................................................................... 8 7. Gambar 2.7 Simbol Relasi ................................................................................ 8 8. Gambar 3.1 Perancangan Arsitektur ............................................................... 13 9. Gambar 3.2 Context Diagram Wanipiro ......................................................... 14 10. Gambar 3.3 DFD Level 0 Website Wanipiro .................................................. 15 11. Gambar 3.4 DFD Level 1 proses 2 website wanipiro ..................................... 16 12. Gambar 3.5 DFD Level 1 proses 3 website wanipiro ..................................... 16 13. Gambar 3.6 DFD Level 1 proses 4 website wanipiro ..................................... 17 14. Gambar 3.7 DFD Level 1 proses 5 website wanipiro ..................................... 18 15. Gambar 3.8 DFD Level 1 proses 6 website wanipiro ..................................... 19 16. Gambar 3.9 DFD Level 1 proses 7 website wanipiro ..................................... 19 17. Gambar 3.10 ERD (Entity Relationship Diagram) ......................................... 20 18. Gambar 3.11 Relasi Antar Tabel ..................................................................... 20 19. Gambar 3.12 Struktur Navigasi User .............................................................. 31 20. Gambar 3.13 Struktur Navigasi Administrator ............................................... 32 21. Gambar 4.1 Halaman Home ............................................................................ 35 22. Gambar 4.2 Form Registrasi ........................................................................... 36 23. Gambar 4.3 Form Login .................................................................................. 37 24. Gambar 4.4 Halaman List Barang Lelang ....................................................... 38 25. Gambar 4.5 Halaman List Berita ..................................................................... 39 26. Gambar 4.6 Halaman Detail Barang ............................................................... 40 27. Gambar 4.7 Halaman Profile Member ............................................................ 42 commit to user 28. Gambar 4.8 Form Edit Informasi Member ...................................................... 43

xi


digilib.uns.ac.id

29. Gambar 4.9 Halaman Input Barang Lelang ................................................... 44 30. Gambar 4.10 Halaman Login Administrator.................................................. 45 31. Gambar 4.11 Halaman Index Administrator .................................................. 45 32. Gambar 4.12 Halaman Tampil Data Administrator ....................................... 46 33. Gambar 4.13 Halaman Tambah Data Administrator...................................... 47 34. Gambar 4.14 Halaman Detail Data Administrator ......................................... 47

commit to user

xii


digilib.uns.ac.id

BAB I PENDAHULUAN

1.1 Latar Belakang Masalah Perkembangan teknologi informasi saat ini sangat berpengaruh bagi semua kalangan, semua orang membutuhkan segala bentuk informasi agar tidak tertinggal di belakang. Informasi sekecil apapun sangat berarti bagi semua orang, dan karena sebuah informasi itulah yang bisa menjadikan semuanya mengerti akan perkembangan yang terjadi di negeri yang sudah modern ini, tanpa sebuah teknologi informasi masyarakat saat ini tidak akan bisa berkembang dengan pesat. Seiring dengan pesatnya perkembangan teknologi informasi saat ini, informasi pun sudah dapat diakses dimana-mana serta praktis. Salah satu medianya yaitu dengan media elektronik/komputer. Sekarang ini sudah menjadi bahan yang tak asing lagi di masyarakat yaitu menggunakan media internet untuk berinteraksi, mengakses informasi, serta transaksi jual beli pun dapat dilakukan di internet tanpa mengenal jarak antara penjual dan pembeli yang ada di penjuru dunia. Begitu juga jika dilihat dari keekonomisan biaya yang dikeluarkan jika mempromosikan barang yang akan dijual atau dilelang melalu media cetak ataupun televisi, sedangkan melalui media internet atau biasa disebut website, kita dapat mempromosikan barang yang akan dijual atau dilelang tanpa mengeluarkan biaya sepeserpun dengan ruang lingkup yang lebih luas jika dibandingkan dengan media cetak ataupun televisi. Untuk melakukan pembelian atau penawaran barang melalui media internet atau websitepun lebih ekonomis jika dibandingkan dengan mengunjungi penjualnya langsung jika si penjual barang berada di kota atau provinsi yang berbeda.

commit to user

1


digilib.uns.ac.id 2

1.2 Rumusan Masalah Rumusan masalah dari penulisan tugas akhir ini adalah “Bagaimana membangun suatu web yang dapat mempermudah pengunjung melelang atau menawar barang yang dilelang oleh pengunjun lain”.

1.3 Batasan Masalah Penulis membatasi masalah dalam penulisan Tugas Akhir ini. Masalah – masalah yang akan dibahas dalam penulisan Tugas Akhir ini adalah : 1. Pembuatan portal lelang online berbasis web. 2. Pembuatan website yang menyediakan service – service kepada member dimana member dapat melelang barangnya dan juga dapat menawar barang yang dilelang member lainnya. Sedangkan administrator hanya memantau lalulintas pelelangan dan memanajemen member.

1.4 Tujuan dan Manfaat Tujuan penyusunan tugas akhir ini adalah untuk membangun suatu website lelang

online

dimana

dapat

mempermudah

seorang

personal

untuk

mempromosikan barang atau melelang barang tanpa harus memiliki website sendiri, sekaligus mempermudah seorang personal untuk melakukan penawaran tanpa harus bertatap muka dengan pemilik barang.

Manfaat yang penulis harapkan dari penyusunan tugas akhir ini antara lain: 1. Untuk pengguna : Penggunaan website lelang online ini cukup dengan menjadi member, pengguna dapat melelang barangnya di website ini, member juga dapat melakukan penawaran atas barang yang dilelang oleh member lainnya. 2. Untuk penulis : Pembuatan website ini merupakan media kreativitas dalam menerapkan ilmu ilmu yang telah dipelajari selama proses belajar di bangku kuliah dengan commit user harapan semoga website ini terus dapattodikembangkan.


digilib.uns.ac.id 3

1.5 Metodologi Penelitian Penelitian diperlukan sebagai sarana pendukung dalam pembuatan laporan Tugas Akhir, dimana penelitian ini dilakukan dengan menggunakan beberapa metode. Metode yang digunakan yaitu : 1. Pengumpulan Data Metode pengumpulan data yang digunakan penulis dalam penyusunan tugas akhir ini ada dua yaitu :aan a. Penelitian Penulis melakukan penelitian terhadap website-website sejenis dan mempelajari sistem informasi

yang digunakan, flow-flow dalam

melakukan transaksi dan keamanan yang harus diberikan member. Serta menyempurnakan sistem-sistem yang masih memiliki kekurangan dari website-website sejenis. b. Studi Pustaka Penulis mengambil referensi dari perpustakaan untuk mencari deskripsi tentang sistem informasi, Context Diagram, Data Flow Diagram, database, Entitas Relationship Diagram, Relasional Antar Tabel, site map, dan masih banyak lagi. 2. Perancangan Dalam perancangan sistem pada website lelang online digunakan beberapa diagram. Antara lain, Context Diagram, Data Flow Diagram, Entity Relationship Diagram dan Relasional Antar Tabel. Selain itu, penulis juga membuat perancangan database. 3. Implementasi Implementasi sistem pada website lelang online ini dikerjakan menggunakan bahasa pemrograman PHP, Apache sebagai webserver dan MySQL sebagai database.

commit to user


digilib.uns.ac.id 4

1.6 Sistematika Penulisan Sistematika penulisan laporan tugas akhir ini adalah sebagai berikut : 1. BAB I PENDAHULUAN Bab ini membahas tentang latar belakang masalah dari penulisan tugas akhir ini, rumusan masalah, batasan masalah, tujuan penulisan tugas akhir, manfaat yang didapatkan dari penulisan tugas akhir, metodologi serta sistematika penulisan yang digunakan pada penulisan tugas akhir ini. 2. BAB II LANDASAN TEORI Bab ini membahas tentang teori-teori yang digunakan penulis sebagai dasar untuk menyusun tugas akhir ini. 3. BAB III ANALISA DAN PERANCANGAN SISTEM Bab ini membahas tentang bentuk desain dan perancangan sistem aplikasi. Pemodelan yang dipakai untuk merancang aplikasi ini adalah dengan pembuatan Context Diagram, Data Flow Diagram, Entity Relationship Diagram, database dan Relasional Antar Tabel. 4. BAB IV IMPLEMENTASI DAN PEMBAHASAN Bab ini membahas tentang ini membahas tentang implementasi aplikasi sistem pada jaringan komputer, spesifikasi hardware maupun software yang dipakai, serta analisa hasil aplikasi yang kemudian ditampilkan dalam bentuk report. 5. BAB V PENUTUP Bab ini membahas tentang kesimpulan dan saran yang penulis ambil dari penulisan tugas akhir ini.

commit to user


digilib.uns.ac.id

BAB II LANDASAN TEORI

2.1 Lelang Pengertian lelang menurut bahasa Indonesia (dikeluarkan oleh Depdikbud, penerbit Balai Pustaka) bahwa lelang adalah penjualan dihadapkan orang banyak (dengan tawaran yang atas mengatas) dipimpin oleh penjabat lelang. Sedangkan yang dimaksud melelangkan atau memperlelangkan adalah: 1. Menjual dengan jalan lelang 2. Memberikan barang untuk dijual dengan jalan lelang, 3. Memborongkan pekerjaan. Berdasarkan pengertian tersebut dapat diambil kesimpulan bahwa pengertian lelang tidak dibatasi penjualan barang-barang saja, tetapi meliputi juga pemborongan pekerjaan.(Sasmita, 2011) Pengertian lelang menurut kamus hokum dalam bahasa inggris bahwa lelang adalah auction, yaitu “Public sale at while godos are sold the person making the hinghest bids or offers” barang dijual kepada penawaran tertinggi. (Sasmita, 2011) Pengertian lelang menurut Undang-undang (VR.STBL 1908 no. 189) bahwa di Indonesia sejak jaman penjajahan Belanda, lelang sudah diatur dalam peraturan perundang-undangan yang disebut vendu reglement (Stbl. Tahun 1908 No. 189 diubah dengan Stbl. 1940 no 56). Sampai saat ini Vendu Reglement ini masih tetap dipergunakan sebagai dasar hukum lelang. Bunyi dari terjemahan itu adalah “Penjualan Umumadalah penawaran yang mengikat atau menurun atau dengan pemasukan harga dalam sampul tertutup, atau kepada orang-orang yang diundang atau sebelumnya diberitahu mengenai pelelangan atau penjualan itu, atau diijinkan untuk ikut serta dan diberi kesempatan untuk menawar harga, menyetujui harga yang ditawarkan atau memasukkan harga dalam sampul tertutup”. (Sasmita, 2011) commit to user

5


digilib.uns.ac.id 6

2.2 Data Flow Diagram (DFD) Data Flow Diagram adalah suatu model logika data atau proses yang akan dibuat untuk menggambarkan darimana asal data dan kemana tujuan data yang keluar dari sistem, dimana data disimpan, proses apa yang menghasilkan data tersebut, dan interaksi antara data yang tersimpan dan proses yang dikenakan pada data tersebut. (Kristanto, 2003) DFD

menggambarkan

penyimpanan

data

dan

proses

yang

mentransformasikan data serta menunjukkan hubungan antara data pada sistem dan proses pada sistem. Salah satu teknik dasar DFD yaitu Yourdon dan De Marco yang terdiri dari komponen-komponen sebagai berikut : a. Entity Luar Entity luar digambarkan dengan simbol persegi biasa. Merupakan sumber atau tujuan dari aliran data dari atau ke sistem. Entity luar bisa digambarkan secara fisik dengan sekelompok orang atau mungkin sebuah sistem. (Kristanto, 2003)

Gambar 2.1 Simbol Entity Luar b. Aliran Data Menggambarkan aliran data dari suatu proses ke proses lainnya. Adapun simbol dari aliran data bentuk garisnya bisa bebas. (Kristanto, 2003)

Gambar 2.2 Simbol Aliran Data

commit to user


digilib.uns.ac.id 7

c. Proses Proses atau fungsi yang mentranformasikan data secara umum, digambarkan dengan lingkaran. (Kristanto, 2003)

Gambar 2.3 Simbol Proses d. Berkas Merupakan komponen yang berfungsi untuk menyimpan data atau file. Simbolnya seperti berikut :

Gambar 2.4 Simbol Berkas

2.3 Entity Relationship Diagram (ERD) Menurut Kristanto ERD merupakan suatu model untuk menjelaskan hubungan antar data dalam basis data berdasarkan objek-objek dasar data yang mempunyai hubungan antar relasi. ERD untuk memodelkan struktur data dan hubungan antar data, untuk menggambarkannya digunakan beberapa notasi dan simbol. Pada dasarnya ada tiga simbol yang digunakan, yaitu :

commit to user


2.3.1

digilib.uns.ac.id 8

Entity Entity merupakan objek yang mewakili sesuatu yang nyata dan dapat

dibedakan dari sesuatu yang lain . (Kristanto, 2003)

Gambar 2.5 Simbol Entity

2.3.2

Atribut Setiap entitas pasti mempunyai elemen yang disebut atribut yang

berfungsi untuk mendeskripsikan karakteristik dari entitas tersebut. Isi dari atribut mempunyai sesuatu yang dapat mengidentifikasikan isi elemen satu dengan yang lain. (Kristanto, 2003)

Gambar 2.6 Simbol Atribut 2.3.3

Hubungan / Relasi Hubungan antara sejumlah entitas yang berasal dari himpunan entitas yang

berbeda. (Kristanto, 2003)

commit to userRelasi Gambar 2.7 Simbol


digilib.uns.ac.id 9

2.4 Website Website adalah kumpulan dari halaman-halaman situs, yang biasanya terangkum dalam sebuah domain atau subdomain, yang tempatnya berada didalam World Wide Web (WWW) di Internet. Sebuah halaman web adalah dokumen yang ditulis dalam format HTML (Hyper Text Markup Language), yang hampir selalu bisa diakses melalui HTTP, yaitu protokol yang menyampaikan informasi dari server website untuk ditampilkan kepada para pemakai melalui web browser. (Nugroho, 2004) Semua publikasi dari website tersebut dapat membentuk sebuah jaringan informasi yang sangat besar. Sebuah website dibuat didalam sebuah sistem komputer yang dikenal dengan server web. Yang menerima lalu mengirimkan halaman-halaman yang diperlukan untuk merespon permintaan dari pengguna. Apache adalah piranti lunak yang biasa digunakan dalam sebuah webserver, kemudian setelah itu adalah Microsoft Internet Information Services (IIS). (Nugroho, 2004) 5 Penemu website adalah Sir Timothy John ¨Tim¨ Berners-Lee, sedangkan website yang tersambung dengan jaringan, pertamakali muncul pada tahun 1991. Maksud dari Tim ketika membuat website adalah untuk mempermudah tukar menukar dan memperbarui informasi kepada sesama peneliti ditempat dia bekerja. Pada

tanggal

30

April

1993,

CERN

(tempat

dimana

Tim

bekerja)

menginformasikan bahwa WWW dapat digunakan secara gratis oleh semua orang. Terdapat dua komponen utama dalam mekanisme kerja web : 1. Web server. Web server merupakan sebuah aplikasi perangkat lunak. Aplikasi web server ini dijalankan pada sebuah komputer yang disebut dengan server. Web server adalah salah satu jenis perangkat lunak yang menyediakan layanan halaman (dokumen) web yang dapat diakses seluruh dunia melalui internet. Web server akan melayani permintaan akses halaman web dengan bantuan protokol – protokol komunikasi terutama HTTP. (Nugroho, 2004) 2. Web browser. commit to user


digilib.uns.ac.id 10

Web browser adalah perangkat lunak (software) yang digunakan untuk menampilkan dokumen HTML. Perangkat luna ini dioperasikan pada komputer pengguna seluruh dunia. Web browser akan membantu pengguna mengakses halaman web yang disediakan oleh sebuah web server serta membantu pengguna dalam hal navigasi. Pada saat ini ada beberapa borwser yang dikembangkan oleh beberapa vendor, antara lain internet explorer yang dikempangkan oleh netscape. (Nugroho, 2004) Protokol merupakan aturan tata cara yang diimplemantasikan di dalam mekanisme komunikasi dalam satu jaringan komoputer. Aturan ini diperlukan supaya proses komunikasi yang terjadi dapat teratur dan sistematis sehingga dapat dirancang suatu model komunikasi untuk berbagai keperluan. Pada saat ini telah tercipta berbagai protokol yang digunakan dalam rangka berkomunikasi melalui jaringan komputer. Berikut ini adalah beberapa prootokol yang ada : a.

Transmission Control Protokol (TCP). Mengatur tata cara pemaketan data dari pengirim dan pembukaan data dari komputer penerima.

b.

Internet Protokol (IP). Mengatur mekanisme pengiriman data dari komputer pengirim sampai komputer penerima.

c.

Hypertext Transfer Protocol (HTTP). Mengatur mekanisme transfer dan penampilan halaman web.

d.

File Transfer Protocol. Mekanisme transfer file di dalam jaringan komputer.

Email protocol. Mengatur meknisme pengiriman dan penerimaan email. (Nugroho, 2004)

2.5 Bahasa Pemograman HTML HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat halaman web dan menampilkan berbagai informasi di dalam sebuah browser internet. (Septian, 2011) commit to user



HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh Word Wide Web Consortium (W3C). (Septian, 2011) HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file bentuk HTML dapat digunakan menggunakn browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. (Septian, 2011) 2.6 Bahasa Pemograman JavaScript Javascript adalah bahasa scripting yang handal yang berjalan pada sisi client. Javascript merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape. Untuk menjalankan script yang ditulis dengan Javascript kita membutuhkan

Javascript-enabeled

browser

yaitu

browser

yang

mampu

menjalankan Javascript. (Septian, 2011) 2.7 Bahasa Pemograman CSS Cascading Style Sheet (CSS) adalah seuatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Pengguna yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL Spesifikasi CSS diatur oleh Word Wide Web Consortium (W3C). (Septian. 2011) 2.8 Bahasa Pemograman PHP PHP adalah bahasa pemrograman script yang paling banyak dipakai saat ini. PHP adalah bahasa pemrograman web atau scripting language yang didesain untuk web atau scripting language yang didesain untuk web. (Septian, 2011) Awalnya PHP merupakan kependekan dari Personal Home Page. PHP dibuat pertama kali oleh Rasmus Lerdorf pada 1994, yang pada awalnya dibuat untuk menghitung jumlah pengunjung pada homepagenya. Pada waktu itu PHP commit to user



masih bernama FI (Form Interpreted), yang wujudnya berupa sekumpulan script yang digunakan untuk mengelola data form di web. Di awal tahun 2001, PHP telah dipakai lebih dari 5 juta dolain di seluruh dunia, dan akan terus bertambah karena kemudahan aplikasi PHP ini dibandingkan dengan bahasa Server side yang lain. (Septian, 2011) 2.9 jQuery jQuery merupakan salah satu pustaka yang dikembangkan dengan menggunakan JavaScrip. Kehadirannya adalah untuk memudahkan penulisan kode JavaScrip. Dengan menggunakan jQuery, penulisan kode JavaScrip menjadi lebih sederhana,(kodenya menjadi ringkas). Selain itu, yang lebih penting lagi, pembuatan halaman web yang interaktif dan menarik menjadi jauh lebih mudah diimplementasikan dari pada kalau anda menuliskan JavaScrip sendiri. (Kadir, 2011) Beberapa kemampuan yang bisa didapatkan dengan menggunakan jQuery disajikan dibawah ini: Menyembunyikan/menampilkan elemen yang menyusun halaman web. Menambahkan/menghapus elemen yang ada dalam halaman web. Melakukan animasi terhadap halaman web, misalnya menggerakkan gambar. Menyajikan table dengan warna berselang-seling untuk setiap baris. Menggunakan Ajax, misalnya untuk mengubah tampilan sebagian data pada halaman web didasarkan jawaban dari server. Selain itu, jQuery juga mendukung penambahan plug-in, yang membuat kemampuan jQuery bertambah pesat. Plug-in adalah tambahan-tambahan yang berjalan di atas jQuery yang membuat pembuatan halaman web jadi lebih mudah atau lebih menarik. (Kadir, 2011)

commit to user


digilib.uns.ac.id

BAB III ANALISA DAN PERANCANGAN SISTEM

3.1 Perancangan Arsitektur Gambar dibawah ini merupakan rancangan arsitektur jaringan komputer yang akan diimplementasikan pada website lelang online. ` Web server

Database server

admin

`

user

Gambar 3.1 Perancangan Arsitektur

3.2 Perancangan Sistem Setelah memperoleh data – data dari hasil penelitian, dibuat sebuah perencanaan sistem sesuai dengan kebutuhan yang ada. Rancangan tersebut meliputi perancangan input dan output. Perancangan sistem ini dimulai dengan perancangan Context Diagram (CD), Data Flow Diagram (DFD) dan Entitas Relationship Diagram (ERD). Agar suatu sistem dapat dipahami dan direalisasikan, maka diperlukan suatu gambaran mengenai alur data dari proses yang terjadi.

3.2.1

Context Diagram (CD) Context Diagram atau diagram konteks ini merupakan penggambaran

secara garis besar sistem portal lelang online yang akan dibangun dengan menampilkan input, proses, dan output dari sistem. Context Diagram sistem ini dapat dilihat pada gambar 3.2.

commit to user

13

14 digilib.uns.ac.id


Admin

Data Lelang Data Konten Data News Data Member Data History

Info Data Lelang Info Data Konten Info Data News Info Data Member Info History

Data Lelang Data Konten Data News

User Non-member

Info Data Lelang Info Data Konten Info Data News

Wanipiro

Data Lelang Data Konten Data News Data Member Data History

User member

Info Data Lelang Info Data Konten Info Data News Info Data Member Info History

Gambar 3.2 Context Diagram Wanipiro

Keterangan : Pada Context Diagram tersebut, terdiri dari 3 entitas yaitu Admin. User Nonmember dan User Member. 1. Admin login dengan user dan password sesuai yang telah ditentukan. 2. Admin mengelola semua konten yang di tampilkan di halaman wanipiro 3. Admin mengontrol semua barang yang di lelang di halaman wanipiro 4. User Nonmember hanya dapat melihat barang apa saja yang di lelang. 5. User Nonmember dapat melakukan registrasi untuk mendaftar menjadi member di website wanipiro. 6. User Member dapat melelang barang miliknya di website wanipiro. 7. User Member dapat menawar barang yang di lelang member lainnya. 8. User Member dapat melihat history penawaran dan lelang barang yang pernah di lakukan selama terdaftar menjadi member.

commit to user



3.2.2

Data Flow Diagram (DFD) DFD Level 0, menggambarkan aliran data yang ada di dalam sistem seperti

yang digambarkan pada proses di dalam Context Diagram. Gambar DFD Level 0 dapat dilihat pada gambar 3.3.

Username dan password Pesan validasi Username dan password Pesan validasi

1 Login

Username dan password Pesan validasi

Admin Data user Info user Info user

2 Management User

Data user

3 Management Lelang

Data lelang

4 Management News

Data news

5 Management Konten

Data konten

6 Management transaksi

data pesanan

7 Management kategori

Data kategori

Data member Info user

Data registrasi

Info lelang Data lelang Info Lelang Info Lelang

Info news Data news Info news Info news

Info lelang

Info news

Data lelang

Data news

User Member

Info konten Data konten Info konten Info konten

Info Konten

Data kontent

konfrimasi pemesanan Pesan validasi Info pesanan data pesanan

Info pesanan

Data bid

Data kategori Info kategori Info kategori Info categori

Info kategori

User Non-member

Gambar 3.3 DFD Level 0 Website Wanipiro

commit to user

Data kategori



Admin

Data member Pesan validasi

2.1 Tambah member

Data member Pesan validasi

2.2 Edit data member

Data member Pesan validasi Data member

Data member

Pesan validasi

Pesan validasi

Data member 2.3 hapus data member

Data member

User member

Pesan validasi

Nama member

Pesan validasi

Data member

2.4 Cari data member

Info member

Info member Nama member

Gambar 3.4 DFD Level 1 Proses 2 Website Wanipiro

Data lelang

3.4 Input data lelang

Pesan validasi

Pesan validasi

Admin

Data lelang Data lelang Pesan validasi

3.1 Edit data lelang

Data lelang Pesan validasi

Data lelang

Pesan validasi

Data lelang Pesan validasi

User member

Data lelang Data lelang

3.2 hapus data lelang

Pesan validasi

Data lelang

Pesan validasi Input nama lelang Info lelang Input nama lelang

3.3 Cari data lelang

Info lelang Data nama lelang

Info lelang

Gambar 3.5 DFD Level 1 Proses 3 Website Wanipiro commit to user



Admin

Data news Pesan validasi


4.1 Tambah news

4.2 Edit data news


Data news

Pesan validasi

Data news Data news

Pesan validasi

Judul berita

Info news

4.3 hapus data news

4.4 Cari data news

Pesan validasi

Data news

Info news Judul berita


commit to user



Data konten contact

Pesan validasi

Data privacy and policy

Pesan validasi

5.1 Edit contact

5.2 Edit privacy and policy

Data konten contact Pesan validasi

Data privacy and policy Pesan validasi

Data banner

Pesan validasi

5.3 Edit banner

Data banner Pesan validasi

Pengunjung Member

Data term

Pesan validasi

5.4 Edit Term

Data term Pesan validasi

Info konten Request konten

Admin

Data konten About us Pesan validasi

Data ym

5.5 Edit about us

5.6 Edit YM

Pesan validasi Data about us

Data Konten

Request data info konten

Data ym

Pesan validasi

5.12 View Content Request konten Info konten

Pesan validasi

Pengunjung Non Member Data meta keyword Pesan validasi

Data meta deskription Pesan validasi

5.7 Edit meta keyword

Data meta keyword Pesan validasi

5.8 Edit meta deskripsion

Data meta deskription Pesan validasi


commit to user



Pesan validasi status transaksi

6.1 Edit Status transaksi

Admin

Input nomer faktur

6.2 Cari data transaksi

Info transaksi

Status transaksi Pesan validasi

Data Nomer faktur

Info transaksi

Data bid User member

Data transaksi

Pesan validasi

6.3 hapus data transaksi

6.4 input data transaksi

Input data transaksi

Pesan validasi dan info transaksi

Pesan validasi

Data transaksi

Pesan validasi dan info transaksi Data transaksi

Gambar 3.8 DFD Level 1 Proses 6 Website Wanipiro Data kategori

Admin

Pesan validasi

Data kategori Pesan validasi

7.1 Tambah kategori

Data kategori Pesan validasi

7.2 Edit data kategori

Data kategori

Pesan validasi

Data kategori Data kategori

Pesan validasi

Nama kategori Info kategori

7.3 hapus data kategori

7.4 Cari data kategori

Pesan validasi

Data kategori

Info kategori Nama kategori

commit to user Gambar 3.9 DFD Level 1 Proses 7 Website Wanipiro



3.2.3

Entity Relationship Diagram (ERD) ktp

date_reg id

status

email

lelang

password

member

username harga

member

id

1

M

waktu

alamat

bid ava

id

melakukan

nama

M

telp

tgl_lahir

M M

lelang

kat

no_ktp harga_awal

memiliki tanggal

1

member

kat

M

id

deskripsi

memiliki

1

barang

kat_par gambar

kategori id

harga_akhir

kategori

parent

Gambar 3.10 ERD (Entity Relationship Diagram)

3.2.4

Relasi Antar Tabel

Gambar commit 3.11 Relasi Antar Tabel to user

lama_lelang



3.2.5

Struktur Tabel Berikut Struktur Tabel dari rancangan diagram diatas: 1. Tabel admin Fungsi: untuk menyimpan record list administrator yang dapat mengakses halaman administrator, yang berisi username dan password administrator. Dalam tabel admin terdapat beberapa field yang menjadikanya sebuah tabel, filed tersebut antara lain: a.

id field id merupakan suatu field yang mana datanya berisi id pada suatu record dengan primary key dan auto increment.

b.

username field username merupakan suatu field yang mana datanya berisi username administrator.

c.

password field password merupakan suatu field yang mana datanya berisi password administrator.

Tabel 3.1 admin Field id username password

Type

Size

int 11 varchar 111 varchar 32

Keterangan Primary Key

Auto not_null increment not_null not_null

2. Tabel banner Fungsi: untuk menyimpan nama gambar banner yang di tampilkan pada halaman index sehingga gambar banner pada halaman index dapat di edit. Dalam tabel banner terdapat beberapa field yang menjadikanya sebuah tabel, field tersebut antara lain: commit to user



a.


b.

judul field judul merupakan suatu field yang mana datanya berisi nama banner .

c.

banner field banner merupakan suatu field yang mana datanya berisi nama file gambar banner yang ditampilkan pada halaman index.

Tabel 3.2 banner Field id judul banner

Type int varchar text

Size Keterangan 11 Primary Key not_null Auto increment 111 not_null not_null

3. Tabel bid Fungsi: untuk menyimpan record penawaran suatu member pada tiap barang yang di lelang. Dalam tabel bid terdapat beberapa field yang menjadikanya sebuah tabel, field tersebut antara lain: a.


b.

lelang field lelang merupakan suatu field yang berisi id dari tabel lelang.

c.

member field member merupakan suatu field yang mana datanya berisi id dari tabel member yang mana member tersebut melakukan penawaran terhadap barang yang di lelang. commit to user



d.

harga field harga merupakan suatu field yang mana datanya berisi harga dari penawaran suatu member terhadap barang yang di lelang.

e.

waktu field waktu merupakan suatu field yang mana datanya berisi waktu kapan suatu member melakukan penawaran terhadap suatu lelang.

Tabel 3.3 bid Field id lelang member harga waktu

Type Size Keterangan int 11 Primary Key not_null Auto increment int 11 not_null int 11 not_null double not_null datetime not_null

4. Tabel conten Fungsi: untuk menyimpan record konten-konten yang di tampilkan pada halaman website, sehingga konten-konten tersebut dapat di edit. Dalam tabel conten terdapat beberapa field yang menjadikanya sebuah tabel, field tersebut antara lain: a.


b.

judul field judul merupakan suatu field yang mana datanya berisi judul conten pada suatu record.

c.

isi field isi merupakan suatu field yang mana datanya berisi text yang ditampilkan pada suatu conten.

d.

modif field modif merupakan suatu field yang mana datanya berisi tanggal terakhir pengeditan commit topada usersuatu record.



Tabel 3.4 conten Field

Type int varchar text date

id judul isi modif

Size Keterangan 11 Primary Key not_null Auto increment 111 not_null not_null not_null

5. Tabel kategori Fungsi: untuk mengelompokkan barang-barang yang di lelang menjadi beberapa jenis kategori. Dalam tabel kategori terdapat beberapa field yang menjadikanya sebuah tabel, field tersebut antara lain: a.


b.

nama field nama merupakan suatu field yang mana datanya berisi nama kategori.

c.

parent field parent merupakan suatu field yang mana datanya berisi id dari tabel kat_parent.

Tabel 3.5 kategori Field id nama parent

Type int varchar int

Size

Keterangan Primary Auto 11 Key not_null increment 111 not_null 11 not_null

6. Tabel kat_par Fungsi: untuk mengelompokkan kategori-kategori yang di lelang menjadi beberapa sub kategori. commit to user



Dalam tabel kat_par terdapat beberapa field yang menjadikanya sebuah tabel, field tersebut antara lain: a.


b.

kategori field nama merupakan suatu field yang mana datanya berisi id dari table kategori

c.

deskripsi field dekripsi merupakan suatu field yang mana datanya berisi deskripsi dari kategori induk.

Tabel 3.6 kat_par Field id kategori deskripsi

Type int int text

Size

Keterangan Primary Auto 11 Key not_null increment 11 not_null null

7. Tabel lelang Fungsi: untuk menyimpan record barang-barang yang di lelang oleh member. Dalam tabel lelang terdapat beberapa field yang menjadikanya sebuah tabel, field tersebut antara lain: a.


b.

barang field barang merupakan suatu field yang mana datanya berisi nama barang yang di lelang.

c.

gambar commit to user



field gambar merupakan suatu field yang mana datanya berisi gambar dari barang yang di lelang. d.

deskripsi field deskripsi merupakan suatu field yang mana datanya berisi deskripsi dari barang yang di lelang.

e.

kat field kat merupakan suatu field yang mana datanya id dari table kategori.

f.

tanggal field tanggal merupakan suatu field yang mana datanya berisi waktu barang tersebut dilelang.

g.

member field member merupakan suatu field yang mana datanya berisi id member si pelelang yang di ambil dari tabel member.

h.

harga_awal field harga_awal merupakan suatu field yang mana datanya berisi harga awal dari barang yang di lelang.

i.

lama_lelang field lama_lelang merupakan suatu field yang mana datanya berisi lama waktu lelang dari suatu barang yang di lelang.

Tabel 3.7 lelang Field id barang gambar deskripsi kat tanggal member harga_awal lama_lelang

Type

Size

Primary int 11 Key varchar 111 text text int 11 date int 11 double varchar commit 111 to user

Keterangan not_null not_null not_null not_null not_null not_null not_null not_null not_null

Auto increment



8. Tabel member Fungsi: untuk menyimpan record user yang terdaftar sebagai member website. Dalam tabel member terdapat beberapa field yang menjadikanya sebuah tabel, field tersebut antara lain: a.


b.

username field username merupakan suatu field yang mana datanya username yang digunakan user untuk login sebagai member.

c.

password field password merupakan suatu field yang mana datanya password yang digunakan user untuk login sebagai member.

d.

email field email merupakan suatu field yang mana datanya berisi alamat email member.

e.

nama field nama merupakan suatu field yang mana datanya berisi nama lengkap member.

f.

jk field jk merupakan suatu field yang mana datanya berisi jenis kelamin member.

g.

alamat field alamat merupakan suatu field yang mana datanya berisi alamat rumah member.

h.

telp field telp merupakan suatu field yang mana datanya berisi nomer telpon member.

i.

no_ktp

commit to user



field no_ktp merupakan suatu field yang mana datanya berisi nomer ktp member sebagai syarat registrasi. j.

ava field ava merupakan suatu field yang mana datanya berisi nama file gambar avatar member.

k.

date_reg field date_reg merupakan suatu field yang mana datanya berisi tanggal daftar user sebagai member.

l.

status field status merupakan suatu field yang mana datanya berisi 0, 1 dan 2, yang mana jika status member = 1, maka member tersebut aktif. Sedangkan jika status member = 2, maka member tersebut di blok. Dan jika status member=0 maka member tersebut belum di konfirmasi oleh admin.

m.

ktp field ktp merupakan suatu field yang mana datanya berisi nama file gambar ktp yang di upload member sebagai syarat registrasi.

Tabel 3.8 member Field id username password email nama jk alamat telp no_ktp ava date_reg status ktp

Type

Size

Keterangan Primary Auto int 11 Key not_null increment varchar 111 not_null varchar 32 not_null varchar 111 null varchar 111 null varchar 1 null text null varchar 20 null varchar 111 null text null date null int 11 null commit to user text null



9. Tabel news Fungsi: untuk menyimpan berita-berita yang di tampilkan pada halaman News, sehingga administrator dapat mengedit, menambahkan dan menghapus berita yang di tampilkan di halaman News. Dalam news terdapat beberapa field yang menjadikanya sebuah tabel, field tersebut antara lain: a.


b.

judul field title merupakan suatu field yang mana datanya berisi judul dari berita pada record tersebut.

c.

thum field thum merupakan suatu field yang mana datanya berisi nama file gambar yang di gunakan sebagai thumbnail di list berita.

d.

isi field ini merupakan suatu field yang mana datanya berisi isi berita yang tampilkan di halaman News.

e.

date field date merupakan suatu field yang mana datanya berisi tanggal berita di buat.

f.

status field news_status merupakan suatu field yang mana datanya berisi nilai 1 dan 2 . yang mana jika status = 1, maka news di post. Sedangkan jika status = 2, maka news baru sebagai draf saja belum di publikasikan.

commit to user



Tabel 3.9 news Field id judul thum isi date status

Type

Size Primary 11 Key 111 111

int varchar varchar text date int

11

Keterangan Auto not_null increment not_null not_null not_null not_null not_null

10. Tabel email Fungsi: untuk menyimpan email yang digunakan untuk alamat pengiriman contact us. Dalam tabel email terdapat beberapa field yang menjadikanya sebuah tabel, field tersebut antara lain:

a.


b.

email field email merupakan suatu field yang mana datanya berisi alamat email yang digunakan untuk mengirim pesan dari member yang berada di contact us.

Tabel 3.10 email Field id email

Type int varchar

Size Primary 11 Key 111

commit to user

Keterangan not_null not_null

Auto increment



3.2.6

Struktur Navigasi a. Halaman User Halaman Utama

Menu Utama

Lelang Barang

Home

Home

Register

Tentang Kami

History Lelang

(Non-member)

History Penawaran

(member)

Edit Informasi User

Menu Information

Profile

Login (Non-member)

Logout (member)

Gambar 3.12 Struktur Navigasi User

commit to user

Kebijakan Privasi Peraturan dan Tata Tertib Hubungi Kami



b. Halaman Administrator Halaman Administrator

Site Control Panel

Log Out

Setting Admin Setting Member Member Management

Add New Member

Category Parent Management

Category Management

Auction

Auction History

News Management

Add New News

Category

Auction

News

Content

Term and Agreement Editor About Us Editor

Privacy Policy Editor

Contact Us

Contact Infortamtion Editor

Banner Editor

Email Editor

Gambar 3.13 Struktur Navigasi Administrator

commit to user

Add New Category


digilib.uns.ac.id

BAB IV IMPLEMENTASI DAN ANALISA

4.1 Kebutuhan Sistem Dalam pembangunan portal lelang online berbasis website ini terdapat beberapa perangkat lunak dan perangkat keras yang digunakan untuk mendukung proses pembuatan aplikasi, yaitu: 1. Perangkat Keras (Hardware) Perangkat keras yang digunakan dalam pembangunan portal lelang online ini adalah sebagai berikut: 1 Buah notebook spesifikasi:  Prosessor Core 2 duo 2.0 GHz  RAM 2 GB  Hardisk 250 GB

2. Perangkat Lunak (Sofware) Perangkat lunak yang digunakan dalam pembangunan portal lelang online ini adalah sebagai berikut: XAMPP 1.7.3 (Apache dan MySQL) Adobe Dreamweaver CS5 Adobe Photoshop CS4 Corel Draw X4 Mozilla Firefox

commit to user

33



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.

commit to user



commit to user Gambar 4.1 Halaman Home



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 commit to user manapun menu register diklik dengan menggunakan JQuery, jadi di halaman



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.

commit to user



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. commit to user



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 commit to user 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.

Gambar 4.6 Halaman Detail Barang

commit to user



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.

commit to user



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.

commit to user



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.

commit to user



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.

tampilan dari halaman administrator.

commit to user

Berikut



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.

Gambar 4.11 Halaman Index Administrator

commit to user



3. Halaman List Data Berikut adalah tampilan dari halaman administrator ketika menampilkan list data dari data base. Untuk penampilan pada tiap menu sama dengan lainnya. Yang mana ketika judul atau nama listnya diklik maka akan melinkkan data ke detail data yang dipilih. Pada halaman list data ini terdapat beberapa menu yang digunakan untuk mengelola data, menu tersebut adalah New yang berfungsi untuk menambah data baru, home yang berfungsi mengembalikan tampilan ke tampilan index, dan delete yang berfungsi untuk menghapus record-record data dengan menceklis terlebih dahulu data yang akan dihapus.

Gambar 4.12 Halaman Tampil Data Administrator

4. Halaman Tambah Data Administator Hamalan tambah data adalah halaman yang digunakan untuk menabahkan data kedalam data base, misal menambah member, menambah berita atau menambah kategori. Berikut tampilan dari halaman tembah data.

commit to user



Gambar 4.13 Halaman Tambah Data Administrator

5. Halaman Detail Data Administrator Hamalan detail data adalah halaman yang muncul ketika salah satu judul atau nama record diklik. Di halaman detail data ini terdapat fasilitas mengedit data. Berikut tampilan dari detail data administrator.

Gambar 4.14 Halaman Detail Data Administrator commit to user


digilib.uns.ac.id

BAB V PENUTUP

4.1 Kesimpulan Portal Lelang Online berbasis web telah berhasil di selesaikan. Sesuai judulnya, website ini digunakan untuk melakukan pelelangan barang secara online. Untuk dapat mekakukan pelelangan dan penawaran barang, pengunjung harus mendaftar member dan di konfirmasi oleh administrator website terlebih dahulu. Seorang member dapat melelang barang kemudian dapat juga menawar barang yang di lelang oleh member lain. Ketika registrasi pengunjung diharapkan melampirkan foto KTP untuk penyesuaian data yang di masukkan ketika melakukan registrasi sehingga dapat menjadi bahan pertimbangan seorang administrator ketika mengkonfirmasi member tersebut. Website ini terdapat fasilitas mengatur konten-konten yang di tampilkan di dalam website seperti kontak infromasi, tentang kami, peraturan dan tata tertib, dan juga banner. Website ini juga memiliki fasilitas berita, yang mana berita yang di posting di atur oleh administrator.

4.2 Saran Website portal lelang online ini masih terdapat beberapa kekurangan seperti masalah sekuritas web dan validasinya, untuk kedepannya dapat ditingkatkan sekuritas web agar lebih aman dan terjamin.

commit to user

48

PEMBANGUNAN PORTAL LELANG ONLINE BERBASIS WEB TUGAS AKHIR

Recommend Documents