UNIVERSIDAD MAYOR DE SAN SIMÓN

FACULTAD DE CIENCIAS Y TECNOLOGÍA

CARRERA DE INGENIERÍA DE SISTEMAS

MANUAL TECNICO Y DE

INSTALACION

Materia: Taller de Ingeniería de Software

Docente: Corina Flores Villarroel

Presentado por: Beltran Arandia Jesus Alejandro

Chinchilla Pasquier Carla Gabriela

Rocha Ferrufino Cristhian

Santivañes Flores Maria Renee

Trigo Aranibar Nicolas

Gestion: 1/2023

1
Cochabamba-Bolivia

2
Tabla de contenido
1. Introducción......................................................................................................1

2. Descripcion.......................................................................................................1

3. Requisitos mínimos de software.......................................................................1

4. Requerimientos mínimos de hardware..............................................................2

5. Objetivo.............................................................................................................2

6. Herramientas utilizadas para el desarrollo........................................................2

6.1. Lenguajes Utilizados.................................................................................2

6.1.1. Php..........................................................................................................2

6.1.2. JavaScript...............................................................................................3

6.1.3. Bootstrap................................................................................................3

6.2. Instalación de XAMPP..............................................................................4

6.2. Instalación de VScode...............................................................................7

6.3. Instalar BD...............................................................................................10

6.4. Compilar el programa..............................................................................13

7. Instalación en Servidor WebTis...............................................................15

3
Ilustración 1 Setup XAMPP....................................................................................................5

Ilustración 2 Setup XAMPP....................................................................................................6

Ilustración 3 Ubicacion de XAMPP........................................................................................7

Ilustración 4 INSTALACION DE XAMPP............................................................................7

Ilustración 5 Finalizar instalación...........................................................................................8

Ilustración 6 Archivo de VScode............................................................................................8

Ilustración 7 Terminos y condiciones.....................................................................................9

Ilustración 8 Ubicacion de VScode.........................................................................................9

Ilustración 9 Nombre de la carpeta.......................................................................................10

Ilustración 10 Tareas adicionales..........................................................................................10

Ilustración 11 Instalacion......................................................................................................11

Ilustración 12 Finalización....................................................................................................11

Ilustración 13 Panel XAMPP................................................................................................12

Ilustración 14 DB Phpmyadmi..............................................................................................12

4
5
1. Introducción
El sistema de parqueo FCyT para el manejo y control absoluto de los parqueos de la
facultad de ciencias y tecnología de la universidad Mayor de San Simón esta pensado y
diseñado con la finalidad de ofrecer los servicios de manejos de los sitios, recursos
humanos y monetarios entregando reportes, detalles analíticos y ofreciendo una
visualización grafica simple y un manejo intuitivo para el usuario final.

El siguiente manual guiará a los usuarios que harán soporte al software el cual les dará a
conocer los requerimientos y la estructura para la construcción del sistema, en el desarrollo
del mismo, el cual muestra las herramientas necesarias para la construcción y la
funcionalidad del sistema.

2. Descripcion
El sistema de parqueo FCyT cuenta con las siguientes funciones:

 Configuración del parqueo, identificando sitios, ingresos, salidas.

 Atención de solicitudes de parqueo.
 Asignación de sitios a clientes.
 Control de pagos – cuotas.
 Notificación de pagos en mora por los medios definidos.
 Administración de la información de los clientes.
 Generación de reportes Proveer de medios de consulta Permitir cobros por código.
QR Reportes de ingresos: mensuales, semanales.
 Proveer de interfaces acordes que permitan registrar reclamos/quejas de los clientes.
 Definición de guardias.
 Definición de horarios de atención.
 Proveer de mensajes globales o individuales.

3. Requisitos mínimos de software

 Sistema operativo Windows 10, 8, 8.1, 7

1
  Privilegios de administrador

 Navegador y conexión a internet

4. Requerimientos mínimos de hardware

 Procesador Core 3, 5, 7, 9 de 2.1Ghz
 Disco duro de 500 gb
 Memoria RAM de 8 gb

5. Objetivo
Informar y especificar al usuario la estructura y conformación del sistema con el fin
de que puedan hacer soporte y modificaciones o actualizaciones al sistema en general.

La finalidad de todo manual técnico es la de proporcionar al lector las pautas de

configuración y la lógica con la que se ha desarrollado una aplicación, la cual se sabe que
es propia de cada programador; por lo que se considera necesario ser documentada.

Aclarando que este manual no pretende ser un curso de aprendizaje de cada una de las
herramientas empleadas para el desarrollo del sitio, sino documentar su aplicación en el
desarrollo del sitio. Para un mayor detalle acerca de cada una de las herramientas utilizadas,
y su forma de operación y aplicación, se recomienda consultar los manuales respectivos de
cada una de ellos.

6. Herramientas utilizadas para el desarrollo

6.1. Lenguajes Utilizados

6.1.1. Php

PHP es un lenguaje de programación de uso general que se utiliza, sobre todo, en el

entorno del desarrollo web. Este lenguaje se utiliza generalmente para desarrollar el

backend de una web, el lado del servidor. Aun así, tiene numerosas utilidades en frontend.

2
Es por esto que es uno de los principales lenguajes de programación en el mundo de la

programación web

6.1.2. JavaScript

JavaScript es un lenguaje de programación diseñado en un principio para añadir

interactividad a las páginas webs y crear aplicaciones web. A pesar de la similitud en el

nombre, no está relacionado con Java. Se emplea en el desarrollo de páginas web para

tareas como cambiar automáticamente la fecha de una página, hacer que una página

aparezca en una ventana emergente al hacer clic en un enlace o que un texto o imagen

cambien al pasar el ratón por encima. También suele emplearse para hacer encuestas y

formularios. Se ejecuta en el ordenador del visitante a la web, por lo que no requiere

descargas constantes desde el sitio web.

6.1.3. Bootstrap

Bootstrap es un framework CSS desarrollado por Twitter en 2010, para estandarizar las

herramientas de la compañía.

Inicialmente, se llamó Twitter Blueprint y, un poco más tarde, en 2011, se transformó en

código abierto y su nombre cambió para Bootstrap. Desde entonces fue actualizado varias

veces y ya se encuentra en la versión 4.4.

El framework combina CSS y JavaScript para estilizar los elementos de una página HTML.

Permite mucho más que, simplemente, cambiar el color de los botones y los enlaces.

3
Esta es una herramienta que proporciona interactividad en la página, por lo que ofrece una

serie de componentes que facilitan la comunicación con el usuario, como menús de

navegación, controles de página, barras de progreso y más.

Además de todas las características que ofrece el framework, su principal objetivo es

permitir la construcción de sitios web responsive para dispositivos móviles.

Esto significa que las páginas están diseñadas para funcionar en desktop, tablets y

smartphones, de una manera muy simple y organizada.

6.2. Instalación de XAMPP

 Empezamos la instalación de XAMPP entonces le damos clic en el setup

para iniciar la instalación nos aparecerá esta ventana donde le daremos
siguiente.

Ilustración 1 Setup XAMPP

 Después nos aparecerá esta ventana donde nos muestra los componentes que
se van a instalar, todos los componentes son necesarios entonces le daremos
siguiente.

4
Ilustración 2 Setup XAMPP

5
  Después nos aparecerá esta ventana mostrando en que disco se instalara
por motivos de permisos se recomienda dejarlo en el disco c, le damos
siguiente.

Ilustración 3 Ubicacion de XAMPP

 Nos aparecerá una ventana donde toca esperar a que se instale si quiere
cancelar este proceso le damos en cancel.

Ilustración 4 INSTALACION DE XAMPP

6
  Por ultimo esta ventana es el final del proceso donde le daremos terminar
para acabar la instalación del programa.

Ilustración 5 Finalizar instalación

6.2. Instalación de VScode

 Ve a la página de Microsoft Visual Studio Code en Academic Software y

haz clic en el botón 'Descargar Visual Studio Code' para descargar el

archivo de instalación.

 Abre el archivo de instalación .exe en tu carpeta de descargas para iniciar

la instalación

Ilustración 6 Archivo de VScode

 Lee y acepta el acuerdo de licencia. Haz clic en Next para continuar.

7
Ilustración 7 Terminos y condiciones

 Puedes cambiar la ubicación de la carpeta de instalación o mantener la

configuración predeterminada. Haz clic en Next para continuar.

Ilustración 8 Ubicacion de VScode

 Elige si deseas cambiar el nombre de la carpeta de accesos directos en el

menú Inicio o si no deseas instalar accesos directos en absoluto. Haz clic

en Next.

8
Ilustración 9 Nombre de la carpeta

 Selecciona las tareas adicionales, por ej. crear un icono en el escritorio o

añadir opciones al menú contextual de Windows Explorer. Haz clic en

Next.

Ilustración 10 Tareas adicionales

 Haz clic en Install para iniciar la instalación.

9
Ilustración 11 Instalación

 El programa está instalado y listo para usar. Haz clic en Finish para

finalizar la instalación y lanzar el programa.

Ilustración 12 Finalización

6.3. Instalar BD

 Una vez instalado el XAMPP iremos al icono de este y nos aparecerá

esta ventana donde le daremos start en APACHE, MYSQL.

10
Ilustración 13 Panel XAMPP

 Una vez hecho este proceso le daremos clic en Admin en Mysql para
empezar la instalación de la base de datos. Nos aparecerá esta ventana

Ilustración 14 DB Phpmyadmi

 Haremos clic sobre la opción de importar

11
 Seleccionamos nuestro script de la bd con el nombre de parqueo.sql

ubicado en la carpeta de nuestro proyecto

 Hacemos clic en importar

12
  Nuestra BD ya esta creada

6.4. Compilar el programa

 Teniendo nuestra carpeta del sistema

13
 La movemos a la siguiente dirección y copiamos la carpeta

 Ejecutamos VScode y abrimos la carpeta para la visualización y edicion

del código del proyecto

14
  Con el XAMPP abierto e iniciado Apache y MySQL vamos al navegador

y colocamos la siguiente dirección

7. Instalación en Servidor WebTis

Para la instalación en server’s externos de la UMSS con credenciales ya

otorgados.

Vamos a ingresar a la pagina http://codecraze.tis.cs.umss.edu.bo/net2ftp/index.php con

los credenciales otorgados por los administradores de WebTIS

15
Una vez iniciada la sesión vamos a subir nuestro archivo con el sistema

16
 Y tendremos el siguiente archivo de configuración para la base de datos

Cambiaremos los parámetros de usuario, password y bd para obtener los

permisos del servidor

17