Menampilkan Gambar di Web Menggunakan Delphi-Raudus

Raudus adalah semacam framework yang memungkinkan membuat aplikasi berbasis web menggunakan Delphi. Dengan banyak komponen yang tersedia di framework Raudus, kita dapat membuat aplikasi web dengan sangat mudah, dengan ‘cita rasa’ Delphi tentunya.

Pada tutorial kali ini, saya akan coba memberikan panduan bagaimana menampilkan gambar dengan ekstensi .jpg/.jpeg (atau .bmp) menggunakan komponen RaPicturePublisher. Caranya cukup mudah, tinggal siapkan gambar yang akan ditampilkan di folder ‘…/Win32/Debug’ dan dipanggil dengan function ‘LoadfromFile’ milik komponen RaPicturePublisher. Jika Anda meletakkan file gambar selain folder default di atas, Anda harus menyebutkan absolute path-nya (misal : ‘C:/program files/bla bla/dst’)

Untuk lebih jelasnya, buatlah contoh program Raudus sederhana sebagai berikut:

1. Buat project Raudus baru melalui menu File-New-Other-RaApplication.
2. Ambil komponen RaExtWindow dan RaPicturePublisher, dan atur peletakannya seperti gambar di bawah :

3. Isikan nilai properti kedua komponen tersebut di atas sebagai berikut :

4. Copy-kan file gambar (contoh) ‘dxe5.jpg’ dan ‘xe8.jpg’ ke folder [aplikasi]/Win32/debug.
5. Double click komponen RaExtFooterButton1 dan isikan source code berikut :

procedure TRaForm1.RaExtFooterButton1Click(Sender: TObject);
begin
  RaPicturePublisher1.Picture.LoadFromFile('xe8.jpg');
  RaPicturePublisher1.ContentChanged;
end;

6. Berikutnya, double click komponen RaExtFooterButton2 dan isikan source code sebagai berikut :

procedure TRaForm1.RaExtFooterButton2Click(Sender: TObject);
begin
 RaPicturePublisher1.Picture.LoadFromFile('dxe5.jpg');
 RaPicturePublisher1.ContentChanged;
end;

Jalankan program (F9), hingga muncul jendela command prompt sebagai berikut

Buka web browser Anda, dan ketik http://localhost:88. Seharusnya tampilan web browser Anda akan seperti gambar di bawah

Tekan tombol ‘XE 8’, bergantian dengan dengan tombol ‘XE 5’. Amati bahwa di kotak panel, gambar background-nya akan berubah-ubah sesuai tombol yang Anda tekan tadi.

Cukup mudah bukan, membuat aplikasi web dengan Delphi dan Raudus? Jika ingin mengetahui lebih dalam tentang Raudus ini dapat membeli buku saya di sini.

Terakhir, sebagai catatan, pada properti ‘ContentType’ milik komponen RaPicturePublisher1, dapat Anda isi sesuai dengan tipe file gambar yang dibutuhkan, misalnya jika ingin menampilkan gambar bitmap, nilai properti ini dapat Anda ganti dengan ‘image/bmp’. Selamat berkarya …

Saptaji, ST. M.Tr.T

a Technopreneur – writer – Enthusiastic about learning AI, IoT, Robotics, Raspberry Pi, Arduino, ESP8266, Delphi, Python, Javascript, PHP, etc. Founder of startup Indomaker.com