Modul Praktikum CRUD dengan XAMPP & VS Code

1. Persiapan

Pastikan sudah menyiapkan:

2. Instalasi XAMPP

  1. Download XAMPP di apachefriends.org
  2. Install dengan pilihan default (Apache, MySQL, PHPMyAdmin).
  3. Buka XAMPP Control Panel → klik Start pada Apache dan MySQL.
  4. Cek di browser: http://localhost

3. Instalasi VS Code

  1. Download di code.visualstudio.com
  2. Install seperti biasa.
  3. Buka VS Code → File → Open Folder → pilih folder htdocs.
  4. Buat folder project: pendaftaran

4. Membuat Database

Buka http://localhost/phpmyadmin → buat database: db_pendaftaran → lalu buat tabel:

id           INT AUTO_INCREMENT PRIMARY KEY
no_daftar    VARCHAR(10)
nama         VARCHAR(100)
jk           ENUM('Laki-laki','Perempuan')
asal_sekolah VARCHAR(100)
no_hp        VARCHAR(15)

5. Struktur Folder Project

pendaftaran/
│── config.php
│── index.php
│── tambah.php
│── edit.php
│── hapus.php

6. Koneksi Database

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db   = "db_pendaftaran";

$koneksi = mysqli_connect($host, $user, $pass, $db);

if (!$koneksi) {
    die("Koneksi gagal: " . mysqli_connect_error());
}
?>

7. CRUD (Create, Read, Update, Delete)

a. index.php

<?php include 'config.php'; ?>
<center>
<h2>Data Pendaftaran Siswa Baru</h2>
<a href="tambah.php">+ Tambah Data</a>
...
</center>

b. tambah.php

<?php include 'config.php'; ?>
<center>
<h2>Tambah Data Siswa</h2>
<form method="POST">
    ...
</form>
</center>

c. edit.php

<?php include 'config.php'; ?>
<center>
<h2>Edit Data Siswa</h2>
<form method="POST">
    ...
</form>
</center>

d. hapus.php

<?php
include 'config.php';
$id = $_GET['id'];
mysqli_query($koneksi, "DELETE FROM siswa WHERE id=$id");
header("Location: index.php");
?>

8. Praktikum

  1. Buka http://localhost/pendaftaran
  2. Coba tambah, edit, dan hapus data siswa
  3. Lihat hasil di phpMyAdmin