Build a web application with php

Building a web application

with php

Santiago valencia Arango

Software engineer student
University EAFIT
August 2020
Build a web application with php

1 Introduction

The PHP language (whose name is an acronym for PHP:

Hypertext Preprocessor) is a interpreted with a syntax similar to
C++ or JAVA. Although the language can be used for
to make any type of program, it is in the dynamic generation of
web pages where it has reached its peak of popularity. In
particular, it is often embedded in HTML pages (or
XHTML), being the web server in charge of executing it.

Html is a markup language, used for the elaboration of web

pages. It defines a basic structure and a defined syntax for the
elaboration of web pages, where the content of a web page is
defined, such as text, images, videos.

The union between these two technologies called back and front
end, is that it is possible what is known as web pages

In this tutorial you will learn how to create a simple web

application that allows you to register, view, modify and delete
pet appointments

This document teaches how to build a web page, where previous

knowledge in programming and other technologies is needed to
carry out
Build a web application with php

1.1 Requirement

For the development of a web application with php you must have
minimum knowledge in the following sections:
- Basic knowledge in programming
-Basic knowledge in html
-Xampp
-Basic Knowledge in mysql/sql(optional)
- a text editor of your choice

2 configuration of the working environment

2.1 Xampp installition
to install in windows you can follow this tutorial
https://www.wikihow.com/Install-XAMPP-for-Windows

to install in MacOs you can follow this tutorial

https://www.webucator.com/how-to/how-install-start-test-xampp-on-mac-osx.cfm

2.2 Creation of directories to host the Project

we will go to disk c, where the xampp folder will be located and enter
Build a web application with php

We will enter the htdocs folder

We will create a folder called proyects where we will host all our
projects

We will create a project folder and within it we will create a structure

similar to this
Build a web application with php

2.3 To run the project

To run both php and sql you need to install a php interpreter and a
database manager for sql, but we did this previously by installing
xampp, with this we will see how to run our websites on a local server
in order to visualize the changes we will be making
the first thing we must do is turn on the local server and the
administrator from the xampp application to turn it on just press start in
the apache and mysql modules

When you want to access the website from the browser you will have
to put localhost/ + the route that you have saved your project, as we
define that would be projects, the route that appears would be

For the creation of databases you can use phpmyadmin that comes
included in xampp, there you can create and store the databases with
which we will work, it is as easy as giving new database and put the
script or put the columns you want
Build a web application with php

3. First steps in development

3.1 HTML
Index
The first thing we must do is define our basic html structure in our
index file

We will add a header containing the title of our website

Build a web application with php

We will add the main structure which is the form where we will receive
all the data entered into the website, with the different fields that are
needed.
the access.php declared in the form is where the data will go to be
entered into the database, this will be declared and created later

The index would be as follows, later css will be added to give it style
p

Modify pets
We will create a new page for the modify quotes view, where we will
copy the code that we had in the index page, modifying the title of the
page, the title of the header, the page where the data will be sent in the
modification and the link where we will be redirected in the back button
Build a web application with php

Show
In this view as in the other one we will define the head that contains the
link to the css file, the title and other important things

We will define a table where we will organize the data that will be
shown
Build a web application with php

3.2 CSS
we already have the basic html structure now we need to style it to look
nicer, we will create a .css file in the css directory, we'll use this file to
style all the views we have

in this case we will modify the body of the page, things like giving it a
background,a font, and assigning an image as background
Build a web application with php

with this change we should be left with something like this

We will modify the header to give it more space and make it look
better, we will give it an automatic margin so that it adapts to the
screen, we will make it have a transparent background so that the
background can be seen, a padding so that it gives more space, and a
margin-bottom so that it is separated from the main content

The result is as shown in the image the header has much more space
with respect to the main content
Build a web application with php

We will modify the main container that contains the main section in this
case the registration form, which occupies 85% of the total width of the
screen and its maximum size is 500px to be more responsive design
an its margin is 0 up and down and automatic on the sides
Build a web application with php

As you can see in the image the main form is centered and all inputs
are separated from each other, so we changed the background to
white

We will change the style of the buttons, so that it looks modern and
elegant

you can see in the image the button takes much more space and its
color is blueviolet also the color and size of the font are modifie
Build a web application with php
Build a web application with php

Here we will modify the second button, since the first one was of
submit type, but the second one we are using a <a> tag so that it
behaves like a button, we will do the same as with the previous button
modifying its dimensions, its background and its font color

The button will be the same color as the previous one, and the same
font color you can see
Build a web application with php

as we are using the same css file for all the views, the changes we
have made also affect the other views, for example in this case the
view that will show the appointments looks like this

What we will do is modify the table to give it style, we will give it things
like more space, a background so that it differs from the bottom of the
main page, we will also make the columns have their own space so
that it looks much cleaner
Build a web application with php

the result we will get is this, the space between rows and columns is
bigger and looks much more organized than before

3.3 SQl
We will need a sql database, where we will store the data of the
received quotations, as we have previously installed xampp we also
have local databases that allow us to store data, what we will do is
create a database with the following table
Build a web application with php

3.4 PHP
We will now move on to the functional part of the application where it
will process the data and communicate with the database. Unlike other
php programming languages the way to declare variables is with the $
symbol, for example we will declare a variable that will store an integer
number : $num = 10;.
Something to keep in mind is the inclusion of php code within html
pages, usually when working with php you must include this tag <?php
at the beginning of all documents that include php code, if a page only
include php code is not necessary to close this tag because it will not
cause conflicts, but when you want to include code as in the case of
some views that we have in the web page should be closed the php?>
tag so there is no conflict
The first thing we will do is the connection to the database, in the first
red box we have the connection data to the database, such as the
host, the user, the password and to which database we will connect. In
the second box we have the connection query to the database, where
we will have to pass the variables declared before and finally we have
a conditional that will check if the connection to the database has
existed or fails for any reason
Build a web application with php

Then we will have to make the file that will send the data to the
database.
In the first red box we have an include that imports the code to connect
to the database, then we'll need to declare variables that will store all
the data we'll receive from the form in the views, in the third box we'll
make the sql query that will enter the data into the database and finally
we will make the test successful or fail for some reason

also we will have to make the code that will be in charge to update the
data when we want to make some modification of an appointment, the
code that we will make will be exactly equal to the previous one the
only thing that we will change is the query in charge to make the
update to the data base.
Build a web application with php

Then we will need a file that is responsible for removing the

appointments that are stored in the databases, the only thing to run the
removal of a record from the table is to have the id of the record you
want to have, in this case we receive it by GET from the view and
make the query to remove the record selected record
Build a web application with php

Then we will make the file that will bring the data from the database to
show it in the view, this is easier than the previous one because we
only have to bring everything from the database with a simple query

We arrive to an important part in the application since we must include

php code next to html code, making us have to apply the above
mentioned with php tags
The following program will search the database for a specific record
and store its columns in each of the variables and then modify them
Build a web application with php

Then what we'll do is to pass to each entry of the form the value of
each of the columns so that they can be modified, as you can see in
the image we're passing it with the tag, php code previously declared
and with

Finally we will make the php code in charge of bringing records from
the database and display them in the view, as seen in the image we
have a query and each column what we do is enter the data for that
column, as the example above this section of php code is within html
code
Build a web application with php

4. Conclusions
If you develop this tutorial step by step as indicated will come to have a
simple application for the assignment of appointments to pets, this is
equally modifiable this tutorial is only a guide as developing a website
but each person is free to customize, just let your imagination fly, and
remember if you can imagine it you can program it
The source code of the web page is housed in the following repository
https://github.com/xltiagoxl/Petsu. This code is a base from which to
guide you through multiple projects