Файл: Разработка сайта магазина игрушек.pdf

JavaScript (JS для краткости) является языком программирования, который позволяет веб-страницам отвечать на действия пользователя дальше базового уровня. Он был создан в начале 90-х фирмой Netscape, браузер которой Netscape Navigator в те времена был наиболее популярным средством для просмотра веб-сайтов. Название javascript наводит на мысли о связи с языком java, который также может использоваться в веб-программировании, и, действительно, javascript разрабатывался во многом с опорой на язык Java, но следует всё же помнить, что это совершенно разные языки. Скрипты, написанные на javascript, выполняются на стороне клиента (т. е. на компьютере пользователя), и не просто на стороне клиента, а в самом браузере, поэтому не требуется никаких дополнительных программ, никаких плагинов и т. п., скрипт можно просто вставить в html-код страницы, и он будет выполняться в любом браузере. Javascript - простой и удобный язык, позволяющий легко управлять содержимым веб-страницы, отслеживая самые различные действия пользователя, и реагируя на это. Благодаря этому, javascript практически не имеет конкурентов в своей области применения и является первым языком, изучение которого нужно начинать веб-разработчику.

1.5.4 Bootstrap

Бутстрап — это css и js-фреймворк, по сути, по сути, набор файлов с готовым написанным кодом. Цель разработчиков практически любого фреймворка — упростить разработку сайта себе и другим, кому будет доступен инструмент. В случае с Bootstrap он полностью бесплатен, так что вы можете использовать его любым образом, редактировать исходный код и как угодно переделывать фреймворк под себя.

Классы Bootstrap можно разбить на 3 большие группы:

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

Кроме классов во фреймворке Bootstrap имеются ещё и компоненты (готовые объекты интерфейса). Это кнопки, хлебные крошки, формы, навигационные меню, выпадающие списки, всплывающие панели и др.

Применение фреймворка во время создания сайтов позволит решить многие задачи:

создание качественных адаптивных сайтов
современный дизайн (единый стиль оформления HTML элементов и компонентов).
является кроссбраузерным и кроссплатформенным (работает на всех популярных операционных системах и браузерах (Mozilla Firefox, Google Chrome, Safari, Internet Explorer и Opera и пр.).
является открытым и бесплатным, что означает, что его можно использовать бесплатно как для личного, так и для коммерческого использования.

1.5.5 MySQL

MySQL – это одна из самых популярных и получивших широкое распространенние СУБД (система управления базами данных) для интернета ресурсов. Данная система не предназначена для обеспечения обработки больших объемов информации, но ее использование идеально в сфере интернет-сайтов, как не очень небольших, так и весьма крупных ресурсах.

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

1.5.6 PHP

PHP (рекурсивный акроним словосочетания PHP: Hypertext Preprocessor) – это распространенный язык программирования общего назначения с открытым исходным кодом. PHP специально сконструирован для веб-разработок и его код может внедряться непосредственно в HTML и наоборот, HTML теги легко добавляются к скриптам, написанным на PHP.

PHP отличается от JavaScript тем, что PHP-скрипты выполняются на сервере и генерируют HTML, который посылается клиенту.

В настоящее время PHP широко применяется не только для непосредственного создания динамических сайтов, но и для написания инструментов и средств web-разработки. На данном языке создано большое количество всевозможных фреймворков и готовых систем управления контентом (всевозможных CMS и CMR).

2 ПРОЕКТНАЯ ЧАСТЬ

2.1 Техническое задание

Цель сайта – создание сайта магазина игрушек. Вводом актуальной информации должен быть администратор сайта, прием заказов автоматический, просмотр заказов доступен администратору или любому зарегистированному менеджеру.

Сайт относится к бесплатному типу сайтов, т.к. пока на этапе раскрутки размещение рекламы и другие способы получения прибыли (так называемой монетизации) недоступны.

В дальнейшем сайт можно будет монетизировать, размещая, например, тематические рекламные баннеры сайтов-партнеров, обмениваясь ссылками и получая за это доплаты.

2.1.1. Анализ пользовательской аудитории

Можно исследовать аудиторию посетителей сайта, используя следующие критерии:

1) Географический;

2) Демографический;

3) Экономический;

4) Социальный.

Географически ограничений нет (сайт доступен из любой части мира), однако ограничения будут из-за используемого одного языка – русского. Таким образом, круг пользователей будет ограничен странами СНГ.

Демографически ограничений нет. В целом планируется использование сайта людьми в возрасте примерно от 18 до 45 лет, а наиболее активны, скорее всего, будут клиенты 20 - 30 лет.

Экономически ограничений нет. Сайт доступен бесплатно.

Социальных различий при доступе к сайту нет.

2.1.2. Выбор хостинга

При выборе хостинга обычно смотрят на несколько параметров:

1) дисковое пространство. Прямопорционально объему и цена. Для сайта новостей вполне достаточно 1Гб.

2) Поддержка MySQL. Разрабатываемый сайт будет использовать базу данных, поэтому это принципиально важно.

3) Windows или Linux хостинг. Чаще администрирующие свои сайты размещают на linux’е, поэтому большая часть интернет - провайдеров создает хостинг именно на этой операционной системе. Принципиальных отличий для нашего сайта здесь нет. Поэтому будем выбирать более дешевый вариант.

По советам профессионалов мы не будем работать с провайдером, сайт-визитка которого некачественный, с ошибками. Кроме того, не будем выбирать самый дешевый вариант. Часто у таких хостеров отсутствует служба поддержки (или в поддержке лишь сам администратор), часто хостинг в таких организациях имеет очень низкий уровень uptime (время беспрерывной работы).

Рассмотрев несколько вариантов:

Sweb.ru

Jino.ru

timeweb.com

выбираем jino.ru.

Такой выбор по сравнению с другими обоснован следующими фактами:

Беспроблемная работа серверов, сайты грузятся быстро.
Высокий уровень uptime.
Низкая цена.
Имеются дополнительные возможности, как, например: общий аккаунт для веб-сервисов; хранилище файлов в облаке, резервное копирование нативно (прозрачно) для пользователя.
Support (техническая поддержка) здесь работает в режиме 24 часа 7 дней в неделю.

2.1.3. Структура страницы сайта

Схематически внешний вид каждой страницы сайта строится по схеме рис.1.

Рисунок 1 – Упрощенная модель сайта

Модель сайта является простой (рисунок 1). Меню в верхнем экране позволит быстро перемещаться между главными страницами сайта. В области контента в зависимости от представленных разделов, также будет находиться кнопка для быстрого перехода на нужную страницу.

2.1.4. Логическая структура сайта

Для пользователя:

Сайт содержит несколько основных страниц:

1) Главная.

2) Магазин.

2.1) Каталог товаров.

2.2) Корзина.

Для администратора доступен дополнительный функционал:

1) Управление товарами.

2) Управление категориями.

3) Управление заказами.

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

Вход в административную часть доступен после ввода логина и пароля администратора. В данном случае это логин: Gilev@yandex.ru и пароль: 123456. Для обычных пользователей она никаким образом недоступна.

2.1.5. Модель сайта

Сайт построен по модной сейчас технологии – MVC.

Технология MVC (Model-View-Controller – с англ. Дословно: «модель-вид-контроллер») сейчас и в последние годы почти всегда используется для проектирования современных сайтов.

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

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

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

Веб-приложения с данной структурой получили применение, в основном, из-за того, что эту модель включили как составляющую часть разработки Struts и Ruby on Rails.

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

Контроллер, модель и вид.

Контроллер.

Контроллер обрабатывает запросы пользователя (это HTTP-запросы, обычно GET или POST), которые генерируются после действий с элементами управления сайта – клики по кнопкам, нажатия на меню, переход по ссылкам, ввод данных. Главное назначение контроллера – вызывать необходимые ресурсы и объекты, чтобы выполнить задаваемые пользователям задачи. Как правило, задача контроллера – вызвать необходимую модель для определенной задачи и выбрать нужный вид. Можно сказать, что контроллер главная часть, движок.

Модель.

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

Модель наполняется самой главной частью логики сайта. Той логики, что решает нужную (скрипт, сервис, форум, магазин, например).

Вид.

Вид представляет собой способ отображения данных сайта. Фактически, это шаблон для отображения данных. Его можно выполнить в нескольких вариантах для каждого случая и для каждой логики. А контроллер спрограммировать так, чтобы для каждого случая выбирался свой вид.

Преимущества MVC.

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

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

Дополнительные эффекты от применения концепции MVC – лучшая структурированность и упрощение больших приложений. Из-за модульной структуры проще производить отладку, поиск ошибок, тестирование программной продукции и повторно использовать отдельные модули.

3 РАЗРАБОТКА СТРУКТУРЫ БАЗЫ ДАННЫХ

База данных – неотъемлемая часть практически любого веб-ресурса. В нашем проекте используется БД MySQL, т.к. она наиболее органично работает в связке с языком PHP и веб-сервером.