Розділ 3 розробка структури web-орієнтовній системі захищеного обміну текстовими повідомленнями
3.1 Розробка анному из допомогою html та css
Почнемо з того, що створимо файл під іменем index.php
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<head>
<title>Chat – Customer Module</title>
<link type=”text/css” rel=”stylesheet” href=”style.css” />
</head>
<div id=”wrapper”>
<div id=”menu”>
<p class=”welcome”>Welcome, <b></b></p>
<p class=”logout”><a id=”exit” href=”#”>Exit Chat</a></p>
<div style=”clear:both”></div>
</div>
<div id=”chatbox”></div>
<form name=”message” action=””>
<input name=”usermsg” type=”text” id=”usermsg” size=”63” />
<input name=”submitmsg” type=”submit” id=”submitmsg” value=”Send” />
</form>
</div>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>
<script type=”text/javascript”>
// jQuery Document
$(document).ready(function(){
});
</script>
</body>
</html>
Ми почали наш HTML документ зі звичайного оголошення тегів DOCTYPE, html, head, body. У тегу head ми вказуємо назву, а також прикріплюємо нашу каскадну сторінку стилів (style.css)
У тегу body ми створюємо #wrapper div. У нас 3 блоку: простої меню, екран чата, і поле для введення повідомлення, у кожного відповідний div і id.
#menu div складається з 2 параграфів (<p>). Перший – це вітання, другий – посилання «Вихід»
#chatbox div полягає тільки із записів чата. Ми будемо завантажувати наші записи з окремого файлу використовую так званий jquery's ajax.
#wrapper div – це і є наша форма, яка складається з поля для введення й кнопки «відправити»
Наприкінці ми вставимо скрипты, щоб наша сторінка завантажувалася швидше. Спочатку ми пошлемося на Google jquery CDN, тому що ми використовуємо бібліотеку jquery. Другий скрипт буде завантажувати весь наш код після того, як документ готовий.
CSS Документ
Додамо небагато css коду, щоб чат був гарним. Даний код потрібно додати у файл style.css
/* CSS Document */
body { font:12px arial; color: #222; text-align:center; padding:35px; } form, p, span { margin:0; padding:0; } input { font:12px arial; } a { color:#0000FF; text-decoration:none; } a:hover { text-decoration:underline; } #wrapper, #loginform { margin:0 auto; padding-bottom:25px; background:#EBF4FB; width:504px; border:1px solid #ACD8F0; } #loginform { padding-top:18px; } #loginform p { margin: 5px; } #chatbox { text-align:left; margin:0 auto; margin-bottom:25px; padding:10px; background:#fff; height:270px; width:430px; border:1px solid #ACD8F0; overflow:auto; } #usermsg { width:395px; border:1px solid #ACD8F0; } #submit { width: 60px; } .error { color: #ff0000; } #menu { padding:12.5px 25px 12.5px 25px; } .welcome { float:left; } .logout { float:rightright; } .msgln { margin:0 0 2px 0; }
Робоче поле для чату яке розробили:
Рисунок № 8
Закінчиння побудови користувацького інтерфейсу.
Створюємо форму для входу на PHP
Зараз створимо просту форму, яка б просила ввести ім’я перед використанням чата.
<?
Session_start();
function loginForm(){
echo’
<div id=”loginform”>
<form action=”index.php” method=”post”>
<p>Please enter your name to continue:</p>
<label for=”name”>Name:</label>
<input type=”text” name=”name” id=”name” />
<input type=”submit” name=”enter” id=”enter” value=”Enter”/>
</form>
</div> ‘;
}
if(isset($_POST[‘enter’])){
if($_POST[‘name’] != “”){
$_SESSION[‘name’] = stripslashes(htmlspecialchars($_POST[‘name’]));
}
else{
echo ‘<span class=”error”>Please type in a name</span>’;
}
}
?>
Функція loginform() являє собою просту форму для входу, яка просить увести ім'я. Потім ми використовуємо оператор if-else щоб перевірити, чи ввів користувач ім'я. Якщо користувач увів ім'я, то воно зберігається в змінній $_SESSION['name'] . Тому що ми використовуємо засновану на кукіс сесію (cookie-based session) для зберігання імені, то ми повинні спочатку викликати функцію session_start().
Один з основних пунктів, на який потрібно звернути увагу – це використання функції htmlspecialchars(), яка конвертує спеціальні символи в елементи HTML, щоб змінна імені не стала жертвою межсайтового скриптинга (Cross-site scripting (XSS)).
Для того, щоб форма входу відображалася тільки якщо користувач не ввійшов і не створена сесія, ми використовуємо черговий оператор if-else. Працювати це в нас буде в такий спосіб: якщо користувач не ввів ім’я, то йому пропонується ввести його. Інакше відображається ім’я користувача й з’являється чат.
<?php
if(!isset($_SESSION[‘name’])){
loginForm();
}
else{
?>
<div id=”wrapper”>
<div id=”menu”>
<p class=”welcome”>Welcome, <b><?php echo $_SESSION[‘name’]; ?></b></p>
<p class=”logout”><a id=”exit” href=”#”>Exit Chat</a></p>
<div style=”clear:both”></div>
</div>
<div id=”chatbox”></div>
<form name=”message” action=””>
<input name=”usermsg” type=”text” id=”usermsg” size=”63” />
<input name=”submitmsg” type=”submit” id=”submitmsg” value=”Send” />
</form>
</div>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>
<script type=”text/javascript”>
// jQuery Document
$(document).ready(function(){
});
</script>
<?php
}
?>
Рисунок № 9
Вітання й вихід
Закінчили розробку системи входу в чат. Але нам так само необхідно зробити, щоб користувач міг у будь-який час вийти із чата, закривши сесію. Як Ви пам’ятаєте, ми вже створили посилання для виходу, але давайте повернемося назад, і додамо небагато PHP коду, щоб наше меню було більш функціонально.
Для початку давайте додамо ім’я користувача у вітання. Зробити ми можемо це в такий спосіб:
<p class=”welcome”>Welcome, <b><?php echo $_SESSION[‘name’]; ?></b></p>
Рисунок № 10
Для того, щоб дати можливість користувачеві покинути чат, давайте «стрибнемо вперед», і вставимо jquery.
<script type=”text/javascript”>
// jQuery Document
$(document).ready(function(){
//If user wants to end session
$(“#exit”).click(function(){
var exit = confirm(“Are you sure you want to end the session?”);
if(exit==true){window.location = ‘index.php?logout=true’;}
});
});
</script>
Наведений вище код jquery просто виводить підтверджувальне віконце коли користувач натискає на «Вихід». Якщо користувач підтверджує, що він прагне вийти, то ми відправляємо його за адресою index.php?logout=true. Якщо Ви не знаєте що це значить, то поясню: просто створюється змінна logout значення якої true.
Рисунок № 11
if(isset($_GET[‘logout’])){
//Simple exit message
$fp = fopen(“log.html”, ‘a’);
fwrite($fp, “<div class=’msgln’><i>User “. $_SESSION[‘name’] .” has left the
chat session.</i><br></div>”);
fclose($fp);
session_destroy();
header(“Location: index.php”); //Redirect the user
}
За допомогою функції isset() ми перевіряємо, чи існує змінна ‘logout’ . Якщо змінна передана через url, як ми це робили вище, те сесія закривається. Але перед тем, як знищити сесію, ми виводимо просте повідомлення у вікні чата, що користувач вийшов. Ми робимо це, використовуючи функції fopen(), fwrite(), fclose() для маніпуляції нашим файлом log.html, у якім зберігаються записи чата.
Після знищення сесії, ми перенаправляємо користувача на тугіше саму сторінку, де тепер з’являється форма введення імені.
Обробка введення користувача
Після того, як користувач відправить форму, повинні обробити вміст уведення і додати даний запис у наш файл із записами, щоб вона відобразилася у вікні чата. Для цього ми повинні синхронізувати роботу jquery і PHP на стороні клієнта й сервера.
Jquery
Майже все, що ми збираємося зробити з jquery для обробки даних буде пов’язане із запитом jquery на відправлення.
//якщо користувач відправив форму
$(«#submitmsg»).click(function(){
var clientmsg = $(“#usermsg”).val();
$.post(“post.php”, {text: clientmsg});
$(“#usermsg”).attr(“value”, “”);
return false;
});
Перед тема, як що-небудь робити, ми повинні перехопити введення користувача або те, що було введено в поле #submitmsg. Зробити це ми можемо за допомогою функції val(), яка одержує значення, уведене в поле форми. Тепер це значення ми зберігаємо в змінній clientmsg.
Далі йде найважливіша частина: запит jquery. Він відправляє запит методом POST файлу post.php, який ми створимо трохи пізніше. Т.е. відправляється те, що ввів користувач або те, що зберігається в змінній clientmsg.
Далі ми очищаємо поле введення #usermsg установивши його значення = « «.
PHP – post.php
Ледве вище ми відправили вміст форми введення файлу post.php методом POST. Тепер наша мета – одержати ці дані й додати їх у наш файл із записами.
<?
Session_start();
if(isset($_SESSION[‘name’])){
$text = $_POST[‘text’];
$fp = fopen(“log.html”, ‘a’);
fwrite($fp, “<div class=’msgln’>(“.date(“g:I A”).”) <b>”.$_SESSION[‘name’].”</b>: “.stripslashes(htmlspecialchars($text)).”<br></div>”);
fclose($fp);
}
?>
Ми починаємо наш файл post.php з функції session_start(), тому що ми будемо використовувати сесію, а анно будемо виводити ім'я користувача.
Далі використовуємо булеан функцію isset() для перевірки, існує чи в нас сесія для 'name'
Потім ми одержуємо дані, відправлені через jquery анному файлу. Ми зберігаємо ці дані в змінній $text.
Ці дані, як і всі введений користувачем, будуть зберігатися у файлі log.html. Для цього ми відкриваємо файл за допомогою функції fopen() у режимі 'a', яка згідно php.net «відкриває файл тільки для запису; поміщає покажчик у кінець файлу. Якщо файл не існує, то намагається створити його». Далі ми записуємо повідомлення у файл за допомогою функції fwrite()
Повідомлення, яке ми будемо записувати, укладене в msgln div. Воно містить дату й час, сгенерированные за допомогою функції date(), ім'я користувача, і текст, який також обробляється функцією htmlspecialchars(), щоб захистити його від межсайтового скриптинга(Cross-site scripting (XSS))
Потім ми закриваємо файл за допомогою функції fclose().