The Captain's Log

Learning Objectives

• Full CRUD app with a mongo database

Prerequisites

• JavaScript
• Express / Node
• Mongo / Mongoose

Multi-part/Multi-day Lab

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
• Use Fruits and Vegetables assignments as your guide, if you get a bug, try to figure out why before you immediately ask for help, you should be able to complete this in two days and it is an Individual deliverable.
• This is your opportunity to start to sink your your teeth into really getting good at writing code. Completing this means you are now ready to build anything.

Do's

• Copy paste
• Read your notes
• Rewatch short portions of the whole video
• Run the code even if you think its wrong, errors are your friends not the enemy (if you did 49 things right and got 11 errors thats 81.7% correct, that's a B if you were grading yourself, stop expecting an A on the first go)
• Read relevant pieces of documentation
• Look up small syntatctic things online like (oh i forgot how to do that special kind of loop)
• Copy and change Vegetables and fruits

Don'ts

• Stare at the screen and not start
• Ask for help before trying to get through the ENTIRE exercise
• Rewatch 80 videos and google 25 youtubes instead of challenging yourself to get it done.
• Reading irrelevent pieces of the docs
• Use AI to help you write the code.
• Get the answer from people in the class

If you finish lab early consider:

• adding some CSS and practice styling your app
• try working with the date object! Try to make it look human readable in HTML. It's tricky! A Hint
• 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 your own research on 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 Documents, 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 in the sheet, fill out the rest yourself.

Restful Routes

1. In your software_classwork folder
2. mkdir captains_log
3. cd catpains_log
4. create a new express app

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. install jsx-view-engine
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. 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. upgrade your data
6. change the input of your checkbox to be true/false rather than on
7. 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
8. 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

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

Router (bonus)

1. mkdir controllers
2. touch controllers/logs.js
3. work on refactoring your code so your logs routes are in your controller file, rather than in server.js (Bonus)

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