GLMED-WEBSITE

UNIVERSITAS GUNADARMA
DIREKTORAT PROGRAM DIPLOMA TEKNOLOGI INFORMASI
TULISAN ILMIAH
PEMBUATAN WEBSITE TOKO ALAT KESEHATAN GLIA

MEDSHOP MENGGUNAKAN PHP DAN MYSQL
Nama : Primantha Eveline
NPM : 35115395
Program Studi : Manajemen Informatika
Pembimbing : Rogayah, ST., MMSI
Diajukan Guna Memperoleh Gelar Ahli Madya
Jakarta
2018
LEMBAR ORGINALITAS DAN PUBLIKASI
Saya yang bertanda tangan di bawah ini,
Nama : PRIMANTHA EVELINE

NPM :35115395
Judul PI :PEMBUATAN WEBISTE TOKO ALAT
KESEHATAN GLIA MEDSHOP MENGGUNAKAN
PHP DAN MYSQL
Tanggal Sidang :
Tanggal Lulus :
Menyatakan bahwa tulisan ini adalah merupakan hasil karya saya sendiri dan
dapat dipublikasikan sepenuhnya oleh Universitas Gunadarma.Segala kutipan
dalam bentuk apapun telah mengikuti tanggung jawab penulis, bukan Universitas
Gunadarma.
Demikian pernyataan ini dibuat dengan sebenarnya dan dengan penuh kesadaran
Depok, 28-Agustus-2018
(Primantha Eveline)
LEMBAR PENGESAHAN
Nama : PRIMANTHA EVELINE

NPM :35115395
Judul PI : PEMBUATAN WEBSITE TOKO ALAT
KESEHATAN GLIA MEDSHOP MENGGUNAKAN
PHP DAN MYSQL
Tanggal Sidang :
Tanggal Lulus :
Menyetujui
Pembimbing Kepala Bagian Sidang
(Rogayah, ST, MMSI) (Dr Edi Sukirman SSi, MM)
Kaprodi Manajemen Informatika
( Dr. Lintang Yuniar Bannowosari, SKom,. MSc)

ABSTRAK
Primantha Eveline, 35115395
Pembuatan Website Toko Alat Kesehatan Glia Medshop Menggunakan PHP
dan MYSQL
Jurusan Manajemen Informatika, Direktorat Program Diploma Tiga Teknologi
Informasi, Universitas Gunadarma, 2018
Kata Kunci: Glia Medshop,E-commerce, Internet, MySQL,PHP.
Glia Medshop merupakan salah satu toko alat kesehatan yang terletak di Depok.
Di Glia Medshop pembelian alat kesehatan hanya bisa dilakukan dengan
langsung datang ke toko dan melalui telepon. Dikarenakan alasan tersebut maka
diperlukan suatu aplikasi yang bisa membantu dalam proses penjualan buku tanpa
harus mengurangi sistem yang sudah berjalan sekarang.
Aplikasi yang cocok untuk mengatasi masalah tersebut adalah dengan
dibangunnya suatu aplikasi penjualan buku secara online (e-commerce) karena
dengan aplikasi e-commerce ini bisa melakukan berbelanja atau berdagang secara
online atau direct selling yang memanfaatkan fasilitas Internet dimana terdapat
website yang dapat menyediakan layanan "get and deliver"
Pembangunan aplikasi perdagangan buku secara online (e-commerce) bertujuan
untuk mempermudah dalam menjalankan penjualan alat kesehatan di Glia
Medshop. Hasil dari pembangunan aplikasi diantaranya bisa melakukan
pembelian secara online dan bisa melakukan pencarian berdasarkan nama produk
dan kategori alat kesehatan. Pada aplikasi ini terdapat fungsionalitas shopping
Cart, Konfirmasi Pembayaran dan Resi.
Aplikasi ini menggunakan metodologi ERD. Aplikasi E-Commerce yang penulis
buat berbasis web, scripting pemrograman yang digunakan adalah PHP karena
kemudahan dalam pemrograman, untuk proses database penulis menggunakan
MySQL, dan Notepad ++ untuk code editor.
Kata Pengantar
Puji syukur kehadirat Tuhan Yang Maha Esa yang telah memberikan Rahmat dan
Karunia -Nya sehingga penyusunan karya tulis ilmiah yang berjudul ”Pembuatan
Web Penjualanan Alat Kesehatan Glia Medshop Menggunakan PHP dan MYSQL”
dapat selesai tepat pada waktunya.
Penyusunan karya tulis ilmiah ini diajukan sebagai syarat menyelesaikan

pendidikan gelar Ahli Madya Program Studi Diploma III Manajemen Informatika
Universitas Gunadarma. Dalam penyusunan karya tulis ilmiah ini penulis banyak
mendapat bimbingan dan petunjuk dari berbagai pihak. Oleh karena itu , penulis
mengucapkan terimakasih kepada Bapak/Ibu:
Prof. Dr. E. S. Margianti, SE., MM selaku rektor Universitas Gunadarma
Prof. Dr. B.E.F. Da Silva, MSc, DEA selaku Direktur Program Diploma Tiga
Teknologi Informasi Universitas Gunadarma. .
Dr. Lintang Yuniar Banowosari, SKom, MSc selaku Kaprodi Manajemen
Informatika Universitas Gunadarma.
Rogayah, ST., MMSI selaku dosen pembimbing.
Kak Octa yang sudah memberi dukungan dan masukan saran.
Lusi,Widya,Aulia,Sarah, dan Nia teman teman yang sudah memberikan saya
dukungan.
Penulis menyadari dalam penyusunan karya tulis ilmiah ini masih belum sempurna,
maka saran dan kritik yang konstruktif sangat penulis harapkan demi perbaikan
karya tulis ilmiah selanjutnya. Akhirnya penulis berharap semoga karya tulis ilmiah
ini bermanfaat.
Depok, 02Agustus-2018
Primantha Evelime
1. PENDAHULUAN
1.1 Latar Belakang
Teknologi komputer pada saat ini semakin berkembang dan meningkat dengan
adanya internet. Aplikasi perangkat lunak komputer dan internet telah
berkembang pesat pada dasawarsa ini, demikian pula dengan aplikasi web dan
browser internet. Internet yang pada awalnya hanya akrab pada kalangan
akademis serta dunia kerja, sekarang sudah sangat familiar di kalangan
masyarakat umum. Internet berkembang menjadi alat bantu yang tidak hanya
mampu menyediakan informasi, tetapi juga mampu mengolah informasi. Internet
merupakan media yang bisa diandalkan untuk penyebaran informasi dari semua
aktifitas disegala bidang. Melalui internet pula aktifitas e-commerce berkembang.
Banyak pihak membuat website untuk kepentingan bisnis atau usaha, karena e-
commerce merubah semua kegiatan marketing dan juga memangkas biasa-biaya
operasional. Salah satunya adalah website penjualan alat kesehatan berupa
timbangan berat badan, stetoskop,dan lain lain . Glia Medshop merupakan nama
toko yang akan diangkat oleh penulis. Penulis yang juga sebagai pemilik toko
ingin memperkuat jaringan usahanya tidak hanya di dunia nyata, tapi juga di
dunia maya dan ingin menjaring semua pembeli se-Indonesia. Glia Medshop
merupakan sebuah usaha yang fokus bergerak di bidang penjualan alat-alat
kesehatan seperti alat refleksi, alat kedokteran,alat kebidanan , dan alat olahraga
yang didapat langsung dari supplier terpecaya yang berdiri sejak Januari 2018.
Beralamat di Jl.Mandor Basir 1 no 16, Beji, Depok. Toko ini menargetkan
pelanggannya yaitu mahasiswa kedokteran, bidan, praktisi kesehatan lainnya
bahkan orang awam yang membutuhkan alat-alat kesehatan dan peralatan
olahraga.
Dengan adanya permasalahan di atas, penulis bermaksud untuk membuat website
Glia medshop untuk memasarkan produk ke seluruh Indonesia via online. Selain
itu web penjualanan alat kesehatan masih sedikit.
1.2 Batasan Masalah
Dalam penulisan ini, penulis membatasi masalah hanya pada penjualan alat
kesehatan pada toko tersebut, yang disajikan dalam bentuk gambar-gambar asli
produk, kategori produk, teks deskripsi produk dan juga harga produk tersebut.
Pembelian barang dilakukan dengan memesan barang melalui web lalu

mentransferkan sejumlah uang berdasarkan harga total barang ke rekening
penjual. Pengiriman barang dilakukan melakui jasa pengiriman JNE saja.
1.3 Tujuan Penulisan
Tujuan penulisan ilmiah membuat website penjualan online toko alat kesehatan
ini adalah untuk memasarkan sekaligus mempromosikan produk-produk alat
kesehatan, alat olahraga yang dijual di toko tersebut secara online dan diharapkan
agar dapat memberikan informasi kepada masyarakat yang ingin membeli produk-
produk alat kesehatan terbaru yang tentunya pemesanan barangnya bisa dilakukan
secara online.
1.4 Metode Penelitian
Penulisan ilmiah ini melalui proses metode penelitian, diantaranya:
Studi Pustaka, penulis memanfaatkan literatur-literatur baik dari buku, informasi

yang terdapat dalam situs-situs internet yang berguna dalam pembuatan website
penjualan ini.
Studi Lapangan, penulis menanyakan langsung kebutuhan / fasilitas apa
saja guna menunjang aktifitas jual beli pada website penjualan alat kesehatan
tersebut berupa tampilan website, nama website alat kesehatan yang akan dibuat,
tampilan gambar-gambar produk, keterangan alamat toko, nomor rekening bank
yang akan dipakai untuk aktifitas transfer uang pemesanan barang.
Adapun perangkat lunak yang penulis gunakan dalam membuat penulisan

ilmiah ini adalah: Windows 10 home 32 bit sebagai sistem operasi, Notepad ++
sebagai editor program, PHP dan MySQL sebagai databasenya, lalu Boostrap
sebagai penunjang tampilan webnya, dan Google Chrome sebagai web
browsernya. Perancangan, implementasi, hosting. Pada tahap perancangan
website akan dibahas bagaimana website dibuat, tidak hanya pembuatan pada
tahap ini akan dimuat rancangan tampilan website dari halaman home sampai
halaman admin.
Tahap implementasi merupakan tahap uji coba pada website dengan

menggunakan web browser seperti google chrome,firefox, opera mini, dan lain
lain serta xampp sebagai servernya.
Setelah melakukan uji coba pada website, langkah terahkir adalah melakukan
hosting pada website agar website yang dibuat bisa djalankan secara online.
1.5 Sistematika Penulisan

Sistematika penulisan yang dilakukan oleh penulis dalam penulisan ilmiah
ini dijelaskan dalam 4 Bab yang membahas masalah secara singkat tanpa
mengabaikan keterhubungan antara Bab yang satu dengan Bab selanjutnya, adapun
sistematika penulisan terdiri dari sebagai berikut:
BAB I PENDAHULUAN
Dalam bab ini menguraikan pokok persoalan yang terdiri dari Latar Belakang
Masalah, Batasan Masalah, Tujuan Penulisan, Metode Penelitian dan Sistematika
Penulisan.
BAB II LANDASAN TEORI
Dalam bab ini akan diuraikan tentang landasan teori untuk mendukung pembuatan
website.
BAB III PERANCANGAN DAN IMPLEMENTASI
Dalam bab ini menguraikan Perancangan Webiste, Rancangan Tampilan,
Spesifikasi Perangkat yang digunakan serta Penjelasan Pembuatan Aplikasi.
BAB IV PENUTUP
Bab ini berisikan kesimpulan dan saran yang diperoleh sebagai evaluasi agar
aplikasi ini dapat dikembangkan lebih jauh untuk kedepannya.
2. LANDASAN TEORI
2.2 Internet
Internet sendiri berasal dari kata interconnection-networking, merupakan
sistem global dari seluruh jaringan komputer yang saling terhubung
menggunakan standar Internet Protocol Suite (TCP/IP) untuk melayani
miliaran pengguna di seluruh dunia. Berikut ini adalah sejarah singkat
awal mula internet ditemukan.
2.2.1 Sejarah Internet

Internet merupakan jaringan komputer yang dibentuk oleh Departemen
Pertahanan Amerika Serikat di tahun 1969, melalui proyek ARPA yang
disebut ARPANET (Advanced Research Project Agency Network), di
mana mereka mendemonstrasikan bagaimana dengan hardware dan
software komputer yang berbasis UNIX, bisa melakukan komunikasi
dalam jarak yang tidak terhingga melalui saluran telepon. Proyek
ARPANET merancang bentuk jaringan, kehlan, seberapa besar informasi
dapat dipindahkan, dan akhirnya semua str yang mereka tentukan menjadi
cikal bakal pembangunan protokol baru yang sekarang dikenal sebagai
TCP/IP (Transmission Control Protocol/Internet Protocol). Tujuan awal
dibangunnya proyek itu adalah untuk keperluan militer. Pada saat
itu Departemen Pertahanan Amerika Serikat (US Department of Defense)
membuat sistem jaringan komputer yang tersebar dengan menghubungkan
komputer di daerah-daerah vital untuk mengatasi masalah bila terjadi
serangan nuklir dan untuk menghindari terjadinya informasi terpusat, yang
apabila terjadi perang dapat mudah dihancurkan.
Pada mulanya ARPANET hanya menghubungkan 4 situs saja yaitu
Stanford Research
Institute, University of California, Santa Barbara, University of Utah, di
mana mereka membentuk satu jaringan terpadu di tahun 1969, dan secara
umum ARPANET diperkenalkan pada bulan Oktober 1972. Tidak lama
kemudian proyek ini berkembang pesat di seluruh daerah, dan semua
universitas di negara tersebut ingin bergabung, sehingga membuat
ARPANET kesulitan untuk mengaturnya.
Oleh sebab itu ARPANET dipecah manjadi dua, yaitu "MILNET" untuk
keperluan militer dan "ARPANET" baru yang lebih kecil untuk keperluan
non-militer seperti, universitas-universitas. Gabungan kedua jaringan
akhirnya dikenal dengan nama DARPA Internet, yang kemudian
disederhanakan menjadi Internet.
2.2.2 World Wide Web (WWW)

World wide web (www) merupakan hubungan antar dokumen pada server
http diseluruh dunia. Dokumen yang ada di www dikenal sebagai halaman
(halaman web), yang ditulis dengan menggunakan bahasa HTML.
Halaman web identik dengan suatu alamat di internet yang biasa
dinamakan URL (Uniform Resource Locators) sebagai penentu nama
komputer dan jalur yang dapat diakses, yang ditransmisikan dari satu titik
ke titik yang lain oleh pemakai http. Halaman web biasanya berisikan
informasi berupa teks, gambar/image, grafik, cuplikan film dan suara lagu.
Isi halaman web itu biasanya berbentuk kecil, dan aka nada program kecil
yang akan menjalankan sewaktu obyek tersebut diaktifkan. Obyek tersebut
dinamakan Hyperlink. Pengunjung situs juga bias men-download file dan
mengirim pesan dan kesan melalui email dengan memanfaatkan link pada
halaman web.
2.3 Browser
Browser adalah sebuah program aplikasi yang dipergunakan untuk
menjelajahi dunia maya internet. Aplikasi ini mempunyai kemampuan
menampilkan satu halaman web yang ditulis dalam bentuk dokumen
HTML. Lynx dan Mosaic merupakan dua contoh program aplikasi web
browser yang pertama. Lynx adalah web browser yang berbasis teks,
kekurangannya kita tidak dapat menampilkan gambar. Namun karena itu
pula web browser ini menjadi lebih cepat dan selain itu browser ini tidak
membutuhkan windows. Mosaic adalah browser yang berbasis windows.
Selain teks, dengan browser ini kita sudah bisa menampilkan gambar.
Program ini dibuat oleh NCSA ( National Center for Super-computing
Aplication ).
Saat ini perkembangan aplikasi web browser sudah sedemikian pesatnya,
apalagi setelah muncul Netscape milik Netscape corp. dan Internet
Explorer yang dikembangkan oleh Microsoft menyebabkan popularitas
mosaic semakin tenggelam. Namun pada computer yang berbasis UNIX
Browser Mosaic masih tetap dipakai.
2.1 E-Commerce
Secara umum dapat diartikan sebagai transaksi jual beli secara elektronik melalui
media internet. Selain itu, E-commerce juga dapat diartikan sebagai suatu proses
berbisnis dengan memakai teknologi elektronik yang menghubungkan antara
perusahaan, konsumen dan masyarakat dalam bentuk transaksi elektronik dan
pertukaran atau penjualan barang, servis, dan informasi secara elektronik. Dalam
melakukan E-Commerce penggunaan internet menjadi pilihan favorit oleh
kebanyakan orang karena kemudahan-kemudahan yang dimiliki oleh jaringan
internet tersebut, yaitu:
1. Internet sebagai jaringan public yang sangat besar, cepat dan kemudahan
dalam mengaksesnya.
2. Internet menggunakan electronic data sebagai media penyampaian
pesan/data sehingga dapat dilakukan pengiriman dan penerimaan informasi
secara mudah dan ringkas, baik dalam bentuk data elektronik analog
maupun digital.
Sehingga kehadiran E-Commerce sebagai media transaksi yang baru, cepat dan
mudah ini tentunya menguntungkan banyak pihak, baik pihak konsumen, maupun
pihak produsen dan penjual (retailer). Dengan menggunakan internet, proses jual
beli dapat dilakukan dengan menghemat biaya dan waktu.
2.1.2 Faktor Pendukung E-commerce
Faktor Pendukung E-Commerce
1. Cakupan yang luas

2. Proses transaksi yang cepat
3. E-Commerce dapat mendorong kreatifitas dari pihak penjual secara cepat
dan tepat dan pendistribusian informasi yang disampaikan berlangsung
secara periodik.
4. E-Commerce dapat menciptakan efesiensi yang tinggi, murah serta
informatif.
5. E-Commerce dapat meningkatkan kepuasan pelanggan, dengan pelayanan
yang cepat, mudah, aman dan akurat.
2.1.3 Keuntungan E-Commerce
1. Keuntungan yang diperoleh konsumen adalah melakukan pencarian barang,

dan pembelian secara online dengan mudah, belanja cukup pada suatu
tempat.
Contoh : Seorang pembeli diinternet dapat menggunakan computer
pribadinya pagi atau malam selama 7 hari per minggu untuk
membeli hamper semua barang, dan tidak perlu mengantri ditoko
atau bahkan meninggalkan rumahnya.
2. Keuntungan yang diperoleh pelaku bisnis toko online adalah melakukan
proses penjualan lebih mudah, efisiensi, tanpa kesalahan, tepat waktu.
Contoh : pelaku bisnis atau toko online cukup mengupdate barang
apa saja yang akan di jual, dan dalam pembayarannya pelanggan
cukup mendaftar dan memberikan data yang dibutuhkan, dan toko
online tersebut akan menyimpan informasi kartu kredit pembelinya
diserver mereka, sehingga informasi yang dibutuhkan hanya
dimasukkan sekalisaja.
3. Keuntungan yang diperoleh Manajemen atau perusahaan E-Commerce
adalah mendapatkan peningkatan pendapatan, dan loyalitas pelanggan.
Contoh : Perusahaan-perusahaan dapat menjangkau pelanggan
diseluruh dunia. Oleh karena itu dengan memperluas bisnis mereka,
sama saja dengan meningkatkan keuntungan
2.4 PHP
PHP atau Hypertext Preprocessor merupakan suatu bahasa pemograman
yang difungsikan untuk membangun suatu website dinamis”. Sintaks dasar PHP
meliputi bagaimana cara memulai struktur pemograman PHP. Ada empat cara
untuk memulai pemograman PHP, di antaranya :
<?Php ...... ?>
<? ..... ?>
<script
langguage=”php”> ......
</script>
<% ...... %>
2.5 HTML
HTML atau Hyper Text Markup Language adalah serangkaian kode program yang
merupakan dasar dari representasi visual sebuah halaman Web. Didalamnya berisi
kumpulan informasi yang disimpan dalam tag –tag tertentu, dimana tag-tag tersebut
digunakan untuk melakukan format terhadap
informasi yang dimaksud.
Berbagai pengembangan telah dilakukan terhadap kode HTML dan telah
melahirkan teknologi-teknologi baru di dalam dunia pemrograman web. Kendati
demikian, sampai sekarang HTML tetap berdiri kokoh sebagai dasar dari bahasa
web seperti PHP, ASP, JSP dan lainnya. Bahkan secara umum, mayoritas situs web
yang ada di Internet pun masih tetap menggunakan HTML sebagai teknologi utama
mereka.
2.6 CSS
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS
bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang
dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images,
dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas
(file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang
dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna
tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar
paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter
lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan
dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman
yang sama dengan format yang berbeda.
2.7 XAMPP
Xampp adalah paket program web lengkap yang dapat dipakai untuk belajar
pemograman web, khususnya PHP dan MySQL.
Dibawah folder utama xampp, terdapat beberapa folder penting yang perlu
diketahui. Untuk lebih memahami setiap fungsinya, terdapat beberapa penjelasan
sebagai
berikut :
a. apache adalah folder utama dari Apache WebServer.
b. htdocs adalah folder utama untuk menyimpan data-data latihan web, baik PHP
maupun HTML biasa. Pada folder ini dapat membuat subfolder sendiri untuk
mengelompokkan file latihannya. Semua folder dan file program di htdocs bisa
diakses dengan mengetikkan alamat http://localhost/ di browser.
c. Manual adalah berisi folder yang didalamnya terdapat manual program dan
database,
termasuk manual PHP dan MySQL.
2.8 MYSQL
adalah sebuah perangkat lunak yang bertugas untuk memanajemen sistem dengan
basis data SQL yang sudah multithreat serta multiuser.
Di era yang serba modern ini, berbagai aktifitas kita sudah sangat dimudahkan
dengan adanya berbagai teknologi yang sudah semakin canggih pula. Termasuk
ketika kita ingin mengoperasikan suatu data atau mungkin juga memasukkan data
untuk menghasilkan suatu data lain untuk berbagai keperluan kita.
Dahulu saat belum ada berbagai terknologi canggih seperti saat ini, orang orang
yang hendak mengolah data harus menuliskannya pada selembar kertas kemudian
menghitungnya satu persatu.
Cara ini tentu saja akan membutuhkan waktu yang lama belum lagi resiko
kesalahan yang cukup tinggi dilakukan oleh manusia membuat hasil pengolahan
data manual ini tidak akurat. Cara-cara manual ini telah ditinggalkan karena akan
menghabiskan waktu, tenaga, serta biaya yang sangat banya.
Oleh karena itulah saat ini kita sudah dimudahkan dengan adanya perangkat lunak
pada komputer yang serba otomatis yang dapat mengolah data kita secara akurat,
cepat, dan hemat.
2.8.2 Kelebihan Dan Kekurangan MYSQL

Selain karena gratis dan sangat mumpuni, MySQL juga memiliki banyak sekali
kelebihan diantaranya yaitu:
1. Gratis / Freeware
MySQL berada pada naungan lisensi GPL sehingga kita dapat
menggunakannya secara legal.
2. Kecepatan
MySQL memang dikenal karena kecepatannya yang lebih cepat daripada
aplikasi sejenisnya. Mekanisme dalam sistem mysql membuatnya dapat
menangani banyak data dalam waktu yang singkat.
3. Reability atau dapat dipercaya.

MySQL sendiri walaupun bersifat gratis tetapi ternyata dapat diandalkan
karena didukung oleh ribuan programmer handal di seluruh dunia sehingga
dapat meminilakan kemungkinan hang atau eror serta mencegah adanya bug
yang mungkin menganggu kerja kita. Selain itu juga para programmer di
seluruh dunia dapat berperan untuk melakukan test case secara bergantian
selama 24 jam nonstop, hal ini tentu membuah banyak orang yang semakin
percaya dengan MySQL.
4. Skala yang sangat besar.
Keunggulan dari MySQL yang berikutnya adalah skalanya yang sangat
besar. Biasanya apabila kita menggunakan aplikasi dengan skala yang besar,
maka kecepatannya akan menurun. Namun tidak demikian dengan MySQL
karena kecepatannya tetap stabil.Selain itu tingkat komplesitasnya yang
tinggi dan mendukung sistem multi prosessor membuat MySQL banyak
digunakan oleh perusahaan perusahaan besar seperti Google, facebook,
Wikipedia atau bahkan perusahaan sekelas NASA pun juga ikut
menggunakan MySQL karena keunggulannya ini.
Karena telah terbukti banyak digunakan oleh perusahaan perusahaan besar
maka Anda tak perlu ragu lagi untuk menggunakan aplikasi MySQL dalam
pekerjaan Anda.
5. Mudah untuk di download dan di install

Selanjutnya MySQL juga sangat mudah untuk di download dan di install,
hal ini banyak membuat para pemula lebih tertarik menggunakan aplikasi
MySQL untu belajar.
6. Mudah untuk dipindahkan dari satu sistem operasi ke sistem operasi.

Keunggulan lain dari MySQL adalah juga sangat mudah untuk dipindahkan dari
satu sistem operasi ke sistem operasi lainnya misalnya dari Windows ke Linux.
7. Memiliki banyak sekali tipe data

Kemudian MySQL juga memiliki banyak sekali tipe data sehingga sangat
memudahkan pengguna dalam mengoperasikannya.
8. Sistem terenkripsi
Aplikasi MySQL juga telah dilengkapi dengan sistem enkripsi atau
password yang tentunya akan menambah keamanan data data yang Anda
simpan.
9. Memiliki banyak pilihan bahasa
MySQL juga memiliki banyak pilihan bahasa sehingga sangat mudah untuk
digunakan, terdapat lebih dari 15 bahasa yang dapat dipilih sesuai kemampuan.
Namun dibalik banyak sekali keunggulannya tentu saja terdapat beberpa

kekurangan yang dapat sedikit menganggu.
1. Kurang mendukung pemrogaman visual basic ataupun desktop

MySQL lebih cenderung diperuntukkan aplikasi-aplikasi berbasis web dan mobile,
sehingga untuk anda yang akan membuat aplikasi desktop, mysql bukan pilihan
yang tepat.
2. Keterbatasan Bahasa Pemrogaman yang di support

Selaian itu juga keterbatasan bahasa pemrogaman yang kurang lengkap dalam
mendukung aplikasi MySQL seperti Delphi atau Foxpro sehingga harus
disesuaikan dahulu dengan bahasa pemrogaman yang lebih mendukung dengan
MySQL.
2.11 Apache
adalah sebuah nama web server yang bertanggung jawab pada request-response
HTTP dan logging informasi secara detail (kegunaan dasarnya).
Selain itu, Apache juga diartikan sebagai suatu web server yang kompak, modular,
mengikuti standar protokol HTTP, dan tentu saja sangat digemari.
Kesimpulan ini bisa didapatkan dari jumlah pengguna yang jauh melebihi para
pesaingnya. Sesuai hasil survei yang dilakukan oleh Netcraft, bulan Januari 2005
saja jumlahnya tidak kurang dari 68% pangsa web server yang berjalan di
Internet. Ini berarti jika semua web server selain Apache digabung, masih belum
bisa mengalahkan jumlah Apache.
Apache memiliki fitur-fitur canggih seperti pesan kesalahan yang dapat
dikonfigur, autentikasi berbasis basis data dan lain-lain. Apache juga didukung
oleh sejumlah antarmuka pengguna berbasis grafik (GUI) yang memungkinkan
penanganan server menjadi mudah. Apache merupakan perangkat lunak sumber
terbuka dikembangkan oleh komunitas terbuka yang terdiri dari pengembang
pengembang dibawah naungan Apache Software Foundation.
Saat ini ada dua versi Apache yang bisa dipakai untuk server produksi, yaitu versi
mayor 2.0 dan versi mayor 1.3. Apache merupakan webserver yang paling banyak
digunakan saat ini. Hal ini disebabkan oleh beberapa sebab, di antaranya adalah
karena sifatnya yang opensource.
2.12 PhpMyAdmin
adalah perangkat lunak bebas yang ditulis dalam bahasa pemrograman PHP yang
digunakan untuk menangani administrasi MySQL melalui Jejaring Jagat Jembar
(World Wide Web). phpMyAdmin mendukung berbagai operasi MySQL,
diantaranya (mengelola basis data, tabel-tabel, bidang (fields), relasi (relations),
indeks, pengguna (users), perizinan (permissions), dan lain-lain
Gambar 2.1 Gambar halaman phpMyAdmin

2.13 ERD (Entity Relationship Diagram)
Entity Relationship Diagram adalah suatu model untuk menjelaskan hubungan
antar data dalam basis data berdasarkan objek-objek dasar data yang mempunyai
hubungan antar relasi.
ERD untuk memodelkan struktur data dan hubungan antar data, untuk
menggambarkannya digunakan beberapa notasi dan simbol.
Pada dasarnya ada tiga komponen yang digunakan, yaitu :
2.13.1 Entitas
adalah Objek yang meiliki sesuatu yang nyata (eksistensinya) dan dapat di bedakan
dari sesuatu yang lain atau dapat di bedakan dari objek satu dengan objek yang
lainnya. Biasanya entitas di gambarkan dalam bentuk persegi panjang. Contoh
entitas yaitu Mahasiswa, Dosen, Guru.
2.13.2 Atribut
adalah karakteristik atau ciri yang mendefinisikan entitas sehingga dapat
membedakan antara entitas satu dengan entitas lainnya. Dalam Sebuh entitas pasti
memiliki satu atau lebih atribut untuk mendefinisikan karakteristik dari entitas
tersebut. Biasanya atribut di gambarkan dalam bentuk oval. Contoh atribut dari
Entitas Mahasiswa yaitu nama, nim, kelas
Di dalam atribut pun harus ada Primary Key (Atribut Khusus) yang dimana atribut
tersebut benar benar penting
Ada 2 jenis atribut yaitu Atribut Identifier untuk menentukan suatu entitas secara
unik atau primary key dan Atribut Descriptor untuk mendefinisikan dari suatu
entitas yang tidak unik
2.13.3 Relasi
Relasi ini menggunakan notasi 1:1
Contohnya : Relasi antara tabel siswa dan tabel orang tua. yang diamana satu baris
siswa hanya berhubungan dengan satu baris orang tua begitu juga sebaliknya.
Relasi dibagi menjadi :
1. One to One
Relasi ini menggunakan notasi 1:1
Contohnya : Relasi antara tabel siswa dan tabel orang tua. yang diamana
satu baris siswa hanya berhubungan dengan satu baris orang tua begitu juga
sebaliknya
Karyawan Dijatah THR
Gambar 2.2 Bentuk Relasi One to One
2. One-to-Many (atau Many-to-One)

Relasi ini menggunakan notasi 1:n
Contohnya : Relasi antara tabel guru dan tabel siswa. Yang dimana
satu baris guru atau satu guru bisa berhubungan dengan satu baris
atau lebih mahasiswa
Guru Mengajar Siswa
Gambar 2.3 Bentuk Relasi Many to One

3. Many to Many
Relasi ini menggunakan notasi m:n
Contohnya : Relasi antar tabel siswa dan tabel mata kuliah. Yang dimana
satu baris siswa bisa berhubungan dengan banyak baris mata pelajaran
begitu juga sebaliknya
Mahasiswa Belajar Mata Kuliah
Gambar 2.4 Bentuk Relasi Many to Many

2.14 Struktur Navigasi Sistem
Struktur navigasi adalah urutan alur informasi dari suatu aplikasi multimedia.
Dengan menggunakan struktur navigasi yang tepat maka suatu aplikasi multimedia
mempunyai suatu pedoman dan arah informasi yang jelas. Dalam pembuatan
aplikasi multimedia terdapat empat macam bentuk dasar struktur navigasi yang
digunakan, yaitu : Struktur Navigasi Linear, Struktur Navigasi Non Linear, Struktur
Navigasi Hirarki dan Struktur Navigasi Campuran
2.14.1. Struktur Navigasi Linear

Merupakan struktur yang hanya mempunyai satu rangkaian cerita berurut.
Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu halaman
sebelumnya atau satu halaman sesudahnya tidak dapat dua halaman sebelumnya
atau dua halaman sesudahnya. Biasanya struktur ini digunakan Multimedia
Presentasi karena tidak menuntut keinteraksian tetapi hanya memerlukan keindahan
dan kemudian menampilkan data sebagai informasi.
Gambar 2.5 Struktur Navigasi Linear

2.14.2 Struktur Navigasi Non Linear
Struktur navigasi non linear (tidak berurut) merupakan pengembangan dari
struktur navigasi linear. Pada struktur ini diperkenankan membuat navigasi
bercabang. Percabangan yang dibuat pada struktur linear ini berbeda dengan
percabangan pada struktur hierarki, karena pada percabangan non linear ini
walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan
yang sama tidak ada master page dan slave page.
Gambar 2.6 Struktur Navigasi Non Linear
2.14.3 Struktur Navigasi Hierarki

Struktur navigasi hierarki (bercabang) merupakan suatu struktur yang
mengandalkan percabangan untuk menampilkan informasi berdasarkan criteria
tertentu. Informasi pada halaman utama disebut parent dan informasi pada
cabangnya disebut child.
Gambar 2.7 Struktur Navigasi Hierarki

2.14.4 Struktur Navigasi Composite
Struktur navigasi composite (campuran) merupakan struktur gabungan dari
ketiga struktur sebelumnya. Struktur ini disebut juga struktur navigasi bebas .
Kelebihan dengan menggunakan struktur navigasi ini adalah suatu aplikasi mampu
memberikan keterkaitan informasinya lebih baik.
Gambar 2.8 Struktur Navigasi Campuran

3. Perancangan dan Implementasi
Pada bab ini akan dibahas bagaimana merancang dan membangun sebuah website
toko alat kesehatan Glia Medshop. Dalam pembuatan website ini menggunakan
bahasa PHP untuk logika pemrogramannya seperti controller, model, view,
sehingga aplikasi web ini menjadi dinamis dan lebih interaktif karena diekseskusi
melalui web browser (mozila firefox, google chrome, internet explorer, opera mini,
dan web browser lainnya) . Selain itu, aplikasi notepad ++ digunakan untuk wadah
penulisan script serta XAMPP yang digunakan sebagai server pada local host.
3.1 Spesifikasi Hardware dan Software yang Dibutuhkan dalam Pembuatan

Website
Sebelum membuat aplikasi web yang menggunakan bahasa pemrogramman PHP

maka harus disiapkan berbagai peralatan pendukung yang akan dibutuhkan dalam
pembuatan website ini adalah perangkat lunak (software) dan perangkat keras
(hardware) . Perangkat keras yang akan digunakan oleh penulis untuk merancang
website yaitu :
 Processor Intel(R) Celeron(R) CPU N3350 @ 1.10GHz

 RAM 2GB
 HDD 500GB
 Intel HD Graphic
 Soundcard Intel(R) Display Audio.
Selain Perangkat keras yang sudah pasti digunakan, maka dalam pembuatan
website dibutuhkan perangkat lunak. Adapun perangkat lunak yang digunakan
dalam pembuatan website sebagai berikut :
 Windows 10 Home 64bit sebagai sistem operasi

 Notepad ++ sebagai code editor
 Google Chrome sebagai web browser
 Xampp sebagai server
3.2 Perancangan Struktur Navigasi
Dalam tahapan ini akan diberikan gambaran isi sebuah web secara konsep
mengenai informasi apa saja yang akan ditampilkan dalam web tersebut. Agar
hubungan antar halaman yang akan dibuat terlihat jelas dan tersusun secara teratur,
maka dibuatlah sebuah navigasi web.
1. Struktur Navigasi User

Struktur navigasi untuk user yang digunakan pada website toko alat
kesehatan Glia Medshop adalah navigasi campuran, yang bertujuan agar
user mendapat informasi yang flexibilitas dalam mengakses setiap halamn
website toko alat kesehatan Glia Medshop.
Gambar 3.1 Struktur Navigasi User

2. Struktur Navigasi Admin
Strukrtur navigasi untuk admin yang digunakan pada Toko Alat Kesehatan
Glia Medshop ini adalah struktur navigasi hirarki, agar susunan data sesuai
dengan halaman yang akan diupdate dapat terarah dengan baik, selain itu
pada halaman admin dapat mengupdate seluruh informasi Toko Alat
Kesehatan Glia Medshop.
Gambar 3.2 Struktur Navigasi Admin

3.3 Struktur Database
3.3.1 Struktur Tabel Database
Tabel berikut ini menggambarkan bentuk database pada website seperti

database produk, user, customer, admin, dan lain-lain.
Tabel 3.1 Database Bseller

Field Type Null Default Extra Keterangan
id_bs int(11) No AUTO_INCREMENT Primary Key

None
no_urut int(11) No None
judul_bs int(11) No None
jam_upload time No None
tgl_upload date No None
jam_update time No None
`
tgl_update Date No None
text No None
uploader
updater text No None

3.2 Tabel Database Customer
id_customer int(11) No None AI Primary Key
nama varchar No None

(30)
email varchar No None

(30)
username varchar No None
(20)
password varchar No None
(60)
telepon varchar No None
(30)
alamat varchar No None
(200)
kopos int(11) No None
kecamatan varchar No None

(50)
kota varchar No None
(30)
provinsi varchar No None
(30)
status tinyint( No None
1)
hash varchar No None
(50)
3.3 Tabel Database Kabkot
Field Type Null Default Keterangan
id_prov int(2) No None
id_kabkot int(4) No None Primary

Key
nama_kabkot char(40) No None
jne_reg varchar(15) No None
jne_yes varchar(15) No None
3.4 Tabel Database Kategori

id_kat int(3) No None AI Primary Key
judul_kat varchar(100) No None
3.5 Tabel Database Kecamatan

Field Type Null Default
id_kabkot int(4) No None
id_kec int(4) No None

nama_kec int(40) No None
3.6 Tabel Database Navigasi
id_nav int(11) No None AUTO_INCREMENTNT Primary Key
judul varchar(100) No None
judul_seo varchar(100) No None
isi text No None

seo_deskripsi text No None
seo_keywords text No None
tgl_update date No None
updater text No None
3.7 Tabel Database Produk

id_produk int(11) No None AUTO_INCREMENT Primary Key
nama_produk varchar(300) No None
judul_seo varchar(300) No None
seo_keywords varchar(300) No None
seo_deskripsi varchar(300) No None
deskripsi text No None
warna varchar(100) No None
berat varchar(10) No None
kat int(11) No None
subkat int(11) No None

supersubkat int(11) No None
harga varchar(50) No None
harga_diskon varchar(50) No None
stok int(11) No None
garansi varchar(25) No None
uploader varchar(200) No None
updater varchar(200) No None
img text No None
3.8 Tabel Database Provinsi

nama_prov char(30) No None
3.9 Tabel Database Resi

id_resi int(11) No None AI Primary Key
tgl date No None

isi text No None
jam_upload time Yes Null
tgl_upload date Yes Null
jam_update time Yes Null
tgl_update date Yes Null
uploader text Yes Null
updater text Yes Null
3.10 Tabel Database Setting
Field Type Nul Defaul Extr Keteranga

l t a n
id_setting int(11) No None AI Primary Key
judul_settin varchar(100 No None
g )
isi_setting text No None

updater varchar(100 No None
)

3.11 Tabel Database Slider

id_slider int(11) No None AI Primary Key
no_urut int(11) Yes Null

judul_slider varchar(50) No None
link varchar(50) No None
active int(11) No None
uploader text Yes Null
updater text Yes Null
jam_upload time Yes Null
jam_update time Yes Null
tgl_upload date Yes Null
tgl_update datetime Yes Null
img text No None
3.12 Tabel Database Subkat

id_subkat int(3) No None AI Primary Key
id_kat int(3) No None
judul_subka varchar(100 No None
t )
3.13 Tabel Database Supersubkat

id_supersubkat int(3) No None AI Primary Key
id_subkat int(3) No None
id_kat int(3) No None
judul_supersubk varchar(5 No None

at 0)
kategori_seo varchar(5 No None
0)
3.14 Tabel Database Testimoni
id_testi int(11) No None AI Primary Key
nama text No None
username text No None

kota int(11) No None
isi text No None
status int(3) yes Null
tgl_upload date yes Null

jam_update time yes Null
tgl_update date yes Null

updater text yes Null
3.15 Tabel Database Tranksaksi

notranksaks int(11) No None AI Primary Key
i
username varchar(50 No None
)
tgl_chekout date No None
status tinyint(1) No None
3.16 Tabel Database Tranksaksi Detaill
notransaksi varchar(25) No None
username varchar(20) No None
id_produk int(11) No None
nama_produk varchar(300) No None
berat varchar(15) No None

harga_diskon varchar(50) No None
jumlah varchar(15) No None
jumlah_berat varchar(15) No None
subtotal varchar(50) No None
3.17 Tabel Database User

id_user int(11) No None AI Primary
Key
nama varchar(50) No None
username varchar(50) No None

password varchar(60) No None
usertype varchar(10) No None

access int(11) No None
uploader varchar(100) No None
updater varchar(100) No None
tgl_update update No None
3.3.2Entity Relationship Diagram (ERD)
ERD yang digunakan adalah binary degree (tingkat dua). Entitas yang
terdapat pada ERD adalah user, member, user_admin, produk, kurir. Dari
beberapa entitas ini ada yang memiliki atribut. Misalkan User memiliki
atribut username dan password sedangkan relasi pada ERD website ini
adalah daftar, beli, kelola, antar.
Untuk melakukan pemesanan barang, user harus melakukan pendaftaran
member. Setelah menjadi member user akan diberikan username serta
password untuk melakukan log in dan melakukan pemesanan barang.
User_Admin memiliki username serta password untuk melakukan login
dan melakukan pengelolaan produk yang terdapat pada halaman website.
Gambar 3.3 ERD

3.4 Perancangan Tampilan
Tahap selanjutnya dari proses pembuatan halaman website adalah
membuat tampilan home, katalog, resi, tesmionial, keranjang, kontak, cara
belanja, ketentuan belanja, profil, halaman admin dengan dashboard dan
menu utamannya.
3.4.1 Perancangan Tampilan Halaman Home

Desain output halaman home merupakan halaman yang pertama kali
diakses oleh user, halaman ini bisa juga dikatakan sebagai cover dari
website Toko Alat Kesehatan Glia Medshop. Desain home memiliki
keterangan yang sama seperti katalog, keranjang, resi, testimonial, tentang
kami.
Gambar 3.4 Rancangan Tampilan Halaman Home

3.4.2 Perancangan Tampilan Halaman Katalog
Desain halaman output katalog untuk memberikan informasi tentang

produk-produk pada Toko Alat Kesehatan Glia Medshop
Gambar 3.5 Rancangan Tampilan Halaman Katalog

3.4.3 Perancangan Tampilan Halaman Keranjang
Desain output halaman keranjang ini berfungsi memperlihatkan daftar
barang yang telah dipesan oleh member.
Gambar 3.6 Rancangan Tampilan Halaman Keranjang Belanja

3.4.4 Perancangan Tampilan Halaman Resi
Desain Output Halaman Resi berfungsi memberikan informasi berupa
tanggal pengiriman, nama penerima, dan no resi.
Gambar 3.7 Rancangan Tampilan Halaman Resi

3.4.5 Perancangan Tampilan Halaman Testimoni
Perancangan Tampilan Halaman Testimoni berfungsi untuk menginput
testimony dari member dan memperlihatkan testimony yang sudah dibuat
member.
Gambar 3.8 Rancangan Tampilan Halaman Testimoni

3.4.6 Perancangan Tampilan Halaman Cara Order
Perancangan tampilan halaman Cara Order merupakan desain untuk memberitahu

customer bagaimana cara mengorder barang di website.
Gambar 3.9 Rancangan Tampilan Halaman Cara Order

3.4.7 Perancangan Tampilan Halaman Ketentuan Belanja
Perancangan tampilan halaman ketentuan belanja berfungsi untuk memberikan
ketentuan untuk member pada saat melakukan pemesanan barang.
Gambar 3.10 Rancangan Tampilan Halaman Ketentuan Belanja

3.4.8 Desain Output Halaman Kontak
Halaman ini berfungsi memberikan kontak yang bisa dihubungi member terkait
kendala saat pemesanan.
Gambar 3.11 Rancangan Tampilan Halaman Kontak

3.4.9 Desain Output Halaman Profil
Halaman ini berfungsi sebagai informasi profil Toko Alat Kesehatan Glia
Medshop dari tanggal berdiri, alamat, dan lain lain.
Gambar 3.12 Rancangan Tampilan Halaman Profil

3.4.10 Perancangan Tampilan Halaman Dashboard Admin
Halaman ini bisa dilihat ketika admin melakukan login. Pada halamn dashboard
admin dapat memilih menu resi,testimony,produk terletak di tengah halaman,
fungsi menu tersebut hanya mempelihatkan data dari menu tersebut. Beberapa
menu dapat melakukan penambahan, jika admin ingin melakukan penambahan
harus mengakses menu sebelah kiri halaman.
Gambar 3.13 Rancangan Tampilan Halaman Dashboard Admin

3.4.11 Perancangan Tampilan Halaman Pesanan Barang Baru
Halaman ini berfungsi untuk menampilkan pesanan barang dari member. Setiap
member memesan barang maka pesanan akan masuk ke halaman ini.
Gambar 3.14 Rancangan Tampilan Halaman Daftar Pesanan Barang

3.4.12 Perancangan Tampilan Halaman Tambah Best Seller
Halaman ini berfungsi menambahkan produk yang masuk kategori best
seller. Kategori best seller adalah produk yang penjualanannya terbanyak dari
semua produk yang ada di website.
Gambar 3.15 Rancangan Tampilan Halamn Tambah Best Seller

3.4.13 Perancangan Tampilan Halaman Data Best Seller
Halaman ini berfungsi melihat data barang apa saja yang termasuk kategori best
seller. Best seller adalah kategori yang diberikan kepada barang yang
penjualanannya terbanyak.
Gambar 3.16 Rancangan Tampilan Halaman Data Best Seller

3.4.14 Perancangan Tampilan Halaman Tambah Kategori
Halaman ini berfungsi menambahkan kategori baru pada produk yang akan di
muat di website.
Gambar 3.17 Rancangan Tampilan Halaman Tambah Kategori

3.4.15 Perancangan Tampilan Halaman Data Kategori
Halaman ini berisi daftar kategori pada produk. Jika admin sudah melakukan
penambahan kategori pada halaman tambah kategori maka kategori yang sudah
ditambahkan akan dimuat dalama halaman ini.
Gambar 3.18 Rancangan Tampilan Halaman Daftar Kategori

3.4.16 Perancangan Tampilan Halaman Tambah Sub Kategori
Subkategori adalah pembagian yang lebih terspesialisasi dari suatu kategori.
Setiap kategori dalam database web ini memiliki sub kategori masing –masing.
Misalkan kategori alat bedah memiliki sub kategori gunting dan pinset.
Gambar 3.19 Rancangan Tampilan Halaman Tambah Sub Kategori

3.4.17 Perancangan Tampilan Halaman Data Sub Kategori
Halaman ini berfungsi untuk menampilan sub kategori yang sudah ditambahkan.
Setiap sub kategori yang ditambah biasanya sudah terhubung dengan kategori.
Gambar 3.20 Rancangan Tampilan Halaman Daftar Sub Kategori

3.4.18 Perancangan Tampilan Halaman Tambah Super Sub Kategori
Supersub kategori adalah pembagian dalam sub kategori. Setiap Sub kategori
memiliki supersub kategori masing-masing. Misalkan sub kategori alat timbangan
memiliki supersub kategori yaitu timbangan berat badan dan timbangan bayi.
Gambar 3.21 Rancangan Tampilan Halaman Tambah Super Sub Kategori

3.4.19 Perancangan Tampilan Halaman Data Super Sub Kategori
Setelah supersub kategori ditambahkan maka dimasukan kedalam halaman ini.
Setiap supersub kategori berhubungan dengan sub kategorinya masing-masing.
Gambar 3.22 Rancangan Tampilan Halaman Data Super Sub Kategori

3.4.20 Perancangan Tampilan Halaman Data Ongkir
Halaman ini berfungsi menampilkan ongkos kirim yang akan dibebankan ke
pembeli ketika memesan barang. Ongkos kirim perkg dihitung berdsarkan
provinsi.
Gambar 3.23 Rancangan Tampilan Halaman Data Ongkir

3.4.21 Perancangan Tampilan Halaman Tambah Produk
Halaman ini berfungsi untuk menambahkan produk yang akan dimuat di website.
Produk akan dipilih oleh member ketika melakukan pemesanan.
Gambar 2.24 Rancangan Tampilan Halaman Tambah Produk

3.4.22 Perancangan Tampilan Halaman Data Produk
Halaman ini menampilkan produk apa saja yang sudah ditambahkan di website.
Semua produk yang ada di halaman ini pasti akan mucul di halaman website.
Gambar 2.25 Rancangan Tampilan Halaman Data Produk

3.4.23 Perancangan Tampilan Halaman Tambahkan Resi
Halaman ini berfungsi menambahkan no resi untuk pembeli sehingga pembeli
dapat memantau pengiriman barangnya.
Gambar 2.26 Rancangan Tampilan Halaman Tambah Resi

3.4.24 Perancangan Tampilan Halaman Data Resi
Halaman ini berfungsi menampilkan resi yang sudah diberikan atau ditambahkan
admin kepada pembeli/member di halaman web.
Gambar 2.27 Rancangan Tampilan Halaman Data Resi

3.4.25 Perancangan Tampilan Tambah Slider Baru
Halaman ini berfungsi menambahkan slide pada halaman home website. Angka
kesatu pada slide adalah gambar produk yang mucul pertama kali di web dan
angka kedua adalah gambar produk yang mucul setelah gambar produk pertama.
Gambar 2.28 Rancangan Tampilan Halaman Tambah Slider

3.4.26 Perancangan Tampilan Halaman Daftar Slider
Halaman ini berfungsi menampilkan daftar slide yang akan muncul di halaman
web. Selain itu halaman ini berfungsi mengedit, menghapus, dan mengaktifkan
slide.
Gambar 2.29 Rancangan Tampilan Halaman Daftar Slider

3.4.27 Perancangan Tampilan Halaman Tambah User
Halaman ini menambahkan admin atau user yang akan mengelola website.
Tugas admin adalah menambahkan produk,mengedit produk, memberi resi,
mengelola pesanan baru, dan lain-lain.
Gambar 2.30 Rancangan Tampilan Halaman Tambah User

3.4.23 Perancangan Tampilan Halaman Data User
Halaman ini berfungsi memperlihatkan halaman data user atau admin yang sudah
ditambahkan dalam halaman tambah user. User atau admin yang sudah terdaftar
dapat mengakses halaman admin dengan cara login username dan password
khusus admin.
Gambar 2.31 Rancangan Tampilan Halaman Data User

3.424 Perancangan Tampilan Halaman Ubah Data Cara Order
Halaman cara order ini berbeda dengan halaman cara order di halaman website.
Halaman ini berfungsi melakukan pengeditan cara order di website.
Gambar 2.32 Rancangan Tampilan Halaman Ubah Data Cara Order

3.4.25 Perancangan Tampilan Halaman Ubah Data Home
Halaman ini berfungsi mengedit bagian home pada halaman web. Home adalah
halaman yang pertama kali dilihat oleh pembeli ketika mengakses website.
Gambar 2.34 Rancangan Tampilan Halaman Ubah Dara Home

3.4.26 Perancangan Tampilan Halaman Ubah Data Katalog
Halaman ini berfungsi mengedit bagian halaman katalog pada website. Katalog
adalah halaman yang menapilkan gambar, harga, deskripsi produk sehingga
pembeli dapat melihat informasi dari bentuk produk melalui gambar, harga, dan
deskripsi produk yang akan dipesan.
Gambar 2.35 Rancangan Tampilan Halaman Ubah Data Katalog

3.4.27 Perancangan Tampilan Halaman Ubah Data Keranjang Belanja
Halaman ini berfungsi mengedit bagian halaman keranjang belanja pada website.
Keranjang belanja merupakan halamana yang menampilkan daftar pesanan
pembeli dan total dari semua pesanan. Total harga yang dibayar merupakan
jumlah antara pesanan produk dengan ongkos kirim.
Gambar 2.36 Rancangan Tampilan Halaman Ubah Data Keranjang Belanja

3.4.28 Perancangan Tampilan Halaman Ubah Data Ketentuan
Halaman ini berfungsi mengedit halaman ketentuan. Halaman ketentuan memuat
syarat dan ketentuan dalam berbelanja di website glia medshop kepada pembeli.
Gambar 3.37 Rancangan Tampilan Halaman Ubah Data Ketentuan

3.4.29. Perancangan Tampilan Halaman Ubah Data Kontak
Halaman ini berfungsi mengedit bagian dari kontak pada halaman website.
Kontak akan dipakai oleh pembeli untuk menghubungi customer service baik via
whats app atau via bbm jika sedang menghadapi kendala dalam pemesanan
produk.
Gambar 3.38 Rancangan Tampilan Ubah Data Kontak

3.4.31 Perancangan Tampilan Halaman Ubah Data Profil
Halaman ini berfungsi mengedit bagian dari profil pada website. Profil adalah
informasi tentang toko online glia medshop dari tanggal berdiri, alamat, dan lain-
lain yang bisa dilihat oleh pembeli.
Gambar 3.39 Rancangan Tampilan Halaman Ubah Data Profil

3.4.32. Perancangan Tampilan Halaman Ubah Data Register/Login
Halaman ini berfungsi mengedit bagian dari register/login pada halaman website.
Register/login berfungsi untuk mendaftar menjadi member di website glia
medshop, setelah terdaftar jadi member maka pembeli sudah dapat melakukan
login dan memesan produk.
Gambar 3.40 Rancangan Tampilan Halaman Ubah Data Register/Login

3.4.33 Perancangan Tampilan Halaman Ubah Data Resi Pengiriman
Halaman ini berfungsi mengedit bagian dari resi pengiriman pada halaman
website. Resi adalah no pengiriman yang befungsi melacak pengiriman barang
dari pengirim ke penerima.
Gambar 3.41 Rancangan Tampilan Halaman Ubah Data Resi Pengiriman

3.4.34 Perancangan Tampilan Halaman Ubah Data Testimoni
Halaman ini berfungsi mengedit bagian dari testimony pada halaman website.
Testimoni merupakan ulasan dari pembeli setelah melakukan pembelian di glia
medshop.
Gambar 3.42 Rancangan Tampilan Ubah Data Testimoni

3.4.35 Perancangan Tampilan Halaman Testi Yang Diterima
Halaman ini berfungsi menerima testi dari pembeli setelah pembeli menulis
testimony dan mengklik tombol sumbmit. Setelah tombol submit diklik maka
testimony akan diterima admin.
Gambar 3.43 Rancangan Tampilan Halaman Testi Yang Diterima

3.4.36 Perancangan Tampilan Halaman Ubah Password Sendiri
Halaman ini berfungsi mengubah password untuk satu admini saja. Misalkan
seorang admin ingin megubah password lamanya maka dapat menggunakan
halaman ini akan tetapi untuk password admin lain tidak bisa diubah.
Gambar 3.44 Rancangan Tampilan Halaman Ubah Password Sendiri

3.4.37 Perancangan Tampilan Halaman Ubah Password User Lain
Halaman ini berfungsi mengubah password admin lain. Misalkan admin bernama
administrator 1 dapat mengubah password admin lain misalkan admin bernama
administrator 2.
Gambar 3.45 Rancangan Tampilan Halaman Ubah Password User Lain

3.4.38 Perancangan Tampilan Halaman Ubah Data Alamat
Halaman ini berfungsi untuk mengubah alamat toko pada website. Alamat yang
dimuat untuk mengetahui dimana letak toko offline glia medshop.
Gambar 3.46 Rancangan Tampilan Ubah Data Alamat

3.4.39 Perancangan Tampilan Halaman Author
Halaman ini berfungsi mengedit bagian author atau pembuat website ini.
Misalkan website ini dibuat oleh Glia medshop maka bentuk penulisannya copy
right 2018 glia medshop yang terletak di footer halaman website.
Gambar 3.47 Rancangan Tampilan Ubah Data Author

3.4.40 Perancangan Tampilan Halaman Ubah Data Bank
Halaman ini untuk mengubah data bank yang berisi rekening untuk mentransfer
uang pemesanan produk oleh pembeli.
Gambar 3.48 Rancangan Tampilan Halaman Ubah Data Bank

3.4.41 Perancangan Tampilan Halaman Ubah Data Footer
Halaman ini berfungsi mengedit bagian footer pada halaman website. Footer
biasanya terletak dibagian bawah halaman website, bagian footer pada websiete
ini beirsi alamat, kontak, jam layanan, dan nama author website.
Gmabar 3.49 Rancangan Tampilan Halaman Ubah Data Footer

3.4.42 Perancangan Tampilan Halaman Ubah Data Nama Toko
Halaman ini berfungsi mengedit nama toko online yang tereletak di header
halaman website.
Gambar 3.50 Rancangan Tampilan Halaman Ubah Data Nama Toko

3.5 Implementasi Pembuatan Website
Setelah melakukan perancangan pada halaman website maka perlu dilakukan
implementasi yang sesuai dengan perancangan. Softaware yang digunakan untuk
merancang website adalah notepad ++ sebagai code editor, css sebagai pembuatan
template, dan xampp sebagai server local untuk menjalankan website di browser.
1. Langkah pertama buka aplikasi code editor yaitu notepad ++. Cara
membuka aplikasi adalah klik icon pada desktop laptop atau computer ,
selain klik icon cara lainnya dengan mengklik menu start pilih all program
pilih notepad ++.
Gambar 3.51 Tampilan Notepad++
Kemudian menentukkan nama website serta membuat folder dengan nama

toko_online dan menempatkan lokasinya di D:\xampp\htdocs\toko_online.
Gambar 3.52 Tampilan folder toko_online
2. Selanjutnya membuat halaman website di notepad ++, untuk membuat

script baru dengan cara mengklik file dan pilih new.
Gambar 3.53 Cara Membuat Lembar Kerja Baru Notepad ++
3.5.1 Pembuatan Halaman Home
Halaman home adalah halaman yang pertama kali dijumpai oleh pengunjung pada
saat mengakses halaman utama Glia Medshop. Halaman ini juga digunakan untuk
melihat menu yang ada dalam situs web ini.
Berikut ini langkah perancangan halaman home :
1. Buka aplikasi notepad ++.
2. Setelah itu tuliskan listing kode dibawah ini :
<!DOCTYPE html>

<script src="<?php echo $base_url ?>template/js/jquery.js"></script>
<script src="<?php echo $base_url
?>template/js/bootstrap.min.js"></script>
</body>
</html>
3. Simpan file code dengan nama home.php di folder toko_online

4. Berikut ini hasil outputnya :
Gambar 3.54 Halaman Home
3.52 Perancangan Halaman Katalog
Halaman Katalog adalah halaman yang menampilkan gambar dari produk

di website dan juga informasi produk berupa harga,berat, deskripsi dan
garansi jika barang memilki garansi.
Langkah perancangan halaman katalog :
1. Klik new pada file maka lembar kerja baru akan muncul.
2. Tuliskan listing code seperti dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $katalog['judul'] ?> | <?php echo $namatoko
?></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<meta name="description" content="<?php echo
$katalog['seo_deskripsi'] ?>" />
<meta name="keywords" content="<?php echo
$katalog['seo_keywords'] ?>" />
<meta name="author" content="<?php echo $author ?>" />

<link href="<?php echo $base_url ?>template/css/bootstrap.min.css"
rel="stylesheet">
<link href="<?php echo $base_url ?>template/css/shop-item.css"
rel="stylesheet">

<link href="<?php echo $base_url ?>images/fav.ico" rel="shortcut
icon"/>
</head>
<body>
<?php include 'navbar.php'; ?>
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-push-3">
<div class="thumbnail">
<div class="col-md-12">
<h3><?php echo $katalog['judul']; ?></h3>
<hr/>
</div>
<div class="caption-full">
<div class="row text-center">
<?php include 'katalog_data.php'; ?>
</div>
</div>
</div>
</div>
<?php include 'sidebar.php'; ?>
</div>
<hr/>
<?php include 'footer.php'; ?>
</div>

</body>
</html>
3. Simpan file scipt dengan nama katalog. Php di folder toko_online

4. Berikut hasil outputnya :
Gambar 3.55 Halaman Katalog

3.5.3 Perancangan Halaman Keranjang
Halaman keranjang adalah halaman yang menampilkan daftar produk yang akan
dipesan oleh pembeli.
Langkah perancangan halaman keranjang :
1. Klik new untuk membuka lembar kerja baru.
2. Tuliskan listing code seperti di bawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $keranjang['judul'] ?> | <?php echo $namatoko ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<?php echo $keranjang['seo_deskripsi']
?>" />
<meta name="keywords" content="<?php echo $keranjang['seo_keywords']
?>" />
rel="stylesheet">
rel="stylesheet">
<link href="<?php echo $base_url ?>template/css/nomoretable.css"
rel="stylesheet">

<link href="<?php echo $base_url ?>images/fav.ico" rel="shortcut icon"/>
</head>
<body>
<div class="row">
<h3><?php echo $keranjang['judul']; ?></h3>
<hr/>
</div>
<?php include 'keranjang_data.php'; ?>
</div>
</div>
</div>
</div>
<hr/>
</div>

<script>
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
<script src="<?php echo $base_url ?>template/js/bootstrap.min.js"></script>
</body>
</html>
3. Simpan file code dengan nama keranjang.php di folder toko_online
4. Hasil outputnya sebagai berikut :

Gambar 3.56 Halaman Keranjang Belanja
3.5.3 Perancangan Halaman Resi

Halaman resi adalah halaman yang menampilkan nomor resi atau nomor
pengiriman barang. Nomor resi diberikan oleh jasa pengiriman barang
agar penerima dan pengirim bisa memantau proses pengiriman barang.
1. Klik file pilih new untuk membuka lembaran kerja baru.

2. Tulislah listing code dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $resi['judul'] ?> | <?php echo $namatoko ?></title>
scale=1">
<meta name="description" content="<?php echo $resi['seo_deskripsi']
?>" />
<meta name="keywords" content="<?php echo $resi['seo_keywords']
?>" />
rel="stylesheet">
rel="stylesheet">

icon"/>
</head>
<body>


<div class="row">
<h3><?php echo $resi['judul']; ?></h3>
<hr/>
</div>
<div class="row text-left">
<?php include 'resi_data.php'; ?>
</div>
</div>
</div>
</div>
</div>
<hr/>
</div>

</body>
</html>
3. Simpan file code dengan nama resi.php di folder toko_online.

Gambar 3.57 Halaman Resi Pengiriman
3.5.4. Perancangan Halaman Testimoni

Testimoni merupakan pendapat pembeli ketika membeli barang di suatu toko
online. Testimoni berfungsi memperlihatkan kualitas produk dari toko, pelayanan
toko, serta pengiriman toko kepada pembeli lain.
Langkah perancangan halaman testimoni :
1. Klik file pilih new maka akan keluar lembar kerja baru.
2. Tulislah listing code di bawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $testimoni['judul'] ?> | <?php echo $namatoko
?></title>
scale=1">
$testimoni['seo_deskripsi'] ?>" />
$testimoni['seo_keywords'] ?>" />
rel="stylesheet">
rel="stylesheet">

icon"/>
</head>
<body>

<div class="row">
<h3><?php echo $testimoni['judul']; ?></h3>
<hr/>
</div>
<h4>Tulis Testimoni</h4>
<hr/>
<?php include "testimoni_form.php"; ?>
<hr/>
<h4>Kumpulan Testimoni</h4>
<hr/>
<?php include "testimoni_data.php"; ?>
</div>
</div>
</div>
</div>
</div>
<hr/>
</div>

</body>
</html>
3. Simpan file code dengan nama testimoni.php di folder toko_online
Gambar 3.58 Halaman Testimoni

3.5.5 Perancangan Halaman Konfirmasi
Konfirmasi pembayaran dilakukan pembeli ketika sudah
mentransferkan uang untuk membayar pesanannya ke rekening yang
dimuat di website.
Langkah perancangan halaman konfirmasi :
1. Klik file pilih new maka akan muncul lembar kerja baru.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Konfirmasi Pembayaran | <?php echo $namatoko ?></title>
<meta name="description" content="Konfirmasi Pembayaran" />
<meta name="keywords" content="konfirmasi pembayaran" />
rel="stylesheet">
rel="stylesheet">


</head>
<body>
<div class="row">
<h3>Konfirmasi Pembayaran Anda</h3>
<hr/>
</div>
<form method="post" id="form-register"
action="konfirmasi_kirim.php">
<div class="row">
<div class="box box-primary">
<div class="box-body">
<div class="row">
<div class="col-xs-3"><label>No. Invoice</label>
<input class="form-control" name="no_invoice" type="text"
id="no_invoice" placeholder="Isikan angka saja" onkeypress='return
isNumberKey(event)' required/>
</div>
<div class="col-xs-5"><label>Nama Pengirim</label>
<input class="form-control" name="nama_pengirim"
type="text" id="nama_pengirim" required/>
</div>
<div class="col-xs-4"><label>Email</label>
<input class="form-control" name="email" type="text"
id="email"/>
</div>
</div><br/>
<div class="row">
<div class="col-xs-3"><label>Transfer Ke</label>
<input class="form-control" name="transfer_ke" type="text"
id="transfer_ke" placeholder="" required/>
</div>
<div class="col-xs-5"><label>Jumlah Transfer</label>
<input class="form-control" name="jml_transfer" type="text"
id="jml_transfer" placeholder="Isikan angka saja" onkeypress='return
isNumberKey(event)' required/>
</div>
<div class="col-xs-4"><label>Tanggal Transfer</label>
<input class="form-control" name="tgl_transfer" type="text"
id="tgl_transfer"/>
</div>
</div><br/>
<div class="form-group"><label>Catatan</label>
<textarea class="form-control" name="catatan" id="catatan"
placeholder="Tidak wajib diisi"></textarea>
</div>
</div>
<div class="box-footer">
<button type="submit" name="submit" class="btn btn-
success">Submit</button>
<button type="reset" name="reset" class="btn btn-
danger">Reset</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

</div>
<hr/>
</div>


<script type="text/javascript">
{
return false;
return true;
}
</script>
</body>
</html>
3. Simpan file code dengan nama konfirmasi.php di folder
toko_online
Gambar 3.59 Halaman Konfirmasi Pembayaran
3.5.6 Perancangan Halaman Tentang Kami

Halaman Tentang kami berisi tentang kapan didirikan toko glia medshop, alamat,
kontak, dan lain –lain.
Langkah perancangan halaman tentang kami :
2. Tulislah listing code seperti dibawah ini :
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo $base_url ?>"><?php echo
$namatoko ?></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-
1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
<span class='glyphicon glyphicon-search' aria-
hidden='true'></span> Cari<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<form method="POST" class="navbar-form navbar-left"
action="<?php echo $base_url ?>search">
<div class="form-group">
<input name="searchterm" type="text" class="form-control"
placeholder="Cari Barang...">
</div>
</form>
</li>
</ul>
</li>
<li>
<a href='<?php echo $base_url ?>index.html'>
<span class='glyphicon glyphicon-home' aria-
hidden='true'></span> Home
</a>
</li>
<li>
<a href='<?php echo $base_url ?>katalog.html'>
<span class='glyphicon glyphicon-book' aria-
hidden='true'></span> Katalog
</a>
</li>
<li>
<a href='<?php echo $base_url ?>keranjang.html'>
<span class='glyphicon glyphicon-shopping-cart' aria-
hidden='true'></span> Keranjang
</a>
</li>
<li>
<a href='<?php echo $base_url ?>resi.html'>
<span class='glyphicon glyphicon-plane' aria-
hidden='true'></span> Resi
</a>
</li>
<li>
<a href='<?php echo $base_url ?>testimoni.html'>
<span class='glyphicon glyphicon-comment' aria-
hidden='true'></span> Testimoni
</a>
</li>
<li>
<a href='<?php echo $base_url ?>konfirmasi.html'>
<span class='glyphicon glyphicon-bullhorn' aria-
hidden='true'></span> Konfirmasi
</a>
</li>
<span class='glyphicon glyphicon-blackboard' aria-
hidden='true'></span> Tentang Kami<span class="caret"></span>
</a>
<li>
<a href='<?php echo $base_url ?>page/cara_order.html'>
hidden='true'></span> Cara Order
</a>
</li>
<li>
<a href='<?php echo $base_url ?>page/ketentuan.html'>
<span class='glyphicon glyphicon-flag' aria-
hidden='true'></span> Ketentuan Belanja
</a>
</li>
<li>
<a href='<?php echo $base_url ?>page/kontak.html'>
<span class='glyphicon glyphicon-phone' aria-
hidden='true'></span> Kontak
</a>
</li>
<li>
<a href='<?php echo $base_url ?>page/profil.html'>
<span class='glyphicon glyphicon-user' aria-
hidden='true'></span> Profil
</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<?php
if(isset($_SESSION['username']))
{
echo "
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown'
role='button' aria-haspopup='true' aria-expanded='false'>
<span class='glyphicon glyphicon-user' aria-hidden='true'></span>
Hai, ".$sesen_username." <span class='caret'></span>
</a>
<ul class='dropdown-menu'>
<li>
<a href='$base_url"."logout'>
<span class='glyphicon glyphicon-log-out' aria-
hidden='true'></span> Logout
</a>
</li>
</ul>
</li>";
}
else
{
echo "<li><a href='$base_url"."register.html'><span
class='glyphicon glyphicon-user' aria-hidden='true'></span> Register/
Login</a></li>";
}
?>
</ul>
</div>
</div>
</nav>
3. Simpan file code dengan nama navigasi.php di folder toko_online
Gambar 3.60 Halaman Tentang Kami
3.5.7 Perancangan Halaman Admin

Halaman ini dikhususkan untuk admin dan terdiri dari menu utama seperti resi,
kategori, dan sebagainya. Jika ingin mengakses halaman ini maka user harus
terdaftar sebagai admin di halaman ini.
1. Klik file pilih new maka akan muncul halaman kerja baru.
2. Tulislah listing code berikut ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dashboard | <?php include "title.php"; ?></title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1,
user-scalable=no' name='viewport'>

<link href="template/bootstrap/css/bootstrap.min.css" rel="stylesheet"
type="text/css" />

<link href="template/font-awesome4.3.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css" />

<link href="template/dist/css/AdminLTE.min.css" rel="stylesheet"
type="text/css" />
<link href="template/dist/css/skins/skin-blue.min.css" rel="stylesheet"
type="text/css" />

<link href="../images/fav.ico" rel="shortcut icon" />
</head>
<body class="skin-blue sidebar-mini">
<div class="wrapper">
<?php include "header.php" ?>
<div class="content-wrapper">
<section class="content-header">
<h1>Dashboard</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Dashboard</li>
</ol>
</section>
<section class='content'>
<div class='row'>
<?php include 'record.php'; ?>
</div>
</section>
</div>
<?php include "footer.php" ?>
</div>
<?php include 'js.php'; ?>

</body>
</html>
3. Simpan file code dengan nama home.php dan kemudian buat folder
admin di dalam folder toko_online
Gambar 3.61 Halaman Dashboard Admin
3.5.8 Perancangan Halaman Pesanan Barang Baru

Halaman ini akan menerima pesanan barang yang masuk dari pembeli.
Admin akan melihat no invoice, nama pembeli, kontak pembeli, alamat
pembeli dan daftar pesanan.
Langkah perancangan halaman pesanan barang baru :
2. Tuliskan listing code berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Pesanan Barang Baru | <?php include "title.php" ?></title>
<meta content='width=device-width, initial-scale=1, maximum-
scale=1, user-scalable=no' name='viewport'>

<link rel="shortcut icon" href="../images/fav.ico" />


<link href="template/plugins/datatables/dataTables.bootstrap.css"
rel="stylesheet" type="text/css"/>
<script src="template/plugins/datatables/jquery.dataTables.min.js"
type="text/javascript"></script>
<script
src="template/plugins/datatables/dataTables.bootstrap.min.js"

$(function () {
$("#example1").dataTable();
$('#example2').dataTable({
"bPaginate": true,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
});
});
</script>
</head>
<?php include 'header.php'; ?>
<h1>Daftar Pesanan Barang</h1>
<li><a href="home.php"><i class="fa fa-dashboard"></i>
Home</a></li>
<li class="active"><a href="pesanan.php">Daftar Pesanan
Barang</a></li>
</ol>
</section>
<section class="content">
<?php include "pesanan_data.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code bernama pesanan.php di folder admin.
Gambar 3.62 Halaman Daftar Pesanan Barang
3.5.9 Perancangan Halaman Tambah Best Selller

Halaman ini berfungsi menambah barang yang penjualannya terbanyak
atau best seller.
Langkah perancangan halaman best seller :
<!DOCTYPE html>
<html>
<head>
<title>Tambah Best Seller Baru | <?php include "title.php"
?></title>


</head>
<h1>Form Entry Best Seller Baru</h1>
Home</a></li>
<li>Best Seller</li>
<li class="active"><a href="product_add.php">Entry Best
Seller Baru</a></li>
</ol>
</section>
<?php include "bseller_add_form.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama bselleradd.php di folder admin.
Gambar 3.63 Halaman Tambah Best Seller

3.5.10 Perancangan Halaman Daftar Best Seller
Daftar best seller adalah daftar yang menampilkan penjualanan

barang terbanyak dari semua barang.
<!DOCTYPE html>
<html>
<head>
<title>Daftar Best Seller | <?php include "title.php"
?></title>
<meta content='width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no' name='viewport'>


<link
href="template/plugins/datatables/dataTables.bootstrap.css"
<script
src="template/plugins/datatables/jquery.dataTables.min.js"
<script
$(function () {
"bPaginate": true,
"bFilter": false,
"bSort": true,
"bInfo": true,
});
});
</script>
</head>
<h1>Daftar Best Seller <small><a
href="bseller_add.php">Tambah Best Seller
Baru</a></small></h1>
<li><a href="home.php"><i class="fa fa-
dashboard"></i> Home</a></li>
<li class="active"><a href="bseller_list.php">Daftar
Best Seller</a></li>
</ol>
</section>
<?php include "bseller_list_data.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama bseller_list.php di folder admin
Gambar 3.64 Halaman Daftar Best Seller
3.5.11 Perancangan Halaman Tambah Kategori

Tambah kategori berfungsi menambahkan kategori batu untuk
produk di website.
Langkah perancangan halaman tambah kategori :
<!DOCTYPE html>
<html>
<head>
<title>Tambah Kategori Baru | <?php include "title.php"
?></title>


</head>
<?php include "header.php"; ?>
<h1>Form Entry Kategori Baru</h1>
<li>Kategori</li>
<li class="active"><a
href="kategori_add.php">Entry Kategori Baru</a></li>
</ol>
</section>
<?php include "kategori_add_form.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama kategori_add.php di folder
admin.
4. Hasil outputnya sebagai berikut
Gambar 3.65 Halaman Tambah Kategori

3.5.12 Perancangan Halaman Tambah Sub Kategori
Sub kategori merupakan pembagian dari suatu kategori lebih spesifik. Misalkan
kategori alat bantu memiliki sub kategori kursi roda. Halaman ini berfungsi
menambahkan sub kategori baru dari sebuah kategori.
Langkah perancangan halaman tambah kategori :
1.Klik file pilih new maka akan muncul halaman kerja baru.
2.Tulislah listing code berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Tambah Sub Kategori Baru | <?php include "title.php" ?></title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no' name='viewport'>


</head>
<h1>Form Entry Sub Kategori Baru</h1>
<li><a href="home.php"><i class="fa fa-dashboard"></i> Home</a></li>
<li>Sub Kategori</li>
<li class="active"><a href="subkat_add.php">Entry Sub Kategori
Baru</a></li>
</ol>
</section>
<?php include "subkat_add_form.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama subkat_add.php di folder admin.
Gambar 3.66 Halaman Tambah Sub Kategori

3.5.13 Perancangan Halaman Daftar Sub Kategori
Sub kategori produk akan ditampilkan di website dan halaman ini memuat sub
kategori apa saja yang ditambahkan oleh admin.
Langkah perancangan halaman daftar sub kategori :
2. Tulislah listing kode berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Daftar Sub Kategori | <?php include "title.php" ?></title>


<script src="template/plugins/datatables/dataTables.bootstrap.min.js"
$(function () {
"bPaginate": true,
"bFilter": false,
"bSort": true,
"bInfo": true,
});
});
</script>
</head>
<?php include 'header.php' ?>
<h1>Daftar Sub Kategori <small><a
href="subkat_add.php">Tambah Sub Kategori Baru</a></small></h1>
Home</a></li>
<li>Sub Kategori</li>
<li class="active"><a href="subkat_list.php">Daftar Sub
Kategori</a></li>
</ol>
</section>
<?php include "subkat_list_data.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama subkat_list.php di folder admin.
Gambar 3.67 Halaman Daftar Sub Kategori

3.5.14 Perancangan Halaman Tambah Supersub Kategori
Supersub kategori merupakan pembagian dari sub kategori yang lebih
spesifik. Misalkan sub kategori kursi roda memiliki super sub kategori
yakni kursi roda dewasa dan kursi roda anak. Halaman ini berfungsi
menambahkan supersub kategori dari satu sub kategori.
Langkah perancangan halaman tambah supersub kategori :

1. Klik file pilih new maka akan muncul lembaran kerja baru.
2. Tulislah Listing code berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Tambah Supersub Kategori Baru | <?php include "title.php"
?></title>



$(function() {
$("#cmbkat").change(function(){
$("sbox#tampil").show();
var id_kat = $(this).val();
$.ajax({
type: "POST",
dataType: "html",
url: "../fungsi/getsubkat.php",
data: "id_kat="+id_kat,
success: function(msg){
if(msg == '')
{
$("select#cmbsubkat").html('<option value="">--Pilih Kategori
Terlebih Dahulu--</option>');
$("select#cmbsupersubkat").html('<option value="">--Belum
ada data--</option>');
}
else{$("select#cmbsubkat").html(msg);
}
$("img#tampil").hide();
getAjaxAlamat();
}
});
});
$("#cmbsubkat").change(getAjaxAlamat);
function getAjaxAlamat(){
$("sbox#tampil").show();
var id_subkat = $("#cmbsubkat").val();
$.ajax({
type: "POST",
dataType: "html",
url: "../fungsi/getsupersubkat.php",
data: "id_subkat="+id_subkat,
if(msg == '')
{
}else{$("select#cmbsupersubkat").html(msg);
}
$("sbox#tampil").hide();
}
});
}
});
</script>
</head>
<h1>Form Entry Supersub Kategori Baru</h1>
Home</a></li>
<li>Supersub Kategori</li>
<li class="active"><a href="supersubkat_add.php">Entry
Supersub Kategori Baru</a></li>
</ol>
</section>
<?php include "supersubkat_add_form.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama supersubkat_add.php di folder admin.
Gambar 3.68 Halaman Tambah Super Sub Kategori
3.5.15 Perancangan Halaman Daftar Supersub Kategori

Halaman ini berfungsi melihat daftar supersub kategori yang
ditambahkan oleh admin.
Langkah perancangan supersub kategori :

<!DOCTYPE html>
<html>
<head>
<title>Daftar Supersub Kategori | <?php include "title.php"
?></title>


<link
<script
<script
$(function () {
"bPaginate": true,
"bFilter": false,
"bSort": true,
"bInfo": true,
});
});
</script>
</head>
<h1>Daftar Supersub Kategori <small><a
href="supersubkat_add.php">Tambah Supersub Kategori
Home</a></li>
<li>Supersub Kategori</li>
<li class="active"><a href="supersubkat_list.php">Daftar
Supersub Kategori</a></li>
</ol>
</section>
<?php include "supersubkat_list_data.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama supersubkat_list.php di folder
admin.
Gambar 3.69 Halaman Daftar Super Sub Kategori
3.5.15 Perancangan Halaman Data Ongkir

Data ongkir adalah daftar ongkos kirim berdasarkan daerah yang
akan dibebankan ke pembeli ketika memesan produk.
Langkah perancangan Halaman Data Ongkir :

1. Klik file pilih new maka akan muncul halaman baru.
2. Tuliskan code seperti berikut ini :
<link
<script
<script
$(function () {
"bPaginate": true,
"bFilter": false,
"bSort": true,
"bInfo": true,
});
});
</script>
</head>
<h1>Daftar Ongkir</h1>
<li>Ongkir</li>
<li class="active"><a href="ongkir_list.php">Daftar
Ongkir</a></li>
</ol>
</section>
<?php include "ongkir_list_data.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama ongkir_list.php di folder admin.
Gambar 3.70 Halaman Daftar Ongkir
3.5.16 Perancangan Halaman Tambah Produk
Halaman ini berfungsi menambahkan produk baru di website.

Untuk menambahkan produk harus memasukan
nama,kategori,subkat,supersubkat, deskripsi, dan lain-lain.
Langkah perancangan halaman tambah produk :
<!DOCTYPE html>
<html>
<head>
<title>Tambah Produk Baru | <?php include "title.php"
?></title>


function hitung() {
var a = $("#a").val();
var b = $("#b").val();
c = a * b/100; //Persentase: a x b dibagi 100%
$("#c").val(c);
d = b - c; //Harga Setelah Diskon: Harga Awal (b) - Harga
Diskon (c)
$("#d").val(d);
}
$(function() {
$("img#imgLoad").show();
$.ajax({
type: "POST",
dataType: "html",
if(msg == ''){
$("select#cmbsubkat").html('<option value="">--
Pilih Kategori Terlebih Dahulu--</option>');
$("select#cmbsupersubkat").html('<option
value="">--Belum ada data--</option>');
}else{
$("select#cmbsubkat").html(msg);
}
$("img#imgLoad").hide();
getAjaxAlamat();
}
});
});
$("img#imgLoadMerk").show();
$.ajax({
type: "POST",
dataType: "html",
if(msg == ''){
$("select#cmbsupersubkat").html('<option value="">--
Belum ada data--</option>');
}else{
$("select#cmbsupersubkat").html(msg);
}
$("img#imgLoadMerk").hide();
}
});
}
});
</script>
</head>
<h1>Form Entry Produk Baru</h1>
<li>Produk</li>
<li class="active"><a href="produk_add.php">Entry
Produk Baru</a></li>
</ol>
</section>
<?php include "produk_add_form.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama produk_add.php di folder
admin
Gambar 3.71 Halaman Tambah Produk
3.5.17 Perancangan Halaman Daftar Produk
Halaman ini berfungsi memperlihatkan daftar produk apa

saja yang sudah ditambahkan dan akan muncul di halaman
katalog website.
Langkah perancangan halaman daftar produk

1. Klik file pilih new maka akan muncul halaman kerja
baru.
<!DOCTYPE html>
<html>
<head>
<title>Daftar Produk | <?php include "title.php"
?></title>


<link
href="template/plugins/datatables/dataTables.bootstrap.
css" rel="stylesheet" type="text/css"/>
<script
src="template/plugins/datatables/jquery.dataTables.min.
js" type="text/javascript"></script>
<script
src="template/plugins/datatables/dataTables.bootstrap.
min.js" type="text/javascript"></script>
$(function () {
"bPaginate": true,
"bFilter": false,
"bSort": true,
"bInfo": true,
});
});
</script>
</head>
<h1>Daftar Produk <small><a
href="produk_add.php">Tambah Produk
<li>Produk</li>
href="product_list.php">Daftar Produk</a></li>
</ol>
</section>
<?php include "produk_list_data.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama produk_list.php di folder
admin.
Gambar 3.72 Halaman Daftar Produk

3.5.18 Perancangan Halaman Tambah resi
Halaman ini berfungsi menginput no resi yang akan diperlihatkan kepada
pembeli. No resi adalah no yang diberikan oleh jasa pengiriman untuk melacak
proses pengiriman.
Langkah perancangan halaman tambah resi :
2. Tulislah listing kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Tambah Resi Baru | <?php include "title.php" ?></title>


<link href="template/plugins/datepicker/css/bootstrap-datepicker.css"
rel="stylesheet">
<script src="template/plugins/datepicker/js/jquery.js"></script>
<script src="template/plugins/datepicker/js/bootstrap-
datepicker.js"></script>
$(function()
{
$('#tgl').datepicker({autoclose: true,todayHighlight: true,format: 'yyyy-
mm-dd'})
});
</script>
</head>
<h1>Form Entry Resi Baru</h1>
<li><?php echo "<a href='home.php'>" ?><i class="fa fa-
<li>Resi</li>
<li class="active"><a href="resi_add.php">Entry Resi
Baru</a></li>
</ol>
</section>
<?php include "resi_add_form.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama resi_add.php di folder admin.

Gambar 3.73 Halaman Tambah Resi

3.5.19 Perancangan Halaman Data Resi
Halaman ini memperlihatkan resi apa saja yang sudah diinput oleh admin.
Resi yang telah diinput akan diperlihatkan di website sehingga pembeli
bisa mengetahui no resi telah diberikan admin sesuai dengan nama
pembeli masing –masing dan tanggal kirim.
Langkah perancangan halaman data resi :

<!DOCTYPE html>
<html>
<head>
<title>Daftar Resi | <?php include "title.php" ?></title>


<script
$(function () {
"bPaginate": true,
"bFilter": false,
"bSort": true,
"bInfo": true,
});
});
</script>
</head>
<h1>Daftar Resi <small><a href="resi_add.php">Tambah Resi
Home</a></li>
<li>Resi</li>
<li class="active"><a href="resi_list.php">Daftar
Resi</a></li>
</ol>
</section>
<?php include "resi_list_data.php" ?>
</section>
</div>
<?php include "../footer.php" ?>
</div>
</body>
</html>
3. Simpan file code dengan nama resi_list.php di folder admin

Gambar 3.74 Halaman Daftar Resi
3.5.20 Perancangan Halaman Tambah Slider

Halaman ini berfungsi menambah slider pada website. Slider berfungsi
mempercantik web sehingga tampilan web kelihatan menarik.
Langkah perancangan halaman tambah slider :

<!DOCTYPE html>
<html>
<head>
<title>Tambah Slider Baru | <?php include "title.php" ?></title>


</head>
<h1>Form Entry Slider Baru</h1>
Home</a></li>
<li>Slider</li>
<li class="active"><a href="slider_add.php">Entry Slider
Baru</a></li>
</ol>
</section>
<?php include "slider_add_form.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama slider_add.php di folder admin.

4. Hasil outputynya sebagai berikut :
Gambar 3.75Halaman Tambah Slider

3.5.21 Perancangan Halaman Daftar Slider
Halaman ini berfungsi melihat slide apa saja yang sudah ditambahkan
admin dan slide yang telah di tambahkan akan muncul di website.
Langkah perancangan halaman daftar slider:

<!DOCTYPE html>
<html>
<head>
<title>Daftar Slider | <?php include "title.php" ?></title>


<link
<script
<script
$(function () {
"bPaginate": true,
"bFilter": false,
"bSort": true,
"bInfo": true,
});
});
</script>
</head>
<h1>Daftar Slider <small><a
href="Slider_add.php">Tambah Slider Baru</a></small></h1>
Home</a></li>
<li>Slider</li>
<li class="active"><a href="slider_list.php">Daftar
Slider</a></li>
</ol>
</section>
<?php include "slider_list_data.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama slider_list.php di folder admin.

Gambar 3.76 Halaman Daftar Slider
3.5.22 Perancangan Halaman Testimonial Yang Baru Masuk
Testimoni yang baru ditulis dan dikirimkan oleh pembeli akan

masuk ke halaman ini. Testimoni merupakan ulasan dari pembeli
baik itu segi kualitas produk, pelayanan toko dalam melayani
pembeli, kecepatan pengiriman, dan lain-lain.
Langkah perancangan halaman testimonial yang baru masuk :

2. Tulislah listing code seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Testimonial yang Baru Masuk | <?php include
"title.php" ?></title>


<link
<script
<script
$(function () {
"bPaginate": true,
"bFilter": false,
"bSort": true,
"bInfo": true,
});
});
</script>
</head>
<h1>Testimonial yang Baru Masuk</h1>
<li>Testimonial</li>
href="testimonial_list.php">Testimonial yang Baru
Masuk</a></li>
</ol>
</section>
<?php include "testi_new_list_data.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file dengan nama testi_new.php di folder admin.
Gambar 3.77 Halaman Testimonial Yang Baru Masuk

3.5.23. Perancangan Halaman Testimonial Yang Telah
Diterima
2. Tulislah code seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Testimonial yang Telah diterima| <?php include


<link
<script
<script
src="template/plugins/datatables/dataTables.bootstrap.min.j
s" type="text/javascript"></script>
$(function () {
"bPaginate": true,
"bFilter": false,
"bSort": true,
"bInfo": true,
});
});
</script>
</head>
<h1>Testimonial yang Telah diterima</h1>
<li>Testimonial</li>
href="testimonial_acc_list.php">Testimonial yang Telah
diterima</a></li>
</ol>
</section>
<?php include "testi_acc_list_data.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan anma testi_acc.php di folder

admin.
4. Hasil outpunya sebagai berikut :
Gambar 3.78 Testimonial Yang Telah Diterima
3.5.24 Perancangan Halaman Tambah User Baru
Halaman tambah user baru berfungsi menambahkan admin baru untuk mengelola
website. Admin bertugas mengelola produk,resi,dan lain-lain.
Langkah perancangan halaman tambah user baru :
1. Klik file pilih new akan muncul lembar kerja baru.
<!DOCTYPE html>
<html>
<head>
<title>Tambah User Baru | <?php include "title.php" ?></title>


</head>
<h1>Form Entry User Baru</h1>
Home</a></li>
<li>User</li>
<li class="active"><a href="user_add.php">Entry User
Baru</a></li>
</ol>
</section>
<?php include "user_add_form.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama user_add.php di folder admin.
Gambar 3.79 Halaman Tambah User

3.5.25 Perancangan Halaman Data User
Halaman ini berfungsi memperlihatkan daftar admin yang sudah terdaftar.

Untuk mendaftar jadi admin maka user masuk ke halaman tambah admin.
Langkah perancangan halaman data user :

2. Tulislah listing code seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Daftar User | <?php include "title.php" ?></title>


<script
$(function () {
"bPaginate": true,
"bFilter": false,
"bSort": true,
"bInfo": true,
});
});
</script>
</head>
<h1>Daftar User <small><a href="user_add.php">Tambah User
Home</a></li>
<li>User</li>
<li class="active"><a href="user_list.php">Daftar
User</a></li>
</ol>
</section>
<?php include "user_list_data.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan nama user_list.php di folder admin.

4. Hasil outputnya sebagai berikut ini :
Gambar 3.80 Halaman Daftar User
3.5.26 Perancangan Halaman Ubah Data Cara Order
Halaman ini berfungsi melakukan pengeditan pada halaman cara order

di website. Cara order bisa dilihat dari menu tentang kami.
Langkah perancangan halaman ubah data cara order :
2. Tulislah listing code seperti di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Tambah/ Ubah Data <?php include "navigasi_judul.php" ?>
| <?php include "title.php" ?></title>


</head>
<h1>Ubah Data <?php include "navigasi_judul.php"
?></h1>
Home</a></li>
<li><?php include "navigasi_judul.php" ?></li>
<li class="active"><a href="#">Ubah Data <?php include
"navigasi_judul.php" ?></a></li>
</ol>
</section>
<?php include "navigasi_ubah_form.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file dengan nama navigasi.php di folder admin.
Gambar 3.81Halaman Ubah Data Cara Order
3.5.26 Perancangan Halaman Ubah Data Home
Halaman ini berfungsi mengubah data pada halaman home website. Halaman
home merupakan halaman yang pertama kali diakses oleh pembeli ketika
membuka website glia medshop.
Langkah perancangan halaman ubah data home :
Listing code pada halaman ini sama seperti halaman ubah data cara order di file
code bernama navigasi.php folder admin tapi pada listing code navigasi_judul.php
letak idnya berbeda. Berikut ini listing code dari file code navigasi_judul.php :
<?php
if ($_GET['id_nav'] == 1) {
echo "Home";
}
elseif ($_GET['id_nav'] == 2) {
echo "Cara Order";
}
echo "Ketentuan";
}
echo "Kontak";
}
echo "Profil";
}
echo "Katalog Produk";
}
echo "Keranjang Belanja";
}
echo "Resi Pengiriman";
}
echo "Testimoni";
}
echo "Register/ Login";
}
else {
echo "<script>alert('Maaf, data yang Anda cari tidak
ditemukan');location.replace('home.php')</script>";
}
?>
Hasil outputnya sebagai berikut ini :
Gambar 3.82 Halaman Ubah Data Home
3.5.27 Perancangan Halaman Ubah Data Katalog Produk

Halaman ini berfungsi mengubah halaman katalog produk di website. Halaman
katalog berfungsi menampilkan produk dari segi gambar, deskripsi, dan harga
kepada pembeli.
Langkah perancangan halaman ubah data katalog produk :

Listing code halaman ini sama dengan halaman ubah data cara order tapi memiliki
id yang berbeda pada listing code navigasi_judul.php berikut ini listing code
navigasi_judul.php :
echo "Katalog Produk";
}
4 Hasil outputnya sebagai berikut :
Gambar 3.82 Halaman Ubah Data Katalog
4.2.1 Perancangan Halaman Ubah Data Keranjang

Belanja
Halaman ini berfungsi mengedit bagian halaman keranjang belanja
di website. Keranjang belanja merupakan halaman yang memuat
daftar pesanan barang oleh pembeli
Langkah perancangan halaman ubah data keranjang belanja :

Listing code pada halaman ini sama dengan halaman ubah data
cara belanja tapi idnya berbeda pada listing code
navigasi_judul.php. Berikut listing code navigasi_judul.php:
echo "Keranjang Belanja";
}
Hasil outputnya sebagai berikut :

Gambar 3.83Halaman Ubah Data Keranjang Belanja
4.2.2 Perancangan Halaman Ubah Data Ketentuan

Halaman ini berfungsi mengubah bagian halaman ketentuan pada
website dan memuat syarat serta kententuan dalam melakukan
pemesanan barang kepada pembeli.
Langkah perancangan halaman ubah data ketentuan :

Listing code pada halaman ini sama dengan halaman ubah data
cara order tapi idnya berbeda di listing code navigasi_judul.php.
Berikut ini lisiting code navigasi_judul.php :
echo "Ketentuan";
Gambar 3.84 Halaman Ubah Data Ketentuan
4.2.3 Perancangan Halaman Ubah Data Kontak
Halaman ini berfungsi mengubah bagian halaman kontak pada

website. Kontak berfungsi untuk menghubungi customer service
bila pembeli memilki kendala dalam pemesaan produk di website.
Langkah perancangan halaman ubah data kontak :
Listing code sama dengan halaman ubah data cara order tapi
memiliki id berbeda di listing code navigasi_judul.php. Berikut lsiting code
navigasi_judul.php :
echo "Kontak";
}
Gambar 3.85 Halaman Ubah Data Kontak
4.2.4 Perancangan Halaman Ubah Data Profil

Halaman ini berfungsi mengubah bagian profil pada halaman
website. Profil merupakan deskripsi toko kepada pembeli dari
alamat, tanggal berdiri, dan lain-lain.
Listing code sama dengan ubah data cara order tapi memiliki id
berbeda di listing code navigasi_judul.php. Berkikut ini listing
code navigasi_judul.php:
echo "Profil";
}
Gambar 3.86 Halaman Ubah Data Profil
4.2.5 Perancangan Halaman Ubah Data

Register/Login
Halaman ini berfungsi mengubah bagian halaman register/login
pada website. Sebelum melakukan pembelian hal pertama kali
dilakukan pembeli adalah melakukan registrasi untuk menjadi
member. Setelah terdaftar jadi member, pembeli dapat melakukan
login untuk memesan produk.
Langkah perancangan halaman ubah data register/login :
Listing code sama dengan halaman ubah data cara order tapi
memilki id berbeda di listing code navigasi_judul.php. berikut ini
silting code navigasi_judul.php:
echo "Register/ Login";
}
Gambar 3.87 Halaman Ubah Data Register/Logim
3.5.32 Perancangan Halaman Ubah Data Resi
Halaman ini berfungsi mengubah bagian halaman resi pada website.

Resi merupakan sebuah nomor yang diberikan jasa kirim kepada pengirim agar
pengirim dapat memberikan kepada penerima sehingga keduanya bisa memantau
proses pengiriman.
Langkah perancangan halaman ubah data resi :

Listing code halaman ini sama dengan halaman ubah data cara order tapi memiliki
id yang berbeda di halaman navigasi_judul.php. Listing code navigasi_judul.php:
echo "Resi Pengiriman";
}
Hasil outputnya sebagai berikut ini :
Gambar 3.88 Halaman Ubah Data Resi Pengiriman
3.5.33 Perancangan Halaman Ubah Data Testimoni
Halaman ini berfungsi mengubah bagian dari testimoni. Testimoni

merupakan ulasan atau pendapat pembeli dari segi kualitas produk,
pelayanan toko, dan kecepatan pengiriman toko.
Langkah perancangan halaman ubah data testimoni :

Listing codenya sama dengan halaman ubah data cara order tetapi
memiliki id yang berbeda di listing code navigasi_judul.php.
Berikut ini listing code navigasi_judul.php :
echo "Testimoni";
Gambar 3.88 Halaman Data Testimoni
3.5.34 Perancangan Halaman Ubah Password Sendiri

Halaman ini hanya bisa mengubah sandi akun sendiri. Jika
satu admin ingin merubah sandi akunnya maka admin
tersebut bisa mengubah sandi di halaman ini :
Langkah perancangan halaman ubah password sendiri :
1. Klik file pilih new maka akan muncul lembar kerja

baru.
2. Tulislah Listing code seperti di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Ganti Password | <?php include "title.php" ?>
Area | SVD</title>


</head>
<h1>Ubah Password</h1>
<li><a href="index.php"><i class="fa fa-
<li>Profil</li>
href="kegiatan.php">Ubah Password</a></li>
</ol>
</section>
<?php include "ubah_pass_form.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan namah ubah_pass.php di

folder admin.
Gambar 3.89 Halaman Ubah Paassword Sendiri
3.5.35 Perancangan Halaman Ubah Password User Lain

Halaman ini berfungsi mengubah password dari admin lain.
Misalkan administrator 1 bisa mengubah password dari
administrator 2.
Langkah Perancangan Halaman Ubah Password User Lain :
1. Klik file pilih new maka akan muncul lembar kerja baru
2. Tulislah liting code seperti di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Ubah Password User Lain | <?php include


</head>
<h1>Ubah Password User Lain</h1>
<li>Password User Lain</li>
href="ubah_pass_usr.php">Ubah Password User
Lain</a></li>
</ol>
</section>
<?php include "ubah_pass_usr_form.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file code dengan anama ubah_pass_usr.php di
folder admin.
Gambar 3.90 Halaman Ubah Passoword User Lain
3.5. 36 Perancangan Halaman Ubah Data Alamat
Halaman ini berfungsi mengubah bagian halaman alamat pada website. Alamat
berfungsi menunjukkan lokasi toko offline Glia Medshop.
Langkah perancangan halaman ubah data alamat :
<!DOCTYPE html>
<html>
<head>
<title>Tambah/ Ubah Data <?php include "setting_judul.php" ?> | <?php
include "title.php" ?></title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no' name='viewport'>

<link rel="shortcut icon" href="../images/InternationalRedCross_Flag1.ico" />

</head>
<h1>Ubah Data <?php include "setting_judul.php" ?></h1>
<li><a href="home.php"><i class="fa fa-dashboard"></i> Home</a></li>
<li><?php include "setting_judul.php" ?></li>
<li class="active"><a href="#">Ubah Data <?php include
"setting_judul.php" ?></a></li>
</ol>
</section>
<?php include "setting_ubah_form.php" ?>
</section>
</div>
</div>
</body>
</html>
3. Simpan file dengan nama setting.php di folder admin
4. Hasil Outputnya sebagai berikut :
Gambar 3.91 Halaman Ubah Data Alamat
3.5.37 Perancangan Halaman Ubah Data Author

Halaman ini berfungsi mengubah bagian dari author
pada halaman website. Author merupakan nama
dari pembuat website dan letak nama author berada
di footer.
Langkah perancangan halaman ubah data author :

Listing code halaman ini sama dengan halaman
ubah data alamat tetapi memiliki id setting yang
berbeda di listing code setting_judul.php ,
berikut listing code setting_judul.php :
<?php
if ($_GET['id_setting'] == 1) {echo "Nama
Toko";}
elseif ($_GET['id_setting'] == 2) {echo
"Alamat";}
"Bank";}
"Author";}
"Footer";}
else{echo "<script>alert('Maaf, data yang Anda
cari tidak
ditemukan');location.replace('home.php')</script
>";}
?>
Gambar 3.92 Halaman Data Author
3.5.38 Perancangan Halaman Ubah Data Bank

Halaman ini berfungsi mengubah bagian halaman bank pada website. Halaman
bank pada website berisi no rekening yang dapat ditransfer untuk pembayaran
pesanan produk oleh pembeli.
Langkah pembuatan halaman ubah data bank :
Listing code halaman ini saman dengan halaman ubah data alamat tetapi memiliki
id setting yang berbeda pada listing code setting_judul.php. Berikut listing code
setting_judul.php:
elseif ($_GET['id_setting'] == 3) {echo "Bank";}
Gambar 3.93 Halaman Ubah Data Bank
3.5.39 Perancangan Halaman Ubah Data Footer

Halaman ini berfungsi mengedit bagian footer pada
halaman website. Footer merupakan bagian bawah
pada halaman website.
Langkah perancangan halaman ubah data footer :

Listing code pada halaman ini sama dengan
halaman ubah data alamat tetapi memiliki id yang
berbeda di listing code setting_judul.php. Berikut
listing code setting_judul.php :
elseif ($_GET['id_setting'] == 5) {echo "Footer";}
Gambar 3.94 Halaman Ubah Data Footer
3.5.40 Perancangan Halaman Ubah Data Nama Toko

Halaman ini berfungsi mengubah nama toko di
website. Nama toko biasanya muncul dibagian
header dari website misalkan nama toko “Glia
Medshop”.
Langkah perancangan halaman ubah data nama

toko:
Listing code halaman ini sama dengan halaman
ubah data alamat tetapi memilki id setting yang
berbeda di listing code setting_judul.php. Berikut
listing code setting_judul.php:
if ($_GET['id_setting'] == 1) {echo "Nama Toko";}
Gambar 3.95 Halaman Ubah Data Nama Toko
3.5.41 Perancangan Halaman Log Out

Halaman ini berfungsi mengeluarkan akun admin sehingga akun admin lainnya
bisa melakukan log in.
Langkah perancangan halaman log ut :
<?php session_start();
session_destroy();
echo '<script language="javascript">alert("Anda berhasil Log Out");
document.location="index.php";</script>';
?>
3. Maka hasil outputnya sebagai berikut :
Gambar 3.96 Halaman Log Out

3.6 Penghostingan Website
Pada subbab ini akan di terangkan bagaimana melakukan hosting pada website.
Hosting yang digunakan adalah hosting gratis https://www.000webhost.com/ .
Berikut ini langkah-langkah melakukan hosting pada website :
1. Lakukan login/registrasi di https://www.000webhost.com/
Gambar 3.97Halaman Registrasi akun
Gambar 3.98 Halaman Log in akun.
2. Setelah login , klik menu buat website

Gambar 3.99 Buat Website
3. Setelah masuk Menu Buat website pilih unggah website sendiri
Gambar 3.10 Unggah Website

4. Upload File . Sebelum file diupload kompres file menjadi zip agar mudah
diupload.
Gambar 3.101 Pilihan Upload
5. Setelah diklik menu upload muncul menu untuk mengupload file seperti
dibawah ini :
Gambar 3.102 Menu Upload

6. Klik select file , pilih file toko_online.zip
7. Klik upload maka file akan terupload dan menunjukkan loading upload.
8. Jika sudah berhasil di upload maka klik file tersebut, beri centang semua
isi file klik move. Pastikan destination file ke public_html agar ketika di
jalankan di browser halaman website muncul.
9. Setelah isi file di klik move maka file akan berpindah sesuai
destinationnya . Destination yang di isi adalah public_html maka file akan
berpindah ke public_html.
10. Setelah melakukan upload file maka langkah selanjutnya adalah

mengupload database. Klik kelola database maka akan muncul halaman
seperti dibawah ini :
11. Klik database baru maka akan muncul form seperti di bawah ini :
12. Masukkan nama database, username database serta password. Untuk nama
database disesuaikan dengan nama database localhost dan username data
base disamakan dengan nama database, password disamakan dengan
password log in akun. Setelah memasukan nama database, username
database, password maka akan muncul loading membuat database baru
seperti gambar di bawah ini :
13. Jika sudah berhasil membuat database klik kelola pilih PhpMyAdmin
14. Setelah pilih PhpMyAdmin, lakukan log in database. Masukkan username
sesuai dengan username di DB User dan password saat membuat database
15. Setelah login akan masuk ke halaman PhpMyAdmin. Klik nama database
yang sesuai dengan nama di DB User yaitu id6755563_toko_online, pilih
import.
16. Setelah klik import akan muncul halaman seperti di bawah ini dan dapat
melakukan upload file.
17. Pilih file database dengan nama toko_online.sql, klik open.
18. Jika file database sudah berhasil diupload maka akan keluar keterangan
dengan centang hijau seperti gambar di bawah ini :
19. Setelah mengupload database, lakukan setting koneksi agar website dapat
di jalankan secara online. Untuk melakukan setting koneksi buka file
config.php, ubah username, password, dbname sesuai dengan di halaman

kelola database.
20. Jika sudah melakukan setting koneksi maka jalankan website di web
browser :
3.7 Uji Coba Website
Setelah melakukan hosting pada website langkah selanjutnya adalah

melakukan uji coba website melalui web browser. Web browser yang
digunakan adalah Mozilla Firefox, Google Chrome, dan UC Browser,
berikut ini langkah uji coba website :
3.7.1 Uji Coba Melalui Mozilla Firefox
1. Buka web browser Mozilla Firefox dengan cara klik icon windows,
pilih program, pilih Mozilla firefox atau klik icon Mozilla firefox di
desktop.
2. Setelah mengklik icon Mozilla firefox maka akan muncul halaman
Mozilla firefox :
3. Masukkan url https://gliamedshop.000webhostapp.com/ di alamat

addres Mozilla firefox lalu klik go.
4. Maka akan muncul halaman utama atau home situs web glia medshop
pada browser Mozilla.
5. Jika mengkilk katalog akan menampilkan produk yang di jual website

glia medshop. Pada halaman ini member dapat mengkilk beli untuk
melakukan pemesanan dan detail untuk melihat deskirpsi produk.
6. Jika mengklik keranjang belanja maka akan tampil halaman keranjang

belanja. Halaman ini akan menampilkan daftar produk yang dipesan,
bila belum ada pesanan maka ada keterangan “Keranjang Belanja
Anda Masih Kosong”.
7. Jika mengklik menu resi maka akan muncul halaman resi. Halaman ini
akan menampilkan no resi yang sudah diinput agar bisa dilihat oleh
pembeli.
8. Jika mengkilik menu testimoni maka akan muncul halaman resi.
Halaman ini akan menampilkan testimoni dari member yang sudah
pernah membeli produk dari glia medshop.
9. Jika mengklik menu konfirmasi maka akan muncul halaman

konfirmasi dan berisi form untuk mengirim konfirmasi. Konfirmasi
yang dikirim adalah konfrimasi pembayaran kepada admin.
10. Jika mengklik menu tentang kami ada pilihan cara order, ketentuan
belanja, kontak, dan profil. Pertama mengklik menu cara order dan
muncul halaman cara order. Cara order adalah petunjuk bagaimana
cara melakukan order.
11. Setelah mencoba menu cara order, kemudian klik menu ketentuan
belanja, maka keluar halaman ketentuan belanja. Halaman ini
bersisi syarat dan ketentuan dalam melakukan pembelanjaan di gila
medhsop.
12. Setelah mencoba menu ketentuan, kemudian klik menu kontak
maka keluar halaman kontak. Pada halaman ini berisi kontak
customer service berupa nomor whats app dan pin bb messanger.
Kontak diperlukan bila member mengalami kendala dalam
pemesanan produk.
13. Setelah mencoba menu kontak, kemudian klik menu profil maka
akan keluar halaman profil. Pada halaman ini berisi tentang
informasi toko glia medshop dari tanggal pendiriannya, alamat, dan
lain-lain.
14. Setelah mencoba menu tentang kami maka klik menu register/log
in. Halaman ini berfungsi melakukan registrasi bila customer
belum terdaftar sebagai member dan log in bila customer sudah
terdaftar jadi member.
3.7.2 Uji Coba Melalui Google Chrome
1. Buka web browser google chrome dengan cara klik ikon windows
klik program, pilih Google Chrome.
2.Setelah mengklik icon Google Chrome maka akan muncul
halaman Google Chrome :
3.Masukkan url https://gliamedshop.000webhostapp.com/ di

alamat addres di Google Chrome kemudian klik go.
pada browser Google Chrome.
5. Jika mengkilk katalog akan menampilkan produk yang di jual website glia
medshop. Pada halaman ini member dapat mengkilk beli untuk melakukan
pemesanan dan detail untuk melihat deskirpsi produk

belanja. Halaman ini akan menampilkan daftar produk yang dipesan, bila
belum ada pesanan maka ada keterangan “Keranjang Belanja Anda Masih
Kosong”.
pembeli.
8. Jika mengkilik menu testimoni maka akan muncul halaman resi. Halaman
ini akan menampilkan testimoni dari member yang sudah pernah membeli
produk dari glia medshop.
9. Jika mengklik menu konfirmasi maka akan muncul halaman konfirmasi

dan berisi form untuk mengirim konfirmasi. Konfirmasi yang dikirim
adalah konfrimasi pembayaran kepada admin.
belanja, kontak, dan profil. Pertama mengklik menu cara order dan muncul
halaman cara order. Cara order adalah petunjuk bagaimana cara
melakukan order.
11. Setelah mencoba menu cara order, kemudian klik menu ketentuan belanja,
maka keluar halaman ketentuan belanja. Halaman ini bersisi syarat dan
ketentuan dalam melakukan pembelanjaan di gila medhsop
12. Setelah mencoba menu ketentuan, kemudian klik menu kontak maka
keluar halaman kontak. Pada halaman ini berisi kontak customer service
berupa nomor whats app dan pin bb messanger. Kontak diperlukan bila
member mengalami kendala dalam pemesanan produk.
13. Setelah mencoba menu kontak, kemudian klik menu profil maka akan
keluar halaman profil. Pada halaman ini berisi tentang informasi toko glia
medshop dari tanggal pendiriannya, alamat, dan lain-lain.
14. Setelah mencoba menu tentang kami maka klik menu register/log in.
Halaman ini berfungsi melakukan registrasi bila customer belum terdaftar
sebagai member dan log in bila customer sudah terdaftar jadi member.
3.7.3 Uji Coba Melalui UC Browser
1. Buka web browser UC Browser dengan cara klik ikon windows klik
program, pilih UC Browser atau klik icon UC Browser di desktop.
2. Setelah mengklik icon UC Browser maka akan muncul halaman UC
Broswer :
3. Masukkan url https://gliamedshop.000webhostapp.com/ di alamat addres

di UC Broswer kemudian klik go.
pada browser UC Broswer.
5. Jika mengkilk katalog akan menampilkan produk yang di jual website

glia medshop. Pada halaman ini member dapat mengkilk beli untuk
melakukan pemesanan dan detail untuk melihat deskirpsi produk
belanja. Halaman ini akan menampilkan daftar produk yang dipesan, bila
belum ada pesanan maka ada keterangan “Keranjang Belanja Anda
Masih Kosong”.
pembeli.
8. Jika mengkilik menu testimoni maka akan muncul halaman resi.
Halaman ini akan menampilkan testimoni dari member yang sudah
pernah membeli produk dari glia medshop.
9. Jika mengklik menu konfirmasi maka akan muncul halaman konfirmasi

dan berisi form untuk mengirim konfirmasi. Konfirmasi yang dikirim
adalah konfrimasi pembayaran kepada admin.
belanja, kontak, dan profil. Pertama mengklik menu cara order dan
muncul halaman cara order. Cara order adalah petunjuk bagaimana cara
melakukan order.
11. Setelah mencoba menu cara order, kemudian klik menu ketentuan
belanja, maka keluar halaman ketentuan belanja. Halaman ini bersisi
syarat dan ketentuan dalam melakukan pembelanjaan di gila medhsop.
12. Setelah mencoba menu ketentuan, kemudian klik menu kontak maka
keluar halaman kontak. Pada halaman ini berisi kontak customer service
berupa nomor whats app dan pin bb messanger. Kontak diperlukan bila
member mengalami kendala dalam pemesanan produk.
13. Setelah mencoba menu kontak, kemudian klik menu profil maka akan
keluar halaman profil. Pada halaman ini berisi tentang informasi toko
glia medshop dari tanggal pendiriannya, alamat, dan lain-lain.
14. Setelah mencoba menu tentang kami maka klik menu register/log in.
Halaman ini berfungsi melakukan registrasi bila customer belum
terdaftar sebagai member dan log in bila customer sudah terdaftar jadi
member
4.Kesimpulan dan Saran
4.1 Kesimpulan
Dari uraian tentang pembuatan Web Toko Alat Kesehatan Glia
Medshop berbasis yang telah dibahas pada bab sebelumnya, penulis
dapat memberikan kesimpulan sebagai berikut :
1. Sebuah website sederhana penjualan alat kesehatan online dapat

dibangun dengan menggunakan program aplikasi Notepad ++ dan
MySQL.
2. Dengan menggunakan fasilitas internet , diharapkan informasi

lebih mudah dan cepat tersampaikan kepada masyarakat umum.
3. Dengan adanya penjualan alat kesehatan online ini memberikan

kemudahan para pelanggan dalam memesan tanpa harus dating
langsung ke toko.
4. Penjualan alat kesehatan online berbasis web lebih mudah dalam

pengelolaannya seperti update data.
42. Saran
Saran-saran yang penulis kemukakan kaitannya dengan kesimpulan dalam

pembuatan website penjualanan alat kesehatan adalah sebagai berikut :
1. Web masih menggunakan system pembayaran via rekening dan perlu
ditambahkan fitur pembayaran online bisa melalui ebanking.
2. Jasa kirim yang digunakan website hanya memiliki satu saja yaitu jne,
sehrausnya website menggunakan jasa kirim tidak hanya satu bisa dua
atau lebih misalnya J&T, TIKI, Ninja X-press,dll.
Lampiran Listing Code
Index.php
<?php session_start(); // Memulai session
include 'config.php'; // Panggil koneksi ke database
include 'fungsi/base_url.php'; // Panggil fungsi base_url
include 'fungsi/cek_session_public.php'; // Panggil fungsi cek session public
include 'fungsi/navigasi.php'; // Panggil data navigasi
include 'fungsi/setting.php'; // Panggil data setting
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $home['judul'] ?> | <?php echo $namatoko ?></title>
<meta name="description" content="<?php echo $home['seo_deskripsi'] ?>"/>
<meta name="keywords" content="<?php echo $home['seo_keywords'] ?>"/>
<meta name="author" content="<?php echo $author ?>"/>
rel="stylesheet">
<link href="<?php echo $base_url ?>template/css/custom.css"
rel="stylesheet">

</head>
<body>
<?php include 'slider.php'; ?>
<hr/>
<div class="row">
<div class="col-lg-12">
<h3>PRODUK TERLARIS</h3>
</div>
</div>
<?php include 'bseller_new.php'; ?>
<hr/>
<div class="row">
<div class="col-lg-12">
<h3>PRODUK TERBARU</h3>
</div>
</div>
<?php include 'produk_new.php'; ?>
<hr/>
</div>
</body>
</html>
Katalog.php
include 'fungsi/cek_session_public.php'; // Panggil fungsi cek session public
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $katalog['judul'] ?> | <?php echo $namatoko ?></title>
<meta name="description" content="<?php echo $katalog['seo_deskripsi'] ?>"
/>
<meta name="keywords" content="<?php echo $katalog['seo_keywords'] ?>"
/>
rel="stylesheet">
rel="stylesheet">

</head>
<body>
<div class="row">
<h3><?php echo $katalog['judul']; ?></h3>
<hr/>
</div>
<div class="row text-center">
<?php include 'katalog_data.php'; ?>
</div>
</div>
</div>
</div>
</div>
<hr/>
</div>
</body>
</html>
Keranjang.php
include 'fungsi/cek_session_public.php'; // Panggil fungsi cek session
public
include 'fungsi/tgl_indo.php'; // Panggil fungsi tanggal indonesia
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $keranjang['judul'] ?> | <?php echo $namatoko
?></title>
scale=1">
$keranjang['seo_deskripsi'] ?>" />
$keranjang['seo_keywords'] ?>" />
rel="stylesheet">
rel="stylesheet">
<link href="<?php echo $base_url ?>template/css/nomoretable.css"
rel="stylesheet">

icon"/>
</head>
<body>
<div class="row">
<h3><?php echo $keranjang['judul']; ?></h3>
<hr/>
</div>
<?php include 'keranjang_data.php'; ?>
</div>
</div>
</div>
</div>
<hr/>
</div>

<script>
{
return false;
return true;
}
</script>
</body>
</html>
Resi.php
public
include 'fungsi/tgl_indo.php'; // Panggil fungsi merubah tanggal
menjadi format seperti 2 Mei 2015
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $resi['judul'] ?> | <?php echo $namatoko ?></title>
scale=1">
<meta name="description" content="<?php echo $resi['seo_deskripsi']
?>" />
<meta name="keywords" content="<?php echo $resi['seo_keywords']
?>" />
rel="stylesheet">
rel="stylesheet">

icon"/>
</head>
<body>
<div class="row">
<h3><?php echo $resi['judul']; ?></h3>
<hr/>
</div>
<?php include 'resi_data.php'; ?>
</div>
</div>
</div>
</div>
</div>
<hr/>
</div>
</body>
</html>
Testimoni.php
public
include 'fungsi/tgl_indo.php'; // Panggil fungsi tanggal indonesia
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $testimoni['judul'] ?> | <?php echo $namatoko
?></title>
scale=1">
$testimoni['seo_deskripsi'] ?>" />
$testimoni['seo_keywords'] ?>" />
rel="stylesheet">
rel="stylesheet">

icon"/>
</head>
<body>
<div class="row">
<h3><?php echo $testimoni['judul']; ?></h3>
<hr/>
</div>
<h4>Tulis Testimoni</h4>
<hr/>
<?php include "testimoni_form.php"; ?>
<hr/>
<h4>Kumpulan Testimoni</h4>
<hr/>
<?php include "testimoni_data.php"; ?>
</div>
</div>
</div>
</div>
</div>
<hr/>
</div>
</body>
</html>
Konfirmasi.php
include 'fungsi/setting.php'; // Panggil data Nama Toko Online
public
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Konfirmasi Pembayaran | <?php echo $namatoko ?></title>
scale=1">
<meta name="description" content="Konfirmasi Pembayaran" />
<meta name="keywords" content="konfirmasi pembayaran" />
rel="stylesheet">
rel="stylesheet">


icon"/>
</head>
<body>
<div class="row">
<h3>Konfirmasi Pembayaran Anda</h3>
<hr/>
</div>
<form method="post" id="form-register"
action="konfirmasi_kirim.php">
<div class="row">
<div class="box box-primary">
<div class="box-body">
<div class="row">
<div class="col-xs-3"><label>No. Invoice</label>
<input class="form-control" name="no_invoice"
type="text" id="no_invoice" placeholder="Isikan angka saja"
onkeypress='return isNumberKey(event)' required/>
</div>
<div class="col-xs-5"><label>Nama Pengirim</label>
<input class="form-control" name="nama_pengirim"
type="text" id="nama_pengirim" required/>
</div>
<div class="col-xs-4"><label>Email</label>
<input class="form-control" name="email" type="text"
id="email"/>
</div>
</div><br/>
<div class="row">
<div class="col-xs-3"><label>Transfer Ke</label>
<input class="form-control" name="transfer_ke"
type="text" id="transfer_ke" placeholder="" required/>
</div>
<div class="col-xs-5"><label>Jumlah Transfer</label>
<input class="form-control" name="jml_transfer"
type="text" id="jml_transfer" placeholder="Isikan angka saja"
onkeypress='return isNumberKey(event)' required/>
</div>
<div class="col-xs-4"><label>Tanggal Transfer</label>
<input class="form-control" name="tgl_transfer"
type="text" id="tgl_transfer"/>
</div>
</div><br/>
<div class="form-group"><label>Catatan</label>
<textarea class="form-control" name="catatan"
id="catatan" placeholder="Tidak wajib diisi"></textarea>
</div>
</div>
<div class="box-footer">
<button type="submit" name="submit" class="btn btn-
success">Submit</button>
<button type="reset" name="reset" class="btn btn-
danger">Reset</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<hr/>
</div>

{
return false;
return true;
}
</script>
</body>
</html>
Navbar.php
nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="<?php echo $base_url ?>"><?php echo
$namatoko ?></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-

1">
<ul class="nav navbar-nav">
<span class='glyphicon glyphicon-search' aria-
hidden='true'></span> Cari<span class="caret"></span>
</a>
<li>
<form method="POST" class="navbar-form navbar-left"
action="<?php echo $base_url ?>search">
<div class="form-group">
<input name="searchterm" type="text" class="form-control"
placeholder="Cari Barang...">
</div>
</form>
</li>
</ul>
</li>
<li>
<a href='<?php echo $base_url ?>index.html'>
<span class='glyphicon glyphicon-home' aria-
hidden='true'></span> Home
</a>
</li>
<li>
<a href='<?php echo $base_url ?>katalog.html'>
<span class='glyphicon glyphicon-book' aria-
hidden='true'></span> Katalog
</a>
</li>
<li>
<a href='<?php echo $base_url ?>keranjang.html'>
hidden='true'></span> Keranjang
</a>
</li>
<li>
<a href='<?php echo $base_url ?>resi.html'>
<span class='glyphicon glyphicon-plane' aria-
hidden='true'></span> Resi
</a>
</li>
<li>
<a href='<?php echo $base_url ?>testimoni.html'>
<span class='glyphicon glyphicon-comment' aria-
hidden='true'></span> Testimoni
</a>
</li>
<li>
<a href='<?php echo $base_url ?>konfirmasi.html'>
<span class='glyphicon glyphicon-bullhorn' aria-
hidden='true'></span> Konfirmasi
</a>
</li>
<span class='glyphicon glyphicon-blackboard' aria-
hidden='true'></span> Tentang Kami<span class="caret"></span>
</a>
<li>
<a href='<?php echo $base_url ?>page/cara_order.html'>
hidden='true'></span> Cara Order
</a>
</li>
<li>
<a href='<?php echo $base_url ?>page/ketentuan.html'>
<span class='glyphicon glyphicon-flag' aria-
hidden='true'></span> Ketentuan Belanja
</a>
</li>
<li>
<a href='<?php echo $base_url ?>page/kontak.html'>
<span class='glyphicon glyphicon-phone' aria-
hidden='true'></span> Kontak
</a>
</li>
<li>
<a href='<?php echo $base_url ?>page/profil.html'>
<span class='glyphicon glyphicon-user' aria-
hidden='true'></span> Profil
</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<?php
{
echo "
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown'
role='button' aria-haspopup='true' aria-expanded='false'>
<span class='glyphicon glyphicon-user' aria-hidden='true'></span>
Hai, ".$sesen_username." <span class='caret'></span>
</a>
<ul class='dropdown-menu'>
<li>
<a href='$base_url"."logout'>
<span class='glyphicon glyphicon-log-out' aria-
hidden='true'></span> Logout
</a>
</li>
</ul>
</li>";
}
else
{
echo "<li><a href='$base_url"."register.html'><span
class='glyphicon glyphicon-user' aria-hidden='true'></span> Register/
Login</a></li>";
}
?>
</ul>
</div>
</div>
</nav>
Register.php
include 'fungsi/setting.php'; // Panggil data author
// /Query atau Pemanggilan data dari database navigasi berdasarkan id_nav

9 atau halaman testimoni
$query_navigasi = "SELECT judul,seo_deskripsi,seo_keywords,isi
FROM navigasi WHERE id_nav = 10 ";
$hasil_navigasi = mysqli_query($conn,$query_navigasi);
$data_navigasi = mysqli_fetch_array($hasil_navigasi);
{
// Jika user telah login dan ingin masuk ke halaman ini kembali, maka
akan diarahkan ke halaman index/ home
die ("<script>alert('Anda telah login');
location.replace('$base_url')</script>");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $data_navigasi['judul'] ?> | <?php echo $namatoko
?></title>
scale=1">
$data_navigasi['seo_deskripsi'] ?>" />
$data_navigasi['seo_keywords'] ?>" />
rel="stylesheet">
rel="stylesheet">

<script src="<?php echo $base_url ?>template/js/jquery-
1.7.2.min.js"></script>
?>template/js/jquery.scrolltotop.js"></script>
?>template/js/jquery.validate.js"></script>

icon"/>
</head>
<body>

<div class="row">
<h3><?php echo $data_navigasi['judul']; ?></h3>
<hr/>
</div>
<h3 align="center">Login</h3>
<hr/>
<?php include "login_form.php" ?>
<hr/>
<h3 align="center">Register</h3>
<hr/>
<?php include "register_form.php" ?>
</div>
</div>
</div>
</div>
<hr/>


</div>


var htmlobjek;
$(document).ready(function(){
//apabila terjadi event onchange terhadap object <select id=propinsi>
$("#prov").change(function(){
var prov = $("#prov").val();
$.ajax({
url: "fungsi/ambilkota.php",
data: "prov="+prov,
cache: false,
//jika data sukses diambil dari server kita tampilkan
//di <select id=kota>
$("#kot").html(msg);
}
});
});
$("#kot").change(function(){
var kot = $("#kot").val();
$.ajax({
url: "fungsi/ambilkecamatan.php",
data: "kot="+kot,
cache: false,
$("#kec").html(msg);
}
});
});
});
$(document).ready(function()
{
$('#form-register').validate(
{
rules:
{
nama:
{
minlength:5
},
username:
{
minlength:5
},
email:
{
email: true
},
password:
{
required: true,
minlength:5
},
telp:
{
digits: true,
minlength:5
},
},
messages:
{
nama:
{
required: "* Nama harus diisi",
minlength: "* Nama harus diisi minimal 5 huruf"
},
username:
{
required: "* Username harus diisi",
minlength: "* Username harus diisi minimal 5 huruf"
},
email:
{
required: "* E-mail harus diisi",
email: "* Format email tidak valid"
},
password:
{
required: "* Password harus diisi",
minlength: "* Password harus diisi minimal 5 huruf"
},
telp:
{
required: "* Nomor telepon harus diisi"
},
alamat:
{
required: "* Alamat harus diisi"
},
kec:
{
required: "* Kecamatan harus diisi"
},
prov:
{
required: "* Provinsi harus diisi"
},
kota:
{
required: "* Kota harus diisi"
},
},
});
$('#form-login').validate(
{
rules:
{
username:
{
minlength: 5
},
pwd:
{
required: true,
minlength:5,
},
},
messages:
{
username:
{
required: "* Username harus diisi",
minlength: "* Username harus diisi minimal 5 huruf"
},
pwd:
{
required: "* Password harus diisi",
minlength: "* Password harus diisi minimal 5 huruf"
},
},
});
});
</script>
<style type="text/css">
label.error {
color: red;
padding-left: .5em;
font-weight: normal;
}
</style>
</body>
</html>
Home.php
?php session_start();
include '../config.php'; // Panggil koneksi ke database
include '../fungsi/cek_login.php'; // Panggil fungsi cek sudah login/belum
include '../fungsi/cek_session.php'; // Panggil fungsi cek session
include '../fungsi/setting.php'; // Panggil data setting
?>
<!DOCTYPE html>
<html>
<head>
<title>Dashboard | <?php include "title.php"; ?></title>

<link href="template/bootstrap/css/bootstrap.min.css" rel="stylesheet"
type="text/css" />

<link href="template/font-awesome4.3.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css" />

<link href="template/dist/css/AdminLTE.min.css" rel="stylesheet"
type="text/css" />
<link href="template/dist/css/skins/skin-blue.min.css" rel="stylesheet"
type="text/css" />

<link href="../images/InternationalRedCross_Flag1.ico" rel="shortcut
icon" />
</head>
<h1>Dashboard</h1>
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Dashboard</li>
</ol>
</section>
<section class='content'>
<div class='row'>
<?php include 'record.php'; ?>
</div>
</section>
</div>
</div>
</body>
</html>
Bseller_add.php
include '../fungsi/cek_login.php'; // Panggil fungsi cek sudah
login/belum
include '../fungsi/cek_aksi_tambah.php'; // Panggil fungsi boleh tambah
data atau tidak
?>
<!DOCTYPE html>
<html>
<head>
<title>Tambah Best Seller Baru | <?php include "title.php" ?></title>


</head>
<h1>Form Entry Best Seller Baru</h1>
Home</a></li>
<li class="active"><a href="product_add.php">Entry Best Seller
Baru</a></li>
</ol>
</section>
<?php include "bseller_add_form.php" ?>
</section>
</div>
</div>
</body>
</html>
Kategori_add.php
login/belum
data atau tidak
?>
<!DOCTYPE html>
<html>
<head>
<title>Tambah Kategori Baru | <?php include "title.php" ?></title>


</head>
<h1>Form Entry Kategori Baru</h1>
Home</a></li>
<li>Kategori</li>
<li class="active"><a href="kategori_add.php">Entry Kategori
Baru</a></li>
</ol>
</section>
<?php include "kategori_add_form.php" ?>
</section>
</div>
</div>
</body>
</html>
Pesanan.php
login/belum
include '../fungsi/tgl_indo.php'; // Panggil fungsi merubah tanggal
menjadi format seperti 2 Mei 2015
?>
<!DOCTYPE html>
<html>
<head>
<title>Pesanan Barang Baru | <?php include "title.php" ?></title>


<script src="template/plugins/datatables/dataTables.bootstrap.min.js"
$(function () {
"bPaginate": true,
"bFilter": false,
"bSort": true,
"bInfo": true,
});
});
</script>
</head>
<h1>Daftar Pesanan Barang</h1>
Home</a></li>
<li class="active"><a href="pesanan.php">Daftar Pesanan
Barang</a></li>
</ol>
</section>
<?php include "pesanan_data.php" ?>
</section>
</div>
</div>
</body>
</html>
Produk_add.php
login/belum
data atau tidak
?>
<!DOCTYPE html>
<html>
<head>
<title>Tambah Produk Baru | <?php include "title.php" ?></title>


function hitung() {
var a = $("#a").val();
var b = $("#b").val();
c = a * b/100; //Persentase: a x b dibagi 100%
$("#c").val(c);
d = b - c; //Harga Setelah Diskon: Harga Awal (b) - Harga Diskon (c)
$("#d").val(d);
}
$(function() {
$("img#imgLoad").show();
$.ajax({
type: "POST",
dataType: "html",
if(msg == ''){
$("select#cmbsubkat").html('<option value="">--Pilih
Kategori Terlebih Dahulu--</option>');
}else{
$("select#cmbsubkat").html(msg);
}
$("img#imgLoad").hide();
getAjaxAlamat();
}
});
});
$("img#imgLoadMerk").show();
$.ajax({
type: "POST",
dataType: "html",
if(msg == ''){
$("select#cmbsupersubkat").html('<option value="">--Belum ada
data--</option>');
}else{
$("select#cmbsupersubkat").html(msg);
}
$("img#imgLoadMerk").hide();
}
});
}
});
</script>
</head>
<h1>Form Entry Produk Baru</h1>
Home</a></li>
<li>Produk</li>
<li class="active"><a href="produk_add.php">Entry Produk
Baru</a></li>
</ol>
</section>
<?php include "produk_add_form.php" ?>
</section>
</div>
</div>
</body>
</html>
Resi_add.php
login/belum
data atau tidak
?>
<!DOCTYPE html>
<html>
<head>
<title>Tambah Resi Baru | <?php include "title.php" ?></title>


<link href="template/plugins/datepicker/css/bootstrap-datepicker.css"
rel="stylesheet">
<script src="template/plugins/datepicker/js/jquery.js"></script>
<script src="template/plugins/datepicker/js/bootstrap-
datepicker.js"></script>
$(function()
{
$('#tgl').datepicker({autoclose: true,todayHighlight: true,format: 'yyyy-
mm-dd'})
});
</script>
</head>
<h1>Form Entry Resi Baru</h1>
<li><?php echo "<a href='home.php'>" ?><i class="fa fa-
<li>Resi</li>
<li class="active"><a href="resi_add.php">Entry Resi
Baru</a></li>
</ol>
</section>
<?php include "resi_add_form.php" ?>
</section>
</div>
</div>
</body>
</html>
User_add.php
login/belum
data atau tidak
include '../fungsi/cek_hal_superadmin.php'; // Panggil fungsi hanya
superadmin yang boleh melakukan aksi
?>
<!DOCTYPE html>
<html>
<head>
<title>Tambah User Baru | <?php include "title.php" ?></title>


</head>
<h1>Form Entry User Baru</h1>
Home</a></li>
<li>User</li>
<li class="active"><a href="user_add.php">Entry User
Baru</a></li>
</ol>
</section>
<?php include "user_add_form.php" ?>
</section>
</div>
</div>
</body>
</html>
Logut.php
session_destroy();
echo '<script language="javascript">alert("Anda berhasil Log Out");
document.location="index.php";</script>';
?>
Lampiran Output Tampilan Website
Daftar Pustaka
Alexander F. K. Sibero,2011,Kitab Suci Web Programing, MediaKom,

Yogyakarta.
Kadir, Abdul. 2010. Mudah Mempelajari Database MySQL. Yogyakarta :
Penerbit ANDI.
Tim Wahana Komputer. 2014.Sistem Informasi Penjualanan Online Untuk
Tugas Ahkir. Yogyakarta: Penerbit ANDI.
Fadjar Efendy Rasjid, S.Kom., Bahasa Pemrogramman Populer PHP, URL
: http://www.ubaya.ac.id/2014/content/articles_detail/144/Bahasa-
Pemrograman-populer-PHP.html
Muhammad Zakaria, Pengertian HTML dan Fungsinya yang Perlu Anda
Ketahui Sebagai Pengguna Internet, URL :
https://www.nesabamedia.com/pengertian-dan-fungsi-html/
Litalia, Pengertian Internet Lengkap Beserta Sejarah, Fungsi dan Manfaat
Internet Yang Perlu Kamu Ketahui, URL :
https://www.jurnalponsel.com/pengertian-internet/
Pahmi Ritonga, Jenis – Jenis Struktur Navigasi Dalam Website, URL :
https://bangpahmi.com/jenis-jenis-struktur-navigasi-dalam-website/

GLMED-WEBSITE

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

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

GLMED-WEBSITE

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIVERSITAS GUNADARMA

DIREKTORAT PROGRAM DIPLOMA TEKNOLOGI INFORMASI

PEMBUATAN WEBSITE TOKO ALAT KESEHATAN GLIA

Diajukan Guna Memperoleh Gelar Ahli Madya

Saya yang bertanda tangan di bawah ini,

Nama : PRIMANTHA EVELINE

Nama : PRIMANTHA EVELINE

Pembimbing Kepala Bagian Sidang

(Rogayah, ST, MMSI) (Dr Edi Sukirman SSi, MM)

Kaprodi Manajemen Informatika

( Dr. Lintang Yuniar Bannowosari, SKom,. MSc)

Penyusunan karya tulis ilmiah ini diajukan sebagai syarat menyelesaikan

1.1 Latar Belakang

1.2 Batasan Masalah

Pembelian barang dilakukan dengan memesan barang melalui web lalu

1.3 Tujuan Penulisan

1.4 Metode Penelitian

Penulisan ilmiah ini melalui proses metode penelitian, diantaranya:

Studi Pustaka, penulis memanfaatkan literatur-literatur baik dari buku, informasi

Adapun perangkat lunak yang penulis gunakan dalam membuat penulisan

Tahap implementasi merupakan tahap uji coba pada website dengan

1.5 Sistematika Penulisan

2.2.1 Sejarah Internet

2.2.2 World Wide Web (WWW)

2.1.2 Faktor Pendukung E-commerce

Faktor Pendukung E-Commerce

1. Cakupan yang luas

1. Keuntungan yang diperoleh konsumen adalah melakukan pencarian barang,

2.8.2 Kelebihan Dan Kekurangan MYSQL

3. Reability atau dapat dipercaya.

5. Mudah untuk di download dan di install

6. Mudah untuk dipindahkan dari satu sistem operasi ke sistem operasi.

7. Memiliki banyak sekali tipe data

Namun dibalik banyak sekali keunggulannya tentu saja terdapat beberpa

1. Kurang mendukung pemrogaman visual basic ataupun desktop

2. Keterbatasan Bahasa Pemrogaman yang di support

Gambar 2.1 Gambar halaman phpMyAdmin

Karyawan Dijatah THR

Gambar 2.2 Bentuk Relasi One to One

2. One-to-Many (atau Many-to-One)

Guru Mengajar Siswa

Gambar 2.3 Bentuk Relasi Many to One

Mahasiswa Belajar Mata Kuliah

Gambar 2.4 Bentuk Relasi Many to Many

2.14.1. Struktur Navigasi Linear

Gambar 2.5 Struktur Navigasi Linear

Gambar 2.6 Struktur Navigasi Non Linear

2.14.3 Struktur Navigasi Hierarki

Gambar 2.7 Struktur Navigasi Hierarki

Gambar 2.8 Struktur Navigasi Campuran

3.1 Spesifikasi Hardware dan Software yang Dibutuhkan dalam Pembuatan

Sebelum membuat aplikasi web yang menggunakan bahasa pemrogramman PHP

 Processor Intel(R) Celeron(R) CPU N3350 @ 1.10GHz

 Windows 10 Home 64bit sebagai sistem operasi

3.2 Perancangan Struktur Navigasi

1. Struktur Navigasi User

Gambar 3.1 Struktur Navigasi User

Gambar 3.2 Struktur Navigasi Admin

3.3.1 Struktur Tabel Database

Tabel berikut ini menggambarkan bentuk database pada website seperti

Tabel 3.1 Database Bseller

id_bs int(11) No AUTO_INCREMENT Primary Key