Автор Анна Евкова
Преподаватель который помогает студентам и школьникам в учёбе.

Разработка сайта магазина игрушек

Содержание:

ВВЕДЕНИЕ

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

Связанные между собой компьютеры в Американской локальной сети Arpanet родили международную сеть под названием Internet. Международная сеть сейчас объединяет практически все маломальски «умные» smart-вещи: смартфоны, часы, телевизоры, холодильники и даже лампочки.

По всему миру постоянно функционируют миллионы коммерческих организаций, начиная от международных торговых площадок, заканчивая лотками выездной торговли. Ежедневно миллионы сотрудников и покупателей этих организаций нуждаются в оперативной информации от администрации. Именно обеспечение свежей актуальной информацией – современная потребность бизнеса. Самый простой способ – использование готовых сайтов-визиток, что и реализовано до сих пор во многих организациях. Однако имеются весомых проблемы: сайт-визитка может быть не выполнять нужных функций, являясь одностраничным и ограниченным в функциях, сайт-визитка, спроектированный на CMS не так легко дополнять и обновлять обновлять (требуется определенная сноровка и опыт использования данных CMS), кроме всего прочего, это порой дорого.

Этих проблем лишен вариант с применением самописного сайта-магазина. Доступ к сети Интернет круглосуточный, поддержкой сайта заниматься не нужно, лишь изредка обновлять наличие товаров на сайте, добавлять новые позиции, обрабатывать заказы покупателей. Причем доступ можно получить к, например, австралийским представительствам организации, находясь в России, и к российским представительствам, находясь в Австралии.

Объект нашего исследования –сайт магазина игрушек.

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

Чтобы достичь указанного результата необходимо будет выполнить следующие задачи:

1. Определить предметную область.

2. Определиться со структурой сайта.

3. Реализовать проектирование веб-сайта по заданной тематике:

3.1. многостраничного сайта;

3.2. с использованием базы данных.

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

1 ТЕОРЕТИЧЕСКАЯ ЧАСТЬ

1.1. Общие сведения

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

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

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

Специализированные сайты уже являются универсальными и могут содержать все, начиная форумом и заканчивая кабинетом пользователя. Такие сайты удобно строить по модульной структуре, используя готовые CMS (content management system) – системы управления данными. Минус таких сайтов – монструозность и невысокая скорость работы из-за своей универсальности. Плюс таких сайтов – высокая скорость и относительная простота разработки. Также стоит отметить, что для работы будут необходимы платные модули (например, модули для подключения платежных систем в CMS Wordpress).

1.2 Понятие веб-сервера

Для работы любого сайта необходим веб-сервер.

Понятие «веб-сервер» может относиться как к аппаратной начинке, так и к программному обеспечению. Или даже к обеим частям, работающим совместно.

С точки зрения "железа", «веб-сервер» — это компьютер, который хранит файлы сайта (HTML-документы, CSS-стили, JavaScript-файлы, картинки и другие) и доставляет их на устройство конечного пользователя (веб-браузер и т.д.). Он подключен к сети Интернет и может быть доступен через доменное имя, подобное mozilla.org.

С точки зрения ПО, веб-сервер включает в себя несколько компонентов, которые контролируют доступ веб-пользователей к размещенным на сервере файлам, как минимум — это HTTP-сервер. HTTP-сервер — это часть ПО, которая понимает URL’ы (веб-адреса) и HTTP (протокол, который ваш браузер использует для просмотра веб-страниц).

На самом базовом уровне, когда браузеру нужен файл, размещенный на веб-сервере, браузер запрашивает его через HTTP-протокол. Когда запрос достигает нужного веб-сервера ("железо"), сервер HTTP (ПО) принимает запрос, находит запрашиваемый документ (если нет, то сообщает об ошибке 404) и отправляет обратно, также через HTTP.

1.3 Понятие веб-хостинга

Чтобы опубликовать веб-сайт, необходим либо статический, либо динамический веб-сервер.

Статический веб-сервер, или стек, состоит из компьютера ("железо") с сервером HTTP (ПО). Мы называем это «статикой», потому что сервер посылает размещенные файлы в браузер «как есть».

Динамический веб-сервер состоит из статического веб-сервера и дополнительного программного обеспечения, чаще всего сервера приложения и базы данных. Мы называем его «динамическим», потому что сервер приложений изменяет исходные файлы перед отправкой в ваш браузер по HTTP.

Веб-сервер сложно настраивать для обычного пользователя. Его настройками занимаются специально обученные люди – системные администраторы. Администрирование веб-сервера – очень сложный процесс, требующий высокой квалификации. Это обусловлено в первую очередь тем, что необходимо максимум внимания оказать безопасности. Ведь сервер, т.е. компьютер, должен быть подключен к сети интернет, и любой может подключиться к нему и произвести несанкционированные действия в случае обнаружения дыр в безопасности. Кроме того, веб-сервер должен работать (быть включенным) и быть подключен к сети Интернет круглосуточно. Что не всегда возможно для обычных компьютеров. В таких случаях на помощь приходят специализированные организации – веб-хостеры. Они предоставлюят услуги аренды своих мощностей – позволяют арендовать веб-серверы, либо виртуальные вычислительные мощности, на которых можно установить веб-серверы. Эти услуги носят название веб-хостинг.

1.4 Программное обеспечение веб-сервера

На данное время самым известным и распространенным является Apache. Он распространяется бесплатно, т.е. является свободно-распространяемым. Используется как часть UNIX – подобной операционной системы, однако программисты нашли способы откомпилировать его и под другие операционные системы, в том числе, под windows, например.

Также имеются другие варианты веб-серверов:

IIS от компании Microsoft, распространяемый с ОС семейства Windows

nginx — свободный веб-сервер, разрабатываемый Игорем Сысоевым с 2002 года и пользующийся большой популярностью на крупных сайтах[2],[3]

lighttpd — свободный веб-сервер.

Google Web Server — веб-сервер, основанный на Apache и доработанный компанией Google.

Resin — свободный веб-сервер приложений.

Cherokee — свободный веб-сервер, управляемый только через web-интерфейс.

Rootage — веб-сервер, написанный на java.

Open Server — бесплатная программа с графическим интерфейсом использует множество исключительно свободного программного комплекса.

H2O — свободный быстрый веб-сервер, написанный на C.

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

1.5.1 HTML5

HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. [2] Хотя стандарт был завершён (рекомендованная версия к использованию) только в 2014 году (предыдущая, четвёртая, версия опубликована в 1999 году), ещё с 2013 года браузерами оперативно осуществлялась поддержка, а разработчиками — использование рабочего стандарта (англ. HTML Living Standard). Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.

Во всемирной паутине долгое время использовались стандарты HTML 4.01, XHTML 1.0 и XHTML 1.1. Веб-страницы на практике оказывались свёрстаны с использованием смеси особенностей, представленных различными спецификациями, включая спецификации программных продуктов, например, веб-браузеров, а также сложившихся общеупотребительных приёмов. HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений.

1.5.2 CSS

Спецификация CSS3 – это неоспоримое будущее в области декоративного оформления веб-страниц, и ее разработка еще далека от завершения. Большинство модулей все еще продолжает совершенствоваться и модифицироваться, и ни один браузер не поддерживает все модули. Это означает, что CSS3 испытывает такие же сложности, как и HTML5. Веб-разработчикам нужно решать, какие возможности использовать, а какие игнорировать, а также каким образом заполнить зияющие пробелы в браузерной поддержке.[2]

Аббревиатура CSS расшифровывается, как «каскадные таблицы стилей» (от англ. Cascading Style Sheets). Таблицы стилей предназначены для визуального оформления элементов веб-страницы. Как правило, CSS используется в связке с HTML, что является весьма эффективным «инструментом» при создании любого сайта. Именно поэтому, наряду с изучением HTML также рекомендуется изучить технологию CSS.

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

Аббревиатура CSS расшифровывается, как «каскадные таблицы стилей» (от англ. Cascading Style Sheets). Таблицы стилей предназначены для визуального оформления элементов веб-страницы. Как правило, CSS используется в связке с HTML, что является весьма эффективным «инструментом» при создании любого сайта. Именно поэтому, наряду с изучением HTML также рекомендуется изучить технологию CSS.

CSS представляет собой совокупность параметров, с помощью которых отображается тот или иной элемент на веб-странице. Эти параметры могут указываться, как в отдельном файле (таблице стилей), так и быть прописаны непосредственно в HTML коде страницы. Например, на нашей веб странице могут быть такие элементы: заголовок статьи, абзацы, цитаты, сноски, картинки, видео ролики, ссылки на другие страницы сайта и т.д. Всем этим элементам мы можем задать определенный стиль отображения – размер шрифта, цвет букв, толщину рамок и картинок, стиль ссылок и так далее.

При работе с сайтом рекомендуется использовать именно отдельный файл со стилями, а не внедрять код со стилевыми настройками в отдельные страницы. Это поможет заметно сократить время разработки, так как при этом, все стили находятся в одном месте и при необходимости всегда можно оперативно найти конкретный стиль и изменить его. Файл со стилями имеет расширение css.

1.5.3 JavaScript

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) Социальный.

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

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

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

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

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

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

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

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

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

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

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

Sweb.ru

Jino.ru

timeweb.com

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

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

  1. Беспроблемная работа серверов, сайты грузятся быстро.
  2. Высокий уровень uptime.
  3. Низкая цена.
  4. Имеются дополнительные возможности, как, например: общий аккаунт для веб-сервисов; хранилище файлов в облаке, резервное копирование нативно (прозрачно) для пользователя.
  5. 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 и веб-сервером.

База данных под названием shop имеет таблицы:

1) category

2) product

3) product order

4) user

Структура таблицы category приведена на рис. 2.

Рис. 2 – Структура таблицы category

Содержимое таблицы category приведена на рис. 3.

Рис. 3 – Содержимое таблицы category

Структура таблицы product приведена на рис.4.

Рис. 4 – Структура таблицы product

Содержимое таблицы product приведено на рис. 5.

Рис. 5 – Содержимое таблицы product

Структура таблицы product_order приведена на рис.6.

Рис. 6 – Структура таблицы product_order

Содержимое таблицы product_order приведена на рис. 7.

Рис. 7 – Содержимое таблицы product_order

Структура таблицы user приведена на рис.8.

Рис. 8 – Структура таблицы user

Содержимое таблицы user приведено на рис. 9.

Рис. 9 – Содержимое таблицы user

4 ОПИСАНИЕ СТРУКТУРЫ КЛИЕНСКОЙ ЧАСТИ

4.1 Описание интерфейса «Обычный пользователь»

Начало работы начинается с главной страницы сайта (Рисунок 10).

Рисунок 10 – Главная страница сайта

Для получения доступа к функционалу пользователя, необходимо воспользоваться кнопкой Вход, которая направит пользователя на форму запроса данных для входа в систему. (Рисунок 11)

Рисунок 11 – Меню пользователя

Появившийся новый пункт “Редактировать”, служит для просмотра имени, изменения пароля в системе. Пункт “Список покупок”, служит для просмотра истории покупок. Для завершения работы необходимо использовать кнопку Выход.

4.2 Описание интерфейса «Администратор»

Если воспользоваться входом в систему под аккаунтом администратора меню системы примет следующий вид (Рисунок 12).

Рисунок 12 – Меню администратора

В данном виде меню появилось несколько пунктов: Управление товарами, управление категориями, управление заказами. При помощи этих пунктов администратор системы имеет возможность вносить изменения в справочники системы.

Рисунок 13 – Управление товарами

В данном пункте мы можем полностью изменять информацию о товарах. (Рисунок 13).

Пример работы с одним из товаров приведен на рисунке (Рисунок 14).

Рисунок 14 – Изменение информации о товаре

Рисунок 15 – Управление категориями

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

Пример одной из категории приведен на рисунке (рисунок 16)

Рисунок 16 – Настройка категории

4.3 Инструкция пользователя

Рисунок 17 – Меню

Для входа в систему служит кнопка Вход, после чего откроется пункт авторизации (Рисунок 18).

Рисунок 18 – Меню авторизации пользователя.

Для зарегистрированных пользователей доступна возможность редактирования данных и список покупок. (Рисунок 19).

Рисунок 19 – Просмотр информации для авторизованных пользователей.

Рисунок 20 – Редактирование данных.

Данная система позволяет изменить свое имя и пароль.

Для незарегистрированных пользователей служит кнопка Регистрация, после чего откроется пункт регистрации. (Рисунок 21).

Рисунок 21 – Регистрация пользователя.

ЗАКЛЮЧЕНИЕ

Результатом курсовой работы стало создание информационной системы. Она имеет интуитивно-понятный и дружелюбный интерфейс и функционал.

В процессе выполнения работы была создана база данных, с применением среды MySQL. Реализация проекта велась с применением языков CSS, HTML, PHP, а также м использованием языка SQL запросов для обращения и изменения информации в связанной базе данных системы.

Во время работы над данным курсовым проектом были решены следующие задачи:

  1. Была поставлена и изучена предметная область;
  2. Спроектирована структура сайта;
  3. Создан многостраничный веб-сайт;
  4. Разработана база данных.

Возможные недостатки и доработки сайта на перспективу:

1) Все фото на сайте одного размера – предусмотреть отображение разных размеров.

2) В карточке товара сделать хороший просмотр фото.

3) Сделать поиск товаров.

4) Реализовать блог (разработать БД, модель, контроллер, вью, работа с другими частями приложения).

5) Админка для администратора (добавить блог).

6) Улучшить интерактивность при наведении на товар (css/html).

СПИСОК ЛИТЕРАТУРЫ

  1. Дакетт, Джон HTML и CSS. Разработка и дизайн веб-сайтов) / Джон Дакетт. - Москва: Наука, 2017. - 480 c. ISBN 978-5-699-64193-2
  2. Вадим Дунаев. HTML, скрипты и стили. BHV, Санкт-Петербург, 2015. ISBN 978-5-9775-3317-1.
  3. Н. Закас, Джереми Мак-Пик, Джо Фосетт. Ajax для профессионалов. Перевод: Александр Киселев. Символ, Санкт-Петербург, 2015. ISBN 978 5 93286-081-6.
  4. Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2011. - 416 c. ISBN 978-5-9775-0596-3.
  5. Adobe Dreamweaver CS6. Официальный учебный курс. Эксмо, Москва, 2014. ISBN 978-5-699-69655-0.
  6. Чои Вин. Как спроектировать современный сайт. Питер, Санкт-Петербург, 2011. ISBN 978-5-459-00579-0.
  7. А. Годин, К. Джонсон, К. Уоррен, М. Уэбер, Брайан Хоган. Книга веб-программиста: секреты профессиональной разработки веб-сайтов. Питер, Санкт-Петербург, 2013. ISBN 978-5-459-01510-2.
  8. Кирилл Сухов. HTML 5. Путеводитель по технологии. ДМК, Москва, 2013. ISBN 978-5-94074-910-3.
  9. Алан Купер, Дэйв Кронин, Кристофер Носсел, Роберт Рейман. Алан Купер об интерфейсе. Основы проектирования взаимодействия. Символ, Санкт-Петербург, 2015. ISBN 978-5-93286-132-5
  10. Дронов, Владимир JavaScript и AJAX в Web-дизайне / Владимир Дронов. - Москва: Высшая школа, 2012. - 736 c. ISBN 978-5-9775-0251-1

ПРИЛОЖЕНИЯ

index.php

<?php

declare(strict_types = 1);

// FRONT CONTROLLER

// 1. Общие настройки

ini_set('display_errors','1');

error_reporting(E_ALL);

session_start();

// 2. Подключение файлов системы

define('ROOT', dirname(__FILE__));

//include_once (ROOT.'/models/Product.php');

//require_once(ROOT.'/components/Router.php');

//require_once(ROOT.'/components/Db.php');

require_once(ROOT.'/components/Autoload.php');

// 4. Вызов Router

$router = new Router();

$router->run();

header.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="">

<meta name="author" content="">

<title>Главная</title>

<link href="/template/css/bootstrap.min.css" rel="stylesheet">

<link href="/template/css/font-awesome.min.css" rel="stylesheet">

<link href="/template/css/prettyPhoto.css" rel="stylesheet">

<link href="/template/css/price-range.css" rel="stylesheet">

<link href="/template/css/animate.css" rel="stylesheet">

<link href="/template/css/main.css" rel="stylesheet">

<link href="/template/css/responsive.css" rel="stylesheet">

<!--[if lt IE 9]>

<script src="js/html5shiv.js"></script>

<script src="js/respond.min.js"></script>

<![endif]-->

<link rel="shortcut icon" href="/template/images/ico/favicon.ico">

<link rel="apple-touch-icon-precomposed" sizes="144x144"

href="/template/images/ico/apple-touch-icon-144-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114"

href="/template/images/ico/apple-touch-icon-114-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72"

href="/template/images/ico/apple-touch-icon-72-precomposed.png">

<link rel="apple-touch-icon-precomposed" href="/template/images/ico/apple-touch-icon-57-precomposed.png">

</head><!--/head-->

<body>

<header id="header"><!--header-->

<?php if (isset($isAdmin) && $isAdmin == true ):?>

<a href="/admin/" class="adminPanel">Перейти в админ панель</a>

<?php endif;?>

<div class="header_top"><!--header_top-->

<div class="container">

<div class="row">

<div class="col-sm-6">

<div class="contactinfo">

<ul class="nav nav-pills">

<li><a href="#"><i class="fa fa-phone"></i> +71234567890</a></li>

<li><a href="#"><i class="fa fa-envelope"></i> Gilev@yandex.ru</a></li>

</ul>

</div>

</div>

<div class="col-sm-6">

<div class="social-icons pull-right">

<ul class="nav navbar-nav">

<li><a href="#"><i class="fa fa-facebook"></i></a></li>

<li><a href="#"><i class="fa fa-google-plus"></i></a></li>

</ul>

</div>

</div>

</div>

</div>

</div><!--/header_top-->

<div class="header-middle"><!--header-middle-->

<div class="container">

<div class="row">

<div class="col-sm-4">

<div class="logo pull-left">

<a href="index.html"><img src="/template/images/home/logo.png" alt=""/></a>

</div>

</div>

<div class="col-sm-8">

<div class="shop-menu pull-right">

<ul class="nav navbar-nav">

<li>

<a href="/cart/"><i class="fa fa-shopping-cart"></i> Корзина

(<span id="cart-count"><?php echo UserCart::countItems(); ?></span>)</a>

</li>

<?php if (User::isGuest()): ?>

<li><a href="/user/login/"><i class="fa fa-lock"></i> Вход</a></li>

<?php else: ?>

<li><a href="/cabinet/"><i class="fa fa-user"></i> Аккаунт</a></li>

<li><a href="/user/logout/"><i class="fa fa-unlock"></i> Выход</a></li>

<?php endif; ?>

<!-- <li><a href="/cabinet/"><i class="fa fa-user"></i> Аккаунт</a></li>-->

<!-- <li><a href="/user/login"><i class="fa fa-lock"></i> Вход</a></li>-->

<!-- <li><a href="/user/logout/"><i class="fa fa-unlock"></i> Выход</a></li>-->

</ul>

</div>

</div>

</div>

</div>

</div><!--/header-middle-->

<div class="header-bottom"><!--header-bottom-->

<div class="container">

<div class="row">

<div class="col-sm-12">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse"

data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div class="mainmenu pull-left">

<ul class="nav navbar-nav collapse navbar-collapse">

<li><a href="/">Главная</a></li>

<li class="dropdown"><a href="#">Магазин<i class="fa fa-angle-down"></i></a>

<ul role="menu" class="sub-menu">

<li><a href="/catalog/">Каталог товаров</a></li>

<li><a href="/cart/">Корзина</a></li>

</ul>

</li>

<li><a href="/contacts/">Контакты</a></li>

</ul>

</div>

</div>

</div>

</div>

</div><!--/header-bottom-->

</header><!--/header-->

footer.php

<script src="/template/js/jquery.js"></script>

<script src="/template/js/bootstrap.min.js"></script>

<script src="/template/js/jquery.scrollUp.min.js"></script>

<script src="/template/js/price-range.js"></script>

<script src="/template/js/jquery.prettyPhoto.js"></script>

<script src="/template/js/main.js"></script>

<script>

$(document).ready(function(){

// $(".item").first().addClass("active");

$(".add-to-cart").click(function () {

// alert('Товар добавлен');

var id = $(this).attr("data-id");

$.post("/cart/addAjax/"+id, {}, function (data) {

$("#cart-count").html(data);

});

return false;

});

});

</script>

<script src="/template/js/addToCart.js"></script>

</body>

</html>

login.php

<?php include ROOT . '/views/layouts/header.php'; ?>

<section>

<div class="container">

<div class="row">

<div class="col-sm-4 col-sm-offset-4 padding-right">

<?php if (isset($errors) && is_array($errors)): ?>

<ul>

<?php foreach ($errors as $error): ?>

<li> - <?php echo $error; ?></li>

<?php endforeach; ?>

</ul>

<?php endif; ?>

<div class="signup-form"><!--sign up form-->

<h2>Вход на сайт</h2>

<form action="#" method="post">

<input type="email" name="email" placeholder="E-mail" value="<?php echo $email; ?>"/>

<input type="password" name="password" placeholder="Пароль" value="<?php echo $password; ?>"/>

<input type="submit" name="submit" class="btn btn-default" value="Вход" />

</form>

</div><!--/sign up form-->

<br/>

<br/>

</div>

</div>

</div>

</section>

<?php include ROOT . '/views/layouts/footer.php'; ?>