Иногда в cookies приходится хранить конфиденциальные данные, и в этом случае разработчик должен позаботиться о том, чтобы информация хранящееся в cookie не была передана третьим лицам. Существует несколько методов защиты информации, хранящейся в cookie:
● установка области видимости cookies;
● шифрование;
● ограничение доступа для доменов;
● отправка cookies по защищенному запросу.
Наилучшим решением является комплексное применение всех этих способов.
Однако и в этом случае, к примеру, каталоги /web/index.php, /web1/page.html и т. д. будут удовлетворять этому ограничению. Если такое положение также является нежелательным, можно ограничить область видимости cookies до конкретной страницы:
setcookie( "name", $value, "/web/index.php" );
Однако и такой способ в полной мере не решает проблему, так как в этом случае доступ к информации, содержащейся в cookie, может получить, к примеру, скрипт /web/index.php-script/anti_cookie.php. Поэтому появляется необходимость в шифровании.
Так же нами была изучена библиотека JavaScript – JQuery.
JQuery – библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. jQuery позволяет манипулировать объектами на странице и совершать с ними различные действия.
jQuery позволяет:
● Обращаться к любому элементу DOM (объектной модели документа) и не только обращаться, но и манипулировать ими.
● Работать с событиями.
● Легко осуществлять различные визуальные эффекты.
● Работать с AJAX (очень полезная технология, позволяющая общаться с сервером без перезагрузки страницы, но пока мы ее трогать не будем).
● Имеет огромное количество JavaScript плагинов, предназначенных для создания элементов пользовательских интерфейсов.
Для манипулирования нужными элементами страницы в Javascript есть несколько способов найти их на странице среди прочего множества объектов. Эти способы требуют запоминания большого количества информации, в то время как для поиска элемента при помощи jQuery необходимо лишь помнить ID элемента,
с которым вы хотите работать. Код обращения в общем случае будет выглядеть следующим образом: $('путь к элементу(элементам)') Ключевой функцией в jQuery является функция $() – она тем или иным образом вызывается всеми методами jQuery.
Благодаря тому, что объем программного кода jQuery меньше, чем объем стандартного кода Javascript, сокращаются временные затраты на разработку элементов веб-страницы. Сам программный код более понятен по сравнению с JavaScript.
<script type="text/javascript" src="jquery.js"></script> <!--Подключаем библиотеку JQUERY-->
<script type="text/javascript">
$(document).ready(function() {
привязываем событие клика к элементу страницы с id равным displayText
$('#displayText').click(function () {
выводим значение элемента с id равным myString на экран с помощью функции alert
alert($('#myString').val());
});
привязываем событие двойного клика к элементу input с параметром value начинающимся со слова "Очистить", который находится в блоке div
$('div input[value^=Очистить]').dblclick(function () {
выбираем первый элемент input в блоке с id равным testForm и очищаем его значение
$('#testForm input:first').val('');
});
привязываем событие клика к объекту input который находится в блоке div, а это div тоже должен находится в блоке div
$('div div input').toggle(function () {
выбираем элемент input у которого свойство type равно text и скрываем его за 2 секунды
$('input[type = text]').fadeOut(2000);
изменяем надписать на кнопке с id равным hideTextBox на "Показать поле"
$('#hideTextBox').val('Показать поле');}, function () {
выбираем элемент input у которого свойство type равно text и показываем его за 3 секунды
$('input[type = text]').fadeIn(3000);
изменяем надписать на кнопке с id равным hideTextBox на "Спрятать поле"
$('#hideTextBox').val('Спрятать поле');});
привязываем событие наведения мыши к объекту с id равным myString, т.е. к текстовому полю
$('#myString').mouseover(function () {
изменяем текст элемента p на "Вы НАВЕЛИ мышку на текстовое поле!"
$('p').text('Вы НАВЕЛИ мышку на текстовое поле!'); });
привязываем событие отведения мыши к объекту с id равным myString, т.е. к текстовому полю
$('#myString').mouseout(function () {
изменяем текст элемента p на "Вы УБРАЛИ мышку с текстового поля!"
$('p').text('Вы УБРАЛИ мышку с текстового поля!');
});
\\
привязываем событие изменение состояния к элементу select
$('select').change(function () {
получаем значение выбранного элемента select (на этот раз через его id = borderDiv, а не через селетор select для примера)
var borderDivValue = $('#borderDiv:selected').val();
если пользователь выбрал значение "Нарисовать красную рамку", т.е. value = "red"
if (borderDivValue == 'red')
{
указываем напрямую css свойства border-color и border-width для элемента с id = testForm
$('#testForm').css({
'border-color':'red',
'border-width':'2px'
});
}
иначе (можно было написать else if (borderDivValue == 'green')), т.е. value = "green"
else
{
указываем напрямую css свойства border-color и border-width для элемента с id = testForm
$('#testForm').css({
'border-color':'green',
'border-width':'5px'
});
}
При указании css свой есть небольшая деталь: если вы указываете свойства каких-нибудь
элементов через JQUERY, то вы обязательно должны указывать полные значения свойств, т.е.
запись "border: green 5px" работать не будет, а запись 'border-color':'green', 'border-width':'5px' будет работать корректно.
});
});
</script>
Так же нами был рассмотрен набор технологий AJAX позволяющий делать динамические запросы к серверу без видимой перезагрузки веб-страницы: пользователь не замечает, когда его браузер запрашивает данные. AJAX обеспечивает динамичность и асинхронность web-разработок при отсутствии необходимости обновления страниц.
Код клиентской стороны (JavaScript), который будет выполнять функцию отправки запроса обратно на сервер. В Source View формы Default.aspx добавьте часть кода, которая внедрена в <script> элемента страницы <head>:
<head runat="server">
<title>Untitled Page</title>
<script>
function ShowCover(){
var Command = "1:" +
document.forms[0].elements['txtISBN'].value;
var context = new Object();
context.CommandName = "ShowCover";
window.status="Retrieving cover...";
<%=callbackStr%>
}
function CallBackHandler(result, context) {
// Показываем обложку с Amazon.com
if (context.CommandName == "ShowCover") {
var indexofComma = result.indexOf(",");
// Отображаем используемый Image URL
var ImageURL = result.substring(0,indexofComma);
document.images.item("Image1").src=ImageURL;
// Обновляем URL книги
var BookURL = result.substring(indexofComma+1,result.length);
document.links("BookURL").href = BookURL;
window.status="Retrieving cover...Done.";
}
}
// Обрабатываем ошибки
function onError(message, context) {
alert("Exception:\n" + message);
}
</script>
</head>
Оператор <%=callbackStr%> включит сгенерированную строку в функцию, итак в процессе работы она превратится:
function ShowCover(){
var Command = "1:" +
document.forms[0].elements['txtISBN'].value;
var context = new Object();
context.CommandName = "ShowCover";
window.status="Retrieving cover...";
WebForm_DoCallback('__Page',Command,
CallBackHandler,context,onError, false)
}
Возврат результата проводится с помощью переменной результата в функции CallBackHandler(). Он может выглядеть следующим образом (два URL в данной строке отделяются запятой, первый указывает на книжную обложку
db.php
Lt;?php
$mysql_connect=mysql_connect("localhost","root","");
$db=mysql_select_db("forum");
?>
exit.php
Lt;?php
//Запускаем сессию для работы с куками
session_start();
//Так как пользователь хотел выйти,
//удаляем ему логин и id из кукисов
unset($_SESSION['login']);
//Переадресовываем на главную
header("location: index.php");
?>
add_mess.php
Lt;?php
//Проверям есть ли переменные на добавление
if (isset($_POST['mess']) && $_POST['mess']!="" && $_POST['mess']!=" ")
{
//Стартуем сессию для записи логина пользователя
session_start();
//Принимаем переменную сообщения
$mess=$_POST['mess'];
//Переменная с логином пользователя
$login=$_SESSION['login'];
//Подключаемся к базе
include ("bd.php");
//Добавляем все в таблицу
$time=date("Y-m-d")." ".date("H:i:s");
$res=mysql_query("INSERT INTO `messages` (`time`,`login`,`message`) VALUES ('$time','$login','$mess') ");
}
?>
Load_mess.php
Lt;?php
include ("bd.php");
//Выбираем все сообщения
$res=mysql_query("SELECT * FROM `messages` ORDER BY `time` ");
//Выводим все сообщения на экран
while ($d=mysql_fetch_array($res))
{
echo "<sub><font color='#5f1c6d'>".$d['time']."\t".$d['login'].": </font></sub><div style='background:#9f3;'>".$d['message']."</div><br>";
}
?>
index.php
<html><head>
<title>Чат</title>
<link type="text/css" rel="stylesheet" href="divb.css" media="all"/>
<head>
</head>
<body bgcolor="#53AC6D">
<?php
//Запускаем сессию для работы с кукис файлами
session_start();
//Если отсутствуют логин и айди,
//отображаем форму входа и регистрации
if(!isset($_SESSION['login']))
{
?>
<center>
<div>
<form action="register.php" method="POST">
<h3>Регистрация</h3>
Логин: <br> <input type="text" name="login">
<br>
Пароль: <br> <input type="password" name="password">
<br>
<input type="submit" value="Зарегистрироваться">
</form>
</div>
<div>
<form action="login.php" method="POST">
<h3>Вход</h3>
Логин: <br> <input type="text" name="login">
<br>
Пароль: <br> <input type="password" name="password">
<br>
<input type="submit" value="Вход">
</form>
</div>
</center>
<?php
}else
//Если сессия запущена, то есть присутствуют файлы
//кукис, и в них есть логин и айди
//то отображаем профиль пользователя
//Для этого достаем из базы все данные по логину
//и выводим их на странице
{
include("bd.php");
$user=$_SESSION['login'];
$res=mysql_query("SELECT * FROM `users` WHERE `login`='$user' ");
$user_data=mysql_fetch_array($res);
echo "<div>Welcome ".$user."<a href='exit.php'>?Выход?</a></div>
<table>
<td><div style='divb1'><object height='700' width='700' data='chat.php'></div>
</td
</table>";}?></body></html>
chat.php
<style>
#messages
{
width:500px;
height:500px;
overflow:auto;
border:1px solid silver;
}
</style>
<!--Подключаем Jquery!-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//Функция отправки сообщения
function send()
{
//Считываем сообщение из поля ввода с id mess_to_add
var mess=$("#mess_to_send").val();
// Отсылаем паметры
$.ajax({
type: "POST",
url: "add_mess.php",
data:"mess="+mess,
// Выводим то что вернул PHP
success: function(html)
{
//Если все успешно, загружаем сообщения
load_messes();
//Очищаем форму ввода сообщения
$("#mess_to_send").val('');
}
});
}
//Функция загрузки сообщений
function load_messes()
{
$.ajax({
type: "POST",
url: "load_messes.php",
data: "req=ok",
// Выводим то что вернул PHP
success: function(html)
{
//Очищаем форму ввода
$("#messages").empty();
//Выводим что вернул нам php
$("#messages").append(html);
//Прокручиваем блок вниз(если сообщений много)
$("#messages").scrollTop(90000);
}
});
}
</script>
<table>
<tr>
<td>
<div id="messages" style="text-align: left">
</div>
</td>
</tr>
<tr>
<td>
<form action="javascript:send();">
<div>
<input type="text" id="mess_to_send" style="width:450;">
<input type="button" value="Send">
</div>
</form>
</td>
</tr>
</table>
<script>
//При загрузке страницы подгружаем сообщения
load_messes();
//Ставим цикл на каждые три секунды
setInterval(load_messes,3000);
</script>
<head>
<link type="text/css" rel="stylesheet" href="divb.css" media="all"/>
</head>
login.php
Lt;?php
//Если пришли данные на обработку
if (isset($_POST['login']) && isset($_POST['password']))
{
include ("bd.php");
//Записываем все в переменные
$login=htmlspecialchars(trim($_POST['login']));
$password=htmlspecialchars(trim($_POST['password']));
//Достаем из таблицы инфу о пользователе по логину
$res=mysql_query("SELECT * FROM `users` WHERE `login`='$login' ");
$data=mysql_fetch_array($res);
//Если такого нет, то пишем что нет
if (empty($data['login']))
{
die ("Такого пользователя не существует!");
}
//Если пароли не совпадают
if ($password!=$data['password'])
{
die ("Введенный пароль неверен!");
}
//Запускаем пользователю сессию
session_start();
$_SESSION['login']=$data['login'];
//Переадресовываем на главную
header("location: index.php");
}
?>
register.php
<?php
//Проверяем пришли ли данные
if(isset($_POST['login']) && isset($_POST['password']))
{
//Записываем все в переменные
$login=htmlspecialchars(trim($_POST['login']));
$password=htmlspecialchars(trim($_POST['password']));
//Проверяем на пустоту
if($login=="" || $password=="")
{
die("Заполните все поля!");
}
include("bd.php");
//Достаем из БД информацию о введенном логине
$res=mysql_query("SELECT `login` FROM `users` WHERE `login`=' $login ' ");
$data=mysql_fetch_array($res);
//Если он не пуст, то значит такой уже есть
if(!empty($data['login']))
{
die("Такой логин уже существует!");
}
//Проверяем длину пароля
if(strlen($password)<7)
{
die("Длина пароля не может быть меньше 7 символов!");
}
//Вставляем данные в БД
$query="INSERT INTO `users` (`login`,`password`) VALUES(' $login ',' $password ') ";
$result=mysql_query($query);
//Если данные успешно занесены в таблицу
if($result==true)
{
echo "Вы успешно зарегистрированы! <br><a href='index.php'>На главную</a>";
}
//Если не так, то выводим ошибку
else
{
echo "Error! ----> ". mysql_error();
}
}
?>
Divb.css
div {
padding: 7px;
margin: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 0px 7px 8px #02041c;
-webkit-box-shadow: 0px 7px 8px #02041c;
box-shadow: 0px 7px 8px #02041c;
text-align: right;
font-family: Comic Sans MS, cursive
background: #00AC00;
}
.divb2
{
border: 4px ridge;
text-align: right;
}
.divb1
{
border: 4px ridge #ff0;
background: #ddd ;}
.divb
{
background: #ddd ;}
.divonline
{
border: 4px ridge;
background: #fdf ;}
.divcreate
{
border: 4px ridge;
background: #dfd;
}