Beranda Tips Menampilkan Basis Data Mysql Dengan PHP dan HTML
Tips

Menampilkan Basis Data Mysql Dengan PHP dan HTML

Redaksi Time Indonesia34 min baca
593
×

Menampilkan Basis Data Mysql Dengan PHP dan HTML

Sebarkan artikel ini

Time Indonesia – Halo Sobat Time! Pada kesempatan kali ini kita akan belajar bersama bagaimana cara menampilkan basis data MySQL menggunakan PHP dan HTML. Tutorial ini akan membahas langkah-langkah dasar mulai dari membuat koneksi ke database, mengambil data, hingga menampilkannya dalam tampilan web. Panduan ini cocok untuk pemula yang ingin memahami proses parsing data dari MySQL ke PHP secara mudah dan terstruktur.

MEMBUAT TABEL MAHASISWA SQL (7 FIELD)

Buat Database : universitas

Buat tabel : mahasiswa

1.1 Pengenalan Struktur Tabel

Tabel Mahasiswa merupakan entitas utama yang menyimpan data identitas dan akademik mahasiswa. Dengan 7 field, kita dapat menangkap informasi esensial mahasiswa.

 

Code SQL Membuat Tabel mahasiswa

CREATE TABLE mahasiswa (
id_mahasiswa INT PRIMARY KEY AUTO_INCREMENT,
nim VARCHAR(20) NOT NULL UNIQUE,
nama_mahasiswa VARCHAR(100) NOT NULL,
email VARCHAR(100) UNIQUE,
no_telepon VARCHAR(15),
jurusan VARCHAR(50) NOT NULL,
tahun_masuk INT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

 

Isikan Data Berikut :


INSERT INTO mahasiswa (nim, nama_mahasiswa, email, no_telepon, jurusan, tahun_masuk)
VALUES
('A001', 'Andi Wijaya', 'andi@example.com', '08123456789', 'Teknik Informatika', 2023),
('A002', 'Budi Santoso', 'budi@example.com', '08234567890', 'Sistem Informasi', 2023),
('A003', 'Citra Dewi', 'citra@example.com', '08345678901', 'Teknik Informatika', 2022),
('A004', 'Dodi Rahman', 'dodi@example.com', '08456789012', 'Desain Grafis', 2023),
('A005', 'Eka Putra', 'eka@example.com', '08567890123', 'Sistem Informasi', 2022);

 

Buat Coding Menampilkan Data

 

<?php
// Koneksi ke database
$host = "localhost";
$user = "root";
$pass = "";
$db   = "universitas"; // ganti dengan nama databasenya

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

// Cek koneksi
if (!$conn) {
    die("Koneksi gagal: " . mysqli_connect_error());
}

// Query data
$query = "SELECT * FROM mahasiswa";
$result = mysqli_query($conn, $query);
?>

<!DOCTYPE html>
<html>
<head>
    <title>Data Mahasiswa</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        table, th, td {
            border: 1px solid #333;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
        th {
            background: #f0f0f0;
        }
    </style>
</head>
<body>

<h2>Data Mahasiswa</h2>

<table>
    <thead>
        <tr>
            <th>NIM</th>
            <th>Nama Mahasiswa</th>
            <th>Email</th>
            <th>No Telepon</th>
            <th>Jurusan</th>
            <th>Tahun Masuk</th>
        </tr>
    </thead>
    <tbody>
        <?php 
        if (mysqli_num_rows($result) > 0) {
            while ($row = mysqli_fetch_assoc($result)) { ?>
                <tr>
                    <td><?php echo $row['nim']; ?></td>
                    <td><?php echo $row['nama_mahasiswa']; ?></td>
                    <td><?php echo $row['email']; ?></td>
                    <td><?php echo $row['no_telepon']; ?></td>
                    <td><?php echo $row['jurusan']; ?></td>
                    <td><?php echo $row['tahun_masuk']; ?></td>
                </tr>
        <?php 
            }
        } else {
            echo "<tr><td colspan='6'>Tidak ada data.</td></tr>";
        }
        ?>
    </tbody>
</table>

</body>
</html>

Simpan di Folder C:\xampp\htdocs
buat folder data
simpan dengan nama : Index.php
hasil

Buat Coding Untuk Input Data

<?php
// Koneksi ke database
$host = "localhost";
$user = "root";
$pass = "";
$db   = "universitas"; // ganti dengan nama databasenya

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

// Cek koneksi
if (!$conn) {
    die("Koneksi gagal: " . mysqli_connect_error());
}

// Query data
$query = "SELECT * FROM mahasiswa";
$result = mysqli_query($conn, $query);
?>

<!DOCTYPE html>
<html>
<head>
    <title>Data Mahasiswa</title>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20table%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-collapse%3A%20collapse%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20table%2C%20th%2C%20td%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20%23333%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20th%2C%20td%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20left%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20th%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23f0f0f0%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-style" width="20" height="20" alt="&lt;style&gt;" />
</head>
<body>

<h2>Data Mahasiswa</h2>

<table>
    <thead>
        <tr>
            <th>NIM</th>
            <th>Nama Mahasiswa</th>
            <th>Email</th>
            <th>No Telepon</th>
            <th>Jurusan</th>
            <th>Tahun Masuk</th>
        </tr>
    </thead>
    <tbody>
        <?php 
        if (mysqli_num_rows($result) > 0) {
            while ($row = mysqli_fetch_assoc($result)) { ?>
                <tr>
                    <td><?php echo $row['nim']; ?></td>
                    <td><?php echo $row['nama_mahasiswa']; ?></td>
                    <td><?php echo $row['email']; ?></td>
                    <td><?php echo $row['no_telepon']; ?></td>
                    <td><?php echo $row['jurusan']; ?></td>
                    <td><?php echo $row['tahun_masuk']; ?></td>
                </tr>
        <?php 
            }
        } else {
            echo "<tr><td colspan='6'>Tidak ada data.</td></tr>";
        }
        ?>
    </tbody>
</table>

</body>
</html>


[html]
<?php
// ======================
// KONEKSI DATABASE
// ======================
$host = "localhost";
$user = "root";
$pass = "";
$db   = "universitas";

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

if (!$conn) {
    die("Koneksi gagal: " . mysqli_connect_error());
}

// Set charset untuk keamanan
mysqli_set_charset($conn, "utf8mb4");

// ======================
// FUNGSI VALIDASI INPUT
// ======================
function validateInput($data) {
    return htmlspecialchars(trim($data), ENT_QUOTES, 'UTF-8');
}

function validateEmail($email) {
    return filter_var($email, FILTER_VALIDATE_EMAIL);
}

function validateYear($year) {
    $year = (int)$year;
    return ($year >= 2000 && $year <= date('Y')) ? $year : false;
}

// ======================
// ACTION: INSERT (DENGAN PREPARED STATEMENTS)
// ======================
$success_msg = '';
$error_msg = '';

if (isset($_POST['add'])) {
    // Validasi input
    $nim = validateInput($_POST['nim'] ?? '');
    $nama = validateInput($_POST['nama_mahasiswa'] ?? '');
    $email = validateInput($_POST['email'] ?? '');
    $telp = validateInput($_POST['no_telepon'] ?? '');
    $jur = validateInput($_POST['jurusan'] ?? '');
    $thn = validateYear($_POST['tahun_masuk'] ?? 0);

    // Validasi email
    if (!validateEmail($email)) {
        $error_msg = "❌ Format email tidak valid!";
    }
    // Validasi tahun
    elseif ($thn === false) {
        $error_msg = "❌ Tahun masuk tidak valid!";
    }
    // Validasi field kosong
    elseif (empty($nim) || empty($nama) || empty($jur)) {
        $error_msg = "❌ NIM, Nama, dan Jurusan tidak boleh kosong!";
    }
    else {
        // Cek apakah NIM sudah ada
        $check_sql = "SELECT nim FROM mahasiswa WHERE nim = ?";
        $check_stmt = mysqli_prepare($conn, $check_sql);
        mysqli_stmt_bind_param($check_stmt, "s", $nim);
        mysqli_stmt_execute($check_stmt);
        $check_result = mysqli_stmt_get_result($check_stmt);

        if (mysqli_num_rows($check_result) > 0) {
            $error_msg = "❌ NIM sudah terdaftar!";
        } else {
            // Insert dengan prepared statement
            $sql = "INSERT INTO mahasiswa (nim, nama_mahasiswa, email, no_telepon, jurusan, tahun_masuk) 
                    VALUES (?, ?, ?, ?, ?, ?)";
            $stmt = mysqli_prepare($conn, $sql);

            if ($stmt) {
                // PENTING: Type parameter yang benar (sssssi = 6 tipe untuk 6 variabel)
                mysqli_stmt_bind_param($stmt, "sssssi", $nim, $nama, $email, $telp, $jur, $thn);
                
                if (mysqli_stmt_execute($stmt)) {
                    $success_msg = "✅ Data berhasil ditambahkan!";
                    $_POST = array();
                } else {
                    $error_msg = "❌ Gagal menambahkan data: " . mysqli_error($conn);
                }
                mysqli_stmt_close($stmt);
            } else {
                $error_msg = "❌ Error prepare statement: " . mysqli_error($conn);
            }
        }
        mysqli_stmt_close($check_stmt);
    }
}

?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tambah Data Mahasiswa</title>

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20*%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20body%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20'Segoe%20UI'%2C%20Tahoma%2C%20Geneva%2C%20Verdana%2C%20sans-serif%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20linear-gradient(135deg%2C%20%23667eea%200%25%2C%20%23764ba2%20100%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20min-height%3A%20100vh%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.container%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20white%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%200%2010px%2040px%20rgba(0%2C0%2C0%2C0.3)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width%3A%20600px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.header%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20linear-gradient(135deg%2C%20%23667eea%200%25%2C%20%23764ba2%20100%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20white%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2030px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.header%20h1%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2024px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%205px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.header%20p%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%200.9%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2030px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%2F*%20Alert%20Messages%20*%2F%0A%20%20%20%20%20%20%20%20.alert%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20animation%3A%20slideDown%200.3s%20ease-in%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%40keyframes%20slideDown%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20from%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20translateY(-10px)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20translateY(0)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.alert.show%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.alert-success%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23d4edda%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23155724%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20%23c3e6cb%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.alert-error%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23f8d7da%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23721c24%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20%23f5c6cb%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%2F*%20Form%20*%2F%0A%20%20%20%20%20%20%20%20.form-group%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.form-group%20label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%208px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20500%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23333%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.required%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23dc3545%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22text%22%5D%2C%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22email%22%5D%2C%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22number%22%5D%2C%0A%20%20%20%20%20%20%20%20select%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2010px%2012px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20%23ddd%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20inherit%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20border-color%200.3s%2C%20box-shadow%200.3s%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22text%22%5D%3Afocus%2C%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22email%22%5D%3Afocus%2C%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22number%22%5D%3Afocus%2C%0A%20%20%20%20%20%20%20%20select%3Afocus%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20outline%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-color%3A%20%23667eea%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%200%200%200%203px%20rgba(102%2C%20126%2C%20234%2C%200.1)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.form-buttons%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%2030px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20button%2C%20.btn-back%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2012px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20600%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20all%200.3s%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-add%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%2328a745%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20white%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-add%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23218838%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20translateY(-2px)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%200%205px%2015px%20rgba(40%2C%20167%2C%2069%2C%200.3)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-back%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23999%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20white%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-back%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23777%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%2F*%20Info%20Box%20*%2F%0A%20%20%20%20%20%20%20%20.info-box%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23e7f3ff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-left%3A%204px%20solid%20%232196F3%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%231565c0%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2013px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%2F*%20Responsive%20*%2F%0A%20%20%20%20%20%20%20%20%40media%20(max-width%3A%20600px)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.container%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.form-buttons%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20flex-direction%3A%20column%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-style" width="20" height="20" alt="&lt;style&gt;" />
</head>

<body>

<div class="container">
    <!-- Header -->
    <div class="header">
        <h1>➕ Tambah Data Mahasiswa</h1>
        <p>Masukkan data mahasiswa baru ke dalam sistem</p>
    </div>

    <div class="content">
        <!-- Alert Messages -->
        <?php if ($success_msg): ?>
            <div class="alert alert-success show">
                <?php echo $success_msg; ?>
            </div>
        <?php endif; ?>

        <?php if ($error_msg): ?>
            <div class="alert alert-error show">
                <?php echo $error_msg; ?>
            </div>
        <?php endif; ?>

        <!-- Info Box -->
        <div class="info-box">
            ℹ️ Semua field yang bertanda <span class="required">*</span> wajib diisi
        </div>

        <!-- FORM TAMBAH DATA -->
        <form method="POST">
            <div class="form-group">
                <label for="nim">NIM <span class="required">*</span></label>
                <input type="text" id="nim" name="nim" placeholder="Contoh: A001" required 
                       value="<?php echo isset($_POST['nim']) ? htmlspecialchars($_POST['nim']) : ''; ?>">
            </div>

            <div class="form-group">
                <label for="nama_mahasiswa">Nama Mahasiswa <span class="required">*</span></label>
                <input type="text" id="nama_mahasiswa" name="nama_mahasiswa" placeholder="Nama lengkap" required
                       value="<?php echo isset($_POST['nama_mahasiswa']) ? htmlspecialchars($_POST['nama_mahasiswa']) : ''; ?>">
            </div>

            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" placeholder="email@example.com"
                       value="<?php echo isset($_POST['email']) ? htmlspecialchars($_POST['email']) : ''; ?>">
            </div>

            <div class="form-group">
                <label for="no_telepon">No Telepon</label>
                <input type="text" id="no_telepon" name="no_telepon" placeholder="08xxxxxxxxx"
                       value="<?php echo isset($_POST['no_telepon']) ? htmlspecialchars($_POST['no_telepon']) : ''; ?>">
            </div>

            <div class="form-group">
                <label for="jurusan">Jurusan <span class="required">*</span></label>
                <select id="jurusan" name="jurusan" required>
                    <option value="">-- Pilih Jurusan --</option>
                    <option value="Teknik Informatika" <?php echo (isset($_POST['jurusan']) && $_POST['jurusan'] === 'Teknik Informatika') ? 'selected' : ''; ?>>Teknik Informatika</option>
                    <option value="Sistem Informasi" <?php echo (isset($_POST['jurusan']) && $_POST['jurusan'] === 'Sistem Informasi') ? 'selected' : ''; ?>>Sistem Informasi</option>
                    <option value="Desain Grafis" <?php echo (isset($_POST['jurusan']) && $_POST['jurusan'] === 'Desain Grafis') ? 'selected' : ''; ?>>Desain Grafis</option>
                    <option value="Manajemen Informatika" <?php echo (isset($_POST['jurusan']) && $_POST['jurusan'] === 'Manajemen Informatika') ? 'selected' : ''; ?>>Manajemen Informatika</option>
                </select>
            </div>

            <div class="form-group">
                <label for="tahun_masuk">Tahun Masuk <span class="required">*</span></label>
                <input type="number" id="tahun_masuk" name="tahun_masuk" placeholder="2023" 
                       min="2000" max="<?php echo date('Y'); ?>" required
                       value="<?php echo isset($_POST['tahun_masuk']) ? htmlspecialchars($_POST['tahun_masuk']) : ''; ?>">
            </div>

            <div class="form-buttons">
                <button type="submit" name="add" class="btn-add">💾 Simpan Data</button>
                <a href="javascript:history.back()" class="btn-back">🔙 Kembali</a>
            </div>
        </form>
    </div>
</div>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%2F%2F%20Hide%20alert%20setelah%205%20detik%0A%20%20%20%20setTimeout(function()%20%7B%0A%20%20%20%20%20%20%20%20const%20alerts%20%3D%20document.querySelectorAll('.alert')%3B%0A%20%20%20%20%20%20%20%20alerts.forEach(function(alert)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20alert.style.display%20%3D%20'none'%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%2C%205000)%3B%0A%0A%20%20%20%20%2F%2F%20Optional%3A%20Redirect%20ke%20halaman%20sebelumnya%20jika%20sukses%0A%20%20%20%20%3C%3Fphp%20if%20(%24success_msg)%3A%20%3F%3E%0A%20%20%20%20%20%20%20%20setTimeout(function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20window.location.href%20%3D%20'mahasiswa.php'%3B%0A%20%20%20%20%20%20%20%20%7D%2C%202000)%3B%0A%20%20%20%20%3C%3Fphp%20endif%3B%20%3F%3E%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-script" width="20" height="20" alt="&lt;script&gt;" />

</body>
</html>

 

 

Sistem CURD

<?php
// ======================
// KONEKSI DATABASE
// ======================
$host = "localhost";
$user = "root";
$pass = "";
$db   = "universitas";

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

if (!$conn) {
    die("Koneksi gagal: " . mysqli_connect_error());
}

// Set charset untuk keamanan
mysqli_set_charset($conn, "utf8mb4");

// ======================
// FUNGSI VALIDASI INPUT
// ======================
function validateInput($data) {
    return htmlspecialchars(trim($data), ENT_QUOTES, 'UTF-8');
}

function validateEmail($email) {
    return filter_var($email, FILTER_VALIDATE_EMAIL);
}

function validateYear($year) {
    $year = (int)$year;
    return ($year >= 2000 && $year <= date('Y')) ? $year : false;
}

// ======================
// ACTION: INSERT (DENGAN PREPARED STATEMENTS)
// ======================
$success_msg = '';
$error_msg = '';

if (isset($_POST['add'])) {
    // Validasi input
    $nim = validateInput($_POST['nim'] ?? '');
    $nama = validateInput($_POST['nama_mahasiswa'] ?? '');
    $email = validateInput($_POST['email'] ?? '');
    $telp = validateInput($_POST['no_telepon'] ?? '');
    $jur = validateInput($_POST['jurusan'] ?? '');
    $thn = validateYear($_POST['tahun_masuk'] ?? 0);

    // Validasi email
    if (!validateEmail($email)) {
        $error_msg = "❌ Format email tidak valid!";
    }
    // Validasi tahun
    elseif ($thn === false) {
        $error_msg = "❌ Tahun masuk tidak valid!";
    }
    // Validasi field kosong
    elseif (empty($nim) || empty($nama) || empty($jur)) {
        $error_msg = "❌ NIM, Nama, dan Jurusan tidak boleh kosong!";
    }
    else {
        // Cek apakah NIM sudah ada
        $check_sql = "SELECT nim FROM mahasiswa WHERE nim = ?";
        $check_stmt = mysqli_prepare($conn, $check_sql);
        mysqli_stmt_bind_param($check_stmt, "s", $nim);
        mysqli_stmt_execute($check_stmt);
        $check_result = mysqli_stmt_get_result($check_stmt);

        if (mysqli_num_rows($check_result) > 0) {
            $error_msg = "❌ NIM sudah terdaftar!";
        } else {
            // Insert dengan prepared statement
            $sql = "INSERT INTO mahasiswa (nim, nama_mahasiswa, email, no_telepon, jurusan, tahun_masuk) 
                    VALUES (?, ?, ?, ?, ?, ?)";
            $stmt = mysqli_prepare($conn, $sql);

            if ($stmt) {
                // PENTING: Type parameter yang benar (sssssi = 6 tipe untuk 6 variabel)
                mysqli_stmt_bind_param($stmt, "sssssi", $nim, $nama, $email, $telp, $jur, $thn);
                
                if (mysqli_stmt_execute($stmt)) {
                    $success_msg = "✅ Data berhasil ditambahkan!";
                    $_POST = array();
                } else {
                    $error_msg = "❌ Gagal menambahkan data: " . mysqli_error($conn);
                }
                mysqli_stmt_close($stmt);
            } else {
                $error_msg = "❌ Error prepare statement: " . mysqli_error($conn);
            }
        }
        mysqli_stmt_close($check_stmt);
    }
}

// ======================
// ACTION: DELETE (DENGAN PREPARED STATEMENTS)
// ======================
if (isset($_GET['delete'])) {
    $nim = validateInput($_GET['delete']);
    
    $sql = "DELETE FROM mahasiswa WHERE nim = ?";
    $stmt = mysqli_prepare($conn, $sql);
    
    if ($stmt) {
        mysqli_stmt_bind_param($stmt, "s", $nim);
        
        if (mysqli_stmt_execute($stmt)) {
            $success_msg = "✅ Data berhasil dihapus!";
        } else {
            $error_msg = "❌ Gagal menghapus data: " . mysqli_error($conn);
        }
        mysqli_stmt_close($stmt);
    }
}

// ======================
// ACTION: UPDATE (DENGAN PREPARED STATEMENTS)
// ======================
if (isset($_POST['update'])) {
    // Validasi input
    $nim = validateInput($_POST['nim'] ?? '');
    $nama = validateInput($_POST['nama_mahasiswa'] ?? '');
    $email = validateInput($_POST['email'] ?? '');
    $telp = validateInput($_POST['no_telepon'] ?? '');
    $jur = validateInput($_POST['jurusan'] ?? '');
    $thn = validateYear($_POST['tahun_masuk'] ?? 0);

    // Validasi email
    if (!validateEmail($email)) {
        $error_msg = "❌ Format email tidak valid!";
    }
    // Validasi tahun
    elseif ($thn === false) {
        $error_msg = "❌ Tahun masuk tidak valid!";
    }
    // Validasi field kosong
    elseif (empty($nim) || empty($nama) || empty($jur)) {
        $error_msg = "❌ NIM, Nama, dan Jurusan tidak boleh kosong!";
    }
    else {
        // Update dengan prepared statement
        $sql = "UPDATE mahasiswa 
                SET nama_mahasiswa = ?, 
                    email = ?, 
                    no_telepon = ?, 
                    jurusan = ?, 
                    tahun_masuk = ? 
                WHERE nim = ?";
        $stmt = mysqli_prepare($conn, $sql);

        if ($stmt) {
            // PENTING: Type parameter yang benar (ssssis = 6 tipe untuk 6 variabel)
            mysqli_stmt_bind_param($stmt, "ssssis", $nama, $email, $telp, $jur, $thn, $nim);
            
            if (mysqli_stmt_execute($stmt)) {
                $success_msg = "✅ Data berhasil diupdate!";
                $_POST = array();
            } else {
                $error_msg = "❌ Gagal mengupdate data: " . mysqli_error($conn);
            }
            mysqli_stmt_close($stmt);
        } else {
            $error_msg = "❌ Error prepare statement: " . mysqli_error($conn);
        }
    }
}

// ======================
// QUERY DATA
// ======================
$result = mysqli_query($conn, "SELECT * FROM mahasiswa ORDER BY nim ASC");

?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD Mahasiswa - Sistem Informasi Akademik</title>

    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20*%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20body%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20'Segoe%20UI'%2C%20Tahoma%2C%20Geneva%2C%20Verdana%2C%20sans-serif%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20linear-gradient(135deg%2C%20%23667eea%200%25%2C%20%23764ba2%20100%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20min-height%3A%20100vh%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2030px%2020px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.container%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width%3A%201200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20white%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%200%2010px%2040px%20rgba(0%2C0%2C0%2C0.3)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.header%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20linear-gradient(135deg%2C%20%23667eea%200%25%2C%20%23764ba2%20100%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20white%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2030px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.header%20h1%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2028px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%205px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.header%20p%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%200.9%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2030px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%2F*%20Alert%20Messages%20*%2F%0A%20%20%20%20%20%20%20%20.alert%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20animation%3A%20slideDown%200.3s%20ease-in%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%40keyframes%20slideDown%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20from%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20translateY(-10px)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20translateY(0)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.alert.show%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.alert-success%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23d4edda%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23155724%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20%23c3e6cb%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.alert-error%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23f8d7da%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23721c24%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20%23f5c6cb%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%2F*%20Form%20Section%20*%2F%0A%20%20%20%20%20%20%20%20.form-section%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23f9f9f9%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2025px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%208px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2030px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-left%3A%204px%20solid%20%23667eea%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.form-section%20h3%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23333%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2018px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.form-group%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.form-group%20label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%208px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20500%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23333%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.form-row%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20grid%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20grid-template-columns%3A%20repeat(auto-fit%2C%20minmax(200px%2C%201fr))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22text%22%5D%2C%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22email%22%5D%2C%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22number%22%5D%2C%0A%20%20%20%20%20%20%20%20select%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2010px%2012px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20%23ddd%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20inherit%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20border-color%200.3s%2C%20box-shadow%200.3s%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22text%22%5D%3Afocus%2C%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22email%22%5D%3Afocus%2C%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22number%22%5D%3Afocus%2C%0A%20%20%20%20%20%20%20%20select%3Afocus%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20outline%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-color%3A%20%23667eea%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%200%200%200%203px%20rgba(102%2C%20126%2C%20234%2C%200.1)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22text%22%5D%3Adisabled%2C%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22email%22%5D%3Adisabled%2C%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22number%22%5D%3Adisabled%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23f5f5f5%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20not-allowed%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.form-buttons%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20button%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2010px%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20600%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20all%200.3s%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-add%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%2328a745%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20white%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex%3A%201%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-add%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23218838%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20translateY(-2px)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%200%205px%2015px%20rgba(40%2C%20167%2C%2069%2C%200.3)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-cancel%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23999%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20white%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-cancel%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23777%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%2F*%20Table%20Section%20*%2F%0A%20%20%20%20%20%20%20%20.table-section%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%2030px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.table-section%20h3%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23333%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2018px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20table%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-collapse%3A%20collapse%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20table%20thead%20tr%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23667eea%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20white%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20table%20th%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20left%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20600%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20table%20td%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2012px%2015px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-bottom%3A%201px%20solid%20%23eee%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20table%20tbody%20tr%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23f5f5f5%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-edit%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23ffc107%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23333%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%206px%2012px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-right%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%203px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2012px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-edit%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23e0a800%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-delete%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23dc3545%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20white%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%206px%2012px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20inline-block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%203px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2012px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-delete%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23c82333%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.action-column%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20150px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%2F*%20Edit%20Form%20(Popup)%20*%2F%0A%20%20%20%20%20%20%20%20%23formEdit%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2025px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23f9f9f9%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%202px%20solid%20%23667eea%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%208px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20animation%3A%20slideDown%200.3s%20ease-in%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%23formEdit%20h3%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23333%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-close%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23999%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20white%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%208px%2015px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-close%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23777%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%2F*%20DataTables%20Customization%20*%2F%0A%20%20%20%20%20%20%20%20.dataTables_wrapper%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200%20!important%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.dataTables_length%2C%0A%20%20%20%20%20%20%20%20.dataTables_filter%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.dataTables_info%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%2F*%20Responsive%20*%2F%0A%20%20%20%20%20%20%20%20%40media%20(max-width%3A%20768px)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.container%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.form-row%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20grid-template-columns%3A%201fr%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20.form-buttons%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20flex-direction%3A%20column%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20table%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2013px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20table%20th%2C%20table%20td%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%208px%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-style" width="20" height="20" alt="&lt;style&gt;" />
</head>

<body>

<div class="container">
    <!-- Header -->
    <div class="header">
        <h1>📚 Manajemen Data Mahasiswa</h1>
        <p>Sistem Informasi Akademik - CRUD dengan Keamanan Prepared Statements</p>
    </div>

    <div class="content">
        <!-- Alert Messages -->
        <?php if ($success_msg): ?>
            <div class="alert alert-success show">
                <?php echo $success_msg; ?>
            </div>
        <?php endif; ?>

        <?php if ($error_msg): ?>
            <div class="alert alert-error show">
                <?php echo $error_msg; ?>
            </div>
        <?php endif; ?>

        <!-- FORM TAMBAH DATA -->
        <div class="form-section">
            <h3>➕ Tambah Data Mahasiswa Baru</h3>
            <form method="POST">
                <div class="form-row">
                    <div class="form-group">
                        <label for="nim">NIM *</label>
                        <input type="text" id="nim" name="nim" placeholder="Contoh: A001" required 
                               value="<?php echo isset($_POST['nim']) ? htmlspecialchars($_POST['nim']) : ''; ?>">
                    </div>

                    <div class="form-group">
                        <label for="nama_mahasiswa">Nama Mahasiswa *</label>
                        <input type="text" id="nama_mahasiswa" name="nama_mahasiswa" placeholder="Nama lengkap" required
                               value="<?php echo isset($_POST['nama_mahasiswa']) ? htmlspecialchars($_POST['nama_mahasiswa']) : ''; ?>">
                    </div>

                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" placeholder="email@example.com"
                               value="<?php echo isset($_POST['email']) ? htmlspecialchars($_POST['email']) : ''; ?>">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="no_telepon">No Telepon</label>
                        <input type="text" id="no_telepon" name="no_telepon" placeholder="08xxxxxxxxx"
                               value="<?php echo isset($_POST['no_telepon']) ? htmlspecialchars($_POST['no_telepon']) : ''; ?>">
                    </div>

                    <div class="form-group">
                        <label for="jurusan">Jurusan *</label>
                        <select id="jurusan" name="jurusan" required>
                            <option value="">-- Pilih Jurusan --</option>
                            <option value="Teknik Informatika" <?php echo (isset($_POST['jurusan']) && $_POST['jurusan'] === 'Teknik Informatika') ? 'selected' : ''; ?>>Teknik Informatika</option>
                            <option value="Sistem Informasi" <?php echo (isset($_POST['jurusan']) && $_POST['jurusan'] === 'Sistem Informasi') ? 'selected' : ''; ?>>Sistem Informasi</option>
                            <option value="Desain Grafis" <?php echo (isset($_POST['jurusan']) && $_POST['jurusan'] === 'Desain Grafis') ? 'selected' : ''; ?>>Desain Grafis</option>
                            <option value="Manajemen Informatika" <?php echo (isset($_POST['jurusan']) && $_POST['jurusan'] === 'Manajemen Informatika') ? 'selected' : ''; ?>>Manajemen Informatika</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="tahun_masuk">Tahun Masuk *</label>
                        <input type="number" id="tahun_masuk" name="tahun_masuk" placeholder="2023" 
                               min="2000" max="<?php echo date('Y'); ?>" required
                               value="<?php echo isset($_POST['tahun_masuk']) ? htmlspecialchars($_POST['tahun_masuk']) : ''; ?>">
                    </div>
                </div>

                <div class="form-buttons">
                    <button type="submit" name="add" class="btn-add">💾 Simpan Data</button>
                </div>
            </form>
        </div>

        <!-- TABEL MAHASISWA -->
        <div class="table-section">
            <h3>📊 Daftar Mahasiswa</h3>
            <table id="tabelMahasiswa" class="display">
                <thead>
                    <tr>
                        <th>NIM</th>
                        <th>Nama Mahasiswa</th>
                        <th>Email</th>
                        <th>No Telepon</th>
                        <th>Jurusan</th>
                        <th>Tahun</th>
                        <th class="action-column">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                <?php 
                if (mysqli_num_rows($result) > 0) {
                    while ($row = mysqli_fetch_assoc($result)) { 
                ?>
                    <tr>
                        <td><?php echo htmlspecialchars($row['nim']); ?></td>
                        <td><?php echo htmlspecialchars($row['nama_mahasiswa']); ?></td>
                        <td><?php echo htmlspecialchars($row['email']); ?></td>
                        <td><?php echo htmlspecialchars($row['no_telepon']); ?></td>
                        <td><?php echo htmlspecialchars($row['jurusan']); ?></td>
                        <td><?php echo $row['tahun_masuk']; ?></td>
                        <td>
                            <button class="btn-edit" onclick="editData(
                                '<?php echo htmlspecialchars($row['nim'], ENT_QUOTES); ?>',
                                '<?php echo htmlspecialchars($row['nama_mahasiswa'], ENT_QUOTES); ?>',
                                '<?php echo htmlspecialchars($row['email'], ENT_QUOTES); ?>',
                                '<?php echo htmlspecialchars($row['no_telepon'], ENT_QUOTES); ?>',
                                '<?php echo htmlspecialchars($row['jurusan'], ENT_QUOTES); ?>',
                                '<?php echo $row['tahun_masuk']; ?>'
                            )">✏️ Edit</button>

                            <a href="mahasiswa.php?delete=<?php echo urlencode($row['nim']); ?>" 
                                onclick="return confirm('Yakin hapus data ini?')" 
                                class="btn-delete">🗑️ Hapus</a>
                        </td>
                    </tr>
                <?php 
                    }
                } else {
                    echo '<tr><td colspan="7" style="text-align:center; padding:20px;">📭 Tidak ada data mahasiswa</td></tr>';
                }
                ?>
                </tbody>
            </table>
        </div>

        <!-- FORM UPDATE (POPUP MODE) -->
        <div id="formEdit">
            <h3>✏️ Edit Data Mahasiswa</h3>
            <form method="POST">
                <div class="form-row">
                    <div class="form-group">
                        <label for="u_nim">NIM (Tidak bisa diubah)</label>
                        <input type="text" name="nim" id="u_nim" readonly>
                    </div>

                    <div class="form-group">
                        <label for="u_nama">Nama Mahasiswa *</label>
                        <input type="text" name="nama_mahasiswa" id="u_nama" required>
                    </div>

                    <div class="form-group">
                        <label for="u_email">Email</label>
                        <input type="email" name="email" id="u_email">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="u_telepon">No Telepon</label>
                        <input type="text" name="no_telepon" id="u_telepon">
                    </div>

                    <div class="form-group">
                        <label for="u_jurusan">Jurusan *</label>
                        <select name="jurusan" id="u_jurusan" required>
                            <option value="">-- Pilih Jurusan --</option>
                            <option value="Teknik Informatika">Teknik Informatika</option>
                            <option value="Sistem Informasi">Sistem Informasi</option>
                            <option value="Desain Grafis">Desain Grafis</option>
                            <option value="Manajemen Informatika">Manajemen Informatika</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="u_tahun">Tahun Masuk *</label>
                        <input type="number" name="tahun_masuk" id="u_tahun" 
                               min="2000" max="<?php echo date('Y'); ?>" required>
                    </div>
                </div>

                <div class="form-buttons">
                    <button type="submit" name="update" class="btn-add">💾 Update</button>
                    <button type="button" class="btn-close" onclick="closeEdit()">❌ Batal</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- JQuery + DataTables -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.6.0.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-script" width="20" height="20" alt="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdn.datatables.net%2F1.13.4%2Fjs%2Fjquery.dataTables.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-script" width="20" height="20" alt="&lt;script&gt;" />

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%24(document).ready(function()%20%7B%0A%20%20%20%20%24('%23tabelMahasiswa').DataTable(%7B%0A%20%20%20%20%20%20%20%20%22language%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22url%22%3A%20%22https%3A%2F%2Fcdn.datatables.net%2Fplug-ins%2F1.13.4%2Fi18n%2Fid.json%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22pageLength%22%3A%2010%2C%0A%20%20%20%20%20%20%20%20%22responsive%22%3A%20true%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%2F%2F%20Hide%20alert%20setelah%205%20detik%0A%20%20%20%20setTimeout(function()%20%7B%0A%20%20%20%20%20%20%20%20%24('.alert').fadeOut()%3B%0A%20%20%20%20%7D%2C%205000)%3B%0A%7D)%3B%0A%0A%2F%2F%20Menampilkan%20form%20edit%0Afunction%20editData(nim%2C%20nama%2C%20email%2C%20telp%2C%20jurusan%2C%20tahun)%20%7B%0A%20%20%20%20document.getElementById('formEdit').style.display%20%3D%20'block'%3B%0A%20%20%20%20document.getElementById('u_nim').value%20%3D%20nim%3B%0A%20%20%20%20document.getElementById('u_nama').value%20%3D%20nama%3B%0A%20%20%20%20document.getElementById('u_email').value%20%3D%20email%3B%0A%20%20%20%20document.getElementById('u_telepon').value%20%3D%20telp%3B%0A%20%20%20%20document.getElementById('u_jurusan').value%20%3D%20jurusan%3B%0A%20%20%20%20document.getElementById('u_tahun').value%20%3D%20tahun%3B%0A%0A%20%20%20%20%2F%2F%20Scroll%20ke%20form%20edit%0A%20%20%20%20document.getElementById('formEdit').scrollIntoView(%7B%20behavior%3A%20'smooth'%20%7D)%3B%0A%7D%0A%0A%2F%2F%20Menutup%20form%20edit%0Afunction%20closeEdit()%20%7B%0A%20%20%20%20document.getElementById('formEdit').style.display%20%3D%20'none'%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-script" width="20" height="20" alt="&lt;script&gt;" />

</body>
</html>
Post Views: 593

Pos Terkait

Gambar Ilustrasi Menggunakan AITips
Perundungan Bukan Candaan, tetapi Luka Sosial yang Nyata
Ilustrasi Piramida OrganisasiTeknologi
Piramida Organisasi: Dasar Struktur Manajemen
Ilustrasi Perbandingan Product Owner dan Product ManagerTeknologi
Product Owner dan Product Manager: Bedanya di Mana?
Ilustrasi Perbedaan Project Owner dan Project ManagerTeknologi
Project Owner dan Project Manager: Dua Peran Penting
Tips
Indonesia Sambut Positif Usulan Peningkatan Kerja Sama dengan Gambia
Tips
Tekan Angka Kecelakaan, Ditjen Hubdat Gelar Bimtek dan Kompetisi Pengemudi Angkutan Barang

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Baca Juga