Making a Form - Sorting - Displaying

[zild1221]

Hopefully the title fits this well enough. I am having trouble explaining my idea in words and therefore am having trouble researching what I would like to do.

 

First off, let me say that I only have the most basic understanding of web development knowledge. I can usually look stuff up and hack stuff together and make it work. I am sure none of is done very efficiently, but as long as it works I am happy.

 

This project started off as a simple idea. I have a list of events on my page. When clicking on an event, I want it to open up a page to the right with a signup form and a "table" displaying the sign-ups. Seemed easy enough. Originally I was going to use Google Docs to accomplish this all. An embedded calendar with the events at the left. When clicking on the event it opened up the desired event page in an <iframe> to the right. Inside of that there would have been an embedded Docs form which exports the data to a docs spreadsheet. To the right of the form, the docs Spreadsheet would have been embedded.

 

In my head this works, and on paper it works. However, when trying to embed two Google elements, one would break. Even if I had one on the page, and one embedded on a page that was being displayed via <iframe>. You can see this here, www.leagues.simrigs.com , I stopped mid way through when I realized it wasn't going to work.

 

Anyway, so now I want to lose the whole Google aspect completely. I will have off to the left, nicely styled image "button" links to each event page. I still want the pages to open in an <iframe> off to the right. This is simple enough I want to keep it all within the same page. This part is easy enough for me.

 

The part I am having trouble with now is the form and spreadsheet part. I can manage making the signup form. After that I am lost. I need to have this input data logged somewhere, sorted into a sensible manor, and then displayed on the page next to where they signed up.

 

Hopefully this makes some sort of sense. It works in my mind, I just don't know how to describe it. If need be, I can do a little photoshop mockup on what I am looking for.

 

Thanks in advance.

[nilansanjaya]

so what help you exactly need ? a way to do it ? ideas ? codes? 

[Nodral]

Try looking into using html forms with php and MySQL.

 

If you write the registration details into a DB you can call these back via php whenever you need.

[zild1221]

so what help you exactly need ? a way to do it ? ideas ? codes? 

 

I need help, some form of explanations, ways of doing this. Like I said, I know only the very basics. I do not want someone to just spit some code at me, I would rather learn it and understand. I do not have time at the moment to learn everything there is to know about PHP, I need to get this done as soon as I can. That is why I am asking for specific help.

 

Try looking into using html forms with php and MySQL.

 

If you write the registration details into a DB you can call these back via php whenever you need.

 

It sounds like you understand what I am trying to do. However, I just do not know how to do any of these things. I can make a form, I can set up a MySQL database. I do not know how to make what a user inputs into the form write to a database. I also do not know how to call back that info stored in the database via PHP and display that in a easy to read manor.

 

I hope this is not asking to much. I just don't really know where to begin.

 

Thanks again.

[xyph]

Would you learn with some simple example code?

 

I could easily write up a quick form processing script with comments that shows you the basics.

 

Every tutorial I find has bad advice.

[zild1221]

Sorry for the slow response. Anyway, some example code will do. If you do not mind though, could you give me a small explanation of what each part of it actually does? Nothing crazy is needed, just a few words really. That would be very helpful.

 

Thanks

[xyph]

I'm going to introduce a sort of complex method of posting forms, rather than what most tutorials will show.

 

We are going to have 3 pages for the form - A form page, a processing page, and a success/landing page.

 

The form page will hold the form, and nothing else. Ideally, you will use JavaScript here to verify that the contents of each field is correct, and the required fields have data in them. This will prevent the user from having to actually submit the form to see errors, and no correct fields will be cleared out on them. I won't include this in my sample, but if you attempt it and get lost, feel free to ask.

 

The processing page will actually parse the results. It will re-verify that the required fields exist, and throw the user back to the form if they don't. Since we can't trust JavaScript due to it being client side, we have to make these checks again. If everything passes the verification, we can send the data off to our database and then redirect the user to the success page.

 

The success page will simply tell the user that everything has gone as expected. You may ask, why don't we just combine the process and success page? The reason being is the browser's back button. We'll use HTTP headers to redirect the user, so most modern browsers won't return back to the processing page. This saves us from having to deal with the annoying 'Content has expired, re-post the form?' message that annoys users and admins alike with double posts etc.

 

I'll get to coding this, and then we'll start on the listing page.

[zild1221]

Sounds great! I can't wait to see what you come up with. I am interested to see how this is done. Sorry for the short response, I am still at work. 

[xyph]

Okay, here's a somewhat complete log-in form with processing and landing. It's just a general idea, please change to to fit your needs.

 

If there are change you need help with, let me know

 

form.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Signup Form</title>
<style type="text/css">
	#container {
		margin: 0 auto; width: 300px; background-color: aliceblue;
		padding: 10px 20px; border: 1px solid black;
	}
	#form { font: 12px sans-serif; }
	#form span { 
		font-weight: bold; display: block; float: left;
		width: 85px; text-align: right; margin-top: 5px;
	}
	#form div { width: 275px; margin: 5px; }
	#form input { margin-left: 15px; }
</style>
</head>
<body>
<div id="container">
	<form method="post" action="process.php" id="form">
		<div><label><span>Driver's Name</span><input type="text" name="name"></label></div>
		<div><label><span>Country</span><input type="text" name="country"></label></div>
		<div><span style="height:40px;">Class</span></div>
			<label><input type="radio" name="class" value="elise"> Elise Cup</label><br>
			<label><input type="radio" name="class" value="exige"> Exige Cup</label><br>
			<label><input type="radio" name="class" value="gt3"> Exige GT3</label>
		<div style="text-align:center;"><input type="submit" value="Submit"></div>
</form>
</div>
</body>
</html>

 

process.php

<?php

// Here's where we do the checks. All of the variables sent to this page
// via a method="post" form will show up in the $_POST superglobal array.
// Superglobal array means that it's available in any scope or namespace,
// including within classes and functions.

// This will output what our $_POST array contains, for educactional purposes.
// Keep in mind, this is considered output, and if you want the header() calls
// to work and not throw errors, you'll have to comment this line out

echo '<pre>'; print_r( $_POST ); echo '</pre>';
// The <pre> tags show visible line breaks - it makes the output prettier.

// Some regular expressions to verify our data. This might be an issue for names
// with accents, so you might want to simply make sure it's not empty, and protect
// yourself from injection using MySQLi's escape_string() method.
$regex_letters_spaces = '/^[a-z ]++$/i';
$regex_numbers_decimal = '/^[0-9.]++$/';

// This will hold an array of allowed values from our radio button
$allowed_classes = array( 'elise','exige','gt3' );

// This is a nifty little snippet to get the URI path of the current file
// ie: if this page is http://somedomain.com/folder/file.php, this will return
// somedomain.com/folder. This will help us in our header('Location:') call
$path = $_SERVER['HTTP_HOST'] . rtrim(dirname($_SERVER['SCRIPT_NAME']), '/\\');

// We assume there are no errors at first
$error = FALSE;

// Now for the checks. We want to make sure the name only contains letters and spaces.
// We can do this using RegEx. First though, we have to verify that the key exists
// in the array. We can do this by using the isset() function.
if( !isset($_POST['name']) || !preg_match($regex_letters_spaces, $_POST['name']) )
$error = TRUE;
// Same goes for country
elseif( !isset($_POST['country']) || !preg_match($regex_letters_spaces, $_POST['country']) )
$error = TRUE;
// Then we verify that the class radio button wasn't altered
elseif( !isset($_POST['class']) || !in_array($_POST['class'], $allowed_classes) )
$error = TRUE;
// You may want to do more checks, like if the name already exists, or if the class is full etc.
// If so, I can help you with this

if( $error )
// Comment the line below, and uncomment the header line to make the script actually
// work, this is just for debugging and to show you what's happening
echo 'Error has been found';
// header( 'Location: http://'.$path.'/form.php' );
else {
// Again, comment the line below for production use
echo 'No error found';
// Begin the MySQL stuff by creating an instance of the mysqli class
// Arguments are server, user, pass, database
$db = new mysqli( 'localhost', 'root', '', 'db' );
if( !$db ) die( 'Severe database error' ); // die()'ing is bad, but we should never get this message
// Construct a query. Usually I'd use $db->escape_string() on all the values, but because
// my regular expression were strict enough, I don't have to. 'class' can also only be one of three values
$q = "INSERT INTO `lotus` (`name`, `country`, `class`)
	VALUES ( '{$_POST['name']}', '{$_POST['country']}', '{$_POST['class']}' )";
if( !$db->query($q) ) die( 'Severe query error' ); // Again, we shouldn't use die(), but again this should
// never happen unless you configured something wrong.
//echo $db->error;
// Uncomment this line when you're ready for production
// We pass a query string safe (using urlencode) version of the name to the success page as well
echo '<br>Item added successfully';
// header( 'Location: http://'.$path.'/success.php?name='.urlencode($_POST['name']) );
}

// If you get header errors, you have forgot to comment out an echo line 

?>

 

success.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Signup Form</title>
<style type="text/css">
	#container {
		margin: 0 auto; width: 300px; background-color: aliceblue;
		padding: 10px 20px; border: 1px solid black; font: 12px sans-serif;
	}
</style>
</head>
<body>
<div id="container">
	<h2>Congratulations</h2>
	<?php echo (isset($_GET['name']) ? htmlspecialchars($_GET['name']).' has' : 'You have'); ?>
	been successfully signed up to race 
</div>
</body>
</html>

 

Sorry it took so long, had friends over and was being a good host.

 

This is a lot to take in at once, so please ask questions. I know I wasn't as thorough as I could have been.

 

Here's the database structure I used

 

CREATE TABLE IF NOT EXISTS `lotus` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(40) NOT NULL,
  `country` varchar(25) NOT NULL,
  `class` enum('elise','exige','gt3') NOT NULL,
  UNIQUE KEY `id` (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8;

 

[zild1221]

My word. Thanks so far! When I get home I will give this a go.

[xyph]

I noticed an error

 

	// Uncomment this line when you're ready for production
// We pass a query string safe (using urlencode) version of the name to the success page as well
echo '<br>Item added successfully';
// header( 'Location: http://'.$path.'/success.php?name='.urlencode($_POST['name']) );

 

Should be

 

	// Comment this line when you're ready for production
echo '<br>Item added successfully';
// We pass a query string safe (using urlencode) version of the name to the success page as well
// Uncomment this line when you're ready for production.
// header( 'Location: http://'.$path.'/success.php?name='.urlencode($_POST['name']) );

[zild1221]

Sorry for not responding. I have been completely swamped with work and haven't even had time to look at this yet. As of right now I really do not have the time to figure this out so it will have to go on the back burner. Thanks though for the help. When I get a chance to work on this I will definitely make sure to ask any questions.