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 - Kali ini saya ingin share cara setup VPS server dengan OS Freebsd yang saya beli pada sebuah web hosting. Saya hanya ingin menjalankan web statis di sana. Jadi settingan server ini akan sangat minimalis. Tanpa berlama-lama begini caranya. Daftar Isi Setup Nginx Konfigurasi Server Block Nginx Install Lets Encrypt situs bisa diakses melalui HTTPS Cara update SSL menggunakan Certbot di Freebsd Ganti port SSH Freebsd Rsync Hugo ke VPS Hosting Setup Nginx Install nginx dan neovim ...

mrfdn.com - Kali ini saya ingin review menggunakan keyboard wireless NYK yang saya gunakan sebagai keyboard external untuk laptop Thinkpad P50 saya. Keyboard ini merupakan salah satu yang keyboard murah yang mudah ditemukan di pasar. Baik itu toko offline maupun online. Saya membelinya pada toko offline, karena memang tidak ada referensi/gambaran untuk mendapatkan keyboard wireless yang pas dengan kebutuhan saya. Lagi pula lebih puas kalau bisa mencoba langsung barangnya sebelum membeli. ...

mrfdn.com - Flakes merupakan salah satu fitur terbaik yang dimiliki oleh nixos. Dengan flakes kita bisa build system dari direktory manapun. Bukan lagi dari /etc/nixos/, tapi konfigurasi bisa disimpan pada folder ~/.dotfiles. Ini terasa lebih gampang karena konfigurasi bisa disimpan di github, lalu ketika akan digunakan lagi tinggal di-clone saja lalu build. Jika anda tertarik untuk build system menggunakan flakes, ikuti tutorial berikut, jangan diskip setiap step nya! Folder structure ~/.dotfiles . ├── configuration.nix ├── flake.lock ├── flake.nix ├── hardware-configuration.nix └── home └── home.nix Cara menggunakan flake untuk build system Buat sebuah direkotory dengan nama ~/.dotfiles lalu cd ke folder ini. Copy file /etc/nixos/configuration.nix dan /etc/nixos/hardware-configuration.nix ke .dotfiles yang baru saja dibuat cd .dotfiles cp /etc/nixos/configuration.nix . cp /etc/nixos/hardware-configuration.nix . Buat sebuah file dengan nama flake.nix kemudian definsikan konfigurasi system disini. { description = "My system flake"; inputs = { # saya akan menggunakan nixos unstable nixpkgs.url = "nixpkgs/nixos-unstable"; }; outputs = { self,nixpkgs, ...}: let lib = nixpkgs.lib; in { nixosConfigurations = { # nixhost adalah nama hostname pada system saya, ganti ini sesuai system anda. nixhost = lib.nixosSystem { system = "x86_64-linux"; modules = [ ./configuration.nix ]; }; }; }; } Sekarang build system dengan menambahkan --flakes dan . (dot) pada akhir baris. sudo nixos-rebuild switch --flake . Tunggu proses build, dan selesai, anda sekarang sudah punya konfigurasi system yang dibuild menggunakan flakes. Cara menggunakan home-manager dengan flake Pastikan sudah install home-manager pada system, jika belum ikuti tutorial ini. Home manager stand alone installation Buat sebuah folder dengan nama home pada folder ~/dotfiles/ yang sudah dibuat. Setelah home manager terinstall, sekarang copy file ~/.config/home-manager/home.nix ke folder ~/.dotfiles/home/. Lalu edit file flake.nix sehingga menjadi seperti ini: { description = "My Flake"; inputs = { # I use nixos unstable channel nixpkgs.url = "nixpkgs/nixos-unstable"; # I want to use branch master, which is default in home-manager, which will profide the latest app or the unstable version app home-manager.url = "github:nix-community/home-manager/master"; home-manager.inputs.nixpkgs.follows = "nixpkgs"; }; outputs = { self,nixpkgs, home-manager, ...}: let lib = nixpkgs.lib; system = "x86_64-linux"; pkgs = nixpkgs.legacyPackages.${system}; in { nixosConfigurations = { # nixhost is my hostname, define it as yours. nixhost = lib.nixosSystem { inherit system; modules = [ ./configuration.nix ]; }; }; homeConfigurations = { # nix is my user name, make sure to change this nix = home-manager.lib.homeManagerConfiguration { inherit pkgs; modules = [ ./home/home.nix ]; }; }; }; } Ingat untuk mengganti hostname dan username anda. ...

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 - Pada hari ini saya menemukan cara untuk setting reverse proxy pada web server Cyberpanel (OpenLiteSpeed). Awal mula Awalnya saya mendapatkan pekerjaan untuk membuat sebuah projekan menggunakan NodeJS. Saya pun memilih Svelte sebagai framework. Proses development berjalan lancar sampai bisa berjalan live di Netlify. Kemudian kendala pun terjadi ketika aplikasi ini dijalankan pada VPS yang sudah diinstalkan NodeJS. Kebetulan VPS nya diinstall dengan web server OpenLiteSpeed dan menggunakan Cyberpanel sebagai panel. ...

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