Silakan baca langkah sebelumnya jika belum membacanya.
Langkah ini akan lebih susah dari membuat halaman login. Di halaman home sebenarnya kita hanya menampilkan kata sambutan kepada user, dan itu mudah. Letak susahnya ketika membuat header dan navbarnya. Ngga usah khawatir.. header hanya akan dibuat sekali saja, seterusnya tinggal copy paste.
Sebelum mulai, mari lihat lagi desainnya.
Sepertinya itu masih kurang cukup untuk menggambarkan bagaimana struktur HTMLnya. Mari buat mode wireframenya.
Oke mari kita mulai mengoding.
- Buat file index.php
- Isi dengan html standar dengan title "Catatan Perjalanan", dan juga masukkan link css-nya.
<!DOCTYPE html>
<html>
<head>
<title>Catatan Perjalanan</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
- Di tag body tambahkan div dengan class "pembungkus"
<div class="pembungkus"></div>
- Di class pembungkus tambahkan tag div dengan class "header", tag nav dengan class "navbar", dan juga tag div dengan class "sambutan"
<div class="header"></div>
<nav class="navbar"></nav>
<div class="sambutan"></div>
- Siapkan sebuah gambar (bebas, kalau bisa resolusinya 1:1). Tambahkan kode berikut di dalam class header
<img src="logo.png">
<div>
<h1>PEDULI DIRI</h1>
<p>Catatan Perjalanan</p>
</div>
- Di dalam class navbar tambahkan kode berikut:
<a href="index.php">Home</a>
<a href="tampil.php">Catatan Perjalan</a>
<a href="isi.php">Isi Data</a>
<a href="logout.php">Keluar</a>
- Dan di class sambutan tambah kode berikut:
<center><h1>Halo, selamat datang di aplikasi catatan perjalanan.</h1></center>
- Tambahkan css di file style.css, kodenya ada dibawah ini(maaf tidak dijelaskan satu-persatu):
.pembungkus {
width: 100%; /*lebar full*/
max-width: 1200px; /*lebar maksimal*/
margin: 0 auto; /*posisi ketengah*/
}
.header {
display: flex;
background: #777;
color: #ddd; /*warna tulisan abu2 putih*/
}
.header img{
height: 100px;
margin: 20px;
}
.header div {
margin: 20px;
}
.navbar {
background: #444;
}
.navbar a {
padding: 20px;
line-height: 50px; /*tinggi text*/
color: white;
}
/*perubahan ketika cursor berada di atasnya*/
.navbar a:hover {
background: #888;
font-size: 20px;
}
.sambutan {
margin-top: 100px;
background: #999;
border-radius: 10px;
padding: 40px 20px;
}
Preview:
Karena header dan navbar akan digunakan berkali-kali, sebaiknya bagian header dan navbar dipisah ke file yang lain. Supaya jika ada perubahan, maka hanya perlu mengedit satu file saja.
1. Pertama buat file header.php.
2. Lalu cut file index.php dari baris kesatu sampai akhir tag nav. Dalam kasus kode di bawah sampai baris ke-21
3. Pastekan kode tadi di file
header.php4. Pada baris ke satu di index.php tambahkan kode berikut:
<?php include 'header.php'; ?>
Seharusnya hasilnya sama dengan sebelumnya.
Jika merasa melewatkan sesuatu, kodenya bisa didownload di sini.
Terimakasih sudah mampir😊😉. Selanjutnya membuat tampilan untuk tampil data dan isi data.👋👋👋
Komentar
Posting Komentar
Saya sangat menghargai kesopanan Anda😊