3.
Mulai Buat Halaman Lainnya
Agar website bisa berfungsi dengan baik dan menyediakan fitur yang
dibutuhkan pengguna, Anda perlu membuat beberapa halaman penting.
Setiap halaman ini akan membantu menghadirkan pengalaman pengguna
yang lebih optimal di website Anda.
Di bagian ini, kami akan memandu Anda membuat halaman yang
sebaiknya ditambahkan ke website, lengkap dengan contoh kodenya.
1. Homepage
Di halaman ini, Anda bisa menambahkan menu navigasi website untuk
mengarahkan pengunjung ke halaman lainnya, serta menampilkan
deskripsi website.
Anda bisa menyatukan halaman homepage dalam file [Link] saja
apabila hanya ingin membuat website PHP sederhana. Dengan begitu,
saat pengunjung mengakses website Anda, mereka akan langsung
diarahkan ke homepage.
Buka file [Link] Anda, lalu tambahkan kode HTML berikut ke
dalamnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Utama</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<nav>
<ul>
<li><a href="[Link]">Tentang Saya</a></li>
<li><a href="[Link]">Kontak</a></li>
<li><a href="[Link]">Login</a></li>
</ul>
</nav>
<section>
<h1>Selamat Datang di Hostinger!</h1>
<p>Website ini dibuat sebagai latihan untuk belajar membuat website
menggunakan PHP.</p>
</section>
</body>
</html>
Kode di atas menyertakan tag <nav> yang berfungsi untuk membuat menu
navigasi agar homepage terhubung dengan halaman lain, seperti Tentang
Saya, Kontak, dan Login. Dengan navigasi ini, pengunjung bisa beralih ke
halaman lain dengan mudah.
Kemudian, terdapat tag <section> yang memuat heading utama dan
paragraf deskripsi. Anda bisa mengganti teks ini sesuai kebutuhan,
misalnya untuk menambahkan slogan atau deskripsi layanan yang Anda
sediakan.
Tips Berguna
Pastikan Anda sudah menyiapkan semua file yang dirujuk di menu
navigasi, seperti [Link] dan [Link]. Kalau tidak, link di
homepage Anda akan mengarah ke halaman kosong atau menampilkan
error.
Untuk mempercantik tampilan halaman, tambahkan kode berikut ini ke
file [Link] di bawah kode pertama tadi:
/* ----------------------------- */
/* GAYA UNTUK HALAMAN INDEX ([Link]) */
/* ----------------------------- */
/* Navigasi */
nav ul {
list-style: none; /* Menghapus bullet */
margin: 0;
padding: 0;
display: flex; /* Menjadikan daftar flexbox */
justify-content: center;
background-color: #333; /* Latar belakang gelap */
}
nav ul li {
margin: 0 15px; /* Jarak antar item */
}
nav ul li a {
color: white; /* Teks putih */
text-decoration: none;
font-size: 1.2rem;
padding: 10px 15px; /* Ruang dalam link */
display: block;
border-radius: 5px;
transition: background-color 0.3s; /* Efek hover */
}
nav ul li a:hover {
background-color: #575757; /* Latar saat hover */
}
/* Konten utama */
section {
text-align: center;
margin: 50px auto;
}
section h1 {
color: #00796b; /* Warna heading hijau segar */
}
section p {
color: #004d40; /* Warna paragraf hijau tua */
}
Berikut tampilannya setelah halaman ini diberi style melalui CSS:
2. Halaman Tentang Saya
Halaman Tentang Saya membantu memberikan sentuhan yang lebih
personal pada website. Halaman ini bisa digunakan untuk
memperkenalkan diri Anda atau kisah yang menginspirasi Anda membuat
website ini.
Siapkan halaman dengan membuat file baru bernama [Link].
Tambahkan kode berikut untuk mengisi kontennya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tentang Saya</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Tentang Saya</h1>
<p>Halo! Saya John Hostinger, web developer pemula yang sedang belajar
membuat website PHP. Website ini merupakan contoh proyek pertama saya.
Terima kasih sudah berkunjung!</p>
</body>
</html>
Selain itu, Anda bisa menambahkan foto diri menggunakan tag <img> agar
halaman ini terlihat lebih menarik. Berikut contoh kodenya, yang bisa Anda
sisipkan di dalam tag <body>:
<img src="images/[Link]" alt="Foto Saya" width="200">
Pastikan file gambar disimpan di folder proyek website Anda dan dirujuk
dengan benar dalam kode. Pada contoh di atas, file gambar kami
diletakkan di folder tambahan bernama images, dan diberi
nama [Link].
Kemudian, tambahkan kode CSS berikut ke file [Link] di bawah kode
sebelumnya untuk mempercantik halaman yang sudah Anda buat:
/* ----------------------------- */
/* GAYA UNTUK HALAMAN TENTANG SAYA ([Link]) */
/* ----------------------------- */
/* Gaya gambar profil */
img {
display: block;
margin: 20px auto;
border-radius: 50%;
width: 150px;
height: 150px;
object-fit: cover;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Efek bayangan */
}
Tampilannya akan menjadi lebih rapi dan profesional seperti berikut ini:
3. Halaman Kontak
Anda perlu menyediakan halaman kontak agar pengunjung bisa
mendapatkan informasi lebih lanjut untuk menghubungi Anda.
Caranya, buat file baru bernama [Link] dan tambahkan kode
berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kontak</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Let's Connect With Me!</h1>
<form action="[Link]" method="POST">
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">Pesan:</label>
<textarea id="message" name="message" required></textarea>
<br>
<button type="submit" name="submit">Kirim</button>
</form>
</body>
</html>
Formulir ini memiliki tiga kolom input, yaitu nama, email, dan pesan.
Setelah itu, sisipkan kode berikut ini ke dalam file [Link] Anda untuk
mengatur tampilan halaman Kontak:
/* ----------------------------- */
/* GAYA UNTUK HALAMAN KONTAK ([Link]) */
/* ----------------------------- */
/* Formulir kontak */
form {
max-width: 500px;
margin: 50px auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Efek bayangan */
}
/* Label */
form label {
display: block;
text-align: left;
margin-bottom: 5px;
font-weight: bold;
color: #2e7d32; /* Warna hijau tua */
}
/* Input dan textarea */
form input,
form textarea {
width: 100%; /* Lebar penuh */
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 1rem;
}
form textarea {
height: 120px;
resize: none; /* Nonaktifkan resize */
}
/* Tombol kirim */
form button {
width: 100%; /* Tombol selebar form */
font-size: 1.1rem;
}
form button:hover {
background-color: #2e7d32; /* Hijau lebih gelap saat hover */
}
/* Pesan konfirmasi */
form p {
margin-top: 15px;
font-size: 1rem;
color: #2e7d32; /* Warna hijau tua */
}
Halaman Kontak Anda pun akan terlihat lebih menarik dan fungsional
setelah diberi stylesheet, seperti berikut ini:
4. Halaman Login
Apabila website Anda menyediakan layanan yang membutuhkan data atau
kredensial pengguna, Anda perlu membuat halaman login. Di sini, kami
akan membuat formulir login website sederhana yang memproses data
pengguna dengan validasi statis.
Mulailah dengan membuat file baru bernama [Link] di folder proyek
website Anda. Selanjutnya, tambahkan kode berikut ke dalam file tersebut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Login</h1>
<form method="POST">
<label for="username">Nama Pengguna:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Kata Sandi:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit" name="submit">Login</button>
</form>
<?php
if (isset($_POST['submit'])) {
$username = $_POST['username'];
$password = $_POST['password'];
// Validasi statis
if ($username === "admin" && $password === "1234") {
echo "<p>Login berhasil. Selamat datang, $username!</p>";
} else {
echo "<p>Login gagal. Periksa nama pengguna dan kata sandi Anda.</p>";
}
}
?>
</body>
</html>
Kode ini akan membuat formulir login dengan dua input, yaitu nama
pengguna dan kata sandi. Pada contoh ini, kredensialnya
adalah admin untuk nama pengguna, dan 1234 untuk kata sandi.
Penting! Harap diperhatikan bahwa validasi statis dalam kode di atas
hanyalah contoh untuk memeriksa kecocokan kombinasi nama pengguna
dan kata sandi. Metode ini tidak dianjurkan untuk website sungguhan,
karena tidak aman.
Untuk mempercantik tampilannya, masukkan kode CSS berikut ke
file [Link], setelah kode halaman Kontak tadi:
/* ----------------------------- */
/* GAYA UNTUK HALAMAN LOGIN ([Link]) */
/* ----------------------------- */
/* Tata letak body untuk halaman login */
[Link]-page {
background-color: #f3e5f5; /* Latar ungu muda */
display: flex; /* Menjadikan flexbox */
justify-content: center; /* Pusatkan secara horizontal */
align-items: center; /* Pusatkan secara vertikal */
height: 100vh; /* Tinggi penuh */
padding: 20px;
}
/* Form login */
[Link]-form {
max-width: 400px; /* Lebar form */
width: 100%; /* Lebar penuh di layar kecil */
padding: 20px;
background-color: white; /* Latar putih */
border-radius: 10px; /* Membulatkan sudut */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Bayangan lembut */
}
/* Heading form */
form h1 {
font-size: 2rem;
color: #6a1b9a; /* Warna ungu cerah */
margin-bottom: 20px;
text-align: center;
}
/* Input login */
form input {
width: 100%; /* Lebar penuh */
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
}
/* Tombol login */
form button {
background-color: #8e24aa; /* Warna ungu cerah */
}
form button:hover {
background-color: #6a1b9a; /* Ungu lebih gelap saat hover */
}
/* Pesan error */
form [Link] {
margin-top: 10px;
font-size: 1rem;
color: #d32f2f; /* Merah untuk error */
text-align: center;
}
/* ----------------------------- */
/* RESPONSIVITAS UNTUK SEMUA HALAMAN */
/* ----------------------------- */
@media (max-width: 600px) {
form {
padding: 15px;
}
form button {
font-size: 0.9rem;
}
}
Setelah pengguna mengklik tombol Login, data formulir akan diproses
oleh PHP. Apabila validasi berhasil, pesan Login berhasil akan
ditampilkan. Kalau tidak, pengguna akan melihat pesan error tentang login
yang gagal.
Dengan menambahkan halaman-halaman ini, website Anda sudah memiliki
kerangka dasar yang siap digunakan.
Setelah ini, Anda bisa melengkapi fitur-fitur website dengan mengedit file
CSS untuk menyesuaikan tampilannya, menambahkan validasi yang lebih
aman, atau menghubungkan website ke database.