Panduan Lengkap: Membangun Website Sederhana dengan HTML dan PHP
Membangun website sederhana merupakan langkah awal yang menarik bagi siapa pun yang ingin memahami dasar-dasar pengembangan web. Dalam panduan ini, kita akan fokus pada penggunaan HTML (Hypertext Markup Language) untuk struktur dasar dan PHP (Hypertext Preprocessor) untuk menambahkan fungsi dinamis ke dalam situs web Anda.
Langkah 1: Persiapan Lingkungan Pengembangan
Sebelum kita memulai, pastikan Anda telah menginstal editor teks seperti Visual Studio Code, Sublime Text, atau editor lainnya. Selain itu, pastikan Anda telah menginstal server lokal seperti XAMPP atau MAMP untuk menjalankan kode PHP.
Langkah 2: Membuat Struktur Dasar HTML
Buat file baru dengan ekstensi .html, misalnya index.html, dan ketikkan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Sederhana</title>
</head>
<body>
<header>
<h1>Selamat Datang di Website Sederhana</h1>
</header>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
<section>
<h2>Artikel Terbaru</h2>
<article>
<h3>Judul Artikel Pertama</h3>
<p>Isi artikel pertama...</p>
</article>
<!-- Tambahkan artikel lainnya sesuai kebutuhan -->
</section>
<footer>
<p>© 2023 Website Sederhana. All rights reserved.</p>
</footer>
</body>
</html>Langkah 3: Menambahkan Kode PHP
Sekarang, mari tambahkan beberapa fungsi dinamis menggunakan PHP. Perbarui file index.html menjadi index.php dan tambahkan kode PHP di dalamnya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Sederhana</title>
</head>
<body>
<header>
<h1>Selamat Datang di Website Sederhana</h1>
</header>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
<section>
<h2>Artikel Terbaru</h2>
<?php
// Contoh loop untuk menampilkan beberapa artikel
for ($i = 1; $i <= 3; $i++) {
echo "<article>";
echo "<h3>Judul Artikel $i</h3>";
echo "<p>Isi artikel $i...</p>";
echo "</article>";
}
?>
</section>
<footer>
<p>© <?php echo date("Y"); ?> Website Sederhana. All rights reserved.</p>
</footer>
</body>
</html>Kode PHP di atas menunjukkan cara menggunakan loop untuk menampilkan beberapa artikel dan bagaimana menampilkan tahun saat ini di footer.
Langkah 4: Menjalankan Website Anda
Simpan file index.php dan letakkan di dalam direktori web server lokal Anda (misalnya, di dalam folder htdocs pada XAMPP). Buka browser dan akses http://localhost/nama-folder-anda/index.php. Anda seharusnya melihat website sederhana Anda dengan artikel terbaru dan tahun saat ini di footer.
Selamat, Anda telah berhasil membuat website sederhana dengan HTML dan PHP! Panduan ini hanya memperkenalkan dasar-dasar, dan Anda dapat terus mengembangkan situs web Anda dengan menambahkan fitur dan desain yang lebih kompleks.
