PERANCANGAN WEB

ANALISA SISTEM INFORMASI PENJUALAN FASHION SECARA ONLINE

LAPORAN KULIAH KERJA PRAKTEK

Diajukan Untuk Memenuhi Mata Kuliah Perancangan WEB
Pada Program Diploma III

Disusun Oleh :
Areki Ginanjar (12140790)
Apipudin (12140925)
Aris Rohim Amaliamsyah (12142479)

Jurusan Manajemen Informatika Akademi Manajemen Informatika Bina Sarana Informatika

Warung Jati
2016

PERSETUJUAN DAN PENGESAHAN LAPORAN KULIAH KERJA PRAKTEK

Kuliah kerja praktek ini telah disetujui dan disahkan serta diizinkan untuk dinilai pada
Periode : Tahun Akademik 2016/2017 di Semester V

DOSEN PEMBIMBING AKADEMIK

Kelas 12.5B.32

Ibu Suminten, M.Kom

PENILAI LAPORAN KULIAH KERJA PRAKTEK

Kuliah Kerja Praktek ini telah dinilai pada tanggal...................................................

PENILAI

( ................................................ )
Saran-saran dari penilai :
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................

KATA PENGANTAR
Puji syukur kami panjatkan kehadirat ALLAH SWT yang telah melimpahkan rahmat dan karuniaNya sehingga pada akhirnya kami dapat menyelesaikan tugas laporan kerja praktek ini dengan baik
dimana tugas laporan Kuliah Kerja Praktek ini penulis sajikan dalam bentuk buku yang sederhana,
adapun judul penulisan laporan kuliah kerja praktek yang kami ambil adalah sebagai berikut :
SISTEM INFORMASI BERBASIS WEB TOKO BAJU ONLINE
Tujuan penulisan kuliah kerja praktek ini dibuat untuk memenuhi salah satu mata kuliah perancangan
WEB pada program Diploma III ( D3 /S1) AMIK BSI. Sebagai bahan penulisan diambil berdasarkan
hasil penelitian, observasi dan beberapa sumber literatur yang mengandung penulisan ini. Kami
menyadari bahwa tanpa bimbingan dan dorongan dari semua pihak, maka penulisan laporan kuliah kerja
praktek ini tidak lancar, oleh karena itu pada kesempatan ini kami menyampaikan ucapan terima kasih
kepada:
1. Bapak Ir.Naba Aji Notoseputro selaku Direktur AMIK BSI
2. Ibu Suminten, M.Kom sebagai dosen pembimbing kuliah kerja praktek yang telah memberikan
bimbingan, arahan , saran serta dukungan kepada kami dalam menyelesaikan tugas ini.
3. Orang tua tercinta yang telah memberi dorongan moril maupun spiritual kepada kami
4. Serta rekan-rekan sejawat dan seperjuangan yang ikut memberikan bantuannya dalam pembuatan
kuliah kerja praktek, khususnya MI kelas 12.5B.32 Serta semua pihak yang terlalu banyak untuk
disebut satu persatu sehingga terwujudnya penulisan ini. Kami menyadari bahwa penulisan
laporan kuliah kerja praktek ini masih jauh sekali dan belum sempurna, untuk itu kami mohon
kritik dan saran yang bersifat membangun demi kesempurnaan kami sebagai penulis dimasa akan
datang.
Akhir kata semoga makalah ini dapat berguna bagi kami khususnya, bagi para pembaca yang berniat pada
umumnya, Amin Ya RobbalAlamin.

Jakarta, 07 Oktober 2016

Penulis

DAFTAR ISI
BAB I
1.1. latar belakang
1.2. Maksus dan tujuan
1.3. Metode Penelitian
1. Metode Penelitian
a. Wawancara
b. Observasi
c. Studi litareratur (Buku, judul, website, dan buku)
2. Metode Pengembangan Perangkat Lunak (Harus ada buku referensi)
- Soekanto dan Solahudin (Metode Waterfall)
a. Analisa
b. Design: Merancang design, struktur navigasi, LRS, ERD.
c. Pengkodean : Membuat codding : server (XAMPP) browser (Mozila)
d. Pengujian : menggunakan blackbox
1.4. Ruang lingkup (Front end dan Back end)
Front end (Pengunjung) dan Back end (Admin)

BAB II
2.1. Konsep Dasar WEB
2.1.1. Website
2.1.2. Web browser
2.1.3. Web Server
2.1.4. Bahasa Pemrograman (HTML, PHP, MySQL, Javascript, CMS)
2.2. Teori pendukung perangkat lunak
2.2.1. Metode pengembangan perngakat lunak model waterfall

2.2.2. Struktur Navigasi

2.2.3. Basis Data
2.2.4. ERD (Komponen ERD, Kardinality, Macam kunci (candidatekey, foreignkey, primarykey)
2.2.4. LRS (pengertian, transformasi ERD ke LRS)

BAB III PEMBAHASAN

2.1. Analisis kebutuhan : Fungsi untuk pengunjung, member(mahasiswa) dan admin.
2.2. Perancangan perangkat lunak
2.2.1. Rancangan Antarmuka (visio, paradigm)
2.2.2. Rancangan Basis Data(ERD, LRS, Spesifikasi file (keseluruhan database))
2.2.3. Rancangan Navigasi (Front end :Pengguna/user dan Back end : admin)
2.3. Implementasi (Screen shoot program) dan Pengujian (black box)

BAB IV. PENUTUP

3.1. Kesimpulan
3.2. Saran

Daftar Pustaka

BAB I
1.1.

Latar Belakang
Pada saat ini teknologi informasi mengalami perkembangan yang sangat cepat, seiring
dengan kebutuhan manusia yang juga terus bertambah. Teknologi memegang peranan yang
sangat penting bagi kehidupan manusia. Saat ini, siapa saja yang tidak bisa mengikuti
perkembangan teknologi, maka dapat dipastikan akan menjadi orang terbelakang.
Jaman memang telah berubah begitu pula kita harus dapat mengikuti perkembangannya.
Teknologi internet merupakan salah satu bidang yang mengalami perkembangan sangat
cepat. Telah banyak sektor yang menerapkan teknologi ini, salah satunya dalam bidang
perdagangan. Lalu muncul perdagangan dengan internet sebagai sarana utama, yaitu ecommerce.
Implementasi e-commerce dalam dunia bisnis salah satunya adalah dengan banyak
bermunculan situs-situs penjualan secara online atau berbasis web. Hal ini membawa kita
dalam budaya baru dalam melakukan transaksi yang tidak lagi konvensional, melainkan
membawa kita kepada transaksi dunia maya. Disadari atau tidak penerapan e-commerce ini
telah berdampak pada efisiensi dan efektifitas transaksi, serta dapat mengangkat produk atau
citra
dari
perusahaan
yang
menerapkan
konsep
tersebut.
Perusahaan akan lebih maju dan cepat berkembang, karena pasar yang dibidik meliputi pasar
lokal maupun internasional dan tentu saja relasi yang dibangun menjadi lebih luas. Hal ini
akan berakibat pada kemudahan dalam pengembangan perusahaan.
Mengangkat dari rumusan masalah tersebut, kami membuat sebuah tema dalam bidang ecommerce ini yaitu sistemm informasi berbasis web penjualan toko baju online. Dikarenakan
beberapa factor kebutujan manusia yang ingin serba cepat, instan, mendapat kualitas barang
yang baik, pemesanan yang efektif dan pengiriman barang yang aman beserta harga yang
terjangkau oleh pembeli atau kalangan masyarakat.

1.2.

Maksud dan Tujuan

Maksud pembuatan program ini adalah untuk memberikan kemudahan kepada konsumen
dalam melakukan transaksi pembelian baju dengan menggunakan internet.
Tujuan pembuatan program ini adalah untuk menerapkan program aplikasi yang
berbasiskan web dalam bidang bisnis sebagai sarana untuk efisiensi dan penerapan teknologi
informasi dalam dunia perdagangan.

1.3.

Metode Penelitian
Metode ini bertujuan untuk mencari literature yang berisi teori-teori yang berkaitan
dengan masalah yang dibahas. Dalam hal ini kami melakukan pencarian serta pembelajaran
dari berbagai macam literature dan dokumen yang berkaitan dengan perancangan website.
(observasi secara online).

Metode Pengembangan

Metode yang digunakan pada pengembangan perangkat lunak ini menggunakan model
Waterfall. Model SDLC air terjun (Waterfall) sering juga disebut model sekuensial linier
(Sequential Linear) atau alur hidup klasik (Classic Life Cycle). Menurut Sukamto dan M.
Shalahuddin (2013:28)
Model air terjun menyediakan pendekatan alur hidup perangkat lunak secara sekuensial atau
terurut dimulai dari analisi, desain, pengkodean, pengujian, dan tahap pendukung
(Support).
Dengan keterangan sebagai berikut:
A. Analisa
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.
B. Desain
Tahap ini mentranslasi kebutuhan perangkat lunak dari tahap analisis kebutuhan ke
representasi desain agar dapat diimplementasikan menjadi program ada tahap
selanjutnya. Tahap ini dalam web yang dibuat menggunakan struktur navigasi linear
kemudian metode pemodelan basis data dikembangkan dengan menggunakan ERD dan
LRS dalam perancangan web tersebut.
C. 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. Pembuatan pengkodean program menggunakan server XAMPP dan browser
MOZILA, Deamweaver.
D. Pengujian
Pengujian fokus pada perangkat lunak secara 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. Pengujian web ini menggunakan metode black box, merupakan pengujian
yang berfokus pada spesifikasi fungsional dari perangkat lunak, tester dapat
mendefinisikan kumpulan kondisi input dan melakukan pengetesan pada spesifikasi
fungsional program.

E. Pendukung (Support) atau Pemeliharaan (Maintenance)

Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan ketika sudah
dikirim ke user. Perubahan bisa terjadi karena adanya kesalahan yang muncul dan tidak
terdeteksi saat pengujian atau perangkat lunak harus beradaptasi dengan lingkungan baru.
Pada tahap ini proses akan dilakukan kembali sesuai urutan metode waterfall.
1.4.

Ruang Lingkup
front-end adalah tampilan web yang dapat dilihat oleh pengunjung ataupun customer.
Sedangkan bagian back-end adalah tampilan administrator web dalam mengelola konten
web, keamanan web dan konektivitas dari situs ke server.

BAB II

2.1. Konsep Dasar WEB

2.1.1. Website
Website adalah sering juga disebut Web, dapat diartikan suatu kumpulan-kumpulan
halaman yang menampilkan berbagai macam informasi teks, data, gambar diam ataupun
bergerak, data animasi, suara, video maupun gabungan dari semuanya, baik itu yang
bersifat statis maupun yang dinamis, yang dimana membentuk satu rangkaian bangunan
yang saling berkaitan dimana masing-masing dihubungkan dengan jaringan halaman atau
hyperlink.
Atau definisi website adalah kumpulan dari berbagai macam halaman situs, yang
terangkum didalam sebuah domain atau juga subdomain, yang lebih tempatnya berada di
dalam WWW (World Wide Web) yang tentunya terdapat di dalam Internet.
Halaman website biasanya berupa dokumen yang ditulis dalam format Hyper Text
Markup Language (HTML), yang bisa diakses melalui HTTP, HTTP adalah suatu
protokol yang menyampaikan berbagai informasi dari server website untuk ditampilkan
kepada para user atau pemakai melalui web browser.
Jenis-jenis website ada 3 (tiga) macam diantaranya, bisa dibaca dibawah ini:

2.1.2.

Website Statis adalah suatu website yang mempunyai halaman yang tidak
berubah. Yang artinya adalah untuk melakukan sebuah perubahan pada suatu
halaman hanya bisa dilakukan secara manual yitu dengan cara mengedit kodekode yang menjadi struktur dari website itu sendiri.

Website Dinamis adalah merupakan suatu website yang secara strukturnya

diperuntukan untuk update sesering mungkin. Biasanya selain dimana utamanya
yang bisa diakses oleh para pengguna (user) pada umumnya, juga telah
disediakan halaman backend yaitu untuk mengedit konten dari website tersebut.
Contoh dari website dinamis seperti web berita yang didalamnya terdapat
fasilitas berita, dsb.

Website Interaktif adalah suatu website yang memang pada saat ini memang
terkenal. Contohnya website interaktif seperti forum dan blog. Di website ini
para pengguna bisa berinteraksi dan juga beradu argumen mengenai apa yang
menjadi pemikiran mereka.

WEB Browser
Web Browser adalah suatu program atau software yang digunakan untuk menjelajahi
internet atau untuk mencari informasi dari suatu web yang tersimpan didalam komputer.
Web Browser merupakan software untuk menampilkan halaman website (Internet

Explorer, Mozilla Firefox, Google Chrome, Opera, dll). Software dalam perancangan
web ini menggunapakan Google Chroom atau Mozila Firefox.

2.1.3. WEB Server

Pada dasarnya web server adalah salah satu elemen vital pada sebuah website,
dan sudah pasti memilki banyak sekali fungsi utama. Berikut ini adalah beberapa fungsi
utama dari sebuah web server :
a)

Untuk memproses permintaan user di sebuah web

b) Sebagai penyedia data dan juga informasi yang dimiliki oleh sebuah web
c)

Menyimpan konten sebuah website

d) Penentu kecepatan pemrosesan informasi dari sebuah halaman web

Halaman-halaman website yang diakses oleh user melalui browser disimpan pada web
server (Netscape Server, Microsoft IIS, Xitami, WebStar, Apache, dll).

2.1.4. Bahasa Pemrograman

Bahasa Pemrograman (programming language) adalah sebuah instruksi standar
untuk memerintah komputer agar menjalankan fungsi tertentu. Bahasa pemrograman ini
merupakan suatu himpunan dari aturan sintaks dan semantik yang dipakai untuk
mendefinisikan program komputer. Bahasa pemrograman yang digunakan dalam
pembuatan web ini dengan menggunakan HTML dan PHP. Dan database menggunakan
MySQL.

2.2. Teori Pendukung Perangkat Lunak

2.2.1. Metode pengembangan perangkat lunak model waterfall
Metode yang digunakan pada pengembangan perangkat lunak ini menggunakan model
Waterfall. Model SDLC air terjun (Waterfall) sering juga disebut model sekuensial linier
(Sequential Linear) atau alur hidup klasik (Classic Life Cycle). Menurut Sukamto dan M.
Shalahuddin (2013:28) Model air terjun menyediakan pendekatan alur hidup perangkat lunak
secara sekuensial atau terurut dimulai dari analisi, desain, pengkodean, pengujian, dan tahap
pendukung (Support).

Sumber: Sukamto dan M.Shalahuddin (2013:28)

Gambar 1. Ilustrasi Model Waterfall

Dengan keterangan sebagai berikut:

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

Desain
Tahap ini mentranslasi kebutuhan perangkat lunak dari tahap analisis kebutuhan ke representasi
desain agar dapat diimplementasikan menjadi program ada tahap selanjutnya.

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.

Pengujian
Pengujian fokus pada perangkat lunak secara 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.

Macam-macam Struktur Navigasi pada Website:

1. Struktur Navigasi Linier
Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang berurut, yang
menampilkan satu demi satu tampilan layar secara berurut menurut urutannya.
Tampilan yang dapat ditampilkan pada sruktur jenis ini adalah satu halaman
sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau
dua halaman sesudahnya.

Struktur Navigasi Linier

2. Struktur Navigasi Non-Linier

Struktur navigasi non-linier atau struktur tidak berurut merupakan pengembangan dari
struktur navigasi linier. Pada struktur ini diperkenankan membuat navigasi
bercabang. Percabangan yang dibuat pada struktur nonlinier ini berbeda dengan
percabangan pada struktur hirarki, karena pada percabangan nonlinier ini walaupun
terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama
yaitu tidak ada Master Page dan Slave Page.

Struktur Navigasi Non-Linier

3. Struktur Navigasi Hirarki

Struktur navigasi hirarki biasa disebut struktur bercabang, merupakan suatu struktur
yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria
tertentu. Tampilan pada menu pertama akan disebut sebagai Master Page (halaman
utama pertama), halaman utama ini mempunyai halaman percabangan yang disebut
Slave Page (halaman pendukung). Jika salah satu halaman pendukung dipilih atau
diaktifkan, maka tampilan tersebut akan bernama Master Page (halaman utama
kedua), dan seterusnya. Pada struktur navigasi ini tidak diperkenankan adanya
tampilan secara linier.

Struktur Navigasi Hirarki

4. Struktur Navigasi Campuran

Struktur navigasi campuran merupakan gabungan dari ketiga struktur sebelumnya

yaitu linier, non-linier dan hirarki. Struktur navigasi ini juga biasa disebut dengan
struktur navigasi bebas. Struktur navigasi ini banyak digunakan dalam pembuatan
website karena struktur ini dapat digunakan dalam pembuatan website sehingga dapat
memberikan ke-interaksian yang lebih tinggi.

Struktur Navigasi Campuran