TECNOLÓGICO NACIONAL DE MÉXICO

INSTITUTO TECNOLÓGICO DE LA PIEDAD

Departamento de Ciencias y Computación

Ing. en Sistemas Computacionales

PROGRAMACION WEB

BACK-END DE FORMULARIO DE INSCRIPCION.

Documentación

Por:

Julio Cesar Saldívar Cervantes

Erick Báez Hernández

La Piedad Michoacán 28 de marzo del 2019

 TERMINACION DEL FORMULARIO DE INSCRIPCIONES DEL INSTITUTO TCNOLOGICO DE LA
PIEDAD.

Al front-end del formulario de inscripciones del tec hay que agregarle la funcionalidad de registro,
Para ello se tiene que crear primero un base de datos, con los campos necesarios que requiere.

En este caso utilizaremos mySQL como en ejercicios anteriores se ha implementado, primero se

crea un modelo de base de datos, en la opción de “file -> new model” y creamos un modelo como
el de la figura 1:

Figura 1. Diseño de la base de datos.

En este modelo se tienen las siguientes tablas:

1. Carrera.
2. T_estado.
3. T_municipio.
4. T_localidad.
5. Alumnos.
Las relaciones mostradas se establecieron en base al criterio propuesto en clase, dejando como
tabla más débil a alumnos por lo cual debe ser la última en ser creada.

Al terminar el diseño podremos crear el script, de la siguiente manera:

1. Damos clic en el menú de file.

2. En la opción export-> forward engineer SQL CREATE script.

Figura 2. Ventana Forward engineer SQL Scrpit(SQL EXPORT OPTIONS).

En la figura 2, nos muestra la ventana que nos abrirá al elegir esa opción, aquí elegimos donde se
guardará el script credo. Damos clic en next.
 Figura 3. Ventana Forward engineer SQL Scrpit(FILTER OBJECTS).

En la figura 3 nos muestra los filtros con los que será exportado el modelo al script, elegimos solo
la primera opción.

En la última ventana solo nos mostrará el script que será generado. Le damos clic en finalizar. El
script generado en este caso contiene lo siguiente:

SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0;

SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0;
SET @OLD_SQL_MODE=@@SQL_MODE,
SQL_MODE='ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE
,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION';

-- -----------------------------------------------------
-- Schema itlp
-- -----------------------------------------------------
DROP SCHEMA IF EXISTS `itlp` ;

-- -----------------------------------------------------
-- Schema itlp
-- -----------------------------------------------------
CREATE SCHEMA IF NOT EXISTS `itlp` DEFAULT CHARACTER SET utf8 ;
USE `itlp` ;

-- -----------------------------------------------------
-- Table `itlp`.`t_estado`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `itlp`.`t_estado` (
`id_estado` TINYINT UNSIGNED NOT NULL,
`estado` VARCHAR(45) NOT NULL,
PRIMARY KEY (`id_estado`))
ENGINE = InnoDB;

-- -----------------------------------------------------
-- Table `itlp`.`t_municipio`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `itlp`.`t_municipio` (
`id_municipio` INT UNSIGNED NOT NULL,
`municipio` VARCHAR(45) NOT NULL,
`t_estado_id_estado` TINYINT UNSIGNED NOT NULL,
PRIMARY KEY (`id_municipio`),
INDEX `fk_t_municipio_t_estado1_idx` (`t_estado_id_estado` ASC),
CONSTRAINT `fk_t_municipio_t_estado1`
FOREIGN KEY (`t_estado_id_estado`)
REFERENCES `itlp`.`t_estado` (`id_estado`)
 ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB;

-- -----------------------------------------------------
-- Table `itlp`.`t_localidad`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `itlp`.`t_localidad` (
`id_localidad` INT UNSIGNED NOT NULL,
`localidad` VARCHAR(45) NOT NULL,
`t_municipio_id_municipio` INT UNSIGNED NOT NULL,
PRIMARY KEY (`id_localidad`),
INDEX `fk_t_localidad_t_municipio1_idx` (`t_municipio_id_municipio` ASC) ,
CONSTRAINT `fk_t_localidad_t_municipio1`
FOREIGN KEY (`t_municipio_id_municipio`)
REFERENCES `itlp`.`t_municipio` (`id_municipio`)
ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB;

-- -----------------------------------------------------
-- Table `itlp`.`carrera`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `itlp`.`carrera` (
`id_carrera` INT UNSIGNED NOT NULL AUTO_INCREMENT,
`nombre` VARCHAR(60) NOT NULL,
PRIMARY KEY (`id_carrera`))
ENGINE = InnoDB;
-- -----------------------------------------------------
-- Table `itlp`.`alumnos`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `itlp`.`alumnos` (
`idtable1` INT UNSIGNED NOT NULL AUTO_INCREMENT,
`fechaRegistro` DATETIME NOT NULL,
`nombreCompleto` VARCHAR(70) NOT NULL,
`fechaNacimiento` DATE NOT NULL,
`lugarNacimiento` VARCHAR(45) NOT NULL,
`estadoCivil` CHAR(1) NOT NULL,
`sexo` CHAR(1) NOT NULL,
`direccion` VARCHAR(45) NOT NULL,
`colonia` VARCHAR(40) NOT NULL,
`codigoPostal` CHAR(5) NOT NULL,
`telefono` VARCHAR(13) NOT NULL,
`correoElectronico` VARCHAR(45) NOT NULL,
`nombreTutor` VARCHAR(45) NULL,
`telefonoTutor` VARCHAR(13) NULL,
`nivelEstudios` CHAR(1) NOT NULL,
`escuelaProcedencia` VARCHAR(45) NOT NULL,
`estadoProcedencia` VARCHAR(45) NOT NULL,
`autorizacionT` VARCHAR(45) NOT NULL,
`grupo_indigena` CHAR(2) NULL,
`discapacidad` CHAR(2) NULL,
`beneficiario_prospera` CHAR(2) NULL,
`t_localidad_id_localidad` INT UNSIGNED NOT NULL,
`carrera_id_carrera` INT UNSIGNED NOT NULL,
PRIMARY KEY (`idtable1`),
 INDEX `fk_alumnos_t_localidad1_idx` (`t_localidad_id_localidad` ASC) ,
INDEX `fk_alumnos_carrera1_idx` (`carrera_id_carrera` ASC) ,
CONSTRAINT `fk_alumnos_t_localidad1`
FOREIGN KEY (`t_localidad_id_localidad`)
REFERENCES `itlp`.`t_localidad` (`id_localidad`)
ON DELETE NO ACTION
ON UPDATE NO ACTION,
CONSTRAINT `fk_alumnos_carrera1`
FOREIGN KEY (`carrera_id_carrera`)
REFERENCES `itlp`.`carrera` (`id_carrera`)
ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB;

SET SQL_MODE=@OLD_SQL_MODE;
SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS;
SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS;

Ahora ya que se ha creado la base de datos necesitamos llenar con información las siguientes
tablas: t_estado, t_mnicipio, t_localidad y carrera; en ese mismo orden, para las 3 primeras tablas
se necesita de ayuda ya que registrar todos los datos manualmente es casi imposible, para ello se
utilizaran 3 archivos de exell que ya tienen los datos necesarios, solo necesitamos exportar esos
datos de la siguiente manera:
1. Colocamos los archivos de exell en la ruta donde los datos de la “BD” son guardados, la
cual es: “C:\ProgramData\MySQL\MySQL Server 5.6\data\[nombre de la base de datos]”.
2. Debemos usar nuestra base de datos, con el comando: use [nombre de la base de datos].
3. Al pegarlos ahí lo siguiente es ejecutar una sentencia que importe automáticamente la
información, la cual es:

LOAD DATA INFILE 'nombre_del_arhivo_completo'

INTO TABLE tabla_a_la_que_se_importaran_los_datos
character set utf8
FIELDS TERMINATED BY ','
OPTIONALLY ENCLOSED BY '\"'
LINES TERMINATED BY '\r\n';
Este es un código estándar, el cual puede aplicarse a cualquier tabla, una nota importante es que
los datos a importar deben coincidir, esto quiere decir que debemos tener en cuenta lo siguiente:

 El número de columnas debe ser el mismo.

 Los datos deben estar en el mismo orden.
 Los datos deben ser del mismo tipo.
 Este debe ser guardado en extensión .csv.
Si todo esto se cumple, el código deberá funcionar perfectamente. El código implementado en
este caso fue:
LOAD DATA INFILE 'estado.csv'
INTO TABLE itlp.t_estado
character set utf8
FIELDS TERMINATED BY ','
OPTIONALLY ENCLOSED BY '\"'
LINES TERMINATED BY '\r\n';

LOAD DATA INFILE 'municipio.csv'

INTO TABLE itlp.t_municipio
character set utf8
FIELDS TERMINATED BY ','
OPTIONALLY ENCLOSED BY '\"'
LINES TERMINATED BY '\r\n';

LOAD DATA INFILE 'localidad.csv'

INTO TABLE itlp.t_localidad
character set utf8
FIELDS TERMINATED BY ','
OPTIONALLY ENCLOSED BY '\"'
LINES TERMINATED BY '\r\n';
En el caso de la tabla de carreras es muy simple ya que solo hay 7 carreras en ITLP:
INSERT INTO carrera(id_carrera,nombre)
VALUES(1,'INGENIERIA EN SISTEMAS COMPUTACIONALES');
INSERT INTO carrera(id_carrera,nombre)
VALUES(2,'INGENIERIA EN TECNOLOGIAS DE LA INFORMACION');
INSERT INTO carrera(id_carrera,nombre)
VALUES(3,'INGENIERIA EN BIOQUIMICA');
INSERT INTO carrera(id_carrera,nombre)
VALUES(4,'INGENIERIA EN MECATRONICA');
INSERT INTO carrera(id_carrera,nombre)
VALUES(5,'INGENIERIA EN ADMINISTRACION');
INSERT INTO carrera(id_carrera,nombre)
VALUES(6,'INGENIERIA EN GESTION EMPRESARIAL');
INSERT INTO carrera(id_carrera,nombre)
VALUES(7,'INGENIERIA INDUSTRIAL');
Ahora solo debemos hacer que los datos de la base de datos puedan estar disponibles en el
formulario para que estos sean accesibles, en la parte superior del código del formulario,
colocamos lo siguiente:

<?php
require ('conexion.php');

$query = "SELECT id_estado, estado FROM t_estado ORDER BY estado";

$resultado=$mysqli->query($query);
?>
Este código nos permite consultar los estados que tenemos en nuestra base de datos, los
resultados son guardados en la variable $resultado.
Para que los municipios y las localidades sean visibles y estos cambien cuando se elija un estado,
se coloca en la sección de head, lo siguiente:

<script language="javascript">
$(document).ready(function(){
$("#cbx_estado").change(function () {

$('#cbx_localidad').find('option').remove().end().append('<option
value="whatever"></option>').val('whatever');

$("#cbx_estado option:selected").each(function () {
id_estado = $(this).val();
$.post("includes/getMunicipio.php", { id_estado: id_estado },
function(data){
$("#cbx_municipio").html(data);
});
 });
})
});

$(document).ready(function(){
$("#cbx_municipio").change(function () {
$("#cbx_municipio option:selected").each(function () {
id_municipio = $(this).val();
$.post("includes/getLocalidad.php", { id_municipio:
id_municipio }, function(data){
$("#cbx_localidad").html(data);
});
});
})
});
</script>

En esta sección modificamos las propiedades de los comboBox de municipios y localidades, en el

cual serán mostrados los municipios y/o localidades que solo son requeridos, en base a la
selección anterior (ESTADO o MUNICIPIO). Para ello se requieren los archivos “getmunicipio.php”
y “getlocalidad.php”, los cuales consultan la información requerida, en base al “id”, que ha
registrado su tabla padre correspondiente. En el caso de municipio regresara aquellos que tengan
el “id_estado”, igual al id que registra la consulta de estado, en el caso de localidad regresara
aquellos que tengan el “id_municipio” igual al id que registra la consulta de municipio.
getMunicipio.php contiene lo siguiente:

<?php

require ('../conexion.php');

$id_estado = $_POST['id_estado'];

$queryM = "SELECT id_municipio, municipio FROM t_municipio WHERE

t_estado_id_estado = '$id_estado' ORDER BY municipio";
$resultadoM = $mysqli->query($queryM);

$html= "<option value='0'>Seleccionar Municipio</option>";

while($rowM = $resultadoM->fetch_assoc())
{
$html.= "<option
value='".$rowM['id_municipio']."'>".$rowM['municipio']."</option>";
}

echo $html;
?>
Este documento consulta todos los municipios que pertenezcan al estado que se ha seleccionado,
recibe id_estado del comboBox de estado para después hacer la consulta de los municipios que
pertenezcan al estado, los resultados son agregados dinámicamente en el while al comboBox de
municipio.
getLocalidad.php contiene lo siguiente:

<?php
require ('../conexion.php');

$id_municipio = $_POST['id_municipio'];

$query = "SELECT id_localidad, localidad FROM t_localidad WHERE

t_municipio_id_municipio = '$id_municipio' ORDER BY localidad";
$resultado=$mysqli->query($query);

while($row = $resultado->fetch_assoc())
{
$html.= "<option
value='".$row['id_localidad']."'>".$row['localidad']."</option>";
}
echo $html;
?>
Este documento consulta todas las localidades que pertenezcan al municipio que se ha
seleccionado, recibe id_minicipio del comboBox de municipio para después hacer la consulta de
las localidades que pertenezcan al municipio, los resultados son agregados dinámicamente en el
while al comboBox de localidad.
Estos a su vez requieren un archivo llamado “conexión.php”, el cual guarda el código para hacer la
conexión a la base de datos. Su contenido es el siguiente:

<?php

$mysqli = new mysqli ("localhost", "root", "due12date34", "itlp");

if($mysqli->connect_errno){
echo "Fallo al conectar a MySQL: (" . $mysqli->connect_errno . ") ".
$mysqli->connect_error;
exit();

}
Ahora hay que colocar los comboBox correspondientes, con el mismo nombre que se usa en la
primera sección de código que agregamos al documento. De la siguiente manera:

ESTADO : <select name="cbx_estado" id="cbx_estado" required>

<?php while($row = $resultado->fetch_assoc()) { ?>

 <option value="<?php echo $row['id_estado']; ?>"><?php echo
$row['estado']; ?></option>
<?php } ?>
</select>

<br >
</BR>
CIUDAD <select name="cbx_municipio" id="cbx_municipio" required>

</select>

Selecciona Localidad : <select name="cbx_localidad"

id="cbx_localidad" required >

</select>

Por último, se le agregan más estilos al formulario, esto para darle más presentación. El archivo
.css contiene lo siguiente:

html{

background: url(imagen.png) no-repeat fixed center;

-webkit-background-size:cover;

-moz-background-size:cover;

-o-background-size:cover;

background-size:cover;

#div{

color: black; /* Color de letras*/

letter-spacing: 0px; /* Espacio entre cada letra */

font-family: "Chiller"; /* Tipo de Letra */

font-size: 10px; /* Tamaño de Letra */

line-height: 1.5; /* Interlineado */

font-weight: bold; /* Negrita */

font-style: italic; /* Kursiva */

}
El formulario tendría una apariencia parecida a la siguiente:

Figura 4. Vista del formulario en el navegador (FireFox).

Al llenar todos los datos requeridos y dar clic en enviar, nos muestra un progress-bar que nos
indica que se están cargando los datos (veas la figura 5).

Figura 5. Progress-bar en ejecucion.

Al terminar la carga de datos nos avisa con un mensaje como se ve en la figrua 6.

Figura 6. Mensaje informativo.

 CONCLUSIONES.

Con este proyecto aprendimos a hacer uso de las diferentes herramientas para construir mas
adecuadamente una pagina web ya que con dicha pagina se trabajó con una base de datos y
esta pagina recupera información de la base de datos, también se trabajo con la extensión
PHP. Cabe mencionar que la pagina web se trabajo con un diseño CSS mismo que se le aplico
al formulario.
La pagina web se trabajo con [checkbox, tablas, connect (conexión con la base de datos
MySQL).
en si este trabajo fue algo nuevo que trabajamos y dejó mucha experiencia para próximos
proyectos.