Pada artikel kali ini kita akan membuat sebuah header website dengan css dan php sebelumnya kita telah membuat project awal sebuah website. Sebelum melanjutkan ke artikel yang ini sangat dianjurkan membaca artikel sebelumnya tentang
Website sederhana untuk pemula menggunakan PHP - membuat project sederhana..
Belajarlah untuk tidak hanya copy-paste karena dengan mengetik langsung sebuah code secara tidak langsung kita telah menulis code tersebut pada alam bawah sadar kita sehingga kita akan lebih mudah mengingatnya. Itulah sebabnya semua code saya tampilkan dalam bentuk gambar, bukan dalam bentuk tulisan yang bisa di copy-paste. hehe,,
Oke saya asumsikan project webcoboy sudah dibuat, berikut langkah selanjutnya:
1. Buat file _header.php pada folder webcoboy yang berisi
<!DOCTYPE html>
<html>
<head>
<title>Webcoboy</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
2. Buat file _footer.php pada folder webcoboy yang berisi
</body>
</html>
2. Buat folder styles dan buat file style.css pada folder tersebut yang berisi
body {
margin: 0px 0px 0px 0px;
}
/*-------------------header---------------------*/
.main_image {
width: 100%;
height: 591px;
background-image: url(../images/main_image.jpg);
background-size: cover;
}
.center_area {
width: 1024px;
margin: 0 auto;
text-align: center;
}
.header_content {
width: 1024px;
color: white;
}
.header_content #title1 {
font-weight: normal;
font-size: 22px;
}
.header_content #title2 {
font-weight: bolder;
font-size: 34px;
}
.header_content #date {
color: #EDD5D7;
font-size: 13px;
}
.button_green {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
width: 324px;
height: 70px;
background-color: #6BAD20;
font-weight: bolder;
font-size: 17px;
display: inline-block;
vertical-align: middle;
border-radius: 5px;
cursor: pointer;
}
.button_green:hover{
background-color:rgba(90, 148, 27, 255);
}
.header_content #button2 {
height: 40px;
width: 240px;
border-style: solid;
font-size: 17px;
display: inline-block;
vertical-align: middle;
border-radius: 25px;
cursor: pointer;
}
3. Buat folder content dan buat file header.php pada folder tersebut yang berisi
<div class="main_image">
<div style="height:186px"></div>
<div class="center_area">
<div class="header_content">
<div id="title1">Title 1</div>
<div id="title2">Title 2</div>
<div id="title2">Title 2</div>
<div style="height:21px"></div>
<div id="date">APRIL-MEI 2016</div>
<div style="height:31px"></div>
<div class="button_green">
<div style="height:25px"></div>
DAFTAR SEKARANG
</div>
<div style="height:74px"></div>
<div id="button2">
<div style="height:10px"></div>
LIHAT DETAIL ACARA
</div>
</div>
</div>
</div>
4. Buat folder images dan isikan sebuah gambar pada folder tersebut sebagai
gambar background header dengan nama gambar main_image
5. Terakhir koneksikan seluruh file tersebut pada file index.php dengan
mengetikan
<?php include_once "_header.php" ?>
<?php include_once "content/header.php" ?>
<?php include_once "_footer.php" ?>
6. Sehingga akan terbentuk susunan file sebagai berikut
Semua file .php saya letakkan pada folder yang berbeda-beda dan saya pisah-pisah agar code tidak terlalu panjang pada satu halaman saja, inilah yang disebut dengan refactor. sehingga code tampak lebih rapi..
Setelah semua sudah dibuat selanjutnya mengecek pada browser dengan mengetikkan localhost/webcoboy dan taraaaaaa..
---Selamat Mencoba---
