Уроки Yii2. Как создать страницу и что такое View и Controller

4 years ago | 18.7K

 

Всех приветствую, с вами Сергей Никонов. В моем новом уроке Yii2 я расскажу как создать страницу, а также вы узнаете что такое паттерн MVC, что такое контроллер (controller), что такое вид (view), что такое layouts в фреймворке Yii2 и многое другое. Эти уроки входят в курс Yii2

Смотрите видео как создать страницу используя Yii2 фреймворк

Часть 1

 

Часть 2

 

Что такое MVC

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

MVC расшифровывается как Model (модель) - View (вид) - Controller (контроллер). Model отвечает за связь и работой с данными, например модель User может извлекать информацию из базы данных, обновлять информацию в базе данных и так далее.

В этом уроке мы не будем работать с Model, а рассмотрим Controller и View. Controller является связующим звеном между Model и View и обрабатывает эти взаимодействия, а также входные данные. View, если говорить простыми словами, это визуальная часть вашего веб-приложения, которую видит пользователь сайта, иными словами - это файлы с html-версткой, которые подключаются в методы контроллеров.  

 

Что такое Controller (контроллер)

Контроллеры можно представить как интерфейсы между Models и Views. Для того, чтобы понять что такое контроллер, достаточно взглянуть на URL вашего локального сайта Yii2:

http://frontend.test/index.php?r=site%2Fabout

site - это название контроллера, а about - это метод в контроллере, который в Yii2 называется как Action.

Пример action страницы Yii2 about в контроллере SiteController:

 public function actionAbout()
 {
    return $this->render('about');
 }

Если вы удалите строчку return $this->render('about'); и напишите вместо нее:

echo 'Hello!';

перейдя на страницу About, вы увидите надпись hello. Вы даже можете вывести через echo html тэги, которые будут отображаться на странице about:

echo '<h1>Hello!</h1>';

 

Yii2 фреймворк. Как создать свою страницу.

Но так делать не нужно, так как это нарушает принцип MVC. Верстку необходимо выносить в отдельный файл.

 

Что такое View

Файлы с версткой, которые подключается в actions контроллеров называется Views (Виды). Все что видят пользователи вашего сайта - блоки, html-формы, кнопки, иными словами дизайн страницы описанный html и css является Views. Вы не должны помещать верстку ваших страниц напрямую в экшены контроллеров, а делать это нужно через специальные файлы view, затем эти файлы с версткой должны встраиваться в контроллеры:

 public function actionAbout()
 {
    return $this->render('about');
 }

Строчкой $this->render('about') в методе actionAbout контроллера SiteController рендерится (отрисовывается) View страницы About.

 

Как создать страницу в Yii2 фреймворке

Создать страницу используя фреймворк очень просто.

1. Перейдите в контроллер SiteController. Он находится в каталоге frontend - controllers и откройте файл SiteController.php.

2. Найдите и скопируйте action (метод) под названием actionAbout() и вставьте скопированный код ниже.

 public function actionAbout()
 {
    return $this->render('about');
 }

 public function actionAbout()
 {
    return $this->render('about');
 }

3. Переименуйте скопированный метод actionAbout() в actionHello() и в строчке $this->render('about') замените 'about' на 'hello'

 public function actionAbout()
 {
    return $this->render('about');
 }

 public function actionHello()
 {
    return $this->render('hello');
 }

4. Создайте файл hello.php в каталоге frontend - views и поместите в него следующий код:

<h1>Hello!</h1>
<button class="btn btn-danger">Action 1</button>
<button class="btn btn-success">Action 2</button>

5. Если вы настраивали локальные домены по урокам из курса Yii2 Фреймворк на сайте FructCode.com, перейдите по адресу:

http://frontend.test/index.php?r=site%2Fhello

 

и если вы все сделали верно, вы должны увидеть такую страницу:

Уроки Yii2. Как создать страницу.

 

Обратите внимание на кнопки, которые мы создали и их дизайн. CSS-классы, которые мы использовали, принадлежат Bootstrap 3. Но откуда Yii2 знает про Bootstrap 3? Дело в том, что в фреймворк Yii2 по умолчанию встроен Bootstrap 3 и вы можете сразу использовать все возможности верстки сетки и компоненты Bootstrap 3 в вашем проекте Yii2. А если вы незнакомы с Bootstrap 3, но хотите научиться им пользоваться, обязательно пройдите мой интерактивный курс Bootstrap 3 на сайте FructCode

 

Как вы видите создать страницу с помощью Yii2 фреймворка очень просто. Фреймворк Yii2 очень функциональный, но для того, чтобы знать как им пользоваться, вам необходимо знать что такое объектно-ориентированном программирование (ООП) и уметь программировать применяя парадигму ООП. Объектно-ориентированное программирование на первый взгляд кажется очень сложным и я постарался простым языком на примерах рассказать основы объектно-ориентированного программирования в моем интерактивном курсе PHP и MySQL

 

Кроме ООП вам необходимо изучить структуру фреймворка Yii2 Advanced, а также ключевые концепции Yii2, такие как:

- Components

- Properties

- Events

- Dependency Injection Container

- Behaviors

- Service Locator

 

И другие. Также вам необходимо уметь взаимодействовать с базой данный с помощью фреймворка Yii2 и знать следующее:

- Query Builder

- Migrations

- Active Record

- Database Access Objects

- Data caching

 

Уметь работать с Assets, Widgets и создавать собственные виджеты Yii2 и многое другое. Всю эту информацию вы можете найти в официальной документации фреймворка Yii2 и я очень рекомендую всегда обращаться к первостепенному источнику при изучении и работе с любыми технологиями и фремворками, тем не менее, если вы хотите быстро изучить ключевые моменты использования фреймворка Yii2, я рекомендую пройти мой курс Yii2 Фреймворк на сайте FructCode.com в котором я на простых примерах показываю как создать веб-сайт с помощью фреймворка Yii2. 

 

С уважением, Сергей Никонов

P.S. Актуальные версии моих курсов, а также новые курсы находятся только на моем сайте FructCode.com. 



Поделитесь в социальных сетях





Читайте также

Что такое NodeJS и npm?

На современном Javascript можно разрабатывать не только Frontend часть сайта, но и Backend и в этой...
18.0K

Большое обновление FructCode

Обучайтесь эффективнее на онлайн платформе FructCode с новыми интерактивными заданиями и новыми возм...
5.1K

Что такое Modern Javascript?

Языки программирования развиваются и Javascript не стал исключением. В этой статье вы узнаете о том,...
14.0K

Классы в JAVASCRIPT

У языка Javascript достаточно непривычный для программистов синтаксис, особенно, если раньше они пис...
18.1K

Что такое веб-хостинг

Хостинг - это специализированный компьютер (сервер), который предоставляет пользователям возможности...
5.8K

Как убрать index.php из URL

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

Что такое файл index.php?

В этой статье вы узнаете, что такое файл index.php, чем его можно открыть. Мы рассмотрим самый прост...
97.5K























Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
пока нет оценок
Sergei Nikonov
  • Новинка!
  • 162 заданий
  • 60 видео
  • 17 часов

Курс Bootstrap 4. Обучение программирования, уроки программирования
Курс Bootstrap 4. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки Bootstrap 4 в разработке

Курс VueJS Фреймворк. Обучение программирования, уроки программирования
Курс VueJS Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки VueJS в разработке

Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки Yii2 в разработке

Курс Modern Javascript. Обучение программирования, уроки программирования
Курс Modern Javascript. Обучение программирования, уроки программирования
new
4.8 / 164
Sergei Nikonov
  • Новинка!
  • 30 заданий
  • 16 видео
  • 1 час

Курс Javascript/jQuery. Обучение программирования, уроки программирования
Курс Javascript/jQuery. Обучение программирования, уроки программирования
4.7 / 1670
Sergei Nikonov
  • 21 заданий
  • 10 видео
  • 1 час

Курс CodeIgniter. Обучение программирования, уроки программирования
Курс CodeIgniter. Обучение программирования, уроки программирования
4.9 / 649
Sergei Nikonov
  • 28 заданий
  • 26 видео
  • 5 часов

Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
4.9 / 1112
Sergei Nikonov
  • 29 заданий
  • 22 видео
  • 2 часа

Курс PHP/MySQL. Обучение программирования, уроки программирования
Курс PHP/MySQL. Обучение программирования, уроки программирования
4.8 / 1419
Sergei Nikonov
  • 69 заданий
  • 37 видео
  • 5 часов

Курс Bootstrap 3. Обучение программирования, уроки программирования
Курс Bootstrap 3. Обучение программирования, уроки программирования
4.9 / 2502
Sergei Nikonov
  • 50 заданий
  • 25 видео
  • 4 часа

Курс HTML/CSS. Обучение программирования, уроки программирования
Курс HTML/CSS. Обучение программирования, уроки программирования
4.9 / 4950
Sergei Nikonov
  • 66 заданий
  • 32 видео
  • 5 часов