PENERAPAN FRAMEWORK IONIC TOKO ONLINE

KERAJINAN TANGAN KORAN

(Studi Kasus : Toko Wirawan Pontianak)

SKRIPSI

Disusun Untuk Memenuhi Salah Satu Syarat Memperoleh

Gelar Sarjana Komputer

Oleh

AMALIA DWI ANGGRAINI

172101850

JURUSAN TEKNIK INFORMATIKA

PEMINATAN TEKNOLOGI WEB

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

PONTIANAK
2021
 PENERAPAN FRAMEWORK IONIC TOKO ONLINE
KERAJINAN TANGAN KORAN
(Studi Kasus : Toko Wirawan Pontianak)

SKRIPSI

Disusun Untuk Memenuhi Salah Satu Syarat Memperoleh

Gelar Sarjana Komputer

OLEH :

AMALIA DWI ANGGRAINI

NIM. 172101850

Disetujui Oleh :

Ketua Jurusan Teknik Informatika

PONTI HARIANTO, S.KOM., M.CS

NIPY. 1408085

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER PONTIANAK

PONTIANAK
2021

ii
 DAFTAR ISI

COVER...........................................................................................................................i

LEMBAR PENGESAHAN...........................................................................................ii

DAFTAR ISI................................................................................................................iii

BAB 1 PENDAHULUAN.............................................................................................1

1.1 Latar Belakang.............................................................................................1

1.2 Perumusan Masalah.....................................................................................5

1.3 Batasan Masalah..........................................................................................6

1.4 Ruang Lingkup............................................................................................6

1.5 Tujuan dan Manfaat Penelitian....................................................................6

1.5.1 Tujuan Penelitian..........................................................................6

1.5.2 Manfaat Penelitian........................................................................6

1.6 Sistematika Penulisan..................................................................................7

BAB 4 METODOLOGI PENELITIAN........................................................................8

4.1 Bentuk dan Metode Penelitian.....................................................................8

4.2 Metode Pengumpulan Data.........................................................................9

4.3 Teknik Pengumpulan Data........................................................................10

4.3.1 Observasi....................................................................................10

4.3.2 Wawancara.................................................................................10

4.4 Metode Pengembangan Perangkat Lunak.................................................11

4.5 Pemodelan Sistem......................................................................................12

iii
 4.5.1 Use Case Diagram......................................................................12

4.5.2 Activity Diagram........................................................................12

4.5.3 Sequence Diagram......................................................................13

4.6 Pengujian Perangkat Lunak.......................................................................13

DAFTAR PUSTAKA..................................................................................................14

LAMPIRAN WAWANCARA............................................................................17

iv
 BAB 1

PENDAHULUAN

1.1 Latar Belakang

Ilmu teknologi pada era globalisasi saat ini tiap tahunnya mengalami

perubahan tanpa kita sadari. Hal ini terjadi karena semakin meningkat dan

beragamnya kebutuhan manusia akan teknologi, menandakan teknologi memiliki

peranan penting bagi masyarakat. Salah satu teknologi yang sering digunakan adalah

perancangan sebuah perangkat lunak pada sebuah sistem.

Banyak orang berpikir bahwa perangkat lunak hanyalah kata lain untuk

program komputer, namun ketika berbicara tentang rekayasa perangkat lunak selain

tentang data konfigurasi yang diperlukan juga membahas tentang dokumentasi

sistem, menjelaskan struktur sistem, dokumentasi pengguna dan menjelaskan

bagaimana menggunakan sistemnya (Sommerville,2016:19). Walaupun sudah banyak

perangkat lunak yang dirancang oleh mobile (android), website masih tetap

digunakan dan populer dikalangan masyarakat. Kebutuhan yang diperlukan bagi

masyarakat salah satunya adalah berbelanja online melalui website.

Website merupakan media penyampaian informasi atau sebagai media

promosi yang dinilai efektif dan efisien karena dengan bantuan jaringan internet

pengguna dapat menjelajah tanpa batas ruang dan waktu (Fristanto, 2014 ).

Merancang sebuah website dibutuhkan arsitektur website yang memadai demi

1
 2

mendukung keberhasilannya perangkat lunak yang ingin dirancang. Arsitektur

website yang dimaksud adalah kerangka website yang akan dirancang mengikuti

kebutuhan pengguna. Arsitektur suatu website adalah kerangka kerja (framework)

komprehensif yang menggambarkan bentuk dan struktur yang mana memiliki

komponen dan dapat menyatu utuh secara bersama-sama (Pressman,Bruce,

2016:253). Untuk menghasilkan arsitektur website yang optimal dibutuhkan sebuah

framework yang memadai. Jenis framework yang akan digunakan pada toko online

kerajinan tangan kertas koran pada Toko Wirawan ini adalah Framework Ionic.

Framework Ionic adalah sekumpulan teknologi yang dikembangkan untuk

membangun aplikasi mobile hybrid yang powerful, cepat, mudah dan memiliki

tampilan yang menarik. Ionic menggunakan AngularJS sebagai framewok berbasis

web dan menggunakan Cordova untuk membangun aplikasi mobile. Aplikasi Hybrid

adalah aplikasi yang menggabungkan teknologi aplikasi web dan aplikasi native,

tetapi tampilan dan cara kerja aplikasi hybrid lebih seperti web daripada aplikasi

mobile (Suhaidi, 2020). Melalui pendekatan hybrid, pengembang dapat mengodekan

frameworknya sendiri, mengambil keuntungan dari browser dan kemampuan

perangkat mobile. Salah satu kelebihan Ionic Framework yaitu dapat dijalankan di

mobile operating system yang berbeda seperti android,iOS, dan Windows Phone serta

tidak perlu mengkoding berulang-ulang.

Hal yang memicu peneliti untuk menerapkan framework Ionic toko online

kerajinan tangan koran pada Toko Wirawan adalah proses penjualan kerajinan tangan

yang dilakukan secara konvensional dan melalui whatsapp (untuk pelanggan lama),
 3

sehingga penjelasan detil tentang produk yang dijual pada Toko Wirawan tidak dapat

memikat calon pelanggan baru. Berdasarkan hasil wawancara dengan Ibu Tuty

Rusdawati selaku pemilik Toko Wirawan mengatakan bahwa pemasaran produk

sudah bekerja sama dengan UMKM Centre Pontianak (Usaha Mikro Kecil

Menengah) selama 2 tahun untuk memajang beberapa sampel produk Toko Wirawan

di sana. UMKM Centre dikenal sebagai tempat menampilkan produk-produk UMKM

seperti galeri yang dihasilkan pelaku/pengrajin UMKM Kota Pontianak. Namun, hal

tersebut hanya dapat dijangkau oleh orang-orang yang mengunjungi UMKM Centre

saja dan produk yang ditampilkan di sana tidak mencantumkan informasi mengenai

pembuatan dan pemesanan barangnya. Padahal produk yang dihasilkan Toko

Wirawan bisa menghasilkan banyak kreasi produk lebih dari sampel yang dipajang

pada UMKM Centre Kota Pontianak.

Toko Wirawan merupakan toko kerajinan tangan terbuat dari koran yang

sistem kerjanya secara custom dan menghasilkan produk seperti bingkai cermin

dinding,bingkai jam dinding, pot bunga dengan berbagai ukuran, tempat tissue, dan

baki (alas penyajian makanan dan minuman). Produk-produk tersebut dapat dipesan

secara custom dengan tersedianya beberapa pilihan hiasan tambahan dengan estimasi

pembuatan selama 2-4 hari. Kemudian hasil observasi yang dilakukan peneliti di

UMKM Centre Pontianak mendapatkan hasil bahwa rata-rata pengunjung UMKM

Centre Pontianak merupakan pengguna smartphone android dan iOS. Oleh karena itu

peneliti ingin membuat web toko online kerajinan tangan Toko Wirawan

menggunakan framework Ionic yang mana nantinya calon pelanggan yang tertarik
 4

pada produk kerajinan tangan Toko Wirawan dapat memesan langsung pada website

dengan smartphone masing-masing.

Dalam perancangan perangkat lunak, penggunaan framework ionic saja

tidaklah cukup harus diiringi dengan penengah yang dapat mengintegrasikan antara

satu service dengan service lainnya. Teknologi web pada umumnya diidentifikasi

dengan menggunakan URL dan hanya mengandung informasi, perintah, serta

konfigurasi yang digunakan untuk jembatan penghubung antar sistem (Swono, 2017).

Pengkonfigurasikan antar service yang diterapkan pada toko online Wirawan ini yaitu

menggunakan SOA (Service Oriented Architecture) dan sistem terdistribusi. Konsep

SOA yang digunakan pada toko online Wirawan ini adalah bagaimana

mengintegrasikan jumlah pesanan yang masuk pada halaman admin dengan pesanan

yang telah dibuat oleh pengguna. SOA digunakan ketika adanya transaksi pertukaran

informasi atau data dari berbagai platform aplikasi yang berbeda (Andika, 2015).

Pengintegrasian antar database toko Wirawan juga saling berkaitan agar terciptanya

perangkat lunak yang memadai. Sistem terdistribusi secara tidak langsung diterapkan

pada penampilan dan penggunaan toko online Wirawan dengan berbagai platform

yang berbeda karena karakteristik sistem terdistribusi sama fungsinya sebagai

middleware (perantara) yang menerjemahkan pesan dan tampilan pengguna kepada

server sehingga dapat berkomunikasi.

Diharapkan dengan adanya toko online berbasis framework Ionic pada Toko

Wirawan dapat membantu calon pelanggan membeli ataupun mendapatkan informasi

mengenai produk-produk yang dimiliki oleh Toko Wirawan dengan tampilan melalui
 5

android dan iOS. Informasi detil terkait produk kerajinan tangan Toko Wirawan ini

nantinya akan diinformasikan di UMKM Centre Pontianak sehingga pengunjung

UMKM Centre Pontianak dapat mengetahuinya. Framework Ionic juga dapat

menghasilkan kinerja yang lebih tinggi dibandingkan aplikasi mobile biasa (tanpa

framework).

Pada penelitian sebelumnya (Dewanti,Permana,2017) menghasilkan tampilan

UI (User Interface) perangkat lunak yang berbeda menggunakan Ionic 2 Framework

dan Angular 2. Dengan bantuan Ionic 2 Framework aplikasi dapat dikembangkan

dengan fungsionalitas lengkap yang dapat dijalankan di mobile operating system yang

berbeda seperti android, iOS, dan windows phone. Penelitian sebelumnya juga

(Rofiq, Putri, 2017) menghasilkan aplikasi pemesanan rumah sakit menggunakan

Ionic Framework berbasis mobile phone. Pembuatan aplikasi didasarkan karena

banyaknya para pengguna smartphone dan tablet. Aplikasi dibuat agar pasien dapat

mengakses informasi atau melakukan pemesanan fasilitas dimanapun dan kapanpun.

Pembuatan aplikasi pada smartphone dirancang dengan mengunakan Ionic

Framework dengan dasar PHP, JavaScript Framework Angular JS, dan Node js.

Hasil survey pengguna pada aplikasi tersebut menunjukkan tingkat kepuasan sebesar

80,13%.

Dari permasalahan diatas, maka peneliti ingin menerapkan framework Ionic

toko online kerajinan tangan kertas koran pada Toko Wirawan,yang diharapkan dapat

menampilkan tampilan yang berbeda namun fungsi yang sama pada berbagai sistem

operasi baik android dan iOS.

 6

1.2 Perumusan Masalah

Rumusan masalah dari penelitian ini adalah bagaimana menerapkan

framework Ionic toko online pada kerajinan tangan kertas koran studi kasus Toko

Wirawan Pontianak?

1.3 Batasan Masalah

Batasan masalah pada penelitian iniyaitu menerapkan framework Ionic toko

online pada kerajinan tangan kertas koran studi kasus Toko Wirawan Pontianak.

1.4 Ruang Lingkup Penelitian

Ruang lingkup pada pengerjaan penelitian ini adalah menerapkan framework

Ionic toko online pada kerajinan tangan kertas koran studi kasus Toko Wirawan

Pontianak.Pada aplikasi ini hanya berfokus pada sistem kerja Toko Wirawan

Pontianak, untuk pengambilan barang akan disediakan option di web bahwa

pelanggan dapat mengambil ke toko langsung atau menggunakan jasa Go-send.

Produk yang dihasilkan pada Toko Wirawan dapat di custom dengan adanya pilihan

hiasan tambahan yang disediakan dari Toko Wirawan dan memakan waktu

pembuatan sekitar 2-4 hari. Jika pelanggan ingin menambah detil tentang produk

yang akan dipesan, di aplikasi pemesanan ini akan disediakan kolom note request.

Bentuk penelitian ini adalah studi kasus dengan metode penelitian DSR (Design

Science Research).

Sistem pemesanan kerajinan tangan akan dirancang dengan bahasa

pemrograman HTML5, CSS dan JavaScript. Tools bantuan yang akan digunakan

menggunakan ionic CLI (Command-Line Interface) dan ionic viewApp. Perangkat

 7

lunak bantuan yang digunakan adalah Apache Cordova,Visual Studio Code. Database

yang digunakan adalah MySQL,metode pengembangan perangkat lunak

menggunakan prototype. Alat pemodelan untuk menggambarkan sistem

menggunakan United Modeling Language (UML), serta alat pengujian menggunakan

black-box testing.

1.5 Tujuan dan Manfaat Penelitian

1.5.1 Tujuan Penelitian

Tujuan dari penelitian ini adalah merancang framework Ionic toko online pada

kerajinan tangan kertas koran studi kasus Toko Wirawan Pontianak, sehingga selain

memudahkan pengembang untuk merancang perangkat lunak juga dapat mengatasi

kendala yang dihadapi oleh pegawai Toko Wirawan Pontianak. Penelitian ini juga

bertujuan untuk menampilkan tampilan website toko online dengan multiplatform

tanpa coding berulang-ulang.

1.5.2 Manfaat Penelitian

Manfaat dari penelitian ini adalah :

a. Bagi peneliti :

Dapat menerapkan menerapkan framework Ionic toko online pada kerajinan

tangan kertas koran studi kasus Toko Wirawan Pontianak.dan

mengimplementasikan bahasa pemrograman HTML, CSS dan JavaScript.

b. Bagi universitas :

Menambah referensi/literatur kepustakaan Sekolah Tinggi Manajemen

Informatika dan Komputer Pontianak, dan bahan masukkan bagi mahasiswa/i

 8

Sekolah Tinggi Manajemen Informatika dan Komputer Pontianak dalam

pengembangan penulisan ataupun penelitian lanjutan dari penulisan penelitian

ini.

c. Bagi pengguna :

Dengan adanya web toko online kerajinan tangan kertas studi kasus Toko

Wirawan Pontianak dengan menerapkan framework Ionic, diharapkan dapat

memudahkan konsumen untuk memesan barang kerajinan tangan custom dari

jarak jauh.

1.6 Sistematika Penulisan

BAB 1 PENDAHULUAN

Pada bab ini menjelaskan tentang latar belakang, rumusan masalah, batasan

masalah,ruang lingkup, tujuan dan manfaat penelitian,dan sistematika

penulisan.

BAB 2 LANDASAN TEORI DAN KERANGKA PEMIKIRAN

Dalam bab ini berisi tentang tinjauan pustaka, landasan teori, dan kerangka

pemikiran. Tinjauan pustaka menjabarkan hasil dari penelitian terdahulu

dalam bentuk jurnal, landasan teori membahas mengenai teori-teori yang

digunakan yang mendukung dalam perancangan aplikasi sedangkan kerangka

pemikiran merupakan suatu penjelasan tentang kerangka berpikir secara

sistematik untuk memecahkan masalah yang sedang diteliti.

 9

BAB 3 GAMBARAN UMUM TOKO WIRAWAN PONTIANAK

Bab ini berisi gambaran umum tentang informasi objek penelitian, visi serta

struktur organisasi.

BAB 4 METODOLOGI PENELITIAN

Dalam bab ini berisikan uraian tentang bentuk penelitian yang digunakan,

teknik pengumpulan data, metode pengumpulan data, instrumen dan variabel

penelitian, metode analisis dan perancangan perangkat lunak. Bab ini akan

dijabarkan metode penelitian apa yang digunakan, analisa terhadap

permasalahan sistem yang berjalan, penerapan framework Ionic toko online

pada kerajinan tangan kertas koran studi kasus Toko Wirawan Pontianak.

BAB 5 HASIL PENELITIAN

Bab ini berisi tentang bentuk penelitian, metode pengumpulan data, teknik

pengumpulan data, serta instrumen data dan variabel penelitian.

BAB 6 PENUTUP

Bab ini berisi tentang kesimpulan dan saran terkait penelitian yang dilakukan.

Saran dapat memicu untuk dilanjutkan pada penelitian selanjutnya.

 BAB 2

LANDASAN TEORI DAN KERANGKA PEMIKIRAN

2.1 Landasan Teori

2.1.1 Service Oriented Architecture

Menurut (Matjaz B., Ramesh L, 2007:57) “SOA adalah aplikasi yang didesain

untuk menyediakan layanan yang dikonsumsi oleh proses bisnis atau aplikasi

integrasi lainnya. SOA juga memberikan pelayanan konsep desain dan arsitektur.

Konsep desain dalam SOA adalah tentang merancang perangkat lunak atau sistem

yang memiliki interface yang menggambarkan diri sendiri dengan baik, serta layanan

yang disusun ke dalam proses bisnis. Arsitekturnya adalah tentang mekanisme

sederhana yang digunakan akses interface untuk mengintegrasi suatu perusahaan

atau instansi.”

Menurut Erl (2005), “ SOA merupakan arsitektur perangkat lunak yang

dibangun menggunakan prinsip-prinsip perancangan berprientasi service,sedangkan

orientasi service merupakan konsep dalam rekayasa perangkat lunak yang

mempresentasikan pendekatan berbeda untuk memisahkan kepentingan. Hal ini

berarti bahwa fungsionalitas sistem dipecah ke dalam unit logic yang lebih kecil

yang dinamakan dengan service. Service-service ini lepas satu sama lain, tetapi

mempunyai kemampuan untuk berinteraksi satu sama lain melalui mekanisme

komunikasi tertentu, oleh karena itu komponen SOA didefinisikan sebagai service,

10
 11

description, dan messages”. Service berkomunikasi dengan yang lain melalui

message yang memungkinkan satu sama lain yang diacu sebagai servuce requestor

dan service provider. Service requestor adalah service yang memangil service lain,

sedangkan yang dipanggil disebut service provider. Service sendiri dapat dipandang

sebagai enkapsulasi logic dari satu atau sekumpulan aktivitas tertentu. Otomatisasi

proses bisnis merupakan sekumpulan aktivitas yang disusun dalam langkah-langkah

sebagai implementasi proses bisnis. Setelah seluruh permasalahan dapat dibagi dalam

beberapa service, solusi dari permasalahan tersbut harus bisa diselesaikan dengan

memungkinkan seluruh service berpartisipasi dalam sebuah orkestrasi. Untuk itu ada

beberapa permasalahan yang harus dimiliki oleh service yaitu bagaiaman service

yaitu bagaimana service saling berhubungan, bagaimana service berkomunikasi,

bagaimana service didesain, dan bagaimana pesan antar service didefinisikan (Erl,

2005).

2.1.2 Ionic Framework

Menurut (Sani Yusuf, 2016:5) “Ionic adalah sebuah framework yang dapat

dibangun sebagai aplikasi hybrid mobile dengan teknologi web seperti HTML5, CSS,

dan JavaScript. Ionic menyediakan komponen yang dapat digunakan untuk membuat

fitur seperti aplikasi native untuk aplikasi mobile. Kebanyakan fiturnya terdiri dari

modal, gestur, notifikasi, dan banyak lagi dimana semua itu disediakan oleh Ionic dan

mudah diperpanjang/diperbarui untuk fitur baru atau mengkustomnasikan kebutuhan

yang dinginkan.”
 12

Framework Ionic adalah kombinasi beberapa device dan perintah-perintah

yang memungkinkan para developer untuk membangun hybrid mobile apps secara

cepat dengan menggunakan teknologi yang sama untuk membuat website dan web

applications, terutama HTML, CSS (Cascading Style Sheets), dan JavaScript. Ionic

didesain untuk membuat aplikasi mobile hybrid yang cepat, mudah dan 16 bagus.

Ionic dibangun diatas sistem yang didalamnya terdapat Angular sebagai web

application framework dan cordova yang berguna membuat aplikasi menjadi aplikasi

native (Wilken: 2016,1-2).

Gambar 2.1 Susunan Framework Ionic (Sumber: Wilken:2016)

Susunan framework Ionic pada perancangan Toko Online Toko Wirawan

berdasarkan skema susunan framework ionic di atas adalah perangkat akan

ditampilkan dalam tiga sistem operasi yaitu android, iOS, dan Windows. Pengguna

nantinya dapat melakukan akses biasa seperti login, dan melihat produk-produk dari

Toko Wirawan. Peran cordova yaitu sebagai pembantu tampilan webview android

pada tampilan android dan iOS. Untuk tampilan windows terdapat komponen angular

sebagai framework berbasis website. Untuk arsitektur mengenai perancangan Ionic

pada Toko Wirawan Pontianak yaitu dapat di lihat di bawah ini.

 13

Gambar 2.2 Arsitektur Framework Ionic Toko Wirawan Pontianak

Aplikasi yang sudah terinstall pada perangkat pengguna nantinya dapat

melakukan pertukaran data dengan tampilan API yang terkonfigurasi dengan database

Toko Wirawan Pontianak. Ketika pengguna meminta suatu perintah maka API akan

memproses kemudian meneruskan ke database dan mengembalikan lagi informasinya

untuk diterima oleh pengguna. Tentunya database yang ada pada Toko Wirawan

sudah diinput oleh admin/pegawai Toko Wirawan. Pada dashboard admin/pegawai

Toko Wirawan dapat mengontrol informasi data yang telah di input oleh pengguna

melalui tampilan API.

Menurut Anditya (2015:6-7) kelebihan menggunakan dari Framework Ionic,

sebagai berikut:

a. Ionic untuk pengembang

Ionic mampu memenuhi kebutuhan pengembang yang menginginkan aplikasi
yang cepat.
1. Dapat dibangun dengan platform web
2. Dibangun dengan AngularJS. Bagi yang sudah familiar dengan
Angular, tentu Ionic adalah pilihan terbaik.
3. Teknologi terkini, Ionic didesain agar dapat bekerja dengan fitur-fitur
modern CSS, seperti animasi.
 14

4. CLI tools. Dengan adanya Command Line Tool, anda dapat dengan
cepat mengembangkan aplikasi melalui browser.
b. Ionic untuk pemilik bisnis
Ini dikarenakan framework ini juga disebut hybrid mobile app. Artinya, satu
aplikasi yang dibangun dengan Ionic mampu bekerja di Android dan iOs.
1. Hemat biaya. Tidak perlu menghabiskan untuk dua platform. Karena
satu aplikasi yang dibangun dengan dapat bekerja di Android dan iOs.
2. Open-source. Tidak perlu membayar royalti untuk hak cipta, karena
sepenuhnya Ionic ini berlisensi untuk open source.
3. Mudah dikembangkan. Membuat aplikasi dengan Ionic tidak butuh
waktu yang lama. Dengan waktu singkat, aplikasi sudah bisa langsung
running.
c. Ionic untuk pengguna
1. Desain yang menarik. Ionic didesain sehingga dapat bekerja dan secara
desain dapat digunakan pada hampir semua mobile platform sekarang
ini.
2. Performansi. Dengan mengurangi manipulasi DOM, tidak Jqeury dan
hardware accelerated transitions, membuat Ionic menjadi salah satu
framework yang relatif cepat sekarang ini.
3. Didukung di Android dan iOs. Saat ini ionic telah dapat digunakan
pada platform Android dan iOs.

2.1.3 HTML 5

HTML adalah sebuah bahasa markup yang menjadi pusat dari struktur desain

sebuah website (Powell, 2010). Kode yang berada di belakang setiap tampilan

halaman website ini memungkinkan pengembang website untuk menciptakan

tampilan dari sebuah halaman website sesuai dengan yang diinginkannya.

Dikembangkan pertama kali oleh Tim Berners-Lee pada tahun 1989, HTML menjadi

bahasa markup yang terus berkembang hingga saat ini (David,2010). Salah satu hal

yang menyebabkan HTML menjadi bahasa yang sukses dalam perkembangannya

adalah konsep sederhana akan penggunaan tag yang menandai awal maupun akhir

dari sebuah bagian. Hingga saat ini, HTML4 menjadi bahasa markup standar yang

digunakan untuk mengembangkan website. Pada tahun 2007, sebuah tim yang
 15

bernama Web Standards Project memulai untuk membuat generasi penerus dari

HTML, yaitu HTML generasi ke 5 (David, 2010).

Perbedaan utama HTML5 dan HTML4 adalah adanya tambahan API

(Application Programming Interfaces) Javascript dalam spesifikasinya. Tambahan

API ini memampukan adanya interaksi dengan elemen multimedia di dalam

peramban (Devlin,2012). HTML5 juga mengembangkan antarmuka pengguna (user

interface), kemampuan akses (accessability), efek visual (visual effect), multimedia

yang semakin tidak bergantung pada plug-ins, dan web sockets yang menjadikan

koneksi dengan web server menjadi lebih persisten (Hogan,2013).

Peran HTML 5 pada perancangan Toko Online Wirawan Pontianak adalah

sebagai peran utama penting dalam pembangunan website toko ini. Dengan

framework Ionic salah satu Bahasa mark-up yang relevan adalah menggunakan

HTML 5. Meskipun tidak berbeda jauh dengan HTML 4 tetap saja menggunakan

HTML 5 terdapat fitur-fitur tambahan yang mendukung untuk proses perancangan

Toko Online Wirawan Pontianak ini.

2.1.4 CSS

Menurut Jayan (2010:2) mengemukakan bahwa “CSS adalah untuk mengatur

tampilan dokumen HTML, contohnya seperti pengaturan jarak antar baris, teks,

warna , dan format border bahkan penampilan file gambar”. Menurut Nugroho (2004)

“Bahasa desain web yang diformat tampilan sebuah halaman web dengan

perancangan desain text berupa font, color, margin, size, dan lain-lain. CSS
 16

menjadikan halaman web lebih interaktif, menarik, dan elegan hanya dengan

menambahkan beberapa baris kode di dalamnya”.

Penggunaan CSS pada perancangan Toko Online Wirawan yaitu sebagai

bagian pendukung untuk mempercantik tampilan toko online. Dengan menggunakan

CSS, tampilan Toko Online Wirawan akan lebih bervariasi dan tidak monoton,

sehingga dapat menjadi salah satu daya Tarik calon pelanggan untuk berbelanja

online.

2.1.5 JavaScript

Menurut Solichin (2016:11) “JavaScript dikembangkan oleh Netscape dengan

nama awal LiveScript yang berfokus pada proses pengolahan data di sisi client dan

menyajikan komponen web yang lebih interaktif serta berfungsi untuk menambah

fungsionalitas dan kenyamanan halaman web.”

Menurut Wicaksono (2011:1) mengemukakan bahwa “JQuery adalah library

atau sekumpulan kode JavaScript siap pakai”, sedangkan menurut Kun (2010:1)

“JQueary adalah salah satu library JavaScript. Dengan JQueary dapat melakukan

banyak hal yang tidak bisa dilakukan oleh HTML maupun CSS”. Menurut Rahman

(2012:8) “JQuery adalah sebuah keajaiban dalam dunia web design untuk

mempermanis atau memperindah tampilan website.”

2.1.6 Perancangan Database

Ada beberapa pendekatan yang dapat digunakan dalam merancang basis data,

yaitu (Indrajani, 2011:51):

 17

a. Pendekatan bottom-up, dimulai dari level dasar attribute (property entity

dan relationship) menganalisa hubungan antara attribute
mengelompokkannya dalam suatu relasi yang menggambarkan tipe dan
relasi antara entity. Pendekatan ini sesuai bagi basis data dengan jumlah
attribute yang sedikit.
b. Pendekatan top-down, diawali dengan membuat data model. Pendekatan
top-down dapat diilustrasikan menggunakan Entity Relationship (ER)
model yang high level. Lalu mengidentifikasi entity dan relationship antar
entity organisasi. Pendekatan ini sesuai bagi basis data yang kompleks.
c. Inside-out , mirip dengan pendekatan bottom-up, perbedaannya adalah
pada tahap awal mengidentifikasi major entity lalu menguraikannya
menjadi entity-entity, relasi-relasi, dan atribut-atribut yang berhubungan
dengan major entity.
d. Mixed, menggunakan pendekatan bottom-up dan top-down.
Menurut Connolly (2010:65), database adalah kumpulan berbagai data logika

terkait dan deskripsi, yang dirancang untuk memenuhi kebutuhan informasi

organisasi.

Perancangan basis data (database design) merupakan proses membuat desain

yang akan mendukung operasional dan tujuan perusahaan. Tujuan perancangan basis

data adalah (Indrajani, 2011:51).

a. Menggambarkan relasi data antara data yang dibutuhkan oleh aplikasi dan

user view.

b. Menyediakan model data yang mendukung seluruh transaksi yang

diperlukan.

c. Menspesifikasikan desain dengan struktur yang sesuai dengan kebutuhan

sistem.

Menurut (Kursini, 2007:140) ,beberapa istilah penting yang digunakan dalam

basis data adalah sebagai berikut :

 18

a. Elemen Data.

Elemen data merupakan salah satu nilai tunggal dengan satu petunjuk nama

dan deskripsi karakteristik seperti tipe (char, int, varchar),panjang karakter

atau digit.

b. Item Data.

Item data merupakan referensi nama dan himpunan karakteristik elemen-

elemen data yang menggambarkan suatu atribut atau merupakan tempat

menyimpan setiap atribut dari sebuah entitas.

Menurut Saputro, 2008:2 “MySQL dapat juga dikatakan sebgai Relational

Database Management System (RDBMS), yaitu : hubungan antar table yang berisi

data-data pada suatu database. Dengan demikian dapat mempercepat pencarian suatu

data”.

2.2 Perancangan Perangkat Lunak

Menurut Pressman (2010), "Rekayasa perangkat lunak adalah pembuatan

pernagkat lunak dengan menggunakan prinsip rekayasa yang kuat untuk

menghasilkan perangkat lunak yang ekonomis, handal, dan bekerja secara efesien".

Menurut Rosa dan Shalahuddin (2015), "Perangkat Lunak (software) adalah program

komputer yang terasosiasi dengan dokumentasi perangkat lunak seperti dokumentasi

kebutuhan, modal desain, dan cara penggunaan (user manual). Sebuah program

komputer tanpa terasosiasi dengan dokumentasinya maka belum dapat disebut

pernagkat lunak (software)".

 19

Karakteristik dari perangkat lunak adalah (Rosa dan Shalahuddin, 2013):

a. Perangkat lunak dibangun dengan rekayasa (software engineering), bukan

diproduksi secara manufaktur atau pabrikan.

b. Perangkat lunak tidak pernah using ("wear out") karena kecacatan dalam

perangkat lunak dapat diperbaiki.

c. Barang diproduksi pabrikan biasanya komponen barunya akan terus

diproduksi, sedangkat perangkat lunak biasanya terus diperbaiki seiring

bertambahnya kebutuhan.

Menurut Rosa dan Shalahuddin (2015), “Rekayasa perangkat lunak

(software engineering) merupakan pembangunan dengan mengunakan prisnsip atau

konsep rekayasa dengan tujuan menghasilkan perangkat lunak yang bernilai ekonomi

yang dipercaya dan bekerja secara efesien menggunakan mesin". Perangkat lunak

lebih fokus pada praktik pengembangan perangkat lunak dan mengirimkan perangkat

lunak yang bermanfaat kepada pelanggan (costumer). Adapun ilmu komputer lebih

fokus pada toeri dan konsep dasar perangkat komputer. Rekayasa perangkat lunak

lebih fokus bagaimana membuat perangkat lunak yang memenuhi kriteris berikut

(Rosa dan Shalahuddin, 2013):

a. Dapat terus dipelihara setelah perangkat lunak selesai dibuat seiring

berkembangnya teknologi dan lingkungan (maintainability).

b. Dapat diandalkan dengan proses bisnis yang dijalankan dan perubahan

yang terjadi (dependability dan robust).

 20

c. Efisien dari segi sumber daya penggunaan kemampuan untuk dipakai

sesuai dengan kebutuhan usability).

2.3 Perancangan Input

Perancangan masukan (input) merupakan tahap awal dimulainya proses

informasi yang sangat mempengaruhi proses keluaran, oleh sebab itu perlu didesain

dengan baik. Tujuan dari rancangan masukkan adalah untuk mengefektifkan biaya

pemasukan data, mencapai keakuratan tinggi dan memahami pemasukan data yang

dapat diterima dan dimengerti oleh pemakai.

Menurut Jogiyanto (2005:375), “Input adalah awal dimulainya proses

informasi bahan mentah dari informasi adalah data yang terjadi dari interaksi-

interaksi yang dilakukan oleh organisasi. Data dari hasil transaksi merupakan

masukan untuk sistem informasi”. Menurut Kadir (2003:36), “Masukan (input)

adalah segala sesuatu memasukkan ke dalam sistem dan selanjutnya menjadi bahan

untuk diproses. Pada sistem informasi, masukkan dapat berupa data transaksi dan

non-transaksi (misalnya surat pemberitahuan) serta instruksi”.

Tahapan-tahapan proses input menurut Jogiyanto (2005:215):

a. Penangkapan data (data capture, merupakan proses mencatat kejadian

nyata yang terjadi akhibat transaksi yang dilakukan oleh organisasi ke

dalam dokumen dasar sebagai bukti transaksi.

b. Penyiapan data (data preparation), merupakan mengubah data yang telah

ditangkap ke dalam bentuk yang dapat di baca oleh mesin.

 21

c. Pemasukan data (data entry), merupakan proses membacakan atau

memasukkan data ke dalam komputer.

Menurut Kendall (2003:65),perancangan masukan merupakan,“Proses

mendesain suatu masukan data ynag baik dimana data tersebut dapat dikonversi

menjadi bentuk yang dapat diproses oleh mesin, lalu menjadi keluaran baik pula”.

Input merupakan langkah awal dimulainya proses informasi. Tanpa adanya input,

suatu sistem informasi tidak akan mampu berjalan dan berfungsi karena data yang

dibutuhkan untuk pemorsesan tidak ada, oleh sebab itu input harus dirancang sebaik

mungkin.

2.4 Perancangan Output

Keluaran (output) merupakan hasil dari proses data didalam sistem informasi.

Data yang diperoleh terjadi pada transaksi-transaksi yang dilakukan oleh organisasi

yang merupakan bahan mentah untuk menghasilkan informasi. Tujuan dari rancangan

keluaran yaitu untuk menentukan keluaran dari sistem yang baru. Kendal (2003:46)

mengatakan bahwa “Output adalah informasi atau data yang berguna untuk sistem

informasi atau sistem pendukung keputusan kepada pengguna”. Output bermanfaat

untuk emmastikan pengguna dna penerima informasi mendapatkan hasil akhir sesuai

dengan kebutuhan maupun keinginan.

Menurut Jogiyanto (2005:220), perancangan output merupakan langkah

penyusunan desain output yang dibutuhkan untuk sistem yang baru decara lebih

detail. Perancangan output merupakan kegiatan perancangan yang paling penting dan

memerlukan perhatian khusus karena pemakai akan berinteraksi langsung dengan

 22

output yang dihasilkan oleh sistem dan mengandalkan output untuk menyelesaikan

tugas-tugas.

Menurut Kendal (2003:27), langkah-langkah yang harus diperhatikan dalam

perancangan output yaitu :

a. Menentukan kebutuhan akan laporan tersebut.

b. Menentukan pengguna.
c. Menentukan item-item data yang dimasukkan.
d. Mengestimasi ukuran laporan secara keseluruhan.
e. Judul laporan
f. Nomor halaman laporan
g. Memasukkan tanggal persiapan laporan

Output adalah produk dari sistem informasi yang dapat dilihat, dan berupa

tampilan dilayar monitor, hasil cetakan pada kertas dan hasil dari suatu proses yang

akan dipergunakan oleh proses yang lain dalam bentuk file didalam media-media

penyimpanan. Oleh sebab itu, analisis sistem harus bekerjasam dengan pemakai

untuk menciptakan output yang brmanfaat sesuai dengan kebutuhan pemakai.

 23

2.5 Penelitian Terdahulu

Penelitian terdahulu ini menjadi salah satu acuan peneliti dalam melakukan penelitian sehingga peneliti dapat

memperkaya teori yang digunakan dalam mengkaji penelitian yang dilakukan. Dari penelitian terdahulu, peneliti tidak

menemukan penelitian dengan judul yang sama seperti judul penelitian peneliti. Namun peneliti mengangkat beberapa

penelitian sebagai referensi dalam memperkaya bahan kajian pada penelitian peneliti. Berikut merupakan penelitian

terdahulu berupa beberapa jurnal terkair dengan penelitian yang dilakukan.

Tabel 2.1
Penelitian Terdahulu
No. Judul Penelitian Penulis Tahun Publikasi Ringkasan

1. Penerapan Framework Ionic Mustazzhim 2020 Jurnal Sebatik Data merupakan aset yang paling

Dalam Perancangan Suhaidi, berharga pada saat kampanye atau

Aplikasi E-Concept Sebagai Nurhaidi, sosialisasi karena dapat berfungsi

Alat Terukur Dalam Latip sebagai alat utama sebuah indikator

Perekrutan Simpatisan keberhasilan dan pencapaian target

Pemilukada kampanye sebagai bahan

 24

No. Judul Penelitian Penulis Tahun Publikasi Ringkasan

pertimbangan dalam mengambil

keputusan, terutama meningkatkan

efisiensi biaya dan efektifitas

gerakan Tim Kampanye. E-Concept

adalah Software Aplikasi alat ukur

dalam perekrutan simpatisan

Pemilukada yaitu sebagai alat ukur

untuk memenangkan

pemilu/pilkada dengan

memanfaatkan teknologi informasi

dan komunikasi dalam pengolahan

data serta teknik statistika dalam

membaca dan mendesain prediksi

peluang bagi calon atau kandidat.

 25

No. Judul Penelitian Penulis Tahun Publikasi Ringkasan

Ionic Framework merupakan salah

satu solusi yang dapat

dipergunakan, dimana penggunaan

Ionic Framework memungkinkan

pengembang membuat aplikasi

untuk beberapa platform dengan

hanya menggunakan bahasa

pengembangan web untuk

membuat sebuah aplikasi mobile,

sehingga dapat meminimalkan

waktu dan biaya dalam proses

pengembangan sistem berikutnya.

2. Perancangan Sistem M. Rofiq, 2017 Jurnal Ilmiah Pembuatan aplikasi ini didasarkan

Pemesanan Rumah Sakit di Suci Imani Teknologi karena banyaknya para pengguna
 26

No. Judul Penelitian Penulis Tahun Publikasi Ringkasan

Kota Malang Menggunakan Putri Informasi Asia smartphone dan tablet. Aplikasi

Ionic Framework berbasis dibuat agar pasien dapat mengakses

Mobile Phone informasi atau melakukan

pemesanan fasilitas dimanapun dan

kapanpun.Dalam aplikasi terdapat

beberapa fitur yang dapat

memudahkan pengguna dalam

mendapatkan kemudahan tanpa

harus mendatangi pihak rumah

sakit dalam proses pemesanan.

Proses perancangan web

administrator dan Aplikasi

menggunakan Mekanisme MVC

yang merupakan system

 27

No. Judul Penelitian Penulis Tahun Publikasi Ringkasan

pengembangan aplikasi yang

terpisah, Komponen utama berbasis

itu yang membangun aplikasi

seperti manipulasi data (Model),

user interface (View), dan bagian

kontrol (Controller) dalam aplikasi

web. Implementasi MVC (Model

View Controller) dengan

CodeIgniter Framework, membuat

system pada aplikasi menjadi lebih

mudah untuk dikembangkan oleh

pengembang berikutnya.

Pembuatan Aplikasi pada

smartphone dibuat dengan

 28

No. Judul Penelitian Penulis Tahun Publikasi Ringkasan

menggunakan Ionic Framework

dengan dasar PHP, JavaScript

Framework AngularJS, dan

Node.js. Setelah melalui proses

pengujian yang telah dilakukan,

aplikasi yang dibuat menampilkan

informasi berupa jadwal poliklinik

serta nama dokter, melakukan

pemesanan pada poliklinik yang

disediakan pihak rumah sakit,

pemesanan kamar untuk rawat inap,

serta mengetahui jumlah tagihan

yang harus dibayarkan.

3. Mobile Hybrid Application Ari Muzakir, 2018 Jurnal Perangkat mobile saat hampir
 29

No. Judul Penelitian Penulis Tahun Publikasi Ringkasan

sebagai Solusi Dalam Eksen Informatika: digunakan oleh seluruh lapisan

Pelaporan Bencana Hidiansyah Jurnal masyarakat. Berbagai platform

Menggunakan Framework Pengembangan yang tersedia pada smartphone

Cordova IT (JPIT) seperti Android, iOS, Windows

Mobile memberikan peluang yang

besar serta menjadi tantangan bagi

pengembang aplikasi. Masalahnya

adalah bahwa pengembang aplikasi

harus mampu menyesuaikan

kebutuhan dari platform yang

tersedia. Solusi dari masalah

tersebut adalah teknologi mobile

hybrid application, dimana

teknologi ini memungkinkan

 30

No. Judul Penelitian Penulis Tahun Publikasi Ringkasan

pengembang aplikasi dalam

menjembatani setiap platform

smartphone yang berbeda-beda

menggunakan framework cordova.

Framework cordova

memungkinkan pengembang

aplikasi membangun mobile

application dengan menggunakan

HTML5, CSS, dan javascript (JS).

Dalam penelitian ini lebih fokus

pada ujicoba teknologi mobile

hybrid application untuk

membangun aplikasi mobile

pelaporan bencana pada Badan

 31

No. Judul Penelitian Penulis Tahun Publikasi Ringkasan

penanggulangan bencana Daerah

(BPBD) Sumatera Selatan. Hasil

ujicoba berupa aplikasi android dan

windows phone melalui beberapa

pengujian antara lain kemudahan

dalam proses build aplikasi,

publishing, dan konfigurasi.

Diharapkan dengan perangkat

lunak aplikasi mobile hybrid ini

dapat membantu lembaga

penanggulangan bencana di

wilayah Sumatera bagian selatan

dalam kesiapan menghadapi

bencana yang terjadi di masyarakat.

32
 33

2.5 Kerangka Pemikiran

Kerangka pemikiran merupakan suatu penjelasan yang sistematik untuk

memecahkan masalah pada suatu penelitian. Adapun kerangka pemikiran yang

melandasi permasalahan yang ada, serta target yang ingin dicapai dari penelitian ini

seperti gambar berikut ini:

Gambar 2.1 Kerangka Pemikiran

Kerangka pemikiran yang peneliti buat dimulai dari pemahaman masalah

yang dialami ketika melakukan penelitian. Kemudian dari permasalahan yang didapat

peneliti menjabarkan permasalahan-permasalahan yang sesuai dengan metode yang

tepat dalam penelitian yang diinginkan. Adapun tahapan yang dilakukan yaitu
 34

merancang web toko online Toko Wirawan dengan menggunakan framework Ionic .

Pengujian perangkat lunak menggunakan black-box testing dengan pengembangan

perangkat lunak Prototype. Prototype dan hasil aplikasi yang dibuat mampu untuk

memasarkan dan menjual produk dengan lebih luas dan modern sehingga

memudahkan pemilik toko dan pelanggan yang menggunakannya.

 BAB 3

GAMBARAN UMUM TOKO WIRAWAN PONTIANAK

3.1 Tinjauan Umum Toko Wirawan Pontianak

Toko Wirawan adalah sebuah toko wirausaha kerajinan tangan dari berkas

koran yang menghasilkan produk layak pakai seperti pot bunga,hiasan jam

dinding,hiasan cermin dinding, kotak tempat pensil, dan baki. Pemilik toko ini

bernama Bu Tuty Rusdawati yang sudah mengelola bisnis kewirausahaan ini sejak

tahun 2010. Toko dikelola sendiri oleh Ibu Tuty Rusdawati dan ada beberapa pegawai

yang membantu menyelesaikan pemesanan produk untuk dipajang dan

diperjualbelikan. Proses pembuatan produk dilakukan secara custom dengan estimasi

2-4 hari (tergantung rumitnya permintaan dari pelanggan). Dibutuhkan beberapa hari

estimasi karena adanya proses pengeringan produk sehingga produk tidak bisa

langsung siap jadi.

Toko Wirawan bergerak secara mandiri dari 2010 hingga tahun 2017,

kemudian pada tahun 2019 melakukan kerjasama dengan UMKM (Usaha Mikro

Kecil Menengah) Pontianak yang berlokasi di Jalan Sultan Abdurrahman No. 140.

UMKM merupakan tempat pemasaran toko Wirawan sejak tahun 2019, di gedung

tersebut banyak produk wirausaha-wirausaha lainnya yang memajangkan produk

terbaiknya dan ada pula beberapa aktivitas pengrajin menunjukkan cara pembuatan

produknya.

35
 36

3.2 Visi dan Misi Toko Wirawan Pontianak

Berikut ini adalah visi dan misi dari Toko Wirawan Pontianak :

a. Visi

Merubah barang bekas menjadi sesuatu produk yang memiliki value dan

memiliki suatu nilai keestetikan yang berguna bagi masyarakat.

b. Misi

Memanfaatkan barang bekas koran untuk melestarikan dan

mengembangkannya menjadi produk yang bernilai.

3.3 Struktur Organisasi

Struktur organisasi menggambarkan hubungan yang saling mendukung

antara bagian yang satu dengan bagian yang lainnya dalam mencapai tujuan yang

sama. Dengan adanya pembagian kerja yang benar, diharapkan semua bagian

yang terlibat di dalam pekerjaan tersebut dapat mengerti fungsi dan tugas mereka

masing-masing dan mampu mengoptimalkannya. Untuk mencapai tujuan,

diperlukan suatu struktur yang berfungsi untuk menerangkan dan memperjelas

tugas, wewenang dan tanggungjawab masing-masing anggota.

Struktur organisasi yang digunakan oleh Toko Wirawan Pontianak adalah

struktur garis yaitu struktur yang sederhana dan mudah dipahami oleh semua

pihak yang terlibat di dalamnya. Berikut dibawah ini gambar struktur organisasi

Toko Wirawan Pontianak.

 37

Gambar 3.1 Struktur Organisasi Toko Wirawan Pontianak

3.4 Pembagian Tugas dan Tanggung Jawab

Berdasarkan struktur organisasinya, dapat diuraikan tugas dan

tanggungjawab dari masing-masing bagian Toko Wirawan Pontianak.

a. Pemilik

Tugas pemilik adalah menyediakan modal untuk menjalankan usahanya.

Melakukan pengaturan pelaksanaan kegiatan usaha dan mengatur barang

yang akan diperjualkan. Mengelola serta mengemukakan ide-ide dalam

proses penjualan dan memberikan pelayanan terbaik dan professional, serta

selalu berusaha memberikan kepercayaan dan kepuasaan bagi konsumen.

Tugas dari pemilik adalah sebagai berikut:

1. Memutuskan dan menentukan peraturan dan kebijakan tertinggi.

2. Bertanggungjawab dalam memimpin
3. Menetapkan strategi untuk mencapai visi dan misi
4. Mengkoordinasi dan mengawasi kegiatan pembuatan produk, dan
persediaan bahan baku.
5. Mengangkat dan memberhentikan karyawan.
b. Bagian Penjualan

Bagian ini bertugas untuk melayani konsumen, menerima pembayaran dari

konsumen dan mencatat segala hal yang terjadi. Tugas dari bagian

penjualan sebagai berikut :

 38

1. Bertanggung jawab terhadap hasil penjualan produk.

2. Merencanakan strategi penjualan produk

3. Membuat laporan hasil penjualan.

c. Bagian Persediaan Barang

Bagian ini bertugas untuk mengawasi dan mengecek persediaan bahan

baku utama dalam pembuatan produk kerajinan tangan koran yang akan

digunakan.

3.5 Proses Bisnis

Proses bisnis adalah suatu kumpulan aktivitas/pekerjaan terstruktur yang

harus dijalankan. Pertama pembeli melakukan pemesanan custom barang ke Toko

Wirawan Pontianak, selanjutnya pegawai akan menerima catatan pemesanan dan

akan meneruskan laporan pemesanan ke bagian Gudang. Gudang akan memeriksa

Kembali stok bahan baku koran yang ada, jika ada maka pemesanan akan

dilanjutkan ke proses pembuatan barang. Jika tidak, maka menunggu supplier

untuk menyetok kembali koran ke Toko Wirawan.

Ketika proses pembuatan barang telah selesai (est 2-4 hari), akan ditanya

ke pembeli mengenai proses pengambilan barangnya melalui WA (untuk yang

tidak melampirkan informasi mengenai pengambilan barang saat melakukan

pemesanan). Jika ingin memakai jasa Gosend, maka akan dikemas terlebih dahulu

dan menunggu kurir Gosend untuk tiba di Toko Wirawan. Jika pembeli tidak

memilih jasa ekspedisi Gosend, maka pembeli akan mengambil sendiri barang

pesanan ke Toko Wirawan serta melakukan pembayaran tunai. Pegawai akan

menerima pembayaran dan mencatat pada buku penjualan.

 39

Gambar 3.2 Proses Bisnis Toko Wirawan Pontianak

3.6 Proses Bisnis

Proses bisnis adalah suatu kumpulan aktivitas/pekerjaan terstruktur yang

saling terkait untuk menyelesaikan suatu masalah tertentu atau yang menghasilkan

produk. Suatu proses bisnis dapat dipecah menjadi beberapa subprosesnya.

Berikut bagan subprosesnya diantara lain :

 40

Gambar 3.3 Proses Bisnis Toko Wirawan Pontianak

a. Proses Pemesanan

Dalam prosedur penjualan pada Toko Wirawan Pontianak, pertama

pemesanan barang menggunakan system custom yang mana membutuhkan

waktu 2-4 hari kerja. Custom yang berlaku yaitu telah disediakan beberapa

pilihan dari pihak Toko Wirawan berupa ukiran atau tambahan hiasan

yang diinginkan. Harga juga menyesuaikan dengan jenis custom yang

dipilih.

b. Proses Pembayaran

Dalam prosedur pembayaran pada Toko Wirawan Pontianak adalah

menggunakan system COD dan transfer rekening bank. Jika barang sudah

tersedia dan dikeluarkan oleh bagian persediaan barang, maka bagian

pemesanan harus mencatat barang yang dijual. Konsumen yang akan

membeli barang akan menerima kwitansi lunas dari penjualan. Untuk

 41

konsumen yang yang memilih option transfer bank, maka hanya perlu

menunjukkan bukti pembayaran melalui whatsapp.

c. Proses Penerimaan Barang

Dalam prosedur penerimaan barang pada Toko Wirawan Pontianak,

bagian perediaan menerima barang yang masuk dari pemasok (supplier)

dan menandatangani nota pengiriman dari supplier kemudian diserahkan

kepada pemilik Toko Wirawan untuk dicatat ke dalam buku persediaan

sesuai dengan nota yang diterima.

d. Proses Pembuatan Laporan

Dalam prosedur ini, rekap laporan dilakukan secara perbulan dan akan

diserahkan ke pemilik Toko Wirawan Pontianak, Ibu Tuty Rusdawati, dan

memeriksanya secara berkala.

 BAB 4

METODOLOGI PENELITIAN

4.1 Bentuk dan Metode Penelitian

Bentuk penelitian yang digunakan dalam penelitian ini adalah studi kasus.

Konsep utama dari studi kasus adalah suatu pendekatan penelitian yang digunakan

untuk mempelajari,menerangkan,atau menginterpretasi suatu kasus dalam

konteksi yang alamiah. Kasus yang terkait dalam penelitian ini adalah merancang

web toko online dengan objek Toko Wirawan Pontianak. Metode penelitian yang

digunakan adalah metode DSR (Design Science Research).

Metode DSR merupakan kerangka prosedur yang digunakan untuk

mempermudah penelitian di bidang teknologi informasi yang digunakan sebagai

proses pemahaman serta mengulas untuk mengenali dan mengevaluasi hasil

penelitian (Peffers : 2007).

Gambar 4.1 Model DSR (Design Science Research) Sumber: Peffers:2007

Menurut (Peffers:2007) metode DSR (Design Science Research) terdiri

dari enam tahapan sebagai berikut:

a. Identifikasi masalah dan motivasi. Tahap ini merupakan spesifikasi

masalah penelitian dan mencari solusi penyelesaian untuk masalah
pemesanan yang terjadi di Toko Wirawan Pontianak. Dua hal yang
dilakukan untuk mencari solusi adalah berfokus pada peneliti dan pemilik

42
 43

b. Toko Wirawan Ibu Tuty Rusdawati yang nantinya akan mencarikan solusi
dan membantu untuk memahami alasan pemahaman peneliti dari masalah.
c. Mendefinisikan objek dari suatu permasalahan Tahap ini peneliti
menyimpulkan tujuan dari masalah yang ada, dimana tujuannya nanti
diharapkan dapat lebih baik dan dapat mendukung penyelesaian masalah
yang terjadi pada Toko Wirawan Pontianak.
d. Perencanaan dan Pengembangan. Pada tahap ini merupakan tahap
pembangunan model atau metode dan informasi. Secara konsep, desain
penelitian didapatkan dari objek (Toko Wirawan) yang akan dirancang
oleh peneliti.
e. Demonstrasi. Peneliti menunjukkan penggunaan dari sistem pemesanan
yang mana gunanya untuk memecahkan permasalahan yang ada.
f. Evaluasi. Pada tahap ini yang dilakukan adalah mengamati dan mengukur
seberapa baik prototype dalam menyelesaikan masalah yang ada. Tahap
ini dapat melibatkan, membandingkan tujuan baik secara aktual dari hasil
yang diamati pada saat demonstrasi.
g. Komunikasi. Tahap ini merupakan tahap akhir dalam metode penelitian.
Peneliti mengkomunikasikan masalah dan pentingnya rancangan prototype
dengan pemilik Toko Wirawan dalam publikasi penelitian ilmiah. Peneliti
menggunakan jurnal-jurnal ilmiah yang relevan dengan permasalahan
yang terjadi pada Toko Wirawan Pontianak.
4.2 Metode Pengumpulan Data

Metode pengumpulan data yang digunakan dalam penelitian ini adalah

data primer dan data sekunder.

a. Data primer

Data primer merupakan data yang diperoleh secara langsung dari observasi

dan wawancara di Toko Wirawan Pontianak. Data yang dihasilkan dari

observasi adalah melihat secara langsung bagaimana proses pemesanan

yang terjadi di toko, melihat situasinya. Kemudian, wawancara dilakukan

bersama pemilik Toko Wirawan bernama Ibu Tuty Rusdawati untuk

mendiskusikan perancangan Toko Online menggunakan framework Ionic.

b. Data Sekunder
 44

Data sekunder merupakan data yang diperoleh secara tidak langsung

mengenai jumlah produk yang dihasilkan setiap 3 bulan terakhir, berapa

pesanan yang diterima dan selesai,dan berapa banyak perbulannya produk

kerajinan tangan yang dipajang di UMKM Centre Kota Pontianak.

4.3 Teknik Pengumpulan Data

Teknik pengumpulan data yang digunakan oleh penulis dalam penelitian

ini adalah :

4.3.1 Observasi

Peneliti melakukan observasi langsung ke Toko Wirawan untuk melihat

secara langsung bagaimana jalannya sistem kerja di toko, memantau bagaimana

jalannya proses pembuatan kerajinan tangan yang di-custom oleh pembeli dari

awal. Dari penggunaan bahan hingga ke proses pengeringan produknya. Karena

bahan baku utama produk Toko Wirawan ini menggunakan koran, maka ada

proses pengeringan/penjemuran produk. Jenis observasi ini adalah non-partisipan.

Dalam melakukan observasi, peneliti memilih hal-hal uamh diamati dan mencatat

hal-hal penting yang berkaitan dengan penelitian.

4.3.2 Wawancara

Wawancara yang dilakukan yaitu wawancara langsung dengan pemilik

Toko Wirawan bernama Ibu Tuty Rusdawati. Peneliti melakukan wawancara

secara bebas namun tetap mengikuti pedoman wawancara yang sudah di buat.

Peneliti mendapatkan informasi tentang proses pembuatan kerajinan tangan

hingga ke proses pengambilan kerajinan tangan oleh pembeli.

4.4 Metode Pengembangan Perangkat Lunak

 45

Metode pengembangan yang digunakan menerapkan framework Ionic toko

online pada kerajinan tangan kertas koran studi kasus Toko Wirawan Pontianak

adalah Prototype. Sebuah prototype adalah versi awal dari sistem perangkat lunak

yang digunakan untuk mendemonstrasikan konsep-konsep, percobaan rancangan

dan menemukan lebih banyak masalah dan solusi yang memungkinkan

(Sommerville, 2011). Penggunaan metode prototyping di dalam penelitian ini

bertujuan agar peneliti mendapatkan gambaran aplikasi yang akan dibangun serta

hasil akhir dari outputnya.

Gambar 4.2 Prototype (Sumber: Pressman 2015)

Tahap-tahap pengembangan prototype model menurut (Pressman,

2013:31) yaitu :

a. Mendengarkan pelanggan
Pada tahap ini peneliti melakukan pengumpulan kebutuhan dari sistem
dengan cara mendengar keluhan dari pemilik Toko Wirawan, Ibu Tuty
Rusdawati, untuk membuat suatu sistem yang sesuai kebutuhan , maka
harus diketahui terlebih dahulu bagaimana sistem yang sedang berjalan
untuk kemudian mengetahui masalah yang terjadi.
b. Merancang dan membuat prototype
Pada tahap ini, dilakukan perancangan dan pembuatan prototype sistem.
Prototype yang dibuat disesuaikan dengan kebutuhan sistem yang telah
didefinisikan sebelumnya dari keluhan pengguna.
c. Uji Coba
 46

Pada tahap ini, prototype dari sistem di uji coba oleh pelanggan atau
pengguna. Kemudian dilakukan evaluasi kekurangan-kekurangan dari
kebutuhan pelangga. Pengembang kemudian kembali mendengarkan
keluhan dari pelanggan untuk memperbaiki prototype yang ada.

4.5 Pemodelan Sistem

Alat pemodelan yang akan digunakan pada website toko online pada

kerajinan tangan kertas koran studi kasus Toko Wirawan Pontianak adalah

menggunakan pemodelan UML (Unified Modelling Language). Tujuan

penggunaan UML yaitu sebagai alat bantu perancangan awal untuk

mengembangkan perangkat lunak. UML yang digunakan terdiri dari beberapa

diagram diantaranya:

4.5.1 Use Case Diagram

Usecase diagram akan digunakan untuk menggambarkan tahapan antara

fungsi-fungsi dan proses bisnis yang dirancang dengan actor-aktor yang terlihat.

Melalui usecase diagram akan dapat diketahui Batasan keterlibatan masing-

masing actor terhadap sistem. Kemudian masing-masing dari usecase tersebut

akan dijelaskan lebih detail menggunakan table deskripsi usecase.

4.5.2 Activity Diagram

Activity diagram akan digunakan untuk mengetahui alur-alur dari proses

bisnis dan kondisi-kondisi yang terbentuk berdasarkan fungsi-fungsi yang telah

didefinisikan pada usecase diagram. Melalui activity diagram peneliti

menggambarkan aktivitas-aktivitas apa saja yang dapat dilakukan oleh actor serta

bagaimana kondisi yang terbentuk berdasarkan respon yang dihasilkan oleh

sistem secara umum.

4.5.3 Sequence Diagram

 47

Melalui sequence diagram penulis akan mendefinisikan interaksi antar

objek yang terdapat dalam setiap proses dan fungsi bisnis. Sequence diagram akan

menunjukkan urutan eksekusi dengan fokus interaksi atau pesan yang akan

disampaikan antar setiap objek yang terlibat.

4.6 Pengujian Perangkat Lunak

Menurut (Komarudin, 2016:4),”Pengujian Perangkat Lunak merupakan

proses eksekusi suatu program atau sistem dengan maksud menemukan atau

melibatkan setiap kegiatan yang bertujuan untuk mengevaluasi atribut program

dan dapat memenuhi hasil yang dibutuhkan perusahaan”. Alasan pentingnya

dilakukan pengujian perangkat lunak agar dapat mengukur apakah kamus slang

bahasa Korea-Indonesia ini layak untuk digunakan oleh pengguna atau tidak.

Pengujian black-box bukan merupakan alternative dari teknik white-box,

tetapi merupakan pendekatan komplementer yang kemungkinan besar mampu

mengungkap kelas kesalahan daripada metode white-box. Pengujian black-box

berusaha menemukan kesalahan dalam kategori sebagai berikut :

a. Fungsi-fungsi yang tidak benar atau hilang

b. Kesalahan interface
c. Kesalahan dalam struktur data atau akses database eksternal
d. Kesalahan kinerja
e. Inisialisasi dan kesalahan terminasi
 BAB 5

HASIL PENELITIAN

5.1 Analisa Kebutuhan Pengguna

Toko Wirawan Pontianak merupakan usaha bisnis menengah kebawah yang

menghasilkan produk kerajinan tangan berbahan baku kertas koran. Usaha bisnis ini

sudah berjalan 10 tahun dan sudah bekerja sama dengan UMKM Centre Pontianak

selama 2 tahun. Sebelum Toko Wirawan bekerja sama dengan UMKM Centre

Pontianak, bisnis dilakukan di garasi rumah Ibu Tuty Rusdawati selaku pemilik Toko

Wirawan. Pemesanan juga menggunakan buku kas dan tidak ada metode khusus

untuk memasarkan produk untuk dikenal oleh banyak orang.

Setelah Toko Wirawan berkerja sama untuk menyetok barang ke UMKM

Centre Pontianak, sudah mulai banyak khalayak yang mengenal produk kerajinan

tangannya, apalagi sistem pembuatan yang dibuat secara custom sehingga konsumen

dapat memesan tambahan untuk ditambahkan pada produk kerajinan tangan yang

dipesan. Di UMKM Pontianak Centre secara garis besar calon konsumen dapat

melihat proses pembuatannya. Namun, untuk menarik perhatian konsumen lebih

banyak lagi memajang produk di UMKM Centre Pontianak masih belum maksimal

karena yang mengetahui produk pada Toko Wirawan hanya yang mengunjungi

UMKM Centre Pontianak saja sehingga penulis ingin membuat website toko online

48
 49

yang nantinya dapat menarik lebih banyak lagi konsumen yang mengenal dan

dapat meningkatkan penjualan pada Toko Wirawan juga.

5.2 Analisis Kebutuhan Perangkat Lunak

Adapun spesifikasi perangkat lunak dalam membangun perangkat lunak toko

online kerajinan tangan Wirawan Pontianak yaitu :

a. Visual Studio Code digunakan untuk membangun perangkat lunak website.

b. Framework Ionic digunakan untuk mendukung penerapan website toko online

kerajinan tangan Wirawan Pontianak.

c. XAMPP digunakan untuk mendukung web server dan MySQL Database.

d. Sistem Operasi Windows 10.

5.3 Analisis Kebutuhan Perangkat Keras

Adapun spesifikasi perangkat lunak dalam membangun perangkat lunak toko

online kerajinan tangan Wirawan Pontianak yaitu :

a. Processor minimal 1.8 GHZ

b. RAM minimal 4GB

5.4 Perancangan Prototype

5.4.1 Perancangan UML

Perancangan UML dilakukan sebelum memulai merancang perangkat lunak

agar mempermudah perancangan perangkat lunak ke depannya. Berikut ini adalah

diagram perangkat lunak yang dirancang dalam bentuk beberapa diagram UML.
 50

5.4.1.1 Usecase Diagram

Untuk menyelesaikan studi kasus ini menjadi sebuah use case diagram,

umumnya terdapat 4 tahapan yang harus dilalui yaitu :

a. Pendefinisian Aktor

Berikut adalah hasil pendefinisian aktor Toko Online Wirawan Pontianak :

Tabel 5.1 Pendefinisian Aktor

No, Aktor Deskripsi

1. Admin Admin adalah orang yang bertugas

dan memiliki wewenang hak akses

untuk melakukan operasi pengelolaan

stok barang, mengelola data admin,

serta laporan penjualan.

2. Konsumen/Pengunjung Toko Konsumen adalah orang yang bisa

Wirawan mendaftar akun dan melakukan login

kemudian melakukan pemesanan

barang pada Toko Wirawan

Pontianak.

b. Pendefinisian Usecase Diagram

1. Admin

Berikut adalah hasil pendefinisian usecase pada Toko Online Wirawan

Pontianak :
 51

Tabel 5.2 Pendefinisian Usecase Admin

No. Usecase Deskripsi

1. Login Merupakan proses untuk melakukan login

admin Toko Online Wirawan Pontianak.

2. Kelola Admin Mengelola admin merupakan proses

pengelolaan data admin yang mana bisa

menambah, mengubah, dan menghapus data

admin.

3. Tambah Admin Merupakan proses menambahkan data

admin yang ada di dalam basis data.

4. Ubah Admin Merupakan proses mengubah data admin

yang ada di dalam basis data.

5. Hapus Admin Merupakan proses menghapus data admin

yang ada di dalam basis data

6. Kelola Data Barang Mengelola data barang merupakan proses

pengelolaan data admin yang mana bisa

menambah, mengubah, dan menghapus data

barang.

7. Tambah Barang Merupakan proses menambahkan data

barang yang ada dalam basis data.

8. Ubah Barang Merupakan proses mengubah data barang

 52

yang ada di dalam basis data.

9. Hapus Barang Merupakan proses menghapus data admin

yang ada di dalam basis data

10. Laporan Penjualan Merupakan Riwayat penjualan yang terjadi

[ada Toko Wirawan Pontianak.

2. Konsumen

Tabel 5.3 Pendefinisian Usecase Konsumen

No. Aktor Deskripsi

1. Login Merupakan proses untuk melakukan login

konsumen pada Toko Online Wirawan

Pontianak

2. Register Merupakan proses konsumen melakukan

register akun pada Toko Online Wirawan

Pontianak.

3. Membeli barang Merupakan proses konsumen memilih

model kerajinan tangan yang tersedia pada

katalog Toko Wirawan Pontianak.

4. Transaksi Merupakan proses pembayaran yang

dilakukan oleh konsumen. Akan

disediakan section untuk memilih metode

pembayaran yaitu COD (Cash On

 53

Delivery) dan transfer bank.

c. Pembuatan Usecase Skenario

1) Admin

Gambar 5.1 Use Case Diagram

Use Case Diagram menggambarkan sistem dari sudut pandang

konsumen(pelanggan) dan admin sehingga pembuatan use case diagram ini lebih

dititikberatkan pada fungsionalitas yang ada pada sistem, bukan berdasarkan alur

atau urutan kejadian. Berikut ini adalah table scenario dari use case diagram.

Tabel 5.4 Skenario Use Case Register

Nama Use Case Register

Aktor Pelanggan/Konsumen
 54

Tujuan Melakukan register ke aplikasi

Flow of Events Aktor Sistem

1.Masuk ke halaman register 1.1 Memberikan tampilan

halaman register dengan isian

data diri pelanggan

2.Pelanggan mengisi data diri 2.1 Sistem menyimpan data ke

pada halaman register dalam database.

2.2 Sistem mengarahkan

pelanggan ke halaman awal

aplikasi.

Tabel 5.5 Skenario Use Case Login

Nama Use Case Login

Aktor Pelanggan/Konsumen

Tujuan Melakukan login ke aplikasi

Flow of Events Aktor Sistem

1.Masuk ke halaman login 1.1 Memberikan tampilan

halaman login dengan isian email

dan password.
 55

2.Pelanggan mengisi email 2.1 Sistem menyimpan validasi

dan password di halaman username dan password

login

2.2 Sistem mengarahkan

pelanggan ke halaman awal

aplikasi (beranda)

Tabel 5.6 Skenario Use Case Membeli Barang

Nama Use Case Membeli Barang

Aktor Pelanggan/Konsumen

Tujuan Menampilkan halaman order Toko Wirawan Pontianak

Flow of Events Aktor Sistem

1.Masuk ke menu order 1.1 Menampilkan halaman

produk kerajinan tangan produk kerajinan tangan

2.Pelanggan mengisi jenis 2.1 Sistem akan menyimpan

kerajinan tangan, ukuran, dan validasi username dan password

catatan khusus jika ingin

custom hiasan.

2.2 Sistem mengarahkan

pelanggan ke halaman awal

aplikasi (beranda)
 56

Tabel 5.7 Skenario Use Case Transaksi (optional)

Nama Use Case Transaksi

Aktor Pelanggan/Konsumen

Tujuan Menampilkan halaman pembayaran Toko Wirawan Pontianak

Flow of Events Aktor Sistem

1.Masuk ke menu order 1.1 Menyimpan pesanan

produk kerajinan tangan, pelanggan

mengisi form pada bagian

transaksi, pengguna dapat

memilih option bayar via

ekspedisi gosend atau ambil

sendiri.

2.Pelanggan mengisi jenis 2.1 Sistem akan menyimpan

kerajinan tangan, ukuran, dan validasi username dan password

catatan khusus jika ingin

custom hiasan.

2.2 Sistem mengarahkan

pelanggan ke halaman awal

aplikasi (beranda)
 57

5.4.2.1 Activity Diagram

5.4.3.1 Sequence Diagram

5.2 Perancangan Database

5.3.1 Normalisasi Database

5.3.2 Spesifikasi Tabel

5.3 Perancangan Perangkat Lunak

5.4.1 Perancangan Halaman Toko Online

5.4.2 Perancangan Interface (antar muka)

5.4 Testing

5.5