Home » Delphi, Free Downloads, Sample Apps, Technology, Tips & Tricks, Uncategorized » Creating Web-Based Application Using UniGUI, With Ajax Support

Creating Web-Based Application Using UniGUI, With Ajax Support

November 25, 2011

Posted by Joko Rivai under Delphi, Free Downloads, Sample Apps, Technology, Tips & Tricks, Uncategorized

30 Comments

Tulisan ini cukup panjang dan telah dibagi dalam beberapa halaman.

Setting Up Full Page User Interface

Terimakasih, Anda masih setia mengikuti tulisan saya. Seperti yang saya janjikan di halaman sebelumnya, di sini kita akan membuat aplikasi dengan konsep MDI, di mana sebuah form utama berperan sebagai index page atau main page, sedangkan form-form lain berperan sebagai child form.

Sebagai awal, kita perlu mengubah tampilan aplikasi Hello World kita. Klik ServerModule. Bila yang tampil adalah code-view, ubahlah ke design-view dengan menekan F12. Di Object Inspector, cari property MainFormDisplayMode. Ubah nilainya dari mfWindow ke mfPage. Save project Anda.

Dengan lengkah di atas, kita dapat melihat form utama aplikasi kita sudah menjadi halaman index (index pagi), seperti MDI Form. Jalankan aplikasi dan lihatlah di browser. Form utama tidak lagi tampil, tapi berganti menjadi sebuah halaman web biasa.

Selanjutnya, tutup aplikasi. Kita akan melanjutkan dengan menambahkan main menu dan toolbar ke aplikasi kita. Di sini kita akan lihat bagaimana menggunakan menu, toolbar, statusbar dan imagelist.

Perbesar sedikit ukuran Main Form. Ini tidak berpengaruh pada tampilan di browser nanti. Hanya mempermudah kita meletakkan kontrol di form saja.

Dari Component Palette, tab uniGUI Standard, tambahkan dua komponen ke form TUniToolBar dan TUniStatusBar.

Tambahkan juga TUniMainMenu:

Klik pada UniToolBar1, di Object Inspector, ubah property ShowCaptions ke True. Ini maksudnya agar tombol-tombol yang dibuat ditampilkan Caption-nya di browser. Bila di set ke False, hanya button dan glyph/icon saja (bila ada) yang ditampilkan. Klik kanan lagi pada UniToolBar1, klik New Button. Lakukan beberapa kali untuk membuat beberapa button pada tool bar. Perhatikan gambar berikut:

Memindahkan Event Handler

Kita akan menuliskan event handler ke UniToolButton1 dan UniToolButton2 untuk menggantikan UniButton1 dan UniButton2. Caranya, klik ganda pada UniButton1, dan cut kode dalam prosedurnya. Klik Save. Otomatis prosedur yang kosong tadi akan dibuang. Kini klik ganda pada UniToolButton1 dan paste kode hasil cut dari event handler UniButton1 tadi, sehingga menjadi:

procedure TMainForm.UniToolButton1Click(Sender: TObject);
begin
   MessageDlg('Hello, World!', mtInformation, [mbOK]);
end;

Kini buanglah isi dari event handler UniButton2. Klik Save. Kemudian klik ganda pada pada UniToolButton2 dan isikan kode seperti berikut:

procedure TMainForm.UniToolButton2Click(Sender: TObject);
begin
   UniToolButton2.Caption:= 'Hello, World...!';
end;

Kode terakhir di atas akan mengubah caption dari UniToolButton2 menjadi Hello, World…!.

Kini saatnya menggunakan TUniMainMenu. Kita akan menggunakan juga ImageList. Dari Component Palette, tab Win32, tambahkan TImageList ke form.

Menggunakan ImageList

Klik kanan pada ImageList1 yang baru dibuat di form, klik ImageList Editor.

Pada dialog ImageList, klik Add dan tambahkan beberapa gambar (glyph atau ikon) berukuran 16 x 16 pixel. Bila Anda belum memiliki koleksi gambar (ikon dan glyph) yang bagus, Anda bisa mendownloadnya di sini: Windows 7 Icons Collection. Tersedia 3.846 ikon dan glyph di sana untuk Anda download!

Kembali ke ImageList Editor, bila sudah selesai menambahkan beberapa ikon/glyph, klik OK. Sebagai perbandingan, berikut gambar ImageList Editor di layar saya sebelum saya klik OK.

Untuk menggunakan ImageList ini, kita harus menyambungkannya ke komponen lain yang memerlukan. Kita mulai dari UniToolBar1. Klik pada UniToolBar1, dan dari Object Inspector, set property Images ke ImageList1. Perhatikan gambar berikut jika Anda kurang yakin:

Lakukan hal yang sama pada UniMainMenu1. Gambar-gambar dalam ImageList inilah yang akan kita tampilkan sebagai gambar pada button dan menu.

Menggunakan ImageList Pada Toolbar Button

Klik UniToolButton1 dan set property ImageIndex sesuai dengan kesukaan Anda. Lihat gambar berikut sebagai perbandingan:

Bila Anda mendapatkan sebagian gambar atau teks caption tertutup seperti ini,

Ubahlah tinggi (height) UniToolBar1 agar keseluruhan gambar dan teks caption tampil sempurna. Saya memberi nilai 36px untuk tinggi/height, dan button pun tampil dengan baik.

Lakukan pengaturan ImageIndex di atas ke semua UniToolButton yang ingin Anda beri gambar.

Menggunakan ImageList Pada Menu

Pastikan Anda sudah mengatur property Images pada UniMainMenu1 ke ImageList1. Bila tidak, langkah ini tidak akan berhasil. Klik kanan pada UniMainMenu1, dan klik Menu Designer untuk menampilkan Menu Designer.

Buatlah beberapa menu sebagaimana Anda membuatnya di aplikasi desktop. Berikut punya saya:

Kini klik pada item menu pertama (pada punya saya, namanya Application, lihat contoh gambar saya di atas). Atur property ImageIndex sesuai yang Anda suka. Caranya sama dengan mengatur ImageIndex pada UniToolButton di atas. Lakukan ke beberapa item menu/sub item menu sesuai yang Anda sukai. Bila sudah, klik Save untuk menyimpan hasil kerja Anda.

Kini jalankan aplikasi (F9) dan tunggu sampai benar-benar sudah jalan. Lihat di browser. Tampilan di browser saya sendiri seperti gambar berikut:

Bila Anda mendapati teks caption pada UniToolButton tidak muncul seperti punya saya di atas, berarti ukuran UniToolBar1 kurang tinggi (seharusnya pas, namun kadang-kadang tidak sesuai tampilannya di browser). Ubahlah lagi tinggi(height)nya agar sesuai. Biarkan saja bila melebihi beberapa pixel. Saya sendiri sengaja membiarkannya lebih beberapa pixel agar aman. Lihat bagaimana saya mengubahnya:

Mengatur Status Bar

Kita beralih ke UniStatusBar1. Klik pada UniStatusBar1. Cari prperty Panels dan klik tombol elipsis di sisi kanannya.

Di jendela Panels Editor, klik kanan dan klik Add untuk menambah panel baru. Bisa juga dilakukan dengan menekan tombol insert (Ins) pada keyboard Anda. Atau bisa juga dengan mengklik ikon berikut

pada jendela tersebut.

Nah, di panel yang baru dibuat, ubahlah property Text-nya menjadi Hello World. Buatlah beberapa panel dan aturlah Text serta Width-nya agar sesuai. Berikut punya saya:

Bila Anda sudah selesai. Klik Save untuk menyimpan pekerjaan project Anda.

Lebih jauh, kita akan mengubah background (latar belakang) form utama agar lebih menarik.

Comments

comments

Pages: 1 2 3 4 5 6 7

Tags: Application, contoh, Delphi, ExtJs, ExtPascal, Sample Apps, Tip & Trick, Tutorial, Web Application, Web-Based

30 Responses to Creating Web-Based Application Using UniGUI, With Ajax Support

Tulus BudiDecember 8, 2011 at 2:34 am

Artikelnya mantabsss masbroo….. jadi makin tertarik ama UniGui nehhh….. thx for All ….
New Post

Reply
IdrisDecember 12, 2011 at 8:12 am

Mas, kalo di delphi XE 2 kok gak tampil UniGUI nya ?
Padahal waktu install UniGUI nya ada pilihan Delphi XE 2.
Terimakasih
New Post

Reply
Joko RivaiDecember 12, 2011 at 8:39 am

UniGUI di XE2 belum pernah saya coba mas. Jadi belum bisa jawab
(gak ada masternya…)
New Post

Reply
IdrisDecember 17, 2011 at 6:03 am

Maa’f Mas, kalo sudah jadi exe nya baik pake UniGui atau Raudus, gimana upload ke hosting di web server nya ya ?
Terimakasih.
New Post

Reply
Joko RivaiDecember 17, 2011 at 7:40 pm

Re: [Cenadep.org] Comment: “Creating Web-Based Application Using UniGUI, With Ajax Support”
TO: 1 recipient
Show Details
Servernya harus server Windows (saya belum tau apakah bisa di OS lain).
Sulit untuk mengupload & menjalankan di hosting sewaan, karena harus mengeset webserver (baik Apache/IIS) untuk menjalankannnya sebagai server module (shared library di Apache maupun ISAPI di IIS). Begitu juga dengan mode Standalone Server (jadi server sendiri tanpa Apache/IIS), karena kita tetap mesti mengeset agar aplikasinya jalan sebagai service/autorun.

Aplikasi dengan uniGUI/Raudus sebenarnya lebih cocok untuk server sendiri (pake IP publik), dan dapat diakses via LAN maupun internet.
New Post

Reply
ArfianDecember 17, 2011 at 11:49 pm

Mas aku boleh minta link download masternya delphi yang mas pakai??^_^ soalnya uniGUInya kucoba pasang di Embarcadero.Delphi.2010.RTM.v14.0.3513.24210.Lite.v3.5 tidak bisa muncul di new itemnya..saya ucapkan terima kasih sebelumnya..
New Post

Reply
Joko RivaiDecember 18, 2011 at 3:01 am

Sudah lihat di menu File>New>Other, pilih uniGUI di treeview?
Saya pakai Delphi 2009.

New Post

Reply
ArfianDecember 18, 2011 at 5:40 am

Sudah saya lihat dan tidak menemukan uniGUI di treeviewnya.. oke mas terima kasih atas info linknya..saya coba download dulu..jika sekiranya sudah bisa saya kabari lagi..
New Post

Reply
ArfianDecember 18, 2011 at 9:24 am

Saya sudah coba download dan install tapi hasilnya tetap uniGUI tidak mau muncul di new item…apakah mas juga menggunakan delphi 2009 versi ini??
New Post

Reply
Joko RivaiDecember 18, 2011 at 12:57 pm

Di halaman 2 posting ini, instalasi uniGUI pada Delphi, ada gambar di mana item-item uniGUI berada.

Pastikan Delphi ditutup saat instalasi uniGUI.
New Post

Reply
Joko RivaiDecember 18, 2011 at 1:00 pm

Di instalasi uniGUI pada Delphi ada gambar di mana item-item uniGUI berada. Coba dilihat dulu.

Pastikan Delphi ditutup saat instalasi uniGUI.
New Post

Reply
ArfianDecember 18, 2011 at 8:29 pm

Semua langkah sudah saya terapkan tapi tetap tidak bisa mas..mungkin masalahnya di Delphi versi lite memang susah dipasang komponen ini..
New Post

Reply
ArfianDecember 18, 2011 at 11:52 pm

Sudah bisa mas..ternyata untuk uniGUI terbaru cara pasangnya manual.. http://www.unigui.com/downloads/90
New Post

Reply
Joko RivaiDecember 19, 2011 at 3:52 am

@Arfian
Makasih mas infonya, baru tau ada rilis baru uniGUI…
Good luck
New Post

Reply
ArfianDecember 19, 2011 at 1:50 pm

Oke sama” mas…sekedar info untuk Delphi 2009 atau 2010 versi lite tidak bisa dipasang komponen ini…saya coba tadi error” trs waktu build all dan install…dan yang support sekaligus saya pakai sekarang Codegear Rad Studio (Delphi) 2010 Final Full…referensi link http://www.4shared.com/file/9b_B1LRz/Codegear_Rad_Studio__Delphi__2.htm
New Post

Reply
Fahrizal SuryaDecember 20, 2011 at 1:19 pm

wah.. kalau di pasang di shared hosting susah juga ya mas Rivai?? em… ok ok.. thanks infonya…
New Post

Reply
guswidDecember 23, 2011 at 11:20 pm

apakah sudah dicoba koneksi ke database ? pakai zeos bisa tidak ya ?
tks
New Post

Reply
guswidDecember 23, 2011 at 11:21 pm

maksud saya, dicoba untuk lingkungan yang lebih real, misal koneksi dengan mySQL atau SQL server. Saya coba koneksi ke mySQL tapi masih bermasalah, jadi belum bs coba komponen unigui nya
New Post

Reply
Joko RivaiDecember 24, 2011 at 6:58 am

Tentu saja bisa. Saya masih menulis tentang hal itu dan Insya Allah beberapa waktu lagi sudah bisa saya publish.
New Post

Reply
guswidDecember 24, 2011 at 9:46 pm

sip. saya sudah lama tidak coding di delphi. gara2 unigui ini jadi pingin nyoba lagi. Benar juga, saya sudah mencoba koneksi dengan zeos dan everything looks like good.

btw apa pernah di coba pakai WINE untuk menjalankan modul servernya. jadi bisa jalan di lingkungan linux. Apa sudah ada yang menjalankan di lingkungan production tidak sekedar development? maksud saya menjamin kekuatan dan kestabilan ‘web server’.

tks
New Post

Reply
- Joko RivaiDecember 25, 2011 at 5:04 pm
  
  Mengingat bahwa Wine adalah emulator, saya pikir malah akan mengurangi performasi server. Sebaiknya dijalankan secara native, yang saat ini adalah Windows. Saya percaya ke depan uniGUI akan tersedia untuk Linux juga. Bila ingin mencoba di Linux, Raudus
  adalah alternatif yang bagus.
  
  Untuk production stage, mungkin belum ada yang benar-benar menggunakannya. Saya sendiri masih di tahap pengembangan sambil lihat pros & cons-nya.
  New Post
  
  Reply
IdrisJanuary 12, 2012 at 5:02 am

Maa’f Mas, untuk Report dan Setting Cllient Server atau di Web Server nya gimana ya Mas ?
Terimakasih sebelumnya
New Post

Reply
Cenadep.org » Creating Web Application Using UniGUI, Zeos & MySQLJanuary 21, 2012 at 5:08 pm

[...] tulisan Creating Web-Based Application Using UniGUI, With Ajax Support yang membahas mulai perkenalan, instalasi sampai penggunaan uniGUI pada aplikasi berbasis web, [...]
New Post

Reply
adityaMarch 12, 2012 at 7:23 am

maaaf agan senior programer, ikut nyimak ni, oia, saya mau bikin treeview di dalam iframe , klo ada yg bisa bantu tolong di post ia gan, oia itu di atas Bapak idris, guru kuliah saya, ternyata ikut di tread ini juga,, moga programan maju trussss….
New Post

Reply
Joko RivaiMarch 13, 2012 at 1:02 am

Pak @Idris , maksudnya bagaimana Pak? Maaf baru dijawab.

Mas @Aditya , kalau untuk IFRame dengan HTML sebagai isinya, coba TUniHTMLFrame. Bila untuk menampilkan URL/Link ke dalam IFRame, coba TUniURLFrame.

Bila ingin frame seperti Delphi, di mana sebuah IFrame menampung form lainnya, coba cara ini:

1. Save Project Anda
2. Buat sebuah Frame baru: File>New>Other>UniGUI For Delphi>FRame
3. Save Frame ini. Kemudian klik kanan di Frame ini dan pilih Add To Palette
Lihat gambar berikut:

Klik OK.

4. Nah, component palette (Tab uniGUI Addtional) sudah dibuat sebuah komponen baru
5. Kembali ke projek, pilih sebuah form (selain Frame yang baru dibuat) di mana Anda ingin menempatkan IFrame
6. Klik komponen TUniFrame1Template dari component palette (Tab uniGUI Addtional) yang baru dibuat di langkah 3. ke form tersebut. Atur posisinya sesuai keperluan
7. Kini, tambahkan TUniTreeView ke Frame (yang dibuat di langkah 3.)
8. TreeView ini akan otomatis muncul dalam IFrame di Form yang dipilih (lihat langkah 4.)

Semoga membantu
New Post

Reply
edhi hMay 30, 2012 at 6:46 am

salam kenal mas..
sebelumnya terima kasih info uniGUI nya,sangat bermanfaat buat saya..
mau nanya, di uniGUI ketika dijalankan di webbrowser.. bisa panggil file dengan extensen dynamic link lybrari(DLL) ga ya..
saya sudah coba, bisa sie dipanggil cuma tampilnya di dekstop nya.bukan di webbrowsernya..
gimana caranya ya, biar dll tersebut tampilnya di web browsernya..

terima kasih sebelumnya..
New Post

Reply
Joko RivaiMay 31, 2012 at 8:52 am

@edhi h
Saya juga belum tau mas. Sepertinya belum ada fitur seperti itu di uniGUI.
Bila ingin menjalankan sebagai shared object (untuk IIS, misalnya) silahkan buat aplikasi uniGUI dengan uniGUI Application Wizard. Pilih ISAPI Module
New Post

Reply
Tutorial Membuat Aplikasi UniGUI ISAPI Mode Pada Apache Dengan Delphi | Cenadep.orgOctober 13, 2012 at 12:30 pm

[...] ini kita akan melihat proses pembuatan aplikasi berbasis web dengan UniGUI yang membahas mulai memilih jenis aplikasi UniGUI untuk web, kompilasi menjadi modul ISAPI, sampai [...]
New Post

Reply
Tutorial Membuat Aplikasi Upload File Dengan UniGUI dan Delphi | Cenadep.orgJanuary 31, 2013 at 8:30 am

[...] pembuatan aplikasi berbasis web dengan UniGUI dan juga langkah-langkah pembuatan aplikasi database uniGUI, mari kita lihat langkah-langkah [...]
New Post

Reply
Ary WardhanaApril 25, 2013 at 4:50 pm

Maap ikut menyimak gan..!!! Info nya bener nich…pengen nyoba-nyoba delphii….ternyata enak jugaaa… apa lagi pake UniGUI..
New Post

Reply