From 888fa27278a1791dc77385bfdb60a52df54e898b Mon Sep 17 00:00:00 2001
From: kabayan <>
Date: Tue, 28 Aug 2007 17:55:45 +0000
Subject: Indonesian Blog Tutorial Day 1 and Day 2
---
.../protected/layout/id/MainLayout.tpl | 2 +-
.../protected/pages/Day1/id/CreateContact.page | 204 +++++++++++++++++++++
.../protected/pages/Day1/id/Setup.page | 164 +++++++++++++++++
.../protected/pages/Day1/id/ShareLayout.page | 180 ++++++++++++++++++
.../protected/pages/Day1/id/directories.gif | Bin 0 -> 3611 bytes
.../protected/pages/Day1/id/directories2.gif | Bin 0 -> 4147 bytes
.../protected/pages/Day1/id/directories3.gif | Bin 0 -> 3531 bytes
.../protected/pages/Day1/id/output.gif | Bin 0 -> 13379 bytes
.../protected/pages/Day2/id/ConnectDB.page | 46 +++++
.../protected/pages/Day2/id/CreateAR.page | 178 ++++++++++++++++++
.../protected/pages/Day2/id/CreateDB.page | 69 +++++++
demos/blog-tutorial/protected/pages/Day2/id/ER.gif | Bin 0 -> 4444 bytes
.../protected/pages/Day2/id/directories.gif | Bin 0 -> 4580 bytes
.../protected/pages/Day2/id/directories2.gif | Bin 0 -> 6795 bytes
14 files changed, 842 insertions(+), 1 deletion(-)
create mode 100644 demos/blog-tutorial/protected/pages/Day1/id/CreateContact.page
create mode 100644 demos/blog-tutorial/protected/pages/Day1/id/Setup.page
create mode 100644 demos/blog-tutorial/protected/pages/Day1/id/ShareLayout.page
create mode 100644 demos/blog-tutorial/protected/pages/Day1/id/directories.gif
create mode 100644 demos/blog-tutorial/protected/pages/Day1/id/directories2.gif
create mode 100644 demos/blog-tutorial/protected/pages/Day1/id/directories3.gif
create mode 100644 demos/blog-tutorial/protected/pages/Day1/id/output.gif
create mode 100644 demos/blog-tutorial/protected/pages/Day2/id/ConnectDB.page
create mode 100644 demos/blog-tutorial/protected/pages/Day2/id/CreateAR.page
create mode 100644 demos/blog-tutorial/protected/pages/Day2/id/CreateDB.page
create mode 100644 demos/blog-tutorial/protected/pages/Day2/id/ER.gif
create mode 100644 demos/blog-tutorial/protected/pages/Day2/id/directories.gif
create mode 100644 demos/blog-tutorial/protected/pages/Day2/id/directories2.gif
(limited to 'demos')
diff --git a/demos/blog-tutorial/protected/layout/id/MainLayout.tpl b/demos/blog-tutorial/protected/layout/id/MainLayout.tpl
index 9f18cd46..7b3549f0 100644
--- a/demos/blog-tutorial/protected/layout/id/MainLayout.tpl
+++ b/demos/blog-tutorial/protected/layout/id/MainLayout.tpl
@@ -1,7 +1,7 @@
-
+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.
+Membuat Halaman Kontak
+
+
+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, +
+ +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" /> ++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. +
+ ++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: +
+ ++Di bawah ini kita meringkas kontrol yang dipakai dalam template halaman: +
+ ++Sekarang kita membuat kelas halaman Contact.php. Alasan kita membutuhkan kelas halaman adalah karena kita perlu merespon umpan balik yang dikirimkan oleh pengguna. + +
+Notice in the template we have the following line. The template essentially states that when a user clicks on the button, it should call the submitButtonClicked() method. Here OnClick is the name of the user click event, and the method must be defined in the page class. +
+ ++Selanjutnya kita menuliskan kelas halaman seperti berikut: +
+ ++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. +
+ ++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. +
+ ++Kita mulai dengan menyiapkan direktori dan file yang diperlukan oleh kebanyakan aplikasi PRADO. Kita menggunakan piranti baris perintah PRADO untuk melaksanakan tujuan ini. +
+ ++Anggap blog adalah nama direktori untuk menampung seluruh sistem blog, dan URL untuk mengakses folder ini adalah http://hostname/blog/ (ganti hostname dengan nama host sebenarnya). +
+ ++Di bawah direktori blog, kita menjalankan piranti baris perintah PRADO dengan perintah berikut (ganti path/ke dengan path sebenarnya ke instalasi kerangka kerja PRADO): +
++Menjalankan perintah di atas akan membuat direktori dan file berikut: +
+ + + ++Sekarang kita mempunyai kerangka aplikasi PRADO yang dapat diakses melalui URL http://hostname/blog/index.php yang menampilkan halaman Web dengan tulisan "Welcome to PRADO". +
+ ++Sangat bermanfaat mempelajari lebih rinci mengenai direktori dan file yang baru saja kita buat. +
+ + ++Setiap aplikasi PRADO mempunyai naskah entri, sering dinamakan sebagai index.php. Dalam kebanyakan kasus, ia hanya naskah PHP yang secara langsung dapat diakses oleh pengguna Web. Ini mengurangi resiko terhadap ijin para pengguna Web untuk menjalankan naskah yang tidak diinginkan pada server. +
+ ++Kegunaan utama dari naskah entri adalah untuk mengawali aplikasi PRADO dan membiarkan ia menangani permintaan pengguna. Naskah entri biasanya berisi pernyataan PHP berikut, +
+ ++File XML opsional application.xml berisi konfigurasi aplikasi. Kegunaan utamanya adalah untuk mengkustomisasi dalam cara yang bisa mengkonfigurasi turunan aplikasi yang dibuat dalam naskah entri. Sevagai contoh, kita dapat menghidupkan fitur pencatatan untuk sistem blog kita dengan bantuan konfigurasi aplikasi. +
+ ++File application.xml yang sekarang kita miliki hampir kosong. Sebenarnya kita dapat menghapusnya dengan aman karena aplikasi pada saat ini hanya menggunakan seting standar PRADO. Seiring kita ke depan, kita akan merujuk kembali secara kontan dan menampilkan bagaimana untuk mengkonfigurasi aplikasi kita dalam application.xml. +
+ + ++Homepage (juga disebut halaman standar) Home.page adalah satu-satunya halaman yang dibuat oleh piranti baris perintah PRADO. Berisi konten dalam file ini yang muncul dalam browser saat mengunjungi URL http://hostname/blog/index.php. +
+ ++Content in the file Home.page uses the PRADO template format, which is mostly like HTML enhanced with a few PRADO-specific tags. For example, in Home.page we see the following pure HTML content: +
+ ++Direktori protected, juga dikenal sebagai path basis aplikasi, adalah direktori akar yang menampung halaman, template, konfigurasi, data, dll. Nama protected menunjukan bahwa direktori ini harus disembunyikan dari para pengguna Web, karena file di bawah direktori ini berisi data sensitif. +
+ ++Server Web berbeda mempunyai berbeda terhadap "melindungi" direktori. Untuk sever httpd Apache, cara termudah adalah untuk menempatkan file bernama .htaccess di bawah direktori dengan isi deny from all. +
+ + ++Direktori protected/runtime dan assets adalah dua direktori yang harus disetel bisa ditulisi oleh proses server Web. Direktori runtime menyimpan data sensitif (misalnya konfigurasi aplikasi yang diuraikan) yang dibuat saat menjalankan aplikasi PRADO, karena direktori assets menyimpan sumber daya yang dipublikasikan (misalnya file gambar, file javascript). +
+ ++Direktori pages adalah akar direktori halaman yang menampung seluruh halaman dalam sebuah aplikasi PRADO. Ini mirip analogi terhadap direktori htdocs pada server Web httpd Apache. +
+ ++Kita sudah melihat bagaimana cara mengakses homepage. Untuk mengakses halaman yang ditempatkan di bawah pages, menggunakan URL http://hostname/blog/index.php?page=path.ke.NamaHalaman. Berdasarkan URL ini, PRADO akan melihar halaman bernama NamaHalaman di bawah direktori pages/path/ke. URL yang kita pakai untuk mengakses homepage sebelumnya sama dengan http://hostname/blog/index.php?page=Home. +
+ + ++Dimungkinkan untuk mengkustomisasi nama dan lokasi terhadap file dan direktori yang dijelaskan di atas. +
+ ++Sebagai contoh, untuk meningkatkan keamanan, seseorang mungkin ingin memindahkan seluruh direktori protected ke tempat lain yang bukan folder Web. Untuk melakukannya, gunakan pernyataan PHP berikut untuk membuat turunan aplikasi dalam naskah entri: +
+ ++Untuk membuat lokasi akar direktori halaman dan mengubah nama homepage, seseorang dapat menetapkannya dalam konfigurasi aplikasi application.xml sebagai berikut: +
+ ++Setelah anda mempelajari lebih jauh mengenai PRADO, anda akan melihat bahwa PRADO adalah kerangka kerja fleksibel yang membolehkan anda untuk mengkustomisasi hampir setiap aspeknya. Kami akan menjelaskan lebih lanjut teknik kustomisasi setelah kita melanjutkan tutorial kita. +
+ ++Dalam bagian ini, kita akan menggunakan fitur master/content PRADO untuk membagi tata letak umum diantara halaman. Tata letak merujuk ke area yang sama atay sebagian besar sama untuk setelan halaman. Sebagai contoh, dalam sistem blog kita, semua halaman akan berbagi header yang sama, footer dan bar-samping yang berisi link jalan pintas. Implementasi langsung adalah untuk mengulang tata letak umum dalam setiap halaman. Akan tetapi, pendekatan ini adalah cenderung salah dan sulit untuk dipelihara. Fitur master/content membolehkan kita untuk menggunakan tata letak umum sebagai sebuah kontrol yang memusatkan logika dan penyajian tata letak umum untuk setiap halaman. +
+ ++Sekarang kita membuat kontrol master MainLayout untuk mewakili tata letak umum berbagi dengan halaman blog kita. Kontrol MainLayout adalah kontrol template yang diperluas dari TTemplateControl. Ini mememerlukan file template MainLayout.tpl dan sebuah file kelas MainLayout.php yang ditempatkan di bawah direktori yang sama. Guna menjembatani pemeliharaan, kita membuat direktori baru protected/layouts untuk menampungnya. +
+ + + ++Untuk saat ini, MainLayout hanya berisi header dan footer sederhana, seperti ditampilkan berikut ini. Kedepan, kita akan menambahkan bar-samping. Para pembaca juga disarankan untuk meningkatkan tata letak dengan fitur yang lainnya. +
+ ++Contoh di atas memperlihatkan konten dalam file template MainLayout.tpl. Tiga tag baru ini dipakai: +
++File kelas MainLayout.php sangat sederhana: +
+ ++Untuk menggunakan kontrol master yang baru saja dibuat, kita akan memodifikasi Home.page dan Contact.page. Dalam keadaan tertentu, kita perlu untuk menghapus header dan footer darinya karena kontrol master akan bertanggung jawab untuk menampilkannya; dan kita perlu memberitahu dua halaman di mana mereka harus menggunakan MainLayout sebagai masternya. +
+ ++Kode berikut memperlihatkan konten dalam Contact.page setelah perubahan: +
+ +Please fill out the following form to let me know your feedback on my blog. Thanks!
+ +...kotak teks dan validator untuk nama pengguna... + +...kotak teks dan validator untuk emali pengguna... + +...kotak teks dan validator untuk konten umpan balik... + +<com:TButton Text="Submit" OnClick="submitButtonClicked" /> + +</com:TContent> ++Konten yang dikurung di dalam tag <com:TContent> tag akan disisipkan ke dalam tempat yang disiapkan oleh <com:TContentPlaceHolder> pada template master. +
+ ++Selain <com:TContent>, kita juga melihat tag baru lain <%@ %> di atas, yang disebut tag kontrol template. Ia berisi pasangan nama-nilai yang dipakai untuk menginisialisasi properti terkait bagi pemilik template, yaitu, halaman Contact. +
+ ++Dengan menyetel properti MasterClass sebagai Application.layouts.MainLayout, kita menginstruksikan halaman Contact untuk menggunakan MainLayout sebagai masternya. Di sini, kita sedang menggunakan format namespace untuk merujuk ke kelas MainLayout. +
+ ++Ada beberapa cara tambahan untuk menetapkan kelas master untuk sebuah halaman. +
+ ++Kita dapat menetapkan master dalam kode seperti berikut untuk menghidupkan perubahan dinamis terhadap tata letak: +
+ ++Dalam contoh di atas, kita menetapkan MasterClass dalam metode onPreInit() yang diturunkan dari TPage. Metode dipanggil oleh PRADO langsung setelah turunan halaman dibuat. Selanjutnya kita dapat menentukan secara dinamis tata letak yang dipakai saat halaman diminta. Sebagai contoh, ketika halaman yang diminta oleh pengguna terdaftar kita memakai tata letak A, dan tata letak B dipakai jika pengguna tamu yang meminta halaman. +
+ ++Kita juga dapat menetapkan master dalam konfigurasi aplikasi atau konfigurasi halaman. Kode berikut memperlihatkan konfigurasi aplikasi yang dimutakhirkan untuk sistem blog kita: +
+ ++Dengan melakukan demikian, kita menghindari kesulitan pada penetapan master dalam setiap template halaman. Jika kita memutuskan untuk menggunakan master yang berbeda untuk halaman, kita hanya perlu mengubah konfigurasi aplikasi. Untuk alasan ini, dalam sistem blog kita, kita akan menggunakan pendekatan untuk menetapkan master. +
+ ++Untuk menggunakan database yang baru saja kita buat, pertama kita perlu melaksanakan koneksinya. +
+ ++Kita akan menggunakan Data Access Objects (DAO) untuk memisahkan mekanisme akses data kita. Jika nanti kita menggunakan DBMS yang berbeda (misalnya PostgreSQL, Oracle) untuk menyimpan data blog, kita hanya perlu mengubah nama sumber database atau data source nama (DSN) dam kita dapat menjaga kode PHP kita tetap utuh. +
+ ++Selanjutnya untuk memisahkan tabel database sebenarnya, kita juga akan menggunakan fitur Rekaman Aktif (AR). Setiap rekaman data akan disajikan sebagai obyek Rekaman Aktif yang mampu melakukan query, menyimpan dan menghapus tanpa menulis pernyataan SQL. +
+ ++Kita memodifikasi file konfigurasi aplikasi kita protected/application.xml dengan menyisipkan baris berikut, yang memberitahu Rekaman Aktif bagaimana untuk menghubungkan ke database yang baru saja kita buat: +
+ ++Konfigurasi di atas memperlihatkan bahwa kita menambahkan dua modul pada aplikasi kita. Modul TDataSourceConfig dikonfigurasi dengan string koneksi sqlite:protected/data/blog.db yang mengarah ke SQLite database kita. Koneksi ini dipakai oleh modul TActiveRecordConfig yang dibutuhkan leh Rekaman Aktif. +
+ ++Kita perlu membuat dua kelas Rekaman Aktif, UserRecord dan PostRecord, masing-masing untuk mewakili rekaman data dalam tabel users dan posts. Kelas Rekaman Aktif harus diperluas dari kelas basis ActiveRecord, dan harus mendefinisikan nama properti yang sama dengan nama field dari tabel terkait. +
+ ++Untuk mengatur lebih baik direktori, kita membuat direktori baru protected/database guna menampung file kelas. Kita juga memodifikasi konfigurasi aplikasi kita dengan menyisipkan baris berikut. Ini sama dengan menambahkan direktori protected/database ke PHP include_path, yang membolehkan kita untuk menggunakan kelas tanpa secara eksplisit menyertakannya. +
+ ++Daripada menulis kelas secara manual, kita akan menggunakan piranti baris perintah PRADO lagi untuk membuat kelas bagi kita. +
+ ++Di bawah direktori blog, jalankan perintah berikut untuk masuk ke dalam mode interaktif pada piranti baris perintah: +
+ ++Kita akan melihat +
+ ++Pada prompt, masukkan dua perintah berikut untuk membuat kelas UserRecord dan PostRecord: +
+ ++Di sini kita menggunakan format namespace lagi untuk menetapkan kelas yang dibuat. Path Application.database.UserRecord menunjukan bahwa kita ingin file kelas UserRecord menjadi protected/database/UserRecord.php. +
+ ++Kita akan melihat struktur direktori berikut dengan dua file baru di bawah protected/database: +
+ + + ++Jika kita memeriksa file kelas PostRecord , kita akan melihat konten berikut. +
+ ++Seperti kita lihat, untuk setiap field dalam tabel posts, kelas mempunyai anggota data terkait. Konstan TABLE menetapkan nama tabel untuk PostRecord. Metode statis finder() membolehkan kita melakukan query dan mengambil data tulisan dalam batasan obyek PostRecord. +
+ ++Kita dapat menggunakan piranti baris perintah untuk melakukan beberapa pengujian dengan kelas Rekaman Aktif yang baru saja kita buat. Masih dalam mode interaktif pada piranti baris perintah, kita memasukan pernyataan PHP dan seharusnya melihat kode berikut. Para pembaca yang tertarik dapat mencoba pernyataan PHP laninnya, seperti misalnya UserRecord::finder()->findAll(). +
+ ++Mengingat bahwa ada hubungan kunci asing antara tabel users dan posts. Diagram hubungan-entitas ditampilkan di bawah ini demi kenyamanan. +
+ + + ++Dari diagram hubungan-entitas di atas, kita merlihat bahwa tabel posts berisi field bernama author_id. Field author_id ini adalah kunci asing yang mereferensi tabel users. Dalam keadaan tertentu, nilai dalam field author_id seharusnya dari tabel users field username. Salah satu konsekuensi dari hubungan ini, dalam pola pikir obyek, adalah bahwa setiap "tulisan" milik "author" dan satu "author" dapat memiliki banyak "tulisan". +
+ ++Kita dapat membuat model hubungan antara tabel posts dan users dalam Rekaman Aktif dengan memodifikasi kelas PostRecord dan UserRecord seperti berikut. +
+ ++Properti statis $RELATIONS pada PostRecord mendefinisikan bahwa properti $author dimiliki UserRecord. Dalam array(self::BELONGS_TO, 'UserRecord'), elemen pertama mendefinisikan tipe hubungan, dalam hal ini self::BELONGS_TO. Elemen kedua adalah nama pada rekaman terkait, dalam hal ini UserRecord. UserRecord didefinisikan sama di bawah ini, perbedaannya yaitu rekaman pengguna mempunyai banyak PostRecord. +
+ ++Sebuah array UserRecord dengan dan tulisan terkaitnya dapat diambil seperti berikut. +
+ ++Dokumentasi lengkap selanjutnya dapat ditemukan dalam dokumen quickstart Rekaman Aktif. +
+ ++Banyak aplikasi Web menggunakan database untuk memelihara datanya. Sistem blog kita tidak terkecuali. Dalam bagian ini, kami akan menjelaskan bagaimana untuk menulis halaman kendali-database untuk sistem blog kita. Kita akan menggunakan teknik termasuk database access object (DAO) dan Rekaman Aktif. +
+ ++Untuk keperluan tutorial, kita menyederhanakan kebutuhan sistem blog kita agar hanya perlu berhadapan dengan pengguna dan data tulisan. Selanjutnya kita membuat dua tabel database, users dan posts, seperti diperlihatkan dalam duagram hubungan entitas atau entity-relationship (ER) di bawah ini. +
+ + + ++Kita menggunakan SQLite 3 database untuk menyimpan data kita. Pertama kita ubah diagram ER ke dalam pernyataan SQL berikut dan menyimpannya dalam file protected/schema.sql. +
+ ++Kemudian kita menggunakan piranti baris perintah SQLite untuk membuat SQLite database. Kita membuat sebuah direktori protected/data untuk menampung file database SQLite. Sekarang kita menjalankan perintah berikut di bawah direktori protected/data: +
+ ++Database sudah dibuat sebagai protected/data/blog.db dan kita akan melihat direktori dan file berikut: +
+ + + +