DAFTAR SI

BAB I 2

PENDAHULUAN 2

1.1 Latar Belakang Masalah 2

BAB II 4

TINJAUAN PUATAKA DAN LANDASAN TEORI 4

3.1 Konsep Dasar Web 4

3.2 Sistem 4

3.3 Informasi 12

3.4 Sistem Informasi 13

3.5 Jasa 15

3.6 Desain 15

3.7 Desain Grafis 19

3.8 Logo 19

3.9 Brosur 22

3.10 Banner atau Spanduk 22

3.11 Object Oriented Programming (OOP) 23

3.12 Website 24

3.13 Bahasa Pemrograman 27

3.14 Basis Data 33

3.15 Aplikasi Perangkat Lunak 34

3.16 Model Pengembangan Perangkat Lunak 36

3.17 Framework 38

3.18 Teori Pendukung 40

3.19 Struktur Navigasi 40

3.20 Entity Relationship Diagram (ERD) 42

3.21 Logical Record Structure (LRS) 43

3.22 Implementasi dan Pengujian Web 44

BAB III 46

PEMBAHASAN 46

3.1 Analisis Kebutuhan 46

3.2 Analisis Kebutuhan Pengguna 46

3.3 Analisa Kebutuhan Sistem 47

3.4 Rancangan Dokumen Antar Muka 51

3.5 Rancangan Dokumen Antar Muka Halaman Admin 54

3.6 Rancangan Dokumen Antar Muka Halaman Perusahaan 80

3.7 Rancangan Dokumen Antar Muka Halaman Freelancer 94

3.8 Entity Relationship Diagram (ERD) 108

3.9 Logical Record Structure (LRS) 110

3.10 Pengkodean 121

3.11 Spesifikasi Program 122

3.12 Struktur Navigasi Tamu (Guest) 123

3.13 Struktur Navigasi Admin 124

3.14 Struktur Navigasi Perusahaan 124

3.15 Struktur Navigasi Freelancer 125

3.16 Spesifikasi Sistem Komputer 125

3.17 Implementasi 126

3.18 Implementasi Halaman Admin 130

2.1.1. Implementasi Perusahaan 151

2.1.2. Implementasi Freelancer 167

3.19 Pengujian Unit 183

BAB I

PENDAHULUAN

1.1 Latar Belakang Masalah

Perkembangan ilmu dan teknologi saat ini begitu pesatnya, laju perkembangan itu demikian luasnya
hingga hampir mencakup seluruh kehidupan manusia, khususnya di bidang teknologi informasi,
komunikasi dan komputer. Inilah yang melatar belakangi perlunya penerapan IPTEK (Ilmu
Pengetahuan dan Teknologi) pada perusahaan-perusahaan swasta maupun pada instansi
pemerintahan di berbagai bidang dalam memenuhi tuntutan diperlukan sumber daya manusia yang
cakap dan handal, karena teknologi yang canggih tanpa peran aktif sumber daya manusia tidak akan
berarti apa-apa.

Desain merupakan proses perencanaan atau perancangan suatu objek yang bertujuan agar objek
yang diciptakan memiliki fungsi, memiliki nilai keindahan, dan berguna bagi manusia. Sedangkan
desain grafis adalah sebuah bentuk media komunikasi visual yang berbentuk gambar untuk
digunakan sebagai penyampaian informasi atau pesan yang cukup efektif. Dalam dunia desain grafis
semua elemen baik itu text, shape, tablel dan lain sebagainya dianggap sebagai sebuah gambar. Hal
ini dikarenakan elemen-elemen tersebut merupakan sebuah abstraksi simbol - simbol yang
tersembunyi.

Jasa merupakan setiap kegiatan atau manfaat yang ditawarkan oleh suatu pihak pada pihak lain dan
pada dasarnya tidak berwujud, serta tidak menghasilkan kepemilikan sesuatu. Proses produksinya
mungkin dan mungkin juga tidak dikaitkan dengan suatu produk fisik. Pada kasus ini penyedia jasa
(freelancer) membutuhkan sarana atau wadah untuk mengekspresikan hasil karyanya untuk
mendapatkan

manfaat ekonomi dan membutuhkan wadah untuk mempertemukan antara penyedia jasa dan
pengguna jasa. Disisi lain penguna jasa ingin mendapatkan hasil desain grafis yang bagus dan
berkwalitas dengan harga yang lebih murah dibandingkan dengan membuat desain di suatu
perusahaan penyedia jasa desain grafis.

Dari uraian di atas, maka dapat diperoleh gambaran umum bahwa aplikasi pengelolaan jasa desain
akan dibangun bebasis website, sehingga nantinya dapat mudah diakses melalui website.
Berdasarkan latar belakang maka dibuatlah “Sistem Informasi Jasa Desain Grafis “Digital Creative”
Berbasis Website”

1.2 Tujuan dan Manfaat

Tujuan dari penulisan Laporan Tugas Akhir ini adalah :

1. Membuat sistem informasi jasa desain grafis “digital creative” berbasis

website.

2. Membuat wadah untuk orang dengan bakat dan hobi dalam bidang desain grafis dimana
mereka mempunyai potensi namun tidak ada wadah yang menampung atau belum bekerja di suatu
perusahaan penyedia jasa desain grafis.

3. Membuat wadah yang dapat mempertemukan antara pengguna jasa (perusahaan atau
masyarakat umum) dan penyedia jasa (freelancer) di dalam sebuah website.

Sedangkan manfaat dari penulisan Laporan Tugas Akhir ini sebagai berikut :

1. Manfaat untuk penulis

Sebagai salah satu syarat kelulusan Program Diploma Tiga (DIII) Universitas Bina Sarana Informatika
Fakultas Teknik dan Informatika Program Studi Sistem Informasi.

2. Manfaat untuk objek penelitian

a. Memudahkan mencari penyedia jasa desain grafis.

b. Mempermudah mencari informasi terkait tentang jasa desain grafis.

c. Menumbuhkan satu kesempatan baru yaitu persaingan untuk lebih maju dan kreatif dalam
bidang industri desain grafis bagi penyedia jasa (freelancer)

d. Salah satu solusi untuk mengurangi pengangguran.

e. Perusahaan mendapatkan hasil desain grafis yang bagus dan berkwalitas dengan harga yang
lebih murah dibandingkan dengan membuat desain di suatu perusahaan penyedia jasa desain grafis.

f. Untuk usaha kecil (dengan modal sedikit) bisa mendapatkan jasa desain grafs yang
berkwalitas dengan biaya yang murah.

3. Manfaat untuk pembaca

a. Memberikan pemahaman mengenai konsep dalam merancang sistem informasi jasa desain
grafis “ digital creative” berbasis website sehingga lebih optimal.

b. Menambah pengetahuan mahasiswa dalam menganalisa suatu masalah dan

memecahkannya lalu mengungkapnya dalam bentuk tulisan

BAB II
TINJAUAN PUATAKA DAN LANDASAN TEORI

3.1 Konsep Dasar Web

Menurut Rohi Abdulloh dalam Destiningrum & Jafar (2015), “Web merupakan sekumpulan halaman
yang terdiri dari beberapa halaman yang berisi informasi dalam bentuk data digital baik berupa text,
gambar, video, audio, dan animasi lainnya yang disediakan melalui jalur koneksi internet”.

Pada landasan teori ini, mencantumkan beberapa konsep dasar web yang berhubungan dalam
pembuatan website ini agar pembuatannya berjalan secara sistematis, diantaranya :

3.2 Sistem

Menurut Fat dalam Kristania et al. (2018), pengertian sistem sebagai berikut: “Sistem adalah suatu
himpunan suatu “benda” nyata atau abstrak (a set of thing) yang terdiri dari bagian-bagian atau
komponen-komponen yang saling berkaitan, berhubungan. Berketergantungan, saling mendukung,
yang secara keseluruhan bersatu dalam suatu kesautan (unity) untuk mencapai tujuan tertentu
secara efisien dan efektif”.

1. Karakteristik Sistem

Menurut Hutahaean (2014), Supaya sistem itu dikatakan sistem yang baik memiliki karakteristik
yaitu:

a. Komponen

Suatu sistem terdiri dari sejumlah komponen-komponen yang saling berinteraksi, yang artinya saling
bekerja sama membentuk satu kesatuan.

Komponen sistem terdiri dari komponen yang berupa subsistem atau bagian-bagian dari sistem.

b. Batasan Sistem (Boundary)

Batasan sistem merupakan daerah yang membatasi antara suatu sistem dengan sistem yang lain
atau dengan lingkungan luarnya. Batasan sistem ini memungkinkan suatu sistem dipandang sebagai
suatu sistem menunjukan ruang lingkup (scope) dari sistem tersebut.
c. Lingkungan luar sistem (environment)

Lingkungan luar sistem (environment) adalah diluar batas dari sistem yang mempengaruhi operasi
sistem. Lingkungan dapat bersifat menguntungkan yang harus tetap dijaga dan yang merugikan yang
harus dikendalikan, kalau tidak akan mengganggu kelangsungan hidup dari sistem.

d. Penghubungan sistem (interface)

Penghubungan sistem merupakan media penghubung antara satu subsistem dengan subsistem
lainnya. Melalui penghubung ini memungkinkan sumber-sumber daya mengalir dari subsistem ke
subsistem lain. Keluaran (Output) dari subsistem akan menjadi masukan (input) untuk subsistem lain
melalui penghubung.

e. Masukan Sistem (Input)

Masukan adalah energi yang dimasukkan kedalam sistem, yang dapat berupa perawatan
(maintenace input), dan masukkan sinyal (signal input). Maintenace input adalah energi yang
dimasukkan agar sistem dapat beroperasi. Signal input adalah energi yang diproses untuk
didapatkan

keluaran. Contoh dalam sistem komputer program adalah maintenace input sedangkan data adalah
signal input untuk diolah menjadi informasi.

f. Keluaran (Output)

Keluaran sistem adalah hasil dari energi yang diolah dan diklasifikasikan menjadi keluaran yang
berguna dan sisa pembuangan. Contoh komputer menghasilkan panas yang merupakan sisa
pembuangan, sedangkan informasi adalah keluaran yang dibutuhkan.

g. Pengolah Sistem

Suatu sistem menjadi bagian pengolah yang akan merubah masukkan menjadi keluaran. Sistem
produksi akan mengolah bahan baku menjadi bahan jadi.

h. Sasaran Sistem

Suatu sistem pasti mempunyai tujuan (goal) atau sasaran (objective). Sasaran dari sistem sangat
menentukan input yang dibutuhkan sistem dan kekuatan yang akan dihasilkan sistem.

2. Klasifikasi Sistem

Menurut Hutahaean (2014), Sistem dapat diklasifikasikan dalam beberapa sudut pandang:
a. Sistem diklasifikasikan sebagai:

1) Sistem abstrak (abstrak system)

Sistem abstrak adalah sistem yang berupa pemikiran-pemikiran atau ide-ide yang tidak tampak
secara fisik.

2) Sistem fisik (physical system)

Sistem fisik adalah sistem yang ada secara fisik.

b. Sistem diklasifikasikan sebagai:

1) Sistem alamiyah (natural system)

Sistem alamiyah adalah sistem yang terjadi melalui proses alam, tidak dibuat oleh manusia. Misalnya
sistem perputaran bumi.

2) Sistem buatan manusia (human made system)

Sistem buatan manuasia adalah sistem yang dibuat oleh manusia yang melibatkan interaksi antara
manusia dengan mesin (human machine system)

c. Sistem diklasifikasikan sebagai:

1) istem tertentu (deterministicl system)

Sistem tertentu adalah sistem yang beroperasi dengan tingkah laku yang sudah dapat diprediksi,
sebagai keluaran sistem yang dapat diramalkan.

2) Sistem tak tentu (probalistic system)

Sistem tak tentu adalah sistem yang kondisi masa depannya tidak dapat diprediksi karena
mengandung unsur probabilistik.

d. Sistem diklasifikasikan sebagai:

1) Sistem tertutup (close system)

Sistem tertutup adalah sistem yang tidak terpengaruh dan tidak berhubungan dengan lingkungan
luar, sistem bekerja otomatis tanpa ada turut campur lingkungan luar. Secara teoritis sistem tertutup
ini ada, kenyataannya tidak ada sistem yang benar-benar tertutup, yang ada hanya relatively closed
system.

2) Sistem terbuka (Open system)

Sistem terbuka adalah sistem yang berhubungan dan terpengaruh dengan lingkungan luarnya.
Sistem ini menerima input dan output dari lingkungan luar atau subsistem lainnya. Karena sistem
terbuka terpengaruh lingkungan luar maka harus mempunyai pengendali yang baik.

Menurut Sutabri dalam Isty & Afifah (2018), menyimpulkan bahwa “Sistem dapat diartikan sebagai
suatu kumpulan atau himpunan dari unsur, komponen, atau variable yang terorganisasi saling
berinteraksi, saling tergantung satu sama lain dan terpadu”.

Jadi dapat simpulkan sistem adalah suatu himpunan atau kumpulan yang terogranisasi yang saling
berinteraksi antara komponen-komponennya yang secara keseluruhan bersatu dalam suatu
kesautan (unity) untuk mencapai tujuan tertentu secara efisian dan efektif.

3.3 Informasi

Menurut Turban dalam Andalia & Setiawan (2015), mengemukakan bahwa “informasi merupakan
data yang telah diorganisir sehingga memberikan arti dan nilai kepada penerimanya”.

Sedangkan menurut Sutabri dalam Handayani & Wijianto (2018), “Informasi adalah data yang
diklasifikasikan atau diolah atau diinterpretasikan untuk digunakan dalam proses pengambilan
keputusan”.

Menurut Menurut Mc Leod dalam Imaniawan & Elsa (2016), mengatakan suatu informasi yang
berkualitas harus memiliki ciri-ciri:

1. Akurat, artinya informasi harus mencerminkan keadaan sebenarnya.

2. Tepat waktu, artinya informasi itu harus tersedia atau ada pada saat informasi tersebut
diperlukan, tidak besok atau tidak beberapa jam lagi.

3. Relevan, artinya informasi yang diberikan harus sesuai dengan yang dibutuhkan.

4. Lengkap, artinya informasi harus diberikan secara lengkap.

Informasi dapat diartikan sebagai sekumpulan data yang telah diproses sehingga menjadi sesuatu
yang dapat dimengerti dan bermanfaat bagi penerimanya.

3.4 Sistem Informasi

Menurut Hartono dalam Mahaseptiviana et al. (2014), “Sistem Informasi merupakan suatu sistem di
dalam suatu organisasi yang mempertemukan kesbutuhan pengolahan transaksi harian, mendukung
operasi, bersifat manajerial dan kegiatan strategi dari suatu organisasi dan menyediakan pihak luar
tertentu dengan laporan- laporan yang diperlukan”.

1. Fungsi sistem informasi

Menurut Anggraeni & Irvani (2017), fungsi sistem informasi yaitu:

a. Untuk meningkatkan aksebilitas data yang ada secara efektif dan efisien kepada pengguna,
tanpa perantara sistem informasi.

b. Memperbaiki produktivitas aplikasi pengembangan dan pemeliharaan sistem.

c. Menjamin tersedianya kwalitas dan keterampilan dalam memanfaatkan sistem informasi

secara kritis.

d. Mengidentifikasi kebutuhan mengenai ketrampilan pendukung sistem informasi.

e. Mengantisipasi dan memahami akan konsekuensi ekonomi.

f. Menetapkan investasi yang akan diarahkan pada sistem informasi.

g. Mengembangkan proses perencanaan yang efektif.

2. Komponen Sistem Informasi

Menurut Anggraeni & Irvani (2017), Komponen-komponen dari sistem informasi adalah sebagai
berikut:

a. Komponen input, adalah data yang masuk ke dalam sistem informasi.

b. Komponen model, adalah kombinasi prosedur, logika dan model matematika yang
memproses data yang tersimpan di basis data dengan cara yang sudah ditentukan untuk
menghasilkan keluaran yang diinginkan.

c. Komponen output, adalah hasil informasi yang berkualitas dan dokumentasi yang berguna
untuk semua tingkatan manajemen serta semua pemakai sistem.

d. Komponen teknologi, adalah alat dalam sistem informasi, teknologi digunakan dalam
menerima input, menjalankan model, menyimpan dan mengakses data, menghasilkan dan
mengirimkan output dan memantau pengendalian sistem.
e. Komponen basis data, adalah kumpulan data yang saling berhubungan yang tersimpan di
dalam komputer dengan menggunakan software database.

f. Komponen kontrol, adalah komponen yang mengendalikan gangguan terhadap sistem

informasi.

3. Ciri-ciri sistem informasi

Menurut Anggraeni & Irvani (2017), ciri-ciri sistem informasi yaitu:

a. Baru, adalah informasi yang didapat sama sekali baru dan segar bagi penerima

b. Tambahan, adalah informasi dapat diperbarui atau memberikan tambahan terhadap

informasi yang sebelumnya telah ada.

c. Kolektif, adalah informasi yang dapat menjadi suatu koreksi dari informasi yang salah
sebelumnya.

d. Penegas, adalah informasi yang dapat mempertegas informasi yang telah ada.

Sistem informasi dapat diartikan sebagai gabungan dari teknologi informasi dan aktivitas orang yang
menggunakan teknologi informasi untuk mendukung proses suatu manajemen dan operasional.

3.5 Jasa

Menurut Zeithaml dan Bitner dalam Ningratri (2017), ”Jasa pada dasarnya adalah seluruh aktivitas
ekonomi dengan output selain produk dalam pengertian fisik, dikonsumsi dan diproduksi pada saat
bersamaan, memberikan nilai tambah dan secara prinsip tidak berwujud (intangible) bagi pembeli
pertamanya”.

Sedangkan menurut Rangkuti dalam Suratno et al. (2016), “Jasa merupakan pemberian suatu kinerja
atau tindakan tak kesat mata dari suatu pihak kepada pihak lain. Pada umumnya jasa diproduksi dan
dikomsusi secara bersamaan, dimana interaksi antara pemberi jasa diproduksi dan dikomsusi secara
bersamaan, dimana intraksi antara pemberi jasa dan penerima jasa mempengaruhi hasil jasa
tersebut”.

3.6 Desain

Menurut Agus Sachari dalam Utami & Hakim (2016), menyatakan bahwa “pada awalnya desain
merupakan kata baru berupa peng-Indonesiaan dari kata design (bahasa Inggris), istilah ini
melengkapi kata “rancang/rancangan/merancang” yang dinilai kurang mengekspresikan keilmuan,
keluasan dan kewibawaan profesi. Sejalan dengan itu, kalangan insinyur menggunakan istilah
rancang bangun, sebagai
pengganti istilah desain. Namun di kalangan keilmuan seni rupa istilah “desain” tetap secara
konsisten dan formal dipergunakan”.

Menurut Diyatama Putri dalam Utami & Hakim (2016), “Elemen-elemen desain sendiri terdiri atas 6
hal yaitu garis (line), bentuk (shape), tekstur (texture), ruang, ukuran, dan warna”.

1. Garis (line)

Garis adalah sebuah unsur desain yang menghubungkan antara satu titik dengan titik lainnya
sehingga tergambarlah sebuah garis dengan bentuk lengkung (curve) atau lurus (straight). Mampu
membuat keteraturan, mengarahkan pandangan dan memberikan kesan bergerak serta memiliki
karakter tertentu. Penggunaan garis dapat diaplikasikan dalam pembuatan grafik atau bagan.

Sumber: Utami & Hakim (2016)

Gambar II.1. Garis dan Karakter yang Ditimbulkan

2. Bentuk (Shape)

Bentuk adalah seperangkat garis yang ditempatkan berdekatan, memiliki diameter, tinggi dan lebar.
Ini merupakan obyek 2 (dua) dimensi. Berdasarkan sifatnya, bentuk dapat dikategorikan menjadi
tiga, yaitu huruf, simbol, dan bentuk nyata (form). Selain itu hal ini dapat digunakan sebagai
perantara sebuah ide.

Sumber: Utami & Hakim (2016)

Gambar II.2. Bentuk Dasar

3. Tekstur (Texture)

Tekstur merupakan sebuah visualisasi dari permukaan yang dapat dinilai dengan cara dilihat atau
diraba. Pada prakteknya, tekstur sering dikategorikan sebagai corak dari suatu permukaan benda.
Tekstur dapat menambah dimensi dan kekayaan sebuah layout, menegaskan atau membawa ke
dalam sebuah rasa atau emosi tertentu.
Sumber: Utami & Hakim (2016)

Gambar II.3. Contoh Tekstur

4. Ruang

Ruang adalah jarak yang memisahkan antar sesuatu. Biasanya digunakan memisahkan atau
menyatukan elemen-elemen layout. Ruang juga berfungsi sebagai tempat istirahat bagi mata. Dalam
bentuk fisiknya, pengidentifikasian ruang digolongkan menjadi dua unsur, yaitu obyek (figure) dan
latar belakang (background).

Sumber: Utami & Hakim (2016)

Gambar II.4. Desain dengan White Space

5. Ukuran

Ukuran adalah seberapa besar atau kecil sesuatu hal. Perbandingan ukuran satu bentuk terhadap
bentuk lainnya. Dengan menggunakan elemen ini kamu dapat menciptakan kontras dan penekan
(emphasis) pada obyek desain, sehingga orang akan tahu sisi menarik atau menonjol dari desain itu
dan melihatnya terlebih dahulu.

6. Warna

Warna merupakan media paling akhir dalam komunikasi simbolik dan yang terpenting. Nyatanya,
warna dibagi ke dalam dua section, warna yang timbul karena sinar Red Green Blue (RGB) dan warna
yang dibuat dalam unsur tinta atau cat Cyan Magenta Yellow Black (CMYK). Dengan warna, desainer
dapat menampilkan identitas, menyampaikan pesan atau menarik perhatian serta menegaskan
sesuatu.

Sumber: Utami & Hakim (2016)

Gambar II.5. Unsur Warna

3.7 Desain Grafis

Menurut Maharta dalam Senoprabowo et al. (2019), “desain grafis yaitu membuat, merancang suatu
produk dengan kombinasi bentuk, teks, warna, dan banyak hal lainnya yang menarik sehingga
produk yang dihasilkan memiliki seni keindahan dan tingkat pemahaman yang mudah”.

3.8 Logo

Menurut David E. Carter dalam Utami & Hakim (2016), “logo adalah identitas suatu perusahaan
dalam bentuk visual yang diaplikasikan dalam berbagai sarana fasilitas dan kegiatan perusahaan
sebagai bentuk komunikasi visual. Logo dapat juga disebut dengan simbol, tanda gambar, merek
dagang (trademark) yang berfungsi sebagai lambang identitas diri dari suatu badan usaha dan tanda
pengenal yang merupakan ciri khas perusahaan”.

Menurut David E. Carter dalam Utami & Hakim (2016), “Pertimbangan - pertimbangan tentang logo
yang baik itu harus mencakup beberapa hal sebagai berikut :

1. Original & Desctinctive, atau memiliki nilai kekhasan, keunikan, dan daya pembeda yang
jelas.

2. Legible, atau memiliki tingkat keterbacaan yang cukup tinggi meskipun diaplikasikan dalam
berbagai ukuran dan media yang berbeda-beda.

3. Simple atau sederhana, dengan pengertian mudah ditangkap dan dimengerti dalam waktu
yang relatif singkat.

4. Memorable, atau cukup mudah untuk diingat,karena keunikannya, bahkan dalam kurun
waktu yang lama.

5. Easily associated with the company, dimana logo yang baik akan mudah dihubungkan atau
diasosiasikan dengan jenis usaha dan citra suatu perusahaan atau organisasi.

6. Easily adaptabel for all graphic media. Disini, faktor kemudahan mengaplikasikan
(memasang) logo baik yang menyangkut bentuk fisik, warna maupun konfigurasi logo pada berbagai
media grafis perlu diperhitungkan pada proses pencanangan. Hal itu untuk menghindari kesulitan-
kesulitan dalam penerapannya.

Menurut John Murphy dan Michael Rowe dalam Wafa & Counselor (2016), logo digolongkan
menjadi 7 jenis yaitu :

1. Name Only Logo, Logo yang diambil sebuah nama, dengan menggunakan gaya grafis khusus.
Logo jenis ini memberi ketegasan dan pesan langsung kepada konsumen. Contohnya : logo Yves
Saint Laurent, Sony, Panasonic, Nikon, Xerox.
2. Name / Symbol Logo, Logo yang terdiri dari nama perusahaan atau produk dengan gaya
tipografis yang berkarakter kuat, tersusun dari bentuk-bentuk grafis seperti oval, kotak atau
lingkaran. Sebagai contoh adalah logo Ford, Du Pont, Hertz. Kelebihan logo jenis ini adalah pada
bentuknya yang ringkas dan fleksibel karena jenis logo ini sepertinya mampu berdiri sendiri.

3. Initial Letter Logo, Logo yang menggunakan huruf awal atau inisaial dari nama produk atau
perusahaan dan menjadikannya sebagai elemen utama logo tersebut. Logo jenis ini terkadang
menunjukkan gabungan nama pemilik perusahaan. Contohnya adalah logo Hewlett-Packard, IBM,
RCTI.

4. Pictorial Name Logo, Logo yang menggunakan nama produk atau organisasi sebagai
komponen penting dari gaya logo, dimana secara keseluruhan logo ini memiliki gaya yang sangat
khusus. Perusahaan yang menggunakan logo ini biasanya perusahaan yang sudah cukup terkenal
seperti Coca Cola, Kodak, McDonald, Rolls Royce. Karena kuatnya image perusahaan / produk yang
memakain logo ini, maka bila terjadi peniruan logo tersebut oleh perusahaan lain maka citra yang
dihasilkan akan tetap mengacu pada produk atau perusahaan yang ditiru.

5. Associative Logo, Logo yang berdiri bebas yang biasanya tidak memuat nama produk atau
perusahaan, tetapi memiliki asosiasi langsung dengan nama, produk atau wilayah aktifitasnya.
Contohnya logo perusahaan minyak Shell yang menunjukkan gambar kerang sebagai asosiasi dari
fosil penghasil minyak. Jenis logo ini mempunyai daya tarik kuat dan mudah untuk dipahami.

6. Allusive Logo, Logo yang bersifat kiasan. Logo jenis ini memiliki hubungan yang tidak
langsung antara nama dengan logonya sehingga logo jenis ini sulit untuk dipahami, dan memerlukan
waktu lebih agar orang lain bisa memahami apa maksud dari logo yang bersangkutan. Contohnya
logo Mercedes Benz yang terdiri dari bentuk bintang segitiga yang merepresentasikan dari sistem
kemudi mobil, bentuk A pada perusahaan penerbangan Alitalia yang dihasilkan dari bentuk ekor
pesawat yang berfungsi sebagai penyeimbang.

7. Abstract Logo, Logo yang memiliki bentuk visual yang abtsrak. Logo jenis ini dapat
menimbulkan beragam persepsi pemahaman tergantung dari daya pemahaman konsumen.
Contohnya logo Citoen, Bakrie Brothers, dan sebagainya. Kelebihan jenis dari logo ini adalah
kemampuannya untuk tampil dalam bermacam-macam variasi dan sangat orisinil sehingga mampu
meminimalisasikan terjadinya kemiripan sebuah logo dengan logo lainnya. Namun kekurangannya
logo ini menjadi sukar dipahami oleh konsumen karena bentuknya yang abstrak, membuat
konsumen tidak mengerti sepenuhnya makna yang terkandung dalam logo tersebut.

3.9 Brosur

Menurut The ALA Glossary of Library and Information Science dalam Ruyadi et al. (2017),
menyatakan bahwa “brosur atau buklet adalah terbitan tidak berkala yang terdiri dari satu hingga
sejumlah kecil halaman, tidak terkait dengan terbitan lain, dan selesai dalam sekali terbit.
Halamannya sering dijadikan satu biasanya memiliki sampul tapi tidak menggunakan jilid keras”.

3.10 Banner atau Spanduk

Menurut Nikko dalam Raharjo & Pribadi (2017), menjelaskan “spanduk atau banner adalah “suatu
kain rentang yang isinya informasi, slogan ataupun berita yang diinformasikan kepada
umum/public”. Spanduk juga dapat diartikan sebagai kain membentang yang biasanya terletak di
tepi jalan yang berisi text, berwarna serta bergambar.

Fungsi spanduk atau banner diantaranya:

1. Spanduk dapat mempengaruhi citra produk suatu perusahaan.

2. Menimbulkan kepercayaan orang banyak, khususnya konsumen terhadap suatu produk

ataupun bisnis.

3. Mengingatkan kepada masyarakat umum pada suatu produk atau perusahaan.

4. Menimbulkan atau membangun loyalitas masyarakat umum atau konsumen.

Dalam mendesain spanduk atau banner ada hal-hal yang perlu diperhatikan

yaitu:

1. Layout

Ukuran spanduk disesuaikan dengan kebutuhan dan letak pemasangan spanduk.

2. Konten

Konten spanduk dapat berupa logo, konten tulisan yang akan ditampilkan sesuai dengan tema serta
foto-foto pendukung.

3. Ketelitian.

Dalam membuat spanduk ketelitian dapat berupa ejaan penulisan, letak logo, dan penulisan.
Ketelitian diperlukan untuk mengurangi kesalahan sebelum spanduk tersebut dicetak

4. Warna
Dalam mendesain spanduk warna disesuaikan dengan kebutuhan dan tema. Mendesain spanduk
warna disesuaikan agar terlihat kontras dan dapat dibaca oleh pembaca secara jelas.

5. Gambar

Hal yang dipergunakan dalam untuk menarik calon konsumen adalah pemilihan gambar/tulisan.
Gambar memiliki resolusi tinggi agar tidak blur saat cetak.

3.11 Object Oriented Programming (OOP)

Menurut Dharma dalam Fridayanthie & Charter (2016), “OOP (Object Oriented Programming) adalah
sebuah pendekatan untuk pengembangan suatu

software, dimana dalam struktur software tersebut didasarkan kepada interaksi objek dalam
penyelesaian suatu proses atau tugas”.

3.12 Website

Menurut Rahdian dalam Ernest (2018), “Website adalah kumpulan dari halaman-halaman situs atau
link yang biasanya terangkum dalam sebuah domain atau subdomain yang tepatnya berada di dalam
World Wide Web (WWW) di internet”.

Ada beberapa jenis-jenis web yang di golongkan berdasarkan perubahan dan cara interaksi, berikut
adalah penggolongan secara garis besar.

1. Website Statis

Website statis ialah web yang isinya jarang dirubah, contoh dari jenis website

ini adalah www.hondacengkareng.com, www.mitsubishi-motors.co.id, dan

website lainnya yang jarang terjadi perubahan.

2. Website Dinamis

Website dinamis yang menyiadakan konten atau isi yang berubah-ubah misalkan seperti
www.detik.com, www.kompas.com.

3. Website Interaktif
Website interaktif merupakan web yang digunakan untuk berinteraksi sesama pengguna atau
pengguna lainnya. Contoh website interaktif ialah jejaring sosial, blog, forum. Pada website ini, user
bisa berinteraksi dan menulis apa yang menjadi pemikirannya.

Dan sebuah website memiliki komponen pendukung yang terdapat dalamnya antara lain:

1. Web Browser

Menurut Ahmia & Belbachir (2018), menggambarkan bahwa “Web browser

digunakan untuk menampilkan hasil website yang telah dibuat. Web browser

yang sering digunakan, diantaranya Mozzila Firefox, Google Chrome, Opera, dan UC Browser”.
Aplikasi web browser ialah aplikasi yang di gunakan untuk menampilkan halaman web agar
pengunjung suatu website dapat melihat atau membaca informasi.

Sumber: Google Chrome

Gambar II.6. Google Chrome Web Browser

2. Web Server

Menurut Fathansyah dalam Agus & Safitri (2015) menerangkan bahwa “web server adalah Server
Web merujuk pada perangkat keras (server) dan perangkat lunak yang menyediakan layanan akses
kepada pengguna melalui protokol komunikasi Hypertext Transfer Protocol (HTTP) ataupun
variannya seperti File Transfer Protocol (FTP) dan Hypertext Transfer Protocol Secure (HTTPS) atas
berkas-berkas yang terdapat pada suatu Uniform Resource Locator (URL) ke pemakai”.

Web Server merupakan suatu perangkat dalam server yang berfungsi untuk menerima dan
memproses permintaan dari client atau browser melalui protokol HTTP / HTTPS dalam bentuk
halaman website berupa Hypertext Markup Language (HTML) atau Hypertext Prepocessor (PHP).

3. Domain

Menurut Premysl Raban.eu dalam Bjerrum & Gladrow (2017) bahwa “domain adalah sistem global
(global adressing system) yang membuat bisanya penerjemahan alat Internet Protocol (IP) yang
tersusun atas angka menjadi nama (nama domain) dan sebaliknya”.
Domain adalah nama unik yang diberikan untuk mengidentifikasi server komputer seperti web
server dan mail server agar lebih mudah diakses tanpa menggunakan IP address server suatu
website.

4. Hosting

Menurut Premysl Raban.eu dalam Bjerrum & Gladrow (2017), menerangkan bahwa “hosting
merupakan tempat penyimpanan data website dimana didalamnya meliputi kapasitas penyimpanan,
bandwidth yang merupakan sebuah kapasitas yang di gunakan untuk mengukur jumlah pengunjung
website serta database”.

Hosting merupakan layanan berbasis internet yang disewakan sebagai tempat menyimpan data
berupa informasi, gambar, video dan konten-konten yang dari sebuah website sehingga dapat
diakses lewat internet.

5. Internet

Menurut Greenlaw dalam Sherlyanita & Rakhmawati (2016), menyimpulkan bahwa ”Internet adalah
sebuah sistem informasi global yang terhubung secara logika oleh address yang unik secara global
yang berbasis pada Internet Protocol (IP), mendukung komunikasi dengan menggunakan
Transmission Control Protocol (TCP)/IP, menyediakan, menggunakan dan membuatnya bisa diakses
baik secara umum maupun khusus”.

Internet terdiri dari jaringan-jaringan komputer kecil di seluruh dunia yang saling terhubung dan
membentuk jaringan komputer yang sangat besar.

3.13 Bahasa Pemrograman

Bahasa Pemrograman yang dipakai dalam perancangan website antara lain :

1. HyperText Markup Language (HTML)

Menurut Syarif et al., (2016) mengemukakan bahwa :

HyperText Markup Language (HTML) adalah sebuah bahasa markup yangdigunakan untuk membuat
sebuah halaman web, menampilkan berbagaiinformasi di dalam sebuah penjelajah web Internet dan
formating hypertext sederhana yang ditulis kedalam berkas format American Standard Code for
Information Interchange (ASCII) agar dapat menghasilkan tampilan wujud yang terintegerasi.

Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam
format ASCII normal sehingga menjadi home page dengan perintah-perintah. HTML merupakan
bahasa pemrograman standar yang digunakan untuk membuat website, yang dapat diakses oleh
browser untuk menampilkan berbagai bentuk informasi. HTML memungkinkan user untuk membuat
dan menyusun bagian head, body, bottom dan link.

Berikut contoh penulisan koding html:

<!DOCTYPE html>

<html>

<head>

<title>Judul Dokumen</title>

</head>

<body>

<p>Ini adalah isi dari dokumen</p>

</body>

</html>

2. Hypertext Preprocessor (PHP)

Menurut Firman el al. (2016), mengemukakan bahwa:

PHP atau kependekan dari Hypertext Preprocessor adalah salah satu bahasa pemrograman open
source yang sangat cocok atau dikhususkan untuk pengembangan web dan dapat ditanamkan pada
sebuah skripsi HTML. PHP merupakan bahasa scripting server – side, dimana pemrosesan datanya
dilakukan pada sisi server.

Sederhananya, serverlah yang akan menerjemahkan skrip program, baru kemudian hasilnya akan
dikirim kepada client yang melakukan permintaan.

Berikut contoh penulisan koding php:

<?php

echo "……";

echo " ";

echo " <br />";

echo " <br />";

?>

3. Cascading Style Sheet (CSS)

Menurut Henderson dalam Pahlevi et al. (2018), mengemukakan bahwa “CSS kepanjangan dari
Cascading Style Sheet adalah bahasa-bahasa yang merepresentasikan halaman web seperti warna,
layout, dan font”.

Dengan menggunakan CSS, seorang web developer dapat membuat halaman web yang dapat
beradaptasi dengan berbagai macam ukuran layar. Pembuatan CSS biasanya terpisah dengan
halaman HTML. Meskipun CSS dapat disisipkan di dalam halaman HTML. Hal ini ditujukan untuk
memudahkan pengaturan halaman HTML yang memiliki rancangan yang sama.

Berikut contoh penulisan koding php:

<html>

<head>

<title> </title>

<style type=”text/CSS”>

P {font-family: verdana;}
</style>

</head.

<body>

<p> </p>

</body>

</html>

4. Javascript

Menurut Kustiyahningsih dan Anamisa dalam Lavarino & Yustanti (2016), menyimpulkan bahwa
“JavaScript adalah bahasa yang berbentuk kumpulan skrip berjalan pada suatu dokumen HTML.
Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap
HTML”.

Javascript adalah bahasa pemrograman web yang digunakan untuk membuat efek pada halaman
web sehingga menjadi menarik dan interaktif. Javascript merupakan bahasa pemrograman client
side atau bahasa yang pemrosesannya dilakukan oleh client.

Berikut ini cara penulisan skrip javascript:

<script type=”text/javascript”>

……..source code……..

</script>

5. JQuery

Menurut Syarif et al., (2016) menyimpulkan bahwa:

JQuery merupakan sebuah Javascript Library atau bisa disebut juga sebagai perpustakaan dari
kumpulan kode / listing Javascript yang siap pakai.

Dalam arti sederhana, JQuery dapat digunakan untuk meringkas sebuah listing Javascript yang
panjang dalam sebuah proyek pembuatan website, sehingga sebagai Developer Web, akan diberikan
kemudahan dalam menghadapi bagian yang mengandung Javascript. JQuery merupakan program
yang berjalan pada sisi server dan akan ditampilkan pada Browser Web. JQuery dapat berjalan
didalam HTML, atau bahasa pemrograman berbasis web lainnya.

Berikut ini cara penulisan skrip jquery:

<!DOCTYPE html>

<html>

<head>

<title> </title>

<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="jquery.js"></script>

</head>

<body>

………….

</body>

</html>

3.14 Basis Data

Menurut Sutabri dalam Handayani & Wijianto (2018), mengemukakan bahwa “Basis data (database)
merupakan kumpulan data yang saling berkaitan dan berhubungan satu dengan yang lainnya,
tersimpan di perangkat keras komputer dan perangkat lunak digunakan untuk memanipulasinya”.

Sedangkan menurut Gat (2015), “Basis data didefinisikan sebagai kumpulan data yang terintegrasi
dan diatur sedemikian rupa sehingga data tersebut dapat dimanipulasi, diambil, dan dicari secara
cepat”.

Basis data merupakan himpunan kelompok data yang saling terhubung dan tersimpan dalam media
penyimpanan elektronik yang diorganisasi sedemikian rupa supaya dapat dimanfaatkan kembali
dengan mudah dan cepat. Beberapa basis data yang digunakan untuk pembuatan website,
diantaranya :

1. My Structured Query Language (MySQL)

Menurut Kustiyahningsih dalam Firman et al. (2016) mengemukan bahwa “MySQL adalah sebuah
basis data yang mengandung satu atau sejumlah tabel. Tabel terdiri atas sejumlah baris dan setiap
baris mengandung satu atau sejumlah tabel”.

MySQL merupakan sebuah implementasi dari sistem manajemen basis data relasional (RDBMS) yang
didistribusikan secara gratis dibawah lisensi General Public License (GPL)

2. PhpMyAdmin

Menurut Barri et al. (2015), menyimpulkan bahwa :

PhpMyadmin adalah perangkat lunak bebas yang ditulis dalam bahasa pemrograman PHP yang
digunakan untuk menangani administrasi MySQL melalui Jejaring Jagat Jembar (World Wide Web),
PhpMyAdmin mendukung berbagai operasi MySQL, diantaranya (mengelola basis data, tabel-tabel,
bidang (fields), relasi (relations), indeks, pengguna (users), perijinan (permissions), dan lain-lain.

Sedangkan menurut Rahman dalam Nisa & Supriyanta (2015), “PhpMyAdmin adalah sebuah
software berbasis pemrograman PHP yang dipergunakan sebagai administrator MySQL melalui
browser (web) yang digunakan untuk management database“.

Sumber : PHPMyAdmin

Gambar II.7. Tampilan PhpMyAdmin

3.15 Aplikasi Perangkat Lunak

1. XAMPP

Menurut Palit et al. (2015), “XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem
operasi, merupakan kompilasi dari beberapa program”.

Fungsi XAMPP adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program
Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa
pemrograman PHP dan Perl”. Nama XAMPP merupakan singkatan dari X (empat sistem operasi
apapun), Apache, MySQL, PHP dan Perl.

Sumber : XAMPP Control Panel v3.2.1

Gambar II.8. Tampilan XAMPP v3.2.1 Kelebihan menggunakan XAMPP diantaranya :

a. Mendukung teknologi web populer seperti PHP, MySQL dan Perl.

b. XAMPP dilengkapi fitur manajemen database PhpMyAdmin seperti pada server hosting
sesungguhnya, sehingga lebih mudah untuk mengembangkan aplikasi web berbasis database.

c. XAMPP berjalan pada background sehingga tidak akan mengganggu aktivitas pengguna.

2. Notepad ++

Menurut MADCOMS dalam Ayu & Permatasari (2018), mengemukakan bahwa “Notepad++ adalah
sebuah text editor yang sangat berguna dalam membuat program. Notepad++ menggunakan
komponen Scintilla untuk menampilkan teks dan berkas kode sumber berbagai bahasa
pemrograman yang berjalan didalam sistem operasi Micorosoft Windows”.

Sumber : Notepad++

Gambar II.9. Tampilan Notepad ++ Kelebihan menggunakan Notepad++ diantaranya :

a. Notepad++ memiliki fitur auto complete pada pada kata-kata.

b. File yang belum disimpan tidak langsung hilang saat aplikasi ditutup.

c. Mempunya banyak tools didalamnya, sehingga memudahkan penggunaannya.

3.16 Model Pengembangan Perangkat Lunak

Model pengembangan perangkat lunak atau biasa dikenal dengan Software Development Life Cycle
(SDLC) atau sering disebut juga System Development Life Cycle yang digunakan untuk
mengembangkan atau mengubah suatu sistem perangkat lunak dengan menggunakan model-model
dan metodologi yang dipergunakan orang untuk mengembangkan sistem-sistem perangkat lunak
sebelumnya. Metode pengembangan perangkat lunak memiliki beberapa model, model yang
digunakan yaitu model waterfall (air terjun).

Menurut Rosa dan Shalahuddin dalam Larasati & Masripah (2017), “Model SDLC air terjun (waterfall)
sering juga disebut model sekuensial linier (sequential linear) atau alur hidup klasik (classic life
cycle). Model air terjun menyediakan

pendekatan alur hidup perangkat lunak secara sekuensial atau terurut dimulai dari analisis, desain,
pengodean, pengujian, dan tahap pendukung (support)”.

Langkah-langkah yang penting dalam model ini adalah sebagai berikut:

1. Analisis Kebutuhan Perangkat Lunak

Proses pengumpulan kebutuhan dilakukan secara intensif untuk mespesifikasikan kebutuhan

perangkat lunak agar dapat dipahami perangkat lunak seperti apa yang dibutuhkan oleh user.
Spesifikasi kebutuhan perangkat lunak pada tahap ini perlu untuk didokumentasikan.

2. Desain

Desain perangkat lunak adalah proses multi langkah yang fokus pada desain pembuatan program
perangkat lunak termasuk struktur data, arsitektur perangkat lunak, representasi antarmuka, dan
prosedur pengodean. Tahap ini mentranslasi kebutuhan perangkat lunak dari tahap analisis
kebutuhan ke representasi desain agar dapat diimplementasikan menjadi program pada tahap
selanjutnya. Desain perangkat lunak yang dihasilkan pada tahap ini juga perlu didokumentasikan.

3. Pembuatan Kode Program

Desain harus ditranslasikan ke dalam program perangkat lunak. Hasil dari tahap ini adalah program
komputer sesuai dengan desain yang telah dibuat pada tahap desain.
4. Pengujian

Pengujian fokus pada perangkat lunak secara dari segi lojik dan fungsional dan memastikan bahwa
semua bagian sudah diuji. Hal ini dilakukan untuk meminimalisir kesalahan (error) dan memastikan
keluaran yang dihasilkan sesuai dengan yang diinginkan.

5. Pendukung (Support) atau Pemeliharaan (Maintenance)

Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan ketika sudah
dikirimkan ke user. Perubahan bisa terjadi karena adanya kesalahan yang muncul dan tidak
terdeteksi saat pengujian atau perangkat lunak harus beradaptasi dengan lingkungan baru. Tahap
pendukung atau pemeliharaan dapat mengulangi proses pengembangan mulai dari analisis
spesifikasi untuk perubahan perangkat lunak yang sudah ada, tapi tidak untuk membuat perangkat
lunak baru.

3.17 Framework

Menurut Betha Sidik dalam Destiningrum & Jafar (2015), mengemukakan bahwa “Framework adalah
kumpulan intruksi-intruksi yang dikumpulkan dalam class dan function-function dengan fungsi
masing-masing untuk memudahkan developer dalam memanggilnya tanpa harus menuliskan syntax
program yang sama berulang-ulang serta dapat menghemat waktu”,

Beberapa framework yang digunakan dalam perancangan website antara lain :

1. Bootstrap

Menurut Sengkey et al. (2015), mengemukakan bahwa “Bootstrap merupakan Framework ataupun
Tools untuk membuat aplikasi web ataupun situs web responsive secara cepat, mudah dan gratis”.

Bootstrap terdiri dari CSS dan HTML untuk menghasilkan Grid, Layout, Typography, Table, Form,
Navigation, dan lain-lain. Di dalam bootstrap juga sudah terdapat jQuery plugins untuk menghasilkan
komponen User Interface (UI) yang cantik seperti Transitions, Modal, Dropdown, Scrollspy, Tooltip,
Tap, Popover, Alert, Button, Carousel dan lain-lain.

2. CodeIgniter

Menurut Betha Sidik dalam Destiningrum & Jafar (2015), “CodeIgniter adalah sebuah framework php
yang bersifat open source dan menggunakan metode MVC (Model, View, Controller) untuk
memudahkan developer atau programmer dalam membangun sebuah aplikasi berbasis web tanpa
harus membuatnya dari awal”.
a. Model

Bagian ini digunakan untuk mengolah basis data. Pengolahan basis data berupa pengambilan data,
menambah data, menghapus, dan memperbaharui data dilakukan di sini. Dan bagian ini
mengerjakan semua instruksi yang berhubungan dengan basis data. Model diturunkan dari class
CI_Model, yang terdapat di pustaka codeigniter.

b. Views

View adalah bagian yang menampilkan data yang telah diolah di dalam controller dan kemudian
data berupa array atau object akan di terima oleh view. Tampilan memang dipisahkan dari basis data
dan kontrol halaman hal ini berfungsi agar pengembang lebih mudah dalam membuat tampilan.

c. Controller

Daur hidup aplikasi website menggunakan CI hanya berputar antara model, view dan controller
maka, controller menjadi penghubung antara model dan view. Controller tidak langsung terhubung
dengan view dan model melainkan user harus menghubungkan secara manual melalu perintah $this-
>load-> yang menjadi perintah penghubung antara model, view, dan controller.

3.18 Teori Pendukung

Teori pendukung berisikan tentang alat-alat yang digunakan dalam penulisan laporan Tugas Akhir.
Alat-alat yang digunakan berfungsi sebagai dokumentasi dan pemodelan sistem menggunakan
Struktur Navigasi, Entity Relationship Diagram (ERD), Logical Record Structure (LRS)

3.19 Struktur Navigasi

Menurut Ardiansyah dalam Imaniawan & Wati (2017), “Struktur Navigasi dapat diartikan sebagai
alur dari suatu program yang menggambarkan rancangan hubungan antara area yang berbeda
sehingga memudahkan proses pengorganisasian seluruh elemen-elemen website“.

Jenis struktur navigasi menurut Binanto dalam Achyani & Arviana (2017), adalah :

1. Linear Navigation Model

Digunakan oleh sebagian besar website. Informasi diberikan secara sekuensial dimulai dari satu
halaman. Beberapa desainer web menggunakan satu halaman untuk masuk atau keluar dari dari
website. Pengguna akan melakukan navigasi secara berurutan dari frame atau byte informasi yang
satu ke yang lainnya.
.

Sumber : Achyani & Arviana (2017)

Gambar II.10. Struktur Navigasi Linear

2. Hierarki model

Diadaptasi dari top-down design. Konsep navigasi ini dimulai dari satu node yang menjadi
homepage. Dari homepage dapat dibuat beberapa cabang ke halaman-halaman utama. Apabila
diperlukan, dari tiap halaman utama dapat dikembangkan menjadi beberapa cabang lagi. Hal ini
seperti struktur organisasi dalam perusahaan.

Sumber : Achyani & Arviana (2017)

Gambar II.11. Struktur Navigasi Hierarki

3. Nonlinear

Pengguna akan melakukan navigasi dengan bebas melalui isi proyek dengan tidak terkait dengan
jalur yang sudah ditentukan sebelumnya

Sumber : Achyani & Arviana (2017))

Gambar II.12. Struktur Navigasi Nonlinear

4. Komposit

Pengguna akan melakukan navigasi dengan bebas (secara non-linear), tetapi terkadang dibatasi
presentasi linear film atau informasi penting dan atau pada data yang paling terorganisasi secara
logis pada suatu hierarki.
Sumber : Achyani & Arviana (2017)

Gambar II.13. Struktur Navigasi Komposit

3.20 Entity Relationship Diagram (ERD)

Menurut Ladjamudin dalam Ramdhani et al. (2019), “Entity Relationship Diagram (ERD) adalah suatu
model jaringan yang menggunakan susunan data yang disimpan dalam sistem secara abstrak. ERD
merupakan model jaringan data yang menekankan pada struktur dan relationship data”.

Menurut Iswandy dalam Anggraini et al. (2018), “ERD adalah alat permodelan data utama dan akan
membantu mengorganisasi data dalam sebuah proyek ke dalam entitas-entitas dan menentukan
hubungan antar entitas”.

Simbol-simbol yang digunakan pada ERD adalah sebagai berikut: Tabel II.1. Simbol Entity
Relationship Diagram (ERD)

Relasi Relasi menunjunkan adanya hubungan di antara sejumlah entitas yang berbeda.

Atribut Atribut berfungsi mendeskripsikan karakter entitas (atribut yang berfungsi sebagai key).

Garis Garis sebagai penghubung antara relasi

dengan entitas, relasi dan entitas dengan atribut.

Sumber: Anggraini et al. (2018)

3.21 Logical Record Structure (LRS)

Pengertian Logical Record Structure (LRS) menurut Simarmata & Paryudi dalam Ramdhani et al.
(2019), “LRS merupakan transformasi dari penggambaran ERD dalam bentuk yang lebih jelas dan
mudah untuk dipahami”. Penggambaran LRS hampir mirip dengan penggambaran normalisasi file,
hanya saja tidak digambarkan simbol asterix (*) sebagai simbol Primary Key (kunci utama) dan
Foreign Key (kunci tamu).

Derajat Relasi Atau Kardinalitas Ratio:

1. One to one

Setiap anggota entitas A hanya boleh berhubungan dengan satu anggota entitas B, begitu pula
sebaliknya.

2. One to many

Setiap anggota entitas A dapat berhubungan dengan lebih dari satu anggota B tetapi tidak
sebaliknya.

3. Many to many

Setiap entitas A dapat berhubungan dengan banyak entitas himpunan entitas B dan demikian pula
sebaliknya.

3.22 Implementasi dan Pengujian Web

Menurut Guntur Setiawan dalam Imaniawan & Wati (2017) menyatakan bahwa “Impiementasi
menurut Guntur Setiawan adaiah periuasan aktivitas yang saling menyesuaikan proses interkasi
antara tujuan dan tindakan untuk mencapainya serta memerlukan jaringan pelaksana dan birokrasi
yang efektif”.

Pada pengujian ini, metode yang digunakan adalah metode Black Box Testing. Black Box Testing
merupakan pengujian yang digunakan untuk mengamati hasil dari eksekusi suatu program.

Menurut Rosa dan Shalahuddin (dalam Fridayanthie & Mahdiati, 2016) mengemukakan bahwa
“Black-box testing adalah perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan
kode program”. Beberapa kategori kesalahan yang diuji oleh black box testing, diantaranya:

1. Fungsi-fungsi yang salah atau hilang.

2. Kesalahan interface

3. Kesalahan dalam struktur data atau akses database eksternal

4. Kesalahan performa

5. Kesalahan inisialisasi dan terminasi.

Kasus uji yang dibuat untuk melakukan pengujian kotak hitam harus dibuat dengan kasus benar dan
kasus salah, misalkan untuk proses kasus login maka kasus uji yang dibuat adalah :

1. Jika user memasukan nama pemakai (username) dan kata sandi (password) yang benar.

2. Jika user memasukan nama pemakai (username) dan kata sandi (password) yang salah,
misalnya nama pemakai benar dan kata sandi salah, atau sebaliknya, atau keduanya.

Kelebihan blackbox testing :

1. Dapat memilih subset test secara efektif dan efisien.

2. Dapat menemukan cacat pada program

3. Dapat digunakan untuk menilai konsistensi program.

BAB III

PEMBAHASAN

3.1 Analisis Kebutuhan

Analisis kebutuhan yang akan dibahas adalah analisis kebutuhan pengguna dan analisis kebutuhan
sistem yang saling berinteraksi dalam lingkungan sistem, yaitu: kebutuhan fungsional dan kebutuhan
non fungsional. Dari kedua kebutuhan tersebut mempunyai karakteristik interaksi dengan sistem
yang berbeda-beda dan mempunyai kebutuhan informasi yang berbeda-beda antara lain:

3.2 Analisis Kebutuhan Pengguna

Analisis kebutuhan pengguna mencirikan siapa saja pengguna dari perangkat lunak yang
dispesifikasikan dan apa saja haknya terhadap perangkat lunak tersebut. Berikut kebutuhan
pengguna dari sistem informasi jasa desain grafis “creative design” berbasis website:

1. Admin

a. Admin dapat melakukan login sebagai admin.

b. Admin dapat mengelola data freelancer dan perusahaan.

c. Admin dapat memverivikasi data projek.

d. Admin dapat mengelola data projek.

e. Admin dapat mengelola data laporan pelanggaran portofolio.

f. Admin dapat mengelola data master kategori desain, data administrator, data bank, data
tentang profil website , data syarat & ketentuan dan pengaturan data website.

g. Admin dapat mengubah password admin.

h. Admin dapat mengelola data komisi.

44

i. Admin dapat melihat dan mencetak data penerimaan komisi dan hak

freelancer.

j. Admin dapat menghubungi freelancer dan perusahaan melalui plug-in whatsapp pada
website.

2. Pelanggan (Perusahaan)
a. Perusahaan atau pelanggan dapat melakukan login sebagai perusahaan atau pelanggan.

b. Perusahaan atau pelanggan dapat melengkapi dan mengedit data diri atau

profile.

c. Perusahaan atau pelanggan dapat mengubah password.

d. Perusahaan atau pelanggan dapat membuat iklan projek pembuatan desain grafis yang
diinginkan dengan memilih kategori yang ada dan mengisi deskripsi desain yang diinginkan.

e. Perusahaan atau pelanggan dapat mengedit iklan pembuatan desain grafis sebelum
dipublikasikan dalam bentuk sebelumnya yaitu draft.

f. Perusahaan atau pelanggan dapat mempublikasikan iklan pembuatan desain grafis tersebut
dengan status publish.

g. Perusahaan atau pelanggan dapat memilih freelancer yang sebelumnya freelancer telah
mengajukan jasa pembuatan desain grafis dengan maksimal memilih 1 freelancer dari maksimal 10
freelancer berdasarkan pertimbangan dari portofolio freelancer apakah berkompeten atau tidak.

h. Perusahaan atau pelanggan dapat melihat portofolio freelancer dan melaporkan portofolio
jika terdapat unsur plagiatisme .

i. Perusahaan atau pelanggan dapat melihat preview desain grafis yang di-

upload oleh freelancer.

j. Perusahaan atau pelanggan dapat men-download file desain grafis yang di-upload oleh
freelancer.

k. Perusahaan atau pelanggan dapat mengajukan revisi desain grafis maksimal 3 kali jika desain
grafis tidak sesuai dengan yang diinginkan.

l. Perusahaan atau pelanggan dapat menghubungi admin dan freelancer melalui plug-in
whatsapp pada website.

3. Freelancer

a. Ferelancer dapat melakukan login sebagai freelancer.

b. Freelancer dapat melengkapi data diri atau profile.

c. Freelancer dapat mengubah password.

d. Freelancer dapat membuat dan mengedit portofolio.

e. Freelancer dapat melihat iklan pembuatan desain grafis dan dapat mengajukan jasa
pembuatan desain grafis.

f. Freelancer dapat mengupload preview desain grafis yang dikerjakan.

g. Freelancer dapat mengupload file desain grafis yang dikerjakan.

h. Freelancer dapat melakukan revisi dan meng-upload file revisi desain grafis karena
desain grafis tidak sesuai dengan apa yang diinginkan oleh pelanggan.

i. Freelancer dapat menghubungi admin dan freelancer melalui plug-in whatsapp pada
website.

j. Freelancer dapat melihat portofolio freelancer lain dan melaporkan portofolio jika terdapat
unsur plagiatisme .

4. Tamu (Guest)

a. Tamu (Guest) dapat melihat halaman utama website.

b. Tamu (Guest) dapat melihat iklan projek pembuatan desain grafis.

c. Tamu (Guest) dapat melihat portofolio freelancer.

3.3 Analisa Kebutuhan Sistem

Website sistem informasi jasa desain grafis “creative design” berbasis website

memiliki kebutuhan sistem sebagai berikut :

1. Data

Data merupakan sebuah file yang digunakan untuk mempermudah dalam pembuatan website. Data-
data yang dibutuhkan untuk dapat diolah adalah :

a. Data Admin

Data admin berisi data admin termasuk untuk login admin.

b. Data Bank

Data bank berisi data bank admin untuk pembayaran dari perusahaan untuk freelancer.

c. Data Bidding

Data bidding berisi data proses bidding.

d. Data Freelancer

Data freelancer berisi data profil freelancer dan termasuk untuk login freelancer.

e. Data Kategori

Data kategori berisi data kategori desain grafis.

f. Data Perusahaan

Data perusahaan berisi data profil perusahaan dan termasuk untuk login

perusahaan.

g. Data Portofolio
Data portofolio berisi data portofolio freelancer tentang projek yang telah dikerjakan.

h. Data Portolapor

Data portolapor berisi data portofolio freelancer yang telah dilaporkan.

i. Data Projek

Data projek berisi data projek.

j. Data Projekwrk

Data projekwrk berisi data hasil desain dan revisi desain oleh freelancer.

k. Data Syarat

Data syarat berisi data syarat dan ketentuan website.

l. Data Tentang

Data tentang berisi data tentang website.

m. Data Website

Data website berisi data tentang profil website.

2. Hak Akses

Sistem informasi dibuat agar dapat diakses oleh beberapa tingkatan pengguna. Masing-masing
pengguna akan memperoleh menu yang terbatas sesuai dengan hak aksesnya. Hak akses tersebut
diantaranya:

a. Admin
Admin memiliki hak untuk mengelola data master yaitu kategori desain, data administrator, data
bank, data tentang profil website , data syarat & ketentuan dan pengaturan data website. Selain itu
admin juga memiliki hak akses untuk mengelola data freelancer, perusahaan, projek, penerimaan
komisi dan hak freelancer dan laporan penerimaan komisi.

b. Freelancer

Freelancer memiliki hak akses untuk mengajukan jasa pada iklan pembuatan jasa desain grafis yang
dibuat oleh perusahaan, membuat atau mengedit portofolio. Selain itu freelancer juga memiliki hak
akses untuk juga meng-upload preview desain grafis dan file desain grafis, upload file revisi desain
dan menghubungi admin dan perusahaan dengan plug-in whastaapp pada website .

c. Perusahaan

Perusahaan memiliki hak akses untuk membuat, mengedit, menambah, dan menghapus iklan
pembuatan desain grafis. Selain itu perusahaan juga memiliki hak akses untuk mendownload file
desain grafis, mengajukan revisi desain grafis, melaporkan portofolio freelancer kepada admin dan
dapat menghubungi admin dan freelancer melalui plug-in whatsapp pada website.

d. Tamu (Guest)

Tamu (Guest) memiliki hak akses hanya melihat halaman utama website, melihat iklan pembuatan
desain grafis, dan melihat portofolio freelancer.

3. Keamanan

Sistem keamanan dalam website sistem informasi ini bertujuan agar terhindar dari pihak-pihak yang
tidak bertanggungjawab, sistem keamanan yang dimaksud yaitu :

a. Login menggunakan email dan password.

b. Enkripsi MD5 (encryption) merupakan sebuah proses yang melakukan perubahan sebuah
kode dari yang bisa dimengerti menjadi sebuah kode yang tidak bisa dimengerti.

4. Kebutuhan Perangkat Keras (Hardware)

Spesifikasi komponen perangkat keras yang digunakan untuk pembuatan sistem informasi (website)
ini adalah sebagai berikut:

Procesor : Procesor Intel Core-I3

RAM : RAM 2 GB
Harddisk : Harddisk 500 GB

Mouse : Optical Mouse

Keyboard : Standart Keyboard

Monitor : Monitor dengan resolusi layar minimum 14 inch

Koneksi : Koneksi internet dengan kecepatan minimal 10 Mbps

5. Kebutuhan Perangkat Lunak (Software)

Perangkat lunak yang dibutuhkan pada pembangunan sistem informasi

(website) adalah sebagai berikut:

Sistem Operasi : Windows 10 Home Aplikasi Pendukung: XAMPP, Notepad++ Web Server :
Apache

Web Browser : Google Chrome

Bahasa Pemorgraman : PHP, HTML, CSS, Javascript, JQuery

Basis Data : MySQL

Framework : Bootstrap, CodeIgnitier

6. Pengguna (Brainware)

Seseorang yang terlibat dalam kegiatan pemanfaatan sistem pengolahan data serta mengoperasikan
dan mengatur sistem dalam sebuah komputer sering disebut dengan brainware. Hal ini dikarenakan
brainware menjadi bagian penting dari sebuah sistem komputer. Software dan hardware tidak akan
berfungsi jika tidak adanya brainware.
Berikut brainware yang berperan dalam pengembangan web ini antara lain :

a. Admin

b. Freelancer

c. Perusahaan

d. Tamu (Guest)

3.4 Rancangan Dokumen Antar Muka

Rancangan antar muka bertujuan untuk merancang user interface yang efektif pada sistem
perancangan perangkat lunak agar siap digunakan dan hasil seseuai dengan kebutuhan. Antar muka
harus memenuhi tiga persyaratan, diantaranya sebuah antarmuka harus sederhana, antarmuka
harus memiliki kinerja yang cepat, dan sebuah antarmuka harus lengkap. Berikut adalah rancangan
antar muka dari website Sistem Informasi Jasa Desain Grafis “Creative Design” Berbasis Website:

1. Halaman Home

Halaman home merupakan halaman yang pertama kali terbuka oleh pengunjung ketika mengakses
webiste. Halaman ini berisi beberapa menu. Rancangan halaman home atau beranda sebagai
berikut:

Gambar III.1. Rancangan Halaman Home

2. Halaman Projek

Halaman projek desain berisikan daftar projek desain. Halaman ini digunakan untuk
menginformasikan projek desain grafis yang tersedia. Rancangan halaman projek desain grafis
sebagai berikut:
Gambar III.2. Rancangan Halaman Projek

3. Halaman Tentang Kami

Halaman tentang kami berisikan informasi tentang website. Halaman ini digunakan untuk
menginformasikan profil website kepada para pengunjung. Rancangan halaman tentang kami
sebagai berikut:

Gambar III.3. Rancangan Halaman Tentang Kami

4. Halaman Syarat & Ketentuan

Halaman syarat & ketentuan berisikan informasi syarat dan ketentuan pengguna

website. Rancangan halaman syarat & ketentuan sebagai berikut:

Gambar III.4. Rancangan Halaman Syarat & Ketentuan

3.5 Rancangan Dokumen Antar Muka Halaman Admin

1. Halaman Login Admin

Halaman login admin merupakan halaman dimana admin memasukan username dan password-nya
agar dapat mengakses menu utamanya. Rancangan halaman login admin adalah sebagai berikut :

Gambar III.5. Rancangan Halaman Login Admin

2. Halaman Home Admin

Halaman home admin merupakan halaman yang pertama kali terbuka setelah admin berhasil
melakukan login pada halaman login. Halaman ini berisi beranda dan beberapa menu khusus admin.
Rancangan halaman home admin sebagai berikut:

Gambar III.6. Rancangan Halaman Home Admin

3. Halaman Freelancer

Halaman freelancer berisikan data freelancer yang sudah terdaftar. Halaman ini digunakan untuk
mengelola data freelancer. Rancangan halaman freelancer sebagai berikut:

Gambar III.7. Rancangan Halaman Freelancer

a. Halaman Edit Data Freelancer

Halaman edit data freelancer berisikan data freelancer yang mau di ubah atau edit. Halaman ini
digunakan untuk mengubah data freelancer. Rancangan halaman edit data freelancer sebagai
berikut:

Gambar III.8. Rancangan Halaman Edit Data Freelancer

4. Halaman Laporan Portofolio

Halaman laporan portofolio berisikan data laporan pelanggaran portofolio freelancer yang diduga
melakukan pelanggaran portofolio yang dilaporkan oleh perusahaan atau freelancer lain. Halaman
ini digunakan untuk mengelola laporan pelanggaran portofolio. Rancangan halaman laporan
pelanggaran portofolio sebagai berikut:
Gambar III.9. Rancangan Halaman Laporan Portofolio

a. Halaman Detail Pelanggaran Portofolio

Halaman detail pelanggaran portofolio berisikan data detail pelanggaran portofolio. Halaman ini
digunakan untuk melihat detail pelanggaran portofolio dan mengubah status terlapor dan merespon
laporan pelanggaran. Rancangan halaman laporan pelanggaran portofolio sebagai berikut:

Gambar III.10. Rancangan Halaman Detail Pelanggaran Portofolio

5. Halaman Perusahaan

Halaman perusahaan berisikan data daftar perusahaan yang sudah terdaftar. Halaman ini digunakan
untuk mengelola data perusahaan. Rancangan halaman data perusahaan sebagai berikut:

Gambar III.11. Rancangan Halaman Perusahaan

a. Halaman Edit Data Perusahaan

Halaman edit data perusahaan berisikan data perusahaan yang mau di ubah atau edit. Halaman ini
digunakan untuk mengubah data perusahaan. Rancangan halaman edit data perusahaan sebagai
berikut:

Gambar III.12. Rancangan Halaman Edit Data Perusahaan

6. Halaman Projek Admin

Halaman projek desain berisikan data daftar projek desain yang sedang berjalan sampai yang sudah
selesai. Halaman ini digunakan untuk mengelola data projek desain. Rancangan halaman projek
desain sebagai berikut:

Gambar III.13. Rancangan Halaman Projek Admin

7. Halaman Detail Projek Admin

a. Status Belum diverifikasi Pembayaran

Halaman detail projek berisikan data detail projek admin dengan status belum diverifikasi
pembayaran. Halaman ini digunakan untuk memverifikasi pembayaran dari perusahaan. Rancangan
halaman detail projek admin (status belum diverifikasi pembayaran) sebagai berikut:

Gambar III.14. Rancangan Halaman Detail Projek Admin (Status Belum diverifikasi Pembayaran)

b. Status Dikerjakan

Halaman detail projek berisikan data detail projek admin dengan status dikerjakan. Halaman ini
digunakan untuk memverifikasi hasil desain yang telah di-upload oleh freelancer dan melihat apakah
hasil desain yang dikirimkan sudah di-download oleh perusahaan. Rancangan halaman detail projek
admin (status dikerjakan) sebagai berikut:

Gambar III.15. Rancangan Halaman Detail Projek Admin (Status Dikerjakan)

c. Status Dikerjakan Revisi

Halaman detail projek berisikan data detail projek admin dengan status dikerjakan namun revisi.
Halaman ini digunakan untuk memverifikasi hasil desain revisi yang telah di-upload oleh freelancer
dan melihat apakah hasil desain revisi yang dikirimkan sudah didownload oleh perusahaan.
Rancangan halaman detail projek admin (status dikerjakan revisi) sebagai berikut:

Gambar III.16. Rancangan Halaman Detail Projek Admin (Status Dikerjakan Revisi)

d. Status Selesai

Halaman detail projek berisikan data detail projek admin dengan status selesai. Halaman ini
digunakan untuk melihat tanggapan dan peniliaian perusahaan terhadap freelancer yang telah
menyelesaikan projek desain grafis. Implementasi halaman detail projek admin (status revisi)
sebagai berikut:

Gambar III.17. Rancangan Halaman Detail Projek Admin (Status Selesai)

8. Halaman Komisi

Halaman penkomisi berisikan data penerimaan komisi dan pembayaran hak freelancer atas projek
yang sudah diselesaikan. Halaman ini digunakan untuk melihat dan mengkonfirmasi pembayaran hak
freelancer. Rancangan halaman penerimaan komisi dan pembayaran hak freelancer sebagai berikut:

Gambar III.18. Rancangan Halaman Penerimaan Komisi dan Hak Freelancer

9. Halaman Laporan Penerimaan Komisi

Halaman laporan penerimaan komisi berisikan pencarian laporan penerimaan komisi. Halaman ini
digunakan untuk mencari data laporan komisi dan mencetaknya. Rancangan halaman laporan
penerimaan komisi sebagai berikut:

Gambar III.19. Rancangan Halaman Laporan Penerimaan Komisi

10. Halaman Master Kategori Desain

Halaman master kategori desain berisikan data utama kategori desain. Halaman ini digunakan untuk
mengelola data kategori desain. Rancangan halaman master kategori desain sebagai berikut:

Gambar III.20. Rancangan Halaman Master Kategori Desain

a. Halaman Tambah Kategori

Halaman tambah kategori berisikan halaman untuk menambahkan data kategori desain. Rancangan
halaman tambah kategori sebagai berikut:

Gambar III.21. Rancangan Halaman Tambah Kategori

b. Halaman Edit Kategori

Halaman edit kategori berisikan halaman untuk mengubah data kategori desain. Rancangan halaman
edit kategori sebagai berikut:
Gambar III.22. Rancangan Halaman Edit Kategori

11. Halaman Master Administrator

Halaman master administrator berisikan data utama administrator. Halaman ini digunakan untuk
mengelola data administrator. Rancangan halaman master administrator sebagai berikut:

Gambar III.23. Rancangan Halaman Master Administrator

a. Halaman Tambah Administrator

Halaman administrator berisikan halaman untuk menambahkan data

administrator. Rancangan halaman tambah administrator sebagai berikut:

Gambar III.24. Rancangan Halaman Tambah Administrator

b. Halaman Edit Administrator

Halaman edit administrator berisikan halaman untuk mengubah data

administrator. Rancangan halaman edit administrator sebagai berikut:

Gambar III.25. Rancangan Halaman Edit Administrator

12. Halaman Master Bank

Halaman master bank berisikan data utama bank. Halaman ini digunakan untuk mengelola data
bank. Rancangan halaman master bank sebagai berikut:

Gambar III.26. Rancangan Halaman Master Bank

a. Halaman Tambah Bank

Halaman tambah bank berisikan halaman untuk menambahkan data bank. Rancangan halaman
tambah bank sebagai berikut:

Gambar III.27. Rancangan Halaman Tambah Bank

b. Halaman Edit Bank

Halaman edit bank berisikan halaman untuk mengubah data bank. Rancangan halaman edit bank
sebagai berikut:

Gambar III.28. Rancangan Halaman Edit Bank

13. Halaman Master Tentang Kami

Halaman master tentang kami berisikan data tentang kami yakni profil website. Halaman ini
digunakan untuk mengelola data tentang kami. Rancangan halaman master tentang kami sebagai
berikut:

Gambar III.29. Rancangan Halaman Master Tentang Kami

14. Halaman Master Syarat & Ketentuan

Halaman master syarat & ketentuan berisikan data syarat dan ketentuan pada website. Halaman ini
digunakan untuk mengelola data syarat dan ketentuan. Rancangan halaman master syarat &
ketentuan sebagai berikut:

Gambar III.30. Rancangan Halaman Master Syarat & Ketentuan

a. Halaman Tambah Syarat & Ketentuan

Halaman tambah syarat & ketentuan berisikan halaman untuk menambahkan data syarat &
ketentuan. Rancangan halaman tambah syarat & ketentuan sebagai berikut:

Gambar III.31. Rancangan Halaman Tambah Syarat & Ketentuan

b. Halaman Edit Syarat & Ketentuan

Halaman edit syarat & ketentuan berisikan halaman untuk mengubah data syarat & ketentuan.
Rancangan halaman edit syarat & ketentuan sebagai berikut:

Gambar III.32. Rancangan Halaman Edit Syarat & Ketentuan

15. Halaman Master Pengaturan

Halaman master pengaturan berisikan data pengaturan data website. Halaman ini digunakan untuk
mengelola data pengaturan data website Rancangan halaman master pengaturan sebagai berikut:

Gambar III.33. Rancangan Halaman Master Pengaturan

16. Halaman Ubah Password

Halaman ubah password berisikan data ubah password admin. Halaman ini digunakan untuk
mengubah password admin. Rancangan halaman ubah password sebagai berikut:

Gambar III.34. Rancangan Halaman Ubah Password

3.6 Rancangan Dokumen Antar Muka Halaman Perusahaan

1. Halaman Daftar Perusahaan

Halaman daftar perusahaan berisikan data yang harus di isi untuk syarat pendafataran perusahaan
dan untuk mendapatkan hak akses sistem. Halaman ini digunakan meng-input data pendaftaran
perusahaan. Rancangan halaman daftar perusahaan sebagai berikut:

Gambar III.35. Rancangan Halaman Daftar Perusahaan

2. Halaman Login Perusahaan

Halaman login perusahaan merupakan halaman dimana user memasukan email dan password-nya
agar dapat mengakses menu utamanya. Rancangan halaman login perusahaan adalah sebagai
berikut :

Gambar III.36. Rancangan Halaman Login Perusahaan

3. Halaman Home Perusahaan

Halaman home perusahaan merupakan halaman yang pertama kali terbuka setelah perusahaan
berhasil melakukan login pada halaman login. Halaman ini berisi beberapa menu khusus perusahaan.
Rancangan halaman beranda perusahaan sebagai berikut:

Gambar III.37. Rancangan Halaman Home Perusahaan

4. Halaman Akun Perusahaan

Halaman akun perusahaan berisikan data akun perusahaan. Halaman ini digunakan untuk melihat
atau mengubah data akun perusahaan. Rancangan halaman akun perusahaan sebagai berikut:

Gambar III.38. Rancangan Halaman Akun Perusahaan

5. Halaman Projek Perusahaan

Halaman projek perusahaan berisikan data projek yang dibuat perusahaan. Halaman ini digunakan
untuk mengolah data projek yang dibuat perusahaan. Rancangan halaman projek perusahaan
sebagai berikut:

Gambar III.39. Rancangan Halaman Projek Perusahaan

a. Halaman Projek Baru

Halaman projek baru berisikan data yang dimasukan untuk iklan pembuatan desain grafis. Halaman
ini digunakan untuk membuat projek pembuatan desain grafis. Rancangan halaman projek baru
sebagai berikut:

Gambar III.40. Rancangan Halaman Projek Baru

b. Halaman Edit Projek

Halaman edit projek berisikan data yang akan diubah untuk iklan pembuatan desain grafis. Halaman
ini digunakan mengubah projek pembuatan desain grafis. Rancangan halaman edit projek sebagai
berikut:
Gambar III.41. Rancangan Halaman Edit Projek

6. Halaman Detail Projek Perusahaan

a. Status Sudah Ada Penawaran

Halaman detail projek perusahaan berisikan data detail projek perusahaan dengan status sudah ada
penawaran. Halaman ini digunakan untuk melihat dan memilih freelancer yang telah mengajukan
penawaran. Rancangan halaman detail projek perusahaan (status sudah ada penawaran) sebagai
berikut:

Gambar III.42. Rancangan Halaman Detail Projek Perusahaan (Status Sudah Ada Penawaran)

b. Status Menunggu Pembayaran

Halaman detail projek perusahaan berisikan data detail projek perusahaan dengan status menunggu
pembayaran. Halaman ini digunakan untuk melihat dan konfirmasi pembayaran projek desain grafis.
Rancangan halaman detail projek perusahaan (status menunggu pembayaran) sebagai berikut:

Gambar III.43. Rancangan Halaman Detail Projek Perusahaan (Status Menunggu Pembayaran)

c. Status Belum diverifivikasi Pembayaran

Halaman detail projek perusahaan berisikan data detail projek perusahaan dengan status belum
diverifikasi pembayaran. Halaman ini digunakan untuk melihat status pembayaran projek desain
grafis. Rancangan halaman detail projek perusahaan (status belum diverifikasi pembayaran) sebagai
berikut:

Gambar III.44. Rancangan Halaman Detail Projek Perusahaan (Status Belum diverifikasi Pembayaran)

d. Status dikerjakan

Halaman detail projek perusahaan berisikan data detail projek perusahaan dengan status dikerjakan.
Halaman ini digunakan untuk melihat dan men- download projek yang telah di-upload oleh
freelancer serta untuk mengkonfrmasi bahwa projek telah sesuai keinginan (deal) dengan
memberikan tanggapan dan rating kepada freelancer. Rancangan halaman detail projek perusahaan
(status dikerjakan) sebagai berikut:

Gambar III.45. Rancangan Halaman Detail Projek Perusahaan (Status dikerjakan)

e. Status dikerjakan Mengajukan Revisi

Halaman detail projek perusahaan berisikan data detail projek perusahaan dengan status dikerjakan
mengajukan revisi. Halaman ini digunakan untuk mengajukan revisi dan men-download projek revisi
yang telah di- upload oleh freelancer serta untuk mengkonfrmasi bahwa projek telah sesuai
keinginan (deal) dengan memberikan tanggapan dan rating kepada

freelancer. Rancangan halaman detail projek perusahaan (status dikerjakan

mengajukan revisi) sebagai berikut:

Gambar III.46. Rancangan Halaman Detail Projek Perusahaan (Status dikerjakan Mengajukan Revisi)

f. Status Selesai

Halaman detail projek perusahaan berisikan data detail projek perusahaan dengan status selesai.
Halaman ini digunakan untuk melihat data hasil
akhir projek desain. Implementasi halaman detail projek perusahaan (status selesai) sebagai berikut:

Gambar III.47. Rancangan Halaman Detail Projek Perusahaan (Status Selesai)

7. Halaman Melihat Profil Freelancer

Halaman melihat profil freelancer berisikan data freelancer yang telah mengajukan jasa desain
grafis. Halaman ini digunakan untuk melihat dan sebagai baham pertimbangan untuk memilih
freelancer yang berkompeten kiranya. Rancangan halaman melihat profil freelancer sebagai berikut:

Gambar III.48. Rancangan Halaman Melihat Profil Freelancer

8. Halaman Lupa Password Perusahaan

Halaman lupa password berisikan halaman yang digunakan untuk mengetahui kembali password
perusahaan yang tidak ingat. Rancangan halaman lupa password perusahaan sebagai berikut:

Gambar III.49. Rancangan Halaman Lupa Password Perusahaan

3.7 Rancangan Dokumen Antar Muka Halaman Freelancer

1. Halaman Daftar Freelancer

Halaman daftar freelancer berisikan data yang harus di isi untuk syarat pendafataran freelancer dan
untuk mendapatkan hak akses sistem. Halaman ini digunakan meng-input data pendaftaran
freelancer. Rancangan halaman daftar freelancer sebagai berikut:
Gambar III.50. Rancangan Halaman Daftar Freelancer

2. Halaman Login Freelancer

Halaman login freelancer merupakan halaman dimana user memasukan email dan password-nya
agar dapat mengakses menu utamanya. Rancangan halaman login freelancer adalah sebagai
berikut :

Gambar III.51. Rancangan Halaman Login Freelancer

3. Halaman Home Freelancer

Halaman home freelancer merupakan halaman yang pertama kali terbuka setelah freelancer
berhasil melakukan login pada halaman login. Halaman ini berisi beberapa menu khusus freelancer.
Rancangan halaman home freelancer sebagai berikut:

Gambar III.52. Rancangan Halaman Home Freelancer

4. Halaman Akun Freelancer

Halaman akun freelancer berisikan data akun freelancer. Halaman ini digunakan untuk mengubah
data akun freelancer. Rancangan halaman akun freelancer sebagai berikut:
Gambar III.53. Rancangan Halaman Akun Freelancer

5. Halaman Portofolio Freelancer

Halaman portofolio freelancer berisikan data portofolio freelancer yang telah dbuat. Halaman ini
digunakan untuk mengolah data portofolio freelancer. Rancangan halaman portofolio freelancer
sebagai berikut:

Gambar III.54. Rancangan Portofolio Freelancer

a. Halaman Tambah Portofolio

Halaman tambah portofolio berisikan halaman untuk menambahkan data portofolio. Rancangan
halaman tambah portofolio freelancer sebagai berikut:

Gambar III.55. Rancangan Halaman Tambah Portofolio

b. Halaman Edit Portofolio

Halaman edit portofolio berisikan data yang akan diubah untuk portofolio. Halaman ini digunakan
mengubah portofolio freelancer. Rancangan halaman edit portofolio sebagai berikut:

Gambar III.56. Rancangan Halaman Edit Portofolio

6. Halaman Penawaran
Halaman penawaran berisikan data penawaran projek yang telah diajukan freelancer kepada
perusahaan. Halaman ini digunakan untuk memantau status penawaran yang diajukan. Rancangan
halaman penawaran sebagai berikut:

Gambar III.57. Rancangan Halaman Penawaran

a. Halaman Lihat Detail Penawaran

Halaman lihat detail penawaran berisikan halaman yang menginformasikan detail penawaran yang
telah diajukan. Rancangan halaman lihat detail penawaran sebagai berikut:

Gambar III.58. Rancangan Halaman Lihat Detail Penawaran

7. Halaman Projek Freelancer

Halaman projek freelancer berisikan data projek freelancer yang diajukan telah pilih oleh
perusahaan. Halaman ini digunakan untuk mengolah data projek yang dibuat freelancer. Rancangan
halaman projek freelancer sebagai berikut:

Gambar III.59. Rancangan Halaman Projek Freelancer

8. Halaman Detail Projek Freelancer

a. Status dikerjakan
Halaman detail projek freelancer berisikan data detail projek freelancer dengan status dikerjakan.
Halaman ini digunakan untuk melihat detail projek dan meng-upload hasil desain freelancer.
Rancangan halaman detail projek freelancer (status dikerjakan) sebagai berikut:

Gambar III.60. Rancangan Halaman Detail Projek Freelancer (Status Dikerjakan)

b. Status dikerjakan Setelah Upload Hasil Desain

Halaman detail projek freelancer berisikan data detail projek freelancer dengan status dikerjakan
setelah upload hasil desain. Halaman ini digunakan untuk melihat detail projek dan meng-upload
ulang hasil desain freelancer. Rancangan halaman detail projek freelancer (status dikerjakan beserta
hasil desain) sebagai berikut:

Gambar III.61. Rancangan Halaman Detail Projek Freelancer (Status dikerjakan Setelah Upload Hasil
Desain)

c. Status dikerjakan Revisi

Halaman detail projek freelancer berisikan data detail projek freelancer dengan status dikerjakan
revisi. Halaman ini digunakan untuk melihat detail projek dan meng-upload hasil desain revisi
freelancer. Rancangan halaman detail projek freelancer (status dikerjakan revisi) sebagai berikut:

Gambar III.62. Rancangan Halaman Detail Projek Freelancer (Status dikerjakan Revisi)

9. Halaman Upload Desain

Halaman upload desain berisikan halaman yang digunakan untuk meng- upload hasil desain
freelancer. Rancangan halaman upload desain sebagai berikut:

Gambar III.63. Rancangan Halaman Upload Desain

10. Halaman Lupa Password Freelancer

Halaman lupa password berisikan halaman yang digunakan untuk mengetahui kembali password
freelancer yang tidak ingat. Rancangan halaman lupa password freelancer sebagai berikut:

Gambar III.64. Rancangan Halaman Lupa Password Freelancer

3.8 Entity Relationship Diagram (ERD)

Database akan dibagi kedalam beberapa tabel tergantung pada kebutuhan pengelolaan dan
pengembangannya. Tabel-tabel tersebut akan diimplementasikan menjadi sebuah gambar Entity
Relationship Diagram (ERD) dan Logical Record Structure (LRS). Berdasarkan data yang ada dapat
digambarkan ERD dan LRS website ini sebagai berikut :

Gambar III.65. Entity Relationship Diagram (ERD)

3.9 Logical Record Structure (LRS)

Gambar III.66. Logical Record Structure (LRS)

2.1. Spesifikasi File

Spesifikasi file menjelaskan tentang file-file yang akan digunakan dalam pengolahan database dan
sebagai media penyimpanan data dari proses yang terjadi. Dalam sistem informasi jasa desain grafis
“creative design” berbasis website yaitu data dikumpulkan dalam database mysql yang terdiri dari
beberapa tabel antara lain:

1. Spesifikasi File Portofolio

Nama File : Portofolio

Akronim : portofolio

Fungsi : Sebagai penyimpanan data portofolio freelancer

Tipe File : File Master

Organisasi File : Index Sequential

Akses File : Random

Media : Harddisk

Panjang Record : 335 Byte

Kunci Field : idportofolio

Software : MySQL

Tabel III.1. Spesifikasi File Portofolio

No Elemen Data Akronim Tipe PanjangKeterangan

1 Id Portofolio idportofolio Integer 10 Primary key

2 Id Kategori idktg Integer 10 Foreign key

3 Id Freelancer idfreelancer Varchar 10 Foreign key

4 Judul judul Varchar 50

5 Deskripsi deskripsi Text 255

2. Spesifikasi File Kategori

Nama File : Kategori

Akronim : kategori

Fungsi : Sebagai penyimpanan data kategori

Tipe File : File Master Organisasi File : Index Sequential Akses File : Random

Media : Harddisk

Panjang Record : 30Byte

Kunci Field : idktg

Software : MySQL

Tabel III.2. Spesifikasi File Kategori

No Elemen Data Akronim Tipe PanjangKeterangan

1 Id kategori idktg Integer 10 Primary key

2 Kategori kategori Varchar 20

3. Spesifikasi File Freelancer

Nama File : Freelancer

Akronim : freelancer

Fungsi : Sebagai penyimpanan data freelancer

Tipe File : File Master Organisasi File : Index Sequential Akses File : Random

Media : Harddisk

Panjang Record : 634 Byte

Kunci Field : idfreelancer

Software : MySQL

Tabel III.3. Spesifikasi File Freelancer

No Elemen Data Akronim Tipe PanjangKeterangan

1 Id Freelancer idfreelancer Varchar 10 Primary key

2 Nama nama Varchar 40

3 Alamat alamat Varchar 50

4 Kota kota Varchar 30

5 ProvinsiprovinsiVarchar 30

6 Telepon telepon Varchar 11

7 Email email Varchar 50

8 Password passwd Varchar 50

9 Bank bank Varchar 15

10 Rekening rekening Varchar 20

11 Atas Nama atasnama Varchar 40

12 Tanggal Daftar tgldaftar timestamp 4

13 Jumlah Projek jmlprojek Integer 10

14 Jumlah Sukses jmlsukses Integer 10

15 Star star Tinyint 1

16 Banned banned Tinyint 1

17 Email Ok emailokTinyint 1

18 Profil profil Text 255

19 Coreldraw coreldraw Tinyint 1

20 Ilustrator illustrator Tinyint 1

21 Photoshop photoshop Tinyint 1

22 Photopaint photopaint Tinyint 1

23 Xara xara Tinyint 1

24 Indesign indesign Tinyint 1

4. Spesifikasi File Perusahaan

Nama File : Perusahaan

Akronim : perusahaan

Fungsi : Sebagai penyimpanan data perusahaan

Tipe File : File Master Organisasi File : Index Sequential Akses File : Random

Media : Harddisk
Panjang Record : 363 Byte

Kunci Field : idusaha

Software : MySQL

Tabel III.4. Spesifikasi File Perusahaan

No Elemen Data Akronim Tipe PanjangKeterangan

1 Id Usaha idusaha varchar 10 Primary key

2 Nama Perusahaan namapt varchar 40

3 Alamat Perusahaan alamatpt varchar 50

4 Kota Perusahaan kotapt varchar 30

5 Provinsi Perusahaan provinsipt varchar 30

6 Telepon Perusahaan teleponpt varchar 16

7 Email email varchar 50

8 Password passwd varchar 50

9 Nama Orang namaor varchar 40

10 Jabatan Orang jabatanor varchar 30

11 Telepon Orang teleponor varchar 11

12 Tanggal Daftar tgldaftar timestamp 4

13 Banned banned Tinyint 1

14 Email Ok emailokTinyint 1

5. Spesifikasi File Projek

Nama File : Projek

Akronim : projek

Fungsi : Sebagai penyimpanan data projek

Tipe File : File Master Organisasi File : Index Sequential Akses File : Random

Media : Harddisk

Panjang Record : 1015 Byte

Kunci Field : idprojek

Software : MySQL

Tabel III.5. Spesifikasi File Projek

No Elemen Data Akronim Tipe PanjangKeterangan

1 Id Projek idprojek varchar 12 Primary key

2 Id Usaha idusaha varchar 10 Foreign key

3 Id Freelancer idfreelancer varchar 10 Foreign key

4 Jumlah Bid jmlbid Integer 10

5 Kategori kategori Text 255

6 Nama Projek namaprojek varchar 50

7 Deskripsi deskripsi Text 255

8 Harga harga Integer 10

9 Harga Deal hargadeal Integer 10

10 Deadline deadline Date 8

11 Kode Status kodestatus Tinyint 1

12 Id Bank idbank Integer 10 Foreign key

13 Tanggal Bayar tanggalbayar varchar 10

14 Nama Bank namabank varchar 15

15 Atas Nama atasnama varchar 30

16 Tanggal Verifikasi Bayar tglveribayar varchar 10

17 Tanggal Posting tglpost timestamp 4

18 Tanggal Oke Pt tglokept varchar 19

19 Penliaian penilaian tinyint 1

20 Komen Pt komenpt text 255

21 Tanggal Komisi tglkomisi varchar 10

22 Komisi komisi integer 10

23 Dibayarkan dibayarkan integer 10

6. Spesifikasi File Bidding

Nama File : Bidding

Akronim : bidding

Fungsi : Sebagai penyimpanan data bidding

Tipe File : File Master Organisasi File : Index Sequential Akses File : Random

Media : Harddisk

Panjang Record : 57 Byte

Kunci Field : idproduk

Software : MySQL

Tabel III.6. Spesifikasi File Bidding

No Elemen Data Akronim Tipe PanjangKeterangan

1 Id Bid idbid int 10 Primary key

2 Id Projek idprojek varchar 12 Foreign key

3 Id Usaha idusaha varchar 10 Foreign key

4 Id Freelancer idfreelancer varchar 10 Foreign key

5 Harga harga int 10

6 Tanggal Bid tglbid timestamp 4

7 Dipilih dipilih tinyint 1

7. Spesifikasi File Bank

Nama File : Bank

Akronim : bank

Fungsi : Sebagai penyimpanan data bank

Tipe File : File Master Organisasi File : Index Sequential Akses File : Random

Media : Harddisk

Panjang Record : 110 Byte

Kunci Field : idbank

Software : MySQL

Tabel III.7. Spesifikasi File Bank

No Elemen Data Akronim Tipe PanjangKeterangan

1 Id Bank idbank integer 3 Primary key

2 Nama Bank namabank varchar 20

3 No Rekening norekening varchar 20

4 Atas Nama atasnama varchar 30

8. Spesifikasi File Projekwrk

Nama File : Projekwrk

Akronim : projekwrk

Fungsi : Sebagai penyimpanan data hasil desain dan revisi desain oleh freelancer.

Tipe File : File Master Organisasi File : Index Sequential Akses File : Random

Media : Harddisk

Panjang Record : 613 Byte

Kunci Field : idprojekwrk

Software : MySQL

Tabel III.8. Spesifikasi File Projekwrk

No Elemen Data Akronim Tipe PanjangKeterangan

1 Id Projekwrk idprojekwrk integer 10 Primary key

2 Id Projek idprojek varchar 12 Foreign key

3 Id Freelancer idfreelancer varchar 10 Foreign key

4 Id Usaha Idusahavarchar 10 Foreign key

5 Upload Ke uploadke Tinyint 1

6 Komen Perusahaan komenpt text 255

7 Komen Freelancer komenfr text 255

8 Tanggal Post tglpost timestamp 4

9 Tanggal Upload tglupload varchar 19

10 Tanggal Verifikasi tglveri varchar 19

11 Tanggal Download tgldownload Varchar 19

9. Spesifikasi File Portolapor

Nama File : Portolapor

Akronim : portolapor

Fungsi : Sebagai penyimpanan data hasil laporan portofolio

freelancer

Tipe File : File Master Organisasi File : Index Sequential Akses File : Random

Media : Harddisk

Panjang Record : 758 Byte

Kunci Field : idlapor

Software : MySQL

Tabel III.9. Spesifikasi File Portolapor

No Elemen Data Akronim Tipe PanjangKeterangan

1 Id Lapor idlapor integer 10 Primary key

2 Tanggal Lapor tgllapor timestamp 4

3 Id Pelapor idpelapor varchar 10 Foreign key

4 Jenis Pelapor jenispl varchar 3

5 Id Portofolio idportofolio integer 10 Foreign key

6 Id Freelancer idfreelancer varchar 10 Foreign key

7 Alasan alasan text 255

8 Sumber sumber varchar 200

9 Admin Respon admrespon text 255

10 Hasil hasil tinyint 1

10. Spesifikasi File Admin

Nama File : Admin

Akronim : admin

Fungsi : Sebagai penyimpanan data admin

Tipe File : File Master Organisasi File : Index Sequential Akses File : Random

Media : Harddisk

Panjang Record : 100 Byte

Kunci Field : idadmin

Software : MySQL

Tabel III.10. Spesifikasi File Admin

No Elemen Data Akronim Tipe PanjangKeterangan

1 Id Admin idadmin integer 10 Primary key

2 Nama Admin namaadmin varchar 30

3 Login login varchar 10

4 Password passwd varchar 50

11. Spesifikasi File Syarat

Nama File : Syarat

Akronim : syarat

Fungsi : Sebagai penyimpanan data syarat

Tipe File : File Master Organisasi File : Index Sequential Akses File : Random

Media : Harddisk

Panjang Record : 315 Byte

Kunci Field : idsyarat

Software : MySQL

Tabel III.11. Spesifikasi File Syarat

No Elemen Data Akronim Tipe PanjangKeterangan

1 Id Syarat idsyaratinteger 10 Primary key

2 Judul judul varchar 50

3 Deskripsi deskripsi text 255

12. Spesifikasi File Tentang

Nama File : Tentang

Akronim : tentang

Fungsi : Sebagai penyimpanan data tentang wesite

Tipe File : File Master Organisasi File : Index Sequential Akses File : Random

Media : Hardisk

Panjang Record : 306 Byte

Kunci Field : idtentang

Software : MySQL

Tabel III.12. Spesifikasi File Tentang

No Elemen Data Akronim Tipe PanjangKeterangan

1 Id Tentang idtentang tinyint 1 Primary key

2 Judul judul varchar 50

3 Deskripsi deskripsi text 255

13. Spesifikasi File Website

Nama File : Website

Akronim : website

Fungsi : Sebagai penyimpanan data profil website

Tipe File : File Master Organisasi File : Index Sequential Akses File : Random

Media : Harddisk

Panjang Record : 306 Byte

Kunci Field : id

Software : MySQL

Tabel III.12. Spesifikasi File Website

No Elemen Data Akronim Tipe PanjangKeterangan

1 Id Id tinyint 1 Primary key

2 Nama Web namaweb varchar 50

3 Email email varchar 40

4 Alamat alamat varchar 50

5 Kota kota varchar 30

6 Telepon telepon varchar 20

7 Google map gmaps varchar 30

8 Profil profil text 255

9 Slogan A slogana varchar 30

10 Slogan B sloganb varchar 50

11 Komisi komisi tinyint 2

12 Max Bidder maxbider tinyint 2

13 Facebook facebook varchar 50

14 Instagram instagram varchar 50

3.10 Pengkodean

Pada website sistem informasi jasa desain grafis, kode digunakan sebagai identifikasi data,
pemanggilan data dan pengisian data maupun kolom untuk memudahkan pengelolaan data. Kode
akan memanggil seluruh field yang berhubungan dengan kode tersebut secara otomatis dari
perintah yang diberikan dari masing-masing memiliki perbedaan. Berikut penjelasan secara rinci
mengenai pengkodean, yaitu :

1. Id Projek

Gambar III.67. Struktur Kode Id Projek

2. Id Usaha

Gambar III.68. Struktur Kode Id Usaha

3. Id Freelancer

Gambar III.69. Struktur Kode Id Freelancer

4. Id Pelapor

a. Jika Pelapor Adalah Perusahaan

Gambar III.70. Struktur Kode Id Pelapor Jika Pelapor Adalah Perusahaan

b. Jika Pelapor Adalah Freelancer

Gambar III.71. Struktur Kode Id Pelapor Jika Pelapor Adalah Freelancer

3.11 Spesifikasi Program

Spesifikasi program yang dibuat dalam website ini dapat dilihat dari struktur navigasi. Struktur
navigasi yang digunakan pada website sistem informasi jasa desain grafis “creative design” berbasis
website adalah struktur navigasi campuran. Berikut

adalah penjelasan mengenai struktur navigasi dalam website sistem informasi jasa desain grafis
“creative design” berbasis website:

3.12 Struktur Navigasi Tamu (Guest)

Gambar III.72. Struktur Navigasi Tamu (Guest)

3.13 Struktur Navigasi Admin

Gambar III.73. Struktur Navigasi Admin

3.14 Struktur Navigasi Perusahaan

Gambar III.74. Struktur Navigasi Perusahaan

3.15 Struktur Navigasi Freelancer

Gambar III.75. Struktur Navigasi Freelancer

3.16 Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak minimum yang dibutuhkan untuk
mengimplementasikan sistem kumpulan fotografer. Spesifikasi sarana-sarana yang mendukung
dalam perancangan web ini adalah:

1. Spesifikasi Perangkat Keras (Hardware)

Perangkat keras (hardware) adalah seluruh komponen peralatan yang berbentuk suatu sistem
komputer dan peralatan lainnya yang memungkinkan komputer melaksanakan tugasnya, termasuk
juga mesin-mesin pembantu penyimpanan

Procesor : Procesor Intel Core-I3 RAM : RAM 2 GB

Harddisk : Harddisk 500 GB

Mouse : Optical Mouse Keyboard : Standart Keyboard

Monitor : Monitor dengan resolusi layar minimum 14 inch

Koneksi : Koneksi internet dengan kecepatan minimal 10 Mbps

2. Spesifikasi Perangkat Lunak (Software)

Fungsi software adalah untuk mengidentifikasi dan menyiapkan aplikasi program sehingga tata kerja
seluruh peralatan komputer dan tabelt dapat terkontrol, serta membuat pekerjaan menjadi lebih
efisien. Pemakaian komputer dan tabelt tidak lepas dari perangkat-perangkat tersebut yang saling
berhubungan dan terkait.

Sistem Operasi : Windows

Program Desain : Notepad ++

Web Server : PHPMyAdmin dan XAMPP

Web Browser : Google Chrome dan Mozilla Firefox

Bahasa Pemrograman : PHP dan HTML

Database : MySQL

3.17 Implementasi

Rancangan antar muka yang diimplementasikan diantaranya :

1. Halaman Home

Halaman home atau beranda merupakan halaman yang pertama kali terbuka oleh pengunjung ketika
mengakses webiste. Implementasi halaman home sebagai berikut:

Gambar III.76. Tampilan Halaman Home

2. Halaman Projek Desain Grafis

Halaman projek desain berisikan daftar projek desain grafis. Halaman ini digunakan untuk
menginformasikan projek desain grafis yang tersedia. Implementasi halaman projek desain grafis
sebagai berikut:

Gambar III.77. Tampilan Halaman Projek Desain Grafis

3. Halaman Tentang Kami

Halaman tentang kami berisikan informasi tentang website. Halaman ini digunakan untuk
menginformasikan profil website kepada para pengunjung website. Implementasi halaman tentang
kami sebagai berikut:

Gambar III.78. Tampilan Halaman Tentang Kami

4. Halaman Syarat & Ketentuan

Halaman syarat & ketentuan berisikan informasi syarat dan ketentuan pengguna website.
Implementasi halaman syarat & ketentuan sebagai berikut:

Gambar III.79. Tampilan Halaman Syarat & Ketentuan

3.18 Implementasi Halaman Admin

1. Halaman Login Admin

Halaman login admin merupakan halaman dimana admin memasukan username dan password-nya
agar dapat mengakses menu utamanya. Implementasi halaman login admin adalah sebagai berikut :

Gambar III.80. Implementasi Halaman Login Admin

2. Halaman Home Admin

Halaman home admin merupakan halaman yang pertama kali terbuka setelah admin berhasil
melakukan login pada halaman login. Halaman ini berisi beranda dan beberapa menu khusus admin.
Implementasi halaman home admin sebagai berikut:

Gambar III.81. Implementasi Halaman Home Admin

3. Halaman Freelancer

Halaman freelancer berisikan data freelancer yang sudah terdaftar. Halaman ini digunakan untuk
mengelola data freelancer. Implementasi halaman freelancer sebagai berikut:

Gambar III.82. Implementasi Halaman Freelancer

a. Halaman Edit Data Freelancer

Halaman edit data freelancer berisikan data freelancer yang mau di ubah atau edit. Halaman ini
digunakan untuk mengubah data freelancer. Implementasi halaman edit data freelancer sebagai
berikut:

Gambar III.83. Implementasi Halaman Edit Data Freelancer

5. Halaman Laporan Portofolio

Halaman laporan portofolio berisikan data laporan pelanggaran portofolio freelancer yang diduga
melakukan pelanggaran portofolio yang dilaporkan oleh perusahaan atau freelancer lain. Halaman
ini digunakan untuk mengelola laporan pelanggaran portofolio. Implementasi halaman laporan
portofolio sebagai berikut:
Gambar III.84. Implementasi Halaman Laporan Portofolio

a. Halaman Detail Pelanggaran Portofolio

Halaman detail pelanggaran portofolio berisikan data detail pelanggaran portofolio. Halaman ini
digunakan untuk melihat detail pelanggaran portofolio dan mengubah status terlapor dan merespon
laporan pelanggaran. Implementasi halaman detail pelanggaran portofolio sebagai berikut:

Gambar III.85. Implementasi Halaman Detail Pelanggaran Portofolio

6. Halaman Perusahaan

Halaman perusahaan berisikan data daftar perusahaan yang sudah terdaftar. Halaman ini digunakan
untuk mengelola data perusahaan. Implementasi halaman perusahaan sebagai berikut:

Gambar III.86. Implementasi Halaman Perusahaan

a. Halaman Edit Data Perusahaan

Halaman edit data perusahaan berisikan data perusahaan yang mau di ubah atau edit. Halaman ini
digunakan untuk mengubah data perusahaan. Implementasi halaman edit data perusahaan sebagai
berikut:

Gambar III.87. Tampilan Halaman Edit Data Perusahaan

7. Halaman Projek Admin

Halaman projek admin berisikan data daftar projek admin yang sedang berjalan sampai yang sudah
selesai. Halaman ini digunakan untuk mengelola data projek desain. Implementasi halaman projek
admin sebagai berikut:

Gambar III.88. Implementasi Halaman Projek Admin

8. Halaman Detail Projek Admin

a. Status Belum diverifikasi Pembayaran

Halaman detail projek berisikan data detail projek admin dengan status belum diverifikasi
pembayaran. Halaman ini digunakan untuk memverifikasi pembayaran dari perusahaan.
Implementasi halaman detail projek admin (status belum diverifikasi pembayaran) sebagai berikut:

Gambar III.89. Implementasi Halaman Detail Projek Admin (Status Belum diverifikasi Pembayaran)

b. Status Dikerjakan

Halaman detail projek berisikan data detail projek admin dengan status dikerjakan. Halaman ini
digunakan untuk memverifikasi hasil desain yang telah di-upload oleh freelancer dan melihat apakah
hasil desain yang

dikirimkan sudah di-download oleh perusahaan. Impelementasi halaman detail projek admin (status
dikerjakan) sebagai berikut:

Gambar III.90. Implementasi Halaman Detail Projek Admin (Status dikerjakan)

c. Status dikerjakan Revisi

Halaman detail projek berisikan data detail projek admin dengan status dikerjakan namun revisi.
Halaman ini digunakan untuk memverifikasi hasil desain revisi yang telah di-upload oleh freelancer
dan melihat apakah hasil desain revisi yang dikirimkan sudah di-download oleh perusahaan.
Implementasi halaman detail projek admin (status dikerjakan revisi) sebagai berikut:
Gambar III.91. Impelementasi Halaman Detail Projek Admin (Status dikerjakan Revisi)

d. Status Selesai

Halaman detail projek berisikan data detail projek admin dengan status selesai. Halaman ini
digunakan untuk melihat tanggapan dan peniliaian perusahaan terhadap freelancer yang telah
menyelesaikan projek desain grafis. Implementasi halaman detail projek admin (status revisi)
sebagai berikut:

Gambar III.92. Impelementasi Halaman Detail Projek Admin (Status Selesai)

9. Halaman Komisi

Halaman komisi berisikan data penerimaan komisi dan pembayaran hak freelancer atas projek yang
sudah diselesaikan. Halaman ini digunakan untuk melihat dan mengkonfirmasi pembayaran hak
freelancer. Implementasi halaman komisi sebagai berikut:

Gambar III.93. Implementasi Halaman Komisi

10. Halaman Laporan Penerimaan Komisi

Halaman laporan penerimaan komisi berisikan pencarian laporan penerimaan komisi. Halaman ini
digunakan untuk mencari data laporan komisi dan mencetaknya. Implementasi halaman laporan
penerimaan komisi sebagai berikut:

Gambar III.94. Implementasi Halaman Laporan Penerimaan Komisi

11. Halaman Master Kategori Desain

Halaman master kategori desain berisikan data utama kategori desain. Halaman ini digunakan untuk
mengelola data kategori desain. Implementasi halaman master kategori desain sebagai berikut:

Gambar III.95. Implementasi Halaman Master Kategori Desain

a. Halaman Tambah Kategori

Halaman tambah kategori berisikan halaman untuk menambahkan data kategori desain.
Implementasi halaman tambah kategori sebagai berikut:

Gambar III.96. Implementasi Halaman Tambah Kategori

b. Halaman Edit Kategori

Halaman edit kategori berisikan halaman untuk mengubah data kategori desain. Implementasi
halaman edit kategori sebagai berikut:

Gambar III.97. Implementasi Halaman Edit Kategori

12. Halaman Master Administrator

Halaman master administrator berisikan data utama administrator. Halaman ini digunakan untuk
mengelola data administrator. Implementasi halaman master administrator sebagai berikut:

Gambar III.98. Implementasi Halaman Master Administrator

a. Halaman Tambah Administrator

Halaman tambah administrator berisikan halaman untuk menambahkan data administrator.
Implementasi halaman tambah administrator sebagai berikut:

Gambar III.99. Implementasi Halaman Tambah Administrator

b. Halaman Edit Administrator

Halaman edit administrator berisikan halaman untuk mengubah data

administrator. Implementasi halaman edit administrator sebagai berikut:

Gambar III.100. Implementasi Halaman Edit Administrator

13. Halaman Master Bank

Halaman master bank berisikan data utama bank. Halaman ini digunakan untuk mengelola data
bank. Implementasi halaman master bank sebagai berikut:

Gambar III.101. Implementasi Halaman Master Bank

a. Halaman Tambah Bank

Halaman tambah bank berisikan halaman untuk menambahkan data bank. Implementasi halaman
tambah bank sebagai berikut:

Gambar III.102. Implementasi Halaman Tambah Bank

b. Halaman Edit Bank

Halaman edit bank berisikan halaman untuk mengubah data bank. Implementasi halaman edit bank
sebagai berikut:

Gambar III.103. Implementasi Halaman Edit Bank

14. Halaman Master Tentang Kami

Halaman master tentang kami berisikan data tentang kami yakni profil website. Halaman ini
digunakan untuk mengelola data tentang kami. Implementasi halaman master tentang kami sebagai
berikut:

Gambar III.104. Implementasi Halaman Master Tentang Kami

15. Halaman Master Syarat & Ketentuan

Halaman master syarat & ketentuan berisikan data syarat dan ketentuan pada website. Halaman ini
digunakan untuk mengelola data syarat dan ketentuan. Implementasi halaman master syarat &
ketentuan sebagai berikut:

Gambar III.105. Implementasi Halaman Master Syarat & Ketentuan

a. Halaman Tambah Syarat & Ketentuan

Halaman tambah syarat & ketentuan berisikan halaman untuk menambahkan data syarat &
ketentuan. Implementasi halaman tambah syarat & ketentuan sebagai berikut:
Gambar III.106. Implementasi Halaman Tambah Syarat & Ketentuan

b. Halaman Edit Syarat & Ketentuan

Halaman edit syarat & ketentuan berisikan halaman untuk mengubah data syarat & ketentuan.
Implementasi halaman edit syarat & ketentuan sebagai berikut:

Gambar III.107. Implementasi Halaman Edit Syarat & Ketentuan

16. Halaman Master Pengaturan

Halaman master pengaturan berisikan data pengaturan data website. Halaman ini digunakan untuk
mengelola data pengaturan data website. Implementasi halaman master pengaturan sebagai
berikut:

Gambar III.108. Implementasi Halaman Master Pengaturan

17. Halaman Ubah Password

Halaman ubah password berisikan data ubah password admin. Halaman ini digunakan untuk
mengubah password admin. Implementasi halaman ubah password sebagai berikut:

Gambar III.109. Implementasi Halaman Ubah Password

2.1.1. Implementasi Perusahaan

1. Halaman Daftar Perusahaan

Halaman daftar perusahaan berisikan data yang harus di isi untuk syarat pendafataran perusahaan
dan untuk mendapatkan hak akses sistem. Halaman ini digunakan meng-input data pendaftaran
perusahaan. Implementasi halaman daftar perusahaan sebagai berikut:

Gambar III.110. Implementasi Halaman Daftar Perusahaan

2. Halaman Login Perusahaan

Halaman login perusahaan merupakan halaman dimana user memasukan email dan password-nya
agar dapat mengakses menu utamanya. Implementasi halaman login perusahaan adalah sebagai
berikut :

Gambar III.111. Implementasi Halaman Login Perusahaan

3. Halaman Home Perusahaan

Halaman home perusahaan merupakan halaman yang pertama kali terbuka setelah perusahaan
berhasil melakukan login. Halaman ini berisi beberapa menu khusus perusahaan. Implementasi
halaman beranda perusahaan sebagai berikut:

Gambar III.112. Implementasi Halaman Home Perusahaan

4. Halaman Akun Perusahaan

Halaman akun perusahaan berisikan data akun perusahaan. Halaman ini digunakan untuk melihat
atau mengubah data akun perusahaan. Implementasi halaman akun perusahaan sebagai berikut:

Gambar III.113. Implementasi Halaman Akun Perusahaan

5. Halaman Projek Perusahaan

Halaman projek perusahaan berisikan data projek yang dibuat perusahaan. Halaman ini digunakan
untuk mengolah data projek yang dibuat perusahaan. Implementasi halaman projek perusahaan
sebagai berikut:

Gambar III.114. Implementasi Halaman Projek Perusahaan

a. Halaman Projek Baru

Halaman projek baru berisikan data yang dimasukan untuk iklan pembuatan desain grafis. Halaman
ini digunakan untuk membuat projek pembuatan desain grafis. Implementasi halaman projek baru
sebagai berikut:

Gambar III.115. Implementasi Halaman Projek Baru

b. Halaman Edit Projek Perusahaan

Halaman edit projek perusahaan berisikan data yang akan diubah untuk iklan pembuatan desain
grafis. Halaman ini digunakan mengubah projek pembuatan desain grafis. Implementasi halaman
edit projek perusahaan sebagai berikut:
Gambar III.116. Implementasi Halaman Edit Projek

6. Halaman Detail Projek Perusahaan

a. Status Sudah Ada Penawaran

Halaman detail projek perusahaan berisikan data detail projek perusahaan dengan status sudah ada
penawaran. Halaman ini digunakan untuk melihat dan memilih freelancer yang telah mengajukan
penawaran. Implementasi halaman detail projek perusahaan (status sudah ada penawaran) sebagai
berikut:

Gambar III.117. Implementasi Halaman Detail Projek Perusahaan (Status Sudah Ada Penawaran)

b. Status Menunggu Pembayaran

Halaman detail projek perusahaan berisikan data detail projek perusahaan dengan status menunggu
pembayaran. Halaman ini digunakan untuk melihat dan konfirmasi pembayaran projek desain grafis.
Implementasi halaman detail projek perusahaan (status menunggu pembayaran) sebagai berikut:

Gambar III.118. Implementasi Halaman Detail Projek Perusahaan (Status Menunggu Pembayaran)

c. Status Belum diverifivikasi Pembayaran

Halaman detail projek perusahaan berisikan data detail projek perusahaan dengan status belum
diverifikasi pembayaran. Halaman ini digunakan untuk melihat status pembayaran projek desain
grafis. Implementasi halaman detail projek perusahaan (status belum diverifikasi pembayaran)
sebagai berikut:

Gambar III.119. Implementasi Halaman Detail Projek Perusahaan (Status Belum diverifikasi
Pembayaran)

d. Status dikerjakan
Halaman detail projek perusahaan berisikan data detail projek perusahaan dengan status dikerjakan.
Halaman ini digunakan untuk melihat dan men- download projek yang telah di-upload oleh
freelancer serta untuk mengkonfrmasi bahwa projek telah sesuai keinginan (deal) denagn
memberikan tanggapan dan rating kepada freelancer. Implementasi halaman detail projek
perusahaan (status dikerjakan) sebagai berikut:

Gambar III.120. Implementasi Halaman Detail Projek Perusahaan (Status dikerjakan)

e. Status dikerjakan Mengajukan Revisi

Halaman detail projek perusahaan berisikan data detail projek perusahaan dengan status dikerjakan
mengajukan revisi. Halaman ini digunakan untuk mengajukan revisi dan men-download projek revisi
yang telah di- upload oleh freelancer serta untuk mengkonfrmasi bahwa projek telah sesuai
keinginan (deal) dengan memberikan tanggapan dan rating kepada freelancer. Implementasi
halaman detail projek perusahaan (status dikerjakan mengajukan revisi) sebagai berikut:

Gambar III.121. Implementasi Halaman Detail Projek Perusahaan (Status dikerjakan Mengajukan
Revisi)

f. Status Selesai

Halaman detail projek perusahaan berisikan data detail projek perusahaan dengan status selesai.
Halaman ini digunakan untuk melihat data hasil akhir projek desain. Implementasi halaman detail
projek perusahaan (status selesai) sebagai berikut:

Gambar III.122. Implementasi Halaman Detail Projek Perusahaan (Status Selesai)

7. Halaman Melihat Profil Freelancer

Halaman melihat profil freelancer berisikan data freelancer yang telah mengajukan jasa desain
grafis. Halaman ini digunakan untuk melihat dan sebagai baham pertimbangan untuk memilih
freelancer yang berkompeten kiranya. Implementasi halaman melihat profil freelancer sebagai
berikut:

Gambar III.123. Implementasi Halaman Melihat Profil Freelancer

9. Halaman Lupa Password Perusahaan

Halaman lupa password berisikan halaman yang digunakan untuk mengetahui kembali password
perusahaan yang tidak ingat. Implementasi halaman lupa password perusahaan sebagai berikut:

Gambar III.124. Implementasi Halaman Lupa Password Perusahaan

2.1.2. Implementasi Freelancer

1. Halaman Daftar Freelancer

Halaman daftar freelancer berisikan data yang harus di isi untuk syarat pendafataran freelancer dan
untuk mendapatkan hak akses sistem. Halaman

ini digunakan meng-input data pendaftaran freelancer. Implementasi halaman daftar freelancer
sebagai berikut:

Gambar III.125. Implementasi Halaman Daftar Freelancer

2. Halaman Login Freelancer

Halaman login freelancer merupakan halaman dimana user memasukan email dan password nya
agar dapat mengakses menu utamanya. Implementasi Halaman login freelancer adalah sebagai
berikut :
Gambar III.126. Implementasi Halaman Login Freelancer

3. Halaman Home Freelancer

Halaman home freelancer merupakan halaman yang pertama kali terbuka setelah freelancer
berhasil melakukan login pada halaman login. Halaman ini berisi beberapa menu khusus freelancer.
Implementasi halaman home freelancer sebagai berikut:

Gambar III.127. Implementasi Halaman Home Freelancer

4. Halaman Akun Freelancer

Halaman akun freelancer berisikan data akun freelancer. Halaman ini digunakan untuk mengubah
data akun freelancer. Implementasi halaman akun freelancer sebagai berikut:

Gambar III.128. Implementasi Halaman Akun Freelancer

5. Halaman Portofolio Freelancer

Halaman portofolio freelancer berisikan data portofolio freelancer yang telah dbuat. Halaman ini
digunakan untuk mengolah data portofolio freelancer. Implementasi halaman portofolio freelancer
sebagai berikut:
Gambar III.129. Implementasi Halaman Portofolio Freelancer

a. Halaman Tambah Portofolio

Halaman tambah portofolio berisikan halaman untuk menambahkan data portofolio. Implementasi
halaman tambah portofolio freelancer sebagai berikut:

Gambar III.130. Implementasi Halaman Tambah Portofolio

b. Halaman Edit Portofolio

Halaman edit portofolio berisikan data yang akan diubah untuk portofolio freelancer. Halaman ini
digunakan mengubah portofolio freelancer. Implementasi halaman edit portofolio sebagai berikut:

Gambar III.131. Implementasi Halaman Edit Portofolio

6. Halaman Penawaran

Halaman penawaran berisikan data penawaran projek yang telah diajukan freelancer kepada
perusahaan. Halaman ini digunakan untuk memantau status penawaran yang diajukan.
Implementasi halaman penawaran sebagai berikut:

Gambar III.132. Implementasi Halaman Penawaran

b. Halaman Lihat Detail Penawaran

Halaman lihat detail penawaran berisikan halaman yang menginformasikan detail penawaran yang
telah diajukan. Implementasi halaman lihat detail penawaran sebagai berikut:
Gambar III.133. Implementasi Halaman Lihat Detail Penawaran

7. Halaman Projek Freelancer

Halaman projek freelancer berisikan data projek freelancer yang diajukan telah pilih oleh
perusahaan. Halaman ini digunakan untuk mengolah data projek yang dibuat freelancer.
Implementasi halaman projek freelancer sebagai berikut:

Gambar III.134. Implementasi Halaman Projek Freelancer

8. Halaman Detail Projek Freelancer

a. Status dikerjakan

Halaman detail projek freelancer berisikan data detail projek freelancer dengan status dikerjakan.
Halaman ini digunakan untuk melihat detail projek dan meng-upload hasil desain freelancer.
Implementasi halaman detail projek freelancer (status dikerjakan) sebagai berikut:

Gambar III.135. Implementasi Halaman Detail Projek Freelancer (Status dikerjakan)

b. Status dikerjakan Setelah Upload Hasil Desain

Halaman detail projek freelancer berisikan data detail projek freelancer dengan status dikerjakan
setelah upload hasil desain. Halaman ini digunakan untuk melihat detail projek dan meng-upload
ulang hasil desain freelancer. Implementasi halaman detail projek freelancer (status dikerjakan
setelah upload hasil desain) sebagai berikut:
Gambar III.136. Implementasi Halaman Detail Projek Freelancer (Status dikerjakan Setelah Upload
Hasil Desain)

c. Status dikerjakan Revisi

Halaman detail projek freelancer berisikan data detail projek freelancer dengan status dikerjakan
revisi. Halaman ini digunakan untuk melihat detail projek dan meng-upload hasil desain revisi
freelancer. Implementasi halaman detail projek freelancer (status dikerjakan revisi) sebagai berikut:

Gambar III.137. Implementasi Halaman Detail Projek Freelancer (Status dikerjakan Revisi)

9. Halaman Upload Desain

Halaman upload desain berisikan halaman yang digunakan untuk meng- upload hasil desain
freelancer. Implementasi halaman upload desain sebagai berikut:

Gambar III.138. Implementasi Halaman Upload Desain

11. Halaman Lupa Password Freelancer

Halaman lupa password berisikan halaman yang digunakan untuk mengetahui kembali password
freelancer yang tidak ingat. Rancangan halaman lupa password freelancer sebagai berikut:

Gambar III.139. Implementasi Halaman Lupa Password Freelancer

3.19 Pengujian Unit

Pengujian unit menjelaskan mengenai pengujian sistem yang dibuat menggunakan black box testing
untuk pengujian proses input dan output saja. Berikut hasil dari pengujian sistem dari beberapa
form penting dalam website ini :

1. Form Login Admin

Tabel III.14. Hasil Blackbox Testing Login Admin

No Skenario

Pengujian Test Case Hasil yang

diharapkan Hasil

pengujian Kesimpulan

1 Mengisi username dan password dengan salah,

kemudian klik

login Username: adm(salah) Password:1 23456

(salah) Sistem akan menampilkan alert “Data tdak

ditemukan . . .” Sesuai harapan Valid

2 Mengisi username benar, password salah, kemudian

klik login. Username: admin (benar) Password: 123456(sal ah) Sistem akan
menampilkan alert “Data tdak

ditemukan . . .” Sesuai harapan Valid

3 Mengisi username salah, passwordbenar, kemudian klik

login. Username: admn (salah) Password:1 2354

(benar) Sistem akan menampilkan alert “Data tdak

ditemukan . . .” Sesuai harapan Valid

4 Mengisi username dengan benar, password tidak di isi,

kemudian klik

login. Username: admin (benar) Password: (kosong) Sistem akan menampilkan alert “Data
tdak

ditemukan . . .” Sesuai harapan Valid

5 Username tidak di isi dan

password diisi benar, kemudian klik login. Username: (kosong) Password: 12345(bena r)
Sistem akan menampilkan alert “Data tdak
ditemukan . . .” Sesuai harapan Valid

6 Mengisi username dan password dengan benar, kemudian klik login. Username:
admin (benar) Password: 123456

(benar) Sistem akan

menerima akses login dan kemudian masuk ke halaman beranda admin. Sesuai harapan Valid

2. Form Login Perusahaan

Tabel III.15. Hasil Blackbox Testing Login Perusahaan

No Skenario

Pengujian Test Case Hasil yang

diharapkan Hasil

pengujian Kesimpulan

1 Mengisi email dan password dengan salah,

kemudian klik

login. email: badkara (salah) Password: 123456

(salah) Sistem akan menampilkan alert “Gagal login, pastikan email dan password benar”
Sesuai harapan Valid

2 Mengisi email benar, password salah, kemudian klik login. email: baskara (benar)
Password: 123456

(salah) Sistem akan menampilkan alert “Gagal login, pastikan email dan password benar”
Sesuai harapan Valid

3 Mengisi email salah, password benar, kemudian klik login. email: badkara (salah)
Password: 12345

(benar) Sistem akan menampilkan alert “Gagal login, pastikan email dan password benar”
Sesuai harapan Valid

4 Mengisi email

dengan benar, password tidak di isi, kemudian klik login.email: baskara (benar) Password: (kosong)
Sistem akan menampilkan alert “Tidak boleh kosong” Sesuai harapan Valid

5 Email tidak di isi dan password

diisi benar, kemudian klik login. email: (kosong) Password: 12345

(benar) Sistem akan menampilkan alert “Tidak boleh kosong” Sesuai harapan Valid
6 Mengisi email dan password dengan benar, kemudian klik login. email: baskara
(benar) Password: 12345

(benar) Sistem akan

menerima akses login dan kemudian masuk ke halaman beranda perusahaan. Sesuai harapan
Valid

3. Form Login Freelancer

Tabel III.16. Hasil Blackbox Testing Login Freelancer

No Skenario

Pengujian Test Case Hasil yang

diharapkan Hasil

pengujian Kesimpulan

1 Mengisi email dan password dengan salah,

kemudian klik

login. email: suryana (salah) Password: 123456

(salah) Sistem akan menampilkan alert “Gagal login, pastikan email dan password benar”
Sesuai harapan Valid

2 Mengisi email benar, password salah, kemudian klik login. email: surjana (benar)
Password: 123456

(salah) Sistem akan menampilkan alert “Gagal login, pastikan email dan password benar”
Sesuai harapan Valid

3 Mengisi email salah, password benar, kemudian klik login. email: suryana (salah)
Password: 12345

(benar) Sistem akan menampilkan alert “Gagal login, pastikan email dan password benar”
Sesuai harapan Valid

4 Mengisi email

dengan benar, password tidak di isi, kemudian klik login.email: surjana (benar) Password: (kosong)
Sistem akan menampilkan alert “Tidak boleh kosong” Sesuai harapan Valid

5 Email tidak di isi dan password

diisi benar, kemudian klik login. email: (kosong) Password: 12345

(benar) Sistem akan menampilkan alert “Tidak boleh kosong” Sesuai harapan Valid
6 Mengisi email dan password dengan benar, kemudian klik login. email: baskara
(benar) Password: 12345

(benar) Sistem akan

menerima akses login dan kemudian masuk ke halaman beranda freelancer. Sesuai harapan
Valid

4. Form Admin Tambah Kategori Desain

Tabel III.17. Hasil Blackbox Testing Form Admin Tambah Kategori Desain

No Skenario

Pengujian Test Case Hasil yang

diharapkan Hasil

pengujian Kesimpulan

1 Nama Kategori dan Gambar Ikon tidak di isi, kemudian tombol simpan di
klik. Nama Kategori: (kosong) Gambar Ikon: (kosong) Sistem akan menampilkan alert
“tidak boleh

kosong” pada setiap field. Sesuai harapan Valid

2 Mengisi Nama Kategori. Ikon tidak di isi,

kemudian tombol simpan di klik. Nama Kategori: Kalender Gambar Ikon: (kosong)
Sistem akan menampilkan alert “tidak boleh

kosong” pada

field Gambar Ikon. Sesuai harapan Valid

3 Nama kategori tidak di isi, Gambar Ikon di isi, kemudian tombol simpan di klik. Nama
Kategori: (kosong) Gambar Ikon: kalender.jpg Sistem akan menampilkan alert “tidak
boleh

kosong” pada

field Kategori. Sesuai harapan Valid

4 MengisiNama Kategori dan

Gambar Ikon dengan benar, kemudian tombol simpan

di klik. Nama Kategori: Kalender Gambar Ikon: kalender.jpg Sistem akan

menerima input dan data kategori disimpan. Sesuai harapan Valid

5. Form Admin Tambah Administrator

Tabel III.18. Hasil Blackbox Testing Form Admin Tambah Administrator

No Skenario

Pengujian Test Case Hasil yang

diharapkan Hasil

pengujian Kesimpulan

1 Nama Administrator. User Name, dan Password ikon tidak di isi, kemudian
tombol simpan

di klik. Nama Administrator: (kosong)

User Name: (kosong) Password: (kosong) Sistem akan menampilkan alert “tidak
boleh

kosong” pada setiap field. Sesuai harapan Valid

2 Mengisi Nama Administrator. User Name dan Password tidak di isi, kemudian tombol
simpan

di klik. Nama Administrator: Imam Purwanto User Name: (kosong) Password:

(kosong) Sistem akan menampilkan alert “tidak boleh

kosong” pada field User Name dan Password. Sesuai harapan Valid

3 MengisiUser

Name. Nama Administrator dan Password tidak di

isi, kemudian tombol simpan

di klik. Nama Administrator: (kosong)

User Name: imam Password: (kosong) Sistem akan menampilkan alert “tidak
boleh

kosong” pada

field Nama Administrator dan Password. Sesuai harapan Valid

4 Mengisi Password. Nama Administrator dan User Name tidak di isi, kemudian
tombol simpan

di klik. Nama Administrator: (kosong)

User Name: (kosong) Password: 12345 Sistem akan menampilkan alert “tidak
boleh
kosong” pada

field Nama Administrator dan User Name. Sesuai harapan Valid

5 MengisiNama Administrator, User Name dan Password dengan benar, kemudian

tombol simpan di klik. Nama Administrator: Imam Purwanto User Name: imam Password:
12345 Sistem akan

menerima input

dan data

administrator

disimpan. Sesuai harapan Valid

6. Form Admin Tambah Bank

Tabel III.19. Hasil Blackbox Testing Form Admin Tambah Bank

No Skenario

Pengujian Test Case Hasil yang

diharapkan Hasil

pengujian Kesimpulan

1 Nama Bank,

No Rekening, Pemilik Rekening dan Ikon tidak di isi, kemudian tombol simpan

di klik. Nama Bank: (kosong)

No Rekening: (kosong) Pemilik Rekening: (kosong)

Ikon (kosong) Sistem akan menampilkan alert “tidak boleh

kosong” pada setiap field. Sesuai harapan Valid

2 MengisiNama Bank.

No Rekening, Pemilik Rekening dan Ikon tidak di isi, kemudian tombol simpan

di klik. Nama Bank: BNI

No Rekening: (kosong) Pemilik Rekening: (kosong)

Ikon (kosong) Sistem akan menampilkan alert “tidak boleh

kosong” pada field No Rekening, Pemilik Rekening dan Ikon. Sesuai harapan Valid

3 MengisiNo Rekening.

Nama Bank, Pemilik Rekening dan Ikon tidak di isi, kemudian

tombol simpan di klik. Nama Bank: (kosong)

No Rekening: 0871158067

Pemilik Rekening: (kosong)

Ikon (kosong) Sistem akan menampilkan alert “tidak boleh

kosong” pada field Nama Bank, Pemilik Rekening dan Ikon. Sesuai harapan Valid

4 Mengisi Pemilik Rekening, Nama Bank, No Rekening dan Ikon

tidak di isi, kemudian tombol simpan

di klik. Nama Bank: (kosong)

No Rekening: (kosong) Pemilik Rekening: Imam Purwanto

Ikon (kosong) Sistem akan menampilkan alert “tidak boleh

kosong” pada field Nama Bank, No Rekening dan Ikon. Sesuai harapan Valid

5 Mengisi Ikon. Nama Bank, No Rekening

dan Pemilik Rekening tidak di isi, kemudian

tombol simpan di klik. Nama Bank: (kosong)

No Rekening: (kosong) Pemilik Rekening: (kosong)

Ikon : bni.png Sistem akan menampilkan alert “tidak boleh

kosong” pada field Nama Bank, No Rekening dan Pemilik Rekening. Sesuai harapan Valid

6 Mengisi

Nama Bank, No Rekening Pemilik dan Ikon

dengan benar, kemudian tombol simpan

di klik. Nama Bank: BNI

No Rekening: 0871158067

Pemilik Rekening: Imam Purwanto Ikon : bni.png Sistem akan

menerima input dan data bank disimpan. Sesuai harapan Valid

7. Form Perusahaan Buat Projek Baru

Tabel III.20. Hasil Blackbox Testing Form Perusahaan Buat Projek Baru

No Skenario
Pengujian Test Case Hasil yang

diharapkan Hasil

pengujian Kesimpulan

1 Nama Projek, Deskripsi, Kategori, Harga, Deadline, Simpan sebagai dan Upload
konsep desain (format jpg, maks 500KB) tidak di
isi, kemudian tombol simpan di klik. Nama Projek: (kosong) Deskripsi:
(kosong) Kategori: (kosong)

Harga: (Jika harga kosong 0 maka freelancer yang memberikan penawaran) Deadline:
(mm/dd/yyyy) Simpan Sebagai

: (Draf/Publish) Upload konsep desain (format jpg, maks 500KB) :

(Jika sudah punya konsep silahkan

upload) Sistem akan menampilkan alert “Kategori harus dipilih minimal 1 buah “ pada field kategori
dan

“tidak boleh

kosong” pada field Nama Projek, Deskripsi dan Deadline. Sesuai harapan Valid

2 MengisiNama

Projek. Deskripsi, Kategori, Harga, Deadline, Simpan sebagai dan Upload konsep
desain (format jpg, maks 500KB) tidak di isi,
kemudian tombol simpan di klik. Nama Projek: Creative Design Deskripsi: (kosong)
Kategori: (kosong)

Harga: (Jika harga kosong 0 maka freelancer yang memberikan penawaran) Deadline:
(mm/dd/yyyy) Simpan Sebagai

: (Draf/Publish) Upload konsep desain (format jpg, maks 500KB) :

(Jika sudah punya konsep silahkan

upload) Sistem akan menampilkan alert “Kategori harus dipilih minimal 1 buah “ pada field kategori
dan

“tidak boleh

kosong” pada field Deskripsi dan Deadline. Sesuai harapan Valid

3 Mengisi Deskripsi. Nama Projek, Kategori, Harga, Deadline, Simpan sebagai

dan Upload konsep desain (format jpg, maks
500KB) tidak di isi, kemudian tombol simpan di klik. Nama
Projek: (Kosong) Deskripsi: logo Kategori: (kosong)

Harga: (Jika harga kosong 0 maka freelancer yang memberikan penawaran) Deadline:
(mm/dd/yyyy) Simpan Sebagai
: (Draf/Publish) Upload konsep desain (format jpg, maks 500KB) :

(Jika sudah punya konsep silahkan upload)Sistem akan menampilkan alert “Kategori
harus dipilih minimal 1 buah “ pada field kategori dan

“tidak boleh

kosong” pada field Nama Projek, Deskripsi dan Deadline. Sesuai harapan Valid

4 Memilih Kategori.

Nama Projek, Deskripsi, Harga, Deadline, Simpan sebagai dan Upload konsep
desain (format jpg, maks 500KB) tidak di
isi, kemudian tombol simpan di klik. Nama Projek: (Kosong) Deskripsi: (kosong)
Kategori: Logo Harga: (Jika harga kosong 0 maka freelancer yang memberikan penawaran)
Deadline: (mm/dd/yyyy) Simpan Sebagai

: (Draf/Publish) Upload konsep desain (format jpg, maks 500KB) :

(Jika sudah punya konsep silahkan upload)Sistem akan menampilkan alert

“tidak boleh

kosong” pada field Nama Projek, Deskripsi dan Deadline. Sesuai harapan Valid

5 Mengisi Deadline.

Nama Projek, Deskripsi, Harga, Simpan sebagai dan Upload konsep desain
(format jpg, maks

500KB) tidak di isi, kemudian tombol simpan di klik. Nama Projek: (Kosong) Deskripsi: (kosong)
Kategori: (kosong)

Harga: (Jika harga kosong 0 maka freelancer yang memberikan penawaran) Deadline: 12/25/2019

Simpan Sebagai

: (Draf/Publish) Upload konsep desain (format jpg, maks 500KB) :

(Jika sudah punya konsep silahkan upload)Sistem akan menampilkan alert “Kategori
harus dipilih minimal 1 buah “ pada field kategori dan

“tidak boleh

kosong” pada field Nama Projek dan Deskripsi. Sesuai harapan Valid

6 Mengisi Nama Projek, Deskripsi, Kategori, Harga, Deadline, Simpan

sebagai dan Upload konsep desain (format
jpg, maks 500KB) dengan benar, kemudian tombol
simpan di klik. Nama Projek: Creative Deisgn Deskripsi: Membuat logo
creative design Kategori: Logo Harga: (Jika harga kosong 0 maka freelancer yang
memberikan penawaran) Deadline: 12/25/2019

Simpan Sebagai
: (Draf/Publish) Upload konsep desain (format jpg, maks 500KB) :

Contohlogo.jpg Sistem akan

menerima input dan data projek disimpan. Sesuai harapan Valid

8. Form Freelancer Tambah Portofolio

Tabel III.21. Hasil Blackbox Testing Form Admin Tambah Portofolio

No Skenario

Pengujian Test Case Hasil yang

diharapkan Hasil

pengujian Kesimpulan

1 Judul Karya, Kategori, Deskripsi dan

Contoh karya

tidak diisi, kemudian tombol simpan di klik. Judul Karya: (kosong) Kategori:
(logo/kaos/post op,banner,kema san produk,

kartu nama, kalender) Deskripsi: (kosong) Contoh Karya (format

jpg, max 200KB): (kosong) Sistem akan menampilkan alert “tidak
boleh

kosong” pada field Judul Karya dan Contoh Karya. Sesuai harapan Valid

2 MengisiJudul Karya.

Kategori, Deskripsi dan

Contoh karya

tidak diisi, kemudian tombol simpan di klik. Judul Karya: Creative Design
Kategori: (logo/kaos/post op,banner,kema san produk,

kartu nama, kalender) Deskripsi: (kosong) Contoh Karya (format

jpg, max 200KB): (kosong) Sistem akan menampilkan alert “tidak
boleh

kosong” pada field Contoh Karya, Sesuai harapan Valid

3 Mengisi Kategori. Judul Karya, Deskripsi dan

Contoh karya

tidak diisi, kemudian tombol simpan di klik. Judul Karya: (kosong) Kategori:
logo Deskripsi: (kosong) Contoh Karya (format jpg, max
200KB): (kosong) Sistem akan menampilkan alert “tidak boleh

kosong” pada field Judul Karya, dan Contoh karya. Sesuai harapan Valid
4 Mengisi Deskripsi. Judul Karya, Kategori dan Contoh

karya tidak diisi, kemudian tombol simpan

di klik. Judul Karya: (kosong) Kategori: (logo/kaos/post op,banner,kema san produk,

kartu nama, kalender) Sistem akan menampilkan alert “tidak boleh

kosong” pada field Judul Karya, dan Contoh karya. Sesuai harapan Valid

Deskripsi: hasil karya saya membuat logo creative design

Contoh Karya (format jpg, max 200KB): (kosong)

5 Mengisi Contoh Karya. Judul Karya, Kategori dan Deskripsi

tidak diisi, kemudian tombol simpan di klik. Judul Karya: (kosong) Kategori:
(logo/kaos/post op,banner,kema san produk,

kartu nama, kalender) Deskripsi: (kosong) Contoh Karya (format

jpg, max 200KB): creativedesign.j pg Sistem akan menampilkan alert
“tidak boleh

kosong” pada

field Judul Karya. Sesuai harapan Valid

6 MengisiJudul Karya, Kategori, Deskripsi dan

Contoh karya dengan benar, kemudian tombol simpan di klik.

Judul Karya: Creative Design Kategori: logo Deskripsi: : hasil karya
saya membuat logo creative design Contoh Karya (format
jpg, max 200KB): creativedesign.j pg Sistem akan

menerima input dan data portofolio disimpan. Sesuai harapan Valid

9. Form Perusahaan Konfirmasi Pembayaran

Tabel III.22. Hasil Blackbox Testing Form Perusahaan Konfirmasi Pembayaran

No Skenario

Pengujian Test Case Hasil yang

diharapkan Hasil

pengujian Kesimpulan
1 Dibayar ke Bank, Ditransfer dari bank, Pemilik
rekening, Tanggal bayar

dan Upload Bukti Transfer Dibayar ke Bank: BNI | 0871158067 /

Mandiri| 1800000133019

(otomatis) Ditransfer dari bank: (kosong) Sistem akan menampilkan alert “tidak
boleh

kosong” pada field Ditransfer dari bank, Pemilik rekening, dan

Tanggal bayar. Sesuai harapan Valid

(format jpg, maks 200KB) tidak diisi,

kemudian tombol simpan di klik. Pemilik rekening: (kosong) Tanggal bayar :
(mm/dd/yyyy) Bukti Transfer (format jpg, maks 200KB): (kosong)

2 MengisiDibayar ke Sistem akan Sesuai Valid

Ditransfer dari Bank: BNI | menampilkan alert harapan

bank. Dibayar 0871158067 / “tidak boleh

ke Bank, Mandiri| kosong” pada

Pemilik 1800000133019 field Pemilik

rekening, (otomatis) rekening, dan

Tanggal bayar Ditransfer dari Tanggal bayar.

dan Upload bank: BNI

Bukti Transfer Pemilik

(format jpg, rekening:

maks 200KB) (kosong)

tidak diisi, Tanggal bayar :

kemudian (mm/dd/yyyy)

tombol simpan Bukti Transfer

di klik. (format jpg,

maks 200KB):

(kosong)

3 Mengisi Pemilik Dibayar ke Sistem akan Sesuai Valid

rekening. Bank: BNI | menampilkan alert harapan

 Dibayar ke 0871158067 / “tidak boleh

Bank, Mandiri| kosong” pada

Ditransfer dari 1800000133019 field Ditransfer

bank, Tanggal (otomatis) dari bank, dan

bayar dan Ditransfer dari Tanggal bayar.

Upload Bukti bank: (kosong)

Transfer (format Pemilik

jpg, maks rekening: Farah

200KB) tidak Tanggal bayar :

diisi, kemudian (mm/dd/yyyy)

tombol simpan Bukti Transfer

di klik. (format jpg,

maks 200KB):

(kosong)

4 MengisiDibayar ke Sistem akan Sesuai Valid

Tanggal bayar. Bank: BNI | menampilkan alert harapan

Dibayar ke 0871158067 / “tidak boleh

Bank, Mandiri| kosong” pada

Ditransfer dari 1800000133019 field Ditransfer

bank, Pemilik (otomatis) dari bank, dan

rekening dan Ditransfer dari Pemilik rekening.

Upload Bukti bank: (kosong)

Transfer (format Pemilik

jpg, maks

200KB) tidak diisi, kemudian tombol simpan di klik. rekening: (kosong) Tanggal bayar :
12/25/1998

Bukti Transfer (format jpg, maks 200KB): (kosong)

5 Memilih Dibayar ke Sistem akan Sesuai Valid

Dibayar ke Bank: BNI | menampilkan alert harapan

 Bank, 0871158067 “gagal meng-

Ditransfer dari Ditransfer dari upload

bank, Pemilik bank: BRI pembayaran data.

rekening dan Pemilik Silahkan diulangi

Tanggal bayar. rekening: Farah lagi”

Upload Bukti Tanggal bayar :

Transfer (format 12/25/1998

jpg, maks Bukti Transfer

200KB) tidak (format jpg,

diisi, kemudian maks 200KB):

tombol simpan (kosong)

di klik.

6 MengisiDibayar ke Sistem akan Sesuai Valid

Dibayar ke Bank: BNI | menerima input harapan

Bank, 0871158067 dan data

Ditransfer dari Ditransfer dari konfirmasi

bank, Pemilik bank: BRI pembayaran

rekening, Pemilik disimpan.

Tanggal bayar rekening: Farah

dan Upload Tanggal bayar :

Bukti Transfer 12/25/1998

(format jpg, Bukti Transfer

maks 200KB) (format jpg,

dengan benar, maks 200KB):

kemudian (kosong)

tombol simpan

di klik.

10. Form Freelancer Meng-upload Hasil Desain

Tabel III.23. Hasil Blackbox Testing Form Freelancer Meng-upload Hasil Desain

No Skenario

Pengujian Test Case Hasil yang

diharapkan Hasil

pengujian Kesimpulan

1 Keterangan, Upload hasil Desain (format zip, maks 5MB) danUpload preview
desain

(format jpg atau png, maks Keterangan: (kosong) Upload hasil Desain (format zip,
maks 5MB): (kosong)

Upload preview desain (format Sistem akan menampilkan alert “tidak boleh

kosong” pada setiap field. Sesuai harapan Valid

200KB) tidak diisi, kemudian tombol simpan di klik. jpg atau png, maks 200KB): (kosong)

2 MengisiKeterangan: Sistem akan Sesuai Valid

Keterangan. Desain sudah menampilkan alert harapan

Upload hasil sesuai dengan “tidak boleh

Desain (format apa yang anda kosong” pada

zip, maks 5MB) inginkan, field Upload hasil

dan Upload silahkan ajukan Desain (format

preview desain revisi bila ada zip, maks 5MB)

(format jpg atau kekurangan dan Upload

png, maks Upload hasil previewdesain

200KB) tidak Desain (format (format jpg atau

diisi, kemudian zip, maks png, maks

tombol simpan 5MB): (kosong) 200KB).

di klik. Upload preview

desain (format

jpg atau png,

maks 200KB):

(kosong)
3 Mengisi Upload Keterangan: Sistem akan Sesuai Valid

hasil Desain (kosong) menampilkan alert harapan

(format zip, Upload hasil “tidak boleh

maks 5MB). Desain (format kosong” pada

Keterangan dan zip, maks field Keterangan

Upload preview 5MB): dari bank, dan

desain (format creative.zip Upload preview

jpg atau png, Upload preview desain (format jpg

maks 200KB) desain (format atau png, maks

tidak diisi, jpg atau png, 200KB).

kemudian maks 200KB):

tombol simpan (kosong)

di klik.

4 Mengisi Upload Keterangan: Sistem akan Sesuai Valid

preview desain (kosong) menampilkan alert harapan

(format jpg atau Upload hasil “tidak boleh

png, maks Desain (format kosong” pada

200KB). zip, maks field Keterangan

Keterangan dan 5MB): (kosong) dan Upload hasil

Upload hasil Upload preview Desain (format

Desain (format desain (format zip, maks 5MB)

zip, maks 5MB) jpg atau png, dan Upload

dan tidak diisi, maks 200KB): previewdesain

kemudian creative.png (format jpg atau

tombol simpan png, maks

di klik. 200KB).

5 Mengisi Keterangan, Upload hasil Desain (format zip, maks 5MB) dan
Upload preview desain (format jpg atau png, maks 200KB) dengan benar,
kemudian tombol simpan di klik. Keterangan: Desain sudah sesuai dengan apa
yang anda inginkan, silahkan ajukan revisi bila ada kekurangan Upload
hasil Desain (format zip, maks 5MB):

creative.zips Upload preview desain (format jpg atau png, maks

200KB):

creative.png Sistem akan

menerima input dan data upload hasil desain disimpan. Sesuai harapan Valid

11. Form Perusahaan Mengajukan Revisi Desain

Tabel III.24. Hasil Blackbox Testing Form Perusahaan Mengajukan Revisi Desain

No Skenario

Pengujian Test Case Hasil yang

diharapkan Hasil

pengujian Kesimpulan

1 Catatan untuk freelancer tidak diisi, kemudian tombol simpan di klik. Catatan untuk
freelancer: (kosong) Sistem akan menampilkan alert “tidak boleh

kosong” pada field Catatan untuk freelancer. Sesuai harapan Valid

2 Mengisi Catatan untuk freelancer dengan benar, kemudian tombol

simpan di klik. Catatan untuk freelancer: tolong warnanya diganti Sistem akan

menerima input dan data catatan revisi desain disimpan. Sesuai harapan Valid

12. Form Respon Admin di Detail Pelanggaran Portofolio

Tabel III.25. Hasil Blackbox Testing Form Perusahaan Mengajukan Revisi Desain

No Skenario

Pengujian Test Case Hasil yang

diharapkan Hasil

pengujian Kesimpulan

1 Hasil Verifikasi dan Alasan

tidak diisi, kemudian tombol simpan di klik. Hasil Verifikasi: (Tidak terbukti / Terbukti)
Alasan: (kosong) Sistem akan menampilkan alert “tidak boleh

kosong” pada
field Alasan. Sesuai harapan Valid

2 Mengisi Hasil Verifikasi dan Alasan dengan benar, kemudian

tombol simpan di klik. Hasil Verifikasi: Tidak terbukti Alasan: Bukti kurang kuat Sistem
akan

menerima input dan data respon admin disimpan. Sesuai harapan Valid

13. Form Perusahaan dan Freelancer Lupa Password

Tabel III.26. Hasil Blackbox Testing Form Perusahaan dan Freelancer Lupa

Password

No Skenario

Pengujian Test Case Hasil yang

diharapkan Hasil

pengujian Kesimpulan

1 Email tidak diisi, kemudian tombol lanjutkan di klik. Email (gunakan akun
Gmail) : (kosong) Sistem akan menampilkan alert “tidak boleh

kosong” pada

field Email

(gunakan akun Gmail). Sesuai harapan Valid

2 Mengisiemail salah, kemudian tombol lanjutkan di klik. Email (gunakan akun

Gmail) : (salah) Sistem akan menampilkan alert “Email tidak terdaftar…” Sesuai harapan
Valid

2 Mengisi email dengan benar, kemudian tombol lanjutkan di

klik. Email (gunakan akun Gmail) : (benar) Sistem akan menampilkan alert “Kami telah

mengirim email berisi password

baru, silahkan periksa email Anda” Sesuai harapan Valid

14. Form Pendaftaran Freelancer

Tabel III.27. Hasil Blackbox Testing Form Pendaftaran Freelancer

No Skenario

Pengujian Test Case Hasil yang

diharapkan Hasil
pengujian Kesimpulan

1 Nama Lengkap

(sesuai KTP), Alamat, Kota/Kabupaten, Provinsi, Telepon WA (tanpa 0 di depan),Email

(gunakan akun Gmail), Password, Nama Bank, No Rekening, Atas Nama tidak di isi , kemudian
tombol kirim di klik. Nama Lengkap (sesuai KTP): (kosong)

Alamat: (kosong) Kota/Kabupaten: (kosong) Provinsi: (kosong)

Telepon WA

(tanpa 0 di depan): (kosong) Email (gunakan akun Gmail): (kosong)

Password: (kosong)

Nama Bank: (kosong)

No Rekening: (kosong)

Atas Nama:

(kosong) Sistem akan menampilkan alert “tidak boleh kosong” pada

setiap field. Sesuai harapan Valid

2 Mengisi Nama Lengkap (sesuai KTP), Alamat, Kota/Kabupaten,

Provinsi, Telepon WA (tanpa 0 di depan), Email

(gunakan akun Gmail), Password, Nama Bank, No Rekening, Atas Nama kemudian tombol kirim di
klik. Nama Lengkap (sesuai KTP): Imam Purwanto Alamat: Jl. Jend Sudirman No 99
Kota/Kabupaten: Purwokerto Provinsi: Jawa Tengah

Telepon WA

(tanpa 0 di depan): 85602332013

Email (gunakan akun Gmail): imampurwanto77 @gmail.com Password:

12345 Nama Bank: BNI No Rekening: 1234567890

Atas Nama: Imam Purwanto Sistem akan menampilkan alert “Kami telah
mengirim email verifikasi, silahkan buka email anda

dan segera lakukan verifikasi email dengan mengklik link yang tersedia”. Sesuai
harapan Valid

15. Form Pendaftaran Perusahaan

Tabel III.28. Hasil Blackbox Testing Form Pendaftaran Perusahaan

No Skenario

Pengujian Test Case Hasil yang

diharapkan Hasil
pengujian Kesimpulan

1 Nama Perusahaan (sesuai KTP), Alamat, Kota/Kabupaten, Provinsi,

Telepon Kantor (termasuk kode wilayah contoh: 0218989898),

Nama Anda (pendaftar), Jabatan di

perusahaan, Telepon WA Anda (Tanpa 0 didepan), Email(gunakan

akun Gmail), Password tidak di isi, kemudian tombol kirim di klik. Nama Perusahaan
(sesuai KTP): (kosong)

Alamat: (kosong) Kota/Kabupaten: (kosong) Provinsi: (kosong)

Telepon Kantor (termasuk kode wilayah contoh : 0218989898):

(kosong)

Nama Anda (pendaftar): (kosong)

Jabatan di perusahaan: (kosong)

Telepon WA Anda (Tanpa 0 didepan): (kosong)

Email (gunakan akun Gmail): (kosong)

Password: (kosong) Sistem akan menampilkan alert “tidak boleh kosong” pada
setiap field. Sesuai harapan Valid

2 Mengisi Nama Perusahaan (sesuai KTP), Alamat, Kota/Kabupaten,

Provinsi, Telepon Kantor (termasuk kode wilayah contoh: 0218989898),

Nama Anda (pendaftar), Jabatan di

perusahaan, Telepon WA Anda (Tanpa 0 didepan), Email(gunakan

akun Gmail) kemudian tombol kirim di klik. Nama Perusahaan (sesuai KTP): KSP

Alamat: Purwokerto Selatan Kota/Kabupaten: Banyumas Provinsi: Jawa Tengah

Telepon Kantor (termasuk kode wilayah contoh : 0218989898):

0218989898

Nama Anda (pendaftar):

Haris Yudha

Jabatan di perusahaan: Sistem akan menampilkan alert “Kami telah mengirim email
verifikasi, silahkan buka email anda

dan segera lakukan verifikasi email dengan mengklik link yang tersedia”. Sesuai
harapan Valid

Manajer
Telepon WA Anda (Tanpa 0 didepan): 85602332014

Email (gunakan akun Gmail): sonikochi.hunter @gmail.com

Password: 12345