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 - File ENV biasa digunakan untuk mendefinisikan apa saja yang akan dipanggil pada projekan kita. Dengan membuat file env, projekan akan jauh lebih secure, clean dan lebih mudah untuk dimaintain. Di sini saya ingin set file ENV pada projekan SvelteKit yang sudah dibuat kemarin yaitu tentang menampilkan data dari database dengan menyembunyikan path database. Langsung saja, caranya seperti ini: Pada root folder projekan sveltekit, buatlah sebuah file bernama .env, pakai titik di depannya sehingga akan menjadi hidden file nanti. Kemudian isi file tersebut dengan lokasi file database.db: DB_PATH=./src/database/mydatabase.db Kemudian edit file +server.js sehingga menjadi seperti ini: import { DB_PATH } from '$env/static/private'; import { error, json } from '@sveltejs/kit'; import Database from "better-sqlite3"; let db = new Database(DB_PATH, { verbose: console.log }); export function GET() { const items = db.prepare("select * from mytable"); return json(items.all()); } Selesai. ...

mrfdn.com - Sveltekit lagi-lagi menjadi pilihan saya untuk belajar javascript. Kali ini saya ingin belajar menampilkan data dari sebuah sqlite database menggunakan Svelte dan Svelte Kit. Buat yang belum tahu, Svelte adalah mesinnya sedangkan Svelte Kit untuk membuat tampilannya. Kenapa harus capek-capek menampilkan data dari database? Karena saya ingin membuat sebuah aplikasi soal-soal pilihan ganda. Dimana soal dan jawabannya disimpan pada sebuah database. Tanpa berlama-lama lagi, begini cara load data dari database dengan sveltekit. ...

mrfdn.com - Kali ini saya ingin mencatat bagaimana cera menampilkan data secara loop dengan menggunakan Svelte component yang berjalan di atas projekan Astro JS. Pastikan sudah add Svelte ke Astro npx astro add svelte Setelah itu buka file ./package.json lalu pastikan svelte sudah terinstall. Jika perlu hapus file ./package-lock.json lalu install dengan perintah npm install. Sekarang buat component yang berisi list data di /src/components/Listdata.svelte, lalu isi dengan codingan ini: <script> let items = ['halo', 'Item 2', 'Item 3', 'Item 4', 'Item 5']; </script> <ul> {#each items as item} <li>{item}</li> {/each} </ul> Sekarang panggil components tersebut pada file mana saja yang diinginkan. Di sini saya membuat file baru bernama /src/pages/loop.svelte lalu isi dengan kodingan ini: --- import Gallery from '../components/ListData.svelte'; --- <h1>List data</h1> <Gallery /> Jalankan server npm run dev dan anda akan melihat hasilnya di layar. Demikian cara menampilkan data array pada Svelte yang berjalan di atas Astro JS. ...

mrfdn.com - Sebagaimana diketahui bahwa wordpress memiliki sebuah fitur bernama Rest API. Jika fitur ini diaktifkan maka kita bisa menggunakannya dengan bebas. Kita bisa menangkap daftar artikel pada web wordpress. Salah satu cara menggunakan Wordpress Rest API adalah dengan Svelte/SvelteKit SvelteKit memiliki fitur untuk menampilkan data / load data dari sebuah link api. Jadi tanpa berlama-lama begini caranya. Pastikan web wordpress yang akan digunakan sudah online dan api nya aktif. Cara cek api nya bisa dengan mengetikkan ini pada akhir domainnya. contoh*.com/wp-json/wp/v2/posts Jika bisa diakses silahkan lanjut ke tahap berikutnya. ...

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 - Saya memiliki sebuah projek website dimana saya menggunakan AstroJS sebagai backend nya. Kemudian beberapa waktu yang lalu Astro sudah memiliki versi terbaru yaitu astro versi 2.0. Terdapat beberapa perubahan dimana saya harus beradaptasi lagi dengan fitur-fitur baru astro 2.0 ini. Sebelumnya projek saya sedang berjalan pada astro versi 1.9.2. Saat tulisan ini dibuat astro sudah berada pada versi 2.0.11. Untuk upgrade ke versi astro terbaru cukup gunakan perintah npm i astro@latest. ...

mrfdn.com - Ketika saya ingin membuat aplikasi / website sederhana menggunakan nodejs, saya ingin mencoba menggunakan yarn. Yarn adalah salah satu paket manager untuk install apliiasi nodejs. Kalau bawaan nodejs kita bisa menemukan npm, nah yarn sama dengan npm hanya beda fitur saja. Karena saat ini saya menggunakan Debian 11, saya mengira bisa langsung install yarn dengan perintah sudo apt install yarn. Tetapi cara ini salah, saya tidak bisa menjalankan perintah yarn. ...