Проектирование интерфейса пользователя
Макет сайта разрабатывался в графическом редакторе Adobe Photoshop CS5, верстка html-документов производилась в среде разработки phpDesigner 2007. Сайт написан с использованием model-view концепции, в модели исполняется программный код, во view генерируется html-документ. На рисунке 4 представлена главная страница сайта дилера по продаже автомобилей.
Рисунок 4. Дизайн сайта
На рисунке 5 показана диаграмма интерфейса для работы с поставщиком: добавление поставщиков, составление договоров, оформление заказов на поставку продукции, выписка счетов и т.д.
Диаграммы интерфейсов
Рисунок 5. Диаграмма интерфейса для работы с поставщиком
На рисунке 6 отображена диаграмма интерфейса клиента.
Рисунок 6. Диаграмма интерфейса клиента
Примеры интерфейса
Ниже на рисунке 7 показан пример формы для добавления заказа у поставщика.
Рисунок 7. Форма для добавления заказа
На рисунке 8 изображен список всех заказов с возможностью фильтра по оплате, отгрузке, дате оформления и дате выполнения. Так же список можно вывести, предварительно отсортировав его.
Рисунок 8. Список заказов с фильтром
Примеры выполнения запросов и выпуска отчетов
На рисунке 9 изображен отчет по заказу. В нем указываются информация о сторонах, которые сделали заказ, а так же список заказанных товаром со стоимостью с учетом НДС и без НДС и с количеством заказанный товаров. Внизу выводится итоговая сумма заказа и дата оформления с датой оплаты.
Рисунок 9. Пример выпуска отчета по заказу
Пример запроса приведен на рисунке 10. В фильтре указаны параметры: товар оплачен, товар отгружен, промежуток времени оформления и выполнения заказов. Сортировка по дате выполнения в обратном порядке.
Рисунок 10. Пример запроса
Руководство пользователя по работе с ипк
Интерфейс ИПК отличается удобством и простотой. Форма состоит из привычных элементов, которые встречаются в сети Интернет. Поэтому работа с данной системой не составит труда рядовым пользователям. Ниже приведена краткая инструкция для работы.
Навигация
Панель навигации расположена в левой части страницы и выглядит так как показано на рисунке 12. Навигация содержит ссылки на разделы Каталог товаров, Поставщик, Договор и заказ, Склад, Клиенты, а так же кнопку для выхода. В дальнейшем для перехода между разделами в панели администратора будем пользоваться этой панелью навигации. В некоторых разделах размещена дополнительная панель навигации. Например, в разделе Договор и заказ есть дополнительная панель навигации, которая содержит ссылки на подразделы Договора, Заказы и Счета.
Рисунок 11. Форма для входа
Рисунок 12. Панель навигации
Авторизация
Для входа в панель администратора необходимо пройти авторизацию. Для входа нужно использовать логин и пароль администратора. Форма для входа показана на рисунке 11.
После ввода логина и пароля нажмите кнопку «Войти». Если данные не корректны, то система выдаст ошибку, если все правильно, то Вы попадете на главную страницу администратора (рисунок 13).
Рисунок 13. Главная страница администратора
Поставщик
Для начала необходимо добавить поставщика. Нажмите на панели навигации (рисунок 12), которая расположена в левой части страницы, на ссылку «Поставщик». Перед Вами появится список поставщиков, если они были введены ранее. Для добавления нового поставщика нажмите на ссылку «+ Добавить поставщика». Перед Вами появится форма для добавления (рисунок 14).
Рисунок 14. Форма для добавления нового поставщика
Укажите необходимую информацию (название, адрес, ФИО директора и бухгалтера, банковские реквизиты). Далее нажмите на кнопку «Добавить», и если данные введены правильно, то Вы попадете обратно в список поставщиков, но уже с введенной Вами новой записью. Для редактирования данных просто щелкните по названию поставщика, для удаления выделите запись флажком справа (выделять можно сразу несколько записей) и нажмите на кнопку «Удалить» под списком. Процедуры добавления, редактирования и удаления записей далее идентичны, поэтому нет смысла их описывать.