Permalink
Find file Copy path
167fe24 Feb 13, 2020
1 contributor

Users who have contributed to this file

50 lines (39 sloc) 2.87 KB

express-views-exercise Objectives Creating a UI for interacting with HTTP controllers Practice using handlebars syntax. Your web page will need to:

Setup 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/ 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 ... 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.