Unit 41 Programming in Java and Unit 35 Web Application development ([email protected])

Department of Information Technology Page 1 of 10

HND Assignment Brief Session: September 2015

Programme title BTEC HND in Computing and Systems Development

Unit number and title 35 Web Applications Development (L5)

Assignment number & title 1 of 1 Web Applications Development (L5)

Unit Leader Dr. Gebremichael

Assessor (s) Yonas Gebremichael and Hassan Baajour

Issue Date 30 Sep 2015

Final assignment submission deadline 28 Dec 2015 – 09 Jan 2016

Late submission deadline

11 – 16 January 2016 The learners are required to follow the strict deadline set by the College for submissions of assignments in accordance with the BTEC level 4 – 7 submission guidelines and College policy on submissions. They should also refer to Merit and Distinction criteria that require evidence of meeting agreed timelines and ability to plan and organise time effectively without which the learner may not expect to receive a higher grade.

Resubmission deadline TBA

Feedback

In-class feedback will be available from draft submissions on a task- by-task basis as a formative feedback and also for initial submission. Final feedback will be available within 2 – 3 weeks of the assignment submission date.

General

Guidelines

1. The work you submit must be in your own words. If you use a quote or an illustration from somewhere you must give the source.

2. Include a list of references at the end of your document. You must give all your sources of information.

3. Make sure your work is clearly presented and that you use readily understandable English.

4. Wherever possible use a word processor and its “spell-checker”.

Internal verifier Dr. Hasan

Signature (IV of the brief) * Dr. Hasan Date 06/10/15

Department of Information Technology Page 2 of 10

ICON College of Technology and Management BTEC HND in Computing and Systems Development

(CSD) Unit 35: Web Applications Development (L5)

Session: September 2015 Coursework

Recommended maximum words: 3,000

This Unit will be assessed by assignment and Presentation. You are strongly recommended to read “Preparation guidelines of the Coursework Document” before answering/solving your assignment. Scenario Lingo Academy provides people with short time courses in IT. You are required to create a simple web

application which we will call ‘Lingo Management System’ for the purpose of maintaining student’s

details and monitoring their academic progress. The system has an admin who has full administrative

rights to register, remove, update and maintain the students’ details and to register and update

courses in the system. Each course at Lingo Academy has only one teacher who has the rights to

insert and update the grades directly in the system only for his students (less than 50 Fail, between 50

and 60 Pass, between 60 and 70 Merit, above 70 Distinction). The student should be able to login to

the system and check his progress. To implement the site, you must use HTML5, CSS and JavaScript

for the client- side coding. PHP must be used for the server side coding. The site must run from a local

web server. The backend will be built with MySQL Server database.

Functional Specification 1. Accounts Creation

- Create HTML forms as needed to create accounts for the users of the system and to store and

maintain the required data.

- Account and other data (e.g. courses) details are to be stored in your MySQL database.

- The system must prevent duplicate usernames being chosen (Do not use the email address

as a username).

-

2. Forms Validation

It is important that you validate the forms on client side using html5 and JavaScript code, in addition to

the validation using server side code (i.e. PHP) and you should display proper error messages as

needed.

3. Authentication

Any available login form on your website should be usable by the all the user types of the system,

however they should be allowed to access only what is related to their roles.

Department of Information Technology Page 3 of 10

4. Search

The admin and the teacher should be able to search available students. However, the teacher should

only be allowed to find and view his own students. Also, all users of the system should be allowed to

search and find courses available in the system.

5. Contact

Your website must provide users with a contacting form that uses html5, JavaScript and PHP. The

form should send the message directly to the admin or the teacher depending on the user selection. It

should as well keep a copy of the email inside the MYSQL db.

6. Other issues Your website should look simple and nice and must include minimum 5 different pages including

home, courses, about, contact us (public pages) and accounts management (private pages). All public

pages must have a header and footer with relevant logo, navigation links menu, login form, images

and/or videos.

Task 1 In the reference to the above scenario:

1.1 Critically evaluate the functions and advantages of web applications. [P1.1]. 1.2 Critically compare different types of server-side and client-side scripting languages. [P1.2, M1]. 1.3 Examine web security concerns and make recommendations for security improvements for

your web application. [P1.3].  To achieve M1; Student has to define clearly the difference between the client side and server

side languages. In addition, student has to identify and define multiple server and client side

languages and to list main differences between them.

Task 2 This task focuses in the design of the web application and associated database. Within this context

and in the reference to the above scenario: 2.1 Design a web application to meet the given requirements in the scenario above. Use all relevant

techniques such as wire-framing, storyboarding and sitemap. Your website shall have all the

relevant pages for full implementation of the above scenario including a sitemap. [P2.1, M2] 2.2 Demonstrate a client-server architecture suitable for your web application. [P2.2, D1] 2.3 Design a database system for use in your web application. [P2.3, D2] 2.4 Evaluate alternative designs and solutions to meet a given requirement. [P2.4]

 To achieve M2; Student has to introduce proper and consistent wire-frames and storyboards

including header, footer, main content sections with logo, navigation links menu, login form,

crumb-bread, relevant images and videos … etc.

Department of Information Technology Page 4 of 10

 To achieve D; Student has to illustrate proper client-server architecture that suits his system

and has to demonstrate the role of each component and how they communicate together.

 To achieve D; Student has to create a multiple tables database, demonstrate the relations

between them and justify his design.

Task 3 This task aims to establish a good familiarity with the implementation of the web application using

proper client-server technologies connected to a relational database using html, CSS, JavaScript,

PHP and MySQL DB. To this end you have to:

3.1 Implement the proposed wireframe and storyboards introduced in task 2 using mark-up and

scripting languages as appropriate: HTML for web pages, CSS for presentation styles,

JavaScript for client side script [P3.1]. 3.2 Implement web-enabled database management system to store, retrieve and manipulate data

in the web application as specified in the scenario above using PHP and SQL queries. [P3.2, D3]

3.3 Identify and implement opportunities for error handling and reporting. [P3.3]

 To achieve D3; Student has to implement a proper functional system that reflects creativity in

developing the proposed client-server architecture introduced in Task 2.

Task 4 4.1 Review and test your web application on front end and back end levels. [P4.1] 4.2 analyse actual test results against expected results to identify discrepancies (Use verification

table). [P4.2]

4.3 Critically evaluate independent feedback on a developed web application and make

recommendations for improvements [P4.3, M3] 4.4 Create user documentation for a developed web application. [P4.4, D3]

 To achieve M3; Student has to list the independent feedback and demonstrates how they will deal with it in proper way.

 To achieve D3; Student has to provide proper documentation for the technical side in a way that allows other developers realise how to fix and update the code of the system. Also student has to demonstrate clearly how the actual user of the system will be able to use it. The user guide has to include clear instructions and relevant screen shots.

Assessment Methods This is an individual coursework.

There are TWO components to this assignment.

1. Your system will be assessed at a laboratory demonstration/viva where the complete system

(software or hardware) you produced will be demonstrated and you will be asked to answer

related questions. For this, you will need to prepare a power point presentation or similar

Department of Information Technology Page 5 of 10

presentation package of your choice to aid your oral presentation. The presentation will last

no more than 10-15 minutes. You will be marked on content, presentation style and clarity of

delivery. This is important and you should treat it as an examination.

2. You will need to produce a short report addressing all the questions in each learning outcome.

You must include your power point slides in this report. There is no written examination for this unit.

Additional Specs, Hints & Good Programming Practices • The marking scheme for this coursework will assign marks for Functionality, Quality of Code,

Program Design, Style, Documentation and Working Binaries. Style and Documentation are

crucial – you must neatly comment your code.

• Try and break the coursework down into do-able chunks as identified by the task list. These

are distinct programs in the coursework, so try and modularise your effort – for instance - first

you need to set up the menu system and build functionalities of each menu item one by one.

This approach will help in the testing and debugging process of your code.

• You should aim in achieving good level of Modularity in implementing your developed

Algorithm and to avoid High inter-Dependability between the implemented Functions of your

Program Code.

• DEBUGGING HINT: Compile and test your program after every change, even if it was as simple a change as adding a single line. This will allow you to find and fix errors early before you write more code. This is another reason why you have to write the skeleton program which runs first even if it does not do anything yet.

• Your main program should have the following heading shown below. You must customise it to

your particular details.

/*************************************************************************************

About: This program is written as part of the fulfilment for the ‘put your Unitname’

Course - HND in EEE/CSD at Icon College, London.

Date : Put date here

By : Put your name here. Student ID: Put your student ID Here

*************************************************************************************/

• Each function must have its own comment heading which describes exactly what the code

does as shown below as an example.

/*************************************************************************************

About: This program takes your date of birth as an input and returns your age.

*************************************************************************************/

In addition to the above, follow good programming practices. Below are some of the common good

practices generally accepted as industry standard and followed by those in industry. You will get more marks for following good programming practices. Some examples are given below.

• When naming identifiers,

Department of Information Technology Page 6 of 10

o Do not start with underscore (used for technical programming). e.g. _grades (this is

bad practice)

o Write single word variables in all lower case , e.g. int grades, roots;

o Space is not allowed in identifiers, e.g. ‘student grades’ is wrong! write this as

studenGrades or student_grades. Note the use of capitalisation or the underscore.

o Use CAPITAL LETTERS TO DECLARE CONSTANTS, e.g. PI = 3.14, SIZE = 100;

o Start function names with capital letters. e.g. AverageGrades(). Spaces are not

allowed in function names. ‘Average Grades()’ is wrong. Use AverageGrades() or

Average_grades().

• Emphasis and care must be taken in producing good descriptive COMMENTS in the Program

Code, following a ‘tidy’ indentation of the Program Code, and using descriptive names for the

Functions and Variables implemented in the Program Code.

• Make a habit of using Meaningful identifier and Function Names to make your code easier

for others to understand. Think about it, what does "g" mean? Is it grades, garbage, grave,

etc. Thus do not use cryptic identifier names, e.g. Use ‘grades’ to refer to student grades

rather than ‘g’. Similarly, use sensible function names. If you want to write a function that

assigns student’s grades, then call it StudentGrades(). Do not use your names or names of

your pets or any name that does not describe what the function does, but at the same time do

not use more than 3 words, i.e. do not use a sentence to name a function. e.g.

ThisIsMyAverageFunction() while syntactically correct is not good programming practice.

• You are encouraged to use efficient Programming skills in implementing the designed

Algorithm, e.g. for avoiding unnecessary Variables Declarations etc., and in taking into

consideration the Computational Costs in Hardware of your written Program Code, e.g. avoid

unnecessary Repetition Statements etc.

• Remember PHP & JavaScript are case sensitive so ‘Grades’ and ‘grades’ are not the same as

identifier names. Thus be case and spelling consistent. Use an identifier name only once

and spell it (upper and lower case) the same way within your program.

Finally give the project and your report a sensible name like E.g. Unit35_CW_ID3344.

Department of Information Technology Page 7 of 10

Relevant Information

To gain a Pass in a BTEC HND Unit, you must meet ALL the Pass criteria; to gain a Merit, you must meet ALL the Merit and Pass criteria; and to gain a Distinction, you must meet ALL the Distinction, Merit and Pass criteria 1. Outcomes of the unit and assessment criteria

Outcomes Assessment criteria for pass. To achieve each outcome a learner must demonstrate

Questions reflecting the outcome

LO1.

Understand the concepts

of web application

development

1.1 critically evaluate the functions and advantages of

web applications

1.2 critically compare different types of server-side and

client-side scripting languages

1.3 examine web security concerns and make

recommendations for security improvements

Task 1 & TCA

LO2.

Be able to design web

applications

2.1 design a web application to meet a given

requirement

2.2 synthesise client-side and server-side functionality

in a web application

2.3 apply a database design for use in a web

application

2.4 evaluate alternative designs and solutions to meet a

given requirement

Task 2 & TCA

LO3.

Be able to implement

Web Applications

3.1 implement a web application to a prepared design

using client-side and server-side scripting languages

3.2 implement a web-enabled database management

system to store, retrieve and manipulate data in a web

application

3.3 identify and implement opportunities for error

handling

and reporting

Task 3 & TCA

LO4.

Be able to test Web

Applications

4.1 critically review and test a web application using a

web enabled database management system

4.2 analyse actual test results against expected results

to identify discrepancies

4.3 critically evaluate independent feedback on a

developed web application and make recommendations

for improvements

4.4 create user documentation for a developed web

application.

Task 4 & TCA

Department of Information Technology Page 8 of 10

2. Grading Criteria for Merit and Distinction of this coursework Merit (M1, M2, M3) Distinction (D1, D2, D3)

Descriptors Indicative characteristics Descriptors Indicative characteristics

M1. Identify and

apply strategies to

find appropriate

solution

 Pass requirements

achieved

 effective judgment

have been made

 an effective approach

to study and research

has been applied

D1. Use critical reflection to

evaluate own work and

justify valid conclusions

Pass and Merit requirements

achieved

 The validity of results has

been evaluated using

defined criteria

 Realistic improvements have

been proposed against

defined characteristics for

success

M2. Select/design

and apply

appropriate

methods/techniques

 Relevant theories and

techniques have been

applied

 A range of sources of

information has been

used

 The design of

methods and

techniques/sources

has been justified

D2. Take responsibility for

managing and organising

activities

 Autonomy/independence

has been demonstrated

 Substantial activities,

projects or investigations

have been planned,

managed and organised

 Activities have been

managed

 The importance of

independence has been

recognised and achieved

M3. Present and

communicate

appropriate findings

 The appropriate

structure and

approach has been

used

 Coherent, logical

development of

principles/concepts for

the intended audience

 A range of methods of

presentation has been

used and technical

language have been

accurately used

 Communication has

taken place in familiar

and unfamiliar

contexts

D3. Demonstrate

convergent/lateral/creative

thinking

 Ideas have been generated

and decisions taken

 Convergent and lateral

thinking have been applied

 Problems have been solved

 Innovation and creative

though have been applied

 Receptiveness to new ideas

is evident

Department of Information Technology Page 9 of 10

3. Preparation guidelines of the Coursework Document a. All coursework must be word processed. b. Document margins must not be more than 2.54 cm (1 inch) or less than 1.9cm (3/4 inch). c. Font size must be within the range of 10 point to 14 point including the headings and body text

(preferred font size is 11). d. Standard and commonly used type face such as Arial should be used. e. All figures, graphs and tables must be numbered. f. Material taken from external sources must be properly refereed and cited within the text using

Harvard standard g. Do not use Wikipedia as a reference. h. Word limit must be strictly followed.

4. Plagiarism and Collusion

Any act of plagiarism or collusion will be seriously dealt with according to the College regulations. In this context the definition and scope of plagiarism and collusion are presented below: Plagiarism is presenting somebody else’s work as your own. It includes copying information directly from the Web or books without referencing the material; submitting joint coursework as an individual effort. Collusion is copying another student’s coursework; stealing coursework from another student and submitting it as your own work. Suspected plagiarism or collusion will be investigated and if found to have occurred will be dealt with according to the college procedure. (For details on Plagiarism & Collusion please see the student hand book)

5. Submission

a. Initial submission of coursework to the tutors is compulsory in each unit of the course. b. Student must check their assignments on ICON VLE with plagiarism software Turnitin to

make sure the similarity index for their assignment stays within the College approved level. A student can check the similarity index of their assignment three times in the Draft Assignment submission point located in the home page of the ICON VLE.

c. All Final coursework must be submitted to the Final submission point into the unit (not to the Tutor). A student would be allowed to submit only once and that is the final submission.

d. Any computer files generated such as program code (software), graphic files that form part of the coursework must be submitted as an attachment to the assignment with all documentation.

e. Any portfolio for a unit must be submitted as a hardcopy to examination office. f. The student must attach a tutor’s comment in between the cover page and the answer in the

case of Resubmission.

6. Good practice a. Make backup of your work in different media (hard disk, memory stick etc.) to avoid distress

for loss or damage of your original copy.

7. Extension and Late Submission a. If you need an extension for a valid reason, you must request one using an Exceptional

Extenuating Circumstances (EEC) form available from the College examination office and ICON VLE. Please note that the lecturers do not have the authority to extend the coursework deadlines and therefore do not ask them to award a coursework extension. The completed form must be accompanied by evidence such as a medical certificate in the event of you being sick.

b. Late submission will be accepted and marked according to the college procedure. It is noted that late submission may not be graded for Merit and Distinction.

c. All Late coursework must be submitted to the Late submission point into the unit (not to the Tutor). A student would be allowed to submit only once and that is the final submission.

Department of Information Technology Page 10 of 10

8. Submission deadlines Formative feedback Week 11 Presentation Week 12 Final Submission 28 Dec 2015 – 09 Jan 2016 Late submission 11 – 16 Jan 2016 Submit to: Online to the ICON VLE only Glossary: Analyse: Break an issue or topic into smaller parts by looking in depth at each part. Support each part with arguments and evidence for and against (Pros and cons). Critically Evaluate/Analyse: When you critically evaluate you look at the arguments for and against an issue. You look at the strengths and weaknesses of the arguments. This could be from an article you read in a journal or from a text book. Discuss: When you discuss you look at both sides of a discussion. You look at both sides of the arguments. Then you look at the reason why it is important (for) then you look at the reason why it is important (against). Explain: When you explain you must say why it is important or not important. Evaluate: When you evaluate you look at the arguments for and against an issue. Describe: When you give an account or representation of in words. Identify: When you identify you look at the most important points.