Programando Clon MVC y WebApi en PHP (Parte 4)


Bienvenidos, a esta cuarta y ultima entrega que nos explica, o medio explica como crear un clon de MVC en PHP.

En la entrega anterori hemos visto como crear una pagina para agregar un registro, ahora veremos como presentarla y como editarla, si no has leído el apartado anterior te recomiendo que lo hagas desde aquí.

En este apartado, agregaremos una vista secundaria a nuestra Student que se encuentra dentro de la carpeta vistas, a la cual llamaremos Student.php.

Una vez creado nuestro archivo agregaremos el siguiente código:


<script src="js/DataList/Student.js"></script>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Lista de Estudiantes
</h1>
<ol class="breadcrumb">
<li>
<i class="fa fa-dashboard"></i> <a href="">Dashboard</a>
</li>
<li class="active">
<i class="fa fa-edit"></i>Lista de Estudiantes
</li>
</ol>
</div>
</div>
<div class="row">
<div class="table-responsive">
<table id="lstStudent" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>NoControl</th>
<th>Nombre</th>
<th>Apellido Paterno</th>
<th>Apellido Materno</th>
<th>CURP</th>
<th>Semestre</th>
<th>Opciones</th>
</tr>
</thead>
</table>
</div>
</div>

Ahora bien, una vez agregado este codigo descargaremos unas librerías que nos permitirán hacer algunas monadas con poco código puedes descargarlas desde aquí.

A partir de esto crearemos en la carpeta js una carpeta llamada CustomControls en la cual pondremos todos los JavaScript que utilizaremos nuestra solución quedará como la siguiente:

Ahora agrgaremos nuestros scripts a nuestro Student.php para que puedan ser localizados por el navegador:

<script src="js/CustomControls/CustomControls.js"></script>
<script src="js/CustomControls/CustomFunctions.js"></script>
<script src="js/CustomControls/CustomSimpleGrid.js"></script>

 

Una vez realizado esto podemos dedicarnos a escribir la parte del script que dará funcionalidad a nuestro código, ya saben nos vamos a la parte de abajo de nuestro codigo dentro de Script.php abrimos nuestras etiquetas de javascript y lo implementaremos de la siguiente manera:


<script>
var students = [];
var gridList;

function GetGrid() {
//Agregamos una lista con los semestres para el DropDown
var semestre = [];
semestre.push({ id: 1, name: "1" });
semestre.push({ id: 2, name: "2" });
semestre.push({ id: 3, name: "3" });
semestre.push({ id: 4, name: "4" });
semestre.push({ id: 5, name: "5" });
semestre.push({ id: 6, name: "6" });
semestre.push({ id: 7, name: "7" });
//Creamos un Grid con la librería, se define un Layout y los campos que queremos que se muestren además del tipo de campo a mostrar y sus botones
gridList = $('#lstStudent').gridView({
layout: { "NoControl": 0, "Name": "", "Paternal": "", "Maternal": "", "CURP": "", "Semestre": 0 },
columns: [
{ Field: "NoControl", ControlType: "Label", Source: null },
{ Field: "Name", ControlType: "Label", Source: null },
{ Field: "Paternal", ControlType: "Label", Source: null },
{ Field: "Maternal", ControlType: "Label", Source: null },
{ Field: "CURP", ControlType: "Label", Source: null },
{ Field: "Semestre", ControlType: "Dropdown", Source: semestre },
{
Field: "Opciones", ControlType: "Buttons",
Buttons: {
Edit: '<button type="button" class="btn btn-success btn-circle btn-edit-item"><i class="fa fa-pencil"></i></button>'
}
}
]
});
}
//Esta funcion nos permite darle funcionalidad a los botones que tengamos en la tabla
function TableFunction() {
$('#lstStudent tbody').on('click', 'button', function () {
var button = $(this);
var item = $(this).parent().parent();
var tbody = $(this).parent().parent().parent();
var data = $(item).attr('data-row');
if (typeof (data) == "string") {
if (data != "") {
data = JSON.parse($(item).attr('data-row'));
}
}
if (button.hasClass('btn-edit-item')) {
//Si existe la clase btn-edit-item se da por sentado que se ha terminado de editar el o los registros del item
//No debemos preocuparnos ya que la librería edita la variable de manera interna
Update(data);
}
});
}

$(document).ready(function () {
GetGrid();
//Se pide la lista de los estudiantes a nuestro webapi desde el javascript student.js
students = getStudents();
//Creamos el Grid con los resultados de la lista
gridList.gridView("Create", students);
//Agregamos funcionalidad al grid
TableFunction();
});
</script>

Este script manda a llamar a nuestro archivo CustomSimpleGrid.js el cual nos da las herramientas para crear un Grid, es muy simple de utilizar y además editable al nivel que decidamos, como podemos ver en las siguientes imagenes:

Y con esto hemos finalizado el tutorial de Clonando MVC y WebApi en PHP, espero que les haya gustado y que les sea de ayuda.

(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 02/05/2017 en JavaScript, JQuery, JSON, PHP y etiquetado en , , , , . Guarda el enlace permanente. Deja un 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: