Kamal Lamsal

Designing and Developing a dynamic website using PHP

Designing and Developing a dynamic website using PHP

Kamal Lamsal
Bachelor’s Thesis
Autumn 2020
Information Technology
Oulu University of Applied Sciences
ABSTRACT

Oulu University of Applied Sciences

Degree Programme, Information Technology

Author: Kamal Lamsal

Title of Bachelor´s thesis: Designing and Developing a Dynamic Website Using
PHP
Supervisor: Veijo Väisänen
Term and year of completion: Autumn 2020 Number of pages: 33

The main purpose of the thesis was to design and develop a user-friendly and
responsive website using the PHP programming language. The website can be
used for searching for a job in the Nepalese job market with a certain cost of job
posting service to the job provider.

The web application was built using the PHP core language. The MAMP localhost
was used to run the project locally. Admin panels were created to make the web-
site dynamic.

As a result, the website is attractive, interactive, responsive, and user-friendly.

The Website has been created and handed over to the client. All the project ob-
jective was completed but there is still place for the improvement which is in pro-
gress.

Keywords: PHP, MAMP, MySQL, Front-end, Backend, CMS

3
PREFACE

The project was ordered by BitMapItSolution which is located in Narayangarh,

Chitwan, 44207 Nepal.

I would like to thank the Chief Executive Officer (CEO) of BitMapItSolution

Roshan Kharel for providing the project and believing me to develop the website
for them. I would also like to thank my supervisor Veijo Väisänen and language
teacher Kaija Posio for all the guidance during the project.

Oulu. 06.10.2020
Kamal Lamsal

4
CONTENTS

ABSTRACT ......................................................................................................... 3
PREFACE ........................................................................................................... 4
CONTENTS ......................................................................................................... 5
VOCABULARY .................................................................................................... 6
1 INTRODUCTION .............................................................................................................. 7
2 WEB DEVELOPMENT AND TECHNOLOGIES USED ....................................... 8
2.1 FRONT-END........................................................................................................... 8
2.1.1 HTML .......................................................................................................... 8
2.1.2 CSS ............................................................................................................. 9
2.1.3 JavaScript ............................................................................................... 10
2.1.4 Bootstrap ................................................................................................. 11
2.2 BACKEND ............................................................................................................. 12
2.2.1 MAMP Localhost ................................................................................... 12
2.2.2 PHP ........................................................................................................... 14
2.2.3 MySQL ..................................................................................................... 15
3 IMPLEMENTATION OF THE WEBSITE ................................................................ 17
3.1 Development Tools............................................................................................. 17
3.1.1 Code Editor ............................................................................................. 17
3.1.2 Hosting ..................................................................................................... 18
3.2 File Structure ............................................................................................................ 19
3.3 UI of the website .................................................................................................. 20
3.3.1 Navigation Bar and Search Box .......................................................... 20
3.3.2 Home and Search Result Page ........................................................... 21
3.3.3 Contact Page and Footer ...................................................................... 23
3.3.4 Login and Register Page.................................................................... 24
3.3.5 Admin Panel of the website ............................................................... 26
4 CONCLUSION ................................................................................................................ 30
5 REFERENCE ................................................................................................................... 32

5
VOCABULARY

API Application Programming Interface

CMS Content Management System

COM Component object model

CORBA Common object request broker architecture

CSS Cascading Style Sheets

DBMS Database Management System

HTML HyperText Markup Language

IMAP Internet message access protocol

JS JavaScript

LDAP Lightweight directory access protocol

PDO PHP Data Object

PHP Hypertext Pre-processor

POP3 Post office protocol version 3

UI User Interface

WWW World Wide Web

6
1 INTRODUCTION

This thesis is related to the development of the website that could be used to
search for a job in the Nepalese job market with a certain cost of job posting
service to the job provider. The thesis work was carried out for Bitmap IT Solution
Pvt Ltd. (BITS).

Bitmap IT Solution (BITS) is a creatively driven integrated Business and Adver-

tising agency, and an IT company located in Narayangarh, Nepal that creates a
high-impact business solution for both traditional and digital media to the clients.

The primary objective was to design and develop a website using the PHP pro-
gramming language. The development was done by using the Client-server
scripting language along with CMS (the Content Management System). Boot-
strap and CSS (Cascading Style Sheets) were also used to make the website
responsive and interactive. The secondary objective was to learn to implement
the PHP core language.

This thesis provides all the information about the technologies used during the
design and development of the webpages along with the implementation process
of the website.

7
2 WEB DEVELOPMENT AND TECHNOLOGIES USED

Web development is the process of creating either a static or dynamic web page
or web application with different technologies for the Internet (www) or an intranet
(a private network). Two different technologies like front-end and back-end were
used in the development of the webpage.

2.1 FRONT-END

Front-end is the part of website development where a view or design of the web-
site can be created using different front-end tools. It is also known to be the client-
side of the website. Some of the tools that were used in the development process
are listed below.

2.1.1 HTML

HTML stands for the Hypertext Mark-up Language. This mark-up language in-
forms the web browser how to display the content on the web pages. They are
written in the format of tags, for instance, “body”, “head”, “title”, “section”. Most of
the tags contain same or different tags as their child-elements. HTML consists of
a series of elements and is used for creating web pages and websites. The
“<!DOCTYPE html>” written at the top of the HTML file indicates that the docu-
ment is the HTML5 document. Additionally, all the tags and content for the
webpage are wrapped with the “<html>” tag. The HTML files are saved with the
“.html” or “.htm” file extension.

FIGURE 1 shown below is an image of basic HTML syntax where different tags
are used.

8
FIGURE 1. HTML Syntax [1]

2.1.2 CSS

CSS stands for the Cascading Style Sheet that is used to design the websites.
CSS handles the look and feel part of a web page and controls the style of a web
document simply and easily. Using CSS, the color of the text, the style of fonts,
how columns are sized, what background images or colors are used, the spacing
between paragraphs, as well as a variety of other effects can be controlled. It can
be written either in an HTML file or a separate file with the “.css” extension. [2]

FIGURE 2. CSS Syntax [2]

As shown in FIGURE 2 above, a standard CSS syntax consists of a selector and

a declaration block. HTML elements are indicated with the selector or tag like
“<h1>”. An attribute type of HTML element is a property for example “color”, “font-
size” and each property is allocated with values like “black”, “12px” as shown in

9
figure 2. The property and value are separated by a colon (:). Each declaration
block is surrounded by curly braces and each declaration ends with a semicolon
(;).

2.1.3 JavaScript

JavaScript is a dynamic computer programming language that is normally used

as part of webpages, whose implementation allows the client-side script to inter-
act with the user and make the page dynamic. The JavaScript code can be placed
in an HTML file within a <script> tag or also can be used in a separate file with
an extension “.js” file. Commonly JS is used for image manipulation, form valida-
tion, and dynamic changes of content. JS often uses a document. getEle-
mentById () method to select the HTML Element. [3]

FIGURE 3. JavaScript Function [4]

FIGURE 3 shown above is an example of the JavaScript function in which func-

tions p1 and p2 inside the <script> tags are carried out to perform a calculation
and results from the value 12.

10
2.1.4 Bootstrap

Bootstrap is a free tool for developing the responsive front-end design of any
webpage. It is an open source that can be customized as per the requirement of
the website. Bootstrap works along with HTML, CSS, and jQuery to make the
web UI (User Interface) more interactive, such as typography, forms, buttons nav-
igation, dropdown, layout, and carousel.

Bootstrap offers ready-made blocks of code that can be used and customized to
suit our application requirements. It also provides predefined CSS and libraries
which take lesser effort while developing the web pages. It provides developers
a centralized development codebase features that help to maintain consistency
and most importantly it has several responsive features which are compatible
with all the latest browsers. The framework can either be downloaded directly
from “getbootstrap.com” or be introduced to code as a CDN (Content Delivery
Network). [5]

FIGURE 4. Bootstrap Example [6]

FIGURE 4 shown above is an example showing the use and the implementation
of the Bootstrap on any website.

11
2.2 BACKEND

This is the server-side development of the webpage which stores and arranges
the data to make sure that the client-side of the webpage works fine and receives
all the data from the database. This part of the website cannot interact with the
users. Creating libraries, writing APIs (Application Programming Interfaces), and
working with system components without the user interface can be carried out in
the backend.

2.2.1 MAMP Localhost

MAMP is the acronym of different components like “Mac OS X, Apache, MySQL,

and PHP”. It is a free local server environment which is used for testing and web
development. The server operates and installs the AMP stacks that contain dif-
ferent packages [7], as Apache is the web-server software which enables a com-
puter to host many websites that can be accessed through the Internet using the
web browser and MySQL which is a relational database management system
that allows accessing the data from the system that has PHP. It helps to make
the webpage dynamic.

FIGURE 5. MAMP Localhost

12
FIGURE 5 shown above is an image of the MAMP localhost that is used to control
the server.

FIGURE 6. Default Homepage of MAMP

FIGURE 6 shown above shows the appearance of the MAMP localhost in which
the server can be started, and it takes to the default homepage of MAMP as
shown in figure 6. PhpMyAdmin is located in the tools menu.

PhpMyAdmin is a free software tool written in PHP for handling the administration
of MySQL over the web. Commonly used operations, such as managing data-
bases, users, tables, relations, columns, and indexes are supported by
PhpMyAdmin. Some of the common features of PhpMyAdmin are listed below.
[8]
• Creating graphics of the database layout in different formats.
• Importing data from CSV and SQL
• Using a set of predefined functions, Data can be transferred into any for-
mats like displaying BLOB-data as an image or download link.
• Multiple servers can be administered.

13
FIGURE 7. Homepage of PhpMyAdmin

FIGURE 7 shown above is an image of the homepage of PhpMyAdmin that is

used to create and manage database tables.

2.2.2 PHP

PHP is a recursive name for “Hypertext Pre-Processor. PHP has been an im-
portant language for developing commercial sites for all the developers to sustain
in the Software development field. PHP started as a small open source project
that evolved highly later as it was very useful for developing and building the
websites and bigger projects. The first version of PHP was developed way back
in 1994 by Rasmus Lerdorf. PHP is a server-side scripting language that is em-
bedded with HTML. It is used to manage dynamic content, build an e-commerce
site, integrate with MYSQL and Oracle. The major protocols, such as POP3,
LDAP, IMAP, and PHP4, added support for Java and distributed object architec-
ture (COM and COBRA) making n-tier development possible. [9]

FIGURE 8 shown below is an example of the script to write PHP along with the
output that is received.

14
FIGURE 8. PHP Script examples with output [10]

Some of the common features of PHP are given below.

• Performing a system function, such as CRUD (Create, Read, Update, and
Delete).
• It has built-in support for a working hand with MySQL.
• Setting a cookies variable and encrypting the data.
• PHP is cross-platform; this means that an application can be deployed in
various operating systems. [12]

2.2.3 MySQL

MySQL is a very popular, open-source DBMS (Database Management System)

which handles very large databases and gives fast and reliable performance.

15
SQL provides a structured language for querying or updating multiple databases.
Some of the features of MySQL are given below. [11]
• Can be installed locally.
• Multi-users access to several databases offered.
• Easy to use Shell for creating tables, querying tables.
• Frequently used by PHP and Perl
• Strong data protection
• High performance.

Basic queries for MySQL are written as

MySQL > SELECT VERSION (), CURRENT_DATE;

16
3 IMPLEMENTATION OF THE WEBSITE

When the user logs in to the website, the user can view the apply button on every
list of job shown on the website. Once the apply button is pressed, it will redirect
the user to the application form page where they can put in their details about
education, work experience, and personal data required to apply for the job. Then
the company will get a notification telling that a new application has been filled.

After that, the admin will log in to the admin panel of the website and see the
application under the manage application section where the admin can mark the
status of the application and the user will receive an email showing the status of
their application with additional information.

The process, tools, and methodology are explained in this section below.

3.1 Development Tools

Development tools are the computer program that is used by the developers to
create, debug, maintain, or support the other programs and an application. Some
of the common development tools used for the development of the website are
code editor, web browser, and Hosting.

3.1.1 Code Editor

To create any website, choosing a good code editor can make work more effec-
tive and efficient. Among many code editors, VS code (visual studio code) was
selected for the development of the website.

VS code supports multiple programming languages which means that it can eas-
ily detect if there is any fault or cross-language reference. With the ever-increas-

17
ing demand of the code, security and time are valuable, and VS code is con-
nected with the Git repository for pulling or saving in the meantime. Other fea-
tures, such as terminal support, multi-projects support, and extensions, are pro-
vided by the Visual studio code.

3.1.2 Hosting

GitHub was used as a source code hosting platform to store the codes of the
project. GitHub keeps track of all the changes made in the project. Source code
in GitHub is publicly available to others but it also has the option to keep the
codes private. The private repository in GitHub can only be accessed if the owner
of the repository invites someone to collaborate in the project. [13] The user of
GitHub can also create different branches for different purposes in the same re-
pository and later on can merge them in the master branch. Creating another
branch does not affect the master branch and the user can pull the file according
to those branches.

18
3.2 File Structure

FIGURE 9. Project file structure for both front-end and back-end.

FIGURE 9 shown above is an image of the project structure used for the devel-
opment of the website.

19
In this structure, the “Surejob” folder contains all the sub-folders as well as files.
The “includes” folder contains the configuration file that is used for the connection
to the database and the header, navbar, and footer of the website. The image file
and styling files are stored inside the “assets” folder. The “js” folder is used to
store the scripts of the website. Similarly, the “database” folder contains the SQL
file. Additionally, the “Surejob-controlpanel” folder is the folder that contains all
the files and folders that are used to manage the content of the website.

3.3 UI of the website

3.3.1 Navigation Bar and Search Box

The navigation bar is used to navigate through different pages of the website.
There are two navigation bars on the website. One is for the user panel and the
other is for the admin panel. Home, Contact, Login, and Register pages of the
website can be accessed through the navigation in the user panel. The Login and
Register buttons will be changed to the Dashboard dropdown once the user is
logged in. The dropdown includes the link to the profile of the user and the logout
button.

FIGURE 10 shown below is an image of the navigation bar that can be seen by
the user of the website.

FIGURE 10. The navigation bar for user panel.

20
FIGURE 11. Search box

FIGURE 11 shown above is an image of the search box of the website. The
search box has an input field and a select option where the user can select the
category of the job to narrow the result of the search query.

3.3.2 Home and Search Result Page

The home page is the main page of the website. It is the first page that is opened
when the user enters the URL of the website. On this page, there is a left and
right side. The right side of the page shows the social media page of the company
and the left side contains the search box of the website and below that, there is
the list of latest jobs. FIGURE 12 shown below is an image of the home page of
the website.

FIGURE 12. The home page of the website.

21
The search page of the website is similar to the home page where the filtered list
of jobs is shown according to the search query and search category selected by
the user. This page also has a search box as same as the home page. When
there are no search results found, then the page shows a “No results found” mes-
sage as shown in figure 13 below.

FIGURE 13. The search result page of the website when no results are found.

FIGURE 14. The search result page of the website when at least one result if
found.

22
FIGURE 14 shown above is an image of the search result page that appears
when the user searches for jobs or company and at least one result is found with
the query that was entered by the user.

3.3.3 Contact Page and Footer

The contact page of the website is used by the user to contact the owner of the
website. The page has a Google map framed on the left and the contact form with
the field to put full name, email, and message by the user. When the user sends
the message, it is sent to the email of the owner of the website.

FIGURE 15 shown below shows the UI of the contact page.

FIGURE 15. Contact Page of the website

FIGURE 16. Footer of the website.

23
FIGURE 16 shown above is an image of the footer of the website. In the footer,
a detail about the company is shown with the link to redirect to the Facebook
page of the website. It also has quick links to make it efficient for the user to visit
through different pages. Furthermore, it has the location section, where the loca-
tion, phone, and email of the company are shown. The data of the location comes
from the database. Additionally, the company name, the year, powered by is
shown at the bottom of the footer.

3.3.4 Login and Register Page

The login page is used to log in the user into the website to apply for the listed
jobs. For the user to log in, they first need to register into the website which can
be done by visiting the register page of the website. On the register page, users
have to enter their details, such as full name, email, password, address, phone
number, education level, job location and job field they want to work in, vehicle
and license availability, and their picture. After that, the user can log in using the
email and the password they used to register on the website.

FIGURE 17. Login Page of the website

24
FIGURE 17 shown above is the form that is on the login page of the website.
Once the user is logged out, then it informs the user that they are logged out by
showing the message as in the above figure.

FIGURE 18. Register page of the website.

25
FIGURE 18 shown above is the form that is on the register page of the website.
The form informs the user about the success or failure of their registration by
showing an alert message.

3.3.5 Admin Panel of the website

The admin panel can be accessed only by authorized people. This panel is used
to manage the content of the website. Initially, when the admin panel is visited, it
is redirected to the login page of the admin. Once the admin is logged in, then it
redirects the page to the “change-password” page of the website where the admin
can change the password for the admin login. The panel also has the sidebar to
go to different admin pages of the website.

FIGURE 19 shown below is an image of the “change-password” page for the

admin panel.

FIGURE 19. Change password page for admin panel.

26
FIGURE 20. Create a new category page.

FIGURE 20 shown above is an image of the category page where the admin can
add a new category and edit and delete the existing categories.

FIGURE 21. Manage Job Location page.

FIGURE 21 shown above is an image of the job location page where the admin
can add new job locations and edit and delete the existing job locations.

27
FIGURE 22. Manage an education level page.

FIGURE 22 shown above is the page where the admin can add new education
levels to the list and manage the existing levels.

FIGURE 23. Add a new job page.

28
FIGURE 23 shown above is a page where the admin can add new job posts. The
form consists of an input field to write the job title, name of the company, category
of the job, URL and logo of the company, and additional information.

FIGURE 24. Company details update page.

FIGURE 24 shown above is the page that is used to edit the detail of the com-
pany, such as phone/mobile number, email, and address. This data is shown at
the footer of the website.

29
4 CONCLUSION

The main aim of the thesis was to design and develop a responsive website with
the PHP core language, MySQL, and HTML for Bitmap IT Solution. The idea of
the project was to build a website where the user can search for different jobs in
various cities of Nepal. Apart from the difficulties faced during the developing and
learning phase, the main aim of the thesis project was achieved by the author.
The implementation process and development of the website are explained in
Chapter 3.

The project allowed the author to learn new skills, such as Content Management
System, and Database Management. All the job seekers and job providers can
easily search for the job and put the job vacancy on the website respectively. The
implementation of the website is dynamic, and the admin panel can manage the
content as required.

During the development of the website, the author learned that it is easier to man-
age the content of the website if the website has an admin panel that is only
accessible to the owner of the website. The author also learned to implement the
CMS on the website and different types of implementation method that can be
done in PHP, such as PDO (PHP Data Object) and MySQLi. The author used
MySQLi to connect PHP with the database.

The final result of the website was tested among different users to test the effi-
ciency, interactivity, and attractiveness of the website. According to the users, the
website was simple yet elegant looking, user-friendly, responsive, and informa-
tive. Some users also suggested implementing the dark mode on the website to
make it more attractive and easier to use in dim lights. The process and method-
ology that were described above in Chapter 3 can be used by others to design
and develop similar concept websites.

30
The implementation of the website was completed successfully. Apart from some
features, the objective and the result of the project is the same. However, there
are still some features that can be implemented in the project. The features, such
as auto-suggesting jobs according to the location of the user, filtering jobs by city,
category, and application dates, implement the dark and light mode system.

In conclusion, the design and development of the website and writing of this re-
port was a great learning and working experience for the author.

31
5 REFERENCE

1. W3schools. HTML Syntax. Date of retrieval 11 August 2020

https://www.w3schools.com/html

2. CODE ACADEME. CSS Syntax. Date of retrieval 12 August 2020

https://ukacademe.com/WebDevelopment/CSS/CSS_Syntax

3. Tutorial Points (I) Pvt. Ltd. JavaScript. Date of retrieval 20 August 2020
https://www.tutorialspoint.com/javascript/javascript_tutorial.pdf

4. W3Schools. JavaScript Function. Date of retrieval 20 August

https://www.w3schools.com/js/tryit.asp?filename=tryjs_functions

5. Sitebay.com. Bootstrap introduction, why use Bootstrap. Date of retrieval

6 September 2020.
https://www.sitesbay.com/bootstrap/index

6. W3Schools. BootStrap Example Date of retrieval 7 September 2020

https://www.w3schools.com/bootstrap/bootstrap_examples.asp

7. Wikipedia, MAMP. Date of retrieval 9 September 2020.

https://en.wikipedia.org/wiki/MAMP

8. PhpMyAdmin.net About, Features. 9 September 2020

https://www.phpmyadmin.net/

9. Tutorial Points (I) Pvt. Ltd. PHP Tutorials. Date of retrieval 9 August 2020.
https://www.tutorialspoint.com/php/php_tutorial.pdf

10. FreeCodeCamp.org. Best Php Examples. Date of retrieval 9 August 2020.

https://www.freecodecamp.org/news/the-best-php-examples/

32
11. Dr. C. d'Amat. Introduction of MySQL. Date of retrieval 18 September
2020.
http://www.di.uniba.it/~cdamato/corsi/BasiDiDati-Materiale/In-
tro%20a%20MySQL.pdf/

12. Guru99. Common Features of PHP. Date of retrieval 19 September 2020

https://www.guru99.com/what-is-php-first-php-program.html

13. GitHub. How-to Geek. Date of retrieval. 15 September 2020.

https://www.howtogeek.com/180167/htg-explains-what-is-github-and-
what-do-geeks-use-it-for/

33