[phpwebapp-commits] CVS: documentation/templates/tutorial weboxes.html,1.3,1.4 templates.html,1.5,1.
Brought to you by:
dashohoxha
Menu
▾
▴
[phpwebapp-commits] CVS: documentation/templates/tutorial weboxes.html,1.3,1.4 templates.html,1.5,1.6
|
From: Dashamir H. <das...@us...> - 2003-08-22 06:51:22
|
Update of /cvsroot/phpwebapp/documentation/templates/tutorial
In directory sc8-pr-cvs1:/tmp/cvs-serv4885/templates/tutorial
Modified Files:
weboxes.html templates.html
Log Message:
Index: weboxes.html
===================================================================
RCS file: /cvsroot/phpwebapp/documentation/templates/tutorial/weboxes.html,v
retrieving revision 1.3
retrieving revision 1.4
diff -C2 -d -r1.3 -r1.4
*** weboxes.html 20 Aug 2003 07:33:55 -0000 1.3
--- weboxes.html 22 Aug 2003 06:51:17 -0000 1.4
***************
*** 2,11 ****
<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>
--- 2,11 ----
<p>Explains what are WebBox-es and their differences with templates.
! The PHP code of the WebBox-es declares template <em>{{#variables}}</em>
! in the <em>onRender()</em> function, by using <em>WebApp::addVar()</em>.
! Gives some tips about good programming practices with WebBox-es.
! Introduces as well the files <em>init.php</em>, <em>global.php</em>,
! <em>before_page.php</em> and <em>after_page.php</em>.</p>
!
<span class="button">
<a href="{{UP_URL}}app3/" target= "_blank">Test</a>
***************
*** 33,36 ****
--- 33,38 ----
<li><a href="#files">Files related to a WebBox</a></li>
+
+ <li><a href="#differences">Differences with templates</a></li>
</ol>
</li>
***************
*** 38,43 ****
<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>
--- 40,43 ----
***************
*** 46,67 ****
<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>
--- 46,61 ----
<ol>
! <li><a href="#exercise_1">Use webbox <em>menu</em> in application
! <em>app2</em></a></li>
! <li><a href="#exercise_2">Use webbox <em>tip</em> in application
! <em>app2</em></a></li>
! <li><a href="#exercise_3">Enable counting</a></li>
! <li><a href="#exercise_4">Test <em>before_page.php</em> and
! <em>after_page.php</em></a></li>
! <li><a href="#exercise_5">Modify the <em>tip</em> webbox</a></li>
</ol>
</li>
***************
*** 159,447 ****
<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>
--- 153,481 ----
<h4>3 - Files related to a WebBox</h4>
! <p>Besides the file that contains the template of the WebBox and the
! <strong>box_id.php</strong> that contains its <em>PHP</em> class,
! there may be other files as well that belong to the WebBox. These are:
! <strong>box_id.js</strong> that contains the JavaScript code of the
! WebBox, <strong>box_id.css</strong> that contains the stylesheet of
! the WebBox, etc. (we will see the others later). If the framework
! finds such files, it automatically integrates them in the generated
! <em>HTML</em> page. For example, it includes
! <strong>box_id.js</strong> and <strong>box_id.css</strong> in the
! <em><head></em> of the page. As an example,
! <a href="{{APP3_URL}}browse.php?templates/menu/" target="_blank">
! see the files of the WebBox <em>menu</em></a>.</p>
! <p>Of these files, the template is the most important. There can be a
! WebBox without <em>JS</em> code or without <em>PHP</em> code, but
! there cannot be a WebBox without <em>TPL</em>(template) code.</p>
! <a name="differences"></a>
! <h4>4 - Differences with templates</h4>
! <p>A WebBox is defined inside a template file and the <em>TPL</em>
! code of the WebBox is inside the <em><WebBox></em> tag (is the
! content of the <em><WebBox></em> element). However a WebBox is
! different from a template because it can also have its own
! <em>PHP</em> code. Another difference is that a template must include
! explicitly the <em>JS</em> code and the <em>CSS</em> code (if it has
! its own),
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page3/tmpl.html','1')">
! <em>see this example</em></a>, however, for a WebBox the framework
! handles them automatically, by including them at the
! <em><head></em> of the page</p>
! <span class="button"><a href="#toc">TOC</a></span>
! <hr>
! <a name="tips"></a>
! <h3>Tips about using WebBox-es</h3>
! <ul>
! <li>There must not be two WebBox-es in the same web application
! with the same <strong>ID</strong>.</li>
! <li>The framework tags are case sensitive, e.g. the framework will
! reckognize the tag <strong><WebBox></strong>, however will not
! reckognize the tag <strong><webbox></strong>. (This is a
! limitation of the current implementation, it may be improved
! later.)</li>
! <li>The framework tag attributes are case sensitive, e.g. the
! framework will reckognize the attribute <strong>ID</strong> of the
! tag <WebBox>, however will not reckognize the attribute
! <strong>id</strong> of the tag <WebBox>.</li>
! <li>All the files of a WebBox (<strong>.js</strong>,
! <strong>.css</strong>, <strong>.db</strong>, etc.) must have the
! same name as the <strong>ID</strong> of the WebBox, otherwise the
! framework will not reckognize them as belonging to this WebBox.</li>
! <li>You can place more than one WebBox in a template file, however
! it is recomended to place each WebBox in a separate template,
! without other HTML code that does not belong to it. It is recomended
! to name this template <strong>box_id.html</strong>.</li>
! <li>It is recomended to place all the files related to a WebBox in a
! separate folder, for better readability and structure of the
! application.</li>
! <li>Never print anything from the PHP code, except maybe for
! debug!</li>
! <li>Never construct HTML code in the PHP, put all the HTML in the
! template instead!</li>
! <li>Assign to template variables only a value that is really a
! variable, what is not a variable should be placed in the
! template.</li>
! </ul>
! <p>Don't worry if you don't understand these last 3 tips, we will
! discuss them later.</p>
! <span class="button"><a href="#toc">TOC</a></span>
! <hr>
! <a name="study"></a>
! <h3>Study the sample application</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>The <em>menu</em> of pages now is implemented as a WebBox.
! <a href="{{APP3_URL}}browse.php?templates/menu/" target="_blank">
! Have a look at its files</a>. Notice that
! <a href="javascript:codeReview('{{APP3_PATH}}templates/menu/menu.html')">
! <em>menu.html</em></a> does not include explicitly the JS and CSS code
! of the <em>menu</em> (like templates) because it is done automatically
! by the framework.
! <br><br>
! </li>
! <li>Notice how are included several webboxes in
! <a href="javascript:codeReview('{{APP3_PATH}}templates/page2.html','22,25,28,31,34')">
! <em>Page 2</em></a>. To include a webbox we simply include the template
! that contains the webbox (it is a template inclusion).
! <br><br>
! </li>
+ <li><a href="{{APP3_URL}}browse.php?templates/tip/" target="_blank">
+ Study</a> the different implementations of the <em>tip</em> webbox
+ and notice what is wrong with them (it is explained in the comments).
+ (Make sure that you select <em>Code View</em> in the file browser.)
+ <br><br>
+ </li>
! <li>The application has defined a constant TIP_PATH in
! <a href="javascript:codeReview('{{APP3_PATH}}config/const.Paths.php','8')">
! <em>config/const.Paths.php</em></a> and then has used it in several
! places, like in
! <a href="javascript:codeReview('{{APP3_PATH}}templates/tip/tip.php','2')">
! <em>tip.php</em></a>,
! <a href="javascript:codeReview('{{APP3_PATH}}templates/tip/fun.get_random_tip.php','9')">
! <em>fun.get_random_tip.php</em></a>, etc.
! This is better than hardcoding paths, because in case that you move
! or rename this folder, you have to change just the value of a constant
! and not every occurrence of the path.
! <br><br>
! </li>
! <li>The framework outputs a wellcome message each time that you initiate
! the application. This is done using the function
! <strong>WebApp::message()</strong> in the file
! <a href="javascript:codeReview('{{APP3_PATH}}init.php','7')">
! <em>init.php</em></a>.
! <br><br>
! </li>
! <li>
! The application has also support for counting clicks and displaying
! them, however it is optional. See how it is done:
! <a href="javascript:codeReview('{{APP3_PATH}}config/const.Options.php','51-55')">
! <em>config/const.Options.php</em></a>,
! <a href="javascript:codeReview('{{APP3_PATH}}init.php','9-12')">
! <em>init.php</em></a>,
! <a href="javascript:codeReview('{{APP3_PATH}}global.php','8-14')">
! <em>global.php</em></a>.
!
! <ul>
! <li>The constant COUNT_CLICKS is not a framework constant,
! it is defined and used by the application.</li>
! <li>The functions <strong>WebApp::addSVar()</strong>,
! <strong>WebApp::getSVar()</strong>,
! <strong>WebApp::setSVar()</strong> are used to handle
! <strong>state variables</strong> (or session variables,
! or persistent variables). We will see more about state variables
! later.</li>
! <li>
! The files
! <a href="javascript:codeReview('{{APP3_PATH}}init.php')">
! <em>init.php</em></a>,
! <a href="javascript:codeReview('{{APP3_PATH}}global.php')">
! <em>global.php</em></a>, as well as
! <a href="javascript:codeReview('{{APP3_PATH}}before_page.php')">
! <em>before_page.php</em></a> and
! <a href="javascript:codeReview('{{APP3_PATH}}after_page.php')">
! <em>after_page.php</em></a> are optional.
! <dl>
! <dt><strong>init.php</strong></dt>
! <dd>This file is included by the framework only the first time that
! the application is openned (at the beginning of the session).It may
! be used to initialize anything.</dd>
! <dt><strong>global.php</strong></dt>
! <dd>This file is included every time, if it exists. It may contain
! functions, constants and variables that are used throughout the
! whole application. </dd>
! <dt><strong>before_page.php</strong></dt>
! <dd>This file is included before each page is parsed.</dd>
! <dt><strong>after_page.php</strong></dt>
! <dd>This file is included after each page is constructed.</dd>
! </dl>
! <br>
! Browse also the
! <a href="{{SAMPLE_URL}}browse.php" target="_blank">empty-sample</a>
! application.
! </li>
! </ul>
! </li>
! </ul>
! <span class="button"><a href="#toc">TOC</a></span>
! <hr>
! <a name="exercises"></a>
! <h3>Exercises</h3>
! <p>Before starting the exercises, make a copy of the application
! <em>app2</em> to the folder <em>test/app2</em> and a copy of
! <em>app3</em> to the folder <em>test/app3</em>. If you have problems
! with doing this then see the
! <a href="javascript:tabs3_select('tabs3::tutorial','transitions')">
! first tutorial</a>, second exercise.</p>
! <a name="exercise_1"></a>
! <h4>1 - Use webbox <em>menu</em> in application <em>app2</em></h4>
<ol>
! <li><kbd>$ cd test/app2/templates</kbd></li>
! <li>Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/header.html')">
! header.html</a> and append the line: <br>
! <kbd><Include SRC="{{#UP_PATH}}app3/templates/menu/menu.html" /></kbd>
! </li>
! <li>Refresh the application <em>app2</em> in browser.</li>
</ol>
+ <p><strong>UP_PATH</strong> contains the path of the parent folder of the
+ application.</p>
! <p>If you view the HTML code of <em>app2</em> (in browser), you will
! notice that <em>menu.js</em> and <em>menu.css</em> have been included
! as well in the <em><head></em> of the page.</p>
!
! <a name="exercise_2"></a>
!
! <h4>2 - Use webbox <em>tip</em> in application <em>app2</em></h4>
<ol>
! <li><kbd>$ cd test/app2/templates</kbd></li>
! <li>Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/header.html')">
! header.html</a> and append the line: <br>
! <kbd><Include SRC="{{#UP_PATH}}app3/templates/tip/tip.html" /></kbd>
</li>
! <li>Refresh the application <em>app2</em> in browser. You will get an
! error, because the <em>TIP_PATH</em> constant is unknown in
! <em>app2</em>.</li>
+ <li>Open
+ <a href="javascript:codeReview('{{APP3_PATH}}templates/tip/tip.php','2')">
+ tip.php</a> and replace the include statement with:<br>
+ <kbd>$tip_path = dirname(__FILE__)."/";</kbd><br>
+ <kbd>include_once $tip_path."fun.get_random_tip.php";</kbd><br>
+ Do the same thing with
+ <a href="javascript:codeReview('{{APP3_PATH}}templates/tip/fun.get_random_tip.php','9')">
+ fun.get_random_tip.php</a>.</li>
! <li>Refresh the application <em>app2</em> in browser. You will see that
! the tip is displayed, but it has no styles. This is because the framework
! does not reckognize <em>tip_styles.css</em> as being the stylesheet of
! webbox <em>tip</em>. Make a copy of it with the name <em>tip.css</em>:<br>
! <kbd>$ cp tip_styles.css tip.css</kbd></li>
! <li>Refresh again the application. Finally it should be OK.</li>
! </ol>
! <p><em>__FILE__</em> is a PHP constant and <em>dirname()</em> is a PHP
! function.</p>
! <a name="exercise_3"></a>
! <h4>3 - Enable counting</h4>
! <ol>
! <li>Open the file
! <a href="javascript:codeReview('{{APP3_PATH}}config/const.Options.php','51-55')">
! config/const.Options.php</a> and set the constant
! <em>COUNT_CLICKS</em> to <em>true</em>.</li>
! <li>Test the application and see what happens. Then make it <em>false</em>
! and test the application again.</li>
</ol>
! <p><em>COUNT_CLICKS</em> is not a framework constant, it is defined and
! used by the application <em>app3</em>.</p>
! <a name="exercise_4"></a>
! <h4>4 - Test <em>before_page.php</em> and <em>after_page.php</em></h4>
! <ol>
! <li>Open the files
! <a href="javascript:codeReview('{{APP3_PATH}}before_page.php','6')">
! before_page.php</a> and
! <a href="javascript:codeReview('{{APP3_PATH}}after_page.php','6')">
! after_page.php</a>
! and uncomment the <em>print</em> statements.</li>
! <li>Test the application and see what happens. Then comment them again.</li>
! </ol>
+ <a name="exercise_5"></a>
! <h4>5 - Modify the <em>tip</em> webbox</h4>
! <ol>
! <li>Suppose that we don't want to display a random tip, but we want to
! display the tips in their order. So, when we first open the app we
! should see the first tip, and each time that we open another page
! we should see the next tip. When we are at the end of the tips we should
! start again from the beginning. Can you do it yourself? You can use
! state variables and the functions <strong>WebApp::addSVar()</strong>,
! <strong>WebApp::setSVar()</strong> and <strong>WebApp::getSVar()</strong>.
! <br><br>
! </li>
! <li>Now suppose that we want to control ourselves the rotation of the tips.
! That is, the tip will stay the same when we switch the pages, however it
! will have some buttons like this: '<strong><</strong>'(previous),
! '<strong>></strong>'(next), '<strong><<</strong>'(first),
! '<strong>>></strong>'(last). When we click the button <em>next</em>
! we should get the next tip, etc. How can we do this? Think about it.</li>
! </ol>
Index: templates.html
===================================================================
RCS file: /cvsroot/phpwebapp/documentation/templates/tutorial/templates.html,v
retrieving revision 1.5
retrieving revision 1.6
diff -C2 -d -r1.5 -r1.6
*** templates.html 20 Aug 2003 07:33:55 -0000 1.5
--- templates.html 22 Aug 2003 06:51:17 -0000 1.6
***************
*** 365,368 ****
--- 365,377 ----
<strong>{{#TPL_PATH}}</strong> for the templates, in the selected
lines.</li>
+
+ <li>There is still one more thing to fix: open
+ <a href="javascript:codeReview('{{APP2_PATH}}templates/footer.js','5-8')">
+ <em>footer.js</em></a>, modify <em>goto_page1()</em> and set the
+ <em>GoTo()</em> parameter to "page1/page1.html".</li>
+
+ <li>Don't forget to refresh or reload the browser, so that it gets the
+ change in <em>footer.js</em> (otherwise it may still use the cached, old
+ version).</li>
</ol>
|
