Programando Clon MVC y WebApi en PHP (Parte 3)


En el apartado anterior se ha escrito sobre como crear un clon  webApi en php. En este veremos como realizar las vistas y las conexiones con nuestro JavaScript. Si no has leído el apartado anterior te recomiendo que lo hagas desde  aquí.

Para este ejercicio comenzaremos creando una carpeta en la ruta StudentWeb/Views/ con nombre Student dentro de la cual crearemos un archivo php llamado Student.php dentro del cual crearemos nuestra vista:

Como referencia, recordemos que en el primer apartado creamos el archivo _Layout.php el cual se encuentra dentro de la ruta StudentWeb/Views/Shared/ el cual contiene un switch que hace la llamada al archivo Student.php, bueno entonces agreguemos una manera de accesarlo, buscando la sección


...
<li class="active">
<a href="index.html"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
</li>
<li>
<a href="charts.html"><i class="fa fa-fw fa-bar-chart-o"></i> Charts</a>
</li>
...

Será cambiado por:


...
<li class="active">
<a href="index.php"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
</li>
<li>
<a href="index.php?Source=AddStudents"><i class="fa fa-fw fa-bar-chart-o"></i> Add Students</a>
</li>
<li>
<a href="index.php?Source=Students"><i class="fa fa-fw fa-table"></i> List Students</a>
</li>
...

Como podemos ver hacemos un llamado a un Source con AddStudents el cual no tenemos definido dentro de nuestro _Layout.php así que buscaremos de nueva cuenta nuestro switch y agregaremos el caso del source  AddStudents como se muestra en el siguiente código:


<?php
switch ($_GET["Source"]) {
case "Students":
include('Views/Student/Student.php');
break;
case "AddStudents":
include('Views/Student/AddStudent.php');
break;
default:
include('Views/Home/Dashboard.php');
break;
}
?>

Acto seguido crearemos un archivo llamado AddStudent.php en la ruta /Views/Student/ en el cual nos concentraremos por el momento,  lo siguiente que haremos será crear los componentes html dentro de nuestra vista para esto se utilizará html simple que viene dentro de nuestro template de bootstrap, una vez en nuestra carpeta de bootstrap daremos click sobre el forms.html que trae el contenido que nos interesa, muy similar al siguiente:

Lo que nos interesa realmente son las clases con las que construyeron estos elementos así que abriremos este mismo archivo en notepad y analizaremos los valores principales en este caso solo necesitamos los controles textbox y select, y la configuración del encabezado.

Encabezado:


<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Forms
</h1>
<ol class="breadcrumb">
<li>
<i class="fa fa-dashboard"></i> <a href="index.html">Dashboard</a>
</li>
<li class="active">
<i class="fa fa-edit"></i> Forms
</li>
</ol>
</div>
</div>

TextBox y Select


<div class="row">
<div class="col-lg-6">
<form role="form">
<div class="form-group">
<label>Text Input with Placeholder</label>
<input class="form-control" placeholder="Enter text">
</div>
<div class="form-group">
<label>Selects</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>

Vamos a agregar este código a nuestro AddStudent.php para poder visualizarlo:

Ahora lo modificaremos un poco para que quede de acorde a lo que necesitamos, que en este caso debería ser similar a nuestro arreglo de Student que hemos utilizado en nuestro clon de webApi y lo formateraremos un poco para que quede del siguiente modo:

<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
 Agregar Estudiantes
 </h1>
<ol class="breadcrumb">
 <li>
 <i class="fa fa-dashboard"></i> <a href="index.html">Dashboard</a>
 </li>
<li class="active">
 <i class="fa fa-edit"></i> Agregar Estudiantes
 </li>
 </ol>
 </div>
</div>
<div class="row">
<form role="form">
<div class="col-lg-6">
<div class="form-group">
 <label>Nombre</label>
 <input class="form-control" placeholder="Escriba su Nombre">
 </div>
<div class="form-group">
 <label>Apellido Materno</label>
 <input class="form-control" placeholder="Escriba el Apellido">
 </div>
<div class="form-group">
 <label>Seleccione el Semestre</label>
 <select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
 </select>
 </div>
 </div>
<div class="col-lg-6">
<div class="form-group">
 <label>Apellido Paterno</label>
 <input class="form-control" placeholder="Escriba el Apellido">
 </div>
<div class="form-group">
 <label>CURP</label>
 <input class="form-control" placeholder="Escriba el CURP">
 </div>
 </div>
 </form>
</div>
<div class="form-group input-group">
 <button id="button" class="btn btn-default">Registrar</button>
</div>

Y se vería del siguiente modo:

Se ve bien ¿no? vamos a conectar esto con un javascript que utilizaremos para conectar con nuestro clon de WebApi que ya se encuentra generado en nuestra ruta StudentWeb/service/controller/Student.php, dicho JavaScript es un pequeño archivo que nos permitirá accessar a los metodos GET,POST,PUT, etc…, en mi propio modo de desarrollo creo las funciones a como las necesito, en este caso solo necesitamos 3, así que en la carpeta js crearemos una carpeta llamada DataList, en la cual crearemos un archivo Student.js que contendrá la siguiente información:


function getStudents() {
var lst = [];
$.ajax({
type: "GET",
url: "service/Student/",
contentType: 'application/json',
dataType: 'json',
async: false,
success: function (responseData, textStatus, jqXHR) {
if (responseData.Students.length > 0) {
lst = responseData.Students;
}
},
error: function (responseData, textStatus, errorThrown) {
}
});
return lst;
}

function Add(request) {
var response = {};
$.ajax({
type: "POST",
url: 'service/Student/',
contentType: 'application/json',
dataType: 'json',
async: false,
data: JSON.stringify(request),
success: function (responseData, textStatus, jqXHR) {
if (responseData.success) {
var additionalData = JSON.parse(responseData.AdditionalData);
alert("Alumno Agregado.");
}
else {
alert(responseData.Description);
throw responseData.Description;
}
},
error: function (responseData, textStatus, errorThrown) {
alert("Error interno");
throw "Error interno";
}
});
return response;
}

function Update(request) {
var response = {};
$.ajax({
type: "PUT",
url: 'service/Student/',
contentType: 'application/json',
dataType: 'json',
async: false,
data: JSON.stringify(request),
success: function (responseData, textStatus, jqXHR) {
if (responseData.success) {
alert("Alumno Actualizado.");
}
else {
alert(responseData.Description);
throw responseData.Description;
}
},
error: function (responseData, textStatus, errorThrown) {
alert("Error interno");
throw "Error interno";
}
});
return response;
}

Una vez creado este script, podemos agregarlo a nuestra vista AddStudent.php en la parte superior


<script src="js/DataList/Student.js"></script>

Con esto tenemos nuestro script de carga, ahora iremos a la parte de abajo de nuestro archivo y abrieremos las etiquetas y dentro pondremos la funcionalidad de la pagina con el siguiente código:

$("#button").on("click", function () {
var Name = $("#Name").val();
var Paternal = $("#Paternal").val();
var Maternal = $("#Maternal").val();
var CURP = $("#CURP").val();
var Semestre = $("#Semestre").val();

if (Name == undefined || Name == "") {
alert("El nombre es obligatorio");
}
else if (Paternal == undefined || Paternal == "") {
alert("El apellido paterno es obligatorio");
}
else if (Maternal == undefined || Maternal == "") {
alert("El apellido Materno es obligatorio");
}
else if (CURP == undefined || CURP == "") {
alert("El CURP es obligatorio");
}
else {
var request = {};
request.Name = Name;
request.Paternal = Paternal;
request.Maternal = Maternal;
request.CURP = CURP;
request.Semestre = Semestre;

response = Add(request);
}
});

Con el siguiente codigo hemos dado algunas validaciones como evitar que los campos vayan vacios, ya enlazado podemos ver que el orden del desarrollo se vuelve rapido y mejoramos el entendimiento de nuestra aplicacción, con esto terminamos el apartado 3, en el apartado siguiente veremos como crear grids (Tablas) en tiempo real, y como hacerlos editables gracias a la siguientes herramientas mostradas aquí.

Para descargar los avances del proyecto (Download)

Anuncios

Acerca de Francisco Castán

Creador, Diseñador, Investigador y Programador de Software Lenguajes Preferidos: C/C++, C#, Java, PHP, Python, PERL, Shell, JavaScript

Publicado el 27/04/2017 en JavaScript, JQuery, JSON, PHP y etiquetado en , , , , . Guarda el enlace permanente. 1 comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: