PROJECT WEB PROGRAMING

WEB INFORMASI TOKO KUE ANNA CAKE

Dibuat Oleh

Febri Valentino Santoso : 12200610

Djuendah Nursetiana : 12201399

Ahmad Rifai : 12200755

Boristyo Pamungkas : 12201483

12.2B.03

SISTEM INFORMASI
UNIVERSITAS BINA SARANA INFORMATIKA
TANGERANG
2021
 KATA PENGANTAR

Dengan Mengucapkan puji syukur kehadirat Allah SWT atas selesainya

pembuatan makalah ini, yang kami beri judul : “Project web programing web
informasi toko kue anna cake” yang merupakan salah satu persyaratan pengganti nilai
UAS mata kuliah Web Programming1 Program Studi Sitem Informasi Universitas
Bina Sarana Informatika, yang selanjutnya akan dipersentasikan secara online melalui
zoom atau googmeet.

Tak lupa kami sebagai penulis mengucapkan ucapkan terima kasih yang
sebesar-besarnya kepada berbagai pihak, terutama dosen matakuliah Web
Programming 1, Ibu Sandra Dewi.

Akhirnya penulis mengharapkan masukan, kritik dan saran yang membangun,

dikarenakan masih banyak kekurangan dari pembuatan makalah ini, sehingga dapat
membantu penulis dalam membuat makalah di masa yang akan datang.

Tangerang, 01 Juni 2021

Penulis

i
 DAFTAR ISI

Kata pengantar.....................................................................................................................i
Daftar isi .............................................................................................................................ii
BAB I PENDAHULUAN...................................................................................................1
1.1 Latar Belakang...............................................................................................................1
1.2 Ruang Lingkup..............................................................................................................1
1.3 Maksud dan Tujuan.......................................................................................................1
BAB II LANDASAN TEORI..............................................................................................2
2.1 Konsep Dasar Program..................................................................................................2
2.2 Bahasa Pemrogaman......................................................................................................3
2.3 Struktur Navigasi...........................................................................................................4
2.4 Aplikasi Pendukung.......................................................................................................4
BAB III PEMBAHASAN ..................................................................................................10
3.1 Analisa Kebutuhan........................................................................................................10
3.2 Perancangan Program....................................................................................................11
3.2.1 User Interface.......................................................................................................10
3.2.2 Perancangan struktur Navigasi.............................................................................12
BAB IV PENUTUP.............................................................................................................16
4.1 Kesimpulan ...................................................................................................................16
4.2 Saran..............................................................................................................................16

ii
 BAB I

PENDAHULUAN

1.1 Latar Belakang

Website atau situs juga dapat di artikan sebagai kumpulan halaman yang
menampilkan informasi data text,gambar (diam atau gerak), animasi, suara, vidio
atau gabungan dari semuanya. Baik yang bersifat statis atau dinamis yang
membentuk suatu rangkaian bagunan yang saling terkait dimana masing-masing
di hubungkan dengan jaringan-jaringan halaman(hyperlink). Website yang
sederhana dengan hanya mengandalkan beberapa halaman statis HTML

1.2 Ruang lingkup

Dalam pembuatan website ini, kami membuat ruang lingkup sebagai berikut :
1. Home
2. Products
3. Promo
4. About
5. Contact

1.3 Maksud dan Tujuan

Maksud dari dibuatnya project ini adalah sebagai tugas praktik untuk nilai
pengganti UAS mata kuliah Web programing 1 di semester II dan tujuannya
adalah :
1. Mempraktekan materi kuliah web programing 1 dalam merancang dan
membuat suatu website
2. Untuk memberikan sebuah gambaran dalam mempelajari dan membuat web
menggunakan bahasa pemrograman PHP dan CSS
3. Sebagai informasi dan media promosi bagi pemilik website dan pengunjung

1
 BAB II

LANDASAN TEORI

2.1 Konsep Dasar Program

Lahirnya internet dan website menjawab kebutuhan manusia akan teknologi
saat ini, mendorong pola pikir mereka untuk terus meningkatkan standar
kebutuhan informasi dan telekomunikasi. Bukan hanya perusahaan atau instansi
pemerintah saja, tetapi hampir semua organisasi yang ada telah menggunakan
media informasi berbasis website karna dinilai lebih efisien dan mudah di akses
dimana saja. Sehingga hal ini memudahkan dalam proses pencarian informasi
atau promosi. Beberapa istilah dalam dunia pemrograman diantaranya :
1. Website
Menurut Sidik dkk. (2007:1) World wide web (WWW), lebih dikenal
dengan web, merupakan salah satu layanan yang didapat oleh pemakai
komputer yang terhubung keinternet. Web pada awalnya adalah ruang
informasi dalam internet, dengan menggunakan hyperteks pemakan di
tuntun untuk menemukan informasi dengan mengikuti link yang
disediakan
2. Internet
Internet berasaal dari kata internasional networking yang artinya jaringa
internasional (luas dan mendunia). Jaringan tersebut terbentuk dari
banyaknya jaringan terkecil yang saliaang tergabung menjadi satu jaringan
komputer Madcoms (2010:4).
3. Browser Web
Internet berasaal dari kata internasional networking yang artinya jaringa
internasional (luas dan mendunia). Jaringan tersebut terbentuk dari
banyaknya jaringan terkecil yang saliaang tergabung menjadi satu jaringan
komputer Madcoms (2010:4).

2
 4. Server Web
Internet berasaal dari kata internasional networking yang artinya jaringa
internasional (luas dan mendunia). Jaringan tersebut terbentuk dari
banyaknya jaringan terkecil yang saliaang tergabung menjadi satu jaringan
komputer Madcoms (2010:4).

2.2 Bahasa Pemrograman

Menurut Junaidi (2005:12) Perkembangan bahasa pemograman web pertama
kali diawali dengan diluncurkannya HTML (Hyperteks Markup Laguage), yang
masih statis.kemudian bahasa ini dikembangkan denagan adanya CSS (Cascading
Style Sheet) yang dapat memperindah tampilan website. Semakin berkembangnya
bahasa pemograman web maka muncullah bahasa pemograman yang dapat
berjalan pada system operasi windows sekaligus pada system operasi UNIX yaitu
PHP ( PHP Hypertext Prepocessor). Berikut beberapa bahasa pemrograman yang
dipakai dalam merancang dan membuat sebuah web :
1. PHP
Menurut supriono (2008:17) PHP merupakan kependekan dari kata
Hypertext Preprocesor. PHP tergolong sebagai perangkat lunak open sorce
yang diatur dalam aturan general purpose licenci (GPL). Pemograman php
sangat cocok 5 dikembangkan dalam lingkungan web, php bias diletakan
pada scrip HTML atau sebaliknya. PHP digunakan untuk pengembangan
web dinamis. Maksudnya, PHP mampu menghasilkan website yang secara
terus menerus hasilnya bias berubah-ubah sesuai dengan pola y ang
diberikan.
2. CSS
Cascading Style Sheet (CSS) adalah satu kumpulan kode-kode untuk
memformat, yang mengandalkan satu tampilan isi pada halaman web.
Penggunaan style CSS pada format satu halaman diletakan terpisah dari
tampilan halaman. Isi dari halman kode HTML anda terletak di dalam file

3
 HTML, sedangkan kode CSS dapat berupa tampilan kode yang berada
dalam file lain atau salah satu bagian dari dokumen HTML, dan biasanya
diletakan dibagian kepala atau tag .

2.3 Struktur Navigasi

Menurut Prihatna (2005:51) Struktur Navigasi adalah “Susunan menu atau
hirarki dari suatu situs yang menggambarkan isi dari setiap halaman dan link atau
navigasi tiap halaman pada suatu situs web”. Berikut bentuk dasar dari struktur
navigasi adalah sebagai berikut
1. Composite (Campuran)
Composite (campuran) atau disebut juga struktur penjejakan bebas
merupakan gabungan dari ketiga struktur sebelumnya yaitu Linear, Non
Linear dan Hierarchi. Jika suatu tampilan membutuhkan percabangan,
maka dapat dibuat7 percabangan, dan bila dalam percabangan tersebut
terdapat suatu tampilan yang sama kedudukannya maka dapat dibuat
struktur Linear dalam percabangan tersebut.Setiap struktur peta
penjejakan seperti yang baru di bahas mempunyai fungsi dan tujuan
tersendiri, tidak ada yang lebih baik atau lebih buruk

2.4 Aplikasi Pendukung

Berikut adalah aplikasi pendukung dalam pembuatan perancanga web kami
adalah sebagai berikut :
1. Text Editor
a. Sublime Text
Sublime Text adalah aplikasi editor untuk kode dan teks yang dapat
berjalan diberbagai platform operating system dengan menggunakan
teknologi Phyton API. Terciptanya aplikasi ini terinspirasi dari
aplikasi Vim, Aplikasi ini sangatlah fleksibel dan powerfull.

4
 Fungsionalitas dari aplikasi ini dapat dikembangkan dengan
menggunakan sublime-packages. Sublime Text bukanlah aplikasi
opensource dan juga aplikasi yang dapat digunakan dan didapatkan
secara gratis, akan tetapi beberapa fitur pengembangan fungsionalitas
(packages) dari aplikasi ini merupakan hasil dari temuan dan mendapat
dukungan penuh dari komunitas serta memiliki linsensi aplikasi gratis.
Sublime Text mendukung berbagai bahasa pemrograman dan mampu
menyajikan fitur syntax highlight hampir di semua bahasa
pemrogramman yang didukung ataupun dikembangkan oleh
komunitas seperti; C, C++, 8 C#, CSS, D, Dylan, Erlang, HTML,
Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown,
MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile
and XML. Biasanya bagi bahasa pemrograman yang didukung ataupun
belum terdukung secara default dapat lebih dimaksimalkan atau
didukung dengan menggunakan add-ons yang bisa didownload sesuai
kebutuhan user.
b. VsCode
Vscode adalah sebuah perangkat lunak lengkap yang dapat digunakan
untuk melakukan pengembangan aplikasi, baik itu aplikasi bisnis,
aplikasi personal, ataupun komponen aplikasinya, dalam bentuk
aplikasi console, aplikasi Windows, ataupun aplikasi Web. Kode
sumber Visual Studio Code berasal dari proyek VSCode perangkat
lunak bebas dan sumber terbuka milik Microsoft yang dirilis di bawah
Lisensi MIT yang permisif, namun binari yang dikompilasi adalah
freeware untuk penggunaan apa pun. Dalam survei Pengembang Stack
Overflow 2019, Visual Studio Code mendapat peringkat alat
lingkungan pengembang paling populer, dengan 50,7% dari 87.317
responden mengklaim menggunakannya. VSCode ini sudah memiliki
segudang fitur menarikVSCode juga memiliki fitur IntelliSense yang

5
 cukup canggih. Fitur ini sangat terasa apabila sobat mengembangkan
aplikasi web yang menggunakan HTML, CSS, JavaScript, JSON,
Less, atau SASS. Fitur IntelliSense merupakan salah satu fitur yang
membantu sobat di dalam menulis kode program melalui popup yang
muncul secara otomatis pada saat sobat sedang mengetik dan
menampilkan saran sintaks yang bisa sobat pilih. Fitur lain yang tak
kalah keren adalah sudah integrasinya version control git dalam
VSCode. Dengan adanya fitur ini sobat dapat bisa mudah melakukan
commit, melihat perubahan di repositori master maupun branch,
bahkan VSCode akan memberikan penanda jika terjadi konflik pada
repositori git.

2. Font awesome
Font Awesome adalah huruf dan/atau angka yang membentuk gambar
dalam desain blogger atau website. Itu pengertian font awesome secara
praktis. Secara harfiyah, font awesome artinya 'huruf yang mengagumkan'.
Menurut Wikipedia, Font Awesome adalah toolkit font dan ikon
berdasarkan CSS dan KURANG. Itu dibuat oleh Dave Gandy untuk
digunakan dengan Bootstrap Twitter, dan kemudian dimasukkan ke dalam
CDN Bootstrap. Font Awesome memiliki pangsa pasar 20% di antara
situs web yang menggunakan Skrip Font pihak ketiga di platform mereka,
menempatkannya di tempat kedua setelah Google Font.

3. Google font
Google Fonts adalah perpustakaan 1052 keluarga font berlisensi gratis dan
API untuk penggunaan font yang nyaman melalui CSS dan Android.
Kami juga menyediakan ikon yang menyenangkan dan dibuat dengan
indah untuk tindakan dan item umum. Unduh untuk digunakan dalam
produk digital Anda untuk Android, iOS, dan webFont.

6
4. Browser adalah salah satu jenis perangkat lunak (software) yang
umumnya digunakan untuk membuka halaman website di internet.
Browser disebut juga dengan peramban web dan web browser. Secara
fundamental browser mempunyai kemampuan untuk menampilkan kode
semantik (bahasa pemrograman) halaman website seperti; HTML, CSS,
Js, dan lainnya menjadi halaman yang dimengerti oleh semua orang.
Browser yang populer digunakan saat ini adalah Google Chrome dan
Mozilla Firefox

5. XAMPP
XAMPP adalah perangkat lunak ( free software) bebas, yang mendukung
untuk banyak sistem operasi, yang merupakan kompilasi dari beberapa
program yang berfungsi sebagai server yang berdiri sendiri.
Fungsi XAMPP sendiri adalah sebagai server yang berdiri sendiri
(localhost), yang terdiri beberapa program antara lain : Apache HTTP
Server, MySQL database, dan penerjemah bahasa yang ditulis dengan
bahasa pemrograman PHP dan Perl. Nama XAMPP sendiri merupakan
singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP
dan Perl. Program ini tersedia dalam GNU General Public License dan
bebas, merupakan web server yang mudah untuk digunakan yang dapat
menampilkan halaman web yang dinamis. Untuk mendapatkanya XAMPP
anda dapat mendownload langsung dari web resminya. Dan berikut
beberapa definisi program lainnya yang terdapat dalam XAMPP.
Server HTTP Apache atau Server Web/WWW Apache adalah server web
yang dapat dijalankan di banyak sistem operasi seperti (Unix, BSD, Linux,
Microsoft Windows dan Novell Netware serta platform lainnya) yang
berguna untuk melayani dan memfungsikan situs web. Protokol yang
digunakan untuk melayani fasilitas web/www ini menggunakan HTTP.

7
MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL
(bahasa Inggris: database management system) atau DBMS yang
multithread, multi-user, dengan sekitar 6 juta instalasi di seluruh dunia.
MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis
dibawah lisensi GNU General Public License (GPL), tetapi mereka juga
menjual dibawah lisensi komersial untuk kasus-kasus dimana
penggunaannya tidak cocok dengan penggunaan GPL.
PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan
atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram
situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.
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),
perijinan (permissions), dan lain-lain).Pada dasarnya, mengelola basis data
dengan MySQL harus dilakukan dengan cara mengetikkan baris-baris
perintah yang sesuai (command line) untuk setiap maksud tertentu. Jika
seseorang ingin membuat basis data (database), ketikkan baris perintah
yang sesuai untuk membuat basis data. Jika seseorang menghapus tabel,
ketikkan baris perintah yang sesuai untuk menghapus tabel. Hal tersebut
tentu saja sangat menyulitkan karena seseorang harus hafal dan
mengetikkan perintahnya satu per satu.
Saat ini banyak sekali perangkat lunak yang dapat dimanfaatkan untuk
mengelola basis data dalam MySQL, salah satunya adalah phpMyAdmin.
Dengan phpMyAdmin, seseorang dapat membuat database, membuat
tabel, mengisi data, dan lain-lain dengan mudah, tanpa harus menghafal
baris perintahnya. phpMyAdmin merupakan bagian untuk mengelola basis
data MySQL yang ada di komputer. Untuk membukanya, buka browser

8
lalu ketikkan alamat 12 http://localhost/phpmyadmin, maka akan muncul
halaman phpMyAdmin. Di situ nantinya seseorang bisa membuat (create)
basis data baru, dan mengelolanya.

9
 BAB III

PEMBAHASAN

3.1 Analisa Kebutuhan

Dengan adanya website ini, penulis berharap kemudahan akses dan
informasi yang bisa di dapat. Bagi pemilik website, bisa memberikan
kemudahan dalam pemberian informasi seputar toko kue yang akan dikelola,
sebagai tempat untuk promosi juga, sedangkan bagi konsumen, bisa
mengakses data informasi yang ditampilkan di web, sehingga konsumen tahu
semua informasi yang ia butuhkan.

3.2 Perancangan Program

Adapun perancangan program yang digunakan dalam pembuatan
website ini adalah sebagai berikut :
3.2.1 User interface
Pada Perancangan program ini kami akan menampikan semua
rancangan tampilan yang ada di situs tersebut

10
11
 3.2.2 Perancangan Struktur Navigasi
Struktur navigasi website digunakan untuk menggambarkan
secara garis besar isi seluruh situs web dan menggambarkan
hubungan antara isi - isi tersebut. Pembuatan struktur navigasi
ini akan sangat membantu nantinya ketika akan membuat
rancangan seluruh halaman website. Dalam pembuatan website
ini penulis menggunakan struktur navigasi campuran,
gambarannya sebagai berikut:

Gambar Struktur Navigasi Campuran

3.3 Implementasi Program

Di bab ini kami menjelaskan tentang implementasi dari perancangan program
yang telah di buat sebelumnya, diantaranya :

12
Gambar 1 Tampilan Home

Gambar 2 Tampilan Products

13
 Gambar 3 Tampilan Promo

Gambar 4 Tampilan About

14
Gambar 5 Tampilan About

15
 BAB IV

PENUTUP

4.1 Kesimpulan
Berdasarkan pembahasan yang dilakukan pada bab sebelumnya maka
dapat ditarik kesimpulan yaitu:
1. Pembuatan program toko kue anna cake web mengunakan bahasa
pemgromanan PHP dilengkapi dengan CSS, membuat penulisan
program lebih efektif dan efesien.
2. Website Company Profile selain sebagai media informasi tentang
sebuah perusahaan, bisa dijadikan pula sebagai media promosi yang
berbasis website.
3. Dengan pembuatan Website jenis ini, pemilik website akan lebih
mudah dalam memberikan informasi kepada pengunjung tanpa harus
bertatap muka.

4.2 Saran
Setelah melakukan pembahasan di beberapa bab sebelumnya, maka
kami mengemukakan beberapa saran perbaikan atas website ini
diantaranya yaitu:
1. Untuk website toko kue anna cake yang kategorinya dibuat hanya
sebagai website company profile, alangkah baiknya dikembangkan
menjadi webite ecommerce, sehingga pengunjung bisa langsung
melakukan transaksi pembelian.
2. Untuk menindak lanjuti poin yang pertama, maka disarankan untuk
menambah beberapa fitur halaman antar muka seperti, halaman admin,

16
database, registrasi, login, pemesanan dan lain sebagainya sebagai
pendukung untuk proses transaksi.

17