उत्तरदायी छात्र डेटा वेबसाइट

1110 securearray365

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

30 August 2024

शुद्ध सीएसएस वन डिव हाउस उत्तरदायी एनीमेशन

26 October 2024

HTML CSS डेवलपर पोर्टफोलियो वेबसाइट टेम्पलेट

10 April 2025

डैनियल का ब्लॉग वेबसाइट

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%;
    }
}

JS

// 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();
});

अनुशंसित

शुद्ध सीएसएस वन डिव हाउस उत्तरदायी एनीमेशन

HTML CSS डेवलपर पोर्टफोलियो वेबसाइट टेम्पलेट

डैनियल का ब्लॉग वेबसाइट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS