Archivo del sitio

Manejo de Idiomas en Web con jquery.i18n.properties-1.0.9.js


Ahhh, los idiomas, un gracioso dolor de cabeza, después de tomar un desarrollo en el cual hacia todo por controllers, una mezcla de miedo, pero esta no es la razón del post, veremos una librería que medio algo de tranquilidad en la tempestad de esta travesía…

jquery.i18n.properties es una librería la cual permite el manejo de idioma con javascript y jquery si quieren ver el proyecto original pueden descargarlo de esta aquí.

En cuanto a mi, bueno como ya saben me gusta controlar algo las cosas que uso, así que me metí a echarle un ojo e hice un par de cambios y debo decir que no muy substanciales, manos a la obra, primero haremos un html con el siguiente código


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://fcgexamples.000webhostapp.com/i18n/jquery.i18n.custom.js"></script>
<input type="button" id="btEsp" value="Español">
<input type="button" id="btIng" value="English">
<fieldset>
<legend lang="app.test.legend.title"></legend>
<label lang="app.test.input.text.User.label"></label>:<input name="username" lang="app.test.input.text.User.placeholder" ><br>
<label lang="app.test.input.text.Password.label"></label>:<input name="password" lang="app.test.input.text.Password.placeholder"><br>
<input type="button" value="" lang="app.test.input.Button.label"><br>
<span lang="app.test.Description.Text1"></span>
</fieldset>
<script>
 var lang = 'es';
 
 $('#btEsp').on('click', function() {
 lang = 'es';
 regionalData();
 });
 
 $('#btIng').on('click', function() {
 lang = 'en';
 regionalData();
 });
 
 $(document).ready(function() {
 regionalData();
 });
 
 function regionalData() {
 $.i18n.properties({
 name: 'messages',
 path: '/i18n/lng/',
 mode: 'both',
 language: lang,
 });
 }
 
</script>

Como podemos ver tenemos un atributo “lang” que nos servirá para definir las etiquetas que manejaran el idioma un ejemplo de esto es lang=”app.test.input.Button.label” a partir de esto usamos parte de la librería i18n, a la cual le he realizado algunos cambios, uno de ellos es que cambie el idioma de manera automática podemos ver el ejemplo funcionado aquí.

Los archivos archivos de idioma se encuentran en la carpeta lng y cuentan con la siguiente nomenclatura messages_{idioma}.txt en el caso de ingles sería messages_en.txt en el caso de español sería messages_es.txt

La información interna de los archivos contiene lo siguiente para messages_es.txt


app.test.input.text.User.placeholder=Usuario
app.test.input.text.User.label=Usuario
app.test.input.text.Password.placeholder=Contraseña
app.test.input.text.Password.label=Contraseña
app.test.input.Button.label=Enviar
app.test.legend.title=Iniciar session
app.test.Description.Text1=Este es un ejemplo de Formulario

La información interna de los archivos contiene lo siguiente para messages_en.txt


app.test.input.text.User.placeholder=User
app.test.input.text.User.label=User Name
app.test.input.text.Password.placeholder=Password
app.test.input.text.Password.label=Password
app.test.input.Button.label=Send
app.test.legend.title=Login
app.test.Description.Text1=This is a From Example

Descarga

Anuncios

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)

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)

Programando Clon MVC y WebApi en PHP (Parte 2)


En el apartado anterior hemos visto un ejemplo de como integrar las plantillas de Bootstrap a nuestra aplicación PHP, en este apartado veremos como crear un webApi, apoyandonos en los archivos .htacess y un pequeño modelito de web services rest de php que personalmente uso, si quieres ver como hacer servicios rest con php sin necesidad de Frameworks o librerías externas puedes echar una ojeada a esta entrada. Si has llegado a esta entrada por otros medios te recomiendo que leas esta serie de posts desde el primero.

Luego de todo el choro, manos a la obra, en esta ocasion nuesta atención se centrará en la carpeta service que se encuentra en la carpeta raíz de nuestra solución, este será el arbol de archivos que crearemos:

  • index.php
  • .htaccess
  • controller
    • Student.php

index.php

El archivo index.php nos permitirá obtener la información rest de los siguientes metodos GET,POST,PUT,DELETE, permitiendonos obtener la información directa y la llamada al recurso que corresponde como vemos en el siguiente código:

 


<?php 
header('Content-Type: application/json'); 
ini_set("allow_url_fopen", true); 
error_reporting(0); 
@session_start(); 
$path = parse_url($_SERVER["REQUEST_URI"], 5); 
$path = str_replace("/StudentWeb/service/", "", $path); 
$path = trim($path, "/"); 
@list($resource, $params) = explode("/", $path, 2); 
$method = strtolower($_SERVER["REQUEST_METHOD"]); 
$params = !empty($params) ? explode("/", $params) : array(); 
include("controller/". $resource .".php"); 
if (class_exists($resource)) { 
try { 
$resource = new $resource($params); 
$resource->{$method}();
    }
    catch (Exception $e) {
        @header("HTTP/1.1 500 Internal Server Error");
    }
}
else {
    @header("HTTP/1.1 404 File Not Found");
  echo "Error";
}
?>

Este código nos permite generar una ruta directa del index a cualquier controller, podria decirce que es un reflection o algo así:

.htaccess


<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /StudentWeb/service/index.php
</IfModule>

Este código htaccess nos permite redireccionar cualquier url que vaya en la dirección /StudentWeb/service/ al index.php que anteriormente creamos, dandonos la accesibilidad a la ruta /StudentWeb/service/Student/

Finalmente llegamos a nuestra carpeta controller dentro de la ruta /StudentWeb/service/controller/ la cual se encarga de contener todas nuestras claces relacionadas con nuestro servicio rest (clon de web api) editaremos el archivo Student.php que queda de la siguiente manera:


<?php
class Student {
	var $params;
	var $jsonParams;
    
	function Student($params="") {
		$this->params = $params;
		$content = file_get_contents("php://input", NULL, NULL, 0, 1000);
		$data = json_decode($content,true);
		$this->jsonParams = json_encode($data);
	}

	function get() {
		
		if (!$_SESSION["Students"]) {
			$_SESSION["Students"]  = array();
		}
		$Students["Students"] = $_SESSION["Students"];
		echo json_encode($Students);
	}

	function post() {
		try {
			$Students  = $_SESSION["Students"];
			$Student = $this->jsonParams; 
			$Sutdents = array();
			$Student["NoControl"] = Count($Students)+1;
			$Sutdents[] = $Student;
			$_SESSION["Students"] = $Sutdents;
			$result["success"] = true;
			$result["AdditionalData"] = $Student["NoControl"];
			echo json_encode($result);
		} catch(Exception $e) {
			$result["success"] = false;	
			$result["Description"] = $e;
			echo json_encode($result);
		}
	}
    
	function put() {
		$Student = $this->jsonParams;
		$Students  = $_SESSION["Students"];
		try {
			for ($i = 0; $i <= Count($Students); $i++) {
				if ($Students[$i]["NoControl"] == $Student["NoControl"]) {
					$Students[$i]["Name"] = $Student["Name"];
					$Students[$i]["Paternal"] = $Student["Paternal"];
					$Students[$i]["Maternal"] = $Student["Maternal"];
					$Students[$i]["Semestre"] = $Student["Semestre"];
				}
			}
			$_SESSION["Students"] = $Students;
			$result["success"] = true;
			echo json_encode($result);
		}
		catch (Exception $e) {
			$result["success"] = false;	
			$result["Description"] = $e;
			echo json_encode($result);
		}
	}
	
	function delete() {
		$NoControl = $this->jsonParams["NoControl"];
		$Students  = $_SESSION["Students"];
		$StudentsWithOutItems  = array();
		try {
			for ($i = 0; $i <= Count($Students); $i++) {
				if ($Students[$i]["NoControl"] != $NoControl) {
					$Student["NoControl"] = $Students[$i]["NoControl"];
					$Student["Name"] = $Students[$i]["Name"];
					$Student["Paternal"] = $Students[$i]["Paternal"];
					$Student["Maternal"] = $Students[$i]["Maternal"];
					$Student["Semestre"] = $Students[$i]["Semestre"];
					$StudentsWithOutItems[] = $Student;
				}
			}
			$_SESSION["Students"] = $StudentsWithOutItems;
			$result["success"] = true;
			echo json_encode($result);
		}
		catch (Exception $e) {
			$result["success"] = false;	
			$result["Description"] = $e;
			echo json_encode($result);
		}
	}
}
?>

como podemos ver nuestro código tiene 4 metodos que son los que serán expuestos en el recurso GET,POST,PUT,DELETE, estos metodos serán llamados directamente por el index y seran redirigidos a la clase Student los metodos de entrada serán en GET y DELETE de la siguiente forma

GET /StudentWeb/service/Student/

DELETE /StudentWeb/service/Student/?NoControl=1

POST /StudentWeb/service/Student/

PUT /StudentWeb/service/Student/

En el caso de los metodos POST y PUT se debe enviar en los headers en el modelo de JSON un jemplo de esto lo veremos en la siguiente entrega cuando agregemos las llamadas de Ajax con JQuery, y veremos como hacer pruebas de nuestro servicio.

En la proxima entrega veremos como hacer llamadas javascript y ensamblaremos las vistas.

Download

Programando Clon MVC y WebApi en PHP (Parte 1)


Como muchos desarrolladores .NET saben el MVC de Visual Studio tiene un patron bastante organizado, lo suficientemente organizado como para copiarlo a PHP y tratar de organizar nuestro código de una manera más comoda, en las entradas anteriores vimos como crear un patron de este tipo con Visual Studio, ahora, haremos lo mismo pero para nuestros compañeros desarrolladores en PHP 😉 que tambien es uno de mis lenguajes favoritos.

Comenzaremos creando nuestro “Esqueleto” de aplicación dentro de una carpeta StudenWeb que debe quedar como la siguiente:

Explicación de las carpetas:

Controllers : Es una carpeta reservada para hacer llamadas post internas dentro de las vistas un ejemplo de esto es la subida de archivos, muestra de imagenes protegidas entre otras cosas.

css : Guardará todos los archivos de Estilos de html.

fonts : Donde se guardan los archivos de tipografias e iconos.

Helpers : Funciones que podriamos utilizar dentro de nuestro sistema.

img : Archivos y Carpetas de Imagenes necesrios para nuestras vistas.

js : Archivos de JavaScritp.

Views : Archivos PHP con el código minimo, y en su mayor parte html.

service : Archivo donde crearemos nuestro webApi

A partir de aquí buscaremos una plantilla Bootstrap, como muchos de los lectores de este blog saben no soy muy afecto a crear diseños web, podemos descargarlo de la siguiente ruta https://startbootstrap.com/template-overviews/sb-admin/ (Es de mis favoritos), ahora veremos como integrar nuestro diseño de bootstrap a nuestro cascaron en PHP, analicemos las carpetas que tiene nuestra plantilla:

Bien, podemos encontrar dentro de las carpetas que nos interesan css, fonts-awesome, fonts, js, estas carpetas deben ser copiadas a nuestro proyecto de MVC lo haremos de la siguiente manera:

  1. Todo el contenido de la carpeta css será copiado a la carpeta css de nuestra solucion.
  2. Todo el contenido de la carpeta js será copiado a la carpeta js de nuestra solución.
  3. En cuanto a la carpeta fonts-awesome encontraremos las siguientes carpetas css, less, scss y fonts.
    1. Tomaremos el contenido de css que esta dentro de la carpeta fonts y será copiado a nuestra carpeta css.
    2. Tomaremos el contenido de la carpeta fonts y lo pasaremos a nuestra carpeta fonts

 

Una vez realizados estos pasos crearemos nuestro arbol en la carpeta de vistas, ya que es necesario que tengamos nuestra iformación de los php con contenido de html dentro de carpetas el arbol de archivos es el siguiente:

  • Views
    • Home
    • Shared

Despues de esto en nuestra carpeta raiz, crearemos un index.php, en el cual pondremos nuestro siguiente código:

<?php 
error_reporting(5); 
include('Views/Shared/_Layout.php'); ?>

 

Este codigo nos permite evitar los multiples notices que nos mostrará el wamp e incluir el archivo _Layout.php, el cual debe contener la información del index.hml de nuestro template que acabamos de bajar:

La imagen anteroir contiene el codigo recortado y colapsado para que se pueda apreciar mejor, no agregaremos la información tal como esta haremos unos pequeños cambios, que son en las siguientes lineas:

 

Cambio 1

<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

Será cambiado por:

<link href="css/font-awesome.css" rel="stylesheet" type="text/css">

Cambio 2

Se quitará el contenido dentro de la etiqueta <div class=”container-fluid”> (Guardalo en un notepad que lo usaremos despues)

Cambio 3

Se tomarán las referencias a los JavaScripts y se pasarán después de las referencias css, como se ve en la siguiente imagen:

Una vez realizado esto copiaremos nuestro código a nuestro archivo _Layout.php. Una vez copiado crearemos dentro de la etiqueta <div class=”container-fluid”> un switch como el siguiente

 

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

Finalizando estos cambios el sistema ya se encuentra funcional, para finalizar vamos a crear un archivo en la ruta Views/Home/ que se llamará Dashboard.php en el cual agregaremos el contenido que anteriormente se encontraba dentro de

que debio ser guardado en algún notepad en el cambio 2.

Una vez hecho esto nuestro esqueleto PHP de MVC con webApi esta terminado y para poder visualizar que mejor que meterlo en el wamp para verlo funcionando:

Con este cambio finalizamos esta entrega, ya tenemos nuestro esqueleto MVC con Bootstrap, y en la proxima entrega veremos como configurar el webApi, esta información tambien es explicada en mi libro que sera puesto a la venta en Amazon en un par de meses.

Download

Programando con MVC y WebApi en C# (Parte 4)


En el apartado anterior hemos creado nuestras vistas en nuestro MVC y como conectarla, 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 ListStudent.cshtml algo más o menos como lo siguiente:

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


<script src="@Url.Content("~/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="index.html">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:

Agregaremos los scripts para que sean cargados por nuestra pagina

 


<script src="@Url.Content("~/js/CustomControls/CustomControls.js")"></script>
<script src="@Url.Content("~/js/CustomControls/CustomFunctions.js")"></script>
<script src="@Url.Content("~/js/CustomControls/CustomSimpleGrid.js")"></script>

Una vez realizado esto podemos dedicarnos a escribir la parte del script que dará funcionalidad a nuestro código y quedará 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: 1, name: "2" });
        semestre.push({ id: 1, name: "3" });
        semestre.push({ id: 1, name: "4" });
        semestre.push({ id: 1, name: "5" });
        semestre.push({ id: 1, name: "6" });
        semestre.push({ id: 1, 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 MVC y WebApi en .NET, espero que les haya gustado y que les sea de ayuda.

 
Descargar Ejemplo Completo
 

Programando con MVC y WebApi en C# (Parte 3)


En el apartado anterior se ha escrito sobre como crear nuestro webApi con MVC, 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í.

En este apartado, comenzaremos creando una carpeta dentro de Views llamada Student que contendrá todas nuestras vistas. Para este ejercicio crearemos las siguientes vista Index.chtml que nos permitirá construir nuestro visualización.

Ahora bien, crearemos el controller para ordenar la visualización de ese index, nuestro controller se llamará StudentController.cs dando click con el boton derecho en la carpeta Controller>Add>Controller que nos mostrará una pantalla como la siguiente:

En dicha pantalla seleccionaremos un controller vacío, luego daremos click en el botón Add, para finalmente ponerle nombre en el siguiente cuadro de dialogo que nos mostrará:

Dentro del controller escribiremos lo siguiente:

public ActionResult Index()
{
string SourceView = "Index";
SourceView = this.Request.Params["Source"] != null ? this.Request.Params["Source"] : SourceView;
return View(SourceView);
}

¿Por que hacemos esto?

La respuesta es simple, me he encontrado que cuando manejas profundidad de controllers algunos scripts no funcionan bien, por lo tanto para mi tranquilidad, envío la pagina por método GET para que cargue el controller deseado.

Después de esto podemos ver que ya nos muestra la información de nuestro index, ahora 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 Index,cshtml 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 nuestra clase Student y lo formateraremos un poco para que quede del siguiente modo:

@{
    ViewBag.Title = "Index";
}
<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 así:

Nice ¿No? pues vamos a conectar esto con un javascript que utilizaremos para conectar con nuestro WebApi que ya se encuentra generado en nuestro StudentController.cs que se encuentra en la carpeta service, dicho JavaScript es un pequeño archivo que nos permitirá accessar a los metodos GET,POST,PUT, etc, los cuales han sido creado en el controller, 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 Studen.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.Rows.length > 0) {
                lst = responseData.Rows;
            }
        },
        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);
                MessageModal("Aceptado", "Alumno Agregado.");
            }
            else {
                MessageModal("Información", responseData.Description);
                throw responseData.Description;
            }
        },
        error: function (responseData, textStatus, errorThrown) {
            MessageModal("Error", "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) {
                MessageModal("Aceptado", "Alumno Actualizado.");
            }
            else {
                MessageModal("Información", responseData.Description);
                throw responseData.Description;
            }
        },
        error: function (responseData, textStatus, errorThrown) {
            MessageModal("Error", "Error interno");
            throw "Error interno";
        }
    });
    return response;
}

Una vez  agregado este script lo incluiremos en nuestro Index.chtml dado que es un script creado para esa vista sera agregado mediante el comando @Url.Content del siguiente modo:


<script src="@Url.Content("~/js/DataList/Student.js")"></script>

Ahora bien iremos al final del archivo y abriremos las etiquetas correspondientes a la funcionalidad de la pagina con el siguiente código:


<script>
$("#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);
}
});
</script>

Con el código 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í.

Programando con MVC y WebApi en C# (Parte 2)


En el apartado anterior se ha escrito sobre como vincular Bootstrap a nuestro proyecto de MVC, en este apartado veremos como se realizará la conexión entre el WebApi y nuestra vista web si no lo has leído puedes verlo aquí.

Comenzaremos creando los controllers para nuestro servicio de WebApi dentro de la carpeta Service.

Seleccionaremos Add > Controller y aparecerá una ventana como la que se muestra a continuación:

Despues de esto nos preguntará que nombre deseamos ponerle a nuestro controller, en nuestro caso crearemos StudentController, una vez creado nuestro controller daremos manos a la obra, creando los metodos GET, POST, PUT y DELETE.

Para esto debemos crear dos Entidades, una llamada Studen y otra llamada Result , Studen será la clase utilizada para poder enviar los datos de los estudiantes de nuestra vista a nuestro WebApi, y Result será una Clase informativa que nos dirá si las inserciones, las actualizaciones y borrados se han realizado de manera correcta o si ha habido algún tipo de error, en el caso de las inserciones nos devolverá el número identificador con el cual se ha agregado.

Clase Result:

namespace StudentsWeb.Models
{
    public class Result
    {
        public bool success { get; set; }
        public string Description { get; set; }
        public string AdditionalData { get; set; }
    }
}

Clase Student:

namespace StudentsWeb.Models
{
    public class Student
    {
        public long NoControl { get; set; }
        public string Name { get; set; }
        public string Paternal { get; set; }
        public string Maternal { get; set; }
        public string CURP { get; set; }
        public short Semestre { get; set; }
    }
}

Después de Crear las clases podemos dar vida a nuestro Controller “StudenController” como mencione antes en este controller vamos a manejar los métodos que necesitamos y para hacer un mock de manera rápida, utilizaremos la sesión.

Esto queda de la siguiente manera:

using System.Web;
using System.Web.Http;

namespace StudentsWeb.service
{
    public class StudentController : ApiController
    {
        public List<Student> Get()
        {
            var session = HttpContext.Current.Session;
            List<Student> ls;
            ls = (List<Student>)session["Sudent"];
            if (ls == null)
            {
                ls = new List<Student>();
            }
            return ls;
        }

        public Student Get(long NoControl)
        {
            var session = HttpContext.Current.Session;
            List<Student> ls;
            ls = (List<Student>)session["Sudent"];
            if (ls == null)
            {
                ls = new List<Student>();
            }
            Student s = new Student();
            s = ls.FirstOrDefault(S => S.NoControl == NoControl);
            return s;
        }

        [HttpPost]
        public Result post(Student s)
        {
            Result result = new Result();
            var session = HttpContext.Current.Session;
            List<Student> ls;
            ls = (List<Student>)session["Sudent"];
            if (ls == null)
            {
                ls = new List<Student>();
            }
            try
            {
                s.NoControl = ls.Count() + 1;
                ls.Add(s);
                session["Sudent"] = ls;
                result.success = true;
                long NoControl = s.NoControl;
                result.AdditionalData = JsonConvert.SerializeObject(NoControl);
            }
            catch (Exception ex)
            {
                result.success = false;
                result.Description = ex.Message;
            }
            return result;
        }

        [HttpPut]
        public Result put(Student s)
        {
            Result result = new Result();
            var session = HttpContext.Current.Session;
            List<Student> ls;
            ls = (List<Student>)session["Sudent"];
            if (ls == null)
            {
                ls = new List<Student>();
            }
            try
            {
                ls.FirstOrDefault(S => S.NoControl == s.NoControl).CURP = s.CURP;
                ls.FirstOrDefault(S => S.NoControl == s.NoControl).Maternal = s.Maternal;
                ls.FirstOrDefault(S => S.NoControl == s.NoControl).Name = s.Name;
                ls.FirstOrDefault(S => S.NoControl == s.NoControl).Paternal = s.Paternal;
                ls.FirstOrDefault(S => S.NoControl == s.NoControl).Semestre = s.Semestre;
                session["Sudent"] = ls;
                result.success = true;
            }
            catch (Exception ex)
            {
                result.success = false;
                result.Description = ex.Message;
            }
            return result;
        }

        [HttpDelete]
        public Result delete(long NoControl)
        {
            Result result = new Result();
            var session = HttpContext.Current.Session;
            List<Student> ls;
            ls = (List<Student>)session["Sudent"];
            if (ls == null)
            {
                ls = new List<Student>();
            }
            try
            {
                ls = ls.Where(S => S.NoControl != NoControl).ToList();
                session["Sudent"] = ls;
            }
            catch (Exception ex)
            {
                result.success = false;
                result.Description = ex.Message;
            }
            return result;
        }
    }
}

Ya tenemos listo el Controller, ahora nos faltan las vistas y el JavaScript pero estoy seguro que ya saben por donde va la idea.

Para que las sesiones puedan ser utilizadas dentro de los controllers de WebApi es necesario modificar los siguientes archivos:

WebApiConfig.cs

            var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == "application/xml");
            config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(appXmlType);

En el código anterior, le estamos diciendo al método Register que solo permita el retorno de JSON

Global.asax

        protected void Application_PostAuthorizeRequest()
        {
            HttpContext.Current.SetSessionStateBehavior(SessionStateBehavior.Required);
        }

En el código anterior el método está obliga a usar las sesiones al inicio de la aplicación.

Por hoy lo dejaremos hasta aquí, la próxima entrega crearemos las vistas y conectaremos todo

 

Programando con MVC y WebApi en C# (Parte 1)


MVC (Modelo Vista Controlador) es un patrón de diseño que separa los datos de y la lógica de negocio de una Aplicación cualquiera que sea su contexto, para esto el lenguaje de .NET Ya tiene una solución que se encuentra en ASP.NET Web Application (.NET Application)

Después de seleccionar el nombre de nuestra solución nos aparecerá la siguiente ventana:

Una vez seleccionado el Web API y cambiado el modo de autenticación podemos proceder a ver nuestra solución creada, como la siguiente:

En lo personal el modo en que Microsoft Arreglo el modelo no es de mi completo agrado comenzaremos explicado los contenidos de nuestras carpetas:

Content: en la carpeta content se encuentran los contenidos de plantillas de Estilos y las imagenes
Controllers: es la carpeta que contiene los contenidos de las llamadas a servidor, en mi caso solo es utilizado para la seguridad Login, Registro y Recuperación de Usuarios
fonts: Las fuentes que serán usadas en nuestro template
Models: Las clases para serializar y hablar entre los controllers
Scripts: Los JavaScripts que serán utilizados
View: Finalmente las Vistas que serán utilizadas para presentar nuestra pagina

Como ta habia escrito anteriormente no soy partidario de los nombres que microsoft le ha puesto a las carpetas por lo tanto procederé a borrar las siguientes carpetas y a crear unas nuevas

Carpetas a borrar:

  • Content
  • Scripts

Carpetas a crear:

  • css
  • js
  • img
  • service

Una vez realizado esto nuestro proyecto quedará así:

A partir de aquí buscaremos una plantilla Bootstrap, como muchos de los lectores de este blog saben no soy muy afecto a crear diseños web, podemos descargarlo de la siguiente ruta https://startbootstrap.com/template-overviews/sb-admin/ (Es de mis favoritos), ahora veremos como integrar nuestro diseño de bootstrap a nuestro desbalijado proyecto en .NET, analicemos las carpetas que tiene nuestra plantilla:

Bien, podemos encontrar dentro de las carpetas que nos interesan css, fonts-awesome, fonts, js, estas carpetas deben ser copiadas a nuestro proyecto de MVC lo haremos de la siguiente manera:

  1. Todo el contenido de la carpeta css será copiado a la carpeta css de nuestra solucion.
  2. Todo el contenido de la carpeta js será copiado a la carpeta js de nuestra solución.
  3. En cuanto a la carpeta fonts-awesome encontraremos las siguientes carpetas css, less, scss y fonts.
    1. Tomaremos el contenido de css que esta dentro de la carpeta fonts y será copiado a nuestra carpeta css.
    2. Tomaremos el contenido de la carpeta fonts y lo pasaremos a nuestra carpeta fonts
  4.  Regresaremos a visual studio.

En visual studio ya una vez copiados todos nuestros archivos es necesario dar click al icono Show All Files, para permitirnos ver todos los archivos e incluirlos en el código, si no hiciéramos esta operación, al momento de compilar no nos agregará los archivos en el modo de publicación. Para incluir a los archivos podemos dar click derecho en el archivo o los archivos que queremos incluir, y buscamos en el menú la sección incluir en proyecto:

Y así lo haremos con todos los archivos que hayamos copiado a nuestra solución.

Con esto tenemos nuestros archivos para usar listos, ahora hay que introducirnos en la carpeta App_Star esta carpeta contiene los siguientes Archivos:

  • BundleConfig.cs: Sirve para agrupar varios archivos JavaScript y en un mismo archivo. permitiendo un mejor performance.
  • FilterConfig.cs: Nos permite crear filtros de acción que son atributos que pueden asociarse a una acción de un controlador o al controlador en su totalidad.
  • RouteConfig.cs: Es la clase que se encarga de la configuración de las rutas de los controllers por defecto.
  • WebApiConfig.cs:  Esta clase es la encargada de configuración de las rutas de cualquier servicio expuesto en el webApi.

Ahora que sabemos esto vamos a reconstruir el BundleConfig, recordemos que hemos borrado todos los recursos css y javascript con los que venia nuestra solución por defecto, si abrimos el archivo nos mostrará algo como lo siguiente:

La información que nos interesa para el Registro de Bundles es ScriptBundle y StyleBundle que son las que tenemos que registrar para tener una idea de lo que tenemos que hacer, debemos abrir nuestro archivo index de nuestra plantilla de bootstrap que contiene algo como lo siguiente:

Así pues escribiremos nuestros Bundles de css de la siguiente manera:

Y del mismo modo cambiaremos crearemos nuestros Bundles de JavaScript que quedan del siguiente modo:

Esto nos permitirá obtener los js y css de una manera simple en .NET. ahora bien, vamos a incorporar la plantilla directamente a nuestras vistas, para esto nos dirigiremos a la carpeta View y dentro de la misma la carpeta Shared y dentro de ella un _Layout.cshtml en el cual encontraremos la vista principal de nuestro html el cual muestra algo como lo siguiente:

Bien borraremos algunas cosas para que queden de la siguiente manera:

Esta es la versión menor del archivo y es la manera en como yo lo ordeno cuando voy a pasar una plantilla nueva ahora abriremos nuevamente nuestro archivo index para ir copiando de poco en poco, primero copiaremos la información del head, desde el inicio del encabezado hasta la sección del title, y poniendo la información de nuestro bundle recién, creado quedando el código como el siguiente:

Después de esta parte la cosa se complica un poco, pero créanme que vale la pena verlo terminado, nos dirigiremos de nueva cuenta a nuestra plantilla de bootstrap y buscaremos la etiqueta div siguiente

, comenzaremos a copiar de ese div hasta el div

y esta información será copiada entre y la función @RenderBody() de nuestro archivo _Layout.cshtml  y después de @RenderBody() cerraremos tres etiquetas quedando como en la siguiente imagen:

En este caso la barra de Navegación se encuentra colapsada para no tener que poner una imagen tan grande, espero se entienda. A hora no dedicaremos a la sección que no hemos copiado, pero esta se encuentra en otro archivo, que esta en la carpeta raíz, View>Home el archivo se llama index.cshtml, primero borraremos todo respetando las siguientes lineas

@{
ViewBag.Title = “Home Page”;
}

después de esas lineas copiaremos toda la sección que no copiamos que se encontraba dentro de la etiqueta <div class=”container-fluid”> quedando el archivo de la siguiente manera:

La imagen no nos muestra todo para meter una imagen más pequeña pero para el caso es lo mismo.

Despues de haber hecho todas estas modificaciones tenemos un Layout en nuestra solución lista para trabajar corremos la aplicación y veremos que queda como la siguiente:

Por hoy terminamos con este apartado, también explicado en el libro que estoy haciendo que sera puesto a la venta en Amazon en un par de meses.

Descargar la Solucion

Ejemplo de Sincronisación de datos con un servidor externo del Móvil Parte 2


En la entrada anterior pudimos ver como se realizaban las conexiones del teléfono para que este decidiera como nonectarse a internet, para que esto no sea tan pesado podríamos organizar un menú de configuración que ya no forma parte de este tutorial, aun que con la poca información que tenemos ya podríamos diseñar un juego Como DeadWalkers.

Debemos tener mucho cuidado con la información que sincronizamos dentro de la red, además existen elementos de seguridad los cuales debemos manejar para estos casos.

Dado que terminamos todas las modificaciones, les dejo la descarga y producto final y quedo de sus observaciones.

Aplicación para Instalar (Download)

Código fuente de la Aplicacion (Download)

A %d blogueros les gusta esto: