Mojolicious Tutorial

Using forms

Use forms to receive data from users. Learn how to use forms.

Simple form

First, let's create a simple form. Let's create a program that receives and displays values ​​by asking them to enter values ​​in text boxes, radio buttons, and text areas. 

use Mojolicious::Lite;

# top page
get'/' => sub {
  my $self = shift;
  
  $self->render('index');
};;

#Receive and process data
post'/' => sub {
  my $self = shift;
  
  #Get parameters
  my $name = $self->param('name');
  my $private = $self->param('private');
  my $message = $self->param('message');

  # Display the top page if there is no message
  unless (length $message) {
    $self->render('index', error =>'Message is empty');
    return;
  }
  #Save to flash
  $self->flash(name => $name);
  $self->flash(private => $private);
  $self->flash(message => $message);
  
  $self->redirect_to('/');
};;

app->start;

__DATA__

@@index.html.ep
<%
  my $error = stash ('error');
%>

%if ($error) {
  <div style = "color: red">
    <%= $error%>
  </div>
%}

<form action = "<%= url_for%>" method = "post" style = "border: 1px solid gray">
  <b> Form </b> <br>
  <b> Name: </b> <%= text_field'name'%> <br>
  <b> Private: </b> Yes <%= radio_button private => 1%> / No <%= radio_button private => 0, checked =>'checked'%> <br>
  <b> Message: </b> <br>
  <%= text_area'message', style => "width: 400px; height: 100px"%> <br>
  <input type = "submit" value = "Post">
</form>

<div>
  <b> Name </b>: <%= flash ('name') //''%> <br>
  <b> Private </b>: <%= flash ('private') //''%> <br>
  <b> Message </b>: <%= flash ('message') //''%>
</div>

Run this program, enter a value in the form and press the Post button to see what you have entered on the screen. The bottom part of the screen should look like this: 

Name: kimoto
Private: 0
Message: Hello

This program is a sample program. The data normally received from the user is stored in the database. I haven't explained about the database yet, so I'm using a program that displays the data as it is without saving it.

I will explain each part of the program. 

# top page
get'/' => sub {
  my $self = shift;
  
  $self->render('index');
};;

This is a description of the routing that displays the top page. The description is as usual. Write the form on this page.

Form description

The form looks like this: 

<form action = "<%= url_for%>" method = "post" style = "border: 1px solid gray">
  <b> Form </b> <br>
  <b> Name: </b> <%= text_field'name'%> <br>
  <b> Private: </b> Yes <%= radio_button private => 1%> / No <%= radio_button private => 0, checked =>'checked'%> <br>
  <b> Message: </b> <br>
  <%= text_area'message', style => "width: 400px; height: 100px"%> <br>
  <input type = "submit" value = "Post">
</form>

There are attributes action , method and style in the form tag. The style attribute sets the stylesheet and sets the frame that surrounds the form.

When submitting data in a form, you typically specify post for method. If you specify post, you can send even the largest amount of data. If get is specified, the form value will be sent as a query string in the URL, but if post is specified, it will be written in a part called the HTTP body and sent.

For action, specify the URL to process. This time I used the same URL. It is easy to keep the same URL.

I use the text_field helper, radio_button helper, and text_area helper where I use the parts of the form. 

  <b> Name: </b> <%= text_field'name'%> <br>
  <b> Private: </b> Yes <%= radio_button private => 1%> / No <%= radio_button private => 0%> <br>
  <b> Message: </b> <br>
  <%= text_area'message', style => "width: 400px; height: 100px"%> <br>

These are called tag helpers. See "List of Mojolicious Tag Helpers" for available tag helpers.

The tag helper expands to the actual tag, such as: 

<form action = "/" method = "post" style = "border: 1px solid gray">
  <b> Form </b> <br>
  <b> Name: </b> <input name = "name" type = "text" /> <br>
  <b> Private: </b> Yes <input name = "private" type = "radio" value = "1" /> / No <input name = "private" type = "radio" value = "0" /> <br>
  <b> Message: </b> <br>
  <textarea name = "message" style = "width: 400px; height: 100px"> </textarea> <br>
  <input type = "submit" value = "Post">
</form>

The main reason why tag helpers are useful is that they restore the form's values ​​even after you submit the form.

This time, if no message is entered, an error message is displayed, but even in that case, the value of the form is saved.

Form processing

Next is the part that processes the form. In the form, I specified post as method. This request can be received using the post function. 

#Receive and process data
post'/' => sub {...};

Let's take a look at the process. First, it receives the value passed from the form as a parameter. The param method can receive a value, whether it is an HTTP GET method or a POST method. 

#Get parameters
my $name = $self->param('name');
my $private = $self->param('private');
my $message = $self->param('message');

If there is no message next, the process is in error. Draw the index by setting a value of stash error. If you want to exit the process in the middle, return return. 

  # Display the top page if there is no message
  unless (length $message) {
    $self->render('index', error =>'Message is empty');
    return;
  }

Originally, the data is saved in the database etc., but this time I have not written about the database processing yet, so I save it in the flash.

Flash is data stored on the client side and is stored until the next screen transition. You can set and get it with the flash method. We'll talk more about flash when we talk about sessions. 

  #Save to flash
  $self->flash(name => $name);
  $self->flash(private => $private);
  $self->flash(message => $message);

Finally, redirect to display the first page. 

  $self->redirect_to('/');

You can use the form in this way to receive the user's data.

Associated Information

Perl Club