Pemrograman Berbasis Web

“Makalah Pembuatan Website”

Disusun oleh: Ghifari Prameswari N (53416019)

Kelas: 3IA88

Dosen: Naeli Umniati, ST., MMSI

Jurusan Teknik Informatika

Fakultas Teknologi Industri
Univeristas Gunadarma
2019

0
A. Desain Website
Berikut ini akan dijelaskan desain website secara keseluruhan dan menu-menu yang
berfungsi pada website yang dibuat.
1. Halaman Utama

GHIFARI GALLERY ABOUT BLOG CONTACT SUBMITTED

Foto

Hi! I Am Ghifari
[Greetings]

[Tanggal]

Foto Foto Foto

JUDUL JUDUL JUDUL

Foto Foto Foto

JUDUL JUDUL JUDUL

Alamat Links Keterangan

Pada halaman utama website, terdapat navigation bar, welcome header yang berisi
greetings, jam, dan tanggal, kumpulan contoh foto yang akan ditampilkan di gallery, dan
footer. Berikut akan dijelaskan menu-menu yang ada:

1
2. Gallery

GHIFARI GALLERY ABOUT BLOG CONTACT SUBMITTED

MY GALLERY
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Donec est neque, dignissim id nisl non, tempus

Album 1 Album 2 Album 3

Album 4 Album 5 Album 6

Alamat Links Keterangan

Pada menu gallery, berisi 6 album, jika ditekan salah satu fotonya oleh user akan
mengarahkan user ke halaman baru yang merupakan foto isi album. Masing-masing
halaman album terdiri dari 3 buah foto. Jadi dapat disimpulkan, terdapat 6 halaman album
foto dengan tema dan judul yang berbeda. Untuk desain halaman foto semua didesain
dengan format sama, formatnya adalah sebagai berikut:

2
GHIFARI GALLERY ABOUT BLOG CONTACT SUBMITTED

(Judul Album)
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Donec est neque, dignissim id nisl non, tempus

Foto 1

Foto 2

Foto 3

Alamat Links Keterangan

3
3. About
Pada menu about, berisi tentang riwayat pendidikan, dan keahlian yang saya punya.

GHIFARI GALLERY ABOUT BLOG CONTACT SUBMITTED

Foto

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean scelerisque quam in justo tristique, vitae commodo
eros ullamcorper. Quisque ultrices, arcu eu volutpat interdum,
ex libero convallis dui, ut efficitur magna ante nec felis.

Skill and Interest

Icon 1 Icon 2 Icon 3 Icon 4

Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

Education The Skills

Lorem ipsum
No Jenjang Sekolah Tahun Progress Bar 1
P
Lorem ipsum
Progress Bar 1
P
Lorem ipsum
Progress Bar 1
P
Lorem ipsum
Progress Bar 1
P

Alamat Links Keterangan

1
4. Blog
Pada menu blog, user akan diarahkan ke halaman yang berisi artikel-artikel pilihan.
Untuk desainnya adalah sebagai berikut:

GHIFARI GALLERY ABOUT BLOG CONTACT SUBMITTED

GHIFARI PRAMESWARI
[Tanggal post]
Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque quam in justo tristique,
vitae commodo eros ullamcorper. Quisque ultrices, arcu eu volutpat interdum, ex libero convallis

Continue Reading…

GHIFARI PRAMESWARI
[Tanggal post]
Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque quam in justo tristique,
vitae commodo eros ullamcorper. Quisque ultrices, arcu eu volutpat interdum, ex libero convallis

Continue Reading…

GHIFARI PRAMESWARI
[Tanggal post]

Lorem Ipsum
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque quam in justo
tristique, vitae commodo eros ullamcorper. Quisque ultrices, arcu eu volutpat interdum, ex libero
convallis.”

Alamat Links Keterangan

Pada halaman blog, akan muncul tampilan desain dari beberapa artikel namun tidak
ditampilkan secara keseluruhan. Jika user ingin membaca artikel keseluruhan, dapat
menekan link “Continue Reading” yang disediakan di masing-masing blok artikel.

2
Berikut adalah desain halaman untuk artikel lengkap

GHIFARI GALLERY ABOUT BLOG CONTACT SUBMITTED

GHIFARI PRAMESWARI

[Tanggal post]

LOREM IPSUM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque quam in justo
tristique, vitae commodo eros ullamcorper. Quisque ultrices, arcu eu volutpat interdum, ex libero
convallis dui, ut efficitur magna ante nec felis. Vivamus eget sem at ante egestas fermentum sit
amet vel lacus. Morbi efficitur, libero eu pretium dignissim, nisi turpis auctor turpis, vitae aliquam
dolor purus quis sapien. Maecenas et orci felis. Vivamus tristique metus eget laoreet mattis.
Morbi in eros consectetur, imperdiet magna a, aliquet odio. Praesent porta mauris scelerisque,
rhoncus mi non, dignissim sem. Cras quis pharetra eros. Vestibulum commodo, elit et pretium
consectetur, nibh diam vestibulum quam, non laoreet nunc nunc quis elit. In porta finibus
suscipit.

TAGS: Lorem ipsum- wordpress

#Back

Alamat Links Keterangan

Setelah selesai membaca, user dapat menekan tagar #back untuk kembali ke
halaman menu blog.

3
5. Contact
Pada menu contact, user akan diarahkan pada halaman kontak yang berisi form untuk
diisi kemudian dikirim ke pembuat web. Desainnya adalah sebagai berikut:

GHIFARI GALLERY ABOUT BLOG CONTACT SUBMITTED

Contact Me
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Donec est neque, dignissim id nisl non, tempus
interdum augue.
Your Name

Your Email

Subject

Your Message

Kirim Refresh

Alamat Links Keterangan

Pada halaman ini, user akan mengisi form yang ada, dipastikan user harus mengisi
semua data, agar data dapat dikirm ke database. Setelah user mengisi form secara lengkap,
user menekan button kirim untuk mengirim data. Button refresh berguna untuk merefresh
form baru.
6. Submitted
Jika user ingin memastikan apakah data yang disubmit melalu form telah terkirim,
maka user dapat menekan menu submitted pada navigation bar.
Setelah user menekan menu submitted, user akan diarahkan ke halaman yang berisi
data-data yang telah disubmit melalui form. Bentuk data disajikan dalam bentuk tabel.
Untuk desainnya adalah sebagai berikut:

4
GHIFARI GALLERY ABOUT BLOG CONTACT SUBMITTED

Welcome! Here is Some Submitted Requests & Feedbacks

No Nama Email Subject Message

Alamat Links Keterangan

5
B. Tampilan Website & Penjelasan Koding
1. Halaman Utama

Sebelum masuk ke penjelasan kodingan pada halaman utama, saya ingin

menjelaskan title header dan library yang digunakan untuk membuat website ini.

6
 Website ini menggunakan library eksternal dari framework bootstrap, library untuk
font yang dipakai adalah font-awesome, dan yang terakhir ada library untuk javascript.
Selanjutnya akan ditampilkan kodingan HTML untuk membuat halaman utama.

7
a. Navigation bar
HTML

Berikut adalah koding HTML untuk membuat navbar, untuk CSS yang digunakan
adalah CSS eksternal, yang nanti akan dijelaskan terpisah.
b. Welcome Section
Berisi greetings, jam, dan tanggal yang diupdate secara otomatis sesuai waktu user
mengakses website. Dalam welcome section, greetings, jam, dan tanggal dibuat dalam
bentuk javascript.
 HTML

8
 Javascript
Ada 3 jenis function javascript yang digunakan untuk membuat greetings, jam,
dan tanggal.
- Jam
Untuk jam, javascript yang digunakan adalah javascrpipt inline.

- Tanggal
Untuk tanggal, javascript yang digunakan adalah javascript inline

9
 - Greetings
Pada greetings, digunaka javascript yang dibuat eksternal pada file Main.js

Kondisi yang dipakai untuk memunculkan greetings adalah:

Jam 05.01 – 11.00 : Pagi
Jam 11.01 – 15.00 : Siang
Jam 15.10 – 18.00 : Sore
Jam 18.01 – 20.00 : Petang
Jam 20.01 – 05.00 : Malam
 CSS
Dalam welcome section, hampir semua bagian diatur dalam CSS eksternal,
namun ada juga bagian yang diatur dala CSS internal, yaitu foto profile.

10
c. Album
Setelah welcome section, terdapat container yang berisi album foto berjumlah 6
buah yang masing-masing foto dapat ditekan oleh user untuk mengarahkan user pada
halaman album masing-masing.
 HTML

Enam album ditampilkan dalam bentuk row, sehingga tampilan terlihat rapi.
 CSS
CSS yang digunakan adalah CSS eksternal.

11
d. Footer
Di dalam footer, terdapat bagian tambahan yaitu copyrights.
 HTML

 CSS
CSS yang digunakan adalah CSS eksternal.

12
2. Gallery

Pada tampilan gallery, bagian navigation bar dan footer memiliki format koding
yang sama pada halaman utama, sehingga tidak saya jelaskan kembali. Bagian yang
ingin saya tampilkan adalah kodingan untuk 6 album foto.

13
 HTML

 CSS
CSS yang digunakan adalah CSS eksternal.

14
a. Gallery(Extended)
Jika user mengunjungi laman gallery, lalu menekan salah satu foto di album maka akan
menampilkan halaman album secara keseluruha. Di web ini terdapat enam halaman
untuk masing- saing album. Namun format HTML dan CSSnya sama jadi saya hanya
menampilkan 1 contoh saja.

15
 HTML
Berikut adalah kodingan untuk isi dari halaman album gallery

 CSS
CSS yang digunakan ada yang eksternal dan inline

16
3. About

 HTML
Bagian navbar dan footer tidak saya tampilkan kembali, yang saya tampilkan
adalah kodingan untuk isi dari halaman About.

17
Skill & Interest

18
Education

The Skills

19
4. Blog

20
 HTML
Untuk halaman blog, untuk kodingan header dan footer tidak saya jelaskan
karena sama seperti halaman yang sebelumnya. Yang menjadi pembeda adalah
kodingan untuk membuat baris artikel yaitu sebagai berikut:
- Post pertama

21
- Post kedua

- Post ketiga(berupa quotes biasa)

22
 a. Halaman full blog

Kali ini saya hanya mengambil satu contoh juga, karena kurang lebih format
HTML dan CSS sama.Untuk halaman full blog, kurang lebih kodingannya adalah
seperti berikut:

23
 HTML

 CSS
CSS yang digunakan pada halaman ini ada yang berupa inline dan eksternal.

24
5. Contact

25
 HTML

26
  CSS
CSS yang digunakan berupa inline dan eksternal
a. Contact Form
Agar data dapat dimasukan ke database, digunakan file .php dengan nama
contactform.php, file ini berfungsi sebagai penyambung antar data yang ingin telah
dikirim melalui form dengan database yang telah dibuat.

6. Submitted
Untuk halaman submitted, nama halaman adalah view format halamannya adalah
.php yang disertai dengan html inline.

27
  HTML

Koding html yang digunakan untuk membuat navbar dan tabel untuk menampilkan isi
database tempat menampung data dari form yang ada di halaman contact.

28
  PHP

7. CSS Eksternal
Dalam keseluruhan website ini, digunakan file CSS eksternal bernama style.css.
berikut kodingan beserta penjelasannya.

29
30
31
32
33
34
35
36
37
38
39
C. Hosting Website
Berikut akan dijelaskan langkah-langkah untuk hosting website. Jasa hosting yang
digunakan adalah 000webhost hosting.
1. Untuk melakukan hosting, terlebih dahulu register untuk membuat akun. Disini saya
menggunakan akun google saya untuk membuat akun.

40
41
 2. Kemudian akan muncul halaman di bawah, pencet tombol + lalu masukkan alamat
website yang ingin dibuat

ghifariueo

Website yang saya buat akan beralamat bernama https://ghifariueo.000webhostapp.com/

42
3. Klik “create” setelah itu kita melakukan upload file

Klik icon untuk upload file untuk pergi ke halaman upload.

Sebelum masuk ke halaman upload, kita harus log in kembali menggunakan nama
website dan password yang telah dibuat.

43
4. Upload
Kemudian, mulai upload. Pastikan semua isi file diupload dalam folder public_html.
Jika tidak, maka file web gagal dideteksi oleh hosting.

Tunggu beberapa saat, lalu klik Upload yang beradap di bawah panel.

44
 File telah diupload. Sekarang kita melakukan koneksi database.
5. Koneksi database
Langkah ringkas untuk melakukan koneksi database adalah, kita akan membuat user
baru, password baru, dan database baru yang degenerate oleh jasa hosting melalui
phpmyadmin.

Klik “Manage database”

45
Setelah itu, anda akan diarahkan ke halaman untuk mengatur database. Di bawah
halaman terdapat tombol “New database”. Lalu kita klik tombol tersbut. Kemudian,
buat database yang ingin digunakan, nama user untuk hak akses, dan password sesuai
keinginan.

Database berhasil dibuat, kemudian buat koneksi tabel di dalam file database tersebut.

46
6. Import Tabel

Pada halaman manage website, klik “manage” lalu pilih phpmyadmin. Kemudian login
dengan user dan password yang telah dibuat sebelumnya.

47
Kemudian, untuk membuat tabel bisa dibuat secara manual menggunakan query
atau import. Untuk saya sendiri, saya mengimport tabel karena saya sudah export
tabel dari database yang saya buat sebelumnya melalui user di localhost.

Klik open, maka tabel berhasil dibuat di database.

48
7. Tahap hosting secara keseluruhan selesai. Sekarang kita coba akses alamat website
yang telah dibuat. Akan muncul tanda dipjok kanan yang berasal dari jasa hosting
000webhost.

49