How To: Code Your First Web App (Part 3)
By now you are probably waiting for the final part of this web app series so you can actually begin putting something together from what you’ve learned in Part 1 and Part 2. I won’t disappoint you then. I wrote an example web app available for download at the end of this article.
Handling Multiple Items
In Part 2 I finished showing you how to handle user accounts. Now it’s time to show you various ways of manipulating data in your database. From now on I’ll assume you have another database table other than the users table. Using the downloadable web app I made as an example for this series, we have the contacts table. The contacts table has 7 fields - id, name, street, city, state, zip and created_by.
What would I do if I wanted to list each contact stored by a particular user? I would use a while loop in the following fashion. However, before I display and explain the code let me tell you about those 7 fields. I don’t think I have to explain the first 6 so let me go straight to created_by. I use this field to store the name of the user who inputted that contact. This gives me an easy way of sorting out contacts by user. In a form that I have setup (form.php in this example), the user’s name ($user) is automatically stored in the created_by field whenever a new contact is added. When you start dealing with a very busy database, storing the user name with each contact can become bulky. However, for this small example there won’t be any noticeable slowdown.
$result = mysql_query($get_contacts);
//loops through the multiple results of the $get_contacts query
while($contact = mysql_fetch_array($result, MYSQL_ASSOC)){
echo “<b>” . $contact[‘name’] . “</b><br />” . $contact[’street’] . “<br />”;
echo $contact[‘city’] . “, “ . $contact[’state’] . ” “ . $contact[‘zip’];
}
First there is the query $get_contacts - it retrieves all fields (denoted by *) for every contact stored in the contacts table by the logged-in user, $user, and then it orders the multiple results by name and then state. I then process that query, save it as $result and then initiate a while loop using the $result to leave me with an array, $contact, which I can access. Within the loop I can access each field from the contacts table in the array format - $contact['FIELD_NAME']. This sequence of steps is applicable for a range of simple database actions.
I did a lot of concatenating while echoing the field elements, as referenced by the dots which connect elements. Any non-PHP elements must be contained in quotation marks at all times while PHP elements don’t need them.
What the finished product looks like.
One element of that screenshot not in the code I showed was the “delete” link under each contact. To get that functionality, I added one more line within the loop.
That line simply creates a special link with a “delete” parameter set equal to the id of that contact. That’s all fine and dandy but it won’t work until I grab that parameter and put it in a usable format. To accomplish that I must first add the next chunk of code to the top of the file.
if($delete !== NULL){
$delete_contact = “delete from contacts where id=’$delete’”;
if (!mysql_query($delete_contact)){
die(‘Error: ‘ . mysql_error());
}
header(‘Location: index.php’);
}
Dealing with PHP url parameters is fairly easy - grab the value of the parameter with $_GET, the opposite of our $_POST friend from Part 2. To protect from SQL injection exploits I ran that through my trusty make_safe() function. The next phase of dealing with this new variable is to check if it is null, or is empty and therefore is not present in the url. However, if it has a value I use my if loop to execute some MySQL code to delete every field of the contact where the id is equal to the value of the $delete variable.
Done for Now
Hopefully you’ve learned enough PHP and MySQL info to go through the code in my example web app, understand how it all works and start working on your own web application. Without any further hesitation, here is the example web application, a simple contact manager: webapp.zip (11kB) (free for non-commercial use).
I spent many hours on this web app example and these how to’s, so if you learned or gained anything through them please let me know by leaving a comment or linking to them. As a disclaimer, don’t trust the code presented in these tutorials for safekeeping precious data. I only know a bit about security and there’s no doubt in my mind that it could easily be exploited in some way by a professional.
Great series Paul. You included pretty much every feature that almost every web apps needs. I found it to be very clear and concise as well. You should start writing more tutorials like this.
Thanks paul,
btw i think i broke your party finder app last night i tried to add an event to test how it works but it seems like its fixed now
Wonderful series Stammy!
Awesome series Paul. Your tutorials have always been great for me to follow, and I have always been curious about the web app development process. Now that I have the framework, you need to do a tutorial on how to come up with the idea.
Hi
Paul that’s great tutorial you came up with for PHP and Mysql.Well i guess if you can come up with tutorials like ” Porting oswd.org templetes to wordpress themes” or other like “creating wordpress themes for beginners” in 2007 that will definitely bang the blogosphere.
I think many readers of your blog want the above said titles from you,anyway wish you happy new year in advance.
Paul, I’m sure you enjoyed working on creating your web app, even though it took many hours! I know that it is the case for me and I always learn new things along the way! (Usually, finding a better and more efficient way of writing code)
Have a happy ‘07 ahead of you!
Bookmarked! I haven’t read part 1 or part 2, but when I decide to create The Greatest Web App Ever Known to Man, I’ll go back and read them. Great series.
Paul, great job on this! A stellar tutorial and a perfect example app.
I found your tutorial very useful.
I’ll put in good use your coding technics.
Kali Hronia!
Amazing Simple article Paul … expect more such series.
Hi Paul,
Thanks for this very nice tutorial, but I did run into a warning:
Warning: Cannot modify header information - headers already sent by (output started at C:\Program Files\xampp\htdocs\webapp\header.php:23) in C:\Program Files\xampp\htdocs\webapp\manage.php on line 9
it occured when, after login, I went to manage contacts.
Any idea?
Many thanks and best regards,
Marcel
The Netherlands
Hey Marcel, that header thing is happening on in a few select cases with various server setups. I’ll try to look into it this weekend but it might just be one of those things as there are many different server setups out there.
Thanks for pointing it out,
Paul
Thanks champ - just what I needed - I am big on ideas, business experience and education but I’m not a developer. You gave me a good insight so I can build my prototype web application, to show my potential investors.
Kali Xponia megale
@Marcel - try deleting “< ?php echo $title; ?>” from header.php
great tutorial…hmm is there translation this tutorial with openlaszlo… heee ;)
Great tutorial, congratulations……. excellent for teaching and practice :)
Greetings from Colombia (South america).
att,
Mario Benavides Jurado
Web Developer
Hi Paul,
Many thanks for this post.
I’ve studying building Web App using this post and I’m getting there, have learned a lot.
Heres my suggestions to get this even smoother My LAMP (Ubuntu Dapper drake 6.06) needed these lines to RUN_THIS_FIRST.sql file, before the other commands:
create database webapp;
use webapp;
After these changes phpMyAdmin does it all: Creates database, `contacts` and `users` tables and all th fields.
If some one wants to know how I’ve built my Web App on Ubuntu LAMP, check these:
Basic installation:
http://www.debianadmin.com/ubuntu-lamp-server-installation-with-screenshots.html
Basic installation plus phpMyAdmin etc.:
http://ry.akgeeks.net/?p=9
Hi again
These things I found useful too.
MySql command line interface:
Logging on:
mysql -u username -p
Deleting the database:
drop database webapp;
Selecting the database when logged on:
use webapp
I installed my Ubuntu LAMP on my Windows workstation by installing first VmWare Player:
http://www.vmware.com/products/player/
To create Ubuntu (or any Linux) virtual machine, create your template here:
http://www.easyvmx.com/
It’s Like Eureka Eureka for me…Paul you a Gem. I searched whole lot of web but could n’t find anything you did… I wonder why Google keeps your site at different place than at number one…. Even a blind can uderstand what the heck is all about in PHP. I will try to propogate this wonderful series to my freinds.. I think they must be benefitted as i am….
Paul one more request … Please come up with all your knowledge in this blog..lol..
Cheers
Bro…
Thanks again Paul, I’ve learned alot using your material. Now I’ll start building my own apps, but I’d like to add few last remarks.
Typos and other issues:
In util.php
Line 8, quotes missing, should propably be:
$mysql_db = “webapp”;
In functions.php
Line 16, variable $msql_host is incorrect, “y” is missing, should be $mysql_host. If MySql and web service in both on the same computer, this doesn’t matter, because default mysql host is localhost.
I first installed both MySql and web service on a LAMP-computer, but then I tried using IIS on W2003 as web service and MySql on LAMP. Well, I partly got it working. Register works OK if you correct the typos, but most of the pages/actions does not. If you are looking for similar application like this, I think you can correct the errors with reasonable effort.
One of the things with IIS & Windows, PHP and MySql is that two latter must be compatible. MySql 5.x requires PHP 5.x.
Other thing is installing PHP to work with IIS and the PHP to work with MySql. I couldn’t get the installer to work, made a manual installation and got the PHP’s MySql Extensions in working order, but that required some perseverance.
Thanks man, this has helped me so much!
I am really trying to learn this, but reading books and stuff of that sort is just boring. Hands on is more my style and this is just what I was looking for, excellent work.
Thank you,
I appreciate the time you spent on this tutorial, very helpful for someone just starting. (y)
A fantastic tutorial, right at the level I'm looking for! In the spirit of free tuition there are a few tips I'd like to share with other new students of PHP like myself. Fingers crossed all this code formats ok!
1. As stated by rattiepa, util.php has missing quotes on $mysql_db = webapp; line. It should read $mysql_db = "webapp";
2. The forms.php file tests the $_POST array for redirections from other pages. Depending on from where you've come, some of the array parameters may not exist which gives undefined index warnings. You can get rid of these warings by checking that the parameters exist before attempting to copy them from $_POST into new variables. Do this using a simple if statement for each variable so that:
$user = make_safe($_POST['user']);
becomes:
if(isset($_POST['user'])){
$user = make_safe($_POST['user']);
}
3. Similarly, to get rid of the undefined index error in manage.php change:
$delete = make_safe($_GET['delete']);
if($delete !== NULL){
$delete_contact = "delete from contacts where id='$delete'";
if (!mysql_query($delete_contact)){
die('Error: ' . mysql_error());
}
}
to:
if(isset($_GET['delete'])){
$delete = make_safe($_GET['delete']);
if($delete !== NULL){
$delete_contact = "delete from contacts where id='$delete'";
if (!mysql_query($delete_contact)){
die('Error: ' . mysql_error());
}
}
}
4. To get the cool title stuff working for the index page add "/webapp/index.php" => "- Home" to the $pages associative array in the header.php file for the home page. I think Paul just forgot this line.