Perl Web App Development Tutorial

Creating a membership registration form

Create a membership registration form. In the introduction to Web system development, we will explain how to implement member registration where the email address becomes the user ID.

Member registration user information

The minimum required items for membership registration are as follows.

  • Email address
  • password

Your email address will be your user ID to uniquely identify you. The email address will be used for user authentication. Since it can be assumed that the user's email address can only be received by the user himself / herself, it can be used for user authentication.

Creating a membership registration form

Let's create a membership registration form. Create it in "templates / signup.html.ep". 

<div class = "signup">
  <form action = "<%= url_for%>" method = "POST">
    <div class = "signup-title"> Create a new account </div>
    <%= text_field'mail', placeholder =>'email address'%>
    <%= password_field'password', placeholder =>'password'%>
    <%= submit_button'Account registration'%>
    <%= hidden_field'op'=>'register'%>
  </form>
</div>

Tag helper

"Text_field" and "password_field" are Mojolicious tag helpers. text_field is useful because it automatically restores the value to the form. For example, if the content of the form is incorrect, the same screen will be displayed, but at this time, the value will be restored automatically.

action url_for method

If you don't give an argument to url_for method, it will return the current URL. In the POST processing of the current URL, the subsequent processing will be performed.

Temporary registration processing

The hidden field is named "op" and has a value of "register" so that you can explicitly see that it is a temporary registration process. 

      <%= hidden_field'op'=>'register'%>

HTML information

HTML information.

Registration form style sheet

Please describe the style sheet of the registration form in "public / css / default.css". It is assumed that the CSS settings for smartphones have been set. 

  /* Member registration */
  .signup {
    background: #fafafa;
    padding: 70px 0;
  }
  .signup form {
    width: calc (100%-15px);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  .signup-title {
    font-weight: bold;
    text-align: center;
    font-size: 28px;
  }
  .signup input [type = text], .signup input [type = password] {
    display: block;
    width: calc (100%-15px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 17px 10px 15px 10px;
    border-radius: 3px;
    border: 1px solid #ddd;
    font-size: 16px;
  }
  .signup input [type = submit] {
    display: block;
    width: calc (50%);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    background: # D82E5D;
    border: 1px solid # D82E5D;
    color: white;
    padding: 15px 0 13px 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
  }

Membership registration form routing

It is the routing of the membership registration form. Write Routing in the startup method. 

sub startup {
  my $self = shift;

  # Router
  my $r = $self->routes;
  
  $r->any('/ signup' => sub {shift->render('signup')});
}

If you are using AutoRoute plugin to automate routing, the template should be "auto / signup.html". Please place it in ".ep". 

sub startup {
  my $self = shift;

  my $r = $self->routes;
  
  $self->plugin('AutoRoute', route => $r);
}

Associated Information

Perl Club