Cara Membuat Form Pendaftaran Siswa dengan HTML dan JavaScript

3 Mar, 2024
Cara Membuat Form Pendaftaran Siswa dengan HTML dan JavaScript

Cara Membuat Form Pendaftaran Siswa dengan HTML dan JavaScript - Pada kesempatan ini, saya akan memberikan panduan membuat form pendaftaran siswa baru menggunakan HTML dan CSS, serta menyimpan data secara lokal lewat LocalStorage.

LocalStorage merupakan fitur pada browser web yang bisa menyimpan data dalam bentuk key-value pairs secara lokal di device user. Data yang disimpan dalam localStorage tetap tersedia bahkan setelah pengguna menutup browser atau mengakhiri sesi. Data tersebut akan tetap tersimpan sampai user secara eksplisit menghapusnya atau melalui penghapusan cache browser.

Sebelum membuat, berikut alat yang harus disiapkan.

  • Komputer/Laptop/Android. jika tidak punya silahkan pinjam teman anda.
  • Aplikasi Text Editor. anda bisa menggunakan notepad, notepad++, VSC, sublime text, dll.
  • Browser. untuk membuka file websitenya nanti.
  • Niat yang Tulus. tanpa niat usahamu akan sia-sia.

Cara Membuat Form Pendaftaran PDBB dengan Javascript

Berikut ini panduan lengkap cara membuat halaman pendaftaran siswa maupun lainnya yang bisa menjadi bahan referensi, sebagai berikut :

1. Buat File index.html

Langkah pertama buka aplikasi text editor dan buat file index.html dan copy pastekan kode berikut ini.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Pendaftaran Siswa | AnsoriWeb.com</title>
<style>
</style>
</head>
<body>

<div class="container">
    <h2>Form Pendaftaran Siswa</h2>
    <p>by <a href="https://www.ansoriweb.com">ansoriweb.com</a></p>
    <div id="form">
        <div class="form-group">
            <label for="nama">Nama:</label>
            <input type="text" id="nama">
        </div>
        <div class="form-group">
            <label for="jenisKelamin">Jenis Kelamin:</label>
            <select id="jenisKelamin">
                <option value="Laki-laki">Laki-laki</option>
                <option value="Perempuan">Perempuan</option>
            </select>
        </div>
        <div class="form-group">
            <label for="tanggalLahir">Tanggal Lahir:</label>
            <input type="date" id="tanggalLahir">
        </div>
        <div class="form-group">
            <label for="umur">Umur:</label>
            <input type="number" id="umur">
        </div>
        <div class="form-group">
            <label for="alamat">Alamat:</label>
            <input type="text" id="alamat">
        </div>
        <div class="form-group">
            <label for="jurusan">Jurusan:</label>
            <input type="text" id="jurusan">
        </div>
        <button class="btn" onclick="simpanData()">Simpan</button>
    </div>

    <table id="dataTable">
        <thead>
            <tr>
                <th>Nama</th>
                <th>Jenis Kelamin</th>
                <th>Tanggal Lahir</th>
                <th>Umur</th>
                <th>Alamat</th>
                <th>Jurusan</th>
            </tr>
        </thead>
        <tbody>
            <!-- Data akan dimasukkan di sini dengan JavaScript -->
        </tbody>
    </table>
</div>

<script>
</script>

</body>
</html>

2. Tambahkan Kode CSS

Kemudian tambahkan kode CSS diantara <style> </style>, copy dan paste kode berikut ini.

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}

.container {
max-width: 500px;
margin: 50px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.container h2, p {
text-align: center;
margin-bottom: 20px;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
font-weight: bold;
}

.form-group input, .form-group select {
width: 100%;
padding: 8px;
border-radius: 4px;
border: 1px solid #ccc;
}

.btn {
display: block;
width: 100%;
padding: 10px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

table th, table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

table th {
background-color: #f2f2f2;
}

 3. Tambahkan Kode JavaScript

Setelah itu tambahkan kode javascript diantara <script> </script> agar fungsi menyimpan data ke LocalStorage berjalan dengan baik.

function simpanData() {
    var nama = document.getElementById("nama").value;
    var jenisKelamin = document.getElementById("jenisKelamin").value;
    var tanggalLahir = document.getElementById("tanggalLahir").value;
    var umur = document.getElementById("umur").value;
    var alamat = document.getElementById("alamat").value;
    var jurusan = document.getElementById("jurusan").value;

    if (nama && jenisKelamin && tanggalLahir && umur && alamat && jurusan) {
        var siswa = {
            nama: nama,
            jenisKelamin: jenisKelamin,
            tanggalLahir: tanggalLahir,
            umur: umur,
            alamat: alamat,
            jurusan: jurusan
        };

        // Menyimpan data ke local storage
        if (localStorage.getItem("siswaData") === null) {
            var siswaData = [];
            siswaData.push(siswa);
            localStorage.setItem("siswaData", JSON.stringify(siswaData));
        } else {
            var siswaData = JSON.parse(localStorage.getItem("siswaData"));
            siswaData.push(siswa);
            localStorage.setItem("siswaData", JSON.stringify(siswaData));
        }

        // Menampilkan data di tabel
        tampilkanData();
    } else {
        alert("Harap lengkapi semua field!");
    }
}

function tampilkanData() {
    var siswaData = JSON.parse(localStorage.getItem("siswaData"));
    var tableBody = document.getElementById("dataTable").getElementsByTagName('tbody')[0];
    tableBody.innerHTML = '';

    if (siswaData !== null) {
        siswaData.forEach(function(item) {
            var row = tableBody.insertRow();
            var namaCell = row.insertCell(0);
            var jenisKelaminCell = row.insertCell(1);
            var tanggalLahirCell = row.insertCell(2);
            var umurCell = row.insertCell(3);
            var alamatCell = row.insertCell(4);
            var jurusanCell = row.insertCell(5);

            namaCell.textContent = item.nama;
            jenisKelaminCell.textContent = item.jenisKelamin;
            tanggalLahirCell.textContent = item.tanggalLahir;
            umurCell.textContent = item.umur;
            alamatCell.textContent = item.alamat;
            jurusanCell.textContent = item.jurusan;
        });
    }
}

// Memanggil fungsi tampilkanData() saat halaman dimuat
document.addEventListener("DOMContentLoaded", function() {
    tampilkanData();
});

4. Jalankan Kode

Setelah selesai, silakan buka file index.html menggunakan browser yang sudah disiapkan. Isilah data pada formulir input dan klik tombol 'Simpan'. Data akan otomatis tersimpan dan muncul di tabel.
Cara Membuat Form Pendaftaran Siswa dengan HTML dan JavaScript

Kesimpulan

Demikian panduan membuat form pendaftaran siswa dengan html dan javascipt, semoga tutorial webiste ini bermanfaat bagi kita semua yang sedang mencari referensi yang diberikan oleh guru anda. Jika ada pertanyaan atau kurang jelas, script error, atau segala pertanyaan tentang artikel ini bisa ditanyakan melalui kolom komentar dibawah ini. Terima Kasih.

Next Post Previous Post
No Comment
Add Comment
comment url