Строим свою CMS на PHP и MySQL. Часть 4
В предыдущих уроках серии мы сделали базу данных и логику приложения для нашей CMS. Теперь разберемся с визуальным представлением. Создадим шаблоны для клиентской части.
Файлы включения
Создаем папку с именем 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
(мы создадим ее чуть позже).
Обратите внимание, что значение переменной $results['pageTitle']
передается через функцию htmlspecialchars()
. Данная функция кодирует любые специальные символы HTML (такие как <
, >
или &
) в эквиваленты (<
, >
и &
соответственно). Вместе с фильтрацией ввода, которую мы разбиради в предыдущих уроках серии при создании конструктора класса Article
кодирование вывода является хорошей привычкой для повышения безопасности сайта. Мы будем кодировать практически все данные в нашем шаблоне подобным образом.
Теперь создаем файл с именем footer.php
в той же папке:
<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
, в который копируем следующий код:
<?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&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&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.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/t76yOkrDrZQ/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Мудрость приносит следующие три плода: дар хорошо мыслить, хорошо говорить и хорошо поступать Демокрит - (около 460 до н.э.- около 360 до н.э.) - древнегреческий философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.