Advertisement
Titanium Mobile

Build a Titanium Mobile Pizza Ordering App: Order Completion

by

Welcome to the fourth and final installment in our series demonstrating how to build a pizza ordering application with Titanium Mobile. In this tutorial, we’ll be creating the processing customer orders and e-mail the results to the pizza chef!

Step 1: Client-Side Validation

Before we make a call to our PHP file, we want to do a little bit of form validation. We just want to check if the fields are empty and, if they are, alert the user to fill them in.

Open your details.js file and add this snippet under our cancel button click-event:

//-- Submit order. Check if the text fields are blank
order.addEventListener('click',function() {
	if (names.value == '' || address1.value == '' || address2.value == '')
	{
		alert('All fields are required');
	}
	else
	{
		//-- Disable fields and buttons before making our HTTP request
		names.enabled    = false;
		address1.enabled = false;
		address2.enabled = false;
		order.enabled    = false;
		cancel.enabled   = false;
		
		//-- Change this URL to where ever yours exists
		orderReq.open('POST','http://yourserver.com/submit_order.php');
		var params = {
			names: names.value,
			address1: address1.value,
			address2: address2.value,
			crust: win.crust,
			toppings: win.toppings
		};
		orderReq.send(params);
	}
});

In the previous tutorial we made the details.js file in which the above code should be placed. We defined the openReq variable at the top of the script in the last tutorial, and this variable will be used to communicate between the client-side code and the server-side PHP file.

If all the fields are filled out, we will disable all the text fields so the user can't change them once they've been sent out. We then call the open() method on our orderReq variable. This will setup the file we are going to open. We also make a new object called params. We give it some keys and values that we will access in the PHP script. Finally, we call the send() method.

It is important to note that if this script was destined for a live application, we would need to perform significant server-side validation in addition to the client-side validation provided above. We will skip this step in this tutorial and instead just focus on building the mobile code.


Step 2: Order Processing

Make a new file called submit_order.php and insert the following:

<?php
//-- POST are variables from details.js
$names    = $_POST['names'];
$address1 = $_POST['address1'];
$address2 = $_POST['address2'];
$crust    = $_POST['crust'];

//-- clean up the javascript array
$toppings = str_replace('"','',substr(substr(stripslashes($_POST['toppings']),1),0,-1));
$toppings = explode(",\n", $toppings);

//-- Where the order will be sent
$to = "yourEmail@yourserver.com";
$subject = "Pizza Order!";
$message = "A new order has been submitted.<br/>";
$message .= $names<br/>";
$message .= $address1 . "<br/>";
$message .= $address2 . "<br/><br/>";
$message .= $crust . " pizza with:<br/>";

$message .= "<ul>";
if (strlen($toppings[0]) == 1)
{
	$message .= "<li>Plain (cheese pizza)</li>";
}
else
{
	for ($i = 0; $i < count($toppings); $i++)
	{
		$message .= "<li>" . $toppings[$i] . "</li>";
	}
}
$message .= "</ul>";

//-- The headers will let us send HTML code as an email
$headers = "From: noreply@thepizzaplace.com\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

//-- if mail gets sent, return true, else return false. This gets handed off the our onload method in details.js
if (mail($to,$subject,$message,$headers))
{
	$response = array('mail' => true);
}
else
{
	$response = array('mail' => false);
}

echo json_encode($response);
?>

Starting from the top, we POST our variables from the param object we made in detais.js. Next, we must convert the Javascript array to a PHP array. The Javascript array was a little tricky because of the line breaks we put in the code (if you guys know of a better method, post it in the comments!). The method I came up with was somewhat clean and simple.

The next part we will output how the message looks. The $to variable is where you should insert the e-mail address where you want the order to be sent. Next, we check the length of the toppings to determine if it was just a cheese pizza or if the orderer specified custom toppings. If it did have toppings, we will make an HTML list to display the toppings.

Next we set the headers. This will allow the e-mail to be HTML formatted when you receive it. Then we call the PHP mail() method. It is formatted like this: mail($to, $subject, $message, $headers). In the code, we test if the mail gets sent, set the $response to true if it does or false if it doesn't. Finally, the json_encode($response) will allow the details.js file to read the object back. Don't forget to upload this file to your server!


Step 3: Handling the onload event

Let's go back to details.js. Under our click event for the order button, we need to make a new onload event and while we are here, let's add our onerror event.

//-- onLoad method for our http request
orderReq.onload = function()
{
	var json = this.responseText;
	var response = JSON.parse(json);
	
	//-- Mail was sent
	if (response.mail == true)
	{
		var alertDialog = Titanium.UI.createAlertDialog({
			title: 'Success',
			message: 'Your order has been submitted (check the email you used in your submit_order.php file)',
			buttonNames: ['OK']
		});
		alertDialog.show();
		alertDialog.addEventListener('click',function(e)
		{
			Ti.App.fireEvent('resetApp');
		});	
	}
	else
	{
		//-- Mail failed
		alert("PHP failed to send the order to the email provided in submit_order.php. Are you sure you have a mail client on your server?");
		names.enabled    = true;
		address1.enabled = true;
		address2.enabled = true;
		order.enabled    = true;
		cancel.enabled   = true;		
	}
};

//-- Network error
orderReq.onerror = function(event)
{
	alert('Network error: ' + JSON.stringify(event));
	names.enabled    = true;
	address1.enabled = true;
	address2.enabled = true;
	order.enabled    = true;
	cancel.enabled   = true;
};

We go back to our orderReq var and add an onload and onerror event. We make a new var called json and set it equal to this.responseText. That contains the data sent back from our PHP file. Next, we have to parse the json string by calling JSON.parse(json). We can now text if response.mail is true meaning the mail was sent successfully. If it was successful, alert the user that the order has been submitted. We want to listen for the click event on the OK button this time so we make an alert a little different than we've been using it. We listen for the click event and on click we fire a new custom event called resetApp. We will cover that in the next step.

Our onerror event will hopefully tell you if something goes wrong. If onload returned false, chances are your server doesn't support mail(). Another good possibility is you have a mispelling. Try access the script directly in your web browser and see if it contains any syntax errors.

Go ahead and give it a try now. Submit your order. Hopefully you will see something similar to the screen below:

If you got a success message, go and check the e-mail you provided in the PHP script. This is what mine looked like coming through Gmail:


Step 4: Handling the resetApp Event

Let's open up the main.js file again. We are going to add our final custom event:

//-- Have our app listen for our custom events
Ti.App.addEventListener('toppings',openToppings);
Ti.App.addEventListener('cancelToppings',openCrust);
Ti.App.addEventListener('details',openDetails);
Ti.App.addEventListener('cancelDetails',openToppings);
Ti.App.addEventListener('resetApp',resetApp);

Now, to handle the custom event we need to make a new method called resetApp().

//-- This gets called after an order is submitted. It basically starts the app over.
function resetApp()
{
	details.close();
	openCrust({});
}

After a successful order submission, the app will be reset and you will be taken back to the crusts screen.


Conclusion

We used our orderReq var to handle the PHP script. We sent some variables to PHP and parsed them, attempted to send an email and handled the response from the script. Hopefully you all have made it this far with no issues! I hope you all enjoyed this series as much as I enjoyed writing it. It was a fun app to create and hopefully you can use what you learned and apply the principles to your own apps!

Related Posts
  • Code
    PHP
    Validation and Exception Handling: From the UI to the BackendProcedural to oop php retina preview
    Sooner or later in your programming career you will be faced with the dilemma of validation and exception handling. This was the case with me and my team also. A couple or so years ago we reached a point when we had to take architectural actions to accommodate all the exceptional cases our quite large software project needed to handle. Below is a list of practices we came to value and apply when it comes to validation and exception handling.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    PHP
    Creating a Photo Tag Wall With Twilio Picture Messaging & PHPProcedural to oop php retina preview
    Twilio's recently announced Picture Messaging has vastly opened up what we can do with text messaging, now we can attach photos to our text messages and have them get used in different ways. In our case, we are going to build a Photo Tag Wall, which will contain photos linked to tags that will be displayed on a website.Read More…
  • Code
    Creative Coding
    Using WordPress for Web Application Development: Features: EmailApplication foundation 400
    One of the major components of every web application is its ability to send email. Now this doesn't mean that each web application is its own mail client (though people do certainly create their own). Instead, I mean that applications normally send emails when a user signs up, a user modifies their password, when something in the system changes, or - more generally speaking - whenever something occurs for which the site owners want to notify the users.Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 3Indexeddb retina preview
    Welcome to the final part of my IndexedDB series. When I began this series my intent was to explain a technology that is not always the most... friendly one to work with. In fact, when I first tried working with IndexedDB, last year, my initial reaction was somewhat negative ("Somewhat negative" much like the Universe is "somewhat old."). It's been a long journey, but I finally feel somewhat comfortable working with IndexedDB and I respect what it allows. It is still a technology that can't be used everywhere (it sadly missed being added to iOS7), but I truly believe it is a technology folks can learn and make use of today. In this final article, we're going to demonstrate some additional concepts that build upon the "full" demo we built in the last article. To be clear, you must be caught up on the series or this entry will be difficult to follow, so you may also want to check out part one.Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 2Indexeddb retina preview
    Welcome to the second part of my IndexedDB article. I strongly recommend reading the first article in this series, as I'll be assuming you are familiar with all the concepts covered so far. In this article, we're going to wrap up the CRUD aspects we didn't finish before (specifically updating and deleting content), and then demonstrate a real world application that we will use to demonstrate other concepts in the final article.Read More…