Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
OTChET_PO_VEB-Dizaynu.doc
Скачиваний:
1
Добавлен:
01.05.2025
Размер:
126.46 Кб
Скачать

Удаление cookie

Удалить cookie просто. Для этого надо вызвать функцию setcookie и передать ей имя того cookie, который подлежит удалению:

setcookie("name");

Другие установленные cookie при этом не удаляются.

Проблемы безопасности, связанные с cookies

Иногда в 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

<?php

$mysql_connect=mysql_connect("localhost","root","");

$db=mysql_select_db("forum");

?>

exit.php

<?php

//Запускаем сессию для работы с куками

session_start();

//Так как пользователь хотел выйти,

//удаляем ему логин и id из кукисов

unset($_SESSION['login']);

//Переадресовываем на главную

header("location: index.php");

?>

add_mess.php

<?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

<?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

<?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;

}

20