Forum Moderators: coopster
As a project for my course, we have to build a pizza ordering service website.
I have set up my database like this:
--
-- Table structure for table `ingredients`
--
CREATE TABLE IF NOT EXISTS `ingredients` (
`main_id` int(11) NOT NULL auto_increment,
`main_name` varchar(45) default NULL,
`side_one` varchar(45) default NULL,
`side_two` varchar(45) default NULL,
`side_three` varchar(45) default NULL,
`side_four` varchar(45) default NULL,
`side_five` varchar(45) default NULL,
`spice_one` varchar(45) default NULL,
`spice_two` varchar(45) default NULL,
`spice_three` varchar(45) default NULL,
`spice_four` varchar(45) default NULL,
`oil` varchar(45) default NULL,
`essence_one` varchar(45) default NULL,
`essence_two` varchar(45) default NULL,
`essence_three` varchar(45) default NULL,
`dish_name` varchar(45) default NULL,
`price` varchar(45) default NULL,
`delivery` varchar(45) default NULL,
`date` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
PRIMARY KEY (`main_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
I would like to have a drop down menu that starts off asking the user which main_name they want, and based on that goes through the list to allow them to select 1 side order, then 1 spice, etc..
How could I do this dynamically?
I thought about javascript, but this would not work in real time with javascript right ?
I would really appreciate any pointing in the right direction, as I am somewhat lost at this point.
Thank you in advance.
I suggest looking at a couple of the pizza sites that are already out there, not to copy, because it's highly likely that your teacher has visited them as well, but to see what you like and don't like about them. Use a graphite-based design system (pencil & paper) to lay out what you want to accomplish, and don't skimp on the paper. I strongly suggest that you then take your scribblings, formalize & organize them a bit, and go back to the teacher to get an opinion/guidance. The worst you can get from that is, "it's up to you". The exercise will firm up in your head what needs to be done, even if you don't consult the scribblings while you're about it.
I can pretty much guarantee that you will need more than one table. I'm not seeing size in that table, and I'm not understanding the difference between side & spice & essence, and main name vs. dish name (oh is that maybe thin/pan/deep). (If you do understand, don't pay any attention to me on this point). You'll need one table for an order header (name, address, telephone, total...) and one for items (multiple different pizzas, drinks, etc). I think a common mistake among beginners is to try to do too much in one table.
If t'were I, I would set up the standard and specialty pizzas that I was offering along with a build-yer-own format. The pizza names would go in one table, additional ingredients (along with their impact on price - extra cheese is +1 dollar) in another.
You don't necessarily need javascript. Javascript is useful for interactive pages: making things fly around, change size, pulsate, etc. It's also useful if selection of one criteria impacts the availability of another - we have pepperoni in all sizes but meat gobblers is only in medium and large. Javascript combined with AJAX makes it real-time. To some extent, what technologies you use depends on what you're supposed to be demonstrating knowledge of to your teacher. In the real world, a programmer uses whatever s/he needs to to get the job done combined with what's available and what's allowed (if the boss says no javascript, there you go).
First define what you need to do, then determine what you need to do it (table structures), then figure out how you're going to do it.
This is far too complex for a one-off answer, but here's a few things to get you started. A solid foundation is key to "getting it right," otherwise you wind up with a duct-taped program that strangely resembles a Monty Python dirigible (as much of the code on the Internet does.)
First, consider the logic here:
`side_one` varchar(45) default NULL,
`side_two` varchar(45) default NULL,
.....
`spice_one` varchar(45) default NULL,
`spice_two` varchar(45) default NULL,
`spice_three` varchar(45) default NULL,
`spice_four` varchar(45) default NULL,
What if there's only one spice? or two? Inversely, if there's more sides than 5, or more spices than 4? In the first case you have a bunch of empty cells, in the second, you have to alter the database ad nauseum.
What you need here is three more tables - sides, spices, and essences, and you would join those on a foreign key:
CREATE TABLE IF NOT EXISTS `ingredients` (
`main_id` int(11) NOT NULL auto_increment,
`main_name` varchar(45) default NULL,
`side_id` int(11),
`spice_id` int(11),
`essence_id` int(11),
....
And of course each of those tables would *probably* consist of an autoincrement ID, unique id, and title (but could contain more if needed.) This allows the three parameters to be as many or as few as required for any given pizza. You can remove and add ingredients at will without creating or deleting new columns.
Google for normalization mysql for an extended description.
MySql Manual [dev.mysql.com] will help you understand how to create joins on multiple tables in a mySQL database.
`delivery` varchar(45) default NULL,
Yes or no? Date/time to be delivered? In either case this is an inappropriate field for this, you want
`delivery` tinyint(1) not null default 0, (where it's 0 or 1, or a boolean field)
or
`delivery` datetime not NULL,
A rough answer to this,
I would like to have a drop down menu that starts off asking the user which main_name they want, and based on that goes through the list to allow them to select 1 side order, then 1 spice, etc.
You would construct a php script that
- queries the database for available main_names and based on the result, builds a select list, outputs a form. Caveat: the "main name" should be queried by ID, not text, as in:
$list = '<select name="pizza_name" id="pizza_name">';
....
select main_id,main_name from table order by main_name
...
$list .= '<option value="' . $row['main_id'] . '">' . $row['main_name'] . '</option>';
- on submit of that form if pizza_name is selected, get the variable values for main_name, output another form. Keep the "state" of main_name persistent throughout the process with a hidden field in subsequent selections.
PHP.net, mysql queries [us3.php.net]
- When all possible parameters are input, most likely via email, you would compile a final email, submit the order to the company.
PHP.net, mail [us3.php.net]
I thought about javascript, but this would not work in real time with javascript right?
Well you could, using Ajax, but this would have two problems: I think it would really over-complicate your task, and two, it would then become Javascript dependent and fail for anyone with Javascript disabled. You may, however, use Javascript for client-side validation - for example, in the first "screen," if "main_name" is not selected, you could throw a Javascript alert, "Please select the pizza you would like to order." Don't laugh, people tend to click without reading. :-)
I think this is probably as good a place to start as any.
I have taken your advice and have created a table for each ingredient consisting of, for example, in the main_dish table: main_id and main_name, for spices table: spice_id and spice_name, for essences table: essence_id and essence_name, and so on.
The user will only be able to select 1 ingredient from each table to put together their meal/pizza.
I have created a dropdown menu for each ingredient selection and a submit button. Pressing the submit button saves the selection in a session variable and reloads the page allowing the user to keep selecting other ingredients while storing the already selected ones.
Now what I would like to do is not only reload the page when the submit button is pressed, but also send the saved session variables to another page that displays images based on the info saved in the session variables.
How could I go about doing this?
In very pseudo code I would like to do this:
<form action="page1.php and page2.php"...
Can this be done?
You can use session variables, but it's not really necessary - see my statement about hidden fields. You can do this all in one script. Look at this logic (no "real" php here, just a logic map of your program:)
if (! pizza_type_selected) {
- display "select pizza type" form
}
Note that even without Javascript, if the user submits the first page without selecting a pizza type it will always return to this page, so inherently "error checks" that pizza type is selected.
else if (pizza_type_selected) {
- look up the appropriate options for the selected pizza type
- output the second form, but store selected pizza type as a hidden field. Example:
<form method="post" action="yourscript.php">
<input type="hidden" name="pizza_type" value="123">
<input type="hidden" name="add_options" value="1">
</form>
(Remembering my comments about selecting pizza type by ID, not text)
On submit of that form, you make sure all required thingies are filled in. (It may be possible to add to the above form the full contact, delivery info, etc.) Note I've added a new hidden field, "add_options" that triggers the next step. For the following I've added a "call" to the function "check_final_submit" which would return the user back to step 2 if anything is missing. (Note: not an internal PHP function, this is something you would write.) If it passes check_final submit, we continue on with order summary:
else if (add_options) {
check_final_submit();
- output a summary will all submitted data as hidden fields, include total order
<form method="post" action="yourscript.php">
<input type="hidden" name="pizza_type" value="123">
<input type="hidden" name="side" value="23">
<input type="hidden" name="spice" value="67">
....(etc)
<input type="hidden" name="final_order" value="1">
</form>
else if (final_order) {
- do a final error check as a security measure
- email the company
- output a response/thank you page that also shows the order summary
}
If anything goes wrong, you always want to handle it if a condition is not met by the above:
else {
- some error output so you know the previous conditions did not match
}
Alternatively, all of the above can be done with a switch instead of if/else if. Depends on your style. There are a lot of unaddressed issues here - input validation for security, etc. - but a good starting point.
So in summary:
- if no pizza type on input, output select pizza.
- if select pizza, output options and customer info input
- if that all validates, output a summary and confirmation, all data input to this point is stored in hidden fields.
- on submit of the previous, email the order and return a page response.
All in one script.
So right now I have a ing_test2.php (ingredient test) where the user selects ingredients and hits submit next to each selection.
I also have an iframe on the same page, in which another page, imgtest.php, is loaded where the images are displayed.
I have probably coded this in a brutally primitive manner, but here are scripts I made so that you might see what I am trying to do:
code from ing_test2.php:
<?php
session_start();
//This is to reset selections is the reset button is clicked
if ($_GET['killflag']==1) {
session_unset();
}
//Get the ingredients and id's for the main dish
///////////////////////////////////////////////////////
if (isset($_SESSION['main_dish'])) {
echo "main dish: ".$_SESSION['main_dish'].' ';
$show = '<div id="box" style="display:none">';
$show2 = '<div id="box" style="display:block">';
} else {
$main_dish = $_GET['main_dish'];
$_SESSION['main_dish'] = $main_dish;
echo "main dish: ".$_SESSION['main_dish'].' ';
$show = '<div id="box" style="display:block">';
$show2 = '<div id="box" style="display:none">';
}
///////////////////////////////////////////////////////
//Get the ingredients and id's for the side dish
///////////////////////////////////////////////////////
if (isset($_SESSION['side_dish'])) {
echo "side dish: ".$_SESSION['side_dish'].' ';
} else {
$side_dish = $_GET['side_dish'];
$_SESSION['side_dish'] = $side_dish;
echo "side dish: ".$_SESSION['side_dish'].' ';
}
///////////////////////////////////////////////////////
//Get the ingredients and id's for the spices
///////////////////////////////////////////////////////
if (isset($_SESSION['spice'])) {
echo "spice: ".$_SESSION['spice'].' ';
} else {
$spice = $_GET['spice'];
$_SESSION['spice'] = $spice;
echo "spice: ".$_SESSION['spice'].' ';
}
///////////////////////////////////////////////////////
//Get the ingredients and id's for the oils
///////////////////////////////////////////////////////
if (isset($_SESSION['oil'])) {
echo "oil: ".$_SESSION['oil'].' ';
} else {
$oil = $_GET['oil'];
$_SESSION['oil'] = $oil;
echo "oil: ".$_SESSION['oil'].' ';
}
///////////////////////////////////////////////////////
//Get the ingredients and id's for the essences
///////////////////////////////////////////////////////
if (isset($_SESSION['essence'])) {
echo "essence: ".$_SESSION['essence'].' ';
} else {
$essence = $_GET['essence'];
$_SESSION['essence'] = $essence;
echo "essence: ".$_SESSION['essence'].' ';
}
///////////////////////////////////////////////////////
//Get the ingredients and id's for the delivery
///////////////////////////////////////////////////////
if (isset($_SESSION['delivery'])) {
echo "delivery: ".$_SESSION['delivery'].' ';
} else {
$delivery = $_GET['delivery'];
$_SESSION['delivery'] = $delivery;
echo "delivery: ".$_SESSION['delivery'].' ';
}
///////////////////////////////////////////////////////
//include our db data to make the connection
include ('db.php');
?>
//this shows or hides the div, if no selection has been made yet, then the dive is shown so the user can see the drop down menu
<?php echo $show ?>
<!-- Main Dish query -->
<form action="ing_test2.php" method="GET">
<select name="main_dish">
<option>Main Dish</option>
<?php
$content = mysql_query("SELECT * FROM main");
while($row = mysql_fetch_array($content))
{
echo '<option value="'.$row['main_id'].'">'.$row['main_name'].'</option>';
}
?>
</select>
<input type="submit" value="OK" />
</form><br /><br />
<!-- End Main Dish query -->
</div>
<!-- Main Dish query -->
//If a selection has been previously made, the above div is hidden and this one is shown. If no selection has been made, this div is hidden
<?php echo $show2 ?>
<br /><br />
Main Dish:
<?php
$chosen = $_SESSION['main_dish'];
$content = mysql_query("SELECT main_name FROM main WHERE main_id ='$chosen'");
while($row = mysql_fetch_array($content))
{
echo $row['main_name'];
}
?>
<br /><br />
</div>
<!-- End Main Dish query -->
<!-- Side Dish query -->
<form action="ing_test2.php" method="GET">
<select name="side_dish">
<option>Side Dish</option>
<?php
$content = mysql_query("SELECT * FROM side");
while($row = mysql_fetch_array($content))
{
echo '<option value="'.$row['side_id'].'">'.$row['side_name'].'</option>';
}
?>
</select>
<input type="submit" value="OK" />
</form><br /><br />
<!-- End Side Dish query -->
<!-- Spice query -->
<form action="ing_test2.php" method="GET">
<select name="spice">
<option>Spices</option>
<?php
$content = mysql_query("SELECT * FROM spice");
while($row = mysql_fetch_array($content))
{
echo '<option value="'.$row['spice_id'].'">'.$row['spice_name'].'</option>';
}
?>
</select>
<input type="submit" value="OK" />
</form><br /><br />
<!-- End Spice query -->
<!-- Oil query -->
<form action="ing_test2.php" method="GET">
<select name="oil">
<option>Oil</option>
<?php
$content = mysql_query("SELECT * FROM oil");
while($row = mysql_fetch_array($content))
{
echo '<option value="'.$row['oil_id'].'">'.$row['oil_name'].'</option>';
}
?>
</select>
<input type="submit" value="OK" />
</form><br /><br />
<!-- End Oil query -->
<!-- Essence query -->
<form action="ing_test2.php" method="GET">
<select name="essence">
echo '<option>Essences</option>
<?php
$content = mysql_query("SELECT * FROM essence");
while($row = mysql_fetch_array($content))
{
echo '<option value="'.$row['essence_id'].'">'.$row['essence_name'].'</option>';
}
?>
</select>
<input type="submit" value="OK" />
</form><br /><br />
<!-- End Essence query -->
<!-- Delivery query -->
<form action="ing_test2.php" method="GET">
<select name="delivery">
<option>Delivery</option>
<?php
$content = mysql_query("SELECT * FROM delivery");
while($row = mysql_fetch_array($content))
{
echo '<option value="'.$row['delivery_id'].'">'.$row['delivery_name'].'</option>';
}
?>
</select>
<input type="submit" value="OK" />
</form><br /><br />
<!-- End Delivery query -->
//The reset button resets all selections if the user wants to start over
<form action="ing_test2.php" method="get">
<input type="hidden" name="killflag" value="1" />
<input type="submit" value="Reset" />
</form>
<br /><br />';
//The iframe loads imgtest.php where an image should be shown based on which selection the user has made above.
<iframe src="imgtest.php" frameborder="0" width="90%" height="400" name="iframe">
</iframe>
?>
The contents of imgtest.php:
<?php
session_start();
//Image alteration test, for testing reasons I only have this here once, in the future there will be images for each ingredient selected. So right now, only the main dish is shown with either 1.jpg for meat or 2.jpg for vegetables. This code is loaded through the iframe above.
///////////////////////////////////////////////////////
if (isset($_SESSION['main_dish'])) {
echo '<img src="'.$_SESSION['main_dish'].'.jpg" />'.'<br />';
} else {
$main_dish = $_GET['main_dish'];
$_SESSION['main_dish'] = $main_dish;
echo "main dish was not set: ".$_SESSION['main_dish'].'<br />';
}
///////////////////////////////////////////////////////
?>
[edited by: PartisanEntity at 6:46 pm (utc) on May 2, 2009]
