• Contact Us
Tuesday, December 20, 2022
-18 °c
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Plugin Install : Cart Icon need WooCommerce plugin to be installed.
Teman Ngoding
No Result
View All Result

WEB CRUD LocalStorage Menggunakan JavaScript

admin by admin
September 22, 2022
in Javascript, Tutorial
0 0
0
Home Tutorial Javascript

This post is also available in: English

Hallo apa kabar teman semuanya, kali ini kita akan membahas kembali JavaScript. Tapi kita akan langsung praktikan membuat CRUD dengan penyimpanan Web Storage yaaitu LocalStorage.

LocalStorage merupakan media penyimpanan tanpa ada batasan waktu. Penyimpanan tidak hilang ketika browser di tutup. Data akan hilang jika kamu menghapusnya.

Untuk menggunakan localStorage kamu harus menggunakan namanya “localStorage”. Kemudian ketika kamu menyimpannya kamu harus menggunakan setItem(). SetTime() memiliki dua parameter yaitu key dan value yang kamu simpan di localStorage. Dan untuk menghapusnya kamu harus memasukan kode removeItem() yang hanya menerima satu item key

Daftar isi yang akan kita bahas:

  1. Buat File Projek
  2. Buat Kode HTML
  3. Buat Kode CSS
  4. Buat Kode JavaScript

Kamu dapat mempelajari tutorial yang lainnya di sini:

Perbedaan BOM Dan DOM Pada JavaScript

JavaScript Dasar Part 6 : If Else JavaScript

JavaScript Dasar Part 5 : Operator JavaScript

Buat File Projek

Buatlah tiga file projek seperti di bawah ini:

File index.html

Berfungsi untuk membuat form input dan output dari hasil proses kode program.

File style.css

Berfungsi untuk mempercantik halaman form yang kamu buat.

File main.js

Berfungsi untuk membuat kode javascript untuk memperoses semua kode yang kita inginkan.

Buat Kode HTML

Sekarang kita buat kode htmlnya untuk membuat form dan outputnya. Buatlah kode seperti di bawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    />
  </head>
  <body>
    <div class="container mt-4">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="alert alert-primary text-center">
                    Bookshelf Apps
                </h1>
            </div>
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <form id="form">
                            <input type="hidden" name="id" id="inputBookId">
                            <label for="inputBookTitle">Title</label>
                            <input type="text" placeholder="Title" class="form-control" id="inputBookTitle" required>
                            <br>
                            <label for="inputBookAuthor">Author</label>
                            <input type="text" placeholder="Author" class="form-control" id="inputBookAuthor" required>
                            <br>
                            <label for="inputBookYear">Year</label>
                            <input type="number" placeholder="Tahun" class="form-control" id="inputBookYear" required>
                            <br>
                            <label for="inputBookIsComplete">Finished reading</label>
                            <input id="inputBookIsComplete" type="checkbox">
                            <br>
                            <br>
                            <button class="btn btn-sm btn-primary" type="button" onclick="save()">Save</button>
                            <button class="btn btn-sm btn-primary" type="button" onclick="clearData()">Reset</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body">
                      <h2>Unread</h2>
                        <div class="table-responsive">
                            <table id="datatable" class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Title</th>
                                        <th>Author</th>
                                        <th>Year</th>
                                        <th>Read</th>       
                                        <th>Edit</th>
                                        <th>Hapus</th>
                                    </tr>
                                </thead>
                                <tbody id="table">
        
                                </tbody>
                            </table>
                        </div><hr>
                        <h2>Read</h2>
                        <div class="table-responsive">
                          <table id="datatable" class="table table-striped">
                              <thead>
                                  <tr>
                                      <th>No</th>
                                      <th>Title</th>
                                      <th>Author</th>
                                      <th>Tahun</th>
                                      <th>Unread</th>
                                      <th>Edit</th>
                                      <th>Hapus</th>
                                  </tr>
                              </thead>
                              <tbody id="table2">
      
                              </tbody>
                          </table>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
    <script src="main.js"></script>
    <script>
        allData()
    </script>
    <script>
        function clearData(){
            document.getElementById('form').reset()
            document.getElementById('id').value = ""
        }
    </script>
  </body>
</html>

Buat kode css

Untuk mempercantik halaman buat sedikit kode css pada file style.css. Kodenya seperti di bawah ini:

.imgLogo{
    height: 50px;
    width: 120px;
}
a:hover{
   text-decoration: none;
    color: navy;
    font-weight: bold;
}
#slide-out li a:hover{
    color: navy;
    font-weight: bold;
}
.divCenter{
    margin: auto;
    width: 50%;
}
.modal-body .form-horizontal{
    width: 100%;
}

Maka kita akan mendapatkan hasilnya seperti di bawah ini:

Buat kode javascript

Selanjutnya kita buat kode javascript, kode ini merupakan fungsi utama yang akan kita buat. ada beberapa fungsi yang akan kita buat, di anatranya:

  1. function save(){} => berfungsi untuk menyimpan dan rubah data
  2. function allData(){} => berfungsi untuk menampilkan data
  3. function removedata(){} => berfungsi untuk menghapus data
  4. function find(id) => berfungsi untuk mencari data yang akan kita rubah
  5. function read(){} => berfungsi untuk memindahkan data ke dalam storage yang berbeda

Kamu akan membuat dua storage dalam aplikasi ini. Mari kita bahas satu demi satu

Function save()

function save(){

    var read = document.getElementById('inputBookIsComplete');
    if(read.checked == true){
        bookList = JSON.parse(localStorage.getItem('listItem3')) ?? []

        var id
        bookList.length != 0 ? bookList.findLast((item) => id = item.id) : id = 0
    
        if(document.getElementById('inputBookId').value){

            bookList.forEach(value => {
                if(document.getElementById('inputBookId').value == value.id){
                    value.title         = document.getElementById('inputBookTitle').value, 
                    value.author        = document.getElementById('inputBookAuthor').value, 
                    value.year          = document.getElementById('inputBookYear').value, 
                    value.isComplete    = 1
                }
            });

            document.getElementById('id').value = ''

        }else{

            var item = {
                id          : id + 1, 
                title       : document.getElementById('inputBookTitle').value, 
                author      : document.getElementById('inputBookAuthor').value, 
                year        : document.getElementById('inputBookYear').value, 
                isComplete  : 1,
            }

            bookList.push(item)
        }

        localStorage.setItem('listItem3', JSON.stringify(bookList))
    }else{
    

        bookList2 = JSON.parse(localStorage.getItem('listItem4')) ?? []

        var id
        bookList2.length != 0 ? bookList.findLast((item) => id = item.id) : id = 0
        if(document.getElementById('inputBookId').value){

            bookList2.forEach(value => {
                if(document.getElementById('inputBookId').value == value.id){
                    value.title         = document.getElementById('inputBookTitle').value, 
                    value.author        = document.getElementById('inputBookAuthor').value, 
                    value.year          = document.getElementById('inputBookYear').value, 
                    value.isComplete    = 0
                }
            });

            document.getElementById('inputBookId').value = ''

        }else{

            var item = {
                id          : id + 1, 
                title       : document.getElementById('inputBookTitle').value, 
                author      : document.getElementById('inputBookAuthor').value, 
                year        : document.getElementById('inputBookYear').value, 
                isComplete  : 0,
            }

            bookList2.push(item)
        }

        localStorage.setItem('listItem4', JSON.stringify(bookList2))
    }

    allData()

    document.getElementById('form').reset()
}

function allData()

function allData(){
            
    table.innerHTML = ``
    bookList = JSON.parse(localStorage.getItem('listItem4')) ?? []

    bookList.forEach(function (value, i){
       
        var table = document.getElementById('table')
        // if(value.isComplete == 0){
        table.innerHTML += `
            <tr>
                <td>${i+1}</td>
                <td>${value.title}</td>
                <td>${value.author}</td>
                <td>${value.year}</td>
                <td><button class="btn btn-sm btn-warning" onclick="read(${value.id},'${value.title}','${value.author}',${value.year})">
                <i class="fa fa-check"></i>
                </button></td>
                <td>
                    <button class="btn btn-sm btn-success" onclick="find(${value.id})">
                        <i class="fa fa-edit"></i>
                    </button>
                </td>
                <td>
                    <button class="btn btn-sm btn-danger" onclick="removeData4(${value.id})">
                        <i class="fa fa-trash"></i>
                    </button>
                </td>
            </tr>`
        // }
    
    })

    table2.innerHTML = ``
    bookList2 = JSON.parse(localStorage.getItem('listItem3')) ?? []
    
    bookList2.forEach(function (value2, i){
       
        var table2 = document.getElementById('table2')
        // console.log(value2.isComplete);
        // if(value2.isComplete == 1){
        table2.innerHTML += `
            <tr>
                <td>${i+1}</td>
                <td>${value2.title}</td>
                <td>${value2.author}</td>
                <td>${value2.year}</td>
                <td><button class="btn btn-sm btn-warning" onclick="read2(${value2.id},'${value2.title}','${value2.author}',${value2.year})">
                <i class="fa fa-check"></i>
                </button></td>
                <td>
                    <button class="btn btn-sm btn-success" onclick="find(${value2.id})">
                        <i class="fa fa-edit"></i>
                    </button>
                </td>
                <td>
                    <button class="btn btn-sm btn-danger" onclick="removeData3(${value2.id})">
                        <i class="fa fa-trash"></i>
                    </button>
                </td>
            </tr>`
        // }
    
    })
    
}

function removeData()

function removeData3(id){
    
    bookList = JSON.parse(localStorage.getItem('listItem3')) ?? []

    bookList = bookList.filter(function(value){ 
        return value.id != id; 
    });
    // localStorage.clear();
    localStorage.setItem('listItem3', JSON.stringify(bookList))

    allData()
}

function removeData4(id){

    bookList = JSON.parse(localStorage.getItem('listItem4')) ?? []

    bookList = bookList.filter(function(value){ 
        return value.id != id; 
    });

    localStorage.setItem('listItem4', JSON.stringify(bookList))

    allData()
}

Function find()

function find(id){
    bookList = JSON.parse(localStorage.getItem('listItem4')) ?? []
    bookList.forEach(function (value){
        if(value.id == id){
            console.log(id);
            document.getElementById('inputBookId').value = id
            document.getElementById('inputBookTitle').value = value.title
            document.getElementById('inputBookAuthor').value = value.author 
            document.getElementById('inputBookYear').value = value.year
        }
    })
}

Function read()

function read(id1,title1,author1,year1){

    if(id1){
        var item = [{
            id          : id1, 
            title       : title1, 
            author      : author1, 
            year        : year1, 
            isComplete  : 1,
        }];   
        bookList = JSON.parse(localStorage.getItem('listItem3')) ?? []
        books = item.concat(bookList);
        var itemString = JSON.stringify(books);
        localStorage.setItem('listItem3', itemString);
    }
    
    bookList4 = JSON.parse(localStorage.getItem('listItem4')) ?? []
    bookList4 = bookList4.filter(function(value){ 
        return value.id != id1; 
    });

    localStorage.setItem('listItem4', JSON.stringify(bookList4))

    allData()
}

function read2(id1,title1,author1,year1){
    if(id1){
        var item = [{
            id          : id1, 
            title       : title1, 
            author      : author1, 
            year        : year1, 
            isComplete  : 1,
        }];   
        bookList = JSON.parse(localStorage.getItem('listItem4')) ?? []
        books = item.concat(bookList);
        var itemString = JSON.stringify(books);
        localStorage.setItem('listItem4', itemString);
    }
    
    bookList3 = JSON.parse(localStorage.getItem('listItem3')) ?? []
    bookList3 = bookList3.filter(function(value){ 
        return value.id != id1; 
    });

    localStorage.setItem('listItem3', JSON.stringify(bookList3))

    allData()
}

Setelah semua kode kita telah buat maka hasilnya akan seperti ini:

Demikian kita cara memanfaatkan web storage untuk kebutuhan aplikasi kamu. Semoga bermanfaat tutorial kali ini, semoga kode ini menjadi referensi untuk kamu semuanya.

Terimakasih.

ShareTweetShare
admin

admin

Next Post
Teorema Structured Control

Basic Programming - Structured Control Theorem

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Trending
  • Comments
  • Latest
Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

June 2, 2022
Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

June 8, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

May 30, 2022
REST API Login dan Register Node.js dengan JWT

REST API Login dan Register Node.js dengan JWT

July 28, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

5
Rekomendasi tempat belajar pemrograman

Rekomendasi tempat belajar pemrograman

3
Menghilangkan Public dan Index.php dari URL Codeigniter 4

Menghilangkan Public dan Index.php dari URL Codeigniter 4

2
Membuat Sitemap Otomatis Codeigniter 4

Membuat Sitemap Otomatis Codeigniter 4

1
Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022
WEB CRUD LocalStorage Menggunakan JavaScript

WEB CRUD LocalStorage Menggunakan JavaScript

September 22, 2022
DOM dan GOM Javascript

Perbedaan BOM Dan DOM Pada JavaScript

September 20, 2022
Teman Ngoding

Teman Ngoding tempat berbagi tutorial pemrograman
Read more

Categories

  • Berita
  • C++
  • Codeigniter
  • Events
  • Flutter
  • Golang
  • Java
  • Javascript
  • Laravel
  • MongoDB
  • News
  • Node JS
  • Pemrograman
  • PHP
  • Problem Solution
  • React JS
  • SQL
  • Tutorial
  • TypeScript
  • TypeScript
  • Video Codeigniter
  • Video Git
  • Video Laravel
  • Video Tutorial

Tags

ajax belajar golang belajar reactjs blog browser seluler Cara mendapatkan Uang dari Blog codeigniter codeigniter 3 codeigniter 4 codeigniter4 embed html Error Handling flutter flutter vs react native golang golang dasar html infinite scroll javascript javascript tutorial laravel laravel 8 laravel9 laravel 9 load more ajax Menggunakan Multiple select2 dan menyimpan dengan format json mongodb nodejs pdf pemrograman ajax pemrograman golang pemrograman php reactjs reactjs tutorial reactjs vs react native rest api rest api codeigniter 4 tutorial codeigniter 4 tutorial golang tutorial javascript tutorial laravel tutorial laravel 8 tutorial nodejs tutorial reactjs uang dari blog

Recent News

Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022

© 2022 Teman Ngoding.

No Result
View All Result
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English

© 2022 Teman Ngoding.

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • English
  • Indonesia