Для рзрабокти каждой части программного продукта (сайта) использовался тот или иной язык. Стили оформления определялись при помощи CSS, разметка производилась средствами HTML, сценарии писались на JavaScript, за работу с базой данных отвечал PHP.
Язык гипертекстовой разметки присутствует практически в каждом имеющемся файле сайта. Там, где задаются хоть какие-то графические элементы, HTML призван позиционировать их на страницах.
Шаблон сайта базируется на нескольких таблицах (в таком случае программисты говорят, что использовалась табличная верстка). Всего шаблон имеет 4 блока: верхнее меню, «шапку сайта», боковое меню, блок содержания и «подвал». Верхнее меню включает в себя следующие разделы:
· главная страница;
· о нас;
· контакты;
· новости математики;
· регистрация.
Боковое меню состоит из таких разделов:
· новости математики;
· интересные факты;
· занимательные задачи;
· полезное школьнику.
Разделы бокового меню открывают доступ к основному материалу сайта. Тут же находится форма авторизации. На тематических страницах размещена информация, представленная в виде текста и картинок, стиль оформления которых задан при помощи CSS, а эффекты смоделированы посредством JavaScript.
В «подвале» также есть меню, но оно не требует рассмотрения, так как полностью аналогично верхнему меню.
По большей части, за внешний вид сайта отвечает CSS. Посредством него задан стиль основного текста, внешний вид заголовков и ссылок, отдельных элементов и т. д. Так, например, описан стиль основных HTML-элементов:
body {
margin:0;
padding:0;
background:#ffffff;
}
p,td { font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin-top: 0px;
}
div { padding-top: 10px;
padding-bottom: 10px;
}
a{
color: #1B7FA2;
text-decoration: underline;
}
Универсальные и часто используемые стилевые значения описаны в специальном файле style.css, подключение которого к каждой странице обозначено внутри тега head:
<link href="css/style.css" rel="stylesheet" type="text/css">
Кроме того, при помощи CSS оформлены некоторые элементы, правило для которых прописывались непосредственно в самих, отвечающих за эти элементы, HTML-тегах.
В оформлении, помимо CSS, задействован JavaScript. С его помощью на некоторых страницах запрограммирован сценарий «раскрытие содержимого по нажатию». При щелчке по ссылке раскрывается область с объектом (текстом или картинкой).
Скрипт прописыался в теге head. Так, например, выглядит код скрипта для сценария расскрытия/закрытия блока на странице «Полезное школьнику»:
<script>
function collapsElement(id) {
if (document.getElementById(id).style.display!= "none") {
document.getElementById(id).style.display = 'none';
}
else {
document.getElementById(id).style.display = '';
}
}
</script>
Остальная часть кода скрипта прописывается непосредственно в месте самого элемента, к которому необходимо пременить сценарий.
Важным моментом при создании сайта является реализация функции аутентификации посетителя. Она состоит из двух этапов: регистрации и авторизации. Прежде чем сайт станет воспринимать посетителя как «своего», тот должен внести личные данные (в нашем случае это пароль и логин) в базу данных этого сайта, иначе говоря – зарегистрироваться. Когда он зарегистрировался, становится возможна процедура авторизации. Для реализации этих этапов, и включения в функционал сайта возможности аутентификации пользователей требуется язык программирования PHP.
Таковой предстанет перед посетителем вся процедура аутентификации. Вошедшей на сайт и неавторизованный, посетитель увидит в области меню форму авторизации, которая для входа на сайт предлагает ввести логин и пароль. В верхнем меню есть ссылка на страницу регистрации. Если посетитель решит войти на сайт, до этого прежде не зарегистрировавшись, его переправит на страницу с сообщением:
Извините, введённый вами login или пароль неверный.
либо:
Вы ввели не всю информацию, вернитесь назад и заполните все поля!
Это зависит от того, заполнил ли он все поля или нет. Посетив страницу регистрации и зарегистрировавшись, посетитель станет полноправным пользователем, имеющим возможность войти на сайт. Ввод достоверного логина и пароля запустит сессию, вместе с началом работы которой, форма авторизации пропадет, вместо нее появится кнопка выхода.
В конечном счете, аутентификация потребовала четыре отдельных файла:
· bd.php
· reg.php
· testreg.php
· save_user.php
В файле bd.php прописаны указания для подключения к БД:
<?php
$db = mysql_connect ("localhost","root","");
mysql_select_db ("reg", $db);
?>
Для успешного соединения, в PHPMyAdmin должна быть создана БД. В данном случае она называется reg. В БД reg создана таблица users, содержащая три столбца: id, login и password. В качестве максимального значения для логина и пароля указано число 20. Столбец id увеличивается на 1 автоматически (инкрементируется).
Файл reg.php представляет страницу регистрации. Введенные в форму регистрации логин и пароль отсылаются на страницу save_user.php для обработки и последующего внесения их в БД reg.
Для проверки введенных данных входящего на сайт уже ранее зарегистрированного пользователя создан файл testreg.php. В случае успешного окончания проверки, пользователя переправит на страницу testreg.php, откуда возможен переход на главную страницу сайта.
Помимо этого, особого внимания заслуживает форма обратной связи. Для ее создания также использовался PHP. Она располагается на странице «Контакты» и состоит из трех полей:
· «ваше имя»;
· «ваш e-mail»;
· «ваше сообщение».
Все отправленные при помощи этой формы сообщения придут на электронный ящик, указанный в файле send.php.