From 51db38c9423a1d3bf476bb30054cf3288ee16c88 Mon Sep 17 00:00:00 2001
From: xue <>
Date: Tue, 3 Apr 2007 21:43:22 +0000
Subject: Added blog-tutorial.
---
demos/blog-tutorial/protected/.htaccess | 1 +
demos/blog-tutorial/protected/application.xml | 13 ++
demos/blog-tutorial/protected/common/InfoBox.php | 13 ++
demos/blog-tutorial/protected/common/NoteBox.php | 13 ++
demos/blog-tutorial/protected/common/TipBox.php | 13 ++
demos/blog-tutorial/protected/common/TopicList.php | 8 +
demos/blog-tutorial/protected/common/TopicList.tpl | 70 ++++++++
.../blog-tutorial/protected/layout/MainLayout.php | 7 +
.../blog-tutorial/protected/layout/MainLayout.tpl | 44 +++++
.../protected/pages/Day1/CreateContact.page | 181 +++++++++++++++++++++
.../blog-tutorial/protected/pages/Day1/Setup.page | 161 ++++++++++++++++++
.../protected/pages/Day1/ShareLayout.page | 178 ++++++++++++++++++++
.../protected/pages/Day1/directories.gif | Bin 0 -> 3611 bytes
.../protected/pages/Day1/directories2.gif | Bin 0 -> 4147 bytes
.../protected/pages/Day1/directories3.gif | Bin 0 -> 3531 bytes
.../blog-tutorial/protected/pages/Day1/output.gif | Bin 0 -> 15045 bytes
.../protected/pages/Day2/ConnectDB.page | 8 +
.../protected/pages/Day2/CreateDB.page | 46 ++++++
demos/blog-tutorial/protected/pages/Day2/ER.gif | Bin 0 -> 4896 bytes
demos/blog-tutorial/protected/pages/Day2/ER.vsd | Bin 0 -> 73728 bytes
demos/blog-tutorial/protected/pages/Overview.page | 21 +++
.../protected/pages/Requirements.page | 38 +++++
22 files changed, 815 insertions(+)
create mode 100644 demos/blog-tutorial/protected/.htaccess
create mode 100644 demos/blog-tutorial/protected/application.xml
create mode 100644 demos/blog-tutorial/protected/common/InfoBox.php
create mode 100644 demos/blog-tutorial/protected/common/NoteBox.php
create mode 100644 demos/blog-tutorial/protected/common/TipBox.php
create mode 100644 demos/blog-tutorial/protected/common/TopicList.php
create mode 100644 demos/blog-tutorial/protected/common/TopicList.tpl
create mode 100644 demos/blog-tutorial/protected/layout/MainLayout.php
create mode 100644 demos/blog-tutorial/protected/layout/MainLayout.tpl
create mode 100644 demos/blog-tutorial/protected/pages/Day1/CreateContact.page
create mode 100644 demos/blog-tutorial/protected/pages/Day1/Setup.page
create mode 100644 demos/blog-tutorial/protected/pages/Day1/ShareLayout.page
create mode 100644 demos/blog-tutorial/protected/pages/Day1/directories.gif
create mode 100644 demos/blog-tutorial/protected/pages/Day1/directories2.gif
create mode 100644 demos/blog-tutorial/protected/pages/Day1/directories3.gif
create mode 100644 demos/blog-tutorial/protected/pages/Day1/output.gif
create mode 100644 demos/blog-tutorial/protected/pages/Day2/ConnectDB.page
create mode 100644 demos/blog-tutorial/protected/pages/Day2/CreateDB.page
create mode 100644 demos/blog-tutorial/protected/pages/Day2/ER.gif
create mode 100644 demos/blog-tutorial/protected/pages/Day2/ER.vsd
create mode 100644 demos/blog-tutorial/protected/pages/Overview.page
create mode 100644 demos/blog-tutorial/protected/pages/Requirements.page
(limited to 'demos/blog-tutorial/protected')
diff --git a/demos/blog-tutorial/protected/.htaccess b/demos/blog-tutorial/protected/.htaccess
new file mode 100644
index 00000000..e0198322
--- /dev/null
+++ b/demos/blog-tutorial/protected/.htaccess
@@ -0,0 +1 @@
+deny from all
diff --git a/demos/blog-tutorial/protected/application.xml b/demos/blog-tutorial/protected/application.xml
new file mode 100644
index 00000000..5eac200b
--- /dev/null
+++ b/demos/blog-tutorial/protected/application.xml
@@ -0,0 +1,13 @@
+
+
+
+ |
+
+
+
+
+ |
+
+We have created a default page Home.page using the PRADO command line tool. The page is relatively static because it does not containt dynamic content. In this section, we will create an interactive page named Contact. +
+ ++The purpose of the Contact page is to collect feedback from Web users of our blog system. To achieve this goal, we plan to present users a feedback form to fill with. In this form, we will require users to provide their name, email address and feedback content. After the form is filled and submitted, an email containing the feedback will be sent to the site administrator. +
+ ++To create the Contact page, we need two files under the pages directory: the page template file Contact.page and the page class file Contact.php. +
+ + + ++We first create the template file for the Contact page. +
+ ++We use template to organize the presentational layout of the feedback form. In the template, we use textboxes to collect user's name, email and feedback. And we use validators to ensure that the user provides all these information before submitting the feedback form. The whole template looks like the following: +
+ +Please fill out the following form to let me know your feedback on my blog. Thanks!
+ +<com:TForm> + + ...textbox and validator for user's name... + + ...textbox and validators for user's email... + + ...textbox and validator for user's feedback content... + + <com:TButton Text="Submit" OnClick="submitButtonClicked" /> + +</com:TForm> + + + ++The template looks very similar to a normal HTML page. The main difference is that the template contains a few <com:> tags. Each <com:> tag refers to a control whose properties are being initialized with name-value pairs in the tag. For example, the <com:TButton> refers to the TButton control which displays a button that users can click on to submit the feedback form. For complete template syntax, please refer to the Quickstart Tutorial. +
+ ++The following template shows the detail about "...textbox and validators for user's email..." in the above. +
+ ++Three controls are used here: +
+ ++We now create the page class Contact.php. The reason we need a page class is because we need to respond to the feedback that the user submits. + +
+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. +
+ ++We thus write down the page class as follows: +
+ ++The above code is largely self-explanatory. In fact, we just show the event-driven programming scheme. In the event handler submitButtonClicked(), we retrieve the user's input. For example, $this->Name->Text returns the Text property value of the Name control which is the textbox collecting user's name information. +
+ ++Our newly created Contact can be tested via the URL http://hostname/blog/index.php?page=Contact. If we click on the submit button without entering any information, we will see error messages appearing next to the corresponding textboxes. If we enter all required information, the method mailFeedback() will be invoked. +
+ + + ++A further enhancement to this page is to show some confirmation message on the page after the user submits feedback. And possibly, the browser may be redirected to another page if the submission is successful. We will leave these tasks to our readers. +
+ ++We start by setting up the directories and the files that are required by most PRADO applications. We use the PRADO command line tool to achieve this goal. +
+ ++Assume blog is the name of the directory to hold the whole blog system, and the URL to access this folder is http://hostname/blog/ (replace hostname with the actual host name). +
+ ++Under the blog directory, we run the PRADO command line tool with the following command (replace path/to with the actual path to the PRADO framework installation): +
++Running the above command creates the following directories and files: +
+ + + ++We now have a skeleton PRADO application accessible via the URL http://hostname/blog/index.php which brings up a Web page showing "Welcome to PRADO". +
+ ++It is beneficial to learn more details about the directories and files we just created. +
+ + ++Every PRADO application has an entry script, often named as index.php. In most cases, it is the only PHP script that is directly accessible by Web users. This reduces the risk of allowing Web users to execute unwanted scripts on the server. +
+ ++The main purpose of the entry script is to initialize the PRADO application and have it handle user requests. The entry script usually contains the following PHP statements, +
+ ++The optional XML file application.xml contains the application configuration. Its main purpose is to customize in a configurable fashion the application instance created in the entry script. For example, we may enable the logging feature for our blog system with the help of application configuration. +
+ ++The file application.xml we have now is nearly empty. In fact, we may safely remove it because the application at the moment uses only default settings of PRADO. As we move forward, we will refer back constantly and show how to configure our application in application.xml. +
+ + ++The homepage (also called default page) Home.page is the only page created by the PRADO command line tool. It is the content in this file that shows up in the browser when visiting the 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: +
+ ++The protected directory, also known as the application base path, is the root directory holding pages, templates, configurations, data, etc. The name protected indicates this directory should be hidden from Web users, because files under this directory often contain sensitive data. +
+ ++Different Web servers have different ways of "protecting" a directory. For Apache httpd server, the easiest way is to place under the directory a file named .htaccess with the content deny from all. +
+ + ++The protected/runtime and assets directories are the two directories that must be set writable by the Web server process. The runtime directory stores sensitive data (e.g. parsed application configuration) generated when running a PRADO application, while the assets directory stores published resources (e.g. image files, javascript files). +
+ ++The pages directory is the root page directory holding all pages in a PRADO application. It bears an analogy to the htdocs directory for the Apache httpd Web server. +
+ ++We already see how to access the homepage. To access an arbitrary page located under pages, use the URL http://hostname/blog/index.php?page=path.to.PageName. According to this URL, PRADO will look for a page named PageName under the directory pages/path/to. The URL we used to access the homepage previously is equivalent to http://hostname/blog/index.php?page=Home. +
+ + ++It is possible to customize the name and location of the files and directories described above. +
+ ++For example, to improve security, one may want to move the whole protected directory to somewhere else that is not a Web folder. To do so, use the following PHP statement to create the application instance in the entry script: +
+ ++To change the location of the root page directory and change the name of homepage, one can specify it in the application configuration application.xml as follows: +
+ ++As you learn more about PRADO, you will see that PRADO is such a flexible framework that it allows you to customize nearly every aspect. We will describe more customization techniques as we continue with our tutorial. +
+ ++In this section, we will use the master/content feature of PRADO to share common layout among pages. Common layout refers to the area that is the same or largely the same for a set of pages. For example, in our blog system, all pages will share the same header, footer and side-bar containing shortcut links. A straightforward implementation is to repeat the common layout in every page. However, this approach is prone to error and is hard to maintain. The master/content feature allows us to treat the common layout as a control which centralizes the logic and presentation of the common layout for every page. +
+ ++We now create the master control MainLayout to represent the common layout shared by our blog pages. The MainLayout control is a template control extending from TTemplateControl. It requires a template file MainLayout.tpl and a class file MainLayout.php located under the same directory. To facilitate maintenance, we create a new directory protected/layouts to hold them. +
+ + + ++For the moment, MainLayout only contains a simple header and a footer, as shown in the following. In future, we will add a side-bar to it. Readers are also encouraged to enhance the layout with other features. +
+ ++The above shows the content in the template file MainLayout.tpl. Three new tags are used: +
++The class file MainLayout.php is very simple: +
+ ++To use the newly created master control, we will modify Home.page and Contact.page. In particular, we need to remove the header and footer from them because the master control will be responsible for displaying them; and we need to tell the two pages that they should use MainLayout as their master. +
+ ++The following shows the content in Contact.page after the change: +
+ +Please fill out the following form to let me know your feedback on my blog. Thanks!
+ +...textbox and validator for user's name... + +...textbox and validators for user's email... + +...textbox and validator for user's feedback content... + +<com:TButton Text="Submit" OnClick="submitButtonClicked" /> + +</com:TContent> ++Content enclosed within the <com:TContent> tag will be inserted into the place that is reserved by <com:TContentPlaceHolder> in the master template. +
+ ++Besides <com:TContent>, we also see another new tag <%@ %> in the above, which is called template control tag. It contains name-value pairs which are used to initialize the corresponding properties for the template owner, namely, the Contact page. +
+ ++By setting MasterClass property as Application.layouts.MainLayout, we instruct the Contact page to use MainLayout as its master. Here, we are using the namespace format to refer to the MainLayout class. +
+ ++There are several additional ways to specify the master class for a page. +
+ ++We can specify master in code like the following to enable dynamic change of layout: +
+ ++In the above, we specify MasterClass in the onPreInit() method which is inherited from TPage. The method is invoked by PRADO right after the page instance is created. We thus can dynamically determine the layout to use when the page is requested. For example, when the page is requested by a registered user we use layout A, and layout B is used if a guest user is requesting the page. +
+ ++We can also specify master in application configuration or page configuration. The following shows the updated application configuration for our blog system: +
+ ++By doing so, we save the trouble of specifying master in every page template. If we decide to use a different master for the pages, we only need to change the application configuration. For this reason, in our blog system we will use this approach to specify master. +
+ ++
+ ++Most Web applications use database to keep data. Our blog system is not an exception. In this section, we will describe how to write database-driven pages for our blog system. We will use techniques including database access object (DAO) and active record. +
+ ++For tutorial purpose, we have simplified the requirements of our blog system so that it only needs to deal with user and post data. We thus create two database tables, users and posts, as shown in the following entity-relationship (ER) diagram. +
+ + + ++The corresponding SQL statements for creating the tables are as follows, +
+ ++We use a SQLite 3 database to keep our data. +
+ + ++The purpose of this tutorial is to provide new PRADO users a step-by-step guidance on how to develop a blog system using PRADO. A more definitive guidance about PRADO is the Quickstart Tutorial, which readers can refer to when reading this tutorial. +
+ ++Readers of this tutorial are not required to have prior knowledge about PRADO. However, readers should have basic knowledge of object-oriented programming (OOP) and database programming. +
+ ++This tutorial is organized in a day-by-day fashion. Each day new PRADO concepts and techniques are introduced, and new features are added to the blog system. At the end, we will complete a simple blog application that meets the initial requirements. +
+ ++In order to follow the tutorial to create and run the day-by-day examples, readers should have access to a Web server installed with PHP 5.1.0+ and PRADO 3.1+. Instructions for installing PRADO can be found at pradosoft.com. +
+ ++This page lists the requirements for the blog system that we are going to develop in this tutorial using PRADO. We are not including some popular blog features here (e.g. commenting, posts organizing, calendar, etc.), because we want to keep our tutorial short enough and we believe these features are easy to be added after you finish reading this tutorial. +
+ ++In general, the blog system should allow users to read blogs and authenticated users to publish blogs. It should separate presentation and logic, and it should support changing themes. +
+ +