king0120 / crud-express-wdi12 Goto Github PK

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

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

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'

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.

these are all imports that are nessesary for the program to run

Line 4-5,

is retrieving the express & hbs packages for use.

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.

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

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

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

Holds the database object.

line 1 exports the data

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

[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)

line 4, 5, and 8

enable us to use express and handlebars

These lines take the user inputed id, description, urgent, but i doesnt edit them in the front page yet.

Creates our viewable 'todo' page

Sets ups items in a unordered list and pulls data from our todo.js controller /line 3

schema:

   <Edit Option>
   <Delete Option>

   <Edit Option>
   <Delete Option>

   <Edit Option>
   <Delete Option>

......

Issue Example 1: [documentation] todos.js, lines 14-16, creates a new route. You use a HTML "get" verb with router.

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

this is a test comment to see if i know what im doing

[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.

What is exported when a file is required. In this case router is being exported with module.exports = router;.

Holds the database objects and line 1 exports them.

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

Line 2 - 6
Outputs a customized error page for an invalid Id of the database

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

2. 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');
})`

[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 -

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

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.

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