{"id":5959,"date":"2020-02-23T09:55:09","date_gmt":"2020-02-23T08:55:09","guid":{"rendered":"https:\/\/blog.via-internet.de\/?p=5959"},"modified":"2020-02-23T09:55:09","modified_gmt":"2020-02-23T08:55:09","slug":"build-a-dashboard-with-django-and-bootstrap-part-3","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2020\/02\/23\/build-a-dashboard-with-django-and-bootstrap-part-3\/","title":{"rendered":"Django | Build a Dashboard with Django and Bootstrap: Part 3"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This is Part 3 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\/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><a href=\"https:\/\/blog.via-internet.de\/en\/build-a-dashboard-with-django-and-bootstrap-part-2\/\">Part 2: Prepare for dynamic content<\/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 3: Handling navigation and the side menu<\/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-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, the content ist still static. Lets 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<h2 class=\"wp-block-heading\">Prepare our Django project<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Right now, the whole content of our Django project is provided by the dashboard template<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>dashboard\/template\/site\/base.html<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Looking at our web site, you will see the different side menu items. So, intentionally, our web site should display different pages. And each page should provide the dynamic content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The final goal of this part is to change our web app, so that each side item navigates us to a different page. For this, we have to take care about two things:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Navigation: how to we get to another page in our app<\/li><li>Project Structure: where to place the required components for each page<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Basics of Navigation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Navigation usually is the process of getting from one page to another by clicking on a link.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, we need to things:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>the source page, containing the link<\/li><li>the destination page<\/li><li>the link, pointing to the destination page<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s take a look into the site template with the side menu:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"352\" height=\"286\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_51_sidemenu_components.png\" alt=\"\" class=\"wp-image-6035\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_51_sidemenu_components.png 352w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_51_sidemenu_components-300x244.png 300w\" sizes=\"auto, (max-width: 352px) 100vw, 352px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The corresponding code in the side template is<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"4,5\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div id=\"collapseTwo\" class=\"collapse\" aria-labelledby=\"headingTwo\">\n\t&lt;div class=\"bg-white py-2 collapse-inner rounded\">\n\t\t&lt;h6 class=\"collapse-header\">Custom Components:&lt;\/h6>\n\t\t&lt;a class=\"collapse-item\" href=\"buttons.html\">Buttons&lt;\/a>\n\t\t&lt;a class=\"collapse-item\" href=\"cards.html\">Cards&lt;\/a>\n\t&lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This is the result:<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-noborders\"><table><tbody><tr><td><img decoding=\"async\" style=\"width: 400px;\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_52_navigation_with_a_3.png\" alt=\"\"><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>\u2192<\/strong><\/td><td><img decoding=\"async\" style=\"width: 500px;\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_52_navigation_with_a_2.png\" alt=\"\"><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Linking to a html page is not possible, because Django does not work with html pages. Navigation in Django works with urls (in <code>urls.py<\/code>) and views in (<code>views.py<\/code>).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We must replace the html link tag (<code>&lt;a href=\"buttons.html\"<\/code>&gt;) with an Django-conform code. Read <a href=\"https:\/\/docs.djangoproject.com\/en\/3.0\/topics\/http\/urls\/\">here<\/a> for more details and the basics.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The idea behind the navigation is<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td class=\"has-text-align-left\" data-align=\"left\">Define the needed links<\/td><td class=\"has-text-align-left\" data-align=\"left\"><code>\/buttons<\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">Give each link a name<\/td><td class=\"has-text-align-left\" data-align=\"left\">&#8220;buttons&#8221;<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">Define, which view to call for this link<\/td><td class=\"has-text-align-left\" data-align=\"left\"><code>components\/buttons\/views.py<\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">Tell Django, how to insert this link in a html page<\/td><td class=\"has-text-align-left\" data-align=\"left\"><code>&lt;a href=\"{\n\n\n\n<p class=\"wp-block-paragraph\">With this in mind, we change our site template for the side navigation (e. g. for the components menu):<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1532\" height=\"398\" src=\"https:\/\/i1.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_53_navigation_in_site_template.png?fit=700%2C182&amp;ssl=1\" alt=\"\" class=\"wp-image-6051\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_53_navigation_in_site_template.png 1532w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_53_navigation_in_site_template-300x78.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_53_navigation_in_site_template-1024x266.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_53_navigation_in_site_template-768x200.png 768w\" sizes=\"auto, (max-width: 1532px) 100vw, 1532px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">But, if you save the template and try to view the web page, you will see this error:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2216\" height=\"1084\" src=\"https:\/\/i2.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_53_navigation_in_site_template_with_error.png?fit=700%2C342&amp;ssl=1\" alt=\"\" class=\"wp-image-6052\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_53_navigation_in_site_template_with_error.png 2216w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_53_navigation_in_site_template_with_error-300x147.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_53_navigation_in_site_template_with_error-1024x501.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_53_navigation_in_site_template_with_error-768x376.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_53_navigation_in_site_template_with_error-1536x751.png 1536w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_53_navigation_in_site_template_with_error-2048x1002.png 2048w\" sizes=\"auto, (max-width: 2216px) 100vw, 2216px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We missed to tell Django, what to do when the corresponding link for this name is requested. We have to tell Django to use the view defined in <code>buttons\/views.py<\/code> to generate the resulting view\/page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, change the global url mapping file <code>dashboard\/urls.py<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1,2,7,8\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import dashboard.apps.components.buttons.views as ButtonsViews\nimport dashboard.apps.components.cards.views as CardsViews\n\nurlpatterns = [\n    path('', include('dashboard.apps.urls')),\n\n    path('buttons', \tButtonsViews.IndexView.as_view(),   name='buttons'),\n    path('cards',       CardsViews.IndexView.as_view(),     name='cards'),\n\n    path('admin\/', admin.site.urls),\n]<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><code>dashboard\/apps\/components\/buttons\/views.py<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"4,5\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from django.shortcuts import render\nfrom django.views import generic\n\nclass IndexView(generic.TemplateView):\n    template_name = 'buttons\/base.html'\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><code>dashboard\/apps\/components\/cards\/views.py<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"4,5\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from django.shortcuts import render\nfrom django.views import generic\n\nclass IndexView(generic.TemplateView):\n    template_name = 'cards\/base.html'\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><code>dashboard\/apps\/components\/cards\/templates\/cards\/base.html<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n{\n\n{\n&lt;h1 style=\"text-align: center\">CARDS&lt;\/h1>\n{\n\n\n\n<p class=\"wp-block-paragraph\"><code>dashboard\/apps\/components\/cards\/templates\/buttons\/base.html<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n{\n\n{\n&lt;h1 style=\"text-align: center\">BUTTONS&lt;\/h1>\n{\n\n\n\n<p class=\"wp-block-paragraph\">Save everything and view at the resulting page<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1444\" height=\"808\" src=\"https:\/\/i1.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_54_navigation_1.png?fit=700%2C392&amp;ssl=1\" alt=\"\" class=\"wp-image-6056\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_54_navigation_1.png 1444w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_54_navigation_1-300x168.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_54_navigation_1-1024x573.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_54_navigation_1-768x430.png 768w\" sizes=\"auto, (max-width: 1444px) 100vw, 1444px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">What happens, from showing the page, clicking on the link until you see the final result:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Django create the side menu item Cards<\/li><li>with the corresponding link <code>localhost:9000\/cards<\/code><\/li><li>which will be the destination page, if you click on the link<\/li><li>and finally, Django creates the desired page (through <code>view.py<\/code>)<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1472\" height=\"849\" src=\"https:\/\/i1.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_54_navigation_2.png?fit=700%2C404&amp;ssl=1\" alt=\"\" class=\"wp-image-6057\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_54_navigation_2.png 1472w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_54_navigation_2-300x173.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_54_navigation_2-1024x591.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_54_navigation_2-768x443.png 768w\" sizes=\"auto, (max-width: 1472px) 100vw, 1472px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Namespaces and structure<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now, think about the names, e. g. buttons and cards in our Components.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Your project is getting bigger and you plan to add an additional page <code>info<\/code> with general information for both Components and Utilities menu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, you will have to additional files, for example<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>dashboard\/apps\/components\/info\/views.py<\/code><\/li><li><code>dashboard\/apps\/utilities\/info\/views.py<\/code><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The corresponding url mapping (<code>urls.py<\/code>) could look like this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import dashboard.apps.components.info.views as ComponentInfoViews\nimport dashboard.apps.utilities.info.views as UtilitiesInfoViews\n\nurlpatterns = [\n    path('', include('dashboard.apps.urls')),\n\n    path('info', ComponentInfoViews.IndexView.as_view(), name='info'),\n    path('info', UtilitiesInfoViews.IndexView.as_view(), name='info'),<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Two pages with the same name (<code>info<\/code>) in different <code>views.py<\/code>!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Of course, we could choose different names and link (<code>component_info<\/code>, <code>utilities_info<\/code>), but this not a good programming style.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We will choose a more modern way of programming<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Spread the responsibility over separate, independent modules<\/li><li>Name these modules with different names<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">What does this mean? We will have<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>a separate module <code>frontend<\/code>, only responsible for the start page (frontend)<\/li><li>a separate module <code>components<\/code>, responsible for all components<\/li><li>a separate module <code>utilities<\/code>, responsible for all utilities<\/li><li>a separate module <code>pages<\/code>, responsible for all pages<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Resulting folder structure and file content<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">File <code>dashbard\/urls.py<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">urlpatterns = [\n    path('', include('dashboard.apps.urls')),\n    path('admin\/',\tadmin.site.urls),\n]<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">File <code>dashbard\/apps\/urls.py<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from django.urls import path\nfrom django.urls.conf import include\n\nfrom dashboard.apps.frontend.views import IndexView\n\napp_name = 'app'\n\nurlpatterns = [\n    path('', IndexView.as_view(), name='index'),\n    path('pages\/', include('dashboard.apps.pages.urls')),\n    path('components\/', include('dashboard.apps.components.urls')),\n    path('utilities\/', include('dashboard.apps.utilities.urls')),\n]\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">File <code>dashbard\/apps\/components\/urls.py<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from django.urls import path\n\nimport dashboard.apps.components.buttons.views as ButtonsViews\nimport dashboard.apps.components.cards.views as CardsViews\n\napp_name = 'components'\n\nurlpatterns = [\n    path('', ButtonsViews.IndexView.as_view(), name='index'),\n    path('buttons\/', ButtonsViews.IndexView.as_view(), name='buttons'),\n    path('cards\/', CardsViews.IndexView.as_view(), name='cards'),\n]\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">File <code>dashbard\/apps\/utilities\/urls.py<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from django.urls import path\n\nimport dashboard.apps.utilities.colors.views as ColorsViews\nimport dashboard.apps.utilities.borders.views as BordersViews\nimport dashboard.apps.utilities.animations.views as AnimationsViews\nimport dashboard.apps.utilities.others.views as OthersViews\n\napp_name = 'utilities'\n\nurlpatterns = [\n    path('', BordersViews.IndexView.as_view(), name='index'),\n    path('animations\/', AnimationsViews.IndexView.as_view(), name='animations'),\n    path('borders\/', BordersViews.IndexView.as_view(), name='borders'),\n    path('colors\/', ColorsViews.IndexView.as_view(), name='colors'),\n    path('others\/', OthersViews.IndexView.as_view(), name='others'),\n]\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">File <code>dashbard\/apps\/pages\/urls.py<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from django.urls import path\n\nimport dashboard.apps.pages.blank.views as BlankViews\nimport dashboard.apps.pages.login.views as LoginViews\nimport dashboard.apps.pages.pagenotfound.views as PageNotFoundViews\nimport dashboard.apps.pages.password.views as PasswordViews\nimport dashboard.apps.pages.register.views as RegisterViews\nimport dashboard.apps.pages.charts.views as ChartsViews\nimport dashboard.apps.pages.tables.views as TablesViews\n\napp_name = 'pages'\n\nurlpatterns = [\n    path('', ChartsViews.IndexView.as_view(), name='index'),\n    path('blank', BlankViews.IndexView.as_view(), name='blank'),\n    path('charts', ChartsViews.IndexView.as_view(), name='charts'),\n    path('login', LoginViews.IndexView.as_view(), name='login'),\n    path('pagenotfound', PageNotFoundViews.IndexView.as_view(), name='pagenotfound'),\n    path('password', PasswordViews.IndexView.as_view(), name='password'),\n    path('register', RegisterViews.IndexView.as_view(), name='register'),\n    path('tables', TablesViews.IndexView.as_view(), name='tables'),\n]\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Let&#8217;s finally check the namespace structure:<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$ find . -name urls.py\n.\/dashboard\/urls.py\n.\/dashboard\/apps\/utilities\/urls.py\n.\/dashboard\/apps\/components\/urls.py\n.\/dashboard\/apps\/urls.py\n.\/dashboard\/apps\/pages\/urls.py<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">We create three levels for our namespaces:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Djane URL File<\/th><th>Namespace<\/th><\/tr><\/thead><tbody><tr><td><code>.\/dashboard\/urls.py<\/code><\/td><td>&#8211;<\/td><\/tr><tr><td>.<code>\/dashboard\/apps\/urls.py<\/code><\/td><td><code>app<\/code><\/td><\/tr><tr><td><code>.\/dashboard\/apps\/utilities\/urls.py<br>.\/dashboard\/apps\/components\/urls.py<br>.\/dashboard\/apps\/pages\/urls.py<\/code><\/td><td><code>app:utilities<br>app:components<br>app:pages<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">These namespaces must be used in the template files, for example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;a href=\"{\n&lt;a href=\"{\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;a class=\"collapse-item\" href=\"{\n&lt;a class=\"collapse-item\" href=\"{\n&lt;a class=\"collapse-item\" href=\"{\n&lt;a class=\"collapse-item\" href=\"{\n\n\n\n<p class=\"wp-block-paragraph\">Install the Django Extensions for additional commands:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">pip install django-extensions<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Add Django Extensions to the INSTALLED_APPS<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"4\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">INSTALLED_APPS = [\n    ...\n\n    'django_extensions'\n]<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Show URLs and Namespaces (only for out apps, admin urls are removed)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">python3 manage.py show_urls<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1676\" height=\"449\" src=\"https:\/\/i0.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_55_namespaces.png?fit=700%2C188&amp;ssl=1\" alt=\"\" class=\"wp-image-6078\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_55_namespaces.png 1676w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_55_namespaces-300x80.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_55_namespaces-1024x274.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_55_namespaces-768x206.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_55_namespaces-1536x411.png 1536w\" sizes=\"auto, (max-width: 1676px) 100vw, 1676px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Preparing required components and pages<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In summary, these are the steps to create the desired folder structure:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">mkdir -p dashboard\/apps\/components\/buttons\/templates\/buttons\nmkdir -p dashboard\/apps\/components\/cards\/templates\/cards\nmkdir -p dashboard\/apps\/pages\/blank\/templates\/blank\nmkdir -p dashboard\/apps\/pages\/charts\/templates\/charts\nmkdir -p dashboard\/apps\/pages\/login\/templates\/login\nmkdir -p dashboard\/apps\/pages\/pagenotfound\/templates\/pagenotfound\nmkdir -p dashboard\/apps\/pages\/password\/templates\/password\nmkdir -p dashboard\/apps\/pages\/register\/templates\/register\nmkdir -p dashboard\/apps\/pages\/tables\/templates\/tables\nmkdir -p dashboard\/apps\/utilities\/animations\/templates\/animations\nmkdir -p dashboard\/apps\/utilities\/borders\/templates\/borders\nmkdir -p dashboard\/apps\/utilities\/colors\/templates\/colors\nmkdir -p dashboard\/apps\/utilities\/others\/templates\/others<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">python3 manage.py startapp buttons dashboard\/apps\/components\/buttons\npython3 manage.py startapp cards dashboard\/apps\/components\/cards\npython3 manage.py startapp blank dashboard\/apps\/pages\/blank\npython3 manage.py startapp charts dashboard\/apps\/pages\/charts\npython3 manage.py startapp login dashboard\/apps\/pages\/login\npython3 manage.py startapp pagenotfound dashboard\/apps\/pages\/pagenotfound\npython3 manage.py startapp password dashboard\/apps\/pages\/password\npython3 manage.py startapp register dashboard\/apps\/pages\/register\npython3 manage.py startapp tables dashboard\/apps\/pages\/tables\npython3 manage.py startapp animations dashboard\/apps\/utilities\/animations\npython3 manage.py startapp borders dashboard\/apps\/utilities\/borders\npython3 manage.py startapp colors dashboard\/apps\/utilities\/colors\npython3 manage.py startapp others dashboard\/apps\/utilities\/others<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">echo \"{\n\n{\n{\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">cp base.html dashboard\/apps\/components\/buttons\/templates\/buttons\ncp base.html dashboard\/apps\/components\/cards\/templates\/cards\ncp base.html dashboard\/apps\/pages\/blank\/templates\/blank\ncp base.html dashboard\/apps\/pages\/charts\/templates\/charts\ncp base.html dashboard\/apps\/pages\/login\/templates\/login\ncp base.html dashboard\/apps\/pages\/pagenotfound\/templates\/pagenotfound\ncp base.html dashboard\/apps\/pages\/password\/templates\/password\ncp base.html dashboard\/apps\/pages\/register\/templates\/register\ncp base.html dashboard\/apps\/pages\/tables\/templates\/tables\ncp base.html dashboard\/apps\/utilities\/animations\/templates\/animations\ncp base.html dashboard\/apps\/utilities\/borders\/templates\/borders\ncp base.html dashboard\/apps\/utilities\/colors\/templates\/colors\ncp base.html dashboard\/apps\/utilities\/others\/templates\/others<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">rm base.html<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"291\" height=\"874\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_10_folder_structure.png\" alt=\"\" class=\"wp-image-6012\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_10_folder_structure.png 291w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_10_folder_structure-100x300.png 100w\" sizes=\"auto, (max-width: 291px) 100vw, 291px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Each of the folders has the same structure, for example the buttons component. We will delete some unnecessary files<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_11_app-folder-structure.png\" alt=\"\" class=\"wp-image-6013\" width=\"293\" height=\"284\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_11_app-folder-structure.png 355w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_11_app-folder-structure-300x291.png 300w\" sizes=\"auto, (max-width: 293px) 100vw, 293px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Replacing Projects with dynamic data<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Replacing the static parts with dynamic content could be achieved by  the following approach:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Identify the dynamic parts<\/li><li>Move these parts from the site template into the view template <code>base.html<\/code> of the component<\/li><li>Modify frontend <code>view.py<\/code> to generate dynamic content from data<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The steps are the same for all components (all items of the side menu).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Find the<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Identify dynamic parts in template<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img decoding=\"async\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_20_projects_html_old-700x374.png\" alt=\"\" class=\"wp-image-5972\"\/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img decoding=\"async\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_21_projects_html_dynamic_values-1-700x49.png\" alt=\"\" class=\"wp-image-5976\"\/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img decoding=\"async\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_22_projects_html_static_values-1-700x103.png\" alt=\"\" class=\"wp-image-5977\"\/><\/figure><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_41_projects_old_data-700x219.png\" alt=\"\" class=\"wp-image-5971\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"278\" class=\"wp-image-5973\" style=\"width: 500px;\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_42_projects_old_ui.png\" alt=\"\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_42_projects_old_ui.png 500w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_42_projects_old_ui-300x167.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/td><td><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"157\" class=\"wp-image-5971\" style=\"width: 500px;\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_41_projects_old_data.png\" alt=\"\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_41_projects_old_data.png 747w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_41_projects_old_data-300x94.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/td><\/tr><tr><td><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"279\" class=\"wp-image-5975\" style=\"width: 500px;\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_44_projects_new_ui.png\" alt=\"\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_44_projects_new_ui.png 1208w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_44_projects_new_ui-300x167.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_44_projects_new_ui-1024x570.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_44_projects_new_ui-768x428.png 768w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/td><td><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"151\" class=\"wp-image-5974\" style=\"width: 500px;\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/3_43_projects_new_data.png\" alt=\"\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_43_projects_new_data.png 777w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_43_projects_new_data-300x90.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/3_43_projects_new_data-768x231.png 768w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Create templates for side menu pages<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For every side menu item, their is a corresponding html file in the install folder of the <code>sb-admin-2<\/code> template:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Remember the environment variable we create in part 1 for the start of our project <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">DASHBOARD_ROOT=$(pwd)<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">cd $DASHBOARD_ROOT\nfind dashboard\/apps install\/sb-admin-2 -name *.html<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Each template file <code>base.html<\/code> has a corresponding html file unter <code>sb-admin-2<\/code>. Look at the following table to find the mapping: <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td class=\"has-text-align-left\" data-align=\"left\">apps\/components\/buttons\/templates\/buttons\/base.html<\/td><td class=\"has-text-align-left\" data-align=\"left\">sb-admin-2\/buttons.html<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">apps\/components\/cards\/templates\/cards\/base.html<\/td><td class=\"has-text-align-left\" data-align=\"left\">sb-admin-2\/cards.html<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">apps\/pages\/blank\/templates\/blank\/base.html<\/td><td class=\"has-text-align-left\" data-align=\"left\">sb-admin-2\/blank.html<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">apps\/pages\/charts\/templates\/charts\/base.html<\/td><td class=\"has-text-align-left\" data-align=\"left\">sb-admin-2\/charts.html<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">apps\/pages\/login\/templates\/login\/base.html<\/td><td class=\"has-text-align-left\" data-align=\"left\">sb-admin-2\/login.html<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">apps\/pages\/pagenotfound\/templates\/pagenotfound\/base.html<\/td><td class=\"has-text-align-left\" data-align=\"left\">sb-admin-2\/404.html<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">apps\/pages\/password\/templates\/password\/base.html<\/td><td class=\"has-text-align-left\" data-align=\"left\">sb-admin-2\/forgot-password.html<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">apps\/pages\/register\/templates\/register\/base.html<\/td><td class=\"has-text-align-left\" data-align=\"left\">sb-admin-2\/register.html<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">apps\/pages\/register\/templates\/tables\/base.html<\/td><td class=\"has-text-align-left\" data-align=\"left\">sb-admin-2\/tables.html<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">apps\/utilities\/animations\/templates\/animations\/base.html<\/td><td class=\"has-text-align-left\" data-align=\"left\">sb-admin-2\/utilities-animation.html<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">apps\/utilities\/borders\/templates\/borders\/base.html<\/td><td class=\"has-text-align-left\" data-align=\"left\">sb-admin-2\/utilities-border.html<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">apps\/utilities\/colors\/templates\/colors\/base.html<\/td><td class=\"has-text-align-left\" data-align=\"left\">sb-admin-2\/utilities-color.html<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">apps\/utilities\/others\/templates\/others\/base.html<\/td><td class=\"has-text-align-left\" data-align=\"left\">sb-admin-2\/utilities-html<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Each template base.html should have the following content:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n\n{\n{\n\n\n\n<p class=\"wp-block-paragraph\">And each corresponding <code>view.py<\/code> file should have the following content, only the <code>template_name<\/code> should be different (the name of the template <code>base.html<\/code> file)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from django.views import generic\n\nclass IndexView(generic.TemplateView):\n    template_name = 'buttons\/base.html'<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">So, for each template file, we have to <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>locate the corresponding html file from the install folder (see table above)<\/li><li>copy the content between these tags to the template file:<\/li><\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">        &lt;!-- Begin Page Content -->\n        &lt;div class=\"container-fluid\">\n        ....\n        &lt;\/div>\n        &lt;!-- \/.container-fluid --><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is Part 3 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, the content ist still static. Lets review the current state: Prepare our Django project Right now, the whole content of our Django project is provided by the dashboard template dashboard\/template\/site\/base.html Looking at our web site, you will see the different side menu items. [&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-5959","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\/5959","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=5959"}],"version-history":[{"count":0,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/5959\/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=5959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=5959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=5959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}