Pendekatan terbaik untuk menguasai perangkat pengembangan software yang baru seperti Morfik adalah dengan 'belajar sambil berlatih' — dan inilah kesempatan Anda untuk melakukannya. Dalam pasal ini, Anda akan membuat aplikasi web pertama anda dari awal hingga akhir menggunakan beberapa fitur inti yang ada di Morfik. Tidak diperlukan pengetahuan awal tentang Morfik.
Pengantar
Artikel in fokus pada apa yang dapat Anda kerjakan dengan. Pada tahap ini Anda tidak perlu tahu bagaimana dan mengapa -- Anda akan mempelajarinya kemudian.
Membuat aplikasi pertama Anda - buku tamu
Di tahap ini, Anda mungkin berkata, "Hey, tunggu dulu! Aku tidak tahu apa-apa tentang Morfik, atau membangun aplikasi web untuk masalah itu!" Baik, jangan takut! Kami tidak hanya akan menunjukkan pada Anda bagaimana membangun aplikasi web dari awal sampai akhir, kami ingin membuktikan betapa cepat dan mudahnya - bahkan jika Anda tidak tahu apa-apa tentang pengembangan aplikasi!
Kita akan membangun sebuah aplikasi buku tamu online yang memungkinkan pengguna mengirim pesan ke papan pesan. Tugas ini membutuhkan tabel (untuk menyimpan pengguna dan komentar) dan antarmuka pengguna untuk melihat dan menambah komentar.
Kita akan membangun sebuah aplikasi buku tamu online yang memungkinkan pengguna mengirim pesan ke papan pesan. Tugas ini membutuhkan tabel (untuk menyimpan pengguna dan komentar) dan antarmuka pengguna untuk melihat dan menambah komentar.
Selama proses pembuatan aplikasi ini - dengan fungsinya yang spesifik - Anda akan ditunjukkan banyak fitur inti dari Morfik.
Jika Anda belum melakukannya, silakan install Morfik terlebih dahulu. Instruksi lengkap ada di sini. Jika sudah, jalankan Morfik dan ayo kita mulai!
Langkah 1—Buat Proyek
Untuk membuat aplikasi dengan Morfik, Anda harus membuat sebuah proyek untuk aplikasi. Untuk membuat sebuah proyek, klik menu 'New Project' pada tab Home|New di Ribbon Bar.
 |
| Gambar 1 Dialog Proyek Baru |
Catatan: Ribbon Bar mungkin berubah secara dinamis tergantung konteksnya. Jika Anda telah membuka sebuah proyek, tombol 'New Project' mungkin tidak terlihat. Tutup proyeknya atau akses perintah New Project atau New Project Wizard dari Tombol Power Menu (Power Menu Button).
Dari daftar template yang tersedia pada dialog New Project kami memilih template yang paling cocok dengan proyek Anda. Kami memilih template 'Rocking Green', memberi nama 'GuestBook' dan membiarkan lokasi apa adanya dan di dalam folder baru.
Jika checkbox 'Create sample pages' dicontreng, proyek baru akan menyertakan beberapa halaman contoh (termasuk halaman untuk perangkat genggam). Halaman-halaman ini juga dapat ditambahkan setelah proyek dibuat melalui perintah 'New Page'.
Tekan tombol OK dan tunggu hingga proyek baru terbentuk. Proyek baru menyertakan template halaman utama untuk proyek yang disebut Index dan halaman template untuk Apple Iphone (Gambar 2). Dalam artikel ini kita akan fokus pada template halaman Index. Dalam proyek Morfik, Halaman menentukan antarmuka aplikasi Anda dan dan organisasi internal sebagaimana Anda menentukan penempatan isi dan struktur navigasi.
Selamat! Anda berhasil membuat sebuah aplikasi web! Meskipun memang tidak memberi kegunaan apapun, namun bukan itu poinnya. Dengan menentukan pengaturan dasar, dan tanpa menulis baris kode apapun, Anda telah memiliki aplikasi yang dapat di-compile, eksekusi, dipasang dan memiliki database berkinerja tinggi!
Setelah field-field tersebut ditambahkan di tabel, Anda seharusnya melihat daftar field seperti yang terlihat di Gambar 5.
FullName : Jon Citizen
EmailAddress: jon@citizen.com
Comment: This is cool and I am very happy to have the first comments in this Guestbook sample project. Keep up the good job.
ContactMe: 1
GuestBook adalah proyek sederhana dengan hanya satu halaman dan tidak pelru navigasi jadi kita hilangkan daftar link. Kita juga menghapus link di Footer dari Form Master dengan menghapus 'Container6' yang mencakup semua link Footer. Simpan dan Tutup form frmRoot. Header halaman Index sekarang sudah terupdate (Gambar 13).
Mode tampilan "vmContinuousEditable" untuk form memungkinkan kita menampilkan banyak record, termasuk menambah atau mengedit tampilan saat program dijalankan (run-time) dengan perilaku seperti grid.
Letakkan TextLabel kedua untuk komentar dan tempatkan di bawah nama lengkap tamu, dan sembari dipilih, lakukan perubahan properti sebagai berikut:
Kita juga menggambar garis antara setiap entry dengan meletakkan kontrol Rectangle dari tab Insert (dalam bagian Extended) di bawah TextLabel Comments dan lakukan perubahan properti Rectangle sebagai berikut.
Klik pada kotak Details pada form dan atur properti berikut:
Berdasarkan perubahan di atas, form Anda seharusnya tampak seperti di Gambar 14:
Pilih kontrol edit yang ada untuk field FullName (Edit_TextLabel1) dan ganti properti berikut:
Selanjutnya, pilih kontrol edit untuk field Comments (Edit_TextLabel2) dan ganti properti berikut:
Sekarang saatnya menambahkan kontrol pengubahan untuk field-field yang tidak terdapat dalam kotak Edit dengan menambahkan kontrol TextEdit baru dan mengatur Data Field-nya ke field EmailAddress dari tabel Guests.
Kontrol terakhir yang ditambahkan adalah field "Contact Me" yang bertipe Boolean. Klik pada tab Insert Ribbon dan pada daftar kontrol di bagian Standard, klik kontrol Checkbox. Pindahkan kursor kebawah di bawah kontrol EmailAddress dan klik lagi. Pastikan checkbox baru itu dicentang dan lakukan perubahan properti berikut:
Langkah terakhir mengubah kotak Edit kita tambahkan nama untuk masing-masing kontrol pengubah. Klik pada kontrol TextLabel in tab Insert Ribbon dan letakkan di sebelah kontrol pengubahan untuk field Fullname. Sembari dipiih, pergilah ke Home Ribbon, klik dropdown "Style" dan pilih "Heading6" untuk melakukan format pada TextLabel dan membuatnya menyarankan perubahan properti berikut:
Ikuti langkah-langkah di atas tadi untuk memberi nama pada setiap kontrol pengubah dan mengisi properti Caption dan Top sesuai dengan field yang dituju.
Cobalah menambah, mengubah dan menghapus beberapa komentar coba-coba untuk memastikan semua fungsi berjalan dengan baik. Tentau saja Anda dapat mengubah lagi kotak navigasi dan menyembunyikan beberapa perintah seperti Delete dan Editing.
 |
| Gambar 2. Sebuah proyek berhasil dibuat. |
Selamat! Anda berhasil membuat sebuah aplikasi web! Meskipun memang tidak memberi kegunaan apapun, namun bukan itu poinnya. Dengan menentukan pengaturan dasar, dan tanpa menulis baris kode apapun, Anda telah memiliki aplikasi yang dapat di-compile, eksekusi, dipasang dan memiliki database berkinerja tinggi!
Langkah 2 - Membuat dan Mengatur Table Komentar Tamu
Kita akan membuat table untuk menyimpan informasi tentang tamu dan komentar mereka. Kita akan menggunakan Table Wizard untuk membuat tabel dan menamai tabel itu 'Guests'.
Tekan tombol 'Table' pada tab 'Project|Document Wizards' di Ribbon Bar untuk menampilkan Table Wizard. Isikan "Guests" sebagai nama tabel seperti tampak pada Gambar 3.
 |
| Gambar 3: New Table Wizard - Nama Tabel |
Tekan tombol Next untuk melanjutkan.
Kita sekarang perlu menamai kolom-kolom dalam tabel 'Guests'. Tekan tombol 'Add' untuk membuat kolom baru. Isi namanya jadi GuestID dan tipenya menjadi AutoNumber (Gambar 4) dan tekan tombol OK untuk menutup kotak dialog Field.
 |
| Gambar 4: Menentukan field pada New Table Wizard |
Tekan tombol Add lagi untuk membuat kolom baru lainnya. Isi namanya Fullname dan tipenya Text dan kemudian tekan tombol OK untuk menutup kotak dialog Field. Ulangi langkah diatas untuk membuat 3 kolom tambahan :
| COLUMN | TYPE |
| EmailAddress | Text |
| Comment | Memo |
| ContactMe | Yes/No |
Setelah field-field tersebut ditambahkan di tabel, Anda seharusnya melihat daftar field seperti yang terlihat di Gambar 5.
 |
| Gambar 5: Daftar Field yang sudah lengkap |
Tekan tombol Next untuk melanjutkan.
Sekarang Anda tentukan bahwa GuestID seharusnya digunakan sebagai primary key sebagai penanda unik dari setiap record dalam tabel (Gambar 6). Pilih radiobutton 'Yes, use the following field(s) as the primary key' dan tekan tombol [..] untuk menampilkan kotak dialog Define Primary Key. Pilih kolom 'GuestID' dan tekan tombol OK untuk menutup kotak dialog itu.
 |
| Gambar 6: Tentukan primary key dalam Table Wizard |
Tekan tombol Next untuk melanjutkan.
Kita telah selesai membuat tabel Guests. Tekan tombol Finish untuk menutupnya (Gambar 7).
 |
| Gambar 7: Menyelesaikan New Table Wizard |
Anda akan melihat tabel dan field yang baru saja Anda buat melalui Table Design View (Gambar 8). Setiap penyesuaian field dapat diterapkan dari sini, tapi kita akan membiarkan konfigurasi apa adanya untuk aplikasi ini.
 |
| Gambar 8: Table Design View |
Mumpung ada di sini, mari kita tambahkan record coba-coba di tabel Guests untuk tujuan testing. Tekan [F12] untuk beralih ke Table Data View (Gambar 9). Jawab 'Yes' jika ditanya konfirmasi untuk menyimpan data di tabel.
Di tab Home|Records pada Ribbon bar, klik perintah New Record.
Tambahkan nilai berikut ini dalam record:
FullName : Jon Citizen
EmailAddress: jon@citizen.com
Comment: This is cool and I am very happy to have the first comments in this Guestbook sample project. Keep up the good job.
ContactMe: 1
 |
| Gambar 9 : Table Data View |
Kolom GuestID akan secara otomatis terisi dengan nilai 1 ketika record diupdate. Di tab Home|Records pada Ribbon Bar, tekan tombol Update untuk menyimpan record baru.
Tutup tabel Guests. Tabel itu sekarang siap untuk digunakan dalam proyek Anda dan Anda seharusnya dapat melihat tabel baru di bawah kategori 'Tables' dalam Panel Project.
Langkah 3—Konfigurasi Antarmuka Pengguna di Aplikasi
Setiap pekerjaan untuk antarmuka pengguna dalam proyek dapat dimulai dari sebuah halaman (Page) yang diciptakan sebagai bagian dari template yang dipilih. Tergantung pada proyeknya, kita dapat memilih salah satu dari halaman yang ada di proyek sebagai halaman depan (home page) atau membuat halaman baru dengan layout yang lebih cocok denga proyek kita dan menggunakannya sebagai halaman depan (home page).
Karena GuestBook adalah proyek yang relatif sederhana, kita gunakan saja halaman Index yang sudah ada di proyek ini dan memulai desain antarmuka pengguna.
|
| Gambar 10: Menggunakan halaman Index dalam proyek |
Ketika bekerja dengan halaman (Pages), bagian dari halaman yang merupakan bagian dari Form Master (level paling atas dalam antarmuka) diredupkan (ditandai dengan 1 di Gambar 11). Sisa bagian lainnya dibagi menjadi bagian dengan menggunakan subform (ditandai dengan 2 di Gambar 11) dengan subform yang berisi form. Form merupakan kanvas yang akan menjadi tempat kerja untuk menciptakan antarmuka visual dari aplikasi.
 |
| Gambar 11: Halaman Index yang baru |
Klik-ganda pada subform atau bagian yang redup dari halaman Index akan membuka form dalam subform atau form master proyek bergantian.
Mulailah dengan klik-ganda bagian header dari halaman itu (bagian dari Form Master) untuk melihat Form Master (Gambar 12).
 |
| Gambar 12: Form Master Proyek (frmRoot) |
Sesuaikan header form Master dengan proyek kita dengan beberapa perubahan seperti properti Caption dan Width di TextLabel1 dan TextLabel2:
| TextLabel1 : TextLabel | |
| Caption | Guestbook |
| TextLabel2 : TextLabel | |
| Caption | Welcome to our guestbook, we'd love to hear from you |
| Width | 500px |
GuestBook adalah proyek sederhana dengan hanya satu halaman dan tidak pelru navigasi jadi kita hilangkan daftar link. Kita juga menghapus link di Footer dari Form Master dengan menghapus 'Container6' yang mencakup semua link Footer. Simpan dan Tutup form frmRoot. Header halaman Index sekarang sudah terupdate (Gambar 13).
 |
| Gambar 13: Halaman Index pada Master Form yang diupdate |
Halaman-halaman dalam proyek Morfik tersusun dari satu form atau lebih yang ditempatkan di lokasi tertentu pada halaman melalui penggunaan kontrol yang disebut SubForm. Kontrol SubForm mendefinisikan area sebuah halaman (atau form) tempat form lain disisipkan. Halaman-halaman kemudian dibuat melalui pengumpulan, formating dan pengaturan bermacam form. Klik-ganda pada SubForm di halaman Index untuk mulai merancang Form dalam subform.
Form ini akan digunakan untuk menampilkan daftar komentar yang sudah dibuat termasuk mengijinkan tamu untuk mengisi komentar baru. Kaitkan Property Inspector seperti yang tampil di gambar 14:
 |
| Gambar 14: Form yang akan didesain |
Mulailah dengan mengatur properti form sebagai berikut:
| frmEmpty | |
| View Mode | vmContinuousEditable |
| Data Source | Guests |
| Page Size | 50 |
Mode tampilan "vmContinuousEditable" untuk form memungkinkan kita menampilkan banyak record, termasuk menambah atau mengedit tampilan saat program dijalankan (run-time) dengan perilaku seperti grid.
Pilih Insert Ribbon dan klik kontrol TextLabel di bagian Standard. Lalu klik kotak Details pada Form itu untuk meletakkan TextLabel di form. Sembari dipilih, beralihlah ke Home Ribbon, lalu klik pada perintah "Style" (di bagian Appearance) dan dari daftar drop-down pilihlah "Heading6". Sekarang kita isi beberapa properti dari TextLabel yang baru untuk menampilkan nama lengkap tamu.
| TextLabel1 : TextLabel | |
| Data Field | FullName |
| Left | 45px |
| Top | 15px |
| Width | 500px |
Letakkan TextLabel kedua untuk komentar dan tempatkan di bawah nama lengkap tamu, dan sembari dipilih, lakukan perubahan properti sebagai berikut:
| TextLabel2 : TextLabel | |
| Can Grow | Yes |
| Data Field | Comments |
| Left | 45px |
| Top | 42px |
| Width | 800px |
| Word Wrap | Checked |
Kita juga menggambar garis antara setiap entry dengan meletakkan kontrol Rectangle dari tab Insert (dalam bagian Extended) di bawah TextLabel Comments dan lakukan perubahan properti Rectangle sebagai berikut.
| Rectangle1 : Rectangle | |
| Border Sides | Un-check "bs Bottom", "bs Left", "bs right" |
| Border Width | 1px |
| Color | None |
| Height | 7px |
| Left | 65px |
| Width | 785px |
Klik pada kotak Details pada form dan atur properti berikut:
| Detail : Band | |
| Height | 94px |
Berdasarkan perubahan di atas, form Anda seharusnya tampak seperti di Gambar 14:
 |
| Gambar 14: Updated Comments List Form |
Langkah 4—Data Entry dan preview proyek
Form berikat data ini akan memberi kita daftar tamu dan komentar mereka dari tabel Guests tapi Anda mungkin bertanya bagaimana cara tamu menambah komentar mereka!
Jika Anda ingat, kita mengubah "View Mode" untuk form itu menjadi "vmContinuousEditable" yang membuatnya menjadi sebuah form "Continuous Editable" (dapat diubah secara beruntun). Form ini mencakup fungsi pengubahan record melalui pemakaian kotak editing khusus. Fitur pengubahan dalam form Continuous Editable secara otomatis diaktifkan dan dengan melakukan klik-ganda pada sebuah record saat program dijalankan memungkinkan untuk melakukan perubahan pada record yang tampil.
Namun masih ada beberapa fungsi yang kita pelru tambahkan dalam form agar dapat melakuan entry data saat program berjalan. Mari lakukan perubahan di kotak Edit dengan klik-kanan pada Form dan dari menu konteks Form, pilih “Customize Edit Band” (Gambar 15).
 |
| Gambar 15: Customize Edit Band di form Continuous Editable |
Tindakan di atas membuat kotak Edit terlihat saat desain dan memungkinkan kita memodifikasinya bagi entry data. Ingatlah bahwa kotak Edit hanya terlihat di saat desain dan tampil saat program dijalankan hanya jika menjalankan perintah membuat record baru.
Secara default, kotak Edit hanya melibatkan kontrol pengubahan bagi field-field yang tampil di kotak Details. Kita akan memodifikasi kotak Edit agar menampilkan dan memungkinkan pengubahan data untuk semua field, kecuali field "GuestID" yang memiliki tipe Auto-Number dan otomatis diisi oleh sistem.
Klik pada kotak Edit dan ganti properti Height seperti saran berikut:
| DetailEditable : Band | |
| Height | 232px |
Pilih kontrol edit yang ada untuk field FullName (Edit_TextLabel1) dan ganti properti berikut:
| Edit_TextLabel1 : TextEdit | |
| Left | 161px |
| Top | 18px |
| Width | 600px |
Selanjutnya, pilih kontrol edit untuk field Comments (Edit_TextLabel2) dan ganti properti berikut:
| Edit_TextLabel2 : TextEdit | |
| Left | 161px |
| Height | 92px |
| Top | 53px |
| Width | 600px |
Sekarang saatnya menambahkan kontrol pengubahan untuk field-field yang tidak terdapat dalam kotak Edit dengan menambahkan kontrol TextEdit baru dan mengatur Data Field-nya ke field EmailAddress dari tabel Guests.
Untuk menyingkat waktu, buatlah salinan dari kontrol TextEdit itu. Klik pada kontrol Edit untuk field FullName (Edit_TextLabel1), lalu klik-kanan dan pilih Copy (Ctrl+C) untuk menyalin kontrol. Klik-kanan pada form dan klik Paste (atau Ctrl+V) untuk menambahkan kontrol TextEdit baru di form.
Lakukan perubahan properti berikut pada TextEdit yang baru:
| Edit_TextLabel3 : TextEdit | |
| Data Field | EmailAddress |
| Left | 161px |
| Top | 155px |
| Width | 600px |
Kontrol terakhir yang ditambahkan adalah field "Contact Me" yang bertipe Boolean. Klik pada tab Insert Ribbon dan pada daftar kontrol di bagian Standard, klik kontrol Checkbox. Pindahkan kursor kebawah di bawah kontrol EmailAddress dan klik lagi. Pastikan checkbox baru itu dicentang dan lakukan perubahan properti berikut:
| Edit_Checkbox1 : CheckBox | |
| Caption | Contact Me |
| Data Field | ContactMe |
| Left | 161px |
| Top | 189px |
Langkah terakhir mengubah kotak Edit kita tambahkan nama untuk masing-masing kontrol pengubah. Klik pada kontrol TextLabel in tab Insert Ribbon dan letakkan di sebelah kontrol pengubahan untuk field Fullname. Sembari dipiih, pergilah ke Home Ribbon, klik dropdown "Style" dan pilih "Heading6" untuk melakukan format pada TextLabel dan membuatnya menyarankan perubahan properti berikut:
| TextLabel7 : TextLabel | |
| Caption | Guest Name |
| Left | 45px |
| Top | 19px |
Ikuti langkah-langkah di atas tadi untuk memberi nama pada setiap kontrol pengubah dan mengisi properti Caption dan Top sesuai dengan field yang dituju.
Pengubahan Kotak Edit sudah selesai dan langkah terakhir sebelum kita melakukan preview proyek adalah menambahkan kotak Navigasi di bagian bawah form.
Perlebar kotak Footer dengan meletakkan mouse di atas garis batas antara kotak Details dan kotak Footer dan klik dan klik-tarik dengan mouse ketika kursor terlihat seperti panah berujung ganda dan seret ke bawah hingga tingginya sekitar 45px.
Klik pada kotak Footer yang kosong dan di daftar properti dari Footer itu, klik pada kotak lonjong "Navigation Bar". Ini akan menampilkan dialog Navigation Bar. Centang checkbox "Enabled" dan "Large Buttons" (seperti terlihat di gambar 16) dan klik tombol OK.
 |
| Gambar 16: Form Dialog Navigation Bar |
Anda akan bisa melihat kotak navigasi di Form Footer yang berisi perintah Adding (menambah baru), Deleting (menghapus), Editing (mengubah) and Submitting (mengirim) record. Semua perintah pada kotak navigasi ini bisa diatur atau bisa juga disembunyikan.
Setelah pengaturan kotak Edit di atas dan perubahan form telah dilakukan, form Anda akan terlihat seperti gambar 17.
 |
| Gambar 17: Form Guest Comment saat desain |
Sekarang kita telah menyelesaikan aplikasi pertama kita dan dapat melihat aplikasi itu dengan mengeklik tombol Run. Dengan segera Anda akan dapat melihat aplikasi Anda dalam browser bawaan (Gambar 18).
Catatan: Di sistem yang dilindung Firewall, 'Windows Security Alert' akan tampil saat menjalankan proyek atau melakukan preview form. Dialog itu bisa tidak dimunculkan lagi dengan mengeklik "Unblock".
 |
| Gambar 18: Aplikasi Guestbook ketika dijalankan |
Catatan: Browser Debug Morfik bawaan digunakan untuk menampilkan aplikasi Anda saat dijalankan. Ada 5 browser utama dan perangkan genggam p ada browser debug itu yang memungkinkan Anda menampilkan aplikasi Anda pada browser yang berbeda dan perangkat genggam. Untuk dapat menggunakan browser tersebut, Anda perlu menginstallnya di sistem Anda.
Langkah 5—Validasi Entry Data
Ada rutin sederhana yang dapat Anda berikan di proyek ini meningkatkan integritas data dan fungsionalitasnya.
Sebagai contoh di form data entry, kita dapat memeriksa apakah data yang diberikan benar di kontrol TextEdit sebelum mengirim data dan menampilkan pesan tidak data yang diberikan tidak valid. Untuk melakukan ini, di form data entry, klik-ganda pada event 'On Before Submit' dan menambahkan kode berikut:
FX Code
Procedure frmEmpty.WebFormBeforeSubmit(Var Cancel: Boolean);
Begin
If (Edit_TextLabel1.Text.Trim = '') OR
(Edit_TextLabel2.Text.Trim = '') OR
(Edit_TextLabel3.Text.Trim = '') Then
Begin
Cancel := True;
ShowMessage('All fields require data!')
End;
End;BX Code |
|---|
Published Message Sub WebFormBeforeSubmit(ByRef Cancel As Boolean) If (Edit_TextLabel1.Text.Trim() = "") Or (Edit_TextLabel2.Text.Trim() = "") Or (Edit_TextLabel3.Text.Trim() = "") Then Cancel = true ShowMessage("All fields require data!") End If End Sub |
CX Code |
|---|
published message void WebFormBeforeSubmit(ref Boolean Cancel) { if ((Edit_TextLabel1.Text.Trim() == "") || (Edit_TextLabel2.Text.Trim() == "") || (Edit_TextLabel3.Text.Trim() == "")) { Cancel = true; ShowMessage("All fields require data!"); } } |
Kesimpulan
Selamat! Anda telah menyelesaikan aplikasi Morfik pertama Anda! Untuk You've just completed your first Morfik application! Untuk lebih memberdayakan konsep 'belajar sambil berlatih', kami sarankan Anda mempelajari contoh proyek yang telah terinstall dengan Morfik. Mempelajari daleman dari aplikasi yang dikembangkan secara profesional adalah pendekatan lain untuk belajar.
Artikel ini merupakan terjemahan dari artikel resmi di website Morfik : Building Your First Application with Morfik
Comments