TUGAS AKHIR

PORTAL KONTES DESAIN BERBASIS WEB

Disusun oleh:
Afif Muzi Mahmudi
461203800

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS 17 AGUSTUS 1945 SURABAYA
2016
 TUGAS AKHIR
PORTAL KONTES DESAIN BERBASIS WEB
Diajukan sebagai salah satu syarat untuk memperoleh gelar sarjana

Disusun oleh:
Afif Muzi Mahmudi
461203800

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS 17 AGUSTUS 1945 SURABAYA
2016

i
 PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS 17 AGUSTUS 1945 SURABAYA
LEMBAR PENGESAHAN TUGAS AKHIR

NAMA : Afif Muzi Mahmudi

NBI : 461203800
PROGRAM STUDI : Teknik Informatika
FAKULTAS : Teknik
JUDUL : PORTAL KONTES DESAIN BERBASIS WEB

Mengetahui / Menyetujui
Dosen Pembimbing

Agus Darwanto, Ir., MM

NPP. 20460.95.0407

Dekan Fakultas Teknik Ketua Program Studi

Universitas 17 Agustus 1945 Teknik Infomatika
Surabaya Universitas 17 Agustus 1945
Surabaya

Dr. Ir. Muaffaq A. Jani, M.Eng Geri Kusnanto, S.Kom., MM

NPP. 20450.00.0515 NPP. 20460.94.0401

ii
 KATA PENGANTAR/UCAPAN TERIMA KASIH

Puji syukur kami panjatkan kepada Allah yang Maha Kuasa yang senantiasa
melimpahkan rahmat dan hidayahNya sehingga dapat terselesaikan Tugas Akhir
yang berjudul:

PORTAL KONTES DESAIN BERBASIS WEB

Tugas akhir ini dimaksudkan untuk memenuhi salah satu persyaratan

menyelesaikan studi di Universitas 17 Agustus 1945 Surabaya. Penulis menyadari
bahwa, tanpa bantuan dan bimbingan dari berbagai pihak, dari masa perkuliahan
sampai pada penyusunan tugas akhir ini, sangatlah sulit bagi penulis untuk
menyelesaikan tugas akhir ini. Oleh karena itu, penulis mengucapkan terima kasih
kepada:
1. Bapak Dr. Ir. Muaffaq Achmad Jani, M.Eng., selaku Dekan Fakultas
Teknik, Universitas 17 Agustus 1945 Surabaya.
2. Bapak Geri Kusnanto, S.Kom., MM., selaku Ketua Program Studi Teknik,
Informatika Universitas 17 Agustus 1945 Surabaya.
3. Bapak Ir. Agus Darwanto, MM selaku dosen pembimbing saya, yang telah
memberikan petunjuk, pengarahan serta bimbingan dari awal pembuatan
sistem.
4. Keluarga tercinta, Mustain dan Nurhasanah selaku orang tua yang selalu
mendoakan dan memotivasi penulis hingga terselesaikannya Tugas Akhir
ini.
5. Lilis Nur Indah Sari, Ardy Rendra, Taufiqur Rohman, Wildan Akhmad,
Riqi Eko, Alvian Anton, Etwin Tribudianto dan teman-teman Teknik
Informatika angkatan 2012 yang telah membantu menyelesaikan Tugas
Akhir ini.
6. Semua pihak lain yang tidak dapat disebutkan satu per satu atas segala
bantuannya.

iii
Akhir kata, penulis berharap Tuhan Yang Maha Esa berkenan membalas segala
kebaikan semua pihak yang telah membantu. Semoga tugas akhir ini membawa
manfaat bagi pengembangan ilmu.

Surabaya, 24 Juli 2016

Penulis

iv
 PERNYATAAN KEASLIAN DAN PERSETUJUAN PUBLIKASI
TUGAS AKHIR

Saya yang bertanda tangan di bawah ini

Nama : Afif Muzi Mahmudi
NBI : 461203800
Fakultas/Program Studi : Teknik/Teknik Informatika
Judul Tugas Akhir : Portal Kontes Desain Berbasis Web

Menyatakan dengan sesungguhnya bahwa :

1. Tugas akhir dengan judul diatas bukan merupakan tiruan atau duplikasi dari
Tugas Akhir yang sudah dipublikasikan dan atau pernah dipakai untuk
mendapatkan gelar Sarjana Teknik di lingkungan Universitas 17 Agustus
1945 Surabaya maupun di perguruan tinggi atau instansi manapun, kecuali
bagian yang sumber informasinya dicantumkan sebagaimana mestinya.
2. Tugas Akhir dengan judul diatas bukan merupakan plagiarism, pencurian
hasil karya milik orang lain, hasil kerja orang lain untuk kepentingan saya
karena hubungan material maupun non-material, ataupun segala
kemungkinan lain yang pada hakekatnya bukan merupakan karya tulis tugas
akhir saya secara orisinil dan otentik.
3. Demi pengembangan ilmu pengetahuan, saya memberikan hak atas tugas
akhir ini kepada Universitas 17 Agustus 1945 Surabaya untuk menyimpan,
mengalihmedia/formatkan, mengelola dalam bentuk pangkalan data
(database), merawat, dan memublikasikan tugas akhir saya selama tetap
mencantumkan nama saya sebagai penulis/pencipta dan sebagai pemilik
Hak Cipta.
4. Pernyataan ini saya buat dengan kesadaran sendiri dan tidak atas tekanan
ataupun paksaan dari pihak maupun demi menegakan integritas akademik
di institusi ini dan apabila kemudian hari diduga kuat ada ketidaksesuaian
antara fakta dengan kenyataan ini, saya bersedia diproses oleh tim Fakultas
yang dibentuk untuk melakukan verifikasi, dengan sanksi terberat berupa
pembatalan kelulusan/kesarjanaan.

Surabaya, 24 Juli 2016

Afif Muzi Mahmudi

461203800

v
 ABSTRAK

Nama : Afif Muzi Mahmudi

Program Studi : Teknik Informatika
Judul : Portal Kontes Desain Berbasis Web

Internet mengalami perkembangan yang sangat pesat pada saat ini, sehingga
memberikan kemudahan bagi para penggunanya untuk mendapatkan informasi
dan berinteraksi dengan sesama pengguna tanpa mengenal batas ruang dan
waktu. Seiring dengan bertambah pesatnya penggunaan internet maka website
juga mengalami perkembangan yang pesat. Berbagai macam website telah
dibuat oleh pengguna website. Salah satu website yang telah dibuat adalah
website kontes desain. Namun website kontes desain baru ada sedikit sedangkan
peminatnya semakin bertambah banyak untuk itulah dibuat website portal
kontes desain yang bertujuan untuk menfasilitasi dan mempermudah orang
yang membutuhkan desain dengan para desainer. Website ini dibuat
menggunakan bahasa pemrograman PHP, Javascript dan database MySql.
Portal kontes desain dirancang dengan fitur user interface yang diharapkan
dapat memudahkan orang yang ingin mendapatkan desain dengan para
desainer.

Kata Kunci: Kontes Desain, Website, PHP, MySQL, Database

vi
 ABSTRACT
Name : Afif Muzi Mahmudi
Study Program : Informatics Engineering
Title : Portal Web-based Design Contest

The internet undergo development which is very fast at the moment , So as to give
facilities for users to get information and interact with other users beyond the space
and time. Along with increase the rapid internet use so website also got that
incredible expantion. variety of websites have made by the users. One of websites
which have been made is website design contest. But website design contest there
is little while about their enthusiasts has been increased. For that made portal
website contest design aimed at all depends on simplify the people who need design
with designers. This website made use of programming language PHP, Javascript
and database MySql. Portal design contest is designed with user interfaces that are
expected to make it easier for people who want to get the design with the designers.

Keyword: Design Contest Website, PHP, MySQL, Database

vii
 DAFTAR ISI
HALAMAN JUDUL................................................................................................ i
LEMBAR PENGESAHAN .................................................................................... ii
KATA PENGANTAR/UCAPAN TERIMA KASIH ............................................ iii
PERNYATAAN KEASLIAN & PERSETUJUAN PUBLIKASI TA .....................v
ABSTRAK ............................................................................................................. vi
DAFTAR ISI ........................................................................................................ viii
DAFTAR GAMBAR ............................................................................................. xi
DAFTAR TABEL ................................................................................................ xiii
1. PENDAHULUAN ...............................................................................................1
1.1 Latar Belakang ...............................................................................................1
1.2 Rumusan Masalah ..........................................................................................2
1.3 Tujuan Penelitian ...........................................................................................2
1.4 Manfaat penelitian ..........................................................................................2
1.5 Sistematika Penulisan.....................................................................................2
2. TINJAUAN PUSTAKA .....................................................................................4
2.1 Sistem .............................................................................................................4
2.2 SDLC (System Development Life Cycle)......................................................4
2.3 Relasi Antar Tabel..........................................................................................5
2.4 DFD (Data Flow Diagram) ............................................................................5
2.5 Diagram Konteks ...........................................................................................5
2.6 Perancangan Basis Data .................................................................................5
2.7 Website...........................................................................................................6
2.8 XAMPP ..........................................................................................................6
2.9 Apache............................................................................................................7
2.10 Notepad++ ...................................................................................................7
2.11 Pemrograman Web .......................................................................................7
3. METODE PENELITIAN ..................................................................................9
3.1 Metode Pengumpulan Data ............................................................................9
3.2 Metode Pengembangan Sistem ......................................................................9
3.2.1 Perencanaan ....................................................................................9
3.2.2 Pembuatan .....................................................................................10
3.2.3 Implementasi .................................................................................10
3.3 Diagram Konteks .........................................................................................10
3.4 DFD (Data Flow Diagram) .........................................................................11
3.4.1 DFD Level 1..................................................................................11
3.4.2 DFD Level 2 Proses 1 Daftar ........................................................12
3.4.3 DFD Level 2 Proses 2 Login .........................................................13
3.4.4 DFD Level 2 Proses 3 Kontes .......................................................14
3.4.5 DFD Level 2 Proses 4 Upload ......................................................15
3.5 ERD (Entity relationship Diagram) ............................................................16
3.6 Struktur Data ................................................................................................17
3.7 Desain Tampilan I/O ....................................................................................19
3.7.1 Form Daftar Client ........................................................................19
3.7.2 Form Daftar Desainer ....................................................................19
3.7.3 Form Login ...................................................................................20
3.7.4 Form Profil ....................................................................................20
3.7.5 Form Upload Foto Profil ...............................................................21

viii
 3.7.6 Form Edit Profil ............................................................................22
3.7.7 Form Lihat User Admin ................................................................22
3.7.8 Form Konfirmasi Kontes Admin ..................................................23
3.7.9 Form Kontes Admin......................................................................23
3.7.10 Form Order Kontes Client ...........................................................23
3.7.11 Form Kontes Client .....................................................................24
3.7.12 Form Draf Kontes Client .............................................................24
3.7.13 Form Edit Kontes Client ............................................................24
3.7.14 Form Galeri Kontes Client ..........................................................25
3.7.15 Form Desain Juara Client ............................................................25
3.7.16 Form Kontes Desainer ................................................................26
3.7.17 Form Upload Desain Desainer ....................................................26
3.7.18 Form Galeri Kontes Desainer......................................................27
3.7.19 Form Desain Juara Desainer .......................................................27
3.7.20 Form Galeri Desain Desainer ......................................................28
3.7.21 Form Draf Kontes Desainer ........................................................28
4. IMPLEMENTASI DAN PENGUJIAN SISTEM ..........................................29
4.1 Implementasi ................................................................................................29
4.2 Spesifikasi Perangkat Keras .........................................................................29
4.3 Spesifikasai Perangkat Keras .......................................................................29
4.4 Implementasi Antar Muka ...........................................................................29
4.4.1 Menu Home User yang Belum Terdaftar ......................................30
4.4.2 Menu Kontes User yang Belum Terdaftar ....................................30
4.4.3 Menu Portofolio User yang Belum Terdaftar ...............................31
4.4.4 Menu Cara Kerja User yang Belum Terdaftar ..............................31
4.4.5 Menu Bantuan User yang Belum Terdaftar ..................................32
4.4.6 Menu Daftar Client .......................................................................32
4.4.7 Menu Daftar Desainer ...................................................................33
4.4.8 Menu Login ...................................................................................33
4.4.9 Menu Home Admin ......................................................................34
4.4.10 Menu Konfirmasi Kontes Admin ................................................34
4.4.11 Menu Kontes Admin ...................................................................35
4.4.12 Menu Hapus Kontes Admin ........................................................35
4.4.13 Menu Pencarian Kontes Admin ..................................................36
4.4.14 Menu Portofolio Admin ..............................................................37
4.4.15 Menu Cara Kerja Admin .............................................................37
4.4.16 Menu Bantuan Admin .................................................................38
4.4.17 Menu Profil Admin .....................................................................38
4.4.18 Menu Ganti Foto Profil Admin ...................................................39
4.4.19 Menu Edit Profil Admin..............................................................40
4.4.20 Menu Lihat User Admin .............................................................41
4.4.21 Menu Pencarian User Admin ......................................................41
4.4.22 Menu Hapus User Admin ...........................................................42
4.4.23 Menu Logout Admin ...................................................................43
4.4.24 Menu Home Client ......................................................................43
4.4.25 Menu Kontes Client ....................................................................44
4.4.26 Menu Pencarian Kontes Client....................................................44

ix
 4.4.27 Menu Portofolio Client .............................................................. 45
4.4.28 Menu Cara Kerja Client ..............................................................46
4.4.29 Menu Bantuan Client ..................................................................46
4.4.30 Menu Profil Client.......................................................................47
4.4.31 Menu Ganti Foto Profil Client ....................................................47
4.4.32 Menu Edit Profil Client ...............................................................48
4.4.33 Menu Order Kontes Client ..........................................................48
4.4.34 Menu Draf Kontes Client ............................................................49
4.4.35 Menu Hapus Kontes Client .........................................................49
4.4.36 Menu Galeri Desain Client .........................................................50
4.4.37 Menu Desain Juara Client ...........................................................50
4.4.38 Menu Logout Client ....................................................................51
4.4.39 Menu Home Desainer .................................................................51
4.4.40 Menu Kontes Desainer ................................................................52
4.4.41 Menu Pencarian Kontes Desainer ...............................................52
4.4.42 Menu Upload Desain Desainer ...................................................53
4.4.43 Menu Galeri Kontes Desainer .....................................................54
4.4.44 Menu Desain Juara Desainer .......................................................54
4.4.45 Menu Portofolio Desainer ...........................................................55
4.4.46 Menu Cara Kerja Desainer ..........................................................55
4.4.47 Menu Bantuan Desainer ..............................................................56
4.4.48 Menu Profil Desainer ..................................................................56
4.4.49 Menu Edit Profil Desainer ..........................................................57
4.4.50 Menu Galeri Desain Desainer .....................................................57
4.4.51 Menu Galeri Kontes Desainer .....................................................58
4.4.52 Menu Logout Desainer ................................................................58
4.5 Pengujian ......................................................................................................59
5. KESIMPULAN DAN SARAN ........................................................................60
5.1 Kesimpulan ..................................................................................................60
5.2 Saran .............................................................................................................60
DAFTAR PUSTAKA .......................................................................................61
LAMPIRAN ......................................................................................................62

x
 DAFTAR GAMBAR
Gambar 3.1 Konteks Diagram Sistem....................................................................10
Gambar 3.2 DFD Level 1 .......................................................................................11
Gambar 3.3 DFD Level 2 Proses 1 Daftar .............................................................12
Gambar 3.4 DFD Level 2 Proses 2 Login ..............................................................13
Gambar 3.5 DFD Level 2 Proses 3 Kontes ............................................................14
Gambar 3.6 DFD Level 2 Proses 4 Upload ...........................................................15
Gambar 3.7 ERD ....................................................................................................16
Gambar 3.8 Form Daftar Client .............................................................................19
Gambar 3.9 Form Daftar Desainer .........................................................................19
Gambar 3.10 Form Login.......................................................................................20
Gambar 3.11 Form Profil .......................................................................................20
Gambar 3.12 Form Upload Foto Profil ..................................................................21
Gambar 3.13 Form Edit Profil ...............................................................................22
Gambar 3.14 Form Lihat User Admin ...................................................................22
Gambar 3.15 Form Konfirmasi Kontes Admin......................................................23
Gambar 3.16 Form Kontes Admin .........................................................................23
Gambar 3.17 Form Order Kontes Client ................................................................23
Gambar 3.18 Form Kontes Client ..........................................................................24
Gambar 3.19 Form Draf Kontes Client ..................................................................24
Gambar 3.20 Form Edit Kontes Client ..................................................................24
Gambar 3.21 Form Galeri Kontes Client ...............................................................25
Gambar 3.22 Form Desain Juara Client .................................................................25
Gambar 3.23 Form Kontes Desainer ......................................................................26
Gambar 3.24 Form Upload Desain Desainer .........................................................26
Gambar 3.25 Form Galeri Kontes Desainer ...........................................................27
Gambar 3.26 Form Desain Juara Desainer ............................................................27
Gambar 3.27 Form Galeri Desain Desainer ...........................................................28
Gambar 3.28 Form Draf Kontes Desainer .............................................................28
Gambar 4.1 Menu Home User yang Belum Terdaftar ...........................................30
Gambar 4.2 Menu Kontes User yang Belum Terdaftar .........................................30
Gambar 4.3 Menu Portofolio User yang Belum Terdaftar ....................................31
Gambar 4.4 Menu Cara Kerja User yang Belum Terdaftar ...................................31
Gambar 4.5 Menu Bantuan User yang Belum Terdaftar .......................................32
Gambar 4.6 Menu Daftar Client.............................................................................32
Gambar 4.7 Menu Daftar Desainer ........................................................................33
Gambar 4.8 Menu Login ........................................................................................33
Gambar 4.9 Menu Home Admin............................................................................34
Gambar 4.10 Menu Konfirmasi Kontes Admin .....................................................34
Gambar 4.11 Menu Kontes Client Admin .............................................................35
Gambar 4.12 Menu Hapus Kontes Admin .............................................................35
Gambar 4.13 Menu Pencarian Kontes Admin .......................................................36
Gambar 4.14 Menu Hasil Pencarian Kontes Admin ..............................................36
Gambar 4.15 Menu Portofolio Admin ...................................................................37

xi
Gambar 4.16 Menu Cara Kerja Admin ..................................................................37
Gambar 4.17 Menu Bantuan Admin ......................................................................38
Gambar 4.18 Menu Profil Admin ..........................................................................38
Gambar 4.19 Menu Ganti Foto Profil Admin ........................................................39
Gambar 4.20 Menu Edit Profil Admin...................................................................40
Gambar 4.21 Menu Lihat User Admin ..................................................................41
Gambar 4.22 Menu Pencarian User Admin ...........................................................41
Gambar 4.23 Menu Hasil Pencarian User Admin ..................................................42
Gambar 4.24 Menu Hapus User Admin .................................................................42
Gambar 4.25 Menu Logout Admin ........................................................................43
Gambar 4.26 Menu Home Client ...........................................................................43
Gambar 4.27 Menu Kontes Client .........................................................................44
Gambar 4.28 Menu Pencarian Kontes Client .........................................................44
Gambar 4.29 Menu Hasil Pencarian Kontes Client ...............................................45
Gambar 4.30 Menu Portofolio Client.....................................................................45
Gambar 4.31 Menu Cara Kerja Client ...................................................................46
Gambar 4.32 Menu Bantuan Client .......................................................................46
Gambar 4.33 Menu Profil Client............................................................................47
Gambar 4.34 Menu Ganti Foto Profil Client .........................................................47
Gambar 4.35 Menu Edit Profil Client ....................................................................48
Gambar 4.36 Menu Order Kontes Client ...............................................................48
Gambar 4.37 Menu Draf Kontes Client .................................................................49
Gambar 4.38 Menu Hapus Kontes Client ..............................................................49
Gambar 4.39 Menu Draf Kontes Client .................................................................50
Gambar 4.40 Menu Desain Juara Client ................................................................50
Gambar 4.41 Menu Logout Client .........................................................................51
Gambar 4.42 Menu Home Desainer.......................................................................51
Gambar 4.43 Menu Kontes Desainer .....................................................................52
Gambar 4.44 Menu Pencarian Kontes Desainer ....................................................52
Gambar 4.45 Menu Hasil Pencarian Kontes Desainer ...........................................53
Gambar 4.46 Menu Upload Desain Desainer ........................................................53
Gambar 4.47 Menu Galeri Kontes Desainer ..........................................................54
Gambar 4.48 Menu Desain Juara Desainer ............................................................54
Gambar 4.49 Menu Portofolio Desainer ................................................................55
Gambar 4.50 Menu Cara Kerja Desainer ...............................................................55
Gambar 4.51 Menu Bantuan Desainer ...................................................................56
Gambar 4.52 Menu Profil Desainer .......................................................................56
Gambar 4.53 Menu Edit Profil Desainer................................................................57
Gambar 4.54 Menu Galeri Desain Desainer ..........................................................57
Gambar 4.55 Menu Galeri Kontes Desainer ..........................................................58
Gambar 4.56 Menu Logout Desainer .....................................................................58
Gambar 4.57 tools.pingdom.com ...........................................................................59
Gambar 4.58 pagescoring.com ...............................................................................59

xii
 DAFTAR TABEL
Tabel 3.1 User ........................................................................................................17
Tabel 3.2 Kontes ....................................................................................................17
Tabel 3.3 Image......................................................................................................18
Tabel 3.4 Upload ....................................................................................................18

xiii
 BAB I
PENDAHULUAN
1.1 Latar Belakang
Pada era digital yang telah merambah ke segala bidang, sehingga hampir
semua kegiatan dalam kehidupan manusia berhubungan dengan teknologi digital.
Teknologi digital telah menjawab berbagai tantangan manusia untuk berinteraksi
secara langsung tanpa ada batas jarak waktu dan ruang.

Perkembangan internet mengalami perkembangan yang sangat pesat. Hal

ini disebabkan karena internet mampu menutupi berbagai kelemahan media
informasi yang lain. Menyinggung masalah penyajian informasi yang tidak dibatasi
oleh ruang dan waktu maka tidak lepas dari keberadaan website sebagai sumber
informasi internet. Penggunaan website sekarang sudah meluas ke berbagai tingkat
kebutuhan mulai dari kebutuhan perseorangan, kelompok sampai perusahaan besar,
dan salah satu kebutuhan tersebut adalah dalam bidang desain seperti desain logo.

Berbagai macam website telah dibuat oleh pengguna website. Salah satu
website yang telah dibuat adalah website kontes desain yang menghubungkan dan
memberi kemudahan kepada orang yang membutuhkan desain dan para desainer.
Namun website kontes desain baru ada sedikit sedangkan peminatnya semakin
bertambah banyak. Untuk itulah dibuat website portal kontes desain yang bertujuan
untuk menfasilitasi dan mempermudah orang yang membutuhkan desain dengan
para desainer. Website ini dibuat menggunakan bahasa pemrograman PHP,
Javascript dan database MySql dengan fitur user interface yang memudahkan orang
yang ingin mendapatkan desain dengan para desainer.

1 Universitas 17 Agustus 1945 Surabaya

 2

1.2 Rumusan Masalah

Berdasarkan latar belakang di atas, maka permasalahan yang diangkat

penulis adalah Bagaimana membuat sistem portal kontes desain berbasis web dan
cara menfasilitasi orang yang membutuhkan desain dengan para desainer.
Dari rumusan permasalah di atas maka muncul beberapa pertanyaan sebagai
berikut:
1. Bagaimana membuat Portal Kontes Desain Berbasis Web?

2. Bagamana cara menfasilitasi orang yang membutuhkan desain dengan para

desainer?
1.3 Tujuan Penelitian
Adapun tujuan dari penelitian ini adalah :

1. Membuat Portal Kontes Desain Berbasis Web

2. Memberikan fasilitas orang yang membutuhkan desain dengan para
desainer.

1.4 Manfaat Penelitian

Penelitian ini diharapakan dapat memberikan kontribusi terhadap penelitian
di bidang website kontes desain yang nantinya akan dapat dikembangkan dan
diterapkan untuk mengatasi permasalahan tentang kontes desain yang ada di
masyarakat khususnya orang yang membutuhkan desain dengan para desainer.
1.5 Sistematika Penulisan
Agar penyajian laporan lebih mudah dimengerti dan terstruktur, maka
sistematika penulisan laporan akan disajikan dengan 5 (lima) bab, yang masing-
masing bab adalah sebagai berikut:

Universitas 17 Agustus 1945 Surabaya

 3

Bab I Pendahuluan
Bab ini berisi tentang garis besar yang akan dibahas pada bab selanjutnya,
meliputi latar belakang, rumusan masalah, tujuan penelitian dan sistematika
penulisan.
Bab II Landasan Teori
Bab ini berisi dasar-dasar teori yang digunakan dalam pembahasan masalah
yang terjadi dalam pengembangan sistem.
Bab III Analisa dan Desain Sistem
Berisi tinjauan pada objek penelitian, baik tujuan umum maupun tujuan
khusus.
Bab IV Implementasi dan Pengujian Sistem
Bab ini berisi tentang implementasi dan uji coba hasil dari perancangan
sistem.
Bab V Penutup
Bab ini berisi kesimpulan dari seluruh pembahasan hasil perancangan
sistem yang telah dibuat dalam tugas akhir, disertai saran-saran yang berkaitan
dengan permasalahan yang ada untuk pengembangan yang lebih baik.

Universitas 17 Agustus 1945 Surabaya

 BAB II
TINJAUAN PUSTAKA
2.1 Sistem
Menurut Kristanto, Andri (2003:2) Sistem adalah kumpulan dari elemen-
elemen yang saling terkait dan bekerja sama untuk memproses masukan (input)
yang ditujukan kepada sistem tersebut dan mengolah masukan tersebut sampai
menghasilkan keluaran (output) yang diinginkan.
2.2 Pengertian SDLC (Sistem Development Life Cycle)
Menurut Blanchard, B. S., & Fabrycky, W. J. (2006). SDLC adalah proses
pembuatan dan pengubahan sistem serta model dan metodologi yang digunakan
untuk mengembangkan sistem perangkat lunak, yang terdiri dari tahap-tahap:
perencanaan, analisa, rancangan, penerapan dan penggunaan.
Proses tahapan SDLC menurut Blanchard, B. S., & Fabrycky, W. J. (2006).
Perencanaan
Mempelajari konsep sistem dan permasalahan yang hendak
diselesaikan menggunakan beberapa cara seperti wawancara
kepada pengguna pengisian kuisioner, maupun observasi.
Pengisian kuisioner kepada pengguana ini ditujukan untuk
mengetahui permintaan pengguna.
Analisis
Menganalisis konsep sistem, permasalahan dan keperluan
yang hendak dibuat.
Desain
Mendesain sistem teknologi baru untuk pemasalah yang
sama sesuai kebutuhan pengguna.
Implementasi
Software yang telah diuji dan siap diimplementasikan ke
dalam sistem pengguna sudah siap diterapkan.
Maintenance
Sistem yang telah diimplementasikan serta dapat mengikuti
perkembangan dan perubahan apapun yang terjadi guna
meraih tujuan penggunaannya.

4 Universitas 17 Agustus 1945 Surabaya

 5

2.3 Relasi Antar Tabel

Menurut Fatta, Hanif, 2008. Relasi antar tabel adalah merupakan hubungan
antar tabel yang berfungsi untuk menunjukkan relasi antar table sehingga
membentuk suatu jaringan data.
2.4 DFD (Data Flow Diagram)
Menurut Jogiyanto Hartono (2005, 701) Data Flow Diagram adalah
diagram yang menggunakan notasi simbol untuk menggambarkan arus data
system.
2.5 Diagram Konteks
Menurut Jogiyanto (2005) Diagram konteks adalah diagram alir data dan
sebuah onformasi yang menggambarkan sistem dalams satu lingkaran dana
menggambarkan proses dalam suatu sistem secara keseluruhan.
2.6 Perancangan Basis Data
Database adalah sekumpulan dari item data yang saling berhubungan satu
dengan lainnya yang diorganisasikan berdasarkan sebuah skema tertentu.
Tersimpan di hardware komputer dan dengan software untuk melakukan
manipulasi untuk tujuan tertentu. (Sutanta, 2004)
Proses perancangan basis data dibagi menjadi 6 tahapan antara lain : (Linda
Marlinda , S.Kom. 2004. Sistem basis Data )
Mengumpulkan dan Menganalisis
Perancangan ini untuk menentukan kebutuhan-kebutuhan
suatu sistem pada basis data dan sistem informasi yang akan
berinteraksi dengan sistem basis data.
Merancang Basis Data secara Konsteptual
Perancangan ini bertujuan untuk menghasilkan skema
konseptual yang tergantung pada sebuah DBMS yang
spesifik.
Memilih DBMS
Pemilihan DBMS ditentukan oleh beberapa faktor
diantaranya : faktor teknik, ekonomi dan politik organisasi.
Merancang Basis Data secara Logika

Universitas 17 Agustus 1945 Surabaya

 6

Merancang basis data dengan membuat sebuah skema

konseptual dan skema eksternal di model data dan DBMS
yang terpilih.
Merancang Basis Data secara Fisik
Merancang basis data secara fisik merupakan proses
memilih struktur-struktur penyimpanan dan kalur-jalur kases
ke file-file basis data untuk mencapai performa terbaik.
Implementasi Sistem basis Data
Pada tahap ini sistem basis data, perintah dalam DDL dan
SDL (Strorage Definition Language) dan DBMS yang
terpilih,dihimpun dan digunakan untuk membuat skema
basis data dan file-file basis data yang kosong.
2.7 Website
Situs web ( bahasa inggris : web site) atau sering diangkat dengan istilah
situs adalah sejumlah halaman web yang memiliki topik saling terkait. Dalam web
terdapat dua jenis, hal ini juga menentukan jenis web apa yang sesuai dengan tujuan
dari pembelajaran diatas. Web staberkas berkas gambar, video, atau jenis-jenis
berkas lainnya. Sebuah situs web biasanya ditempatkan setidaknya pada sebuah
server web yang dapat diakses melalui jaringan seperti internet, atapun jaringan
wilayah lokal (LAN) melalui alamat internet yang dikenali sebagai URL.
Gabungan atas semua situs yang dapat diakses publik di internet disebut
pula sebagai waring wera wanua atau lebih dikenal dengan singkatan WWW.
Meskipun setidaknya halaman beranda situs internet umunya dapat diakses publik
secara bebas, pada prakteknya tidak semua situs memberikan kebebasan bagi publik
untuk mengaksesnya (wikipedia).
2.8 XAMPP
XAMPP merupakan singkatan dari X ( empat sistem operasi apapun),
apache, MySQL, PHP, Perl. XAMPP merupakan tool yang meyediakan paket
perangkat lunak ke dalam satu buah paket. Dalam paketnya sudah terdapat Apache
( web server), MySQL (database), PHP (server side scripting), Perl, FTP server,
phpMyAdmin dan berbagai pustaka bantu lainnya.

Universitas 17 Agustus 1945 Surabaya

 7

Dengan menginstall XAMPP maka tidak perlu lagi melakukan instalasi dan
konfigurasi web server apache, PHP dan MySQL secara manual.
2.9 Apache
Server HTTP Apache atau server Web/WWW Apache adalah server web
yang dapat dijalankan dibanyak sistem operasi (Unix, BSD, Linux, Windows,
Novotel Netware dan lainnya) yang berguna untuk melayani dan memfungsikan
situs web. Protokol yang digunakan untuk melayani fasilitas web/www ini
menggunakan HTTP.
Apache memiliki fitur-fitur yang canggih seperti pesan kesalahan yang
dapat dikonfigur, autentikasi berbasis basis data dan lain-lain. Apache juga
didukung oleh sejumlah antar muka pengguna berbasis grafik (GUI) yang
memungkinkan penangganan server menjadi mudah.
2.10 Notepad++
Notepad++ adalah sebuah penyunting teks dan penyunting kode sumber
yang berjalan di sistem operasi windows. Notepad++ menggunakan komponen
Scintilla untuk dapat menampilkan dan menyuntingkan teks dan berkas kode
sumber berbagai bahasa pemrograman.
2.11 Pemrograman Web
Pemograman Web diambil dari dua suku kata yaitu pemograman dan web.
Pemograman diartikan proses, cara, pembuatan program. Definisi web adalah
jaringan komputer yang terdiri dari kumpulan situs internet yang menawarkan teks,
grafik, suara dan sumber daya animasi melaluui protokol transfer hypertext.
HTTP (Hypertext transfer protocol) adalah protocol yang dipergunakan
untuk mentransfer dokumen dalam world wide web (WWW). Protokol ini adalah
protokol ringan, tidak berstatus dan generik yang dapat dipergunakan berbagai
macam tipe dokumen.
Bahasa Pemograman merupakan suatu teknik instruksi standar untuk
memerintah komputer. Berikut adalah penjelasan tentang bahasa pemograman yang
biasa digunakan untuk membuat suatu website :
PHP hypertext Prepocessor atau disingkat dengan PHP ini
adalah suatu bahasa scripting yang ditanam dalam HTML.
Ini berarti bahwa anda dapat menggabungkan kode PHP dan

Universitas 17 Agustus 1945 Surabaya

 8

HTML dalam File yang sama. (Membangun Web dengan

PHP & My Sql, 2015: 1)
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet
yang digunakan untuk mengatur tampilan suatu dokumen
yang ditulis dalam bahasa markup. Penggunaan yang paling
umum dari CSS adalah untuk memformat halaman web yang
ditulis dengan HTML dan XHTML. Walaupun demikian,
bahasanya sendiri dapat digunakan untuk semua jenis
dokumen XML termasuk SVG dan XUL. Spesifikasi CSS
diatur oleh World Wide Web Consortium(W3C).
MYSQL adalah salah satu aplikasi DBMS yang sudah sangat
banyak digunakan oleh para pemrogam aplikasi web. Contoh
DBMS lainnya adalah : PotgresSQL (freeware), SQL Server,
MS Access dari Microsoft, DB2 dari IBM, Oracle Corp,
Dbase, FoxPro, dsb.(Pemograman Web, 2014)
Hypertext Markup Language (HTML) adalah sebuah bahasa
markup yang digunakan untuk membuat sebuah halaman
web dan menampilkan berbagai informasi di dalam sebuah
browser internet. HTML berupa kode-kode tag yang
menginstruksikan browser untuk menghasilkan tampilan
sesuai dengan yang diinginkan.
Twiiter Bootstrap adalah sebuah alat bantu untuk membantu
sebuah tampilan halaman website. Bootstrap dibangun
dengan teknologi HTML dan CSS yang dapat membantu
layout halaman website, tabel, form, navigasi, dan
komponen lainnya dalam sebuah website hanya dengan
memanggil fungsi CSS (class) dalam berkas HTML yang
telah didefinisikan. Selain itu juga terdapat komponen-
komponen lainnya yang dibangun menggunakan Javascrip

Universitas 17 Agustus 1945 Surabaya

 BAB III
METODE PENELITIAN
3.1 Metode Pengumpulan Data
Metode pengumpulan data yang dilakukan menggunakan 2 tahap metode
sebagai berikut:
Metode Pengamatan
Pengumpulan data dan informasi yang dilakukan dengan cara
pengamatan atau peninjauan langsung terhadap objek penelitian.
Tinjauan Pustaka
Pengumpulan data yang bersumber dari beberapa buku yang menjadi
referensi, pedoman penulisan riset, penelitian, skripsi, atau diktat yang
menunjang pemecahan permasalahan yang tidak didapatkan dalam
penelitian.
3.2 Metode Pengembangan Sistem
Pengembangan system yang peneliti lakukan menggunakan 3 tahap siklus
pengembangan System development Life Cycle (SDLC).
3.2.1 Perencanaan
Pada tahap ini dilakukan beberapa tahapan yaitu:
Perancangan Proses
Perancangan proses-proses yang akan terjadi dalam sistem.
Perancangan Basis Data
Perancangan tabel-tabel yang digunakan untuk menyimpan data
berupa daftar kontes, user dan gambar desain, kemudian
diimplementasikan ke dalam program.
Perancangan Antar Muka Pengguna (User Interface)
Antar muka pemakai memberikan fasilitas komunikasi antar pemakai
dan aplikasi atau system, memberikan berbagai fasilitas informasi dan
berbagai keterangan yang bertujuan mengarahkan penelusuran
masalah sampai ditemukan solusi.

9 Universitas 17 Agustus 1945 Surabaya

 10

3.2.2 Pembuatan
Pada tahap ini dilakukan pembuatan program terhadap rancangan-
rancangan yang telah didefinisikan. Pembuatan program yang dilakukan
menggunakan bahasa pemrograman PHP, database MySQl dan server Xampp.
3.2.3 Implementasi
Pada tahap ini dilakukan beberapa tahapan yaitu:
Pengujian
Pada tahapan ini dilakukan pengujian terhadap aplikasi yang sudah
dibuat.
Tanggapan user
Meminta tanggapan user terhadap aplikasi ini kemudian
mengevaluasinya.
3.3 Diagram Konteks
Digram Konteks terdiri dari suatu proses saja, Proses ini mewakili dari
seluruh sistem. Digram konteks menggambarkan input output suatu sistem dengan
dunia luar atau dunia kesatuan luar.

Gambar 3.1. Diagram Konteks Sistem Portal Kontes Desain

Universitas 17 Agustus 1945 Surabaya

 11

3.4 DFD (Data Flow Diagram)

Data Flow Diagram adalah penggambaran dari berbagai alur proses yang
terjadi dalam sistem hasil kerja ini. Adapun data flow diagram disusun sebagai alat
yang sangat berguna untuk penyusunan dan perancangan sistem secara terstruktur,
keuntungan yang diperoleh yaitu untuk memudahkan user yang kurang menguasai
bidang komputer untuk memhami sistem yang dikerjakan atau dikembangan.
3.4.1 DFD Level 1

Gambar 3.2 DFD Level 1

Universitas 17 Agustus 1945 Surabaya

 12

3.4.2 DFD Level 2 Proses 1 Pendaftaran

Pengguna melakukan pendaftarann pada website dengan memilih status
user kemudian pengguna mengisi email password dan nama setelah itu melakukan
verifikasi pada email dan kembali kemenu awal.

Gambar 3.3 DFD Level 2 Proses 1

Universitas 17 Agustus 1945 Surabaya

 13

3.4.3 DFD Level 2 Proses 2 Login

Pengguna melakukan login pada sistem dengan username dan password
yang telah didaftarkan, jika username dan password cocok dengan data pada
database maka masing-masing pengguna akan dibawa pada menu masing-masing.

Gambar 3.4 DFD Level 2 Proses 2

Universitas 17 Agustus 1945 Surabaya

 14

3.4.4 DFD Level 2 Proses 3 Kontes

Client membuat kontes setelah itu dikonfirmasi oleh admin dan bru bisa
tampil kontes tersebut.

Gambar 3.5 DFD Level 2 Proses 3

Universitas 17 Agustus 1945 Surabaya

 15

3.4.5 DFD Level 2 Proses 4 Upload

Desainer melakukan pencarian kontes setelah ketemu kontes yang
diinginkan baru desainer mengupload dan setelah upload berhasil client melihat
desain dan memilih juara kontes desainnya.

Gambar 3.6 DFD Level 2 Proses 4

Universitas 17 Agustus 1945 Surabaya

 16

3.5 ERD (Entity Relationship Diagram)

Entity relationsip diagram merupakan model data berupa notasi grafis dalam
permodelan data konseptual yang menggambarkan hubungan antara penyimpanan.
Model data sendiri merupakan sekumpulan cara, peralatan untuk mendeskripsikan
data-data yang berhubungan satu sama lain, serta batasan konsistensi. Model data
terdiri dari hubungan entitas dan model relasional.

Gambar 3.7 ERD

Universitas 17 Agustus 1945 Surabaya

 17

3.6 Struktur Data

Dari hasil Diagram diatas (DFD dan ERD) dapat dibuat tabel-tabel beserta
ukuran field-fieldnya. Adapun tabel yang dihasilkan adalah sebagai berikut :
Tabel 3.1 User
Nama Kolom Tipe Data Ukuran Key
Id_user Int 11 Primary key
email varchar 50
nama varchar 100
password Double 50
status Double 10
no_hp varchar 15
jenis_kelamin varchar 10
tanggal_lahir date
software varchar 50
nama_bank varchar 50
no_rekening varchar 50
akun_bank varchar 50
activation varchar 300
status_r enum '0','1'

Tabel 3.2 Kontes

Nama Kolom Tipe Data Ukuran Key
id_kontes Int 50 Primary key
Kategori_Kontes varchar 20
hadiah varchar 50
Nama_Kontes varchar 50
Durasi_Kontes int 10
Keterangan_Kontes text
konfirmasi varchar 3
Id_userk int 50
tanggal_mulai datetime

Universitas 17 Agustus 1945 Surabaya

 18

syarat_ketentuan text
biaya_admin varchar 30
tambah_durasi int 10

Tabel 3.3 Images

Nama Kolom Tipe Data Ukuran Key
id_image Int 50 Primary key
name varchar 100
image blob
id_userd int 50
id_kontes int 50
pemenang varchar 3

Tabel 3.4 Foto_Profil

Nama Kolom Tipe Data Ukuran Key
id_image Int 50 Primary key
name varchar 100
image blob
id_userf int 50

Universitas 17 Agustus 1945 Surabaya

 19

3.7 Desain Tampilan I/O

Berikut ini akan digambarkan desain tampilan berupa tab page yang akan
digunakan dalam pengerjaan sistem dalam program.
3.7.1 Form Daftar Client
Form yang digunakan seseorang untuk daftar menjadi user yang berstatus
client.

Gambar 3.8 Form Daftar Client

3.7.2 Form Daftar Desainer
Form yang digunakan seseorang untuk daftar menjadi user yang berstatus
desainer.

Gambar 3.9 Form Daftar Desainer

Universitas 17 Agustus 1945 Surabaya

 20

3.7.3 Form Login

Form yang digunakan sebagai otorisasi pengguna agar bisa masuk
kedalam system website.

Gambar 3.10 Form Login

3.7.4 Form Profil
Form yang berfungsi sebagai menampilkan profil user.

Gambar 3.11 Form Profil

Universitas 17 Agustus 1945 Surabaya

 21

3.7.5 Form Upload Foto Profil

Form yang digunakan untuk mengganti foto profil.

Gambar 3.12 Form Upload Foto Profil

Universitas 17 Agustus 1945 Surabaya

 22

3.7.6 Form Edit Profil

Form yang digunakan untuk mengedit data user.

Gambar 3.13 Form Edit Profil

3.7.7 Form Lihat User Admin
Form yang digunakan admin untuk melihat daftar user.

Gambar 3.14 Form Lihat User Admin

Universitas 17 Agustus 1945 Surabaya

 23

3.7.8 Form Konfirmasi Kontes Admin

Form yang digunakan admin untuk mengkonfirmasi kontes desain yang
dibuat oleh client sebelum ditampilkan di halaman kontes.

Gambar 3.15 Form Konfirmasi Kontes Admin

3.7.9 Form Kontes Admin
Form yang digunakan admin untuk melihat kontes yang telah di
konfirmasi.

Gambar 3.16 Form Kontes Admin

3.7.10 Form Order Kontes Client
Form yang digunakan client untuk membuat kontes desain.

Gambar 3.17 Form Order Kontes Client

Universitas 17 Agustus 1945 Surabaya

 24

3.7.11 Form Kontes Client

Form yang digunakan client untuk melihat kontes yang telah dibuat para
client.

Gambar 3.18 Form Kontes Client

3.7.12 Form Draf Kontes Client
Form yang digunakan client untuk melihat kontes yang pernah client buat.

Gambar 3.19 Form Draf Kontes Client

3.7.13 Form Edit Kontes Client
Form yang digunakan client untuk mengedit kontes yang client buat.

Gambar 3.20 Form Edit Kontes Client

Universitas 17 Agustus 1945 Surabaya

 25

3.7.14 Form Galeri Kontes Client

Form yang digunakan client untuk melihat hasil desain para desainer yang
mengikuti kontes client.

Gambar 3.21 Form Galeri Kontes Client

3.7.15 Form Desain Juara Client
Form yang digunakan client untuk melihat desain juara dari kontes yang
client buat.

Gambar 3.22 Form Desain Juara Client

Universitas 17 Agustus 1945 Surabaya

 26

3.7.16 Form Kontes Desainer

Form yang digunakan desainer untuk mencari kontes dan mengikuti
kontesnya client.

Gambar 3.23 Form Kontes Desainer

3.7.17 Form Upload Desain Desainer
Form yang digunakan desainer untuk mengupload desain ke kontes client.

Gambar 3.24 Form Upload Desain Desainer

Universitas 17 Agustus 1945 Surabaya

 27

3.7.18 Form Galeri Kontes Desainer

Form yang digunakan desainer untuk melihat galeri desain dari para
desainer.

Gambar 3.25 Form Galeri Kontes Desainer

3.7.19 Form Desain Juara Desainer
Form yang digunakan desainer untuk melihat desain juara dari para
desainer.

Gambar 3.26 Form Desain Juara Desainer

Universitas 17 Agustus 1945 Surabaya

 28

3.7.20 Form Galeri Desain Desainer

Form yang digunakan desainer untuk melihat desain yang telah di upload
desainer tersebut.

Gambar 3.27 Form Galeri Desain Desainer

3.7.21 Form Draf Kontes Desainer
Form yang digunakan desainer untuk melihat kontes yang telah desainer
ikuti.

Gambar 3.28 Form Draf Kontes Desainer

Universitas 17 Agustus 1945 Surabaya

 BAB IV
IMPLEMENTASI DAN PENGUJIAN SISTEM
4.1 Implementasi
Berdasarkan hasil dari analisis dan desain sistem yang telah dikerjakan pada
bab sebelumnya, maka tahap selanjutnya yaitu uji coba dan pembahasanya. Tahap
uji coba merupakan suatu tahap dimana sistem siap dioperasikan pada keadaan yang
sebenarnya, dari sini akan diketahui apakah sistem yang dibuat benar-benar dapat
menghasilkan tujuan seperti yang diinginkan.
4.2 Spesifikasi Perangkat Keras
Spesifikasi perangkat keras yang digunakan peneliti untuk membuat system
ini adalah sebagai berikut :
1. Processor Intel Core i5
2. Kapasitas Harddsik 600 GB
3. Memory 4 GB
4. DVD ROM
4.3 Spesifikasi Perangkat Lunak
Spesifikasi perangkat keras yang digunakan peneliti untuk membuat system
ini adalah sebagai berikut :
1. Sistem operasi Windows 8 Pro
2. Notepad++ sebagai editor web
3. Apache sebagai web server
4. MySQL sebagai database server
5. Google Chrome sebagai web browser
6. Serta Koneksi internet sebagai media untuk mengupload file dan
mengakses website
4.4 Implementasi Antar Muka
Berikut ini akan dijelaskan implementasi antar muka website yang telah
dibangun.

29 Universitas 17 Agustus 1945 Surabaya

 30

4.4.1 Menu Home User yang Belum Terdaftar

Menu ini digunakan user yang belum terdaftar di sistem portal kontes
desain, menu ini berisi tentang menu daftar client, daftar desainer dan login.

Gambar 4.1 Menu Home User yang Belum Terdaftar

4.4.2 Menu Kontes User yang Belum Terdaftar
Menu kontes user yang belum terdaftar berisikan list daftar kontes, namun
user ini tidak bisa mengikuti kontes sebelum mendaftar sebagai desainer atau client.

Gambar 4.2 Menu Kontes User yang Belum Terdaftar

Universitas 17 Agustus 1945 Surabaya

 31

4.4.3 Menu Portofolio User yang Belum Terdaftar

Menu ini berisikan menu yang digunakan untuk menampilkan contoh
desain-desain dan biaya pembuatan kontes sesuai paket yang dipilih

Gambar 4.3 Menu Portofolio User yang Belum Terdaftar

4.4.4 Menu Cara Kerja User yang Belum Terdaftar
Menu cara kerja adalah menu yang digunakan untuk menampilkan cara
client dan desainer menggunakan website portal kontes desain.

Gambar 4.4 Menu Cara Kerja User yang Belum Terdaftar

Universitas 17 Agustus 1945 Surabaya

 32

4.4.5 Menu Bantuan User yang Belum Terdaftar

Menu bantuan adalah menu yang menampilkan info seputar portal kontes
desain.

Gambar 4.5 Menu Bantuan User yang Belum Terdaftar

4.4.6 Menu Daftar Client
Menu daftar client adalah menu yang digunakan untuk pendafataran user
yang ingin menjadi seorang client.

Gambar 4.6 Menu Daftar Client

Universitas 17 Agustus 1945 Surabaya

 33

4.4.7 Menu Daftar Desainer

Menu daftar desainer adalah menu yang digunakan untuk pendaftaran user
yang ingin menjadi seorang desainer.

Gambar 4.7 Menu Daftar Desainer

4.4.8 Menu Login
Menu login adalah menu yang digunakan untuk mengalihkan masing-
masing user sehingga tiap-tiap user bisa mengakses halaman sesuai status usernya.

Gambar 4.8 Menu Login

Universitas 17 Agustus 1945 Surabaya

 34

4.4.9 Menu Home Admin

Menu Home Admin adalah menu utama bagi user admin dimana didalam
menu home terdapat pemberitahuan selamat datang di portal kontes desain sebagai
admin.

Gambar 4.9 Menu Home Admin

4.4.10 Menu Konfirmasi Kontes Admin
Menu konfirmasi admin adalah menu yang digunakan untuk
mengkonfirmasi kontes yang telah di buat oleh para client sebelum di tampilkan di
halaman kontes, admin dapat menghapus jika ada masalah di pada kontes dan
memosting jika kontesnya sudah benar dan sudah divalidasi pembayaran oleh client

Gambar 4.10 Menu Konfirmasi Kontes Admin

Universitas 17 Agustus 1945 Surabaya

 35

4.4.11 Menu Kontes Admin

Menu kontes admin adalah menu yang digunakan untuk menampilkan
daftar kontes yang telah admin konfimasi dan siap untuk diikuti oleh para desainer,
admin juga bisa menghapus kontes jika kontes tidak sesuai atau menyalahi
peraturan.

Gambar 4.11 Menu Kontes Client Admin

4.4.12 Menu Hapus Kontes Admin
Menu hapus kontes admin adalah menu untuk menghapus kontes oleh
admin jika dinilai kontes tersebut melangggar aturan atau tidak sesuai.

Gambar 4.12 Menu Hapus Kontes Admin

Universitas 17 Agustus 1945 Surabaya

 36

4.4.13 Menu Pencarian Kontes Admin

Menu pencarian kontes admin adalah menu pencarian yang digunakan
oleh admin untuk mencari kontes yang diinginkan. Seperti pada gambar berikut
yang ingin menampilkan pencarian desain logo.

Gambar 4.13 Menu Pencarian Kontes Admin

Hasil pencarian desain logo.

Gambar 4.14 Menu Hasil Pencarian Kontes Admin

Universitas 17 Agustus 1945 Surabaya

 37

4.4.14 Menu Portofolio Admin

Menu portofolio admin adalah menu yang digunakan untuk menampilkan
contoh desain-desain dan biaya pembuatan kontes sesuai paket yang dipilih.

Gambar 4.15 Menu Portofolio Admin

4.4.15 Menu Cara Kerja Admin
Menu cara kerja admin adalah menu yang digunakan untuk menampilkan
cara client dan desainer menggunakan website portal kontes desain.

Gambar 4.16 Menu Cara Kerja Admin

Universitas 17 Agustus 1945 Surabaya

 38

4.4.16 Menu Bantuan Admin

Menu bantuan admin adalah menu yang menampilkan info seputar portal
kontes desain.

Gambar 4.17 Menu Bantuan Admin

4.4.17 Menu Profil Admin
Menu profil admin adalah menu yang menampilkan data profil dan foto
profil admin.

Gambar 4.18 Menu Profil Admin

Universitas 17 Agustus 1945 Surabaya

 39

4.4.18 Menu Ganti Foto Profil Admin

Menu ganti foto profil admin adalah menu yang digunakan untuk
mengganti foto profil admin.

Gambar 4.19 Menu Ganti Foto Profil Admin

Universitas 17 Agustus 1945 Surabaya

 40

4.4.19 Menu Edit Profil Admin

Menu edit profil admin adalah menu digunakan untuk mengedit profil
admin.

Gambar 4.20 Menu Edit Profil Admin

Universitas 17 Agustus 1945 Surabaya

 41

4.4.20 Menu Lihat User Admin

Menu lihat user adalah menu untuk menampilkan user yang terdaftar di
website ini. Admin dapat menghapus user yang bermasalah.

Gambar 4.21 Menu Lihat User Admin

4.4.21 Menu Pencarian User Admin
Menu pencarian user admin adalah menu yang digunakan untuk mencari
user yang diinginkan. Seperti pada gambar berikut ini melakukan pencarian user
atas nama prayogo.

Gambar 4.22 Menu Pencarian User Admin

Universitas 17 Agustus 1945 Surabaya

 42

Hasil pencarian prayogo akan tampil seperti gambar berikut .

Gambar 4.23 Menu Hasil Pencarian User Admin

4.4.22 Menu Hapus User Admin
Menu hapus user admin adalah menun untuk menghapus user oleh admin

Gambar 4.24 Menu Hapus User Admin

Universitas 17 Agustus 1945 Surabaya

 43

4.4.23 Menu Logout Admin

Menu logout admin adalah menu yang digunakan admin untuk keluar dari
sistem ini.

Gambar 4.25 Menu Logout Admin

4.4.24 Menu Home Client
Menu Home Client adalah menu utama bagi user client dimana didalam
menu home terdapat pemberitahuan selamat datang di portal kontes desain sebagai
client.

Gambar 4.26 Menu Home Client

Universitas 17 Agustus 1945 Surabaya

 44

4.4.25 Menu Kontes Client

Menu kontes client adalah menu yang digunakan untuk menampilkan daftar
kontes yang telah admin konfimasi dan siap untuk diikuti oleh para desainer.

Gambar 4.27 Menu Kontes Client

4.4.26 Menu Pencarian Kontes Client
Menu pencarian kontes ini digunakan client untuk mencari kontes yang
diingainkan. Seperti pada gambar berikut yang melakukan pencarian desain logo.

Gambar 4.28 Menu Pencarian Kontes Client

Universitas 17 Agustus 1945 Surabaya

 45

Hasil pencarian sebagai berikut:

Gambar 4.29 Menu Hasil Pencarian Kontes Client

4.4.27 Menu Portofolio Client
Menu portofolio client adalah menu yang digunakan untuk menampilkan
contoh desain-desain dan biaya pembuatan kontes sesuai paket yang dipilih.

Gambar 4.30 Menu Portofolio Client

Universitas 17 Agustus 1945 Surabaya

 46

4.4.28 Menu Cara Kerja Client

Menu cara kerja client adalah menu yang digunakan untuk menampilkan
cara client dan desainer menggunakan website portal kontes desain.

Gambar 4.31 Menu Cara Kerja Client

4.4.29 Menu Bantuan Client
Menu bantuan client adalah menu yang menampilkan info seputar portal
kontes desain.

Gambar 4.32 Menu Bantuan Client

Universitas 17 Agustus 1945 Surabaya

 47

4.4.30 Menu Profil Client

Menu profil client adalah menu yang menampilkan data client dan foto
profil client.

Gambar 4.33 Menu Profil Client

4.4.31 Menu Ganti Foto Profil Client
Menu ganti foto profil adalah menu upload untuk mengganti foto profil
client.

Gambar 4.34 Menu Ganti Foto Profil Client

Universitas 17 Agustus 1945 Surabaya

 48

4.4.32 Menu Edit Profil Client

Menu edit profil client adalah menu untuk mengedit data profil client.

Gambar 4.35 Menu Edit Profil Client

4.4.33 Menu Order Kontes Client
Menu order kontes client adalah menu untuk membuat kontes oleh client.

Gambar 4.36 Menu Order Kontes Client

Universitas 17 Agustus 1945 Surabaya

 49

4.4.34 Menu Draf Kontes Client

Menu draf kontes client adalah menu yang berfungsi untuk menampilkan
kontes yang telah client buat.

Gambar 4.37 Menu Draf Kontes Client

4.4.35 Menu Hapus Kontes Client
Menu hapus kontes client adalah menu untuk menghapus kontes oleh
client.

Gambar 4.38 Menu Hapus Kontes Client

Universitas 17 Agustus 1945 Surabaya

 50

4.4.36 Menu Galeri Desain Client

Menu galeri desain client adalah menu untuk menampilkan desain-desain
yang mengikuti kontes client tersebut.

Gambar 4.39 Menu Draf Kontes Client

4.4.37 Menu Desain Juara Client
Menu desain juara client adalah menu yang berfungsi menampilkan desain
yang telah dipilih client untuk jadi juara.

Gambar 4.40 Menu Desain Juara Client

Universitas 17 Agustus 1945 Surabaya

 51

4.4.38 Menu Logout Client

Menu logout adalah menu untuk keluar dari sistem.

Gambar 4.41 Menu Logout Client

4.4.39 Menu Home Desainer
Menu home desainer adalah menu utama bagi user desainer dimana didalam
menu home terdapat pemberitahuan selamat datang di portal kontes desain sebagai
desainer.

Gambar 4.42 Menu Home Desainer

Universitas 17 Agustus 1945 Surabaya

 52

4.4.40 Menu Kontes Desainer

Menu kontes desainer adalah menu untuk desainer mencari kontes dan
mengikuti kontes yang telah desainer pilih.

Gambar 4.43 Menu Kontes Desainer

4.4.41 Menu Pencarian Kontes Desainer
Menu pencarian kontes desainer adalah menu yang digunakan untuk
melakukan pencarian kontes oleh desainer. Seperti pada gambar berikut yang
melakukan pencarian pada desain logo.

Gambar 4.44 Menu Pencarian Kontes Desainer

Universitas 17 Agustus 1945 Surabaya

 53

Hasil pencarian dari desain logo seperti pada gambar di bawah ini

Gambar 4.45 Menu Hasil Pencarian Kontes Desainer

4.4.42 Menu Upload Desain Desainer
Menu upload desain digunakan desainer untuk mengupload desain yang
mereka ikutkan kontes

Gambar 4.46 Menu Upload Desain Desainer

Universitas 17 Agustus 1945 Surabaya

 54

4.4.43 Menu Galeri Kontes Desainer

Menu galeri kontes desainer adalah menu untuk menampilkan desain yang
telah di upload para desainer.

Gambar 4.47 Menu Galeri Kontes Desainer

4.4.44 Menu Desain Juara Desainer
Menu desain juara adalah menu untuk menampilkan desain juara yang telah
dipilh oleh client

Gambar 4.48 Menu Desain Juara Desainer

Universitas 17 Agustus 1945 Surabaya

 55

4.4.45 Menu Portofolio Desainer

Menu portofolio desainer adalah menu yang digunakan untuk menampilkan
contoh desain-desain dan biaya pembuatan kontes sesuai paket yang dipilih.

Gambar 4.49 Menu Portofolio Desainer

4.4.46 Menu Cara Kerja Desainer
Menu cara kerja desainer adalah menu yang digunakan untuk menampilkan
cara client dan desainer menggunakan website portal kontes desain.

Gambar 4.50 Menu Cara Kerja Desainer

Universitas 17 Agustus 1945 Surabaya

 56

4.4.47 Menu Bantuan Desainer

Menu bantuan desainer adalah menu yang menampilkan info seputar portal
kontes desain.

Gambar 4.51 Menu Bantuan Desainer

4.4.48 Menu Profil Desainer
Menu profil desainer adalah menu yang menampilkan data profil dan foto
profil desainer.

Gambar 4.52 Menu Profil Desainer

Universitas 17 Agustus 1945 Surabaya

 57

4.4.49 Menu Edit Profil Desainer

Menu edit profil desainer adalah menu yang digunakan untuk mengedit data
desainer.

Gambar 4.53 Menu Edit Profil Desainer

4.4.50 Menu Galeri Desain Desainer
Menu galeri desain desainer adalah menu untuk melihat desain-desain yang
telah desainer upload untuk ikut kontes.

Gambar 4.54 Menu Galeri Desain Desainer

Universitas 17 Agustus 1945 Surabaya

 58

4.4.51 Menu Galeri Kontes Desainer

Menu galeri kontes desainer adalah menu untuk melihat daftar kontes yang
pernah desainer ikuti.

Gambar 4.55 Menu Galeri Kontes Desainer

4.4.52 Menu Logout Desainer
Menu logout desainer adalah menu untuk keluar dari sistem.

Gambar 4.56 Menu Logout Desainer

Universitas 17 Agustus 1945 Surabaya

 59

4.5 Pengujian
Untuk mengetahui kinerja halaman web, maka dilakukan uji coba kecepatan
untuk sistem Portal Kontes Desain tersebut. Sebagai perbandingan, uji coba
dilakukan dengan memanfaatkan 2 layanan web speed test, berikut hasil yang
didapat.
1. Menggunakan layanan tools.pingdom.com

Gambar 4.57 tools.pingdom.com

2. Menggunakan layanan pagescoring.com

Gambar 4.58 pagescoring.com

Hasil yang didapatkan adalah sistem rata-rata membutuhkan waktu 1,33 detik untuk
meload halaman dengan kapasitas rata-rata 477 kB.

Universitas 17 Agustus 1945 Surabaya

 BAB V
KESIMPULAN DAN SARAN
5.1 Kesimpulan
Dengan diselesaikannya sistem Portal Kontes Desain berbasis web, dapat
disimpulkan bahwa :
1. Sistem Portal Kontes Desain telah berhasil dibuat dan dapat diakses
pada alamat http://portalkontesdesain.esy.es/. Sistem tersebut
membutuhkan waktu loading halaman rata-rata 1,33 detik dengan
kapasitas rata-rata 477 kB.
2. Sistem ini dapat membantu menghubungkan dan menfasilitasi para
desainer dan para client.
3. Memudahkan para desainer untuk menyalurkan bakat mereka dengan
mengikuti kontes yang diadakan oleh client.
4. Memudahkan para client untuk mendapatkan desain yang mereka
inginkan dengan cara membuat kontes desain yang diikuti oleh para
desainer.
5. Sistem yang berbasiskan web, memudahkan para desainer dan para
client untuk mengaksesnya kapan dan dimana saja.

5.2 Saran
Saran-saran yang dapat diberikan untuk sistem Portal Kontes Desain ini
adalah:
1. Kedepannya perlu dilakukan pengkajian ulang bila muncul masalah-
masalah baru dalam sistem Portal Kontes Desain.
2. Sistem ini dapat dikembangkan lagi dengan batasan masalah yang
lebih luas. Dan dapat dilakukan perbaikan terhadap kekurangan yang
ditemui dalam penggunaannya.

60 Universitas 17 Agustus 1945 Surabaya

 DAFTAR PUSTAKA
Blanchard, B. S., & Fabrycky, W.J (2006) Systems engineering and analysis
(4th ed.) New Jersey: Prentice Hall.
Hanif al Fatta 2008. Analisis dan Perancangan Sistem Informasi, Andi Offset,
Yogyakarta.
Ilmuwebsite.com. 2016 .Belajar PHP.
http://www.ilmuwebsite.com/pemula/belajar-php. (diakses 09-06-2016)
Jogiyanto, Hartono, 2005. Analisis dan desain Sistem Infromasi,
Yogyakarta:Andi Offset.
Kristanto, Andri, 2004. Strategi Periklanan Pada e-Commerce Perusahaan Top
Dunia, Andi Offset, Yogyakarta.
Sutanta, 2004. Analis dan Perancangan Basis Data, Andi Offsite,
Yogyakarta.

61 Universitas 17 Agustus 1945 Surabaya

 LAMPIRAN
Tanggapan User Terhadap Sistem
Tanggapan user client dan user desainer terhadap pengujian sitem portal kontes
desain.
SB = Sangat Baik
B = Baik
C = Cukup
KB = Kurang Baik
SKB = Sangat Kurang Baik

Nama Client : Afni Aziz

No Pernyataan SB S C KB SKB
1 Tampilan user interface X
2 Kecepatan akses X
3 Keamanan sistem X
4 Kemudahan penggunaan sistem X
5 Kesesuaian sistem terhadap kebutuhan X
Dari data diatas secara keseluruhan sistem portal kontes desain sudah memenuhi
kebutuhan sesuai harapan user client.

Nama Desainer : Mimain Dafiq

No Pernyataan SB S C KB SKB
1 Tampilan user interface X
2 Kecepatan akses X
3 Keamanan sistem X
4 Kemudahan penggunaan sistem X
5 Kesesuaian sistem terhadap kebutuhan X
Dari data diatas secara keseluruhan sistem portal kontes desain sudah memenuhi
kebutuhan sesuai harapan user desainer.

62 Universitas 17 Agustus 1945 Surabaya