Formato Plande Aula

SERVICIO NACIONAL DE APRENDIZAJE SENA Versión: 02
SISTEMA INTEGRADO DE GESTIÓN

Procedimiento Ejecución de la Formación Profesional Integral Código: GFPI-F-019
PARTE 9 (Construccion de formulario CRUD (S))
Primer paso
Importar la base de datos en mysql, para ello ingrese a localhost/phpmyadmin
Para este ejercicio debemos tener encuenta su analisis y el diagrama conceptual construido en la
sesiones de formacion (“El pastel”).
Para iniciar debemos tener en cuenta la capeta que le proporciona su instructor (carpeta de apoyo)
que se encuentra en la plataforma blackboard en el material de apoyo del RAP 8, en ella encontrara
las librerías de bootstrap, las imágenes, estilo.css y las JavaScript, para este ejercicio la base de
datos llamada “taxis.sql”
Iniciemos con la arquitectura MVC aplicado en este ejercicio, cree una carpeta llamada “taxi” Dentro
de la carpeta “htdocs” del Xampp y dentro de esta descomprima los archivos del material entregado
por su instructor esta es la imagen de lo que hemos creado.
Luego ingresamos a Construir la base de datos en mysql, para ello ingrese a localhost/phpmyadmin,
luego importe la base de datos “taxis.sql” y verifique que quede de la siguiente manera
Explicacion: La base de datos se llamara “TAXIS” y la tabla “REGISTRO” y 7 campos como se muestra
en la siguiente imagen
Nota: tenga en cuenta que el campo “Id_registro” sera la clave primaria de la tabla y tambien esta
activado el “A I” auto incremento.
Ahora nos dirigimos a la carpeta “HTDOC” y ya dentro de la carpeta “TAXI” cree otra capeta llamada
“PHP” dejando la siguiente estructura como lo indica la imagen:
Dentro de esta ósea “PHP” construya el archivo “conexión.php” dejando la siguiente estructura
como lo indica la imagen de sublime:
AHORA CONTRUIREMOS EL BACKEND (controlador)
Nota1: Dentro de la carpeta “PHP” se crearan los archivos del “controlador”
Nota2: Dentro de la carpeta “TAXI” se crearan los archivos del usuario osea la “vista”
Segundo paso construir la conexión.php en sublime
Teniendo en cuenta las respuestas a estas interrogantes vamos a ingresar a SUBLIME TEXT y
construiremos el archivo llamado “conexión.php”, copie y pegue el siguiente codigo:
Codigo para copiar Codigo en la vista de sublime
<?php
$host="localhost";
$user="root";
$password="";
$db="taxis";
$con = new
mysqli($host,$user,$password,$db);
?>
Este sera el aspecto de la “conexion.php”
Momento de inventigacion y analisis
Pregunta RESPUESTA
Cual es la funcion principal de este archivo

“conexión.php” ?Justifique su respuesta
Cuales son los atributos principales para

construir la conexión a la base de datos ?
Cual es el motor de la base de datos que

estamos usando?
Pregunta Explique brevemente cada linea de codigo
$host="localhost";
$db="taxis";
$password="";
$db="taxis";
Para que se usa la palabra reservada new?
Tercer pasó creación de los archivos de la vista
Iniciemos con la arquitectura MVC aplicado en este ejercicio, Luego cree un archivo llamado
“index.php” con el siguiente código:
<?php
session_start();
?>
<html>
<head>
<title>.: TAXIS - LA MANCHA AMARILLA :.</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="estilo.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Caveat+Brush"
rel="stylesheet">
</head>
<body>
<?php include "php/navbar.php"; ?>
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="intro">SISTEMA DE INFORMACION<BR>TAXIS LA MANCHA

AMARILLA</p>
</div>
</div>
</div>
</body>
</html>
En sublime queda con el siguiente aspecto.
Ejecutamos en el navegador y este es el resultado
Seguimos en el lado de la vista ahora construiremos el menú de navegación para esta pagina
Siga los siguientes pasos:
1 ingrese a sublime y cree un archivo llamado “navbar.php” dentro de la carpeta “PHP”

2 copie el siguiente código dentro del archivo “navbar.php” y guarde los cambios.
<nav class="navbar navbar-default menu" role="navigation">

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-

collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./"><img src="./img/logo.png" width="100" height="30"></a>
</div>

<div class="collapse navbar-collapse navbar-ex1-collapse menu">
<ul class="nav navbar-nav sombra">
<li><a href="./agregar.php"><img src="./img/crear.png" width="25" height="25">CREAR TAXI

(C)</a></li>
<li><a href="./ver.php"><img src="./img/listar.png" width="25" height="25">LISTAR TAXI

(R)</a></li>
<li><a href="./editar.php"><img src="./img/editar.png" width="25" height="25">ACTUALIZAR

TAXI (U)</a></li>
<li><a href="./eliminar.php"><img src="./img/eliminar.png" width="25" height="25">ELIMINAR

TAXI(D)</a></li>
<li><a href="./buscar.php"><img src="./img/buscar.png" width="25" height="25">BUSCAR

TAXI(S)</a></li>
</ul>

</div>
</div>
</nav>
4 Este es el aspecto del Nuevo “index.php” y guarde los cambios.
5 ejecútelo en el navegador debe de tener el siguiente aspecto:

Nota: este menú todavía no tiene los vínculos a las opciones del CRUD.
Continuamos en la construcción de la vista
Construcción del menú crear taxi (C) (este será el formulario del lado del humano, el que captura
la información) siga los siguientes pasos:
1 ingrese a sublime y cree un archivo llamado “agregar.php” dentro de la carpeta “taxi” y copie el
siguiente código
<html>
<head>
<title>.: TAXI - LA MANCHA AMARILLA :.</title>
<link href="https://fonts.googleapis.com/css?family=Caveat+Brush" rel="stylesheet">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12 crudY">
<center><h2>CREAR TAXI</h2></center>



<form role="form" method="post" action="php/agregar.php">
<label for="placa">PLACA</label>
<input type="text" class="form-control" name="placa" required>
</div>
<label for="propietario">PROPIETARIO</label>
<input type="text" class="form-control" name="propietario" required>
</div>
<label for="conductor">CONDUCTOR</label>
<input type="text" class="form-control" name="conductor" required>
</div>
<label for="SOAT">SOAT</label>
<select class="form-control" name="SOAT" required>
<option value="">-- SELECCIONE --</option>
<option value="VIGENTE">VIGENTE</option>
<option value="VENCIDO">VENCIDO</option>
</select>

</div>
<label for="TECNOMECANICA">TECNOMECANICA</label>
<select class="form-control" name="TECNOMECANICA" required>
</select>

</div>
<label for="ESTADO">ESTADO</label>
<select class="form-control" name="ESTADO" required>
<option value="ACTIVO">ACTIVO</option>
<option value="SUSPENDIDO">SUSPENDIDO</option>
<option value="SANCIONADO">SANCIONADO</option>
</select>

</div>
<br><br>
<div align="center">
<button type="submit" class="btn btn-default">Agregar</button>
<button onclick="location.href='index.php'" class="btn btn-default">Cancelar</button>
</div>
</form>
<br><br>
</div>



</div>
</div>
</div>
<br><br>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
2 Este será el aspecto en sublime

3 ejecute en el navegador y este será el resultado
Ahora construiremos el controlador de este formulario en la carpeta “php” siga los siguientes pasos:
1 Ingresemos a sublime y crearemos el archivo llamado “agregar.php” este archivo es el controlador

distinto al que creamos en la vista.
2 copie el siguiente código
<?php
if(!empty($_POST)){
if(isset($_POST["placa"]) &&isset($_POST["propietario"])
&&isset($_POST["conductor"]) &&isset($_POST["SOAT"])
&&isset($_POST["TECNOMECANICA"])&&isset($_POST["ESTADO"]))
if($_POST["SOAT"]!=""&&
$_POST["TECNOMECANICA"]!=""&&$_POST["ESTADO"]!=""){
include "conexion.php";
$sql = "insert into

registro(placa,propietario,conductor,SOAT,TECNOMECANICA,ESTADO) value
(\"$_POST[placa]\",\"$_POST[propietario]\",\"$_POST[conductor]\",\"$_POST[SOAT]\",\"$_PO
ST[TECNOMECANICA]\",\"$_POST[ESTADO]\")";
$query = $con->query($sql);
if($query!=null){
print "<script>alert(\"Agregado
exitosamente.\");window.location='../ver.php';</script>";
}else{
print "<script>alert(\"No se pudo

agregar.\");window.location='../index.php';</script>";
?>
3 este será el aspecto que tendrá en sublime
4 ejecute el código en el navegador e ingrese datos en el formulario construido y observe el mensaje

que nos envía
Observe la tabla de su base de datos y verifique si los datos fueron almacenados como muestra la
siguiente imagen:
Nota: con este ejercicio comprobamos y aplicamos el concepto trabajado en sesiones anteriores (su
pastel)
Momento de investigar
Complete e investigue el siguiente cuadro
Pregunta Respuesta
Para qué sirve la función !empty en PHP
Para qué sirve la función isset en PHP
Para qué sirve la variable $_POST en PHP
Para qué sirve la variable $sql
Explique para que sirve este código
Explique para que sirve este código
window.location
Nota: salimos de lado del controlador
Ahora Construiremos en la vista el archivo “ver.php”, este nos mostrara los datos registrados o
agregados en el formulario, entonces vamos a construir listar del taxi (R):
1 ingresemos a sublime y copia el siguiente código
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-md-12 crudX">
<h2>VER ENTRADAS</h2>
<?php include "php/tabla.php"; ?>
</div>
</div>
</div>
</body>
</html>
2 este es el aspecto que tendrá en sublime
3 ahora ejecutemos en el navegador y este será el resultado

Pero que pasa por que no muestra el contenido que hay en la base de datos si ya registramos datos
en él? Como lo solucionamos? Para ello volveremos al controlador de la carpeta “PHP”.

Para solucionar las incógnitas que nos embargan, debemos de crear un archivo que nos controlen
los datos en una tabla, con esto organizamos y nos mostraran los registros que ingresamos entonces
sigamos los pasos a continuación:
1 ingrese a sublime y dentro de la carpeta “php”, creamos un archivo que se llamara “tabla.php”.
<?php
$user_id=null;
$sql1= "select * from registro";
$query = $con->query($sql1);
$san=0;
$susp=0;
?>
<?php if($query->num_rows>0):?>
<table class="table table-bordered table-hover crudX">
<thead>
<th>COD</th>
<th>PLACA</th>
<th>PROPIETARIO</th>
<th>CONDUCTOR</th>
<th>SOAT</th>
<th>TECNOMECANICA</th>
<th>ESTADO</th>
</thead>
<?php while ($r=$query->fetch_array()):?>
<tr>
<td><?php echo $r["Id_registro"]; ?></td>
<td><?php echo $r["Placa"]; ?></td>
<td><?php echo $r["Propietario"]; ?></td>
<td><?php echo $r["Conductor"]; ?></td>
<td><?php echo $r["SOAT"]; ?></td>
<td><?php echo $r["TECNOMECANICA"]; ?></td>
<?php if($r["ESTADO"]=="SUSPENDIDO"):?>
<?php $susp++; ?>
<td class="suspendido"><?php echo $r["ESTADO"]; ?></td>
<?php else: ?>
<?php if($r["ESTADO"]=="SANCIONADO"):?>
<?php $san++; ?>

<td class="sancionado"><?php echo $r["ESTADO"]; ?></td>
<?php else:?>
<td class="activo"><?php echo $r["ESTADO"]; ?></td>
<?php endif;?>
<?php endif;?>
</tr>
<?php endwhile;?>
</table>
<?php if($susp>0):?>
<p class="alert alert-warning suspendido">Alerta: Hay <?php echo $susp ?> taxis en estado
SUSPENDIDO</p><br>
<?php endif;?>
<?php if($san>0):?>
<p class="alert alert-warning sancionado">Alerta: Hay <?php echo $san ?> taxis en estado
SANCIONADO</p><br>
<?php endif;?>
<?php if($san==0 && $susp==0):?>
<p class="alert alert-warning activo">FELICIDADES: Todos los taxis en estado ACTIVO</p><br>
<?php endif;?>
<?php else:?>
<p class="alert alert-warning">No hay resultados</p>
<?php endif;?>
Explicación: Esta tabla estará recibiendo y mostrando los datos de la tabla de la base de datos que
usted construyo.
2 este será el aspecto que tendrá en sublime

4 este sera el aspecto del archivo “ver.php” con el codigo modificado

5 Ahora ejecutamos en el navegador y este sera el resultado
Ejercicio de verificacion de las opciones AGREGAR Y VER
Ingrese 5 taxis con sus respectivos datos: la placa, el propietario, el conductor, el soat,
tecnicomecanica y su estado.
Explique brevemente como esta compuesto el codigo de la tabla para consultar la base de datos
Pregunta Respuesta
<?php
$user_id=null;
$san=0;
$susp=0;
?>

<tr>
<td><?php echo $r["Id_registro"];

?></td>
<td><?php echo $r["Placa"];

?></td><td><?php echo $r["Propietario"];
?></td>
<td><?php echo $r["Conductor"];

?></td>
<td><?php echo
$r["TECNOMECANICA"]; ?></td>
<?php $susp++; ?>
<td class="suspendido"><?php echo

$r["ESTADO"]; ?></td>
<?php $san++; ?>
<td class="sancionado"><?php echo

<?php else:?>
<td class="activo"><?php echo

<?php endif;?>
<?php endif;?>
</tr>
Nota: Salimos del controlador
Ahora vamos a contruir el actualizar taxi (u) este se construira en la vista para capturar los datos de
la persona humana que utiliza la aplicación
1 ingrese a sublime y cree un archivo llamado “editar.php” dentro de la carpeta “taxi” y copie el
siguiente código:
<html>
<head>
<title>..: TAXI - LA MANCHA AMARILLA :.</title>
</head>
<body>
<div class="row">
<h2>EDITAR ENTRADAS</h2>
<?php include "php/tablaU.php"; ?>
</div>
</div>
</div>
</body>
</html>
2 Este será el aspecto en sublime

3 Ejecutamos y este es el resultado en el navegador
Nota: salimos de la vista
Ahora necesitamos consultar la base de datos, como lo hicimos en listar taxi, aplicaremos el mismo
metodo de crear una tabla para que nos muestre todos los registros que existen en la base de datos
y se puedan editar, sigamos los siguientes pasos
1 Ingresemos a sublime y crearemos un archivo que se llame “tablaU.php” dentro de la carpeta

”PHP” con el siguiente codigo:
<?php
$user_id=null;
?>
<table class="table table-bordered table-hover">
<thead>
<th>COD</th>
<th>PLACA</th>
<th>CONDUCTOR</th>
<th>SOAT</th>
<th></th>
</thead>
<tr>
<td style="width:150px;">
<a href="./editar_no.php?Id_registro=<?php echo $r["Id_registro"];?>" class="btn

btn-sm btn-warning">Editar</a>
<script>
$("#del-"+<?php echo $r["Id_registro"];?>).click(function(e){
e.preventDefault();
p = confirm("Estas seguro?");
if(p){
window.location="./php/eliminar.php?Id_registro="+<?php echo
$r["Id_registro"];?>;
});
</script>
</td>
</tr>
<?php endwhile;?>
</table>
<?php else:?>
<?php endif;?>
3 Este es aspecto de sublime con el codigo

Nota: salimos del controlador
Ahora nuevamente volvemos a la capa VISTA para mostar los resultados al usuario de la aplicación
Entonces, ingresemos sublime y crearemos un archivo llamado “editar_no.php” con el siguiente

codigo:
<html>
<head>
</head>
<body>
<div class="centrar">
<div class="row">
<div class="col-md-12 crudY">
<h2>EDITAR</h2>
<?php include "php/formulario.php";?>
</div>
</div>
</div>
</div>
</body>
</html>
2 en sublime su apariencia sera la siguiente
En la línea 17 del código debemos analizar que está llamando un formulario que está dentro de la
carpeta “PHP”, entonces en este punto debemos de cambiar nuevamente de capa y volver al
controlador y crear ese formulario que nos permitirá editar los datos que ya fueron almacenados
en la base de datos, sigamos los siguientes pasos para terminar este proceso de actualizar taxi (u)
Ingresamos nuevamente a la carpeta “PHP” y creamos un archivo “formulario.php” para ello siga
los siguientes pasos:
1 ingresemos a sublime y creamos un archivo “formulario.php”, dentro de la capeta “PHP” y copie

el siguiente código
<?php
$user_id=null;
$sql1= "select * from registro where Id_registro=".$_GET["Id_registro"];
$registro = null;
if($query->num_rows>0){
while ($r=$query->fetch_object()){
$registro=$r;
break;
?>
<?php if($registro!=null):?>
<form role="form" method="post" action="php/actualizar.php">
<label for="name">PLACA</label>
<input type="text" class="form-control" value="<?php echo $registro->Placa; ?>" name="Placa"

disabled>
</div>
<label for="lastname">Propietario</label>
<input type="text" class="form-control" value="<?php echo $registro->Propietario; ?>"

name="Propietario" required>
</div>
<label for="address">Conductor</label>
<input type="text" class="form-control" value="<?php echo $registro->Conductor; ?>"

name="Conductor" required>
</div>
<label for="lastname">SOAT ANTERIOR</label>
<input type="text" class="form-control" value="<?php echo $registro->SOAT; ?>" name="SOAT1"

disabled>
</div>
<label for="SOAT">SOAT NUEVO</label>
<select class="form-control" name="SOAT" required>
<option value="">--Seleccione un estado--</option>
</select>

</div>
<label for="lastname">TECNOMECANICA ANTERIOR</label>
<input type="text" class="form-control" value="<?php echo $registro->TECNOMECANICA; ?>"

name="TECNOMECANICA1" disabled>
</div>
<label for="TECNOMECANICA">TECNOMECANICA NUEVA</label>

<select class="form-control" name="TECNOMECANICA" required>
</select>

</div>
<label for="lastname">ESTADO ANTERIOR</label>
<input type="text" class="form-control" value="<?php echo $registro->ESTADO; ?>"

name="ESTADO1" disabled>
</div>
<label for="ESTADO">ESTADO</label>
<select class="form-control" name="ESTADO" required>
</select>

</div>
<br><br>
<input type="hidden" name="Id_registro" value="<?php echo $registro->Id_registro; ?>">

<button type="submit" class="btn btn-default">Actualizar</button>
</form>
<?php else:?>
<p class="alert alert-danger">404 No se encuentra</p>
<?php endif;?>
2 este será la apariencia del código en sublime

3 Si ejecutamos en el navegador este sería el resultado

Nota: seguimos en el controlador
Ahora vamos a crear un archivo controlador llamado “actualizar.php” para el botón de actualizar
para ello debemos seguir los pasos a continuación:
1 ingresamos a sublime y dentro de la carpeta “PHP” crearemos un archivo llamado
“actualizar.php” y copiaremos el siguiente código:
<?php
if(!empty($_POST)){
if(isset($_POST["Propietario"]) &&isset($_POST["Conductor"]) &&isset($_POST["SOAT"])

&&isset($_POST["TECNOMECANICA"]) &&isset($_POST["ESTADO"])){
if($_POST["Propietario"]!="" &&$_POST["Conductor"]!=""){
$sql = "update registro set

Propietario=\"$_POST[Propietario]\",Conductor=\"$_POST[Conductor]\",
SOAT=\"$_POST[SOAT]\",TECNOMECANICA=\"$_POST[TECNOMECANICA]\",ESTADO=\"$_POST[ES
TADO]\" where Id_registro=".$_POST["Id_registro"];
if($query!=null){
print "<script>alert(\"Actualizado
}else{

actualizar.\");window.location='../ver.php';</script>";
}?>
2 Esta es la apariencia en sublime
3 si ejecutamos en el navegador este sería el resultado, pero debes de modificar un campo del
formulario y hacer clic en el botón “actualizar”
Ahora vamos a crear un archivo en sublime para eliminar datos “eliminar.php” dentro de la carpeta
“taxi” para construir este archivo seguiremos los pasos a continuación:
1 ingresamos a sublime y dentro de la carpeta “taxi” crearemos un archivo llamado “eliminar.php”

y copiaremos el siguiente código:
<html>
<head>
</head>
<body>
<div class="row">
<center><h2>ELIMINAR TAXIS</h2></center>
<?php include "php/tablaD.php"; ?>
<br>
<center>
<button onclick="location.href='index.php'" class="btn btn-default">Cancelar</button></center>
<br><br>
</div>
</div>
</div>
</body>
</html>
2 esta será la apariencia en sublime
3 si ejecutamos en el navegador este será el resultado

Para resolver los errores construiremos un archivo en sublime llamada “tablaD.php” la cual nos
ayudara a ver los registros almacenados en la base de datos en una tabla, claro está que este archivo
estará en la capa de controlador.
Ingresemos a sublime y creemos un archivo llamado “tablaD.php” y copie el siguiente código
<?php
$user_id=null;
?>
<table class="table table-bordered table-hover crudX">
<thead>
<th>Cod</th>
<th>Placa</th>
<th>Propietario</th>
<th>Conductor</th>
<th>SOAT</th>
<th>ESTADO</th>
<th></th>
</thead>
<tr>
<tr>
<td><?php echo $r["ESTADO"]; ?></td>
<a href="#" id="del-<?php echo $r["Id_registro"];?>" class="btn btn-sm btn-

danger">Eliminar</a>
<script>
e.preventDefault();
p = confirm("Estas seguro de eliminar este taxi? Esta operación no se puede

retroceder");
if(p){
});
</script>
</td>
</tr>
<?php endwhile;?>
</table>
<?php else:?>
<?php endif;?>
2 este es la apariencia que tendrá en sublime

3 Debemos de construir otro archivo que elimine para que cuando el usuario oprima el botón de
eliminar, realice la eliminación del registro de la base de datos, continuaremos en la capa
controlador, para ello necesitamos seguir los siguientes pasos:
4 ingrese a sublime y dentro de la carpeta “PHP” crearemos un archivo llamado “eliminar.php”

copie el siguiente código:
<?php
if(!empty($_GET)){
$sql = "DELETE FROM registro WHERE Id_registro=".$_GET["Id_registro"];
if($query!=null){
print "<script>alert(\"Eliminado
}else{

eliminar.\");window.location='../ver.php';</script>";
?>
5 en sublime tendrá la siguiente apariencia
Ahora vamos a crear un archivo en sublime para buscar datos “buscar.php” dentro de la carpeta
“taxi” para construir este archivo seguiremos los pasos a continuación:
1 ingresamos a sublime y dentro de la carpeta “taxi” crearemos un archivo llamado “buscar.php” y

copiaremos el siguiente código:
<html>
<head>
</head>
<body>
<div class="container crudY">
<div class="row">
<div class="col-md-12">
<center><h2>BUSCAR TAXI</h2></center>
<p class="intro_buscar">Selecciona el tipo de busqueda: Placa - Propietario - Conductor -

Estado</p>
<div class="cajas_buscar">
<form class="navbar-form navbar-center" role="search" action="./buscar_placa.php">
<input type="text" name="Placa" class="form-control" placeholder="Buscar Placa" required>
</div>

</form>
<form class="navbar-form navbar-center" role="search" action="./buscar_prop.php">
<input type="text" name="Propietario" class="form-control" placeholder="Buscar Propietario"

required>
</div>

</form>
<form class="navbar-form navbar-center" role="search" action="./buscar_cond.php">
<input type="text" name="Conductor" class="form-control" placeholder="Buscar Conductor"

required>
</div>

</form>
<form class="navbar-form navbar-center" role="search" action="./buscar_estado.php">
<select name="Estado" class="form-control" placeholder="Buscar Estado">
<option value="">--SELECCIONE UNA OPCION--</option>
</select>
</div>

</form>
</div>
</div>
</div>
</div>
</body>
</html>
2 esta es la apariencia que tendrá en sublime

4 ahora entramos a construir los controladores por búsqueda por placa y por conductor, entonces
empecemos por el controlador que buscara por placa
5 ingresamos a sublime y crearemos un archivo llamado “busqueda_placa.php” en la carpeta “php”

y copiamos este código:
<?php
$user_id=null;
$sql1= "select * from registro where placa like '%$_GET[Placa]%'";
?>
<thead>
<th>COD</th>
<th>PLACA</th>
<th>CONDUCTOR</th>
<th>SOAT</th>
<th>ESTADO</th>
<th></th>
</thead>
<tr>
<?php $susp++; ?>

<?php else: ?>
<?php $san++; ?>
<?php else:?>
<?php endif;?>
<?php endif;?>
<a href="./editar.php?Id_registro=<?php echo $r["Id_registro"];?>" class="btn btn-

sm btn-warning">Editar</a>
<a href="./eliminar.php?Id_registro=<?php echo $r["Id_registro"];?>" class="btn

btn-sm btn-danger">Eliminar</a>
<script>
e.preventDefault();
if(p){
});
</script>
</td>
</tr>
<?php endwhile;?>
</table>
<?php else:?>
<?php endif;?>
6 esta será su apariencia en sublime

7 ahora necesitamos crear una página de respuesta de la búsqueda por placa ósea que nos muestre
los datos dentro dela carpeta “taxi” y además vamos a habilitar los dos botones de ”editar” y
“eliminar”, para que la persona humana que maneja el sistema de información tenga opciones, para
ello sigamos los siguientes pasos:
8 ingresemos a sublime y crearemos un archivo llamado “buscar_placa.php” pero dentro de la

carpeta “taxi” copiemos el siguiente código:
<html>
<head>
<link rel="stylesheet" type="text/css"

href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<h2>BUSCAR PLACA DE TAXI</h2>
<?php include "php/busqueda_placa.php"; ?>
</div>
</div>
</div>
</body>
</html>
9 este será su apariencia en sublime
Ingresamos una placa guardada

Observe que busco la placa guardada y además añadió los botones de “editar” y “eliminar”
trabajados anteriormente en los ejercicios
11 ahora vamos a crear búsqueda por propietario dentro de la carpeta “PHP”, ingresemos a sublime
y crearemos un archivo llamado “busqueda_prop.php”, que nos controlara la búsqueda por
propietario del vehículo y copiaremos el siguiente código:
<?php
$user_id=null;
$sql1= "select * from registro where Propietario like '%$_GET[Propietario]%'";
?>
<thead>
<th>COD</th>
<th>PLACA</th>
<th>CONDUCTOR</th>
<th>SOAT</th>
<th>ESTADO</th>
<th></th>
</thead>
<tr>
<?php $susp++; ?>
<?php else: ?>
<?php $san++; ?>
<?php else:?>
<?php endif;?>
<?php endif;?>


<script>
e.preventDefault();
if(p){
});
</script>
</td>
</tr>
<?php endwhile;?>
</table>
<?php else:?>
<?php endif;?>
12 este es la apariencia en sublime

13 ahora vamos a crear la pantalla de respuesta de la buscar por propietario, ingresemos a sublime
y crearemos un archivo llamado “buscar_prop.php” dentro de la carpeta “taxi” y copiaremos el
siguiente código:
<html>
<head>
</head>
<body>
<div class="row">

<h2>BUSCAR PROPIETARIO DE TAXI</h2>
<?php include "php/busqueda_prop.php"; ?>
</div>
</div>
</div>
</body>
</html>
13 este será el aspecto en sublime
14 este será el resultado en el navegador

Luego en buscar
15 ahora vamos a crear búsqueda por conductor dentro de la carpeta “PHP”, ingresemos a sublime
y crearemos un archivo llamado “busqueda_cond.php”, que nos controlara la búsqueda por
conductor del vehículo y copiaremos el siguiente código:
<?php
$user_id=null;
$sql1= "select * from registro where Conductor like '%$_GET[Conductor]%'";
?>
<thead>
<th>COD</th>
<th>PLACA</th>
<th>CONDUCTOR</th>
<th>SOAT</th>
<th>ESTADO</th>
<th></th>
</thead>
<tr>
<?php $susp++; ?>
<?php else: ?>
<?php $san++; ?>
<?php else:?>
<?php endif;?>
<?php endif;?>


<script>
e.preventDefault();
if(p){
});
</script>
</td>
</tr>
<?php endwhile;?>
</table>
<?php else:?>
<?php endif;?>
16 este será la apariencia en sublime

17 ahora vamos a crear la pantalla de respuesta de la buscar por conductor, ingresemos a sublime
y crearemos un archivo llamado “buscar_cond.php” en la carpeta “taxi” y copiaremos el siguiente
código:
<html>
<head>
<link rel="stylesheet" type="text/css"

href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<h2>BUSCAR PROPIETARIO DE TAXI</h2>
<?php include "php/busqueda_cond.php"; ?>
</div>
</div>
</div>
</body>
</html>
18 este será el resultado en sublime

Luego buscar
20 ahora vamos a crear búsqueda por estado dentro de la carpeta “PHP”, ingresemos a sublime y
Crearemos un archivo llamado “busqueda_estado.php”, que nos controlara la búsqueda por estado
del vehículo y copiaremos el siguiente código:
<?php
$user_id=null;
$sql1= "select * from registro where ESTADO like '%$_GET[Estado]%'";
?>
<thead>
<th>COD</th>
<th>PLACA</th>
<th>CONDUCTOR</th>
<th>SOAT</th>
<th>ESTADO</th>
<th></th>
</thead>
<tr>
<?php else: ?>
<?php else:?>

<?php endif;?>
<?php endif;?>


<script>
e.preventDefault();
if(p){
});
</script>
</td>
</tr>
<?php endwhile;?>
</table>
<?php else:?>
<?php endif;?>
22 ahora vamos a crear la pantalla de respuesta de la buscar por conductor, ingresemos a sublime
y crearemos un archivo llamado “buscar_estado.php” en la carpeta “taxi” y copiaremos el siguiente
código:
<html>
<head>
</head>
<body>
<div class="row">
<h2>BUSCAR ESTADO DE TAXI</h2>
<?php include "php/busqueda_estado.php"; ?>
</div>
</div>
</div>
</body>
</html>

24 ejecutamos en el navegador y este es el resultado
Seleccionamos una opción y hacemos clic en búsqueda
Teniendo en cuenta que hay registros con la clasificación ACTIVO, pero cuando no hay registros de
búsqueda saldrá el siguiente mensaje
Fin del ejercicio de la Matriz CRUD BASICO

Formato Plande Aula

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Formato Plande Aula

Caricato da

Copyright:

Formati disponibili

SERVICIO NACIONAL DE APRENDIZAJE SENA Versión: 02

SISTEMA INTEGRADO DE GESTIÓN

PARTE 9 (Construccion de formulario CRUD (S))

Importar la base de datos en mysql, para ello ingrese a localhost/phpmyadmin

AHORA CONTRUIREMOS EL BACKEND (controlador)

Nota1: Dentro de la carpeta “PHP” se crearan los archivos del “controlador”

Segundo paso construir la conexión.php en sublime

Codigo para copiar Codigo en la vista de sublime

Este sera el aspecto de la “conexion.php”

Momento de inventigacion y analisis

Cual es la funcion principal de este archivo

Cuales son los atributos principales para

Cual es el motor de la base de datos que

Pregunta Explique brevemente cada linea de codigo

Para que se usa la palabra reservada new?

Tercer pasó creación de los archivos de la vista

<title>.: TAXIS - LA MANCHA AMARILLA :.</title>

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="estilo.css">

<?php include "php/navbar.php"; ?>

<p class="intro">SISTEMA DE INFORMACION<BR>TAXIS LA MANCHA

En sublime queda con el siguiente aspecto.

Ejecutamos en el navegador y este es el resultado

Siga los siguientes pasos:

1 ingrese a sublime y cree un archivo llamado “navbar.php” dentro de la carpeta “PHP”

<nav class="navbar navbar-default menu" role="navigation">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-

<span class="sr-only">Toggle navigation</span>

<a class="navbar-brand" href="./"><img src="./img/logo.png" width="100" height="30"></a>

<div class="collapse navbar-collapse navbar-ex1-collapse menu">

<ul class="nav navbar-nav sombra">

<li><a href="./agregar.php"><img src="./img/crear.png" width="25" height="25">CREAR TAXI

<li><a href="./ver.php"><img src="./img/listar.png" width="25" height="25">LISTAR TAXI

<li><a href="./editar.php"><img src="./img/editar.png" width="25" height="25">ACTUALIZAR

<li><a href="./eliminar.php"><img src="./img/eliminar.png" width="25" height="25">ELIMINAR

<li><a href="./buscar.php"><img src="./img/buscar.png" width="25" height="25">BUSCAR

<!--<form class="navbar-form navbar-left" role="search" action="./buscar.php">

<input type="text" name="s" class="form-control" placeholder="Buscar">

<button type="submit" class="btn btn-default">&nbsp;<i class="glyphicon glyphicon-

</div>

4 Este es el aspecto del Nuevo “index.php” y guarde los cambios.

5 ejecútelo en el navegador debe de tener el siguiente aspecto:

Continuamos en la construcción de la vista

<title>.: TAXI - LA MANCHA AMARILLA :.</title>

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="estilo.css">

<link href="https://fonts.googleapis.com/css?family=Caveat+Brush" rel="stylesheet">

<?php include "php/navbar.php"; ?>

<div class="col-md-12 crudY">

<!-- <a data-toggle="modal" href="#myModal" class="btn btn-default">Agregar</a>

<!-- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-

<div class="modal-header ">

<button type="button" class="close boton1" data-dismiss="modal" aria-

<form role="form" method="post" action="php/agregar.php">

<input type="text" class="form-control" name="placa" required>

<input type="text" class="form-control" name="propietario" required>

<input type="text" class="form-control" name="conductor" required>

<select class="form-control" name="SOAT" required>

<option value="">-- SELECCIONE --</option>

<select class="form-control" name="TECNOMECANICA" required>

<option value="">-- SELECCIONE --</option>

<button type="submit" class="btn btn-default"> <i class="glyphicon glyphicon-