The web interface

The web framework or interface included in Vibe.d makes routing simpler and more intuitive as we can combines business logic and displaying web pages easily. Instead of declaring all the routes in the router itself, the web framework makes use of conventions based on REST to match URLs to actions or routes combined with the business logic.

As a reminder, the five actions / requests in REST are

GET - retrieve something from the server

POST - create something new in the server

PUT - update fully something in the server

DELETE – delete something from the server

PATCH – update partially something in the server

For our purposes, we will focus on the GET and POST operations. We will use GET for simple retrieval operations and use POST for the rest. For example, if the request is only asking for a page to be displayed, we usually use the GET method. If the request is asking for data to be added, retrieved, modified or deleted, we will use the POST method.

When a form is submitted, a GET method shows the input variables of the form at the end of the URL, called the query string. With a POST method, they are not displayed. Also, a query string has a limit in length while a POST method does not have a limit.

We don’t want to change or erase what we have done so far so we can preserve this point in time, so we are going to create a new project and simply copy all the \views\* files in this project to that of the new project.

Create a new project named empapp.

Press Ctrl-C to stop the running program (twice if needed).

[main(----) INF] Listening for requests on http://[::1]:8080/
[main(----) INF] Listening for requests on http://127.0.0.1:8080/
[00000000(----) INF] Received signal 2. Shutting down.
Warnin^g: C6 socket ha
ndc:\vibeprojects\noboots>les leaked at driver shutdown.
Warning: 6 socket handles leaked at driver shutdown.
c:\vibeprojects\no_bs>cd ..
c:\vibeprojects>dub init empapp -t vibe.d
Package recipe format (sdl/json) [json]:
Name [empapp]:
Description [A simple vibe.d server application.]:
Author name [Owner]:
License [proprietary]:
Copyright string [Copyright © 2023, Owner]:
Add dependency (leave empty to skip) []:
     Success created empty project in c:\vibeprojects\empapp
             Package successfully created in empapp
c:\vibeprojects>cd empapp
c:\vibeprojects\empapp>

Simply copy the files in no_bs\views into the current project empapp\views so we don’t have to write them again.

Open the new empapp folder in VS Code.

Edit source\app.d to make use of the web framework.

import vibe.vibe;
import empcontrol;
void main()
{
  auto settings = new HTTPServerSettings;
  settings.port = 8080;
  settings.bindAddresses = ["::1", "127.0.0.1"];
  auto router = new URLRouter;
  router.get("*", serveStaticFiles("public/"));
  router.registerWebInterface(new EmployeeController);
  auto listener = listenHTTP(settings, router);
  scope (exit) listener.stopListening();
 
  runApplication();
}

The line

router.registerWebInterface(new EmployeeController);

brings in the web framework into the class EmployeeController, which we have not created yet.

We indicated we are importing the empcontrol module, so let’s create that file to hold EmployeeController.

Create source\empcontrol.d with this contents:

module empcontrol;
import vibe.vibe;
class EmployeeController
{
  void index()
  {
    render!"index.dt";
  }
  void getAllEmployees()
  {
    response.writeBody("This is all_employees!");
  }
  void getFindEmployee()
  {
    response.writeBody("This is find_employee!");
  }
  void getAddEmployee()
  {
    response.writeBody("This is add_employee!");
  }
  void postLogin()
  {
    response.writeBody("This is login!");
  }
}

So instead of creating scattered stand-alone functions, we can write them all as methods inside one class. We don’t have to state the HTTPServerRequest and the HTTPServerResponse objects as arguments for each and every method we define in this class because they are already available as the variables request and response.

The index() method corresponds to the root URL

http://localhost:8080/

The getFindEmployee() method will correspond to the link find_employee with the URL

http://localhost:8080/find_employee

So if we make a postLogin() method, it will correspond to the URL extracted from the form

form.modal-form-grid(method="post", action="login")

the HTTPMethod of which is POST.

The methods we defined in the EmployeeController class are merely stubs for now just to demonstrate the use of the web framework. We will replace them later.

The web framework has some conventions:

The index() method corresponds to the root URL, “/”.

The getAllEmployees() method corresponds to the “/all_employees” link, the HTTPMethod of which is GET.

The getFindEmployee() method corresponds to the “/find_employee” link, whose HTTPMethod is also GET.

The methods we defined in the EmployeeController class, except for the index() method, are merely stubs to demonstrate the use of the web interface.

Using the web framework provides a way to combine business logic with routing, so developing a full application is easier. You can mix business logic with displaying a page, such as accessing a database to display a list of employees. That is what we will do next, but first we have to set up our data source.