План
Введение
1. Аналитический обор и постановка задачи
1.1 Аналитический обзор целевой аудитории
1.2 Анализ требований к сайту
1. Проектирование
1.3 Проектирование функций и архитектуры системы
1.4 Разработка интерфейса и структуры данных
2. Реализация
2.1 Реализация функций (исходные тексты с комментариями)
2.2 Реализация интерфейса (экранные формы и руководство по эксплуатации)
3. Тестирование
3.1 Методика тестирования
3.2 Результаты тестирования
Заключение
Список литературы
Введение
В наше время развитие Web- технологий достигло очень высокого уровня. Большинство населения нашей планеты имеют доступ в интернет, могут самостоятельно искать всю необходимую информацию. Многие организации рекламируют и предоставляют свои услуги в сети Интернет. Каждый желающий узнать о той или иной фирме или организации может зайти на сайт производителя, ознакомиться с предоставляемыми услугами, с их стоимостью, проконсультироваться со специалистами. Также непосредственно поставщики каких-либо товаров могут находить интересующие их фирмы, для сотрудничества с ними.
Целью моей ВКР является «Разработка системы взаимодействия с заказчиком для ФотоВидеоСтудии». Так как организация новая, разработка сайта позволит ей привлечь новых клиентов и предоставить им всю необходимую информацию о товарах и услугах организации.
Такая система должна быть максимально удобна для работы с ней, интерфейс понятен и удобен в использовании, оформление и дизайн должны быть выполнены в спокойных светлых тонах.
Использование такой системы дает такие возможности, как:
· Предоставление необходимой информации, включая контактные телефоны, адрес организации и часы работы;
· Обновление новостей компании
· Возможность оформить заказ или получить консультацию специалиста
При наличии такой системы организация может сэкономить время для работы с клиентами, предоставить информацию, которая доступна из любой точки Земли.
1. Аналитический обзор и постановка задачи
В век информационных технологий web-сайты нашли довольно широкое применение. С их помощью можно получить нужную информацию, скачать музыку, прочитать книгу, общаться с друзьями в социальных сетях. Многие фирмы используют сайты для рекламы и продажи своей продукции и своих услуг. Правильно сделанный сайт не только отразит успешность организации, но и привлечет клиентов к приобретению продукции или услуг организации, что не немаловажно для любой процветающей организации.
Для того, чтобы правильно сделать сайт, необходимо четко знать для каких целей он нужен. Сайты делятся на 5 групп, каждая и которых включает в себя разновидности сайтов.
1 группа – Информационные сайты
· Однотематические или разнотематические новостные сайты
· Информационные сайты
· Блоги
2 группа – Сайты корпоративной направленности
· Корпоративные сайты
· Сайты – визитки
· Сайты – портфолио
3 группа – Коммерческие сайты
· Сайт – витрина
· Промо – сайт
· Интернет – магазины
4 группа – Социальные проекты
· Форумы
· Социальные сети
5 группа – Различные веб-сервисы
· Каталоги
· Почтовые сервисы
· Поисковые системы
· Доски объявлений
· Сайты хостинги
Сайт может включать себя параметры различных видов и типов, так как всё зависит от целей создания сайта.
Наша система будет включать в себя параметры таких типов как:
· Сайты – визитки
Так называемые сайты – визитки, используются для рекламы какой-либо организации. Они не занимаются продажей продукции, а предоставляют информацию о ней.
· Сайты – продавцы
Такие сайты содержат контактную информацию организации, список товаров и услуг и их стоимость. Также сайт-продавец имеет функцию заказа или покупки товара.
· Сайты – портфолио
Сайты – портфолио направлены на более широкую целевую аудиторию. В отличие от сайта – визитки, они не только предоставляют информацию о товаре и услугах, но и представляют работы, выполненные организацией.
Основная задача подсистемы как сайта – продавца – работа с клиентами. Основной функцией является возможность оформить заказ, задать интересующий вопрос специалисту или найти контактную информацию для связи с организацией. Это значительно облегчит работу как самой организации, так и ее клиентам. Не нужно будет тратить время на дорогу, для того, чтобы узнать, когда и как осуществляется прием клиентов, какие услуги предоставляет организация, их стоимость. Для этого достаточно будет зайти на сайт и посмотреть всю необходимую информацию.
Как сайт – визитка подсистема будет рекламировать работу и привлекать клиентов. Будет представлена информация об услугах организации.
Для того, чтобы клиенты могли оценить работу организации, ее качество, на сайте будут представлены ранее выполненные работы. Эти параметры включает в себя сайт – портфолио.
Для реализации такой подсистемы поставлены следующие задачи:
1) Разработка удобного интерфейса
Интерфейс должен быть максимально удобным, понятным и простым в использовании. Главная страница должна содержать логотип организации, иметь краткую информацию о проекте, целях и задачах организации. Также на главной странице должно быть небольшое меню, состоящее из 4-5 пунктов, ссылки на свежие новости. Страницы сайта не должны содержать лишней информации, цветовая палитра выполнена в спокойных тонах.
2) Функция оформления заказа
Для того, чтобы клиент мог оформить заказ, будет реализована форма для заказа. Такая форма включает в себя следующие поля – фамилия, имя, отчество клиента, контакты для связи, выбор категории, наименование товара или услуги, количество штук.
3) Функция связи со специалистом
При необходимости задать какой-либо вопрос специалисту, можно связаться с ним по специальной форме. Такая форма будет содержать следующие поля: фамилия, имя, отчество клиента, контактная информация для связи, поле для вопроса.
На сайте должна находиться контактная информация – адрес офиса и номера телефонов, по которым можно связаться с представителями организации, часы работы.
При реализации подсистемы нужно учесть все поставленные задачи.
1.1 Аналитический обзор целевой аудитории
Любой организации важно, чтобы спрос на их продукцию и услуги рос. Правильно организованная реклама, способна привлечь клиентов и увеличить объем продаж. Но для того, чтобы правильно организовать рекламу, нужно понимать, кто будет пользоваться услугами организации, и на кого будет направлена реклама. В этом пункте проведем анализ целевой аудитории нашей организации.
Чтобы понять, какая группа людей будет входить в состав целевой аудитории, нужно знать, какие услуги предоставляет организация.
Организация «ФотоВидеоСтудия» предоставляет следующие услуги:
1. Съемка свадьбы
2. Студийная съёмка
3. Съёмка Love Story
4. Выездная видеосъемка
5. Рекламный ролик
6. Фото на паспорт
7. Оформление зала
8. Редактирование фотографии
9. Ламинирование документов
10. Печать фото и документов
Также организация занимается продажей сопутствующих товаров:
1. Фоторамки
2. Календари с вашим фото
3. Брелки с фото
4. Композиции из шаров
5. Подарочные сертификаты на фотосъемку
6. Фотоальбомы
Исходя из списка предоставляемых услуг и товаров, можно сделать вывод, что целевая аудитория достаточно широкая. В нее будут входить люди разных возрастов, так как спектр услуг разнообразен. Например, такой услугой как фото на паспорт могут пользоваться люди от 14 до 45 лет. Оформление зала может заказать достаточно большое количество людей, потому что оформить зал можно для любого мероприятия – день рождения, свадьба, выпускной и т.д.
Но не только клиенты могут входить в состав целевой аудитории. Поскольку организация занимается еще и продажей товаров, то посетителями сайта могут быть и поставщики тех или иных товаров.
Проанализировав предлагаемые услуги и товары, мы можем сделать вывод, что пользователями сайта могут быть как люди, которых интересуют предлагаемы услуги, так и поставщики определенных товаров.
1.2 Анализ требований к сайту
Сайт – это лицо компании. Зайдя на сайт, в первую очередь, посетитель будет оценивать дизайн сайта, навигацию, то, как размещена вся информация. Все это следует учесть при разработке нашей системы.
В этом пункте определим те требования, которым должен отвечать сайт.
Как было написано ранее, наш сайт будет включать в себя параметры трех типов сайтов – сайт-визитка, сайт-продавец, сайт-портфолио. Его основными задачами будет реклама организации, продажа товаров, представление ранее выполненных заказов, чтобы люди смогли по достоинству оценить работу организации.
Первое требование – правильное размещение информации. На главной странице сайта нужно разместить информацию о возможных акциях и новинках организации. Это привлечет внимание посетителя и он, возможно, захочет что-то приобрести.
Второе требование – удобная навигация. Самые важные функции должны находиться на виду, чтобы посетитель сразу мог найти все необходимое.
Третье требование – дизайн. Тона, в которых выполнен сайт, должны быть спокойными. Цвет и размер шрифта на сайте должен быть оптимальным, не раздражающим глаз. Если представленные на сайте картинки имеют небольшой размер, то должна быть функция их увеличения. Цвет ссылок должен отличаться от основного фона. Пользователь должен видеть, что перед ним находится ссылка.
Четвертое требование – масштабируемость. Сайт должен одинаково хорошо смотреться как на маленьких, так и на больших с разным разрешением мониторах.
Фотоцентр «Фокус» – http://fcfokus.ru/
Скриншот сайта представлен на рисунке 1.
Рис.1 Фотоцентр «Фокус»
На рисунке представлена главная страница сайта. Дизайн сайта разработан достаточно хорошо. Вся необходимая информация представлена на первой странице. Шрифт и картинки имеют оптимальный размер.
Недостатком сайта является навигация. Неудобное перемещение по станицам сайта.
Фотостудия «Формат» – http://format-foto.ru/information.html
Скриншот сайта представлен на рисунке 2.
Сайт оформлен по типу Сайта – портфолио. Навигация достаточно удобна, необходимая информация расположена на главной странице.
Недостатком является оформление. Белый шрифт на темном плохо воспринимаются для чтения.
Рис.2 Фотостудия «Формат»
При разработке нашей системы необходимо учесть все требования, рассмотренные в данном пункте.
2. Проектирование
Проектирование – важный этап в разработке не только сайтов, но и любых других программных проектов. Прежде чем что-то реализовывать, нужно знать, каким должен быть конечный результат.
Проектирование – это, своего рода, план реализации продукта. Он четко дает понять, как будет работать система, где будет расположены функциональные элементы и блоки с информацией.
Для начала нужно определить структуру сайта – расположение и взаимосвязь страниц сайта.
Существует три вида структур сайтов:
Линейная – при такой структуре все страницы расположены друг за другом, пользователь не имеет возможности произвольно переходить по страницам.
Древовидная – при древовидной структуре сайт имеет разделы и подразделы, по которым осуществляется переход к интересующей информации. Такой вид наиболее распространен.
Решетчатая – разработана по типу древовидной структуры, но имеет в своем составе функции перехода из одной части сайта на противоположную.
Для реализации нашей системы была выбрана древовидная структура – рисунок 3.
Рис.3 Обобщенная структура сайта
Главная страница – информация об организации.
Контактная информация – контакты организации и часы работы
Связь с администратором – пользователь может задать вопрос администратору сайта
Товары и услуги – предлагаемые товары и услуги и цены на них
Оформление заказа – страница для оформления заказа
Личный кабинет – страница для пользователя
Наши работы – ранее выполненные работы
Дальнейшее развитие функциональности сайта предполагает введение следующих ступеней иерархии, возможно и применение последовательных и решетчатых расширений.
2.1 Проектирование функций и архитектуры системы
сайт целевой аудитория интерфейс
Реализовывать нашу систему мы будем при помощи CMS WordPress.
CMS WordPress – это система управления содержимым сайта. Встроенный функционал ограничен, но эта CMS имеет возможность подключения пакетов расширений, что позволяет создавать такие серьезные интернет проекты, как интернет-магазины. В качестве СУБД WordPress использует MySQL. Сайты, реализованные при помощи WordPress, работают на всех известных браузерах без дополнительных настроек.
Архитектура нашей системы представлена на рисунке 4.
Рис.4 Архитектура системы
Главная цель создания нашей системы – работа с клиентами. За это будет отвечать функциональность «сайт-продавец».
Система будет содержать функцию «оформление заказа» и «связь с администратором».
«Оформление заказа» – форма для заполнения. Такая функция полезна не только для работников организации, но и для самих клиентов. Не нужно ехать в офис организации, чтобы узнать о предлагаемых услугах и ценах на них, всё можно будет просмотреть на сайте и заказать интересующий вид услуги или товар.
Данная форма содержит следующие поля:
ФИО клиента
Контакты – контактные данные, по которым можно связаться с клиентом
Товары – товар, который находятся в корзине
Стоимость – общая стоимость, на которую сделан заказ
Примечание – пожелания и примечания к заказу
Поля «ФИО клиента» и «Контакты» заполняются непосредственно или по регистрационным данным, идентифицированным при входе в личный кабинет.
Поле «Товары» заполняется автоматически по данным корзины.
Также в нашей системе будет реализована такая функция, как «связь с администратором». Если у посетителя появился какой-то вопрос, то он может задать его прямо на сайте организации, заполнив необходимую форму. Форма содержит следующие поля:
ФИО Клиента
Телефон
Вопрос клиента
«Корзина» – функция добавления товара в «корзину». Корзина будет отображаться при входе в личный кабинет. При просмотре каталога, понравившийся товар можно добавить в корзину. Добавленные товары удобно включать в заказ.
2.2 Разработка интерфейса и структуры данных
Клиент заходит на сайт, чтобы быстро найти интересующую его информацию. Поэтому очень важно разработать удобный интерфейс и расположить данные в правильном порядке.
Главная страница
На главной странице будет расположена информация о компании, о проводимых акциях и новинках. Также на ней будет присутствовать меню, ссылки на социальные сети и личный кабинет.
Рис.5 Главная страница
Наши работы
На данной странице будут расположены альбомы с работами организации. Также будет меню, ссылки на социальные сети.
Рис.6. Наши работы
Товары и услуги
В «товарах и услугах» будет приведен прайс-лист, форма для оформления заказа, форма «связь с администратором», ссылки на социальные сети.
Рис.7 Товары и услуги
Контакты
На странице «контакты» будут размещены часы работы организации и контакты для связи с организацией.
Рис.8 Контакты
Оформление заказа
Форма содержит поля для заполнения.
Рис.9 Оформление заказа
Связь с администратором
Форма содержит поля для заполнения.
Рис.10 Связь с администратором
3. Реализация
Система взаимодействия с заказчиком реализована на CMS WordPress.
CMS WordPress – это система управления содержимым сайта, реализована при помощи языка PHP, базы данных – MySQL. Данная платформа содержит стандартные темы для оформления сайта и плагины для расширения функций разработки.
Для реализации нашей системы была использована версия WordPress 4.4. Сustomizr – русифицированная тема, имеющая большое количество настроек. Такая тема подойдет для реализации как обычного блога, так и для создания интернет-магазина.
Плагины. Использованные в разработке системы:
WooCommerce – при помощи этого плагина были выполнены функции интернет-магазина: создание товара, категорий товаров, корзина и оформление заказа.
Contact form 7 – плагин формы обратной связи. Функция «Связь с администратором» реализована с помощью данного плагина.
Really Simple Captcha – используется для защиты сайта от спама. В форму обратной связи добавлена captcha – для того, чтобы убедиться, что пользователь реальный человек, а не робот.
iThemes Security – плагин для защиты нашего сайта от атак. Плагин выполняет следующие функции:
Сканирование сайта и мгновенное уведомление о слабых местах
Защита от множественного набора неправильных паролей
Обнаружение и блокировка различных атак на файловую систему и базы данных сайта
Huge IT Slider – плагин для создания слайдеров. Слайдшоу на главной странице сделано этим плагином.
3.1 Реализация функций (исходные тексты с комментариями)
Исходный код функции «связь с администратором»
Таблица 1 Исходный код функции «связь с администратором»
|
Исходный код |
Коментарии |
|
|
<p><a class=”fancybox-inline” href=”#contact_form_pop”>Связь с администратором</a></p> <div class=”wpcf7″ id=”wpcf7-f9-p2-o1″> <div class=”screen-reader-response”></div> <form action=”/web/shop/sample- =true#wpcf7-f9-p2-o1″ method=”post” class=”wpcf7-form” enctype=”multipart/form-data” novalidate=”novalidate”> <input type=”hidden” name=”_wpcf7″ value=”9″ /> <input type=”hidden” name=”_wpcf7_version” value=”3.8″ /> <input type=”hidden” name=”_wpcf7_locale” value=”ru_RU” /> <input type=”hidden” name=”_wpcf7_unit_tag” value=”wpcf7-f9-p2-o1″ /> <input type=”hidden” name=”_wpnonce” value=”557d666fff” /> </div> |
Код окна, в котором открывается форма связи с администратором |
|
|
<p>Ваше имя<br /> <span class=”wpcf7-form-control-wrap your-name”><input type=”text” name=”your-name” value=”” size=”40″ class=”wpcf7-form-control wpcf7-text wpcf7-validates-as-required” aria-required=”true” aria-invalid=”false” /></span> </p> <p>Ваш Email <br /> <span class=”wpcf7-form-control-wrap your-email”><input type=”email” name=”your-email” value=”” size=”40″ class=”wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email” aria-required=”true” aria-invalid=”false” /></span> </p> <p>Телефон <br /> <span class=”wpcf7-form-control-wrap tel-849″><input type=”tel” name=”tel-849″ value=”” size=”40″ class=”wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel” aria-invalid=”false” /></span></p> <p>Сообщение<br /> <span class=”wpcf7-form-control-wrap your-message”><textarea name=”your-message” cols=”40″ rows=”10″ class=”wpcf7-form-control wpcf7-textarea” aria-invalid=”false”></textarea></span> </p> <p>Прикрепить файл<br /> <span class=”wpcf7-form-control-wrap file-492″><input type=”file” name=”file-492″ value=”1″ size=”40″ class=”wpcf7-form-control wpcf7-file” aria-invalid=”false” /></span></p> <p>Картинка с кодом<br /> <input type=”hidden” name=”_wpcf7_captcha_challenge_captcha-46″ value=”1734945010″ /><img class=”wpcf7-form-control wpcf7-captchac wpcf7-captcha-captcha-46″ width=”60″ height=”20″ alt=”captcha” |
Код создания полей для заполнения |
|
|
src=”http://localhost/web/wp-content/uploads/wpcf7_captcha/1734945010.png” /></p> <p>Введите код с картинки<br /> <span class=”wpcf7-form-control-wrap captcha-46″><input type=”text” name=”captcha-46″ value=”” size=”40″ class=”wpcf7-form-control wpcf7-captchar” aria-invalid=”false” /></span></p> <p><input type=”submit” value=”Отправить” class=”wpcf7-form-control wpcf7-submit” /></p> |
Исходный код функции «корзина»
Таблица 2 Исходный код функции «корзина»
|
Исходный код |
Коментарии |
|
|
<form action=”<?php echo esc_url( wc_get_cart_url() ); ?>” method=”post”> <?php do_action( ‘woocommerce_before_cart_table’ ); ?> <table class=”shop_table shop_table_responsive cart” cellspacing=”0″> <thead> <tr> <th class=”product-remove”> </th> <th class=”product-thumbnail”> </th> <th class=”product-name”><?php _e( ‘Товар’, ‘woocommerce’ ); ?></th> <th class=”product-price”><?php _e( ‘Цена’, ‘woocommerce’ ); ?></th> <th class=”product-quantity”><?php _e( ‘Количество’, ‘woocommerce’ ); ?></th> <th class=”product-subtotal”><?php _e( ‘всего’, ‘woocommerce’ ); ?></th> </tr> </thead> <tbody> <?php do_action( ‘woocommerce_before_cart_contents’ ); ?> <?php foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) { $_product = apply_filters( ‘woocommerce_cart_item_product’, $cart_item[‘data’], $cart_item, $cart_item_key ); $product_id = apply_filters( ‘woocommerce_cart_item_product_id’, $cart_item[‘product_id’], $cart_item, $cart_item_key ); if ( $_product && $_product->exists() && $cart_item[‘quantity’] > 0 && apply_filters( ‘woocommerce_cart_item_visible’, true, $cart_item, $cart_item_key ) ) { ?> <tr class=”<?php echo esc_attr( apply_filters( ‘woocommerce_cart_item_class’, ‘cart_item’, $cart_item, $cart_item_key |
Реализация таблицы добавленных товаров. |
|
|
) ); ?>”> <td class=”product-remove”> <?php echo apply_filters( ‘woocommerce_cart_item_remove_link’, sprintf( ‘<a href=”%s” class=”remove” title=”%s” data-product_id=”%s” data-product_sku=”%s”>×</a>’, esc_url( WC()->cart->get_remove_url( $cart_item_key ) ), esc_attr( $product_id ), esc_attr( $_product->get_sku() ) ), $cart_item_key );?> </td> <td class=”product-thumbnail”> <?php $thumbnail = apply_filters( ‘woocommerce_cart_item_thumbnail’, $_product->get_image(), $cart_item, $cart_item_key ); if ( ! $_product->is_visible() ) { echo $thumbnail; } else { printf( ‘<a href=”%s”>%s</a>’, esc_url( $_product->get_permalink( $cart_item ) ), $thumbnail ); } ?> </td> <td class=”product-name” data-title=”<?php _e( ‘Товар’, ‘woocommerce’ ); ?>”> <?php if ( ! $_product->is_visible() ) { echo apply_filters( ‘woocommerce_cart_item_name’, $_product->get_title(), $cart_item, $cart_item_key ). ‘ ’; } else { echo apply_filters( ‘woocommerce_cart_item_name’, sprintf( ‘<a href=”%s”>%s</a>’, esc_url( $_product->get_permalink( $cart_item ) ), $_product->get_title() ), $cart_item, $cart_item_key ); } // Meta data echo WC()->cart->get_item_data( $cart_item ); // Backorder notification if ( $_product->backorders_require_notification() && $_product->is_on_backorder( $cart_item[‘quantity’] ) ) { echo ‘<p class=”backorder_notification”>’. esc_html__( ‘доступно ‘, ‘woocommerce’ ). ‘</p>’; } ?> </td> |
Реализация кнопки «Удалить товар» |
|
|
<td class=”product-price” data-title=”<?php _e( ‘Цена’, ‘woocommerce’ ); ?>”> <?php echo apply_filters( ‘woocommerce_cart_item_price’, WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key ); ?> </td> <td class=”product-quantity” data-title=”<?php _e( ‘Количество’, ‘woocommerce’ ); ?>”> <?php if ( $_product->is_sold_individually() ) { $product_quantity = sprintf( ‘1 <input type=”hidden” name=”cart[%s][qty]” value=”1″ />’, $cart_item_key ); } else { $product_quantity = woocommerce_quantity_input( array( ‘input_name’ => “cart[{$cart_item_key}][qty]”, ‘input_value’ => $cart_item[‘quantity’], ‘max_value’ => $_product->backorders_allowed() ? ”: $_product->get_stock_quantity(), ‘min_value’ => ‘0’ ), $_product, false ); } echo apply_filters( ‘woocommerce_cart_item_quantity’, $product_quantity, $cart_item_key, $cart_item ); ?> </td> <td class=”product-subtotal” data-title=”<?php _e( ‘Всего’, ‘woocommerce’ ); ?>”> <?php echo apply_filters( ‘woocommerce_cart_item_subtotal’, WC()->cart->get_product_subtotal( $_product, $cart_item[‘quantity’] ), $cart_item, $cart_item_key ); ?> </td> </tr> <?php }} do_action( ‘woocommerce_cart_contents’ ); ?> <tr> <td colspan=”6″ class=”actions”> <?php if ( wc_coupons_enabled() ) { ?> <div class=”coupon”> <label for=”coupon_code”><?php _e( ‘Купон’, ‘woocommerce’ ); |
||
|
?>:</label> <input type=”text” name=”coupon_code” class=”input-text” id=”coupon_code” value=”” placeholder=”<?php esc_attr_e( ‘Код купона’, ‘woocommerce’ ); ?>” /> <input type=”submit” class=”button” name=”apply_coupon” value=”<?php esc_attr_e( ‘Применить купон’, ‘woocommerce’ ); ?>” /> <?php do_action( ‘woocommerce_cart_coupon’ ); ?> </div> <?php } ?> |
||
|
<input type=”submit” class=”button” name=”update_cart” value=”<?php esc_attr_e( ‘Обновить корзину’, ‘woocommerce’ ); ?>” /> <?php do_action( ‘woocommerce_cart_actions’ ); ?> <?php wp_nonce_field( ‘woocommerce-cart’ ); ?> </td> </tr> <?php do_action( ‘woocommerce_after_cart_contents’ ); ?> </tbody> </table> <?php do_action( ‘woocommerce_after_cart_table’ ); ?> </form> <div class=”cart-collaterals”> <?php do_action( ‘woocommerce_cart_collaterals’ ); ?> </div> <?php do_action( ‘woocommerce_after_cart’ ); ?> |
Реализация кнопки «Обновить корзину» |
Исходный код «оформление заказа»
Таблица 3 Исходный код функции «оформление заказа»
|
Исходный код |
Коментарии |
|
|
<form name=”checkout” method=”post” class=”checkout woocommerce-checkout” action=”<?php echo esc_url( wc_get_checkout_url() ); ?>” enctype=”multipart/form-data”> <?php if ( sizeof( $checkout->checkout_fields ) > 0 ): ?> <?php do_action( ‘woocommerce_checkout_before_customer_details’ ); ?> <div class=”col2-set” id=”customer_details”> <div class=”col-1″> <?php do_action( ‘woocommerce_checkout_billing’ ); ?> </div> |
Реализация формы заполнения контактных данных |
|
|
<div class=”col-2″> <?php do_action( ‘woocommerce_checkout_shipping’ ); ?> </div> </div> <?php do_action( ‘woocommerce_checkout_after_customer_details’ ); ?> <?php endif; ?> |
Реализация формы дополнительной информации |
|
|
<h3 id=”order_review_heading”><?php _e( ‘Ваш заказ’, ‘woocommerce’ ); ?></h3> <?php do_action( ‘woocommerce_checkout_before_order_review’ ); ?> <div id=”order_review” class=”woocommerce-checkout-review-order”> <?php do_action( ‘woocommerce_checkout_order_review’ ); ?> </div> <?php do_action( ‘woocommerce_checkout_after_order_review’ ); ?> </form> <?php do_action( ‘woocommerce_after_checkout_form’, $checkout ); ?> |
Реализация таблицы товаров из корзины |
3.2. Реализация интерфейса (экранные формы и руководство по эксплуатации)
Главная страница содержит основное меню сайта (реализован доступ к остальным страницам сайта)
Рис.11 Главная страница
Для перехода на нужную нам страницу нужно кликнуть мышкой по её названию.
На странице «Наши работы» размещены альбомы с работами компании. Для того, чтобы просмотреть все фотографии альбома, необходимо кликнуть по нему.
Рис.12 Наши работы
Пункт «Мой профиль» имеет выпадающий список, который содержит ссылки на «Моя страница» и «Корзина».
«Моя страница» содержит данные клиента и возможность сменить пароль. «Корзина» содержит товары, которые понравились клиенту.
Рис.13 Моя страница
Рис.14 Корзина
Пункт «Магазин» содержит выпадающий список с ссылками на страницы товаров. Для того, чтобы перейти на нужную страницу, достаточно кликнуть по ней мышкой.
Рис.15 Магазин
Страница «Контакты» содержит информацию о часах работы компании и контакты для связи.
Рис 16. Контакты
4. Тестирование
Очень важный этап при разработке любого программного продукта – это его тестирование. Тестирование ПО – процесс проверки работы продукта, выявление ошибок в работе. Главные цели тестирования:
– демонстрация разработчикам и заказчикам соответствия программы требованиям
– выявление ситуаций, в которых программа ведет себя неправильно или не соответствующим спецификации
Различают следующие виды тестирования:
Функциональное тестирование – проверяет, все ли функции, реализованные в программном продукте работают правильно, соответствуют ли функции заявленным требованиям. Проверяются все функции как по отдельности, так и в комплексе.
Нагрузочное тестирование – данный вид тестирования проверяет работоспособность сайта при большом количестве посетителей. Такое тестирование проверяет как будет себя вести система при больших нагрузках, время отклика функций.
Usability тестирование – при таком тестировании оценивается удобство использования программного продукта. Для такого тестирования привлекаются потенциальные клиенты, которые будут работать непосредственно с самим продуктом. Благодаря этому тестированию оценивается то, как пользователь воспринимает продукт, сколько времени он затрачивает на какое-либо действие, с какими проблемами он сталкивается и может ли он их решить самостоятельно.
Для тестирования нашей системы воспользуемся функциональным тестированием.
4.1 Методика тестирования
Как было написано ранее, для тестирования нашей системы будем использовать функциональное тестирование.
Функциональное тестирование
Функциональное тестирование устанавливает соответствие между ожидаемым и действительным поведением программного продукта. Для того, чтобы определить как будет вести себя система, будет имитироваться работу с программным продуктом, выполнение реализованных функций.
Имитация работы системы её потенциальным потребителем позволит установить степень функциональной пригодности программного продукта и соответствие заданным требованиям.
4.2 Результаты тестирования
Результаты функционального тестирования:
Добавление понравившегося товара в корзину
Рис.17 Добавление товара в корзину
Как видно на картинке товар добавился в корзину и появилась ссылка для перехода в корзину. Переходим по ссылке.
Рис.18 Корзина
При переходе в «Корзину» видим, что товар действительно добавился. Количество товара можно менять, при этом сумма автоматически поменяется.
Меняем количество товара и нажимаем на кнопку «обновить корзину».
Рис.19 Изменение количества товара
Как видно на картинке выше, количество товара изменено, сумма пересчитана.
Функция добавления товара в корзину и изменение его количества работают правильно.
Протестируем функцию «оформление заказа».
Нажимаем на кнопку «перейти к оформлению заказа»
Рис.20 Оформление заказа
Поля «Имя», «Телефон» и «Email» заполняются автоматически по регистрационным данным. Оплата производится наличными. Нажимаем кнопку «Заказать».
Рис.21 Заказ оформлен
Заказ оформлен. Показан номер заказа, его дата, сумма и оплата.
Далее переходим на «Мою страницу» для просмотра заказа.
Рис.22 Моя страница-просмотр заказа
Видим, что заказ отобразился на странице. Для того, чтобы просмотреть подробности, нажимаем на кнопку «Посмотреть».
Рис.23 Просмотр заказа
На странице просмотра заказа видим его номер, дату и состояние.
Функция «оформление заказа» работает правильно.
Протестируем функцию «Связь с администратором». Заполняем необходимые поля и нажимаем кнопку «Отправить»
Рис. 24 Связь с администратором
После отправки на экране появляется сообщение об отправке.
Рис. 25 Сообщение отправлено
Функция «Связь с администратором» работает правильно.
В ходе функционального тестирования видим, что все функции работают правильно.
Заключение
В выполненной выпускной квалификационной работе была поставлена задача реализовать «Систему взаимодействия с заказчиком». Система должна отвечать определенным требованиям:
В системе должны быть реализованы функции «Оформление заказа», «Связь с администратором», «Корзина».
Интерфейс программного продукта должен быть достаточно простым и понятным в использовании. Цвета не должны быть слишком яркими, чтобы информация легко воспринималась при просмотре.
Размещение информации – вся информация должна быть правильно отображена на страницах сайта: вся важная информация должна быть на виду, чтобы пользователь быстро ее находил.
Удобная навигация – меню должно быть достаточно простым и понятным пользователю.
Поставленные задачи и требования выполнены. Реализованные функции протестированы и пригодны к использованию.
Список литературы
Виды сайтов [Электронный ресурс]: – Режим доступа: http://webmastermix.ru/raznoe/273-vidy-i-tipy-sajtov.html
Виды структур сайтов [Электронный ресурс]: – Режим доступа: http://sait-sozdat.ru/etap-sozdanie-sait/proekt-sait/sait-struktura-osnovnye-vidy.php
WordPress [Электронный ресурс]: – Режим доступа: https://ru.wikipedia.org/wiki/WordPress
Информация о плагинах [Электронный ресурс]: – Режим доступа: https://ru.wordpress.org/plugins/
Тестирование сайтов [Электронный ресурс]: – Режим доступа: http://fresh-design.com.ua/blog/technology/website-testing
JMeter [Электронный ресурс]: – Режим доступа: https://ru.wikipedia.org/wiki/JMeter
