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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сайт — это, прежде всего маркетинговый инструмент, который позволяет вашей компании достигать конкурентного преимущества. При грамотном формировании сайта оборот компании может увеличиться на 100% и более.

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

Потенциальные покупатели не стоят на месте и ищут среди множества сайтов:

— удобный интерфейс поиска товара;

— сравнивают цены на один товар на разных сайтах;

— расположение магазина в удобном для них месте.

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

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

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

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

Задачи:

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

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

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

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

1. Теоретический раздел

1.1 Классификация сайтов Классифицировать сайты можно по нескольким признакам, выделим основные признаки и отличия.

По доступности сервисов:

— Открытые — все сервисы полностью доступны для любых посетителей и пользователей;

— Полуоткрытые — для доступа необходимо пройти процедуру регистрации (обычно бесплатно);

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

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

— Интернет-магазин, пожалуй, один из самых популярных сегодня типов интернет-ресурсов, создаётся с целью облегчения процессов покупки. Основной упор при его разработке делается на функциональность: коммерческий сайт должен располагать удобным и эффективным интерфейсом. Интернет-магазины (торговые системы класса «business to customer») предоставляют возможность продаж через Интернет конечному покупателю, рядовому потребителю товаров и услуг.

Подобные веб-сайты могут быть интегрированы со складскими системами предприятия, логистическими цепочками и маркетинговыми информационными системами. Интернет-магазины предоставляют посетителю возможность совершения покупки «on-line», формируют дополнительный канал распространения продуктов и услуг компании. В результате создания сайтов такого типа появляются дополнительные возможности по организации маркетинговых исследований через Интернет. Веб-сайты такого вида могут быть снабжены системами проведения электронных платежей. [2]

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

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

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

— Корпоративный портал — внутренний информационный ресурс компании для коллективной работы над задачами, проектами и документами, для эффективных внутренних коммуникаций;

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

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

— Веб — сервис — сайт, созданный для выполнения каких предоставления услуг в рамках сети WWW:

— Доска объявлений;

— Каталог сайтов;

— Поисковые сервисы;

— Почтовый сервис;

— Веб — форумы;

— Блоговый сервис;

— Файлообменный сервис;

— Датахостинговый (хранение данных) сервис;

— Фотохостинг;

— Видеохостинг;

— Комбинированные веб — сервисы.

По технологии отображения:

— Статические — состоящие из статичных html страниц составляющих единое целое. Пользователю выдаются файлы в том виде, в котором они хранятся на сервере.

— Динамические — состоящие из динамичных php страниц. Содержимое генерируется по запросу специальными скриптами (программами) на основе других данных из любого источника.

По типам макетов:

— Фиксированной ширины (англ. rigid fixed) — размеры элементов страницы имеют фиксированное значение, независящее от разрешения, размера, соотношения сторон экрана монитора и размеров окна обозревателя, задаётся в абсолютных значениях — PX (пиксели).

— Резиновый макет (англ. adaptable fluid) — размеры несущих элементов, значения ширины, задаются относительным значением — % (проценты), страницы отображаются во весь экран монитора по ширине. По сути данный тип макета является частным случаем фиксированного типа макета .

— Динамично эластичный (англ. dynamically expandable elastic) — размеры большинства элементов, задаются относительными значениями. Все относительные пропорции размеров элементов всегда остаются неизменными, независимо от разрешения, размера, соотношения сторон экрана монитора, размеров окна и масштаба окна обозревателя. И всегда постоянны относительно окна обозревателя. [1]

1.2 Обеспечение работы веб-сайта

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

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

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

1.2.2 Программное обеспечение На рисунке 1 показана схема информационных потоков на сайте.

Рисунок 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-серверу.

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

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

Система управления содержимым (англ. Content management system, CMS) -информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления контентом (то есть содержимым). Главной целью такой системы является возможность собирать в единое целое и объединять на основе ролей и задач все разнотипные источники знаний и информации, доступные как внутри организации, так и за ее пределами, а также возможность обеспечения взаимодействия сотрудников, рабочих групп и проектов с созданными ими базами знаний, информацией и данными так, чтобы их легко можно было найти, извлечь и повторно использовать привычным для пользователя образом. [5]

CMS предоставляет следующие возможности, которые упрощают процесс создания, развертывания и управления сайтом:

— Интерфейс администрирования

— Хранение контента в базе данных

— Механизм ассоциации контента из базы данных с реальными страницами сайта

— Инструменты для авторизации пользователей

— Компоненты для создания навигации по сайту

— Управление визуальными темами

— Возможности Web 2.0 (форумы, блоги, вики и т. п.)

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

Доля рынка CMS в российском сегменте интернета по данным компании iTrack показана на рисунке 2.

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

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

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

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

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

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

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

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

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

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

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

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

— Доступ по FTP.

— Визуальный конструктор блоков.

— RSS импорт и экспорт.

— Общая авторизация — uID (uNet) или локальная (платно, однократно-бессрочно).

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

Недостатками CMS uCoz являются:

— стандартизированные шаблоны, которые сегодня установлены уже на тысячах сайтах;

— большой рекламный баннер, который можно отключить только за деньги;

— CMS не рассчитан на крупные проекты

— достаточно сложный процесс переноса сайта на другие CMS.

1.3.2 Система управления контентом 1С-Битрикс Система ориентирована на корпоративные сайты, информационные и справочные порталы, социальные сети, интернет-магазины, сайты СМИ, пригодна для создания других видов веб-ресурсов.

Для хранения данных сайта используется файловая система сервера и реляционная СУБД. Поддерживаются следующие СУБД: MySQL, Oracle, MS SQL.

«1С-Битрикс: Управление сайтом» продаётся в одной из восьми составленных фирмой-разработчиком редакций (Первый сайт, Старт, Стандарт, Эксперт, Малый бизнес, Бизнес, Веб-кластер, Бизнес веб-кластер), определяющих набор модулей и функциональность системы. [8]

Количество модулей в устанавливаемой системе зависит от редакции продукта.

Для корректной работы с системой управления пользователям без знания языков HTML и PHP требуется предварительная настройка системы (создание шаблона на базе графического дизайна, создание структуры разделов и страниц, а также подключение модулей системы). Данную возможность предоставляют партнёры компании «1С-Битрикс».

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

Модули в 1С-Битрикс: Управление сайтом" — это набор программных компонентов, отвечающих за работу с различными типами баз данных.

Достоинствами 1С-Битрикс являются:

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

— Возможность интеграции с 1С. Все продукты Битрикс имеют возможности импорта/экспорта пользователей, продукции, отчетов из систем 1С.

— Хороший уровень защищенности от хакерских атак.

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

Недостатки 1С-Битрикс:

— По сравнению с бесплатными аналогами 1С-Битрикс достаточно медленная и требовательная к ресурсам система.

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

— Нестабильность системы, в частности возможны проблемы после обновления версии CMS.

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

Joomla — система управления содержимым (CMS), написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных MySQL. Важной особенностью системы является минимальный набор инструментов при начальной установке, который дополняется по мере необходимости. Это снижает загромождение административной панели ненужными элементами, а также снижает нагрузку на сервер и экономит место на хостинге.

Преимущества и возможности Joomla:

— Функциональность можно увеличивать с помощью дополнительных расширений (компонентов, модулей и плагинов).

— Имеется модуль безопасности для многоуровневой аутентификации пользователей и администраторов (используется собственный алгоритм аутентификации и «ведения» сессий).

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

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

— К преимуществам системы можно отнести то, что все компоненты, модули, плагины и шаблоны можно написать самому, разместить их в структурированном каталоге расширений или отредактировать существующее расширение по своему усмотрению. [9]

— Происходит регулярный выход обновлений.

— Начиная с версии 2.5 расширена поддержка баз данных. Уже реализована поддержка MsSQL, а в ближайшем будущем планируется добавить поддержку PostgreSQL, Oracle, SQLite

Недостатки Joomla:

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

— Нет полноценного редактирования таблиц.

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

— Возможны проблемы с индексацией поисковыми системами.

— Отсутствие службы технической поддержки пользователей.

— При обновлении системы могут возникать проблемы.

Подводя итоги обзора CMS можно сделать следующие выводы :

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

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

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

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

Хотя многие теги и правила HTML довольно хорошо определены, большинство производителей браузеров предоставляют расширения к этому языку, выходящие за рамки описания стандартного обобщенного языка разметки. Более того, сами браузеры мало способствуют укреплению норм языка разметки, что приводит к небрежному применению этой технологии. К тому же, в то время, как HTML следует использовать прежде всего для структурирования документа, многие разработчики также употребляют его для форматирования документа для его демонстрации. Функции HTML, связанные с форматированием, в конечном итоге будут полностью вытеснены каскадными таблицами стилей (Cascading Style Sheets, CSS). Впрочем, даже при наличии достаточной поддержки таблиц стилей в браузерах, многие разработчики продолжают употреблять таблицы HTML и характерные HTML-теги в дизайне своих страниц.

Расширяемый язык разметки (Extensible Markup Language, XML) является разновидностью SGML, модифицированной для Web; таким образом, он позволяет разработчикам задавать их собственный язык разметки. Значит, с помощью XML можно изобрести YML (Your Markup Language, Ваш язык разметки).

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

Таким образом, все еще актуально для разметки web-страниц пользоваться языком HTML.

1.4.2 Таблицы стилей

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

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

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

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

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

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

— когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами

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

— когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.

1.4.3 Web-сервер

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

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

Несмотря на то, что первоначально данный сервер разрабатывался для операционных систем UNIX, сейчас он адаптирован под операционную систему Windows. Web-сервер Apache — своего рода стандарт сервера в сети Интернет.

1.4.4 Языки сценариев и программирования Для реализации интерактивных функций на сайте необходимо использовать так называемые технологии web-программирования.

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

Перечислим наиболее широко распространенные технологии программирования, доступные web-разработчикам. Варианты web-программирования на стороне клиента:

Вспомогательные приложения:

— элементы управления ActiveX,

— апплеты Java;

Языки сценариев:

— JavaScript,

— VBScript.

Варианты web-программирования на стороне сервера:

Сценарии и программы CGI.

Программы программного интерфейса приложения (API) сервера:

— модули Apache;

— расширения и фильтры ISAPI;

— сервлеты Java.

Сценарии на стороне сервера:

— Active Server Pages (ASP/ASP.NET),

— ColdFusion,

— PHP.

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

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

PHP представляет собой язык с открытым исходным кодом для выполнения на сервере сценариев, создающих динамические web-страницы. Помимо независимости от браузеров он предлагает простое и универсальное, независимое от платформы решение для электронной коммерции и сложных web-приложений, в том числе управляемых базами данных. PHP подходит для программирования баз данных. Он поддерживает большинство имеющихся сегодня СУБД, включая MySQL, Oracle, MSSQL, Sybase и DB2.

1.4.5 Базы данных и СУБД для web-приложений Сегодня наиболее распространенным подходом для организации информационной базы web-приложений являются реляционные базы данных.

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

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

Функционирование БД обеспечивается совокупностью языковых и программных средств, называемых системой управления базами данных (СУБД).

Основная задача СУБД — предоставить пользователю БД возможность работать с ней, не вникая в детали на уровне аппаратного обеспечения. Иными словами, СУБД позволяет конечному пользователю рассматривать БД как объект более высокого уровня по сравнению с аппаратным обеспечением, а также предоставляет в его распоряжение набор операций, выраженный в терминах языка манипулирования данными высокого уровня (например, набор операций, которые можно выполнять с помощью языка SQL).

Сложные управляемые данными web-приложения по ряду причин используют СУБД. Во-первых, с помощью SQL web-программист может переложить большинство задач хранения и управления данными на СУБД. Во-вторых, СУБД лучше человека справляются с управлением большими объемами данных. В-третьих, БД хранят данные постоянно, в то время, как переменные и их данные в сценариях PHP обычно существуют лишь на протяжении запроса данной страницы. Благодаря этому постоянству СУБД могут принимать более разумные решения по поводу того, что относится к производительности работы с диском и кэшированию памяти.

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

СУБД обычно дают следующие преимущества:

— высокая целостность данных (не гарантируемая файлами);

— улучшенная непротиворечивость данных при множественном доступе;

— улучшенная защита;

— стандартная защита;

— различные представления, основанные на одних и тех же структурах;

— независимость от файловых структур;

— устранение избыточности информации;

— отображение в объекты;

— экономия дискового пространства благодаря объединению таблиц без потерь.

1.4.6 Архитектура баз данных для web-приложений Рассмотрим внешнее построение системы web-баз данных. Основная операция web-сервера проиллюстрирована на рисунке 3. Эта система состоит из двух объектов: web-браузера и web-сервера. Между ними должен существовать канал связи. Web-браузер посылает запрос на сервер, сервер отсылает обратно ответ. Для сервера, отсылающего обычные статические страницы, такая архитектура подходит. Архитектура же сайта, который включает в себя базу данных, несколько сложнее.

1) Web-браузер пользователя отправляет HTTP-запрос определенной web-страницы. Например, поиск статьи на сайте, используя HTML-форму. Допустим, страница с результатами поиска называется results.php.

2) Web-сервер принимает запрос на results. php, получает файл и передает его механизму РНР на обработку.

3) Механизм РНР начинает синтаксический анализ сценария. В сценарии присутствует команда подключения к базе данных и выполнения запроса в ней (поиск статьи). РНР открывает соединение с сервером MySQL и отправляет необходимый запрос.

4) Сервер MySQL принимает запрос в базу данных, обрабатывает его, а затем отправляет результаты — в данном случае, список статей — обратно в механизм РНР.

5) Механизм РНР завершает выполнение сценария, форматируя результаты запроса в виде HTML, после чего отправляет результаты в HTML-формате Web-серверу.

6) Web-сервер пересылает HTML в браузер, с помощью которого пользователь просматривает список необходимых статей.

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

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

1.4.7 СУБД MySQL

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

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

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

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

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

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

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

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

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

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

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

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

2. Сервер Apache 2.2.4

3. СУБД MySQL 5.1.4.

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 Построение базы данных сайта После установки пакета программ Denwer и запуска web-сервера, необходимо в адресной строке интернет — браузера ввести следующий адрес: «http://localhost/». На экран будет выведена информация о web-сервере и список необходимых для работы ссылок. Данный список представлен на рисунке 5. Для начала проектирования базы данных необходимо запустить web-интерфейс phpMyAdmin, для этого нужно перейти по ссылке «http://localhost/phpmyadmin».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Имя хоста MySQL — localhost

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

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

Имя БД MySQL — project

Joomla предоставляет возможность удаления существующих таблиц (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 — Реклама товаров

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

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

Меню категории Меню поиска, сортировки и отображения результата Рисунок 12 — Компоновка меню сайта Сортировка товаров может быть как в левом меню в виде дерева так и в поле поиска в выплывающем меню:

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

Выдача страницы сравнения товаров:

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

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

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

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

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

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

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

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