Burger App using a custom ORM

Heroku Website The Burger App is burger logger that uses MySQL, Node, Express, Handlebars and an ORM made from scratch. The app also follows the MVC design pattern and uses Node and MySQL to query and route data, and Handlebars to generate HTML from templates.

Overview

• Eat-Da-Burger! is a restaurant app that lets users names a burger they'd like to eat which will be added to a MySQL database.
• When the user submits a new burger, it will be displayed on the left column as part of a selection of burgers.
• Along with each burger in the Menu column is a Devour It button. When clicked, that selected burger will move to the Eaten column on the right.
• No burger entries are deleted as they are saved to the MySQL database.

Technology Used

• Node.js
• MySQL database
• MySQL package Node module is a driver for MySQL.
• Express package Fast, unopinionated, minimalist web framework.
• Express Handlebars Node module as the view engine for Express.

Screenshots

ORM functionality

• The ORM (Object Relational Mapper) was created from scratch to handle specific SQL statments.
• orm.all() method uses the SELECT * FROM ?? SQL statement to handle requests to view all the data from a specific table.
• orm.create() method handles the INSERT INTO SQL statements for adding a new burger item.
• orm.update() method handles the UPDATE table SET column = ? SQL statemets for the consume button.

How the SELECT ALL ORM method works:

1. [controllers/burgers_controller.js] The router.get("/") GET route, the router calls the burger.all() function and for its argument sends a callback that will take the final data and render it to the index template.
2. [models/burger.js] The burger.all method here calls the orm.all method, with burgers as the parameter for the table in the SELECT * FROM table SQL statement, and the callback parameter that will render to the index template.
3. [config/orm.js] In my custom ORM the orm.all(getTable, callback) method is called, with getTable and the callback as two parameters. The getTable is used for the SELECT statment. THe callback finally renders the result to the index handlebar template.

Directory structure

• The directory tree shown below was copied from homework_instructions.md

All the recommended files and directories from the steps above should look like the following structure:

.
├── config
│   ├── connection.js
│   └── orm.js
│ 
├── controllers
│   └── burgers_controller.js
│
├── db
│   ├── schema.sql
│   └── seeds.sql
│
├── models
│   └── burger.js
│ 
├── node_modules
│ 
├── package.json
│
├── public
│   └── assets
│       ├── css
│       │   └── burger_style.css
│       └── img
│           └── burger.png
│   
│
├── server.js
│
└── views
    ├── index.handlebars
    └── layouts
        └── main.handlebars

Programmer's Notes

• app.use(express.urlencoded({ extended: true })); urlencoded encodes certain characters in a URL by replacing them with one or more character triplets that consist of the percent character "%" followed by two hexadecimal digits. The two hexadecimal digits of the triplet(s) represent the numeric value of the replaced character.

• app.use(express.json()); parses INCOMING requests with JSON payloads and s based on a body parser. ([source] (https://expressjs.com/en/api.html))

• Using ES6 for jQuery Click Event methods won't work: * Doesn't work for $(this) method:

        $(".btn-burger").on("click", () => {
                var selectedID = $(this).data("id");

    * You need to spell out function ()

        $(".btn-burger").on("click", function() {
                var selectedID = $(this).data("id");   

SQL Notes

• The ?? signs are for swapping out table or column names.
• The ? signs are for swapping out other values.
• This link helps show how to avoid SQL injection.