Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

DissertationGS

51 visualizaciones

Publicado el

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

DissertationGS

  1. 1. Abstract 1 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Abstract The following report outlines the development process taken to create and deliver an image management system, covering initial scope, requirements and risks, research conducted, system design, product implementation, testing, evaluation and concludes with further recommendations. The appendices cover more in depth further reading on subject areas.
  2. 2. Table of Contents 2 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Table of Contents Abstract 1 Table of Contents 2 Table of Figures 7 Table of Tables 8 Document Conventions 9 Introduction 10 1 - System Analysis 11 1.1 Background 11 1.2 Stakeholders 11 1.3 Scope 11 1.3.1 Justification 12 1.3.2 Aims & Objectives 12 1.3.3 Project Deliverables 12 1.3.4 Communication Strategy 12 1.3.5 Resources 12 1.3.6 Out of scope 13 1.4 Requirements 13 1.4.1 Must Have 13 1.4.2 Should have 14 1.4.3 Could Have 14 1.4.4 Won’t Have 14 1.5 Life cycle methodologies 14
  3. 3. Table of Contents 3 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 1.6 Risks 15 1.6.1 Project Risks 15 1.6.2 Data Protection Act (DPA) 1998 15 1.6.3 Measures to control / reduce highlighted risks 16 1.7 Scheduling of works 17 2 – Research 19 2.1 Competitors & Clients Technology 19 2.1.1 Lobsterpictures.tv 19 2.1.2 Site-eye.co.uk 20 2.1.3 ConstructionPhotography.com 21 2.1.4 Current Website Branding 22 2.2 Literature Review 22 2.2.1 Linux Ubuntu Apache 2 MySQL PHP (L.A.M.P.), phpMyAdmin vs C# and .NET MVC Framework 22 2.2.2 VirtualBox 23 2.2.3 jQuery & AJAX 23 2.2.4 PHP Hypertext Pre-processor (PHP) 24 2.2.5 Syntactically Awesome Style Sheets (SASS) CSS Pre-processor 24 2.2.6 GitHub Version control 24 2.2.7 Crontab 25 2.2.8 Normalize.css 25 3 – System Design 26 3.1 System Modelling 26 3.1.1 Entity Relationship Diagram (ERD) 26 3.1.2 Data Flow Diagrams 27 3.1.3 Use Cases 28 3.1.4 Sequence Diagrams 31
  4. 4. Table of Contents 4 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 3.2 Product Design 33 3.2.1 Network Diagram of proposed solution 33 3.2.2 Virtual Box Development and Test server 34 3.2.3 Host only network – Virtual Box 35 3.2.4 Cron & php script to update MySQL records 36 3.2.5 Scrape.php 38 3.2.6 Wireframes 39 3.2.4 jQuery and AJAX 42 4 - Testing 43 4.1 Alpha Test Results 43 4.1.1 Accessing the server 43 5.1.2 Data.file error in records 46 4.1.3 Disparate Server versions 50 4.1.4 DateTime and button inputs 50 4.2 Usability (beta) Test Results 51 4.2.1 Instructions to tester 51 4.2.2 Schedule 53 4.2.4 Free text Comments 57 4.3 Client UAT Results 61 4.4 Security Test Results 70 4.4.1 HeartBleed Test Results 70 4.4.2 Nessus Penetration Testing 71 4.5 Test Evaluation 73 5 - Product Implementation 75 5.1 Infrastructure setup 75 5.1.1 Live Server Implementation 75
  5. 5. Table of Contents 5 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 5.1.1 DYNDNS 75 5.2 Post Infrastructure considerations 76 5.2.1 Archiving old data 76 6 – Evaluation 80 6.1 Project 80 6.2 Product 80 6.2.1 Interface 80 6.2.1.1 Date selector 81 6.2.1.2 Camera selector 81 6.3 Personal 81 7 - Conclusion 83 7.1 Further Development 83 7.1.1 BoilerPlate HTML5 83 7.1.1.1 Modernizr 83 7.1.1.2 Normalise.css 84 7.1.2 Bootstrap for mobile 84 7.1.3 Virtual Machine Server rather than physical hardware 84 8 - Acknowledgements 86 9 - References 87 10 - Appendices 91 10.1 Original wireframes (concept) 91 10.2 Code 93 10.2.1 cfarc.js 93 10.2.2 cfarc.scss 95
  6. 6. 6 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 10.2.3 CFARC.sql 105 10.2.4 add.php 106 10.2.5 admin.php 108 10.2.6 connect.php 109 10.2.7 fetch_cam.php 109 10.2.8 fetch_images.php (DEPRECATED) 110 10.2.9 fetch_one_image.php 110 10.2.10 fetch_times.php 111 10.2.11 fetchDateRange.php 111 10.2.12 image.php (DEPRECATED) 112 10.2.13 images.php (DEPRECATED) 112 10.2.14 index.php 112 10.2.15 interface.html.php 112 10.2.16 login.php 113 10.2.17 logout.php 115 10.2.18 members.php 116 10.2.19 privacy.html 116 10.2.20 scrape.php 117 10.2.21 TODO.txt 119 10.3 Concept Poster 121 10.4 Test Plan 122 10.4.3 Usability Testing instructions 122 10.4.3 Usability Testing schedule 124 10.4.3 Usability Testing results 128 10.4.4 Quantified test results 141
  7. 7. Table of Figures 7 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Table of Figures Figure 1 - Google Calendar, average week. ....................................................................................................17 Figure 2 - Google calendar, average month....................................................................................................17 Figure 3 - Lobster Pictures..............................................................................................................................19 Figure 4 - Site Eye Films .................................................................................................................................20 Figure 5 - Construction Photography..............................................................................................................21 Figure 6 - Construct Films Website.................................................................................................................22 Figure 7 - Installing phpMyAdmin .................................................................................................................23 Figure 8 - Implementing sass.........................................................................................................................24 Figure 9 - GitHub version history ...................................................................................................................25 Figure 10 - Initial ERD for design purposes.....................................................................................................26 Figure 11 - Screen shot of actual live ERD from phpMyAdmin .......................................................................27 Figure 12 – Initial Dataflow diagram for design purposes ..............................................................................27 Figure 13 - Updated Data Flow.......................................................................................................................28 Figure 14 – Initial Use Case Diagrams for design purposes.............................................................................29 Figure 15 - Updated Use Cases.......................................................................................................................30 Figure 16 – Administrating customers............................................................................................................31 Figure 17 – Initial Customer Sequence diagram for design purposes .............................................................31 Figure 18 - Updated Customer Sequence .......................................................................................................32 Figure 19 - Network Diagram .........................................................................................................................33 Figure 20 - VirtualBox topography .................................................................................................................35 Figure 21 - Virtual Machine Host only adapter...............................................................................................36 Figure 22 - Crontab schedule .........................................................................................................................37 Figure 23 - script to harvest file locations and create SQL records .................................................................38 Figure 24 - Login screen .................................................................................................................................39 Figure 25 - Main Interface..............................................................................................................................40 Figure 26 - Selection of date ..........................................................................................................................40 Figure 27 - Image displayed (full screen)........................................................................................................41 Figure 28 - Image displayed (1:1 ratio)...........................................................................................................41 Figure 29 - External Trace Route ....................................................................................................................43 Figure 30 - External WAN address..................................................................................................................45 Figure 31 - Editing the firewall .......................................................................................................................45 Figure 32 - Image list......................................................................................................................................46 Figure 33 - Live SQL results ............................................................................................................................46 Figure 34 - Live data-file results .....................................................................................................................47 Figure 35 - Test Box SQL records ....................................................................................................................48 Figure 36 - Test Box data.file results ..............................................................................................................48 Figure 37 - data.file erroneous records ..........................................................................................................49 Figure 38 - Old IE UI conversation with client.................................................................................................51 Figure 39 - Client UAT results (A) ...................................................................................................................65 Figure 40 - Client UAT results (B)....................................................................................................................69 Figure 41 - Port 443 opened on firewall .........................................................................................................70 Figure 42 - Heartbleed test ............................................................................................................................71 Figure 43 - First pen test running ...................................................................................................................72 Figure 44 - Login wireframe (concept)............................................................................................................91 Figure 45 - Main interface wireframe (concept).............................................................................................92
  8. 8. Table of Tables 8 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Table of Tables Table 1 - Hard Disk Info & Usage....................................................................................................................12 Table 2 – Memory Info...................................................................................................................................13 Table 3 - OS Info ............................................................................................................................................13 Table 4 - Processor Info..................................................................................................................................13 Table 5 - BT traceroute results .......................................................................................................................44 Table 6 - UAT questionnaire................................................................................. Error! Bookmark not defined. Table 7 - Quantified beta test results.............................................................................................................57 Table 8 - Estimation of minimum storage requirements ................................................................................77 Table 9 - Estimation of maximum storage requirements................................................................................78 Table 10- Estimation of client anticipated storage requirements...................................................................79 Table 11 - Quantifying test results ...............................................................................................................141
  9. 9. Document Conventions 9 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Document Conventions This document has the following conventions: Standards Headings are in Courier New and various shades of blue in various point size to imply weight of title Standard text is in Arial at size 11.5 point. Code is indented, in Courier New font at 10 point and highlighted in grey ‘Tester comments are Italicised Tahoma 12 point font’ (With the Section of schedule in braces) Terms Where the term ‘Client’ is used it refers to Anthony Elliott, the main stakeholder in the project and owner of Construct Films Ltd. ‘Customer’ or ‘User’ refers to customers of the above client who are expected to be the main users of the system. ‘Project Supervisor’ or ‘Supervisor’ refers to Dr. Rupert Ward of The University of Huddersfield. ‘Testers’ refer to the group of ten product beta testers. ‘Developer’ or ‘Author’ refers to Graham Snowdon. ‘System’, ‘Product’, ‘Server’ and ‘Application’ all refer to the web interface being built for the client by the developer.
  10. 10. Introduction 10 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Introduction Although all attempts have been made to accurately & fully reference the below text, errors are, in all work, inevitable. The author accepts full responsibility for deficiencies in either the parts or the whole. “Construct Films is a UK-based production house for time-lapse photography. Combined with live action filming such as interviews and milestones, and motion graphics such as statistics and architectural concepts, they can tell the story of your project to captivate your clients, employees or the public via social media.” (Elliott, 2013) Construct Films Ltd required a secure online portal which provides access to images taken on customer construction sites, enabling customers to select a date, time and camera (for those sites with multiple cameras) and see the image that was taken within that time frame. In addition the system should synchronise from the existing image server and then populate a database of image files to present to the customers.
  11. 11. - System Analysis 11 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 1 - System Analysis System analysis is undertaken to establish what criteria are required in the product and to steer the project in a logical path, ensuring all stakeholders’ expectations are addressed. 1.1 Background In July 2013 Construct Films approached the author with a request as outlined above. A requirements analysis was conducted and work began on a project to provide the said solution. The client had knowledge of other systems they had used when working for other companies, these were used as a basic framework for the concept of this system. The client knew that the developer had six years of vocational experience supporting the construction industry in the IT Department of Connaught PLC and could apply this knowledge to the project. 1.2 Stakeholders Stakeholders in the project are from two main different bodies. Construct Films Anthony Elliott - The main stakeholder, the client who’s interests lie in the completed product. The University of Huddersfield – Doctor. Rupert Ward, the project’s supervisor. Professor Grigorios Antoniou, the projects examiner. 1.3 Scope What items are within the scope of the project are outlined in the requirements analysis as shown below. Everything else can be classed as out of scope but may be considered in future versions of the product.
  12. 12. - System Analysis 12 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 1.3.1 Justification The justification for this project is in the requirements of the client. The client has sponsored the project and has undertaken research into available off the shelf products but does not feel they address their specific requirements. 1.3.2 Aims & Objectives Measuring Success - (Fortune & Peters, 2005) state that a successful system can be measured by “meeting user requirements, achieving its purpose, meeting timescales and budgets, making the users happy and meeting quality standards” with these qualifiers in mind there are two aims of the project. 1 Create a web interface for customers to access images of their construction site. 2 Build the supporting hardware infrastructure to facilitate the access to images. 1.3.3 Project Deliverables The project deliverable consists of server hardware to support an image retrieval system and said image retrieval application. 1.3.4 Communication Strategy Communication is mostly via electronic mail, with weekly face to face meetings and some supporting Skype meetings. 1.3.5 Resources An IBM Clone desktop computer is being used as a prototyping server, with the following specifications: Device Boot Start End Blocks Id System /dev/sda1 * 2048 486301695 243149824 83 Linux /dev/sda2 486303742 488396799 1046529 5 Extended /dev/sda5 486303744 488396799 1046528 82 Linux swap / Solaris Table 1 - Hard Disk Info & Usage total used free shared buffers cached Mem: 1002 181 821 0 16 89 -/+ buffers/cache: 75 927 Swap: 1021 0 1021
  13. 13. - System Analysis 13 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Table 2 – Memory Info Distributor ID: Ubuntu Description: Ubuntu 12.04.4 LTS Release: 12.04 Codename: Precise Table 3 - OS Info vendor_id AuthenticAMD cpu family 15 model 12 model name AMD Athlon(tm) 64 Processor 3400+ cpu MHz 1000.000 cache size 512 KB address sizes 40 bits physical, 48 bits virtual power management ts fid vid ttp Table 4 - Processor Info a 10/100 (CAT5 Ethernet) network interface card is fitted using TCP/IP. Other resources are human, the developer and the testers. 1.3.6 Out of scope All else is considered out of scope until future versions of the product. 1.4 Requirements After meeting with the client the following Aims and Objectives were agreed. 1.4.1 Must Have No Adobe Flash -The client has asserted no use of Adobe® Flash®; all development is to be done in other technologies such as HTML 5, Object Oriented JavaScript and CSS3 to afford cross platform compatibility and a degree of future proofing. Chorographical selection - Ability to select different dates and times easily from within the application. Open source technology - The client has been operating since June 2013 and budget is a consideration. In addition to this the client is familiar with open source technology and has a preference for it.
  14. 14. - System Analysis 14 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Special Day Awareness - Some days (weekends or public holidays for example) there will be no pictures produced, the solution should allow for this and not create a cryptic error code. Multiple Camera Selection - Multiple camera drop down list to allow for sites with multiple camera locations. 1.4.2 Should have Cross Platform Compatibility - Visibility on different customer device screen sizes (1280x1024, 1080X800, 600,480, etc). Device detection - Intuitive display, so that controls on smaller screens are a relative size. Available on multiple devices Apple, Android, Windows, *nix. 1.4.3 Could Have Solution could be made on virtual server / client platform. 1.4.4 Won’t Have Other products examined have a magnifying glass style zoom function on their interface that doesn’t open the original image file, the client thinks this is clumsy and therefore still wants this functionality but for it to have more interactivity, by for example working with ‘pinch and pull’ to manipulate image (possible HTML5 scalable vector graphics or canvas tag). 1.5 Life cycle methodologies A Rapid application development life cycle methodology was used, mostly resembling Dan Gielan’s Joint Application Development process (uncited as found on Wikipedia) to create the product. Benefits of this are the client has a transparent view of the product at each stage of its development and can steer the build during the cycle. This was achieved through weekly task driven meetings with the client.
  15. 15. - System Analysis 15 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 1.6 Risks 1.6.1 Project Risks SWOT analysis of the project Strengths  Established Software (Linux, Apache, MySQL, PHP, jQuery)  Minimal costs  Engaged and reasonable client  Developers Industry, Network, Hardware and Systems knowledge. Weaknesses  Large image size, (possible issue with speed of image loading)  Developer’s web development knowledge Opportunities  Future project development, potential for revenue. Threats  There is a possibility that the client may decide at any point during the project to source a product from another vendor.  Maths GCSE Exam, the developer has to revise for and sit a maths GCSE exam in January which means losing two weeks of the schedule.  Data Protection Act 1998 (this is discussed in a section later in the report, see below) 1.6.2 Data Protection Act (DPA) 1998 The DPA outlines a role of a data controller, the key area of this act that have relevance to this project are Section 7 (1-11) (legislation.gov.uk, 1998) in which data subject
  16. 16. - System Analysis 16 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: access requests (DSAR) are discussed. The client in the case of this project holds the responsibility of handling any DSAR received and the developer has no liability for such requests. It should further be noted that this Act (Schedule 1, Part 1, Principle 5) states that “Personal data processed for any purpose or purposes shall not be kept for longer than is necessary for that purpose or those purposes.” (legislation.gov.uk, 1998) which is a little obscure in translation however it would be prudent to interpret this as meaning image files should be archived to long term storage for a period outlined in the contract between the client and their customers. Migrating the individual customer folders to long term (possibly magnetic tape) storage would free system resources for current contracts. It is expected that the client will wish to retain the images from said contracts in case of future requests to access this data from the customer(s) or to market another service (the client provides time-lapse videos), if this was the case it would be a reasonable assumption that archived data is retained. Full responsibility for the schedule of data retention is held with the client in regards to this project. 1.6.3 Measures to control / reduce highlighted risks Image sizes will be tested and if problematic thumbnail or other solutions used to address this. The developer will increase their knowledge throughout the time scale of the project. Potential missed deadlines on the project, negotiation with the client resolves this matter as the client is supportive and understanding of the developer’s other commitments. Little can be done regarding the potential legislative issues with this product other than to make the client fully informed of their duties as a data controller.
  17. 17. - System Analysis 17 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 1.7 Scheduling of works Google Calendar has been used throughout to schedule weekly task driven meetings with the client and the project supervisor and to schedule task workload as well as other time commitments. The diagrams below show average week / month. This product was used as it wirelessly synchronises with several different technologies and is very flexible in the creation of appointments. The developer setup deadlines months in advance with several weekly reminders configured. Figure 1 - Google Calendar, average week. Figure 2 - Google calendar, average month
  18. 18. - System Analysis 18 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Evernote®(Evernote®, 2010) was extensively used for the management of notes and memo’s during this project. The reason for this was primarily that the notes can be taken in multiple formats (voice, written, drawings, photographs, pdf’s etc) images are rendered into searchable text where appropriate and then all stored in the cloud for access from different platforms. Figure 3 - Evernote Project notebook
  19. 19. 2 – Research 19 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 2 – Research 2.1 Competitors & Clients Technology 2.1.1 Lobsterpictures.tv Lobster Pictures “design and install innovative, above-HD time lapse cameras for remote site monitoring and time lapse photography.”(Lobster Pictures Limited, 2014) their interface can be seen in the below figure. The interface is very similar to the product that this project will produce however has a zoom function to view sections of the image in detail, the product remit from Construct Films Ltd is that the image should be responsive to “pinch and grab” interactions to zoom, similar to Google Maps. Figure 4 - Lobster Pictures
  20. 20. 2 – Research 20 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 2.1.2 Site-eye.co.uk “Site-Eye have a number of qualified and talented photographers available for all types of documentary or creative projects. As well as straight photography we can offer 360 degree panoramic photography, fisheye photography and studio lit photography. For particular requirements and prices please contact us.” (Site-Eye Time-Lapse Films, 2012). Unfortunately access to their interface is for their customers only. Which is incidentally in-line with this project’s client remit. Figure 5 - Site Eye Films
  21. 21. 2 – Research 21 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 2.1.3 ConstructionPhotography.com This company are another provider of construction photography services; however as we can see below their website has some errors. Again access to their interface is for their customers only. (Construction Photography, 2014) Figure 6 - Construction Photography
  22. 22. 2 – Research 22 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 2.1.4 Current Website Branding As the application is to be delivered via a link from the client’s existing website the look and feel of the product needs to match the existing (see below) website. The developer asked for and was provided with client logos and font type to match the company portal. Figure 7 - Construct Films Website 2.2 Literature Review 2.2.1 Linux Ubuntu Apache 2 MySQL PHP (L.A.M.P.), phpMyAdmin vs C# and .NET MVC Framework The client’s remit of the project prohibits the use of Microsoft products due to budgetary restrictions. Therefore a L.A.M.P. server was configured to host the application. The advantages being that open source software is freely available. Disadvantages of this may be support costs in the future, however the client has a good understanding of the Linux operating system so is expected to be able to administer the product post- handover. ‘phpMyAdmin’ (Tobias Ratschiller, 1998) is used to create and administer the database that powers the product. This product was used because this web-based
  23. 23. 2 – Research 23 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: graphic user interface (GUI) makes administrative tasks in SQL easier to accomplish. Some direct SQL (e.g. TRUNCATE images) is used as part of the development and testing cycles but on the whole the GUI was used for the SQL commands. Figure 8 - Installing phpMyAdmin 2.2.2 VirtualBox “VirtualBox is a virtualisation software package” (Oracle Corporation, 2007) this software was used to create a virtual LAMP server on the developer’s laptop, that is then used to host the development/test environment as discussed in chapter 3 – Product design. 2.2.3 jQuery & AJAX The developer was exposed to AJAX and jQuery during a lecture conducted by Matthew Mantle in the module Advanced Authoring of Interactive Media, this was then further investigated using a variety of sources (Dainis Graveris, 2010; jQuery.com, 2013; “jQuery.getJSON() | jQuery API Documentation,” n.d.; Powell & Books24x7, 2008; Zakas, McPeak, & Fawcett, 2007) and found to provide a better solution to the problems encountered below (see system design) in displaying the controls on the interface.
  24. 24. 2 – Research 24 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 2.2.4 PHP Hypertext Pre-processor (PHP) The developer had no prior knowledge of PHP upon commencing the product build, so used the following sources (Angela Bradley, 2014; Babin & Books24x7, 2005; Codeacademy, 2014; Dejan Marjanovic, 2012; Hudson, 2006; php.net, 2001; Quigley & Gargenta, 2007; Ullman, 2011) to learn the language and create the application. 2.2.5 Syntactically Awesome Style Sheets (SASS) CSS Pre-processor Sass (Hampton Catlin, Nathan Weizenbaum, & Chris Eppstein, 2006; Mastering Sass, 2011) had previously been used by the developer in their Advanced Authoring of Interactive Media – MyGarden mobile application. The product has been used to compact the css and reduce the size of the application footprint. Figure 9 - Implementing sass 2.2.6 GitHub Version control An account was created on github.com (Tom Preston-Werner, Chris Wanstrath, & PJ Hyett, 2008) which is a code sharing repository. The tool was used to manage version control of the application enabling the ability to develop one version and test it without adverse effect on the live version of the software. Once the development version was ready for release, a pull request, was created and the development branch was merged into the master branch. This enables new features of the software and bug fixes to be
  25. 25. 2 – Research 25 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: tested before version release. This will continue during the lifecycle of the application using the test environment as discussed previously in the virtualisation section. Figure 10 - GitHub version history 2.2.7 Crontab Linux has an application (cron) built in to enable the running of scheduled scripts. The developer has researched the following sources to use this technology. (Brian Kernighan, 1979; Ubuntu Tutorials, 2012) 2.2.8 Normalize.css This is used to ensure cross browser consistency. Research from the following (Nicolas Gallagher & Jonathan Neal, 2012) claims that issues with Microsoft Internet Explorer’s (IE) application of styles in particular are resolved with this cascading style sheet.
  26. 26. 3 – System Design Construct Films Image Interface and network 26 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 3 – System Design 3.1 System Modelling According to (Dennis, Wixom, Tegarden, & Dennis, 2005) the Standish group found in a 1996 survey that 42 percent of all corporate IS projects were abandoned. Agile system modelling is a technique designed to prevent projects from being abandoned and incurring potentially massive costs through client engagement. Outlined below are a series of models used in the inception of the product. 3.1.1 Entity Relationship Diagram (ERD) Figure 11 - Initial ERD for design purposes A very basic ERD was used as the system is in essence very simple in regards to data relationships.
  27. 27. 3 – System Design 27 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 12 - Screen shot of actual live ERD from phpMyAdmin 3.1.2 Data Flow Diagrams These were used to conceptualise how the images would get from site to customer. Figure 13 – Initial Dataflow diagram for design purposes
  28. 28. 3 – System Design 28 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 14 - Updated Data Flow Figure 13 shows the journey of an image from capture to customer. 3.1.3 Use Cases Use cases demonstrate what the system users may require from the system.
  29. 29. 3 – System Design 29 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 15 – Initial Use Case Diagrams for design purposes
  30. 30. 3 – System Design 30 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 16 - Updated Use Cases Over time the uses of the system changed, this is prevalent and in fact the purpose of a rapid application development methodology.
  31. 31. 3 – System Design 31 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 3.1.4 Sequence Diagrams Figure 17 – Administrating customers Figure 18 – Initial Customer Sequence diagram for design purposes
  32. 32. 3 – System Design 32 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 19 - Updated Customer Sequence These have been the most useful of all the UML diagrams although the whole process has merit, with a development flow as discussed they are subject to a lot of change.
  33. 33. 3 – System Design 33 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 3.2 Product Design 3.2.1 Network Diagram of proposed solution The below diagram is a high level topology of the completed network. It demonstrates the on-site cameras passing images to the CF-main server, these are then sent via an automated scheduled rsync script to the CF-Archive server, which then presents the images via a secure interface to the customers. Who access the interface via a link from constructfilms.co.uk main webserver. Figure 20 - Network Diagram
  34. 34. 3 – System Design 34 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 3.2.2 Virtual Box Development and Test server The server was setup as per the below diagram. The configuration was a replication of the live server, running the same version and the same software as the production server. Every time a new major release of the application was created on the test server, once successfully tested, a commit of the changes were pushed to github then a pull request was created on github and the production server was updated to match the test environment. Virtualbox guest editions was installed to enable the creation of shared folders. “With the "shared folders" feature of VirtualBox, you can access files of your host system from within the guest system.” (Oracle Corporation, 2004) A virtualbox shared folder was created and mapped to the development repository on the development laptop, the test server accessed the shared folder using the following command: sudo mount -t vboxsf -o uid=1000,gid=1000 cfarc /var/www however this command was not persistent between reboots of the test server so further debugging was required (joel-pearson, 2013) to enable persistence of the mapped drive by means of an entry into the /etc/fstab file. /media/sf_cfarc /var/www vboxsf uid=1000,gid=1000 The above the drive was mapped to the apache source folder by means of a symbolic link ln –s /media/sf_cfarc /var/www which meant that changes in the development repository were immediately represented within the application’s test environment. Removing the need to use FTP software to upload changes. This speeded up the development process.
  35. 35. 3 – System Design 35 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 21 - VirtualBox topography 3.2.3 Host only network – Virtual Box To enable the virtual machine client to be accessible from the host a host only network adapter was created and configured on network interface eth1 on the client.
  36. 36. 3 – System Design 36 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 22 - Virtual Machine Host only adapter This change enabled access to the virtual machines httpd (apache) server. 3.2.4 Cron & php script to update MySQL records Two crontab entries were created to handle the automatic entry of new records to the database. As the server is a command line only machine without a graphic user interface nano editor was used to edit the crontab file. Finding the files */15 * * * * find /var/www/ -print | grep -i '.*[.]jpg'>/var/www/data.file The above entry is a simple ‘find’ command running every 15 minutes to look for any ‘jpeg’ files in the /var/www path and to output the locations of the image files into a ‘one line per entry’ file, which can then be manipulated by the php script below. Calling the php script to enter files into database */10 * * * * wget http://192.168.1.69/scrape.php >/dev/null 2>&1
  37. 37. 3 – System Design 37 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: The above entry runs every 10 minutes and executes the scrape.php script (discussed below) which takes the results of the previous entry and proceses them into MySQL database entries. Figure 23 - Crontab schedule The concern in this entry is that the server must have a static IP address on the LAN. On implementation this entry needs to be configured to the server’s local IP address by editing the crontab file as root. The LAN DHCP server must be configured to forward network traffic over port 80 (http) to that server or the solution will fail. This is done using the following command which opens the interfaces file where DHCP can be replaced with a static IP address.(note you need to be root to edit the network interfaces) sudo nano /etc/network/interfaces and then change the following auto eth0 iface eth0 inet dhcp to the static IP as follows auto eth0
  38. 38. 3 – System Design 38 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: iface eth0 inet static address 192.168.1.100 gateway 192.168.1.254 netmask 255.255.255.0 network 192.168.1.0 broadcast 192.168.1.255 3.2.5 Scrape.php The scrape script (see figure below) opens the previously discussed data.file and uses a series of arrays, loops and ‘explode’ commands to dissect each line in the file and then creates an INSERT query to populate the images table within the database with only the new image details for only existing users in the database. Figure 24 - script to harvest file locations and create SQL records
  39. 39. 3 – System Design 39 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: The intelligence in the design of the script lies in the fact that the client can visit a new customer site and install a camera, leave that running and then when they return create the user account on the product, within 20 minutes of the new customer being created on the server the product will present all images for that customer regardless of when the customer had their first camera installed. Alternatively the client may require to create the customer account on the product and then go to the site and install the camera, as soon as the script sees a user for an image it will populate the image table with records for that user. It will also pick up multiple cameras and create the records accordingly. 3.2.6 Wireframes The following wireframes were received from the client the product was built as closely as possible using these wireframes. Figure 25 - Login screen This layout has proved popular with testers they are calling it ‘clean’.
  40. 40. 3 – System Design 40 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 26 - Main Interface Key areas here are the four controls and name of customer. Figure 27 - Selection of date
  41. 41. 3 – System Design 41 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Dates only available for dates with associated records. Figure 28 - Image displayed (full screen) Reduced aspect image in this wireframe to see full details Figure 29 - Image displayed (1:1 ratio)
  42. 42. 3 – System Design 42 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: After discussion with the client a “Left click” to view 1:1 ratio was required. 3.2.4 jQuery and AJAX Although the product initially utilised a PHP script to display controls and images through the development cycles a move to using jQuery and AJAX to display these proved to be a better fit for the product, the reason behind this move was that PHP by nature is a ‘pre- processor’ and thus didn’t provide the asynchronous usability that the product required. The developer realised that the easiest way to prevent users from getting confused with controls (date input selectors, camera input selectors and time selectors) was to hide those controls and only make calls to the database when the user clicked a selector or made a change to a selector. PHP scripts are still called when selections are made, but rather than load the entire dataset for that user (in the future an entire dataset could reach tens of thousands of records) using AJAX means that only the relevant records are returned (Zakas et al., 2007). Although at the moment the SELECT queries would have no problems returning the entire dataset without the user experiencing system lag, this approach anticipates that the system has a 3-5 year shelf life. See projections on table below.
  43. 43. 4 - Testing 43 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 4 - Testing 4.1 Alpha Test Results Bugs were resolved at the time of finding them in the development iterations, however noteworthy issues are listed below. 4.1.1 Accessing the server Access to the server was tested on 18 January. As the figure below indicates there was a problem accessing the prototype server from external (Internet) sources. Figure 30 - External Trace Route A trace route command was issued from an external diagnostic tools provider (who.is) and the following table shows the results:
  44. 44. 4 - Testing 44 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Hop DNS IP ms 1 174.36.196.241-static.reverse.softlayer.com (174.36.196.241) 0.231 2 ae11.dar01.sr01.wdc01.networklayer.com (208.43.118.133) 0.164 3 ae8.bbr01.eq01.wdc02.networklayer.com (173.192.18.196) 0.868 4 ae0.bbr01.tl01.nyc01.networklayer.com (173.192.18.157) 6.381 5 ae0.bbr01.tl01.nyc01.networklayer.com (173.192.18.157) 6.047 6 t2c1-p12-0-0.uk-ilf.eu.bt.net (166.49.164.77) 86.749 7 t2c3-xe-11-3-0-0.uk-ilf.eu.bt.net (166.49.237.174) 87.057 8 t2c3-xe-11-3-0-0.uk-ilf.eu.bt.net (166.49.237.174) 86.728 9 166-49-168-86.eu.bt.net (166.49.168.86) 86.551 10 acc1-10GigE-5-0-0.sf.21cn-ipp.bt.net (109.159.251.44) 93.021 11 acc1-10GigE-5-0-0.sf.21cn-ipp.bt.net (109.159.251.44) 92.646 12 217.41.169.106 (217.41.169.106) 94.811 13 217.41.169.106 (217.41.169.106) 95.184 14 217.41.169.182 (217.41.169.182) 92.198 15 * 16 * 17 host109-155-85-188.range109-155.btcentralplus.com (109.155.85.188) 98.272 18 * 19 * 20 * Table 5 - BT traceroute results As the above table demonstrates the trace stops at the local BT HOMEHUB5 router (IP 109.155.85.188 is the WAN address of the local router, see figure below)
  45. 45. 4 - Testing 45 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 31 - External WAN address The above demonstrates that traffic is reaching the local router and then being dropped. Making changes to the firewall process within the router as below Figure 32 - Editing the firewall Allowing traffic on port 80 as above has enabled access. Broadband speed test results.
  46. 46. 4 - Testing 46 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: The server is on a residential broadband connection. The following are a set of four speed test results done over two weeks. The tests involve the developer using unidesktop (see appendices) to access a University desktop and then remotely download a file from the prototype server. Figure 33 - Image list 18th January 2014 Downloaded the first 2 files within 3 seconds. Tests done on opening images direct from site and file fully opened in browser within 2 seconds. 5.1.2 Data.file error in records Figure 34 - Live SQL results
  47. 47. 4 - Testing 47 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: The above figure displays the returned rows from a select all query on the images database, this confounded the developer for some time as the below figure clearly shows that the records existing in the data.file did not match the amount of records in the database. Figure 35 - Live data-file results Some further investigation revealed a miss match in the times that the crontab scripts ran on the live server in comparison to the test server, which explained the variance in record quantity.
  48. 48. 4 - Testing 48 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 36 - Test Box SQL records Test server results above closely match results in data.file below. Figure 37 - Test Box data.file results This variance in the quantity of records is expected as there are three records that don’t have customers associated with them as seen in below figure.
  49. 49. 4 - Testing 49 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 38 - data.file erroneous records As the scrape.php script only enters records that have a corresponding username the above variance is expected and has no adverse impact on the product.
  50. 50. 4 - Testing 50 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 4.1.3 Disparate Server versions Another issue highlighted in the alpha testing process (phpmyadmin inconsistencies) was found to be caused by the test server running Ubuntu Desktop 14.10 (for ease of virtual shared folder management) and the live server running Ubuntu 12.04.4 LTS. In future the developer will always use exactly the same version of server build for the test environment as the live environment. The Desktop version with it’s GUI was used in this development as the developer didn’t feel confident enough in using virtual machine software as well as a linux command line only operating system as they were unfamiliar with both technologies. The developer has a good working knowledge of both of these applications so future cycles will be less problematic. 4.1.4 DateTime and button inputs The DateTime and Button input fields in the application render very well in Google Chrome however there were problems with both fields in both current versions of IE and Firefox, additionally there were critical problems with previous versions (8 and below) of IE with the usage of jQuery. As discussed in section 7.1.1.1 future releases will address these problems with modernizer.js, the browser capabilities will be assessed by modernizer.js and at least an information message to the user explaining the features in the application will not work unless they upgrade their browser, or more preferable a ‘dumbed down’ version of the application will be presented with an explanation message to the user so they can still use the application albeit with reduced functionality. As per below email the client is in agreement.
  51. 51. 4 - Testing 51 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 39 - Old IE UI conversation with client Although the client has stated above that this bug is not an issue, a mature development strategy would address this issue and present the best possible product to the customers. This will be implemented in the next release. 4.2 Usability (beta) Test Results Eight test participants were enlisted to conduct user acceptance testing. The full results can be found in the appendix, the tests and a summary of results follow. 4.2.1 Instructions to tester The following are the schedule of tests, please complete these tests in order. Please record your results on the accompanying spreadsheet (highlight the relevant cell 1 - 4 ). Complete the sections for each web browser you have installed on your computer, if you don’t have a particular browser installed please skip that section. A. Open Microsoft Internet Explorer
  52. 52. 4 - Testing 52 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Browse to the web address: http://www.snowdon.me 1. Left click the ‘Learn More’ link and complete that section of the questionnaire 2. Left click the main button 3. Enter the following details: a. Username : test b. Password: test 4. Left click the login button 5. Left click the date field and type the date 2014/04/24 6. Left click the camera field 7. Left click the time field and select a time 8. Select another time 9. Left click the image 10. Right click the image and save a copy 11. Left click the image again 12. Left click the logout button 13. Close the web browser
  53. 53. 4 - Testing 53 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 4.2.2 Schedule The full schedule repeats the below but includes sections for Google Chrome, Apple Safari and Mozilla Firefox User Test results - Questionnaire Name: Microsoft Internet Explorer Poor Un-Satisfactory Satisfactory Good 1 Privacy Notice 1.1 Is the Privacy notice appropriate 1 2 3 4 1.2 Is the Privacy notice too long or not comprehensive enough 1 2 3 4 1.3 Link from Privacy page 1 2 3 4 2 Login 1.1 Username Field 1 2 3 4 1.2 Password Field 1 2 3 4 1.3 Login Button 1 2 3 4 1.4 Look and feel 1 2 3 4 1.5 Time to login 1 2 3 4 1.6 Overall Login 1 2 3 4 2 main interface 2.1 Look and feel 1 2 3 4 2.2 Date field 1 2 3 4 2.3 Selection of Date 1 2 3 4 2.4 Camera field 1 2 3 4 2.5 Selection of multiple cameras 1 2 3 4 2.6 Time field 1 2 3 4 2.7 Selection of time 1 2 3 4 2.8 Image display 1 2 3 4 2.9 1:1 ratio image 1 2 3 4 3 Logout Button 1 2 3 4 Free Notes
  54. 54. 4 - Testing 54 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Google Chrome Poor Un-Satisfactory Satisfactory Good 1 Privacy Notice 1.1 Is the Privacy notice appropriate 1 2 3 4 1.2 Is the Privacy notice too long or not comprehensive enough 1 2 3 4 1.3 Link from Privacy page 1 2 3 4 2 Login 1.1 Username Field 1 2 3 4 1.2 Password Field 1 2 3 4 1.3 Login Button 1 2 3 4 1.4 Look and feel 1 2 3 4 1.5 Time to login 1 2 3 4 1.6 Overall Login 1 2 3 4 2 main interface 2.1 Look and feel 1 2 3 4 2.2 Date field 1 2 3 4 2.3 Selection of Date 1 2 3 4 2.4 Camera field 1 2 3 4 2.5 Selection of multiple cameras 1 2 3 4 2.6 Time field 1 2 3 4 2.7 Selection of time 1 2 3 4 2.8 Image display 1 2 3 4 2.9 1:1 ratio image 1 2 3 4 3 Logout Button 1 2 3 4 Free Notes Apple Safari Poor Un-Satisfactory Satisfactory Good 1 Privacy Notice 1.1 Is the Privacy notice appropriate 1 2 3 4 1.2 Is the Privacy notice too long or not comprehensive enough 1 2 3 4 1.3 Link from Privacy page 1 2 3 4 2 Login 1.1 Username Field 1 2 3 4 1.2 Password Field 1 2 3 4
  55. 55. 4 - Testing 55 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 1.3 Login Button 1 2 3 4 1.4 Look and feel 1 2 3 4 1.5 Time to login 1 2 3 4 1.6 Overall Login 1 2 3 4 2 main interface 2.1 Look and feel 1 2 3 4 2.2 Date field 1 2 3 4 2.3 Selection of Date 1 2 3 4 2.4 Camera field 1 2 3 4 2.5 Selection of multiple cameras 1 2 3 4 2.6 Time field 1 2 3 4 2.7 Selection of time 1 2 3 4 2.8 Image display 1 2 3 4 2.9 1:1 ratio image 1 2 3 4 3 Logout Button 1 2 3 4 Free Notes Mozzila Firefox Poor Un-Satisfactory Satisfactory Good 1 Privacy Notice 1.1 Is the Privacy notice appropriate 1 2 3 4 1.2 Is the Privacy notice too long or not comprehensive enough 1 2 3 4 1.3 Link from Privacy page 1 2 3 4 2 Login 1.1 Username Field 1 2 3 4 1.2 Password Field 1 2 3 4 1.3 Login Button 1 2 3 4 1.4 Look and feel 1 2 3 4 1.5 Time to login 1 2 3 4 1.6 Overall Login 1 2 3 4 2 main interface 2.1 Look and feel 1 2 3 4 2.2 Date field 1 2 3 4
  56. 56. 4 - Testing 56 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 2.3 Selection of Date 1 2 3 4 2.4 Camera field 1 2 3 4 2.5 Selection of multiple cameras 1 2 3 4 2.6 Time field 1 2 3 4 2.7 Selection of time 1 2 3 4 2.8 Image display 1 2 3 4 2.9 1:1 ratio image 1 2 3 4 3 Logout Button 1 2 3 4 Free Notes 5.2.3 Quantification of results The following table gives average scores form all the UAT results. 1 = Poor 2 = Unsatisfactory 3 = Satifactory 4 = Good Test IE Chrome Safari Firefox Averages Amount of testers 4 6 3 3 N/A Is the Privacy notice appropriate 3.1 3.1 2.3 3.3 2.9 Is the Privacy notice too long or not comprehensive enough 2.9 2.9 1.7 3.3 2.5 Link from Privacy page 3.8 3.8 3.0 4.0 3.3 Username Field 3.9 3.9 4.0 4.0 4.0 Password Field 3.9 3.9 4.0 4.0 4.0 Login Button 3.7 3.7 3.7 3.7 3.5 Look and feel 3.6 3.6 3.7 3.3 3.6 Time to login 4.0 4.0 4.0 4.0 4.0 Overall Login 3.9 3.9 4.0 4.0 4.0 Look and feel 3.3 3.3 3.3 2.7 2.8 Date field 3.0 3.0 3.3 2.3 2.7 Selection of Date 3.0 3.0 3.3 2.0 2.7
  57. 57. 4 - Testing 57 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Camera field 3.4 3.4 3.3 3.3 3.1 Selection of multiple cameras 3.0 3.0 3.7 3.7 3.1 Time field 3.7 3.7 4.0 3.7 3.5 Selection of time 3.6 3.6 3.7 3.7 3.2 Image display 2.7 2.7 1.7 3.3 2.4 1:1 ratio image 2.6 2.6 1.3 3.0 2.2 Logout Button 3.9 3.9 4.0 4.0 3.6 Averages 2.8 3.4 3.3 3.4 3.2 Table 6 - Quantified beta test results As can be seen by the last right hand cell overall the application can be rated as good, however some areas of Safari (Privacy Notice, Image Display, 1:1 aspect ratio) were very poorly performing. However the test data provided (images) were not live images and this goes a good way to explaining the poor results. Upon repetition of the selected ‘poor area’ testers with actual live data their response was ‘4’ (good) across the board. 4.2.4 Free text Comments The following is from a user testing with Microsoft Internet Explorer v8 ‘not clear if my cookie information is related to me, or if all information is non- identifiableas per visitor policy’ (Is the Privacy notice too long or not comprehensive enough) ‘clicking on Main does not take me back. Used Back button to complete testing.’ (Link from Privacy page) ‘nothing happens on click’ (Login Button) The following is a random selection of comments ‘If the ipad switches between landscape and portraite modes, the fields all overlap and the page becomes jumbled.’ (Free Notes) ‘couldn't get to work on the ipad’ (Login)
  58. 58. 4 - Testing 58 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: ‘All links are clear and easy to use and it is useful that instructions appear for each step when selcting what camera and time you want to view’ The following is in reference to the Login page ‘don’t see any privacy notice’ (Is the Privacy notice appropriate) ‘I suggest that refrences to data protection act etc… are moved to an expandable pane or window which sets out true DPA requirements. The 'legalese' needs some work to make it more real-world.’(Is the Privacy notice too long or not comprehensive enough) ‘Tab control order from User->Test->Login Button would be better than User->Test- >Forgotten Login. (Hope that makes sense)’ (Login Button) ‘Lightweight. Excellent’(Look and feel) ‘needs more padding’ (in reference to the username, password and login button inputs) ‘Simple login form, hard to make look too pretty, managed an okay look however.’ (look and feel) ‘Quick, same as most other sites’ (Time to login) ‘Assuming the php security issues and the SQL injection type stuff is covered then not too bad.’ (Overall login) The following is in reference to the main page ‘worked with scroll menu not typing’ (Date field) ‘Control labels would be good’(Look and feel) ‘label would be good. Otherwise excellent’(Date field) ‘intuitive’(Selection of Date)
  59. 59. 4 - Testing 59 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: ‘Could not select multiple cameras but could select one or the other. Slight issue with refresh in that I had to reselect the time once I changed the camera source.’(Selection of multiple cameras) ‘had 2 to choose from, coulnt select more than one at any time’ (Selection of multiple cameras) ‘better if enhanced with a fuzzy search capability.’(Selection of time) ‘cant see any image’(Image display) ‘Too basic, should load in the first image so user has something to look at and needs some instructions on how to perate it.’ (Look and feel) ‘shocking to be honest, hard to use and I can type in 31/02/2014’ (date input) ‘I would gray out days that dont have a camera on them. Betetr user experience overall doing that’ (Selection of Date) ‘easy to use’ (Camera & Selection of multiple cameras) ‘simple, does the job’ (Time field and Selection of time) ‘Should start off zoomed out, then given the option to zoom in using buttons rather than clicking image.’ (Image display) ‘good idea, would again only do it if the user clicked on a button to view it that big.’ (1:1 ratio image) ‘does the job, keep sin with the design’ (Logout Button) ‘The product looks good, however looses some of the feel of it through poor design. Functionaly works well and does the job. Needs a design overhaul and needs the user to have a preloaded image when they first go on. Grey out the dates that dont have data on them. Some slight delay loading image, but nothing too major to
  60. 60. 4 - Testing 60 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: complain about. I assue that SQL injection etc. has been covered as I havent attempted to hack it (sorry). Just needs some tlc on the design other than that it looks like quite an interesting product. further enhancements could be a next button to cycle to the next image if there is one available for that day, or a movie type approach that would play them all as a stop motion animation which would be a cool future idea.’ (free notes) The tests conducted were on test data and a lot of the comments regarding image aspect ratio have therefore been dropped from the results as after enabling access for two testers to the live data they reported that there were no longer aspect ratio issues with the images. The image data is a standard size and therefore the application does not need to dynamically resize images.
  61. 61. 4 - Testing 61 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 4.3 Client UAT Results The developer has included these results as a separate section as they are held as the most important feedback on the success of the project.(Thomas & Fernández, 2008) User Test results - Questionnaire Name:Anthony Elliott Microsoft Internet Explorer Poor Un-Satisfactory Satisfactory Good Notes Privacy Notice Tested IE 8.0.6001.18702 on WinXP SP3. Is the Privacy notice appropriate 1 2 3 4 Vague language might worry some users who aren't familiar with cookies or privacy issues. Is the Privacy notice too long or not comprehensive enough 1 2 3 4 Link from Privacy page 1 2 3 4 Privacy page “main” button doesn't return to index page. Login Username Field 1 2 3 4 Password Field 1 2 3 4
  62. 62. 4 - Testing 62 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Login Button 1 2 3 4 Look and feel 1 2 3 4 Purple colours are different compared to other browsers. Not a big problem though. Time to login 1 2 3 4 Overall Login 1 2 3 4 main interface IE8 doesn't login to the main interface. Look and feel 1 2 3 4 Date field 1 2 3 4 Selection of Date 1 2 3 4 Camera field 1 2 3 4 Selection of multiple cameras 1 2 3 4 Time field 1 2 3 4 Selection of time 1 2 3 4 Image display 1 2 3 4 1:1 ratio image 1 2 3 4 Logout Button 1 2 3 4
  63. 63. 4 - Testing 63 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Free Notes Google Chrome Poor Un-Satisfactory Satisfactory Good Notes Privacy Notice Tested Chrome 34.0.1847.131 on Mac OSX 10.6.8 Is the Privacy notice appropriate 1 2 3 4 As above. Is the Privacy notice too long or not comprehensive enough 1 2 3 4 Link from Privacy page 1 2 3 4 Login Username Field 1 2 3 4 Password Field 1 2 3 4 Login Button 1 2 3 4 Look and feel 1 2 3 4 Time to login 1 2 3 4 Overall Login 1 2 3 4 main interface Look and feel 1 2 3 4 Date field 1 2 3 4 Datepicker on Chrome is the
  64. 64. 4 - Testing 64 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: best user- experience of all the browsers. Selection of Date 1 2 3 4 Camera field 1 2 3 4 For single-cam jobs, the camera should be selected by default, and selection greyed out. Selection of multiple cameras 1 2 3 4 Works ok. Time field 1 2 3 4 Selection of time 1 2 3 4 Image display 1 2 3 4 Needs work. Scaled-down view doesn't fill browser window, and doesn't fit to the window if the window is narrower than the scaled-down image.
  65. 65. 4 - Testing 65 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 1:1 ratio image 1 2 3 4 Image scales to 1:1 but doesn't allow any pan/scroll around the image, so most of the image remains obscured. Logout Button 1 2 3 4 Free Notes Figure 40 - Client UAT results (A)
  66. 66. 4 - Testing 66 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Apple Safari Poor Un-Satisfactory Satisfactory Good Notes Privacy Notice Tested Safari 5.1.10 for Mac OSX 10.6.8. Is the Privacy notice appropriate 1 2 3 4 Is the Privacy notice too long or not comprehensive enough 1 2 3 4 Link from Privacy page 1 2 3 4 Login Username Field 1 2 3 4 Password Field 1 2 3 4 Login Button 1 2 3 4 Look and feel 1 2 3 4 Time to login 1 2 3 4 Overall Login 1 2 3 4 main interface Look and feel 1 2 3 4 Date field 1 2 3 4 Selection of Date 1 2 3 4 Entering date by text is ok for older browsers, but behaviour needs tweaking –
  67. 67. 4 - Testing 67 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: clicking away or hitting tab works fine to finish entering the date, but hitting enter doesn't, this is a common behaviour and should be added if possible. Camera field 1 2 3 4 Selection of multiple cameras 1 2 3 4 Other main interface comments as per Chrome Time field 1 2 3 4 Selection of time 1 2 3 4 Image display 1 2 3 4 1:1 ratio image 1 2 3 4 Logout Button 1 2 3 4 Free Notes
  68. 68. 4 - Testing 68 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Mozzila Firefox Poor Un-Satisfactory Satisfactory Good Notes Privacy Notice Tested FF versions 4.0.1 and 29.0 on Mac OSX 10.6.8. Is the Privacy notice appropriate 1 2 3 4 Is the Privacy notice too long or not comprehensive enough 1 2 3 4 Link from Privacy page 1 2 3 4 Login Username Field 1 2 3 4 Password Field 1 2 3 4 Login Button 1 2 3 4 Look and feel 1 2 3 4 Time to login 1 2 3 4 Overall Login 1 2 3 4 main interface Look and feel 1 2 3 4 Date field 1 2 3 4 Selection of Date 1 2 3 4 Text entry for date selection –
  69. 69. 4 - Testing 69 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: comments as per Safari Camera field 1 2 3 4 Selection of multiple cameras 1 2 3 4 Other main interface comments as per Chrome Time field 1 2 3 4 Selection of time 1 2 3 4 Image display 1 2 3 4 1:1 ratio image 1 2 3 4 Logout Button 1 2 3 4 Free Notes Figure 41 - Client UAT results (B) As can be seen the key areas for improvement are related to cross browser and backward compatibility of browsers. Clearly some critical functions (login) don’t work on previous versions of IE. The date field also needs some attention for browsers other than Google Chrome, the conclusion – further development section addresses how these issues will be resolved.
  70. 70. 4 - Testing 70 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 4.4 Security Test Results 4.4.1 HeartBleed Test Results Although HTTPS (port 443) isn’t used by the server (therefore SSL attacks are really not an issue to be considered), the server was patched regardless and the port opened on the test LAN to allow traffic to the server, this was to test against possible future issues with the vulnerability. Figure 42 - Port 443 opened on firewall
  71. 71. 4 - Testing 71 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 43 - Heartbleed test The above shows that connections on 443 are dropped by the server, as a trace route was ran to find where the last reported gateway was. Therefore HeartBleed will not pose an issue. The Nessus Heartbleed penetration test (below) was also ran and returned no vulnerabilities. 4.4.2 Nessus Penetration Testing The application was tested using Nessus (Renaud Deraison, 1998) the process involves downloading the test software then registering to receive an activation code which is then used to download “ the newest plugins from Tenable which may take some time as we're testing for a lot of stuff.” (Renaud Deraison, 1998) the vulnerability scanner then initializes. The following test suite is then provided
  72. 72. 4 - Testing 72 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 44 - First pen test running This test took 41 minutes to run and found two medium risks and 2 low risks. Medium Risks Name: PHP expose_php Information Disclosure Synopsis: The configuration of PHP on the remote host allows disclosure of sensitive information. Description: The PHP install on the remote server is configured in a way that allows disclosure of potentially sensitive information to an attacker through a special URL. Such a URL triggers an Easter egg built into PHP itself. Other such Easter eggs likely exist, but Nessus has not checked for them. Solution: In the PHP configuration file, php.ini, set the value for 'expose_php' to 'Off' to disable this behavior. Restart the web server daemon to put this change into effect. Name: Git Repository Served by Web Server Synopsis: The remote web server may disclose information due to a configuration weakness.
  73. 73. 4 - Testing 73 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Description: The web server on the remote host allows read access to a Git repository. This potential flaw can be used to download content from the Web server that might otherwise be private. Solution: Verify that the listed Git repositories are served intentionally. Low risks Name: Web Server Uses Plain Text Authentication Forms Synopsis: The remote web server might transmit credentials in cleartext. Description: The remote web server contains several HTML form fields containing an input of type 'password' which transmit their information to a remote web server in clear text. An attacker eavesdropping the traffic between web browser and server may obtain logins and passwords of valid users. Solution: Make sure that every sensitive form transmits content over HTTPS. Name: Web Server Uses Basic Authentication Without HTTPS Synopsis: The remote web server seems to transmit credentials in clear text. Description: The remote web server contains web pages that are protected by 'Basic' authentication over plain text. An attacker eavesdropping the traffic might obtain logins and passwords of valid users. Solution: Make sure that HTTP authentication is transmitted over HTTPS. The above useful information will be addressed in the next release of the software. 4.5 Test Evaluation Although there were no maximum user recommendations in the initial requirements analysis and the developer has not conducted any stress testing, current indications (mysql.com, 2013) discussed previously in “Post Infrastructure considerations” predict
  74. 74. 4 - Testing 74 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: the application will support as many users as the client requires given the correct hardware infrastructure (network connectivity and disk storage). There is a clear theme among beta testers that some find the controls unwieldy in browsers other than Google Chrome and some could not even get past he login page (IE v8 or below), as discussed in more detail later, this project will be ongoing post University deadline and this feedback will be useful in addressing those issues. The client has indicated a desire for a continued relationship with the developer and development of the product further over the next 2-3 months. These reported issues will form further requirements and act to steer future releases.
  75. 75. 5 - Product Implementation 75 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 5 - Product Implementation 5.1 Infrastructure setup 5.1.1 Live Server Implementation Local Area Network Configuration The firewall already directs SSH traffic to a local server (the main image repository that the cameras send images to) so an account needed to be created on this server that had permission to SSH from that server to the CF-archive server (application host). To anable the developer to administrate the cfarc server in the future (Git pulls, security updates) until the client was comfortable with their own administrative tasks. Changes to the server once migrated The servers IP Address was changed and the crontab file edited as previously mentioned to reflect the IP Address change. New customers The system handles new customers easily as previously discussed. However development work should not be carried out on the live system as if the client was then to push this to the github repository, any new folders created for customers would also be pushed to the github repository. This will be outlined to the client in the handover document. 5.1.1 DYNDNS Client DNS entries? 5.1.2 Client Firewall configuration
  76. 76. 5 - Product Implementation 76 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 5.2 Post Infrastructure considerations 5.2.1 Archiving old data Once the contract with the customer has ended it would be prudent to migrate the images from that contract to long term storage although as discussed previously the Data Protection Acts 1998 & 2003 Section 2(1)(c) state that ‘the data shall not be kept for longer than is necessary for that purpose or those purposes.’ (legislation.gov.uk, 1998). The following tables estimate possible data usage scenarios for the life span (max 5 years) of the project.
  77. 77. 5 - Product Implementation 77 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Images per hour 6 Total images per day 144 amount of live customers max cameras per customer max images per day max image size (Mb) total storage requirements (Mb) total storage requirements (Gb) total storage requirements (Tb) 1 1 144 2 288 0.3 0.00 Total Records created per day 1 1 144 2 2016 2.0 0.00 Total Records created per week 1 1 144 2 8064 7.9 0.01 Total Records created per month 1 1 144 2 105120 102.7 0.10 Total Records created per year 1 1 144 2 525600 513.3 0.50 Total Records created per 5 year period Table 7 - Estimation of minimum storage requirements The above is the minimum expected usage of the system, the hardware supporting the product has been tested with more users than this and shown no detriment in service.
  78. 78. 5 - Product Implementation 78 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Images per hour 60 Total images per day 1440 amount of customers max cameras per customer max images per day max image size (Mb) total storage requirements (Mb) total storage requirements (Gb) total storage requirements (Tb) 100 10 1440000 2 2880000 2812.5 2.75 Total Records created per day 100 10 1440000 2 20160000 19687.5 19.23 Total Records created per week 100 10 1440000 2 80640000 78750.0 76.90 Total Records created per month 100 10 1440000 2 1051200000 1026562.5 1002.50 Total Records created per year 100 10 1440000 2 5256000000 5132812.5 5012.51 Total Records created per 5 year period Table 8 - Estimation of maximum storage requirements The above is an estimated disk usage, however should increases in usage as above be recorded then the client should look to invest in professional datacentre storage as the product has not been designed to deal with this quantity of data or access requests.
  79. 79. 5 - Product Implementation 79 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Images per hour 6 Total images per day 144 amount of live customers max cameras per customer max images per day max image size (Mb) total storage requirements (Mb) total storage requirements (Gb) total storage requirements (Tb) 3 2 864 2 1728 1.7 0.00 Total Records created per day 3 2 864 2 12096 11.8 0.01 Total Records created per week 3 2 864 2 48384 47.3 0.05 Total Records created per month 3 2 864 2 630720 615.9 0.60 Total Records created per year 3 2 864 2 3153600 3079.7 3.01 Total Records created per 5 year period Table 9- Estimation of client anticipated storage requirements The above is an estimated disk usage based in interviews with the client, this type of usage is within acceptable parameters for the current system and application. ‘Twitter achieved in August 2013 a new World record of 143,199 Tweets Per Second (TPS). A typical day sees over 500 million tweets, which means about 5,700 per second with MySQL.’ (mysql.com, 2013) Over and above the requirements of this project.
  80. 80. 6 – Evaluation 80 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 6 – Evaluation 6.1 Project Overall the project has been behind schedule, this can only be accounted for below in the personal evaluation section of the report as all attempts to stick to schedule were made and tools (Google calendar, Evernote, as discussed above) were used to manage meetings, workload and the project rollout. This product may be useful in any market that requires a simple login system to view remotely captured images, there are, however, countless other products available (wordpress, facebook, twitter, www.zenfolio.com, www.propic.com) that provide this functionality. This product was, from inception, a bespoke solution for a small business and primarily a learning tool for the developer. 6.2 Product 6.2.1 Interface The interface has been designed as per the client specifications, and as such is currently basic and has limited features. The foundation created with this application, however, will support modifications in the future and the interface adequately meets current requirements (Elliott, 2013), it was a more important consideration to have the product work on the platform and hardware and interface with the existing client systems than to focus purely on “whistles and bells”, this has been achieved and future releases can now safely be feature-rich.
  81. 81. 6 – Evaluation 81 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 6.2.1.1 Date selector The date selector requires some work to be as intuitive in other browsers (IE in particular) as it is in Google Chrome. Lacking the ability to restrict user selections to dates that are only available on that particular contract, is rapidly becoming a key feature requirement. “Special Day Awareness” to give a message if the user selected a date that fell for example on a weekend or bank holiday is in the “Must Have” requirements specification. 6.2.1.2 Camera selector The camera selector works well on first selection, however there are some issues after the first selection has been made and the testers all reported that the second time the selection is made there is confusion regarding which records are populating the time selector field. 6.3 Personal The developer has grown a good ‘working skills’ set as a consequence of this project both in soft (time management, knowledge acquisition and communication) and hard (technical) skills. The developer would estimate that 90% of technologies used in this product were unknown to them prior to product initiation. Moving forward (see conclusion-further development) the developer will continue to investigate frameworks available for providing web powered solutions to business requirements, in particular further investigation into ‘Model, View, Controller’ frameworks (Esposito, 2011) and PDO (Dejan Marjanovic, 2012). As a consequence of the technical learning in this project (and additional modules) the developer instigated an Educational Psychologist test for, and has found they have, Dyslexia. This is a very positive outcome for the developer as they have implemented support techniques and tools to facilitate future learning at post-graduate level (The
  82. 82. 6 – Evaluation 82 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: developer is starting a ‘Schools Direct’ teacher training programme in September 2014). This personal discovery has also helped the developer to gain insight into this condition which they are using in their work teaching secondary age pupils in a local school. One of the techniques researched, is discussed in (Peter Doolittle, 2013)’s ‘Working Memory’ TedTalk, this helped a great deal to take on board material presented over the last academic year of the developer’s study programme. If the developer had the foresight to get tested and get the support in place before the project initiation, the developer feels they would have delivered a more comprehensive product in a timely fashion, these are interesting effects on the project timescales and noteworthy to the developer for future project planning purposes. The developer spent their placement year working in a network team maintaining and supporting the University of Huddersfield’s Data Network Infrastructure. Peers of the developer spent their placement year working as web developers and the developer feels that their own skill in web development is a reflection of that ‘year behind’ their peers. In hind sight the developer should have chosen a project that reflected the skills learned during their placement year, in the network team, and previous vocational experience. Alternatively the developer should have sought out a web development placement year. This all said the client is pleased with the product as it stands and as previously discussed the product ticks 95% of the initial requirements, the remainder of such will be resolved over the next two to three months.
  83. 83. 7 - Conclusion 83 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 7 - Conclusion 7.1 Further Development The client has agreed to pay for future version releases of the product on a pro-rata basis. Below are areas for further development of the product. 7.1.1 BoilerPlate HTML5 This is a technology the developer encountered very late in the development cycle and thus unfortunately could not be implemented into the application as it would require a full rewrite of the application and extensive testing. However future versions of the product will use this framework to enable the technologies listed below. 7.1.1.1 Modernizr Due to Microsoft IE, Mozilla Firefox and Apple Safari limitations this plugin will be used to support “datetime” types in those browsers. Google chrome has native support for this HTML5 type and works out of the box. “Unlike with the traditional—but highly unreliable—method of doing ‘UA sniffing,’ which is detecting a browser by its (user-configurable) navigator.userAgent property, Modernizr does actual feature detection to reliably discern what the various browsers can and cannot do. After all, the same rendering engine may not necessarily support the same things, and some users change their userAgent string to get around poorly developed websites that don’t let them through otherwise.” (modernizr.com, 2009) <HTML class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no- indexeddb no-hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no- cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface no-generatedcontent no-video no-audio localstorage
  84. 84. 7 - Conclusion 84 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: sessionstorage no-webworkers no-applicationcache no-svg no- inlinesvg no-smil no-svgclippaths"><HEAD> The above is a sample from IE’s developer tools DOM explorer running in IE 7 emulation mode, please note there are a lot of unsupported features, these will be fixed by a “Polyfill” (some jQuery that asks if the feature is supported and provides an alternative if it isn’t). The philosophy held by the team (modernizr.com, 2009) is that developers should not be writing version specific code, but rather feature specific code that provides the same functionality to users regardless of the browser or version of browser they are using. 7.1.1.2 Normalise.css This css template removes browser specific styling ready to build your own css over the top of knowing that all browsers should now have their default styling removed. This has been implemented in this product however all future versions of the product should take the default normalise.css from Boilerplate. 7.1.2 Bootstrap for mobile “One framework, every device. Bootstrap easily and efficiently scales your project with one code base, from phones to tablets to desktops.”(Mark Otto, 2010) This framework would be a natural choice for the future of this product as increasingly mobile platforms are the norm and with mobile speed increases from the expansion of inexpensive 4G networks it would be expected that on-site customers would want to access the product while on site to see a history of the construction while discussing current issues. 7.1.3 Virtual Machine Server rather than physical hardware Hosting the application on a virtual machine rather than physical hardware will be a natural direction the solution takes as the resilience this provides (migration, restore from backup, snap-shots) are of great value to the client. The developer has already
  85. 85. 7 - Conclusion 85 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: discussed virtualisation in previous sections, this knowledge can be applied in the future should the client require virtualisation of the live environment.
  86. 86. 8 - Acknowledgements 86 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 8 - Acknowledgements In addition to sources referenced throughout this document the author would also like to thank Anthony Elliott for enthusiastically sponsoring this project and being very forgiving when milestones & deadlines were not strictly adhered to. Dr. Rupert Ward of the University of Huddersfield for supervising this project and maintaining the developer’s momentum. Elliot Wright for his assistance in code development, introduction to the sublime text editor (Skinner, Jon, 2011) and tireless explanation of a virtual test environment, Kiran Arya and Jamie Ovenden for their web and network security knowledge and finally Victoria Snowdon for critically testing the product and generally supporting the developer throughout the project.
  87. 87. 9 - References 87 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 9 - References Angela Bradley. (2014, February). PHP login script tutorial. About.com PHP / MySQL. Retrieved February 21, 2014, from http://php.about.com/od/finishedphp1/ss/php_login_code.htm Babin, L., & Books24x7, I. (2005). PHP 5 recipes: a problem-solution approach. New York; Berkeley, CA: A-Press. Retrieved from www.summon.com Brian Kernighan. (1979). UNIX man pages : crontab (5). Retrieved April 29, 2014, from http://unixhelp.ed.ac.uk/CGI/man-cgi?crontab+5 Codeacademy. (2014). Codecademy. Codecademy. Retrieved November 30, 2013, from http://www.codecademy.com/dashboard Construction Photography. (2014). Construction Photography - Home. Retrieved February 2, 2014, from http://www.constructionphotography.com/ Dainis Graveris. (2010). 37 Fresh jQuery Image And Gallery Display Solutions. 1stwebdesigner. Retrieved November 28, 2013, from http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/ Dejan Marjanovic. (2012, February 21). PDO vs. MySQLi: Which Should You Use? - Tuts+ Code Tutorial. Code Tuts+. Retrieved March 11, 2014, from http://code.tutsplus.com/tutorials/pdo-vs-mysqli-which-should-you-use--net-24059 Dennis, A., Wixom, B. H., Tegarden, D. P., & Dennis, A. (2005). Systems analysis and design with UML version 2.0: an object-oriented approach. Hoboken, N.J: Wiley. Retrieved from www.summon.com Elliott, A. (2013, June 30). Construct Films. Construct Films. Retrieved November 22, 2013, from http://www.constructfilms.co.uk
  88. 88. 9 - References 88 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Esposito, D. (2011). Programming Microsoft ASP.NET MVC. Microsoft Press. Retrieved from www.summon.com Evernote®. (2010). Evernote | Remember everything with Evernote, Skitch and our other great apps. Retrieved April 30, 2014, from https://evernote.com/ Fortune, J., & Peters, G. (2005). Information systems: achieving success by avoiding failure. Wiley-Blackwell. Retrieved from www.summon.com Hampton Catlin, Nathan Weizenbaum, & Chris Eppstein. (2006). Sass: Syntactically Awesome Style Sheets. CSS with superpowers. Retrieved March 22, 2014, from http://sass-lang.com/ Hudson, P. (2006). PHP in a nutshell. Cambridge; Beijing: O’Reilly. Retrieved from www.summon.com joel-pearson. (2013, February 8). VirtualBox/SharedFolders - Community Help Wiki. VirtualBox/SharedFolders. Retrieved April 29, 2014, from https://help.ubuntu.com/community/VirtualBox/SharedFolders jQuery.com. (2013). .data() | jQuery API Documentation. Retrieved November 30, 2013, from http://api.jquery.com/data/ jQuery.getJSON() | jQuery API Documentation. (n.d.). Retrieved from http://api.jquery.com/jquery.getjson/ legislation.gov.uk. (1998). Data Protection Act 1998. Text. Retrieved April 30, 2014, from http://www.legislation.gov.uk/ukpga/1998/29/section/7 Lobster Pictures Limited. (2014). Lobster Pictures | Time lapse and construction monitoring. Retrieved February 2, 2014, from http://lobsterpictures-px.rtrk.co.uk/ Mark Otto. (2010). Bootstrap. Retrieved April 30, 2014, from http://getbootstrap.com/ Mastering Sass: Lesson 1. (2011). Retrieved from http://www.youtube.com/watch?v=b_- HLevIJbc&feature=youtube_gdata_player modernizr.com. (2009). Modernizr: the feature detection library for HTML5/CSS3. Retrieved April 17, 2014, from http://modernizr.com/
  89. 89. 9 - References 89 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: mysql.com. (2013, October). MySQL :: Top 10 Reasons to Choose MySQL for Next Generation Web Applications. Retrieved April 30, 2014, from http://www.mysql.com/why-mysql/white-papers/top-10-reasons-to-choose-mysql- for-next-generation-web-applications/ Nicolas Gallagher, & Jonathan Neal. (2012, February 28). Normalize.css: Make browsers render all elements more consistently. Retrieved April 29, 2014, from http://necolas.github.io/normalize.css/ Oracle Corporation. (2004). Oracle VM VirtualBox®. Oracle VM VirtualBox®. Retrieved April 29, 2014, from https://www.virtualbox.org/manual/ Oracle Corporation. (2007, January). VirtualBox – Oracle VM VirtualBox. Retrieved April 29, 2014, from https://www.virtualbox.org/wiki/VirtualBox Peter Doolittle. (2013). Peter Doolittle: How your “working memory” makes sense of the world | Video on TED.com. TEDGlobal 2013. Retrieved from http://www.ted.com/talks/peter_doolittle_how_your_working_memory_makes_se nse_of_the_world.html php.net. (2001). PHP: What are Magic Quotes - Manual. Retrieved April 28, 2014, from http://www.php.net/manual/en/security.magicquotes.what.php Powell, T. A., & Books24x7, I. (2008). AJAX: the complete reference. New York; London: McGraw-Hill. Retrieved from www.summon.com Quigley, E., & Gargenta, M. (2007). PHP and MySQL by example. Upper Saddle River, NJ: Prentice Hall. Retrieved from www.summon.com Renaud Deraison. (1998). Nessus Vulnerability Scanner. Retrieved May 1, 2014, from http://www.tenable.com/products/nessus Site-Eye Time-Lapse Films. (2012). Construction Photography Services by Site-Eye. Retrieved February 2, 2014, from http://www.site- eye.co.uk/construction_photography.html
  90. 90. 9 - References 90 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Skinner, Jon. (2011, August 19). Sublime Text: The text editor you’ll fall in love with. Retrieved April 29, 2014, from http://www.sublimetext.com/ Thomas, G., & Fernández, W. (2008). Success in {IT} projects: A matter of definition? International Journal of Project Management, 26(7), 733 – 742. doi:http://dx.doi.org/10.1016/j.ijproman.2008.06.003 Tobias Ratschiller. (1998). phpMyAdmin. Retrieved April 29, 2014, from http://www.phpmyadmin.net/home_page/index.php Tom Preston-Werner, Chris Wanstrath, & PJ Hyett. (2008). Build software better, together. GitHub. Retrieved March 22, 2014, from https://github.com Ubuntu Tutorials. (2012, July 6). How to use crontab in Ubuntu | Ubuntu Tutorials. Retrieved April 9, 2014, from http://www.ubuntututorials.com/use-crontab-ubuntu/ Ullman, L. E. (2011). PHP for the Web. Berkeley, Calif: Peachpit. Retrieved from www.summon.com Zakas, N. C., McPeak, J., & Fawcett, J. (2007). Professional Ajax. Indianapolis, IN: Wrox. Retrieved from www.summon.com
  91. 91. 10 - Appendices 91 © Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 10 - Appendices 10.1 Original wireframes (concept) Figure 45 - Login wireframe (concept)
  92. 92. 10 - Appendices 92 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: Figure 46 - Main interface wireframe (concept)
  93. 93. 10 - Appendices 93 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: 10.2 Code 10.2.1 cfarc.js $(document).ready(function(){ //This script does the main 'heavy lifting' on the interface, also it does the ajax calls and controls the displaying of elements //The following script is a work in progress to display the earliest and latest date range available on the contract // var oXHR; // $("#dateRange").click(function(event){ // if (oXHR){ // oXHR.abort(); // } // oXHR = $.ajax({ // url: "fetchDateRange.php", // type: "post" // //do we need something here to make it work? // }); // oXHR.done(function (response, textStatus, jqXHR){ // // log a message to the console // $("#dateRange").html(response); // console.log("worked "+response); // }); // oXHR.fail(function (jqXHR, textStatus, errorThrown){ // // log the error to the console // console.error("The following error occured: "+textStatus, errorThrown); // }); // oXHR.always(function () { // }); // event.preventDefault(); // }); //hide the inputs that are not needed yet $('#cam').hide(); $('#selTime').hide(); //display instructions to the user $('#message').html('please enter date in YYY/MM/DD format, then click anywhere else'); //create a variable for the AJAX call var oXHR; //detect the date change and make AJAX call $("#imageDate").change(function(event){ //abort any running AJAX calls if (oXHR){ oXHR.abort(); } //variables for the form var $form = $('#timeSel'); var $inputs = $form.find("input, select, button, textarea"); var serializedData = $form.serialize(); //disable the inputs while making the call
  94. 94. 10 - Appendices 94 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: $inputs.prop("disabled", true); //make the call to the php script oXHR = $.ajax({ url: "fetch_cam.php", type: "post", data: serializedData }); //if it works fine then send results to the relevant DOM object oXHR.done(function (response, textStatus, jqXHR){ $("#cam").html(response); }); //if it's not worked alert the error to the user oXHR.fail(function (jqXHR, textStatus, errorThrown){ alert("The following error occured: "+textStatus, errorThrown); }); //re-enable the inputs oXHR.always(function () { $inputs.prop("disabled", false); }); event.preventDefault(); //now show the camera selector DOM object and a message to tell the user what to do now. $('#cam').show(); $('#message').html('now click the required camera'); }); //When the user selects the camera send an ajax request to populate the image time selector $("#cam").focus(function(){ if (oXHR){ oXHR.abort(); } var cfCam = $('#cam').val(); document.cookie="selCam="+cfCam; var $form = $('#timeSel'); var $inputs = $form.find("input, select, button, textarea"); var serializedData = $form.serialize(); oXHR = $.ajax({ url: "fetch_times.php", type: "post", data: serializedData }); oXHR.done(function(response, textStatus, jqXHR){ $("#selTime").html(response); }); oXHR.fail(function (jqXHR, textStatus, errorThrown){ console.error("The following error occured: "+textStatus, errorThrown); }); $('#selTime').show(); $('#message').html('now select the time you want'); }); $("#selTime").change(function(){ if (oXHR){ oXHR.abort(); } var $form = $('#timeSel');
  95. 95. 10 - Appendices 95 © Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH Telephone: var $inputs = $form.find("input, select, button, textarea"); var cfTime = $('#selTime').val(); document.cookie="selTime="+cfTime; var serializedData = cfTime; oXHR = $.ajax({ url: "fetch_one_image.php", type: "post", data: serializedData }); oXHR.done(function(response, textStatus, jqXHR){ $("#output").attr("src", response); }); oXHR.fail(function (jqXHR, textStatus, errorThrown){ // log the error to the console console.error("The following error occured: "+textStatus, errorThrown); }); $('#message').html('You can change the time or camera or date'); $('#message').fadeOut(8000); $('#message').html('Click the image to zoom in or out'); $('#message').fadeOut(8000); }); $('#output').click(function(){ $(this).toggleClass('output-lrg'); }); }); $('lg-logout').click(function(){ window.location.replace = "logout.php"; }); 10.2.2 cfarc.scss /* This css file is generated using sass with the compact flag, please remember to generate application css with sass to reduce the footprint. /*Table of contents 1. Normalise.css 2. Tables 3. ID selectors 4. Class selectors 5. Global CSS 6. Input types */ /* The first section is a fork from git.io/normalize to reverse browser specific styling * and try to alleviate some (in particular IE) styling issues with HTML5 and CSS3 */ /* 1. /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom.

×