Cara menggunakan table onload javascript

Question

Halo suhu suhu semua, saya ingin bertanya. Jadi saya hendak membuat aplikasi untuk monitoring pekerjaan, lalu untuk input nya saya menggunakan checkbox. Nah untuk validasi, saya menggunakan nilai inputan dari ckb1 sebagai require agar ckb2 juga dapat dimasukkan kedalam database. Sedangkan ckb1 nilai valuenya tidak dimasukkan ke database. Berikut code untuk bagian controllernya

get();


        return view('dashboard', ['task' => $task]);
    }
    protected function validator($data)
    {
        return Validator::make($data, [
            'ckb1' => 'required', 'integer', 'max:30',
            'ckb2' => 'required', 'integer', 'max:30',
        ]);
    }

    public function store(Request $request)
    {
        $ckb1 = $request->ckb1;
        $ckb2 = $request->ckb2;
        $validator = Validator::make($request->all(), [
            'ckb1' => 'required', 'integer', 'max:30',
        ]);

        if ($validator->fails()) {
            return redirect('/dashboard')->with([
                'warning' => 'Task sebelumnya harus di isi'
            ]);
        }

        $ckb1 = DB::table('tasks')->get();
        if ($ckb1) {
            $ckb1 = Task::create([
                'ckb1' => $request->ckb1
            ]);
        }
        $ckb2 = DB::table('tasks')->where('ckb1', $ckb1->ckb1)->latest()->first();
        if ($ckb2) {
            $ckb2 = DB::table('tasks')->where('ckb1', $request->ckb1)->update([
                'ckb2' => $request->ckb2
            ]);
            if ($ckb2) {
                return redirect('/dashboard')->with([
                    'success' => 'Berhasil dimasukkan'
                ]);
            }
        } else {
            return redirect('/dashboard')->with([
                'warning' => 'Harap Tunggu Task Sebelumnya'
            ]);
        }
    }
}

kemudian, saya hendak melakukan disable ketika ckb1 sudah melakukan checked. Akan tetapi, ketika page di refresh maka ckb1 tersebut ter reset atau dapat di input ulang. Berikut code untuk blade dan javascript nya

    
        
            {{ __('Dashboard') }}
        
        @if ($message = Session::get('warning'))
        
            ×
            {{ $message }}
        
 Table of Contents Show
 
            {{ __('Dashboard') }}
        
SMA Negeri 1 Salatiga
Cara Menggunakan Ajax di Javascript
Mengirim Data ke Server dengan AJAX
AJAX Menggunakan JQuery
AJAX Menggunakan Fetch API
Ajax Menggunakan Axios
Apa itu onload Javascript?
Apa yang dimaksud dengan Event pada javascript?
 
        @endif
        @if ($message = Session::get('success'))
        
            ×
            {{ $message }}
        
        @endif
    

    SMA Negeri 1 Salatiga

    
        
            Marcomn
            Data Agent
            Data Entry
        

        
            
                
                    @csrf

                    
                    
                        Menunggu Data
                    
            
            
                
                
                    Input Data
                
            
            
                
                    Open PO

saya akali dengan menggunakan function onload. Akan tetapi, ketika web di refresh maka hasilnya tetap ter reset, atau ckb 1 dapat diinput ulang, tidak ke disable. Kira kira bagaimana caranya untuk memasukkan fungsi onclick dan onload secara bersamaan ? terimakasih suhu suhu semua

Kita bisa bisa melihat proses AJAX melalui inspect elemen di web browser, lalu buka tab Network dan aktifkan filter XHR (XML HTTP Request).

Oh iya, meskipun di AJAX ada kata “XML”… Bukan berarti hanya mendukung format XML saja.

AJAX juga mendukung format JSON, Plain Text, dan HTML.

Cara Menggunakan Ajax di Javascript

Langkah-langkah menggunakan AJAX seperti ini:

Membuat Objek Ajax
```
var xhr = new XMLHttpRequest();
```

Menentukan Fungsi Handler untuk Event

xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };

Menentukan Method dan URL
```
xhr.open("GET", url, true);
```
Mengirim Request
```
xhr.send();
```

Oke…

Mari kita coba.

Buatlah file HTML dengan isi sebagai berikut:

                               }   

an><!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"> <title>Belajar Dasar Ajax</title> </head> <body> <h1>Tutorial Ajax</h1> <div id="hasil"></div> <button onclick="loadContent()">Load Content</button> <script> function loadContent(){ var xhr = new XMLHttpRequest(); var url = "https://api.github.com/users/petanikode"; xhr.onreadystatechange = function(){ if(this.readyState == 4 && this.status == 200){ document.getElementById("hasil").innerHTML = this.responseText; } }; xhr.open("GET", url, true); xhr.send(); </script> </body> </html>

Hasilnya:

Pada contoh di atas, kita mengambil data dari server Github dengan methode GET. Lalu hasilnya langsung dimasukan ke dalam elemn

xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };

9.

Event yang kita gunakan adalah

xhr.open("GET", url, true);

0, pada event ini kita bisa mengecek state dan status AJAX.

if(this.readyState == 4 && this.status == 200){
    //...
}

Kode state

xhr.open("GET", url, true);

1 artinya done dan status

xhr.open("GET", url, true);

2 artinya sukses. Berikut ini daftar kode state AJAX.

KodeStateKeterangan0UNSENTObjek AAJAX sudah dibuat tapi belum memanggil method

xhr.open("GET", url, true);

3.1OPENEDMethod

xhr.open("GET", url, true);

3 sudah dipanggil.2HEADERS_RECEIVEDMethod

xhr.open("GET", url, true);

5 sudah dipanggil, dan di sini sudah tersedia header status.3LOADINGDownloading; sedang mendownload data.4DONEOperasi AJAX selesai.

Sementara untuk status header

xhr.open("GET", url, true);

2 adalah status HTTP Request. Biasanya kode di atas

xhr.open("GET", url, true);

2 artinya baik dan di bawah

xhr.open("GET", url, true);

2 artinya buruk.

Lalu coba perhatikan kode ini:

xhr.open("GET", url, true);

Terdapat tiga parameter yang kita berikan kepada method

xhr.open("GET", url, true);

3:

```
xhr.send();
```
0 adalah metode request yang akan digunakan;
```
xhr.send();
```
1 adalah alamat URL tujuan;
```
xhr.send();
```
2 adalah untuk mengeksekusi AJAX secara asynchronous.

Mari kita lanjutkan dengan contoh yang lainnya. Silahkan ubah isi file HTML yang tadi menjadi seperti 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">
    <title>Belajar Dasar Ajax</title>
</head>

<body>
    <h1>Tutorial Ajax <button id="btn-clear" onclick="clearResult()">Clear</button></h1>
    <div id="hasil"></div>
    <button id="button" onclick="loadContent()">Load Content</button>

    <script>
        function loadContent() {
            var xhr = new XMLHttpRequest();
            var url = "https://api.github.com/users/petanikode";

            xhr.onloadstart = function () {
                document.getElementById("button").innerHTML = "Loading...";
            }

            xhr.onerror = function () {
                alert("Gagal mengambil data");
            };

            xhr.onloadend = function () {
                if (this.responseText !== "") {
                    var data = JSON.parse(this.responseText);
                    var img = document.createElement("img");
                    img.src = data.avatar_url;
                    var name = document.createElement("h3");
                    name.innerHTML = data.name;

                    document.getElementById("hasil").append(img, name);
                    document.getElementById("button").innerHTML = "Done";

                    setTimeout(function () {
                        document.getElementById("button").innerHTML = "Load Lagi";
                    }, 3000);
                }
            };

            xhr.open("GET", url, true);
            xhr.send();
        }

        function clearResult() {
            document.getElementById("hasil").innerHTML = "";
        }
    </script>
</body>
</html>

Hasilnya:

Mengirim Data ke Server dengan AJAX

<!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">
    <title>Belajar Dasar Ajax</title>
</head>

<body>
    <h1>Kirim Data dengan Ajax</h1>
    <form method="POST" onsubmit="return sendData()">
        <p>
            <label>Title</label>
            <input type="text" id="title" placeholder="judul artikel">
        </p>
        <p>
            <label>Isi Artikel</label><br>
            <textarea id="body" placeholder="isi artikel..." cols="50" rows="10"></textarea>
        </p>
        <input type="submit" value="Kirim" />
    </form>

    <script>
        function sendData() {
            var xhr = new XMLHttpRequest();
            var url = "https://jsonplaceholder.typicode.com/posts";

            var data = JSON.stringify({
                title: document.getElementById("title").value,
                body: document.getElementById("body").value,
                userId: 1
            });

            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.onload = function () {               
                console.log (this.responseText);
            };

            xhr.send(data);
            return false;
        }
    </script>
</body>
</html>

Hasilnya:

Pengiriman data tersebut hanya untuk simulasi. Data tidak benar-benar akan terkirim ke server https://jsonplaceholder.typicode.com/posts.

AJAX Menggunakan JQuery

JQuery adalah library Javascript yang menyederhanakan fungsi-fungsi Javascript. Pada JQuery, AJAX dapat dibuat seperti ini:

// load data ke elemen tertentu via AJAX
$(selector).load(URL,data,callback);

// ambil data dari server
$.get(URL,callback);

// kirim data dari Server
$.post(URL,data,callback);

Mari kita coba…

Buatlah file baru bernama

xhr.send();

3 lalu isi dengan kode berikut:

xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };

0

Hasilnya:

Dengan fungsi

xhr.send();

4, kita bisa mengambil data dengan AJAX dan langsung menampilkannya pada elemen yang dipilih.

Fungsi JQuery

xhr.send();

5 cocoknya untuk mengambil bagian dari HTML untuk ditampilkan.

Contoh lainnya menggunakan metode GET:

xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };

1

Hasilnya:

Nah untuk mengirim data dengan AJAX di JQuery, caranya hampir sama seperti mengambil data dengan

xhr.send();

6.

xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };

2

AJAX Menggunakan Fetch API

Fetch artinya mengambil. Metode fetch bisa jadi alternatif untuk AJAX.

Methode ini mulai hadir pada Javascript versi ES6.

Perbedaanya dengan

xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };

8 dan JQuery adalah:

Fetch akan mengembalikan sebuah promise;
Secara bawaan (default), fetch tidak akan mengirim atau menerima cookie dari server.
Fetch dapat digunakan di web browser dan juga Nodejs dengan modul
```
xhr.send();
```
8.

Berikut ini sintak dasar penggunaan Fetch.

xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };

3

Dan untuk pengiriman data dengan metode POST, bentuknya seperti ini:

xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };

4

Mari kita coba…

Berikut ini contoh pengambilan data menggunakan fetch:

xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };

5

Hasilnya:

Ajax Menggunakan Axios

Axios hampir sama seperti fetch. Bedanya Axios adalah sebuah library sedangkan fetch adalah API yang tersedia di web browser.

Apa itu onload Javascript?

Even onload adalah fungsi dimana ketika halaman pada browser kita refresh akan menampilkan sesuatu. Event onload akan dieksekusi jika suatu objek telah diload, pada contoh berikut kita menaruh event onload di tag, artinya jika halaman web sudah diload semua, maka dieksekusi kode javascript.

Apa yang dimaksud dengan Event pada javascript?

Pada Javascript: Event adalah kejadian yang terjadi di halaman web. Kejadian yang dimaksud di sini seperti aktivitas yang dikerjakan pada halaman web.

kode javascript