|YelpCamp| Campgrounds CRUD
Tags: javascript, html, css, webdev
Published: 2020-12-19 04:24:59

---
title: |YelpCamp| Campgrounds CRUD
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---
             -Introducing YelpCamp Final Project 
             -Creating the Basic Express App 
             -Campground Model Basics 
             -Seeding Campgrounds
             -Campground Index
             -Campground Show 
             -Campground New and Create 
             -Campground Edit and Update 
             -Campground Delete 



###Introducing YelpCamp Final Project 
This is the beginning of building a single large application. 
Here is an overview of what I will be building. 
The purpose of YelpCamp is a place to find campgrounds and review them similar to how yelp functions. 
The app will consist of a homepage/cluster map/authentication/create new campground post/review page

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zxl0jexucunpmlw9qtuq.png)
  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cxxxyump6hguul8qnmpe.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1agkwxedja8cir0r7rju.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ih1282pvploy49xlnc93.png)


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7ykszxbrlpcg7s3fqn54.png)

The code to get started:
{% github colt/YelpCamp %}

must run npm install to add the node modules dependencies 



###Creating the Basic Express App 
At the terminal type 
```
npm init -y 

```
then install express, mongoose, and ejs

```
npm i express mongoose ejs

```

Then set up the additional file structure that will build out this project. 


###Campground Model Basics 
Setting up a mongoose model for the campgrounds. 
Each campground will have a name/title, price, description and a location. 

```javascript 

const mongoose = require('mongoose'); 
const Schema = mongoose.Schema; 

const CampgroundSchema = new Schema({
    title: String, 
    prince: String, 
    description: String, 
    location: String
  }); 

mondule.exports = mongoose.model('Campground', CampgroundSchema); 

```

Then the next thing is to make sure that mongoose is connected and functional. 


###Seeding Campgrounds
Now it is time to set up the campgrounds with data. 
Here is where to find the data set to seed the database with. 
https://github.com/Colt/YelpCamp/blob/c12b6ca9576b48b579bc304f701ebb71d6f9879a/seeds/cities.js 


###Campground Index
Now time to set up basic routes and templates functionality. 

```javascript 

setting up the route 
app.get('/campgrounds', async (req,res) => {
  const campground = await Campground.find({})
  res.render('campgrounds/index')
 })

```

setting up the html template 

```html

<h1>All Campgrounds</h1> 
<ul> 
  <% for (let campgrounds of campgrounds %> 
<li><%= campgrounds.title %></li>
  <% }%>
</ul> 

```


###Campground Show 
The show route will eventually become a details page for the campgrounds. 

setting up the route 
```javascript 

app.get('/campgrounds/:id', async(req, res) => {
    res.render('campgrounds/show')
 })

```
setting up the html template 

```html

<h1><%= campground.title %></h1> 

<h2><%= campground.location %></h2> 

```


###Campground New and Create 
Rendering a form 

```html

<form action="/campgrounds" methods="POST">
  <div>
   <label for="title">Title</label> 
   <input type="text" id="title" name="campground[title]">
  </div>
  <div>
   <label for="location">Location</label> 
   <input type="text" id="location" name="campground[location]">
  </div>
<button>Add Campground</button>
</form> 

```

setting up the route 

```javascript 

app.post('/campgrounds', async (req, res) => {
  const campground = new Campground(req.body.campground); 
  await campground.save(); 
  res.redirect(`/campgrounds/${ campground._id }); 
 }); 

```

###Campground Edit and Update 
The route that serves the form 

```

app.get('/campgrounds/:id/edit', async(req, res) => {
  const campground = await Campground.findById(req.params.id) 
  res.render('campgrounds/edit', { campground })); 
})

```

html template 

```
<h1>Edit Campgrounds</h1> 
<form action="/campgrounds" methods="POST">
  <div>
   <label for="title">Title</label> 
   <input type="text" id="title" name="campground[title]">
  </div>
  <div>
   <label for="location">Location</label> 
   <input type="text" id="location" name="campground[location]">
  </div>
<button>Add Campground</button>
</form> 

```



###Campground Delete 
The route will be a delete route 

```

app.delete('/campgrounds/:id', async (req, res) => {
   const { id } = req.params; 
   await Campground.findByIdAndDelete(id);
res.redirect('/campgrounds');
})

```

html template 

```

<h1><%= campground.title %></h1> 
<h2><%= campground.location %></h2>

<p> <a href="/campgrounds/<%=campground_id%>/edit">Edit</a>
</p>
<p>
<form action="/campgrounds/<%=campground._id%>?_method=DELETE" method="POST"> 
<button>Delete</button>
</form>
</p>
<footer>
<a href="/campgrounds">All Campgrounds</a>
</footer>

```
Now that the basic structure is set up, it is time to build out the complexities of the yelp camp web application.