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.
Subscribe