Programación III

INTRODUCCIÓN 2

En el desarrollo de aplicaciones web, se utilizan diferentes herramientas de desarrollo

tanto para la codificación y la gestión de la Base de datos.
Esta guía es la entrada de que inicia en el mundo de la programación orientada a
objetos, en su aspecto práctico. En la que abarca aspectos fundamentales de la POO,
y justifica las decisiones de diseño tomadas en la construcción de lenguajes
de programación orientados a objetos.
De tal forma que en la presente guia se desarrollara en base a la elaboración de una
solución informática relacionada a la gestión de personal relacionado a la gestión de
planillas.
Al finalizar esta guía, serás capas de planificar un proyecto en ambiente web ya sea en
los esquemas intranet, Internet o extranet; La planificación implica desde la escritura del
cronograma de trabajo, uso de equipos, configuración, elección de la plataforma,
desarrollo del software, implementación del mismo y mantenimiento.
Programación III

INDICE DE CONTENIDOS
3

INTRODUCCIÓN _____________________________________________________________ 2
SESIÓN 01: _________________________________________________________________ 5
SELECCIONAR HERRAMIENTAS PARA LA ELABORACIÓN Y FUNCIONALIDAD DE LA
APLICACIÓN WEB ___________________________________________________________ 5
1.1 Conozcamos las herramientas a utilizar en la elaboración de la aplicación web ____ 6
1.2 Veamos la Instalación y configuración _____________________________________ 7
Autoevaluación 01: _________________________________________________________ 14
SESIÓN 02: ________________________________________________________________ 15
CREACIÓN E INSERCIÓN DE DATOS EN LA BASE DE DATOS A UTILIZAR EN LA
APLICACIÓN. _______________________________________________________________ 15
2.1 Identificación de las tablas principales o base para su creación e inserción de datos. __ 16
2.2 Creación de la Base de datos y tablas mediante código Transac-t SQL ____________ 17
Autoevaluación 02: _________________________________________________________ 20
SESIÓN 03: ________________________________________________________________ 21
DISEÑO Y CODIFICACIÓN DE LA INTERFAZ DE ACCESO DE USUARIOS A LA
APLICACIÓN. _______________________________________________________________ 21
3.1. Diseño de formulario de acceso a la aplicación. _______________________________ 22
3.2. Descripción de nombres e identificadores del formulario para él envió de datos. _____ 27
3.3. Automatizar la conexión a la BD y funciones especiales a utilizar en la aplicación. ___ 27
3.4. Validación de datos de acceso de usuarios a la aplicación. ______________________ 30
Autoevaluación 03: _________________________________________________________ 33
SESIÓN 04 _________________________________________________________________ 34
ESTRUTURAR LA INTERFAZ DEL MENU PRINCIPAL DE LA PLICACIÓN. _____________ 34
4.1. Definir esquema y navegación de menús principales y sub menús de la aplicación ___ 35
4.2. Personalizar Cabecera mediante CSS de la aplicación. ________________________ 37
4.3. Personalizar el panel de menús mediante CSS._______________________________ 37
Autoevaluación 04: _________________________________________________________ 40
SESIÓN 05 _________________________________________________________________ 41
ELABORAR EL CRUD DE LAS TABLAS DE PARA EL REGISTRO DE TIPOS DE
DESCUENTOS Y BONIFICACIONES. ___________________________________________ 41
5.1. Diseñar interfaz para listado, búsqueda y paginación de tipo de Descuentos y
Bonificaciones ____________________________________________________________ 42
5.2. Codificación CRUD: registro, modificar, eliminar así como la consulta de datos de los
tipos de Descuentos y Bonificaciones. __________________________________________ 47
5.3. Diseño y codificación de otras tablas necesarias para la funcionalidad de la aplicación:
Ciudad, tipo planilla, Periodo, Sistema de pensiones (AFP, ONP), Áreas y Cargos. ______ 52
Autoevaluación 05: _________________________________________________________ 53
SESIÓN 06 _________________________________________________________________ 54
Programación III

DISEÑO Y PROGRAMACIÓN DE DATOS ________________________________________ 54

4
DE LA TABLA PERSONAL. ____________________________________________________ 54
6.1. Diseño de interfaz gráfica del listado para el mantenimiento del personal. __________ 55
Autoevaluación 06: _________________________________________________________ 70
SESIÓN 07 _______________________________________________________________ 71
PREPARAR PLANILLA DE PERSONAL ________________________________________ 71
7.1. Aperturar planilla _______________________________________________________ 72
7.2. Cargar los datos de descuentos y bonificaciones del personal. ___________________ 83
Autoevaluación 07: ________________________________________________________ 101
SESIÓN 08 ________________________________________________________________ 102
GENERAR PLANILLA DE TRABAJADORES, EXPORTAR A EXCEL Y OTROS REPORTES.
_________________________________________________________________________ 102
8.1. Generar datos de planilla mediante formato Excel y realizar el cierre. ____________ 103
8.2. Consultas y generar reporte de personal y planillas. __________________________ 114
8.3. Gestión de acceso de usuarios al sistema de planilla _________________________ 123
8.4. Otras funcionalidades a desarrollar en la aplicación para su perfeccionamiento y
aplicación en una determinada empresa. ______________________________________ 130
Autoevaluación 08: ________________________________________________________ 131
Programación III

SESIÓN 01:
SELECCIONAR HERRAMIENTAS PARA LA
ELABORACIÓN Y FUNCIONALIDAD DE LA
APLICACIÓN WEB
Programación III

SELECCIONAR HERRAMIENTAS PARA LA ELABORACIÖN Y FUNCIONALIDAD

DE LA APLICACIÖN WEB 6

“El éxito de los proyectos radica en dos simples principios: objetivos claros y
compromisos fuertes“, Moses Thompson.
Ante las necesidades de las empresas en implementar
aplicaciones o soluciones que satisfagan las mismas, un
desarrollador debe tener en cuenta que un proyecto es un conjunto
de SESIÓNes coordinadas y controladas, con fechas bien
definidas, con requisitos específicos incluyendo los tiempos, costos
y recursos. Por lo que planificar que herramientas o recursos
utilizar es uno de los primeros y principales SESIÓNes a realizar.
Para el desarrollo de una aplicación que en este caso se basa en
un sistema web para el control de personal específicamente
generación de planillas, se debe tener en cuenta lo siguiente:

 Realizar un análisis de funcionalidad y elegir bajo que servidor funcionara la

aplicación ya sea Windows o Linux.
 Instalar el software necesario para iniciar a desarrollar y tener un control total
sobre ello se basa en el manejo y conocimiento que se tenga de las mismas.

1.1 Conozcamos las herramientas a utilizar en la elaboración de la aplicación web

Existen una variedad de herramientas para implementar un servidor Web, Para

nuestro proyecto vamos a utilizar un servidor web apache con soporte para PHP y
Mysql, bajo el sistema operativo Windows.

Que software vamos a necesitar?

- Un servidor web con soporte para PHP y Mysql
- Un programa de edición de código
- Un programa de gestión de Base de datos

XAMPP es un servidor independiente de plataforma, software libre, que consiste

principalmente en la base de datos MySQL, el servidor Web Apache y los intérpretes
para lenguajes de script: PHP y Perl.

Apache: Servidor Web HTTP

Mysql: Sistemas Gestor de BD
PHP: lenguaje de programación.
Programación III

Editor Pspad: editor gratuito para programadores y no programadores que

7
funciona bajo Windows, Te permitirá trabajar con decenas de lenguajes como PHP,
SQL, C#, ASP, xHTML.

Todos con códigos de color para una mejor

visión de la sintaxis en el código fuente, lo
que facilita mucho la programación

Sqlyog: es una excelente interfaz gráfica diseñada especialmente para trabajar de

forma más rápida y cómoda con el servidor de base de datos MySQL

El programa está orientado a usuarios que ya tienen ciertos

conocimientos de SQL y necesitan un intérprete gráfico sin
excesivas florituras, ágil y funcional. SQLyog te permite
administrar usuarios y permisos, y realizar múltiples peticiones
a base de datos. También puedes insertar fácilmente,
mediante plantillas, peticiones que realices con frecuencia,
como por ejemplo creación de tablas. También la exportación
de datos en formato CSV, HTML y XML, la posibilidad de guardar scripts de SQL.

1.2 Veamos la Instalación y configuración

Instalación de Nuestro Servidor Web con soporte a Mysql y PHP.

Una vez descargado el software, se recomienda la versión 1.7.3, iniciamos la

instalación.

Lo podemos descargar de la siguiente url:

https://www.apachefriends.org/es/download.html

Al instalar solo es seguir el asistente, en una de la pantalla sale los servicios a

instalar.
Programación III

Por defecto la instalación se hará en la Unidad C: o donde esté instalado el Sistema

operativo. (C:/ Xammp). 8

En la siguiente pantalla elegir los soportes a instalar, que en este caso el PHP.

Iniciar servidor y configurar seguridad

Una vez instalado, vamos a Inicio / Programas / XAMPP y hacemos clic en XAMPP
Control Panel.

Al mostrarse el panel iniciamos los servicios de Apache y Mysql.

Programación III

Una vez iniciados ingresamos a nuestro navegador web de preferencia, en este caso
vamos a utilizar Google Chrome y en la barra de direcciones digitamos “localhost”. 9

La cual nos muestra la siguiente pantalla en donde lo primero a realizar es darle

seguridad a nuestro Servidor de Bases de Datos “Mysql”.

Podemos cambiar el idioma a español, en la misma pantalla se puede observar la

versión de PHP que tenemos instalado.

Asignar una contraseña a nuestro servidor.

Nos ubicamos en “Chequeo de seguridad” la cual nos muestra la siguiente pantalla

en la cual se observa el nivel de seguridad de nuestro servidor.
Programación III

Para signar una clave al usuario root que es el usuario por defecto del servidor,
hacemos clic en http://localhost/security/xamppsecurity.php. 10
En esta pantalla definimos la clave o nueva clave en caso ya se tenga una asignada
la cual se utilizara para acceder a la BD mysql tanto desde un software así como de
la aplicación que vamos a elaborar.

Para completar el proceso de cambio de clave hacer clic en el botón “Password

Changing”.

Ahora ya tenemos listo nuestro servidor Web Apache para poder iniciar a desarrollar
la aplicación planteada.

Instalar software para la edición de código de la aplicación.

Para hacer uso del programa Pspad como editor de código para el desarrollo de
nuestra aplicación. Lo descargamos de la siguiente url:
http://www.pspad.com/es/download.php

Se recomienda utilizar la opción de instalador, más no el portable. Iniciamos el

setup.exe, y seguimos pasos del asistente, una vez terminado se mostrara la
pantalla principal.
Programación III

11

Otros editores de código a utilizar son el Sublime,

notepad ++, Dreamweaver, etc.
Programación III

Instalar software para la gestión de la Base de datos.

12
Una vez descargado e instalado el Sqlyog, vamos a configurar su conexión para
poder gestionar las bases de datos.

En User name se indica el usuario creado para la BD de mysql por defecto es root
En Password se asigna la clave gestionada en la seguridad del usuario la cual se
configuro en el punto 1,2 sobre seguridad.

En el puerto y Databases se deja por defecto como se muestra, luego hacemos clic
en el botón Connect.

Si los datos de conexión con correctos nos muestra en entorno principal en la cual
se muestran en el lado izquierdo las BD creadas en el servidor, a lado derecho el
área de Query en donde se ingresaran el código SQL transact.

Mediante esta aplicación podemos crear BD, sus tablas, realizar consultas e insertar
datos. Todas mediante grafica o bien con código Transac-t SQL.
Programación III

13

Entre otras aplicaciones tenemos: MySQL Workbench, el mismo phpmyadmin

que se instala junto al PHP y Mysql.

Tener en cuenta que nuestro sistema funcionara tanto

en un servidor Windows como en Linux, en las
siguientes actividades se indicara algunos criterios a
emplear para no tener dificultades en su
implementación.

Linkografia:

https://www.ecured.cu/XAMPP
http://www.mclibre.org/consultar/php/otros/xampp-instalacion-windows.html
http://www.pspad.com/es/
https://carrero.es/pspad-editor-para-programadores/
http://www.aprendeinformaticaconmigo.com/pspad-multieditor-para-
desarrolladores-gratuito/
https://www.webyog.com/product/sqlyog
https://www.ecured.cu/SQLyog
Programación III

Autoevaluación 01:
14

Desarrollar las siguientes preguntas, que te permitirán a demostrar lo aprendido en la

SESIÓN 01.
P01: Se define con un conjunto de elementos o procesos que interactúan entre si
a.- Sistema Retroalimentación.
b.- Xampp
c.- Una tabla
d.- Una Base de datos

P02: Es un lenguaje de programación

a.- PHP Retroalimentación.
b.- Mysql
c.- Css
d.- Paspad

P03: Son sistemas gestores de Bases de datos

a.- Mysql, postgresql Retroalimentación.
b.- Html, Mysql
c.- Php y mysql
d.- Pdo

P04: Son editores de código

a.- Sublime, Notepad ++, Bloc de notas Retroalimentación.
b.- Pspad, Html, Sqlyog
c.- Sublime, Pspad, Sqlyog
d.- Xampp, Pspad, Sublime

P05. Que es un servidor web y en el caso de usar el servidor apache en Windows

dentro de que carpeta debes de crear tu aplicación.
P06. El servidor apache solo se puede instalar en el sistema operativo Linux.
P07. Que tecnologías se utiliza para mejorar la apariencia de una aplicación web
teniendo en cuenta que esta sea adaptativa a varios dispositivos desde PC hasta
móviles.
P08. Porque es importante la planificación en el desarrollo de un sistema informático.
P09. Que otras herramientas para desarrollar aplicaciones web con php y mysql
conoce.
P010. Si tuvieras que elegir entre dos editores de código como el Sublime text y el
Notepad ++, por cuál de ellos optarías.
Programación III

15

SESIÓN 02:
CREACIÓN E INSERCIÓN DE DATOS EN LA BASE
DE DATOS A UTILIZAR EN LA APLICACIÓN.
Programación III

CREACIÓN E INSERCIÓN DE DATOS EN LA BASE DE DATOS A UTILIZAR EN LA

APLICACIÓN. 16

2.1 Identificación de las tablas principales o base para su creación e inserción de

datos.

Para iniciar a elaborar la aplicación lo primero es tener el diseño de nuestra BD, la cual
puede estar aun en análisis pero por lo menos ya se debe de tener algunas tablas
identificadas así como con sus campos, estas tablas serán las primera a crear si como
las que se irán realizando sus mantenimientos.
Hay tablas principales o base las cuales debe de tener información ingresada para poder
ser utilizada en algún proceso o mantenimiento en la que involucre el uso de más de
una tabla, es decir las tablas que no tiene campos foráneos.
En este caso como es una aplicación de planilla las primeras tablas a identificar y crear
serian:

Periodo Tipos_bonificacion

Tipo_planilla
Personal

Tipos_descuento Cargos

Ahora debemos identificar las tablas que se involucran ya en el proceso de control de

planilla es decir las que tienen más de 2 campos foráneos, estas tablas pueden ser para:

 Registro de los descuentos del trabajador

 Registro de bonificaciones del trabajador
 Y para generar la Planilla

Descuento_personal

Planilla
Bonificacion_personal

Si identificas la necesidad de agregar otras tabla, la puedes agregar a fin de que la

aplicación se más completa.
Programación III

2.2 Creación de la Base de datos y tablas mediante código Transac-t SQL

17

A continuación vamos a describir el código SQL de la creación de las tablas, así como
la forma de inserción de algunos datos, en la cual puede aprovechar de ingresar más
información.
Programación III

18
Programación III

19

El código fuente o script SQL de la base de datos, la puedes obtener de la siguiente

dirección: https://github.com/jeefernandez/SCpersonal, en la cual debe de ubicar el
proyecto de planilla de personal y en la sección de recursos podrás descargar el script
y las librerías como estilos y plugins js que vamos a utilizar.

Dentro del script esta unos datos de ejemplo para la tabla personal en la cual, uno de
ellos es el usuario administrador del sistema para lo cual los datos de acceso a la
aplicación son:

Para acceder al sistema utilizar los siguientes datos de

acceso:
Usuario: admin@admin.com
Clave: jk123s1506
Programación III

20
Autoevaluación 02:

P01: Una base de datos es una colección de:

a.- Datos Retroalimentación.
b.- Campos primarios
c.- tablas
d.- Consultas

P02: Cuales son los tipos de datos para un campo: nombre

a.- Varchar Retroalimentación.
b.- Nvarchar
c.- Text
d.- Char

P02: Cuales son los tipos de datos para un campo: dni

a.- Money Retroalimentación.
b.- Char
c.- Int
d.- Tinyint

P03: Cuales son los tipos de datos sugeridos para un campo primario (el Id de una tabla)
a.- Tinyint Retroalimentación.
b.- Int
c.- Smallint
d.- Varchar

P04. Que es una base de datos relacional

P05. Que clausulas se pueden utilizar en una consulta, menciones mínimo 5.

P06. Por qué utilizar el Inner Join entre dos o más tablas.

P07. Se puede realizar consultas entre dos o más tablas sin utilizar el Inner Join, demuéstrelo
con un ejemplo.

P08. Por qué es importante que toda tabla tenga un campo primario.

P09. Describa la diferencia entre el tipo de dato de cadena: Char, varchar y nvarchar

P10. Mediante un ejemplo demuestre que campos se utilizaría y como se insertaría datos en
una tabla llamada docente.
Programación III

21

SESIÓN 03:
DISEÑO Y CODIFICACIÓN DE LA INTERFAZ DE
ACCESO DE USUARIOS A LA APLICACIÓN.
Programación III

DISEÑO Y CODIFICACIÓN DE LA INTERFAZ DE ACCESO DE USUARIOS A LA

APLICACIÓN. 22

Un programador no solo debe de centrarse en programar, también es importante que

este tenga en cuenta el aspecto visual y sobre todo ser ordenado en cuando a la
organización de sus archivos, carpetas e imágenes que pueda utilizar en la aplicación.
3.1. Diseño de formulario de acceso a la aplicación.

Para iniciar en el desarrollo de la aplicación vamos a estructurar nuestra carpeta donde

se irán almacenando todos los elementos que se utilice en el sistema.
Crear una carpeta dentro de htdocs, con un nombre que represente a la aplicación y
dentro de ella una estructura de carpetas según las librerías a utilizar, en este caso
nuestra aplicación la llamaremos SYSPERSONAL y dentro de ellas vamos a organizar
los archivos de estilos, funciones java script, Jquery, iconos entre otros. La cual tendría
la siguiente apariencia.

APP.- carpeta que contiene todos los archivos a programar para la aplicación.
ASSETS.- Carpeta donde estarán todas las imágenes, librerías y plugin a utilizar como css,
js los cuales en la mayoría pertenecen a la tecnología bootstrap.
INCLUDES.- Los archivos de conexión a la Base de datos y funciones para la gestión de
registros.

Lo primero a crear dentro de la carpeta de SYSPERSONAL es un archivo llamado Index,

el cual puede tener la extensión PHP o HTML, en este caso vamos a utilizar la extensión
PHP. En el cual vamos a incluir el siguiente código para direccionar al loggin que estará
dentro de la carpeta APP.

url: xampp/htdocs/syspersonal/index.php
<?php header("Location: app/loggin"); ?>
Programación III

23
Recuerde respetar la estructura del formato de una página html5, es decir

Estructura de página html

<!DOCTYPE html>
<html lang="en">
<title> [ Titulo de la Pagina ] </title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
[Incluir archivo css, js, jquery]
</head>
<body>
[Aquí codificación html]
</body> </html>

Lo que describiremos a continuación solo será el código HTML de

la aplicación lo necesario para su funcionalidad y de manera
resumida los CSS y JS.

Ahora crearemos el archivo login.php dentro de la carpeta “app”. En el cual

diseñaremos el formulario de acceso.

Syspersonal/app/login.php

url: xampp/htdocs/syspersonal/app/login.php

//----- Dentro de <body>

-----
<h1><strong>Sys</strong>Personal</h1>
<p> Bienvenido al sistemas <a href="#">
<strong>Control de Personal</strong></a>, Solo para usuarios autorizados!
</p>
-----
<h3>Acceso al sistema</h3>
<p>Ingrese el nombre de usuario y clave para acceder:</p>
-----
<form role="form" method="post" name='login-form' >
<label >Nombre de usuario</label>
<input type="text" name="username" placeholder="Username..." id="username">
<label >Contrase&ntilde;a</label>
<input type="password" name="password" placeholder="Password..." id="password">
<button type="submit" name='login-form' class="btn">Ingresar!</button>
</form>
Programación III

24
Vista previa del formulario sin CSS ni librerías como los Jquery, bootstrap.

Como se observa la apariencia del formulario en simple, ahora vamos a aplicar los
estilos necesarios, las cuales permiten mejorar su apariencia.
Como parte del material que se adjunta al final de la
SESIÓN se tiene las librerías como las css, jquery y
bootstrap entre otras como las fuentes del tipo de letra.
Estas librerías vamos a incluirlas en nuestro archivo
login.php s para los cual vamos a explicar los cambios a
realizar y ver finalmente como quedaría en su apariencia.

Primero vamos a incluir los Css, las fuentes y unas

librerías en caso el navegador no sea compatible.
Como se observa en el código se hace referencia a fuentes, css para los estilos y se
incluye unas librerías para el caso de compatibilidad para los navegadores.

url: xampp/htdocs/syspersonal/app/login.php

//----- dentro del <head>

<!-- CSS -->

<link rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../assets/css/form-elements.css">
<link rel="stylesheet" href="../assets/css/style.css">
Programación III

25
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Ahora vamos a incluir las librerías de bootstrap y jquery al final del código html.

url: xampp/htdocs/syspersonal/app/login.php

//----- después del código html antes de cerrar </Body>

<!-- Javascript -->

<script src="../assets/js/jquery-1.11.1.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/js/jquery.backstretch.min.js"></script>
<script src="../assets/js/scripts.js"></script>

Al tener las librerías necesarias ya referenciadas debemos adecuar nuestro código html
con las clases para que la apariencia y la funcionalidad sea óptima.
Como se sabe que las librerías de bootstrap permiten que nuestra página se adapte a
los dispositivos ya sea una pc o un celular o tabled. Es por ello que se tiene que
adecuarse a la estructura de nuestro html.
Veamos cómo quedaría el código dentro de “<body>“de nuestro archivo login.php.

url: xampp/htdocs/syspersonal/app/login.php

//----- al iniciar el <body> <h1><strong>Sys</strong>Personal</h1>

<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text">
[ ……. código del formulario]
<div class="description">
[ ……. código del formulario]
</div>
</div> <p> Bienvenido al sistemas <a href="#">
</div> <strong> Control de personal</strong></a>, Solo para
usuarios autorizados! </p>
Programación III

26
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>Acceso al sistema</h3>
<p>Ingrese el nombre de usuario y clave para acceder:</p>
</div>
<div class="form-top-right"> <i class="fa fa-key"></i></div>
</div>
<div class="form-bottom">
<form role="form" method="post" name='login-form' class="login-form" >
<div class="form-group">
<label class="sr-only" for="username">Nombre de usuario</label>
<input type="text" name="username" placeholder="Username..." class="form-
username form-control" id="username">
</div>
<div class="form-group">
<label class="sr-only" for="password">Contrase&ntilde;a</label>
<input type="password" name="password" placeholder="Password..." class="form-
password form-control" id="password">
</div>
<button type="submit" name='login-form' class="btn">Ingresar!</button>
</form>
</div>
</div> El código de color VERDE es el que se ha agregado, en nuestro código del
</div> formulario, y como se observa ya no se está utilizando las etiquetas de Tablas
en su lugar se está utilizando las capas es decir los <DIV>.
</div>
</div> Recordemos algunos parámetros del Bootstrap:
</div> - Se inicia con el contenedor de contenido, (content)
- Define el número de columnas con (Row)
- El estilo de formulario para mejorar la apariencia (form)
- Para ajustar los elementos del formulario como el uso de los label y los
input se debe de utilizar (form-group), así como cada input debe de
tener (form-control).

Finalmente la apariencia final de nuestro

formulario de acceso.
Además tener en cuenta que hemos
definidos los nombre de los controles y
del método de envió de datos formulario.

Recuerde que la final de esta SESIÓN está la

URL de descarga de todas las librerías a
utilizar.
Programación III

3.2. Descripción de nombres e identificadores del formulario para él envió de

datos. 27

Una vez hemos diseñado nuestro formulario de acceso con las diversas librerías ahora
vamos a describir el uso de los controles en cuanto a los nombres e identificadores que
se ha asignado.
Iniciamos con el formulario en la línea 103: en la cual se ha definido el método de envió
de datos, el cual es el POST ya que permite el enviar de los datos del formulario de
manera oculta. (Según imagen)
En los Input tenemos dos parámetros el “name” y el “id”, ambos sirven como
identificadores de los controles y se utilizan para el envió y recibir los datos ingresados
en el formulario.

3.3. Automatizar la conexión a la BD y funciones especiales a utilizar en la

aplicación.

El tiempo de vida de una aplicación depende mucho de cómo se ha programado, que

funciones o librerías utiliza para gestionar las BD, ya que con el avance de la tecnología
y que cada cierto tiempo salen al mercado nuevas versiones de Apache, PHP, el mismo
Mysql el cual es reemplazado por el Dbmaria. AL momento de programar se debe de
utilizar un lenguaje que sea estándar para cualquier versión y no se tenga esats
dificultades.
Esto se menciona por que el mysql_query, mysql_connect entre otros ya están
obsoletos.

Fuente: http://php.net/manual/es/function.mysql-query.php
Programación III

28

Importante:
Por lo mencionado anteriormente en el presente proyecto
vamos a utilizar la programación PDO::query().

En el desarrollo de aplicaciones siempre se hacen uso de librerías, funciones, entre

otros elementos que se involucran para automatizar ciertas tareas y así lograr un buen
funcionamiento del mismo.
Estas funciones vamos a organizarlas en dos archivos PHP, uno para la conexión y otro
para las funciones.

Función de conexión a la base de daos: como se mencionó vamos a utilizar la

extensión de PDO para la conexión a nuestra BD en Mysl.

Archivo config.php

url: xampp/htdocs/syspersonal/includes/config.php
//Conexión a la BD

<?php
define('DB_HOST','localhost');
define('DB_USER','root');
define('DB_PASS','12345678');
define('DB_NAME','bd_planilla');
try{
$dbh = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME,DB_USER,
DB_PASS,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
}catch (PDOException $e){
exit("Error: " . $e->getMessage());
}
?>
Programación III

Función para generar códigos: como se sabe que cada tabla tiene un campo
primario que en la mayoría de su uso es de tipo numérico, por lo que los códigos 29
de los registro tiene que ser correlativo. Para ello esta función se utilizaría en
todos los mantenimiento que realicemos y la función se encarga de generar el
nuevo id según la tabla que se indique.

Archivo funciones.php

url: xampp/htdocs/personal/icludes/funciones.php
<?php
function getCodigo($dbh,$tableName,$columnName) {
$sql = "SELECT $columnName from $tableName order by 1 desc limit 1";
$query = $dbh->prepare($sql);
$query->execute();
$nid=0;
$results=$query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount()>0){
foreach($results as $result){
$nid=$result->$columnName;
} }
$nid++;
return $nid;
}
?>

Llamar a la función:
$codigo= getCodigo (“nombretabla”,”nombrecampoprimario”)
Programación III

3.4. Validación de datos de acceso de usuarios a la aplicación.

30

Para este proceso vamos a recibir los datos de acceso del usuario ingresados en
formulario de login.php. Para lo cual vamos a utilizar la misma página.
Agregar código al inicio de la página login.php
Validación de datos de acceso de usuarios a la aplicación, como se observa en la línea
103, el formulario no direcciona a ninguna página más que a la misma página la cual se
llama “login.php”
Para ello al enviar los datos con el botón “Ingresar” de la línea 112, enviamos el nombre
de usuario y clave y la recibimos con el siguiente código el cual vamos a describir.

Syspersonal/app/login.php

Para que al terminar el código del archivo login.php no muestre error debemos crear el
archivo config.php en la siguiente ruta. syspersonal/includes/config.php, el código
de este archivo lo ubica en el punto 3.2 de esta SESIÓN.
Ahora iniciamos la validación de la sesión e incluimos la conexión a la base de datos.

En la siguiente línea validamos que el formulario enviado no este vacío, es decir que si
tenga los datos del usuario y clave y recibimos los datos con el método POST y con
los nombre de los controles definidos en el parámetro “name”. Para el caso de la
contraseña utilizamos la función md5 para encriptar la clave.

Ahora realizamos la consulta en la base de datos en la tabla “personal”, para validar que
el usuario existe para lo cual comparamos el email y clave recibidos.

Ahora ejecutamos la consulta y asignamos las variables de los datos recibidos con las
variables asignadas en la consulta, las cuales no necesariamente deben ser iguales.
Programación III

Línea 17: si existe el usuario iniciamos el recorrido por los datos y en la línea 22
verificamos si el usuario cuenta con los permisos para acceder al sistema para ello 31
direccionamos al archivo “Mypanel.php” dentro de la carpeta “APP” (línea 26)

Importante:
La seguridad es un tema muy importante y necesario
que se tenga en cuenta en una aplicación ya que solo
deben acceder usuarios autorizados.
Asimismo no se debe dejar de lado la parte de la
apariencia ya que le da un aspecto visual de calidad y
profesionalismo.

El código completo de este procedimiento es el siguiente:

Programación III

En resumen podemos decir lo siguiente:

32
Iniciamos la sesión la cual permitirá almacenar valores en variables así como válida si el usuario a
iniciado sesión de manera correcta de lo contrario lo direccionara a la página del login.

Incluimos la conexión a la base de datos, archivo que está en la carpeta “include”

Con “isset” validamos si el formulario tiene datos por lo que se procede a recibir el nombre de
usuario y la contraseña, según los nombres de los controles del formulario.

Se utiliza la función de MD5 para encriptar la contraseña.

Realizamos la consulta asignando los valores si los datos son correctos se valida que sea un
usuario autorizado para acceder al sistema con la variables “$status” y direccionamos a menú
principal del sistema la cual está en la página “Mypanel.php”.

Si no son correctos mostrar un mensaje de error de acceso de usuario.

Al acceder al entorno del sistema tiene la siguiente a apariencia, que en la siguiente

SESIÓN vamos a detallar.
Programación III

Autoevaluación 03:
33

P01. Porque es importante el uso de los estilos en un aplicación.

P02. En que versión de PHP las extensiones mysql_query, mysql_connect fueron declaras
como obsoletas.

P03. Es indispensable que en el desarrollo de un sistema web se use las incluya las últimas
actualizaciones tanto en herramientas y técnicas de programación.

P04.- La seguridad en los sistemas web es muy importantes, por lo que se utiliza diversas
técnicas para encriptar su información tanto en el acceso y para él envió de datos. Según este
concepto en esta aplicación que función se utiliza para encriptar las claves de los usuarios del
sistema.

P05.- Según los siguientes datos completar el código.

En una empresa dedicada a la venta de fertilizantes se tiene la base datos “agrobay” para lo
cual desea que se configure el usuario “uskeyagb” y la contraseña “29agb@a”, teniendo en
cuenta que el sistema funcionara en una red interna, el servidor local que se ha instalado tiene
como Nro IP. 192.168.2.1.

P06.- Mencione algunos Framework PHP que trabajan bajo el modelo MVC

P07.- Para se utiliza la función “include()”

P08.- Qué diferencia hay en usar “include(” o “require()”

P09.- En la siguiente línea de código indique si es correcta y por qué su uso.

$servidor=”localhost”;

define(‘DB_USER’,’nombreuser’);

$sesion(‘nomuser’)=$nombreuser;

P10.- Explique el uso de la siguiente línea de código.

$password=md5($_POST['password']);
Programación III

34

SESIÓN 04
ESTRUTURAR LA INTERFAZ DEL MENU
PRINCIPAL DE LA PLICACIÓN.
Programación III

DISEÑO DE LA INTERFAZ DEL MENU PRINCIPAL DE LA PLICACIÓN.

35
Preparamos el entorno principal del sistema de personal, utilizando css y js de
bootstrap.
4.1. Definir esquema y navegación de menús principales y sub menús de la
aplicación

Ahora veamos la página del menú o entorno del sistema, la cual tiene la siguiente
apariencia.

Como se observa la pantalla de la página Mypanel.php se divide en una cabecera, una

barra de menús y la sección donde se muestra el contenido de las páginas.
Archivo Mypanel.php

Syspersonal/app/Mypanel.php

Validamos si existe una sesión activa.

Programación III

Iniciamos el código html5, incluyendo en las cabeceras las librerías para que la pagina
sea responsivo y las Js y Css necesarios para la apariencia y funcionalidad de menú de 36
opciones.
Tener en cuenta la ubicación de las librerías para que su uso sea correcto.

Ahora incluiremos la cabecera y los menús, los cuales están en archivos diferentes,
header.php y slider.php respectivamente.

Seguimos con el código de la página Mypanel.php, ahora agregamos la parte de la

bienvenida en la cual se puede agregar algunas indicaciones sobre el uso del sistema.

Y culminados agregando los librerías js de bootstrap y cerramos la validaciones de la

sesión.
Programación III

37

4.2. Personalizar Cabecera mediante CSS de la aplicación.

En este paso vamos a describir el código de la cabecera de la aplicación, creamos el :

Archivo header.php.

Syspersonal/include/header.php

4.3. Personalizar el panel de menús mediante CSS.

Archivo slidebar.php.

Syspersonal/include/slidebar.php

Iniciamos con la imagen de perfil del usuario de la barra de menus.

Ahora mostramos los datos del usuario que ingreso al sistema, para ello capturamos el
código del usuario mediante la variable código de la sesión iniciada. (Línea 10).
Programación III

38

Continuamos con las opciones de menú del lado izquierdo de la aplicación.

Programación III

39

Como se observa en cada opción de menú se indica a la página que llamara cuando se
haga clic en la opción de menú.

Importante:
Como se sabe que los archivos que vamos a crear para el
mantenimiento de las tablas estarán dentro de la carpeta APP
y el archivo de los menús está en la carpeta INCLUDES,
entonces en necesario que en el HREF se direccione
correctamente. Por lo que debe quedar así:

<li><a href="../app/periodos.php">Periodos</a></li>
Programación III

40
Autoevaluación 04:

P01.- Por que utilizar la siguiente línea.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-

scale=1.0,

user-scalable=no"/>
P02.- Por que utilizar los family de fonts de google.
P03.- Por que utilizar <div class="row"> y <div class="col s12 m12 l6">
P04.- Que funcionalidad permite adaptar las librerías de jquery.
P05.- Que función cumple “htmlentities” y que otras alternativas existen.
P07.- De las siguientes líneas cual es la variable que almacena la información de la
conexión a la Base de datos.

P08.- Una forma de direccionar la muestra de un archivo o página en html mediante un

enlace <a href=””>, se utilizar un parámetro “target”:
Menciones dos de ellos. ________________ , _______________
P09.- Una página PHP puede contener código HTML, sabiendo en este archivo se listan
los registros de una tabla de un base de datos mysql.
P010.- Se puede combinar condigo JavaScript con PHP, al igual que se combina el Css
con el Html.
Programación III

41

SESIÓN 05
ELABORAR EL CRUD DE LAS TABLAS DE PARA
EL REGISTRO DE TIPOS DE DESCUENTOS Y
BONIFICACIONES.
Programación III

ELABORAR EL CRUD DE LAS TABLAS INDEPENDIENTES COMO TIPOS

42
DE DESCUENTOS Y BONIFICACIONES.
En el desarrollo de una aplicación, se inicia con el mantenimiento de datos de las
tablas que no tiene campos foráneos, es decir de las tablas independientes para el
proceso de generar una planilla de personal.
5.1. Diseñar interfaz para listado, búsqueda y paginación de tipo de Descuentos
y Bonificaciones

Para el mantenimiento de datos por lo general vamos a utilizar 3 archivos, en este primer
proceso vamos a elaborar el diseño del listado, en el siguiente paso vamos a utilizar dos
archivos más para agregar, modificar, eliminar.
Archivo tipodsto.php.

Syspersonal/app/tipodsto.php

Muestra de la interfaz del listado de tipos de descuentos, la cual al elaborar la

codificación se mostrara la opción de búsqueda y paginación.

Como siempre iniciamos validando si hay una sesión activa para que se muestre el
contenido del archivo, de lo contrario lo direccionara a la pantalla de loggin.
Programación III

43

Vamos a dejar unas líneas vacías para más adelante en el siguiente paso agregar unas
líneas de código.
Continuamos con el inicio de código html en donde agregamos los css y js para la
apariencia del formulario.

Ahora un estilo para los mensajes instantáneos que se muestren al momento de insertar,
modificar y eliminar. Todo ello dentro de </head>

Ahora iniciamos con la cabecera, el botón agregar la cual llama a la página

addtipodsto.php y los mensajes instantáneos.
Programación III

44

Finalmente llegamos a la parte donde se mostrara los datos de la tabla para ello se tiene
una cabecera datos, la consulta a los datos según la tabla “tipo_descuento”.
En la parte de

En el listado usamos iconos de tipo Font de google por lo que para el icono de modificar
y eliminar usamos la clase “material-icons” y el nombre de la fuente. Para más tipos de
iconos ingresamos a la siguiente página. https://materializecss.com/icons.html
El archivo que se ha incluido al inicio de la página es:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Programación III

Finalmente cerramos con el siguiente código.

45
Si observamos se incluye un js de table-data.js, la cual permite la paginación y búsqueda
de los datos que están en la lista. Esto quiere decir que para buscar datos no es
necesario realizar un código adicional.

Archivo tipobonif.php.

Syspersonal/app/tipobonif.php

Una manera de avanzar con la programación de este archivo es duplicar el archivo

de tipodsto.php. y cambiar el nombre a tipobonif.php y realizar los cambios en las
líneas de código:
Línea 23: Administrar Bonificaciones

Línea 63: Administrar Bonificaciones

Línea 77: addtipobonif.php (página que direcciona al agregar nueva bonificación.)

Programación III

Línea 85: Nombre de Bonificación (El nombre de la columna) 46

Línea 90: Nombre de tabla de bonificación (tipo_bonificacion)

Línea 99: Nombre de columna de tipo bonificación (namebonificacion)

Línea 100 y 1002: Código de la columna tipo bonificación (idbonificacion)

Resultado:
Como se observa el código del archivo tipobonif.php es el mismo
del archivo tipodsto.php, solo se ha realizado los cambios de
títulos y de los nombre de las paginas a las que llama y de los
nombre de los campos según la tabla utilizada.
Programación III

5.2. Codificación CRUD: registro, modificar, eliminar así como la consulta de

datos de los tipos de Descuentos y Bonificaciones. 47

Al tener el listado de los tipos de descuento y bonificaciones, ahora vamos a completar

el CRUD de la tabla “tipo_descuento”.
Agregar tipo de descuento: Archivo addtipodsto.php

Syspersonal/app/addtipodsto.php

En cada archivo a programar se debe de iniciar verificando que haya una sesión activa,
si no lo es se debe de direccionar al archivo index.php.
Si la sesión esta activa se ejecuta la parte del código para agregar registros a la tabla
tipo de descuentos.
En seguida incluimos el archivo de conexión a la Base de datos y el archivo de funciones
para la generación de códigos al momento de insertar nuevos registros.
Programación III

Ahora continuamos con el código html, incluimos los estilos y funciones las cuales van
en cada archivo php que se cree en adelante. 48

Agregar el código css para los mensajes de alerta.

Incluimos la cabecera y barra de menús, ya que el formulario se mostrara en la parte

central de la página.
En la línea 76 se inicia el formulario en el cual se indica la página a la cual se enviara
los datos (En este caso es el mismo archivo) y el método de envió de datos.
Programación III

Ahora creamos el input para el ingreso del nombre de tipo de descuento, en el cual se
define un nombre, un id y se indica que es obligatorio con el termino required. 49

También se define los botones para cancelar y guardar el nuevo tipo de descuento.

Finalmente cerramos los DIV y la inclusión de los js y de la función para que los
mensajes de alerta se oculten paso unos segundos.

Para completar el proceso agregamos el código en la cual se reciben los datos y se

inserta el nuevo registro.
Este código lo agregamos en el mismo archivo después de la línea 8 en donde se
incluyen los archivos de conexión y de funciones.
Una vez que se inserta el registro se muestra un mensaje de confirmación y direcciona
a la página del listado de tipos de descuentos.
Programación III

Modificar tipo de descuento: Archivo editipodsto.php

50
Syspersonal/app/editipodsto.php
Programación III

51

Eliminar tipo de descuento: Archivo tipodsto.php

Syspersonal/app/ tipodsto.php

Agregar el
siguiente código el
cual permite
eliminar el registro.
Programación III

5.3. Diseño y codificación de otras tablas necesarias para la funcionalidad de la

aplicación: Ciudad, tipo planilla, Periodo, Sistema de pensiones (AFP, ONP), 52
Áreas y Cargos.

Para el mantenimiento de las tablas, periodos, tipo de

planilla, áreas y cargos se aplica el mismo procedimiento
de duplicar el archivo y cambiarle de nombre los títulos y
de los campos de la tabla.

Por ejemplo el archivo tipodsto.php lo duplicamos y le cambiamos de nombre por

área.php para la tabla áreas. Luego realizamos los cambios de los títulos, y nombre de
los campos. Del mismo modo para las páginas de agregar y modificar.
Programación III

53
Autoevaluación 05:

P01.- Que es una sesión en php

P02.- Como se crea una variable, se asigna un valor y se muestra el valor de la variable
en una sesión.
P03.- En todos o en la mayoría de los archivos creado hasta esta SESIÓN, en todos
ellos se incluyen:

Explique de forma breve cual es la funcionalidad o uso de esta parte de código.

P04.- Con las siguientes línea de codigo que se acción se está realizando.
<?php include('includes/header.php');?>
<?php include('includes/sidebar.php');?>

P05.- Que acción realiza la línea. $query->execute();

P06.- Explique el uso de la siguiente línea:
$id=getCodigo($dbh,'tipo_descuento','iddescuento');
P07.- En la siguiente línea cual es el resultado: header('location:tipodsto.php');
P08.- Por que utilizar el atributo “required”, en los campos de un formulario.
P09.- Según el código realizado hasta esta SESIÓN, cuantas maneras de gestionar los
datos de una tabla se ha visto.
P010.- Según la siguiente línea del archivo “addtipodsto.php”, al momento de hacer clic
en el botón Guardar a que página direcciona.
<form class="col s12" name="adperiodo" method="post">
Programación III

54

SESIÓN 06
DISEÑO Y PROGRAMACIÓN DE DATOS
DE LA TABLA PERSONAL.
Programación III

DISEÑO Y PROGRAMACIÓN DE DATOS DE LA TABLA PERSONAL.

55
Para este mantenimiento vamos a realizar llenado de combos de datos ya que
utilizaremos tres tablas para el registro de personal.
6.1. Diseño de interfaz gráfica del listado para el mantenimiento del personal.

En la opción de menú Gestión Personal, ingresamos a la opción Registro de personal.

Como se observa esta tabla tiene campos foráneos como áreas y cargo, por lo que en
las consulta vamos a utilizar la unión de tablas con el Inner Join.
También vamos a generar un código de personal: E2019-0001.

E2019-0001
Iniciamos con la letra E seguido del Año actual y
correlativo de 4 dígitos

Ahora vamos a describir la programación del archivo de listado de personal.

Syspersonal/app/personal.php

Siempre iniciamos validando que la sesión este activa.

Programación III

56

Si esta activa entonces incluimos la conexión a la Base de datos. Así como agregamos
el código para eliminar un registro de la tabla persona.

Ahora iniciamos el código html en la cual se incluyen las metas necesarias, los css y js
para la funcionalidad.

Los estilos para los mensajes de alerta de insertar, modificar y eliminar. Todo ello dentro
del head.
Programación III

57

Ahora incluimos los archivos para la cabecera y los así como asignamos el nombre del
archivo en el cual se utilizara para agregar más registros, en este caso en el botón
agregar de la línea 74. El archivo a llamar es addpersona.php

Iniciamos la cabecera del listado.

Programación III

58

Iniciamos la consulta a la tabla personal en la cual Unimos la consulta con la tabla caros
mediante el INNER JOIN, también se puede unir con la tabla áreas

Se valida que haya registros con “rowCount()” y se inicia a mostrar los datos de cada
registro con “foreach”.
Mostramos el Código, la fecha de ingreso, y validamos mediante el campo “Sexo” para
mostrar un icono que permite identificar el sexo del personal.

Seguido se muestra los apellidos, el nombre y el número de DNI. Hasta el nombre del
cargo.
En la línea 123, indicamos los botones para editar el cual llama al archivo
“editpersona.php”, y el botón eliminar el cual direcciona al mismo archivo, es por ello
que al inicio del código del archivo “personal.php” se describió las líneas de código que
permite eliminar un registro.
Programación III

Ahora cerramos el “foreach y la validación de datos.” Y se incluye los plugins js

necesarias al igual que los archivos anteriores. 59

Ahora describimos el código del archivo editar personal.

Syspersonal/app/addpersona.php

.php

Iniciamos con la validación de la sesión e incluimos los archivos de conexión y de

funciones para generar el ID del nuevo registro.
Programación III

Ahora incluimos el código en el cual recibimos los datos del formulario de agregar
personal. 60

En las líneas 28 se define la clave del personal en blanco, para que en la opción de
menú de configuración se defina la clave para el personal que tendrá acceso al sistema.

En las líneas 30 y 31; generamos el código correlativo en base a 4 dígitos con el nuevo ID
del vez
Una registro. Y seguido
recibido lo concatenamos
los datos, se define lacon la letra “E”
sentencia sqlypara
el años actual paradel
la inserción formar un registro.
nuevo código
correlativo tal como se mencionó al inicio de esta actividad.

Ahora creamos las consultas para llenar las listas desplegables de cargos y áreas.
Programación III

Iniciamos el html e incluimos los metas y estilos en la cabecera del archivo.

61

Cerramos el head e incluimos la cabecera y la barra de menús.

Creamos la fila para mostrar los mensajes de alerta, cuando se inserta, modifica o
elimina un registro.
Programación III

Ahora iniciamos a crear los contrales del formulario, una manera de acelerar este
proceso es crear el primer control y luego duplicamos el código y cambiamos los datos, 62
siempre respetando un orden de los datos según la tabla.

Seguimos creando los controles y entre las líneas 142 y 149, mostramos en una lista
desplegable los datos para elegir el sexo de la persona, también se puede utilizar el
control “radio button”.

Ahora utilizamos la consulta a la tabla cargos realizada al inicio de este archivo para
llenar la lista del control de cargos.
Programación III

63

Realizamos lo mismo para la lista de áreas.

Culminados con el campos sueldo, sistemas de pensiones y el número.

Ahora agregamos los botones del formulario, en el cual tenemos el botón cancelar para
regresar al ver el listado de los datos y el botón guardar, el cual envía los datos para
regístralo en la base de datos.

Finalmente cerramos el formulario y los DIV, para terminar con el diseño de formulario,
y la inclusión de los plugins js.
Programación III

64

Para culminar con l gestión de los datos de la tabla personal, describimos el código del
archivo “editpersona.php”

Syspersonal/app/editpersona.php

.php

El código de este archivo es similar al del addpersona.php, por lo que se encontrara muy
parecido el código que se describe a continuación.
Programación III

65

Una vez iniciamos con validar la sesión activa e incluimos la conexión a la base de datos.
Iniciamos a recibir en las variables los datos que se envían del formulario y luego
realizamos las consultas SQL para ejecutar la actualización de los datos.

Asignamos las variables para que la actualización del registro se ejecute correctamente.

Realizamos las consultas a las tablas cargos y áreas.

Programación III

66

Ahora iniciamos el código html, e incluimos los metas y los estilos necesarios.

Completamos de agregar los estilos y cerramos el head.

Iniciamos el BODY, e incluimos la cabecera y la barra de menús.

Programación III

67

Realizamos la consulta del registro seleccionado para modificar y iniciamos a crear los
controle del formulario y mostrar el datos a modificar, se muestra en el atributo “Value”.
Programación III

68

Llenamos la lista de cargos y áreas.

Programación III

69

Finalmente cerramos con los botones y la inclusión de los plugins.

Programación III

70
Autoevaluación 06:

P01.- En una tabla de datos, indique el uso de <th> y <td>

P02.- Que Función utilizar aria e indique un ejemplo para obtener el año actual.
P03.- Porque es importante la paginación en un listado de datos.
P04.- En la variables “$numempleado” Generar un código del personal según las
siguientes datos.
Dos Primeras letras de apellido en mayúsculas +
Dos últimos dígitos del año actual +
Dos numero 00 +
Los 3 primeros números del DNI

P04.- Cuales con los métodos de envió de datos mediante un formulario.

P05.- Cual es la Diferencia entre GET y POST
P06.- En la tabla personal se puede considerar un campo número de hijos
P07.- Según los campos de la tabla personal, que otros campos serian necesario incluir
para mejorar la gestión del personal de una empresa.
P08.- Que campo de la tabla personal se pueden considerar como campo primario y así
evitar tener un correlativo como ID.
P09.- Que acción recomendaría hacer con el registro de los datos de un personal
cuando deja de laborar en la empresa.
P10.- Para mostrar los valores de monedas (para sueldos, descuentos, etc.) que
funciones se utilizaría para mostrarlos siempre con dos decimales, teniendo en cuenta
que esta función sea compatible con la versión de php 5.4 a más.
Programación III

71

SESIÓN 07
PREPARAR PLANILLA DE PERSONAL
Programación III

PREPARAR PLANILLA DE PERSONAL

72
Para generar una planilla, se tiene que tener una planilla aperturada, así como los
descuentos y bonificaciones del personal deben estar cargadas en el sistema.
7.1. Aperturar planilla

La apertura de planilla es uno de los primeros pasos en la preparación de una planilla

de personal, esta opción esta creada dentro de la opción de configuración en la opción
de planillas.

Syspersonal/app/config_planilla.php

En este archivo vamos a listar todos las planillas que se van aperturando, así como ver
su estado de cerradas o inhabilitadas.
Como ya sabemos iniciamos con la validación de la sesión activa. Luego se incluye la
conexión a la base de datos, de la línea 9 a 16 es el código para eliminar la cual se
realiza en el mismo archivo.

Ahora llenamos la lista de periodos para lo cual se realiza la siguiente consulta, así como
recibimos la variables de la lista para la búsqueda de datos.
Programación III

73

Iniciamos el código html, en la cual se incluyen los css y js necesarios.

En la línea 67 se tiene la función para buscar las planillas por periodo, esta función se
llama desde el combo de periodos.
Incluimos la cabecera y la barra de menús, así como se asigna el título de la página y el
listado de periodos junto al botón de crear nueva planilla. La cual llama al archivo
addplanilla.php.
Programación III

74

Seguido del div para los mensajes de alerta para insertar, modificar y eliminar un
registro.
También se incluye la cabecera del listado de los datos.

Realizamos la consulta en la cual usamos el Inner Join para las tablas

configurar_planilla, periodo y titoplanilla.
Las dos consultas es la misma en la segunda de las línea 20, está consultando por
periodo. (Según el periodo elegido del combo).
Hora ejecutamos la consulta y validamos si hay resultados en la consulta para iniciar el
listado de los datos.
Programación III

Realizamos don validaciones, una para los meses según el número de mes que muestra
el nombre, y en el caso del estado de la planilla. 75

Ahora mostramos los datos y direccionamos a que página para editar y eliminar. Y
cerramos las capas.

Al final agregamos las líneas de los plugin js, para la funcionalidad del archivo y de la
función que muestra unos segundos los mensajes de alerta.
Programación III

Archivo: addplanilla.php
76
Syspersonal/app/addplanilla.php

Al crear una nueva planilla debemos completar los datos del formulario, ahora
describimos el código utilizado.
Iniciamos con validar la sesión activa e incluimos el archivo de conexión a la Base de
datos y la función para generar un nuevo ID para insertar el registro.
Recibimos los datos del formulario que se describirá en líneas posteriores, y se inserta
los datos en la tabla “configurar_planilla”.

Consultas para llenar los combos de tipo de panilla y periodo.

Programación III

Iniciamos el código html, incluimos las metas y los css.

77

Incluimos la cabecera y los menús, así como iniciamos el formulario y los mensajes de
alerta.

Iniciamos con el campo periodo, para ello llenamos la lista con los datos de la consulta
de la línea 34.
Programación III

78

El listado combo de los meses.

Llenado del combo tipo de planilla y el campo observación.

Finalmente agregamos los botones de cancelar y guardar y cerramos el formulario.

Finalmente agregamos los plugin y la función para los mensajes de alerta.

Programación III

79

Archivo: editplanilla.php

Syspersonal/app/editplanilla.php

Iniciamos con la validación de la sesión, e incluimos la conexión a la Base de datos.

Posterior a ello validamos si el formulario tiene datos y recibimos los datos a editar según
los nombres de los input text del formulario que más adelante vamos a describir.
Una vez recibimos las variables, ejecutamos la inserción de los datos.
Programación III

80

Ahora realizamos las consultas a las tablas tipo de planilla y periodo para llenar las lista
del formulario.

Iniciamos código html y el uso de los meta, css para la apariencia del entorno.
Programación III

81

Incluimos la cabecera y los menús de la aplicación, definimos el título del formulario y

validamos la muestra de los mensajes de alerta.

Recibimos el Id del registro a modificar y realizamos la consulta en la tablas, una vez

contenido los datos lo almacenamos en variables para luego mostrarlo en los control del
formulario.

Ahora iniciamos el formulario con el llenado del periodo y la validación de que se muestre
por defecto el periodo del registro a modificar.
Programación III

82

Para los meses, igualmente se valida que el mes del registro a modificar se muestre por
defecto, según la validación.

Lo mismo se realiza con el combo del tipo de planilla y la validación para que se muestre
por defecto el tipo de planilla a modificar.

Agregar el ultimo campo y el botón Actualizar y cerramos el formulario.

Programación III

Y ahora agregamos los plugin necesarios.

83

Agregamos el script para los mensajes de alerta.

Tener en cuenta que esta opción de configuración de planilla, se debe de tenr solo una
planilla activa.

7.2. Cargar los datos de descuentos y bonificaciones del personal.

Como segundo paso de carga los descuentos y bonificaciones al personal, según la

planilla activa.
En la gestión de planillas iniciamos la asignación de descuentos al personal.

Se observa el listado del personal, para agregar el descuento asignado según la planilla
activa, hacer clic en el botón de lo punto para que se muestre el formulario de asignación
y listado de descuentos cargados.
Programación III

84
Tal como se observa en la siguiente pantalla.

A continuación describimos el código utilizado en el Archivo: config_dsto.php

Syspersonal/app/config_dsto.php

Iniciamos la validación de la sesión activa, e incluimos la conexión a la base de datos.

Así como se realiza la consulta a la tabla de tipos de descuentos para llenar el combo.

Ahora obtenemos la planilla activa, en la cual debemos obtener el periodo, tipo de

planilla y mes activa, a la cual se cargara y mostrar los descuentos.
Programación III

Iniciamos el html e para este proceso de asginación de descuentos y bonificaciones,

vamos a utilizar las librerías de jquery. 85

Creamos la función verdetalle(), en la cual vamos a mostrar el nombre del personal

seleccionado la cual se muestra con el achivo vistadata_dsto.php.
Y con el archivo vistalista_dsto.php, los descuentos asignados al personal seleccionado.

En la función grabar_Datos(), permite asignar el descuento al personal el cual se hará

el descuento en el pago de la planilla activa. El código de registro está en el archivo
vistalista_dsto.php

Así como se pueda asignar un descuento, también podemos quitar el descuento que
por algún motivo se le agrego de forma errónea.
Programación III

Para este caso se crea la función eliminar (), la cual el codigo del proceso se describe
en el archivo vistalista_dsto.php. 86

Otra función de utilidad es la que permite buscar los datos del personal, la cual ante un
listado de más de 20 registro podemos utilizar la función buscar_datos(), para ubicar un
personal que no se muestre en la lista inicial y poder asignar o ver qué tipo de descuento
se le esta realizando.

Una vez cerrado el script, iniciamos el html incluyendo los ya conocidos meta y los css
necesarios.

Seguido de los estilos para los mensajes de alerta, dentro de head y cerramos el body.
Programación III

87

Ahora incluimos la cabecera y los menús, el título del formulario así como la capa para
el mensaje de alerta.
También definimos la búsqueda del personal la cual se llama a la función
buscar_datos(), con el evento onkeyup. El cual se ejecuta al ingresar una determinada
letra en la caja de texto.

Creamos una capa para el listado de los datos con el nombre “viewdata”. En la cual se
define la cabecera de la tabla y la consulta a la tabla personal la cual se limita a un total
de 20 registros. (El inner join se puede obviar). En la línea 211 se llama a la función
verdetalle(), en la cual se envía el ID del personal lo cual permite mostrar sus datos y
ver los descuentos asignados según la planilla activa.
Programación III

88

Cerramos los DIV faltantes y iniciamos el formulario del lado derecho en el cual tenemos
un formulario oculto (línea 227: con el comando display:none) el cual cuando se llama a
la función verdetalle(); se habilita.
Este formulario permite agregar descuentos al personal seleccionado, según la planilla
activa. Un combo para elegir el descuento, una text para el importe y el botón agregar,
el cual esta validado si no hay planilla activa no permite agregar.
Programación III

Seguido tenemos los DIV para mostrar el nombre del personal elegido y la lista de los
descuentos asignados. 89

Finalmente se agregan los plugin js. Y la función para los mensajes de alerta.

Syspersonal/app/vistadata_dsto.php

En esta página mostramos el nombre del personal seleccionado.

Como todo archivo que hemos creado, iniciamos con validar si la sesión esta activa,
luego se incluye la conexión a la base de datos.
Línea 9: recibimos el ID del personal y realizamos la consulta para obtener los datos del
personal. Validamos si existe el ID y asignamos los apellidos y nombres en la variable:
$nomper.
Línea 21: asignamos el ID del personal en el text de tipo oculto (hidden) “idpersonal”, el
cual llamaremos en las funciones para registrar y consultar sus descuentos.
Finalmente mostramos el nombre y apellido del personal (Línea 24)
Programación III

90

Syspersonal/app/vistalista_dsto.php

En este archivo vamos mostrar los descuentos asignados al personal, así como agregar
y eliminarlos.
Las líneas iniciales ya las conocemos, entre las líneas 10-16 se realiza la anulación de
un descuento al personal.
Y entre las lines 19-32, insertamos o agregamos un determinado descuento al personal.
Programación III

Validar y Obtener los datos de la planilla activa.

91

Para referencia mostramos el nombre de la planilla activa. Si no existe muestra mensaje

de error. E iniciamos la cabecera del listado de descuentos del personal.

Realizamos la consulta y mostramos los descuentos registrados en la tabla

descuento_personal, según el personal seleccionado y la planilla activa.
Programación III

En este listado permite eliminar el descuento, para lo cual se llama a la función eliminar
(línea 93). 92

Para completar la funcionalidad el código del archivo dat_persona.php

Syspersonal/app/dat_persona.php

Para las bonificaciones del personal según la planilla activa se realiza

el mismo procedimiento que el de los descuentos

A continuación describimos el código utilizado en el Archivo: config_boni.php

Syspersonal/app/config_boni.php
Programación III

93

Iniciamos las funciones.

Función grabar.
Programación III

94

Función eliminar y buscar datos y cerramos el script.

Iniciamos el código html, incluyendo las metas y css.

Incluimos el código css para los mensajes de alerta.

Programación III

<style> 95
<!—Agregar codigo -->

</style>

Cerramos el head e iniciamos el body.

Incluimos la cabecera y la barra menús, el título del formulario y la condición para los
mensajes las alertas.
Línea 175: Definimos el text de búsqueda el cual llama a la función buscar_Datos(); al
presionar una tecla con el evento onkeyup().
Esta búsqueda está definida por el DNI, apellidos y nombres.

Creamos un DIV “viewdata” para la muestra de los datos del personal el cual permitirá
mostrar los resultados de la búsqueda.

Definimos un formulario para agregar las bonificaciones el cual está oculto con el
parámetro “display:none”. Lo campos son tipo bonificación y valor.
Programación III

96

Se valida el botón agregar, si no hay una planilla activa no se pueda agregar la

bonificación.

Creamos dos DIV para mostrar el nombre del personal y el segundo para mostrar el
listado de las bonificaciones asignadas.

Ahora agregar los plugin y la función para los mensajes de alerta.

Programación III

97

Syspersonal/app/vistadata_boni.php

En esta página mostramos el nombre del personal seleccionado.

Como todo archivo que hemos creado, iniciamos con validar si la sesión esta activa,
luego se incluye la conexión a la base de datos.
Línea 9: recibimos el ID del personal y realizamos la consulta para obtener los datos del
personal. Validamos si existe el ID y asignamos los apellidos y nombres en la variable:
$nomper.
Línea 22: asignamos el ID del personal en el text de tipo oculto (hidden) “idpersonal”, el
cual llamaremos en las funciones para registrar y consultar sus descuentos.
Finalmente mostramos el nombre y apellido del personal (Línea 25)
Programación III

98

Syspersonal/app/vistalista_boni.php

En este archivo vamos a mostrar las bonificaciones según la planilla activa, así como
agregar y eliminar las bonificaciones del personal.

Realizamos la consulta para obtener los datos de la planilla activa.

Ahora según los datos obtenidos extraemos el periodo, el tipo de planilla y el número de
mes de la planilla activa.
Si existen mostramos los datos, de lo contrario mostrara un mensaje de error.
Programación III

99

Ahora el código para insertar, es decir para registrar las bonificaciones asignadas al
personal según la planilla activa.

Iniciamos la cabera del listado de los datos.

Finalmente realizamos la consulta a la tabla “bonificación_personal”, para mostrar los

descuentos del personal seleccionado, según la planilla activa. Una vez mostrados los
datos en la línea 100 tenemos la función eliminar ().
Programación III

100

Para completar con este módulo tenemos el código del archivo de búsqueda de
personal.

Syspersonal/app/dat_persona.php
Programación III

101
Autoevaluación 07:

P01.- Un control de un formulario tiene dos parámetros o atributos que le permiten ser
identificados para poder manipular su información.
P02.- Que resultado de obtiene si a un control de un formulario se asigna el valor
“Hidden”
P03.- Explique el uso de la siguiente línea.
var idper=$('#idpersonal').val();
P04.- Con que instrucción Jquery se puede ocultar el contenido de un DIV
P05.- Que resultado se obtiene si se asigna el siguiente código a un DIV.
$('#namecontrol).show();
P05.- Para ocultar un contenido se usa mayormente el Jquery, pero también se puede
ocultar con condigo CSS, indique cual es la manera.
P06.- Explique la utilidad de la Liberia jquery.dataTables.min.css y si es que se combina
con otras librerías
P07.- Es lo mismo hablar de usar Jquery o AJAX
P08.- Con lo visto hasta esta SESIÓN qué opinas del usar la tecnología Bootstrap.
P09.- Describa el uso de las siguientes instrucciones.
<!DOCTYPE html>
<html lang="en">
P10.- Describa el resultado de la siguiente instrucción.
Programación III

102

SESIÓN 08
GENERAR PLANILLA DE TRABAJADORES,
EXPORTAR A EXCEL Y OTROS REPORTES.
Programación III

GENERAR PLANILLA DE TRABAJADORES, EXPORTAR A EXCEL Y OTROS

REPORTES. 103

Para culminar como toda aplicación, se tiene los reportes, pero previo a ello
generaremos la planilla y luego la exportaremos en formato portables de tipo xls.
8.1. Generar datos de planilla mediante formato Excel y realizar el cierre.

Syspersonal/app/generarpla.php

En este proceso una vez configurado una panilla activa y cargado los descuentos y
bonificaciones al personal se procede a generar la planilla y luego expórtala a Excel.
Iniciamos validando la sesión activa e incluimos la conexión a la Base de Datos.

Recibimos las varianles de las lista de filtrado y las consultas para obtener los datos de
los descuentos y bonificaciones para armar la cabecera de la planilla
Programación III

104

Iniciamos el código html, creamos la función ver_data() para realizar la consulta de los
datos de una planilla activa y la función generar_planilla() para registrar y cerrar la
planilla generada.

Incluimos los metas y css como las fuentes de iconos de google y los estilos de
apariencia. Adicional a ello el silo para el mensaje de alerta.
Programación III

105

Iniciamos el <body> e incluimos la cabecera y la barra de menús.

Ahora iniciamos el formulario, los controles de consultas según planilla activa y los
botones para generar la planilla.

Iniciamos con el listado de tipos de planilla con la consulta de la línea 29.

Programación III

106

Ahora llenamos el listado de periodos con la consulta de la línea 36.

Ahora llenamos la lista de los mese con la consulta de la línea 43.

Finalizamos creando los botones y cerramos el formulario.

Programación III

107

Iniciamos la cabecera de la planilla generar, en la línea 224 mostramos todas los

descuentos registrados en la tabla “tipo_descuento”

Lo mismo realizamos con las bonificaciones, estas funciones se realizan con las
consultas realizadas en las líneas 15 y 21.

Cerramos el TR e iniciamos con la consulta para obtener los datos del personal y de
los descuentos y bonificaciones y realizar los cálculos para obtener el sueldo a pagar.
Programación III

Mostramos los primeros datos del personal como el código, validamos el sexo para
mostrar un icono que los diferencia a la vista del usuario e incluimos los apellidos y 108
nombres, junto el número de DNI.
Seguido del campo sueldo al cual se convierte en un numero con dos decimales (línea
272 y lo mostramos en la línea 273).

Ahora obtenemos los descuentos según el personal y los datos de la planilla activa; para
ello primero en la línea 282 obtenemos el ID del personal y en la línea 283 creamos una
variables “$ttdsto” para acumular el total de los descuentos por personal.

En la línea 284 iniciamos la consulta a la tabla “Tipo Descuentos” para hacer un

recorrido uno a uno de los registros, mientras se consulta en la tabla de “Descuentos
personal” si el personal tiene ese tipo de descuento cargado para la planilla activa.
A su vez en la variable “$ttdsto”, se acula los importes de los descuentos encontrados,
esto se refleja en la línea 299.
Del mismo modo se aplica para las bonificaciones con la variables “$ttbinf” reflejada en
la línea 330.
Programación III

109

Convertimos los resultados en números con dos decimales y mostramos los

resultados.

Cerramos los DIV y agregamos los plugin js necesarios.

Ahora describimos el código del botón exportar planilla.

Programación III

Syspersonal/app/xls_gp.php 110

En este archivo el código es similar al del archivo generarpa.php. Las líneas 10,11 y
12 son las que definen el reporte en Excel, ya que son las variables que se reciben los
datos de la panilla, periodo y mes activo.

Luego tenemos las consultas para os descuentos y bonificaciones para la cabecera y

obtener los datos de la planilla activa.

Obtenemos el nombre de la planilla, periodo y mes para mostrarlo.

Programación III

111

Ahora el código que permite exportar los datos en un archivo de Excel, el código de las
línea 60 y 61 van en una sola línea, en la cual se está dando el nombre de planilla,
seguido del tipo de planilla, nombre del periodo y el número del mes

Esto permite que al exportar se muestre la siguiente pantalla para guardar el archivo
XLS.

Iniciamos el código html con los datos de la planilla, para lo cual solo se aplica el uso
de tablas, ya que en este apartado no se reconoce los DIV.

Seguimos con la cabecera de la tabla.

Programación III

112

Creamos la consulta de todo el personal y iniciamos a mostrar los datos.

Programación III

113

Cerramos con la conversión de los totales en números con 2 decimales y los

mostramos.
Programación III

114

8.2. Consultas y generar reporte de personal y planillas.

Es este espacio de consultas vamos a consultar datos del personal y históricos de
planillas.

Syspersonal/app/r_personal.php

.php

Este espacio vamos a listar los datos del personal, en la cual se puede buscar por el
nombre, apellido, DNI u otro dato, así como tiene la paginación. Dando la opción d
exportar la información en un archivo de formato XLS.
Describamos el código: Iniciamos validando la sesión activa e incluimos la conexión a
la base de datos.

Ahora incluimos los meta y los plugins de tipo css.

Programación III

115

Incluimos la cabecera y la barra de menús, y creamos el botón de exportar a Excel, en

el cual se referencia al archivo “xls_per.php”.

Iniciamos la cabecera de la tabla de datos.

Realizamos la consulta la cual aplicamos el INNER JOIN a la tabla cargos, también se

puede incluir la tabla área si deseamos mostrar el nombre del área.

Una vez ejecutada la consulta validamos que haya registros y mostramos los datos.
Programación III

116

Finalmente cerramos los DIV.

Como se observa este código es similar al código del archivo de “personal.php”.

Ahora describimos el código del archivo “xls_per.php”, el cual es el que genera el

archivo en Excel. Lo cual es el mismo código del archivo “r_personal.php”, solo sin las
referencias a los js ni css.

Syspersonal/app/xls_per.php

.php
Iniciamos la validación de la sesión e incluimos el archivo de conexión. Asi como los
header para generar el archivo XLS.

Iniciamos el código html, e definimos el título del reporte.

Programación III

117

Creamos la cabecera de la tabla de datos.

Iniciamos la consulta y mostramos los resultados.

Una vista previa del reporte en Excel.

Programación III

118

Ahora veamos el código del archivo de reporte de planillas en el archivo “r_planilla.php”,

en la cual a diferencia del archivo de la opción de gestión de planilla es que en este
espacio podemos filtrar por cualquier tipo de planilla, cualquier periodo y cualquier mes.

Syspersonal/app/r_planilla.php

.php
Programación III

119

Incluimos los metas y los css.

Incluimos la cabecera y las barra de menús. Así como iniciamos el formulario para las
lista de consultas por planillas, periodo y mes.
Programación III

120

Cerramos con el listado de mese y el botón de exportar planilla.

Ahora creamos la cabecera de la tabla.

Programación III

Realizamos la consulta y iniciamos a mostrar los datos.

121

Ahora obtenemos los descuentos del personal según la planilla, periodo y mes
seleccionado.
Programación III

Lo mismo realizamos con los datos de la bonificación.

122

Ahora mostramos los últimos datos y cerramos la tabla.

Ahora terminamos incluyendo los plugins de los js.

Ahora el archivo “xls_gp”, que llama el botón exportar, el código es el mismo archivo
que se llama desde la pantalla de gestión de planilla.

Syspersonal/app/xls_gp.php

.php
Programación III

8.3. Gestión de acceso de usuarios al sistema de planilla

123
Como parte de la seguridad e integridad de los datos, en la opción de
“configuraciones”, se tiene la opción de “usuarios”; en la cual vamos a gestionar el
usuario y clave de acceso del personal al sistema.
La funcionalidad de este módulo se vincula al registro del personal, en el cual cuando
se registra al personal en el último campo “tipousuario” de la tabla, se ingresa el valor
“0”, lo cual indica que por defecto el personal registrado no tiene acceso a gestionar los
datos del sistema.
En esta opción cuando se le asigna una clave al personal se convierte en usuario del
sistema y a su vez se cambia el estado de “cero” a “uno”.

En esta pantalla se observa el listado del personal en la cual al lado derecho en la

columna de contraseña se puede identificar quienes tienen acceso al sistema, ya que
cuenta con una clave encriptada.
Al lado derecho se tiene dos iconos
los cuales permiten asignar la clave
y el otro quitar el acceso del al
sistema.
Para asignar una clave al personal,
primero se debe de ubicar en la lista
si no se muestra en el listado inicial
se puede utilizar la búsqueda rápida
y luego hacer clic en el icono para
asignar la clave.
Programación III

Ahora describimos el código.

124
Syspersonal/app/user.php

.php
Iniciamos validando la sesión activa e incluimos la conexión a la base de datos, a partir
de la línea 08, definimos el código para quitar los permisos de acceso al personal para
lo cual se le quita la clave y se cambia de estado al campo “tipousuario”.

Iniciamos el código html y el uso de los metas y estilos.

Programación III

125

Una vez cerrado el head, Iniciamos el codgio del body

Iniciamos la cabecera del listado de datos.

Ahora creamos la consulta para mostrar los datos del personal, que en lo general el
código similar al del archivo que muestra los datos del personal “personal.php”
Programación III

126

Validamos que tipo de usuario es para mostrar una descripción en el listado de los datos.
Y seguido mostramos los datos como código, dni, apellidos, correo, clave y el tipo de
usuario.

Como se observa en el código hay términos como: email, vpn_key, verified_user estos son los
nombre de las fuentes de iconos los cuales se muestran en el listado de esta pantalla.

El icono de la “llave”, que permite asignar la clave de acceso al personal nos direcciona
al archivo “edituser.php”.
Finalmente cerramos los DIV y incluimos los plugins js para completar la funcionalidad.
Programación III

127

Descripción del código de ediuser.php

Syspersonal/app/edituser.php

.php
Pantalla para editar y asignar clave de acceso al sistema para el personal de la empresa.

Como se sabe, siempre se inicia con la validación de la sesión y la inclusión a la

conexión de la base de datos.
En la línea 9: se recibe el ID del personal a actualizar sus datos.

Seguido, iniciamos el código para modificar los datos, para ello recibimos la información
del formulario y ejecutamos el SQL para la actualización en la tabla correspondiente.
Programación III

128

Agregamos los metas y estilis.

Obtenemos los datos a modificar del personal seleccionado.

Programación III

129

Mostramos los datos obtenidos en el formulario.

Incluimos lo botones y cerramos con los plugin js.

Programación III

8.4. Otras funcionalidades a desarrollar en la aplicación para su

130
perfeccionamiento y aplicación en una determinada empresa.
Como parte de la mejora continua de un sistema se tiene que analizar que
funcionalidades se pueden automatizar.
- Configurar los porcentajes de los descuentos de essalud u otros.
- Automatizar un módulo para la asistencia del personal.
- Considerar más tipos de personal como obrero, empleado, CAS, terceros para
lo cual a cada grupo se tiene que generar un tipo de planilla.
- En cuanto a bonificaciones si el trabajador tiene horas extras, este tendría un
costo específico y al elaborar planilla se calcularía de forma automática.
- Otras funcionalidad es la del gestión de usuarios del sistema, ya que los usuarios
pueden tener acceso a ciertas opciones del sistema
- Llevar un registro histórico del acceso al sistema por parte de los usuarios.
- En cada registro de descuentos, bonificaciones o al generar planilla se registre
también el nombre del usuario de quien lo realizo.

Para descargar la aplicación completa la pueden ubicar en la siguiente url:

https://github.com/jeefernandez/jeefperu, en el cual también encontrara una guía para su
instalación.
Programación III

Autoevaluación 08:
131

P01.- Que meta utilizarías o que otro método conoces para evitar que las letras son
tildes y las letras Ñ se visualicen correctamente.
P02.- Para publicar el sistema en un servidor local y trabaje en red que cambios
realizarías en la conexión de la BD.
P03.- Describa el uso de la función. “$query->fetchAll”
P04.- Que uso le podemos dar a la función: number_format
P05.- Cual es el uso de la función: substr()
P06.- Que ventajas o cual recomendarías, según tu experiencia si se tiene que
desarrollar un aplicación web con la extensión Mysql_query o pdo->query.
P07.- Como sería el código PHP para insertar un registro en la tabla ciudad que tiene
un campo código y nombre.

P09.- Que otros herramientas conoces o has utilizado para implementar un servidor web
P010.- Define un servidor LAMP.