TAMA PRIAMBODO M3109075

(1)

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

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

(2)

commit to user

ii

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

(3)

commit to user

iii

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

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

Ketua Program Studi DIII Teknik Informatika UNS

(4)

commit to user

iv

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.

(5)

commit to user

v ABSTRAK

Tama Priambodo. 2012. PEMBANGUNAN PORTAL LELANG ONLINE

BERBASIS WEBSITE. Teknik Informatika, Diploma III Teknik

Informatikan, Fakultas Matematika dan Ilmu Pengetahuan 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.

(6)

commit to user

vi

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

(7)

commit to user

vii

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

(8)

commit to user

viii 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 EntityRelationshipDiagram (ERD) ... 7

2.3.1 Entity ... 8

(9)

commit to user

ix

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

(10)

commit to user

x

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

(11)

commit to user

xi

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

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

(12)

commit to user

xii

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

(13)

commit to user

1 BAB I

PENDAHULUAN

1.1Latar 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

(14)

commit to user

1.2Rumusan 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.3Batasan 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.4Tujuan 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

(15)

commit to user

3

1.5Metodologi 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

(16)

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

(17)

commit to user

5 BAB II

LANDASAN TEORI

2.1Lelang

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

(18)

2.2Data 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)

(19)

commit to user

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.3EntityRelationshipDiagram (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

(20)

commit to user

2.3.1 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)

(21)

commit to user

9

2.4Website

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)

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.

(22)

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.5Bahasa Pemograman HTML

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang

digunakan untuk membuat halaman web dan menampilkan berbagai informasi di

(23)

commit to user

11

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.6Bahasa 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.7Bahasa 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.8Bahasa 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

(24)

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.9jQuery

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

(25)

commit to user

13 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.

`

Database server Web server

admin

user `

Gambar 3.1 Perancangan Arsitektur

3.2Perancangan 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

(26)

Wanipiro Admin User Non-member 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

Info Data Lelang Info Data Konten Info Data News

User member Data Lelang Data Konten Data News Data Member Data History

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

(27)

commit to user

15

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.

Admin 1 Login 2 Management User 3 Management Lelang Data member Data lelang Data news Data kategori Data bid 4 Management News 5 Management Konten 6 Management transaksi 7 Management kategori Data kontent

Username dan password

Pesan validasi Data user Info user Data lelang Info lelang Data news Info news Data konten Info Konten data pesanan Info pesanan Data kategori Info kategori Username dan password

Pesan validasi Data user Data lelang Data news Data konten konfrimasi pemesanan Data kategori User Member User Non-member Info user Info Lelang Info news Info konten Info pesanan data pesanan Info kategori Pesan validasi

Username dan password

Info Lelang Info news Info konten Info categori Data registrasi Info user Info lelang Info news Info konten Pesan validasi Info kategori

(28)

commit to user Admin Data member User member 2.1 Tambah member 2.2 Edit data member 2.3 hapus data member 2.4 Cari data member Data member Data member Data member Data member Nama member Info member Pesan validasi Pesan validasi Pesan validasi Data member Data member Nama member Data member Pesan validasi Info member Pesan validasi Pesan validasi Pesan validasi

Gambar 3.4 DFD Level 1 Proses 2 Website Wanipiro

Admin Data lelang User member 3.1 Edit data lelang 3.2 hapus data lelang 3.3 Cari data lelang Data lelang Data lelang

Data nama lelang Info lelang Pesan validasi

Pesan validasi Data lelang

Data lelang

Input nama lelang

Pesan validasi Pesan validasi Info lelang Info lelang 3.4 Input data lelang Data lelang Pesan validasi Data lelang Pesan validasi Data lelang Pesan validasi Data lelang Pesan validasi

(29)

commit to user

17

Admin

Data news 4.1

Tambah news

4.2 Edit data

news

4.3 hapus data

news

4.4 Cari data

news Data news

Data news

Judul berita Info news Pesan validasi

Pesan validasi Pesan validasi

Data news

Judul berita Pesan validasi

Pesan validasi

Info news

(30)

Pengunjung Member 5.5 Edit about us 5.4 Edit Term 5.2 Edit privacy and policy 5.7 Edit meta keyword 5.6 Edit YM Data Konten Admin 5.12 View Content

Data konten contact

Data privacy and policy

Data banner

Data term

Data konten About us

Data ym

Data meta keyword

Data meta deskription

Data konten contact

Data privacy and policy

Data banner

Data term

Data about us

Data ym

Data meta keyword

[image:30.595.114.506.110.523.2]

Data meta deskription Pesan validasi Pesan validasi Pesan validasi info konten Info konten Request data Pesan validasi Pesan validasi Pesan validasi Pesan validasi Pesan validasi Request konten Pengunjung Non Member Info konten Request konten Pesan validasi Pesan validasi Pesan validasi Pesan validasi Pesan validasi Pesan validasi Pesan validasi Pesan validasi 5.3 Edit banner 5.8 Edit meta deskripsion 5.1 Edit contact

(31)

commit to user

19 Admin Data bid User member 6.1 Edit Status transaksi 6.2 Cari data transaksi 6.3 hapus data transaksi 6.4 input data transaksi status transaksi Status transaksi

Data Nomer faktur

Data transaksi

Data transaksi Pesan validasi dan info transaksi

Pesan validasi Info transaksi Pesan validasi

Input nomer faktur

Data transaksi

Input data transaksi Pesan validasi

Info transaksi

Pesan validasi

[image:31.595.116.509.107.741.2]

Pesan validasi dan info transaksi

Gambar 3.8 DFD Level 1 Proses 6 Website Wanipiro

Admin Data kategori 7.1 Tambah kategori 7.2 Edit data kategori 7.3 hapus data kategori 7.4 Cari data kategori

Data kategori Data kategori

Data kategori Data kategori Nama kategori Info kategori Pesan validasi Pesan validasi Pesan validasi Data kategori Data kategori Nama kategori Pesan validasi Pesan validasi Pesan validasi Info kategori

(32)

3.2.3 Entity Relationship Diagram (ERD)

memiliki idid member

lelang username password email nama alamat telp tgl_lahir no_ktp ava date_reg status ktp id barang gambar deskripsi kat tanggal member harga_awal lama_lelang harga_akhir lelang bid melakukan 1 M M M id member harga waktu kat id kategori parent kat_par id kategori M 1 memiliki 1 M

Gambar 3.10 ERD (Entity Relationship Diagram)

3.2.4 Relasi Antar Tabel

[image:32.595.115.508.120.713.2]

(33)

commit to user

21

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.

[image:33.595.156.515.244.592.2]

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 Type Size Keterangan

id int 11 Primary Key not_null

Auto increment

username varchar 111 not_null

password varchar 32 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

(34)

commit to user

a. id

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

[image:34.595.141.516.72.705.2]

file gambar banner yang ditampilkan pada halaman index.

Tabel 3.2 banner

Field Type Size Keterangan

id int 11 Primary Key not_null Auto increment

judul varchar 111 not_null

banner text 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. id

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

(35)

commit to user

23

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

[image:35.595.141.514.252.717.2]

kapan suatu member melakukan penawaran terhadap suatu lelang.

Tabel 3.3 bid

Field Type Size Keterangan

lelang int 11 not_null

member int 11 not_null

harga double not_null

waktu 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. id

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

(36)

Tabel 3.4 conten

Field Type Size Keterangan

isi text not_null

modif date 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

a. id

b. nama

field nama merupakan suatu field yang mana datanya berisi nama

kategori.

c. parent

[image:36.595.138.514.134.581.2]

field parent merupakan suatu field yang mana datanya berisi id dari

[image:36.595.149.513.552.659.2]

tabel kat_parent.

Tabel 3.5 kategori

Field Type Size Keterangan

id int 11

Primary

Key not_null

Auto increment

nama varchar 111 not_null

parent int 11 not_null

6. Tabel kat_par

Fungsi: untuk mengelompokkan kategori-kategori yang di lelang

(37)

commit to user

25

Dalam tabel kat_par terdapat beberapa field yang menjadikanya sebuah

a. id

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 Type Size Keterangan

id int 11

Primary

Key not_null

Auto increment

kategori int 11 not_null

deskripsi text null

7. Tabel lelang

Fungsi: untuk menyimpan record barang-barang yang di lelang oleh

member.

Dalam tabel lelang terdapat beberapa field yang menjadikanya sebuah

a. id

b. barang

field barang merupakan suatu field yang mana datanya berisi nama

barang yang di lelang.

(38)

commit to user

[image:38.595.157.515.123.496.2]

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

[image:38.595.158.516.560.744.2]

lama waktu lelang dari suatu barang yang di lelang.

Tabel 3.7 lelang

Field Type Size Keterangan

id int 11

Primary

Key not_null

Auto increment

barang varchar 111 not_null

gambar text not_null

deskripsi text not_null

kat int 11 not_null

tanggal date not_null

member int 11 not_null

harga_awal double not_null

(39)

commit to user

27

8. Tabel member

Fungsi: untuk menyimpan record user yang terdaftar sebagai member

website.

[image:39.595.155.514.237.750.2]

Dalam tabel member terdapat beberapa field yang menjadikanya sebuah

a. id

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.

(40)

commit to user

field no_ktp merupakan suatu field yang mana datanya berisi

nomer ktp member sebagai syarat registrasi.

j. ava

[image:40.595.160.517.139.750.2]

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 Type Size Keterangan

id int 11

Primary

Key not_null

Auto increment

username varchar 111 not_null

password varchar 32 not_null

email varchar 111 null

nama varchar 111 null

jk varchar 1 null

alamat text null

telp varchar 20 null

no_ktp varchar 111 null

ava text null

date_reg date null

status int 11 null

(41)

commit to user

29

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. id

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

(42)

Tabel 3.9 news

Field Type Size Keterangan

id int 11

Primary

Key not_null

Auto increment

thum varchar 111 not_null

isi text not_null

date date not_null

status int 11 not_null

10.Tabel email

Fungsi: untuk menyimpan email yang digunakan untuk alamat

pengiriman contact us.

[image:42.595.142.517.131.528.2]

Dalam tabel email terdapat beberapa field yang menjadikanya sebuah

a. id

b. email

field email merupakan suatu field yang mana datanya berisi alamat

email yang digunakan untuk mengirim pesan dari member yang

[image:42.595.157.522.580.655.2]

berada di contact us.

Tabel 3.10 email

Field Type Size Keterangan

id int 11

Primary

Key not_null

Auto increment

(43)

commit to user

31

3.2.6 Struktur Navigasi

a. Halaman User

Halaman Utama

Menu Utama

Home

Register

(Non-member)

Profile

(member)

Login

(Non-member)

Menu Information

Home

Tentang Kami

Kebijakan Privasi

Peraturan dan Tata

Tertib

Hubungi Kami Logout

(member)

Lelang Barang

History Lelang

History Penawaran

Edit Informasi

[image:43.595.139.539.151.539.2]

User

(44)

b. Halaman Administrator

Halaman Administrator

Site

Setting

Member

33 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

(46)

4.2Implementasi 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

(47)

commit to user

35

(48)

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

[image:48.595.113.512.232.603.2]

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

(49)

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

[image:49.595.114.509.208.496.2]

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

(50)

[image:50.595.114.512.109.541.2]

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

(51)

commit to user

[image:51.595.114.513.105.584.2]

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

(52)

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.

[image:52.595.114.513.247.677.2]

Berikut adalah tampilan dari halaman detail barang.

(53)

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

(54)

[image:54.595.115.513.110.469.2]

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

(55)

commit to user

[image:55.595.114.517.114.488.2]

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

(56)

[image:56.595.116.513.106.499.2]

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

(57)

commit to user

[image:57.595.115.507.122.632.2]

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.

(58)

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

[image:58.595.116.508.245.524.2]

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

(59)

commit to user

[image:59.595.115.512.105.693.2]

47

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.

(60)

commit to user

48 BAB V

PENUTUP

4.1Kesimpulan

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.2Saran

Website portal lelang online ini masih terdapat beberapa kekurangan seperti

masalah sekuritas web dan validasinya, untuk kedepannya dapat ditingkatkan