Пояснительная записка (1195819), страница 4
Текст из файла (страница 4)
Далее по важности идет страница корзины, представленная на рисунке 2.5.
Рисунок 2.5 – Макет страницы корзины интернет-магазина
Здесь так же товары представлены строками с возможностью регулирования количества товара с помощью счетчика. Также имеется область с полной стоимостью корзины товаров и кнопкой оформления заказа. Неотъемлемой частью корзины является возможность ее очистить по нажатию кнопки.
На данном макете корзины показано в шапке, что пользователь вошел под логином Username, есть ссылка для выхода из аккаунта, а корзина показывает количество имеющихся в ней товаров.
Регистрацию и вход было принято решение поместить на одну страницу, показанную на рисунке 2.6.
Рисунок 2.6 – Макет страницы входа и регистрации интернет-магазина
Вход и регистрация представлены стандартными формами, основными полями которого являются логин и пароль, при этом логин должен быть уникальным. Имя используется для обращения в диалоговых окнах и как название личного кабинета. Адрес почты необходим для подтверждения заказов.
Остальные страницы являются преимущественно информационными и их макеты представлены в приложении А.
3 Разработка
Для написания web-приложения в первую очередь необходима база данных и локальный сервер. Было принято решение использовать
Denwer – набор дистрибутивов (локальный сервер WAMP) [21] и программная оболочка, предназначенные для создания и отладки сайтов и веб-приложений на локальном ПК под управлением ОС Windows. Также была создана база данных для возможности работы локальной копии интернет-магазина. ER-диаграмма базы данных [17] представлена на рисунке 3.1.
Рисунок 3.1 – ER-диаграмма базы данных интернет-магазина
3.1 Графический интерфейс
Написание графического интерфейса web-приложения сводится к верстке страниц и задания логики на языке сценариев. Верстка осуществляется на языках HTML и CSS.
Для создания главной страницы, макет которой представлен на рисунке 2.2 необходимо написание каскадных таблиц стилей. Полученные в ходе разработки код и таблицы шапки, подвала и бокового меню будут использованы для написания остальных страниц.
На примере написания шапки можно показать основные методы верстки и добавления интерактивных элементов на языке сценариев java script.
Макет шапки имеет вид, представленный на рисунке 3.2, состоит из двух основных областей размера ширины страницы.
Рисунок 3.2 – Макет шапки интернет-магазина
Для создания шапки необходимо добавить в код файла .html структурный тег <header> [6], который был включен в спецификацию HTML5 для деления страницы на логические области. Для деления шапки на области используется два класса CSS под тегом <div>: top-header, bot-header [5]. Код в файле style.css, описывающий эти два класса приведен в листинге 3.1.
| 1 | .top-header{ |
| 2 | position: relative; |
| 3 | width: 100%; height: 40px; |
| 4 | background-color: #303030; |
| 5 | left: 0px; top: 0px} |
| 6 | .top-header a{ |
| 7 | color: #E0E0E0; |
| 8 | } |
| 9 | .top-header a:hover{ |
| 10 | color: #3CB371; |
| 11 | } |
| 12 | .bot-header{ |
| 13 | position: relative; |
| 14 | width: 100%; height: 80px; |
| 15 | background-color: #202020; |
| 16 | left: 0px; top: 0px} |
| 17 | .bot-header a{ |
| 18 | color: #E0E0E0; |
| 19 | } |
| 20 | .bot-header a:hover{ |
| 21 | color: #3CB371; |
| 22 | } |
Листинг 3.1 – Код CSS, описывающий классы top-header и bot-header
Элементы входа/регистрации и информация о контактах также имеют свой класс, который определяет положение на шапке и смену цвета при наведении курсора. Два раскрывающихся списка располагаются над строкой поиска, которая в свою очередь следует сразу за логотипом. Корзина находится в правой части нижней области шапки. Логотип имеет формат jpg, так же, как и иконка корзины. Код CSS всех ссылок и логотипов представлен в листинге 3.2.
| 1 | .login{ |
| 2 | float:left; |
| 3 | color: #E0E0E0; |
| 4 | font-size:15px; |
| 5 | font-weight:500; |
| 6 | font-family: 'Open Sans', sans-serif; |
| 7 | position: relative; |
| 8 | left: 20px; top: 7px} |
| 9 | .info_header1{ |
| 10 | float:left; |
| 11 | color: #E0E0E0; |
| 12 | font-size:15px; |
| 13 | font-weight:500; |
| 14 | font-family: 'Open Sans', sans-serif; |
| 15 | position: absolute; |
| 16 | z-index:1; |
| 17 | left: 330px; top: 7px} |
| 18 | .info_header2{ |
| 19 | float:left; |
| 20 | color: #E0E0E0; |
| 21 | font-size:15px; |
| 22 | font-weight:500; |
| 23 | font-family: 'Open Sans', sans-serif; |
| 24 | position: absolute; |
| 25 | z-index:1; |
| 26 | left: 450px; top: 7px} |
| 27 | .info_header3{ |
| 28 | text-align: right; |
| 29 | float:right; |
| 30 | color: #E0E0E0; |
| 31 | font-size:12px; |
| 32 | font-weight:500; |
| 33 | font-family: 'Open Sans', sans-serif; |
| 34 | position: relative; |
| 35 | right:20px; top: 2px} |
| 36 | .logo{ |
| 37 | display:inline-block; |
| 38 | cursor:pointer; |
| 39 | position: relative; |
| 40 | padding: 6px; |
| 41 | margin-left: 70px;} |
| 42 | .spoiler a{ |
| 43 | font-size: 15px; |
| 44 | color: #E0E0E0; |
| 45 | text-decoration: none; |
| 46 | } |
| 47 | .spoiler:hover { |
| 48 | color: #3CB371; |
| 49 | cursor: pointer; |
| 50 | } |
| 51 | .spoiler-text { |
| 52 | margin: 0px 0px; |
| 53 | padding: 8px; |
| 54 | font-size: 15px; |
| 55 | color: #E0E0E0; |
| 56 | background-color: rgba(48, 48, 48, 0.7); |
| 57 | } |
| 58 | .cart{ |
| 59 | text-align: right; |
| 60 | float:right; |
| 61 | color: #E0E0E0; |
| 62 | font-size:30px; |
| 63 | font-weight:500; |
| 64 | font-family: 'Open Sans', sans-serif; |
| 65 | display:inline-block; |
| 66 | cursor:pointer; |
| 67 | position: relative; |
| 68 | padding-top: 20px; |
| 69 | margin-right: 70px} |
| 70 | .search{ |
| 71 | position: absolute; |
| 72 | left: 330px; |
| 73 | top: 0px; |
| 74 | } |
Листинг 3.2 – Код CSS, описывающий элементы шапки
Для создания раскрывающегося списка, представленного на рисунке 3.3, необходимо подключение библиотеки jquery [13] и использование скриптов на языке java script [10].
Рисунок 3.3 – Макет шапки с раскрытыми виджетами
Код раскрывающегося списка по клику представлен в листинге 3.3.
| 1 | </script><script type="text/javascript"> |
| 2 | jQuery(document).ready(function(){ |
| 3 | jQuery('.spoiler-text').hide() |
| 4 | jQuery('.spoiler').click(function(){ |
| 5 | jQuery(this).toggleClass("folded").toggleClass("unfolded").next().toggle() |
| 6 | }) |
| 7 | }) |
| 8 | </script> |
Листинг 3.3 – Код раскрывающегося списка на java scrip
Также были созданы классы .spoiler-text и .spoiler в файле style.css для соответствия стиля интерактивного элемента общему (листинг 3.2). Полученная шапка представлена на рисунке 3.4.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
