для вывода значения $results['pageHeading'], а не простой надписи "Article Archive" (архив статей). Новая функция archive() динамически формирует заголовок в зависимости от просматриваемой категории.

Затем мы добавляем код для проверки того, что нужно выводить список для определенной категории, а не всех статей в базе данных. Для этого просматриваем переменную $results['category']. Если она имеется, то нужно выводить список для категории, и код формирует в заголовке описание категории.

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

viewArticle.php

Шаблон viewArticle.php выводит страницу статьи. Новый код файла cms/templates/viewArticle.php:

Код

<?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)?>
<?php if ( $results['category'] ) { ?>
  in <a href="./?action=archive&categoryId=<?php echo $results['category']->id?>"><?php echo htmlspecialchars( $results['category']->name ) ?></a>
<?php } ?>
  </p>
   
  <p><a href="./">Return to Homepage</a></p>
   
<?php include "templates/include/footer.php" ?>

Здесь вносится небольшое добавление для вывода названия категории внизу. Название категории является ссылкой на соответствующую страницу архива.

Стили клиентской части

Также нужно внести изменения в таблицу стилей style.css для формирования внешнего вида имен категорий и описаний на главной странице и в архиве.

Новый код файла style.css из папки cms:

Код

/* Style the body and outer container */
   
body {
  margin: 0;
  color: #333;
  background-color: #00a0b0;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}
   
#container {
  width: 960px;
  background: #fff;
  margin: 20px auto;
  padding: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
   
   
/* The logo and footer */
   
#logo {
  display: block;
  width: 300px;
  padding: 0 660px 20px 0;
  border: none;
  border-bottom: 1px solid #00a0b0;
  margin-bottom: 40px;
}
   
#footer {
  border-top: 1px solid #00a0b0;
  margin-top: 40px;
  padding: 20px 0 0 0;
  font-size: .8em;
}
   
   
/* Headings */
   
h1 {
  color: #eb6841;
  margin-bottom: 30px;
  line-height: 1.2em;
}
   
h2, h2 a {
  color: #edc951;
}
   
h2 a {
  text-decoration: none;
}
   
h3.categoryDescription {
  margin-top: -20px;
  margin-bottom: 40px;
}
   
   
/* Article headlines */
   
#headlines {
  list-style: none;
  padding-left: 0;
  width: 75%;
}
   
#headlines li {
  margin-bottom: 2em;
  clear: both;
}
   
.pubDate {
  font-size: .8em;
  color: #eb6841;
  text-transform: uppercase;
}
   
#headlines .pubDate {
  display: block;
  width: 100px;
  padding-top: 4px;
  float: left;
  font-size: .5em;
  vertical-align: middle;
}
   
#headlines.archive .pubDate {
  width: 130px;
}
   
.summary {
  padding-left: 100px;
}
   
#headlines.archive .summary {
  padding-left: 130px;
}
   
.category {
  font-style: italic;
  font-weight: normal;
  font-size: 60%;
  color: #999;
  display: block;
  line-height: 2em;
}
   
.category a {
  color: #999;
  text-decoration: underline;
}
   
   
/* "You are logged in..." header on admin pages */
   
#adminHeader {
  width: 940px;
  padding: 0 10px;
  border-bottom: 1px solid #00a0b0;
  margin: -30px 0 40px 0;
  font-size: 0.8em;
}
   
   
/* Style the form with a coloured background, along with curved corners and a drop shadow */
   
form {
  margin: 20px auto;
  padding: 40px 20px;
  overflow: auto;
  background: #fff4cf;
  border: 1px solid #666;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;  
  border-radius: 5px;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
   
   
/* Give form elements consistent margin, padding and line height */
   
form ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
   
form ul li {
  margin: .9em 0 0 0;
  padding: 0;
}
   
form * {
  line-height: 1em;
}
   
   
/* The field labels */
   
label {
  display: block;
  float: left;
  clear: left;
  text-align: right;
  width: 15%;
  padding: .4em 0 0 0;
  margin: .15em .5em 0 0;
}
   
   
/* The fields */
   
input, select, textarea {
  display: block;
  margin: 0;
  padding: .4em;
  width: 80%;
}
   
input, textarea, .date {
  border: 2px solid #666;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;  
  border-radius: 5px;
  background: #fff;
}
   
input {
  font-size: .9em;
}
   
select {
  padding: 0;
  margin-bottom: 2.5em;
  position: relative;
  top: .7em;
}
   
textarea {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: .9em;
  height: 5em;
  line-height: 1.5em;
}
   
textarea#content {
  font-family: "Courier New", courier, fixed;
}
   
   
/* Place a border around focused fields */
   
form *:focus {
  border: 2px solid #7c412b;
  outline: none;
}
   
   
/* Display correctly filled-in fields with a green background */
   
input:valid, textarea:valid {
  background: #efe;
}
   
   
/* Submit buttons */
   
.buttons {
  text-align: center;
  margin: 40px 0 0 0;
}
   
input[type="submit"] {
  display: inline;
  margin: 0 20px;
  width: 12em;
  padding: 10px;
  border: 2px solid #7c412b;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;  
  border-radius: 5px;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  color: #fff;
  background: #ef7d50;
  font-weight: bold;
  -webkit-appearance: none;
}
   
input[type="submit"]:hover, input[type="submit"]:active {
  cursor: pointer;
  background: #fff;
  color: #ef7d50;
}
   
input[type="submit"]:active {
  background: #eee;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
}
   
   
/* Tables */
   
table {
  width: 100%;
  border-collapse: collapse;
}
   
tr, th, td {
  padding: 10px;
  margin: 0;
  text-align: left;
}
   
table, th {
  border: 1px solid #00a0b0;
}
   
th {
  border-left: none;
  border-right: none;
  background: #ef7d50;
  color: #fff;
  cursor: default;
}
   
tr:nth-child(odd) {
  background: #fff4cf;
}
   
tr:nth-child(even) {
  background: #fff;
}
   
tr:hover {
  background: #ddd;
  cursor: pointer;
}
   
   
/* Status and error boxes */
   
.statusMessage, .errorMessage {
  font-size: .8em;
  padding: .5em;
  margin: 2em 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
   
.statusMessage {
  background-color: #2b2;
  border: 1px solid #080;
  color: #fff;
}
   
.errorMessage {
  background-color: #f22;
  border: 1px solid #800;
  color: #fff;
}

Добавляем селектор h3.categoryDescription для описания категории, идентификатор #headlines для имени категории и класс .category для вывода названия категории на главной странице и в архиве.

Серверная часть

---

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

Добавляем шаблон listCategories.php

Создаем шаблон listCategories.php, который выводит список категорий в базе данных. Он очень похож на listArticles.php (шаблон списка статей).

Код файла listCategories.php в папке cms/templates/admin:

Код

<?php include "templates/include/header.php" ?>
<?php include "templates/admin/include/header.php" ?>
   
  <h1>Article Categories</h1>
   
<?php if ( isset( $results['errorMessage'] ) ) { ?>
  <div class="errorMessage"><?php echo $results['errorMessage'] ?></div>
<?php } ?>
   
   
<?php if ( isset( $results['statusMessage'] ) ) { ?>
  <div class="statusMessage"><?php echo $results['statusMessage'] ?></div>
<?php } ?>
   
  <table>
  <tr>
  <th>Category</th>
  </tr>
   
<?php foreach ( $results['categories'] as $category ) { ?>
   
  <tr onclick="location='admin.php?action=editCategory&categoryId=<?php echo $category->id?>'">
  <td>
  <?php echo $category->name?>
  </td>
  </tr>
   
<?php } ?>
   
  </table>
   
  <p><?php echo $results['totalRows']?> categor<?php echo ( $results['totalRows'] != 1 ) ? 'ies' : 'y' ?> in total.</p>
   
  <p><a href="admin.php?action=newCategory">Add a New Category</a></p>
   
<?php include "templates/include/footer.php" ?>

Данный шаблон достаточно простой. Он включает стандартный заголовок страницы и файл заголовка администратора, где выводится также сообщения о статусе и ошибках. Затем выводится таблица категорий в базе данных. Цикл проходит по всем категориям в массиве $results['categories'] и формирует строку таблицы с именем категории. Строка таблицы ссылается на admin.php?action=editCategory, передавая ID категории, так что администратор может редактировать категорию, нажав на строку таблицы.

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

Добавляем editCategory.php

Шаблон editCategory.php выводит форму редактирования, позволяя администратору добавлять категорию или редактировать существующую. Он очень похож на editArticle.php, но немного проще.

Код файла editCategory.php в папке cms/templates/admin:

Код

<?php include "templates/include/header.php" ?>
<?php include "templates/admin/include/header.php" ?>
   
  <h1><?php echo $results['pageTitle']?></h1>
   
  <form action="admin.php?action=<?php echo $results['formAction']?>" method="post">
  <input type="hidden" name="categoryId" value="<?php echo $results['category']->id ?>"/>
   
<?php if ( isset( $results['errorMessage'] ) ) { ?>
  <div class="errorMessage"><?php echo $results['errorMessage'] ?></div>
<?php } ?>
   
  <ul>
   
  <li>
  <label for="name">Category Name</label>
  <input type="text" name="name" id="name" placeholder="Name of the category" required autofocus maxlength="255" value="<?php echo htmlspecialchars( $results['category']->name )?>" />
  </li>
   
  <li>
  <label for="description">Description</label>
  <textarea name="description" id="description" placeholder="Brief description of the category" required maxlength="1000" style="height: 5em;"><?php echo htmlspecialchars( $results['category']->description )?></textarea>
  </li>
   
  </ul>
   
  <div class="buttons">
  <input type="submit" name="saveChanges" value="Save Changes" />
  <input type="submit" formnovalidate name="cancel" value="Cancel" />
  </div>
   
  </form>
   
<?php if ( $results['category']->id ) { ?>
  <p><a href="admin.php?action=deleteCategory&categoryId=<?php echo $results['category']->id ?>" onclick="return confirm('Delete This Category?')">Delete This Category</a></p>
<?php } ?>
   
<?php include "templates/include/footer.php" ?>

В шаблон включаются файлы заголовков, затем выводится содержание $results['pageTitle'], которое имеет значения либо "New Article Category"(новая категория статьи), либо "Edit Article Category"(редактирование категории статьи). И создается форма, которая отправляется в admin.php со значением переменной $results['formAction'] ("newCategory" или "editCategory") в параметре action.

Сама форма включает скрытое поле categoryId для отслеживания ID текущей редактируемой статьи (если она есть). Выводятся сообщения об ошибках, поля для названия категории и описания, а также кнопки для сохранения и отмены изменений.

Шаблон также включает ссылку на удаление текущей редактируемой категории и нижний колонтитул страницы.

Изменяем listArticles.php

Нужно изменить шаблон для списка статей, чтобы реализовать новый функционал. Сохраняем новый код файла cms/templates/admin/listArticles.php:

Код

<?php include "templates/include/header.php" ?>
<?php include "templates/admin/include/header.php" ?>
   
  <h1>All Articles</h1>
   
<?php if ( isset( $results['errorMessage'] ) ) { ?>
  <div class="errorMessage"><?php echo $results['errorMessage'] ?></div>
<?php } ?>
   
   
<?php if ( isset( $results['statusMessage'] ) ) { ?>
  <div class="statusMessage"><?php echo $results['statusMessage'] ?></div>
<?php } ?>
   
  <table>
  <tr>
  <th>Publication Date</th>
  <th>Article</th>
  <th>Category</th>
  </tr>
   
<?php foreach ( $results['articles'] as $article ) { ?>
   
  <tr onclick="location='admin.php?action=editArticle&articleId=<?php echo $article->id?>'">
  <td><?php echo date('j M Y', $article->publicationDate)?></td>
  <td>
  <?php echo $article->title?>
  </td>
  <td>
  <?php echo $results['categories'][$article->categoryId]->name?>
  </td>
  </tr>
   
<?php } ?>
   
  </table>
   
  <p><?php echo $results['totalRows']?> article<?php echo ( $results['totalRows'] != 1 ) ? 's' : '' ?> in total.</p>
   
  <p><a href="admin.php?action=newArticle">Add a New Article</a></p>
   
<?php include "templates/include/footer.php" ?>

Мы добавили новый столбец для категорий в списке статей. В цикле формирования строк происходит поиск соответствующего объекта Category по ID в массиве $results['categories'] и выводится название категории.

Редактируем editArticle.php

Также нужно модифицировать форму редактирования статьи editArticle.php для добавления возможности назначать категорию статье.

Новый код файла cms/templates/admin/editArticle.php:

Код

<?php include "templates/include/header.php" ?>
<?php include "templates/admin/include/header.php" ?>
   
  <h1><?php echo $results['pageTitle']?></h1>
   
  <form action="admin.php?action=<?php echo $results['formAction']?>" method="post">
  <input type="hidden" name="articleId" value="<?php echo $results['article']->id ?>"/>
   
<?php if ( isset( $results['errorMessage'] ) ) { ?>
  <div class="errorMessage"><?php echo $results['errorMessage'] ?></div>
<?php } ?>
   
  <ul>
   
  <li>
  <label for="title">Article Title</label>
  <input type="text" name="title" id="title" placeholder="Name of the article" required autofocus maxlength="255" value="<?php echo htmlspecialchars( $results['article']->title )?>" />
  </li>
   
  <li>
  <label for="summary">Article Summary</label>
  <textarea name="summary" id="summary" placeholder="Brief description of the article" required maxlength="1000" style="height: 5em;"><?php echo htmlspecialchars( $results['article']->summary )?></textarea>
  </li>
   
  <li>
  <label for="content">Article Content</label>
  <textarea name="content" id="content" placeholder="The HTML content of the article" required maxlength="100000" style="height: 30em;"><?php echo htmlspecialchars( $results['article']->content )?></textarea>
  </li>
   
  <li>
  <label for="categoryId">Article Category</label>
  <select name="categoryId">
  <option value="0"<?php echo !$results['article']->categoryId ? " selected" : ""?>>(none)</option>
  <?php foreach ( $results['categories'] as $category ) { ?>
  <option value="<?php echo $category->id?>"<?php echo ( $category->id == $results['article']->categoryId ) ? " selected" : ""?>><?php echo htmlspecialchars( $category->name )?></option>
  <?php } ?>
  </select>
  </li>
   
  <li>
  <label for="publicationDate">Publication Date</label>
  <input type="date" name="publicationDate" id="publicationDate" placeholder="YYYY-MM-DD" required maxlength="10" value="<?php echo $results['article']->publicationDate ? date( "Y-m-d", $results['article']->publicationDate ) : "" ?>" />
  </li>
   
   
  </ul>
   
  <div class="buttons">
  <input type="submit" name="saveChanges" value="Save Changes" />
  <input type="submit" formnovalidate name="cancel" value="Cancel" />
  </div>
   
  </form>
   
<?php if ( $results['article']->id ) { ?>
  <p><a href="admin.php?action=deleteArticle&articleId=<?php echo $results['article']->id ?>" onclick="return confirm('Delete This Article?')">Delete This Article</a></p>
<?php } ?>
   
<?php include "templates/include/footer.php" ?>

Добавляем поле Article Category (категория статьи) к форме. Оно представляет меню select, которое содержит список всех категорий в базе данных, получаемый из массива $results['categories']. Каждый элемент option хранит ID категории в атрибуте value и выводит название категории. Если происходит редактирование существующей статьи, то код выполняет проверку соответствия текущего ID категории статьи и ID выбранной категории. Если они совпадают, то добавляется атрибут selected для предварительного выбора опции в списке.

Элемент select также включает опцию "(none)"(нет категории) вверху списка с нулевым значением. Таким образом, администратор может создавать статьи, которые не включены ни в какую категорию.

Редактируем заголовок страниц серверной части

Также нам нужно изменить заголовок, который выводится на страницах серверной части. Пока он включает небольшое меню ( Edit Articles (редактировать статьи) и Log Out(выход)). Нам нужно добавить пункт Edit Categories (редактировать категории), чтобы дать возможность администратору просматривать, редактировать, добавлять и удалять категории.

В базовом варианте заголовок был встроен в каждый шаблон серверной части (listArticles.php и editArticle.php). Вынесем код заголовка в отдельный файл header.php. Теперь изменения нужно будет вносить в одно место.

Шаблоны listArticles.php и editArticle.php уже изменены для включения файла заголовка, а новые файлы listCategories.php и editCategories.php сразу содержат правильный код.

Итак, создаем папку include в каталоге cms/templates/admin и сохраняем следующий код в файле header.php, который размещается в новой папке:

Код

<div id="adminHeader">
  <h2>Widget News Admin</h2>
  <p>You are logged in as <b><?php echo htmlspecialchars( $_SESSION['username']) ?></b>. <a href="admin.php?action=listArticles">Edit Articles</a> <a href="admin.php?action=listCategories">Edit Categories</a> <a href="admin.php?action=logout"?>Log Out</a></p>
</div>

Код представляет разметку, которая ранее была встроена в шаблоны listArticles.php и editArticle.php с добавлением новой опции "Edit Categories", которая ссылается на admin.php?action=listCategories.

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