Cara Membuat Website Sederhana Dengan PHP, MySQL Dan CSS
Jika Anda ingin membangun sebuah website untuk bisnis atau keperluan pribadi, ada beberapa teknologi yang perlu Anda ketahui. Di artikel ini, kami akan membahas cara membuat website sederhana namun modern dan responsive menggunakan PHP, MySQL dan CSS. Setelah membaca artikel ini, Anda akan memiliki pemahaman dasar tentang cara membangun website, serta dapat memodifikasi dan mengembangkannya sesuai dengan kebutuhan Anda.
Apa itu PHP, MySQL Dan CSS?
Sebelum kami membahas langkah-langkah detail tentang cara membuat website, mari kita bahas teknologi yang akan kita gunakan.
PHP
PHP atau Hypertext Preprocessor adalah bahasa pemrograman scripting yang umum digunakan untuk membangun aplikasi web. Dalam hal ini, kita akan menggunakan PHP untuk memproses data dan mengakses database MySQL.
MySQL
MySQL adalah sistem manajemen database open source yang banyak digunakan untuk mengelola data di website. Kita akan menggunakan MySQL untuk membangun database untuk website kita.
CSS
CSS atau Cascading Style Sheets adalah bahasa stylesheet yang digunakan untuk mengontrol tampilan website. Dalam hal ini, kita akan menggunakan CSS untuk membuat website kita terlihat modern dan responsive.
Langkah-Langkah Untuk Membuat Website Sederhana
Sekarang kita akan melewati langkah-langkah detail tentang cara membangun website sederhana menggunakan PHP, MySQL dan CSS.
Langkah 1: Membuat Struktur Dasar Website
Langkah pertama dalam pembuatan website adalah membuat struktur dasar. Di bawah ini adalah contoh HTML untuk membuat struktur dasar:
<!DOCTYPE html> <html> <head> <title>Judul Website Anda</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>Judul Utama</h1> <nav> <ul> <li><a href="#">Beranda</a></li> <li><a href="#">Tentang Kami</a></li> <li><a href="#">Kontak</a></li> </ul> </nav> </header> <main> <section> <h2>Judul Bagian</h2> <p>Paragraf di bagian ini</p> </section> </main> <footer> <p>Copyright © Tahun</p> </footer> </body> </html>
Seperti yang Anda lihat, website terdiri dari beberapa bagian: header, main, dan footer. Header berisi judul utama dan navigasi. Bagian mai n merupakan isi dari website Anda, dan footer berisi informasi hak cipta atau kredit.
Langkah 2: Menambahkan Database MySQL
Setelah membuat struktur dasar website kita, inilah saatnya menambahkan database MySQL. Pertama, kita perlu menginstal MySQL di komputer lokal kita. Kemudian kita dapat membuka program MySQL dan membuat database baru dengan mengetikkan perintah SQL berikut:
CREATE DATABASE nama_database;
Kita juga perlu membuat tabel untuk database kita. Misalnya, Anda ingin membuat tabel untuk data pengguna. Berikut adalah sintaks SQL untuk membuat tabel ini:
CREATE TABLE pengguna ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, nama VARCHAR(30) NOT NULL, email VARCHAR(50) NOT NULL, password VARCHAR(30) NOT NULL, tgl_daftar TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP )
Dalam tabel ini, kita memiliki kolom id (untuk nomor id pengguna, akan secara otomatis ditambahkan dengan increment), nama, email, password, dan tgl_daftar (untuk tanggal pendaftaran). Anda dapat menyesuaikan kolom database Anda sesuai kebutuhan Anda.
Langkah 3: Menambahkan Fitur Login dan Registrasi
Selanjutnya, kita akan menambahkan fitur login dan registrasi ke website kita. Ini memungkinkan pengguna untuk membuat akun dan masuk ke website mereka.
Untuk membuat formulir login, buatlah file login.php dan masukkan kode berikut:
<!DOCTYPE html> <html> <head> <title>Log in</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <form action="login.php" method="post"> <h2>Log in</h2> <label for="username">Username:</label> <input type="text" name="username"> <label for="password">Password:</label> <input type="password" name="password"> <input type="submit" value="Login"> </form> </body> </html>
Ini membuat sebuah formulir login sederhana dengan dua bidang input: username dan password. Ketika pengguna menekan tombol Login, formulir akan mengirimkan data ke file login.php.
Untuk membuat formulir registrasi, buatlah file register.php dan masukkan kode berikut:
<!DOCTYPE html> <html> <head> <title>Register</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <form action="register.php" method="post"> <h2>Register</h2> <label for="username">Username:</label> <input type="text" name="username"> <label for="email">Email:</label> <input type="text" name="email"> <label for="password">Password:</label> <input type="password" name="password"> <input type="submit" value="Register"> </form> </body> </html>
Ini membuat formulir sederhana untuk mendaftar akun baru pada website Anda. Ketika pengguna menekan tombol Registrasi, formulir akan mengirimkan data ke file register.php.
Selanjutnya, kita perlu menulis kode PHP untuk memproses data dan menyimpannya ke dalam database. Di bawah ini adalah contoh untuk file register.php:
<?php
// Membuat koneksi ke database
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "nama_database";
// Membuat koneksi baru
$conn = new mysqli($servername, $username, $password, $dbname);
// Mengecek koneksi
if ($conn->connect_error)
die("Connection failed: " . $conn->connect_error);
// Menerima data dari form registrasi
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
// Membuat query SQL untuk menambahkan pengguna baru ke database
$sql = "INSERT INTO pengguna (nama, email, password)
VALUES ('$username', '$email', '$password')";
if ($conn->query($sql) === TRUE)
echo "Pengguna baru berhasil didaftarkan";
else
echo "Error: " . $sql . "<br>" . $conn->error;
$conn->close();
?>
Kode ini akan menambahkan pengguna baru ke database MySQL Anda ketika formulir registrasi di-submit. Anda dapat menyesuaikan kode ini sesuai dengan tabel database Anda.
Jika pengguna telah mendaftar, mereka dapat login ke website dengan menggunakan formulir login yang telah dibuat. Di bawah ini adalah contoh kode untuk file login.php:
<?php
// Menyimpan data formulir login ke dalam variabel
$username = $_POST['username'];
$password = $_POST['password'];
// Membuat koneksi ke database
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "nama_database";
// Membuat koneksi baru
$conn = new mysqli($servername, $username, $password, $dbname);
// Mengecek koneksi
if ($conn->connect_error)
die("Connection failed: " . $conn->connect_error);
// Membuat query SQL untuk memeriksa apakah pengguna telah ada di database
$sql = "SELECT * FROM pengguna WHERE nama='$username' AND password='$password'";
$result = $conn->query($sql);
if ($result->num_rows > 0)
echo "Login berhasil!";
else
echo "Username atau password salah.";
$conn->close();
?>
Kode ini akan memeriksa apakah pengguna telah ada di database MySQL Anda, dan memberi tahu pengguna jika login berhasil atau gagal.
Langkah 4: Menambahkan Style dan Responsiveness
Sekarang kita akan membuat website kita terlihat modern dan responsive dengan menggunakan CSS. Di bawah ini adalah contoh CSS untuk membuat website kita responsive:
@media only screen and (max-width: 600px) header padding: 20px; nav ul list-style: none; padding: 0; text-align: center; display: none; nav li margin: 0; nav li a padding: 10px; display: block; border-bottom: 1px solid #ccc; nav.icon background: #333; width: 100%; text-align: right; box-sizing: border-box; padding: 15px 20px; cursor: pointer; color: #fff; nav.icon a color: #fff; font-size: 25px; margin-right: 10px; nav.responsive display: block; main padding: 20px; @media only screen and (min-width: 601px) header display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 20px; nav ul display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 0; margin: 0; list-style: none; nav li margin-left: 20px; nav li:first-child margin-left: 0; main padding: 40px;
Ini adalah contoh CSS yang membuat website kita responsive terhadap ukuran layar pengguna. Saat layar berukuran kecil (kurang dari 600px), tampilan website akan berubah menjadi tampilan hamburger menu. Saat layar lebih besar dari 601px, tampilan website akan menjadi deskstop dan menunjukkan menu navigasi secara horizontal.
Langkah 5: Test Website Anda
Setelah Anda menyelesaikan langkah-langkah di atas, sekarang saatnya untuk menguji website Anda dengan memasukannya ke server web. Anda dapat menggunakan layanan hosting web gratis seperti 000webhost atau membeli layanan hosting dari penyedia web hosting seperti Bluehost atau Hostinger.
Anda harus mengunggah file website Anda ke server web dan menginstal MySQL di server web Anda. Setelah itu, Anda dapat mengakses website Anda dari browser web.
FAQ
Apa itu PHP?
PHP atau Hypertext Preprocessor adalah bahasa pemrograman scripting yang umum digunakan untuk membangun aplikasi web. Dalam hal ini, kita akan menggunakan PHP untuk memproses data dan mengakses database MySQL.
Apa itu CSS?
CSS atau Cascading Style Sheets adalah bahasa stylesheet yang digunakan untuk mengontrol tampilan website. Dalam hal ini, kita akan menggunakan CSS untuk membuat website kita terlihat modern dan responsive.