Diklogi

Hi semuaaa masih tetap semangat yaa...

Oke pada postingan kali ini, kita akan melanjutkan pembuatan aplikasi berbasis web yaa. Pada postingan sebelumnya kita telah membuat projek baru, nah sekarang kita akan membuat halaman dan isinya. Halaman yang akan kita buat yakni halaman web dinamis, wah halaman web dinamis itu apa yaa?. Nih kita bahas yaa, jadi halaman web dinamis itu berguna untuk menghemat coding dan keperluan halaman web. Hmm masih bingung? jadi gini, halaman web dinamis itu kalau temen-temen panggil halaman web lain nah halaman itu hanya loading di halaman utama saja. Jadi saat kita membuat coding halaman web lain tidak perlu lagi membuat header dll karena sudah ada di halaman utama. Oke langsung praktik saja yuk.

Perhatian! pastikan untuk penulisan coding, harus diketik yaa jangan copy paste karena setiap text editor formatnya berbeda-beda sehingga terkadang copy paste akan menyebabkan error.

Langkah-langkah:

1. Ketikkan koding berikut di file home.php

<div class="halaman">

<div align="left">

<h2>Halaman Utama</h2>

<p>Selamat datang, ini merupakan halaman utama aplikasi berbasis web</p>

</div>

</div>

2. Ketikkan koding berikut di file kontak.php

<div class="halaman">

<div align="left">

<h2>Kontak</h2>

<p>Tuliskan kontak di sini</p>

</div>

</div>

3. Ketikkan koding berikut di file tentang.php

<div class="halaman">

<div align="left">

<h2>Tentang</h2>

<p>Tuliskan informasi tentang aplikasi di sini</p>

</div>

</div>

4. Ketikkan koding berikut di file style.css

body{

    background:#f4f4f4;

}

.bingkai{

background: #DDD;

width: 900px;

margin: 20px auto;

    border : #CCC solid 1px;

}

.bingkai .header{

background: #01A9DB;

padding: 2px 10px;

}

.bingkai .menu{

background: #81DAF5;

    width:100%;

    height:40px;

}

.bingkai .menu ul{

padding: 0;

margin: 0;

}

.bingkai .menu ul li{

float: left;

list-style: none;

padding: 10px;

}

.clear{

clear: both;

}

.badan{

height: 450px;

}

.bingkai .badan .sidebar{

background: #FFF;

float: left;

width: 25%;

height: 100%;

}

.bingkai .badan .content{

background: #f1f1f1;

float: left;

height: 100%;

width: 75%;

}

.bingkai .footer{

width: 100%;

padding: 10px;

}

.halaman{

text-align: Center;

padding: 30px 20px;

}

6. Cek halaman index, ketikkan link berikut di browser: http://localhost/latihan/index.php

7. Tampilan halaman index apabila berhasil akan seperti ini

Selesai sudah pembuatan halaman webnya yeay.