Cara Membuat Web Sederhana Insert Update Delete Search

Cara Membuat Web Sederhana Insert Update Delete Search – Sobat Sederhana

Halo sobat sederhana, dalam artikel ini kita akan membahas tentang cara membuat web sederhana dengan fitur insert, update, delete, dan search. Tanpa perlu banyak basa-basi, mari kita mulai pembahasannya.

Apa yang Perlu Dipersiapkan

Sebelum memulai membuat web sederhana ini, ada beberapa hal yang perlu dipersiapkan terlebih dahulu, antara lain:

Bahan	Jumlah
HTML editor (misalnya Notepad++, Sublime Text, atau Visual Studio Code)	1 buah (terserah)
Web server (misalnya XAMPP, WAMP, atau MAMP)	1 buah (terserah)
Database server (misalnya MySQL atau PostgreSQL)	1 buah (terserah)

Selain itu, kita juga memerlukan pengetahuan dasar tentang HTML, CSS, dan PHP. Jika sobat sederhana belum paham tentang ketiga hal tersebut, silakan pelajari terlebih dahulu sebelum melanjutkan ke pembuatan web sederhana ini.

Langkah Pertama: Membuat Database

Langkah pertama dalam pembuatan web sederhana ini adalah membuat database terlebih dahulu. Berikut adalah langkah-langkahnya:

Buka aplikasi database server (misalnya MySQL Workbench)
Buat database baru dengan nama “web_sederhana”
Buat tabel baru dengan nama “mahasiswa” dan kolom-kolom berikut:

Nama Kolom	Tipe Data	Keterangan
id	INT	Primary key, auto increment
nama	VARCHAR(50)
email	VARCHAR(50)
alamat	TEXT

Setelah tabel mahasiswa selesai dibuat, kita bisa lanjut ke langkah selanjutnya, yaitu membuat halaman utama web sederhana ini.

Langkah Kedua: Membuat Halaman Utama

Halaman utama web sederhana ini akan berisi daftar mahasiswa yang ada dalam database, serta form untuk menambahkan mahasiswa baru. Berikut adalah langkah-langkahnya:

Buat file baru dengan nama “index.php”
Isi file tersebut dengan kode HTML berikut:

<!DOCTYPE html><html lang="id"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Web Sederhana Insert Update Delete Search</title></head><body><h1>Daftar Mahasiswa</h1><!-- Tampilkan daftar mahasiswa dari database --><h2>Tambah Mahasiswa Baru</h2><form method="POST" action="insert.php"><label for="nama">Nama: </label><input type="text" name="nama" id="nama" required><br><label for="email">Email: </label><input type="email" name="email" id="email" required><br><label for="alamat">Alamat: </label><textarea name="alamat" id="alamat" required></textarea><br><button type="submit">Simpan</button></form></body></html>

Pada bagian <!– Tampilkan daftar mahasiswa dari database –>, kita akan menampilkan daftar mahasiswa yang ada dalam database dengan menggunakan bahasa pemrograman PHP. Untuk itu, kita perlu membuat file baru dengan nama “select.php”.

TRENDING 🔥 Cara Membuat Pupuk Hidroponik Sederhana

Langkah Ketiga: Membuat Fitur Select

Fitur select akan digunakan untuk menampilkan daftar mahasiswa yang ada dalam database. Berikut adalah langkah-langkahnya:

Buat file baru dengan nama “select.php”
Isi file tersebut dengan kode PHP berikut:

<?php// Koneksi ke database server$host = "localhost";$username = "root";$password = "";$database = "web_sederhana";$koneksi = mysqli_connect($host, $username, $password, $database);// Query untuk select data mahasiswa$query = "SELECT * FROM mahasiswa";$result = mysqli_query($koneksi, $query);// Tampilkan data mahasiswa dalam tabelecho "<table border='1'>";echo "<tr><th>ID</th><th>Nama</th><th>Email</th><th>Alamat</th></tr>";while ($row = mysqli_fetch_assoc($result)) {echo "<tr>";echo "<td>" . $row["id"] . "</td>";echo "<td>" . $row["nama"] . "</td>";echo "<td>" . $row["email"] . "</td>";echo "<td>" . $row["alamat"] . "</td>";echo "</tr>";}echo "</table>";// Tutup koneksi ke database servermysqli_close($koneksi);?>

Setelah file select.php selesai dibuat, kita bisa kembali ke file index.php untuk menampilkan daftar mahasiswa tersebut. Tambahkan baris kode berikut pada bagian <!– Tampilkan daftar mahasiswa dari database –>:

<?php include "select.php"; ?>

Selanjutnya, kita akan membuat fitur insert untuk menambahkan mahasiswa baru ke dalam database.

Langkah Keempat: Membuat Fitur Insert

Fitur insert akan digunakan untuk menambahkan mahasiswa baru ke dalam database. Berikut adalah langkah-langkahnya:

Buat file baru dengan nama “insert.php”
Isi file tersebut dengan kode PHP berikut:

<?php// Ambil data dari form$nama = $_POST["nama"];$email = $_POST["email"];$alamat = $_POST["alamat"];// Koneksi ke database server$host = "localhost";$username = "root";$password = "";$database = "web_sederhana";$koneksi = mysqli_connect($host, $username, $password, $database);// Query untuk insert data mahasiswa$query = "INSERT INTO mahasiswa (nama, email, alamat) VALUES ('" . $nama . "', '" . $email . "', '" . $alamat . "')";mysqli_query($koneksi, $query);// Tutup koneksi ke database servermysqli_close($koneksi);// Redirect ke halaman utamaheader("Location: index.php");exit();?>

Setelah file insert.php selesai dibuat, kita bisa kembali ke file index.php untuk menambahkan fitur search.

Langkah Kelima: Membuat Fitur Search

Fitur search akan digunakan untuk mencari mahasiswa berdasarkan nama atau email. Berikut adalah langkah-langkahnya:

Tambahkan form search pada halaman index.php:

<h2>Cari Mahasiswa</h2><form method="GET" action="search.php"><label for="keyword">Keyword: </label><input type="text" name="keyword" id="keyword"><br><button type="submit">Cari</button></form>

Buat file baru dengan nama “search.php”
Isi file tersebut dengan kode PHP berikut:

<?php// Ambil keyword dari form$keyword = $_GET["keyword"];// Koneksi ke database server$host = "localhost";$username = "root";$password = "";$database = "web_sederhana";$koneksi = mysqli_connect($host, $username, $password, $database);// Query untuk search data mahasiswa$query = "SELECT * FROM mahasiswa WHERE nama LIKE '%" . $keyword . "%' OR email LIKE '%" . $keyword . "%'";$result = mysqli_query($koneksi, $query);// Tampilkan data mahasiswa dalam tabelecho "<table border='1'>";echo "<tr><th>ID</th><th>Nama</th><th>Email</th><th>Alamat</th></tr>";while ($row = mysqli_fetch_assoc($result)) {echo "<tr>";echo "<td>" . $row["id"] . "</td>";echo "<td>" . $row["nama"] . "</td>";echo "<td>" . $row["email"] . "</td>";echo "<td>" . $row["alamat"] . "</td>";echo "</tr>";}echo "</table>";// Tutup koneksi ke database servermysqli_close($koneksi);?>

Setelah file search.php selesai dibuat, kita bisa mencoba fitur search tersebut dengan cara memasukkan keyword pada form search di halaman index.php.

TRENDING 🔥 Cara Membuat Kincir Tambak Sederhana

Langkah Terakhir: Membuat Fitur Update dan Delete

Fitur update dan delete akan digunakan untuk mengedit dan menghapus data mahasiswa yang sudah ada di dalam database. Berikut adalah langkah-langkahnya:

Tambahkan link “Edit” dan “Hapus” pada setiap baris tabel daftar mahasiswa di halaman index.php:

<!-- Tampilkan daftar mahasiswa dari database --><table border='1'><tr><th>ID</th><th>Nama</th><th>Email</th><th>Alamat</th><th>Aksi</th></tr><?php$host = "localhost";$username = "root";$password = "";$database = "web_sederhana";$koneksi = mysqli_connect($host, $username, $password, $database);$query = "SELECT * FROM mahasiswa";$result = mysqli_query($koneksi, $query);while ($row = mysqli_fetch_assoc($result)) {echo "<tr>";echo "<td>" . $row["id"] . "</td>";echo "<td>" . $row["nama"] . "</td>";echo "<td>" . $row["email"] . "</td>";echo "<td>" . $row["alamat"] . "</td>";echo "<td>";echo "<a href='update.php?id=" . $row["id"] . "'>Edit</a> | ";echo "<a href='delete.php?id=" . $row["id"] . "' onclick='return confirm(\"Apakah Anda yakin ingin menghapus data ini?\")'>Hapus</a>";echo "</td>";echo "</tr>";}mysqli_close($koneksi);?></table>

Buat file baru dengan nama “update.php”
Isi file tersebut dengan kode PHP berikut:

<?php// Koneksi ke database server$host = "localhost";$username = "root";$password = "";$database = "web_sederhana";$koneksi = mysqli_connect($host, $username, $password, $database);// Ambil data mahasiswa yang akan diupdate$id = $_GET["id"];$query = "SELECT * FROM mahasiswa WHERE id=" . $id;$result = mysqli_query($koneksi, $query);$row = mysqli_fetch_assoc($result);// Tampilkan form untuk edit data mahasiswaecho "<h2>Edit Data Mahasiswa</h2>";echo "<form method='POST' action='update_process.php'>";echo "<input type='hidden' name='id' value='" . $row["id"] . "'>";echo "<label for='nama'>Nama: </label>";echo "<input type='text' name='nama' id='nama' value='" . $row["nama"] . "' required><br>";echo "<label for='email'>Email: </label>";echo
Cara Membuat Web Sederhana Insert Update Delete Search