CT101 Final Presentations & Final Blog Post Information

CT101 Final Class Presentations & Final Blog Post Information.

Please read all of the information below carefully. E-mail me with any questions at Ryan (at) ryanseslow.com or rseslow (at)york.cuny.edu

  1. **Final Website Presentations : Each student will be presenting their completed website to the class on the date listed below. Students will give a short guided tour and share successes, frustrations and an over all assessment of our course. Each student will have between 5-6 minutes to do this.

*The Tuesday section class of CT101 will give their final website *presentations on TUESDAY 12/19 from 10AM -12PM

The Thursday section of class of CT101 will give their final website presentations on THURSDAY 12/14 from 10AM -12PM

2.***Final Blog Post Submission – Each student will publish a Final Class Assessment blog post to their own website. You will E-Mail the link of this blog post to me ( ryan (at) ryanseslow.com or rseslow (at) york.cuny.edu ) no later than Tuesday 12/19 at Midnight.

The final blog post should be a detailed re-cap of what you have learned in CT101, what you enjoyed about our class and how you will apply your new skills into the world. Will you maintain and keep up your website? If so, how? If not, Why not? Your post should include a culmination of images, videos, GIFs, hyperlinks and writing. Please let this post display the best of your skills sets learned and applied!

 

*BOTH ASSIGNMENTS ABOVE ARE MANDATORY.

 

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);
   }
});