The Captain's Log

Homework

Every great captain, whether on the waters or in the skies, keeps a daily log.

Let's build the perfect Captain's Log App for our extraordinary captains.

There are many ways to get started building an app. This lab follows a specific order for two reasons:

• to align with the content of lecture
• to give you an order to guide you to create small bits of functionality and test each one before moving on to the next part

If you finish lab early consider:

• try working with the date object! Try to make it look human readable in HTML. It's tricky! A Hint
• try working through the next section of the lab before it is covered in lecture - see what you can figure out
• SUPER BONUS - Once you finish this whole lab, add a second model for comments, it should have the name of the person who wrote it, and some text for the comment (maybe time stamps?). This model should 'belong' the the post, the data should be related in some way. Do you own research of how to set up a one-to-many relationship (one post can have many comments, one comment only belongs to one post), in MongoDB. Use Mongo Documentation, or Google.

Set up

Let's keep track of our Restful Routes as we build out our app. Copy/paste this table into a fresh file, open an excel/sheets spreadsheet or draw on a piece of paper. Feel free to add more columns and notes to help you put it all together.

Index, New and Create has been completed for you.

Restful Routes

1. In your software_homework/unit_2 folder
2. mkdir captains_log
3. cd catpains_log
4. create a new express app `

Use jsx

The notes below will be written usen jsx as the templating language to render our views.

Remember to install jsx run the command below

1. npm i express jsx-view-engine react react-dom method-override dotenv mongoose

New

1. create a new route in your server.js - be sure to follow the Restful convention
2. just have it res.send('new') as the response for now
3. make a views directory
4. add jsx to your server using our previous code as an example
5. touch views/New.jsx
6. Create the view, it should contain a form with the following:
7. form with action="/logs" and method="POST"
8. input type text for a title
9. input type textarea for an entry
10. input type checkbox for shipIsBroken
11. input type submit
12. change your res.send to res.render this view
13. don't forget to git add and git commit your work, give yourself an informative commit message so you can trace back your work, if you need to

Create

1. create a create route in your server.js - be sure to follow the Restful convention
2. just have it res.send('received') as the response for now
3. use and configure body-parser in your server.js (note, this package was once separate, but has been added back in to express more details
4. Kill your server and restart. Check to make sure it works by changing the res.send from a string to sending the req.body - it should send the data you inputted to your new form

5. Update your data

   1. change the input of your checkbox to be true/false rather than on
   2. now when you check your res.send(req.body) you should see true/false rather than 'on/off' - the rest of your data should stay the same
6. don't forget to git add and git commit your work, give yourself an informative commit message so you can trace back your work, if you need to

Mongo

1. install mongoose and configure it in your server.js
2. see fruits for correct mongo configuration
3. Hint .gitignore and .env also need to be setup

Logs Model

1. mkdir models
2. touch models/logs.js
3. Create the logs schema
4. title: string
5. entry: string

6. shipIsBroken: Boolean (bonus: set a default to true)

   • Super bonus:

     • as a second argument to mongoose.Schema(), add { timestamps: true }

Upgrade your Create Route

1. upgrade your code to create your log in MongoDB
2. have your route redirect to the show page after create
3. don't forget to git add and git commit your work, give yourself an informative commit message so you can trace back your work, if you need to
4. Stretch: make a seed file and seed it

Index Route

1. In server.js make an index route, be sure to follow the Restful convention
2. first, just test it by having it res.send('index')
3. Don't forget to fill out your Restful table!
4. create Index.jsx and change your res.send to res.render this page
5. upgrade your route and jsx to render all the logs in your database, just make an unordered list of the titles for now
6. Add a link to the create page
7. don't forget to git add and git commit your work, give yourself an informative commit message so you can trace back your work, if you need to

Show Route

1. Fill out your Restful table
2. In server.js make a show route, be sure to follow the Restful convention
3. create a mongo query and res.send your data as a string
4. upgrade your Index.jsx so that each title links to its show page
5. Create a Show.jsx and add HTML
6. show the title
7. show the entry
8. show whether the ship is broken or not
9. add a link back to the index page
10. bonus:
11. if you had added time stamps to your model, display the date the entry was created
12. upgrade your res.send to a res.render of your Show.jsx
13. don't forget to git add and git commit your work, give yourself an informative commit message so you can trace back your work, if you need to

Delete Route

1. Fill out your Restful table
2. in your Index.jsx, add a delete form
3. install and configure method-override
4. upgrade your delete form to have the appropriate action and method
5. make your delete route in your server.js
6. make your delete route delete your log and redirect back to your index route
7. don't forget to git add and git commit your work, give yourself an informative commit message so you can trace back your work, if you need to

Edit Route

1. Fill out your Restful table
2. in your Index.jsx, add a link to your edit route
3. create your edit route in your server.js
4. create your Edit.jsx
5. test it to make sure it works as expected (be sure to populate your form with your log's data)
6. don't forget to git add and git commit your work, give yourself an informative commit message so you can trace back your work, if you need to

Put Route

1. Fill out your Restful table
2. upgrade yourEdit.jsx form to have the appropriate action and method
3. create your PUT route
4. First, just have it res.send the updated log and check it is as expected
5. change the res.send to a res.redirect to your index page
6. don't forget to git add and git commit your work, give yourself an informative commit message so you can trace back your work, if you need to

Bonuses

1. The captain wants to keep track of eating habits: make a new set of routes in a new file in your controller folder called foodlogs
2. build out the 7 restful routes for foodlogs, include a new model with whatever properties make sense
3. make a seed file and seed it
4. have your update route redirect to the show page of the log that was edited
5. research res.redirect('back')
6. create a seed file and seed your database
7. work on your css, make this Captain's Log look awesome!
8. if you have timestamps, figure out how to edit/display the edited date