In Part 1 of How To: Code Your First Web App, I covered the basics of setting up a MySQL database, connecting to it with PHP and then I introduced a few functions to create and manage users. At the end, I briefly went into setting up the header file which will be used with every file created from here on out. The next step is creating the main files that actually do things.
As mentioned in the comments of Part 1, copying and pasting the code doesn't always work due to the way quotes get mangled. Download the complete set of files at the end of this series.
With the completed header.php, I can progress to the actual index file. Here's what a basic index.php might look like:
My First Web App
Now that there is a light framework, it's time to show you some easy ways to actually get your web app to do something and interact with the database. First off, I'm going to show you an easy way to alter a page menu depending on whether the user is logged in. For example, a user not logged in will only see a few page menu links while a logged in user would see specific links to their user account or settings pages.
I like to make a separate file for the menu and name it nav.php, short for navigation. This file is rather tame; it contains links to pages as well as code to check for the user's session and determine logged-in status.
Each list element has a class set to a PHP variable. That way, when you include nav.php in each file you can also specify something like home = current_page_item. If you had your CSS setup so that the tab with "li.current_page_item" was styled differently than the rest, you'd have a dynamic menu at your disposal. Alternatively, you could take a stab at integrating Matt's intelligent menu code.
To finish off my menu, simply add this chunk of code after the header div in each file or wherever you want the menu to appear. Be sure to change "home" to correlate to the page you're adding the code to. For example, if your nav.php had a list element with the class settings and you were placing this code on the settings page, change home in this code example to settings. This ensures that the settings page menu link is styled differently.
Adding users to the database will require a form to pass user input data to the database after a few input validations (confirming password, etc). Forms are an easy way of accepting user input and manipulating the database with only a few MySQL queries. As discussed in Part 1, the users table in the database keeps track of user name, password and email. Below is a form that can accept those values, it can be put on any page structured like the index.php skeleton I created above.
The first line establishes the form action as another file "form.php" - this is where the inputted data gets sent and processed. The labels come in handy when styling the forms with CSS as do the input ids. The type "password" for the password inputs displays text as dots. Then there is the input type submit which makes the button to send the inputted values to the actual form for processing. Let me pull up the form code..
Enjoy this article? Tweet it.
"How To: Code Your First Web App (Part 2)" by @Stammy