Panduan Membuat Website Berita Olahraga dengan PHP dan HTML
Dalam dunia digital saat ini, memiliki website berita olahraga adalah cara yang efektif untuk menyajikan informasi terkini kepada penggemar olahraga. Dalam artikel ini, kita akan membahas langkah-langkah untuk membuat website berita olahraga sederhana menggunakan PHP dan HTML.
1. Persiapan Awal
Sebelum memulai, pastikan server web Anda mendukung PHP. Anda dapat menggunakan server lokal seperti XAMPP atau mengunggah proyek Anda ke hosting web yang mendukung PHP.
2. Struktur Proyek
Buat struktur dasar proyek Anda. Misalnya:
|- /website_berita_olahraga
|- /css
|- style.css
|- /images
|- /includes
|- header.php
|- footer.php
|- index.php
|- berita.php
|- kontak.php
|- tentang.php
|- database.php- Direktori “css” akan berisi file stylesheet untuk tata letak dan desain.
- Direktori “images” akan digunakan untuk menyimpan gambar-gambar yang digunakan di situs.
- Direktori “includes” akan berisi file-file PHP yang mencakup header dan footer, memudahkan pemeliharaan.
3. Database
Anda akan membutuhkan database untuk menyimpan berita olahraga. Gunakan MySQL atau database lainnya dan buat tabel “berita” dengan kolom-kolom seperti id, judul, konten, dan tanggal.
CREATE TABLE berita (
id INT AUTO_INCREMENT PRIMARY KEY,
judul VARCHAR(255) NOT NULL,
konten TEXT NOT NULL,
tanggal DATE NOT NULL
);4. Kode PHP dan HTML Dasar
a. database.php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "nama_database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
?>b. header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Website Berita Olahraga</title>
</head>
<body>
<header>
<h1>Website Berita Olahraga</h1>
<nav>
<ul>
<li><a href="index.php">Beranda</a></li>
<li><a href="berita.php">Berita</a></li>
<li><a href="kontak.php">Kontak</a></li>
<li><a href="tentang.php">Tentang Kami</a></li>
</ul>
</nav>
</header>
<main>c. footer.php
</main>
<footer>
<p>© 2023 Website Berita Olahraga</p>
</footer>
</body>
</html>d. index.php
<?php include 'includes/header.php'; ?>
<section>
<h2>Selamat Datang di Website Berita Olahraga</h2>
<p>Temukan berita terbaru seputar dunia olahraga di sini.</p>
</section>
<?php include 'includes/footer.php'; ?>e. berita.php
<?php
include 'includes/header.php';
include 'database.php';
// Ambil berita dari database
$sql = "SELECT * FROM berita ORDER BY tanggal DESC";
$result = $conn->query($sql);
?>
<section>
<h2>Berita Olahraga Terbaru</h2>
<?php
while ($row = $result->fetch_assoc()) {
echo "<article>";
echo "<h3>{$row['judul']}</h3>";
echo "<p>{$row['konten']}</p>";
echo "<p class='tanggal'>{$row['tanggal']}</p>";
echo "</article>";
}
?>
</section>
<?php include 'includes/footer.php'; ?>f. kontak.php
<?php include 'includes/header.php'; ?>
<section>
<h2>Hubungi Kami</h2>
<p>Jika Anda memiliki pertanyaan atau komentar, silakan hubungi kami di alamat email berikut: info@beritaolahraga.com</p>
</section>
<?php include 'includes/footer.php'; ?>g. tentang.php
<?php include 'includes/header.php'; ?>
<section>
<h2>Tentang Kami</h2>
<p>Website Berita Olahraga menyajikan informasi terkini seputar berita olahraga dari berbagai cabang olahraga. Kami berkomitmen untuk memberikan informasi yang akurat dan terpercaya.</p>
</section>
<?php include 'includes/footer.php'; ?>5. CSS untuk Desain
a. style.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
margin-right: 20px;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
section {
margin-bottom: 20px;
}
article {
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
padding-bottom: 20px;
}
h2, h3 {
color: #333;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
position: fixed;
bottom: 0;
width: 100%;
}6. Uji Coba Website
- Pastikan server PHP dan MySQL berjalan.
- Buka
index.phpdi browser.
Dengan langkah-langkah di atas, Anda telah membuat website berita olahraga sederhana menggunakan PHP dan HTML. Selanjutnya, Anda dapat mengembangkan fitur-fitur tambahan seperti formulir pengiriman berita, komentar pengguna, dan integrasi media sosial untuk meningkatkan interaktivitas dan keterlib
atan pengguna.
