Una parte importante de todas las aplicaciones web son los formularios. Donde se le permite al usuario enviar información al servidor. En nuestro caso, el formulario más importante es el que le permite a un usuario enviar un nuevo tweet.

Un ejemplo de formulario en play sería el siguiente:

vista

1
2
3
4
<form action=“@{Controlador.action}”>
    <input type=“text” name=“parametro”>
    <input type=“submit”>
</form>   

controlador

1
2
3
4
5
6
7
8
9
package controllers;


import play.mvc.*;

public class Controlador extends Controller {
    public static void action(String parametro){
        //parametro valdrá lo que envie el usuario
    }
}

Play se encarga automáticamente de convertir los parámetros que envíe el usuario, a parámetros de nuestra acción.

Consideraciones de seguridad

Play viene con ayudas para hacer tu página más segura. Uno de los ataques que te puede ayudar a resolver son los Cross-Site Request Forgery(CSRF).

Para evitar este tipo de ataque lo que nos hace falta es trabajar con un authenticityToken. Será un parámetro que añadiremos a nuestros formularios y que comprobaremos en nuestras acciones. De esta forma evitamos, que un link no generado por nosotros mismo intente enviar el formulario.

vista

1
2
3
4
<form method=“post” action=“/account/destroy”>
    #{authenticityToken /}
    <input type=“submit” value=“destroy my account”>
</form>

El tag #{authenticityToken} añade un parámetro oculto a nuestro formulario con el token.

controlador

1
2
3
4
public static destroyMyAccount() {
    checkAuthenticity();
    …
}

El método checkAuthenticityToken comprueba que el token es correcto. Debes recordar ponerlo en todas las acciones que recibas parámetros de formularios.

Para simplicar la vista. Play trae el tag #{form}, que crea un formulario html con el authenticityToken integrado

vista

1
2
3
#{form @destroyMyAccount()}
    <input type=“submit” value=“destroy my account”>


{/form}

Ejercicio

Añadir un formulario en el Timeline para permitirle al usuario enviar un nuevo tweet.

• Añade a la vista el formulario para enviar el contenido del tweet. Utilizando el tag #{form}
• Utiliza los estilos de Twitter Bootstrap para el aspecto del formulario
• Añade un método en el controlador que reciba el texto y cree un nuevo tweet. Asegúrate de asignarle el autor adecuado. Después de guardar el tweet, debe redirigir otra vez a la página principal.
• No te olvides de llamar al método checkAuthenticityToken()
• Añade una ruta de tipo POST en el fichero de rutas
• Prueba a enviar tweets con distintos usuarios
• Prueba que la página de estadísticas actualiza con los nuevos tweets

Solución

apps/views/Timeline/index.html

1
2
3
4
5
6
#{form @Timeline.create()}
    <div class=“clearfix”>
        <textarea class=“xxlarge” name=“tweet” rows=“3”></textarea>
    </div>
    <input type=“submit” class=“btn primary” value=“Tweet”>


{/form}

app/controllers/Timeline.java

1
2
3
4
5
6
public static void create(String tweet){
    checkAuthenticity();
    Tweet t = new Tweet(tweet, Security.userConnected());
    t.save();
    index();
}

conf/routes

POST    /create                                 Timeline.create