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

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

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

Евгений

Дата: Воскресенье, 02.12.2012, 20:56 | Сообщение # 1

Лейтенант

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

Сообщений: 41

Статус: Offline

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

Code

<!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 этапа регистрации. Приступаем к еаписанию кода.

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 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 — описывают состояние ссылки при наведении на нее мишки, при нажатии, при покидании области ссылки и в неактивном состоянии.

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

[/code][code]