Создание сайта адресно-телефонного справочника на php

 

ВВЕДЕНИЕ

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

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

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

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

Объект исследования: информационные ресурсы сети Интернет.

Предмет исследования: структура, содержание, оформление Web-сайта.

Цель исследования: создание Web-сайта в виде электронного справочника.

Задачи исследования:

определить и проанализировать предпочтения пользователей в предметной области; изучить различные Интернет-ресурсы по данной проблеме;

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

изучить литературу по вопросу создания Web-сайт;

изучить требования, предъявляемые к созданию Web-сайтов;

познакомиться со структурными элементами Web-страниц;

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

найти и отобрать материал для наполнения содержания Web-сайта; создать Web - сайт; представить учебное исследование и защитить его.

1. СОВРЕМЕННЫЕ ИНТЕРНЕТ-ТЕХНОЛОГИИ

.1 История создания web-страниц

С развитием информационных технологий и созданием персонального компьютера появилась проблема хранения информация и доступа к ней других пользователей. Это привело к развитию сети и позже к созданию World Wide Web - Всемирной паутины Интернет. Она, прежде всего, использовалась научными учреждениями, правительствами и военными, как средство обмена простой информацией «старого» образца. Так что документы тех времен были очень простыми. В конце концов, ученым и академикам нет особого дела до привлекательности web-страниц. Но Интернет развивался, вскоре и «простые» пользователи стали пользоваться его услугами. Встал вопрос о том, как размещать информацию в сети. Был разработан язык HTML - язык гипертекстовой разметки страниц, который позволил размещать информацию структурировано, удобно для поиска и красиво с эстетической точки зрения.

Сразу после создания Всемирной паутины, Первый в мире web-сайт появился 6 августа 1991 года. #"justify">Первые сайты были либо примитивны - аршинные красные буквы на бирюзовом фоне (такие сейчас делают школьники на различных бесплатных host-ресурсах, вроде narod.ru), либо очень красивы, но малофункциональны и тяжелы. И поэтому на долгие годы именно функциональность, а не красота стала целью многих дизайнерских работ. Основной призыв был таков - «дизайн должен быть незаметен». Дизайн не должен отвлекать от функций сайта. Даже возможности языка HTML использовались лишь для указания что, заголовок - это заголовок, а текст начинается с красной строки и разбит на абзацы. Развитию web-дизайна мешала неразвитая технология, низкая производительность персональных компьютеров и примитивность специального программного обеспечения. До сих пор в Интернете принимаются новые стандарты, расширяющие свободу деятельности для web-дизайнеров. Это и html 5, и CSS 3, а также развиваются такие технологии как Adobe Flash, Adobe Air, Microsoft Silverlight. Но тогда это все было недоступно из-за ограниченности технологий.

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

В какой-то момент стало очевидно, что дизайнеры не всегда могут совладать с предоставленными им возможностями. Стали все чаще появляться сайты, в которых из-за неудачного дизайна нельзя было прочитать информацию. Длинные меню, разбитые по всей странице, огромное количество мелькающих gif-баннеров, яркие цвета, контрастный текст, непродуманная навигация, большие тяжеловесные страницы,- вот характерные признаки web-дизайна того времени. [8]

В этот момент пришло осознание того, что при создании сайта необходимо думать об удобстве пользователя. Началось приложение моделей HCI (Human-Computer-Iteraction, человеко-компьютерное взаимодействие) в web. Это стало началом понятия юзабилити сайтов, основанной на психологии.

На сегодняшний день существует множество браузеров, версий языка HTML и дополнений к нему, таких как CSS, JavaScript и программных средств для работы с Web. Основными требованиями разработки страниц является уже не только функциональность, но и универсальность, и эстетичный внешний вид сайтов. Web имеет два направления. Разработку клиентских приложений, то есть страниц, которые видят пользователи и которые принято именовать web-дизайном. Разработку серверных приложений - баз данных, программ для обмена и размещения информации принято называть web-программированием.

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

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

Пример создания фото-галереи, используя Flickr

Пример интеграции сервиса статистики Google Analytics и CakePHP

Список открытых API

Использование AJAX, javascript и различных Фреймворков (напр., Microsoft Silverlight, Adobe Flash)

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

Использование медиа-информации (потоковое видео, подкасты)

Унификация авторизационных сервисов в крупных компаниях. Нарастающая популярность OpenID выводит это решение в лидеры. Однако используются и прочие решения, такие как SAML, Liberty и MS Passport.

1.2 Средства разработки web-страниц

(HyperText Markup Language) - язык разметки гипертекста страниц. Является языком, использующимся в большинстве случаев, так как появился на заре web-дизайна и имеет на настоящий момент все возможности для разработки современных, качественных и красивых сайтов. Этот язык является приложением языка SGML (Standard Generalized Markup Language - стандартный обобщенный язык разметки) и соответствует стандарту ISO 8879. Первые версии этого языка придерживались идеологии SGML - только разметка текста: заголовков, абзацев, а визуальное форматирование являлось нерекомендованным, хоть язык и имел соответствующие теги. Но, по прошествии некоторого времени, Консорциум всемирной паутины, при содействии корпорации Microsoft, был вынужден изменить стандарты языка, разработав приложение к нему CSS, которое позволяло создавать более красивые и разнообразные сайты. На сегодняшний день язык HTML имеет огромное количество тегов и их свойств для разработки web-страниц.

РНР изобретен Расмусом Лердорфом в конце 1994 года. Первая версия выпущена в 1995 году под именем «Инструментарий Персональных Домашних Страниц», затем она была переработана и названа PHP/FI Version 2 (FI - модуль обработки данных для форм). Также была добавлена поддержка баз данных mSQL. С этого момента в разработке стали принимать участие добровольцы.

Статистика используемости РНР приблизительна, но, согласно исследованию, проведенному Netcraft, в начале 2001 года РНР использовался на более чем 5 300 000 сайтах по всему миру. Для сравнения: в это время число IIS серверов было примерно таким же (5 млн.). Разработка интерпретатора РНР приняла форму организованного командного процесса, ядро интерпретатора разрабатывает компания Zend.com. При этом РНР распространяется свободно: его последнюю версию можно загрузить с сайта PHP.net. Модули РНР поставляются в комплекте с сервером Apache, в комплектах систем Linux.

Изначально аббревиатура РНР означала Preprocessor of Home Pages - препроцессор домашних страниц. Это язык внедряемых в HTML-страницы сценариев, исполняемых на сервере. По большей части его синтаксис заимствован из таких языков, как С, Perl, Java, и при этом добавлена масса возможностей, которых этим языкам недостает. Проще говоря, синтаксис РНР - это разумная альтернатива и строгости С, и «беспредельности» Perl.

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

Основными конкурентами РНР являются технологии JSP (Java Server Pages и Java Scriptlets), ASP (Active Server Pages), Perl, SSI (Server Side Includes), Cold Fusion Server Pages.

Рассмотрим те недостатки, которые присущи указанным технологиям. JSP - достаточно сложный для изучения и использования язык. ASP, основанный на синтаксисе VBScript (Visual Basic), имеет всего несколько десятков собственных функций и поэтому вынужден использовать СОМ-объекты; кроме того, он ориентирован исключительно на работу под Windows. Perl - язык головоломный, и его вольности затрудняют его понимание. SSI позволяет всего лишь компоновать HTML-страницу из нескольких файлов. CF - коммерческий продукт, что является его основным недостатком.

Основные достоинства РНР:

бесплатен; постоянно совершенствуется; работает на UNIX и Windows платформах;

допускает работу с большинством СУБД;

имеет широкий набор функций (более 3 тыс.);

допускает объектно-ориентированное программирование;

способен использовать протоколы HTTP, FTP, ШАР, SNMP, NNTP, РОРЗ, net sockets и другие;

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

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

Для начала, чтобы сервер знал, в каком из файлов используются РНР-команды и, следовательно, мог передать такую страничку для дальнейшей обработки, необходимо изменить расширение файла с *.html на *.php3. Поэтому, когда вы видите файлы с таким расширением, можно с почти полной уверенностью утверждать, что при их создании использовался РНР.

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

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

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

<?php

$a = 7;

$b = 9.5;

$c = "Hello"; ?>

Здесь переменной а присваивается значение 7, и она приобретает тип целочисленной. Переменная b обретает вещественный тип и становится равной 9,5. Строка Hello присваивается переменной с, в результате чего она становится строковой.

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

<html> <head>

<title>Пример</title>

</head> <body>

<?php $d = date(d.m.Y);

echo "Последние обновления: $d "; ?>

</body></html>

В результате загрузки такой страницы, РНР обработает все команды, которые находятся между специальными тэгами, и вы увидите, в данном случае, строку вроде Последние обновления: 2.08.2000. Браузер получает чистый HTML-код и если просмотреть его, вы не найдете там никаких следов пребывания РНР. Таким образом, вы создадите "вечно обновленную" страницу J.

Встроенная функция date() способна выводить текущие время и/или дату - в любом необходимом для вас виде.

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

<form action="thanx.php3" method=post>

<input type="text" name="name">

< input type="text" name="email">

< input type="submit"> </form>

Тогда в файле thanx.php3 можно написать что-нибудь вроде:

<?php echo "Спасибо вам, $name, за регистрацию. Мы только что отправили на $email 10Mb рекламных проспектов. Заходите к нам еще.";?>

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

Письмо можно действительно послать, и это делается одной строкой. Если вы добавите в тот же thanx.php3 нижеследующее:

<?php mail($email, "Тема сообщения",

"Простите, проспекты уже закончились");?>

Письмо уйдет на адрес, который пользователь еще минуту назад неосмотрительно вводил в вашу форму.

РНР поддерживает HTTP-cookies. Cookies - это механизм для сохранения данных в удаленном браузере. Таким образом, можно отслеживать или идентифицировать пользователя. Для того, чтобы сохранить переменную на компьютере посетителя вашей странички, используется функция SetCookie(). Любое значение cookies, сохраненное таким образом, автоматически превращается в переменную, так же как и в случае с формами. Например:

<?php SetCookie("TrojanHorse","Я вас где-то видел");$TrojanHorse;?>

На экране появится строка: Я вас где-то видел. Все достаточно просто, сохранять можно любые переменные, а затем их использовать.

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

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

Процедура записи/чтения осуществляется очень просто.

<?PHP $fp = fopen("counter.txt","r+"); $c = fgets($fp, 10);

$c = c + 1; rewind($fp); fputs($fp,$c); fclose($fp); echo $c; ?>

Этот пример демонстрирует принцип создания на РНР, простейшего счетчика посещений вашей страницы. Функция fopen() открывает файл counter.txt для чтения и записи. В переменную с с помощью функции fgets() считывается строка длиной 10 байт. Затем значение счетчика увеличиваем на единицу. Здесь хорошо видно, как переменная с, которая вначале имела строковый тип, становится целочисленной: $c = c + 1. Функция rewind($fp) перемещает файловый указатель на начало файла. Новое значение счетчика записывается в файл fputs($fp,$c), после чего он закрывается fclose($fp). В том месте страницы, где будет расположен этот скрипт, всегда можно будет видеть, сколько раз эта страница посещалась.

Интересные возможности открываются при использовании HTTP-заголовков. Частным случаем их использования может служить такой пример. Допустим, вы имеете каталог ссылок и хотите знать, какие из них пользуются наибольшей популярностью. В этом случае можно использовать функцию header(). Например:

<?PHP header("Location: #"justify">В данном случае пользователь будет перенаправлен на сайт РНР. При этом можно увеличить значение счетчика, которое-то вам и расскажет, что именно интересует ваших посетителей. Заголовки (как, впрочем, и cookies) необходимо использовать до вывода данных командой echo или ей подобными функциями - иначе ничего не получится.

Чтобы больше узнать о ваших посетителях (а именно для этого, как вы теперь знаете, в начале и создавался этот язык), можно использовать предопределенные переменные, доступ к которым предоставляет РНР. Например, с помощью переменной REMOTE_ADDR вы узнаете IP-адрес, с которого пользователь просматривает вашу страничку. Переменная HTTP_USER_AGENT расскажет вам о том, какие браузеры и операционные системы используют ваши посетители. Существует еще множество других переменных, которые можно использовать для изучения аудитории посетителей вашего сайта или страницы.(англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

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

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

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

<head>

.....

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

</head>

- скриптовый язык, чаще всего использующийся при создании сценариев поведения браузера, встраиваемых в web-страницы. Является одной из реализаций языка ECMAScript. Общим заблуждением является то, что JavaScript аналогичен или тесно связан с Java, это не так. Оба языка имеют C-подобный синтаксис, являются объектно-ориентированными и как правило широко используются в клиентских web-приложениях, на этом их сходство заканчивается. Его используют чаще чем VBScript.

.3 Графика на web-сайтах

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

Растровая - изображение сохраняется, разделенным на сеть, состоящую из множества маленьких точек - пикселей. Формат удобен для хранения и представления фотографий, но имеет ряд недостатков - в частности невозможно изменить размер рисунка без потери качества. Файлы, хранящие растровую графику это jpg, gif, bmp, tiff, png, psd и прочие.

Векторная - изображение хранится в виде массива чисел и математических формул, отражающих построение кривых и линий. Его размер можно изменять сколько угодно без потери качества. Но формат рекомендуется именно для работы с нарисованными картинками, а не фотографиями, поскольку фотографии состоят из слишком большого количества деталей - размер фотографий в векторе слишком велик. Форматы векторной графики - swf, cdr, max, ai, частично pdf.

В практике web-дизайна используются форматы jpg и gif. Реже используются форматы swf и png.

Форматы jpg и gif различаются алгоритмами сжатия изображения. Так как в web размер файла до сих пор играет весьма существенное значение в силу ряда причин, следовательно малый вес графического файла существенно повышает скорость загрузки изображения. Для разных «видов» картинок подходит тот или иной формат графики. Определение необходимого формата - основное умение web - дизайнера. Для фотографий, портретов, картинок большого размера, насыщенных сложными деталями - лучше всего подходит формат jpeg. Алгоритм сжатия этого формата работает таким образом, что при уменьшении размера картинки, а следовательно качества, изображение как бы «размывается», становятся плохо различимы четкие переходы между цветами, и появляются паразитные цветные пиксели как побочный эффект действия алгоритма. Степень компрессии файла определяется каждый раз дизайнером исходя из его нужд, но оптимальным соотношением размер\качество изображения считается процент сжатия равный 65.

Формат gif наилучшим образом подходит для изображений небольшого размера, там, где необходима прозрачность (альфа-канал), и для анимированной растровой графики. Алгоритм сжатия этого формата основывается на том, что изображению задается фиксированная цветовая палитра (от 2 до 256 цветов), а все близкие оттенки выкидываются либо заменяются соседними цветами. Также алгоритм просчитывает изображение линиями - слева направо, и хранит информацию не о каждом пикселе в отдельности, а считает, сколько пикселей одинакового цвета стоят в ряд, и сохраняет информацию только о цвете и количестве пикселей. Это существенно снижает размер файла. Нетрудно заметить, что вертикальный градиент (сверху-вниз) будет весить в таком случае намного меньше градиента горизонтального (слева-направо). Это следует учитывать при создании изображений, особенно при создании анимированных баннеров, где вес складывается еще и из количества кадров и идет буквально война за каждый байт.

Формат png используется крайне редко. Его отличие от формата gif в том, что png позволяет хранить больше информации о файле. В частности информацию об альфа-канале. В формате gif каждый отдельный пиксель может быть либо полностью прозрачным, либо полностью непрозрачным. Это накладывает ограничения на использование прозрачных переходов в прозрачность, из за чего файлы gif с прозрачностью зачастую выглядят «рваными» по краям. Но, в связи с большим весом png файлов, их практически не используют, а применяют различные визуальные хитрости в формате gif, в частности добавление «переходных» пикселей по краям изображения.

Формат flash - один из самых «модных» и популярных в вебе. Этому служат несколько его особенностей. Во-первых, за счет того, что это векторный формат, возможно создание относительно сложных и красочных изображений при достаточно малом весе файла. Во-вторых, за счет использования встроенного скриптового языка Action Script во flash есть возможность создавать интерактивные баннеры, приложения, писать различные сценарии, создавать онлайн системы расчета, игры, отдельные приложения и тому подобное. [15]

.4 Web-серверы

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

Сервер - это любое управляющее компьютером программное обеспечение, которое дает ему возможность выполнять запросы на документы или другие данные. Программы, которые запрашивают и отображают документы (такие как браузер), называются клиентами. Термины "на стороне сервера" и "на стороне клиента", используемые, например, при работе с картами-изображениями, относятся к той машине, которая руководит процессом. Функции на стороне клиента выполняются на машине пользователя, функции на стороне сервера - на удаленной машине.серверы отвечают на запросы браузеров (клиентских программ), находят заданные файлы (или выполняют сценарий CGI) и возвращают документ или результаты сценария. Web-браузеры и серверы общаются по протоколу Hypertext Transfer Protocol (HTTP, протокол передачи гипертекста).

Большинство серверов работают на платформе Unix. Именно поэтому в мире Web по-прежнему используется терминология системы Unix. В процессе работы понадобится выучить несколько Unix-команд. Однако процент серверов Windows NT, Windows 95 и даже MacOS постоянно увеличивается. Некоторые серверные пакеты предлагают графический интерфейс в качестве альтернативы управлению из командной строки Unix.

Вот некоторые известные серверы: NCSA Server, Apache, CERN, Netscape Servers, Internet Information Server (IIS).

Сегодня большинство серверов (приблизительно 70%) работают на Apache или его предшественнике NCSA. Конкретный тип сервера не влияет на большую часть того, что делает дизайнер, например, на создание графики или разработку базовых HTML-файлов. Конечно, он будет влиять на более совершенные методы создания Web-сайтов, такие как Server Side Includes (серверные включения), добавление типов MIME и Web-страницы, управляемые базами данных.

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

Прямой слэш (/) в конце URL означает, что URL обращается к каталогу, а не к файлу. По умолчанию серверы отображают содержание каталога, указанного в URL. Большинство серверов, однако, сконфигурированы так, чтобы отображать особый файл вместо списка каталога, этот файл называется индексным. Индексные файлы обычно имеют имя index.html, но на некоторых серверах они могут называться welcome.html или default.html.

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

Как только сервер определяет месторасположение файла, он посылает содержимое этого файла обратно браузеру вместе с некоторыми заголовками отклика HTTP (response headers). Эти заголовки обеспечивают браузер информацией о прибывающем файле, включая его тип данных (также известный как "тип содержимого" или "тип MIME"). Обычно сервер определяет формат по расширению файла; например, файл с расширением.gif распознается как файл изображения.

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

Вместо того чтобы обращаться к файлам HTML, URL может потребовать запустить программу CGI. CGI расшифровывается как Common Gateway Interface (общий шлюзовой интерфейс). Он позволяет Web-серверу общаться с другими программами (сценариями CGI), которые работают на сервере. Сценарии CGI обычно пишут на языках Perl, С или C++.

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

Большинство администраторов серверов придерживаются правила хранить сценарии CGI в специальном каталоге, озаглавленном cgi - bin (сокращенно от CGI-binaries). Когда они хранятся в одном каталоге, администраторам проще управлять сервером и обеспечивать его безопасность. Если сценарий CGI запрашивается браузером, сервер исполняет функцию и возвращает браузеру динамическое содержимое.- Server Side Includes или, по-русски, - включения на стороне сервера. SSI - это директивы, вставляемые прямо в HTML-код и служащие для передачи указаний Wев-серверу. Встречая такие директивы, которые называются SSI-вставками, Web-сервер интерпретирует их и выполняет соответствующие действия. Например: вставка HTML-фрагмента из другого файла, динамическое формирование страничек в зависимости от некоторых переменных (например, типа браузера) и другие не менее приятные вещи.

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

Для того, чтобы сервер знал, что страничка не обычная, а содержит SSI-директивы, она имеет специальное расширение: *.shtml или *.shtm, наличие которого и заставляет Web-сервер предварительно обрабатывать странички. Вообще-то, расширение может быть любое - в зависимости от конфигурации Web-сервера, но в основном применяется именно *.shtml.

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

<!--#command param="value" -->,

где # - признак начала SSI-вставки;- SSI-команда;- параметры SSI-команды.

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

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

На компьютерах IBM PC и Маcintosh большинство функций можно выполнить, используя инструментарий с графическим интерфейсом. Тем не менее, иногда невозможно найти замену для старой сессии Telnet. Telnet - протокол "эмуляции терминала", позволяющий вам регистрироваться в другой компьютерной системе или сети, такой как Internet. Этот термин также используют применительно к любому приложению, служащему для общения с использованием протокола Telnet. Программа Telnet предоставит текстовое терминальное окно другой системы, в котором можно вводить инструкции в командной строке.

Когда с помощью программы Telnet открывается сеанс связи с удаленным сервером, появляется приглашение зарегистрироваться в системе. Прежде чем получить доступ к серверу, системному администратору нужно установить для пользователя учетную запись (account) Unix.

При успешной регистрации, вы получите подсказку системы Unix %, (или иногда #) в зависимости от разновидности Unix, на которой работает сервер. Это знак, что система готова. С этого момента используется программа под названием shell. Она интерпретирует печатаемые вами команды и вызывает запрашиваемые программы. Перемещение в домашний каталог будет автоматическим.

Чтобы закончить сессию Telnet достаточно набрать logout или exit.

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

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

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

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

запрещено использование пробелов в именах файлов. Хотя это абсолютно приемлемо для локальных файлов в MacOS и Windows 95/98/NT, пробелы не распознаются другими системами;

нежелательно использование в именах файлов специальных символов, таких как ?, %, #. Лучше ограничиться буквами, цифрами, символом подчеркивания (вместо пробелов), дефисами и точками;

выбор расширения должен быть правильным. Документы HTML требуют расширения .html (или htm для сервера Windows). Графические файлы GIF имеют расширение .gif, а файлы JPEG - .jpg или .jpeg. Файлы с неправильным расширением браузер не распознает в качестве файлов, разрешенных для передачи в Web;

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

Наиболее частой транзакцией, с которой Web-дизайнер обращается к серверу, является загрузка на сервер HTML-документов, изображений или мультимедийных файлов. По сети файлы передаются между компьютерами с помощью метода, называемого FTP (File Transfer Protocol, протокол передачи файлов). При работе на Unix в сессии Telnet можно запустить программу ftp и передавать файлы с огромным числом аргументов командной строки.

На компьютерах IBM PC и Маcintosh имеется ряд программ FTP с графическими интерфейсами, которые избавляют от необходимости передавать файлы с использованием командной строки Unix. Более того, в большинстве случаев функции FTP встроены непосредственно в WYSIWYG HTML-редакторы, такие как GoLive Cyberstudio, Claris HomePage и Dreamweaver. Ha компьютерах Macintosh достаточно популярны специальные программы, которые осуществляют передачу файлов методом "перетаскивания". На PC есть немало простых программ FTP, таких как WS__FTP и AceFTP.

Браузеры Netscape Navigator и Internet Explorer также функционируют как простые FTP-клиенты, предоставляя возможность как загружать, так и выгружать файлы, используя интерфейс "drag-and-drop".

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

. Запуск программы FTP, соединение с сервером. Нужно ввести точное имя сервера, регистрационное имя и пароль.

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

. Задаем режим передачи. Главное во время передачи - решить, передавать данные в двоичном или ASCII -режиме. ASCII-файлы состоят из буквенно-цифровых символов. Некоторые FTP-программы рассматривают файлы ASCII как "текстовые". Документы HTML следует передавать как ASCII или текст.

Двоичные файлы состоят из откомпилированных данных (единиц и нулей), их примерами являются выполняемые программы, изображения, фильмы и т.д. Некоторые программы рассматривают двоичный режим как "необработанные данные" ("raw data") или "изображение" ("Image"). Все графические (.gif или .jpeg) и мультимедийные файлы должны передаваться как двоичные или "Raw Data". В Fetch (MacOS) вы можете обнаружить параметр MacBinary, который передает файл полностью, вместе с ветвью ресурсов (часть файла, содержащая пиктограммы рабочего стола и другие специфические для компьютера Маcintosh данные). Этот вариант следует использовать только при передаче с одного компьютера Маcintosh на другой. Ветвь ресурсов отделяется от мультимедийных файлов, созданных на компьютерах Маcintosh, при передаче в двоичном режиме.

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

. Передача файлов на сервер. Стандартный протокол FTP использует термины "поместить" ("put") для обозначения передачи файлов с компьютера пользователя на сервер и "получить" ("get") для обозначения загрузки файла с сервера на компьютер, поэтому они могут использоваться и в программе FTP. Одновременно можно загружать несколько файлов.

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

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

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

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

Система для сообщения мультимедийных типов файлов очень напоминает MIME (Multipurpose Internet Mail Extension, многоцелевые расширения почтовой службы в Интернете), которая была изначально разработана для вложений в письма электронной почты. Чтобы успешно сообщать тип файла браузеру, нужно чтобы сервер был сконфигурирован на распознавание любого MIME-типа. Если нужно доставлять данные, выходящие за рамки стандартных HTML-файлов и изображений (например, видео Shockwave Flash или аудиофайлы), следует уточнить у администратора сервера, способен ли сервер поддерживать этот MIME-тип. Большинство распространенных форматов встроены в текущие версии программного обеспечения сервера. Если нет, то администратор может легко их установить, следует лишь предоставить ему необходимую информацию.

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

2. ПРОЕКТНАЯ ЧАСТЬ

.1 Работа с сайтом на локальном компьютере. Пакет «Денвер»

Сайт будет разрабатываться на языке PHP. Данный язык предназначен для создания серверных приложений, поэтому работает с запросами к серверу и базе данных, расположенной на сервере. На момент создания сайта хоста еще нет. Для того чтобы решить проблему создания сайта на локальном компьютере я использовала пакет программ «Денвер-3». [18]

«Денвер-3» - комплекс программ, эмулирующий на локальном компьютере сервер, содержит в себе набор дистрибутивов (Apache+SSL, PHP5 в виде модуля, MySQL5, phpMyAdmin и т.д.) и программную оболочку, используемую Web-разработчиками (программистами и дизайнерами).

Ключевая особенность Денвера - поддержка работы сразу с несколькими проектами, каждый из которых располагается на отдельном виртуальном хосте. Виртуальные хосты для проектов создаются автоматически: например, вам достаточно скопировать файлы проекта в /home/ИмяПроекта/www, и он тут же станет доступен по адресу #"justify">Все компоненты Денвера уже настроены и готовы для работы (в частности, корректно настроена русскоязычная кодировка MySQL, SSL и т.д.). Кроме того, возможно обновлять любой из сервисов Денвера (Apache, PHP, MySQL и т.д.) вручную, просто копируя новые версии дистрибутивов поверх старых.

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

. Apache 2 с поддержкой SSL и mod_rewrite.

. PHP5: выполняемые файлы, модуль для web-сервера Apache, дистрибутивный и адаптированный конфигурационный файл, библиотека GD, модули поддержки MySQL и sqLite.

. MySQL5 с поддержкой InnoDB, транзакций и русских кодировок (windows-1251).

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

. Отладочный эмулятор sendmail (/usr/sbin/sendmail), не отправляющий письма, а записывающий их в директорию /tmp/!sendmail.

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

На рисунке 2.1 изображено окно консоли, выводимое на экран при запуске приложения:

Рисунок 2.1 - Окно загрузки пакета «Денвер»

2.2 Основные характеристики MYSQL

- это система управления реляционными базами данных.

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

Программное обеспечение MySQL - это ПО с открытым кодом.

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

Технические возможности СУБД MySQL

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

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

Система безопасности основана на привилегиях и паролях с возможностью верификации с удаленного компьютера, за счет чего обеспечивается гибкость и безопасность. Пароли при передаче по сети при соединении с сервером шифруются. Клиенты могут соединяться с MySQL, используя сокеты TCP/IP, сокеты Unix или именованные каналы (named pipes, под NT)

Вместимость данных

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

32-разрядная Linux-Intel - размер таблицы 4 Гб.

- Solaris 2.7 Intel - 4 Гб

Solaris 2.7 UltraSPARC - 512 Гб

- WindowsXP - 4 Гб

Как можно видеть, размер таблицы в базе данных MySQL обычно лимитируется операционной системой. По умолчанию MySQL-таблицы имеют максимальный размер около 4 Гб. Для любой таблицы можно проверить/определить ее максимальный размер с помощью команд SHOW TABLE STATUS или myisamchk -dv table_name. Если большая таблица предназначена только для чтения, можно воспользоваться myisampack, чтобы слить несколько таблиц в одну и сжать ее. Обычно myisampack ужимает таблицу по крайней мере на 50%, поэтому в результате можно получить очень большие таблицы.

.2.1 Создание базы данных phones в MYSQLсостоит из двух частей: серверной и клиентской.

Сервер MySQL постоянно работает на компьютере. Клиентские программы (например, скрипты PHP) посылают серверу MySQL SQL-запросы через механизм сокетов (то есть при помощи сетевых средств), сервер их обрабатывает и запоминает результат. То есть скрипт (клиент) указывает, какую информацио он хочет получить от сервера баз данных. Затем сервер баз данных посылает ответ (результат) клиенту (скрипту).

Почему всегда передается не весь результат? Очень просто: дело в том, что размер результирующего набора данных может быть слишком большим, и на его передачу по сети уйдет чересчур много времени. Да и редко когда бывает нужно получать сразу весь вывод запроса (то есть все записи, удовлетворяющие выражению запроса). Например, нам может потребоваться лишь подсчитать, сколько записей удовлетворяет тому или иному условию, или же выбрать из данных только первые 10 записей. Механизм использования сокетов подразумевает технологию клиент-сервер, а это означает, что в системе должна быть запущена специальная программа - MySQL-сервер, которая принимает и обрабатывает запросы от программ. Так как вся работа происходит в действительности на одной машине, накладные расходы по работе с сетевыми средствами незначительны (установка и поддержание соединения с MySQL-сервером обходится довольно дешево).труктура MySQL трехуровневая: базы данных - таблицы - записи. Базы данных и таблицы MySQL физически представляются файлами с расширениями frm, MYD, MYI. Логически - таблица представляет собой совокупность записей. А записи - это совокупность полей разного типа. Имя базы данных MySQL уникально в пределах системы, а таблицы - в пределах базы данных, поля - в пределах таблицы. Один сервер MySQL может поддерживать сразу несколько баз данных, доступ к которым может разграничиваться логином и паролем. Зная эти логин и пароль, можно работать с конкретной базой данных. Например, можно создать или удалить в ней таблицу, добавить записи и т. д. Обычно имя-идентификатор и пароль назначаются хостинг провайдерами, которые и обеспечивают поддержку MySQL для своих пользователей.

Прежде всего, необходимо на локальном диске, выделенном под хранение web-сайтов и средств их разработки (создается при установке «Денвера») создать папку с названием сайта (рабочим - в моем случае это spravka.kz). В дальнейшем это имя будет запрашиваться из командной строки браузера. «Денвер» необходимо перезапустить и можно работать с сайтом.

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

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

<?php('BASENAME', 'phones');('HOSTNAME', 'localhost');('USERNAME', 'root');('PASSWORD', '');

@mysql_connect(HOSTNAME, USERNAME, PASSWORD) or

exit('Ошибка при подключении к базе данных.');

@mysql_select_db(BASENAME) or exit('Ошибка при выборе базы

данных.');

?>(скрипт файла base.inc служит для подключения к базе данных

сайта.)

Таблицы базы данных phones:

CREATE TABLE pphone (int(10) unsigned NOT NULL auto_increment,varchar(6) NOT NULL DEFAULT '',varchar(25),int(10),varchar(8),smallint(4) unsigned,KEY (id),number (number),person (person),address (strid,house)

);

CREATE TABLE ophone (int(10) unsigned NOT NULL auto_increment,varchar(6) NOT NULL DEFAULT '',int(10),int(10),varchar(8),smallint(4) unsigned,varchar(50),KEY (id),number (number),office (offid)

);

TABLE street (int(10) unsigned NOT NULL auto_increment,varchar(50),KEY (strid)

);

TABLE office (int(10) unsigned NOT NULL auto_increment,varchar(50),KEY (offid)

);

TABLE auth (smallint(5) unsigned NOT NULL auto_increment,varchar(16) binary NOT NULL DEFAULT '',varchar(32) binary NOT NULL DEFAULT '',datetime NOT NULL DEFAULT '2004-01-01 00:00:00',varchar(20) NOT NULL DEFAULT '',

PRIMARY KEY (authid)

База данных создана, в дальнейшем она автоматически будет адаптирована под сайт.

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

Рисунок 2.2 - Физическая модель БД

.3 Архитектура проектирования сайта «Spravka.kz»

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

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

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

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

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

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

Программная часть архитектуры интернет - магазина рассматривается как взаимосвязь операционной и серверной части.

В операционной части рассматривается среда разработки интернет магазина.

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

Рисунок 2.3 - Архитектура сайта

Разработка операционной части. Данная часть будет разрабатываться на языке php.

.4 Интерфейс разработки web-сайта

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

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

Интерфейс пользователя - элементы и компоненты программы, которые способны оказывать влияние на взаимодействие пользователя с программным обеспечением. В том числе:

средства отображения информации, отображаемая информация, форматы и коды;

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

устройства и технологии ввода данных;

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

обратная связь с пользователем;

поддержка принятия решений в конкретной предметной области;

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

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

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

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

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

Создание таблицы стилей . Файл style.css

В CSS нет тэгов и атрибутов. Хотя многие их так называют.Структура таблицы стилей состоит из ПРАВИЛ. В ПРАВИЛЕ существуют селекторы и блоки объявления стилей. Селекторы в переводе с английского select значит выбор. То есть он выбирает тэг к которому будет применён стиль или стили.

Вот к примеру:

h2{color:#232D37;font-size:15px; }

в нашем случае будет селектором, а все остальное это блок объявления стилей, который всегда заключается в фигурные скобки. Всё вместе будет ПРАВИЛО.

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

В этом правиле определяются свойства для всех заголовков с тэгом h2:

размер шрифта = 15 пикселей цвет шрифта #232D37

*{ margin: 0; padding: 0; }*

Файл style.css{ font: .10em Arial, "Trebuchet MS", Arial, sans-serif; line-height:

1.6em;

:Параметр позволяет установить одновременно несколько атрибутов стиля шрифта. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.: Единицы измерения 'em' эквивалентны вычисленному значению свойства 'font-size' (размер шрифта) того элемента, в котором оно используется.: название шрифта.

"Trebuchet MS", Arial, sans-serif: рубленные шрифты (шрифты без засечек или гротески), типичный представитель - Arial;

background: #fff url(images/bg.gif) repeat-x; color: black; }; img { border: 0; }

backgronund: Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. Некоторые параметры не поддерживаются браузером Netscape 4.x. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра отдельно.

#content { width: 1200px; margin: 25px auto; }

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

#logo { margin: 10px 0 20px 0; width: 340px; float: left; }

#logo p { margin: 0; }

: Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента

#menu { float: right; padding: 40px 0 0; margin: 0 0 38px; }

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

Синтаксис

: left | right | none | inherit

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

#menu li { font-size: 1.1em; display: inline; }

Font-size: Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small,small, medium, large, x-large, xx-large) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

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

В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.

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

#menu li a { float: left; width: 87px; padding: 2px 0 7px; text-align: center; : 0 0 0 10px; color: black; }

#menu li a.current { background: #fff url(images/button.gif) no-repeat; : #fff; }

#menu li a:hover { text-decoration: none; color: #000; background: #fff (images/button_grey.gif) no-repeat; }

.clear { clear: both; }

.caption { background: black url(images/title.gif) no-repeat; padding: 2px 0

18px; height: 35px; color: blue; }

.caption p { margin: 0;

#left { margin: 0 0 20px; clear: left; width: 200px; float: left; }

.box { background: #eee; }

Далее после создания стилей подключаю его в файлу header.inc

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

Далее после подключение файла style.css шаблон сайта делится на два файла header .inc и footer.inc .

Содержание файла header.inc смотрите приложение А

файл footer.inc

<html>

<body>

<div id="footer">

<p>разработчик: Константин Шуйцев<br />

</div>

</body>

</html>

Файл header.inc и footer.inc загружаю его в файл index.php

Header.inc

<?php

$title = 'Справка';('header.inc');//верх шаблона

?>.inc

<?php('footer.inc');//низ шаблона

?>

Рисунок 2.4 - Главная страница сайта

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

На сайте телефонного справочника использованы следующие виды поиска:

. Поиск по номеру;

. Поиск по имени;

. Поиск по алфавиту;

. Поиск по организации;

. Поиск по адресу;

Разберем каждый по отдельности.

Поиск по номеру скрипт файла содержится в файле searchx.php.

<?php(isset($_GET['x'])) { $value = urldecode($_GET['x']); //проверка

параметров запроса(empty($_GET['x']))

$err = 'Необходимо указать номер телефона для поиска.';

elseif (preg_match("/[^\d_]+/", $value))

$err = 'В строке запроса следует вводить только цифры номера - без

пробелов и других посторонних символов';(strlen($_GET['x']) > 6)

$err = 'Номер телефона не должен содержать более 6 цифр.';

elseif (substr_count($value, '_') > 1)

$err = 'Допускается только одна произвольная цифра в номере.';(! isset($err)) { //ошибок нет('searchx.inc');загрузка файла 'searchx.inc';; }}

Рисунок 2.5 поиск по номеру

Скрипт файла 'searchx.inc':

<?php('base.inc');

//поиск по частным номерам

$sql = "SELECT number, person, street, house, flat FROM pphone, street street.strid = pphone.strid AND number LIKE '{$value}' ORDER number";

$res = mysql_query($sql) or exit('Ошибка при выполнении запроса к базе

данных.');// mysql_query() посылает один запрос (посылка нескольких

запросов не поддерживается) активной базе данных сервера, на

который ссылается переданный дескриптор

//SELECT названия_нужных_полей FROM название_таблицы WHERE

условие_выборки

$sql2 = "SELECT number, office, street, house, note FROM ophone, office, WHERE office.offid = ophone.offid AND street.strid = ophone.strid number LIKE '{$value}' ORDER BY number";

$res2 = mysql_query($sql2) or exit('Ошибка при выполнении запроса к

базе данных.');

$title = 'Результаты поиска';

include('header.inc');(mysql_num_rows($res) + mysql_num_rows($res2)) {

// mysql_num_rows() возвращает количество рядов результата запроса.

Эта команда работает только с запросами SELECT. Чтобы получить

количество рядов, обработанных функцями INSERT, UPDATE,

DELETE(mysql_num_rows($res)) {

?>

<P>По вашему запросу (поиск по номеру "<STRONG><?php echo

$value ?></STRONG>") найдены следующие записи

(<STRONG>частные номера</STRONG>):</P>

<TABLE WIDTH="100%" CELLPADDING="2" CELLSPACING="1" ="0">

<TR ="head"><TD>Номер</TD><TD>Имя</TD><TD>Адрес</TD></>

<?php while ($row = mysql_fetch_assoc($res)) { ?>

<TR CLASS="data"><TD>

<?php echo $row['number'] ?></TD><TD>//

<?php echo $row['person'] ?></TD><TD>

<?php echo "{$row['street']}, {$row['house']}"; if ($row['flat'])

echo " - ".$row['flat'] ?></TD></TR>//row: Эта функция возвращает одну

строку из результатов запроса. Если результат содержит несколько

строк, то выбраной будет только первая. Результат возвращается сразу

в виде объекта.

<?php } ?>

</TABLE>

<?php

}

//офисные номера

if (mysql_num_rows($res2)) {

?>

<P>По вашему запросу (поиск по номеру "<STRONG><?php echo

$value ?></STRONG>") найдены следующие записи

(<STRONG>офисные номера</STRONG>):</P>

<TABLE WIDTH="100%" CELLPADDING="2" CELLSPACING="1" ="0">

<TR ="head"><TD>Номер</TD><TD>Организация</TD><TD>Адрес

</TD><TD>Примечание</TD></TR>

<?php while ($row = mysql_fetch_assoc($res2)) { ?>

<TR CLASS="data"><TD><?php echo $row['number']

?></TD><TD><?php echo $row['office'] ?></TD><TD><?php echo

"{$row['street']},{$row['house']}" ?></TD><TD><?php echo $row['note']

?></TD></TR>

<?php } ?>

</TABLE>

<?php

}

?>

<P>Записи упорядочены по номеру абонента.</P>

<?php

} else {

?>

<P>По вашему запросу (поиск по номеру "<STRONG><?php echo

$value ?></STRONG>") записи не найдены.</P>

<?php('notfnd.inc');

}('footer.inc');

?>

Рисунок 2.6 итог поиска по номеру

Поиск по имени. Данный вид поиска осуществляется по имени абонента, скрипт содержится в файле searchn.php

<?php(isset($_GET['n'])) {

$value = urldecode($_GET['n']);

//проверка параметров запроса(empty($value))

$err = 'Необходимо указать имя абонента.';(strlen($value) < 2)

$err = 'Имя абонента не может содержать менее 2 символов.';(strlen($value) > 25)

$err = 'Имя абонента не должно содержать более 25 символов.';

elseif (preg_match("/[^\xC0-\xFF]+/", $value))

$err = 'В строке запроса допускается вводить только символы русского

алфавита.';

if (! isset($err)) { //ошибок нет

include('searchn.inc');; }}

$title = 'Поиск по имени';

include('header.inc');

?>

Рисунок 2.7 поиск по имени абонента

После ввода имени абонента и нажатии кнопки «поиск» скрипт начинает проверку параметров запроса, если ввод имени не противоречит условию поиска, то загружается файл searchn.inc.

<?php('base.inc');//соединение с базой данных

$sql = "SELECT number, person, street, house, flat FROM pphone, street street.strid=pphone.strid AND person LIKE '{$value}%' ORDER person";

$res = mysql_query($sql) or exit('Ошибка при выполнении запроса к базе

данных.');//запрос к базе данных phone

$title = 'Результаты поиска';('header.inc');(mysql_num_rows($res)) {

?>

<P>По вашему запросу (поиск по имени "<STRONG><?php echo $value

?></STRONG>") найдены следующие записи:</P>

<TABLE WIDTH="100%" CELLPADDING="2" CELLSPACING="1" ="0">

<TR ="head"><TD>Номер</TD><TD>Имя</TD><TD>Адрес</TD></>

<?php($row = mysql_fetch_assoc($res)) {

?>

<TR CLASS="data"><TD><?php echo $row['number']

?></TD><TD><?php echo $row['person'] ?></TD><TD><?php echo

"{$row['street']}, {$row['house']}"; if ($row['flat']) echo " - ".$row['flat']

?></TD></TR>//вывод результата запроса

<?php}?>

</TABLE>

<P>Записи упорядочены по имени абонента.</P>

<?php} else {?>

<P>По вашему запросу (поиск по имени "<STRONG><?php echo $value

?></STRONG>") записи не найдены.</P>

<?php('notfnd.inc');}//загрузка файла('footer.inc');?> //загрузка файла

Поиск по алфавиту. Данный вид поиска состоит из двух частей:

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

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

Рисунок 2.8 вывод данных по поиску по имени

Файл скрипта searcha.php.

}

} elseif (isset($_GET['s'])) {

$value = urldecode($_GET['s']);

//проверка параметров запроса(! strlen($_GET['s']))

$err = 'Необходимо выбрать первую букву имени абонента для поиска.';

if (! isset($err)) { //ошибок нет('searcha2.inc');;}}

$title = 'Поиск по алфавиту';('header.inc');

?>

<P>Выберите <STRONG>первую букву</STRONG> фамилии

абонента:</P><h4><P>...и просто щелкните по ней.</P>

<br><h2>

<TABLE ALIGN="CENTER" CELLPADDING="4" CELLSPACING="1" ="0">

<TR>

<?php

$alpha = 'А---Б---В---Г---Д---Е---Ж---З---И---К---Л---М---Н---О---П---Р---

С---Т---У---Ф---Х---Ц---Ч---Ш---Щ---Э---Ю---Я';

$arr = explode('-', $alpha);($arr as $a) {($a == '|') {"</TR>\r\n<TR>";

} else {

?>

<TD><A HREF="searcha.php?a=<?php echo urlencode($a) ?>"><?php $a ?></A></TD>

<?php }}

?>

</TR></TABLE>

<?php(isset($err)) {

?>

<P CLASS="error">Внимание! <?php echo $err ?></P>

<?php

}('footer.inc');?>

сайт phones архитектура интерфейс

Рисунок 2.9 поиск по алфавиту

После выбора Буквы загружается файл searcha.inc

<?php

$title = "Поиск по алфавиту";('base.inc');//содинение с базой данных

$sql = "SELECT DISTINCT SUBSTRING(person,1,3) AS abc FROM WHERE person LIKE '{$value}%' ORDER BY abc";// Mysql

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

$res = mysql_query($sql) or exit('Ошибка при выполнении запроса к базе

данных.');('header.inc');(mysql_num_rows($res)) {

?>

<P>Теперь выберите <STRONG>начальные буквы</STRONG>

фамилии абонента:</P><h2>

<TABLE ALIGN="CENTER" CELLPADDING="4" ="15" BORDER="0"></h2>

<TR>

<?php

$f = 0;($row = mysql_fetch_assoc($res)) {"<TD><A =searcha.php?s={$row['abc']}>{$row['abc']}</A></TD>";//

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

$f = ($f + 1) % 10;(! $f) echo "</TR>\r\n<TR>";

}

?>

Рисунок 2.10 Поиск по алфавиту с первыми буквами абонента

Если абонент с такими первыми буквами фамилии существует, то происходит выдача запроса фалом searcha2.inc

<?php('base.inc');//связь с базы данных

$sql = "SELECT number, person, street, house, flat FROM pphone, street street.strid=pphone.strid AND person LIKE '{$value}%' ORDER person";

$res = mysql_query($sql) or exit('Ошибка при выполнении запроса к базе

данных.');

$title = 'Результаты поиска';('header.inc');(mysql_num_rows($res)) {

?>

<P>По вашему запросу (поиск по первым буквам "<STRONG><?php $value ?></STRONG>") найдены следующие записи:</P>

<TABLE WIDTH="100%" CELLPADDING="5" CELLSPACING="1" ="0">

<TR ="head"><TD>Номер</TD><TD>Имя</TD><TD>Адрес</TD></>

<?php($row = mysql_fetch_assoc($res)) {

?>

<TR CLASS="data"><TD><?php echo $row['number']

?></TD><TD><?php echo $row['person'] ?></TD><TD><?php echo

"{$row['street']}, {$row['house']}"; if ($row['flat']) echo " - ".$row['flat']

?></TD></TR>//показ результатов запроса

<?php }?>

</TABLE>

<P>Записи упорядочены по имени абонента.</P>

<?php

} else {

?>

<P>По вашему запросу (поиск по первым буквам "<STRONG><?php $value ?></STRONG>") записи не найдены.</P>

<P>В это трудно поверить, но у тех, чья фамилия начинается на

"<STRONG><?php echo $value ?></STRONG>" домашних телефонов

нет!</P>

<?php} include('footer.inc');?

Рисунок 2.11 результат поиска по алфавиту

Поиск организации:

Скрипт файла

<?php(isset($_GET['o'])) {

$value = $_GET['o'];($value, 'integer');

//проверка параметров запроса(empty($value))

$err = 'Необходимо выбрать название организации.';

if (! isset($err)) { //ошибок нет('searcho.inc'); exit;}('base.inc');

$sql = "SELECT offid, office FROM office ORDER BY office";

$res = mysql_query($sql) or exit('Ошибка при выполнении запроса к базе

данных.');

$title = 'Поиск по организации';('header.inc');

?>

Рисунок 2.12 поиск по организации

Рисунок 2.13 итог поиска по организации

Поиск по адресу: скритп файла searchp.php

<?php(isset($_GET['h']) and isset($_GET['s'])) {

$value = $_GET['s'];($value, 'integer');

$house = urldecode($_GET['h']);

//проверка параметров запроса(empty($value))

$err = 'Необходимо выбрать населенный пункт и улицу.';(empty($house))

$err = 'Необходимо указать обозначение номера дома.';(strlen($house) > 8)

$err = 'Обозначение номера дома не должно содержать более 8

символов.';(preg_match("/['%_]+/", $house))

$err = 'В строке запроса содержатся недопустимые символы.';

if (! isset($err)) { //ошибок нет('searchp2.inc');; } else {("Location: searchp.php?s={$value}");; }}(isset($_GET['s'])) {

$value = $_GET['s'];($value, 'integer');

//проверка параметров запроса(empty($value))

$err = 'Необходимо выбрать населенный пункт и улицу.';

if (! isset($err)) { //ошибок нет('searchp1.inc');;}('base.inc');

$sql = "SELECT strid, street FROM street ORDER BY street";

$res = mysql_query($sql) or exit('Ошибка при выполнении запроса к базе

данных.');

$title = 'Поиск по адресу';

include('header.inc');

?>

Рисунок 2.14 Поиск по адресу

Связь клиента с администрацией сайта скрипт фала message.php

(PHP 3, PHP 4, PHP 5)- отправляет почту.

Описание

mail (string to, string subject, string message [, string _headers [, string additional_parameters]])

mail() автоматически отправляет сообщение message получателю to. Можно специфицировать несколько получателей, разделив запятой адреса в to. С помощью этой функции можно высылать Email с присоединением/attachment и содержимое специальных типов.() возвращает TRUE, если почта была успешно принята для доставки, FALSE в ином случае.

<?php(isset($_POST['note'])) { //скрипт вызван из формы

$note = htmlspecialchars($_POST['note'], ENT_QUOTES);

if (empty($note))

$err = 'Необходимо ввести текст сообщения.';(strlen($note) > 2000)

$err = 'Текст сообщения не должен содержать более 2000 символов.';

if (! isset($err)) { //ошибок нет('base.inc');

$sql = "INSERT INTO message (message, date, host) VALUES ('{$note}', (), '{$REMOTE_ADDR}')";

mysql_query($sql) or $err = 'Не удалось отправить сообщение.';

if (! isset($err)) { //ошибок нет('Location: index.php');;

}}}

$title = 'Сообщение администратору';('header.inc');

?>

Рисунок 2.14 связь с администрацией сайта

Администрирование содержит инструменты управления.

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

Управление;

Просмотреть сообщения

Изменить пароль

Обновить записи

Загрузить файлы

Вход в панель администратора осуществляется через логин и пароль.

Рисунок 2.15 Вход в панель администратора

Скрипт файла www.spravka.kz/admin/login.php

<?php_start();

//регистрация уже есть -> выход

if (isset($_SESSION['logdate'])) {_unset();('Location: login.php');;

}

//проверить пароль(isset($_POST['login']) and isset($_POST['pswd'])) {('login.inc');

}

$title = 'Вход для администратора';

include('header1.inc');

?>

Для вывода строки используется echo. С ее помощью можно выводить текст в кавычках, значения переменных и т.д.

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

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