Site Web de données sur les étudiants réactif

2,075 securearray365

Ouvrir dans l'éditeur Publiez votre code

Site Web de données sur les étudiants réactif

Recommandé

19 October 2024

Formulaire de connexion HTML animé

20 February 2026

Modèle HTML de tableau de bord analytique avec graphiques

6 May 2026

saut de gribouillage

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Mahasiswa</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Data Mahasiswa</h1>
        
        
        <div class="form-group">
            <input type="text" id="nama" placeholder="Nama Mahasiswa" />
            <input type="number" id="umur" placeholder="Umur" />
            <input type="text" id="jurusan" placeholder="Jurusan" />
            <button id="tambah" class="btn">Tambah</button>
        </div>

<div class="search-bar">
            <input type="text" id="search" placeholder="Cari Mahasiswa..." />
        </div>

<table id="data-mahasiswa">
            <thead>
                <tr>
                    <th>Nama</th>
                    <th>Umur</th>
                    <th>Jurusan</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody id="mahasiswa-list"></tbody>
        </table>
    </div>

CSS

/* Reset default margin dan padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #fff4e1; /* Batik-like background color */
    background-image: url('/img/Download\ Traditional\ Indonesian\ Batik\ Background\ Template\ for\ free.jpeg'); /* Background batik pattern */
    background-size: cover;
    background-position: center;
    color: #333;
}

/* Container utama */
.container {
    width: 80%;
    margin: 40px auto;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* Styling judul */
h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #9c5f2f; /* Batik brown color */
}

/* Form input data */
.form-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.form-group input {
    padding: 10px;
    width: 200px;
    border: 1px solid #9c5f2f;
    border-radius: 4px;
    outline: none;
}

.form-group input:focus {
    border-color: #de8d45; /* Lighter brown color on focus */
}

.btn {
    padding: 10px 20px;
    background-color: #8b4513; /* Dark batik brown */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn:hover {
    background-color: #de8d45; /* Lighter brown color */
}

/* Search bar */
.search-bar {
    text-align: center;
    margin-bottom: 20px;
}

#search {
    padding: 10px;
    width: 50%;
    border: 1px solid #9c5f2f;
    border-radius: 4px;
    outline: none;
}

#search:focus {
    border-color: #de8d45; /* Lighter brown color */
}

/* Tabel untuk data mahasiswa */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 12px;
    text-align: left;
}

th {
    background-color: #8b4513; /* Dark batik brown */
    color: white;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

td button {
    padding: 5px 10px;
    margin-right: 5px;
    cursor: pointer;
}

.edit-btn {
    background-color: #ffbf00; /* Yellow batik */
}

.delete-btn {
    background-color: #dc3545; /* Red color */
}

.edit-btn:hover {
    background-color: #e0a800; /* Dark yellow on hover */
}

.delete-btn:hover {
    background-color: #c82333; /* Dark red on hover */
}

/* Media query untuk responsif */
@media screen and (max-width: 768px) {
    .form-group {
        flex-direction: column;
    }

#search {
        width: 100%;
    }
}

// Class Mahasiswa untuk OOP
class Mahasiswa {
    constructor(nama, umur, jurusan) {
        this.nama = nama;
        this.umur = umur;
        this.jurusan = jurusan;
    }
}

$(document).ready(function () {
    // Mengambil data mahasiswa dari Local Storage
    let mahasiswaData = JSON.parse(localStorage.getItem("mahasiswa")) || [];

// Fungsi untuk menampilkan data mahasiswa
    function renderData() {
        $("#mahasiswa-list").empty();
        mahasiswaData.forEach((mhs, index) => {
            $("#mahasiswa-list").append(`
                <tr>
                    <td>${mhs.nama}</td>
                    <td>${mhs.umur}</td>
                    <td>${mhs.jurusan}</td>
                    <td>
                        <button class="edit-btn" data-index="${index}">Edit</button>
                        <button class="delete-btn" data-index="${index}">Hapus</button>
                    </td>
                </tr>
            `);
        });
    }

// Menambah mahasiswa baru
    $("#tambah").click(function () {
        const nama = $("#nama").val();
        const umur = $("#umur").val();
        const jurusan = $("#jurusan").val();

if (nama && umur && jurusan) {
            const newMahasiswa = new Mahasiswa(nama, umur, jurusan);
            mahasiswaData.push(newMahasiswa);
            localStorage.setItem("mahasiswa", JSON.stringify(mahasiswaData));
            renderData();
            $("#nama").val("");
            $("#umur").val("");
            $("#jurusan").val("");
        } else {
            alert("Semua field harus diisi!");
        }
    });

// Edit data mahasiswa
    $(document).on("click", ".edit-btn", function () {
        const index = $(this).data("index");
        const mhs = mahasiswaData[index];
        $("#nama").val(mhs.nama);
        $("#umur").val(mhs.umur);
        $("#jurusan").val(mhs.jurusan);
        mahasiswaData.splice(index, 1); // Hapus sementara untuk update
        localStorage.setItem("mahasiswa", JSON.stringify(mahasiswaData));
    });

// Hapus data mahasiswa
    $(document).on("click", ".delete-btn", function () {
        const index = $(this).data("index");
        mahasiswaData.splice(index, 1);
        localStorage.setItem("mahasiswa", JSON.stringify(mahasiswaData));
        renderData();
    });

// Search mahasiswa
    $("#search").keyup(function () {
        const searchTerm = $(this).val().toLowerCase();
        const filteredData = mahasiswaData.filter(mhs => 
            mhs.nama.toLowerCase().includes(searchTerm) ||
            mhs.umur.toString().includes(searchTerm) ||
            mhs.jurusan.toLowerCase().includes(searchTerm)
        );
        $("#mahasiswa-list").empty();
        filteredData.forEach((mhs, index) => {
            $("#mahasiswa-list").append(`
                <tr>
                    <td>${mhs.nama}</td>
                    <td>${mhs.umur}</td>
                    <td>${mhs.jurusan}</td>
                    <td>
                        <button class="edit-btn" data-index="${index}">Edit</button>
                        <button class="delete-btn" data-index="${index}">Hapus</button>
                    </td>
                </tr>
            `);
        });
    });

// Render data awal
    renderData();
});