perancangan web sebagai media informasi dan...

PERANCANGAN WEB SEBAGAI MEDIA INFORMASI DAN PROMOSI PADA NANONI BOUTIQUE YOGYAKARTA

NASKAH PUBLIKASI

diajukan oleh

Vivi Yulianti Nur Aisyah

10.01.2752

kepada SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AMIKOM YOGYAKARTA YOGYAKARTA

2013

LEMBAR PERSETUJUAN

NASKAH PUBLIKASI

PERANCANGAN WEB SEBAGAI MEDIA INFORMASI DAN PROMOSI PADA NANONI BOUTIQUE YOGYAKARTA

disusun oleh

Vivi Yulianti Nur Aisyah 10.01.2752

Dosen Pembimbing

Anggit Dwi Hartanto, M.Kom. NIK.190000002

Tanggal, 11 Maret 2012

Ketua Jurusan Teknik Informatika

Hanif Al Fattah, M.Kom. NIK. 190302096

WEB DESIGNING AS INFORMATION MEDIA AND PROMOTION IN NANONI BOUTIQUE YOGYAKARTA

PERANCANGAN WEB SEBAGAI MEDIA INFORMASI DAN PROMOSI PADA NANONI

BOUTIQUE YOGYAKARTA

Vivi Yulianti Nur Aisyah Anggit Dwi Hartanto

Jurusan Teknik Informatika STMIK AMIKOM YOGYAKARTA

ABSTRACT

In this era of globalization, the Internet plays an important role in assisting and facilitating the activities or work in the world. With the web, someone quickly and easily obtain the information needed.

Nanoni Boutique is one of the clothing stores in Yogyakarta. Currently the promotion is done Nanoni Boutiques less effective, because they still use flyers taped to the board information. Based on the above issues, I'm going to design a web-based system that will be devoted to Nanoni Boutique.

So with this web-based design, Nanoni Boutique can easily provide information to the public online via the internet that can be accessed anytime and anywhere. This system will provide accurate information and reduce the cost of excessive promotion.

Keywords: Internet, Promotion, Website, Information

1. Pendahuluan

Nanoni Boutique adalah sebuah perusahaan yang bergerak dalam bidang garment

atau pakaian. Produk yang ditawarkan bervariasi, diantaranya pakaian wanita, dress, dan

aksesoris. Nanoni Boutique selama ini melakukan transaksi penjualan hanya secara

offline begitu juga media promosi yang digunakan.

Dorongan kemajuan teknologi untuk para pelaku usaha menciptakan strategi

membuat layanan informasi dan promosi dengan baik untuk menarik perhatian

konsumen. Kemudahan dan biaya akses yang relatif murah menjadikan internet sebagai

sarana untuk memenuhi kebutuhan utama. Bicara tentang internet, pasti tidak lepas dari

website. Website digunakan untuk mengenalkan suatu produk atau jasa layanan atau

disebut juga dengan promosi sebuah perusahaan kepada para pengguna internet. Untuk

itu website yang ditampilkan harus memiliki interface yang bagus,menarik, dan dinamis

sesuai dengan bidang yang dikelola oleh sebuah perusahaan.

Dari penjelasan di atas, sangatlah tepat jika website dapat diterapkan dan

digunakan sebagai media informasi dan promosi pada Nanoni Boutique. Dengan website

ini konsumen dapat lebih mudah mendapatkan informasi tentang produk-produk yang

ditawarkan oleh Nanoni Boutique. Konsumen juga dapat mengakses kapan dan dimana

saja selama ada jaringan internet. Dengan website ini konsumen juga lebih mudah untuk

memesan dan membeli barang serta membayarnya secara online tanpa harus datang

langsung ke Nanoni Boutique. Selain itu Nanoni Boutique juga dapat memperluas daerah

pemasaran tanpa harus mengeluarkan modal yang lebih besar. Dengan demikian, sistem

ini dapat menjadi alternative untuk meningkatkan pendapatan dan memenangkan

persaingan bisnis di dunia fashion.

2. Landasan Teori

2.1 Konsep Dasar Sistem

2.1.1 Definisi Sistem

Pengertian sistem secara umum adalah sekumpulan elemen-elemen yang saling

berhubungan untuk mencapai suatu tujuan. Sistem adalah sekelompok elemen yang

berintegrasi dengan maksud yang sama untuk mencapai suatu tujuan.1

2.2 Konsep Dasar Informasi

2.2.1 Pengertian Informasi

Informasi merupakan data yang diolah menjadi bentuk yang lebih berguna dan

lebih berarti bagi yang menerimanya.2 Informasi adalah data yang telah diproses

1 Raymond Mcloud, Jr. Sistem Informasi Managemen Jilid 1 (Edisi Bhs Indonesia),

2001,1996. PT. Prenhalindo, Jakarta. Hal.11.

sedemikian rupa sehingga meningkatkan pengetahuan seseorang yang menggunakan

data tersebut. Data adalah kenyataan yang menggambarkan suatu kejadian-kejadiann

yang nyata. Kejadian – kejadian (event) adalah sesuatu yang terjadi pada saat tertentu.

2.3 Konsep Dasar Sistem Informasi

Sistem Informasi merupakan kumpulan dari perangkat keras dan perangkat lunak

komputer serta perangkat manusia yang akan mengolah data menggunakan perangkat

keras dan perangkat lunak tersebut.

Selain itu sistem informasi dapat didefinisikan suatu sistem yang dibuat oleh

manusia yang terdiri dari komponen – komponen dalam organisasi untuk mencapai suatu

tujuan yaitu menyajikan informasi.

3. Gambaran Umum

3.1 Sejarah Nanoni Boutique

Latar belakang berdirinya Nanoni Boutique adalah didasari keinginan kuat untuk

menciptakan lapangan pekerjaan, sekaligus untuk memberikan pengalaman dalam

bidang usaha yang nyata di masyarakat.

Nanoni boutique adalah sebuah perusahaan yang bergerak dalam bidang garment

atau pakaian. Nanoni Boutique didirikan pada tahun 2011 yang beralamat di Jl.Kaliurang

rumah pribadi Ibu Galuh, kemudian berkembang dan sekarang beralamat di Jalan

Flamboyan No 37 Kios No 2 Gejayan Yogyakarta.

Tujuan didirikannya Nanoni Boutique adalah memudahkan para kaum wanita

mengikuti tren terbaru di dunia fashion dengan mengedepankan kualitas produk. Nanoni

Boutique juga mengedepankan kepercayaan dan kepuasan pelanggannya. Dengan

didirikan usaha tersebut, diharapkan dapat memenuhi kebutuhan masyarakat dalam

bidang sandang.

3.2 Visi dan Misi

Visi Nanoni Boutique adalah menjadi Butik terbaik di Yogyakarta yang mengikuti

trend terbaru dengan mengedepankan kepercayaan dan kepuasan pelanggan. Misi

Nanoni Boutique adalah menjual segala produk fashion untuk perempuan yang bermutu

tinggi dengan harga terjangkau.

2 Analisis dan Desain Sistem Informasi : Pendekatan Terstruktur Teori dan Praktik Aplikasi

Bisnis, Jogiyanto, 1989, Hal : 8.

3.3 Struktur Organisasi

Struktur organisasi pada Nanoni Boutique menggunakan bentuk struktur

organisasi top down. Struktur organisasinya terdiri dari : pimpinan, karyawan dan kurir.

3.4 Pelayanan Nanoni Boutique

Dalam memenuhi usaha Nanoni Boutique mempunyai berbagai macam pelayanan

yang ditawarkan kepada pembeli.

Adapun layanan yang ditawarkan antara lain : Dropship,Reseller,Grosir

Pengiriman barang dengan jasa pengiriman seperti Pos, JNE, TIKI.

4. Implementasi dan Pembahasan

4.1 Perancangan Unified Modelling Language (UML)

Unified Modelling Language (UML) merupakan sebuah notasi untuk

menspesifikasi, memvisualisasi, membangun dan mendokumentasikan rancangan dari

sebuah perangkat lunak.

4.1.1 Usecase Diagram

Use case diagram menunjukkan perilaku sistem, sub sistem dengan pengguna

luar.

4.1.2 Activity Diagram

Activity Diagram menggambarkan berbagai alur aktivitas dalam sistem yang

sedang dirancang, termasuk tindakan utama dan titik keputusan.

4.1.3 Class Diagram

Class diagram menggambarkan class-class utama yang ada dalam sistem.

4.1.4 Sequence Diagram

Sequence diagram digunakan untuk menunjukkan hubungan yang antara satu

objek dengan objek yang lain dan untuk mendeskripsikan pola komunikasi antar objek.

4.2 Perancangan Basis Data

4.2.1 Normalisasi

Normalisasi adalah proses penyusunan tabel-tabel yang tidak redundan (double),

yang dapat menyebabkan anomaly pada saat operasi manipulasi data, seperti tambah,

ubah dan hapus.

4.2.1.1 Bentuk tidak Normal / Universal

Bentuk ini merupakan kumpulan data yang direkam, tidak ada keharusan

mengikuti format tertentu, dapat saja tidak lengkap dan terduplikasi.

4.2.1.2 Normalisasi Bentuk Pertama

Normalisasi pertama memiliki ciri yaitu tidak ada atribut yang bernilai ganda atau

atribut yang duplikat. Berikut tabel normalisasi pertama.

4.2.1.2 Normalisasi Bentuk Kedua

Normalisasi bentuk kedua terpenuhi jika pada sebuah tabel semua atribut yang

tidak termasuk dalam primary key memiliki ketergantungan fungsional pada primary key

secara utuh.

4.2.1.3 Normalisasi Bentuk Ketiga

Pada normalisasi bentuk ketiga semua field dan relasi berada pada bentuk

normalisasi kedua dan tidak adanya ketergantungan transitif dimana semua atribut bukan

kunci hanya tergantung pada atribut kunci primer secara menyeluruh.

4.2.1.4 Relasi Antar Tabel

Setelah bentuk normal pada normalisasi ketiga maka berikut ini adalah relasi antar

tabel yang menjelaskan tentang hubungan masing-masing tabel sehingga database

tersebut bisa bekerja dengan baik.

4.3 Perancangan Struktur Tabel

Database yang digunakan pada aplikasi ini dirancang dengan menggunakan

MySQL. Berikut tabel yang digunakan pada aplikasi ini:

Nama Field Type Ukuran Keterangan

uAdmin Varchar 45 User Admin

pAdmin Varchar 45 Password Admin

nAdmin Varchar 45 Nama Admin

mAdmin Varchar 45 Email Admin

Level Enum(‘sadm’,’adm’) Level Admin

Tabel 4.1 Administrator


idcpage Int 11 Id page

judulPage Varchar 50 Judul / nama page

isiPage Text Isi page

linkPage Varchar 50 Link page

Tabel 4. 2 Tabel Cmenus


idKategori Int 11 Id pada Kategori

namaKategori Varchar 50 Nama pada kategori

linkKategori Varchar 50 Link pada Kategori

Tabel 4. 3 Kategori


idKonfigurasi Int 11 Id pada Konfigurasi

namaKonfigurasi Varchar 50 Nama pada Konfigurasi

isiKonfigurasi Varchar 100 Isi pada Konfigurasi

Tabel 4. 4 Konfigurasi


idMember Int 11 id Member

mailMember Varchar 50 email member

passMember Varchar 32 password member

namaMember Varchar 100 nama member

tglLahirMember Date tanggal lahir member

jkMember Enum jenis kelamin member

telpHp Decimal 12,0 no telp member

alamatMember Text alamat member

kotaMember Varchar 50 kota member

kposMember Int 8 kode pos member

negaraMember Enum Negara member

identitas Varchar 50 identitas member

idProvinsi Int 11 id provinsi

Tabel 4. 1 Member


idMitra Int 11 id Supplier

namaMitra Varchar 50 nama supplier

noHp Decimal 12,0 no telp supplier

alamat Text alamat supplier

Tabel 4. 6 Mitra


idPembayaran Int 11 id Pembayaran


waktuPembayaran Datetime waktu pembayaran

bankAsal Varchar 50 bank asal

anRek Varchar 100 atas nama rekening

jmlPembayaran Decimal 18,2 jumlah bayar

bankTujuan Varchar 50 bank tujuan

statusPembayaran Enum status pembayaran

NoRekening Varchar 25 nomer rekening

transferVia Varchar 30 via transfer yang digunakan

noResi Varchar 50 nomer resi

Tabel 4. 7 Pembayaran


idPembelian Int 11 id Pembelian


waktuPembelian datetime waktu pembelian

jmlProduk Int 3 jumlah produk

jmlHarga decimal 18,2 jumlah harga

statusPembelian Enum status pembelian

Member_idMember Int 11 member foreign key id member

Produk_idProduk Int 11 produk foreign key id id produk

idPembayaran int 11 foreign key id pembayaran

Tabel 4. 8 Pembelian


idProduk int 11 id produk

namaProduk varchar 100 nama produk

beratProduk decimal 3,2 berat produk

hargaProduk decimal 18,2 harga produk

stokProduk int 3 stok produk

diskonProduk double 5,2 diskon produk

linkProduk varchar 100 link produk

tanggal datetime tanggal

desainer varchar 60 desainer

deskripsi text deskripsi

mitra_idmitra int 11 mitra foreign key mitra

gambar varchar 255 gambar produk

Kategori_idKategori int 11 kategori foreign key id kategori

Tabel 4. 9 Produk


Produk_idProduk int 11 produk foreign key id id produk

Mitra_ idMitra int 11 member foreign key id member

Tabel 4. 10 produk_has_mitra


IDProvinsi int 11 id provinsi untuk ongkir

namaProvinsi varchar 50 nama Provinsi

biayaKirim int 18 biaya kirim

Tabel 4. 11 Provinsi

4.4 Perancangan Tampilan

Perancangan tampilan adalah rancangan yang menggambarkan tampilan

aplikasi pada saat digunakan oleh user maupun administrator.

4.5 Implementasi Sistem

Kegiatan implementasi sistem dilakukan dengan dasar kegiatan yang telah

direncanakan dalam rencana implementasi.

A. Interface User

Interface User dibuat untuk menampilkan produk dan segala sesuatu yang

dibutuhkan oleh user. Desain tersebut pada prinsipnya terletak pada menu yang

ditampilkan untuk user.

Gambar 4. 1 Halaman Home User

B. Interface Administrator

Desain interface admin dibuat khusus hanya untuk administrator, ada dua

administrator yaitu admin dan super admin. Admin hanya digunakan untuk karyawan

mengolah data kategori produk dan ongkos kirim sedangkan super admin bisa mengolah

semua data yang ada pada web. Desain interface admin digunakan untuk mengupdate

informasi pada web.

a. Tampilan Login Administrator

Gambar 4. 1 Login Administrator

b. Tampilan Home Admin

Interface halaman admin berisi menu-menu yang hanya bisa diakses oleh admin

biasa. Admin bisa mengolah data yang ada pada menu menu home, kategori, produk

dan Ongkos kirim.

Gambar 4.3 Home Admin

c. Tampilan Super Admin

Interface super admin ini berisi semua menu yang tersedia, super admin ini bisa

mengolah semua data pada website.

Gambar 4. 2 Home Super Admin

4.6 Pengujian

Pengujian perangkat lunak adalah elemen kritis dari jaminan kualitas suatu

perangkat lunak dan merepresentasikan spesifikasi, desain dan pengkodeannya. Berikut

ini adalah metode pengujian perangkat lunak yang sering digunakan :

4.6.1 Black Box Testing

Black-box testing merupakan pengujian yang dilakukan dengan mengamati hasil

ekseskusi dari input data yang dipilih.

Form Menu Proses Keterangan

Tambah Edit Hapus Simpan

Admin Berhasil

Konfigurasi - - Berhasil

Kategori Berhasil

Mitra Berhasil

Custom Page Berhasil

Produk Berhasil

Data Member Berhasil

Pembelian Konfirmasi Berhasil

Pembayaran Konfirmasi Berhasil

OngkosKirim Berhasil

Tabel 4. 12 Black Box Testing

4.6.2 White Box Testing

White-box testing merupakan cara pengujian dengan melihat ke dalam modul

untuk meneliti kode-kode program yang ada, dan menganalisis apakah ada kesalahan

atau tidak. Jika ada output yang tidak sesuai dengan input maka akan di cek lagi kode –

kode program yang ada pada modul.

Uji coba white box yang dilakukan salah satunya pada input data produk sebagai

berikut :

Gambar 4. 3 White Box Testing

4.7 Registrasi Domain

Registrasi domain merupakan tahap pertama untuk pengaktifan website yang

akan di-onlinekan. Tahap-tahap yang harus dilakukan adalah sebagai berikut:

1. Mendaftar akun untuk melakukan pemesanan domain.

2. Mengecek domain yang akan digunakan terlebih dahulu.

3. Memilih domain, dan medaftarkan domain yang akan digunakan.

4. Konfigusi domain. Konfigurasi domain berisi layanan tambahan dan

menemukan namaserver yang akan digunakan.

5. Konfirmasi Pemesanan berisi ringkasan pesanan yang akan diselesaikan

supaya domain berhasil registrasi.

6. Selesai pemesanan adalah tahap terakhir bahwa registrasi berhasil.

Setelah selesai melakukan pembelian domain, akan menerima email verifikasi

bahwa domain siap digunakan.

4.8 Mekanisme Upload

Setelah semua rancangan sudah siap muka, langkah selanjutnya adalah upload

ke webserver. Untuk itu kita harus membeli hosting terlebih dahulu, misalnya www.

Penyedia hosting biasanya menyediakan tool cPanel untuk keperluan administrasi dan

manajemen situs, untuk proses upload menggunakan fasilitas cPanel.

Untuk dapat masuk ke cPanel harus login terlebih dahulu ke alamat

www.hawkhost.com. Setelah login sukses akan masuk ke halaman utama cPanel.

Selanjutnya utnuk meng-upload file langkah-langkahnya adalah sebagai berikut :

a. Dari halaman pertama pilih menu File Manager.

b. Kemudian akan muncul halaman File Manager. File-file nantinya akan

diletakkan pada direktori/public_html.

c. Untuk mengganti direktori, pilih gambar folder disamping tulisan /public_html.

d. Setelah direktori/public_html aktf, pilih menu Upload File.

e. Di halaman Upload File terdapat beberapa textbox untuk meng-upload file.

Caranya klik tombol Browser, kemudian muncul kotak dialog. Pilih file yang

akan di-upload. Untuk file lain caranya sama.

f. Setelah semua textbox terisi, milih menu upload.

Setelah data selesai di-upload dan semua data masuk, data diexstract kembali

dengan cara klik extract. Edit database.php nya agar terkoneksi dengan database.

Setelah selesai upload file, tahap kedua yaitu mengupload databasenya, caranya

pada halaman utama cpanel pilih MySQL. Dan pilih create database. Setelah database

dibuat sekarang buka phpmyadmin, pilih databasenya pilih import untuk mengimport

databasenya. Kemudian setelah selesai semuanya, logout cpanel. Dan website

www.nanoniboutique.web.id siap dipakai.

5. Penutup

5.1 Kesimpulan

Berdasarkan penelitian dan perancangan yang dikerjakan dan mengacu pada

rumusan masalah yang ada, berikut adalah beberapa kesimpulan yang dapat diambil dari

pembuatan web :

1. Website ini berisi fitur" yang mampu menginputkan data semua produk

yang ditawarkan oleh Nanoni Boutique.

2. Website juga menyediakan transaksi online, konsumen dapat mengisi

data-data yang jelas untuk memesan barang dan melakukan konfirmasi

pembayaran yang jelas.

3. Fitur Admin pada administrator dapat menambah, meng-update,

menghapus dan menyimpan data admin.

4. Fitur Konfigurasi pada administrator dapat mengedit dan menyimpan

data konfigurasi.

5. Fitur Kategori pada administrator dapat menambah, meng-update,

menghapus dan menyimpan data kategori.

6. Fitur Mitra pada administrator dapat menambah, meng-update,

menghapus dan menyimpan data supplier.

7. Fitur Custom Page pada administrator dapat menambah, meng-update,

menghapus dan menyimpan data menu-menu yang akan ditampilkan di

user.

8. Fitur Produk pada administrator dapat menambah, meng-update,

menghapus dan menyimpan data produk.

9. Fitur Data Member pada administrator dapat menambah, meng-update,

menghapus dan menyimpan data member.

10. Fitur Pembelian pada administrator dapat melihat data member yang

sudah atau belum melakukan konfirmasi pembelian produk, dapat

menghapus dan mengarsipkan data pada pembelian.

11. Fitur Pembayaran pada administrator dapat mengonfirmasi member

yang sudah melakukan pembayaran, dapat menghapus dan

mengarsipkan data member yang melakuakn pembayaran.

12. Fitur Ongkos Kirim pada administrator dapat menambah, meng-update,

menghapus dan menyimpan data provinsi dan ongkos kirim.

13. Fasilitas yang diberikan untuk user adalah user dapat melihat produk

pada home, user dapat melakukan registrasi member, user dapat login

member, user dapat membeli produk dan user dapat melakukan

konfirmasi pembayaran produk.

5.2 Saran

Ada beberapa saran yang dapat diberikan yang berhubungan dengan pembuatan

website ini :

1. Diharapkan website ini kedepannya dapat menghasilkan laporan data

yang dapat dicetak sehingga tidak perlu laporan manual lagi.

2. Aktifasi email yang valid. Sehingga user dapat mengakses data member

menggunakan alamat email.

3. Dalam segi inteface, website ini dapat lebih dikembangkan karena

bagaimanapun juga interface merupakan salah satu faktor pendukung

dari sistem yang ada. Dengan interface yang menarik dan user friendly,

maka proses transaksi dan komunikasi lebih lancar.

4. Dalam melakukan bisnis e-commerce yang harus diperhatikan, bukan

hanya untuk mencapai keuntungan saja, tapi juga harus memperhatikan

keamanan dalam bertransaksi, teknologi yang digunakan dan harus

selalu diperbaharui dengan mengikuti perkembangan teknologi,

membangun kepercayaan dengan memberikan pelayanan sebaik

mungkin pada konsumen dalam masalah transaksi.

6. DAFTAR PUSTAKA

Cita Adi. (2005). Sistem Informasi dan Penjualan di Amico Bali. Yogyakarta : STMIK

Akakom. Hal 11.

Jogiyanto. (1989). Analisis dan Desain Sistem Informasi : Pendekatan Terstruktur Teori

dan Praktik Aplikasi Bisnis. Hal : 8.

Munir Fuady. (2005) . Hal : 407

Oba Sanjo. (2010). Sequence Diagram. Diakses dari

http://www.programingportal.in/2010/05/system-sequence-diagram.html diakses

tanggal 26 Januari 2013

Raymond Mcloud, Jr. (2001,1996). Sistem Informasi Managemen Jilid 1 (Edisi Bhs

Indonesia). Jakarta : PT. Prenhalindo. Hal.11.

Wahana Komputer. (2002). Panduan Aplikasi Pengembangan Web berbasis ASP

perancangan web sebagai media informasi dan...

Documents