## Firhat Hidayat, S. Kom

## ABSTRAK
Teknologi internet sudah merupakan hal yang wajib bagi sebuah perusahaan dalam  memasarkan  produk  mereka.  Namun  masyarakat  sekarang  lebih  banyak mengakses  internet  melalui  perangkat  smarphone  mereka  sehingga  mereka  lebih banyak  menghabiskan  waktu  (belanja,  menonton,  mendengarkan  musik,  dll)  dengan smarphone  mereka,  tidak  heran  para  produsen  atau  para  penual  mulai  beralih  dan membuka  “Lapak”  di  dunia  internet  dan  munculah  istilah  e-commerce  dan  online shopping.  Online  Shopping  menyajikan  segala  keperluan  pembeli  secara  virtual  baik itu  tentang  informasi  produk,  memesan  ataupun  melakukan  pembayaran.  Sistem penjualan yang selama ini digunakan oleh Bandung Book Center adalah dengan cara menjual buku di toko atau gerai yang mereka punya. Oleh karena itu dirancang suatu sistem informasi yang menunjang penjualan secara online yang nantinya bisa di akses melalui browser PC/Laptop maupun melalui smartphone, sehingga dapat meningkatkan volume penjualan dan pendapatan perusahaan.
Metode  penelitian  yang  peneliti  gunakan  disini  adalah Metode  Deskriptif dan  Metode  Action. Metoda  pengembangan  sistem  yang  dipakai  untuk  Merancang Aplikasi, penulis menggunakan Metode Prototype. Pemodelan dan perancangan  sistem dimodelkan  dengan  menggunakan  UML  (Unified Modeling  Language). Tahap-tahap pemodelan  dalam  analisis  tersebut  antara  lain  Usecase  Diagram,  Class  Diagram, Activity  Diagram,  Sequence  Diagram,  Collaboration  Diagram,  Component  Diagram dan    Deployment  Diagram.  Untuk  konstruksi  programnya  penulis  menggunakan  PHP Codeigniter dan Bootsrap CSS untuk menghasilkan website yang  responsive dan untuk database-nya menggunakan MySQL.
Dengan pembuatan sistem informasi ini diharapkan bisa membantu Bandung Book Center memasarkan produk mereka, pelanggan dapat mengakses website dengan menggunakan browser pada PC/Laptop maupun menggunakan smartphone. Kata Kunci : Online Shopping, PHP, Codeigniter, Bootsrap, Responsive Website

## I. PENDAHULUAN
Teknologi  internet  sudah  merupakan  hal  yang  wajib  bagi  sebuah perusahaan  dalam  memasarkan  produk  mereka,  selain  mampu  diakses  selama 24  jam  internet  dapat  diakses  siapa  saja  dan  dimana  saja  selama  terdapat koneksi internet. Namun masyarakat sekarang lebih banyak mengakses internet melalui  perangkat  smarphone  mereka  sehingga  mereka  lebih  banyak menghabiskan  waktu  (belanja,  menonton,  mendengarkan  musik,  dll)  dengan smarphone  mereka,  tidak  heran  para  produses  atau  para  penual  mulai  beralih dan  membuka  “ Lapak ”  di  dunia  internet  dan  munculah  istilah e-commerce online shopping. Online Shopping menyajikan segala keperluan pembeli secara virtual  baik  itu  tentang  informasi  produk,  memesan  ataupun  melakukan pembayaran. Sistem penjualan yang selama ini digunakan oleh  Bandung Book
Center adalah dengan cara menjual buku di toko atau gerai yang mereka punya. Sistem penjualan dengan cara ini dahulu memang efektif namun, tren yang ada di masyarakat sudah mulai nyaman berbelanja secara online, apalagi berbelanja buku  yang  notabennya  barang  yang  terjangakau  dan  diperlukan  masyarakat. Oleh  karena  itu  dirancang  suatu  sistem  informasi  yang  menunjang  penjualan secara  online  yang  nantinya  bisa  di  akses  melalui  browser  PC/Laptop  maupun melalui  smartphone,  sehingga  dapat  meningkatkan  volume  penjualan  dan pendapatan perusahaan.

## 1.1.  Identifikasi Masalah
Adapun permasalahan yang muncul pada Bandung Book Centre adalah sebagai berikut:
1. Banyanya  toko  buku  yang  sudah  beralih  dari  cara  penjualan  secara konvensional ke  cara  penjualan  secara online ,  sehingga  para  pembeli buku mulai melaju ke arah pembelian secara online.
2. Lambatnya  promosi  produk  baru  kepada  masyarakat  sehingga  waktu penjualan buku yang sedang tren cenderung lambat.
3. Kurangnya promosi kepada masyarakat sehingga hanya kalangan tertentu yang  mengenal  Bandung  Book  Center,  dan  kebanyakan  berdomisili  di Bandung.
4. Masyarakat  sekarang  cenderung  mengakses  internet  lewat  smarphone sehingga  diperlukan  juga  halaman  yang  khusus  dibuat  untuk  pengguna smartphone.

## 1.2.   Maksud Dan Tujuan Penelitian
Adapun maksud dan tujuan penulisan laporan penelitian ini antara lain: 1. Membuat  Sistem  Informasi Online Shopping Berbasis  Web  yang
Responsive, sehingga pelanggan lebih nyaman ketika mengakses website melalui browser dari  PC/Laptop  maupun  mengakses website melalui smartphone mereka.
2. Untuk  menghasilkan  suatu  sistem  yang  memberikan  informasi  tentang buku  atau  produk  yang  dipasarkan  kepada  calon  pembeli  sehingga mempermudah calon pembeli mendapatkan informasi yang dibutuhkan.
3. Untuk  mempromosikan  atau  lebih  memperkenalkan  perusahaan  kepada semua  kalangan  masyarakat  sehingga  dapat  memperluas  jangkauan pemasaran dengan tujuan dapat meningkatkan penjualan.

## II. KAJIAN PUSTAKA 2.1.  Konsep Dasar Sistem Informasi
Informasi  merupakan  hal  yang  sangat  penting  dalam  pengambilan keputusan,  permasalahannya  adalah  dimana  informasi  tersebut  didapat. Informasi dapat diperoleh dari sistem informasi. Karateristik suatu sistem dapat digambarkan seperti berikut:
Gambar 2.1 Karakteristik Sistem
Robert  A  Leitch  dan  K.  Roscoe  Davis  mendefinisikan  sistem  informasi adalah suatu sistem di dalam suatu organisasi yang mempertemukan kebutuhan pengolahan  transaksi  harian,  mendukung  operasi,  bersifat  manajerial  dan kegiatan  strategi  dari  suatu  organisasi  dan  menyediakan  pihak  luar  tertentu dengan  laporan-laporan  yang  diperlukan.  Jogianto  (2005:11)  .  Menurut  Hall dalam buku Pengenalan Sistem Informasi yang ditulis oleh Abdul Kadir (2003 : 11)  mendefinisikan  sistem  informasi  adalah sebuah  rangkaian  prosedur  formal dimana  data  dikelompokkan,  diproses,  menjadi  informasi,  dan  didistribusikan kepada pemakai.
Berdasarkan  dua  definisi  diatas  maka  dapat  didefinisikan  bahwa  sistem informasi adalah mencakup sejumlah komponen ada sesuatu yang diproses dan dimaksudkan untuk mencapai suatu tujuan tertentu.

## 2.2.  Pengertian Sistem Informasi Penjualan dan Penjualan Online
Menurut situs id.wikipedia.org,
“Sistem  Informasi  Penjualan  adalah  suatu  sistem  informasi  yang mengorganisasikan  serangkaian  prosedur  dan  metode  yang  dirancang  untuk menghasilkan,  menganalisa,  menyebarkan  dan  memperoleh  informasi  guna mendukung pengambilan keputusan mengenai penjualan.” Sedangkan penjualan online menurut en.wikipedia.org
“Online shopping or e-shopping is a form of electronic commerce which allows  consumers  to  directly  buy  goods  or services from  a  seller  over  the Internet using a web browser.”

## 2.3 Responsive Website
Menurut  Jack  Spurlock  (2013:7) Responsive  design  is  a  method  for taking  all  of  the  existing  content  that  is  on  the  page  and  optimizing  it  for  the device  that  is  viewing  it.  For  example,  the  desktop  not  only  gets  the  normal version of the website, but it might also get a widescreen layout, optimized for the larger displays that many people have attached to their computers.

## 2.4 Codeigniter
Menurut situs resmi Codeigniter ( http://ellislab.com/codeigniter ) CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications. If you're a developer who lives in the real world of shared hosting accounts  and  clients  with  deadlines,  and  if  you're  tired  of  ponderously  large and  thoroughly  undocumented  frameworks,  then  CodeIgniter  might  be  a  good fit .
Dengan  kata  lain CodeIgniter adalah aplikasi  open  source yang  berupa framework dengan model MVC (Model, View, Controller) untuk
membangun website dinamis dengan
menggunakan PHP. CodeIgniter memudahkan developer untuk  membuat  aplikasi  web dengan  cepat  dan  mudah dibandingkan dengan membuatnya dari awal.

## 2.5 Bootsrap
Menurut  Jack  Spurlock  (2013:1) Bootstrap  is  an  open  source  product from Mark Otto and Jacob Thornton who, when it was initially released, were both  employees  at  Twitter.  There  was  a  need  to  standardize  the  frontend toolsets of engineers across the company. For someone starting a new project, Bootstrap  comes  with  a  handful  of  useful  elements.  Normally,  when  I  start  a project, I start with tools like Eric Meyer’s Reset CSS and get going on my web project. With Bootstrap, you just need to include the bootstrap.css CSS file and, optionally, the bootstrap.js JavaScript file into your website and you are ready to go.

## III.   Objek dan Metode Penelitian
Tempat  penelitian  dilaksanakan  di  BBC  Pusat  Sriwijaya  Jl.  Babakan Priangan I No. 203-205 Depan Patung Kujang Bandung 40266 Jawa Barat, dan yang jadi objek penelitiannya adalah bagian penjualan dan inventory barang.
Untuk  melakukan  pemelitian  yang  baik  harus  adanya  suatu  proses  yang teratur  dan  terarah.  Oleh  karena  itu  diperlukan  suatu    metodologi  untuk melakukan  suatu  penelitian.  Metode  penelitian  yang  peneliti  gunakan  disini adalah Metode  Deskriptif  dan  Metode  Action. Dalam  penulisan  laporan  ini metode yang digunakan adalah.
1. Riset Lapangan
Riset  lapangan  dimaksudkan  untuk  memperoleh  informasi  secara langsung dari Perusahaan dan juga dunia internet. Adapun teknik pengumpulan data yang digunakan adalah:
a. Sumber Data Primer (Observasi)
Sumber  data  primer  adalah  data  yang  didapat langsung  dari  sumber  nya ( responden).  Responden adalah  pemberi  informasi  yang  diharapkan  dapat menjawab  semua  pertanyaan  dengan  jelas  dan  lengkap.  Dalam  hal  ini  penulis memperoleh sumber data dari responden yang terkait dengan objek penelitian, yaitu  Bagian  IT  ,  dan  Owner  dari  Bandung  Book  Center  Adapun  metode pengumpulan data dalam penelitian ini yaitu observasi. Observasi adalah suatu pengamatan  sistematis  yang  dilakukan  secara  langsung  terhadap  objek  di tempat  penelitian.  Dalam  hal  ini  penulis  melakukan  observasi  dengan mengamati konsep penjualan yang telah ada.
b. Sumber Data Sekunder (Dokumentasi)
Metode ini dilakukan untuk pengumpulan data dengan cara dokumentasi yaitu  mengumpulkan  data-data  yang  berhubungan  dengan  objek  yang  diteliti. Seperti  yang  penulis  lakukan  adalah  mengumpulkan  data  yang  berhubungan dengan penjualan buku dan alat tulis di Bandung Book Center.
2. Studi Pustaka
Data  diperoleh  melalui  buku-buku  literatur  yang  berhubungan  dengan masalah yang akan diteliti sebagai bahan referensi bagi penulis.

## 3.1.  Metode Pendekatan dan Pengembangan Sistem
Metode pendekatan sistem adalah metode yang memandang software ata aplikasi  sebagai  sebuah  interaksi  antar  bagian  dalam  sebuah  sistem.  Metode
pengembangan  sistem  sangat  dibutuhkan  dalam  perancangan  sebuah  dan hendaknya  terlebih  dahulu  merancang  metode  pemodelan  seperti  apa  yang harus digunakan dengan memprioritaskan ketepatan waktu dan efektifitas dalam perancangan sebuah sistem.

## 3.2.  Metode Pendekatan Sistem
Metode pendekatan sistem adalah metode yang memandang software ata aplikasi sebagai sebuah interaksi antar bagian dalam sebuah sistem. Dalam hal ini  penulis  menggunakan  metode  pendekatan  berorientasi  objek.  Alat  Bantu Analisis  dan  Perancangan yaitu  menggunakan  Unified  Modeling  Language (UML)  merupakan  sistem  arsitektur  yang  bekerja  dalam    OOAD (Object- Oriented  Analysis/Design) dengan  satu  bahasa  yang  konsisten  untuk menentukan,  visualisasi,  mengkontruksi,  dan  mendokumentasikan artifact (sepotong  informasi  yang  digunakan  atau  dihasilkan  dalam  suatu  proses rekayasa software, dapat  berupa model, deskripsi, atau software) yang terdapat dalam sistem software. UML  merupakan bahasa pemodelan yang paling sukses dari  tiga  metode  OO  yang  telah  ada  sebelumnya,  yaitu  Booch,  OMT (Object Modeling Technique) , dan OOSE (Object-Oriented Software Engineering).

## 3.3.   Metode Pengembangan Sistem
Metode  pengembangan  sistem  yang  dipakai  untuk  Merancang  Sistem Informasi  Online  Shopping  Bandung  Book  Center  Berbasis  Responsive Website, penulis menggunakan Metode Prototype , metode ini merupakan salah satu metode yang banyak digunakan dalam pengembangan perangkat lunak.
Menurut Pressman (2010:43) Evolutionary models are iterative, they are characterized  in  a  manner  that  enables  you  to  develop  increasingly  more complete versions of the software. In the paragraphs that follow, I present two common evulutionary process models Prototyping. Gambar 3.1 Prototyping Paradigm (Sumber :  Pressman  (2010:43))
Metode prototyping sebagai suatu paradigma baru dalam pengembangan sistem  informasi  manajemen,  tidak  hanya  sekedar  suatu  evolusi  dari  metode pengembangan  sistem  informasi  yang  sudah  ada,  tetapi  sekaligus  merupakan revolusi  dalam  pengembangan  sistem  informasi  manajemen.  Metode  ini dikatakan  revolusi  karena  merubah  proses  pengembangan  sistem  informasi yang  lama  (SDLC).  Bisa  dikatakan  bahwa  metode  ini  merupakan  metode waterfall yang dilakukan secara berulang-ulang seperti terlihat pada. Langkah umum paradigma prototyping adalah sebagai berikut :
1. Comunication .
Melakukan  komunikasi  studi  kelayakan  dan  studi  terhadap  kebutuhan pemakai.
2. Quick Plan.
Membuat perencanaan kerja dari hasil analisis yang dilakukan
3. Modeling
Pemograman  mengembangkan  prototype  sistem  untuk  memperlihatkan kepada user pemodelan sistem seperti apa yang akan digunakan.

## 4. Prototyping
Membuat Prototype dari sistem yang telah di modelkan
5. Deployment Delivery and Feedback
Menguji  sistem  dan  menunjukan  kepada  user  untuk  mendapatkan masukan untuk pengembangan tahap selanjutnya.

## IV.   HASIL PENELITIAN
Berikut adalah hasil penelitian analisis

## 4.1.   Analisis Sistem yang Berjalan
Analisis Sistem merupakan gambaran tentang sistem yang saat ini sedang berjalan pada Bandung Book Center, yang masih dilakukan secara konvensional langsung  ke  tempat  penjualannya.  Analisis  Sistem  ini  bertujuan  untuk mengetahui lebih jelas dari cara kerja sistem tersebut, sehingga dapat diketahui kelebihan dan kekurangan dari sistem akademik yang sedang berjalan.

## 4.1.1. Use Case yang Sedang Berjalan
Miftakhul  Huda  (2010:138)  menyatakan  use  case  menggambarkan fungsionalitas  dari  sebuah  sistem  (apa  fungsinya).  Yang  mempresentasikan sebuah  interaksi  antar  aktor  dengan  sistem  (sebuah  pekerjaan).  Berikut  adalah Use Case yang di berjalan.
Gambar 4.1 Use Case yang Berjalan

## 4.2.  Perancangan Sistem yang Diusulkan
Proses  perancangan  ini  merupakan  tahap  awal  dari  perancangan “Perancangan  Sistem  Informasi  Online  Shopping  Bandung  Book  Center Berbasis  Responsive  Website”  yang  dilakukan  sebagai  pemecahan  masalah yang ada pada proses aplikasi ketika digunakan.
Pemodelan dan perancangan  sistem  dimodelkan  dengan  menggunakan UML (Unified  Modeling    Language) .  Tahap-tahap  pemodelan  dalam  analisis tersebut  antara  lain Usecase  diagram , Class  Diagram,  Activity  Diagram, Sequence Diagram, Component Diagram dan  Deployment Diagram .

## 4.2.1. Use Case Diagram
Miftakhul  Huda  (2010:138)  menyatakan  use  case  menggambarkan fungsionalitas  dari  sebuah  sistem  (apa  fungsinya).  Yang  mempresentasikan sebuah  interaksi  antar  aktor  dengan  sistem  (sebuah  pekerjaan).  Berikut  adalah Use Case yang di usulkan
Gambar 4.2 Use Case yang Disulkan

## 4.2.2. Skenario Use Case
Skenario  Use  Case  digunakan  untuk  memudahkan  dalam  menganalisa skenario  yang akan kita gunakan pada fase-fase selanjutnya dengan melakukan penilaian  terhadap skenario tersebut,  berikut skenario use case yang diusulkan.
Skenario Use Case Pendaftaran Tabel 4.1 No Use Case   : 01 Nama Use Case : daftar Skenario Use Case View Produk pada Tabel 4.2
No Use Case : 02 Nama Use Case : view produk Skenario Use Case Transaksi dan Cehckout pada Tabel 4.3 No Use Case : 3, 4 Nama Use Case : transaksi 4.2.3  Activity Diagram
Miftakhul  Huda  (2010:142)  diagram  ini  menggambarkan  berbagai aktivitas dalam sistem yang sedang dirancang, mulai titik awal, melalui kondisi yang  mungkin  terjadi,  kemudian  sampai  pada  titik  akhir.  Berikut  adalah diagram activity yang diusulkan:
1. Activity Diagram Daftar pada Gambar 4.3
2. Activity Diagram View Produk pada Gambar 4.4
3. Activity Diagram Transaksi pada Gambar 4.5
4.2.4. Class Diagram
Miftakhul Huda (2010 : 138) Class adalah sebuah spesifikasi objek, yang memiliki  atribut  dan  layanan/fungsional  (metode/fungsi).  Class  diagram menggambarkan  struktur  dan  deskripsi  kelas,  package  dan  objek  beserta hubungan satu sama lain, seperti containment, pewarisan, asosiasi, dan lain-lain. Berikut adalah Class Diagram yang diusulkan pada Gambar 4.6 4.2.5. Sequence Diagram
Miftakhul  Huda  (2010:143)  diagram  ini  menggambarkan  interaksi  antar objek di dalam dan di sekitar sistem berupa message yang digunakan terhadap waktu.  Sequence  diagram  terdiri  dari  dimensi  vertical  (waktu)  dan  dimensi horizontal  (objek  yang  terkait).  Berikut  adalah  Sequence  Diagram  yang diusulkan:
1. Sequence Diagram Daftar pada Gambar 4.7
2. Sequence Diagram View Produk pada Gambar 4.8
3. Sequence Diagram Transaksi pada Gambar 4.9
4.2.6. Component Diagram
Miftakhul  Huda  (2010:145)  Diagram  ini  menggambarkan  struktur  dan hubungan antar komponen peranti lunak, termasuk ketergantungan. Diantaranya modul  berisi  kode,  binary,  library,  exccutable . Component  Diagram  yang diusulkan dapat dilihat pada Gambar 4.10 4.2.7. Deployment Diagram
Miftahkul  Huda  (2010:145)  deployment  diagram  menggambarkan detail  bagaimana  komponen  dibentuk  dan  didistribusikan  dalam  infrastruktur sistem. Dimana komponen akan terletak pada mesin, server, client dan hal lain yang  bersifat  fisik.  Deployment  Diagram  yang  diusulkan  dapat  dilihat  pada Gambar 4.11

## 4.3.  Implementasi
Tujuan  implementasi  sistem  adalah  untuk  menjelaskan  tentang  manual modul  kepada  semua  user  yang  akan  menggunakan  sistem,  sehingga  user tersebut  dapat  merespon  apa  yang  ditampilkan  di  sistem  dan  memberikan masukan  kepada  pembuat  sistem  untuk  dilakukan  perbaikan  agar  sistem  lebih baik lagi.

## 4.3.1  Batasan Implementasi
Dalam  mengimplementasikan  perangkat  lunak,  batasan  sebagai pengendalian  aplikasi  ini  ada  beberapa  hal  yang  perlu  dibatasai  dalam implementasi ini yaitu :
1. Perangkat  lunak  yang  digunakan  dalam  pengimplementasian  basis data  ini  adalah  MySQL  yang  telah  terkompilasi  kedalam  sebuah perangkat lunak bebas yaitu xampp 1.7.4.
2. Menggunakan  Bootsrap  3  CSS  untuk  membuat  tampilan  menjadi responsive.
3. Sistem Operasi Windows 7 Ultimate Edition

## 4.3.2  Implementasi Perangkat Lunak
Perangkat  Lunak  ( software )  yang  digunakan  untuk  membangun  Sistem Informasi  Online  Shopping  Bandung  Book  Centre  Berbasis  Responsive Website adalah sebagai berikut :
Komputer PC dengan perangkat lunak yang disebutkan dibawah ini.
1. Sistem Operasi Windows 7 Ultimate.
2. cPanel Version 11.40.1 (build 11)
3. Adobe Dreamweaver CS3 untuk penulisan kode program PHP.
4. Mozilla Firefox 11 sebagai browser.
4.3.3  Implementasi Perangkat Keras Kebutuhan  perangkat  keras  ( hardware )  yang  diperlukan  untuk mengimplementasikan program aplikasi yang dibuat adalah perangkat keras :
1. Server :
a. Kapasitas 500MB.
b. Bandwitch 10000MB
c. PHP version 5.0.x
d. MySQL 5.x
e. Private CGI-BIN
f. Server Side Includes
g. Java
h. GD
i. cPanel
j. phpMyAdmin
k. SMTP/IPETA/Webmail
2. Client
a. Processor minimum Pentium Dual Core atau yang sekelasnya.
b. Menggunakan minimal RAM 1 GB.
c. Harddisk 160 Gb.
d. Keyboard , Monitor dan Mouse.
e. Koneksi internet

## 4.3.4  Implementasi Basis Data
Implementasi  Basis  Data  diambil  berdasarkan  perancangan  basis  data yang  dibuat  sebelumnya.  Tabel  -  tabel  berikut  menggambarkan  struktur  tabel yang di implementasikan pada basis data.
1. Tabel barang
Tabel 4.4 Tabel barang 2. Tabel jenis Tabel 4.5 Tabel jenis
3. Tabel kategori
Tabel 4.6 Tabel kategori
4. Tabel orders
Tabel 4.7 Tabel orders
5. Tabel orders detail
Tabel 4.8 Tabel detail
6. Tabel pengarang
Tabel 4.9 Tabel pengarang
7. Tabel recomeded
Tabel 4.10 Tabel recomended
8. Tabel user
Tabel 4.11 Tabel user
4.3.5  Implementasi Antar Muka
Antar Muka terdiri dari beberapa tampilan di antaranya, Halaman Utama, Daftar, Log In, Detail Produk, Shopping Cart, Checkout .
1. Berikut  adalah  tampilan  halaman  utama  webstie  ketika  dalam  kedaan normal
Gambar 4.12
2. Berikut tampilan halaman utama website ketika dalam keadaan responsive
Gambar 4.13
3. Berikut  adalah  tampilan  halaman  daftar  webstie  ketika  dalam  kedaan
normal Gambar 4.14
4. Berikut tampilan halaman halaman daftar website ketika dalam keadaan responsive Gambar 4.15
5. Berikut  adalah  tampilan  halaman  log  in  webstie  ketika  dalam  kedaan normal Gambar 4.16 6. Berikut tampilan halaman log in ketika dalam keadaan responsive Gambar 4.17
7. Berikut  adalah  tampilan  halaman  detai  produk  webstie  ketika  dalam kedaan normal
Gambar 4.18
8. Berikut tampilan halaman detail produk website ketika dalam keadaan responsive Gambar 4.19
9. Berikut  adalah  tampilan  halaman  shopping  chart  webstie  ketika  dalam
kedaan normal Gambar 4.20
10. Berikut tampilan halaman shopping chart website ketika dalam keadaan responsive

## Gambar 4.21
11. Berikut adalah tampilan halaman  checkout webstie ketika dalam  kedaan normal
Gambar 4.22 12. Berikut tampilan halaman utama checkout ketika dalam keadaan responsive
Gambar 4.23

## V. KESIMPULAN DAN SARAN

## 5.1   Kesimpulan
Perancangan sistem informasi ini diharapkan dapat menjadi  solusi untuk memecahkan  masalah  yang  terjadi  pada  Book  Center  sebagi  pelengkap  dari sistem  penjualan  yang  telah  ada,  sehingga  user  lebih  nyaman  ketika  mencari informasi  melalui  internet.  Dengan  sistem  yang  telah  diterapkan  ini,  maka penulis dapat menarik kesimpulan:
a. Sebelumnya  pelanggan  hanya  dapat  mendapatkan  informasi  tentang produk BBC yaitu buku dangan datang langsung ke toko atau gerai BBC, Sekarang  pelanggan  bisa  mengakses  langsung  website  BBC  dan mendapatkan informasi buku dengan media internet.
b. Sebelumnya  promosi  cenderung  lambat  dan  hanya  dari  mulut  ke  mulut, sekarang  info  tentang  promosi  produk  dapat  cepat  di  dapat  dari  website BBC.
c. Sekarang  pelanggan  dapat  dengan  nyaman  mengakses website BBC melalui browser PC/Laptop  maupun  menggunakan smartphone mereka, karena website BBC merupakan website yg responsive .

## 5.2   Saran
Sistem  Informasi  Online  Shopping  Bandung  Book  Center  Berbasis Responsive  Website  ini  adalah  sistem  yang  baru  pertama  kalinya diimplementasikan  di  dalam  perusahaan,  tentunya  banyak  sekali  penyesuaian yang  harus  dilakukan.  Selain  itu,  untuk  menerapakan  sistem  agar  berjalan dengan  baik  tentu  memerlukan  proses  pelatihan  dan  perawatan sistem.  Seperti penerapan sistem pada umumnya, sistem ini juga memerlukan biaya perawatan, perlu  dijaga  keamanannya  dan backup Saran  yang  diajukan  penulis  untuk pemakaian sistem yang dibuat ini adalah:
1. Perlu  adanya  sistem  yang  menangani  sinkronisasi  data  antara  sistem inventori  yang  sudah  ada  (local)  dengan  website  yang  sudah  online sehingg admin tidak menginput data dua kali dan produk yang ada pada website senantiasa up to date.
2. Backup data harus dilakukan secara berkala baik itu data hasil penjualan dan data cutomer.
3. Aplikasi ini dibuat untuk menjadi pelengkap dari aplikasi yang sudah ada sebelumnya  seperti  inventory  barang,  sehingga  di  harapkan  dapat menunjang kinerja perusahaan dan meningkatkan profit perusahaan.

## DAFTAR PUSTAKA
Sumber Buku: Abdul Kadir. 2003. Pengenalan Sistem Informasi . Andi. Yogyakarta. Huda,  Miftakhul  &  Bunafit  Komputer.  2010. Memebuat  Aplikasi  Data  Base Dengan  Java,  MY  SQL  dan  NetBeans .  PT.  Elex  Media  Komputindo.
Jakarta.
Jack  Spurlock.  2013.  Bootsrap  Responsive  Web  Development.  O’  Reilly Media, Inc. Gravenstein Highway North, Sebastopol, America. Jogiyanto,  HM.  2005. Analisis  dan  Desain  Sistem  Informasi :  Pendekatan Terstruktur Teori dan Praktek Aplikasi Bisnis . ANDI. Yogyakarta.
Roger S. Pressman. 2010. Software Engineering: A Practitioner’s Approach 7th ed . McGraw-Hill Companies, Inc. New York America Sumber Internet: Codeigniter ( http://ellislab.com/codeigniter , diakses 17 Februari 2014) Online Shopping ( http://en.wikipedia.org/online_shopping , diakses 17 Februari 2014) Sistem informasi Penjualan ( http://id.wikipedia.org/sistem_informasi_penjualan , diakses 17 Februari 2014)

## DAFTAR GAMBAR
Gambar 3.1 Prototyping Paradigm
Gambar 3.1 Prototyping Paradigm
Gambar 4.1 Use Case yang Berjalan
Gambar 4.2 Use Case yang Diusulkan
Comunication Quick Plan Modeling Construction of Prototype Deployment Delivery & Feedback
Gambar 4.3 Activity Diagram Daftar
Gambar 4.4 Activity Diagram View Produk
Gambar 4.5 Activity Diagram Transaksi
Gambar 4.6 Class Diagram yang Diusulkan
Gambar 4.7 Sequence Daftar
produk +id_produk +jenis_produk +kategori_produk +show_buku() +show_stationeri() buku +id_buku +judul_buku +pengarang +harga +diskon +isbn stationeri +id_alat_tulis +nama_alat_tulis +harga +diskon chart +id_chart +id_detail +manage_chart() bbc_user +register() +login() whistlist +id_wishlist +show_item() bbc_member +id_user +nama_user +email +alamat +password +user_level +add_to_chart() +add_to_wishlist() +checkout() bbc_transaksi +id_transaksi +tanggal_transaksi +manage_transaksi() auth_class +username +password +validation() bbc_admin +id_user +nama_user +email +password +user_level +dashboardd_view() dashboard +manage_user() +manage_transaksi() +manage_produk() index +home_view()
Gambar 4.8 Sequence View Produk
Gambar 4.9 Sequence Transaksi
Gambar 4.10 Component Diagram
Gambar 4.11 Deployment Diagram
Gambar 4.12 Halaman Utama Normal
Log In Hak Akses (Auth) Member Shopping chart Checkout Wish List Daftar Guest PC/Laptop Web Browser Smartphone Web Browser Web Server Apache Database Server MySQL <<internet connection>> <<internet connection>> DB Connect
Gambar 4.13 Halaman Utama Responsive
Gambar 4.14 Halaman Daftar Normal
Gambar 4.15 Halaman Daftar Responsive
Gambar 4.16 Halaman Log In Normal
Gambar 4.17 Halaman Log In Responsive
Gambar 4.18 Halaman Produk Normal
Gambar 4.19 Halaman Produk Responsive
Gambar 4.20 Halaman Shopping Chart Normal
Gambar 4.21 Halaman Shopping Chart Responsive
Gambar 4.22 Halaman Checkut Normal
Gambar 4.23 Halaman Checkout Responsive
Tabel 4.1 Tabel Sekenario Daftar
Aksi Aktor Reaksi Sistem 1. Mengakses Web 2. Menampilkan halaman utama
3. Memilih menu daftar
4. Menampilkan form pendaftaran
5. Mengisi form pendaftaran
6. Validasi dan proses pendaftaran
7. Sukses mendaftar
Tabel 4.2 Sekenario View Produk AksiAktor Reaksi Sistem 1. Akses Website 2. Menampilkan halaman awal
3. Memilih menu kategori
4. Menampilkan data buku dan data alat tulis
Tabel 4.3 Sekenario Transaksi AksiAktor ReaksiSistem 1. Mengakses website bbc 2. Menampilkan halaman utama
3. Memilih menu produk
4. Menampilkan produk Menambah produk ke keranjang belanja 5. 6. Menyimpan ke keranjang belanja 7. ( add to chart ) Memilih menu checkout 8. 9. Proses Transaksi 10. Mengirim invoice transaksi
Tabel 4.4 Tabel barang CREATE TABLE IF NOT EXISTS `barang` ( `KODE_BARANG` varchar(8) NOT NULL, `ID_KATEGORI` int(11) NOT NULL, `ID_JENIS` int(11) NOT NULL, `JUDUL` varchar(100) DEFAULT NULL, `SINOPSIS` text, `HARGA_BELI` double(15,0) DEFAULT NULL, `HARGA_JUAL` double(15,0) DEFAULT NULL, `DISKON` double(15,0) DEFAULT NULL, `TGL_TERBIT` date DEFAULT NULL, `TGL_BUAT` datetime DEFAULT NULL, `TGL_UBAH` datetime DEFAULT NULL, `ISBN` varchar(8) DEFAULT NULL, `HARGA_LIST` double(15,0) DEFAULT NULL, `NAMA_FILE` varchar(100) DEFAULT NULL, PRIMARY KEY (`KODE_BARANG`), KEY `FK_RELATIONSHIP_2` (`ID_KATEGORI`), KEY `FK_RELATIONSHIP_3` (`ID_JENIS`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Tabel 4.5 Tabel jenis CREATE TABLE IF NOT EXISTS `jenis` ( `ID_JENIS` int(11) NOT NULL AUTO_INCREMENT, `KODE_JENIS_BARANG` varchar(3) DEFAULT NULL, `JENIS_BARANG` varchar(20) DEFAULT NULL, PRIMARY KEY (`ID_JENIS`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1
AUTO_INCREMENT=12 ;
Tabel 4.6 Tabel kategori CREATE TABLE IF NOT EXISTS `kategori` ( `ID_KATEGORI` int(11) NOT NULL AUTO_INCREMENT, `KODE_KATEGORI` varchar(5) DEFAULT NULL, `NAMA_KATEGORI` varchar(30) DEFAULT NULL, PRIMARY KEY (`ID_KATEGORI`)
) ENGINE=MyISAM DEFAULT
CHARSET=latin1
AUTO_INCREMENT=116 ;
Tabel 4.7 Tabel orders CREATE TABLE IF NOT EXISTS `orders` ( `ID_ORDERS` int(11) NOT NULL AUTO_INCREMENT, `TGL_ORDERS` datetime DEFAULT NULL, `HARI` varchar(7) DEFAULT NULL, `NAMA_PEMESAN` varchar(50) DEFAULT NULL, `EMAIL` varchar(50) DEFAULT NULL, `JML_TOTAL` int(11) DEFAULT NULL, `TOTAL_HARGA` double(15,0) DEFAULT NULL, `STATUS_SELLER` int(2) DEFAULT NULL, PRIMARY KEY (`ID_ORDERS`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Tabel 4.8 Tabel detail CREATE TABLE IF NOT EXISTS `orders_detail` ( `ID_ORDERS_DETAIL` int(11) NOT NULL AUTO_INCREMENT, `KODE_BARANG` varchar(8) NOT NULL, `ID_ORDERS` int(11) NOT NULL, `SUB_TOTAL` float(15,0) DEFAULT NULL, `JML_ORDERS` int(11) DEFAULT NULL, PRIMARY KEY (`ID_ORDERS_DETAIL`), KEY `FK_RELATIONSHIP_11` (`ID_ORDERS`), KEY `FK_RELATIONSHIP_12` (`KODE_BARANG`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Tabel 4.9 Tabel pengarang CREATE TABLE IF NOT EXISTS `pengarang` ( `ID_PENGARANG` int(11) NOT NULL AUTO_INCREMENT, `KODE_BARANG` varchar(8) NOT NULL, `NAMA_PENGARANG` varchar(50) DEFAULT NULL, PRIMARY KEY (`ID_PENGARANG`), KEY `FK_RELATIONSHIP_8` (`KODE_BARANG`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1
AUTO_INCREMENT=10 ;
Tabel 4.10 Tabel recomended CREATE TABLE IF NOT EXISTS `recomended` ( `ID_RECOMENDED` int(11) NOT NULL AUTO_INCREMENT, `KODE_BARANG` varchar(8) NOT NULL, `ID_KATEGORI` int(11) NOT NULL, `ID_JENIS` int(11) NOT NULL, `STATUS` int(11) DEFAULT NULL, PRIMARY KEY (`ID_RECOMENDED`), KEY `FK_RELATIONSHIP_10` (`ID_JENIS`), KEY `FK_RELATIONSHIP_5` (`KODE_BARANG`), KEY `FK_RELATIONSHIP_9` (`ID_KATEGORI`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1
AUTO_INCREMENT=10 ;
Tabel 4.11 Tabel user CREATE TABLE IF NOT EXISTS `user` ( `USERNAME` varchar(50) NOT NULL, `PASSWORD` varchar(100) NOT NULL, `ID_FB` varchar(100) NOT NULL, `NAMA_LENGKAP` varchar(100) NOT NULL, `EMAIL` varchar(100) NOT NULL, `LEVEL` int(1) NOT NULL DEFAULT '0', `AKTIFASI` int(2) NOT NULL DEFAULT '0', `KODE_AKTIVASI` varchar(100) NOT NULL, `TOKEN` text NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1;