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="email@company.com", 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:
Now let’s try to run the app.
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.
Last updated