[phpwebapp-commits] CVS: documentation/templates/tutorial weboxes.html,1.2,1.3 transitions.html,1.4,
Brought to you by:
dashohoxha
Menu
▾
▴
[phpwebapp-commits] CVS: documentation/templates/tutorial weboxes.html,1.2,1.3 transitions.html,1.4,1.5 templates.html,1.4,1.5
|
From: Dashamir H. <das...@us...> - 2003-08-20 07:50:02
|
Update of /cvsroot/phpwebapp/documentation/templates/tutorial
In directory sc8-pr-cvs1:/tmp/cvs-serv10531/templates/tutorial
Modified Files:
weboxes.html transitions.html templates.html
Log Message:
Index: weboxes.html
===================================================================
RCS file: /cvsroot/phpwebapp/documentation/templates/tutorial/weboxes.html,v
retrieving revision 1.2
retrieving revision 1.3
diff -C2 -d -r1.2 -r1.3
*** weboxes.html 15 Aug 2003 07:37:30 -0000 1.2
--- weboxes.html 20 Aug 2003 07:33:55 -0000 1.3
***************
*** 1,23 ****
! <h3>3 - Introducing WebBox-es</h3>
! Some of the templates are turned into weboxes.
! Explains the fundamental difference between a template
! and a webox. The PHP code of the weboxes
! declares the function onRender(), where some variables
! are added using WebApp::addVar(), and these {{variables}}
! are used in the corresponding template.
! <br><br>
<span class="button">
! <a href="javascript: alert('Sorry! Not implemented yet.')">Test</a>
</span>
<span class="button">
! <a href="javascript: alert('Sorry! Not implemented yet.')">Browse</a>
</span>
- <br><br>
- <hr>
<br>
<ul>
! <li>
! <li>
! <li>
</ul>
--- 1,447 ----
+ <h2>3 - Introducing WebBox-es</h2>
! <p>Explains what are WebBox-es and their differences with templates.
! The PHP code of the WebBox-es declares template {{#variables}}
! in the onRender() function, by using WebApp::addVar(). Gives some
! tips about good programming practices with WebBox-es. Shows how to
! debug them. Explains as well the files 'init.php', 'global.php',
! 'before_page.php', 'after_page.php' and the structure of the
! application.</p>
<span class="button">
! <a href="{{UP_URL}}app3/" target= "_blank">Test</a>
</span>
<span class="button">
! <a href="{{UP_URL}}app3/browse.php" target="_blank">Browse</a>
! </span>
! <span class="button">
! <a href="http://phpwebapp.sourceforge.net/download/app3.tar.gz">Download</a>
</span>
<br>
+
+ <hr>
+
+ <h3><a name="toc">Table of Contents</a></h3>
+
<ul>
! <li>
! <a href="#webboxes">WebBox-es</a>
!
! <ol>
! <li><a href="#phpcode">The PHP code of a WebBox</a></li>
!
! <li><a href="#onrender">The function <em>onRender()</em></a></li>
!
! <li><a href="#files">Files related to a WebBox</a></li>
! </ol>
! </li>
!
! <li><a href="#tips">Tips about using WebBox-es</a></li>
!
! <li><a href="#optional">Optional framework files</a></li>
!
! <li><a href="#study">Study the sample application</a></li>
!
! <li>
! <a href="#exercises">Exercises</a>
!
! <ol>
! <li><a href="#exercise_1">Modify page2.html and
! page3.html</a></li>
!
! <li><a href="#exercise_2">Rename folder <em>img</em> to
! <em>images</em></a></li>
!
! <li><a href="#exercise_3">Divide Page1 further into
! subtemplates</a></li>
!
! <li><a href="#exercise_4">Move Page1 to a new folder</a></li>
!
! <li><a href="#exercise_5">Change the styles of the
! page1_content</a></li>
!
! <li><a href="#exercise_6">Move template tpl_2.html and its
! related files to folder <em>page3/tpl_2/</em></a></li>
!
! <li><a href="#exercise_7">Think about it</a></li>
! </ol>
! </li>
! </ul>
! <hr>
!
! <a name="webboxes"></a>
!
! <h3>WebBox-es</h3>
!
! <p>A WebBox is a template which has also some <em>PHP</em> code associated
! with it. It is a self-contained and independent template which can be easily
! included in other pages or in other applications. In fact, it may also have
! some <em>JavaScript</em> code, <em>CSS</em> stylesheets, <em>SQL</em>
! queries etc., associated with it.</p>
!
! <p>It is denoted by the tag <strong><WebBox></strong> and it has an
! <strong>ID</strong> attribute:</p>
! <pre>
! <WebBox ID="box_id">
! <!-- content of WebBox -->
! </WebBox>
! </pre>
! <p>The identifier must be different for each WebBox used in the
! application.</p>
!
! <a name="phpcode"></a>
!
! <h4>1 - The PHP code of the WebBox-es</h4>
!
! <p>The <em>PHP</em> code (as well as <em>JS</em> code, <em>CSS</em>
! styles etc.) are associated to the WebBox by means of
! <strong>box_id</strong>, the identifier of the WebBox. When the
! framework parses a <strong><WebBox></strong> tag, it looks for a
! file named <strong>box_id.php</strong> in the same folder where the
! WebBox template is. If it finds such a file, it includes it.</p>
!
! <p>The <strong>box_id.php</strong> file must contain the definition
! of a <em>PHP</em> class that extends the class <strong>WebObject</strong>,
! like this:</p>
! <pre>
! <?php
! class <strong>box_id</strong> extends <strong>WebObject</strong>
! {
! .
! .
! .
! }
! ?>
! </pre>
!
! <p>See this example:
! <a href="javascript:codeReview('{{APP3_PATH}}templates/menu/menu.html','1')">
! <em>templates/menu/menu.html</em></a>,
! <a href="javascript:codeReview('{{APP3_PATH}}templates/menu/menu.php','2')">
! <em>templates/menu/menu.php</em></a>.
! </p>
!
! <p>The class <strong>WebObject</strong> is defined by the framework.
! Among other things, it also contains the member functions
! <strong>WebObject::init()</strong>,
! <strong>WebObject::onParse()</strong> and
! <strong>WebObject::onRender()</strong>. We will discuss in the next
! tutorial the first two functions, and will deal here only with the
! last one.</p>
!
! <a name="onrender"></a>
!
! <h4>2 - The function <em>onRender()</em></h4>
!
! <p>The function <strong>onRender()</strong> of the class
! <em>WebObject</em> is called by the framework at the time of the
! <em>HTML</em> page construction (the page that is sent to the
! browser), just before the template of the WebBox is outputed
! (rendered). Actually <strong>WebObject::onRender()</strong> is an
! abstract (empty) function, and the framework expects the class
! <strong>box_id</strong> to override it, in order to do something
! useful for the WebBox.</p>
!
! <p>What is usually done in <strong>box_id::onRender()</strong> is
! assigning values to the variables used in the template of the WebBox
! <em>box_id</em>, so that the template is rendered properly.
! These values are assigned by the function
! <strong>WebApp::addVar("var_name", "var_value")</strong>.
! E.g. see how it is done in the WebBox <em>tip</em>:
! <a href="javascript:codeReview('{{APP3_PATH}}templates/tip/tip.html','5')">
! <em>templates/tip/tip.html</em></a>,
! <a href="javascript:codeReview('{{APP3_PATH}}templates/tip/tip.php','10,13')">
! <em>templates/tip/tip.php</em></a>.
! The framework replaces the variables {{#rand}} and {{#tip_text}} by the
! values assigned in onRender() and generates <em>HTML</em> code. </p>
!
! <a name="files"></a>
!
! <h4>3 - Files related to a WebBox</h4>
!
! <p>The templates may contain some special comments as well:</p>
! <pre>
! <!--# Framework comments #-->
! </pre>
!
! <p>These comments are like HTML comments but they have a diesis
! <strong>#</strong> at the opening and closing marks. These comments
! are not processed (are skiped, ignored) by the framework and are not
! displayed in the HTML page that is generated.
! <a href="javascript:codeReview('{{APP2_PATH}}templates/header.html','1-3')">
! Example</a>.</p>
!
! <span class="button"><a href="#toc">TOC</a></span>
! <hr>
!
! <h3><a name="study">Study the sample</a></h3>
!
! <p>Here we will highlight and discuss some of the features of the
! sample application, so that we can understand it better.</p>
!
! <ul>
! <li>All the templates of the application are placed in the folder
! <em>/templates/</em>. We tell to the framework where to look for the
! templates by giving an appropriate value to the constant
! <strong>TPL_PATH</strong>
! in the file
! <a href="javascript:codeReview('{{APP2_PATH}}config/const.Paths.php','4')">
! <em>config/const.Paths.php</em></a>.
! <br>
! <br></li>
!
! <li>All the images of this application are placed in the folder
! <em>/img/</em>. In templates they are linked using the
! <strong>{{#IMG_URL}}</strong> variable.
! <a href="javascript:codeReview('{{APP2_PATH}}templates/footer.html','9,10')">
! See</a> how it is used. The <strong>{{#IMG_URL}}</strong> template
! variable gets the value from the PHP constant <strong>IMG_URL</strong>,
! which is declared in the file
! <a href="javascript:codeReview('{{APP2_PATH}}config/const.Paths.php','6')">
! <em>config/const.Paths.php</em></a>.
! <br>
! <br></li>
!
! <li>All the files and templates of the page3 are placed in the
! folder <em>/templates/page3/</em>. Organizing files into folders and
! subfolders reduces the complexity of the application and makes it
! easier to be understood and maintained.
! <a href="javascript:codeReview('{{APP2_PATH}}templates/footer.js','17')">
! Notice</a> how the transition to page3 is done.
! <br>
! <br></li>
!
! <li>All the pages include the same header and footer template, e.g. see
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page1.html','7,9')">
! page1.html</a>. If you want to change something in the footer of
! the page, then you don't have to change every page, but you make
! the change only once in the footer.
! <br>
! <br></li>
!
! <li><a href="{{APP2_URL}}browse.php" target="_blank">Browse</a>
! the files of the application and see the templates <em>page1.html</em>,
! <em>header.html</em>, <em>footer.html</em>, <em>page1_content.html</em>.
! See them both in preview mode and in code view mode (select the "Code View"
! mode in the panel at the top and then click "Refresh").
! <br>
! <br></li>
!
! <li>Browse the files and see the template <em>page2.html</em> and all
! the templates in the folder <em>/templates/page3/</em>. See them both in
! preview mode and in code view mode. These two pages are the same
! in terms of what they display, however they are implemented
! differently in the server. <em>page2.html</em> is implemented as a flat
! big HTML file, while <em>page3.html</em> is structured, divided into
! several small subtemplates. Try to make the same modification in
! both of them and see which one is easier to be modified.
! <br>
! <br></li>
</ul>
+
+ <span class="button"><a href="#toc">TOC</a></span>
+ <hr>
+
+ <h3><a name="exercises">Exercises</a></h3>
+
+ <p>Before starting the exercises, make a copy of the application
+ <em>app2</em> to the folder <em>test/app2</em>. If you have problems
+ with doing this (e.g. <em>test/app2</em> doesn't work) then see the
+ <a href="javascript:tabs3_select('tabs3::tutorial','transitions')">
+ first tutorial</a>, second exercise.</p>
+
+ <a name="exercise_1"></a>
+
+ <h4>1 - Modify page2.html and page3.html</h4>
+
+ <p>Change to red the color of the tpl_2_1 box, and change the text
+ inside it to "This box is red!".</p>
+
+ <p>Modify page2.html:</p>
+
+ <ol>
+ <li>Open the file
+ <a href="javascript:codeReview('{{APP2_PATH}}templates/page2.css','52,59')">
+ page2.css</a> and change the color in the highlighted lines to
+ <em>red</em>.</li>
+
+ <li>Open the file
+ <a href="javascript:codeReview('{{APP2_PATH}}templates/page2.html','60')">
+ page2.html</a> and change the text in the highlighted lines to
+ "This box is red!".</li>
+ </ol>
+
+ <p>Modify page3.html:</p>
+
+ <ol>
+ <li>Open the file <a href=
+ "javascript:codeReview('{{APP2_PATH}}templates/page3/tpl_2_1.css','5,12','')">
+ tpl_2_1.css</a> and change the color in the highlighted lines to
+ <em>red</em>.</li>
+
+ <li>Open the file <a href=
+ "javascript:codeReview('{{APP2_PATH}}templates/page3/tpl_2_1.html','5-6','')">
+ tpl_2_1.html</a> and change the text in the highlighted line to
+ "This box is red!".</li>
+ </ol>
+
+ <p>Which of the pages do you think is easier to be modified?</p>
+
+
+ <a name="exercise_2"></a>
+
+ <h4>2 - Rename folder <em>img</em> to <em>images</em></h4>
+
+ <ol>
+ <li>Rename folder <em>img</em> to <em>images</em>:
+ <kbd>$ mv img images</kbd> <br>
+ Test the application; the images will be broken.</li>
+
+ <li>Change the value of the <strong>IMG_URL</strong> constant in the file
+ <a href="javascript:codeReview('{{APP2_PATH}}config/const.Paths.php','6')">
+ const.Paths.php</a>.
+ Reload the application. The images should be allright.</li>
+ </ol>
+
+ <p>If all the images in the application are linked like this:
+ <kbd><img src="{{#IMG_URL}}image_name.png"/></kbd>
+ there will be no problem. However, if any image is hard linked
+ like this: <kbd><img src="/img/image_name.png"/></kbd>
+ it will not be displayed.</p>
+
+ <a name="exercise_3"></a>
+ <h4>3 - Divide Page1 further into subtemplates</h4>
+
+ <ol>
+ <li>Open the file
+ <a href="javascript:codeReview('{{APP2_PATH}}templates/page1_content.html','9-14')">
+ page1_content.html</a> and copy the selected lines to the file
+ <em>tpl_vars.html</em>.</li>
+
+ <li>Replace the selected lines with this line: <br>
+ <kbd><Include SRC="{{#./}}tpl_vars.html"/></kbd></li>
+
+ <li>Copy the
+ <a href="javascript:codeReview('{{APP2_PATH}}templates/page1_content.html','16-30','10-35')">
+ selected lines</a> of <em>page1_content.html</em> to file
+ <em>include_tag.html</em>, and replace them with: <br>
+ <kbd><Include SRC="{{#./}}include_tag.html"/></kbd></li>
+
+ <li>Copy the
+ <a href="javascript:codeReview('{{APP2_PATH}}templates/page1_content.html','32-42','27-47')">
+ selected lines</a> of <em>page1_content.html</em> to file
+ <em>comments.html</em>, and replace them with: <br>
+ <kbd><Include SRC="{{#./}}comments.html"/></kbd></li>
+
+ <li>Copy the
+ <a href="javascript:codeReview('{{APP2_PATH}}templates/page1_content.html','44-63','40-70')">
+ selected lines</a> of <em>page1_content.html</em> to file
+ <em>js_code.html</em>, and replace them with: <br>
+ <kbd><Include SRC="{{#./}}js_code.html"/></kbd></li>
+
+ <li>Test that the application is OK.</li>
+ </ol>
+
+ <a name="exercise_4"></a>
+
+ <h4>4 - Move Page1 to a new folder</h4>
+
+ <p>If you make a listing of the folder <em>/templates/</em> you will see
+ that now there are a lot of files in it and it has started to
+ become messy. It would be better if we moved page1 files to another
+ folder.</p>
+
+ <ol>
+ <li>Create new folder <em>page1</em>: <br>
+ <kbd>$ mkdir page1</kbd></li>
+
+ <li>Move files <em>page1.html</em>, <em>page1_content.html</em>,
+ <em>tpl_vars.html</em>, <em>include_tags.html</em>, <em>comments.html</em>,
+ <em>js_code.html</em> to folder <em>page1</em><br>
+ e.g. <kbd>$ mv page1.html page1/</kbd></li>
+
+ <li>If you test the application now, you will get an error. Open the file
+ <a href="javascript:codeReview('{{APP2_PATH}}config/const.Options.php','9-13')">
+ <em>config/const.Options.php</em></a> and change the value of the constant
+ <strong>FIRSTPAGE</strong> to "page1/page1.html".</li>
+
+ <li>If you test the application now, it will not be able to find
+ the stylesheet and the header and footer templates. Open the file
+ <a href="javascript:codeReview('{{APP2_PATH}}templates/page1.html','4,7,9','')">
+ <em>page1/page1.html</em></a> and replace <strong>{{#./}}</strong>
+ with <strong>{{#TPL_URL}}</strong> for the stylesheet, and with
+ <strong>{{#TPL_PATH}}</strong> for the templates, in the selected
+ lines.</li>
+ </ol>
+
+
+ <a name="exercise_5"></a>
+
+ <h4>5 - Change the styles of the page1_content</h4>
+
+ <ol>
+ <li>In the folder <em>/templates/page1/</em> create the file
+ <em>page1_content.css</em> which has these lines:
+ <pre>
+ h4 { color: red }
+ p { color: blue }
+ </pre>
+ </li>
+
+ <li>At the top of the file <em>page1_content.html</em> add this line:
+ <pre>
+ <link rel="stylesheet" type="text/css" href="{{#./}}page1_content.css">
+ </pre>
+ </li>
+
+ <li>Test the application and notice the changes in page1.</li>
+ </ol>
+
+
+ <a name="exercise_6"></a>
+
+ <h4>6 - Move template tpl_2.html to folder <em>page3/tpl_2/</em></h4>
+
+ <ol>
+ <li>Create new folder <em>tpl_2</em>:<br>
+ <kbd>$ cd templates/page3/ ; mkdir tpl_2</kbd></li>
+
+ <li>Move the files <em>tpl_2.html</em>, <em>tpl_2.css</em>,
+ <em>tpl_2_1.html</em>, <em>tpl_2_1.css</em>, <em>tpl_2_2.html</em>,
+ <em>tpl_2_2.css</em> to the new folder: <br>
+ <kbd>$ mv tpl_2*.* tpl_2</kbd></li>
+
+ <li>Open the file
+ <a href="javascript:codeReview('{{APP2_PATH}}templates/page3/tmpl.html','11','')">
+ tmpl.html</a> and change the <strong>SRC</strong> attribute of the include
+ tag to <kbd>{{#./}}tpl_2/tpl_2.html</kbd>.</li>
+
+ <li>Test the application and go to page3. It should be displayed
+ correctly.</li>
+ </ol>
+
+ <p>Do yourself these changes as well:</p>
+
+ <ul>
+ <li>Create a new folder <em>/templates/page2/</em> and move the files
+ <em>page2.html</em> and <em>page2.css</em> to it.</li>
+
+ <li>Create a new folder <em>/templates/page3/tpl_1</em> and move the
+ files <em>tpl_1.html</em> and <em>tpl_1.css</em> to it.</li>
+
+ <li>Create a new folder <em>/templates/page3/tpl_2/tpl_2_1</em> and move
+ the files <em>tpl_2_1.html</em> and <em>tpl_2_1.css</em> to it.</li>
+
+ <li>Create a new folder <em>/templates/page3/tpl_2/tpl_2_2</em> and move
+ the files <em>tpl_2_2.html</em> and <em>tpl_2_2.css</em> to it.</li>
+ </ul>
+
+
+ <h4><a name="exercise_7">7 - Think about it</a></h4>
+
+ <p>Suppose that you would like to add the current date at the top
+ of each file (whithout using JavaScript, using PHP). How would you
+ do it? Or, in general, how could you display something from PHP in
+ the page?</p>
+
+ <p><span class="button"><a href="#toc">TOC</a></span></p>
+ <hr>
Index: transitions.html
===================================================================
RCS file: /cvsroot/phpwebapp/documentation/templates/tutorial/transitions.html,v
retrieving revision 1.4
retrieving revision 1.5
diff -C2 -d -r1.4 -r1.5
*** transitions.html 15 Aug 2003 07:40:51 -0000 1.4
--- transitions.html 20 Aug 2003 07:33:55 -0000 1.5
***************
*** 1,4 ****
!
! <h3>1 - Transitions</h3>
<p>A very simple application that has 2 or 3 HTML files which have
--- 1,3 ----
! <h2>1 - Transitions</h2>
<p>A very simple application that has 2 or 3 HTML files which have
***************
*** 19,23 ****
<hr>
! <h4><a name="toc">Table of Contents</a></h4>
<ul>
--- 18,22 ----
<hr>
! <h3><a name="toc">Table of Contents</a></h3>
<ul>
***************
*** 52,56 ****
<p><a name="goto"></a></p>
! <h4>Transitions by Goto</h4>
<p>The <strong>phpWebApp</strong> thinks of a web application as
--- 51,55 ----
<p><a name="goto"></a></p>
! <h3>Transitions by Goto</h3>
<p>The <strong>phpWebApp</strong> thinks of a web application as
***************
*** 84,88 ****
<a name="external"></a>
! <h4>External Pages</h4>
<p>The external pages are HTML pages that are outside the
--- 83,87 ----
<a name="external"></a>
! <h3>External Pages</h3>
<p>The external pages are HTML pages that are outside the
***************
*** 114,118 ****
<a name="structure"></a>
! <h4>The Structure of the Application</h4>
<p>Each application build with <strong>phpWebApp</strong> framework
--- 113,117 ----
<a name="structure"></a>
! <h3>The Structure of the Application</h3>
<p>Each application build with <strong>phpWebApp</strong> framework
***************
*** 174,178 ****
<a name="exercises"></a>
! <h4>Exerxises</h4>
<p>To be able to try the exercises you have to instal the
--- 173,177 ----
<a name="exercises"></a>
! <h3>Exerxises</h3>
<p>To be able to try the exercises you have to instal the
***************
*** 182,186 ****
<a name="exercise_1"></a>
! <h5>1 - Create a new application</h5>
<p>In this exercise you will create another application which is
--- 181,185 ----
<a name="exercise_1"></a>
! <h4>1 - Create a new application</h4>
<p>In this exercise you will create another application which is
***************
*** 196,204 ****
</ol>
- <span class="button"><a href="#toc">TOC</a></span>
- <br>
<a name="exercise_2"></a>
! <h5>2 - Move an application to another location</h5>
<p>In this exercise you will move the application <em>app1_test</em> to
--- 195,201 ----
</ol>
<a name="exercise_2"></a>
! <h4>2 - Move an application to another location</h4>
<p>In this exercise you will move the application <em>app1_test</em> to
***************
*** 222,226 ****
framework classes and modules. The constant <strong>UP_PATH</strong>
which is defined in <strong>webapp.php</strong>, contains the parent
! folder of the application (app1_test) folder</p>.
<p>In this example it is set as a relative path, but it can be set
--- 219,223 ----
framework classes and modules. The constant <strong>UP_PATH</strong>
which is defined in <strong>webapp.php</strong>, contains the parent
! folder of the application (app1_test) folder.</p>
<p>In this example it is set as a relative path, but it can be set
***************
*** 230,238 ****
location.</p>
- <span class="button"><a href="#toc">TOC</a></span>
- <br>
<a name="exercise_3"></a>
! <h5>3 - Debugging Transitions</h5>
<ol>
--- 227,233 ----
location.</p>
<a name="exercise_3"></a>
! <h4>3 - Debugging Transitions</h4>
<ol>
***************
*** 246,254 ****
</ol>
- <span class="button"><a href="#toc">TOC</a></span>
- <br>
<a name="exercise_4"></a>
! <h5>4 - Add a New Page to the Application</h5>
<ol>
--- 241,247 ----
</ol>
<a name="exercise_4"></a>
! <h4>4 - Add a New Page to the Application</h4>
<ol>
***************
*** 264,272 ****
</ol>
- <span class="button"><a href="#toc">TOC</a></span>
- <br>
<a name="exercise_5"></a>
! <h5>5 - Set the initial page of the application</h5>
<ol>
--- 257,263 ----
</ol>
<a name="exercise_5"></a>
! <h4>5 - Set the initial page of the application</h4>
<ol>
***************
*** 279,287 ****
</ol>
- <span class="button"><a href="#toc">TOC</a></span>
- <br>
<a name="exercise_6"></a>
! <h5>6 - Put the pages in another folder</h5>
<p>In this exercise you will put all the pages of the application
--- 270,276 ----
</ol>
<a name="exercise_6"></a>
! <h4>6 - Put the pages in another folder</h4>
<p>In this exercise you will put all the pages of the application
***************
*** 329,333 ****
<a name="experiments"></a>
! <h4>Experiments and questions</h4>
<p>Try to do these experiments and to answer these questions.</p>
--- 318,322 ----
<a name="experiments"></a>
! <h3>Experiments and questions</h3>
<p>Try to do these experiments and to answer these questions.</p>
Index: templates.html
===================================================================
RCS file: /cvsroot/phpwebapp/documentation/templates/tutorial/templates.html,v
retrieving revision 1.4
retrieving revision 1.5
diff -C2 -d -r1.4 -r1.5
*** templates.html 15 Aug 2003 07:37:30 -0000 1.4
--- templates.html 20 Aug 2003 07:33:55 -0000 1.5
***************
*** 1,15 ****
! <script language="JavaScript" src="{{./}}codeReview.js"></script>
! <h3>2 - Templates</h3>
! Explains templates. This application
! uses the <Include> tag to insert the same header file
! at the beginning of each template and to break the
! templates into sub templates. It shows how to include
! the javascript code and the stylesheet of each template.
! It also explains the use of the framework comments and
! the difference between them and the HTML comments.
! Explains how to debug the template structure.
! <br><br>
<span class="button">
! <a href="{{APP2_URL}}" target="_blank">Test</a>
</span>
<span class="button">
--- 1,13 ----
! <h2>2 - Templates</h2>
!
! <p>Explains templates. This application uses the <Include>
! tag to insert the same header file at the beginning of each
! template and to break the templates into sub templates. It shows
! how to include the javascript code and the stylesheet of each
! template. It also explains the use of the framework comments and
! the difference between them and the HTML comments. Explains how to
! debug the template structure.</p>
<span class="button">
! <a href="{{APP2_URL}}" target= "_blank">Test</a>
</span>
<span class="button">
***************
*** 19,209 ****
<a href="http://phpwebapp.sourceforge.net/download/app2.tar.gz">Download</a>
</span>
! <br><br>
<hr>
! <a name="toc">
! <h4>Table of Contents</h4>
<ul>
! <li><a href="#templates">Templates</a>
! <ol>
! <li><a href="#variables">Template Variables</a>
! <li><a href="#include">The <Include> tag</a>
! <li><a href="#comments">Comments</a>
! <li><a href="#including">JavaScript code and stylesheet of a template</a>
! </ol>
! <li><a href="#study">Study the sample</a>
! <li><a href="#exercises">Exercises</a>
! <ol>
! <li><a href="#exercise1">Modify page2.html and page3.html</a>
! <li><a href="#exercise2">Rename folder 'img' to 'images'</a>
! <li><a href="#exercise3">Divide Page1 further into subtemplates</a>
! <li><a href="#exercise4">Move Page1 to a new folder</a>
! <li><a href="#exercise5">Change the styles of the page1_content</a>
! <li><a href="#exercise6">Move template tpl_2.html and its related files to folder 'page3/tpl_2/</a>
! <li><a href="#exercise7"> Think about it</a>
! </ol>
! </ul>
<hr>
<a name="templates"></a>
- <h4>Templates</h4>
- <p>
- Templates are pieces of HTML code, that are used or combined
- by the framework to generate the HTML pages that are sent to
- the browser.
- </p>
! <span class="button"><a href="#toc">TOC</a></span>
! <hr>
<a name="variables"></a>
- <h5>1 - Template variables</h5>
- <p>
- The templates may contain variables inside them (called "template variables"),
- which are replaced by the framework with their string values. The variables
- inside a template are denoted by double curly braces: <i>{{#tpl_var}}</i>.
- </p>
- <p>
- See this <a href="javascript: codeReview('{{APP2_PATH}}templates/page3/page3.html','4,8,10,12','')">example</a>.
- The <i>{{#TPL_URL}}</i> variable in line 4 contains the URL of the folder
- 'templates', which in this case is '{{APP2_URL}}templates/'. The <i>{{#TPL_PATH}}</i>
- variable in lines 8 and 12 contains the path in the server of the folder
- templates, e.g. '/var/www/html{{APP2_URL}}templates/'. Both of them are declared
- in the file
- <a href="javascript: codeReview('{{APP2_PATH}}config/const.Paths.php','6,7','')"><i>config/const.Paths.php</i></a>.
- The variable <i>{{#./}}</i> in line 10 is a special framework variable
- that always contains the path of the current folder, i.e. the folder
- of the current file.
- </p>
! <span class="button"><a href="#toc">TOC</a></span>
! <hr>
<a name="include"></a>
! <h5>2 - The <Include> tag</h5>
! <p>
! The templates may also contain some extra tags, which are not HTML tags.
! These tags are reckognised and processed by the framework. One of them is
! the <Include> tag, which is used to include another template inside the
! current template:
! </p>
<pre>
! <Include SRC="file_to_be_included" />
</pre>
- <p>
- It is a very useful tag, because it allows to divide
- pages into subtemplates, which results in a better structured application,
- provides modularity (the graphical designer can work with smaller pieces of
- code), and reusability (templates are easier to be reused in other pages
- or other applications). See again the same
- <a href="javascript: codeReview('{{APP2_PATH}}templates/page3/page3.html','8,10,12','')">example</a>.
- </p>
! <span class="button"><a href="#toc">TOC</a></span>
! <hr>
<a name="comments"></a>
! <h5>3 - Comments</h5>
! <p>
! The templates may contain some special comments as well:
! </p>
<pre>
! <!--# Framework comments #-->
</pre>
- <p>
- These comments are like HTML comments by they have a diesis (#)
- at the opening and closing marks. These comments are not processed
- by the framework and are not displayed in the HTML page that is generated.
- <a href="javascript: codeReview('{{APP2_PATH}}templates/header.html','1-3','')">Example</a>.
- </p>
! <span class="button"><a href="#toc">TOC</a></span>
! <hr>
<a name="including"></a>
! <h5>4 - JavaScript code and stylesheet of a template</h5>
! <p>
! If a certain template has some javascript code or some special styles
! of its own, then it is better to include them at the begining of the
! template (instead of including them globally, at the <Head> of the page).
! This makes the template more independant from the other parts of the page
! and thus easier to use it again into another page. They are included like
! this:
! </p>
<pre>
! <script language="javascript" src="file.js"></script>
! <link rel="stylesheet" type="text/css" href="file.css">
</pre>
! <p>
! <a href="javascript: codeReview('{{APP2_PATH}}templates/footer.html','1','')">example1</a>,
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page3/tpl_2.html','1','')">example2</a>
! <br>
! The inclusion is much better than writting the JS and CSS code in the
! template because it separates the HTML code from the JS and CSS codes.
! It also is more efficient (has a better performance) because the next
! time that this template is loaded in browser again, most probably the
! browser will get "file.js" and "file.css" from its cache, instead of
! retrieving them again from the server.
! </p>
<span class="button"><a href="#toc">TOC</a></span>
<hr>
! <a name="study">
! <h4>Study the sample</h4>
! <p>
! Here we will highlight and discuss some of the features of the
! sample application, so that we can understand it better.
! </p>
! <p>
! <ul>
! <li> All the templates of the application are placed
! in the folder '/templates/'. We tell to the framework where
! to look for the templates by giving an appropriate value to
! the constant TPL_PATH in the file
! <a href="javascript: codeReview('{{APP2_PATH}}config/const.Paths.php','7,8','')"><i>config/const.Paths.php</i></a>.
! <br><br>
! <li> All the images of this application are placed in the folder '/img/'.
! In templates they are linked using the {{#IMG_URL}} variable.
! <a href="javascript: codeReview('{{APP2_PATH}}templates/footer.html','9,10','')">See</a> how it is used.
! The {{#IMG_URL}} template variable gets the value from the
! PHP constant IMG_URL, which is declared in the file
! <a href="javascript: codeReview('{{APP2_PATH}}config/const.Paths.php','6','')"><i>config/const.Paths.php</i></a>.
!
! <br><br>
! <li> All the files and templates of the page3 are placed in the folder
! '/templates/page3/'. Organizing files into folders and subfolders
! reduces the complexity of the application and makes it easier to be
! understood and maintained.
! <a href="javascript: codeReview('{{APP2_PATH}}templates/footer.js','17','')">Notice</a>
! how the transition to page3 is done.
! <br><br>
! <li> All the pages include the same header and footer template,
! e.g. see
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page1.html','8,10','')">page1.html</a>.
! If you want to change something in the footer of the page, then you
! don't have to change every page, but you make the change only once
! in the footer.
! <br><br>
! <li> <a href="{{APP2_URL}}browse.php" target="_blank">Browse</a>
! the files of the application and see the templates
! 'page1.html', 'header.html', 'footer.html', 'page1_content.html'.
! See them both in preview mode and in code view mode (select the
! "Code View" mode in the panel at the top and then click "Refresh").
! <br><br>
! <li> Browse the files and see the template 'page2.html' and all the templates
! in the folder '/templates/page3/'. See them both in preview mode and
! in code view mode. These two pages are the same in terms of what they
! display, however they are implemented differently in the server.
! 'page2.html' is implemented as a flat big HTML file, while
! 'page3.html' is structured, divided into several small subtemplates.
! Try to make the same modification in both of them and see which one
! is easier to be modified.
! <br><br>
</ul>
--- 17,233 ----
<a href="http://phpwebapp.sourceforge.net/download/app2.tar.gz">Download</a>
</span>
! <br>
!
<hr>
!
! <h3><a name="toc">Table of Contents</a></h3>
!
<ul>
! <li>
! <a href="#templates">Templates</a>
!
! <ol>
! <li><a href="#variables">Template Variables</a></li>
!
! <li><a href="#include">The <Include> tag</a></li>
!
! <li><a href="#comments">Comments</a></li>
!
! <li><a href="#including">JavaScript code and stylesheet of a
! template</a></li>
! </ol>
! </li>
!
! <li><a href="#study">Study the sample</a></li>
!
! <li>
! <a href="#exercises">Exercises</a>
!
! <ol>
! <li><a href="#exercise_1">Modify page2.html and
! page3.html</a></li>
!
! <li><a href="#exercise_2">Rename folder <em>img</em> to
! <em>images</em></a></li>
!
! <li><a href="#exercise_3">Divide Page1 further into
! subtemplates</a></li>
+ <li><a href="#exercise_4">Move Page1 to a new folder</a></li>
+
+ <li><a href="#exercise_5">Change the styles of the
+ page1_content</a></li>
+
+ <li><a href="#exercise_6">Move template tpl_2.html and its
+ related files to folder <em>page3/tpl_2/</em></a></li>
+
+ <li><a href="#exercise_7">Debug templates</a></li>
+
+ <li><a href="#exercise_8">Think about it</a></li>
+ </ol>
+ </li>
+ </ul>
<hr>
+
<a name="templates"></a>
! <h3>Templates</h3>
!
! <p>Templates are pieces of HTML code, that are used or combined by
! the framework to generate the HTML pages that are sent to the
! browser.</p>
<a name="variables"></a>
! <h4>1 - Template variables</h4>
!
! <p>The templates may contain variables inside them (called
! "template variables"), which are replaced by the framework with
! their string values. The variables inside a template are denoted by
! double curly braces: <strong>{{#tpl_var}}</strong>.</p>
!
! <p>See this
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page3/page3.html','4,7,9,11')">
! example</a>. The <strong>{{#TPL_URL}}</strong> variable in line 4 contains
! the URL of the folder <em>templates</em>, which in this case is
! <em>{{APP2_URL}}templates/</em>. The <strong>{{#TPL_PATH}}</strong> variable in
! lines 7 and 11 contains the path in the server of the folder
! templates, e.g. <em>/var/www/html{{APP2_URL}}templates/</em>. Both of them
! are declared in the file
! <a href="javascript:codeReview('{{APP2_PATH}}config/const.Paths.php','4,5')">
! <em>config/const.Paths.php</em></a>. The variable <strong>{{#./}}</strong>
! in line 9 is a special framework variable that always contains the
! path of the current folder, i.e. the folder of the current
! file.</p>
<a name="include"></a>
!
! <h4>2 - The <Include> tag</h4>
!
! <p>The templates may also contain some extra tags, which are not
! HTML tags. These tags are reckognised and processed by the
! framework. One of them is the <Include> tag, which is used to
! include another template inside the current template:</p>
<pre>
! <Include SRC="file_to_be_included" />
</pre>
! <p>It is a very useful tag, because it allows to divide pages into
! subtemplates, which results in a better structured application,
! provides modularity (the graphical designer can work with smaller
! pieces of code), and reusability (templates are easier to be reused
! in other pages or other applications). See how it is used in this
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page3/page3.html','7,9,11')">
! example</a>.</p>
<a name="comments"></a>
!
! <h4>3 - Comments</h4>
!
! <p>The templates may contain some special comments as well:</p>
<pre>
! <!--# Framework comments #-->
</pre>
! <p>These comments are like HTML comments but they have a diesis
! <strong>#</strong> at the opening and closing marks. These comments
! are not processed (are skiped, ignored) by the framework and are not
! displayed in the HTML page that is generated.
! <a href="javascript:codeReview('{{APP2_PATH}}templates/header.html','1-3')">
! Example</a>.</p>
<a name="including"></a>
!
! <h4>4 - JavaScript code and stylesheet of a template</h4>
!
! <p>If a certain template has some javascript code or some special
! styles of its own, then it is better to include them at the
! begining of the template (instead of including them globally, at
! the <Head> of the page). This makes the template more
! independant from the other parts of the page and thus easier to use
! it again into another page. They are included like this:</p>
<pre>
! <script language="javascript" src="file.js"></script>
! <link rel="stylesheet" type="text/css" href="file.css">
</pre>
!
! <a href="javascript:codeReview('{{APP2_PATH}}templates/footer.html','1')">
! example1</a>,
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page3/tpl_2.html','1')">
! example2</a>.
!
! <p>The inclusion is much better than writting the JS and CSS code in
! the template because it separates the HTML code from the JS and CSS
! codes. It also is more efficient (has a better performance) because
! the next time that this template is loaded in browser again, most
! probably the browser will get "file.js" and "file.css" from its
! cache, instead of retrieving them again from the server.</p>
<span class="button"><a href="#toc">TOC</a></span>
<hr>
! <h3><a name="study">Study the sample</a></h3>
! <p>Here we will highlight and discuss some of the features of the
! sample application, so that we can understand it better.</p>
! <ul>
! <li>All the templates of the application are placed in the folder
! <em>/templates/</em>. We tell to the framework where to look for the
! templates by giving an appropriate value to the constant
! <strong>TPL_PATH</strong>
! in the file
! <a href="javascript:codeReview('{{APP2_PATH}}config/const.Paths.php','4')">
! <em>config/const.Paths.php</em></a>.
! <br>
! <br></li>
! <li>All the images of this application are placed in the folder
! <em>/img/</em>. In templates they are linked using the
! <strong>{{#IMG_URL}}</strong> variable.
! <a href="javascript:codeReview('{{APP2_PATH}}templates/footer.html','9,10')">
! See</a> how it is used. The <strong>{{#IMG_URL}}</strong> template
! variable gets the value from the PHP constant <strong>IMG_URL</strong>,
! which is declared in the file
! <a href="javascript:codeReview('{{APP2_PATH}}config/const.Paths.php','6')">
! <em>config/const.Paths.php</em></a>.
! <br>
! <br></li>
! <li>All the files and templates of the page3 are placed in the
! folder <em>/templates/page3/</em>. Organizing files into folders and
! subfolders reduces the complexity of the application and makes it
! easier to be understood and maintained.
! <a href="javascript:codeReview('{{APP2_PATH}}templates/footer.js','17')">
! Notice</a> how the transition to page3 is done.
! <br>
! <br></li>
! <li>All the pages include the same header and footer template, e.g. see
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page1.html','7,9')">
! page1.html</a>. If you want to change something in the footer of
! the page, then you don't have to change every page, but you make
! the change only once in the footer.
! <br>
! <br></li>
!
! <li><a href="{{APP2_URL}}browse.php" target="_blank">Browse</a>
! the files of the application and see the templates <em>page1.html</em>,
! <em>header.html</em>, <em>footer.html</em>, <em>page1_content.html</em>.
! See them both in preview mode and in code view mode (select the "Code View"
! mode in the panel at the top and then click "Refresh").
! <br>
! <br></li>
+ <li>Browse the files and see the template <em>page2.html</em> and all
+ the templates in the folder <em>/templates/page3/</em>. See them both in
+ preview mode and in code view mode. These two pages are the same
+ in terms of what they display, however they are implemented
+ differently in the server. <em>page2.html</em> is implemented as a flat
+ big HTML file, while <em>page3.html</em> is structured, divided into
+ several small subtemplates. Try to make the same modification in
+ both of them and see which one is easier to be modified.
+ <br>
+ <br></li>
</ul>
***************
*** 211,415 ****
<hr>
! <a name="exercises">
! <h4>Exercises</h4>
! <p>
! Before starting the exercises, make a copy of the application 'app2'
! to the folder 'test/app2'. If you don't know how to do it, go and
! study the first part of the tutorial (Transitions).
! </p>
! <span class="button"><a href="#toc">TOC</a></span>
! <hr>
- <a name="exercise1">
- <h5>1 - Modify page2.html and page3.html</h5>
- <p>
- Change to red the color of the tpl_2_1 box, and change the text
- inside it to "This box is red!".
- </p>
- <p>
- Modify page2.html:
<ol>
! <li> Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page2.css','52,59','')">page2.css</a>
! and change the color in the highlighted lines to 'red'.
! <li> Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page2.html','39-40','')">page2.html</a>
! and change the text in the highlighted lines to "This box is red!".
</ol>
- Which of the pages do you think is easier to be modified?
- </p>
! <p>
! Modify page3.html:
<ol>
! <li> Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page3/tpl_2_1.css','5,12','')">tpl_2_1.css</a>
! and change the color in the highlighted lines to 'red'.
! <li> Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page3/tpl_2_1.html','5-6','')">tpl_2_1.html</a>
! and change the text in the highlighted lines to "This box is red!".
</ol>
- </p>
! <span class="button"><a href="#toc">TOC</a></span>
! <hr>
- <a name="exercise2">
- <h5>2 - Rename folder 'img' to 'images'</h5>
- <p>
<ol>
! <li> Rename folder 'img' to 'images' ($ mv img images). Test the application;
! the images will be broken.
! <li> Change the value of the IMG_URL constant in the file
! <a href="javascript: codeReview('{{APP2_PATH}}config/const.Paths.php','5-6','')">const.Paths.php</a>.
! Reload the application. The images should be allright.
</ol>
- If all the images in the application are linked like this:
- <pre>
- <img src="{{#IMG_URL}}image_name.png"/>
- </pre>
- there will be no problem. However, if any image is hard linked like this:
- <pre>
- <img src="/img/image_name.png"/>
- </pre>
- it will not be displayed.
- </p>
! <span class="button"><a href="#toc">TOC</a></span>
! <hr>
- <a name="exercise3">
- <h5>3 - Divide Page1 further into subtemplates</h5>
- <p>
<ol>
! <li> Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page1_content.html','11-17','')">page1_content.html</a>
! and copy the selected lines to the file 'tpl_vars.html'.
! <li> Replace the selected lines with this line:
! <pre>
! <Include SRC="{{#./}}tpl_vars.html"/>
! </pre>
! <li> Copy the
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page1_content.html','19-36','15-40')">selected lines</a>
! of 'page1_content.html' to file 'include_tag.html', and replace
! them with:
! <pre>
! <Include SRC="{{#./}}include_tag.html"/>
! </pre>
! <li> Copy the
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page1_content.html','38-49','33-55')">selected lines</a>
! of 'page1_content.html' to file 'comments.html', and replace
! them with:
! <pre>
! <Include SRC="{{#./}}comments.html"/>
! </pre>
! <li> Copy the
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page1_content.html','51-72','45-72')">selected lines</a>
! of 'page1_content.html' to file 'js_code.html', and replace
! them with:
! <pre>
! <Include SRC="{{#./}}js_code.html"/>
! </pre>
! <li> If you test the application now, page1 will be displayed correctly,
! but if you click the link 'page1' at the bottom of the page, an
! error will occour. To fix this, open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/footer.js','7','')">footer.js</a>
! and correct line 7 to go to "page1/page1.html".
! <li> Test that the application now is OK.
</ol>
- </p>
! <span class="button"><a href="#toc">TOC</a></span>
! <hr>
- <a name="exercise4">
- <h5>4 - Move Page1 to a new folder</h5>
- <p>
- If you make a listing of the folder '/templates/' you will see that
- now there are a lot of files in it and it has started to become messy.
- It would be better if we moved page1 files to another folder.
<ol>
! <li> Create new folder 'page1' ($ mkdir page1)
! <li> Move files 'page1.html', 'page1_content.html',
! 'tpl_vars.html', 'include_tags.html', 'comments.html',
! 'js_code.html' to folder 'page1' (e.g. $ mv page1.html page1/)
! <li> If you test the application now, it will give an error.
! Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}event_handlers/on.firstTime.php','8','')">event_handlers/on.firstTime.php</a>
! and change the $targetPage to "page1/page1.html".
! <li> If you test the application now, it will not be able to find the
! stylesheet and the header and footer templates. Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page1.html','4,8,10','')">page1/page1.html</a>
! and replace <i>{{#./}}</i> with <i>{{#TPL_URL}}</i> for the
! stylesheet, and with <i>{{#TPL_PATH}}</i> for the templates,
! in the selected lines.
</ol>
- </p>
- <span class="button"><a href="#toc">TOC</a></span>
- <hr>
! <a name="exercise5">
! <h5>5 - Change the styles of the page1_content</h5>
! <p>
<ol>
! <li> In the folder '/templates/page1/' create the file 'page1_content.css'
! which has these lines:
! <pre>
! h4 { color: red }
! p { color: blue }
! </pre>
! <li> At the top of the file 'page1_content.html' add this line:
! <pre>
! <link rel="stylesheet" type="text/css" href="{{#./}}page1_content.css">
! </pre>
! <li> Test the application and notice the changes in page1.
</ol>
- </p>
- <span class="button"><a href="#toc">TOC</a></span>
- <hr>
! <a name="exercise6">
! <h5>6 - Move template tpl_2.html and its related files to folder 'page3/tpl_2/</h5>
! <p>
<ol>
! <li> Create new folder 'tpl_2'
! ($ cd templates/page3/ $ mkdir tpl_2)
! <li> Move the files 'tpl_2.html', 'tpl_2.css', 'tpl_2_1.html', 'tpl_2_1.css',
! 'tpl_2_2.html', 'tpl_2_2.css' to the new folder
! (e.g. $ mv tpl_2*.* tpl_2)
! <li> Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page3/tmpl.html','11','')">tmpl.html</a>
! and change the SRC of the included template to
! "{{#./}}tpl_2/tpl_2.html".
! <li> Test the application and go to page3. It should be displayed correctly.
</ol>
! Do yourself these changes as well:
<ul>
! <li> Create a new folder '/templates/page2/' and move the files
! 'page2.html' and 'page2.css' to it.
! <li> Create a new folder '/templates/page3/tpl_1' and move the files
! 'tpl_1.html' and 'tpl_1.css' to it.
! <li> Create a new folder '/templates/page3/tpl_2/tpl_2_1' and move the files
! 'tpl_2_1.html' and 'tpl_2_1.css' to it.
! <li> Create a new folder '/templates/page3/tpl_2/tpl_2_2' and move the files
! 'tpl_2_2.html' and 'tpl_2_2.css' to it.
</ul>
- </p>
! <span class="button"><a href="#toc">TOC</a></span>
! <hr>
! <a name="exercise7">
! <h5>7 - Think about it</h5>
! <p>
! Suppose that you would like to add the current date at the top of each
! file (whithout using JavaScript, using PHP). How would you do it?
! Or, in general, how could you display something from PHP in the page?
! </p>
! <span class="button"><a href="#toc">TOC</a></span>
! <hr>
--- 235,450 ----
<hr>
! <h3><a name="exercises">Exercises</a></h3>
! <p>Before starting the exercises, make a copy of the application
! <em>app2</em> to the folder <em>test/app2</em>. If you have problems
! with doing this (e.g. <em>test/app2</em> doesn't work) then see the
! <a href="javascript:tabs3_select('tabs3::tutorial','transitions')">
! first tutorial</a>, second exercise.</p>
!
! <a name="exercise_1"></a>
!
! <h4>1 - Modify page2.html and page3.html</h4>
!
! <p>Change to red the color of the tpl_2_1 box, and change the text
! inside it to "This box is red!".</p>
!
! <p>Modify page2.html:</p>
<ol>
! <li>Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page2.css','52,59')">
! page2.css</a> and change the color in the highlighted lines to
! <em>red</em>.</li>
!
! <li>Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page2.html','60')">
! page2.html</a> and change the text in the highlighted lines to
! "This box is red!".</li>
</ol>
! <p>Modify page3.html:</p>
!
<ol>
! <li>Open the file <a href=
! "javascript:codeReview('{{APP2_PATH}}templates/page3/tpl_2_1.css','5,12','')">
! tpl_2_1.css</a> and change the color in the highlighted lines to
! <em>red</em>.</li>
!
! <li>Open the file <a href=
! "javascript:codeReview('{{APP2_PATH}}templates/page3/tpl_2_1.html','5-6','')">
! tpl_2_1.html</a> and change the text in the highlighted line to
! "This box is red!".</li>
</ol>
! <p>Which of the pages do you think is easier to be modified?</p>
!
!
! <a name="exercise_2"></a>
!
! <h4>2 - Rename folder <em>img</em> to <em>images</em></h4>
<ol>
! <li>Rename folder <em>img</em> to <em>images</em>:
! <kbd>$ mv img images</kbd> <br>
! Test the application; the images will be broken.</li>
!
! <li>Change the value of the <strong>IMG_URL</strong> constant in the file
! <a href="javascript:codeReview('{{APP2_PATH}}config/const.Paths.php','6')">
! const.Paths.php</a>.
! Reload the application. The images should be allright.</li>
</ol>
! <p>If all the images in the application are linked like this:
! <kbd><img src="{{#IMG_URL}}image_name.png"/></kbd>
! there will be no problem. However, if any image is hard linked
! like this: <kbd><img src="/img/image_name.png"/></kbd>
! it will not be displayed.</p>
!
! <a name="exercise_3"></a>
! <h4>3 - Divide Page1 further into subtemplates</h4>
<ol>
! <li>Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page1_content.html','9-14')">
! page1_content.html</a> and copy the selected lines to the file
! <em>tpl_vars.html</em>.</li>
!
! <li>Replace the selected lines with this line: <br>
! <kbd><Include SRC="{{#./}}tpl_vars.html"/></kbd></li>
!
! <li>Copy the
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page1_content.html','16-30','10-35')">
! selected lines</a> of <em>page1_content.html</em> to file
! <em>include_tag.html</em>, and replace them with: <br>
! <kbd><Include SRC="{{#./}}include_tag.html"/></kbd></li>
!
! <li>Copy the
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page1_content.html','32-42','27-47')">
! selected lines</a> of <em>page1_content.html</em> to file
! <em>comments.html</em>, and replace them with: <br>
! <kbd><Include SRC="{{#./}}comments.html"/></kbd></li>
!
! <li>Copy the
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page1_content.html','44-63','40-70')">
! selected lines</a> of <em>page1_content.html</em> to file
! <em>js_code.html</em>, and replace them with: <br>
! <kbd><Include SRC="{{#./}}js_code.html"/></kbd></li>
!
! <li>Test that the application is OK.</li>
</ol>
! <a name="exercise_4"></a>
!
! <h4>4 - Move Page1 to a new folder</h4>
!
! <p>If you make a listing of the folder <em>/templates/</em> you will see
! that now there are a lot of files in it and it has started to
! become messy. It would be better if we moved page1 files to another
! folder.</p>
<ol>
! <li>Create new folder <em>page1</em>: <br>
! <kbd>$ mkdir page1</kbd></li>
!
! <li>Move files <em>page1.html</em>, <em>page1_content.html</em>,
! <em>tpl_vars.html</em>, <em>include_tags.html</em>, <em>comments.html</em>,
! <em>js_code.html</em> to folder <em>page1</em><br>
! e.g. <kbd>$ mv page1.html page1/</kbd></li>
!
! <li>If you test the application now, you will get an error. Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}config/const.Options.php','9-13')">
! <em>config/const.Options.php</em></a> and change the value of the constant
! <strong>FIRSTPAGE</strong> to "page1/page1.html".</li>
!
! <li>If you test the application now, it will not be able to find
! the stylesheet and the header and footer templates. Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page1.html','4,7,9','')">
! <em>page1/page1.html</em></a> and replace <strong>{{#./}}</strong>
! with <strong>{{#TPL_URL}}</strong> for the stylesheet, and with
! <strong>{{#TPL_PATH}}</strong> for the templates, in the selected
! lines.</li>
</ol>
! <a name="exercise_5"></a>
!
! <h4>5 - Change the styles of the page1_content</h4>
!
<ol>
! <li>In the folder <em>/templates/page1/</em> create the file
! <em>page1_content.css</em> which has these lines:
! <pre>
! h4 { color: red }
! p { color: blue }
! </pre>
! </li>
!
! <li>At the top of the file <em>page1_content.html</em> add this line:
! <pre>
! <link rel="stylesheet" type="text/css" href="{{#./}}page1_content.css">
! </pre>
! </li>
!
! <li>Test the application and notice the changes in page1.</li>
</ol>
! <a name="exercise_6"></a>
!
! <h4>6 - Move template tpl_2.html to folder <em>page3/tpl_2/</em></h4>
!
<ol>
! <li>Create new folder <em>tpl_2</em>:<br>
! <kbd>$ cd templates/page3/ ; mkdir tpl_2</kbd></li>
!
! <li>Move the files <em>tpl_2.html</em>, <em>tpl_2.css</em>,
! <em>tpl_2_1.html</em>, <em>tpl_2_1.css</em>, <em>tpl_2_2.html</em>,
! <em>tpl_2_2.css</em> to the new folder: <br>
! <kbd>$ mv tpl_2*.* tpl_2</kbd></li>
!
! <li>Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page3/tmpl.html','11','')">
! tmpl.html</a> and change the <strong>SRC</strong> attribute of the include
! tag to <kbd>{{#./}}tpl_2/tpl_2.html</kbd>.</li>
!
! <li>Test the application and go to page3. It should be displayed
! correctly.</li>
</ol>
!
! <p>Do yourself these changes as well:</p>
!
<ul>
! <li>Create a new folder <em>/templates/page2/</em> and move the files
! <em>page2.html</em> and <em>page2.css</em> to it.</li>
!
! <li>Create a new folder <em>/templates/page3/tpl_1</em> and move the
! files <em>tpl_1.html</em> and <em>tpl_1.css</em> to it.</li>
!
! <li>Create a new folder <em>/templates/page3/tpl_2/tpl_2_1</em> and move
! the files <em>tpl_2_1.html</em> and <em>tpl_2_1.css</em> to it.</li>
!
! <li>Create a new folder <em>/templates/page3/tpl_2/tpl_2_2</em> and move
! the files <em>tpl_2_2.html</em> and <em>tpl_2_2.css</em> to it.</li>
</ul>
! <h4><a name="exercise_7">7 - Debug templates</a></h4>
! <ol>
! <li>Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}config/const.Debug.php','18-22')">
! <em>config/const.Debug.php</em></a> and set the constant
! <strong>DEBUG_TEMPLATES</strong> to <em>true</em>.</li>
! <li>Refresh the application.</li>
! </ol>
!
! <h4><a name="exercise_8">8 - Think about it</a></h4>
+ <p>Suppose that you would like to add the current date at the top
+ of each file (whithout using JavaScript, using PHP). How would you
+ do it? Or, in general, how could you display something from PHP in
+ the page?</p>
+
+ <p><span class="button"><a href="#toc">TOC</a></span></p>
+ <hr>
|
