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

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 August 2024

Fiche réalisée avec un index pastel sécurisé

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

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

Recommandé

Formulaire d'idée

Code de bouton brillant

Fiche réalisée avec un index pastel sécurisé

HTML

CSS

JS

Recommandé

Formulaire d'idée

Code de bouton brillant

Fiche réalisée avec un index pastel sécurisé

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS