Cara Membuat Website Sederhana dengan PHP, MySQL, dan CSS

Hello Sobat Sederhana! Apakah kamu ingin belajar cara membuat website sederhana dengan PHP, MySQL, dan CSS? Jika iya, kamu berada di artikel yang tepat. Pada artikel ini, kami akan membahas langkah-langkah membuat website sederhana dengan PHP, MySQL, dan CSS. Kami akan membahas secara rinci setiap langkah dan memberikan contoh kode yang bisa kamu gunakan. Mari kita mulai!

Persiapan

Sebelum mulai membuat website, ada beberapa hal yang perlu disiapkan. Berikut ini adalah persiapan yang perlu kamu lakukan:

Hal yang Perlu Disiapkan	Keterangan
Text Editor	Untuk menulis dan mengedit kode, kamu bisa menggunakan text editor seperti Visual Studio Code, Sublime Text, Atom, atau text editor lainnya.
Web Server	Kamu juga membutuhkan web server untuk menjalankan website yang kamu buat. Kamu bisa menggunakan XAMPP, WAMP, atau web server lainnya.
Database Server	Jika kamu ingin menggunakan database, kamu juga membutuhkan database server seperti MySQL.

Langkah 1: Membuat Folder dan File Utama

Langkah pertama yang perlu dilakukan adalah membuat folder dan file utama. Buat sebuah folder di dalam direktori htdocs (jika menggunakan XAMPP atau WAMP). Beri nama folder tersebut sesuai dengan nama website yang ingin kamu buat. Di dalam folder tersebut, buat sebuah file utama dengan nama index.php.

Contoh Kode:

<!DOCTYPE html><html><head><title>Website Sederhana</title></head><body></body></html>

Langkah 2: Menambahkan CSS

Setelah membuat file utama, langkah berikutnya adalah menambahkan CSS. Buat sebuah folder di dalam folder website dan beri nama css. Di dalam folder tersebut, buat sebuah file dengan nama style.css.

Contoh Kode:

body {background-color: #f2f2f2;}h1 {color: darkblue;font-size: 36px;font-weight: bold;text-align: center;}p {color: black;font-size: 16px;line-height: 1.5;margin: 10px;text-align: justify;}

Langkah 3: Membuat Header

Setelah menambahkan CSS, langkah selanjutnya adalah membuat header untuk website. Buat sebuah file dengan nama header.php di dalam folder website.

TRENDING 🔥 Cara Membuat Capo Gitar Sederhana untuk Sobat Sederhana

Contoh Kode:

<header><h1>Website Sederhana</h1></header>

Langkah 4: Membuat Navigation Bar

Setelah membuat header, langkah selanjutnya adalah membuat navigation bar. Buat sebuah file dengan nama navbar.php di dalam folder website.

Contoh Kode:

<nav><a href="#">Home</a><a href="#">About</a><a href="#">Contact</a></nav>

Langkah 5: Membuat Footer

Setelah membuat navigation bar, langkah selanjutnya adalah membuat footer. Buat sebuah file dengan nama footer.php di dalam folder website.

Contoh Kode:

<footer><p>Copyright © 2021 Website Sederhana</p></footer>

Membuat Halaman Home

Langkah 6: Menambahkan Konten ke Halaman Utama

Setelah membuat folder dan file utama serta menambahkan CSS, header, navigation bar, dan footer, langkah selanjutnya adalah menambahkan konten ke halaman utama. Di dalam file index.php, tambahkan konten seperti judul, paragraf, dan gambar.

Contoh Kode:

<?php include 'header.php'; ?><?php include 'navbar.php'; ?><main><h2>Selamat Datang di Website Sederhana</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit quis quam vel pellentesque. Integer tempor, nisl id finibus blandit, mauris risus malesuada urna, a ullamcorper lectus justo nec metus. Sed a hendrerit velit. Praesent ac ultricies ex, vel tincidunt nibh. In bibendum urna vel ex maximus, ut sagittis quam aliquam. Donec suscipit enim quis lobortis tempus. Fusce rutrum, enim eget vulputate volutpat, velit neque rhoncus dui, sit amet ultricies velit justo quis purus. Nunc pretium sem et dolor bibendum faucibus. Nam nec elit auctor, vulputate ipsum vel, sodales ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p><img src="gambar.jpg" alt="Gambar"></main><?php include 'footer.php'; ?>

Langkah 7: Menampilkan Data dari Database

Jika kamu ingin menampilkan data dari database, kamu bisa membuat file koneksi ke database dan query untuk menampilkan data. Buat sebuah file dengan nama koneksi.php di dalam folder website.

TRENDING 🔥 Cara Membuat Peta Sederhana di ArcGIS

Contoh Kode:

<?php$host = "localhost";$username = "root";$password = "";$database = "db_website";$koneksi = mysqli_connect($host, $username, $password, $database);if(mysqli_connect_errno()) {echo "Koneksi Gagal: " . mysqli_connect_error();}?>

Setelah membuat file koneksi ke database, kamu bisa membuat file untuk menampilkan data dari database. Buat sebuah file dengan nama tampil_data.php di dalam folder website.

Contoh Kode:

<?phpinclude 'koneksi.php';$query = "SELECT * FROM tb_data";$result = mysqli_query($koneksi, $query);if(mysqli_num_rows($result) > 0) {while($row = mysqli_fetch_assoc($result)) {echo "<h3>" . $row['judul'] . "</h3>";echo "<p>" . $row['isi'] . "</p>";}} else {echo "Data Tidak Ditemukan";}mysqli_close($koneksi);?>

Setelah membuat file tampil data, kamu bisa menampilkan data di halaman utama. Di dalam file index.php, tambahkan kode berikut di bawah konten yang sudah ada sebelumnya:

<?php include 'tampil_data.php'; ?>

Membuat Halaman About

Langkah 8: Membuat Halaman About

Selain halaman utama, kamu juga bisa membuat halaman about. Buat sebuah file dengan nama about.php di dalam folder website.

Contoh Kode:

<?php include 'header.php'; ?><?php include 'navbar.php'; ?><main><h2>Tentang Kami</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit quis quam vel pellentesque. Integer tempor, nisl id finibus blandit, mauris risus malesuada urna, a ullamcorper lectus justo nec metus. Sed a hendrerit velit. Praesent ac ultricies ex, vel tincidunt nibh. In bibendum urna vel ex maximus, ut sagittis quam aliquam. Donec suscipit enim quis lobortis tempus. Fusce rutrum, enim eget vulputate volutpat, velit neque rhoncus dui, sit amet ultricies velit justo quis purus. Nunc pretium sem et dolor bibendum faucibus. Nam nec elit auctor, vulputate ipsum vel, sodales ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></main><?php include 'footer.php'; ?>

Membuat Halaman Contact

Langkah 9: Membuat Formulir Contact

Selain halaman utama dan about, kamu juga bisa membuat halaman contact. Buat sebuah file dengan nama contact.php di dalam folder website.

Contoh Kode:

<?php include 'header.php'; ?><?php include 'navbar.php'; ?><main><h2>Kontak Kami</h2><form action="simpan_data.php" method="post"><label for="nama">Nama:</label><input type="text" id="nama" name="nama"><br><label for="email">Email:</label><input type="email" id="email" name="email"><br><label for="pesan">Pesan:</label><textarea id="pesan" name="pesan"></textarea><br><input type="submit" value="Kirim"></form></main><?php include 'footer.php'; ?>

Langkah 10: Menyimpan Data dari Formulir Contact ke Database

Setelah membuat formulir contact, kamu bisa membuat file untuk menyimpan data dari formulir ke database. Buat sebuah file dengan nama simpan_data.php di dalam folder website.

TRENDING 🔥 Cara Memasak Fuyunghai Ayam Sederhana Untuk Sobat Sederhana

Contoh Kode:

<?phpinclude 'koneksi.php';$nama = $_POST['nama'];$email = $_POST['email'];$pesan = $_POST['pesan'];$query = "INSERT INTO tb_pesan (nama, email, pesan) VALUES ('$nama', '$email', '$pesan')";$result = mysqli_query($koneksi, $query);if($result) {echo "Data Berhasil Disimpan";} else {echo "Data Gagal Disimpan";}mysqli_close($koneksi);?>

Membuat Halaman Admin

Langkah 11: Membuat Halaman Login Admin

Jika kamu ingin membuat halaman admin untuk memanajemen data di website, kamu bisa membuat halaman login admin terlebih dahulu. Buat sebuah file dengan nama login.php di dalam folder website.

Contoh Kode:

<!DOCTYPE html><html><head><title>Login Admin</title></head><body><h2>Login Admin</h2><form action="cek_login.php" method="post"><label for="username">Username:</label><input type="text" id="username" name="username"><br><label for="password">Password:</label><input type="password" id="password" name="password"><br><input type="submit" value="Login"></form></body></html>

Langkah 12: Menguji Login Admin

Setelah membuat halaman login admin, kamu bisa membuat file untuk mengecek apakah username dan password yang dimasukkan sudah benar atau belum. Buat sebuah file dengan nama cek_login.php di dalam folder website.

Contoh Kode:

<?phpsession_start();$username = $_POST['username'];$password = $_POST['password'];if($username == "admin" && $password == "123456") {$_SESSION['username'] = $username;header("location:admin.php");} else {echo "Login Gagal";}?>

Langkah 13: Membuat Halaman Admin

Jika login berhasil, kamu akan diarahkan ke halaman admin. Buat sebuah file dengan nama admin.php di dalam folder website.

Contoh Kode:

<?phpsession_start();if(!isset($_SESSION['username'])) {header("location:login.php");}?><!DOCTYPE html><html><head><title>Halaman Admin</title></head><body><h2>Selamat Datang di Halaman Admin</h2><p><a href="logout.php">Logout</a></p></body></html>

Langkah 14: Membuat Logout Admin

Jika kamu ingin logout dari halaman admin, kamu bisa membuat file untuk logout. Buat sebuah file dengan nama logout.php di dalam folder website.

Contoh Kode:

&
Cara Membuat Website Sederhana dengan PHP, MySQL, dan CSS