ВКР (1195834), страница 2

Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 2)

– декоративная графика – эстетические элементы дизайна страниц – фоновый рисунок, заголовки, выполненные в виде графических файлов и прочее.

Такая классификация предполагает использование различных мультимедийных форматов [4].

После создания макета производится его верстка. Вёрстка – это преобразование созданных дизайнером графических макетов в код страниц, который бы отображался в браузере в точном соответствии с исходным макетом.

Основными задачами при вёрстке являются:

– корректность отображения страниц сайта при разных разрешениях экрана;

– кросбраузерность – единообразность отображения страниц сайта в наиболее популярных браузерах Internet Explorer, Mozilla Firefox, Opera, Chrome.

Сложность вёрстки зависит от сложности дизайна [4].

1.3.3 Разработка базы данных

Для упорядоченного хранения информации используемой создаваемым веб-приложением и реализации динамики его контента необходимо создания базы данных. Чаще всего применяются реляционные базы данных. Реляционная база данных представляет собой совокупность двумерных таблиц. Любая таблица реляционной базы данных состоит из строк, называемых записями, и столбцов, называемых полями.

Существует множество различных систем управления базами данных (СУБД), но в современных хостинг-центрах – организациях по размещению веб-проектов на серверах как правило, применяются СУБД MySQL и PostgreSQL. Причинами тому являются фактическая ориентация этих СУБД на хостинговые задачи, доступность на всех популярных серверных операционных системах, а также относительная простота настройки и администрирования. СУБД упрощает управление данными и сокращает время и издержки на разработку приложений. MySQL и PostgreSQL обеспечивают приемлемый уровень безопасности, надёжности и масштабируемости. Однако чаще всё же используется MySQL [4].

MySQL – это система управления реляционными базами данных. Сервер MySQL позволяет эффективно работать с данными и обеспечивает быстрый доступ к данным одновременно нескольким пользователям. При этом доступ к данным предоставляется только пользователям, имеющим на это право. Управление MySQL осуществляется с помощью структурированного языка запросов SQL. С помощью этого языка можно создавать базы данных и таблицы, добавлять, изменять и удалять данные, получать данные по запросу. Для удобства работы с MySQL используется специальный интерфейс администрирования (рисунок 1) [2].

Рисунок 1 – Интерфейс администрирования phpMyAdmin

Одним из самых распространенных интерфейсов является phpMyAdmin.

1.3.4 Программирование

Программирование – это практическая реализация проекта, интеграция наработок по отдельным направлениям. Другими словами, это процесс построения функциональных инструментов для наполнения и обработки данных. Программирование определяет насколько стабильным и защищённым будет функционирование приложения. Выбор платформы, технологий и грамотного подхода к программированию играет существенную роль [4].

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

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

Серверные языки обрабатываются на стороне сервера, поэтому результат их обработки, в отличии от клиентских языков, не зависит от браузера, используемого пользователем. К серверным языкам веб-программирования относятся такие языки, как PHP, Perl, ASP.NET, Java, Python, Groovy, Ruby. Для работы с ними вполне достаточно установить на персональном компьютере локальный сервер.

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

1.4 Основные технологии по созданию веб-приложения

1.4.1 Обзор основных технологий

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

– большая безопасность: все данные хранятся на сервере, который обычно обеспечивает больший контроль безопасности, чем клиентские компьютеры;

– централизованный доступ к данным: поскольку данные хранятся только на сервере, администрирование доступа к данным намного проще, чем в любых других архитектурных стилях;

– простота обслуживания: роли и ответственность вычислительной системы распределены между несколькими серверами, общающимися друг с другом по сети, благодаря чему клиент гарантированно остается неосведомленным и не подверженным влиянию событий, происходящих с сервером (ремонт, обновление либо перемещение) [5].

Существуют различные технологии для создания веб-приложений.

Они могут быть клиентскими, как например HTML, CSS, JavaScript, или серверными – PHP, MySQL.

HTML (HyperText Markup Language) – это язык разметки документа, описывающий форму отображения информации на экране компьютера. HTML позволяет задать местоположение элементов веб-страницы в окне веб-браузера. С помощью HTML можно отформатировать отдельные символы или целые фрагменты текста, вставить изображение, таблицу или форму и многое другое [2, 28].

Каскадные таблицы стилей (CSS – Cascading Style Sheets) позволяют существенно расширить возможности языка HTML за счет более гибкого управления форматированием веб-страницы. Применение стилей позволяет задавать точные характеристики практически всех элементов веб-страницы, а это значит, что можно точно контролировать внешний вид веб-страницы в окне веб-браузера [19].

Для более функциональных сайтов существует язык программирования JavaScript.

JavaScript – это язык программирования, позволяющий сделать веб-страницу интерактивной, то есть реагирующей на действия пользователя. Последовательность инструкций (называемая программой, скриптом или сценарием) выполняется интерпретатором, встроенным в обычный веб-браузер. Иными словами, код программы внедряется в HTML-документ и выполняется на стороне клиента. Для выполнения программы даже не нужно перезагружать веб-страницу. Все программы выполняются в результате возникновения какого-то события. Например, перед отправкой данных формы можно проверить их на допустимые значения и, если значения не соответствуют ожидаемым, запретить отправку данных [2].

Существует немало языков для написания скриптов, которые при обработке выдают необходимую нам информацию на языке HTML. В разное время популярны были разные скриптовые языки, такие как Java, Perl, ASP и многие другие. Все они обладают своими преимуществами (один надёжнее, другой проще в освоении). В настоящее время самым популярным и активно развивающимся языком является PHP. С его использованием создаётся большинство современных сайтов и даже очень популярных порталов [9].

PHP – это язык программирования, выполняемый на стороне сервера. В отличие от языка JavaScript PHP не зависит от программного обеспечения клиента и поэтому будет выполнен в любом случае.

Последовательность инструкций (называемая программой или скриптом) выполняется интерпретатором языка PHP. Код программы может внедряться в HTML-код. Эта возможность отличает PHP от других языков, используемых в Интернете, например, от языка Perl. Обработка PHP-кода производится на сервере до того, как страница будет передана веб-браузеру. В итоге веб-браузер получит обычный HTML-код или другой вывод [2].

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

Например, Sublime Text 2 – текстовый редактор, который используется для удобной работы с кодом. Преимуществами данной программы являются: возможность одновременного открытия и редактирования множетсва файлов; удобное визуальное выделение языков програмирования и разметки; удобная организация быстрого поиска по документу и множество других полезных функций [14, 27].

Для создания логотипа приложения и редактирование некоторых элементов дизайна использована программа Adobe Photoshop CC 2014. Это многофункциональный графический редактор, который является одним из самых мощных на сегодняшний день графических редакторов.

Возможности этой программы охватывают весь спектр различных операций, связанный с графикой, а именно: обработка фотографий, создание собственных рисунков, создание постеров, коллажей, обложек для разной продукции и многое другое [15].

1.4.2 Методы решения поставленной задачи

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

Структура веб-приложения со стороны пользователя должна предполагать:

– возможность просмотра бегущей строки;

– возможность просмотра объявлений в зависимости от их категории и раздела;

– возможность поиска по объявлениям;

– возможность размещения объявления в бегущей строке;

– возможность размещения банерной рекламы;

– возможность ознакомления с условиями использования услуг данного веб-приложения.

Структура веб-приложения со стороны администратора должна предполагать:

– возможность просмотра всех размещенных объявлений и банеров;

– возможность редактирования поданых объявлений;

– возможность размещения банерной рекламы;

– возможность размещения поданых объявлений.

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

В соответствии с рассмотренной структурой веб-приложения определяются основные компоненты интерфейса, и выбирается их наиболее оптимальное размещение на веб-странице. Необходимое расположение элементов интерфейса на странице достигается использованием Html и CSS. Html код разделен преимущественно на блоки, внутри которых вложены требуемые объекты. Большинство блоков имеет значения класса и id, которые необходимы для задания определенных свойств с помощью CSS. Кроме того, CSS позволяет не только более точно установить расположение элемента, но и задать необходимое ему визуальное отображение.

Определим основной принцип работы создаваемого веб-приложения.

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

– клиентская часть;

– серверная часть (PHP);

– СУБД (MySQL).

На рисунке 2 показана организация основного принципа работы веб-приложения, рассмотренная на примере работы с объявлениями.

Рисунок 2 – Основной принцип работы веб-приложения, рассмотренный на примере

работы с объявлениями

Например, при подаче объявления пользователь взаимодействует только с предоставляемым ему интерфейсом, внося необходимые данные, а при отправке заполненной формы включается обработчик, написанный на языке веб-программирования PHP. С помощью обработчика осуществляется взаимодействие с базой данных.

Для организации взаимодействия используем функции расширения MySQLi, например, такие как:

– mysqli_connect() – функция открытия соединения с сервером MySQL;

– mysqli_query() – функция для выполнения SQL запроса;

– mysqli_num_rows() – функция, которая возвращает число рядов в результирующей выборке;

– mysqli_fetch_array() – функция, которая выбирает одну строку из результирующего набора и помещает ее в массив;

и некоторые другие функции [25].

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

Кроме взаимодействия с базой данных PHP также участвует в обработке данных, посылаемых методом POST и дает возможность работать с сессиями. Рассмотрим, например, организацию сессии работы администратора [26].

Данные о введенном логине и пароле методом POST отправляются с формы авторизации на другую страницу, где происходит их проверка. Открывается новая сессия – session_start(); и происходит передача введенных пользователем данных переменным:

$login= $_POST['log'];

Характеристики

Список файлов ВКР