Delphi Guru

Setelah mempelajari state, conditional rendering, dan list rendering , sekarang kita masuk ke bagian penting lain dari React: Bagaimana cara menangani event (klik, input, submit) dan bagaimana mengontrol data dalam form melalui konsep Controlled Components . Dua konsep ini adalah fondasi untuk membuat form, search bar, login form, dan hampir semua interaksi user. 🎯 Apa yang Akan Kamu Pelajari? Cara menangani event di React Perbedaan event handler React vs JavaScript biasa Apa itu Controlled Component Cara membuat input yang selalu sinkron dengan state Form handling lengkap (input, textarea, select) Contoh aplikasi: Form Login sederhana 🟦 1. Handling Events di React React menggunakan event handler yang mirip seperti JavaScript, tetapi ada beberapa perbedaan: ✔ Penamaan event menggunakan camelCase HTML biasa: < button onclick = "handleClick()" >Klik </ button > React: <button onClick={handleClick}> Klik </button> ✔ ...

Pada artikel sebelumnya , kita sudah membahas tentang State dan bagaimana ia mengubah tampilan UI secara dinamis. Sekarang saatnya mempelajari dua konsep penting dalam React yang akan sangat sering digunakan di proyek nyata: Conditional Rendering dan List Rendering . Keduanya sangat erat kaitannya dengan bagaimana React menampilkan UI secara dinamis bergantung pada data atau kondisi tertentu. 🎯 Apa yang Akan Kita Pelajari? Apa itu Conditional Rendering Cara membuat kondisi dengan if , && , dan ternary ?: Apa itu List Rendering Menggunakan .map() untuk merender daftar Menangani key agar tidak muncul error Contoh praktik: To-Do list sederhana 🟦 1. Apa Itu Conditional Rendering? Conditional Rendering adalah teknik untuk menampilkan komponen/tampilan berdasarkan kondisi tertentu . Analogi sederhana: Jika user sudah login → tampilkan Dashboard Jika belum login → tampilkan tombol Login React tidak memiliki sintaks khusus untuk ini, cukup meng...

Pada artikel sebelumnya saya sudah belajar membuat project React, memahami JSX, component, dan props. Pada tahap itu, UI masih bersifat statis . Mulai artikel ini, React akan terasa semakin menarik karena saya mulai belajar bagian penting yang membuat UI menjadi dinamis : State & Event Handling . 1. Apa Itu State dalam React? State adalah data internal yang disimpan oleh sebuah component. Berbeda dengan props yang dikirim dari luar, state dikelola di dalam component dan dapat berubah seiring interaksi. Ketika state berubah → React otomatis me-render ulang tampilan terkait. React menyediakan hook bernama useState untuk membuat state. Contoh dasar: import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Tambah</button> </div> ); } export default Counter; Penjelasan singkat: co...

Pada artikel ini saya langsung memadukan dua hal penting dalam belajar React: Setup project React menggunakan Vite Belajar konsep fundamental React: JSX, Component, dan Props Tujuannya sederhana: belajar konsep sambil langsung praktik . 1. Instalasi React Menggunakan Vite Vite adalah tool modern dan sangat cepat untuk membuat project React. Langkah-langkahnya: 1) Persiapan Awal Pastikan Node.js sudah terinstal. Periksa dengan perintah: node -v  Pastikan versi Node 20.19.x atau lebih baru. Jika belum ada atau masih versi lama silakan download Node.js terbaru (LTS) di website resmi: https://nodejs.org  Atau pilih versi: Node 20.19.x atau lebih baru Atau Node 22.x 2) Membuat Project Baru Jalankan perintah berikut di terminal: npm create vite@latest react-belajar --template react 3) Masuk ke folder project & install dependencies cd react-belajar npm install 4) Jalankan project npm run dev Jika berhasil, Anda akan melihat halaman React default di br...

Kenapa Saya Belajar React React adalah salah satu library JavaScript paling populer untuk membangun antarmuka pengguna modern. Banyak perusahaan besar menggunakannya, komunitasnya kuat, dokumentasinya lengkap, dan peluang kerja di bidang Front-End yang menggunakan React sangat luas. Saya memutuskan untuk belajar React dari dasar, benar-benar dari level pemula, dengan tujuan: Memahami konsep fundamental React, bukan hanya menghafal syntax. Membangun aplikasi nyata menggunakan React. Mendokumentasikan proses belajar saya agar bermanfaat bagi orang lain. Menjadikan tulisan ini sebagai arsip pribadi untuk bahan evaluasi dan pengingat. Cara Saya Belajar React Saya mengikuti pendekatan belajar bertahap, berbasis praktik, dan berorientasi pada pemahaman konsep. Setiap topik yang saya pelajari akan saya dokumentasikan di blog ini lengkap dengan contoh kode, catatan kesalahan, dan hal-hal yang saya pelajari. Setiap artikel akan terdiri dari: Topik yang dipelajari Kenapa topik tersebut penting P...

Kita menegenal beberapa sistem bilangan. Untuk ilmu komputer, ada dua sistem bilangan yang sering dipakai yaitu Biner dan HexaDecimal. Komputer bekerja dengan sistem bilangan biner yang terdiri angka 0 dan 1. Sedangkan Hexadecimal biasanya dipakai untuk merepresentasikan alamat memori. Delphi begitu banyak function untuk mengkonversi integer dan decimal ke nilai string. Demikian juga sebaliknya. Lalu apa hubungannya string dengan biner? Untuk merepresentasikan bilangan pada sistem biner dan hexadecimal kita menggunakan string, mis '111' pada sistem biner untuk merepresentasikan angka 7 pada sistem decimal. 1. Konversi Integer Ke HexaDecimal Dan Sebaliknya Untuk mengkonversi integer ke hexadecimal kita bisa menggunakan function IntToHex. Function ini bisa anda lihat di unit sysutils. Cara penggunaannya silahkan perhatikan baris kode berikut ini : procedure TfrmKonversiBilangan.btnKonversiIntHexClick(Sender: TObject); var iInteger: Integer; sHexa: string; begin i...

Menyimpan konfigurasi aplikasi bisa kita lakukan dengan menggunakan file dot ini. Selain dengan menggunakan file ini, kita juga bisa menyimpan konfigurasi aplikasi menggunakan registry. Pada tutorial ini, saya akan menjelaskan bagaimana cara menulis dan membaca registry. Untuk membaca dan menulis registry, kita bisa menggunakan kelas TRegistry. Kelas ini ada di unit Registry. Jadi kita harus menuliskan nama unit registry di bagian uses. A. Menulis Registry Pada tutorial ini, data yang akan kita simpan ke registry nantinya akan terletak pada : "HKEY_CURRENT_USER\Software\Nama Aplikasi" . Perhatiakan method TulisRegistry di bawah ini procedure TfrmMain.TulisRegistry(AName, AValue: String); var Reg : TRegistry; appName : String; begin Reg := TRegistry.Create; appName := Application.Title; try Reg.RootKey := HKEY_CURRENT_USER; if Reg.OpenKey('\Software\' + appName , True) then begin Reg.WriteString(AName, AValue); Reg.CloseKey...

Fast report merupakan salah satu reporting tool yang banyak dipakai oleh para developer delphi. Fast Reprt menyediakan built-in function yang sangat memudahkan kita dalam membuat sebuah laporan. Namun adakalanya kita membutuhkan function/procedure yang tidak ada pada built-in function bawaan fast report. Oleh karena itu kita harus menambahkan sendiri. Untuk menambahkan function pada fast report kita perlu membuat kelas yang diturunkan dari TfsRTTIModule. Lebih jelasnya lihat baris kode berikut ini : unit uTSFastReportFunction; interface uses SysUtils, Classes, fs_iinterpreter, Forms; type TTSFastReportFunction = class(TfsRTTIModule) private function CallMethod(Instance: TObject; ClassType: TClass; const MethodName: String; var Params: Variant): Variant; public constructor Create(AScript: TfsScript); override; function Quot(AString : String): String; end; const _Kategori : string = 'My Functions'...

Combobox tidak hanya menyediakan fasilitas untuk menampung string saja. Kita bisa menambahkan object ke dalam combobox. Dengan fasilitas ini kita akan mendapat kan banyak manfaatnya. Mis : Kita menyediakan data cabang dalam combobox. Ketika kita akan menyimpan transaksi yang menggunakan data cabang tersebut, tentunya kita membutuhkan ID atau kode dari cabang yng terpilih. Dengan kemampuan bisa menampung object, kita tidak perlu query lagi ke database guna mendapatkan ID/Kode cabang yang terpilih. Kita tinggal ambil object dari cabang yang terpilih, lalu ambil kode atau ID nya. Untuk memasukkan object kedalam combobox, ikuti langkah - langkah berikut ini : TComboObject = class(TComponent) private FData1: string; FData2: string; FID: Integer; public property Data1: string read FData1 write FData1; property Data2: string read FData2 write FData2; property ID: Integer read FID write FID; end; Kelas TComboObject ini saya turunkan dari TComponent....

Dear Delphiers, salah satu tolok ukur produktivitas seorang programmer bisa diukur dengan berapa baris kode bisa dia hasilkan dalam sehari. Walaupun hal ini tidak bisa menjadi acuan utama untuk mengukur produktivitas seorang programmer. Tapi hal ini merupakan parameter yang paling mudah diukur. Jadi tida heran kalau dalam wawancara pekerjaan calon programmer sering ditanya pernah mengerjakan proyek dengan berapa baris kode. Delphi, dengan segala kelebihnannya menyediakan satu tool untuk mempercepat penulisan source code . Tool ini yaitu Codes Template . Dengan tool kita bisa membuat template untuk kode-kode program yang sering kita gunakan. Kita bisa memanggil template dengan menuliskan dua atau tiga huruf pertama dari nama template kemudian diikuti dengan menekan kombinasi tombol Ctrl+J . Perhatikan studi kasus di bawah ini :  Saya, ketika melakukan proses edit data selalu memanggil form look up data. Dari form tersebut saya pilih data yang akan saya edit. Setelah mendap...