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

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

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

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

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

тело функции

}

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

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

или://домен.ru/script.php?num=10&type=new&v=text (если указывается несколько переменных)

Метод POST. Теперь давайте рассмотрим, как работает метод POST. Для отправки данных методом POST нужно использовать HTML-формы. За способ отправки данных формы отвечает атрибут method тега form. Поэтому нужно в атрибуте method тега form указать значение POST. В остальном форма может быть та же, как и для метода GET.

Пользователь вводит данные в поля формы и нажимает "Отправить". Далее данные записываются в массив $_POST. В ячейке $_POST[name] находится имя пользователя, а в ячейке $_POST[lastname] фамилия. После этого массив передается второму PHP - файлу.

В PHP в независимости, каким способом были отправлены данные - методом POST или методом GET - получить данные можно используя массив $_REQUEST.

Конструкция включений include. Конструкция include предназначена для включения файлов в код сценария PHP во время исполнения сценария PHP. Конструкция include позволяет включать файлы в код PHP скрипта во время выполнения сценария. Синтаксис конструкции include выглядит следующим образом:имя_файла;

Конструкция include позволяет включать удаленные файлы, если такая возможность включена в конфигурационном файле PHP. [7]

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

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

СУБД MySQL классифицируется как реляционная система управления базами данных (RDBMS- relational database management system). Слово "реляционная" обозначает популярную разновидность СУБД, в которых отслеживается "соответствие" записей в одной таблице на "соответствие" записей в другой таблице. Мощь реляционных СУБД заключается в их способности выбирать соответствующие данные из этих таблиц и создавать ответы на вопросы, которые нельзя получить только из одной такой таблицы.

Для общения с СУБД MySQL применяется язык SQL (Stuctured Query Language - язык структурированных запросов). В настоящее время SQL является стандартом работы с базами данных, и все основные СУБД понимают его. SQL включает много разных типов операторов, разработанных для взаимодействия с базами данных.

Запросы к базе данных можно вводить только после подключения к серверу. Для ввода запроса в mysql достаточно его напечатать, ввести в конце точку с запятой и нажать клавишу <Enter>. После ввода запроса mysql передает его серверу на выполнение. После обработки запроса сервер передает результат клиенту MySQL. Клиент отображает полученный результат.отображает результат запроса и строку, которая показывает, из скольких строк состоит результат и сколько времени затрачено на выполнение запроса. Программа MySQL воспринимает точку с запятой как окончание запроса, поэтому по мере необходимости запросы могут занимать несколько строк. Выборка существующих данных фактически является самой частой операцией при работе с базами данных. В числе других наиболее часто используемых операций над таблицами баз данных являются вставка новых данных, их модификация и удаление. [10]

Выборка данных. Оператор SELECT позволяет производить выборку и отображать информацию из таблиц любым способом. Можно сделать выборку сразу всех столбцов и всех строк таблицы:

> SELECT * FROM president

Или сделать выборку одного столбца из одной строки таблицы:

mysql> SELECT birth_date FROM president WHERE last_name = "Eisenhover"

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

Общий синтаксис оператора SELECT имеет вид что выбираетсятаблица или таблицыусловия, которые должны удовлетворяться

Для создания оператора SELECT необходимо определить, что требуется выбрать из таблиц. Для этой цели служат предложения FROM и WHERE.

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

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

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

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

Одной из причин популярности сервера баз данных MySQL, наряду с ее доступностью и производительностью, можно считать ее интеграцию с PHP. Стандартная сборка PHP почти всегда включает в себя библиотеки для работы с MySQL, предоставляя разработчикам все необходимые инструменты для взаимодействия с сервером баз данных. Функции для работы с MySQL, которые доступны при написании проектов с использованием PHP, решают главные задачи, возникающие при необходимости обращения к базе данных из сценария PHP - соединение с сервером баз данных, передача ему запроса и извлечение результатов, которые вернул сервер._connect. Эта функция устанавливает соединение с сервером server MySQL и возвращает дескриптор соединения с базой данных, по которому все другие функции, принимающие этот дескриптор в качестве аргумента, будут однозначно определять выбранную базу данных. Вторым и третьим аргументами этой функции являются имя пользователя username и его пароль password соответственно:

<?php

$dblocation = "localhost"; // Имя сервера

$dbuser = "root"; // Имя пользователя

$dbpasswd = ""; // Пароль

$dbcnx = @mysql_connect($dblocation,$dbuser,$dbpasswd);(!$dbcnx) // Если дескриптор равен 0 соединение не установлено

{

echo("<P>В настоящий момент сервер базы данных не доступен, поэтому корректное отображение страницы невозможно.</P>");

exit();

}

?>

Переменные $dblocation, $dbuser и $dbpasswd хранят имя сервера, имя пользователя и пароль, и, как правило, прописываются в отдельном файле (к примеру, config.php), который потом вставляется в каждый PHP-файл, в котором имеется код для работы с MySQL:

<?

$dblocation = "localhost";

$dbname = "forum";

$dbuser = "root";

$dbpasswd = "";

?>

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

Работая с MySQL из командной строки, необходимо указывать, какая база данных нужна:

books ;

То же самое необходимо и при подключении из Web. Это может сделать РНР-функция mysql_select_db():

_select_db ("books") ;

Чтобы осуществить запрос, можно воспользоваться функцией mysql_query(). Однако прежде запрос необходимо настроить:

$query = "select * from books where ".$searchtype." like '%".$searchterm."%'";

В этом случае будет отыскиваться значение, введенное пользователем (Ssearchterm), в поле, которое указал пользователь (Ssearchtype).

Для отсоединения от сервера баз данных существует функция mysql_close(), но, как правило, в ее использовании нет необходимости.

_close( database_connection);

Если было установлено постоянное соединение, то команда на закрытие его будет проигнорирована, а в случае использования функции mysql_connect() соединение будет разорвано по окончании работы PHP-сценария.

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

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

Компания Rebaz организована в 1998 году, и уже 12 лет работает на рынке печатных услуг города Новокузнецка. Основное направление деятельности - поддержание корпоративного стиля компании-заказчика и обеспечение его необходимой печатной и сувенирной продукцией. Территориально компания расположена в Центральном районе города Новокузнецка.

В рамках основного вида деятельности предприятие занимается:

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

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

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

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

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

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

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

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

Сайт компании «Изограф» (Новокузнецк, Россия)

Сайт находится по адресу #"justify">На сайте реализованы следующие возможности:

просмотр контактной информации о компании: история и преимущества работы с компанией «Изограф» (на главной странице сайта), а также почтовый (фактический) адрес компании и электронные адреса (сквозные для всего сайта, в нижней части страницы);

просмотр информации о постоянных заказчиках: список компаний со ссылками на сайты;

последние новости компании;

каталог отпечатанной продукции в виде фотогалереи;

возможность загрузки прайс-листа в формате .xml;

дано описание оборудования и технологии печати.

Сайт компании «Рекорд» (Новокузнецк, Россия)

Сайт находится по адресу #"justify">На сайте реализованы следующие возможности:

раздел о компании (история создания, достижения компании к сегодняшнему времени, на всех страницах крупно дан номер телефона, а в нижнем левом углу - контактная информация);

последние новости компании;

каталог продукции с кратким описанием;

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

- Сайт компании «UK colour printing» (Derby, England)

Сайт находится по адресу #"justify">На сайте реализованы следующие возможности:

раздел о компании: преимущества компании, контакты (номер телефона и электронная почта также указаны на всех страницах сайта) ;

реализована аутентификация пользователей;

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

раздел Помощь, в котором подробно описано как заказать продукцию, как отметить заказ, как происходит доставка и т.д.);

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

- Сайт компании «Toppan printing company America» (New York, )

Сайт находится по адресу #"justify">На сайте реализованы следующие возможности:

раздел о компании: история, местоположение офиса и фабрики, ценности компании, вакансии, отзывы клиентов, контакты (контактные данные и фото руководителей компании) ;

реализован поиск по сайту;

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

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

даны ссылки на интернациональные сайты компании.

2.3 Сравнительный анализ рассмотренных сайтов и выбор сайта-прототипа

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

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

просмотр информации о компании;

функция обратной связи;

описание изделий, цена и фотогалерея готовой продукции;

форма заказа продукции;

описание процесса печати;

возможность скачать полный прайс-лист;

контактная информация с указанием банковских реквизитов

Таблица 1 - Сравнительный анализ основных функций сайтов

Рассмотренные сайтыФункции, необходимые создаваемому сайтуПросмотр информации о компании и контактыФункция обратной связиОписание изделий, цена и фотогалерея готовой продукцииФорма заказа продукцииОписание процесса печатиВозможность скачать прайс-листСайт компании «Изограф»VVVVСайт компании «Рекорд»VVVVVСайт компании «UK colour printing»VVVVVСайт компании «Toppan printing company America»VVV

Просмотр информации о компании и контактов.

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

Функция обратной связи.

В полной мере функция обратной связи реализована на сайтах компаний «Рекорд» и «UK colour printing» здесь представлена в которой требуется заполнить данные в полях: тема сообщения, текст сообщения, данные отправителя, а также капча для защиты от спама. Эта функция важна для сайта, т.к. пользователю намного удобнее написать и отправить письмо прямо с сайта, нежели открывать новое окно и писать обычное электронное письмо.

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

На всех сайтах есть описания изготавливаемой продукции по категориям, с фотографиями готовых изделий и ценами. Только на сайте «Toppan printing company America» нет цен на готовую продукцию, т.к. компания занимается выпуском и печатью книг, а в этой области сложно произвести унификацию и выставить четкие цены, из-за большого количества нюансов.

Форма заказа продукции.

Эта функция представлена только на сайте «UK colour printing»: заполняется форма, выбираются нужные параметры печати (цветность, плотность бумаги, размер, тираж), а затем калькулятор выдает стоимость всего тиража. Функция значительно сокращает время на оформление заказа.

Описание процесса печати.

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

Возможность скачать прайс-лист.

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

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

.4 Задачи web-сайта

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

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

. более высокая скорость обратной связи;

. дать пользователю своевременную и полную информацию о продукции.

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

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

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

Рисунок 4 - Схема веб-сайта

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

После установки пакета программ Denwer и запуска web-сервера, необходимо в адресной строке интернет - браузера ввести следующий адрес: «#"justify">Загрузится web - интерфейс для работы с СУБД MySQL. Сначала необходимо создать базу данных. После создания базы данных необходимо создать таблицу. Для создания таблицы необходимо в поле «имя» указать имя таблицы, в поле «поля» указать количество полей таблицы и нажать кнопку «пошел». Далее нужно указать имя каждого поля и тип, так же необходимо указать первичный ключ. После этого необходимо заполнить таблицу данными.

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

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

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

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

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

Рисунок 6- ER-диаграмма базы данных для сайта компании Rebaz

Структура таблицы jos_section (Рисунок 7) показывает какие основные параметры раздела сайта должны храниться в таблице сайта с указанием типа данных и кодировки ("jos_" это префикс названия всех таблиц Joomla).

Основные параметры таблицы jos_section (разделы сайта) следующие:

id (идентификатор);

title (название раздела);

alias (псевдоним);

image (изображение раздела, если необходимо);

scope (область, в которой располагается раздел, в данном случае все разделs относятся к области content);

image_position (позиция изображения);

description (описание раздела, которое можно форматировать либо через редактор, либо написанием HTML-кода в специальном окне);

published (статус публикации раздела, для обозначения используется двоичная система 0 - не опубликовано, 1 - опубликовано);

ordering (порядок показа раздела);

accsess (доступ, на данном сайте просмотр разделов, категорий и материалов доступен всем пользователям);

Рисунок 7- Структура таблицы jos_section

На рисунке 8 показана таблица jos_section (Разделы сайта) с заполнением основных данных, которые хранит таблица. Таким же образом хранится большая часть данных сайта и каждое изменение в Административной панели меняет и структуру таблиц MySQL.

Рисунок 8- Таблица jos_section с заполненными данными

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

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

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

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

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

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

Разработка шаблонной страницы сайта и создание основных модулей сайта.

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

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

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

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

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

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

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

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

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

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

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

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

Вертикальное меню продукции. Для основной навигации на сайте решено сделать многоуровневое вертикальное меню со всплывающими названиями категорий (Рисунок 11). Данный тип навигации отличается удобством для пользователя сайта. Навигация в виде выпадающего меню может применяться при большом количестве ссылок, для экономии места на странице сайта, к тому же оно корректно отображается в браузерах Mozila Firefox, Safari, Opera и Internet Explorer.

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

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

Всплывающее меню сайта написано на языке JavaScript с использованием программы AllWebMenus 5 PRO, которая является приложением для создания JavaScript и DHTML (динамических HTML-файлов). Создание меню происходит следующим образом:

Выбирается тип меню - вертикальное или горизонтальное.

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

Далее следует настройка меню для сайта Rebaz (оно должно быть соответствующим по стилю и цвету). Редактор стилей меню показан на рисунке 12.

Рисунок 12 - Редактор стиля меню в программе AllWebMenus 5 PRO

Для настройки использованы следующие параметры: выравнивание пунктов по левому краю, шрифт Century Gothic, размер шрифта 13 pt, цвет текста темно-коричневый #663300 в нормальном виде, #FF0066 - при наведении мыши и при клике на пункт меню, цвет рамки #E6B300, толщина рамки 2 pt, цвет фона FAB003. Далее создаются пункты меню, они названы так же как и разделы и подпункты меню - категории на сайте. При этом пункты отображаются постоянно, а пункты «всплывают» при наведении на соответствующий раздел.

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

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

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

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

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

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

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

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

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

Имя хоста MySQL - localhost

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

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

Имя БД MySQL - rebaz

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

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

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

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

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

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

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

Страница делится на блоки модули с указанием к какому модулю сайта привязываются блоки (Рисунок 17).

Рисунок 17 - Расположение блоков и соответствующих модулей сайта

Создается файл templateDetails.xml, в котором будут храниться блоки (основные модули), информация об авторе, прописываются все изображения используемые для сайта, файлы, входящие в состав шаблона.

Для сайта Rebaz созданы следующие модули:

<positions>

<position>logo</position> // Логотип компании

<position>search</position> // Строка поиска

<position>leftmenu</position> // Основное (левое) меню сайта

<position>mainbanner</position> // Главный баннер сайта, главное изображение (на главной странице)

<position>smallbanner</position> // Баннер категории, отображается на всех страницах, кроме главной

<position>slogan</position> // Слоган на главной странице

<position>user1</position> // Модуль с часто-заказываемой продукцией

<position>user2</position> // Модуль с часто-заказываемой продукцией

<position>user3</position> // Модуль с часто заказываемой продукцией

<position>bottommenu</position> // Нижнее меню сайта

<position>footer</position> // Строка авторских прав

</positions>

Параметры модулей задаются во вкладке Менеджер модулей Администраторской панели, здесь можно создать модуль со свободным HTML-кодом или выбрать готовые (все модули для данного сайта прописываются HTML-кодом). Указывается позиция в соответствии с файлом templateDetails.xml, состояние публикации (включен/выключен), права доступа (в сайте Rebaz все модули общедоступны), выбираются страницы на которых должен отображаться модуль, каждый модуль имеет свой идентификатор. Создается файл index.php, в котором и происходит разметка страницы сайта и разделение на блоки. Полностью файл index.php представлен в Приложении А.

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

<jdoc:include type="modules" name="logo" />

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

<div id="leftpart"> // Блок logo создан внутри блока leftpart

<div id="logo">

<jdoc:include type="modules" name="logo" /> // Включается модуль logo

</div>

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

Для того, чтобы задать стиль блоков сайта, создается каскадная таблица стилей (CSS), назовем ее template.css. Полностью файл template.css представлен в Приложении Б.

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

#leftpart {: 0;: 0;: 230px;

float:left; }

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

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

Более всего для создания форм к сайту Rebaz подходит компонент ArtForms для Joomla! 1.5. Этот компонент дает широкие возможности для создания разнообразных индивидуальных форм на сайте. ArtForms имеет следующие преимущества:

неограниченное количество форм и полей;

сохранение форм в базе данных;

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

поддержка Captcha.

Этапы создания «обратной связи»:

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

обязательные - имя отправителя(ввод данных), e-mail отправителя (ввод данных), текст сообщения (текстовое поле);

необязательные - название компании-заказчика (ввод данных), номер телефона (ввод данных), тема сообщения (ввод данных).

Установка компонента ArtForms через Установку/Удаление расширений в Административной панели Joomla!

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

Для сайта используются следующие настройки:

название формы - «поговорите с нами»;

- e-mail адрес - [email protected];

- проверочная система - Captcha Form.

Разрешение загрузки файлов - если загрузка разрешена, то определяется размер прикрепляемого файла, количество вложенных файлов, выбор разрешенных типов файлов. Для вложения используются следующие типы файлов: doc (Microsoft Word), pdf (Adobe Acrobat), gif, jpg, png, cdr (Corel Draw), psd (Adobe Photoshop).

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

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

Рисунок 18 - Форма обратной связи сайта Rebaz

Все данные компонента ArtForms хранятся в базе данных: в таблице jos_artforms - параметры формы, jos_artforms_inbox - входящие сообщения, в jos_artforms_items - поля таблицы и их свойства.

Принцип работы формы: после заполнения пользователем полей, и нажатия кнопки «Отправить» форма проверяет была ли произведена попытка заполнения, затем проверяется были ли заполнены все обязательные поля и правильность введения Captcha, если поля заполнены не верно или не заполнены, форма выдает сведения об ошибке. Если все верно, то с помощью команды sendmail отправляется сообщение на указанный электронный адрес. А пользователь видит текст сообщения «Форма успешно отправлена, мы свяжемся с Вами как можно скорее».

Заключение

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

В практической части приведены основные этапы создания сайта компании Rebaz. Дана характеристика объекта проектирования сайта - сайт компании, занимающейся изготовлением сувенирной и полиграфической продукции. Рассмотрены сайты компаний из печатной отрасли, причем это не только российские разработки, но и западные сайты. Проведен сравнительный анализ разработок сайтов, выделены основные функции, работающих сайтов и на их основе проанализированы основные функции необходимые для сайта компании Rebaz. Выбран сайт прототип - сайт компании «UK colour printing» (Derby, England), т.к. реализованные в нем функциональные возможности более всего удовлетворяют потребностям создаваемого сайта. Для увеличения количества клиентов и повышения уровня информации о предмете, администрацией компании было принято решение о создании электронного ресурса компании. Электронный ресурс должен не только предоставить информацию о сфере деятельности и контактную информацию о компании, но и предоставить возможность обратной связи посредством сети интернет. Возможность подробно узнать о продукции, способах печати и посмотреть уже готовые работы через интернет может привлечь новых клиентов.

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

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

1.Дизайн-студия Smart [Электронный ресурс]: типы сайтов, или классификация интернет ресурсов. Режим доступа: #"justify">Приложение А

Шаблонная страница сайта index.php

<?php

/**

* @copyrightCopyright (C) 2005 - 2010 Open Source Matters. All rights reserved.

* @licenseGNU/GPL, see LICENSE.php

* Joomla! is free software. This version may have been modified pursuant

* to the GNU General Public License, and as distributed it includes or

* is derivative of works licensed under the GNU General Public License or

* other free or open source software licenses.

* See COPYRIGHT.php for copyright notices and details.

*/

// no direct access( '_JEXEC' ) or die( 'Restricted access' );_once (dirname(__FILE__).DS.'/ja_vars.php');

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "#"justify"><html xmlns="#"justify"><head>

<jdoc:include type="head" />

<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />

</head>

<body>

<div align="center">

<div id="main" align="left">

<!-- BEGIN: LEFTPART -->

<div id="leftpart">

<div id="logo">

<jdoc:include type="modules" name="logo" />

</div>

<?php if($this->countModules('search')) : ?>

<div id="search">

<jdoc:include type="modules" name="search" />

</div>

<?php endif; ?>

<div id="leftmenu">

<jdoc:include type="modules" name="leftmenu" />

</div>

</div>

<!-- END: LEFTPART -->

<div id="mainpart">

<!-- BEGIN: BANNER -->

<?php

if ($_REQUEST["Itemid"] =="" || $_REQUEST["Itemid"] =="1") { ?>

<div id="mainbanner">

<jdoc:include type="modules" name="mainbanner" />

</div>

<?php }else { ?>

<div>

<jdoc:include type="modules" name="smallbanner" />

</div>

<?php } ?>

<?php

if ($_REQUEST["Itemid"] =="" || $_REQUEST["Itemid"] =="1") { ?>

<div>

<jdoc:include type="modules" name="slogan" />

</div>

<!-- END: BANNER -->

</div>

<div id="module">

<jdoc:include type="modules" name="user1" />

</div>

<?php }else { ?>

<div >

<table>

<tr valign="right">

<td>

<jdoc:include type="component" />

</td>

</tr>

</table>

</div>

<?php } ?>

</div>

</div>

<div align="center">

<div id="footer">

<div id="bottommenu">

<table width="741" align="center">

<tr>

<td width="741">

<jdoc:include type="modules" name="bottommenu" />

</td>

</tr>

</table>

</div>

<br />

<div id="copyright">

<jdoc:include type="modules" name="footer" />

</div>

</div>

</div>

</body>

</html>

Приложение Б

Каскадная таблица стилей template.css

/* COMMON STYLE

-------------------------------------------------------- */{left: 0;top: 0;

background: url(../images/back.gif);attachment: scroll;position: top-center;:100%; :auto;

color: #630;family:Century Gothic, Tahoma; size: 12pt; height: 18pt;

}, category.text {:#630; style: normal; face:Century Gothic, Tahoma; size: 11pt; height: 14pt}{:#630; style: normal; face:Century Gothic, Tahoma; align:center; size: 11pt; height: 13pt

}{:#630; style: normal; face:Century Gothic, Tahoma; size: 11pt; height: 13pt

}{:#630; style: normal; face:Century Gothic, Tahoma; size: 10pt; height: 13pt

}{color: #FC0; : #630; family:Century Gothic, Tahoma; size:10.5pt

}{: #F09; style: normal; decoration: none; size: 13pt

}:link {: #630; decoration: underline

}:hover {: #F60; decoration:none;

}:link {color: #FC0; text-decoration:none;}{color: #630; font-family:Century Gothic, Tahoma; font-style:normal; font-size:15pt, line-height: 15pt}{color: #F60; font-family:Century Gothic, Tahoma; font-style:normal; font-size:14pt, line-height: 14pt}{color: #F60; font-family:Century Gothic, Tahoma; font-style:normal; font-size:12pt, line-height: 14pt}

/* FORM

-------------------------------------------------------- */{: 0;: 0;

}label {: pointer;

}

.inputbox {: 3px 5px;family: "Century Gothic", "Tahoma";size: 12px;

}

.button {: 0;: 80px;: 30px;: #F60;: #FFF;size: 13px;transform: uppercase;family:"Century Gothic";

}

.button:hover, .button:focus {: #F09;: #FFF;

}

.inputbox:hover, .inputbox:focus {: #FFFFCC;

}.nopad {: 70%;collapse: collapse;: 0;: 0;bottom: 15px;left: 30px;

}

#category.text {family: "Century Gothic", "Tahoma";size:12px;style:normal;

}

/* BANNER

-------------------------------------------------------- */

#main {color: #FFFFFF;: 932px;

}

#leftpart {: 0;: 0;: 230px;:left;

}

#mainpart {left: 231px;left: 0px;

}

# module {: 0;: 0;:left;

}

#logo {: 190px;: 94px;: 0px;: 20px;

}

#search {:#F09;family: "Century Gothic";

}

#search .inputbox {: 120px;: 1px solid #F09;: 3px 5px;: #630;: #FC3;size: 100%;

}

#leftmenu{

}

#mainbanner {: 700px;: 336px;

}

#smallbanner{: 700px;: 184px;

}

#slogan {: 700px;: 200px;: 250px;: 360px;

}

/* FOOTER

-------------------------------------------------------- */

#footer {

}

#bottommenu {

}

#copyright {

}

Больше работ по теме: