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.jsfile
Appendvar 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/exampleand other URLs under this base URL to thisexamplerouter
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>
