Close Menu

Membangun Website Sederhana dengan PHP

Table of Contents

Membangun website sederhana dengan PHP melibatkan beberapa langkah dasar, mulai dari menyiapkan lingkungan pengembangan, membuat struktur folder, hingga menulis kode PHP untuk menangani halaman dan data. Berikut adalah panduan langkah demi langkah untuk membangun website sederhana dengan PHP.

Menyiapkan Lingkungan Pengembangan #

Install Web Server dan PHP: Anda bisa menggunakan XAMPP, WAMP, atau MAMP untuk menginstal Apache, PHP, dan MySQL pada komputer Anda.

Konfigurasi Web Server: Pastikan web server berjalan dan file PHP dapat dieksekusi. Pada XAMPP, Anda bisa memulai Apache dan MySQL dari panel kontrol XAMPP.

Membuat Struktur Folder #

Buat struktur folder yang rapi untuk proyek Anda. Berikut adalah contoh struktur folder:

mywebsite/
│
├── index.php
├── about.php
├── contact.php
├── styles.css
└── includes/
    ├── header.php
    └── footer.php

Membuat Halaman Utama #

index.php

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <?php include 'includes/header.php'; ?>
    
    <h1>Selamat Datang di My Website</h1>
    <p>Ini adalah halaman utama website saya.</p>
    
    <?php include 'includes/footer.php'; ?>
</body>
</html>

Membuat Halaman Lain #

about.php

<!DOCTYPE html>
<html>
<head>
    <title>About Us</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <?php include 'includes/header.php'; ?>
    
    <h1>Tentang Kami</h1>
    <p>Informasi tentang kami.</p>
    
    <?php include 'includes/footer.php'; ?>
</body>
</html>

contact.php

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <?php include 'includes/header.php'; ?>
    
    <h1>Hubungi Kami</h1>
    <form method="post" action="contact.php">
        Nama: <input type="text" name="name"><br><br>
        Email: <input type="email" name="email"><br><br>
        Pesan: <textarea name="message"></textarea><br><br>
        <input type="submit" value="Kirim">
    </form>
    
    <?php
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        
        echo "<h2>Pesan yang Dikirim:</h2>";
        echo "Nama: " . $name . "<br>";
        echo "Email: " . $email . "<br>";
        echo "Pesan: " . $message . "<br>";
    }
    ?>
    
    <?php include 'includes/footer.php'; ?>
</body>
</html>

Membuat Header dan Footer #

includes/header.php

<div class="header">
    <h2>My Website</h2>
    <nav>
        <a href="index.php">Home</a> |
        <a href="about.php">About</a> |
        <a href="contact.php">Contact</a>
    </nav>
</div>

includes/footer.php

<div class="footer">
    <p>© 2024 My Website</p>
</div>

Menambahkan Gaya dengan CSS #

styles.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.header, .footer {
    background-color: #f1f1f1;
    text-align: center;
    padding: 10px;
}

.header h2 {
    margin: 0;
}

nav a {
    margin: 0 15px;
    text-decoration: none;
    color: #333;
}

nav a:hover {
    text-decoration: underline;
}

h1 {
    color: #333;
}

form {
    margin: 20px 0;
}

input[type="text"], input[type="email"], textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
}

input[type="submit"] {
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #555;
}

Dengan struktur dan kode di atas, Anda telah membangun website sederhana dengan beberapa halaman dasar dan gaya CSS. Anda dapat mengembangkan lebih lanjut dengan menambahkan lebih banyak halaman, fitur, dan memperindah tampilan menggunakan lebih banyak CSS dan JavaScript. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.

What are your Feelings