A group of past and present students have formed an OU Walking Club, where they can take part in organised walks and socialise.
Following a recommendation from the OU Running Club, the club organisers have contracted Online Solutions to undertake the design of a website targeted to the needs of current and new club members (the 'club website'). The design proposed by Online Solutions will allow current and potential club members to view planned walks, news and other events. It will also enable new club members to sign up and consent to receive email announcements, and current club members to post their own walk events.
However, this process has not addressed how the content of the club website is to be managed.
The club organisers (the 'admin team') are keen to create a web application that will support the day-to-day administrative tasks that are essential if the website is to fulfil its design goals (the admin application). Without this web application, these tasks can only be accomplished by people who have the knowledge and skills to work with PHP and MariaDB directly. It is hoped that, by creating a web application, the work can be shared among all members of the clubs admin team.
The admin team has had several meetings to try and establish what the admin application should provide in terms of basic functionality, but they are concerned about some of the implementation details, and the security of the application.
Only two members of the admin team have any experience of managing the development of a web application from concept to deployment. The team is therefore looking for some practical advice about development, testing and version control for the application.
Online Solutions are too busy to develop the admin application, so the admin team have asked you to step in.
Based on the outcome of their discussions the admin team has identified the following features for the admin application.
The calendar of walking events is continually updated throughout the year, so the admin application must allow the admin team to add a new walk, or to approve a walk proposed by a club member.
Walk events are described as follows:
Experience has shown that errors can be made by users when providing information about an event, so it must be possible for the admin team to change the details of a walk after it has been created.
The club tries to encourage greater interaction between members through a series of social events. These events will be publicised on the club website, but will be added using the admin application. The admin application must allow the admin team to create new events by providing the name, date, time and location.
The club website allows potential members to sign up to join the club. The information collected on each member is their full name, email address, chosen password, and their consent (or not) to receive announcement emails.
Club members are responsible for updating their own information using the club website. However, because members may be slow to make changes, the admin team has agreed that any member who has not engaged with the website for more than 24 months should be removed from the active members list using the admin application.
The admin application should allow the admin team to:
The admin team recognises that if the club website is to be a valuable resource to members, it must keep them informed of other walking-related events. News items are intended to be quite short, a maximum of 300 words, and when added will include the dates for first and last showing of the item. When a news item is added, the record must include the identity of the user posting the item.
The admin team would like to be able to send announcements as emails to the entire membership, but only to those members who have given their prior consent. The emails will be plain text with the option of a single file attachment. The application should provide the facility to create the announcement, select an attachment, and specify the date that the email should be sent.
The admin application must be protected to ensure that only members of the admin team can access its functionality.
The scenario and requirements provide context and background to the questions and tasks that follow. As with any web development project, the specification may be incomplete. If you encounter a gap or ambiguity in the application requirements you should make reasonable assumptions and state these in your answers where necessary.
This section provides details of the various questions that you should answers and tasks that you should complete as part of your project. You are only being asked to develop parts of the solution, as set out in the individual questions. Do not do more than this!
If you encounter difficulties with the practical tasks, and find you are unable to produce a fully working solution in the time available, then you should still submit what you have done. Then, when you write your report for this part of the assignment, explain to your marker what you did, what problems or errors you encountered, and what further you would like to have done - and how to fully develop your solution.
There is no single 'correct' answer or solution to any of the following questions. Your answers will be assessed against the learning outcomes given earlier in this document.
Your answers to all the written questions in Part 2 of the assignment should be submitted in a single word-processed report document. Your report must be written in language suitable for its intended audience and have a:
Your written work is expected to draw from the module materials, but you should also use two or more external sources to support or justify one or more of your answers. While each section of your report may refer to information in the other, you must make different points in each section. There is no credit for repeating the same point more than once.
Marks will be awarded for a suitable report title, headings, spelling, grammar, structure and referencing, as well as for content. Please include the word count at the end of each answer where a word limit is given. There is no word limit for the introduction or conclusion.
Both parts of this question are about the admin application.
1(a) Navigable wireframes
Online Solutions have produced wireframes for the club website. The admin team feel that these wireframes help to clarify the overall structure and navigation of the club website, and they would like to see something similar for the admin application. They are keen to know if the requirements they have identified can be rationalised into a coherent set of web pages that illustrate how the various features of the application will be presented to an admin user.
Your task is to create 'interactive' (i.e. navigable) wireframes of your proposed solution for the administration application as it might appear on a laptop or desktop screen (i.e. 1024px wide, landscape orientation). The wireframes should demonstrate how the different parts of the application are organised, what information is displayed on each page, how navigation works between the pages, and so on. Pages returned by a server in response to specific user input are not required.
Your wireframes must be submitted as a set of one or more HTML files and may also include CSS and image files. You can use Pencil, a text editor, or any other tool with which you are familiar to create these files. Submitting your wireframes in any other format will result in a penalty being applied.
Should you decide to use Pencil, you must use the 'Export Document' option to export your wireframe as a Single web page using the Default HTML Template. This creates a HTML file and a folder of images which ensures that the client can review your wireframe without the need to install the Pencil application. You should not make any further changes to these files.
Collect the files that make up your wireframes into a single ZIP archive, retaining any folder structure that you may have created (e.g. that created by Pencil). Please name the file using your own OUCU (namely 'OUCU_Q1.zip') and record the filename for your marker in your report document.
It is essential to keep in mind that a wireframe illustrates successful capture of an application's requirements by means of content and information architecture. It is not about implementation or branding, so should not include coloured text or images. The file 'emaWireframeResources.zip contains simple placeholder images (bars, squares and rectangles) and a file of Latin text that you can use to illustrate how content will be displayed on a page. You can set the image width and height attributes to the size required.
You may find the following pointers useful.
1(b) Explanation
In your report for the admin team, provide a description of the role of wireframes in web development. Then explain how the design demonstrated by your wireframes fulfils the requirements they have outlined.
Hint: imagine that you meet with the admin team and walk them through the key features of your solution - this is not simply an explanation of what you have done, it is an explanation of why your design is appropriate.
You have a maximum of 500 words for Question 1(b).
2(a) 'Add walk' page for laptop screen
This part of the question is about the admin application.
The admin team is keen to see some ideas for the visual design of the admin application. Given that the application is not accessible to the public, the design is not required to meet the OU ICE guidelines, but the implementation must be standards-compliant.
Your task is to create and validate a web page containing a form to allow a member of the admin team to add a walk event. The overall page layout should be consistent with your wireframes and must be valid HTML and CSS. The page must, of course, be an actual realisation of the corresponding wireframe component and not simply a repetition of a part of the wireframe itself.
Validate your HTML using the W3C Markup Validation Service.
You can validate the file by uploading it directly to the validator service. Make sure that you are using the HTML5 option. There should be no errors reported. As with earlier assignments, you are not required to address any warnings that may be reported. You should also validate your CSS, but you are not required to provide evidence of this.
In your report document, provide a screenshot of the part of the page that shows the line 'Document checking completed' and the tags within the < head> tag of your source code just below.
2(b) Responsive 'Add walk' page
This part of the question is about the admin application.
Some members of the admin team are interested in the possibility of carrying out some admin tasks using a mobile device; for example, while they are on a walk. They would like to see how the admin application might be presented on a mobile device.
Your task is to copy your solution to 2(a) and amend the CSS and HTML as appropriate to present the same form on a smartphone-sized screen.
Your 2(b) solution should work for two combinations of device and orientation: a mobile device in portrait orientation and a laptop device in landscape orientation. Therefore, your solution should work at two screen widths: 375px and 1024px ('Mobile M' and Laptop in Chromes Device Toolbar, as described in Block 3 Part 1 Activity 5). Your solution is not required to respond appropriately to widths less than, between, or greater than these two values.
Hint: as you saw in Block 3 Part 3, page layout on mobile device screens is typically a single column, with the most useful or commonly used content or functionality presented sooner. For forms, labels are often presented above inputs rather than to their left. In addition to examples provided in Block 3, the file 'emaMobileResources.zip' provides a further example of some HTML and CSS which you can adapt if you wish.
Validate your HTML using the W3C Markup Validation Service.
In your report document, provide a screenshot of the part of the page that shows the line 'Document checking completed' and the tags within the tag of your source code just below.
Collect the files that make up your 2(a) and 2(b) solutions into a single ZIP archive, retaining any folder structure that you may have created. Please name the file using your own OUCU (namely 'OUCU_Q2.zip') and record the filename for your marker in your report document.
2(c) Explanation and recommendation
This part of the question is about the admin application and the club website.
In your report for the admin team, describe the features of the page design in your 2(b) solution that make it responsive. Explain any choices or compromises you made, or difficulties you encountered, in making the page and form responsive to (and usable on) a mobile screen. (It does not matter if you made these changes in your 2(b) solution or they were already present in your 2(a) solution.)
Then, given this experience, and drawing on your view of the likely needs of club members and the admin team, discuss whether the admin team should focus on making either the club website or the admin application (or both) responsive to mobile devices, or whether they should consider another approach.
You have a maximum of 500 words for Question 2(c).
This question is about the admin application and the club website.
In your report, for the admin team, explore authentication and authorisation requirements for both the club website and the admin application, and propose solutions to meet those requirements. The admin team are not very familiar with these two, similar-sounding terms, so you will need to explain them. Your answer should cover the following points.
1. Define authentication, and identify two different ways in which users could be authenticated with the club website and admin application. Recommend which of these is more appropriate for the walking club, and briefly justify your recommendation.
2. Identify a step that should be taken to secure authentication data while in transit over a network or in storage in a database, and briefly describe what risks this step mitigates.
3. Define authorisation, and propose the different levels of authorisation that would be required across the club website and admin application. Explain the importance of having different levels of authorisation and the potential consequences of getting this wrong.
You have a maximum of 600 words for Question 3.
This question is about the admin application.
The admin team will need to undertake the acceptance testing of the completed application before signing-off the project, so they have asked for some examples of the work they will need to do.
Your task is to prepare four acceptance tests that verify the functionality of those parts of the admin application that will
Two tests are required for each part: one describing good data leading to a successful outcome, and one describing bad data leading to an unsuccessful outcome.
Each test should be presented in your report in a tabular form consistent with Table 4 in Block 4 Part 5. Your table should provide details of the setup requirements, the instructions to the tester, and the expected outcome of each action. These tests should assume that the design proposed in your Question 2(a) solution has been implemented, but are not required to cover every possible good or bad scenario.
There is no word limit for Question 4.
Both parts of this question are about the admin application.
5(a) Advice on version control
The admin team are aware that the application development must be carefully managed, and that some form of version control must be put in place from the outset of the project.
In your report for the admin team, explain the purpose and value of version control for development of the admin application, and propose how version control should be used in this project.
You have a maximum of 300 words for Question 5(a).
5(b) Evidence of version control
Create a version control repository and use it as you develop your solutions to Questions 2(a) and 2(b). You can use TortoiseSVN or equivalent macOS software, as described in Block 4, or an equivalent version control system with which you are familiar (e.g. git).
As evidence for your marker of your use of version control for your EMA files, you should provide either:
Please ensure that your evidence is self-explanatory by providing captions to images. Failure to clearly identify what the evidence shows will lose you marks.