Membuat Halaman Kontak

Kita telah membuat halaman standar Home.page menggunakan piranti baris perintah PRADO. Halaman relatif statis karena ia tidak berisi konten dinamis. Dalam bagian ini, kita akan membuat halaman interaktif bernama Contact.

Kegunaan dari halaman Contact adalah untuk mengumpulkan umpan balik dari para pengguna sistem blog kita. Untuk melaksanakan tujuan ini, kita merencanakan untuk menyajikan para pengguna dengan sebuah formulir umpan balik yang harus diisi. Dalam formulir ini, kita akan mengharuskan para pengguna untuk menyediakan namanya, alamat email, dan konten umpan balik. Setelah formulir diisi dan dikirimkan, email yang berisi umpan balik akan dikirimkan ke administrator situs.

Untuk membuat halaman Contact, kita memerluka dua file di bawah direktori pages: file template halaman Contact.page dan file kelas halaman Contact.php.

Halaman harus berupa file template (berekstensi .page) atau file kelas, atau keduanya:

Hanya template-halaman yang biasanya berupa sebuah halaman sengan konten statis, seperti homepage yang sudah kita buat;
Hanya file kelas halaman yang menghasilkan konten murni berdasarkan eksekusi metode kelas;
Sebuah halaman dengan template dan kelasnya mengkombinasikan keunggulan keduanya: ia menggunakan template untuk memudahkan mengatur tata letak halaman dan menggunakan kelas untuk menyertakan logika yang menghasilkan konten dinamis.

Membuat Template Halaman

Pertama kita membuat file template untuk halaman Contact.

Kita menggunakan template untuk menghatur tata letak penyajian terhadap formulir umpan balik. Dalam template, kita menggunakan kotak teks untuk mengumpulkan nama pengguna, email dan umpan balik. Dan kita menggunakan validator guna memastikan bahwa pengguna menyediakan semua informasi ini sebelum mengirimkan formulir umpan balik. Seluruh template adalah sebagai berikut,

My Blog - Contact

Contact

Please fill out the following form to let me know your feedback on my blog. Thanks!

<com:TForm> Your Name: <com:TRequiredFieldValidator ControlToValidate="Name" ErrorMessage="Please provide your name." Display="Dynamic" />
<com:TTextBox ID="Name" />
Your Email: <com:TRequiredFieldValidator ControlToValidate="Email" ErrorMessage="Please provide your email address." Display="Dynamic" /> <com:TEmailAddressValidator ControlToValidate="Email" ErrorMessage="You entered an invalid email address." Display="Dynamic" />
<com:TTextBox ID="Email" />
Feedback: <com:TRequiredFieldValidator ControlToValidate="Feedback" ErrorMessage="Please provide your feedback." Display="Dynamic" />
<com:TTextBox ID="Feedback" TextMode="MultiLine" Rows="10" Columns="40" />
<com:TButton Text="Submit" OnClick="submitButtonClicked" /> </com:TForm>

Seperti kita lihat bahwa template terlihat sangat mirip dengan halaman HTML normal. Perbedaan utamanya adalah bahwa template berisi beberapa tag <com:>. Setap tag <com:> merujuk ke sebuah kontrol yang propertinya diinisialisasi dengan pasangan nama-nilai dalam tag. Sebagai contoh, <com:TButton> merujuk ke kontrol TButton guna menampilkan sebuah tombol di mana pengguna dapat di klik pengguna untuk mengirimkan formulir umpan balik. Untuk sintaks lengkap template, silahkan rujuk Tutorial Cepat.

PRADO menyediakan kontrol untuk setiap tipe input HTML. Sebagai contoh, TTextBox menampilkan field input teks, TDropDownList menampilkan kotak kombo. Setiap kontrol adalah sebuah komponen yang dapat diakses dalam kode sebagai obyek dengan properti yang bisa dikonfigurasi.

Selain kontrol TTextBox, template juga menggunakan banyak kontrol validator yang memastikan input pengguna memuaskan aturan validasi spesifik. Sebagai contoh, untuk memastikan alamat email sah yang dilengkapi, kita menggunakan dua validator untuk memvalidasi kotak teks "email", seperti ditampilkan dalam kode berikut:

Your Email: <com:TRequiredFieldValidator ControlToValidate="Email" ErrorMessage="Please provide your email address." Display="Dynamic" /> <com:TEmailAddressValidator ControlToValidate="Email" ErrorMessage="You entered an invalid email address." Display="Dynamic" />
<com:TTextBox ID="Email" />

Di bawah ini kita meringkas kontrol yang dipakai dalam template halaman:

TForm menampilkan sebuah formulir HTML. Setiap kontrol input harus dikurung di dalamnya. Dan yang terpenting, paling banyak satu TForm boleh muncul dalam sebuah halaman.
TTextBox menampilkan kotak teks untuk mengumpulkan input teks pengguna.
TRequiredFieldValidator memastikan bahwa kotak teks terkait tidak kosong saat umpan balik dikirimkan.
TEmailAddressValidator memastikan bahwa kotak teks berisi alamat email yang benar saat umpan balik dikirimkan.

Menulis template dengan editor teks biasa dapat membosankan dan tidak intuitif untuk para desainer. Untuk memudahkan situasi ini, PRADO telah menyertakan dalam rilis ekstensi Adobe Dreamweaver yang mendukung pelengkapan-otomatis tag PRADO (misalnya menyertakan nama kontrol, nama properti, nama event, dll) dalam Dreamweaver.

Membuat Kelas Halaman

Sekarang kita membuat kelas halaman Contact.php. Alasan kita membutuhkan kelas halaman adalah karena kita perlu merespon umpan balik yang dikirimkan oleh pengguna.

Perhatikan dalam template kita mempunyai baris berikut. Template secara esensi menyatakan bahwa saat pengguna mengklik tombol, ia harus memanggil metode submitButtonClicked(). Di sini OnClick adalah nama dari event yang diklik pengguna, dan metode harus didefinisikan dalam kelas halaman.

<com:TButton Text="Submit" OnClick="submitButtonClicked" />

Selanjutnya kita menuliskan kelas halaman seperti berikut:

IsValid) // memeriksa apakan validasi input berhasil { // mendapatkan nama pengguna, email, umpan balik dari kotak teks $name = $this->Name->Text; $email = $this->Email->Text; $feedback = $this->Feedback->Text; // mengirimkan email ke administrator dengan informasi di atas $this->mailFeedback($name, $email, $feedback); } } protected function mailFeedback($name, $email, $feedback) { // implementasi pengiriman email umpan balik } } ?>

Kode di atas sebagian besar cukup jelas. Kenyataannya, kami hanya menampilkan skema pemrograman pengendalian-event. Dalam pengendali event submitButtonClicked(), kita mengambil input pengguna. Sebagai contoh, $this->Name->Text mengembalikan nilai properti Text dari kontrol Name yang merupakan kotak teks yang mengumpulkan informasi nama pengguna.

Nama kelas halaman harus sama seperti nama file. Ini juga persyaratan untuk penulisan komponen kelas PRADO.

Pengujian

Contact yang baru saja kita buat dapat kita uji dengan URL http://hostname/blog/index.php?page=Contact. Jika kita mengklik pada tombol submit tanpa memasukan informasi apapun, kita akan melihat pesan kesalahan muncil di sebelah kotak teks terkait. Jika kita memasukan semua informasi yang diperlukan, metode mailFeedback() akan dipanggil.

Peningkatan berikutnya terhadap halaman ini adalah untuk menampilkan beberapa pesan konfirmasi pada halaman setelah pengguna mengirimkan umpan balik. Dan kemungkinan, browser akan dialihkan ke halaman lain jika pengiriman berhasil. Kita akan membiarkan tugas ini bagi para pembaca kita.

Setiap validator mewakili aturan validasi. Satu kontrol input dapat dikaitkan dengan satu atau multipel validator. Validator melakukan validasi pada sisi klien dan sisi server. Pada sisi klien, yaitu browser, validasi dikerjakan dmenggunakan javascript; pada sisi server, validasi dikerjakan dengan menggunakan kode PHP. Validasi sisi-klien dapat dimatikan, sementara validasi sisi-server tidak bisa. Ini memastikan input pengguna selalu diperiksa oleh aturan validasi yang dietapkan.