Creating Registration Form In Deno : Setting Up Project

Hi guys welcome today we gonna learn how to build a registration form in Deno. As you might have seen this basic building block of Server coding to handle request and save it inside the database this article will truly help you understand how to handle request, retrieve data from user and save it inside the database. So without further ado let’s get started…

Our file setup gonna look like as following.

./
|-index.ejs
|-app.ts

For the starter we gonna import our module for this project we gonna require Oak, view_engine and multiparser.

// Importing modules
import {Application, Router} from 'https://deno.land/x/oak/mod.ts';
import {viewEngine,
engineFactory,
adapterFactory} from 'https://deno.land/x/view_engine/mod.ts';
import {multiParser} from 'https://raw.githubusercontent.com/deligenius/multiparser/master/mod.ts';

Now we need to set our adapter and engine, for adapter we are using oak and for engine we are using EJS.

// Setting Engine and Adapter
const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();

After setting our View Engine boilerplate lets now initiate our app.

// Initiating Application and Router
const app = new Application();
const router = new Router();
// Passing our view engine as middleware
app.use(viewEngine(oakAdapter, ejsEngine));
router
 .get('/',(ctx) => {
  ctx.render('index.ejs',{data:{msg: 'world'}});
  });
// Passing Router as Middleware
app.use(router.routes());
app.use(router.allowedMethods());
// Setting our App to listen the Port
console.log('App is listening on Port 8000');
await app.listen({port: 8000});

Now inside our “index.ejs” add the following code.

 <h1>Hello <%= data.msg %></h1>

Now let’s run our application as “denon run — allow-net — allow-read — allow-write app.ts”. Open your browser type localhost:8000/ in the URL and your app is up and running. Now inside our “index.ejs” file make a form which handles a POST request to the path “localhost:8000/post” as following.

 <h1>Hello <%= data.msg %></h1>
 <form method="POST" enctype="multipart/form-data" action="/post">
  <label>Email</label>
  <input type="email" name="email" placeholder="Enter email">
 </form>
</body>

After adding form inside your “index.ejs” your web page now looks something like this.

After adding Form inside the our app.ts now let's handle our form request which uses POST method on “localhost:8000/post” path.

router
 .get('/',(ctx) => {
  ctx.render('index.ejs',{data:{msg: 'world'}});
  })
 .post('/post', async (ctx) => { 
  const form = JSON.stringify(await          multiParser(ctx.request.serverRequest));
  const parse = JSON.parse(form);
  ctx.render('index.ejs',{data: {msg: parse.email}});
  });

Inside our POST handler we request server to give any form data after that we convert this request into JSON form so we can parse the data pretty easily. After parsing data we than return data inside our render function as object. After adding our POST handler not run our app and check if its working or not.

So finally our POST handling is working fine. So hope you like this post we gonna add more functionality in the next post so stay tune 😉.