PERANCANGAN WEBSITE E-COMMERCE PADA TOKO

SEPATU ANGGA SPORT

NASKAH MENGGUNAKAN
PUBLIKASI
FRAMEWORK CODEIGNITER
PERANCANGAN WEBSITE E-COMMERCE PADA TOKO
SEPATU ANGGA SPORT
NASKAH MENGGUNAKAN
PUBLIKASI
FRAMEWORK CODEIGNITER

yang dipersiapkan dan disusun oleh

Rizal
14.01.3381

Dosen Pembimbing

Bayu Setiaji, M.Kom.

NIK. 190302216

Tanggal, 27 November 2017

Ketua Program Studi
diajukan oleh
D3 - Teknik Informatika
Rizal
14.01.3381

Melwin Syafrizal, S.Kom., M.Eng.

NIK. 190302105
Kepada
FAKULTAS ILMU KOMPUTER
UNIVERSITAS AMIKOM YOGYAKARTA
YOGYAKARTA
2017
 PERANCANGAN WEBSITE E-COMMERCE PADA TOKO
SEPATU ANGGA SPORT MENGGUNAKAN
FRAMEWORK CODEIGNITER
Rizal1), Bayu Setiaji2),
1)
Teknik Informatika Universitas AMIKOM Yogyakarta
2)
Informatika Universitas AMIKOM Yogyakarta
Jl Ringroad Utara, Condongcatur, Depok, Sleman, Yogyakarta Indonesia 55283
Email : rizal3381@students.amikom.ac.id1),bayusetiaji@amikom.ac.id2),
Abstract - Shoes store requires a media
campaign supporting the sales revenue and
provide satisfactory services to the customers. To
which the author tries create a final project in
footwear sales system that is still using the offline
system sales.
Web-based online sales is the best solution
to solve the problems that exist at a shoes store
making easier to do transactions, save time, more
affordable and more advatages that can taken in
sell online
The e-commerce website will be built using
the codeigniter framework. The e-Commerce
website will help Angga Sport Shoe Shop in
online sales. All customers can buy shoes via e-
Commerce website easily without having to go to
the store. Owners of Angga Sport Shoes Store will
also be easier to monitor sales.
Key words: Website, e-Commerce, Sales, Online
Sale
1. Pendahuluan
1.1 Latar Belakang Masalah
E-Commerce adalah sebuah sistem jual beli
yang bersifat online, dimana seorang pembeli tidak
perlu selalu datang ke toko untuk membeli suatu
barang . Saat ini E-Commerce merupakan salah
satu alternative pilihan untuk membuka usaha
dalam bidang penjualan sebagai media informasi
yang memudahkan adanya interaksi antara penjual
dan pembeli tanpa di batasi oleh ruang dan waktu .
Dengan didukung oleh perkembangan teknologi
informasi yang semakin canggih dan mudah
didapat, perkembangan E-Commerce semakin
diminati Toko Sepatu Angga Sport adalah sebuah
wirausaha yang bergerak di bidang penjualan
sepatu sekolah, sepatu olahraga dan sepatu santai .
Selama ini toko yang beralamat Jl.Lintas Karang
Duwet. Klaten utara, Klaten ini masih memasarkan
produk secara manual. Pada sistem yang berjalan di
Toko Sepatu Angga Sport, masih menggunakan
brosur . Hal ini tidak efektif selain itu brosur
biasanya hanya bersifat lokal dan tidak menjangkau
luar daerah.
1
Toko Sepatu Angga Sport saat ini masih
mengguanakan sistem penjualan yang
konvensional, dimana pelanggan harus mendatangi
toko untuk memilih dan membeli barang yang
diinginkan. Kondisi ini menimbulkan kesulitan
berbelanja bagi konsumen yang berada di luar kota
Klaten yang tidak bisa datang langsung ke Toko
Sepatu Angga Sport. Hal ini dirasakan oleh
pelanggan yang mempunyai kesibukan dalam
kegiatan sehari-hari sehingga tidak sempat belanja.
Pada saat ini di Toko Sepatu Angga Sport
belum menggunakan fasilitas E-Commerce
tersebut . Proses penjualan terbatas pada konsumen
yang datang ke toko saja. Hal inilah yang
mendasari bahwa perlu adanya fasilitas E-
Commerce yang dapat menginformasikan dan
menawarkan produk secara global . Sehingga toko
lebih cepat maju dan berkembang. Berdasarkan
permasalahan diatas maka penulis tertarik untuk
menulis laporan tugas akhir dengan mengambil
judul “Perancangan Website E-Commerce pada
Toko Sepatu Angga Sport Menggunakan
Framework Codeigniter”
1.2 Tinjauan Pustaka
Perancangan toko online berbasis website
sebagai sarana pemasaran dan promosi pada Choco
Shoes Store. Mohamad Syaifullah Ansharudin
13.01.31974 dan Muhamad Choiri 13.01.3251
Penjelasan : pada kasus penelitian yang dilakukan
oleh Mohamad Syaifullah Ansharudin dan
Muhamad Choiri 13.01.3251 ini, menggunakan
analisis PIECES dalam perancangannya. Kasus
yang ada pada objek penelitian ini yaitu
menekankan keranjang belanja yang kurang
efektif. Pemodelan Sistem pada penelitian ini
menggunakan DFD dan website dibuat
menggunakan Macromedia Dreamweaver 8.[1]
Perancangan dan pembuatan website
sebagai media promosi mebel dan furniture di UD
AGUNG JATI menggunakan framework
codeigniter Arief dwi cahyo 15.11.1682 Penjelasan
: pada kasus penelitian yang dilakukan oleh Arief
Dwi Cahyo ini, menggunakan analisis PIECES
dalam perancangannya. Kasus yang ada pada objek
penelitian ini yaitu menekankan stok barang yang
belum bisa update otomatis dan transaksi
pembayaran yang belum terintegrasi di web.
Perancangan menggunakan UML dan website
dibuat menggunakan Sublim text 3 dengan
framework codeigniter. [2]
Pembuatan website penjualan untuk distro
crows pantoro aji 09.01.2356 dan Toni purwanto
09.01.2639 Penjelasan : pada kasus penelitian yang
dilakukan oleh Lihar Pantoro dan Toni Purwanto
ini, menggunakan analisis PIECES dalam
perancangannya. Kasus yang ada pada objek
penelitian ini yaitu menekankan masalah
pemesanan produk yang kurang efektif.
Perancangan sistem yang dibuat menggunakan
DFD dan website dibuat menggunakan
Micromedia Dreameweaver 8.[3]
1.3 Dasar Teori
Menurut Suyanto, Ecommerce merupakan
konsep baru yang bisa digambarkan sebagai proses
jual beli barang atau jasa pada World Wide Web
internet atau proses jual beli atau pertukaran
produk, jasa dan informasi melalui jaringan
informasi termasuk internet.[4]
Interconnection network (internet) adalah
sistem global dari seluruh jaringan komputer yang
saling terhubung. Internet berasal dari bahsa latin
“inter” yang berarti “antara”. Internet merupakan
jaringan yang terdiri dari milyaran komputer yang
ada di seluruh dunia. Internet melibatkan berbagai
jenis komputer serta topology jaringan yang
berbeda. Dalam mengatur integrasi dan komunikasi
jaringan, digunakan standar protocol internet yaitu
TCP/IP. TCP bertugas untuk memastikan bahwa
semua hubungan bekerja dengan baik, sedangkan
IP bertugas untuk mentransmisikan paket datadari
satu komputer ke komputer lainnya.[5]
XAMPP adalah sebuah software web server
apache yang didalamnya sudah tersedia database
server mysql dan support php programming.
XAMPP merupakan software yang mudah
digunakan, gratis dan mendukung instalasi di
Linux dan Windows. Keuntungan lainnya adalah
Cuma menginstal satu kali sudah tersedia Apache
Web Server Database server, PHP Support (PHP 4
dan PHP 5) dan beberapa module lainnya.[6]
Web browser adalah aplikasi perangkat
lunak yang digunakan untuk mengambil dan
menyajikan sumber informasi web. Sember
informasi web diidentifikasikan dengan Uniform
Resource Identifier (URL) yang dapat terdiri dari
halaman web, video, gambar, atau konten lainnya.
[7]
Adobe Photoshop atau biasa disebut
Photoshop, adalah perangkat lunak editor citra
buatan Adobe Systems yang dikhususkan untuk
mengedit foto/gambar dan pembuatan efek.
Perangkat lunakini banyak digunakan oleh
2
photographer digital dan perusahaan iklan sehingga
dianggap sebagai pemimpin pasar(market leader)
untuk perangkat lunak pengolahan gambar/foto.[8]
Uml (Unified modeling language) adalah
bahasa grafis untuk mendokumentasi,
menspesifikasi, dan membangun sistem perangkat
lunak. Konsep yang diterapkan di UML (Unified
modeling language) adalah satu model berisi
informasi mengenal sistem, model-model berisi
elemen-elemen mode seperti kelas.[9]
2. Pembahasan
2.1 Gambaran Umum
Perancangan Website E-Commerce pada
Toko Sepatu Angga Sport Menggunakan
Framework Codeigniter adalah sebuah sistem
penjualan online berbasis website yang bergerak di
bidang penjualan secara online dengan
mengaksesnya melalui website.
Sistem akan menampilkan produk-produk
sepatu kepada konsumen yang akan berbelanja
secara online.
2.2 Analisis Sistem
2.2.1 Analisis Kebutuhan Sistem
Dalam mempermudah analisis sistem untuk
menentukan keseluruhan kebutuhan secara
lengkap, maka analisis membagi kebutuhan sistem
menjadi dua jenis yaitu kebutuhan fungsional dan
kebutuhan non-fungsional.
2.2.2 Analisis Kelayakan Sistem
Analisis kelayakan merupakan analisis
yang digunakan untuk menentukan perkembangan
sistem layak diteruskan atau dihentikan. Analisis
kelayakan merupakan ringkasan dari keseluruhan
analisis sistem dan proses perancangan aplikasi.
Ada beberapa analisis kelayakan yang harus
dilakukan antara lain:
1. kelayakan teknologi
2. kelayakan hukum
3. kelayakan operasional
4. kelayakan ekonomi
2.3 Perancangan Sistem
Perancangan sistem dilakukan dengan
maksud untuk memberikan gambar secara umum
kepada user tentang sistem yang baru/sistem yang
akan diusulkan. Rancangan ini mengidentifikasikan
komponen-komponen sistem. informasi yang akan
dirancang secara rinci. Desain sistem dapat
didefinisakan sebagai penggambaran, perencanaan
dan pembuatan sketsa atau pengaturan dari
beberapa elemen yang terpisah dalam satu kesatuan
yang utuh dan berfungsi.
Tujuan desain sistem adalah :
1. Untuk memenuhi kebutuhan kepada
pemakai sistem, desain sistem harus
mudah dipahami dan digunakan.
2. Dapat mendukung tujuan utama instansi.
3. Desain sistem harus efisien dan efektif
untuk mendukung pengolahan data,
 laporan, dan mendukung keputusan yang
dilakukan.
2.3.1 Use Case Diagram
1. Use Case Diagram Admin
Gambar 1. Use Case Diagram Admin
2. Use Case Diagram Member
Gambar 2. Use Case Diagram Member
2.3.2 Activity Diagram
Diagram aktivitas atau activity diagram
menggambarkan aliran fungsionalitas sistem. Pada
tahap pemodelan bisnis, diagram aktivitas dapat
digunkan untuk menunjukkan aliran kerja bisnis
(business work flow). Dapat juga digunakan untuk
menggambarkan aliran kejadian (flow of events)
dalam use case. Activity diagram dapat
digambarkan pada tabel berikut:
1. Activity Diagram Login User
2. Activity Diagram Member
3. Activity Diagram Olah Data Barang
3
4. Activity Diagram Diskon Barang
5. Activity Diagram Pemesanan Barang
6. Activity Diagram Konfirmasi Transaksi
7. Activity Diagram Laporan Pemesanan
2.3.3 Class Diagram
Diagram Class memberikan pandangan
secara luas dari suatu sistem dengan menunjukan
kelas-kelasnya dan hubungan mereka. Diagram
Class bersifat sintetis “menggambarkan hubungan
apa yang terjadi jika mereka berhubungan”. Berikut
adalah diagram class Toko Sepatu Angga Sport :
Gambar 3. Class Diagran
2.3.4 Sequance Diagram
Sequence diagram atau diagram sekuensial
digunakan untuk menunjukkan aliran fungsionalitas
dalam use case.. Sequence diagram
memperlihatkan tahap demi tahap apa yang
seharusnya terjadi untuk menghasilkan sesuatu
didalam use case. Perancangan sequence diagram
dijelaskan pada gambar berikut ini:
1. Sequance Diagram Login User
2. Sequance Diagram Member
3. Sequance Diagram Olah Data Barang
4. Sequance Diagram Diskon Barang
5. Sequance Diagram Pemesanan Barang
6. Sequance Diagram Konfirmasi Transaksi
7. Sequance Diagram Laporan Pemesanan
2.4 Perancangan Basis Data
Dalam perancangan website ini, peneliti
menggunakan pendekatan Unified Modeling
Language (UML) untuk melakukan perancangan
basis datanya. Perancangan basis data adalah tahap
bagaimana mendesign data yang akan
menghasilkan suatu data yang cepat, efisien dan
mudah dalam melakukan proses manipulasi.
Didalam pendekatan UML proses alur data
digambarkan dengan class diagram yang sudah
dijelaskan di penjelasan class diagram sebelumnya
 2.6 Pengujian
Uji coba program atau testing menggunakan
Black Box Testing dan White Box Testing. Black
Box Testing yaitu penguji spesifikasi suatu fungsi
atau modul, apakah berjalan sesuai yang
diharapkan atau tidak. Black box testing dilakukan
untuk mengetahui apabila setiap button yang ada
dapat berjalan sesuai dengan fungsinya atau tidak.
Sedangkan.
White box testing menggunakan struktur
kontrol dari desain program secara procedural
untuk membagi pengujian ke dalam beberapa White
box testing menggunakan struktur kontrol dari
desain program secara procedural untuk membagi
pengujian ke dalam beberapa kasus pengujian.
White box testing merupakan cara pengujian
dengan melihat ke dalam modul untuk meneliti
kode-kode program yang ada, dan mencari apakah
terjadi kesalahan kasus pengujian.White box testing
Gambar 4. RelasiAntarTabel merupakan cara pengujian dengan melihat ke
dalam modul untuk meneliti kode-kode program
2.5 Implementasi Sistem yang ada, dan mencari apakah terjadi kesalahan.
Tahap implementasi sistem (System
Implementasi) adalah tahap meletakkan sistem Tabel 1. Tabel Black Box Testing
supaya siap dioperasikan.implementasi sistem Halaman Pengujian Hasil
merupakan tindak lanjut dalam pembuatan dan Login member User Berhasil
pemasangan sistem baru yang akan digunakan, memasukkan
sesuai desain yanga telah direncanakan sebelumnya username dan
password
<?php if ( ! defined('BASEPATH')) exit('No direct Register Memasukkan berhasil
script access allowed'); member data dan
$config['theme'] = 'v1'; identitas diri
$config['web_name'] = 'Ecommerce Angga Halaman Menampilkan berhasil
Sport'; Home halaman home
$config['web_keterangan'] = 'Klaten'; Halaman Profil Menampilkan berhasil
$config['web_desc'] = 'Penjualan Sepatu Sekolah, profil member
Sepatu Olahraga, dan Sepatu Santai'; Halaman Menampilkan berhasil
$config['web_alamat'] = " katalog katalog barang
Jl. Halmahera, mojayan, Klaten Tengah Kabupaten Halaman Menampilkan berhasil
Klaten, Jawa Tengah 57416<br/> Keranjang halaman
Telp : 085643329795<br/> keranjang
Email : angga_sport@yahoo.co.id Halaman Menginputkan berhasil
"; Konfirmasi data
$config['web_about'] = " Pembayaran pembayaran
<h1> Halaman Menampilkan Berhasil
<center> Berita halaman berita
ABOUT</h1>
<p> Tabel 2. Tabel White Box Testing
<center> Program 1 2 3
Ecommerce Angga Sport Record Berhasil Berhasil Berhasil
</center> Daftar
</p> Record Berhasil Berhasil Berhasil
<p> Login
<center> Record Berhasil Berhasil Berhasil
Klaten Produk
</center> Record Berhasil Berhasil Berhasil
</p> Edit
"; Produk
$config['web_tahun'] = 2017; Record Berhasil Berhasil Berhasil
$config['kota'] = 196; //Klaten

4
Tambah
Produk
Record Berhasil Berhasil Berhasil
Hapus
Produk

2.7 Design
Design merupakan pembahasan tentang
design interface sistem. Pembahasan tersebut
berdasarkan perancangan design yang telah dibuat
pada bab analisis
1. Form Dashboard Admin
Gambar 10. Konfirmasi
4. Form Berita
Halaman berita digunakan admin untuk
memberi informasi kepada member.

Gambar 5. Dashboard Admin

1. Form Home
Halaman home adalahhalaman yang
pertama kali munculketikamengakses website

Gamabar 11. Berita

5. Form Keranjang
Halaman keranjang untuk menampilkan
hasil tadi saat melakukan pembelian.

Gambar 8. Home
2. Form Katalog
Halaman katalog adalah halaman yang
menampilkan semua barang yang di promosikan ke
website Toko Sepatu Angga Sport.
Gambar 12. Keranjang

3 Penutup
3.1 Kesimpulan
Berdasarkan uraian dan penjelasan serta
pembahasan. Keseluruhan pada bab-bab
sebelumnya maka penyusun mengambil
kesimpulan sebagai berikut:
Gambar 9. Katalog 1. Media perancangan menggunakan UML
3. Form Konfirmasi 2. Menggunakan duaUse Case yaitu Use
Halaman konfirmasi untuk member Case Diagram Admin dan Use Case
melakukan pembayaran. Diagram member.
3. Membuat Activity Diagram
4. Membuat Class diagram yang bersifat
sintetis yaitu menggambarkan hubungan

5
 apa yang terjadi jika tabel-tabel
berhubungan”
5. Membuat Sequance diagram
6. Database yang dihasilkan ada 16 tabel
7. Melalui dua tahap uji coba program yaitu
uji Black box testing dan ujicoba White
box testing
3.2 Saran
Setelah selesai melakukan penelitian dan
pembuatan sistem baru,penulis berharap hasil dari
penelitian ini dapat dimanfaatkan oleh pihak Toko
Sepatu Angga Sport, dan dapat bermanfaat bagi
pihak yang lain. Dan sebagai bahan pertimbangan
bagi pihak yang akan membuat sistem yang mirip
aatau bagi yang ingin mengembangkan website ini,
berikut adalah saran dari penulis:
1. Website yang dibuat belum sempurna dan
masih perlu ada pengembangan seperti
penambahan fitur. Fitur yang disaran kan
penulis adalah fitur untuk melakukan
percakapan online dengan member supaya
bisa berkomunikasi langsung di website,
fitur pembayaran langsung di website
dengan hanya memasukkan no rekening
dan pilihan bank dan langsung terhubung
ke bank yang dituju sehingga member bisa
dengan mudah melakukan pembayaran di
website ini tanpa pergi ke bank langsung
karena proses transaksi pembayaran pada
website yang dibuat masih menginputkan
bukti pembayaran transfer bank, juga
penambahan fitur request barang sehingga
member bisa melakukan permintaan
barang yang di inginkan dan fitur lainnya
yang bisa menunjang website Toko Sepatu
Angga Sport agar lebih menarik.
2. Untuk stok di bagian keranjang belanja
belum bisa tampil, saran untuk
pengembang jika ada yang
mengembangkan untuk di bagian stok
harus bisa tampil di keranjang belanja agar
member bisa mengetahui stok ternyata
masih banyak.
3. Terus berkembangnya teknologi
khususnya dalam pembuatan website dan
kebutuhan masyarakat. Diaharapkan
pengembang dapat menyesuaikan atau
menggunakan dengan teknologi terbaru
yang dapat meningkatkan kualitas atau
kegunaan website ini.
Daftar Pustaka
[1] Mohammad Syaifullah, Muhamad
Choiri.2013. Perancangan toko online
berbasis website sebagai sarana pemasaran
dan promosi pada Choco Shoes Store. Tugas
Akhir STMIK AMIKOM YOGYAKARTA.
Yogyakarta.
[2] Arief Dwi Cahyo.2015.Perancangan dan
pembuatan website sebagai media promosi
mebel dan furniture di UD AGUNG JATI
menggunakan framework codeigniter Skripsi
STMIK AMIKOM YOGYAKARTA.
Yogyakarta.
[3] Pantoro Aji, Toni Purwanto.2009. Pembuatan
website penjualan untuk distro crows. Tugas
Akhir STMIK AMIKOM YOGYAKARTA.
Yogyakarta
[4] M.Suyanto. 2003. Strategi Periklanan Pada E-
commerse Perusahaan Top Dunia.Yogyakarta.
Penerbit Andi
[5] http://www.termasmedia.com/65-pengertian/
71-pengertian-internet.html, diakses 5
Februari 2017 pukul 10:14
[6] http://www.maniacms.web.idf/
2012/1pengrtia-xampp.html, diakses 5
Februari 2017
[7] Sibero, Alexander F.K.2013. Web
Programming Power Pack. Yogyakarta;
Medikom
[8] Effendy, Asep.2011.Olah Photoshop Tingkat
Dewa.Penerbit:Mediakita.
[9] PudjoWidodo,Prabowo,Herlawati.2011.Meng
gunakan UML.Informatika.Bandung.
Biodata Penulis
Rizal, Program Studi D3 Teknik Informatika
Universitas AMIKOM Yogyakarta, angkatan 2014.
Bayusetiaji, memperoleh gelar sarjana komputer
(S.Kom) pada tahun 2006 dari Universitas Amikom
Yogyakarta.Gelar Master of Computer (M.Kom.)
diperoleh tahun 2012 dari Universitas Amikom
Yogyakarta. Sejak 2008 bergabung di Universitas
Amikom Yogyakarta sebagai dosen di program
studi S1Informatika, sampai sekarang.