CITS3403/5505 Agile Web Development

HTML5
CSS3
JavaScript
Flask

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 CITS3403, 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 3:00 - 5:00 pm Wednesday Ross Lecture Theatre
Combined Workshop 9:00-11:00am Friday Clews Lecture Theatre
CITS5505 Lab 1:00-3:00pm Monday MATH: 203D and Microsoft Teams
CITS3403 Lab 8:00-10:00am Tuesday CSSE: 201 and Microsoft Teams
CITS3403 Lab 10:00-12:00pm Tuesday CSSE: 201 and Microsoft Teams
CITS3403 Lab 12:00-2:00pm Wednesday CSSE: 205 and Microsoft Teams
CITS3403 Lab 8:00-10:00am Thursday CSSE: 205 and Microsoft Teams
CITS5505 Lab 9:00-11:00am Thursday MATH: 123D and Microsoft Teams
CITS3403 Lab 10:00-12:00pm Thursday CSSE: 203 and Microsoft Teams
CIT3403 Lab 11:00-1:00pm Friday CSSE: 201 and Microsft Teams
CIT3403 Lab 1:00-3:00pm Friday CSSE: 201 and Microsft Teams
CIT3403 Lab 3:00-5:00pm Friday CSSE: 201 and Microsft Teams
Consultation 10:00-12:00pm Wednesday CSSE Rm 2.14 and Microsoft Teams

Assessment

The assessment for CITS3403 consists of a mid-semester test, a group project and a final take home exam.

The assessment for CITS5505 consists of an individual project, a group project and a final take home exam.

Assessment% of Final MarkDue Date
CITS3403 Mid-semester Test2031-03-2023
CITS5505 Individual Project2017-04-2023
Group Project3022-05-2023
Final Exam/Take Home Test5031-05-2022

Please make special note of the UWA AI Tools Policy when completing assessments. In CITS3403 and CITS5505, Generative AI tools like Chat-GTP are permitted in assessments, but their use must be acknowledged.

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 Ross, 3-4pm)
Lecture
(Wed Ross 4-5pm)
Lab
Various
Workshop
(Clews Fri 9-11am)
1 Feb 27 Introduction HTML No lab, but set up your Dev Environment Visual Studio Code.
2 Mar 6 CSS Bootstrap
Getting Started, and HTML5 CSS & Bootstrap
3 Mar 13 Javascript Javascript
CSS and Bootstrap Javascript
4 Mar 20 Document Object Model Document Object Model Javascript Document Object Model
5 Mar 27 JQuery AJAX Document Object Model Midsemester Test
6 Apr 3 Agile Development GIT AJAX Good Friday
Non Teaching Study Break
7 Apr 17 Flask Web Development
Server Side Rendering Git Basics Setting up Flask
8 Apr 24 MVC Architecture
Sockets First Flask App Adding a DB
9 May 1 Authentication Testing Adding a Database Adding Chat
10 May 8 REST APIs REST APIs Testing Testing
11 May 15 Client Side Rendering Client Side Rendering Deploying to Heroku REST APIs
12 May 22
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 17, 2023

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

The project description and criterion is now available.

CITS3403 and CITS5505 Web Project Specification: Chat Application

Due 12noon, May 22, 2023

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, and both students must be CITS5505, unless special permission has been granted.

The project description will be released by week 3, and the Marking Criterion is available.

Project Description

For this project you are required to build a text-based chat application, meaning the user of the application enters text or similar prompts, and recieves responses, but you may interpret the concept with a good deal of flexibility:

  • The application could be a traditional Chat service, perhaps linking people looking for Web Design help, and experts offering help;
  • The application could use a chatbot mechanism similar to Eliza;
  • The application could make use of a 3rd party service like GPT orWolfram Alpha;
  • The application could use chat in a larger context, like a service for online role playing games or in Twenty Questions type games;
  • You could use chat as a game mechanism like the Monkey Island games.
The app should allow users to create an account, and begin a chat (or game, or session etc) with someone specific (or someone random, or some bot service etc). They should be able to access some amount of the history of their chats, and the application should provide some kind of unique service or context that is not available in generic applications like Facebook Messenger. Examples might include tutoring, dating, gaming, counselling, etc. The application should be written using HTML, CSS, Flask, AJAX, JQuery, and Bootstrap. (Any additional technologies not mentioned in lectures will require special approval from the unit coordinator).

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

  • Engaging, so that it looks good and focusses the user on important elements of the chat
  • Effective, so it produces value for the user, by provideing information, entertainment or community
  • Intuitive, so that it is easy for a user to access

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. An openning view, describing the context and purpose of the application, and allowing the user to create an account or log in.
  2. A chat view, alowing the user to interact with the application or other users via text (or similar).
  3. A search view, alowing the user to review their history and previous interactions..

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 the its design and use.
  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 via this application Not set up yet, which also include a feature for requesting to be assigned to a group and booking demonstration times in week 12.

Getting Started: Select Application 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 functionality it should offer.

Criteria: Front-end (50%)
  1. The web application must be functional so that the user can easily access the application.
  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, and render well on mobile devices.
  6. The website should have at least three pages/views:
    • one explaining the context to users, and allowing account creation or log in;
    • one presenting the interactive chat;
    • one page allowing a user to search their previous interactions.
  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 tracking feature.
  2. A method to store interactions and results.
  3. A method to search previous inetractions.

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 is available.

Submission and Presentation Instructions

Submission

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, and run your tests and validation
  • the git log, showing commits from both partners. Use git log -–all -–decorate -–graph to format the log (you may need to change some of the options, but make sure that all authors and commits on all branches are visible).
  • all source code, with comments and attributions for any external libraries, including your tests directory
  • 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.
  • You may incude a small db for testing purposes
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.

Submit your zipped file to cssubmit, making sure that you submit it to the correct unit code, as CITS3403 and CITS5505 have the same name.

Demonstration Schedule

In week 12 all members of each team must present and demonstrate their project. The schedule will be available at the sign up page. There will be a link for your teams meeting to do the demonstration. Please:

  • Make sure your entire team is in the meeting 5 minutes before your scheduled time.
  • You have your app launched on a machine, you demonstration database set up and are ready to share screen
  • All members are able to talk and have a camera set up
You will be ask to demonstrate the features of your app. This should take no more than 8 minutes, and it is worthwhile having a rough plan or script that involves all team members. You will then be asked some questions from the assessor, and may need to show some additional functionality, source etc. The entir presentation should take about 12 minutes, so please be prepared.

Exams

Midterm Test

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

Past midterm tests are available for practice. Particularly, via LMS you can access last years mid-semester test, and a sample mid-semester test for practice. The mid-semester test this year will be similar except: it is worth 20% rather than 10%; you will have 1 hour rather than 30 minutes; and there will be 5 multiple choice questions rather than 3. Other written exams you can use for practice are below.

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 10:00am on Friday, March 31, 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 also use internet search, IDEs and AI assistants in the test if they wish.

Students may not communicate with one another or receive any external help during 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 5 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 60 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 - Take Home Test

Released 8am, Tuesday May 30, 2023, Due 5pm, Wednesday May 31, 2023

The Final Exam is now available here, and must be submitted to cssubmit by 5pm Wednesday May 31, 2023.

2022 take home exam is available here

This Exam is worth 50% of your final grade and must be done individually. For equity reasons, the teaching staff will not be able to answer individual questions between the exams release and the due date. Questions may be posted to a public teams channel and may be answered by teaching staff. Any communication, commentary, or discussion of the test during this period will be considered academic misconduct.

The format and examination points

The test should take about 3 hours to complete, and will involve producing a web site addressing a given specification. You will be required to write the web-site (including HTML, JS, CSS and multi-media files) and submit these files as a zip to cssubmit.

A sample exam will be made available in week 11, and further details of the examination topics and structure will be discussed during Week 13's review lecture.

Sample Exam

The following is an indication of what to expect and recommended preparation for the final test

Build a study web site for the unit Agile Web Development, with the following specification:

  1. The web page should have the unit title, your name and student number as a heading at the top (1 marks)
  2. Provide a paragraph giving a overview of the unit in your own words (2 marks)
  3. Give a list of what you consider to be the six most important outcomes of the unit, in order of importance. Give each outcome a uniue style (e.g. color) to refer to later.
  4. Give set set topics, corresponding to the 15 topics of the unit, this can be formated as a list, or a table or a set of titles, but each topic should expand when clicked to reveal:
    1. A 1-2 sentence overview of the topic, and an anchor link to the lecture notes at http://teaching.csse.uwa.edu.au/units/CITS3403
    2. A reference to the outcomes that are relevant to the topic (e.g. dots with the corresponding color).
    3. 4 important concepts within the topic. Each concept should have a check box next to it, to be checked when you have finished studying it
    4. The topic shold have a teaxt area for you to add notes. The text area should have black text, that goes red when the text exceeds 1000 characters.
    5. The text areas can be empty in general, but three must be prepopulated:
      1. One, in topic 5 should give an overview of the Document Object Model an its importance to web. (3 marks)
      2. One in topic 10 should describe model view controller arhctectures, and how it is implemented in flask. (3 marks)
      3. One in topic 11 should describe the six characteristics of REST, and how they are significant to deploying a flask project. (4 marks)
    6. When all the concepts have been checked and the notes are not empoty, the background of the topic should be set to green.
    (2 marks each)
  5. At the bottom of the page there should be a paragraph giveing an appraisal of the unit, including, what you thiought was good, what improvements could be made and under what curcumstances you would recommend another students takes the unit (2 marks)
  6. Finally, there should be a README.md text file in the directory describing the architecture of a flask back end that could serve this web page, and backup the study plan in a database (but you do not need to implement this). You should describe the database schema, the routes and HTTP methods served, and how the routes interact with the web-page's functionality. (5 marks)
The web site must satisfy the following constraints:
  • Everything must be done in raw HTML, Javascript and CSS. You may not use bootstrap, JQuery, W3.css etc
  • The page does not need to be reactive to view size, but should render in Chrome, Edge, Firefox and/or Safari.
  • The page should not require live-server, and should be able to be loaded from the file explorer. It should not have any absolute links.
  • The page should be intuitive and easy to read and use.

Past Exams

Clearly past exams before 2022 were a very different format, and are not a good indicator of what to expect in 2023. However, they are a good indication of the outcomes and the levels of competency that you will be expected to demonstrate.

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:

Data Science with Daniel is a great resource for web and data science technologies, promoted and run by a former student of the unit!

Tom's github and Tim's github.

Lauren's awesome getting started with Flask and VSCode notes.

Feel free to suggest additional resources you have found useful.

Contacts


Dr Tim French
Unit coordinator and lecturer
CSSE Rm 2.14
Office hours: 10-12 Wednesday
[email protected]
Ph: 64882794

Tom Smoker
Workshop Demonstrator
Contact via teams

Lauren Gee
CITS3403 Facilitator
Contact via teams

Chau Nguyen
CITS3403 Facilitator
Contact via teams

Pascal Sun
CITS5505 Facilitator
Contact via teams

Daivik Anil
CITS3403 Facilitator
Contact via teams