title
Jinja Templating - Django Web Development with Python 3
description
Welcome to part 3 of our Django web development with Python tutorial. Now that we have a basic understanding of how Django works, let's try to build a very basic type of website. For this, we're going to build a very simple personal website that basically gives a sort of "about me," along with a blog. As simple as this may sound, it will actually let us exercise quite a few Django principles, ending with beginning a content management system, like a blog. We will also get to explore a bit about design.
At the moment, if we attempt to visit our homepage http://127.0.0.1:8000/, we get a 404, since we have nothing corresponding to it. Let's go ahead and make a new app, calling it personal, since this is our personal website.
python manage.py startapp personal
Sample code and text-tutorial: https://pythonprogramming.net/jinja-templates-django-python-tutorial/
https://pythonprogramming.net
https://twitter.com/sentdex
https://www.facebook.com/pythonprogramming.net/
https://plus.google.com/+sentdex
detail
{'title': 'Jinja Templating - Django Web Development with Python 3', 'heatmap': [{'end': 228.517, 'start': 216.356, 'weight': 0.739}, {'end': 254.357, 'start': 237.423, 'weight': 0.709}, {'end': 344.862, 'start': 329.404, 'weight': 0.705}, {'end': 600.363, 'start': 579.52, 'weight': 0.73}, {'end': 953.619, 'start': 912.359, 'weight': 0.876}], 'summary': 'Tutorial on jinja templating in django web development with python 3 covers the concept of templating in django, building dynamic html and a personal app, using render method in django views, and the basics of jinja templating, emphasizing efficiency, logical-ish html creation, explicitness, and flexibility while achieving significant time savings.', 'chapters': [{'end': 46.077, 'segs': [{'end': 46.077, 'src': 'embed', 'start': 2.041, 'weight': 0, 'content': [{'end': 5.144, 'text': 'What is going on, girls and guys? Welcome to another Django tutorial.', 'start': 2.041, 'duration': 3.103}, {'end': 7.585, 'text': "In this tutorial, we're going to be talking about templating.", 'start': 5.364, 'duration': 2.221}, {'end': 10.727, 'text': 'The idea of templating is pretty simple to understand.', 'start': 8.185, 'duration': 2.542}, {'end': 14.989, 'text': "The concept behind it is, consider you've got a website.", 'start': 10.787, 'duration': 4.202}, {'end': 17.871, 'text': 'Most websites look very similar page to page.', 'start': 15.109, 'duration': 2.762}, {'end': 22.673, 'text': 'This is because they use what we call in the HTML circles headers and footers.', 'start': 17.931, 'duration': 4.742}, {'end': 30.998, 'text': "And so the idea there is that you've got navbars, let's say, and the navbar is something you include in your header file.", 'start': 24.134, 'duration': 6.864}, {'end': 35.187, 'text': 'and this way, on every page, the navigation bar is identical.', 'start': 31.583, 'duration': 3.604}, {'end': 46.077, 'text': 'then, when it comes time to change the navigation bar, you just have to edit one file rather than editing a hundred files or or even more, right?', 'start': 35.187, 'duration': 10.89}], 'summary': 'Django tutorial on templating for consistent website design and easy navigation updates.', 'duration': 44.036, 'max_score': 2.041, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo2041.jpg'}], 'start': 2.041, 'title': 'Django templating', 'summary': 'Discusses the concept of templating in django, emphasizing the efficiency of maintaining consistent website elements across pages by using headers and footers, resulting in significant time savings for editing.', 'chapters': [{'end': 46.077, 'start': 2.041, 'title': 'Django templating tutorial', 'summary': 'Discusses the concept of templating in django, emphasizing the efficiency of maintaining consistent website elements across pages by using headers and footers, resulting in significant time savings for editing.', 'duration': 44.036, 'highlights': ['The concept of templating in Django focuses on maintaining consistent website elements across pages, such as headers and footers, to ensure a uniform look and feel. This approach saves time and effort by allowing changes to be made in a single file rather than multiple pages.', 'We use what we call in the HTML circles headers and footers to ensure that most websites look very similar page to page, resulting in efficient website management.']}], 'duration': 44.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo2041.jpg', 'highlights': ['The concept of templating in Django focuses on maintaining consistent website elements across pages, such as headers and footers, to ensure a uniform look and feel.', 'This approach saves time and effort by allowing changes to be made in a single file rather than multiple pages.', 'We use what we call in the HTML circles headers and footers to ensure that most websites look very similar page to page, resulting in efficient website management.']}, {'end': 354.171, 'segs': [{'end': 97.595, 'src': 'embed', 'start': 46.077, 'weight': 0, 'content': [{'end': 56.995, 'text': 'so uh, so we use, we use templates to do that and in for python and with major python frameworks we use jinja So.', 'start': 46.077, 'duration': 10.918}, {'end': 62.02, 'text': 'Jinja is a templating framework built with Python and working with Python in mind.', 'start': 56.995, 'duration': 5.025}, {'end': 64.702, 'text': 'It is not Python in HTML.', 'start': 62.5, 'duration': 2.202}, {'end': 72.951, 'text': "There are a lot of things in Python that you just can't do with Jinja, but Jinja can do a lot of logic.", 'start': 64.923, 'duration': 8.028}, {'end': 79.217, 'text': 'that at least gets us pretty far with writing dynamic and logical-ish HTML.', 'start': 72.951, 'duration': 6.266}, {'end': 86.288, 'text': "And there are actually some things in Jinja that you can do that you can't do in Python just based on the fact that we're writing in HTML.", 'start': 79.844, 'duration': 6.444}, {'end': 88.79, 'text': "So anyways, let's go ahead and get started.", 'start': 86.868, 'duration': 1.922}, {'end': 97.595, 'text': "The first thing that we're going to do is this project, the idea here is to create a personal website, an about you website.", 'start': 88.83, 'duration': 8.765}], 'summary': 'Using jinja for python templates to create a personal website.', 'duration': 51.518, 'max_score': 46.077, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo46077.jpg'}, {'end': 210.552, 'src': 'embed', 'start': 117.315, 'weight': 2, 'content': [{'end': 124.538, 'text': 'Now, first thing you do when you start an app, there are a few things, but the very first thing you have to do, install the app.', 'start': 117.315, 'duration': 7.223}, {'end': 128.56, 'text': 'So move this aside, go into my site, settings.py.', 'start': 124.958, 'duration': 3.602}, {'end': 131.933, 'text': 'And we install the app.', 'start': 131.172, 'duration': 0.761}, {'end': 133.194, 'text': "Right now I've got web app.", 'start': 132.253, 'duration': 0.941}, {'end': 134.335, 'text': "We'll just add a new one.", 'start': 133.234, 'duration': 1.101}, {'end': 136.477, 'text': 'And this app is personal.', 'start': 135.296, 'duration': 1.181}, {'end': 138.799, 'text': "So we've installed the app.", 'start': 137.317, 'duration': 1.482}, {'end': 140.64, 'text': "I'm going to delete web app.", 'start': 139.639, 'duration': 1.001}, {'end': 142.242, 'text': "We're not actually going to be using it anyway.", 'start': 140.66, 'duration': 1.582}, {'end': 143.643, 'text': 'So done.', 'start': 142.322, 'duration': 1.321}, {'end': 153.612, 'text': "And what is the second thing you pretty much always are going to have to do? Well, you've got to have a link that sends people to the app.", 'start': 145.104, 'duration': 8.508}, {'end': 157.315, 'text': "So in the urls.py file, let's edit that.", 'start': 154.192, 'duration': 3.123}, {'end': 162.493, 'text': "and in most cases you'll be able to just follow.", 'start': 159.429, 'duration': 3.064}, {'end': 163.294, 'text': "I'm gonna leave this here.", 'start': 162.493, 'duration': 0.801}, {'end': 170.022, 'text': "we are gonna get rid of it, just like we got rid of web app, but in most cases you'll probably follow this structure that I'm about to show you.", 'start': 163.294, 'duration': 6.728}, {'end': 175.897, 'text': "So you'll take one of the previous lines that's including write another app, copy, paste, done.", 'start': 171.055, 'duration': 4.842}, {'end': 179.219, 'text': "And then instead of webapp.urls, it's personal.urls.", 'start': 176.358, 'duration': 2.861}, {'end': 180.559, 'text': "That doesn't exist yet.", 'start': 179.719, 'duration': 0.84}, {'end': 181.76, 'text': "We will make it, don't worry.", 'start': 180.639, 'duration': 1.121}, {'end': 184.781, 'text': "And we've got the path.", 'start': 182.76, 'duration': 2.021}, {'end': 189.203, 'text': 'The path, really the personal website is the crux of our website.', 'start': 184.961, 'duration': 4.242}, {'end': 193.405, 'text': 'So what URL path should link to it? Well, the index path.', 'start': 189.303, 'duration': 4.102}, {'end': 197.207, 'text': 'So, basically the string that goes caret dollar sign.', 'start': 193.505, 'duration': 3.702}, {'end': 200.226, 'text': "Again, that means that's the beginning of the string.", 'start': 198.024, 'duration': 2.202}, {'end': 203.127, 'text': 'the string ends, so the index page right?', 'start': 200.226, 'duration': 2.901}, {'end': 208.871, 'text': "If there is no other link assigned to the path right, it's just the homepage.", 'start': 203.147, 'duration': 5.724}, {'end': 210.552, 'text': 'we wanna include personal URLs.', 'start': 208.871, 'duration': 1.681}], 'summary': 'Install and link a new personal app in the website settings and urls.', 'duration': 93.237, 'max_score': 117.315, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo117315.jpg'}, {'end': 242.446, 'src': 'heatmap', 'start': 216.356, 'weight': 0.739, 'content': [{'end': 220.299, 'text': "So this includes personal.urls, so that's the next thing that we need to make.", 'start': 216.356, 'duration': 3.943}, {'end': 221.54, 'text': 'So quit.', 'start': 220.859, 'duration': 0.681}, {'end': 224.235, 'text': 'Go back a directory.', 'start': 223.154, 'duration': 1.081}, {'end': 227.357, 'text': "We've pretty much removed all web apps, so I'm going to delete web app.", 'start': 224.795, 'duration': 2.562}, {'end': 228.517, 'text': 'You can leave it there if you want.', 'start': 227.577, 'duration': 0.94}, {'end': 229.058, 'text': "It doesn't matter.", 'start': 228.537, 'duration': 0.521}, {'end': 232.019, 'text': 'And into personal.', 'start': 230.579, 'duration': 1.44}, {'end': 234.421, 'text': "We don't have a urls.py in personal.", 'start': 232.5, 'duration': 1.921}, {'end': 237.403, 'text': "And in fact, we're going to copy and paste from the other urls.py.", 'start': 234.441, 'duration': 2.962}, {'end': 241.185, 'text': 'So back to my site and just open up the my site slash urls.py.', 'start': 237.423, 'duration': 3.762}, {'end': 242.446, 'text': 'Move that aside for now.', 'start': 241.565, 'duration': 0.881}], 'summary': 'Instructions for updating urls.py in web app and personal directories.', 'duration': 26.09, 'max_score': 216.356, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo216356.jpg'}, {'end': 266.34, 'src': 'heatmap', 'start': 237.423, 'weight': 5, 'content': [{'end': 241.185, 'text': 'So back to my site and just open up the my site slash urls.py.', 'start': 237.423, 'duration': 3.762}, {'end': 242.446, 'text': 'Move that aside for now.', 'start': 241.565, 'duration': 0.881}, {'end': 243.826, 'text': 'And back to personal.', 'start': 243.066, 'duration': 0.76}, {'end': 248.269, 'text': 'And make a new file called urls.py.', 'start': 244.947, 'duration': 3.322}, {'end': 249.51, 'text': "We're going to edit it.", 'start': 248.809, 'duration': 0.701}, {'end': 254.357, 'text': "And I'm going to take basically all this code, copy, paste.", 'start': 250.396, 'duration': 3.961}, {'end': 258.718, 'text': "We do have to make quite a few modifications, but it's going to be OK, everyone.", 'start': 254.637, 'duration': 4.081}, {'end': 262.079, 'text': 'So we can leave this.', 'start': 259.358, 'duration': 2.721}, {'end': 266.34, 'text': "We actually don't need that URL, but we'll leave it there.", 'start': 262.199, 'duration': 4.141}], 'summary': 'Creating and editing files for site and personal, making modifications.', 'duration': 28.917, 'max_score': 237.423, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo237423.jpg'}, {'end': 314.223, 'src': 'embed', 'start': 284.121, 'weight': 4, 'content': [{'end': 287.706, 'text': 'what we typically are going to be doing is returning views.', 'start': 284.121, 'duration': 3.585}, {'end': 294.274, 'text': 'So what we need to do is remember that we go from period or relative import views.', 'start': 288.266, 'duration': 6.008}, {'end': 300.109, 'text': "So, once you've got that, you come down here and rather than the homepage.", 'start': 295.905, 'duration': 4.204}, {'end': 305.334, 'text': "so basically that URL is going to say hey, let's check out the other URLs.py.", 'start': 300.109, 'duration': 5.225}, {'end': 314.223, 'text': "And what we're saying here is if the URL remains caret dollar sign, as in it's a homepage, which it absolutely must be we're going to include?", 'start': 305.514, 'duration': 8.709}], 'summary': 'Returning views from urls.py for the homepage.', 'duration': 30.102, 'max_score': 284.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo284121.jpg'}, {'end': 354.171, 'src': 'heatmap', 'start': 329.404, 'weight': 6, 'content': [{'end': 336.33, 'text': "So at this point, you should be questioning, hey, do I have a views.index, right? Because we're trying to return that.", 'start': 329.404, 'duration': 6.926}, {'end': 340.434, 'text': 'So save that, exit that, head into views.', 'start': 337.071, 'duration': 3.363}, {'end': 344.862, 'text': "And we look, and nope, we don't have a views.index.", 'start': 342.079, 'duration': 2.783}, {'end': 347.364, 'text': "So let's go ahead and create one.", 'start': 345.362, 'duration': 2.002}, {'end': 349.466, 'text': "So we're going to say define index because we have to.", 'start': 347.384, 'duration': 2.082}, {'end': 353.43, 'text': 'The obligatory parameter here is always request.', 'start': 350.567, 'duration': 2.863}, {'end': 354.171, 'text': "You've got to pass it.", 'start': 353.45, 'duration': 0.721}], 'summary': 'Create views.index with define index and obligatory parameter request.', 'duration': 24.767, 'max_score': 329.404, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo329404.jpg'}], 'start': 46.077, 'title': 'Building dynamic html and personal app in python', 'summary': 'Introduces jinja for creating dynamic html and logical-ish html to build a personal website, then discusses creating a personal app in python, specifying the full path to python, installing the app, editing the urls.py file, defining the url path for the personal website, and updating urls and views including deleting unnecessary code, copying code, and creating new code to ensure correct functioning of the web application.', 'chapters': [{'end': 97.595, 'start': 46.077, 'title': 'Using jinja for dynamic html in python', 'summary': 'Introduces jinja as a templating framework for python, highlighting its capability to create dynamic and logical-ish html, with the aim of creating a personal website.', 'duration': 51.518, 'highlights': ['Jinja is a templating framework built with Python and working with Python in mind.', 'Jinja can do a lot of logic and helps in writing dynamic and logical-ish HTML.', "The project's goal is to create a personal website using Jinja for dynamic content."]}, {'end': 210.552, 'start': 98.636, 'title': 'Creating a personal app in python', 'summary': 'Discusses the process of creating a new personal app in python, including specifying the full path to python, installing the app, editing the urls.py file, and defining the url path for the personal website.', 'duration': 111.916, 'highlights': ["The first step in starting a new app is installing the app in the settings.py file, such as the 'personal' app being installed after deleting the 'web app'.", "In the urls.py file, the process involves adding a link to the app by editing the file and specifying the path, with the example of replacing 'webapp.urls' with 'personal.urls'.", 'The chapter emphasizes the importance of defining the URL path for the personal website, specifically highlighting the index path as the crux of the website and explaining the significance of the caret dollar sign in the string.', 'The process of creating a new personal app in Python involves specifying the full path to Python, installing the app in the settings.py file, editing the urls.py file to add a link to the app, and defining the URL path for the personal website.']}, {'end': 354.171, 'start': 211.133, 'title': 'Updating urls and views', 'summary': "Covers the process of updating and creating urls and views, including deleting unnecessary code, copying code from one file to another, and creating new code to match the modifications, with a focus on updating the 'urls.py' file in the 'personal' directory and creating the 'views.index' function, to ensure the correct functioning of the web application.", 'duration': 143.038, 'highlights': ['The process of updating and creating URLs and views, including deleting unnecessary code, copying code from one file to another, and creating new code to match the modifications. The chapter provides a detailed walkthrough of the process of updating and creating URLs and views, involving the deletion of unnecessary code, copying code from one file to another, and creating new code to match the modifications.', "The focus on updating the 'urls.py' file in the 'personal' directory and creating the 'views.index' function. Emphasis is placed on updating the 'urls.py' file in the 'personal' directory and creating the 'views.index' function to ensure the correct functioning of the web application.", "The need to ensure the correct functioning of the web application through the creation of the 'views.index' function. The chapter stresses the importance of creating the 'views.index' function to ensure the correct functioning of the web application.", 'The necessity to delete unnecessary code and modify existing code to align with the required changes. There is an emphasis on the necessity to delete unnecessary code and modify existing code to align with the required changes in the web application.']}], 'duration': 308.094, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo46077.jpg', 'highlights': ['Jinja is a templating framework built with Python and working with Python in mind.', "The project's goal is to create a personal website using Jinja for dynamic content.", 'The process of creating a new personal app in Python involves specifying the full path to Python, installing the app in the settings.py file, editing the urls.py file to add a link to the app, and defining the URL path for the personal website.', 'The chapter emphasizes the importance of defining the URL path for the personal website, specifically highlighting the index path as the crux of the website and explaining the significance of the caret dollar sign in the string.', 'The process of updating and creating URLs and views, including deleting unnecessary code, copying code from one file to another, and creating new code to match the modifications. The chapter provides a detailed walkthrough of the process of updating and creating URLs and views, involving the deletion of unnecessary code, copying code from one file to another, and creating new code to match the modifications.', "The focus on updating the 'urls.py' file in the 'personal' directory and creating the 'views.index' function. Emphasis is placed on updating the 'urls.py' file in the 'personal' directory and creating the 'views.index' function to ensure the correct functioning of the web application.", "The need to ensure the correct functioning of the web application through the creation of the 'views.index' function. The chapter stresses the importance of creating the 'views.index' function to ensure the correct functioning of the web application.", 'The necessity to delete unnecessary code and modify existing code to align with the required changes. There is an emphasis on the necessity to delete unnecessary code and modify existing code to align with the required changes in the web application.', "In the urls.py file, the process involves adding a link to the app by editing the file and specifying the path, with the example of replacing 'webapp.urls' with 'personal.urls'.", "The first step in starting a new app is installing the app in the settings.py file, such as the 'personal' app being installed after deleting the 'web app'."]}, {'end': 969.231, 'segs': [{'end': 425.705, 'src': 'embed', 'start': 356.229, 'weight': 0, 'content': [{'end': 357.47, 'text': "I think it's just to be explicit.", 'start': 356.229, 'duration': 1.241}, {'end': 364.196, 'text': "It'd be easier if you didn't have to keep passing that through, but with Django, explicit is nice.", 'start': 359.031, 'duration': 5.165}, {'end': 367.538, 'text': 'Anyway, a lot of stuff is magical.', 'start': 364.816, 'duration': 2.722}, {'end': 376.946, 'text': "We are going to return, and before we return that HTTP response, that's really not going to be your main method of returning anything.", 'start': 368.559, 'duration': 8.387}, {'end': 384.71, 'text': "And as you might even be able to guess, the the main one is actually a render, right? And that's if you're actually using views.py.", 'start': 377.606, 'duration': 7.104}, {'end': 389.111, 'text': "Later on I'll show you actually a lot of people don't even use a views.py and I'll show you why.", 'start': 384.87, 'duration': 4.241}, {'end': 394.633, 'text': 'But if you are using a views.py, chances are you are going to be returning a render.', 'start': 389.951, 'duration': 4.682}, {'end': 407.317, 'text': 'So return render and you have to pass the obligatory request and then you pass the location of the HTML template you want to render.', 'start': 395.113, 'duration': 12.204}, {'end': 413.36, 'text': "So we're going to return personal slash home.html.", 'start': 407.777, 'duration': 5.583}, {'end': 416.521, 'text': "Okay And that's all we're going to do.", 'start': 414.78, 'duration': 1.741}, {'end': 425.705, 'text': 'You can also pass a dictionary, and the dictionary will be then passed to your template, which you can then use, Jinja,', 'start': 416.681, 'duration': 9.024}], 'summary': 'In django, returning render in views.py is common, passing html template and optional dictionary.', 'duration': 69.476, 'max_score': 356.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo356229.jpg'}, {'end': 556.155, 'src': 'embed', 'start': 526.604, 'weight': 5, 'content': [{'end': 531.167, 'text': 'as if they were all stored in a single templates directory.', 'start': 526.604, 'duration': 4.563}, {'end': 535.311, 'text': 'So if you have two templates that have the identical name, this can be a problem.', 'start': 531.748, 'duration': 3.563}, {'end': 539.115, 'text': 'So you have two ways to get around this.', 'start': 536.232, 'duration': 2.883}, {'end': 543.138, 'text': 'One is to never call any template the same as any other template.', 'start': 539.435, 'duration': 3.703}, {'end': 547.002, 'text': 'This can be a challenge, though, to remember to do.', 'start': 543.479, 'duration': 3.523}, {'end': 556.155, 'text': 'So the other thing is to just have a principle where in this templates directory, you have another directory that is, again, personal.', 'start': 547.805, 'duration': 8.35}], 'summary': 'Avoid duplicate template names; use separate directories for organization.', 'duration': 29.551, 'max_score': 526.604, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo526604.jpg'}, {'end': 603.524, 'src': 'heatmap', 'start': 579.52, 'weight': 0.73, 'content': [{'end': 588.105, 'text': "So anyways, in personal, we need a new file and I wonder if I have, I guess we don't really have any files.", 'start': 579.52, 'duration': 8.585}, {'end': 593.608, 'text': "So new and I was really hoping, let's see.", 'start': 588.145, 'duration': 5.463}, {'end': 600.363, 'text': 'Okay, so what I got to do here is open up like a Notepad++.', 'start': 595.942, 'duration': 4.421}, {'end': 603.524, 'text': "You can actually use Notepad, but I wouldn't recommend it.", 'start': 600.403, 'duration': 3.121}], 'summary': 'Discussion about needing a new file and using notepad++ over notepad.', 'duration': 24.004, 'max_score': 579.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo579520.jpg'}, {'end': 634.097, 'src': 'embed', 'start': 604.044, 'weight': 6, 'content': [{'end': 608.725, 'text': 'And what we want to do is actually save a new file to this, you know, personal templates, personal.', 'start': 604.044, 'duration': 4.681}, {'end': 610.906, 'text': 'So personal templates, personal.', 'start': 608.785, 'duration': 2.121}, {'end': 618.627, 'text': "And what I'm going to call this file is going to be our..", 'start': 611.886, 'duration': 6.741}, {'end': 619.068, 'text': 'This will be our..', 'start': 618.627, 'duration': 0.441}, {'end': 623.653, 'text': 'I guess this will be our header.', 'start': 621.872, 'duration': 1.781}, {'end': 627.875, 'text': "So we're gonna make our header and then the file type is HTML.", 'start': 623.953, 'duration': 3.922}, {'end': 630.296, 'text': 'So this is our header.html.', 'start': 628.535, 'duration': 1.761}, {'end': 631.317, 'text': 'So save that.', 'start': 630.616, 'duration': 0.701}, {'end': 634.097, 'text': "And in here, we're gonna put some HTML.", 'start': 632.416, 'duration': 1.681}], 'summary': 'Creating a new html file named header.html in personal templates.', 'duration': 30.053, 'max_score': 604.044, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo604044.jpg'}, {'end': 730.829, 'src': 'embed', 'start': 703.422, 'weight': 7, 'content': [{'end': 707.305, 'text': "So as you can see, there's really nothing here that we're saying, hey, use Jinja.", 'start': 703.422, 'duration': 3.883}, {'end': 710.088, 'text': 'This is just, it just is used.', 'start': 707.325, 'duration': 2.763}, {'end': 714.432, 'text': 'Okay, so Django, Flask, whatever, is just gonna recognize this as Jinja.', 'start': 710.488, 'duration': 3.944}, {'end': 717.575, 'text': "So we've got block content, block body.", 'start': 715.413, 'duration': 2.162}, {'end': 729.429, 'text': "What's going on here is well, the next thing we do is define a file that's going to basically fill in the between these tags.", 'start': 717.915, 'duration': 11.514}, {'end': 730.829, 'text': 'basically, these are logic tags.', 'start': 729.429, 'duration': 1.4}], 'summary': 'The transcript discusses the use of jinja in django and flask, highlighting its recognition and utilization for logic tags.', 'duration': 27.407, 'max_score': 703.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo703422.jpg'}, {'end': 971.012, 'src': 'heatmap', 'start': 912.359, 'weight': 8, 'content': [{'end': 913.72, 'text': 'I am a programmer.', 'start': 912.359, 'duration': 1.361}, {'end': 915.101, 'text': 'Okay, good enough.', 'start': 914.14, 'duration': 0.961}, {'end': 917.182, 'text': 'So we can save that.', 'start': 916.362, 'duration': 0.82}, {'end': 922.465, 'text': 'Now what we have is hopefully everything we need.', 'start': 918.743, 'duration': 3.722}, {'end': 924.326, 'text': "We'll go ahead and start and see if we get any errors.", 'start': 922.505, 'duration': 1.821}, {'end': 929.99, 'text': "So I'm just going to hit up instead of manage.py start app, we're going to manage.py run server.", 'start': 924.727, 'duration': 5.263}, {'end': 934.322, 'text': 'And it looks like everything worked out so far.', 'start': 932.12, 'duration': 2.202}, {'end': 937.585, 'text': 'If I go to the site, sure enough, we get the home page.', 'start': 935.143, 'duration': 2.442}, {'end': 939.107, 'text': 'Hey, welcome to iOS 7 programmer.', 'start': 937.626, 'duration': 1.481}, {'end': 942.911, 'text': 'And so let me go back to here.', 'start': 940.428, 'duration': 2.483}, {'end': 953.619, 'text': "Yes, So the views.py that we're rendering, that corresponds to this homepage, basically again, is actually personal home.html, not header.", 'start': 943.331, 'duration': 10.288}, {'end': 960.765, 'text': "but if we view source, which is control u, for example in chrome, you'll see that we got all that other information.", 'start': 953.619, 'duration': 7.146}, {'end': 969.231, 'text': "in fact, we don't even have the ginger logic, we just have the html that was generated, generated by the ginger logic.", 'start': 960.765, 'duration': 8.466}, {'end': 971.012, 'text': "okay, so that's pretty, pretty cool.", 'start': 969.231, 'duration': 1.781}], 'summary': 'Programmer successfully runs server and renders webpage with html generated by jinja logic.', 'duration': 58.653, 'max_score': 912.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo912359.jpg'}], 'start': 356.229, 'title': 'Django views, rendering, and html templates', 'summary': 'Discusses the use of render method in django views, emphasizing explicitness and magic in the framework. it also explains rendering html templates in django, including passing the location of the html template and potential issues. additionally, it covers creating and extending html templates in django, including creating a new html file, extending the template, and successfully running the server to view the home page.', 'chapters': [{'end': 394.633, 'start': 356.229, 'title': 'Django views and rendering', 'summary': 'Discusses the use of render method in django views, highlighting its prevalence and the possibility of not using views.py, with an emphasis on explicitness and magic in the framework.', 'duration': 38.404, 'highlights': ['The render method is the main one for returning in Django views, with the likelihood of being used when employing views.py.', 'Explicitness is valued in Django, although there are aspects that are considered magical.', 'Many users may not utilize views.py in Django, with reasons to be explained later.']}, {'end': 572.716, 'start': 395.113, 'title': 'Rendering html templates in django', 'summary': "Explains the process of rendering html templates in django, including the use of 'render' to pass the location of the html template, the option to pass a dictionary to the template for use with jinja, and the potential issue of conflicting template names in a templates directory.", 'duration': 177.603, 'highlights': ["The 'render' function is used to pass the location of the HTML template in Django. The 'render' function is used to pass the location of the HTML template, such as 'personal/home.html', in Django.", 'A dictionary can be passed to the template for use with Jinja, allowing for manipulation of the template content. A dictionary can be passed to the template, allowing for manipulation of the template content using Jinja.', 'The potential issue of conflicting template names in a templates directory is addressed, providing solutions to avoid conflicts. The chapter addresses the potential issue of conflicting template names in a templates directory and provides solutions to avoid conflicts, such as using unique template names or organizing templates into separate directories.']}, {'end': 969.231, 'start': 572.716, 'title': 'Creating html templates and extending in django', 'summary': 'Covers the process of creating a new html file, saving it as header.html, explaining the structure and logic of html, extending the template to create a home.html, and successfully running the server to view the home page.', 'duration': 396.515, 'highlights': ['The process of creating a new HTML file, saving it as header.html, is explained, demonstrating the use of Notepad++ and the inclusion of HTML content, with the source code hosted on pythonprogramming.net.', 'The structure and logic of HTML, including the use of Jinja for defining blocks and logic tags, is detailed, emphasizing the definition of a file to fill in spaces and the significance of extending templates in Django.', 'The successful execution of the server to view the home page, along with the corresponding rendering of the views.py and the generation of HTML through Jinja logic, is highlighted.']}], 'duration': 613.002, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo356229.jpg', 'highlights': ['The render method is the main one for returning in Django views, with the likelihood of being used when employing views.py.', 'Explicitness is valued in Django, although there are aspects that are considered magical.', 'Many users may not utilize views.py in Django, with reasons to be explained later.', "The 'render' function is used to pass the location of the HTML template in Django.", 'A dictionary can be passed to the template for use with Jinja, allowing for manipulation of the template content.', 'The potential issue of conflicting template names in a templates directory is addressed, providing solutions to avoid conflicts.', 'The process of creating a new HTML file, saving it as header.html, is explained, demonstrating the use of Notepad++ and the inclusion of HTML content.', 'The structure and logic of HTML, including the use of Jinja for defining blocks and logic tags, is detailed, emphasizing the definition of a file to fill in spaces and the significance of extending templates in Django.', 'The successful execution of the server to view the home page, along with the corresponding rendering of the views.py and the generation of HTML through Jinja logic, is highlighted.']}, {'end': 1266.012, 'segs': [{'end': 1028.561, 'src': 'embed', 'start': 1000.145, 'weight': 2, 'content': [{'end': 1004.708, 'text': 'What if you wanna include multiple HTML snippets in one HTML file??', 'start': 1000.145, 'duration': 4.563}, {'end': 1010.891, 'text': 'That can get kind of messy, especially because, like which one gets included?', 'start': 1005.568, 'duration': 5.323}, {'end': 1012.833, 'text': 'like, are they included in order?', 'start': 1010.891, 'duration': 1.942}, {'end': 1014.233, 'text': 'or you know what?', 'start': 1012.833, 'duration': 1.4}, {'end': 1022.298, 'text': 'So another method that we have is, instead of using the extends logic, we can use logic that is, includes.', 'start': 1014.594, 'duration': 7.704}, {'end': 1028.561, 'text': 'So again, we add some logic and this logic is gonna be include.', 'start': 1023.179, 'duration': 5.382}], 'summary': "To include multiple html snippets in an html file, use the 'include' logic instead of 'extends' logic.", 'duration': 28.416, 'max_score': 1000.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo1000145.jpg'}, {'end': 1078.721, 'src': 'embed', 'start': 1050.166, 'weight': 1, 'content': [{'end': 1053.467, 'text': 'And I like to keep Keep things as organized as possible here.', 'start': 1050.166, 'duration': 3.301}, {'end': 1057.989, 'text': 'a lot of times you you start off like with maybe like five templates.', 'start': 1053.467, 'duration': 4.522}, {'end': 1067.394, 'text': "Okay, and as your website grows soon enough, You've got like 25 templates and then with includes you might have another hundred includes or something.", 'start': 1057.989, 'duration': 9.405}, {'end': 1069.895, 'text': 'So I always like to have includes in a separate directory.', 'start': 1067.394, 'duration': 2.501}, {'end': 1076.478, 'text': "So we're gonna include personal includes and then I'm just gonna call this HTML snippet dot HTML.", 'start': 1069.895, 'duration': 6.583}, {'end': 1078.721, 'text': "So we'll save that.", 'start': 1078.001, 'duration': 0.72}], 'summary': 'Organize templates and includes into separate directories to manage website growth and avoid clutter.', 'duration': 28.555, 'max_score': 1050.166, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo1050166.jpg'}, {'end': 1228.975, 'src': 'embed', 'start': 1203.649, 'weight': 0, 'content': [{'end': 1210.634, 'text': "Sure enough, if we go to the source code, you can see that there's, again, no Jinja logic, it's just the text that was rendered.", 'start': 1203.649, 'duration': 6.985}, {'end': 1218.582, 'text': "Okay, so there's like the basics of Jinja templating, the extreme basics.", 'start': 1212.133, 'duration': 6.449}, {'end': 1226.072, 'text': "We haven't covered variables and really that much, Jinja logic, but as you can see, you can probably start to do some pretty cool stuff,", 'start': 1218.622, 'duration': 7.45}, {'end': 1227.474, 'text': 'even with just this information.', 'start': 1226.072, 'duration': 1.402}, {'end': 1228.975, 'text': 'In the next tutorial.', 'start': 1228.275, 'duration': 0.7}], 'summary': 'Intro to jinja templating, limited coverage of variables and logic, more to come in next tutorial.', 'duration': 25.326, 'max_score': 1203.649, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo1203649.jpg'}, {'end': 1266.012, 'src': 'embed', 'start': 1244.3, 'weight': 3, 'content': [{'end': 1247.161, 'text': "So the next tutorial, we're going to be talking about HTML and CSS.", 'start': 1244.3, 'duration': 2.861}, {'end': 1253.643, 'text': 'Luckily for us programmers, there is a lovely, lovely thing called Bootstrap.', 'start': 1247.681, 'duration': 5.962}, {'end': 1257.824, 'text': "So that's what we're going to be talking about in the next tutorial is incorporating Bootstrap into our project.", 'start': 1253.663, 'duration': 4.161}, {'end': 1259.245, 'text': 'So stay tuned for that.', 'start': 1258.384, 'duration': 0.861}, {'end': 1261.608, 'text': 'If you have questions, comments, concerns, whatever, leave them below.', 'start': 1259.345, 'duration': 2.263}, {'end': 1263.249, 'text': 'Otherwise, as always, thanks for watching.', 'start': 1261.668, 'duration': 1.581}, {'end': 1264.731, 'text': 'Thanks for all the support and subscriptions.', 'start': 1263.309, 'duration': 1.422}, {'end': 1266.012, 'text': 'And until next time.', 'start': 1264.871, 'duration': 1.141}], 'summary': 'Next tutorial will cover incorporating bootstrap into project for html and css. stay tuned.', 'duration': 21.712, 'max_score': 1244.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo1244300.jpg'}], 'start': 969.231, 'title': 'Jinja templating basics', 'summary': 'Covers the basics of jinja templating, including the use of extends and includes, focusing on the flexibility and organization in handling html snippets, preparing for the incorporation of bootstrap in the next tutorial.', 'chapters': [{'end': 1266.012, 'start': 969.231, 'title': 'Jinja templating basics', 'summary': 'Covers the basics of jinja templating, including the use of extends and includes, with a focus on how includes allow for more flexibility and organization in handling html snippets, preparing for the incorporation of bootstrap in the next tutorial.', 'duration': 296.781, 'highlights': ['The chapter covers the basics of Jinja templating, including the use of extends and includes. ', 'Includes allow for more flexibility and organization in handling HTML snippets, especially as the number of templates and includes grows. Mention of organizing 100 includes and 25 templates.', 'The use of includes provides the ability to include HTML snippets anywhere, multiple times, and without the restrictiveness of extends. Emphasizes the ability to include snippets multiple times and anywhere.', 'Preparation for the incorporation of Bootstrap in the next tutorial is mentioned. ']}], 'duration': 296.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3tf8XlhsQAo/pics/3tf8XlhsQAo969231.jpg', 'highlights': ['The chapter covers the basics of Jinja templating, including the use of extends and includes.', 'Includes allow for more flexibility and organization in handling HTML snippets, especially as the number of templates and includes grows. Mention of organizing 100 includes and 25 templates.', 'The use of includes provides the ability to include HTML snippets anywhere, multiple times, and without the restrictiveness of extends. Emphasizes the ability to include snippets multiple times and anywhere.', 'Preparation for the incorporation of Bootstrap in the next tutorial is mentioned.']}], 'highlights': ['The concept of templating in Django focuses on maintaining consistent website elements across pages, such as headers and footers, to ensure a uniform look and feel.', 'This approach saves time and effort by allowing changes to be made in a single file rather than multiple pages.', 'Jinja is a templating framework built with Python and working with Python in mind.', "The project's goal is to create a personal website using Jinja for dynamic content.", 'The process of creating a new personal app in Python involves specifying the full path to Python, installing the app in the settings.py file, editing the urls.py file to add a link to the app, and defining the URL path for the personal website.', 'The render method is the main one for returning in Django views, with the likelihood of being used when employing views.py.', 'Explicitness is valued in Django, although there are aspects that are considered magical.', "The 'render' function is used to pass the location of the HTML template in Django.", 'A dictionary can be passed to the template for use with Jinja, allowing for manipulation of the template content.', 'The chapter covers the basics of Jinja templating, including the use of extends and includes.', 'Includes allow for more flexibility and organization in handling HTML snippets, especially as the number of templates and includes grows. Mention of organizing 100 includes and 25 templates.', 'The use of includes provides the ability to include HTML snippets anywhere, multiple times, and without the restrictiveness of extends. Emphasizes the ability to include snippets multiple times and anywhere.']}