- Pada kesempatan kali ini kita akan membahas Pemrograman Web 1 dimulai dari langkah awal hingga langkah akhir, kali ini admin akan sajikan pada Part 3, silahkan dibaca, dipahami dan dipraktikkan di laptop masing-masing.

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:

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 navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.

Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.

Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.

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

background: blue; width: 100%; margin: 10px auto;

.wrap .menu ul{ padding: 0; margin: 0;

list-style-type: none;

.wrap .badan .sidebar{

float: left; width: 25%; height: 100%;

.wrap .badan .content{ background: red; float: left; height: 100%; width: 75%;

.wrap .footer{ width: 100%; padding: 10px;

font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans- serif;

font-size:26px; font-weight:bold; color:#666; padding:5px 0; margin-bottom:10px;

border-bottom:1px solid #ccc;

display:inline-block;

Buat file Pertemuan4.php

Pemrograman 1

Tutorial belajar membuat layout website sederhana

Tutorial JQuery dasar

if (empty($_GET['p'])){

$filename=$_GET['p'];

require $filename.".php";

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:

<?php echo "Admin - "; ?>

” kita dapat

mengganti judul website kita menjadi sesuai keinginginan kita ,contoh

<?php echo "Admin - "; ?>

<?php echo "Beranda - "; ?>

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 :