PROGRAMACION WEB
Por:
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.
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.
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:
-- -----------------------------------------------------
-- 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:
<?php
require ('conexion.php');
<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>
<?php
require ('../conexion.php');
$id_estado = $_POST['id_estado'];
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'];
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
}
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:
<br >
</BR>
CIUDAD <select name="cbx_municipio" id="cbx_municipio" required>
</select>
</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{
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
#div{
}
El formulario tendría una apariencia parecida a la siguiente:
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.