Membuat Aplikasi Database Sederhana: Perbedaan antara revisi

Dari Dokumentasi Robie
Loncat ke navigasi Loncat ke pencarian
Tidak ada ringkasan suntingan
Tidak ada ringkasan suntingan
 
(5 revisi perantara oleh pengguna yang sama tidak ditampilkan)
Baris 15: Baris 15:
=Siapkan Database=
=Siapkan Database=
masuk ke mariadb
masuk ke mariadb
lalu ketikkan perintah berikut
lalu ketikkan perintah berikut


mariadb (enter)
  CREATE DATABASE organisasi_siswa;
  CREATE DATABASE organisasi_siswa;
  CREATE USER 'siswa'@'localhost' IDENTIFIED BY '12345';
  CREATE USER 'siswa'@'localhost' IDENTIFIED BY '12345';
Baris 125: Baris 127:
     
     


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link rel="stylesheet" href="bootstrap.min.css">


</head>
</head>
Baris 249: Baris 251:
<nowiki></div></nowiki>
<nowiki></div></nowiki>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="jquery.slim.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></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>
</body>
Baris 317: Baris 444:
<code>    <title>Edit Data Siswa</title></code>
<code>    <title>Edit Data Siswa</title></code>


<code>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"></code>
<code>    <link rel="stylesheet" href="bootstrap.min.css"></code>


<code></head></code>
<code></head></code>
Baris 385: Baris 512:
<code><nowiki></div></nowiki></code>
<code><nowiki></div></nowiki></code>


<code><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script></code>
<code><script src="jquery.slim.min.js"></script></code>


<code><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script></code>
<code><script src="bootstrap.bundle.min.js"></script></code>


<code></body></code>
<code></body></code>
Baris 404: Baris 531:
  header("Location: index.php");
  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 =
= Menambahkan Data baru ke Database =
masuk ke mariadb lalu ketikkan perintah berikut
masuk ke mariadb lalu isi data ke dalam tabel siswa dengan ketikkan perintah berikut


  USE organisasi_siswa;
  USE organisasi_siswa;
Baris 427: Baris 567:
  ('Oki Satria', 'XII TKJ 3', '081234567804', 'OSIS, Paskibra', 'Ketua', '2021/2022');
  ('Oki Satria', 'XII TKJ 3', '081234567804', 'OSIS, Paskibra', 'Ketua', '2021/2022');
lalu tekan enter
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