7 files changed, 548 insertions, 0 deletions
diff --git a/demos/blog-tutorial/protected/pages/Day1/id/CreateContact.page b/demos/blog-tutorial/protected/pages/Day1/id/CreateContact.page
new file mode 100644
index 00000000..664363d0
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day1/id/CreateContact.page
@@ -0,0 +1,204 @@
+<com:TContent ID="Main">
+
+<h1>Membuat Halaman Kontak</h1>
+
+<p>
+Kita telah membuat halaman standar <tt>Home.page</tt> menggunakan <a href="http://www.pradosoft.com/demos/quickstart/?page=GettingStarted.CommandLine">piranti baris perintah PRADO</a>. Halaman relatif statis karena ia tidak berisi konten dinamis. Dalam bagian ini, kita akan membuat halaman interaktif bernama <tt>Contact</tt>.
+</p>
+
+<p>
+Kegunaan dari halaman <tt>Contact</tt> 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.
+</p>
+
+<p>
+Untuk membuat halaman <tt>Contact</tt>, kita memerluka dua file di bawah direktori <tt>pages</tt>: file template halaman <tt>Contact.page</tt> dan file kelas halaman <tt>Contact.php</tt>.
+</p>
+
+<img src="<%~ directories2.gif %>" class="output" />
+
+<com:InfoBox>
+<a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Pages">Halaman</a> harus berupa file <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1">template</a> (berekstensi <tt>.page</tt>) atau file kelas, atau keduanya:
+</p>
+
+<ul>
+<li>Hanya template-halaman yang biasanya berupa sebuah halaman sengan konten statis, seperti homepage yang sudah kita buat;</li>
+<li>Hanya file kelas halaman yang menghasilkan konten murni berdasarkan eksekusi metode kelas;</li>
+<li>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.</li>
+</ul>
+</com:InfoBox>
+
+
+<h2>Membuat Template Halaman</h2>
+
+<p>
+Pertama kita membuat file template untuk halaman <tt>Contact</tt>.
+</p>
+
+<p>
+Kita menggunakan template untuk menghatur tata letak penyajian terhadap formulir umpan balik. Dalam template, kita menggunakan <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.TextBox">kotak teks</a> untuk mengumpulkan nama pengguna, email dan umpan balik. Dan kita menggunakan <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Validation">validator</a> guna memastikan bahwa pengguna menyediakan semua informasi ini sebelum mengirimkan formulir umpan balik. Seluruh template adalah sebagai berikut,
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+<html>
+<head><title>My Blog - Contact</title></head>
+<body>
+<h1>Contact</h1>
+<p>Please fill out the following form to let me know your feedback on my blog. Thanks!</p>
+
+&lt;com:TForm> 
+
+<span>Your Name:</span>
+&lt;com:TRequiredFieldValidator ControlToValidate="Name"
+    ErrorMessage="Please provide your name." 
+    Display="Dynamic" />
+<br/>
+&lt;com:TTextBox ID="Name" />
+
+<br/>
+<span>Your Email:</span>
+&lt;com:TRequiredFieldValidator ControlToValidate="Email"
+    ErrorMessage="Please provide your email address." 
+    Display="Dynamic" />
+&lt;com:TEmailAddressValidator ControlToValidate="Email"
+    ErrorMessage="You entered an invalid email address." 
+    Display="Dynamic" />
+<br/>
+&lt;com:TTextBox ID="Email" />
+
+<br/>
+<span>Feedback:</span>
+&lt;com:TRequiredFieldValidator ControlToValidate="Feedback"
+    ErrorMessage="Please provide your feedback." 
+    Display="Dynamic" />
+<br/>
+&lt;com:TTextBox ID="Feedback" 
+    TextMode="MultiLine" 
+    Rows="10"
+    Columns="40" />
+
+<br/>
+&lt;com:TButton Text="Submit" OnClick="submitButtonClicked" />
+
+&lt;/com:TForm>
+
+</body>
+</html>
+</com:TTextHighlighter>
+
+<p>
+Seperti kita lihat bahwa template terlihat sangat mirip dengan halaman HTML normal. Perbedaan utamanya adalah bahwa template berisi beberapa tag <tt>&lt;com:&gt;</tt>. Setap tag <tt>&lt;com:&gt;</tt> merujuk ke sebuah <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Controls">kontrol</a> yang propertinya diinisialisasi dengan pasangan nama-nilai dalam tag. Sebagai contoh, <tt>&lt;com:TButton&gt;</tt> merujuk ke kontrol <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Button">TButton</a> guna menampilkan sebuah tombol di mana pengguna dapat di klik pengguna untuk mengirimkan formulir umpan balik. Untuk sintaks lengkap template, silahkan rujuk <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1">Tutorial Cepat</a>.
+</p>
+
+<com:InfoBox>
+PRADO menyediakan kontrol untuk setiap tipe input HTML. Sebagai contoh, <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.TextBox">TTextBox</a> menampilkan field input teks, <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.List">TDropDownList</a> menampilkan kotak kombo. Setiap kontrol adalah sebuah komponen yang dapat diakses dalam kode sebagai obyek dengan properti yang bisa dikonfigurasi.
+</com:InfoBox>
+
+<p>
+Selain kontrol <tt>TTextBox</tt>, 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:
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+<span>Your Email:</span>
+&lt;com:TRequiredFieldValidator 
+    ControlToValidate="Email"
+    ErrorMessage="Please provide your email address." 
+    Display="Dynamic" />
+&lt;com:TEmailAddressValidator 
+    ControlToValidate="Email"
+    ErrorMessage="You entered an invalid email address." 
+    Display="Dynamic" />
+<br/>
+&lt;com:TTextBox ID="Email" />
+<br/>
+</com:TTextHighlighter>
+
+<p>
+Di bawah ini kita meringkas kontrol yang dipakai dalam template halaman:
+</p>
+
+<ul>
+<li><a href="http://www.pradosoft.com/docs/classdoc/TForm">TForm</a> menampilkan sebuah formulir HTML. Setiap kontrol input harus dikurung di dalamnya. Dan yang terpenting, paling banyak satu <tt>TForm</tt> boleh muncul dalam sebuah halaman.</li>
+<li><a href="http://www.pradosoft.com/docs/classdoc/TTextBox">TTextBox</a> menampilkan kotak teks untuk mengumpulkan input teks pengguna.</li>
+<li><a href="http://www.pradosoft.com/docs/classdoc/TRequiredFieldValidator">TRequiredFieldValidator</a> memastikan bahwa kotak teks terkait tidak kosong saat umpan balik dikirimkan.</li>
+<li><a href="http://www.pradosoft.com/docs/classdoc/TEmailAddressValidator">TEmailAddressValidator</a> memastikan bahwa kotak teks berisi alamat email yang <i>benar</i> saat umpan balik dikirimkan.</li>
+</ul>
+
+<com:TipBox>
+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.
+</com:TipBox>
+
+
+<h2>Membuat Kelas Halaman</h2>
+
+<p>
+Sekarang kita membuat kelas halaman <tt>Contact.php</tt>. Alasan kita membutuhkan kelas halaman adalah karena kita perlu merespon umpan balik yang dikirimkan oleh pengguna.
+
+<p>
+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 <tt>submitButtonClicked()</tt> method. Here <tt>OnClick</tt> is the name of the user click event, and the method must be defined in the page class.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+  &lt;com:TButton Text="Submit" OnClick="submitButtonClicked" />
+</com:TTextHighlighter>
+
+<p>
+Selanjutnya kita menuliskan kelas halaman seperti berikut:
+</p>
+
+<com:TTextHighlighter CssClass="source">
+<?php
+class Contact extends TPage
+{
+    /**
+     * Pengendali event untuk event OnClick pada tombol submit.
+     * @param TButton tombol yang memicu event
+     * @param TEventParameter parameter event (null di sini)    
+     */
+    public function submitButtonClicked($sender, $param)
+    {
+        if ($this->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
+    }
+}
+?>
+</com:TTextHighlighter>
+
+<p>
+Kode di atas sebagian besar cukup jelas. Kenyataannya, kami hanya menampilkan skema pemrograman pengendalian-event. Dalam pengendali event <tt>submitButtonClicked()</tt>, kita mengambil input pengguna. Sebagai contoh, <tt>$this->Name->Text</tt> mengembalikan nilai properti <tt>Text</tt> dari kontrol <tt>Name</tt> yang merupakan kotak teks yang mengumpulkan informasi nama pengguna.
+</p>
+
+<com:InfoBox>
+Nama kelas halaman harus sama seperti nama file. Ini juga persyaratan untuk penulisan komponen kelas PRADO.
+</com:InfoBox>
+
+
+<h2>Pengujian</h2>
+
+<p>
+<tt>Contact</tt> yang baru saja kita buat dapat kita uji dengan URL <tt>http://hostname/blog/index.php?page=Contact</tt>. 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 <tt>mailFeedback()</tt> akan dipanggil.
+</p>
+
+<img src="<%~ output.gif %>" class="output" />
+
+<p>
+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.
+</p>
+
+<com:InfoBox>
+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.
+</com:InfoBox>
+
+</com:TContent>
+\ No newline at end of file
diff --git a/demos/blog-tutorial/protected/pages/Day1/id/Setup.page b/demos/blog-tutorial/protected/pages/Day1/id/Setup.page
new file mode 100644
index 00000000..16c8b498
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day1/id/Setup.page
@@ -0,0 +1,164 @@
+<com:TContent ID="Main">
+
+<h1>Persiapan Awal</h1>
+
+<p>
+Kita mulai dengan menyiapkan direktori dan file yang diperlukan oleh kebanyakan aplikasi PRADO. Kita menggunakan <a href="http://www.pradosoft.com/demos/quickstart/?page=GettingStarted.CommandLine">piranti baris perintah PRADO</a> untuk melaksanakan tujuan ini.
+</p>
+
+<p>
+Anggap <tt>blog</tt> adalah nama direktori untuk menampung seluruh sistem blog, dan URL untuk mengakses folder ini adalah <tt>http://hostname/blog/</tt> (ganti <tt>hostname</tt> dengan nama host sebenarnya).
+</p>
+
+<p>
+Di bawah direktori <tt>blog</tt>, kita menjalankan <a href="http://www.pradosoft.com/demos/quickstart/?page=GettingStarted.CommandLine">piranti baris perintah PRADO</a> dengan perintah berikut (ganti <tt>path/ke</tt> dengan path sebenarnya ke instalasi kerangka kerja PRADO):
+</p>
+<com:TTextHighlighter CssClass="source cli">
+php path/ke/prado-cli.php -c .
+</com:TTextHighlighter>
+
+<p>
+Menjalankan perintah di atas akan membuat direktori dan file berikut:
+</p>
+
+<img src="<%~ directories.gif %>" class="output" />
+
+<p>
+Sekarang kita mempunyai kerangka aplikasi PRADO yang dapat diakses melalui URL <tt>http://hostname/blog/index.php</tt> yang menampilkan halaman Web dengan tulisan "Welcome to PRADO".
+</p>
+
+<p>
+Sangat bermanfaat mempelajari lebih rinci mengenai direktori dan file yang baru saja kita buat.
+</p>
+
+
+<h2>File Awal</h2>
+
+<h3>Naskah Entri</h3>
+
+<p>
+Setiap aplikasi PRADO mempunyai naskah entri, sering dinamakan sebagai <tt>index.php</tt>. 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.
+</p>
+
+<p>
+Kegunaan utama dari naskah entri adalah untuk mengawali aplikasi PRADO dan membiarkan ia menangani permintaan pengguna. Naskah entri biasanya berisi pernyataan PHP berikut,
+</p>
+
+<com:TTextHighlighter CssClass="source">
+<?php
+// sertakan prado.php yang berisi kelas PRADO dasar
+require_once('path/to/prado.php');
+// buat turunan aplikasi PRADO
+$application = new TApplication;
+// jalankan aplikasi dan tangani permintaan pengguna
+$application->run();
+?>
+</com:TTextHighlighter>
+
+<com:InfoBox>
+Nama naskah entri tidak harus <tt>index.php</tt>. Ia dapat berupa nama apa saja selama server Web dapat mengatakan bahwa naskah adalah naskah PHP 5. Sebagai contoh, pada beberapa lingkungan hosting berbagi, seseorang mungkin perlu untuk menamai naskah sebagai <tt>index.php5</tt> agar ia bisa ditangani dengan benar oleh server the Web.
+</com:InfoBox>
+
+<h3>Konfigurasi Aplikasi</h3>
+<p>
+File XML <i>opsional</i> <tt>application.xml</tt> berisi <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.AppConfig">konfigurasi aplikasi</a>. Kegunaan utamanya adalah untuk mengkustomisasi dalam cara yang bisa mengkonfigurasi turunan aplikasi yang dibuat dalam naskah entri. Sevagai contoh, kita dapat menghidupkan fitur <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.Logging">pencatatan</a> untuk sistem blog kita dengan bantuan konfigurasi aplikasi.
+</p>
+
+<p>
+File <tt>application.xml</tt> 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 <tt>application.xml</tt>.
+</p>
+
+
+<h3>Homepage</h3>
+
+<p>
+Homepage (juga disebut halaman standar) <tt>Home.page</tt> adalah satu-satunya <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Pages">halaman</a> yang dibuat oleh piranti baris perintah PRADO. Berisi konten dalam file ini yang muncul dalam browser saat mengunjungi URL <tt>http://hostname/blog/index.php</tt>.
+</p>
+
+<p>
+Content in the file <tt>Home.page</tt> uses the <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1">PRADO template format</a>, which is mostly like HTML enhanced with a few PRADO-specific tags. For example, in <tt>Home.page</tt> we see the following pure HTML content:
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+<html>
+<head>
+  <title>Welcome to PRADO</title>
+</head>
+<body>
+<h1>Welcome to PRADO!</h1>
+</body>
+</html>
+</com:TTextHighlighter>
+
+
+<h2>Direktori Awal</h2>
+
+<h3>Direktori <tt>protected</tt></h3>
+
+<p>
+Direktori <tt>protected</tt>, juga dikenal sebagai <i>path basis aplikasi</i>, adalah direktori akar yang menampung halaman, template, konfigurasi, data, dll. Nama <tt>protected</tt> menunjukan bahwa direktori ini harus disembunyikan dari para pengguna Web, karena file di bawah direktori ini berisi data sensitif.
+</p>
+
+<p>
+Server Web berbeda mempunyai berbeda terhadap "melindungi" direktori. Untuk sever httpd Apache, cara termudah adalah untuk menempatkan file bernama <tt>.htaccess</tt> di bawah direktori dengan isi <tt>deny from all</tt>.
+</p>
+
+
+<h3>Direktori <tt>protected/runtime</tt> dan <tt>assets</tt></h3>
+
+<p>
+Direktori <tt>protected/runtime</tt> dan <tt>assets</tt> adalah dua direktori yang harus disetel bisa ditulisi oleh proses server Web. Direktori <tt>runtime</tt> menyimpan data sensitif (misalnya konfigurasi aplikasi yang diuraikan) yang dibuat saat menjalankan aplikasi PRADO, karena direktori <tt>assets</tt> menyimpan sumber daya yang dipublikasikan (misalnya file gambar, file javascript).
+</p>
+
+<com:InfoBox>
+Aman untuk menghapus file dan direktori di bawah <tt>protected/runtime</tt> dan <tt>assets</tt>. Sebenarnya para pengembang direkomendasikan untuk melakukan pekerjaan pembersihan ini ketika mereka memutakhirkan instalasi PRADO.
+</com:InfoBox>
+
+
+<h3>Direktori <tt>pages</tt></h3>
+
+<p>
+Direktori <tt>pages</tt> adalah <i>akar direktori halaman</i> yang menampung seluruh <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Pages">halaman</a> dalam sebuah aplikasi PRADO. Ini mirip analogi terhadap direktori <tt>htdocs</tt> pada server Web httpd Apache.
+</p>
+
+<p>
+Kita sudah melihat bagaimana cara mengakses homepage. Untuk mengakses halaman yang ditempatkan di bawah <tt>pages</tt>, menggunakan URL <tt>http://hostname/blog/index.php?page=path.ke.NamaHalaman</tt>. Berdasarkan URL ini, PRADO akan melihar halaman bernama <tt>NamaHalaman</tt> di bawah direktori <tt>pages/path/ke</tt>. URL yang kita pakai untuk mengakses homepage sebelumnya sama dengan <tt>http://hostname/blog/index.php?page=Home</tt>.
+</p>
+
+
+<h2>Kustomisasi</h2>
+
+<p>
+Dimungkinkan untuk mengkustomisasi nama dan lokasi terhadap file dan direktori yang dijelaskan di atas.
+</p>
+
+<p>
+Sebagai contoh, untuk meningkatkan keamanan, seseorang mungkin ingin memindahkan seluruh direktori <tt>protected</tt> ke tempat lain yang bukan folder Web. Untuk melakukannya, gunakan pernyataan PHP berikut untuk membuat turunan aplikasi dalam naskah entri:
+</p>
+
+<com:TTextHighlighter CssClass="source">
+$application = new TApplication( 'path/ke/protected' );
+</com:TTextHighlighter>
+
+<p>
+Untuk membuat lokasi akar direktori halaman dan mengubah nama homepage, seseorang dapat menetapkannya dalam konfigurasi aplikasi <tt>application.xml</tt> sebagai berikut:
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+<?xml version="1.0" encoding="utf-8"?>
+<application id="blog" mode="Debug">
+  <services>
+    <service id="page" 
+           class="TPageService" 
+           BasePath="path.to.pages"
+           DefaultPage="NewHome"
+           />
+  </services>
+</application>
+</com:TTextHighlighter>
+
+<p>
+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.
+</p>
+
+</com:TContent>
+\ No newline at end of file
diff --git a/demos/blog-tutorial/protected/pages/Day1/id/ShareLayout.page b/demos/blog-tutorial/protected/pages/Day1/id/ShareLayout.page
new file mode 100644
index 00000000..d505beed
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day1/id/ShareLayout.page
@@ -0,0 +1,180 @@
+<com:TContent ID="Main">
+
+<h1>Berbagi Tata Letak Umum</h1>
+
+<p>
+Dalam bagian ini, kita akan menggunakan fitur <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.MasterContent">master/content</a> 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 <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.MasterContent">master/content</a> membolehkan kita untuk menggunakan tata letak umum sebagai sebuah kontrol yang memusatkan logika dan penyajian tata letak umum untuk setiap halaman.
+</p>
+
+<com:InfoBox>
+Ini juga memungkinkan untuk membagi tata letak umum melalui <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1">penyertaan template</a>, yang mirip inklusi file PHP. Akibat dari penyertaan inklusi template ini adalah bahwa ia tidak berdiri sendiri dan tidak membawa kelas untuk mengisi logika untuk tata letak umum.
+</com:InfoBox>
+
+
+<h2>Membuat Kontrol Master</h2>
+
+<p>
+Sekarang kita membuat kontrol master <tt>MainLayout</tt> untuk mewakili tata letak umum berbagi dengan halaman blog kita. Kontrol <tt>MainLayout</tt> adalah kontrol template yang diperluas dari <tt>TTemplateControl</tt>. Ini mememerlukan file template <tt>MainLayout.tpl</tt> dan sebuah file kelas <tt>MainLayout.php</tt> yang ditempatkan di bawah direktori yang sama. Guna menjembatani pemeliharaan, kita membuat direktori baru <tt>protected/layouts</tt> untuk menampungnya.
+</p>
+
+<img src="<%~ directories3.gif %>" class="output" />
+
+<p>
+Untuk saat ini, <tt>MainLayout</tt> 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.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+<html>
+&lt;com:THead />
+<body>
+&lt;com:TForm>
+<div id="page">
+
+<div id="header">
+<h1>My PRADO Blog</h1>
+</div>
+
+<div id="main">
+&lt;com:TContentPlaceHolder ID="Main" />
+</div>
+
+<div id="footer">
+&lt;%= PRADO::poweredByPrado() %>
+</div>
+
+</div>
+&lt;/com:TForm>
+</body>
+</html>
+</com:TTextHighlighter>
+
+<p>
+Contoh di atas memperlihatkan konten dalam file template <tt>MainLayout.tpl</tt>. Tiga tag baru ini dipakai:
+</p>
+<ul>
+<li><tt>&lt;com:TContentPlaceHolder&gt;</tt> mewakili kontrol <a href="http://www.pradosoft.com/docs/classdoc/TContentPlaceHolder">TContentPlaceHolder</a>. Ia menyimpan tempat dalam template di mana konten akan ditempatkan. Di sini, konten datang dari halaman yang menggunakan kontrol master ini.</li>
+<li><tt>&lt;com:THead&gt;</tt> mewakili kontrol <a href="http://www.pradosoft.com/docs/classdoc/THead">THead</a> yang menyajikan tag &lt;head&gt; dalam HTML. Ia membolehkan PRADO untuk memanipulasi tag &lt;head&gt; sebagai sebuah komponen (misalnya setelan judul halaman, menambahkan gaya CSS kustom.)</li>
+<li><tt>&lt;%= %&gt;</tt> adalah sebuah <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates2#et">tag ekspresi</a>. Ia menampilkan hasil evaluasi daru ekspresi yang dikurung di tempat di mana ia muncul.</li>
+</ul>
+
+<p>
+File kelas <tt>MainLayout.php</tt> sangat sederhana:
+</p>
+
+<com:TTextHighlighter CssClass="source">
+<?php
+class MainLayout extends TTemplateControl
+{
+}
+?>
+</com:TTextHighlighter>
+
+<com:InfoBox>
+Nama ekstensi file untuk template halaman <tt>.page</tt>, sementara untuk template non-halaman yaitu <tt>.tpl</tt>. Ini untuk membedakan halaman dari kontrol lain. Keduanya menggunakan <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1">sintaks template</a> yang sama. Untuk halaman, file kelasnya adalah opsional (standarnya <tt>TPage</tt>), sementara untuk kontrol non-halaman, file kelasnya adalah mandatori. Mirip dengan Java, nama file kelas harus sama seperti nama kelas. Harap berhati-hati mengenai sensitifitas-huruf pada sistem Linux/Unix.
+</com:InfoBox>
+
+
+<h2>Menggunakan Kontrol Master</h2>
+<p>
+Untuk menggunakan kontrol master yang baru saja dibuat, kita akan memodifikasi <tt>Home.page</tt> dan <tt>Contact.page</tt>. 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 <tt>MainLayout</tt> sebagai masternya.
+</p>
+
+<p>
+Kode berikut memperlihatkan konten dalam <tt>Contact.page</tt> setelah perubahan:
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+&lt;%@ MasterClass="Application.layouts.MainLayout" Title="My Blog - Contact" %>
+
+&lt;com:TContent ID="Main">
+
+<h1>Contact</h1>
+<p>Please fill out the following form to let me know your feedback on my blog. Thanks!</p>
+
+...kotak teks dan validator untuk nama pengguna...
+
+...kotak teks dan  validator untuk emali pengguna...
+
+...kotak teks dan validator untuk konten umpan balik...
+
+&lt;com:TButton Text="Submit" OnClick="submitButtonClicked" />
+
+&lt;/com:TContent>
+</com:TTextHighlighter>
+
+<p>
+Konten yang dikurung di dalam tag <tt>&lt;com:TContent&gt;</tt> tag akan disisipkan ke dalam tempat yang disiapkan oleh <tt>&lt;com:TContentPlaceHolder&gt;</tt> pada template master.
+</p>
+
+<com:InfoBox>
+Dimungkinkan untuk memiliki multipel <tt>TContentPlaceHolder</tt> dalam sebuah template master dan multipel <tt>TContent</tt> dakan tenokate konten. Mereka saling dipasangkan dengan nilai <tt>ID</tt>-nya. Juga dimungkinkan untuk membuat template konten menjadi master template konten lainnya dengan menempatkan <tt>TContentPlaceHolder</tt> di pembentuk. Ini disebut <i>master berulang</i>.
+</com:InfoBox>
+
+<p>
+Selain <tt>&lt;com:TContent&gt;</tt>, kita juga melihat tag baru lain <tt>&lt;%@ %&gt;</tt> di atas, yang disebut <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1#tct">tag kontrol template</a>. Ia berisi pasangan nama-nilai yang dipakai untuk menginisialisasi properti terkait bagi pemilik template, yaitu, halaman <tt>Contact</tt>.
+</p>
+
+<p>
+Dengan menyetel properti <tt>MasterClass</tt> sebagai <tt>Application.layouts.MainLayout</tt>, kita menginstruksikan halaman <tt>Contact</tt> untuk menggunakan <tt>MainLayout</tt> sebagai masternya. Di sini, kita sedang menggunakan <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Components">format namespace</a> untuk merujuk ke kelas <tt>MainLayout</tt>.
+</p>
+
+<com:InfoBox>
+Format namespace sebagian besar dipakai dalam pemrograman PRADO. Dipakai bersama dengan <a href="http://www.pradosoft.com/demos/quickstart/index.php?page=Fundamentals.Components">alias path</a>. PRADO mendefinisikan dua alias path: <tt>System</tt> merujuk ke direktori <tt>framework</tt> pada instalasi PRADO, dan <tt>Application</tt> merujuk ke direktori <tt>protected</tt>. Namespace <tt>Application.layouts.MainLayout</tt> selanjutnya bisa diterjemahkan sebagai <tt>protected/layouts/MainLayout</tt> yang tepatnya adalah nama file (tanpa ekstensi <tt>.php</tt>) untuk kelas <tt>MainLayout</tt>.
+</com:InfoBox>
+
+
+<h2>Cara Alternatif Menetapkan Master</h2>
+
+<p>
+Ada beberapa cara tambahan untuk menetapkan kelas master untuk sebuah halaman.
+</p>
+
+<p>
+Kita dapat menetapkan master dalam kode seperti berikut untuk menghidupkan perubahan dinamis terhadap tata letak:
+</p>
+
+<com:TTextHighlighter CssClass="source">
+<?php
+class Contact extends TPage
+{
+    public function onPreInit($param)
+    {
+        parent::onPreInit($param);
+        $this->MasterClass='Path.To.NewLayout';
+    }
+
+    // ...
+}
+?>
+</com:TTextHighlighter>
+
+<p>
+Dalam contoh di atas, kita menetapkan <tt>MasterClass</tt> dalam metode <tt>onPreInit()</tt> yang diturunkan dari <tt>TPage</tt>. 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.
+</p>
+
+<p>
+Kita juga dapat menetapkan master dalam <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.AppConfig">konfigurasi aplikasi</a>  atau <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.PageConfig">konfigurasi halaman</a>. Kode berikut memperlihatkan konfigurasi aplikasi yang dimutakhirkan untuk sistem blog kita:
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+<?xml version="1.0" encoding="utf-8"?>
+<application id="blog" mode="Debug">
+  <!-- konfigurasi untuk layanan yang tersedia -->
+  <services>
+    <service id="page" class="TPageService" DefaultPage="Home">
+      <!-- initial properties set for all pages -->
+      <pages MasterClass="Application.layouts.MainLayout" />
+    </service>
+  </services>
+</application>
+</com:TTextHighlighter>
+
+<p>
+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.
+</p>
+
+<com:InfoBox>
+Ada urutan yang menentukan master yang mana yang sebenarnya diterapkan ketika ia ditetapkan dalam tempat multipel. Dalam keadaan tertentu, <tt>onPreInit()</tt> diambil lebih dulu di atas template halaman di atas konfigurasi aplikasi/halaman. Oleh karena itu, jika kita menetapkan <tt>MainLayout</tt> dalam konfigurasi aplikasi/halaman dan kita menetapkan <tt>SpecialLayout</tt> dalam <tt>Contact.page</tt>, master yang efektif adalah yang terakhir.
+</com:InfoBox>
+
+</com:TContent>
+\ No newline at end of file
diff --git a/demos/blog-tutorial/protected/pages/Day1/id/directories.gif b/demos/blog-tutorial/protected/pages/Day1/id/directories.gif
new file mode 100644
index 00000000..884e15bc
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day1/id/directories.gif
diff --git a/demos/blog-tutorial/protected/pages/Day1/id/directories2.gif b/demos/blog-tutorial/protected/pages/Day1/id/directories2.gif
new file mode 100644
index 00000000..edf264d0
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day1/id/directories2.gif
diff --git a/demos/blog-tutorial/protected/pages/Day1/id/directories3.gif b/demos/blog-tutorial/protected/pages/Day1/id/directories3.gif
new file mode 100644
index 00000000..3451935f
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day1/id/directories3.gif
diff --git a/demos/blog-tutorial/protected/pages/Day1/id/output.gif b/demos/blog-tutorial/protected/pages/Day1/id/output.gif
new file mode 100644
index 00000000..9ad2bfb8
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day1/id/output.gif