Git Product home page Git Product logo

campsights's Introduction

CampSights

Full Stack App

1st Step:

- In the terminal:
  - npm init
  - npm install express ejs --save
  - initialize app to listen for request on localhost:3000
  - create root route with ejs template:
  • Add Landing Page route using EJS
  • Add Campgrounds Page route that lists campgrounds

Each Campground has:

  • Name
  • Image
    • an array and each item in the array is an object

    • each one has a name and image in key val pairs:

      - [
      {name: "Salmon Creek", image: "http://www.image.com"},
      {name: "Salmon Creek", image: "http://www.image.com"},
      {name: "Salmon Creek", image: "http://www.image.com"},
      {name: "Salmon Creek", image: "http://www.image.com"},
      {name: "Salmon Creek", image: "http://www.image.com"}
      ]
      

2nd Step:

Layout and Basic Styling

  • Create our header and footer partials
  • Add in Bootstrap

Creating New campgrounds

  • Setup new campground POST route
    • add it to the array
  • Add in body-parser
    • imported correctly and configured
  • Setup route to show form
    • so user can send post
  • Add basic un-styled form

3rd Step:

Style the Campgrounds Page

  • Add a better header/tit;e
  • make campgrounds display in a grid

Style the Navbar and form

  • Add a navbar to all templates
  • Style the new campground form

###Add Mongoose

  • Install and configure Mongoose
  • setup campground model
  • use campground model inside of our routes!

For our app:

  • required mongoose db
  • created and connected to mongoose db called camp_sights
  • set up campgrounds schema that for now has a name and Image
  • then we compile the schema into a model, ie: code we can use that has a bunch of methods, including find(), create()
  • create: where we take data from the form, we make a new obj as a separate step, then we create from that

4th step

  • Review the RESTful routes we've seen so far

  • Add description to our campground model

  • Show db.collection.drop()

  • Add a show route/template

    - Restfull routes
    
    =========================================
    name      url         verb    description
    =========================================
    Index     /dogs        GET     display a list of dogs
    New       /dogs/new    GET     add new dog to database
    Create    /dogs        POST    add new dog to the db
    Show      /dogs/:id    GET     Shows info about one dog
    

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.