Informing the IBM Community

A NodeJS Website on IBM i – Final Version

0
(0)

 This article continues with my Node.js Express website on IBM i theme.

Here we will ensure our ‘add a new employee’ functionality is in the same format as the update and delete functions by displaying a pop-up modal window to allow the user to input new employee details.

We have finally got there!

The stages we need to go through to develop this functionality is as follows:

  1. Add a New Employee button to our existing employee page
  2. Show a popup window with blank employee details
  3. Ask the user to input new employee details
  4. If the user confirms the addition, then add a new record to our database
  5. Send a status message back to the user, letting them know if the addition was successful, or not
  6. Refresh the browser window, showing the current list of employees.

In pictorial form, it will look like this.

The user will select the Add button.

A popup window will ask the user to add the new employee details.

A status message will show the user the results of the add request.

So, how do we achieve all this?

Coding

The first step we have to do, is to modify our employee.pug file to show an Add button.

This can be seen in the coding below.

Popup Window

Also, within the employee.pug file we have to code the popup add window. 

This is very similar to the delete and update popup windows in the previous articles.  Please note that as this is a new record, we have no mention of the employee ID.  This will be allocated when we add the record to the database.

Next, we need to insert the add JavaScript function (submitAddForm), this is also coded within the employee.pug file.

AJAX Script

Once we have all the above in place, we need the AJAX script that is going to perform the record add functionality. 

In the last article, I called this script ajax_employee.js  We will add the add function to this script to keep all our database access within one script.  This makes life easier for maintenance.


Next, we need to insert the add JavaScript function (submitAddForm), this is also coded within the employee.pug file.

AJAX Script

Once we have all the above in place, we need the AJAX script that is going to perform the record add functionality. 

In the last article, I called this script ajax_employee.js  We will add the add function to this script to keep all our database access within one script.  This makes life easier for maintenance.

GitHub

As with all my previous articles on this topic, these changes have now been published to my GitHub repository, which can be found at this link.  Hopefully, this will provide you with a template to experiment with Node.js on IBM i.

Conclusion

Hopefully in this series of articles, I’ve shown how easy it is to quickly get a web application, providing all the usual read, write update functions, up and running on the IBM i using Node.js

If you have any questions, either on this article, or any other open source, use the comments below, or send me a message on twitter @AndyYouens

Andy Youens is an IBM i consultant/instructor at Milton Keynes, UK-based FormaServe Systems with over 40 years IBM midrange experience.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *