title
MongoDB Tutorial - CRUD app from scratch using Node.js

description
In this MongoDB Tutorial, you will learn how to use MongoDB to create a complete Todo CRUD Application. This project uses MongoDB, Node.js, Express.js, jQuery, Bootstrap, and the Fetch API. 💻Code: https://github.com/noobcoder1137/Todo_Rest_CRUD_Application_JQuery_FetchAPI ⭐️Course Contents ⭐️ ⌨️ (00:00) Overview ⌨️ (01:57) Setting Up our Application ⌨️ (11:27) Server Side - Read Portion ⌨️ (15:56) Server Side - Update Portion ⌨️ (21:17) Server Side - Create Portion ⌨️ (25:03) Server Side - Delete Portion ⌨️ (28:44) Creating Our Index.html File ⌨️ (41:25) Fetch API - GET Request ⌨️ (44:42) Fetch API - POST Request ⌨️ (49:39) Fetch API - DELETE Request ⌨️ (53:44) Fetch API - PUT Request ⌨️ (59:07) User Input Validation Tutorial from NoobCoder. Check out the NoobCoder YouTube channel: https://www.youtube.com/channel/UCV9MhzHCMx0Y83b5F8HWv-Q -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org

detail
{'title': 'MongoDB Tutorial - CRUD app from scratch using Node.js', 'heatmap': [{'end': 219.351, 'start': 121.849, 'weight': 0.727}, {'end': 705.396, 'start': 643.447, 'weight': 0.732}, {'end': 916.803, 'start': 869.893, 'weight': 1}, {'end': 1178.85, 'start': 1087.753, 'weight': 0.758}], 'summary': 'This tutorial covers building a crud application using node.js, express.js, mongodb, jquery, fetch api, and bootstrap. it includes setting up the express application and mongodb connection, updating server-side crud operations, building and displaying to-dos with bootstrap and fetch api, testing deletion and making http put requests, and implementing bootstrap alerts for success or error messages.', 'chapters': [{'end': 121.209, 'segs': [{'end': 38.473, 'src': 'embed', 'start': 16.756, 'weight': 1, 'content': [{'end': 25.503, 'text': "So the technologies that you should be somewhat familiar with are Node.js and Express.js, which we're going to be using for our server side.", 'start': 16.756, 'duration': 8.747}, {'end': 29.026, 'text': "We're going to be using a database called MongoDB.", 'start': 26.023, 'duration': 3.003}, {'end': 35.61, 'text': "And for our client side, we're going to be using jQuery, the Fetch API, and Bootstrap.", 'start': 29.306, 'duration': 6.304}, {'end': 38.473, 'text': 'And you should know a little bit about HTML.', 'start': 35.671, 'duration': 2.802}], 'summary': 'Use node.js, express.js, mongodb, jquery, fetch api, bootstrap for server and client side development with html.', 'duration': 21.717, 'max_score': 16.756, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI16756.jpg'}, {'end': 121.209, 'src': 'embed', 'start': 86.219, 'weight': 0, 'content': [{'end': 93.124, 'text': 'And And you can see that we get updated with clean room, hit refresh, data persists.', 'start': 86.219, 'duration': 6.905}, {'end': 96.927, 'text': 'And if I hit delete, it deletes the to do.', 'start': 93.844, 'duration': 3.083}, {'end': 111.525, 'text': 'And if I want to create multiple to dues, I could say clean room, clean house, and etc.', 'start': 98.068, 'duration': 13.457}, {'end': 116.127, 'text': 'And all this data will persist within our MongoDB database.', 'start': 111.685, 'duration': 4.442}, {'end': 121.209, 'text': 'Welcome to part one of building our CRUD application from scratch.', 'start': 116.787, 'duration': 4.422}], 'summary': 'Building crud app with mongodb, persists data, enables creation and deletion of to-do items.', 'duration': 34.99, 'max_score': 86.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI86219.jpg'}], 'start': 0.169, 'title': 'Building crud application overview', 'summary': "Provides an overview of building a crud application, highlighting required technologies like node.js, express.js, mongodb, jquery, fetch api, bootstrap, javascript, and demonstrating the to-do application's functionality and persistence within mongodb database.", 'chapters': [{'end': 121.209, 'start': 0.169, 'title': 'Building crud application overview', 'summary': "Provides an overview of the crud application to be built, including the technologies required such as node.js, express.js, mongodb, jquery, fetch api, bootstrap, and javascript, as well as a demonstration of the to-do application's functionality and persistence within the mongodb database.", 'duration': 121.04, 'highlights': ['The technologies required for the application include Node.js, Express.js, MongoDB, jQuery, Fetch API, Bootstrap, and JavaScript. The chapter emphasizes the technologies required for the application, including Node.js, Express.js, MongoDB, jQuery, Fetch API, Bootstrap, and JavaScript.', "The demonstration of the to-do application's functionality showcases the ability to create, edit, delete, and persist to-dos within the MongoDB database. The to-do application's functionality is demonstrated, highlighting the ability to create, edit, delete, and persist to-dos within the MongoDB database."]}], 'duration': 121.04, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI169.jpg', 'highlights': ["The demonstration of the to-do application's functionality showcases the ability to create, edit, delete, and persist to-dos within the MongoDB database.", 'The technologies required for the application include Node.js, Express.js, MongoDB, jQuery, Fetch API, Bootstrap, and JavaScript.']}, {'end': 836.997, 'segs': [{'end': 146.558, 'src': 'embed', 'start': 121.849, 'weight': 0, 'content': [{'end': 130.853, 'text': "So essentially, what we're going to do in this tutorial is install our packages, set up our Express application and connect to our MongoDB database.", 'start': 121.849, 'duration': 9.004}, {'end': 133.795, 'text': "So, to get started, I'm just going to go to file.", 'start': 131.454, 'duration': 2.341}, {'end': 135.756, 'text': "I'm going to go to open folder.", 'start': 133.795, 'duration': 1.961}, {'end': 139.017, 'text': "I'm going to right click, go to new.", 'start': 136.736, 'duration': 2.281}, {'end': 140.857, 'text': "we're going to create a new folder.", 'start': 139.017, 'duration': 1.84}, {'end': 144.538, 'text': "So I'm just going to call it MongoDB underscore CRUD.", 'start': 140.917, 'duration': 3.621}, {'end': 146.558, 'text': "Let's select it.", 'start': 145.738, 'duration': 0.82}], 'summary': 'Tutorial covers installing packages, setting up express app, and connecting to mongodb database.', 'duration': 24.709, 'max_score': 121.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI121849.jpg'}, {'end': 219.351, 'src': 'heatmap', 'start': 121.849, 'weight': 0.727, 'content': [{'end': 130.853, 'text': "So essentially, what we're going to do in this tutorial is install our packages, set up our Express application and connect to our MongoDB database.", 'start': 121.849, 'duration': 9.004}, {'end': 133.795, 'text': "So, to get started, I'm just going to go to file.", 'start': 131.454, 'duration': 2.341}, {'end': 135.756, 'text': "I'm going to go to open folder.", 'start': 133.795, 'duration': 1.961}, {'end': 139.017, 'text': "I'm going to right click, go to new.", 'start': 136.736, 'duration': 2.281}, {'end': 140.857, 'text': "we're going to create a new folder.", 'start': 139.017, 'duration': 1.84}, {'end': 144.538, 'text': "So I'm just going to call it MongoDB underscore CRUD.", 'start': 140.917, 'duration': 3.621}, {'end': 146.558, 'text': "Let's select it.", 'start': 145.738, 'duration': 0.82}, {'end': 151.119, 'text': "And afterwards, what I want to do now is let's open up the terminal.", 'start': 147.698, 'duration': 3.421}, {'end': 155.04, 'text': "And from here, I'm just going to type CLS to clear the terminal.", 'start': 151.879, 'duration': 3.161}, {'end': 159.321, 'text': "And that's because there's a visual bug with Visual Studio code at the moment.", 'start': 155.4, 'duration': 3.921}, {'end': 165.706, 'text': 'And what I want to do now is install our packages that our application is going to be dependent on.', 'start': 160.041, 'duration': 5.665}, {'end': 168.048, 'text': "So I'm going to type npm init.", 'start': 165.726, 'duration': 2.322}, {'end': 172.832, 'text': "And we're going to pass in the flag wife to get the default values.", 'start': 168.669, 'duration': 4.163}, {'end': 176.295, 'text': 'And now I want to install the body parser module.', 'start': 173.593, 'duration': 2.702}, {'end': 183.501, 'text': 'And the body parser module is going to be used to parse JSON between the client side and the server side.', 'start': 177.536, 'duration': 5.965}, {'end': 185.603, 'text': "Next, we're going to install Express.", 'start': 183.762, 'duration': 1.841}, {'end': 189.527, 'text': "we're just going to use Express for routing.", 'start': 187.445, 'duration': 2.082}, {'end': 192.209, 'text': "Next, we're going to install MongoDB.", 'start': 189.547, 'duration': 2.662}, {'end': 195.912, 'text': 'And this is just going to be the MongoDB drivers.', 'start': 192.229, 'duration': 3.683}, {'end': 199.255, 'text': 'And this is going to help us connect to our database.', 'start': 196.873, 'duration': 2.382}, {'end': 203.118, 'text': "And last but not least, we're going to install the path module.", 'start': 200.076, 'duration': 3.042}, {'end': 209.324, 'text': "And we're going to be using the path module just to serve a static HTML file to the user.", 'start': 203.639, 'duration': 5.685}, {'end': 213.767, 'text': "So, now that we have our packages installed, I'm just going to go up here.", 'start': 210.004, 'duration': 3.763}, {'end': 217.19, 'text': "I'm going to hit Ctrl B to bring up the Explorer.", 'start': 213.767, 'duration': 3.423}, {'end': 219.351, 'text': "I'm going to go to package dot JSON.", 'start': 217.19, 'duration': 2.161}], 'summary': 'Install packages, set up express app, and connect to mongodb for tutorial.', 'duration': 97.502, 'max_score': 121.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI121849.jpg'}, {'end': 195.912, 'src': 'embed', 'start': 168.669, 'weight': 2, 'content': [{'end': 172.832, 'text': "And we're going to pass in the flag wife to get the default values.", 'start': 168.669, 'duration': 4.163}, {'end': 176.295, 'text': 'And now I want to install the body parser module.', 'start': 173.593, 'duration': 2.702}, {'end': 183.501, 'text': 'And the body parser module is going to be used to parse JSON between the client side and the server side.', 'start': 177.536, 'duration': 5.965}, {'end': 185.603, 'text': "Next, we're going to install Express.", 'start': 183.762, 'duration': 1.841}, {'end': 189.527, 'text': "we're just going to use Express for routing.", 'start': 187.445, 'duration': 2.082}, {'end': 192.209, 'text': "Next, we're going to install MongoDB.", 'start': 189.547, 'duration': 2.662}, {'end': 195.912, 'text': 'And this is just going to be the MongoDB drivers.', 'start': 192.229, 'duration': 3.683}], 'summary': 'Installing wife flag, body parser, express, and mongodb drivers for routing and json parsing.', 'duration': 27.243, 'max_score': 168.669, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI168669.jpg'}, {'end': 479.414, 'src': 'embed', 'start': 447.725, 'weight': 4, 'content': [{'end': 450.328, 'text': "Next, let's actually write our connect method.", 'start': 447.725, 'duration': 2.603}, {'end': 454.572, 'text': "So I'm just gonna say cons connect is going to be equal.", 'start': 450.448, 'duration': 4.124}, {'end': 456.674, 'text': "And we're going to pass on a callback.", 'start': 455.012, 'duration': 1.662}, {'end': 459.957, 'text': "And we're just going to say the following.", 'start': 457.715, 'duration': 2.242}, {'end': 470.588, 'text': "If state dot DB, so if there is a database connection, we're just going to call the callback.", 'start': 463.12, 'duration': 7.468}, {'end': 479.414, 'text': "If there isn't a database connection, we're going to use the Mongo client to connect to the database.", 'start': 473.211, 'duration': 6.203}], 'summary': 'The connect method checks for a database connection and calls the callback if available, otherwise it connects to the database using the mongo client.', 'duration': 31.689, 'max_score': 447.725, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI447725.jpg'}, {'end': 705.396, 'src': 'heatmap', 'start': 643.447, 'weight': 0.732, 'content': [{'end': 656.639, 'text': "And we're just going to say connected to database app listening on port 3000.", 'start': 643.447, 'duration': 13.192}, {'end': 664.815, 'text': "So now if I was to save this, Let's put a semicolon here and then save it.", 'start': 656.639, 'duration': 8.176}, {'end': 667.4, 'text': "Let's go open up a terminal.", 'start': 665.737, 'duration': 1.663}, {'end': 669.785, 'text': 'Type CLS again.', 'start': 668.703, 'duration': 1.082}, {'end': 671.729, 'text': "I'm going to type node app.", 'start': 669.805, 'duration': 1.924}, {'end': 676.396, 'text': 'And you can see that we got no error.', 'start': 674.594, 'duration': 1.802}, {'end': 678.898, 'text': 'So that means we bypass this error statement.', 'start': 676.456, 'duration': 2.442}, {'end': 681.32, 'text': 'And we executed our L statement.', 'start': 679.658, 'duration': 1.662}, {'end': 683.001, 'text': "So we're connected to the database.", 'start': 681.36, 'duration': 1.641}, {'end': 686.524, 'text': 'And our app is listening on port 3000.', 'start': 683.502, 'duration': 3.022}, {'end': 690.628, 'text': 'Welcome to part two of building our CRUD application from scratch.', 'start': 686.524, 'duration': 4.104}, {'end': 697.294, 'text': "So in this tutorial, we're going to be covering our server side read portion of our CRUD application.", 'start': 691.268, 'duration': 6.026}, {'end': 700.155, 'text': "So we're going to code to get routes.", 'start': 697.854, 'duration': 2.301}, {'end': 705.396, 'text': 'The first get route is actually going to send a static HTML file to the user.', 'start': 700.715, 'duration': 4.681}], 'summary': 'Successfully connected to database, app listening on port 3000. building crud app from scratch, covering server side read portion.', 'duration': 61.949, 'max_score': 643.447, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI643447.jpg'}, {'end': 712.458, 'src': 'embed', 'start': 683.502, 'weight': 3, 'content': [{'end': 686.524, 'text': 'And our app is listening on port 3000.', 'start': 683.502, 'duration': 3.022}, {'end': 690.628, 'text': 'Welcome to part two of building our CRUD application from scratch.', 'start': 686.524, 'duration': 4.104}, {'end': 697.294, 'text': "So in this tutorial, we're going to be covering our server side read portion of our CRUD application.", 'start': 691.268, 'duration': 6.026}, {'end': 700.155, 'text': "So we're going to code to get routes.", 'start': 697.854, 'duration': 2.301}, {'end': 705.396, 'text': 'The first get route is actually going to send a static HTML file to the user.', 'start': 700.715, 'duration': 4.681}, {'end': 712.458, 'text': 'And the second get route is actually going to query the database for all the two dues within our to do collection.', 'start': 705.416, 'duration': 7.042}], 'summary': 'Building crud app, covers server-side read with two get routes.', 'duration': 28.956, 'max_score': 683.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI683502.jpg'}], 'start': 121.849, 'title': 'Setting up express application and mongodb connection', 'summary': "Covers installing packages, setting up an express application, and connecting to a mongodb database, including steps to create a new folder, clear the terminal, install necessary packages using 'npm init', installing modules like body parser, express, mongodb, and path, creating files like app.js and db.js, connecting to mongodb, coding methods for database interaction, establishing a server, and implementing server-side read functionality for a crud application.", 'chapters': [{'end': 168.048, 'start': 121.849, 'title': 'Setting up express application and mongodb connection', 'summary': "Covers the process of installing packages, setting up an express application, and connecting to a mongodb database, including steps to create a new folder, clear the terminal, and install necessary packages using 'npm init'.", 'duration': 46.199, 'highlights': ['The process involves installing packages, setting up an Express application, and connecting to a MongoDB database.', "The tutorial includes creating a new folder named 'MongoDB_CRUD' and clearing the terminal using 'CLS'.", "The speaker demonstrates the installation of necessary packages using 'npm init'."]}, {'end': 836.997, 'start': 168.669, 'title': 'Setting up and connecting to mongodb', 'summary': 'Covers setting up and connecting to mongodb, including installing necessary modules like body parser, express, mongodb, and path, and creating files like app.js and db.js. it also demonstrates connecting to mongodb and coding methods for database interaction, followed by establishing a server and implementing server-side read functionality for a crud application.', 'duration': 668.328, 'highlights': ['Setting up MongoDB and necessary modules The speaker explains the process of installing and setting up modules like body parser, Express, MongoDB drivers, and path module, which are essential for the project.', 'Creating app.js and DB.js files The speaker mentions creating app.js and DB.js files for coding the application and connecting to MongoDB.', 'Connecting to MongoDB and coding database interaction methods The transcript details the process of connecting to MongoDB, coding the connect method, and creating methods for getting the primary key and the database.', 'Establishing server and implementing server-side read functionality The chapter demonstrates setting up the server and implementing server-side read functionality for a CRUD application, including defining get routes to send static HTML file and query the database for to-dos.']}], 'duration': 715.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI121849.jpg', 'highlights': ["The tutorial includes creating a new folder named 'MongoDB_CRUD' and clearing the terminal using 'CLS'.", 'The process involves installing packages, setting up an Express application, and connecting to a MongoDB database.', 'The speaker explains the process of installing and setting up modules like body parser, Express, MongoDB drivers, and path module, which are essential for the project.', 'Establishing server and implementing server-side read functionality The chapter demonstrates setting up the server and implementing server-side read functionality for a CRUD application, including defining get routes to send static HTML file and query the database for to-dos.', 'Connecting to MongoDB and coding database interaction methods The transcript details the process of connecting to MongoDB, coding the connect method, and creating methods for getting the primary key and the database.']}, {'end': 1263.262, 'segs': [{'end': 916.803, 'src': 'heatmap', 'start': 869.893, 'weight': 1, 'content': [{'end': 874.434, 'text': "I'm going to type local hosts for 3000.", 'start': 869.893, 'duration': 4.541}, {'end': 878.355, 'text': 'And we called it get to dues.', 'start': 874.434, 'duration': 3.921}, {'end': 883.254, 'text': 'you can see that we get back an empty array.', 'start': 880.453, 'duration': 2.801}, {'end': 886.194, 'text': "And that's because we don't have anything within our database.", 'start': 883.314, 'duration': 2.88}, {'end': 893.356, 'text': "So let's head back to Visual Studio code, I'm going to hit Ctrl C cancel out of that, let's start up the Mongo shell.", 'start': 886.775, 'duration': 6.581}, {'end': 898.798, 'text': "And now I'm just gonna go back up here Ctrl B.", 'start': 893.376, 'duration': 5.422}, {'end': 901.018, 'text': "Let's find out what we named our database.", 'start': 898.798, 'duration': 2.22}, {'end': 903.819, 'text': 'So we named it crud MongoDB.', 'start': 901.098, 'duration': 2.721}, {'end': 908.46, 'text': "So I'm just going to say use crud MongoDB.", 'start': 903.839, 'duration': 4.621}, {'end': 910.881, 'text': "And I'm going to say DB dot.", 'start': 908.48, 'duration': 2.401}, {'end': 916.803, 'text': "And let's go back to app.js and see what we named our collection to do.", 'start': 911.981, 'duration': 4.822}], 'summary': 'Setting up local host for 3000, accessing crud mongodb database and collection to do.', 'duration': 46.91, 'max_score': 869.893, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI869893.jpg'}, {'end': 984.101, 'src': 'embed', 'start': 931.007, 'weight': 0, 'content': [{'end': 933.348, 'text': "And let's insert clean.", 'start': 931.007, 'duration': 2.341}, {'end': 935.568, 'text': "I don't know garage.", 'start': 933.368, 'duration': 2.2}, {'end': 937.269, 'text': "So let's insert that.", 'start': 936.269, 'duration': 1}, {'end': 941.373, 'text': "And Alright, so let's cancel out of that node app.", 'start': 937.289, 'duration': 4.084}, {'end': 947.48, 'text': "Let's wait for our Express application to boot up, head over to Chrome, hit refresh.", 'start': 942.414, 'duration': 5.066}, {'end': 955.068, 'text': 'And you can see that our to dues are being sent to the client side and that it is in JSON.', 'start': 948.581, 'duration': 6.487}, {'end': 959.637, 'text': 'Welcome to part three of building our CRUD application from scratch.', 'start': 955.834, 'duration': 3.803}, {'end': 966.542, 'text': "So in this tutorial, we're going to be covering our server side update portion of our CRUD application.", 'start': 960.217, 'duration': 6.325}, {'end': 969.344, 'text': "So to get started, let's actually code our route.", 'start': 966.782, 'duration': 2.562}, {'end': 970.965, 'text': "So I'm just gonna say app dot put.", 'start': 969.424, 'duration': 1.541}, {'end': 975.931, 'text': "And I'm going to pass in forward slash colon ID.", 'start': 970.985, 'duration': 4.946}, {'end': 984.101, 'text': 'Now this is going to be our route param and ID is going to be the primary key of the document that we wish to update.', 'start': 976.492, 'duration': 7.609}], 'summary': 'Building crud app from scratch, covering server side update.', 'duration': 53.094, 'max_score': 931.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI931007.jpg'}, {'end': 1178.85, 'src': 'heatmap', 'start': 1087.753, 'weight': 0.758, 'content': [{'end': 1090.454, 'text': "Now from here, we're going to pass in our callback function.", 'start': 1087.753, 'duration': 2.701}, {'end': 1093.615, 'text': "So I'm just going to say error, and we're going to get the result.", 'start': 1090.654, 'duration': 2.961}, {'end': 1096.78, 'text': "So now let's scroll down here.", 'start': 1095.179, 'duration': 1.601}, {'end': 1100.443, 'text': 'And from here, we could test if there was any errors.', 'start': 1097.721, 'duration': 2.722}, {'end': 1103.185, 'text': "And I'm just going to print it out onto the console.", 'start': 1101.043, 'duration': 2.142}, {'end': 1108.949, 'text': 'But traditionally we want to send something back to the user to let the user know that.', 'start': 1103.845, 'duration': 5.104}, {'end': 1114.313, 'text': "hey, when we tried to update the document that you want it, we couldn't fulfill that request.", 'start': 1108.949, 'duration': 5.364}, {'end': 1116.615, 'text': "So now I'm just going to say else.", 'start': 1114.974, 'duration': 1.641}, {'end': 1123.08, 'text': "So if everything went well, we're going to be sending that data back to the user in JSON format.", 'start': 1116.975, 'duration': 6.105}, {'end': 1124.741, 'text': "So I'm just going to say result.", 'start': 1123.34, 'duration': 1.401}, {'end': 1128.105, 'text': "So now let's add a semicolon here.", 'start': 1126.325, 'duration': 1.78}, {'end': 1129.886, 'text': "And let's just double check this.", 'start': 1128.405, 'duration': 1.481}, {'end': 1134.287, 'text': 'And all this looks good.', 'start': 1133.066, 'duration': 1.221}, {'end': 1136.047, 'text': "So let's actually test this out.", 'start': 1134.367, 'duration': 1.68}, {'end': 1141.568, 'text': "So I'm going to open up the terminal, clear the terminal node app.", 'start': 1136.147, 'duration': 5.421}, {'end': 1146.509, 'text': "Let's start up our application, we're going to go to postman.", 'start': 1142.449, 'duration': 4.06}, {'end': 1150.23, 'text': 'And you can see here that I already have this setup.', 'start': 1146.529, 'duration': 3.701}, {'end': 1154.031, 'text': 'So the URL is localhost port 3000.', 'start': 1150.33, 'duration': 3.701}, {'end': 1157.694, 'text': 'This is the ID of one of the documents that I have currently.', 'start': 1154.031, 'duration': 3.663}, {'end': 1159.956, 'text': "We're making a put request.", 'start': 1158.254, 'duration': 1.702}, {'end': 1165.059, 'text': "We're sending back JSON data here so you can see here.", 'start': 1161.036, 'duration': 4.023}, {'end': 1167.421, 'text': "And this is the data that we're sending back.", 'start': 1165.62, 'duration': 1.801}, {'end': 1169.403, 'text': 'And we can make this whatever we want.', 'start': 1167.701, 'duration': 1.702}, {'end': 1176.048, 'text': "So let's just change this to clean something for tutorial.", 'start': 1169.463, 'duration': 6.585}, {'end': 1177.329, 'text': 'All right.', 'start': 1176.068, 'duration': 1.261}, {'end': 1178.85, 'text': 'So this is going to be our to do.', 'start': 1177.349, 'duration': 1.501}], 'summary': 'Demonstrating error handling and sending json data in a node.js application.', 'duration': 91.097, 'max_score': 1087.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI1087753.jpg'}, {'end': 1128.105, 'src': 'embed', 'start': 1097.721, 'weight': 2, 'content': [{'end': 1100.443, 'text': 'And from here, we could test if there was any errors.', 'start': 1097.721, 'duration': 2.722}, {'end': 1103.185, 'text': "And I'm just going to print it out onto the console.", 'start': 1101.043, 'duration': 2.142}, {'end': 1108.949, 'text': 'But traditionally we want to send something back to the user to let the user know that.', 'start': 1103.845, 'duration': 5.104}, {'end': 1114.313, 'text': "hey, when we tried to update the document that you want it, we couldn't fulfill that request.", 'start': 1108.949, 'duration': 5.364}, {'end': 1116.615, 'text': "So now I'm just going to say else.", 'start': 1114.974, 'duration': 1.641}, {'end': 1123.08, 'text': "So if everything went well, we're going to be sending that data back to the user in JSON format.", 'start': 1116.975, 'duration': 6.105}, {'end': 1124.741, 'text': "So I'm just going to say result.", 'start': 1123.34, 'duration': 1.401}, {'end': 1128.105, 'text': "So now let's add a semicolon here.", 'start': 1126.325, 'duration': 1.78}], 'summary': 'Testing for errors and returning json data to the user.', 'duration': 30.384, 'max_score': 1097.721, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI1097721.jpg'}, {'end': 1263.262, 'src': 'embed', 'start': 1237.253, 'weight': 3, 'content': [{'end': 1245.276, 'text': "And you can see right here, the number that we've updated is one, this document did indeed exist within our database.", 'start': 1237.253, 'duration': 8.023}, {'end': 1246.016, 'text': "So it's true.", 'start': 1245.316, 'duration': 0.7}, {'end': 1250.938, 'text': 'And you can see the values that we have, the ID is still the same.', 'start': 1246.696, 'duration': 4.242}, {'end': 1255.059, 'text': "But we've updated it to clean something for tutorial.", 'start': 1251.438, 'duration': 3.621}, {'end': 1259.761, 'text': "And if we hit another thing, let's actually make sure that this update is working.", 'start': 1255.919, 'duration': 3.842}, {'end': 1263.262, 'text': "And we're going to say change to something else.", 'start': 1260.661, 'duration': 2.601}], 'summary': 'One document updated with new values for tutorial.', 'duration': 26.009, 'max_score': 1237.253, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI1237253.jpg'}], 'start': 836.997, 'title': 'Updating server-side crud application', 'summary': 'Covers testing and updating a server-side crud application, including inserting data into a mongodb database, testing the functionality, and coding the server-side update portion. it also demonstrates updating documents in a database using a callback function, successful document update, and error handling for incorrect id input.', 'chapters': [{'end': 1068.465, 'start': 836.997, 'title': 'Server-side crud application update', 'summary': 'Covers testing and updating a server-side crud application, including inserting data into a mongodb database, testing the functionality, and coding the server-side update portion of the application.', 'duration': 231.468, 'highlights': ['Testing the server-side CRUD application by inserting data into the MongoDB database and confirming the functionality by fetching and displaying the JSON data in the browser.', 'Coding the server-side update portion of the CRUD application by defining the route, extracting the ID from the request parameters, retrieving user input in JSON format, and connecting to the database to update the document based on the provided ID and user input.']}, {'end': 1263.262, 'start': 1068.925, 'title': 'Updating documents and error handling', 'summary': 'Demonstrates updating documents in a database using a callback function and error handling, resulting in successful update of one document and handling of incorrect id input.', 'duration': 194.337, 'highlights': ['The chapter demonstrates updating documents in a database using a callback function and error handling. The code snippet explains the process of updating documents in a database, including setting the return original to false and passing in a callback function to handle errors and successful updates.', "Successful update of one document is shown after correcting the ID input. The demonstration includes the successful update of a document in the database, with the number of updated documents being one and the 'updated existing' flag set to true after providing the correct ID input."]}], 'duration': 426.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI836997.jpg', 'highlights': ['Testing the server-side CRUD application by inserting data into the MongoDB database and confirming the functionality by fetching and displaying the JSON data in the browser.', 'Coding the server-side update portion of the CRUD application by defining the route, extracting the ID from the request parameters, retrieving user input in JSON format, and connecting to the database to update the document based on the provided ID and user input.', 'The chapter demonstrates updating documents in a database using a callback function and error handling. The code snippet explains the process of updating documents in a database, including setting the return original to false and passing in a callback function to handle errors and successful updates.', "Successful update of one document is shown after correcting the ID input. The demonstration includes the successful update of a document in the database, with the number of updated documents being one and the 'updated existing' flag set to true after providing the correct ID input."]}, {'end': 1726.96, 'segs': [{'end': 1329.401, 'src': 'embed', 'start': 1289.809, 'weight': 3, 'content': [{'end': 1291.709, 'text': "So I'm just gonna say app that post.", 'start': 1289.809, 'duration': 1.9}, {'end': 1296.25, 'text': "So we're going to be posting the to do that we want to insert within our database.", 'start': 1292.149, 'duration': 4.101}, {'end': 1304.493, 'text': "So we're going to give it the path of forward slash, and then we're just going to pass in our function, the request object and the response object.", 'start': 1297.011, 'duration': 7.482}, {'end': 1313.368, 'text': 'Now from here, what I want to end up doing is getting the users input the to do that the user wants to insert inside the database.', 'start': 1305.822, 'duration': 7.546}, {'end': 1316.391, 'text': "So I'm just going to say cons user input.", 'start': 1313.989, 'duration': 2.402}, {'end': 1319.994, 'text': "And we're just going to say request that body.", 'start': 1317.952, 'duration': 2.042}, {'end': 1323.817, 'text': 'So the client side, the user is going to post JSON to us.', 'start': 1320.534, 'duration': 3.283}, {'end': 1326.519, 'text': "And that's going to be within the request that body.", 'start': 1324.237, 'duration': 2.282}, {'end': 1329.401, 'text': "Next, let's actually get the database connection.", 'start': 1327.099, 'duration': 2.302}], 'summary': 'Creating an app to post user input to database via json.', 'duration': 39.592, 'max_score': 1289.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI1289809.jpg'}, {'end': 1387.045, 'src': 'embed', 'start': 1359.471, 'weight': 5, 'content': [{'end': 1364.213, 'text': "Now from here, we're going to test if there's any errors, I'm just going to log it onto the console.", 'start': 1359.471, 'duration': 4.742}, {'end': 1371.637, 'text': 'Now, in a production environment, you will want to say something more than just logging it onto the console.', 'start': 1365.014, 'duration': 6.623}, {'end': 1375.019, 'text': "you'll probably want to display an error message to the user.", 'start': 1371.637, 'duration': 3.382}, {'end': 1387.045, 'text': "Next, I'm just going to say else, we're just going to send it back to the user, I'm just going to pass it as JSON, I'm going to say result, result.", 'start': 1376.5, 'duration': 10.545}], 'summary': 'Testing for errors and displaying error messages in a production environment, and returning results as json.', 'duration': 27.574, 'max_score': 1359.471, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI1359471.jpg'}, {'end': 1518.999, 'src': 'embed', 'start': 1495.393, 'weight': 0, 'content': [{'end': 1502.355, 'text': 'And you can see right here that our to do clean something was inserted inside the database properly.', 'start': 1495.393, 'duration': 6.962}, {'end': 1506.796, 'text': 'Welcome to part five of building our CRUD application from scratch.', 'start': 1502.895, 'duration': 3.901}, {'end': 1513.738, 'text': "So in this tutorial, we're going to be covering our server side delete portion of our CRUD application.", 'start': 1507.416, 'duration': 6.322}, {'end': 1516.859, 'text': "So to get started, let's actually code our route.", 'start': 1514.278, 'duration': 2.581}, {'end': 1518.999, 'text': "So I'm just going to say app dot delete.", 'start': 1516.959, 'duration': 2.04}], 'summary': 'Building crud application: covering server side delete portion.', 'duration': 23.606, 'max_score': 1495.393, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI1495393.jpg'}, {'end': 1734.025, 'src': 'embed', 'start': 1702.816, 'weight': 2, 'content': [{'end': 1704.277, 'text': 'So everything went fine.', 'start': 1702.816, 'duration': 1.461}, {'end': 1706.518, 'text': "So let's actually prove this out.", 'start': 1704.897, 'duration': 1.621}, {'end': 1711.561, 'text': 'If I go back here, get our to dues one more time, hit send.', 'start': 1707.439, 'duration': 4.122}, {'end': 1716.872, 'text': 'you can see that the document that was there is no longer there.', 'start': 1713.484, 'duration': 3.388}, {'end': 1722.525, 'text': 'So this is pretty much the server side delete portion of our CRUD application.', 'start': 1717.433, 'duration': 5.092}, {'end': 1726.96, 'text': 'Welcome to part six of building our CRUD application from scratch.', 'start': 1723.157, 'duration': 3.803}, {'end': 1734.025, 'text': "So in this tutorial, we're going to be building our static HTML file that we're going to be serving to our user.", 'start': 1727.54, 'duration': 6.485}], 'summary': 'Building server-side delete functionality for crud application, proceeding to create static html file.', 'duration': 31.209, 'max_score': 1702.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI1702816.jpg'}], 'start': 1264.342, 'title': 'Server-side crud operations', 'summary': 'Covers server-side create and delete operations for the crud application, including coding routes, connecting to the database, and successful document creation and deletion, with a focus on handling errors and verification.', 'chapters': [{'end': 1375.019, 'start': 1264.342, 'title': 'Server-side create operation for crud application', 'summary': 'Covers the server-side create portion of the crud application, focusing on coding the route for posting the to-do, getting user input, connecting to the database, and handling potential errors.', 'duration': 110.677, 'highlights': ['The chapter covers the server-side create portion of the CRUD application It focuses on implementing the server-side functionality for creating and inserting to-dos into the database.', 'Coding the route for posting the to-do and getting user input The tutorial demonstrates the process of coding the route for posting the to-do and extracting user input from the request object.', 'Connecting to the database and inserting user input The chapter explains the process of establishing a database connection and inserting the user input into the to-do collection.', 'Handling potential errors during the insertion process The tutorial emphasizes the importance of handling potential errors during the insertion process, highlighting the need for proper error management in a production environment.']}, {'end': 1726.96, 'start': 1376.5, 'title': 'Crud application server-side delete', 'summary': 'Covers the implementation of server-side delete functionality in the crud application, including coding the route, connecting to the database, and handling the deletion process, resulting in successful deletion of a document and verification through a get request.', 'duration': 350.46, 'highlights': ['Implemented server-side delete functionality in the CRUD application. Demonstrates coding the route, connecting to the database, and handling the deletion process.', 'Successfully deleted a document from the database. Verified the deletion process, resulting in the removal of the specified document.', "Tested the CRUD application's server-side delete functionality with Postman. Used Postman to send delete requests and verify the successful deletion of a document."]}], 'duration': 462.618, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI1264342.jpg', 'highlights': ['Covers server-side create and delete operations for the CRUD application.', 'Demonstrates coding the route, connecting to the database, and handling the deletion process.', 'Successfully deleted a document from the database.', 'Coding the route for posting the to-do and getting user input.', 'Connecting to the database and inserting user input.', 'Handling potential errors during the insertion process.', "Tested the CRUD application's server-side delete functionality with Postman."]}, {'end': 3127.263, 'segs': [{'end': 1754.581, 'src': 'embed', 'start': 1727.54, 'weight': 0, 'content': [{'end': 1734.025, 'text': "So in this tutorial, we're going to be building our static HTML file that we're going to be serving to our user.", 'start': 1727.54, 'duration': 6.485}, {'end': 1737.528, 'text': "So in the previous tutorials, we've created to get routes.", 'start': 1734.226, 'duration': 3.302}, {'end': 1741.391, 'text': 'One of them is to serve the static HTML file to the user.', 'start': 1738.269, 'duration': 3.122}, {'end': 1746.955, 'text': "And the second get route is to actually get all to do's within our database.", 'start': 1741.972, 'duration': 4.983}, {'end': 1749.858, 'text': "So we're going to be focusing on this route.", 'start': 1747.236, 'duration': 2.622}, {'end': 1754.581, 'text': "So, to get started, I'm just gonna hit Ctrl B to bring up the Explorer.", 'start': 1750.498, 'duration': 4.083}], 'summary': 'Building static html file and defining two get routes for serving to-dos and html file.', 'duration': 27.041, 'max_score': 1727.54, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI1727540.jpg'}, {'end': 1834.159, 'src': 'embed', 'start': 1794.528, 'weight': 1, 'content': [{'end': 1796.61, 'text': "And we're going to get rid of our h1 tag here.", 'start': 1794.528, 'duration': 2.082}, {'end': 1799.732, 'text': "So from here, let's give it a container.", 'start': 1797.61, 'duration': 2.122}, {'end': 1808.165, 'text': 'The first row is going to be where we input our to do user input.', 'start': 1804.281, 'duration': 3.884}, {'end': 1814.511, 'text': "The second row is going to be an unordered list, which is going to be displaying our to do's to the user.", 'start': 1808.405, 'duration': 6.106}, {'end': 1832.939, 'text': "Now from here, let's head over back to bootstrap.", 'start': 1830.618, 'duration': 2.321}, {'end': 1834.159, 'text': "And we're going to get our form.", 'start': 1833.079, 'duration': 1.08}], 'summary': 'Using bootstrap, implement a form for to-do user input and a list to display the to-dos.', 'duration': 39.631, 'max_score': 1794.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI1794528.jpg'}, {'end': 2190.97, 'src': 'embed', 'start': 2126.312, 'weight': 4, 'content': [{'end': 2132.995, 'text': "And you can see that we're taking advantage of the primary key that we get from our to do document to make it unique.", 'start': 2126.312, 'duration': 6.683}, {'end': 2136.017, 'text': "Next, we're going to code delete ID.", 'start': 2134.356, 'duration': 1.661}, {'end': 2140.835, 'text': 'And delete ID is going to be attached to our delete buttons.', 'start': 2138.152, 'duration': 2.683}, {'end': 2143.559, 'text': 'So we could attach a click event to our delete button.', 'start': 2140.915, 'duration': 2.644}, {'end': 2152.93, 'text': "Next, we're going to create a list item ID.", 'start': 2149.786, 'duration': 3.144}, {'end': 2158.356, 'text': 'And this is going to be the ID of the Li element within our unordered list.', 'start': 2153.851, 'duration': 4.505}, {'end': 2172.909, 'text': "And the last ID that we're going to create is going to be called to do ID, and this is going to be the ID of our to do.", 'start': 2166.207, 'duration': 6.702}, {'end': 2180.659, 'text': "Now let's code a another helper function.", 'start': 2178.516, 'duration': 2.143}, {'end': 2187.266, 'text': 'And this function is actually going to build the template, the list item that we want to append to our unordered list.', 'start': 2180.919, 'duration': 6.347}, {'end': 2190.97, 'text': "I'm just going to say cons, build template.", 'start': 2188.047, 'duration': 2.923}], 'summary': 'Utilizing primary key for document uniqueness, creating various ids for elements, and coding helper function to build list item template.', 'duration': 64.658, 'max_score': 2126.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI2126312.jpg'}, {'end': 2549.501, 'src': 'embed', 'start': 2498.363, 'weight': 2, 'content': [{'end': 2504.247, 'text': 'So if you remember from our previous tutorials, we coded this get route, this get to dues.', 'start': 2498.363, 'duration': 5.884}, {'end': 2511.353, 'text': 'And the job of our get to dues route is to actually get all our to dues from the database and return it.', 'start': 2504.908, 'duration': 6.445}, {'end': 2514.576, 'text': "and it's going to be returned within an array.", 'start': 2511.913, 'duration': 2.663}, {'end': 2523.406, 'text': "So now if I head over to our index dot HTML, what we're going to do is have the fetch API call this get to do's route.", 'start': 2515.137, 'duration': 8.269}, {'end': 2525.188, 'text': "I'm just going to go here.", 'start': 2524.187, 'duration': 1.001}, {'end': 2529.673, 'text': "And I'm going to create a function called get to do so I'm just gonna say cons.", 'start': 2525.208, 'duration': 4.465}, {'end': 2530.995, 'text': "Yep, to do's.", 'start': 2530.274, 'duration': 0.721}, {'end': 2534.956, 'text': 'within here, we could use the fetch API.', 'start': 2533.175, 'duration': 1.781}, {'end': 2536.516, 'text': "So I'm just going to say fetch.", 'start': 2535.156, 'duration': 1.36}, {'end': 2540.778, 'text': "And it's going to be the URL or the endpoint that we want to hit.", 'start': 2537.457, 'duration': 3.321}, {'end': 2543.159, 'text': "So I'm just going to say get to dues.", 'start': 2540.938, 'duration': 2.221}, {'end': 2547.34, 'text': 'The next argument is going to be the type of method that we want to use.', 'start': 2543.619, 'duration': 3.721}, {'end': 2549.501, 'text': 'So we coded a get method.', 'start': 2547.781, 'duration': 1.72}], 'summary': 'The tutorial covers coding a get route to retrieve to-dos from the database using the fetch api.', 'duration': 51.138, 'max_score': 2498.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI2498363.jpg'}, {'end': 2716.342, 'src': 'embed', 'start': 2669.476, 'weight': 3, 'content': [{'end': 2676.978, 'text': "Once we build this HTML template, we're returning it, and is going to be appended to our unordered list.", 'start': 2669.476, 'duration': 7.502}, {'end': 2681.38, 'text': "So that's pretty much how we are displaying our to dues to the user.", 'start': 2677.138, 'duration': 4.242}, {'end': 2686.181, 'text': 'Welcome to part eight of building our CRUD application from scratch.', 'start': 2682.2, 'duration': 3.981}, {'end': 2692.023, 'text': "On this tutorial, we're going to be making HTTP post requests using the fetch API.", 'start': 2686.821, 'duration': 5.202}, {'end': 2699.689, 'text': 'So, if you remember from our previous tutorial, we coded this post route and we just gave it forward slash.', 'start': 2692.643, 'duration': 7.046}, {'end': 2702.011, 'text': "it's going to take data from the users.", 'start': 2699.689, 'duration': 2.322}, {'end': 2704.653, 'text': "we're going to have the post data back via the body.", 'start': 2702.011, 'duration': 2.642}, {'end': 2711.758, 'text': 'And you can see that it returns two things the result, whether or not we successfully deleted the item or not,', 'start': 2704.973, 'duration': 6.785}, {'end': 2716.342, 'text': 'and it returns back the inserted document that we just inserted.', 'start': 2711.758, 'duration': 4.584}], 'summary': 'Building crud app, displaying to-dos, making http post requests using fetch api.', 'duration': 46.866, 'max_score': 2669.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI2669476.jpg'}, {'end': 2766.485, 'src': 'embed', 'start': 2740.375, 'weight': 7, 'content': [{'end': 2744.781, 'text': "And what we're going to do is say e dot prevent default from occurring.", 'start': 2740.375, 'duration': 4.406}, {'end': 2747.704, 'text': "Next, we're going to call it a fetch API.", 'start': 2744.801, 'duration': 2.903}, {'end': 2751.91, 'text': "So I'm just going to say fetch, we're going to use our endpoint of forward slash.", 'start': 2747.764, 'duration': 4.146}, {'end': 2755.353, 'text': 'The next argument is going to be our options.', 'start': 2752.851, 'duration': 2.502}, {'end': 2760.319, 'text': "So the first option is we're posting data back to the server.", 'start': 2755.574, 'duration': 4.745}, {'end': 2761.7, 'text': "I'm just going to say post.", 'start': 2760.319, 'duration': 1.381}, {'end': 2766.485, 'text': "our second property is going to be the body what we're sending back to the database.", 'start': 2761.7, 'duration': 4.785}], 'summary': 'Using fetch api to post data to the server.', 'duration': 26.11, 'max_score': 2740.375, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI2740375.jpg'}, {'end': 2982.848, 'src': 'embed', 'start': 2949.929, 'weight': 9, 'content': [{'end': 2951.13, 'text': "Let's open up a browser.", 'start': 2949.929, 'duration': 1.201}, {'end': 2953.411, 'text': "So now let's actually test this out.", 'start': 2951.15, 'duration': 2.261}, {'end': 2960.935, 'text': "So I'm just going to come up here and testing post, I'm going to click the Create button.", 'start': 2953.451, 'duration': 7.484}, {'end': 2966.698, 'text': 'And you can see that our to do was successfully posted to the database.', 'start': 2962.316, 'duration': 4.382}, {'end': 2970.761, 'text': "So I'm just going to hit refresh to see if it actually worked.", 'start': 2967.259, 'duration': 3.502}, {'end': 2973.602, 'text': 'And you can see that our data is persisting.', 'start': 2971.341, 'duration': 2.261}, {'end': 2978.345, 'text': "So that's the basics of using the fetch API to post to the server.", 'start': 2973.702, 'duration': 4.643}, {'end': 2982.848, 'text': 'And welcome to part nine of building our CRUD application from scratch.', 'start': 2978.965, 'duration': 3.883}], 'summary': 'Testing posting a to-do was successful, data persists using fetch api. part nine of building crud application.', 'duration': 32.919, 'max_score': 2949.929, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI2949929.jpg'}, {'end': 3046.662, 'src': 'embed', 'start': 3019.838, 'weight': 10, 'content': [{'end': 3023.382, 'text': "And let's actually code our delete to do function.", 'start': 3019.838, 'duration': 3.544}, {'end': 3027.126, 'text': "So now from here, I'm just going to say cons, delete to do.", 'start': 3023.522, 'duration': 3.604}, {'end': 3036.82, 'text': "it's going to take in three parameters is going to take a to do is going to take the list item ID, and it's going to take the delete ID.", 'start': 3028.618, 'duration': 8.202}, {'end': 3046.662, 'text': 'Now to do is the document that we want to delete list item ID is the ID of the list element within our unordered list that we want to delete.', 'start': 3037.34, 'duration': 9.322}], 'summary': 'Code delete to do function with 3 parameters: to do, list item id, and delete id.', 'duration': 26.824, 'max_score': 3019.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI3019838.jpg'}], 'start': 1727.54, 'title': 'Building and displaying to-dos with bootstrap and fetch api', 'summary': 'Covers building static html and displaying to-dos with bootstrap and javascript, making http post requests, and using the fetch api for http requests. it includes creating user input fields, displaying to-do lists, making http get and post requests, and using the fetch api for posting data, making delete requests, and adding click events.', 'chapters': [{'end': 1932.189, 'start': 1727.54, 'title': 'Building static html with bootstrap', 'summary': 'Focuses on building a static html file using bootstrap, including creating user input fields and displaying to-do list, and using the get routes to serve the file and retrieve all to-dos from the database.', 'duration': 204.649, 'highlights': ['The chapter focuses on building a static HTML file using Bootstrap. The tutorial demonstrates the process of creating a static HTML file using Bootstrap for a to-do list application.', 'Creating user input fields and displaying to-do list. The tutorial includes creating a form for user input and an unordered list for displaying the to-do list.', 'Using the get routes to serve the file and retrieve all to-dos from the database. The chapter utilizes get routes to serve the static HTML file and retrieve all to-dos from the database.']}, {'end': 2575.521, 'start': 1932.229, 'title': 'Displaying to-dos with bootstrap and javascript', 'summary': 'Demonstrates the process of displaying to-dos to the user using bootstrap for the unordered list, javascript for building unique ids and appending list items, as well as making an http get request to fetch to-dos from the server api.', 'duration': 643.292, 'highlights': ['The chapter demonstrates the process of displaying to-dos to the user using Bootstrap for the unordered list, JavaScript for building unique IDs and appending list items, as well as making an HTTP GET request to fetch to-dos from the server API. The tutorial covers the utilization of Bootstrap for creating an unordered list, JavaScript for building unique IDs and appending list items, and making an HTTP GET request to fetch to-dos from the server API.', 'The tutorial introduces the process of creating unique IDs for HTML elements such as edit buttons, delete buttons, list items, and to-dos, utilizing the primary key from the to-do document to ensure uniqueness. The tutorial introduces the process of creating unique IDs for HTML elements such as edit buttons, delete buttons, list items, and to-dos, utilizing the primary key from the to-do document to ensure uniqueness.', "The tutorial explains the process of appending list items to the unordered list using the 'build template' method, which takes in to-do data and unique IDs as parameters. The tutorial explains the process of appending list items to the unordered list using the 'build template' method, which takes in to-do data and unique IDs as parameters.", 'The chapter demonstrates the process of making an HTTP GET request to fetch to-dos from the server API using the fetch API and parsing the JSON response. The chapter demonstrates the process of making an HTTP GET request to fetch to-dos from the server API using the fetch API and parsing the JSON response.']}, {'end': 2825.16, 'start': 2575.541, 'title': 'Displaying to-dos and making http post requests', 'summary': 'Explains how to display to-dos on a web page using unique ids and html elements, and covers making http post requests using the fetch api, with a focus on preventing default form submission, using the post route, and sending data back to the server. the tutorial also demonstrates returning the result of the post request and the inserted document.', 'duration': 249.619, 'highlights': ['The tutorial covers displaying to-dos on a web page using unique IDs and HTML elements. The process of displaying to-dos on a web page is explained, including the use of unique IDs and HTML elements.', 'The tutorial demonstrates making HTTP post requests using the fetch API and preventing default form submission. The tutorial covers the process of making HTTP post requests using the fetch API and preventing default form submission.', 'The tutorial explains sending data back to the server and returning the result of the post request and the inserted document. The tutorial explains the process of sending data back to the server, and returning the result of the post request and the inserted document.']}, {'end': 3127.263, 'start': 2825.16, 'title': 'Using fetch api for http requests', 'summary': 'Covers using the fetch api to make http requests, including posting data to the server and making a delete request, with a focus on successfully inserting documents, testing the insertion, and resetting input. it also includes creating a delete to do function and adding a click event to the delete button, ultimately making a delete request using the fetch api.', 'duration': 302.103, 'highlights': ["Successfully inserting a to do document into the database The tutorial emphasizes the successful insertion of a to do document into the database, with the condition 'data result okay' and 'data result n' both equaling one indicating successful insertion.", 'Testing post functionality and confirming data persistence The demonstration involves testing the post functionality by clicking the Create button, resulting in a successful post to the database and confirming data persistence upon refreshing the browser.', 'Creating a delete to do function and adding a click event to the delete button The tutorial covers the creation of a delete to do function, taking in parameters for the to do document, list item ID, and delete ID, as well as adding a click event to the delete button.']}], 'duration': 1399.723, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI1727540.jpg', 'highlights': ['The chapter focuses on building a static HTML file using Bootstrap for a to-do list application.', 'Creating user input fields and displaying to-do list with a form and an unordered list.', 'Using get routes to serve the file and retrieve all to-dos from the database.', 'Utilizing Bootstrap for creating an unordered list, JavaScript for building unique IDs and appending list items, and making an HTTP GET request to fetch to-dos from the server API.', "Introducing the process of creating unique IDs for HTML elements and appending list items to the unordered list using the 'build template' method.", 'Demonstrating the process of making an HTTP GET request to fetch to-dos from the server API using the fetch API and parsing the JSON response.', 'Explaining the process of displaying to-dos on a web page using unique IDs and HTML elements.', 'Covering the process of making HTTP post requests using the fetch API and preventing default form submission.', 'Explaining sending data back to the server and returning the result of the post request and the inserted document.', 'Emphasizing the successful insertion of a to-do document into the database and testing post functionality for data persistence.', 'Creating a delete to-do function, taking in parameters for the to-do document, list item ID, and delete ID, and adding a click event to the delete button.']}, {'end': 3929.774, 'segs': [{'end': 3158.368, 'src': 'embed', 'start': 3128.737, 'weight': 2, 'content': [{'end': 3133.72, 'text': "Now from here, let's actually test to see whether or not we successfully deleted the to do.", 'start': 3128.737, 'duration': 4.983}, {'end': 3141.964, 'text': "I'm just gonna say if data dot okay is equal to one, that means we successfully deleted our.", 'start': 3133.74, 'duration': 8.224}, {'end': 3147.006, 'text': 'to do so, now we need to remove the Li element from our unordered list.', 'start': 3141.964, 'duration': 5.042}, {'end': 3149.788, 'text': 'So how do we do that? Well, we have our list ID.', 'start': 3147.247, 'duration': 2.541}, {'end': 3158.368, 'text': "And we're just going to call the method remove.", 'start': 3156.425, 'duration': 1.943}], 'summary': 'Test if deletion successful, remove li element using list id.', 'duration': 29.631, 'max_score': 3128.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI3128737.jpg'}, {'end': 3251.182, 'src': 'embed', 'start': 3206.056, 'weight': 0, 'content': [{'end': 3207.217, 'text': "So I'm just going to hit delete.", 'start': 3206.056, 'duration': 1.161}, {'end': 3210.058, 'text': 'And you see that testing post is gone.', 'start': 3208.117, 'duration': 1.941}, {'end': 3213.4, 'text': 'If I hit delete, again, you can see clean room is gone.', 'start': 3210.619, 'duration': 2.781}, {'end': 3222.885, 'text': 'And if I hit refresh, you can see that this does persist onto the database and that those two dues are actually deleted from our database.', 'start': 3214, 'duration': 8.885}, {'end': 3227.868, 'text': 'Welcome to part 10 of building our CRUD application from scratch.', 'start': 3224.325, 'duration': 3.543}, {'end': 3234.472, 'text': "So in this tutorial, we're going to be making a HTTP put request using the fetch API.", 'start': 3228.408, 'duration': 6.064}, {'end': 3238.535, 'text': 'So in the previous tutorial, we coded our app dot put route.', 'start': 3234.872, 'duration': 3.663}, {'end': 3242.477, 'text': "So this is the endpoint that we're going to hit, we're using route params.", 'start': 3238.595, 'duration': 3.882}, {'end': 3246.3, 'text': 'And this is going to be the ID of the document that we want to edit.', 'start': 3242.677, 'duration': 3.623}, {'end': 3251.182, 'text': "And We're also sending data back via the body, as you can see here.", 'start': 3246.32, 'duration': 4.862}], 'summary': 'Building crud app, http put request, 2 documents deleted from database.', 'duration': 45.126, 'max_score': 3206.056, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI3206056.jpg'}, {'end': 3569.39, 'src': 'embed', 'start': 3539.504, 'weight': 4, 'content': [{'end': 3541.645, 'text': "And let's try one more just to make sure.", 'start': 3539.504, 'duration': 2.141}, {'end': 3545.766, 'text': 'And you can see that it is indeed working.', 'start': 3543.325, 'duration': 2.441}, {'end': 3550.168, 'text': 'Welcome to part 11 of building our CRUD application from scratch.', 'start': 3546.126, 'duration': 4.042}, {'end': 3555.21, 'text': "So in this tutorial, we're going to be doing some user input validation using joy.", 'start': 3550.408, 'duration': 4.802}, {'end': 3557.951, 'text': "So to get started, let's actually install joy.", 'start': 3555.37, 'duration': 2.581}, {'end': 3561.672, 'text': "I'm just going to come down here and p.m. install joy.", 'start': 3557.971, 'duration': 3.701}, {'end': 3569.39, 'text': "Now that we have our joy package installed, let's actually include it within our application.", 'start': 3564.142, 'duration': 5.248}], 'summary': 'Tutorial covers user input validation using joy for building a crud application.', 'duration': 29.886, 'max_score': 3539.504, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI3539504.jpg'}], 'start': 3128.737, 'title': 'Testing deletion of to do and http put request with fetch api', 'summary': "Demonstrates testing the successful deletion of two to-do items from the application's database and covers making an http put request using the fetch api, including setting up the endpoint, sending data via the body, handling server response, and user input validation using joy for a to-do document.", 'chapters': [{'end': 3227.868, 'start': 3128.737, 'title': 'Testing deletion of to do', 'summary': 'Demonstrates testing the successful deletion of to-do items from the application, with the result showing that two to-do items were successfully deleted from the database.', 'duration': 99.131, 'highlights': ['The application successfully deleted two to-do items from the database upon testing.', "The method 'remove' was called to remove the Li element from the unordered list.", 'The code tested the deletion functionality, resulting in the successful removal of two to-do items from the database.', 'The chapter involves testing the successful deletion of to-do items from the application.']}, {'end': 3929.774, 'start': 3228.408, 'title': 'Http put request with fetch api', 'summary': 'Covers making an http put request using the fetch api to update a document, including setting up the endpoint, sending data via the body, and handling response from the server. it also discusses user input validation using joy by developing a schema for a to-do document, validating user input, and handling errors in the post route.', 'duration': 701.366, 'highlights': ['Making an HTTP put request using the fetch API The tutorial explains setting up the endpoint, sending data via the body, and handling the response from the server.', 'User input validation using Joy The tutorial demonstrates developing a schema for a to-do document, validating user input, and handling errors in the post route.', 'Attaching click event and using the fetch API to hit the endpoint The tutorial details attaching a click event to a button, using the fetch API to hit the endpoint with a put request, setting up headers, and sending data to update the document.']}], 'duration': 801.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI3128737.jpg', 'highlights': ['The application successfully deleted two to-do items from the database upon testing.', 'The tutorial explains setting up the endpoint, sending data via the body, and handling the response from the server.', "The method 'remove' was called to remove the Li element from the unordered list.", 'The code tested the deletion functionality, resulting in the successful removal of two to-do items from the database.', 'User input validation using Joy The tutorial demonstrates developing a schema for a to-do document, validating user input, and handling errors in the post route.', 'The chapter involves testing the successful deletion of to-do items from the application.', 'Attaching click event and using the fetch API to hit the endpoint The tutorial details attaching a click event to a button, using the fetch API to hit the endpoint with a put request, setting up headers, and sending data to update the document.']}, {'end': 4360.608, 'segs': [{'end': 3976.094, 'src': 'embed', 'start': 3950.307, 'weight': 0, 'content': [{'end': 3958.989, 'text': "So let's go to bootstrap and get our alert that we're going to be using to display to the user, whether or not our post request was successful or not.", 'start': 3950.307, 'duration': 8.682}, {'end': 3962.61, 'text': "So from here, I'm just going to go to search, I'm going to type alert.", 'start': 3959.209, 'duration': 3.401}, {'end': 3970.092, 'text': 'And you can see that we have a bunch of alerts here, what I want to do is get our success alert.', 'start': 3964.17, 'duration': 5.922}, {'end': 3976.094, 'text': "And we're going to be using this to display when we successfully posted something.", 'start': 3970.832, 'duration': 5.262}], 'summary': 'Using bootstrap to display success alert for post request.', 'duration': 25.787, 'max_score': 3950.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI3950307.jpg'}, {'end': 4129.514, 'src': 'embed', 'start': 4076.474, 'weight': 2, 'content': [{'end': 4084.337, 'text': 'And the first parameter is going to be a flag whether or not we should display the success alert or the danger alert.', 'start': 4076.474, 'duration': 7.863}, {'end': 4087.678, 'text': 'The second argument is going to be the message that we want to display.', 'start': 4084.597, 'duration': 3.081}, {'end': 4095.143, 'text': "Now from here, I'm just gonna say if flag so if this is true, and let's actually make a comment.", 'start': 4088.458, 'duration': 6.685}, {'end': 4103.549, 'text': "So if you had a successful post, what we want to do is I'm going to say message dot remove class.", 'start': 4095.163, 'duration': 8.386}, {'end': 4108.377, 'text': "And And we're going to remove the alert dash danger class.", 'start': 4103.569, 'duration': 4.808}, {'end': 4114.642, 'text': "And I'm just going to copy this, paste this, and we're going to change this to add class.", 'start': 4109.377, 'duration': 5.265}, {'end': 4117.685, 'text': "And we're going to add a success alert.", 'start': 4115.443, 'duration': 2.242}, {'end': 4121.548, 'text': "Next, I'm going to say message dot HTML.", 'start': 4118.645, 'duration': 2.903}, {'end': 4124.729, 'text': "And we're going to pass in the message that we want to display.", 'start': 4121.568, 'duration': 3.161}, {'end': 4129.514, 'text': "And I'm going to say message dot show to actually display our alert.", 'start': 4125.35, 'duration': 4.164}], 'summary': 'A function to display success or danger alerts based on a flag and message.', 'duration': 53.04, 'max_score': 4076.474, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI4076474.jpg'}, {'end': 4360.608, 'src': 'embed', 'start': 4337.655, 'weight': 1, 'content': [{'end': 4340.656, 'text': "I'm just going to hit refresh to reload the page.", 'start': 4337.655, 'duration': 3.001}, {'end': 4343.378, 'text': 'And we could test this one more time.', 'start': 4341.737, 'duration': 1.641}, {'end': 4346.42, 'text': 'So we inserted our to do okay.', 'start': 4343.398, 'duration': 3.022}, {'end': 4350.482, 'text': 'Now we have a blank user input, it create.', 'start': 4346.96, 'duration': 3.522}, {'end': 4354.344, 'text': 'And you can see that we get a warning invalid input.', 'start': 4351.363, 'duration': 2.981}, {'end': 4360.608, 'text': "That's pretty much how you can validate user input using joy for our to do application.", 'start': 4354.464, 'duration': 6.144}], 'summary': 'Validating user input using joy for to-do application', 'duration': 22.953, 'max_score': 4337.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI4337655.jpg'}], 'start': 3930.574, 'title': 'Bootstrap alerts implementation and to-do app alert display update', 'summary': "Involves implementing bootstrap alerts to display success or error messages after a post request. it also details updating the to-do app's alert display, including adding ids, creating helper functions, and handling success and failure alerts based on user input.", 'chapters': [{'end': 4017.05, 'start': 3930.574, 'title': 'Implementing bootstrap alerts', 'summary': 'Involves implementing bootstrap alerts in the code to display success or error messages to the user after a post request, with a focus on using the danger alert for error messages and success alert for successful posts.', 'duration': 86.476, 'highlights': ['Implementing Bootstrap alerts to display success or error messages to the user after a post request, focusing on using the danger alert for error messages and success alert for successful posts.', 'Copying the danger alert from Bootstrap and integrating it into the code to display error messages to the user.']}, {'end': 4360.608, 'start': 4017.07, 'title': 'Updating alert display in to-do application', 'summary': "Details the process of updating the to-do application's alert display, including adding ids, creating helper functions, and handling success and failure alerts based on user input.", 'duration': 343.538, 'highlights': ["The chapter details the process of updating the to-do application's alert display, including adding IDs, creating helper functions, and handling success and failure alerts based on user input. Updating alert display, adding IDs, creating helper functions, handling success and failure alerts, user input validation.", 'The process involves adding an ID attribute of message, getting the message using JavaScript, and creating a helper function to display success or failure alerts based on user input. Adding ID attribute, accessing message using JavaScript, creating helper function for displaying alerts, success and failure alerts based on user input.', 'The code includes conditional statements to handle success and failure cases, remove or add classes to the message, set the message content, and display or hide the alert. Conditional statements for success and failure cases, adding/removing classes, setting message content, displaying/hiding the alert.', 'The demonstration includes testing the application in the browser, validating user input, and fixing errors in the code to ensure proper alert display based on user actions. Testing application in browser, validating user input, fixing errors in the code, ensuring proper alert display.']}], 'duration': 430.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CyTWPr_WwdI/pics/CyTWPr_WwdI3930574.jpg', 'highlights': ['Implementing Bootstrap alerts to display success or error messages to the user after a post request, focusing on using the danger alert for error messages and success alert for successful posts.', "The chapter details the process of updating the to-do application's alert display, including adding IDs, creating helper functions, and handling success and failure alerts based on user input.", 'The process involves adding an ID attribute of message, getting the message using JavaScript, and creating a helper function to display success or failure alerts based on user input.', 'The code includes conditional statements to handle success and failure cases, remove or add classes to the message, set the message content, and display or hide the alert.', 'The demonstration includes testing the application in the browser, validating user input, and fixing errors in the code to ensure proper alert display based on user actions.']}], 'highlights': ['The tutorial covers building a CRUD application using Node.js, Express.js, MongoDB, jQuery, Fetch API, and Bootstrap.', 'The demonstration showcases the ability to create, edit, delete, and persist to-dos within the MongoDB database.', 'The technologies required for the application include Node.js, Express.js, MongoDB, jQuery, Fetch API, Bootstrap, and JavaScript.', 'The process involves installing packages, setting up an Express application, and connecting to a MongoDB database.', 'The chapter demonstrates setting up the server and implementing server-side read functionality for a CRUD application.', 'The transcript details the process of connecting to MongoDB, coding the connect method, and creating methods for getting the primary key and the database.', 'The chapter demonstrates updating documents in a database using a callback function and error handling.', "The demonstration includes the successful update of a document in the database, with the number of updated documents being one and the 'updated existing' flag set to true after providing the correct ID input.", 'Covers server-side create and delete operations for the CRUD application.', 'The chapter focuses on building a static HTML file using Bootstrap for a to-do list application.', 'The chapter involves testing the successful deletion of to-do items from the application.', 'The application successfully deleted two to-do items from the database upon testing.', 'Implementing Bootstrap alerts to display success or error messages to the user after a post request.', "The chapter details the process of updating the to-do application's alert display, including adding IDs, creating helper functions, and handling success and failure alerts based on user input.", 'The demonstration includes testing the application in the browser, validating user input, and fixing errors in the code to ensure proper alert display based on user actions.']}