ASSIGNMENT 1 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Business

Unit number and title Unit 30: Application Development

Submission date Date Received 1st submission

Re-submission Date Date Received 2nd submission

Student Name Le Vinh Hung Student ID GCD191237

Class GCD1001 Assessor name Nguyen Van Loi

Student declaration

I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that
making a false declaration is a form of malpractice.

Student’s signature Hung

Grading grid

P1 P2 P3 M1 M2 D1
 Summative Feedback:  Resubmission Feedback:

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:

Contents
Revisions ..................................................................................................................................................................... 8
1. Introduction (P1) .............................................................................................................................................. 9
1.1. Document Purpose ....................................................................................................................................... 9
1.2. Product Scope ............................................................................................................................................... 9
1.3. Intended Audience and Document Overview............................................................................................... 9
2. Overall Description (P1) .................................................................................................................................. 10
2.1. Product Overview ....................................................................................................................................... 10
2.2. Product Functionality .................................................................................................................................. 10
3. Specific Requirements (P1 & M1) ................................................................................................................. 12
3.1. Functional Requirements (P1) .................................................................................................................... 12
3.2. Use Case Model (P1) ................................................................................................................................... 12
3.3. Wire flow (P1) ............................................................................................................................................. 15
3.3.1. Admin .................................................................................................................................................. 15
3.3.2. Store .................................................................................................................................................... 16
3.3.3. Customer............................................................................................................................................. 17
4. Technical Design (M1) .................................................................................................................................... 18
4.1. Entity Relationship Diagram (ERD).............................................................................................................. 18
4.2. Class Diagram .............................................................................................................................................. 18
4.3. Activity Diagram .......................................................................................................................................... 19
4.4. Gantt chart .................................................................................................................................................. 19
5. Risk Assessment (P2) ..................................................................................................................................... 21
5.1. Risk assessment .......................................................................................................................................... 21
CHAPTER 1: DESIGN TOOLS ........................................................................................................................................ 22
I. Tools to design UML. ...................................................................................................................................... 22
1. Lucid chart................................................................................................................................................... 22
2. Visio............................................................................................................................................................. 23
3. Draw io ........................................................................................................................................................ 23
4. Adobe Spark ................................................................................................................................................ 24
II. Tools to design User Interface ....................................................................................................................... 25
1. Figma........................................................................................................................................................... 26
2. Sketch.......................................................................................................................................................... 26
 3. Adobe XD .................................................................................................................................................... 27
4. Axure ........................................................................................................................................................... 29
5. Marvel ......................................................................................................................................................... 29
CHAPTER 2: FRONT-END TECHNOLOGY STACK ......................................................................................................... 31
I. HTML/CSS/SCSS/SASS/LESS ........................................................................................................................... 31
II. JavaScript Library / Framework ..................................................................................................................... 34
III. Conclude which Front End technologies will be used for the development............................................ 36
CHAPTER 3: BACK-END TECHNOLOGY STACK............................................................................................................ 37
I. Back End Programming Language ................................................................................................................. 37
1. C# ................................................................................................................................................................ 37
2. PHP .............................................................................................................................................................. 37
3. JavaScript .................................................................................................................................................... 37
II. Operating System ........................................................................................................................................... 37
1. Windows ..................................................................................................................................................... 38
2. Mac OS ........................................................................................................................................................ 38
III. Web Server ................................................................................................................................................. 38
1. Apache ........................................................................................................................................................ 38
2. IIS................................................................................................................................................................. 39
IV. Database ..................................................................................................................................................... 39
1. MySQL ......................................................................................................................................................... 39
2. Microsoft SQL Server .................................................................................................................................. 39
3. PostgreSQL .................................................................................................................................................. 40
V. Hosting ............................................................................................................................................................ 40
1. Azure ........................................................................................................................................................... 41
2. AWS............................................................................................................................................................. 41
3. Google Cloud............................................................................................................................................... 41
VI. Framework ................................................................................................................................................. 41
1. ASP.NET Core .............................................................................................................................................. 42
2. Spring boot.................................................................................................................................................. 42
VII. Conclude which Back-end technology will used for development .......................................................... 42
CHAPTER 4: TOOLS FOR SOURCE CONTROL MANAGEMENT .................................................................................... 43
I. Git, GitHub, GitLab ......................................................................................................................................... 43
 1. Git................................................................................................................................................................ 43
2. GitHub & GitLab .......................................................................................................................................... 43
II. Conclude which tools will be used for the development ............................................................................. 44
CHAPTER 5: SOFTWARE DEVELOPMENT MODELS...................................................................................................... 45
I. Software Models. ........................................................................................................................................... 45
1. Waterfall Model .......................................................................................................................................... 45
2. V-Model ...................................................................................................................................................... 45
3. Scrum Model. .............................................................................................................................................. 46
II. Conclude which SDLC model will be used for the development .................................................................. 48
CHAPTER 6: ILLUSTRATE ALL YOUR FINDINGS ON HOW TO USE THESE BY DRAWING THE OVERVIEW .................... 49
REFERENCE.................................................................................................................................................................. 50
Figure 1: Use case admin ............................................................................................................................................ 13
Figure 2: Use case store .............................................................................................................................................. 14
Figure 3: Use case customer ....................................................................................................................................... 15
Figure 4: Wire flow admin .......................................................................................................................................... 16
Figure 5: Wire flow store ............................................................................................................................................ 17
Figure 6: Wire flow customer ..................................................................................................................................... 17
Figure 7: ERD ............................................................................................................................................................... 18
Figure 8: Class Diagram ............................................................................................................................................... 18
Figure 9: Activity Diagram ........................................................................................................................................... 19
Figure 10: Gantt Chart ................................................................................................................................................ 20
Figure 11: Lucid chart.................................................................................................................................................. 22
Figure 12: Viso ............................................................................................................................................................ 23
Figure 13: Draw io ....................................................................................................................................................... 24
Figure 14: Adobe Spark ............................................................................................................................................... 25
Figure 15: Figma.......................................................................................................................................................... 26
Figure 16: Sketch......................................................................................................................................................... 27
Figure 17: Adobe XD ................................................................................................................................................... 28
Figure 18: Axure .......................................................................................................................................................... 29
Figure 19: Marvel ........................................................................................................................................................ 30
Figure 20: HTML .......................................................................................................................................................... 31
Figure 21: CSS.............................................................................................................................................................. 32
Figure 22: SASS............................................................................................................................................................ 33
Figure 23: SCSS ............................................................................................................................................................ 33
Figure 24: LESS ............................................................................................................................................................ 34
Figure 25: ReactJS ....................................................................................................................................................... 34
Figure 26: Vue.JS ......................................................................................................................................................... 35
Figure 27: Bootstrap ................................................................................................................................................... 36
Figure 28: Microsoft SQL Server ................................................................................................................................. 40
Figure 29: Waterfall Model ......................................................................................................................................... 45
Figure 30: V-Model ..................................................................................................................................................... 46
Figure 31: Scrum Model .............................................................................................................................................. 47
Figure 32: Overview of selected technologies ............................................................................................................ 49
 Software Requirements
Specification

for

<FPTBOOK>
Version <1.0>

Prepared by Le Vinh Hung

Group Name: <App Dev>

< Nguyen Ha Kien Trung > < GCD201761 > <TrungNHKGCD201761@fpt.edu.vn>
< Nguyen Hoang Duy > < GCD201858 > <DuyNHGCD201858@fpt.edu.vn >
< Le Vinh Hung > < GCD191237 > < HungLVGCD191237@fpt.edu.vn >

Instructor: < Nguyen Van Loi >

Course: < Application Development >

Date: <2/4/2023>
 Revisions

Version Primary Description of Version Date

Author(s) Completed
1.0 Le Vinh Hung Information about the revision. This table 2/4/2022
does not need to be filled in whenever a
document is touched, only when the
version is being upgraded.
 1. Introduction (P1)
A software requirements specification (SRS) is a document that describes how software will function and
operate. It also specifies the functionality that the product must have in order to suit the needs of all
stakeholders (businesses, users). The goal of this article is to gather, evaluate, and give insight into the
complete FPT Book software system by presenting the problem question in full. While covering many
topics, it also focuses on the capabilities and desires of stakeholders. This document covers the complete
requirements for the FPT Book project.

1.1. Document Purpose

Our group will write about the purpose of the paper in this section. The package will construct
the FPT Book book selling system. Furthermore, a contractual agreement as well as successful
interaction between the firm and the consumer are required. Following that, we will test the
system and gather user input to assess how the product performs and reviews.
1.2. Product Scope
 Create a requirement management plan: gather requirements as the requirements
collecting team does the task, report requirements, check requirements, remove
requirements, contact experts.
 Gather requirements: Determine the needs that must be gathered as well as the
aspirations of the stakeholders. Give the project more scope by giving the resources
needed to complete the product.
 Scope: Detailed product and project descriptions. The system must be outside of the
requests in order to detect system-scoped requirements.
 Organization of work: Providing an overview of the system's structure, training sections
for working components, and breaking down the product completion procedures.
 Check the scope: Once you've received the finished product, start checking it for
problems, check Send error to update, and then generate a perfect product.
 Limit the scope: Monitoring the system's state, emphasizing its development and quality
with each export, and reducing needless expenses.
1.3. Intended Audience and Document Overview
This document is employed and implemented by members of the project team, each with their
own task and can verify the effectiveness of the project.
The concept behind the web bookstore system is to produce individuals with convenience and
repair. The SRS that follows offers extensive product opinions from a spread of stakeholders. It
describes the FPT Book product comprehensive, including authorized user characteristics,
limitations, assumptions and dependencies, and requirement subsets.
1.4. Definitions, Acronyms and Abbreviations
Keyword Explanation
C.R.U.D Shortened to create/Read/Update/Delete
 MVC Model - View - Controller
GUI Graphical User Interface
UI User Interface
OS Operating System
CSS Cascading Style Sheets

2. Overall Description (P1)

2.1. Product Overview
Due to the expanding trend of e-commerce, Vietnamese consumers' purchasing habits have
experienced a revolution in recent years. This trend has successfully made the online book
market a viable option for many young people who have both a commercial and a literary
interest. If you enjoy reading, you should consider starting an online bookshop. This company is
quite popular among young people. Selling books, like any other commodity, has its own set of
obstacles and rewards.
2.2. Product Functionality
Product
The distributed bookstore system stores the following information. Email and Password are
required on the login screen. To authenticate users with the system, there are two submit and
cancel buttons. Based on the rights of the User (Customer or Store Owner). The main screen will
seem vary depending on your function.
Customer
Purchase books and place orders (Home screen, Book display, registration page, Checkout screen,
and help screen) The Home screen is the first screen that appears after logging in. It will show all
of the books that the consumer may purchase. The book's information will be displayed in detail
on the Detail Screen.
Display all client orders using the Profile Screen.
The Register Screen will be used for customer registration. It must have the following fields:
 Email
 Full Name
 Password
 Re-Password
 Home Address
With Checkout Screen: utilized to display the item's title, description, price, category, and
selected quantity.
With Help Screen: Displays a list of help topics.
Except for the Login Screen and Help Screen, all Client Screens will display the search engine and
help choices at the top of their respective screens. Customers can look for books by title or
category.
After exiting the system. The system will then revert to the default Home screen.
Store owner
Send a request to the Admin to add a new category from the main panel.
A search bar and assistance choices will be available on the main screen. Allows you to search for
a certain client by entering their email address.
CRUD will appear on the Book Screen.
The Category Request screen will be used to submit a request for a new category to the Admin.
All Customer Orders will be shown on the Record Screen.
Admin
The Admin Screen's primary duty will be to manage Customer Accounts and Shopkeeper
Accounts, as well as to accept or refuse Store Owner requests.
 The Customer screen will be utilized to display all Customers' account details. If necessary,
it will be possible to reset the Client's password.
 The Shop Owner screen will be used to display all Shop Owners' account details. If
necessary, it will be able to reset the Store Owner's password.
 The Administrator will be able to accept or refuse new genre requests submitted by the
Store Owner on the Category Approval screen. After the Administrator has made a
decision, the Store Owner will be notified of approval or rejection.
Product Functionality
 Accept or refuse the store owners' request to add a new category to the list of categories
using the FPT Book web-based system.
 If required, change the business owners' accounts and manage the store owners'
passwords.
 If required, change the customer accounts and manage the client's password.
 Customers may use the FPT Book web-based system to:
 Create a customer account with their personal information:
 View a list of books that they can purchase and view the details of a specific book.
 View their order details, including previous transactions.
 View their profile
 View the transaction information in detail and make a payment.
 View a list of remedies to the website's problems, if any exist.
 Look for a book by its title or genre.
 The FPT Book web-based system allows store owners to:
 Look up client details using their email addresses.
 Organize your books by category.
 Send the administrator a request to add a new category to the system's list of book
categories, and you will be notified of their decision.
 3. Specific Requirements (P1 & M1)
3.1. Functional Requirements (P1)
ID AS A I WANT TO SO THAT I CAN
1 Admin Manage all users accounts Store and access the information
information in the system of the system’s user when
necessary
2 Admin Admin can change password Help users recover their accounts
of any user account in case they forget their password
3 Customer Customers can login to Manage, Update their personal
website with their account information
4 Customer Customer can create order Login and add book into Cart
5 Customer Search for a book by entering Choose the correct book that they
its category or its name want, or want to view all the
books in a specific category
6 Store Owner Login to the website with the Enter my home page to carry out
store owner's account the manipulative act of the shop
owner.
7 Store Owner Search for customer’s Take out the needed customer
information via their email information and use it for
payment or delivery purposes.
8 Store Owner Create, update, delete and Manage Book in the Store
search for a specific book
3.2. Use Case Model (P1)
ADMIN
 Figure 1: Use case admin

STORE
 Figure 2: Use case store

CUSTOMER
 Figure 3: Use case customer

3.3. Wire flow (P1)

3.3.1. Admin
 Figure 4: Wire flow admin

3.3.2. Store
 Figure 5: Wire flow store

3.3.3. Customer

Figure 6: Wire flow customer

 4. Technical Design (M1)
4.1. Entity Relationship Diagram (ERD)

Figure 7: ERD

4.2. Class Diagram

Figure 8: Class Diagram

4.3. Activity Diagram

Figure 9: Activity Diagram

4.3.1. Gantt chart

Figure 10: Gantt Chart
 5. Risk Assessment (P2)
5.1. Risk assessment

List Additional Controls (if any -

Identify and list Hazards List Current Risk Controls where current controls are not
Risk Rating
adequately managing the level of
risk)
Using Microsoft Project
Project schedule is not
design, a Gantt Chart chart
1 clearly defined or Ask group members if necessary
of the timetable for each High
understood
work stage

Each member will spend two

to three hours a day doing
Not understanding the research on different sites
2 framework (ASP .NET and platforms. If an error Medium Ask group members if necessary
core). happens, you can look for a
solution on sites like Stack
Overflow

Set clear deadlines for each

task and divide the work.
Team members do not
3 The team meets every day to High Fines if necessary
complete tasks on time
check on the progress of
each member.

Keep good relationships with

each other and a good work Recruit new members with professional
Team Member leaving
4 environment, which will Medium qualifications to meet the needs of the
the project
make people more project into the team
motivated

Lack of early training In-depth training and more

5 Medium Find mentor to support for project.
and support support before the project

Adopt an iterative or agile project

Errors in programming
Fix the bug and maybe management model so that software
6 and inadequate software High
increase the working hours quality is repeatedly tested and
quality testing.
improved.
 CHAPTER 1: DESIGN TOOLS
I. Tools to design UML.
UML (Unified Modeling Language) is a standardized modeling language with built-in diagrams
that was intended to assist system and software engineers in defining, visualizing, creating,
constructing, and documenting software system artifacts, as well as non-software business
modeling. The Unified Modeling Language (UML) is a set of engineering best practices for
modeling big and complex systems that have been proven to work. It is vital to use UML in
the development of object- oriented software and the software development process.
The design of software projects is primarily represented by graphical symbols in UML. UML
allows project teams to communicate, explore new designs, and validate the software
architectural design.
1. Lucid chart

Figure 11: Lucid chart

Many developer’s go-to diagramming tool, Lucid chart provides a collection of easy tools.
Lucid chart works in real time across many platforms due to its code being HTML 5-based.
It is one of the best UML modeling tools that allows you to create a simple flowchart to
complex technical diagrams.
Features:
 Works with your team on any device across various platforms
 Allows you to connect live data with your diagrams or import data to automatically
build organization charts
  Helps you to increase security and easily manage user accounts
 It is Integrated seamlessly with MS office, G suite, Atlassian, etc.
2. Visio

Figure 12: Viso

Microsoft Visio provides Office users with basic UML tools. Companies can add Visio to
their Microsoft Office Pro subscription. Organizations choose Visio when they want to
create their UMLs within the Microsoft Office ecosystem. Microsoft Visio might not have
as many features as some of the above tools. For large organizations who want seamless
integration of UMLs within their corporate Office environment, Visio works very well.
Features:
 Visio helps you to create professional diagram by creating flowcharts, diagrams,
org charts, engineering designs, and more.
 Allows you to connect flowcharts and diagrams to real-time data.
 It allows you to work together on diagrams from a web browser, from almost
anywhere.
3. Draw io
 Figure 13: Draw io

Draw.IO is a free online UML tool. It is one of the best UML tools that allows users to
create and manage the drawing easily these tools. A lot of the wide and early share
available with this tool.
Features:
 No limit on the number of sizes.
 Templates are present in software design itself.
 This free UML diagram tool allows you to save the model in your preferred
location.
4. Adobe Spark
 Figure 14: Adobe Spark

Adobe Spark is a flowchart software that helps you design customized and streamlined
flowcharts. It also allows you to save and share your flowchart diagrams.
Feature:
 Helps you resize your flowcharts in a fraction of the time.
 You can build a flowchart that can be resized and reformatted for posters,
infographics, emailers, etc.
 You can add animated stickers from GIPHY or apply a text animation for short-
form graphic videos.
 Allows you to instantly download or print your flowchart designs for home or
office use.
II. Tools to design User Interface
The user interface (UI) is the point of human-computer interaction and communication in a
device. This can include display screens, keyboards, a mouse and the appearance of a
desktop. It is also the way through which a user interacts with an application or a website.
The growing dependence of many businesses on web applications and mobile applications
has led many companies to place increased priority on UI in an effort to improve the user's
overall experience.
The various types of user interfaces include:
 Graphical user interface (GUI).
 Command line interface (CLI).
 Menu-driven user interface.
 Touch user interface.
  Voice user interface (VUI).
 Form-based user interface.
 Natural language user interface.
1. Figma
Designers can create interactive prototypes and mockups with Figma, test them for
usability, and keep track of all the development. Similar to Google Docs, Figma provides
for a collaborative setting where numerous people may work on a project at once while
also allowing you to see who has it open for real- time participation. You may observe
who is employed and what they are doing. Additionally, it is browser- based, making it
instantly available to everyone. Additionally, it is free for individual use so you may test it
out and learn how it functions.

Figure 15: Figma

Key features:
 Modern pen tool which allows you to draw in any direction with Vector Networks.
 Auto Layout for easy responsive design.
 Flexible Styles which you can apply across all your UI projects
 Accessible libraries with ready-made assets which you can drag and drop into your
design files.
 Code snippets for CSS, iOS, and Android, ensuring easy developer handoff.
 Plugins to automate and augment your design work.
 Interactive prototyping features including advanced transitions, dynamic overlays
and animated GIFs.
 Embedded commenting functionality for a collaborative design process.
2. Sketch
 Sketch is a software for macOS. It is known as the digital design tool, and its primary usage
is UI and UX Design of mobile, web, desktop, and wearables.
Sketch is vector-based, thanks to this, all graphics are easily scalable.
Currently, Sketch is a leading tool for UX/UI designers for UI design. There are some
competitive solutions like – Figma, Adobe XD, and InVision Studio.
Sketch can easily extend its possibilities thanks to the wide variety of plugins that may be
easily installed.
Use this Sketch Plugins to manage Design System UI Library easily
There are lots of free design resources that help to save time and start design projects
quickly

Figure 16: Sketch

Key features:
 Intuitive vector editing tools and editable Boolean operations for flexible and
iterative design.
 Infinite design canvas with flexible Artboards, design presets, customizable grids
and simple resizing tools, allowing you to scale your designs to any screen size.
 Shorthand and math operators to speed up the design process
 Variable and OpenType fonts for infinite control over your interface typography.
 Cross-platform tools for real-time collaboration, feedback, sharing and developer
handoff.
3. Adobe XD
Adobe XD works more reliably than Figma and supports Windows where Sketch doesn't,
ensuring that it still has a place in the market. Adobe XD is a breeze to use, especially if
you're familiar with other Adobe products. In fact, if you already have an Adobe Creative
Cloud subscription then you might have access to Adobe XD already.
With a surprisingly clean user experience and seamless integration with Adobe
Photoshop, Adobe Stock, Adobe Fonts and more, designing and handing off user
interfaces with Adobe XD is both enjoyable and productive.

Figure 17: Adobe XD

Key features:
 Vector-based drag-and-drop editor tool with unlimited artboards and smart guides
that help you to align different objects and elements in your designs.
 UI kits (i.e., ready-made components) for Apple Design, Google Material Design,
Amazon Alexa, and more.
 3D Transforms, allowing you to simulate object depth and perspective in your
designs.
 Components and states for iterative and scalable design. Components work
intuitively to instantly push changes across entire designs or documents, sparing
you the work of manually duplicating and implementing changes.
 Powerful animation functionality, including video and Lottie playback, micro-
animations and motion effects, scroll groups and anchor links
 Voice prototyping, enabling you to create voice commands, build in speech
playback, and integrate voice-enabled features.
 Design Specs feature to streamline the handoff process, allowing you to share
interactive prototypes, CSS code snippets and downloadable assets with
developers—all via one link.
4. Axure
Axure functions in prototyping and keeping track of the workflow. It features a smooth
interface to document as you go. High fidelity drives this app, resulting in prototypes full
of details.
Many of the additional features of well-known prototype and UI design tools are also
available in Axure. Functionality testing is made possible, and everything is assembled for
simple developer handoff. Axure is a good option for UI design because of this, along with
a focus on communication, which guarantees that everyone working on a project is kept
informed of progress and changes as they occur in real time.

Figure 18: Axure

5. Marvel
Marvel promises all the core functionality you need to design and build digital products,
including wireframing, prototyping, and design specs for handoff. And, with its user-
friendly and intuitive platform, it’s the ideal UX/UI design tool for beginners.
Marvel is a web-based tool that works in the browser, so you don’t need to download or
install anything. It has been built for simple, fast design, with features for wireframing, UI
design, and prototyping. Marvel also integrates with many other popular design tools to
help you power up your workflow.
 Figure 19: Marvel

Key features:
 Drag-and-drop wireframe templates for quick, early-stage designs.
 A vast collection of pre-made assets, images and icons to help you visualise your
ideas.
 Option to import static designs from other tools (e.g. Sketch).
 Interactive prototyping with hotspots, interactions and layers. You can learn more
about how to use Marvel for prototyping (and about other prototyping tools) in
this guide.
 Built-in user testing functionality to get feedback on your ideas and validate your
designs.
 Design handoff tool to instantly turn designs into code, specs and assets for
developers to use.
 CHAPTER 2: FRONT-END TECHNOLOGY STACK
I. HTML/CSS/SCSS/SASS/LESS
1. HTML
HTML stands for Hypertext Markup Language. People use HTML to build and structure
elements in Websites or applications, divide paragraphs, headings, links, blockquotes, etc.
HTML is aided by technologies like CSS and scripting languages. like JavaScript.
HTML is not a programming language, which means it cannot create “dynamic” functions. Like
Microsoft Word, HTML is used to layout and format web pages.
HTML when combined with CSS and JavaScript becomes a solid foundation for the online
world. HTML elements are delimited by tags, written with curly braces <>.

Figure 20: HTML

Features:
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language.
2. CSS
CSS (Cascading Appearance Sheets) is a computer language that specifies how documents are
presented to users in terms of layout and style. A document is a text file format that uses a
markup language such as HTML or other markup languages such as XML or SVG.
CSS is used to turn a document into a format that audiences can understand. This is especially
important for browsers like Chrome, Firefox, and Edge, which are designed to graphically
transmit content to screens, printers, and projectors.
 Figure 21: CSS

Features:
 Opportunity in Web designing: If anyone wants to begin a career in web designing
professionally, it is essential to have knowledge of CSS and HTML.
 Website Design: With the use of CSS, we can control various styles, such as the text
color, the font style, the spacing among paragraphs, column size and layout,
background color and images, design of the layout, display variations for distinct
screens and device sizes, and many other effects as well.
 Web Control: CSS has controlling power on the documents of HTML, so it is easy to
learn. It is integrated with the HTML and the XHTML markup languages.
 Other Languages: Once we have knowledge of some basics of CSS and HTML, other
associated technologies like Angular, PHP, and JavaScript are become clearer to
understand.
3. SASS
Sass stands for Systematically Awesome Style Sheets.
It is a CSS pre-processor. It is an extension of CSS that is used to add power and elegance
to the basic language. It facilitates you to add variables, nested rules, mixins, inline
imports, inheritance and more, all with fully CSS-compatible syntax.
Sass is more stable and powerful CSS extension language that describes style of document
cleanly and structurally. It is very useful to handle large style sheets by keeping them well
organized and running quickly small style sheets.
 Figure 22: SASS

4. SCSS
SCSS stands for the Sassy Cascading Style Sheets. The more advanced variant of CSS is
SCSS. It was created by Chris Eppstein and Natalie Weizenbaum and designed by Hampton
Catlin. It is also referred to as Sassy CSS due to its advanced features. It is a pre-processor
language that is compiled or interrupted into the CSS. It has a file extension of SCSS.
We may add several extra features to CSS using SCSS, including variables, nesting, and
many more. All of these extra features may make writing SCSS much simpler and quicker
than writing the standard CSS. SCSS may use the CSS code and function. SCSS is entirely
compliant with the CSS syntax, though also supporting the full power of SASS.

Figure 23: SCSS

5. LESS
 Less is a CSS pre-processor that facilitates you to customize, manage and reuse the style
sheets for the webpage. Less is an extension of CSS and a dynamic style sheet language
which can be run on client side or server side.
Less is an open-source language. It is also cross browser compatible.

Figure 24: LESS

II. JavaScript Library / Framework

1. ReactJS
ReactJS is an open-source JavaScript library designed by Facebook to create attractive, fast
and efficient web applications with minimal coding. The core purpose of ReactJS is not only to
make the website smooth, but also to be fast, highly extensible and simple.

Figure 25: ReactJS

2. Vue.JS
 Vue.js is a flexible framework for building user interfaces. Unlike monolithic frameworks,
Vue was designed from the ground up to enable and encourage step-by-step application
development. When developing an interface class, users only need to use Vue's core
library, which is easy to learn and integrate with existing libraries or projects. At the same
time, if combined with modern techniques such as SFC (single file components) and
support libraries, Vue also easily meets the needs of building single-page applications (SPA
- Single-Page Applications) with much higher complexity.

Figure 26: Vue.JS

3. Bootstrap
Bootstrap is now one of the most popular HTML, CSS, and JavaScript frameworks.
Bootstrap is responsive not only in terms of developing current website interfaces, but it
is also user-friendly and mobile- friendly. Bootstrap is a powerful tool for developing
websites that are simple, quick, and easy to use. By supplying pre-built HTML and CSS
design templates and adding JavaScript plug-ins for each web page element such as
forms, buttons, tables, navigation, modals, picture carousels, typography, and so on.
 Figure 27: Bootstrap

III. Conclude which Front End technologies will be used for the
development.
We use HTML, CSS, and Bootstrap for front-end technology. We chose to utilize Bootstrap
because we wanted to create pages rapidly, save a ton of time, and use that time to perfect
other features. We are
capable of That is due to prefabricated blocks. We don't have to build everything from start,
and we can easily change some components to make it entirely original and according to our
vision.
In addition, Bootstrap unpacks pre-made themes and templates when we download and
install it. We can choose from it or also choose to include input from other sources.
 CHAPTER 3: BACK-END TECHNOLOGY STACK
I. Back End Programming Language
1. C#
C# is a high-level object-oriented programming language that quickly adapts to run on
many different kinds of systems. This strong language is used by programmers in
conjunction with frameworks such as.NET to design the underlying structure of webpages
and to connect client interactions with server interactions to create a program capable of
its full range of functionality. C# and the associated frameworks are excellent web and
software development options because of their adaptability and consistency.
2. PHP
Hypertext Preprocessor, also known as PHP, is an established player in the field of web
development. This 1994-born, free-to-use server-side scripting language was designed
with web development in mind. It is also not necessary to need a compiler because it is an
interpreted language, and it can be used with practically every major operating system,
including Windows, Linux, macOS, Unix, etc. Speaking about PHP's enlivening qualities,
there are a ton of them, including its user-friendly nature, cross-platform compatibility,
OOPs capabilities, support for numerous common databases like MySQL and SQLite, as
well as its robust community. Other than that, PHP is very much secure as a server-side
scripting language as there are numerous hash functions available in PHP for the
encryption of user’s data. In particular, if you’re a beginner – you can opt to go with PHP
for backend web development.
3. JavaScript
Whenever there is a talk of web development – most probably, 9 out of 10 times the
name of JavaScript comes in the discussion. As per the annual reports of various popular
platforms like Stack Overflow and Octoverse – JavaScript is one of the most preferred and
leading programming languages in the tech world. One of the major reasons behind it is
that the particular language can be used for both – Front End Web Development and Back
End Web Development. Looking at several past trends and stats, it can be said that the
popularity of Node.js has somehow increased the usage of JavaScript as a backend
language for web development. Meanwhile, the language provides you with several
remarkable features for backend development such as Light-weight Scripting language,
Dynamic Typing, Interpreted, Object-Oriented programming support, Client-Side
Validation, Huge community support, and many more.
JavaScript Frameworks for Backend Web Development: Next.js, Express, MeteorJS, etc.
Popular websites that are using JavaScript: Facebook, Google, eBay, etc.
II. Operating System
 An operating system (OS) is the program that controls all other application programs in a
computer after being installed into the system first by a boot program. Through a specified
application program interface, the application programs seek services from the operating
system (API). Additionally, users can communicate directly with the operating system by using
a user interface, such as a graphical user interface (UI) or a command-line interface (CLI)
(GUI).
Operating system that serves many purposes. A general-purpose OS is any of a number of
operating systems designed to run a variety of applications on a variety of hardware, allowing
a user to execute one or more tasks or apps at once. A general-purpose operating system (OS)
can be installed on a wide range of desktop and laptop models and can run a variety of
programs, including accounting software, databases, web browsers, and games.
General-purpose operating systems typically focus on process (thread) and hardware
management to ensure that applications can reliably share the wide range of computing
hardware present.
1. Windows
A well-known closed source operating system is Windows from Microsoft. It is one of the
operating systems with the largest market share among computing devices. Using this
operating system, you may browse files, run programs, play games, connect to the
internet, browse the web, and other basic computer tasks.
The most recent version of the operating system is Windows 11. Windows not only offers
all the features that common user desire, but it also offers a variety of intricate features
and specialized platforms for big businesses and organizations.
2. Mac OS
MacOS, whose name comes from the phrase Macintosh operating system, is an operating
system developed by Apple, and first introduced in 2001.
Experiencing many different names, which was originally Mac OS X, then shortened to OS
X in 2012, and it was not until 2016 that the name macOS appeared.
This operating system has appeared on many Apple products such as desktop computers
or laptops, and so far, has had a certain foothold in the market.
III. Web Server
1. Apache
The Apache Software Foundation developed and maintained the Apache HTTP Server, a
well-known free and opensource web server software.
The Apache Online Server's role is to establish the flow of web content delivery across the
internet. The Apache Web Server connects the server and the user's browser and
transports files between them.
 The browser will make a request to the server whenever a user accesses a webpage using
the browser. Delivering complete results for the files and components used to display web
pages is the responsibility of Apache. The server and client communicate with one
another using the HTTP Protocol.
The Apache Web Server architecture also has a wide variety of highly configurable
modules that the server administrator can use to perform tasks like adding or removing
functionality, providing security caching, authentication, passwords, and other tasks.
2. IIS
Similar to Apache Web Server, IIS (Internet Information Services) is a Microsoft Web
Server application.
ASP.NET, a C#-based website development platform from Microsoft, is often used to
create websites. The deployment of websites created in other languages, such as PHP,
Perl, and others, is also possible with IIS.
IIS supports a variety of authentication schemes, including Basic access authentication,
Digest access authentication, Windows Authentication, Certificate authentication, and
others. Other sophisticated security capabilities include SSL/TLS support, Server Name
Indication (SNI), FTP server security settings, and more.
IIS, which is designed in the form of modules, enables the opening, disabling, and setting
of a variety of feature to fulfill the demands in the simplest way possible. The web server's
speed and security are also proper addressed.
IV. Database
1. MySQL
MySQL is one of the most popular databases for web-based applications. It's freeware,
but it is frequently updated with features and security improvements. There are also a
variety of paid editions designed for commercial use. With the freeware version, there is a
greater focus on speed and reliability instead of including a vast array of features, which
can be good or bad depending on what you're attempting to do.
With this database engine, you can choose from a range of storage engines to alter the
tool's functionality and handle data from various table kinds. Additionally, it includes a
user-friendly interface and batch commands that enable you to process massive amounts
of data. The system is also very resource-efficient and extremely reliable.
2. Microsoft SQL Server
As with other popular databases, you can select from a number of editions of Microsoft
SQL server. This database management engine works on cloud-based servers as well as
local servers, and it can be set up to work on both at the same time. Not long after the
release of Microsoft SQL Server 2016, Microsoft made it available on Linux as well as
Windows-based platforms.
 Temporal data support, which enables tracking changes made to data over time, is one of
the edition's outstanding features for 2016. Microsoft SQL Server's most recent version
also supports dynamic data masking, which guarantees that only authorized users will
have access to sensitive data.

Figure 28: Microsoft SQL Server

3. PostgreSQL
PostgreSQL is one of several free popular databases, and it is frequently used for web
databases. It was one of the first database management systems to be developed, and it
allows users to manage both structured and unstructured data. It can also be used on
most major platforms, including Linux-based ones, and it's fairly simple to import
information from other database types using the tool.
Numerous settings, including virtual, physical, and cloud-based ones, can host this
database management engine. PostgreSQL 9.5, the most recent version, provides greater
data quantities and more concurrent users. Support for both DBMS SESSION and wider
password profiles has also increased security.
V. Hosting
When a hosting provider allocates space on a web server for a website to store its files, they
are hosting a website. Web hosting makes the files that comprise a website (code, images,
etc.) available for viewing online. Every website you’ve ever visited is hosted on a server.
The amount of space allocated on a server to a website depends on the type of hosting. The
main types of hosting are shared, dedicated, VPS and reseller. They are differentiated by the
 kind of technology used for the server, the level of management provided and the additional
services on offer.
As technology has progressed, different types of web hosting have been introduced to meet
the different needs of websites and customers best. These include:
1. Azure
Web hosting on Azure is a vital tool that, when utilized by the production unit, makes it
possible to manage cloud computing and storage accounts using a straightforward
method that has never been implemented before. Users can manage many databases,
virtual machines in multiple locations, and subscriptions. The platform marks meek as
capable of handling all available resources and developing appealing dashboards and
templates to streamline and organize the work. Web hosting provided by Azure allows
users to scale independently run websites while still managing them under a single
subscription. As a result, the user is provided with the ability to construct the sites that he
desires, and this can be accomplished without wasting any expense.
2. AWS
AWS (Amazon Web Services) is a comprehensive, evolving cloud computing platform
provided by Amazon that includes a mixture of infrastructure as a service (IaaS), platform
as a service (PaaS) and packaged software as a service (SaaS) offering. AWS services can
offer an organization tool such as compute power, database storage and content delivery
services.
AWS offers many different tools and solutions for enterprises and software developers
that can be used in data centers in up to 190 countries. Groups such as government
agencies, education institutions, nonprofits and private organizations can use AWS
services.
3. Google Cloud
Virtual machines (VMs) and other physical and virtual resources, housed in Google's data
centers across the world, make up the Google Cloud. Physical resources include
computers and hard drives. Every data center site is located in an area. Asia, Australia,
Europe, North America, and South America all have

regions available. Every region is made up of zones that are separate from one another
inside the region. Each zone has a name that comprises a letter identification and the
region's name.
Because the resources are spread out, there is redundancy in case of failure and there is
less latency because the resources are closer to the clients. Additionally, this release
presents a few guidelines for combining resources.
VI. Framework
 1. ASP.NET Core
Laravel is an open-source PHP web framework for developing Symfony-based web
applications that follow the model–view–controller (MVC) architecture.
It provides a specialized dependency manager and a modular packaging mechanism. One
of the top web frameworks is Laravel, which some experts believe to be the best backend
development tool.
Laravel also provides its users with multiple ways of accessing relational databases along
with application maintenance and deployment utilities. Laravel has an MIT license and has
a source code hosted on GitHub.
2. Spring boot
Spring Framework is an open-source application framework and the Java platform’s
inversion of control container. Java applications can utilize the core features of this
framework. Users can also use many extensions for creating web apps based on the Java
EE platform.
VII. Conclude which Back-end technology will used for development
Our team chose to use the WISA stack for this project (Window, IIS, SQL Server, ASP.NET).
Therefore, we will pick technology from this stack and related fields. A stack refers to the
configuration of these four programs that is employed. It is mainly helpful for internal testing
and web development, but it is also used to serve live web sites. The IIS server, which lets
Windows run the web server, is the main component of WISA. Web designers can create web
pages in a web browser without being connected to the internet by running a local IIS web
server on a Windows machine using WISA. Open-source components IIS, SQL server, and
ASP.NET are deployed together on Windows to provide user-friendly settings. A very user-

friendly tool that makes it simple to setup databases and write ASP.NET code on the Windows
platform. Both 64-bit and 32-bit systems support WISA. WISA has access to our settings files
as well as your server settings. Additionally, it makes aliases and accesses our logs. It provides
you with online or offline access, indicating whether to grant access to all users or only local
hosts.
 Back-end Programming Language: C#
 Operating system: Windows
 Database: Microsoft SQL Server
 Hosting: Local host
 Web Server: IIS
 Framework: ASP.NET Core
 CHAPTER 4: TOOLS FOR SOURCE CONTROL
MANAGEMENT
I. Git, GitHub, GitLab
1. Git
Git is a DevOps tool used for source code management. It is a free and open-source
version control system used to handle small to very large projects efficiently. Git is used to
tracking changes in the source code, enabling multiple developers to work together on
non-linear development. Linus Torvalds created Git in 2005 for the development of the
Linux kernel.
Git is a version control tool used to monitor changes made to digital assets. In software
development, it is typically used for source code management.
 Git is used to tracking changes in the source code.
 The distributed version control tool is used for source code management.
 It allows multiple developers to work together.
 It supports non-linear development through its thousands of parallel branches.
2. GitHub & GitLab
GitLab: GitLab is a repository hosting manager tool that is developed by GitLab Inc and is
used for the software development process. It provides a variety of management by
which we can streamline our collaborative workflow for completing the software
development lifecycle. It also allows us to import the repository from Google Code,
Bitbucket, etc.
Following are some features of GitLab:
 Open-source community edition repository management platform.
 Easy Maintaining of a repository on a server.
 Offers tools like Group Milestones, Time Tracking and Issue Tracker, etc. for
effective development.
 More Spontaneous User interface and authentication features.
GitHub: GitHub is a tool for collaboration and access control that hosts a repository. It
serves as a venue for programmers to collaborate on bug fixes and host open-source
projects. For developers to track their modifications into a project through the repository,
GitHub was created.
GitHub feature:
 Specifies milestones and labels to the projects.
 Comparison view between branches is allowed.
 GitHub Pages allows us to publish and host websites within GitHub.
  Syntax highlight feature.
 It allows third-party API integrations for bug tracking and cloud hosting.
II. Conclude which tools will be used for the development
The use of version control for our code is one of the most common coding best practices. A
strong version control workflow is crucial whether we are writing in Ruby, JavaScript, Python,
or any other language, and GitHub helps implementing that workflow simpler by providing
developers with excellent tools to use.
Hosting Git repositories on GitHub. Git is a very well-liked version control system that lets
programmers keep track of changes to their code over time.
GitHub also adds several of its own functionalities to the ones offered by Git, include:
 Web-based graphical interface
 A Pastebin style site named Gist
 Great tools for collaborating with other developers
CHAPTER 5: SOFTWARE DEVELOPMENT MODELS
I. Software Models.
1. Waterfall Model
The waterfall model was first developed by Dr. Winston W.Royce as a software
development process paradigm. In this paradigm, the software development process is
divided into stages and carried out sequentially, with the output of one phase serving as
the input for the next phase and no overlap. This approach is dubbed the waterfall model
because the flow of such a series from top to bottom mimics that of a waterfall

Figure 29: Waterfall Model

2. V-Model
The V-model is one of the most widely utilized software development methodologies
today. In the V model, the request phase precedes the test execution phase. The V model
is also known as the validation or verification model. In a typical V-model development
process, development activities are on the left, while testing activities are on the right. As
a result, development and quality assurance tasks are completed concurrently.
 Figure 30: V-Model

3. Scrum Model.
Scrum is a process and organizational structure that aids in the resolution of complex
problems while also ensuring efficiency, innovation, and high-value products. Scrum is a
fundamental framework for promoting the most effective collaboration among members
of a development team while working on complex projects. Scrum is a product
development methodology that uses a succession of iterative procedures to create a
finished product (called a Sprint). Sprints are held on a regular basis, and each one
provides an opportunity to learn and change so that the best fit and outcomes can be
achieved.
Figure 31: Scrum Model
II. Conclude which SDLC model will be used for the development
In the project we choose to use Waterfall model because:
 The requirements are very well known, clear and fixed.
 There are no ambiguous requirements
 The project is short.
 Technology is understood.
 Product definition is stable.
 CHAPTER 6: ILLUSTRATE ALL YOUR FINDINGS ON
HOW TO USE THESE BY DRAWING THE OVERVIEW

Figure 32: Overview of selected technologies

From left to right:

 Wireflow is used to design the program's wireflow.

 Draw.io is used to create application diagrams such as the ERD (entity relation diagram), class
diagram, and activity diagram.
 HTML, CSS, and Bootstrap are used to create the website's content and aesthetic.
 The Microsoft IIS Web server will accept requests and reply to HTML website components.
 The MVC model framework will be ASP.NET Core, which will be used to develop the website's
functionalities and activities.
 The Entity Framework will be utilized to establish a database based on the application's Models.
 Ms Windows will be the operating system in which these changes will be made.
 Ms SQL Server is utilized to store the application's database.
 GitHub is utilized to store and manage the application's source code.
REFERENCE
https://www.tutorialspoint.com/php/php_introduction.htm.

https://www.definitions.net/definition/laravel.

https://www.definitions.net/definition/GITHUB.

https://www.geeksforgeeks.org/introduction-to-c-sharp/.

https://www.techtarget.com/searchaws/definition/Amazon-Web-Services.

https://www.computerhope.com/jargon/w/windows.htm.

https://technobrains.io/advantages-of-asp-net-core-for-building-microservices/

https://www.techtarget.com/searchwindowsserver/definition/IIS.

https://www.techtarget.com/searchitoperations/definition/Git.

https://www.tek-tools.com/database/sql-server-best-practices-and-tools.