Categorieën: Alle - представление - проектирование

door Крис Лешукова 6 jaren geleden

323

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

Проектирование серверной части веб-узла требует использования фреймворка и шаблона MVC, который разделяет модель данных, пользовательский интерфейс и взаимодействие с пользователем на три отдельные компоненты:

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

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

PHP

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

Фреймворк

CSS

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

Skeleton
Foundation

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

Twitter Bootstrap

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

Алерты

Алерты — оформление диалоговых окон, Подсказок и Всплывающих окон.

Навигация

Навигация — классы оформления для Табов, Вкладок, Страничности, Меню и Тулбара.

Формы

Формы — классы для оформления не только форм, но и некоторых событий происходящих с ними.

Таблицы

Таблицы — средства оформления таблиц, вплоть до добавления функциональности сортировки.

Медиа

Медиа — представляет некоторое управление изображениями и Видео.

Типографика

Типографика — описания шрифтов, определение некоторых классов для шрифтов таких как код, цитаты и т. п.

Шаблоны

Шаблоны — фиксированный или резиновый шаблон документа.

Сетки

Сетки — заранее заданные размеры колонок, которые можно сразу же использовать, например ширина колонки 140px относится к классу .span2, который можно использовать в CSS описании документа.

MWM

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

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

1. Данные (model)

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

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

MVC

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

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;

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

Рисунок 3

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

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 основных компонента. (Рисунок 1)

Контроллеры

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

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

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

Модели

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

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

Для того что тип 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.

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