UNIVERSIDAD TECNOLÓGICA DE TABASCO

DIVISION OF TECHNOLOGIES OF THE INFORMATION AND

COMMUNICATION AREA: DEVELOPMENT
MULTIPLATFORM SOFTWARE

Web application for financial transparency

and group members

PRESENTED BY

ABRAHAM MONTEJO SÁNCHEZ

TEACHER:

M.C.E MARVIN HERNÁNDEZ VELÁZQUEZ

PARRILLA, CENTRO, TABASCO, DECEMBER, 2019

INDEX

INTRODUCTION.......................................................................................................1
CHAPTER I: METHODOLOGICAL FRAMEWORK.................................................2
1.1 Background and justification....................................................................2
1.2 Objetives......................................................................................................2
1.2.1 General objetive.......................................................................................2
1.2.2 Specific objectives...................................................................................2
1.3 Scope...........................................................................................................3
1.4 Working methodology.......................................................................................3
CHAPTER ll: THEORETICAL FRAMEWORK.........................................................5
2.1. Theoretical fundaments................................................................................5
2.1.1. Basic concepts........................................................................................5
2.1.1.1. Web technologies................................................................................5
2.1.1.2. Web Application...................................................................................5
2.1.1.3. Usability................................................................................................6
2.1.1.3.1. Usability Attributes...........................¡Error! Marcador no definido.
2.1.1.4. Database...............................................................................................6
2.1.1.4.1. Static database..................................................................................7
2.1.3.1. Waterfall model....................................................................................8
2.1.3.2. Prototype model...................................................................................9
2.1.3.3. Spiral model........................................................................................10
2.1.3.4. Stage Development............................................................................10
2.1.3.5. Iterative and growing development.................................................11
2.1.3.6. Rapid application development........................................................12
2.1.3.7. Concurrent development..................................................................12
CHAPTER lll: APPLICATION FRAMEWORK.......................................................14
3.1. Analysis........................................................................................................14
3.1.1. Description of the current system......................................................14
3.1.2 Process diagrams of the current system...............................................15
3.1.2.1 Board day.............................................................................................15
3.1.2.2. Inflow of money..................................................................................16
 3.1.3. Problem and needs detection.................................................................16
3.1.4. Feasibility study.......................................................................................17
3.1.4.1. Operational.........................................................................................17
3.1.4.2. Economic............................................................................................17
3.1.4.3 Skills.....................................................................................................18
3.1.5. Success alternative..................................................................................18
3.1.5.1. Alternative Name................................................................................18
3.1.5.2. Description of the alternative...........................................................18
3.1.5.4. Justification........................................................................................19
3.1.5.5.1. PHP...................................................................................................19
3.2. Graphic design of the application.............................................................21
3.3. Application of the stages of the information systems development
model...................................................................................................................22
3.4. Application Development Description........................................................1
3.4.1. Detailed System Description.................................................................1
3.4.1.1. Database Diagram................................................................................1
3.4.1.2. Data Dictionary.....................................................................................1
3.4.1.3. Creation of the screens that make up the application.....................6
3.4.1.4. Design of the screens that make up the application........................9
CHAPTER IV: CONCLUSIONS..............................................................................15
CHAPTER V: BIBLIOGRAPHICAL REFERENCES..............................................16
ÍNDICE DE FIGURAS

Figura 1: Modelo de cascada....................................¡Error! Marcador no definido.

Figura 2: Modelo de prototipos..................................¡Error! Marcador no definido.
Figura 3: Modelo espiral............................................¡Error! Marcador no definido.
Figura 4: Modelo por etapas.....................................¡Error! Marcador no definido.
Figura 5: Modelo desarrollo iterativo y creciente......¡Error! Marcador no definido.
Figura 6: Modelo desarrollo rápido de aplicaciones. ¡Error! Marcador no definido.
Figura 7: Modelo desarrollo concurrente..................¡Error! Marcador no definido.
Figura 8: Diagrama de flujo de junta.......................................................................15
Figura 9: Diagrama de flujo de entrada de dinero...................................................16
Figura 10: Interfaz de phpmyadmin.........................................................................20
Figura 11: Pantalla de inicio....................................................................................21
Figura 12: Pantalla administrador............................................................................21
Figura 13: Diagrama de base de datos.....................................................................1
Figura 14: Creación de base datos...........................................................................6
Figura 15: Creación de tablas....................................................................................6
Figura 16: Añadir atributos a la tabla.........................................................................7
Figura 17: Inicio de visualstudio................................................................................7
Figura 18: Creando nuevo archivo php.....................................................................8
Figura 19: Conexión a la base de datos....................................................................8
Figura 20: Inicio de la pagina.....................................................................................9
Figura 21: Inicio de sesión.........................................................................................9
Figura 22: Registrar usuario....................................................................................10
Figura 23: Lista de usuarios del grupo....................................................................10
Figura 24: Eliminar usuario......................................................................................11
Figura 25: Editar la información del usuario............................................................11
Figura 26: Bitácora de juntas...................................................................................12
Figura 27: Salidas en forma de gráfica y tabla........................................................12
Figura 28: Agregar entradas....................................................................................13
Figura 29: Fondo de ahorro.....................................................................................13
Figura 30: Registro de salidas.................................................................................14
Figura 31: Transferir ahorro a liquidez....................................................................14
Figura 32: Cronograma de actividades.....................................................................1
ÍNDICE DE TABLAS

Tabla 1: Tabla de gastos.........................................................................................17

Tabla 2: Tabla de requisitos del sistema.................................................................18
Tabla 3: Tabla Ahorro................................................................................................1
Tabla 4: Tabla usuario...............................................................................................1
Tabla 5: Tabla ingresos.............................................................................................2
Tabla 6: Tabla de contactos......................................................................................2
Tabla 7: Tabla de gastos...........................................................................................3
Tabla 8: Tabla de juntas............................................................................................3
Tabla 9: Tabla de salidas...........................................................................................4
Tabla 10: Tipos de ingreso........................................................................................4
Tabla 11: Tipos de salida...........................................................................................5
Tabla 12: Tipos de usuario........................................................................................5
 INTRODUCTION

Alcoholism is a chronic, progressive and incurable disease, manifested by the loss

of control over alcohol consumption, Ohlms (1980). The group “Love and service
4th and 5th step” was born due to the need for a change in people suffering from
alcoholism in Villahermosa, Centro, Tabasco. This group lives thanks to former
members of other help centers of 4th and 5th step who decided to create their own
place where they could manage and direct the experiences that would be carried
out, making them less intense and pleasant to the public so that they did not
compare them with the annexes . As a result of obtaining their own identity, it was
decided to provide only two services. The experience consists of attending a
weekend to a spiritual retreat and at the end, they will be creditors of being
members of the group. Subsequently, they can attend meetings which deal with
topics of personal interest, in order to cope with their history with alcohol. The
objective of the project is to develop a web application for the control of the
financial information and the members of the Group of Love and Service 4th and
5th Step.
In this document it is divided into five chapters. The first chapter details the
background of the problem, the justification of the objectives, together with the
scope and the development model to be used, in this project the Cascade-based
methodology was chosen. In the second chapter the concepts used are explained,
in addition to naming the programming languages used in the realization of the
web application, which are JS, PHP and MySQL. The third chapter is an analysis
and results of the implementation of the website. The chapter five is the conclusion
of the project where the resolution and the latest ideas of the project are written.
The last chapter is the bibliographical references where the information is obtained.

1
 CHAPTER I: METHODOLOGICAL FRAMEWORK

1.1 Background and justification

In the group “Amor y servicio 4to y 5to paso”, if an individual is interested in joining,
an interview is first performed to obtain basic information. Periodically there are
events to get money to pay the expenses of the association. Previously, the
invoices are saved in a notebook. The group have to change the placement where
they do the meeting because are more people and the space is so tiny. Likewise,
new consumptions of books and other products arise, so a little store had to be
established; In addition to the need a list of assistance for the control of members.
Later it was discovered that the organizers stole money of savings.

According to the above, it is required to implement a web application that contains

three modules, one to have a list of assistance. Another with financial data for its
control and administration. Finally, a section where the members of the group can
consult economic data in an updated and transparent way.

1.2 Objetives

1.2.1 General objetive

Analyze, design and develop a web application for the control of financial
information and the members of the Group of Love and Service 4th and 5th Step in
Centro, Tabasco.

1.2.2 Specific objectives

• Analyze the information collected from the grouping.

• Design the database
• Design website layout.

2
 • Develop the database with SQL Server 2017.
• Develop the website using HTML5, CSS3, JavaScript and PHP
• Implement the web application
• Test the web application with active servers.
• Document the Project

1.3 Scope

The application contains the following modules:

• Online meeting log

• Financial data manager
• Display financial data

1.4 Methodology

The chosen methodology is Waterfall model, being a linear model, all the steps
need to be developed in the same way since if one is poorly defined the following
will follow that same evolutionary line, even if it is delayed a bit. This model goes
stage by stage for the construction of the software and in the fourth point the
previous ones are integrated which makes its development less tedious. Allowing
that with scarce resources we can work on the model gives us the advantage of
being able to document at each stage of the model. The phases to follow are the
following:

 Analysis: User needs and specifications.

 Design: Decomposition into elements that can be developed separately and
specifications of each element.
 Coding: Programming of each element separately (isolated tests).
 Integration: The elements are combined and the complete system is tested
 Maintenance: Occasional changes, errors or improvements.

3
Information on this concept was consulted in the book Software Engineering,
author Steve Mc Connell, (204),1999.

4
 CHAPTER ll: THEORETICAL FRAMEWORK

2.1. Theoretical fundaments

2.1.1. Basic concepts

2.1.1.1. Web technologies

An application web can be made using different technologies where is divided in

two categories:

Client: A client application (the "front end") is the part of the system that users
apply to interact with data. The client application in a client/ server model focus on
the following job:

Presenting an interface between the user and the resource to complete the job
Managing presentation logic, performing application logic and validating data entry
managing the request traffic of receiving and sending information from database
server. Halvorsen (2018).

Server: A server (or "back end") manages the resources such as database,
efficiently and optimally among various clients that simultaneously request the
server for the same resources. Database server mainly concentrates on the
following tasks.

 Managing a single database of information among many concurrent users.

 Controlling database access and other security requirements.
 Protecting database of information with backup and recovery features.
 Centrally enforcing global data integrity rules across all client applications

5
2.1.1.2. Web Application

A Web application (Web app) is an application program that is stored on a remote

server and delivered over the Internet through a browser interface. Web
applications can be designed for a wide variety of uses and can be used by
anyone; from an organization to an individual for different reasons. Commonly
used Web applications can include webmail, online calculators, or e-commerce
shops. Some Web apps can be only accessed by a specific browser; however,
most are available no matter the browser. Luján-Mora (2002).

2.1.1.3. Usability

Software usability refers to the ease of use of a software product or website. It

shows how information is presented and let the user view the product in a clear
and concise way. According to software engineering, usability is the factor through
which you can easily identify the objective like efficiency, the context of use,
customer satisfaction, the effectiveness of the product. It works as a tool to
measure those signs. Travis (1989).

Users do not want to spend much time to evaluate or understand an application as

they have a wide range of options to choose from. A Forrester research says “77%
of the users possibly return if an application is easy to use”, and businesses may
fall or lose customer base. This is one of the reasons that today business opts to
go for a test before pre-launch of a product and even for the already running apps
as well. A pre-launch usability test can let them attract more customers and issue
found at an earlier stage let them saves future maintenance cost and lot more,
whereas post-launch test can let business to see an ‘n number of benefits such as
improvised user and business growth.

6
2.1.1.4. Database

Database is a systematic collection of data. Databases support storage and

manipulation of data. Databases make data management easy. Let's discuss few
examples. An online telephone directory would use database to store data
pertaining to people, phone numbers, other contact details, etc. Your electricity
service provider is obviously using a database to manage billing, client related
issues, to handle fault data, etc. Let's also consider the Facebook. It needs to
store, manipulate and present data related to members, their friends, member
activities, messages, advertisements and lot more. Silberschatz (2014).

The main purpose of the database is to operate a large amount of information by

storing, retrieving, and managing data. There are many dynamic websites on the
World Wide Web nowadays which are handled through databases. For example, a
model that checks the availability of rooms in a hotel. It is an example of a dynamic
website that uses a database. There are many databases available like MySQL,
Sybase, Oracle, MongoDB, Informix, PostgreSQL, SQL Server, etc. Modern
databases are managed by the database management system (DBMS). SQL or
Structured Query Language is used to operate on the data stored in a database.
SQL depends on relational algebra and tuple relational calculus.

2.1.1.4.1. Static database

A static database management system (static DBMS) is an information-based

relationship structured to facilitate update and retrieval in terms of inherent
relationships. Static database management systems are either hierarchical or
network database management systems.

2.1.1.4.2. Dynamic database

Value-based system architecture stores and manages three basic sets of objects:
a data dictionary holding metadata, indexing and linking data sets, and actual data

7
values made up of stored information. The independent logical file database and
relational databases are value-based. A dynamic DBMS is the opposite of a static
database management system, where relationships are information based.

2.1.2. Object Oriented Programming Languages

Object-oriented programming (OOP) is a programming language model that

organizes software design around data, or objects, rather than functions and logic.
An object can be defined as a data field that has unique attributes and behavior.
López (2016).

The concepts of object-oriented programming are detailed below:

 Classes: The definitions for the data format and available procedures for
a given type or class of object; may also contain data and procedures
(known as class methods) themselves, i.e. classes contain the data
members and member functions
 Inheritance: It is a mechanism in which one class acquires the property
of another class.
 Object: Instances of classes. Objects sometimes correspond to things
found in the real world. For example, a graphics program may have
objects such as "circle", "square", "menu". An online shopping system
might have objects such as "shopping cart", "customer", and "product".
 Method: A method, in the context of object-oriented programming, is a
procedure or function associated with a class. As part of a class, a
method defines a particular behavior of a class instance. A class can
have more than one method.
 Event: An event is an action or occurrence recognized by software, often
originating asynchronously from the external environment, that may be
handled by the software.

8
2.1.3. Development models

They are an abstract representation of a process. Each model represents a

process from a particular perspective and thus provides partial information about
the process. They can be thought of as process frameworks and can be adapted to
create more specific processes. Pantaleo (2013).

It is clear that, understanding the life cycle of such a project implies, once one is
chosen among the different software development models and the project
continues, there are certain additional steps to complete before arriving at the final
product delivery.

The different software development models are:

 Waterfall model
 Prototype model
 Spiral model
 Stage development
 Iterative and growing development
 Concurrent development

2.1.3.1. Waterfall model

Through all development stages (analysis, design, coding, testing, deployment),

the process moves in a cascade mode. Each stage has concrete deliverables and
is strictly documented. The next stage cannot start before the previous one is fully
completed. Thus, for example, software requirements cannot be re-evaluated
further in development. There is also no ability to see and try software until the last
development stage is finished, which results in high project risks and unpredictable
project results. Testing is often rushed, and errors consume a lot of time to fix.

9
Sequential phases in the waterfall model:

 Requirements: The first phase involves understanding what needs to design

and what is its function, purpose, etc. Here, the specifications of the input
and output or the final product are studied and marked.
 System Design: The requirement specifications from the first phase are
studied in this phase and system design is prepared. System Design helps
in specifying hardware and system requirements and helps in defining
overall system architecture. The software code to be written in the next
stage is created now.
 Implementation: With inputs from system design, the system is first
developed in small programs called units, which are integrated into the next
phase. Each unit is developed and tested for its functionality which is
referred to as Unit Testing.
 Integration and Testing: All the units developed in the implementation phase
are integrated into a system after testing of each unit. The software
designed, needs to go through constant software testing to find out if there
are any flaws or errors. Testing is done so that the client does not face any
problem during the installation of the software.
 Deployment of System: Once the functional and non-functional testing is
done, the product is deployed in the customer environment or released into
the market.
 Maintenance: This step occurs after installation and involves making
modifications to the system or an individual component to alter attributes or
improve performance. These modifications arise either due to change
requests initiated by the customer, or defects uncovered during live use of
the system. The client is provided with regular maintenance and support for
the developed software.

10
2.1.3.2. Prototype model

The prototyping model is a systems development method in which a prototype is

built, tested and then reworked as necessary until an acceptable outcome is
achieved from which the complete system or product can be developed. This
model works best in scenarios where not all of the project requirements are known
in detail ahead of time. It is an iterative, trial-and-error process that takes place
between the developers and the users.

Steps of the prototyping model:

 The new system requirements are defined in as much detail as possible.

This usually involves interviewing several users representing all the
departments or aspects of the existing system.
 A preliminary, simple design is created for the new system.
 A first prototype of the new system is constructed from the preliminary
design. This is usually a scaled-down system and represents an
approximation of the characteristics of the final product.
 The users thoroughly evaluate the first prototype and note its strengths and
weaknesses, what needs to be added and what should to be removed. The
developer collects and analyzes the remarks from the users.
 The first prototype is modified, based on the comments supplied by the
users, and a second prototype of the new system is constructed.
 The second prototype is evaluated in the same manner as was the first
prototype.
 The preceding steps are iterated as many times as necessary, until the
users are satisfied that the prototype represents the final product desired.
 The final system is constructed, based on the final prototype.
 The final system is thoroughly evaluated and tested. Routine maintenance is
carried out on a continuing basis to prevent large-scale failures and to
minimize downtime.

11
2.1.3.3. Spiral model

The Spiral model focus on thorough risk assessment. Thus, to reap the benefits of
the model to the fullest, you’ll need to engage people with a strong background in
risk evaluation. A typical Spiral iteration lasts around 6 months and starts with 4
important activities - thorough planning, risk analysis, prototypes creation, and
evaluation of the previously delivered part. Repeated spiral cycles seriously extend
project timeframes.

This is the model where intensive customer involvement appears. They can be
involved in the exploration and review stages of each cycle. At the development
stage, the customer’s amendments are not acceptable.

Each phase of Spiral Model is divided into four quadrants:

 Objectives determination and identify alternative solutions: Requirements

are gathered from the customers and the objectives are identified,
elaborated and analyzed at the start of every phase. Then alternative
solutions possible for the phase are proposed in this quadrant.
 Identify and resolve Risks: During the second quadrant all the possible
solutions are evaluated to select the best possible solution. Then the risks
associated with that solution is identified and the risks are resolved using
the best possible strategy. At the end of this quadrant, Prototype is built for
the best possible solution.
 Develop next version of the Product: During the third quadrant, the identified
features are developed and verified through testing. At the end of the third
quadrant, the next version of the software is available.
 Review and plan for the next Phase: In the fourth quadrant, the Customers
evaluate the so far developed version of the software. In the end, planning
for the next phase is started.

12
2.1.3.4. Stage Development

The stage development model is similar to the Prototype Model since it is shown to
the client and software in different successive stages of development, it differs in
that the specifications are not known in detail at the beginning of the project and
therefore they are being developed simultaneously with the different versions of the
code.

The following phases can be distinguished:

 Conceptual specification
 Requirements Analysis
 Initial design
 Detailed design, coding, debugging and release

2.1.3.5. Iterative and growing development

The development process based on the Incremental model is split into several
iterations (“Lego-style” modular software design is required!). New software
modules are added in each iteration with no or little change in earlier added
modules. The development process can go either sequentially or in parallel.
Parallel development adds to the speed of delivery, while many repeated cycles of
sequential development can make the project long and costly.

The process consists in five steps:

 Planning & Requirements: As with most any development project, the first
step is going through an initial planning stage to map out the specification
documents, establish software or hardware requirements, and generally
prepare for the upcoming stages of the cycle.
 Analysis & Design: Once planning is complete, an analysis is performed to
nail down the appropriate business logic, database models, and the like that
will be required at this stage in the project. The design stage also occurs
13
 here, establishing any technical requirements (languages, data layers,
services, etc) that will be utilized in order to meet the needs of the analysis
stage.
 Implementation: With the planning and analysis out of the way, the current
implementation and coding process can now begin. All planning,
specification, and design docs up to this point are coded and implemented
into this initial iteration of the project.
 Testing: Once this current build iteration has been coded and implemented,
the next step is to go through a series of testing procedures to identify and
locate any potential bugs or issues that have cropped up.
 Evaluation: Once all prior stages have been completed, it is time for a
thorough evaluation of development up to this stage. This allows the entire
team, as well as clients or other outside parties, to examine where the
project is at, where it needs to be, what can or should change, and so on.

2.1.3.6. Rapid application development

Rapid Application Development (RAD) is a form of agile software development

methodology that prioritizes rapid prototype releases and iterations. Unlike the
Waterfall method, RAD emphasizes the use of software and user feedback over
strict planning and requirements recording.

The rapid application development has four steps which are:

 Planning Requirements: During this initial stage designers, developers, and

users come to a rough agreement on project scope and application
requirements, so that future stages with prototyping can begin.
 User Design: User feedback is gathered with heavy emphasis on
determining the system architecture. This allows initial modeling and
prototypes to be created. This step is repeated as often as necessary as the
project evolves.

14
  Rapid Construction: Once basic user and system design has begun, the
construction phase is where most of the actual application coding, testing,
and integration takes place. Along with User Design, the Rapid Construction
phase is repeated as often as necessary, as new components are required
or alterations are made to meet the needs of the project.
 Cutover: The final Cutover (or Transition) stage allows the development
team time to move components to a live production environment, where any
necessary full-scale testing or team training can take place.

2.1.3.7. Concurrent development

The concurrent process model is often used as the paradigm for the development
of client/server applications. A client/server system is composed of a set of
functional components. When applied to client/server, the concurrent process
model defines activities in two dimensions a system dimension and component
dimension. System level issues are addressed using three activities, design
assembly, and use.

The concurrent process model is applicable to all types of software development

and provides an accurate picture of the current state of a project. Rather than
confining software-engineering activities to a sequence of events, it defines a
network of activities. Each activity on the network exists simultaneously with other
activities. Events generated within a given activity or at some other place in the
activity network trigger transitions among the states of an activity.

Concurrency is achieved in two ways:

 System and component activities occur simultaneously and can be modeled

using the state-oriented approach described previously;
 A typical client/server application is implemented with many components,
each of which can be designed and realized concurrently.

15
 CHAPTER lll: APPLICATION FRAMEWORK

3.1. Analysis

3.1.1. Description of the current system

At present, the "Grupo de amor y servicio 4to y 5to paso" arises like an association
non-profit. Thus, they manage her own finance and documentation to expose of all
members. Therefore, all the revenues are wrote down in a physical book for the
control of date, concept and quantity. It happens exactly with all expenses.
Furthermore, the organization also have a record book with the day, board theme,
who is heads the board and the date.

16
3.1.2 Process diagrams of the current system

3.1.2.1 Board day

Figura 1: Diagrama de flujo de junta

17
3.1.2.2. Inflow of money

Figura 2: Diagrama de flujo de entrada de dinero

3.1.3. Problem and needs detection

Nowadays, the association works their finances in accounting books where one
person have access, a list is wrote in a notebook and accounting results are
presented once a month.

In agreement with the requirements of client it will develop an application web

following the specific objectives in the chapter one.

18
3.1.4. Feasibility study

3.1.4.1. Operational

Firstly, the application web is operable because have a style eaiser to use. The
menu of options provide the essential in order to each type of user.

Moreover, in the administrator view there were chosen the best style options like
bottoms and colors where better guidance is provide to each view.

3.1.4.2. Economic

At the present time, the project is economically feasible because fulfill the following
points:

 Computer equipment
 Licensed software
 Internet connection

The association just will have to pay the following points:

 Annual hosting income

 Application development

At the following table it shows the costs for the develop of the project as well as
wages per day in according of INEGI:

Position Days Wage per day Total

Project leader 10 $ 529.70 $ 5297
Developer 10 $ 283.03 $ 2830.33
Database designer 2 $ 362.53 $ 725.06
Databases analyst 1 $ 308.9 $ 308.9
Support 1 $ 291 $ 291
Total $ 9452.83

Tabla 1: Tabla de gastos

19
3.1.4.3 Skills

To start with the implementation of the application web in a computer it will need
certain requirements. One of these is the necessity of internet and secondly is a
computer.

Because of the association already has a computer to internal use, just it will be
detail the fundamental aspects to the correct operation of the application web.

The requirements to the optimal operation of application web are the following:

Hardware Software
Intel Core i3 processor Windows 10 home
Graphics card intel hd Navegador internet explorer
Sound card
Network card
Keyboard
Mouse

Tabla 2: Tabla de requisitos del sistema

3.1.5. Success alternative

3.1.5.1. Alternative Name

Web application for financial transparency and group members

3.1.5.2. Description of the alternative

To start with the description of application web it will dispose three views. The first
view correspond to the administrator in which will register new users. It will count
with a list of users where the actions like edit and delete appear. The second view
is about accountant to add new sales. This will be send to a saving account. The

20
same steps are to expenses. Finally, the view of member could see in a list the
savings account and expenses.

3.1.5.4. Justification

The application web have to develop in a simple way to use but complete in
aspects like the views. Fulfill the scope is the first step to solve the problematic.

3.1.5.5. Web technologies to use

To develop the application web it was used the package Xampp. This package
collect the following software.

 PHP
 Phpmyadmin
 Apache

The use of PHP as programing language in backend was decided because is more
easier than other languages.

3.1.5.5.1. PHP

It is the acronym for Hipertext Preprocessor. It's a fast, platform-independent, free

server-side programming language with a large library of features and lots of
documentation.

What distinguishes PHP from something on the client side like Javascript is that
the code is executed on the server, generating HTML and sending it to the client.
The client only receives one page with the HTML code resulting from the execution
of the PHP.

21
3.1.5.5.2. Phpmyadmin

PHPMyAdmin is an open source software, designed to manage the administration

and management of MySQL databases with a graphical user interface.

This application consists of a set of files written in PHP that can be copied to a
directory on the web server and so when the files are accessed, the pages where
the databases to which you have access will be displayed.

Figura 3: Interfaz de phpmyadmin

22
3.2. Graphic design of the application

Figura 4: Pantalla de inicio

Figura 5: Pantalla administrador

23
3.3. Application of the stages of the information systems development model

In order to complete the web application, the waterfall model will be used, since it
proposes steps that benefit both the programmer and the client when delivering the
results.

These were the phases that were followed in the project.

Requirements: in this first phase, all the client's requirements are collected through
an interview in order to create the characteristics that the application will have.

Design: The visual characteristics to be used on the website were defined.

Implementation: Once the design that the application will have is confirmed, the
specific requirements where we use the programming will follow. Here the
database is implemented and its subsequent implementation with the algorithms
made.

Verification: Having the database it is tested with php so that it can make the
queries correctly and in case of stopping any error it is resolved.

Maintenance: In the event that the application stops working or there is any doubt
on the part of the client, maintenance will be provided at no cost per year.

24
3.4. Application Development Description

3.4.1. Detailed System Description

3.4.1.1. Database Diagram

Figura 6: Diagrama de base de datos

1
3.4.1.2. Data Dictionary

Tabla de ahorro

Tabla 3: Tabla Ahorro

Tabla de usuarios

Tabla 4: Tabla usuario

1
 Tabla de ingresos

Tabla 5: Tabla ingresos

Tabla contactos

Tabla 6: Tabla de contactos

2
 Tabla gastos

Tabla 7: Tabla de gastos

Tabla juntas

Tabla 8: Tabla de juntas

3
 Tabla salidas

Tabla 9: Tabla de salidas

Tabla tipo ingreso

Tabla 10: Tipos de ingreso

Tabla tipo salida

4
Tabla 11: Tipos de salida

Tabla tipo usuario

Tabla 12: Tipos de usuario

5
3.4.1.3. Creation of the screens that make up the application

To create a new database in phpmyadmin just have to enter the menu and add the
name of the database.

Figura 7: Creación de base datos

Add a new table and put the name and how many rows do you want.

Figura 8: Creación de tablas

6
Add the attributes and each of one put a name and define the type of value.

Figura 9: Añadir atributos a la tabla

To start a new project in visual studio we just have to drag a folder to the
workspace.

Figura 10: Inicio de visualstudio

7
To create a new file inside the folder we just right-click on the option "Add new file"
and when we give it the name we change the extension that we are going to use.
In this case it will be php.

Figura 11: Creando nuevo archivo php

To create the database connection we will use the mysqli_connect function. This
will make us connect to the database that we choose according to the name.

Figura 12: Conexión a la base de datos

8
3.4.1.4. Design of the screens that make up the application

Figura 13: Inicio de la pagina

Figura 14: Inicio de sesión

9
 Figura 15: Registrar usuario

Figura 16: Lista de usuarios del grupo

10
 Figura 17: Eliminar usuario

Figura 18: Editar la información del usuario

11
 Figura 19: Bitácora de juntas

Figura 20: Salidas en forma de gráfica y tabla

12
Figura 21: Agregar entradas

Figura 22: Fondo de ahorro

13
 Figura 23: Registro de salidas

Figura 24: Transferir ahorro a liquidez

14
 CHAPTER IV: CONCLUSIONS

The realization of this project was definitely an experience that I will not be able to
describe in three simple paragraphs. As a student, being in charge of the design,
development, creation and documentation of a web application is somewhat
overwhelming. I want to highlight that my expectations on how the work would be
completed and how it turned out, are uneven.

The begin of this project did not start in July. It was a collection of data, field
research and, between other things, talking with friends to guide me in the pass
this work.
And continuing with the tradition, I hope I'm not the only person who found it
relaxing when the queries were successful.

I want to thank a special person, since my obsession with becoming better than
that individual made me reveal myself in order to finish the application web.
Unfortunately anonymity plays a crucial role so zero names.

I have a pleasant experience since this only prepares me for the future.

15
 CHAPTER V: BIBLIOGRAPHICAL REFERENCES

[McMenamin84] Steve Mc. Menamin y John Palmer. Essential Systems Analysis. Prentice Hall,
Yourdon Press, 1998.

IngenioVirtual | Proyectos Web, Desarrollo y programación. Conceptos básicos sobre tecnologías

de desarrollo web, [en linea]. Dirección URL:<http://https://www.ingeniovirtual.com/conceptos-
basicos-sobre-tecnologias-de-desarrollo-web/> [Consulta: 22 de Sep. 2019].

Manual de usuario de apache, [en linea], Dirección URL:

<https://www.apachefriends.org/es/about.html/> [Consulta: 25 de Sep. 2019].

Manual de usuario de PHP, [en linea], Dirección URL: < https://www.php.net/manual/es/intro-

whatis.php/> [Consulta: 28 de Sep. 2019].

[Delisle], Marc Delisle. (2012). Mastering phpMyAdmin 3.4 for Effective MySQL Management.
Florida, United States: Packt Publishing.

Castillo, L. C, & Dimas, J. D. (2016). HTML5, CSS Y JAVASCRIPT - Crea tu web y apps con el
estándar de desarrollo. Ciudad de México, México: Alfaomega.

McLaughlin, B. Mc. (2006). Head First Object-Oriented Analysis and Design: A Brain Friendly Guide
to OOA&D (English Edition). United States, California: O'Reilly Media.

Mora, S. M. (2002). Programación de aplicaciones web: historia, principios básicos y clientes web.
España, Madrid: Club Universitario.

Luján-Mora, S. L. (2001). Programación en Internet: clientes web. España, Madrid: Editorial Club
Universitario.

[Pantaleo], G. P. (2013). Ingenieria de Software. Ciudad de México, México: Alfaomega.

[Lopéz], B. L.T. (2016). Curso de Programación Orientada a Objetos con c#. Net.. Ciudad de
México, México: Marcombo.

[Silberschatz], A. S. (2014). Fundamentos de Bases de Datos. Madrid, España: McGraw Hill.

16
17
 CHAPTER VI: ANNEXES

7.1. Schedule of activities

Figura 25: Cronograma de actividades

1
7.2. Report of the initial interview

Entrevistado: Ing. Agrónomo Martín Cepeda Domínguez Fecha: 01/07/2019

Entrevistador: Abraham Montejo Sánchez

Tema: Análisis, diseño y desarrollo de aplicación web para el Grupo de Amor y Servicio De 4to y
5to Paso.

Objetivo: Conocer sobres los procesos que se llevan a cabo en la organización para su posterior
uso en la realización de la aplicación web.

Se lograron los objetivos:

Identificar los datos claves para su posterior utilización en el desarrollo de la aplicación web. En el
apartado de publicidad se limitó la información sensible, así como un formulario de contactos.

7.3. Questionnaire Design

Objetivo: Determinar los requerimientos del cliente para analizar las actividades que se puedan
utilizar en la aplicación web.

1. ¿Cómo está conformado la mesa directiva del grupo y que papel desempeñan?
2. ¿Cualquier miembro del grupo puede solicitar información sensible?
3. ¿Cuántas personas están encargadas de las finanzas del grupo?
4. ¿Qué datos ocupa el contador para realizar su estado de cuenta mensual?
5. ¿Qué datos almacenan de los miembros del grupo?
6. ¿Cada cuánto tiempo registran nuevos miembros en la agrupación?
7. ¿Cómo clasifican sus entradas y salidas?
8. ¿Cómo ordenan las salidas de ingresos?
9. ¿Llevan un control total de sus juntas?
10. ¿Cada cuanto se rotan los puestos de la mesa directiva?