Forums

Welcome, Guest

You have to register before you can post on our site.

Search Forums

(Advanced Search)

Forum Statistics

» Members: 1
» Latest member: admin
» Forum threads: 22
» Forum posts: 22

Full Statistics

Online Users

There are currently 3 online users.
» 0 Member(s) | 3 Guest(s)

Latest Threads

AI dalam Cyber Security, ...
Forum: My Forum
Last Post: admin
1 hour ago
» Replies: 0
» Views: 2

Favicon Getter
Forum: My Forum
Last Post: admin
1 hour ago
» Replies: 0
» Views: 1

Update Password di Larave...
Forum: My Forum
Last Post: admin
1 hour ago
» Replies: 0
» Views: 1

USB Multiboot
Forum: My Forum
Last Post: admin
1 hour ago
» Replies: 0
» Views: 2

Kustomisasi Halaman 404
Forum: My Forum
Last Post: admin
1 hour ago
» Replies: 0
» Views: 1

Event #001 Komunitas Back...
Forum: My Forum
Last Post: admin
2 hours ago
» Replies: 0
» Views: 1

Getting Started with Grap...
Forum: My Forum
Last Post: admin
2 hours ago
» Replies: 0
» Views: 1

Private: ElysiaJS Basic
Forum: My Forum
Last Post: admin
2 hours ago
» Replies: 0
» Views: 1

Private: Bexlite Course I...
Forum: My Forum
Last Post: admin
2 hours ago
» Replies: 0
» Views: 1

Stop Piracy
Forum: My Forum
Last Post: admin
2 hours ago
» Replies: 0
» Views: 3

AI dalam Cyber Security, Onno W. Purbo

Posted by: admin - 1 hour ago - Forum: My Forum - No Replies

Quote:Reza Nurfachmi, August 19, 2025

Quote:

Alhamdulillah, buku ini bisa diselesaikan. Buku AI dalam Cyber Security: Dari Teori
Hingga Praktik Pertahanan Digital disusun sebagai panduan singkat namun terarah bagi
pembaca untuk menjembatani konsep dasar kecerdasan buatan dengan praktik pertahanan
siber yang relevan di Indonesia.

Terima kasih banyak pada seluruh civitas academica di Institut Teknologi Tangerang
Selatan, serta Komunitas IT di Indonesia atas engagement, dukungan, dan umpan balik
selama ini yang memperkaya proses penulisan dan pengujian gagasan di dalam buku ini.

Buku ini dirancang untuk akademisi, praktisi, dan pengambil keputusan. Isinya merentang
dari fondasi AI dan keamanan siber, deteksi ancaman dan anomali (IDS/IPS, UEBA),
otomasi respons insiden (SOAR), keamanan aplikasi, hingga sisi gelap pemanfaatan AI
dalam serangan, etika–privasi–regulasi, serta tren masa depan dan strategi implementasi
yang pragmatis di organisasi. Harapannya, buku ini dapat menjadi rujukan praktis dalam
memperkuat kesiapan dan ketahanan siber nasional.

Akhir kata, mohon maaf jika ada banyak kekurangan dalam penyajian materi, contoh,
maupun kedalaman bahasan; segala saran dan kritik yang membangun sangat penulis
nantikan untuk perbaikan edisi berikutnya.

Tangerang Selatan, Agustus 2025
Onno W. Purbo

Download ebook-nya di sini.

Jika tautan di atas bermasalah, bisa download alternatifnya di bawah ini.

Quote:Onno W. Purbo, AI dalam Cyber Security, 2025

Favicon Getter

Posted by: admin - 1 hour ago - Forum: My Forum - No Replies

Quote:Reza Nurfachmi, June 27, 2025

Assalamu’alaykum warahmatullahi wabarakatuh.

Singkatnya, ini adalah beberapa cara kita mendapatkan favicon sebuah website tanpa perlu mengubek-ngubek source code untuk mendapatkan url-nya, lalu mengunduh dan mengunggahnya kembali ke hosting kita untuk ditampilkan. Paham, tak? Semoga iya.

Quote:

Cara pertama menggunakan Google API.

Code:
https://s2.googleusercontent.com/s2/favicons?domain={nama domain}&sz=32

Contoh penggunaan:

Code:
https://s2.googleusercontent.com/s2/favicons?domain=nurfachmi.com&sz=32

Untuk query sz (size) itu bisa diubah-ubah juga nilainya, bisa 32, 64, 128 sampai 256.

Jika dibungkus dengan tag img, maka langsung menjadi seperti ini:
[Image: favicons?domain=nurfachmi.com&sz=256]

[Image: favicons?domain=nurfachmi.com&sz=256]

---

Cara kedua juga menggunakan API dari sebuah web yang bernama clearbit.com.

Code:
https://logo.clearbit.com/{nama domain}

Contoh penggunaan:

Code:
https://logo.clearbit.com/nurfachmi.com

Jika dibungkus dengan tag img, maka akan menjadi seperti di atas. Hanya saja otomatis akan diarahkan menjadi ukuran 128×128 pixel.

---

API di atas bisa kita gunakan untuk mempercantik konten web kita. Misalnya kita hanya menyimpan url website, maka kita bisa menambahkan icon/favicon-nya agar terlihat lebih menarik lagi.

Begitulah kira-kira tentang Favicon Getter ini. Semoga bermanfaat.

Update Password di Laravel

Posted by: admin - 1 hour ago - Forum: My Forum - No Replies

Quote:Reza Nurfachmi, June 24, 2025

Assalamualaikum warahmatullahi wabarakatuh.

Kembali lagi di tutorial singkat nan padat berupa tips dan trik dalam potongan kode. Kali ini tentang update password di Laravel.

Bayangkan kamu memiliki halaman untuk mengubah password akun, kira-kira akan ada elemen-elemen berikut ini:

Password saat ini (name: current_password)
Password baru (name: password)
Konfirmasi password baru (name: password_confirmation)

Jika ini adalah aplikasi RESTful, maka kira-kira struktur JSON-nya seperti ini:

PHP Code:
{
     "current_password": "abcdefg",
     "password": "new password",
     "password_confirmation": "new password"
} 

Lalu buat sebuah invokable controller dengan perintah:

PHP Code:
php artisan make:controller UpdatePasswordController -i 

Kemudian buat sebuah form request dengan perintah:

PHP Code:
php artisan make:request UpdatePasswordRequest 

Kembali ke file controller tadi, ubah isinya menjadi seperti ini:

PHP Code:
use App\Http\Requests\UpdatePasswordRequest;
use Illuminate\Support\Facades\Hash;

...

public function __invoke(UpdatePasswordRequest $request)
{
    $request->user()->fill([
        'password' => Hash::make($request->password)
    ])->save();

    ....
} 

Adapun isi file form request-nya sebagai berikut:

PHP Code:
public function rules(): array
{
    return [
        'current_password' => 'required|current_password|different:password',
        'password' => 'required|string|min:6|confirmed',
    ];
} 

Daan jadilah sebuah halaman untuk mengubah password dengan ketentuan sebagai berikut:

Membutuhkan password aktif yang tepat saat ini.
Panjang password minimal 6 karakter.
Password baru dan konfirmasi passwordnya harus sama.
Password baru dan password lama harus berbeda.

Sebetulnya masih banyak yang bisa dilakukan seperti password harus berupa kombinasi huruf, angka dan simbol. Namun, itu kita bahas di lain waktu saja. Kali ini penulis ingin menekankan tentang kesederhanaan kode Laravel dalam skenario ubah password ini.

Terima kasih sudah membaca sampai sini. Semoga bermanfaat. Mohon koreksi jika ada kekeliruan dan bagikan artikel ini jika memberi pengetahuan.

Wassalamu’alaikum warahmatullahi wabarakatuh.

USB Multiboot

Posted by: admin - 1 hour ago - Forum: My Forum - No Replies

Quote:Reza Nurfachmi, June 6, 2025

Kita sering mendengar atau mengetahui bahwa ada PC/Laptop yang Dualboot atau Multiboot. Maksudnya adalah dalam satu PC bisa ada lebih dari satu sistem operasi, misalnya Windows dan Linux sekaligus. Hal tersebut sudah biasa, bagaimana kalau kita memiliki USB yang Multiboot juga?

Quote:

Tanpa Multiboot, jika kamu memiliki 2 file ISO, misalnya, Windows dan Linux Mint, maka kamu harus memiliki dua USB untuk disiapkan satu per satu untuk kedua sistem operasi tersebut. Repot, kan?

Dengan memiliki USB Multiboot, maka kamu bisa melakukan Live atau Instalasi banyak sistem operasi dengan menggunakan hanya satu USB.

Kenalkan, Ventoy! Ventoy adalah alat yang menghasilkan USB yang spesial dan Ventoy bersifat open source. Mengapa spesial? Karena USB kamu bisa jadi Multiboot! Yuhuuu!

Yowis tanpa panjang lebar, langsung aja ke tutorialnya.

--

Instalasi Ventoy

Colokin dulu USB stick yang ingin dijadikan Multiboot.

Sila ke halaman rilis Ventoy dan download sesuai sistem operasi kamu. Penulis memakai Linux, jadinya mengunduh yang ventoy-x.x.x-linux.tar.gz.

Selesai diunduh, langsung saja di-ekstrak filenya.

Klik kanan folder Ventoy-nya, lalu pilih Open in Terminal.

Lalu jalankan perintah ini:

Code:
sudo ./VentoyGUI.x86_64

Menggunakan Ventoy

Cara menggunakannya gampang banget.

Pastikan yang muncul adalah USB Drive kamu. Kalau baru nyolokin, kamu bisa klik dulu icon refresh yang warna hijau.

Pilih USB yang dimaksud.

Klik tombol Install dan tunggu.
[Image: ventoy.png?resize=480%2C370&ssl=1]

[Image: ventoy.png?resize=480%2C370&ssl=1]

Ketika sudah selesai, maka USB kamu kini namanya sudah jadi ventoy.

Tinggal salin aja file-file berekstensikan ISO ke drive USB kamu itu.

Terakhir boot deh pakai USB tadi.
[Image: ventoy_boot.jpg?resize=640%2C360&ssl=1]

[Image: ventoy_boot.jpg?resize=640%2C360&ssl=1]

Maka file-file ISO yang disalin tadi akan menjadi pilihan untuk booting.

--

Gimana? Mudah, kan?

Kustomisasi Halaman 404

Posted by: admin - 1 hour ago - Forum: My Forum - No Replies

Berangkat dari ribut-ribut di Twitter (kini X) mengenai halaman 404 yang tampilannya itu standar masih bawaan web server engine-nya itu sendiri. Kode 404 sendiri merujuk ke salah satu dari HTTP response status codes yang artinya Not Found atau halaman tidak ditemukan karena kesalahan pengguna dalam menuliskan alamat websitenya.

Quote:

Berikut tampilan halaman 404 default pada beberapa web server terkenal.

NGINX default 404
[Image: 404-nginx.png?resize=640%2C409&ssl=1]

LiteSpeed default 404
[Image: 404-litespeed.jpg?resize=640%2C391&ssl=1]

Apache default 404
[Image: 404-apache.png?resize=640%2C334&ssl=1]

Nah, namanya juga tampilan standar, pastilah agak kurang cantik terlihatnya. Jadi, bagaimana kalau kita bikin sendiri atau kustom halaman 404 tersebut? Yuk bismillah.

---

Daftar Isi

Insyaallah kita akan membahas beberapa hal seputar kustomisasi halaman 404 ini, antara lain:

Shared Hosting
Laravel PHP (framework)
WordPress (CMS)
nginx
LiteSpeed
Apache

Sebelum kita mulai satu per satu pembahasannya, kami ingin menyampaikan sesuatu.

Blog nurfachmi.com hadir untuk berbagi ilmu dan pengalaman seputar teknologi, pemrograman, dan pengembangan karier di dunia IT. Semua konten yang ada di sini dibuat dengan penuh dedikasi agar bisa membantu lebih banyak orang memahami teknologi dengan cara yang lebih mudah dan praktis.

Jika Anda merasa blog ini bermanfaat, Anda bisa mendukung operasional kami dengan memberikan donasi. Setiap kontribusi yang Anda berikan akan digunakan untuk:

✅ Biaya server dan domain agar blog tetap online
✅ Pengembangan fitur baru, termasuk platform LMS dengan kelas gratis dan berbayar
✅ Pembuatan konten berkualitas yang lebih beragam

Dukungan Anda, sekecil apa pun, sangat berarti bagi keberlangsungan blog ini. Mari bersama-sama membangun komunitas belajar yang lebih baik!

Klik tombol donasi di bawah ini untuk berkontribusi.
Terima kasih! ?

Sekali lagi terima kasih atas dukungannya. Sekarang, mari kita belajar!

---

Shared Hosting

Pada umumnya jika kita menyewa shared hosting, biasanya sudah include dengan cPanel. Untuk memodifikasi halaman error 404, silahkan cari di menu pencarian dengan keyword Error Pages atau scroll sedikit tetikusnya sampai ketemu submenu Advanced dan klik ikon Error Pages.

[Image: image-11.png?resize=640%2C174&ssl=1]

[Image: image-11.png?resize=640%2C174&ssl=1]

Akan muncul kira-kira seperti ini pilihannya:

[Image: image-12.png?resize=640%2C468&ssl=1]

Nah kalau di cPanel, kita gak hanya bisa modifikasi halaman 404. Halaman error lainnya juga bisa dikustom kok.

Selanjutnya kita klik saja menu 404 (Not found) dahulu dan kita akan diarahkan ke sebuah editor seperti ini:

[Image: image-13.png?resize=640%2C533&ssl=1]

[Image: image-13.png?resize=640%2C533&ssl=1]

Yowis, silahkan taruh kode HTML sesuai keinginan kita sendiri di text editor tersebut. Pastikan klik tombol Save kalau sudah selesai ya.

Etapi untuk memperkaya informasi mengenai error-nya, kita bisa menambahkan beberapa tag spesial, antara lain:

Referring URL: alamat asal sebelum sampai ke halaman 404 tersebut.
Server Name: url server saat ini.
Visitor's IP Address: IP Address pengunjung.
Visitor's Browser: detail browser yang dipakai.
Requested URL: url yang ingin diakses tetapi tidak ditemukan.
Redirect Status Code: status kode redirect, biasanya sekitar 3xx.

Berikut contoh kodenya:

PHP Code:

<!DOCTYPE html>
<html lang="id">
<head><meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 Not Found</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex align-items-center justify-content-center vh-100 bg-light">
    <div class="text-center">
        <h1 class="display-1 text-danger">404</h1>
        <p class="lead">Halaman yang Anda cari tidak ditemukan.</p>
        <p class="lead">Referring URL: <!--#echo var="HTTP_REFERER" --></p>
        <p class="lead">Server Name: <!--#echo var="HTTP_HOST" --></p>
        <p class="lead">Visitor IP Address: <!--#echo var="REMOTE_ADDR" --></p>
        <p class="lead">Browser: <!--#echo var="HTTP_USER_AGENT" --></p>
        <p class="lead">Requested URL: <!--#echo var="REQUEST_URI" --></p>
        <p class="lead">Redirect Status Code: <!--#echo var="REDIRECT_STATUS" --></p>
        <a href="/" class="btn btn-primary">Kembali ke Beranda</a>
    </div>
</body>
</html>

Hasilnya kira-kira seperti ini:
[Image: image-14.png?resize=640%2C386&ssl=1]

Nah begitu cara mengubah atau memodifikasi atau kustomisasi halaman 404 di shared hosting alias cPanel. Gampang, kan?

---

Laravel PHP (Framework)

Jika kita memakai sebuah web framework, apapun itu, biasanya halaman 404 dan lainnya sudah disediakan oleh si framework itu sendiri. Tugas kita hanya melakukan modifikasi terhadap file tersebut.

Nah, pada praktek kali ini kita akan belajar bagaimana melakukan kustomisasi terhadap file atau halaman 404.

Pertama, kita harus mem-publish file-filenya terlebih dahulu dengan perintah ini di Terminal atau CMD.

PHP Code:
php artisan vendor:publish --tag=laravel-errors 

Maka akan muncul beberapa file baru di dalam folder resources/views/errors seperti berikut:

401.blade.php
402.blade.php
403.blade.php
404.blade.php
419.blade.php
429.blade.php
500.blade.php
503.blade.php
layout.blade.php
minimal.blade.php

Bagi kamu yang belum familiar dengan framework Laravel, setiap file yang mewakili view atau yang tampil di browser akan selalu berarkhiran .blade.php agar ia support templating yang disediakan oleh Laravel.

Etapi itu kan gak cuma 404, ya? Kira-kira apa aja artinya?

Untuk yang format 4xx itu menandakan error karena ulah si user. Sedangkan format 5xx itu menandakan error dari server web milik kita.

Keterangan:

401 Berkenaan dengan authentication atau hanya yang memiliki akses bisa melihat halaman tersebut
402 Berkenaan dengan payment atau halaman ini bisa diakses jika telah melakukan pembayaran tertentu
403 Berkenaan dengan authorization atau halaman ini bisa diakses dengan level user tertentu
404 Nah ini yang dibahas, yakni halamannya tidak ditemukan karena kamu salah nulis alamat
419 Berkenaan dengan page expired atau biasa terjadi karena token CSRF-nya sudah tidak valid karena terlalu lama atau tidak disediakan sama sekali
429 Berkenaan dengan rate limiting atau kamu terlalu banyak mengakses halaman ini. Lagi war ticket, ya?
500 Pesan error umum ketika server tidak tau bagaimana meresponse request dari user
503 Pesan error dari server ketika sedang down dan ini saatnya kamu puk-puk dia sebagai web administrator

Nah silahkan deh edit masing-masing file dengan desain yang sesuai, dengan keinginan kamu maupun dengan skenarionya.

---

WordPress

To be or not to be

---

nginx

Mulai sekarang langkah-langkahnya akan lebih sederhana karena sudah agak menyentuh low level, yakni ke layer sistem operasi yang biasanya hanya terminal seperti Ubuntu Server dan lainnya.

Buat Halaman 404 Kustom

Langkah pertama, kita buat dulu halaman 404 yang kita inginkan. Supaya lebih enak, kita kumpulkan saja pada lokasi document root-nya, yakni di /var/www/html. Jadi kita buat dulu filenya dengan:

Code:
nano /var/www/html/404.html

Oh iya, silahkan ganti editor nano dengan editor favorit masing-masing ya. Kemudian silahkan isi dengan desain halaman 404 yang diinginkan. Misalnya seperti ini:

PHP Code:
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Tidak Ditemukan</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
        h1 { font-size: 50px; }
        p { font-size: 20px; }
    </style>
</head>
<body>
    <h1>404</h1>
    <p>Oops! Halaman yang Anda cari tidak ditemukan.</p>
    <a href="/">Kembali ke Beranda</a>
</body>
</html> 

Simpan filenya, lalu restart nginx-nya.

Code:
sudo systemctl restart nginx

Begitu deh, lebih sulit atau malah lebih mudah?

---

LiteSpeed

Sebenarnya saya memakai OpenLiteSpeed untuk demo ini. Karena OpenLiteSpeed adalah gratis dan open source, sedangkan LiteSpeed itu produk premium berbayar. Mohon maklum. Hehe.

Namun, beda nginx, beda pula dengan OpenLiteSpeed ini.

Kalau nginx belum ada file 404 sehingga harus bikin sendiri, sedangkan si OpenLiteSpeed ini sudah ada. Sehingga kita diberi pilihan ingin mengubah file 404 default atau bikin baru. Ya mending bikin baru supaya file lamanya tetap terarsip dengan baik.

Buat Halaman 404 Kustom

Baiklah, pertama kita buat file barunya di lokasi document root standar.

Code:
sudo nano /usr/local/lsws/Example/html/404.html

Kemudian silahkan isi dengan desain halaman 404 milik kamu sendiri atau pakai seperti di bawah ini.

PHP Code:
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Tidak Ditemukan</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
        h1 { font-size: 50px; }
        p { font-size: 20px; }
    </style>
</head>
<body>
    <h1>404</h1>
    <p>Oops! Halaman yang Anda cari tidak ditemukan.</p>
    <a href="/">Kembali ke Beranda</a>
</body>
</html> 

Edit Konfigurasi Virtual Host Secara Manual

Lalu kita ubah juga file konfigurasinya agar setiap aksi 404 selalu mengarah ke halaman yang telah kita buat tadi.

Code:
sudo nano /usr/local/lsws/conf/vhosts/Example/vhconf.conf

Tambahkan atau ubah bagian berikut:

Code:
errorPage 404 /404.html

Restart OpenLiteSpeed

Setelah mengedit file konfigurasi, restart OpenLiteSpeed agar perubahan diterapkan:

Code:
sudo systemctl restart lsws

Silahkan tes lagi dengan alamat asal deh.

---

Apache

to be or not to be

---

Penutup

Masih banyak kekurangan dan mungkin saja cara-cara di atas bukan yang terbaik, ter-efektif dan ter-efisien, tetapi semoga menjadi khazanah baru bagi manteman pembaca sekalian.

Akhir kata, mohon koreksi jika ada kekeliruan dalam artikel ini.

Event #001 Komunitas Back-End Tangerang

Posted by: admin - 2 hours ago - Forum: My Forum - No Replies

Quote:Reza Nurfachmi, January 21, 2025

Masih bingung bagaimana membangun basis data / database untuk projek / aplikasimu? Ragu ingin melakukan pisah table atau digabung aja? Bergabunglah dengan Event #001 Backend ID x Laravel ID untuk mendapatkan inspirasi dan wawasan praktis tentang bagaimana membangun sistem basis data skala production! Gratis!

Quote:

? Lokasi:
Nutrihub Serpong, Foresta Business Loft 2
Jl. BSD Raya Utama Unit 6, Pagedangan, Tangerang Regency, Banten 15339

? Tanggal:
Sabtu, 1 Februari 2025
⏰ Waktu:
13:00 – 18.00 WIB
Topik Pembicaraan

Normalisasi Database
Belajar bagaimana menjadi database designer dan memahami normalisasi database dengan praktis.
Praktek Database pada Laravel
Hands-on membangun database dalam Laravel dan menguasai Migration serta Eloquent.

Kenapa Anda Harus Datang?

Dapatkan wawasan langsung dari pembicara berpengalaman.
Bertemu dengan komunitas Backend dan Laravel Devs lokal yang mendukung.
Bangun jaringan dengan sesama developer|freelancer dan pelaku industri digital.

Pendaftaran

Acara ini GRATIS dan terbuka untuk umum, tetapi tempat terbatas! Pastikan Anda mendaftar melalui backend.web.id agar tidak ketinggalan.

Link: https://backend.web.id/events/membangun-...production

Getting Started with GraphQL

Posted by: admin - 2 hours ago - Forum: My Forum - No Replies

Quote:Reza Nurfachmi, January 12, 2025

GraphQL adalah sebuah bahasa query untuk API dan sebuah runtime untuk memenuhi query tersebut dengan data yang sudah ada. GraphQL menyediakan deskripsi yang lengkap dan mudah dipahami tentang data dalam API Anda, memberikan kemampuan kepada klien untuk meminta hanya apa yang mereka butuhkan dan tidak lebih, memudahkan pengembangan API seiring waktu, serta memungkinkan penggunaan alat pengembang yang canggih.

Quote:

Paragraf di atas hanyalah terjemahan bebas dari paragraf asli yang berbunyi sebagai berikut:

Quote:GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Kalau dalam bahasa yang lebih santai, mungkin seperti ini:

Quote:GraphQL itu semacam bahasa query buat API, plus runtime yang ngurusin gimana query-nya dipenuhi pake data yang udah ada. Intinya, GraphQL bikin kamu ngerti banget soal data yang ada di API kamu, dan klien bisa minta data yang mereka perlu aja—nggak lebih, nggak kurang. Ini juga ngebantu banget kalau kamu mau upgrade API pelan-pelan tanpa ribet, plus ada banyak tools keren buat developer yang bikin kerja jadi lebih gampang.

Sampai sini paham tentang GraphQL? Penulis harap sih belum ya, karena penulis belum menjelaskan apa-apa tentang GraphQL ini. Hehehe. Kalau sudah paham, mungkin kamu perlu baca artikel lain saja. Hehehe (lagi).

--

Untuk yang lebih sering berkutat dengan REST API, mungkin akan terasa bingung apa sih bedanya antara REST dan GraphQL?

Perbedaannya adalah GraphQL menggunakan query untuk meminta data, sedangkan REST tidak.

GraphQL menggunakan satu endpoint untuk meminta data (apapun), sedangkan REST tidak. REST butuh satu endpoint untuk mendapatkan data user, lalu butuh endpoint lain untuk mendapatkan data transaksi, dan sebagainya. GraphQL cukup satu endpoint, hanya saja querynya yang berbeda.

Mungkin kita cukupkan teorinya saat ini, untuk lebih lengkapnya bisa baca-baca di dokumentasi GraphQL-nya sendiri. Mari kita lanjut ke praktek.

---

Projek Baru

Untuk praktek kali ini, kita akan menggunakan JavaScript dengan NodeJS sebagai runtimenya.

Buat folder baru dengan nama graphql, lalu buat folder server dan client di dalamnya. Hasilnya kurang lebih seperti ini:

Code:
graphql (folder)

├── client (folder)

└── server (folder)

Lalu buat sebuah file server.js dan package.json di dalam folder server.

--

Isi dari package.json cukup seperti ini dulu:

Code:
{

  "name": "belajar-graphql",

  "private": true,

  "type": "module"

}

Apa artinya?

Artinya kita akan membuat sebuah projek baru dengan nama belajar-graphql. Lalu projeknya bersifat private, belum ada rencana untuk menempatkannya ke package manager seperti npmjs atau lainnya. Terakhir, kita akan memanfaatkan teknologi javascript terbaru, yakni JavaScript modules.

--

Lalu kita isi file server.js dengan kode sederhana berikut:

Code:
const typeDefs = `

  type Query {

    greeting: String

  }

`;

const resolvers = {

  Query: {

    greeting: () => 'Hello world!'

  },

}

Apa artinya?

Pada baris 1-5 kita mendeklarasikan sebuah variabel/konstanta dengan nama typeDefs yang isinya adalah sebuah SDL atau Schema Definition Language yang dapat dipanggil oleh klien/client.

Mengapa typeDefs? Karena ingin menyatakan bahwa di sini lah kita menuliskan seluruh type definitions dari query-nya.

type Query

Baris ini mendeklarasikan bahwa kita akan membuat daftar query yang dapat diakses oleh klien. Semua query yang ingin disediakan API didefinisikan di dalam type Query.

greeting: String

Baris ini menandakan bahwa kita memiliki sebuah field dengan nama greeting yang tipe datanya adalah String. Field ini harus memiliki resolver atau sebuah fungsi yang mengembalikan nilai saat field ini dipanggil dalam sebuah query.

Kemudian pada baris 7-11 disebut sebagai resolver yang dibungkus dalam variabel/konstanta dengan nama resolvers. Ini adalah sebuah objek JavaScript yang berisi implementasi fungsi untuk setiap field yang ada di dalam schema GraphQL.

Objek ini digunakan untuk “menghubungkan” field di schema (typeDefs) dengan logika yang menyediakan data untuk field tersebut.

Semua field di dalam Query harus memiliki resolver, kecuali jika data bisa diambil secara default (misalnya, dari field dalam objek yang sudah ada).

Adapun greeting: () => 'Hello world!' adalah resolver untuk field greeting yang didefinisikan di schema sebelumnya.

--

Contoh singkat jika ingin melakukan operasi asinkron pada resolver adalah sebagai berikut:

Code:
const resolvers = {

  Query: {

    greeting: async () => {

      try {

        // Memanggil API eksternal untuk mendapatkan pesan

        const response = await fetch("https://api.example.com/greeting");

        // Periksa jika respons gagal

        if (!response.ok) {

          throw new Error(`HTTP error! Status: ${response.status}`);

        }

        // Parse body respons ke JSON

        const data = await response.json();

        // Mengembalikan field `message` dari data

        return data.message;

      } catch (error) {

        console.error("Error fetching data from API:", error);

        throw new Error("Failed to fetch greeting from API.");

      }

    },

  },

};

Silahkan lanjut ke halaman selanjutnya jika sudah memahami seluruh penjelasan di atas, ya! Kalau ada pertanyaan, coba layangkan di kolom komentar. Pertanyaanmu, insyaallah, tidak akan pernah dengan sengaja tidak dijawab.

---

Thoyyib, sebelumnya kita sudah mendefinisikan query dan resolver-nya, lalu bagaimana cara menjalankan kode sebelumnya itu? Caranya ialah menggunakan server, sebagaimana projek kita saat ini sedang ditulis dalam folder, namanya, server.

Salah satu server yang populer untuk menjalankan GraphQL ialah Apollo. Mari kita install Apollo serta GraphQL-nya terlebih dahulu.

Silahkan buka terminal dengan lokasi di dalam folder server ini, dan jalankan perintah berikut:

Code:
npm install @apollo/server graphql

Maka, otomatis akan muncul file baru package-lock.json dan folder node_modules. Jika kita buka file package.json, seharusnya kodenya telah update menjadi seperti ini:

Code:
{

  "name": "belajar-graphql",

  "private": true,

  "type": "module",

  "dependencies": {

    "@apollo/server": "^4.11.3",

    "graphql": "^16.10.0"

  }

}

Jika instalasinya berhasil tanpa ada anu-anu, maka selanjutnya kita harus update file server.js-nya pula.

Kita butuh ApolloServer dan startStandaloneServer untuk menjalankan ini, maka kita tambahkan dua baris ini di awal file.

Code:
import { ApolloServer } from "@apollo/server";

import { startStandaloneServer } from "@apollo/server/standalone";

Lalu pada akhir file, tambahkan ini:

Code:
const server = new ApolloServer({ typeDefs, resolvers });

const { url } = await startStandaloneServer(server, { listen: { port: 9000 } });

console.log(`Server running at ${url}`);

Selengkapnya menjadi seperti ini:

Code:
import { ApolloServer } from "@apollo/server";

import { startStandaloneServer } from "@apollo/server/standalone";

const typeDefs = `

  type Query {

    greeting: String

  }

`;

const resolvers = {

  Query: {

    greeting: () => 'Hello world!'

  },

}

const server = new ApolloServer({ typeDefs, resolvers });

const { url } = await startStandaloneServer(server, { listen: { port: 9000 } });

console.log(`Server running at ${url}`);

Selanjutnya kita coba jalankan server ini dengan perintah:

Code:
node server.js

Quote:Server running at http://localhost:9000/

Demikian harusnya yang tercetak di terminal setelah menjalankan perintah sebelumnya. Jika tidak demikian, maka periksa kembali kode kamu ya.

Selanjutnya buka alamat tersebut di browser dan akan terbuka seperti ini:

[Image: image-7.png?resize=640%2C312&ssl=1]

[Image: image-7.png?resize=640%2C312&ssl=1]

Halaman di atas adalah halaman sandbox dari Apollo untuk kita dapat menuliskan query GraphQL, menjalankannya, serta melihat hasilnya.

Mari kita klik tombol dengan ikon play itu dan lihat apa yang terjadi.

---

Error dong? Iya, kan? Error?

[Image: image-9.png?resize=640%2C435&ssl=1]

[Image: image-9.png?resize=640%2C435&ssl=1]

Mengapa error?

Satu, kita tidak mendefinisikan type ExampleQuery, melainkan Query.

Dua, kita tidak memiliki field id, melainkan greeting.

So, mari ubah dua keyword tersebut dan jalankan lagi hasilnya.

[Image: image-10.png?resize=640%2C166&ssl=1]

[Image: image-10.png?resize=640%2C166&ssl=1]

Alhamdulillah muncul hasilnya.

Sekarang, mari kita coba kasus nyata sederhana.

---

Kita akan membuat kasus tentang Buku saja, sederhana.

Sesederhana kita membuat definisinya sebagai berikut:

Code:
type Buku {

  id: ID!

  judul: String!

  penulis: String!

  tahunTerbit: Int!

  genre: String

}

Nah lho, apa artinya tanda seru (!) di sana? Artinya kolom atau field tersebut harus disertakan saat klien memanggil atau server memberikan respons.

Terlihat di sana, selain field genre, seluruhnya wajib disertakan oleh client maupun server dalam request atau response-nya.

Selanjutnya kita buat Query-nya seperti ini:

Code:
type Query {

  semuaBuku: [Buku!]!

}

Maka jika diubah pada file server.js sebelumnya menjadi seperti ini:

Code:
const typeDefs = `

  type Buku {

    id: ID!

    judul: String!

    penulis: String!

    tahunTerbit: Int!

    genre: String

  }

  type Query {

    semuaBuku: [Buku!]!

  }

`;

Lalu kita ubah juga sisi resolver-nya menjadi begini:

Code:
let bukuDatabase = [

  { id: "1", judul: "Buku Satu", penulis: "Penulis A", tahunTerbit: 2024, genre: "Fiksi" },

  { id: "2", judul: "Buku Dua", penulis: "Penulis B", tahunTerbit: 2025, genre: "Non-Fiksi" },

];

const resolvers = {

  Query: {

    semuaBuku: () => bukuDatabase,

  },

};

Jika digabungkan, maka keseluruhan file server.js kali ini adalah sebagai berikut:

Code:
import { ApolloServer } from "@apollo/server";

import { startStandaloneServer } from "@apollo/server/standalone";

const typeDefs = `

  type Buku {

    id: ID!

    judul: String!

    penulis: String!

    tahunTerbit: Int!

    genre: String

  }

  type Query {

    semuaBuku: [Buku!]!

  }

`;

let bukuDatabase = [

  { id: "1", judul: "Buku Satu", penulis: "Penulis A", tahunTerbit: 2024, genre: "Fiksi" },

  { id: "2", judul: "Buku Dua", penulis: "Penulis B", tahunTerbit: 2025, genre: "Non-Fiksi" },

];

const resolvers = {

  Query: {

    semuaBuku: () => bukuDatabase,

  },

};

const server = new ApolloServer({ typeDefs, resolvers });

const { url } = await startStandaloneServer(server, { listen: { port: 9000 } });

console.log(`Server running at ${url}`);

Sekarang restart perintah node server.js di terminalnya dan refresh lagi halaman Apollo Servernya, lalu jalankan query berikut:

Code:
query  {

  semuaBuku {

    id

    judul

    penulis

    tahunTerbit

    genre

  }

}

Nah demikianlah Getting Started with GraphQL ini. Kalau diperhatikan, ini baru konsep “R” dalam “CRUD”. Juga kita baru sampai di folder server, belum ke folder client.

Apakah artikel ini harus dilanjutkan lagi? Jawab di kolom komentar ya!

Private: ElysiaJS Basic

Posted by: admin - 2 hours ago - Forum: My Forum - No Replies

Quote:Reza Nurfachmi, January 11, 2025

Basic ElysiaJS

https://www.youtube.com/watch?v=DHEflULuLJo

Router

https://www.youtube.com/watch?v=bmfUTd9_gwc

JSON Response

https://www.youtube.com/watch?v=JRcgw84m8RQ

HTML Response

https://www.youtube.com/watch?v=EkOD9shz9xU

Handling Request Body and Schema Guard

https://www.youtube.com/watch?v=c__STXlRLFs

Handling Headers

https://www.youtube.com/watch?v=IvOOtqgZuq0

Handling Query

https://www.youtube.com/watch?v=7oE6XIclA74

Handling Dynamic Route

https://www.youtube.com/watch?v=nbtPkSiH8AA

Global Hooks

https://www.youtube.com/watch?v=EAs9tcHRwqs

Local Hooks

https://www.youtube.com/watch?v=Ik-yExgNxec

Private: Bexlite Course Introduction

Posted by: admin - 2 hours ago - Forum: My Forum - No Replies

Quote:Reza Nurfachmi, January 10, 2025

Bun.js

Bun.js all-in-one toolkit, untuk menjalankan aplikasi javascript dan typescript, mulai dari single script hingga fullstack application. Bagi kamu yang pernah menggunakan nodejs, pada dasarnya bun memiliki fungsi yang sama. Yaitu untuk menjalankan javascript di luar browser.

Mungkin sampai hari ini kita belum melihat company atau startup yang mengadopsi Bun untuk production di aplikasi yang memiliki scale yang besar. Hanya saja, melihat Bunjs dan komunitasnya. Sangat tidak menutup kemungkinan Bunjs akan di adopsi di masa mendatang.

Bexlite sendiri menggunakan Bunjs karena performanya yang baik, dan yang paling penting, bunjs bisa menjalankan typescript secara native. Tanpa bantuan library apapun.

Bun sendiri sebagai package manager memiliki performa yang sangat cepat. Dalam Benchmarknya menginstall react dengan vite, bun bisa 18x lebih cepat dari yarn dan pnpm dan 30x lebih cepat daripada npm.

[Image: image-6.png?resize=640%2C234&ssl=1]

[Image: image-6.png?resize=640%2C234&ssl=1]

Kamu bisa menggunakan bun.js dengan windows, linux, wsl ataupun mac.

Kamu bisa lihat cara menginstall bun.js di sini.

ElysiaJS

ElysiaJS, sebuah framework yang di jalankan di atas bunjs runtime. Menggunakan banyak API dari bun, memanfaatkan kecepatan bun hingga bisa menghandle request hingga lebih dari 2jt request per second.

[Image: image-8.png?resize=640%2C256&ssl=1]

[Image: image-8.png?resize=640%2C256&ssl=1]

Bexlite menggunakan ElysiaJS karena kemudahan dan kecepatannya, tidak hanya dibandingkan dengan Express, atau javascript framework yang lain. Tetapi juga dengan framework dan bahasa yang lain.

Terlebih bagi pengguna typescript, Elysia memiliki type-safety secara default. Dan ini akan memudahkan kamu untuk membangun aplikasi yang safe jika di-implementasikan dengan benar.

Elysia juga memiliki beberapa fitur menarik yang bisa kita gunakan untuk membangun project dengan bexlite. Seperti CRON, Auto handling format including JSON dan FormData. Ditambah lagi dengan official plugin seperti HTML, JSX, JWT, dll, akan sangat memudahkan dalam menggunakan Bexlite.

Kamu bisa baca lebih lanjut tentang elysia di sini.

HTMX

So, pasti temen-temen sudah ga asing lagi dengan yang namanya HTMX, yang tiap hari MEMEnya melintas di timeline kita.

Tapi, apa sih sebenernya HTMX ?
Is it good ? bad ? Lalu apa bedanya HTMX dengan framework umum seperti React, Vue atau yang lain ?

Okey, mari kita kenalan dengan HTMX.

HTMX, adalah sebuah javascript frontend library yang memberikan alternative yang make sense bagi developer untuk develop web app dengan metode yang berbeda dari kebanyakan framework pada umumnya.

Javascript SPA Framework, berkomunikasi dengan REST API. Yang mana client akan melakukan request kepada server, dan server merespon dengan JSON. yang kemudian client harus menjalankan logic untuk menerjemahkan JSON kedalam bentuk UI.

HTMX, menempuh jalur yang berbeda dari kebanyakan frontend framework. HTMX menggunakan hypermedia sebagai format komunikasinya dibandingkan REST API yang berbentuk Text.

Maksudnya adalah ketika klien melakukan request kepada server, server tidak lagi memberikan response dalam bentuk JSON, tetapi dalam bentuk HTML.

Hypermedia sebagai response komunikasi server kepada client, bukanlah hal baru. Ini sebagaimana kita mengakses sebuah URL, kemudian server merespon dengan HTML yang sudah di render. Yang menjadi problem dari Hypermedia sebelumnya adalah response harus diberikan dalam bentuk keseluruhan laman.

Karena memang keterbatasan dari html yang hanya bisa melakukan request hanya dengan anchor tag dan form yang kemudian harus di reload secara keseluruhan setelah mendapatkan respons.

Dengan HTMX, melakukan http request dengan HTML tidak lagi terbatas pada anchor dan juga form. Dan juga tidak harus pada level full page, tapi pada level parsialnya.

Salah satu motivasi munculnya HTMX adalah untuk mempersimple pembuatan web application. Yaitu dengan melakukan centralisasi logic pada server. Yang mana ini sangat make sense, karena server adalah tempat dimana permanent state berada.

Ini juga yang dilakukan oleh banyak SPA framework akhir-akhir ini seperti react, nextjs yang mencoba untuk menempuh approach yang sama dengan mengenalkan React Server Component dan Server Action.

But, pertanyaannya adalah aplikasi yang bagaimana yang mungkin cocok untuk kita gunakan HTMX di dalamnya.

Sebagai jawaban dari pertanyaan ini, Saya akan berikan 2 kriteria.

Dimana developer mau meletakkan state aplikasinya ?
Dan bagaimana developer memposisikan dirinya

Mari kita bahas kriteria ini.

Yang pertama, adalah dimana state diletakkan ?

Spektrum web app ini cukup luas, tetapi kalo tarik secara horizontal. Hanya ada 2 jenis, yang fokus pada interaktivity dan fokus kepada server logic.

Kita bisa melihat aplikasi game di web yang tentu statenya akan cepat dan seringkali berubah, dan tentu saja state aplikasi lebih baik diletakkan pada client untuk efisiensi komunikasi, yang kemudian dengan interval waktu tertentu transient state ini di kirimkan ke server.

Ini sedikit berbeda dengan High Risk Application seperti Bank atau Finance App, yang state dan logicnya diletakkan di dalam server. Kenapa ? Yes, karena high risk application can’t trust the user.

Maka sekarang kita bisa tahu, jika aplikasi kita sangat memerlukan interaktivity yang terus-terusan berubah, mungkin SPA framework seperti React lebih cocok. Adapun jika aplikasinya tidak memerlukan state yang terlalu sering berubah. HTMX akan jauh lebih simple untuk digunakan.

Yang kedua, adalah bagimana developer memposisikan dirinya.

Jika kamu seorang developer entah frontend ataupun backend yang fokus dengan server-side logic, maka HTMX bisa jadi pilihan yang paling baik. Karena HTMX tidak membatasi developer pada bahasa pemrogramannya. Apapun bahasa yang kamu gunakan selama frontend menggunakan HTML, CSS dan Javascript, kamu bisa menggunakan HTMX.

Namun jika kamu seorang developer yang fokus pada client-side logic, dan fokus pada bahasa javascript, mungkin react atau nextjs menjadi pilihan yang lebih baik.

---

Penggunaan HTMX di dalam Bexlite selaras dengan tujuan awal dibuatnya Tech Stack ini yaitu Simplicity. Dengan menggunakan HTMX library, kita bisa menggunakan HTML, bahasa yang diketahui oleh semua developer untuk membuat aplikasi dengan SPA Experience tanpa harus menggunakan bloated-features framework, tanpa harus belajar lagi framework-framework baru.

Kita cukup tambahkan HTMX attribute di dalam HTML and done.

JSX

Seperti yang kita tahu, JSX adalah format umum yang digunakan di dalam frontend-framework. JSX secara khusus bukan templating Engine. Tetapi JSX kita gunakan di dalam Bexlite untuk memanfaatkan apa yang sudah kita pahami.

JSX kita gunakan di dalam Bexlite sebagai templating model. Dan memudahkan kita dalam membuat UI components. Dengan menggunakan JSX, kita bisa dengan mudah mimic React dalam membuat reusable components.

SQLite

Sqlite, the underdog database.

Sedikit hiperbola, but yes. Sqlite sepertinya yang banyak diragukan di dalam tech stack ini. Sqlite seperti menjadi database yang tidak layak untuk production. Jika kita bicara tentang model big-scale apps dengan arsitektur yang rumit, maka iya. Mungkin sqlite tidak cocok digunakan. But untuk aplikasi small-mid sqlite lebih dari cukup untuk digunakan.

Sqlite memiliki performa yang sangat cepat, embedded, dan dengan memanfaatkan teknologi embedded kamu tidak lagi perlu untuk mengalami “network io” dalam melakukan query kepada database. Silahkan baca post saya dibawah.

https://x.com/indrazulfi/status/1790286534895415804

Jika kamu merasa cocok dengan Bexlite secara umum, namun tidak cocok dengan menggunakan Sqlite, kamu bisa dengan mudah menggantikan SQLite dengan Database yang lain semisal PostgreSQL, atau Mongo. Saya tidak menyarankan kamu menggunakan ORM yang menggunakan query engine agar tidak memperparah latency seperti Prisma ORM untuk production.

Jika kamu mau menggunakan ORM, kamu bisa menggunakan Drizzle ORM atau Query builder seperti Kisely. Dengan begitu ini akan mengurangi latency query disebabkan engine ORM seperti yang dimiliki Prisma.

TursoDB

Turso DB adalah Provider Sqlite untuk production. Turso memberikan kemudahan untuk melakukan Scale dari aplikasi yang menggunakan Sqlite.

Turso juga memiliki free-tier yang super generous dibandingkan dengan provider yang lain. Turso memberikan free-tier user untuk bisa membuat hinggal 500 Database, 9GB Storage, 3 Replication untuk edge location.

Kamu akan dengan mudah melakukan scale bexlite dengan extending Sqlite yang digunakan dengan TursoDB.

Quote:

Stop Piracy

Posted by: admin - 2 hours ago - Forum: My Forum - No Replies

Quote:Reza Nurfachmi, January 8, 2025

Quote:

Saya, Reza Nurfachmi, tidak mendukung aksi pembajakan atau perjual-belian kode sumber perangkat lunak (open source software) apapun dan tidak pula menjadi salah satu pelakunya.

Pages (3): 1 2 3 Next »

Login
Username:
Password:	Lost Password?
	Remember me