28 November 2013

Using HTTP Post in App Inventor

This is a quick & dirty demo of how to post data from App Inventor and process it using a PHP script on a web-server. Although there are plenty of examples of using HTTP_Get, I couldn't find a demo of how to use HTTP_Post, so here is my streamlined version. It's taken me a while to grasp how this works so I want to keep a record for future use.I will go into the reasons not to use this "as is" afterwards.

First of all here is the important bit (for impatient people).

The important bits to grasp here are:
Set the Web.Url property to the PHP file which processes the user data
Use Web.PostText to send the data. Add "call make text" to send multiple items.

Multiple items should be in the format data_item_name=data and the second (and any further fields) should have an ampersand preceeding them. A quick look at the Wikipedia article on HTTP_Post structure is a good idea if this is puzzling you.

So I have two fields, username and password which are posted to my PHP server when the Authenticator button is pressed. The next step is to look at what happens at the server. It is a very simple script which just echoes the variables out to the browser. Here's the listing of Appresponder3.php

<script language="php">
# Test routine: echoes form data
$uname = $_POST['username'];
$upass = $_POST['password'];
echo ("$uname,$upass");

So very simple. Notice there are no HTML tags output by this code. This is not by accident. Once the button is clicked, our data should be sent to the PHP server which returns the data to the sending app in the format username,password. Whatever is output from the Appresponder3.php script ends up in the responseContent block so if you have HTML formatting in that file, you will see the HTML tags in with the result data when it is later passed into lbl_Result.Text. I have avoided this to keep the code simple - no extra parsing of the PHP output to extract the bits we want. This is not difficult to do in App Inventor, but I like to keep things simple when explaining.

The Web.GotText function is triggered by the data returned from the Web.PostText function (or possibly a network time-out!). Here we see whatever the result, it is passed into our lbl_Result.Text which is displayed on the app screen. It's a good idea not to assume everything will work perfectly every time and do some simple checks for some common errors (like what happens if there's no network for example?). I'm only checking for a few of the possible errors here (200=success, 401=Not authorised to access the php file and 1101 is returned when there's no network connection).

You can check the PHP is working by calling it via this file. Just save this code on your web-server in the same directory as your Appresponder3.php file (call it Appresponder3.htm)

 <title>Appresponder Test</title>
<form action="Appresponder3.php" name="form" method="post">
<table width="600" border="1">
<th width="91"> <div align="center">Username</div><div align="center">Password</div></th>
<td><div align="center"><input type="text" name="username"></div></td>
<td><div align="center"><input type="text" name="password"></div></td>
<input type="submit" name="submit" value="submit">

Notice that the names of those form elements is exactly what we have in the "call make text" block. We are effectively defining names for our data and these must match the data names later plucked out by our PHP script. Now just browse to http://yourserver/Appresponder3.htm and submit some values. If everything is ok the submit button should return a web-page which just displays the chosen username and password. If not then you have a server configuration issue to resolve which is beyond the scope of this tutorial.

If you have the code working on your browser but all you get in your app is a 401 error, you need to ensure that your web-server is configured to allow anonymous access to the PHP file. It should be possible to specify an account with access rights but I haven't figured out how to do that yet so for now you will need to allow anonymous access to the php file.

Now I will point out the very important reasons not to use this code as-is.

At the moment the web-server must be configured to allow anonymous access for this to work and also those usernames and passwords are going to be sent in clear-text so anyone monitoring the network could easily discover them and get into your system. The only reason I'm posting this is because there are so few examples of using HTTP_Post online at the moment. This could be used as the basis for simple client-server requests so I have published it to help get people started. Please don't use this for real logins without some form of data-encryption.

I also beleive that those values in the "make text" block should be properly encoded according to the information on the Wikipedia article. Oddly enough this does seem to work without encoding, even if you have a username like "Bob Brown" in which the space should really be converted to %32 to be compliant. I have tested this on a Nexus 7 using Win Server 2k8 for the PHP processing and it seems to work ok but as I said it's quick and dirty.