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

Понятие Internet как глобальной мировой системы передачи информации. Анализ системы World Wide Web, ее особенности. Рассмотрение главных целей сайта, создание сайта для магазина продуктов питания. Этапы разработки дизайна сайта и создание базы данных.
Краткое сожержание материала:

Размещено на

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

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



Введение

internet сайт магазин дизайн

Всемирная паутина (World Wide Web или WWW) -- это единство информационных ресурсов, которые связаны между собой средствами телекоммуникаций и основаны на гипертекстовом представлении данных, разбросанных по всему миру.

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

Internet - глобальная мировая система передачи информации с помощью информационно-вычислительных ресурсов. WWW доступен через Internet.

Цель моей работы - разработка сайта магазина продуктов питания с интерактивной витриной, прайсом и возможностью выбора товара. Для этого в данной работе будет использоваться приложение Denwer (PHP 5.3.3, MySQL 5.1, PostgreSQL 8.4 etc.)

«Денвер» - набор дистрибутивов и программная оболочка, предназначенные для создания и отладки сайтов (веб-приложений, прочего динамического содержимого интернет-страниц) на локальном ПК под управлением ОС Windows.

Задачи, необходимые решить при разработке сайта:

1. разработать визуальное оформление сайта;

2. разработать структуру сайта;

3. создать базу данных о товарах магазина;

4. осуществить связь сайта и базы данных.



1. Анализ предметной области

1.1 World Wide Web

World Wide Web -- распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к интернету. Всемирную паутину образуют миллионы web-серверов. Большинство ресурсов всемирной паутины представляет собой гипертекст. Гипертекстовые документы, размещаемые во всемирной паутине, называются web-страницами. Несколько web-страниц, объединенных общей темой, дизайном, а также связанных между собой ссылками и обычно находящихся на одном и том же web-сервере, называются web-сайтом. Для загрузки и просмотра web-страниц используются специальные программы - браузеры. Основная функция веб-браузера - отображение гипертекста. Всемирная паутина неразрывно связана с понятиями гипертекста и гиперссылки. Большая часть информации представляет собой именно гипертекст. Для облегчения создания, хранения и отображения гипертекста традиционно используется язык HTML (англ. HyperText Markup Language), язык разметки гипертекста. Работа по разметке гипертекста называется вёрсткой. После HTML-разметки получившийся гипертекст помещается в файл. После того, как HTML-файл становится доступен веб-серверу, его начинают называть «веб-страницей». Набор веб-страниц образует веб-сайт. В гипертекст веб-страниц добавляются гиперссылки. Гиперссылки помогают пользователям Всемирной паутины легко перемещаться между ресурсами (файлами) вне зависимости от того, находятся ресурсы на локальном компьютере или на удалённом сервере.



1.2 Описание предметной области

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

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

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

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

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

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: 800p...