пз (1221116), страница 4

Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 4)

<div id="userinfo">

<div class="pers-cab"><a href="/personal_cabinet">Личный кабинет</a></div>

<div class="reg"><span><a href="/reg">Регистрация</a></span></div> <form name="login" action="" method="post" id="lgnform">

<input type="hidden" name="login_start" value="1" />

<div class="log-center">

<div class="log">

<input type="text" name="login" id="login" value="" placeholder="Логин" />

</div>

<div class="pass">

<input name="pass" id="pass" type="password" value="" placeholder="Пароль" />

</div>

<div class="in">

<input type="submit" id="go" name="go" value="Вход" />

</div>

</div>

<div class="forgot">

<span><a href="/remindpass" class="frgt">Забыли пароль?</a></span>

</div>

В личном кабинете по ТЗ заказчика отображены функции (рисунок 13):

• заказы;

• гараж;

• vin-запросы;

• личные данные;

• смена пароля;

• смена офиса;

• запись в сервис;

• история платежей.

Рисунок 13 – Личный кабинет

Например, для просмотра заказов можно обозначить ограничения по времени (рисунок 14). Ниже приводится фрагмент программной реализация этого процесса:

<script>

moment.locale('ru');

/* */

var localizedDateTimePickerTexts = {

today: 'Сегодня',

/*5 дней назад*/

fiveAndMoreDaysAgo: '5 дней назад и более',

/*7 дней назад*/

sevenAndMoreDaysAgo: '7 дней назад и более',

/*За последние 7 дней*/

last7days: 'За последние 7 дней',

/*За последние 10 дней*/

last10days: 'За последние 10 дней',

/*10 дней назад и более*/

tenAndMoreDaysAgo: '10 дней назад и более',

/*За этот месяц*/

thisMonth: 'За этот месяц',

/*За последние 30 дней*/

lastThirtyDays: 'За последние 30 дней',

/*Предыдущий месяц*/

previousMonth: 'Предыдущий месяц',

/*За последние 12 месяцев*/

thisLastYear: 'За последние 12 месяцев',

/*За этот год*/

thisYear: 'За этот год',

};

Рисунок 14 – просмотр заказов

И для более наглядного представления, вся информация о заказах экспортируется в Microsoft Excel.

Поиск товара доступен как для зарегистрированных, так и для незарегистрированных пользователей. Он осуществляется тремя способами (рисунок 15):

• поиск по номеру;

• по каталогам;

• vin-запрос.

Приведен фрагмент реализации функции поиска и далее визуальное представление на сайте:

<div class="wSearchForm">

<form method="get" name="searchform" id="srchform" action="/search">

<div class="clearfix w490 h36">

<ul class="devsite_subtabs clearfix searchTabs">

<li class="mainItem">

<a href="/">Поиск по номеру</a>

</li>

<li>

<a href="/laximo">По каталогам</a>

</li>

<li>

<a href="/vinquery">Vin запрос</a>

</li>

</ul>

</div>

<div class="search-form-container">

<div class="search-form">

<label for="pcode">Код детали:</label>

<div class="code"><input type="text" id="pcode" name="pcode" value=""/></div>

<div class="find"><input type="submit" title="Найти" name="go" value="Найти"/></div>

</div>

Рисунок 15 – Поисковая форма

Поисковая форма в свернутом состоянии фиксирована и отображается на каждой странице сайта.

Помимо страниц, на данном этапе были свёрстаны основные формы сайта, например, такие как операции с корзиной и заказом товара(рисунок 16):

<script>

var popupMessageCloseAllNotifications = '[ Закрыть все уведомления ]';

var popupMessageAddItemToBasket = 'Товар добавлен в корзину';

var alertMessageAddItemToBasket = 'Такой товар уже есть в корзине в количестве xx штук. Добавить?';

var addToCartAuthError = '<strong>Для добавления товаров в корзину необходимо авторизироваться<\/strong>';

var addToCartDataError = '<strong>Ошибка при добавлении в корзину. <br />Попробуйте перезагрузить страницу с результатами поиска<\/strong>';

var addToCartLimitError = '<strong>Для дальнейшего добавления новых позиций в корзину необходимо авторизироваться.<\/strong>';

var addToCartCookieLimitError = '<strong>Для добавления этого товара в корзину необходимо авторизироваться.<\/strong>';

var addToCartAlreadyInCartError = '<strong>Обработка данного товара имеет ограничения. Необходимо удалить товар из корзины, после чего выполнить его повторный поиск и заново добавить в корзину с нужным количеством.<br /><\/strong>';

var addToCartError = '<strong>Ошибка при добавлении в корзину<\/strong>';

var answerOptionPositive = 'Да';

var answerOptionNegative = 'Нет';

var chooseVendorDefaultOption = 'Выберите марку';

var carbaseApplBlockCarManufacturer = 'Марка';

var chooseModelDefaultOption = 'Выберите модель';

var carbaseApplBlockCarModel = 'Модель';

var chooseYearDefaultOption = 'Выберите год';

var carbaseApplBlockCarYear = 'Год выпуска';

var chooseModificationDefaultOption = 'Выберите модификацию';

var carbaseApplBlockCarModification = 'Модификация';

var packingAddToTrashMessage = 'Можно заказать только партиями по {PACKING_VALUES} и т.д. штук.';

var packingTrashOrderMessage = 'Деталь {BRAND_NUMBER} можно заказать только партиями по {PACKING_VALUES} и т.д. штук.';

var confirmCartClear = 'Вы действительно хотите очистить корзину?';

var warningCaption = 'Внимание!';

var clientId = null;

var resellerId = 721517;

var isVirtualSite = 1;

Содержимое корзины можно регулировать по своему желанию, удаляя ненужные товары и оформляя заказ на понравившиеся.

Рисунок 16 – Корзина и оформление заказа

Оформление заказа производится в несколько шагов:

1. Прописывается адрес доставки, проверяются и дополняются адреса получения.

2. Выбор способа оплаты

3. Подтверждение заказа покупателем

4. Заказ оформлен

Заказанный товар будет передан покупателю при условии своевременной оплаты и правильного указания адреса получателя.

Вёрстка веб-страниц позволяет учитывать разницу отображения элементов в различных браузерах и разницу в размерах рабочего пространства устройств.

Вся вёрстка выполнена с использованием HTML5 и CSS3. Для реализации динамического изменения размеров страницы реализовывались с помощью медиа запросы (media queries).

@media (max-width:1125px) { /* CSS код */ }

Данный запрос позволил задать правила, которые применяются только если ширина окна не превышает 1125 пикселей.

Четвертый этап – интеграция сайта с системой управления

Установка CMS и модулей.

В процессе установке (рисунки 17-18) необходимо указать параметры подключения к БД, данные аккаунта администратора, а также тип установки, определяющий количество модулей, которые будут активированы после установки системы. После установки создаётся и устанавливается основная тема сайта, а также модули, которые используются при разработке сайта.

Рисунок 17 - Установка

Рисунок 18 – Установка

Следующим шагом является создание учетной записи администратора, представленной на рисунке 19.

Рисунок 19- Создание учетной записи администратора

Далее с помощью операции http://<ip_or_domain>/admin23/login.php необходимо перейти на административную панель для дальнейшей работы. (рисунок 20)

Рисунок 20 – Административная панель

После завершения процесса установки, необходимо ввести командную строку снова на сервер и выполнить следующие команды, чтобы отменить изменения, внесенные в файлы конфигурации интернет-магазина. Также удалив каталог установки.

# rm -rf /var/www/html/install/

# chmod 644 /var/www/html/includes/configure.php

# chmod 644 /var/www/html/admin/includes/configure.php

Далее нужно выполнить следующие команды, чтобы предоставить сервер с правами на запись в некоторые каталоги интернет-магазина для того, чтобы иметь возможность загружать изображения и выполнять другие административные задачи.

# chmod -R 775 /var/www/html/images/

# chown -R root:apache /var/www/html/images/

# chmod -R 775 /var/www/html/pub/

# chown -R root:apache /var/www/html/pub/

# chmod -R 755 /var/www/html/includes/

# chmod -R 755 /var/www/html/admin/

# chown -R root:apache /var/www/html/admin/backups/

# chmod -R 775 /var/www/html/admin/backups/

# chmod -R 775 /var/www/html/includes/work/

# chown -R root:apache /var/www/html/includes/work/

Следующей функцией безопасности для интернет-магазина является проверка подлинности сервера с помощью механизма Htaccess.

Для того, чтобы активировать дополнительные проверки подлинности сервера, необходимо выполнить следующие команды, чтобы предоставить веб-сервер с правами на запись к файлам.

# chmod 775 /var/www/html/admin23/.htpasswd_oscommerce

# chmod 775 /var/www/html/admin23/.htaccess

# chgrp apache /var/www/html/admin23/.htpasswd_oscommerce

# chgrp apache /var/www/html/admin23/.htaccess

Готово. Интернет-магазина установился и готов к эксплуатации.

Функциональность системы управления интернет-магазином и возможности интернет-магазина:

• Каталог продукции с дружественным интерфейсом;

• Неограниченное число категорий;

• Неограниченное число продуктов;

• Неограниченная глубина дерева категорий;

• Каждый товар может быть добавлен сразу в несколько категорий;

• Учет остатков товарных позиций на складе;

• Возможность указания стоимости доставки для каждого продукта индивидуально;

• Неограниченное число параметров продуктов;

• Поддержка электронных продуктов;

• Фотогалерея для каждого продукта;

• Прайс-лист;

• Поиск продуктов в администрировании;

• Простой поиск по наименованию и описанию продуктов в пользовательской части;

• Расширенный поиск по параметрам продуктов;

• Импорт продуктов и категорий из Excel;

• Экспорт продуктов и категорий в Excel;

• Система публикации новостей;

• Голосование для посетителей;

• Редактируемый список областей;

• Простая локализация;

• Удобное управление заказами;

• Возможность выбора конфигурации товара перед добавлением в корзину;

• Краткая информация о корзине на каждой странице магазина;

• Пошаговое оформление заказов;

• Быстрое оформление заказов (с наличием регистрации);

• Возможность отключения учета остатков продуктов на складе;

• Настраиваемый список статусов заказов;

• Вся информация о заказах сохраняется в базе данных;

• Уведомления о заказах отправляются по электронной почте администратору и покупателю;

• Поиск заказов в администрировании;

• Формирование счетов на оплату и квитанций;

• Оптимизация для поисковых систем;

• Система скидок;

• Партнерская программа;

• Рассылка новостей по электронной почте;

• Информационные HTML страницы;

• Личный кабинет покупателя;

• Учет зарегистрированных пользователей;

• Регистрация пользователей;

• Настраиваемая форма регистрации покупателей;

• Функция "забыли пароль" для покупателей;

• Формы обратной связи;

• Настраиваемая система способов доставки заказов.

Магазин от компании совместим со следующими платежными системами:

• Оплата наличными при получении;

• Оплата наложенным платежом;

• Оплата кредитной карточкой.

Пятый этап - организация работ по размещению интернет - проекта в сети на домене клиента. Тестирование проекта. Обучение отдельно выделенного должностного лица работы с системой управления интернет-магазина.

И так же необходима оптимизация для поисковых систем, продвижение интернет-магазина.

Для этого приведены меры:

1. Обозначение уникального заголовка благодаря тегу <title>:

<title>TehnoDV | Автозапчасти | Каталог автозапчастей | Подбор автозапчастей | Интернет магазин запчастей</title>

Характеристики

Список файлов ВКР