Principle of Realizing a Dynamic Web
Content
of the lesson:
- Dynamic Web and Its Parts
- Structure of Files for Dynamic Web
- File Index.php
- Switching between Sections of Web
Dynamic Web and Its Parts
We will create a simple web presentation using PHP and database server MySQL in the following lessons. Our presentation will consist of these parts:
- Introduction page - static information about the page.
- Processing a text file - realizing a list of employees using an external text file exported from a table calculator.
- Photogallery - dynamically generated gallery of photos using a given directory structure.
- Register form - a form to save data to a database.
- List of articles - viewing articles from database (similar to a news server).
We will try to use the advantages of dynamic web technologies as much as possible when creating this website.
Structure of Files for Dynamic Web
At first we can create the basic structure of files for our website. You should place the directory with this web inside a directory which is visible to the webserver and where PHP scripts can be run. If you install the Wamp server (download) you should use the directory web inside c:\wamp\www\ (it is possible to create directories for dynamic web pages in this directory). Create following files and directories inside web:
- css - directory where we will place CSS files for our web,
- images - directory where we will store every file connected to graphics,
- index.php - file which will contain the basic structure for our web,
- utils.php - file (library) which will contain parts of web and where we will centrally define all functions (for example functions to work with the database etc.).
Creation of the CSS File
Open Adobe Dreamweaver (in case you do not have this software, you can use any text editor like pspad) and create a new empty CSS file using the UTF-8 encoding (File -> New) as in the following image.
There are only two rows in the inside. The first one informs us about the encoding and the second one contains a simple comment that this is a CSS Document.
@charset "utf-8"; /* CSS Document */
Save the file styly.css into the css directory. Then create the file index.php as a new empty PHP file. In Adobe Dreamweaver select File -> New. You can also link your CSS file to the new PHP file (right bottom corner of the window).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="file:///C|/wamp/www/web/css/styly.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
You can see that the inserted CSS file is linked using an absolute path within Windows on the local computer. The path will change to relative in moment when you save your index.php file to the directory with your web (File -> Save). The header will change like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styly.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
Everything necessary to start creating our web is done after these steps.
File Index.php
The newly created file index.php contains only the html header of our web page so far. The only thing which should be changed is the text between tags <title> and </title>. For search engines like Google is this information very important when inserting the page into database. You should avoid having information like "untitled document" in the head part (see: millions of websites which ignore the page title...). It is possible that we do not know the title which will characterize our website but we should not forget to add it in the future.
Our page will consist of two parts: menu and content. We can realize them using div tags and identifiers. The layout can be done using CSS styles.
Menu
Menu is an important part of our web to be able to switch between sections. We will create a simple menu at the beginning and add two items ("Introduction" and "Contacts").
As you can see the menu in html is defined using a list of links:
<div id="menu">
<ul>
<li><a href="index.php">Introduction</a></li>
<li><a href="index.php">Contacts</a></li>
</ul>
</div>
Content
The next part of our web is the content of each page.
<div id="obsah">
<p>Content will be here.</p>
</div>
Our index.php file contains the basic structure of the web now.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styly.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="index.php">Introduction</a></li>
<li><a href="index.php">Contacts</a></li>
</ul>
</div>
<div id="obsah">
<p>Content will be here.</p>
</div>
</body>
</html>
Switching between Sections of Web
We will answer the essential question now: "How will we implement switching between the sections?". When using HTML files we can create a new file for each section but in this case we have only one file for all sections. Because the page is generated dynamically you have to use common programming constructions like if-then etc. The entire page is then created as a result of program written in PHP.
Our request can be expressed this way: "I want to display the introduction page otherwise the contact page".
How can you tell PHP which section should be displayed? Because HTTP protocol does not support any states, the only option is to add a variable inside the URL. We will add a variable sekce to every link in our page and this variable will store the information which page should be displayed. In our case we should use two different values for this variable.
- index.php?sekce=uvodni-strana - in case the value is "uvodni-strana" we know that the indroduction page should be displayed.
- index.php?sekce=kontakty - in case the value is "kontakty" we know that the contact page should be displayed.
You have to adjust all links to contain the variable sekce.
<div id="menu">
<ul>
<li><a href="index.php?sekce=uvodni-strana">Introduction</a></li>
<li><a href="index.php?sekce=kontakty">Contacts</a></li>
</ul>
</div>
Inside our PHP script we have to get the value of this variable to display the page which was requested. As we know from the previous lessons, information from URL are saved into the superglobal array $_GET. You can get the value from it and save it inside the variable $sekce:
<body>
<?php
$sekce = $_GET["sekce"];
?>
<div id="menu">
<ul>
<li><a href="index.php?sekce=uvodni-strana">Introduction</a></li>
<li><a href="index.php?sekce=kontakty">Contacts</a></li>
</ul>
</div>
<div id="obsah">
<p>Content of the page.</p>
</div>
</body>
Now you have to write a condition to display relevant information. You should use the condition if (condition) {commands}.
<div id="obsah">
<?php
if ($sekce == "uvodni-strana"){
print("You are at the introduction page.");
}
if ($sekce == "kontakty"){
print("You are at the contact page.");
}
?>
</div>
In case you try to display our web without setting the value of sekce (for example using the address http://127.0.0.1/web/) you can see the following result:
You can see two problems in the image:
- A line with text "Notice: Undefined index: sekce in C:\wamp\www\web\index.php on line 13". was displayed. It is a warning because you requested the variable sekce from the array $_GET but there is not any variable with this name inside the array. These warning messages are displayed in case you enable displaying them in the PHP module of your server. These messages can be easily disabled using the command error_reporting(E_ALL ^ E_NOTICE);. You should place this command as the first one before every other commands of your PHP script.
- The content of the introduction page was not displayed. Why? Because the content of the introduction page is displayed only in case that the value of sekce is equal to "uvodni-strana". There is no variable sekce in the URL so the condition is not valid and nothing is displayed. In case someone requests our page and does not enter any parameter he should see the introduction page - we will solve this problem by adding a new condition: "If no section is defined, display the introduction page (set the value of sekce to "uvodni-strana").
<?php
error_reporting(E_ALL ^ E_NOTICE);
$sekce = $_GET["sekce"];
if ($sekce == ""){
$sekce = "uvodni-strana";
}
?>
The final script realizes switching between two sections and we can add any content to both of them. The entire script is available here: php-web-v1 and is also displayed below this text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styly.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
error_reporting(E_ALL ^ E_NOTICE);
/* do proměnné $sekce uložíme hodnotu proměnné sekce z url */
$sekce = $_GET["sekce"];
if ($sekce == ""){
$sekce = "uvodni-strana";
}
?>
<div id="menu">
<ul>
<li><a href="index.php?sekce=uvodni-strana">Introduction</a></li>
<li><a href="index.php?sekce=kontakty">Contacts</a></li>
</ul>
</div>
<div id="obsah">
<?php
if ($sekce == "uvodni-strana"){
print("Nyní se nacházíte na úvodní straně webu.");
}
if ($sekce == "kontakty"){
print("Nyní se nacházíte v sekci kontakty.");
}
?>
</div>
</body>
</html>
Additional Texts
Questions
- How can you send variables to your PHP script?
- What is the correct syntax of if-then command in PHP?