Lo que tratare de explicar es el proceso de Login  los datos seran introducidos en un formulario HTML

Bueno ahora tratare de explicar un poco como realizar esta acciones

1. Lo primero que haremos es crear un archvio JavaScript que se llamara ajax.js
2. Una ves creado este archivo agregaremos el siguiete codigo

var xmlHttp =  createXmlHttpRequestObject();

function createXmlHttpRequestObkect()
{
var Http;
try
{
//Objeto para las llamadas asicronas al servidor
Http = new XMLHttpRequest();
}
catch(e)
{
//es intermet explorer6 o anterior
var XmlHttpVersions = new Array(“MSXML2.XMLHTTP.6.0″,
“MSXML2.XMLHTTP.5.0″,
“MSXML2.XMLHTTP.4.0″,
“MSXML2.XMLHTTP.3.0″,
“MSXML2.XMLHTTP”,
“Microsoft.XMLHTTP”);
for(var i=0; i<XmlHttpVesions.length && !xmlHttp;i++)
{
try
{
Http = new ActiveXObject(XmlHttpVersions[i]);
}
catch(e){}
}
}
if(!Http)
alert(“Error al crear el objeto XMLHttpRequest.”);
else
return Http;
}

Despues crearemos un archivo que se llamara proceso.js

function processLogin()
{
var user = document.getElementById(“usr”).value;
var pwd = document.getElementById(“pwd”).value;

if(user == “” || pwd == “”)
{
alert(“No deje campos vacios”);
return;
}

//only continue if xmlHttp isn’t void
if (xmlHttp)
{
try
{
var usr = document.getElementById(“usr”).value;
var pwd = document.getElementById(“pwd”).value;
var params = “usr=”+usr+”&pwd=”+pwd;
xmlHttp.open(“GET”,”login.php?”+params,true);
xmlHttp.onreadystatechange =  handleRequestStateChangeLogin;
xmlHttp.send(null);
}
//display the error in case of failure
catch(e)
{
alert(“Can’t connect to server:\n”+e.toString());
}
}
}

function handleRequestStateChangeLogin()
{
//when readyState is 4, we are ready to read the server response
if(xmlHttp.readyState == 4)
{
//continue only if HTTP status is OK
if(xmlHttp.status == 200)
{
try
{
//do something with the response from server
handleServerResponseLogin();
}
catch(e)
{
//display error message
alert(“Error reading the response: “+e.toString());
}
}
else
{
//display status message
alert(“There was a problem retrivering the data:\n”+xmlHttp.statusText);
}
}
}

function handleServerResponseLogin()
{
// retrieve the server’s response packaged as an XML DOM object
var xmlResponse = xmlHttp.responseXML;
// catching potential errors with IE and Opera
if (!xmlResponse || !xmlResponse.documentElement)
throw(“Invalid XML structure:\n” + xmlHttp.responseText);
// catching potential errors with Firefox
var rootNodeName = xmlResponse.documentElement.nodeName;
if (rootNodeName == “parsererror”)
throw(“Invalid XML structure:\n” + xmlHttp.responseText);
// getting the root element (the document element)
xmlRoot = xmlResponse.documentElement;
// testing that we received the XML document we expect
if (rootNodeName != “response” || !xmlRoot.firstChild)
throw(“Invalid XML structure:\n” + xmlHttp.responseText);
// the value we need to display is the child of the root <response>
responseText = xmlRoot.firstChild.data;
// display the user message

if(responseText==”true”)
{
alert(“Usuario Correcto.”);
location.href=”index.html”;
}
else
alert(“Nombre de usuario y/o Password incorrectos.\nVuelva a intentarlo”);
}

Despues creamos el archivo PHP la cual hara la consulta a la base de datos para validar el usuario y password introducio por el usuario

<?php

require(“conexion.php”);
header(‘Content-Type: text/xml’); //Establecemos que php regrasara un documento XML

$usr = $_GET['usr'];  //obteemos el usuario introducio por el usuario en la pagina HTML
$pwd = $_GET['pwd'];//obteemos el pass introducio por el usuario en la pagina HTML

$query = “SELECT COUNT(*) FROM usuarios WHERE usuario=’$usr’ AND password=’$pwd’”;
$resQuery = mysql_query($query, $conexion);
$count = mysql_fetch_array($resQuery);
//echo $count[0];

$result;

if($count[0] == 0)
{
$result = “false”;
}
else
{
//Autenticacion del usuario correcta
$result = “true”;
}

$dom = new DOMDocument();
// create the root <response> element and add it to the document
$response = $dom->createElement(‘response’);
$dom->appendChild($response);
// add the calculated sqrt value as a text node child of <response>
$responseText = $dom->createTextNode($result);
$response->appendChild($responseText);
// build the XML structure in a string variable
$xmlString = $dom->saveXML();
// output the XML string
echo $xmlString;

?>

Y por ultimo creamos la pagina HTML que hara la llamada

<table align=”center”>
<tr >
<td >Usuario:</td>
<td  ><input type=”text” id=”usr”  width=”180″/>
</tr>
<tr >
<td>Password:</td>
<td ><input type=”password” id=”pwd”  width=”180″/></td>
</tr>
<tr >
<td></td>
<td align=”right”><input type=”button” value=”Iniciar Sesion” onclick=”processLogin()”/></td>
</tr>
</table>

Esto es necesario a veces cuando tu programa requiere realizar una tarea que se llevara un tiempo considerado en ejecutarse y no quieres que tu programa se quede colgado mientras se realiza dicha tarea, esto se soluciona utilizando el backGrounWorker.

Pasos a Seguir:

Antes que nada tenemos que añadir un componente BackGroundWorker, Componente ProgressBar y un Control Button. Seguido de lo anterior establecer la propiedad WorkerReportsProgess del BackGroundWorker en Verdadero(True).

Despues no iremos al evento DoWork este evento es el encarado de ejecutar la tarea asincronamente, en este evento programaremos una tarea que tiempo en ejecutarse.

private void backgroundWorker1_DoWork()
{
for (int i = 0; i < 100; i++)
{
System.Threading.Thread.Sleep(2000);
//indicamos al backGroundWorker el porcentaje realizado
// de la tarea
backgroundWorker1.ReportProgress(i);
}
}

En seguida escribiremos el siguiente codigo en el evento ProgressChanged:

private void backgroundWorker1_ProgressChanged(object sender, ProgressChangedEventArgs e)
{
//Actualiza el ProgressBar
progressBar1.Value = e.ProgressPercentage;
}

En el evento Click del Control Button escribimos el siguiente codigo que es el que inicia la tarea asicronamente

backgroundWorker1.RunWorkerAsync();

y Finalmente en el evento RunWorkerCompleted del BackGroundWorker escribiremos el siguiente codigo ke nos indicara que la tarea a terminado

private void backgroundWorker1_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
{
MessageBox.Show("Tarea Terminada");
}

Como veran es algo muy sencillo de utilizar pero de gran ayuda al realizar tareas que tardaran gran tiempo en ejecutarse.

http://sourceforge.net/projects/itextsharp/ despues de haber descargado la libreria la incluiremos como referencia a la pagina.

Despues importamos los espacios de nombres necesarios para generar los archivos PDF

using iTextSharp.text;
using iTextSharp.text.pdf;

Y ademas incluiremos el espacio de nombres
using System.IO;

Despues agregaremos un bontrol Button al Web Form el cual sera utulizado para ejecutar el codigo que generare el archivo PDF

En el evento click del boton incluiremos el siguiente codigo.

protected void Button1_Click(object sender, EventArgs e)
{
MemoryStream MStream = new MemoryStream();

Document document = new Document(PageSize.A4, 80, 50, 30, 65);
try
{
PdfWriter writer = PdfWriter.GetInstance(document, MStream);
document.Open();
//document.Add(new iTextSharp.text.Paragraph(“This is test and must work”));

Paragraph parrafo = new Paragraph(“Este es un ejemplo para crear archivos PDF con ASP .NET e iTextSharp\nDesarrollado por Heriberto Montoya Macario”);
document.Add(parrafo);

//Creamos una tabla con 3 columnas y 1 renglon
iTextSharp.text.Table tabla = new iTextSharp.text.Table(3, 2);
Phrase frase1 = new Phrase(“Heriberto”, new Font(2,10,0));
Phrase frase2 = new Phrase(“Montoya”, new Font(2, 10, 0));
Phrase frase3 = new Phrase(“Macario”, new Font(2, 10, 0));

Chunk chunk = new Chunk(“Hello world”, FontFactory.GetFont(FontFactory.COURIER, 20, Font.ITALIC, new Color(255, 0, 0)));

tabla.AddCell(frase1);
tabla.AddCell(frase2);
tabla.AddCell(frase3);

Cell cell = new Cell(chunk);
tabla.AddCell(cell);

document.Add(tabla);

document.Close();
}
catch (Exception Error)
{
throw Error;
}
HttpContext.Current.Response.Buffer = true;
HttpContext.Current.Response.ClearContent();
HttpContext.Current.Response.ClearHeaders();
HttpContext.Current.Response.ContentType = “application/pdf”;
HttpContext.Current.Response.AddHeader(“Content-Dispositio”, “attachment;filename=myPDFNew.pdf”);
HttpContext.Current.Response.BinaryWrite(MStream.GetBuffer());
HttpContext.Current.Response.End();
}

Para mayor informacion del manejo de esta estupenda libreria puede consultar la siguiente pagina:

http://itextsharp.sourceforge.net/tutorial/index.html

ASP .NET provee varios metodos usados por una aplicacion para auntenticar a un usuario que solicita el acceso a un recurso restringido estos metodos son:

* Windows
*Forms
*Passport
*None

Para este ejemplo el metodo que se utilizara sera el modo de autenticacion por Forma o Forms Authentication. Los usuarios se validan contra sus credenciales en una fuente de datos. Forms Authentication proporciona un mecanismo muy flexible de definir los diferentes tipos de usuarios y permisos.

Paso a Paso.

Lo primero que se debe hacer como es logico es crear un nuevo proyecto WEB para esto iremos al menu Archivo -> Nuevo -> Sitio web y seleccionamos la Opcion “Sitio Web ASP .NET”. Lo siguiente que se debera hacer es cambiar el nombre de WebForm que creaa por defualt Visual Studio “Default.aspx” por “Login.aspx”. Despues de haber cambiado el nombre del WebForm añadiremos un control “Login” del cuadro de herraminetas, despues de haber añadido el control Login lo convertiremos en una platilla.

Acontinuacion compilaremos nuestro Sitio web (F5) para que agrege el Archivo Web.config al momento de compilar aparecera un cuadro de dialogo donde preguntara si desea agregar el archivo Web.config:

Lo siguiente es cerrar la aplicacion web y despues abrir el archivo Web.confing desde el explorador de soluciones y a continuacion reemplazar el siguiente codigo:

<authentication mode=“Windows“/>

por el siguiente codigo:

<authentication mode=“Forms“>
<forms name=“.AuthenticationCookie” loginUrl=“Login.aspx” protection=“All” timeout=“60” path=“/“>
<credentials passwordFormat=“Clear“>
<user name=”beto0o” password=“123456“/>
<user name=”Tom” passworrd=“654321“/>
</credentials>
</forms>
</authentication>

Donde los tags  <user name=”beto0o” password=“123456“/> en la parte name sera el nombre de usuario con el que se logeara el usuario y password sera la contraseña del usuario.

El siguiente paso es escribir el codigo para validar al usuario que se desee logear en la pagina. Lo primero que debemos hacer es ir al evento Click del boton del control Login que anterior mente agregamos al WenForm y escribier el siguiente Codigo:

protected void LoginButton_Click(object sender, EventArgs e)
{
if (FormsAuthentication.Authenticate(Login1.UserName, Login1.Password))
{
Session["login"] = “true”;
Login1.FailureText = “Usuario Aceptado”;
Response.Redirect(“Default.aspx”);
}
else
{
Login1.FailureText = “Error al iniciar Sesion”;
}

}

Despues en el Evento Load del WebForm escribimos el siguiente codigo:

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Session["login"] = “false”;
}
}

Lo siguiente que se debe hacer es agregar un nuevo formulario web degar el nombre por default “Default.aspx”, despues agregar un control Label y en el evento Load del nuevo formulario escribir el siguiente codigo:

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string sesion = Convert.ToString(Session["login"]);
if (sesion == “true” )
Label1.Text = “Usuario Aceptado”;       }
else{
Label1.Text = “Esta pagina solo puede ser accedida por usuarios registrados”;
}
}

Una llamada asincrona a un servicio web es muy util porque al momento se hacer la llamada al servicio web desde nuestra aplicacion (en el caso de este ejemplo sera una aplicacion Windows) no se quedara colgada esperando la respuesta del servicio web. AL hacer una llamada asicncrona a un servicio web la aplicacion hace la peticion al servicio web y esta no se queda esperando la respuesta del servicio web si no que el control del programa vuelve a la aplicacion pudiendo efectuar otras tareas en la aplicacion mientras la respuesta del servicio web llegua a la aplicacion.

Paso a Paso

Lo primero que debemos hacer es crear nuestro Web Service con Visual Studio 2005. Nos vamos al menu Archivo ->Nuevo ->Sitio Web despues de aver hecho lo anterior en el cuadro de dialogo elegimos la opcion Servicio Web ASP .NET.

Una vez seleccionada la platilla para el servicio web, en ubucacion seleccionamos la opcion HTTP para que nuestro servico web se guarde dentro de nuestro IIS y despues seleccionar un nombre para el servicio web en nuestro caso se llamara http://localhost/WebService y en Lenguage seleccione el lenguage de su gusto en este caso usaremos C#.

Una vez creado el servicio web ponemos en comentarios el metodo “Hello World” del servicio web que tiene por default:

[WebMethod]
public string HelloWorld() {
return “Hola a todos”;
}

Una vez comentado quedar ade la siguiente Forma

//[WebMethod]
//public string HelloWorld() {
//   return “Hola a todos”;
//}

Una vez comentado el metodo “Hello World” creamos nuetro propio metodo para este ejemplo crearemos un metodo que reciva un parametro de tipo double y regrese el cuadrado de este. Lo primero que se debe de hacer para crear un metodo dentro de un servicio web es anteponer la sentencia: [WebMethod] lo que indica que el metodo siguiente es un metodo del servicio web.

[WebMethod]
public double Cuadrado(double val)
{
return Math.Pow(val, 2);
}

Lo siguiente que se debe hacer es compilar el servicio web (F5) pero en este caso como lo guardamos dentro de nuestro IIS lo compilamos con Ctrl+F5 una vez que haya creado copiamos las URL del servicio web en esta caso sera: “http://localhost/WebService/Service.asmx”.

Ya una vez creado nuestro sevivio web el siguiente pasa es crear nuestra aplicaion windows para consumir  el servicio web antes creado. para crear la aplicacion web nos vamos al menu Archivo->Nuevo->Proyecto y en el cuadro de dialogo escogemos la opcion “Aplicacion para Windows”.

Una vez creada la aplicacion para Windows agregamos una referencia web para asi hacer referencia al servicio web que antes creamos. Para agregar la referencia web hacemos click con boton derecho en el proyecto en el explorador de soluciones para este ejemplo se llamara “WindowsApplication1″ y elegimos la opcion Agregar referencia web:

Despues se abrira el siguiente cuadro de dialogo donde pegarmos la URL del servicio web que creamos anterior mente.

En la parte de Direccion URL pegaremos la direccion URL de nuestro web service, despues
daremos click en el boton “Ir”, una vez que demos click en “Ir” la caja de texto del nombre del servicio web y el boton “Agregar Referencia” se activaran para este ejemplo el nombre del servicio web lo dejaremos tal y como esta: “localhost” y finalemnte deremos click en “Agregar referencia”

El siguiente paso es agregar un control TextBox, Button y un Label en el formulario de nuestra aplicacion windows, seguido de esto en el codigo de la aplicacion importaremos nuestro servicio web haciendole un “using” en la parte del los “using’s”

using System.Windows.Forms; //codigo por defualt del Visual Studio
using WindowsApplication1.localhost; //Parte donde importamos el servicio web

Una vez importado el serviocio web en el evento Click del Button que agregamos al formulario agregamos el siguiente codigo:

private void button1_Click(object sender, EventArgs e)
{
//Creamos una instancia del servicio web
Service objService = new Service();

objService.CuadradoCompleted += new CuadradoCompletedEventHandler(objService_CuadradoCompleted);

//Llamada asincrona al servicio web
objService.CuadradoAsync(Convert.ToDouble(textBox1.Text));
}

Despues de agregar el codigo anterior al evento click del boton agregamos el siguiente metodo el cual.

void objService_CuadradoCompleted(object sender, CuadradoCompletedEventArgs e)
{
//Asignamos al control Label el resultado de la ejecucion del servicio web
label1.Text = “El cuadrado de ” + textBox1.Text + ” es: ” + Convert.ToString(e.Result);
}
y por ultimo ejecutar la aplicacion para verifcar el resultado

Cabe mencionar que los metodos del servicio web pueden ser mas complejos que los del ejemplo tal y como pueden ser como obtener datos de una base de datos etc.

Foto del ultimo dia de clases de toda la carrera en el TEC LAGUNA

Despues de haber creado el sitio web en el WebForm (Default.aspx) que crea por default Visual Studio

en el modo de codigo:

añadir el siguiente codigo entre los tags <div> </div>

<table>
<tr>
<td>
Selecciona la galería que deseas ver:<br />
<asp:DropDownList ID=”cboGallery” runat=”server”            AutoPostBack=”True”OnSelectedIndexChanged=”cboGallery_SelectedIndexChanged”>
</asp:DropDownList>
<asp:DataList ID=”dlsGallery” runat=”server” RepeatColumns=”5″>
<ItemTemplate>
<table>
<tr>
<td style=”border-style:solid; border-width:1px; width:150px; height:150px; text-                  align:center;”>
<a href=”Images/Gallery/<%#Eval(“GalleryID”)%>/<%#Eval(“FileName”)%>”                          target=”_blank”>
<asp:Image ID=”imgGallery” runat=”server” Height=”50px” Width=”50px”
ImageUrl=
‘<%#fnFilePath(DataBinder.Eval(Container.DataItem,”GalleryID”).ToString(),
DataBinder.Eval(Container.DataItem,”FileName”).ToString()) %>’ />
</a>
<p style=”text-align:center;”>
<a
href=”Images/Gallery/<%#Eval(“GalleryID”)%>/<%#Eval(“FileName”)%>” target=”_blank”>
<asp:Label ID=”lblFileDesc”
runat=”server”
Text=’<%#Eval(“FileDescription”)%>’></asp:Label>
</a>
</p>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList><br />
<asp:Label ID=”lblMessage” runat=”server” Text=”"></asp:Label>
</td>
</tr>
</table>

En modo diseño quedara algo parecido:

Importar los Siguientes espacios de nombres

using System.IO;

using System.Data;

Despues añadir el siguiente codigo dentro del archivo Default.aspx.cs:

//Dentro de la carpeta  Gallery añadir carpetas con las fotografias que se deseen mostrar

string varGalleryFolder = “C:\\inetpub\\wwwroot\\images\\Gallery”;

protected void GetFolders(string prmFolder)
{
try
{
if (Directory.Exists(prmFolder))
{
string[] arrFolders;
arrFolders = Directory.GetDirectories(prmFolder);
foreach (string dir in arrFolders)
{
ListItem lst = new ListItem(dir.Substring(prmFolder.Length + 1),
dir.Substring(prmFolder.Length + 1));
cboGallery.Items.Add(lst);
}
}
else
{
lblMessage.Text =
“No existe el directorio de imágenes”;
}
}
catch (Exception ex)
{
lblMessage.Text = ex.Message;
}
}

protected void GetFiles(string prmFolder)
{
try
{
string[] arrFiles;
arrFiles = Directory.GetFiles(prmFolder, “*.jpg”);
DataSet dsGallery = new DataSet(“dsGallery”);
DataTable taFile;
DataRow rwFile;
//DataColumn colFile;
taFile = dsGallery.Tables.Add(“Files”);
taFile.Columns.Add(“GalleryID”, varGalleryFolder.GetType());
taFile.Columns.Add(“FileName”, varGalleryFolder.GetType());
taFile.Columns.Add(“FileDescription”, varGalleryFolder.GetType());

foreach (string file in arrFiles)
{
//aqui llenamos el Dataset

rwFile = taFile.NewRow();
rwFile["GalleryID"] = prmFolder.Substring(varGalleryFolder.Length + 1); ;
rwFile["FileName"] = file.Substring(prmFolder.Length + 1);
rwFile["FileDescription"] = file.Substring(prmFolder.Length + 1);
taFile.Rows.Add(rwFile);
}

dlsGallery.DataSource = dsGallery.Tables["Files"];

if (dsGallery.Tables["Files"].Rows.Count == 0)
{
lblMessage.Text = “No se encontraron imágenes”;
}
else
{
lblMessage.Text = “Se encontraron “ +
dsGallery.Tables["Files"].Rows.Count.ToString() +” imágenes”;
}
dlsGallery.DataBind();
dsGallery.Dispose();
}
catch (Exception ex)
{
lblMessage.Text = ex.Message;
}
}

protected string fnFilePath(string prmPath, string prmFileName)
{
return (“imagenes/Gallery/” + prmPath + “/” + prmFileName);
}
//Evento Load del WebForm
protected void Page_Load(object sender, EventArgs e)
{
try
{
if (!Page.IsPostBack)
{
GetFolders(varGalleryFolder);
GetFiles(varGalleryFolder + “\\” + cboGallery.SelectedValue.ToString());
}
}
catch (Exception ex)
{
lblMessage.Text = ex.Message;
}
}

//Evento SelectedIndexChanged del DropDownList
protected void cboGallery_SelectedIndexChanged(object sender, EventArgs e)
{
GetFiles(varGalleryFolder + “\\” + cboGallery.SelectedValue.ToString());
}