IFN557: Rapid Web Development

Assignment Objectives

On completion of this assignment you should have gained skills in the following areas:

1.  Ability to design a web application using the Model-view-controller (MVC) architecture pattern

2.  Learn some of the foundations of HTML and CSS and the Bootstrap framework to create responsive websites

3.  Demonstrate skills at developing a prototype ecommerce web application.

Assignment Description

In this assignment, you will design and implement a basic ecommerce store prototype for your chosen product or service. There is no specific topic provided to you so you   must select the topic and scope your own design accordingly. So, be creative!

An ecommerce store has many elements; However, due to the constraints of this

introductory unit your prototype will only focus on the creation of a simple site where users can browse and choose products to purchase. Your site will not support user

authentication or payments which would obviously be a crucial part of a real system.   The objective of this assignment is to allow you to demonstrate your ability to design a web application using the approaches and frameworks that we have (or will) introduce. The web application must support the list of features described in the next section so   please keep these in mind when you come up with your design.

This is an individual assignment. In this assignment you will:

i.      Describe what you want to design and develop (e.g., a store for books, cars, rooms, watches etc.)

ii.      Design the details of your web application (user stories, UML conceptual design, UML database design)

iii.      Submit a static HTML prototype for your ecommerce store.

Late Submission Penalties

Consistent with QUT commitment to real world learning, managing priorities, competing commitments and time are essential skills for effective learning and professional life. Assessment work submitted after the due date will be marked only with an approved extension (MOPP E/6.8.2). Assessment work submitted after the due date without an approved extension or, where an extension has been granted, after the extended due date, will not be marked and a grade of 1 or 0% will be awarded against the assessment item.

Background

Web app development is complex. In fact, it involves so many different tasks that it is highly unlikely that a single person can carry out each of them on a professional level. Ordinarily a web development project is made up of a team of specialists who are experts in their own field. So, is this unit attempting to achieve the impossible? No. Whilst it is inevitable that you will not gain the skills to develop a professional application by yourself, you will learn enough to understand each of the key areas involved and be able to produce a small prototype application. This understanding across all the relevant areas will be extremely useful to you, especially if working in a multidisciplinary team in industry.

The first assessment in IFN557 involves you creating a prototype of an ecommerce store using the design techniques we introduce and utilizing the Bootstrap Framework.

Requirements

The following features are required in the ecommerce store:

1. View products/services

a.  Your ecommerce store should list the set of products or services that are currently available for sale. The products/services can be grouped into different categories. A user should be able to view all products/services  belonging to a group. In an ecommerce store for books, a buyer should  be able to find all `fiction’ books by choosing the group.

b.  A user should be able to select a product/service and view the details of it. The details should be determined based on what the product/service is. For a book, it would be the author, ISBN, category and so on.

2. Order products/services

a.  A user who wants to buy the product/service, should be able to add the product to a basket.

b.  A user should be able to view the contents of their basket at any time, remove items.

c.  A user should be able to complete the order by providing details such as their name and shipping address.

Submission

Submit one single zip file (filename: studentid_557_A1) that contains the following items:

•    Part 1 - Written Report as detailed below

•    Part 2 - Front-end prototype

Submit using the submission link made available on Canvas.

PART 1:

A written report containing the following:

Description: A paragraph (5-6 lines) about the ecommerce store. The topic of the  ecommerce store, the important details of the product/service that can be bought. User stories: Prepare user stories for the requirements. A user story can detail one or more requirements. A user story preferably should be short (no more than 3-4 sentences) and list the acceptance criteria. Ensure that each user story is numbered so that the marker can easily reference it.

Conceptual Model: With the user story as a reference, identify the objects, their behaviour, relationships and multiplicity.  Please use UML class diagram to represent the concepts, their attributes and the behaviour. You can use any open source UML editor for this purpose (e.g. https://www.lucidchart.com/)

Database Design:  Design  the   data  model  using  UML  identifying  classes, associations, multiplicity. You could use lucid chart (https://www.lucidchart.com/) for the UML model

NOTE: The conceptual model and data model are two separate UML diagrams.

PART 2:

You should also submit a zip file containing your front-end prototype.

Front-end Prototype: Develop the front-end pages. The HTML you develop are not functional pages: they are pages with static content at this stage. Use HTML and Bootstrap components to give structure and style to the content of the e- commerce store. You do not need to use any programming language to implement this prototype  (e.g.  JavaScript, Python,  etc - note  that HTML is a mark-up language). A subset of the requirements will be demonstrated in this prototype:

1. Home page

The landing/home page is the main page of the web application. From this page, the user is guided to the other pages (e.g. using a navigation   bar) to perform the different functions supported by the ecommerce store. The page should have the user interface elements to allow the user to

search for products and to add to them to a shopping basket.

2. Item details page

A page that presents the details of a single item as an example, i.e. what a user would see when they select an item to view the details. One

example item is sufficient. The page should have:

1.  title of the item

2.  an image of the item

3.  description of the item

4.  price of the item,

5.  and other item specific information of your choice.

6.  The page should allow the user to add the item to their basket.

NB:

•     The design that you create should be your own i.e. you are not to use any

existing template or make use of any Bootstrap or web templating sites (e.g., Bootswatch, Wix, Squarespace etc). Further, the Bootstrap version that you use must be Bootstrap 4.6 via the official CDN as given on getbootstrap.com.  Bootstrap 5 was released a couple of years ago but is still not totally ubiquitous so we will avoid that for now.

•    All the work submitted should be your own. The use of generative AI such as ChatGPT is not allowed in this unit.

•     This version of the prototype does not need to support the basket or order completion page.

•     The navigation between pages needs to be intuitive and is left to the student to decide how an end user browses to other pages.

•     Bootstrap components should be used. Standard components include Navbar, Jumbotron, Cards, Alerts, Modal etc … For a list of components, please visit:

https://getbootstrap.com/docs/4.6/components/

•    Your submission should contain the following folder structure (as discussed in the lectures)

o  All HTML files in one directory.

o  A separate folder for CSS (if you are using any custom CSS) and an img folder with all the images used in your HTML pages.

•     Markers will evaluate you by opening the HTML files in Google Chrome. Please make sure you have taken care of all the necessary dependencies.