Dokumentasi Praktikum Studio Desain Website

Ditulis Oleh : Nevalga Algasha Anandria Saputra

MySQL

MySQL adalah sistem manajemen basis data relasional (RDBMS) yang bersifat open-source. MySQL digunakan untuk menyimpan, mengelola, dan mengambil data dalam format tabel yang saling terhubung. MySQL menggunakan bahasa pemrograman SQL (Structured Query Language) untuk melakukan query dan manipulasi data.

Langkah - Langkah praktikum

Buat folder baru pada Folder XAMPP>htdocs
Setelah folder dibuat Masukan nama file berikut ke dalam folder

Screenshot 2025-04-27 003647.png

Lalu aktifkan Apache dan MySQL pada XAMPP
Buka ( http://localhost/phpmyadmin ) pada browser, lalu klik new dan masukan tabel todo_app.
Buka tabel todo_app dan masukan kode berikut ke menu SQL.

  id INT PRIMARY KEY AUTO_INCREMENT,
  title VARCHAR(100) NOT NULL,
  description TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP

Lalu masuk ke dalam visual studio code dan masukan kode berikut sesuai urutan.

config.php

<?php
// Di config.php, tambahkan session_start();
session_start();
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'todo_app';

$mysqli = new mysqli($host, $user, $password, $database);

if ($mysqli->connect_errno) {
  die("Koneksi gagal: " . $mysqli->connect_error);
}

// Set charset untuk menghindari masalah encoding
$mysqli->set_charset("utf8mb4");
?>

index.php

<?php include 'config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modul 7 - Todo App</title>
  <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">
</head>
<body class="container mt-5">
  <h1>📝 My Todo List</h1>
  
  <!-- Form Tambah Data -->
  <form method="POST" action="add.php" class="mb-4">
    <div class="row">
      <div class="col-8">
        <input type="text" name="title" class="form-control" placeholder="Judul task" required>
      </div>
      <div class="col-4">
        <button type="submit" class="btn btn-primary">➕ Tambah</button>
      </div>
    </div>
  </form>

  <!-- Tabel Data -->
  <table class="table table-striped">
    <thead>
      <tr>
        <th>#</th>
        <th>Task</th>
        <th>Deskripsi</th>
        <th>Aksi</th>
      </tr>
    </thead>
    <tbody>
      <?php
      $result = $mysqli->query("SELECT * FROM tasks ORDER BY created_at DESC");
      while ($row = $result->fetch_assoc()):
      ?>
      <tr>
        <td><?= $row['id'] ?></td>
        <td><?= htmlspecialchars($row['title']) ?></td>
        <td><?= htmlspecialchars($row['description']) ?></td>
        <td>
          <a href="edit.php?id=<?= $row['id'] ?>" class="btn btn-sm btn-warning">✏️ Edit</a>
          <a href="delete.php?id=<?= $row['id'] ?>" class="btn btn-sm btn-danger">🗑️ Hapus</a>
        </td>
      </tr>
      <?php endwhile; ?>
    </tbody>
  </table>
</body>
</html>

add.php

<?php
include 'config.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $title = $mysqli->real_escape_string($_POST['title']);
  $description = $mysqli->real_escape_string($_POST['description'] ?? '');

  $stmt = $mysqli->prepare("INSERT INTO tasks (title, description, user_id) VALUES (?, ?, ?)");
$stmt->bind_param("ssi", $title, $description, $_SESSION['user_id']);
  
  if ($stmt->execute()) {
    header("Location: index.php?success=1");
  } else {
    echo "Error: " . $stmt->error;
  }
  
  $stmt->close();
}

$mysqli->close();

delete.php

<?php
include 'config.php';

$id = $_GET['id'];
$stmt = $mysqli->prepare("DELETE FROM tasks WHERE id = ?");
$stmt->bind_param("i", $id);

if ($stmt->execute()) {
  header("Location: index.php?success=1");
} else {
  echo "Error: " . $stmt->error;
}

$stmt->close();
$mysqli->close();