PHP MVC
Представление (Вид)
ПРЕДСТАВЛЕНИЕ (ВИД)
Последний этап формирования нашей страницы - это ее визуализация.
На данный момент у нас есть контроллер ( NewsController.php ), в котором уже есть нужные данные для формировании страницы.
Таблица news базы данных test2:
Смысл использования представления на практике состоит в том, чтоб отделить весь HTML-код и положить его в отдельный файл.
Создадим html-файл и назовем его - index.php и положим в папку: views/news/index.php.
Он будет соответствовать для экшена actionIndex() (Список новостей) из NewsController.
Аналогично, в этой папке создадим файл view.php - для экшена actionView($id) (Просмотр одной новости).
В папке tamplate разместим файл стилей - style.css и подключим его в наших файлах:
- <link href="/tamplate/css/style.css" rel="stylesheet" type="text/css">
Файл index.php
-- файл index.php --
<!-- views/news/index.php -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="/tamplate/css/style.css" rel="stylesheet" type="text/css">
<title> Список новостей </title>
</head>
<body>
<!--Обертка-->
<div id="wrap">
<!--Шапка-->
<div class="head">
<h1>НОВОСТИ </h1>
</div>
<!--Контент-->
<div id="content">
<div class="post">
<h2 class="title"><a href="#"> Новость 1 </a></h2>
<p class="byline"> 2019-02-02 </p>
<div class="entry">
<p> Краткое содержание новости 1: CSS-ссылки содержат свойства,..
.Краткое содержание новости 1: CSS-ссылки содержат свойства,...
</p>
</div>
<div class="meta">
<p class="links"><a href="#" class="comments"> Читать дальше </a></p>
</div>
</div>
..............................
........Новость 2.............
........Новость 3.............
........Новость 4.............
..............................
<div class="post">
<h2 class="title"><a href="#"> Новость 5 </a></h2>
<p class="byline"> 2019-02-02 </p>
<div class="entry">
<p> Краткое содержание новости 5: CSS-ссылки содержат свойства,..
.Краткое содержание новости 5: CSS-ссылки содержат свойства,...
</p>
</div>
<div class="meta">
<p class="links"><a href="#" class="comments"> Читать дальше </a></p>
</div>
</div>
</div>
<!-- footer -->
<div id="footer">
</div>
</div>
</body>
</html>Аналогично, в папке views/news/index.php создадим файл view.php - для экшена actionView($id) (Просмотр одной новости).
Файл view.php
-- файл view.php --
<!-- views/news/view.php -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="/tamplate/css/style.css" rel="stylesheet" type="text/css">
<title>Новость 1 </title>
</head>
<body>
<!--Обертка-->
<div id="wrap">
<!--Шапка-->
<div class="head">
<h1>НОВОСТИ</h1>
</div>
<!--Контент-->
<div id="content">
<div class="post-news">
<h2 class="title">Новость 1</h2>
<p class="byline">автор 1 2018-12-25 </p>
<div class="entry">
<p>Содержание новости 1</p>
</div>
<div class="meta">
<p class="links"><a href="#" class="comments">Назад к списку новостей </a></p>
</div>
</div>
</div>
<!-- footer -->
<div id="footer">
</div>
</div>
</body>
</html>В папке tamplate разместим файл стилей - style.css и подключим его в наших файлах:
- <link href="/tamplate/css/style.css" rel="stylesheet" type="text/css">
Файл style.css
-- файл style.php --
/* tamplate/css/style.css */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
/* transition: .5s ease-in-out ; */
}
html, body {
height: 100%;
}
body{
font: 90%/1.5em verdana, arial, helvetica, sans-serif;
color:#000 ;
}
#wrap{
position: relative ;
min-height: 100%;
padding-bottom: 50px; /*отступ величиной с высоту футера*/
}
.head {
margin: 0 auto;
max-width: 100%;
background-image: linear-gradient( white ,#cecece );
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
height: 100px;
text-align: center;
}
h1{
padding: 30px;
color: orange;
}
#content{
margin: 0 auto 0 auto; /*Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.*/
width: 90%;
overflow:auto ;
border: solid 1px red;
}
.post {
float: left;
width: 50%;
margin: 20px 0 20px;
overflow: hidden;
background: #F5F5F5;
text-align: center;
border: solid 5px #fff;
}
.title {
padding-top: 10px;
letter-spacing: -2px;
}
.title a {
border: none;
text-decoration: none;
}
.post-news{
width: 100%;
margin: 20px 0 20px;
background: #F5F5F5;
text-align: center;
: ;
}
.byline{
display: block;
padding: 2px 5px 2px 0px;
background: #F5F5F5;
text-align: center;
text-transform: uppercase;
font-size: 10px;
color: gray;
}
.entry{
text-align: left;
margin-bottom: 25px;
overflow: hidden;
padding: 10px 25px 0px 25px ;
font-size: 0.9rem;
height: 50px;
margin-bottom: 1rem;
}
.links{
display: block;
padding: 2px 0px 2px 25px;
text-align: left;
text-transform: uppercase;
font-size: 10px;
color: #FFFFFF;
}
.post-news .links{
display: block;
padding: 2px 25px 2px 10px;
text-align: right;
text-transform: uppercase;
font-size: 10px;
color: #FFFFFF;
}
.post-news .entry{
text-align: left;
margin-bottom: 25px;
overflow: visible;
height: 100%;
padding: 10px 25px 0px 25px;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.post-news .title{
padding-top: 10px;
letter-spacing: -2px;
color: darkcyan;
}
.post-news .title{
padding-top: 10px;
letter-spacing: -2px;
color: darkcyan;
}
#footer{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-image: linear-gradient( #cecece, white );
}
/* */В файле .htaccess мы написали перенаправления для всех запросов на файл index.php.
Для того, чтобы файл style.css и изображения (images/img...) работали, добавляем еще два правила:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
Файл .htaccess
-- файл .htaccess --
AddDefaultCharset utf-8
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php
Файловая структура сайта test2:
Страница списка новостей
Страница просмотра одной новости
Далее наша задача состоит в том, чтобы получить информацию из элементов массива $newsList (контроллер NewsController.php) и разместить ее на странице news/index.php
Выбираем один шаблон, который соответствует одной новости на странице и в цикле
foreach ($newsList as $newsItem) заменяем статические данные, на данные, полученые
из массива $newsList (распечатываем элементы массива).
Используем, при этом, сокращенный синтаксис:
<?php echo $newsItem['title'] ; ?> - заголовки новостей
/news/<?php echo $newsItem['id'];?> - ссылка на эту новость (по индификатору 'id' и пути '/news')
<?php echo $newsItem['date'];?> - дата добавления новости
<?php echo $newsItem['short_content'];?> - краткое содержание новости
/news/<?php echo $newsItem['id'];?> - еще одна ссылка на новость (по индификатору 'id' и пути '/news')
Файл index.php
-- файл index.php --
<!-- views/news/index.php -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="/tamplate/css/style.css" rel="stylesheet" type="text/css">
<title> Список новостей </title>
</head>
<body>
<!--Обертка-->
<div id="wrap">
<!--Шапка-->
<div class="head">
<h1>НОВОСТИ </h1>
</div>
<!--Контент-->
<div id="content">
<?php foreach ($newsList as $newsItem):?> <!-- цикл foreach -->
<div class="post">
<!-- ссылка на новость (по индификатору 'id') и заголовок новости -->
<h2 class="title">
<a href=
"/news/<?php echo $newsItem['id'];?>"
>
<?php echo $newsItem['title'] ; ?>
</a>
</h2>
<!-- дата добавления новости -->
<p class="byline">
<?php echo
$newsItem['date']; ?> </p>
<!-- краткое содержание новости -->
<div class="entry">
<p>
<?php echo $newsItem['short_content']; ?>
</p>
</div>
<!-- ссылка на новость -->
<div class="meta">
<p class="links">
<a href=
"/news/<?php echo $newsItem['id']; ?>
"
class="comments"> Читать дальше </a>
</p>
</div>
</div>
<?php endforeach; ?> <!-- конец цикла foreach -->
</div>
<!-- footer -->
<div id="footer">
</div>
</div>
</body>
</html>Аналогично получаем информацию из массива $newsItem (одна новость) и распечатываем элементы массива на странице news/view.php. Также заменяем запись в заголовке title.
Файл view.php
-- файл view.php --
<!-- views/news/view.php -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="/tamplate/css/style.css" rel="stylesheet" type="text/css">
<!-- запись в заголовке -->
<title> <?php echo $newsItem['title']; ?> </title>
</head>
<body>
<!--Обертка-->
<div id="wrap">
<!--Шапка-->
<div class="head">
<h1>НОВОСТИ</h1>
</div>
<!--Контент-->
<div id="content">
<div class="post-news">
<!-- заголовок новости -->
<h2 class="title"> <?php
echo $newsItem['title']; ?> </h2>
<!-- автор новости и дата добавления -->
<p class="byline">
<?php echo $newsItem['author_name'];
echo $newsItem['date']; ?> </p>
<!-- полное содержание новости -->
<div class="entry">
<p>
<?php echo $newsItem['content']; ?>
</p>
</div>
<!-- ссылка к списку новостей -->
<div class="meta">
<p class="links"><a href="/news/" class="comments"> Назад к списку новостей </a></p>
</div>
</div>
</div>
<!-- footer -->
<div id="footer">
</div>
</div>
</body>
</html>
Наверх Наверх