1 Database

1.1 Introduction to MySql server

MySQL Server is a popular opensource database management system widely used worldwide. It
provides a reliable and robust data storage environment for web and enterprise applications.
MySQL Server is developed, supported and maintained by Oracle Corporation.
MySQL Server is capable of handling database-related tasks such as querying, updating, adding,
deleting data and managing databases. It provides features such as multithreaded connection
protocols, data security, data backup and recovery mechanisms, and many more to support
effective database management.
MySQL Server is often used in web applications such as e-commerce websites, blogs, forums, and
other online applications. It is also used in corporate environments for storing and managing
business data.
MySQL Server is available as open source and can be downloaded and used for free from the
official MySQL website. Additionally, there are also commercial versions of MySQL provided by
Oracle with extended features and support.
It has become one of the most popular DBMSs in the world, especially in the field of web and
mobile application development. Here are some key specifications and features of MySQL Server:
1.1.1 Open Source Architecture:
MySQL Server is developed based on open source code, allowing developers to customize the
source code to fit their specific needs. This openness also facilitates a strong development
community, contributing to the continued growth and improvement of MySQL.
1.1.2 Diverse platform support:
MySQL Server can run on many different operating systems, including Linux, Windows and
macOS. This facilitates flexible deployment and easy integration into existing system
environments.
1.1.3 Consistency and durability:
MySQL Server provides high consistency and durability for your database. It supports features
such as intersection (ACID), which ensures that transactions are performed securely and properly.
1.1.4 High performance:
MySQL is optimized to provide high performance for high-load applications. With performance
improvements such as query optimization, caching, and indexing, MySQL can process thousands
of queries per second while ensuring stable performance.

1
1.1.5 User management and security:
MySQL provides tools to manage users and access to the database. You can set up separate access
permissions for each user and control their access to data.
1.1.6 Large Community and Support:
MySQL has a large community of users and developers. This community provides support through
forums, documentation, and development tools, making it easier to deploy and develop
applications on the MySQL platform.
In short, MySQL Server is a powerful, flexible and high-performance database solution, suitable
for many different types of applications, from personal projects to large enterprise systems.

1.2 Security in sql server

In SQL Server, security is considered an important factor to ensure data and system safety. Security
is considered an indispensable part to ensure data and system safety. To meet this need, SQL Server
provides a wide range of security features and mechanisms. Here are some key security features
and mechanisms in SQL Server:
Managing Users and Access Rights: First, you can manage users and their access rights. SQL
Server allows you to define specific access rights for each user or group of users, helping to
control and manage access to data. SQL Server allows you to create and manage users and
define their access rights to the database. You can set access permissions for individual users or
groups of users, including SELECT, INSERT, UPDATE, DELETE and EXECUTE
permissions.
Windows Authentication and SQL Server Authentication: SQL Server supports both Windows
authentication (Windows Authentication) and SQL Server authentication (SQL Server
Authentication). Windows authentication uses Windows accounts and passwords, while SQL
Server authentication uses login names and passwords managed by SQL Server.
Data Encryption: Encryption tools in SQL Server allow you to protect sensitive data by
encrypting information in the database. This includes features like Transparent Data
Encryption (TDE) and Always Encrypted, which help protect data at many different levels.
SQL Server provides encryption tools to protect sensitive data. Encryption features include
Transparent Data Encryption (TDE), Always Encrypted and Cell-Level Encryption, which help
protect data while it is in table, in memory or in transit over the network.
Audit and Monitoring: SQL Server allows you to monitor and record database activities using
the Audit feature. You can configure Audit to record events such as logins, query executions,
data structure changes, and more.

2
 Firewall and Network Protection: Additionally, you can use firewall and network protection
features to control access to SQL Server ports and services from untrusted sources. SQL Server
supports firewalls and network protection mechanisms to control access to SQL Server ports
and services. You can configure the firewall to only allow connections from defined IP
addresses and disable unnecessary features such as SQL Browser.
Updates and Maintenance: SQL Server regularly releases security patches and updates to patch
newly discovered security vulnerabilities. Maintaining your SQL Server system to the latest
version and regularly updating it is an important part of ensuring the security of your system.
In short, SQL Server provides a wide range of security features and mechanisms to help you
protect data and systems from security threats. However, establishing and maintaining security
measures is an important part of effectively managing SQL Server databases.

1.3 Data types

In SQL Server, there are many data types suitable for storing and processing information in the
database. Each type of data has its own role and application. Below are some common data types
and their roles:
Text Data: This data type is used to store variable-length character strings, including text,
HTML code, XML code, and similar data types. Text data is often used for descriptions,
messages, or values that do not have a fixed format.
Numeric Data: This data type is used to store numeric values, including integers and real
numbers. Numerical data is often used for calculations, quantification, and evaluation in
databases.
Date and Time Data: This data type is used to store date and time information. This includes
data types such as DATE, TIME, DATETIME, and TIMESTAMP. Date and time data are
commonly used for timestamping events, taking notes, and time management.
Boolean data (Boolean): This data type can only have two values: TRUE or FALSE. Boolean
data is often used to represent logic states such as on/off, yes/no, or true/false.
Binary data (Binary): This data type is used to store binary data, such as images, sounds or
other files. Binary data is commonly used in applications that require the storage and retrieval
of binary files.
JSON data (JSON): This data type is used to store and process JSON (JavaScript Object
Notation) data, a popular data format for transferring data between applications. JSON data is
commonly used in web and mobile applications to interact with data from web services or
APIs.

3
Each data type in SQL Server has an important role in storing and processing information in the
database. Choosing the right data type helps optimize the performance and flexibility of your
database system.
1.3.1 Why must you choose the right data type?
Choosing the right data type is an important part of the database design process in SQL Server
because it affects the performance, flexibility, and security of the system. Here are some specific
reasons why choosing the right data type is important:
Performance: The right data type helps optimize database performance by saving storage space
and increasing data processing speed. Using the numeric data type for numeric values and the
text data type for character strings helps optimize data storage and retrieval.
Flexibility: Choosing the right data type also increases system flexibility, allowing you to
perform data processing operations more efficiently. For example, using date and time data
types for time fields allows you to perform time-related queries and calculations more easily.
Security: Choosing the right data type also plays an important role in protecting your data.
Using data types designed to securely store sensitive information, such as encrypted data for
sensitive information, helps reduce the risk of data loss and security breaches.
Compatibility and Integration: Choosing the right data type also ensures system compatibility
and integration. Using common and standard data types like JSON for interacting with web
services or APIs makes it easier to integrate the system with other applications and services.
Easy Management: Choosing the right data type also makes database management and
maintenance easier. Using structured and easily style able data types will help you perform
data management operations efficiently and save time.
In summary, choosing the right data type is an important part of the database design process in
SQL Server to ensure system performance, flexibility, security, and compatibility.

1.4 Role Implementation

Every user in the database has two values assigned to them: Role and Faculty, which are necessary to
implement the roles that are specified by the user stories and the client. The role that a user has will dictate
the tasks that they can perform within the UM. For instance, a user assigned the role admin will only be
able to access administrative pages and perform tasks related to that role; on the other hand, a user with the
role student will be able to upload contributions and access certain areas of the application without
restriction.
Faculty is used to identify which faculty a student or staff member belongs to. In a similar vein, this enables
the guest account associated with a faculty to view contributions that match the Faculty of the specific
guest account, for example, the science account can only view contributions made by science students.
Staff members can view, comment on, and approve magazine articles uploaded by students of their faculty.

4
1.5 Referential integrity
Referential integrity is an important concept in databases, describing relationships between data
tables. Referential integrity ensures that relationships between tables are maintained and that data
in the database always remains consistent.
Specifically, referential integrity is typically implemented through the following rules:
Foreign Key: In a referential relationship between two tables, the child table will contain a
foreign key, which is a field or set of fields that refer to the parent table's primary key. Foreign
keys ensure that each value in the child table corresponds to a valid value in the parent table.
Action on Update/Delete: When data in the parent table changes (updated or deleted),
referential integrity dictates the action that will occur on the related data in the child table.
Common actions include RESTRICT (restrict), CASCADE (propagate), SET NULL (set a
NULL value), or SET DEFAULT (set a default value).
Check Constraints: Sometimes, in addition to using foreign keys, you can also apply check
rules to ensure data consistency. For example, you can use a check rule to ensure that the value
in a field belongs to a given set of values.
Referential integrity ensures that each relationship between tables in the database is strong,
consistent, and free of disorders. This helps prevent invalid data entry and ensures that the data in
the database is always reliable and accurate.
 For example:
Here is a specific example of referential integrity in a sales database:
Suppose we have two tables: Table "Customers" and Table "Orders".
The "Customers" table contains information about customers such as CustomerID,
CustomerName, and Address.
The "Orders" table contains information about orders such as Order ID (OrderID), Customer
ID (CustomerID), Order Date (OrderDate), and Total Amount (TotalAmount).
In this example, "CustomerID" in the "Orders" table is a foreign key pointing to "CustomerID" in
the "Customers" table, forming a relationship between two tables.
Steps to establish referential integrity:
Create Customers Table (Customers):
CREATE TABLE Customers (
CustomerID INT PRIMARY KEY,
CustomerName VARCHAR(255),
Address VARCHAR(255)
5
 );
Create Orders Table with Foreign Key:
CREATE TABLE Orders (
OrderID INT PRIMARY KEY,
CustomerID INT,
OrderDate DATE,
TotalAmount DECIMAL(10, 2),
FOREIGN KEY (CustomerID) REFERENCES Customers(CustomerID)
);

In this example, when a new order is added to the "Orders" table, the system checks whether the
value of "CustomerID" exists in the "Customers" table.) or not. If it does not exist, the system will
refuse to add that order to the database, preserving referential integrity. This ensures that each order
is always associated with a valid customer.

1.6 Design Documentation

An ERD was created for the database of the magazine management system, which in the end helps the
frontend application achieve the necessary functionality. This is particularly true for role implementation
and allowing multiple images for a contribution. This was done to ensure that all necessary features could
be implemented. There are now five tables in use, all of which have the proper restrictions in place to
enable the formation of links between them.

6
2 Site Design
2.1 Usability
In this project, the TTL team was involved in the process of designing a website with the goal of
meeting important quality criteria such as user experience, cross-platform compatibility, high
security, flexibility, content quality, ease of management and legal compliance.
We have focused on extensive research and discussions on various aspects of the project. It's
important that we put users at the heart of design decisions, ensuring that the site provides the best
experience for them. At the same time, building a beautiful and easy-to-use interface is one of our
top priorities.
Additionally, we have taken the time to research and implement effective security measures,
ensuring that user data will be maximally protected on the website. This includes adopting leading
security standards, data encryption and regular system updates to deal with the latest threats.

7
Finally, we discussed and defined project management and content management processes to
ensure that the website would be effectively maintained and updated once it was live. This will
help ensure that the website always provides the most current and reliable information to its users.

2.2 Accessibility
A website's accessibility refers to a user's ability to access and interact with that website's content.
This is an important element in web design, because a website needs to ensure that everyone can
access and use the website effectively.
Here are some of the means we have adopted to ensure the accessibility of a website:
Readable and Comprehensible Design: Use easy-to-read fonts and large font sizes to make website
content easier to read, especially for users with visual disabilities.
Easy-to-Use Interaction and Navigation: Build a navigation and interaction system that is intuitive
and easy to use, including using buttons and links that are large, clear, and easy to press.
Color and Contrast Design: Use color and contrast so that website content is easy to see and
perceive, especially for users with color disabilities.
By following these principles, we can enhance the accessibility of our website, ensuring that
everyone can enjoy its content and functionality conveniently and effectively.

2.3 Consistency
The KISS (Keep It Simple, Stupid) principle is an important principle in user interface and user
experience design. It emphasizes keeping the interface and user experience simple and
straightforward, making it easier for users to use and understand. Below are the specific principles
of the KISS principle:
Eliminate unnecessary complexity:
Eliminate or minimize unnecessary elements, features, or details in the user interface. This
helps create a cleaner and easier-to-use interface.
Minimize the interface:
Keep the interface simple, direct, and not too complicated. Avoid clutter or too much
information on one screen, helping users focus on what's most important.
Use easy-to-understand language:
Use simple, straightforward, and direct language that users can easily understand and interact
with. Avoid using complicated or unclear terms.
Streamline workflow:

8
 Reduce the number of steps and operations required for users to achieve their goals. Optimize
workflow so users can complete tasks as quickly and easily as possible.
Optimize user experience:
Create a user experience that users can learn and use in the most natural and easy way, without
having to read instructions or have outside support.
Continuous testing and evaluation:
Perform periodic testing and evaluation to ensure that the user interface and experience are
kept as simple and effective as possible. Make adjustments and optimizations as necessary to
meet user needs and desires.
(Norman, 2015)

2.4 Design the theme.

Use consistent styles, colors, fonts, and design elements across the entire site to create a unified
user experience.

2.5 User experience

User Experience (UX) is the most important factor when designing products or services on any
platform. A good user experience must ensure that users can interact with the product easily and
comfortably. This requires a focus on user interface, content quality, and performance. A product
with a good user experience needs to be designed with clarity and ease of understanding, integrate
attractive and useful features, and ensure compatibility across a variety of devices. Most
importantly, the product needs to create real value for users, helping them solve problems or
achieve goals effectively. Only through focusing on user experience can we build products that
bring satisfaction and positive impressions to users.

2.6 Content
Consistency of content on a website is an important factor in ensuring that information is
communicated in an understandable and consistent manner to users. This ensures that users can
easily access and find the information they need quickly and effectively. To achieve this
consistency, organizing content logically and clearly is important. Content needs to be divided into
clear sections, sections, and categories, making it easy for users to navigate and find information.
Additionally, using a consistent and appropriate writing style should also be considered, along with
ensuring that the style and formatting of text, images, and videos is consistent across the entire site.
Additionally, regularly checking and updating content is essential to ensure consistency and
reliability of information on the website.

9
2.7 Responsive and Compatible
The product must be compatible with a variety of devices and screens, from desktop computers to
mobile phones.

2.8 Quality Inspection and Control

Testing and quality control of a website is an important part of website development and
maintenance. By performing these tests, we can ensure that the website operates smoothly and
efficiently across all platforms and browsers. At the same time, quality control also helps ensure
that the information on a website is accurate and engaging, from checking links to avoid broken
links to testing page load speeds to improve the experience. user. Additionally, security testing is
also an integral part, ensuring that the website is protected from cyber threats. By performing
regular testing and quality control, we can ensure that the website consistently meets high
standards of performance, security and user experience, creating a vibrant online environment.
safe, reliable and attractive to users.
2.8.1 Other technologies are used
Bootstrap:
Originally created for Twitter's internal use, the CSS framework Bootstrap was released under the General
Public Licensing (GPL) license (Bootstrap, 2021). As it has developed over time, numerous prestigious
organizations have chosen to adopt it, including Microsoft, CNN, BBC, and many more. In essence, it's
pre-compiled CSS that you can add to any project to create a simple or extremely complicated website
without having to spend time creating your own CSS rules.
Bootstrap CSS served as the main hub for all user-visible design elements in the UM project. As was
previously said, the University Magazine (UM) full scalability was made possible by the utilization of this
framework. The landing page for the UM is depicted in the picture, which shows the user interface for the
desktop version. The landing page that appears on a mobile device is depicted in the figure. displaying how
the same material is skillfully rearranged to give the user complete access to the application on any device.

10
In addition to Bootstrap, project UM also takes advantages of:

11
One popular JavaScript framework is jQuery. Some of the bootstrap elements require jQuery in order to
work correctly. For instance, when a user clicks on a link or button in the main navigation bar at the top of
the page, specific items or objects are displayed or hidden using jQuery. While this navigation will load
properly as a visual element without jQuery, any components that function, such as drop-down buttons,
won't work.
While jQuery may be used to check data instantly, back-end programming languages like PHP are
employed for the majority of our form validation. The back-end portion of UM makes extensive use of
jQuery to show or conceal certain components, such as pop-up notifications and hidden page elements, as
needed.

Font awesome:
Dave Gandy created it specifically to be used with Bootstrap. You may get Font Awesome from
BootstrapCDN. On December 7, 2017, Font Awesome 5—which has 1,278 icons—was launched.
The most recent version, Font Awesome 6, was made available in February 2022. On top of the Font
Awesome 5 icons already available, users will have the option to add their own icons.
The United Nations Office for the Coordination of Humanitarian Affairs (OCHA) and Font Awesome
announced a partnership on March 16, 2022, about the humanitarian symbols in Font Awesome 6.1.

Other aspect considered:

As a co-developer of the front-end design for the UM, I knew that the page's loading speed was an
important aspect. There is additional effort made to lower the page load speed to a reasonable level because
the program will be retrieving resources such as web fonts and data from the database. The following safety
measures are taken when coding for an UM project:

Deferral of Script:
After the page loads, the majority of embedded JavaScript, either internal or external, loads. When Google
Page Speed (2017) is used to scan the MMS and discover numerous factors that might be utilized to
enhance the system, this is one of the main recommendations.

Keeping it basic:
The UM website design keeps everything to a minimum. For example, there are only two colors used
throughout, the fonts are consistent, and the textual content is presented to the user in smaller, more
manageable chunks to prevent information overload and bad usability design. An example of the use of this
idea at UM was taken from the Google site. Additionally, UM has a very basic navigation and information

12
architecture that make it easy for users to explore and complete their necessary duties. This is because it has
a simple design that makes it possible for users of any ability to use its highly sophisticated technology.

2.8.2 Information Architecture

A website that is easy to use, maintainable, user-friendly, and people-oriented has a well-structured
information architecture. Information architecture places a strong emphasis on user interaction with
websites and applications while also helping to organize, structure, and identify the contents of websites.
Without exception, nevertheless, the system's strong and well-designed information architecture is the
cornerstone of the UM project and a major factor in its success. It provides users with a number of essential
functions, including making it easier for them to find the information they need and guiding them through
tasks on websites.
Like most of the time, when utilizing any website or application, users carry out CRUD actions. With the
UM project, this is also the case. Information architecture aids users in understanding where they are on a
website, providing them with highly focused alternatives nearby, and anticipating the expected response in
the case of an event when publishing, reading, and displaying data to the UM system. By creating an
effective website workflow, it also helps consumers discover the information they need and move between
the many sections of a website.
By creating wireframes for the UM project prototype, information architecture was crucial in the
construction of the project's user interface and interaction designs. Our site map and the application of our
workflow practices are depicted in the figure below.

13
2.8.3 Mobile Design
Interface

14
15
2.8.4 Desktop Design
Login interface

16
registration interface

3 Functionality
The project is based on PHP, Apache, and Windows. The Model-View-Controller (MVC) design pattern
and modules are used in this project to keep data modeling and display distinct. By using this design
pattern, we were able to work together more effectively since the developer, was able to work on the
application's modeling, routing, and control while the designers, Abrar and Noor, were able to concentrate
on the presentation and user experience by making the data objects available to the View.

3.1 Role based security

Role-based security is a method in the information technology field used to manage access to a
system or application based on a user's role or group of roles.
In this model, roles are defined and assigned to users or groups of users. Each role will have a set
of permissions and these permissions are managed and controlled by the system. When a user is
assigned to a specific role, they will be granted the permissions corresponding to that role, and the
system will check their access rights based on this role.

17
The `OnBootstrap()` function, which is invoked after all modules are initialized, is utilized by a
`AccessControl` module. Here, we specify access limitations based on roles, and we use MVC events to
change routing such that the routes meet our pre-established constraints based on roles.

3.2 Submission of Contributions

User-generated material on the website may be created, viewed, and edited using a Contribution module.
To receive and verify files and submissions, we utilized Forms and Validation. Numerous submissions can
be made to the magazine management system by a student user. Viewing submissions from students in
their different faculties allows marketing coordinator users to examine, download, and comment on the
work of the students. The marketing manager may see and download student contributions from all
faculties.
We used.phtml view templates to serve up multiple layouts from the same actions within our controllers so
that we could serve up views to different user types while maintaining the same underlying business logic.

3.3 Email Notification

We use the PHPMailer library to send an email to notify the coordinator that a student has just published a
magazine.

3.4 Summary and Exception Reports

There are several reports in the magazine management system. The Faculty Summary Reports are one
instance; these reports reflect the contributions made by each faculty member over the academic year. The
marketing manager and guest users can see these reports.

18
3.5 UML diagrams
There were no strict relationships between the different functionalities of the system while using the
modular architecture. An authentication service is used to access the users' properties, and access control is
linked to the system's MVC events. We avoided a monolithic application, spaghetti code, and recurring
conditional statements like the one below in all of our modules by designing this corporate solution in this
manner.
if($user->role = "STUDENT" || $user->role == "GUEST")

3.5.1 Use case

19
3.5.2 Class Diagram

3.6 Website Analytics

Google Analytics (GA) is integrated into the UM website to provide real-time website analytics and data on
things like active users, most-visited pages, website traffic, user origins, and browser types used to access
the website, among other things. Easily viewed on the Google Analytics dashboard are these reports.
However, we generated bespoke web components using polymer, a java script framework, which enabled
us construct the necessary parts to display the aforementioned data on the UM website. This allowed us to
show the Google Analytics dashboard elements and needed reports on the UM website directly. Polymer
obtains Google data in JSON format by use of the framework's Google Analytics API.
Polymer elements are then used to portray the JSON data in the form of tables, charts, and graphs. These
components offer excellent maintainability and are reusable. Additionally, the data may be sorted to
provide various metrics and dimensions for the necessary analytics. It is only accessible by system
administrators and uses the Google Sign-in API for authentication for security reasons.

3.6.1 Yearly Report

The website traffic for each year is seen below. Businesses may use this data to make choices and better
understand their website trends.

20
3.6.2 Percentage of contributions by each Faculty for any academic year
Displaying the percentage of magazine contributions of each faculty each year helps everyone know which
faculty contributes the most magazines each year to reward or commend them.

3.6.3 Number of contributors within each Faculty for each academic year
Displaying the exact number of contributors to each faculty's magazines each year helps us understand the
level of interest in learning and researching of students about each faculty's research topics.

3.6.4 Contributions without a comment

These magazine articles are still published and counted in the faculty every year like other magazine
articles. Because students only read magazine articles and don't leave any comments. That's perfectly
normal.

3.7 Further Developments

After giving the concept some thought, team talked about how, with greater funding, they could have
improved the system. One recommendation was to improve the user experience by utilizing AJAX and
JQuery. With JQuery, we could incorporate "Drag and Drop" file transfer features into the system. Popular
websites are increasingly using this technique of uploading user-generated material. At first, we tried using
AJAX to insert the "View Feedback" section inside a Modal and populate it without requiring page changes
or reloads. Regretfully, in order to meet the demands of the stakeholders, we had to reduce its capability
over time.

3.8 Code Snippets

4 Testing

21
4.1 Test plan
Date Test Purpose Process Expected Result Actual result Pas Action Taken
Numbe s/
r Fail
04/04/202 1. To check a student account Enter correct details provided Logged in As expected Pas No further
4 can login successfully. and click login. successfully s action required
04/04/202 2. To check an administrator Enter correct details provided Logged in As expected Pas No further
4 account can login and click login. successfully s action required
successfully.
04/04/202 3. To check marketing manager Enter correct details provided Logged in As expected Pas No further
4 account can login and click login. successfully s action required
successfully.
04/04/202 4. To check a marketing Enter correct details provided Logged in As expected Pas No further
4 manager account can login and click login. successfully s action required
successfully.
04/04/202 5. Verify that a contribution Using a student account, log in
Logged in Donations Pas No further
4 cannot be added without first to the website and do not agree
successfully and an cannot be s action required
agreeing to the terms and to the terms and conditions, try
error message added without
condition to click on the add contribution
should be displayed, agreeing to
button. and the article the terms and
shouldn’t be added. conditions
04/04/202 6. Confirm student can upload a Using a student account, log in The website must Allows Pas No further
4 magazine article to the website and upload a allow students to uploading s action required
document for approval upload 1 or more multiple
articles as part of Actual
their contribution. Results
articles
04/04/202 7. Confirm students can upload Using a student account, log in The website must Allows Pas No further
4 images to the website and upload a allow students to uploading s action required
image for approval upload 1 or more multiple
images as part of images Actual
their contribution. results
The image upload
form should be clear
22
 after the first image
is uploaded.
04/04/202 8. To check if a student can Using a student account, log in When the delete Deleted Pas No further
4 delete a contribution they to the website then Select button has been successfully s action required
have made contributions from the clicked for the
“dashboard” and click delete selected
contribution, the
article should be no
longer accessible.
04/04/202 9. Marketing Coordinators can After successfully logging in, When the Accessed Pas No further
4 access contributions from coordinator accounts can coordinator selects successfully s action required
students within their manage faculty magazine the section to
Department. articles and comments. manage magazine
articles, the website
will display all
magazine articles
belonging to the
faculty. Helps
coordinators easily
manage.
04/04/202 10. All contributions are disabledWhen users are logged in they Before the deadline, Comment and Pas No further
4 after the closing date of new can leave comments and users can log in and update s action required
entries, but updates may update the magazine, however leave comments and successfully
continue to be made until the they cannot comment past the update the magazine.
last closing date. deadline.
04/04/202 11. students can upload high Student journals when they The images they Upload Pas No further
4 quality images create or update, have a section upload are free in successfully s action required
to upload images size and quality.
Without being
constrained by the
maximum capacity
of an image.
04/04/202 12. Once the contribution is After magazine articles are A notification email Sent email Pas No further
4 submitted, the system will uploaded, an email will be sent is sent to the successfully s action required
send an email notification to to the coordinator account coordinator as soon

23
 the Faculty Marketing notifying them of a magazine as a student posts a
Coordinator, who must article being uploaded. magazine. To
provide comments within 14 request coordinator
days. provide within 14
days.
04/04/202 13. Each Marketing Coordinator Coordinators can interact with Students see request Successful Pas No further
4 needs to be able to interact students, to request updates or interactions from the notification s action required
with students in his/her edits to the magazine. coordinator
Department to edit requesting updates
contributions and select those and corrections.
for publication.
04/04/202 14. The Director of University The Director of University When the director of Successful Pas No further
4 Marketing can view all Marketing can view all university marketing interaction s action required
selected contributions but selected contributions but wants to edit or
cannot edit any contributions. when they want to make edits update they will
or updates related to the interact with the
magazine. This can only be student who
done through the student who uploaded that
uploaded the magazine article. magazine article.
That student will
receive notifications
requesting updates
or corrections from
the director of
university marketing
04/04/202 15. The Director of University After the final closing date, the The university's Downloaded Pas No further
4 Marketing has the ability to university's marketing director marketing director successfully s action required
download all contributions can download all can download all
selected after the final closing contributions. contributions in zip
date as a ZIP file for transfer file format.
out of the system.
04/04/202 16. Administrators can change all After logging in to the admin Admin can change Successful Pas No further
4 system data including closing account. Users can change all (add, edit, delete) change s action required
dates for each school year. system data. closing dates for
each school year by

24
 selecting Manage
Closure Dates.
04/04/202 17. Each Faculty's guest account When logged in each Faculty's Each Faculty's guest Logged in Pas No further
4 can be used to view selected guest account can be used to account can be used successfully s action required
reports. view selected reports. to view selected
reports completely
freely in the
Dashboard.
04/04/202 18. The number of contributions The system will display the Magazine articles List and Pas No further
4 from each Faculty will be number of magazine articles are listed and display s action required
listed on the System contributed by each displayed on the success
department. system for everyone
to see.
04/04/202 19.
4
04/04/202 20.
4
04/04/202 21.
4
04/04/202 22.
4
04/04/202 23.
4
04/04/202 24.
4
04/04/202 25.
4
04/04/202 26.
4
04/04/202 27.
4
04/04/202 28.
4
04/04/202 29.
4
25
 04/04/202 30.
4

4.2 Scope
To ensure comprehensive testing of the final product and its implemented functionalities, we populated the database with more than 10
magazine contributions, each attributed to one of three users. Additionally, guest accounts were created to illustrate their capability to
access contributions submitted by members of their respective faculties – one guest account per faculty. Furthermore, specific roles were
assigned to the created users to assess their corresponding privileges. For instance, the administrator account was granted access to
statistical information on the dashboard, while a student account could access the submission form and review their past contributions. By
incorporating generated data, we not only facilitated testing of various functionalities but also facilitated the evaluation of system
performance as the datasets continue to expand.
4.2.1 Test Log
Student functionalities
Student functionalities
Feature Description
Uploading an article User can upload a file as a word document
Attach multiple images User should be able to upload images to their
article
View Contributions User should be able to check their current uploads
Login facility User must be able login into system
Logout facility User can logout of the system
Update a contribution User should be able to edit their uploaded
contributions.
Delete a contribution User can delete their contribution
Must agree to terms and conditions agreement Users would need to agree to terms and conditions before they can
submit a contribution
Reply to comments Users can reply to commenters with their posts

Marketing Coordinator
26
 Marketing Coordinator
Feature Description
See all the articles and contributions from their faculty. Users will be able to view their students' posts.
Provide feedback on an article Users can provide feedback on the journal's contributions to
students in their department

Marketing Manager
Marketing Manager
Feature Description
Ability to display the contribution of each faculty Users can view all submitted contributions, for all faculties
Flag errors when contributing Users have the ability to notify the marketing coordinator if an
error is detected in a contribution
Download all contributions Users can download all submitted contributions as a zip file
Statistics of submitted contributions Users have access to statistical data, describing total contributions
for each department
View approved contributions Users request the ability to review all contributions to each
department that have been approved by their instructor

Admin
Admin
Feature Description
User Management User must be able to modify existing user accounts as well create
new ones.
System Management User requires the ability to manage academic year dates, adding
new years as needed.

Guest
Guest
Feature Description
27
 Log in User would first need to authenticate.
Log out The sessions should be killed upon logging out.
View contributions for their respective faculty User should be able to view all contributions for the faculty.

General website features

General website features
Feature Description
Website responsiveness Website can adapt to a suitable layout on different screen sizes.

4.3 Sufficient Data to Fully Test

To ensure comprehensive testing of the final product and its implemented functionalities, we populated the database with more than
magazine contributions, Additionally, guest accounts were created to illustrate their capability to access contributions submitted by
members of their respective faculties – one guest account per faculty. Furthermore, specific roles were assigned to the created users to
assess their corresponding privileges. For instance, the administrator account was granted access to statistical information on the
dashboard, while a student account could access the submission form and review their past contributions. By incorporating generated data,
we not only facilitated testing of various functionalities but also facilitated the evaluation of system performance as the datasets continue to
expand.
Account used for testing on our website.
Roles Username Password
Marketing Manager Marketing-manager@email.com 123456
Marketing Coordinator – Art Marketing-coordinatorArt@email.com 123456
Marketing Coordinator - Science Marketing-coordinatorScience@email.com 123456
Marketing Coordinator – Music Marketing-coordinatorMusic@email.com 123456
Student – Art tanhm@email.com 123456
Student – Science linh@email.com 123456
Student – Music tinh@email.com 123456
Admin admin@email.com 123456

28
5 Agile Methods Followed
5.1 Development tools and workflow
During the development process, we have found that improving the efficiency of source code management, increasing the convenience of
team collaboration, version control and access rights, as well as tracking change history and Automated integration is very important. To
achieve this goal, we decided to use GitHub as an integral part of our development process.
Using GitHub has brought many significant benefits. First, it helps us easily track project development through managing source code
versions and tracking changes. Second, source code management becomes easier when each team member can contribute to the repository
flexibly, without having to meet face to face to exchange information about source code.
Additionally, using GitHub also helps us increase collaboration within the team by allowing members to work on the same source code and
review changes from different members. This helps create a positive and creative working environment, while enhancing the ability to
develop and improve project quality.
5.1.1 Web browser and DevTools:
In our project, the use of underlying technologies such as Web Browsers, JavaScript, CSS and HTML has played an important role in
developing websites and web applications. These are powerful technologies, allowing us to build diverse user interfaces and application
logic flexibly and efficiently.
However, the mere use of these technologies does not guarantee that the source code will be error-free. To ensure source code quality and
avoid potential errors, we used Visual Studio Code, a powerful and flexible source code editor.
Visual Studio Code not only offers a user-friendly and easy-to-use interface, but also comes with a host of useful features. In particular, the
built-in error checking feature in Visual Studio Code helped us quickly detect and fix errors in the source code. This feature not only helps
us detect syntax and logic errors, but also aids in finding and fixing application performance and security issues.
In addition, Visual Studio Code also supports integration with other support tools such as Git, Docker, and other additional extensions to
enhance development and project management capabilities. This helps us optimize the development process, increase team collaboration,
and ensure project quality.

29
Furthermore, the cross-platform nature of Visual Studio Code allows us to work on many different operating systems with ease. The ability
to integrate with different tools, along with the ability to extend and customize the user interface, provides a flexible and customized work
environment according to individual and project-specific needs.
In short, using Visual Studio Code has played an important role in our development process, helping to increase performance, quality, and
ensuring project stability.

5.2 Sprints
To guarantee that deadlines are reached within a predetermined time frame, the product owner and scrum master designed sprints. The development
team decided what was needed to be done during the two-week sprints in order to guarantee that an adequate workload was established and attainable.
The scrum master scheduled weekly meetings during each sprint to go over progress and come up with ideas for fixing any problems that arose. A
sprint review was conducted following the two-week period to evaluate the effectiveness of the team's collaboration and the sprint method itself.
After every sprint, the prototype was also shown to the other members of the team, which helped determine what might be accomplished in the
following sprint and how to go about doing it.

5.3 Burndown Charts

Utilizing burndown charts was crucial to our development cycle as it allowed us to collaborate in an atmosphere that was akin to agile development.
Throughout the sprint, our team's performance was visually represented via the burndown charts. Because every sprint had a two-week period, each
graph displays the rate at which the team completed the user stories. On the graph's X-axis, this is shown.
Every burndown chart starts with sprints that were made when our website was being implemented. As previously stated, a certain number of problems
are assigned to each sprint.
Every issue has a story point that is suitable and indicates its level of complexity. The complexity of the problem increases with the number. These
narrative points serve as great markers of which problems are the most challenging and which ones need greater focus. By doing this, the development
cycle is greatly aided, ensuring that problems are resolved within the allotted time, and it also helps the team meet deadlines with more efficiency. The
graph's Y-axis shows how many narrative points there were overall for the sprint.

30
5.4 Minutes of Meetings
5.5 User Stories
In my capacity as a marketing manager, I would need access to all chosen submissions in order to read the finalized magazine articles that each
marketing coordinator has submitted on behalf of their faculty.
31
After the final closing date, I, as the marketing manager, would want to obtain all of the chosen contributions in a ZIP file so that I can quickly access
the data and submit it for publication.
In my capacity as a marketing manager, I would want a statistical breakdown of all the faculty members' contributions to make sure they are all
contributing an adequate quantity to the magazine before the deadline.

In my capacity as a marketing manager, I would want a statistical breakdown of all the faculty members' contributions to make sure they are all
contributing an adequate quantity to the magazine before the deadline.
I would need access to all student submissions within my faculty as a Marketing Coordinator so that I may examine what has been submitted.
In my capacity as a marketing coordinator, I need to be able to remark on my students' efforts within 14 days so that they have time to revise and
update their work before the final deadline.
I should be able to amend or change my work as a student if my marketing coordinator gives me criticism, thus I should be allowed to post an article as
a Word document.
I should be allowed to contribute high-quality photographs as a student since they would help my piece stand out and appear more appropriate for a
university publication.
In order for me to contribute as a student, I must be able to accept the terms and conditions of the university.
In order to maintain the system's contents current, as an administrator, I want to manage user accounts and significant dates for the academic year.
Because it gives me a summary of how people engage with the website, being able to examine reports that provide statistics on which pages are most
popular, which users are most active, and which browsers are being used is crucial for me as an administrator.
I would want to see all statistics data and chosen reports for my faculty as a guest in order to see what the students have contributed to the university
magazine.
Regardless of my employment, I want the assurance that my account is as safe as feasible as a user.

6 Screencast and Presentation

6.1 Presentation
We displayed our presentation at a high caliber. It's more stunning than the features offered by PowerPoint since slides transition between them
quickly and fluidly (Sutton, 2014). Moving forward, there will be a major emphasis on fluidity and visually striking presentations that are appropriate
for the contemporary digital era.
The presentation provided a comprehensive understanding of our product, with each team member carefully outlining a distinct feature of our website.
Pitching at a non-technical level, the presentation revolved around a few main points.
Areas included:
Scrum Master (Van Nguyen Duy Linh)

32
Technical leader (Van Nguyen Duy Linh)
Database designer (Phan Chi Tinh)
Developer (Van Nguyen Duy Linh/ Phan Chi Tinh/ Hoang Minh Tan)
Tester (Hoang Minh Tan/ Van Nguyen Duy Linh)
Website Design (Phan Chi Tinh/ Hoang Minh Tan)

6.2 Screencast
The above screencast offers a thorough audio description of the features that our team was able to accomplish. The presentation flow was deliberately
designed to align with the site map in order to provide optimal usability and accessibility protocols.
The scrum master, who has been closely monitoring the product's development since its inception, produced this screencast. As part of the project
development cycle, the scrum master was also responsible for earlier screencasts.

Screencast Link:

7 Conclusion
The team used agile methodologies and technologies to assure the lean delivery of the product while working like an enterprise software development
team. By doing this, the team produces an enterprise-ready application that surpasses initial stakeholder criteria in terms of security, robustness, and
scalability in addition to meeting them. In conclusion, the team has created a safe, maintainable, effective, portable, scalable magazine management
system that meets the needs of all stakeholders based on the previously described parameters.

33
References
Norman, D., 2015. The design of everyday things. s.l.:s.n.

34