Kategorier: Alla - проектирование - архитектура

av web 2 för 6 årar sedan

316

WEB-Тема5

В проектировании серверной стороны веб-узлов используются различные архитектурные шаблоны, такие как MVVM и MVC. Шаблон MVVM делит приложение на модель данных, представление и модель представления, используя событийную модель и связывание данных для разделения данных и интерфейса.

WEB-Тема5

Тема 5. Проектирование серверной стороны web-узла

Фреймворки проектирования

MWM

Model-View-View-Model (MVVM) — применяется при проектировании архитектуры приложения, в основе лежит событийная модель которая использует “связывание данных”, разделение данных от интерфейса.

Шаблон проектирования MVC предполагает разделение исходного кода вашего приложения на 3 части:

1. Данные (model)

2. Бизнес-логика (controller)

3. Представление (view)

Используется двойное связывание: интерфейс меняется через оповещения Модели представления, и Модель представления и модель данных меняется через интерфейс.



MVVM фреймоворки: AngularJS, KnockoutJS, VPF и.др.

MVC

MVC(Model-View-Controller) – шаблон проектировании приложения с помощью которых модель данных приложения, пользовательский интерфейс и взаимодействие с пользователем разделены на три отдельных компонента таким образом Модель(model), Вид(view), Контроллер(controller). Шаблон проектирования обуславливает максимальное обособление этих компонентов, что бы они оказывали друг на друга минимальное воздействие. Так одна модель данных или и бизнес логика могут, к примеру, иметь несколько представлений. Данная архитектура хорошо подходит для создания веб- приложений. 


MVC фреймоворки: CodeIgniter; Zend framework; Laravel; Ruby onRails; ASP.net; Catalyst; Interchange;Django и др.

CodeIgniter

Создание собственного контроллера и обработчика

В каталоге Controllers создадим файл MyFirstController.php. Добавим в него 2 действия: по умолчанию (index) и действие для отображения и редактирования (edit).

В каталоге views создадим подкаталог MyFirstController и 2 файла отвечающих за отображение для обоих действий из контроллера: default.php и enterValue.php.

В HTML коде представлена форма с возможностью ввода одного параметра.

В данное представление мы передаем значение из контроллера которое получаем из POST-запроса и выводим его в нужном месте просто вызвав имя параметра которые мы указали в контроллере

	$data[‘param1’]

Работа фреймворка по умолчанию

Так как в запросе не задан конкретный контролер, сработал контроллер по умолчанию, этот параметр указан в фале config/routes.php

параметр: $route['default_controller'] = 'welcome';

контроллер по умолчанию указан 'welcome' расположенный в файле application/controller/welcome.php.

В коде контроллера представлен класс с функцией Index (action по умолчанию). В нем запускается рендеринг представления командой

	$this->load->view('welcome_message')

В данном случае 'welcome_message' – это название представления расположенного в application/views/welcome_message.php .

Настройка конфигурационных файлов

В каталоге application/config в файл config.php:

Путь к нашему веб-сайту. К примеру http://example_codeigniter/

$config['base_url'] = '';

Для использование сессий необходимо, прежде всего, задать ключ шифрования «encryption_key»

$config['encryption_key'] = '';

Язык по умолчанию.

$config['language'] = 'english';

Разрешение на использование сокращенного синтаксиса для php

$config['rewrite_short_tags'] = FALSE;

Схема взаимодействия модулей

Схема взаимодействия модулей


  1. Index.php – представляет собой front-controller, который инициализирует и запускает остальные модули и ресурсы фреймворка.
  2. Routing – маршрутизация HTTP-запросов.
  3. Caching – если есть файлы кэша для запрашиваемого ресурса, они напрямую отправляются пользователю.
  4. Security - перед загрузкой контроллеров, HTTP-запросы проходят стадию фильтрации на предмет безопасности.
  5. Application controller – контроллер загружающий модель, библиотеки, плагины, хэлперы и т. д.
  6. View – в конце происходит рендеринг представления запрашиваемой страницы. Если включен кэш, страница сначала сохраняется в кэш, а после передаётся пользователю.

Структура каталогов

index.php

index.php – стартовый файл.

User_guide

User_guide – руководство пользователя.

System

System – каталог с ядром фреймворка.

Application

Application - каталог вашего приложения

Структура каталога Application:

сache – каталог для кэша

config — конфигурационные файлы сайта;

controllers —контроллеры;

models —модели;

views—представления;

errors — страницы ошибок;

libraries — библиотеки, относящиеся к вашему приложению;

hooks — файлы позволяющие изменить поведение ядра, без изменения самого ядра);

language – файлы локализации;

third_party – компоненты и модули сторонних разработчиков;

Установка

1. Скачиваем с фрэймворк с официального сайтаhttps://codeigniter.com/

2. Распаковываем в веб-среду(Денвр, XAMP, LAMP и.т.д.) в созданный нами хост, к примеру example_codeigniter.

3. Запускаем браузер и вводим название http://example_codeigniter/

4. Получаем приветственное сообщение (Рисунок 2).

Microsoft ASP.MVC

Фреймворк для создания веб-приложения реализующий архитектуру, которая разделяет приложение на 3 основных компонента: Модель (Model), Представление (View), Контроллер (Controller). (Рисунок 1)

Создание первого приложения

Для того что тип ASP.MVC 4 проекта поддерживался Visual Studio необходимо установить его с веб-ресурса: https://docs.microsoft.com/en-us/aspnet/mvc/mvc4

Далее после перезапуска Visual Studio в главном меню File->New>Project. Выбираем Web-шаблон и в нем ASP.NET MVC 4 Web Applicaton.

В созданном нами типе проекта (Web API) по умолчанию два контроллера в каталоге Controllers: · HomeController.cs · ValuesController.cs

По умолчанию представление в проекте только одно Views\Home\Index.cshtml.

Запустим проект и далее редактируем так, как нам нужно.

Структура каталогов проекта

Возможные варианты проекта

Возможные варианты проекта:

Контроллеры

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

Представления

Представления служат для отображения пользовательского интерфейса приложения. Пользовательский интерфейс обычно создается на основе данных модели.  Примером может служить представление для редактирования таблицы Products, которое содержит текстовые поля, раскрывающиеся списки и флажки, значения которых основаны на текущем состоянии объекта Product.

Модели

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

CSS

Адаптивный веб-дизайн — дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах.


Twitter Bootstrap.

Foundation и Skeleton - так же CSS фреймворки для создания сайтов с динамической версткой с похожим подходом.

Twitter Bootstrap

Twitter Bootstrap включает в себя HTML и CSS шаблоны оформления для веб-страниц, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения.

Основные инструменты Bootstrap

Язык программирования PHP

Вывод списка переменных окружения РНР

<?php

phpinfo();

?>


Либо воспользоваться массивом $_SERVER

Пример: $_SERVER ["HOSTNAME"]

Циклы

for - цикл который выполняется определенное количество раз

for (инициализация счетчика;условие;инкемент/декремент счетчика {

ваш код;

}


while - цикл выполняется пока заданное условие истинно.

while (условие истинно) {

ваш код;

}


do...while – цикл выполняется один раз, а затем снова повторяет цикл, пока заданное условие истинно.

do {

ваш код;

} while (условие истинно);


foreach – цикл для перебора элементов массива..

foreach ($array as $value) {

ваш код;

Условный оператор и оператор выбора

Оператор if

if (выражение) блок_выполнения


Оператор else

if (выражение) блок_выполнения_1

else блок_выполнения_2


Оператор выбора switch

switch (выражение или переменная)

{

case значение_1: блок_действий_1

break;

case значение_2: блок_действий_2

break;

default:блок_действий_по_умолчанию

}

Комментарии

// однострочный комментарий


/* многострочный комментарий */

Примеры объявления переменных

$var_int = 1 - целочисленный тип

$var_float = 2.45 - вещественный тип

$var_string = «string» - строковый тип

PHP

PHP - «Hypertext Preprocessor» ранее (Personal HomePage) – это широко используемый язык сценариев общего назначения с открытым исходным кодом. PHP это язык программирования, разработанный для написания web-приложений (сценариев), исполняющихся на Web-сервере. Синтаксис языка берет начало из C, Java и Perl. Преимуществом PHP является предоставление web-разработчикам возможности быстрого создания динамически генерируемых web-страниц, так называемых DHTML (Dynamic HTML).