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.
FlowchartsFlowcharts 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 BasicsFlowcharts 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 SymbolIn 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.
The Decision SymbolAs 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.
The Process SymbolThere 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.
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 SymbolThis 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.
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 SystemThe 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.
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.
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 SystemAnother 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.
The Administration SystemFor 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 SystemThis 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.
Planning the DesignDesign 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.
|