Implementación de aplicación web con acceso a base de datos para manejo de

inventario de la empresa Orange Business Services Colombia S.A

Juan Felipe Gómez Rodríguez

Código: 2100392

Profesor Tutor Saith Rodríguez

UNIVERSIDAD SANTO TOMAS

FACULTAD DE INGENIERÍA ELECTRÓNICA
BOGOTÁ D.C.
2017
Dedicado a mi madre por haberme dado la mejor educación y lecciones de vida,
a mis docentes que con su ayuda y conocimiento me formaron como profesional
y a mis compañeros y amigos por estar siempre a mi lado y prestarme su apoyo.

2
 Nota de aceptación:

Firma del Profesor Tutor

Firma del Jurado

Firma del Jurado

3
Tabla de Contenido

1. Marco Humanístico ............................................................................................................... 6

2. Problema ................................................................................................................................. 8
3. Antecedentes ....................................................................................................................... 10
3.1. E-LEARNING ................................................................................................................. 10
3.1.1. Open English ........................................................................................................ 10
3.1.2. Moodle .................................................................................................................... 11
3.1.3. Claroline ................................................................................................................. 11
3.2. E-COMMERCE .............................................................................................................. 11
3.2.1. Amazon .................................................................................................................. 11
3.2.2. MercadoLibre ........................................................................................................ 11
3.3. E-SOCIAL....................................................................................................................... 12
3.3.1. Facebook ............................................................................................................... 12
3.3.2. Twitter..................................................................................................................... 12
3.3.3. YouTube................................................................................................................. 12
3.4. CRM ................................................................................................................................ 12
3.4.1. Zoho CRM .............................................................................................................. 13
3.4.2. Karma CRM ........................................................................................................... 13
3.5. ERP ................................................................................................................................. 13
3.5.1. Openbravo ............................................................................................................. 13
3.5.2. Neogia .................................................................................................................... 13
4. Justificación ......................................................................................................................... 14
5. Objetivos ............................................................................................................................... 15
5.1. Objetivo General .......................................................................................................... 15
5.2. Objetivos Específicos ................................................................................................ 15
6. Factibilidad ........................................................................................................................... 16
7. Marco teórico ....................................................................................................................... 17
7.1. Página Web ................................................................................................................... 17
4
 7.2. Servidor Http ................................................................................................................ 17
7.3. Plataformas tipo ERP ................................................................................................. 18
7.4. XAMPP ........................................................................................................................... 19
7.4.1. Apache ................................................................................................................... 20
7.4.2. MySQL .................................................................................................................... 21
7.4.3. Filezilla ................................................................................................................... 22
7.4.4. Mercury .................................................................................................................. 22
7.4.5. Tomcat ................................................................................................................... 22
7.5. HTML .............................................................................................................................. 22
7.6. PHP ................................................................................................................................. 23
8. Diseño metodológico ......................................................................................................... 27
9. Ejecución del proyecto ...................................................................................................... 29
9.1. Base de datos................................................................................................................... 30
9.2. Aplicación Web ................................................................................................................ 33
9.2.1. Proceso de autenticación .............................................................................................. 33
9.2.2. Formularios ................................................................................................................... 36
10. Conclusiones ................................................................................................................... 44
11. Administración del proyecto ........................................................................................ 45
12. Bibliografía ........................................................................................................................ 46
13. Anexos ............................................................................................................................. 468

5
 1. Marco Humanístico

Internet ha llegado a gran parte de los hogares y de las empresas de los países
ricos y ha abierto una brecha digital con los países pobres. No obstante, en el
transcurso del tiempo se ha venido extendiendo el acceso a Internet en casi todas
las regiones del mundo, ha tenido un impacto en el mundo laboral y ha permitido
una descentralización de la información y los datos.

Con el pasar de los años la tecnología ha crecido de una manera impresionante

haciendo que las personas cambien su modo de vida, el internet ha influido en la
sociedad varios servicios como la facilidad de comunicación, fuente de información,
sitios sociales, etc.

Hoy en día gracias a internet y las diferentes tecnologías que ahora existen las
barreras entre el hombre y las máquinas se han ido diluyendo hasta crearse un
sentimiento de empatía entre ambos, el concepto de hombre-máquina establece
una relación entre ambos donde la maquina da la información al hombre por medio
de sus sentidos, a la cual el hombre responde a la máquina alterando su estado
mediante diversos controles, así dando la información a la maquina donde realiza
su proceso y de esta forma la máquina vuelve dar la información al hombre y se
repite todo el proceso haciendo de esto un circuito cerrado de información y control.

La tecnología influye en el desarrollo tanto económico y social, pero la mayor parte

de la sociedad está haciendo uso de la tecnología de una forma inadecuada, incluso
utilizándola para realizar actos malos, en la actualidad los hombres no se percatan
de que la tecnología está cada vez más en sus vida hasta el punto que solo
dependen de ella, esta situación ha hecho que parte de la esencia humana se halla
ido desvaneciendo, porque ahora todo lo hacemos con un click y no se necesita de
esfuerzo para realizar de ciertas actividades. Las personas deben entender que la
tecnología posee una gran ventaja y todo depende de la manera en que la
utilicemos, la tecnología ayudo en el desarrollo de la sociedad y nos hicieron seres
más racionales.

El impulso tecnológico orientado a la integración entre hombres y maquinas ha ido

evolucionando de forma paralela al desarrollo de la informática y otras tecnologías
de la información y la comunicación. La tecnología sigue evolucionando, y si bien
ha ayudado notoriamente al hombre, aumentando su expectativa de vida,
mejorando la calidad de vida, pero con el riesgo de que las personas se vuelvan
mucho más dependientes con la tecnología, está provocando que el hombre esté
6
llegando a su destrucción. Debido a que somos tan dependientes de la tecnología,
hemos dejado de cuestionarnos las cosas, de buscar respuestas porque
generalmente o ya están respondidas o son muy complicadas.

El internet ha contribuido en gran parte con estos cambios que ha tenido la relación
hombre-máquina, y aporta nuevas maneras de racionar a nuestro pensamiento, nos
da cosas positivas como herramientas para la revisión de argumentos y
pensamiento colectivo, aumenta nuestra capacidad de crítica al poder compartir con
otras personas que hacen uso del ciberespacio y nos permite tener intercambio de
investigaciones y conocimientos abriendo nuestras mentes a un mundo más
racional.

El proyecto de implementar una plataforma web para el manejo de inventario de la

empresa Orange Business Services Colombia S.A, contribuye en el bienestar
integral de los usuarios que harán uso de la herramienta, en la que contribuye al
mejoramiento de la calidad de trabajo de los todos los implicados facilitando el
acceso a la información y potenciando su capacidad de búsqueda, análisis y toma
de decisiones de forma individual en el trabajo. En el proyecto se nota una clara
relación hombre-máquina debido a que el usuario se adapta a los requerimientos
de la plataforma y en ese momento se establece la relación entre ambos y la
plataforma administrará la información deseada volviéndose un ciclo repetitivo en
donde tanto hombre como maquina trabajan en conjunto para lograr un propósito.

7
 2. Problema

Para los practicantes de la empresa Orange Business Services deben desempeñar

varias labores, pero una de las más importantes es la de mantener en orden y al día
el inventario interno de la empresa, actualmente el registro de este inventario se
maneja por medio de 4 hojas de cálculo de Excel que son: entrada de equipos
nuevos, salida de equipos nuevos, entrada de equipos usados y salida de equipos
usados. Normalmente cuando llegan equipos nuevos a la empresa los practicantes
se encargan de recibirlos verificando que todo esté en perfecto estado y la
información como el modelo del equipo, marca, orden de compra y serial coincida
con lo que se esperaba, esta información es la que se almacena en el inventario de
entrada de equipos nuevos con la ubicación en donde se vaya almacenar en
bodega. En los casos de que se necesite realizar una salida de estos equipos se
toma la información que se encuentra en el registro de entrada equipos nuevos y se
desplaza al de salida de equipos nuevos con la fecha en que salió. Para el proceso
de equipos usados es bastante similar la única diferencia es que estos son equipos
que ya han sido utilizados anteriormente y estos equipos ya no poseen en su
mayoría una orden de compra, la utilización de estos equipos normalmente son para
el uso interno de la empresa o algún préstamo a los ingenieros para realizar
pruebas.

El problema a abordar aquí es del cómo se está manejando esta información, ya

que al pasar por varios practicantes hay momentos de que por el simple error
humano la información pueda desorganizarse y esto genere problemas al momento
de buscar los datos equipos que se necesiten, generando pérdida de tiempo lo cual
para la empresa es muy importante optimizar, además el programa a utilizar
tampoco es muy seguro y eso sin contar que los equipos de cómputo que
almacenan el inventario se encuentran en constante movimiento corriéndose el
riesgo de que estos se dañen y toda la información que se encuentra almacenada
se pierda y no se logre recuperar. Por esto la idea de este proyecto busca
sistematizar el proceso de inventario y hacer más segura la información.

El manejo de la información en las empresas es de vital importancia para su

funcionamiento, pero siempre existe el riesgo de perderla por algún tipo de fallo o
mal funcionamiento del equipo que contenga esta información, actualmente las
empresas guardan sus datos en servidores y redes internos, no solo para
mantenerlos seguros sino para que el personal de la empresa que esté conectado
a ese servidor pueda acceder de manera fácil y segura.
8
Actualmente muchas empresas manejan por medio de plataformas, aplicaciones
web o software privados que estén conectados a sus servidores la información
interna de éstas, una de las ventajas de una aplicación web frente al software
privado que manejan algunas empresas, es de no ser necesario software en
equipos de cómputo para su funcionamiento sino que requiere es la utilización del
navegador web que posea una conexión a internet.

Con este fin se busca crear una aplicación web para la empresa con código HTML,
PHP y MySQL, donde en una base de datos se guarde toda la información del
inventario de la empresa que ayude a acceder rápidamente la ubicación de los
equipos ya sea por su orden de compra, seriales, ubicación en el almacén, etc. Esta
información podrá ser accedida solo por las personas que realicen el manejo de
inventario en la empresa, en la cual podrán ingresar por medio de un usuario y
contraseña, también la aplicación permitirá agregar nueva información para equipos
que lleguen a la empresa así como la opción de darles salida para cuando sean
despachados de la empresa. Se busca que la interfaz sea sencilla y fácil de
comprender para el usuario final.

9
 3. Antecedentes

Las aplicaciones web desde la perspectiva de un usuario no deben diferenciarse de

una página de internet, las plataformas o también conocidas como aplicaciones web
son básicamente una manera de facilitar el logro de una tarea específica en la Web,
a diferencia de un sitio web estático que están enfocados principalmente en mostrar
una información permanente, donde el usuario se limita a obtener dicha información,
las plataformas web son paginas dinámicas que permiten la creación de
aplicaciones dentro de la propia Web, que ofrecen una mayor interactividad con los
usuarios

Las aplicaciones web han ido revolucionando la industria de internet ya que han
pasado de un contenido estático a un contenido interactivo. Hoy en día gracias a
eso los usuarios como personas naturales o grandes entidades usan estas
plataformas para realizar todo el manejo de información y datos ya que es una forma
de tener rápido acceso a ésta y también una manera más segura de archivar dicha
información.

Con el pasar de los años las aplicaciones web han adquirido tanta popularidad que
ya han aparecido plataformas de varias clases para todo tipo de negocio con las
cuales se cumple una función y unas características específicas tal como se
muestran a continuación:

3.1. E-LEARNING: Son plataformas diseñadas para educación online, que

gestionan planes formativos de cualquier tipo, ofrece a los usuarios la
opción de realizar estudios en cualquier lugar con conexión a internet con
un horario flexible y tener la opción de certificarse y especializarse en un
área de interés. Esto permite la creación de aulas virtuales; donde se
produce la interacción entre tutores y alumnos, como también la
realización de evaluaciones, el intercambio de archivos, la participación
en foros, chats, y una amplia gama de herramientas [22]. Unos ejemplos
de E-LEARNING son:

3.1.1. Open English: Compañía dedicada a realizar clases en vivo de inglés

con profesores norteamericanos por medio de una plataforma web
que brinda la sensación de estar en un salón de clases estando en la
comodidad de la casa u oficina [16].

10
 3.1.2. Moodle: Esta plataforma es una de las más utilizadas por muchas
entidades, empresas y organizaciones es gratuita y de código abierto,
y se puede instalar en cualquier servidor con cualquier nombre de
dominio. Las instituciones usan más que todo esta herramienta ya que
es muy práctica para comunicarse con el alumnado y hacer
evaluaciones. Posee un sistema de registro que permite crear una
interacción privada entre profesores y alumnos donde pueden
compartir todo tipo de recursos académicos[14].

3.1.3. Claroline: Es una plataforma de código abierto muy utilizada para la

creación de cursos y crear un grupo de estudio colaborativo, haciendo
uso de herramientas como el calendario, foros, videos, documentos,
wikis y tareas proporcionando una aplicación fácil de utilizar para
realizar un buen aprendizaje[14].

3.2. E-COMMERCE: Es un sistema que permite la compra y venta de

productos y servicios a través de internet. Las E-commerce son las
plataformas que se caracterizan por ser una tienda virtual donde se puede
entrar y buscar toda clase de productos, muchas empresas ahora utilizan
este método para hacer venta del producto ya que es muy buena forma
de expandir el negocio sin locales, sin límites geográficos y a bajo costo[4].
Unos buenos ejemplos de E-commerce son:

3.2.1. Amazon: Es una empresa estadunidense que también fue una de las
primeras para ofrecer bienes por internet, también Amazon ha ofrecido
sitos web independientes para diferentes países del mundo para que
cada uno pueda vender sus productos; hoy en día es de las
plataformas más amplias para buscar todo tipos de productos[7].

3.2.2. MercadoLibre: Es una compañía argentina dedicada a la

intermediación entre usuarios inscritos a su servicio de compras,
ventas, pagos y subastas por Internet; la plataforma de web de
MercadoLibre permite que cualquier tipo de usuario se registre y
pueda vender cualquier tipo de productos nuevos o usados. Muchas
personas que tienen pequeñas empresas usan ésta para vender sus
productos teniendo la ventaja de venderlo a menor costo y sin
necesidad de manejar una tienda física.

11
3.3. E-SOCIAL: Estos son sitios en la web que almacenan diferentes tipos de
información tanto personal como de negocios, estas plataformas son
redes sociales que facilitan la comunicación con amigos, familiares y
otros; también funcionan con cierto tipo de sistemas operativos y ejecutan
aplicaciones con distintos contenidos que pueden ser juegos, imágenes,
textos, videos, etc. [23] Las plataforma E-SOCIAL más conocidas son:

3.3.1. Facebook: Como la más conocida en el mundo que cuenta con más
de 1650 millones de usuarios, Facebook es una red social que permite
estar en contacto con las personas y compartir todo tipo de fotos,
videos, etc.

3.3.2. Twitter: Es la aplicación que reúne la ventaja de los blogs, mensajería

instantánea y la redes sociales, esta plataforma permite estar con
usuarios en tiempo real y estar en contacto con personas del mismo
interés compartiendo ideas con mensajes cortos.

3.3.3. YouTube: Este es un portal que permite subir y visualizar videos de

toda clase; en la actualidad hay personas que hacen uso de YouTube
como un medio de trabajo, creando videos con diferentes tipos de
contenidos que sean del gusto de las personas, así por este medio
consiguen de seguidores que ayudan a expandir su fama y luego se
les conocen como youtubers.

3.4. CRM: El CRM (Customer Relationship Management) traducido como

gestión de relaciones con los clientes es una plataforma utilizada
principalmente en empresas para unificar la gestión de cuentas,
contactos, ventas y otros datos sobre los clientes y también clientes
potenciales de las compañías[20]. Estos datos son almacenados en la
nube, lo que permite el ingreso de varios usuarios y que el manejo de esta
información sea en tiempo real; las grandes compañías hacen uso de esta
herramienta debido a su gran utilidad de estar en contacto con el cliente
y poder escucharlo[17]. Muchas empresas implementan de esta plataforma
y cuenta con los recursos para realizarla, pero en caso de pequeñas
empresas como lo son las PYME no cuenta con recursos y conocimientos
necesarios, por eso hay de varias plataformas gratuitas que facilitan el
uso de una CRM como lo son:

12
 3.4.1. Zoho CRM: Plataforma web que permite mejorar el seguimiento de
contactos y clientes potenciales, aportando además una visión de
completa de todo el proceso comercial posee de una versión gratuita
que está limitada a 3 usuarios[20].

3.4.2. Karma CRM: Es una aplicación web que permite a pequeñas

empresas crear ofertas y enviar propuestas midiendo los resultados
de toda campaña de marketing. Su versión gratuita está limitada a 2
usuarios[20].

3.5. ERP: La ERP (Enterprise Resource Planning) traducido como sistema

de planificación de recursos empresariales son sistemas de información
que integran y manejan muchos de los negocios asociados con las
operaciones de producción y de los aspectos de distribución de una
compañía en la producción de bienes o servicios, estos sistemas
manejan la producción, logística, distribución, inventario, envíos, facturas
y contabilidad de la compañía de forma modular[26]; las características
más destacadas de una ERP son: una base de datos centralizada y datos
capturados con consistencia completos y comunes; las ERP en ocasiones
son complejas y difíciles de implantar debido a que necesitan un
desarrollo personalizado para cada empresa partiendo de la
configuración inicial de la aplicación. Algunas plataformas ERP libres para
pequeñas PYMES son:

3.5.1. Openbravo: Es una ERP basada en la nube que se distribuye bajo

licencia opensource y ofrece módulos para integrar la gestión de
compras y almacenes, gestión de proyectos y servicios, etc. También
posee de una versión comercial para grandes empresas llamada
Openbravo Professional Edition.[1]

3.5.2. Neogia: Una solución ERP opensource gratis para pequeñas y

medianas empresas. Entre sus principales funcionalidades destacan
las de actividades de producción, financieras, expedición y recepción,
gestión de stock y distribución. [1]

13
 4. Justificación

En la empresa Orange Business Services Colombia S.A se ha evidenciado durante

el desarrollo de la práctica empresarial que el problema que más se puede presentar
es la perdida de información del inventario, debido a que los equipos de cómputo
que debe estar en constante movimiento debido a que también son utilizados para
el reinicio de routers y switches almacenados en bodega, por ello estos equipos se
desgastan con más facilidad y también se genera riesgo debido a daños por alguna
caída. Además se observa que el software usado no es el más adecuado debido a
que Microsoft Excel no es muy seguro y sus archivos ocupan mucho espacio,
incluso si se hacen procesos sencillos.

La aplicación web se crea con el propósito de eliminar los riesgos que existen en el
manejo actual de inventario, ahora se podrá acceder a esta información por medio
del navegador web sin necesidad de tener un software adicional donde por medio
de usuario y contraseña podrá ingresar a las funciones de la aplicación web y podrá
realizar entrada y salida de equipos y almacenar todos los datos como orden de
compra, seriales, nombre del equipo, etc. Toda la información respectiva se
almacena en una base de datos que se manipula desde la aplicación web.

La aplicación modernizará el proceso de gestión de inventario y la unificará bajo un

mismo sistema, mejorando la funcionalidad consiguiendo que la mayor parte de los
procesos estén lo más automatizados posible y así ahorrar tiempo. Además otra
ventaja de este tipo de interfaz es que no requiere la instalación de una aplicación
cliente. Mientras se tenga una conexión a Internet (o a la red local de la empresa,
según sea el caso), se puede acceder a la aplicación web a través del típico
navegador web.

14
 5. Objetivos

5.1. Objetivo General

Desarrollar una aplicación web para gestión de inventarios de la empresa Orange

Business Services Colombia S.A para mejorar la seguridad y el manejo de
información, por medio de las herramientas de lenguaje HTML, PHP y acceso a
MySQL.

5.2. Objetivos Específicos

 Implementar un procedimiento de autenticación en el cual, por medio de

contraseña, el usuario pueda acceder y manipular la información.

 Crear una base de datos centralizada que contenga toda la información del
inventario hasta ahora.

 Manipular desde la aplicación web la información que se encuentra en la base

de datos.

 Diseñar la interfaz gráfica de la aplicación con uso de CSS para definir estilo y
apariencia, que permita una fácil accesibilidad del sitio y tener una interfaz
amable para el usuario.

 Realizar pruebas desarrollo en cada uno de las etapas del software de la

aplicación web para probar sus diferentes funciones.

15
 6. Factibilidad

Para el desarrollo de la aplicación se cuenta con varias herramientas de software

libre que permitirán crear un sitio web completo y funcional, por ejemplo programas
como LAMP, WAMP, LAMD, XAMPP, WXCF, etc. [25] Estos son programas que
permiten la utilización de un servidor local, para crear y poner en funcionamiento la
aplicación web.

Para este caso se hará uso de XAMPP que consiste principalmente en el sistema
de gestión de bases de datos MySQL, el servidor web Apache y los intérpretes para
lenguajes de script: PHP y Perl. Esta es una de las herramientas más completas
que permitirá el funcionamiento del sitio.

Para editores de texto que interpreten los lenguajes de HTML y PHP también se
cuenta con amplias herramientas de código abierto como brackets que sirve para el
diseño y desarrollo web construido sobre tecnologías como HTML, CSS y
JavaScript. La herramienta brackets nos permitirá desarrollar la parte de diseño de
la aplicación sin afectar ninguna de las funciones principales del sitio que es el
manejo de inventario.

Una limitación que se puede encontrar es que en brackets se trabaja directamente

en el navegador editando el código al instante, estableciendo breakpoints y
moviéndose con fluidez entre las diferentes vistas de código y del mismo navegador;
pero esto solo funciona con HTML y no esta soportado para PHP lo cual pone una
limitante que extiende el tiempo de trabajo.

Para la empresa, la aplicación es una mejora de su sistema que permita agilizar la

gestión, tener un mayor control y manejo de datos del inventario día a día. De esta
manera, se pueden obtener los datos más precisos y actualizados, y hacerse una
idea de cómo está el control de inventario en cada momento. Es importante buscar
que la aplicación sea escalable o flexible y pueda seguir adaptándose a las
necesidades de la empresa a medida que la información de los artículos del
inventario sean modificados. Todos estos cambios, modernización y aprendizaje del
sistema de control de inventario generará algún impacto económico a la empresa
debido a inversión en los recursos necesario para la implementación de la misma,
en contraprestación la empresa contará con los beneficios de sistematizar su
proceso de gestión de inventario.

16
 7. Marco teórico

Para la implementación de una aplicación web se debe tener en claro que es una
página web y de las herramientas o métodos que son necesarios para su desarrollo.

7.1. Página Web

Una página web es un documento que incluye un archivo HTML con texto,
imágenes, videos, animaciones Flash, etc. Al conjunto de páginas web que suelen
formar parte del mismo dominio o subdominio de Internet se lo conoce como sitio
web. Dentro del sitio web, todas las páginas guardan alguna relación entre sí y están
vinculadas mediante vínculos. Existen varios tipos de páginas, pero con la aparición
de la Web 2.0 se puede ahora hacer mucho más con las páginas web que ahora
pasan a ser mejor conocidas como aplicaciones o plataforma web que permiten la
interacción de los usuarios [8]; los sitios que forman parte de la Web 2.0 posibilitan
que los usuarios compartan información y desarrollen tareas de forma dinámica un
ejemplo de estas sitios más utilizados hoy en día son las redes sociales como
Facebook, Twitter, YouTube, etc.

7.2. Servidor Http

Los servidores Http o mejor conocidos como servidores web son programas
informáticos que funcionan bajo el concepto cliente-servidor donde el navegador
web es el cliente que solicita los sitios de internet y el servidor Http las entrega, se
procesa al lado del servidor realizando conexiones bidireccionales y/o
unidireccionales así dando una respuesta en cualquier lenguaje y el código que
recibe el cliente es decir el navegador web es compilado y ejecutado; para la
transmisión de toda esta información suele usarse de un protocolo que es el HTTP
(Hypertext Transfer Protocol es el protocolo de comunicación que permite las
transferencias de información en la World Wide Web)[24].

Figura 1. Proceso de un servidor Http. Imagen tomada: http://diymakers.es/raspberry-pi-como-

servidor-web

17
 7.3. Plataformas tipo ERP

Anteriormente en los antecedentes se mencionaron los diferentes tipos de

plataformas y aplicaciones como la e-learning, e-commerce, e-social, CMR y las
ERP. El proyecto a realizar va ser con la funcionalidad de inventario de una
plataforma ERP. Los ERP son los sistemas de planificación de recursos, estas
plataformas normalmente son utilizadas por las empresas ya que permiten planificar
y controlar los procesos y recursos de negocio, el sistema hace que todos los
procesos y datos de la compañía estén conectados, sus principales objetivos son
optimizar los procesos de la empresa, tener un mejor acceso a la información,
compartir la información entre todos los componentes de la organización.

Las empresas hacen uso de esta herramienta debido a la diversidad de ventajas

que ofrece, da los beneficios de rentabilizar procesos, las plataforma son totalmente
personalizables y se adaptan a la características de cada empresa, permite el
control de operaciones de una manera más sencilla y mejora la eficiencia general
de una empresa[26]. A continuación se muestra en la imagen cuales son la funciones
que van integradas en un sistema de planificación de recursos:

Figura 2. Componentes que conforman un sistema de planeación de recursos(ERP). Imagen

tomada: http://matiaswiesnercarp40.blogspot.com.br/2014/10/erp-planificacion-de-recursos.html

18
Los ERP buscan un eficiente manejo de información que permita la toma oportuna
de decisiones y disminución de los costos totales de operación, las características
de estas plataformas diferentes a cualquier software empresarial es que son
modulares y configurables[13]. En los modulares la plataforma entiende que la
empresa está conformada por varios departamentos que están relacionados por la
información que comparten y la funcionalidad del ERP se encuentra dividida en
módulos los cuales se suministran de acuerdo a si son venta, materiales, finanzas,
control de almacén, recursos humanos, etc. Los ERP al ser configurables son muy
útiles porque permiten ser configurados mediante desarrollos en el código del
software como para controlar inventarios; es necesario que el ERP se pueda
configurar para adaptarse a diferentes organizaciones y procesos, teniendo en
cuenta además que las necesidades de la empresa que varían a través del tiempo.

7.4. XAMPP

XAMPP[27] es un servidor independiente de software libre, su nombre proviene del

acrónimo X que significa que es multiplataforma y funciona en diferentes sistemas
operativos como los Windows, Linux, Solaris y Mac OSX; la A es del servidor web
apache, M de uso de MySQL (base de datos) y P P para los lenguajes de script PHP
y Perl. El programa se distribuye bajo la licencia GNU(es la licencia más
ampliamente usada en el mundo del software y garantiza a los usuarios finales la
libertad de usar, estudiar, compartir y modificar el software) y actúa como un
servidor web libre, fácil de usar y capaz de interpretar páginas dinámicas; con lo
cual será posible implementar la aplicación web y hacer las respectivas pruebas de
su funcionamiento.
A continuación en la imagen se muestra de cómo es panel de control de XAMPP y
las funciones que ofrece:

Figura 3. Panel de control del servidor web XAMPP Imagen tomada:

http://www.mclibre.org/consultar/php/otros/in_php_instalacion.html

19
En la figura 3 se observa el funcionamiento del software mostrando las funciones y
servicios que ofrece; se cuenta con la herramienta Apache que será responsable de
abrir puertos de internet http y https o puerto 8080 permitiendo cargar las paginas o
aplicaciones webs creadas en nuestro navegador con la dirección de
http:\\localhost\ o por la dirección de servidor local 127.0.0.1.

A continuación se da explicación de cada servicio o módulo de XAMPP aclarando

sus funciones y explicando cuáles son necesarias para la aplicación web:

7.4.1. Apache

Apache es un servidor web de código abierto, es el servidor más utilizado en mundo,

principalmente para enviar páginas web estáticas y dinámicas en la World Wide
Web[19]; es una plataforma muy robusta y que destaca por su seguridad y excelente
rendimiento, Apache nos permite configurar un hosting virtual basado en IPs o en
nombres, es decir, tener varios sitios web en un mismo equipo con el fin de pre
visualizar y probar códigos mientras se está desarrollando[18].

Apache posee de una arquitectura que va separada por módulos que aportan a la
funcionalidad de un servidor web básico, estos módulos son:

 mod_ssl: Comunicaciones Seguras vía TLS (Transport Layer Security en

español seguridad de la capa de transporte)[10].
 mod_rewrite: Reescritura de direcciones (generalmente utilizado para
transformar páginas dinámicas como php en páginas estáticas Html) [10].
 mod_dav: Soporte del protocolo WebDAV (Creación y control de versiones
distribuidos en web), la WebDAV cumple con el objetivo de hacer de la World
Wide Web un medio legible y editable[10].
 mod_deflate: Compresión transparente con el algoritmo deflate (algoritmo de
deflaccion) del contenido enviado al cliente[10].
 mod_auth_ldap: Permite autentificar usuarios contra un servidor
LDAP(Protocolo ligero de acceso a directorios es la que permite el acceso a
un servicio de directorio ordenado y distribuido para buscar diversa
información en la red) [10].
 mod_proxy_ajp: Conector para enlazar con el servidor Jakarta Tomcat de
páginas dinámicas en java[10].
 mod_cfml: Conector CFML(Es un lenguaje de script basado en etiquetas que
soporta la creación de páginas web dinámicas y acceso a base de datos en
un entorno de servidor) usado por Railo(software que implementa el uso
general CFML del lado del servidor lenguaje de script para crear sitios web
dinámicos)[10].

20
 7.4.2. MySQL

MySQL es un sistema de gestión de bases de datos que es un conjunto de tablas

que tiene un nombre con el cual se accederá a ella, la tabla es una estructura de
datos que organiza los datos en columnas y filas; cada columna es un campo y cada
fila, un registro[15]. Funciona como interpretador de SQL(lenguaje declarativo de
acceso a bases de datos relacionales que permite especificar diversos tipos de
operaciones), permite crear bases de datos y tablas, insertar datos, modificarlos,
eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc.

MySQL es muy utilizado en aplicaciones web, en plataformas Linux, Windows,

Apache, PHP/Perl/Python, y por herramientas de seguimiento de errores como
Bugzilla(Herramienta basada en Web de seguimiento de errores usada por el
proyecto Mozilla), su popularidad como aplicación web está muy ligada a PHP, que
constantemente aparece en combinación con MySQL. El sistema ofrece muchas
ventajas como un amplio subconjunto del lenguaje SQL, disponibilidad en gran
cantidad de plataformas y sistemas, posibilidad de selección de mecanismos de
almacenamiento que ofrecen diferentes velocidades de operación, soporte físico,
capacidad, distribución geográfica, etc.

Una herramienta muy útil y que facilita el manejo de MySQL con el objetivo de
administrarla a través de la web es phpMyAdmin, es una herramienta hecha en php
donde por el navegador web agrega, elimina y modifica las base de datos que se
desee manipular, con el phpMyAdmin se tiene las ventajas de que todo se realiza
por interface web; también se pueden importar datos en formato SQL y
CSV(Formato sencillo para representar datos en forma de tabla, en las que las
columnas se separan por comas), permite exportar datos en formatos como PDF,
SQL, XML y CSV y también posee la gran ventaja de administrar múltiples
servidores[5].

Figura 4. Funcionamiento de phpMyAdmin en navegador web imagen tomada:

https://sourceforge.net/projects/phpmyadmin/

21
 7.4.3. Filezilla

FileZilla es un cliente FTP (Protocolo de Transferencia de Archivos) multiplataforma

de código abierto y software libre con la función de conectarnos desde nuestro
ordenador, a un servidor Web donde podemos tener acceso a varias carpetas y
acelerar el proceso de conexión a las mismas. Posteriormente permite en detalle
como configurar el acceso a un nuevo sitio[9].

7.4.4. Mercury

XAMPP tiene incorporado de Mercury mail transport sistem esta función es muy útil
por si se van a realizar plataformas que hagan uso de correo electrónico, ya que
Mercury es un servidor web independiente que proporciona servicios de mail a todos
los clientes de correo electrónico compatibles con los estándares, tales como
Microsoft Outlook. XAMPP incluye esta herramienta para que los desarrolladores
web puedan realizar pruebas enviando mensajes a cualquier correo con la dirección
local de la máquina[11].

7.4.5. Tomcat

La función de tomcat trabaja como un contenedor de servlets (lenguaje de

programación en java, muy utilizado para ampliar las capacidades de un servidor),
tomcat también puede funcionar como un servidor web como apache pero este
posee la característica de ser un servidor web autónomo en entornos con alto nivel
de tráfico y alta disponibilidad, tomcat funciona en cualquier plataforma o aplicación
que tenga máquina virtual de java[3].

Como se puede ver XAMPP es una plataforma muy completa y útil que nos permite
realizar de desarrollos web muy completos y probar de varias funciones que se
implemente en la programación web. Para la implementación de nuestra aplicación
web para la empresa solo será necesario de usar de las funciones apache y MySQL
de XAMPP que son las herramientas suficientes para poner en funcionamiento
nuestro sitio.

7.5. HTML

HTML significa HyperText Markup Language (lenguaje de marcas de hipertexto) es

un lenguaje que se utiliza para el desarrollo de sitios web, se compone de varias
etiquetas que el navegador se encarga de interpretar, la etiqueta es una palabra en
inglés o un carácter, ubicado entre los símbolos (<) y (>). El HTML se encarga de
desarrollar una descripción sobre los contenidos que aparecen como textos y sobre
su estructura, complementando dicho texto con diferentes objetos como fotografías,
animaciones, etc. [12]

22
HTML también permite ingresar otros tipos de código conocidos como scripts, ya
que el HTML es lenguajes que desarrolla páginas de tipo estático, es decir que solo
son sitios para acceder y observar la información que se encuentra en el sitio web,
pero no tiene una interacción directa con el usuario para realizar cambios y guardar
información en la página, los scripts brindan instrucciones específicas a los
navegadores que se encargan de analizar y ejecutar, los lenguajes más conocidos
y utilizados para los scripts son JavaScript y PHP[12].

Para el desarrollo de un sitio web en HTML siempre debe empezar con la misma
estructura para el correcto funcionamiento del codigo como se ve a continuación:

<html>
<head>
<title>Título del sitio web</title>
</head>
<body>
<!—Codigo de la aplicación web -->
</body>
</html>

 <html>: define el inicio del documento HTML, le indica al navegador que lo

que viene a continuación debe ser interpretado como código HTML.
 <head>: define la cabecera del documento; esta cabecera suele contener
información sobre el documento que no se muestra directamente al usuario
como, por ejemplo, el título de la ventana del navegador.
 <body>:Se escribe el contenido principal o cuerpo del documento. Esta es la
parte del documento HTML que se muestra en el navegador; dentro de esta
etiqueta pueden definirse propiedades comunes a toda la página, como color
de fondo y márgenes.

7.6. PHP

PHP significa Hipertext Preprocesor es un lenguaje de código abierto muy popular

esencialmente adecuado para el desarrollo web y que puede ser incrustado en
HTML, este es un lenguaje que se ejecuta en el servidor web, PHP es rápido, con
una gran librería de funciones y mucha documentación[2]. Las páginas que se
ejecutan en el servidor pueden realizar accesos a bases de datos, conexiones en
red, y otras tareas para crear la página final que verá el cliente aunque el cliente
solo recibirá el código del sitio en HTML que resulta de la ejecución del PHP como
se muestra en la siguiente imagen:

23
 Figura 5. Proceso de petición HTTP con código PHP. Imagen Tomada:
http://diymakers.es/raspberry-pi-como-servidor-web/

PHP es muy utilizado para crear páginas web dinámicas con la ventaja que tiene
compatibilidad con las bases de datos más comunes, como MySQL, Oracle, etc.
Incluye funciones para el envío de correo electrónico, carga de archivos, crear
dinámicamente en el servidor imágenes en formato GIF y una variedad de utilidades
adicionales[2].

Un script PHP, ya sea externo o interno del código HTML, debe abrir el espacio de
codificación como se muestra a continuación para que el navegador reconozca que
esa sección corresponde a código escrito en PHP:

<?php

// Aquí va el código escrito en PHP.

?>
7.7. CSS

CSS u hoja de estilos en cascada es un lenguaje creado para controlar el aspecto

o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS
es la mejor forma de agregar tributos como fuente, color, tamaño etc. CSS es
imprescindible para crear páginas web complejas [21].

El objetivo del desarrollo de CSS es separar la estructura de un documento de su

presentación, esto genera numerosas ventajas, ya que obliga a crear documentos
HTML bien definidos. Además, mejora la accesibilidad del documento, hace que el
mantenimiento de la página web sea más rápido, permite visualizar el mismo
24
documento en infinidad de dispositivos diferentes [6]. Para el siguiente ejemplo se
muestra el caso de una página web donde se utiliza el CSS para su creación:

Figura 6. Muestra de un sitio web con y sin la función CSS Imagen Tomada:
http://es.railsbridge.org/frontend/CSS_basico.

En la figura 6 se muestra el ejemplo de una página web creada en HTML y CSS, se

puede observar del lado derecho como quedaría el sitio web para este caso sin el
uso de CSS, mas esto no implica que el sitio deje de funcionar y también se puede
lograr sin la necesidad CSS el resultado de la parte izquierda de la figura 6. El uso
CSS es muy importante ya que facilita la manera de cómo realizar la presentación
de un sitio web, por eso cuando se crea el sitio web se utiliza de HTML para
designar las funciones de cada elemento, luego se implementan funciones de CSS
para definir el aspecto de cada elemento y mejorar la presentación del sitio.

7.8. Bootstrap

Bootstrap es un framework desarrollado que tiene como objetivo facilitar el diseño

web. Permite crear de forma sencilla webs de diseño adaptable, es decir, que se
ajusten a cualquier dispositivo y tamaño de pantalla y siempre se vean igual de bien.
Es Open Source o código abierto, por lo que lo podemos usar de forma gratuita y
sin restricciones [28].

Boostrap ofrece las ventajas de tener una web bien organizada de forma visual,
también permite utilizar muchos elementos web desde iconos a desplegables,
combinando HTML5, CSS y Javascript y que el diseño será adaptable, no importa
el dispositivo, la escala o resolución.

25
 7.9. Javascrypt

JavaScript es un lenguaje ligero e interpretado, orientado a objetos con funciones

de primera clase, más conocido como el lenguaje de script para páginas web, pero
también usado en muchos entornos sin navegador, tales como node.js o Apache.
Es un lenguaje script multi-paradigma, basado en prototipos, dinámico, soporta
estilos de programación funcional, orientada a objetos e imperativa [29].

La ventaja de JavaScript es que al estar alojado en el ordenador del usuario los

efectos son muy rápidos. Al ser un lenguaje de programación permite toda la
potencia de la programación como uso de variables, condicionales, bucles, etc.

7.10. jQuery

jQuery es uno de los complementos más esenciales para el desarrollo web, usado
en millones de sitios en toda la web, ya que nos facilita mucho el desarrollo de
aplicaciones enriquecidas del lado del cliente, en Javascript, compatibles con todos
los navegadores. jQuery no es un lenguaje, sino una serie de funciones y métodos
de Javascript. Por tanto, Javascript es el lenguaje y jQuery es una librería que
podemos usar opcionalmente si queremos facilitar nuestra vida cuando
programamos en Javascript. A veces nos podemos referir a jQuery como framework
o incluso como un API de funciones, útiles en la mayoría de proyectos web [30].

26
8. Diseño metodológico

Figura 7. Flujograma de los pasos a realizar para la implementación del proyecto.

27
Para la realización de la aplicación web se utilizan técnicas de observación para
determinar qué es necesario y que funciones básicas debe cumplir el sitio, con estas
observaciones se dispone a investigar que riesgos o deficiencias posee el manejo
actual de inventario de la empresa Orange Business Services Colombia S.A., una
vez identificados los riegos que posee el manejo actual de inventario, inicia con la
implementación de la aplicación web cuyo proceso de desarrollo se muestra en la
figura 7.

Como se puede observar se inicia con la recolección de información de cuales

herramientas son necesarias, para poder lograr crear y poner en funcionamiento la
plataforma Web, se encuentra que el uso del software XAMPP, es una herramienta
muy completa que proveerá de un servidor local que permitirá montar la plataforma
y probar su funcionamiento a través del navegador web, a continuación se realizan
pruebas con funciones escritas en código HTML y PHP para comprobar que tanto
el servidor local como el navegador web soporten estos lenguajes de programación
y a futuro no presente inconvenientes que dificulten el montaje del proyecto, una
vez realizada las pruebas con el uso de la herramienta proporcionada por XAMPP
phpMyAdmin facilitará la forma de cómo crear una base de datos y también lograr
migrar la información del inventario actual a la base de datos donde toda esta
información se encontrará segura y a salvo. Luego se hacen pruebas con funciones
PHP que permitan acceder a la base de datos por medio del navegador web dando
como resultado el inicio de funcionamiento del proyecto, ya realizadas las pruebas,
se dispone a crear el código general del proyecto que ya permitirá la completa
manipulación del inventario y crear nuevos registros para entradas y salidas de
equipos haciendo llevar un mejor control del inventario de manera más sencilla, ya
cuando las funciones de la plataforma web estén completas, se realiza el paso final
de diseñar la interfaz gráfica de manera que la plataforma Web sea agradable a la
vista por lo que la información mostrada será más organizada y más entendible para
el usuario final.

28
9. Ejecución del proyecto

Figura 8. Diagrama de bloques de la aplicación web.

29
En la figura 8 se muestra el diagrama de bloques general de la aplicación web, que
muestra el funcionamiento de la aplicación y de los pasos a seguir que realiza para
el proceso de la información en el manejo del inventario, la figura muestra los flujos
a seguir dependiendo de las opciones seleccionadas por el usuario, en el diagrama
se muestra el momento donde la aplicación hace conexión a la base de datos y de
cómo la base de datos devuelve la información concerniente y después muestra las
demás opciones, en la continuación de este documento se ira explicando con detalle
el desarrollo y manejo de la aplicación web.

9.1. Base de datos

En la ejecución del proyecto lo primero a realizar es correr el servidor apache y el

MySQL con XAMPP, luego se pasa la información actual del inventario que es
manejada mediante un archivo con formato de EXCEL a una base de datos nueva
en MySQL para poder manipularla desde la aplicación web.

Figura 9. Inventario actual de la empresa Orange Business Services.

Con el uso de phpMyAdmin se crea una base de datos llamada db_inventario donde
se migrara la información de las 4 tablas observadas en la figura 9, a 4 nuevas
tablas creadas en la base de datos. Para este proceso la información del inventario
en Excel se organiza de tal forma que solo contenga la información de las celdas
que se encuentran en cada tabla.

Para el caso de la primera tabla contiene la información de todos los equipos nuevos
que llegan a la empresa, la segunda almacena la información de las salidas de estos
equipos, la tercera almacena el registro de equipos usados que son los equipos que
30
han vuelto a la empresa después del su uso con algún cliente y la cuarta almacena
la salida de estos equipos usados, que significa que el equipo fue prestado de nuevo
o salió de bodega para uso interno de la empresa.

Una vez organizada la información en un archivo independiente en cada tabla se

guarda con formato CSV(delimitado por comas), guardada con este formato hará
que la migración echa por phpMyAdmin sea más sencilla y rápida.

Ya generando los archivos en CSV se ingresan a phpMyAdmin y mostrará una

interface como se muestra en la figura 4, se crean las tablas en la base de datos
db_inventario, y a cada una se les genera la columna correspondiente a la
información de cada tabla como por ejemplo orden de compra, modelo, serial,
fabricante, bodega, ubicación, etc. Una vez creadas phpMyAdmin tiene una opción
de importar la cual permite cargar la información cargada en los archivos CVS
previamente creados. Se selecciona el archivo correspondiente en cada tabla y se
importa a la base de datos, y así la base de datos del inventario es creada y se
puede visualizar en phpMyAdmin como se observa en la figura 10.

Figura 10. Inventario en la base de datos vista con phpMyAdmin en el navegador.

Luego de haber pasado la información del inventario a una base de datos se crea
otra base datos para los usuarios que puedan acceder a la aplicación web, con el
nombre db_usuario y contendrá la tabla usuarios, como se muestra en la figura 11,
donde la aplicación web se conectará para autenticar el usuario y no cualquiera
puede acceder a la información del inventario, la tabla contendrá la información del
nombre, apellido, correo y contraseña. La creación de una segunda base de datos
31
se realiza debido a que contiene información solo de los usuarios y la empresa ya
contiene una base donde se encuentra toda la información de los empleados de la
empresa, la idea es que en un futuro la aplicación se acople a las demás plataformas
que posea la empresa y se pueda expandir a las demás sedes que posee, además
que la utilización de más de una base de datos ofrece ventajas como que los
procesos serán más rápidos y hace que el tamaño de cada base de datos sea menor
y también en cuestiones de seguridad es mucho mejor, ya que si una base de datos
se ve comprometida las demás no serán afectadas.

El administrador del sitio o aplicación web podrá crear los usuarios generando una
clave genérica y después el usuario podrá cambiar esta clave accediendo desde la
aplicación, cuando el usuario genere su nueva clave personal la aplicación web
encriptará y la guardará en la base de datos para usuarios y no correr el riesgo de
que el administrador no pueda observar su clave personal.

Figura 11. Usuarios registrados en la base de datos.

Al finalizar la creación de las bases de datos se hacen pruebas de desarrollo para

comprobar que las bases de datos funcionan correctamente haciendo uso de las
herramientas de phpMyAdmin para comprobar que se permite el ingreso, la edición
y la eliminación de registros de las bases y que también la información permanezca
intacta y coincida con el inventario de la empresa.
32
 9.2. Aplicación Web

La programación de la aplicación web se realiza por medio de brackets que fue el

software utilizado para la programación en lenguaje HTML, PHP y CSS.

En la ejecución de aplicación se inicia creando el proceso de autenticación, para

que en la aplicación solo puedan acceder los usuarios permitidos. Luego de realizar
los formularios que se conectan con la base de datos y muestran toda la información
del inventario y las opciones que permitan la manipulación de la información. Para
cada proceso se realizan pruebas de desarrollo para comprobar el funcionamiento
y realizar las respectivas correcciones.

Figura 12. Programa Brackets.

9.2.1. Proceso de autenticación

En brackets se empieza a programar el procedimiento de autenticación en el archivo

index.php del código de programación, se observa que en HTML se programa el
formulario donde se digitará el correo y la contraseña, aquí una vez que digite los
datos y oprima el botón ingresar, la aplicación llamará un segmento del código en
PHP llamada validar.php que se encargará de verificar si los datos ingresados
coinciden con algunos de los datos que se encuentra en la base de datos de
usuarios, las pruebas realizadas en el proceso de autenticación consiste en que no
se accediera si el correo ingresado no está registrado y la aplicación informará por
33
medio de un scrypt alert en javascrypt(localizado en validar.php en codigo) que el
usuario ingresado no existe como se muestra en la figura 14 y automáticamente lo
retornará a la página principal, si el correo ingresado es correcto pero la contraseña
errónea igualmente por medio de otro alert informará que la contraseña es
incorrecta como se observa en la figura 15.

Figura 13. Página Principal de la aplicación web.

34
Figura 14. Alerta de que el correo ingresado es incorrecto.

Figura 15. Alerta de contraseña ingresada incorrecta.

35
 9.2.2. Formularios

Figura 16. Formulario donde puede acceder y manipular inventario.

Para los formularios con la función de PHP session_start(); se crean las variables
de sesión donde se le informa a la aplicación quien está conectado y la aplicación
da la bienvenida como se observa en la figura 16 en el cuadro enmarcado en rojo
la aplicación muestra el usuario conectado, también muestra la fecha, y las opciones
de cerrar sesión y cambiar contraseña.

Para el diseño de la página se usan de los archivos estilos.css e inventario.css que

son los segmentos de código en CSS que utilizamos para darle presentación a la
página web también con ayuda del framework de Boostrap para darle una
apariencia más personalizada.

Figura 17. Selectores de las tablas del inventario.

En la figura 17 se muestra las opciones que permiten ingresar a la información del

inventario a generar el click en una de estas opciones la aplicación conectará con
36
la bases de datos y recogerá toda la información de la tabla deseada y la mostrará
en pantalla y se podrá desplazar utilizando una barra de navegación puesta en la
tabla a mostrar como observaremos en la figura 18.

Otra función que se agrega a la aplicación web es que al momento de generar un

click en las opciones el navegador no cargaba la tabla después de un tiempo que
tampoco es muy prolongado y esto hacia parecer como si la aplicación se hubiera
bloqueado. Entonces se optó por crear una función de cargar con uso de jQery y
Javascrypt que permitirá que la aplicación sea más dinámica y le muestre al usuario
que la información se está cargando como se observa en la figura 19 (el diseño de
esta función se encuentra también en el archivo inventario.php del código).

Figura 18. Inventario mostrado en la aplicación

Figura 19. Función cargando cuando la aplicación procesa la información.

37
Para el caso de la figura 18 se muestra información de los equipos nuevos
registrados ya que la opción seleccionada fue equipos nuevos, como se observa
muestra un listado de cada equipo registrado y la información que concierne a la
empresa como el número de la orden compra, serial, modelo, ubicación, etc. Al lado
de cada registro se observan unos iconos pequeños que se puede ver en la figura
20.

Figura 20. Opciones de Editar, Eliminar y generar salida.

Esta son las opciones para manipular información que ya se encuentra en el

inventario, cada opción se programó de tal manera que cumpliera con la función
específica, en el caso del icono que parece un lápiz es para poder editar la
información de un registro ya sea porque al agregar nueva información se cometió
algún error o se cambió de lugar algún equipo dentro de la bodega se necesita
reubicar en el inventario. El icono que parece una caneca es utilizado para eliminar
el registro seleccionado este icono se crea con el objetivo de eliminar información
ya muy antigua sobre todo en el registro de salidas que en un futuro ya no sea de
importancia y liberar espacio en la base de datos, aun así al seleccionar esta opción
se mostrará al usuario el registro que desea borrar y la opción si de verdad desea
borrar el registro. Por último el icono de salida solo aparecerá para las opciones de
Equipo nuevos y Equipos usados que son los registros de los equipos que están
dentro de la empresa esta opción es utilizada para generar la salida de algún equipo,
la opción la enviará a un formulario que le mostrará la información del equipo al cual
generarle salida y complementarla con una información adicional y la exportará a
las tablas de salida de equipos nuevos o usados cual sea el caso en las figuras 21,
22 y 23 se mostrará el respectivo formulario al cual redirigen cada una de estas
opciones.

38
 Figura 21. Formulario de edición de un registro.

Cuando se selecciona la opción de editar de algún registro del inventario la

aplicación accede a un archivo de Editar.php (Existen 4 archivos editar dependiendo
de la tabla a manipular) el archivo generará un formulario como el de la figura 20
donde cada casilla mostrará la información actual con la que está cargada cada
registro, ya modificada la información a darle click en actualizar la aplicación correrá
un archivo de accion.php que se encargará de actualizar esta información en la base
de datos y luego mostrar un scrypt de que la información se actualizo correctamente
parecido a los scrypt que se muestran en las figuras 14 y 15.

Figura 22. Formulario de eliminar un registro.

39
Cuando se selecciona la opción de eliminar de algún registro del inventario la
aplicación accede a un archivo de Eliminar.php (Existen 4 archivos eliminar
dependiendo de la tabla a manipular) el archivo generará un formulario como el de
la figura 21 donde se muestra el registro a eliminar y las opciones de volver o
confirmar si se elimina el registro, una vez se confirma de que se quiere eliminar la
aplicación de nuevo va accion.php y elimina la información de la base de datos.

Figura 23. Formulario de salida para un registro.

Cuando se selecciona la opción de salida de algún registro del inventario la

aplicación accede a un archivo de Salida.php (Existen 2 archivos salida
dependiendo de la tabla a manipular) el archivo generará un formulario como el de
la figura 22 donde se muestra el registro a manipular y se da la opción de generar
salida, la aplicación ira al archivo SA.php o SU.php dependiendo si el equipo al salir
es nuevo o usado el archivo modificará la base de datos pasando la información de
una tabla a otra y complementándola con las casillas de la figura 23 y por ultimo
eliminando el registro que se encontraba en equipos disponibles para rectificar que
ya no se encuentra en la empresa.

Para la realización de los iconos anteriormente mencionados, se hizo uso de una

herramienta muy útil llamada Font Awesome[31] que es una fuente gratuita que se
puede usar para implementar iconos sin necesidad de imágenes y que es de fácil
implementación con CSS, para el llamado de esta función ser carga el archivo que
viene gratuito de la página principal[31]. Y se carga al programa con la instrucción
HTML: <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"
type="text/css">. La instrucción carga el archivo donde se encuentra predefinido los

40
iconos, para el icono de cerrar sesión vista en la figura 15 también se utilizó de esta
muy útil herramienta haciendo que la aplicación web sea más cómoda de manejar
y tenga una mejor distribución de espacio.

Para la función de agregar que se observa en la figura 16 enmarcada en verde se

usó de bootstrap[28] un framework de CSS para generar una lista despegable cuando
el cursor del mouse se pase encima de el botón agregar, apareciera las opciones
de equipo nuevo o usado, esto con el propósito de que la aplicación fuera más
cómoda y atractiva para el usuario y también por mejoramiento de espacio en la
pantalla y se visualizaría como esta en la figura 24.

Figura 24. Menú despegable de agregar.

Se observa que en agregar aparecen dos nuevas opciones, de equipo nuevo y

equipo usado, dependiendo de cuál es el equipo a agregar una vez se genere el
click en alguna de estas 2 opciones la aplicación web cargará el archivo
AgregarN.php o AgregarU.php que muestra el respectivo formulario de cada una
como se observa en la figura 25, luego se ingresará un nuevo equipo al inventario
con la información concerniente. Otra ventaja de la aplicación web es que las fechas
de entrada y salida son generadas automáticamente y ya no es necesario
ingresarlas a mano cómo se manejaba anteriormente. Una vez digitada la
información y se da click en agregar al inventario la aplicación se ira a accion.php y
cargará la información nueva a la base de datos.

41
 Figura 25. Formularios de agregar de equipos nuevos y usados.

Para la función de cerrar sesión mostrada en la figura 16 enmarcada en rojo, al

generar el click carga el archivo desconectar.php que hará que todas las variables
de sesión cargadas se borren y re direcciona la aplicación de nuevo al índice como
el de la figura 13 esperando de nuevo el ingreso del usuario y su contraseña.

La función de cambio de contraseña enviará a la aplicación al archivo password.php

que mostrara el formulario de la figura 26, al momento de darle click a cambiar se
carga el archivo registrar.php que se observa que las contraseñas ingresadas sean
iguales, en el caso que no sean iguales se mostrará un scrypt alert informando que
la contraseñas no son iguales y retornará a la sección de inventario. Si la
comparación de las contraseñas ingresadas fue correcta la aplicación web
encriptará la nueva contraseña con la función md5 (es un algoritmo de reducción
criptográfico de 128 bits ampliamente usado) de PHP y luego la almacenará en la
base de datos de usuarios.

Figura 26. Formularios de cambio de contraseña.

42
En las pruebas de desarrollo finales respecto a los formularios de la aplicación web
los resultados fueron exitosas debido a que cada acción de la aplicación web
funcionaba como correspondía, en cuanto a ofrecer una herramienta para realizar
el control de los inventarios, la aplicación facilita el trabajo de los operadores y
garantiza un mejor manejo de existencias, que facilite tanto el conteo como el
ofrecer a los clientes los productos; teniendo la seguridad que estos inventarios son
reales.

Por último para determinar si la aplicación web cumple con los objetivos se realizó
una encuesta a usuarios que ya hayan tenido experiencia en el manejo del
inventario de la empresa para determinar que la aplicación web cumpliera con las
expectativas, las encuestas se realizaron por medio de correo electrónico y se
podrán ver las evidencias en la parte de anexos.

La encuesta costaba de las siguientes preguntas:

 ¿La interfaz de la aplicación web le pareció fácil de usar?

 ¿Cómo valora el aspecto de la aplicación web?
 ¿Cómo sintió la funcionalidad de la aplicación web?
 ¿Qué tan comprensible le pareció la información web del inventario?
 ¿Qué le parece el nuevo sistema de inventario comparado al método
anterior?
 ¿En que mejoraría la aplicación web?

Los resultados generales de la encuesta fueron los siguientes:

 A todos les pareció que la aplicación web es fácil e intuitiva de utilizar, que
las opciones son bien claras y no presenta de ninguna complicación.
 El aspecto es bastante cómodo y ayuda al confort del manejo de la aplicación
web.
 En general la aplicación funciona correctamente y realiza todas sus funciones
correctamente.
 La información se muestra de acuerdo al formato utilizado del inventario y la
información muestra de forma organizada y clara.
 Se evidencia que el nuevo sistema es más seguro y el ingreso de
información es más organizado evitando errores que se generen en el
proceso de nuevos equipos al inventario.
 En sí, en el funcionamiento de la aplicación web no se mencionó de ninguna
mejoría excepto en un caso que se mencionaba que sería útil que se
optimizará para dispositivos móviles como tablets y celulares ya que no
funciona de manera igual.

43
 10. Conclusiones

Durante el desempeño en la empresa Orange Business Services y en la elaboración

del trabajo se pudo conocer la importancia que tiene en las empresas el contar con
un sistema de información que maneje sus recursos y que se pueda conocer en
tiempo real la existencia de los mismos con el fin de optimizarlos y controlarlos.

La principal importancia para el desarrollo del proyecto, para el manejo del

inventario de la empresa Orange Business Services fue el aumento de seguridad y
organización de la información, debido a la poca seguridad que presenta el manejo
actual y el software utilizado no es el adecuado ya que es susceptible a que la
información se desorganice o se pierda por errores humanos y daños en el equipo
de cómputo.

Para este nuevo sistema los usuarios solo necesitan de un ordenador con un
navegador web y conectarse a Internet haciendo que consuma menores recursos
como los programas instalados en un ordenador y el cual puede ser utilizado desde
cualquier sitio lo cual facilita la labor de los usuarios que tienen acceso al inventario,
para el montaje de la aplicación solo es necesario de un host, ya sea público o de
la intranet de la empresa, para que la aplicación se encuentre en la red.

La aplicación web será menos propensas a bloquearse y crear problemas o errores

internos debido a conflictos con los equipos de cómputo o con otro software que se
esté utilizando del personal interno de la empresa, y además todos los usuarios
utilizarán la misma versión de la aplicación web y en posibles fallos que puedan
aparecer pueden ser corregidos tan pronto son descubiertos desde cualquier punto.

44
 11. Administración del proyecto

Para la realización del proyecto se planteó el siguiente cronograma de actividades

dividido por semanas durante el mes como se ve a continuación:

MARZO ABRIL MAYO JUNIO JULIO

ACTIVIDADES
S1 S2 S3 S4 S1 S2 S3 S4 S1 S2 S3 S4 S1 S2 S3 S4 S1 S2 S3 S4

Investigación y planteamiento de la
idea de proyecto

Recolección de la información
necesaria para la implementación de
la aplicación web.

Instalación del software XAMPP y

Brackets.

Primeras pruebas con funciones

HTML y PHP

Pruebas con phpMyAdmin para

manejo de base de datos

Migrar la información de inventario

de la empresa a la base de datos

Realizar la interacción con la base de

datos desde el navegador web

Implementar la funciones de registro

a entrada y salida de equipos en la
aplicación web

Implementar diseño y presentación

de la aplicación Web

Pruebas de rendimiento y resolución

de errores encontrados

Implementación final de la aplicación

Web

Tabla 1. Cronograma de actividades.

45
 12. Bibliografía

[1] “10 Programas ERP Software Libre y gratis para PYMES”. Noviembre 2011.
Disponible en:
https://observatorioredesempresariales.wordpress.com/2011/11/01/10-programas-
erp-software-libre-y-gratis-para-pymes/.

[2] Álvarez Miguel Angel“¿Qué es PHP?” Mayo 2001. Disponible en:

http://www.desarrolloweb.com/articulos/392.php

[3] “Apache Tomcat”. Disponible en: http://tomcat.apache.org/

[4] “Aspectos Tecnológicos” Disponible en:

http://www.vendeseninternet.es/vendes/sites/default/files/3-
Aspectos%20tecnologicos%20Presentaci%C3%B3n.pdf

[5] “Bringing MySQL to the web”. Disponible en: https://www.phpmyadmin.net/

[6] “CSS basico”. Disponible en: http://es.railsbridge.org/frontend/CSS_basico

[7] “Definición de Amazon”. Octubre 2014. Disponible en:

http://conceptodefinicion.de/amazon/

[8] “Definición de Web”. Disponible en: http://definicion.de/web/

[9] “FileZilla” Disponible en: https://filezilla-project.org/.

[10] “Funcionalidad Básica y Módulos de Multi Procesamiento”. Disponible en:

http://httpd.apache.org/docs/2.0/es/mod/.

[11] Harris David. “Mercury Mail Transport System, Overview”. Disponible en:
http://www.pmail.com/overviews/ovw_mercury.htm

[12] “HTML”. Disponible en: http://definicion.de/html/

[13] Lara Martínez Octavio Rolando. ” ERP: Planificación de recursos

empresariales”. Diciembre 2011. Disponible en: http://www.gestiopolis.com/erp-
planificacion-de-recursos-empresariales/.

[14] “Las mejores plataformas e-learning de software libre” Disponible en:

http://www.lanavetic.com/las-mejores-plataformas-e-learning-de-software-libre/

[15] “MySQL Ya”. Disponible en: http://www.mysqlya.com.ar/index.php?inicio=0.

46
[16] “Open English” Disponible en: http://www.openenglish.com/como-funciona/

[17] “Plataformas tecnológicas de CRM: De los datos al conocimiento” Disponible

en: http://www.puromarketing.com/20/5585/tecnologicas-datos-conocimiento.html

[18] “Que hace un servidor Web como Apache” Disponible en:

http://www.digitallearning.es/blog/apache-servidor-web-configuracion-apache2-
conf/.

[19] “¿Qué es Apache?”. Disponible en: http://culturacion.com/que-es-apache/

[20] ”¿Qué es el CMR?” Disponible en:

asesoresdepymes.com/innovacion...de.../que-es-el-crm-y-4-herramientas-para-
usarlo/

[21]”¿Qué es el CSS?” Disponible en: http://librosweb.es/libro/css/capitulo_1.html

[22] “¿Qué es una plataforma de e-Learning?” Disponible en: http://www.e-

abclearning.com/queesunaplataformadeelearning

[23] “Redes Sociales” Disponible en:

http://www.fotonostra.com/digital/redesociales.htm

[24] “Servidor Web” Disponible en: http://www.ecured.cu/Servidor_Web

[25] “Tipos de plataformas web”. Abril 2011. Disponible en:

http://www.zainex.es/net/tipos-plataformas-web

[26] Wiesner Matias. “ERP (PLANIFICACION DE RECURSOS EMPRESARIALES)”

Disponible en: http://matiaswiesnercarp40.blogspot.com.br/2014/10/erp-
planificacion-de-recursos.html

[27] “XAMPP” Disponible en: https://www.apachefriends.org/es/index.html

[28] Qué es Bootstrap y cuáles son sus ventajas Disponible en:

http://puntoabierto.net/blog/que-es-bootstrap-y-cuales-son-sus-ventajas

[29] JavaScript Disponible en: https://developer.mozilla.org/es/docs/Web/JavaScript

[30] Manual de jQuery Disponible

en:http://www.desarrolloweb.com/manuales/manual-jquery.html

[31] Font Awesome Disponible en: http://fontawesome.io/

47
13. Anexos

48
49