Web Framework

Jozef Goetz,
University of La Verne, USA

Antonio Flores Marquez

University of La Verne, USA

www.ijonest.net

To cite this article:

Goetz, J. & Marquez, A.F. (2023). Web framework. International Journal on Engineering,
Science, and Technology (IJonEST), 5(4), 353-375. https://doi.org/10.46328/ijonest.190

International Journal on Engineering, Science and Technology (IJonEST) is a peer-reviewed scholarly

online journal. This article may be used for research, teaching, and private study purposes. Authors alone
are responsible for the contents of their articles. The journal owns the copyright of the articles. The publisher
shall not be liable for any loss, actions, claims, proceedings, demand, or costs or damages whatsoever or
howsoever caused arising directly or indirectly in connection with or arising out of the use of the research
material. All authors are requested to disclose any actual or potential conflict of interest including any
financial, personal or other relationships with other people or organizations regarding the submitted work.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
 International Journal on Engineering, Science, and Technology
2023, Vol. 5, No. 4, 353-375 https://doi.org/10.46328/ijonest.190

Web Framework

Jozef Goetz, Antonio Flores Marquez

Article Info Abstract

Article History The purpose of this paper is to demonstrate how to extend a web framework (WF)
Received: for developing web apps that can meet the diverse needs of different fields. This
08 March 2023
work aims to provide computer science senior project students with an opportunity
Accepted:
02 June 2023
to work on a wide range of projects using Apache, HTML, CSS, JavaScript, PHP,
and MySQL. The paper presents a WF that manages jokes, based on the book PHP
& MySQL: Novice to Ninja (6th ed.) by T. Butler and K. Yank. The WF is
interactive, responsive, secure, password-protected and database-driven. It
Keywords consists of generic and specific components that use a MySQL database on the
Education
web server-side to store jokes. The specific components can be modified or added
Engineering
App
to create custom apps. Admin users can log in with their email and password and
PHP perform various actions (view, add, delete and edit) on jokes and categories,
MySQL depending on their level of permission. Admins with full permissions can also edit
Admin
the permissions of other registered accounts and access the Manage Categories,
Manage Jokes, and Manage Authors pages. The original WF is enhanced and
expanded for the senior project starting point by adding the following features: a
hierarchical main menu with admin menus as the second level, a highlighted
selected menu item, responsive design - accessibility on all devices, improved
password security (minimum of 8 characters, 1 lowercase letter, 1 uppercase letter,
1 digit, 1 special character), a two-factor authentication security subsystem,
cascaded deletion and uploaded and retrieved binary files (images and
documents). In conclusion, the project is designed and implemented following the
best practices and tested on a web hosting server provider.

Introduction

Let’s introduce the key web-related terms:

A framework [Code Academy (2023)] is a structure that one can build software on. It serves as a foundation, so
one is not starting entirely from scratch. Frameworks are typically associated with a specific programming
language and are suited to different types of tasks.
A Web Framework or Web Application Framework [Web Framework – Wikipedia (2023)] is a software
framework that is designed to support the development of web applications including web services, web
resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications on
the World Wide Web.

353
Goetz & Marquez

There are two groups of web application frameworks: one helps to set up app logic on the server, the other – on
the client [Yaskevich A. (2017).] There are client-side frameworks, such as: Bootstrap, React.js, Angular.js,
Backbone.js, Semantic-UI. Among the most popular based server-side web frameworks are: Symfony (PHP),
Django (Python), Express (Node.js/JavaScript), Ruby on Rails (Ruby), ASP.NET (C#). By using either of these
server-side web application frameworks, it handles HTTP requests, database control and management, as well as
URL mapping and render view data with a server. Web frameworks above don’t have fully open documentation
on how to develop a step-by-step framework for competition reasons. In the paper below, it is shown how 16
features are added to the existing framework. The existing framework has step-by-step development
documentation and code [Butler, T., & Yank, K. (2017)].

The main goal of the senior project course (CMPS 499) in many universities is to provide a capstone experience
in which the student combines knowledge, skills, and topics that the student already learned with some new
learned topics during the course. In addition, students need to have a senior project presentation and write a final
project report. All computer science undergraduates are required to take a capstone course senior project at La
Verne University and many other universities [Computer Science Curricula (2013)].

Moreover, the senior project course (CMPS 499) at the University of La Verne satisfies the following Program
Criteria for Computer Science student outcomes [Accreditation Board for Engineering and Technology – ABET
(2022-2023)] as follows:
 Ability to analyze a complex computing problem and to apply principles of computing and other relevant
disciplines to identify solutions.
 Ability to design, implement, and evaluate a computing-based solution to meet a given set of computing
requirements in the context of the program’s discipline.
 Ability to communicate effectively in a variety of professional contexts.
 Ability to apply computer science theory and software development fundamentals to produce computing-
based solutions.

Before starting work on a senior project, in another class (CMPS 320 - Internet Apps Development), students
learn how to construct dynamic, data-driven web applications, and secure, customized content management
systems using PHP and MySQL. Students develop skills in many aspects of the software development and
deployment process. Students develop basic and intermediate skills in structured Query Language (SQL),
MySQL, development using PHP, form processing, and regular expressions. The main focus is to apply principles
and techniques needed to build a professional web application using PHP & MySQL. This is achieved by gradually
introducing the design and implementation of a Web Framework (WF) [Butler, T., & Yank, K. (2017)]. The WF
keeps track of entered jokes. This approach allows for a practical understanding of these technologies in the
context of a real-world application. Keeping track of different entities is indeed an important problem and can be
very useful for monitoring events. The goal of the paper is to showcase many new additions and features to the
framework that were successfully added or modified to achieve a well-structured, more secure, and elegant
Expanded Web Framework (EWF). This EWF has the capability to upload, update, and delete images associated
with keeping track of jokes. By doing so, students will have a broader spectrum of possibilities to expand the WF

354
 International Journal on Engineering, Science, and Technology (IJonEST)

to meet their individual project needs and satisfy the requirements of their senior project.

The project [Miranda-Hill, W., Goetz, J. (2019, June 30 – July 4)] aims to prototype the functionality of a user-
generated geospatial meteorology map (for keeping track of temperature and pressure) based on a low code
interactive framework [Butler, T., & Yank, K. (2017)].

The Patient Care Reporting App [Guarrera, A., Goetz, J. (2022, May 10)] is also based on the same interactive
framework [Butler, T., & Yank, K. (2017)].

An additional project [Grime, C., Goetz, J. (2023)] based on the same framework is the Course and Faculty
Management System (CFMS) which allows educational organizations to efficiently organize and manage their
courses and faculty. The basic goal of CFMS was to keep track of courses and faculty by managing (i.e.,
viewing, adding, editing, deleting) Courses, Instructors, Subjects, Departments, Timeslot, Course Attributes
with given constraints for each entity.

Another project [Flores Marquez, A., Goetz, J. (2023)] based on the same framework is the Certificate
Management Application. Its goal was to develop a web application that keeps track of recipients of computer
science certificates by managing (viewing, adding, editing, deleting) Certificates, Recipients, Courses,
Categories, and setting the users permissions.

Problem Statement

The purpose of the paper is to show how to expand WF [Kevin Yank, Tom Butler 2017] in order to develop a
web app for the broad needs of different fields. The framework hosts many users, which can have access from
different clients at the same time.

The web application includes administration capabilities, which allow administrators to set permissions for users
and edit, delete, and insert jokes and categories. The website consists of multiple web pages that limit accessibility
depending on the permissions set for the user by the administrator. Super administrators with all permissions have
access to all pages including, Manage Jokes, Manage Categories, and Manage Authors.

The original Web Framework [Butler, T., & Yank, K. (2017)] has been expanded with the following features that
were not present in the original one:
1. Responsive design to allow the app to be accessible on all devices.
2. An extended password security (minimum of 8 characters, 1 lowercase letter, 1 uppercase letter, 1
digit, and 1 special character).
3. Forget or change a password feature.
4. Limitation on how many times a wrong password can be entered.
5. A two level of authentication security subsystem with a temporary password (token) sent to the user’s
email address.

355
Goetz & Marquez

6. Display of the current user name next to the main menu item “Log out” after a successful log-in.
7. Ability of logged-in users to upload, update and delete photos from the Web Framework and to keep
track of them. Ability to upload, update and delete binary files from the database.
8. Integration of the Add Joke and List Joke menus into a new menu item Manage Joke.
9. Integration of the Add Category and List Category menus into a new menu item Manage Joke.
10. Hierarchical main menu with admin menus as the second level.
11. Text-based navigation.
12. Dynamic posting of a copyright symbol with a year.
13. Highlighting of the selected main menu item.
14. Highlighting of the selected category name.
15. Issuing of a confirmation message when any record is deleted.
16. Options to display the latest records at the end or to display them in alphabetical order for all category
orders for Manage Joke and Manage Category menus.

The goal of this project is to add to the web application features discussed above and keep track of jokes by
managing (i.e., viewing, adding, editing, deleting) jokes, managing (i.e., viewing, adding, editing, deleting)
categories and setting the author’s permissions. As a result, Expanded Web Framework (EWF) was created.

System Design

Design Overview

Expanded Web Framework (EWF) is a full-stack web-based application consisting of three main components.
The three components are the user interface, the server, and the database. The technology stack currently used by
the EWF is HTML, CSS, JavaScript, PHP, and MySQL.

Figure 1. Framework Logical Layers (FLL)

The framework logical layer (LCF) architecture consists of three functional layers (see Figure 1):
 User Interface (UI) Presentation Layer,
 Business Logical Layer (BLL), and
 Data Access Layer (DAL).

356
 International Journal on Engineering, Science, and Technology (IJonEST)

The front-end user interface (UI) layer of this application is designed to display web pages on the client side.
These pages are rendered using HTML, CSS, and JavaScript [Deitel, P. J., Deitel, H. M., & Deitel, A. (2012)],
which are generated on the server side. The UI provides users with the ability to view, add, update, and delete
data related to jokes and their associated categories.

The components of the web application interface are dynamically generated using the template engine provided
by the PHP framework. This application also incorporates a permission-based access system, which is utilized to
generate and display only the user interface elements that are relevant to the active user [Grime, C., Goetz, J.
(2023)].

The back-end server components (BLL and DAL) of the application are written in PHP, and the server application
is built on a PHP framework. This framework offers methods for connecting to a MySQL database and executing
queries on the connected database. The server application not only performs calculations on data but also adds,
deletes, or modifies data in the database. The system is designed to prevent SQL injection by malicious users,
thereby preventing the execution of undesired code in the web application. The PHP framework includes a routing
system that enables the server to handle GET, POST, and PUT requests. Owing to its robustness and flexibility,
this framework can be used to build a wide variety of web applications [Grime, C., Goetz, J. (2023)].

The final component is a MySQL Server, which serves as the application’s Relational Database Management
System (RDBMS). However, it’s considered a third-party application and not a logical layer [Azma, H., Goetz, J.
2007]. The RDBMS is used to store data, and the web application’s back-end connects to and interacts with it
using SQL queries. The foundation for this functionality is provided by the framework and is expanded upon in
the Expanded Joke Management System (EJMS), which is equivalent to EWF. The original framework is referred
to as the Internet Joke Database (IJD).

User Interface Layer

The graphical user interface (GUI) is designed to allow interaction with graphical controls through direct
manipulation, enabling users to view, add, delete, or edit information about the Expanded Joke Management
System. These interfaces allow users to interact with the system and manage various aspects of the content.
The website adheres to the [Web Design Best Practices Checklist (2023)].

Sitemap

Figure 2 illustrates the hierarchy of the website. The first level represents the web pages accessible to users who
are not logged in, while the second level represents the pages accessible to logged-in users. However, access to
some features is restricted based on the user’s privileges; for instance, only admins can access the ‘Manage Jokes’,
‘Categories’, and 'Authors’ pages.

357
Goetz & Marquez

Figure 2. Website map

The Internet Joke Database (IJD) and the Expanded Joke Management System (EJMS) consist of two main
components: the public and admin components. Figure 3 displays the public functionality and menu for both IJD
and EJMS. The Expanded Joke Management System (EJMS) can be accessed via the website [Goetz, J. (2023)].
The public user interface of IJD and EJMS includes the following sections: header, menu, aside, main content
area, and footer. Notably, in EJMS, a logo with the description ‘Joke Management System’ has been added, the
selected menu item is highlighted with a green background, text-based navigation has been introduced, and a
copyright symbol with the current year is dynamically displayed.

Figure 3. IJD and EJMS - Public component of the Home page

All public entities, such as the Jokes List, are available for viewing only and do not include interactive buttons
such as ‘add’, ‘edit’, or ‘delete’ (refer to Figure 4).

358
 International Journal on Engineering, Science, and Technology (IJonEST)

Figure 4. IJD and EJMS - The public component of the Joke List page

Figure 5. The public component of the Joke List, Add Joke, Category List, Add Category, Author List page for
IJD and Manage Joke, Manage Category and Manage Author for EJMS

Figure 5 illustrates the public components of the Joke List, Add Joke, Category List, Add Category, and Author
List pages for IJD. It also shows the equivalent Manage Joke, Manage Category, and Manage Author pages for
EJMS. If a user who is not logged in attempts to click on any of these menus, they will be informed with a message
stating “You are not logged in”. This ensures that only authorized users can access certain features of the system.

359
Goetz & Marquez

The password for EJMS requires a minimum of 8 characters, including at least 1 lowercase letter, 1 uppercase
letter, 1 digit, and 1 special character (as shown in Figures 6 and 7). Additionally, there is a “Forget or change a
password” button as depicted in Figure 8. These features enhance the security of the system.

Figure 6. IJD and EJMS - The public component of the Register page

Figure 7. EJMS - The public component of the Register page with errors checking

Notice that an error message is displayed for EJMS if the login or password are incorrect (see Figure 9). The user
can try to enter the correct values up to three times. After three unsuccessful attempts, the Login button is disabled

360
 International Journal on Engineering, Science, and Technology (IJonEST)

and the user receives a message to wait 30 seconds before trying again. If the user enters the correct login and
password values, a new page will be displayed. The web page will ask the user to enter the OTP (One-Time
Password) that was sent to the user’s email. The user can also request to resend the OTP if needed (see Figure
10). If the user enters the correct OTP from the email message, a page with the message “Login Successful” and
“You are now logged in” will be displayed. Moreover, the main menu item will change from “Log in” to “Log
out” and the user’s name will appear next to it.

Figure 8. IJD and EJMS - The public component of the Login page

Figure 9. EJMS: The public component of the Login page with error messages

361
Goetz & Marquez

Figure 10. EJMS - After 30 seconds the user enters the correct login/password in the Login page

The user can also choose to reset their password by pressing the “Forget or change a password” button shown in
Figure 8 – 10. If the user does this, they will be asked to enter their email and press the “Send Reset Pin” button.
They will receive a confirmation message saying “An email with Pin has been sent and may take a moment to
receive it.” and “Click here to enter pin and new password” (see Figure 11). Figure 12 shows the Login page with
a Pin field. The first screenshot shows the error messages that appear if the user enters an incorrect pin or password.
The second screenshot shows the successful entry.

Figure 11. EJMS - The public component of the Login page when the user enters the correct login/password
after 30 seconds

362
 International Journal on Engineering, Science, and Technology (IJonEST)

Figure 12. EJMS - Login page with a Pin field. The first screenshot shows error messages and the second one
after a successful entry

When the user logs in for the first time, they have the lowest admin permission and can only access the Joke List
(for IJD) page and the Manage Joke (for EJMS) page without the Edit and Delete buttons. To get full access to
all the features, a super admin needs to change the permission for the first-time user using the Author List (for
IJD) and Manage Author (for EJMS) pages. Figures 13 - 14 show how the user interface looks like when the user
has all the privileges for jokes and categories. The Joke List or Manage Joke pages also have pagination at the
bottom to improve performance by reducing the amount of data displayed on a single screen (see Figure 13).

Figure 13. IJD and EJMS - Joke List and Manage Jokes pages correspondingly after the user is authenticated

363
Goetz & Marquez

Note that the user can choose the order of the categories for the Manage Joke and Category pages in EJMS. The
user can either display the newest records at the end or sort them alphabetically (see Figures 13 – 14, feature 16).

Figure 14. IJD and EJMS - Category List and Manage Category pages correspondingly after the user is
authenticated

The Add Joke and Add Category menu items for IJD are replaced by the Add button on the top of each page for
EJMS. The user can use this button to add a new joke or category from the Manage Joke and Manage Category
pages (see Figures 13 – 14, Features 8 - 9). The Add Joke and Edit Joke pages are the same for both IJD and EJMS
(see Figure 15). Similarly, the Add Category and Edit Category pages are the same for both IJD and EJMS (see
Figure 16).

Figure 15. Add Joke and Edit Joke pages are the same for IJD and EJMS

A new feature 7 has been introduced regarding binary files. Logged-in users can upload, update, and delete images.
Figure 17 shows that Blockchain Jokes are selected by highlighting the menu item, and all images have the option

364
 International Journal on Engineering, Science, and Technology (IJonEST)

to Browse, Update Image, and Delete buttons.

Figure 16. Add Category and Edit Category pages are the same for IJD and EJMS

Figure 17. Logged in users can upload, update and delete an image

365
Goetz & Marquez

Users have the ability to upload an image along with their Manage Joke pages. If the joke already has an image,
a Delete button is displayed to allow the user to delete the image. Also, the Browse and Upload image buttons
continue to be displayed to allow the user to replace the image file. The image file will not be uploaded to the
database if it is larger than 16000 KB or if the image file is not a .jpeg, .jpg, or .png. Users are only able to upload
an image file if the joke belongs to them and if they have admin permissions to edit other users’ jokes.

The admin users who have access to Author List (for IJD) or Manage Author (for EJMS) can edit permissions for
themselves or others (refer to Figure 18).

Figure 18. Manage User page. The second one is available to grant permission after clicking the Edit button

Business Logical Layer

The Business Logical Layer (BLL) consists of PHP generic and project-specific classes where data is processed.
A specific PHP connection class facilitates communication with the Data Access Layer (DAL). The BLL hides
the SQL statement calls from the UI Layer (see Figure 1). The low-code framework provides methods in PHP
generic classes to get and send SQL commands to the database. The application also uses GET, POST, and PUT
requests via a PHP routing system to access numerous elements.

A user that is logged into the website can have multiple permissions given to them. The permissions system allows
the admin of the site to grant only the necessary permissions to the users (see Figure 18). The following are
permissions that are currently available to be assigned to any user.
 Edit Jokes – Allows users to edit recipients’ information.

366
 International Journal on Engineering, Science, and Technology (IJonEST)

 Delete Jokes – Allows users to delete recipients from the database.

 Add Categories – Allows users to add categories.
 Edit Categories – Allow users to edit categories.
 Remove Categories – Allow users to remove categories.
 Edit Author Permissions – Allows authors to edit other author permissions.

Data Access Layer and Database

The low-code framework (LCF) uses MySQL as a relational database management system (RDBMS). The
database is normalized to improve performance and disk space utilization. The UI objects use the Business Logical
Layer (BLL) to communicate with the Data Access Layer (DAL). The DAL connects to the RDBMS and requests
the content that belongs on the web page. The RDBMS responds by sending the requested content to the DAL.
The DAL stores the content into one or more PHP variables of Business Logical Layer (BLL). The UI layer
outputs the content in the browser as part of the web page using HTML and CSS code.

The database consists of tables with primary and foreign keys. The business logic is determined by the primary
and foreign keys of the tables and the admin permission. Adding, editing, and deleting table records are limited
by the business logic. The database structure is designed around the joke and author model. The Application Data
Table (see Table 1) stores user-specific information about categories, jokes, and authors. Additionally, two tables,
password_reset_temp and verification_codes, store information regarding a new feature 5 - a two-level
authentication security subsystem with a temporary password (token) sent to the user’s email address. The last
column of Table 1 shows admin menu items in relation to the database table names in the first column.

Table 1. Application Data Tables

(Primary Keys are in bold, Foreign Keys are in italics)
Internet Joke Internet Expanded Expanded Joke Description Related
Database Joke Joke Management Manage
(IJD ) tables Database Management System (EJMS) Menu Item
(IJD) table System table columns
columns (EJMS) tables
category id, name category id, name Store Manage
category Category
names.
joke_category jokeId, categoryId joke_category jokeId, categoryId Links
jokes with
categories
joke id, joketext, joke id, joketext, Stores Manage Jokes
jokedate, jokedate, information
authorId authorId, of jokes.
filename,

367
Goetz & Marquez

Internet Joke Internet Expanded Expanded Joke Description Related

Database Joke Joke Management Manage
(IJD ) tables Database Management System (EJMS) Menu Item
(IJD) table System table columns
columns (EJMS) tables
mimetype,
filedata
password_res id, email, pin, Stores
et_temp expDate, information
authorId of password
reset
requests.
verification_c id, authorId, pin, Stores
odes expDate information
of
verification
codes.
author id, name, email, author id, name, email, Stores Manage
password, password, information of Authors
permission permission authors.

The database schema diagram in Figure 19 shows the relationship between tables based on primary and foreign
keys. The endpoints of each edge in the diagram represent the primary and foreign keys of the tables. The foreign
key is represented by a bullet point.

Figure 19. Visual Database Table Relationship

368
 International Journal on Engineering, Science, and Technology (IJonEST)

The database schema diagram in Figure 20 shows the implementation of a joke table in phpMyAdmin with many
records of jokes.

Figure 20. Expanded Joke Management database table with data examples

Implementation

Figure 21 shows the relationship between project files and the website map. New files added to the Expanded
Joke Management System are in bold, and modified files are in italic.

369
Goetz & Marquez

Figure 21. Website map with corresponding file names

Test and Results

Testing the website is a crucial step in the project. For instance, testing the login subsystem (refer to Figures 8-
12) or register subsystem (refer to Figure 7) would be an example of a test case. The register subsystem expects
four inputs: a name, an email address in the correct format, and password. The software must check whether the
email, name, and password are in the correct format.

Password security requires that a password should have a minimum of 8 characters, 1 lowercase letter, 1 uppercase
letter, 1 digit, and 1 special character. If any of these checks are not true, the software doesn’t allow the user to
register and doesn’t let incomplete data be sent to the database. An example use case for the login or register
system is that the user can visit the register or login page and fill out the form to register or log in to the app. If
the entered data is correct i.e., satisfies the requirements, then the data is sent to the database and the user can log
in.

Testing for the website is performed on all web pages. Responsive design principles (feature 1) are implemented
for mobile phones, tablets, and desktops (see Table 2, the last three columns). The example of a verification matrix
for the Manage Joke of Expanded Joke Management System is shown in Table 2.

All links are tested, and they work. Test cases for possible inputs are performed for any input fields on the
site. HTML, CSS [Felke-Morris, T. (2021), and PHP [Butler, T., & Yank, K. (2017)] errors are tested using
validation services [W3C Markup Validation Service (2023), W3C CSS Validation Service (2023), PHP Code
Checker (2023)]. Testing ensures that no improper data is entered into the database.

370
 International Journal on Engineering, Science, and Technology (IJonEST)

Table 2. Test plan and results - Verification Matrix for the Manage Joke of Expanded Joke Management System
1. Page 2. Test item- list 3. Validation 4. Outcome in 5. Outcome in 6. Outcome
name - hyperlinks, fields, each web Mobile Phone. tablet. in desktop.
list all pages buttons, videos, images, page using Resolution Resolution Resolution
in the menu GUI controls, web http://validat 320x480 1024x768 1440*900.
order pages. or.w3.org
and
Schema: click action => http://jigsaw.
reaction w3.org/css-
Legend: => means land validator/ - if
in applicable;
joke.html.php Home=>home.html.ph Correct - Good display in - Good display - Good display
p; using chrome. in chrome. in chrome.
Jokes List => http://validat
joke.html.php; or.w3.org:
Register => Register
an account;
Log in => log in user; Validate
PHP code
LOGGED IN: using: Test Edit Button: Test Filter:
Manage Author => http://phpco
authorlist.html.php; dechecker.c
Manage Joke => om/: Test Delete
managejoke.html.php;
Button:
Manage Categories => Test
categories.html.php; Upload/Update
Log out => log out button:
Test Choose file
user;
button:
Edit Button =>
editrecipient.html.php;
Delete Button =>
delete function;
Upload Button =>
Upload Image;
Choose File =>
Allows user to choose
file.
managejoke.h Home=>home.html.ph Correct - Good display in - Good display - Good display
tml.php p; using chrome. in chrome. in chrome.
Jokes List => http://validat

371
Goetz & Marquez

joke.html.php; or.w3.org:
Register => Register
an account;
Log in => log in user; Validate
PHP code
LOGGED IN: using: Test Edit Button: Test Add User is not
Manage Author => http://phpco Button: logged in:
authorlist.html.php; dechecker.c
Manage Joke => om/: Test Delete
managejoke.html.php;
Button: Test Filter:
Manage Categories => User does not
categories.html.php; have access:
Log out => log user,
Add Button =>
Test Choose file
editrecipient.html.php; Test
button:
Edit Button => Upload/Update
editrecipient.html.php; button:
Delete Button =>
delete function;
Upload Button =>
Upload Image;
Choose File => Allows
user to choose file.

Discussion

This project has been a great exercise to show how expandable the low code interactive framework is. The
organization and hosting of a website that is capable of reading and writing user inputs from a database is a feature
that many modern-day websites have. Many new additions (see features 1 – 16) to the various PHP, CSS, and
HTML files were needed to achieve full functionality of the Expanded Joke Management System (EJMS). One
of the additions is creating Manage Jokes, Manage Categories, and Manage Authors (features 8 – 9). Another
addition is implementing a secondary level of navigation that only displays if the user is logged in (feature 10).
Another example of an addition is introducing extended password security (minimum of 8 characters, 1 lowercase
letter, 1 uppercase letter, 1 digit, 1 special character). A new addition feature is introduced regarding binary files
(feature 7). Logged-in users can upload, update, and delete images associated with a joke text. Software like
Notepad++ [Notepad++ (2023)], Visual Studio Code [Visual Studio Code (2023)] and phpMyAdmin which is
bundled with XAMPP [XAMPP (2023)] were use as the core software when constructing the web application.
The results of the project show that a web application for keeping track of jokes, categories and authors is
necessary to make the process of tracking and sharing information more efficient than using an Excel spreadsheet.

372
 International Journal on Engineering, Science, and Technology (IJonEST)

Limitations and Future Expansion

Expanded Joke Management System (EJMS) is still limited in features. The current version allows privileged
users to perform create, read, write, and delete operations on the connected MySQL database. One limitation in
the current version of the website is that changes in permissions are not notified to users whose permissions have
been changed. Another limitation is the absence of statistics about the frequency of posted jokes per day, month,
and year for all categories and the number of each joke in each category, as well as the average, standard deviation,
and variance for entities above.

To solve these limitations, there will have to be a future expansion to the current version of Expanded Joke
Management System (EJMS). A future extension will include missing statistics above and introducing web
analytical metrics. One future enhancement will be introducing a filter system where users can enter the names of
authors to filter results. Another search functionality for entities such as jokes should be implemented for any
attributes that entity may have. The database should also be expanded to build a notification system around the
authors.

Conclusion

The goal of this work is achieved within the computer science senior project by studying, learning, and expanding
the interactive, secure framework for the purpose of designing, implementing, and testing Joke Management
System. The main goal of the senior project course (CMPS 499) is to provide a capstone experience in which the
student combines knowledge, skills, and topics that the student has already learned with some new topics learned
during the course. In addition, students need to have a senior project presentation and write a final project
report. All computer science undergraduates are required to take a capstone course senior project at La Verne
University and many other universities [Computer Science Curricula (2013)].

Many new additions (see features 1-16) to the various PHP and HTML framework files were successfully added
or modified to achieve the well-structured, full functionality of the Expanded Joke Management System (EJMS).
The design, implementation, and testing of EJMS with a wide spectrum of general and specific functionalities
provide an excellent template for a senior project. Moreover, EJMS is an interactive, responsive, secured
password-protected, well-structured, database-driven application. A framework is a set of generic classes that
provide flexibility, reusability, scalability, and extensibility.

The current version of EJMS provides an excellent base for further expansion of the general and specific
functionality of the framework for any senior project specification that requires keeping track of entities. The web
application provides the ability to create, read, update, and delete entries in the connected database built using
PhpMyAdmin. The connected database itself and the admin component of EJMS provide a strong foundation for
expanding specific functionality of the website for any field.

373
Goetz & Marquez

References

Accreditation Board for Engineering and Technology – ABET (2022-2023). Program Criteria for Computer
Science, https://www.abet.org/wp-content/uploads/2022/03/2022-23-CAC-Criteria.pdf.
Azma, H., Goetz, J. (2007). WEBCRM Application Generator, Proceedings of the 2007 International Conference
on Internet Computing, World Congress in Computer Science, Computer Engineering, and Applied
Computing (WORLDCOMP'07), Las Vegas, USA, ISBN: 1-60132-044-2, pp 29-35.
Butler, T., & Yank, K. (2017). Php & MySQL: Novice to Ninja (6th ed.). SitePoint Pty, Ltd.
Code Academy (2023). https://www.codecademy.com/resources/blog/what-is-a-framework.
Computer Science Curricula (2013), https://ieeecs-media.computer.org/assets/pdf/CS2013-final-report.pdf,
Curriculum Guidelines for Undergraduate Degree Programs in Computer Science December 20, 2013,
The Joint Task Force on Computing Curricula Association for Computing Machinery (ACM) IEEE
Computer Society.
Deitel, P. J., Deitel, H. M., & Deitel, A. (2012). Internet & World Wide Web: How to program (5th ed.). Pearson.
Flores Marquez A. & Goetz, J. (2023). Certificate Management Application. International Journal on
Engineering, Science, and Technology (IJonEST), 5(3), 191-211. Journal:
https://www.ijonest.net/index.php/ijonest/article/view/165.
Felke-Morris, T. (2021). Web Development & Design Foundations with HTML 5 (10th ed.). Pearson.
Grime, C. & Goetz, J. (2023). Course and Faculty Management System. International Journal on Engineering,
Science, and Technology (IJonEST), 5(2), 138-160. Journal:
https://www.ijonest.net/index.php/ijonest/issue/view/19.
Goetz, J. (2023). http://jgspectrum.com/ch14+16_features-paper-Framework_T1-T5/.
Guarrera, A., Goetz, J. (2022, May 10). Patient Care Reporting App,
https://libapps.s3.amazonaws.com/customers/897/images/Case_Day_2022_v2.png, La Verne’s
Research Case Day, May 10, 2022.
Miranda-Hill, W., Goetz, J. (2019, June 30 – July 4). User-generated Geospatial Meteorology Map Prototype,
Proceedings of the Informing Science + Information Technology Education Conference (InSITE),
Jerusalem, Israel, pp 257 – 269.
Notepad++ (2023). https://notepad-plus-plus.org/.
PHP Code Checker (2023). https://phpcodechecker.com/.
Visual Studio Code (2023). https://code.visualstudio.com/.
W3C Markup Validation Service (2023). https://validator.w3.org/.
W3C CSS Validation Service (2023). https://jigsaw.w3.org/css-validator/.
Web Design Best Practices Checklist (2023). http://terrymorris.net/bestpractices.
Web Framework – Wikipedia (2023). https://en.wikipedia.org/wiki/Web_Framework.
XAMPP (2023). https://www.apachefriends.org/download.html.
Yaskevich A. (2017). Web Application Framework: Detailed Overview, ScienceSoft.
https://www.scnsoft.com/blog/web-application-framework.

374
 International Journal on Engineering, Science, and Technology (IJonEST)

Author Information
Jozef Goetz Antonio Flores Marquez
https://orcid.org/0009-0004-7751-3653 https://orcid.org/0009-0000-1615-1266
University of La Verne University of La Verne
1950 Third Street, La Verne, CA 91750 1950 Third Street, La Verne, CA 91750
USA USA
Contact e-mail: [email protected]

375