CIS015-2 – Web Technologies and Platforms
2019-2020
Assignment 2 – Apply development tools and scripting languages to develop one or more web-based applications such as a Content Management System (CMS) or database driven dynamic website
Student ID: XXXXX
<Student Name>
Table of Contents
Project Overview………………………………………………………………………………. 3
Introduction…………………………………………………………………………………….NEED TO UPDATE 3
Project Overview……………………………………………………………………………… .4
Aims and Objectives…………………………………………………….…………………… .4
Aims………………………………………………………………………………………4Objectives………………………………………………………………………………..5Scope…………………………………………………………………………………………….5
Resources……………………………………………………………………………………….5
Software………………………………………………………………………………….5Hardware…………………………………………………………………………………6Graphics………………………………………………………………………………….6Website Host…………………………………………………………………………….6Methodology…………………………………………………………………………………….6
Stakeholders…………………………………………………………………………………….6
Overview of Functional, Technical and Usability Requirements………………………6
Functional Requirements……………………………………………………………….6Operational Requirements………………………………………………………………7User Scenarios………………………………………………………………………………….7
UML Modelling…………………………………………………………………..…………….13
Use Case Diagrams……………………………………………………..…………….13Activity Diagrams………………………………………………………………………14Interactive Prototypes………………………………………………………………………..16
Selected Web Technologies…………………………………………………………………35
Justification of selection of Particular Technologies or Techniques……………….35
Project Constraints……………………………………………………………………………36
Project Risks……………………………………………………………………………………36
Project Plan / Schedule……………………………………………………………………….37
References………………………………………………………………………………………………..…….38
Appendix……………………………………………………………………………38
CIS051-2 – Web Technologies and Platforms
Assessment 2
Apply development tools and scripting languages to develop one or more web-based applications such as a Content Management System (CMS) or database driven dynamic website
Prototype hosted at: XXXX
Project Overview (EXAMPLE)
Title: QUKBedsStudents – Web Portal for Qatari Students studying at the University of Bedfordshire
Introduction (EXAMPLE)
The University of Bedfordshire is becoming increasing popular at a place of Higher Education study in the UK for International students. Such students are administered by the University’s International Office. In addition, there are an Increasing number of students from Qatar enrolling on courses at the University of Bedfordshire whether studying at Foundation, Undergraduate or MSc level. Of these some may be civilian sponsored by their employers, or maybe be employed and sponsored by a Government department or the Military.
According to Rivera, R. C. (2017) there is a rise in the number of students from Qatar studying in the UK.
According to the British Council in Qatar, 92 UK universities are supported by the Ministry of Education and Higher Education in terms of availability of funding for Qatari students wishing to study in the UK. (https://www.britishcouncil.qa/en/study-uk/scholarships-funding).
Besides the Ministry of Education and Higher Education, many other government and semi-government organisations in Qatar offer scholarships to Qatari students linked to employment opportunities.
The Qatar UK Embassy in London (https://london.embassy.qa/en) provides various services to students studying in the UK – including managing passports, visas, permits to return in Qatar, and applications for DRP. It also allows students to register their contact details in case of emergency. Contacts at the Embassy will also monitor student attendance and progress directly with the International Office of the University concerned.
While students from Qatar have a choice of the range of UK Universities, there are 4 or 5 approved Universities in the UK for Qatar students to pursue their military sponsored higher education studies – and the University of Bedfordshire is one of them. Although at least one of these Universities has a Qatar Society for students, there is little opportunity for Qatar students to communicate and share activities and ideas between the Universities.
The Qatar Society at the University of Nottingham (https://www.qatarsociety.co.uk/) provides the following services to Qatar students: services for international students at
ties
Providing guidance and information services for international students at Nottingham Trent UniversityProviding transportation informationProviding guidance for student accommodationProviding information on upcoming campus events and entertainment activitiesThe proposal initially was to develop a Web portal for all Qatar students studying at UK Universities in order to communicate and share ideas and news. This was considered too wide in scope and the intention is to produce an initial prototype just aimed at University of Bedfordshire Qatar students.
Aims and Objectives (EXAMPLE)
The proposal initially was to develop a Web portal for all Qatar students studying at UK Universities in order to communicate and share ideas and news. This was considered too wide in scope and the intention is to produce an initial prototype just aimed at University of Bedfordshire Qatar students. This would allow Qatar students to communicate, exchange ideas, news, and share information including details about University events and activities. There will also be a link to the Qatar Embassy website in London for the exchange / update of official visa/ passport information.
AimsDevelop a Web portal for all Qatar students studying at the University of Bedfordshire in order to communicate and share ideas and news.Allow Qatar students to communicate, exchange ideas, news, and share information including details about University events and activities.Display details of any up-coming eventsProvide a link to the Qatar Embassy website in London for the exchange / update of official visa/ passport information.Website will be user-friendly, easy to navigate, and viewable on a range of devices with different screen sizes and resolutions.Students will need to register to access all information on the site. Once an account is created then they will need to login.Students can manage personal account detailsAccounts will be created for Administrators to allow them to login.Administrators will also be able to update site contents.ObjectivesProduce an interactive prototypeCollect requirements from all stakeholdersDesign a workable, scalable and flexible solutionLearn the necessary technologies – HTML5, CSS, jQuery, PHPLearn other technologies – Bootstrap 4, WAMPLearn to use Adobe Dreamweaver, and graphics-editing softwareDevelop a responsive designUse a user-centric approach to layout designAll forms should be easy to complete and there should be entry validation.Server-side scripting will be written using PHPStudent account information and details about events will be stored using MySQL database.Source required graphicsScope (EXAMPLE)
The proposal initially was to develop a Web portal for all Qatar students studying at UK Universities in order to communicate and share ideas and news. This was considered too wide in scope and the intention is to produce an initial prototype just aimed at University of Bedfordshire Qatar students.
Project Constraints
Constraints include lack of technical knowledge, lack of time and poor planning.
Project Risks
Scope of project too large for the studentInability to meet deadlines and keep to plan / scheduleLack of determination to develop technical knowledge and skillsLack of support from the main stakeholdersResources (Example)
SoftwareWordPress 5.2 (Released Mya, 2019)Adobe Creative Cloud Dreamweaver CCAdobe Creative Cloud Photoshop CCAdobe FireworksWAMP ServerMySQL DatabasePHPMyAdminBalsimiq Mockups 3Domain NameHardwareGraphics:Website LogoQatar Embassy / Qatar logoOther imagesWebsite Host (for website and MySQL database)Prototype hosted at: http://www.bedford-computing.co.uk/qatar1
Methodology
An Agile (Anon, 2001) / prototyping methodology (tryqa.com, 2018) will be adopted for this project with stakeholders being consulted at every stage in the process. A simple, functional prototype will be developed within two weeks and will be demonstrated to the client and other stakeholders which will enable them to comment on functionality and layout.
Stakeholders (EXAMPLE)
Qatar EmbassyQatar Defence AttachéQatar Military personnelUniversity of Bedfordshire Qatar studentsUniversity lecturerOther University of Bedfordshire staffDesign Summary
Overview of Functional, Technical and Usability Requirements (EXAMPLE)
Functional RequirementsThe website will have five main pages – Home, About, Portfolios, Gallery and BlogResponsive design so can be used on a range of devices (screen size and resolution), and on mobile phonesA degree of browser computability is required. The project should be aimed at achieving compatibility with the latest and most stable releases of the most commonly used browsers – Google Chrome, Microsoft Internet Explorer, Microsoft Edge, SafariStudents can register for an account.Student can manage their account detailsEmphasis on easy browsing of large sets of data and finding recordings (listing and search)Multiple user roles with login for students and administrators (User Management)Validation of data input for login and other formsUsers can view and search for events and other informationUsers can register to request notification of events – by email, SMSLinks to other websites – Qatar Embassy, Qatar SocietyRSS feeds from other websitesNotifications about important events via email, screen alerts, SMS etcAdministrators can add, update and delete contentThere will be a facility for registered students to communicate – discussion group, forum, chat roomAbility to generate reports in a variety of formatsOperational RequirementsDatabase backendServer is required to host the website and databaseAn easily recognisable domain name will need to be registeredUsability RequirementsUser-centric designThe design should demonstrate evidence of a good understanding of web page interface design issues – for example, a consistent design for each page, layout of content, use of colour schemes and images, navigational methods, usability when viewed at various screen resolutions and various monitor dimensions.Simple and short forms for entering detailsContent can be added and updated easily and quicklyClear and intuitive navigationComplies with WW3 Web Accessibility Standards (WCAG)Text easy to read and resizableLanguage style should be appropriate with absence of grammar / spelling errorsThere should be a clear layout which remains consistent throughout the site. Style, layout and content should be appropriate for the purpose of the site.Page layout should be achieved using CSS.User Scenarios (EXAMPLE)
Student Registration:Primary Persona: Student
Goal: Successfully register to Qatar Student Communication Portal site
Start Condition: Student must have opened QMS site on web browseron his/her computer
Trigger: Student has opened QMS site and entered required details for registration
End Condition: Student successfully registered on the site and gets redirected to LogIn page
Steps:
Student opens web browser and visit QMS site linkStudent enters his/her nameStudent enters his/her NIDStudent enters his/her emailStudent enters his/her desired passwordStudent clicks ‘SignUp’ buttonPrompt appears telling about successful registration and that a verification mail has been sent to the email entered by the studentStudent get redirected to LogIn pageStudent Login:Primary Persona: Student
Goal: Successfully login to Qatar Student Communication Portal site
Start Condition: Student must have opened QMS site on web browseron his/her computer
Trigger: Student has opened QMS site and entered his/her credentials
End Condition: Student successfully logged into the system and gets redirected to main site
Steps:
Student opens web browser and visit QMS site linkStudent click the ‘LogIn’ optionStudent enters usernameStudent enters passwordStudent clicks ‘LogIn’ buttonIf credentials entered by Student are incorrect, prompt appears for invalid credentials and Student enters credentials againIf credentials entered by Student are correct, prompt for successful login appearsStudent get redirected to main siteStudent wants to view upcoming events:Primary Persona: Student
Goal: View all the upcoming events and their details, available on QMS site
Start Condition: Student must have opened QMS site on web browseron his/her computer and must have logged in to the QMS portal
Trigger: Student has logged into the QMS site and has scrolled to upcoming events portion of the site
End Condition: Student viewed all or desired upcoming events and their details
Steps:
Student logs into the QMS siteStudent is currently viewing the main siteStudent is to view upcoming eventsStudent scrolls down to the upcoming events section on the main page and clicks the ‘View All’ buttonStudent clicks the ‘Events’ button in the navigation bar in the header of the main siteStudent gets redirected to events pageStudent is able to different upcoming and ongoing events by scrolling down the events pageStudent clicks on ‘Details’ button of any event to view all information about the event and registration details for the eventStudent wants to view blogs on site:Primary Persona: Student
Goal: View all or particular blogs, available on QMS site
Start Condition: Student must have opened QMS site on web browseron his/her computer and must have logged in to the QMS portal
Trigger: Student has logged into the QMS site and clicks the ‘Blogs’ button in the navigation bar on main page of site
End Condition: Student viewed all or desired blog posts
Steps:
Student logs into the QMS siteStudent is currently viewing the main siteStudent clicks ‘Blogs’ button in the navigation bar in the header of the main siteStudent gets redirected to Blogs pageStudent is able to see the previews of all the blogs available on the site by scrolling down on the blogs pageStudent clicks on title of a blog to read the complete blogStudent gets redirected to the page containing the complete blog he/she desired to readStudent can also see the options to like, comment or share that particular blog he/she is viewingStudent wants to view his/her profile:Primary Persona: Student
Goal: View his/her profile on QMS site
Start Condition: Student must have opened QMS site on web browseron his/her computer and must have logged in to the QMS portal
Trigger: Student has logged into the QMS site and clicks the ‘My Account’ button in the navigation bar on main page of site
End Condition: Student views his/her profile
Steps:
Student logs into the QMS siteStudent is currently viewing the main siteStudent clicks ‘My Account’ button in the navigation bar in the header of the main siteStudent gets redirected to his/her profile pageStudent is able to see all of his information, followers, posts, blogs and notifications on this profile pageStudent can also edit or add any information he/she wants on her profileStudent wants to view other students and their portfolios:Primary Persona: Student
Goal: View portfolios of other students registered on QMS site
Start Condition: Student must have opened QMS site on web browseron his/her computer and must have logged in to the QMS portal
Trigger: Student has logged into the QMS site and clicks the ‘Portfolio’ button in the navigation bar on main page of site
End Condition: Student views all the other students registered on the site
Steps:
Student logs into the QMS siteStudent is currently viewing the main siteStudent clicks ‘Portfolio’ button in the navigation bar in the header of the main siteStudent gets redirected to portfolio pageStudent is able to see all the students and their basic portfolio, these are the students who are registered on QMS siteStudent can also click ‘Contact’ under each student’s portfolio to begin chat with him/herStudent wants to view gallery:Primary Persona: Student
Goal: View Gallery containing images and videos, available on QMS site
Start Condition: Student must have opened QMS site on web browseron his/her computer and must have logged in to the QMS portal
Trigger: Student has logged into the QMS site and clicks the ‘Gallery’ button in the navigation bar on main page of site
End Condition: Student views all the images and videos available in the gallery
Steps:
Student logs into the QMS siteStudent is currently viewing the main siteStudent clicks ‘Gallery’ button in the navigation bar in the header of main siteStudent gets redirected to Gallery pageStudent is able to see all the images and videos uploaded on QMS siteStudent can click on each image to get it’s zoomed viewStudent can click on video thumbnail, in order to play the videoStudent wants to use public/live chat for any of his/her query:Primary Persona: Student
Goal: Use live chat module available on the main QMS site
Start Condition: Student must have opened QMS site on web browseron his/her computer and must have logged in to the QMS portal
Trigger: Student has logged into the QMS site and clicks the ‘Let’s Chat’ module located at bottom right side of the main site
End Condition: Student posts his/her query or message on the live chat module
Steps:
Student logs into the QMS siteStudent is currently viewing the main siteStudent clicks the ‘Let’s Chat’ module located at bottom right side of the main siteStudent writes his/her query or message in the ‘Write your message’ field along with attachment (if any)Student’s query/message is visible to all the other students online on QMS and also to the admin, so anyone can help the student with his/her queryStudent wants to post his/her blog:Primary Persona: Student
Goal: Post blog on main QMS site
Start Condition: Student must have opened QMS site on web browseron his/her computer and must have logged in to the QMS portal
Trigger: Student has logged into the QMS site and is currently on the Blogs page of the main site
End Condition: Student posts his/her blog and waits for approval from Admin
Steps:
Student logs into the QMS siteStudent is currently viewing the main siteStudent clicks ‘Blogs’ button in the navigation bar in the header of the main siteStudent gets redirected to Blogs pageStudent is able to see the previews of all the blogs available on the site by scrolling down on the blogs pageStudent clicks the ‘Create Your New Blog’ button on the top of the blogs sectionStudent is able to see a popup form, having fields related to data and information of his/her new blogStudent fills the form appropriatelyStudent clicks on ‘Post’ to submit his/her blog entryPopup form disappears and a prompt appears telling the Student that his/her entry is submitted and waiting for approval from the adminIf admin approves the student’s submission, the blog appears in the blogs page of the main siteIf admin rejects the student’s submission, the reason is sent to student’s emailStudent wants to logout of the QMS site:Primary Persona: Student
Goal: Logout of the main QMS site
Start Condition: Student must have opened QMS site on web browseron his/her computer and must have logged in to the QMS portal
Trigger: Student has logged into the QMS site and clicks the ‘Logout’ button under the ‘My Account’ button in the navigation bar on main page of site
End Condition: Student gets successfully logged out of the main site and gets redirected to login/signup portal
Steps:
Student logs into the QMS siteStudent is currently viewing the main siteStudent clicks ‘Logout’ button in the navigation bar in the header of the main site. The ‘Logout’ button is located under the ‘My Account’ buttonStudent gets logged out of the main siteStudent is redirected to login/signup page of the QMS PortalUML Modelling
Figure 1: Use Case Diagram for the System System Use-Case Diagram:Figure 2: Activity Diagram for the Student Activities Activity Diagrams:Figure 3: Activity Diagram for the Admin Activities
Interactive Prototypes
Following interactive prototypes were created using the ‘Balsimiq Mockups 3’ prototyping tool:
Figure 4: Mockup for Student Login Page
Figure 5: Mockup for Student Signup Page
Figure 6: Mockup for Home Page for QMS site
Figure 7: Mockup for Events Page for QMS site
Figure 8: Mockup for Portfolios Page for QMS site
Figure 9: Mockup for Gallery Page for QMS site
Figure 10: Mockup for Blogs Page for QMS site
Figure 11: Mockup for MyAccount Page for Student Account on QMS site
Figure 12: Mockup for Contact Page for QMS site
Figure 13: Mockup for About Page for QMS site
Figure 14: Mockup for Login page for Admin
Figure 15: Mockup for Event and Blog Management Page for Admin
Figure 16: Mockup for Student Profile Approval Page for Admin
Figure 17: Mockup for Gallery Image Upload Page for Admin
Figure 18: Mockup for Adding News and Events for Admin
Selected Web Technologies
HTML5CSS3JavaScript including JavaScript libraries ie. jQueryBootstrap 4PHPMySQL DatabaseWAMP Server (for development purposes)Project Plan/Schedule
Project Plan
Week No.TasksPriorityResearch topic for website proposalConduct online research on web applications similar to the selected project scenario.Identity stakeholders and target audienceDiscuss initial specifications with stake holdersWrite Project ProposalCreate interactive prototypesRequirements Analysis Interviews Questionnaires Analyse resultsList Requirements Functional Requirements Operational Requirements Usability RequirementsSource graphics requiredCreate website front-end incorporating Bootstrap design templateConceptual / Logical Database Design Create Entity Relationship Model (ERM) Design and create MySQL database with test dataCreate PHP scripts as requiredCreate login functionalityCreate search functionalityFunctionality testingUsability testingEvaluate and discuss project outcomeMake recommendations for future developmentsWrite Project ReportProject PresentationProject Development
Explain how you manged the implementation.
What software did you use? Justify your choice. What themes and plug-ins did you use?
What problems did you encounter, and explain how you overcame these?
Detailed discussion of your experience in developing the application is required here.
Did you incorporate any novel approaches to web development and meeting the Assignment requirements?
Project Technical Testing
Include evidence of detailed and robust testing.
There are various ways to document this…
Test Plan / Test Log (tabular format)Documentation of each test – one after the otherYou need to include
reason for testinput data or actionexpected resultactual resultaction if the above are not the samescreenshot of outputUser Evaluation
Critical Analysis and Reflection
What went well and what went wrong?What would you have done differently?How you would improve it in the future?This part is very important. Basically, you are evaluating what you have done. Did you achieve all the required specification of the Assignment brief? If not, why not? Discuss the problems you encountered and how you overcame them.
Did you give yourself enough time to accomplish this work? Was it harder than you expected? What have you learned from tackling this Assignment?
Did this work enhance your understanding of web development? Did it motivate you to learn more about web technologies?
If you had to do this or a similar task again, would you tackle it the same way?
What improvements or enhancements would you recommend for a future iteration of this project?
Conclusion
What were you asked to do? Did you achieve it?
References
APPENDIX
[Button id=”1″]
Quality and affordable writing services. Our papers are written to meet your needs, in a personalized manner. You can order essays, annotated bibliography, discussion, research papers, reaction paper, article critique, coursework, projects, case study, term papers, movie review, research proposal, capstone project, speech/presentation, book report/review, and more.
Need Help? Click On The Order Now Button For Help
What Students Are Saying About Us
.......... Customer ID: 12*** | Rating: ⭐⭐⭐⭐⭐"Honestly, I was afraid to send my paper to you, but splendidwritings.com proved they are a trustworthy service. My essay was done in less than a day, and I received a brilliant piece. I didn’t even believe it was my essay at first 🙂 Great job, thank you!"
.......... Customer ID: 14***| Rating: ⭐⭐⭐⭐⭐
"The company has some nice prices and good content. I ordered a term paper here and got a very good one. I'll keep ordering from this website."
