09.03.2015 48661

Организация учета заявок клиентов при помощи Excel и Интернет-технологий

Начало разработки сайта

После создания базы данных мы должны перейти к разработке необходимых HTML- и PHP-файлов. Первая задача при реализации данного плана — это создание стартовой страницы сайта (рис. 4.10), которая будет открываться после набора www.glava4___l.ru в адресной строке браузера (для определенности далее мы будем использовать Internet Explorer). В листинге 4.2 приведен HTML-документ, который обеспечивает данную стартовую страницу.

<!-- Листинг 4.2. Файл index.html -->
<html><head>
<title>Стартовая страница сайта</title>
<style type="text/css">
a { text-decoration:none; font-size: 14pt; }
a:hover { text-decoration:underline; color: green; background-color: #CCFFCC; }
</style>
</head>
<body>
<a href="klients.php"> Раздел для клиентов </a>
<br>
<a href="admin.html"> Администрирование </a>
</body>
</html>

Рис. 4.10. Стартовая страница сайта

Итак, набрав в Блокноте текст, представленный в листинге 4.2, следует его сохранить в файле под именем index.html в каталоге Z:homeglava4_1.ruwww.

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

После создания нового сайта следует перезапустить систему Денвер, далее открыть браузер и в адресной строке набрать www.glava4_1.ru.

Следует обратить внимание на то, что мы в адресной строке не указали название файла — index.html. Это объясняется тем, что при указании названия сайта файл index.html запускается автоматически. При другом имени файла необходимо указать его название в адресной строке. Например, это может выглядеть так: www.glava4_1.ru/str1 .html.

Вернемся к листингу 4.2 и рассмотрим его содержимое. Каждый файл, содержащий HTML-страницу, подразделяется на две основные части:

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

Заголовок располагается между тегами <head> и </head>. Указание заголовка является требованием для каждого HTML-документа. В заголовке можно разместить текст, который отражается в верхней части окна браузера. Этот текст вводится при помощи парных тегов <title> и </title>, помещаемых внутри заголовочной части страницы. Кроме данного текста в заголовочной части могут располагаться другие элементы. Так, в нашем примере в области заголовка мы указали стиль, который определяет внешний вид гиперссылок. Тег <body> открывает тело документа. В тело документа помещается то содержание, которое должно отображаться браузером (в основном это текстовая информация и изображения).

Самой важной особенностью языка гипертекста HTML является возможность создавать гиперссылки на другие файлы, находящиеся либо на том же компьютере, либо в каком-то другом месте (на других компьютерах в сети Интернет). При наведении мыши на гиперссылку вид курсора изменяется. Подобный фрагмент на странице называется якорем. В качестве якоря может выступать как текст, так и изображения. В листинге 4.2 в теле документа размещены две гиперссылки. Ключевой (обязательный) параметр гиперссылки — href, значение которого определяет на какую страницу произойдет переход при щелчке мыши на данной гиперссылке. В данном случае одна гиперссылка приведет к загрузке в браузер веб-страницы klients.php, а другая — admin.html.

В браузере для отображения гиперссылок на странице предусмотрен стандартный стиль, однако его можно при желании изменить. В тексте, представленном в листинге 4.2, это производится с помощью тега STYLE. Для нашей страницы мы установили отсутствие оформления гиперссылок на экране и определенный размер букв: А { text-decoration:none; font-size: 14pt; }. В следующей конструкции стиля A:hover { text-decoration:underline; color: green; background-color: #CCFFCC; } определяется, как гиперссылка будет выглядеть при наведении мыши. Здесь мы определили зеленый цвет букв и светло-зеленый оттенок фона. Также указали необходимость подчеркивания гиперссылки.

При щелчке на гиперссылке Администрирование открывается страница admin.html, которая предназначена для авторизации пользователя (рис. 4.11). Текст файла, обеспечивающего в окне браузера эту страницу, приведен в листинге 4.3.

<!-- Листинг 4.3. Файл admin.html -->
<html>
<head>
<title>Авторизация</title>
</head>
<body>
<form action="obr.php" method="post">
Логин: <input type="text" name="n1"><br><br>
Пароль: <input type="password" name="n2"><br><br>
<input name="n3" type="submit" value="OK">
</form>
</body>
</html>

Рис. 4.11. Авторизация при выборе раздела администрирования

В листинге 4.3 используется функциональная возможность, которая позволяет передавать информацию, введено пользователем в браузер на своем компьютере, на веб-сервер. Так, тег <form> создает на странице форму, с помощью которой информация от элементов формы передается другой программе (расположенной на веб-сервере), имя которой указывается в параметре action: <form action="obr.php" method="post">. В нашем примере мы разместили на форме два поля ввода (для логина и пароля), а также кнопку. У элемента формы, предназначенного для ввода пароля, в качестве типа использовано значение password, что позволяет скрыть от посторонних набранную в этом элементе информацию.

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

Наверняка вы обратили внимание, что файл, обрабатывающий данные формы, имеет расширение не html, a php. В нем (листинг 4.4) кроме уже знакомых тегов языка гипертекста HTML присутствуют строки программы на языке серверных сценариев РНР.

Фрагменты PHP-кода обрамляются тегами <?php (начало фрагмента) и ?> (завершение фрагмента). Таких фрагментов может быть несколько — они перемешиваются с HTML-фрагментами.

В листинге 4.4 приведен текст скрипта obr.php, а на рис. 4.12 — отображение результата серверной обработки данного файла в окне браузера при правильной авторизации.

<!-- Листинг 4.4. Содержание скрипта obr.php -->
<html>
<head>
<title>Проверка пароля и логина</title>
<style type="text/css">
a {text-decoration:none; font-size:14pt;}
a:hover {text-decoration:underline; color:green; background-color: #CCFFCC; }
</style>
</head>
<body>
<?php
if ( isset($_POST["n3"]))
if ($_POST['n1'] == "Nice" && $_POST['n2'] == "357")
{echo "Авторизация прошла успешно!!!";
    echo "<br><a href='perevod_firm.html'>Перевод информации о фирмах в базу данных</a>";
    echo "<br><a href='perevod_tov.html'>Перевод информации о товарах в базу данных</a>";
    echo "<br><a href='zakazi.php'>Информация о заказах</a>";}
else
	{die('Неверный пароль <br><a href="index.html"><br>
    	Вернуться на стартовую страницу</a>'); }
       }
    else
    {echo '<a href="index.html">Вернуться на главную страницу</a>';}
   ?>
</body>
</html>

Рис. 4.12. Результат успешной авторизации

Текст листинга 4.4 требует комментария. В начале фрагмента на языке РНР (определяется конструкцией — <?php) проверяется, каким образом вызван файл (произвольно либо со страницы admin.html). Точнее, с помощью условия if ( isset($_POST['n3'])) проверяется, есть ли в полученных скриптом obr.php данных информация oт элемента формы с именем n3. Как видно из листинга 4.3, это имя кнопки. В случае положительного ответа на данный вопрос программный код скрипта начинает проверку введенной комбинации имени и пароля. Если этой комбинацией оказывается Nice и 357, то авторизация успешно завершается и для дальнейшей работы перед пользователем в окне браузера открываются три гиперссылки. В случае если скрипт запущен напрямую либо авторизация была произведена с неверным логином или паролем, в окне браузера отображается гиперссылка для возврата на начальную страницу.

Дальнейшая наша задача заключается в последовательном рассмотрении действий, реализующих функциональность трех гиперссылок, представленных на рис. 4.12. Все эти действия связаны с обменом информацией между книгой Microsoft Excel и ранее созданной нами базой данных Glava4. В соответствии с листингом 4.4 нам необходимо создать файлы perevod_firm.html, perevod_tov.html, zakazi.php. Файлы perevod_firm.html и perevod_tov.html содержат формы ввода информации пользователем. В скрипте zakazi.php реализовано извлечение информации из базы данных с последующим ее выводом в окне браузера.

1 2 3 4 5 6 7 8