Суббота, 20 Апреля 2024, 01:25

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 11
  • 1
  • 2
  • 3
  • …
  • 10
  • 11
  • »
Форум игроделов » Движки для разработки игр и сложные системы разработки » Движки для браузерных игр » Урок по созданию браузерной игры № 2 (Формы входа и I этап регистрации (php, html, MySQL, css))
Урок по созданию браузерной игры № 2
AssasinДата: Воскресенье, 11 Октября 2009, 14:44 | Сообщение # 1
web-coder
Сообщений: 1178
Сейчас нет на сайте
Урок № 2 Создание формы входа и I этап регистрации


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

<!-- Любая грамотно свёрстанная страница должна в самом начале содержать так называемый 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 этапа регистрации. Приступаем к еаписанию кода.
Code

/* Задаем значения для той области документа, которая находиться между тегами <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['user'] = $_POST['email']; //записуем email в глобыльную переменную $_SESSION
$_SESSION['ip'] = $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 — описывают состояние ссылки при наведении на нее мишки, при нажатии, при покидании области ссылки и в неактивном состоянии.

Вот и второй урок подошел к концу, если возникли вопросу, прошу задавайте, буду рад ответить.

При копировании материала ссылка на источник обязательна!
VinchensooДата: Воскресенье, 11 Октября 2009, 16:46 | Сообщение # 2
Злобный социопат с комплексом Бога
Сообщений: 8943
Сейчас нет на сайте
По мне- уроки норм.
Человек, одаренный мозгом,читая комменты и задавая вопросы сможет легко разобраться, молодец)
MrDmitriy65Дата: Вторник, 13 Октября 2009, 17:30 | Сообщение # 3
был не раз
Сообщений: 5
Сейчас нет на сайте
При создании первой страницы в строке
<input type=button class='btn' value=' Регистрация ' onclick='window.location="reg.php"'>
Надо вводить
<input type=button class='btn' value='Регистрация' onclick=document.location="reg.php">
, а то заходить на регистрацию не будет.

Сообщение отредактировал MrDmitriy65 - Вторник, 13 Октября 2009, 17:30
AssasinДата: Вторник, 13 Октября 2009, 18:00 | Сообщение # 4
web-coder
Сообщений: 1178
Сейчас нет на сайте
MrDmitriy65, Можно и так, но вы не правы что не будет переходить на регистрацию. И так и так все будет работать, но за подсказку спасибо happy
ИнфроДата: Суббота, 07 Ноября 2009, 22:59 | Сообщение # 5
частый гость
Сообщений: 61
Сейчас нет на сайте
При первой установке все было нормально, а потом почему-то стало перенаправлять с первой старницы регистрации сразу на вторую sad Не зависимо от того, введено что-нибудь или нет.
AssasinДата: Воскресенье, 08 Ноября 2009, 13:39 | Сообщение # 6
web-coder
Сообщений: 1178
Сейчас нет на сайте
Поправил код, теперь все должно работать.
Master_ChiefДата: Воскресенье, 08 Ноября 2009, 13:53 | Сообщение # 7
Shoot Space creator
Сообщений: 987
Сейчас нет на сайте
и опять ты подключаешь соединение с базой в каждом скрипте! smile так трудно что-ли вывести его в тот же conf.php ?:)
Master_ChiefДата: Воскресенье, 08 Ноября 2009, 14:00 | Сообщение # 8
Shoot Space creator
Сообщений: 987
Сейчас нет на сайте
Да, и ещё один комментарий: безопаснее писать не if(!$_POST и т.д. а if(empty($_POST
AssasinДата: Воскресенье, 08 Ноября 2009, 14:01 | Сообщение # 9
web-coder
Сообщений: 1178
Сейчас нет на сайте
Нет, не трудно, я уже и не помню для чего я так сделал happy Но причина явно имела место быть smile
Master_ChiefДата: Воскресенье, 08 Ноября 2009, 14:02 | Сообщение # 10
Shoot Space creator
Сообщений: 987
Сейчас нет на сайте
biggrin без этого никак smile
MaiklIlДата: Понедельник, 16 Ноября 2009, 10:52 | Сообщение # 11
был не раз
Сообщений: 3
Сейчас нет на сайте
В коде страницы регистрации, строка примерно 20-я:
Quote (Assasin)
$c_e = mysql_num_rows(mysql_query("SELECT id FROM players where email='".$_POST ["email"]."'"));

здесь, наверное, вместо "players" надо писать "users"?

AssasinДата: Понедельник, 16 Ноября 2009, 12:43 | Сообщение # 12
web-coder
Сообщений: 1178
Сейчас нет на сайте
Да, вы правы, у себя я изменил, а здесь забыл. Сейчас подправлю.
MaiklIlДата: Понедельник, 16 Ноября 2009, 13:14 | Сообщение # 13
был не раз
Сообщений: 3
Сейчас нет на сайте
заодно в этой же строчке можно и вместо "id" - "id_user" поставить

Сообщение отредактировал MaiklIl - Понедельник, 16 Ноября 2009, 13:14
TorbinДата: Четверг, 19 Ноября 2009, 02:03 | Сообщение # 14
был не раз
Сообщений: 8
Сейчас нет на сайте
После второго шага, а именно обозначение страницы цветом и созданием файла .css, сохраняю файл в папке htdocs после этого запускаю http://localhost/index.php, но цвета никакого нет..
Что я делаю не так? возможно код стиля написан не весь? или файлы index.php и style.css нужно как то связать между собой? объясните подробнее, если можно, я понимаю, что автор мог опустить какие то обыденные моменты, но учитывая мою не компетентность в этих вопросах - я их не знаю =\
П.с. первый шаг сделал верно, результат есть, проблема именно во втором smile
AssasinДата: Четверг, 19 Ноября 2009, 12:40 | Сообщение # 15
web-coder
Сообщений: 1178
Сейчас нет на сайте
style.css связываеться с index.php этим тегом
Code
<link rel="stylesheet" href="style.css" type="text/css" />

Напишите в какую папку вы сохранили оба файла и покажите код, возможно где то допустили ошибку.
TorbinДата: Четверг, 19 Ноября 2009, 12:44 | Сообщение # 16
был не раз
Сообщений: 8
Сейчас нет на сайте
Оба файла в папке htdocs
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/Tr/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="<Браузерная Флеш игра Giperborea">
<meta name="keywords" content="новая игра, флеш, браузер, Giperborea, игроки." />
<link rel="stylessheet" href="style.css" type="text/css" />
<title>Giperborea - браузерная онлайн 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>

и

Code

body {background-color:#000000; margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;}
#entry {color:#ffffff;text-align:center;}
.btn {font-size:7.5pt:color:#dfddd3;font-family:Veranda,Arial,Helvetica,sans-serif;background-color:#2b2b18;border:1px double #817A63;}
.inup {text-aling: center;font-size:8pt; color:#dfddd3;font-family:Veranda,Arial,Helvetica,sans-serif; background-color:#151616; border: 1px double#817a63;}
AssasinДата: Четверг, 19 Ноября 2009, 12:53 | Сообщение # 17
web-coder
Сообщений: 1178
Сейчас нет на сайте
Code
.btn {font-size:7.5pt[b]:[/b] color:#dfddd3;font-family:Veranda,Arial,Helvetica,sans-serif;background-color:#2b2b18;border:1px double #817A63;}  
.inup {text-[b]aling[/b]: center;font-size:8pt; color:#dfddd3;font-family:Veranda,Arial,Helvetica,sans-serif; background-color:#151616; border: 1px double#817a63;}

То что я выделил имеет ошибки. Первое - вместо двоеточия должна быть точка с запятой, второе - правильно писать align
TorbinДата: Четверг, 19 Ноября 2009, 12:57 | Сообщение # 18
был не раз
Сообщений: 8
Сейчас нет на сайте
Assasin, Спасибо большое, я просто вручную вбивал, чтобы лучше понять и разобраться, ошибся smile

Хм... все равно цвет не отображается .. =\

Сообщение отредактировал Torbin - Четверг, 19 Ноября 2009, 13:01
AssasinДата: Четверг, 19 Ноября 2009, 13:12 | Сообщение # 19
web-coder
Сообщений: 1178
Сейчас нет на сайте
В каком браузере смотрите? Пришлите скрин.
TorbinДата: Четверг, 19 Ноября 2009, 13:14 | Сообщение # 20
был не раз
Сообщений: 8
Сейчас нет на сайте
Все, извиняюсь, где то в первом коде ошибка, я сам виноват. Потрите лишнее из темы)
Форум игроделов » Движки для разработки игр и сложные системы разработки » Движки для браузерных игр » Урок по созданию браузерной игры № 2 (Формы входа и I этап регистрации (php, html, MySQL, css))
  • Страница 1 из 11
  • 1
  • 2
  • 3
  • …
  • 10
  • 11
  • »
Поиск:

Все права сохранены. GcUp.ru © 2008-2024 Рейтинг