A form for adding a new employee

Create views\empadd.dt for our data entry form.

extends layout
block maincontent
  include cssformgrid.dt
  div.form-grid-wrapper
    h2.center-align New employee details
    form.form-grid(method="post", action="add_employee", enctype="multipart/form-data")
      label.form-grid-label Employee number
      input.form-grid-input(type="empid", name="e_empid", placeholder="employee number", required)
      label.form-grid-label Department
      select#deprt.form-grid-input(name="e_deprt")
        -foreach(dep; departments)
          option(value="#{dep}") #{dep}
      label.form-grid-label Salary grade
      select#deprt.form-grid-input(name="e_paygd")
        -foreach(pay; paygrades)
          option(value="#{pay}") #{pay}
      label.form-grid-label Email address
      input.form-grid-input(type="email", name="e_email", placeholder="[e-mail]", required)
      label.form-grid-label Password
      input.form-grid-input(type="password", name="e_pword", placeholder="password", required)
      label.form-grid-label First name
      input.form-grid-input(type="text", name="e_fname", placeholder="First name", required)
      label.form-grid-label Last name
      input.form-grid-input(type="text", name="e_lname", placeholder="Last name", required)
      label.form-grid-label Phone
      input.form-grid-input(type="text", name="e_phone", placeholder="Phone number")
      label.form-grid-label Street address (no city)
      input.form-grid-input(type="text", name="e_street", placeholder="Street address", required)
      label.form-grid-label City
      input.form-grid-input(type="text", name="e_city", placeholder="City", required)
      label.form-grid-label Province
      select#province.form-grid-input(name="e_province")
        -foreach(prov; provinces)
          option(value="#{prov[0]}") #{prov[1]}
      label.form-grid-label Postal code
      input.form-grid-input(type="text", name="e_postcode", placeholder="A1A 1A1")
      label.form-grid-label ID Picture
      input.form-grid-input(type="file", name="picture")
      input(type="hidden", name="e_photo")
      input(type="hidden", name="e_id", value="1")
      div
      div
        input.form-grid-button(type="reset", value="Clear the form")
        input.form-grid-button(type="submit", value="Submit")

The line

form.form-grid(method="post",action="add_employee", enctype="multipart/form-data")

will call the postAddEmployee() method of the EmployeeController class.

The part of the form declaration

enctype="multipart/form-data"

means the form will upload a file, which in this case is a photo.

We can mix D code inside a Diet template file with a – (hyphen).

Thus the line

-foreach(dep; departments)

and

-foreach(prov; provinces)

and

-foreach(pay; paygrades)

mean iterate (or loop) through the departments or provinces or paygrades array to access each item.

The form includes views\cssformgrid.dt for its CSS formatting.

Here is the views\cssformgrid.dt:

:css 
  .form-grid-wrapper
  {
    width: 700px;
    height: auto;
    margin: 20px auto;
    padding: 1px 20px 20px 0;
    border-radius: 20px;
    background-color: #eef;
  }
  .form-grid
  {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 5px;
  }
  .center-align
  {
    text-align: center;
  }
  .form-grid-label
  {
    width: 100%;
    font-size: 16px;
    text-align: right;
    padding: 5px 0;
  }
  .form-grid-field
  {
    width: 100%;
    font-size: 16px;
    border-bottom: 1px solid black;
    padding: 5px 0;
  }
  .form-grid-button
  {
    width: 100%;
    font-size: 16px;
    height: 40px;
    margin-top: 10px;
  }

Now let’s try to run the app.

c:\vibeprojects\lorem>dub
    Starting Performing "debug" build using C:\D\dmd2\windows\bin\dmd.exe for x86_64.
…
    Finished To force a rebuild of up-to-date targets, run again with --force
             Copying files for vibe-d:tls...
     Running lorem.exe
[main(----) INF] Listening for requests on http://[::1]:8080/
[main(----) INF] Listening for requests on http://127.0.0.1:8080/

Click on the ‘Add employee’ link and you should see this:

But after you fill out the form and click Submit, you get this error:

That’s because we haven’t written the postAddEmployee() method yet. Take not that we wrote this in the views\empadd.dt form:

form.form-grid(method="post", action="add_employee",enctype="multipart/form-data")

which means the server will call the postAddEmployee() method, which we haven’t written yet. Let’s rectify that.