PERANCANGAN

WEBSITE TOKO GADGET - APPLE

TUGAS AKHIR

GOKMAN FRANCISCUS NAPITUPULU

192406030

PROGRAM STUDI D-3 TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
MEDAN
2021
 PERANCANGAN
WEBSITE TOKO GADGET - APPLE

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat

memperoleh Ahli Madya

GOKMAN FRANCISCUS NAPITUPULU

192406030

PROGRAM STUDI D-3 TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
MEDAN
2021
 PERSETUJUAN

Tugas Akhir ini disusun sebagai kewajiban mata kuliah Teknik Penulisan Karya
Ilmiah . Disusun oleh:
Judul : Website Toko Gadget – Apple
Kategori : Tugas Akhir
Nama : Gokman Franciscus Napitupulu
NIM : 192406030
Program : D - III
Program Studi : Teknik Informatika
Departemen : Matematika
Fakultas : Matematika dan Ilmu Pengetahuan Alam
Sumatera Utara
Medan, September 2021

Menyetujui,
Dosen, Pembimbing,

Katrin Jenny Sirait, S.Si, M.Si Katrin Jenny Sirait S.Si, M.Si
NIP. 199001272021022001 NIP. 199001272021022001

Mengetahui,
Ketua Program Studi Teknik Informatika

Dra. Normalina Napitupulu M.Sc

NIP: 196311061989022001
 PERSETUJUAN

PERANCANGAN WEBSITE TOKO GADGET - APPLE

TUGAS AKHIR

Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri. Kecuali
beberapa kutipan dan ringkasan yang masing – masing disebutkan sumbernya.

Medan, Desember 2021

GOKMAN FRANCISCUS NAPITUPULU

NIM. 192406030
 PENGHARGAAN

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Esa, atas rahmat dan
anugerah-Nya penulis dapat menyelesaikan Tugas Akhir Berjudul Website
Informasi Gadget – Apple ini sebagai bentuk tugas dari Teknik Perancangan
Karya Ilmiah.
Terimakasih penulis sampaikan kepada Ibu Katrin Jenny Sirait S.Si., M.Si
selaku dosen pengajar dan penulis yang selalu diberi pengarahan dan bimbingan
baik kritik dan saran kepada penulis selama penyusunan tugas akhir dari awal
hingga selesai. Terimakasih kepada Ibu Dra. Normalina Napitupulu, M.Sc dan Ibu
Asima Manurung, S.Si., M.Si selaku Ketua dan Sekretaris Program Studi Teknik
Informatika D3 FMIPA USU, kepada Bapak Dr. Suyanto M.Kom dan Bapak Drs.
Rosman Siregar, M.Si selaku ketua dan sekretaris Departemen Matematika
FMIPA USU, kepada Ibu Dr. Nursahara Pasaribu M.Sc selaku Dekan FMIPA
USU yang telah mengeluarkan surat permohonan untuk melaksanakan riset,
seluruh staff, pegawai, dosen rekan-rekan kuliah Program Studi Teknik
Informatika D3 FMIPA USU. Penulis mengucapkan terima kasih kepada kedua
orang tua penulis Ayahanda Bilher Napitupulu dan Ibunda Sama Silalahi serta
keluarga yang telah banyak memberi doa dan dukungan untuk penulis. Dan semua
pihak yang telah banyak membantu penulis dalam menyelesaikan Tugas Akhir ini
yang tidak dapat disebutkan satu persatu. Semoga Tuhan Yang Maha Esa
membalasnya. Disertai keseluruhan rasa rendah hati, kritik dan saran yang
membangun sangat penulis nantikan, agar kiranya penulis dapat meningkatkan
dan merevisi kembali proposal ini di tugas lainnya di waktu berikutnya.

Medan, Desember 2021

Penulis,

GOKMAN FRANCISCUS NAPITUPULU

 NIM.192406030
GADGET STORE WEBSITE – APPLE

ABSTRACT

The rapid advancement of information and communication technology makes all

aspects of life must be followed. One of them is the business world, by utilizing
information and communication technology will increase efficiency in all fields.
Based on the facts above, in writing this final project the author discusses how to
design an information system in a shop. Here the author analyzes and designs The
structure of the information system that will be built and used is the programming
language and the integration of the two. This system was developed using PHP
and PHP MySQL programming language and accompanied by using a customized
database with the needs in the system design process. The things contained in this
The system includes various information such as product information, product
data, sales data, rooms, sales lists, and buyer data. From this result research of this
thesis, it can be concluded that the information system takes place online and well
computerized.

Keyword : Shop, MySQL, PHP, Web.

 WEBSITE TOKO GADGET – APPLE

ABSTRAK

Pesatnya kemajuan teknologi informasi dan komunikasi membuat semua aspek

kehidupan harus diikuti. Salah satunya adalah dunia bisnis, dengan memanfaatkan
informasi dan teknologi komunikasi maka akan meningkatkan efisiensi di segala
bidang. Berdasarkan fakta diatas, penulisan tugas akhir ini penulis membahas
tentang bagaimana merancang sebuah sistem informasi di sebuah toko. Disini
penulis menganalisa dan merancang struktur sistem informasi yang akan dibangun
dan digunakan adalah pemrogramannya bahasa dan integrasi keduanya. Sistem ini
dikembangkan dengan menggunakan PHP dan Bahasa pemrograman MySQL dan
disertai dengan menggunakan database yang disesuaikan dengan kebutuhan dalam
proses perancangan sistem ini. Hal-hal yang terkandung dalam ini sistem
mencakup berbagai informasi seperti informasi produk, data produk, data
penjualan, ruangan, daftar penjualan, dan data pembeli. Dari hasil ini penelitian
skripsi ini, dapat disimpulkan bahwa sistem informasi berlangsung secara online
dan terkomputerisasi dengan baik

Kata Kunci : Toko, MySQL, PHP, Web.

 DAFTAR ISI
Halaman

PENGHARGAAN
ABSTRACT
ABSTRAK
DAFTAR ISI
DAFTAR TABEL
DAFTAR GAMBAR

BAB I PENDAHULUAN
1.1 Latar Belakang
1.2 Identifikasi Masalah
1.3 Tujuan Penulisan
1.4 Manfaat Penulisan
1.5 Batasan Masalah
1.6 Metode Ilmiah
1.7 Sistematika Penulisan

BAB II TINJAUAN PUSTAKA

2.1 Sejarah Web
2.1.1 Perkembangan Teknologi Web
2.1.2 Tentang Web
2.1.3 Aplikasi Web
2.2 PHP dan MySQL
2.3 PHP dan HTML
2.4 Javascript
2.5 CSS (Cascading Style Sheet)
2.6 Flowchart
2.6.1 Simbol pada Flowchart
BAB III METODOLOGI PENULISAN
3.1 Jenis Penelitian
3.2 Waktu dan Tempat Penelitian
3.3 Objek dan Subjek Penelitian
3.4 Teknik Pengumpulan Data
BAB IV IMPLEMENTASI DAN PEMBAHASAN
4.1 Implementasi Rancangan Antar Muka
BAB V KESIMPULAN DAN SARAN
5.1 Kesimpulan
5.2 Saran

DAFTAR PUSTAKA
LAMPIRAN
 DAFTAR TABEL

Nomor Tabel Judul Halaman

2.1 Flow Direction Symbols 14
2.2 Processing Symbols 15
2.3 Input – Output Symbols 16
2.4 Komponen ERD 16
 DAFTAR GAMBAR

Nomor Gambar Judul Halaman

4.1 Tampilan Home 20
4.2 Tampilan Login 21
4.3 Tampilan Register 21
4.4 Tampilan Kategori Produk (Bagian Home) 22
4.5 Halaman Keranjang Saya 22
4.6 Halaman Daftar Order 23
4.7 Halaman Utama Admin 23
4.8 Halaman Daftar Pesan 24
4.9 Halaman Kelola Toko 24
4.10 Halaman Kelola Pelanggan 25
4.11 Halaman Kelola Staff 25
 BAB 1
PENDAHULUAN

1.1 Latar Belakang

Seiring perkembangan teknologi di era 5.0 ini hampir seluruh golongan
masyarakat mampu mengikuti dan memanfaatkannya di kehidupan sehari –
hari.Seperti mulai dari meng-on/off lampu dan televisi dengan suara , membuka
dan menutup pintu dengan fingerprint , dan masih banyak lagi. Sebagai salah satu
Brand yang selalu memiliki teknologi yang up to date Apple selalu menghasilkan
barang-barang yang sangat canggih dan dengan kualitas yang sangat terjamin.
Untuk mempermudah masyarakat mengetahui informasi teknologi dari
produk Apple ini Pembuatan Website ini adalah salah satu cara yang sangat
efisien untuk menarik minat masyarakat untuk lebih memanfaatkan teknologi dari
Apple ini.
Kita mengetahui bahwa website seperti ini sudah banyak digunakan oleh
masyarakat di internet. Namun salah satu fitur yang membuat website ini lebih
menarik adalah fitur yang akan menyediakan 3 link disetiap produk. Link itu
merupakan toko online shop dari Shopee, Tokopedia, dan Lazada. Fitur tersebut
nantinya berisikan produk Apple dengan harga termurah dari setiap toko online
shop. Sehingga pengguna tidak kesulitan untuk mencari toko online shop yang
menawarkan harga murah dan pastinya sudah terjamin yang nantinya dilihat dari
rating toko.

1.2 Identifikasi Masalah

Proposal ini akan membahas rumusan masalah terkait proyek yang akan
dikerjakan, yaitu:
1. Bagaimana perancangan kebutuhan dalam proyek ?
2. Siapa saja pelaku dalam penggunaan proyek ?
3. Bagaimana analisis biaya dalam proyek ?
4. Bagaimana analisis penerimaan dalam proyek ?
5. Bagaimana analisis kelayakan dalam proyek ?
 2

1.3 Tujuan Penulisan

Tujuan pembuatan website ini adalah sebagai berikut :
1. Memenuhi tugas pembuatan proposal mata kuliah Teknik Perancangan Karya
Ilmiah
2. Menambah pengetahuan pembuatan proposal
3. Meningkatkan pemahaman mengenai teknologi informasi

1.4 Batasan Masalah

Permasalahan yang akan dibahas dalam pengerjaan proposal ini dibatasi pada
masalah yaitu :
1. Sistem informasi ini digunakan untuk menambah pengetahuan masyarakat
terhadap produk apple.
2. Bahasa Pemrograman yang digunakan adalah PHP dan database MySQL
3. Pembuatan website ini menggunakan metode Waterfall

1.5 Manfaat Penulisan

Manfaat dari pembuatan website ini adalah sebagai berikut :
1. Membantu masyarakat mengetahui spesifikasi dan harga gadget
2. Menambah wawasan masyarakat mengenai teknologi terbaru
3. Membantu masyarakat untuk memilih barang sesuai badget yang dimiliki
4. Mendapat informasi masih terbaru mengenai produk Apple

1.6 Sistematika Penulisan

Proposal ini disusun berdasarkan sistem penulisan sebagai berikut :

BAB I Pendahuluan
Bab ini berisikan latar belakang masalah, identifikasi masalah, batasan masalah,
tujuan dan sistematika penulisan.
BAB II Studi Literatur
Bab ini berisikan teori-teori yang menjadi dasar permasalahn yang dibahas
sebagai referensi.
BAB III Metodologi Penulisan
 3

Bab ini berisikan tentang langkah-langkah yang akan dilakukan untuk

menyelesaikan proposal.
BAB IV Implementasi dan Pembahasan
Bab ini berisi tentang data dan hasil analisis dari penelitian proposal yang telah
dilaksanakan.
BAB V Kesimpulan Dan Saran
Dalam bab ini berisikan kesimpulan berdasarkan pengujian yang telah dilakukan
dan saran yang disampaikan setelah selesainya proposal ini.
DAFTAR PUSTAKA
LAMPIRAN
 4

BAB II
TINJAUAN PUSTAKA

2.1 Sejarah Web

Sejarah web dikembangkan pertama kali oleh Sir Timothy Tim Berners lee,hanya
saja pada saat itu web masih berjalan tanpa terhubung jaringan. Web semakin
popular ketika mulai terhubungan jaringan internet,yaitu pada akhir tahun 80-an.
Saaat itu di laboratorium CERN berlokasi di kota Geneva, Swiss menyatakan
bahwa web bias diakses melalui jaringan dan dimiliki oleh siapa saja.
Sejarah web juga berkaitan dengan sejarah perkembangan teknologi
computer,Karena pada awalnya tampilan web masih sangatlah sederhana hanya
menampilkan teks lalu untuk hyperlink (link) pada saat itu masih
menggunakantampilan nomor yang menghubungkan antara satu halaman ke
halamanyang lainnya.Pada saat itupun teknologi web dikembangkan dan
berjalanpada system operasi Unix,masih sangat jarang yang menggunakan
teknologi windows,andai pun ada teknologi windows tersebut masih sangat
sederhana.
Sejarah Web bermula di European Laboratory for Particle Physics (lebih
dikenal dengan nama CERN), di kota Geneva dekat perbatasan Perancis dan
Swiss. CERN merupakan suatu organisasi yang didirikan oleh 18 negara di Eropa.
Dibulan Maret 1989, Tim Berners dan peneliti lainnya dari CERN mengusulkan
suatu protokol sistem distribusi informasi di Internet yang memungkinkan para
anggotanya yang tersebar di seluruh dunia saling membagi informasi dan bahkan
untuk menampilkan informasi tersebut dalam bentuk grafik.

2.1.1 Perkembangan Teknologi Web

Dalam sejarah web, web browser digunakan sebagai media untuk beselancar dan
browser pertama kali popular digunakan yaitu Internet Explorer. Internet Explorer
digunakan sebagai aplikasi untuk mengakses web melalui computer.
Salah satu bentuk bagian dari perkembangan sejarah web,lahir definisi web
pada akhir tahun 90-an yaitu web 2.0. Web 2.0 didefinisikan sebagai web yang
 5

berfungsi kolaboratif,informative, dengan tujuan membuat penguna semakin

dekat salah satu cirinya ditandai dengan hadirnya wiki,blog,social network. Web
2.0 pertama kali dikemukakan oleh Chris Anderson Dan Tim O’Reilly.
Web Browser pertama dibuat dengan berbasiskan pada teks. Untuk
menyatakan suatu link, dibuat sebarisan nomor yang mirip dengan suatu menu.
Pemakai mengetikkan suatu nomor untuk melakukan navigasi di dalam Web.
Kebanyakan software tersebut dibuat untuk komputer-komputer yang
menggunakan Sistem Operasi UNIX, dan belum banyak yang bisa dilakukan oleh
pemakai komputer saat itu yang telah menggunakan Windows. Tetapi semua ini
berubah setelah munculnya browser Mosaic dari NCSA (National Center for
Supercomputing Applications).
Di bulan Mei 1993, Marc Andreesen dan beberapa murid dari NCSA
membuat Web browser untuk sistem X-Windows yang berbasiskan grafik dan
yang mudah untuk digunakan. Dalam beberapa bulan saja, Mosaic telah menarik
perhatian baik dari pemakai lama maupun pemakai baru di Internet. Kemudian
NCSA mengembangkan versi-versi Mosaic lainnya untuk komputer berbasis
UNIX, NeXT, Windows dan Macintosh.
Pada tahun 1994, Marc Andreesen meninggalkan NCSA, dan kemudian
bersama Jim Clark, salah satu pendiri dari Silicon Graphics, membuat Netscape
versi pertama. Kehadiran Netscape ini menggantikan kepopuleran Mosaic sebagai
Web browser dan bahkan sampai saat ini Netscape merupakan browser yang
banyak digunakan setelah Internet Explorer dari Microsoft. Pada tahun yang sama
CERN dan MIT mendirikan suatu konsorsium yang dinamakan World WIde Web
Consortium (W3C) yang bertugas untuk membangun standar bagi teknologi Web.
Pada awal perkembangannya, sewaktu browser masih berbasiskan teks hanya
terdapat sekitar 50 website.
Di akhir tahun 1995 jumlah ini telah berkembang mencapai sekitar 300.000
web site. Dan diperkirakan sekarang ini jumalh pemakai Web telah mencapat
sekitar 30-an juta pemakai diseluruh dunia.
 6

2.1.2 Tentang Website

Web merupakan jaringan komputer yang terdiri dari sekumpulan situs internet
yang menampilkan teks, grafik, gambar maupun suara melalui protokol transfer
hypertext.
Pemrograman web terbentuk atas 2 kata yaitu pemrograman dan web
dimana pemrograman sendiri adalah Proses atau Cara dalam menjalankan sebuah
urutan intruksi atau perintah yang diberikan kepada komputer untuk membuat
fungsi atau tugas tertentu. dan Web adalah Sistem untuk mengakses,
memanipulasi, dan mengunduh dokumen yang terdapat pada komputer yang di
hubungkan melalui internet atau jaringan.
Jadi Pemrograman Web adalah Proses atau Cara untuk menjalankan intruksi pada
sebuah komputer yang terhubung ke internet untuk membuat fungsi atau tugas
tertentu. dan dalam menjalanan sebuah program di dalam web itu melaui web
browser seperti : Mozilla, Opera, Chrome, dll.
Ada 3 jenis website antara lain adalah sebagai berikut :
a.Website Statis
Website Statis adalah web yang konten atau isinya tidak di perbaharui
dalam kurun waktu tertentu atau bisa di bilang isisnya tidak berubah sama sekali
seperti web profile suatu perusahaan atau instansi pendidikan dll karena user
disitu hanya dapat melihat saja dan website statis cenderung tidak responsive
karena saat ingin memperbaharui webnya harus mengubah scriptnya secara
langsung tidak dapat melalui CMS yang ada.
b.Website Dinamis
Website Dinamis adalah web yang konten atau isinya sering kali di rubah
karena user atau pengguna dapat mengupdate informasi website secara langsung
biasanya di gunakan untuk toko online, web blog, jejaring sosial, dll. Pembuatan
yang cukup lama di karenakan penggunaan database yang di perlukan untuk
menyimpan data-data tersebut.
c.Website Interaktif
Website Interaktif adalah Website yang kurang lebih sama dengan website
dinamis namun interaksi di dalamnya lebih sering karena website interaktif adalah
website yang di peruntukkan untuk user atau pengguna yang ikut andil juga
 7

mengisi konten di dalamnya tidak seperti website dinamis yang hanya sebatas
koment atau share doang, pada website interaktif seperti contoh youtube pengguna
atau user ikut andil juga dalam mengisi konten di dalamnya.
Ada bebebarapa hal yang inging disampaikan penulis tentang apa itu
website diantaranya adalah :
1. HTML (Hyper Text MarkUp Language)
HTML (Hypertext Markup Language) adalah bahasa dari World Wide Web yang
dipergunakan untuk menyusun dan membentuk dokumen agar dapat ditampilkan
pada program browser. Tiap kali kita mengakses dokumen web, maka
sesungguhnya kita mengakses dokumen seseorang yang ditulis dengan
menggunakan format HTML.
Beberapa orang merasa keberatan jika dikatakan HTML adalah sebuah bahasa
pemrograman karena struktur yang dimilikinya dianggap terlalu sederhana, kode-
kode dibaca oleh browser baris per baris, dari atas ke bawah. HTML juga tidak
memiliki ‘looping’ seperti bahasa pemrograman lain. Pada HTML dipergunakan
hypertext link atau hubungan antara teks dan dokumen lain. Dengan demikian
pembaca dokumen bisa melompat dari satu dokumen ke dokumen yang lain
dengan mudah.

2. HTTP (Hypertext Transfer Protocol)

Hypertext Transfer Protocol (HTTP) adalah sebuah protokol jaringan lapisan
aplikasi yang digunakan untuk sistem informasi terdistribusi, kolaboratif, dan
menggunakan hipermedia. Penggunaannya banyak pada pengambilan sumber
daya yang saling terhubung dengan tautan, yang disebut dengan dokumen
hiperteks, yang kemudian membentuk World Wide Web pada tahun 1990 oleh
fisikawan Inggris, Tim Berners-Lee.
Hingga kini, ada dua versi mayor dari protokol HTTP, yakni HTTP/1.0 yang
menggunakan koneksi terpisah untuk setiap dokumen, dan HTTP/1.1 yang dapat
menggunakan koneksi yang sama untuk melakukan transaksi. Dengan demikian,
HTTP/1.1 bisa lebih cepat karena memang tidak perlu membuang waktu untuk
pembuatan koneksi berulang-ulang.
 8

3. URL(Uniform Resource Locator)

URL singkatan dari Uniform Resource Locator, adalah rangkaian karakter
menurut suatu format standar tertentu,yang digunakan untuk menunjukkan alamat
suatu sumber seperti dokumen dan gambar di Internet.
URL merupakan suatu inovasi dasar bagi perkembangan sejarah Internet.
URL pertama kali diciptakan oleh Tim Berners-Lee padatahun 1991 agar penulis-
penulis dokumen-dokumen dapat merujuk pranala ke Waring Wera Wanua atau
World Wide Web. Sejak1994, konsep URL telah dikembangkan menjadi istilah
Uniform Resource Identifier (URI) yang lebih umum sifatnya. Walaupun
demikian, istilah URL masih tetap digunakan secara luas.
4. WWW (World,Wide,Web)
WWW =World Wide Web bukan Internet . Tetapi , www merupakan jaringan
yang terbesar dan terpopuler di internet. Data www disebut website atau
webpages . Di dalamnya ada tulisan, gambar, foto, suara , dan video . Dengan
World Wide Web, kita dapat masuk atau surfing ke berbagai webpages . Tentunya
, dengan menggunakan bahasa khusus yang disebut Hypertext Transfer Protocol
atau HTTP . Internet tidak hanya berisi World Wide Web. Ada juga jaringan-
jaringan lain di dalamnya . Misalnya , SMTP/POP untuk email , P2P untuk musik
dan video , dan FTP untuk men-download . Setiap jaringan itu punya bahasa-
bahasa khususnya sendiri .

2.1.3 Apliksi Web

Pada awalnya aplikasi web dibangun hanya dengan menggunakan bahasa yang
disebut HTML (HyperText Markup Languange) dan protokol yang digunakan
dinamakan HTTP (HyperText Transfer Protocol). Pada peerkembangan
berikutnya, sejumlah script dan objek yang dikembangkan untuk memperluas
kemampuan HTML. Pada saat ini, banyak script seperti itu antara lain PHP dan
ASP, sedangkan contoh yang berupa objek antara lain adalah applet (Java).
(Abdul Kadir,2005).
Aplikasi web sendiri dapat dibagi menjadi web statis dan web dinamis. Web
statis dibentuk dengan mengguankan HTML saja. Kekurangan aplikasi ini terletak
pada keharusan untuk memelihara program secara terus-menerus untuk mengikuti
 9

setiap perubahan yang terjadi. Kelemahan ini dapat diatasi dengan model aplikasi
web dinamis. Web dinamis adalah web yang menampilkan informasi yang
bersifat dinamis (berubah-ubah) dan dapat saling berinteraksi dengan user.
Biasanya untuk web statis yang ditonjolkan adalah sisi tampilan yang banyak
mengandung grafis sehingga untuk merancang web statis tidak diperlukan
kemampuan pemrograman yang handal.
Dengan memperluas kemampuan HTML, yakni dengan menggunakan
perangkat lunak tambahan. Perubahan informasi dalam halaman-halaman web
dapat ditangani melalui perubahan data, bukan melalui perubahan program.
Sebagai implementasinya, aplikasi web dapat dikoneksikan ke basis data. Dengan
demikian perubahan informasi dapat dilakukan oleh operator atau yang
bertanggung jawab terhadap kemutakhiran data, dan tidak menjadi tanggung
jawab pemrogram.
Konsep yang mendasari aplikasi web sebenarnya sederhana. Operasi yang
melatar belakanginya melibatkan pertukaran informasi antara komputer yang
meminta informasi yang disebut klien dan komputer yang memasok informasi
(disebut server). Lebih detailnya, server yang melayani permintaan dari klien
sesungguhnya berupa suatu perangkat lunak yang dinamakan web server. Secara
internal, web server inilah yang berkomunikasi dengan perangkat lunak lain yang
disebut middleware dan middleware inilah yang berhubungan dengan basis data
(database). Model seperti inilah yang mendukung web dinamis.
Dengan menggunakan pendekatan web dinamis, dimungkinkan untuk
membentuk aplikasi berbasis web yang berinteraksi dengan database. Sebagai
contoh, sistem informasi karyawan berbasis web yang memungkinkan seorang
karyawan melihat informasi tentang kehadiran dalam satu bulan.

2.2 PHP dan MYSQL

Php (Hypertext Preprocessor ) merupakan bahasa script yang dijalankan pada sisi
server (SSS : Server Side Scripting). Database yang didukung PHP antara lain :
MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC. PHP
adalah software Open Source, bebas untuk diunduh dan digunakan.
 10

File PHP dapat berisi teks, tag HTML, dan Script. File PHP dikembalikan
ke browser dalam bentuk plain HTML. File PHP dapat berekstensi .php, .php3,
atau .phtml.
Kelebihan PHP sebagai bahasa script adalah dapat dijalankan pada berbagai
platform (windows, linux, dan sebagainya), kompatibel terhadap hampir semua
server yang digunakan saat ini, bebas diunduh dari situs resmi PHP www.php.net,
mudah dipelajari dan berjalan dengan efisien pada sisi server.
Untuk menggunakan PHP harus menginstall terlebih dahulu web server
Apache (atau IIS) pada komputer/server yang akan digunakan, serta menginstall
PHP dan MySQL. Atau dapat menggunakan layanan hosting yang menyediakan
dukungan terhadap PHP dan MySQL.
Proses mengolah data menggunakan PHP pada dasarnya menggunakan tiga
langkah berikut:
1. Membuat sambungan dari PHP ke server database (MySQL) Langkah pertama
memerlukan fungsi mysql_connect() dengan tiga parameterrnya yaitu: nama host
tempat server database mysql berada, nama user yang terdaftar pada server
database MySQL, dan password dari nama user.
Sintaksnya:
mysql_connect(“nama_host”,”nama_username”,“password”,”username”);
Contoh :
mmysql_connect("localhost","root","","w_apple");
2. Menentukan dan membuka database yang akan digunakan Langkah kedua
menggunakan fungsi mysql_select_db() dengan parameter tunggal yaitu nama
database yang akan digunakan.
Sintaks:
mysql_select_db(“nama_db”);
Contoh :
mysql_select_db(“e-pilkada”);
3. Menjalankan query Langkah ketiga menggunakan fungsi mysql_query()
dengan parameter berupa perintah sql yang akan dijalankan.
Sintaksnya:
mysql_query(“perintah_sql”);
 11

Contoh: mysql_query(“insert mahasiswa set nim=’$nim’,

nama=’$nama’, ipk=’$ipk’”);
Jika untuk membuat program cetak, maka ditambah satu langkah lagi yaitu
menguraikan data yang akan dicetak dengan menggunakan fungsi
mysql_fetch_row() dengan parameter tunggal yaitu hasil query.
Contoh:
$sql=”select * from mahasiswa”; $qry=mysql_query($sql)
While($hasil=mysql_fetch_row($qry)){echo“Nim:”.$hasil[0].”<br/>Nam
a:“.$hasil[1].”<br/>IPK:”.$hasil[2].”<br/>

2.3 PHP dan HTML

Bahasa pemrograman PHP dapat digabungkan dengan HTML dengan terlebih
dahulu memberikan tanda tag buka dilanjutkan tanya tanya (<?) kemudian ditutup
dengan tanda tanya dilanjutkan dengan tanda tag tutup (?>). Ada dua tipe
penggabungan antara PHP dan HTML, yaitu:
1. Embedded Script
Penulisan tag PHP di antara tag HTML. Dengan cara ini, penulisan tag PHP
digunakan untuk mengapit bagian-bagian tertentu dalam dokumen yang
memerlukan script PHP untuk proses di dalam server. Embedded script
menempatkan sebagai bagian dari script HTML.
Contoh penulisan Embedded Script dapat dilihat dibawah ini :
<html>
<head>
<head>
<title>Testing</title>
<body>
<html>
2. Non Embedded Script
Cara penulisan tag PHP dibagian paling awal dan paling akhir dokumen.
Dengan cara ini, penulisan tag PHP digunakan untuk mengawali dan mengakhiri
keseluruhan bagian dalam sebuah dokumen. Non Embedded Script menempatkan
script HTML sebagai bagian dari script PHP.
Contoh penulisan Non Embedded Script dapat dilihat dibawah ini :
 12

<?
echo‟<html>‟;
echo‟<head>‟;
echo‟<title>Testing</title>‟;
echo‟</head><body>‟;
echo „Halo Dunia‟;
echo‟</body>‟;
echo‟</html>;
?>

2.4 Javascript
Bahasa script Javascript paling populer di Internet dan dapat bekerja pada semua
browser utama seperti Internet Explorer, Firefox, Google Chrome, Safari, dan
Opera. Untuk mempelajari Javascript dibutuhkan penguasaan terhadap bahasa
utama web yaitu HTML atau XHTML. Beberapa hal penting yang perlu diketahui
tentang javascript:
a. Javascript dirancang untuk memberikan unsur interaktif kepada halaman
HTML
b. Javascript merupakan bahasa script. Bahasa script adalah bahasa pemrograman
yang ringan, dalam arti aturan pemrogramannya tidak serumit bahasa
pemrograman murni
c. Javascript biasanya digunakan dengan cara menuliskannya secara langsung
pada halaman HTML
d. Javascript merupakan bahasa interpreter, yang berarti script Javascript tidak
perlu dikompilasi sebelum dieksekusi.
e. Javascript bersifat gratis

Javascript dapat digunakan untuk melakukan hal-hal berikut:

a. membuat teks dinamis dalam halaman HTML. Javascript dapat menulis teks
atau isi suatu variabel pada halaman HTML.
b. menangani event. Kejadian-kejadian seperti tindakan mengklik mouse, atau
ketika halaman HTML telah selesai dimuat ke browser dapat dikenali oleh
javascript dan dapat mengatur tindakan tertentu ketika event itu terjadi.
 13

c. membaca dan menulis elemen-elemen HTML, yang berarti dapat digunakan

untuk mengubah konten suatu elemen HTML.
d. memvalidasi data, misalnya data form sebelum dikirim ke server sehingga
dapat meringankan server.
e. mendeteksi browser pengunjung membuat cookies yang akan menyimpan dan
memanggil informasi kedalam komputer pengunjung.

Javascript digunakan dengan cara menuliskan langsung pada dpkumen

HTML seperti contoh berikut:
<html>
<body>
<script> document.write(“Hello world!!”); </script>
</body>
</html>

Selain itu javascript juga dapat ditulis terpisah dalam suatu file seperti CSS
dengan akhiran .js. Untuk itu dokumen HTML perlu memanggil file javascript
dengan menambahkan kode berikut pada bagian head dokumeh HTML:
<head>
<script src=”nama_file_javascript.js”></script>
</head>

2.5 CSS (Cascading Style Sheet)

CSS merupakan singkatan dari Cascading Style Sheet yang berfungsi untuk
mengatur tampilan dengan kemampuan jauh lebih baik dari tag maupun atribut
standar HTML (HyperText Markup Language). 3. Eksternal stylesheet. Aturan
CSS disimpan pada suatu file sehingga terpisah dari dokumen HTML. Kemudian
tambahkan kode pemanggilan file CSS dalam dokumen HTML. Akhiran file CSS
adalah .css:
File CSS (misalnya styleku.css) berisi: P {text-align:justify;} Dokumen HTML
berisi:
<head>
<title>CSS secara eksternal</title>
<link rel=”stylesheet” type=”text/css” href=”styleku.css” />
 14

</head>
<body> <p>Paragrap yang ini diatur CSS secara eksternal</p>
</body>

2.6 Flowchart
Flowchart adalah bagan-bagan yang mempunyai arus untuk menggambarkan
langkah-langkah dalam menyelesaikan suatu masalah tertentu dan flowchart
merupakan salah satu cara penyajian dalam algoritma. Program flowchart
menggambarkan urutan logika dari suatu algoritma. Tahapan pembuatan program
yaitu mendefinisikan masalah dan menganalisanya, mencakup: tujuan pembuatan
program, parameter yang digunakan, fasilitas yang disediakan, algoritma yang
diterapkan dan bahasa program yang digunakan.

2.6.1 Simbol Pada Flowchart

Simbol pada flowchart merupakan gambar atau bagan yang memperlihatkan
urutan dan hubungan antar proses beserta instruksinya. Gambaran ini dinyatakan
dengan simbol. Dengan demikian setiap simbol menggambarkan proses tertentu.
Sedangkan hubungan antar proses digambarkan dengan garis penghubung.
Flowchart disusun dengan simbol-simbol. Simbol ini dipakai sebagai alat bantu
menggambarkan proses di dalam program. Simbol-simbol yang dipakai antara
lain:
1. Flow Direction Symbols
Yaitu, simbol yang dipakai untuk menghubungkan antara simbol yang satu
dengan simbol lainnya atau disebut juga connecting line.

Tabel 2.1 Flow Direction Symbols

Simbol Nama Fungsi
Penghubung antara prosedur /
Arus / Flow proses.
 15

Simbol keluar / masuk prosedur

atau proses dalam lembar /

Connector halaman yang sama.

Simbol keluar / masuk prosedur

atau proses. dalam lembar /
Off-line Connector
halaman yang lain.

2. Processing Simbols
Yaitu, merupakan simbol yang menunjukkan jenis operasi pengolahan dalam
suatu prosedur.

Tabel 2.2 Processing Simbols

Simbol Nama Fungsi
Simbol yang menunjukkan
pengolahan yang dilakukan

Process Komputer.

Simbol untuk kondisi yang akan

menghasilkan beberapa

Decision kemungkinan jawaban / aksi.

Simbol untuk mempersiapkan

penyimpanan yang akan digunakan
Predefined Process sebagai tempat pengolahan didalam
storage.

Simbol untuk permulaan atau

akhir darti suatu program.
Terminal

3. Input-Output Simbol
 16

Yaitu, simbol yang dipakai untuk menyatakan jenis peralatan yang digunakan
sebagai media input atau output.

Tabel 2.3. Input-Output Symbol

Simbol Nama Fungsi
Simbol yang menyatakan
Input-Output proses input dan output tanpa
tergantung dengan jenis
peralatannya.
Simbol yang menyatakan input
berasal dari dokumen dalam

Document bentuk kertas atau output di

cetak dikertas.
Simbol untuk menyatakan input
berasal dari disk atau output di
Disk and On-line
simpan ke disk.
Storage

4. Entity Relationship Diagram

Menurut salah satu para ahli, Brady dan Loonam (2010), Entity Relationship
Diagram (ERD) merupakan teknik yang digunakan untuk memodelkan
kebutuhan data dari suatu organisasi, biasanya oleh System Analyst dalam tahap
analisis persyaratan proyek pengembangan sistem. Sementara seolah- olah teknik
diagram atau alat peraga memberikan dasar untuk desain database relasional yang
mendasari sistem informasi yang dikembangkan. ERD bersama- sama dengan
detail pendukung merupakan model data yang pada gilirannya digunakan sebagai
spesifikasi untuk database.

Tabel 2.4. Komponen ERD

Simbol Nama Fungsi

 17

Suatu objek yang dapat

Entitas diidentifikasi dalam
lingkungan pemakai.

Atribut Mendeskripsikan karakter

entitas.

Relasi Hubungan di antara sejumlah

entitas yang berbeda.

Penghubung antara relasi

Garis
dengan
entitas dengan atribut.
18
19
 BAB III
METODE PENELITIAN

3.1 Jenis Penelitian

Jenis penelitian ini adalah penelitian kualitatif. Penelitian kualitatif adalah
prosedur penelitian yang digunakan untuk menghasilkan data deskripsif yaitu
berupa kata – kata tertulis maupun lisan dari orang – orang dan perilaku yang
diamati (Moleong, 2007). Metode penelitian kualitatif adalah suatu proses
penelitian dan pemahaman yang berdasarkan pada metodologi yang menyelidiki
suatu fenomena sosial dan masalah manusia. Penelitian ini membuat suatu
gambaran kompleks, meneliti kata- kata laporan terinci dari pandangan responden,
dan melakukan studi pada suatu situasi.

3.2 Waktu dan Tempat Penelitian

1. Waktu Penelitian
Banyak waktu yang digunakan untuk melakukan penelitian ini adalah
sekitar 2 bulan dengan pemakaian waktu 1 bulan melakukan penelitian dan
pengumpulan data dan 1 bulan melakukan pengolahan data yang terdiri
dari pengerjaan desain dan implementasi website.
2. Tempat Penelitian
Tempat penelitian yang dilakukan adalah masyarakat umum, toko online,
toko gadget yang berada di Kota Balige Kabupaten Toba, Sumatera Utara..

3.3 Objek dan Subjek Penelitian

1. Objek Penelitian
Objek penelitian adalah suatu sifat atau nilai dari objek atau kegiatan yang
mempunyai variasi tersendiri yang ditetapkan oleh peneliti untuk dipelajari
dan kemudian ditarik kesimpulannya sebagai hasil penelitian.
Pada penelitian yang dilakukan penulis yang menjadi objek
penelitiannya adalah perancngan website Toko Gadget – Apple.
 19

2. Subjek Penelitian
Subjek penelitian adalah suatu nilai atau sifat dari orang, objek, maupun
kegiatan yang memiliki variable tersendiri yang ditetapkan untuk
dipelajari dan ditarik kesimpulan sebagai hasil penelitian.
Subjek penelitian ini adalah pengguna produk Apple dan
masyarakat umum sekaligus menjadi populasi yang diteliti. Untuk sampel
penelitian ini diambil beberapa dari pengguna produk Apple yang diambil
dari populasi.

3.4 Teknik Pengumpulan Data

Teknik pengumpulan data yang dilakukan penulis untuk mengambil data pada
penelitian ini adalah sebagai berikut :
1. Memberikan kuisioner kepada pengguna produk Apple untuk mengetahui
pendapat mereka seputar produk Apple.
2. Melakukan wawancara langsung kepada pengguna produk Apple untuk
mendapatkankan beberapa informasi yang dibutuhkan.
 20

BAB IV
IMPLEMENTASI DAN PEMBAHASAN

4.1 Implementasi Rancangan Antar Muka

Website Toko Gadget – Apple memiliki implementasi antarmuka meliputi setiap
kode program yang menggunakan bahasa pemrograman PHP, CSS, dan MySQL.
Website Toko Gadget ini memiliki tampilan sebagai berikut :
1. Halaman User
a. Tampilan Home
Tampilan Home ini adalah tampilan yang pertama kali muncul saat
website ini baru di buka. Pada tampilan Home ini memiliki beberapa fitur
yaitu fitur search yang digunakan untuk mencari produk atau barang dengan
cepat. Dan pada tampilan Home terdapat slide terdapat beberapa gambar produk
unggulan.

Gambar 4.1 Tampilan Home

b. Halaman Login
Halaman Login merupakan halaman utama yang wajib digunakan user
agar dapat menggunakan website secara menyeluruh. Di dalam halaman
Login ada terdapat Form Login untuk masuk kedalam website. Di
halaman Webiste ini membutuhkan email dan password.
 21

Gambar 4.2 Tampilan Login

c. Halaman Registrasi
Halaman Registrasi ini merupakan salah satu dari fitur utama pada
tampilan Home yang digunakan agar user dapat memiliki akun dan dapat
menggunakan website ini dengan maksimal.

Gambar 4.3 Tampilan Registrasi

d. Halaman Katergori Produk

Halaman Kategori Produk ini merupakan halaman yang berisikan list
produk yaitu Phone, Laptop, Display, Accessories. Setiap list memiliki
halamannya masing – masing.
 22

Gambar 4.4 Halaman Kategori Produk (Bagian Phone)

e. Halaman Keranjang Saya

Halaman Keranjang Saya ini merupakan halaman yang disediakan untuk
barang – barang yang ingin dibeli oleh user . Barang – barang tersebut
dapat ditambah ataupun dikurang jumlah sesuai dengan keinginan user.

Gambar 4.5 Halaman Keranjang Saya

f. Halaman Daftar Order

Halaman Daftar Order ini merupakan halaman yang disediakan agar user
dapat melakukan konfirmasi pembelian terhadap produk yang sudah
ditambah dikeranjang pembelian. Pada halaman tersebut akan diarahkan
transaksi sesuai dengan metode pembayaran yang diinginkan.
 23

Gambar 4.6 Halaman Daftar Order

2. Tampilan Admin
a. Halaman Utama (Home)
Halaman Utama merupakan halaman yang menampilkan pelanggan yang
memiliki akun, jumlah pesanan, dan pembayaran yang sudah di
konfirmasi.

Gambar 4.7 Halaman Utama Admin

b. Halaman Kelola Pesanan

Halaman Kelola Pesanan ini merupakan halaman yang menampilkan
pesanan yang akan dan sudah dikonfirmasi.
 24

Gambar 4.8 Halaman Daftar Pesanan

c. Halaman Kelola Toko

Halaman Kelola Toko merupakan halaman yang digunakan untuk
memasukkan barang dan menampilkan daftar barang yang sudah
ditampilkan di halaman user. Halaman ini menampilkan daftar Kategori,
Produk, dan juga Metode Pembayaran.

Halaman 4.9 Halaman Kelola Toko

d. Kelola Pelanggan
Halaman Kelola Pelanggan ini merupakan halaman yang digunakan agar
admin dapat memantau jumlah user yang sudah terdaftar.
 25

Gambar 4.10 Halaman Kelola Pelanggan

e. Halaman Kelola Staff

Halaman Kelola Staff merupakan halaman admin yang berisikan beberapa
staff yang dapat mengelola toko.

Gambar 4.11 Halaman Kelola Staff

 26

BAB V
KESIMPULAN DAN SARAN

5.1 Kesimpulan
Berdasarkan pada bab – bab sebelumnya maka pada bab ini penulis dapat
mengambil kesimpulan sebagai berikut :
1. Kebutuhan akan system online atau bisa dikatakan sebagai media
elektronik yang mampu memenuhi kebutuhan user dapat dilakukan secara
real-time.
2. Di era modern ini, Toko Online sangatlah banyak diminati oleh kalangan
masyarakat, selain mudah diakses tetapi juga terdapat fitur – fitur yang
mempermudah penggunaan website tersebut.

5.2 Saran
Dalam subbab terakhir ini, penulis mengharapkan kritik dan saran yang
membangun guna untuk membangun website ini kearah yang lebih baik lagi dan
dapat mempermudah penulis dalam penentuan masalah dan memperbaiki website
ini dengan cepat dan tepat.
 27

DAFTAR PUSTAKA

Adi Kurniadi.2000.Javascript.Elex Media Komputindo.Jakarta.

Antony Pranata.1997.Panduan Pemograman Javascipt.Andi
Offset.Yogyakarta.
Anhar. 2010. PHP & MySql Secara Otodidak. Pt TransMedia.Jakarta
Selatan.
Arief R, Student Exercise Series: Pemrograman Web dengan HTML, CSS,
dan Javascript. Penerbit PT Elex Media Komputindo: Jakarta.
Betha S, Husni I. Pohan.2012. Pemrograman Web Dengan HTML Revisi
Keempat, Penerbit Informatika Bandung.
Budi R,2011.Belajar Pemrograman Web. Penerbit Modula.Bandung.
Kadir A, 2005. Dasar Pemprograman Web dengan ASP. Andi yogyakarta:
Yogyakarta.
Hidayat, Taufik, 2008, Panduan Membuat Toko Online dengan
OSCommerce,
Mediakita, Jakarta.
Varmaat, Shelly Cashman, 2007, Discovering Computers: Menjelajah
Dunia
Komputer Fundamental Edisi 3, Salemba Infotek, Jakarta.
 28

Lampiran
Listing Program

1. Index.php