[phpWebApp-commits] CVS: documentation/templates/tutorial templates.html,1.2,1.3
Brought to you by:
dashohoxha
Menu
▾
▴
[phpWebApp-commits] CVS: documentation/templates/tutorial templates.html,1.2,1.3
|
From: Dashamir H. <das...@us...> - 2001-12-28 19:56:35
|
Update of /cvsroot/phpwebapp/documentation/templates/tutorial
In directory usw-pr-cvs1:/tmp/cvs-serv397/templates/tutorial
Modified Files:
templates.html
Log Message:
Index: templates.html
===================================================================
RCS file: /cvsroot/phpwebapp/documentation/templates/tutorial/templates.html,v
retrieving revision 1.2
retrieving revision 1.3
diff -C2 -d -r1.2 -r1.3
*** templates.html 2001/12/27 05:30:35 1.2
--- templates.html 2001/12/28 19:56:32 1.3
***************
*** 19,27 ****
<ul>
<li><a href="#templates">Templates</a>
! <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>
<li><a href="#exercises">Exercises</a>
</ul>
--- 19,39 ----
<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>
***************
*** 39,48 ****
<a name="variables"></a>
! <h4>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: {{tpl_var}}.
</p>
[<a href="#toc">TOC</a>]
--- 51,72 ----
<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/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/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>
[<a href="#toc">TOC</a>]
***************
*** 50,54 ****
<a name="include"></a>
! <h4>The <Include> tag</h4>
<p>
The templates may also contain some extra tags, which are not HTML tags.
--- 74,78 ----
<a name="include"></a>
! <h5>2 - The <Include> tag</h5>
<p>
The templates may also contain some extra tags, which are not HTML tags.
***************
*** 61,69 ****
</pre>
<p>
! It is a very useful tag, because it allows to separate
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).
</p>
--- 85,94 ----
</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>
***************
*** 72,76 ****
<a name="comments"></a>
! <h4>Comments</h4>
<p>
The templates may contain some special comments as well:
--- 97,101 ----
<a name="comments"></a>
! <h5>3 - Comments</h5>
<p>
The templates may contain some special comments as well:
***************
*** 83,86 ****
--- 108,112 ----
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>
***************
*** 89,97 ****
<a name="including"></a>
! <h4>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 header 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
--- 115,123 ----
<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
***************
*** 103,111 ****
</pre>
<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 the cache, instead of
retrieving them again from the server.
</p>
--- 129,140 ----
</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>
***************
*** 114,120 ****
--- 143,406 ----
<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/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>
+
+ [<a href="#toc">TOC</a>]
+ <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>
+
+ [<a href="#toc">TOC</a>]
+ <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>
+
+ [<a href="#toc">TOC</a>]
+ <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.gif"/>
+ </pre>
+ there will be no problem. However, if any image is hard linked like this:
+ <pre>
+ <img src="/img/image_name.gif"/>
+ </pre>
+ it will not be displayed.
+ </p>
+
+ [<a href="#toc">TOC</a>]
+ <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>
+
+ [<a href="#toc">TOC</a>]
+ <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>
+
+ [<a href="#toc">TOC</a>]
+ <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>
+
+ [<a href="#toc">TOC</a>]
+ <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>
+
+ [<a href="#toc">TOC</a>]
+ <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>
|
