Hola de nuevo! Esta vez, despues de mucho tiempo de inactividad, trabajando en el proyecto y estudiando, nos pusieron un reto: desarrollar una aplicacion web, paralelamente a nuestro proyecto. Como recien empezabamos, tenia que ser algo sencillo. Es por eso que creamos un pequeño blog. El blog se llama SaltaBlog, y contiene las funciones basicas de un blog normal y sencillo.

Aqui algunas capturas del trabajo final: (blog en proceso)

Y aqui esta el blog finalmente diseñado: (trabajo final)

Lo subimos a Azure! Lamentablemente, el periodo de prueba de Azure expiro , por lo que unicamente podemos mostrarles la maqueta de nuestro blog (descarga por MEDIAFIRE)

http://www.mediafire.com/?d3l8etgin4lovb2

Con este mini-proyecto no tuvimos que cambiar de diseño. Simplemente decidimos que este era el indicado y  empezamos a desarrollar.

Muchas gracias por pasar!

Primeros Avances

En el transcurso de la investigación, tuvimos que indagar sobre distintos temas y tecnologías. Podemos dividir los recursos que utilizamos en tres grupos:

     1. Recursos Online
     2. Libros
     3. Personas (referentes técnicos)

Recursos Online

Este recurso que nos resulta más que interesante, es el más práctico y podemos transmitir muy fácilmente el material de lectura:

• En la propuesta de investigación, nos propusimos como un deseable a tener la búsqueda de un segmento de la canción de reproducción actual mediante un ScrollBar para facilitar el uso al usuario. Para su resolución, nos parecieron interesantes los siguientes links:
o Slide Class
o Thumb Class

• También, buscamos el estilo de botones que usa Windows Phone 7, el cual coincide con el diseño de Zune. El problema que nos surgió fue que este celular permite al usuario poder elegir dos temas: el oscuro o el claro. El primero se caracteriza por tener un fondo negro y su primer plano blanco, mientras que el segundo tema utiliza lo contrario; por ende, si se tiene un botón con el icono blanco en su aplicación se verá bien en el tema oscuro. Sin embargo, en el tema claro, el botón se mezcla en su totalidad con el fondo impidiendo la visualización de este.

Para resolver este problema usamos las propiedades de Opacity Mask.

• Por otro lado, encontramos dos páginas muy útiles: La primera tiene códigos de ejemplo de Windows Phone 7 que nos han ayudado mucho. En cambio, la segunda tiene videos explicando distintos temas de esta tecnología. En particular, nos sirvió mucho el video que explica las diferencias entre los eventos Launched, Activated, Closed, y Deactivated y su implementación.

• Nos guiamos con un video, documentación y código ejemplo que explican y ejemplifican la utilización del acelerómetro en los dispositivos móviles.

• Uno de los temas que más nos demandó fue la conexión entre el Windows Phone 7 y la Computadora. Al principio creíamos que se lograría mediante Web Services, por lo tanto investigamos pero llegamos a la conclusión de que sería posible hacerlo de esa forma pero no es la mejor opción ya que precisamos dos end-points. Es decir, la aplicación del celular debe escuchar información de la computadora y a su vez emitir instrucciones a la aplicación servidor.
Finalmente luego de investigar un poco pudimos solucionar el problema a través de una comunicación Socket. En la primera versión del WP7, no se podía usar Sockets, pero a partir de la reciente versión (codename: “Mango”) ya se pueden utilizar.

Pequeño adelanto del sistema desarrollado utilizando esta funcionalidad: http://www.youtube.com/watch?v=bU35H81P8bU

• Otro punto del proyecto que hemos estado investigando fue el uso y manejo del Reproductor de Windows Media desde una aplicación externa, en este caso construida en C#.NET.
Para esto utilizamos APIs de Windows (Win32 APIs) para comunicarnos directamente con el Reproductor mediante el sistema operativo. Nos fue de mucha ayuda un artículo web de la página con ejemplos de aplicaciones OpenSource CodeProject.com.
Ejemplo de código usado en el botón Play/Pause:

Pequeño adelanto del sistema desarrollado utilizando esta funcionalidad: http://www.youtube.com/embed/ivjjYo3RjiY

Libros

Nos recomendaron un libro que nos ha sido de mucha ayuda para informarnos acerca del manejo interno de las aplicaciones, hardware y mejores prácticas de programación para Windows Phone 7; Windows Phone Developer Guide.

Personas

Tuvimos la suerte y el honor de poder contar con distintas personas con experiencia, ganas e iniciativa para ayudarnos a investigar, tomar decisiones e informarnos sobre distintos temas. Queríamos agradecerles especialmente por su interés y esfuerzo a Mariano Szklanny, Federico Boerr e Ignacio Raffa.

Muchas gracias,
nos estamos viendo pronto!
AbsolutX -

Hola Mundo! Nos queremos presentar, somos la célula AbsolutX. Somos un grupo de cuatro jóvenes universitarios con una gran iniciativa y ganas de participar del CodeCamp 2011 con un proyecto original, novedoso y que nos mantendrá ocupados durante los próximos meses. También contamos con el apoyo de un tutor con más experiencia en la materia para realizar constante feedback con el fin de mantener un desarrollo parejo. En la brevedad, nos estaremos reuniendo nuevamente para subir el progreso realizado y compartir nuestras experiencias.

Nuestro objetivo con todo esto es aprender más sobre las nuevas tecnologías de Microsoft como por ejemplo:

- C#

- Windows Azure

- Windows Phone 7

- Windows Communication Foundation

Entre otras...

Asi que... Manos a la obra!

Saludos! somos Salta.NET, una nueva célula formada hace poco menos de un mes. Nos dedicamos a indagar sobre temas de desarrollo web en ASP.NET y C#, principalmente. Nuestra célula está integrada por 2 personas. Patricio Pérez, Vice-Líder y yo, Guillermo Diéguez, líder de Salta.NET. Ambos tenemos 16 años y cursamos el penúltimo año de secundario actualmente.

Empezamos a interesarnos en el desarrollo web gracias a nuestra MSP, Ivana Tilca, que nos dió una charla sobre Expression Studio en el año 2010. Un profesor nuestro tuvo la “delicadeza” de invitarnos a asistir, porque era una charla para un curso más alto. Aceptamos, y recibimos el cartón con el código Dreamspark! Todo con la promesa de empezar a desarrollar usando software Microsoft. Mi compañero ya tenía conocimientos en programación en PHP, MySQL, Javascript, Python, CSS, HTML, Ajax, etc, etc, etc. Yo me sentía muy desubicado, ya que no entendía nada!

Por eso, guardé el código que Ivana me facilitó en mi armario, para futuro uso. Al año, con mi compañero tuvimos una idea, hacer una web que comunicase a los docentes con sus alumnos de una forma más didáctica, interesante, intuitiva, y la desarrollamos en PHP. Cuando estuvo lista (nos llevó como 4 meses por falta de ganas), decidimos subirla. Pasó otro mes más y no teníamos pensado nada más que nuestro proyecto.

Aquí es donde apareció Ivana de nuevo! Daban unas charlas en la Universidad Nacional de Salta, por conocido evento “RunWeb Camp”! Nos enteramos por la cadena de mails, y decidimos participar de las charla que pudiéramos, porque teníamos clase a la mañana.

Fuimos, nos reencontramos con Ivana, nos dió toda la ayuda que uno espera recibir al no saber nada de nada sobre ASP.NET, y nos motivó de la mejor forma, para que empezáramos con esto, que era algo nuevo para nosotros. El reto que nos propuso fue el de realizar la misma aplicación web que habíamos hecho en PHP, pero en ASP.NET. Ahí apareció Miguel Saez, para hablar con mi compañero, el programador principal de nuestra célula. Nos habló sobre Web Matrix, Visual Studio, etc etc, por lo que me incliné más al diseño, en lo que me ayudó Ivana.

Así empezó todo, y llegamos a formar la célula que ahora les escribe.

Próximamente, vamos a estar subiendo videos, fotos de nosotros, capturas de pantalla, nuestra idea principal y los problemas que nos fueron surgiendo. A medida que vayamos avanzando con nuestro proyecto, vamos a ir posteando toda la información que pueda serle de utilidad a otras células que les interese.

En esta serie de posts podrán aprender cómo hacer una aplicación web sencilla que se usa para gestionar una lista de películas favoritas.

Si quieren verlo directamente en inglés pueden hacerlo acá, pero para los que prefieren tener el contenido en nuestro idioma, esta es la lista de posts al respecto:

Parte 1: Proceso de instalación

Parte 2: Creando nuestra primera página

Parte 3: Demos un poco de estilo

Parte 4: Utilizando layout

Parte 5: Utilizando datos

Parte 6: Creando un formulario para agregar datos

Parte 7: Creando una página de edición de datos

Parte 8: Creando una página de borrado de datos

Parte 9: Publicando nuestro sitio

Esperamos que les sirva y cualquier pregunta que tengan, no duden en consultar.

Hasta el momento hemos creado una aplicación guiada por los datos que lista nuestras películas favoritas, le dimos un estilo, y le agregamos la funcionalidad para agregar películas y modificar las existentes en la base de datos. El próximo paso en la creación de esta aplicación es darle al usuario la posibilidad de borrar registros de la base de datos.

Deben haber escuchado el término ABM (CRUD en inglés) usado para referirse a aplicaciones web y los datos. ABM es la sigla para Alta, Baja y Modificación (CRUD: Create, Retrieve, Update, Delete), y es precisamente eso lo que estamos construyendo con WebMatrix.

Agregar la página de borrado

Para empezar, agregaremos una nueva página CSHTML y la llamaremos DeleteMovie.cshtml.

Reemplazaremos el código HTML en ella por el siguiente:

<h1>Delete a movie</h1>

<p>Are you sure you want to delete the movie <strong>@Movie.Name ?</strong></p>

<form action="" method="post">

    <input type="submit" value="Yes"/>

    <input type="button" value="No" onclick="window.location = 'dataMovies.cshtml'" />

</form>

Esto crea un formulario básico con 2 botones, un botón de tipo "submit" que dispara un HTTP POST (al igual que el de la página de edición del post anterior), y otro botón que nos redirecciona de vuelta a la lista de películas.

Al igual que la página EditMovies.cshtml, esta página será llamada con un parámetro que es el ID de la película a borrar. Así que, como se puede ver en el código anterior en "Are you sure you want to delete the movie @Movie.Name?" ("¿Está seguro que desea borrar la película @Movie.Name?") donde el valor de Movie.Name será insertado por el servidor. Por esto debemos decirle al servidor cómo obtener este valor:

Para hacer esto, como antes, ponemos código Razor al comienzo de la página para capturar el parámetro de entrada.

   1:  @{

   2:   

   3:  var id=Request["id"];

   4:   

   5:  var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

   6:   

   7:  var db = Database.Open("Movies");

   8:   

   9:  var Movie = db.QuerySingle(SQLSELECT,id);

  10:   

  11:  var MovieName=Movie.Name;

  12:   

  13:  }

  14:   

Here you can see that the parameter was passed to the page as 'id' (using DeleteMovie.cshtml?id=<whatever>), and this is used to find the specific movie. A query is run against the database, and the record for that movie is retrieved. Now you can derive the name of that movie, and render it when the page is rendered.

Aquí se puede ver que el parámetro se pasó a la página como "id" (usando DeleteMovie.cshtml?id=<algo>), y esto se utiliza para encontrar la película en particular. Se lanza una consulta a la base de datos y se trae el registro para esa película. Ahora podemos derivar el nombre de la película y renderizarlo cuando se renderiza la página.

Probémoslo, corramos la página DeleteMovie.cshtml?id=<algo>, y veremos la siguiente pantalla, siempre teniendo en cuenta que <algo> sea un ID válido en la base de datos:

Si presionamos el botón "No", seremos redireccionados de vuelta a la página dataMovies.cshtml. Si presionamos "Yes", no sucede nada, porque todavía no hemos escrito el código para manejar el borrado.

Para borrar un registro de la base de datos se usa el comando SQL DELETE. Tiene la siguiente sintaxis:

DELETE FROM <tabla> WHERE <campo>=<valor>

Así, si quisiéramos borrar la película con ID=2 podríamos escribir:

DELETE FROM Favorites WHERE ID=2

Cuando el usuario presiona el botón "Yes", el formulario será enviado y ocurrirá el borrado, así que fácilmente podemos hacer lo siguiente en el postback:

   1:  if(IsPost){

   2:   

   3:  var SQLDELETE = "DELETE FROM Favorites WHERE ID=@0";

   4:   

   5:  db.Execute(SQLDELETE,id);

   6:   

   7:  Response.Redirect("dataMovies.cshtml");

   8:   

   9:  }

  10:   

This will delete the movie, and redirect us back to the listing page so that we can see it's gone.

Esto borrará la película y nos redireccionará nuevamente a la página con el listado de películas en donde podemos ver que ya no existe.

Aquí está el código completo para la página DeleteMovie.cshtml:

   1:  @{

   2:   

   3:  var id=Request["id"];

   4:   

   5:  var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

   6:   

   7:  var db = Database.Open("Movies");

   8:   

   9:  var Movie = db.QuerySingle(SQLSELECT,id);

  10:   

  11:  var MovieName=Movie.Name;

  12:   

  13:  if(IsPost){

  14:   

  15:  var SQLDELETE = "DELETE FROM Favorites WHERE ID=@0";

  16:   

  17:  db.Execute(SQLDELETE,id);

  18:   

  19:  Response.Redirect("dataMovies.cshtml");

  20:   

  21:  }

  22:   

  23:  }

  24:   

  25:  <h1>Delete a movie</h1>

  26:   

  27:  <p>Are you sure you want to delete the movie <strong>@Movie.Name ?</strong></p>

  28:   

  29:  <form action="" method="post">

  30:   

  31:  <p><input type="submit" value="Yes"/>

  32:   

  33:  <input type="button" value="No" onclick="window.location = 'dataMovies.cshtml'" /></p>

  34:   

  35:  <br/>

  36:   

  37:  </form>

  38:   

Llamando a la página de borrado desde la lista de películas

Ahora que tenemos nuestra página de borrado funcionando, conectémosla con la página con el listado de películas para que el usuario pueda seleccionar un ítem de la lista y solicitar su borrado.

En la página del listado de películas simplemente tenemos que agregar un hipervínculo a cada entrada de la lista, donde el vínculo es a la página DeleteMovie.cshtml, pasándole el ID de la película seleccionada.

Aquí está en código completo para dataMovies.cshtml:

   1:  @{

   2:   

   3:  var db= Database.Open("Movies");

   4:   

   5:  var sqlQ = "SELECT * FROM Favorites";

   6:   

   7:  var data = db.Query(sqlQ);

   8:   

   9:  }

  10:   

  11:  <div id="movieslist">

  12:   

  13:  <ol>

  14:   

  15:  @foreach(var row in data){

  16:   

  17:  <li>

  18:   

  19:  <a href="EditMovie.cshtml?id=@row.id">@row.Name, @row.Genre, @row.ReleaseYear

  20:   

  21:  </a>

  22:   

  23:  <a href="DeleteMovie.cshtml?id=@row.id">Delete</a>

  24:   

  25:  </li>

  26:   

  27:  }

  28:   

  29:  </ol>

  30:   

  31:  <a href="AddMovie.cshtml">Add a new movie</a>

  32:   

  33:  </div>

  34:   

Ejecutamos la página para ver el flujo del borrado. Primero, aquií vemos la nueva página dataMovies.cshtml:

Si ahora seleccionamos el hipervínculo de borrado (delete) en cualquiera de las películas, seremos llevados a la página de "Borrar película", donde se nos preguntará si realmente queremos borrar la película de la lista:

Si presionamos "No", retornaremos al listado con la película todavía allí. Si decimos que sí, entonces retornaremos al listado, pero la película ya no se encontrará allí. Aquí está el resultado de decir "Si".

Hasta ahora hemos creado nuestra página de películas, le dimos estilo, la hicimos guiada por los datos, y luego creamos un formulario que se puede usar para agregar películas a la base de datos. El próximo paso será crear un formulario muy similar que usaremos para editar nuestra lista de películas existente.

Veamos entonces cómo se ve la aplicación hasta el momento:

Como se puede ver, tiene una lista de películas, con la posibilidad de agregar una nueva película a través del vínculo en la parte de abajo. Para obtener un efecto cuando se pasa por encima con el mouse hicimos que cada ítem de la lista de películas sea un hipervínculo, usando el tag <a>. Tiene sentido entonces que si quisiéramos editar una película usáramos este hipervínculo, así que vamos a seguir este proceso a continuación.

Crear la página de edición

Primero, crearemos una nueva página CSHTML en WebMatrix, y la llamaremos EditMovie.cshtml. Esta página eventualmente tendrá el formulario que se cargará con el detalle de la película seleccionada, y cuando se cambie este detalle, los cambios serán enviados de vuelta a la base de datos.

Por lo tanto, debemos reemplazar el contenido por defecto en EditMovie.cshtml por este formulario. Se va a ver muy similar al que se creó en el post anterior.

<h1>Edit a Movie</h1>

<form action="" method="post">

    <p>Name:<input type="text" name="formName" /></p>

    <p>Genre:<input type="text" name="formGenre" /></p>

    <p>Year:<input type="text" name="formYear" /></p>

    <p><input type="submit" value="Edit Movie" /></p>

</form>

Llamar a la página de edición desde el listado de películas

Bien, ya tenemos la base de nuestro formulario de edición. Pero, ¿cómo inicializamos el formulario con el contenido de la base de datos para la película seleccionada? Bien, primero tratemos de entender cómo hacer que esta página sepa qué película queremos editar, y para esto debemos volver a nuestra página dataMovies.cshtml.

Como podrán recordar, teníamos la lista de ítems escritos de la siguiente manera:

<li><a href="#">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

El hipervínculo no nos llevaba a ningún lado porque el href era solamente “#”. Así que hagamos que el hipervínculo nos lleve a EditMovie.cshtml, de la siguiente manera:

<li><a href="EditMovie.cshtml ">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

Fantástico, pero no importa cuál película seleccionemos, siempre va a llamar a EditMovie.cshtml, y esta página no va a tener idea de qué película estamos editando. Pero dataMovies.cshtml ya sabe qué película – porque la hemos seleccionado, así que podemos usar esto para pasar el ID de la película que hemos seleccionado a EditMovie.cshtml de esta manera:

EditMovie.cshtml?id=<algo>

Y como ya sabemos cuál es el ID de la fila actual (@row.id), podemos usar Razor para escribir el ID mientras escribimos la lista, por lo que cambiamos nuestro <li> para que se vea de la siguiente manera:

<li><a href="EditMovie.cshtml?id=@row.id">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

Ahora si miramos a dataMovies.cshtml vamos a obtener lo siguiente:

No se ve para nada diferente, pero miren qué sucede cuando miramos el código HTML de la página. Esta no es la página .cshtml que vemos en WebMatrix, sino el HTML que es generado por el servidor (a partir de las instrucciones en el cshtml), y enviado al navegador.

En Internet Explorer 9 se puede ver esto haciendo click derecho en cualquier lugar de la página y seleccionando “Ver código fuente”

   1:  <!DOCTYPE html>

   2:  <html lang="en">

   3:    <head>

   4:      <meta charset="utf-8" />

   5:      <title>My Favorite Movies</title>

   6:      <link rel="stylesheet" type="text/css" href="movies-html5.css" />

   7:    </head>

   8:   

   9:  <body>

  10:    <header>

  11:      <h1>A list of my Favorite Movies</h1>

  12:    </header>

  13:   

  14:    <div id="movieslist">

  15:    <ol>

  16:      <li><a href="EditMovie.cshtml?id=1">It&#39;s a wonderful life, Comedy, 1946</a></li>

  17:      <li><a href="EditMovie.cshtml?id=2">Lord of the Rings, Drama, 2001</a></li>

  18:      <li><a href="EditMovie.cshtml?id=3">The Fourth World, Anime, 2012</a></li>

  19:      <li><a href="EditMovie.cshtml?id=4">The Lion King, Family, 1994</a></li>

  20:      <li><a href="EditMovie.cshtml?id=5">Forrest Gump, Comedy, 1994</a></li>

  21:      <li><a href="EditMovie.cshtml?id=6">The Million Year Journey, Anime, 2014</a></li>

  22:    </ol>

  23:   

  24:    <a href="AddMovie.cshtml">Add a new movie</a>

  25:  </div>

  26:   

  27:    <footer>

  28:   

  29:      This site was built using Microsoft WebMatrix. 

  30:   

  31:      <a href="http://web.ms/webmatrix">Download it now.</a>

  32:   

  33:    </footer>

  34:   

  35:  </html>

  36:   

¿Ven cómo, cuando se creó la vista, el valor del ID para cada fila en particular fue escrito en el HTML? Ahora, cuando se carga EditMovie.cshtml, podemos tomar este ID y usarlo para encontrar el registro en el que estamos interesados.

Terminando la página de edición

Bien, volvamos a EditMovie.cshtml.

¿Se acuerdan que antes vimos que si ponemos una @{ al comienzo de la página, y escribíamos código adentro, entonces ese código se ejecutaría cuando la página se está cargando? Bien, ese es el lugar perfecto para poner el código para leer el ID que está en la URL de la página, y luego usarlo para traer el nombre, género y año de lanzamiento de esta película.

Cuando se llama a una página con la sintaxis que estamos utilizando (o sea NombreDeLaPagina.cshtml?<Parametro>=<Valor>), se puede averiguar el valor del parámetro usando el objeto Request. Así, por ejemplo, para EditMovie.cshtml?id=6, podemos usar el siguiente código:

var id=Request["id"];

Este código crea una variable local, llamada “id” y utiliza el valor del parámetro (también llamado “id”) para inicializarla. WebMatrix es suficientemente inteligente para darse cuenta que ambos IDs son diferentes basándose en el contexto en el que se los utiliza.

Ahora que tenemos el ID, podemos usarlo en una consulta SELECT de SQL para encontrar el registro de esa película.

   1:  var id=Request["id"];

   2:  var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

   3:  var db = Database.Open("Movies");

   4:  var Movie = db.QuerySingle(SQLSELECT,id);

   5:  var MovieName=Movie.Name;

   6:  var MovieGenre=Movie.Genre;

   7:  var MovieYear=Movie.ReleaseYear;

Bastante directo, ¿no? Decimos “Select * from Favorites where el campo ID sea igual al ID que pasamos como parámetro” y luego ejecutamos eso contra la base de datos. Como sólo queremos 1 registro, decimos db.QuerySingle para obtener un sólo registro.

Luego se ejecuta la consulta, y el Nombre (Name), Género (Genre) y Año de Lanzamiento (ReleaseYear) son cargados en variables locales.

Esto está todo bien, pero el problema es que los valores todavía están en las variables y no en el formulario. Así que ¿cómo hace el usuario para editarlos? Bien – la respuesta es simple – recuerden que este código se ejecuta antes que la página sea renderizada, así que tenemos las variables antes de que se escriba el código HTML. Y debido a esto, podemos inicializar el formulario con estos valores. El formulario usa campos <input> para mostrarnos campos de texto, y éstos soportan una propiedad “value”. Podemos ahora usar esto directamente con las variables para inicializarlas.

Éste es el código hasta ahora:

   1:  @{

   2:    var id=Request["id"];

   3:    var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

   4:    var db = Database.Open("Movies");

   5:    var Movie = db.QuerySingle(SQLSELECT,id);

   6:    var MovieName=Movie.Name;

   7:    var MovieGenre=Movie.Genre;

   8:    var MovieYear=Movie.ReleaseYear;

   9:  }

  10:   

  11:  <h1>Edit a Movie</h1>

  12:  <form action="" method="post">

  13:    <p>Name:<input type="text" name="formName" value="@MovieName" /></p>

  14:    <p>Genre:<input type="text" name="formGenre" value="@MovieGenre" /></p>

  15:    <p>Year:<input type="text" name="formYear" value="@MovieYear" /></p>

  16:    <p><input type="submit" value="Edit Movie" /></p>

  17:  </form>

  18:   

Ahora cuando la página se ejecute, van a ver que se inicializa con los valores de la película. Prueben ejecutando dataMovies.cshtml primero, de esta manera:

Luego seleccionen una película. Se puede ver en la imagen de arriba que se está seleccionando la tercera fila, y se está llamando a EditMovie.cshtml con un id de 3.

La página luego se carga y se ve como se muestra a continuación:

Pueden escribir en cualquiera de los campos de texto para cambiar cualquiera de los valores, pero cuando presionen “Edit Movie”, no pasa nada. Podrán recordar, de la página de Agregar Película del post anterior, que el botón desencadena un submit en el formulario, el cual es un HTTP POST (en oposición al HTTP GET que ocurrió cuando la página se llamó desde el hipervínculo), el cual debe ser procesado.

La forma de hacer esto anteriormente fue usar un bloque de código if(IsPost), así que vamos a hacer lo mismo aquí:

   1:  if(IsPost){

   2:    MovieName=Request["formName"];

   3:    MovieGenre=Request["formGenre"];

   4:    MovieYear=Request["formYear"];

   5:  }

   6:   

El formulario utiliza los valores formName, formGenre y formYear para los valores del Nombre, Género y Año de lanzamiento. Estos se pasan en el objeto Request. Si el usuario ha editado los mismos de alguna manera, los nuevos valores van a estar allí, así que podemos actualizar la base de datos con ellos.

Para actualizar la base de datos usamos el comando SQL “UPDATE” que tiene la siguiente sintaxis:

UPDATE tabla SET columna = valor, columna = valor, columna = valor… WHERE clave=valor

Así que, en nuestro caso, tenemos 3 columnas que estamos actualizando para el Id que ya conocemos, así que aquí está el código para crear la consulta y ejecutarla:

   1:  var SQLUPDATE = "UPDATE Favorites Set Name=@0, Genre=@1, ReleaseYear=@2 WHERE id=@3";

   2:  db.Execute(SQLUPDATE, MovieName, MovieGenre, MovieYear,id);

Esto usa parámetros en SQL (@0, @1, etc., que no hay que confundir con la “@” que marca el comienzxo de un bloque Razor) para que el SQL sea más fácil de leer. Sólo recuerden que los valores @ son reemplazados, en orden, con los valores dentro del código db.Execute(), por lo que, en este caso, MovieName es @0, MovieGenre es @1, etc.

Finalmente, una vez que la película fue editada, es una buena idea redireccionar nuevamente a la página de la lista para que podamos ver los resultados de la edición, actualizados dinámicamente. Hicimos lo mismo en la página de agregar película. Aquí está el código:

Response.Redirect("dataMovies.cshtml");

Y para su conveniencia, aquí está el código completo para la página EditMovies.cshtml:

   1:  @{

   2:      var id=Request["id"];

   3:      var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

   4:      var db = Database.Open("Movies");

   5:      var Movie = db.QuerySingle(SQLSELECT,id);

   6:      var MovieName=Movie.Name;

   7:      var MovieGenre=Movie.Genre;

   8:      var MovieYear=Movie.ReleaseYear;

   9:   

  10:      if(IsPost){

  11:        MovieName=Request["formName"];

  12:        MovieGenre=Request["formGenre"];

  13:        MovieYear=Request["formYear"];

  14:        var SQLUPDATE = "UPDATE Favorites Set Name=@0, Genre=@1, ReleaseYear=@2 WHERE id=@3";

  15:        db.Execute(SQLUPDATE, MovieName, MovieGenre, MovieYear,id);

  16:        Response.Redirect("dataMovies.cshtml");

  17:      }

  18:  }

  19:   

  20:  <h1>Edit a Movie</h1>

  21:    <form action="" method="post">

  22:      <p>Name:<input type="text" name="formName" value="@MovieName" /></p>

  23:      <p>Genre:<input type="text" name="formGenre" value="@MovieGenre" /></p>

  24:      <p>Year:<input type="text" name="formYear" value="@MovieYear" /></p>

  25:      <p><input type="submit" value="Edit Movie" /></p>

  26:    </form>

Así que ahora podemos ver qué pasa cuando la ejecutamos. Asumiendo que comenzaron con la página dataMovies.cshtml, y seleccionaron para editar alguna de las películas, deberían ver esto:

Si ahora editan el valor de “Year” de 2012 a 2011, y presionan el botón “Edit Movie”, la base de datos se actualizará, y serán redireccionados a la página de la lista, donde ahora podrán ver que el año de lanzamiento es 2011.

Con esto habrán editado exitosamente un registro de la base de datos!!

Hasta ahora hemos visto cómo crear un sitio web en WebMatrix, y cómo utilizar el estilo y el diseño para hacer las páginas más livianas y fáciles de mantener, así como más rápidas de cargar para el navegador. Estas páginas están creadas para mostrar datos, y ahora aprenderemos como hacer páginas para insertar información en la base de datos.

Crear y vincular una página de carga de datos

Usando WebMatrix, en el área de archivos, crear una nueva página y llamarla 'AddData.cshtml. (Mantendremos la nomenclatura en inglés para el nombre de archivos y variables en este tutorial.)

Borrar el contenido predeterminado de la página que se creó para usted por WebMatrix, y sustituirlo por

<h1>Add a New Movie to the database</h1>

Ahora regresar a 'dataMovies.cshtml'. Abrirlo, y deberá verse algo como esto:

@{

    var db= Database.Open("Movies");

    var sqlQ = "SELECT * FROM Favorites";

    var data = db.Query(sqlQ);   

}

<div id="movieslist">

  <ol>

    @foreach(var row in data){

      <li><a href="#">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

    }

  </ol>

</div>

Antes de la </ div> de cierre, añadimos la siguiente línea de código HTML (Para crear un hipervínculo)

<a href="AddMovie.cshtml">Add a new movie</a>

Ejecute el sitio y vea la página en el navegador. Veremos algo como esto:

Click en "Añadir una nueva película” y veremos la página que se creó anteriormente.

No hay mucho que ver todavía. Vamos a añadir algo en el próximo paso.

Como ejercicio adicional, quizá hayas notado que el texto "Añadir una nueva película a la base de datos” tiene un estilo diferente del resto. Es un <h1>, pero no se ha mostrado la misma manera que la cabecera h1. A ver si podemos arreglar eso! (Una pista, la cabecera h1 pareciera ser un hijo de la etiqueta <header>, pero esto no es así. ¿Qué le agregarías al archivo CSS para el estilo de esta misma manera?)

Creación de un formulario “Añadir Película”

Normalmente a través de HTTP el navegador hace solicitudes al servidor usando el verbo GET del protocolo HTTP, que, como su nombre indica, obtiene información del servidor. Hemos estado haciendo esto todo el tiempo, porque el uso de GET está implícito en las páginas en forma de peticiones de servidor. El protocolo HTTP también es compatible con una variable llamada POST, que le permite enviar información al servidor.

Es bueno tener una aplicación dinámica que muestre información de una base de datos, pero el siguiente paso lógico sería enviar datos al servidor, que el servidor haga algo con los datos, y luego devolver el resultado. Como cuando vemos sitios donde se escribe algo de información y pulse el botón Enviar para enviar esa información al servidor.

Para esto se utilizan formularios HTML. Al hacer clic en Enviar, el navegador envía la información en los campos del formulario al servidor mediante el POST. Una vez más, todo esto sucede “por detrás” y por defecto, no necesitamos hacer nada especial para usarlo, pero es útil para el código en el servidor saber qué tipo de acción una solicitud está utilizando, para responder en consecuencia. Veamos cómo hacerlo para añadir películas a tu base de datos.

Empezaremos con una forma muy sencilla. No es muy bonito, pero hace el trabajo (Ya vamos a ver cómo hacerlo bien “Pro” usando CSS).

   1:  <h1>Add a New Movie to the Database</h1>

   2:    <form action="" method="post">

   3:      <p>Name:<input type="text" name="formName" /></p>

   4:      <p>Genre:<input type="text" name="formGenre" /></p>

   5:      <p>Year:<input type="text" name="formYear" /></p>

   6:      <p><input type="submit" value="Add Movie" /></p>

   7:  </form>

Así es como se verá. Como dijimos, no es muy bonito, pero más tarde vamos a crear un CSS para que se vea genial.

Ahora echemos un vistazo al HTML que acabamos de escribir para crear este form.

<form action="" method="post">

Lo primero es la nueva etiqueta <form>. Esto define el form, y le dice al servidor que cuando el usuario presiona el botón <Enviar>, que debe estar presente en dicho form, la acción será un HTTP POST. En virtud del hecho de que el parámetro de acción está vacía, esta misma página (es decir, AddMove.cshtml) procesará el mensaje del form.

<p>Name:<input type="text" name="formName" /></p>

<p>Genre:<input type="text" name="formGenre" /></p>

<p>Year:<input type="text" name="formYear" /></p>

Dentro de la etiqueta <form> verás que hay tres controles <input>. Estos utilizan la <input> control de HTML, que puede tener un número de ajustes de tipo, y en este caso el tipo es "texto", que muestra un cuadro de texto básico donde el usuario puede introducir texto. Cada una recibe un nombre que será la variable que utiliza el servidor para almacenar el valor que el usuario entra en el cuadro de texto antes de enviarlo.

<p><input type="submit" value="Add Movie" /></p>

Por último, tenemos un control <input> con el tipo 'submit' que define el botón de enviar. Cuando el usuario pulsa este botón, la acción HTTP POST será llamada y los datos que el usuario haya introducido se envían al servidor.

En este momento si pulsa el botón, no pasará nada porque aún no hemos escrito el código para controlar la devolución de datos desde el servido. Ahora nos encargaremos de este punto.

Manipulación de los datos del formulario

Cuando creamos el formulario, el parámetro de acción quedó intencionalmente vacío, lo que significa que está especificando que es esta misma la página que recibirá la información del formulario y hará “algo” con esta información.

Vamos a agregar un bloque de código que se ejecute cuando cargamos la página. Para ello, escribimos el siguiente código al principio de la página:

   1:  @{

   2:    // Code to execute

   3:  }

   4:   

   5:  <h1>Add a New Movie to the Database</h1>

   6:  <form action="" method="post">

   7:    <p>Name:<input type="text" name="formName" /></p>

   8:    <p>Genre:<input type="text" name="formGenre" /></p>

   9:    <p>Year:<input type="text" name="formYear" /></p>

  10:    <p><input type="submit" value="Add Movie" /></p>

  11:  </form>

  12:   

Anteriormente, vimos que la primera vez que se llamó a la página, escribiendo su dirección en su navegador (o haciendo clic en Ejecutar para iniciar la web), el navegador solicitó las páginas utilizando el verbo HTTP GET. Más tarde, cuando se pulsa el botón Enviar, como la propiedad de “action” estaba en blanco, la operación HTTP POST llamó a su misma página.

Así, en el código, tendrá que saber una manera de entender es la página que se recupera mediante un GET o está siendo ejecutado mediante un POST. Afortunadamente, el propio Framework permite comprobar el verbo sin entrar en la complejidad de romper los encabezados HTTP para inspeccionar qué tipo de mensaje que está recibiendo, sólo hay que utilizar if(IsPost), cuando devuelve true, significa que el usuario ha utilizado un formulario para enviar la información.

   1:  @{

   2:    If(IsPost)

   3:    {

   4:      // Do something on the POST

   5:    }

   6:  }

   7:   

Cuando el navegador haga un request, se estará enviando un mensaje que contiene "FormName = algo ',' formGenre = algo ',' formYear = algo" y así sucesivamente.

Así, primero tendrá que establecer algunas variables de servidor para guardar estos datos y entonces podremos leer el mensaje HTTP. Esto es mucho más fácil de lo que parece :)

   1:  @{

   2:    var MovieName="";

   3:    var MovieGenre="";

   4:    var MovieYear="";

   5:    if(IsPost){

   6:      MovieName=Request["formName"];

   7:      MovieGenre=Request["formGenre"];

   8:      MovieYear=Request["formYear"];

   9:    }

  10:  }

Aquí se puede ver que se han creado tres variables (MovieName, MovieGenre y MovieYear) y se inicializan con los valores que el usuario envía. En el siguiente paso vamos a añadir el código para abrir la base de datos y agregar esta información.

Agregando a la base de datos

En el artículo anterior, cuando se tomaron los datos de la base de datos, se utilizó 'SELECT' en la consulta SQL que selecciona los datos de la base de datos para poder leerlos. Ahora vamos a usar ‘INSERT’ para insertarlos

El comando INSERT de SQL utiliza la sintaxis siguiente

INSERT INTO tabla (columna 1, Columna2, ... ColumnaN) VALUES (valor1, valor2, ... valorN)

Veamos cómo utilizar INSERT en nuestro código:

   1:  @{

   2:  var MovieName="";

   3:  var MovieGenre="";

   4:  var MovieYear="";

   5:    if(IsPost){

   6:      MovieName=Request["formName"];

   7:      MovieGenre=Request["formGenre"];

   8:      MovieYear=Request["formYear"];

   9:      var SQLINSERT = "INSERT INTO Favorites (Name, Genre, ReleaseYear) VALUES (@1, @2, @3)";

  10:      var db = Database.Open("Movies");

  11:      db.Execute(SQLINSERT, MovieName, MovieGenre, MovieYear);

  12:    }

  13:  }

Se puede ver que creamos una cadena SQLINSERT para mantener el orden. Usando ‘Razor’ podemos especificar los valores de parámetros de esta cadena, así que en vez de tratar de sumar los valores de 'moviename', 'MovieGenre' y 'MovieYear', a la cadena, simplemente usamos @ 1, @ 2 y 3 @. Cuando se ejecuta la consulta, el framework se encarga de “limpiar” los datos de caracteres no admitidos. Esto evita que la gente pase código SQL como un parámetro, en un ataque llamado "inyección de SQL”.

A continuación se abre la base de datos, y luego se llama al método de ejecución en la base de datos para decirle que para ejecutar esta consulta de inserción. Los valores se sustituyen en @1, @2…, y se agregan a la base de datos.

Vamos a añadir una línea más después de la DB.Execute (), que redirige al usuario a la página donde pueden ver las películas favoritas, y pueden ver los resultados de lo que acaba de agregar.

Response.Redirect ("dataMovies.cshtml");

Ahora que podemos ejecutar la página y vemos el form agreguemos algunos datos:

Pulsamos el botón "Añadir película”. El servidor agrega los datos a la base de datos y a continuación nos re direccionará de nuevo a la lista para ver los resultados, y se puede ver que nuestra película favorita se ha agregado!

Importante: En este artículo hemos visto cómo tomar la entrada del usuario y añadirlo directamente a la base de datos lo cual ya está bastante bien, pero antes de implementar un esto en “el mundo real”, hay que acordarse de hacer lo siguiente

- Comprobar los parámetros de entrada de datos válidos, y proporcionar al usuario información precisa sobre lo que han introducido de forma incorrecta. Por ejemplo, si no se introduce un 'Año' que parezca válido, debe informarse, en lugar de permitir que la información llegue al a base de datos.

- Comprobar los parámetros de entrada para valores que puedan ser utilizados por un pirata infame para dañar su base de datos. Un ataque común se llama inyección SQL donde el usuario envía un comando SQL en un formulario, y el código en el servidor lo ejecuta, lo que podría dañar o exponer datos privados.

Pueden aprender más detalles sobre el uso de bases de datos en WebMatrix en el post anterior.

Hola a todos!

Mi nombre es Rodrigo, soy estudiante en la Universidad Catolica de Salta y soy lider de la célula academica "The Legacy STC". Somos una cèlula pequeña, ya que actualmente somos tres..pero aún asi tratamos de avanzar con nuestros objetivos. Hasta hace poco contabamos nuestros avances en un blog: www.thelegacystc.blogspot.com     en el cual pueden ver cada uno de nuestros proyectos e intereses.

Hoy les vengo a presentar  al proyecto que estamos desarrollando con los muchachos de la célula; se trata de un Sistema Operacional y Administrativo de Aerolínea, al cual lo hemos denominado SOAA-AIR.

SOAA AIR es un sistema informático  dirigido específicamente a la prestación de servicios  correspondiente a los ofrecidos en las líneas aéreas a nivel operacional y administrativo. El proyecto los estamos realizando en etapas permitiendo un mayor análisis de las situaciones, mejoras en la codificación de la solución y en la prueba del sistema desarrollado.

El sistema lo hemos pensado de tal forma de que pueda cumplir las siguientes caracteristicas:

*Gestión y control de usuarios a través de perfiles:
Todos los usuarios tendrán un perfil online al cual podrán tener acceso de una manera segura, para conocer promociones, leer comentarios de otros viajeros y ver sugerencias para facilitar la organización del viaje. A su vez los operadores y administradores podrán tener acceso a los perfiles a fin de controlar y administrar las acciones de los usuarios.
 *Control de tickets:
Permite controlar la emisión de ticketsa través de un software  controlado por los operadores.  Este software tiene la facilidad de controlar tanto los pedidos que los usuarios realicen online como los pedidos realizados en las boleterías. Evitando de esta manera las largas colas y el tiempo perdido en ventanilla, y aún más, evita la disconformidad del cliente al tener que esperar un largo tiempo para ser atendido.
*Administración de asientos:
Consta de un software controlado por los administradores a fin de que el cliente pueda elegir el asiento en elcual viajará, así como también la confirmación y anulación de las reservas. Además todos los pasajeros serán asistidos por profesionales para aclarar las dudas que no puedan aclarar por si solos.
*Servicios Online:
Los usuarios podrán realizar desde su perfil personal, consultas y opiniones a otros usuarios que se encuentren en ese momento online, pudiendo saber cuál es su opinión respecto al servicio de vuelo y muchas cosas más. Además tendrán la posibilidad de reservar pasajes, imprimir tickets, seleccionarsu asiento, consultar disponibilidad de lugar,  seleccionar promociones, informarse acerca del viaje y rastrear su equipaje para estar seguros de que sus cosas están en buenas manos.
*Organización de acuerdo a categorías o paquetes:
Los usuarios estarán organizados enuna de las siguientes categorías:                           
 Administradores, Operadores y Pasajeros. A su vez los pasajeros estarán clasificados de acuerdo a los paquetes contratados.

Por ahora hemos usado como herramientas a Expression Blend, Visual Basic .Net y a SQL Server.

El Proyecto no esta terminado, avanzamos bastante en el mismo..pero aún quedan varias cosas por mejorar.

Por ultimo les dejo un video que realizamos sobre el prototipo del sistema, y la publicidad que realizo uno de los miembro de la célula para el proyecto:

  http://www.youtube.com/watch?v=tR_KgWtVnuc

  http://www.youtube.com/watch?v=NA-1zIIeBn4

Un poco tarde pero acá les cuento mi historia, el programa académico lo conocí gracias a mi profesor de programación III Matías Iacono cuando cursaba la tecnicatura en programación en la Facultad Tecnológica Nacional Regional Córdoba en 2008, después de cansarlo con preguntas de todo tipo nos comento a mí y a algunos amigos la existencia de el programa académico, y las posibilidades que este nos brindaba para aprender sobre la tecnología que nos interesara.

En un principio estábamos indecisos sobre la tecnología a estudiar, pero después de ver algunos juegos que Matías había hecho con C#  nos encanto la idea. Desde ese momento nos interesamos por el desarrollo de video juegos, aunque no habíamos visto una tecnología en particular comenzamos con GDI, hasta que dimos con XNA.

A pesar de tener que comprarme un PC nueva, XNA fue la herramienta con la cual mejoramos como desarrolladores, sin importar la tecnología que usáramos aprendimos un montón.

Desde entonces como célula nos enfocamos a la investigación de XNA y al desarrollo de video juegos, siendo esto lo que nos dio la posibilidad viajar a Bs As para el CodeCamp. Hasta la fecha hemos participados en diversos eventos referidos a Video juegos, lo cual nos permitió al día de la Fecha llegar a ser MSP

Ese soy yo :D