Cara membuat Web Responsive Navbar sederhana dengan HTML, CSS , dan Javascript

pada tanggal
0

Cara membuat aplikasi CRUD(Create, Reset, Update, Delete) web sederhana dengan javascript

pada tanggal


    Halo teman-teman, pada blog ini saya ingin memberikan sedikit toturial cara membuat aplikasi CRUD(Create, Reset, Update, Delete) sederhana dengan javascript. di sini saya juga menggunakan bootstrap 5 untuk menghias tampilan webnya, contoh webnya seperti gambar berikut:



Link demonya di sini
Dan untuk mendownload script beseta asset-assetnya di sini


Atau teman-teman dapat mengikuti lagkah-langkah berikut ini:

Pertama buat forder dengan nama CRUD APP , atau teman-teman boleh menamakannya dengan yang lain juga boleh.

Selanjutnya di dalam forder CRUD APP ,buat file bernama index.html atau terserah teman-teman ingin menamakannya apa, yang harus di perhalikan yaitu extension filenya harus .html ,di file ini teman-teman copykan script berikut:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- jQuery -->
    <script src="assets/jquery.min.js"></script>

    <!-- bootstrap icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Aplikasi CRUD sederhana | semunfo</title>
  </head>
  <body onload="muatDaftarData()">
    <div class="container">

      <div class="text-center p-3">
        <h1>Aplikasi CRUD sederhana dengan javascript</h1>
      </div>
      <hr>

      <div class="row justify-content-center bg-light mb-4 p-3">
        <div id="list-data" class="table-responsive-md">
            Belum ada data.....
        </div>
      </div>

      <!-- form tambah data -->
      <div class="row justify-content-center">
        <div id="tambah-data">
          <form id="form-data" class="p-4 bg-light">
            <div class="row">
              <div class="col text-center mb-4">
                <h3>Tambah Data</h3>
              </div>
            </div>
            <div class="row justify-content-center">
              <div class="mb-3">
                <div id="name-group" class="from-group form-floating">
                  <input type="text" class="form-control" id="nama" name="nama" placeholder="Nama Lengkap" required>
                  <label for="nama-lengkap">Nama Lengkap</label>
                </div>
              </div>
              <div class="mb-3">
                <div id="nim-group" class="form-group form-floating">
                  <input type="text" class="form-control" id="nim" name="nim" placeholder="NPM" required>
                  <label for="NIM">NIM</label>
                </div>
              </div>
              <div class="mb-3">
                <div id="jkelemin-group" class="form-group">
                  <select name="jKelamin" class="form-select form-control-lg" id="jKelamin" required>
                    <option selected>--- Pilih Jenis Kelamin ---</option>
                    <option value="Laki-laki">Laki-laki</option>
                    <option value="perempuan">Perempuan</option>
                  </select>
                </div>
              </div>
              <div class="mb-3">
                <input type="button" value="Simpan" onclick="simpanData();" class="btn btn-success"/>
                <input type="reset" value="Reset" onclick="" class="btn btn-danger"/>
              </div>
            </div>
          </form>
        </div>
      </div>
      <!-- end form tambah data -->

      <!-- form edit data -->
      <div class="row justify-content-center">
        <div id="edit-data" style="display: none;">
          <form id="eform-data" class="p-4 bg-light">
            <div class="row">
              <div class="col text-center mb-4">
                <h3>Edit Data</h3>
              </div>
            </div>
            <div class="row justify-content-center">

              <div class="mb-3 d-none">
                <div id="name-group" class="from-group form-floating">
                  <input type="text" class="form-control" id="eid_data" name="eid_data" placeholder="Nama Lengkap">
                  <label for="nama-lengkap">Id data</label>
                </div>
              </div>

              <div class="mb-3">
                <div id="name-group" class="from-group form-floating">
                  <input type="text" class="form-control" id="enama" name="nama" placeholder="Nama Lengkap" required>
                  <label for="nama-lengkap">Nama Lengkap</label>
                </div>
              </div>
              <div class="mb-3">
                <div id="nim-group" class="form-group form-floating">
                  <input type="text" class="form-control" id="enim" name="nim" placeholder="NIM" required>
                  <label for="NIM">NIM</label>
                </div>
              </div>
              <div class="mb-3">
                <div id="jkelemin-group" class="form-group">
                  <select name="jKelamin" class="form-select form-control-lg" id="ejKelamin" required>
                    <option selected>--- Pilih Jenis Kelamin ---</option>
                    <option value="Laki-laki">Laki-laki</option>
                    <option value="perempuan">Perempuan</option>
                  </select>
                </div>
              </div>
              <div class="mb-3">
                <input type="button" value="Simpan" onclick="simpanEditData();" class="btn btn-success"/>
                <input type="reset" value="Reset" onclick="" class="btn btn-danger"/>
                <input type="button" value="Cancel" onclick="gantiMenu('list-data');" class="btn btn-warning"/>
              </div>
            </div>
          </form>
        </div>
      </div>
      <!-- akhir edit data -->
    </div>

    <!-- js bootsrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    <!-- my js -->
    <script src="assets/index.js"></script>

  </body>
</html>

Selanjutnya teman-teman dapat membuat folder baru di dalam forder CRUD APP dengan nama assets untuk menyimpan file asset-assetnya nanti.

Di dalam file assets ,teman-teman buat lagi file dengan nama index.js ,ini juga terserah teman-teman jika ingin mengubah nama filenya, yang penting adalah extension filenya itu .js , di dalam file index.js masukkkan script berikut :

function muatDaftarData(){
	if(localStorage.daftar_data && localStorage.id_data) {
		daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
		var data_app = " ";

		if (daftar_data.length > 0) {
			data_app = '<table class="table table-bordered text-center" >';
			data_app += '<thead>'+
							'<th>No.</th>'+
							'<th>Nama</th>'+
							'<th>NIM</th>'+
							'<th>Jenis Kelamin</th>'+
							'<th colspan="3">aksi</th>'+
						'</thead><tbody>';
			for(let i = 0; i < daftar_data.length; i++){
				j = i + 1;

				data_app += '<tr>';
				data_app += '<td>'+ j +'</td>'+
							'<td>'+ daftar_data[i].nama + '</td>'+
							'<td>'+ daftar_data[i].nim + '</td>'+
							'<td>'+ daftar_data[i].jkelamin + '</td>'+
							'<td><a href="javascript:void(0)" onclick="hapusData(\''+daftar_data[i].id_data+'\')"><i class="bi bi-trash-fill text-danger p-3"></i></a></td>'+
                            '<td><a href="javascript:void(0)" onclick="editData(\''+daftar_data[i].id_data+'\')"><i class="bi bi-pencil-fill text-success p-3"></i></a></td>';
                data_app += '</tr>';
			}
			data_app += '</tbody></table>';
		}else {
			data_app = "Tidak ada data...";
		}

		$('#list-data').html(data_app);
        $('#list-data').hide();
        $('#list-data').fadeIn(100);
	}
}

function editData(id){
		
  	if (localStorage.daftar_data && localStorage.id_data){
        daftar_data = JSON.parse(localStorage.getItem('daftar_data'));			
		idx_data = 0;
        for (i in daftar_data){
            if (daftar_data[i].id_data == id){
				$("#eid_data").val(daftar_data[i].id_data);
				$("#enama").val(daftar_data[i].nama);
				$("#enim").val(daftar_data[i].nim);
                $("#ejKelamin").val(daftar_data[i].jkelamin);
				daftar_data.splice(idx_data, 1);
            }
            idx_data ++;
        }
		gantiMenu('edit-data');
		
    }
	
}


function simpanData(){
    nama = $('#nama').val();
    nim = $('#nim').val();
    jkelamin = $('#jKelamin').val();
    
    if (localStorage.daftar_data && localStorage.id_data){
        daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
        id_data = parseInt(localStorage.getItem('id_data'));
    }
    else {
        daftar_data = [];
        id_data = 0;
    }

    id_data ++;
    daftar_data.push({'id_data':id_data, 'nama':nama, 'nim':nim, 'jkelamin': jkelamin});
    localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
    localStorage.setItem('id_data', id_data);
    document.getElementById('form-data').reset();
    gantiMenu('list-data');
    
    return false;
}

function simpanEditData(){
    id_data = $('#eid_data').val();
    nama = $('#enama').val();
    nim = $('#enim').val();
    jkelamin = $('#ejKelamin').val();
    
    daftar_data.push({'id_data':id_data, 'nama':nama, 'nim':nim, 'jkelamin': jkelamin});
    localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
    document.getElementById('eform-data').reset();
    gantiMenu('list-data');
    
    return false;
}

function hapusData(id){
    if (localStorage.daftar_data && localStorage.id_data){
        daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
        
        idx_data = 0;
        for (i in daftar_data){
            if (daftar_data[i].id_data == id){
                daftar_data.splice(idx_data, 1);
            }
            idx_data ++;
        }
       
        localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
        muatDaftarData();
    }
}

function gantiMenu(menu){
    if (menu == "list-data"){
        muatDaftarData();
        $('#tambah-data').fadeIn();
        $('#list-data').fadeIn();
		$('#edit-data').hide();
    }else if (menu == "tambah-data"){
        $('#tambah-data').fadeIn();
        $('#list-data').hide();
		$('#edit-data').hide();
    }else if (menu == "edit-data"){
        $('#edit-data').fadeIn();
        $('#tambah-data').hide();
        $('#list-data').hide();
    }
}


Dan yang terakhir teman-teman juga harus menambahkan  jQuery di dalam folder assets , jquery sendiri adalah fremework yang mempermudah dalam penggunaan javascript, jadi silahkan donwnload jquerynya di sini 


Mungkin cuma itu teman-teman sedikit tutorial dari saya lebih kurannya mohon di maafkan

Terima kasih.

Komentar

Posting Komentar