title
Node.js Crash Course Tutorial #11 - Express Router & MVC
description
Hey gang, in this node.js tutorial we'll take a look at the express router in order to split up our routes into separate files (keeps the code more modular & readable). We'll also introduce the idea of MVC & controllers.
0:00 -- express router
9:44 -- mvc basics
11:48 -- controllers
🐱👤🐱👤 JOIN THE GANG -
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join
----------------------------------------
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS & Firebase - http://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase
🐱💻 🐱💻 Course Files:
https://github.com/iamshaunjp/node-crash-course
🐱💻 🐱💻 Other Related Free Courses:
+ Modern JavaScript Tutorial - https://www.youtube.com/playlist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ HTML & CSS Crash Course - https://www.youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
🐱💻 🐱💻 Node.js links
+ Download here - https://nodejs.org/en/download/
detail
{'title': 'Node.js Crash Course Tutorial #11 - Express Router & MVC', 'heatmap': [{'end': 315.912, 'start': 255.902, 'weight': 0.913}, {'end': 639.945, 'start': 619.662, 'weight': 0.717}], 'summary': 'Learn to efficiently manage routes using express router, optimize routing, troubleshoot and prevent conflicts, implement mvc approach and controllers in node.js, and improve code structure and view organization for enhanced modularity and maintainability.', 'chapters': [{'end': 137.35, 'segs': [{'end': 93.146, 'src': 'embed', 'start': 45.49, 'weight': 0, 'content': [{'end': 54.838, 'text': 'so we use the express router to split our routes into different files and manage them in small groups of routes that belong together,', 'start': 45.49, 'duration': 9.348}, {'end': 61.924, 'text': 'and it makes the app more modular and it also becomes easier to update those different parts of the app later on,', 'start': 54.838, 'duration': 7.086}, {'end': 67.649, 'text': "and it will mean that we don't have to have everything justified in one big messy file.", 'start': 61.924, 'duration': 5.725}, {'end': 77.496, 'text': 'so if we take a look at all of our routes from the top, a lot of them have this in it forward slash blogs, forward slash blogs, blogs, blogs.', 'start': 67.649, 'duration': 9.847}, {'end': 80.598, 'text': 'so these are all the blog routes right.', 'start': 77.496, 'duration': 3.102}, {'end': 89.564, 'text': "so we could split them into their own route file, because they're all concerned with one type of resource and they kind of belong together.", 'start': 80.598, 'duration': 8.966}, {'end': 93.146, 'text': "so let's create a new folder to do this Over here.", 'start': 89.564, 'duration': 3.582}], 'summary': 'Using express router for modular routes organization improves app maintenance and updates.', 'duration': 47.656, 'max_score': 45.49, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q45490.jpg'}], 'start': 2.284, 'title': 'Refactoring app.js with express router and mvc', 'summary': 'Discusses using express router to efficiently manage routes, split routes into different files, and make the app more modular, focusing on separating blog routes for tidiness and maintenance.', 'chapters': [{'end': 137.35, 'start': 2.284, 'title': 'Refactoring app.js with express router and mvc', 'summary': 'Discusses the use of express router to manage routes efficiently, split routes into different files, and make the app more modular, allowing for easier updates as the project grows, with a focus on separating blog routes into their own file for tidiness and maintenance.', 'duration': 135.066, 'highlights': ['The chapter discusses the use of Express router to manage routes efficiently, split routes into different files, and make the app more modular, allowing for easier updates as the project grows.', 'Focus on separating blog routes into their own file for tidiness and maintenance.']}], 'duration': 135.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q2284.jpg', 'highlights': ['Using Express router to manage routes efficiently and make the app more modular', 'Splitting routes into different files for easier updates as the project grows', 'Focusing on separating blog routes into their own file for tidiness and maintenance']}, {'end': 304.467, 'segs': [{'end': 233.711, 'src': 'embed', 'start': 162.596, 'weight': 1, 'content': [{'end': 164.598, 'text': "And I'm going to set that equal to express const.", 'start': 162.596, 'duration': 2.002}, {'end': 170.522, 'text': 'with a capital R, and that creates us a new instance of a router object.', 'start': 165.839, 'duration': 4.683}, {'end': 177.946, 'text': 'So what we can do now is we can attach these request handlers to the router instead of the app.', 'start': 170.962, 'duration': 6.984}, {'end': 181.969, 'text': "So let's replace all of the times we say app right here.", 'start': 178.527, 'duration': 3.442}, {'end': 184.49, 'text': 'Let me just go down and select all these.', 'start': 182.589, 'duration': 1.901}, {'end': 188.272, 'text': 'Just holding down alt, by the way, when I double click to select them all.', 'start': 185.451, 'duration': 2.821}, {'end': 192.095, 'text': "I'm going to delete that and replace each one with the router.", 'start': 188.753, 'duration': 3.342}, {'end': 198.898, 'text': "so what we're doing is creating an instance of this router which is like a mini app.", 'start': 193.115, 'duration': 5.783}, {'end': 202.24, 'text': "it's like the app, but standing alone it doesn't do anything.", 'start': 198.898, 'duration': 3.342}, {'end': 205.281, 'text': 'we have to use the router inside an app.', 'start': 202.24, 'duration': 3.041}, {'end': 207.582, 'text': "so we're creating this instance of the router.", 'start': 205.281, 'duration': 2.301}, {'end': 213.505, 'text': "we're attaching these handlers to the router and then at the bottom I'm going to export this router.", 'start': 207.582, 'duration': 5.923}, {'end': 219.528, 'text': 'so to do that, I say module dot exports and set that equal to the router.', 'start': 213.505, 'duration': 6.023}, {'end': 221.248, 'text': 'okay, does that make sense?', 'start': 219.528, 'duration': 1.72}, {'end': 227.01, 'text': "so we're exporting this now, this kind of mini app with all of these different route handlers.", 'start': 221.248, 'duration': 5.762}, {'end': 233.711, 'text': 'now what we can do is we can import this inside app.js and we can use that inside our app.', 'start': 227.01, 'duration': 6.701}], 'summary': 'Creating a new instance of a router object and attaching request handlers to it, then exporting it for use in app.js', 'duration': 71.115, 'max_score': 162.596, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q162596.jpg'}, {'end': 304.467, 'src': 'embed', 'start': 279.095, 'weight': 0, 'content': [{'end': 287.139, 'text': 'well, all we need to do is come down to here, where we had the blog routes defined, and we can say app.use, as we would use a bit of middleware,', 'start': 279.095, 'duration': 8.044}, {'end': 291.202, 'text': "and all we're going to do is use the blog routes like.", 'start': 287.139, 'duration': 4.063}, {'end': 293.463, 'text': "so that's all we need to do.", 'start': 291.202, 'duration': 2.261}, {'end': 302.506, 'text': "and this is going to say okay, well, i'm going to look at these which are over here and i'm going to apply all of these handlers to the app.", 'start': 294.063, 'duration': 8.443}, {'end': 304.467, 'text': "that's what it does, okay.", 'start': 302.506, 'duration': 1.961}], 'summary': 'Use blog routes as middleware to apply handlers to the app.', 'duration': 25.372, 'max_score': 279.095, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q279095.jpg'}], 'start': 137.35, 'title': 'Optimizing express routing', 'summary': 'Explains how to optimize express routing by creating a new instance of a router object, attaching request handlers to the router, and exporting the router for use in the main app, with a demonstration of importing and using the router in the main app.', 'chapters': [{'end': 304.467, 'start': 137.35, 'title': 'Optimizing express routing', 'summary': 'Explains how to optimize express routing by creating a new instance of a router object, attaching request handlers to the router, and exporting the router for use in the main app, with a demonstration of importing and using the router in the main app.', 'duration': 167.117, 'highlights': ['By creating a new instance of a router object and attaching request handlers to it, the chapter demonstrates optimizing Express routing.', 'The process involves exporting the router for use in the main app and importing and using the router in the main app.', "The chapter also explains how to use the router inside an app, optimizing the Express app's structure and functionality.", "The demonstration includes using the 'app.use' method to apply all route handlers from the router to the main app."]}], 'duration': 167.117, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q137350.jpg', 'highlights': ["The demonstration includes using the 'app.use' method to apply all route handlers from the router to the main app.", 'The process involves exporting the router for use in the main app and importing and using the router in the main app.', 'By creating a new instance of a router object and attaching request handlers to it, the chapter demonstrates optimizing Express routing.', "The chapter also explains how to use the router inside an app, optimizing the Express app's structure and functionality."]}, {'end': 563.249, 'segs': [{'end': 351.293, 'src': 'embed', 'start': 324.918, 'weight': 1, 'content': [{'end': 332.164, 'text': "okay, i think it's because up here we're requiring inside blog routes the models.", 'start': 324.918, 'duration': 7.246}, {'end': 335.146, 'text': 'but we need to come out of the routes folder first of all.', 'start': 332.164, 'duration': 2.982}, {'end': 336.607, 'text': 'so let me double dot.', 'start': 335.146, 'duration': 1.461}, {'end': 341.39, 'text': 'that means come out of the current folder, then go into models, which is right here.', 'start': 336.607, 'duration': 4.783}, {'end': 344.211, 'text': 'then i want the blog file, so save that.', 'start': 341.39, 'duration': 2.821}, {'end': 345.451, 'text': 'hopefully this should work.', 'start': 344.211, 'duration': 1.24}, {'end': 348.472, 'text': 'now let me first of all go to the home page.', 'start': 345.451, 'duration': 3.021}, {'end': 351.293, 'text': "let's see if this works.", 'start': 348.472, 'duration': 2.821}], 'summary': 'Requiring models inside blog routes, navigating to models folder, accessing blog file, and testing on the home page.', 'duration': 26.375, 'max_score': 324.918, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q324918.jpg'}, {'end': 474.011, 'src': 'embed', 'start': 401.308, 'weight': 0, 'content': [{'end': 407.451, 'text': 'so when the request comes in for forward slash blogs, forward slash create, this one fires first and not this one.', 'start': 401.308, 'duration': 6.143}, {'end': 415.274, 'text': "because if this one fires first, then we're going to try and find a blog with the id of create and that's not going to work.", 'start': 407.451, 'duration': 7.823}, {'end': 421.237, 'text': "so that's the reason that's not working, let me save that and let me go back and try this again.", 'start': 415.274, 'duration': 5.963}, {'end': 425.899, 'text': 'so new blog and hopefully this should work now and it does okay.', 'start': 421.237, 'duration': 4.662}, {'end': 430.321, 'text': 'so let me add this new blog, submit it and see if this works and voila.', 'start': 425.899, 'duration': 4.422}, {'end': 433.863, 'text': 'so everything now still works.', 'start': 430.321, 'duration': 3.542}, {'end': 436.484, 'text': 'so then that is the express router.', 'start': 433.863, 'duration': 2.621}, {'end': 439.985, 'text': 'it allows us to extract the routes into a different file,', 'start': 436.484, 'duration': 3.501}, {'end': 448.931, 'text': 'create kind of like a mini app and then use those routes in our app when we use up to use blog routes now, if we wanted to,', 'start': 439.985, 'duration': 8.946}, {'end': 453.915, 'text': 'we could go one step further and we could scope this to a specific URL.', 'start': 448.931, 'duration': 4.984}, {'end': 459.259, 'text': 'so I could say that I want to scope this to, for example, forward slash blocks.', 'start': 453.915, 'duration': 5.344}, {'end': 461.822, 'text': 'now, what is this going to do?', 'start': 460.08, 'duration': 1.742}, {'end': 466.886, 'text': "well, it means it's only going to apply these blog routes when we go to forward slash blogs.", 'start': 461.822, 'duration': 5.064}, {'end': 468.327, 'text': 'but check this out.', 'start': 466.886, 'duration': 1.441}, {'end': 474.011, 'text': "if i go to forward slash blogs now, then it's going to hang and it's not going to work.", 'start': 468.327, 'duration': 5.684}], 'summary': 'Using express router to create and scope blog routes, ensuring functionality and efficiency.', 'duration': 72.703, 'max_score': 401.308, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q401308.jpg'}, {'end': 540.58, 'src': 'embed', 'start': 517.681, 'weight': 3, 'content': [{'end': 526.708, 'text': 'so we can take away the blogs bit from each one of these if we wanted to like this, and because we scoped it out to forward slash blogs,', 'start': 517.681, 'duration': 9.027}, {'end': 531.492, 'text': "it's going to automatically apply that to the start of each one of these handlers.", 'start': 526.708, 'duration': 4.784}, {'end': 540.58, 'text': "so now we're scoping it out right here and we don't have to add that to each one of these handlers, and that makes this a little bit more reusable,", 'start': 531.492, 'duration': 9.088}], 'summary': "Scoping out '/blogs' makes handlers more reusable.", 'duration': 22.899, 'max_score': 517.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q517681.jpg'}], 'start': 304.467, 'title': 'Troubleshooting and routing', 'summary': "Covers troubleshooting blog routes, resolving 'module not found' issue, ensuring proper routing for blog creation, using express router to handle routes, preventing conflicts, scoping routes for reusability, and increasing reusability by automatically applying the specified url to the start of each handler.", 'chapters': [{'end': 376.106, 'start': 304.467, 'title': 'Troubleshooting blog routes', 'summary': "Describes troubleshooting and fixing errors in blog routes, including resolving a 'module not found' issue and ensuring proper routing for blog creation, resulting in successful page rendering and blog creation functionality.", 'duration': 71.639, 'highlights': ["Resolving 'module not found' error by adjusting file path for required models", 'Verification of successful page rendering and blog creation functionality', 'Identification of URL handling issue for blog creation']}, {'end': 448.931, 'start': 376.106, 'title': 'Express router and route handling', 'summary': 'Explains how to use the express router to handle routes and prevent conflicts by reordering route handling to ensure the correct route fires first, resulting in successful blog creation and submission.', 'duration': 72.825, 'highlights': ["The code runs from top to bottom, so reordering route handling is necessary to ensure the correct route fires first, preventing conflicts when trying to find a blog with the id of 'create'.", "The express router allows extraction of routes into a different file, creating a mini app to be utilized in the main app, such as the 'blog routes'.", 'Using the express router and reordering route handling results in successful creation and submission of a new blog.']}, {'end': 563.249, 'start': 448.931, 'title': 'Scope routes for reusability', 'summary': 'Demonstrates how scoping routes to a specific url like forward slash blogs increases reusability by automatically applying the specified url to the start of each handler, reducing the need to change multiple handlers if the url structure is altered in the future.', 'duration': 114.318, 'highlights': ['The chapter explains how scoping routes to a specific URL, such as forward slash blogs, increases reusability by automatically applying the specified URL to the start of each handler, minimizing the need to modify multiple handlers if the URL structure changes in the future.', 'The demonstration showcases that by scoping the routes to forward slash blogs, the need to change the URL structure in multiple handlers is eliminated, enhancing reusability and ease of future modifications.', 'Scoping routes to a specific URL, in this case, forward slash blogs, is highlighted as a strategy to enhance reusability by reducing the required changes in multiple handlers if the URL structure is modified in the future.']}], 'duration': 258.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q304467.jpg', 'highlights': ['Using express router and reordering route handling results in successful creation and submission of a new blog.', "Resolving 'module not found' error by adjusting file path for required models.", 'Verification of successful page rendering and blog creation functionality.', 'The demonstration showcases that by scoping the routes to forward slash blogs, the need to change the URL structure in multiple handlers is eliminated, enhancing reusability and ease of future modifications.', 'The chapter explains how scoping routes to a specific URL, such as forward slash blogs, increases reusability by automatically applying the specified URL to the start of each handler, minimizing the need to modify multiple handlers if the URL structure changes in the future.', "The express router allows extraction of routes into a different file, creating a mini app to be utilized in the main app, such as the 'blog routes'.", "The code runs from top to bottom, so reordering route handling is necessary to ensure the correct route fires first, preventing conflicts when trying to find a blog with the id of 'create'."]}, {'end': 832.733, 'segs': [{'end': 645.789, 'src': 'heatmap', 'start': 619.662, 'weight': 0, 'content': [{'end': 623.988, 'text': 'so views are where we make our HTML templates that a user will see,', 'start': 619.662, 'duration': 4.326}, {'end': 629.795, 'text': 'and models are how we describe our data structure and we use them to interact with the database.', 'start': 623.988, 'duration': 5.807}, {'end': 633.219, 'text': 'so the last piece of the puzzle is controllers.', 'start': 629.795, 'duration': 3.424}, {'end': 639.945, 'text': 'now controllers will be the thing that forms the link between our models and our views.', 'start': 633.8, 'duration': 6.145}, {'end': 645.789, 'text': "they're like the middlemen that use models to get data and then pass that data into a view.", 'start': 639.945, 'duration': 5.844}], 'summary': 'Views create html templates, models define data structure, and controllers link models and views.', 'duration': 53.229, 'max_score': 619.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q619662.jpg'}, {'end': 771.393, 'src': 'embed', 'start': 740.5, 'weight': 2, 'content': [{'end': 745.423, 'text': "here i'm going to create a new file called blog controller.js.", 'start': 740.5, 'duration': 4.923}, {'end': 748.925, 'text': 'so all of our functions for this resource blogs.', 'start': 745.423, 'duration': 3.502}, {'end': 751.527, 'text': 'so all of these functions that we use in these routes.', 'start': 748.925, 'duration': 2.602}, {'end': 755.009, 'text': "they're going to live inside this blog controller file.", 'start': 751.527, 'duration': 3.482}, {'end': 762.171, 'text': "now, then, what i'm going to do is create functions using a similar kind of naming convention as mdn,", 'start': 755.749, 'duration': 6.422}, {'end': 771.393, 'text': "so that looks something like this i'm going to create a function called blog index to get all the blogs and inject those into the index view.", 'start': 762.171, 'duration': 9.222}], 'summary': "Creating a new file 'blog controller.js' to house functions for managing blog resources and adopting a naming convention similar to mdn for the functions.", 'duration': 30.893, 'max_score': 740.5, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q740500.jpg'}, {'end': 808.171, 'src': 'embed', 'start': 784.363, 'weight': 3, 'content': [{'end': 791.251, 'text': 'So this is a get request, Blog create, post to add a new blog And then blog delete to delete a blog.', 'start': 784.363, 'duration': 6.888}, {'end': 794.815, 'text': "So that's the naming convention I'm going to use for these controller functions.", 'start': 791.251, 'duration': 3.564}, {'end': 798.98, 'text': 'so the first thing i want to do is create these functions.', 'start': 795.937, 'duration': 3.043}, {'end': 804.927, 'text': 'so let me do that const, blog, underscore, index, and that is going to be equal to a function.', 'start': 798.98, 'duration': 5.947}, {'end': 807.17, 'text': "oops, let's spell this correctly.", 'start': 804.927, 'duration': 2.243}, {'end': 808.171, 'text': 'i can never do that.', 'start': 807.17, 'duration': 1.001}], 'summary': 'Creating get, create, and delete functions for a blog using naming convention.', 'duration': 23.808, 'max_score': 784.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q784363.jpg'}], 'start': 563.249, 'title': 'Mvc approach and implementing controllers in node.js', 'summary': 'Introduces the mvc approach, emphasizing the importance of structuring code for modularity and ease of maintenance, and discusses implementing controllers in node.js for managing route handler functions, specifically focusing on creating a blog controller file with defined functions for blog index, details, create, and delete.', 'chapters': [{'end': 645.789, 'start': 563.249, 'title': 'Introduction to mvc approach', 'summary': 'Introduces the mvc approach, which stands for model view controller, a method of structuring code and files to make it more modular, reusable, and easier to maintain, with the aim of forming a link between models and views, essential for larger projects.', 'duration': 82.54, 'highlights': ['MVC stands for Model View Controller, a method of structuring code and files to make it more modular, reusable, and easier to maintain, essential for larger projects.', 'Views are where HTML templates for user interaction are made, and models are used to describe the data structure and interact with the database.', 'Controllers act as middlemen between models and views, using models to retrieve data and passing that data into a view.']}, {'end': 832.733, 'start': 645.789, 'title': 'Implementing controllers in node.js', 'summary': 'Discusses the concept of using controllers to extract route handler functions into separate controller files to make the code easier to manage and understand, with a focus on creating a blog controller file and defining functions for blog index, details, create, and delete.', 'duration': 186.944, 'highlights': ['The concept of using controllers to extract route handler functions into separate controller files is aimed at making the code easier to manage and understand.', "Creating a new folder called controllers and a new file called blog controller.js to contain functions for the 'blogs' resource, such as blog index, details, create, and delete.", "Defining functions with a naming convention similar to 'blog index', 'blog details', 'blog create', and 'blog delete' for handling various operations related to the 'blogs' resource."]}], 'duration': 269.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q563249.jpg', 'highlights': ['MVC stands for Model View Controller, a method of structuring code and files for modularity and maintenance.', 'Controllers act as middlemen between models and views, using models to retrieve data and passing it into a view.', "Creating a new folder called controllers and a new file called blog controller.js to contain functions for the 'blogs' resource.", "Defining functions with a naming convention similar to 'blog index', 'blog details', 'blog create', and 'blog delete' for handling various operations."]}, {'end': 1190.159, 'segs': [{'end': 926.887, 'src': 'embed', 'start': 900.451, 'weight': 0, 'content': [{'end': 909.679, 'text': 'so now, instead of this function firing right here, we can just say blog controller dot, blog index.', 'start': 900.451, 'duration': 9.228}, {'end': 915.402, 'text': "so now all it's going to do is get this function right here and it's going to place it right here.", 'start': 909.679, 'duration': 5.723}, {'end': 917.422, 'text': "so it's doing exactly the same thing.", 'start': 915.402, 'duration': 2.02}, {'end': 926.887, 'text': "it's just that now we've extracted it from here and we've placed it in a controller file and we're going to do that now for every single function down here.", 'start': 917.422, 'duration': 9.465}], 'summary': 'Refactoring code by extracting functions into a controller file.', 'duration': 26.436, 'max_score': 900.451, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q900451.jpg'}, {'end': 1165.532, 'src': 'embed', 'start': 1121.053, 'weight': 1, 'content': [{'end': 1132.575, 'text': "so we're keeping all of the controller logic separate from the routes and that way our routes look a lot neater and we're kind of modularizing our code a bit more.", 'start': 1121.053, 'duration': 11.522}, {'end': 1135.936, 'text': "so it's easier to read and easier to update in the future.", 'start': 1132.575, 'duration': 3.361}, {'end': 1141.399, 'text': "so before we get too carried away, let's just make sure this all still works.", 'start': 1136.616, 'duration': 4.783}, {'end': 1142.519, 'text': 'nothing should change.', 'start': 1141.399, 'duration': 1.12}, {'end': 1147.662, 'text': "everything should still work the same way, because we've not changed the functionality of anything.", 'start': 1142.519, 'duration': 5.143}, {'end': 1149.823, 'text': 'so yep, the home page works.', 'start': 1147.662, 'duration': 2.161}, {'end': 1152.184, 'text': 'if i go to about, that should still work.', 'start': 1149.823, 'duration': 2.361}, {'end': 1154.906, 'text': 'if i go to new blog, that should still work.', 'start': 1152.184, 'duration': 2.722}, {'end': 1157.607, 'text': 'try to add this submit.', 'start': 1154.906, 'duration': 2.701}, {'end': 1158.468, 'text': 'that still works.', 'start': 1157.607, 'duration': 0.861}, {'end': 1161.149, 'text': 'if we go to a details, that works.', 'start': 1158.468, 'duration': 2.681}, {'end': 1165.532, 'text': "if we delete one, this should work, but it's not doing.", 'start': 1161.149, 'duration': 4.383}], 'summary': 'Separating controller logic from routes for neater, modular code.', 'duration': 44.479, 'max_score': 1121.053, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q1121053.jpg'}], 'start': 832.733, 'title': 'Refactoring blog controller', 'summary': 'Covers the process of refactoring the blog controller file to extract different handlers, enhancing code modularity and maintainability, without altering route functionality.', 'chapters': [{'end': 1190.159, 'start': 832.733, 'title': 'Refactoring blog controller', 'summary': 'Covers the process of refactoring the blog controller file to extract the different handlers, including blog index, blog details, blog create get, blog create post, and blog delete, into separate functions, enhancing code modularity and maintainability. the functionality of the routes remains unchanged, ensuring the smooth operation of the application.', 'duration': 357.426, 'highlights': ['The process involves extracting different handlers, including blog index, blog details, blog create get, blog create post, and blog delete, into separate functions in the blog controller file, emphasizing code modularity and maintainability.', 'The refactoring ensures that the functionality of the routes remains unchanged, guaranteeing the smooth operation of the application.', 'The refactoring process enhances code modularity and maintainability, making it easier to read and update the code in the future.', 'The chapter emphasizes the importance of keeping the controller logic separate from the routes, resulting in neater routes and improved code modularity.', 'The demonstration highlights the seamless operation of the application, with all functionalities, including home, about, new blog, submit, details, and delete, working as expected after the refactoring.']}], 'duration': 357.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q832733.jpg', 'highlights': ['The process involves extracting different handlers, including blog index, blog details, blog create get, blog create post, and blog delete, into separate functions in the blog controller file, emphasizing code modularity and maintainability.', 'The refactoring process enhances code modularity and maintainability, making it easier to read and update the code in the future.', 'The chapter emphasizes the importance of keeping the controller logic separate from the routes, resulting in neater routes and improved code modularity.', 'The refactoring ensures that the functionality of the routes remains unchanged, guaranteeing the smooth operation of the application.', 'The demonstration highlights the seamless operation of the application, with all functionalities, including home, about, new blog, submit, details, and delete, working as expected after the refactoring.']}, {'end': 1347.413, 'segs': [{'end': 1237.873, 'src': 'embed', 'start': 1190.159, 'weight': 0, 'content': [{'end': 1200.825, 'text': 'awesome. so now our code is structured in a much more logical way, which is easier to maintain, and for every new type of resource and set of routes,', 'start': 1190.159, 'duration': 10.666}, {'end': 1202.486, 'text': 'you would follow this pattern.', 'start': 1200.825, 'duration': 1.661}, {'end': 1211.112, 'text': "you'd have a route file for the routes, a model for the data and a controller for the handlers, and then a folder for its views as well.", 'start': 1202.486, 'duration': 8.626}, {'end': 1212.593, 'text': 'now, just speaking of views.', 'start': 1211.112, 'duration': 1.481}, {'end': 1219.378, 'text': "i think i'd actually like to structure our views a little better too, since at some point we might have multiple different resources.", 'start': 1212.593, 'duration': 6.785}, {'end': 1224.201, 'text': 'right, you could have users, polls, comments, categories as well as blocks.', 'start': 1219.378, 'duration': 4.823}, {'end': 1233.549, 'text': 'therefore you might need, for example, a create a details, an index for each individual resource.', 'start': 1224.201, 'duration': 9.348}, {'end': 1237.873, 'text': "right now we couldn't create multiple of those in here because the names would clash.", 'start': 1233.549, 'duration': 4.324}], 'summary': 'Code structured for easy maintenance, with separate files for routes, model, and controller. plans to improve view structure for multiple resources.', 'duration': 47.714, 'max_score': 1190.159, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q1190159.jpg'}, {'end': 1280.777, 'src': 'embed', 'start': 1256.466, 'weight': 2, 'content': [{'end': 1264.869, 'text': 'right then, if i had a different resource in the future, i could create a folder for that and do the same index details and create in that.', 'start': 1256.466, 'duration': 8.403}, {'end': 1273.012, 'text': "so what i'm going to do now just quickly is go to the blog controller and i need to wherever i'm rendering a view, update that,", 'start': 1264.869, 'duration': 8.143}, {'end': 1280.777, 'text': "because we've put it in a new folder and now it should be blogs forward slash, create so it knows to go into the blogs folder first of all.", 'start': 1273.012, 'duration': 7.765}], 'summary': 'Updating blog controller to render views from new folder', 'duration': 24.311, 'max_score': 1256.466, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q1256466.jpg'}], 'start': 1190.159, 'title': 'Improved code structure and view organization', 'summary': 'Discusses the restructuring of code into a more logical mvc pattern, with a focus on organizing views into separate folders for different resources, improving maintainability and future scalability, and ensuring smooth functionality.', 'chapters': [{'end': 1347.413, 'start': 1190.159, 'title': 'Improved code structure and view organization', 'summary': 'Discusses the restructuring of code into a more logical mvc pattern, with a focus on organizing views into separate folders for different resources, improving maintainability and future scalability, and ensuring smooth functionality.', 'duration': 157.254, 'highlights': ['The restructuring of code into a more logical MVC pattern involves creating separate route files, models, controllers, and folders for views for each type of resource, enhancing maintainability and scalability.', 'Organizing views into separate folders for different resources such as users, polls, comments, categories, and blogs allows for better structure and avoids naming clashes, promoting future scalability and ease of management.', 'The process of updating the blog controller to render views from the new folder involves specifying the folder name followed by the view name, and adjusting paths for partials by adding double dots to navigate out of the resource folder into the partials folder, ensuring smooth functionality and successful rendering of views.']}], 'duration': 157.254, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zW_tZR0Ir3Q/pics/zW_tZR0Ir3Q1190159.jpg', 'highlights': ['The restructuring of code into a more logical MVC pattern involves creating separate route files, models, controllers, and folders for views for each type of resource, enhancing maintainability and scalability.', 'Organizing views into separate folders for different resources such as users, polls, comments, categories, and blogs allows for better structure and avoids naming clashes, promoting future scalability and ease of management.', 'The process of updating the blog controller to render views from the new folder involves specifying the folder name followed by the view name, and adjusting paths for partials by adding double dots to navigate out of the resource folder into the partials folder, ensuring smooth functionality and successful rendering of views.']}], 'highlights': ['Using Express router to manage routes efficiently and make the app more modular', 'The restructuring of code into a more logical MVC pattern enhances maintainability and scalability', 'The process involves extracting different handlers into separate functions in the blog controller file, emphasizing code modularity', 'The refactoring process enhances code modularity and maintainability, making it easier to read and update the code in the future', 'The demonstration showcases that by scoping the routes to forward slash blogs, the need to change the URL structure in multiple handlers is eliminated, enhancing reusability and ease of future modifications', 'The chapter emphasizes the importance of keeping the controller logic separate from the routes, resulting in neater routes and improved code modularity', "Creating a new folder called controllers and a new file called blog controller.js to contain functions for the 'blogs' resource", 'The process of updating the blog controller to render views from the new folder involves specifying the folder name followed by the view name, and adjusting paths for partials by adding double dots to navigate out of the resource folder into the partials folder, ensuring smooth functionality and successful rendering of views', "The code runs from top to bottom, so reordering route handling is necessary to ensure the correct route fires first, preventing conflicts when trying to find a blog with the id of 'create'", "The express router allows extraction of routes into a different file, creating a mini app to be utilized in the main app, such as the 'blog routes'", 'Focusing on separating blog routes into their own file for tidiness and maintenance', 'The process involves exporting the router for use in the main app and importing and using the router in the main app', "The demonstration includes using the 'app.use' method to apply all route handlers from the router to the main app", 'MVC stands for Model View Controller, a method of structuring code and files for modularity and maintenance', 'Controllers act as middlemen between models and views, using models to retrieve data and passing it into a view', "Defining functions with a naming convention similar to 'blog index', 'blog details', 'blog create', and 'blog delete' for handling various operations", "The chapter also explains how to use the router inside an app, optimizing the Express app's structure and functionality", 'Splitting routes into different files for easier updates as the project grows', 'Organizing views into separate folders for different resources such as users, polls, comments, categories, and blogs allows for better structure and avoids naming clashes, promoting future scalability and ease of management', "Resolving 'module not found' error by adjusting file path for required models", 'Verification of successful page rendering and blog creation functionality', 'The refactoring ensures that the functionality of the routes remains unchanged, guaranteeing the smooth operation of the application', 'The demonstration highlights the seamless operation of the application, with all functionalities working as expected after the refactoring']}