Rabu, 29 September 2021

Tabungan Siswa

Aplikasi Tabungan Siswa berbasis windows applcation, android applcation dan web aplikasi, yang dibuat dalam 4 versi dengan sistem kerja yang sama yaitu :

  1. Windows aplikasi database

    Aplikasi dan database berada pada satu perangkat. dan aplikasi hanya dapat mengakses database yang berda satu perangkat dengan aplikasi.download

  2. Android Aplikasi database

    Pada prinsipnya sama dengan Windows Aplikasi Database.download

  3. Datasnap Srver

    Aplication Client dan database dapat berada pada satu perangkat yang sama atau perangkat yang berbeda. Sebagai penghubung application client dengan database digunakan satu applcation server yang berada satu perankat dengan database, appliation sever berfungsi hanya sebagai penghubung sedangkan pengelolaan informasi data berada pada applicaton client.
    pada contoh download disini dalam bendel installer terdapat 3 application :

    • Server Application (Windows)
    • Client Application (Windows)
    • Apk Client Application (Android : Apk installer Android)

  4. Datasnap Rest Application

    Sama dengan Datasnap Server hanya saja perbedaannya Application Client berfungsi sebagai Penerima dan perberi informasi data sedangkan pengelolaan informasi data berada pada application sever.
    pada contoh download disini dalam bendel installer terdapat 4 application :

    • Server Application (Windows)
    • Client Application (Windows)
    • Apk Client Application (Android : Apk installer Android)
    • Web Client Application (Browser Internet)

Bagi yang ingin mencoba silahkan langsung download tidak perlu registrasi dan juga tidak berbayar. Untuk login Gunakan User ID Admin dengan Pasword Password, selanjut pasword dapat diganti sesuai keinginan serta dapat membuat user login sejumlah kebutuhan dan user login dibangun bertingkat dan user login utama yakni Admin memiliki level tertinggi yang dapat merubah semua user login atau mehapusnya. sedangkan user login lain yang dibuat hanya dapat melakukan hal tersebut pada user dibawahnya tidak dapat pada user yang selevel.

Semoga bermanfaat,

Selasa, 10 Agustus 2021

Delphi FireDac Tdataset Indexes, IndexDefs, IndexFileDefs

Pengurutan data (Index) yang akan dibahas ada tiga cara yaitu :

  • 👉 Indexes
  • 👉 IndexDefs
  • 👉 IndexFieldNames

✍🏻 Indexes

Pada tutorial ini digunakan TFDMemTable sebagai dataset, yng secara prinsipnya sama dengan TFDQuery. Karena untuk Demo tidak menggunakan Database. kalau mengunakan FDQuery tentu harus menggunakan database sebagai sumber data.
Catatan :
Indexes tidak akan bejalan kalau Indexes.Active dan FDMemTable1.IndexesActive tidak diatur nilainya menjadi True, serta Indexes.Name dan FDMemTable1.IndexName memiliki nilai yang berbeda atau tidak diisi alias kosong.
Untuk membuat pengurutan dari besar ke kecil atur nilai Indexes.Options menjadi [soDescending] dan untuk urut dari kecil kebesar Indexes.Options diatur menjadi []. Dan untuk menghilangkan (tidak menampilkan) Nilai Field yang sama atur Indexes.Distinct menjadi True. Isilah Nilai Indexes.Fields dengan nama field pada dataset yng kan diurutkan, dan jika ingin menfilter data isilah filter sesuai keinginan.

Pengaturan pada saat design Form : pada panel stuctur click TDataset (FDMemTable1) kemudian click kanan indexes llu click add item, selanjutnya isi data sesuai kebutuh di panal Object Inspectorat.
Penatuan saat aplikasi berjalan (Runtime) lihat contoh dibawah 👇

✍🏻 IndexDefs

Sama halya dengan Indexes namun yang diatur bukan FDMemTable1.Indexes namun FDMemTable1.IndexDefs, Indexes boleh memiliki nama yang sama dengn IndexDefs. Untuk mengatur peurutan Ascending atau Descending gunakan

  • :A Untuk pengurutandari kecil kebesar (Ascending)
  • :D Untuk pengurutandari besar kekecil (Descending)
  • :N Untuk penurutan tidak sensitif (tidak membedakan huruf besar atau kecif)
dengan cara penulisan NamaFiledDataset + Titik dua + A/D/N, untuk Ascending juga dapat dikosongkan. untuk pengurun multi Field tambahkan titik koma ";" diantara field. Pengaturan saat design form Click FDMemTable1 pada object inspectorat bisa diisi langsung di IndexDefs namun untuk kehati-hatian click tanda elips kemudian pada daftar pilih dan pindahkan field yang akan diurutkan sesuai tingkat peurutan, kemudian click oke lalu :A/:D/:N sesuai ketentuan penulisan. Nama jangan lupa diisi karena Indexes dan IndexDefs pnentuan mana yang beralan beasarkan IndexName jadi bisa tadak jalan kalau salah.
Pengaturan saat aplikasi berjalan (Runtime) lihat contoh diawah 👇

✍🏻 IndexFieldNames

FDMemTable1.IndexName dengan FDMemTable1.IndexFieldNames akan saling menghpus satu sama lainnya artinya ketika FDMemTable1.IndexFieldNames diisi maka otomatis FDMemTable1.IndexName akan kosong atau sebaliknya. Pengaturan IndexFieldNames sama dengan IndexDefs hanya saa pada IndexFieldNames tidak diperlukan pengaturan nama index. dan secara runtime bis dilihat dibawah 👇

Baca :

Download di sini

Semoga bermanfaat,

FDMemTable, Indexes/Sort, Aggregates, Calculate, Grouping dan Filter

Cara membuat field pasa tabel FDMemTble jika dilakukn saat mendesain aplikasi bisa dengan cara click kanan pada FDMemtable yang berada pada form desain. Kemudian pilih Fields Editor lalu pada form FDMemtable click knan lagi lalu pilih New Field atau tekan Ctrl + N. Pada Field Property isi Name, Type dan size sesuai kebutuhan, pda field Type pilih data lalu Click Ok.

Secara runtime atau pada saat aplikasi berjalan bisa menggunkan cara sperti dibawa :untuk typedta Integer (ftInteger) autonumber (ftAutoInc) nilai size diatur 0, sedangkan untuk typedata String (ftString) tidak boleh 0.
atau dapat juga dengan car dibawah :Selain pengaturan standar seperti contoh diatas Tampilan Caption pada Title Grid (DisplayLabel), format tampilanangka (DisplayFormat), rata kiri, kanan atau tengah (Alignment) danlain sebgainya juga dapat diatur. kalau pengaturan saat design application bisa diatur di Object Inspectorat

Untuk menmbahkan (Append) mengedit (Update) atau menghapus (delete) record pada FDMemtable, FDMemtable harus dalam keadan Active atau Open. Untuk menambah record bisa dengn cara seperti dibawah :atau dengan cara seperti ini :

Baca :

Semoga bermanfaat,

Sabtu, 06 Maret 2021

How To Change Default Font Firemonkey (FMX)

Bagaimana cara merubah ukuran Font pada Firemonkey (FMX) Multi Device Application ?

Secra default font size 12 dan font familly Segoe UI. kita dapat merubahnya dengan cara :
  1. Langsung : TextSettings --> Font --> Size => 16
  2. Seara runtime : Label1.Font.Size := 16 ; Label1.StyledSettings := Label1.StyledSettings - [TStyledSetting.Size] ;
    atau : Label1.Font.Size := 16 ; Label1.StyledSettings := [] ;
kedua cara ini harus dilakukan pada setiap komponen dan ada kendala pada contoh ComboBox tidak ada pengaturan textsettings. Nah bagaimana kendala ini dapat teratasi dan satu kali pengatuan berlaku untuk semua :
  1. Melalui pengturn pada styled dan menggunakan stylebook untuk menampilkannya
  2. yang kedua lihat function pada souce code dibawah ini
Dan hasilnya sepeti ini
Untuk Contoh Aplikasinya download disini

Semoga bermanfaat,

Sabtu, 20 Februari 2021

Navigator Datasource

Lanjutkn contoh database ini dengan menambahkan 1 Layout, 5 CornerButton, 1 Label, 1 Edit, 1 ComboBox, 1 Grid, LinkGridToDataSource. CornerButton, Label, Edit, ComboBox berda dibawah hirarki layout.
Caranya setelah mengatur layout1 pada panel tools plate pilh CornerButton lalu click layout1 yang berada di form1. Lakukan cara yang sama untuk semua komponen yang ditambahkan keculi Grid, lalu atur properti masing-masing komponent sebagai beikut:

Buat procedure StausNavigator ;

Buat procedure Grid2Click(Sender: TObject);

Buat procedure BtnNavigatorClick(Sender: TObject);

Rubah procedure FormCreate(Sender: TObject); Sehingga menjadi sepeti dibawah ini

Rubah procedure HubunganKmponenToDB; Sehingga menjadi sepeti dibawah ini

Tambahkan Uses system.StrUtils ; tepat dibawah implementation

Semoga bermanfaat,

Jumat, 19 Februari 2021

LiveBindings Component To Datasource

Pada database yang sudah kia buat tambahkan 2 ComboBox, 1 ComboEdit, 1 Edit, 1 Label , 1 FDQuery dan atur properti sebagai berikut :

Atur Relasi seperti terlihat pada gambar

Secara runtime tambahkan 1 BindSourceDB, 1 LinkPropertyToFieldText, 1 LinkControlToField, 1 LinkFillControlToField, 1 LinkListControlToField, 1 LinkPropertyToFieldIndex. kemudian buat procedure HubunganKmponenToDB; Serta tambahkan procedure ke procedure FormCreate.

Semoga bermanfaat,

TWebpImage Delphi VCL

Menampilkan gambar Webp pada Form VCL Delphi TWebpImage pada unit Vcl.WebpImage.pas serta merubah gambar Jpg, Bmp dan Png ke Webp atau sebaliknya (converter Webp).

Untuk melakukan semua itu selain unit yang ada kita butuh file Libwebp.dll tentu saja harus yng sesuai dengan bit versi aplikasi yang kita buat. contoh kasus saya membuat aplikasi dengan sistem windows 32 bit, dengan Delphi VCL XE8 pada windows 10 64 bit yang nantinya aplikasi yang saya buat dapat berjalan di Windows 32 bit atau 64 bit. Yang saya butuhkan adalah Libwebp.dll 32 bit.

Libwebp.dll ini dapat kita taruh didirectori system windows atau berada dalam satu folder dengan file exe aplikasi. Registrasi dll tidak begitu dibutuhkan. contoh aplikasi bisa download disini juga sudah terdapat Libwebp.dll, alias tinggal dijalankan saja.

selain libwebp untuk dalam membangun aplikasi kita butuh 3 unit yaitu :

  1. libwebp.pas
  2. Vcl.WebpImage.pas
  3. WebpHelpers.pas

Semoga bermanfaat,

Kamis, 18 Februari 2021

Delphi XE6 TListView Multi Detail ItemAppearance

Hemmm .... langsung saja
Membuat tampilan ListView dengan multi detail (FMX ListView MultiDetailAppearanceU ) secara runtime dengan Delphi XE8 FMX Form.

  ....
var
  ....
  ListView1: TListview ;
  LinkListControlToField1 : TLinkListControlToField ;

implementation

uses
MultiDetailAppearanceU ;

{$R *.fmx}

procedure TForm1.FormCreate(Sender: TObject);
begin
  ListView1 := TListView.Create(Form1) ;
  with ListView1 do begin
    Parent := Form1 ;
    Align := TAlignLayout.Left ;
    Margins.Top := 8 ;
    Margins.Left := 8 ;
    Margins.Right := 8 ;
    Margins.Bottom := 8 ;
    Size.Width := 250 ;
    AlternatingColors := True ;
    ItemAppearanceName := 'MultiDetailItem' ;
    ItemEditAppearanceName := 'MultiDetailItem' ;
  end;

  LinkListControlToField1 := TLinkListControlToField.Create(Form1) ;
  with LinkListControlToField1 do begin
    DataSource := BindSourceDB1 ;
    Control := ListView1 ;
    FillExpressions.Add ;
    FillExpressions[0].ControlMemberName := 'Detail1' ;
    FillExpressions[0].SourceMemberName := 'Detail1' ;
    FillExpressions.Add ;
    FillExpressions[1].ControlMemberName := 'Detail2' ;
    FillExpressions[1].SourceMemberName := 'Detail2' ;
    FillExpressions.Add ;
    FillExpressions[2].ControlMemberName := 'Detail3' ;
    FillExpressions[2].SourceMemberName := 'Detail3' ;
    FillExpressions.Add ;
    FillExpressions[3].ControlMemberName := 'Text' ;
    FillExpressions[3].SourceMemberName := 'Items' ;
  end;
end;

Semoga bermanfaat,

Rabu, 17 Februari 2021

FMX Slide TabControl

File > New > Multi Device Application - Delphi > Blank Aplication Click Ok,
lalu pada Tool Palette cari TabConntrol lalu tmbkan ke Form1. Atur Align dari TabControl1 menjadi Client. Kemudian tambahkan TabItem degan cara click kanan TabControl1 lalu click Add TTabItem lakukan beberapakai. Kemudian tambahka ke form1 ActnList dan GestureManager, sama caraya seperti menambahkan TabControl.

Dowble click ActionList1 kemudian click Ctrl + Insert atau click New Standard action, lalu pilih Tab > TChangeTabActio, sebanyak 2. Tutup editting Form action.

Pada panel Structur click TaControl1 keudian pada pael Object Inspector click Touch > GestureManager pilih GestureManager1, dan Gestures > Standard > Left beri tanda checklist pilih action ChangeTabAction1, dan Rightt juga diberi tanda checklist pilih action ChangeTabAction2.
Buat procedure ChangeTabActionUpdate(Sender: TObject);

procedure TForm1.ChangeTabActionUpdate(Sender: TObject);
begin
  if
TabControl1.TabIndex < TabControl1.TabCount -1 then
    ChangeTabAction2.Tab := TabControl1.Tabs[TabControl1.TabIndex + 1]
  else ChangeTabAction2.Tab := nil;

  if TabControl1.TabIndex > 0 then
    ChangeTabAction1.Tab := TabControl1.Tabs[TabControl1.TabIndex - 1]
  else ChangeTabAction1.Tab := nil;
end;

Buat procedure FormKeyUp(Sender: TObject; var Key: Word; var KeyChar: Char; Shift: TShiftState);

procedure TForm1.FormKeyUp(Sender: TObject; var Key: Word; var KeyChar: Char; Shift: TShiftState);
begin
  if
Key = vkHardwareBack then begin
    if
TabControl1.TabIndex > 0 then begin
      TabControl1.TabIndex := TabControl1.TabIndex - 1 mod TabControl1.TabCount;
      Key := 0;
    end;
  end;
end;

Selautnya buat procedure FormCreate(Sender: TObject);

procedure TFormm1.FormCreate(Sender: TObject);
begin
  TabControl1.ActiveTab := TabItem1;
  TabControl1.TabPosition := TTabPosition.None ;
  ChangeTabAction1.OnUpdate := ChangeTabActionUpdate;
  ChangeTabAction1.Tab := nil;
  ChangeTabAction2.OnUpdate := ChangeTabActionUpdate;
  ChangeTabAction2.Tab := TabControl1.Tabs[TabControl1.TabIndex + 1] ;
end;

  ....
uses
  ....,
  FMX.TabControl,
  System.Actions, FMX.ActnList,
  FMX.Gestures,
  .... ;
type
  TFormm1 = class(TForm)
    TabControl1: TTabControl;
    TabItem1: TTabItem;
    TabItem2: TTabItem;
    TabItem3: TTabItem;
    TabItem4: TTabItem;
    ActionList1: TActionList;
    GestureManager1: TGestureManager;
    ChangeTabAction1: TChangeTabAction;
    ChangeTabAction2: TChangeTabAction;
    procedure ChangeTabActionUpdate(Sender: TObject);
    procedure FormKeyUp(Sender: TObject; var Key: Word; var KeyChar: Char; Shift: TShiftState);
    procedure FormCreate(Sender: TObject);

Semoga bermanfaat,

Delphi FMX TGrid, DataSet, Database dan FireDac

Sebagai contoh kita gunakan apliksi yang sudah kita buat disini. Lalu Tambahkan 1 FDQuery lagi dan 1 Grid. dowble click FDConnection1 pada form Firedac Connection Editor pastikan Driver ID sudah terisi dengn SQLite dan pada database click icon folder dan dan cari file TestDBSQLite.s3db, jika tidak terliat rubah filter menjadi all file akhiri dengan click open > OK

Selajunya atur properti sebgai berikut:
  FDConnection1 > Connected => True
  FDQuery2 > Connection => FDConnection1
  FDQuery2 > SQL, click tanda elip lalu pada form yang tmpil ketika SELECT * FROM Table1 lalu click OK.
  FDQuery2 > Active => True
  Grid1 > Position > X => 8
  Grid1 > Position > Y => 216
  Grid1 > ReadOnly => True
  Grid1 > Size > Height => 193
  Grid1 > Size > Width => 372

Selajutnya click Bind Visually yang berada dibawah Object Inspetor atau Click kanan Grid1 (seperti terlihat pada gambar) lalu pada form livebindings designer yang tampil Clck dan tahan Grid1 lalu arahkan ke FDQuery2 lalu lepaskan.

sampai disini sudah selesai menampilkan database ke Grid (Table View).
Nah, sekarang bagaimana cara melakukannya secara runtime ?
Lihat ini, ada penambahan 1 BindSourceDB, 1 LinkGridToDataSource dan penambahan procedure BuatTable ; serta peruahan procedure FormCreate(Sender: TObject); dan procedure Button5Click(Sender: TObject);

Semoga bermanfaat,

Aplikasi Database dengan Delphi FMX

Setelah kita paham bagaimana membuat dan meubungkan Database SQLite dengan aplikasi sekarang kita mengentri dan mengelola datanya. Pertama buat dahulu aplkasi sederhana dengan meempatkan FDPhysSQLiteDriverLink, FDGUIxWaitCursor, FDConnction, FDQuery dan beberapa komponen ke Form diantaranya 3 label, 1 Edit, 1 DateEdit, 1 ComboEdit, 1 ComboBox dan 6 Button, dengan properti masing-masing diatur sebagai berikut.caranya baca disini

Pada ComboBox1 untuk menambahkan Items (pilihan) click tanda elip kemudian pada form yang tampil ketikan pilhannya dan disetiap satu pilihan untuk turun kebawah tekan enter. contoh laki-laki (enter) Perempuan. Setelah selesai click Ok.

Buat procedure Button1Click(Sender: TObject);

Buat procedure Button2Click(Sender: TObject);

Buat procedure Button3Click(Sender: TObject);

Buat procedure Button4Click(Sender: TObject);

Buat procedure Button5Click(Sender: TObject);

Buat procedure Button6Click(Sender: TObject);

Buat procedure FormCreate(Sender: TObject);

DateToStr => untk merubah sistem tanggal menjadi Text
StrToDate => untk merubah Text menjadi sistem tanggal
IntToStr => untk merubah sistem angka menjadi Text
StrToInt => untk merubah Text menjadi Angka. akan terjadi kesalahan text yang akan dirubah ada satu karakter saja bukan angka atau tidak ada karakter yang dirubah.
StrToIntDef => merubah text menjadi angka dan jika terjadi kesalahan maka hsilnya adalah angka default yang ditetapkan.

Pada kesempatan selanjutnya kita akan lihat bagaimana cara meampilkan data dari database pada tampilan table disini.

Semoga bermanfaat,

Selasa, 16 Februari 2021

SQLite, Firedac Delphi FMX Windows

File > New > Multi Device Application - Delphi > Blank Aplication Click Ok,
lalu pada Tool Palette cari dan tambahkan ke form1 :

  1. FDPhysSQLiteDriverLink
  2. FDGUIxWaitCursor
  3. FDConnction
  4. FDQuery

Atur properti dai FDConnection1 dengan cara pada panel Structure Click FDConnection1 kemudian pada oject inspector atur properti FDConection1 sebagai berikut :

  • DriverName => SQLite
  • LoginPrompt => False
  • Params > Database => TestDBSQLite.s3db

Setelah itu baru atur proprti FDConnectio1 Conected => True. Nah ketika aplikasi dijalankan kita akan melihat pada foldr exe aplikasi aka ada file bau TestDBSQLite berextention s3db.
Jika seelumnya sudah ada database SQLite maka properti params > databasse dari FConection1 diisi dengan alamat dataase umpama database berada di diDrive D folder My Database subfolder SQLite dengan nama DB1.s3db maka params > databasse => D:\My Database\SQLite\DB1.s3db. Cara yan sama juga datapat dilakuka walau database SQLit belum ada namu kita ingin menempatka database pada directory tertentu.
atur properti FQuery1 > Connection => FDConnection1.
Sekaran database suah ada namun masih kosog atau elu ada tablenya.
bagaimaa cara menamaka table ?

Tambahkan event AfterConnect pada FConection11 isi degan ;

procedure TForm1.FDConnection1AfterConnect(Sender: TObject);
begin

  FDConnection1.ExecSQL('CREATE TABLE IF NOT EXISTS Table1 (T_ID Integer PRIMARY KEY AUTOINCREMENT, T_Nama VarChar(75), T_TglLahir VarChar(10), T_Gender Integer)') ;
end;

Atau degan cara kedua

procedure TForm1.FDConnection1AfterConnect(Sender: TObject);
begin

  FDQuery1.ExecSQL('CREATE TABLE IF NOT EXISTS Table1 (T_ID Integer PRIMARY KEY AUTOINCREMENT, T_Nama VarChar(75), T_TglLahir VarChar(10), T_Gender Integer)') ;
end;

Atau degan cara ketiga

procedure TForm1.FDConnection1AfterConnect(Sender: TObject);
begin

  FDQuery1.SQL.Clear ;
  FDQuery1.SQL.Text := 'CREATE TABLE IF NOT EXISTS Table1 (T_ID Integer PRIMARY KEY AUTOINCREMENT, T_Nama VarChar(75), T_TglLahir VarChar(10), T_Gender Integer)' ;
  FDQuery1.ExecSQL ;
end;

Untuk mehapus table

procedure TForm1.FDConnection1AfterConnect(Sender: TObject);
begin

  FDQuery1.ExecSQL('DROP TABLE IF EXISTS Table1') ;
end;

Koneksi Database SQLite dega iredac seara Run Time. Buat procedure FormCreate(Sender: TObject);

procedure TForm1.FormCreate(Sender: TObject);
begin

  with FDConnection1 do begin
    Loginprompt := False ;
    Drivername := 'SQLite' ;
    FDConnection1.Params.Values['Database'] := 'TestDBSQLite.s3db' ;
    Connected := True ;
  end;
end;

Untuk menguji kita coba buat aplikasi sederhana baca disini.

Jika belum tau cara install SQLite baca disini.

Semoga bermanfaat,

Cara megunakan System Database SQLite

SQLite salah satu System databae yang kecil dan mudah digunakan. Sehagian Application Android dianun juga meguakan database SQQLite.
Nah bagaimana cara memasang dan meguakanya ?
Gampag sob. Pertama download dulu file dll SQLite (disini) ya sesuai PC kita. Setelah download selesai extract mengunakan kemudian copy dan paste dll tersebut difolder exe aplkasi berada, atau copykan ke folder system windows

Selesai. System Database SQLite siap diguakan.

bagaimana cara membangun database dan konneksi ke aplikasi baca disini

Semoga bermanfaat,

Baru Tayang