100%
LESSONS & TOPICS

5-Create a display from Javascript

5-Create a display from Javascript

In this assignment, we will create a website that displays the dog table from the database that we’ve created for Daisy’s Dog Groomers.

Let’s start by creating a new project directory and going into the directory.

We will now initiate a project using npm, but before you do, make sure you’re running as an administrator as we’ll be installing several packages.

We will now install Embedded Javascript templates.

Next we will install express.js.

Now, same as the last assignment, we will install the MySQL driver.

There’s a couple more dependencies to install and configure

In your project location, you can now run vs code, by using the command “code .” in the command prompt.

Once in vs code create a new folder named “lib” and create a file in the folder for the MySQL connection. Let’s call the file “mysqldb.js.”

Your structure will look something like below.

The code for the connection will be similar as the last assignment. Make sure you use your own password, and also specify the database that was used for the Daisy’s Dog Groomer database.

Next, create a folder titles “routes” and create a file in the file named “dogs.js.” For this file, use the code below.

Now, create a folder titled “views”, and within that folder create another folder titled “dogs.” In the folder “dogs”, create a file titled “index.ejs”.

For “index.ejs”, you could use the code below. Feel free to make some customizations if you are comfortable in doing so.

Now we will create the “index.js” file in the project directory.

Your project structure will now look like below.

Now back in your command prompt, try running the app through node.

If the connection is successful, you’ll get the message as you’ve specified. If all looks good, you could open a browser and try going to “http://localhost:5500/dogs.”

If you’ve got the display above, congratulations!

You’ve now created a table display through a MySQL connection in Javascript.