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

2,427 0 securearray365 Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

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

Recommandé

14 September 2024

Boutique de commerce électronique

13 October 2026

Déchiffreur et chargeur de script obfusqué en JavaScript

25 May 2025

icône de chargement 3

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

Comments 0

…