Этот урок связан с проектом Строим свою CMS на PHP и MySQL

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

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

soursedemo

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

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title><?php echo htmlspecialchars( $results['pageTitle'] )?></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 (мы создадим ее чуть позже).

Клиентская часть собственной CMS

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

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

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

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

 

homepage.php

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

<?php include "templates/include/header.php" ?>
 
      <ul id="headlines">
 
<?php foreach ( $results['articles'] as $article ) { ?>
 
        <li>
          <h2>
            <span class="pubDate"><?php echo date('j F', $article->publicationDate)?></span><a href=".?action=viewArticle&amp;articleId=<?php echo $article->id?>"><?php echo htmlspecialchars( $article->title )?></a>
          </h2>
          <p class="summary"><?php echo htmlspecialchars( $article->summary )?></p>
        </li>
 
<?php } ?>
 
      </ul>
 
      <p><a href="./?action=archive">Article Archive</a></p>
 
<?php include "templates/include/footer.php" ?>

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

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

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

archive.php

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

<?php include "templates/include/header.php" ?>
 
      <h1>Article Archive</h1>
 
      <ul id="headlines" class="archive">
 
<?php foreach ( $results['articles'] as $article ) { ?>
 
        <li>
          <h2>
            <span class="pubDate"><?php echo date('j F Y', $article->publicationDate)?></span><a href=".?action=viewArticle&amp;articleId=<?php echo $article->id?>"><?php echo htmlspecialchars( $article->title )?></a>
          </h2>
          <p class="summary"><?php echo htmlspecialchars( $article->summary )?></p>
        </li>
 
<?php } ?>
 
      </ul>
 
      <p><?php echo $results['totalRows']?> article<?php echo ( $results['totalRows'] != 1 ) ? 's' : '' ?> in total.</p>
 
      <p><a href="./">Return to Homepage</a></p>
 
<?php include "templates/include/footer.php" ?>

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

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

 

viewArticle.php

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

<?php include "templates/include/header.php" ?>
 
      <h1 style="width: 75%;"><?php echo htmlspecialchars( $results['article']->title )?></h1>
      <div style="width: 75%; font-style: italic;"><?php echo htmlspecialchars( $results['article']->summary )?></div>
      <div style="width: 75%;"><?php echo $results['article']->content?></div>
      <p class="pubDate">Published on <?php echo date('j F Y', $results['article']->publicationDate)?></p>
 
      <p><a href="./">Return to Homepage</a></p>
 
<?php include "templates/include/footer.php" ?>

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

 

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/cms-in-an-afternoon-php-mysql/#step9
Перевел: Сергей Фастунов
Урок создан: 4 Декабря 2012
Просмотров: 46663
Правила перепечатки

5 последних уроков рубрики "PHP"

  • Фильтрация данных с помощью zend-filter

    Когда речь идёт о безопасности веб-сайта, то фраза "фильтруйте всё, экранируйте всё" всегда будет актуальна. Сегодня поговорим о фильтрации данных.

  • Контекстное экранирование с помощью zend-escaper

    Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

  • Подключение Zend модулей к Expressive

    Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

  • Совет: отправка информации в Google Analytics через API

    Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

  • Подборка PHP песочниц

    Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 4 Декабря 2012 18:25
    staffguy
    ne rabotet zaraza vidayot ashibku katoruu prapisali v index.php Sorry, a problem occurred. Please try later.
  • 4 Декабря 2012 19:38
    paxan48
    5 часть будет
  • 5 Декабря 2012 12:42
    Skayler
    Доброго времени суток!При добавлении новой статьи не понимает нормального русского языка!Подскажите как исправить ошибку?Спасибо
    • 5 Декабря 2012 12:53
      kirill.burhanov1
      Кодировку поменяй, и в базе, и в файле, и в html заголовке на UTF-8
      • 5 Декабря 2012 13:42
        Skayler
        Все поменяно!Но так ниче и не выходит пытался подключить вот это :mysql_query('SET NAMES utf8'); но результата никакого(
  • 5 Декабря 2012 17:19
    Septor
    Объясните мне "тупому" дизайнеру-верстальщику, ну на кой хрен делать такой геморрой с шаблоном как и в wordpress? На кой хрен все эти разбивки шаблона на десятки кусков, которые потом же инклюдятся все вместе? Не лучше ли бы было сделать один индексный файл со всей общей вёрсткой, и если уже так надо, то инклюдить отдельно пару-другую блоков вёрстки типа архив, статья или список статей. Общий стиль то шаблона везде одинаковый, меняется лишь вёрстка отдельных конкретных элементов, которые и можно вынести отдельно, и ещё лучше в отдельную папку, для таких блоков. Эта вордовская вёрстка, ночной кошмар для верстальщика. ИМХО!
    • 4 Января 2015 16:01
      kobyakovdima
      Если вам надо изменить шапку сайта, то вам придется её менять в каждом файле шаблона. А таким методом только в одном файле и изменения будут везде внесены.
  • 7 Декабря 2012 10:07
    Skayler
    Все нормально!!Разобрался!Всего надо было в Article.php добавить вывод с базы данных информацию в формате UTF-8 .Вод код: $sql='SET NAMES utf8'; $st = $conn->prepare ( $sql ); $st->execute(); unset($st);
  • 30 Декабря 2012 21:35
    s_l_a_v_i_k
    Так как все же корректно работать с русскими символами? кто-нибудь скажет?? уже второй час мучаю все возможные варианты, везде стоит utf8 и нихрена. версия майскл 5.5.28. кодировка сервера utf8 unicode, везде прописано тоже самое и базе и в каждой таблице и каждой строке и в заголовках - везде и все равно русские симовлы ПРОПАДАЮТ, есть тут специалисты или нет решить эту проблему?
  • 3 Января 2013 01:17
    s_l_a_v_i_k
    После двух дней ковыряний таки нашел причину! оказывается русские символы просто заменялись на пробелы!!!! в регулярном выражении, видимо в уроке этот код не досмотрели...(как же так) кроме того, по непонятным причинам, обычным образом запись в регулярном выражении а-яА-я не срабатывала! после буквы п. поэтому пришлось записать все буквы вручную (остальный регулярки для других полей менять аналогично) кодировка везде utf8 так и оставил 
     if ( isset( $data['title'] ) ) $this->title = preg_replace ( "/[^\.\,\-\_\'\"\@\?\!\:\$ а-прстуфхцчшщьъыэюяА-ПРСТУФХЦЧШЩЬЪЫЭЮЯЯa-zA-Z0-9()]/", "", $data['title'] ); if ( isset( $data['summary'] ) ) $this->summary = preg_replace ( "/[^\.\,\-\_\'\"\@\?\!\:\$ a-zA-Z0-9()]/", "", $data['summary'] ); if ( isset( $data['content'] ) ) $this->content = $data['content'];
  • 11 Января 2013 02:20
    pinautis
    Sorry, a problem occurred. Please try later. Подскажите что не так сделал??? БД-cms, table- articles, categories!!!
  • 29 Сентября 2013 21:13
    linkz
    Для тех, у кого проблемы с отображением русского на сайте или в субд (напр. phpmyadmin), помогу разобраться: 1. если вы пилите сайт на локальной машине, и у вас много обращений к базе настройте для простоты конфиг mysql (my.ini), а именно: 
    	default-character-set=utf8	init-connect="SET NAMES utf8" - автоматически исполняется перед запросами	character-set-server=utf8
    и перезапустите сервер 2. если нет, и стоит например cp1251, то нужно после каждого подключения PDO к базе, перед вашими запросами (как на запись insert/update, так и выбор select) добавить запрос: 
    	$sql="SET NAMES utf8";	$st = $conn->prepare ( $sql );	$st->execute();	unset($st);
    3. сделать как сказал s_l_a_v_i_k, а именно заменить в регулярных выражениях 
    а-яА-ЯёЁa-zA-Z0-9
    на 
    а-прстуфхцчшщьъыэюяА-ПРСТУФХЦЧШЩЬЪЫЭЮЯЯa-zA-Z0-9
    странно, но иначе статьи могут даже не добавляться
  • 29 Сентября 2013 21:54
    linkz
    4. Вместо первых двух пунктов - как вариант еще один рабочий способ - добавить 4-ый параметр в подключение PDO: 
    array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8")
  • 7 Января 2016 19:50
    kapu
    пятый вариант, самый грубый: убираем регулярки, т.е сокращаем выражения до такого вида 
     if ( isset( $data['summary'] ) ) $this->summary = $data['summary'] ; if ( isset( $data['content'] ) ) $this->content = $data['content'];
    в базе правим типы полей на mediumtext
^ Наверх ^