SHOORIK | Дата: Четверг, 24.05.2012, 13:28 | Сообщение # 1 |
Человечище
Группа: Администраторы
Сообщений: 23
Награды: 5
Репутация: 41
Статус: Offline
| Урок 3 II этап регистрации (php, FD, MySQL) ЧАСТЬ 1
Приступаем к нашему третьему уроку. В этом уроке мы сделаем II часть регистрации, а именно — создание персонажа. Я сильно не заморачивался и сделал по простому, вот такой результат у нас получиться (картинка).--->url картинки (http://s58.radikal.ru/i160/0910/7b/69814c3bb2b4.png) И еще одно, так как флешки, которые мы будем создавать, читают только utf-8 кодировку, то нам нужно немного изменить нашу БД.
Code (КОД) DROP DATABASE testgame; /* Если данная БД уже создана, то удаляем ее */ CREATE DATABASE testgame DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; /* Создаем БД со стандартной кодировкой utf-8(для того что б поддерживался русский язык)*/ USE testgame; /* используем данную БД */
/* таблица персонажа */ CREATE TABLE `users` ( id_user bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */ email CHAR(64), /* текстовый тип (64 символа) */ pass CHAR(32), /* текстовый тип (32 символа) */ name CHAR(32), /* текстовый тип (32 символа) */ life INT DEFAULT 50, /* числовой тип, по умолчанию равен 50 */ atk INT DEFAULT 7, /* числовой тип, по умолчанию равен 7 */ def INT DEFAULT 5, /* числовой тип, по умолчанию равен 5 */ lov INT DEFAULT 7, /* числовой тип, по умолчанию равен 7 */ lvl INT DEFAULT 1, /* числовой тип, по умолчанию равен 1 */ exp INT DEFAULT 0, /* числовой тип, по умолчанию равен 0 */ ip CHAR(15), /* текстовый тип (15 символов) */ PRIMARY KEY (`id_user`) /* Показываем что уникальным номером у нас являеться id_user */ ) ENGINE=MyISAM DEFAULT CHARSET=utf8; /* Обозначаем тип таблицы MyISAM. Таблицы типа MyISAM показывают хорошие результаты при выборках SELECT. Для более подробного изучения читайте Самоучитель по MySQL 5 */
/* таблица аватара */ CREATE TABLE `avatar` ( id_ava bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */ gander INT(2), /* Пол игрока, цыфровой тип(2 цыфра) */ vid CHAR(32), /* Вид игрока, цыфровой тип(2 цыфры)*/ path CHAR(32), /* Путь к папке с рисунками персонажа, текстовый тип(32 символа) */ PRIMARY KEY (`id_ava`) /* Показываем что уникальным номером у нас являеться id_ava */ ) TYPE=MyISAM;
/* таблица чата */ CREATE TABLE `chat` ( id_msg bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */ msg CHAR(255), /* текстовый тип(255 символов) */ time_msg CHAR(5), /* текстовый тип(5 символов) */ wrt_user CHAR(32), /* текстовый тип(32 символов) */ who CHAR(32), /* текстовый тип(32 символов) */ PRIMARY KEY (`id_msg`) /* Показываем что уникальным номером у нас являеться id_msg */ ) TYPE=MyISAM;
/* таблица инвентаря */ CREATE TABLE `inventar` ( id_inv bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */ name_object CHAR(64), atk_up INT(2), def_up INT(2), lov_up INT(2), life_up INT(4), PRIMARY KEY (`id_inv`) /* Показываем что уникальным номером у нас являеться id_msg */ ) TYPE=MyISAM;
/* таблица квеста */ CREATE TABLE `quest` ( id_quest bigint(20) unsigned NOT NULL auto_increment, cont_quest CHAR(32), kill_quest INT DEFAULT 0, PRIMARY KEY (`id_quest`) ) TYPE=MyISAM;
/* таблица боя */ CREATE TABLE `battle` ( id_btl bigint(20) unsigned NOT NULL auto_increment, end_btl CHAR(32), PRIMARY KEY (`id_btl`) ) TYPE=MyISAM;
/* Таблица врагов */ CREATE TABLE `enemy` ( id_enm bigint(20) unsigned NOT NULL auto_increment, name_enm CHAR(32), atk_enm INT, life_enm INT, def_enm INT, lov_enm INT, exp_enm IN T, path_enm CHAR(32), PRIMARY KEY (`id_enm`) ) TYPE=MyISAM;
/* Добавляем в таблицу данные о враге */ INSERT INTO enemy (name_enm, atk_enm,life_enm,def_enm,lov_enm,exp_enm,path_enm) VALUES('Призраки','7','40','6','4','10','path/enemy/');
А также во всех php файлах заменить эту строку:
Code <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
на эту:
Code <meta http-equiv="content-type" content="text/html; charset=utf-8" />
С помощью этой замены мы поменяем кодировку страниц на utf-8. Также в PSPad'e на строке меню нажмите Формат->UTF-8 и эту операцию проделайте с каждым файлом php. Теперь приступим к созданию нашей регистрации. Мы будем её делать во FlashDevelop. Запускаем его и видим начальное окно, в котором нам предлагают создать AS3, AS2, HAXE проекты. Мы будем работать с AS3, а именно с Flex'ом. Почему с ним? Потому что я начал изучение данной среды разработки и мне она понравилась . Выбираем Flex 3 Project, в поле Name вводим имя своего проекта, я назвал CreateChar. В поле Location выбираем где будет находиться наш проект, у меня это C:\Documents and Settings\Администратор\Мои документы. Поле Package не трогаем, ставим галочку внизу, для того что б создать папку для нашего проекта и жмем OK. Справа, в окошке Project наши файлы с которыми мы будем работать---> url картинки(http://i059.radikal.ru/0910/23/25d9220ae9a5.jpg) Наш главный файл обозначен зеленой стрелочкой вниз. Называеться он Main.mxml, нажмите на него 2 раза ЛКМ. Теперь вы можете писать свой код для этого файла. Как вы видите в нашем фале уже есть строчки кода. Первая определяет кодировку, ее не трогайте. Вторая указывает что это приложение, а не модуль и последняя закрывает тег приложения. Как видите здесь также как и в html существуют теги, и все они начинаються с отрытия скобки < и букв mx. Перейдите во вкладку Design View (картинка) url картинки --->(http://s57.radikal.ru/i156/0910/53/6521ca609bf8.jpg) и можете создавать свое приложение перетаскивая компоненты в рабочую область. В папке Controls (картинка)url картинки---->(http://s48.radikal.ru/i119/0910/74/91299a13a222.jpg) Выберите и разместите в рабочую область такие компоненты: - Button – 3 шт. - Image – 1 шт. - Label – 1 шт. - RadioButton – 2 шт. - TextInput – 1 шт.
После того как вы разместили, переходите обратно во вкладку Source View. Видим у нас изменился код, все те компоненты, которые мы добавили отобразились и здесь. Нам остаеться только их правильно разместить и дать имена. Поэтому изменяем координаты компонентов как нам удобно, я изменил так:
Code
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Button label="Далее" click="onCreateChar()" x="140" y="252" width="100" height="22"/> <mx:TextInput id="nameChar" textAlign="center" x="111" y="222" width="160" height="22"/> <mx:Image id="avatar" source="img/men1-1.png" x="171" y="93" width="33" height="33"/> <mx:RadioButton id="men" label="Мужской" groupName="gander" selected="true" click="iMen()" x="19" y="41" width="73" height="22"/> <mx:RadioButton id="women" label="Женский" groupName="gander" click="iWomen()" x="19" y="67" width="74" height="22"/> <mx:Label text="Имя" x="176" y="198" width="36" height="18"/> <mx:Button label="Пред." click="onLeft()" x="78" y="141" width="100" height="22"/> <mx:Button label="След." click="onRight()" x="200" y="141" width="100" height="22"/> </mx:Application>
label – что будет отображаться на кнопке или возле RadioButton
label – что будет отображаться на кнопке или возле RadioButton click – функция которая происходит после нажатия на кнопку или RadioButton id – имя тега textAlign — размещение текста(слева, по-центру, справа) source — путь к картинке
С этим справились, теперь нам нужно указать какой по размерам будет наша флешка, для этого заменяем тег:
Code <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
на
Code <mx:Application layout="absolute" width="400" height="300" xmlns:mx="http://www.adobe.com/2006/mxml">
Мы задали имя слоя - absolute и указали высоту и ширину нашей будущей флешки. Теперь приступаем к написанию логической части. Вся логика будет заключаться в теге , поэтому после тега:
Code <mx:Application layout="absolute" width="400" height="300" xmlns:mx="http://www.adobe.com/2006/mxml">
пишем:
Code <mx:Script><![CDATA[ import mx.rpc.events.ResultEvent; //при написании кода вручную, эти импорты появляються сами, первый нужен для import mx.controls.Alert; //определения результата, второй для вывода всплывающих окон import flash.net.navigateToURL; //а третий для перехода между страницами
private var pic_arr_m:Array = ["img/men1-1.png", "img/men1-2.png", "img/men1-3.png", "img/men1-4.png"]; //создаем масив, который хранит путь к картинкам мужского пола private var pic_arr_w:Array = ["img/women2-1.png", "img/women2-2.png", "img/women2-3.png", "img/women2-4.png"]; //создаем масив, который хранит путь к картинкам женского пола private var i:int = 0; //числовая переменная равна 0 [Bindable] //сам еще не знаю для чего нужна это строка, но без нее выдает ошибку private var gr:String = "1"; //текстовая переменная равна 1 [Bindable] private var patch:String; //текстовая переменная /* Функция создания чара, отправляет данные которые ввел пользователь */ private function onCreateChar():void { createRequest.send(); } /* Функция выбора RadioButton мужского пола */ private function iMen():void { avatar.load(pic_arr_m[0]); //отображает картинку, которая равна 0 в масиве, тоесть первую картинку gr = "1"; //переменная равна 1 simpleLabel.text = "1-1"; //тег <mx:Text> который имеет имя simpleLabel равен "1-1" } /* Функция выбора RadioButton женского пола */ private function iWomen():void { avatar.load(pic_arr_w[0]); //отображает картинку, которая равна 0 в масиве, тоесть первую картинку gr = "2"; //переменная равна 1 simpleLabel.text = "2-1"; //тег <mx:Text> который имеет имя simpleLabel равен "2-1" } /* Функция нажатия кнопки "Пред." */ private function onLeft():void { if (men.selected == true){ //если выбран пол "Мужской", то avatar.load(pic_arr_m[i]); //картинка равняеться переменной "i" i--; //переменная уменьшаеться на 1 if (i == -1) { //если переменная "i" равна -1, то i = 3; //"i" равна 3 } if (i == 0) { //если "i" равна 0, то simpleLabel.text = "1-1"; //тег <mx:Text> который имеет имя simpleLabel равен "1-1" avatar.load(pic_arr_m[0]); //будет отображать первый аватар patch = "img/man1-1.swf"; //путь к аватару } if (i == 1) { simpleLabel.text = "1-2"; avatar.load(pic_arr_m[1]); patch = "img/man1-2.swf"; } if (i == 2) { simpleLabel.text = "1-3"; avatar.load(pic_arr_m[2]); patch = "img/man1-3.swf"; } if (i == 3) { simpleLabel.text = "1-4"; avatar.load(pic_arr_m[3]); patch = "img/man1-4.swf"; } } if (women.selected == true) { //если выбран пол "Женский", то avatar.load(pic_arr_w[i]); //картинка равняеться переменной "i" i--; //переменная уменьшаеться на 1 if (i == -1) { //если переменная "i" равна -1, то i = 3; //"i" равна 3 } if (i == 0) { simpleLabel.text = "2-1"; avatar.load(pic_arr_w[0]); patch = "img/woman2-1.swf"; } if (i == 1) { simpleLabel.text = "2-2"; avatar.load(pic_arr_w[1]); patch = "img/woman2-2.swf"; } if (i == 2) { simpleLabel.text = "2-3"; avatar.load(pic_arr_w[2]); patch = "img/woman2-3.swf"; } if (i == 3) { simpleLabel.text = "2-4"; avatar.load(pic_arr_w[3]); patch = "img/woman2-4.swf"; } } } /* Функция нажатия кнопки "След." */ private function onRight():void { if (men.selected == true){ //если выбран пол "Мужской", то avatar.load(pic_arr_m[i]); //картинка равняеться переменной "i" i++; //переменная увеличиваеться на 1 if (i == 4) { //если переменная "i" равна 4, то i = 0; //"i" равна 0 } if (i == 0) { simpleLabel.text = "1-1"; avatar.load(pic_arr_m[0]); patch = "img/man1-1.swf"; } if (i == 1) { simpleLabel.text = "1-2"; avatar.load(pic_arr_m[1]); patch = "img/man1-2.swf"; } if (i == 2) { simpleLabel.text = "1-3"; avatar.load(pic_arr_m[2]); patch = "img/man1-3.swf"; } if (i == 3) { simpleLabel.text = "1-4"; avatar.load(pic_arr_m[3]); patch = "img/man1-4.swf"; } } if (women.selected == true) { //если выбран пол "Женский", то avatar.load(pic_arr_w[i]); //картинка равняеться переменной "i" i++; //переменная увеличиваеться на 1 if (i == 4) { //если переменная "i" равна 4, то i = 0; //"i" равна 0 } if (i == 0) { simpleLabel.text = "2-1"; avatar.load(pic_arr_w[0]); patch = "img/woman2-1.swf"; } if (i == 1) { simpleLabel.text = "2-2"; avatar.load(pic_arr_w[1]); patch = "img/woman2-2.swf"; } if (i == 2) { simpleLabel.text = "2-3"; avatar.load(pic_arr_w[2]); patch = "img/woman2-3.swf"; } if (i == 3) { simpleLabel.text = "2-4"; avatar.load(pic_arr_w[3]); patch = "img/woman2-4.swf"; } } }
/* Функция определения результата */ private function onResult(e:ResultEvent):void { if (int(e.result) > 0) { //если результат больше 0, тоесть существует, то //var link:URLRequest = new URLRequest("http://localhost/game.php"); //создаем ссылку //navigateToURL(link, "_self"); //переадресовываем по ссылке } else { //в другом случае, если результат не существует, то switch (int(String(e.result))) { //считываем данные case -1 : //если данные равны "-1", то выводим всплывающее окно Alert.show("Неудалось подключиться к базе данных. Попробуйте позже", "Ошибка!"); break; case -2 : //если данные равны "-2", то выводим всплывающее окно Alert.show("Такое имя уже существует", "Ошибка!"); break; case -3 : //если данные равны "-3", то выводим всплывающее окно Alert.show("Вы не ввели имя", "Ошибка!"); break; case -4: //если данные равны "-4", то выводим всплывающее окно Alert.show("Недопустимые символы в имени", "Ошибка!"); break; } } } ]]></mx:Script> Я здесь все прокоментировал, думаю вопросов не возникнет, а если возникнут, то прошу — задавайте =) Теперь нам нужно создать обработчик, который определяет какие данные нужно отослать в php скрипт. Такой обработчик называеться HTTPService. У нас он будет выглядеть так:
Code <mx:HTTPService id="createRequest" useProxy="false" method="POST" result="onResult(event)" url="reg_comp.php"> <mx:request> <mx:nameChar>{nameChar.text}</mx:nameChar> <mx:avaIm>{simpleLabel.text}</mx:avaIm> <mx:gr>{gr.toString()}</mx:gr> <mx:patch>{patch.toString()}</mx:patch> </mx:request> </mx:HTTPService>
Продолжение: Он отсылает текст, который мы введем в поле "Имени чара" в php скрипт reg_comp.php, который обрабатывает полученные данные и записывает имя чара, если такое уже существует, то выводит соответствующую ошибку. Также отправляет какой аватар выбран. Полный код нашего Main.mxml: Code <mx:Application layout="absolute" width="400" height="300" xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script><![CDATA[ import mx.rpc.events.ResultEvent; //при написании кода вручную, эти импорты появляються сами, первый нужен для import mx.controls.Alert; //определения результата, второй для вывода всплывающих окон private var pic_arr_m:Array = ["img/men1-1.png", "img/men1-2.png", "img/men1-3.png", "img/men1-4.png"]; //создаем масив, который хранит путь к картинкам мужского пола private var pic_arr_w:Array = ["img/women2-1.png", "img/women2-2.png", "img/women2-3.png", "img/women2-4.png"]; //создаем масив, который хранит путь к картинкам женского пола private var i:int = 0; //числовая переменная равна 0 [Bindable] //сам еще не знаю для чего нужна это строка, но без нее выдает ошибку private var gr:String = "1"; //текстовая переменная равна 1 [Bindable] private var patch:String; //текстовая переменная /* Функция создания чара, отправляет данные которые ввел пользователь */ private function onCreateChar():void { createRequest.send(); } /* Функция выбора RadioButton мужского пола */ private function iMen():void { avatar.load(pic_arr_m[0]); //отображает картинку, которая равна 0 в масиве, тоесть первую картинку gr = "1"; //переменная равна 1 simpleLabel.text = "1-1"; //тег <mx:Text> который имеет имя simpleLabel равен "1-1" } /* Функция выбора RadioButton женского пола */ private function iWomen():void { avatar.load(pic_arr_w[0]); //отображает картинку, которая равна 0 в масиве, тоесть первую картинку gr = "2"; //переменная равна 1 simpleLabel.text = "2-1"; //тег <mx:Text> который имеет имя simpleLabel равен "2-1" } /* Функция нажатия кнопки "Пред." */ private function onLeft():void { if (men.selected == true){ //если выбран пол "Мужской", то avatar.load(pic_arr_m[i]); //картинка равняеться переменной "i" i--; //переменная уменьшаеться на 1 if (i == -1) { //если переменная "i" равна -1, то i = 3; //"i" равна 3 } if (i == 0) { //если "i" равна 0, то simpleLabel.text = "1-1"; //тег <mx:Text> который имеет имя simpleLabel равен "1-1" avatar.load(pic_arr_m[0]); //будет отображать первый аватар patch = "img/man1-1.swf"; //путь к аватару } if (i == 1) { simpleLabel.text = "1-2"; avatar.load(pic_arr_m[1]); patch = "img/man1-2.swf"; } if (i == 2) { simpleLabel.text = "1-3"; avatar.load(pic_arr_m[2]); patch = "img/man1-3.swf"; } if (i == 3) { simpleLabel.text = "1-4"; avatar.load(pic_arr_m[3]); patch = "img/man1-4.swf"; } } if (women.selected == true) { //если выбран пол "Женский", то avatar.load(pic_arr_w[i]); //картинка равняеться переменной "i" i--; //переменная уменьшаеться на 1 if (i == -1) { //если переменная "i" равна -1, то i = 3; //"i" равна 3 } if (i == 0) { simpleLabel.text = "2-1"; avatar.load(pic_arr_w[0]); patch = "img/woman2-1.swf"; } if (i == 1) { simpleLabel.text = "2-2"; avatar.load(pic_arr_w[1]); patch = "img/woman2-2.swf"; } if (i == 2) { simpleLabel.text = "2-3"; avatar.load(pic_arr_w[2]); patch = "img/woman2-3.swf"; } if (i == 3) { simpleLabel.text = "2-4"; avatar.load(pic_arr_w[3]); patch = "img/woman2-4.swf"; } } } /* Функция нажатия кнопки "След." */ private function onRight():void { if (men.selected == true){ //если выбран пол "Мужской", то avatar.load(pic_arr_m[i]); //картинка равняеться переменной "i" i++; //переменная увеличиваеться на 1 if (i == 4) { //если переменная "i" равна 4, то i = 0; //"i" равна 0 } if (i == 0) { simpleLabel.text = "1-1"; avatar.load(pic_arr_m[0]); patch = "img/man1-1.swf"; } if (i == 1) { simpleLabel.text = "1-2"; avatar.load(pic_arr_m[1]); patch = "img/man1-2.swf"; } if (i == 2) { simpleLabel.text = "1-3"; avatar.load(pic_arr_m[2]); patch = "img/man1-3.swf"; } if (i == 3) { simpleLabel.text = "1-4"; avatar.load(pic_arr_m[3]); patch = "img/man1-4.swf"; } } if (women.selected == true) { //если выбран пол "Женский", то avatar.load(pic_arr_w[i]); //картинка равняеться переменной "i" i++; //переменная увеличиваеться на 1 if (i == 4) { //если переменная "i" равна 4, то i = 0; //"i" равна 0 } if (i == 0) { simpleLabel.text = "2-1"; avatar.load(pic_arr_w[0]); patch = "img/woman2-1.swf"; } if (i == 1) { simpleLabel.text = "2-2"; avatar.load(pic_arr_w[1]); patch = "img/woman2-2.swf"; } if (i == 2) { simpleLabel.text = "2-3"; avatar.load(pic_arr_w[2]); patch = "img/woman2-3.swf"; } if (i == 3) { simpleLabel.text = "2-4"; avatar.load(pic_arr_w[3]); patch = "img/woman2-4.swf"; } } } /* Функция определения результата */ private function onResult(e:ResultEvent):void { if (int(e.result) > 0) { //если результат больше 0, тоесть существует, то //var link:URLRequest = new URLRequest("http://localhost/game.php"); //создаем ссылку //navigateToURL(link, "_self"); //переадресовываем по ссылке } else { //в другом случае, если результат не существует, то switch (int(String(e.result))) { //считываем данные case -1 : //если данные равны "-1", то выводим всплывающее окно Alert.show("Неудалось подключиться к базе данных. Попробуйте позже", "Ошибка!"); break; case -2 : //если данные равны "-2", то выводим всплывающее окно Alert.show("Такое имя уже существует", "Ошибка!"); break; case -3 : //если данные равны "-3", то выводим всплывающее окно Alert.show("Вы не ввели имя", "Ошибка!"); break; case -4: //если данные равны "-4", то выводим всплывающее окно Alert.show("Недопустимые символы в имени", "Ошибка!"); break; } } } ]]></mx:Script> <mx:HTTPService id="createRequest" useProxy="false" method="POST" result="onResult(event)" url="reg_comp.php"> <mx:request> <mx:nameChar>{nameChar.text}</mx:nameChar> <mx:avaIm>{simpleLabel.text}</mx:avaIm> <mx:gr>{gr.toString()}</mx:gr> <mx:patch>{patch.toString()}</mx:patch> </mx:request> </mx:HTTPService> <mx:Label id="simpleLabel" x="168" y="64" width="36" height="18"/> <mx:Button label="Далее" click="onCreateChar()" x="140" y="252" width="100" height="22"/> <mx:TextInput id="nameChar" textAlign="center" x="111" y="222" width="160" height="22"/> <mx:Image id="avatar" source="img/men1-1.png" x="171" y="93" width="33" height="33"/> <mx:RadioButton id="men" label="Мужской" groupName="gander" selected="true" click="iMen()" x="19" y="41" width="73" height="22"/> <mx:RadioButton id="women" label="Женский" groupName="gander" click="iWomen()" x="19" y="67" width="74" height="22"/> <mx:Label text="Имя" x="176" y="198" width="36" height="18"/> <mx:Button label="Пред." click="onLeft()" x="78" y="141" width="100" height="22"/> <mx:Button label="След." click="onRight()" x="200" y="141" width="100" height="22"/> </mx:Application>
Продолжение --->
найдено в интернете
|
|
| |