Sito web reattivo con dati sugli studenti

1613 securearray365

Apri nell'Editor Pubblica il Tuo Codice

Sito web reattivo con dati sugli studenti

Consigliato

30 November 2024

Sito web di viaggi con bordo invertito

9 September 2025

Contenitore di animazione pixel CSS

27 October 2024

Sito di gioco crackato pubblico Chiunque può postare

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

Consigliato

Sito web di viaggi con bordo invertito

Contenitore di animazione pixel CSS

Sito di gioco crackato pubblico Chiunque può postare

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS