Web Development II (CSC10217) Assignment 1: Movie Zone Application

This assignment details the design and build of a web application, referred to as "Movie Zone," for a hypothetical DVD rental e-shop. The assignment begins with a comprehensive requirement analysis, outlining both functional and non-functional aspects of the application. Functional requirements include recording movie details, enabling user search functionality, and allowing member login and movie detail viewing. Non-functional requirements emphasize the use of an MVC (Model-View-Controller) architecture for efficient data handling and presentation. The design section includes high-level and low-level design diagrams illustrating the system's architecture and data flow. The high-level design shows the user interaction with the browser and server, and the low-level design details the processing of URL requests, controller initialization, and database interactions. The document also includes a bibliography of relevant resources used in the project.

Running head: DESIGN AND BUILD A WEB SITE
Design and build a Web site
Name of the Student
Name of the University
Author’s note:

1DESIGN AND BUILD A WEB SITE
Table of Contents
Requirement Analysis:.....................................................................................................................2
High-Level Design:.........................................................................................................................3
Low-Level Design:..........................................................................................................................4
Bibliography:...................................................................................................................................5

2DESIGN AND BUILD A WEB SITE
Requirement Analysis:
Functional Requirements: The functional requirements are representation of
functionalities in the system. Functional requirements of the Movie Zone app are as following.
i. Record movie details. In order to record the movie details, admin have to mention
the name and role of the actors in that movie. The system should be able to handle
many to many relation while writing data into database.
ii. The users should be able to search movies by name. The system will provide a
search bar to the user. This search bar will be in the index view of movies
controller. User will input full name or partial name of the movies and enter
search. System will search all the available movies that matches with the entered
name. One condition is that name should have two characters at least.
iii. Members should be able login to the system. The system will refer the members
as the users as in reality they are end user of the system. The users will use the
email and password to login.
iv. Member can see movie details. Members can choose to see all the movies. They
also be able to select a specific movie to see all the details of that specific movie.
Each movie in the list will have an image, name, release year and actors.
Non-Functional Requirements: The non-functional requirements share the details of
system quality. Non-functional requirements are as following.
i. The system should have a model view and controller or MVC architecture. This
means that user will not access the pages directly. The system will analyze the
entered url and then show best possible details to user.

3DESIGN AND BUILD A WEB SITE
ii. System will show most recently released three pictures in the home page. The
layout of the movie list will be same in every page to maintain consistence of the
design.
iii. CSS and JavaScript files will be stored in a separate folder. Images will be stored
within an ‘img’ container.
High-Level Design:
Figure 1: High Level Design Diagram
(Source: Created by Author)
As per the diagram, the user will enter URL in the browser. This URL will be interpreted
by the browser. The server will then identify what user wants to access. The server will load
view and required data into one package if the request is to show some details. If the request is to
update, delete or create data then only database connection will be used.

4DESIGN AND BUILD A WEB SITE
Low-Level Design:
Figure 2: Low Level Design Diagram
(Source: Created by Author)
The app has core that catches the url and converts it into array. The array position
represents controller, method and parameter respectively. Taken as an example, if url is
http://localhost/app/users/login, then controller will be users, method will be login and parameter
will be null. Then app initialize the controller and run the method. If the method needs any data
from database or perform database actions then required models are initialized in that controller.
Then method mentioned in model is executed. Taken as an example, user has written url,
app/movies/index then index method movies controller will be executed. As index method has
access to all method of Movie model then Movie model will be initialized and object will be
stored in a variable. Then a view is returned to user to show the desired data.

5DESIGN AND BUILD A WEB SITE
Bibliography:
Reimer, Y., 2018. CSCI 340.01: Database Design.
Rosenbloom, A., 2018, May. A simple MVC framework for web development courses.
In Proceedings of the 23rd western canadian conference on computing education (pp. 1-3).