Сайт магазина детской одежды с функциями просмотра товара, форума и обратной связи

Сайт магазина детской одежды с функциями просмотра товара, форума и обратной связи

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

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

Институт дополнительного профессионального образования

Выпускная квалификационная работа:

Сайт магазина детской одежды с функциями просмотра товара, форума и обратной связи

Слушатель

Мамедова Майя Загидовна

Руководитель зав. Сектора НТБ

Койнов Р.С.

Директор института к.э.н. доцент

Шарафутдинов Р.Я.

Новокузнецк, 2013 г.

Реферат

WEB-СЕРВЕР, DNS-СЕРВЕР, WEB-САЙТ, HTML, PHP, MYSQL, APACHE, CMS, SEO-ОПТИМИЗАЦИЯ

Объектом исследования является специфика проектирования сайта на языке PHP с функциями просмотра каталога товаров, обратной связи и форумом.

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

В результате выполненной работы представлен вариант сайта, соответствующий заданию заказчика.

Содержание

Определения, обозначения и сокращения

Введение

. Основная часть

.1 Обзор типов сайтов

.2 Общая структура сайтов

.2.1 Структура каталогов

.2.2 Структура навигации

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

.3 Теоретические основы построения веб-сайтов

.3.1 Принципы работы веб-сервера

.3.2 Основы программирования на языке PHP

.3.3 Основы работы с базой данных

.3.4 Динамический веб-сайт

.3.5 Взаимодействие PHP сайта с базой данных MySQL

.4 Продвижение сайтов

.4.1 Классические способы продвижения сайтов

.4.2 Продвижение сайтов с помощью социальных сетей

. Практическая часть

.1 Характеристика объекта проектирования сайта

.2 Обзор и анализ существующих разработок

.3 Сравнительный анализ сайтов и выбор сайта-прототипа

.4 Задачи веб-сайта

.5 Разработка веб-сайта

.5.1 Построение базы данных сайта

.5.2 Построение основной части сайта

.5.3 Организация обратной связи на сайте

Заключение

Список использованных источников

Приложение А HTML-код формы обратной связи

Определения, обозначения и сокращения

детский одежда сайт

В настоящей ВКР применяют следующие термины с соответствующими определениями:

. WWW (world wide web) - гипертекстовая среда Интернет, объединяющая мультимедийные документы средствами гипертекста. Пользователи могут переходить от одних документов к другим с помощью гипертекстовых ссылок.

. DNS-сервер (Domain name system server) - специальные компьютеры, известные серверы системы доменных имен. Хранят таблицы имен машин с ассоциированными с ними IP-адресами и переводят их в друг в друга для человеческих и компьютерных нужд.

3. URL (Uniform Resource Location) - унифицированный адрес ресурса. Стандартная форма обозначения имен файлов в Интернете и в World Wide Web, описывающая тип сетевой службы, абонентское имя компьютера и имя файла на данном компьютере, включая полный путь поиска файла.

. HTML (hypertext mark-up language) - язык разметки гипертекста. Система кодов для разметки документов. Применяется для документов, циркулирующих в среде World Wide Web. Основная задача HTML - определить структуру документов и семейств документов так, чтобы они могли быть легко и быстро доставлены пользователю по сетям и отображены на самых разных дисплеях.

. HTTP (hypertext transport protocol) - протокол прикладного уровня передачи данных (изначально - в виде гипертекстовых документов). Основой HTTP является технология «клиент-сервер», то есть предполагается существование потребителей (клиентов), которые инициируют соединение и посылают запрос, и поставщиков (серверов), которые ожидают соединения для получения запроса, производят необходимые действия и возвращают обратно сообщение с результатом.

. ТИЦ (Тематический индекс цитирования) - технология поисковой машины «Яндекс», заключающаяся в определении авторитетности интернет-ресурсов с учётом качественной характеристики - ссылок на них с других сайтов.

. PR (PageRank) - алгоритм ссылочного ранжирования.

. SEO (search engine optimization) - комплекс мер для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей.

Введение

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

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

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

Объектом исследования является специфика проектирования сайта на языке PHP с функциями просмотра каталога товаров, обратной связи и форумом.

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

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

Задачи:

1.  Проанализировать информацию по видам веб-сайтов и способам их создания;

2.       Систематизировать данные по разработке веб-сайтов и их продвижению в сети Интернет;

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

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

1.1     Обзор типов сайтов

Сайты-визитки или презентационные сайты

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

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

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

Представительские или корпоративные сайты

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

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

Интернет-магазин

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

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

Информационный портал

Самый насыщенный по структуре и набору функций из сайтов - информационный портал. Информационный портал предназначен для публикации и управления большими объемами информации в Интернете. Разработка такого проекта может заинтересовать компании, которые предоставляют услуги, связанные со значительными информационными потоками (разнообразные СМИ, контент-проекты и т.д.).

Включает в себя уникальную дизайн-концепцию, большой каталог продукции, обширную информационную систему, поисковую систему. Возможна система аккаунтов и разграничения прав доступа. Эта категория сайтов ориентирована на большие он-лайн проекты, которые переносят значительную часть бизнеса компании в интернет. Разработка такого проекта требует сложного программного решения и модульности структуры, качественного дизайна, удобной навигации. Продуманная система подачи информации обеспечивает возможность безболезненного и оперативного внесения коррективов и большого количества новой информации на сайт. [1]

1.2     Общая структура сайтов

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

.2.1 Структура каталогов

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

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

Рисунок 1-Линейная структура каталогов

- иерархическая - страницы разбиты по категориям и подкатегориям. Такая структура наиболее удобна (рис. 2)

Рисунок 2 - Иерархическая структура каталогов

произвольная - страницы расположены в свободном порядке. Такая структура оправдана только для небольших сайтов (рис. 3).

Рисунок 3-Произвольная структура каталогов

1.2.2 Структура навигации

Это очень важная часть планирования ресурса. Способ доступа к информации на сайте должен быть простым и понятным. Пользователь в любую минуту должен знать ответы на следующие вопросы:

Где я нахожусь?

Куда могу пойти?

Как туда добраться?

Как вернуться назад?

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

Также можно сделать так называемые навигационные ключи, т.е. на каждой странице (сверху) указать полный путь до этой страницы по схеме: главная страница - название раздела - название страницы.

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

Теперь рассмотрим основные системы навигации:

Текстовая система навигации - самый распространенный вид. Надо сказать, что текстовая навигация должна присутствовать даже, если вы используете другие системы навигации (так как она самая надежная). В общем случае, такая навигация представляет собой оформленные различными способами текстовые ссылки.

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

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

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

Заставки сайта

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

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

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

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

-       Главная страница должна отражать тематику сайта.

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

-       Желательно разместить на ней функцию поиска по сайту.

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

-       Обязательно должен присутствовать способ обратной связи (e-mail, телефон, адрес).

-       Главную страницу целесообразно сделать отличающейся от остальных, но соответствующей общей стилистике сайта. [2]

.3 Теоретические основы построения веб-сайтов

Для создания динамического сайта необходимо знать основные принципы работы web-сервера, изучить основы программирования на языке HTML, PHP, знать основы CSS, понимать основы поисковой оптимизации.

1.3.1  Принципы работы web-сервера

Сервис WWW работает по технологии клиент-сервер. Web-сервер - это программное обеспечение, установленное на компьютере, при помощи которого по протоколу HTTP предоставляется доступ к веб-страницам. Наиболее распространенными web-серверами являются Apache, работающий на платформе Unix/Linux и IIS (Internet Information Service), работающий под управлением Windows. Также web-сервером называется и сам компьютер, на котором установлено это программное обеспечение и хранятся файлы веб-сайтов.

Функции сервера: на сервере хранятся различные ресурсы (например веб-страницы); для каждого ресурса устанавливаются права доступа; сервер обрабатывает запросы клиентов, которым необходим тот или иной ресурс; сервер осуществляет обмен информацией с клиентами и другими серверами. В качестве клиента используется браузер. Функции клиента: браузер осуществляет запрос требуемого ресурса; браузер обрабатывает полученный ресурс. Схема доступа браузера к веб-сайту показана на рисунке 4.

Рисунок 4 - Схема доступа клиента (браузера) к веб-сайту

В строке адреса браузера набирается адрес сайта, на который хочет попасть пользователь (например #"702076.files/image005.gif">

Рисунок 5 - Основы и синтаксис массивов

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

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

Синтаксис функций PHP выглядит так:

имя_функции ([$параметр1. $параметр2,.... $параметрn]) {

тело функции

}

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

Метод GET. Данные методом GET передаются путем их добавления к URL-адресу вызываемого сценария, предназначенного для обработки полученной информации. Метод GET представляет собой передачу переменных через адресную строку браузера. Чтобы передать данные необходимо набрать следующий код: echo “<a href=’имя_файла.php?a=77&b=10’>”. В теле ссылки, после названия файла необходимо поставить знак вопроса “?” и после него указывать имя переменной. Если переменная не одна, то после указания одной переменной ставится знак “&” и указывается следующая переменная. Передаваемые переменные записываются в специальный массив $_GET.

<#"702076.files/image006.gif">

2.5.1  Построение базы данных сайта

После установки пакета программ Denwer и запуска web-сервера, необходимо в адресной строке интернет - браузера ввести следующий адрес: «#"702076.files/image007.gif">

Рисунок 7 - Список необходимых для работы с web-сервером ссылок

Для хранения практически всей информации о сайте Joomla использует базу данных MySQL. Она позволяет хранить значительные объемы данных, при этом предоставляет нам удобный интерфейс для взаимодействия с ней. Для сайта компании «Утенок», продающей детскую одежду необходимо создать базу данных “Utenok”, в которой создаются и хранятся таблицы для четкого разделения хранящейся на сайте информации. В базе данных основной сущностью является категория продукции, принадлежащая некоторому разделу. Взаимодействие основных сущностей представлено на ER-диаграмме (Рисунок 8).

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

Одним из важнейших параметров каждой из сущностей является псевдоним, т.к. если включить SEO-оптимизацию в Joomla! в строке с адресом доступа будут отображаться псевдонимы разделов, категорий или материала, которая удобнее для восприятия пользователем. Например: #"702076.files/image008.gif">

Рисунок 8 - ER-диаграмма базы данных для сайта компании “Утенок”

2.5.2  Построение основной части сайта

Для решения задачи построения основной части сайта, основную задачу можно разделить на следующие подзадачи:

1.       Установка системы управления контентом сайта и определение ее дополнений под задачи сайта.

2.       Разработка макета дизайна сайта.

.        Организация навигации сайта.

Установка системы управления контентом сайта и дополнение ее под задачи сайта. Загружается актуальная версия Joomla, на данный момент Joomla 2.5. Разархивируются файлы дистрибутива Joomla в корневой каталог сервера (C:\WebServers\home\mysait.ru\www - для локального сервера). Открывается интернет-браузер и вводится адрес: www.mysait.ru, загрузится веб-инсталлятор Joomla. Нужно выполнить пошаговые действия:

1.       Проверка системы и принятие лицензии. Joomla! проверяет настройки сервера, является ли сервер подходящим для того, чтобы установить Joomla! Затем должна загрузиться страница с лицензией GNU/GPL, которую нужно прочитать и принять (рисунок 9).

Рисунок 9 - Лицензия Joomla!

2.     Основная настройка и установка Joomla!

- Настройка Joomla! для подключения к базе данных MySQL. Показана на рисунке 10.

Имя хоста MySQL - localhost        

Имя пользователя MySQL - root

Пароль доступа к БД MySQL

Имя БД MySQL - database

Префикс таблиц БД MySQL - jml

Рисунок 10 - Настройка Joomla! для подключения к базе данных MySQL

! предоставляет возможность удаления существующих таблиц (Drop Existing Tables), как и возможность создания резервной копии старых таблиц (Backup Old Tables). При первой инсталляции необходимо оставить эти флажки пустыми.

Программа установки Joomla! Создаст необходимые таблицы и разместит в них пробную информацию. Следующая страница отобразит список ошибок, если они возникли при установке базы данных.

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

-       Название сайта. Необходимо ввести название сайта. Это название отображается в заголовке окна браузера, при обращении в web-сайту и в Административной панели. В данном случае Utenok.

-       Подтверждение параметров настройки. Проверяется: абсолютный путь и url сайта. Вводится e-mail и пароль администратора. Окно установки программы отражено на рисунке 11.

Рисунок 11- Определение конфигурации сайта

Это все основные этапы установки Joomla! После завершения установки можно перейти в панель Администратора www.mysait.ru/administrator и выполнить основные настройки сайта. (рисунок 12)

Рисунок 12-Завершение установки

Разработка макета дизайна сайта.

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

Рисунок 13 - Эскиз расположения основных блоков сайта

Рабочее пространство сайта делится на 3 основных блока. Макет сайта представлен на рисунке 14.

-       Основная панель навигации (верхняя часть) - здесь находится логотип компании, слоган и располагается главное меню сайта.

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

-       Нижняя панель навигации - здесь располагается информация о компании, контактная информация и карта сайта, а также информация о «копирайте».

Рисунок 14 - Макет главной страницы сайта

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

Организация навигации сайта

Горизонтальное меню. Для основной навигации на сайте решено сделать горизонтальное меню (Рисунок 15). Данный тип навигации отличается удобством для пользователя сайта.

Рисунок 15 - Главное меню сайта (блок сверху)

Структура разделов (пунктов меню) изображена на рисунке 16.

Рисунок 16 - Структура главного меню: разделы и категории

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

Рисунок 17 - Нижнее меню сайта