Разработка web-сайта организации (на материалах ООО "Автомир", г. Гомель)

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

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

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

В настоящее время большинство CMS используется первый метод управления ресурсом.

Анализ распространённых CMS (Wordpress, Drupal, Jaomla, DLE) позволяет сделать следующие выводы:

1) К достоинствам бесплатных CМS необходимо отнести саму бесплатность, как правило, открытый исходный код, что дает подстроить движок под себя и большое количество добавочных модулей, которые так же предоставляются бесплатно.

2) При использовании бесплатных CMS отсутствуют какие-либо гарантии безопасности.

3) В коммерческих ЦМС все наоборот. К достоинствам можно отнести профессиональную техническую поддержку, которая оперативно поможет Вам решить возникшие проблемы и ответит на вопросы. Коммерческие CMS постоянно обновляются и совершенствуются, учитывая пожелания клиентов.

4) Разработчики CMS обычно ориентируют на неопытных пользователей, которые не знакомы даже с основами HTML. Поэтому в инструкциях всё прописывают до самых мелочей. А требования к уровню людей, занимающихся поддержкой сайта, сведено до минимума.

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

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

7) Вопросы безопасности: в большинстве CMS возможность реализации PHP-including полностью исключается, однако реализация SQL-injection, XSS, возможна во многих случаях.

8) Некоторые CMS плохо индексируются и их не видят поисковые системы.

9) Большинство CMS не поддерживают субдомены.

10) Построение шаблона дизайна в линейном режиме. Если необходимо разные дизайнерские решения разместить на разных типах страниц, то придется написать достаточно сложный код в самом шаблоне.

11) Уязвимости широко распространённых CMS легко доступны для взломщиков.

2.3 Оптимизация кода

В исходном коде страницы можно наблюдать куски совсем ненужного кода.

Появляться там он может по двум причинам.

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

Вторая причина заключается в том, что даже профессиональные разработчики не всегда уделяют должное внимание «юзабилити», то есть удобству использования своего творения в будущем.

Могут встречаться неоптимальные решения в вёрстке, большие фрагменты кода JavaScript, прописанные в коде стили элементов, брошенные обрывки кода и др.

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

Для того, чтобы все страницы сайта были быстрее проиндексированы поисковой системой код страницы желательно иметь полегче. Кроме того, у некоторых поисковых систем существует ограничение на размер кода индексируемого документа. У всех поисковых систем этот объём может быть разным - 100 - 200 Кб.

Как более «дружественную» для поисковых систем вёрстку, можно назвать блочную. У блочной вёрстки существуют свои незначительные недостатки, но они окупаются более меньшим объёмом кода по сравнению с табличной. Такие странички быстрее загружаются в браузер, так как имеют объём кода на 30 - 50% меньше, чем у табличной.

2.4 Выбор и обоснование программных средств для разработки ресурса

Веб-сервер Apache

В качестве сервера выбираем HTTP-сервер Apache, который находится в свободным распространении (бесплатен).

Apache является кроссплатформенным сервером с поддержкой операционных систем: Microsoft Windows, GNU/Linux, FreeBSD, Mac OS, Novell NetWare, BeOS.

Основные достоинства сервера Apache - надёжность и гибкость конфигурации. К серверу подключаются внешние модули для работы с данными, использования СУБД аутентификации пользователя, изменения сообщений об ошибках и т. д. Сервер Apache разрабатывается и поддерживается Apache Software Foundation в рамках проекта свободного ПО Open Source, входит в состав СУБД Oracle и IBM WebSphere.

В настоящее время Apache является самым популярным HTTP-сервером в Интернете - около 50% веб-серверов используют Apache.

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

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

WEB-сервер Apache поддерживает более 400 модулей различного назначения. Некоторые модули разрабатываются Apache Software Foundation, основная часть модулей разрабатывается разработчиками в рамках проекта свободного ПО. Модули могут быть статически включены в состав сервера при компиляции либо динамически загружаться.

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

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

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

Существуют модули поддержки следующих языков программирования: PHP, Python, Ruby, Perl, ASP.

Веб-сервер Apache также поддерживает механизмы CGI и FastCGI для выполнения программ на самых разных языках программирования, в том числе C, C++, sh, Perl и Java.

Механизм Server Side Includes сервера позволяет динамически формировать HTML-страницы на стороне сервера. Для шифрования данных при обмене между клиентом и сервером используется механизм SSL на основе библиотеки OpenSSL. Для удостоверения подлинности web-сервера используются сертификаты X.509.

Механизмы обеспечения безопасности и разграничения доступа к данным, реализуемые сервером Apache:

1) Ограничение доступа к определенным директориям или файлам;

2) Механизм авторизации пользователей для доступа к директории по методу HTTP-Авторизации (mod_auth_basic) и digest-авторизации (mod_auth_digest);

3) Ограничение доступа к определенным директориям или всему серверу, основанное на IP адресах пользователей;

4) Запрет доступа к определенным типам файлов для всех или части пользователей;

5) Запрет доступа к конфигурационным файлам и файлам баз данных.

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

Для всех HTTP-ошибок и событий, таких как 404 (Not Found) или 403 (Forrbiden) могут быть установлены собственные обработчики и страницы.

Может быть реализована возможность запуска скриптов и отображения сообщений на разных языках.

Язык программирования PHP

PHP - это язык обработки гипертекста (HTML), используемый на стороне сервера (server side scripting language), конструкции которого вставляются в HTML-текст. В 2003 году вышла версия PHP 5.0 на базе машины Zend Engine 2 (фирма Zend Technologies Ltd), дает возможности для создания полномасштабных приложений, начиная с пятой версии его можно называть объектно-ориентированным. PHP является открытым программным продуктом, что означает его бесплатность и возможность создавать свои собственные расширения языка.

Язык PHP используется примерно на 52% из 14,5 миллионов сайтов, работающих под Apache, который в свою очередь является самым распространенным севером в интернет (по разным оценкам около 70%), популярность которого быстро растет.

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

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

Возможности PHP

1) Поддерживаемые технологии: платформы Win32 (9x/NT/2000/XP), UNIX, OS/2, QNX, MacOS, BeOS, OCX;

2) Совместимость с серверами: Apache (Win32, UNIX), phttpd, fhttpd, thttpd, ISAPI(Zeus, IIS), NSAPI, Roxen/Caudium, AOLServer;

3) Поддержка технологий COM, XML, Java, CORBA, WDDX, Macromedia Flash;

4) Развитая функциональность для работы с сетевыми соединениями;

5) Поддерживает свыше 20 баз данных и имеет развитую функциональность для работы с ними;

6) Возможность создания полноценных объектно-ориентированных приложений;

7) Сравнительно простой синтаксис и удобство в практическом использовании;

бесплатность;

8) Открытость кода, благодаря которой можно создавать собственные расширения языка

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

Синтаксис языка PHP позволяет быстро освоить этот язык любому, кто знаком с HTML.

Для того чтобы вставить php код в html-страницу, применяются специальные дескрипторы или теги.

Вставить php код в html файл можно, используя один из 4 стилей:

Вставить php код в стиле XML. В этом случае операторы php должны быть заключены в теги

< ?php

…………// здесь набор операторов php

?>

Вставить php код на html станицу в стиле SGML. В данном случае инструкции php кода должны быть заключены в дескрипторы вида:

< ?

………// набор операторов php

?>

Вставлять php код можно также в стиле ASP, для чего операторы php должны быть заключены в дескрипторы

<%

……. // набор операторов php

%>

Код php можно вставить в стиле сценариев html. В данном случае операторы должны находиться внутри тегов:

<script language = “php”>

…………. // набор операторов php кода

</script>

Выбор способа вставки php код в html файл полностью индивидуален, хотя чаще применяются стили XML и SGML. Иногда такие способы вставлять php код называют полной и сокращенной формой.

Каждая команда РНР обычно начинается с тэга "<?php" и заканчивается "?>". Если используется несколько команд подряд, они могут быть объединены внутри одной пары тэгов - в этом случае каждую команду необходимо отделять друг от друга символом ";".

В любом месте РНР-скрипта можно размещать комментарии. Для начала комментария используется символы "/*", а для его завершения - "*/". Если комментарий небольшой, удобней использовать символы "//" - тогда все, что следует за ними до конца строки, будет игнорироваться, подобно лишним символам пробела, табуляции и новой строки.

РНР позволяет использовать переменные - при этом их не нужно описывать так, как это делается в Visual Basic или Pascal. Просто вводят необходимую переменную там, где нужно и тогда, когда это нужно.

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

Например: <?php $a = 7; $b = 9.5; $c = "Hello"; ?>. Здесь переменной "а" присваивается значение "7", и она приобретает тип целочисленной. Переменная "b" обретает вещественный тип и становится равной "9,5". Строка "Hello" присваивается переменной "с", в результате чего она становится строковой. Для отображения переменных или результатов работы скрипта используется команда echo.

Рассмотрим основные функции PHP, применяемые для работы с MySQL сервером.

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

mysql_connect ([string $hostname] [, string $user] [, sting $password]);

Все параметры данной функции являются необязательными, поскольку значения по умолчанию можно прописать в конфигурационном файле php.ini. Если вы хотите указать другие имя MySQL-хоста, пользователя и пароль, вы всегда можете это сделать. Параметр $hostname может быть указан в виде: хост:порт.

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

Для закрытия соединения предназначена функция mysql_close(int $connection_id).

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

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

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

Постоянное соединение не закрывается после завершения работы скрипта, даже если скрипт вызвал функцию mysql_close(). Соединение привязывается к PID потомка веб сервера Apache (от имени которого он и работает) и закрывается лишь тогда, когда удаляется процесс-владелец (например, при завершении работы или перезагрузке веб-сервера Apache).

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

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

При работе с постоянными соединениями нужно следить, чтобы максимальное число клиентов Apache не преывшало максимального числа клиентов MySQL, то есть параметр MaxClient (в конфигурационном файле Apache - httpd.conf) должен быть меньше или равен параметру max_user_connection (параметр MySQL). [28,с.12-14]

Функция выбора базы данных

Функция mysql_select_db (string $db [, int $id]) выбирает базу данных, с которой будет работать PHP скрипт. Если открыто не более одного соединения, можно не указывать параметр $id.

// Попытка установить соединение с MySQL: if (!mysql_connect($server, $user, $ password)) { echo "Ошибка подключения к серверу MySQL"; exit; } // Соединились, теперь выбираем базу данных: mysql_select_db($db);

Функции обработки ошибок

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

mysql_errno(int $id);

mysql_error(int $id);

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

echo "ERROR ".mysql_errno()." ".mysql_error()."\n";

Функции выполнения запросов к серверу баз данных

Все запросы к текущей базе данных отправляются функцией mysql_query(). Этой функции нужно передать один параметр - текст запроса. Текст запроса может содержать пробельные символы и символы новой строки (\n). Текст должен быть составлен по правилам синтаксиса SQL. Пример запроса:

$q = mysql_query("SELECT * FROM mytable");

Приведенный запрос должен вернуть содержимое таблицы mytable. Результат запроса присваивается переменной $q. Результат - это набор данных, который после выполнения запроса нужно обработать определенным образом.

Функции обработки результатов запроса

Если запрос, выполненный с помощью функции mysql_query() успешно выполнился, то в результате клиент получит набор записей, который может быть обработан следующими функциями PHP:

mysql_result() - получить необходимый элемент из набора записей;

mysql_fetch_array() - занести запись в массив;

mysql_fetch_row() - занести запись в массив;

mysql_fetch_assoc() - занести запись в ассоциативный массив;

mysql_fetch_object() - занести запись в объект.

Также можно определить количество содержащихся записей и полей в результате запроса. Функция mysql_num_rows() позволяет узнать, сколько записей содержит результат запроса:

$q = mysql_query("SELECT * FROM mytable"); echo "В таблице mytable ".mysql_num_rows($q)." записей";

Запись состоит из полей (колонок). С помощью функции mysql_num_fields() можно узнать, сколько полей содержит каждая запись результата:

$q = mysql_query("SELECT * FROM mytable"); echo "В таблице mytable ".mysql_num_fields($q)." полей ";

Также есть возможность узнать значение каждого поля. Это можно сделать с помощью следующей функции:

mysql_result (int $result, int $row, mixed $field);

Параметр функции $row задает номер записи, а параметр $field - имя или порядковый номер поля.

Следует отметить, что функция mysql_result() универсальна: зная количество записей и количество полей, можно "обойти" весь результат, но в тоже время, скорость работы данной функции достаточно низка. Поэтому, для обработки больших наборов записей рекомендуется использовать функции mysql_fecth_row(), mysql_fecth_array(), и.т.д.

Функция mysql_fecth_row(int $res) получает сразу всю строку, соответствующую текущей записи результата $res. Каждый следующий вызов функции перемещает указатель запроса на следующую позицию (как при работе с файлами) и получает следующую запись. Если более нет записей, то функция возвращает FALSE.

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

Функция mysql_fecth_array(int $res [, int $result_type]) возвращает не ассоциативный массив, а массив, заданный необязательным параметром $result_type, который может принимать следующие значения:

MYSQL_ASSOC - возвращает ассоциативный массив;

MYSQL_NUM -возвращает массив с числовыми индексами, как в функции mysql_fecth_row();

MYSQL_BOTH - возвращает массив с двойными индексами, то есть вы можете работать с ним, как с ассоциативным массивом и как со списком (MYSQL_BOTH - это значение по умолчанию для параметра $result_type.

В PHP есть функция, возвращающая ассоциативный массив с одним индексом:

mysql_fetch_assoc(int $res);

Фактически, данная функция является синонимом для mysql_fetch_array($res, MYSQL_ASSOC);

Система управления базами данных MySQL

Ниже приведено описание важных характеристик СУБД MySQL.

Внутренние характеристики и переносимость

1) Написана на C и C++. Протестирован на множестве различных компиляторов.

2) Работает на различных платформах. See section 2.2.5 Операционные системы, поддерживаемые MySQL.

3) Для обеспечения переносимости используется GNU Automake, Autoconf и Libtool.

4) API для C, C++, Eiffel, Java, Perl, PHP, Python, Ruby и Tcl. See section 8 Интерфейсы для MySQL.

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

6) Очень быстрые дисковые таблицы на основе В-деревьев со сжатием индексов.

7) Очень быстрая базирующаяся на потоках система распределения памяти.

8) Очень быстрые соединения, использующие оптимизированный метод однопроходного мультисоединения (one-sweep multi-join).

9) Хеш-таблицы в памяти, используемые как временные таблицы.

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

Типы столбцов

1) Большое количество: целочисленные со знаком/беззнаковые, длиной в 1, 2, 3, 4 и 8 байтов, FLOAT, DOUBLE, CHAR, VARCHAR, TEXT, BLOB, DATE, TIME, DATETIME, TIMESTAMP, YEAR, SET и ENUM. See section 6.2 Типы данных столбцов.

2) С записями фиксированной и переменной длины.

3) Все столбцы имеют значения по умолчанию. С помощью INSERT можно вставить подмножество столбцов таблицы; столбцы, для которых явно не заданы значения, устанавливаются в значения по умолчанию.

Команды и функции

1) Полная поддержка операторов и функций в SELECT- и WHERE- частях запросов.

2) Полная поддержка для операторов SQL GROUP BY и ORDER BY с выражениями SQL. Поддержка групповых функций (COUNT(), COUNT(DISTINCT), AVG(), STD(), SUM(), MAX() и MIN()).

3) Поддержка LEFT OUTER JOIN и RIGHT OUTER JOIN с синтаксисом ANSI SQL и ODBC.

4) Разрешены псевдонимы для таблиц и столбцов в соответствии со стандартом SQL92.

5) DELETE, INSERT, REPLACE, and UPDATE возвращают число строк, которые были изменены. Вместо этого можно задать возвращение совпавших строк. Для этого следует установить флаг при соединении с сервером.

6) Команду SHOW, которая является специфической для MySQL, можно использовать для получения информации о базах данных, таблицах и индексах. Чтобы выяснить, как оптимизатор выполняет запрос, можно применять команду EXPLAIN.

7) Имена функций не конфликтуют с именами таблиц и столбцов. Например, ABS является корректным именем столбца.

8) В одном и том же запросе могут указываться таблицы из различных баз данных.

Безопасность

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

Масштабируемость и ограничения

1) Управляет очень большими базами данных. Компания MySQL AB. использует MySQL для работы с несколькими базами данных, которые содержат 50 миллионов записей, кроме того, нам известны пользователи, использующие MySQL для работы с 60000 таблицами, включающими около 5000000000 строк.

2) Для каждой таблицы разрешается иметь до 32 индексов. Каждый индекс может содержать от 1 до 16 столбцов или частей столбцов. Максимальная ширина индекса 500 бит (это значение может быть изменено при компиляции MySQL). Для индекса может использоваться префикс поля CHAR или VARCHAR.

Установка соединений

1) Клиенты могут соединяться с MySQL, используя сокеты TCP/IP, сокеты Unix или именованные каналы (named pipes, под NT).

2) Поддержка ODBC (Open-DataBase-Connectivity) для Win32 (с исходным кодом). Все функции ODBC 2.5 и многие другие. Например, для соединения с MySQL можно использовать MS Access. See section 8.3 Поддержка ODBC в MySQL.

Локализация

1) Сервер может обеспечивать сообщения об ошибках для клиентов на различных языках.

2) Полная поддержка нескольких различных кодировок, включая ISO-8859-1 (Latin1), немецкий, big5, ujis и многие другие. Например, скандинавские символы разрешены в именах таблиц и столбцов.

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

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

Клиенты и инструментарий

1) Включает myisamchk, очень быструю утилиту для проверки, оптимизации и восстановления таблиц. Все функциональные возможности myisamchk также доступны через SQL-интерфейс.

2) Все MySQL-программы можно запускать с опциями --help или -? для получения помощи.

Язык программирования JavaScript

JavaScript предназначен для создания интерактивных html-документов. Основные области использования JavaScript:

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

- проверка правильности заполнения пользовательских форм;

- решение "локальных" задач с помощью сценариев.

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

Язык JavaScript регистрозависимый, т.е. заглавные и прописные буквы алфавита считаются разными символами.

Литералы - это простейшие данные с которыми может работать программа. Литералы целого типа - целые числа в представлении: десятичном, например: 15, +5, -174. шестнадцатеричном, например: 0х25, 0хff. Шестнадцатеричные числа включают цифры 0 - 9 и буквы a, b, c, d, e, f. Записываются они с символами 0х перед числом. восьмеричном, например: 011, 0543. Восьмеричные числа включают только цифры 0 - 7. Вещественные литералы - дробные цисла. Целая часть отделяется от дробной точкой, например: 99.15, -32.45. Возможна экспоненциальная форма записи, например: 2.73e-7. В привычном виде это 2.73Х10-7, но в javascript знак умножения и 10 заменяются символом -e-.

Логические значения - из два: истина (true) и ложь (false). Строковые литералы - последовательность символов, заключенная в одинарные или двойные кавычки. Например: "ваше имя", 'ваше имя'.

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

Например: var test var _test var _my_test1

Каждой переменной можно присвоить значение либо при ее инициализации (объявлении), либо в коде самой программы. Оператор присваивания обозначается знаком равно (=), но знак равенства здесь не имеет своего прямого значения. В данном случае он лишь указывает на то, что данной переменной присвоили значение.

Например: var a=15 var b=23.15 var c='выполнено' var s=true

Каждая переменная имеет тип, определяемый значением переменной. Так в нашем примере: переменные a и b имеют тип number, переменная c имеет тип string, а переменная s - логический тип.

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

В javascript определены следующие операции:

+ сложение

- вычитание

* умножение

/ деление

% остаток от деления целых чисел

++ увеличение значения операнда на единицу

-- уменьшение значения операнда на единицу

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

Для того, чтобы можно было сравнивать два значения в javascript определены операции сравнения, результатом которых может быть только логическое значение: true или false:

< меньше

<= меньше или равно

== равно

!= не равно

>= больше или равно

> больше

В javascript определены логические операции:

&& - логическое И (AND),

|| - логическое ИЛИ (OR),

! - логическое НЕ (NOT).

Значение выражения A&&B истинно, если истинны оба оператора, и ложно в противном случае. Значение выражения A||B истинно, если значение хотя бы одного операнда истинно, и ложно в противном случае. Если значение операнда А истинно, то !A - ложно и наоборот.

Для строковых литералов определена операция конкатенация строк, т.е. их объединение. Обозначается эта операция знаком плюс (+). Результатом выполнения операции является также строка.

Пример: var st1="Привет"; var st2="Вася"; var st3=st1+st2;

В результате в переменной st3 будет значение "Привет Вася".

Javascript подключается напрямую в HTML-файл. Самый простой способ - это написать javascript-команды внутрь тега <script> где-нибудь в теле страницы.[26,c. 158-161]

Подключение

Когда браузер читает HTML-страничку, и видит <script> - он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.

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

<html>
<body>
<h1>Функция</h1>
<script type="text/javascript">
for(var i=1; i<=3; i++) {
alert("Выполнено "+i+" циклов!")
</script>
<h1>...Посчитали</h1>
</body>
</html>

В этом примере использовались следующие элементы.

<script type="text/javascript"> ... </script>

Тег <script> сообщает браузеру о том, что внутри находится исполняемый скрипт. Атрибут type говорит о том, что это javascript. Вообще говоря, атрибут может отсутствовать - разницы нет, но с точки зрения стандарта его следует указать.

Конструкция for

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

Объявление var i

Объявление переменной внутри цикла: i - локальная переменная.

Функция alert

Выводит сообщение на экран и ждет, пока посетитель не нажмет ОК

Вынос скриптов в заголовок HEAD

Обычно javascript стараются отделить от собственно документа.

Для этого его помещают внутрь тега HEAD, а в теле страницы по возможности оставляется чистая верстка.

В следующем примере javascript-код только описывает функцию count_rabbits, а ее вызов осуществляется по нажатию на кнопку input.

<html>
<head>
<script type="text/javascript">
function count_rabbits() {
for(var i=1; i<=3; i++) {
// оператор + соединяет строки
alert("выполнено "+i+"циклов!")
}
}
</script>
</head>
<body>
<input type="button" onclick="count_rabbits()" value="Выполнить цикл!"/>
</body>
</html>

Для указания запускаемой по клику функции в input был использован атрибут onclick. Это лишь вершина мощного айсберга javascript-событий.

Внешние скрипты

Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом, вот так:

<script src="/my/script.js"></script>

При этом файл /my/script.js содержит javascript-код, который иначе мог бы находиться внутри тега <script>.

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

Чтобы подключить несколько скриптов - используйте несколько таких тегов:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
...

При указании атрибута src содержимое тега игнорируется.

То есть одновременно подключить внешний файл и написать что-то внутри тега нельзя. Придется делать два разных тега <script>: первый с src, второй - с командами, которые будут выполнены после выполнения внешнего файла.

3. РЕАЛИЗАЦИЯ ПРОЕКТА РАЗРАБОТКИ WEB-САЙТА ООО «АВТОМИР»

3.1 Концепция присутствия организации в сети Интернет

Цели создания сайта могут быть такими:

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

необходимость увеличения трафика;

сокращение звонков в службу продаж;

упрощение процесса продаж;

упрощение процесса обратной связи.

Задачи создания сайта могут быть такими:

Увеличение лояльности клиентов;

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

сокращение расходов на службы технической и/или информационной поддержки;

увеличение объема продаж;

совершенствование и модернизация услуг.

3.2 Требования, предъявляемые к создаваемому сайту

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

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

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

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

Для удобства и эффективности работы сайта следует при разработке дизайна сайта обратить внимание на некоторые моменты:

Скорость загрузки сайта

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

Навигация на сайте

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

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

Графика на сайт

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

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

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

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

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

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

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

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

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

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

- приятная для глаз цветовая гамма;

- минимальное количество картинок.

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

Таким образом, требования к сайту сводятся к следующим:

- Сайт не должен содержать вредоносные программы или ссылки на них;

- сайт не должен нарушать законы РБ;

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

- сайт не должен содержать рекламные баннеры сомнительного характера, вводящие пользователей в заблуждение;

- сайт не должен содержать рекламу с оплатой за показы;

- сайт не должен содержать редирект;

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

- сайт должен корректно отображаться во всех браузерах;

- сайт должен быстро загружаться;

- сайт должен содержать более одной страницы.

3.3 Описание бизнес-процесса создания сайта

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

Этапы при создании сайта:

Обработать заказ на создание сайта;

разработать дизайн сайта и утвердить его;

заполнить сайт материалами;

организовать продвижение сайта;

опубликовать сайт в сети Интернет.

Этапы бизнес-процесса создания web-сайта можно отобразить с помощью Сase-средства AllFusion Process Modeler (BpWin).

Для начала моделирования были определены:

Цель моделирования - описание бизнес-процесса разработки сайта.

Основные управленческие механизмы (управление):

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

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

Входные данные (вход):

- информационный материал для создания и наполнения сайта;

- заказ клиента (поступление запроса от клиента на оказание данной услуги).

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

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

Исполнители (механизмы):

- программное обеспечение

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



Рисунок 3.1 - Контекстная диаграмма бизнес-процесса создания сайта в среде BPWin

Декомпозиция контекстной диаграммы представлена на рисунках 3.2-3.6.

Рисунок 3.2 - Декомпозиция контекстной диаграммы



Рисунок 3.3 - Диаграмма А2 «Разработать дизайн сайта и утвердить его»

Рисунок 3.4 - Диаграмма А4 «Организовать продвижение сайта»



Рисунок 3.5 - Диаграмма А5 «Опубликовать сайт в сети Интернет»

На рисунке 3.6 отображено дерево узлов диаграммы.

Рисунок 3.6 - «Дерево диаграммы»

3.4 Эскизы страниц сайта

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

В данном случае система будет разработана «с нуля», поэтому начинаем с разработки структуры сайта.

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

ЗАГОЛОВОК (ШАПКА)
ЗАГОЛОВКИ НОВОСТЕЙ	ОСНОВНОЕ СОДЕРЖАНИЕ	ПОИСК
		ИНТЕРЕСНАЯ ИНФОРМАЦИЯ
ПОДВАЛ

Рисунок 3.7 - Структура сайта

В области «ЗАГОЛОВОК (ШАПКА)» выводится информация о сайте и меню (рисунок 3.7).

Стартовая страница сайта (index.php) представлена на рисунке 3.8.



Рисунок 3.8 - Внешний вид стартовой страницы сайта

В область вывода информации будет загружаться требуемая пользователем информация. Например, при переходе по ссылке «Магазин на Федюнинского 8» получаем следующую страницу (рисунок 3.9).

Рисунок 3.9 - Информация о магазине

В случае авторизации пользователя становится доступно меню администратора (рисунок 3.10)

Рисунок 3.10 - Меню администратора

3.5 Описание логической и физической структуры сайта

Логическая структура сайта представлена на рисунке 3.11

Рисунок 3.11 - Логическая структура сайта

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

Физическая структура (рисунок 3.12) подразумевает алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован сайт.



Рисунок 3.12 - Физическая структура сайта

Программный код представлен в приложениях А, Б, В, Г, Д, Ж, И, К, Л.

3.6 Описание технологии создания сайта

Приведём листинг файла index.php и на его примере покажем технологию создания сайта.

<?php

ob_start();

require_once("lib.php"); ?>

Перед началом формирования HTML документа подключается библитека разработанных пользователем функций lib.php

<html>

<head>

<title>Официальный сайт ООО "Автомир"</title>

<META http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="css/styles.css">

<script type= "text/javascript"src = "htmlbox/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="htmlbox/jquery.codify.min.js"></script>

<script type="text/javascript" src="htmlbox/htmlbox.colors.js"></script>

<script type="text/javascript" src="htmlbox/htmlbox.styles.js"></script>

<script type="text/javascript" src="htmlbox/htmlbox.syntax.js"></script>

<script type="text/javascript"src="htmlbox/htmlbox.undoredomanager.js"></script>

<script type="text/javascript" src="htmlbox/htmlbox.min.js"></script>

<META name="keywords" content="автомир, автозапчасти, продажа, гомель, магазин, катлог">

<META name="description" content="Сайт компании Автомир - автозапчасти в Гомеле">

</head>

В разделе <HEAD> подключаются стилевые таблицы, JavaScript библиотеки, заполняются тэги для поисковых систем Интернета.

<body>

<table width="100%" border="0">

<tr>

<td colspan="3" class="top">

Здесь формируется шапка с логотипом, контактными данными и ссылками на разделы сайта

<!-- ШАПКА-->&nbsp;<img src='images/logo.jpg'/><br/>

<big> <a href=''>Официальный сайт ООО «АВТОМИР»</a> +375-232-39-52-00, 39-04-10 (головной офис)</big>

</td>

<tr>

<td

colspan=3> <a href='index.php'>

Главная</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;

<a href='index.php?sl=cat'>

КАТАЛОГ</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;

<ahref='index.php?sl=news&idNews=1'>О компании</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href='index.php?sl=news&idNews=2'>

Магазин "Строй Арсенал"

</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;

<a href='index.php?sl=news&idNews=4'>

Магазин на Ефремова 5

</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;

<a href='index.php?sl=news&idNews=5'>

Магазин на Федюнинского 8&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;

<a href='index.php?sl=fb'>Обратная связь</a></td>

</tr><tr><td colspan=3><hr /></td></tr></tr><tr>

Левый боковик сайта предназначен для вывода новостей сайта

<td width="20%" valign="top">

<!-- МЕНЮ -->

<?php

// выводим пять последних новостей

echo GetTitleNews(5);

?></td>



Функция GetTitleNews(numNews) использует в качестве входного параметра количество новостей numNews, результат работы - вывод numNews заголовков последних новостей.

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

<td width="60%" valign="top" class=center>

<!-- ОБЛАСТЬ ВЫВОДА НОВОСТЕЙ САЙТА -->&nbsp;

<?php

if (isset($_GET['sl']) OR isset($_POST['sl']))

{

$path = "scripts/";

isset($_POST['sl'])) ? $sl = $_POST['sl'] : $sl = $_GET['sl'];

$file = $path.$MasLink[$sl];

if (file_exists($file) and $file!=$path)

{ require_once($path.$MasLink[$sl]); }

Else { $file = $path."news.php"; require_once($file);}}

Else { $filess = "scripts/news.php"; require_once($filess); }?>

</td>

Правая колонка предназначена для отображения формы поиска и вывода интересных статей

<td width="20%" valign="top">

<table width=100%>

<tr align=center><td class=title>

Поиск по каталогу запчастей</td></tr>

<tr align=center><td><form action='index.php'><input type=text name=ser>&nbsp;<input type=submit name=Ok value=Ok width=50px /><input type=hidden name=sl value=sr></form></td></tr>

</table>

<table width=100%>

<tr><td class=title>Интересно</td></tr>

<tr><td><a href='http://www.abw.by/news/160088/' target=_blank>

Разбираем двигатель Mazda RX-8: сколько стоит</a></td></tr>

<tr><td><a href='http://www.abw.by/news/157098/' target=_blank>

Прогулки под динозавром: как выглядит Hummer H2</a></td></tr>

<tr><td><a href='http://www.abw.by/news/156055/' target=_blank>

Покупка автомобиля за $300: сумасшествие или... </a></td></tr>

<tr><td><a href='http://www.abw.by/news/155567/' target=_blank>

Volkswagen Amarok: основы пикапинга </a></td></tr>

<tr><td><a href='http://www.abw.by/news/154353/' target=_blank>

Катавасия с форсунками и другие перипетии с 2.2... </a></td></tr>

<tr><td><a href='http://www.abw.by/news/152324/' target=_blank>

Обслуживаем KIA Venga: масляное ТО за $50 или... </a></td></tr>

<tr><td><a href='http://www.abw.by/news/151848/' target=_blank>

Обслуживаем Ford Escort: привет из девяностых </a></td></tr>

<tr><td><a href='http://www.abw.by/news/146760/' target=_blank>

Нужно ли менять масло в "автомате"? Нюансы плюс... </a></td></tr>

</table>

</td>

</tr>

<tr>

Подвал сайта - после авторизации выводится меню администратора, в противном случае форма для входа на сайт