Week 3: Templates and Databases

Each week we learn how to add more features to our infant web apps. This week I incorporated three: the form POST method, EJS templates, and a database to store my data.

In last week's iteration I used the GET method for submitting data to the server. Using this method submitted values are embedded into the query string of the URL. This is a good option if you need to share or bookmark the results of your query but a terrible option for login credentials. As an alternative, none of the data is stored in the URL using the POST method, thus protecting sensitive data, but a library to parse the data on the server side is required. For funsies, I incorporated this method into my project--adding the body-parser library, changing the method on my form.html, as well as the name of the incoming object in my server file.

Last week, I toiled away to script HTML into my server file to display my data a tiny bit fancier than without any styling at all. Not surprising, I learned through the grapevine that it’s a terrible practice to combine content and styling in your server file. It was the perfect setup to implement a template engine to write the HTML and our Javascript in separate files. Instead of loading up the server file with a long string of HTML/JS code, I created new templates to be served upon submitting and displaying the data. I use a tiny bit of JavaScript to randomly assign font sizes to my data upon display, and in trying to recreate that in my EJS template, I learned that EJS has it’s own syntax for embedding JavaScript. This was a handy resource for that.

Finally, up until now we’ve been saving data into an array on the server file. We learned how to establish a noSQL Mongo database to save our forms’ data regardless of whether our server was running our web app. Every time an instance of the server quit, it also cleared the array; with a cloud-based database my data is now persistent. Yay! 

Currently my project looks exactly the same as last week, but nearly all the code on the backend that has changed. I spent most of my time learning how to successfully use the EJF templates, connect to my new database, install the necessary libraries (dependencies) in the right place, and finally improve my use git and GitHub with all these new changes.

This week's version (for now): onomatopoeia 

Code on GitHub

Screen Shot 2018-02-13 at 3.02.16 PM.png