5. Page 5
Chua Quang Ming
Contents
PROJECT
Project: Chua Quang Minh
Education: Web development
Academy: Business Academy Southwest
Superviser: Søren Spangsberg Jørgensen
Hand-in: April 11 2023
Student: Suong Cam Vo
Project periode 2.5 month
Number of pages: 27
Number of characters: 65382
Website: https://chua-quang-minh.dk/
GitHub: https://github.com/suon0001/Chua-Quang-Minh
Adminstrator email: test1@test.com
Adminstrator password: test1
6. Chua Quang Minh
Page 6
Introduction
Introduction
The purpose of this report is to provide help and documentation for the variables, actions, and
decisions associated with the creation of a web application. The report will walk the reader
through the whole development process. The report’s emphasis on online development in-
volves the use of technical terms, methodology, and terminology.
The study also focuses on the creation of online applications and includes documentation for
the whole process, including planning and research, design and prototype, web development,
and implementation.
PROBLEM DESCRIPTION
How can I make it simple and easy to navigate for the association members to use, which
would help them spread their messages and news for their own benefit?
GOALS
• Obtain further information from the client about the web application’s requirements and
specifics.
• Check that it scales to any device and browser.
• Be certain that it can be regularly updated in the long term.
• Deploy for a live server
The Vietnamese Cultural Association is facing a problem with their announcements and up-
dates to inform the members of upcoming events, news, and activities.
After speaking with the members of the association, we have concluded that the association
needs a website that will act as a channel for news feeds and updates.
PROBLEM DEFINITION
7. Page 7
Chua Quang Ming
Introduction
SCOPE
Since it will be impossible for me to develop a fully functional web application in the time-
frame I have been provided, I must put the client’s needs before anything else.
The report would include all of the research materials and methodologies required for the
application. During the prototype phase, usability testing was performed, and more tests were
performed during the development phase.
DEVELOPMENT TEAM
One drawback of working alone is the added stress that comes with assuming responsibility
for the full project development life cycle. I’m the only one who can solve an issue if I get stuck
on it. When I think about all I have left to finish, especially the things I’m not very interested in,
it may sometimes seem overwhelming.
Working as a team is beneficial for gaining early and continuous design input. The sooner I
can get input, the less likely I am to waste time creating incorrectly the sooner I can get in-
puts. Working as a team also motivates one another to do tasks quickly and effectively.
Working alone tends to slow down the progress of a project since I have to do everything by
myself; however, working as a team helps by splitting the effort and speeding up develop-
ment. As a result, I must dedicate more time to the project each day than a team would. By
doing so, I ensure that I have a consistent work schedule and that morale is not affected by
slower project progress.
Working alone has the advantage that there will be little to no conflict on how to go about
adding a new feature or resolving a bug. Time management is significantly simpler when
done alone. Because I am completely aware of what I have accomplished and what remains
to be done, I can more precisely predict how long things will take and visualize the bigger pic-
ture. Last but not least, because I created the system from the start, I am fully knowledgeable
about it. I don’t have to communicate with other team members to get information if someone
has a problem or finds an issue.
8. Chua Quang Minh
Page 8
Project Management
Project Management
WORKFLOW
I have been tracking my work on the second half of my project while building the website. The
workflow has been consistent up to this point, with just a few obstacles that might be post-
poned to the following week, allowing me to concentrate on the task I have been given for the
upcoming weeks. One of the simplest and least difficult ways to turn a concept and a variety
of demands into workable software solutions is to use the agile approach. The agile method is
an incremental and iterative approach to software design that makes use of ongoing prepara-
tion, comprehension, updating, collaboration across teams, development, and delivery. Teams
work on various models that are divided up according to the agile methodology, which en-
courages flexibility to changes.
Project management has a category called “risk management” that deals with controlling
possible project risks. Undoubtedly, one of the most crucial facets of project management is
risk management.
Using a risk management strategy to detect potential risks will help me understand and re-
spond to threats and opportunities, protecting the project from unexpected risk.
The first step is to identify any potential risks that could affect the project before it is finished.
Second, the responsibility for supervising the risk needed to be delegated to a team member,
but as I operate alone, that duty would naturally fall to me. The next step is to assess the risk
and fully comprehend the underlying cause and any potential consequences.
Prioritizing would be the fourth step. When it comes to developing software, developers oc-
casionally take chances by creating fresh concepts and deviating from the initial task. When a
project’s scope shifts or begins to “creep” beyond what was initially negotiated, this is referred
to as “scope creep.” Schedule conflicts and project delays are frequently caused by scope
creep.
Responding to this form of risk is step five. I accomplish this by making sure I stick to my
weekly deadlines. Sometimes, if I think a task would be quick and easy to do, I will take a
chance and come up with something new to see if it works. If the assignment proves to be
too challenging, though, I will merely drop the plan and continue as before.
Lastly, I would always monitor the work process with the time I have left to make sure if there
was a need for any changes in the schedule.
RISK MANAGEMENT
9. Page 9
Chua Quang Ming
Project Management
KANBAN
The phrase “Kanban,” which is derived from the Japanese language, is translated as “visual
board or signboard.” First established as a lean manufacturing method, the Kanban idea grad-
ually made its way to agile software development teams. This approach develops and manag-
es projects using visual approaches.
The Kanban board that is shown above is divided into columns to illustrate the process flow
of software development and is used to manage projects using the Kanban methodology. This
helps teams become more visible since they can track their progress through each stage of
development and get ready for forthcoming tasks to deliver the product by its deadlines.
figure 1.1: kanban
10. Chua Quang Minh
Page 10
Project Management
BRAINSTORMING
Brainstorming is typically done in groups, although it may also be done by a single person.
Brainstorming is a creative method commonly employed to tackle a specific problem. This is
accomplished by seeking and recording new ideas from team members. For starters, I cre-
ate an excessive number of notes on the whiteboard and then arrange the cards into smaller
categories.
During a card sorting activity, I sort the notes into categories that correspond to the subjects,
and they might even contribute to the group labels. I’m using the online application Miro to
organize and manage my thoughts and ideas. I scrawled anything that was on my mind on
the sticky note, such as website design ideas, which applications and tools I should use, and
so on.
figure 1.2: miro
I use the lotus diagram to sort through the larger design of an impending project or to hash
out the minor specifics. A lotus diagram is a tool for brainstorming and organizing ideas. It
aids in the definition of crucial concepts or components of a larger image. The core idea is
shown in the middle of the figure, with eight surrounding boxes signifying other notions.
One can come up with a thousand ideas to present. Occasionally, the well runs dry. A Lotus
Diagram can help me execute more efficient and successful brainstorming sessions. This Lo-
tus Diagram Template may be used to depict themes and explore different pathways.
11. Page 11
Chua Quang Ming
Project Management
I can view a filtered view of the board’s main table using Monday.com’s Table view. I can, for
example, filter results by person, status, column, or group. This can assist conceal information
that, at first look, may not be pertinent to your needs. I’ve set the Table View filter to “person”
in this instance so that we can see one individual’s board activity.
My project is separated up in weeks:
Week 8: Planning and Research
Week 9: Sketching
Week 10: Front-end Design
Week 11: Back-end
Week 12: Report writing
Week 13: More Back-end
Week 14: Testing and live server
Week 15: Finish report
figure 1.4: weeks
figure 1.3: lotus diagram
12. Chua Quang Minh
Page 12
Project Management
The project schedule is, in essence, the expected time frame given to finish the project or
create the final output. Typically, this is calculated by first calculating the amount of time each
project activity would require. To see the project schedule, specify work sequences, and keep
track of how long each task takes, using a Gantt chart is one of the best options.
A Gantt chart, which is frequently used in project management, is one of the most well-liked
and practical ways to represent activities, tasks, or events against time. An exact time scale
runs along the top of the chart, and a list of the activities is located on the left.
GANTT CHART
13. Page 13
Chua Quang Ming
Project Management
A bar is used to symbolize each activity, and the location and length of the bar correspond to
the activity’s start, middle, and end dates.
I have been using Miro and Monday to manage my project. Monday.com makes it easier to
manage and pre-plan my weeks and time. I started creating a Gantt chart in Miro before de-
ciding to use Monday.com.
It displays the entire timeline as well as the task that I am currently working on, and if the
plane changes, I can simply drag the task to another date to extend the time for the assign-
ment.
figure 1.4: gantt chart
14. Chua Quang Minh
Page 14
Project Management
MOSCOW METHOD
The point of the Moscow method is to find out what gets prioritized first and what is absolutely need-
ed for the website.
Before doing a MoSCoW analysis, a few things must occur. To begin, the client and developer teams
must agree on objectives and priorities. After that, everyone must agree on which initiatives should be
prioritized.
Must have
The client’s request is regarded as the “most important” for the project and is given top priority. The
customer primarily requested an events and news page with the ability to alter the information as
needed. To be able to modify any content on the front end, an admin page that only the administrator
could access had to be made. The customer also wanted a photo gallery with every uploaded picture
shown on the page.
Should have
The phrase “should have” implies things that the client would also want to have but are not high prior-
ities. The client also requested a playlist of ceremonial audio as well as a list of donors along with how
much each one has contributed. Also, they asked that a functional calendar be used to highlight the
event.
Could have
Several tasks might be accomplished for the application, but only after I’ve completed the “most have”
and established that I have enough time to add new ideas and also finish writing the report. One great
suggestion would have been to have language choices, because the application would most likely be
used only by Vietnamese people, but other people could be interested in the association, so having an
application that can translate it to either Danish or English would be useful.
The page could have had a hit counter, which would have allowed me to sort the news content ac-
cording to how many times users have visited the page and even add a section for the most popular
posts. There are other things that can be added to the website, but they will most likely be considered
in the future.
Won’t have
Wishes for a future version that cannot now be achieved without incurring significant expenses or
because of a lack of resources are known as “won’t haves.” For now, I just have to focus on the basic
functionality, and everything else can wait until later if the client has anything else in mind for the
application.
15. Page 15
Chua Quang Ming
UX strategy
UX strategy
DEFINE
EMPATHIZE IDEATE TEST
PROTOTYPE
The design thinking process lays out a sequence of phases that implement this theory, starting with developing
empathy for the user and continuing through coming up with ideas and creating prototypes.
DESIGN THINKING METHOD
Design thinking is characterized as a unique form of thinking. This method is made up of
several phases. The five stages of design thinking are as follows:
Empathize
Typically, via user research, I should be able to get an empathic grasp of the issue I’m trying
to tackle in this situation. Since it helps me to put aside my own perspective and acquire
deep insight into users and their requirements, empathy is essential to a human-centered
design approach like design thinking.
Define
Following that, I compile the data acquired during the empathize stage. Instead of focus-
ing on the demands of the company, I am focusing on those of the users while drafting the
problem statement. A good problem statement is human-centered, open-ended enough to
encourage innovation, yet narrow enough to offer direction.
Ideate
Now that I have a firm understanding of the situation, I’m trying to think of as many ideas
and potential solutions as I can. There are several ways to generate ideas, including brain-
storming, sketching, storyboarding, and others.
16. Chua Quang Minh
Page 16
UX strategy
At its most basic level, a brainstorming session entails branching out related ideas from a
main concept. One of the key strategies used during the ideation stage of a standard design
thinking process is brainstorming. In order to generate as many viable answers as possible,
team members build on each other’s responses and ideas while concentrating on one issue
or obstacle at a time.
Prototype
After selecting a small number of concepts, I will develop prototypes, or “scaled-down” ver-
sions, of the item or concept I intend to test later.
Test
Later I can determine where the prototype works effectively and where it needs to be im-
proved thanks to the testing phase. Before spending time and money designing and/or de-
ploying the solution, I may make adjustments and improvements based on customer input.
QUANTITATIVE RESEARCH
I can’t target everyone, therefore it’s important to identify the association’s potential target
audience. So I’m conducting an online survey to obtain research information since it is one
of the most efficient methods for conducting surveys and can be used by anyone who has
social media. All of this was data gathered for a mixed-methods analysis using quantitative
approaches.
Quantitative information involves a measurable quantity and uses numbers. Data is a general
term for quantitative information, although it can also apply to anything other than numbers.
Non-numerical information that includes a descriptive assessment using concept terminolo-
gy Qualitative data design examples include asking open-ended questions, monitoring their
behavior, and being less structured than quantitative data designs. Because of the nature of
qualitative data collection, very high verbal and nonverbal communication skills are frequently
required. Many of the people with ties to the organization do not speak Danish or English as
their first language. As a result, conducting an interview with these individuals requires more
communication than my Vietnamese skills allow. Language barriers are less of an issue with
written questionnaires. This prompted me to create a quantitative survey.
I began by asking the standard demographic questions regarding age and gender, but I also
wanted to know how far the respondents resided from the association. This can provide back-
ground for the survey’s subsequent responses.
17. Page 17
Chua Quang Ming
UX strategy
Because the website is intended to be a source of information, I wanted to know where they
obtained their temple-news updates today and if they would be willing to use the site follow-
ing its launch. The poll was circulated via Facebook, where I had access to a wide network of
the temple’s congregation. In a few days, there were 26 registered responses.
figure 2.1: circle diagram
Once the data was collected, I discovered that practically everyone who responded to the
survey had previously engaged in temple-related activities. This signifies that the survey was
primarily circulated to the target audience.
After the respondent who had never previously visited the temple was excluded, the other
respondents had an average interest score of 6.84 and a median of 7. This is a really decent
score, in my opinion. Just six of the 25 responders received a five or below. This suggests that
76% of those having a connection to the temple are enthusiastic about the possibility of visit-
ing the website.
18. Chua Quang Minh
Page 18
UX strategy
Based on the frequency of temple visits, the following is the average interest score:
Based on the answers, we can see that there’s a clear correlation between the frequency of
visits to the temple and how positive they are towards the possibility of a webpage. I interpret:
There is a strong indicator that the website would be used mostly by temple visitors following
its introduction.
There didn’t seem to be a clear relationship between the respondents’ interest in the webpage
and their closeness to the temple. It could appear that persons living further away from the
temple are more interested in the creation of a website than those living closer to the temple.
figure 2.2: average 1 figure 2.3: average 2
figure 2.4: age
19. Page 19
Chua Quang Ming
UX strategy
figure 2.5: gender
In comparison to the larger difference in average answer based on frequency, it is more likely
that general interest in the temple influences interest in a webpage than physical proximity to
the temple.
We can observe which demographic groups are more interested if we look at interest on the
homepage from a binary standpoint, with all scores of 6 or above being interested and 5 or
lower being not interested. Based on these parameters, I found that respondents aged 31 to
56 are most enthusiastic about launching a website. The younger audience is less interested
in a webpage, with three out of every five respondents being uninterested. Based on the low
number of responses, it is difficult to draw any conclusions about ‘57+,’ however, the data do
not indicate this group as an appropriate target audience.
Going through the same exercise as before, but with gender instead of age, shows that fe-
male respondents were far more positive than the male respondents. For people who chose
“other” or did not want to respond, I cannot say anything for certain due to the low number of
answers.
Based on the answers given, it is reasonable to conclude that of the temple’s congregation,
it is females in the age range of 31–56 who are the most opportune target audience for the
website.
This has to be taken with a grain of salt, as the survey was distributed through a channel that
does not necessarily lend itself to a wide enough distribution of the overall desired population
for there to be a high degree of validity inherent in the respondent selection.
20. Chua Quang Minh
Page 20
UX strategy
WIREFRAME
UI and UX designers use a number of visualization and planning tools to iterate on design
concepts. Wireframes, mock-ups, and prototypes are the three essential levels of visual out-
lines, and each design builds on the previous one.
I spoke with the client, and we discussed various website design possibilities. We mutually
agreed to give me a little more than a week to come up with a couple ideas to choose from.
Because I have a sprint log, I have a clear deadline for how many sketches I should allow
myself to do and then let the client decide so I can complete the remainder of the design for
all the pages.
figure 2.5: wireframes
Four low-fidelity wireframes for the home page are displayed above. I created a low-fidelity
prototype so I could quickly offer a few simple concepts for the client to swiftly evaluate and
pick from. As low-quality mock-ups are often black and white schemes or simple sketches on
paper that concentrate on the “big picture” of the page or project, I create an additional ver-
sion of each wireframe with additional text and visuals to assure that the client understands
them.
The client ended up choosing the first design for the application, so after that, I made an addi-
tional page with that design in mind.
21. Page 21
Chua Quang Ming
UX strategy
CONTRAST
The term “contrast in design” describes how several elements have varied appearances yet
work well together to form a coherent scene. Contrasting colors are found on different sides
of the color wheel, whereas the contrast of tone is black vs. white.
Knowing contrast is essential when attempting to work with text since it indicates that the
weight and size of the text are balanced. Space and separation between elements are gener-
ated via the contrast concept of design. The background and text colors should differ in order
for them to work together properly and be seen.
The colors of the website were one of the last things I focused on. I wanted the owner to have
a look at the prototype first and give me the green light to continue to the next phase before
I changed the design color. And having CSS library SASS made the changing in the ux faster
and organize
The color palette
The website’s background color is the hex color FAECD6, and the text 310C0C has a good
contrast ratio of 15.19.
figure 2.6: wireframes
22. Chua Quang Minh
Page 22
UX strategy
Adminstrator
figure 2.6: wireframe admin
After creating the front-end prototype, I needed to figure out how the administrator could add,
update, and delete items on the site. I wanted to make the admin interface as basic as pos-
sible, similar to the front-end. Of course, the administrator would only be able to access the
pages that were concealed from the public.
Because the design and colors are already in place, it is easier to create a design that will be
replicated on all of the admin pages. I created a sidebar with all of the pages in it for naviga-
tion.
figure 2.7-8-9-10: admin pages
23. Page 23
Chua Quang Ming
Development
Development
FRAMEWORK
A framework is a development platform for software applications. Consider it a usable soft-
ware template that may be selectively changed by the addition of code. It contains libraries,
image files, and reference text all in one package. Frameworks greatly aid developers in the
design of goods. They provide a structure that has already sorted out the low-level features,
letting the developer focus on the project’s particular specifics. In addition, the developer
must write less code.
WORDPRESS
Selecting a framework or not should be based on numerous factors, including the application
to be developed, personal preferences, support options, and possibly technological develop-
ments. Some of these considerations for selecting the framework were Vue.js and WordPress,
or I could work from the bottom.
Ecommerce stores, blogs, business software, and other such things are among the things
WordPress excels at creating. Furthermore, some of these are features that clients expect in
the application, so why not use WordPress to build it?
WordPress is an open-source, free website-building platform. WordPress is a content
management system (CMS) that uses a MySQL database and PHP to make it simple for
non-technical people to create, update, and manage content on websites.
The reasoning for my decision to develop the application from scratch rather than using
WordPress While it’s simple to use, it has its limitations when it comes to development. Word-
Press plugins and themes allow me to add additional functionality and customize them as I
see fit; however, when a developer is creating a Wordpress application, the theme and plugin
may not always provide the precise functionality I want.
A good WordPress developer will make an effort to improve the website’s functionality with
the least amount of new plugins possible. The more plugins I add, the more maintenance,
security risks, potential problems, and speed lags the website will experience.
The majority of WordPress’ functionality is in PHP, which is another drawback. PHP may be
used to create plugins. PHP may be used to create themes. PHP may be used to modify the
WordPress core.
24. Chua Quang Minh
Page 24
Development
In addition, building a website from scratch could give me more control over its appearance
and features. If I have the coding skills or am willing to learn them, I could start from scratch
and build a more unique and personalized website. I won’t be limited by plugins or templates,
so I can create something that is truly unique.
Contrary to implementing a platform like WordPress, however, building a website from scratch
may be time-consuming and may call for greater technical expertise.
BOOTSTRAP
To create the website, I used Bootstrap, a front-end CSS framework made up of reusable
HTML, CSS, and Javascript code. Because all of this code is pre-defined in a downloadable
file, developers and designers may save time when designing fully responsive websites. since
it supports flexible display resizing by letting a website or mobile app recognize the size and
orientation of a visitor’s screen.
To make the bootstrap work, I must manually include it in the project file. There were numer-
ous choices, the first of which was to use the npm package to install Bootstrap in a Node.
js-powered project. To accomplish this, run npm install in the project terminal.
Using the Node Package Manager, developers can import any of the packages based on the
functionality they want at any moment, saving a significant amount of time. The other way
that I chose was to skip the installation and create a file containing all of the hyperlinks to the
bootstrap scripts. To have a more structured folder structure, it would have been preferable to
run the npm install.
All of the application’s front-end pages are based on a grid layout, which Bootstrap also sup-
ports. There are 12 columns in a grid. The size of a column can be set.
Some of the Bootstrap elements didn’t work properly, maybe because part of the code con-
flicted with other CSS styles. Thus, rather than using predefined modals for the photo gallery,
I implemented some Javascript to make the modals open and close.
25. Page 25
Chua Quang Ming
Development
FLOWCHART
As only administrators would be allowed to log in, I was considering whether the website
needed a signup form. Therefore, I had to find a way to give customers the option without
letting a user sign in.
I eventually decided that integrating a sign-up form into the admin pages would be the best
course of action, guaranteeing that only administrators could create accounts for new admin
users. Because there is no indication of logging in on the front end, the only way to reach the
login page is by entering the URL of the login page in the browser.
To illustrate how to achieve the objective, I created a simple flow chart that displays the ad-
ministrative stages.
The flowchart below demonstrates a step-by-step procedure for completing the task. It walks
users through the process of creating an account at each stage.
It begins with the user entering the URL into the browser and proceeding to the login page. It
is in the url to guarantee that no other user has access to the login that only the admin should
have, and if the url is wrong, the user is forwarded to a 404 page.
After the right login information is provided, the user is taken to the admin profile, which has
a navigation of links, one of which is the settings link. Clicking on it would take the user to an
admin settings page with a collapsed form. When users click on it, a sign-up form will display.
Finally, provide the required information to set up an additional account and click the create
button, and a new account is created and stored in the database.
27. Page 27
Chua Quang Ming
Architecture
Architecture
MONOLITHIC AND MICROSERVICE
Monolithic apps are straightforward to develop, test, and deploy. It is simple to modify after
deployment in response to ongoing changes. While this results in a single point of failure
during deployment, most developers do not consider this to be a problem. Since memory,
space, and resources are shared when everything goes through the same application, inter-
disciplinary problems like logging, handling, caching, and security are easily handled.
With a microservices approach, each business capability is divided up into a separate service.
With its own logic and database, each application process runs as a distinct, relatively inde-
pendent service. Each service’s scope allows for updating, deployment, testing, and scalabili-
ty. Microservices increase the system’s complexity, visibility, and manageability without reduc-
ing its complexity.
Out of these two options, I determined the monolith was the better choice because the proj-
ect is for now a one-team task and a beginning team of a few people will find a monolith
architecture perfect to concentrate on. As I determine what will be helpful to the users, new
products will change and develop. A monolith is ideal for this since it enables quick product
iteration. Lastly, a monolithic architecture is the ideal option when the application doesn’t
need sophisticated scalability and the complexity is reasonable.
One of the downsides is that the codebase can become quite massive and complicated as an
application expands and adds features, which might become an issue when using this ap-
proach. It can be challenging to manage, particularly when the number of people working on
each codebase grows.
Another reason for selecting the microservice was that it had some drawbacks that would be
a problem in the future. An overall microservices-based solution might be quite complicated,
even if individual components are fairly simple. Microservices’ integration provides a level of
complexity not seen in monolithic structures. Also, using microservices instead of the mono-
lith may save expenses in some cases, but managing each microservice and its dependen-
cies would probably demand more development resources.
28. Chua Quang Minh
Page 28
Architecture
MVC
The Model-View-Controller (MVC) framework is an architectural or design pattern that divides
an application into three basic logical components: a model, a view, and a controller. Each
architectural component is designed to handle various parts of application development. It
separates the business logic and display layers. It was traditionally used for desktop graphical
user interfaces (GUIs). MVC is now widely used as an industry-standard web development
framework for creating scalable and flexible applications. It is also used to create mobile apps.
figure 4.1: model figure 4.2: view figure 4.3: controller
Model
The model files represent all of the data-related logic with which the user interacts. This rep-
resents either the data being transmitted between the view and controller components or any
additional data related to business logic. It has the ability to add and retrieve data from the
database. Because the controller cannot connect to the database on its own, it responded to
the controller’s request. The model communicates with the database and returns the needed
data to the controller.
Before sending it to the controller, the model would query the database for a list of all articles
with the news type “chua” attached and would only be published three different articles if the
saveDraft boolean was set to true. The articles would be sorted by timestamp in ascending
order, with the exception of the first article. If the model returned a successful response, the
controller would request that the view associated with the articles produce a display of the list
29. Page 29
Chua Quang Ming
Architecture
of articles. This view would take the controller’s list of articles and present them in HTML as a
list that the browser could access.
This is an example from HomeModel that allows me to communicate with the database.
figure 4.4: class
View
The View section handles all of the application’s UI logic. It creates a user interface for the
user. Views are generated using data gathered by the model component; however, these data
are obtained indirectly via the controller.
Controller
The controller is the component that connects the views and the model, acting as a mediator.
The controller does not have to deal with data logic; it just instructs the model what to do. It
handles all business logic and incoming requests, manipulates data using the model compo-
nent, and interacts with the view component to generate the final output.
The controller does not have to deal with data logic; it just instructs the model what to do. It
handles all business logic and incoming requests, manipulates data using the model compo-
nent, and interacts with the view component to generate the final output.
30. Chua Quang Minh
Page 30
Architecture
SASS/SCSS
The majority of the CSS is done with Bootstrap, but some isn’t and is added at the bottom of
the HTML by importing the SCSS style folder.
Apart from the MVC, the CSS and Javascript in the HTML files have been separated into their
own folder.
PhpStorm integrates with compilers that convert Sass and SCSS code into CSS, and SASS
is a preprocessor for CSS that allows me to use variables, mixins, imports, and other features
that speed up the writing of CSS.
I created a SCSS file called index.scss that has the same structure as my index.php and is
linked to all of the other SCSS files in the same way that the “view” files are. In other words,
the @import statement would include all of the other SCSS files in the file.
Certain CSS elements are a bit tedious to write. A mixin allows me to create sets of CSS dec-
larations that I want to reuse across the app
figure 4.4: import figure 4.4: mixin
31. Page 31
Chua Quang Ming
Stack Comparison
Stack Comparison
IDEs are a collection of tools designed to make programming as simple as it can be. A code
editor is simply a text editor with strong built-in functionality and specialized features that are
intended to simplify and accelerate the editing of code.
PHPSTORM VS VISUAL STUDIO CODE
So the ones I have been working with and know how to work with are Visual Studio Code
(VSCode) and PHPStorm. I was debating which of these two I should use for the project since
both are great programs.
The simple, effective platform provided by VS Code can be quite advantageous to develop-
ers. If I want to create a straightforward project using HTML and CSS, I won’t have any prob-
lem becoming familiar with the interface. I can customize the settings using a variety of VS
Code addons, from code completion to attractive visual themes. The freedom for me to adapt
VSCode to my requirements is what sets it apart from other editors.
One of Jetbrains’ most recognizable IDEs is PHPstorm, which is also one of the most widely
used IDEs for web development. The most popular IDE for PHP developers is PHPstorm, with
VSCode following in second. All of PHPstorm’s features, including support for JavaScript, CSS,
and HTML, are aimed at satisfying the needs of PHP developers. While PHPstorm has “PHP”
in its name, JetBrains made sure to include all of the language features, providing a complete
Web development environment.
As a conclusion, I decided to use PHPStorm to work on this project because I’ve been using
it recently and because I feel comfortable with that as well. In contrast to VSCode, it provides
a lot of built-in capabilities, including autocompletion that is quite fast and accurate. Because
the interface for beginners is very difficult and the workspace has too many confusing icons, I
would have chosen VSCode instead if I had not previously had some experience working with
PHPStorm. It’s just not a great starting point for coding for the first time.
32. Chua Quang Minh
Page 32
Stack Comparison
XAMPP/WAMP/LAMP/MAMP
A local server delivers a service by executing an application on the same system as the client
application. For a solitary workstation that is not linked to any network, the local server con-
figuration is typical.
For example, if the network is down but a user can still visit http://localhost with a browser,
this shows that a local web server is running on the same system. Since 127.0.0.1 is an IP loop-
back address, all requests to 127.0.0.1 are really routed to a server program that is on the same
system as the client.
By deploying a local server, I, as a web designer, can develop websites locally on their PCs
without having to connect to the web.
Some well-known local services include LAMP for the Linux operating system, MAMP for the
Macintosh operating system, and XAMPP, a cross-platform web server solution stack pack-
age.
Because I’m using Windows, I could use XAMPP or WAMP. The difference between these two
is that XAMPP works on several platforms, whereas WAMP exclusively works on Windows.
When it comes to Windows, they very much perform the same thing, so I decided to go with
WAMP because it is basically what I need.
WAMP is a local server that incorporates the Apache Server, the MySQL database, and the
PHP script-based language. The programs collaborate to build a local web server environ-
ment and deliver web pages over localhost.
33. Page 33
Chua Quang Ming
Version Control
Version Control
Version control, often known as source control, is used to track and manage changes to soft-
ware code. As development environments have gotten more rapid, version control technolo-
gies have aided software teams in working more swiftly and intelligently. GitHub, among the
most popular, is a platform for hosting code that allows for version control and collaboration. It
allows individuals to collaborate and work remotely on tasks.
The first step is to turn the project into a repository, which is a virtual code storage repository.
A repository is often used to organize a single project. Repositories may store everything from
folders and files to images, videos, spreadsheets, and data sets.
During the development process, this has been an organic workflow, yet I’ve kept on experi-
menting with branches. Using a branch to separate development work from other branches in
the repository Each repository contains one default branch and numerous additional branch-
es. Using a pull request, I can merge one branch into another. With branches, I may securely
test new ideas, add functionality, or fix errors in a specific portion of my repository.
GITHUB
figure 6.1: commit
34. Chua Quang Minh
Page 34
Database
Database
When working on developing a dynamic web application, one would typically need a data-
base. A website database is a way to store data that is accessible via the web. The database
stores information like usernames and passwords to maximize the user experience. The next
step is selecting the right database system to store the data. MongoDB and MySQL are two
popular management systems used by businesses that handle massive amounts of data. Yet,
each database has advantages and disadvantages and is best suited for a certain use case.
The distinction is that one is relational, while the other is not. A relational database manage-
ment system, or RDBMS, is one of four commonly used types of systems for handling client
data. A second option is NoSQL (non-relational databases). I have been working with both
systems.
MongoDB is a non-relational database management system based on documents. It is also
known as an object-based system. It was intended to be a more user-friendly replacement for
MySQL. MongoDB is suitable for real-time analytics, content management, mobile apps, and
other uses. If I have unorganized and/or organized data with the potential for rapid develop-
ment, this is an excellent option.
MySQL, on the other hand, is a free, open-source relational database management system
that stores data in rows and columns in tables. RDBMS is used to define primary keys be-
tween table rows, and queries are interpreted to get data from the database. A relational data-
base would be better suited for multi-row transactions, such as financial accounting. If I have
structured data and need a traditional relational database.
Despite my preference for MongoDB, MySQL is a popular choice for a website’s database.
There are significant parallels between these two systems, including the usage of Node.js,
server-side PHP, and Python.
My reasoning for choosing MySQL is:
• When strong security and referential integrity are required for data.
• To keep a consistent structure with organized data that does not need to be updated over
time.
• MySQL offers a large community and inexpensive startup expenses, making it ideal for
new developers.
• For organizations that need low-volume traffic.
35. Page 35
Chua Quang Ming
Database
ER MODEL
Because the association needs a website to notify members of upcoming events and foreign
news, I thought about what a professional news site would provide for their database.
An ER model (or ER diagram) is a graphical description of how distinct items in a database
are structured and relate to one another. The components of an ER model are represented by
different geometric forms (circles, squares, triangles, etc.) that are related to each other via
lines, as seen in the example above.
There are several ways and methodologies for converting ER diagrams to relational databas-
es. Some are automated, while others are manually operated.
A table creation statement needs three components: a table name, field names, and field
meanings. So, I started by analyzing the information that was most likely to be expected for
the applications in Mini World. After establishing which things were relevant, I used draw.to,
an online diagram software.
figure 7.1: ER model
36. Chua Quang Minh
Page 36
Database
RELATIONAL MODEL
After designing the system’s ER diagram, I need to convert it to Relational models that can
be immediately implemented by any Database management system such as Oracle, MySQL,
and so on.
Additionally, I have determined whether the cardinal relationship between the tables is one-
to-one, one-to-many, or many-to-many. Because one attribute in the news type database can
correspond to many different rows in the news table, the “News” and “NewsType” have a one-
to-many relationship. A news article, for example, might only belong to one news type, but
that news type may have multiple articles related to it.
When I had all of the information, I assigned a data type to each attribute, with the majority
of them receiving the data type VARCHAR, which is used to store character string data. This
was the most efficient approach for me for storing the image name as a string. There were a
number of ways to save the data, for instance using CHAR, BLOB, LONGTEXT, etc., but I think
VARCHAR is the most efficient.
NORMALISING
Then I used the database normalization criteria to see if the tables were correctly constructed.
Normalization avoids data duplication and gets rid of undesired traits like INSERT, UPDATE,
and DELETE Anomalies.
The first form specifies that each table has a single primary key. In this case I use the “News”
table as an example, with the primary key being the newsID, which is auto-incremented and
not null. That means that adding a new entry to the News table will result in the creation of a
new unique id. Not null indicates that it would not be empty.
The second form of normalization guarantees that all tables have only one primary key; if an-
other key exists, it is a foreign key that is linked to the primary key of another database.
When the other two forms of normalization were fulfilled, I shifted on to the final form, which
is to separate the tables that can be separated to their own primary key, which in this case
would be the “NewsType” table that contains the categories, which connect, for example, a
type to the row with the news type id.
37. Page 37
Chua Quang Ming
Database
I could have separated the event table into two with the address attribute, but that would be
for another time. This is one of the downsides of updating relational databases. It may get
complex as the amount of data increases and the relationships between data pieces become
more complicated. Complicated relational database systems may result in isolated databases
where information cannot be transferred between systems.
figure 7.2: relation model
38. Chua Quang Minh
Page 38
Database
I ended up with the following entities:
• News
• News Type
• Event
• Photo
• Mail
• Admin
• Donation
• Amount
Now that I’ve created an overall framework for the database, I need to put it into action. One
option is to directly enter the data into phpMyAdmin and enter the table’s entities and attri-
butes, or to create a SQL script with all the premade SQL and import it.
I had a lengthy query that I would use repeatedly, so instead of writing the same lengthy code
again, I created a view that had the entities and required attributes integrated into a table, and
I can just pull the data from that view. Views in SQL are basically virtual tables. A view, like a
real table in the database, has rows and columns. I can build a view by choosing fields from
one or more database tables. A view can include either all of the rows of a table or particu-
lar rows based on a criterion. This way, the redundant code is removed, and I do not have to
repeat the code.
MOCKAROO
Throughout the project, I made several changes to the database as I explored new approach-
es. The test data would be lost every time I imported the new database I had. Thus, using
Mockaroos’ API Mocking Tool and Random Data Generator With this, I could quickly and ef-
ficiently retrieve a considerable quantity of randomly generated test data by writing down the
entities and attributes from my database, allowing me to eventually integrate that data into my
database. I included the test data in my code so that it would be uploaded with my database
every time I re-uploaded it.
39. Page 39
Chua Quang Ming
Functionality
Functionality
The way I got the data displayed and functionality working was through the function CRUD.
The relational database management systems, such as MySQL and others, all come with
common attributes that are collectively known as CRUD.
In order to generate a connection parameter for the mysql host, user, password, and database
name, constants.php is used to connect the mysql database. For that, I use the PDO (PHP
Data Object) to get the connection instead of the more common MySQLi.
Using PDO, working with objects can be done in a variety of ways, while retrieving prepared
statements greatly simplifies the process. It is a PHP database access tool that we use to
ensure consistent access across several databases. By simply altering the connection string,
PDO makes it possible to transition between several databases and platforms very seamless-
ly.
The frequently used insert and update database action is condensed into a two-step proce-
dure using PDO, which goes as follows: Prepare - Bind - Execute. This approach allows me to
optimize PDO’s prepared statements, which protect against malicious SQL injection attacks.
PDO
CRUD
Create, Read, Update, and Delete are the four fundamental categories of database operations,
or CRUD. The majority of programs and initiatives offer some sort of CRUD functionality.
Create and Read is the CRUD function that I have been implementing the most because this
website is used for publishing and presenting news. The create function allows the adminis-
trator to add a new row to the tables. In this example, the administrator selects the photo file
from their computer, enters the filename, and then clicks the upload button on the form.
figure 8.1: photo admin
40. Chua Quang Minh
Page 40
Functionality
A PHP file called “PhotoController.php” receives the form input and processes it. Using the
HTTP POST method, the form data is submitted.
A new image would be saved to the database using this piece of code, and the uploaded
image would be saved in the “assets/gallery” folder with a filename that has been changed to
lowercase.
Using a Prepared Statement object could prove more useful when executing SQL statements
on the database. A prepared statement is a template for running one or more SQL statements
with different parameters. It is very efficient and helps to protect the application against SQL
injection. If I want to run a statement repeatedly, using a PreparedStatement object rather
than a Statement object usually takes less time.
Another method of supplying data to the database is using binding parameters. I may simply
use a placeholder like :name and send the real data via a different API call rather than directly
inserting it into the SQL query.
Data is saved during the transaction, and a commit is required to inform the database that
more data is expected. By doing this, it is further guaranteed that no data is sent until the que-
ry has completed successfully.
The prepared statements are executed in this project, and the transactions are started when
they are committed if there are no mistakes, making sure to roll back the entire statement if
there are.
To read the data, use the SELECT statement to select all the entries from the SQL query’s ta-
bles. I run the PDO object’s query() method: $statement = $pdo-query($sql); then
I fetch all data with $result = $statement -fetchAll(PDO::FETCH ASSOC);
The only real difference between the UPDATE function and the CREATE controller script was
that I had to indicate the exact id I wanted to alter. The SQL query would thus resemble this:
UPDATE Table SET `stringName` = :stringName WHERE Table.`tableID`
= :tableID
The SQL DELETE command is used to delete rows from a table.
The example that follows demonstrates how to delete the selected photoID from the Photo
database using a prepared statement:
41. Page 41
Chua Quang Ming
Functionality
figure 8.2: create
Like the previous CRUD function, I connect to the database using conn.php, and then I create
a DELETE statement with a named placeholder: photoID. Then I make a prepared statement
by invoking the PDO instance’s prepare() function. I then bind the photoID parameter to the
statement before executing the DELETE statement, and lastly, I refresh the page with a head-
er() that redirects to the same page.
Because only a few tables were joined to each other, and none of the tables that needed to
be removed were related. Table deletion has been made significantly smoother. Due to the
“foreign key” constraint, it would be difficult to execute a DELETE statement properly if the
intended deleted id was tied to another table. It requires the deletion of the other table id to
which it is attached in order to function, but doing so destroys all of the other rows from the
first table that are also attached to it.
One alternative would be to do a “soft delete,” which would just conceal the id or archive them
into a new database, making them invisible to users.
figure 8.2: edit
figure 8.3: delete
42. Chua Quang Minh
Page 42
Functionality
OTHER FUNCTIONALITY
Apart from news and events, they needed a fully functional calendar on the website that listed
forthcoming events. but I was having trouble creating one, so I chose to tackle the issue dif-
ferently, and I lack the ability and expertise to create one. I had to develop a calendar for that
function using pre-written javascript.
However, the data still had to come from the database, so I had to convert the PHP character-
istics into Javascript.
I used the PHP function json encode() to translate the string $title to a JSON string, which
can then be passed to a JavaScript variable. The PHP json-encode function returns the JSON
representation of the value given to it.
I used the date() function to specify the date and time, which changes the timestamp to a
more readable date and time format. The date() function has been used frequently through-
out the web application. For example, when I want a basic date, such as the day and month, I
would enter the following characters in the date() functions string: “F J, g:i a.”
. As an example,
consider the timestamp “2023-03-31 14:12:52,” and the outcome would be “March 31, 2:12 pm.”
figure 8.3: calandar figure 8.4: timestamp
43. Page 43
Chua Quang Ming
Security
Security
SANITIZING
PHP security is critical throughout the application’s existence to prevent potential vulnerabil-
ities. PHP is much like any other programming language in terms of security. Nonetheless, it,
like any other language, needs the use of programmers to create and construct secure appli-
cations.
For security purposes, I sanitize all my input fields with the function trim(), which strips
whitespace or other characters from the beginning and end of the string. Then there is strips-
lashes(), which returns a string with all backslashes removed. To prevent the use of pre-
defined elements in input fields, I use the function htmlspecialchars(), which converts pre-
defined characters like and into entities. The last one, nl2br (), is used to insert line breaks
in database-stored paragraphs, not for security reasons.
I combined all of this into a function named “sanitize()” so I wouldn’t have to manually re-write
all of the functions and all the properties that needed to be sanitized.
Because I had to sanitize all of the input fields, it was tough to create a functional article that
could be edited and shown on the front end. I had to delete the sanitizing from some of the
input fields, such as paragraphs, because it added unnecessary line breaks every time the
database was saved. But, because I removed the satiting, the text will not save properly with
the line break since it no longer has the nl2br() function.
To solve this problem, I added the script to make a CKEditor, which is a text editor that allows
users to write directly into web pages or online apps. With this, the admin can write the article
as they want.
SQL INJECTION
SQL injection, sometimes referred to as SQLI, is a popular attack method that uses malicious
SQL code to manipulate backend databases and access data that was not intended to be
visible. Any variety of things, such as private user information, lists, or sensitive business data,
may be included in this data.Despite the fact that SQL injection is harmful, I still tested it to
see whether the website was still secure, and it didn’t seem to affect the database because it
was just presented as a string.
In order to run a user-controlled SQL query in the database, SQL injection testing verifies
whether it is possible to inject data into the program. If the program uses user input to con-
struct SQL queries without proper input validation, testers discover a SQL injection vulnera-
44. Chua Quang Minh
Page 44
Security
HASHING
In PHP, the hash function is a pre-defined way for identifying a string in the form of a defi-
nite value calculated from the string’s characters. It is well-known for its use as an encryption
method and as an index value representation for database entries.
The following PHP scripts demonstrate the password_hash() function:
echo password_hash($password, PASSWORD_BCRYPT);
This is accomplished using the built-in PHP function password_hash(), and the hash is en-
crypted with PASSWORD_BCRYPT, which uses the CRYPTH BLOWFISH algorithm.
The built-in PHP function password hash() is used, and the hash is encrypted with PASS-
WORD BCRYPT, which employs the CRYPTH BLOWFISH method. Blowfish is a 64-bit
symmetric block encryption algorithm with a configurable length.
An additional input to a hashing one-way algorithm. To assure uniqueness, boost complex-
ity without raising user requirements, and prevent password attacks using hash tables, a
salt is added to the hashing process.
bility. If this type of vulnerability is successfully exploited, an unauthorized person will be able
to view or change database data.
An example for a common SQL attack is the DROP TABLE. The statement, which removes a
table from the database. The table structure, together with any related statistics, permissions,
triggers, and restrictions, are completely removed.
figure 8.5: salting
45. Page 45
Chua Quang Ming
Security
ROUTES
My route file limits what can be typed in the browser’s URL field. This serves as another se-
curity measure to ensure that users cannot access admin pages and that their only access is
through an admin log in.
For the routing to work, I need an .htaccess file that instructs the web server to modify the
section of the URL that comes after the “/” so that PHP can read it. The script has to know
which routes are available in order for the routing to function.
Due to the significant update to the PHP language, I was obligated to switch from PHP 7 to
PHP 8. Named arguments, union types, attributes, match expressions, error handling, consis-
tency, and many other improvements have been added.
The new matches share many characteristics with switches, including the fact that they are
expressions whose result can be returned or stored in a variable.
figure 8.6: router
46. Chua Quang Minh
Page 46
Security
SESSION HANDLING
This function first checks to see if there is an active session, and if not, it starts one. The ses-
sion is saved in the index.php file and is destroyed when the browser is closed or an admin
user signs out by clicking the sign out button at the top of the index.php page on the admin
pages. The session variables are kept in an array known as $_SESSION [].
When a user closes her browser, her session is automatically terminated. This occurs because
the PHPSESSID cookie on the user’s computer expires when the browser is closed. It will be
useful in a variety of scenarios.
figure 8.7: session start figure 8.8: session destroy
The session destroy() or unset() method can be used to end a PHP session. This function
requires no arguments and can delete all session variables with a single call.
The difference between these two functions is that session destroy() deletes the whole ses-
sion, but session unset() deletes only the variables from the session, leaving the session
intact. Just the data has been deleted.
47. Page 47
Chua Quang Ming
Usability testing
Usability testing
THINK ALOUD METHOD
I needed to identify individuals who fit my target demographic for the sake of this testing, but
there was a slight issue with that because the association’s website was currently only in En-
glish and the majority of its members only spoke Vietnamese and a very limited bit of Danish.
The last obligation given to a member of the association was translating the website, so for
the time being, I had a few individuals who belonged to the target demographic but were not
members of the association and were of Vietnamese descent perform a think-aloud test.
There are a lot of different ways to have a user test; one would be the “think aloud” test. With
the Thinking Aloud Method, users provide feedback while a website is being evaluated. The
strategy is to show how users interact with the applications and why they use them in partic-
ular ways. The method’s premise is that when individuals talk about the app, they are able to
properly describe and explain their actions.
Before making them test the website I ask them few basic questions to start of with:
• Which device do you use when you browse the internet?
• What browser do you prefer?
On the website question:
• Describe what you see in the first 30 seconds?
• Can you navigate to the news section?
• Can I look for the (title of the news article)?
• Go to the (title) page?
• Describe what you see again?
After test:
• What do you think this website is for?
• How was the experience with the website?
• Are there any difficulties?
• What can be improved?
From the result of the testing, since the user can find their way around fairly easily, there were
not many problems with understanding each task. The time it took to complete each task was
mostly less than a minute. The main purpose of this question was to see if testers could nav-
48. Chua Quang Minh
Page 48
Usability testing
igate through the pages easily and to get developer input on how to improve the quality and
design of the website.
CROSS BROWSER TESTING
Cross-browser testing is the process of verifying that online applications function as intended
across a variety of operating systems, devices, and web browser configurations.
Cross-browser testing’s key advantage is that it contributes to the creation of a great user
experience on the website, regardless of the browser or device visitors use to connect. With-
out cross-browser testing, the look and feel of the website could not live up to standards on
various web clients, which would leave users on those platforms with a bad impression. A
better user experience has the added benefit of perhaps increasing conversion rates, which
increases a company’s earnings.
There are many additional types of testing I could do, but they would be for future devel-
opment. Whenever I have the opportunity to alter the design and correct a few minor CSS
mistakes that occur on different devices.
figure 10.1: iphone figure 10.2: ipad figure 10.3: android
49. Page 49
Chua Quang Ming
Hosting
Hosting
Web hosting is the process by which a hosting service stores and maintains website files
and applications on a server to make its customer’s website available on the internet. As one
might expect, more advanced and powerful servers that can handle more traffic are more
expensive. These are categorized as hosting tiers, of course.
As a hosting service, I went with one.com. With the discount deal one.com offers, the website
is hosted for a full year before any fees are due. The client will benefit from this. Thus, they
won’t have to invest money in a practical solution that might not work.
Because there is a high chance that there would be some difficulties with a functionality that
the hosting does not support, I made sure to upload the application a little earlier than neces-
sary. Making it accessible for testing across all platforms, including desktop and mobile, is the
best approach to checking for errors.
There were some problems making the live hosting work. One was that it did not show any-
thing other than the header navigation.
Because one.com does not respond well to the header() function in PHP, I had to make some
adjustments to the code before uploading the live version. In order to reroute the pages, I had
to find a different approach. I accomplished this by creating a script in its place.
Another issue was the hosting provider’s database, which is case-sensitive and requires pre-
cise word-for-word matching when running SQL queries. Nevertheless, I had difficulties and
spent more time than necessary discovering this issue since my database, which I had up-
loaded to the local server, automatically converts to lowercase characters. As a consequence,
when I typed the queries into the code, it failed to identify them.
There are better hosting options available than one.com, but for the time being, this is the
cheapest choice for testing a new project due to the academy’s one-year free domain con-
tract with them.
50. Chua Quang Minh
Page 50
Future Development
SEO
The section would be a future suggestion from the client after I showed them the prototype.
I mentioned earlier in the report that I’d been using CKEditor to solve a sanitizing problem I’d
been encountering. Regrettably, one.com could not recognize it either. As a result, it would
have to be one of the future development objectives.
From the test results, we would have to change the design a little and fix the small CSS issues
that have been occurring on all the devices.
SEO is an abbreviation for “Search Engine Optimization,” which is the process of obtaining
traffic from search engine results that are free, organic, editorial, or natural. It seeks to boost
the website’s ranking in search engine results pages. Consider that the higher the website
ranks in the search results, the more people will see it.
The application is a non-profit website; nonetheless, the simplest method of earning revenue
is through SEO and Google ads. Many people identify the term “search engine” with Google,
which owns more than 92% of the worldwide search engine marketplace. Because Google is
the most popular search engine, most SEO efforts are focused on what works best for Goo-
gle. Google’s goal is to give its users, or searchers, the best search experience possible. Goo-
gle’s search service gains people’s confidence and gratitude. Google also allows businesses
to pay for top-of-search-results ad placement. When people click on pay-per-click (PPC)
advertisements purchased through AdWords, Google makes money.
Future Development
SAVE DRAFT
Redundant code, defined for this purpose as code that does not organically contribute to the
prototype, is one of the hazards to the software’s future maintenance and operation. I think in
this case I should remove any repetitions in the code to simplify it. The most difficult compo-
nent is usually locating the duplication rather than deleting it, which is usually trivial or at the
very least useful in a well-tested codebase. Because much of the code I’ve used to connect
with the database is CRUD, I’ve reused a lot of it.
In the news table, for example, the saveDraft property requires the administrator to write a
new news article and then select whether to draft or publish it. I’ve used it not twice but four
times because it’s useful not only for creating but also for editing. A far better solution with
less code would be included in a future version.
51. Page 51
Chua Quang Ming
Conclusion
Conclusion
Based on the problem specification, I will reach the following project conclusion: How can I
make it simple and easy to use for the association members, allowing them to distribute their
messages and news to their benefit?
The first part of the project went quite well; there were no issues with creating the basic func-
tionalities or coming up with a design for the customer. I have pretty much completed all the
basic needs for the client. As I moved along the project I tested some new concept ideas that
I would introduce to the client for future development. All of this was possible because of the
careful project management and planning that I put in to create a good time schedule with
deadlines.
The problems first occurred in the second half, when I had deployed the application to the
hosting site one.com. Most of the hosting issues have been fixed, for it at least to work proper-
ly for users to visit.
Other than that, planning and research have been moving well within the time constraints of
the project.
Overall I spent time planning and developing the association’s live application version. The
website will require extensive modification before it can be used and used by members to
access the online application.
In retrospect, the task was a valuable learning opportunity. Working alone has benefits and
drawbacks. Making all judgments without consulting others saves time, as does following a
single natural methodology for completed tasks. The disadvantage is that I must cover a wide
range of subjects and ideas completely on my own, with no help from other team members.
Working alone compared to being part of a team has proven challenging. But, because I had
previously worked on a team project, I was capable of developing the application more quick-
ly and effortlessly because I already had extensive knowledge about how to create a website
using PHP. The disadvantage would be that I would have spent so much of my time during
the day and night drafting the report and should have planned it from the start. It’s been a
difficult and lengthy project.
REFLECTION
58. Chua Quang Minh
Page 58
Appendices
Signature
25-02-2023
Suong Cam Vo
Acceptance
Vang Hung
Created by : Prepared for :
Student Name Client Name
Signature
PROJECT CONTRACT
Den vietnamesiske kulturforening har brug for en hjemmeside, der informerer tempel
medlemmerne om fremtidige begivenheder og poster nyheder, der sker rundt om i verden,
hvem der har brug for hjælp, og hvordan man hjælper og støtter dem der har brug for det.
At lave en hjemmeside, der viser begivenhederne og indlæg fra templet. Hjemmesiden skal
kunne opdatere nye opslag og begivenheder.
Designet er for det meste op til den studerende med nogle få undtagelser, som kunden selv
giver. Siden ville have opdatering og indsæt postfunktion (CRUD)
Det har brug for templernes officielle farver. Hvis det er muligt, skal den også kunne se, hvem
der har doneret
25-02-2023
