• Contact Us
Kamis, Mei 25, 2023
-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

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

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

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Juni 2, 2022
REST API Login dan Register Node.js dengan JWT

REST API Login dan Register Node.js dengan JWT

Juli 28, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

Mei 30, 2022
Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Juni 8, 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
Migration Laravel

Migration Laravel

1
HTML Fundamentals – HTML Basic

HTML Fundamentals – HTML Basic

Mei 19, 2023
Pekerjaan Apa yang Akan Diganti oleh AI?

Pekerjaan Apa yang Akan Diganti oleh AI?

Mei 11, 2023
Programmer Atau Hacker?

Programmer Atau Hacker?

April 6, 2023
PENGENALAN BACKEND DEVELOPER

Pemrograman Backend Developer

April 5, 2023
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 html basic html dasar infinite scroll javascript javascript tutorial laravel laravel 8 laravel 9 laravel9 load more ajax 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

Recent News

HTML Fundamentals – HTML Basic

HTML Fundamentals – HTML Basic

Mei 19, 2023
Pekerjaan Apa yang Akan Diganti oleh AI?

Pekerjaan Apa yang Akan Diganti oleh AI?

Mei 11, 2023

© 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