Javascript

mrfdn.com - Jika kita punya file javascript yang berjalan normal tanpa menggunakan framework seperti Svelte, yang ingin dijalankan pada projekan Astro, secara normal untuk bisa menjalankannya kita akan menemui error: document is not defined Browser APIs are not available on the server. If the code is in a framework component, try to access these objects after rendering using lifecycle methods or use a client:only directive to make the component exclusively run on the client. See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information. Jadi untuk menjalankan script tersebut kita harus menempatkannya di dalam fungsi onMount() yang sudah ada sebagai bawaan Svelte. ...

mrfdn.com - Pada artikel ini saya mencoba untuk membuat form sederhana. Fungsi form ini adalah mengirim data dari aplikasi web ke Google Sheet tapi kali ini menggunakan Svelte JS. Jadi langsung saja, pertama buat sebuah file komponen Svelte. Kemudian paste kode ini pada bagian <script> //export let data; const scriptURL = "https://script.google.com/macros/s/AKfycbyguZjskDwvOMge67lJXgNfFkWX9xt7orf5Hx3UyFjE3OMELyitQ3wh6jM5Vl_casdf/exec"; let form; let hadir; let hadirberapa; let btnKirim; let btnLoading; function jumlahorang() { hadirberapa.style.display = hadir.checked ? "block" : "none"; }; function konfirmasihadir() { form.addEventListener("submit", async (e) => { e.preventDefault(); btnLoading.classList.toggle("hidden"); btnKirim.classList.toggle("hidden"); const formData = new FormData(form); const response = await fetch(scriptURL, { method: "POST", body: formData, }); if (response.ok) { btnLoading.classList.toggle("hidden"); btnKirim.classList.toggle("hidden"); form.reset(); console.log("Success!"); } else { console.error("Error!"); } }); }; </script> Kemudian pada bagian bawah, buat form yang diinginkan. ...

mrfdn.com - Saat ini saya belajar rebuild website undangan online menggunakan Svelte. Web undangan online yang sedang aktif dibuild menggunakan Astro. Menggunakan astro untuk build website sungguh sangat memudahkan. Selama rebuild website saya mengalami beberapa tantangan, seperti bagaimana cara menampilkan props di Svelte sehingga data bisa diakses pada halaman manapun. Setelah itu tantangan baru sebagai developer pemula adalah bagaimana cara menampilkan nama tamu yang telah ditulis pada url ke halaman web. ...

mrfdn.com - Mungkin anda pernah terpikir untuk membuat responsif navbar yang bisa sembunyi saat scroll ke bawah lalu saat scroll layar ke atas navbar tersebut bisa munucl tanpa scroll full ke atas layar. Ini bisa dipecahkan dengan menjalankan beberapa baris javascript DOM. Misalnya navbar saya tempatkan di dalam sebuah header seperti ini. <header> <nav class="container"> <a href="{{ .Site.BaseURL }}" title="{{ .Site.Title }}"> <img src="{{ .Site.Params.logo | absURL }}" class="logo" alt="{{ .Site.Title }}" width="60" height="60" /> <span class="hidden"> {{ .Site.Title }}<span> </a> <ul> {{ with .Site.Menus.main }} {{ range .}} <li> <a href="{{ .URL | absURL }}">{{ .Name }}</a> </li> {{ end }} {{ end }} <li> <!-- search --> <a href="/search" aria-label="search button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" /> </svg> </a> </li> </ul> </nav> </header> Lalu set css untuk header menjadi fixed. ...

mrfdn.com - Pada tutorial sebelumnya sudah dijelaskan tentang cara menampilkan data dari Google Sheet ke file HTML di Localhost. Kali ini saya ingin share bagaimna cara mengirim data dari localhost ke Google Sheet menggunakan form HTML sederhana. Script HTML untuk submit ke satu sheet Google Sheet Pertama, buat file form html nya, kira-kira seperti ini. <h1 id="pesan"></h1> <form id="submitform"> <input type="text" name="nomor" id="nomor" placeholder="nomor" /><br /><br /> <input type="text" name="nama" id="nama" placeholder="nama" /><br /><br /> <input type="text" name="alamat" id="alamat" placeholder="alamat" /><br /><br /> <input type="submit" id="sub" value="kirim" /> </form> <script is:inline> // submit let form = document.getElementById("submitform"); form.addEventListener("submit", (e) => { e.preventDefault(); document.querySelector("#sub").value = "Sedang mengirim.."; let user = new FormData(form); fetch( "GANTI-URL-EXEC-GOOGLE-APPSCRIPT-DISINI", { method: "POST", body: user, } ) .then((res) => res.text()) .then((user) => { document.querySelector("#pesan").innerHTML = user; document.querySelector("#sub").value = "Submit"; document.getElementById("submitform").reset(); }); }); </script> Pada script ini kita akan menggunakan metode POST untuk mengirim data ke Google Sheet melalui API yang sudah didapatkan. ...

mrfdn.com - Kali ini saya ingin membagikan tutorial tentang cara menampilkan data table dari Google Sheet ke HTML di Localhost. Di sini saya menggunakan GridJS untuk menampilkan data tersebut ke dalam tabel. Kenapa Gridjs? Karena fitur yang saya inginkan ada di sini, seperti: Pencarian Pagination Sort Fetch API dan lain-lain. Pertama, buatlah sebuah table sederhana di Google Sheet. misalnya seperti ini : Kemudian untuk membuatnya bisa diakses, tekan Share pada pojok kanan atas, lalu set menjadi Anyone. ...

mrfdn.com - Beberapa hari terakhir, saya memiliki pertanyaan dalam benak tentang bagaimana cara si pembuat undangan online menampilkan nama tamu undangannya saat url dibuka. Pagi ini setelah melaksanakan shalat subuh saya berhasil membuat script sederhana untuk memecahkan masalah ini. Alhamdulillah. Setelah saya ulik ternyata itu bisa dilakukan melalui javascript. Misalnya url undangan online seperti ini : undangan.ku/rafi-zora/?namatamu Saya ingin menampilkan nama tamu yang tertera setelah tanda tanya. Arti tanda tanya itu sendiri adalah location search query pada URL yang dikenali oleh web secara standar. ...