We talked only about static pages, that is, those that, no matter how the user interacts with them, always remain unchanged, and in order for their content or design to change, the page owner must edit the code manually.

Dynamic pages and what they need

In addition to static pages, there are also dynamic pages. These are the majority of people on the Internet now. Information in them is loaded from external sources, such as a database or other files. The content and formatting of such pages may change depending on user activity. To edit dynamic sites, it is not necessary to interfere with their code - it is enough to change the content in a specially designed file or database, which, by the way, is also a file, only structured in a certain way.

HTML and CSS alone are not enough to create dynamic websites. Programming languages ​​are also used here, as well as databases and query languages ​​for them. Most often, modern dynamic websites use HTML, CSS, PHP, JavaScript, and SQL in their work. The first two abbreviations are already familiar to you firsthand, SQL is used to access databases, JavaScript is a client language, the commands of which are processed by the browser and are often used to show you all sorts of beauty like curtains or smoothly opening photographs, but PHP is a server-side programming language , which works, among other things, with the content of the site and makes it dynamic, we will come into contact with it today.

Example of using the include command

In the previous article, I talked about the block layout of the site and gave the example of a simple page (document index.html and the file attached to it style.css).

Now we will split the document index.html into several files, each of which will contain its own part of the page, which will help further divide the code, improve the template structure and, in fact, make the page dynamic. For this purpose, we will use the PHP language, or rather, only one of its directives - the function include(), which includes one file within another.

1. Change the resolution of the file created in the article about block layout index With .html on .php so that the document is called index.php. File type .PHP indicates to the server that the document was written or uses inserts in the programming language of the same name.

2. In the folder with the page, create a directory blocks.

3. All supporting information (top, bottom, navigation and sidebar site) we will put it in separate files, which we will place in the folder blocks.

So, create four files in the blocks directory: header.php, navigation.php, sidebar.php And footer.php. Fill the files with code.

4. Check the template folder structure. The files must be in the root index.php, style.css and directory blocks.

Folder structure blocks should be like this.

5. On file index.php remove the existing code and write a new one:

In the browser, the index.php file looks exactly the same as before, but the template structure has completely changed. We’ll talk about what happened later, but now we’ll answer the question about mysterious commands like .

Like HTML code, PHP code also has its own beginning and end designation. So you need to start PHP insertion with the command , and end with the line ?> . Between these commands the main code is written. In our case, this is just one command - include.

Function include() inserts code from another file into a file, making it possible to store different parts of a page in different documents, thereby reliably separating them from each other.

As a result of the actions performed, we received dynamic page index.php, parts of which are loaded from different files. Thanks to this, you can create other pages, loading into them auxiliary elements from folder files in the same way blocks.

This approach is good because if you want to change, say, the name of a menu item on a website of 20-30 pages, then in a template with a newly created structure you will only need to make changes to one file - blocks/navigation.php, and the menu will change immediately on all pages in which it is included. If the site were static, then to change the name of one menu item you would have to make changes to every of 20-30 pages. The difference is obvious.

From previous lessons, we learned that using the GET method we can pass some parameters directly to the URL. However, there is nothing stopping us from doing this without forms, just listing them in the URL.

We can pass parameters via URL. And we can get these parameters directly in the script. So what's stopping us from showing the user different pages depending on the parameters in the URL?

Creating a dynamic page

To show different pages to the user, you need to prepare content. Let it lie in a multidimensional array:

"Creating dynamic pages", "content" => "Text of the article about dynamic pages." ], [ "title" => "How to catch a kitten", "content" => "Text of the article about kittens." ] ]; ?>

The dynamic parameter in the URL will be called id, and we will catch it in $_GET["id"] . We could add an id field to each element of the array, but then we would have to iterate through all the elements and look for the subarray with the desired id. Therefore, it is much easier to use the keys of the main array as ids.

Simply put, we take the id and try to find an article with that key in the $articles array. It looks like this:

All that remains is to sketch out the menu output and check the id for correctness. It turns out to be a real PHP router!

"Home page", "content" => "Text of the article about our site" ], [ "title" => "Creating dynamic pages", "content" => "Text of the article about dynamic pages." ], [ "title" => "How to catch a kitten", "content" => "Text of the article about kittens." ] ]; # If the id is passed, write the article to $article or null if there is no article with that id if(isset($_GET["id"])) $current_article = $articles[$_GET["id"]] ?? null; # If id is not passed, then this is the main page, we can show the page with id = 0 else $current_article = $articles; ?> $article): ?> ">

Error 404: Page not found

Now you can create dynamic sites where the number of pages depends on the number of array elements, rather than PHP files. :) If the site should have different types of pages, for example, an article and a product, you can pass the page type as the second parameter: site.ru?type=article&id=5 .

Of course, this system is not perfect. After a while you will learn how to make a normal CNC (more convenient URLs, for example site.ru/articles/5/) and store articles in a file or database.

To solve the third problem, the Denwer program is well suited, which can be installed on your computer for free. If you don’t know what kind of program this is, then I advise you to read: how to install Denwer, this article explains step by step (for beginners) how to install it and how to use it.

Of course, there are other tools that allow you to interpret PHP. For example, Apatch, but it is quite complicated to configure, and if you are a beginner, I do not recommend starting with it.

In order to start developing a website in PHP, you need basic knowledge of HTML. I've already written about how to create a simple HTML page. All HTML tags are described there, without which it is impossible to create a website. Therefore, I strongly recommend starting to study website building from that article.

What is the difference between a PHP website and a bare HTML website?

A PHP website is almost no different from a bare HTML website. The only difference is more flexible setup and management of the site, and it is also possible to automate many functions. Let me give you a simple example.

Let’s say you need to change literally one word in the website header. If the site is made in bare HTML, then you will need to open each html file to make a change, and this is very inconvenient. If the site header is made in PHP as a plug-in component, then changes will only need to be made in one file and they will automatically change throughout the entire site.

The structure of a typical PHP website:

Now I will provide the code for the site template in PHP. Please note that pages made using php are recommended to have a .php extension, although this is not a requirement. With certain hosting settings, files with a regular .html extension can also process PHP code.

Index.php file code:

... $_SERVER["DOCUMENT_ROOT"]."/head.php"; ?> ... ...

$_SERVER["DOCUMENT_ROOT"]."/top.php"; ?>

...

$_SERVER["DOCUMENT_ROOT"]."/sidebar1.php"; ?>

...

...The main part of the site...

...

$_SERVER["DOCUMENT_ROOT"]."/sidebar2.php"; ?>

...

$_SERVER["DOCUMENT_ROOT"]."/footer.php"; ?>

...

Now let’s look at each of the connected elements separately:

• head.php
• top.php
• sidebar1.php
• sidebar2.php
• footer.php

Please note that they are connected via a special PHP command:

require_once <полный путь/имя файла>

Each file is respectively responsible for a separate part of the site. I tried to name them as informative and understandable as possible. A site may consist of a larger number of such included files. Let's look at each element in order from top to bottom.

Last update: 11/1/2015

Now we will create a small website that is designed to give an initial understanding of working with PHP.

To create programs in PHP, we need a text editor. The most popular program today is Notepad++.

Let's move on to the previously created directory C:\localhost, which will store all the site documents. Let's create a text file and name it index.html. Let's open it in a text editor and add the following code to it:

Enter your details:

Enter name:

Enter last name:

The html code contains a form with two text fields. When the button is clicked, this form's data is sent to the display.php script, as it is specified in the action attribute.

Now let's create this script that will process the data. Add to folder C:\localhost new text file. Let's rename it display.php. By default, php program files have the extension .php. So, let's add the following code to the display.php file:

".$name . " " . $surname . ""; ?>

Here, in the html markup, there are inclusions of PHP code. Tags are used to add PHP expressions to a page, between which there are instructions in PHP. In the php code we receive the form data and display it on the page.

Every single PHP expression must end with a semicolon. In this case we have three expressions. Two of them receive the submitted form data, for example $name = $_POST["firstname"]; .

$name is a variable that will store some value. All variables in PHP are preceded by a $ sign. And since the form on the index.html page uses the POST method to submit, using the expression $_POST["firstname"] we can get the value that was entered into the text field with the name="firstname" attribute. And this value goes into the $name variable.

Using the echo operator, you can display on the page any value or text that comes after the operator. In this case (echo "Your name: ".$name . " " . $surname . "") using a period sign, the text in quotation marks is connected to the values ​​of the variables $name and $surname and displayed on the page.

Now let's turn to the input form by going to the address http://localhost:8080:

Enter some data and click on the send button:

So, our script worked display.php, which received and displayed the sent data on the page.

In the last lesson, we figured out what blocks the trip template will consist of, so we can get to work. First, let's create two folders:

images - this folder will contain any graphic files used to design the template. Because We don’t have any design developments yet, then drop any one graphic file into this folder, otherwise Joomla will not install the template and will give an error if the folder is empty.

ATTENTION: The template images folder does not contain content graphics!

css - this folder will contain cascading style sheet files. First, let's place an empty template.css file in it, which will be used to assign different design styles to site elements.

Next, you can begin to create the main file index.php, which will determine the visual arrangement of site elements and tell the Joomla CMS in which block to place various components and modules. The file is a combination of PHP and HTML.

I always use only Macromedia Dreamweaver when writing code. An excellent program, I strongly recommend it to beginners, because... If you made a mistake while working on the code, the program will definitely highlight your mistake.

On the site you will find a tutorial for Macromedia Dreamweaver. If you are going to develop websites, then you should master this program, at least at the initial level, in order to edit template codes without errors.

The positioning of page elements (blocks) is done using HTML code; specifically, we will use DIV tags. But the way our site will work on the Joomla engine, i.e. It will be dynamic, then you will also have to use the PHP language. With its help, we will determine in which blocks the positions for outputting modules will be located, and what these positions will be called, whether the blocks will be collapsed or not. We will connect style sheets from external files, the content language, set how the site size will change, etc.

index.php

File header

The file header consists of several parts. The first part of the PHP header code is to ensure that the file is not accessed directly, for security reasons.

< ?php
defined ("_JEXEC" ) or die ;
JHtml::_("behavior.framework" , true ) ;
$app = JFactory::getApplication() ;
?>
< ?php echo "< ?" ; ?> xml version="1.0" encoding=" < ?php echo $this-> _charset ?> "?>

DOCTYPE is a very important parameter based on which the browser decides how to render this page and how to interpret the CSS.

< ! DOCTYPE html PUBLIC "- / / W3C/ / DTD XHTML 1.0 Strict/ / EN""http: // www.w3.org/ TR/ xhtml1/ DTD/ xhtml1- strict.dtd">

The following snippet retrieves the installed language from the global configuration.

< html xmlns= "http:// www.w3.org/ 1999/ xhtml" xml:lang= " < ?php echo $this-> language; ?> " lang= " < ?php echo $this-> language; ?> " dir = " < ?php echo $this-> direction; ?> " >

Following is a code snippet that includes additional information for the header, which is set in the global configuration. You can see this information by looking at the source code of any web page. In particular, these are meta tags, which you already know about.

< head>
< jdoc:include type= "head" / >

The following header lines contain links to the main Joomla CSS styles.

< link rel= "stylesheet" href= "< ?php echo $this-> baseurl ?> / templates/ system / css/ system .css" type="text /css" / >
< link rel= "stylesheet" href= "< ?php echo $this-> baseurl ?> / templates/ system / css/ general.css" type="text /css" / >

To use template design styles, we link to a file containing cascading style sheets template.css, which is located in the CSS folder. It doesn’t matter that this file is empty for now, the main thing is to connect it, we’ll deal with the design later, when we install the template on Joomla. This will make it easier to observe the result.

< link rel= "stylesheet" href= "< ?php echo $this-> baseurl ?> /templates/< ?php echo $this-> template ?> /css/template.css" type="text /css" / >

The following code snippet allows us to collapse the left or right columns if there are no modules located at the left and right positions. If both columns are collapsed, the content takes up 100% of the page width. If only one column is included, then the content takes up 80%. With two columns enabled, content accounts for 60% of the page width.

< ?php
if ($ this-> countModules("left and right" ) = = 0) $contentwidth = "100" ;
if ($ this-> countModules("left or right" ) = = 1) $contentwidth = "80" ;
if ($ this-> countModules("left and right" ) = = 1) $contentwidth = "60" ;
?>

Header closes

< / head>

< body>

The “page” block contains the design of only the site page, which will be 950px wide.

< div id= "page" >

The "top" block is located at the very top of the page and contains two blocks "logo" and "user1".

< div id= "top" >

In the “logo” bokeh we will place a graphic file of the logo; this will be specified in the style sheets. But we write the automatic display of the site name in the index.php file, and place the name in the H1 tag, which is very important for search engine optimization.

< div id= "logo" >
< h1> < ?php echo $app - >getCfg("sitename" ) ; ?>< / h1>
< / div>

Let's define the position “user1” in the block of the same name to display the site search module.

< div id= "user1" >
< jdoc:include type= "modules" name= "user1" style= "xhtml" / >
< / div>
< / div> < ! - - конец блока top - - >

Output of the horizontal menu module in the “user2” block in the “user2” position. The block will collapse if there is no module at that position.

< ?php if ($this-> countModules("user2" ) ) : ?>
< div id= "user2 " >
< jdoc:include type= "modules" name= "user2" style= "xhtml" / >
< / div>
< ?php endif ; ?>

Next comes the site header block. In it we will define the “header” position for displaying modules. The block will collapse if there is no module at that position. I intentionally expanded the capabilities of this block to be able to place in it not only the header image, but also image rotators.

< ?php if ($this-> countModules(" header") ) : ?>
< div id= "header">
< jdoc:include type= "modules" name= "header" style="xhtml" / >
< / div>
< ?php endif ; ?>

In the “user3” block we define the position “user3” for outputting modules.

The block will collapse if there is no module output at this position "user3".

< ?php if ($this-> countModules("user3" ) ) : ?>
< div id= "user3" >
< jdoc:include type= "modules" name= "user3" style= "xhtml" / >
< / div>
< ?php endif ; ?>

A block of the left column opens, which will collapse if there are no modules in the “left” position.

< ?php if ($this-> countModules("left" ) ) : ?>
< div id= "left" >
< jdoc:include type= "modules" name= "left" style= "xhtml" / >
< / div>
< ?php endif ; ?>

The most important block content that can occupy 100% of the page width, 80% and 60%, depending on the number of columns included.

< div id= "content< ?php echo $contentwidth ; ?> " >

Displaying messages in components

< jdoc:include type= "message" / >

Output content content.

< jdoc:include type= "component" style= "xhtml" / >
< / div> < ! - - конец блока контента- - >

A block of the right column opens, which will collapse if there are no modules in the “right” position.

< ?php if ($this-> countModules("right" ) ) : ?>
< div id= "rigth" >
< jdoc:include type= "modules" name= "right" style= "xhtml" / >
< / div>
< ?php endif ; ?>

Output of the “footer” block, designed to display the “HTML code” module with copyright information. You can also place the bottom here horizontal menu or content presentation module. The block will be collapsed if more than one module is displayed in this “footer” position

< ?php if ($this-> countModules("footer") ) : ?>
< div id= "footer" >
< jdoc:include type= "modules" name= "footer" style= "xhtml" / >
< / div>
< ?php endif ; ?>

The site page block “page”, body and all code are closed.

< / div> < ! - - конец блока page- - >
< / body> < ! - - конец блока body - - >
< / html> < ! - - конец кода- - >

We have created a complete index.php file. Now you know which commands are used and in what sequence the template blocks are displayed.

ATTENTION: In order for the template code to be read from the joomla admin panel, the index.php file must be opened in the AkelPad editor and saved in UTF-8 encoding, while unchecking the BOM checkbox. If you used the Macromedia Dreamweaver program to work with the file, then you need to select “Edit”> “Page Properties” in the top menu and select the document encoding Unicode (utf-8), and uncheck “enable Unicode signatures (BOM)”. However, I strongly do not advise you to edit the code from the Joomla admin panel, if you mess something up - there is no turning back, unlike the Macromedia Dreamweaver program, where you can always undo the changes made.

The design of the blocks itself will be described in template.css. But we will configure style sheets after installing the template on Joomla 3 (joomla 2.5), and for this we need to create