CITS3403/5505 Agile Web Development

HOME

Welcome to the website for CITS3403 Agile Web Development. The Internet is continuing to grow, with a shift from the knowledge provision that typified the Web of the early 2000's, to highly interactive sites and user generated content. This has led not only to some remarkable business opportunities but also to profound changes in the way people relate to each other. This unit explores technologies, programming languages and environments that underpin development for the modern Internet. It builds on students' previous programming experience to develop and demonstrate technologies in action.

CITS3403/5505 Agile Web Development will cover the foundations of the web and internet, fundamental browser techbnologies including HTML, CSS and javascript, the development process for large applications, and full-stack web development using Flask, AJAX and SQLite.

This unit will share material between CITS5505 and CITS3401, although there will be some differences in assessment and class. The handbook entry and general unit policies are all available from the online LMS and we will use MSTeams (CITS3403 and CITS5505) for discussion and class management.

Contact Hours

Each student should attend (or view) the two hour lecture, complete a two hour lab and attend or view the workshop every week. Attendance will not be taken. Online labs will be conducted via MSTeams.

TypeTimeDayLocation
Combined Lecture 1:00 - 3:00 pm Wednesdays Alexander Lecture Theatre
Combined Workshop 9:00-10:00am Fridays Murdoch Lecture Theatre
CITS5505 Lab 2:00-4:00pm Mondays CSSE Lab 2.05
CITS3403 Lab 4:00-6:00pm Wednesdays CSSE Lab 2.05
CIT3403 Lab 4:00-6:00pm Wednesdays Online
CIT3403 Lab 2:00-4:00pm Thursdays CSSE Lab 2.03
CIT3403 Lab 12:00-2:00pm Fridays Online
CIT5505 Lab 12:00-2:00pm Fridays Online
CIT3403 Lab 2:00-4:00pm Fridays CSSE Lab 2.01
Consultation 11:00am-12:00pm Wednesdays CSSE Rm 2.14

Assessment

The assessment for CITS3403 consists of a mid-semester test, a group project and a 2 hour formal examination.

The assessment for CITS5505 consists of an individual project, a group project and a 2 hour formal examination.

Assessment% of Final MarkDue Date
CITS3403 Mid-semester Test1026-03-2021
CITS5505 Individual Project2012-04-2021
Group Project3017-05-2021
Final Exam50-60End of Semester

Unit Schedule

PDF files of the individual lectures will be made available from here as the semester progresses, as well as the files used for demonstrations. Lecture recordings are also available via LMS

The Lab Exercises will be available on Fridays of the week before the scheduled lab.

WeekDateLecture
(Wed ALEX, 1-2pm)		Lecture
(Wed ALEX 2-3pm)		Lab
Various		Workshop
(Murdoch Fri 9am)
1 Feb 22 Introduction HTML Dev Environment Visual Studio Code.
2 Mar 1 CSS Bootstrap
Getting Started, and HTML5 CSS & Bootstrap
3 Mar 8 Javascript Javascript
 CSS and Bootstrap Javascript
4 Mar 15 Document Object Model Document Object Model Javascript Midsemester Test Revision
5 Mar 22 JQuery AJAX Document Object Model Midsemester Test
6 Mar 29 Agile Development GIT AJAX Good Friday
Non Teaching Study Break
7 Apr 12 Flask Web Development
 Server Side Rendering Git Basics Using GIT 5505 project due
8 Apr 19 MVC Architecture
 Object Relational Model First Flask App Setting up Flask
9 Apil 26 Authentication Testing Adding a Database Adding a DB
10 May 3 REST APIs REST APIs Testing Testing
11 May 10 Client Side Rendering Sockets Deploying to Heroku SPAs
12 May 17
Project due		 Going to Production Future of the web Project demos Revision

Old Node/MEAN Lectures

MEAN, MEAN Project, Mongo, ORM, REST, Sockets, Authentication, Testing, Angular, SPA.

Project

CITS5505 Project 1: HTML, CSS & JavaScript Website

Due 5pm, April 1, 2021 5pm, April 12, 2021

This project is worth 20% of your final grade and must be done individually. It is for CITS5505 students only.

The project description, instructions and marking scheme is available here.

Web Project Specification: Online Formative Assessment

Due 6pm, May 17, 2021

This project is worth 30% of your final grade in the unit must be done in groups of two to four for CITS3403 students. For CITS5505 students, it should be done in pairs.

A Marking Criterion is now available

Project Description

For this project you are required to build an online formative assessment. That is, you should write a web application that simulates a learning experience like a laboratory, and applies some assessment and feedback at the end. The application should be written using HTML, CSS, Flask, AJAX, JQuery, and Bootstrap. The application should allow uses to register, progress through a series of activities saving their progress, complete an assessment at the end, and receive meaningful feedback on their performance. The context of the questions and the type of assessment mechanism is up to you.

Example contexts you could use are:

Aim to focus on one small aspect of learning, so the the exercises, assessment and feedback can be done in about 10 minutes.

Think carefully about the design of the application. It should be:

  • Informative, so that it presents engaging nontrivial information and skills
  • Reliable, so that it is not frustrating to use
  • Intuitive, so that it is easy for a user to complete the assessment and recieve feedback
  • Engaging, so that it looks good and presents sufficient context for the questions being asked.
The web application should be styled to be interesting and engaging for a user in the selected context. It should offer several views including:

  1. A user view that can view the material, save progress, complete assessments and see the results of completed assessments with some feedback.
  2. A general view that can just view aggregate assessment results, and usage statistics.

In addition to the web application, you should create a private GitHub project that includes a readme describing:

  1. the purpose of the web application, explaining both the context and the assessment mechanism used.
  2. the architecture of the web application.
  3. describe how to launch the web application.
  4. describe some unit tests for the web application, and how to run them.
  5. Include commit logs, showing contributions and review from both contributing students

Group Registration is now available.

Getting Started: Select Website Purpose and Style

Find a partner(s) with (ideally with common interests) and come up with a theme for your application. Discuss styling, how the application is likely to be used, and precisely what functaionality it should offer.

Criteria: Front-end (50%)
  1. The web application must be functional so that the user can access all material and complete the assessment.
  2. The webpage must be implemented using HTML5, CSS and Javascript (or a subset thereof).
  3. All resources used (inlcuding pictures, javascript libraries, css) must be full referenced.
  4. The website must use HTML5, and CSS. The HTML and CSS must pass this validator.
  5. The website must work on Chrome, Firefox and Microsoft Edge
  6. The website should have at least six pages/sections:
    • one promoting the theme and purpose to users;
    • a registration/login page for new or returning users;
    • one or more pages presenting content to users;
    • one or more pages for users to complete assessments;
    • one page giving feedback to the user;
    • one page showing aggregate results and usage statsitics
  7. There must be a consistent style (via css file) for all pages yet each page should be easily identifiable.
Marking Scheme
  • HTML5 - style, maintainability, validation 10%
  • CSS -style, maintainability 10%
  • Javascript-code quality, validation of user generated data, execution 15%
  • Style - look and feel, usability 10%
  • Content - coherence, effectiveness 5%
Criteria: Backend functionality (50%)

The second part of the project criteria is the back end functionality of web application. The web application should be implmented using Flask (any additional libraries/modules require unit coordinator approval), and provide at least the following functionality:

  1. A user account and login feature, (as a minimum for administrators)
  2. A method to complete tests and store progress.
  3. A method to assess submissions.
  4. A method to see assessments.

Students should submit a complete Flask application providing the functionality of the project. This should be submitted as a zip including

  • a full readme.md, describing the design and development of the application, and giving instructions on how to launch from local host.
  • the git log, showing commits from both partners
  • all source code, with comments and attributions for any external libraries.
  • a requirements.txt file, listing all packages used. To build the requirements.txt file for your virtual environment, use the command: pip freeze > requirements.txt while your virtual environment is active.
Do not submit the virtual environment directory, or the .git directory. These are overly large, not required and will result in a penalty if they are submitted.

Marking Scheme
  • Codecode quality, complexity of task, execution 10%
  • Persistence and User authentication Database schema and models10%
  • Testing Unit tests and Selenium Tests10%
  • Design Purpose and level of complexity10%
  • Collaboration Git logs and agile processes 10%

The Marking Criterion will be available by the midsemester break.

Demonstration Schedule

In week 12 all members of each team must present and demonstrate their project. A schedule will be set up for demonstrations by week 8.

Exams

Midterm Test

The Midterm test will be held in week 5 and is worth 10% of your final grade. It is for CITS3403 students only.

Past midterm tests are available for practice:

Midterm Reference Material

The following three references have been used previously in mid-semester tests, and maybe useful to include in your open book material. They will also be provided with the final exam, so it is worth getting familiar with the format of each reference.

Midterm Time/Venue and Procedures

The test will be available on LMS, and all students must commence the test between 9.00am and 9.30am on Friday, March 26, unless special permission has been granted to complete the test at a different time.

The test will be open book. Students may have any printed materials with them during the test, or have electronic documents open prior to the test. Students may not use internet search, IDEs or any other electronic aids in the test. All typing must be in the LMS test window.

Students may not communicate with one another or receive any external help during the test. Students may complete the test in the workshop venue if they wish. They should bring a laptop to do the test.

If students lose internet connection or power during the test, they should attempt to restart the test as soon as possible (progress is autosaved), and send the unit-coordinator a note to explain what happenned at the end of the test.

The test will consist of 3 multiple choice questions (1 mark each), 1 short essay question (3 marks), and 1 coding question (4 marks, and accurate syntax is not required). Questions will be randomised, but will all have similar levels of difficulty. Students will have 30 minutes to complete all questions.

The questions will be on material from the lectures and labs in the first four weeks (including any readings specified in the labs). You could be asked for example to define concepts, explain the rationale behind them or the history of how they came about, discuss the issues involved or the decisions made and provide advantages and disadvantages of alternatives. You could also be asked to write some code.

Your answers do not need to use lengthy prose. You may use bullet points when relevant.

Sample Questions
  1. Explain the relationship between HTML and CSS. How can a developer use them to imporve the modularity and maintainability of the website? [4 marks]
  2. A common function of a program editor such as Emacs is to do bracket matching. Write a JavaScript program that prompts the user for a single line of code, and then reports whether the parentheses match. (That is, whether each opening parenthesis is matched by a corresponding closing parenthesis.) [5 marks]
  3. What is the Document Object Model? What is its purpose? (That is, what does it allow? Give at least two points for this.) [2 marks]
  4. What is the difference between the world wide web and the internet? [1 mark]
  5. Explain, with a simple example, how you can use CSS to layout a web page. [2 marks]
  6. Explain how JavaScript's object-orientation is prototype-based.
  7. Write a JavaScript function that, for any identified section of text (hint:using the id element) in an HTML document, changes each occurrence of a user-specified string to another user-specified string. (Note: Change only if the whole word matches) [4 marks]

Final Exam Information

The format and examination points

Details of the examination topics and structure will be discussed during Week 13's review lecture.

Past Exams

Cheatsheets

The following three references will be printed out for everyone of you as references. You DO NOT need to print it yourself. Just get familiar with the format of each reference.

Textbook & Resources

There are a number of excellent online resources and textbooks for the subjects covered in this unit. For the lectures and lab exercises, we may refer to the books:

Note that here are sufficient resources for your study available online. These include:

Feel free to suggest additional resources you have found useful.

Contacts


Dr Tim French
Unit coordinator and lecturer
CSSE Rm 2.14
[email protected]
Ph: 64882794

Tom Smoker
CITS5505 Facilitator and Workshop Demonstrator
Contact via teams

Haolin Wu
CITS3403 Facilitator
Contact via teams