PEMROGRAMAN WEB

SESSION 6: Membuat Layout web (include

soal uts)

STMIK MERCUSUAR
By : Abdur Rohman, M.Kom
1
 Teknik pembuatan
Dalam sebuah halaman website, dibuat sebuah tampilan dengan layout sbb :

IDENTITAS PERUSAHAAN
LOGO PERUSAHAAN ALAMAT PERUSAHAAN

| Home | About|  Gallery |                                                                                 |Login

Page
ISI HALAMAN WEB ANDA

Page

Copyright : Kuliah Web 2019 STMIK Mercusuar (powered by Abdur Rohman)

Tampilan
 Tampilan

Header.html

About.html

Menu.php
Home.html

Footer.html

Icon whatsapp
 Penjelasan
• Header dibuat dengan sotware foto editor
• Layout dibuat dengan menggunakan html dan
css yang responsive terhadap perubahan
ukuran layar laptop/komputer user
• Pemanggilan halaman html menggunakan
fungsi php yakni include file untuk
menampilkan file lain ke dalam index
Struktur Folder website
 CSS
• Css yang digunakan ada 2 (opsional) yakni :
1. Css untuk tampilan
2. Css untuk login
 gambar
• Letakkan semua gambar yang akan digunakan
untuk website tersebut pada folder ini, gambar
harus memiliki hubungan dengan tema website
yang akan anda buat
• Untuk page gallery, gunakan gambar dari folder
ini
• Apapun yang ada hubungannya dengan gambar,
letakkan di folder ini baik untuk css, header dll.
 page
• File page berisi page yang akan dipanggil dalam
index.php
 Urutan pembuatan layout
• Tampilan.css
• Menu.html
• Paging.html
• Header.html
• Footer.html
• Index.php
Isi web:
• Home.html
• About.html
• Contact.html
• Tujuan.html
• Profil.html
Dan seterusnya, disesuaikan dengan apa menu apa yg ingin
ditampilkan di website anda
 tampilan.CSS

• Dapat didownload pada link berikut ini:

Download CSS

Atau salin url berikut ini:

https://www.dropbox.com/s/npscc42dq34fb87/tampilan.css?dl=0
Menu.html
Paging.html
Paging.html
Header.html
Footer.html
 Index.php
• Index.php digunakan untuk membuat menu
utama dan memanggil page-page lain yang
telah dibuat. Fungsinya mirip dengan MDI
Menu pada desktop based.
• Page ini boleh dimodifikasi sesuai keinginan,
namun tetap menggunakan format layout
yang diberikan.
Index.php
Aksi.js
Folder js
 Contoh Link Social Media

Bagian ini berisi link social media dari website yang sedang anda
buat, pastikan user yang mengklik ikon tiap social media tersebut
tertuju ke akun social media perusahaan anda
 Lokasi

Bagian ini berisi peta lokasi dari perusahan yang sedang anda
buat web nya. Maps-nya harus dapat menunjukkan lokasi nyata
dari lokasi perusahaan
 Gallery.html
• Bagian ini berisi gallery gambar dari website
anda
 Login.html
• Bagian ini berisi form login untuk bagian
admin yang nantinya akan mengelola website
anda
 Penutup
• Seluruh bagian dalam layout ini adalah
merupakan pengembangan dari web layout
yang sudah ada, artinya anda bebas
mengembangkan isinya selama layout-nya
masih sesuai dan tidak dibenarkan
menggunakan layout lain yang tidak sesuai
dengan layout dalam materi UTS ini.
Selamat Mengerjakan!!!