Tugas Akhir Pweb

Judul : WEBSITE PENJUALAN SEPATU ONLINE
BERBASIS XAMPP
Kategori : TUGAS AKHIR
Nama : GERRY AFRANZI
Nomor Induk Mahasiswa : 09021382025166
Program Studi : TEKNIK INFORMATIKA
Departemen : ILMU KOMPUTER
Fakultas : FASILKOM
Disetujui di,
palembang,
desember
2021
UNIVERSITAS SUMATERA UTARA

PERNYATAAN
WEBSITE PENJUALAN SEPATU ONLINE BERBASIS XAMPP
TUGAS AKHIR
Saya mengakui bahwa laporan akhir studi ini adalah hasil kerja saya sendiri , kecuali
beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.
Palembang ,desember 2021
GERRY AFRANZI
09021382025166

PENGHARGAAN
Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Pemurah dan
Maha Penyayang, dengan limpah karunia-Nya penulis dapat menyelesaikan
penyusunan Tugas akhir ini dengan judul Website Penjualan Sepatu Online Berbasis
XAMPP.
Palembang, palembang 2021
Penulis

ABSTRAK
Tugas akhir ini bertujuan untuk membangun sebuah website Rumah Sepatu. Sistem
perancangan dalam pembuata website Rumah Sepatu ini dikembangkan dengan
menggunkan beberapa software yakni SUBLIME TEXT 3, XAMPP yang merupakan
gabungan dari Apache Web Server, PHP dan MySQL.
Dengan adanya website Rumah Sepatu ini diharapkan dapat mempermudah
proses pemasaran dan promosi produk-produk yang dapat meningkatkan pendapatan
Rumah Sepatu dan memberikan kemudahan bagi costumer Rumah Sepatu dalam hal
memperoleh informasi terbaru serta mempermudah kostumerdalam hal pembelian
melalui sistem online yang sangat praktis, tetapi tetap terjamin tingkat keamanannya.

DAFTAR ISI
Halaman
Persetujuan ii
Pernyataan iii
Penghargaan iv
Abstrak v
Daftar Isi vi
Daftar Tabel ix
Daftar Gambar x
BAB 1 PENDAHULUAN 1
1.1 Latar Belakang 1
1.2 Rumusan Masalah 2
1.3 Batasan Masalah 3
1.4 Tujan Penelitian 3
1.5 Manfaat Penelitian 3
1.6 Tinjauan Pustaka 3
1.7 Metodologi Peneltian 5
1.8 Sistematika Penelitian 5
BAB 2 LANDASAN TEORI 7

2.1 Pengertian Komputer 7
2.2 Sejarah Internet 9

2.3 Wold Wide Web (WWW) 10
2.3.1 Lahirnya Web 11
2.3.2 Browser Web 11
2.3.3 Server Web 13
2.3.4 Istilah-istilah Umum Yang Harus Diketahui 13
2.4 HTML (Hypertext Markup Language) 14
2.4.1 Dokumen HTML 14
2.4.2 Penamaan Dokumen HTML 14
2.4.3 Elemen dan Tag HTML 14
2.5 PHP (Hypertext Preprocessor) 17

2.5.1 SejarahPHP 17
2.5.2 PHP / FI 17
2.5.3 Kelebihan PHP 18
2.5.4 Script PHP 19
2.5.5 Integrasi dengan Database 20
2.6 MySQL 22
2.7 Sublime Text 3 22
2.8 Xampp 23
BAB 3 ANALISIS DAN PERANCANGAN SISTEM 25

3.1 Analisis Sistem 25
3.2 Perancangan Sistem 25
3.3 Data Flow Diagram (DFD 26
3.4 Perancangan Database 27
3.5 Flowchart 31
3.5.1 Flowchart Menu Utama 32

3.5.2 Flowchart Login Admin 34
3.6 Perancangan Algoritma 35
BAB 4 IMPLEMENTASI SISTEM 36

4.1 Pengertian Implementasi Sistem 36
4.2 Tujuan Implementasi Sistem 36
4.3 Komponen Utama dalam Implementasi Sistem 37
4.3.1 Perangkat Keras (Hardware) 37
4.3.2 Perangkat Lunak (Software 37
4.3.3 Unsur Manusia (Brainware) 38
4.4 Instalasi Xampp 1.7.1 38
4.5 Hasil Perancangan Program 39
BAB 5 KESIMPULAN DAN SARAN 44

5.1 Kesimpulan 44
5.2 Saran 44
DAFTAR PUSTAKA
LAMPIRAN

DAFTAR TABEL
Halaman
Tabel 2.1 Daftar Database yang didukung PHP 20
Tabel 3.1 Simbol-simbol Data Flow Diagram 27
Tabel 3.2 Tabel Admin 28
Tabel 3.3 Tabel Hubungi 28
Tabel 3.4 Tabel Kategori 29
Tabel 3.5 Tabel Kota 29
Tabel 3.6 Tabel Costumer 29
Tabel 3.7 Tabel Modul 30
Tabel 3.8 Tabel Order 30
Tabel 3.9 Tabel Produk 30
Tabel 3.10 Arti lambang-lambang Flowchart 31

DAFTAR GAMBAR
Halaman
Gambar 2.1 Dokumen HTML ditampilkan dibrowser Internet Explorer 17
Gambar 2.2 Tampilan Editor Sublime Text 23
Gambar 2.3 Tampilan Xampp 24
Gambar 3.1. Alur Flowchart Menu Utama 32
Gambar 3.2 Alur Flowchart Login Admin 34
Gambar 4.1 Halaman Utama Website 39
Gambar 4.2 Profil Website Rumah Sepatu 40
Gambar 4.3 Cara Pembelian Sepatu 40
Gambar 4.4 Pemesanan Barang 41
Gambar 4.5 Form Register 42
Gambar 4.6 Form Login 42
Gambar 4.7 Proses Pembayaran 43

BAB 1
PENDAHULUAN
1.1 Latar Belakang
Perkembangan Teknologi Internet yang pesat telah memicu munculnya berbagai

aplikasi baru termasuk di bidang Teknologi Informasi. Website adalah salah satu
revolusi dibidang informasi berbasis teknologi internet. Website diharapkan dapat
dijadikan alternative bagi pengembangan sistem informasi yang lebih efektif dan
efesien dengan biaya yang lebih rendah dimasa mendatang. Hal ini dapat berjalan
lancar apabila ada suatu jaringan internet. Salah satu bidang yang mendapatkan
dampak yang cukup berarti dengan perkembangan teknologi ini adalah bidang sistem
informasi, dimana pada dasarnya system informasi sangat berguna untuk member
informasi kepada masyarakat luas secara cepat dan akurat ,untuk membantu
masyarakat mengetahui apa yang sedang terjadi.
Informasi adalah suatu hasil dari pengolahan data yang penting bagi
penerimanya. Untuk mendapatkan dan menghasilkan informasi, komputer dan
teknologi adalah suatu alat bantu yang tepat. Kebutuhan akan informasi mendorong
adanya ketersediaan sarana seperti pemasangan jaringan internet di tempat-tempat
umum khususnya sekolah sebagai salah satu fasilitas yang sangat mendukung dalam
hal penyajian informasi, oleh karena itu sistem informasi yang sudah terkoneksi
internet dapat memanfaatkan fasilitas ini sebagai media informasi yang cepat, akurat
dan up to date dalam menyajikan informasi yang diperlukan.
Dengan adanya website diharapkan dapat membantu masyarakat pada

umumnya untuk memperoleh informasi dengan cepat dan akurat.Seiring dengan
perkembangan Teknologi Informasi Website bukan lagi sekedar menawarkan

company/product profile melainkan menuju ke system back office ( pengelolaan system
perkantoran/instansi/sekolah ) secara online dan realtime. “Website Penjualan Sepatu
Online Berbasis Xampp” merupakan implementasi system back office yang berbasis
Website.
E-commerce atau electronic commerce hadir seiring dengan perkemangan

internet yang sangat pesat. E-commerce menjadi daya tarik tersendiri bagi pecinta
kegiatan belanja pria maupun wanita. E-commerce hadir dalam menjawad tuntutan
gaya hidup modern manusia yang menuntut kemudahan dan kecepatan dalam segala
bidang. Tidak hanya pembeli yang dimudahkan dan dimanjakan dalam proses jual beli,
penjual-pun dimudahkan untuk menjual produk / dagangan mereka dengan cepat dan
mudah dibandingkan toko offline. Mulai muncul marketplace starup yang menjadi
rumah bagi penjual online / online shop ini.
Dengan adanya Website Penjualan Sepatu Online Berbasis Xampp dapat

membantu pembeli / penjual dalam mencari sepatu yang akan dicari tanpa harus
mendatangi tokoh yang menjual sepatu tersebut, sesuai dengan tersedianya fasilitas
internet/jaringan komputer di masyarakat, maka pembuatan website penjualan sepatu
online diharapkan dapat memudahkan masyarakat dalam kebutuhan belanja sepatu,
untuk itu dalam tugas akhir ini penulis mengambil judul “Website Penjualan Sepatu
Online Berbasis Xampp“
1.2 Rumusan Masalah
Berdasarkan uraian dari latar belakang permasalahan di atas, maka masalah yang akan
dibahas adalah sebagai berikut :
1. Cara cepat dalam mencari sepatu.
2. Mempermudah dalam pembelian sepatu tanpa mendatang tokonya

1.3 Batasan Masalah
Dalam hal ini untuk menghindari terjadinya penyimpangan dalam penulisan Tugas
Akhir ini, penulis membatasi masalah yang dibahas. Adapun batasan masalah yang
dibahas antara lain:
1. Website hanya akan memberikan layanan dalam pemesanan / pembelian sepatu.
2. Menggunakan bahasa pemrograman berbasis web.
3. Website memberi informasi sepatu agar lebih mudah dalam pembelian.
1.4 Tujuan Penelitian
Adapun tujuan pembuatan Website ini adalah untuk memudahkan konsumen dalam
pemelian sepatu tanpa harus meluangkan waktu yang banyak, ada pun pembuatan
Website ini menggunakan XAMPP dan Sublime Text yang mana, Diharapkan
konsumen dapat berelanja tanpa harus repot-repot keluar rumah.
1.5 Manfaat Penelitian

Adapun mamfaat dari aplikasi ini sebagai berikut:
1. Konsumen / pembeli dalam mendapatkan sepatu yang di inginkan tanpa mesti
menatangi tokohnya.
2. Mempercepat dan mempermudah dalam pembelian.
1.6 Tinjauan Pustaka
Aplikasi web adalah sebuah program yang bila dieksekusi akan menghasilkan sebuah
aplikasi yang dapat bekerja sesuai dengan yang diinginkan. Aplikasi web dibangun
dengan menggunakan bahasa HTML(Hypertext Markup Language). Pada masa kini

aplikasi web dikembangkan untuk memperluas kemampuan HTML dengan PHP dan
ASP pada skrip objek. Aplikasi web dapat dibagi menjadi dua bagian yaitu aplikasi
web dinamis dan aplikasi web statis.
Arsitektur aplikasi web meliputi klien, web server, middleware dan basis data.
Klien berinteraksi dengan web server. Secara internal, web server berkomunikasi
dengan middleware dan middleware yang berkomunikasi dengan basis data. Contoh
middleware adalah PHP dan ASP. Pada mekanisme aplikasi web dinamis, terjadi
tambahan proses yaitu server menerjemahkan kode PHP menjadi kode HTML. Kode
PHP yang diterjemahkan oleh mesin PHP yang akan diterima oleh klien.
PHP pertama kali dibuat oleh Rasmus Lerdroft, seorang programmer C. Semula
PHP digunakannya untuk menghitung jumlah pengunjung di dalam webnya. Kemudian
ia mengeluarkan Personal Home Page Tools versi 1.0 secara gratis. Versi ini pertama
kali keluar pada tahun 1995. Isinya adalah sekumpulan script PERL yang dibuatnya
untuk membuat halaman webnya menjadi dinamis. Kemudian mengeluarkan PHP versi
2.0 yang kemampuannya telah dapat mengakses database dan dapat terintegrasi dengan
HTML.Vesri mutahir dari PHP diluncurkan pada Juni 2004, oleh Zend merilis PHP
5.0. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Dalam versi
ini juga dikenalkan model pemrograman berorientasi objek baru untuk menjawab
perkembangan bahas pemrograman kearah pemrograman berorientasi objek. PHP
dapat digunakan pada setiap sistem operasi, antara lain Linux, Unix, Windows, dan
Macintosh. PHP juga mendukung banyak Web server, seperti Apache, Microsoft
Internet information Server (MIIS), Personal Web Server(PWS), dan masih banyak
lagi lainnya, bahkan PHP dapat bekerja sebagai suatu CGI processor.PHP tidak
terbatas pada hasil keluaran HTML.

1.7 Metodologi Penelitian
Untuk menyelesaikan tugas besar kuliah ini, penulis melakukan penerapan metode
penelitian dalam memperoleh data-data yang dibutuhkan sehingga penyusun tugas
besar kuliah ini dapat diselesaikan dengan baik. Adapun metode penelitian yang
penulis lakukan sebagai berikut:
1. Pengumpulan data pendukung
Pengumpulan data dalam penelitian penulis lakukan dengan mencari data-
data yang di buat di Website.
2. Membuat Rancangan website
Proses pembuatan ini meliputi pembuatan rancangan Website dan
memasukkan data.
3. Pengujian Website
Menguji apakah Website yang dibuat telah berhasil berjalan sesuai dengan
yang di iginkan.
4. Implementasi Website
Penerapan Website yang dirancang setelah melalui tahap pengujian dan telah
berjalan dengan baik.
5. Penyusunan dan pengadaan laporan
Tahap akhir dari penelitian yang dilakukan, yaitu membuat laporan tentang
Website yang telah dilakukan.
1.8 Sistematika Penulisan.
Agar dapat memberikan gambaran yang jelas pada penulisan tugas akhir ini, maka
penulis membaginya dalam beberapa bab sebagai berikut :
Bab 1 : Pendahuluan

Bab ini berisi tentang latar belakang masalah, identifikasi masalah, batasan masalah,
tujuan dan manfaat, metodologi penyelesaian, dan sistematika penulisan.
Bab 2 : Landasan Teori

Bab ini mengungkapkan tentang konsep dasar dan teori – teori yang mendukunang
pembahasan untuk tema penulisan yang didapatkan dari beberapa literatur
Bab 3 : Analisis dan Perancangan Sistem

Bab ini berisikan tentang perancangan Website serta masukan dan keluaran.
Bab 4 : Implementasi Sistem

Bab ini membahas analisa hasil dan pembahasan Website penjual sepatu online yang
dirancang. Pembuatan Website yang diajukan, tampilan dari Website dan pengujian
Website tersebut.
Bab 5 : Kesimpulan dan Saran

Bab ini berisi kesimpulan dan saran dari bab – bab yang ada dalam tugas akhir ini.

BAB 2
LANDASAN TEORI
2.1 Pengertian Komputer
Komputer (computer) berasal dari bahasa Latin computare yang berarti menghitung.
Komputer mempunyai arti yang sangat luas dan berbeda untuk orang yang berbeda.
Komputer adalah sistem elektronik untuk memanipulasi data yang cepat dan tepat serta
dirancang dan diorganisasikan supaya secara otomatis menerima dan menyimpan data
input, memprosesnya dan menghasilkan output dibawah pengawasan suatu langkah
langkah instruksi-instruksi program yang tersimpan di memori (stored program).
Bila dijabarkan, defenisi dari komputer adalah seperangkat peralatan elektronik

yang bekerja bersama – sama secara otomatis, menerima input, memproses data dan
menghasilkan data secara logis (output), cepat dan tepat berdasarkan perintah–perintah
yang diberikan oleh user dan komputer itu sendiri merupakan bagian dari sistem
komputerisasi.
Sistem komputer adalah suatu sistem yang terdiri atas komputer dan seluruh
komponen– komponen yang menunjang terlaksananya proses pengolahan data dan
menjadikan komputer sebagai alat yang berguna. Sistem komputer memiliki beberapa
komponen yaitu :
a. Perangkat Keras (Hardware)
Peragkat keras merupakan perangkat yang secara fisik dapat dilihat dan diraba, yang
membentuk kesatuan, sehingga dapat difungsikan. Berdasarkan kegunaannya,
perangkat keras dapat digolongkan ke dalam tiga bagian:

1. Alat input
Alat input adalah alat yang memiliki fungsi untuk memasukkan data ataupun program
yang akan diproses komputer, seperti keyboard, mouse, printer, scanner dan lainnya.
2. Alat Proses
Alat proses atau CPU (Central Prosesing Unit), merupakan alat atau unit terpenting
didalam sistem komputer. Fungsi utamanya adalah pusat pemprosesan data dan
mengiontrol keseluruhan sistem komputer selama pengolahan data berlangsung,
contohnya adalah prosessor.
3. Alat Output
Alat output adalah alat untuk menampilkan hasil pengolahan data yang dilakukan oleh
CPU, misalnya monitor dan printer.
b. Perangkat Lunak (Software)

Perangkat lunak adalah komponen komputer yang merupakan kumpulan program dan
prosedur yang memungkinkan perangkat keras komputer dapat menjalankan fungsinya
sebagai alat pengolahan data.Komponen ini tidak nyata secara fisik.Perangkat lunak
berfungsi sebagai perantara antara komputer dan user sehingga dapat digunakan.
c. Perangkat Komputer (Brainware)
Pengguna komputer adalah manusia yang menangani suatu sistem komputer atau orang
yang mampu menangani suatu sistem operasi komputer. Brainware dapat
dikelompokkan dalam beberapa bagian, yaitu :
1. Sistem Analisis
Orang bertugas untuk membentuk dan merancang fasilitas suatu sistem komputer yang
akan dibangun.
2. Programmer
Orang yang bertugas menerjemaahkan spesifikasi yang telah dirancang oleh sistem
analisis kedalam suatu bahasa program tertentu.
3. Komputer Operator
Orang yang bertugas menangani pengolahan data secara langsung.

4. Data Entry Operator
Orang yang bertugas melakukan pengurusan data yang akan diolah, mulai dari
pengumpulan data, perekaman data kedalam media penyimpanan hingga pemeriksaan
dan pengiriman informasi yang dihasilkan oleh komputer.
2.2 Sejarah Internet
Internet berawal dari diciptakannya teknologi jaringan komputer.Jaringan komputer

merupakan beberapa komputer yang terhubung satu sama lain dengan memakai kabel
dalam satu lokasi, misalnya satu kantor atau gedung. Jaringan komputer ini berfungsi
agar pengguna komputer bisa bertukar informasi dan data dengan komputer lainnya.
ARPAnet (US Defense Advanced Reseach Project Agency) atau departemen

pertahanan Amerika pada tahun 1969 membuat jaringan komputer yang tersebar untuk
menghindarkan terjadinya informasi terpusat, yang apabila perang dapat dengan
mudah dihancurkan. Jadi suatu bagian dari sambungan itu secara otomatis dipindahkan
kesambungan lainnya.
Setelah angkatan Amerika, dunia pendidikan pun merasa sangat perlu

mempelajari dan mengembangkan jaringan komputer.Salah satunya adalah University
of California at Los Angeles (UCLA). Akhirnya pada tahun 1970 internet banyak
digunakan Universitas di Amerika dan berkembang pesat saat ini. Agar pengguna
komputer dengan merek dan tipe berbeda dapat saling berhubungan, maka para ahli
membuat sebuah protocol (semacam bahasa) yang sama untuk dipakai di Internet.
Namanya TCP (Transmission Control Protokol) protokol pengendali transmisi dan IP
(Internet Protokol).

2.3 World Wide Web (WWW)
World Wide Web (WWW), lebih dikenal dengan web merupakan salah satu layanan
yang didapat oleh pemakai komputer yang terhubung dengan internet. Web pada
awalnya adalah ruang informasi dalam internet, dengan menggunakan teknologi
hypertext. Pemakai dituntut untuk menemukan informasi dengan mengikuti link yang
disediakan dalam dokumen web yang ditampilkan dalam browser web.
Kini internet identik dengan web, karena kepopuleran web sebagai standart
interface pada layanan yang ada pada internet, dari awalnya sebagai penyedia
informasi, kini digunakan juga untuk komunikasi dari email sampai dengan chatting,
sampai dengan melakukan transaksi bisnis (commerce).
Kini, web seakan lebih popular dari pada email, walaupun secara statisktik
email masih merupakan aplikasi terbanyak yang digunakan oleh pengguna
internet.Web lebih popular bagi khalayak umum dan pemula, terutama untuk tujuan
pencarian informasi dan melakukan komunikasi email yang menggunakan web
sebagai interfacenya.
Interface identik dengan web, karena popularitas sebagai penyedia informasi

dan interface yang digunakan oleh pengguna internet dari masalah informasi sampai
dengan komunikasi. Informasi produk dari yang serius sampai dengan yang sampah,
dari yang cuma–cuma sampai dengan yang komersial, semuanya ada.
Web memudahkan pengguna komputer untuk berinteraksi dengan pelaku

internet lainya dan menelusuri (informasi) di internet. Selain itu web telah diadopsi
oleh perusahaan sebagai bagian dari stategi teknologi informasi, karena beberapa
alasan:

a. Akses informasi yang mudah.
b. Setup server yang lebih mudah.
c. Informasi mudah didistribusikan.
d. Bebas platform : informasi dapat disajikan oleh web browser pada system mana
saja karena adanya standar dokumen berbagai tipe data dapat disajikan.
2.3.1 Lahirnya Web
Tahun 1989, Trimothy Berners-Lee seorang ahli komputer dari Inggris dan peneliti lain
di European Particle Physics Lab (Consei European Pour la Recherche Nucleaire,
atau CERN) di Geneva Swiss, mengembangkan satu cara untuk membagi data antar
koleganya menggunakan sesuatu yang di sebut dengan hypertext. Pemakai di CERN
dapat menampilkan dokumen pada layar komputer dengan menggunakan software
browser baru.
Kode-kode khusus disisipkan kedalam dokumen elektronik ini, memungkinkan

pemakai untuk meloncat dari satu dokumen ke dokumen lainnya pada layar dengan
hanya memilih sebuah hyperlink.
Kemampuan internet dimasukkan ke dalam browser ini sehingga lompat dari

satu dokumen ke dokumen lain, tidak lagi dari satu komputer saja, tetapi dapat
melompat kedokumen lain yang letaknya pada komputer remote. Seorang peneliti
dapat juga mengirimkan sebuah file dari komputer remote kesistem lokalnya, atau login
kedalam suatu sistem remote hanya dengan mengklik hyperlink. Tidak perlu melalui
mekanisme FTP atau Telnet. Jalan pintas CERN digunakan sebagai dasar dari yang
disebut World Wide Web atau berikut server dan browser webnya (sekarang
dimaintenence oleh World Wide Consortium).

2.3.2 Browser Web
Browser web adalah software yang digunakan untuk menampilkan informasi dari
server web.Software ini kini telah berkembang dengan menggunakan user interface
grafis, sehingga pemakai dapat dengan mudah memakai poin atau klik untuk pindah
antar dokumen.
Lynx adalah browser web yang masih menggunakan mode teks, yang akibatnya
adalah tidak ada gambar yang dapat ditampilkan. Lynx ini ada pada lingkungan DOS
(Disk Operation System). Akan tetapi pengembangan dari browser mode teks ini
adalah tidak secepat browser web dengan GUI (Grafic User Interface).
Disaat perkembangan WWW ada dua browser web yang paling populer yaitu
Internet Explorer (IE) dan Netscape Navigator. Namun saat ini bermunculan
browserweb lain yang turut meramaikan persaingan untuk merebut para pengguna
internet. Diantara browser web yang telah banyak digunakan pada saat peluncurannya
adalah MSN, Opera, dan Mozilla Firefox. Diantara web browser ini terdapat kelebihan
dan kekurangan sehingga pengguna dapat memilih sesuai dengan keinginan dan
kemudahan yang ditawarkan.
Cara Kerja Browser Mengambil Halaman
Suatu browser mengambil sebuah web page dari server dengan sebuah request. Sebuah
request adalah HTTP standar yang berisi sebuah page address. Sebuah page address
terlihat seperti berikut :http://www.google.com/search?q=%s.
Cara Kerja Browser Menampilkan Halaman

Seluruh webpage berisi instruksi-instruksi bagaimana untuk ditampilkan.Browser
menampilkan page dengan membaca instruksi-instruksi ini. Instruksi yang paling

umum untuk menampilkan disebut tag HTML. TagHTML contohnya, yaitu <p> ini
merupakan suatu paragraph </p>.
2.3.3 Server Web
Server web adalah komputer yang digunakan untuk menyimpan dokumen-dokumen

web, komputer ini akan melayani permintaann dokumen web dari kliennya. Browser
web seperti IE dan Opera berkomunkasi melalui jaringan (termasuk jaringan internet)
dengan server web, menggunkan HTTP.Browserakan mengirimkan request kepada
server untuk meminta dokumen tertentu atau layanan lain yang disediakan olehserver.
Server memberikan dokumen atau layanan jika tersedia juga dengan menggunakan
protokol HTTP.
2.3.4 Istilah-istilah Umum Yang Harus Diketahui
Berikut beberapa istilah umum yang harus diketahui antara lain :

a. Protokol: Secara defenisi adalah standart pemprosesan informasi yang diterima
secara umum. Protokol TCP / IP merupakan protokol komunikasi yang
digunakan dalam internet.
b. HTTP (Hyper Transfer Protokol): HTTP pada umumnya digunakan untuk
melayani dokumen hypertext, karena HTTP adalah protokol dengan overhead
yang sangat rendah, sehingga pada kenyataan navigasi informasi dapat
ditambah langsung ke dalam dokumen. Dengan demikian protokolnya sendiri
tidak harus mendukung navigasi secara penuh.
c. Browsing / Surfing: Kegiatan menelusuri dan mencari informasi dalam internet
melalui layanan informasi web.

d. URL (Universal resource Locator): adalah konsep nama file standar yang
diperluas dengan jaringannya. Nama file ini tidak hanya menunjukkan direktori
dan nama filenya, tetapi juga nama mesinnya dalam jaringan. URL dapat
disediakan dengan berbagai metode, dan bisa jadi bukan sekedar file, karena
URL dapat menunjukkan query-query, dokumen yang disimpan dalam
database.
2.4 HTML (Hypertext Markup Language)
2.4.1 Dokumen HTML
Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks
sembarang. Dokumen ini dikenal sebagai webpage. Dokumen HTML merupakan
dokumen yang disajikan dalam browser web surfer. Dokumen umumnya berisi
informasi atau interface aplikasi didalam internet.
Ada dua cara untuk membuat web page: dengan web editor (misalnya
macromedia Dreamweaver atau Microsoft Frontpage) atau teks editor biasa misalnya
notepad atau editplus.
2.4.2 Penamaan Dokumen HTML
Penamaan dokumen HTML yang menggunakan tiga karakter awalnya adalah untuk
mengakomodasikan sistem penamaan yang ada pada sistem operasi DOS. Nama
dokumen pada beberapa sistem operasi bersifat case sensitive (membedakan huruf
besar dan kecil). Nama dokumen yang sama tapi dituliskan dalam case yang berbeda
akan dianggap sebagai document yang berbeda, misalnya „dokumen.html’ berbeda

dengan „DOKUMEN.html’.Kasus case sensitiveakan dijumpai pada dokumen web
yang dihosting didalam server yang berbasis *.nix (keluarga sistem operasi UNIX).
2.4.3 Elemen dan Tag HTML
Dokumen HTML disusun oleh elemen-elemen. Elemen merupakan istilah bagi

komponen-komponen dasar pembentuk dokumen HTML untuk menandai berbagai
elemen dalam suatu dokumen HTML, digunakan Tag. Tag HTML terdiri dari sebuah
kurung sudut kiri (<, tanda lebih kecil), sebuah nama tag, dan sebuah kurung sudut
kanan (>, tanda lebih besar). Tag umumnya berpasangan (misalnya, <H1> dengan
</H1>), atau yang menjadi pasangan selalu diawali dengan karakter garis miring. Tag
yang menunjukkan tag awal yang berarti awal elemen, dan yang kedua menunjukkan
tag akhir, berarti akhir elemen.
Nama elemen ditunjukkan dengan nama tagnya. Suatu elemen didalam

dokumen HTML harus ditandai dengan tagnya yang berpasangan. Ada beberapa
elemen yang tidak mengharuskan tagnya ditulis secara berpasangan, elemen tersebut
diantarnya adalah:
a. Paragraf dengan tag <p>.
b. Ganti garis – break line dengan tag<br>.
c. Ganti datar – horizontal rule dengan tag <hr>.
d. List item dengan tag<Li>.
Secara umum elemen dalam dokumen HTML yang dinyatakan dengan tagnya,
dituliskan:<namatag>_</nametag> penulisan penamaan tag bebas, dapat
menggunakan huruf besar, huruf kecil, ataupun campuran (tidak case sensitive). Tetapi
untuk antisipasi pada standar penulisan tag, direkomendasikan untuk menuliskan tag
dengan menggunakan huruf kecil semuanya. Tag mark up sebenarnya memberi tahu

browser bagaimana memberlakukan atau menampilkan (memformat) halaman
dokumen tersebut dalam browser.
Dalam membuat dokumen HTML dibutuhkan elemen yang dinyatakan dengan
tag<html>, <head> dan <body>berikut tag-tag pasangannya. Setiap dokumen terdiri
atas tag head dan body. Elemen head berisi tentang informasi dokumen tersebut, dan
elemen body berisi teks yang sebenarnya yang tersusun dari link, grafik, paragraf dan
elemen lainnya.
Secara umum dokumen dibagi menjadi dua section (bagian), yaitu section head
dan section body, sehingga setiap dokumen HTML harus mempunyai pola dasar
sebagai berikut:
<html>
<head>
…informasi tentang dokumen HTML
</head>
<body>
…informasi yang ditampilkan oleh browser web
</body>
</html>
Setiap dokumen HTML harus diawali tag<html> dan tag</html> diakhir

dokumen. Tag ini menandai elemen HTML, yang berarti dokumen ini adalah dokumen
HTML.
Dalam suatu dokumen hanya ada satu dokumen HTML, section atau elemen
head ditandai dengan tag<head> diawal, dan tag</head> diakhir.Section ini berisi
informasi tentang dokumen HTML lainnya. Minimal informasi yang dituliskan dalam
elemen ini adalah judul dari elemen, judul ini akan ditampilkan pada captionBr dari
windows browser, ditandai dengan menggunakan tag<title>dan diakhiri dengan
</title>.

Section atau elemen body ditandai dengan tag<body> diawal, dan tag </body>
diakhir.Section body merupakan elemen terbesar didalam dokumen HTML. Elemen ini
berisi dokumen yang akan ditampilkan pada browser, meliputi paragraf grafik, link,
tabel, dan sebagainya. Contoh dokumen HTML sebagai berikut :
<!-contoh.html->
<html>
<head>
<title> Halaman contoh </title>
</head>
<body>
File ini merupakan file contoh.<br> <b>ini untuk membuat huruf cetak tebal</b>
</body></html>
Hasil dokumen HTML yang ditampilkan di browser Internet Explorer adalah :
Gambar 2.1 Dokumen HTML ditampilkan dibrowser Internet Explorer

2.5 PHP (Hypertext Preprocessor)
2.5.1 SejarahPHP
PHP merupakan salah satu bahasa pemrograman web yang masih muda namun telah
mengalami perkembangan yang cukup signifikan dan telah banyak digunakan oleh
user dalam membuat sebuah aplikasi web yang baik baik perseorangan maupun
perusahaan.
2.5.2 PHP / FI (Personal Home Page / Form Interpreter)
PHP pertama sekali dibuat oleh Rasmus Lerdorf pada tahun 1995.Pada awal itu PHP
bernama FI (Form Interpreted). Pada saat tersebut PHP adalah sekumpulan script yang
di gunakan untuk mengolah data form dari web.
Perkembangan selanjutnya adalah Rasmus melepaskan kode sumbernya

tersebut dan menamakannya PHP/FI. Pada saat tersebut itu juga singkatan PHP/FI
adalah Personal Home Page / Form Interpreter. Dengan pelepasan kode sumber ini
menjadi open source, maka banyak programmer yang tertarik untuk mengembangkan
PHP
.
Pada November 1997, dirilis PHP/FI 2.0.Pada rilisan ini interpreter sudah
diimplementasikan dalam C. Dalam rilisan ini disertakan juga modul-modul ekstensi
yang meningkatkan kemampuan PHP/FI secara signifikan.Pada tahun ini juga sebuah
perusahan yang bernama Zend, menulis ulang interpreter PHP menjadi lebih bersih,
lebih baik dan lebih cepat. Kemudian pada tahun 1998 perusahaan tersebut merilis
interpreter baru untuk PHP dan meresmikan nama rilisan itu menjadi PHP 3.0.
Pada tahun 1999, Zend merilis interpreterPHP baru dan rilisan tersebut dikenal
dengan PHP 4.0 adalah versi PHP yang paling banyak dipakai. Versi ini banyak

dipakai sebab versi ini mampu membangun aplikasi web kompleks tetapi tetap
memiliki kecepatan proses dan stabilitas yang tinggi.
Pada Juni 2004, Zend merilis PHP 5.0.PHP versi 5 muncul untuk menangani
kelemahan - kelemahan yang terdapat pada versi sebelumnya. Versi ini adalah versi
mutahir dari PHP. Dalam versi ini, inti dari interpreter PHP mengalami perubahan
besar. Dalam versi ini juga dikenal model pemrograman berorientasi objek baru untuk
menjawab perkembangan bahasa pemrograman kearah pemrograman berorientasi
objek.
2.5.3 Kelebihan PHP Dari Bahasa Pemrograman Lain
1. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan
sebuah kompilasi dalam penggunaanya.
2. Web server yang mendukung PHP dapat ditemukan dimana-mana dari mulai
IIS sampai dengan apache, dengan kompilasi yang ralatif mudah.
3. Dalam sisi pengembangan relative mudah, karena banyak developer yang siap
membantu dalam pengembangan.
4. PHP adalah bahasa open source yang dapat digunakan diberbagai mesin (linux,
unix, windows) dan dapat dijalankan secara runtime melalui console serta juga dapat
menjalankan perintah-perintah sistem.
5. Dalam sisi pemahaman, PHP adalah bahasa scripting yang paling mudah
karena referensi yang banyak.
2.5.4 Script PHP
Script PHP berkedudukan sebagai tag dalam bahasa HTML. Suatu script akan dikenali
sebagai script PHP bila didapati tanda :
a. <?php…...............?>

b. <?........................ ?>
c. <script language=”php”>…</script>
Script yang dibuat oleh php disimpan dengan nama file dan diketahui dengan ekstensi
*.php. Misalnya„contoh.php’. Bila scriptphp diakses melalui komputer lokal maka file
PHP di folder htdocs di web server. ScriptPHP dapat disisipkan dibagian manapun
dalam dokumen HTML, begitu pula sebaliknya scriptHTML dapat diletakkan diantara
script PHP.
Berikut contoh dari scriptPHP :
1. Contoh1.php
<html>
<head>
<title> Test</title>
</head>
<body> Tanggal :
<?
/*mencetak tanggaldenganperintah echo*/ echo date
(“dFY”);echo”<br>”;
/*mencetak tanggal dengan perintah print*/
</body>
</html>
2.5.5 Integrasi dengan Database
PHP yang digabungkan dengan database akan lebih berkekuatan jika digabungkan
dengan database yang realibel, gratis dan mudah diinstalasi. Terdapat 2 jenis database
yang memenuhi yaitu MYSQL dan PostgreSQL. Berikut ini daftar database:
Tabel 2.1 Daftar Database yang didukung PHP

No Nama Database No Nama Database

1 Adadase D 12 ODBC
2 Dbase 13 Oracle
3 Empress 14 Ovrimos
4 FilePro (Ready only) 15 PostegreSQL
5 Hyperwave 16 SQLite
6 IBM DB2 17 Sybase
7 Informix 18 Solid
8 Ingres 19 Frontbase
9 INterbase 20 MSQL
10 Direct MS-SQL 21 Velocis
11 MySQL 22 Unix dbm
PHP mempunyai fungsi khusus untuk mengakses MySQL.Ada sekitar 48 fungsi yang
dapat didukung PHP dalam mengakses MySQL dalam membuat aplikasi. Adapun yang
biasa digunakan diantaranya:
a. Mysql_connect()
Fungsi mysql_connect adalah untuk menghubungkan PHP dengan database MySQL.
Formatnya adalah :
Mysql_connect (string hostname,string username, string password)
b. Mysql_select db
Setelah terhubung ke databaseMYSQL dengan menggunakan mysql_connect, langkah
selanjutnya adalah mmilih database yang akan digunakan. Fungsi mysql_select_db
digunakan untuk memilih database. Format fungsinya adalah: mysql_select_db (string
database, koneksi).
Koneksi adalah variable yang terhubung ke MySQL.Jika tidak mengisi variable
koneksi yang terbuka saat itulah yang dianggap digunakan. Manfaat berbagai macam

koneksi adalah bahwa dengan pilihan seperti itu maka dalam suatu file dimungkinkan
mengambil query dari 2 database sekaligus.
c. Mysql_query
Dalam database MySQL, perintah untuk melakukan transaksi adalah perintah
SQL.Sebutan untuk mengirim perintah SQL dinamakan query. Querymemberikan
perintah kepada database untuk melakukan apa yang dikehendaki. Format fungsinya
adalah :
Int mysql_query (string query, int [link_identifier]);
d. Mysql_num_row
Kegunaan dari fungsi ini adalah untuk menghitung jumlah baris yang dikenal oleh
proses SQL. Format fungsinya adalah:
Int mysql_num_row)int result);
e. Mysql_fetch_array
Fungsi ini berkaitan dengan menampilkan data.Untuk menampilkan data, digunakan
fungsi mysql_fetch_array.Dengan fungsi ini, hasil query ditampung dalam bentuk
array. Format fungsinya adalah : array mysql_fetch_array(I nt result, int[result_type]);
2.6 MySQL
MySQL merupakan salah satu perangkat lunak sistem pengelola basis data (database
management system). MySQL juga dapat dikategorikan sebagai relation Database
Management Sistem (RDBMS). Karena dalam pembuatan basis data pada
MySQL dapat dipilah-pilah dalam berbagai tabel dua dimensi. Setiap tabel pada
MySQL terdiri atas lajur horizontal dan lajur vertikal.

MySQL pada saat ini, banyak digunakan oleh pemrogram web untuk
membangun situs yang memerlukan basis data sebagai data dan pengolahan data.
Untuk keperluan mnampung data di server, kita perlu sebuah database. MySQL
merupakan sebuah program aplikasi untuk membuat database yang umum digunakan
pada wwb server.MySQL bayak digunakan karena kemampuannya dalam menampung
data yang cukup besar dan proses loading yang cepat dalam memanggil data.
2.7 Sublime Text 3
Dalam membuat situs web diperlukan suatu editor. Salah satu contoh editor yang
sangat sederhana adalah notepad. Sublime Text merupakan editor HTML yang
professional mendesain, menulis kode program dan mengembangkan website, halaman
web, dan aplikasi web. Dalam pengerjaanya dreamweaver memberikan tiga pilihan
yaitu bekerja dengan menulis kode program (Menu Code), dengan pengeditan secara
visual (Mode Design) dan dengan tampilan keduanya (Split Mode). Dreamweaver juga
menyediakan alat-alat bantu untuk mengembangkan kreatifitas pembuatan web.
Berikut ini tampilan aplikasi Editor Sublime Text adalah:
Gambar 2.2 Tampilan Editor Sublime Text

2.8 Xampp
Xampp adalah perangkat yang menggabungkan tiga aplikasi kedalam satu paket, yaitu
Apache, MySQL, dan PHPMyAdmin. Dengan xampp pekerjaan anda akan sangat
dimudahkan karena dapat menginstalasi dan mengkonfigurasi ketiga aplikasi tersebut
dengan sekaligus dan otomatis.
Xampp telah mengalami perkembangan dari waktu ke waktu. Versi versi yang
terbaru adalah revisi dari yang terdaulu, sehingga lebih baik dan lebih lengkap. Aplikasi
utama dalam paket xampp yakni terdiri dari :
1. Apache
Sebuah web server open source, jadi semua orang dapat
menggunakannya secara gratis , bahkan anda bahkan bisa mengedit
kode programnya. Fungsi utama dari Apache yakni menghasilan
halaman web yang benar sesuai dengan yang dibuat oleh seorang
progammer, dengan menggunakan kode PHP.
2. PHP
Php adalah bahasa pemograman untuk membuat web, dengan PHP anda
dapat membuat halamn web yang dinamis . selain mendukung di sistem
operasi Windows , php juga dapat digunakan pada mac OS, Linux, dan
sistem operasi lainnya.
3. MySQL
Sistem manejemen database yang sering digunakan bersama PHP. PHP
juga mendukung pada Microsoft Acces , Database Oracle, D-base, dan
sistem manajemen database lainnya.

Gambar 2.3 Tampilan Xampp

BAB 3
ANALISIS DAN PERANCANGAN SISTEM
3.1. Analisis Sistem
Untuk memulai membangun suatu website yang berupa aplikasi mengenai penjualan
sepatu online, penulis terlebih dahulu merencanakan alur kerja berdasarkan kebutuhan
dari user yang akan menggunakan aplikasi berbasi web yang akan dibuat.
Website ini dibuat atas kebuthan costumer khususnya yang bertempat tinggal
dari Rumah Sepatu maupun yang berdomisili di luar kota. Berdasarkan dari penamatan
penulis mengenai analisi sistem yang berjalan mengenai Website Penjualan Sepatu
Online Berbasis Xampp terjadinya kesulitan costumer dalam membeli prduk dari
Rumah sepatu, di karenakan tempat tinggal yang jauh ataupun berbagai kesibukan yang
tidak bisa di tinggalkan.
Oleh karena itu, penulis mencoba merancang sebuah website yang ditujukan
bagi pelanggan Rumah Sepatu yang sibuk agar dapat mengefisienkan waktunya,dan
juga untuk costumer yang berdomisili jauh atau di luar kota dapat tetap membeli
produk Rumah Sepatu, sehingga tidak harus langsung datang ke alamat Rumah Sepatu.
Selain itu, tentu saja untuk memperluas pemasaran produk, sehingga pelanggan Rumah
Sepatu dapat bertambah.
3.2. Perancangan Sistem
Seiring dengan perkembangan teknologi informasi saat ini, serta untuk meningkatkan
efesiensi kerja dan waktu, maka masih banyak sistem yang ada saat ini yang masih

manual dan harus diganti dengan sistem yang lebih baik lagi. Hal ini dilakukan dengan
cara membangun sistem yang terkomputerisasi atau online. Untuk memulai
membangun suatu program mengenai perancangan website, maka penulis terlebih
dahulu merencanakan alur kerja berdasarkan kebutuhan dari user yang akan
menggunakan aplikasi basis data ini.
3.3 Data Flow Diagram (DFD)
Data Flow Diagram (DFD) merupakan model dari sistem untuk menggambarkan
pembagian sistem ke modul yang lebih kecil. Salah satu keuntungan menggunakan
diagram alir data adalah memudahkan pemakai yang kurang menguasai bidang
komputer untuk mengerti sistem yang akan dikerjakan. Pada tahap analisa, penanganan
notasi simbol lingkaran dan anak panah menggambarkan arus data dalam perancangan
sistem sangat membantu dalam komunikasi dengan pemakaian sistem menggunakan
notasi – notasi untuk menggambarkan arus dari data sistem.
Disamping itu DFD adalah salah satu alat pembuatan model yang sering
digunakan, khususnya bila fungsi – fungsi sistem merupakan bagian yang lebih penting
dan kompleks dari pada data yang dimanipulasi oleh sistem. Dengan kata lain, DFD
adalah alat pembuatan model yang memberikan penekanan hanya pada fungsi sistem.
DFD juga merupakan alat perancangan sistem yang berorientasi pada alur data
dengan konsep dekomposisi dapat digunakan untuk penggambaran analisa maupun
rancangan sistem yang mudah dikomunikasikan oleh profesional sistem kepada
pemakai maupun pembuat program.

Tabel 3.1. Simbol-simbol Data Flow Diagram
No. Simbol Fungsi
1. Eksternal Entity merupakan kesatuan di luar

lingkungan system yang dapat berupa seseorang,
organisasi yang dapat mengirimkan data atau
menerima data dari sistem.
2. Arus data merupakan tempat mengalirnya

informasi menunjukan arus data berupa sistem.
3. Proses merupakan pengolahan data atau aliran

data masuk menjadi data aliran keluar.
4. Penyimpanan data merupakan tempat

penyimpanan data yang ada di dalam sistem.
3.4. Perancangan Database
Tahap ini merupakan dimana penulis menempatkan data yang sudah ada pada bagian
server. Data tersebut nantinya akan di proses oleh data yang sudah dibuat. Tempat
untuk menampung data tersebut disebut database , database terdiri atas tabel –tabel
yang dibuat menggunakan program Xampp.

Adapun database yang penulis buat yaitu database web yang terdiri dari 8
(delapan ) tabel, yaitu :
1. Tabel Admins
Tabel 3.2 Tabel Admin

Field Name Type Size Description
Username Varchar 50 Nama
Password Varchar 50 Password
Nama_lengkap Varchar 100 Nama
Email Varchar 100 Email
No_telpon Varchar 20 Nomor
Level Varvhar 20 Level
Blokir Enum 20 Blokir
2. Tabel Hubungi
Tabel 3.3 Tabel Hubungi

Id_hubungi Int 5 Id
Id_kostumer Int 5 Id
Subjek Varchar 100 Subjek
Pesan Text Pesan

Tanggal Date Tanggal
3. Tabel Kategori
Tabel 3.4 Tabel Kategori

Id_kategori Int 5 Id
Nama_kategori Varchar 100 Nama
4. Tabel Kota
Tabel 3.5 Tabel Kota

Id_kota Int 3 Id
Nama_kota Varchar 100 Nama
Ongkos Int 10 Nomor
5. Tabel Costumer
Tabel 3.6 Tabel Costumer

Id_costumer Int 5 Id
Password Varchar 50 Nomor

Nama_lengkap Varchar 100 Nama
Alamat Text 100 Alamat
Email Varchar 100 Email
Telpon Varchar 20 Nomor
Id_kota Int 5 Id
6. Tabel Modul
Tabel 3.7 Tabel Modul

Id_modul Int 5 Id
Static_content Text
Gambar Varchar 100 Gambar
7. Tabel Order
Tabel 3.8 Tabel Order

Id_order Int 5 Id
Status_order Varchar 50 Lunas/belom
Tgl_order Date
Jumlah_order Time
Id_kostumer Int 5 Id
8. Tabel Produk

Tabel 3.9 Tabel Produk
Id_produk Int 5 Id
Id_kategori Int 5 Id
Nama_produk Varchar 100 Nama
Dekripsi Text
Harga Int 20 Nomor
Stok Int 5 Jumlah
Berat Decimal (5,2) Berat
Tgl_masuk Date Tanggal
Gambar Varchar 100 Gambar
Dibeli Int 5 Banyak
Diskon Int 5 Angka
3.5. Flowchart
Flowchart adalah sekumpulan simbol – simbol yang menunjukan atau bidang yang
menggambarkan rangkaian kegiatan – kegitan program dari awal hingga akhir. Jadi
flowchart juga dapat digunakan untuk menggambarkan urutan langkah – langkah
pekerjaan dalam suatu algoritma. Penjelasan arti dari lambang – lambing flowchart
dapat didefinisikan seperti tabel dibawah ini :
Tabel 3.10 Arti lambang – lambang Flowchart
No SIMBOL KETERANGAN
Terminal, untuk memulai atau mengakhiri

1
suatu program

Proses, simbol ini menunjukkan setiap
2
pengolahan yang dilakukan oleh komputer.
Input-Output, untuk memasukkan data atau
3
menunjukkan hasil keluaran dari suatu proses
Decision, suatu kondisi yang menghasilkan
3
beberapa kemungkinan jawaban atau pilihan.
Untuk menyatakan sekumpulan langkah
5 proses yang ditulis sebagai procedur
Connector, suatu prosedur akan masuk atau

6 keluar melalui simbol ini dalam lembaran
yang sama.
Off-Line Connector, simbol masuk atau
7 keluarnya suatu prosedur pada lembaran
kertas lainnya.
Arus/Flow dari prosedur yang dapat
8 dilakukan dari atas kebawah, kiri kekanan
atau sebaliknya.
Document, merupakan simbol dari data yang
9
berbentuk kertas maupun informasi
Database, menyediakan tempat pengolahan
10
data serta penyimpanan dalam storage.
Simbol untuk output, yang ditujukan kesuatu
11
device ,seperti primer,plotters,dll

3.5.1. Flowchart Menu Utama
Flowchart menu utama dapat dilihat pada gambar dibawah ini :
Gambar 3.1. Alur Flowchart Menu Utama

3.5.2. Flowchart Login Admin
Flowchart login admin dapat dilihat pada gambar dibawah ini :
Gambar 3.2 Alur Flowchart Login Admin

3.6. Perancangan Algoritma
Algoritma merupakan suatu cara menganalisa (menjelaskan) urutan dan hubungan

kegiatan – kegiatan yang dilakukan untuk memecahkan suatu permasalahan sehingga
tercapai tujuan yang diinginkan.
Algoritma Beranda
Langkah I : Pilih menu Beranda.
Langkah II : Menampilkan halaman utama website.

BAB 4
IMPLEMENTASI SISTEM
4.1 Pengertian Implementasi Sistem
Implementasi sistem adalah suatu prosedur yang dilakukan untuk menyelesaikan

sistem yang ada dalam dokumen rancangan sistem yang telah disetujui dan telah
diuji,menginstal dan memulai menggunakan sistem baru yang diperbaiki.
Adapun langkah-langkah yang yang dibutuhkan dalam implementasi sistem

adalah :
1. Menyelesaikan desain sistem yang telah disetujui sebelumnya.
2. Memastikan bahwa pemakai (user) dapat mengoperasikan sistem baru.
3. Menulis, menguji, mengontrol dan mendokumentasikan website.
4. Memastikan bahwa konversi ke sistem baru berjalan yaitu dengan membuat
rencana, megontrol dan melakukan instalasi baru secara benar.
4.2 Tujuan Implementasi Sistem
Adapun tujuan dari implementasi sistem adalah sebagai berikut:

1. Mengkaji rangkaian sistem baik dari segi software maupun hardware sebagai
sarana pengolahan data dan penyajian informasi.
2. Menyelesaikan rancangan sistem yang ada didalam dokumen sistem yang baru
atau yang telah disetujui.
3. Memastikan bahwa pengunjung dapat mengoperasikan dengan mudah terhadap
sistem yang baru dan mendapat informasi yang baik dan jelas.

4. Memastikan bahwa sistem yang telah berjalan dengan lancar dengan
mengontrol dan melakukan instalasi secara benar.
4.3 Komponen Utama dalam Implementasi Sistem
Agar sistem perancangan yang telah kita kerjaka dapat bejalan dengan baik atau tidak,
maka kita perlu kiranya dilakukan pengujian terhadap sistem yang telah kita kerjakan.
Untuk itu dibutuhkan bebarapa komponen utama mencakup perangkat keras
(hardware), perangkat lunak (Software), dan pengguna (Brainware).
4.3.1 Perangkat Keras (Hardware)
Hardware merupakan komponen yang terlihat secara fisik,yang saling bekarja sama
dalam pengelolahan data. Perangkat keras (hardware) yang digunakan meliputi :
1. Monitor
2. CPU
3. Harddisk sebagai tempat sistem beroperasi dan media penyimpanan
4. Memori minimal 128
5. Keyboard dan mouse
4.3.2 Perangkat Lunak (Software)
Software adalah instruksi atau program-program komputer yang dapat digunakan oleh
komputer dengan memberikan fungsi serta penampilan yan diinginkan. Dalam hal ini,
perangkat lunak yang digunakan penulis untuk aplikasi perancangan website adalah :
1. Sitem Operasi Windows 10

2. XAMPP

3. Sublime Text
4. Browser sebagai tempat media tampilan halaman website. Seperti : Mozilla.
4.3.3 Unsur Manusia (Brainware)
Brainware merupakan faktor manusia yang menanganin fasilitas komputer yang ada.
Faktor manusia yang dimaksud adalah orang-orang yang memiliki bagian untuk
menangani sistem dan merupakan unsur manusia yang meliputi:
1. Analisi sistem, yaitu orang yang membentuk dan membangun fasilitas

rancangan sistem atau program.
2. Programmer, yaitu orang yang mengerti bahasa pemograman yang
digunakan dalam membuat dan membangun suatu program.
3. Operator (Administrator), yaitu orang yang mengoperasikan sistem seperti
memasukan data untuk dioperasikan oleh komputer dalam menghasilkan
informasi dan lain sebagainya.
4. Public (Pengguna), yaitu orang yang memakai sistem yang telah di rancang
untuk mendapatkan informasi yang dibutuhkan.
4.4 Instalasi Xampp 1.7.1
Xampp meberikan paket-paket yang cukup lengkap, diantaranya :

1. Apache HTTPD 2.2.11 + Openssl 0.9.8i
2. MySQL 5.1.33
3. PHP 5.2.9
4. PhpMyAdmin 3.1.3.1
5. XAMPP CLI Bundle 1.3
6. FileZilla FTP Server 0.9.31
7. Mercury Mail. Transport System 4.62

Dengan menginstal Xampp secara otomatis ketiga software utama yang akan
digunakan yaitu Apache, PHP, dan MySQL telah dapat digunakan tanpa perlu
konfigurasi yang rumit.
4.5 Hasil Perancangan Program
Pada website Rumah Sepatu ini memiliki banyak halaman. Tiap halaman utama
masing-masing memilki link yang tiap isi halaman web-nya menunjukkan setiap
informasi yang berbeda-beda. Untuk pengetesan pada tool browser, ketikkan pada
address bar http://localhost untuk melihat tampilan Apache web server pada browser.
Untuk pengujian halaman website Rumah Sepatu sendiri ketikkan pada address bar
browsing seperti berikut : http://localhost/fribel . Penulisan fribel setelah localhost
menunjukkan folder tempat penyimpanan file-file website Rumah Sepatu .Dibawah ini
contoh halam utama pada Rumah Sepatu.
Gambar 4.1 Halaman Utama Website

Pada gambar 4.1 dapat dilihat halam utama website yang berisi ajakn untuk
berbelanja pada Rumah Sepatu, disertai beberrapa gambaran produk sepatu yang dijual
pada Rumah Sepatu yang mewakili masing-masing kategori, seperti casual, sandal,
sepatu anak-anak, sepatu futsal/bola, sepatu pria, sepatu sport, dan sepatu wanita.
Gambar 4.2 Profil Website Rumah Sepatu
Pada gambar 4.2 dapat dilihat mengenai profil Rumah Sepatu, di halaman ini
dijelaskan apa saja yg di jual di website Rumah Sepatu , serta di halaman ini juga di
berikan alamat asli website Rumah Sepatu di berikan. Agar jika ada pembeli yang ingin
langsung datang ke Toko Rumah Sepatu dapat mengetahui alamat aslinya.

Gambar 4.3 Cara Pembelian Sepatu
Pada gambar 4.3 dijelaskan tentang bagaimana caranya untuk membeli sepatu
di wesite Rumah Sepatu.
Gambar 4.4 Pemesanan Barang

Pada gambar 4.4 dijelaskan bagaimana cara untuk memesan sepatu pada
website Rumah Sepatu.
Gambar 4.5 Form Register
Pada gambar 4.5 di jelaskan bahwa untuk melakukan pembelian online di

website Rumah Sepatu harus mempuyai akun yang terdaftar agar dapat berbelaja pada
Toko Rumah Sepatu.

Gambar 4.6 Form Login
Setelah pembeli mendaftarkan akunya, maka pembeli telah dapat login di

website Rumah Sepatu.
Gambar 4.7 Proses Pembayaran

Setelah pembeli selesai berbelanja , maka pembeli mesti membayar sepatu yang
telah di beli melalui transfer rekening pemilik website Rumah Sepatu. Jika pembeli
tidak melakukan pembayaran, maka sepatu yang telah di beli tidak akan di kirim/proses
karena tidak teraftar di daftar pembeli.

BAB 5
KESIMPULAN DAN SARAN
5.1 Kesimpulan
Adapun kesimpulan yang dapat diambil oleh penulis dalam pembuatan website Rumah
Sepatu ini Adalah :
1. Situs ini menyediakan layanan pemesanan produk melalui sistem online, hanya
dengan memilih produk dan memasukkanya kedalam keranjang belanja (shopping
cart ), dan melakukan pembayaran ke nomor rekening yang telah diberitahu, maka
produk akan langsung dikirim ke alamat costumer. Hal ini tentu saja mempermudah
costumer yang berdomisili jauh dari Toko Rumah Sepatu maupun yang berada di luar
kota, serta bagi pengunjung website yang merasa tertarik untuk membeli produk
melalui sistem online yang lebih mudah dan efisien, tetapi terjamin.
2. Memberikan informasi secara lengkap, seperti tampilan produk dan harga.
Sehingga costumer bisa mendapatkan informasi yang up to date hanya dengan
membuka website Toko Rumah Sepatu.
5.2 Saran
Adapun kesimpulan yang dapat penulis berikan dalam Tugas Akhir yang berjudul
Website Penjualan Sepatu Online Berbasis Xampp ini adalah :
1. Tampilan website dibuat semenarik mungkin , sehingga dapat meningkatkan

keingintahuan pengunjung website yang belum mengetahui tentang Toko Rumah
Sepatu.
2. Kiranya website ini dapat digunakan secara optimal agar hasil yang diharapkan
dapat terwujud.

DAFTAR PUSTAKA
Arbie, 2004. Manajemen Database dengan MySQL, Jilid 1 Yogyakarta : Andi

Yogyakarta.
http://khaerulaffandi.weebly.com/mengenal-apa-itu-xamppapachephp-dan-
mysql.html
Kadir, A, 2002. Penuntun Praktis Belajar SQL. Yogyakarta : Andi Yogyakarta.
Mcleod, Raymond.2004. “Sistem Informasi Manajement”, Jakarta:PT Indeks.
Sidik , B, 2004. Pemograman Web dengan PHP. Jilid I Bandung Informatika

Bandung.

Listing Program
Aksi.php
<?php
session_start();
if (empty($_SESSION['username']) AND empty($_SESSION['passuser'])){
echo "<link href='style.css' rel='stylesheet' type='text/css'>
<center>Untuk mengakses modul, Anda harus login <br>";
echo "<a href=../../index.php><b>LOGIN</b></a></center>";
<body>
hjggjkjf
</body>
</html>

Cek_login.php
<?php
include "../config/koneksi.php";
function antiinjection($data){
$filter_sql =
mysql_real_escape_string(stripslashes(strip_tags(htmlspecialchars($d
ata,ENT_Q
UOTES))));
return $filter_sql;
$username = antiinjection($_POST['username']);
$pass = antiinjection($_POST['password']);
$login=mysql_query("SELECT * FROM admins WHERE username='$username'
AND password='$pass'");
$ketemu=mysql_num_rows($login);

$r=mysql_fetch_array($login);
// Apabila username dan password ditemukan
if ($ketemu > 0){
session_start();
$_SESSION['namauser'] = $r['username'];
$_SESSION['namalengkap'] = $r['nama_lengkap'];
$_SESSION['passuser'] = $r['password'];
$_SESSION['leveluser'] = $r['level'];
header('location:media.php?module=home');
else{
echo "<link href=../config/adminstyle.css rel=stylesheet

type=text/css>";
echo "<center>LOGIN GAGAL! <br>
Username atau Password Anda tidak benar.<br>
Atau account Anda sedang diblokir.<br>";
echo "<a href=index.php><b>ULANGI LAGI</b></a></center>";
?>
Content.php

<?php
include "../config/koneksi.php";
include "../config/library.php";
include "../config/fungsi_indotgl.php";
include "../config/fungsi_combobox.php";
include "../config/fungsi_rupiah.php";
// Bagian Home
if ($_GET[module]=='home'){
if
($_SESSION['leveluser']=='admin'){ech
o "<h2>Selamat Datang</h2>
<p>Hai <b>$_SESSION[namalengkap]</b>, selamat datang di

halaman Administrator.<br> Silahkan klik menu pilihan yang berada
di sebelah kiri untuk mengelola content website. </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p>
</p><p> </p><p> </p>
<p align=right>Login : $hari_ini, ";
echo tgl_indo(date("Y m d"));
echo " | ";
echo date("H:i:s");
echo " WIB</p>";
// Bagian Modul
elseif ($_GET[module]=='modul'){

if
($_SESSION['leveluser']=='admin'){ i
nclude "modul/mod_modul/modul.php";
elseif
($_GET[module]=='laporanpemesanan'){if
($_SESSION['leveluser']=='admin'){
include "modul/mod_laporanpemesanan/laporan.php";
// Bagian Kategori
elseif ($_GET[module]=='kategori'){
if
($_SESSION['leveluser']=='admin'){ include
"modul/mod_kategori/kategori.php";
// Bagian Produk
elseif ($_GET[module]=='produk'){
if
($_SESSION['leveluser']=='admin'){ inc
lude "modul/mod_produk/produk.php";

// Bagian Order
elseif ($_GET[module]=='order'){

if
($_SESSION['leveluser']=='admin'){ i
nclude "modul/mod_order/order.php";
// Bagian Profil
elseif ($_GET[module]=='profil'){
if
($_SESSION['leveluser']=='admin'){ inc
lude "modul/mod_profil/profil.php";
// Bagian Order
elseif ($_GET[module]=='hubungi'){
if
($_SESSION['leveluser']=='admin'){ inclu
de "modul/mod_hubungi/hubungi.php";
// Bagian Cara Pembelian
elseif ($_GET[module]=='carabeli'){
if
"modul/mod_carabeli/carabeli.php";

// Bagian Banner

elseif ($_GET[module]=='rekening'){
if
"modul/mod_rekening/rekening.php";
// Bagian Kota/Ongkos Kirim
elseif
($_GET[module]=='ongkoskirim'){ if
($_SESSION['leveluser']=='admin'){
include "modul/mod_ongkoskirim/ongkoskirim.php";
// Bagian Laporan
elseif ($_GET[module]=='laporan'){
if
($_SESSION['leveluser']=='admin'){ inclu
de "modul/mod_laporan/laporan.php";
// Apabila modul tidak ditemukan
else{
echo "<p><b>MODUL BELUM ADA ATAU BELUM LENGKAP</b></p>";
?>

Indeks.php
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"

/>
<style>
body {
background: url(images/blurred.jpg) no-

repeat center top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
</style>
<script language="javascript">
function validasi(form){
if (form.username.value == ""){
alert("Anda belum mengisikan Username.");
form.username.focus();
return (false);
if (form.password.value == ""){
alert("Anda belum mengisikan Password.");
form.password.focus();
return (false);

return (true);
</script>
</head>
<body OnLoad="document.login.username.focus();">
<div class="container">
<section class="main">
<form name="login" action="cek_login.php"

method="POST" onSubmit="return validasi(this)" class="form-3">
<p class="clearfix">
<label for="login">Username</label>
<input type="text" name="username"

id="login" placeholder="Username">
</p>
<label
for="password">Password</label>
<input type="password"
name="password" id="password" placeholder="Password">
</p>
<input type="submit" name="submit"

value="Sign in">
</p>
</form>
</section>
</div>
</body>

Logout.php
<?php
session_start();
session_destroy();
echo "<script>alert('Anda telah keluar dari Halaman

Administrator'); window.location = '../index.php'</script>";
?>
Media.php
<?php
error_reporting(0);
session_start();
if (empty($_SESSION[username]) AND
empty($_SESSION[passuser])){ echo "<link href='style.css'
rel='stylesheet' type='text/css'>
<center>Untuk mengakses modul, Anda harus login <br>";
echo "<a href=index.php><b>LOGIN</b></a></center>";
else{
?>

<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
tinyMCE_GZ.init({
plugins : 'style,layer,table,save,advhr,advimage, ...',
themes : 'simple,advanced',
languages : 'en',
disk_cache : true,
debug : false
});
</script>
<script language="javascript" type="text/javascript"
src="../tinymcpuk/tiny_mce_src.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins :
"table,youtube,advhr,advimage,advlink,emotions,flash,searchreplace,p
aste,directionality,noneditable,contextmenu",
theme_advanced_buttons1_add :
"fontselect,fontsizeselect",
theme_advanced_buttons2_add :
"separator,preview,zoom,separator,forecolor,backcolor,liststyle",
theme_advanced_buttons2_add_before:
"cut,copy,paste,separator,search,replace,separator",
theme_advanced_buttons3_add_before :
"tablecontrols,separator,youtube,separator",
theme_advanced_buttons3_add : "emotions,flash",

theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
extended_valid_elements :
"hr[class|width|size|noshade]",
file_browser_callback : "fileBrowserCallBack",
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
theme_advanced_link_targets : "_something=My
somthing;_something2=My somthing2;_something3=My somthing3;",
apply_source_formatting : true
});
function fileBrowserCallBack(field_name, url, type, win)
{var connector =
"../../filemanager/browser.html?Connector=connectors/php/connector.p
hp";
var enableAutoTypeSelection = true;
var cType;
tinymcpuk_field = field_name;
tinymcpuk = win;
switch (type) {
case "image":
cType = "Image";
break;
case "flash":

cType = "Flash";
break;
case "file":
cType = "File";
break;
if (enableAutoTypeSelection && cType)
{connector += "&Type=" + cType;
window.open(connector, "tinymcpuk",
"modal,width=600,height=400");
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="menu">
<ul>
<li><a href='media.php?module=home'>Home</a>
<li><a href='media.php?module=hubungi'>Pemesanan
Barang</a></li>
<li><a href='media.php?module=laporanpemesanan'> Lap.

Pemesanan Barang</a></li>
<li><a href='media.php?module=kategori'>Kategori
Produk</a></li>
<li><a href='media.php?module=produk'>Produk</a></li>

<li><a href='media.php?module=order'>Order</a></li>
<li><a href='media.php?module=ongkoskirim'>Ongkos
Kirim</a></li>
<li><a href='media.php?module=profil'>Profil Toko

Online</a></li>
<li><a href='media.php?module=carabeli'>Cara
Beli</a></li>
<li><a href='media.php?module=rekening'>Info Rekening

Toko</a></li>
<li><a href='media.php?module=laporan'>Laporan</a></li>
<li><a href='logout.php'>Logout</a></li>
</ul>
<p> </p>
</div>
<div id="content">
<?php include "content.php"; ?>
</div>
<div id="footer">
Copyright © 2017 by Fribel. All rights

reserved.
</div>
</div>
</body>
</html>
<?php

}
?>
Style.css
body{
font-family: Tahoma;
text-align: center;
background:url(images/bg.jpg) left top repeat;/*background:

url(../images/body-bg.jpg) center top no-repeat;*/
#header {
position: relative;
margin-right: auto;
margin-left: auto;
width: 930px;
border: 1px solid #272727;
text-align: left;
background:#fff;
#content {
margin-left: 230px;
padding:0px 10px 0 0;

#content p {
font-size: 75%;
line-height: 1.8em;
padding-left: 2em;
#menu {
position: relative;
float: left;
top: 0px;
left: 0;
width: 180px;
#menu ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
font-weight:bold;
#menu li {
width: 180px;
border-bottom: 1px solid #969BA5;
margin: 0;
padding: 0;
font-size: 80%;

vertical-align: bottom;
#menu li a {
background:url(images/m-icon.png)left center no-repeat;
#menu a:link, #menu a:visited
{display: block;
padding: 5px 5px 5px 0.5em;
border-right: 1px solid #969BA5;
color: #011D5C;
text-decoration: none;
padding-left:18px;
#menu a:hover {
text-decoration:underline;
a:link,a:visited
{color:#D22E23;
a:hover {
color: #FF6600;
text-decoration:none;
h2 {
font: normal 120% Georgia;

color: #D22E23;
background-color: transparent;
border-bottom: 1px dotted #D22E23;
table {
font-size: 8pt;
border-width: 1px;
border-style: solid;
border-color: #999999;
border-collapse: collapse;
margin: 10px 0px;
th{
color: #FFFFFF;
font-size: 7pt;
text-transform: uppercase;
text-align: center;
padding: 0.5em;
border-width: 1px;
border-color: #969BA5;
background-color: #D22E23;
td{
padding: 0.5em;

vertical-align: top;
border-width: 1px;
border-color: #969BA5;
input,textarea,select{ fon
t-family: Tahoma;
font-size: 8pt;
#paging{
font-size: 8pt;
#footer{
clear :both;
padding: 20px 0 10px 255px;
font-size: 70%;
color: #FFFFFF;
background-color: #272727;

Tugas Akhir Pweb

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tugas Akhir Pweb

Diunggah oleh

Hak Cipta:

Format Tersedia

Judul : WEBSITE PENJUALAN SEPATU ONLINE

UNIVERSITAS SUMATERA UTARA

WEBSITE PENJUALAN SEPATU ONLINE BERBASIS XAMPP

beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Palembang ,desember 2021

UNIVERSITAS SUMATERA UTARA

Palembang, palembang 2021

UNIVERSITAS SUMATERA UTARA

perancangan dalam pembuata website Rumah Sepatu ini dikembangkan dengan

menggunkan beberapa software yakni SUBLIME TEXT 3, XAMPP yang merupakan

gabungan dari Apache Web Server, PHP dan MySQL.

Dengan adanya website Rumah Sepatu ini diharapkan dapat mempermudah

proses pemasaran dan promosi produk-produk yang dapat meningkatkan pendapatan

memperoleh informasi terbaru serta mempermudah kostumerdalam hal pembelian

UNIVERSITAS SUMATERA UTARA

BAB 2 LANDASAN TEORI 7

UNIVERSITAS SUMATERA UTARA

2.4 HTML (Hypertext Markup Language) 14

2.4.1 Dokumen HTML 14

2.4.2 Penamaan Dokumen HTML 14

2.4.3 Elemen dan Tag HTML 14

2.5 PHP (Hypertext Preprocessor) 17

BAB 3 ANALISIS DAN PERANCANGAN SISTEM 25

UNIVERSITAS SUMATERA UTARA

3.6 Perancangan Algoritma 35

BAB 4 IMPLEMENTASI SISTEM 36

BAB 5 KESIMPULAN DAN SARAN 44

UNIVERSITAS SUMATERA UTARA

Tabel 2.1 Daftar Database yang didukung PHP 20

Tabel 3.1 Simbol-simbol Data Flow Diagram 27

Tabel 3.2 Tabel Admin 28

Tabel 3.3 Tabel Hubungi 28

Tabel 3.4 Tabel Kategori 29

Tabel 3.5 Tabel Kota 29

Tabel 3.6 Tabel Costumer 29

Tabel 3.7 Tabel Modul 30

Tabel 3.8 Tabel Order 30

Tabel 3.9 Tabel Produk 30

Tabel 3.10 Arti lambang-lambang Flowchart 31

UNIVERSITAS SUMATERA UTARA

Gambar 2.1 Dokumen HTML ditampilkan dibrowser Internet Explorer 17

Gambar 2.2 Tampilan Editor Sublime Text 23

Gambar 2.3 Tampilan Xampp 24

Gambar 3.1. Alur Flowchart Menu Utama 32

Gambar 3.2 Alur Flowchart Login Admin 34

Gambar 4.1 Halaman Utama Website 39

Gambar 4.2 Profil Website Rumah Sepatu 40

Gambar 4.3 Cara Pembelian Sepatu 40

Gambar 4.4 Pemesanan Barang 41

Gambar 4.5 Form Register 42

Gambar 4.6 Form Login 42

Gambar 4.7 Proses Pembayaran 43

UNIVERSITAS SUMATERA UTARA

1.1 Latar Belakang

Perkembangan Teknologi Internet yang pesat telah memicu munculnya berbagai

Dengan adanya website diharapkan dapat membantu masyarakat pada

UNIVERSITAS SUMATERA UTARA

E-commerce atau electronic commerce hadir seiring dengan perkemangan

Dengan adanya Website Penjualan Sepatu Online Berbasis Xampp dapat

1.2 Rumusan Masalah

1. Cara cepat dalam mencari sepatu.

2. Mempermudah dalam pembelian sepatu tanpa mendatang tokonya

UNIVERSITAS SUMATERA UTARA