Строим свою CMS на PHP и MySQL. Часть 4

В предыдущих уроках серии мы сделали базу данных и логику приложения для нашей CMS. Теперь разберемся с визуальным представлением. Создадим шаблоны для клиентской части. 

1. Клиентская часть


Файлы включения

Создаем папку с именем templates в папке cms нашего проекта. Затем создаем папку с именем include в папке templates. В последней папке мы поместим разметку для заголовка и нижнего колонтитула, которые будут одинаковы для всех страниц сайта. Поэтому их можно включать в каждый шаблон нашего проекта.

Создаем файл с именем header.php в папке include и копируем в него следующий код:

Code
<!DOCTYPE html>
<html lang="en">
  <head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
  <div id="container">
   
  <a href="."><img id="logo" src="images/logo.jpg" alt="Widget News" /></a>


Данный код просто выводит разметку начала страницы HTML. Здесь используется переменная $results['pageTitle'], передаваемая из основного скрипта (index.php или admin.php), для установки элемента title, а также присоединяется таблица стилей style.css (мы создадим ее чуть позже).

Обратите внимание, что значение переменной $results['pageTitle'] передается через функцию htmlspecialchars(). Данная функция кодирует любые специальные символы HTML (такие как <, > или &) в эквиваленты (<, > и & соответственно). Вместе с фильтрацией ввода, которую мы разбиради в предыдущих уроках серии при создании конструктора класса Article кодирование вывода является хорошей привычкой для повышения безопасности сайта. Мы будем кодировать практически все данные в нашем шаблоне подобным образом.

Теперь создаем файл с именем footer.php в той же папке:

Code
<div id="footer">
  Widget News © 2011. All rights reserved. <a href="admin.php">Site Admin</a>
  </div>
   
  </div>
  </body>
</html>


Данная разметка завершает каждую HTML страницу в нашей системе.

homepage.php

Вернемся в папку templates и создадим в ней файл homepage.php, в который копируем следующий код:

Code

   
  <ul id="headlines">
   

   
  <li>
  <h2>
  <span class="pubDate">publicationDate)?></span><a href=".?action=viewArticle&articleId=id?>">title )?></a>
  </h2>
  <p class="summary">summary )?></p>
  </li>
   

   
  </ul>
   
  <p><a href="./?action=archive">Article Archive</a></p>
   


Данный шаблон выводит заголовки статей на главной странице в виде неупорядоченного списка. Скрипт проходит циклом по массиву объектов Article, который хранится в $results['articles'], и выводит для каждой статьи дату публикации, название и резюме. Название ссылается на '.' (index.php), передавая параметр action=viewArticle вместе с ID статьи в URL. Таким образом, пользователь может прочитать статью, нажав на ссылку названия.

Также шаблон включает ссылку на архив статей ("./?action=archive").

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

archive.php

Теперь создаем файл archive.php в каталоге templates и помещаем в него код:

Code

   
  <h1>Article Archive</h1>
   
  <ul id="headlines" class="archive">
   

   
  <li>
  <h2>
  <span class="pubDate">publicationDate)?></span><a href=".?action=viewArticle&articleId=id?>">title )?></a>
  </h2>
  <p class="summary">summary )?></p>
  </li>
   

   
  </ul>
   
  <p> article in total.</p>
   
  <p><a href="./">Return to Homepage</a></p>
   


Данный шаблон выводит архив всех статей, которые имеются в нашей CMS. Код практически идентичен homepage.php. Здесь добавляется класс CSS archive для неупорядоченного списка, чтобы мы могли формировать пункты списка отличными от главной страницы. Также добавляем год в дату публикации, так как архив может содержать данные за несколько лет.

На странице также выводится общее число статей в базе данных, которое мы получаем с помощью $results['totalRows']. А вместо ссылки на архив выводится ссылка на главную страницу "Return to Homepage".



viewArticle.php

Последний шаблон для клиентской части выводится статью для пользователя. Создаем файл с именем viewArticle.php в папке templates folder и копируем в него следующий код:

Code

   
  <h1 style="width: 75%;">title )?></h1>
  <div style="width: 75%; font-style: italic;">summary )?></div>
  <div style="width: 75%;">content?></div>
  <p class="pubDate">Published on publicationDate)?></p>
   
  <p><a href="./">Return to Homepage</a></p>
   


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



Шаблон для клиентской части готов. В следующем уроке мы сделаем шаблон для серверной части нашей CMS.

  • FalleN

  • 4018

  • 1

  • 0
Теги: cms, MySQL, php

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!