Determining Site Functionality and Features

Chapter 4 - Planning the Web Site
byGareth Downes-Powellet al.
Wrox Press 2003

When developing a web application of any type it is worth planning out the logical steps to achieve the functionality that you require. Certainly, this will vary greatly depending on the type of site that is being developed, but as we have seen previously, it is always worth spending that little bit of extra time in determining a road map of activity.

For our example, the functionality of the site may appear quite clear, but it is worth mapping out the requirements and steps envisioned. This enables you to provide a clear description to the client of your plans for the web site. In this way, you both know whether or not you are on the right track.

Flowcharts

Flowcharts have long been used to describe systems of all kinds, and have been a common tool in IT development and systems for many years. Their great strength is that using them you can define the individual elements of a system or process without having to deal with the specifics of implementation. They act as a roadmap and guide that allow you to see where you are in the current stage of development, where you have been, and where you are going.

A flowchart is a diagram comprised of a number of simple icons, each with a special meaning, which help define entire areas of work into a simple visual medium. They are perfect for charting processes and navigation and are very easy to learn. Diagrams are a good way to clarify and conceptualize your ideas, systems, and processes, and provide a clear and unambiguous medium for communicating them.

The Basics

Flowcharts consist of a number of unique symbols, each of which can be used in a simple and informative way to illustrate the ideas you wish to communicate.

In the following sections we will be using a number of these symbols to communicate elements in our web application's process, so it is essential that we explain their concept here.

The Document Symbol

In the early days of computing, the document symbol was representative of a paper medium, something that was actually printed out and read. Of course, this still applies today; however, the document symbol is an obvious and logical symbol to use for a web page. In the context of the systems and processes detailed later in this chapter, the document symbol will represent exactly that: a web page.

click to expand

The Decision Symbol

As you might expect from the name of this symbol, it represents a conditional segment within the flowchart. Typically, the Decision Symbol will provide only Yes/No answers, and these are reflected in the flow of the diagram.

click to expand

The Process Symbol

There are actually two types of process symbol, there is the symbol illustrated on the right, which denotes a named process, system, or module, and there is a standard process symbol, represented by a simple rectangle which represents any processing function.

click to expand

As we are working with web pages and scripting technologies, each segment of PHP code that we use can be referred to as a named process, or function, hence its use here. The process symbol is far more complex than you might initially realize, as each Process symbol can also contain its own flowchart. We won't be dealing with flowcharts on that kind of level in this book; however, it is something to take into consideration, especially if you are dealing with exceptionally large processes or systems.

A standard process symbol allows us to indicate the use of a technique or formula to transform our data. A typical use for this is when we perform a mathematical calculation without referring to an external subroutine.

     <?php     $width = 100;     $length = 25;     $area = $width * $length     ?> 

A named process symbol, however, allows us to indicate the use of an external function or subroutine, which performs our task. Given our mathematical example above, the corresponding named process could be something like this:

     <?php     $width = 100;     $length = 25;     $area = calculateArea($width,$length);     function calculateArea($theWidth, $theLength) {          return $theWidth * $theLength;     }     ?> 

Of course this is only a very simple example. However, named processes do play a very important part in the optimization and reuse of your code. If, for example, you have a number of sections within your page where you perform the same kinds of calculation, or data transformation, it is usually a good idea to take the common components of these calculations, and turn them into a function, allowing for later reuse, less coding, and easier debugging.

The Manual Input Symbol

This symbol represents manual entry, or input, via a screen or keyboard. For our purposes it represents the information that is typed into a form and submitted for processing.

click to expand

Of course there are many more icons that can be used in flowcharts, and each has their own, unique meaning. A good example of flowcharting software is Microsoft's Visio, which also allows you to create flowcharts of all types; not only for application logic, but also for a myriad of other different uses. More information about Visio can be found at http://www.microsoft.com/office/visio/default.asp.

The Booking System

The booking system process that we wish to use for The Dreamweaver Hotel consists of the customer arriving at our site, entering their required dates of arrival and departure, and the kind of room that they wish to stay in. Using this information, the site searches the relevant database tables (bookings and rooms) to establish that it is possible to make the reservation. If the reservation is not possible then the visitor is given the opportunity to specify an alternative set of dates, or alternative room type. If there is a suitable room for the period stated, the system allows the customer to complete the booking by entering their personal information and credit card details to secure the room.

Important 

The use of a credit card on any web site, should only be done using a Secure Socket Layer (SSL). As the installation and configuration of SSL is beyond the scope of this book, we will not be employing SSL for the purpose of our example site. For this reason, you should remember not to employ any of the pages created within a production environment. When creating eCommerce or eBusiness systems, SSL is a necessary process, and is covered by many online mercantile services, such as Authorize.net (http://www.authorize.net), Verisign (http://www.verisign.com), or CCNow (http://www.ccnow.com) to name a few.

If you would prefer to use your own server, then you can obtain further information about SSL from http://www.openssl.org. To successfully use SSL within your PHP scripts, you will need to install a PHP extension called cURL. More information about cURL, including download options, can be found at http://curl.haxx.nu.

As the credit card will be processed either when the client checks out, or if the client doesn't show up for their booking, there is no requirement for an online credit card transaction, so this simplifies the whole process, as there are no merchant facilities required.

By creating a flow chart for this process, we can better understand the steps required, and also have a complete understanding of the application logic required to make this system work.

click to expand

As you can see from the chart, there are two essential processes. The first process is the search for appropriate rooms, and the second process involves searching the bookings table and removing all rooms that are previously booked. Thankfully, while this may sound like a difficult thing to do, it is really only a matter of devising the correct SQL statement to query the database.

The Billing System

Another essential process is the Billing System while we won't be covering the entire billing system within our example web site, we do need to understand the billing process that the hotel uses. This is a good example of a future addition to the site functionality, which we have already taken into account by creating a billing table. Of course this would be an Administrators system, and wouldn't be available to the web site visitor.

Again, this is a relatively simple system. Upon the entry of a room number all information relating to that room, details of the booking, any room service charges, etc. can be established and calculated. Most hotels operate a policy of charging a fee if the client does not arrive at the hotel and it is for this reason that the credit card information is taken.

Of course, this system is really is an extension of the manual system, but it is worth understanding the process. It may not be entirely relevant to the project at hand, but by better understanding what information is used by the client, you can gain a better insight into what information you need to gather in the development of the site.

click to expand

The Administration System

For the purposes of our example site, only a simple administration system will be created, allowing for the addition of new administration users, and for checking the online bookings. Of course, this system could be more complex, and could incorporate the billing system and other processes relevant to the needs of the hotel staff and managers.

The Administration System comprises three separate processes: Login System, User Management, and Booking Analysis. Here we will take a brief look at the login system, and define the process flow.

The Login System

This process describes the actions to be taken when a login is attempted in the administration section. First of all, the user visits the login page, and enters their username and password details. The password information is then encrypted and, along with the username, is compared to the information stored in the users table. On a successful login, the visitor is sent to the correct entry point page. If incorrect information is entered, the login will fail.

These are all fairly basic and easy systems. As an exercise you could try to map out similar processes, perhaps for the View Bookings feature for the Administration section. Flowcharts are very useful for illustrating processes, and though their use has seen some decline in many circles, the truth is that they are a very powerful tool, and an easy-to-use resource.

click to expand

Planning the Design

Design is a tricky concept, as it is all a matter of taste. What one person considers a good design, another person will consider as bad. Yet, good design does matter, and it is how you apply the fundamentals of design that really matter. Usability is another major factor that you should take into account, as the way that your site 'feels' to the visitor plays an important part in the perception of your client. Popular sites are often the most simple to use, the most intuitive, and this should be a strong consideration in whatever design you wish to implement. The credo "Know your audience, design for your audience, test for usability, and solicit feedback from your audience." is something that you should take to heart. Further information about web usability can be found in "Usability: the Site Speaks for Itself", from glasshaus (ISBN 1904151035).

There are a number of principles of good design, search the Internet and you'll find a few thousand. There are concepts and ideas and, in the large part, it really is a matter of working things out for yourself. However there are a few simple steps that are common amongst all of the principles you will find on the Internet.

  • Define the site's purpose and goal.

    Without purpose and goal, the site will have no function. With no function, it can be the greatest looking site in the world, but people just won't want to use it. There is also a great design principle at work here, without function there is no form. In other words, until you properly establish what the site is for - what it is to achieve - and establish what the client needs the site to accomplish, you cannot properly develop any kind of meaningful form.

  • Who are you aiming it at? Determining who it is for.

    Define your target audience: who are they? Are they colleagues, customers or friends? What do they need from the site? Will they all speak the same language? Will the site be visited by anyone with disabilities? These are all essential questions.

    At the end of the day we all want something, in some form. If a site has no value to me, then I won't visit it, and neither will you for those very same reasons. You must provide something that the visitor will want. I think this is perhaps the hardest thing to achieve when constructing web sites. We often have our own ideas of what people want, but very often, what we think people want, and want they actually want are two very separate, very different things.

  • What will the site look like?

    As mentioned earlier, with function comes form. When you know what the site has to do, then you are more fully able to account for everything during the actual construction and design of the site itself.

    With our site, we have determined that we need to show a few informative pages about the hotel itself, and to allow a visitor to make, amend, or delete a reservation.

    Essentially this has determined our site navigation, which for our example site is not at all complex, and from there we can determine the 'Look' of the site. Referring to our brief, we can see that the client has pre-determined a color scheme of white, orange, and black. There is also the requirement that the site should be quick to load, cross-browser compatible, and be relatively simple to use due to the fact that this is a small, family-run hotel.

    Given these requirements, we have produced a layout for the site, which meets all of them. This layout comprises a single table, containing two images that form the layout, with a navigation bar on the left-hand side, comprised of images that change according to the visitors actions and location within the site, making it easily navigable.

    click to expand

    Of course, this design can be built on as required, but it more than suits the purposes of our example.

  • How do you get around? Navigation

    Thankfully, for our purposes, the navigation of the site is relatively easy. In fact you will have noticed that it is already in place in the screenshot above. Unfortunately the same cannot be said for many sites. People spend hours, days, or even weeks in trying to determine a simple navigational method, or methods. In truth, it is a massively difficult process. It has been shown that 80% of people will use 20% of the navigational methods presented to them. This seems to imply that you need to employ more than one navigation system for your site, and ideally you should, whether that is a combination of images serving as buttons, along with text links or dropdown menus, the decision really is yours. You might want to check out "Constructing Usable Web Menus" from glasshaus (ISBN 1904151027), for more practical examples of how to do this.

    However, you should always remember that the best navigational methods are the simplest ones, which again is a usability requirement. Don't try to be too clever with navigation, as there are many people who won't find it as intuitive as you do. Anyone who works in an IT Department, or teaches web skills to newbie surfers will tell you that the most common question is "What do I click now?" - something that web designers hate to hear! The best advice that I can offer, when it comes to web site navigation, is to find someone who would likely be a visitor to the site. Sit them at a computer and have them use your web site. Listen to any comments that they might make, and learn from them. Sometimes, going back to the 'grass roots' is the only way we can learn.

  • What do you need to get the job done?

    Of course, this question has been semi-answered already. After all, you're reading a book on PHP within Dreamweaver MX, so we presume that these are the tools that you are going to use. Are these the right tools for the job? Does the site really justify being a dynamic, database-enabled web site, rather than a static HTML page?

    Does the site need any form of animation? Flash? Animated GIFs? Do you need to use Dynamic HTML (DHTML) scripts? There is no sense in using technology for technology's sake, unless you are going to use it to its true potential. If there really is no need to be using scripting technologies and databases, then don't use them, they're not appropriate.

    For our purposes PHP and MySQL are perfect for the job in hand. They are fast, cost-effective and offer the right level of functionality for the task. Sometimes, we can be in such a rush to use the latest tool that we don't necessarily use it correctly, or to its best potential. So these factors are well worth considering. If you haven't already done this, look back over your project; look at the features, and look at the site's needs. Are you still using the right tools? Good, now let's move on.



Dreamweaver MX PHP Web Development
Dreamweaver Mx: Advanced Php Web Development
ISBN: 1904151191
EAN: 2147483647
Year: 2001
Pages: 88

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net