Get AMPed over Uniform Server and Build a Data-driven Web Site in Nothing Flat

n the history of the Internet there have been few technology combinations as compelling as ‘LAMP’ has proved to be?Linux, Apache, MySQL, and PHP. They are the cornerstone of low cost, data-driven Web sites. Linux, the open source operating system on which server class applications can run; Apache, the most popular Web server in the world; MySQL, an extremely popular open source database; and PHP, a server-side scripting language used to build data-driven Web sites.

To the uninitiated, setting up a Web server, database, scripting language, and operating system isn’t totally straightforward and there is a large learning curve to ascend before productivity can result. It can be particularly difficult for Microsoft specialists, whose familiarity with Windows and associated technologies such as IIS, SQL Server, and ASP can get in the way of learning things the LAMP way. That is, until now.

Thanks to the Uniform Server project, an open source initiative designed to be a one-stop-shop for administration of Apache, MySQL, and PHP, it is now embarrassingly easy to set up a data-driven Web site. The only caveat with Uniform Server is that it is not a LAMP project, but a “WAMP” project?namely, it is designed and tested for Windows. You can use this to build and run your site on your Windows PC at home and seamlessly install it to run on a public Web site hosted by an ISP when you are ready. That way you don’t need to set up and install your own Linux system complete with Apache, MySQL, and PHP, which can be a difficult prospect for the uninitiated, yet you still reap the benefits of developing Web sites that run on this environment.

In this article you will learn how to install the Uniform Server, and use it to build your first MySQL + PHP Web application?your very own blogging site!

Uniform Server?also known as the ‘mini’ server, because of its size and lack of complexity?is a small download, less than 4MB, and requires no installation at all. It doesn’t touch your registry in any way. Simply download it, unzip it to your directory of choice, and execute the start.bat command file.

Figure 1. The Uniform Server Main Screen: Unpack the download and run start.bat to reach the menu page for the Uniform Server.

One thing to note here is that this will start the Apache Web server, which can conflict with IIS should you have it installed and running. The Uniform Server is perfect for Windows XP Home Edition, which doesn’t come with IIS, but should the Microsoft Web server be running you will need to stop it to use the Apache implementation that comes with Uniform Server. You can do this using the Internet Information Services applet in the Administrative tools area of Control panel. Simply select the ‘Default Web Site’ element, right click it, and select ‘Stop’.

From a command prompt, run start.bat and you will then be able to access the Web server’s administration screen at http://localhost/a/ (see Figure 1).

From this screen you can control everything on your Web server. It is important to note that the Uniform Server creates a RAM disk with a virtual drive, with the drive letter ‘W’. Inspecting this drive you will see the following directories:

  • WWW?This is where you put your Web pages. Later in this article, I will look more closely at how to use the Uniform Server to build a simple blogging site.
  • CGI-BIN?If you want to use PERL, your scripts go in here.
  • HOME?The administration screens and scripts are stored here.
  • USR?This is where the engines for running PHP, PERL, and MySQL are stored.
  • TMP?TMP is a directory for temporary files.

Using the Uniform Server to Build a Blog Site
Blogging is all the rage at the moment, and the fact that building a blog site is deceptively easy has probably helped the popularity of blogging along. For the rest of this article you will step through how to build one using MySQL as the database storing your blogs and HTML and PHP running on the Uniform Server installation of Apache to save and read entries.

A simple blog works by having three Web pages and a database that backs them up. The first Web page is an HTML form that you use to make your entry. This form allows you to type your bloggings, select a category in which they will reside, and finally authenticate yourself so that the blog will only accept entries from you. The authentication scheme that you will use here is a simple PIN number, but you could easily expand on this, if you want to make more secure sites using alphanumeric passwords or SSL. The categorization allows you to separate entries into designations such as work, school, movies, music, or any type of categories you prefer.

The second page is a PHP script that accepts this form submission, authenticates you, creates a new database entry with the blog details, and categorizes it.

The third page is the one that blog visitors would see; it is a PHP script that reads the latest entries from the blog, and formats them into HTML for return to the browser.

Setting Up the Database
The blog database is very straightforward. You will have two tables, one for the entries, and one for the categories of those entries. These are set up using the PhpMyAdmin tool from the Uniform Server. If you haven’t done so already, go to the administration screen (Figure 1) and start the MySQL database by clicking ‘Run MySQL Server’. Once it has started, you will be directed to a confirmation screen. Click ‘Back’ on this screen to go back to the administration screen. Once there, click the PhpMyAdmin link to start playing with the database.

You should see a screen like that shown in Figure 2.

In the ‘Create new database’ section, enter the name ‘Blog’ and click ‘Create’. You will be taken to the screen shown in Figure 3.


Figure 2. phpMyAdmin Home Screen: phpMyAdmin is the facility you use to set up your blog’s back end data store.
 
Figure 3. The Two Tables: The screen will allow you to create a table on your database.
Figure 4. Categorization: This screen is where you begin to name the fields in your database tables.

To create the categories table, enter ‘Categories’ in the ‘Name’ field, and ‘2’ in the ‘Fields’ field. This will create a simple table with 2 fields. One field will be used as a numeric ID for the category, the other as a textual description of the category. Once you have done that, click the top ‘Go’ button (beside the ‘Fields’ entry). You will then be taken to a form where you can describe the database fields (see Figure 4).

Enter the fields as shown.

  • Field ‘ID’ should be an INT that is ‘not null’ and its ‘Extra’ setting set to ‘auto_increment’. It should also be a unique value.
  • Field ‘Description’ should be a VARCHAR with a length of 100.
  • When you are done, click ‘Save’. You now have a table on your database called ‘Categories.’ Repeat the above steps to create a table called ‘Blogs’ with the following fields.

  • Field ‘ID’ should be an INT that is ‘not null’ and its ‘Extra’ setting set to ‘auto_increment’. It should be a unique value.
  • Field ‘Category’ should be an INT that is ‘not null.’
  • Field ‘Headline’ should be a ‘VARCHAR’ of length 100 that is not null.
  • Field ‘Body’ should be a ‘BLOB.’ This is because a VARCHAR can only hold up to 255 characters, which is not enough for most entries.
  • Entering Information to the Database
    From the home screen of phpMyAdmin (Figure 2), select the ‘blog’ database from the drop down on the left-hand side. This will take you to the administration screen for the database (see Figure 5).


    Figure 5. Behind the Curtain: Getting to the Administration screen for the blog database is simple.
     
    Figure 6. Choose Your Categories: Enter the names of your blog categories into the database using this form.

    To enter new information on a table, use the ‘insert’ icon under the ‘Action’ heading. If you hover your mouse over the icons within this section you will see tooltips describing them. Select the ‘insert’ icon on the ‘categories’ row. You will be taken to the screen in Figure 6.

    In the ‘Description’ field, enter the value ‘Movies’ and click ‘Go’. This will make a category entry for movies. You do not need to do anything in the ID field as it is set to ‘auto_increment’ meaning that the database will handle it for you. ‘Movies’ is now associated with the ID ‘1’. Repeat these steps to make more entries for whatever categories you like.

    Building the Data Entry Pages
    Data entry is achieved using two pages. The first is an HTML form that provides the user interface, the second a PHP script that processes the input from the form. Using an HTML designer, such as Dreamweaver or FrontPage, a simple form such as the one defined by the code in Listing 1 can be developed. The full page is available in the download accompanying this article.

    This form is very skeletal and simple and can be designed or updated with any HTML designer application?or if you prefer by tweaking the code. The only things you will need to keep note of if you are making your own are the control names. The processing script expects the names to be tHeadline, tBody, and tPin, respectively.

    In this simple case, you aren’t using the categories, but as the categories are taken from the database at runtime, you need to get a little more fancy. In the next section you will see how to generate this HTML form on the fly with the up-to-date category list using PHP.

    Auto-Generating the Entry Form
    Listing 1 showed the entry form for your blog, which was just fine, except that it didn’t have the facility to set the category. You might think that it is easy to just add another form field that contains a list of the categories and you can take it from there, but there would be a problem with this. You would need to hard-code the categories into the page, so if the database ever changed, then you would also need to go back and change your page. A far more efficient way of doing this is to have a PHP script generate the HTML for you. This is a lot easier than it sounds!

    Figure 7. Look Mom: It’s your first PHP page.

    The first thing to do is to get an instance of your page and save it as a PHP file instead of an HTM file. (For this example I called it BlogForm.php.) You can then put it on your Web server by copying it to the ‘www’ directory. You can then browse to this form using the http://localhost/blogform.php URL. The result is shown in Figure 7. You’ve just written your first PHP page! Congratulations.

    But hang on a second: You might think that all you did was write an HTML page and call it a PHP page. Well you would be right. This is because the PHP parser handles HTML, and in fact works best in these cases by taking the HTML and allowing you to mark it up with information generated on the fly.

    Consider the example, where you want to add category information to this page. You would put a form menu object on the page between the blog entry and the pin (see Figure 7). The code for this object would look something like:

    In PHP we can generate this HTML using this code:

    At first this may look like gibberish but if you note that the code between the is considered to be server code and the rest to be client side HTML, you will see it take shape.

    First you output the

    Figure 8. What to Say?: The finished HTML form is driven by PHP.

    This snippet demonstrates using the @mysqlconnect, @mysql_select_db, @mysql_query, and @mysql_fetch_array commands to connect to a MySQL server, select a database on that server, run a query on that database, and load the resultset into an in-memory array, respectively. It then outputs the contents of that array to the selection box within a while loop.

    This can then be added to the Form, to produce a data-driven form. This is available in the download as blogform.php (see Figure 8).

    Processing the Results
    When you submit the form, the browser sends the value of the contents of its form controls to the destination as POST variables. This can be seen on the very first line of Listing 1, where the form method is POST and the destination is blogentr.php.

    The destination file receives these POST variables in the HTTP conversation, and as (in this case) it is PHP, it can retrieve them using the $_POST array. The code to handle these variables and to use them to generate an INSERT query that puts the information into the database is shown below:

    $Headline = $_POST['tHeadline'];$Body = $_POST['tBody'];$Category = $_POST['sCategory'];$PIN = $_POST['tPin'];if($PIN=="1234"){  $SQL = "INSERT INTO blogs (category, headline, body) VALUES ('";  $SQL = $SQL . $Category . "','";  $SQL = $SQL . $Headline . "','";  $SQL = $SQL . $Body . "')" ;  if (@mysql_query($SQL))   .   .}?> 

    The entire PHP script is available from the download. This includes checks for connectivity to the database and valid SQL.

    Reading Your Blog

    Figure 9. HTML Template: This is the HTML template for retrieving the BLOG data.

    No blog is any good without the facility to read it! The final page that you will build is a page that takes a parameter for the category, downloads the entire blog for that category, and renders it in HTML for your readers. The best way to start is to mock up how you would want the HTML to appear in an application such as Dreamweaver or FrontPage, and build from there. Figure 9 shows the template for this page, which is available in the download.

    This template is very straightforward, as it has HTML that uses the standard tags for formatting the text fonts. The page in Figure 9 was built using the following HTML

    My Headline

    My text


    My Headline

    My text


    In a similar way to what you did for creating the form earlier, you can now use this code to form the basis of the getblog.php file that your readers will use to access your blogs. The format will be http://webserver/getblog.php?category=1.

    This address includes the desired category number, passed as a parameter, which is called a GET parameter. There are two types of HTML parameters: GET parameters, which are passed in the address line as above, and POST parameters, which are part of a form submission. PHP gives you the handy $_GET and $_POST variables to give you access to these.

    The PHP that gets this parameter and uses it to query the database, generating HTML from the returned results, is shown below.

    Unable to locate the main ' .           'database at this time.

    ' ); } $SQL = "Select * from `blogs` where Category = " . $Category . " ORDER BY ID DESC"; _query($SQL); while ($row = mysql_fetch_array($result)) {?>


    You can then build navigation to these pages using (for example) a frameset that links to different URLs where the ‘Category=’ parameter is set differently. Or if you want to be a little more fancy you can use PHP to generate a page containing these URLs automatically.

    Blogs Are Just the Beginning
    This article showed you how straightforward and easy it is to build a powerful Web application environment complete with database using the Uniform Server open source project. The site that you build is easily transferable to a live server, hosted by an ISP that supports Apache, PHP, and MySQL, which most do. It’s a great way of entering a difficult arena, and a great way to get straight at what you want to do?build applications! The example application, a Web-based blog application, is just one way to get started with your Uniform Server WAMP development. It has given you the grounding to build just about anything!

    Share the Post:
    Share on facebook
    Share on twitter
    Share on linkedin

    Overview

    Recent Articles: