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


pág. 2


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

https://drive.google.com/drive/folders/1TtLy-lJ8RVVAc3rFNLVy8W_veG2ge_sl



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




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.


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.


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.”


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.”


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

http://www.rentila.es/


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


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.

http://www.engestiona.com/


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.


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.


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.


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.



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.


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”.


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.


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.


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.


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.


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 .


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.


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”.


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:


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:


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:


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


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.


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:


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".


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.



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.


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


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 "&gt". 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:


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


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.


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.



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.


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:


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”.


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:


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.


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).


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


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>


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:


pág. 48

Some screenshots of what the application looks like on an IPhone X:


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


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.


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


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



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

https://es.wikipedia.org/wiki/XAMPP

https://es.wikipedia.org/wiki/MySQL

https://db-engines.com/en/ranking

https://db-engines.com/en/ranking

https://es.wikipedia.org/wiki/PhpMyAdmin

https://www.genbeta.com/herramientas/sublime-text-un-sofisticado-editor-de-codigo-multiplataforma

https://www.genbeta.com/herramientas/sublime-text-un-sofisticado-editor-de-codigo-multiplataforma

https://www.webempresa.com/hosting/hosting-que-es-como-funciona.html

https://www.xataka.com/basics/filezilla-que-sirve-primeros-pasos-este-cliente-ftp

https://www.xataka.com/basics/filezilla-que-sirve-primeros-pasos-este-cliente-ftp

https://es.wikipedia.org/wiki/VirtualBox

https://noticiasseguridad.com/tutoriales/whatweb-que-sitio-es-este/

https://es.wikipedia.org/wiki/HTML5

https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada

https://es.wikipedia.org/wiki/JavaScript

https://raiolanetworks.es/blog/bootstrap/

https://raiolanetworks.es/blog/bootstrap/

https://openclassrooms.com/en/courses/4309491-simplifica-tus-proyectos-con-jquery/4309498-que-es-jquery

https://www.hostinger.es/tutoriales/que-es-ajax

https://es.wikipedia.org/wiki/PHP

https://styde.net/que-es-y-para-que-sirve-sql/

https://programacion.net/articulo/uso_de_la_clase_phpmailer_213

https://programacion.net/articulo/uso_de_la_clase_phpmailer_213

https://maplink.global/es/blog/que-son-google-apis/

https://maplink.global/es/blog/que-son-google-apis/

https://www.websecurity.digicert.com/es/es/security-topics/what-is-ssl-tls-https

https://clouding.io/hc/es/articles/360010325199-Proteger-directorios-con-htpasswd-y-htaccess


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

https://rockcontent.com/es/blog/que-es-seo/

https://rockcontent.com/es/blog/que-es-seo/

https://mott.marketing/el-archivo-sitemap-en-posicionamiento-web-seo/

https://marketing4ecommerce.net/que-es-robots-txt/

https://marketing4ecommerce.net/que-es-robots-txt/

https://www.josepdeulofeu.com/seo/htaccess-seo/

https://www.brightedge.com/sites/default/files/BrightEdge-Mobile-Research-Paper-2017.pdf

https://developers.google.com/search/blog/2015/02/finding-more-mobile-friendly-search

https://www.google.com/search?tbs=simg:CAQShAIJY2WJc5MNgNoa-AELELCMpwgaOAo2CAQSE709jQhKoS_1QI6ErvD3UH-cOtQgaGQQSFBR7Fn6bHbgG_1p9w5_1vS2-uUzsABBR8gBTAEDAsQjq7-CBoKCggIARIEVqS6sAwLEJ3twQkamgEKIwoQcGFja2FnZSBkZWxpdmVyedqliPYDCwoJL20vMDFkNzQzChsKCHZlcnRpY2Fs2qWI9gMLCgkvYS80aGgzcDAKHQoKaG9yaXpvbnRhbNqliPYDCwoJL2EvMm1xdnpjChsKCGNsaXAgYXJ02qWI9gMLCgkvbS8wM2cwOXQKGgoIdHJpYW5nbGXapYj2AwoKCC9tLzA3ang3DA&q=amg+logo+vector&tbm=isch&sa=X&ved=2ahUKEwiv5Jr1m5rxAhVox4sKHcM3A1wQwg4oAHoECAEQMQ&biw=1707&bih=781&safe=active&ssui=on#imgrc=mzJju2vxmGMKGM

web application for the complete management of leasing

Documents