YelpCamp v2

This week I started working on version 2 of the Yelp Camp app. I made the mistake of actually deleting my work of cloud 9 because I was trying to delete a workspace and…

This week I started working on version 2 of the Yelp Camp app. I made the mistake of actually deleting my work of cloud 9 because I was trying to delete a workspace and I accidentally deleted the workspace that held my work. I manage to catch up to speed due to the fact that I had already made a post for YelpCamp version 1. For version 2 of the app I installed mongoose to it and connected to mongoDB. I also saw the tutorial that explain more about RESTful routes and learned to the SHOW route. This route holds more information about a certain object that you have inside your database. Heres what I have so far inside my code:

var express    = require("express"),
    app        = express(),
    bodyParser = require("body-parser"),
    mongoose   = require("mongoose");
    
mongoose.connect("mongodb://localhost/yelp_camp", { useMongoClient: true, /* other options */}); 
 
app.use(bodyParser.urlencoded({extended: true}));
app.set("view engine", "ejs");

//SCHEMA SETUP
var campgroundSchema = new mongoose.Schema({
    
    name: String,
    image: String,
    description: String
    
});

var Campground = mongoose.model("Campground", campgroundSchema);

// Campground.create({
    
//     name: "Salmon Creek", 
//     image: "https://farm4.staticflickr.com/3872/14435096036_39db8f04bc.jpg",
//     description: "Great campground to enjoy with family and friends"
    
// }, function(err, campground){
    
//     if(err){
//         console.log(err);
//     }else{
        
//         console.log(campground);
//     }
    
// });
 
app.get("/", function(req, res){
    
   res.render("landing");
    
});

//INDEX: Displays all campgrounds 
app.get("/campgrounds", function(req, res){
    //Get all campgrounds from DB 
    Campground.find({}, function(err, campgrounds){
       if(err){
           console.log(err);
       }
       else{
            res.render("index", {campgrounds: campgrounds});
       }
    });
});

//CREATE: create new object and inserts it into the DB 
app.post("/campgrounds", function(req, res){
    var name = req.body.name,
        img  = req.body.image,
        desc = req.body.description;
    var newCampground = {
        name: name,
        image: img,
        description: desc
    };
    //create new campground and save to DB
    Campground.create(newCampground, function(err, campground){
       if(err){
           console.log(err);
       } else{
            //redirect back to campgrounds page
            res.redirect("/campgrounds"); 
       }
    });
});

//NEW: hold form where user can make a new campground 
app.get("/campgrounds/new", function(req, res){
   
   res.render("new");
   
});

//SHOW: show mre info abput one campground
app.get("/campgrounds/:id", function(req, res){
    //find campground with provided ID
    Campground.findById(req.params.id, function(err, campground){
        if(err){
            console.log(err);
        }else{
                //render show template with that campground
                res.render("show", {campground: campground}); 
        }
    });
}); 
 
app.listen(process.env.PORT, process.env.IP, function(){
    
   console.log("Server Started"); 
    
});

<% include partials/header %>
 
<h1> This is the landing page. </h1>
 
<p> Welcome to YelpCamp!</p>
 
<a href = "campgrounds"> View all Campgrounds </a>
 
<% include partials/footer %>

<% include partials/header %>
 
<div class="container">
    <header class="jumbotron">
        
        <h1> Welcome to YelpCamp </h1>
        <p> View our hand-picked campgrounds from all over the world </p>
        <p> <a class="btn btn-primary btn-large" href="/campgrounds/new"> Add New Campground </a> </p>
    
    </header>
    
    <div class="row">
        <div class="col-lg-12">
            <h3> Our Most Popular Campgrounds! </h3>
        </div>
    </div>
    
    <div class="row text-center" style="display: flex; flexwrap: wrap;">
        <% campgrounds.forEach(function(campgrounds){ %>
        
            <div class="col-md-3 col-sm-6">
                <div class="thumbnail">
                    <img src = "<%= campgrounds.image %>">
                    <div class="caption">
                        <h4> <%= campgrounds.name %> </h4>
                    </div>
                    <p> <a href="/campgrounds/<%= campgrounds._id %>" class="btn btn-primary"> More Info</a></p>
                </div>
            </div>
            
        <% }) %>
    </div>
    
</div>
 
<% include partials/footer %>

<% include partials/header %>
    
<div class="container">    
    <div class="row">
        <h1 style="text-align: center;"> Create a new Campground </h1>
           
        <div style="width:30%; margin: 30px auto;">
            <form action="/campgrounds" method="POST">
                
                <div class="form-group">
                <input class="form-control" type="text" name="name" placeholder="name">
                </div>
                <div class="form-group">
                <input class="form-control" type="text" name="image" placeholder="image url">
                </div>
                <div class="form-group">
                <input class="form-control" type="text" name="description" placeholder="description">
                </div>
                <div class="form-group">
                <button class="btn btn-lg btn-primary btn-block"> Submit! </button>
                </div>
                
            </form>
            <a href="/campgrounds"> Go Back </a>
        </div>
    </div>
</div>
 
<% include partials/footer %>

<% include partials/header %>
<h1><%= campground.name %></h1>

<img src="<%= campground.image %>">

<p><%= campground.description %></p>
<% include partials/footer %>

 

 

Intro to MongoDB and Mongoose

I finally reached the part of the tutorials that introduced me into MongoDB and Mongoose. MongoDB is a NoSQL which makes it more flexible and dynamic then a SQL database. This part of the…

I finally reached the part of the tutorials that introduced me into MongoDB and Mongoose. MongoDB is a NoSQL which makes it more flexible and dynamic then a SQL database. This part of the tutorial showed me how to install mongoDB into cloud 9, how to get it running and so introduction to commands that we can use inside the mongo shell. I learned to use the mongo shell to make a new database, collections inside the database, and how to insert new objects, find the objects, update and remove objects inside these collections.

Mongoose is a object modeling tool that helps interact with MongoDB much easier. From the tutorials I learned how to install Mongoose and how to connect to mongo with it. I learned how to make a new object schema and model. I learned the new commands that model open up for us. I was able to create new objects and find them from our JS file and console log it in the terminal.

var mongoose = require("mongoose");
mongoose.connect("mongodb://localhost/cat_app", { useMongoClient: true });

var catSchema = new mongoose.Schema({
    name: String,
    age: Number,
    temperament: String
});

var Cat = mongoose.model("Cat", catSchema);

//adding a new cat to the DB

// var george = new Cat({
//     name: "Mrs. Norris",
//     age: 7,
//     temperament: "Evil"
// });

// george.save(function(err, cat){
//   if(err){
//       console.log("Something went wrong");
//   } else{
//       console.log("It went through");
//       console.log(cat);
//   }
// });

//retrieve all cats from the DB and console.log each one

Cat.create({
    name: "Neyser",
    age: 22,
    temperament: "Calm" 
}, function(err, cat){
   if(err){
       console.log("Something went wrong.");
       //print out the error
       console.log(err);
   } else{
       console.log("It went through");
       console.log(cat);
   }
});

Cat.find({}, function(err, cats){
   if(err){
       console.log("Something went wrong.");
       //print out the error
       console.log(err);
   } else{
       console.log("These are all the cats...");
       console.log(cats);
   }
});

 

YelpCamp V1

I finally started working on the YelpCamp part of the tutorials. This is the first time I’m creating a working app with a database so I’m very excited to see what new things I’ll…

I finally started working on the YelpCamp part of the tutorials. This is the first time I’m creating a working app with a database so I’m very excited to see what new things I’ll from this. In this app the user will be able to search campgrounds that are listed here and create any new entry for another campground they would like to list. I managed to finish version 1 of the app. This is how the work looked. For this version we haven’t connected to any database just yet but I will be using mongoDB.

This is the javascript page where I’ll be setting up the routes for the app.

var express = require("express");
var app = express();
var bodyParser = require("body-parser");

app.use(bodyParser.urlencoded({extended: true}));
app.set("view engine", "ejs");

var campgrounds = [
     
   {name: "Salmon Creek", image: "https://farm4.staticflickr.com/3872/14435096036_39db8f04bc.jpg"},
   {name: "Granite Hill", image: "https://farm8.staticflickr.com/7268/7121859753_e7f787dc42.jpg"}, 
   {name: "Mountain Goat's Rest", image: "https://farm9.staticflickr.com/8577/16263386718_c019b13f77.jpg"} 
     
];

app.get("/", function(req, res){
    
   res.render("landing");
    
});

app.get("/campgrounds", function(req, res){
        
   res.render("campgrounds", {campgrounds: campgrounds});
    
});

app.post("/campgrounds", function(req, res){

   //get data from form and add to campgrounds array
   
   var name = req.body.name;
   var image = req.body.image;
   var newCampgrounds = { name: name, image: image };
   
   campgrounds.push(newCampgrounds);
   //redirect back to campgrounds page
   
   res.redirect("/campgrounds");
   
});

app.get("/campgrounds/new", function(req, res){
   
   res.render("new");
   
});

app.listen(process.env.PORT, process.env.IP, function(){
    
   console.log("Server Started"); 
    
});

The first version of our landing page.

<% include partials/header %>

<h1> This is the landing page. </h1>

<p> Welcome to YelpCamp!</p>

<a href = "campgrounds"> View all Campgrounds </a>

<% include partials/footer %>

This page is where all the campgrounds will be shown. At this point we have added bootstrap but I have only done some internal styling but this wil be moved to an external styling sheet.

<% include partials/header %>

<div class="container">
    <header class="jumbotron">
        
        <h1> Welcome to YelpCamp </h1>
        <p> View our hand-picked campgrounds from all over the world </p>
        <p> <a class="btn btn-primary btn-large" href="/campgrounds/new"> Add New Campground </a> </p>
    
    </header>
    
    <div class="row">
        <div class="col-lg-12">
            <h3> Our Most Popular Campgrounds! </h3>
        </div>
    </div>
    
    <div class="row text-center" style="display: flex; flexwrap: wrap;">
        <% campgrounds.forEach(function(campgrounds){ %>
        
            <div class="col-md-3 col-sm-6">
                
                <div class="thumbnail">
                    
                    <img src = "<%= campgrounds.image %>">
                    <div class="caption"> <h4> <%= campgrounds.name %> </h4> </div>
                    
                </div>
                
            </div>
            
        <% }) %>
    </div>
    
</div>

<% include partials/footer %>

This page will hold the form where a user can list a new campground to the database.

<% include partials/header %>
    
<div class="container">    
    <div class="row">
        <h1 style="text-align: center;"> Create a new Campground </h1>
           
        <div style="width:30%; margin: 30px auto;">
            <form action="/campgrounds" method="POST">
                
                <div class="form-group">
                <input class="form-control" type="text" name="name" placeholder="name">
                </div>
                <div class="form-group">
                <input class="form-control" type="text" name="image" placeholder="image url">
                </div>
                <div class="form-group">
                <button class="btn btn-lg btn-primary btn-block"> Submit! </button>
                </div>
                
            </form>
            <a href="/campgrounds"> Go Back </a>
        </div>
    </div>
</div>

<% include partials/footer %>

I also made 2 partials for the header and footer that will be include in other ejs files.

<!DOCTYPE html>
<html>

    <header>
        <title> YelpCamp </title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </header>
    
    <body>
        
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/"> YelpCamp </a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li> <a href="/"> Login </a> </li>
                        <li> <a href="/"> Sign Up </a> </li>
                        <li> <a href="/"> Log Out </a> </li>
                    </ul>
                </div>
            </div>
        </nav>

</body>
 
</html>

 

First Express App – 1 95

This is the way I did the App for the express exercise. [crayon-5a26174b7557c436418799/] This is the way Cole did his app. [crayon-5a26174b7558f684940248/] I did not have to watch the video where the answer was…

This is the way I did the App for the express exercise.

var express = require("express");
var app = express();

app.get("/", function(req, res){
    
   res.send("Hello, welcome to my assignment!"); 
    
});

app.get("/speak/:animalname", function(req, res){
    
   var animal = req.params.animalname;
   var sound = sounds();
   
   function sounds(){
       
       if (animal === "pig"){
           
           sound = "'Oink'";
           
       }
       
        if (animal === "cow"){
           
           sound = "'Moo'";
           
       }
       
        if (animal === "dog"){
           
           sound = "'Woof Woof'";
           
       }
       
        if (animal === "cat"){
           
           sound = "'Meow'";
           
       }
       
        if (animal === "duck"){
           
           sound = "'Quack'";
           
       }
       
       return sound;
       
   }
   
   res.send("The " + animal + " says " + sound + ".");
    
});

app.get("/repeat/:words/:numbers", function(req, res) {
    
    var word = req.params.words;
    var number = parseInt(req.params.numbers);
    var words = repeat(word);
    
    function repeat (word){
        
        var holder = [];
         
        for (var i = 0; i < number; i++){
        
          
            holder.push(word);
            
        
        }
        
        return holder.join(' ');
    }
    
    res.send(words);
    
});


app.get("*", function(req, res){
    
    res.send("Sorry, page not found...What are you doing with your life?");
    
});

app.listen(process.env.PORT,process.env.IP, function(req, res){
    
    console.log("Server started");
    
});

This is the way Cole did his app.

var express = require("express");
var app = express();

app.get("/", function(req, res){
    
   res.send("Hello, welcome to my assignment!"); 
    
});

app.get("/speak/:animalname", function(req, res){
    
   var sounds = {
       
        pig: "Oink",
        cow: "Moo",
        dog: "Woof Woof",
        cat: "I hate you human",
        goldfish: "..."
       
   };
   var animal = req.params.animalname.toLowerCase();
   var sound = sounds[animal];
   
   res.send("The " + animal + " says '" + sound + "'.");
    
});

app.get("/repeat/:words/:numbers", function(req, res) {
    
    var word = req.params.words;
    var number = Number(req.params.numbers);
    var result = "";
         
        for (var i = 0; i < number; i++){
            
            result += word + " ";
        
        }
    
    res.send(result);
    
});


app.get("*", function(req, res){
    
    res.send("Sorry, page not found...What are you doing with your life?");
    
});

app.listen(process.env.PORT,process.env.IP, function(req, res){
    
    console.log("Server started");
    
});

I did not have to watch the video where the answer was shown because I manage to write my own code and got it to run the same way Cole did. There was a few differences between out codes. For the first part I used a function with if statements while Cole used objects. The second part used a function with a for loop in it and Cole just used a for loop alone. For this week I’ll try to get through lesson 24 Intermediate Express and if I finish before Wednesday I go ahead and start with lesson 24.5 and 25.