TOKO ONLINE CV. BINTANG INOVASI GEMILANG BERBASIS FRAMEWORK YII.

124  Download (0)

Full text

(1)

SKRIPSI

Disusun oleh :

HELMI TAUFIQURRAHMAN

NPM. 0834010241

J URUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI

UNIVERSITAS PEMBANGUNAN NASIONAL

"

VETERAN

"

J AWA TIMUR

SURABAYA

(2)

SKRIPSI

Diajukan Untuk Memenuhi Sebagai Persyaratan

Dalam Memperoleh Gelar Sarjana Komputer

Jurusan Teknik Informatika

Disusun oleh :

HELMI TAUFIQURRAHMAN

NPM. 0834010241

J URUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI

UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN” J AWA TIMUR

SURABAYA

(3)

TOKO ONLINE CV. BINTANG INOVASI GEMILANG BERBASIS

FRAMEWORK YII

Disusun O leh :

HELMI TAUFIQURRAHMAN

NPM. 0834010241

Telah disetujui untuk mengikuti Ujian Negar a Lisan Gelombang V Tahun Akademik 2013/2014

Pembimbing Utama Pembimbing Pendamping

Dr. Ir. Ni Ketut Sar i, MT Rizki Par lika, S.Kom, M.Kom NIP. 19650731 199203 2 001 NPT. 38 400 702 191

Mengetahui,

Ketua J urusan Teknik Infor matika Fakultas Teknologi Industri UPN ”Veteran” J awa Timur

(4)

Disusun Oleh :

HELMI TAUFIQURRAHMAN

NPM. 0834010241

Telah dipertahankan di hadapan dan diterima oleh Tim Penguji Skr ipsi J ur usan Teknik Infor matika Fakultas Teknologi Industri

Univer sitas Pembangunan Nasional ”Veteran” J awa Timur Pada Tanggal 18 J uli 2014

Pembimbing : Tim Penguji :

1. 1.

Dr. Ir. Ni Ketut Sar i, MT Budi Nugroho, S.Kom, M.Kom NIP. 19650731 199203 2 001 NPT. 3 8006 05 0205 1

2. 2.

Rizki Par lika, S.Kom, M.Kom Henni Endah Wahanani, ST, M.Kom

NPT. 38 400 702 191 NPT. 3 7809 13 0348 1

3.

Intan Yuniar Pur basari S.Kom, Msc NPT. 3.8006 04 01981

Mengetahui,

Dekan Fakultas Teknologi Industri

Univer sitas Pembangunan Nasional ”Veteran” J awa Timur

(5)

PANITIA UJ IAN SKRIPSI / KOMPREHENSIF

J l. Raya Rungkut Madya Gunung Anyar Telp. (031) 8706369 (Hunting). Fax. (031) 8706372 Sur abaya 60294

KETERANGAN REVISI Mahasiswa di bawah ini :

Nama : HELMI TAUFIQURRAHMAN

NPM : 0834010241 Jurusan : Teknik Informatika

Telah mengerjakan revisi/ tidak ada revisi*) pra rencana (design) / skripsi ujian lisan, TA 2013/2014 dengan judul:

”TOKO ONLINE CV. BINTANG INOVASI GEMILANG BERBASIS FRAMEWORK YII"

Surabaya, 21 Juli 2014 Dosen Penguji yang memerintahkan revisi:

1) Budi Nugroho, S.Kom, M.Kom NPT. 3 8006 05 0205 1

2) Henni Endah Wahanani, ST, M.Kom NPT. 3 7809 13 0348 1

3) Intan Yuniar Purbasari S.Kom, Msc NPT. 3.8006 04 01981

(6)

KATA PENGANTAR

Alhamdulillaahi rabbil ‘alamin, segala puji syukur kehadirat Allah SWT

yang telah memberikan Rahmat dan Anugerah-Nya sehingga penulis dapat menyelesaikan tugas akhir ini.

Melalui tugas akhir ini penulis merasa mendapatkan kesempatan untuk lebih memperdalam ilmu-ilmu mengenai teknologi informasi yang telah didapatkan dibangku kuliah. Mengingat masih banyaknya kekurangan pada tugas akhir ini, penulis mengharapkan kritik dan sarannya untuk pengembangan kedepannya.

Akhirul kalam, penulis mengucapkan terima kasih kepada semua pihak

yang telah membantu penyelesaian tugas akhir ini. Semoga Allah membalasnya dengan balasan sebaik-baiknya. Amien.

Surabaya, Maret 2014

(7)

UCAPAN TERIMA KASIH

Terima kasih yang sebesar-besarnya penulis haturkan kepada Allah Subhanahu Wa Ta’ala atas segala karunia dan Rahmat-Nya. Dalam kesempatan ini pula, penulis ingin mengucapkan terima kasih dan penghargaan kepada:

1. Ibu yang telah memberikan dukungan dan do’a demi tercapainya pelaksanaan tugas akhir ini.

2. Bapak Ir. Sutiyono, MT selaku Dekan Fakultas Teknologi Industri UPN “VETERAN” Jawa Timur.

3. Ibu Dr. Ir. Ni Ketut Sari, MT selaku Ketua Jurusan Teknik Informatika - FTI UPN “VETERAN” Jawa Timur.

4. Ibu Dr. Ir. Ni Ketut Sari, MT selaku Dosen Pembimbing 1 yang telah meluangkan waktu, memberikan pengarahan, ilmu dan bimbingannya.

5. Bapak Rizky parlika, S.Kom, M.Kom selaku Dosen Pembimbing 2 yang telah meluangkan waktu, memberikan pengarahan, ilmu dan bimbingannya.

6. Ibu Yisti Vita Via, S.ST, M.Kom selaku PIA TA Teknik Informatika - FTI UPN “VETERAN” Jawa Timur.

7. Seluruh teman-teman angkatan 2005 - 2008 teknik informatika UPN ”VETERAN” jatim.

8. Seluruh teman – teman & sahabat yang selalu membantu, mensuppport & memberi dukungan agar saya dapat segera menyelesaikan skripsi.

(8)
(9)

ABSTRAK ... i

2.4.2 PerbandinganFramework Yii dengan Framework lain ... 13

(10)

vi

3.5.5 Mengelola Konfirmasi Pembayaran ... 36

(11)

3.6.1 Sequence Diagram Admin Mengelola Data Produk ... 47

3.6.2 Sequence Diagram Admin Mengelola Data Jenis Barang ... 48

3.6.3 Sequence Diagram Admin Ubah Konfirmasi Pembayaran ... 48

3.6.4 Sequence Diagram Admin Mengelola Data Artikel... 49

3.6.5 Sequence Diagram Admin Mengelola Data Galeri ... 50

3.6.6 Sequence Diagram Admin Mengelola Data Download ... 50

3.6.7 Sequence Diagram Admin Mengelola Data Administrator ... 51

3.6.8 Sequence Diagram Admin Mengelola Data User ... 52

3.6.8 Sequence Diagram Admin Mengelola Ubah Profil ... 52

3.6.9 Sequence Diagram User Registrasi ... 53

3.6.10 Sequence Diagram User Melihat Artikel ... 54

3.6.11 Sequence Diagram User Melihat Galeri ... 54

3.6.12 Sequence Diagram User Melihat Produk ... 55

3.6.13 Sequence Diagram User Pembelian Produk ... 55

3.6.14 Sequence Diagram UserMenambah Konfirmasi Pembayaran 56

3.7 Collaboration Diagram ... 56

3.7.1 Collaboration Diagram Mengelola Data Produk ... 57

3.7.2 Collaboration Diagram Mengelola Data Jenis Produk ... 57

3.7.3 Collaboration Diagram Ubah Konfirmasi Pembayaran... 58

3.7.4 Collaboration Diagram Mengelola Data Artikel ... 58

3.7.5 Collaboration Diagram Mengelola Data Galeri ... 59

3.7.6 Collaboration Diagram Mengelola Data Download ... 60

3.7.7 Collaboration Diagram Mengelola Data Administrator ... 60

3.7.8 Collaboration Diagram Mengelola Data User ... 61

3.7.9 Collaboration Diagram Ubah Profil ... 61

3.7.10 Collaboration Diagram Registrasi User ... 62

3.7.11 Collaboration Diagram Lihat Data Artikel ... 62

3.7.12 Collaboration Diagram Lihat Data Galeri ... 63

3.7.13 Collaboration Diagram Lihat Data Produk ... 63

3.7.14 Collaboration Diagram Transaksi Pembelian ... 64

(12)

viii

4.2.6 Pengujian Sistem Ubah Data Konfirmasi Pembayaran ... 75

4.2.7 Pengujian Sistem Input Data Artikel ... 77

4.2.8 Pengujian Sistem Ubah Data Artikel ... 78

4.2.9 Pengujian Sistem Input Data Administrator ... 79

4.2.10 Pengujian Sistem Ubah Data Administrator ... 79

4.2.11 Pengujian Sistem Input Data User... 80

4.2.12 Pengujian Sistem Ubah Data User ... 81

4.2.13 Pengujian Sistem Ubah Data Profil ... 83

4.2.14 Pengujian Sistem Pembelian Barang User... 84

4.3 Implementasi Antar Muka ... 86

4.4.9 Form Ubah Data Konfirmasi Pembayaran... 91

4.4.10 Data Artikel ... 92

4.4.11 Form Tambah Data Artikel ... 92

4.4.12 Form Ubah Data Artikel ... 93

(13)

4.4.16 Data User ... 95

4.4.17 Form Tambah User ... 95

4.4.18 Form Ubah User ... 96

4.4.19 Report Konfirmasi Pembayaran ... 97

4.4.20 Halaman Utama Frontpage ... 98

4.4.21 Menu Produk ... 99

4.4.22 Menu Belanja ... 99

4.4.23 Menu Artikel ... 100

4.4.24 Menu Galeri ... 100

4.4.25 Menu Profil ... 100

4.4.26 Menu Hubungi Kami ... 101

4.4.27 Menu Login User... 102

4.4.28 Menu Pesanan ... 102

BAB V PENUTUP ... 103

5.1 Kesimpulan ... 103

5.2 Saran... 103

(14)

x

Gambar 3.6 Activity Diagram Admin Mengelola Data Jenis Produk... 36

Gambar 3.7 Activity Diagram Mengelola Data Konfirmasi Pembayaran ... 37

Gambar 3.8 Activity Diagram Mengelola Data Artikel ... 38

Gambar 3.9 Activity Diagram Mengelola Data Galeri ... 39

Gambar 3.10 Activity Diagram Mengelola Data Download ... 40

Gambar 3.11 Activity Diagram Mengelola Data Administrator ... 41

Gambar 3.12 Activity Diagram Mengelola Data User ... 42

Gambar 3.13 Activity Diagram Ubah Data Profil ... 42

Gambar 3.14 Activity Diagram Registrasi ... 43

Gambar 3.15 Activity Diagram Login User ... 44

Gambar 3.16 Activity Diagram Melihat Artikel ... 44

Gambar 3.17 Activity Diagram Melihat Galeri ... 45

Gambar 3.18 Activity Diagram Melihat Produk ... 45

Gambar 3.19 Activity Diagram Pembelian Produk ... 46

Gambar 3.20 Activity Diagram Konfirmasi Pembayaran ... 46

(15)

Gambar 3.24 Diagram Sekuensial Untuk Use Case Mengelola Data Artikel ... 49

Gambar 3.25 Diagram Sekuensial Untuk Use Case Mengelola Data Galeri .... 50

Gambar 3.26 Diagram Sekuensial Untuk Use Case Mengelola Data Download ... 50

Gambar 3.27 Diagram Sekuensial Use Case Mengelola Data Administrator ... 51

Gambar 3.28 Diagram Sekuensial Untuk Use Case Mengelola Data User ... 52

Gambar 3.29 Diagram Sekuensial Untuk Use Case Mengubah Profil ... 52

Gambar 3.30 Diagram Sekuensial Untuk Use Case Registrasi ... 53

Gambar 3.31 Diagram Sekuensial Untuk Use Case Melihat Artikel ... 54

Gambar 3.32 Diagram Sekuensial Untuk Use Case Melihat Galeri ... 54

Gambar 3.33 Diagram Sekuensial Untuk Use Case Melihat Produk ... 55

Gambar 3.34 Diagram Sekuensial Untuk Use Case Pembelian Produk ... 55

Gambar 3.35 Diagram Sekuensial Use Case Konfirmasi Pembayaran ... 56

Gambar 3.36 Diagram Kolaborasi Mengelola Data Produk ... 57

Gambar 3.37 Diagram Kolaborasi Mengelola Data Jenis Produk ... 57

Gambar 3.38 Diagram Kolaborasi Ubah Konfirmasi Pembayaran ... 58

Gambar 3.39 Diagram Kolaborasi Mengelola Data Artikel ... 58

Gambar 3.40 Diagram Kolaborasi Mengelola Data Galeri ... 59

Gambar 3.41 Diagram Kolaborasi Mengelola Data Download ... 60

Gambar 3.42 Diagram Kolaborasi Mengelola Data Administrator ... 60

Gambar 3.43 Diagram Kolaborasi Mengelola Data User ... 61

Gambar 3.44 Diagram Kolaborasi Ubah Profil ... 61

Gambar 3.45 Diagram Kolaborasi Registrasi User ... 62

Gambar 3.46 Diagram Kolaborasi Lihat Data Artikel ... 62

Gambar 3.47 Diagram Kolaborasi Lihat Data Galeri ... 63

Gambar 3.48 Diagram Kolaborasi Lihat Data Produk ... 63

Gambar 3.49 Diagram Kolaborasi Transaksi Pembelian ... 64

Gambar 3.50 Diagram Kolaborasi Mengelola Konfirmasi Pembayaran ... 64

Gambar 3.51 Diagram Kelas ... 65

Gambar 4.1 Antar Muka Login ... 71

(16)
(17)

Gambar 4.38 Form Ubah Data Jenis Produk ... 91

Gambar 4.50 Hasil Export Report Konfirmasi Pembayaran ... 97

(18)

xiv

(19)

DOSEN PEMBIMBING II : RIZKI PARLIKA, S.Kom, M.Kom.

ABSTRAK

CV. Bintang Inovasi Gemilang merupakan suatu perusahaan yang bergerak dibidang penjualan komputer (hardware & software asli). Sistem penjualan yang digunakan sekarang ini adalah sistem konvensional, yaitu pembeli harus datang langsung ke CV. Bintang Inovasi Gemilang untuk melihat produk yang ditawarkan. Dengan adanya sistem tersebut akan menyita waktu konsumen sehingga kesulitan memperoleh informasi mengenai spesifikasi produk yang ditawarkan.

E-Commerce atau dalam bahasa Indonesia yaitu perdagangan elektronik adalah penyebaran, pembelian, penjualan, pemasaran barang dan jasa melalui sistem elektronik seperti internet, televisi atau jaringan komputer lainnya. Pada saat ini, CV. Bintang Inovasi Gemilang belum menggunakan fasilitas ecommerce tersebut sehingga kesulitan dalam menawarkan produk kepada konsumen yang berada di luar kota. Proses penjualan CV. Bintang Inovasi Gemilang akan hanya dilakukan apabila terdapat konsumen yang datang ke toko.

Untuk membangun sistem e-commerce ini, alat yang digunakan untuk menggambarkan model sistem adalah berupa diagram alir data (FlowMap), diagram konteks, dan Data Flow Diagram (DFD), serta dalam perancangan basis data menggunakan kamus data, dan Entity Relationship Diagram (ERD).

Dengan adanya e-commerce tersebut diharapkan dapat memudahkan konsumen memperoleh informasi mengenai spesifikasi produk yang ditawarkan oleh CV. Bintang Inovasi Gemilang. Memudahkan CV. Bintang Inovasi Gemilang dalam menawarkan atau menjual produknya kepada konsumen yang berada di luar kota. Konsumen yang berada diluar kota dapat mengetahui keberadaan CV. Bintang Inovasi Gemilang dengan menggunakan layanan e-commerce ini serta bisa memesan tanpa harus datang ke toko.

(20)

1.1 Latar Belakang Masalah

Kemajuan teknologi informasi saat ini dirasakan berkembang sangat pesat. Seiring berkembangnya teknologi informasi, banyak sekali kemudahan yang bisa dirasakan dan diperoleh oleh kebanyakan orang saat ini. Sudah tidak menjadi barang mewah lagi bagi masyarakat untuk bisa menikmati perkembangan teknologi informasi. Salah satu potensi yang bisa di optimalkan dalam penggunaan teknologi saat ini diantaranya untuk mengakses informasi dan atau memasang publikasi kepada masyarakat melalui dunia maya.

(21)

agar dapat bersaing secara global dan dapat meningkatkan kinerja secara lebih baik.

Keberadaan aktivitas perdagangan dengan menggunakan internet bisa menjadi alternatif yang menjanjikan untuk diterapkan pada saat ini, karena banyak memberikan kemudahan bagi kedua belah pihak, baik dari pihak penjual maupun pihak pembeli didalam melakukan transaksi perdagangan, meskipun para pihak berada ditempat yang berbeda. Sekalipun transaksi yang terjadi tidak memerlukan tahap pertemuan dalam tahap negosiasi.

1.2 Perumusan Masalah

Adapun pengembangan toko online CV. Bintang Inovasi Gemilang tersebut diterapkan dengan konsep sistematis. Permasalahan lebih difokuskan pada:

a. Bagaimana merancang dan membuat suatu aplikasi yang digunakan perusahaan agar dapat dimanfaatkan oleh pihak perusahaan dan pihak lain / pengunjung ?

b. Bagaimana melayani pihak perusahaan dan pihak lain / pengunjung dalam waktu 24 jam?

1.3 Batasan Masalah

(22)

Adapun batasan – batasannya adalah sebagai berikut :

a. Sistem yang dibuat akan diimplentasikan pada CV. Bintang Inovasi Gemilang.

b. Aplikasi desain website toko online ini dibuat dengan menggunakan Framework YII.

c. Pengolahan database hanya menggunakan database dari MySQL. d. Aplikasi toko online ini tanpa stok barang.

e. Penggunaan sistem informasi dibagi menjadi 2 bagian yaitu

administrator, dan pengguna umum.

f. Admin sebagai pengendali utama dalam menjalankan setiap aktifitas dalam aplikasi.

g. Untuk aplikasi toko online akan diberikan login khusus antara user dan admin.

h. Dalam kasus ini tidak dibahas secara mendalam tentang sistem pengamanan data, namun sebatas identifikasi pengguna dengan pengisian username dan password sehingga pengguna berhak untuk melakukan sistem input dan output data.

1.4 Tujuan Penelitian

Tujuan dari penelitian ini yaitu Merancang dan membangun suatu aplikasi “TOKO ONLINE CV. BINTANG INOVASI GEMILANG BERBASIS

(23)

1.5 Manfaat Penelitian

Manfaat yang diperoleh dalam pembuatan Toko Online CV. Bintang Inovasi Gemilang Berbasis Framework YII adalah :

a. Sistem Informasi Toko Online CV. Bintang Inovasi Gemilang Berbasis Framework YII ini dibuat untuk mempermudah kegiatan jual beli secara online.

b. Sebagai media promosi bagi perusahaan

1.6 Sistematika Penulisan

Sistematika penulisan pada tugas akhir ini bertujuan agar perancangan dan pembangunan perangkat lunak yang dibahas menjadi lebih mudah dipahami pada setiap bab atau sub bahasan. Secara kronologis uraian dalam tugas akhir ini disusun sebagai berikut :

BAB I PENDAHULUAN

Bab ini berisi tentang deskripsi umum tentang Tugas Akhir yang meliputi : latar belakang, perumusan masalah, batasan masalah, tujuan, manfaat, metodologi serta sistematika penulisan.

BAB II TINJ AUAN PUSTAKA

(24)

tentang konsep dari teori pembelajaran yang menjadi dasar pembuatan tugas akhir diantaranya Framework YII dan

MySQL.

BAB III METODOLOGI PENELITIAN

Bab ini berisi tentang perencanaan sistem yang akan dibangun, termasuk desain interface dan basis data yang akan digunakan dalam pembangunan perangkat lunak.

BAB IV HASIL DAN PEMBAHASAN

Bab ini berisi tentang penjelesan hasil, pembahasan dan uji coba aplikasi toko online CV. Bintang Inovasi Gemilang.

BAB V KESIMPULAN

Bab ini berisi kesimpulan dan saran dari penulis untuk pengembangan sistem.

DAFTAR PUSTAKA

(25)

2.1 Sejar ah Singkat Tentang CV. Bintang Inovasi Gemilang

CV. Bintang Inovasi Gemilang adalah suatu usaha yang bergerak dibidang penjualan komputer (hardware & software asli) yang dipimpin oleh bapak Rizki Parlika, S.Kom, M.Kom. Usaha tersebut berlokasi: di Jl. Medokan Sawah no. 104, Kota Surabaya, Propinsi Jawa Timur. Adapun macam-macam bidang usaha yang terdapat dalam CV. Bintang Inovasi Gemilang Surabaya itu sendiri yaitu bergerak dalam bidang :

a. General Trading

Menyediakan jasa pengadaan bagi perusahaan anda sesuai dengan kebutuhan yang diperlukan dalam mendukung aktivitas bisnis perusahaan, menyediakan jasa pengadaan yang mendukung aktivitas teknis dalam kerjasama pemborongan pekerjaan.

b. Trainining Development

Juga menyediakan jasa pelatihan dan pengembangan bagi karyawan anda dan karyawan yang kami kelola sesuai dengan kebutuhan dan progress yang ingin di capai.

c. Networking Maintenance

(26)

d. Design & Web Service

Membantu perusahaan dalam pembuatan logo yang memerlukannya, serta menyediakan jasa dalam pembuatan web

company profile.

Adapun karakteristik dari perusahaan CV. Bintang Inovasi Gemilang ini selalu berusaha maju dan selalu berusaha untuk selalu dapat bersaing dengan perusahaan yang lainnya. Selain itu didirikannya perusahaan CV. Bintang Inovasi Gemilang sendiri dikarenakan kebutuhan perusahaan yang beraneka ragam bidang usahanya maka dengan berdirinya perusahaan ini semoga dapat memenuhi ekspektasi dari perusahaan perusahaan pengguna jasa CV. Bintang Inovasi Gemilang, dengan didukung oleh para ahli yang memang ahli dibidangnya.

2.1.1 Struktur Organisasi CV. Bintang Inovasi Gemilang Sur abaya

Adapun susunan kepengurusan dari perusahaan CV. Bintang Inovasi Gemilang Surabaya dapat dilihat pada Gambar 2.1 struktur organisasi.

(27)

2.2 Pemanfaatan IT

Dalam persaingan bisnis yang semakin keras dan ketat saat ini, IT memegang peranan penting dalam pengembangan bisnis. Teknologi kini semakin marak diperbincangkan karena diyakini dapat memberi keuntungan bersaing.Pemanfaatan IT dalam bisnis yaitu untuk meningkatkan kualitas informasi, control kinerja dan peningkatan layanan untuk memenangkan pasar. Dalam peng-aplikasiannya, waralaba memanfaatkan IT untuk berpromosi, baik itu via situs jejaring sosial atau via blog.

Keunggulan bersaing ini dapat dicapai melalui banyak cara misalnya, harga terjangkau, kualitas terjamin, keramahan, kecepatan layanan, dan lain sebagainya. Berkaitan dengan pemanfaatan IT dalam perusahaan, keunggulan kompetitif mengacu pada penggunaan IT untuk meningkatkan kualitas informasi, kontrol kinerja perusahaan, dan peningkatan layanan untuk memenangkan pasar. Ide dasarnya adalah perusahaan menggunakan IT baik sebagai alat bantu maupun strategi yang tangguh untuk mengintegrasikan dan mengolah data dengan cepat dan akurat, serta untuk penciptaan produk layanan baru sebagai daya saing untuk menghadapi kompetisi. Pemanfaatan sistem teknologi informasi memberikan tiga peran utama di dalam organisasi yaitu:

a. Meningkatkan efisiensi, yaitu menggantikan manusia dengan teknologi diproses produksi.

(28)

keputusan dengan lebih efektif yang didasarkan dengan informasi yang akurat, tepat waktu, dan relevan sehingga mendapat hasil produksi yang akurat dan bebas dari cacat produksi yang diinginkan. c. Meningkatkan komunikasi, yaitu meng-integrasi-kan penggunaan

sistem teknologi informasi dengan menggunakan email dan chat.

2.3 E-Commerce

E-Commerce adalah dimana dalam satu website menyediakan atau dapat melakukakan transaksi secara online atau juga bisa merupakan suatu cara berbelanja atau berdagang secara online atau direct selling yang memanfaatkan fasilitas internet dimana terdapat website yang dapat menyediakan layanan "get and deliver". E-commerce akan merubah semua kegiatan marketing dan juga sekaligus memangkas biaya-biaya operasional untuk kegiatan trading. (Turban, 2000)

2.3.1 Sejar ah E-Commer ce

Penerapan Electronic Commerce bermula pada awal tahun 1970an, dengan adanya Electronic Found Transfer saat itu, tingkat pengunaan aplikasinya sangat terbatas pada perusahaan besar, lembaga keuangan dan beberapa perusahaan kecil kemudian muncul Electronic Data Interchange

(EDI) yang berkembang dari transaksi keuangan ke pemrosesan transaksi

lain. Dengan adanya komersial internet pada tahun 1990-an maka muncul

(29)

tersebut karena perkembangan jaringan, software, meningkatnya persaingan dan berbagai tekanan bisnis (Turban, 2000)

E-commerce akan merubah semua kegiatan marketing dan juga

sekaligus memangkas biaya-biaya operasional untuk kegiatan trading (perdagangan).

Proses yang ada dalam E-commerce adalah sebagai berikut :

a. Presentasi electronis (Pembuatan Web site) untuk produk dan layanan b. Pemesanan secara langsung dan tersedianya tagihan

c. Otomasi account Pelanggan secara aman (baik nomor rekening maupun nomor Kartu Kredit).

d. Pembayaran yang dilakukan secara langsung (online) dan penanganan transaksi

Dampak positive dan negative dari E-commerce : a. Postif

i. Dapat meningkatkan market exposure (pangsa pasar) ii. Melebarkan jangkauan (global reach).

iii. Meningkatkan customer loyality. iv. Meningkatkan supplier management.

v. Meningkatkan value chain (mata rantai pendapatan). b. Negatif

(30)

ii. Pencurian informasi rahasia yang berharga Gangguan yang timbul bisa menyingkap emua informasi rahasia tersebut kepada pihak-pihak yang tidak berhak dan dapat mengakibatkan kerugian yang besar bagi si korban.

iii. Kehilangan kesempatan bisnis karena gangguan pelayanan Kesalahan ini bersifat kesalahan non-teknis seperti aliran listrik tiba-tiba padam.

iv. Penggunaan akses ke sumber oleh pihak yang tidak berhak. Misalkan seorang hacker yang berhasil membobol sebuah sistem perbankan etelah itu dia memindahkan sejumlah rekening orang lain ke rekeningnya sendiri.

v. Kehilangan kepercayaan dari para konsumen. Ini karena berbagai macam faktor seperti usaha yang dilakukan dengan sengaja oleh pihak lain yang berusaha menjatuhkan reputasi perusahaan tersebut.

vi. Kerugian yang tidak terduga. Disebabkan oleh gangguan yang dilakukan dengan sengaja, ketidakjujuran, praktek bisnis yang tidak benar, kesalahan faktor manusia, kesalahan faktor manusia atau kesalahan sistem elektronik

2.4 Yii framework

(31)

yang diperoleh dan pengembang umpan balik yang dikumpulkan dari proyek yang dipadatkan perlunya kerangka sangat cepat, aman dan profesional yang dibuat khusus untuk memenuhi harapan dari pengembangan aplikasi Web 2.0. Pada tanggal 3 Desember 2008, setelah pembangunan hampir satu tahun, Yii 1.0 secara resmi dirilis ke publik.

Yii adalah framework (kerangka kerja) PHP berbasis komponen, berkinerja tinggi untuk pengembangan aplikasi Web berskala besar. Yii menyediakan reusability maksimum dalam pemrograman Web dan mampu meningkatkan kecepatan pengembangan secara signifikan. Nama Yii (dieja sebagai /i:/) singkatan dari “Yes It Is!”. Berikut merupakan respon yang paling tepat dan akurat untuk yang baru dengan Yii. (Sabit Huraira, 2012)

2.4.1 Kegunaan Framework Yii

(32)

2.4.2 Perbandingan Framework Yii dengan Framework Lain?

Seperti kebanyakan PHP framework, Yii adalah MVC

framework. Yii melampaui framework PHP lain dalam hal

efisiensi, kekayaan‐ fitur, dan kejelasan dokumentasi. Yii didesain dengan hati‐ hati dari awal agar sesuai untuk pengembangan aplikasi Web secara serius. Yii bukan berasal dari produk pada beberapa proyek maupun konglomerasi pekerjaan pihak‐ ketiga. Yii adalah hasil dari pengalaman kaya para pembuat pada pengembangan aplikasi Web dan investigasi framework

pemrograman Web dan aplikasi yang paling populer.

2.5 PHP

Adalah bahasa pemrograman script yang paling banyak dipakai saat ini. PHP banyak dipakai untuk memrogram situs web dinamis, walaupun tidak tertutup kemungkinan untuk digunakan untuk pemakaian lain. PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995.Pada waktu itu

PHP bernama FI (Form Interpreted). Pada saat tersebut PHP adalah

sekumpulan script yang digunakan untuk mengolah data form dari web. Perkembangan selanjutnya adalah Rasmus melepaskan kode sumber tersebut dan menamakannya PHP/ FI, pada saat tersebut kepanjangan dari

PHP/ FI adalah Personal Home Page/Form Interpreter.

(33)

meresmikan nama rilis tersebut menjadi PHP 3.0. Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan

PHP 4.0.PHP 4.0 adalah versi PHP yang paling banyak dipakai. Versi ini

banyak dipakai sebab versi ini mampu dipakai untuk membangun aplikasi

web kompleks tetapi tetap memiliki kecepatan proses dan stabilitas yang

tinggi.pada Juni 2004, Zend merilis PHP 5.0. Versi ini adalah versi mutakhir dari PHP. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Dalam versi ini juga dikenalkan model pemrograman berorientasi objek baru untuk menjawab perkembangan bahasa pemrograman kearah pemrograman berorientasi objek. PHP merupakan bahasa pemrograman web, penulisan script PHP dapat dijadikan satu dengan kode html dan disimpan dalam satu file yang sama ataupun berdiri sendiri dengan nama file berekstensi *.php. Ciri khas PHP diawali dengan tanda “<?php“ dan diakhiri dengan “?>”. PHP memiliki fasilitas untuk melakukan koneksi ke database.Script program PHP disimpan dan dijalankan di sisi server sehingga keamanan data lebih terjamin.

Dengan pelepasan kode sumber ini menjadi open source, maka banyak programmer yang tertarik untuk ikut mengembangkan PHP. Pada November 1997, dirilis PHP/ FI 2.0.Pada rilis ini interpreter sudah diimplementasikan dalam C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/ FI secara signifikan.

(34)

server, browser kemudian mengidentifikasi halaman yang dikehendaki dan

menyampaikan segala informasi yang dibutuhkan oleh web server. Selanjutnya web server akan mencarikan berkas yang diminta dan mengirimkan isinya ke mesin PHP dan mesin inilah yang memproses dan memberikan hasilnya (berupa kode HTML) ke web server. Kemudian web

server menyampaikan ke client. Berikut gambar 2.1 adalah skema konsep

kerja PHP. (Nugroho, 2004)

Gambar 2.2 Skema Kerja PHP

2.6 HTML

Adalah suatu system yang digunakan untuk menandai dokumen dengan pembatas informasional yang mengindikasikan bagaimana teks pada dokumen harus direpresentasikan dan bagaimana dokumen dihubungkan satu sama lain. HTML sendiri termasuk turunan SGML (Standar

Generalized Language) yang merupakan bahasa standar untuk markup.

(35)

HTML juga mendukung multimedia secara penuh, karena dapat

menampilkan seluruh komponen multimedia (text, hypertext, gambar, animasi, audio, video).

2.7 CSS

Cascading Style Sheet (CSS) merupakan salah satu bahasa

pemrograman web untuk mengendalikan beberapa komponen dalam sebuah

web sehingga akan lebih terstruktur dan seragam.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft

Word yang dapat mengatur beberapa style, misalnya heading, subbab,

bodytext, footer, images, dan style lainnya untuk dapat digunakan

bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman webyang dibuat dengan bahasa HTML dan

XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada

teks, warna tabel, ukuran border, warna border, warna hyperlink, warna

mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas,

(36)

2.8 Javascript

JavaScript adalah bahasa skrip yang populer di internet dan dapat

bekerja di sebagian besar penjelajah web populer seperti Internet Explorer

(IE), Mozilla Firefox, Netscape dan Opera. Kode Java script dapat

disisipkan dalam halaman web menggunakan tagSCRIPT.

Java script pertama kali dikembangkan oleh Brendan Eich dari

Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi

LiveScript, dan akhirnya menjadi Java script. Navigator sebelumnya telah

mendukung Java untuk lebih bisa dimanfaatkan para programmer yang

non-Java.Maka dikembangkanlah bahasa pemrograman bernama LiveScript

untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama Java script, walaupun tidak ada hubungan bahasa antara Java dengan Java script. Java script bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat

AJAX. Java script adalah bahasa yang digunakan untuk AJAX.

2.9 Pengertian UML (Unified Modeling Language)

(37)

database, dan komponen-komponen yang diperlukan dalam sistem

software.

Seperti bahasa-bahasa lainnya, UML mendefinisikan notasi dan

syntax/semantik. Notasi UML merupakan sekumpulan bentuk khusus

untuk menggambarkan berbagai diagram piranti lunak. Setiap bentuk memiliki makna tertentu, dan UML syntax mendefinisikan bagaimana bentuk-bentuk tersebut dapat dikombinasikan. Notasi UML diturunkan dari 3 notasi yang telah ada sebelumnya : Grady Booch - Object-Oriented

Design (OOD), Jim Rumbaugh - Object Modeling Technique (OMT), dan

Ivar Jacobson - Object-Oriented Software Engineering (OOSE). Didalam

UML terdapat Use Case Diagram, Class Diagram, Sequence Diagram,

Collaboration Diagram,Activity Diagram,State Diagram. (Sholiq, 2006)

2.9.1 Pengertian Use Case Diagram

Use-case diagram adalah gambaran graphical dari beberapa atau

semua actor, use-case, dan interaksi diantara komponen-komponen tersebut yang memperkenalkan suatu sistem yang akan dibangun.

Use-case diagram menjelaskan manfaat suatu sistem jika dilihat menurut

(38)

Gambar 2.3 Use Case

Use-case diagram dapat digunakan selama proses analisis untuk

menangkap requirement sistem dan untuk memahami bagaimana sistem seharusnya bekerja. Selama tahap desain, use-case diagram berperan untuk menetapkan perilaku (behavior) sistem saat diimplementasikan. Dalam sebuah model mungkin terdapat satu atau beberapa use-case diagram. Kebutuhan atau requirements system adalah fungsionalitas apa yang harus disediakan oleh sistem kemudian didokumentasikan pada model use-case yang menggambarkan fungsi sistem yang diharapkan (use-case), dan yang mengelilinginya (actor), serta hubungan antara actor dengan use-case (use-case diagram) itu sendiri. (Sholiq, 2006)

Adapun komponen-komponen pembentuk use case diagram adalah sebagai berikut :

a. Actor :

(39)

use-case tetapi tidak memiliki kontrol atas use-use-case.Cara menentukan

Use-case dalam suatu sistem :

i. Perilaku perangkat lunak aplikasi ii. Gambaran tugas dari sebuah actor

iii. Sistem atau benda yang memberikan sesuatu yang bernilai kepada actor

iv. Apa yang dikerjakan oleh suatu perangkat lunak (bagaimana

cara mengerjakannya)

Gambar 2.4 Actor b. Relasi :

Relasi mempresentasikan hubungan antara actor satau dengan actor yanga lainnya yang melakukan sebuah kegiatan atau melakukan suatu aktivitas dalam suatu sistem yang telah dibuat.Ada beberapa relasi yang terdapat dalam use case diagram yaitu :

i. Association, Menghubungkan link antar elemen

ii. Generalization,disebut juga inheritance (pewarisan), sebuah

elemen dapat merupakan spesialisasi dari elemen lainnya.

iii. Dependency, sebuah elemen bergantung dalam beberapa cara

(40)

iv. Aggregation, bentuk assosiation dimana sebuah elemen berisi

elemen lainnya.

Adapun tipe relasi atau stereotype yang mungkin terjadi pada use-case

diagram :

a. <<include>>, yaitu kelakuan yang harus terpenuhi agar sebuah event dapat terjadi, dimana pada kondisi ini sebuah use-case adalah bagian dari use-case lainnya.

b. <<extends>>, kelakuan yang hanya berjalan di bawah kondisi tertentu seperti menggerakkan alarm.

c. <<communicates>>, mungkin ditambahkan untuk asosiasi yang menunjukkan asosiasinya adalah communicates association . Ini merupakan pilihan selama asosiasi hanya tipe relationship yang dibolehkan antara actor dan use-case.

Adapun Bentuk gambaran dari relasi antara actor dan use case diagram

(41)

2.9.2 Class

Diagram yang menunjukkan sekumpulan class, interface dan

collaboration serta relationships. Diagram ini biasa ditemukan pada

pemodelan object oriented system. Class diagram menunjukkan view desain statik dari sebuah sistem. Class diagram yang termasuk active class menunjukkan view proses statik sebuah sistem. (Sholiq, 2006)

Gambar 2.6 Class diagram

2.9.3 Object Diagr am

Object diagram adalah bentuk lain dari class diagram tetapi

(42)

2.9.4 Sequence Diagram

Sequence diagram adalah suatu diagram yang menggambarkan interaksi antar obyek dan mengindikasikan komunikasi diantara obyek-obyek tersebut. Diagram ini juga menunjukkan serangkaian pesan yang dipertukarkan oleh obyek-obyek yang melakukan suatu tugas atau aksi tertentu. Obyek-obyek tersebut kemudian diurutkan dari kiri ke kanan, aktor yang menginisiasi interaksi biasanya ditaruh di paling kiri dari diagram. (Sholiq, 2006)

Gambar 2.7 Sequence Diagram

2.9.5 Collaboration Diagram

(43)

things lain, seperti collaboration, component dan node. Diagram ini digunakan untuk mengilustrasikan dynamic view dari system. (Sholiq, 2006)

Gambar 2.8 Collaboration Diagram

2.9.6 Activity Diagr am

Activity diagram menggambarkan urutan aktifitas yang digunakan

(44)

Gambar 2.9 Activitiy Diagram 2.9.7 State Diagram

Sebuah state diagram menggambarkan keadaan mesin, transisi, event dan activity. Diagram ini adalah pelengkap khusus untuk mendeskripsikan sebuah class yang menggambarkan state dari objek dari

class dan event yang menyebabkan state berubah. Event tersebut dapat

berasal dari objek yang mengirimkan suatu message atau dari kondisi yang terpenuhi. (Sholiq, 2006)

(45)

2.10 MySQL Database

MySQL adalah multi user database yang menggunakan bahasa

Structured Query Language (SQL). MySQL dalam operasi client-server

melibatkan server daemon MySQL disisi server dan berbagai macam program serta library yang berjalan disisi client. MySQL mampu menangani data yang cukup besar. Perusahaan yang mengembangkan

MySQL yaitu TcX, mengaku menyimpan data lebih dari 40 database,

10.000 tabel dan sekitar 7 juta baris, totalnya kurang lebih 100 Gb data.

SQL adalah bahasa standar yang digunakan untuk mengakses

databaseserver. Bahasa ini pada awalnya dikembangkan oleh IBM, namun

telah diadopsi dan digunakan sebagai standar industri. Dengan menggunakan SQL, proses akses database menjadi lebih user-friendly dibandingkan dengan menggunakan dBASE atau Clipper yang masih menggunakan perintah-perintah pemrograman. MySQL merupakan

software database yang paling populer di lingkungan Linux, kepopuleran

ini karena ditunjang performa querydari database-nya yang saat ini bisa dikatakan paling cepat dan jarang bermasalah. MySQL ini juga sudah dapat berjalan pada lingkungan Windows.

MySQL menawarkan berbagai keunggulan dibandingkan database

server lain. Berikut ini adalah beberapa keunggulan MySQL : a. Mampu menangani jutaan user dalam waktu yang bersamaan. b. Mampu menampung lebih dari 50.000.000 record.

(46)

d. Memiliki user privilege system yang mudah dan efisien.

Tabel 2.1 Tipe Data MySQL

Tipe Data Keterangan

INT (M)

UNSIGNED Angka -2147483648 s/d 2147483648

FLOAT (M,D) Angka pecahan

DATE Tanggal dengan format YYYY-MM-DD

DATETIME Tanggal dan waktu dengan format YYYY-MM-DD HH:MM:SS

CHAR (M)

String dengan panjang karakter tetap seseuai dengan yang

ditentukan, maksimal 255 karakter

VARCHAR (M) String dengan panjang value yang dinamis

BLOB Teks dengan panjang maksimum 65535 karakter

LONGBLOB Teks dengan panjang maksimum 4294967295 karakter

a. Char(M)

Tipe data ini digunakan untuk menyimpandata string dengan jumlah karakter tertentu.Panjang maksimum karakter tipe data Charharus dinyatakan secara eksplisit seperticontoh berikut: Judul CHAR(50);

b. Varchar(M)

Tipe data ini cocok digunakan untukmenyimpan data string dengan panjang yangbervariasi. Sama seperti tipe data Char,panjang maksimum karakter yang akanditampung dalam field harus dinyatakan dengan tipe data Varchar(M) seperti contoh berikut: Judul VARCHAR(50);

(47)

Tipe data ini digunakan untuk menyimpan data integer dengan nilai berkisar antara 2147483648 sampai 2147483647.Panjang maksimum karakter dalam tipe data ini dinyatakan dengan integer (M).

Atribut tambahan [unsigned] dapat dicantumkan untuk mengubah kisaran nilai dari 0 sampai 4294967295. Atribut tersebut menggeser kisaran nilai negatif tipe data Int(M) sehingga data dengan tipe

Int(M)[Unsigned] selalu bernilai positif. Pada gambar 2.2 adalah contoh

tipe data Int(M)[Unsigned]:

Gambar 2.11 Contoh tipe data Int(M)[Usingned]

d. Date

Tipe data ini digunakan untuk menyimpan informasi seputar penanggalan. Format default tipe data Date adalah YYYY-MM-DD.

e. Date time

Tipe data ini digunakan untuk menyimpan informasi penanggalan yang lebih terperinci. Format default tipe data Datetime adalahYYYY-MM-DD HH:MM:SS.

f. Text dan Blob

Nilai INT;

Integer valid:’-2001’

Integer tidak valid:’3000000000’ Nilai INT unsigned;

(48)

Tipe data Text dan Blob digunakan untuk menyimpan data string dengan jumlah karakter antara 255 sampai 65535. Perbedaan antara tipe data Text dan Blob terletak pada sifat case sensitive yang hanya dimiliki oleh tipe data Blob.

2.11 DBMS

DBMS (Database Management System) merupakan perangkat lunak atau program komputer yang dirancang secara khusus untuk memudahkan pengelolaan database.Secara sederhana, database (basis data) dapat di ungkapkan sebagai suatu pengorganisasian data dengan bantuan komputer, yang memungkinkan data dapat di akses dengan mudah dan cepat. Dalam hal ini, pengertian akses dapat mencakup pemerolehan data maupun pemanipulasian data, seperti menambah dan menghapus data. Manajemen modern mengikutsertakan informasi sebagai sumber daya penting yang setara dengan sumber daya manusia, uang, mesin, dan material. Bagi pihak manajemen, informasi merupakan bahan untuk pengambilan keputusan.

MySQL merupakan salah satu contoh dari bentuk produk RDBMS

(49)

3.1. Analisa Sistem

Dalam sub bab ini akan dijelaskan mengenai analisa dan perancangan Toko Online CV. Bintang Inovasi Gemilang. Aplikasi ini dikembangkan dengan menggunakan teknologi PHP sebagai teknologi programmingnya. Pengguna aplikasi ini terdiri dari administrator dan user yang mempunyai hak akses sesuai kebutuhan masing-masing pengguna.

Administrator merupakan pengguna yang mempunyai hak akses tertinggi

dalam sistem ini sedangkan user mempunyai hak akses terbatas yaitu melakukan pembelian barang.

3.2. Per ancangan Sistem

Dalam rancang bangun web interaktif ini, dibuat beberapa perancangan yang menjelaskan penggambaran sistem secara umum dan menyeluruh, system perancangan tersebut diantaranya adalah : deskripsi umum sistem, perancangan proses, use case, activity diagram,

collaboration diagram dan juga sequence diagram.

3.2.1. Deskr ipsi Umum Sistem

(50)

Dalam penggunaanya, aplikasi manajemen stok ini dapat digunakan oleh dua kategori user, yaitu administrator dan user.

Tabel Berikut merupakan Tugas dan Hak masing-masing user atau pengguna website.

Tabel 3.1 Hak akses masing-masing user atau pengguna

Kategori User Tugas Hak Akses

Administr ator Mengelola data barang dan pasok barang

Menambah, menghapus atau mengedit data barang dan data supplier

User Melihat produk

3.2.2. Per ancangan Pr oses

Dalam sub-bab ini dijelaskan mengenai perancangan proses dari

system yang akan dibuat nantinya. Dalam perancangan proses ini akan

dijelaskan secara detail menggunakan Unified Modeling Language (UML).

3.3.Flowchar t

Flowchart adalah penggambaran secara grafik dari langkah-langkah dan urut - urutan prosedur dari suatu program.

Flowchart berfungsi :

(51)

2 . memudahkan pelacakkan sumber kesalahan program. 3 . untuk menerangkan logika program.

4 . menolong analis dan programmer untuk memecahkan masalah kedalam segmen-segmen yang lebih kecil.

5 . menolong dalam menganalisis alternatif-alternatif lain dalam pengoperasian.

Flowchart biasanya mempermudah penyelesaian suatu masalah khususnya masalah yang perlu dipelajari dan dievaluasi lebih lanjut. Pada Flowchart tersebut terdapat 2 proses yang terlibat, yaitu: user & admin.

(52)

Gambar 3.2 Flowchart Admin

3.4.Use Case Sistem

Use case sistem menggambarkan fungsionalitas yang diharapkan

(53)

Gambar 3.3 Use Case Sistem

3.5. Activity Diagr am

Activity use case menggambarkan workflow proses bisnis dan

urutan aktivitas dalam sebuah proses. Diagram ini mirip dengan

flowchart, keuntungan dengan dibuatnya diagram ini pada awal

pemodelan untuk membantu memahami keseluruhan proses. Activity use

case juga bermanfaat untuk menggambarkan parallel behaviour atau

menggambarkan interaksi beberapa use case.

3.5.1 Login admin M engelola Da ta Jenis Produk

(54)

Halam an adm in

M asukkan usern am e & passw or d

Dashbo ard admin St art

End Valid

Ya

Tidak Fo rm login

Gambar 3.4 Activity Diagram Login Admin

3.5.2 Mengelola Data Produk

Gambar 3.5 adalah Activity diagram Admin untuk mengelola data produk, dimana didalamnya terdapat langkah-langkah untuk menambah dan mengubah data produk.

(55)

3.5.3. Mengelola Data J enis Produk

Gambar 3.6 adalah Activity diagram Admin untuk Mengelola data Jenis Produk. dimana didalamnya terdapat langkah-langkah untuk menambah dan mengubah data jenis produk.

Gambar 3.6 Activity Diagram Mengelola Data Jenis Produk.

3.5.5. Mengelola Konfir masi Pembayaran

(56)

Pil ih menu konfirmasi pem bayaran

Pilih ubah dat a konfirmasi pembayaran

Ubah stat us konfirmasi pembayaran Sist em menampilkan dat a konfirmasi pem bayaran

End Berhasil

Ya

Tidak

Gambar 3.7 Activity Diagram Mengelola Data Konfirmasi Pembayaran.

3.5.6. Mengelola Data Ar tikel

(57)

Gambar 3.8 Activity Diagram Mengelola Data Artikel

3.5.7. Menambah Data Galeri

(58)

Gambar 3.9 Activity Diagram Mengelola Data galeri

3.5.8. Mengelola Data Download

(59)

Gambar 3.10 Activity Diagram Mengelola Data Download

3.5.9. Mengelola Data Administr ator

(60)

Gambar 3.11 Activity Diagram Mengelola Data administrator

3.5.10.Menambah Data User

(61)

Gambar 3.12 Activity Diagram Mengelola Data User

3.5.11.Mengelola Profil

Gambar 3.13 adalah Activity diagram admin yang digunakan untuk mengelola data profil jika ada perubahan pada data profil.

(62)

3.5.12.Registr asi User

Gambar 3.14 adalah Activity diagram user yang digunakan untuk registrasi

Gambar 3.14 Activity Diagram registrasi

3.5.13.Login User

(63)

Gambar 3.15 Activity Diagram Login User

3.5.14.Melihat Ar tikel

Gambar 3.16 adalah Activity diagram user yang digunakan untuk melihat artikel yang terdapat pada menu artikel.

(64)

3.5.15.Melihat Galeri

Gambar 3.17 adalah Activity diagram user yang digunakan untuk melihat galeri yang terdapat pada menu galeri.

Gambar 3.17 Activity Diagram Melihat Galeri

3.5.16.Lihat Produk

Gambar 3.18 adalah Activity diagram user yang digunakan untuk melihat produk yang terdapat pada menu produk.

Gambar 3.18 Activity Diagram Melihat Produk

3.5.17.Pembelian Pr oduk

(65)

Gambar 3.19 Activity Diagram Pembelian Produk

3.5.18.Konfirmasi Pembayaran User

Gambar 3.20 adalah Activity diagram user yang digunakan untuk melakukan konfirmasi pembayaran barang yang dipesan.

Halaman home

Tampil dat a pesanan

masukkan dat a konfirmasi pemesanan Pilih menu pesanan

End Berhasil

Ya

Tidak St art

(66)

3.6. Sequence Diagram

Sequence diagram menunjukkan langkah-langkah kerja sama

obyek-obyek di dalam use case. Obyek apa saja yang dibutuhkan untuk aliran, pesan apa saja yang obyek kirimkan ke obyek lainnya,dan urutan pesan-pesan yang dikirimkan.

3.6.1. Sequence Diagram Admin Mengelola Data Produk

Gambar 3.21 Diagram Sekuensial Untuk Use Case mengelola Data Produk

Admin akan menambah produk dengan menggunakan fasilitas tambah produk, dengan terlebih dahulu mengisi form yang sudah di sediakan dan setelah itu menyimpannya, kemudian diproses oleh sistem untuk disimpan di dalam database.

(67)

3.6.2. Sequence Diagram Admin Mengelola Data J enis Barang

Gambar 3.22 Diagram Sekuensial Untuk Use Case mengelola Data Jenis Barang

Jika admin akan menambah, mengedit, menghapus data produk, maka terlebih dahulu mengisi form yang sudah disediakan, kemudian data inputan tadi diproses oleh sistem, jika data-data yang dimasukkan benar akan diproses untuk di simpan ke dalam database.

3.6.3. Sequence Diagram Admin Ubah Konfir masi Pembayaran / v iew / cont r olle r / m ode l

1 : update konfirmasi pembay aran()

2 : act ion updat e()

3 : membaca model()

(68)

Admin akan mengubah data-data konfirmasi pembayaran yang sudah dibayar. Yang nantinya digunakan untuk data laporan konfirmasi pembayaran oleh pihak admin.

3.6.4. Sequence Diagram Admin Mengelola Data Ar tikel

Gambar 3.24 Diagram Sekuensial Untuk Use Case mengelola Data artikel

Admin membuka data artikel, kemudian jika ingin menambah artikel baru admin bisa memilih menu tambah artikel selain itu admin juga bisa mengubah dan juga menghapus data artikel.

(69)

3.6.5. Sequence Diagram Admin Mengelola Data Galeri

Gambar 3.25 Diagram Sekuensial Untuk Use Case mengelola Data Galeri

Admin membuka data galeri, kemudian jika ingin menambah galeri baru admin bisa memilih menu tambah galeri selain itu admin juga bisa mengubah dan juga menghapus data galeri.

3.6.6. Sequence Diagram Admin Mengelola Data Download / v iew / co nt r oller / m odel 5 : update data galeri()

6 : action update() 9 : hapus data download()

10 : action hapus()

(70)

Admin membuka data download, kemudian jika ingin menambah download baru admin bisa memilih menu tambah download selain itu admin juga bisa mengubah dan juga menghapus data download.

3.6.7. Sequence Diagram Admin Mengelola Data Administrator

Gambar 3.27 Diagram Sekuensial Untuk Use Case mengelola Data administrator

Admin membuka data administrator, kemudian jika ingin menambah administrator baru admin bisa memilih menu tambah

(71)

3.6.8. Sequence Diagram Admin Mengelola Data User

Gambar 3.28 Diagram Sekuensial Untuk Use Case mengelola Data user

Admin membuka data user, kemudian jika ingin menambah user baru admin bisa memilih menu tambah user selain itu admin juga bisa mengubah dan juga menghapus data user.

3.6.8. Sequence Diagram Admin Mengubah Profil

(72)

Admin akan mengubah data-data profil perusahaan. Yang nantinya digunakan sebagai informasi profil perusahaan yang ditampilkan kepada user.

3.6.9. Sequence Diagram User Untuk Registr asi

Gambar 3.30 Diagram Sekuensial Untuk Use Case registrasi

User akan memasukkan data-data registrasi seperti username & password untuk login. Yang nantinya digunakan untuk melakukan transaksi pembelian.

/ v iew / co nt r oller / m od el

/ d at ab ase

/ use r

1 : input data user()

2 : action create()

3 : membaca model()

(73)

3.6.10.Sequence Diagram User Untuk Melihat Artikel

Gambar 3.31 Diagram Sekuensial Untuk Use Case melihat artikel

User bisa melihat data artikel yang tersedia dengan memilih menu artikel.

3.6.11.Sequence Diagram User Untuk Melihat Galeri

Gambar 3.32 Diagram Sekuensial Untuk Use Case melihat galeri

/ v ie w / co nt r o lle r / m o del

/ user

1 : pilih menu art ikel()

2 : act ion view()

3 : membaca model()

4 : t ampilkan()

/ v ie w / co nt r o lle r / m o del

/ user

1 : pilih menu galeri()

2 : act ion view()

3 : membaca model()

(74)

User bisa melihat data galeri yang tersedia dengan memilih menu galeri.

3.6.12.Sequence Diagram User Untuk Melihat Produk

Gambar 3.33 Diagram Sekuensial Untuk Use Case melihat produk

User bisa melihat data produk yang tersedia dengan memilih menu produk.

3.6.13.Sequence Diagram User Untuk Pembelian Pr oduk

Gambar 3.34 Diagram Sekuensial Untuk Use Case pembelian produk

(75)

User membuka produk lalu memilih produk yang akan dibeli dengan memasukkan data-data produk yang dibeli, kemudian sistem akan menampilkan daftar pesanan kepada user.

3.6.9. Sequence Diagram User Untuk Menambahkan Konfirmasi Pembayaran

Gambar 3.35 Diagram Sekuensial Untuk Use Case tambah konfirmasi pembayaran

User bisa melihat data pembelian yang sebelumnya sudah dibeli, setelah itu memasukkan konfirmasi pembayaran agar admin mengetahui pembayaran yang telah user lakukan.

3.7. Collaboration Diagr am

Sebagaimana diagram sekuensial, diagram kolaborasi digunakan untuk menampilkan aliran scenario tertentu di dalam use case. Jika diagram sekuensial disusun dalam urutan waktu, diagram kolaborasi lebih berkosentrasi pada hubungan anatara obyek-obyek.

/ v iew / co nt r oller / m ode l

/ dat abase

/ use r

1 : input konfirmasi pembay aran()

2 : act ion creat e()

3 : membaca model()

(76)

3.7.1. Collaboration Diagram Mengelola Data Pr oduk

Gambar 3.36 Diagram Kolaborasi Mengelola data produk

Langkah pertama untuk mengelola data produk adalah dengan input/update/delete data produk, kemudian request aksi ke controller, lalu dari controller membaca model post & setelah ditampilkan akan disimpan ke database.

3.7.2. Collaboration Diagram Mengelola Data J enis Produk

Gambar 3.37 Diagram Kolaborasi Mengelola jenis produk

(77)

controller, lalu dari controller membaca model post & setelah ditampilkan akan disimpan ke database.

3.7.3. Collaboration Diagram Ubah Konfirmasi Pembayaran

Gambar 3.38 Diagram Kolaborasi ubah konfirmasi pembayaran

Admin membuka data konfirmasi pembayaran kemudian mengubah data konfirmasi pembayaran setelah menerima pembayaran dari user.

(78)

Langkah pertama untuk Mengelola data artikel adalah dengan input/update/delete data artikel, kemudian request aksi ke controller, lalu dari controller membaca model post & setelah ditampilkan akan disimpan ke database.

3.7.5. Collaboration Diagram Kelola Data Galeri

Admin

6. t ampilkan at t ribut model post

Gambar 3.40 Diagram Kolaborasi Mengelola data galeri

(79)

3.7.6. Collaboration Diagram Mengelola Data Download

Gambar 3.41 Diagram Kolaborasi Mengelola data download

Langkah pertama untuk Mengelola data download adalah dengan input/update/delete data download, kemudian request aksi ke controller, lalu dari controller membaca model post & setelah ditampilkan akan disimpan ke database.

3.7.7. Collaboration Diagram Mengelola Data Administr ator

Gambar 3.42 Diagram Kolaborasi Mengelola data administrator

(80)

controller, lalu dari controller membaca model post & setelah ditampilkan akan disimpan ke database.

3.7.8. Collaboration Diagram Mengelola Data User

Gambar 3.43 Diagram Kolaborasi Mengelola data user

Langkah pertama untuk Mengelola data user adalah dengan input/update/delete data user, kemudian request aksi ke controller, lalu dari controller membaca model post & setelah ditampilkan akan disimpan ke database.

3.7.9. Collaboration Diagram Ubah Profil

(81)

Admin membuka data profil kemudian mengubah data profil kedalam form yang sudah disediakan.

3.7.10.Collaboration Diagram Registr asi User

Gambar 3.45 Diagram Kolaborasi registrasi user

user memasukkan data registrasi seperti username & password yang nantinya digunakan untuk melakukan transaksi pembelian.

3.7.11.Collaboration Diagram Lihat Data Ar tikel

Gambar 3.46 Diagram Kolaborasi lihat data artikel

(82)

3.7.12.Collaboration Diagram Lihat Data Galeri

Gambar 3.47 Diagram Kolaborasi lihat data galeri

Gambar diatas menunjukkan bahwa user sedang melihat data galeri dengan cara membuka menu data galeri.

3.7.13.Collaboration Diagram Lihat Data Produk

Gambar 3.48 Diagram Kolaborasi Lihat Data produk

(83)

3.7.14.Collaboration Diagram Transaksi Pembelian

3. membaca m odel post

4. t ampilkan at t ribut model post 6. t ampilkan pesanan

Gambar 3.49 Diagram Kolaborasi Transaksi Pembelian

Gambar diatas menunjukkan bahwa user sedang melakukan transaksi pembelian, setelah itu data pembelian akan masuk kedalam database.

3.7.15.Collaboration Diagram Tambah Konfirmasi Pembayaran

Admin View

1. input konf pembayar an

Controller Database

Model

2. request aksi 5. simpan

3. membaca m odel post

4. t ampilkan at t ribut model post

Gambar 3.50 Diagram Kolaborasi tambah konfirmasi pembayaran

(84)

3.8. Diagr am Kelas

Class diagram menggambarkan struktur dan deskripsi class,

package dan object serta hubungan satu sama lain seperti containment,

pewarisan, asosiasi, lain-lain. Class diagram terdiri dari relasi beberapa class, dalam class itu sendiri terdiri dari atributte dan operation yang menggambarkan keadaan suatu sistem juga menawarkan layanan untuk memanipulasi keadaan tersebut (metoda/fungsi).

+creat e()

(85)

Penjelasan dari gambar di atas yaitu :

1. Class pembeli mempunyai atribut sebagai berikut :

a. Id_pembeli

Memilki keterhubungan langsung dengan Class konfirmasi_pembayaran.

2. Class konfirmasi_pembayaran mempunyai atribut sebagai berikut :

(86)

g. Tanggal h. Kode_validasi i. Pemegang_rek j. No_rek

k. status

Memilki keterhubungan langsung dengan Class pemesanan.

3. Class rek_tujuan mempunyai atribut sebagai berikut :

a. Id_rek_tujuan b. Nama_bank c. No_rek

d. Pemegang_bank

Memilki keterhubungan langsung dengan class konfirmasi_pembayaran.

4. Class pemesanan mempunyai atribut sebagai berikut :

a. No_faktur b. Id_pembeli c. tanggal

Memilki keterhubungan langsung dengan Class detail_pesanan.

5. Class detail_pesanan mempunyai atribut sebagai berikut :

a. Id_detail_pesanan b. No_faktur

(87)

d. Jumlah e. Total_harga

Memilki keterhubungan langsung dengan Class produk_detail.

6. Class produk_detail mempunyai atribut sebagai berikut :

f. Id_produk_detail g. Id_produk h. Harga.

Memilki keterhubungan langsung dengan Class produk.

7. Class cart mempunyai atribut sebagai berikut :

a) Id_cart

b) Id_produk_detail c) Jumlah

d) Total_harga e) Tanggal

Memilki keterhubungan langsung dengan Class produk_detail.

8. Class produk mempunyai atribut sebagai berikut :

(88)
(89)

BAB IV

HASIL DAN PEMBAHASAN

4.1 Hasil Dan Pembahasan

Tahap hasil dan pembahasan merupakan tahap penciptaan perangkat lunak, tahap kelanjutan dari kegiatan perancangan sistem. Tahap ini merupakan tahap meletakkan sistem supaya siap untuk di operasikan dan dapat dipandang sebagai usaha untuk mewujudkan sistem yang telah dirancang.

Langkah - langkah dalam tahap implementasi ini adalah urutan kegiatan awal perancangan sistem yang yang dibuat untuk membuat sebuah rancangan sistem yang nantinya sistem tersebut dapat di jalankan pada saat sistem tersebut dilakukan uji coba agar sistem tersebut dapat berjalan sesuai dengan kebutuhan yang di rancang sebelumnya dan sistem tersebut dapat di operasikan pada awal uji coba sampai akhir uji coba sistem.

Untuk mewujudkan sistem yang telah dirancang adalah dengan mengetahui lingkungan implementasi sistem agar sistem tersebut berjalan sesuai dengan rancangan dan melakukan implementasi program.

4.2 Uji Coba Aplikasi

(90)

dan hasil uji cobanya yang bertujuan untuk mengetahui kegunaan setiap skenario semuanya dapat berfungsi dengan baik dan lancar.

4.2.1. Pengujian Sistem Untuk Form Login Admin

Pada gambar 4.1 menunjukkan halaman login admin dimana username dan password harus di isi dengan data yang valid.

Gambar 4.1 Antar Muka Login.

Jika login berhasil maka akan masuk ke dalam menu utama seperti gambar dibawah ini.

(91)

4.2.2. Pengujian Sistem Input Data Produk

Pada gambar 4.3 menunjukkan halaman form untuk input data produk.

Gambar 4.3 Antar Muka Input data produk.

Jika input data berasil maka sistem akan menampilkan data produk yang ditambahkan, seperti gambar dibawah ini.

(92)

4.2.3. Pengujian Sistem Untuk Ubah Data Produk

Pada gambar 4.5 menunjukkan form halaman untuk mengubah data produk, pada halaman ini hanya bagian admin yang mempunyai hak akses untuk mengubah data produk.

Gambar 4.5 Antar Muka Halaman Ubah data produk.

Jika data user berhasil di ubah maka sistem akan menampilkan data user seperti pada gambar dibawah ini.

(93)

4.2.4. Pengujian Sistem Untuk Input Data J enis Produk

Pada gambar 4.7 menunjukkan form input data produk seperti gambar berikut.

Gambar 4.7 Antar Muka Input Data Jenis produk.

Jika input data berhasil maka sistem akan menampilkan data jenis produk seperti pada gambar berikut.

Gambar 4.8 Antar Muka Data jenis produk.

4.2.5. Pengujian Sistem Untuk Ubah Data jenis produk

(94)

Gambar 4.9 Antar Muka Form Ubah Data jenis produk.

Jika data berhasil diubah maka sistem akan menampilkan data sebagai berikut.

Gambar 4.10 Antar Muka Data jenis produk.

4.2.6. Pengujian Sistem Untuk Ubah Data Konfirmasi Pembayaran

(95)

Gambar 4.11 Antar Muka Form Ubah Data konfirmasi pembayaran. Jika data berhasil diubah maka sistem akan menampilkan data sebagai berikut.

(96)

4.2.7. Pengujian Sistem Untuk Input Data Ar tikel

Pada gambar 4.13 menunjukkan form untuk input data artikel pada gambar berikut.

Gambar 4.13 Antar Muka Untuk Input Data artikel.

Jika data berhasil diinputkan maka sistem akan menampilkan data sebagai berikut

(97)

4.2.8. Pengujian Sistem Untuk Ubah Data Ar tikel

Pada gambar 4.15 menunjukkan form untuk mengubah data artikel, seperti pada gambar berikut.

Gambar 4.15 Antar Muka Ubah Suplier. Halaman data artikel setelah berhasil diubah.

(98)

4.2.9. Pengujian Sistem Untuk Input Data Administr ator

Pada gambar 4.17 menunjukkan form untuk input data Administrator seperti gambar dibawah ini.

Gambar 4.17 Antar Muka input data administrator.

Berikut tampilan data administrator jika berhasil di inputkan.

Gambar 4.18 Antar Muka Data Barang.

4.2.10.Pengujian Sistem Untuk Ubah Data Administrator

(99)

Gambar 4.19 Antar Muka Ubah Data administrator. Berikut tampilan data administrator setelah diubah.

Gambar 4.20 Antar Muka Data administrator.

4.2.11.Pengujian Sistem Untuk Input Data User

(100)

Gambar 4.21 Antar Muka Input Data user. Berikut tampilan data user jika berhasil di inputkan.

Gambar 4.22 Antar Muka Data user.

4.2.12.Pengujian Sistem Untuk Ubah Data User

(101)

Gambar 4.23 Antar Muka update data user Berikut tampilan data user jika berhasil di ubah.

(102)

4.2.13.Pengujian Sistem Untuk Ubah Data Profil

Pada gambar 4.25 menunjukkan form untuk ubah data profil, seperti pada gambar dibawah ini.

(103)

Gambar 4.26 Antar Muka Data Profil.

4.2.14.Pengujian Sistem Untuk Pembelian Barang Bagian User

Pada gambar 4.27 menunjukkan halaman data produk, seperti gambar berikut.

Gambar 4.27 Antar Muka data produk.

(104)

Gambar 4.28 Antar Muka keranjang belanja.

Setelah itu klik tombol masukkan ke keranjang belanja maka akan diarahkan ke halaman checkout, seperti yang ditunjukkan pada gambar berikut.

Gambar 4.29 Antar Muka checkout.

Figure

Gambar 2.3 Use Case

Gambar 2.3

Use Case p.38
Gambar 3.19 Activity Diagram Pembelian Produk

Gambar 3.19

Activity Diagram Pembelian Produk p.65
Gambar 3.20 Activity Diagram konfirmasi pemesanan

Gambar 3.20

Activity Diagram konfirmasi pemesanan p.65
Gambar 3.21 Diagram Sekuensial Untuk Use Case mengelola Data Produk

Gambar 3.21

Diagram Sekuensial Untuk Use Case mengelola Data Produk p.66
Gambar 3.23  Diagram Sekuensial Untuk Use Case ubah konfirmasi pembayaran

Gambar 3.23

Diagram Sekuensial Untuk Use Case ubah konfirmasi pembayaran p.67
Gambar 3.24 Diagram Sekuensial Untuk Use Case mengelola Data artikel

Gambar 3.24

Diagram Sekuensial Untuk Use Case mengelola Data artikel p.68
Gambar 3.25 Diagram Sekuensial Untuk Use Case mengelola Data Galeri

Gambar 3.25

Diagram Sekuensial Untuk Use Case mengelola Data Galeri p.69
Gambar 3.26 Diagram Sekuensial Untuk Use Case mengelola Data Download

Gambar 3.26

Diagram Sekuensial Untuk Use Case mengelola Data Download p.69
Gambar 3.27 Diagram Sekuensial Untuk Use Case mengelola Data administrator

Gambar 3.27

Diagram Sekuensial Untuk Use Case mengelola Data administrator p.70
Gambar 3.29 Diagram Sekuensial Untuk Use Case mengubah profil

Gambar 3.29

Diagram Sekuensial Untuk Use Case mengubah profil p.71
Gambar 3.32 Diagram Sekuensial Untuk Use Case melihat galeri

Gambar 3.32

Diagram Sekuensial Untuk Use Case melihat galeri p.73
Gambar 3.31 Diagram Sekuensial Untuk Use Case melihat artikel

Gambar 3.31

Diagram Sekuensial Untuk Use Case melihat artikel p.73
Gambar 3.34 Diagram Sekuensial Untuk Use Case pembelian produk

Gambar 3.34

Diagram Sekuensial Untuk Use Case pembelian produk p.74
Gambar 3.35 Diagram Sekuensial Untuk Use Case tambah konfirmasi

Gambar 3.35

Diagram Sekuensial Untuk Use Case tambah konfirmasi p.75
Gambar 3.37 Diagram Kolaborasi Mengelola jenis produk

Gambar 3.37

Diagram Kolaborasi Mengelola jenis produk p.76
Gambar 3.36 Diagram Kolaborasi Mengelola data produk

Gambar 3.36

Diagram Kolaborasi Mengelola data produk p.76
Gambar 3.38 Diagram Kolaborasi ubah konfirmasi pembayaran

Gambar 3.38

Diagram Kolaborasi ubah konfirmasi pembayaran p.77
Gambar 3.39 Diagram Kolaborasi Mengelola data artikel

Gambar 3.39

Diagram Kolaborasi Mengelola data artikel p.77
Gambar 3.40 Diagram Kolaborasi Mengelola data galeri

Gambar 3.40

Diagram Kolaborasi Mengelola data galeri p.78
Gambar 3.42 Diagram Kolaborasi Mengelola data administrator

Gambar 3.42

Diagram Kolaborasi Mengelola data administrator p.79
Gambar 3.41 Diagram Kolaborasi Mengelola data download

Gambar 3.41

Diagram Kolaborasi Mengelola data download p.79
Gambar 3.43 Diagram Kolaborasi Mengelola data user

Gambar 3.43

Diagram Kolaborasi Mengelola data user p.80
Gambar 3.44 Diagram Kolaborasi ubah profil

Gambar 3.44

Diagram Kolaborasi ubah profil p.80
Gambar 3.45 Diagram Kolaborasi registrasi user

Gambar 3.45

Diagram Kolaborasi registrasi user p.81
Gambar 3.46 Diagram Kolaborasi lihat data artikel

Gambar 3.46

Diagram Kolaborasi lihat data artikel p.81
Gambar 3.47 Diagram Kolaborasi lihat data galeri

Gambar 3.47

Diagram Kolaborasi lihat data galeri p.82
Gambar 3.48 Diagram Kolaborasi Lihat Data produk

Gambar 3.48

Diagram Kolaborasi Lihat Data produk p.82
Gambar 3.51 Diagram Kelas CV. Bintang Inovasi Gemilang.

Gambar 3.51

Diagram Kelas CV. Bintang Inovasi Gemilang. p.84
Gambar 4.4 Antar Muka Halaman produk.

Gambar 4.4

Antar Muka Halaman produk. p.91
Gambar 4.5 Antar Muka Halaman Ubah data produk.

Gambar 4.5

Antar Muka Halaman Ubah data produk. p.92

References

Scan QR code by 1PDF app
for download now

Install 1PDF app in