Пользователю предоставляется ссылка, которая дает возможность добавить выбранную деталь в тележку. На этапе работы с тележкой можно произвести окончательный расчет и покинуть магазин.
4.4.2 Разработка приложения администратора магазина
Данное приложение предназначено для выполнения административных функций в магазине. При этом приложение выполняется на сервере, а пользователь управляет им через web-интерфейс.
Чтобы начать администрировать магазин, необходимо авторизоваться с правами администратора. После авторизации, для администратора предоставляется несколько отличная версия пользовательского интерфейса сайта. Администратор по-прежнему будет иметь возможность просматривать категории и автодетали, но вместо доступа к покупательской тележки он может переходить к определенной детали или категории, а затем редактировать либо удалять её.
На рисунке 4.3 показан интерфейс администратора.
Разработка сценариев, одновременно пригодных как для обычных пользователей, так и для администратора, позволяет сэкономить время трудозатраты.
5. Описание интерфейсов сайта
5.1 Описание интерфейса приложения администратора магазина
Интерфейс администратора требует чтобы пользователь входил в систему через сценарий авторизации, который будет выводить меню администрирования.
Данная страница выводится в случае успешного прохождения процедуры авторизации. Она содержит ссылки на добавление товара, редактирование товара, смены пароля и т.д.
В самом начале его работы анализируется входные параметры, если они отсутствуют, то им присваиваются нулевые значения, а переменной которая отвечает за выбор данных которые будут отображаться в окне браузера присваиваются значение вывод каталога. При нажатие на Наименование каталога, Наименование товара, Добавить, Удалить, Редактировать и других кнопок, переменной отвечающей за выбор данных для отображения и выбор действия производимого над каталогом будут присвоены соответствующие значения.
При выводе каталога переменной $what_print присваивается значение «print_catalog».
В зависимости от производимых операций переменной $action присваиваться следующие значений «add_catalog», «del_catalog».
При добавление каталога используется следующий шаблон
<link rel= «stylesheet» type= «textcssform>
«%CURRENT_CATALOG%» заменяется на ID каталога в котором создается новый. После нажатия кнопки «Добавить» в скрипт передаются переменные для создания нового каталога.
Вывод списка продуктов.
При выводе списка продуктов переменной $what_print присваивается значение «print_product».
В зависимости от производимых операций переменной $action присваиваться следующие значений «add_product», «del_product», «edit_product».
Добавление товаров. На данной странице происходит добавление товаров. Здесь необходимо ввести информацию о товаре.
При добавление нового товара используется следующий шаблон
<link rel= «stylesheet» type= «textcssform-data»>
Название<br>
<input class= «smile_inp» name= «name» type= «text»><br>
Цена<br>
<input class= «smile_inp» name= «cost» type= «text»><br>
Фото<br>
<input class= «smile_inp» type= «file» name= «imgfile»><br>
<input type = «hidden» name = «id_catalog»
value = «%CURRENT_CATALOG%»"><br>
<input type= «submit» name = «upload» value = «Выполнить»><br>
< удаление товаров. Здесь можно отредактировать информацию о товаре или вовсе удалить его.
При редактирование свойств товара используется следующий шаблон
<link rel= «stylesheet» type= «textcssspan><td><td>
<input class= «smile_inp» name= «id_%ID%» type= «text» value = «%VALUE%»>
<tr>
<table>
<input type = «hidden» name = «catalog» value = «%CURRENT_CATALOG%»>
<input type = «hidden» name = «ID_product» value = «%PRODUCT%»>
<input type= «submit» name = «save_option» value = «Сохранить»><br>
<css» href=»..catalog.css»>
<form>
<input class= «smile_inp» name= «name_option» type= «text»>
value = «%CURRENT_CATALOG%»>
<input type = «hidden» name = «action» value = «add_option»>
<input type = «hidden» name = «what_print» value = «print_option»>
<br>
<input type= «checkbox» name= «show_on_top» value= «1»>
Показывать в списке товаров<br>
<input type= «submit» value = «Выполнить»>
<input class= «smile_inp» name= «name_option»
type= «text» value= "%VALUE%»>
<input type = «hidden» name = «action» value = «edit_option»>
<input type = «hidden» name = «id_option» value = «%ID_OPTION%»>
<input type= «checkbox» name= «show_on_top»
value= «1»%SHOW_ON_TOP%> Показывать в списке товаров<br>
</form>
«%VALUE%» заменяется на название выбранной для редактирования опции.
«%CURRENT_CATALOG%» заменяется на ID каталога для которого создается новые свойство.
«%ID_OPTION%» заменяется на ID выбранной для редактирования опции.
После нажатия кнопки «Выполнить» в скрипт передаются переменные для редактирования свойства.
При выполнение скрипта производятся следующие действия:
- проверяется зарегистрирован ли пользователь в системе. В случает отрицательного результата выводиться ошибка и выполнение скрипта прекращается.
- проверяем на существование необходимых переменных, в случае их отсутствия присваиваются значения определенные по умолчанию.
- проверяется существование переменной $action, если переменная существует то выполняется то или иное действие над каталогом в зависимости от значения переменной. Если она не существует скрипт переходит к выполнению следующего пункта.
- в зависимости от значения переменной $what_print скрипт генерирует содержание html-страницы.
5.2 Описание интерфейса приложения клиента магазина
При вводе в строке браузера URL магазина - пользователь попадает на витрину магазина. Данная страница представлена на рисунке 5.10.
Рисунок 5.10 - Главная страница магазина.
Находясь на этой странице - пользователь может ознакомиться со списком категорий.
Рассмотрим работу скрипта index.php. To что выводится в окно браузера, при запуске этого скрипта, показано на рис 5.10. При первом запуске скрипта выводиться страница приветствия.
В самом начале его работы регистрируется сессия пользователя и удаляются старые сессии пользователей. Далее проверяется наличие переменной отвечающей за вы выбор информации выводимой в окне браузера, если она отсутствует, ей присваиваются значения для вывода страницы приветствия. В зависимости от выбора вкладки переменной $action будут присвоены значения для вывода каталога или корзины.
Теперь рассмотрим действия подробно.
Рисунок 5.11 - Список каталогов
Для вывода списка каталогов используется функция
show_catlist, ее листинг приведен ниже:
Код HTML шаблона вписан прямо в код скрипта.
В ходе выполнения скрипта следующий текст будет заменен:
%ACTION% будет заменен на «catlist» или «catalog» в зависимости от действия производимого при нажатии на данную ссылку.
%ID_CATALOG% будет заменен на ID каталога.
%NAME% будет заменен на имя каталога
%CURRENT% будет заменен на ID текущего каталога
Страница со списком деталей представлена на рисунке 5.12.
Рисунок 5.12 - Страница со списком деталей.
Со страницы со списком детали выбранной категории, можно щелкнув по ссылке, перейти на станицу просмотра сведений о выбранной детали.
Для вывода списка товаров используется функция
show_catalog
Код HTML шаблона подгружается из файла catalog.html. Который приведен в приложении листинг 1.3
%NAME_OF_PRODUCT% будет заменен на наименование товара
%ID_PRODUCT% будет заменен на ID товара
%COST% будет заменен на цену товара
%PIC% будет заменен на адрес рисунка с фотографией товара
%MAIN_OPTION% будет заменен на список опций которые были отмечены как показываемые в списке товаров. Для создания HTML кода со списком опций используется функция gen_option. Она создает список свойств используя SQL запрос:
select prod_option. Name, all_prod_option. Value
from prod_option
inner join all_prod_option
on prod_option.ID=all_prod_option.ID_option
and ID_product = $id_product
where ID_catalog = $id_catalog
Страница просмотра сведений о детали показана на рисунке 5.13. Также на этой странице находится ссылка добавления выбранного товара в корзину.
Рисунок 5.13 - Страница просмотра сведений о детали и добавление ее в корзину
Для вывода карточки товара используется функция
Страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9
