Membuat Aplikasi Database Sederhana: Perbedaan antara revisi
(←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 | Sebelum memulai pastikan | ||
apache2 <code>apt install apache2</code> | |||
mariadb <code>apt install mariadb-server</code> | |||
dns server <code>apt install bind9</code> | |||
dan | |||
php <code>apt install php php-{fpm,common,mbstring,xmlrpc,soap,gd,xml,intl,mysql,cli,mcrypt,ldap,zip,curl} -y</code> | |||
, 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