How to Add User Registration Using Postgres and Javascript - Part 2: Build the Interface 709

Introduction

In this tutorial, we will build a registration system that allows users of your Postgres- and Python-based web application to create a username and password, add the new user to our database, send that new user a confirmation email, receive a response from their click on the link we sent them in that email, and set a flag in the PostgreSQL database that the user is confirmed. This article is part one of a five-part series. In this series, we will address the following:

  • Part 1: Add a users table to our Postgres database.
  • Part 2: Build the registration form using HTML, CSS, and Javascript. Interaction with the database will be absent from this part 2.
  • Part 3: Validate user input, create a hash of the user’s password, and insert this data into PostgreSQL. We’ll use Python for this part of the tutorial.
  • Part 4: Give the user feedback on the screen and send them a confirmation email. Again, we’ll use Python and Postgres for this part of the tutorial. We’ll also be using HTML and CSS.
  • Part 5: Receive email confirmation from the user and set a flag in the PostgreSQL database using Python. Note: In the interest of keeping this tutorial as simple as possible, we’ll save creating a fully mobile responsive layout for a future article.

Overview of this article

In this part 2 of our series, we will build a standard registration screen and form using the following client-side technologies: HTML, CSS, and Javascript. To keep it simple, we’ll limit use of CSS in this tutorial. Also, since this is only one part of a five-part series and , we chose to share all the code you will need for this part in one heavily-commented chunk below.

Assumptions and prerequisites

We’ll assume the following:

  • You followed the instructions in part 1, here.
  • You have a web server and site set up, whether local or remote, where you can test your work.
  • If the server and site are remote, you have set up FTP for uploading the scripts you will be writing in this part 2. If you are looking for a free and capable FTP client, try FileZilla
  • You have a basic knowledge of HTML, CSS, and Javascript. A high level understanding should be all you need, as we will be providing all the code you need here.

The code

Study the code below, paste it into your favorite editor, save the file as “register.html“, upload to your server into a folder called “/templates”, and try it out!

<html>
  <head>
    <link rel="shortcut icon" href="favicon.ico" />
    <title>Registration</title>
    <meta
     name="description"
     content="Register here to play the greatest game ever seen!"
   />
    <meta name="keywords" content="register, play, game" />
    <!-- In the interest of modularity, once you get this working, -->
    <!-- we recommend you create a stylesheet file and refer to it -->
    <!-- from here using the line below -->
    <!--link href="/css/non-existent-file.css" rel="stylesheet" type="text/css"-->
    <!--  -->
    <script language="JavaScript" type="text/javascript">
      <!--
     /* checkform() is the overall function called from */
     /* our HTML when the user submits the form */
     function checkform (form)
     {
         /* isEmpty() returns true and alerts the user if they left a field empty */
         function isEmpty (fixwhat, s_called)
         {
             if (fixwhat=="")
             {
             alert("Please enter " + s_called);
             return true;
             } else {
             return false;
             }
         }

         /* charCheck() returns false and alerts the user if they used any non-alphanumeric characters */
         function charCheck(fixwhat)
         {
             var validchars = '@-_.0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
             if(isValid(fixwhat,validchars))
             {
                 return true;
             } else {
                 alert("Please use only letters or numbers in this field");
                 return false;
             }
         }

         /* isValid is used by the charCheck() function to look through each 'validchars' one at a time */
         function isValid(string,validchars)
         {
             for (var i=0; i< string.length; i++)
             {
             if (validchars.indexOf(string.charAt(i)) === -1) {return false;}
             }
             return true;
         }

         //check for empty fields
         if (is_empty (form.t_email.value,"your email address")) { form.t_email.focus();  return false;}
         if (is_empty (form.t_password.value,"your password")) { form.t_password.focus();  return false;}

         //check for weird chars
         if (charCheck(form.t_email.value)===false) {form.t_email.focus(); return false;}
         if (charCheck(form.t_password.value)===false) {form.t_password.focus(); return false;}

         return true ;
     }
     //-->
    </script>

    <!-- Some basic styles to set element colors, size, and align our form fields -->
    <!-- As mentioned above, we recommend you place the following CSS into a file -->
    <!-- So that every page of your site can refer to that one CSS file, which -->
    <!-- increases ease of modification in the future. -->
    <style type="text/css">
      html,
      body {
        padding: 1;
        margin: 1;
      }

      input {
        font-size: 16px;
        font-family: Helvetica, sans-serif;
      }

      body {
        background-color: #66aacc;
        font-family: sans-serif, arial, helvetica;
        padding-bottom: 50px;
      }

      .container {
        background-color: #ffffff;
        max-width: 600px;
        margin: 20px auto 0 auto;
        padding: 15px 20px 1px 20px;
      }

      .form-row {
        padding: 10px 0;
        display: flex;
      }

      .form-row label {
        padding-right: 10px;
      }

      .form-row input {
        padding-right: 10px;
        flex: 1;
      }
    </style>
  </head>
  <body>
    <!-- Note: later you may wish to add an include pointer (include) to a common header file here -->
    <!-- or above this mark, depending on other factors. -->
    <!-- Why a common header file? This is so that all pages share the same footer. -->
    <!-- Changing the one header file will change the header of every page on your site. -->
    <!-- For example, you may wish to put your logo and navigation links in this file -->
    <!-- or even have a separate file for header and separate file for navigation. -->

    <!-- The message you see below is why we call this a template -->
    <!-- message is filled in by the Python file as it calls up this HTML -->
    <!-- Later you may wish to separate page title from message -->
    <h1>{{message}}</h1>

    <!-- Note: this 'container' class refers to the '.container' we see in the CSS we wrote above -->
    <div class="container">
      <!-- Set up form type and the file that will process the user's input -->
      <!-- Notice how the onsubmit parameter calls our checkform javascript function -->
      <!-- This checks to make sure the user: -->
      <!-- (a) didn't leave any field empty; and -->
      <!-- (b) used only valid alphanumeric characters -->
      <form
       name="frmInfo"
       action="/register"
       method="post"
       onsubmit="return checkform(this);"
     >
        <!-- text box for user to enter their Email address -->
        <!-- Notice our input has an id of 't_Email'. -->
        <!-- This is used by our checkform javascript function. -->
        <div class="form-row">
          <label for="Email">Email address:</label>
          <input type="text" id="t_Email" name="t_Email" />
        </div>

        <!-- text box for user to create a Password -->
        <!-- Notice our input has an id of 't_Password'. -->
        <!-- This is used by our checkform javascript function. -->
        <div class="form-row">
          <label for="Email">Password:</label>
          <input type="text" id="t_Password" name="t_Password" />
        </div>

        <!-- button for user to submit the form -->
        <div class="form-row">
          <input type="submit" id="btn_submit" value="Register" />
        </div>

        <!-- Close our form -->
      </form>

      <!-- Close our container div -->
    </div>

    <!-- Note: later you may wish to add an include pointer (include) to a common footer file here. -->
    <!-- This is so that all pages share the same footer. Changing the one footer file will change -->
    <!-- the footer of every page on your site. -->

    <!-- Close the body of our HTML document -->
  </body>
</html>

Conclusion

That’s it! You’ve completed this part 2 of creating a registration feature for a web application, which is to build a basic registration form.

We’ve also given you some ideas above for how to make this page and the entire application more modular in the future, which will create more efficiency and save you time in the long run.

Look for part 3 where you will create a ‘server-side page’ to receive user input from this page, create a hash of the user’s password, and insert this data into your PostgreSQL users table. We’ll use Python for that part of the tutorial.

Pilot the ObjectRocket Platform Free!

Try Fully-Managed CockroachDB, Elasticsearch, MongoDB, PostgreSQL (Beta) or Redis.

Get Started

Keep in the know!

Subscribe to our emails and we’ll let you know what’s going on at ObjectRocket. We hate spam and make it easy to unsubscribe.