Web application for the complete management of leasing ...
Transcript of Web application for the complete management of leasing ...
Grado en Ingeniería Informática
Trabajo de fin de grado
WEB APPLICATION DEVELOPMENT FOR THE
COMPLETE MANAGEMENT OF LEASING
APARTMENTS DESARROLLO DE UNA APLICACIÓN WEB PARA LA GESTIÓN
INTEGRAL DE PISOS EN ALQUILER
Autor: Diego Movilla Gayoso
Tutor: Ramón González Del Campo Rodríguez Barbero
Facultad de Informática
Universidad Complutense de Madrid
Curso 2020-2021
Web application for the complete management of leasing apartments
pág. 1
Índice
1 Abstract _____________________________________________________________ 3
1.1 Español .............................................................................................. 3
1.2 English .............................................................................................. 4
2 Keywords ___________________________________________________________ 5
2.1 Español ............................................................................................. 5
2.2 English .............................................................................................. 5
3 Introduction _________________________________________________________ 5
3.1 Background ....................................................................................... 5
3.2 Objectives ......................................................................................... 6
3.3 Work plan ......................................................................................... 7
4 Prior work to the development of the web application _________ 7
4.1 Interview ........................................................................................... 7
4.2 Brief market research ........................................................................ 9
5 Development of the web application ___________________________ 11
5.1 Tools used ....................................................................................... 11
5.2 Technologies used .......................................................................... 12
5.3 Features ........................................................................................... 15
5.4 Database structure ........................................................................... 30
5.5 Web security ................................................................................... 32
5.6 SEO positioning .............................................................................. 39
6 Future work _______________________________________________________ 49
7 Conclusions _______________________________________________________ 51
7.1 Español ........................................................................................... 51
7.2 English ............................................................................................ 51
8 Web QR code _____________________________________________________ 52
9 Bibliography ______________________________________________________ 53
Web application for the complete management of leasing apartments
pág. 2
Web application for the complete management of leasing apartments
pág. 3
1 Abstract
1.1 Español
La creación de esta aplicación web surge con la necesidad de facilitar y
optimizar el tiempo empleado en la gestión integral de pisos en alquiler.
Cada vez es más común adquirir y alquilar propiedades. La administración de
estas puede llegar a convertirse en una maraña de facturas, papeles, citas y pagos
que con el paso del tiempo se va agravando.
Las soluciones que podemos encontrar a día de hoy ante este problema son
básicamente dos: delegar el proceso en un tercero, lo que supone un gasto extra que
mucha gente no está dispuesta a pagar, o buscar alguno de los pocos softwares que
nos ofrece el mercado pero que son muy complejos y no permiten clasificar y dividir
la información de cada piso de manera sencilla y por tanto no solucionan la base del
problema: la organización.
Entonces, ¿Por qué es innovador este proyecto? La principal característica de
esta aplicación es la posibilidad de informatizar todo el proceso que conlleva el
arrendamiento de uno o varios pisos y poder gestionarlos tú mismo sin depender de
un tercero. No se necesitan cientos de campos de información o calculadoras de
beneficio neto y bruto como tienen los pocos softwares que existen en el mercado, lo
que gente inexperta que alquila pisos necesita es poder tener sus archivos, gastos
controlados e información basica organizada.
En resumen, con EnGestiona podrás guardar y clasificar la información de cada
uno de los pisos por meses, subir archivos, añadir notas, llevar un control de los
gastos de cada mes junto a la cantidad pagada y debida, interactuar con tus
compañeros a través de foros generales y específicos para cada piso, etc. y así poder
acceder a ella cuando y donde se necesite de manera rápida e intuitiva.
El código fuente de este proyecto se ubica en la siguiente dirección:
86 - Desarrollo de una aplicación web para la gestión integral de pisos en alquiler -
Google Drive
Web application for the complete management of leasing apartments
pág. 4
1.2 English
The creation of this web application arises from the need to facilitate and
optimize the time spent in the entire management of rental apartments.
It is becoming more and more common to acquire and rent properties. The
administration of these can become a tangle of invoices, papers, appointments and
payments that worsens over time.
The solutions that we can find today to this problem are basically two: delegate
the process to a third party, which is an extra expense that many people are not
willing to pay, or look for one of the few software that the market offers which are
very complex and do not allow classifying and dividing the information of each
apartment in a simple way and therefore do not solve the basis of the problem: the
organization.
So, why is this project innovative? The main feature of this application is the
possibility of computerizing the entire process involved in leasing one or more
apartments and being able to manage them yourself without depending on a third
party. You don't need hundreds of fields of information or calculators of net and
gross profit as the few softwares that exist in the market have. What inexperienced
people who rent apartments need is to be able to have their files, expenses controlled
and basic information organized.
In summary, with EnGestiona you will be able to save and classify the
information of each of the apartments by months, upload files, add notes, keep track
of the expenses of each month along with the amount paid and owed, interact with
your colleagues through general and specific forums for each apartment, etc. and
thus be able to access it when and where you need it in a fast and intuitive way.
The source code for this project is located at the following address:
86 - Desarrollo de una aplicación web para la gestión integral de pisos en alquiler -
Google Drive
Web application for the complete management of leasing apartments
pág. 5
2 Keywords
2.1 Español
Alquiler
Gestión
Pisos
Propiedades
Aplicación web
Software
Online
2.2 English
Renting
Management
Apartment
Properties
Web application
Software
Online
3 Introduction
3.1 Background
Although nowadays it seems rare to find tasks that are done manually, there
are certain jobs that small groups of people tend to carry out in this way. It was when
I started to create my first projects at the university while I was understanding what
my family was doing when I realized that all the rental management of the apartments
that they managed was done manually.
By the time I had to choose my TFG I started to investigate and ask why they
did not use any software or delegate this management to a third party. Their answers
were among others: "We want to do it ourselves", "There is no software on the Internet
... and the few I have seen are paid and do not do what we want". At this point, I
decided to start the development of a web application managing rental apartments.
Web development is not only one of the fields that most fascinates me in
computer science, but developing a TFG of something that I like to do, something that
is innovative and even something that can directly help my family seemed to me the
best way to finish my career in computer engineering.
Web application for the complete management of leasing apartments
pág. 6
3.2 Objectives
The overall objective of this project is the development of a web application
that allows to carry out the entire process of managing one or more rental properties
in a fully computerized way.
To do so, we have to do a preliminary work that will consist of two phases:
1. A brief interview with one of my relatives (Gerardo Gayoso) who
currently manages rental apartments without any kind of computer
program, to understand how the rental world works and what are the
main problems he encounters.
2. Analyze with Gerardo the different solutions that exist today on the
Internet in order to develop our project in the most innovative and
useful way possible.
Once we have clear ideas about how and what we want our website to look
like, we will proceed with the development. The main features that this application
has to offer are the following:
Add properties.
Store information for each property (renter's name, phone
number, contract date, etc.).
Upload general files for each property (contract, photos, renter
DNI).
Upload monthly files for each property (water bill January 2021,
extra expenses June 2021, etc.).
Add general notes, specific notes for each apartment and
specific notes for each apartment in each month.
General forum and specific forum for each apartment to
communicate with other administrators you work with.
Month by month control of the different expenses (payment
date, amount due and paid, etc.).
In conclusion, the project must be based on two fundamental principles:
organization through simplicity. In this way, to find for example the information for
February 2019, it will be enough to go to that date and you will find the expenses,
documents, notes, etc. for that specific date. Inexperienced people do not need half of
what is offered by other very complex Internet programs that even those that
apparently useful allow you to upload files for each apartment, you end up after a
while with hundreds of documents in the same section without being able to structure
the information.
Web application for the complete management of leasing apartments
pág. 7
3.3 Work plan
Once we have the formalized idea of the project we are going to develop, we
have to elaborate a work plan that includes the tools and technologies we are going to
use. Our website will be based on the main web development technologies such as
HTML5, CSS, JavaScript and PHP and powered with frameworks, libraries and
techniques such as JQuery, Bootstrap or Ajax. In addition, we will use a light, fast and
simple configuration text editor such as Sublime Text 3. Finally, we will download
the XAMPP tool, which consists of a local server (Apache), a PHP interpreter and a
data management system (MySQL).
As soon as the web application is finished and fully functional, we will proceed
to hire a real server with a domain. This way we will be able to access the web from
any device with Internet access. To be able to upload the different files to the server
we will use FileZilla.
Even if our website is yet not known and does not have valuable information
about our users, once it is visible to everyone, the next step will be to implement extra
security measures. Whether we have one or hundreds of users, avoiding service
interruption is essential in an application. Any user with minimal knowledge of web
security could cause major problems in the proper functioning of the site.
Finally, and as a last phase, we will enter the world of SEO. We will apply
techniques oriented to achieve that the Internet search engines place us in the first
positions when users enter our keywords ("rental", "management", "apartments", etc.)
in the browser.
4 Prior work to the development of the web application
4.1 Interview
When I decided to carry out the project I first wanted to see what the problem
was, how it could be solved and what alternatives existed at that time. For this, I
counted on Gerardo Gayoso, one of the members of my family who manages the rental
apartments, to whom I asked several questions:
Diego Movilla: "What exactly do you do?"
Gerardo Gayoso: “Well, nothing out of the ordinary. We have several
apartments and we rent them to people.”
Web application for the complete management of leasing apartments
pág. 8
Diego Movilla: “What is your problem?”
Gerardo Gayoso: “We have been like this for many years and we are used to
it... but the fact of carrying all the management by hand is a mess.”
Diego Movilla: “Why?”
Gerardo Gayoso: “Well... keep in mind that we receive 'X' invoices every month
from each apartment, we have to give them to the renters and each invoice arrives on
different days. Then the issue of the renters -he laughs-, everyone pays when and how
much they want.”
Diego Movilla: “And can’t you force them to pay on a specific day?”
Gerardo Gayoso: “That is the idea, but there is a big step from theory to
practice. In the end we are a family and not a company, we are close to the renters
and we understand that they may have financial problems. Sometimes they pay us a
part one month and another one another month... Besides, once the contract is signed,
you cannot kick them out within a couple days...”
Diego Movilla: “And what about delegating in a company or using some
Internet program?"
Gerardo Gayoso: “There are companies that manage it for you, yes, but as I
said before, we like to be close to our tenants and do everything ourselves. And about
the programs, the few we've seen are either paid or quite expensive, or they do not
solve our problem.”
Diego Movilla: “Why not?”
Gerardo Gayoso: “Because we want something simple, that for each apartment
you can have the basic information, upload files, and see month by month information
about the payments. These pages allow you to have your apartments stores, yes, but
for each one of them store information that we really did not care about and did not
solve our main problem, which was the mess with the payments and the files
corresponding to each apartment and to each month.”
Web application for the complete management of leasing apartments
pág. 9
4.2 Brief market research
Market studies allow you, among other things, to know how many companies
carry out the activity you intend to develop with your project, as well as their
specifications. When creating a service, it is essential that it offers something
different, and for this, you have to know what already exists.
If we want to find in Google an application to manage our apartments, the
normal thing would be to put in the search engine something similar to “Gestionar
pisos en alquiler” (“manage rent apartments"). If we look at the first results:
We can see that none of them offers us what we are looking for. Like these
first five, if we continue going down, what we find are companies that manage our
rental apartment for us or help us to rent it, but none of them offers us a program to
manage it ourselves.
To find the first result that comes close to what we want to develop, we have
to go to one of the last results: www.rentila.es
Web application for the complete management of leasing apartments
pág. 10
We have created an account and we have tested with Gerardo Gayoso the
services that it offers.
After analyzing the web and trying to recreate real cases, we came to the
following conclusions:
It allows to add apartments, visualize them in a table and search them quickly.
We can see information of each apartment in detail.
We can add annual expenses and income for each apartment.
We can add notes and upload files for each apartment.
Too complex. Many sections that you do not know what they are for and others that are
unnecessary.
You can see the expenses but not keep a clear management of them month by month.
You can upload files but not classify them. If every month you upload 5 invoices, the
contract, photos, etc ... there comes a point that you do not know how many you have and
where each one is.
In short, it does not solve the problem of having a month to month control and a clear
classification for each apartment.
As with this page, the rest of the applications oriented to the management of
apartments that we have found on the Internet have the same problems. Either they
Web application for the complete management of leasing apartments
pág. 11
are too complex, or they are paid, or they do not focus on the problem that we want
to solve: organization through simplicity.
Once we have understood the problem, analyzed the market and obtained a
clear vision of what we want and how we want to do it, it is time to start developing
our project: www.engestiona.com
5 Development of the web application
5.1 Tools used
XAMPP [1]
The basic things you need to have to start developing a web page are a server,
a database and a PHP language interpreter. XAMPP is a package that contains, among
many other things, all of the above. With it, we can create and display our website
without having to buy a domain and host it on a real server. Like XAMPP, there are
other very similar tools. However, due to the ease of installation and its minimal
configuration it is one of the best options.
MySQL [2]
Like most web applications, our project will need to store information. For
this, we use databases. MySQL is a database software that comes installed on
XAMPP. The main quality of MySQL is its speed despite supporting sizes of around
50 million rows. It is also one of the most secure databases as it can give certain
privileges to users or groups of users, encrypt passwords, have several layers of
security, etc. In addition, it has a free user interface, very intuitive and easy to use
(PhpMyAdmin). Finally, MySQL is the second most popular database today (May
2021). [3]
PhpMyAdmin [4]
As mentioned above, it is not only necessary to have a database, but it is also
important to be able to view the information in an interface.
Web application for the complete management of leasing apartments
pág. 12
Sublime Text 3 [5]
Once we have all the above, the next thing is to have a text editor to write code.
In this section comes a lot of personal taste and I have chosen to use Sublime Text 3.
It is a very light program, easy to install and requires no configuration. It highlights
all kinds of language with colors to detect bugs at a glance. You can add infinite
functionalities ('plugin' in computer argot) that make your life much easier.
Hosting [6]
As we said at the beginning, in order to start developing a web page we needed
a web server. At first, we used XAMPP, which provided us with a server on our
computer. However, the page is not visible to the whole world. For this, we need to
use a real server. There are many hosting services on the market. I have chosen to use
"Hostalia". Its security-quality-price ratio, the possibility of 30 days trial, its graphical
interface, customer service and the possibility of choosing a domain
(www.engestiona.com) for free have made me choose their service.
FileZilla [7]
Once you have your website finished and a domain and a hosting you need to
upload your website (files and databases) to the contracted server. For this, I have
used FileZilla. This way we can connect to our server and add, delete or download
files.
VirtualBox – Kali Linux – WhatWeb [8] [9]
In order to use certain web analysis tools we need the Kali Linux operating
system. However, instead of installing this operating system directly on our computer,
VirtualBox is an application used to create a virtual machine with the operating system
of our choice inside our computer (Windows in our case). As a curiosity, we have
used the Kali Linux "WhatWeb" application to obtain information about our website,
specifically, to know where it is hosted.
5.2 Technologies used
HTML5 [10]
HTML5 is the latest version of the HTML language. HTML is not a
programming language but a standard used to define the structure and content of a
web page. It is something like the skeleton of a person.
Web application for the complete management of leasing apartments
pág. 13
CSS [11]
Once we have the structure of the web, the CSS code adds the entire
customization layer. That is to say, it offers the final aspect: colors, sizes, typeface,
etc. Following the previous simile of the person, the CSS would be the skin.
JavaScript [12]
Finally, once we have the skeleton and its appearance, we need it to do actions,
to move. This is exactly what JavaScript does. This programming language allows us
to implement all the functions of a web page. When you click on a button and a form
appears, when you play a video etc. To finish with the simile, we can say that
JavaScript are the muscles.
Bootstrap [13]
As everything in computer science, web development also has tools that make
life easier for the programmer. Thanks to the Bootstrap framework, we can make any
website responsive to all types of devices and screens. In this way, we do not have to
have a different code for each screen size, just by including its CSS and JavaScript
files in your project we can use everything it offers. In addition, not only helps to
make your website more responsive, but also offers a multitude of features with
JavaScript.
JQuery [14]
JQuery is a JavaScript library. It is yet another tool for web development. What
is JQuery for? The answer is very simple: it does exactly the same as JavaScript, but
in a much more efficient way and with much fewer lines. JQuery's official motto is
"Write less, do more".
AJAX [15]
AJAX is a set of web development techniques that allow web pages to work
asynchronously. That is to say, with AJAX we can send and obtain data from the
server without the need to reload the page. This is a fundamental aspect in a quality
web page, since, if every time the client unconsciously needs or modifies information
from the server, the page has to be reloaded, the user experience would lose a lot of
quality and fluidity.
Web application for the complete management of leasing apartments
pág. 14
PHP [16]
PHP is a programming language widely used in web development. PHP code
can be embedded within HTML. It is mainly used to generate dynamism in web pages.
In addition, being a programming language (unlike HTML), it offers the possibility to
create loops, conditions, etc. PHP is principally used to interconnect the user interface
with the server. It is very common to use it when working with data from the database
(hosted on the server) and printing them on the screen.
SQL [17]
SQL is a language used to process database data. With it, we can insert, delete,
update and get records from our tables. Combined with PHP, it is one of the most
widely used in web development for managing database information.
PHPMailer [18]
PHPMailer is a popular PHP library used to send emails. This library simplifies
the complicated process of creating an email in PHP by providing functions for
creating and sending emails. PHP has a default mail() function. However, it does not
allow some of the basic functions such as file attachment.
API Google Maps [19]
We have used the Google Maps API to offer one more functionality to the user.
In this way, we can access services that Google provides us with such as placing on
an interactive map where each floor of the client is located. To be able to use it is
necessary to register in Google API Console, configure aspects related to the use of
the API and finally Google will show us a key that we will have to add in our code.
This registration has a monthly cost. In our case, this cost is free because we do not
exceed the minimum number of requests to the API.
Web application for the complete management of leasing apartments
pág. 15
5.3 Features
In this section, we are going to explain the process that an EnGestiona user has
to follow to carry out the different main functionalities.
First, when a user accesses www.engestiona.com will only be able to login or
sign up.
SIGN UP
The first thing that a user will have to do to be able to make use of the functions
of EnGestiona will be to Register. To do this you will have to go to the
"Registrarse" tab on the top bar and fill in the fields.
Web application for the complete management of leasing apartments
pág. 16
If the user enters an email address already registered or the passwords do not
match, he/she will be notified. Otherwise, the user will access the main area.
LOG IN
To log in, simply go to the "Acceso" tab in the top bar and enter the data previously
registered.
If the user enters the wrong email-password combination, he/she will be notified.
Otherwise he/she will access the main area.
Web application for the complete management of leasing apartments
pág. 17
Once in the main area, users can start adding their apartments.
ADD AN APARTMENT
To add an apartment, click on “Agregar nuevo”.
Web application for the complete management of leasing apartments
pág. 18
A small modal will appear with the basic information to be filled in, which can be
expanded later.
Once added, it can be displayed in the table. We can also edit it, delete it or change
its status by clicking on the respective icons. We can even filter dynamically by
street or comments in the "Filtrar por..." bar.
In addition, if we click on "Modo mapa", we can see all the properties on an
interactive map with additional information.
Web application for the complete management of leasing apartments
pág. 19
ADD A GENERAL COMMENT
The idea of general comments is intended for those accounts that are managed by
several people. Therefore, if I want to add a comment, I put my name in the first
field, the comment in the second field and click “Añadir”.
I can even check the "Notificar al correo" box so that an email with the message,
the user and the date is sent to the email address of the account and so all managers
are notified.
Web application for the complete management of leasing apartments
pág. 20
Whether we click on an apartment on the map or double-click on an apartment in
the table in the previous section, it will take us to the detailed information of the
apartment, where we can update the apartment data, upload files related to the
apartment or make specific comments about the apartment.
Web application for the complete management of leasing apartments
pág. 21
CHANGE APARTMENT DETAILED INFORMATION
As soon as we enter the details of the apartment, we find a form with more specific
data. We can fill in the fields we need and update it by clicking on “Actualizar datos”
UPLOAD A FILE FOR AN APARTMENT
To the left of the detailed information of the apartment we have a section with
uploaded files. Just click on "Subir archivo" and you will be able to upload 1 or
more files.
Web application for the complete management of leasing apartments
pág. 22
For security reasons, certain extensions are not allowed (.exe, .bat or .php, for
example). In case of uploading one of them, it will display an informative message.
It should be noted that if the user wants to view a file, he only has to click on it
and it will open in another tab, where he will be able to download it if he needs it .
Web application for the complete management of leasing apartments
pág. 23
ADD COMMENTS FOR AN APARTMENT
Just as in the main area with all the apartments where we could add general
comments, we can add comments to each apartment in the same way and notifying
the e-mail address.
INTERACTIVE MAP: GOOGLE MAPS
At the bottom of this page and thanks to the API offered by Google, we have
incorporated to our website an interactive map in the purest Google Maps style
with the location of the specific apartment.
Web application for the complete management of leasing apartments
pág. 24
ADD EXPENSES
Finally, we can access in a sort of hierarchy to the lowest level. In it, we will have
the information related to the expenses month by month. To do this, just click on
"Ver gastos" in the detailed information screen of the apartment recently
explained.
As soon as we enter, in the upper area we find a table where the expenses of the
apartment and related data for a specific month and year are displayed. To change
the date, just drop down the month or year field in the upper right corner.
Initially this table is empty, but we can add data by clicking on the icon of the
column “Editar”.
Web application for the complete management of leasing apartments
pág. 25
By clicking on this icon, a modal will appear with the fields to be filled in as
needed.
We can see in the upper part of the modal how we are adding the information
corresponding to the expense “Agua de mayo 2021” (May Water 2021).
After adding several expenses for that date, the table would look like the
following:
Web application for the complete management of leasing apartments
pág. 26
As we can see, the "Alquiler" field appears next to a red icon. This means that the
tenant owes money (as it appears in the "Cantidad debida" column). If instead of
being in May, we change to June, this icon will still appear in "Alquiler" so as not
to forget that there is (at least) one month where the tenant owes this expense.
Let us take a practical example: Suppose we are in July and we see an expense due
icon. How would we know which month it is from? Very simple. Instead of going
month by month, we have the possibility to double click on the expense in
question. This will show us the yearly table (by month) of that expense and we can
see which month or months it is due. This table would look like this:
Web application for the complete management of leasing apartments
pág. 27
We can see very clearly how the tenant owes 550€ in the months of April and May.
In both the annual and monthly tables, we have the possibility of exporting to
Excel the data that is in the table at that moment by clicking on "Pincha aquí" in
the lower left area of the table. The Excel would look as follows:
Web application for the complete management of leasing apartments
pág. 28
Finally, it is worth noting that at the bottom of the page we have an annual and
monthly graph that is automatically updated every time we modify the tables. If
we are with the table of the expenses in a specific month, we will see the
following graph (water, electricity, community and extra expenses for that
month).
On the other hand, if we have double clicked on an expense in the monthly
table and therefore we are visualizing the annual table of that expense we
will see the following graph (for example, water expenses by months in the
selected year).
Monthly chart
Anual chart
Web application for the complete management of leasing apartments
pág. 29
UPLOAD FILES PER MONTH
Just as we could upload general files of an apartment, we can also upload specific
files of a flat for a specific month. In this way, we have separate general documents
such as the contract or photos of the tenants from month-specific documents such
as bills.
As in the general files, by clicking on one of them you will be able to view and
download it if needed.
Web application for the complete management of leasing apartments
pág. 30
5.4 Database structure
As the figure illustrates, the different tables are related to each other. This is
achieved by adding a foreign key in each table referring to a field in another table. In
this way, the "pisos" table is related to the "usuarios" table by means of the user's "id".
In addition, we have to take into account that when we delete or update a user
or an apartment, all the information related to it also has to be deleted or updated from
the database.
For all this, three extra statements have to be added when creating a table:
Web application for the complete management of leasing apartments
pág. 31
With the first line, we specify that the "usuarioId" field refers to the "id" field
of the "usuarios" table. The next two lines are used so that in case of updating or
deleting the user, the "pisos" table is also updated or deleted. This logic applies to the
rest of the tables. If we delete an apartment, we also delete its comments
("comentariosPiso" table) and its expenses ("gastosPisos" table).
Finally, we are specifying the MySQL engine. Depending on the version used
the default engine changes. The most known are "MyISAM" and "InnoDB". That is
why it will be more advisable to use one or the other according to our needs. For
example, if SELECT queries predominate on our website, we will use "MyISAM" for
its speed. However, if there is interlinked data where deleting one of them requires
the automatic deletion of another, "InnoDB" is the best option, since it does this for
us.
In summary, if we want the "ON UPDATE/DELETE CASCADE" statements
to work, the engine has to be "InnoDB".
Web application for the complete management of leasing apartments
pág. 32
5.5 Web security
In a nutshell, web security is the measures applied to protect a website and
ensure that data is not exposed to cybercriminals.
In EnGestiona, we have taken into account the following aspects
Security certificate – SSL [20]
The purpose of the security certificate or SSL certificate (hence the acronym
"HTTPS" instead of "HTTP") is to add encryption and encoding to the data sent from
a device to our server and vice versa. That is, it ensures that the transfer of data
between the visitor and the website is a secure and private connection.
In our case, we can see that by logging on to www.engestiona.com , we have
the confidence of entering a secure site.
Web application for the complete management of leasing apartments
pág. 33
Backup copies
Even if a web application has measures in place against cyber-attacks, cyber
criminals may still manage to break into the system, not only in terms of spying or in
terms of misuse of sensitive data, but also by rewriting or deleting databases in order
to leave no traces. For this reason, it is advisable (not to say indispensable condition)
the periodic realization of backup copies of all the data. In our case, the contracted
hosting provides us with a backup copy from time to time.
We can configure the periodicity of the copy and even on which files to make
it. As we can see, we have configured a daily backup (as an initial test) of the entire
website.
.htpasswd and .htaccess files [21]
The .htpasswd file is a text file used to store user names and their encrypted
passwords. It is used together with the .htaccess file, which among many other uses ,
is used to restrict access to a directory to the users listed in that file.
Web application for the complete management of leasing apartments
pág. 34
By way of explanation, if we want to restrict the directory
engestiona.com/private/ we have to place the .htaccess file in the directory to
protect, in this case private. In addition, we have to create an .htpasswd file and
place it in any directory before private adding among other things, the path to
.htaccess.
In this way, if a user enters the path to the private directory in the search bar,
instead of showing the contents, a form with username and password will appear to
authenticate first.
In our case, we have certain protected directories, but for security reasons, we
have chosen to use an invented example to illustrate it.
In addition, to avoid that this file can be read from the engestiona.com/htaccess
browser, we can protect it with the following lines:
Username: engestiona
Password: Encrypted with MD5
algorithm
“AuthUserFile”: Absolute path to
.htpasswd
Web application for the complete management of leasing apartments
pág. 35
Aspects related to the code
One of the most well-known attacks in the world of web security is
Cross-Site Scripting (XSS). This attack targets web application code.
An attacker can insert malicious code into a seemingly harmless text
box. To prevent this, we have validated all user input before processing
it. However, it is not enough to have only one security measure against
a potential attack; it is advisable to have several layers of security.
Therefore, despite checking and cleaning the entries that a user enters
in order to prevent, for example, malicious code from being inserted
into our database, we also escape any special characters coming from
the server by using the htmlentities() function. This function converts
special characters into HTML entities. For example, ">" interprets it as
"greater than" and transforms it into ">". This way we would be
avoiding the insertion and/or execution of scripts
("<script>...</script>").
Therefore, if we enter a malicious code such as this simple script:
Web application for the complete management of leasing apartments
pág. 36
Both in the database and in the text itself, the "comment" will be stored
and displayed as follows:
Password hashing is one of the most elementary security
considerations that must be implemented when designing a web
application. If we do not apply a hashing algorithm to the passwords to
make them unreadable, any attacker who enters the database will be
able to access the users' accounts. Thus, even if he can read the
encrypted password, he will not be able to find out the real password.
To do this, simply apply the password_hash() function to the password
entered by the user to generate the encrypted password. The
PASSWORD_DEFAULT option refers to the algorithm to be used
(bcrypt). This constant is designed to change whenever a new, stronger
algorithm is added to PHP.
The password will be stored encrypted in the database.
Comment in the database
Comment in the web
Web application for the complete management of leasing apartments
pág. 37
When a user logs into his account, password_verify() must be used to
check if the password entered by the user corresponds to the stored and
encrypted password.
Uploading files to a server is something that is present in almost all
web applications. This functionality opens up a new field of hacking
for possible attackers. There are many security measures to take into
account with respect to the files. We have implemented only one
measure such as a list of safe extensions so that, if the user uploads a
file with a different extension, he will be notified that it is an invalid
extension. In this way, we prevent them from uploading files with
potentially dangerous extensions such as .exe, .php or .bat.
Web application for the complete management of leasing apartments
pág. 38
Site Request Forgeries attacks (CSRF) are those that allow the theft
of user accounts in web applications. When an attacker manages to
impersonate a user, he can perform any action that the impersonated
user could perform. To avoid authentication losses, we not only destroy
the user's session variables when he/she logs out of his/her account, but
we also create a random and unique token or identifier for each user
when he/she accesses the web.
To make sure that an action is actually being performed by the user
instead of a third party, it has to be associated with the mentioned token
that can be verified afterwards. With this new layer of security, the
attacker would have a new and difficult task: guessing the random
token.
For example, an attacker creates a malicious link that, through social
engineering, gets the victim to click on it. This link sends a request to
the www.engestiona.com server to access the script
actualizaContrasena.php. This script has no way of differentiating
where the request comes from, but it does so because the victim user
is making the real request. To avoid this, we send the token to the
"actualizaContrasena.php" script and there we verify if it is the same
as the one created when accessing.
Web application for the complete management of leasing apartments
pág. 39
As a note, we can see how in the last screenshot we are performing
three of the mentioned security methods. The token to avoid CSRF
attacks, use of htmlentities() to avoid XSS and password encryption
with password_hash().
5.6 SEO positioning [22]
SEO (Search Engine Optimization) is a set of techniques whose objective is
to optimize the visibility of a website on search engines. That is to say, to improve
the position of the website in the ranking of the results pages. This is why SEO is
one of the most important digital marketing strategies in today's world. Search
engines (Google, for example) use algorithms to rank one page before another. What
are these algorithms based on? On many factors, more than 200. A good user
experience is essential (use on different devices, error messages and friendly URLs,
etc.), performance (speed of the web), quality content, etc.
In Engestiona, we have carried out some configurations and taken into account
certain factors to get started in the SEO world:
Sitemap.xml file [23]
The first step to be able to appear in Google searches is to configure the
sitemap.xml file. This file serves to tell Google that your website exists and that you
have some URLs that you want to appear in the results. This is not mandatory and
even less for small websites, but it is always better to make things easier for search
engines so that they "give us more SEO points".
This file is very simple. Just add the URLs you want Google to index. You can
also add other files such as images if you want them to appear in Google Images
results, for example.
Once configured we have two ways to notify Google. The first is by logging
into "Google Search Console" and submitting the file manually.
Web application for the complete management of leasing apartments
pág. 40
The second option is to include the path to our sitemap.xml file in the robots.txt
file (which we will talk about next). For Google it is redundant to report it both ways.
However, it is advisable since, if we only use "Google Search Console", other search
engines such as Bing or Yahoo would not know about the existence of this file.
The sitemap.xml file of any website is public, just add /sitemap.xml to the URL
of the site you want to visit. In our case, the file would look like this:
Web application for the complete management of leasing apartments
pág. 41
Robots.txt file [24]
According to Google, the definition of the robots.txt file is as follows: "A
robots.txt file is a file that is located at the root of a site and indicates which parts you do
not want search engine crawlers to access”. In other words, by adding certain URLs to
this file we are explicitly telling Google not to crawl them.
However, what does this mean for SEO? If a website has many pages, it will take
longer for the search engine bot to crawl them, which will have negative effects on our
ranking. For example, a "Googlebot" has a limited time to crawl your website. Therefore,
we have to "help" it to spend this time crawling the pages we are most interested in.
If we tell the search engine bots to only crawl the most useful content, the bots
will crawl and index our site with the focus on that content only. In this way we are not
only causing intelligent crawling, but also our server will not be clogged with bots and
will therefore be faster.
The robot.txt file of any website is public; just add to the URL of the site you
want to visit /robots.txt. In our case, the file would look like this:
.htaccess file [25]
As we mentioned in the security section, the .htaccess file was used to restrict
access to certain directories. However, this file has many other functionalities, including
optimizing the website for better SEO recognition.
Friendly URLs
According to Matt Cutts, a Google engineer, the URL structure plays a crucial
role in page ranking
URLs should be short, simple, and if they use keywords (which we will talk
about later) even better. In this way, it is not the same
“engestiona.com/php/include/idPiso=2/pisos.php” and “engestiona.com/tus-pisos/2”.
Web application for the complete management of leasing apartments
pág. 42
This change is specified in the .htaccess file as follows:
The simplest case is "index.php". In this case we are indicating that
instead of adding that to the URL, directly add "/inicio". It should be noted that,
for the rest of the code, if we want to create a link to "index.php" now we will
have to write "inicio".
Friendly error pages
It is very common for the user to access a URL that does not exist (error
404) or for the server to fail (error 500). When this happens or any other of the
many possible errors that can occur, by default a blank screen is displayed with
the type of error. A non-computer literate user may not know what has
happened. The SEO algorithm takes the user experience very much into account.
Therefore, redirecting these errors to our custom pages is highly recommended.
In our case, a 404 error would be displayed as follows:
Web application for the complete management of leasing apartments
pág. 43
Set a domain as the main domain
By default, we can access a web page by adding or not adding "www" at
the beginning. In terms of SEO, this is not optimal, since two domains would be
pointing to the same website. Therefore, we need to redirect
www.engestiona.com to engestiona.com (or vice versa) and so whether we add
"www" or not, in the search engine it will appear without it.
Performance
Entering a page that takes a long time to load is probably one of the most
frustrating factors for users. With the .htaccess file, we can configure certain
aspects to improve this factor.
We store for a week (604800 seconds) some files that can be heavy in the
user's cache. In this way, the second time the user enters the site, it will load
much faster.
Web application for the complete management of leasing apartments
pág. 44
One of the most efficient rules in the .htaccess file is the compression of
the files on the server. By compressing them with "Gzip" users will access them
much faster and they will consume less data during browsing.
Server hosted in Spain
The server where EnGestiona is hosted is located in Spain and uses Spanish IP
addresses. Search engines give priority in their results to pages hosted in the same
country from which the searches are made. In addition, as mentioned above, an
increasingly important factor is the loading speed of the web page. It is not the same if
the users are in Spain and the server is hosted in the United States than if everything is
in the same geographical area. The greater the distance, the longer the response and
loading time.
Obviously there are very advanced servers with very good performance hosted
in other countries that can even be faster than one hosted in Spain. However, as
EnGestiona today does not need a server of these characteristics, the best choice is
undoubtedly a national server.
As a curiosity and to make sure, we wanted to check where the "Hostalia" server
we hired was hosted. To do this we used a Kali Linux web application analysis tool,
which, among other information, tells us where the web is hosted and even the IP of the
server.
Effectively, our site is located in Spain and more precisely in the IP
82.194.68.67 (Castellón, Alicante).
Web application for the complete management of leasing apartments
pág. 45
Aspects related to the code
When we say that a bot inspects our page, we mean that it analyzes the content
of the page. These bots are not human beings that subjectively decide whether they like
or dislike the page, they follow criteria based on the HTML code. That is why the so-
called On Page content is one of the most relevant factors if we want these bots to "like"
it.
HTML is a language -as its name indicates- of tags. Bots pay a lot of attention to
the content of these tags.
The title of the page: Title tag
The title tag is probably one of the most important tags for bots. It should
be as related as possible to the page, be descriptive, not too long and include
keywords.
The description of the page: Description tag
The description is the way we have to capture visits from people who
happen to find our website in the search results. It must contain a precise
summary of the content a user will find when entering.
Headings: H1 and H2 tags
The HTML language has H1...H6 tags to specify headings, H1 being the
most important and H6 the least important. When indexing a website, bots pay
special attention to H1 and H2 tags. These must contain keywords with which
we want to position the page ("management", "apartments", "rental" ...) and
match words in the title and description. This favors coherence and definitely
helps to improve your positioning.
It is not a real photo since we have just published our page and for the
searched words there are other websites ahead of us. However, it is a
representation of what the final result would look like.
ULR
Título
Descripción
Web application for the complete management of leasing apartments
pág. 46
Include a favicon
Having a favicon is another of the elements valued by search engines to
improve the online positioning of a web page. In addition to giving a more
serious and professional look to the website, as the icon appears in the
navigation bar, users can locate your page more easily when they have several
tabs open.
Include Breadcrumbs
Breadcrumbs are one of the essential elements for a good user
experience. Referring to their name "breadcrumbs", they indicate the path we are
following in the hierarchy of a page. Many times when we enter a website, not
knowing it, we get lost among so many links. That is why the use of this
navigation tool is so important not only for the visitors of a website but also to
gain SEO points.
<H1
>
<H2>
Web application for the complete management of leasing apartments
pág. 47
Include the attribute alt in all the images
The name alt stands for alternative text, and it is what search engines use
to know what an image represents. In addition, it is what the browser displays if
the image does not load.
Responsive design
According to a report by BrightEdge, SEO specialists, currently more
than 50% of web traffic comes from mobile devices [26]. That is why Google
announced in 2015 that the ranking algorithm would change, making websites
adapted to different devices more relevant [27].
EnGestiona is designed to have a better user experience on large screens,
but we have implemented the responsive design thanks to the use of one of the
most used and famous frameworks today, Bootstrap, whose particularity is to
adapt the interface of the website to the size of the device on which it is
displayed.
Google published a tool that checks whether or not a page is optimized
for mobile (Mobile Friendly Tool), and this was the result for our website:
Web application for the complete management of leasing apartments
pág. 48
Some screenshots of what the application looks like on an IPhone X:
Web application for the complete management of leasing apartments
pág. 49
At first, when Google indexes our website, it does not place it in the first
positions. So how do we know if our website is indexed or not if it does not
appear in the first results? Just type "site:domain" in the search engine. If it
appears, we have achieved the first step: Indexing our website. Now we just
have to wait for our SEO techniques to make us grow.
6 Future work
As we have mentioned throughout this document, the world of web development
is constantly evolving and there are many aspects to take into account in many ways.
With regard to web security, it is essential to keep the site up to date and keep
abreast of the latest news and updates. It will be necessary to add extra security when
the project increases its level of visits and popularity. For example, install an application
firewall (WAF), change the SQL code to use parameterized sentences and queries to
avoid SQL injection.
On the other hand, once Google positions us in the first search results, go even
deeper into everything related to the world of SEO positioning, in order to appear as the
first result when a user searches for our keywords ("management", "apartments", "rent",
etc.).
A good way to receive feedback on web improvements will be by sending emails
to registered users with satisfaction surveys and proposals for future updates. The user's
opinion is essential since the service we are offering is based on their comfort and
needs.
For now, the service is free of charge. However, as its popularity progresses, it
will be necessary to generate a profit to at least cover maintenance costs. The initial idea
is to allow free use of almost the entire website, but to have one or two sections that can
only be accessed if the user has a "Premium" account. These sections will not be
Web application for the complete management of leasing apartments
pág. 50
essential for the management of the apartments, but they will be of great help. For
example, to be able to upload files per month, the "Premium" account will be required.
As for the promotion of the site and seeing that my family is finding it helpful
(and therefore passed the trial period that was going to determine whether or not it was
useful), advertise EnGestiona with ads on social networks (mainly Facebook, since that
is where the main user of EnGestiona is located. An audience between 30 and 45 years
old). In addition, to go around different areas of Madrid and introduce in the mailboxes
advertising the web. With all this, and thanks to the fact that registration is free, check
over time if the number of users increases.
Finally, carry out the registration process of the brand "EnGestiona". Previously,
we have made sure that there is no registered trademark with this name, by accessing
the database of the OEPM (Spanish Patent and Trademark Office) website.
In the meantime and for copyright reasons, we have downloaded a domain
verification certificate from Google to prove that www.engestiona.com belongs to us.
Web application for the complete management of leasing apartments
pág. 51
7 Conclusions
7.1 Español
El desarrollo de este proyecto ha sido todo un reto para mí, ya que al no tener
compañeros y tener que resolver todas las dificultades solo, me ha servido para darme
cuenta de que todo problema tiene una solución.
Además, el trabajar solo también me ha permitido ser consciente de otro de los
aspectos esenciales a la hora de crear un proyecto: la autocrítica. Saber fijar la atención
en mis propios fallos y escuchar las propuestas de terceros me ha permitido obtener un
mejor resultado.
En cuanto a la funcionalidad principal de la web, creo que he conseguido captar
e implementar la idea que en un principio se planteó: conseguir un resultado que ofrezca
algo diferente a los otros softwares que hay en el mercado. Como hemos mencionado al
principio, existen programas en Internet con la misma finalidad que nuestro proyecto.
Sin embargo, tras probar varios de ellos hemos conseguido implementar en EnGestiona
aquello que estos no nos ofrecen: poder tener guardada información de cada piso de
manera general y a su vez poder almacenar mes a mes la información necesaria dentro
de una interfaz sencilla e intuitiva.
Referente a la parte técnica, en mi opinión, el punto fuerte de la aplicación es el
back-end, ya que permite realizar muchos tipos de tareas de una manera muy fluida y
cómoda. Sin embargo, creo que uno de los aspectos que debo mejorar es el front-end, ya
que la web no se caracteriza por su diseño y su experiencia visual. Es por ello por lo
que en un futuro cercano me gustaría aprender frameworks orientados a la interfaz de
usuario como “React” y profundizar en aquellos que ya conozco como “Bootstrap”.
Respecto al resultado final, personalmente estoy muy satisfecho. No solo he
desarrollado el código de una aplicación web, si no que he conseguido abarcar otros
aspectos muy importantes relacionados con el mundo del desarrollo web profesional
como es la seguridad del sitio, el mercado y el posicionamiento SEO. Además, el hecho
de que mi familia esté actualmente utilizando la web es la confirmación de haber
terminado mi proyecto de la mejor manera posible y haber conseguido el resultado que
buscábamos.
7.2 English
The development of this project has been a challenge for me, since not having
partners and having to solve all the difficulties alone, has helped me to realize that every
problem has a solution.
In addition, working alone has also allowed me to be aware of another essential
aspect when creating a project: self-criticism. Knowing how to focus on my own
failures and listening to the proposals of others has allowed me to obtain a better result.
As for the main functionality of the website, I think I have managed to capture
and implement the idea that was originally proposed: to achieve a result that offers
something different from other software on the market. As we mentioned at the
Web application for the complete management of leasing apartments
pág. 52
beginning, there are programs on the Internet with the same purpose as our Project.
However, after testing several of them we have managed to implement in EnGestiona
what they do not offer us: to be able to store information of each apartment in a general
way and at the same time to be able to store month by month the necessary information
within a simple and intuitive interface.
Regarding the technical part, in my opinion, the strong point of the application is
the back-end, as it allows performing many different tasks in a very fluid and
comfortable way. However, I think that one of the aspects that I need to improve is the
front-end, since the web is not characterized by its design and visual experience. That is
why in the near future I would like to learn front-end oriented frameworks like "React"
and deepen in those I already know like "Bootstrap".
Regarding the final result. I am personally very satisfied. Not only I have
developed the code of a web application, but also I have managed to cover other very
important aspects related to the world of professional web development such as site
security, marketing and SEO positioning. In addition, the fact that my family is
currently using the website is the confirmation that I have finished my project in the
best possible way and have achieved the result I was looking for.
8 Web QR code
QR code to enter in
www.engestiona.com
Web application for the complete management of leasing apartments
pág. 53
9 Bibliography
1. XAMPP - Wikipedia, la enciclopedia libre
2. MySQL - Wikipedia, la enciclopedia libre
3. DB-Engines Ranking - popularity ranking of database management
systems
4. phpMyAdmin - Wikipedia, la enciclopedia libre
5. Sublime Text, un sofisticado editor de código multiplataforma
(genbeta.com)
6. Qué es un hosting y cómo funciona (webempresa.com)
7. Filezilla: qué es, para que sirve y primeros pasos con este cliente de FTP
(xataka.com)
8. VirtualBox - Wikipedia, la enciclopedia libre
9. WHATWEB – ¿Qué sitio es este? (noticiasseguridad.com)
10. HTML5 - Wikipedia, la enciclopedia libre
11. Hoja de estilos en cascada - Wikipedia, la enciclopedia libre
12. JavaScript - Wikipedia, la enciclopedia libre
13. Bootstrap 4: Qué es, cómo instalarlo en tu web y cómo se utiliza
(raiolanetworks.es)
14. ¿Qué es jQuery? - Simplifica tus proyectos con JQuery - OpenClassrooms
15. ¿Qué Es AJAX Y Cómo Funciona? (hostinger.es)
16. PHP - Wikipedia, la enciclopedia libre
17. Qué es y para qué sirve SQL – Styde.net
18. Uso de la clase PHPMailer. Programación en Castellano.
(programacion.net)
19. ¿Qué son las API de Google? Conoce ahora sus funciones principales
(maplink.global)
20. ¿Qué es SSL, TLS y HTTPS? | DigiCert
21. Proteger directorios con .htpasswd y .htaccess – Clouding.io
Web application for the complete management of leasing apartments
pág. 54
22. SEO: guía completa del posicionamiento en buscadores [2021]
(rockcontent.com)
23. El archivo Sitemap en el posicionamiento Web SEO - mott.pe
24. Qué es y para qué sirve un archivo robots.txt
(marketing4ecommerce.net)
25. .Htaccess para SEO | Josep Deulofeu SEO
26. Microsoft Word - Mobile Research Paper Final.docx (brightedge.com)
27. Finding more mobile-friendly search results (google.com))
28. amg logo vector - Búsqueda de Google