Описание пользовательского интерфейса
Для сайта «Стилендс» в Интернете был скачан шаблон сайта. В ходе работы, данный шаблон редактировался и видоизменялся под каждую конкретную страницу. Структура каскадных таблиц стиля приведена в Приложении3.
Сайт «Стилендс» состоит из 5 основных частей:
· Шапка сайта;
· Меню навигации;
· Основное содержание страницы;
· Подвал;
· Левая навигационная колонка.
Шапка сайта представляет собой логотип, при нажатии на который, пользователь с любой страницы попадает на стартовую страницу сайта. Внешний вид шапки сайта показан на рисунке 3.1:
Рисунок3.1 – Шапка сайта и навигационная панель
Меню сайта содержит шесть пунктов, переходя по ссылкам которых, пользователь попадает на определённые страницы: как купить, гарантия, доставка, о магазине, контакты, мой кабинет.
Основное содержание расположено по центру страницы. На главной странице располагается краткая информация о новинках в виде прокручиваемого списка товаров. Внешний вид главной страницы представлен на рисунке 3.2:
Рисунок3.2 – Главная страница сайта
Так же на этой же странице спустившись вниз, мы увидим Каталог и слева пункты меню для поиска нужных товаров. Выбрав какой-то конкретный пункт, пользователь попадает на страницу со списком необходимых товаров. Внешний вид страницы с каталогом представлен на рисунке 3.3:
Рисунок3.3 – Каталог товаров
На вкладке «Как купить» располагается описание процедуры покупки товара. В частности оформление и подтверждение заказа
На вкладке «Доставка» написаны правила доставки до клиента товаров.
На странице «Контакты», пользователь может ознакомиться с телефоном и адресом расположения магазина, так же просмотреть эту область на карте. И здесь же есть форма «задать вопрос».
На вкладке «Мой кабинет» находится персональный раздел пользователя. Здесь можно узнать о текущем состоянии корзины и изменить при необходимости регистрационные данные.
В подвале сайта размещена информация об авторских правах правообладателя сайтом, а так же ссылки на сообщества в различных социальных сетях.
Страница регистрации позволяет пользователю зарегистрироваться на сайте «Стилендс», для оформления заказа. При совершении двух покупок пользователь получает право на скидку в 5% при совершении следующей. Также получить данную скидку можно при любом едино разовом заказе, превышающем сумму в 1000 рублей. Страница содержит форму с 6 полями и одной кнопкой. Форма проверяется посредством обработчика событий написанного на клиентском языке программирования JavaScript. При некорректном заполнении какого-либо поля регистрация не происходит и выдаётся сообщение о том, что требуется исправить. В случае успешной регистрации на электронный адрес пользователя приходит сообщение со ссылкой на подтверждение регистрации.
Страница авторизации позволяет пользователю зайти под своим аккаунтом на сайт «Стилендс». Данная страница содержит форму с двумя полями, в одно вводится логин пользователя, в другое – пароль, и одной кнопкой «вход». При корректном вводе данных и нажатии кнопки, пользователь попадает на главную страницу, в ином случае выводится сообщение, предупреждающее об ошибке. Код регистрации нового клиента приведён в Приложении 1.
В корзине находятся выбранные пользователем товары. При этом существует возможность удалить оттуда лишнее. При нажатии кнопки «Оформить заказ», открывается окно подтверждения заказа. Там пользователь сверяет контактные данные и ещё раз количество товара. После нажатия кнопки «подтвердить», менеджеру по продажам высылается на электронный адрес письмо с заказом. Форма подтверждения заказа показана на рисунке 3.4:
Рисунок 3.4 –Подтверждение заказа в корзине пользователя
Администраторчтобы проверить и обработать заказы, должен зайти на сайт под своим паролем. Далее зайти в раздел Администрирование, магазин и заказы. Здесь он увидит список заказов и получателя, как показано на рисунке 3.5:
Рисунок 3.5 – Обработка заказа администратором
Каждый, кто заполнял заявку на заказ, оставлял номер телефона, по которому администратор свяжется с клиентом для уточнения информации.Далее информация предоставляется курьеру для доставки.Установка программного обеспечения.
Для того чтобы сайт «Стилендс» был доступен в интернете и имел корректное отображение, на сервере необходимо установить следующее ПО:
· Apache HTTP-сервер;
· Интерпретатор PHP;
· Система управления базами данных MySQL5;
· Система управления контентом (CMS Joomlav. 14.5).
Всё необходимое программное обеспечение предустанавливается после покупки хостинга.
Каждому сайту для его отображения в сети Интернет необходим хостинг, то есть место на удаленном сервере, куда владелец сайта перекачает все созданные файлы, и где они будут храниться. Когда посетитель обратится к сайту, то браузер отобразит сайт так, как его видели разработчики на локальном компьютере, хотя все файлы находятся далеко.
В настоящее время наиболее выгодным по отношению цена-качество является хостинг с поддержкой web-сервера Apache, языка PHP и СУБД MySQL. Данная связка очень часто использоваться под управлением ОС FreeBSD, в связи с чем, услуги хостинга гораздо ниже по стоимости по сравнению с хостингом ОС семейства Windows.
Для работы системы был выбран XAMPP (v. 3.2.1.) – кроссплатформенная сборка веб-сервера, содержащая Apache, MySQL, интерпретатор скриптов PHP, язык программирования Perl и большое количество дополнительных библиотек, позволяющих запустить полноценный веб-сервер, характерный надёжностью, устойчивостью и производительностью.
Для установки XAMPP необходимо скачать всего один файл формата zip, tar или exe, а компоненты программы не требуют настройки. Программа регулярно обновляется, для включения в состав новейших версий Apache/MySQL/PHP и Perl. Также XAMPP идет с множеством других модулей, включая OpenSSL и phpMyAdmin. Пользовательский интерфейс программы довольно прост. Самый лёгкий способ установить XAMPP — с помощью инсталлятора (примерно 100 МБ). После установки XAMPP можно найти в Пуск/Все программы/XAMPP. Чтобы запустить или отключить серверы используется XAMPP ControlPanel.
Процесс установки ПО производится посредством FTP-доступа к серверу. В качестве FTP-клиента на сервере находится FileZilla. Куда и переносятся файлы сайта «Стилендс».Чтобы начать загружать файлы, необходимо подключиться к веб-серверу по специальным данным, как показанно на рисунке 3.6.
Рисунок 3.6 – Подключение к хостингу по FTP
Далее, после успешного подключения к хостингу мы переносим все файлы нашего сайта в папку с названием нашего сайта на хостинге, то есть в папку с нашим доменом.
Теперь приступаем непосредственно к процессу установки Joomla.
Открываем наш сайт через браузер, и в нем мы автоматически попадаем в папку нашего сайта installation в файл index.php. Начинается установка CMSJoomla (см. рисунок 3.7)
Рисунок 3.7 –Установка Joomla
Здесь мы проходим все этапы, заполняем основную информацию как показано на рисунке 3.8. После окончания всей установки важно опять зайти на сайт через FTP и удалить папку installation, иначе при включении нашего сайта через браузер, мы опят попадем на страницу установки.
Рисунок 3.8 –Настройка сайта