jueves, 16 de febrero de 2017

El servidor web, conceptos avanzados



Validando
  • Qué es la validación? Imagínense que ustedes tienen una página web, donde la gente se registra. O sea, crea su usuario. Eso lo hacen diariamente para obtener una cuenta de correo electrónico, o darse de alta en una red social.
  • En esa pantalla de registración, les piden un montón de información, como ser: nombre, apellido, fecha de nacimiento, teléfono, dirección, país, ciudad, dirección de correo electrónico, etc. Cada uno de estos datos tiene alguna naturaleza o tipo. Qué significa eso? La fecha de nacimiento tiene la forma de una fecha. El nombre y el apellido son palabras. El correo electrónico tiene el símbolo “@” y un “.” , el número telefónico está compuesto por números, y en algunos casos por “-“, o paréntesis.
  • Pero qué ocurre en la realidad? Como el lugar para ingresar estos datos a veces no está bien programado, el usuario podría ingresar datos de naturaleza errónea en nuestra interfaz y nosotros tendríamos información incorrecta, o datos sucios. Así el usuario podría decirnos que su correo electrónico es por ejemplo “johndoe@hello”. O que su fecha de nacimiento es “milnovecientos”.
  • Por este motivos, es que se realiza lo que llamamos validación de los datos. Y esto consiste básicamente en corroborar que los datos tengan el tipo y forma que corresponde. Esto no significa que el usuario no pueda mentir, pero por lo menos nos aseguraremos que los datos cumplan con ciertas reglas.
Validación en el servidor
  • La validación se puede hacer enviando la información al servidor para que este la analice y luego la aplicación decida si la misma tiene el formato correcto y la apruebe o si se mostrarán en la interfaz mensajes con los errores encontrados.
  • Esto lo haremos utilizando nuevamente la estructura de mi modelo MVC, donde la vista se mostrará de forma tal que le requiera al usuario el ingreso de información, para que luego el controlador envíe la misma al modelo, quien decidirá a continuación como se actualizará la vista de acuerdo a la correctitudo no de lo ingresado.
  • Como ejemplo, mostraremos cuales serían los componentes MVC para el ingreso de un nuevo dato Persona y otra interfaz para poder consultar los datos.
Validación en el servidor - Modelo

usingSystem;
usingSystem.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcSimpleModelBinding.Models
{
public class Person
{
public intId { get; set; }
public string Name { get; set; }
public intAge { get; set; }
public string Street { get; set; }
public string City { get; set; }
public string State { get; set; }
public intZipcode{ get; set; }
}
}

Validación en el servidor - Controller

public class PersonController: Controller
{
static List people = new List();
public ActionResultIndex()
{
return View(people);
}
public ActionResultDetails(Person person)
{
return View(person);
}
public ActionResultCreate()
{
return View();
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResultCreate(Person person)
{
if (!ModelState.IsValid)
{
return View("Create", person);
}
people.Add(person);
return RedirectToAction("Index");
}

Validación en el servidor – Vista Index

<h2>Index</h2>
<table>
<tr>
<th></th>
<th>
Id
</th>
<th>
Name
</th>
</tr>
<% foreach(varperson in Model) { %>
<tr>
<td><%= Html.ActionLink("Details", "Details", person )%></td>
<td><%= Html.Encode(person.Id) %></td>
<td><%= Html.Encode(person.Name) %></td>
</tr>
<% } %>
</table>
<p>
<%= Html.ActionLink("Create New", "Create") %>
</p>

Validación en el servidor – Vista Create

<h2>Create</h2>
<%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>
<% using (Html.BeginForm()) {%>
<fieldset><legend>Fields</legend>
<p>
<label for="Id">Id:</label><%= Html.TextBox("Id") %><%= Html.ValidationMessage("Id", "*") %>
</p>
<p>
<label for="Name">Name:</label><%= Html.TextBox("Name") %><%= Html.ValidationMessage("Name", "*") %>
</p>
<p>
<label for="Age">Age:</label><%= Html.TextBox("Age") %><%= Html.ValidationMessage("Age", "*") %>
</p>
<p>
<label for="Street">Street:</label><%= Html.TextBox("Street") %><%= Html.ValidationMessage("Street", "*") %>
</p>
<p>
<label for="City">City:</label><%= Html.TextBox("City") %><%= Html.ValidationMessage("City", "*") %>
</p>
<p>
<label for="State">State:</label><%= Html.TextBox("State") %><%= Html.ValidationMessage("State", "*") %>
</p>
<p>
<label for="Zipcode">Zipcode:</label><%= Html.TextBox("Zipcode") %><%= Html.ValidationMessage("Zipcode", "*") %>
</p>
<p><input type="submit" value="Create" /> </p>
</fieldset>
<% } %>
<div><%=Html.ActionLink("Back to List", "Index") %></div>

Validación en el servidor – Vista Details

<h2>Details</h2>
<fieldset>
<legend>Fields</legend>
<p>
Id:<%= Html.Encode(Model.Id) %>
</p>
<p>
Name:<%= Html.Encode(Model.Name) %>
</p>
<p>
Age:<%= Html.Encode(Model.Age) %>
</p>
<p>
Street:<%= Html.Encode(Model.Street) %>
</p>
<p>
City:<%= Html.Encode(Model.City) %>
</p>
<p>
State:<%= Html.Encode(Model.State) %>
</p>
<p>
Zipcode:<%= Html.Encode(Model.Zipcode) %>
</p>
</fieldset>
<p><%=Html.ActionLink("Back to List", "Index") %></p>

Validación en el servidor - Contras
  • Cuál es el problema de esta aproximación? Nuevamente, la realidad nos indica que por otros medios es mas sencillo hacer las validaciones en la computadora del usuario en vez de sobrecargar nuestra aplicación con tareas innecesarias. Para ello, se usan tecnologías como Javascripto jQueryque directamente realizan validaciones del formato de los datos directamente en el navegador de los usuarios, ahorrando procesamiento al servidor.
Validación en el cliente -Javascript

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
varx=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
  • En la función anterior, lo que hacemos cuando enviamos el formulario, es llamar a una función de Javascriptllamada validateFormque se fija si el contenido de ese campo es nullo vacío. En caso positivo abrirá un popupinformando el error. Lo mismo se puede hacer para validar un email:
function validateForm()
{
varx=document.forms["myForm"]["email"].value;
varatpos=x.indexOf("@");
vardotpos=x.lastIndexOf(".");
if(atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
</script>

Validación en el cliente
  • Y finalmente, existen otro tipo de validaciones utilizando la tecnología jQueryque es muy sencilla y pueden ver algunos ejemplos en: http://jqueryvalidation.org/
  • Cualquiera de estos últimos dos tipos de validaciones se realizan del lado del usuario, ahorrando recursos en el servidor para que nuestra aplicación pueda enfocarse en otro tipo de procesamientos.
Enviando correos
  • Existen diversas formas de enviar correos electrónicos desde nuestra aplicación. Las hay mas sencillas y mas complicadas. Intentaremos en este caso hacer en pocos pasos el envío de email utilizando librerías gratuitas que funcionarán con nuestro modelo MVC.
  • Creamos un nuevo proyecto en Visual Studio como ya vimos anteriormente, seleccionando un proyecto web MVC.
  • Luego crearemos una nueva clase en la carpeta Model, llamada correoModel.cs, cuyo código será el siguiente:
Enviando correos -Modelo

public class CorreoModel
{
public string From { get; set; }
public string To { get; set; }
public string Subject { get; set; }
public string Body { get; set; }
}
  • Luego en la carpeta Controllercrearemos un nuevo controlador llamado EnviarCorreoController
Enviando correos - Controlador

usingSystem;
usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Net.Mail;usingSystem.Web;usingSystem.Web.Mvc;
namespaceEnviarCorreo.Controllers
{publicclassEnviarCorreoController: Controller{//// GET: /EnviarCorreo/public ActionResultIndex()
{
return View();
}
[HttpPost]
public ViewResultIndex(EnviarCorreo.Models.CorreoModel_objModelMail)
{
if (ModelState.IsValid)
{
MailMessagemail = new MailMessage();
mail.To.Add(_objModelMail.To);
mail.From= new MailAddress(_objModelMail.From);
mail.Subject= _objModelMail.Subject;
string Body = _objModelMail.Body;
mail.Body= Body;
mail.IsBodyHtml= true;
SmtpClientsmtp= new SmtpClient();
smtp.Host= "smtp.outlook.com";
smtp.Port= 587;
smtp.UseDefaultCredentials= false;
smtp.Credentials= new System.Net.NetworkCredential
("username", "password");// Enter sedersUser name and password
smtp.EnableSsl= true;
smtp.Send(mail);
return View("Index", _objModelMail);
}
else
{
return View();
}
}}}
  • Y finalmente, en la carpeta de vistas, tendremos Index.cshtml
Enviando correos -Vista

@model EnviarCorreo.Models.CorreoModel
@{
ViewBag.Title= "Index";
}
<h2>Index</h2>
<fieldset>
<legend>
Send Email
</legend>
@using (Html.BeginForm())
{
@Html.ValidationSummary()
<p>From: </p>
<p>@Html.TextBoxFor(m=>m.From)</p>
<p>To: </p>
<p>@Html.TextBoxFor(m=>m.To)</p>
<p>Subject: </p>
<p>@Html.TextBoxFor(m=>m.Subject)</p>
<p>Body: </p>
<p>@Html.TextAreaFor(m=>m.Body)</p>
<input type ="submit" value ="Send" />
} </fieldset>

Explicando nuestro ejemplo
  • En el controlador tenemos un código que dice:
    • ViewResult Index (EnviarCorreo.Models.CorreoModel _objModelMail)
  • En este método, tenemos un dato que tiene la forma de nuestro CorreoModel. Luego creamos un dato MailMessage y le completamos toda la información que necesita:
    • To
    • From
    • Cc
    • Bcc
    • Subject
    • Body
  • Luego configuramos los datos del servidor de correo que enviará nuestro email con lo siguientes datos:
    • Host: el nombre del servidor
    • Port: el puerto en el cual nos conectamos para enviar el correo
    • UseDefaultCredential: indica si tiene algún usuario preconfigurado
    • Credentials: usuario y contraseña
    • EnableSsl: indica si se encripta la información con un tipo de seguridad llamada SSL
  • Y finalmente, le indicamos al servidor que envíe el correo utilizando la función Send
Interfaces avanzadas
  • Con funciones como la validación, y la utilización de controladores y modelos, podemos construir interfaces cada vez mas complejas y avanzadas, que permitirán una mayor interacción del usuario, sin necesidad de tener un alto procesamiento del lado del servidor contantemente. Si a esto le sumamos tecnologías como AJAX o jQuery, mas HTML y CSS, nos encontraremos con un sinfín de posibilidades para brindarle a nuestros usuarios y para representar de mejor manera nuestros modelo de negocio.
  • Para el desarrollo de interfaces avanzadas siempre deberemos hacer uso de múltiples tecnologías que se complementarán para ayudarnos a lograr nuestros objetivos. Algunas funcionalidades avanzadas de interfaz gráfica se pueden alcanzar mediante librerías como jQueryUI: https://jqueryui.com/
Persistiendo
  • Hasta ahora, hemos estado guardando nuestros datos en variables dentro de nuestra aplicación, o enviándolos por correo electrónico. Pero ninguna de estas opciones suele ser muy óptima. Guardar nuestros datos en variables significa que los mismos son almacenados en la memoria volátil de nuestra computadora. Cada vez que apaguemos la computadora perderemos los datos y deberemos arrancar nuevamente con la carga.
  • De igual manera, guardar la información en correos electrónicos dista de ser una opción viable, dado que estaremos trabajando con información escrita solamente, y consultarla luego no será sencillo, debido a que estamos generando archivos por cada una de las transacciones que realicemos
  • Por ello es que aparece como una necesidad el concepto de persistencia, que se refiere a la propiedad de los datos para que estos sobrevivan de alguna manera.
  • La persistencia de aplicación es la capacidad para que los datos sobrevivan a la ejecución del programa que los ha creado.
  • Este tipo de persistencia requiere que los datos sean almacenados en algún lugar no volátil (o sea, que no desaparezca cuando se apaga la computadora), para la posterior utilización.
  • Se puede a modo ejemplo, guardar información en un archivo que está almacenado en disco. Es común en muchas aplicaciones guardar en disco una copia de las opciones de configuración cada vez que el usuario realiza cambios. Si dichos cambios no se guardaran en disco, la próxima vez que el usuario ejecute la aplicación tendría que volver a definir las opciones de preferencia.
  • Otra forma de guardar la información, es mediante los servidores de bases de datos. Pero eso es algo que veremos en el próximo capítulo



Espero haber ayudado en algo. Hasta la próxima oportunidad!











  

No hay comentarios:

Publicar un comentario en la entrada