Browse files


  • Loading branch information...
maij committed Feb 14, 2020
1 parent 27a577e commit 167fe248414e604861c87ef7a8a619fab9a4157f
Showing with 51 additions and 41 deletions.
  1. +1 −0 .gitignore
  2. +49 −40
  3. +1 −1 views/layout.hbs
@@ -0,0 +1 @@
@@ -1,41 +1,50 @@
Create an HTTP web wrapper around a set of model code.
Creating a UI for interacting with HTTP controllers
Practice using handlebars syntax.
Your web page will need to:

Follow the instructions for setting up a new project without a template from the mehn-template-project readme.

NOTE: be sure that server.js uses the express.json() middleware and not the express.urlencoded() middleware. You need this line in server.js:


Create API
Create a variable with an empty array, to represent a temporary database of shops. (NOTE: data stored this way will disappear when you close your server!)
Create a set of functions to perform the following:
function name parameters return
getShops n/a list of shops
getShop index single shop
addShop newShop index of new shop
deleteShop index n/a
updateShop index, shop n/a
Each coffee shop should have the following schema:

name (string)
employees (number)
currentlyOpen (boolean)
Create Web Server
Create as set of HTTP request handlers to do the following:
path Method model function to call
/shops GET getShops
/shops/:index GET getShop
/shops POST addShop
/shops/:index DELETE deleteShop
/shops/:index PUT updateShop
Strech Goals
Add some more methods to your model that modify the data inside of the coffee shop (such as adding a menu item or changing the name) and write an HTTP request handler around that.
create an other model called employees. Create a controller for these employees
add a key to the employees model called shopIndex. Add a method that will get all employees given the value of shopIndex.
Write an controller function that uses the function from the previous step.

where <request type> is one of POST/PUT/DELETE, <url> is the URL you'd put in your web browser, e.g. localhost:3000/addShop, and <request data> is the data you're sending to the server, e.g. some JSON like {'name': 'Starbucks', 'open': true}
download the express-intro-exercise solution directory.
rename the directory to express-views-exercise
cd int onto that directory.
npm install
mkdir -p views/shops (this will create the views/ and views/shops/ directories at the same time)
touch ./views/shops/shops.hbs ./views/shops/shop.hbs ./views/shops/create.hbs
Uncomment the line app.use(express.urlencoded()) in server.js
Testing your changes
Open a web browser and go to localhost:3000/<path in controller file> to test a specific page.

NOTE: Every time you update any file in controllers/ or models/ you will need to stop and restart your server.

List Shops Page
Write handlebars template HTML views/shops/shops.hbs to list the names of all the shops using {{#each}}...{{/each}}

For each name render an <a href="/shops/{{@index}}">...</a> where ... should be replaced with handlebars template that will display the name of a shop. (see @index documentation)

in controllers/shops.js modify the .get('/shops' route to render the shops/shops template. You will need to do the following:

replace res.send with res.render
set the context (2nd argument to res.render) to {shops: <results from calling getShops()>}
Create Shops Form
Write handlebars template HTML views/shops/create.hbs to display a Web form for creating a single shop. Follow the template create form. Make sure to set the action attribute to /shops. This will perform a POST request to /shops when the submit button has been clicked.

In controllers/shops.js modify the .get('/shops/new' route to render the shops/create template. You will need to do the following:

replace res.send with res.render
set the view path (1st argument to shops/create) which points to views/shops/create.hbs
set the context (2nd argument to res.render) to {shop: <results from calling getShop(req.params.index)>}
In controllers/shops.js modify the .post('/shops') route to redirect /shops/. To do this you will need to replace res.send with res.redirect. See the (res.redirect docs for details).

View and Update Shop Page
Follow the same steps for Create Shops Form where:

views/shops/shop.hbs as the template file and template edit form for the content. This will render a web form to display the data for a single shop as well as provide a webform for updating this information.
/shops?_method=PUT as the form action
In the controller modify .get(/shops/:index route to render the shop.hbs view (in other words use shops/shop as the view path)
Delete Shop Form
Following the same pattern above. Add a webform that
has a single input field for a submit button.
When submitted the form should make a POST request to /shops?_method=DELETE which will trigger the .delete( route which will call the deleteShop API function.
in the .delete( function redirect to the /shops route.
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<!-- Static assets can go in here! -->
<!-- <link rel="stylesheet" type="text/css" href="/css/styles.css"> -->

0 comments on commit 167fe24

Please sign in to comment.