Разработка сайта интернет-магазина

 

Министерство образования и  науки РФ

ФГБОУ ВПО «Вологодский государственный технический университет»

 

 

 

Кафедра АВТ

Дисциплина ТИП

 

 

 

 

 

 

 

 

 

Курсовая работа

Разработка сайта интернет-магазина

 

 

 

 

 

 

 

 

 

 

 

 

 

Выполнил: Денисов И.Е.

Группа: ЭМ - 41

Принял: Сорокин А.Н.

 

 

 

 

 

 

 

 

Вологда

2012

Оглавление

 

 

 

Введение

 

Интернет-магазин - это магазин, «витрина»  которого расположена в сети интернет и который дает возможность заказать товар через интернет.

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

На сайте магазина обычно представлен  подробный каталог товаров с  ценами, на основе которого пользователь формирует свой заказ. Заказывая  товары в интернет-магазине, вы можете получать их по почте или с курьером, а оплачивать непосредственно при получении или также через Интернет.

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

Преимущества, которые даёт интернет-магазин:

1. Интернет-магазин работает 24 часа  в сутки, 365 дней в году, без  перерыва на обед, без выходных  и праздничных дней.

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

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

4. Интернет-магазин не имеет  ограничений на виртуальную площадь.  Можно разместить сколь угодно  много товаров или описать  любое количество услуг. 

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

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

7. Срок и стоимость создания  интернет-магазина несоизмеримо ниже, чем обычного магазина.

8. Для создания интернет-магазина не требуется получения многочисленных разрешений и лицензий. Его не проверяет пожарный инспектор, санэпидемстанция и другие хорошо знакомые вам службы.

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

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

 

1. Постановка задачи

 

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

Очевидно, что было необходимо разработать несколько интерфейсов: для посетителя, для пользователя, для менеджеров и для администратора. Доступ к каждому интерфейсу открыт в соответствии с полномочиями.

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

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

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

Интерфейс администратора должен позволять  управлять правами пользователей (покупатель/менеджер), а так же учетными записями пользователей.

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

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

 

2. База данных

 

В качестве СУБД используется MYSQL. Выбор обоснован поддержкой таблиц InnoDB, а так же ее бесплатностью. В ходе анализа требований к функционалу интернет-магазина была определена схема базы данных магазина.

Рис. 1 – Физическая схема БД

 

Для каждой из таблиц были определены поля.

Рис. 2 – Логическая схема БД

 

Таким образом, исходя из анализа требований становится очевидно, что для реализации полнофункциональной системы БД магазина достаточно всего лишь 7 таблиц.

В таблице klient хранится информация о клиенте: ФИО, контактные данные, логин и пароль, а так же метка, определяющая статус пользователя на сайте.

В таблице korzina хранятся данные о покупках пользователя, а именно – дата, сумма, статус покупки.

В таблице tovari_korz хранятся непосредственно данные о наполнении товарами корзины пользователя.

Таблица tovari содержит в себе информацию о товаре на складе, без описания его свойств.

Описание свойств товара находится в таблице opisanie.

И, наконец, таблица izobrajenia хранит в себе ссылки на изображения товара.

3. Функционал  сайта

 

Функционал разрабатываемого сайта  приблизительно аналогичен уже существующим аналогам, за исключением различных упрощений.

Рассмотрим функционал относительно каждого из экранов, видимых пользователем.

 

3.1. Главная страница

Рис. 3 – Главная страница

 

Нажатие на ссылку «Магазин» ведет на главную страницу сайта, отображенную на рис. 3. На этой странице отображается информация о магазине, о принципах его работы.

Нажатия на ссылки «F.A.Q.», «Способы оплаты», «Контакты» отобразят на странице информацию, соответствующую их названию.

Список типов товаров  отображается динамически – изменение типов в базе менеджером вызовет перестроение этого списка и на сайте. Список отображается во всех пунктах главной страницы.

В верхнем правом углу станицы  расположена форма входа зарегистрированных пользователей, а так же кнопка для  регистрации новых посетителей.

Реализация формы входа при условии, что посетитель еще не вошел на сайт под своим логином:

if (!isset($_SESSION['id_klienta'])) //Проверяем, вошел ли пользователь

print '<table width="100%" height="81" border="0"><form action="login.php" method="get">

<tr>

<td width="10%" align="left">Логин:</td>

<td align="center">

<input type="text" name="login" id="login">

</td>

</tr>

<tr>

<td width="10%" align="left">Пароль:</td>

<td align="center">

<input type="password" name="password" id="password">

</td>

</tr>

<tr>

<td colspan="2" align="center"><input type="submit" value="Войти"><input type="button" value="Регистрация" onclick=window.location.href="register.php"></td>

</tr>

</form>

</table>'; //Выводим форму  входа

После того, как посетитель зашел на сайт, вышеописанная форма  меняется:

Рис. 4 – Главная страница вошедшего  пользователя

 

 

Реализация:

if (isset($_SESSION['id_klienta'])) //Проверяем, вошел ли пользователь

{

$login=$_SESSION['login']; //Получаем логин

$id_klienta=$_SESSION['id_klienta']; //Пароль

$iniciali_klienta=$_SESSION['iniciali_klienta']; //Инициалы

$query_k=mysql_query("select id_korzini from korzina where id_klienta='".$id_klienta."' and status='nabor'");

while($row_k=mysql_fetch_row($query_k))

$id_korzini=$row_k[0]; //Получаем id корзины

$query_t=mysql_query("select count(id_tovara_korz) from tovari_korz where id_korzini='".$id_korzini."'");

while($row_t=mysql_fetch_row($query_t))

$kol_korz=$row_t[0]; //Выводим количество товара в корзине

if ($_SESSION['metka']=='administrator') //Приветствие для администратора

print 'Здравствуйте, <b>Администратор</b>!<br>

<a href="admin.php">Панель  администратора</a><br><br>

<input type="button" value="Выйти" onclick=window.location.href="login.php?logout"><br>';

else

if ($_SESSION['metka']=='manager') //Для менеджера

print 'Здравствуйте, <b>'.$iniciali_klienta.'</b>!<br>

<a href="manager.php">Панель менеджера</a><br><br>

<input type="button" value="Выйти" onclick=window.location.href="login.php?logout"><br>';

Else //Для пользователя

print 'Здравствуйте, <b>'.$iniciali_klienta.'</b>!<br>

<a href="cabinet.php">Личный кабинет</a><br>Наименований в корзине: '.$kol_korz.'<br>

<input type="button" value="Выйти" onclick=window.location.href="login.php?logout"><br>';

}

Таким образом, администратор, пользователь и менеджер будут видеть разные приветствия и разные ссылки на кабинеты.

 

3.2. Регистрация

Теперь рассмотрим результат нажатия  на кнопку «Регистрация».

Рис. 5 – Регистрация

 

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

Реализация:

<script>

function check_values(UserForm)

{

var STATUS_DEF=true; //Статус правильности заполнения по умолчанию

var exp=/^[а-яёА-ЯЁ\s]+$/; //Регулярное выражение

if (exp.test(UserForm.fio.value)==false) //Правильность ввода ФИО

{

STATUS_DEF=false;

alert("Введите корректное ФИО  (Например: Иванов Иван Иванович)");

UserForm.fio.focus();

}

var m_exp=/^([a-z0-9_-]+\.)*[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,4}$/; //Регулярное выражение

if (m_exp.test(UserForm.email.value)==false) //Правильность ввода email

{

STATUS_DEF=false;

alert("Введите корректный электронный  адрес (Например: [email protected])");

UserForm.email.focus();

}

if (UserForm.password.value.length<5) //Правильность длины пароля

{

STATUS_DEF=false;

alert("Введите корректный пароль: длина не менее 5 символов");

UserForm.password.focus();

}

if (UserForm.password.value!=UserForm.password_verification.value) //Правильность повтора пароля

{

STATUS_DEF=false;

alert("Введенные пароль  и повтор пароля не совпадают");

UserForm.password.focus();

}

var l_exp=/^[a-zA-Z0-9]{3,10}$/;//Правильность ввода логина

if (l_exp.test(UserForm.login.value)==false)

{

STATUS_DEF=false;

alert("Введите корректный логин:  разрешены только латинские символы и цифры, длина логина от 3 до 10 символов");

UserForm.login.focus();

}

if (UserForm.target_address.value=="") //Наличие адреса доставки

{

STATUS_DEF=false;

alert("Введите адрес");

UserForm.target_address.focus();

}

var t_exp=/^[0-9]+$/; //Правильность ввода телефона

if (t_exp.test(UserForm.phone_number.value)==false)

{

STATUS_DEF=false;

alert("Введите корректный номер  (Например: 456532 или 89546543221)");

UserForm.phone_number.focus();

}

return STATUS_DEF;

}

</script>

Если STATUS_DEF=true, то выполняется процедура регистрации (Замечание: если такого логина еще нет в базе).

 

3.3. Просмотр списка товаров

Рис. 6 – Просмотр товаров

 

На рис. 6 отображен список товаров типа «Корпуса». Как видно  из изображения, разрешено сортировать и фильтровать отбор товаров по таким критериям как: по столбцам, по цене, по наличию на складе, по наличию изображений.

Нажатие на ссылку «Подробнее»  направит пользователя на страницу с  описанием товара.

Список разбит на страницы, по 20 товаров на каждой.

Реализация формирования фильтра:

<form id="sortmethod" name="sel_goods" method="get" action=""  onchange="document.forms.sel_goods.submit();"> //Форма фильтра

<?

if ($_GET['id'])

{

$num=$_GET['id'];

print "<input type='hidden' name='id' value=$num>";

$tiptovar=MYSQL_QUERY("select nazvanie from tip_tovara where id_tipa=$num");

$maxmin_query=mysql_query("select max(cena),min(cena) from tovari where id_tipa=$num");

while ($maxmin_arr=mysql_fetch_array($maxmin_query)) //Определяем самый дорогой и самый дешевый товар в категории

{

$maxsumm=$maxmin_arr[0];

$minsumm=$maxmin_arr[1];

}//А если таковых не нашлось, то

if ($maxsumm=="") $maxsumm=0;

if ($minsumm=="") $minsumm=0;

while($tip = mysql_fetch_array($tiptovar))

print "<nobr>Тип: $tip[0] ";

if (!$_GET['goodsid'])//Количество товаров для разбиения на страницы

{

$rcount_query=mysql_query("select count(id_tovara) from tovari where id_tipa=$num");

while ($rcount_arr=mysql_fetch_array($rcount_query))

$rcount=$rcount_arr[0];

?>//Сортировка

/ Сортировать по 

<select name="sort">

<option value="tovari.nazvanie" <? if (($_GET['sort'])=="tovari.nazvanie") print " selected " ?>>названию</option>

<option value="tovari.cena" <? if (($_GET['sort'])=="tovari.cena") print " selected " ?>>цене</option>

<option value="tovari.kol_sklad" <? if (($_GET['sort'])=="tovari.kol_sklad") print " selected " ?>>количеству</option>

</select>

/</nobr> <nobr>Цена от

<input type="input" name="summin" value="<? if ($_GET['summin']) print $_GET['summin']; else print $minsumm ?>" style="width:60px"> до

<input type="input" name="summax" value="<? if (($_GET['summax']>=$_GET['summin']) && ($_GET['summax']!="")) print $_GET['summax']; else print $maxsumm ?>" style="width:60px"> рублей

/</nobr> <nobr><input type="checkbox" name="showzero" <? if (($_GET['showzero'])=="on") print " checked ";?>>Нет на складе

/ <input type="checkbox" name="showpic" <? if (($_GET['showpic'])=="on") print " checked " ?>>Только с изображениями</nobr> <input type="submit" value="Отобразить">

<?

//Получаем значения полей фильтра и запоминаем их

if ($_GET['sort'])

$method=$_GET['sort'];

else $method="tovari.nazvanie";

if ($_GET['numpage'])

$numpage=$_GET['numpage'];

else $numpage=0;

if ($_GET['summin'])

$minsumm=$_GET['summin'];

if (($_GET['summax']>=$_GET['summin']) && ($_GET['summax']!=""))

$maxsumm=$_GET['summax'];

if ($_GET['showzero']=="on")

$showzero="on";

else $showzero="off";

if ($_GET['showpic']=="on")

$showpic="on";

else $showpic="off";

}

}

?>

</form>

Вывод товаров осуществляется через функцию. Реализация:

if (($_GET['id']) && (!$_GET['goodsid']))//Выводить только если открыт список товаров

{

$id=$_GET['id'];

ShowGoods("tovari","$id","$method","$numpage","$minsumm","$maxsumm","$showzero","$showpic","$rcount");

}

Сама функция вынесена в приложение.

 

3.4. Просмотр товара

Нажатие на ссылку «Подробнее» направит пользователя на страницу с описанием  товара.

Рис. 7 – Описание товара

 

В данном окне отображается полное описание выбранного товара. Нажатие на картинку увеличит ее, повторное нажатие –  уменьшит.

Реализация:

<script language = "JavaScript">

var bigsize = "300"; //Увеличенная высота

var smallsize = "100"; //Стандартная высота

function changeSizeImage(im)

{

if(im.height == bigsize) //Изменяем высоту в зависимости от текущей

im.height = smallsize;

else im.height = bigsize;

}

</script>

Поле с количеством товара и  кнопкой «В корзину» доступно только зарегистрированным пользователям. Посетителям, менеджерам и администратору оно  недоступно.

Реализация:

if (isset($_SESSION['id_klienta'])) //Если это пользователь

{

$login=$_SESSION['login'];

if (($_SESSION['metka']!='manager') && ($_SESSION['metka']!='administrator'))

if (($_GET['id']) && ($_GET['goodsid'])) //Если смотрим товар

{

$id=$_GET['id'];

$goodsid=$_GET['goodsid'];

print '<form action="actions.php" method="get">';

print "<input type='hidden' name='id' value=$id>";

print "<input type='hidden' name='goodsid' value=$goodsid>";

print "<input type='hidden' name='basket' value=add>";

print "Количество:

<input type='text' name='count' id='count' value='0' size='1'>

<input type='submit' value='В корзину'></form>"; //Выводим форму покупки  

}

}

 

3.5. Отправка в корзину

Чтобы отправить товар в корзину, пользователь должен нажать на клавишу  «В корзину», введя при этом количество товара, удовлетворяющее условию:

0<Количество товара<Товара на складе

Это условие проверяется и в  случае несоответствия пользователю выводится  соответствующее сообщение.

Если все верно:

Рис. 8 – Сообщение пользователю

 

Перемещаясь по товарам на сайте, пользователь набирает корзину товаров. Как  только пользователь решать, что все нужные товары выбраны, он должен перейти в личный кабинет.

 

3.6. Личный кабинет

Рис. 9 – Личный кабинет

 

В личном кабинете пользователь может  отредактировать товары в корзине: удалить те, которые считает лишними. Автоматически ведется расчет итоговой суммы, которую покупатель должен заплатить за товар. Доставка в расчет не входит.

Если покупателя все устраивает, он нажимает кнопку «Отправить»:

Рис. 10 – Сообщение пользователю

 

Заказ из корзины перемещается в  «Отправленные заказы», что говорит о том, что список передам сотрудникам магазина, но доставка еще не выполнена. Пользователь может выбрать определенный заказ и просмотреть его содержимое.

Таблица «Выполненные заказы»  содержит в себе заказы, которые  были отправлены покупателю. Пользователь может выбрать определенный заказ и просмотреть его содержимое.

Реализация таблиц с  товарами приведена в приложении.

Реализация отправки заказа:

f (isset($_POST['accept'])) //Если нажали кнопку Отправить

{

include "dbconnect.php";

$id_korzini=$_POST['id_korzini']; //Определяем корзину

$testing=mysql_query("select * from tovari_korz where id_korzini='".$id_korzini."'");

if (count(mysql_fetch_row($testing))>1) //Если есть товары

{

$data_pok=date("d.m.y H:i"); //Дата покупки

mysql_query("update korzina set status='podtverjden', data_pok='".$data_pok."' where id_korzini='".$id_korzini."'"); //Статус корзины обновлен

header('Location: cabinet.php?r=2');

}

}

 

3.7. Панель менеджера

3.7.1. Управление типами товаров

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

Рис. 11 – Панель менеджера, Управление типами товаров

 

На странице «Управление  типами товаров» менеджер может добавлять или удалять требуемые типы товаров. Если есть товары, принадлежащие удаляемому типу, то удалить его не получится.

Рис. 12 – Сообщение пользователю

 

Типы товаров разделены  постранично, так же их можно отсортировать  по различным колонкам.

Реализация формирования запроса сортировки:

<form id="tipselector" name="sel_tip" method="get" action=""  onchange="document.forms.sel_tip.submit();">

Добавление типов товаров (Сортировать  по 

<select name="goodtype">

<option value="tip_tovara.nazvanie" <? if (($_GET['goodtype'])=="tip_tovara.nazvanie") print " selected " ?>>названию</option>

<option value="tip_tovara.id_tipa" <? if (($_GET['goodtype'])=="tip_tovara.id_tipa") print " selected " ?>>номеру</option>

</select>):

<?

//Определяем значения  переменным

if ($_GET['goodtype'])

$method=$_GET['goodtype'];

else $method="tip_tovara.nazvanie";

if ($_GET['numpage'])

$numpage=$_GET['numpage'];

else $numpage=0;

?>

</form>

Вывод таблицы осуществляется функцией:

ShowTable("tip_tovara","id_tipa","0","0",$method,$numpage,$rcount); //Вызов функции

Реакция на действия пользователя(удаление, добавление типов) реализована следующим  образом:

if ($_GET['r']==1) //Удаление

{

?>

<script>

window.alert("Удалено успешно");

</script>

<?

}

if ($_GET['a']==1) //Добавление

{

?>

<script>

window.alert("Добавлено  успешно");

</script>

<?

}

Значения, получаемые с помощью  $_GET возвращаются со страницы actions.php с помощью header, где хранится код реакции на нажатия тех или иных кнопок.

Код, содержащийся в actions.php приведен в приложении.

 

3.7.2. Управление товарами

Перейдя по ссылке «Управление товарами»  менеджер сможет добавлять товары в  категории, добавлять к ним описания, а так же просматривать имеющиеся  товары. Возможна сортировка по различным  столбцам. Список так же разделен на страницы.

Рис. 13 – Товары

 

Если хотя бы одно поле из подменю добавления товаров не заполнено, товар не добавится. Если товар добавится, то в столбце «Опис.» появится рядом с товаром клавиша «Доб.», по нажатию на которую откроется  окно свойств товара.

В данном окне можно будет  добавить информацию о характеристиках  товара, гарантии, производителе. Нажатие  кнопки «Обновить запись» добавит  эту информацию в базу данных. Далее  следует форма добавления изображений  к товару. Нажатием кнопки «Обзор»  запускается диалог выбора изображения.

Имеется проверка формата  изображения: допускается изображение  только формата .jpg/.jpeg и объема менее 1 Мб.

Кнопка «Загрузить» добавит  изображение на сайт. Так же в  этом окне отображаются все изображения  данного товара, их можно удалить. Когда все изменения проделаны нужно нажать кнопку «Закрыть» или просто закрыть окно.

Рис. 14 – Описание товара

 

Реализация выбора типа товара:

$content='<select name="tip_tovar">'; //Собираем select

include "dbconnect.php"; //Подключаемся к БД

$res = mysql_query('select id_tipa, nazvanie from tip_tovara order by nazvanie');

$kost=0;

while ($row = mysql_fetch_array($res)) //Заполняем select с оглядкой на выбранное значение

{

$content.= '<option value="'.$row["id_tipa"].'"';

if ($kost==0) {$number=$row["id_tipa"]; $kost++;}

if ($row["id_tipa"]==$_GET["tip_tovar"])

{$content.= ' selected'; $kost++;} else

if (($row["id_tipa"]==$_GET['number']) && $kost==1)

{$content.= ' selected'; $kost++;}

$content.= '>'.$row["nazvanie"].'</option>';