ArcEmu: [Tutorial #2]: Fancy Forms - ArcEmu

Jump to content

Toggle shoutbox Lastest Announcements

dfighter  : (07 December 2014 - 12:06 PM) Arcemu is in hibernation mode, please read http://arcemu.org/fo...showtopic=26903
dfighter  : (01 January 2013 - 05:56 PM) Arcemu wishes you all a happy new year!
Hasbro  : (12 September 2012 - 10:01 AM) Please excuse our outage from the web! Our web host had a major malfunction!
dfighter  : (01 September 2012 - 04:05 PM) Since the spam bots just don't want to stop, I've enabled admin verification when registering.
dfighter  : (23 January 2012 - 09:56 PM) Please note that from now on you will need to confirm your email on the wiki in order to edit it!
Hasbro  : (31 December 2011 - 12:50 PM) Happy New Years all!
Navid  : (26 December 2011 - 04:09 AM) Merry Christmas !!!!!! Happy holidays all :)
WAmadeus  : (24 December 2011 - 03:54 PM) Merry Christmas to all!
dfighter  : (24 December 2011 - 11:05 AM) The Arcemu team wishes y'all a Merry Christmukkah!
Hasbro  : (05 October 2011 - 12:53 PM) Looking for web designers for upcoming web related project. If you're interested in designing user interfaces contact me
dfighter  : (02 September 2011 - 03:47 PM) So who here wants vehicles in Arcemu? :P http://arcemu.org/fo...showtopic=25440
Hasbro  : (14 August 2011 - 03:25 PM) Join us on irc, grab an irc client and connect to irc.freenode.net join channel #arcemu /server irc.freenode.net:6667 /join #arcemu
jackpoz  : (03 August 2011 - 05:33 AM) to all Lua Engine (old one) users: please check http://arcemu.org/fo...showtopic=25274
Hasbro  : (20 May 2011 - 05:27 PM) Looking for people experienced with CMake configuration and setup! Contact me asap
Hasbro  : (15 May 2011 - 05:03 PM) ArcEmu is recruiting C++ programmers, contact Hasbro if interested.
paroxysm  : (03 May 2011 - 06:26 PM) Updated luabridge gossip example to describe the whole gossip creation process rather than just how to create menu. Gossip tutorial
paroxysm  : (23 April 2011 - 11:35 AM) Lua writers can refer to the Luabridge Tutorials section in the Wiki to learn how to write gossip code correctly.
Hasbro  : (20 April 2011 - 05:22 PM) Thank you for your continuous contribution of bug reports, we are working on them.
Hasbro  : (17 April 2011 - 03:20 AM) Please consider donating to support our bills. Donations can be sent using PayPal to donations@arcemu.org - Thank you for your support.
paroxysm  : (10 April 2011 - 12:43 AM) Refer to the Luabridge Tutorials section in the Wiki to learn the new syntax of luabridge.
Resize Shouts Area

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

[Tutorial #2]: Fancy Forms Learn to make your own generator!

#1 User is offline   Bob Herman 

  • Interested
  • PipPipPipPip
  • Group: Members
  • Posts: 452
  • Joined: 11-October 08
  • Gender:Male

Posted 15 September 2009 - 07:09 AM

Introduction

Welcome back to a new tutorial by me! This is a follow up of my previous tutorial. If you haven't read it yet, I would go ahead and make sure you read it- just so that you can understand everything that goes on here. Metaphorically, these are the building blocks that we will be building off of. It's important that we start with a very strong and solid base! So go on- read my first tutorial

This new tutorial will focus on forms. Forms are probably THE most important tool for private servers, PHP wise. Well... what is a form?

Forms are those web pages where you submit some data in a text box/drop down thingies/etc. and then the page does something with it. This includes registration pages, to create an account! Or the Admin Control Panel that'll can completely edit your site with a few clicks! (I'm prolly going to make a tut sooner or later on how to make an ACP)

For this first tutorial on fancy form will JUST make a generator. But this'll nicely show you the basics of a form. I will be showing you how to make the form while never once exiting the <?php and ?>, which will be extremely handy one day in your PHP career. Anyways, enough with the talking- let's start scripting! :lol:

For this tutorial you will need to know everything from my previous tutorial, plus some basic HTML. If you're new with HTML you can find great guides at w3schools!

The Form

Let's first do the form. For beginners it might be a good idea to just start out doing the HTML version. (Little tip from me, do your forms in a table. It makes everything nicely arranged. Centering it never looks as good as a clean cut table!)

Here's my HTML form (if you don't know the very basics to a form, drop a visit at w3schools on their HTML section. They'll have everything you need for this tutorial plus more :D )

<center>
<form name=myform method=post action=form.php>
<table>
<tr><td colspan=2 align=center><font size=4></td></tr>
<tr><td colspan=2 align=center><br><input type=submit name=submit value=Generate></td></tr>
</table>
</form>


This form uses the form.php file. The only thing that would show up right now would be the submit button. The next step is to brain storm (for just a sec) what you want your form to have.. Radio buttons? Text fields?

For this form I want it to generate a bug/error/need help form so that my users can post them on the forums... So let's start.

I want the user to be able to have their name in it. So I'm going to add in a text field. Now there's many ways of having a text field in your form, but I prefer to use the <input type="text"> method due simply to the fact that <input> can also do radio buttons and passwords, so it helps to unify my script. However using <textarea> can be useful.

So let's add a name section. We don't want the text field to be to large, 'cuz I doubt anyone has a name longer than 20 letters :P
This will do nicely:
<tr><td width=300><b><br>Your Name</b></td></tr><td><input type=text name=name value=''></td>


Now let's disect that. The tr and td tags are for the table, so just ignore them. What we do want to care about is the <input> tag. This will show up as a text field for our user viewing the page. So what does the name and value do?

The name labels the text field. Later on, when we put in our PHP, we will refer to this specific text field as 'name', as it is labeled up above.

The value says what should be the current value of the input. For a text field the value would be the text that would show up in the box when the user first goes on the page. If I ever make a tutorial on how to make an ACP I will show how to make the ACP put in the values here, according to what the saved variables are.For a radio buttons, this is slightly different- but we will get into that later.

For now let's just concentrate on finishing up the form that we need with all it's text fields. I'm just going to settle with two text fields: Your Name, and Details. I will supplement the rest with radio buttons.

So here's what my script looks like now:

<center>
<form name=myform method=post action=form.php>
<table>
<tr><td colspan=2 align=center><font size=4></td></tr>
<tr><td width=300><b><br>Your Name:</font></b></td></tr><td><input type=text name=name value=''></td>
<tr><td width=300><font size=4><b><br>Details:</font></b></font></td></tr><td><textarea name=detail rows=10 cols=40> </textarea></td>
<tr><td colspan=2 align=center><br><input type=submit name=submit value=Generate></td></tr>
</table>
</form>


Notice that I am not using any ""! Quotation marks close the echo statement in PHP, which I will be using for this tutorial.

So okay- now my user can type in his name and his problem. But how can I make it so that this form can also classify as which type of problem this is (the possible problems being error/bug/need help). It's simple! Use a radio button.

Radio buttons differ slightly from text fields in two main ways. For a set of radio buttons the name MUST be the same! The value on a radio button is the button's information (but not the one displayed). The button's description that is displayed is placed <i>outside</i> of the input field.

So here's what a typical set of radio buttons would look like:

<tr><td width=300><b><br>Help Required for:</b></font></td></tr><td>
<input type=radio name=type checked value=error> Error
<input type=radio name=type value=bug> Bug
<input type=radio name=type value=help> I Need Help!


Notice how the first one (error) has also checked in the middle. This says that this is the default button checked.

Now let's add this in to our handy dandy form...

<center>
<form name=myform method=post action=form.php>
<table>
<tr><td colspan=2 align=center><font size=4></td></tr>
<tr><td width=300><b><br>Your Name:</font></b></td></tr><td><input type=text name=name value=''></td>
<tr><td width=300><b><br>Help Required for:</b></font></td></tr><td>
<input type=radio name=type checked value=error> Error
<input type=radio name=type value=bug> Bug
<input type=radio name=type value=help> I Need Help!</td>
<tr><td width=300><font size=4><b><br>Details:</font></b></font></td></tr><td><textarea name=detail rows=10 cols=40> </textarea></td>
<tr><td colspan=2 align=center><br><input type=submit name=submit value=Generate></td></tr>
</table>
</form>


Okay, so now our form is done! Now let's conver it to PHP. If you remember the previous lesson well you know that we first need to start our PHP block with the <?php and end it with the ?>. You might also remember that you need to use echo to display something on a page, and that for anything other than PHP (this includes text, number, or HTML) it needs to be put in quotation marks. So in short, the new form would look like:

<?php
echo "<center>";
echo "<form name=myform method=post action=form.php>";
echo "<table>";
echo "<tr><td colspan=2 align=center><font size=4></td></tr>";
echo "<tr><td width=300><b><br>Your Name:</font></b></td></tr><td><input type=text name=name value=''></td>";
echo "<tr><td width=300><b><br>Help Required for:</b></font></td></tr><td>";
echo "<input type=radio name=type checked value=error> Error";
echo "<input type=radio name=type value=bug> Bug";
echo "<input type=radio name=type value=help> I Need Help!</td>";
echo "<tr><td width=300><font size=4><b><br>Details:</font></b></font></td></tr><td><textarea name=detail rows=10 cols=40> </textarea></td>";
echo "<tr><td colspan=2 align=center><br><input type=submit name=submit value=Generate></td></tr>";
echo "</table>";
echo "</form>";
?>


Don't forget that for each end of a line for echo, you end it with a ; !!! But otherwise, that's it for the form! Take a little break before you venture out to the next step... scripting the wheels behind the form that makes it tick!

The PHP

For my form, I want mine to be all in one page. I would recommend you guys do that too, since you're following my tutorial. However once you finish this and get it all to work feel free to venture out yonder to see what stunts you can pull off <img src="http://arcemu.org/forums/public/style_emoticons/<#EMO_DIR#>/biggrin.gif" style="vertical-align:middle" emoid=" :D " border="0" alt="biggrin.gif" />

Since I made my form use the file 'form.php' I'm going to double check that I saved the form correctly as form.php! *cough*

The PHP that the form runs on MUST go at the top, and the actual form on the bottom! Let's start writin' this baby.

First we want to check that the form was submitted. I will use this to do that:

if(isset($_POST['submit']))
{ }


This says. Check if the form was submitted, and if it was, then do this.

But pay attention to the: $_POST['X'] . This is what we will be using to run this thing! This says, get from my post the <u>entered in value</u> of the text field/radio button/etc. with the name 'X'.

Now for my radio buttons I like to use an unnecessary if else that covers my ass if I messed up somewhere. I use it so that if there's ever an error the default value is automatically entered in. Most people do not use this precaution... Anyways, this is what it looks like:

if(isset($_POST['submit']))
{ 
if ($_POST['type']=="bug") 
 {
	$type = "Bug";
 }
 elseif ($_POST['type']=="help") 
 {
	$type = "I Need Help!";
 }
 else
 {
	$type = "Error";
 }


This is pretty self explanatory, but I'll explain it anyways. First it says if the type is bug then let the variable 'type' equal to bug. BUT if is help then let the variable 'type' be equal to I Need Help!. However if it's ANYTHING else than that (including an error) let variable 'type' just be Error. Pretty cool, huh?

Usually after that I like to make variables for all the text fields I made. So let's do that (and keep in mind that for the radio buttons that's already taken care of):

$name= $_POST['name'];
$detail= $_POST['detail'];


Remember that since that the variables replace PHP, you don't need quotation marks. However you still need the semicolon!

Let's add everything up that we have so far.

<?php
if(isset($_POST['submit']))
{ 
if ($_POST['type']=="bug") 
 {
	$type = "Bug";
 }
 elseif ($_POST['type']=="help") 
 {
	$type = "I Need Help!";
 }
 else
 {
	$type = "Error";
 }

$name= $_POST['name'];
$detail= $_POST['detail'];

}
echo "<center>";
echo "<form name=myform method=post action=form.php>";
echo "<table>";
echo "<tr><td colspan=2 align=center><font size=4></td></tr>";
echo "<tr><td width=300><b><br>Your Name:</font></b></td></tr><td><input type=text name=name value=''></td>";
echo "<tr><td width=300><b><br>Help Required for:</b></font></td></tr><td>";
echo "<input type=radio name=type checked value=error> Error";
echo "<input type=radio name=type value=bug> Bug";
echo "<input type=radio name=type value=help> I Need Help!</td>";
echo "<tr><td width=300><font size=4><b><br>Details:</font></b></font></td></tr><td><textarea name=detail rows=10 cols=40> </textarea></td>";
echo "<tr><td colspan=2 align=center><br><input type=submit name=submit value=Generate></td></tr>";
echo "</table>";
echo "</form>";
?>


We're nearly done! Now that all the variables are all defined we've passed the easy step. We just need to echo the results. This is what our echo will look like to show our variable:

echo 'Name: '.$name.'';


This says echo the text Name and then the variable 'name'. Simple enough... Let's just do the other ones now and put in the finishing touches.

echo 'Name: '.$name.'<br><br>';
echo 'Type: '.$type.'<br><br>';
echo 'Details: '.$detail.'<br><br>';
echo 'Now take this generated form and post it <a href="myforums.com/helpsection">here</a>';


Now let's plop everything together to see the finished product!


<?php
if(isset($_POST['submit']))
{ 
if(isset($_POST['submit']))
{ 
if ($_POST['type']=="bug") 
 {
	$type = "Bug";
 }
 elseif ($_POST['type']=="help") 
 {
	$type = "I Need Help!";
 }
 else
 {
	$type = "Error";
 }

$name= $_POST['name'];
$detail= $_POST['detail'];

echo 'Name: '.$name.'<br><br>';
echo 'Type: '.$type.'<br><br>';
echo 'Details: '.$detail.'<br><br>';
echo 'Now take this generated form and post it <a href="myforums.com/helpsection">here</a>';

}
echo "<center>";
echo "<form name=myform method=post action=form.php>";
echo "<table>";
echo "<tr><td colspan=2 align=center><font size=4></td></tr>";
echo "<tr><td width=300><b><br>Your Name:</font></b></td></tr><td><input type=text name=name value=''></td>";
echo "<tr><td width=300><b><br>Help Required for:</b></font></td></tr><td>";
echo "<input type=radio name=type checked value=error> Error";
echo "<input type=radio name=type value=bug> Bug";
echo "<input type=radio name=type value=help> I Need Help!</td>";
echo "<tr><td width=300><font size=4><b><br>Details:</font></b></font></td></tr><td><textarea name=detail rows=10 cols=40> </textarea></td>";
echo "<tr><td colspan=2 align=center><br><input type=submit name=submit value=Generate></td></tr>";
echo "</table>";
echo "</form>";
?>


There ya go! A complete generated form!

Hope this helps :P

--
Bob - Concept designer at Serenade of Sorrow. If you want to talk to me, just ask for Maverfax


P.S. Keep watching out. Who knows when I'll post my third tutorial? :)

EDIT: I've tested out the very last script, and everything on it works PERFECTLY FINE! :D
0

#2 User is offline   Alia Erenel 

  • Enthusiast
  • PipPipPip
  • Group: Members
  • Posts: 276
  • Joined: 19-August 08
  • Gender:Male
  • Location:Vancouver

Posted 15 September 2009 - 11:00 AM

Oh man, I'm gonna have to read these tutorials one of these days ! Thanx for sharing the knowledge :P
0

#3 User is offline   Navid 

  • Persian Prance of ArcEmu
  • Group: Super Moderator
  • Posts: 718
  • Joined: 30-June 09
  • IRC:Lurker-
  • Gender:Male
  • Location:Iran
  • Interests:PHP,C++,ArcEmu and exactly our lovely community and specially money xD
  • Server OS:Windows

Posted 15 September 2009 - 11:41 AM

Good released :P
I'm here to check,lurk and kill you so behave or you will be lurked

Posted Image
0

#4 User is offline   Bob Herman 

  • Interested
  • PipPipPipPip
  • Group: Members
  • Posts: 452
  • Joined: 11-October 08
  • Gender:Male

Posted 15 September 2009 - 04:06 PM

These aren't new, I'm just taking my old tutorials (they're in the fixed bug area for some reason :P ) and converting the BBCode so that it works with these new forums- and doing it once a day.

I'm thinking about writing one last one for oop.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users