Documentation Assignment 97 03

464 views
379 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
464
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Documentation Assignment 97 03

  1. 1. Internet Databases EJ215008S SID: 0766299 Contents Page 2 ...................................................................................................Introduction Page3-9 .................................................................................................Analysis & Design Page 10-32 ..........................................................................................List of Web Pages & Descriptions Page 33 .................................................................................................Website Structure Page 34-52 ............................................................................................Website Screenshots Page 53-58 ............................................................................................Data Dictionaries Page 59-63 ............................................................................................Process Descriptions Page 64-74 ............................................................................................Sample Code Page 75-76 .................................................................... .......................W3C Validation Page 77 .................................................................................................Appendices 1 | P a g e INTERNET DATABASES EJ215008S SID: 0766299
  2. 2. Internet Databases EJ215008S SID: 0766299 Software Documentation Introduction I have been asked to complete an assignment to design a user interface for an organisation that provides a client/server web based application that allows users to buy used cars from dealers across the UK. The vehicle details are going to be held on a database that can be accessed via mySQL. Each vehicle had a unique identification number and a list of attributes including make, model registration number, price and dealer etc. I wanted to create an interface that was easy to use and user friendly – therefore I need to take into consideration the users and how the process should be simple. I decided research into current used car dealer’s websites to give me an idea of what it should look like and how I can make a friendly interface. The website I’m creating needs to be able to allow the user to search for a vehicle dependant on their requirements. Once a user has found a vehicle they then need to be able to continue and purchase the vehicle if they choose to. Once a user has purchased a vehicle via the website they need to provide with information when the vehicle will be ready and links to other useful websites and information. A user also needs to be able to come back to the website and view their order history in case they need to check up on details of previously purchased cars. Alongside the website will be an administration panel available for the staff – this will allow them to login and add, edit or delete cars where required. As well as this they can view a list of current employees, customers and orders that have been placed on their website. The administration panel also needs to be user friendly and I need to bear in mind that not all staff may be computer literate. 2 | P a g e
  3. 3. Internet Databases EJ215008S SID: 0766299 Analysis & Design I will now outline why I created the website in the way I did and my reasons for choosing the particular layout I went for. When I was first given the task of creating the website I first decided to create a list of exactly what the website needs to do: • Provide a user friendly interface for both users and admin • Provide a quick search to list all vehicle with the make selected • Allow the users to purchase a vehicle online • Users need to be able to view at least 1 image of a vehicle • A full description of the vehicle available when the users wants more info • A call-back system that enters information into the database if a user has an enquiry • The users need to be able to search dependent on make, model, min price, max price as a minimum • The user can view results in pages to provide a user friendly search • The user can enter their card details online and be provided with confirmation that they have purchased the vehicle • A user has an account management page that holds their details and they can view details of their purchase • An administration page that allows admin to add, edit, amend records in the database Once I had an idea of exactly what the website needed to do I then created storyboards of how I want my website to look – this was the first stage of design and therefore I can work along the storyboard to ensure that it meets my design. 3 | P a g e BANNER NAVIGATION QUICK SEARCH MAIN CONTENT
  4. 4. Internet Databases EJ215008S SID: 0766299 Car Search Storyboard Once I had created my storyboards it then gave me an idea of exactly how I want my website to look – this makes it easier when creating your website as you have an initial design to work alongside. The reason I chose the design above is because I felt this was the most user friendly design which was not over complicated and would not turn a customer away. Once the user enters the website it’s clearly displayed what the website does and how it works with the navigation clearly displayed at the top of the page. I also decided to have a quick search on the left hand side which meant with the click of a button a user was automatically taken to a search page with all the following vehicles under the vehicle they had chosen. This meant that whatever page the customer was on they could simply find a vehicle straight away. The banner at the top of the page includes contact details; meaning whichever page the user is on they can always see how to contact the used car dealers. I also created my own logo for the website with a slogan that looks like the following: 4 | P a g e Car Information - Price - Location - Colour - Reg IMAGE Contact Information More Info?
  5. 5. Internet Databases EJ215008S SID: 0766299 My designs included a nice simple logo clearly highlighting the companies name – I then created a nice simple slogan which customers will remember and therefore hopefully come back to the website. I kept the colours nice and simplistic with bold colours and intend to keep the same colours throughout the whole website. The website I intend to create will have blue and red through the whole website which is consistent and clean looking. The design of the website plays a major part on the users experience and that is why I’ve chosen a simple design with a consistent colour scheme. Through the website I will also include links to car insurance or warranty for example so if the user requires something related to purchasing cars they can do it with a simple click of a button. I created my website with an intended resolution of 1024 x 768 however I will test my website with other resolutions to ensure that the design does not go out of proportion or links don’t work correctly on a different monitor resolution. I will also test my website on both Internet Explorer and Mozilla Firefox to ensure that it works on both – this is a requirement as a vast amount of internet users now have a variation of internet browsers and the website needs to meet this requirement. Car Search Process When a user is trying to find a vehicle they first need to visit the page ‘Car Search’ which is clearly displayed in the website navigation. Once the user is on this page I then need to ensure that the search is easy to use and not confusing. A screenshot of my car search page: 5 | P a g e
  6. 6. Internet Databases EJ215008S SID: 0766299 As you can see there is a nice layout of the search form which is laid across the page horizontally. Next to the search button you can see that there is a star showing require fields – each form that needs a require input has a red star next to it. Therefore the user must ensure they have selected a make, model, min price and max price to get results from their search. I have also created an information box showing how many results have been displayed therefore if your search is too broad it may bring up 200 results which the user can then shorten by including a specific mileage. I added colour, mileage, region and registration as optional search criteria as I felt that these may be required by certain users. If a user has a requirement for vehicles in their area they will obviously select their car make and model and then filter the search for cars in the ‘East’ Region. Once a user has searched vehicles they can then clearly see the City whereby the vehicles are located. Once a user has searched a vehicle they will then be provided with a list of the vehicles that are currently held on the database – the results will look similar to this: 6 | P a g e
  7. 7. Internet Databases EJ215008S SID: 0766299 As you can see there is a picture available of the car and information specific to that vehicle. If the user wishes they can click more info and will be taken to a page displaying further information such as the dealership where the vehicle is located. As you can see my results have returned 2 records – if I have more records the results will be sectioned into pages looking like the following: My results now have 1,2,3,4, 5 displayed across the bottom with an option to select NEXT. This means that there are a total of 5 pages of results and you can select a page you require. The following vehicles have been displayed in price ascending therefore if you wanted the more expensive vehicles of your search you could visit the 5th page. The paging offers a user friendly interface as it means that the user can clearly see which page they are on and they can either go to the next page or visit a particular page – once they are on page 2 for example they can also click PREV which will take them to the previous page. If a user wishes to select they the following vehicle they can click more info which will take them to a page which look like the following: 7 | P a g e
  8. 8. Internet Databases EJ215008S SID: 0766299 Firstly when a user has click more info for that vehicle they can easily go back to their search results with a click of the button. The top left hand corner says ‘Back to Search’ once this is clicked it goes back 1 page to search results they had previously visited. As I mentioned previously I have kept consistent colour with blue/red text for the price and telephone number. This is shown in a slightly larger font so that it stands out from the information displayed. As you can see the page displays further information than the users initial search – they can now see the vehicles dealer information and they are given the choice to buy the vehicle. The following page is what the user will be displayed with if they wish to purchase the vehicle. As you can see the vehicle details are displayed at the top and payment information can be entered. As before I have kept a navigation that allows the user to go back to the page they were on previously. I have kept the page design simple and user friendly and its clearly understandable 8 | P a g e
  9. 9. Internet Databases EJ215008S SID: 0766299 where the information needs to be entered – I also decided that when a user purchases a vehicle it automatically registers them as a Customer and therefore provides them with a login. Administration Panel As you can see my administration panel offers an easy to use interface with buttons that take the admin to the relevant page they require. Once the user has clicked a button for example ‘Customers’ they can see all their customers or they can search for a specific customer. Records can be deleted, amend or added as required. Having an easy to use administration panel is a must – purely because as I mentioned above not all of the staff using this may be computer literate therefore they need to be able to understand how the system does exactly what it should. Having large buttons showing clearly what they do means anyone can understand how they can view the page they require. I have also offered a button to logout which is clearly visible and will take that person away from the administration page. 9 | P a g e
  10. 10. Internet Databases EJ215008S SID: 0766299 List of Web Pages & Descriptions cmHome.html 10 | P a g e
  11. 11. Internet Databases EJ215008S SID: 0766299 This page is the homepage where the user first visits – as you can see it offers a welcome page that tells the customer what the website does and how they can do it. It’s straight to the point and with a good use of simple colours looks attractive. Once the user has visited cmHome.html they can then visit all pages listed in the navigation above. cmWarranty.html cmWarranty.html is an information page which offers the customer an outside link to warranty direct. When a user is purchasing a vehicle they may want warranty and this page meets the user’s 11 | P a g e
  12. 12. Internet Databases EJ215008S SID: 0766299 requirements. The user is also offered information and why it’s important to have warrant on a vehicle. Although this page does take the user away from their initial location it does allow a form of advertising which means that warranty direct would be able offer advertising in return or pay per click generating an income for Car Mania. cmAbout.html 12 | P a g e
  13. 13. Internet Databases EJ215008S SID: 0766299 As before cmAbout.html offers an information only page which displays how and when the company was launched and the services that it provides. It also has the companies address details and opening times which may be useful to the customer. cmContact.html 13 | P a g e
  14. 14. Internet Databases EJ215008S SID: 0766299 As you can see this page is dedicated to offering the customer information on how to contact Car Mania. The address details are shown alongside telephone number, fax number and email address. The email is used as a hyperlink and automatically opens up Outlook Express allowing the user to contact Car Mania via-email communications. The request a call-back button opens a pop-up window whereby the user can enter details of the enquiry they have and Car Mania will then call the customer back (this system is explained later on). Callback.php As you can see the popup offers the user to fill in a form which the user can then select a time they wish to be contacted. Once the user has clicked Submit the details will be entered into Car Mania’s database where they can then contact the customer. 14 | P a g e
  15. 15. Internet Databases EJ215008S SID: 0766299 If the user clicks ‘E-mail Us’ it will once again open outlook express and allow the user to contact Car Mania via e-mail. They can also click online vehicle search will take them to the vehicle search page to find a vehicle. If the user clicks ‘Directions to Car Mania’ it opens the following file: images/location.jpg This will look like the following to the user: 15 | P a g e
  16. 16. Internet Databases EJ215008S SID: 0766299 cmLogin.php As you can see this page is a .php page therefore it actually process information rather than just displaying it. This page has a login for both the Customer and an Administrator with a button to be clicked. If a customer enters their E-mail address and Password and clicks login it will process their login details and take them to a secured login page (this will be explained later). As above for the Administrator they can also enter their username and password and login to the administration panel which will be explained later. 16 | P a g e
  17. 17. Internet Databases EJ215008S SID: 0766299 cmSearchQuick.php The above page offers a quick search function for the users – this is displayed on the left hand side of the webpage and the above shows the results if a user clicks Alfa Romeo. This page also allows the user to then search other vehicles which will revert to cmSearch.php which I’ll explain below. 17 | P a g e
  18. 18. Internet Databases EJ215008S SID: 0766299 cmSearch.php This page is where the user can search for a vehicle dependent on their requirements. For example they make be looking for a Vauxhall Corsa – therefore they select a make ‘Vauxhall’ and select a model ‘Corsa’ they then need to set a min and max price. Once they have entered these details into the forms they can click search and the results will be displayed below. This would look something like this: 18 | P a g e
  19. 19. Internet Databases EJ215008S SID: 0766299 The user can then click More Info which takes them to the following page: Blank.php As you can see this page displays the vehicle details in further details and offers the customer to enter their information if they wish to get someone to call them back. The user also has ‘Back to Search’ available which will take them back to their initial search page. The user from here can then click ‘Buy Now!’ which will take them to the page where they can purchase the vehicle. 19 | P a g e
  20. 20. Internet Databases EJ215008S SID: 0766299 Buy.php This page displays the vehicle details in a professional manner and the amount that is required to be paid by the customer. Underneath the vehicle details is the payment information whereby if the user enters all this information they have completed the purchase of the vehicle. If the user wishes to not proceed they can simply click ‘Back to Car’ which will take them back a page. However, if they wish to go ahead and purchase the vehicle they fill in all the information and click the submit button. When they click submit they get the following message: This was a requirement in my specification therefore if the user clicks ok their details will be submitted – however they can click cancel and the transaction won’t go ahead. 20 | P a g e
  21. 21. Internet Databases EJ215008S SID: 0766299 buyConfirm.php This page is the confirmation of the customer purchase and thanks them for buying with Car Mania. As you can see it details a list of the information that is required for the user to bring along with them and how long the vehicle will take until it’s ready. The user is told that they are now able to login with their email address and password. The page also includes links to insurance and warranty to help the user with purchasing their vehicle. I will now show you the Customer Login Administration Panel. 21 | P a g e
  22. 22. Internet Databases EJ215008S SID: 0766299 cmLoginCust.php The above page shows the user’s personal details that they used when they purchased their vehicle. As you can see their personal details are first displayed with their account details used and the vehicle identification number. The reason for including this is because if they wish to query the vehicle they have purchased they can reference it with the identification number. 22 | P a g e
  23. 23. Internet Databases EJ215008S SID: 0766299 The user can then choose Order History which shows their purchased vehicle: cmLoginCust2.php cmLogin2.php This page is the administration page which allows the staff of Car Mania to make amendments to their system in an easy to use interface. The first selection we have is Customers which will open cmLoginCustomer.php 23 | P a g e
  24. 24. Internet Databases EJ215008S SID: 0766299 The above page allows the user to search for a customer based upon their e-mail address. The results would be displayed as below if we search for pauldawson@ntlworld.com: 24 | P a g e
  25. 25. Internet Databases EJ215008S SID: 0766299 cmLoginCustomer2.php 25 | P a g e
  26. 26. Internet Databases EJ215008S SID: 0766299 This is the page where the user can add or delete a current customer. They can simply add a customer by filling in the details of the form on the left hand side. They can also simply delete a customer by entering their e-mail address as this is a unique way of identifying a customer. Once a user has clicked submit they get confirmation the process has been completed. cmLoginCustomer3.php 26 | P a g e
  27. 27. Internet Databases EJ215008S SID: 0766299 This page allows the user to edit a customer’s personal or bank information which is currently held on the database. This is done by filling in all fields on the form and clicking amends which will update the records as required. The e-mail address is once again a unique identifier as each customer’s email address will be unique to that individual. cmLoginCars.php 27 | P a g e
  28. 28. Internet Databases EJ215008S SID: 0766299 This page allows the admin staff to view cars that currently exist on their database by selecting a make and clicking ‘View’. The results are displayed in a paged table allowing the user to browse through the selected vehicles as they require. cmLoginCars2.php 28 | P a g e
  29. 29. Internet Databases EJ215008S SID: 0766299 The Add/Delete cars page looks like the following and gives the user the ability to simply add a vehicle or delete a vehicle with a user friendly interface. A vehicle can be added by completing all details on the form and then clicking add – a confirmation will be displayed providing the process has worked. As with deleting a car the user simply types the car number and clicks ‘delete’ this will then confirm the car has been deleted. cmLoginCars3.php 29 | P a g e
  30. 30. Internet Databases EJ215008S SID: 0766299 The following page allows the administrator to be able to edit vehicles information – they firstly enter the car number for the field that needs amending and then fill in all of the fields and the record will be updated as required. cmLoginEmployee.php 30 | P a g e
  31. 31. Internet Databases EJ215008S SID: 0766299 As you can see the following page allows the admin to view their current employees and they can find a particular employee by searching first name and surname. I thought this would be a useful feature if a manager needed to contact a member of staff for example they could bring up their contact details and ring them or even e-mail them as per their requirements. cmLoginEmployee2.php 31 | P a g e
  32. 32. Internet Databases EJ215008S SID: 0766299 The above page is used to simply add or delete an employee on the database. If a new employee joins the company they can type in all their details on the page and then add them to the database. They can also simply delete an employee as this is unique to each employee and will remove them from the database. 32 | P a g e
  33. 33. Internet Databases EJ215008S SID: 0766299 cmLoginEmployee3.php The above page is used for the admin to edit an employee’s information – this can be useful if a record needs updating for example an employee changing their telephone number. cmLoginCallback.php 33 | P a g e
  34. 34. Internet Databases EJ215008S SID: 0766299 The above webpage corresponds with what I had mentioned earlier regarding customers/users being able to enter details into an enquiry form to request a call-back. These details are then passed to a call back database and the page above displays that information. Once a call-back has been made the user can then simply enter the call-back id and press delete and it will update the database. I felt that this was a very simple and easy to user interface without making things complicated and the details are laid out in a user friendly manner. 34 | P a g e
  35. 35. Internet Databases EJ215008S SID: 0766299 Website Structure 35 | P a g e
  36. 36. Internet Databases EJ215008S SID: 0766299 Screenshots of Website 36 | P a g e
  37. 37. Internet Databases EJ215008S SID: 0766299 37 | P a g e
  38. 38. Internet Databases EJ215008S SID: 0766299 38 | P a g e
  39. 39. Internet Databases EJ215008S SID: 0766299 39 | P a g e
  40. 40. Internet Databases EJ215008S SID: 0766299 40 | P a g e
  41. 41. Internet Databases EJ215008S SID: 0766299 41 | P a g e
  42. 42. Internet Databases EJ215008S SID: 0766299 42 | P a g e
  43. 43. Internet Databases EJ215008S SID: 0766299 43 | P a g e
  44. 44. Internet Databases EJ215008S SID: 0766299 44 | P a g e
  45. 45. Internet Databases EJ215008S SID: 0766299 45 | P a g e
  46. 46. Internet Databases EJ215008S SID: 0766299 46 | P a g e
  47. 47. Internet Databases EJ215008S SID: 0766299 47 | P a g e
  48. 48. Internet Databases EJ215008S SID: 0766299 48 | P a g e
  49. 49. Internet Databases EJ215008S SID: 0766299 49 | P a g e
  50. 50. Internet Databases EJ215008S SID: 0766299 50 | P a g e
  51. 51. Internet Databases EJ215008S SID: 0766299 51 | P a g e
  52. 52. Internet Databases EJ215008S SID: 0766299 52 | P a g e
  53. 53. Internet Databases EJ215008S SID: 0766299 53 | P a g e
  54. 54. Internet Databases EJ215008S SID: 0766299 54 | P a g e
  55. 55. Internet Databases EJ215008S SID: 0766299 Data Dictionaries’ Data Dictionary Table Name: Purchases Table Description: Holds the customer details and purchase history Entity Description Data Type Length Extra Validation Primary/Foreign Key purchaserID Table Unique ID int 5 Auto Increment Only a 5 digit number can be entered, each time a new records added the previous purchaserID increases by 1 Primary Key Title Customer Title char 5 Maximum of 5 characters, letters only valid. First_name Customer First Name char 15 Maximum of 15 characters, letters only valid Surname Customer Surname char 15 Maximum of 15 characters, letters only valid DOB Customers Date of Birth date Data only accepted in Date format only (YYYYMMDD) Telephone Customers contact telephone number varchar 20 Maximum of 20 characters, letters and numbers accepted Address1 1st line of address varchar 30 Maximum of 30 characters, letters and numbers both accepted Address2 2nd line of address varchar 30 Maximum of 30 characters, letters and numbers both accepted City City where customer lives char 15 Maximum of 15 characters, letters only valid Postcode Customer Postcode varchar 8 Maximum of 8 characters, letters and numbers accepted 55 | P a g e
  56. 56. Internet Databases EJ215008S SID: 0766299 Email Customer e-mail address varchar 30 Maximum of 30 characters, letters and numbers both accepted Password Customers account password varchar 12 Maximum of 12 characters, letters and numbers both accepted Card_type Customer credit card type char 8 Maximum of 8 characters, letters only valid Card_no Customer credit card number bigint 30 Maximum of 30 characters, numbers only valid Card_expiry Customer card expiry date varchar 5 Maximum of 5 characters, letters and numbers both accepted carNo The unique carNo that the customer has purchased int 5 Maximum 5 characters, numbers only valid Foreign Key 56 | P a g e
  57. 57. Internet Databases EJ215008S SID: 0766299 Data Dictionary Table Name: Employees Table Description: Holds the details of all employees/staff Entity Description Data Type Length Extra Validation Primary/Foreign Key Email Employees Email Address varchar 26 Email is unique to employee therefore a primary key - maximum 26 characters allowed numbers or letters Primary Key Title Employees Title char 4 Maximum of 4 characters, letters only valid First_name Employees First Name char 12 Maximum of 12 characters, letters only valid Surname Employees Surname char 12 Maximum of 12 characters, letters only valid DOB Employees DOB date Date format entry only (YYYYMMDD) Position Position within the business char 16 Maximum of 16 characters, letters only valid Address1 First line of address varchar 16 Maximum of 16 characters, letters and numbers both valid Address2 Second line of address varchar 16 Maximum of 16 characters, letters and numbers both valid City Employees City char 12 Maximum of 12 characters, letters only valid Postcode Employees Postcode varchar 8 maximum of 8 characters, letters and numbers both valid Home_number Home contact telephone number int 15 Maximum of 15 characters, numbers only valid Mob_number Mobile contact telephone number int 15 Maximum of 15 characters, numbers only valid 57 | P a g e
  58. 58. Internet Databases EJ215008S SID: 0766299 Data Dictionary Table Name: Admin Table Description: Administrators information stored in this table Entity Description Data Type Length Extra Validation Primary/Foreign Key AdminID Administrator Unique Identifier int 5 Auto Increment Maximum 5 character numbers only - each record is incremented by 1 from the previous record Primary Key Name Admin Name varchar 15 Maximum of 15 characters, numbers and letters both valid Password Admin Password varchar 15 Maximum of 15 characters, numbers and letters both valid 58 | P a g e
  59. 59. Internet Databases EJ215008S SID: 0766299 Data Dictionary Table Name: Callback Table Description: Details stored for callback requests from customers Entity Description Data Type Length Extra Validation Primary/Foreign Key callbackID Callback Unique Identifier tinyint 4 Auto Incrememen t Maximum of 4 numbers only - callbackID is unique therefore a Primary Key Primary Key Title Customers Title char 4 Maximum of 4 characters, letters only valid First_name Customers First Name char 12 Maximum of 12 characters, letters only valid Surname Customers Surname char 12 Maximum of 12 characters, letters only valid Telephone Customers contact telephone number varchar 13 Maximum of 13 characters, letters and numbers both valid Contact Time to be contacted varchar 20 Maximum of 20 characters, letters and numbers both valid Enquiry What the callback request was regarding varchar 40 Maximum of 40 characters, letters and numbers both valid Data Dictionary 59 | P a g e
  60. 60. Internet Databases EJ215008S SID: 0766299 Table Name: Cars Table Description: Stores all the records for the cars and there information Entity Description Data Type Length Extra Validation Primary/Foreign Key carNo Unique Identifier for each car int 11 Auto Increment Maximum 11 characters, numbers only valid Primary Key make Car Make varchar 10 Maximum of 10 characters, numbers and letters both valid model Car Model varchar 15 Maximum of 15 characters, numbers and letters both valid Reg Car Registration Letter char 1 1 character only valid colour Cars Colour varchar 10 Maximum of 10 characters, numbers and letters both valid miles Car Mileage varchar 6 Maximum of 6 characters, numbers and letters both valid price Car Price int 11 Maximum of 11 characters, numbers only valid dealer Dealers Location varchar 50 Maximum of 50 characters, numbers and letters both valid town Location of vehicle varchar 20 Maximum of 20 characters, numbers and letters both valid telephone Contact telephone number varchar 15 Maximum of 15 characters, numbers and letters both valid description Car Description varchar 30 Maximum of 30 characters, numbers and letters both valid region Region of cars location varchar 10 Maximum of 10 characters, numbers and letters both valid picture Picture directory varchar 50 Maximum of 50 characters, numbers and letters both valid pictureL Large picture directory varchar 50 Maximum of 50 characters, numbers and letters both valid 60 | P a g e
  61. 61. Internet Databases EJ215008S SID: 0766299 Process Descriptions 61 | P a g e
  62. 62. Internet Databases EJ215008S SID: 0766299 62 | P a g e
  63. 63. Internet Databases EJ215008S SID: 0766299 63 | P a g e
  64. 64. Internet Databases EJ215008S SID: 0766299 64 | P a g e
  65. 65. Internet Databases EJ215008S SID: 0766299 65 | P a g e
  66. 66. Internet Databases EJ215008S SID: 0766299 Sample Code JavaScript for random image generator <script language="JavaScript"> var theImages = new Array() theImages[0] = 'images/topLeftLogo.jpg' theImages[1] = 'images/topLeftLogo2.jpg' theImages[2] = 'images/topLeftLogo3.jpg' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } </script> 66 | P a g e
  67. 67. Internet Databases EJ215008S SID: 0766299 Dynamic Drop Down JavaScript <SCRIPT language=JavaScript> function reload(form) { var val=form.cat.options[form.cat.options.selectedIndex].value; self.location='cmSearch.php?cat=' + val ; } </script> Dynamic Drop Down PHP <?php $dbservertype='mysql'; $servername='localhost'; $dbusername='root'; $dbpassword=''; $dbname='cars'; connecttodb($servername,$dbname,$dbusername,$dbpassword); function connecttodb($servername,$dbname,$dbuser,$dbpassword) { global $link; $link=mysql_connect ("$servername","$dbuser","$dbpassword"); if(!$link){die("Could not connect to MySQL");} mysql_select_db("$dbname",$link) or die ("could not open db".mysql_error()); } @$cat=$_GET['cat']; 67 | P a g e
  68. 68. Internet Databases EJ215008S SID: 0766299 $quer2=mysql_query("SELECT DISTINCT make FROM cars ORDER BY make"); if(isset($cat) and strlen($cat) > 0){ $quer=mysql_query("SELECT DISTINCT model FROM cars where make='$cat' order by model"); }else{$quer=mysql_query("SELECT DISTINCT model FROM cars order by model"); } echo "<form method=get name=f1 action='cmSearch.php'>"; echo "<select name='cat' onchange="reload(this.form)"><option value=''>Select Make &nbsp</option>"; while($noticia2 = mysql_fetch_array($quer2)) { if($noticia2['make']==@$cat){echo "<option selected value='$noticia2[make]'>$noticia2[make]</option>"."<BR>";} else{echo "<option value='$noticia2[make]'>$noticia2[make]</option>";} } echo "</select><font color=red size=2>*</font>"; echo "<select name='subcat'><option value=''>Select Model &nbsp </option>"; while($noticia = mysql_fetch_array($quer)) { echo "<option value='$noticia[model]'>$noticia[model]</option>"; } echo "</select><font color=red size=2>*</font>"; ?> 68 | P a g e
  69. 69. Internet Databases EJ215008S SID: 0766299 PHP Pagination for Search results <?PHP $searchmake = $_GET['cat']; $searchmodel = $_GET['subcat']; $minprice = $_GET['searchpricemin']; $maxprice = $_GET['searchpricemax']; $colour = $_GET['searchColour']; $mileage = $_GET['searchMileage']; $region = $_GET['searchRegion']; $reg = $_GET['searchReg']; $page_name="cmSearch.php"; @$column_name=$_GET['column_name']; $start=$_GET['start']; if(!($start > 0)) { $start = 0; } $eu = ($start - 0); $limit = 6; $this1 = $eu + $limit; $back = $eu - $limit; $next = $eu + $limit; 69 | P a g e
  70. 70. Internet Databases EJ215008S SID: 0766299 $query2=" SELECT * FROM cars WHERE make LIKE '$searchmake' AND model LIKE '$searchmodel' AND Reg LIKE '$reg' AND price BETWEEN '$minprice' AND '$maxprice' AND colour LIKE '$colour' AND miles < '$mileage' AND region LIKE '$region'"; $result2=mysql_query($query2); echo mysql_error(); $nume=mysql_num_rows($result2); $query=" SELECT * FROM cars WHERE make LIKE '$searchmake' AND model LIKE '$searchmodel' AND Reg LIKE '$reg' AND price BETWEEN '$minprice' AND '$maxprice' AND colour LIKE '$colour' AND miles < '$mileage' AND region LIKE '$region' ORDER BY price ASC"; if(isset($column_name) and strlen($column_name)>0){ $query = $query . " order by $column_name"; } $query = $query. " limit $eu, $limit "; $result=mysql_query($query); echo mysql_error(); echo "Total number of Records Returned = $nume"; echo "<table border=0 width=100%>"; while($noticia = mysql_fetch_array($result)) { if($bgcolor=='#ffffff'){$bgcolor='#ffffff';} else{$bgcolor='#ffffff';} echo "<tr >"; echo "<td align=left height=2px colspan=5 BGCOLOR=#F8F8F8 id='title'>&nbsp;<font face='Verdana' color='#A00000' size='2'> <center><b><u>$searchmake $searchmodel</center></b></u></font></td>"; echo "<tr >"; 70 | P a g e
  71. 71. Internet Databases EJ215008S SID: 0766299 echo "<td align=left rowspan=5 bgcolor=$bgcolor id='title'>&nbsp;<font face='Verdana' size='2'><img src='$noticia[picture]'</font></td>"; echo "<tr >"; echo "<td align=left bgcolor=$bgcolor id='title'>&nbsp;<font face='Verdana' size='2'>$noticia[Reg] reg - $noticia[colour] - $noticia[description] - $noticia[miles] miles</font></td>"; echo "<tr >"; echo "<td align=left bgcolor=$bgcolor id='title'>&nbsp;<font face='Verdana' size='2'>Location: $noticia[town] </font></td>"; echo "<tr >"; echo "<td align=left colspan=3 bgcolor=$bgcolor id='title'>&nbsp;<font face='Verdana' color='red' size='3'><u>Price:£$noticia[price]</u></font></td>"; echo "<tr >"; echo "<td align=right bgcolor=$bgcolor id='title'>&nbsp;<font face='Verdana' size='2'><a href='blank.php?carNo=".$noticia['carNo']."'>More Info???</a></font></td>"; echo "</tr>"; } echo "</table>"; echo "<table align = 'center' width='50%'><tr><td align='left' width='30%'>"; if($back >=0) { print "<a href='$page_name? start=$back&column_name=$column_name&cat=$searchmake&subcat=$searchmodel&searchprice min=$minprice&searchpricemax=$maxprice&searchColour=$colour&searchMileage=$mileage&sear chRegion=$region&searchReg=$reg'><font face='Verdana' size='2'>PREV</font></a>"; } echo "</td><td align=center width='30%'>"; $i=0; $l=1; for($i=0;$i < $nume;$i=$i+$limit){ 71 | P a g e
  72. 72. Internet Databases EJ215008S SID: 0766299 if($i <> $eu){ echo "<a href='$page_name? start=$i&column_name=$column_name&cat=$searchmake&subcat=$searchmodel&searchpricemin =$minprice&searchpricemax=$maxprice&searchColour=$colour&searchMileage=$mileage&searchR egion=$region&searchReg=$reg'><font face='Verdana' size='2'>$l</font></a> "; } else { echo "<font face='Verdana' size='4' color=red>$l</font>";} $l=$l+1; } echo "</td><td align='right' width='30%'>"; if($this1 < $nume) { print "<a href='$page_name? start=$next&column_name=$column_name&cat=$searchmake&subcat=$searchmodel&searchprice min=$minprice&searchpricemax=$maxprice&searchColour=$colour&searchMileage=$mileage&sear chRegion=$region&searchReg=$reg'><font face='Verdana' size='2'>NEXT</font></a>";} echo "</td></tr></table>"; ?> Callback PHP which enters information into database <?php 72 | P a g e
  73. 73. Internet Databases EJ215008S SID: 0766299 if($_POST['submit']) //If submit is hit { mysql_connect("localhost","root",""); mysql_select_db("cars"); $title = $_POST['Title']; $first_name = $_POST['First_name']; $surname = $_POST['Surname']; $telephone = $_POST['Telephone']; $contact = $_POST['Contact']; $adlinfo = $_POST['Adlinfo']; if($first_name==''){ echo"Please enter the Firstname<br>"; } if($surname==''){ echo"Please enter the Surname<br>"; } if($telephone==''){ echo"Please enter the DOB<br>"; } else{ $result=MYSQL_QUERY("INSERT INTO callback (Title,First_name,Surname,Telephone,Contact,Enquiry)". "VALUES ('$title', '$first_name', '$surname', '$telephone', '$contact', '$adlinfo')"); echo " Enquiry submitted succesfully!"; 73 | P a g e
  74. 74. Internet Databases EJ215008S SID: 0766299 } } ?> Logon PHP to check username and password match details held in database <?php session_start(); $host="localhost"; // Host name $username="root"; // Mysql username $password=""; // Mysql password $db_name="cars"; // Database name $tbl_name="admin"; // Table name mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select DB"); $_SESSION['name'] = $_POST['name']; $myusername = $_SESSION['name']; $_SESSION['password'] = $_POST['password']; $mypassword = $_SESSION['password']; $myusername = stripslashes($myusername); 74 | P a g e
  75. 75. Internet Databases EJ215008S SID: 0766299 $mypassword = stripslashes($mypassword); $myusername = mysql_real_escape_string($myusername); $mypassword = mysql_real_escape_string($mypassword); $sql="SELECT * FROM $tbl_name WHERE name='$myusername' and password='$mypassword'"; $result=mysql_query($sql); $count=mysql_num_rows($result); if($count==1){ ob_start(); header("Location: cmLogin2.php"); ob_flush(); } else { header("Location: login_failed.html"); } exit; ?> Logout PHP code <? 75 | P a g e
  76. 76. Internet Databases EJ215008S SID: 0766299 session_start(); session_destroy(); header("Location: cmHome.html"); ?> W3C CSS Validation 76 | P a g e
  77. 77. Internet Databases EJ215008S SID: 0766299 To check that my website was W3C compliant I uploaded my styles.css to http://jigsaw.w3.org/css- validator/ The result of my test were as follows: Styles.css body { background-color : white; } h4 { color : #1313ad; font-family : verdana; } p { font-family : verdana; } a { text-decoration : none; } a:hover { font-weight : bold; } li { list-style : square inside; color : blue; } 77 | P a g e
  78. 78. Internet Databases EJ215008S SID: 0766299 .blacktext { color : black; font-family : verdana; } div#headerText { font-size : 50px; } div#headerText2 { font-size : 15px; } div#header { background : url(images/header.jpg) no-repeat top; } div#topLine { background : url(images/topLine.jpg) no-repeat top; } div#lowerLine { background : url(images/lowerLine.jpg) no-repeat top; } div#leftMenu { background : url(images/leftMenu1.jpg) no-repeat top; } div#leftMenu2 { background : url(images/leftMenu2.jpg) no-repeat top; } div#rightMenu { background : url(images/rightMenu.jpg) no-repeat top; } div#rightMenu2 { background : url(images/rightMenu2.jpg) no-repeat top; } div#rightMenu3 { background : url(images/rightMenu3.jpg) no-repeat top; } div#rightMenu4 { background : url(images/rightMenu4.jpg) no-repeat top; } div#rightMenuS { background : url(images/rightMenuS.jpg) no-repeat top; } div#topLeftLogo { background : #ffffff; } div#quicksearch { background : url(images/quicksearch.jpg) no-repeat top; } #banner { display : block; } 78 | P a g e
  79. 79. Internet Databases EJ215008S SID: 0766299 Appendices Included at the back of my documentation you will find my notes that have been taking for the duration of my studies – each week I have continued to note down things in lesson and pieces of code I had found useful. All of my notes had been written in lectures and the code has been printed when I’ve found working examples of what I had been looking for. 79 | P a g e

×