Движок сайта

Что такое движок сайта

На простых HTML сайтах каждая статься располагается на своей странице. Но для некоторых сайтов, например для социальных сетей, такой способ не подходит. Весьма неудобно для каждого пользователя создавать отдельную страницу. На таких сайтах для всех пользователей создаётся одна страница. Информация о конкретном пользователе берётся из БД и добавляется на эту страницу. Движок сайта - это набор скриптов и база данных, обеспечивающие работу такого сайта. В этой теме рассматривается создание движка простого сайта со статьями. Я намеренно предлагаю самый простой пример, достаточный, чтобы понять, что такое движок сайта и как его делать. В более сложном варианте будет много элементов и в них будет труднее разобраться. На основе этого примера Вы сможете делать реальные сайты.

Принцип создания

Создание движка сайта - достаточно сложная задача, требующая определённых знаий. Нужно уметь делать вёрстку сайта, работать с файлами и базами данных.

Для создания движка нужно выполнить несколько действий:

Сделать вёрстку страницы
Разделить страницу на блоки и поместить их в отдельные файлы
Написать код, вставляющий блоки на страницу
Создать базу данных для контента сайта
Написать код, который получает контент из базы данных и добавляет на страницу

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

Вёрстка страницы

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

Для данного примера целесообразно создать отдельную папку и размещать в ней все файлы сайта. Назовём страницу page.php. Пока в ней будет только HTML код, но позднее в неё добавится PHP код, поэтому сразу сохраним её в нужном формате. Поместим страницу в созданную папку.

page.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php header('Content-type: text/html; charset=utf-8'); ?>
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">Это шапка сайта</div>
<table>
  <tr>
    <td id="menubar">
      <div id="mainmenu">
      <div><a href="page.php">Главная</a></div>
      </div>
    </td>
    <td>
      <div id="content"></div>
</td></tr></table>
<div id="footer">Это подвал сайта</div>
</body>
</html>

В этом коде всё просто, поясню лишь основные моменты. В строке 10 создаём шапку сайта. Затем идёт таблица из двух колонок. В первой колонке находится главное меню. Пока в нём есть только ссылка на главную страницу. Вторая колонка для статьи. Она будет вставляться из базы данных. Затем следует подвал сайта.

Стиль будет содержаться в отдельном файле. Он уже подключён в 6 строке. Вот код файла:

style.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

td {
  vertical-align: top;
  }
#header {
  font: 30px Arial, sans-serif;
  margin-left: 50px;
  height: 80px;
  width: 60%;
  background-color: #29B6CE;
  }
#menubar {
  background-color: #CCC;
  }
#mainmenu {
  width: 300px;
  padding: 10px;
  }
#mainmenu a {
  font: 14px Arial, sans-serif;
  text-decoration: none;
  }
#content {
  min-height: 380px;
  }
#conrent h1 {
  font-size: 22px;
  }
#content p {
  font: 16px Tahoma, sans-serif;
  }
#footer {
  text-align: center;
  font-size: 20px;
  padding: 5px;
  margin-top: 5px;
  background-color: #837DB6;
  height: 100px;
  }

Файлы шаблона

Созданную страницу нужно разделить на блоки и разместить их в файлах шаблона. Они будут находиться в основной папке сайта, но на реальных сайтах для них создаётся специальная папка. Файлы рекомендуется сохранять в формате tpl, потому что это специальный формат для файлов шаблона. Но можно сделать обычные HTML файлы. Особой разницы нет. HTML файлы не рекомендуют использовать только потому, что это формат для страниц, а файлы шаблона - это не страницы.

Для шапки сайта создадим файл header.tpl. В нашем примере она состоит из одной строки, её и поместим в файл.

header.tpl:

1	<div id="header">Это шапка сайта</div>

Таблицу, составляющую основу вёрстки, мы оставим на странице. В ней находится главное меню и контент сайта. Их мы будем выводить при помощи PHP скриптов

Создадим файл footer.tpl для подвала сайта.

footer.tpl:

1	<div id="footer">Это подвал сайта</div>

Пока блоки, из которых состоит шаблон, пустые. Но Вы в любой момент можете заполнить их нужными элементами. Также Вы можете добавить в шаблон другие блоки.

Присоединение блоков

Созданные блоки нужно подключить к странице. Так как эти блоки будут всегда одинаковые, мы присоединим их самым простым способом - с помощью подключаемых файлов. Позднее мы рассмотрим более сложный способ. Подключать файлы шаблона будем с использованием конструкции require. Добавим её в те места сраницы, где должен быть код блоков. Страница будет выглядеть следующим образом:

page.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php header('Content-type: text/html; charset=utf-8'); ?>
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php require "header.tpl"; ?>
<table>
  <tr>
    <td id="menubar">
      <div id="mainmenu">
      <div><a href="page.php">Главная</a></div>
      </div>
    </td>
    <td>
      <div id="content"></div>
</td></tr></table>
<?php require "footer.tpl"; ?>
</body>
</html>

Если Вы всё сделали правильно, то страница должна отображаться точно так же, как до разделения на блоки. Вы можете создавать новые страницы и подключать к ним эти блоки.

Содержание сайта

Контент будет содержаться в базе данных. Я использую базу данных mybase, которая создавалать при рассмотрении предыдущих тем учебника. Если у Вас нет базы данных, то нужно её создать. В ней создадим таблицу для статей, назовём её art. В таблице должны быть такие поля:

id - номер статьи

name - название статьи

text - текст статьи

menu - текст для пункта меню

Добавьте в созданную таблицу несколько статей. Задайте им любые названия и напишите какой-нибудь текст. Чтобы отделять абзацы статей, тэги <p> могут находиться прямо в базе данных вместе с текстом. В ней могут быть и другие теги, например ссылки и картинки.

Если Вы создаёте отдельные страницы для разделов сайта, то можно для них сделать записи в таблице как для обычных статей.

Вывод меню на страницу

Чтобы пользователь мог увидеть статьи, в главном меню должны быть ссылки на них. Все ссылки будут вести на одну страницу и в них будет GET-запрос, содержащий номер статьи. Например ссылка на первую статью должна быть такой:

14	<a href="page.php?a=1">Статья 1</a>

Чтобы вывести ссылки на все статьи сайта, добавим PHP скрипт в блок с главным меню. Этот скрипт будет получать id статей и тексты ссылок из базы данных. Используя эти данные скрипт будет формировать ссылки. Блок главного меню должен выглядеть так:

14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div id="mainmenu">
<div><a href="page.php">Главная</a></div>
<?php
$db=mysqli_connect('localhost', 'root', '', 'mybase');
$query="SELECT id, menu FROM art";
$result=mysqli_query($db, $query);
for ($i=0; $i<mysqli_num_rows($result); $i++)
  {
  $row=mysqli_fetch_assoc($result);
  echo "<div><a href='page.php?a=".$row['id']."'>".
  $row['menu']."</a></div>";
  }
?>
</div>

Вывод контента

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

30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<div id="content">
<?php
$art=$_GET['a'];
if (!isset($art))
echo '<p>Главная страница</p>';
else
  {
  $query="SELECT name, text FROM art WHERE id = $art";
  $result=mysqli_query($db, $query);
  $row=mysqli_fetch_assoc($result);
  echo '<h1>'.$row['name'].'</h1>';
  echo $row['text'];
  }
?>
</div>

Поясню, как работает этот скрипт. Номер статьи берётся из массива $_GET и записывается в переменную $art. Если номера статьи нет, значит это главная страница, и выводится текст, который должен располагаться на ней. Если номер статьи есть, то из БД берётся статья с этим номером и выводится на страницу. В этом скрипте нет подключения к MySQL, потому что это было сделано ранее. Название статьи помещается в тэг <h1>. К тексту никакие тэги не добавляются, потому что текст содержится в базе данных уже с тэгами.

Чтобы сайт был сделан более грамотно, рекомендуется разделять HTML и PHP код. Рассмотренный скрипт можно поместить в файл и подключить к странице.