Pertemuan 4 - Web1

2
MODUL PERKULIAHAN
W151700011 –
PEMROGRAMA
N WEB 1
Layout CSS & Form
Abstrak Sub-CPMK (lihat di RPS)
Membuat layout dan variabel Mahasiswa mampu membuat disain

menggunakan CSS layout dan mengetahui variabel-
variabel menggunakan CSS
Pembahasan
Membuat Tampilan Layout Website Sederhana Dengan HTML dan CSS
Fakultas Program Studi Tatap Muka Disusun Oleh
04
Wawan Gunawan, S.Kom., M.T.
Ilmu Komputer Teknik Informatika
Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen
dalam sebuah halaman dengan benar. Sama seperti tipografi, terdapat sangat banyak
elemen-elemen pada layout, yang tentunya tidak akan dapat dibahas pada bagian ini
sendiri. Pembahasan layout secara menyeluruh akan memerlukan bukunya tersendiri.
Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen
web, dan bagaimana membuat elemen-elemen tersebut dengan HTML dan CSS.
Sebuah dokumen web umumnya memiliki elemen-elemen sebagai berikut:
Elemen Header
Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain
dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global
(seperti login dan logout), maupun nama halaman yang sedang ditampilkan.
Elemen Navigation
Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain
dalam web.
Elemen Sidebar
Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun
berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar
2021 Pemrograman Web 1

2 Wawan Gunawan, S.Kom., M.T.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten,
sesuai dengan kreatifitas perancangnya.
Elemen Konten
Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat
teks yang berada pada bagian ini.
Elemen Footer
Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website,
seperti lisensi pengunaan, sitemap, ataupun link ke website lain.
Bagaimana kita dapat membangun layout seperti pada gambar di atas? Berdasarkan apa
yang telah kita pelajari sejauh ini, tentunya anda telah dapat membayangkan apa yang
harus dilakukan. Sederhananya: width dan height pada seluruh elemen, float pada
sidebar dan content, serta clear pada footer. Perlu diingat juga bahwa pada dokumen web
yang sebenarnya, properti height jarang digunakan karena tinggi elemen biasanya
ditentukan oleh isi dari elemen itu sendiri.
Kita buat file css, beri nama style.css
.wrap{
background: blue;
width: 100%;
margin: 10px auto;
}
/*bagian header*/
.wrap .header{
background: green;
/*height: 50px;*/
padding: 2px 10px;
}
/*akhir header*/
/*bagian menu*/
.wrap .menu{
background: yellow;
overflow: hidden;
}
.wrap .menu ul{

padding: 0;
margin: 0;
background: yellow;

}
.wrap .menu ul li{

float: left;
list-style-type: none;
padding: 10px;
}
/*akhir menu*/
.clear{
clear: both;
}
.badan{
height: 450px;
}
/*bagian sidebar*/
.wrap .badan .sidebar{
background: orange;
float: left;
width: 25%;
height: 100%;
}
/*akhir sidebar*/
.wrap .badan .content{

background: red;
float: left;
height: 100%;
width: 75%;
}
.wrap .footer{
width: 100%;
padding: 10px;
}
.form{
padding: 10px;
background: green;
font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-
serif;
font-size: 13px;
font-weight: 400;
}
.title{
font-size:26px;
font-weight:bold;
color:#666;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;

width:120px;
}
Buat file Pertemuan4.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>Pemrograman 1</h1>
<p>Tutorial belajar membuat layout website sederhana</p>
</div>
<div class="menu">
<ul>
<li><a href="?p=homes">Home</a></li>
<li><a href="?p=formulir">Form</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</div>
<div class="badan">
<div class="sidebar">
sidebar
<ul>
<li><a href="#">Tutorial HTML dasar</a></li>
<li><a href="#">Tutorial CSS dasar</a></li>
<li><a href="#">Tutorial PHP dasar</a></li>
<li><a href="#">Tutorial JQuery dasar</a></li>
</ul>
</div>
<div class="content">
<?php
if (empty($_GET['p'])){
$filename="homes";
} else {
$filename=$_GET['p'];
}
require $filename.".php";
?>
</div>
</div>
<div class="clear"></div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
Dan akan ditampilkan seperti gambar di bawah ini

Fungsi File Indeks.php
Berfungsi sebagai penampil yang akan terbuka pertama kali di website ,yang
mana file indeks.php ini berisi beberapa file-file seperti,file css,bootsrap , js dan
home.php yang berisi file-file yang kita buat sebelunya sedangkan file
css,bootstrap dan js yang akan memberikan style pada halaman website kita,di
file indeks.php ini kita dapat memberi judul (title) pada halaman website kita
dengan cara menganti:
<head>
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title><?php echo "Admin - "; ?></title>
<link rel="shortcut icon" href="<?php echo $icon; ?>" type="image/x-

icon" />
</head>

Pada tak title dalam “<title><?php echo "Admin - "; ?></title>” kita dapat
mengganti judul website kita menjadi sesuai keinginginan kita ,contoh
<title><?php echo "Admin - "; ?></title>
Menjadi
<title><?php echo "Beranda - "; ?></title>
Selain itu ada variabel $baseURL :
$baseURL = 'http://'.$_SERVER['SERVER_NAME'].'/web1/';
Variabel ini berfungsi untuk mempermudah kita dalam memasukan file

(css,bootsrap dan js ) sehingga kita tidak perlu menulis panjang source file nya
File base_template_topnav.php
File ini berfungsi untuk membuat topbar navigasi pada halaman website kita ,yang
mana di topbar navigasi ini berisi logo website kita ,toggle sidebar,dropdown menu
untuk login admin
Yang mana jika kita ingin memasukan logo pada halaman website kita dengan
mengubah :
<img src="<?php echo $logo; ?>" height="50px" style="margin-top:-

25px;margin-bottom:-20px; margin-left:-20px;" alt="logo">
Menjadi :
<img src="<?php echo $logo; ?>images/mercu.jpg" height="50px"

style="margin-top:-25px;margin-bottom:-20px; margin-left:-20px;"
alt="logo">
Dengan syarat pada folder images terdapat gambar “mercu.jpg”
Dan kita dapat mengubah logo doropdown untuk menu login admin menjadi logo
yang kita inginankan
Dengan cara mengubah:
<img class="nav-user-photo" width="40" height="40" src="<?php echo

$baseURL; ?>images/Icon.png" alt="" />

Menjadi :
<img class="nav-user-photo" width="40" height="40" src="<?php echo

$baseURL; ?>images/admin.png" alt="" />
Dengan syarat pada folder images terdapat gambar “admin.png”
Selain itu terdapat kode :
<button type="button" class="navbar-toggle menu-toggler pull-

left" id="menu- toggler" data-target="#sidebar">
<span class="sr-only">Toggle sidebar</span>
<span class="icon-bar"></span>
</button>
Kode ini untuk membuat toogle sidebar agar web kita menjadi lebih responsive
Kemudian terdapat script:
<div class="navbar-buttons navbar-header pull-right" role="navigation" >
Script ini berfungsi untuk membuat navigasi button untuk menu admin yang mana
kita dapat mengubah warna dari navigasi button nya menjadi warna yang kita
suka dengan mengubah nama class pada script :
<li class="light-blue dropdown-modal"> //warna biru
Menjadi
<li class="red dropdown-modal"> // warna merah

File base_template_foother.php
File ini berfungsi untuk membuat tampilan foother (tampilan bawah yang ada di
website)
Kita bisa mengubah isi tampilan foother nya menjadi yang kita inginkan,dengan
mengubah script di class foother
<span class="bigger-120">
<span class="blue bolder">Perusahaan</span>
Application © 2019
</span>
Menjadi
<span class="bigger-120">
<span class="blue bolder">Klinik Medika</span>
Application © 2019
</span>
Tampilan menjadi “Klinik Medika Application ©2019”
Kita juga bisa mengubah warna tulisan Klinik Medika dari waran biru menjadi
warna merah dengan mengganti nama class=”blue bolder” menjadi class=”red
bolder” maka tulisan nya akan menjadi warna merah
Tampilan menjadi “Klinik Medika Application ©2019”
Pada script dibawah ini berfungsi untuk menampilkan logo twitter,facebook,dan

kotak orange
Yang mana kita bisa mengisi link dengan mengganti isi href=”#” menjadi ke link
yang kita inginkan misal href=” https://www.twitter.com”
<span class="action-buttons">

<a href="#">
<i class="ace-icon fa fa-twitter-square light-blue

bigger-150"></i>
</a>
<a href="#">
<i class="ace-icon fa fa-facebook-square text-primary bigger-

150"></i>
</a>
<a href="#">
<i class="ace-icon fa fa-rss-square orange bigger-150"></i>
</a>
</span>
File Menu.PHP
File Menu.php berfungsi untuk membuat menu side bar yang ada di samping
website,di dalam script ini kita bisa mengubah isi menu yang ada sesuai dengan
yang kita inginkan dan kita butuhkan,dibagian atas website yang kita buat ada
sidebar-shortcut, yang mana kita bisa menambah sidebar-shortcut tersebut sesuai
yang kita inginkan dan mengubah warna dan tampilanya dengan cara:
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-

large">
<button class="btn btn-danger">
<i class="ace-icon fa fa-signal"></i>
</button>

<button class="btn btn-info">
<i class="ace-icon fa fa-pencil"></i>
</button>
<button class="btn btn-warning">
<i class="ace-icon fa fa-users"></i>
</button>
<button class="btn btn-danger">
<i class="ace-icon fa fa-cogs"></i>
</button>
</div>
Kita ubah menjadi
<button class="btn btn-success">
Jika kita ubah menjadi :
<button class="btn btn-danger"> // maka shortcut yang kita buat akan menjadi
warna merah
Jika kita mengubah :
<i class="ace-icon fa fa-penci"></i> // tampilan shortcut adalah logo pencil
Menjadi :
<i class="ace-icon fa fa-config"></i> // maka shortcut yang kita buat akan

menjadi logo pengaturan
Kemudian didalam script ini juga membuat sub menu,yang mana kita bisa
menambah submenu sesuai dengan yang kita inginkan dengan cara mengubah
<ul class="submenu">
<li class="">

<a href="folder/data"><i class="menu-icon fa
fa-caret-right"></i>Sub Menu 1</a>
</li>
<b class="arrow"></b>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-desktop"></i>
<span class="menu-text">
Sub Sub Menu
</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<li class="">
<a href="folder/data"><i class="menu-

icon fa fa-caret-right"></i>Sub Sub Menu 1</a>
</li>
</ul>
</li>
</ul>
Jika kita ingin menambah sub sub menu menjadi ada 2 maka kita hanya tinggal
menambah script menjadi :
<li class="">

fa-caret-right"></i>Sub Sub Menu 1</a>

</li>
<li class="">

fa-caret-right"></i>Sub Sub Menu 1</a>
</li>
</ul
Maka ketika kita klik sub sub menu maka akan tampil 2 sub sub menu,kita bisa
menambahkan sesuai dengan kebutuhan kita
File Home.PHP
File ini berfungsi untuk menampilkan isi konten yang akan kita buat,dan dari sisi
admin berdasarkan script yang ada kita dapat melihat total jamaah ,total marketing
dan dana jamaah di tap kelola halaman website,dan terdapat alert yang berfungsi
untuk menampilkan peringatan dan ucapan selamat datang,
Jika kita kita ingin mengubah alert tersebut menjadi berwarna hijau maka kita
cukup mengubah di scirpt:
<div class="alert alert-block alert-info">
Menjadi
<div class="alert alert-block alert-success">
Maka tampilan alert tersebut akan berubah menjadi warna hijau
Jika kita ingin mengedit isi alert nya maka kita cukup mengubah :
Selamat datang
<strong class="green">
<b>Wawan Gunawan</b>
</strong>,<br><br>

Berusaha dan berdoa
Menjadi isi teks sesuai yang kita inginkan
Jika kita ingin mengubah logo laporan yang ada pada tap kelola halaman website
maka kita ubah pada script:
<div class="infobox infobox-green">
<div class="infobox-icon">
<i class="ace-icon fa fa-user"></i>
</div>
<div class="infobox-data">
<span class="infobox-data-number">22</span>
<div class="infobox-content">Total Jemaah</div>
</div>
</div>
Jika kita ubah class:
<i class="ace-icon fa fa-user"></i>
Menjadi :
<i class="ace-icon fa fa-users"></i>
Maka akan keluar ogo seperti user namun dengan user yang lebih dari satu sama
seperti pada tampilan laporan logo total marketing, jadi kita bisa mengubah dan
menambah kan logo laporan tersebut sesuai dengan kebutuhan yang kita inginkan
Pada intinya pada file ini kita memasukan semua yang dibuat sebelumnya :
base_template_topnav.php

menu.php
base_template_footer.php
yang mana file home.php ini yang akan di masukan ke dalam file indeks.php
sehingga kita bisa melihat semua tampilan website yang kita buat
Daftar Pustaka
Bahra. 2005. Analisis dan Desain Sistem Informasi. Tangerang: Graha Ilmu.

Hermawan, Benny . 2005. Menguasai Java 2 & Object Oriented Programming.
Yogyakarta: Andi Yogyakarta.
Hakim, Rachmad dan Sutarto . 2009. Konsep Pemrograman Java dan Penerapannya
untuk Membuat Software Aplikasi. Jakarta: Elex Media Komputindo.
Jogiyanto. 2005. Analisis & Disain Sistem Informasi: Pendekatan Terstruktur Teori dan
Praktek Aplikasi Bisnis. Yogyakarta: Andi Yogyakarta.


Pertemuan 4 - Web1

Diunggah oleh

Informasi Dokumen

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

Pertemuan 4 - Web1

Diunggah oleh

Hak Cipta:

Format Tersedia

2

Abstrak Sub-CPMK (lihat di RPS)

Membuat layout dan variabel Mahasiswa mampu membuat disain

Fakultas Program Studi Tatap Muka Disusun Oleh

Sebuah dokumen web umumnya memiliki elemen-elemen sebagai berikut:

2021 Pemrograman Web 1

Kita buat file css, beri nama style.css

.wrap .menu ul{

2021 Pemrograman Web 1

.wrap .menu ul li{

.wrap .badan .content{

2021 Pemrograman Web 1

Buat file Pertemuan4.php

Dan akan ditampilkan seperti gambar di bawah ini

2021 Pemrograman Web 1

<meta charset="utf-8" />

<title><?php echo "Admin - "; ?></title>

<link rel="shortcut icon" href="<?php echo $icon; ?>" type="image/x-

2021 Pemrograman Web 1

<title><?php echo "Admin - "; ?></title>

<title><?php echo "Beranda - "; ?></title>

Selain itu ada variabel $baseURL :

Variabel ini berfungsi untuk mempermudah kita dalam memasukan file

<img src="<?php echo $logo; ?>" height="50px" style="margin-top:-

<img src="<?php echo $logo; ?>images/mercu.jpg" height="50px"

Dengan syarat pada folder images terdapat gambar “mercu.jpg”

Dengan cara mengubah:

<img class="nav-user-photo" width="40" height="40" src="<?php echo

2021 Pemrograman Web 1

<img class="nav-user-photo" width="40" height="40" src="<?php echo

Dengan syarat pada folder images terdapat gambar “admin.png”

Selain itu terdapat kode :

<button type="button" class="navbar-toggle menu-toggler pull-

<span class="sr-only">Toggle sidebar</span>

Kemudian terdapat script:

<div class="navbar-buttons navbar-header pull-right" role="navigation" >

<li class="light-blue dropdown-modal"> //warna biru

<li class="red dropdown-modal"> // warna merah

2021 Pemrograman Web 1

<span class="blue bolder">Perusahaan</span>

Application &copy; 2019

<span class="blue bolder">Klinik Medika</span>

Application &copy; 2019

Tampilan menjadi “Klinik Medika Application &copy;2019”

Tampilan menjadi “Klinik Medika Application &copy;2019”

Pada script dibawah ini berfungsi untuk menampilkan logo twitter,facebook,dan

2021 Pemrograman Web 1

<i class="ace-icon fa fa-twitter-square light-blue

<i class="ace-icon fa fa-facebook-square text-primary bigger-

<i class="ace-icon fa fa-rss-square orange bigger-150"></i>

<div class="sidebar-shortcuts" id="sidebar-shortcuts">

<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-

<button class="btn btn-danger">

<i class="ace-icon fa fa-signal"></i>

2021 Pemrograman Web 1

<i class="ace-icon fa fa-pencil"></i>

<button class="btn btn-warning">

<i class="ace-icon fa fa-users"></i>

<button class="btn btn-danger">

<i class="ace-icon fa fa-cogs"></i>

Kita ubah menjadi

<button class="btn btn-success">

Jika kita ubah menjadi :

Jika kita mengubah :

Application © 2019

Application © 2019

Tampilan menjadi “Klinik Medika Application ©2019”

Tampilan menjadi “Klinik Medika Application ©2019”