Membuat Aplikasi Database Sederhana: Perbedaan antara revisi

Dari Dokumentasi Robie
Loncat ke navigasi Loncat ke pencarian
(←Membuat halaman berisi 'Sebelum memulai pastikan apache2, mariadb, dan php sudah terinstall dengan baik Siapkan Database Buaf file config.php Buat file index.php Buat file edit.php Buat file hapus.php')
 
Tidak ada ringkasan suntingan
 
(20 revisi perantara oleh pengguna yang sama tidak ditampilkan)
Baris 1: Baris 1:
Sebelum memulai pastikan apache2, mariadb, dan php sudah terinstall dengan baik
Sebelum memulai pastikan  


apache2 <code>apt install apache2</code>


Siapkan Database
mariadb <code>apt install mariadb-server</code>


dns server <code>apt install bind9</code>


Buaf file config.php
dan


Buat file index.php
php <code>apt install php php-{fpm,common,mbstring,xmlrpc,soap,gd,xml,intl,mysql,cli,mcrypt,ldap,zip,curl} -y</code>


Buat file edit.php
, dan virtualhost sudah terinstall dengan baik


Buat file hapus.php
=Siapkan Database=
masuk ke mariadb
 
lalu ketikkan perintah berikut
 
mariadb (enter)
CREATE DATABASE organisasi_siswa;
CREATE USER 'siswa'@'localhost' IDENTIFIED BY '12345';
GRANT ALL PRIVILEGES ON organisasi_siswa.* TO 'siswa'@'localhost';
USE organisasi_siswa;
CREATE TABLE siswa (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nama VARCHAR(100) NOT NULL,
    kelas VARCHAR(25) NOT NULL,
    no_hp VARCHAR(15) NOT NULL,
    riwayat_organisasi TEXT NOT NULL,
    jabatan VARCHAR(50) NOT NULL,
    tahun_ajaran VARCHAR(9) NOT NULL
);
masuk ke folder var/www/html/xitkj1.web1 lalu,
 
=Buaf file config.php=
isi dengan kode berikut
<?php
// config.php
$host = 'localhost';
$dbname = 'organisasi_siswa';
$username = 'siswa'; // sesuaikan dengan username MariaDB Anda
$password = '12345';    // sesuaikan dengan password MariaDB Anda
try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Koneksi gagal: " . $e->getMessage());
}
?>
 
 
 
=Buat file index.php=
 
<?php
 
include 'config.php';
 
// Mendapatkan kata kunci dari form pencarian jika ada
 
$search = isset($_GET['search']) ? $_GET['search'] : <nowiki>''</nowiki>;
 
// Tentukan berapa banyak data yang ditampilkan per halaman
 
$limit = 5;
 
// Dapatkan halaman saat ini dari URL, jika tidak ada, default ke 1
 
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
 
$offset = ($page - 1) * $limit;
 
// Query untuk menghitung total data
 
$totalQuery = $pdo->query("SELECT COUNT(*) FROM siswa" . ($search ? " WHERE nama LIKE '%$search%' OR kelas LIKE '%$search%'" : ""));
 
$totalData = $totalQuery->fetchColumn();
 
$totalPages = ceil($totalData / $limit);
 
// Query untuk mengambil data siswa dengan paginasi
 
if ($search) {
 
    $query = $pdo->prepare("SELECT * FROM siswa WHERE nama LIKE ? OR kelas LIKE ? LIMIT :limit OFFSET :offset");
 
    $query->bindValue(1, "%$search%");
 
    $query->bindValue(2, "%$search%");
 
    $query->bindValue(':limit', $limit, PDO::PARAM_INT);
 
    $query->bindValue(':offset', $offset, PDO::PARAM_INT);
 
    $query->execute();
 
} else {
 
    $query = $pdo->prepare("SELECT * FROM siswa LIMIT :limit OFFSET :offset");
 
    $query->bindValue(':limit', $limit, PDO::PARAM_INT);
 
    $query->bindValue(':offset', $offset, PDO::PARAM_INT);
 
    $query->execute();
 
}
 
$siswa = $query->fetchAll(PDO::FETCH_ASSOC);
 
?>
 
<!DOCTYPE html>
 
<html lang="id">
 
<head>
 
    <meta charset="UTF-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Data Siswa Organisasi</title>
 
   
 
    <link rel="stylesheet" href="bootstrap.min.css">
 
</head>
 
<body>
 
<nowiki><div class="container mt-5"></nowiki>
 
    <nowiki><h2 class="mb-4">Data Siswa Organisasi</h2></nowiki>
 
   
 
    <!-- Notifikasi Pop-Up -->
 
    <?php if (isset($_GET['success']) && $_GET['success'] == 1): ?>
 
        <script>
 
            alert("Data berhasil ditambahkan!");
 
        </script>
 
    <?php endif; ?>
 
    <!-- Form Pencarian -->
 
    <form method="GET" action="index.php" class="d-flex mb-3">
 
        <input type="text" name="search" class="form-control me-2" placeholder="Cari nama atau kelas" value="<?= htmlspecialchars($search); ?>">
 
        <button type="submit" class="btn btn-primary">Cari</button>
 
        <a href="index.php" class="btn btn-secondary ms-2">Reset</a>
 
    </form>
 
    <!-- Tombol Tambah Siswa -->
 
    <a href="tambah.php" class="btn btn-primary mb-3">Tambah Siswa</a>
 
    <nowiki><table class="table table-bordered"></nowiki>
 
        <thead>
 
            <nowiki><tr></nowiki>
 
                <nowiki><th>ID</th></nowiki>
 
                <nowiki><th>Nama</th></nowiki>
 
                <nowiki><th>Kelas</th></nowiki>
 
                <nowiki><th>No HP</th></nowiki>
 
                <nowiki><th>Riwayat Organisasi</th></nowiki>
 
                <nowiki><th>Jabatan</th></nowiki>
 
                <nowiki><th>Tahun Ajaran</th></nowiki>
 
                <nowiki><th>Aksi</th></nowiki>
 
            <nowiki></tr></nowiki>
 
        </thead>
 
        <tbody>
 
            <?php foreach ($siswa as $row): ?>
 
                <nowiki><tr></nowiki>
 
                    <nowiki><td></nowiki><?= htmlspecialchars($row['id']); ?><nowiki></td></nowiki>
 
                    <nowiki><td></nowiki><?= htmlspecialchars($row['nama']); ?><nowiki></td></nowiki>
 
                    <nowiki><td></nowiki><?= htmlspecialchars($row['kelas']); ?><nowiki></td></nowiki>
 
                    <nowiki><td></nowiki><?= htmlspecialchars($row['no_hp']); ?><nowiki></td></nowiki>
 
                    <nowiki><td></nowiki><?= htmlspecialchars($row['riwayat_organisasi']); ?><nowiki></td></nowiki>
 
                    <nowiki><td></nowiki><?= htmlspecialchars($row['jabatan']); ?><nowiki></td></nowiki>
 
                    <nowiki><td></nowiki><?= htmlspecialchars($row['tahun_ajaran']); ?><nowiki></td></nowiki>
 
                    <nowiki><td></nowiki>
 
                        <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-warning btn-sm">Edit</a>
 
                        <a href="hapus.php?id=<?= $row['id']; ?>" class="btn btn-danger btn-sm" onclick="return confirm('Yakin ingin menghapus data?');">Hapus</a>
 
                    <nowiki></td></nowiki>
 
                <nowiki></tr></nowiki>
 
            <?php endforeach; ?>
 
        </tbody>
 
    <nowiki></table></nowiki>
 
    <!-- Paginasi -->
 
    <nav>
 
        <nowiki><ul class="pagination"></nowiki>
 
            <?php for ($i = 1; $i <= $totalPages; $i++): ?>
 
                <li class="page-item <?= $i === $page ? 'active' : <nowiki>''</nowiki>; ?>">
 
                    <a class="page-link" href="?page=<?= $i; ?>&search=<?= urlencode($search); ?>"><?= $i; ?></a>
 
                <nowiki></li></nowiki>
 
            <?php endfor; ?>
 
        <nowiki></ul></nowiki>
 
    </nav>
 
<nowiki></div></nowiki>
 
<script src="jquery.slim.min.js"></script>
 
<script src="bootstrap.bundle.min.js"></script>
 
</body>
 
</html>
 
= Buat file tambah.php =
<?php
 
include 'config.php';
 
// Jika form disubmit, tambahkan data siswa baru
 
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
 
    $nama = $_POST['nama'];
 
    $kelas = $_POST['kelas'];
 
    $no_hp = $_POST['no_hp'];
 
    $riwayat_organisasi = $_POST['riwayat_organisasi'];
 
    $jabatan = $_POST['jabatan'];
 
    $tahun_ajaran = $_POST['tahun_ajaran'];
 
    // Insert data siswa baru
 
    $stmt = $pdo->prepare("INSERT INTO siswa (nama, kelas, no_hp, riwayat_organisasi, jabatan, tahun_ajaran) VALUES (?, ?, ?, ?, ?, ?)");
 
    $stmt->execute([$nama, $kelas, $no_hp, $riwayat_organisasi, $jabatan, $tahun_ajaran]);
 
    // Redirect ke halaman utama setelah penambahan
 
    header("Location: index.php");
 
    exit();
 
}
 
?>
 
<!DOCTYPE html>
 
<html lang="id">
 
<head>
 
    <meta charset="UTF-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Tambah Data Siswa</title>
 
    <link rel="stylesheet" href="bootstrap.min.css">
 
</head>
 
<body>
 
<nowiki><div class="container mt-5"></nowiki>
 
    <nowiki><h2 class="mb-4">Tambah Data Siswa</h2></nowiki>
 
    <form method="POST">
 
        <nowiki><div class="mb-3"></nowiki>
 
            <label>Nama</label>
 
            <input type="text" name="nama" class="form-control" required>
 
        <nowiki></div></nowiki>
 
        <nowiki><div class="mb-3"></nowiki>
 
            <label>Kelas</label>
 
            <input type="text" name="kelas" class="form-control" required>
 
        <nowiki></div></nowiki>
 
        <nowiki><div class="mb-3"></nowiki>
 
            <label>No HP</label>
 
            <input type="text" name="no_hp" class="form-control" required>
 
        <nowiki></div></nowiki>
 
        <nowiki><div class="mb-3"></nowiki>
 
            <label>Riwayat Organisasi</label>
 
            <textarea name="riwayat_organisasi" class="form-control" required></textarea>
 
        <nowiki></div></nowiki>
 
        <nowiki><div class="mb-3"></nowiki>
 
            <label>Jabatan</label>
 
            <input type="text" name="jabatan" class="form-control" required>
 
        <nowiki></div></nowiki>
 
        <nowiki><div class="mb-3"></nowiki>
 
            <label>Tahun Ajaran</label>
 
            <input type="text" name="tahun_ajaran" class="form-control" required>
 
        <nowiki></div></nowiki>
 
        <button type="submit" class="btn btn-primary">Tambah Siswa</button>
 
        <a href="index.php" class="btn btn-secondary">Batal</a>
 
    </form>
 
<nowiki></div></nowiki>
 
<script src="jquery.slim.min.js"></script>
 
<script src="bootstrap.bundle.min.js"></script>
 
</body>
 
</html>
 
=Buat file edit.php=
 
<code><?php</code>
 
<code>include 'config.php';</code>
 
<code>// Ambil ID dari URL</code>
 
<code>$id = $_GET['id'];</code>
 
<code>// Ambil data siswa dari database</code>
 
<code>$stmt = $pdo->prepare("SELECT * FROM siswa WHERE id = ?");</code>
 
<code>$stmt->execute([$id]);</code>
 
<code>$siswa = $stmt->fetch();</code>
 
<code>// Jika form disubmit, update data siswa</code>
 
<code>if ($_SERVER['REQUEST_METHOD'] == 'POST') {</code>
 
<code>    $nama = $_POST['nama'];</code>
 
<code>    $kelas = $_POST['kelas'];</code>
 
<code>    $no_hp = $_POST['no_hp'];</code>
 
<code>    $riwayat_organisasi = $_POST['riwayat_organisasi'];</code>
 
<code>    $jabatan = $_POST['jabatan'];</code>
 
<code>    $tahun_ajaran = $_POST['tahun_ajaran'];</code>
 
<code>    // Update data siswa</code>
 
<code>    $stmt = $pdo->prepare("UPDATE siswa SET nama = ?, kelas = ?, no_hp = ?, riwayat_organisasi = ?, jabatan = ?, tahun_ajaran = ? WHERE id = ?");</code>
 
<code>    $stmt->execute([$nama, $kelas, $no_hp, $riwayat_organisasi, $jabatan, $tahun_ajaran, $id]);</code>
 
<code>    // Redirect ke halaman utama setelah update</code>
 
<code>    header("Location: index.php");</code>
 
<code>}</code>
 
<code>?></code>
 
<code><!DOCTYPE html></code>
 
<code><html lang="id"></code>
 
<code><head></code>
 
<code>    <meta charset="UTF-8"></code>
 
<code>    <meta name="viewport" content="width=device-width, initial-scale=1.0"></code>
 
<code>    <title>Edit Data Siswa</title></code>
 
<code>    <link rel="stylesheet" href="bootstrap.min.css"></code>
 
<code></head></code>
 
<code><body></code>
 
<code><nowiki><div class="container mt-5"></nowiki></code>
 
<code>    <nowiki><h2 class="mb-4">Edit Data Siswa</h2></nowiki></code>
 
<code>    <form method="POST"></code>
 
<code>        <nowiki><div class="mb-3"></nowiki></code>
 
<code>            <label>Nama</label></code>
 
<code>            <input type="text" name="nama" class="form-control" value="<?= htmlspecialchars($siswa['nama']); ?>" required></code>
 
<code>        <nowiki></div></nowiki></code>
 
<code>        <nowiki><div class="mb-3"></nowiki></code>
 
<code>            <label>Kelas</label></code>
 
<code>            <input type="text" name="kelas" class="form-control" value="<?= htmlspecialchars($siswa['kelas']); ?>" required></code>
 
<code>        <nowiki></div></nowiki></code>
 
<code>        <nowiki><div class="mb-3"></nowiki></code>
 
<code>            <label>No HP</label></code>
 
<code>            <input type="text" name="no_hp" class="form-control" value="<?= htmlspecialchars($siswa['no_hp']); ?>" required></code>
 
<code>        <nowiki></div></nowiki></code>
 
<code>        <nowiki><div class="mb-3"></nowiki></code>
 
<code>            <label>Riwayat Organisasi</label></code>
 
<code>            <nowiki><textarea name="riwayat_organisasi" class="form-control" required><?=htmlspecialchars($siswa['riwayat_organisasi']); ?></textarea></nowiki></code>
 
<code>        <nowiki></div></nowiki></code>
 
<code>        <nowiki><div class="mb-3"></nowiki></code>
 
<code>            <label>Jabatan</label></code>
 
<code>            <input type="text" name="jabatan" class="form-control" value="<?= htmlspecialchars($siswa['jabatan']); ?>" required></code>
 
<code>        <nowiki></div></nowiki></code>
 
<code>        <nowiki><div class="mb-3"></nowiki></code>
 
<code>            <label>Tahun Ajaran</label></code>
 
<code>            <input type="text" name="tahun_ajaran" class="form-control" value="<?= htmlspecialchars($siswa['tahun_ajaran']); ?>" required></code>
 
<code>        <nowiki></div></nowiki></code>
 
<code>        <button type="submit" class="btn btn-primary">Simpan Perubahan</button></code>
 
<code>        <a href="index.php" class="btn btn-secondary">Batal</a></code>
 
<code>    </form></code>
 
<code><nowiki></div></nowiki></code>
 
<code><script src="jquery.slim.min.js"></script></code>
 
<code><script src="bootstrap.bundle.min.js"></script></code>
 
<code></body></code>
 
<code></html></code>
 
 
=Buat file hapus.php=
<?php
include 'config.php';
$id = $_GET['id'];
$stmt = $pdo->prepare("DELETE FROM siswa WHERE id = ?");
$stmt->execute([$id]);
header("Location: index.php");
?>
 
= Download file css dan js =
masih di folder xitkj1.web1
 
download file css js dengan mengetikkan perintah
 
<code>wget https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css</code> enter
 
file js
 
<code>wget https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js</code> enter
 
<code>wget https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js</code> enter
 
= Menambahkan Data baru ke Database =
masuk ke mariadb lalu isi data ke dalam tabel siswa dengan ketikkan perintah berikut
 
USE organisasi_siswa;
INSERT INTO siswa (nama, kelas, no_hp, riwayat_organisasi, jabatan, tahun_ajaran) VALUES
('Andi Pratama', 'X TKJ 1', '081234567890', 'OSIS, Pramuka', 'Ketua', '2023/2024'),
('Budi Santoso', 'XI TKJ 2', '081234567891', 'Basket, OSIS', 'Anggota', '2022/2023'),
('Citra Dewi', 'XII TKJ 1', '081234567892', 'Paskibra, OSIS', 'Wakil Ketua', '2021/2022'),
('Dewi Sartika', 'X TKR 2', '081234567893', 'Pramuka', 'Anggota', '2023/2024'),
('Eko Wibowo', 'XI TBO 1', '081234567894', 'Basket, OSIS', 'Sekretaris', '2022/2023'),
('Fitri Nurjanah', 'XII TPL 2', '081234567895', 'Karate, OSIS', 'Anggota', '2021/2022'),
('Gilang Saputra', 'X TPL 3', '081234567896', 'Karate, Pramuka', 'Ketua', '2023/2024'),
('Hana Pertiwi', 'XI TPL 1', '081234567897', 'Paskibra, OSIS', 'Bendahara', '2022/2023'),
('Irfan Maulana', 'XII APAT 1', '081234567898', 'Basket, OSIS', 'Anggota', '2021/2022'),
('Joko Sugiarto', 'X PROFI 3', '081234567899', 'Karate', 'Anggota', '2023/2024'),
('Kartika Dewi', 'XI PROFI 3', '081234567800', 'Paskibra, OSIS', 'Sekretaris', '2022/2023'),
('Lina Suharti', 'XII TPL 2', '081234567801', 'Pramuka, OSIS', 'Bendahara', '2021/2022'),
('Maman Firmansyah', 'X TKR 2', '081234567802', 'Basket', 'Anggota', '2023/2024'),
('Nina Kusuma', 'XI TBO 2', '081234567803', 'Pramuka, Karate', 'Wakil Ketua', '2022/2023'),
('Oki Satria', 'XII TKJ 3', '081234567804', 'OSIS, Paskibra', 'Ketua', '2021/2022');
lalu tekan enter
 
 
Jika sudah sampai tahap ini silakan akses '''ip_address_ct/aplikasi'''

Revisi terkini sejak 14 November 2024 07.34

Sebelum memulai pastikan

apache2 apt install apache2

mariadb apt install mariadb-server

dns server apt install bind9

dan

php apt install php php-{fpm,common,mbstring,xmlrpc,soap,gd,xml,intl,mysql,cli,mcrypt,ldap,zip,curl} -y

, dan virtualhost sudah terinstall dengan baik

Siapkan Database

masuk ke mariadb

lalu ketikkan perintah berikut

mariadb (enter)
CREATE DATABASE organisasi_siswa;
CREATE USER 'siswa'@'localhost' IDENTIFIED BY '12345';
GRANT ALL PRIVILEGES ON organisasi_siswa.* TO 'siswa'@'localhost';
USE organisasi_siswa;
CREATE TABLE siswa (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nama VARCHAR(100) NOT NULL,
    kelas VARCHAR(25) NOT NULL,
    no_hp VARCHAR(15) NOT NULL,
    riwayat_organisasi TEXT NOT NULL,
    jabatan VARCHAR(50) NOT NULL,
    tahun_ajaran VARCHAR(9) NOT NULL
);

masuk ke folder var/www/html/xitkj1.web1 lalu,

Buaf file config.php

isi dengan kode berikut

<?php
// config.php
$host = 'localhost';
$dbname = 'organisasi_siswa';
$username = 'siswa'; // sesuaikan dengan username MariaDB Anda
$password = '12345';     // sesuaikan dengan password MariaDB Anda

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Koneksi gagal: " . $e->getMessage());
}
?>


Buat file index.php

<?php

include 'config.php';

// Mendapatkan kata kunci dari form pencarian jika ada

$search = isset($_GET['search']) ? $_GET['search'] : '';

// Tentukan berapa banyak data yang ditampilkan per halaman

$limit = 5;

// Dapatkan halaman saat ini dari URL, jika tidak ada, default ke 1

$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;

$offset = ($page - 1) * $limit;

// Query untuk menghitung total data

$totalQuery = $pdo->query("SELECT COUNT(*) FROM siswa" . ($search ? " WHERE nama LIKE '%$search%' OR kelas LIKE '%$search%'" : ""));

$totalData = $totalQuery->fetchColumn();

$totalPages = ceil($totalData / $limit);

// Query untuk mengambil data siswa dengan paginasi

if ($search) {

    $query = $pdo->prepare("SELECT * FROM siswa WHERE nama LIKE ? OR kelas LIKE ? LIMIT :limit OFFSET :offset");

    $query->bindValue(1, "%$search%");

    $query->bindValue(2, "%$search%");

    $query->bindValue(':limit', $limit, PDO::PARAM_INT);

    $query->bindValue(':offset', $offset, PDO::PARAM_INT);

    $query->execute();

} else {

    $query = $pdo->prepare("SELECT * FROM siswa LIMIT :limit OFFSET :offset");

    $query->bindValue(':limit', $limit, PDO::PARAM_INT);

    $query->bindValue(':offset', $offset, PDO::PARAM_INT);

    $query->execute();

}

$siswa = $query->fetchAll(PDO::FETCH_ASSOC);

?>

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Data Siswa Organisasi</title>

   

    <link rel="stylesheet" href="bootstrap.min.css">

</head>

<body>

<div class="container mt-5">

    <h2 class="mb-4">Data Siswa Organisasi</h2>

   

   

    <?php if (isset($_GET['success']) && $_GET['success'] == 1): ?>

        <script>

            alert("Data berhasil ditambahkan!");

        </script>

    <?php endif; ?>

   

    <form method="GET" action="index.php" class="d-flex mb-3">

        <input type="text" name="search" class="form-control me-2" placeholder="Cari nama atau kelas" value="<?= htmlspecialchars($search); ?>">

        <button type="submit" class="btn btn-primary">Cari</button>

        <a href="index.php" class="btn btn-secondary ms-2">Reset</a>

    </form>

   

    <a href="tambah.php" class="btn btn-primary mb-3">Tambah Siswa</a>

    <table class="table table-bordered">

        <thead>

            <tr>

                <th>ID</th>

                <th>Nama</th>

                <th>Kelas</th>

                <th>No HP</th>

                <th>Riwayat Organisasi</th>

                <th>Jabatan</th>

                <th>Tahun Ajaran</th>

                <th>Aksi</th>

            </tr>

        </thead>

        <tbody>

            <?php foreach ($siswa as $row): ?>

                <tr>

                    <td><?= htmlspecialchars($row['id']); ?></td>

                    <td><?= htmlspecialchars($row['nama']); ?></td>

                    <td><?= htmlspecialchars($row['kelas']); ?></td>

                    <td><?= htmlspecialchars($row['no_hp']); ?></td>

                    <td><?= htmlspecialchars($row['riwayat_organisasi']); ?></td>

                    <td><?= htmlspecialchars($row['jabatan']); ?></td>

                    <td><?= htmlspecialchars($row['tahun_ajaran']); ?></td>

                    <td>

                        <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-warning btn-sm">Edit</a>

                        <a href="hapus.php?id=<?= $row['id']; ?>" class="btn btn-danger btn-sm" onclick="return confirm('Yakin ingin menghapus data?');">Hapus</a>

                    </td>

                </tr>

            <?php endforeach; ?>

        </tbody>

    </table>

   

    <nav>

        <ul class="pagination">

            <?php for ($i = 1; $i <= $totalPages; $i++): ?>

                <li class="page-item <?= $i === $page ? 'active' : ''; ?>">

                    <a class="page-link" href="?page=<?= $i; ?>&search=<?= urlencode($search); ?>"><?= $i; ?></a>

                </li>

            <?php endfor; ?>

        </ul>

    </nav>

</div>

<script src="jquery.slim.min.js"></script>

<script src="bootstrap.bundle.min.js"></script>

</body>

</html>

Buat file tambah.php

<?php

include 'config.php';

// Jika form disubmit, tambahkan data siswa baru

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    $nama = $_POST['nama'];

    $kelas = $_POST['kelas'];

    $no_hp = $_POST['no_hp'];

    $riwayat_organisasi = $_POST['riwayat_organisasi'];

    $jabatan = $_POST['jabatan'];

    $tahun_ajaran = $_POST['tahun_ajaran'];

    // Insert data siswa baru

    $stmt = $pdo->prepare("INSERT INTO siswa (nama, kelas, no_hp, riwayat_organisasi, jabatan, tahun_ajaran) VALUES (?, ?, ?, ?, ?, ?)");

    $stmt->execute([$nama, $kelas, $no_hp, $riwayat_organisasi, $jabatan, $tahun_ajaran]);

    // Redirect ke halaman utama setelah penambahan

    header("Location: index.php");

    exit();

}

?>

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Tambah Data Siswa</title>

    <link rel="stylesheet" href="bootstrap.min.css">

</head>

<body>

<div class="container mt-5">

    <h2 class="mb-4">Tambah Data Siswa</h2>

    <form method="POST">

        <div class="mb-3">

            <label>Nama</label>

            <input type="text" name="nama" class="form-control" required>

        </div>

        <div class="mb-3">

            <label>Kelas</label>

            <input type="text" name="kelas" class="form-control" required>

        </div>

        <div class="mb-3">

            <label>No HP</label>

            <input type="text" name="no_hp" class="form-control" required>

        </div>

        <div class="mb-3">

            <label>Riwayat Organisasi</label>

            <textarea name="riwayat_organisasi" class="form-control" required></textarea>

        </div>

        <div class="mb-3">

            <label>Jabatan</label>

            <input type="text" name="jabatan" class="form-control" required>

        </div>

        <div class="mb-3">

            <label>Tahun Ajaran</label>

            <input type="text" name="tahun_ajaran" class="form-control" required>

        </div>

        <button type="submit" class="btn btn-primary">Tambah Siswa</button>

        <a href="index.php" class="btn btn-secondary">Batal</a>

    </form>

</div>

<script src="jquery.slim.min.js"></script>

<script src="bootstrap.bundle.min.js"></script>

</body>

</html>

Buat file edit.php

<?php

include 'config.php';

// Ambil ID dari URL

$id = $_GET['id'];

// Ambil data siswa dari database

$stmt = $pdo->prepare("SELECT * FROM siswa WHERE id = ?");

$stmt->execute([$id]);

$siswa = $stmt->fetch();

// Jika form disubmit, update data siswa

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    $nama = $_POST['nama'];

    $kelas = $_POST['kelas'];

    $no_hp = $_POST['no_hp'];

    $riwayat_organisasi = $_POST['riwayat_organisasi'];

    $jabatan = $_POST['jabatan'];

    $tahun_ajaran = $_POST['tahun_ajaran'];

    // Update data siswa

    $stmt = $pdo->prepare("UPDATE siswa SET nama = ?, kelas = ?, no_hp = ?, riwayat_organisasi = ?, jabatan = ?, tahun_ajaran = ? WHERE id = ?");

    $stmt->execute([$nama, $kelas, $no_hp, $riwayat_organisasi, $jabatan, $tahun_ajaran, $id]);

    // Redirect ke halaman utama setelah update

    header("Location: index.php");

}

?>

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Edit Data Siswa</title>

    <link rel="stylesheet" href="bootstrap.min.css">

</head>

<body>

<div class="container mt-5">

    <h2 class="mb-4">Edit Data Siswa</h2>

    <form method="POST">

        <div class="mb-3">

            <label>Nama</label>

            <input type="text" name="nama" class="form-control" value="<?= htmlspecialchars($siswa['nama']); ?>" required>

        </div>

        <div class="mb-3">

            <label>Kelas</label>

            <input type="text" name="kelas" class="form-control" value="<?= htmlspecialchars($siswa['kelas']); ?>" required>

        </div>

        <div class="mb-3">

            <label>No HP</label>

            <input type="text" name="no_hp" class="form-control" value="<?= htmlspecialchars($siswa['no_hp']); ?>" required>

        </div>

        <div class="mb-3">

            <label>Riwayat Organisasi</label>

            <textarea name="riwayat_organisasi" class="form-control" required><?=htmlspecialchars($siswa['riwayat_organisasi']); ?></textarea>

        </div>

        <div class="mb-3">

            <label>Jabatan</label>

            <input type="text" name="jabatan" class="form-control" value="<?= htmlspecialchars($siswa['jabatan']); ?>" required>

        </div>

        <div class="mb-3">

            <label>Tahun Ajaran</label>

            <input type="text" name="tahun_ajaran" class="form-control" value="<?= htmlspecialchars($siswa['tahun_ajaran']); ?>" required>

        </div>

        <button type="submit" class="btn btn-primary">Simpan Perubahan</button>

        <a href="index.php" class="btn btn-secondary">Batal</a>

    </form>

</div>

<script src="jquery.slim.min.js"></script>

<script src="bootstrap.bundle.min.js"></script>

</body>

</html>


Buat file hapus.php

<?php
include 'config.php';

$id = $_GET['id'];
$stmt = $pdo->prepare("DELETE FROM siswa WHERE id = ?");
$stmt->execute([$id]);

header("Location: index.php");
?>

Download file css dan js

masih di folder xitkj1.web1

download file css js dengan mengetikkan perintah

wget https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css enter

file js

wget https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js enter

wget https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js enter

Menambahkan Data baru ke Database

masuk ke mariadb lalu isi data ke dalam tabel siswa dengan ketikkan perintah berikut

USE organisasi_siswa;

INSERT INTO siswa (nama, kelas, no_hp, riwayat_organisasi, jabatan, tahun_ajaran) VALUES
('Andi Pratama', 'X TKJ 1', '081234567890', 'OSIS, Pramuka', 'Ketua', '2023/2024'),
('Budi Santoso', 'XI TKJ 2', '081234567891', 'Basket, OSIS', 'Anggota', '2022/2023'),
('Citra Dewi', 'XII TKJ 1', '081234567892', 'Paskibra, OSIS', 'Wakil Ketua', '2021/2022'),
('Dewi Sartika', 'X TKR 2', '081234567893', 'Pramuka', 'Anggota', '2023/2024'),
('Eko Wibowo', 'XI TBO 1', '081234567894', 'Basket, OSIS', 'Sekretaris', '2022/2023'),
('Fitri Nurjanah', 'XII TPL 2', '081234567895', 'Karate, OSIS', 'Anggota', '2021/2022'),
('Gilang Saputra', 'X TPL 3', '081234567896', 'Karate, Pramuka', 'Ketua', '2023/2024'),
('Hana Pertiwi', 'XI TPL 1', '081234567897', 'Paskibra, OSIS', 'Bendahara', '2022/2023'),
('Irfan Maulana', 'XII APAT 1', '081234567898', 'Basket, OSIS', 'Anggota', '2021/2022'),
('Joko Sugiarto', 'X PROFI 3', '081234567899', 'Karate', 'Anggota', '2023/2024'),
('Kartika Dewi', 'XI PROFI 3', '081234567800', 'Paskibra, OSIS', 'Sekretaris', '2022/2023'),
('Lina Suharti', 'XII TPL 2', '081234567801', 'Pramuka, OSIS', 'Bendahara', '2021/2022'),
('Maman Firmansyah', 'X TKR 2', '081234567802', 'Basket', 'Anggota', '2023/2024'),
('Nina Kusuma', 'XI TBO 2', '081234567803', 'Pramuka, Karate', 'Wakil Ketua', '2022/2023'),
('Oki Satria', 'XII TKJ 3', '081234567804', 'OSIS, Paskibra', 'Ketua', '2021/2022');

lalu tekan enter


Jika sudah sampai tahap ini silakan akses ip_address_ct/aplikasi