crud javascript tanpa database

Membuat aplikasi crud (creed,read,update,delete) sederehana menggunakan javascript tanpa database sedikit tentang JavaScript disingkat (JS) adalah bahasa pemrograman tingkat tinggi dan dinamis JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Google Chrome, Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. JavaScript merupakan salah satu teknologi inti World Wide Web selain HTML dan CSS. JavaScript membantu membuat halaman web interaktif dan merupakan bagian aplikasi web yang esensial (wikipedia).

buat html dengan nama belajar.html menggunakan text editor

belajar.html

  
 <!DOCTYPE html>
<title>belajar javascript</title>

<body >

 <fieldset>
  <legend>Input Form</legend>
  <input id="input" type="text" name="nama" placeholder="input nama " />
  <input type="button" onclick="addBio()" value="Tambah" />
</fieldset>

<div>
  <ul id="list-bio">
  </ul>
</div>
</body>

 <script type="text/javascript" charset="utf-8" src="belajar.js">

</script>
</html>

buat file js dengan nama belajar.js

belajar.js

  
var dataBio = [];
function showbio(){

    var listBio = document.getElementById("list-bio");
    //clear list Bio
    listBio.innerHTML = "";
    
for(let i=0; i < dataBio.length; i++){
    
    var btnEdit = "<a href='#' onclick='editNama("+i+")'>Edit</a>";
    var btnHapus = "<a href='#' onclick='deleteNama("+i+")'>Hapus</a>";
    listBio.innerHTML +="<li>"+dataBio[i]+"["+btnEdit+" | "+ btnHapus+"]</li>";

    };
}

function addBio(){

    var input = document.querySelector("input[name=nama]");
    dataBio.push(input.value);
    
    showbio();
    document.getElementById("input").value="";

}

function editNama(id){
    var newBio = prompt("Nama Baru", dataBio[id]);
    dataBio[id]= newBio;
   
    showbio();
}


function deleteNama(id){
    dataBio.pop(id,1);
    showbio();
}

showbio();

Hasilnya :

crud javascript tanpa database

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel