CMPE280 group project development guide

Development Guide

For normal development, there are three places need to modify

views/pages

routes

app.js

Steps:

Create HTML file (example.html) in views/pages directory

<html>
<head>
<title>Example page</title>
<% include ../partials/head %>
</head>
<body>
<% include ../partials/nav %>

<!-- write your own HTML codes -->

<% include ../partials/footer %>
<script type="text/javascript">
    // write jQuery codes here if needed
</script>

</body>
</html>
```

Create router file (example.js) in routes folder

var express = require('express');
var router = express.Router();
module.exports = function () {
      router.get('/', function(req, res) {
        console.log("in example");
        res.render('pages/example'); // normally, we ignore the extension name of example.html file
      });

      return router;
};

Connect those two files in app.js file
Append var example = require('./routes/example')(); to the end of import block.
This is for letting our app know we want to use our example.js module

import router module

After importing, we need to route URLs to our newly imported router.
Append app.use('/example', example); to the end of route block

This statement means we connect localhost:3000/example and other URLs under this base URL to this example router

Details

1. [Folder] routes

This folder contains router file. (javascript file)

Routers' purpose:

routes request from user end to server
handles data manipulation such as pre-processing data in order to simplify data loading process in HTML file
renders HTML files which are corresponding to certain URLs

Template for router file

demo.js:

var express = require('express'); // import express module
var router = express.Router(); // initialize router instance from express

module.exports = function () { // export this module as a function
  router.get('/', function(req, res) { // router for GET request, in currnt relative root URL (we are in demo.js file, this router represents "localhost:3000/demo/" )
    res.render("pages/demo"); // render html page
  });

  router.get("/test", function (req, res) {
    // Do something when users visit "localhost:3000/demo/test" (GET request)
  });

  router.post("/", function (req, res) {
    // Do something when users send a POST request to "localhost:3000/demo/test"
      // For example, there is a form in demo.html page, when user submits that form, a POST request will be sent here 
  });

  return router; // return router instance
};

2. [Folder] views/pages

This folder contains normal HTML files.

Example for view file

demo.html

<html>
    <head>
        <% include ../partials/head %>
    </head>
    <body>
      <% include ../partials/nav %>
      <!-- form begin -->
      <form>
        <!-- Name input -->
        <div class="row"> 
          <div class="col-md-5">
            <div class="form-group">
              <label>Name</label>
              <input type="text" class="form-control border-input" id="idName" placeholder="Restaurant Name">
            </div>
          </div>
        </div>
        <!-- Address input -->
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label>Address</label>
              <input type="text" class="form-control border-input" id="idAddress" placeholder="Address">
            </div>
          </div>
        </div>
        <!-- button -->
        <div class="text-center">
          <button type="button" class="btn btn-info" id="btnCreateRes">Create Restaurant</button>
        </div>
      </form>
      <% include ../partials/footer%>

      <script type="text/javascript">
        $(document).ready(function(){
            // on-click listener for creating restaurant
            $("#btnCreateRes").on("click", function () {
                // collect input value into data object
                var data = {
                    // read from each input
                    restaurantName: $("#idName").val(),
                    restaurantAddr: $("#idAddress").val()
                };
                // use jquery ajax to send post request to router, along with data as parameter
                // this post request will be sent to demo.js, routed to the cooresponding url
                $.post("/demo", data, function (res) {
                    // call back function
                })
            });
        });
      </script>
    </body>
</html>