Описание пользовательского интерфейса и программных модулей

При разработке пользовательского интерфейса необходимо учитывать следующие требования:

1) интерфейс должен быть максимально удобен и интуитивно прост;

2) пользователь должен иметь «под рукой» все необходимые средства для типовой работы с данными;

3) информация должна в зависимости от выполняемых задач разбита на логические подгруппы в пределах одной формы (так, кнопки «назад» и «вперед» должны размещаться рядом)

4) информации не должно быть слишком много, чтобы в ней было легко ориентироваться;

5) для визуального оформления и эстетически приятного восприятия информации следует вводить графические элементы – фоновые картинки и прочую графику, использовать различные шрифты;

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

Исходя из этих требований, необходимо создавать интерфейс программы. Когда проектирование интерфейса и компоновки элементов закончено, идет собственно верстка, когда при помощи средств JavaScript, CSS и HTML создается законченный интерфейс. После отладки макета верстки в различных браузерах идет собственно написание программного кода продукта, его отладка и выдача окончательного варианта в виде совокупности сверстанных страниц и результатов выполнения серверных скриптов.

При входе в систему пользователь видит перед собой форму, показанную на рисунке 6. Пользователь может ввести данные в поля ввода и войти в систему под своим аккаунтом. Если у него еще нет учетной записи, то он может зарегистрироваться в системе или воспользоваться гостевым входом, просматривая профили пользователей, их закладки и имея возможность поиска. Если пользователь при входе поставит галочку «запомнить», то сценарий запишет на его ПК cookies (cookie-набор), в котором в зашифрованном виде будет сохранен пароль и логин. При следующем входе в систему пользователю не нужно будет их вводить заново. Запоминание пользователя длится две недели.

Рисунок 6 При входе в систему пользователь видит перед собой форму, показанную на рисунке

1. Код аутентификации на сайте выглядит следующим образом:

<?php

session_start();

include ('mysql.php');

if (isset($_GET['logout']))

{

if (isset($_SESSION['user_id']))

{

unset($_SESSION['user_id']);

unset($_SESSION['adm']);

}

setcookie('login', '', 0, "/");

setcookie('password', '', 0, "/");

// и переносим его на главную

header('Location: index.php');

exit;

}

if (isset($_SESSION['user_id']))

{

// юзер уже залогинен, перекидываем его отсюда на закрытую страницу

header('Location: profile.php');

exit;

}

$error = false;

$ert = '';

if (!empty($_POST))

{

$login = (isset($_POST['login']))? mysql_real_escape_string($_POST['login']): '';

$query = "SELECT `salt`

FROM `users`

WHERE `login`='{$login}'

LIMIT 1";

$sql = mysql_query($query) or die(mysql_error());

if (mysql_num_rows($sql) == 1)

{

$row = mysql_fetch_assoc($sql);

// итак, вот она соль, соответствующая этому логину:

$salt = $row['salt'];

// теперь хешируем введенный пароль как надо и повторям шаги, которые были описаны выше:

$password = md5(md5($_POST['password']). $salt);

// и пошло поехало...

// делаем запрос к БД

// и ищем юзера с таким логином и паролем

$query = "SELECT `id`, `status`

FROM `users`

WHERE `login`='{$login}' AND `password`='{$password}'

LIMIT 1";

$sql = mysql_query($query) or die(mysql_error());

// если такой пользователь нашелся

if (mysql_num_rows($sql) == 1)

{

// то мы ставим об этом метку в сессии (допустим мы будем ставить ID пользователя)

$row = mysql_fetch_assoc($sql);

$_SESSION['user_id'] = $row['id'];

if ($row['status'] == 1)

$_SESSION['adm'] = 1;

else if ($row['status'] >= 20)

{

$error = true;

$ert.= 'Вы заблокированы';

unset($_SESSION['user_id']);

unset($_SESSION['adm']);

}

// если пользователь решил "запомнить себя"

// то ставим ему в куку логин с хешем пароля

if (!$error)

{

$time = 86400*7*2; // ставим куку на 2 недели

if (isset($_POST['remember']))

{

setcookie('login', $login, time()+$time, "/");

setcookie('password', $password, time()+$time, "/");

}

// и перекидываем его на закрытую страницу

header('Location: profile.php?id='.$_SESSION['user_id']);

exit;

}

// не забываем, что для работы с сессионными данными, у нас в каждом скрипте должно присутствовать session_start();

}

else

{

$ert.= 'Пользователь не найден';

$error = true;

}

}

else

{

$error = true;

$ert.= 'Пользователь не найден';

}

}

include 'header.php';

?>

<script type="text/javascript" language="JavaScript">

<!--

function roll(obj, n)

{

if (n)

obj.style.backgroundImage = 'url("html-bg-hover.gif")';

else

obj.style.backgroundImage = 'url("html-bg-normal.gif")';

}

//-->

</script>

<?

print '

<form action="login.php" method="post" class="loginform" name="f">

<b style="position:relative;top:15px;left:5px;">Вход в систему</b>

<div style="position:relative;top:30px;left:10px;">

<div style="position:relative;top:10px;">Логин:&nbsp;<input type="text" name="login" style="position:absolute;left:60px;width:130px;" /></div>

<div style="position:relative;top:20px;">Пароль:&nbsp;<input type="password" name="password" style="position:absolute;left:60px;width:130px;"/></div>

<div style="position:relative;top:30px;">Запомнить:&nbsp;<input type="checkbox" name="remember" /></div>

<div style="position:relative;top:40px;left:40px;">

<div style="cursor:pointer;cursor:hand;background:url(\'html-bg-normal.gif\') no-repeat;color:#fff;width:70px;height:24px;text-align:left;line-height:24px;padding-left:15px;" onClick="f.submit()"onMouseOver="roll(this, 1)" onMouseOut="roll(this, 0)">

Вход

</div>

<div style="position:relative;left:100px;top:-20px;"><a href="register.php">регистрация</a></div>

</div>

</div>

</form>';

if ($error)

{

echo '<div style="position:relative; top: 20px;">';

echo nl2br($ert);

echo '</div>';

}

include 'footer.php';

?>