Зона ИГР - Моды, игры, уроки модинга - GAME-ZONA - Урок 2

В избранное

Страница 1 из 1
1

Урок 2 (Создание формы входа и I этап регистрации)

Урок 2

SHOORIK

Дата: Четверг, 24.05.2012, 13:19 | Сообщение # 1

Человечище

Группа: Администраторы

Сообщений: 23

Награды: 5

Репутация: 41

Статус: Offline

Урок 2 Создание формы входа и I этап регистрации (php, html, MySQL,css)

Итак приступаем ко второму уроку. Здесь я опишу как с помощью html создаються формы, и как с помощью php можно записать данные, введенные в эти формы, в БД.
Сначала создадим форму входа, она будет состоять с двух полей ввода для email игрока и пароля. Также на ней будет 2 кнопки, одна кнопка ведет на скрипт регистрации, другая инициализирует игрока и перемещает его в игру. Для начала перейдите в папку htdocs что находиться в каталоге xampp, у меня это C:\xampp\htdocs\ и удалите все что там есть.
Итак приступим к написанию скрипта, создайте с помощью PSPad новый документ и назовите его index.php, сохраните этот документ в папке htdocs, которая находиться в каталоге xampp. У меня это C:\xampp\htdocs\
После того как сохранили вставьте код приведенный ниже, а лучше перепишите, так вы лучше поймете и запомните.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru"
xml:lang="ru">

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />

<meta name="description" content="Браузерная Флеш игра BTG" />

<meta name="keywords" content="игра, флеш, браузер, BTG, игроки." />

<link rel="stylesheet" href="style.css" type="text/css" />

<title>BTG – браузерная онлайн Flash игра</title>

</head>

<body>

<div id='entry'>

<form action='login.php' method='post'>

<input class="inup" type="text" onblur="if (value == '') {value='E-mail'}" onfocus="if (value == 'E-mail') {value =''}" value="E-mail" name="email"><br>

<input class="inup" type="password" onblur="if (value == '') {value='Пароль'}" onfocus="if (value == 'Пароль') {value =''}" value="Пароль" name="pass"><br>

<input type="submit" class='btn' value="Войти"><br>

<input type=button class='btn' value=' Регистрация ' onclick='window.location="reg.php"'>

</form>
</div>
</body>
</html>
-----------------------------------------------------------------------------
С формой входа справились, сохраняем ее, открываем браузер и переходим по такому адресу http://localhost/index.php и видим примерно следующее (картинка). Так сказать не очень впечатляет такое расположение элементов. Что б все красиво оформить создаем в PSPad документ CSS(Cascading Style Sheet) и называем его style.css. В этом документе мы будем хранить всю графическую информацию главной страницы сайта и I этапа регистрации. Приступаем к еаписанию кода.

/* Задаем значения для той области документа, которая находиться между тегами <body></body>. background-color это фон нашего сайта, я установил на черный, все остальные значения обозначают что у нас отступы от краев браузера будут равны 0, тоесть их совсем не будет */
body {background-color:#000000;margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;}
/* Задаем значения для той области которая находиться в теге <div> с именем entry(id=entry)
Задаем цвет текста белый, и выравнивание по-центру */
#entry {color:#ffffff;text-align:center;}
/* Здесь описываються значения для наших кнопок. Размер шрифта, цвет текста, сам шрифт, цвет фона и цвет рамки вокруг кнопки */
.btn {font-size:7.5pt;color:#dfddd3;font-family:Verdana,Arial,Helvetica,sans-serif;background-color:#2b2b18;border:1px double #817A63;}
/* Здесь описываються значения для наших полей ввода. Размер шрифта, цвет текста, сам шрифт, цвет фона и цвет рамки вокруг поля */
.inup {text-align:center;font-size:8pt;color:#dfddd3;font-family:Verdana,Arial,Helvetica,sans-serif;background-color:#151616;border: 1px double #817a63;}
--------------------------------------------------------------------------
Сохраняем документ и снова переходим по адресу http://localhost/index.php и теперь видим более менее приличную картину (картинка). Вы конечно можете переделать цвет и фон по своему, это будет вам на пользу. Теперь если нажать на кнопку Вход то перейдем по адресу http://localhost/login.php , но нам выдаст ошибку так как такого файла нету, мы его еще не создали. И если нажать на кнопку Регистрация, тоже выдаст ошибку, так как тоже такого файла еще нету.
Файл login.php мы создадим в 3 уроке. Сейчас возьмемся за файл reg.php. Создаем в PSPad'e новый php файл, сохраняем его с именем reg.php в папку где находиться index.php и style.css. Итак, что же у нас будет в файле регистрации? Будет 3 поля, в одном нужно будет ввести email игрока, в другом пароль и в третьем подтверждение пароля. Также у нас будет check-box для согласия с правилами игры. Ну и конечно кнопка Далее. При создании этого файла мы впервые столкнемся с языком php, на котором напишем условие проверки заполнения полей, а также записи данных в БД. Но для начала нам нужно создать файл conf.php, в нем будет храниться информация о нашей БД. Все php скрипты пишуться в таких вот кавычках
Выглядеть это будет так:

Code
<?php
$base_name="localhost"; //имя (стандартно у всех localhost)
$base_user="root"; //юзер (стандартно у всех root)
$base_pass="password"; //пароль (выставить можно зайдя во вкладку Привилегии в phpMyAdmin
$db_name="testgame"; //имя БД
?>
-----------------------------------------------------------------------------
Теперь мы можем приступить к написанию скрипта регистрации:

Code
<?php
session_start(); //стартуем сесию

include "conf.php"; //подключаем файл с параметрами БД

/* Подключаемся к БД, если не получаеться, то выводим ошибку */
$data = mysql_connect($base_name, $base_user, $base_pass);
if(!mysql_select_db($db_name,$data)){
echo "<BR>";
echo mysql_error();
die();
}
//Прверяем на заполнение полей
if ($_POST['next']){ //если нажата кнопка далее, то
$error=0; // переменная равна 0
//Проверка на мыло
if (!$_POST['email']){ $errm = "Вы не ввели e-mail<br>"; $error=1;}
if(!preg_match("/^[_\.0-9a-z-]{1,}@[_\.0-9a-z-]{1,}\.[_\.0-9a-z-]{2,}$/", $_POST ["email"])) {$errm .= "Неправильный e-mail"; $error =1;}
$c_e = mysql_num_rows(mysql_query("SELECT id_user FROM users where email='".$_POST ["email"]."'")); {if ($c_e>0) {$errm .= "Данный e-mail уже зарегистрирован в игре"; $error=1;}}
//Проверка на пароль
if(!$_POST ["pass"]) {$errp = "Необходимо указать Ваш пароль<br>"; $error =1;}
if(!preg_match("/^[А-Яа-яЁёa-zA-Z0-9]+$/",$_POST ["pass"])) {$errp .= "Пароль содержит запрещенный символ<br>"; $error =1;}
if (strlen ($_POST ["pass"])<6 || strlen ($_POST ["pass"])>25){ $errp .="Длина пароля от 6 до 25 символов<br>"; $error =1;}
if ($_POST ["pass"]!= $_POST ["pass2"]){ $errp .="Введёные вами пароли не совпадают!"; $error =1;}
//проверка на согласие с правилами
if (!$_POST['rules']) {$errr = "Вы не согласны с правилами?<br>"; $error=1;}
// Нет ошибок, создаём перса
if(!$error)
{
$ip = $_SERVER['REMOTE_ADDR'];//узнаем ip адрес юзера
/* Записываем данные в БД */
mysql_query ("INSERT INTO users (pass, ip, email) values('".md5($_POST ["pass"])."','".$ip."','".addslashes($_POST ["email"])."')") or die("Invalid query: " . mysql_error());
session_register("email");//регестрируем сессию email
session_register("ip");//регестрируем сессию ip
$_SESSION['user'] = $_POST['email']; //записуем email в глобыльную переменную $_SESSION
$_SESSION['ip'] = $_POST['ip'];//записуем ip в глобыльную переменную $_SESSION
?>
<script>location.href="goreg.php";</script>
<?php
}
}
// Выводим ошибочки
function err($text){
return "<tr valign='middle' align='left'><td colspan='2'><span class='error'>$text</td></tr>";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru"
xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="description" content="Браузерная Флеш игра BTG" />
<meta name="keywords" content="игра, флеш, браузер, BTG, игроки." />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>BTG – браузерная онлайн Flash игра</title>
</head>
<body>
<div id="reg">
<form action="" method="post">

<table align="center">

<tr><td align="left" width="200">E-mail:</td><td><input type="text" value="<?php echo $_POST['email'] ?>" name="email" class="inup"></td></tr>
<?php echo err($errm); ?>
<tr><td align="left" width="200">Пароль:</td><td><input type="password" value="" name="pass" class="inup"></td></tr>
<?php echo err($errp); ?>
<tr><td align="left" width="200">Повторите пароль:</td><td><input type="password" value="" name="pass2" class="inup"></td></tr>

</table>

<span><input type="checkbox" class="inup" name="rules"></span> Я обязуюсь соблюдать <A href="lib/law.php" target=_blank><B>Законы игры Test Game</B></A></p>
<?php echo err($errr); ?>
<input type="submit" name="next" value="Дальше" class="btn">
</form>
</div>
</body>
</html>
-----------------------------------------------------------------------------
Теперь обьясняю. После нажатии кнопки Далее происходит проверка скрипта, если все поля введены, то переадресовываем на следующую страницу в которой будет создавать своего персонажа, но это в 3 уроке.
Если поля или какое то поле пустое, то выводиться ошибка.
Так же у нас появился новый параметр — ip. Мы его не обозначили в нашей БД. Так что заходим в phpMyAdmin, Переходим по нашей БД testgame, жмем на таблицу users и добавляем ip, по скринам думаю разберетесь:
картинка
картинка
картинка
Теперь нам нужно подправить файл style.css, так как в нашем скрипте добавился еще один класс reg. Добавим следующий код:

Code

#reg {color:#ffffff;text-align:center;}
.error {FONT-SIZE:8pt;FONT-FAMILY:verdana;COLOR:red;}
A:link {COLOR:#F9F7EA;TEXT-DECORATION:none;font-weight:normal;}
A:visited {COLOR:#F9F7EA;TEXT-DECORATION:none;font-weight:normal;}
A:active {COLOR:#77684D;TEXT-DECORATION:none;font-weight:normal;}
A:hover {COLOR: #7E7765;TEXT-DECORATION:underline}

A:link, A:visited, A:active, A:hover — описывают состояние ссылки при наведении на нее мишки, при нажатии, при покидании области ссылки и в неактивном состоянии.
Вот и второй урок подошел к концу

найдено в интернете

Урок 2 (Создание формы входа и I этап регистрации)

Страница 1 из 1
1