Разработка сайта магазина продуктов питания с интерактивной витриной, прайсом и возможностью выбора товара

Данный сайт разработан для магазина продуктов питания. У магазина имеется широкий спектр продуктов, предложенный клиенту.

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

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

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

Сайтом будут решаться следующие задачи:

1. информационное обслуживание;

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

3. организация каталогов товаров с целью ознакомления с ними широкой аудитории;

4. привлечение новых клиентов;

5. проведение рекламных акций и сообщение о скидках;

Также, с помощью сайта, можно создать новую услугу - заказ продуктов, с их последующей доставкой на дом.

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

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

2. Проектирование сайта

2.1 Средства разработки сайта

Для разработки сайта используется приложение Denwer (PHP 5.3.3, MySQL 5.1, PostgreSQL 8.4 etc.)

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

В своей работе я использовал:

1. HTML- язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы;

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

3. CSS - формальный язык описания внешнего вида документа, написанного с использованием языка разметки.;

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

2.2 Дизайн сайта

Веб-дизайн -- вид графического дизайна, направленный на разработку и оформление объектов информационной среды интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества.

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

При своей разработке сайта магазина продуктов питания я использовал язык разметки гипертекста HTML и каскадные таблицы стилей CSS.

HTML (HyperText Markup Language -- «язык разметки гипертекста») - это стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме.

CSS (Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

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

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

Вот часть кода, относящася к оформлению сайта.

body {

background: #fff url(images/bg.jpg) repeat-x;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

line-height: 18px;

color: #333333;;

}

img { border: none; }

a { color: #26478A; text-decoration: none; }

a:hover { text-decoration: underline; color : #000; }

#wrap {

margin: 0 auto;

width: 800px;

}

#header {

height: 60px;

background: #26478A url(images/header.jpg) no-repeat;

}

#header h1 {

font-size: 26px;

font-weight: 100;

letter-spacing: -3px;

padding: 12px 0 5px 10px;

}

#header h1 a {

color: #fff;

text-decoration: none;

}

#header h1 a:hover {

color: #eee;

text-decoration: none;

}

Вот пример того,что получилось

Рис. 1. Пример

2.3 Структуры сайта

Структура сайта - совокупность электронных документов (файлов) в компьютерной сети, объединённых под одним адресом.

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

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

Созданный мною сайт состоит из следующих разделов:

1) Главная страница (Рис. 2)

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

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

Вот часть кода главной страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Продукты питания</title>

<meta http-equiv="Content-Language" content="English" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

</head>

<body>

<div id="wrap">

<div id="header">

<h1><a href="/">Продукты питания</a></h1>

</div>

<div id="intro">

За обедом ешь мало, а за ужином еще меньше, ибо здоровье всего тела куется в кузнице нашего желудка.<br /><i>Мигель Сервантес де Сааведра</i><br /><br />

Пища столь же необходима для здоровья, сколь необходимо приличное обращение человеку образованному.<br /><i>Козьма Прутков</i>

2) Продукты (Рис. 3)

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

Рис.3. Продукты

Из этого же раздела, если посетитель сайта пожелает, можно, щёлкнув по заинтересовавшему продукту, перейти на следующую страницу, где будет предоставлена полная информация о товаре (Рис. 4)

Рис.4. Выбор из списка продуктов

Если посетитель решил заказать товар, то прямо отсюда он попадает на страницу заказа (Рис.5)

Рис.5. Страница заказа

3) Доставка (Рис. 6)

Если вы решили заказать продукт на дом, то этот раздел для Вас.

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

Рис.6. Доставка

4) Контакты (Рис. 7)

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

Рис.7. Контакты

5) Админ панель (Рис. 8)

Этот раздел предназначен для специального человека, который обладает правами администратора.

Рис.8. Админ панель

3. База данных и её взаимосвязь с сайтом

3.1 Создание базы данных

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

При создании базы данных я использовал язык структурированных запросов SQL.

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

Для создания базы данных используем phpMyAdmin.

Моя база данных состоит из двух таблиц (Рис. 9):

1) Товары;

2) Заказы

Рис.9. Таблицы

Таблица «Заказы» состоит из 5 полей (Рис.10):

· Id;

· Наименование;

· Количество;

· Телефон;

· Статус;

Рис.10. Заказы

Рис.11. Таблица «Заказы»

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

Таблица «Товары» (Рис.12) состоит из полей:

· Id;

· Фотограффия;

· Наименование;

· Описание;

· Цена

Рис.12. Таблица «Товары»

На Рис.13. изображена таблица «Товары» в уже заполненном варианте и готовой к работе.

Рис.13. Таблица «Товары»

3.2 Обработка заказов