Создание шаблона для веб-дизайна с использованием PHP

Хотя опытные программисты так же могут найти полезную информацию в этой обучающей статье, она написана, в основном, для начинающих программистов.

Введение
Требования
Обучение
Объяснение кода и как он работает
Расширение функциональности и удобства использования
Заключение

Введение:

Не важно, есть ли у Вас небольшой или огромный сайт, Вы знаете, как много времени и усилий необходимо, чтобы обновлять страницы Вашего сайта. Процесс обновления становится все более раздражающим, когда Вы вносите изменения, которые нужно поменять на каждой странице Вашего сайта. Хорошим примером является добавление кнопки в шапку сайта или изменение информации об авторских правах в подвале вашего сайта.

В этой обучающей статье я объясню, как PHP приходит на помощь всего с несколькими строками кода. Вы можете использовать это руководство как основу для облегчения поддержки и обновления Вашего сайта.

Требования:

Сервер/хостинг, способный запускать php скрипты
Не требуется знание php!

Обучение:

Шаг 1 Создайте папку на Вашем сервере и назовите его «design».

Шаг 2 Создайте следующие файлы в папке «design»:

'header.html', 'footer.html', 'right_column.html', 'left_column.html'

Шаг 3 Создайте еще одну папку, и назовите ее "pages"

Шаг 4 В разделе "pages", создайте страницу и дайте ей имя: 'main.html'

Шаг 5 Теперь в корневом разделе создайте файл и дайте ему 'index.php'

Шаг 6 Добавьте следующий код в Ваш файл 'index.php' (не волнуйтесь, позже все объясню!):

<?php

if (isset($_REQUEST['page'])) { if($_REQUEST['page'] !="") if(file_exists("pages/".$_REQUEST['page'].".html")) $page_content = file_get_contents("pages/".$_REQUEST['page'].".html"); else if (file_exists($_REQUEST['page'].".html")) $page_content = file_get_contents($_REQUEST['page'].".html"); else echo "<center>Page:".$_REQUEST['page']." does not exist! Please check the url and try again!</center>"; } else $page_content = file_get_contents("pages/main.html"); $page_content = str_replace("!!HEADER!!", file_get_contents("design/header.html"),$page_content); $page_content = str_replace("!!LEFT_COLUMN!!", file_get_contents("design/left_column.html"),$page_content); $page_content = str_replace("!!RIGHT_COLUMN!!", file_get_contents("design/right_column.html"),$page_content); $page_content = str_replace("!!FOOTER!!", file_get_contents("design/footer.html"),$page_content); $page_content = str_replace("!!COMMON_TAGS!!", file_get_contents("design/common_tags.html"),$page_content); echo $page_content;

?>

Шаг 7 Отправляйтесь в 'main.html' и создайте дизайн, который Вам нравится. Этот дизайн будет применён к макету Вашего сайта в конце. Только тут, вместо добавления полного дизайна шапки, добавьте !!HEADER!!, а потом перейдите в файл 'header.html', который Вы создали в папке «design». Теперь, в 'header.html', создайте дизайн основной шапки сайта. В итоге, эта шапка сохранится на всех страницах вашего сайта.

Теперь сделайте то же самое для других дизайнов, то есть: вставьте !!FOOTER!! и создайте 'footer.html', !!RIGHT_COLUMN!! И создайте 'right_column.html', вставьте !!LEFT_COLUMN!! И создайте 'left_column.html' соответственно.

Или просто скопируйте этот заранее настроенный дизайн:

'main.html'

<!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>Main Page - PHP Simple Templating System By Zeronese</title> !!COMMON_TAGS!! </head> <body> <table width="95%" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><center> !!HEADER!! </center> </td> </tr> <tr> <td class="column" width="25%" height="100%">!!LEFT_COLUMN!!</td> <td> </td> <td width="25%">!!RIGHT_COLUMN!!</td> </tr> <tr> <td class="column" colspan="3"><center> !!FOOTER!! </center> </td> </tr> </table> </body> </html>

'header.html'

<div class="header">Welcome To The PHP Simple Templating System</div>

'footer.html'

<div class="footer"> <center> <a href="http://www.zeronese.net">PHP Simple Templating System is a Copy Right of Zeronese.net</a> </center> </div>

'right_column.html'

<table class="column" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>Advertisement</td> </tr> <tr> <td>Truestudio.ru offers professional web design templates for both web designers and end users. Save time and money and still get a high quality professional web site for business, ecommerce or personal use. <a href="https://www.truestudio.ru">Learn More...</a></td> </tr> </table>

'left_column.html'

<table class="column" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="">Home</a></td> </tr> <tr> <td><a href="!!WEBSITE_URL!!tutorial.html">Tutorial Page</a></td> </tr> <tr> <td><a href="!!WEBSITE_URL!!sub-directory/page.html">Tutorial Sub Page</a></td> </tr> <tr> <td><a href="https://www.truestudio.ru">Visit Truestudio.ru</a></td> </tr> </table>

и, чтобы добавить небольшой штрих к нашему дизайну, создадим файл 'styles.css' в папке «дизайн» и добавим следующий код:

body{ background-color:#003399; color:#FFFFFF; } a{ color:#FFFFFF; font-weight:bold; text-decoration:none; } a:hover{ text-decoration:underline; } .column{ background-color:#3366CC; vertical-align:top; } .header{ background-color:#336699; } .footer{ background-color:#336699; }

Теперь, давайте протестируем! Опробуем наш дизайн, используя браузер: main_folder_of_files/index.php?page=main.html

Обьяснение кода и как он работает:

Читать далее: https://truestudio.ru/obyasnenie-koda-i-kak-on-rabotaet/

Расширение функциональности и удобства использования:

Читать далее: https://truestudio.ru/rasshirenie-funktsionalnosti-i-udobstva-ispolzovaniya/

Я надеюсь, что эта статья была полезна для Вас.

И да пребудет с Вами исправный код!