crud-express-wdi12's People
crud-express-wdi12's Issues
server.js (erica hinchman)
[process question] line 2 - what is path? what does it do?
[process question] lines 3 - what is logger? what does it do?
[documentation] server.js lines 4 & 5, const npm-package-name = require("npm-package-name);
-this tells app to use npm packages
[documentation] line 6 - requires bodyParser package and sets to variable "bodyParser"
-this works like lines 4 and 5 above
[documentation] server.js line 8, const app = npm-package-name();
- this sets express function to variable "app"
[documentation] server.js line 9, const port = process.env.PORT \ 3000;
- this tells app which local port to run on
[documentation] server.js line 10, const controllerName = require("./controllers/controller-name");
-this tells app to grab "/controllers/controller-name" controller anytime "controllerName" is used
[documentation] line 14, const methodOverride = require("method-override");
-this brings in the "override" method and sets it to "methodOverride" variable
- this also works like lines 4 & 5
[documentation] line 19, app.use(methodOverride("_method"));
-says to do whatever is set to "?_method" instead of what comes next (method=)
[process question] line 21 - what is logger? what does it do?
[PROCESS QUESTION - is the following correct?] [documentation] line 23 - body parser
- gives you access to the body of a site, required before you can update or delete any data
[documentation] line 26 - app.set('view engine', 'hbs');
-tells express to use hbs
-hbs allows HTML to be dynamically rendered on the site
[documentation] line 29 -
-tells us to use todos controller (this is JS file saved in controller folder)
documentation - server.js
line 4, 5, and 8
enable us to use express and handlebars
What things do
Server.js
1-6
These are the requirements for the installed packages
8-9
Server and app settings
Application settings; calling the express function
declaring the port variable for 3000
10
declaring the requirement for the todo controller
14
declaring the method override requirements
19
override method being called
23
calling the bodyParser
26
set viewEngine
29
setting view controller route
32-34
setting the homepage route
37-39
telling the server to listen for port 3000
todos.js
todos controller
1&2
setting requirements
3
connects to data.js
6-11
index route "/" and renders the todos handlebars page
14-16
This route and renders the new todos
19-30
the show route, this shows one id off of the database
33-38
the post route. Connects the new and show with the body parser package. Pushes from data to the active database.
41-49
The Edit route. Takes in an id and allows you to edit the item in the array and renders the edit page.
52-59
The update route. This updates any edits on the data. Redirects to the index page.
63-67
The Delete Router. Removes a database from the array based on id.
[documentation] views/index.hbs, view f r /todo page
Creates our viewable 'todo' page
Sets ups items in a unordered list and pulls data from our todo.js controller /line 3
schema:
<Title> <Edit Option>
<Delete Option>
<Edit Option>
<Delete Option>
<Edit Option>
<Delete Option>
......
server.js ....
[process question] line 2, 3, 21 -- What is going on here? What are we getting and setting?
2 const path = require('path')
3 const logger = require('morgan')
21 app.use(loger('dev'));
[documentation] line 4, 5 - getting - (keyword: require) npm package, Express and Handlebars
[documentation] line 8 - setting express function to app
[documentation] line 9 - tells app which local PORT to run on. ala localhost3000
[documentation] line 6 - requires 'body-parser' package and sets it to the variable bodyParser.
[documentation] line 10 - gets the controller and set it to the variable todosController
[documentation] line 14 - gets the override method and sets it to eh variable methodOverride.
[documentation] line 19 - anytime you use the query parameter '?__method' says do this -what is assigned to it, not what comes next.
[documentation] // [process question IS THIS RIGHT?] line 23 app.use(bodyParser) gives you access to the body of the site, which is required before you can do any updates (PUT/POST) or deletes (DELETE).
[documentation] line 26 - tells app to use handlebars to render our content. Handlebars allows HTML to be dynamically rendered on site.
[documentation] line 29 -
Edit.hbs
Line 1
grabs the description from the database and displays it as a h1
Line 3-21
sets up the form so you can edit the database item using method override and allow for a PUT action
Delete Router: [documentation] server.js, lines 63-67, router.delete('/:id')
Line 63: Given that we set up a delete route to delete an id
Line 64: And In data.seededTodos which access our data, we are saying splice, which is used to remove something from an array, and splice has two parameters(start, deleteCount)
Line 64: We give it the id(index of our array of data)-> req.params.id and 1, because we only to delete 1 object from the array, when we delete a todo
Line 65: Then we res.redirect('/todos), which says when you are done delete the 1 object go back to our main todo page
Data JS
Data.js
This is basically where your content will go
line 1 module.exports
This is separates our files throughout our app making our code much cleaner
line 2 seededTodos [
This is a property for our module exports which is an array for our objects
line 4-6 {
description: "get beer",
urgent: true
},
This is where your content will go for your arrray
Index.hbs
Line 3 - 12
Loops through the database and displays each object in the array along with edit and delete buttons with the respective paths
Line 15
Adds a link to redirect to the todos/new page
New.hbs
Line 3 - 12
Sets up a form for posting a new todo, setting up boxes for the user to input keys in the object
Line 13
Creates a submit button
Server.js
this is a test comment to see if i know what im doing
Cannot find module 'morgan'
server.js
Packages
lines 2 - 7 are the packages that we are using for the app
controller
line 8, 42-46 is the controller that is going to tell the app where to go
Override
Line 11 - 15 allows user to override with out having to go into the code to make changes.
Views
Line 30 sets the app to handlebars
Controllers
line 33 tells the app to use /path as the default and to use todosController to render the HBS files
Home
line 36 tell the app to use the default route to display the home page
Server start
lines 50-53 server setup, define a port to use and any message you want displayed in the terminal.
todos.js
This is the todo controller
line 1 & 2
Requires the express package and sets the router
line 3
connects to the data.js
line 6 - 11
Index route "/" and renders the todos/index handlebars page
lines 14- 16
The new route and renders the todos/new handlebars
lines 19 -30
the show route. Shows one ID of the database. Renders the todos/show handlebars page
lines 33 - 38
The post route. Connects the new and show with the body parser package.
pushes from new to the active database. Redirects to the todos/index page
lines 41 - 49
The edit route. Takes an ID and allows you to edit the item in the array with the ID declared in the url. renders the todos/edit handlebars page.
Lines 52-59
The Update route. This updates any editing done the database. Redirects to the index page
Lines 63 - 67
The Delete router. Removes a database item from the array based on the ID and Deletes it. Redirects to the index page
Lines 71:
Exports the controller
data.js
Holds the database object.
line 1 exports the data
server.js documentation
[documentation] server.js lines 1-6, packages required for initial start up
lines 8-12, app settings required.
lines 19-23, override method is required.
lines 26, renders our views.
lines 29, controls the routes.
lines 32-24, establishes home page.
lines 37-39, starts server.
server.js
lines 1-6
These are all the requires for the installed packages
lines 8 - 9
Calling functions and app.sets
also declared the port for app.listen
line 10
setup the controller
line 14
delcares the method override package (require)
line 19
Override being called
line 23
Calling body parser package
line 26
sets the view engine for handlebars
line 29
sets the todo controller route
line 32 - 34
sets the home page route
37 - 39
tells the server to listen on port 3000
Documentation - server.js
Line 4-5,
is retrieving the express & hbs packages for use.
Show.hbs
Line 2 - 6
Outputs a customized error page for an invalid Id of the database
todos.js
Issue Example 1: [documentation] todos.js, lines 63-67, This how you Delete your Todos. The splice part of the function is how you remove an item from the array. While the redirect function brings you back to the main index route.
Use the html 'Delete' verb
[Document] todos.js lines 43-46 edit Todos
These lines take the user inputed id, description, urgent, but i doesnt edit them in the front page yet.
Todos.js exports line 39
What is exported when a file is required. In this case router is being exported with module.exports = router;.
Creating new Route
Issue Example 1: [documentation] todos.js, lines 14-16, creates a new route. You use a HTML "get" verb with router.
data.js
Holds the database objects and line 1 exports them.
[documentation] server.js, lines 1 - 14, importing packages & application settings
lines 1 - 6 >> requiring all of our packages and importing the data from each npm file that we have isntalled
lines 7 - 9 >> these lines contain our application settings by assigning the app & port variables
line 10 >> requires the todosController defined in '/controllers/todos'
line 14 >> requiring the methodOverride program we installed through npm install
[documentation] controllers/todos.js, lines 40-59, edit functionality
1.this router starts by calling the path to edit the todo "/:id/edit" then sends an object that is created with the todos info. i.e. id, description, urgent.
router.get('/:id/edit', (req, res) => { res.render('todos/edit', { todo: { id: req.params.id, description: data.seededTodos[req.params.id].description, urgent: data.seededTodos[req.params.id].urgent, } }); });
- This next portion takes the updated info and adds it back into the todo at "/:id" with the put method. This is utilizing the body-parser and method Override package to update todos. At the very end it redirects the page back to "/todos"
`router.put('/:id', (req, res) => {
var todoToEdit = data.seededTodos[req.params.id];
todoToEdit.description = req.body.description;
todoToEdit.urgent = req.body.urgent;
res.redirect('/todos');
})`
show.hbs structure
Issue Example 1: [documentation] show.hbs, lines 1-6, this is how each function in the array is organized so that is will show up in the hmtl.
the each function get it to touch each parameter in the array .
Creating an error allows for something to show up when a number entered is not in the array.
controller/todo.js
line 1-9
1- pulling in express npm package
2-opening the router for cross file comm.
3-assigning the file path to the variable data
6-creating a router path with router.get
7-console.log check for function
8-res.render is displaying the content inside the object [seededTodos] that is assigned to the todos dir, file 'todos'
[imports] server.js, lines 1-14
these are all imports that are nessesary for the program to run
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.