TRANSFORMTIKA , Vol.19, No.1, July 2021, pp. 26 - 37 ISSN: 1693-3656, journals.usm.ac.id/index.php/transformatika
◼ page 26

## Implementasi Twitter Bootstrap dalam Pengembangan Aplikasi Web E-Commerce (Studi Kasus Toko Putra
Reban Kendal)
Yohana Tri Widayati 1 , Yani Prihati 2 , Stephanus Widjaja 3 , Satrio Agung Prakoso 4 , Angeline Renita Notobudojo 5 1 Fakultas Teknik dan Informatika/ Universitas AKI Semarang Jl. Imam Bonjol No. 15-17 Semarang, (024) 3552555, e-mail: yohana.tri@unaki.ac.id 2 Fakultas Teknik dan Informatika / Universitas AKI Semarang Jl. Imam Bonjol No. 15-17 Semarang, (024) 3552555, e-mail: yani.prihati@unaki.ac.id 3 Teknik Informatika/STIMIK AKI Pati Jl. Kamandowo No. 13 Pati, (0295) 382087, e-mail: stephanuswidjaja@gmail.com
4 Fakultas Teknik dan Informatika / Universitas AKI Semarang Jl. Imam Bonjol No. 15-17 Semarang, (024) 3552555, e-mail: satrio.agung@unaki.ac.id 5 Fakultas Teknik dan Informatika / Universitas AKI Semarang Jl. Imam Bonjol No. 15-17 Semarang, (024) 3552555, e-mail: angelinenotobudojo@gmail.com

## ARTICLE  INFO
Article history:
Received 18 June 2021
Received in revised form 26 July 2021 Accepted 30 July 2021
Available online 31 July 2021

## ABSTRACT
This study aims to apply twitter bootstrap in an e-commerce web so that the web display becomes more  responsive,  that  is,  it  can  provide  a  display according to the device used to access the web. The object  of  this  research  is  the  Putra  Reban  Store  in Kendal  which  markets  local  art  equipment  and supplies,  especially  masks . The  system  development method  used  in  this  research  is  the  Scrum  method with  stages  including  product  backlog,  sprint backlog, sprint and working increment. This method was chosen because it can save system development time and can transform a business that is difficult to measure into one that is easy to develop. The system is  designed  with  2  actors,  namely  admin  and customer. Admin has access rights to manage product data, customer data, and order data, while customers have the right to access product data and make order transactions. With this developed system, it is easier for  Putra  Reban  Stores  to  market  their  products because product descriptions and product availability  stocks  can be  informed  more  easily and accurately.  With  complete  and  accurate  product information,  it  will  also  be  easier  for  customers  to make transactions.
Keywords: twitter bootstrap, e-commerce, responsive

## 1. Pendahuluan
Penjualan  adalah  kegiatan  untuk  menukarkan  barang  dan  jasa  dengan  uang,  dimana penjualan merupakan bagian dari promosi dan promosi adalah satu bagian dari keseluruhan sistem
pemasaran [ 1 ] .  Toko  Putra  Reban  menjual  bermacam-macam  jenis  perlengkapan  kesenian daerah, namun  lebih  bervariasi  pada  topeng,  karena  pada awalnya hanya berjualan topeng khas Kendal.  Topeng  adalah  benda  yang  dipakai  pada  wajah.  Biasanya  topeng  dipakai  untuk melngkapi  pertunjukkan  kesenian  daerah  yang  diiringi  musik.  Topeng  kesenia  daerah  pada umumnya  digunakan  untuk  menghormati  sesembahan  atau  memperjelas  watak  dalam mengiringi kesenian.  Bentuk topeng bermacam-macam, ada yang menggambarkan watak marah, ada  yang  menggambarkan  lembut,  dan  ada  yang  menggambarkan  kebijaksanaan.  Kehidupan masyarakat  modern  saat  ini  menempatakan  topeng  sebagai  salah  satu  bentuk  karya  seni  tinggi. Tidak hanya  karena keindahan  estetika  yang dimilikinya, tetapi sisi misteri yang tersimpan pada raut wajah topeng tetap mampu memancarkan kekuatan  magis  yang sulit dijelaskan. Toko Putra Reban yang terletak di Kendal ini masih bersifat manual dalam memasarkan produk-produknya, yaitu dari mulut ke mulut, sehingga pembeli mereka hanya masyarakat sekitar saja. Oleh karena itu, akan  dirancang  dan  diimplementasikan  aplikasi e-commerce, [ 2 ] untuk  Toko  Putra  Reban menggunakan twitter  bootstrap ,  dimana  penggunaan  bootstrap  ini  bertujuan  untuk  membuat tampilan  pada  web  yang  diakses  dari  desktop  atau mobile  device menjadi  lebih responsive (memberikan tampilan sesuai perangkat yang digunakan untuk mengakses web tersebut).
Pada  penelitian  sebelumnya  dengan  judul  “Pembuatan  Aplikasi  E-Commerce  Pusat oleh-oleh khas Pacitan” pada Toko Sari Rasa Pacitan, belum memiliki fitur untuk melakukan konfirmasi pembayaran. Sedang dua penelitian yang lain yang berjudul Aplikasi E-Commerce Penjualan Keramik, dan Rancang Bangun Sistem Informasih E-Commerce masing-masing masih mempunyai kelemahan yaitu tidak    ada    sistem    keamanan    komputer serta total pembayaran belum termasuk biaya kirim, dan belum  ada tools untuk customer  service ,  sehingga apabila aplikasi tersebut mengalami kendala, harus diselesaikan secara internal dan pelanggan yang sedang mengakses tidak bisa melapor ke pemilik aplikasi. Sedangkan aplikasi yang digunakan Bootstrap merupakan salah satu contoh dari client side scripting . Bootstrap adalah sebuah alat bantu untuk membuat  sebuah  tampilan  website  yang  dapat  mempercepat    pekerjaan    seorang  pengembang website  atau  pendesain    halaman  website [ 3 ] .  Bootstrap  diciptakan  oleh  2  (dua)  orang programmer di Twitter, yakni Mark Otto dan Jacob Thornton pada tahun 2011. Pada tahun tersebut, mereka  tergerak  untuk  menciptakan  framework  yang  dapat  digunakan  bersama  di  lingkungan Twitter. Oleh karena itu, walau nama resminya Bootstrap, namun dikenal sebagai Twitter Bootstrap di kalangan developer. Twitter Bootstrap memiliki beberapa fungsi, yaitu:
1. Bisa mempercepat  waktu untuk memproses  pembuatan  tampilan front-end (antar  muka) sebuah website.
2. Menampilkan sisi website yang lebih modern.
3. Tampilan  sangat  responsive,  sehingga  mendukung  untuk  berbagai  resolusi,  mulai  dari tablet, smartphone, hingga PC dan laptop.
4. Website yang menggunakan bootstrap pada umumnya lebih ringan.

## 2. Metodologi Penelitian
Scrum merupakan sebuah  pendekatan dari agile yang dilakukan untuk  mengembangkan produk  serta  layanan  agar  lebih  inovatif. Scrum menekankan  pada  penggunaan scalable , pentingnya penggunaan scrum dalam suatu tim yang  diorganisir secara perorangan setelah itu diuraiakan oleh  masing-masing  didalam setiap proses  dalam  tim tersebut [ 4 ] . Tampak pada gambar 1 di bawah ini adalah metodologi Scrum .
Implementasi Twitter Bootstrap dalam Pengembangan Aplikasi Web E-Commerce (Studi Kasus Toko Putra Reban Kendal  (Yohana Tri Widayati)

## METODOLOGI SCRUM

## Gambar 1: Metodologi Scrum
Pola pengembangan software dengan menggunakan metodelogi scrum meliputi:
1. Product Backlog
Product backlog merupakan proses pengumpulan kebutuhan yang dilakukan melalui pembuatan  daftar  kebutuhan.  Selain  dari  daftar  kebutuhan  pada  proses product backlog juga dibuat daftar.
2. Sprint backlog
Sprint backlog adalah proses pemenuhan kebutuhan sesuai dengan yang diinginkan pada proses product backlog yang telah ditentukan.
3. Sprint
Sprint  merupakan  sebuah  timeboxed  yang  memiliki  tanggal  mulai  dan  berakhirnya suatu  pekerjaan. Sprint baru  akan  langsung  mengikuti  proses  penyelesaian  sprint sebelumnya.
4. Working increment of the software Working increment of the software merupakan hasil dari seluruh hal dalam Product Backlog yang telah selesai dikerjakan pada seluruh Sprint. Kelebihan menggunakan model scrum sebagai berikut:
1) Membantu menghemat waktu dan biaya (dalam hal ini uang). Biaya overhead dari proses dan manajemen sangat minim sehingga dapat mengarahkan kita kepada hasil yang lebih baik cepat dan lebih murah.
2) Dapat  mentranformasikan  bisnis  yang  sulit  untuk  diukur  menjadi  mudah untuk dikembangkan.
3) Dapat  dengan  mudah  untuk  mengirim  produk  berkualitas  sesuai  dengan waktunya.
Kelemahan menggunakan model scrum sebagai berikut:
1) Bisa menjadi salah satu penyebab utama terjadinya scope creep . Kecuali ada tanggal  akhir  tertentu.  Stakeholder  proyek  atau  manajemen  akan  terus menuntut fungsi dan fitur baru untuk disampaikan.
2) Setiap  tugas  harus  didefinisikan  dengan  baik,  karena  hal  ini  dapat mempengaruhi  perkiraan  biaya  dan  waktu  pengerjaan  proyek.  Jika  tidak didefinisikan dengan baik, karena hal ini dapat mempengaruhi perkiraan biaya dan  waktu  pengerjaan  proyek.  Jika  tidak  didefinisikan  dengan  baik  maka semua hal tersebut tidak akan akurat.

## 3. Hasil dan Pembahasan
Product  backlog merupakan  proses  pengumpulan  kebutuhan  yang  dilakukan  melalui pembuatan daftar kebutuhan. Selain dari daftar kebutuhan pada proses product backlog juga dibuat daftar.  Dalam  tahap  ini,  penulis  menganalisis  kebutuhan  aplikasi e-commerce yang  dibutuhkan
Toko Putra Reban, meliputi sistem yang sedang berjalan, perancangan  sistem yang diusulkan, dan kebutuhan dari sistem yang diusulkan tersebut.

## 3.1. Analisis Sistem yang Sedang Berjalan
Sebelum  suatu  sistem  dikembangkan,  diperlukan  adanya  strategi  dan  rancangan pengembangan yang jelas, menyangkut beberapa aspek sistem prosedur dalam organisasi sehingga dapat ditentukan sasaran dari sistem yang akan dikembangkan. Pembahasan dalam analisis sistem yang sedang berjalan adalah sistem penjualan pada Toko Putra Reban Kendal yang masih memiliki kelemahan, yaitu:
1. Sistem penjualan masih bersifat tradisional, yaitu dari mulut ke mulut.
2. Kemungkinan kesalahan penyimpanan data besar, karena pencariannya secara manual di setiap buku, juga membutuhkan waktu yang lama.
Analisis prosedur merupakan penguraian untuk memahami seluruh informasi yang terdapat pada  suatu  permasalahan  untuk  mengetahui  apa  yang  sedang  terjadi  dan  memutuskan solusi  apa  yang  harus  segera  dilakukan  untuk  memecahkan  masalah.  Adapun  sistem penjualan yang berjalan pada Toko Putra Reban adalah sebagai berikut:
1) Pelanggan datang ke tempat, melihat barang-barang yang tersedia, lalu membeli langsung di tempat.
2) Setiap pembeli dicatat ke dalam buku nota, yang berisi tanggal pembelian, nama, dan  detail  barang  (jumlah,  nama  barang  dan  total  harga)  yang  dibeli  oleh pelanggan.
3) Setelah dicatat, pelanggan membayar dan penjual menyiapkan barang-barang yang dibeli oleh pelanggan tersebut.
4) Setelah barang-barang disiapkan oleh penjual, pelanggan dapat membawa barang- barang yang sudah dibeli.
5) Jika  barang  kurang,  maka  pelanggan  dapat  melakukan  kesepakatan  dengan pelanggan  mengenai  waktu  untuk  mengambil  barang  yang  sudah  lengkap (PreOrder).

## 3.2. Perancangan Sistem yang Diusulkan
Berdasarkan  analisis  sistem  yang  sedang  berjalan  saat  ini,  dapat  dijadikan  alasan dibutuhkannya suatu perancangan aplikasi yang dapat membantu Toko Reban Kendal agar lebih mudah  dalam  menjualkan  dan  pendataan  barang-barang  yang  dijual  dan  terjual  sehingga  waktu yang diperlukan lebih efisien dan efektif.
Tahap  analisis  kebutuhan  bertujuan  mendefinisikan  kebutuhan  dari  sistem  yang  akan dirancang  atau  dikembangkan.  Suatu  sistem  harus  memiliki  fungsi  requirement,  selain  itu  juga dapat  memenuhi  non  fungsional  requirement [ 13 ] .  Berikut  penjelasan  mengenai  kebutuhan tersebut:
1. Fungsional Requirement
Merupakan persyaratan pokok yang harus dipenuhi oleh sistem yang baru atau merupakan fungsi-fungsi yang diperlukan oleh pengguna dari sistem:
1) Sistem  menyediakan  sarana  pencatatan  sebagai  data,  seperti  data  admin,  data produk dan data pelanggan.
2) Sistem yang menyajikan informasi dari data yang telah ada, yaitu produk dari Toko Putra Reban.
3) Sistem memerlukan hardware dan software untuk mendukung berjalannya sistem. Hardware  yang  dibutuhkan  seperti  PC  (Personal  Computer),  hardisk,  memory. Software yang dibutuhkan adalah OS Windows.
2. Non Fungsional Requirement
Merupakan  persyaratan  tambahan  yang  dibutuhkan  dari  sistem.  Pemenuhannya  tetap merupakan hal yang penting untuk dipenuhi, tetapi tidak harus mutlak, yaitu:
Implementasi Twitter Bootstrap dalam Pengembangan Aplikasi Web E-Commerce (Studi Kasus Toko Putra Reban Kendal  (Yohana Tri Widayati)
1) Performance:  sistem  harus  merespon  cepat  dalam  hal  peng-inputan  data  dan pencarian data.
2) Information: sistem harus menjamin integrasi pada data admin, data pelanggan dan data produk.
3) Economy: sistem harus menjaga efisiensi biaya operasional.
4) Efficiency: sistem harus dapat mereduksi proses transaksi yang ada.
5) Service: sistem harus dapat digunakan dengan mudah, cepat dan mudah dipelajari oleh pengguna.

## 3.3. Sprint Backlog
Sprint backlog adalah proses pemenuhan kebutuhan sesuai dengan yang  diingikan pada proses  product  backlog  yang  telah  ditentukan [ 15 ] .  Dalam  tahap  ini,  kebutuhan  aplikasi  e- commerce  dapat  diketahui,  yaitu  memudahkan  Toko  Putra  Reban  dalam  menjualkan  produk- prodaknya  (memasarkan lebih luas tidak  hanya  pada masyarakat  sekitar, jika ingin melihat  atau mencari data lebih cepat). Pada tahap ini, menggunakan desain sistem, desain database dan desain antarmuka yang dijabarkan sebagai berikut:
1. Desain Sistem
Desain sistem merupakan suatu teknik pemecahan masalah yang saling melengkapi dengan analisis sistem, yang merangkai kembali bagian-bagian komponen menjadi suatu sistem yang lengkap. Alat perancangan sistem yang digunakan adalah UML (Unified Modeling Language),  yaitu  alat  bantu  perancangan  desain  sistem  yang  berbasis  objek [ 11 ][ 12 ] . Desain berbasis objek meliputi beberapa kegiatan, yaitu:
1) Kegiatan  menyeleksi  model  use  case  untuk  menggambarkan  lingkungan implementasi (Use Case Diagram), seperti tampak pada gambar 2 dan gambar 3 di bawah ini:
Use Case Diagram Admin
Gambar 2: Use Case Diagram Admin Use Case Diagram Pelanggan
Gambar 3: Use Case Diagram Pelanggan
2) Kegiatan  menggambarkan  berbagai  alur  aktivitas  dalam  sistem  yang  sedang dirancang  (Activity Diagram), seperti tampak pada gambar 4, gambar 5, gambar 6 dan gambar 7 di bawah ini:
Activity Diagram Login Admin
Gambar 4: Activity Diagram Login Admin
Activity Diagram Melihat List Pelanggan
Gambar 5: Activity Diagram Melihat List Pelanggan
Implementasi Twitter Bootstrap dalam Pengembangan Aplikasi Web E-Commerce (Studi Kasus Toko Putra Reban Kendal  (Yohana Tri Widayati)
Activity Diagram Melihat List Data Kategori
Gambar 6: Activity Diagram Melihat List Data Kategori
Activity Diagram Melihat List Data Produk
Gambar 7: Activity Diagram Melihat List Data Produk
3) Kegiatan menggambarkan model interaksi dan behavior objek yang mendukung skenario use case (Sequence Diagaram), seperti tampak pada gambar 8, gambar 9, gambar 10 dan gambar 11 di bawah ini
Sequence Diagram Login Admin
Gambar 8: Sequence Diagram Login Admin
Sequence Diagram Melihat List Pelanggan
Gambar 9: Sequence Diagram Melihat List Pelanggan
Sequence Diagram Melihat List Data Kategori
Implementasi Twitter Bootstrap dalam Pengembangan Aplikasi Web E-Commerce (Studi Kasus Toko Putra Reban Kendal  (Yohana Tri Widayati)
Gambar 10: Sequence Diagram Melihat List Data Kategori

## Sequence Diagram Melihat List Data Produk
Gambar 11: Sequence Diagram Melihat List Data Produk
Dalam sistem ini memiliki dua aktor, yaitu:
1) Admin
Admin adalah aktor yang berperan dalam mengelola semua data master penjualan, antara  lain:  data  kategori,  data  produk,  data  artikel,  data  pemesanan  dan  data pelanggan.
2) Pelanggan
Pelanggan adalah aktor dapat memilih dan pesan produk. Untuk mengetahui lebih jelasnya  hubungan  interaksi  aktor  dengan  proses-proses  di  dalam  sistem,  akan dijelaskan pada use case diagram sebagai berikut:
2. Desain Antarmuka
Desain  antarmuka  merupakan  penggabungan  antara  desain input dan output yang membangun  dialog antara user dengan  sistem.  Tujuannya  agar user dalam  menjalankan
program  lebih  mudah  dan  tidak  mengalami  kesulitan  dalam  pengoperasiannya,  dimana tujuannya agar komunikasi diantara user dengan sistem menjadi lebih mudah.

## 3.4. Sprint Backlog
Sprint merupakan sebuah timeboxed yang memiliki tanggal mulai dan berakhirnya suatu pekerjaan [ 15 ] .  Sprint  baru  akan  langsung  mengikuti  proses  penyelesaian  sprint  sebelumnya. Dalam tahap ini, penulis membagi tahapan – tahapan dalam pembuatan aplikasi e-commerce , yaitu:
1. Mengamati dan mengidentifikasi masalah pada Toko Putra Reban.
2. Mengumpulkan dan menganalisa data.
3. Mendiskripsi sistem yang dibuat.
4. Membuat program/ pengkodean.
5. Merancang sistem yang akan dibuat.
6. Menghasilkan program.

## 3.5. Sprint Backlog
Working  increment  of  the  software merupakan  hasil  dari  seluruh  hal  dalam product backlog yang  telah  selesai  dikerjakan  pada  seluruh Sprint [ 15 ] .  Dalam  tahap  ini,  penulis memberikan hasil, yakni aplikasi e-commerce pada Toko Puta Reban.

## 4. Kesimpulan
Aplikasi  E-Commerce  menggunakan  Twitter  Bootstrap  Berbasis  Web  pada  Toko  Putra Reban Kendal memudahkan Toko Putra Reban dalam memasarkan produk-produknya. Akan tetapi masih  memerlukan  penyempurnaan  pada  sistem  penerimaan  pembayaran  yang masih  dilakukan secara  manual.  Untuk  ke  depannya  dapat  ditingkatkan  menjadi  sistem  penerimaan  pembayaran otomatis (misalnya menggunakan BCA Virtual Account ) untuk mempermudah admin mengelola pesanan.

## References
[1] Abdullah, T., Tantri, F. Manajemen Pemasaran. Jakarta: Grafindo. 2016.
[2] L.  F.  Rhozi,  “Sistem  Pendukung  Keputusan  Pemilihan  Smartphone  Android Menggunakan Metode Simple Additive Weighting (SAW),” Artik. Skripsi Univ. Nusant. PGRI Kediri , pp. 59–65, 2016.
[3] D.  S.  W.  Iin  Mulyadin,  “Sistem  Pendukung  Keputusan  Pemilihan  Smartphone Menggunakan Metode Simple Additive Weighting,” Cahaya Tech , vol. 7, no. 2, pp. 88– 101, 2018.
[4] A.  Mukhlasin,  “Sistem  Pendukung  Keputusan  Pemilihan  Smartphone  Menggunakan Metode  Simple  Additive  Weighting  (SAW)  Berbasis  Web,” Pros.  Semin.  Nas. SISFOTEK , no. September, pp. 228–236, 2018.
[5] D. M. Khairina, D. Ivando, and S. Maharani, “Implementasi Metode Weighted Product Untuk  Aplikasi  Pemilihan  Smartphone  Android,” J.  INFOTEL  -  Inform.  Telekomun. Elektron. , vol. 8, no. 1, pp. 16–23, 2016.
[6] J. Yosef, Latif Ricaro; Susilo, “Pengembangan Aplikasi Pemilihan Smartphone Android Menggunakan Metode Weighted Product Berbasis Android,” J. Inform. dan Bisnis , vol. 7, no. 2, pp. 59–65, 2016.
[7] G.  M.  Putra,  N.  Irawati,  S.  Informasi,  and  S.  Royal,  “Analisis  Pemilihan  Handphone Rekomendasi Dengan Metode Weighted Product,” Semin. Nas. R. 2018 , vol. 9986, no. September, pp. 199–204, 2018.
[8] R.  Kusumadewi,  Sri;  Hartati,  Sri;Harjoko,  Agus;  Wardoyo, Fuzzy  Multi-Attribute Decision Making (Fuzzy MADM) , 1st ed. Yogyakarta: Penerbit Graha Ilmu, 2006.
[9] Kusrini, Konsep dan Aplikasi Sistem Pendukung Keputusan , 1st ed. Yogyakarta: Penerbit
ISSN: 1693-3656
Implementasi Twitter Bootstrap dalam Pengembangan Aplikasi Web E-Commerce (Studi Kasus Toko Putra Reban Kendal  (Yohana Tri Widayati)
Andi, 2007.
[10] Kristanto, A. Perancangan Sistem Informasi dan Aplikasinya. Yogyakarta: Gava Media. 2018.
[11] Ladjamudin,  A.  B. Analisis  dan  Desain  Sistem  Informasi. Yogyakarta:  Graha Ilmu. 2013.
[12] Whitten, J.  L.,  Bentley,  L. D., and Dittman, K. C. Metode Desain  dan Analisis Sistem. Yogyakarta: Andi. 2004.
[13] Sulistyorini, P. Pemodelan Visual dengan Menggunakan UML dan Rational Rose. Jurnal Teknologi Informasi DINAMIK . 2009; XIV(1): 23-29.
[14] Budi, D. S., Siswa, T. A., & Abijono, H. (2016). Analisis Pemilihan Penerapan Proyek Metodologi Pengembangan Rekayasa Perangkat Lunak. Jurnal Teknologi Informasi DINAMIK. 2016; 5(1): 24-31.
[15] Rubin,  K.  S. Essential  Scrum:  A  Practical  Guide  to  The  Most  Popular  Agile Process. First Edition. Michigan: Addison-Wesley. 2012.