Node Express Handlebars
This app is all about eating burgers, yes, that's right! You'll create a burger logger with MySQL, Node, Express, Handlebars and a homemade ORM (yum!). Be sure to follow the MVC design pattern; use Node and MySQL to query and route data in your app, and Handlebars to generate your HTML.
- Eat-Da-Burger! is a restaurant app that lets users input the names of burgers they'd like to eat.
* Whenever a user submits a burger's name, your app will display the burger on the left side of the page -- waiting to be devoured. * Each burger in the waiting area also has a `Devour it!` button. When the user clicks it, the burger will move to the right side of the page. * Your app will store every burger in a database, whether devoured or not.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
This app requires a number of programs:
All the recommended files and directories from the steps above should look like the following structure:
Eat-Da-Burger │ ├── config │ ├── connection.js │ └── orm.js │ ├── controllers │ └── burgers_controller.js │ ├── db │ ├── schema.sql │ └── seeds.sql │ ├── models │ └── burger.js │ ├── node_modules │ ├── package.json │ ├──.env │ ├── public │ ├── assets │ │ ├── css │ │ │ └── burger_style.css │ │ ├── img │ │ │ └── burger.png │ │ └── js │ │ └── burgers.js │ │ │ └── test.html │ ├── server.js │ └── views ├── index.handlebars │ ├── layouts │ └── main.handlebars │ └── partials └── burgers └── burgers.js
Instructions on setting up and running this app on your computer
Fork a copy to your Github repo and clone it to your computer.
Got to your Git Bash and got to into the folder called Eat-Da-Burger.
To get all the npm packages required to run this app type into the command line
Create a server.js file.
- On your computer, open MySQL Workbench and login to a local server you have set up.
One option for executing the database code required to run the app is:
Open a new SQL tab for executing queries.
Then go back to your chosen text editor (I suggest either Visual Studio or Sublime Text) and open your
Eat-Da-Burgerfolder you will find a folder named
dbfolder, open the file named
schema.sql. Copy the code in the file and paste it to the new SQL tab you opened in MySQL Workbench.
Go back to the
dbfolder in you text editor and open the
seeds.sqlfile and copy the code and paste it into the open tab in MySQL Workbench and execute the code.
The other option for running the MySQL code is to:
seeds.sqlfiles into the mysql server from the command line
Now you're going to run these SQL files.
Make sure you're in the
dbfolder of your app.
Start MySQL command line tool and login:
mysql -u root -p.
mysql>command line tool running, enter the command
source schema.sql. This will run your schema file and all of the queries in it -- in other words, you'll be creating your database.
Now insert the entries you defined in
seeds.sqlby running the file:
Close out of the MySQL command line tool:
.env file Setup
In the command line of the main folder of
In your text editor, open the
.envfile and type
MYSQL_PASSWORD = "enter your MySQL password here"
Save the file
Open App in Browser
In the command line go into main folder of
node server.jsend hit enter
- Go to your browser and open a new tab and type
localhost:3000then hit enter
Using the App
Eat da Burger Option
Ready to Eat da Burgercolumn, if you hit the
Devour It !button it will change the devour status to true in MySQL, which will place the burger in the Devoured Burgers column. This burger will still be listed in MySQL. For example, if you choose to devour the Grilled Onion Cheeseburger, this is what it looks like in MySQL. Note that the Devour number is a 0 which equals true:
If then I hit the button to devour it, you can see that the Devour number changes to false, which in binary code is 1: <<<<<<< HEAD =======
![Image of MySQL After Devour](./public/assets/img/mysql2.PNG)
Reorder da Burger
- You can choose to reorder a burger that was eaten if it sounds good to you. Just hit the
Reoder Itbutton under Devoured Burgers and it will show as Ready to Eat again.
Order da Burger
You can add or order a burger by going to that column and typing in the name of your favorite buger then hit order. The burger will be added to the Eat da Burger column since the default setting on adding a burger is to set the Devour to true, which places it in that column.
Here is MySQL before I added the burger: <<<<<<< HEAD
Here I am adding a Egg and Bacon Burger:
![Here is MySQL before I added the burger:](./public/assets/img/beforeaddsql.PNG)
This shows the addition to the Ready to Eat da Burger column:
And lastly that it was added to MySQL:
This application is delployed at https://still-sea-48695.herokuapp.com/
- A big thanks to Sunday coding crew, especially Phil Stubbs who is always, without even trying to, pushing me to do more and better.
- Background Photo by Andrew Walton @w_andrew_j (instagram) on Unsplash
- One issue that I have noticed is that there is a lag in time between making changes on the browser and those changes being updated to the browser and MySQL.