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
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 JavascriptLangkah-langkah menggunakan AJAX seperti ini:
Oke… Mari kita coba. Buatlah file HTML dengan isi sebagai berikut:
Hasilnya: Pada contoh di atas, kita mengambil data dari server Github dengan methode GET. Lalu hasilnya langsung dimasukan ke dalam elemn 9.Event yang kita gunakan adalah 0, pada event ini kita bisa mengecek state dan status AJAX.
Kode state 1 artinya done dan status 2 artinya sukses. Berikut ini daftar kode state AJAX.KodeStateKeterangan0UNSENTObjek AAJAX sudah dibuat tapi belum memanggil method 3.1OPENEDMethod 3 sudah dipanggil.2HEADERS_RECEIVEDMethod 5 sudah dipanggil, dan di sini sudah tersedia header status.3LOADINGDownloading; sedang mendownload data.4DONEOperasi AJAX selesai.Sementara untuk status header 2 adalah status HTTP Request. Biasanya kode di atas 2 artinya baik dan di bawah 2 artinya buruk.Lalu coba perhatikan kode ini:
Terdapat tiga parameter yang kita berikan kepada method 3:
Mari kita lanjutkan dengan contoh yang lainnya. Silahkan ubah isi file HTML yang tadi menjadi seperti ini:
Hasilnya: Mengirim Data ke Server dengan AJAX
Hasilnya: Pengiriman data tersebut hanya untuk simulasi. Data tidak benar-benar akan terkirim ke server https://jsonplaceholder.typicode.com/posts. AJAX Menggunakan JQueryJQuery adalah library Javascript yang menyederhanakan fungsi-fungsi Javascript. Pada JQuery, AJAX dapat dibuat seperti ini:
Mari kita coba… Buatlah file baru bernama 3 lalu isi dengan kode berikut: 0Hasilnya: Dengan fungsi 4, kita bisa mengambil data dengan AJAX dan langsung menampilkannya pada elemen yang dipilih.Fungsi JQuery 5 cocoknya untuk mengambil bagian dari HTML untuk ditampilkan.Contoh lainnya menggunakan metode GET: 1Hasilnya: Nah untuk mengirim data dengan AJAX di JQuery, caranya hampir sama seperti mengambil data dengan 6. 2AJAX Menggunakan Fetch APIFetch artinya mengambil. Metode fetch bisa jadi alternatif untuk AJAX. Methode ini mulai hadir pada Javascript versi ES6. Perbedaanya dengan 8 dan JQuery adalah:
Berikut ini sintak dasar penggunaan Fetch. 3Dan untuk pengiriman data dengan metode POST, bentuknya seperti ini: 4Mari kita coba… Berikut ini contoh pengambilan data menggunakan fetch: 5Hasilnya: Ajax Menggunakan AxiosAxios 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.
|