{"id":5919,"date":"2020-02-22T17:00:41","date_gmt":"2020-02-22T16:00:41","guid":{"rendered":"https:\/\/blog.via-internet.de\/?p=5919"},"modified":"2020-02-22T17:00:41","modified_gmt":"2020-02-22T16:00:41","slug":"build-a-dashboard-with-django-and-bootstrap-part-2","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2020\/02\/22\/build-a-dashboard-with-django-and-bootstrap-part-2\/","title":{"rendered":"Django | Build a Dashboard with Django and Bootstrap: Part 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This is Part 2 of <em>Building a Dashboard with Django  and Bootstrap<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/blog.via-internet.de\/en\/blog\/2020\/02\/21\/build-a-dashboard-with-django-and-bootstrap-part-1\/\"><\/a><a href=\"https:\/\/blog.via-internet.de\/en\/blog\/2020\/02\/21\/build-a-dashboard-with-django-and-bootstrap-part-1\/\"><\/a><a href=\"https:\/\/blog.via-internet.de\/en\/build-a-dashboard-with-django-and-bootstrap-part-1\/\">Part 1: Building a base Django project<\/a><\/li><li><a href=\"https:\/\/blog.via-internet.de\/en\/blog\/2020\/02\/21\/build-a-dashboard-with-django-and-bootstrap-part-1\/\"><\/a><strong>Part 2: Prepare for dynamic content<\/strong><\/li><li><a href=\"https:\/\/blog.via-internet.de\/en\/blog\/2020\/02\/21\/build-a-dashboard-with-django-and-bootstrap-part-1\/\"><\/a><a href=\"https:\/\/blog.via-internet.de\/en\/build-a-dashboard-with-django-and-bootstrap-part-3\/\">Part 3: Handling navigation and the side menu<\/a><\/li><li><a href=\"https:\/\/blog.via-internet.de\/en\/blog\/2020\/02\/21\/build-a-dashboard-with-django-and-bootstrap-part-1\/\"><\/a><a href=\"https:\/\/blog.via-internet.de\/en\/build-a-dashboard-with-django-and-bootstrap-part-4\/\">Part 4: Deploy Django App to Azure<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you follow the first part of this blog topic, you have a running Django dashboard.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But, unfortunately, the content is still static. Let&#8217;s review the current state:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"870\" src=\"https:\/\/i1.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/61_dashboard.png?fit=700%2C609&amp;ssl=1\" alt=\"\" class=\"wp-image-5886\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/61_dashboard.png 1000w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/61_dashboard-300x261.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/61_dashboard-768x668.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><div class=\"wp-block-group__inner-container\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Perfect. We are done with the basic setup.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Still, some work to do, because our dashboard is only a static dashboard. All content is programmed in the dashboard template file <code>dashboard\/templates\/site\/sb-admin-2\/base.html<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, look at the cards with the earnings at the top:<\/p>\n\n\n\n<figure class=\"wp-block-table alignwide\"><table><tbody><tr><td><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"168\" class=\"wp-image-5890\" style=\"width: 500px;\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_ui.png\" alt=\"\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_ui.png 552w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_ui-300x101.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/td><td><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"154\" class=\"wp-image-5888\" style=\"width: 500px;\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_codeX.png\" alt=\"\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_codeX.png 1334w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_codeX-300x93.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_codeX-1024x316.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_codeX-768x237.png 768w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/td><\/tr><tr><td><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"168\" class=\"wp-image-5889\" style=\"width: 500px;\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_ui.png\" alt=\"\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_ui.png 554w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_ui-300x101.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/td><td><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"158\" class=\"wp-image-5891\" style=\"width: 500px;\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_code.png\" alt=\"\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_code.png 1320w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_code-300x95.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_code-1024x323.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_code-768x242.png 768w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the frontend view file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We will do this by following these steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Identify the dynamic parts<\/li><li>Move these parts from the template into for frontend view template <code>index.html<\/code><\/li><li>Modify frontend <code>view.py<\/code> to generate dynamic content from data<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Identify dynamic parts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">How to find the parts, which are dynamic. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One way is to ask: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Which parts should be on every page (unchanged) and <\/li><li>What should change on every page<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You mostly get the same answers by the question:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>What are the main components of a web page (including navigation and content)<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">For answer the first question, take a look at the current page and &#8220;name&#8221; the areas:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/i0.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/02_elements_of_dashboard_page.png?fit=700%2C394&amp;ssl=1\" alt=\"\" class=\"wp-image-5929\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/02_elements_of_dashboard_page.png 1000w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/02_elements_of_dashboard_page-300x169.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/02_elements_of_dashboard_page-768x432.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/02_elements_of_dashboard_page-528x297.png 528w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">So, these &#8220;names&#8221; are also the answer for the 3. Question:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>sidemenu<\/li><li>top bar<\/li><li>content<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">And maybe you find additional &#8220;names&#8221;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>header<\/li><li>footer<\/li><li>top menu<\/li><li>left and right sidebar<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Find identified parts in template<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Next step is, to find the identified parts in our dashboard template<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>dashboard\/templates\/site\/sb-admin-2\/base.html<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is an easy step, because the developer of the SB Admin 2 template documented their template well:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2004\" height=\"1706\" src=\"https:\/\/i1.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/03_elements_of_dashboard_in_codepage.png?fit=700%2C596&amp;ssl=1\" alt=\"\" class=\"wp-image-5932\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/03_elements_of_dashboard_in_codepage.png 2004w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/03_elements_of_dashboard_in_codepage-300x255.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/03_elements_of_dashboard_in_codepage-1024x872.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/03_elements_of_dashboard_in_codepage-768x654.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/03_elements_of_dashboard_in_codepage-1536x1308.png 1536w\" sizes=\"auto, (max-width: 2004px) 100vw, 2004px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Looking into the code of the template, you will find comment lines describing the content:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>&lt;!-- Sidebar --&gt;<\/code><\/li><li><code>&lt;!-- Topbar --&gt;<\/code><\/li><li><code>&lt;!-- Top Search --&gt;<\/code><\/li><li><code>&lt;!-- Top Navbar --&gt;<\/code><\/li><li><code>&lt;!-- Begin Page Content--&gt;<\/code><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">So, it is obvious what do to next:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>get the  <em>dynamic<\/em> part (lines under)<code>&lt;!-- Begin Page Content--&gt;<\/code><br><strong>the green box in the following image<\/strong><\/li><li>move it to the frontend template  <\/li><li>place some <em>information<\/em> in the dashboard template, that the real content should be displayed here<br><strong>the blue curly braces in the following image<\/strong> <\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This is the way, the template system of django works:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"954\" height=\"251\" src=\"https:\/\/i2.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/21_combine_template_and_content_ui.png?fit=700%2C184&amp;ssl=1\" alt=\"\" class=\"wp-image-5944\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/21_combine_template_and_content_ui.png 954w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/21_combine_template_and_content_ui-300x79.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/21_combine_template_and_content_ui-768x202.png 768w\" sizes=\"auto, (max-width: 954px) 100vw, 954px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s explain this with a simple example: the page title<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We declare a title (which should be considered as the default title). And in the frontend page, we declare the title for this page (the frontend page).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To achieve this, we have to tell our template system the following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"209\" src=\"https:\/\/i0.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/22_combine_template_and_content_code.png?fit=700%2C156&amp;ssl=1\" alt=\"\" class=\"wp-image-5943\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/22_combine_template_and_content_code.png 940w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/22_combine_template_and_content_code-300x67.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/22_combine_template_and_content_code-768x171.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, we do the same with the content:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"983\" height=\"457\" src=\"https:\/\/i0.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/33_combine_dashboard_and_frontend_template_code.png?fit=700%2C325&amp;ssl=1\" alt=\"\" class=\"wp-image-5947\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/33_combine_dashboard_and_frontend_template_code.png 983w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/33_combine_dashboard_and_frontend_template_code-300x139.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/33_combine_dashboard_and_frontend_template_code-768x357.png 768w\" sizes=\"auto, (max-width: 983px) 100vw, 983px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Looking at our resulting page, nothing changes. This is the desired result, but how could we be sure, that we really change the structure?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Well, let&#8217;s make a test and try to include a different content in the dashboard template.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Change the lines, where we include the content into this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1,3\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\nMISSING CONTENT\n{\n\n\n\n<p class=\"wp-block-paragraph\">Did you notice the other name of the content: <strong>content_missing<\/strong>?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Change the template, save the file and have a look at the result:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2328\" height=\"448\" src=\"https:\/\/i2.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/41_missing_content.png?fit=700%2C135&amp;ssl=1\" alt=\"\" class=\"wp-image-5949\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/41_missing_content.png 2328w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/41_missing_content-300x58.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/41_missing_content-1024x197.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/41_missing_content-768x148.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/41_missing_content-1536x296.png 1536w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/41_missing_content-2048x394.png 2048w\" sizes=\"auto, (max-width: 2328px) 100vw, 2328px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Change content back, so your template is working again:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1,3\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\nMISSING CONTENT\n{\n\n\n\n<p class=\"wp-block-paragraph\">The final step in <a href=\"https:\/\/blog.via-internet.de\/en\/blog\/2020\/02\/22\/build-a-dashboard-with-django-and-bootstrap-part-3\">Part 3<\/a> will be replacing all static content of the dashboard with dynamic content.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is Part 2 of Building a Dashboard with Django and Bootstrap: Part 1: Building a base Django project Part 2: Prepare for dynamic content Part 3: Handling navigation and the side menu Part 4: Deploy Django App to Azure Introduction If you follow the first part of this blog topic, you have a running Django dashboard. But, unfortunately, the content is still static. Let&#8217;s review the current state: Perfect. We are done with the basic setup. Still, some work to do, because our dashboard is only a static dashboard. All content is programmed in the dashboard template file dashboard\/templates\/site\/sb-admin-2\/base.html For [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5872,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[10,21],"tags":[108,114],"class_list":["post-5919","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-django","tag-django","tag-python"],"jetpack_featured_media_url":"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/00_header_2.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/5919","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=5919"}],"version-history":[{"count":0,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/5919\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/5872"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=5919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=5919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=5919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}