Web

mrfdn.com - Dark mode, atau mode gelap, telah menjadi tren desain antarmuka pengguna yang populer. Banyak pengguna menghargai opsi ini karena dapat mengurangi kelelahan mata dan meningkatkan kenyamanan saat menggunakan perangkat pada malam hari. Dalam artikel ini, kita akan membahas cara mengimplementasikan dark mode pada halaman HTML dengan menggunakan HTML, CSS, dan JavaScript. Versi 1 : Tanpa Toggle Pada contoh pertama ini, kita menggunakan 2 tombol untuk klik secara manual antara light mode atau dark mode. ...

mrfdn.com - Mungkin ada beberapa di antara teman-teman yang menggunakan Hugo sebagai platform untuk nge-blog. Dan blog nya juga menampilkan iklan adsense. Kali ini saya ingin share cara menampilkan iklan di antara paragraf hugo. Baris iklan akan tampil setiap beberapa paragraf. Iklan akan terender secara otomatis pada file html, bukan tampil sebagai javascript. Tanpa berlama-lama, begini caranya menampikan iklan di antara paragraf hugo blog. Buat file partial Buat file partial di layouts/partials/iklan/iklan-tengah.html. ...

mrfdn.com - Kali ini saya sedang belajar Solidjs. Di sini saya ingin submit dan fetch data secara otomatis dari dan ke google sheet. Saya menggunakan Astro, dan menjalankan SolidJS sebagai component. Komponen ini yang saya buat ini digunakan untuk menghandle kirim ucapan / komentar untuk web invitation. Di sini saya dibantu oleh ChatGPT untuk generate codingan solid js. Langsung saja begini caranya: Daftar Isi Install package solidjs Folder structure Buat komponen utama SolidJS : App.jsx Buat komponen Form.jsx Panggil komponennya di halaman astro: index.astro Kesimpulan Install package solidjs Pastikan sudah install solid di projekan astro ...

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 - SQLite adalah database relasional yang ringan dan mudah digunakan. Database ini dapat digunakan untuk berbagai keperluan, termasuk menyimpan data dari file CSV. File CSV adalah file teks yang menyimpan data dalam format tabel. Setiap baris dalam file CSV mewakili satu baris data, dan setiap kolom dalam baris mewakili satu atribut data. Untuk membuat SQLite database dari file CSV, kita dapat melakukannya dengan beberapa baris perintah SQL untuk membuat database dan mengimpor data dari file CSV. ...

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 - Dalam pengembangan wordpress di Nixos, terkadang kita harus menambahkan size upload file sebagai konfigurasi php. Nah di nixos, kita bisa menambahkan baris ini pada configuration.nix atau pada LEMP config nixos yang sudah dibuat sebelumnya. services.phpfpm.phpOptions = '' date.timezone = "Asia/Makassar"; display_errors = on; upload_max_filesize = "100M"; post_max_size = "100M"; ''; Setelah itu rebuild config, lalu lihat perbedaannya setelah mengeksekusi phpinfo() Selesai.

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. ...