7 files changed, 400 insertions, 0 deletions
diff --git a/demos/blog-tutorial/protected/pages/Day5/id/ErrorLogging.page b/demos/blog-tutorial/protected/pages/Day5/id/ErrorLogging.page
new file mode 100644
index 00000000..9d69f1dd
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day5/id/ErrorLogging.page
@@ -0,0 +1,159 @@
+<com:TContent ID="Main">
+
+<h1>Penanganan Kesalahan dan Pencatatan</h1>
+
+<p>
+Jika kita mencoba mengakses URL <tt>http://hostname/blog/index.php?page=EditPost&id=100</tt>, kita akan melihat halaman kesalahan berikut karena tulisan dengan ID 100 belum ada dalam sistem blog kita. Kita ingin mengkustomisasi halaman kesalahan ini agar ia terlihat lebih konsisten dengan tata letak halaman blog lain. Kita juga ingin mencatat jenis kesalahan ini untuk mempelajari kebiasaan pengguna. Dalam bagian ini, kita akan melaksanakan dua tugas ini.
+</p>
+
+<img src="<%~ output2.gif %>" class="output" />
+
+<com:InfoBox>
+Tugas penting dalam aplikasi Web adalah <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.Error">penanganan kesalahan</a> yang sering dikaitkan dengan <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.Logging">pencatatan</a>. Ada dua jenis kesalahan yang bisa terjadi dalam aplikasi PRADO: yang disebabkan oleh para pengembang dan yang disebabkan oleh pengguna-akhir. Pembentuk harus dipecahkan sebelum aplikasi dijadikan tahap produksi, sementara yang terakhir biasanya di dalam lingkup desain awal dan harus ditangani dengan baik (misalnya mencatat kesalahan dan menampilkan halaman khusus yang menginstruksikan pengguna-akhir apa yang harus dilakukan selanjutnya). PRADO mengimplementasikan kerangka kerja yang fleksibel serta bertenaga untuk menangani kesalahan dan pencatatan.
+</com:InfoBox>
+
+
+<h2>Mengkustomisasi Penanganan Kesalahan</h2>
+
+<p>
+PRADO secara implisit mengambil modul <tt>TErrorHandler</tt> untuk menangani kesalahan. Kita ingin mengkustomisasi modul ini agar sistem blog kita dapat menampilkan halaman terkustomisasi untuk kesalahan yang disebabkan oleh pengguna-akhir. Selanjutnya memodifikasi konfigurasi aplikasi seperti berikut:
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+......
+<modules>
+    ......
+    <module class="Application.BlogErrorHandler" />
+    ......
+</modules>
+......
+</com:TTextHighlighter>
+
+<p>
+Kelas <tt>BlogErrorHandler</tt> seperti ditetapkan di atas adalah modul pengendali kesalahan baru as yang akan dibuat berikutnya. Ia memperluas dan mengganti modul standar <tt>TErrorHandler</tt>.
+</p>
+
+<p>
+Kita membuat sebuah file bernama <tt>protected/BlogErrorHandler.php</tt> seperti berikut. Kelas <tt>BlogErrorHandler</tt> mengganti dua metode <tt>TErrorHandler</tt>:
+</p>
+<ul>
+  <li><tt>getErrorTemplate()</tt> - metode ini mengembalikan string template yang dipakai untuk menampilkan kesalahan pengguna tertentu.</li>
+  <li><tt>handleExternalError()</tt> - metode ini dipanggil saat kesalahan pengguna terjadi dan menampilkan kesalahannya.</li>
+</ul>
+<com:TTextHighlighter CssClass="source" Language="php">
+Prado::using('System.Exceptions.TErrorHandler');
+Prado::using('Application.BlogException');
+
+class BlogErrorHandler extends TErrorHandler
+{
+	/**
+	 * Mengambil template yang dipakai untuk menampilkan eksepsi eksternal.
+	 * Metode ini mengganti implementasi leluhurnya.
+	 */
+	protected function getErrorTemplate($statusCode,$exception)
+	{
+		// gunakan template sendiri untuk BlogException
+		if($exception instanceof BlogException)
+		{
+			// ddapatkan path file template kesalahan: protected/error.html
+			$templateFile=Prado::getPathOfNamespace('Application.error','.html');
+			return file_get_contents($templateFile);
+		}
+		else // sebaliknya gunakan template yang didefinisikan oleh PRADO
+			return parent::getErrorTemplate($statusCode,$exception);
+	}
+
+	/**
+	 * Menangani kesalahan eksternal yang disebabkan oleh pengguna-akhir.
+	 * Metode ini mengganti implementasi leluhurnya.
+	 * Ini dipanggil oleh PRADO saat eksepsi eksternal dikeluarkan.
+	 */
+	protected function handleExternalError($statusCode,$exception)
+	{
+		// catat kesalahan (hanya untuk BlogException)
+		if($exception instanceof BlogException)
+			Prado::log($exception->getErrorMessage(),TLogger::ERROR,'BlogApplication');
+		// panggil implementasi leluhur untuk menampilkan kesalahan
+		parent::handleExternalError($statusCode,$exception);
+	}
+}
+</com:TTextHighlighter>
+
+<p>
+Dalam kode di atas, kita menetapkan bahwa saat <tt>BlogException</tt> dikeluarkan, kita menggunakan template baru <tt>protected/error.html</tt> untuk menampilkan kesalahan. Oleh karena itu, kita perlu membuat kelas <tt>BlogException</tt> dan mengganti semua <tt>THttpException</tt> yang ada dalam kode kita (seperti misalnya <a href="?page=Day3.CreateEditUser">EditUser</a> dan halaman <a href="?page=Day4.CreateReadPost">ReadPost</a>). Kita juga perlu membuat template kesalahan <tt>protected/error.html</tt>. Kelas <tt>BlogException</tt> memperluas <tt>THttpException</tt> dan kosong. File kelas disimpan sebagai <tt>protected/BlogException.php</tt>.
+
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="php">
+class BlogException extends THttpException
+{
+}
+</com:TTextHighlighter>
+
+<p>
+Di bawah ini konten dalam template kesalahan kita <tt>protected/error.html</tt>. Catatan, template bukan template PRADO karena ia hanya mengenal jumlah token yang sangat terbatas, seperti <tt>%%ErrorMessage%%</tt>, <tt>%%ServerAdmin%%</tt>.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+<html>
+<head>
+<title>%%ErrorMessage%%</title>
+</head>
+<body>
+<div id="page">
+<div id="header">
+<h1>My PRADO Blog</h1>
+</div>
+<div id="main">
+<p style="color:red">%%ErrorMessage%%</p>
+<p>
+The above error happened when the server was processing your request.
+</p>
+<p>
+If you think this is a server error, please contact the <a href="mailto:%%ServerAdmin%%">webmaster</a>.
+</p>
+</div>
+</body>
+</html>
+</com:TTextHighlighter>
+
+
+<h2>Mencatat Kesalahan</h2>
+
+<p>
+Dalam metode <tt>handleExternalError()</tt> pada  <tt>BlogErrorHandler</tt>, kita memanggil <tt>Prado::log()</tt> untuk mencatat kesalahan jika tipenya adalah <tt>BlogException</tt>. Kesalahan dicatat dalam memori. Untuk menyimpan catatan ke dalam medium permanen seperti file atau database, kita perlu menghidupkan rute pencatatan kesalahan yang sesuai. Ini dikerjakan dalam konfigurasi aplikasi seperti berikut:
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+......
+<modules>
+    ......
+    <module id="log" class="System.Util.TLogRouter">
+        <route class="TFileLogRoute" Categories="BlogApplication" />
+    </module>
+    ......
+</modules>
+......
+</com:TTextHighlighter>
+
+<p>
+Dalam konfigurasi di atas, kita menambahkan rute log yang menyimpan catatan ke dalam sebuah file. Kita juga menetapkan filter kategori sebagai <tt>BlogApplication</tt> agar hanya mencatat pesan pada kategori yang dipilih yang disimpan. Ini membantu mengurangi ukuran file catatan dan juga meningkatkan pembacaannya.
+</p>
+
+<h2>Pengujian</h2>
+<p>
+Untuk melihat bagaimana sistem blog kita merespon permintaan tidak benar dari pengguna, kita menguji URL <tt>http://hostname/blog/index.php?page=posts.ReadPost&id=100</tt>. Kita akan melihat halaman kesalahan berikut yang berbeda dari apa yang telah kita lihat sebelumnya.
+</p>
+
+<img src="<%~ output3.gif %>" class="output" />
+
+<p>
+Jika kita mencari di bawah direktori <tt>protected/runtime</tt>, kita akan menemukan file bernama <tt>prado.log</tt>. Ini adalah file log yang baru dikonfigurasi untuk menyimpan pesan kesalahan. File dapat berisi konten seperti berikut,
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+Jun 28 22:15:27 [Error] [BlogApplication] Unable to find the specified post.
+Jun 29 08:42:57 [Error] [BlogApplication] Unable to find the specified post.
+</com:TTextHighlighter>
+
+</com:TContent>
+\ No newline at end of file
diff --git a/demos/blog-tutorial/protected/pages/Day5/id/Performance.page b/demos/blog-tutorial/protected/pages/Day5/id/Performance.page
new file mode 100644
index 00000000..62a195b3
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day5/id/Performance.page
@@ -0,0 +1,67 @@
+<com:TContent ID="Main">
+
+<h1>Penyesuaian Performansi</h1>
+
+<p>
+Sebelum kita menyebarkan sistem blog, kita ingin menyesuaikan performansi sistem.
+</p>
+
+<h2>Mengubah Mode Aplikasi</h2>
+
+<p>
+Aplikasi PRADO dapat dikonfigurasi untuk berjalan dalam mode berbeda. Standarnya, ia berjalan dalam mode debug yang membuat banyak catatan pesan dan seandainya ada kesalahan, menampilkan pangilan stack lengkap atas tempat kesalahan. Perilaku demikian lebih disukai selama pengembangan, tapi tidak jika sistem sudah dalam produksi. Untuk mengubah mode aplikasi dari <tt>Debug</tt> ke <tt>Normal</tt> (berarti mode produksi), kita memodifikasi konfigurasi aplikasi seperti berikut:
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+<?xml version="1.0" encoding="utf-8"?>
+<application id="blog" mode="Normal">
+    ......
+</application>
+</com:TTextHighlighter>
+
+<h2>Menghidupkan Cache</h2>
+
+<p>
+Ada banyak pekerjaan penguraian terkait dalam sebuah aplikasi PRADO: konfigurasi XML, template, tema, skin, dll. Untuk setiap permintaan pengguna, PRADO perlu melakukan ulang penguraian. Untuk menghemat usaha ini, kita dapat menghidupkan cache. Untuk melakukannya, kita mengubah konfigurasi aplikasi seperti berikut,
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+......
+<modules>
+    ......
+    <module id="cache" class="System.Caching.TDbCache" />
+    ......
+</modules>
+......
+</com:TTextHighlighter>
+
+<p>
+Sekarang setelah mengakses setiap halaman dalam sistem blog kita, kita akan dapat menemukan file bernama <tt>sqlite3.cache</tt>. Ini adalah file database yang memelihara template halaman yang diuraikan, konfigurasi, dll.
+</p>
+
+<com:InfoBox>
+Modul cache yang baru kita hidupkan menggunakan database sebagai medium cache persisten. PRADO juga mempunyai modul cache lain yang menggunakan medium cache lebih cepat, seperti misalnya <tt>TMemCache</tt>, <tt>TAPCCache</tt>. Diperlukan instalasi dari ekstensi PHP terkait.
+</com:InfoBox>
+
+
+<h2>Menggunakan <tt>pradolite.php</tt></h2>
+
+<p>
+Menjalankan halaman PRADO melibatkan puluhan file PHP, yang dapat menghabiskan waktu. File-file ini juga membawa banyak komentar untuk membuat dokumentasi APU ramah-pengguna. Untuk mengurangi beban ini, kita memodifikasi <tt>index.php</tt> dan mengganti inklusi <tt>prado.php</tt> dengan <tt>pradolite.php</tt>. Yang kedua adalah file besar yang dibuat dengan menggabung file kode tertentu dan membuang komentar. Selanjutnya kita bisa mengubah <tt>index.php</tt> seperti berikut,
+</p>
+
+<h2>Teknik Lain</h2>
+
+<p>
+Ada teknik lain untuk meningkatkan performansi lebih lanjut terhadap aplikasi PRADO. Berdasarkan pengalaman kami, salah satu lubang botol dalam aplikasi Web adalah database tier. Query database seringkali membutuhkan waktu lama untuk menyelesaikannya, yang memperlambat waktu respon terhadap permintaan sebuah halaman. Cache adalah solusi utama untuk masalah ini. Modul cache yang dihidupkan dalam konfigurasi aplikasi kita juga bisa dipakai untuk keperluan ini.
+</p>
+
+<p>
+Untuk halaman yang relatif stabil dan jarang diakses, <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.OutputCache">output caching</a> bisa dipertimbangkan. Output caching melakukan cache output HTML dari bagian yang dipilih pada sebuah halaman. Ini dapat meningkatkan performansi dari halaman yang di-cache secara signifikan.
+</p>
+
+<p>
+Teknik cache server terbukti sangat efektif dalam meningkatkan performansi atas aplikasi PRADO. Sebagai contoh, kita telah mengamati bahwa dengan menggunakan Zend Optimizer, RPS (request per second) dari aplikasi PRADO bisa ditingkatkan lebih dari sepuluh kali lipat. Tentu saja, ini pada beban dari output lama, sementara teknik cache PRADO selalu memastikan kebenaran dari output.
+</p>
+
+</com:TContent>
+\ No newline at end of file
diff --git a/demos/blog-tutorial/protected/pages/Day5/id/Summary.page b/demos/blog-tutorial/protected/pages/Day5/id/Summary.page
new file mode 100644
index 00000000..eff9c2a9
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day5/id/Summary.page
@@ -0,0 +1,36 @@
+<com:TContent ID="Main">
+
+<h1>Ringkasan</h1>
+
+<p>
+Akhirnya kita dapat menyebarkan sistem blog kita. Untuk melakukannya, kita hanya perlu meng-copy seluruh direktori <tt>blog</tt> directory ke direktori Web sasaran. Kita perlu untuk memodifikasi <tt>index.php</tt> agar ia dapat mencari path yang benar di mana kerangka kerja PRADO diinstalasi.
+</p>
+
+<p>
+Dengan demikian kita telah menyelesaikan sistem blog kita. Proses terlihat tidak gampang karena ia memerlukan hampir lima hari untuk sampai di sini. Akan tetapi, karena kita memulainya dari awal, tujuan utama dari tutorial ini adalah untuk membantu para pengembang PRADO terbiasa dengan teknik yang umum digunakan dalam PRADO. Tutorial tidak berarti menyelesaikan sistem blog dalam waktu lima menit dan selanjutnya tidak mempelajari apapun.
+</p>
+
+<p>
+Secara ringkas, mengembangkan aplikasi PRADO dengan kendali-DB melibatkan langkah-langkah berikut:
+</p>
+<ol>
+  <li>Mendesain dan membuat database</li>
+  <li>Membuat tata letak aplikasi awal menggunakan <tt>prado-cli</tt></li>
+  <li>Menyiapkan proses pengendalian kesalahan untuk menghadapi kesalahan pengguna-akhir</li>
+  <li>Membuat dan menyiapkan tema</li>
+  <li>Mendesain dan membuat kelas master untuk berbagi tata letak umum halaman</li>
+  <li>Membuat kelas database dan menyiapkan koneksi database</li>
+  <li>Mendesain dan membuat bermacam-macam halaman</li>
+  <li>Menguji dan menyesuaikan performansi</li>
+  <li>Menyebarkan aplikasi</li>
+</ol>
+
+<p>
+Tidak seperti urutan dalam tutorial kita, pengendalian kesalahan dan pembuatan tema dikerjakan lebih awal dalam proses di atas. Ini dikarenakan seringkali diperlukan perubahan besar dalam kode kelas dan template. Sebagai contoh, kita perlu mengganti <tt>THttpException</tt> dengan <tt>BlogException</tt> dalam tutorial kita. Jika kita mendefinisikan kelas stylesheet lebih awal, kita dapat dengan mudah menggunakannya saat membuat template halaman.
+</p>
+
+<p>
+Sebagai tips terakhir, coba untuk berpikir dalam cara terorientasi-obyek selama mendesain dan mengimplementasikan. Gunakan turunan kelas dan komposisi secara luas, dan anda akan menemukan seluruh proyek lebih mudah dikembangkan secara paralel oleh multipel pengembang. Kode juga lebih banya memiliki kesempatan dipakai ulang agar proyek mendatang dapat diselesaikan dalam waktu yang lebih cepat.
+</p>
+
+</com:TContent>
+\ No newline at end of file
diff --git a/demos/blog-tutorial/protected/pages/Day5/id/UseTheme.page b/demos/blog-tutorial/protected/pages/Day5/id/UseTheme.page
new file mode 100644
index 00000000..6766d659
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day5/id/UseTheme.page
@@ -0,0 +1,138 @@
+<com:TContent ID="Main">
+
+<h1>Menggunakan Tema dan Skin</h1>
+
+<p>
+PRADO memiliki dukungan dasar untuk <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.Themes">tema</a>. Dengan menggunakan tema, kita dapat memisahkan logika dan penyajian secara lebih baik, dan kita juga bisa mengubah penampilan keseluruhan pada sistem blog kita jauh lebih mudah.
+</p>
+
+<h2>Membuat Tema</h2>
+
+<p>
+Pertama kita buat direktori baru bernama <tt>themes</tt>. Ini adalah direktori leluhur bagi semua tema terkait aplikasi PRADO tertentu. Setiap subdirektori di bawah direktori ini yang nama temanya adalah nama subdirektori.
+</p>
+
+<p>
+Untuk membuat tema bernama <tt>Basic</tt>, kita membuat subdirektori <tt>theme/Basic</tt>. Di bawah direktori ini, kita dapat menempatkan file stylesheet dependen-tema, file Javascript, gambar, dan file skin.
+</p>
+
+<com:InfoBox>
+Direktori <tt>themes</tt> harus bisa diakses dari Web, seperti halnya direktori <tt>assets</tt>. Jangan menempatkan file data sensitif di bawah direktori ini. Anda bisa mengubah nama atau lokasi dari direktori ini dengan mengkonfigurasi modul <a href="http://www.pradosoft.com/docs/classdoc/TThemeManager">TThemeManager</a> dalam konfigurasi aplikasi.
+</com:InfoBox>
+
+
+<h3>Membuat File Stylesheet</h2>
+
+<p>
+Di bawah direktori <tt>themes/Basic</tt>, kita membuat sebuah file CSS stylesheet bernama <tt>style.css</tt>. ketika sebuah halaman menggunakan tema ini, PRADO secara otomatis akan mengimpor stylesheet ini ke halaman. Hal yang sama terjadi untuk file Javascript.
+</p>
+
+<p>
+File CSS ditampilkan seperti berikut.
+</p>
+
+<com:TTextHighlighter CssClass="source">
+body {
+	font-family: verdana, 'trebuchet ms', sans-serif;
+	font-size: 10pt;
+	background: white;
+}
+#page {
+	margin: 0 auto 0 auto;
+	width: 600px;
+}
+#footer {
+	text-align: center;
+	margin-top: 10px;
+	padding: 10px;
+	border-top: 1px solid silver;
+}
+.post-box {
+	margin-bottom: 10px;
+	padding: 5px;
+}
+.post-box h3 {
+	padding: 5px;
+	font-size: 13pt;
+	background: lightgray;
+}
+.post-box a {
+	color: black;
+	text-decoration: none;
+}
+.post-box a:hover {
+	color: red;
+}
+</com:TTextHighlighter>
+
+
+<h3>Membuat File Skin</h2>
+
+<p>
+Kita menggunakan skin untuk menginisialisasi properti kontrol PRADO. Skin disimpan sebagai file skin (nama berakhiran <tt>.skin</tt>) di bawah direktori tema. Setiap file skin bisa berisi multipel skin untuk satu atau beberapa tipe kontrol.
+</p>
+
+<p>
+Sebagai pengujian, kita akan mencoba membuat sebuah skin yang mengubah warna latar belakang link tombol dalam footer halaman. Kita membuat sebuah file bernama <tt>button.skin</tt> di bawah direktori tema <tt>themes/Basic</tt>.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="prado">
+&lt;com:THyperLink SkinID="MainMenu" BackColor="lightgreen" />
+</com:TTextHighlighter>
+
+<p>
+File skin <tt>button.skin</tt> hanya berisi satu skin untuk kontrol <tt>THyperLink</tt> yang properti <tt>SkinID</tt>-nya adalah <tt>MainMenu</tt>. Skin menyetel warna latar belakang kontrol ke hijau-terang.
+</p>
+
+<p>
+Sejalan dengan itu, kita perlu memodifikasi <tt>protected/common/MainLayout.tpl</tt> agar link tombol dalam footer menggunakan <tt>MainMenu</tt> sebagai <tt>SkinID</tt>-nya.
+</p>
+<com:TTextHighlighter CssClass="source" Language="prado">
+......
+<div id="footer">
+......
+&lt;com:THyperLink Text="Home" SkinID="MainMenu"
+	NavigateUrl="&lt;%= $this->Service->DefaultPageUrl %>" />
+
+&lt;com:THyperLink Text="New Post" SkinID="MainMenu"
+	NavigateUrl="&lt;%= $this->Service->constructUrl('posts.NewPost') %>"
+	Visible="&lt;%= !$this->User->IsGuest %>" />
+......
+</div>
+......
+</com:TTextHighlighter>
+
+<com:InfoBox>
+Sintaks untuk file skin sangat mirip dengan template PRADO. Setiap tag <tt>&lt;com:&gt;</tt> mendefinisikan sebuah skin untuk tipe kontrol tertentu. PRADO secara otomatis mengumpulkan seluruh file skin dalam sebuah tema dan menerapkannya ketika halaman bertema sedang disajikan.
+</com:InfoBox>
+
+
+<h2>Menggunakan Tema</h2>
+
+<p>
+Untuk menggunakan tema yang baru kita buat, kita memodifikasi konfigurasi aplikasi seperti berikut. Seperti kita lihat, properti <tt>Theme</tt> untuk semua halaman disetel sebagai <tt>Basic</tt>, nama tema yang baru saja kita buat.
+</p>
+
+<com:TTextHighlighter CssClass="source" Language="xml">
+......
+  <services>
+    <service id="page" class="TPageService" DefaultPage="posts.ListPost">
+      <pages MasterClass="Application.layouts.MainLayout" Theme="Basic" />
+    </service>
+  </services>
+......
+</com:TTextHighlighter>
+
+<com:InfoBox>
+Dimungkinkan untuk menetapkan tema berbeda untuk halaman yang berbeda, dan ini dapat dikerjakan baik dalam konfigurasi aplikasi/halaman ataupun secara programatis (perhatikan <tt>Theme</tt> adalah properti halaman). Untuk yan gterakhir, ia harus dikerjakan dalam metode <tt>onPreInit()</tt> pada halaman karena PRADO menerapkan tema ke halaman sebelumnya dalam masa hidup halaman.
+</com:InfoBox>
+
+
+<h2>Pengujian</h2>
+<p>
+Untuk melihat bagaimana halaman blog terlihat, kunjungi URL <tt>http://hostname/blog/index.php</tt>. Kita akan melihat font, tata letak, bingkai beruah dalam halaman. Juga, link tombol dalam footer mempunyai latar belakang hijau terang.
+</p>
+
+<img src="<%~ output.gif %>" class="output" />
+
+</com:TContent>
+\ No newline at end of file
diff --git a/demos/blog-tutorial/protected/pages/Day5/id/output.gif b/demos/blog-tutorial/protected/pages/Day5/id/output.gif
new file mode 100644
index 00000000..67bd18a3
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day5/id/output.gif
diff --git a/demos/blog-tutorial/protected/pages/Day5/id/output2.gif b/demos/blog-tutorial/protected/pages/Day5/id/output2.gif
new file mode 100644
index 00000000..16c81704
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day5/id/output2.gif
diff --git a/demos/blog-tutorial/protected/pages/Day5/id/output3.gif b/demos/blog-tutorial/protected/pages/Day5/id/output3.gif
new file mode 100644
index 00000000..6879bbdf
--- /dev/null
+++ b/demos/blog-tutorial/protected/pages/Day5/id/output3.gif