Главная страница

Домашняя страница

Давайте создадим домашнюю страницу с недавними записями.


Прежде чем начать, вы должны иметь небольшое представление о шаблоне проектирования Модель-Вид-Презентер(MVP) (аналогично MVC((Модель-Вид-Контроллер))):

  • Модель — слой управления данными. Он полностью отделен от остальной части приложения. Он общается только с презентером.
  • Вид — слой интерфейса. Он предоставляет запрашиваемые данные пользователю с использованием шаблонов.
  • Презентер (или контроллер) — слой соединения. Презентер соединяет Модель и Вид. Обрабатывает запросы, запрашивает данные у Модели, а затем передает их в текущий Вид.

В случае очень простого приложение, как наш блог, Модель будет фактически состоять только из запросов к самой базе данных — нам не нужен дополнительный код для нее.
Нам нужно только создать Презентер и Модель. В Nette, каждый Презентер имеет собственный Вид, поэтому мы будем продолжать с обоими одновременно.

Создание базы данных в Adminer

Для хранения данных мы будем использовать базу данных MySQL, потому что это самый распространенный выбор среди веб-разработчиков. Но если вам не нравится это, не стесняйтесь использовать базу данных по вашему выбору.

Давайте подготовим базу данных, в которой будут храниться записи блога. Начнем очень просто — с одной таблицей для записей.

Для создания базы данных используйте Adminer или любой другой инструмент для управления баз данных.

Откроем Adminer и создадим новую базу данных. И назовем ее quickstart.

Создадим таблицу `posts` и добавим столбцы:
id число(int), выберите автоинкремент (AI)
title символы(varchar), длина 255
content текст(text)
created_at временная метка(timestamp)

Это должно выглядеть так:

CREATE TABLE `posts` (
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`title` varchar(255) NOT NULL,
`content` text NOT NULL,
`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB CHARSET=utf8;
Очень важно использовать табличное хранилище InnoDB. Позже вы поймете почему. Пока, просто выберите это. Нажмите «Сохранить сейчас».

Добавьте несколько записей в блогах для примера, прежде чем мы сможем добавить новые записи непосредственно из нашего приложения.

INSERT INTO `posts` (`id`, `title`, `content`, `created_at`) VALUES
(1, 'Первая запись', 'Рыба рыба рыба один', CURRENT_TIMESTAMP),
(2, 'Вторая запись', 'Рыба рыба рыба два', CURRENT_TIMESTAMP),
(3, 'Третья запись', 'Рыба рыба рыба три', CURRENT_TIMESTAMP);

Подключение к базе данных

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

Во-первых, нам нужно сообщить нашему приложению, какую базу данных использовать. Конфигурация подключения к базе данных находится в файле app/config/config.local.neon. Установите DSN((Data Source Name)) схему подключения и ваши учетные данные. Должно выглядеть так:

database:
    dsn: 'mysql:host=127.0.0.1;dbname=quickstart'
    user: root
    password: *укажите пароль здесь*
Будьте в курсе отступов при редактировании этого файла. Формат NEON понимает как пробелы, так и табы, но не вместе! В файле конфигурации данного проекта используются табы по умолчанию.
Вся конфигурация хранится в каталоге app/confing/ в файлах confing.neon и config.local.neon.
Файл config.neon содержит глобальные настройки приложения, а файл config.local.neon содержит только параметры, специфичные для окружения (разные для рабочего и разработки).

Внедрение соединения с базой данных

Презентеру (находящийся в app/presenters/HomepagePresenter.php) для списка статей, необходимо подключение к базе данных. Для этого напишем конструктор, подобный этому:

<?php

namespace App\Presenters;

use Nette;


class HomepagePresenter extends Nette\Application\UI\Presenter
{
	/** @var Nette\Database\Context */
	private $database;

	public function __construct(Nette\Database\Context $database)
	{
		$this->database = $database;
	}

	// ...

}

Теперь у Презентера есть метод renderDefault() который передает данные в Вид под названием default. Шаблоны Презентеров можно найти по пути app/presenters/templates/{PresenterName}/{viewName}.latte, в нашем случае шаблон будет находится в app/presenters/templates/Homepage/default.latte. В шаблоне теперь доступна переменная с именем $posts, которая содержит записи, которые мы получили из базы данных.

Шаблон

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

По умолчанию общий файл шаблона находится по пути app/presenters/templates/@layout.latte, и содержит:

...
{include content}
...

{include content} вставляет в основной шаблон блок content. Вы можете определить его в любом шаблоне Вида. В нашем случае вы будете редактировать файл app/presenters/templates/Hompeage/default.latte вот так:

{block content}

Он определяет блок content, который будет использовать в шаблоне. Если обновить страницу в браузере, вы увидете страницу «Hello word» (так же шапку и подвал определенные в @layout.latte).

Покажем записи блога — измените шаблон:

{block content}
    <h1 n:block="title">Мой блог</h1>

    {foreach $posts as $post}
    <div class="post">
        <div class="date">{$post->created_at|date:'F j, Y'}</div>

        <h2>{$post->title}</h2>

        <div>{$post->content}</div>
    </div>
    {/foreach}
{/block}

 

После обновления страницы в браузере вы увидите записи блога. Список выглядит не очень, попробуйте добавить крутой CSS в www/css/style.css.

Макрос {foreach} выполняет итерацию по всем записям которые мы передали в $posts, и повторяет HTML код для каждого сообщения. Это работает так же как в PHP.

Строка |date: называется фильтром. Фильтры позволяют форматировать вывод. Она приобразует вывод временной метки (например 2013-04-12) в удобный и читаемый формат (April 12, 2013). Вы можете использовать предопределенные «Фильтры»:latte:filters или определить необходимые вам.

И еще. Можно сделать код проще и короче. Замените макрос Latte на n:атрибут как здесь:

<div n:foreach="$posts as $post" class="post">
    <div class="date">{$post->created_at|date:'F j, Y'}</div>

    <h2>{$post->title}</h2>

    <div>{$post->content}</div>
</div> 

n:foreach просто обертывает div в блок foreach (получается тоже самое, что и в предыдущем примере).

Итог

У нас очень простая база данных MySQL с некоторыми записями для блога. Приложение подключается к базе данных и отображает простой список записей.

Яндекс.Метрика