Сводный сайт-каталог фирм с функцией просмотра товара и поиска продавца с минимальной ценой

Сводный сайт-каталог фирм с функцией просмотра товара и поиска продавца с минимальной ценой

Пояснительная записка

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

Сводный сайт-каталог фирм с функцией просмотра товара и поиска продавца с минимальной ценой

Реферат

сайт информационный каталог

Пояснительная записка страница, рисунков, источников.

САЙТ, HTML, CSS, PHP, MYSQL, ДИЗАЙН, ШАБЛОН, ПРОГРАММА, БАЗА ДАННЫХ, РАЗРАБОТКА ВЕБ-САЙТА, ВЕБ-СЕРВЕР.

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

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

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

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

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

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

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

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

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

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

. CMS - сontent management system - информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления содержимым.

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

. ЧПУ - friendly URL- веб-адреса, удобные для восприятия человеком (а также систем и методов построения таких адресов). Является аббревиатурой от словосочетания «человекопонятный URL»

. SEO оптимизация - search engine optimization - это работы с целью поднять позицию сайта в поисковых системах по каким-либо запросам пользователей.

 <#"702087.files/image001.gif">

Рисунок 1 - Схема информационных потоков

Для построения сайта на локальном компьютере, необходимо иметь следующее программное обеспечение:

Любой редактор, способный сохранить на диске текстовый файл для создания HTML документов, можно использовать программы с подсветкой кода, например, Notepad или Adobe Dreamweawer.

Apache - самый распространённый HTTP сервер, который может поддерживать несколько кодировок кириллицы одновременно. Основными достоинствами Apache считаются надёжность и гибкость конфигурации. Он позволяет подключать внешние модули для предоставления данных, использовать СУБД для аутентификации пользователей, модифицировать сообщения об ошибках. Он используется для создания динамичного сайта с использованием языков программирования. [2]

- PHP - это язык программирования, предназначенный для интерактивного создания веб-страниц на веб-сервере, т.е. сценарий выполняется на стороне сервера. PHP-код исполняется между запрошенной страницей и веб-сервером, добавляя и изменяя основной код HTML. PHP прекрасно подходит для разработки веб-приложений. PHP отличается наличием ядра и подключаемых модулей, «расширений»: для работы с базами данных, динамической графикой, криптографическими библиотеками, документами формата PDF. В настоящее время PHP поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических веб-сайтов. Язык и его интерпретатор разрабатываются группой энтузиастов в рамках проекта с открытым кодом. В области программирования для Интернета PHP - один из популярнейших скриптовых благодаря своей простоте, скорости выполнения, богатой функциональности, кроссплатформенности и распространению исходных кодов на основе лицензии PHP. PHP является языком программирования с динамической типизацией, не требующим указания типа при объявлении переменных, равно как и самого объявления переменных. В настоящее время широко используется пятая версия продукта. [3]

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

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

- PhpMyAdmin - это некоммерческое приложение написанное на PHP и обеспечивающее полноценную, в том числе удаленную, работу с базами данных MySQL через браузер.

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

PhpMyAdmin не хранит информацию об учетных записях mysql-пользователей, и не управляет ими самостоятельно (ему лишь разрешается управлять информацией учетной записи). Когда пользователь входит в phpMyAdmin, то логин и пароль передаются непосредственно MySQL-серверу.

.2.3 Техническое обеспечение

Для построения сайта, необходимо иметь компьютер с операционной системой Windows, также понадобится чтобы на компьютере стояло несколько наиболее популярных браузеров, в которых можно просмотреть результаты работы. Наличие нескольких браузеров обуславливается тем что код написанный в html - редакторе отличается от того что мы увидим в браузерах, и одна информация может отображаться по-разному. Самые популярные на сегодняшний день браузеры: Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, Apple Safari и Opera.

1.3 Обзор и сравнение существующих CMS

Система управления содержимым (англ. Content management system, CMS) -информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления контентом (то есть содержимым) ^{<#"702087.files/image002.gif">}

Рисунок 2 - Наиболее популярные CMS в доменных зонах RU и РФ по данным компании iTrack за 1 кв. 2013 г.

Из рисунка видно, что наиболее популярной бесплатной CMS является Joomla, в сегменте платных CMS лидирует 1С-Битрикс. [6] Рассмотрим их, а также популярную CMS uCoz, которая одновременно является хостинг провайдером.

1.3.1 
Система управления контентом uCoz

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

Основные возможности системы:

- На выбор предоставляется множество шаблонов для создания сайта.

Возможность создать собственный дизайн, либо переделать любой стандартный, оперативная смена дизайна сайта в любой момент жизни сайта.

Широкий выбор конфигурации сайта, от минимума: 3 модуля (Пользователи, Поиск по сайту, Редактор страниц), до максимума: 20 модулей различного назначения. Активация и деактивация модулей на усмотрение владельца-администратора сайта.

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

Предоставление домена третьего уровня в 21 различной зоне.

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

Неограниченное создание/редактирование MX записей, и создание субдоменов, после прикрепления домена.

- Доступ по FTP <#"702087.files/image003.gif">

Рисунок 3. - Связь клиента с базой данных

.4.7 СУБД MySQL- очень быстрая, надежная система управления реляционными базами данных (СУБД). База данных позволяет эффективно хранить, искать, сортировать и получать данные. Сервер MySQL управляет доступом к данным, позволяя работать с ними одновременно нескольким пользователям, обеспечивает быстрый доступ к данным и гарантирует предоставление доступа только имеющим на это право пользователям. Следовательно, MySQL является многопользовательским, многопотоковым сервером. Он применяет SQL, используемый по всему миру стандартный язык запросов для баз данных. составляет все более значительную конкуренцию таким дорогостоящим гигантам как Oracle и MS SQL Server. Немаловажным фактором является то, что СУБД MySQL распространяется совершенно бесплатно. В настоящее время пакет MySQL доступен как программное обеспечение с открытым исходным кодом.отличается хорошей скоростью работы, надежностью, гибкостью. Работа с ней, как правило, не вызывает больших трудностей. Поддержка сервера MySQL автоматически включается в поставку PHP.

2. Практический раздел

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

.1 Характеристика сайта и сравнительный анализ уже существующих сайтов. Выбор сайта-прототипа

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

Целью создания сайта является:

-          Предоставить пользователю выбор товаров и услуг;

-          Представить сравнительную характеристику цен на данный товар;

-          Предоставить контактную информацию о компании продавца;

-          Дать посетителям своевременную и полную информацию.

.2 Программное обеспечение для реализации сайта

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

.        Персональный компьютер с операционной системой Windows 7

.        Сервер Apache 2.2.4

.        СУБД MySQL 5.1.4.

.        Web-интерфейс phpMyAdmin 3.3.7

5.       Верстка и редактирование: Adobe Dreamweaver CS3, Notepad++, Artisteer 3.1.

6.       Создание графических элементов: Adobe Photoshop CS3, CorelDRAW Graphics Suite X3.

7.       CMS Joomla 2.5

Для разработки web-сайта на локальном компьютере необходимо установить пакет программ Denwer, в который входят такие программы как web-сервер Apache, СУБД MySQL, phpMyAdmin web-интерфейс для работы с СУБД MySQL, язык web-программирования php.

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

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

Проведя запрос по магазинам которые будут учавствовать в моём сводном сайте каталоге пришли к определённой структуре полей БД.

Рисунок 5 - Структура полей БД

Рисунок 6 - ER диаграмма

Для хранения практически всей информации о сайте Joomla использует базу данных MySQL. Она позволяет хранить значительные объемы данных, при этом предоставляет нам удобный интерфейс для взаимодействия с ней. Для нашего сайта необходимо создать базу данных “katalog”, в которой создаются и хранятся таблицы. Для четкого разделения хранящейся на сайте информации составлена ER-диаграмма базы данных для сайта.

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

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

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

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

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

.        Создание основных модулей сайта.

Решаем каждую из подзадач последовательно.

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

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

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

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

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

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

Имя хоста MySQL - localhost        

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

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

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

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

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

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

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

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

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

Рабочее пространство сайта делится на блоки. Эскиз сайта представлен на рисунке 9.

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

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

Дерево каталога товаров - здесь располагается меню выбора товаров и навигации сайта;

Строка поиска - здесь располагается динамический поисковик по сводной базе данных с сортировкой по цене;

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

Блок дополнительной информации - здесь располагается счетчик, правовая информация

Для навигации на сайте все меню сделаны многоуровневыми, с вложенными меню. Данный тип навигации отличается удобством для пользователя сайта - с главной страницы можно попасть в любой раздел сайта. Также данный тип меню корректно отображается браузерах Mozila Firefox, Safari, Google Chrome, Opera и Internet Explorer.

Макет сайта, цвета и шрифты, настройки меню и блоков в соответствии требуемому стилю и цвету редактируем с помощью прикладной программы Artisteer 3 - редактор шаблонов для системы управления сайтом Joomla. Редактор шаблонов представлен на рисунке 10.

Рисунок 10 - Редактор шаблонов Artisteer 3 для Joomla

2.5 Организация фотогалереи на сайте

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

Более всего для создания фотогалереи на сайте подходит компонет Phoca Gallery для Joomla. При всей своей простоте фотогалерея Phoca Gallery позволяет реализовать массу возможностей, в том числе и разнообразные слайдшоу для Joomla. Phoca Gallery - позволяет размещать изображение, делать их доступными для скачивания, сами изображения можно увеличивать для подробного просмотра. Этот компонент галереи для Joomla позволяет размещать не только изображения, но и видео ролики. Как изображения, так и видео ролики можно ставить на голосование, присваивать им рейтинг. Кроме того, Phoca Gallery синхронизирована с Google и можно пометить на карте Google, где были сделаны фотографии или видеоролики. Категории можно настроить разным стилем изображения, разным размером. Способ и стиль изображения картинок - регулируется с помощью плагинов Phoca Gallery, который надо загружать, после того, как установлен основной компонент галереи Joomla.

Создание фотогалереи на сайте

В категориях Phoca Gallery создается новая категория «Товары»;

Во вкладке «Изображения» добавляются необходимые фотографии

Делается привязка фотографий к категории;

Получаемый результат в виде рекламы товаров.

Рисунок 11 - Реклама товаров

.6 Работа страниц сайта.

На рисунках 12 - 15 отображена работа страниц сайта.

Меню категории Меню поиска, сортировки и отображения результата

Рисунок 12 - Компоновка меню сайта

Сортировка товаров может быть как в левом меню в виде дерева так и в поле поиска в выплывающем меню:

Рисунок 13 - Варианты сортировки

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

Рисунок 14 - Функция просмотра товара

Рисунок 15 - Функция поиска продавца с минимальной ценой

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

Разработать и запустить сайт в сеть это лишь малая часть успеха.

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

Для этого делается человекопонятный интерфейс без лишней рекламы.

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

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

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

Заключение

сайт информационный каталог

В общей части был проведен обзор существующих типов сайтов, сравнение наиболее популярных CMS, обеспечения работы веб-сайта: описание информационного обеспечения, программного обеспечения и технического обеспечения сайта. Рассмотрены теоретические основы построения веб-сайтов: принципы работы web-сервера, основы работы с базой данных MySQL, взаимодействие PHP сайта и базы данных MySQL, даны основные преимущества динамического веб-сайта.

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

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

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

Административная часть содержит все необходимые инструменты для осуществления любых изменений на сайте.

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

Литература

1. Классификация сайтов [Электронный ресурс]. - Режим доступа: http://ru.wikipedia.org/wiki/%D0%A1%D0%B0%D0%B9%D1%82 (дата обращения: 6.6.2013).

. Apache-сервер [Электронный ресурс]. - Режим доступа: http://wikipedia.org/wiki/Apache.ru (дата обращения: 6.6.2013).

. PHP [Электронный ресурс]. - Режим доступа: http://ru.wikipedia.org/wiki/PHP (дата обращения: 6.6.2013).

. MySQL [Электронный ресурс]. - Режим доступа: http://ru.wikipedia.org/wiki/MySQL (дата обращения: 6.6.2013).

. Определение CMS [Электронный ресурс]. - Режим доступа: http://ru.wikipedia.org/wiki/%D1%E8%F1%F2%E5%EC%E0_%F3%EF%F0%E0%E2%EB%E5%ED%E8%FF_%F1%EE%E4%E5%F0%E6%E8%EC%FB%EC (дата обращения: 6.6.2013).

. Доли рынка CMS [Электронный ресурс]. - Режим доступа: http://itrack.ru/research/cmsrate (дата обращения: 6.6.2013).

7. Система управления контентом uCoz [Электронный ресурс]. - Режим доступа:http://ru.wikipedia.org/wiki/UCoz (дата обращения: 6.6.2013).

. Система управления контентом 1С-Битрикс [Электронный ресурс]. - Режим доступа: http://ru.wikipedia.org/wiki/1%D0%A1-%D0%91%D0%B8%D1%82%D1%80%D0%B8%D0%BA%D1%81 (дата обращения: 6.6.2013).

. Система управления контентом Joomla [Электронный ресурс]. - Режим доступа http://ru.wikipedia.org/wiki/Joomla (дата обращения: 6.6.2013).