Web Design and Development (Part 2)

Solution

Task Title: Web Design and Development (Part 2)

Subject Code: SET11112

Objective: Objective of this task is to add dynamic feature to the existing HTML prototype of the task done during Part-1 of this assignment. This task must also produce a word document (Size 1000 word) to describe the development processes. 

 

Overview: The target web-site prototype must address the requirement of a Flower selling website. The website must use server-side scripting language like PHP to implement Login, Signup, Product cart, Buy option, User profile page etc.       

 

University: Edinburg Napier

Tool requirement:

  • Notepad++: This word editor is required for the editing of the HTML and CSS files.
  • Web Browser: Web-browser software like Mozilla Firefox is required for testing of the web-pages in the local system.
  • PHP 7: This web-designing language is required for the server side scripting. It will help to achieve dynamic feature in the website.
  • Apache: Apache web-server is required in this task to run PHP scripts in the server side.
  • MySQL: It is a RDBMS software and it is required in this design to store data persistent manner in the system.
  • MyPHPAdmin: This PHP based application is required to manage MySQL data using a GUI interface. It also help to port database from one system to another.    

Development Procedure:

  • Initially Apache web-server was configured for the PHP file processing.
  • MySQL database was setup to hold user login credentials.
  • All existing HTML pages were renamed with .PHP extension.
  • PHP files were placed in a folder under the Apache root path. 
  • Dynamic logic and Database connectivity were implemented in the PHP language.
  • Proper testing ware performed on the target dynamic pages according to the test plan.  

Sample Output:

 

SET11112 Web Design and Development Spring (tr 2) 201 9 Coursework Specification 1. Schedule Coursework handed out January 201 9 Submit coursework 1 (zipped) to Moodle by 15:00 on: Fri day March 1st (week 7) Coursework demonstrations In the practical sessions, Wednesd ay 3rdApril and Wednes day 10thApril Submit coursework 2 (zipped) to Moodle by 15:00 on: Fri day 12 thApril (week 1 3) 2. Scenario Your web design company is bidding for the contract foran online ordering and door -to-door flower delivery service . The customer creates an account and logs into the site to order one or more products. The products are delivered by motorcycle within the hour to the customer's door. The customer pays the delivery person . Your first task, and the only one to fall within the remit of this module, is to produce a working prototype to show the cu stomer. Should the customer accept your convincing proposal, the y will award the contract to complete the site. The completion of the site is not within the scope of this module – you don't have to do it. In your design you will certainly consider the customer's user interface and make it usable and professional -looking. Do not forget that the delivery company also needs a separate user interface, equally professionally designed, with adequate security to prevent casual vandalism. 3. Submission Requireme nts 3.1 Part One (40% of the module marks, submitted half way through the trimester) The decision to pass or fail a student depends on the total marks for both courseworks . It is not possible to predict a pass or a fail , based solely on the marks for part o ne. Part one involves the submission, to Moodle , of a written report and a simple prototype site , all in a zipped file with the name of nnnn.zip, where “nnnn” is your matriculation number 3.1.1 Write, in 25 -50 words, a mission statement for your web site. A mis sion statement will help you to visualise what you and your client want from the site, and ways to achieve this. Mission statements are often the decision of higher management. However, if the client is not forthcoming, the web designer can make suggesti ons as a basis for negotiation. In this section you will be marked on clarity of vision and whether you are able to keep to the word limits . (25 -50 words, 3 marks) 3.1.2 One of the labs you did at the start of the module was to research similar web sites. Eventually you will need a way of comparing the quality of your prototype with that of its competitors. Compile a list of ten criteria which could be used to measure the quality of a site such as yours. Try to select criteria on which independent assesso rs might agree. For example “nice” is too open to individual interpretation; “generous use of white space” is better; “the page height lies within the average browser window so scrolling is not necessary” is very precise, though not necessarily applicab le. For each criterion, give a short description of why you decided that it was important in this context. In this section you will be marked on the clarity and feasibilityof your criteria and explanations . (10 criteria, 10 marks) 3.1.3 Courseworks one and tw o only cover the production of a prototype web site. If your proposal and initial prototypes are approved, you will be awarded the contract for the complete web site. Write out a set of requirements for the complete web site A good test of quality for a set of requirements is, "Can you hand these to a professional developer and get a good working site in return?" Requirements are decisions. No marks will be given for general principles. Thus, "A pale background" will not attract marks, whereas "A pal e yellow background" will. You will be marked on the detail and clarity of your requirements. (500 words max. , 12 marks) 3.1.4 Submit a zipped file containing a simple horizontal prototype for the site, containing three linked web pages. "Horizontal prototype" means that it looks real, but it doesn't actually work. The pages are to be of HTML, CSS and images only, i.e. no PHP or other server languages. The pages are to be as follows: • The application's landing page (home page) • A page containing an HTML form. • Another page for the web -site. Marks will be given for appearance, uniformity, correct use of the technologies and an appropriate file structure. As with all coursework, higher marks will be awarded for work of a higher standard. (15 marks) 3.2 Part Two (60% of the module marks, submitted near the end of the trimester) Part two involves the creation of a working interactive web site. It also involves the submission, to Moodle , of a written report and a copy of the files of the site in a zipped file. The file name is to be nnnn.zip, where nnnn is your matriculation number .In addition to the files from the server, please include an exported file of your database (use PhpMyAdmin to export the file). Please add to your written work any log -in name s, URLs or passwords or other instructions needed to access the site. As with all coursework, higher marks will be awarded for work of a higher standard. 3.2.1 You are to create a web site which runs on a server and is visible on the internet. You may use the WDD virtual server, or upload your work to another server of your own choosing. Your web site should be interactive and contain the following features: • At least three web pages • Client -side form validation • User account creation • Login and password authenti cation • PHP sessions and session storage • CRUD (create, read, update, delete) database functionality. • Your code is to validate against the W3C HTML5 document type definition and CSS definition. • Your written report is to contain details of URLs , login names and passwords needed to access your site. (40 marks) 3.2.2 For this coursework you have produced an interactive prototype, designed to help show the client what the site could be like. Nevertheless, there will be more work to do before the site goes live and st arts accepting real orders. Your written report must now outline t hatextra work needed to make your current interactive prototype into a working professional web site. You will be marked on the quantity, detail and clarity of your requirements. (500 words max. , 10 marks) 3.2.3 Your written report must contain a reflection on your work for this module, outlining what you have learned about web design. Mark will be awarded for the number and quality of insights (500 words max. , 10 marks) 3.2.4 Demonstrate your web -bas ed work to the lecturer prior to handing it in. This is to ensure that you understand your code and can explain it and thus demonstrate authorship. There will be 32 marks for the demonstration itself. There will also be a further 8 marks for the correct ness of your code. Also, the demonstration is a condition for getting ANY marks in coursework two. Said another way: if you don’t demonstrate your work, you won’t get any marks for coursework two. During the demonstration you will be assessed on the sp ecification for the application (see section 3.2.1). I.e. the ability to create an account, log in, read -write -update -delete database entries. You will be assessed on form checking, uniformity of style and professionalism of appearance. You will also re ceive marks for the professional appearance and uniformity of your pages, and the syntactic correctness of your code. 4. Notes Plan to spend a total of 55 hours on your coursework, apportioning your effort according to the marks available for each section. Reflection after Part One may lead you to modify your design or evaluation criteria. This is encouraged. Part Two will be marked without reference to Part One. Normal School of Computing regulations apply to your submission. They are published separat ely in your student handbook. Try to avoid accusations of plagiarism: • Do not copy and paste text from the Internet. • If you use code from the internet, please acknowledge it in comments in the code and also in the report. • After reading reference materia l, lay it down where you cannot see it and write your own interpretation in your own words. • Credit will be given for good referencing. • In preparing your application, do not copy material from other web sites at all. Check that both your web applications are completely visible to someone who is not logged in as you. (Ask a friend to check.) 5. Relationship to the module learning outcomes This module has the following learning outcomes: LO1: Critically evaluate the current standards & technologies used to develop WWW systems (Maps onto the report of coursework 2.) LO2: Critically analyse the motivation behind trends in modern web technologies and identify emerging issues. (Maps onto the repo rt sections of both courseworks.) LO3: Design, develop and evaluate a suite of web pages using appropriate web technologies (Maps onto the web site construction of both courseworks.) Assessment Brief Proforma 1. Module number SET11112 2. Module title Web Design and Development 3. Module leader M J Rutter 4. Tutor with responsibility for this Assessment Student’s first point of contact M J Rutter 5. Assessment Practical assessment with report 6. Weighting 100% of module assessment 7. Size and/or time limits for assessment Reports: Report 1 max 1000 words. Report 2 max 1000 words. Expect to spend 55 hours on this assessment 8. Deadline of submission See coursework specification attached 9. Arrangements for submission Upload your completed work in a zipped file to Moodle . You are advised to keep your own copy of the assessment, as student work will not be returned. 10. Assessment Regulations All assessments are subject to the University Regulations 11. The requirements for the assessment See coursework specification attached 12. Special instructions None 13. Return of work and feedback Feedback will be supplied within 3 working weeks of a submission. Student work will not be returned. 14. Assessment criteria See coursework specification attached