ИГРОДЕЛ
Войдите на сайт или зарегистрируйтесь!!!

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

Перейти вниз

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

Сообщение автор Admin в Сб Фев 20, 2010 2:50 am

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

<!-- Любая грамотно свёрстанная страница должна в самом начале содержать так называемый DOCTYPE. Нужен он для всевозможных устройств вывода информации и браузеров в том числе. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Ну, раз тут появилось слово lang и ru, то понятно, что это указание на язык документа. Не путать с кодировкой! Её мы укажем позднее. -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru"
xml:lang="ru">
<!-- B нём содержится всякая служебная информация: название страницы (то, что входит в титл), кодировка, ключевые слова для поисковых роботов, описание страницы и т.п. -->
<head>
<!-- Указываем кодировку windows-1251 -->
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<!-- Именно эта строка первой покажется в результатах поиска яндекса или рамблера, если они ещё нас найдут. BTG – сокращенно от Browser Test Game, я решил назвать так игру-->
<meta name="description" content="Браузерная Флеш игра BTG" />
<!-- ключевые слова для поисковиков. -->
<meta name="keywords" content="игра, флеш, браузер, BTG, игроки." />
<!-- ссылка на наш лист стилей CSS, который мы создадим чуть позже. -->
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- Выводит вверху нашего браузера -->
<title>BTG – браузерная онлайн Flash игра</title>
<!-- Закрываем наш тег. Обязательно нужно закрывать теги! И в правильном порядке, как показано здесь, сначала <head><title></title></head> -->
</head>
<!-- “Тело” нашей странички -->
<body>
<!-- Используем верстку страницы с помощью div'ов, они служать для распределения контента на странице, так как у нас будет одна форма входа, соответственно будет один div, он будет иметь имя(id) login, это нужно для того что б после мы могли изменять разные характеристики в этом блоке, такие как: цвет букв, цвет фона, шрифт и т.д. -->
<div id='entry'>
<!-- Создаем форму с помощью тега form, задаем ей метод post(нужен для передачи данных введенных пользователем в поля) Определяем что после нажатия кнопки Войти, перенаправляем на скрипт login.php который обрабатывает введенные данные -->
<form action='login.php' method='post'>
<!-- Создаем поле ввода с помощью тега input, указываем что будет отображаться текст с помощью тега type.Задаем класс inup, он как и div служит для отображения графической части. Далее задаем небольшой скриптик в котором происходит следующее: Если в поле ничего не введено, то на нем будет отображаться надпись E-mail, если пользователь хочет что то ввести, то надпись пропадает. И последнее задаем имя поля email, нужно для нашего скрипта login.php -->
<input class="inup" type="text" onblur="if (value == '') {value='E-mail'}" onfocus="if (value == 'E-mail') {value =''}" value="E-mail" name="email"><br>
<!-- Все тоже что и выше, только отображаеться надпись Пароль, но она отображаеться в виде кружков или звездочек(смотря в каком браузере просматриваеться), так как тип поля мы указали password, и имя поля у нас - pass -->
<input class="inup" type="password" onblur="if (value == '') {value='Пароль'}" onfocus="if (value == 'Пароль') {value =''}" value="Пароль" name="pass"><br>
<!-- Создаем кнопку (submit) с класом btn, так же понадобиться нам для отображения графически, и задаем что б на кнопке было написано Войти, с помощью тега value -->
<input type="submit" class='btn' value="Войти"><br>
<!-- Также создаем кнопку, но на этот раз у нее тип button и называеться она Регистрация. Так же появилась функция onclick с помощью которой пользователь переходит на другую страничку нашей игры, а точнее на регистрацию(файл reg.php) -->
<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 и размещяем по-центру -->
<table align="center">
<!-- Создаем строку с помощью тега tr и разбиваем ее на 2 ячейки с помощью тега td -->
<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>
<!-- Создаем checkbox с именем rukes -->
<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 — описывают состояние ссылки при наведении на нее мишки, при нажатии, при покидании области ссылки и в неактивном состоянии.
Вот и второй урок подошел к концу

ждите следущие уроки


Последний раз редактировалось: Admin (Ср Ноя 02, 2011 2:20 am), всего редактировалось 1 раз(а)
avatar
Admin
Admin

Сообщения : 92
Очки : 280
Репутация : 36
Дата регистрации : 2010-02-20

Посмотреть профиль http://game-dll.mirbb.net

Вернуться к началу Перейти вниз

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

Сообщение автор FaRt в Вс Сен 26, 2010 7:05 pm

Что такое PSPad

FaRt

Сообщения : 1
Очки : 2
Репутация : 1
Дата регистрации : 2010-09-26

Посмотреть профиль

Вернуться к началу Перейти вниз

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

Сообщение автор Admin в Ср Ноя 02, 2011 1:16 am

FaRt, Это редактор текста, он очень удобен для разработки игра на php. Желательно скачать Smile
avatar
Admin
Admin

Сообщения : 92
Очки : 280
Репутация : 36
Дата регистрации : 2010-02-20

Посмотреть профиль http://game-dll.mirbb.net

Вернуться к началу Перейти вниз

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

Сообщение автор frin в Вс Ноя 20, 2011 9:34 am

Код:
Warning: mysql_connect() [function.mysql-connect]: Access denied for user 'root'@'localhost' (using password: YES) in T:\home\109.207.207.107\www\reg.php on line 7

Warning: mysql_select_db(): supplied argument is not a valid MySQL-Link resource in T:\home\109.207.207.107\www\reg.php on line 8

Access denied for user 'root'@'localhost' (using password: YES)

хз почему так. Все данные в conf.php верные. База с таблицами создана.


разобрался... причина была в конфликте Denwer и Vertrigo базами...

но замечу: как новичек долго и нудно разбирался с ошибкой таблицы users с примари кеем - поле id создавал с типом авто инкремент и назначал как примари

frin

Сообщения : 2
Очки : 3
Репутация : 1
Дата регистрации : 2011-11-20

Посмотреть профиль

Вернуться к началу Перейти вниз

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

Сообщение автор Admin в Вс Ноя 20, 2011 5:09 pm

хм, надо както оптимизировась.
avatar
Admin
Admin

Сообщения : 92
Очки : 280
Репутация : 36
Дата регистрации : 2010-02-20

Посмотреть профиль http://game-dll.mirbb.net

Вернуться к началу Перейти вниз

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

Сообщение автор ян в Вс Янв 22, 2012 6:28 pm

как просмотреть картинки???

ян

Сообщения : 1
Очки : 1
Репутация : 0
Дата регистрации : 2012-01-22

Посмотреть профиль

Вернуться к началу Перейти вниз

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

Сообщение автор Amun в Вс Фев 05, 2012 6:54 am

Столкнулся вот с такой проблемой, делал всё по мануалу но на странице реги появляется полная ерунда.


Код:
<?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;
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'];
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");
session_register("ip");
$_SESSION['user'] = $_POST['email'];
$_SESSION['ip'] = $_POST['ip'];
?>
<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>";
}
?>
Не должны ли быть ещё какие либо теги перед всем этим?

Amun

Сообщения : 1
Очки : 1
Репутация : 0
Дата регистрации : 2012-02-04

Посмотреть профиль

Вернуться к началу Перейти вниз

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

Сообщение автор BloodZevs в Сб Май 19, 2012 6:50 pm

Столкнулся с такой ошибкой, подскажите что делать

Warning: mysql_connect() [function.mysql-connect]: Access denied for user 'root'@'localhost' (using password: YES) in C:\xampp\htdocs\reg.php on line 7

Warning: mysql_select_db() expects parameter 2 to be resource, boolean given in C:\xampp\htdocs\reg.php on line 8

Access denied for user 'root'@'localhost' (using password: YES)

BloodZevs

Сообщения : 2
Очки : 2
Репутация : 0
Дата регистрации : 2012-05-18

Посмотреть профиль

Вернуться к началу Перейти вниз

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

Сообщение автор Baggster в Ср Мар 13, 2013 3:13 pm

Мдя у меня тож небольшая проблема, делал по мануалу(много знакомых букавок нашел), но красиво не отображается и на странице регистрации аишет ошибку.
по полкам
1 index.php и style.css делал на разных бумажках где допустил ошибку не пойму...
2 страницу рег нужно делать на одном бланке (с подключением к бд, и проверками пароля и логина? или это два разных файла?

Baggster

Сообщения : 2
Очки : 2
Репутация : 0
Дата регистрации : 2013-03-12

Посмотреть профиль

Вернуться к началу Перейти вниз

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

Сообщение автор Спонсируемый контент


Спонсируемый контент


Вернуться к началу Перейти вниз

Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения