YelpCamp Refactor

by Ian Schoonover

Campground Pricing

We'll be adding a cost input to the new campground form:

I'll be working from the YelpCamp > Final version which can be found here 

Overview

• Update Campground Model

  • Add cost property

• Update new and edit forms
  • Add cost input field
• Update campground create and update routes 
• Display the campground cost

Update Campground Model

• Open /models/campground.js
• Add cost: Number to the campgroundSchema:

var mongoose = require("mongoose");

var campgroundSchema = new mongoose.Schema({
   name: String,
   image: String,
   description: String,
   cost: Number,
   author: {
      id: {
         type: mongoose.Schema.Types.ObjectId,
         ref: "User"
      },
      username: String
   },
   comments: [
      {
         type: mongoose.Schema.Types.ObjectId,
         ref: "Comment"
      }
   ]
});

module.exports = mongoose.model("Campground", campgroundSchema);

Update new and edit forms

• Open /views/campgrounds/new.ejs
• Add an input for cost, right below the existing image input:

<div class="form-group">
  <input class="form-control" type="number" name="cost" placeholder="cost" step="0.01" min="0" required>
</div>

<div class="form-group">
  <input class="form-control" type="number" name="cost" value="<%= campground.cost %>" step="0.01" min="0" required>
</div>

• Open /views/campgrounds/edit.ejs
• Add an input for cost, right below the existing image input:

Update campground create and update routes

• Open /routes/campgrounds.js
• Add the following to the router.post('/',...) route, right below var image = req.body.image;

var cost = req.body.cost;

• Update the newCampground object:

var newCampground = {name: name, image: image, cost: cost, description: desc, author:author};

• Update the router.put("/:id",..) route:

var newData = {name: req.body.name, image: req.body.image, cost: req.body.cost, description: req.body.description};

Display the campground cost

• Open /views/campgrounds/show.ejs
• Replace the following line:

<h4 class="pull-right">$9.00/night</h4>

with this:

<h4 class="pull-right">$<%= campground.cost %>/night</h4>

Congratulations! Your YelpCamp app now has a dynamic pricing feature

If you have any questions then please create a thread in the Q&A