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. So, intentionally, our web site should display different pages. And each page should provide the dynamic content.

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:

• Navigation: how to we get to another page in our app
• Project Structure: where to place the required components for each page

Basics of Navigation

Navigation usually is the process of getting from one page to another by clicking on a link.

So, we need to things:

• the source page, containing the link
• the destination page
• the link, pointing to the destination page

Let’s take a look into the site template with the side menu:

The corresponding code in the side template is

<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
	<div class="bg-white py-2 collapse-inner rounded">
		<h6 class="collapse-header">Custom Components:</h6>
		<a class="collapse-item" href="buttons.html">Buttons</a>
		<a class="collapse-item" href="cards.html">Cards</a>
	</div>
</div>

This is the result:

→

Linking to a html page is not possible, because Django does not work with html pages. Navigation in Django works with urls (in urls.py) and views in (views.py).

We must replace the html link tag (<a href="buttons.html">) with an Django-conform code. Read here for more details and the basics.

The idea behind the navigation is

Define the needed links	/buttons
Give each link a name	“buttons”
Define, which view to call for this link	components/buttons/views.py
Tell Django, how to insert this link in a html page	<a href="{ With this in mind, we change our site template for the side navigation (e. g. for the components menu): But, if you save the template and try to view the web page, you will see this error: 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 buttons/views.py to generate the resulting view/page. So, change the global url mapping file dashboard/urls.py Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter import dashboard.apps.components.buttons.views as ButtonsViews import dashboard.apps.components.cards.views as CardsViews urlpatterns = [ path('', include('dashboard.apps.urls')), path('buttons', ButtonsViews.IndexView.as_view(), name='buttons'), path('cards', CardsViews.IndexView.as_view(), name='cards'), path('admin/', admin.site.urls), ] import dashboard.apps.components.buttons.views as ButtonsViews import dashboard.apps.components.cards.views as CardsViews urlpatterns = [ path('', include('dashboard.apps.urls')), path('buttons', ButtonsViews.IndexView.as_view(), name='buttons'), path('cards', CardsViews.IndexView.as_view(), name='cards'), path('admin/', admin.site.urls), ] import dashboard.apps.components.buttons.views as ButtonsViews import dashboard.apps.components.cards.views as CardsViews urlpatterns = [ path('', include('dashboard.apps.urls')), path('buttons', ButtonsViews.IndexView.as_view(), name='buttons'), path('cards', CardsViews.IndexView.as_view(), name='cards'), path('admin/', admin.site.urls), ] dashboard/apps/components/buttons/views.py Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): template_name = 'buttons/base.html' from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): template_name = 'buttons/base.html' from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): template_name = 'buttons/base.html' dashboard/apps/components/cards/views.py Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): template_name = 'cards/base.html' from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): template_name = 'cards/base.html' from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): template_name = 'cards/base.html' dashboard/apps/components/cards/templates/cards/base.html Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter { { { <h1 style="text-align: center">CARDS</h1> { <p><code>dashboard/apps/components/cards/templates/buttons/base.html</code></p> <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="">{ { { <h1 style="text-align: center">BUTTONS</h1> { <p>Save everything and view at the resulting page</p> <figure class="wp-block-image size-large"><img decoding="async" width="1444" height="808" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201444%20808'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_54_navigation_1.png?fit=700%2C392&ssl=1" alt="" class="wp-image-6056 lazy" data-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" data-sizes="auto, (max-width: 1444px) 100vw, 1444px"></figure> <p>What happens, from showing the page, clicking on the link until you see the final result:</p> <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> <figure class="wp-block-image size-large"><img decoding="async" width="1472" height="849" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201472%20849'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_54_navigation_2.png?fit=700%2C404&ssl=1" alt="" class="wp-image-6057 lazy" data-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" data-sizes="auto, (max-width: 1472px) 100vw, 1472px"></figure> <h2 class="wp-block-heading">Namespaces and structure</h2> <p>Now, think about the names, e. g. buttons and cards in our Components.</p> <p>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> <p>So, you will have to additional files, for example</p> <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> <p>The corresponding url mapping (<code>urls.py</code>) could look like this:</p> <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 import dashboard.apps.utilities.info.views as UtilitiesInfoViews urlpatterns = [ path('', include('dashboard.apps.urls')), path('info', ComponentInfoViews.IndexView.as_view(), name='info'), path('info', UtilitiesInfoViews.IndexView.as_view(), name='info'),</pre><p>Two pages with the same name (<code>info</code>) in different <code>views.py</code>!</p><p>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><p>We will choose a more modern way of programming</p><ul class="wp-block-list"><li>Spread the responsibility over separate, independent modules</li><li>Name these modules with different names</li></ul><p>What does this mean? We will have</p><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><h2 class="wp-block-heading">Resulting folder structure and file content</h2><p>File <code>dashbard/urls.py</code></p><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 = [ path('', include('dashboard.apps.urls')), path('admin/', admin.site.urls), ]</pre><p>File <code>dashbard/apps/urls.py</code></p><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 from django.urls.conf import include from dashboard.apps.frontend.views import IndexView app_name = 'app' urlpatterns = [ path('', IndexView.as_view(), name='index'), path('pages/', include('dashboard.apps.pages.urls')), path('components/', include('dashboard.apps.components.urls')), path('utilities/', include('dashboard.apps.utilities.urls')), ] </pre><p>File <code>dashbard/apps/components/urls.py</code></p><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 import dashboard.apps.components.buttons.views as ButtonsViews import dashboard.apps.components.cards.views as CardsViews app_name = 'components' urlpatterns = [ path('', ButtonsViews.IndexView.as_view(), name='index'), path('buttons/', ButtonsViews.IndexView.as_view(), name='buttons'), path('cards/', CardsViews.IndexView.as_view(), name='cards'), ] </pre><p>File <code>dashbard/apps/utilities/urls.py</code></p><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 import dashboard.apps.utilities.colors.views as ColorsViews import dashboard.apps.utilities.borders.views as BordersViews import dashboard.apps.utilities.animations.views as AnimationsViews import dashboard.apps.utilities.others.views as OthersViews app_name = 'utilities' urlpatterns = [ path('', BordersViews.IndexView.as_view(), name='index'), path('animations/', AnimationsViews.IndexView.as_view(), name='animations'), path('borders/', BordersViews.IndexView.as_view(), name='borders'), path('colors/', ColorsViews.IndexView.as_view(), name='colors'), path('others/', OthersViews.IndexView.as_view(), name='others'), ] </pre><p>File <code>dashbard/apps/pages/urls.py</code></p><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 import dashboard.apps.pages.blank.views as BlankViews import dashboard.apps.pages.login.views as LoginViews import dashboard.apps.pages.pagenotfound.views as PageNotFoundViews import dashboard.apps.pages.password.views as PasswordViews import dashboard.apps.pages.register.views as RegisterViews import dashboard.apps.pages.charts.views as ChartsViews import dashboard.apps.pages.tables.views as TablesViews app_name = 'pages' urlpatterns = [ path('', ChartsViews.IndexView.as_view(), name='index'), path('blank', BlankViews.IndexView.as_view(), name='blank'), path('charts', ChartsViews.IndexView.as_view(), name='charts'), path('login', LoginViews.IndexView.as_view(), name='login'), path('pagenotfound', PageNotFoundViews.IndexView.as_view(), name='pagenotfound'), path('password', PasswordViews.IndexView.as_view(), name='password'), path('register', RegisterViews.IndexView.as_view(), name='register'), path('tables', TablesViews.IndexView.as_view(), name='tables'), ] </pre><h3 class="wp-block-heading">Let’s finally check the namespace structure:</h3><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 ./dashboard/urls.py ./dashboard/apps/utilities/urls.py ./dashboard/apps/components/urls.py ./dashboard/apps/urls.py ./dashboard/apps/pages/urls.py</pre><p>We create three levels for our namespaces:</p><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>–</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><p>These namespaces must be used in the template files, for example:</p><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=""><a href="{ <a href="{ <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=""><a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <p>Install the Django Extensions for additional commands:</p> <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><p>Add Django Extensions to the INSTALLED_APPS</p><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 = [ ... 'django_extensions' ]</pre><p>Show URLs and Namespaces (only for out apps, admin urls are removed)</p><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><figure class="wp-block-image size-large"><img decoding="async" width="1676" height="449" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201676%20449'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_55_namespaces.png?fit=700%2C188&ssl=1" alt="" class="wp-image-6078 lazy" data-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" data-sizes="auto, (max-width: 1676px) 100vw, 1676px"></figure><h2 class="wp-block-heading">Preparing required components and pages</h2><p>In summary, these are the steps to create the desired folder structure:</p><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 mkdir -p dashboard/apps/components/cards/templates/cards mkdir -p dashboard/apps/pages/blank/templates/blank mkdir -p dashboard/apps/pages/charts/templates/charts mkdir -p dashboard/apps/pages/login/templates/login mkdir -p dashboard/apps/pages/pagenotfound/templates/pagenotfound mkdir -p dashboard/apps/pages/password/templates/password mkdir -p dashboard/apps/pages/register/templates/register mkdir -p dashboard/apps/pages/tables/templates/tables mkdir -p dashboard/apps/utilities/animations/templates/animations mkdir -p dashboard/apps/utilities/borders/templates/borders mkdir -p dashboard/apps/utilities/colors/templates/colors mkdir -p dashboard/apps/utilities/others/templates/others</pre><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 python3 manage.py startapp cards dashboard/apps/components/cards python3 manage.py startapp blank dashboard/apps/pages/blank python3 manage.py startapp charts dashboard/apps/pages/charts python3 manage.py startapp login dashboard/apps/pages/login python3 manage.py startapp pagenotfound dashboard/apps/pages/pagenotfound python3 manage.py startapp password dashboard/apps/pages/password python3 manage.py startapp register dashboard/apps/pages/register python3 manage.py startapp tables dashboard/apps/pages/tables python3 manage.py startapp animations dashboard/apps/utilities/animations python3 manage.py startapp borders dashboard/apps/utilities/borders python3 manage.py startapp colors dashboard/apps/utilities/colors python3 manage.py startapp others dashboard/apps/utilities/others</pre><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 "{ { { <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 cp base.html dashboard/apps/components/cards/templates/cards cp base.html dashboard/apps/pages/blank/templates/blank cp base.html dashboard/apps/pages/charts/templates/charts cp base.html dashboard/apps/pages/login/templates/login cp base.html dashboard/apps/pages/pagenotfound/templates/pagenotfound cp base.html dashboard/apps/pages/password/templates/password cp base.html dashboard/apps/pages/register/templates/register cp base.html dashboard/apps/pages/tables/templates/tables cp base.html dashboard/apps/utilities/animations/templates/animations cp base.html dashboard/apps/utilities/borders/templates/borders cp base.html dashboard/apps/utilities/colors/templates/colors cp base.html dashboard/apps/utilities/others/templates/others</pre><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><figure class="wp-block-image size-large"><img decoding="async" width="291" height="874" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20291%20874'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_10_folder_structure.png" alt="" class="wp-image-6012 lazy" data-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" data-sizes="auto, (max-width: 291px) 100vw, 291px"></figure><p>Each of the folders has the same structure, for example the buttons component. We will delete some unnecessary files</p><figure class="wp-block-image size-large is-resized"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20293%20284'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_11_app-folder-structure.png" alt="" class="wp-image-6013 lazy" width="293" height="284" data-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" data-sizes="auto, (max-width: 293px) 100vw, 293px"></figure><h2 class="wp-block-heading">Replacing Projects with dynamic data</h2><p>Replacing the static parts with dynamic content could be achieved by the following approach:</p><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><p>The steps are the same for all components (all items of the side menu).</p><p>Find the</p><p>Identify dynamic parts in template</p><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_20_projects_html_old-700x374.png" alt="" class="wp-image-5972 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><figure class="wp-block-image size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data-700x219.png" alt="" class="wp-image-5971 lazy"></figure><figure class="wp-block-table"><table><tbody><tr><td><img decoding="async" width="500" height="278" class="wp-image-5973 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20278'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_42_projects_old_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="157" class="wp-image-5971 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20157'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="279" class="wp-image-5975 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20279'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_44_projects_new_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="151" class="wp-image-5974 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20151'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_43_projects_new_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><h2 class="wp-block-heading">Create templates for side menu pages</h2><p>For every side menu item, their is a corresponding html file in the install folder of the <code>sb-admin-2</code> template:</p><p>Remember the environment variable we create in part 1 for the start of our project</p><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><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 find dashboard/apps install/sb-admin-2 -name *.html</pre><p>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><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><p>Each template base.html should have the following content:</p><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="">{ { { <p>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> <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 class IndexView(generic.TemplateView): template_name = 'buttons/base.html'</pre><p>So, for each template file, we have to</p><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><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=""> <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --></pre><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure><div class="post-content"><div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 22<small class="months">Feb</small></time></a> </span><div class="media-body"><header class="entry-header"><h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/">Django | Build a Dashboard with Django and Bootstrap: Part 2</a></h4></header><div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span></div><div class="entry-content"><p>This is Part 2 of <em>Building a Dashboard with Django and Bootstrap</em>:</p><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><h2 class="wp-block-heading">Introduction</h2><p>If you follow the first part of this blog topic, you have a running Django dashboard.</p><p>But, unfortunately, the content is still static. Let’s review the current state:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"></div></div><p>Perfect. We are done with the basic setup.</p><p>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><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>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><p>We will do this by following these steps:</p><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><h2 class="wp-block-heading">Identify dynamic parts</h2><p>How to find the parts, which are dynamic.</p><p>One way is to ask:</p><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><p>You mostly get the same answers by the question:</p><ul class="wp-block-list"><li>What are the main components of a web page (including navigation and content)</li></ul><p>For answer the first question, take a look at the current page and “name” the areas:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="563" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20563'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/02_elements_of_dashboard_page.png?fit=700%2C394&ssl=1" alt="" class="wp-image-5929 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>So, these “names” are also the answer for the 3. Question:</p><ul class="wp-block-list"><li>sidemenu</li><li>top bar</li><li>content</li></ul><p>And maybe you find additional “names”</p><ul class="wp-block-list"><li>header</li><li>footer</li><li>top menu</li><li>left and right sidebar</li></ul><h2 class="wp-block-heading">Find identified parts in template</h2><p>Next step is, to find the identified parts in our dashboard template</p><p><code>dashboard/templates/site/sb-admin-2/base.html</code></p><p>This is an easy step, because the developer of the SB Admin 2 template documented their template well:</p><figure class="wp-block-image size-large"><img decoding="async" width="2004" height="1706" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202004%201706'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/03_elements_of_dashboard_in_codepage.png?fit=700%2C596&ssl=1" alt="" class="wp-image-5932 lazy" data-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" data-sizes="auto, (max-width: 2004px) 100vw, 2004px"></figure><p>Looking into the code of the template, you will find comment lines describing the content:</p><ul class="wp-block-list"><li><code><!-- Sidebar --></code></li><li><code><!-- Topbar --></code></li><li><code><!-- Top Search --></code></li><li><code><!-- Top Navbar --></code></li><li><code><!-- Begin Page Content--></code></li></ul><p>So, it is obvious what do to next:</p><ul class="wp-block-list"><li>get the <em>dynamic</em> part (lines under)<code><!-- Begin Page Content--></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><p>This is the way, the template system of django works:</p><figure class="wp-block-image size-large"><img decoding="async" width="954" height="251" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20954%20251'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/21_combine_template_and_content_ui.png?fit=700%2C184&ssl=1" alt="" class="wp-image-5944 lazy" data-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" data-sizes="auto, (max-width: 954px) 100vw, 954px"></figure><p>Let’s explain this with a simple example: the page title</p><p>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><p>To achieve this, we have to tell our template system the following:</p><figure class="wp-block-image size-large"><img decoding="async" width="940" height="209" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20940%20209'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/22_combine_template_and_content_code.png?fit=700%2C156&ssl=1" alt="" class="wp-image-5943 lazy" data-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" data-sizes="auto, (max-width: 940px) 100vw, 940px"></figure><p>Now, we do the same with the content:</p><figure class="wp-block-image size-large"><img decoding="async" width="983" height="457" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20983%20457'%3E%3C/svg%3E" data-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&ssl=1" alt="" class="wp-image-5947 lazy" data-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" data-sizes="auto, (max-width: 983px) 100vw, 983px"></figure><p>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><p>Well, let’s make a test and try to include a different content in the dashboard template.</p><p>Change the lines, where we include the content into this:</p><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="">{ MISSING CONTENT { <p>Did you notice the other name of the content: <strong>content_missing</strong>?</p> <p>Change the template, save the file and have a look at the result:</p> <figure class="wp-block-image size-large"><img decoding="async" width="2328" height="448" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202328%20448'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/41_missing_content.png?fit=700%2C135&ssl=1" alt="" class="wp-image-5949 lazy" data-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" data-sizes="auto, (max-width: 2328px) 100vw, 2328px"></figure> <p>Change content back, so your template is working again:</p> <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="">{ MISSING CONTENT { <p>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> </pre></pre></div> </div> </div> </div> </article><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"> <figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure> <div class="post-content"> <div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 21<small class="months">Feb</small></time></a> </span> <div class="media-body"> <header class="entry-header"> <h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/">Django | Build a Dashboard with Django and Bootstrap: Part 1</a></h4> </header> <div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span> </div> <div class="entry-content"> <p>This is Part 1 of <em>Building a Dashboard with Django and Bootstrap</em>:</p> <ul class="wp-block-list"> <li><strong>Part 1: Building a base Django project</strong></li> <li><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/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/build-a-dashboard-with-django-and-bootstrap-part-4/">Part 4: Deploy Django App to Azure</a></li> </ul> <h2 class="wp-block-heading">Introduction</h2> <p>Building a complete web app isn’t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don’t using tools or framework, which helps and makes our life easier. <a href="https://www.djangoproject.com/"><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824465754606598455505">Django</gwmw></a> is one of these frameworks:</p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468379037630016661">Django</gwmw> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development</p> </blockquote> <p>So, let’s get started.</p> <h3 class="wp-block-heading">Create project</h3> <p>For subsequent steps, we will remember our starting directory </p> <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="">❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder...</pre><p>First step is to create our main Django project</p><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="">❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate</pre><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="">❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK.</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="782" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20782'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png" alt="" class="wp-image-9675 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-300x229.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-768x587.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1536x1173.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-2048x1564.png 2048w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure></div><h3 class="wp-block-heading">Create first apps</h3><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="">❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend</pre><p>The folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="970" height="436" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20970%20436'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png" alt="" class="wp-image-9690 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png 970w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-300x135.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-768x345.png 768w" data-sizes="auto, (max-width: 970px) 100vw, 970px"></figure><h2 class="wp-block-heading">Add new apps to project</h2><p>Modify name in <code>apps/core/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core'</pre><p>Modify name in <code>apps/frontend/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend'</pre><p>Modify <code>dashboard/settings.py</code></p><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="">INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ]</pre><p>Modify <code>dashboard/urls.py</code></p><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="">from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ]</pre><h3 class="wp-block-heading">Create view</h3><p>Modify view in <code>apps/frontend/views.py</code></p><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="">from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html'</pre><h3 class="wp-block-heading">Create template for frontend View</h3><p>Create template file <code>apps/frontend/templates/frontend/index.html</code></p><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=""><h1> Frontend: Let's get started </h1></pre><h3 class="wp-block-heading">Add template folder to configuration</h3><p>In <kbd>dashboard/settings.py</kbd>, add template folder to TEMPLATES</p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ]</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="624" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20624%20186'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png" alt="" class="wp-image-8442 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png 624w, https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2-300x89.png 300w" data-sizes="auto, (max-width: 624px) 100vw, 624px"></figure></div><h2 class="wp-block-heading">Current folder Structure</h2><p>So far, we have the following folder structure</p><figure class="wp-block-image size-full"><img decoding="async" width="690" height="982" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20690%20982'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png" alt="" class="wp-image-9691 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png 690w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001-211x300.png 211w" data-sizes="auto, (max-width: 690px) 100vw, 690px"></figure><h2 class="wp-block-heading">Prepare for administrate your project</h2><h3 class="wp-block-heading">Create admin user</h3><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="">❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully.</pre><h2 class="wp-block-heading">Add Bootstrap support</h2><p>Download requires files for Bootstrap, jQuery and PopperJS.</p><p>Or download <a href="https://via-internet.de/blog/wp-content/uploads/2021/10/static.zip">this </a>prepared archiv and unzip the files unter <code>dashboard</code>.</p><p>Run the scripts in <kbd>$DASHBOARD_ROOT</kbd></p><p>Hint: You need to install <a href="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3" data-type="link" data-id="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3">PowerShell</a> before running the scripts.</p><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 > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1</pre><p><kbd>download_bootstrap.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' </pre><p><kbd>download_jquery.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map</pre><p><kbd>download_popperjs.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js</pre><p>Finally, the folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="474" height="660" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20474%20660'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png" alt="" class="wp-image-9679 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png 474w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008-215x300.png 215w" data-sizes="auto, (max-width: 474px) 100vw, 474px"></figure><h3 class="wp-block-heading">Create site templates in <code>dashboard/templates/site</code></h3><h3 class="wp-block-heading">Add templates path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470508427730698282">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="5" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ...</pre><h3 class="wp-block-heading"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-2" id="gwmw-15824470715450370185521">Add static</gwmw> path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470715451132153545">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><p>Add as first line</p><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="">import os</pre><p>Then add / replace at <kbd>STATIC_URL=...</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="2-4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ]</pre><h2 class="wp-block-heading">Modify frontend view template</h2><p>File <code>dashboard/apps/frontend/templates/index.html</code></p><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="">{ { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { <p>File <kbd>dashboard/apps/frontend/templates/site/base.html</kbd></p> <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="">{ <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html></pre><h2 class="wp-block-heading">View current status of project</h2><figure class="wp-block-image size-large"><img decoding="async" width="1024" height="778" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20778'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png" alt="" class="wp-image-9682 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-300x228.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-768x583.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1536x1167.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap.png 1714w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure><h2 class="wp-block-heading">Final Result</h2><p>The final result could be found <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project" data-type="link" data-id="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project">here</a>.</p><h2 class="wp-block-heading">Add dashboard from an existing template</h2><p>For a first start, we will use this <a href="https://startbootstrap.com/previews/sb-admin-2/"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824470188863680783027">sb</gwmw>-admin-2 dashboard</a> template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>:</p><figure class="wp-block-image size-full"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/61_dashboard.png" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><h2 class="wp-block-heading">Download required files</h2><p>Bootstrap templates consist of at least 3 different types of files</p><ul class="wp-block-list"><li>main index.html page, responsible for collection all elements and set up your page</li><li>CSS files defining the style of your page</li><li>JavaScript files, containing needed frameworks and code</li></ul><p>So, first start by downloading the sample template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>. Be sure, you start in our project root folder:</p><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="">❯ cd $DASHBOARD_ROOT</pre><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="">❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 </pre><p>Next, find out, what we need for our template in addition to the file <kbd>index.html</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)="</pre><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script></pre><p>That’s a lot of additional files.</p><p>To keep the file structure consistent, these files should be stored under the <kbd>dashboard/static</kbd> folder (same as the bootstrap files before).</p><p>To achieve this, there are <gwmw class="ginger-module-highlighter-mistake-type-2" id="gwmw-15824469384628631344488">two possi</gwmw>bilities:</p><ul class="wp-block-list"><li>Create desired folder and copy each of the source files to the destination folder</li><li><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824469457060378385283">Copy</gwmw> the complete static folder from the <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap">Github Repository</a> for this post.</li></ul><p>We use the second option to keep the focus on creating our dashboard.<gwmw style="display:none;"></gwmw></p><p>So, first, clone the repository:</p><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="">cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap</pre><p>Then, copy the requred files</p><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="">cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard</pre><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 -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard</pre><p>Having everything needed for the dashboard template, the next step is to modify the front-end template</p><p>File <code>dashboard/apps/frontend/templates/frontend/index.html</code></p> <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="">{ { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div></pre></pre></div></div></div></div></article><footer class="site-footer"><div class="container"><div class="row footer-sidebar"><div class="col-lg-3 col-md-6 col-sm-12"><aside id="categories-1" class="widget widget_categories wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Categories</h4><form action="https://via-internet.de/blog" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name="cat" id="cat" class="postform"><option value="-1">Select Category</option><option class="level-0" value="2">3D Printing (1)</option><option class="level-0" value="168">AI (3)</option><option class="level-0" value="1">Allgemein (32)</option><option class="level-0" value="151">Anaconda (1)</option><option class="level-0" value="4">Apache (3)</option><option class="level-0" value="5">Apache Spark (3)</option><option class="level-0" value="6">Apache Zeppelin (1)</option><option class="level-0" value="7">Arduino (1)</option><option class="level-0" value="160">Astro (3)</option><option class="level-0" value="9">Azure (7)</option><option class="level-1" value="20"> Databricks (4)</option><option class="level-1" value="87"> Widgets (1)</option><option class="level-0" value="158">BeautifulSoup (1)</option><option class="level-0" value="10">Bootstrap (6)</option><option class="level-0" value="12">Capacitor (1)</option><option class="level-0" value="13">CI/CD (3)</option><option class="level-1" value="40"> Jenkins (3)</option><option class="level-0" value="153">Container (9)</option><option class="level-1" value="22"> Docker (8)</option><option class="level-2" value="43"> Kubernetes (2)</option><option class="level-1" value="154"> Podman (1)</option><option class="level-0" value="16">Cookbook (30)</option><option class="level-0" value="17">CSS (3)</option><option class="level-0" value="135">Daily (6)</option><option class="level-0" value="144">Dart (1)</option><option class="level-0" value="18">Data Science (1)</option><option class="level-0" value="19">Database (2)</option><option class="level-1" value="50"> MySQL (1)</option><option class="level-1" value="58"> PostgreSQL (1)</option><option class="level-0" value="96">FastAPI (1)</option><option class="level-0" value="27">Generell (1)</option><option class="level-0" value="28">Git und Github (6)</option><option class="level-0" value="157">Grafana (1)</option><option class="level-0" value="31">Hadoop (1)</option><option class="level-0" value="163">Hexo (1)</option><option class="level-0" value="33">Homebrew (1)</option><option class="level-0" value="165">HyperDiv (1)</option><option class="level-0" value="34">Ionic 3 (5)</option><option class="level-0" value="35">Ionic 4 (9)</option><option class="level-0" value="39">Jekyll (1)</option><option class="level-0" value="41">Jupyter (2)</option><option class="level-0" value="42">Keycloak (3)</option><option class="level-0" value="137">Languages (60)</option><option class="level-1" value="14"> ClojureScript (1)</option><option class="level-1" value="15"> Cobol (1)</option><option class="level-1" value="24"> Erlang (2)</option><option class="level-2" value="94"> Elixir (2)</option><option class="level-1" value="149"> F# (2)</option><option class="level-1" value="29"> Go (1)</option><option class="level-1" value="30"> Groovy (1)</option><option class="level-1" value="32"> Haskell (3)</option><option class="level-1" value="36"> iPython (1)</option><option class="level-1" value="37"> Java (5)</option><option class="level-1" value="38"> Javascript (7)</option><option class="level-1" value="56"> Perl (1)</option><option class="level-1" value="57"> PHP (13)</option><option class="level-1" value="63"> PureScript (1)</option><option class="level-1" value="65"> Python (19)</option><option class="level-2" value="141"> PIP (1)</option><option class="level-1" value="68"> Rust (3)</option><option class="level-1" value="75"> Swift (1)</option><option class="level-0" value="99">Laravel (16)</option><option class="level-0" value="44">Learning (5)</option><option class="level-0" value="45">Linux (1)</option><option class="level-0" value="46">macOS (1)</option><option class="level-0" value="47">matter.js (1)</option><option class="level-0" value="48">Maven (1)</option><option class="level-0" value="49">Mobile Development (9)</option><option class="level-0" value="51">NestJS (1)</option><option class="level-0" value="156">Nicepage (1)</option><option class="level-0" value="52">Node.js (2)</option><option class="level-0" value="53">Office 365 (2)</option><option class="level-1" value="95"> Excel (1)</option><option class="level-1" value="81"> VBA (1)</option><option class="level-1" value="88"> Word (1)</option><option class="level-0" value="164">Ollama (4)</option><option class="level-0" value="54">OpenSCAD (1)</option><option class="level-0" value="159">Power Apps (1)</option><option class="level-0" value="59">Power BI (4)</option><option class="level-0" value="146">Power BI Visuals (3)</option><option class="level-0" value="61">Power Query (3)</option><option class="level-0" value="62">Protractor (1)</option><option class="level-0" value="64">PySpark (2)</option><option class="level-0" value="69">rxjs (2)</option><option class="level-0" value="70">SAS (3)</option><option class="level-0" value="71">Selenium (1)</option><option class="level-0" value="72">Shell (10)</option><option class="level-1" value="92"> Bash (1)</option><option class="level-1" value="102"> Power Shell (8)</option><option class="level-0" value="73">Smalltalk (1)</option><option class="level-0" value="74">Spring Boot (2)</option><option class="level-0" value="166">Static-Site-Generator (1)</option><option class="level-1" value="167"> Hugo (1)</option><option class="level-0" value="76">TDD (1)</option><option class="level-1" value="77"> Testing / Unittests (1)</option><option class="level-0" value="145">Troubleshooting (3)</option><option class="level-0" value="126">Tutorial (1)</option><option class="level-0" value="78">Ubuntu (1)</option><option class="level-0" value="79">Uncategorized (7)</option><option class="level-0" value="129">Unix (1)</option><option class="level-0" value="80">Vagrant (1)</option><option class="level-0" value="82">Virtual Machine (2)</option><option class="level-0" value="83">Virtualbox (2)</option><option class="level-0" value="84">Visual Studio Code (4)</option><option class="level-0" value="85">Visualisation (3)</option><option class="level-1" value="93"> D3.js (2)</option><option class="level-1" value="100"> p5.js (1)</option><option class="level-0" value="86">Web Framework (40)</option><option class="level-1" value="90"> Angular (10)</option><option class="level-1" value="91"> AngularJS (1)</option><option class="level-1" value="21"> Django (5)</option><option class="level-1" value="97"> Flask (1)</option><option class="level-1" value="26"> Flutter (6)</option><option class="level-1" value="98"> Ionic (13)</option><option class="level-1" value="66"> React (3)</option><option class="level-1" value="148"> React Native (1)</option><option class="level-1" value="67"> ReactJS (3)</option><option class="level-1" value="103"> VUE (2)</option><option class="level-0" value="143">Windows Subsystem for Linux (1)</option><option class="level-0" value="89">Wordpress (2)</option><option class="level-0" value="155">XAMPP (1)</option> </select></form><script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJjYXQiICk7CglmdW5jdGlvbiBvbkNhdENoYW5nZSgpIHsKCQlpZiAoIGRyb3Bkb3duLm9wdGlvbnNbIGRyb3Bkb3duLnNlbGVjdGVkSW5kZXggXS52YWx1ZSA+IDAgKSB7CgkJCWRyb3Bkb3duLnBhcmVudE5vZGUuc3VibWl0KCk7CgkJfQoJfQoJZHJvcGRvd24ub25jaGFuZ2UgPSBvbkNhdENoYW5nZTsKfSkoKTsKCi8qIF1dPiAqLwo="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="archives-1" class="widget widget_archive wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Archives</h4> <label class="screen-reader-text" for="archives-dropdown-1">Archives</label> <select id="archives-dropdown-1" name="archive-dropdown"><option value="">Select Month</option><option value="https://via-internet.de/blog/2024/11/"> November 2024</option><option value="https://via-internet.de/blog/2024/10/"> October 2024</option><option value="https://via-internet.de/blog/2024/09/"> September 2024</option><option value="https://via-internet.de/blog/2024/07/"> July 2024</option><option value="https://via-internet.de/blog/2024/05/"> May 2024</option><option value="https://via-internet.de/blog/2024/04/"> April 2024</option><option value="https://via-internet.de/blog/2024/03/"> March 2024</option><option value="https://via-internet.de/blog/2024/01/"> January 2024</option><option value="https://via-internet.de/blog/2023/12/"> December 2023</option><option value="https://via-internet.de/blog/2023/11/"> November 2023</option><option value="https://via-internet.de/blog/2023/10/"> October 2023</option><option value="https://via-internet.de/blog/2023/09/"> September 2023</option><option value="https://via-internet.de/blog/2023/08/"> August 2023</option><option value="https://via-internet.de/blog/2023/07/"> July 2023</option><option value="https://via-internet.de/blog/2023/04/"> April 2023</option><option value="https://via-internet.de/blog/2023/03/"> March 2023</option><option value="https://via-internet.de/blog/2023/02/"> February 2023</option><option value="https://via-internet.de/blog/2022/11/"> November 2022</option><option value="https://via-internet.de/blog/2022/10/"> October 2022</option><option value="https://via-internet.de/blog/2022/07/"> July 2022</option><option value="https://via-internet.de/blog/2022/06/"> June 2022</option><option value="https://via-internet.de/blog/2022/05/"> May 2022</option><option value="https://via-internet.de/blog/2022/04/"> April 2022</option><option value="https://via-internet.de/blog/2022/03/"> March 2022</option><option value="https://via-internet.de/blog/2022/01/"> January 2022</option><option value="https://via-internet.de/blog/2021/12/"> December 2021</option><option value="https://via-internet.de/blog/2021/11/"> November 2021</option><option value="https://via-internet.de/blog/2021/10/"> October 2021</option><option value="https://via-internet.de/blog/2021/08/"> August 2021</option><option value="https://via-internet.de/blog/2021/07/"> July 2021</option><option value="https://via-internet.de/blog/2021/06/"> June 2021</option><option value="https://via-internet.de/blog/2021/05/"> May 2021</option><option value="https://via-internet.de/blog/2021/02/"> February 2021</option><option value="https://via-internet.de/blog/2021/01/"> January 2021</option><option value="https://via-internet.de/blog/2020/12/"> December 2020</option><option value="https://via-internet.de/blog/2020/11/"> November 2020</option><option value="https://via-internet.de/blog/2020/10/"> October 2020</option><option value="https://via-internet.de/blog/2020/09/"> September 2020</option><option value="https://via-internet.de/blog/2020/08/"> August 2020</option><option value="https://via-internet.de/blog/2020/07/"> July 2020</option><option value="https://via-internet.de/blog/2020/06/"> June 2020</option><option value="https://via-internet.de/blog/2020/05/"> May 2020</option><option value="https://via-internet.de/blog/2020/04/"> April 2020</option><option value="https://via-internet.de/blog/2020/03/"> March 2020</option><option value="https://via-internet.de/blog/2020/02/" selected="selected"> February 2020</option><option value="https://via-internet.de/blog/2020/01/"> January 2020</option><option value="https://via-internet.de/blog/2019/12/"> December 2019</option><option value="https://via-internet.de/blog/2019/09/"> September 2019</option><option value="https://via-internet.de/blog/2019/08/"> August 2019</option><option value="https://via-internet.de/blog/2019/07/"> July 2019</option><option value="https://via-internet.de/blog/2019/06/"> June 2019</option><option value="https://via-internet.de/blog/2019/05/"> May 2019</option><option value="https://via-internet.de/blog/2019/04/"> April 2019</option><option value="https://via-internet.de/blog/2019/03/"> March 2019</option><option value="https://via-internet.de/blog/2019/02/"> February 2019</option><option value="https://via-internet.de/blog/2019/01/"> January 2019</option><option value="https://via-internet.de/blog/2018/12/"> December 2018</option><option value="https://via-internet.de/blog/2018/11/"> November 2018</option><option value="https://via-internet.de/blog/2018/09/"> September 2018</option><option value="https://via-internet.de/blog/2018/08/"> August 2018</option><option value="https://via-internet.de/blog/2018/07/"> July 2018</option><option value="https://via-internet.de/blog/2018/03/"> March 2018</option><option value="https://via-internet.de/blog/2018/02/"> February 2018</option><option value="https://via-internet.de/blog/2018/01/"> January 2018</option><option value="https://via-internet.de/blog/2017/12/"> December 2017</option><option value="https://via-internet.de/blog/2017/07/"> July 2017</option><option value="https://via-internet.de/blog/2017/05/"> May 2017</option><option value="https://via-internet.de/blog/2017/03/"> March 2017</option><option value="https://via-internet.de/blog/2017/02/"> February 2017</option><option value="https://via-internet.de/blog/2016/12/"> December 2016</option><option value="https://via-internet.de/blog/2016/11/"> November 2016</option><option value="https://via-internet.de/blog/2016/10/"> October 2016</option> </select> <script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJhcmNoaXZlcy1kcm9wZG93bi0xIiApOwoJZnVuY3Rpb24gb25TZWxlY3RDaGFuZ2UoKSB7CgkJaWYgKCBkcm9wZG93bi5vcHRpb25zWyBkcm9wZG93bi5zZWxlY3RlZEluZGV4IF0udmFsdWUgIT09ICcnICkgewoJCQlkb2N1bWVudC5sb2NhdGlvbi5ocmVmID0gdGhpcy5vcHRpb25zWyB0aGlzLnNlbGVjdGVkSW5kZXggXS52YWx1ZTsKCQl9Cgl9Cglkcm9wZG93bi5vbmNoYW5nZSA9IG9uU2VsZWN0Q2hhbmdlOwp9KSgpOwoKLyogXV0+ICovCg=="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="search-1" class="widget widget_search wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Search</h4><form method="get" id="searchform" class="input-group" action="https://via-internet.de/blog/"> <input type="text" class="form-control" placeholder="Search" name="s" id="s"><div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button></div></form></aside></div></div></div><div class="site-info text-center"> Copyright © 2024 | Powered by <a href="//wordpress.org/">WordPress</a> <span class="sep"> | </span> Aasta Blog theme by <a target="_blank" href="//themearile.com/">ThemeArile</a></div></footer><div class="page-scroll-up"><a href="#totop"><i class="fa fa-angle-up"></i></a></div><div id="cookie-law-info-bar" data-nosnippet="true" data-cli-style="cli-style-v2" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: inherit; bottom: 0px; position: fixed;"><span><div class="cli-bar-container cli-style-v2"><div class="cli-bar-message">We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.</div><div class="cli-bar-btn_container"><a role="button" class="medium cli-plugin-button cli-plugin-main-button cli_settings_button" style="margin: 0px 5px 0px 0px; color: rgb(51, 51, 51); background-color: rgb(222, 223, 224);">Cookie Settings</a><a id="wt-cli-accept-all-btn" role="button" data-cli_action="accept_all" class="wt-cli-element medium cli-plugin-button wt-cli-accept-all-btn cookie_action_close_header cli_action_button" style="color: rgb(255, 255, 255); background-color: rgb(97, 162, 41);">Accept All</a></div></div></span></div><div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); position: fixed; font-family: inherit; width: auto; bottom: 0px; right: 100px; display: none;"><span id="cookie_hdr_showagain">Manage consent</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true"><div class="cli-modal-dialog" role="document"><div class="cli-modal-content cli-bar-popup"> <button type="button" class="cli-modal-close" id="cliModalClose"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg> <span class="wt-cli-sr-only">Close</span> </button><div class="cli-modal-body"><div class="cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-privacy-overview"><h4>Privacy Overview</h4><div class="cli-privacy-content"><div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ...</div></div> <a class="cli-privacy-readmore" aria-label="Show more" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a></div></div><div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container"><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab"> Necessary </a><div class="wt-cli-necessary-checkbox"> <input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked"> <label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label></div> <span class="cli-necessary-caption">Always Enabled</span></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="necessary"><div class="wt-cli-cookie-description"> Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.<table class="cookielawinfo-row-cat-table cookielawinfo-winter"><thead><tr><th class="cookielawinfo-column-1">Cookie</th><th class="cookielawinfo-column-3">Duration</th><th class="cookielawinfo-column-4">Description</th></tr></thead><tbody><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-analytics</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-functional</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-necessary</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-others</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-performance</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">viewed_cookie_policy</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.</td></tr></tbody></table></div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="functional" data-toggle="cli-toggle-tab"> Functional </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-functional" class="cli-user-preference-checkbox" data-id="checkbox-functional"> <label for="wt-cli-checkbox-functional" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Functional</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="functional"><div class="wt-cli-cookie-description"> Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="performance" data-toggle="cli-toggle-tab"> Performance </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-performance" class="cli-user-preference-checkbox" data-id="checkbox-performance"> <label for="wt-cli-checkbox-performance" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Performance</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="performance"><div class="wt-cli-cookie-description"> Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="analytics" data-toggle="cli-toggle-tab"> Analytics </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-analytics" class="cli-user-preference-checkbox" data-id="checkbox-analytics"> <label for="wt-cli-checkbox-analytics" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Analytics</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="analytics"><div class="wt-cli-cookie-description"> Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="advertisement" data-toggle="cli-toggle-tab"> Advertisement </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-advertisement" class="cli-user-preference-checkbox" data-id="checkbox-advertisement"> <label for="wt-cli-checkbox-advertisement" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Advertisement</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="advertisement"><div class="wt-cli-cookie-description"> Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="others" data-toggle="cli-toggle-tab"> Others </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-others" class="cli-user-preference-checkbox" data-id="checkbox-others"> <label for="wt-cli-checkbox-others" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Others</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="others"><div class="wt-cli-cookie-description"> Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.</div></div></div></div></div></div></div></div><div class="cli-modal-footer"><div class="wt-cli-element cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-tab-footer wt-cli-privacy-overview-actions"> <a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a></div></div></div></div></div></div></div></div><div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div><div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div> <script defer="" src="data:text/javascript;base64,DQogICAgICAgICAgICBmdW5jdGlvbiBfa2F0ZXhSZW5kZXIocm9vdEVsZW1lbnQpIHsNCiAgICAgICAgICAgICAgICBjb25zdCBlbGVzID0gcm9vdEVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgiLmthdGV4LWVxOm5vdCgua2F0ZXgtcmVuZGVyZWQpIik7DQogICAgICAgICAgICAgICAgZm9yKGxldCBpZHg9MDsgaWR4IDwgZWxlcy5sZW5ndGg7IGlkeCsrKSB7DQogICAgICAgICAgICAgICAgICAgIGNvbnN0IGVsZSA9IGVsZXNbaWR4XTsNCiAgICAgICAgICAgICAgICAgICAgZWxlLmNsYXNzTGlzdC5hZGQoImthdGV4LXJlbmRlcmVkIik7DQogICAgICAgICAgICAgICAgICAgIHRyeSB7DQogICAgICAgICAgICAgICAgICAgICAgICBrYXRleC5yZW5kZXIoDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxlLnRleHRDb250ZW50LA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZSwNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXlNb2RlOiBlbGUuZ2V0QXR0cmlidXRlKCJkYXRhLWthdGV4LWRpc3BsYXkiKSA9PT0gJ3RydWUnLA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aHJvd09uRXJyb3I6IGZhbHNlDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgKTsNCiAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChuKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUuc3R5bGUuY29sb3I9InJlZCI7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUudGV4dENvbnRlbnQgPSBuLm1lc3NhZ2U7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGZ1bmN0aW9uIGthdGV4UmVuZGVyKCkgew0KICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihkb2N1bWVudCk7DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoIkRPTUNvbnRlbnRMb2FkZWQiLCBmdW5jdGlvbigpIHsNCiAgICAgICAgICAgICAgICBrYXRleFJlbmRlcigpOw0KDQogICAgICAgICAgICAgICAgLy8gUGVyZm9ybSBhIEthVGVYIHJlbmRlcmluZyBzdGVwIHdoZW4gdGhlIERPTSBpcyBtdXRhdGVkLg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcihmdW5jdGlvbihtdXRhdGlvbnMpIHsNCiAgICAgICAgICAgICAgICAgICAgW10uZm9yRWFjaC5jYWxsKG11dGF0aW9ucywgZnVuY3Rpb24obXV0YXRpb24pIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmIChtdXRhdGlvbi50YXJnZXQgJiYgbXV0YXRpb24udGFyZ2V0IGluc3RhbmNlb2YgRWxlbWVudCkgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihtdXRhdGlvbi50YXJnZXQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgICAgICB9KTsNCg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2YXRpb25Db25maWcgPSB7DQogICAgICAgICAgICAgICAgICAgIHN1YnRyZWU6IHRydWUsDQogICAgICAgICAgICAgICAgICAgIGNoaWxkTGlzdDogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgY2hhcmFjdGVyRGF0YTogdHJ1ZQ0KICAgICAgICAgICAgICAgIH07DQoNCiAgICAgICAgICAgICAgICBrYXRleE9ic2VydmVyLm9ic2VydmUoZG9jdW1lbnQuYm9keSwga2F0ZXhPYnNlcnZhdGlvbkNvbmZpZyk7DQogICAgICAgICAgICB9KTsNCg0KICAgICAgICA="></script> <style type="text/css">.theme-testimonial { background-image: url(https://via-internet.de/blog/wp-content/themes/aasta-blog/assets/img/theme-bg.jpg); background-size: cover; background-position: center center; }</style> <script defer="" src="data:text/javascript;base64,CgkvLyBUaGlzIEpTIGFkZGVkIGZvciB0aGUgVG9nZ2xlIGJ1dHRvbiB0byB3b3JrIHdpdGggdGhlIGZvY3VzIGVsZW1lbnQuCgkJaWYgKHdpbmRvdy5pbm5lcldpZHRoIDwgOTkyKSB7CgkJCWRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBmdW5jdGlvbihlKSB7CgkJCWxldCBpc1RhYlByZXNzZWQgPSBlLmtleSA9PT0gJ1RhYicgfHwgZS5rZXlDb2RlID09PSA5OwoJCQkJaWYgKCFpc1RhYlByZXNzZWQpIHsKCQkJCQlyZXR1cm47CgkJCQl9CgkJCQkKCQkJY29uc3QgIGZvY3VzYWJsZUVsZW1lbnRzID0KCQkJCSdidXR0b24sIFtocmVmXSwgaW5wdXQsIHNlbGVjdCwgdGV4dGFyZWEsIFt0YWJpbmRleF06bm90KFt0YWJpbmRleD0iLTEiXSknOwoJCQljb25zdCBtb2RhbCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5uYXZiYXIubmF2YmFyLWV4cGFuZC1sZycpOyAvLyBzZWxlY3QgdGhlIG1vZGFsIGJ5IGl0J3MgaWQKCgkJCWNvbnN0IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCA9IG1vZGFsLnF1ZXJ5U2VsZWN0b3JBbGwoZm9jdXNhYmxlRWxlbWVudHMpWzBdOyAvLyBnZXQgZmlyc3QgZWxlbWVudCB0byBiZSBmb2N1c2VkIGluc2lkZSBtb2RhbAoJCQljb25zdCBmb2N1c2FibGVDb250ZW50ID0gbW9kYWwucXVlcnlTZWxlY3RvckFsbChmb2N1c2FibGVFbGVtZW50cyk7CgkJCWNvbnN0IGxhc3RGb2N1c2FibGVFbGVtZW50ID0gZm9jdXNhYmxlQ29udGVudFtmb2N1c2FibGVDb250ZW50Lmxlbmd0aCAtIDFdOyAvLyBnZXQgbGFzdCBlbGVtZW50IHRvIGJlIGZvY3VzZWQgaW5zaWRlIG1vZGFsCgoJCQkgIGlmIChlLnNoaWZ0S2V5KSB7IC8vIGlmIHNoaWZ0IGtleSBwcmVzc2VkIGZvciBzaGlmdCArIHRhYiBjb21iaW5hdGlvbgoJCQkJaWYgKGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQgPT09IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCkgewoJCQkJICBsYXN0Rm9jdXNhYmxlRWxlbWVudC5mb2N1cygpOyAvLyBhZGQgZm9jdXMgZm9yIHRoZSBsYXN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsKCQkJCX0KCQkJICB9IGVsc2UgeyAvLyBpZiB0YWIga2V5IGlzIHByZXNzZWQKCQkJCWlmIChkb2N1bWVudC5hY3RpdmVFbGVtZW50ID09PSBsYXN0Rm9jdXNhYmxlRWxlbWVudCkgeyAvLyBpZiBmb2N1c2VkIGhhcyByZWFjaGVkIHRvIGxhc3QgZm9jdXNhYmxlIGVsZW1lbnQgdGhlbiBmb2N1cyBmaXJzdCBmb2N1c2FibGUgZWxlbWVudCBhZnRlciBwcmVzc2luZyB0YWIKCQkJCSAgZmlyc3RGb2N1c2FibGVFbGVtZW50LmZvY3VzKCk7IC8vIGFkZCBmb2N1cyBmb3IgdGhlIGZpcnN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsJCQkgIAoJCQkJfQoJCQkgIH0KCgkJCX0pOwoJCX0K"></script> <script defer="" src="data:text/javascript;base64,CiAgICAgICAgbmV3Q29udGFpbmVyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3BhbicpOwogICAgICAgIG5ld0NvbnRhaW5lci5zdHlsZS5zZXRQcm9wZXJ0eSgnZGlzcGxheScsJ25vbmUnLCcnKTsKICAgICAgICBuZXdOb2RlICAgICAgICAgICA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NjcmlwdCcpOwogICAgICAgIG5ld05vZGUudHlwZSAgICAgID0gJ21hdGgvdGV4JzsKICAgICAgICBuZXdOb2RlLmlubmVySFRNTCA9ICdcXG5ld2NvbW1hbmR7XFxlcHN9e1xcdmFyZXBzaWxvbn1cblxcbmV3Y29tbWFuZHtcXFJSfXtcXG1hdGhiYntSfX1cblxcbmV3Y29tbWFuZHtcXHJkfXtcXG9wZXJhdG9ybmFtZXtkfX1cblxcbmV3Y29tbWFuZHtcXHNldH1bMV17XFxsZWZ0XFx7IzFcXHJpZ2h0XFx9fSc7CiAgICAgICAgbmV3Q29udGFpbmVyLmFwcGVuZENoaWxkKG5ld05vZGUpOwogICAgICAgIGRvY3VtZW50LmJvZHkuaW5zZXJ0QmVmb3JlKG5ld0NvbnRhaW5lcixkb2N1bWVudC5ib2R5LmZpcnN0Q2hpbGQpOwogICAgICAgIA=="></script> <script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], displayMath: [['$$', '$$'], ["\\[", "\\]"]], processEscapes: true }, TeX: { equationNumbers: {autoNumber: "AMS", useLabelIds: true} }, });</script> <link rel="stylesheet" id="cookie-law-info-table-css" href="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_26b4f0c3c1bcf76291fa4952fb7f04fb.php?ver=3.2.8" type="text/css" media="all"> <script defer="" id="toc-front-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgdG9jcGx1cyA9IHsidmlzaWJpbGl0eV9zaG93IjoiQW56ZWlnZW4iLCJ2aXNpYmlsaXR5X2hpZGUiOiJBdXNibGVuZGVuIiwidmlzaWJpbGl0eV9oaWRlX2J5X2RlZmF1bHQiOiIxIiwid2lkdGgiOiJBdXRvIn07Ci8qIF1dPiAqLwo="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_93d421fd7576b0ca9c359ffe2fa16113.php?ver=20151215" id="aasta-skip-link-focus-fix-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.7.2" id="katex-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=UnpSS38vU0joHj5" id="enlighterjs-js"></script> <script defer="" id="enlighterjs-js-after" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwohZnVuY3Rpb24oZSxuKXtpZigidW5kZWZpbmVkIiE9dHlwZW9mIEVubGlnaHRlckpTKXt2YXIgbz17InNlbGVjdG9ycyI6eyJibG9jayI6InByZS5FbmxpZ2h0ZXJKU1JBVyIsImlubGluZSI6ImNvZGUuRW5saWdodGVySlNSQVcifSwib3B0aW9ucyI6eyJpbmRlbnQiOjQsImFtcGVyc2FuZENsZWFudXAiOnRydWUsImxpbmVob3ZlciI6dHJ1ZSwicmF3Y29kZURiY2xpY2siOnRydWUsInRleHRPdmVyZmxvdyI6ImJyZWFrIiwibGluZW51bWJlcnMiOmZhbHNlLCJ0aGVtZSI6ImNsYXNzaWMiLCJsYW5ndWFnZSI6ImdlbmVyaWMiLCJyZXRhaW5Dc3NDbGFzc2VzIjpmYWxzZSwiY29sbGFwc2UiOmZhbHNlLCJ0b29sYmFyT3V0ZXIiOiIiLCJ0b29sYmFyVG9wIjoie0JUTl9SQVd9e0JUTl9DT1BZfXtCVE5fV0lORE9XfXtCVE5fV0VCU0lURX0iLCJ0b29sYmFyQm90dG9tIjoiIn19OyhlLkVubGlnaHRlckpTSU5JVD1mdW5jdGlvbigpe0VubGlnaHRlckpTLmluaXQoby5zZWxlY3RvcnMuYmxvY2ssby5zZWxlY3RvcnMuaW5saW5lLG8ub3B0aW9ucyl9KSgpfWVsc2V7KG4mJihuLmVycm9yfHxuLmxvZyl8fGZ1bmN0aW9uKCl7fSkoIkVycm9yOiBFbmxpZ2h0ZXJKUyByZXNvdXJjZXMgbm90IGxvYWRlZCB5ZXQhIil9fSh3aW5kb3csY29uc29sZSk7Ci8qIF1dPiAqLwo="></script> <script type="text/javascript" id="jetpack-stats-js-before">_stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"195943667\",\"post\":\"0\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]); _stq.push([ "clickTrackerInit", "195943667", "0" ]);</script> <script type="text/javascript" src="https://stats.wp.com/e-202510.js" id="jetpack-stats-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="gt_widget_script_62673750-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['62673750'] = {"default_language":"de","languages":["de","en","fr","zh-CN","nl","it","es","da","pt"],"url_structure":"none","native_language_names":1,"flag_style":"2d","flag_size":24,"wrapper_selector":"#gtranslate_menu_wrapper_37060","alt_flags":[],"switcher_open_direction":"top","switcher_horizontal_position":"inline","switcher_text_color":"#666","switcher_arrow_color":"#666","switcher_border_color":"#ccc","switcher_background_color":"#fff","switcher_background_shadow_color":"#efefef","switcher_background_hover_color":"#fff","dropdown_text_color":"#000","dropdown_hover_color":"#fff","dropdown_background_color":"#eee","flags_location":"\/blog\/wp-content\/plugins\/gtranslate\/flags\/"};</script><script src="https://via-internet.de/blog/wp-content/plugins/gtranslate/js/dwf.js?ver=6.7.2" data-no-optimize="1" data-no-minify="1" data-gt-orig-url="/blog/2020/02/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="62673750" defer=""></script><script defer="" id="wpcd-scripts-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgd3BjZGFqYXggPSB7ImFqYXh1cmwiOiJodHRwczpcL1wvdmlhLWludGVybmV0LmRlXC9ibG9nXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAifTsKLyogXV0+ICovCg=="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_231b95969d2321feeaab8fdd8121442a.php" id="wpcd-scripts-js"></script> <script defer="" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js&ver=2.7.5" id="mathjax-js"></script> <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async="" src="https://via-internet.de/blog/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js"></script> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Page Caching using Disk: Enhanced Lazy Loading Database Caching 2/163 queries in 0.254 seconds using Disk Served from: via-internet.de @ 2025-03-08 07:08:06 by W3 Total Cache --></pre></pre></pre></pre></pre> { { { <h1 style="text-align: center">CARDS</h1> { <p><code>dashboard/apps/components/cards/templates/buttons/base.html</code></p> <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="">{ { { <h1 style="text-align: center">BUTTONS</h1> { <p>Save everything and view at the resulting page</p> <figure class="wp-block-image size-large"><img decoding="async" width="1444" height="808" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201444%20808'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_54_navigation_1.png?fit=700%2C392&ssl=1" alt="" class="wp-image-6056 lazy" data-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" data-sizes="auto, (max-width: 1444px) 100vw, 1444px"></figure> <p>What happens, from showing the page, clicking on the link until you see the final result:</p> <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> <figure class="wp-block-image size-large"><img decoding="async" width="1472" height="849" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201472%20849'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_54_navigation_2.png?fit=700%2C404&ssl=1" alt="" class="wp-image-6057 lazy" data-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" data-sizes="auto, (max-width: 1472px) 100vw, 1472px"></figure> <h2 class="wp-block-heading">Namespaces and structure</h2> <p>Now, think about the names, e. g. buttons and cards in our Components.</p> <p>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> <p>So, you will have to additional files, for example</p> <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> <p>The corresponding url mapping (<code>urls.py</code>) could look like this:</p> <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 import dashboard.apps.utilities.info.views as UtilitiesInfoViews urlpatterns = [ path('', include('dashboard.apps.urls')), path('info', ComponentInfoViews.IndexView.as_view(), name='info'), path('info', UtilitiesInfoViews.IndexView.as_view(), name='info'),</pre><p>Two pages with the same name (<code>info</code>) in different <code>views.py</code>!</p><p>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><p>We will choose a more modern way of programming</p><ul class="wp-block-list"><li>Spread the responsibility over separate, independent modules</li><li>Name these modules with different names</li></ul><p>What does this mean? We will have</p><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><h2 class="wp-block-heading">Resulting folder structure and file content</h2><p>File <code>dashbard/urls.py</code></p><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 = [ path('', include('dashboard.apps.urls')), path('admin/', admin.site.urls), ]</pre><p>File <code>dashbard/apps/urls.py</code></p><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 from django.urls.conf import include from dashboard.apps.frontend.views import IndexView app_name = 'app' urlpatterns = [ path('', IndexView.as_view(), name='index'), path('pages/', include('dashboard.apps.pages.urls')), path('components/', include('dashboard.apps.components.urls')), path('utilities/', include('dashboard.apps.utilities.urls')), ] </pre><p>File <code>dashbard/apps/components/urls.py</code></p><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 import dashboard.apps.components.buttons.views as ButtonsViews import dashboard.apps.components.cards.views as CardsViews app_name = 'components' urlpatterns = [ path('', ButtonsViews.IndexView.as_view(), name='index'), path('buttons/', ButtonsViews.IndexView.as_view(), name='buttons'), path('cards/', CardsViews.IndexView.as_view(), name='cards'), ] </pre><p>File <code>dashbard/apps/utilities/urls.py</code></p><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 import dashboard.apps.utilities.colors.views as ColorsViews import dashboard.apps.utilities.borders.views as BordersViews import dashboard.apps.utilities.animations.views as AnimationsViews import dashboard.apps.utilities.others.views as OthersViews app_name = 'utilities' urlpatterns = [ path('', BordersViews.IndexView.as_view(), name='index'), path('animations/', AnimationsViews.IndexView.as_view(), name='animations'), path('borders/', BordersViews.IndexView.as_view(), name='borders'), path('colors/', ColorsViews.IndexView.as_view(), name='colors'), path('others/', OthersViews.IndexView.as_view(), name='others'), ] </pre><p>File <code>dashbard/apps/pages/urls.py</code></p><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 import dashboard.apps.pages.blank.views as BlankViews import dashboard.apps.pages.login.views as LoginViews import dashboard.apps.pages.pagenotfound.views as PageNotFoundViews import dashboard.apps.pages.password.views as PasswordViews import dashboard.apps.pages.register.views as RegisterViews import dashboard.apps.pages.charts.views as ChartsViews import dashboard.apps.pages.tables.views as TablesViews app_name = 'pages' urlpatterns = [ path('', ChartsViews.IndexView.as_view(), name='index'), path('blank', BlankViews.IndexView.as_view(), name='blank'), path('charts', ChartsViews.IndexView.as_view(), name='charts'), path('login', LoginViews.IndexView.as_view(), name='login'), path('pagenotfound', PageNotFoundViews.IndexView.as_view(), name='pagenotfound'), path('password', PasswordViews.IndexView.as_view(), name='password'), path('register', RegisterViews.IndexView.as_view(), name='register'), path('tables', TablesViews.IndexView.as_view(), name='tables'), ] </pre><h3 class="wp-block-heading">Let’s finally check the namespace structure:</h3><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 ./dashboard/urls.py ./dashboard/apps/utilities/urls.py ./dashboard/apps/components/urls.py ./dashboard/apps/urls.py ./dashboard/apps/pages/urls.py</pre><p>We create three levels for our namespaces:</p><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>–</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><p>These namespaces must be used in the template files, for example:</p><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=""><a href="{ <a href="{ <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=""><a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <p>Install the Django Extensions for additional commands:</p> <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><p>Add Django Extensions to the INSTALLED_APPS</p><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 = [ ... 'django_extensions' ]</pre><p>Show URLs and Namespaces (only for out apps, admin urls are removed)</p><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><figure class="wp-block-image size-large"><img decoding="async" width="1676" height="449" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201676%20449'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_55_namespaces.png?fit=700%2C188&ssl=1" alt="" class="wp-image-6078 lazy" data-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" data-sizes="auto, (max-width: 1676px) 100vw, 1676px"></figure><h2 class="wp-block-heading">Preparing required components and pages</h2><p>In summary, these are the steps to create the desired folder structure:</p><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 mkdir -p dashboard/apps/components/cards/templates/cards mkdir -p dashboard/apps/pages/blank/templates/blank mkdir -p dashboard/apps/pages/charts/templates/charts mkdir -p dashboard/apps/pages/login/templates/login mkdir -p dashboard/apps/pages/pagenotfound/templates/pagenotfound mkdir -p dashboard/apps/pages/password/templates/password mkdir -p dashboard/apps/pages/register/templates/register mkdir -p dashboard/apps/pages/tables/templates/tables mkdir -p dashboard/apps/utilities/animations/templates/animations mkdir -p dashboard/apps/utilities/borders/templates/borders mkdir -p dashboard/apps/utilities/colors/templates/colors mkdir -p dashboard/apps/utilities/others/templates/others</pre><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 python3 manage.py startapp cards dashboard/apps/components/cards python3 manage.py startapp blank dashboard/apps/pages/blank python3 manage.py startapp charts dashboard/apps/pages/charts python3 manage.py startapp login dashboard/apps/pages/login python3 manage.py startapp pagenotfound dashboard/apps/pages/pagenotfound python3 manage.py startapp password dashboard/apps/pages/password python3 manage.py startapp register dashboard/apps/pages/register python3 manage.py startapp tables dashboard/apps/pages/tables python3 manage.py startapp animations dashboard/apps/utilities/animations python3 manage.py startapp borders dashboard/apps/utilities/borders python3 manage.py startapp colors dashboard/apps/utilities/colors python3 manage.py startapp others dashboard/apps/utilities/others</pre><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 "{ { { <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 cp base.html dashboard/apps/components/cards/templates/cards cp base.html dashboard/apps/pages/blank/templates/blank cp base.html dashboard/apps/pages/charts/templates/charts cp base.html dashboard/apps/pages/login/templates/login cp base.html dashboard/apps/pages/pagenotfound/templates/pagenotfound cp base.html dashboard/apps/pages/password/templates/password cp base.html dashboard/apps/pages/register/templates/register cp base.html dashboard/apps/pages/tables/templates/tables cp base.html dashboard/apps/utilities/animations/templates/animations cp base.html dashboard/apps/utilities/borders/templates/borders cp base.html dashboard/apps/utilities/colors/templates/colors cp base.html dashboard/apps/utilities/others/templates/others</pre><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><figure class="wp-block-image size-large"><img decoding="async" width="291" height="874" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20291%20874'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_10_folder_structure.png" alt="" class="wp-image-6012 lazy" data-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" data-sizes="auto, (max-width: 291px) 100vw, 291px"></figure><p>Each of the folders has the same structure, for example the buttons component. We will delete some unnecessary files</p><figure class="wp-block-image size-large is-resized"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20293%20284'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_11_app-folder-structure.png" alt="" class="wp-image-6013 lazy" width="293" height="284" data-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" data-sizes="auto, (max-width: 293px) 100vw, 293px"></figure><h2 class="wp-block-heading">Replacing Projects with dynamic data</h2><p>Replacing the static parts with dynamic content could be achieved by the following approach:</p><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><p>The steps are the same for all components (all items of the side menu).</p><p>Find the</p><p>Identify dynamic parts in template</p><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_20_projects_html_old-700x374.png" alt="" class="wp-image-5972 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><figure class="wp-block-image size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data-700x219.png" alt="" class="wp-image-5971 lazy"></figure><figure class="wp-block-table"><table><tbody><tr><td><img decoding="async" width="500" height="278" class="wp-image-5973 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20278'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_42_projects_old_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="157" class="wp-image-5971 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20157'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="279" class="wp-image-5975 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20279'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_44_projects_new_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="151" class="wp-image-5974 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20151'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_43_projects_new_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><h2 class="wp-block-heading">Create templates for side menu pages</h2><p>For every side menu item, their is a corresponding html file in the install folder of the <code>sb-admin-2</code> template:</p><p>Remember the environment variable we create in part 1 for the start of our project</p><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><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 find dashboard/apps install/sb-admin-2 -name *.html</pre><p>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><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><p>Each template base.html should have the following content:</p><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="">{ { { <p>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> <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 class IndexView(generic.TemplateView): template_name = 'buttons/base.html'</pre><p>So, for each template file, we have to</p><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><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=""> <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --></pre><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure><div class="post-content"><div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 22<small class="months">Feb</small></time></a> </span><div class="media-body"><header class="entry-header"><h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/">Django | Build a Dashboard with Django and Bootstrap: Part 2</a></h4></header><div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span></div><div class="entry-content"><p>This is Part 2 of <em>Building a Dashboard with Django and Bootstrap</em>:</p><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><h2 class="wp-block-heading">Introduction</h2><p>If you follow the first part of this blog topic, you have a running Django dashboard.</p><p>But, unfortunately, the content is still static. Let’s review the current state:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"></div></div><p>Perfect. We are done with the basic setup.</p><p>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><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>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><p>We will do this by following these steps:</p><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><h2 class="wp-block-heading">Identify dynamic parts</h2><p>How to find the parts, which are dynamic.</p><p>One way is to ask:</p><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><p>You mostly get the same answers by the question:</p><ul class="wp-block-list"><li>What are the main components of a web page (including navigation and content)</li></ul><p>For answer the first question, take a look at the current page and “name” the areas:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="563" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20563'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/02_elements_of_dashboard_page.png?fit=700%2C394&ssl=1" alt="" class="wp-image-5929 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>So, these “names” are also the answer for the 3. Question:</p><ul class="wp-block-list"><li>sidemenu</li><li>top bar</li><li>content</li></ul><p>And maybe you find additional “names”</p><ul class="wp-block-list"><li>header</li><li>footer</li><li>top menu</li><li>left and right sidebar</li></ul><h2 class="wp-block-heading">Find identified parts in template</h2><p>Next step is, to find the identified parts in our dashboard template</p><p><code>dashboard/templates/site/sb-admin-2/base.html</code></p><p>This is an easy step, because the developer of the SB Admin 2 template documented their template well:</p><figure class="wp-block-image size-large"><img decoding="async" width="2004" height="1706" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202004%201706'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/03_elements_of_dashboard_in_codepage.png?fit=700%2C596&ssl=1" alt="" class="wp-image-5932 lazy" data-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" data-sizes="auto, (max-width: 2004px) 100vw, 2004px"></figure><p>Looking into the code of the template, you will find comment lines describing the content:</p><ul class="wp-block-list"><li><code><!-- Sidebar --></code></li><li><code><!-- Topbar --></code></li><li><code><!-- Top Search --></code></li><li><code><!-- Top Navbar --></code></li><li><code><!-- Begin Page Content--></code></li></ul><p>So, it is obvious what do to next:</p><ul class="wp-block-list"><li>get the <em>dynamic</em> part (lines under)<code><!-- Begin Page Content--></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><p>This is the way, the template system of django works:</p><figure class="wp-block-image size-large"><img decoding="async" width="954" height="251" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20954%20251'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/21_combine_template_and_content_ui.png?fit=700%2C184&ssl=1" alt="" class="wp-image-5944 lazy" data-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" data-sizes="auto, (max-width: 954px) 100vw, 954px"></figure><p>Let’s explain this with a simple example: the page title</p><p>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><p>To achieve this, we have to tell our template system the following:</p><figure class="wp-block-image size-large"><img decoding="async" width="940" height="209" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20940%20209'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/22_combine_template_and_content_code.png?fit=700%2C156&ssl=1" alt="" class="wp-image-5943 lazy" data-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" data-sizes="auto, (max-width: 940px) 100vw, 940px"></figure><p>Now, we do the same with the content:</p><figure class="wp-block-image size-large"><img decoding="async" width="983" height="457" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20983%20457'%3E%3C/svg%3E" data-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&ssl=1" alt="" class="wp-image-5947 lazy" data-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" data-sizes="auto, (max-width: 983px) 100vw, 983px"></figure><p>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><p>Well, let’s make a test and try to include a different content in the dashboard template.</p><p>Change the lines, where we include the content into this:</p><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="">{ MISSING CONTENT { <p>Did you notice the other name of the content: <strong>content_missing</strong>?</p> <p>Change the template, save the file and have a look at the result:</p> <figure class="wp-block-image size-large"><img decoding="async" width="2328" height="448" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202328%20448'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/41_missing_content.png?fit=700%2C135&ssl=1" alt="" class="wp-image-5949 lazy" data-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" data-sizes="auto, (max-width: 2328px) 100vw, 2328px"></figure> <p>Change content back, so your template is working again:</p> <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="">{ MISSING CONTENT { <p>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> </pre></pre></div> </div> </div> </div> </article><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"> <figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure> <div class="post-content"> <div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 21<small class="months">Feb</small></time></a> </span> <div class="media-body"> <header class="entry-header"> <h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/">Django | Build a Dashboard with Django and Bootstrap: Part 1</a></h4> </header> <div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span> </div> <div class="entry-content"> <p>This is Part 1 of <em>Building a Dashboard with Django and Bootstrap</em>:</p> <ul class="wp-block-list"> <li><strong>Part 1: Building a base Django project</strong></li> <li><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/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/build-a-dashboard-with-django-and-bootstrap-part-4/">Part 4: Deploy Django App to Azure</a></li> </ul> <h2 class="wp-block-heading">Introduction</h2> <p>Building a complete web app isn’t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don’t using tools or framework, which helps and makes our life easier. <a href="https://www.djangoproject.com/"><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824465754606598455505">Django</gwmw></a> is one of these frameworks:</p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468379037630016661">Django</gwmw> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development</p> </blockquote> <p>So, let’s get started.</p> <h3 class="wp-block-heading">Create project</h3> <p>For subsequent steps, we will remember our starting directory </p> <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="">❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder...</pre><p>First step is to create our main Django project</p><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="">❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate</pre><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="">❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK.</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="782" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20782'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png" alt="" class="wp-image-9675 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-300x229.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-768x587.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1536x1173.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-2048x1564.png 2048w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure></div><h3 class="wp-block-heading">Create first apps</h3><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="">❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend</pre><p>The folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="970" height="436" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20970%20436'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png" alt="" class="wp-image-9690 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png 970w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-300x135.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-768x345.png 768w" data-sizes="auto, (max-width: 970px) 100vw, 970px"></figure><h2 class="wp-block-heading">Add new apps to project</h2><p>Modify name in <code>apps/core/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core'</pre><p>Modify name in <code>apps/frontend/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend'</pre><p>Modify <code>dashboard/settings.py</code></p><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="">INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ]</pre><p>Modify <code>dashboard/urls.py</code></p><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="">from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ]</pre><h3 class="wp-block-heading">Create view</h3><p>Modify view in <code>apps/frontend/views.py</code></p><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="">from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html'</pre><h3 class="wp-block-heading">Create template for frontend View</h3><p>Create template file <code>apps/frontend/templates/frontend/index.html</code></p><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=""><h1> Frontend: Let's get started </h1></pre><h3 class="wp-block-heading">Add template folder to configuration</h3><p>In <kbd>dashboard/settings.py</kbd>, add template folder to TEMPLATES</p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ]</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="624" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20624%20186'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png" alt="" class="wp-image-8442 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png 624w, https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2-300x89.png 300w" data-sizes="auto, (max-width: 624px) 100vw, 624px"></figure></div><h2 class="wp-block-heading">Current folder Structure</h2><p>So far, we have the following folder structure</p><figure class="wp-block-image size-full"><img decoding="async" width="690" height="982" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20690%20982'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png" alt="" class="wp-image-9691 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png 690w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001-211x300.png 211w" data-sizes="auto, (max-width: 690px) 100vw, 690px"></figure><h2 class="wp-block-heading">Prepare for administrate your project</h2><h3 class="wp-block-heading">Create admin user</h3><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="">❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully.</pre><h2 class="wp-block-heading">Add Bootstrap support</h2><p>Download requires files for Bootstrap, jQuery and PopperJS.</p><p>Or download <a href="https://via-internet.de/blog/wp-content/uploads/2021/10/static.zip">this </a>prepared archiv and unzip the files unter <code>dashboard</code>.</p><p>Run the scripts in <kbd>$DASHBOARD_ROOT</kbd></p><p>Hint: You need to install <a href="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3" data-type="link" data-id="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3">PowerShell</a> before running the scripts.</p><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 > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1</pre><p><kbd>download_bootstrap.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' </pre><p><kbd>download_jquery.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map</pre><p><kbd>download_popperjs.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js</pre><p>Finally, the folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="474" height="660" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20474%20660'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png" alt="" class="wp-image-9679 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png 474w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008-215x300.png 215w" data-sizes="auto, (max-width: 474px) 100vw, 474px"></figure><h3 class="wp-block-heading">Create site templates in <code>dashboard/templates/site</code></h3><h3 class="wp-block-heading">Add templates path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470508427730698282">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="5" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ...</pre><h3 class="wp-block-heading"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-2" id="gwmw-15824470715450370185521">Add static</gwmw> path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470715451132153545">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><p>Add as first line</p><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="">import os</pre><p>Then add / replace at <kbd>STATIC_URL=...</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="2-4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ]</pre><h2 class="wp-block-heading">Modify frontend view template</h2><p>File <code>dashboard/apps/frontend/templates/index.html</code></p><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="">{ { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { <p>File <kbd>dashboard/apps/frontend/templates/site/base.html</kbd></p> <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="">{ <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html></pre><h2 class="wp-block-heading">View current status of project</h2><figure class="wp-block-image size-large"><img decoding="async" width="1024" height="778" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20778'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png" alt="" class="wp-image-9682 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-300x228.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-768x583.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1536x1167.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap.png 1714w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure><h2 class="wp-block-heading">Final Result</h2><p>The final result could be found <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project" data-type="link" data-id="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project">here</a>.</p><h2 class="wp-block-heading">Add dashboard from an existing template</h2><p>For a first start, we will use this <a href="https://startbootstrap.com/previews/sb-admin-2/"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824470188863680783027">sb</gwmw>-admin-2 dashboard</a> template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>:</p><figure class="wp-block-image size-full"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/61_dashboard.png" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><h2 class="wp-block-heading">Download required files</h2><p>Bootstrap templates consist of at least 3 different types of files</p><ul class="wp-block-list"><li>main index.html page, responsible for collection all elements and set up your page</li><li>CSS files defining the style of your page</li><li>JavaScript files, containing needed frameworks and code</li></ul><p>So, first start by downloading the sample template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>. Be sure, you start in our project root folder:</p><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="">❯ cd $DASHBOARD_ROOT</pre><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="">❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 </pre><p>Next, find out, what we need for our template in addition to the file <kbd>index.html</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)="</pre><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script></pre><p>That’s a lot of additional files.</p><p>To keep the file structure consistent, these files should be stored under the <kbd>dashboard/static</kbd> folder (same as the bootstrap files before).</p><p>To achieve this, there are <gwmw class="ginger-module-highlighter-mistake-type-2" id="gwmw-15824469384628631344488">two possi</gwmw>bilities:</p><ul class="wp-block-list"><li>Create desired folder and copy each of the source files to the destination folder</li><li><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824469457060378385283">Copy</gwmw> the complete static folder from the <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap">Github Repository</a> for this post.</li></ul><p>We use the second option to keep the focus on creating our dashboard.<gwmw style="display:none;"></gwmw></p><p>So, first, clone the repository:</p><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="">cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap</pre><p>Then, copy the requred files</p><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="">cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard</pre><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 -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard</pre><p>Having everything needed for the dashboard template, the next step is to modify the front-end template</p><p>File <code>dashboard/apps/frontend/templates/frontend/index.html</code></p> <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="">{ { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div></pre></pre></div></div></div></div></article><footer class="site-footer"><div class="container"><div class="row footer-sidebar"><div class="col-lg-3 col-md-6 col-sm-12"><aside id="categories-1" class="widget widget_categories wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Categories</h4><form action="https://via-internet.de/blog" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name="cat" id="cat" class="postform"><option value="-1">Select Category</option><option class="level-0" value="2">3D Printing (1)</option><option class="level-0" value="168">AI (3)</option><option class="level-0" value="1">Allgemein (32)</option><option class="level-0" value="151">Anaconda (1)</option><option class="level-0" value="4">Apache (3)</option><option class="level-0" value="5">Apache Spark (3)</option><option class="level-0" value="6">Apache Zeppelin (1)</option><option class="level-0" value="7">Arduino (1)</option><option class="level-0" value="160">Astro (3)</option><option class="level-0" value="9">Azure (7)</option><option class="level-1" value="20"> Databricks (4)</option><option class="level-1" value="87"> Widgets (1)</option><option class="level-0" value="158">BeautifulSoup (1)</option><option class="level-0" value="10">Bootstrap (6)</option><option class="level-0" value="12">Capacitor (1)</option><option class="level-0" value="13">CI/CD (3)</option><option class="level-1" value="40"> Jenkins (3)</option><option class="level-0" value="153">Container (9)</option><option class="level-1" value="22"> Docker (8)</option><option class="level-2" value="43"> Kubernetes (2)</option><option class="level-1" value="154"> Podman (1)</option><option class="level-0" value="16">Cookbook (30)</option><option class="level-0" value="17">CSS (3)</option><option class="level-0" value="135">Daily (6)</option><option class="level-0" value="144">Dart (1)</option><option class="level-0" value="18">Data Science (1)</option><option class="level-0" value="19">Database (2)</option><option class="level-1" value="50"> MySQL (1)</option><option class="level-1" value="58"> PostgreSQL (1)</option><option class="level-0" value="96">FastAPI (1)</option><option class="level-0" value="27">Generell (1)</option><option class="level-0" value="28">Git und Github (6)</option><option class="level-0" value="157">Grafana (1)</option><option class="level-0" value="31">Hadoop (1)</option><option class="level-0" value="163">Hexo (1)</option><option class="level-0" value="33">Homebrew (1)</option><option class="level-0" value="165">HyperDiv (1)</option><option class="level-0" value="34">Ionic 3 (5)</option><option class="level-0" value="35">Ionic 4 (9)</option><option class="level-0" value="39">Jekyll (1)</option><option class="level-0" value="41">Jupyter (2)</option><option class="level-0" value="42">Keycloak (3)</option><option class="level-0" value="137">Languages (60)</option><option class="level-1" value="14"> ClojureScript (1)</option><option class="level-1" value="15"> Cobol (1)</option><option class="level-1" value="24"> Erlang (2)</option><option class="level-2" value="94"> Elixir (2)</option><option class="level-1" value="149"> F# (2)</option><option class="level-1" value="29"> Go (1)</option><option class="level-1" value="30"> Groovy (1)</option><option class="level-1" value="32"> Haskell (3)</option><option class="level-1" value="36"> iPython (1)</option><option class="level-1" value="37"> Java (5)</option><option class="level-1" value="38"> Javascript (7)</option><option class="level-1" value="56"> Perl (1)</option><option class="level-1" value="57"> PHP (13)</option><option class="level-1" value="63"> PureScript (1)</option><option class="level-1" value="65"> Python (19)</option><option class="level-2" value="141"> PIP (1)</option><option class="level-1" value="68"> Rust (3)</option><option class="level-1" value="75"> Swift (1)</option><option class="level-0" value="99">Laravel (16)</option><option class="level-0" value="44">Learning (5)</option><option class="level-0" value="45">Linux (1)</option><option class="level-0" value="46">macOS (1)</option><option class="level-0" value="47">matter.js (1)</option><option class="level-0" value="48">Maven (1)</option><option class="level-0" value="49">Mobile Development (9)</option><option class="level-0" value="51">NestJS (1)</option><option class="level-0" value="156">Nicepage (1)</option><option class="level-0" value="52">Node.js (2)</option><option class="level-0" value="53">Office 365 (2)</option><option class="level-1" value="95"> Excel (1)</option><option class="level-1" value="81"> VBA (1)</option><option class="level-1" value="88"> Word (1)</option><option class="level-0" value="164">Ollama (4)</option><option class="level-0" value="54">OpenSCAD (1)</option><option class="level-0" value="159">Power Apps (1)</option><option class="level-0" value="59">Power BI (4)</option><option class="level-0" value="146">Power BI Visuals (3)</option><option class="level-0" value="61">Power Query (3)</option><option class="level-0" value="62">Protractor (1)</option><option class="level-0" value="64">PySpark (2)</option><option class="level-0" value="69">rxjs (2)</option><option class="level-0" value="70">SAS (3)</option><option class="level-0" value="71">Selenium (1)</option><option class="level-0" value="72">Shell (10)</option><option class="level-1" value="92"> Bash (1)</option><option class="level-1" value="102"> Power Shell (8)</option><option class="level-0" value="73">Smalltalk (1)</option><option class="level-0" value="74">Spring Boot (2)</option><option class="level-0" value="166">Static-Site-Generator (1)</option><option class="level-1" value="167"> Hugo (1)</option><option class="level-0" value="76">TDD (1)</option><option class="level-1" value="77"> Testing / Unittests (1)</option><option class="level-0" value="145">Troubleshooting (3)</option><option class="level-0" value="126">Tutorial (1)</option><option class="level-0" value="78">Ubuntu (1)</option><option class="level-0" value="79">Uncategorized (7)</option><option class="level-0" value="129">Unix (1)</option><option class="level-0" value="80">Vagrant (1)</option><option class="level-0" value="82">Virtual Machine (2)</option><option class="level-0" value="83">Virtualbox (2)</option><option class="level-0" value="84">Visual Studio Code (4)</option><option class="level-0" value="85">Visualisation (3)</option><option class="level-1" value="93"> D3.js (2)</option><option class="level-1" value="100"> p5.js (1)</option><option class="level-0" value="86">Web Framework (40)</option><option class="level-1" value="90"> Angular (10)</option><option class="level-1" value="91"> AngularJS (1)</option><option class="level-1" value="21"> Django (5)</option><option class="level-1" value="97"> Flask (1)</option><option class="level-1" value="26"> Flutter (6)</option><option class="level-1" value="98"> Ionic (13)</option><option class="level-1" value="66"> React (3)</option><option class="level-1" value="148"> React Native (1)</option><option class="level-1" value="67"> ReactJS (3)</option><option class="level-1" value="103"> VUE (2)</option><option class="level-0" value="143">Windows Subsystem for Linux (1)</option><option class="level-0" value="89">Wordpress (2)</option><option class="level-0" value="155">XAMPP (1)</option> </select></form><script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJjYXQiICk7CglmdW5jdGlvbiBvbkNhdENoYW5nZSgpIHsKCQlpZiAoIGRyb3Bkb3duLm9wdGlvbnNbIGRyb3Bkb3duLnNlbGVjdGVkSW5kZXggXS52YWx1ZSA+IDAgKSB7CgkJCWRyb3Bkb3duLnBhcmVudE5vZGUuc3VibWl0KCk7CgkJfQoJfQoJZHJvcGRvd24ub25jaGFuZ2UgPSBvbkNhdENoYW5nZTsKfSkoKTsKCi8qIF1dPiAqLwo="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="archives-1" class="widget widget_archive wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Archives</h4> <label class="screen-reader-text" for="archives-dropdown-1">Archives</label> <select id="archives-dropdown-1" name="archive-dropdown"><option value="">Select Month</option><option value="https://via-internet.de/blog/2024/11/"> November 2024</option><option value="https://via-internet.de/blog/2024/10/"> October 2024</option><option value="https://via-internet.de/blog/2024/09/"> September 2024</option><option value="https://via-internet.de/blog/2024/07/"> July 2024</option><option value="https://via-internet.de/blog/2024/05/"> May 2024</option><option value="https://via-internet.de/blog/2024/04/"> April 2024</option><option value="https://via-internet.de/blog/2024/03/"> March 2024</option><option value="https://via-internet.de/blog/2024/01/"> January 2024</option><option value="https://via-internet.de/blog/2023/12/"> December 2023</option><option value="https://via-internet.de/blog/2023/11/"> November 2023</option><option value="https://via-internet.de/blog/2023/10/"> October 2023</option><option value="https://via-internet.de/blog/2023/09/"> September 2023</option><option value="https://via-internet.de/blog/2023/08/"> August 2023</option><option value="https://via-internet.de/blog/2023/07/"> July 2023</option><option value="https://via-internet.de/blog/2023/04/"> April 2023</option><option value="https://via-internet.de/blog/2023/03/"> March 2023</option><option value="https://via-internet.de/blog/2023/02/"> February 2023</option><option value="https://via-internet.de/blog/2022/11/"> November 2022</option><option value="https://via-internet.de/blog/2022/10/"> October 2022</option><option value="https://via-internet.de/blog/2022/07/"> July 2022</option><option value="https://via-internet.de/blog/2022/06/"> June 2022</option><option value="https://via-internet.de/blog/2022/05/"> May 2022</option><option value="https://via-internet.de/blog/2022/04/"> April 2022</option><option value="https://via-internet.de/blog/2022/03/"> March 2022</option><option value="https://via-internet.de/blog/2022/01/"> January 2022</option><option value="https://via-internet.de/blog/2021/12/"> December 2021</option><option value="https://via-internet.de/blog/2021/11/"> November 2021</option><option value="https://via-internet.de/blog/2021/10/"> October 2021</option><option value="https://via-internet.de/blog/2021/08/"> August 2021</option><option value="https://via-internet.de/blog/2021/07/"> July 2021</option><option value="https://via-internet.de/blog/2021/06/"> June 2021</option><option value="https://via-internet.de/blog/2021/05/"> May 2021</option><option value="https://via-internet.de/blog/2021/02/"> February 2021</option><option value="https://via-internet.de/blog/2021/01/"> January 2021</option><option value="https://via-internet.de/blog/2020/12/"> December 2020</option><option value="https://via-internet.de/blog/2020/11/"> November 2020</option><option value="https://via-internet.de/blog/2020/10/"> October 2020</option><option value="https://via-internet.de/blog/2020/09/"> September 2020</option><option value="https://via-internet.de/blog/2020/08/"> August 2020</option><option value="https://via-internet.de/blog/2020/07/"> July 2020</option><option value="https://via-internet.de/blog/2020/06/"> June 2020</option><option value="https://via-internet.de/blog/2020/05/"> May 2020</option><option value="https://via-internet.de/blog/2020/04/"> April 2020</option><option value="https://via-internet.de/blog/2020/03/"> March 2020</option><option value="https://via-internet.de/blog/2020/02/" selected="selected"> February 2020</option><option value="https://via-internet.de/blog/2020/01/"> January 2020</option><option value="https://via-internet.de/blog/2019/12/"> December 2019</option><option value="https://via-internet.de/blog/2019/09/"> September 2019</option><option value="https://via-internet.de/blog/2019/08/"> August 2019</option><option value="https://via-internet.de/blog/2019/07/"> July 2019</option><option value="https://via-internet.de/blog/2019/06/"> June 2019</option><option value="https://via-internet.de/blog/2019/05/"> May 2019</option><option value="https://via-internet.de/blog/2019/04/"> April 2019</option><option value="https://via-internet.de/blog/2019/03/"> March 2019</option><option value="https://via-internet.de/blog/2019/02/"> February 2019</option><option value="https://via-internet.de/blog/2019/01/"> January 2019</option><option value="https://via-internet.de/blog/2018/12/"> December 2018</option><option value="https://via-internet.de/blog/2018/11/"> November 2018</option><option value="https://via-internet.de/blog/2018/09/"> September 2018</option><option value="https://via-internet.de/blog/2018/08/"> August 2018</option><option value="https://via-internet.de/blog/2018/07/"> July 2018</option><option value="https://via-internet.de/blog/2018/03/"> March 2018</option><option value="https://via-internet.de/blog/2018/02/"> February 2018</option><option value="https://via-internet.de/blog/2018/01/"> January 2018</option><option value="https://via-internet.de/blog/2017/12/"> December 2017</option><option value="https://via-internet.de/blog/2017/07/"> July 2017</option><option value="https://via-internet.de/blog/2017/05/"> May 2017</option><option value="https://via-internet.de/blog/2017/03/"> March 2017</option><option value="https://via-internet.de/blog/2017/02/"> February 2017</option><option value="https://via-internet.de/blog/2016/12/"> December 2016</option><option value="https://via-internet.de/blog/2016/11/"> November 2016</option><option value="https://via-internet.de/blog/2016/10/"> October 2016</option> </select> <script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJhcmNoaXZlcy1kcm9wZG93bi0xIiApOwoJZnVuY3Rpb24gb25TZWxlY3RDaGFuZ2UoKSB7CgkJaWYgKCBkcm9wZG93bi5vcHRpb25zWyBkcm9wZG93bi5zZWxlY3RlZEluZGV4IF0udmFsdWUgIT09ICcnICkgewoJCQlkb2N1bWVudC5sb2NhdGlvbi5ocmVmID0gdGhpcy5vcHRpb25zWyB0aGlzLnNlbGVjdGVkSW5kZXggXS52YWx1ZTsKCQl9Cgl9Cglkcm9wZG93bi5vbmNoYW5nZSA9IG9uU2VsZWN0Q2hhbmdlOwp9KSgpOwoKLyogXV0+ICovCg=="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="search-1" class="widget widget_search wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Search</h4><form method="get" id="searchform" class="input-group" action="https://via-internet.de/blog/"> <input type="text" class="form-control" placeholder="Search" name="s" id="s"><div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button></div></form></aside></div></div></div><div class="site-info text-center"> Copyright © 2024 | Powered by <a href="//wordpress.org/">WordPress</a> <span class="sep"> | </span> Aasta Blog theme by <a target="_blank" href="//themearile.com/">ThemeArile</a></div></footer><div class="page-scroll-up"><a href="#totop"><i class="fa fa-angle-up"></i></a></div><div id="cookie-law-info-bar" data-nosnippet="true" data-cli-style="cli-style-v2" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: inherit; bottom: 0px; position: fixed;"><span><div class="cli-bar-container cli-style-v2"><div class="cli-bar-message">We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.</div><div class="cli-bar-btn_container"><a role="button" class="medium cli-plugin-button cli-plugin-main-button cli_settings_button" style="margin: 0px 5px 0px 0px; color: rgb(51, 51, 51); background-color: rgb(222, 223, 224);">Cookie Settings</a><a id="wt-cli-accept-all-btn" role="button" data-cli_action="accept_all" class="wt-cli-element medium cli-plugin-button wt-cli-accept-all-btn cookie_action_close_header cli_action_button" style="color: rgb(255, 255, 255); background-color: rgb(97, 162, 41);">Accept All</a></div></div></span></div><div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); position: fixed; font-family: inherit; width: auto; bottom: 0px; right: 100px; display: none;"><span id="cookie_hdr_showagain">Manage consent</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true"><div class="cli-modal-dialog" role="document"><div class="cli-modal-content cli-bar-popup"> <button type="button" class="cli-modal-close" id="cliModalClose"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg> <span class="wt-cli-sr-only">Close</span> </button><div class="cli-modal-body"><div class="cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-privacy-overview"><h4>Privacy Overview</h4><div class="cli-privacy-content"><div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ...</div></div> <a class="cli-privacy-readmore" aria-label="Show more" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a></div></div><div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container"><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab"> Necessary </a><div class="wt-cli-necessary-checkbox"> <input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked"> <label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label></div> <span class="cli-necessary-caption">Always Enabled</span></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="necessary"><div class="wt-cli-cookie-description"> Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.<table class="cookielawinfo-row-cat-table cookielawinfo-winter"><thead><tr><th class="cookielawinfo-column-1">Cookie</th><th class="cookielawinfo-column-3">Duration</th><th class="cookielawinfo-column-4">Description</th></tr></thead><tbody><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-analytics</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-functional</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-necessary</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-others</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-performance</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">viewed_cookie_policy</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.</td></tr></tbody></table></div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="functional" data-toggle="cli-toggle-tab"> Functional </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-functional" class="cli-user-preference-checkbox" data-id="checkbox-functional"> <label for="wt-cli-checkbox-functional" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Functional</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="functional"><div class="wt-cli-cookie-description"> Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="performance" data-toggle="cli-toggle-tab"> Performance </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-performance" class="cli-user-preference-checkbox" data-id="checkbox-performance"> <label for="wt-cli-checkbox-performance" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Performance</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="performance"><div class="wt-cli-cookie-description"> Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="analytics" data-toggle="cli-toggle-tab"> Analytics </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-analytics" class="cli-user-preference-checkbox" data-id="checkbox-analytics"> <label for="wt-cli-checkbox-analytics" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Analytics</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="analytics"><div class="wt-cli-cookie-description"> Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="advertisement" data-toggle="cli-toggle-tab"> Advertisement </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-advertisement" class="cli-user-preference-checkbox" data-id="checkbox-advertisement"> <label for="wt-cli-checkbox-advertisement" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Advertisement</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="advertisement"><div class="wt-cli-cookie-description"> Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="others" data-toggle="cli-toggle-tab"> Others </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-others" class="cli-user-preference-checkbox" data-id="checkbox-others"> <label for="wt-cli-checkbox-others" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Others</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="others"><div class="wt-cli-cookie-description"> Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.</div></div></div></div></div></div></div></div><div class="cli-modal-footer"><div class="wt-cli-element cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-tab-footer wt-cli-privacy-overview-actions"> <a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a></div></div></div></div></div></div></div></div><div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div><div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div> <script defer="" src="data:text/javascript;base64,DQogICAgICAgICAgICBmdW5jdGlvbiBfa2F0ZXhSZW5kZXIocm9vdEVsZW1lbnQpIHsNCiAgICAgICAgICAgICAgICBjb25zdCBlbGVzID0gcm9vdEVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgiLmthdGV4LWVxOm5vdCgua2F0ZXgtcmVuZGVyZWQpIik7DQogICAgICAgICAgICAgICAgZm9yKGxldCBpZHg9MDsgaWR4IDwgZWxlcy5sZW5ndGg7IGlkeCsrKSB7DQogICAgICAgICAgICAgICAgICAgIGNvbnN0IGVsZSA9IGVsZXNbaWR4XTsNCiAgICAgICAgICAgICAgICAgICAgZWxlLmNsYXNzTGlzdC5hZGQoImthdGV4LXJlbmRlcmVkIik7DQogICAgICAgICAgICAgICAgICAgIHRyeSB7DQogICAgICAgICAgICAgICAgICAgICAgICBrYXRleC5yZW5kZXIoDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxlLnRleHRDb250ZW50LA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZSwNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXlNb2RlOiBlbGUuZ2V0QXR0cmlidXRlKCJkYXRhLWthdGV4LWRpc3BsYXkiKSA9PT0gJ3RydWUnLA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aHJvd09uRXJyb3I6IGZhbHNlDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgKTsNCiAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChuKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUuc3R5bGUuY29sb3I9InJlZCI7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUudGV4dENvbnRlbnQgPSBuLm1lc3NhZ2U7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGZ1bmN0aW9uIGthdGV4UmVuZGVyKCkgew0KICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihkb2N1bWVudCk7DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoIkRPTUNvbnRlbnRMb2FkZWQiLCBmdW5jdGlvbigpIHsNCiAgICAgICAgICAgICAgICBrYXRleFJlbmRlcigpOw0KDQogICAgICAgICAgICAgICAgLy8gUGVyZm9ybSBhIEthVGVYIHJlbmRlcmluZyBzdGVwIHdoZW4gdGhlIERPTSBpcyBtdXRhdGVkLg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcihmdW5jdGlvbihtdXRhdGlvbnMpIHsNCiAgICAgICAgICAgICAgICAgICAgW10uZm9yRWFjaC5jYWxsKG11dGF0aW9ucywgZnVuY3Rpb24obXV0YXRpb24pIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmIChtdXRhdGlvbi50YXJnZXQgJiYgbXV0YXRpb24udGFyZ2V0IGluc3RhbmNlb2YgRWxlbWVudCkgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihtdXRhdGlvbi50YXJnZXQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgICAgICB9KTsNCg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2YXRpb25Db25maWcgPSB7DQogICAgICAgICAgICAgICAgICAgIHN1YnRyZWU6IHRydWUsDQogICAgICAgICAgICAgICAgICAgIGNoaWxkTGlzdDogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgY2hhcmFjdGVyRGF0YTogdHJ1ZQ0KICAgICAgICAgICAgICAgIH07DQoNCiAgICAgICAgICAgICAgICBrYXRleE9ic2VydmVyLm9ic2VydmUoZG9jdW1lbnQuYm9keSwga2F0ZXhPYnNlcnZhdGlvbkNvbmZpZyk7DQogICAgICAgICAgICB9KTsNCg0KICAgICAgICA="></script> <style type="text/css">.theme-testimonial { background-image: url(https://via-internet.de/blog/wp-content/themes/aasta-blog/assets/img/theme-bg.jpg); background-size: cover; background-position: center center; }</style> <script defer="" src="data:text/javascript;base64,CgkvLyBUaGlzIEpTIGFkZGVkIGZvciB0aGUgVG9nZ2xlIGJ1dHRvbiB0byB3b3JrIHdpdGggdGhlIGZvY3VzIGVsZW1lbnQuCgkJaWYgKHdpbmRvdy5pbm5lcldpZHRoIDwgOTkyKSB7CgkJCWRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBmdW5jdGlvbihlKSB7CgkJCWxldCBpc1RhYlByZXNzZWQgPSBlLmtleSA9PT0gJ1RhYicgfHwgZS5rZXlDb2RlID09PSA5OwoJCQkJaWYgKCFpc1RhYlByZXNzZWQpIHsKCQkJCQlyZXR1cm47CgkJCQl9CgkJCQkKCQkJY29uc3QgIGZvY3VzYWJsZUVsZW1lbnRzID0KCQkJCSdidXR0b24sIFtocmVmXSwgaW5wdXQsIHNlbGVjdCwgdGV4dGFyZWEsIFt0YWJpbmRleF06bm90KFt0YWJpbmRleD0iLTEiXSknOwoJCQljb25zdCBtb2RhbCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5uYXZiYXIubmF2YmFyLWV4cGFuZC1sZycpOyAvLyBzZWxlY3QgdGhlIG1vZGFsIGJ5IGl0J3MgaWQKCgkJCWNvbnN0IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCA9IG1vZGFsLnF1ZXJ5U2VsZWN0b3JBbGwoZm9jdXNhYmxlRWxlbWVudHMpWzBdOyAvLyBnZXQgZmlyc3QgZWxlbWVudCB0byBiZSBmb2N1c2VkIGluc2lkZSBtb2RhbAoJCQljb25zdCBmb2N1c2FibGVDb250ZW50ID0gbW9kYWwucXVlcnlTZWxlY3RvckFsbChmb2N1c2FibGVFbGVtZW50cyk7CgkJCWNvbnN0IGxhc3RGb2N1c2FibGVFbGVtZW50ID0gZm9jdXNhYmxlQ29udGVudFtmb2N1c2FibGVDb250ZW50Lmxlbmd0aCAtIDFdOyAvLyBnZXQgbGFzdCBlbGVtZW50IHRvIGJlIGZvY3VzZWQgaW5zaWRlIG1vZGFsCgoJCQkgIGlmIChlLnNoaWZ0S2V5KSB7IC8vIGlmIHNoaWZ0IGtleSBwcmVzc2VkIGZvciBzaGlmdCArIHRhYiBjb21iaW5hdGlvbgoJCQkJaWYgKGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQgPT09IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCkgewoJCQkJICBsYXN0Rm9jdXNhYmxlRWxlbWVudC5mb2N1cygpOyAvLyBhZGQgZm9jdXMgZm9yIHRoZSBsYXN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsKCQkJCX0KCQkJICB9IGVsc2UgeyAvLyBpZiB0YWIga2V5IGlzIHByZXNzZWQKCQkJCWlmIChkb2N1bWVudC5hY3RpdmVFbGVtZW50ID09PSBsYXN0Rm9jdXNhYmxlRWxlbWVudCkgeyAvLyBpZiBmb2N1c2VkIGhhcyByZWFjaGVkIHRvIGxhc3QgZm9jdXNhYmxlIGVsZW1lbnQgdGhlbiBmb2N1cyBmaXJzdCBmb2N1c2FibGUgZWxlbWVudCBhZnRlciBwcmVzc2luZyB0YWIKCQkJCSAgZmlyc3RGb2N1c2FibGVFbGVtZW50LmZvY3VzKCk7IC8vIGFkZCBmb2N1cyBmb3IgdGhlIGZpcnN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsJCQkgIAoJCQkJfQoJCQkgIH0KCgkJCX0pOwoJCX0K"></script> <script defer="" src="data:text/javascript;base64,CiAgICAgICAgbmV3Q29udGFpbmVyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3BhbicpOwogICAgICAgIG5ld0NvbnRhaW5lci5zdHlsZS5zZXRQcm9wZXJ0eSgnZGlzcGxheScsJ25vbmUnLCcnKTsKICAgICAgICBuZXdOb2RlICAgICAgICAgICA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NjcmlwdCcpOwogICAgICAgIG5ld05vZGUudHlwZSAgICAgID0gJ21hdGgvdGV4JzsKICAgICAgICBuZXdOb2RlLmlubmVySFRNTCA9ICdcXG5ld2NvbW1hbmR7XFxlcHN9e1xcdmFyZXBzaWxvbn1cblxcbmV3Y29tbWFuZHtcXFJSfXtcXG1hdGhiYntSfX1cblxcbmV3Y29tbWFuZHtcXHJkfXtcXG9wZXJhdG9ybmFtZXtkfX1cblxcbmV3Y29tbWFuZHtcXHNldH1bMV17XFxsZWZ0XFx7IzFcXHJpZ2h0XFx9fSc7CiAgICAgICAgbmV3Q29udGFpbmVyLmFwcGVuZENoaWxkKG5ld05vZGUpOwogICAgICAgIGRvY3VtZW50LmJvZHkuaW5zZXJ0QmVmb3JlKG5ld0NvbnRhaW5lcixkb2N1bWVudC5ib2R5LmZpcnN0Q2hpbGQpOwogICAgICAgIA=="></script> <script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], displayMath: [['$$', '$$'], ["\\[", "\\]"]], processEscapes: true }, TeX: { equationNumbers: {autoNumber: "AMS", useLabelIds: true} }, });</script> <link rel="stylesheet" id="cookie-law-info-table-css" href="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_26b4f0c3c1bcf76291fa4952fb7f04fb.php?ver=3.2.8" type="text/css" media="all"> <script defer="" id="toc-front-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgdG9jcGx1cyA9IHsidmlzaWJpbGl0eV9zaG93IjoiQW56ZWlnZW4iLCJ2aXNpYmlsaXR5X2hpZGUiOiJBdXNibGVuZGVuIiwidmlzaWJpbGl0eV9oaWRlX2J5X2RlZmF1bHQiOiIxIiwid2lkdGgiOiJBdXRvIn07Ci8qIF1dPiAqLwo="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_93d421fd7576b0ca9c359ffe2fa16113.php?ver=20151215" id="aasta-skip-link-focus-fix-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.7.2" id="katex-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=UnpSS38vU0joHj5" id="enlighterjs-js"></script> <script defer="" id="enlighterjs-js-after" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwohZnVuY3Rpb24oZSxuKXtpZigidW5kZWZpbmVkIiE9dHlwZW9mIEVubGlnaHRlckpTKXt2YXIgbz17InNlbGVjdG9ycyI6eyJibG9jayI6InByZS5FbmxpZ2h0ZXJKU1JBVyIsImlubGluZSI6ImNvZGUuRW5saWdodGVySlNSQVcifSwib3B0aW9ucyI6eyJpbmRlbnQiOjQsImFtcGVyc2FuZENsZWFudXAiOnRydWUsImxpbmVob3ZlciI6dHJ1ZSwicmF3Y29kZURiY2xpY2siOnRydWUsInRleHRPdmVyZmxvdyI6ImJyZWFrIiwibGluZW51bWJlcnMiOmZhbHNlLCJ0aGVtZSI6ImNsYXNzaWMiLCJsYW5ndWFnZSI6ImdlbmVyaWMiLCJyZXRhaW5Dc3NDbGFzc2VzIjpmYWxzZSwiY29sbGFwc2UiOmZhbHNlLCJ0b29sYmFyT3V0ZXIiOiIiLCJ0b29sYmFyVG9wIjoie0JUTl9SQVd9e0JUTl9DT1BZfXtCVE5fV0lORE9XfXtCVE5fV0VCU0lURX0iLCJ0b29sYmFyQm90dG9tIjoiIn19OyhlLkVubGlnaHRlckpTSU5JVD1mdW5jdGlvbigpe0VubGlnaHRlckpTLmluaXQoby5zZWxlY3RvcnMuYmxvY2ssby5zZWxlY3RvcnMuaW5saW5lLG8ub3B0aW9ucyl9KSgpfWVsc2V7KG4mJihuLmVycm9yfHxuLmxvZyl8fGZ1bmN0aW9uKCl7fSkoIkVycm9yOiBFbmxpZ2h0ZXJKUyByZXNvdXJjZXMgbm90IGxvYWRlZCB5ZXQhIil9fSh3aW5kb3csY29uc29sZSk7Ci8qIF1dPiAqLwo="></script> <script type="text/javascript" id="jetpack-stats-js-before">_stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"195943667\",\"post\":\"0\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]); _stq.push([ "clickTrackerInit", "195943667", "0" ]);</script> <script type="text/javascript" src="https://stats.wp.com/e-202510.js" id="jetpack-stats-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="gt_widget_script_62673750-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['62673750'] = {"default_language":"de","languages":["de","en","fr","zh-CN","nl","it","es","da","pt"],"url_structure":"none","native_language_names":1,"flag_style":"2d","flag_size":24,"wrapper_selector":"#gtranslate_menu_wrapper_37060","alt_flags":[],"switcher_open_direction":"top","switcher_horizontal_position":"inline","switcher_text_color":"#666","switcher_arrow_color":"#666","switcher_border_color":"#ccc","switcher_background_color":"#fff","switcher_background_shadow_color":"#efefef","switcher_background_hover_color":"#fff","dropdown_text_color":"#000","dropdown_hover_color":"#fff","dropdown_background_color":"#eee","flags_location":"\/blog\/wp-content\/plugins\/gtranslate\/flags\/"};</script><script src="https://via-internet.de/blog/wp-content/plugins/gtranslate/js/dwf.js?ver=6.7.2" data-no-optimize="1" data-no-minify="1" data-gt-orig-url="/blog/2020/02/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="62673750" defer=""></script><script defer="" id="wpcd-scripts-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgd3BjZGFqYXggPSB7ImFqYXh1cmwiOiJodHRwczpcL1wvdmlhLWludGVybmV0LmRlXC9ibG9nXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAifTsKLyogXV0+ICovCg=="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_231b95969d2321feeaab8fdd8121442a.php" id="wpcd-scripts-js"></script> <script defer="" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js&ver=2.7.5" id="mathjax-js"></script> <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async="" src="https://via-internet.de/blog/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js"></script> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Page Caching using Disk: Enhanced Lazy Loading Database Caching 2/163 queries in 0.254 seconds using Disk Served from: via-internet.de @ 2025-03-08 07:08:06 by W3 Total Cache --></pre></pre></pre></pre></pre> { { { <h1 style="text-align: center">CARDS</h1> { dashboard/apps/components/cards/templates/buttons/base.html Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter { { { <h1 style="text-align: center">BUTTONS</h1> { <p>Save everything and view at the resulting page</p> <figure class="wp-block-image size-large"><img decoding="async" width="1444" height="808" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201444%20808'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_54_navigation_1.png?fit=700%2C392&ssl=1" alt="" class="wp-image-6056 lazy" data-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" data-sizes="auto, (max-width: 1444px) 100vw, 1444px"></figure> <p>What happens, from showing the page, clicking on the link until you see the final result:</p> <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> <figure class="wp-block-image size-large"><img decoding="async" width="1472" height="849" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201472%20849'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_54_navigation_2.png?fit=700%2C404&ssl=1" alt="" class="wp-image-6057 lazy" data-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" data-sizes="auto, (max-width: 1472px) 100vw, 1472px"></figure> <h2 class="wp-block-heading">Namespaces and structure</h2> <p>Now, think about the names, e. g. buttons and cards in our Components.</p> <p>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> <p>So, you will have to additional files, for example</p> <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> <p>The corresponding url mapping (<code>urls.py</code>) could look like this:</p> <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 import dashboard.apps.utilities.info.views as UtilitiesInfoViews urlpatterns = [ path('', include('dashboard.apps.urls')), path('info', ComponentInfoViews.IndexView.as_view(), name='info'), path('info', UtilitiesInfoViews.IndexView.as_view(), name='info'),</pre><p>Two pages with the same name (<code>info</code>) in different <code>views.py</code>!</p><p>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><p>We will choose a more modern way of programming</p><ul class="wp-block-list"><li>Spread the responsibility over separate, independent modules</li><li>Name these modules with different names</li></ul><p>What does this mean? We will have</p><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><h2 class="wp-block-heading">Resulting folder structure and file content</h2><p>File <code>dashbard/urls.py</code></p><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 = [ path('', include('dashboard.apps.urls')), path('admin/', admin.site.urls), ]</pre><p>File <code>dashbard/apps/urls.py</code></p><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 from django.urls.conf import include from dashboard.apps.frontend.views import IndexView app_name = 'app' urlpatterns = [ path('', IndexView.as_view(), name='index'), path('pages/', include('dashboard.apps.pages.urls')), path('components/', include('dashboard.apps.components.urls')), path('utilities/', include('dashboard.apps.utilities.urls')), ] </pre><p>File <code>dashbard/apps/components/urls.py</code></p><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 import dashboard.apps.components.buttons.views as ButtonsViews import dashboard.apps.components.cards.views as CardsViews app_name = 'components' urlpatterns = [ path('', ButtonsViews.IndexView.as_view(), name='index'), path('buttons/', ButtonsViews.IndexView.as_view(), name='buttons'), path('cards/', CardsViews.IndexView.as_view(), name='cards'), ] </pre><p>File <code>dashbard/apps/utilities/urls.py</code></p><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 import dashboard.apps.utilities.colors.views as ColorsViews import dashboard.apps.utilities.borders.views as BordersViews import dashboard.apps.utilities.animations.views as AnimationsViews import dashboard.apps.utilities.others.views as OthersViews app_name = 'utilities' urlpatterns = [ path('', BordersViews.IndexView.as_view(), name='index'), path('animations/', AnimationsViews.IndexView.as_view(), name='animations'), path('borders/', BordersViews.IndexView.as_view(), name='borders'), path('colors/', ColorsViews.IndexView.as_view(), name='colors'), path('others/', OthersViews.IndexView.as_view(), name='others'), ] </pre><p>File <code>dashbard/apps/pages/urls.py</code></p><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 import dashboard.apps.pages.blank.views as BlankViews import dashboard.apps.pages.login.views as LoginViews import dashboard.apps.pages.pagenotfound.views as PageNotFoundViews import dashboard.apps.pages.password.views as PasswordViews import dashboard.apps.pages.register.views as RegisterViews import dashboard.apps.pages.charts.views as ChartsViews import dashboard.apps.pages.tables.views as TablesViews app_name = 'pages' urlpatterns = [ path('', ChartsViews.IndexView.as_view(), name='index'), path('blank', BlankViews.IndexView.as_view(), name='blank'), path('charts', ChartsViews.IndexView.as_view(), name='charts'), path('login', LoginViews.IndexView.as_view(), name='login'), path('pagenotfound', PageNotFoundViews.IndexView.as_view(), name='pagenotfound'), path('password', PasswordViews.IndexView.as_view(), name='password'), path('register', RegisterViews.IndexView.as_view(), name='register'), path('tables', TablesViews.IndexView.as_view(), name='tables'), ] </pre><h3 class="wp-block-heading">Let’s finally check the namespace structure:</h3><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 ./dashboard/urls.py ./dashboard/apps/utilities/urls.py ./dashboard/apps/components/urls.py ./dashboard/apps/urls.py ./dashboard/apps/pages/urls.py</pre><p>We create three levels for our namespaces:</p><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>–</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><p>These namespaces must be used in the template files, for example:</p><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=""><a href="{ <a href="{ <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=""><a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <p>Install the Django Extensions for additional commands:</p> <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><p>Add Django Extensions to the INSTALLED_APPS</p><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 = [ ... 'django_extensions' ]</pre><p>Show URLs and Namespaces (only for out apps, admin urls are removed)</p><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><figure class="wp-block-image size-large"><img decoding="async" width="1676" height="449" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201676%20449'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_55_namespaces.png?fit=700%2C188&ssl=1" alt="" class="wp-image-6078 lazy" data-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" data-sizes="auto, (max-width: 1676px) 100vw, 1676px"></figure><h2 class="wp-block-heading">Preparing required components and pages</h2><p>In summary, these are the steps to create the desired folder structure:</p><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 mkdir -p dashboard/apps/components/cards/templates/cards mkdir -p dashboard/apps/pages/blank/templates/blank mkdir -p dashboard/apps/pages/charts/templates/charts mkdir -p dashboard/apps/pages/login/templates/login mkdir -p dashboard/apps/pages/pagenotfound/templates/pagenotfound mkdir -p dashboard/apps/pages/password/templates/password mkdir -p dashboard/apps/pages/register/templates/register mkdir -p dashboard/apps/pages/tables/templates/tables mkdir -p dashboard/apps/utilities/animations/templates/animations mkdir -p dashboard/apps/utilities/borders/templates/borders mkdir -p dashboard/apps/utilities/colors/templates/colors mkdir -p dashboard/apps/utilities/others/templates/others</pre><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 python3 manage.py startapp cards dashboard/apps/components/cards python3 manage.py startapp blank dashboard/apps/pages/blank python3 manage.py startapp charts dashboard/apps/pages/charts python3 manage.py startapp login dashboard/apps/pages/login python3 manage.py startapp pagenotfound dashboard/apps/pages/pagenotfound python3 manage.py startapp password dashboard/apps/pages/password python3 manage.py startapp register dashboard/apps/pages/register python3 manage.py startapp tables dashboard/apps/pages/tables python3 manage.py startapp animations dashboard/apps/utilities/animations python3 manage.py startapp borders dashboard/apps/utilities/borders python3 manage.py startapp colors dashboard/apps/utilities/colors python3 manage.py startapp others dashboard/apps/utilities/others</pre><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 "{ { { <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 cp base.html dashboard/apps/components/cards/templates/cards cp base.html dashboard/apps/pages/blank/templates/blank cp base.html dashboard/apps/pages/charts/templates/charts cp base.html dashboard/apps/pages/login/templates/login cp base.html dashboard/apps/pages/pagenotfound/templates/pagenotfound cp base.html dashboard/apps/pages/password/templates/password cp base.html dashboard/apps/pages/register/templates/register cp base.html dashboard/apps/pages/tables/templates/tables cp base.html dashboard/apps/utilities/animations/templates/animations cp base.html dashboard/apps/utilities/borders/templates/borders cp base.html dashboard/apps/utilities/colors/templates/colors cp base.html dashboard/apps/utilities/others/templates/others</pre><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><figure class="wp-block-image size-large"><img decoding="async" width="291" height="874" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20291%20874'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_10_folder_structure.png" alt="" class="wp-image-6012 lazy" data-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" data-sizes="auto, (max-width: 291px) 100vw, 291px"></figure><p>Each of the folders has the same structure, for example the buttons component. We will delete some unnecessary files</p><figure class="wp-block-image size-large is-resized"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20293%20284'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_11_app-folder-structure.png" alt="" class="wp-image-6013 lazy" width="293" height="284" data-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" data-sizes="auto, (max-width: 293px) 100vw, 293px"></figure><h2 class="wp-block-heading">Replacing Projects with dynamic data</h2><p>Replacing the static parts with dynamic content could be achieved by the following approach:</p><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><p>The steps are the same for all components (all items of the side menu).</p><p>Find the</p><p>Identify dynamic parts in template</p><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_20_projects_html_old-700x374.png" alt="" class="wp-image-5972 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><figure class="wp-block-image size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data-700x219.png" alt="" class="wp-image-5971 lazy"></figure><figure class="wp-block-table"><table><tbody><tr><td><img decoding="async" width="500" height="278" class="wp-image-5973 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20278'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_42_projects_old_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="157" class="wp-image-5971 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20157'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="279" class="wp-image-5975 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20279'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_44_projects_new_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="151" class="wp-image-5974 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20151'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_43_projects_new_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><h2 class="wp-block-heading">Create templates for side menu pages</h2><p>For every side menu item, their is a corresponding html file in the install folder of the <code>sb-admin-2</code> template:</p><p>Remember the environment variable we create in part 1 for the start of our project</p><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><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 find dashboard/apps install/sb-admin-2 -name *.html</pre><p>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><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><p>Each template base.html should have the following content:</p><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="">{ { { <p>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> <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 class IndexView(generic.TemplateView): template_name = 'buttons/base.html'</pre><p>So, for each template file, we have to</p><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><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=""> <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --></pre><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure><div class="post-content"><div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 22<small class="months">Feb</small></time></a> </span><div class="media-body"><header class="entry-header"><h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/">Django | Build a Dashboard with Django and Bootstrap: Part 2</a></h4></header><div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span></div><div class="entry-content"><p>This is Part 2 of <em>Building a Dashboard with Django and Bootstrap</em>:</p><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><h2 class="wp-block-heading">Introduction</h2><p>If you follow the first part of this blog topic, you have a running Django dashboard.</p><p>But, unfortunately, the content is still static. Let’s review the current state:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"></div></div><p>Perfect. We are done with the basic setup.</p><p>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><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>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><p>We will do this by following these steps:</p><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><h2 class="wp-block-heading">Identify dynamic parts</h2><p>How to find the parts, which are dynamic.</p><p>One way is to ask:</p><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><p>You mostly get the same answers by the question:</p><ul class="wp-block-list"><li>What are the main components of a web page (including navigation and content)</li></ul><p>For answer the first question, take a look at the current page and “name” the areas:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="563" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20563'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/02_elements_of_dashboard_page.png?fit=700%2C394&ssl=1" alt="" class="wp-image-5929 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>So, these “names” are also the answer for the 3. Question:</p><ul class="wp-block-list"><li>sidemenu</li><li>top bar</li><li>content</li></ul><p>And maybe you find additional “names”</p><ul class="wp-block-list"><li>header</li><li>footer</li><li>top menu</li><li>left and right sidebar</li></ul><h2 class="wp-block-heading">Find identified parts in template</h2><p>Next step is, to find the identified parts in our dashboard template</p><p><code>dashboard/templates/site/sb-admin-2/base.html</code></p><p>This is an easy step, because the developer of the SB Admin 2 template documented their template well:</p><figure class="wp-block-image size-large"><img decoding="async" width="2004" height="1706" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202004%201706'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/03_elements_of_dashboard_in_codepage.png?fit=700%2C596&ssl=1" alt="" class="wp-image-5932 lazy" data-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" data-sizes="auto, (max-width: 2004px) 100vw, 2004px"></figure><p>Looking into the code of the template, you will find comment lines describing the content:</p><ul class="wp-block-list"><li><code><!-- Sidebar --></code></li><li><code><!-- Topbar --></code></li><li><code><!-- Top Search --></code></li><li><code><!-- Top Navbar --></code></li><li><code><!-- Begin Page Content--></code></li></ul><p>So, it is obvious what do to next:</p><ul class="wp-block-list"><li>get the <em>dynamic</em> part (lines under)<code><!-- Begin Page Content--></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><p>This is the way, the template system of django works:</p><figure class="wp-block-image size-large"><img decoding="async" width="954" height="251" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20954%20251'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/21_combine_template_and_content_ui.png?fit=700%2C184&ssl=1" alt="" class="wp-image-5944 lazy" data-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" data-sizes="auto, (max-width: 954px) 100vw, 954px"></figure><p>Let’s explain this with a simple example: the page title</p><p>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><p>To achieve this, we have to tell our template system the following:</p><figure class="wp-block-image size-large"><img decoding="async" width="940" height="209" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20940%20209'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/22_combine_template_and_content_code.png?fit=700%2C156&ssl=1" alt="" class="wp-image-5943 lazy" data-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" data-sizes="auto, (max-width: 940px) 100vw, 940px"></figure><p>Now, we do the same with the content:</p><figure class="wp-block-image size-large"><img decoding="async" width="983" height="457" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20983%20457'%3E%3C/svg%3E" data-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&ssl=1" alt="" class="wp-image-5947 lazy" data-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" data-sizes="auto, (max-width: 983px) 100vw, 983px"></figure><p>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><p>Well, let’s make a test and try to include a different content in the dashboard template.</p><p>Change the lines, where we include the content into this:</p><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="">{ MISSING CONTENT { <p>Did you notice the other name of the content: <strong>content_missing</strong>?</p> <p>Change the template, save the file and have a look at the result:</p> <figure class="wp-block-image size-large"><img decoding="async" width="2328" height="448" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202328%20448'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/41_missing_content.png?fit=700%2C135&ssl=1" alt="" class="wp-image-5949 lazy" data-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" data-sizes="auto, (max-width: 2328px) 100vw, 2328px"></figure> <p>Change content back, so your template is working again:</p> <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="">{ MISSING CONTENT { <p>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> </pre></pre></div> </div> </div> </div> </article><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"> <figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure> <div class="post-content"> <div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 21<small class="months">Feb</small></time></a> </span> <div class="media-body"> <header class="entry-header"> <h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/">Django | Build a Dashboard with Django and Bootstrap: Part 1</a></h4> </header> <div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span> </div> <div class="entry-content"> <p>This is Part 1 of <em>Building a Dashboard with Django and Bootstrap</em>:</p> <ul class="wp-block-list"> <li><strong>Part 1: Building a base Django project</strong></li> <li><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/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/build-a-dashboard-with-django-and-bootstrap-part-4/">Part 4: Deploy Django App to Azure</a></li> </ul> <h2 class="wp-block-heading">Introduction</h2> <p>Building a complete web app isn’t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don’t using tools or framework, which helps and makes our life easier. <a href="https://www.djangoproject.com/"><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824465754606598455505">Django</gwmw></a> is one of these frameworks:</p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468379037630016661">Django</gwmw> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development</p> </blockquote> <p>So, let’s get started.</p> <h3 class="wp-block-heading">Create project</h3> <p>For subsequent steps, we will remember our starting directory </p> <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="">❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder...</pre><p>First step is to create our main Django project</p><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="">❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate</pre><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="">❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK.</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="782" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20782'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png" alt="" class="wp-image-9675 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-300x229.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-768x587.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1536x1173.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-2048x1564.png 2048w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure></div><h3 class="wp-block-heading">Create first apps</h3><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="">❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend</pre><p>The folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="970" height="436" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20970%20436'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png" alt="" class="wp-image-9690 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png 970w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-300x135.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-768x345.png 768w" data-sizes="auto, (max-width: 970px) 100vw, 970px"></figure><h2 class="wp-block-heading">Add new apps to project</h2><p>Modify name in <code>apps/core/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core'</pre><p>Modify name in <code>apps/frontend/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend'</pre><p>Modify <code>dashboard/settings.py</code></p><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="">INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ]</pre><p>Modify <code>dashboard/urls.py</code></p><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="">from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ]</pre><h3 class="wp-block-heading">Create view</h3><p>Modify view in <code>apps/frontend/views.py</code></p><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="">from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html'</pre><h3 class="wp-block-heading">Create template for frontend View</h3><p>Create template file <code>apps/frontend/templates/frontend/index.html</code></p><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=""><h1> Frontend: Let's get started </h1></pre><h3 class="wp-block-heading">Add template folder to configuration</h3><p>In <kbd>dashboard/settings.py</kbd>, add template folder to TEMPLATES</p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ]</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="624" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20624%20186'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png" alt="" class="wp-image-8442 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png 624w, https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2-300x89.png 300w" data-sizes="auto, (max-width: 624px) 100vw, 624px"></figure></div><h2 class="wp-block-heading">Current folder Structure</h2><p>So far, we have the following folder structure</p><figure class="wp-block-image size-full"><img decoding="async" width="690" height="982" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20690%20982'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png" alt="" class="wp-image-9691 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png 690w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001-211x300.png 211w" data-sizes="auto, (max-width: 690px) 100vw, 690px"></figure><h2 class="wp-block-heading">Prepare for administrate your project</h2><h3 class="wp-block-heading">Create admin user</h3><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="">❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully.</pre><h2 class="wp-block-heading">Add Bootstrap support</h2><p>Download requires files for Bootstrap, jQuery and PopperJS.</p><p>Or download <a href="https://via-internet.de/blog/wp-content/uploads/2021/10/static.zip">this </a>prepared archiv and unzip the files unter <code>dashboard</code>.</p><p>Run the scripts in <kbd>$DASHBOARD_ROOT</kbd></p><p>Hint: You need to install <a href="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3" data-type="link" data-id="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3">PowerShell</a> before running the scripts.</p><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 > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1</pre><p><kbd>download_bootstrap.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' </pre><p><kbd>download_jquery.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map</pre><p><kbd>download_popperjs.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js</pre><p>Finally, the folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="474" height="660" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20474%20660'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png" alt="" class="wp-image-9679 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png 474w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008-215x300.png 215w" data-sizes="auto, (max-width: 474px) 100vw, 474px"></figure><h3 class="wp-block-heading">Create site templates in <code>dashboard/templates/site</code></h3><h3 class="wp-block-heading">Add templates path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470508427730698282">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="5" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ...</pre><h3 class="wp-block-heading"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-2" id="gwmw-15824470715450370185521">Add static</gwmw> path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470715451132153545">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><p>Add as first line</p><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="">import os</pre><p>Then add / replace at <kbd>STATIC_URL=...</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="2-4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ]</pre><h2 class="wp-block-heading">Modify frontend view template</h2><p>File <code>dashboard/apps/frontend/templates/index.html</code></p><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="">{ { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { <p>File <kbd>dashboard/apps/frontend/templates/site/base.html</kbd></p> <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="">{ <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html></pre><h2 class="wp-block-heading">View current status of project</h2><figure class="wp-block-image size-large"><img decoding="async" width="1024" height="778" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20778'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png" alt="" class="wp-image-9682 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-300x228.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-768x583.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1536x1167.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap.png 1714w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure><h2 class="wp-block-heading">Final Result</h2><p>The final result could be found <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project" data-type="link" data-id="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project">here</a>.</p><h2 class="wp-block-heading">Add dashboard from an existing template</h2><p>For a first start, we will use this <a href="https://startbootstrap.com/previews/sb-admin-2/"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824470188863680783027">sb</gwmw>-admin-2 dashboard</a> template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>:</p><figure class="wp-block-image size-full"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/61_dashboard.png" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><h2 class="wp-block-heading">Download required files</h2><p>Bootstrap templates consist of at least 3 different types of files</p><ul class="wp-block-list"><li>main index.html page, responsible for collection all elements and set up your page</li><li>CSS files defining the style of your page</li><li>JavaScript files, containing needed frameworks and code</li></ul><p>So, first start by downloading the sample template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>. Be sure, you start in our project root folder:</p><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="">❯ cd $DASHBOARD_ROOT</pre><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="">❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 </pre><p>Next, find out, what we need for our template in addition to the file <kbd>index.html</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)="</pre><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script></pre><p>That’s a lot of additional files.</p><p>To keep the file structure consistent, these files should be stored under the <kbd>dashboard/static</kbd> folder (same as the bootstrap files before).</p><p>To achieve this, there are <gwmw class="ginger-module-highlighter-mistake-type-2" id="gwmw-15824469384628631344488">two possi</gwmw>bilities:</p><ul class="wp-block-list"><li>Create desired folder and copy each of the source files to the destination folder</li><li><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824469457060378385283">Copy</gwmw> the complete static folder from the <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap">Github Repository</a> for this post.</li></ul><p>We use the second option to keep the focus on creating our dashboard.<gwmw style="display:none;"></gwmw></p><p>So, first, clone the repository:</p><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="">cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap</pre><p>Then, copy the requred files</p><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="">cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard</pre><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 -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard</pre><p>Having everything needed for the dashboard template, the next step is to modify the front-end template</p><p>File <code>dashboard/apps/frontend/templates/frontend/index.html</code></p> <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="">{ { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div></pre></pre></div></div></div></div></article><footer class="site-footer"><div class="container"><div class="row footer-sidebar"><div class="col-lg-3 col-md-6 col-sm-12"><aside id="categories-1" class="widget widget_categories wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Categories</h4><form action="https://via-internet.de/blog" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name="cat" id="cat" class="postform"><option value="-1">Select Category</option><option class="level-0" value="2">3D Printing (1)</option><option class="level-0" value="168">AI (3)</option><option class="level-0" value="1">Allgemein (32)</option><option class="level-0" value="151">Anaconda (1)</option><option class="level-0" value="4">Apache (3)</option><option class="level-0" value="5">Apache Spark (3)</option><option class="level-0" value="6">Apache Zeppelin (1)</option><option class="level-0" value="7">Arduino (1)</option><option class="level-0" value="160">Astro (3)</option><option class="level-0" value="9">Azure (7)</option><option class="level-1" value="20"> Databricks (4)</option><option class="level-1" value="87"> Widgets (1)</option><option class="level-0" value="158">BeautifulSoup (1)</option><option class="level-0" value="10">Bootstrap (6)</option><option class="level-0" value="12">Capacitor (1)</option><option class="level-0" value="13">CI/CD (3)</option><option class="level-1" value="40"> Jenkins (3)</option><option class="level-0" value="153">Container (9)</option><option class="level-1" value="22"> Docker (8)</option><option class="level-2" value="43"> Kubernetes (2)</option><option class="level-1" value="154"> Podman (1)</option><option class="level-0" value="16">Cookbook (30)</option><option class="level-0" value="17">CSS (3)</option><option class="level-0" value="135">Daily (6)</option><option class="level-0" value="144">Dart (1)</option><option class="level-0" value="18">Data Science (1)</option><option class="level-0" value="19">Database (2)</option><option class="level-1" value="50"> MySQL (1)</option><option class="level-1" value="58"> PostgreSQL (1)</option><option class="level-0" value="96">FastAPI (1)</option><option class="level-0" value="27">Generell (1)</option><option class="level-0" value="28">Git und Github (6)</option><option class="level-0" value="157">Grafana (1)</option><option class="level-0" value="31">Hadoop (1)</option><option class="level-0" value="163">Hexo (1)</option><option class="level-0" value="33">Homebrew (1)</option><option class="level-0" value="165">HyperDiv (1)</option><option class="level-0" value="34">Ionic 3 (5)</option><option class="level-0" value="35">Ionic 4 (9)</option><option class="level-0" value="39">Jekyll (1)</option><option class="level-0" value="41">Jupyter (2)</option><option class="level-0" value="42">Keycloak (3)</option><option class="level-0" value="137">Languages (60)</option><option class="level-1" value="14"> ClojureScript (1)</option><option class="level-1" value="15"> Cobol (1)</option><option class="level-1" value="24"> Erlang (2)</option><option class="level-2" value="94"> Elixir (2)</option><option class="level-1" value="149"> F# (2)</option><option class="level-1" value="29"> Go (1)</option><option class="level-1" value="30"> Groovy (1)</option><option class="level-1" value="32"> Haskell (3)</option><option class="level-1" value="36"> iPython (1)</option><option class="level-1" value="37"> Java (5)</option><option class="level-1" value="38"> Javascript (7)</option><option class="level-1" value="56"> Perl (1)</option><option class="level-1" value="57"> PHP (13)</option><option class="level-1" value="63"> PureScript (1)</option><option class="level-1" value="65"> Python (19)</option><option class="level-2" value="141"> PIP (1)</option><option class="level-1" value="68"> Rust (3)</option><option class="level-1" value="75"> Swift (1)</option><option class="level-0" value="99">Laravel (16)</option><option class="level-0" value="44">Learning (5)</option><option class="level-0" value="45">Linux (1)</option><option class="level-0" value="46">macOS (1)</option><option class="level-0" value="47">matter.js (1)</option><option class="level-0" value="48">Maven (1)</option><option class="level-0" value="49">Mobile Development (9)</option><option class="level-0" value="51">NestJS (1)</option><option class="level-0" value="156">Nicepage (1)</option><option class="level-0" value="52">Node.js (2)</option><option class="level-0" value="53">Office 365 (2)</option><option class="level-1" value="95"> Excel (1)</option><option class="level-1" value="81"> VBA (1)</option><option class="level-1" value="88"> Word (1)</option><option class="level-0" value="164">Ollama (4)</option><option class="level-0" value="54">OpenSCAD (1)</option><option class="level-0" value="159">Power Apps (1)</option><option class="level-0" value="59">Power BI (4)</option><option class="level-0" value="146">Power BI Visuals (3)</option><option class="level-0" value="61">Power Query (3)</option><option class="level-0" value="62">Protractor (1)</option><option class="level-0" value="64">PySpark (2)</option><option class="level-0" value="69">rxjs (2)</option><option class="level-0" value="70">SAS (3)</option><option class="level-0" value="71">Selenium (1)</option><option class="level-0" value="72">Shell (10)</option><option class="level-1" value="92"> Bash (1)</option><option class="level-1" value="102"> Power Shell (8)</option><option class="level-0" value="73">Smalltalk (1)</option><option class="level-0" value="74">Spring Boot (2)</option><option class="level-0" value="166">Static-Site-Generator (1)</option><option class="level-1" value="167"> Hugo (1)</option><option class="level-0" value="76">TDD (1)</option><option class="level-1" value="77"> Testing / Unittests (1)</option><option class="level-0" value="145">Troubleshooting (3)</option><option class="level-0" value="126">Tutorial (1)</option><option class="level-0" value="78">Ubuntu (1)</option><option class="level-0" value="79">Uncategorized (7)</option><option class="level-0" value="129">Unix (1)</option><option class="level-0" value="80">Vagrant (1)</option><option class="level-0" value="82">Virtual Machine (2)</option><option class="level-0" value="83">Virtualbox (2)</option><option class="level-0" value="84">Visual Studio Code (4)</option><option class="level-0" value="85">Visualisation (3)</option><option class="level-1" value="93"> D3.js (2)</option><option class="level-1" value="100"> p5.js (1)</option><option class="level-0" value="86">Web Framework (40)</option><option class="level-1" value="90"> Angular (10)</option><option class="level-1" value="91"> AngularJS (1)</option><option class="level-1" value="21"> Django (5)</option><option class="level-1" value="97"> Flask (1)</option><option class="level-1" value="26"> Flutter (6)</option><option class="level-1" value="98"> Ionic (13)</option><option class="level-1" value="66"> React (3)</option><option class="level-1" value="148"> React Native (1)</option><option class="level-1" value="67"> ReactJS (3)</option><option class="level-1" value="103"> VUE (2)</option><option class="level-0" value="143">Windows Subsystem for Linux (1)</option><option class="level-0" value="89">Wordpress (2)</option><option class="level-0" value="155">XAMPP (1)</option> </select></form><script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJjYXQiICk7CglmdW5jdGlvbiBvbkNhdENoYW5nZSgpIHsKCQlpZiAoIGRyb3Bkb3duLm9wdGlvbnNbIGRyb3Bkb3duLnNlbGVjdGVkSW5kZXggXS52YWx1ZSA+IDAgKSB7CgkJCWRyb3Bkb3duLnBhcmVudE5vZGUuc3VibWl0KCk7CgkJfQoJfQoJZHJvcGRvd24ub25jaGFuZ2UgPSBvbkNhdENoYW5nZTsKfSkoKTsKCi8qIF1dPiAqLwo="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="archives-1" class="widget widget_archive wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Archives</h4> <label class="screen-reader-text" for="archives-dropdown-1">Archives</label> <select id="archives-dropdown-1" name="archive-dropdown"><option value="">Select Month</option><option value="https://via-internet.de/blog/2024/11/"> November 2024</option><option value="https://via-internet.de/blog/2024/10/"> October 2024</option><option value="https://via-internet.de/blog/2024/09/"> September 2024</option><option value="https://via-internet.de/blog/2024/07/"> July 2024</option><option value="https://via-internet.de/blog/2024/05/"> May 2024</option><option value="https://via-internet.de/blog/2024/04/"> April 2024</option><option value="https://via-internet.de/blog/2024/03/"> March 2024</option><option value="https://via-internet.de/blog/2024/01/"> January 2024</option><option value="https://via-internet.de/blog/2023/12/"> December 2023</option><option value="https://via-internet.de/blog/2023/11/"> November 2023</option><option value="https://via-internet.de/blog/2023/10/"> October 2023</option><option value="https://via-internet.de/blog/2023/09/"> September 2023</option><option value="https://via-internet.de/blog/2023/08/"> August 2023</option><option value="https://via-internet.de/blog/2023/07/"> July 2023</option><option value="https://via-internet.de/blog/2023/04/"> April 2023</option><option value="https://via-internet.de/blog/2023/03/"> March 2023</option><option value="https://via-internet.de/blog/2023/02/"> February 2023</option><option value="https://via-internet.de/blog/2022/11/"> November 2022</option><option value="https://via-internet.de/blog/2022/10/"> October 2022</option><option value="https://via-internet.de/blog/2022/07/"> July 2022</option><option value="https://via-internet.de/blog/2022/06/"> June 2022</option><option value="https://via-internet.de/blog/2022/05/"> May 2022</option><option value="https://via-internet.de/blog/2022/04/"> April 2022</option><option value="https://via-internet.de/blog/2022/03/"> March 2022</option><option value="https://via-internet.de/blog/2022/01/"> January 2022</option><option value="https://via-internet.de/blog/2021/12/"> December 2021</option><option value="https://via-internet.de/blog/2021/11/"> November 2021</option><option value="https://via-internet.de/blog/2021/10/"> October 2021</option><option value="https://via-internet.de/blog/2021/08/"> August 2021</option><option value="https://via-internet.de/blog/2021/07/"> July 2021</option><option value="https://via-internet.de/blog/2021/06/"> June 2021</option><option value="https://via-internet.de/blog/2021/05/"> May 2021</option><option value="https://via-internet.de/blog/2021/02/"> February 2021</option><option value="https://via-internet.de/blog/2021/01/"> January 2021</option><option value="https://via-internet.de/blog/2020/12/"> December 2020</option><option value="https://via-internet.de/blog/2020/11/"> November 2020</option><option value="https://via-internet.de/blog/2020/10/"> October 2020</option><option value="https://via-internet.de/blog/2020/09/"> September 2020</option><option value="https://via-internet.de/blog/2020/08/"> August 2020</option><option value="https://via-internet.de/blog/2020/07/"> July 2020</option><option value="https://via-internet.de/blog/2020/06/"> June 2020</option><option value="https://via-internet.de/blog/2020/05/"> May 2020</option><option value="https://via-internet.de/blog/2020/04/"> April 2020</option><option value="https://via-internet.de/blog/2020/03/"> March 2020</option><option value="https://via-internet.de/blog/2020/02/" selected="selected"> February 2020</option><option value="https://via-internet.de/blog/2020/01/"> January 2020</option><option value="https://via-internet.de/blog/2019/12/"> December 2019</option><option value="https://via-internet.de/blog/2019/09/"> September 2019</option><option value="https://via-internet.de/blog/2019/08/"> August 2019</option><option value="https://via-internet.de/blog/2019/07/"> July 2019</option><option value="https://via-internet.de/blog/2019/06/"> June 2019</option><option value="https://via-internet.de/blog/2019/05/"> May 2019</option><option value="https://via-internet.de/blog/2019/04/"> April 2019</option><option value="https://via-internet.de/blog/2019/03/"> March 2019</option><option value="https://via-internet.de/blog/2019/02/"> February 2019</option><option value="https://via-internet.de/blog/2019/01/"> January 2019</option><option value="https://via-internet.de/blog/2018/12/"> December 2018</option><option value="https://via-internet.de/blog/2018/11/"> November 2018</option><option value="https://via-internet.de/blog/2018/09/"> September 2018</option><option value="https://via-internet.de/blog/2018/08/"> August 2018</option><option value="https://via-internet.de/blog/2018/07/"> July 2018</option><option value="https://via-internet.de/blog/2018/03/"> March 2018</option><option value="https://via-internet.de/blog/2018/02/"> February 2018</option><option value="https://via-internet.de/blog/2018/01/"> January 2018</option><option value="https://via-internet.de/blog/2017/12/"> December 2017</option><option value="https://via-internet.de/blog/2017/07/"> July 2017</option><option value="https://via-internet.de/blog/2017/05/"> May 2017</option><option value="https://via-internet.de/blog/2017/03/"> March 2017</option><option value="https://via-internet.de/blog/2017/02/"> February 2017</option><option value="https://via-internet.de/blog/2016/12/"> December 2016</option><option value="https://via-internet.de/blog/2016/11/"> November 2016</option><option value="https://via-internet.de/blog/2016/10/"> October 2016</option> </select> <script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJhcmNoaXZlcy1kcm9wZG93bi0xIiApOwoJZnVuY3Rpb24gb25TZWxlY3RDaGFuZ2UoKSB7CgkJaWYgKCBkcm9wZG93bi5vcHRpb25zWyBkcm9wZG93bi5zZWxlY3RlZEluZGV4IF0udmFsdWUgIT09ICcnICkgewoJCQlkb2N1bWVudC5sb2NhdGlvbi5ocmVmID0gdGhpcy5vcHRpb25zWyB0aGlzLnNlbGVjdGVkSW5kZXggXS52YWx1ZTsKCQl9Cgl9Cglkcm9wZG93bi5vbmNoYW5nZSA9IG9uU2VsZWN0Q2hhbmdlOwp9KSgpOwoKLyogXV0+ICovCg=="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="search-1" class="widget widget_search wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Search</h4><form method="get" id="searchform" class="input-group" action="https://via-internet.de/blog/"> <input type="text" class="form-control" placeholder="Search" name="s" id="s"><div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button></div></form></aside></div></div></div><div class="site-info text-center"> Copyright © 2024 | Powered by <a href="//wordpress.org/">WordPress</a> <span class="sep"> | </span> Aasta Blog theme by <a target="_blank" href="//themearile.com/">ThemeArile</a></div></footer><div class="page-scroll-up"><a href="#totop"><i class="fa fa-angle-up"></i></a></div><div id="cookie-law-info-bar" data-nosnippet="true" data-cli-style="cli-style-v2" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: inherit; bottom: 0px; position: fixed;"><span><div class="cli-bar-container cli-style-v2"><div class="cli-bar-message">We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.</div><div class="cli-bar-btn_container"><a role="button" class="medium cli-plugin-button cli-plugin-main-button cli_settings_button" style="margin: 0px 5px 0px 0px; color: rgb(51, 51, 51); background-color: rgb(222, 223, 224);">Cookie Settings</a><a id="wt-cli-accept-all-btn" role="button" data-cli_action="accept_all" class="wt-cli-element medium cli-plugin-button wt-cli-accept-all-btn cookie_action_close_header cli_action_button" style="color: rgb(255, 255, 255); background-color: rgb(97, 162, 41);">Accept All</a></div></div></span></div><div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); position: fixed; font-family: inherit; width: auto; bottom: 0px; right: 100px; display: none;"><span id="cookie_hdr_showagain">Manage consent</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true"><div class="cli-modal-dialog" role="document"><div class="cli-modal-content cli-bar-popup"> <button type="button" class="cli-modal-close" id="cliModalClose"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg> <span class="wt-cli-sr-only">Close</span> </button><div class="cli-modal-body"><div class="cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-privacy-overview"><h4>Privacy Overview</h4><div class="cli-privacy-content"><div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ...</div></div> <a class="cli-privacy-readmore" aria-label="Show more" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a></div></div><div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container"><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab"> Necessary </a><div class="wt-cli-necessary-checkbox"> <input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked"> <label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label></div> <span class="cli-necessary-caption">Always Enabled</span></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="necessary"><div class="wt-cli-cookie-description"> Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.<table class="cookielawinfo-row-cat-table cookielawinfo-winter"><thead><tr><th class="cookielawinfo-column-1">Cookie</th><th class="cookielawinfo-column-3">Duration</th><th class="cookielawinfo-column-4">Description</th></tr></thead><tbody><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-analytics</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-functional</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-necessary</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-others</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-performance</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">viewed_cookie_policy</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.</td></tr></tbody></table></div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="functional" data-toggle="cli-toggle-tab"> Functional </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-functional" class="cli-user-preference-checkbox" data-id="checkbox-functional"> <label for="wt-cli-checkbox-functional" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Functional</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="functional"><div class="wt-cli-cookie-description"> Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="performance" data-toggle="cli-toggle-tab"> Performance </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-performance" class="cli-user-preference-checkbox" data-id="checkbox-performance"> <label for="wt-cli-checkbox-performance" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Performance</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="performance"><div class="wt-cli-cookie-description"> Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="analytics" data-toggle="cli-toggle-tab"> Analytics </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-analytics" class="cli-user-preference-checkbox" data-id="checkbox-analytics"> <label for="wt-cli-checkbox-analytics" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Analytics</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="analytics"><div class="wt-cli-cookie-description"> Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="advertisement" data-toggle="cli-toggle-tab"> Advertisement </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-advertisement" class="cli-user-preference-checkbox" data-id="checkbox-advertisement"> <label for="wt-cli-checkbox-advertisement" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Advertisement</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="advertisement"><div class="wt-cli-cookie-description"> Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="others" data-toggle="cli-toggle-tab"> Others </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-others" class="cli-user-preference-checkbox" data-id="checkbox-others"> <label for="wt-cli-checkbox-others" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Others</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="others"><div class="wt-cli-cookie-description"> Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.</div></div></div></div></div></div></div></div><div class="cli-modal-footer"><div class="wt-cli-element cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-tab-footer wt-cli-privacy-overview-actions"> <a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a></div></div></div></div></div></div></div></div><div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div><div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div> <script defer="" src="data:text/javascript;base64,DQogICAgICAgICAgICBmdW5jdGlvbiBfa2F0ZXhSZW5kZXIocm9vdEVsZW1lbnQpIHsNCiAgICAgICAgICAgICAgICBjb25zdCBlbGVzID0gcm9vdEVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgiLmthdGV4LWVxOm5vdCgua2F0ZXgtcmVuZGVyZWQpIik7DQogICAgICAgICAgICAgICAgZm9yKGxldCBpZHg9MDsgaWR4IDwgZWxlcy5sZW5ndGg7IGlkeCsrKSB7DQogICAgICAgICAgICAgICAgICAgIGNvbnN0IGVsZSA9IGVsZXNbaWR4XTsNCiAgICAgICAgICAgICAgICAgICAgZWxlLmNsYXNzTGlzdC5hZGQoImthdGV4LXJlbmRlcmVkIik7DQogICAgICAgICAgICAgICAgICAgIHRyeSB7DQogICAgICAgICAgICAgICAgICAgICAgICBrYXRleC5yZW5kZXIoDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxlLnRleHRDb250ZW50LA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZSwNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXlNb2RlOiBlbGUuZ2V0QXR0cmlidXRlKCJkYXRhLWthdGV4LWRpc3BsYXkiKSA9PT0gJ3RydWUnLA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aHJvd09uRXJyb3I6IGZhbHNlDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgKTsNCiAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChuKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUuc3R5bGUuY29sb3I9InJlZCI7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUudGV4dENvbnRlbnQgPSBuLm1lc3NhZ2U7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGZ1bmN0aW9uIGthdGV4UmVuZGVyKCkgew0KICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihkb2N1bWVudCk7DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoIkRPTUNvbnRlbnRMb2FkZWQiLCBmdW5jdGlvbigpIHsNCiAgICAgICAgICAgICAgICBrYXRleFJlbmRlcigpOw0KDQogICAgICAgICAgICAgICAgLy8gUGVyZm9ybSBhIEthVGVYIHJlbmRlcmluZyBzdGVwIHdoZW4gdGhlIERPTSBpcyBtdXRhdGVkLg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcihmdW5jdGlvbihtdXRhdGlvbnMpIHsNCiAgICAgICAgICAgICAgICAgICAgW10uZm9yRWFjaC5jYWxsKG11dGF0aW9ucywgZnVuY3Rpb24obXV0YXRpb24pIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmIChtdXRhdGlvbi50YXJnZXQgJiYgbXV0YXRpb24udGFyZ2V0IGluc3RhbmNlb2YgRWxlbWVudCkgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihtdXRhdGlvbi50YXJnZXQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgICAgICB9KTsNCg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2YXRpb25Db25maWcgPSB7DQogICAgICAgICAgICAgICAgICAgIHN1YnRyZWU6IHRydWUsDQogICAgICAgICAgICAgICAgICAgIGNoaWxkTGlzdDogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgY2hhcmFjdGVyRGF0YTogdHJ1ZQ0KICAgICAgICAgICAgICAgIH07DQoNCiAgICAgICAgICAgICAgICBrYXRleE9ic2VydmVyLm9ic2VydmUoZG9jdW1lbnQuYm9keSwga2F0ZXhPYnNlcnZhdGlvbkNvbmZpZyk7DQogICAgICAgICAgICB9KTsNCg0KICAgICAgICA="></script> <style type="text/css">.theme-testimonial { background-image: url(https://via-internet.de/blog/wp-content/themes/aasta-blog/assets/img/theme-bg.jpg); background-size: cover; background-position: center center; }</style> <script defer="" src="data:text/javascript;base64,CgkvLyBUaGlzIEpTIGFkZGVkIGZvciB0aGUgVG9nZ2xlIGJ1dHRvbiB0byB3b3JrIHdpdGggdGhlIGZvY3VzIGVsZW1lbnQuCgkJaWYgKHdpbmRvdy5pbm5lcldpZHRoIDwgOTkyKSB7CgkJCWRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBmdW5jdGlvbihlKSB7CgkJCWxldCBpc1RhYlByZXNzZWQgPSBlLmtleSA9PT0gJ1RhYicgfHwgZS5rZXlDb2RlID09PSA5OwoJCQkJaWYgKCFpc1RhYlByZXNzZWQpIHsKCQkJCQlyZXR1cm47CgkJCQl9CgkJCQkKCQkJY29uc3QgIGZvY3VzYWJsZUVsZW1lbnRzID0KCQkJCSdidXR0b24sIFtocmVmXSwgaW5wdXQsIHNlbGVjdCwgdGV4dGFyZWEsIFt0YWJpbmRleF06bm90KFt0YWJpbmRleD0iLTEiXSknOwoJCQljb25zdCBtb2RhbCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5uYXZiYXIubmF2YmFyLWV4cGFuZC1sZycpOyAvLyBzZWxlY3QgdGhlIG1vZGFsIGJ5IGl0J3MgaWQKCgkJCWNvbnN0IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCA9IG1vZGFsLnF1ZXJ5U2VsZWN0b3JBbGwoZm9jdXNhYmxlRWxlbWVudHMpWzBdOyAvLyBnZXQgZmlyc3QgZWxlbWVudCB0byBiZSBmb2N1c2VkIGluc2lkZSBtb2RhbAoJCQljb25zdCBmb2N1c2FibGVDb250ZW50ID0gbW9kYWwucXVlcnlTZWxlY3RvckFsbChmb2N1c2FibGVFbGVtZW50cyk7CgkJCWNvbnN0IGxhc3RGb2N1c2FibGVFbGVtZW50ID0gZm9jdXNhYmxlQ29udGVudFtmb2N1c2FibGVDb250ZW50Lmxlbmd0aCAtIDFdOyAvLyBnZXQgbGFzdCBlbGVtZW50IHRvIGJlIGZvY3VzZWQgaW5zaWRlIG1vZGFsCgoJCQkgIGlmIChlLnNoaWZ0S2V5KSB7IC8vIGlmIHNoaWZ0IGtleSBwcmVzc2VkIGZvciBzaGlmdCArIHRhYiBjb21iaW5hdGlvbgoJCQkJaWYgKGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQgPT09IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCkgewoJCQkJICBsYXN0Rm9jdXNhYmxlRWxlbWVudC5mb2N1cygpOyAvLyBhZGQgZm9jdXMgZm9yIHRoZSBsYXN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsKCQkJCX0KCQkJICB9IGVsc2UgeyAvLyBpZiB0YWIga2V5IGlzIHByZXNzZWQKCQkJCWlmIChkb2N1bWVudC5hY3RpdmVFbGVtZW50ID09PSBsYXN0Rm9jdXNhYmxlRWxlbWVudCkgeyAvLyBpZiBmb2N1c2VkIGhhcyByZWFjaGVkIHRvIGxhc3QgZm9jdXNhYmxlIGVsZW1lbnQgdGhlbiBmb2N1cyBmaXJzdCBmb2N1c2FibGUgZWxlbWVudCBhZnRlciBwcmVzc2luZyB0YWIKCQkJCSAgZmlyc3RGb2N1c2FibGVFbGVtZW50LmZvY3VzKCk7IC8vIGFkZCBmb2N1cyBmb3IgdGhlIGZpcnN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsJCQkgIAoJCQkJfQoJCQkgIH0KCgkJCX0pOwoJCX0K"></script> <script defer="" src="data:text/javascript;base64,CiAgICAgICAgbmV3Q29udGFpbmVyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3BhbicpOwogICAgICAgIG5ld0NvbnRhaW5lci5zdHlsZS5zZXRQcm9wZXJ0eSgnZGlzcGxheScsJ25vbmUnLCcnKTsKICAgICAgICBuZXdOb2RlICAgICAgICAgICA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NjcmlwdCcpOwogICAgICAgIG5ld05vZGUudHlwZSAgICAgID0gJ21hdGgvdGV4JzsKICAgICAgICBuZXdOb2RlLmlubmVySFRNTCA9ICdcXG5ld2NvbW1hbmR7XFxlcHN9e1xcdmFyZXBzaWxvbn1cblxcbmV3Y29tbWFuZHtcXFJSfXtcXG1hdGhiYntSfX1cblxcbmV3Y29tbWFuZHtcXHJkfXtcXG9wZXJhdG9ybmFtZXtkfX1cblxcbmV3Y29tbWFuZHtcXHNldH1bMV17XFxsZWZ0XFx7IzFcXHJpZ2h0XFx9fSc7CiAgICAgICAgbmV3Q29udGFpbmVyLmFwcGVuZENoaWxkKG5ld05vZGUpOwogICAgICAgIGRvY3VtZW50LmJvZHkuaW5zZXJ0QmVmb3JlKG5ld0NvbnRhaW5lcixkb2N1bWVudC5ib2R5LmZpcnN0Q2hpbGQpOwogICAgICAgIA=="></script> <script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], displayMath: [['$$', '$$'], ["\\[", "\\]"]], processEscapes: true }, TeX: { equationNumbers: {autoNumber: "AMS", useLabelIds: true} }, });</script> <link rel="stylesheet" id="cookie-law-info-table-css" href="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_26b4f0c3c1bcf76291fa4952fb7f04fb.php?ver=3.2.8" type="text/css" media="all"> <script defer="" id="toc-front-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgdG9jcGx1cyA9IHsidmlzaWJpbGl0eV9zaG93IjoiQW56ZWlnZW4iLCJ2aXNpYmlsaXR5X2hpZGUiOiJBdXNibGVuZGVuIiwidmlzaWJpbGl0eV9oaWRlX2J5X2RlZmF1bHQiOiIxIiwid2lkdGgiOiJBdXRvIn07Ci8qIF1dPiAqLwo="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_93d421fd7576b0ca9c359ffe2fa16113.php?ver=20151215" id="aasta-skip-link-focus-fix-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.7.2" id="katex-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=UnpSS38vU0joHj5" id="enlighterjs-js"></script> <script defer="" id="enlighterjs-js-after" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwohZnVuY3Rpb24oZSxuKXtpZigidW5kZWZpbmVkIiE9dHlwZW9mIEVubGlnaHRlckpTKXt2YXIgbz17InNlbGVjdG9ycyI6eyJibG9jayI6InByZS5FbmxpZ2h0ZXJKU1JBVyIsImlubGluZSI6ImNvZGUuRW5saWdodGVySlNSQVcifSwib3B0aW9ucyI6eyJpbmRlbnQiOjQsImFtcGVyc2FuZENsZWFudXAiOnRydWUsImxpbmVob3ZlciI6dHJ1ZSwicmF3Y29kZURiY2xpY2siOnRydWUsInRleHRPdmVyZmxvdyI6ImJyZWFrIiwibGluZW51bWJlcnMiOmZhbHNlLCJ0aGVtZSI6ImNsYXNzaWMiLCJsYW5ndWFnZSI6ImdlbmVyaWMiLCJyZXRhaW5Dc3NDbGFzc2VzIjpmYWxzZSwiY29sbGFwc2UiOmZhbHNlLCJ0b29sYmFyT3V0ZXIiOiIiLCJ0b29sYmFyVG9wIjoie0JUTl9SQVd9e0JUTl9DT1BZfXtCVE5fV0lORE9XfXtCVE5fV0VCU0lURX0iLCJ0b29sYmFyQm90dG9tIjoiIn19OyhlLkVubGlnaHRlckpTSU5JVD1mdW5jdGlvbigpe0VubGlnaHRlckpTLmluaXQoby5zZWxlY3RvcnMuYmxvY2ssby5zZWxlY3RvcnMuaW5saW5lLG8ub3B0aW9ucyl9KSgpfWVsc2V7KG4mJihuLmVycm9yfHxuLmxvZyl8fGZ1bmN0aW9uKCl7fSkoIkVycm9yOiBFbmxpZ2h0ZXJKUyByZXNvdXJjZXMgbm90IGxvYWRlZCB5ZXQhIil9fSh3aW5kb3csY29uc29sZSk7Ci8qIF1dPiAqLwo="></script> <script type="text/javascript" id="jetpack-stats-js-before">_stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"195943667\",\"post\":\"0\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]); _stq.push([ "clickTrackerInit", "195943667", "0" ]);</script> <script type="text/javascript" src="https://stats.wp.com/e-202510.js" id="jetpack-stats-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="gt_widget_script_62673750-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['62673750'] = {"default_language":"de","languages":["de","en","fr","zh-CN","nl","it","es","da","pt"],"url_structure":"none","native_language_names":1,"flag_style":"2d","flag_size":24,"wrapper_selector":"#gtranslate_menu_wrapper_37060","alt_flags":[],"switcher_open_direction":"top","switcher_horizontal_position":"inline","switcher_text_color":"#666","switcher_arrow_color":"#666","switcher_border_color":"#ccc","switcher_background_color":"#fff","switcher_background_shadow_color":"#efefef","switcher_background_hover_color":"#fff","dropdown_text_color":"#000","dropdown_hover_color":"#fff","dropdown_background_color":"#eee","flags_location":"\/blog\/wp-content\/plugins\/gtranslate\/flags\/"};</script><script src="https://via-internet.de/blog/wp-content/plugins/gtranslate/js/dwf.js?ver=6.7.2" data-no-optimize="1" data-no-minify="1" data-gt-orig-url="/blog/2020/02/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="62673750" defer=""></script><script defer="" id="wpcd-scripts-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgd3BjZGFqYXggPSB7ImFqYXh1cmwiOiJodHRwczpcL1wvdmlhLWludGVybmV0LmRlXC9ibG9nXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAifTsKLyogXV0+ICovCg=="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_231b95969d2321feeaab8fdd8121442a.php" id="wpcd-scripts-js"></script> <script defer="" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js&ver=2.7.5" id="mathjax-js"></script> <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async="" src="https://via-internet.de/blog/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js"></script> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Page Caching using Disk: Enhanced Lazy Loading Database Caching 2/163 queries in 0.254 seconds using Disk Served from: via-internet.de @ 2025-03-08 07:08:06 by W3 Total Cache --></pre></pre></pre></pre> { { { <h1 style="text-align: center">BUTTONS</h1> { <p>Save everything and view at the resulting page</p> <figure class="wp-block-image size-large"><img decoding="async" width="1444" height="808" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201444%20808'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_54_navigation_1.png?fit=700%2C392&ssl=1" alt="" class="wp-image-6056 lazy" data-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" data-sizes="auto, (max-width: 1444px) 100vw, 1444px"></figure> <p>What happens, from showing the page, clicking on the link until you see the final result:</p> <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> <figure class="wp-block-image size-large"><img decoding="async" width="1472" height="849" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201472%20849'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_54_navigation_2.png?fit=700%2C404&ssl=1" alt="" class="wp-image-6057 lazy" data-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" data-sizes="auto, (max-width: 1472px) 100vw, 1472px"></figure> <h2 class="wp-block-heading">Namespaces and structure</h2> <p>Now, think about the names, e. g. buttons and cards in our Components.</p> <p>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> <p>So, you will have to additional files, for example</p> <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> <p>The corresponding url mapping (<code>urls.py</code>) could look like this:</p> <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 import dashboard.apps.utilities.info.views as UtilitiesInfoViews urlpatterns = [ path('', include('dashboard.apps.urls')), path('info', ComponentInfoViews.IndexView.as_view(), name='info'), path('info', UtilitiesInfoViews.IndexView.as_view(), name='info'),</pre><p>Two pages with the same name (<code>info</code>) in different <code>views.py</code>!</p><p>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><p>We will choose a more modern way of programming</p><ul class="wp-block-list"><li>Spread the responsibility over separate, independent modules</li><li>Name these modules with different names</li></ul><p>What does this mean? We will have</p><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><h2 class="wp-block-heading">Resulting folder structure and file content</h2><p>File <code>dashbard/urls.py</code></p><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 = [ path('', include('dashboard.apps.urls')), path('admin/', admin.site.urls), ]</pre><p>File <code>dashbard/apps/urls.py</code></p><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 from django.urls.conf import include from dashboard.apps.frontend.views import IndexView app_name = 'app' urlpatterns = [ path('', IndexView.as_view(), name='index'), path('pages/', include('dashboard.apps.pages.urls')), path('components/', include('dashboard.apps.components.urls')), path('utilities/', include('dashboard.apps.utilities.urls')), ] </pre><p>File <code>dashbard/apps/components/urls.py</code></p><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 import dashboard.apps.components.buttons.views as ButtonsViews import dashboard.apps.components.cards.views as CardsViews app_name = 'components' urlpatterns = [ path('', ButtonsViews.IndexView.as_view(), name='index'), path('buttons/', ButtonsViews.IndexView.as_view(), name='buttons'), path('cards/', CardsViews.IndexView.as_view(), name='cards'), ] </pre><p>File <code>dashbard/apps/utilities/urls.py</code></p><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 import dashboard.apps.utilities.colors.views as ColorsViews import dashboard.apps.utilities.borders.views as BordersViews import dashboard.apps.utilities.animations.views as AnimationsViews import dashboard.apps.utilities.others.views as OthersViews app_name = 'utilities' urlpatterns = [ path('', BordersViews.IndexView.as_view(), name='index'), path('animations/', AnimationsViews.IndexView.as_view(), name='animations'), path('borders/', BordersViews.IndexView.as_view(), name='borders'), path('colors/', ColorsViews.IndexView.as_view(), name='colors'), path('others/', OthersViews.IndexView.as_view(), name='others'), ] </pre><p>File <code>dashbard/apps/pages/urls.py</code></p><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 import dashboard.apps.pages.blank.views as BlankViews import dashboard.apps.pages.login.views as LoginViews import dashboard.apps.pages.pagenotfound.views as PageNotFoundViews import dashboard.apps.pages.password.views as PasswordViews import dashboard.apps.pages.register.views as RegisterViews import dashboard.apps.pages.charts.views as ChartsViews import dashboard.apps.pages.tables.views as TablesViews app_name = 'pages' urlpatterns = [ path('', ChartsViews.IndexView.as_view(), name='index'), path('blank', BlankViews.IndexView.as_view(), name='blank'), path('charts', ChartsViews.IndexView.as_view(), name='charts'), path('login', LoginViews.IndexView.as_view(), name='login'), path('pagenotfound', PageNotFoundViews.IndexView.as_view(), name='pagenotfound'), path('password', PasswordViews.IndexView.as_view(), name='password'), path('register', RegisterViews.IndexView.as_view(), name='register'), path('tables', TablesViews.IndexView.as_view(), name='tables'), ] </pre><h3 class="wp-block-heading">Let’s finally check the namespace structure:</h3><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 ./dashboard/urls.py ./dashboard/apps/utilities/urls.py ./dashboard/apps/components/urls.py ./dashboard/apps/urls.py ./dashboard/apps/pages/urls.py</pre><p>We create three levels for our namespaces:</p><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>–</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><p>These namespaces must be used in the template files, for example:</p><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=""><a href="{ <a href="{ <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=""><a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <p>Install the Django Extensions for additional commands:</p> <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><p>Add Django Extensions to the INSTALLED_APPS</p><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 = [ ... 'django_extensions' ]</pre><p>Show URLs and Namespaces (only for out apps, admin urls are removed)</p><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><figure class="wp-block-image size-large"><img decoding="async" width="1676" height="449" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201676%20449'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_55_namespaces.png?fit=700%2C188&ssl=1" alt="" class="wp-image-6078 lazy" data-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" data-sizes="auto, (max-width: 1676px) 100vw, 1676px"></figure><h2 class="wp-block-heading">Preparing required components and pages</h2><p>In summary, these are the steps to create the desired folder structure:</p><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 mkdir -p dashboard/apps/components/cards/templates/cards mkdir -p dashboard/apps/pages/blank/templates/blank mkdir -p dashboard/apps/pages/charts/templates/charts mkdir -p dashboard/apps/pages/login/templates/login mkdir -p dashboard/apps/pages/pagenotfound/templates/pagenotfound mkdir -p dashboard/apps/pages/password/templates/password mkdir -p dashboard/apps/pages/register/templates/register mkdir -p dashboard/apps/pages/tables/templates/tables mkdir -p dashboard/apps/utilities/animations/templates/animations mkdir -p dashboard/apps/utilities/borders/templates/borders mkdir -p dashboard/apps/utilities/colors/templates/colors mkdir -p dashboard/apps/utilities/others/templates/others</pre><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 python3 manage.py startapp cards dashboard/apps/components/cards python3 manage.py startapp blank dashboard/apps/pages/blank python3 manage.py startapp charts dashboard/apps/pages/charts python3 manage.py startapp login dashboard/apps/pages/login python3 manage.py startapp pagenotfound dashboard/apps/pages/pagenotfound python3 manage.py startapp password dashboard/apps/pages/password python3 manage.py startapp register dashboard/apps/pages/register python3 manage.py startapp tables dashboard/apps/pages/tables python3 manage.py startapp animations dashboard/apps/utilities/animations python3 manage.py startapp borders dashboard/apps/utilities/borders python3 manage.py startapp colors dashboard/apps/utilities/colors python3 manage.py startapp others dashboard/apps/utilities/others</pre><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 "{ { { <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 cp base.html dashboard/apps/components/cards/templates/cards cp base.html dashboard/apps/pages/blank/templates/blank cp base.html dashboard/apps/pages/charts/templates/charts cp base.html dashboard/apps/pages/login/templates/login cp base.html dashboard/apps/pages/pagenotfound/templates/pagenotfound cp base.html dashboard/apps/pages/password/templates/password cp base.html dashboard/apps/pages/register/templates/register cp base.html dashboard/apps/pages/tables/templates/tables cp base.html dashboard/apps/utilities/animations/templates/animations cp base.html dashboard/apps/utilities/borders/templates/borders cp base.html dashboard/apps/utilities/colors/templates/colors cp base.html dashboard/apps/utilities/others/templates/others</pre><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><figure class="wp-block-image size-large"><img decoding="async" width="291" height="874" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20291%20874'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_10_folder_structure.png" alt="" class="wp-image-6012 lazy" data-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" data-sizes="auto, (max-width: 291px) 100vw, 291px"></figure><p>Each of the folders has the same structure, for example the buttons component. We will delete some unnecessary files</p><figure class="wp-block-image size-large is-resized"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20293%20284'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_11_app-folder-structure.png" alt="" class="wp-image-6013 lazy" width="293" height="284" data-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" data-sizes="auto, (max-width: 293px) 100vw, 293px"></figure><h2 class="wp-block-heading">Replacing Projects with dynamic data</h2><p>Replacing the static parts with dynamic content could be achieved by the following approach:</p><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><p>The steps are the same for all components (all items of the side menu).</p><p>Find the</p><p>Identify dynamic parts in template</p><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_20_projects_html_old-700x374.png" alt="" class="wp-image-5972 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><figure class="wp-block-image size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data-700x219.png" alt="" class="wp-image-5971 lazy"></figure><figure class="wp-block-table"><table><tbody><tr><td><img decoding="async" width="500" height="278" class="wp-image-5973 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20278'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_42_projects_old_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="157" class="wp-image-5971 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20157'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="279" class="wp-image-5975 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20279'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_44_projects_new_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="151" class="wp-image-5974 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20151'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_43_projects_new_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><h2 class="wp-block-heading">Create templates for side menu pages</h2><p>For every side menu item, their is a corresponding html file in the install folder of the <code>sb-admin-2</code> template:</p><p>Remember the environment variable we create in part 1 for the start of our project</p><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><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 find dashboard/apps install/sb-admin-2 -name *.html</pre><p>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><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><p>Each template base.html should have the following content:</p><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="">{ { { <p>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> <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 class IndexView(generic.TemplateView): template_name = 'buttons/base.html'</pre><p>So, for each template file, we have to</p><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><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=""> <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --></pre><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure><div class="post-content"><div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 22<small class="months">Feb</small></time></a> </span><div class="media-body"><header class="entry-header"><h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/">Django | Build a Dashboard with Django and Bootstrap: Part 2</a></h4></header><div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span></div><div class="entry-content"><p>This is Part 2 of <em>Building a Dashboard with Django and Bootstrap</em>:</p><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><h2 class="wp-block-heading">Introduction</h2><p>If you follow the first part of this blog topic, you have a running Django dashboard.</p><p>But, unfortunately, the content is still static. Let’s review the current state:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"></div></div><p>Perfect. We are done with the basic setup.</p><p>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><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>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><p>We will do this by following these steps:</p><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><h2 class="wp-block-heading">Identify dynamic parts</h2><p>How to find the parts, which are dynamic.</p><p>One way is to ask:</p><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><p>You mostly get the same answers by the question:</p><ul class="wp-block-list"><li>What are the main components of a web page (including navigation and content)</li></ul><p>For answer the first question, take a look at the current page and “name” the areas:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="563" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20563'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/02_elements_of_dashboard_page.png?fit=700%2C394&ssl=1" alt="" class="wp-image-5929 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>So, these “names” are also the answer for the 3. Question:</p><ul class="wp-block-list"><li>sidemenu</li><li>top bar</li><li>content</li></ul><p>And maybe you find additional “names”</p><ul class="wp-block-list"><li>header</li><li>footer</li><li>top menu</li><li>left and right sidebar</li></ul><h2 class="wp-block-heading">Find identified parts in template</h2><p>Next step is, to find the identified parts in our dashboard template</p><p><code>dashboard/templates/site/sb-admin-2/base.html</code></p><p>This is an easy step, because the developer of the SB Admin 2 template documented their template well:</p><figure class="wp-block-image size-large"><img decoding="async" width="2004" height="1706" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202004%201706'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/03_elements_of_dashboard_in_codepage.png?fit=700%2C596&ssl=1" alt="" class="wp-image-5932 lazy" data-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" data-sizes="auto, (max-width: 2004px) 100vw, 2004px"></figure><p>Looking into the code of the template, you will find comment lines describing the content:</p><ul class="wp-block-list"><li><code><!-- Sidebar --></code></li><li><code><!-- Topbar --></code></li><li><code><!-- Top Search --></code></li><li><code><!-- Top Navbar --></code></li><li><code><!-- Begin Page Content--></code></li></ul><p>So, it is obvious what do to next:</p><ul class="wp-block-list"><li>get the <em>dynamic</em> part (lines under)<code><!-- Begin Page Content--></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><p>This is the way, the template system of django works:</p><figure class="wp-block-image size-large"><img decoding="async" width="954" height="251" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20954%20251'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/21_combine_template_and_content_ui.png?fit=700%2C184&ssl=1" alt="" class="wp-image-5944 lazy" data-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" data-sizes="auto, (max-width: 954px) 100vw, 954px"></figure><p>Let’s explain this with a simple example: the page title</p><p>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><p>To achieve this, we have to tell our template system the following:</p><figure class="wp-block-image size-large"><img decoding="async" width="940" height="209" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20940%20209'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/22_combine_template_and_content_code.png?fit=700%2C156&ssl=1" alt="" class="wp-image-5943 lazy" data-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" data-sizes="auto, (max-width: 940px) 100vw, 940px"></figure><p>Now, we do the same with the content:</p><figure class="wp-block-image size-large"><img decoding="async" width="983" height="457" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20983%20457'%3E%3C/svg%3E" data-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&ssl=1" alt="" class="wp-image-5947 lazy" data-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" data-sizes="auto, (max-width: 983px) 100vw, 983px"></figure><p>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><p>Well, let’s make a test and try to include a different content in the dashboard template.</p><p>Change the lines, where we include the content into this:</p><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="">{ MISSING CONTENT { <p>Did you notice the other name of the content: <strong>content_missing</strong>?</p> <p>Change the template, save the file and have a look at the result:</p> <figure class="wp-block-image size-large"><img decoding="async" width="2328" height="448" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202328%20448'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/41_missing_content.png?fit=700%2C135&ssl=1" alt="" class="wp-image-5949 lazy" data-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" data-sizes="auto, (max-width: 2328px) 100vw, 2328px"></figure> <p>Change content back, so your template is working again:</p> <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="">{ MISSING CONTENT { <p>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> </pre></pre></div> </div> </div> </div> </article><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"> <figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure> <div class="post-content"> <div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 21<small class="months">Feb</small></time></a> </span> <div class="media-body"> <header class="entry-header"> <h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/">Django | Build a Dashboard with Django and Bootstrap: Part 1</a></h4> </header> <div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span> </div> <div class="entry-content"> <p>This is Part 1 of <em>Building a Dashboard with Django and Bootstrap</em>:</p> <ul class="wp-block-list"> <li><strong>Part 1: Building a base Django project</strong></li> <li><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/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/build-a-dashboard-with-django-and-bootstrap-part-4/">Part 4: Deploy Django App to Azure</a></li> </ul> <h2 class="wp-block-heading">Introduction</h2> <p>Building a complete web app isn’t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don’t using tools or framework, which helps and makes our life easier. <a href="https://www.djangoproject.com/"><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824465754606598455505">Django</gwmw></a> is one of these frameworks:</p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468379037630016661">Django</gwmw> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development</p> </blockquote> <p>So, let’s get started.</p> <h3 class="wp-block-heading">Create project</h3> <p>For subsequent steps, we will remember our starting directory </p> <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="">❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder...</pre><p>First step is to create our main Django project</p><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="">❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate</pre><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="">❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK.</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="782" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20782'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png" alt="" class="wp-image-9675 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-300x229.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-768x587.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1536x1173.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-2048x1564.png 2048w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure></div><h3 class="wp-block-heading">Create first apps</h3><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="">❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend</pre><p>The folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="970" height="436" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20970%20436'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png" alt="" class="wp-image-9690 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png 970w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-300x135.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-768x345.png 768w" data-sizes="auto, (max-width: 970px) 100vw, 970px"></figure><h2 class="wp-block-heading">Add new apps to project</h2><p>Modify name in <code>apps/core/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core'</pre><p>Modify name in <code>apps/frontend/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend'</pre><p>Modify <code>dashboard/settings.py</code></p><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="">INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ]</pre><p>Modify <code>dashboard/urls.py</code></p><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="">from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ]</pre><h3 class="wp-block-heading">Create view</h3><p>Modify view in <code>apps/frontend/views.py</code></p><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="">from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html'</pre><h3 class="wp-block-heading">Create template for frontend View</h3><p>Create template file <code>apps/frontend/templates/frontend/index.html</code></p><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=""><h1> Frontend: Let's get started </h1></pre><h3 class="wp-block-heading">Add template folder to configuration</h3><p>In <kbd>dashboard/settings.py</kbd>, add template folder to TEMPLATES</p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ]</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="624" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20624%20186'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png" alt="" class="wp-image-8442 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png 624w, https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2-300x89.png 300w" data-sizes="auto, (max-width: 624px) 100vw, 624px"></figure></div><h2 class="wp-block-heading">Current folder Structure</h2><p>So far, we have the following folder structure</p><figure class="wp-block-image size-full"><img decoding="async" width="690" height="982" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20690%20982'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png" alt="" class="wp-image-9691 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png 690w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001-211x300.png 211w" data-sizes="auto, (max-width: 690px) 100vw, 690px"></figure><h2 class="wp-block-heading">Prepare for administrate your project</h2><h3 class="wp-block-heading">Create admin user</h3><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="">❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully.</pre><h2 class="wp-block-heading">Add Bootstrap support</h2><p>Download requires files for Bootstrap, jQuery and PopperJS.</p><p>Or download <a href="https://via-internet.de/blog/wp-content/uploads/2021/10/static.zip">this </a>prepared archiv and unzip the files unter <code>dashboard</code>.</p><p>Run the scripts in <kbd>$DASHBOARD_ROOT</kbd></p><p>Hint: You need to install <a href="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3" data-type="link" data-id="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3">PowerShell</a> before running the scripts.</p><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 > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1</pre><p><kbd>download_bootstrap.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' </pre><p><kbd>download_jquery.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map</pre><p><kbd>download_popperjs.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js</pre><p>Finally, the folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="474" height="660" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20474%20660'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png" alt="" class="wp-image-9679 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png 474w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008-215x300.png 215w" data-sizes="auto, (max-width: 474px) 100vw, 474px"></figure><h3 class="wp-block-heading">Create site templates in <code>dashboard/templates/site</code></h3><h3 class="wp-block-heading">Add templates path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470508427730698282">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="5" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ...</pre><h3 class="wp-block-heading"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-2" id="gwmw-15824470715450370185521">Add static</gwmw> path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470715451132153545">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><p>Add as first line</p><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="">import os</pre><p>Then add / replace at <kbd>STATIC_URL=...</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="2-4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ]</pre><h2 class="wp-block-heading">Modify frontend view template</h2><p>File <code>dashboard/apps/frontend/templates/index.html</code></p><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="">{ { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { <p>File <kbd>dashboard/apps/frontend/templates/site/base.html</kbd></p> <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="">{ <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html></pre><h2 class="wp-block-heading">View current status of project</h2><figure class="wp-block-image size-large"><img decoding="async" width="1024" height="778" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20778'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png" alt="" class="wp-image-9682 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-300x228.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-768x583.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1536x1167.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap.png 1714w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure><h2 class="wp-block-heading">Final Result</h2><p>The final result could be found <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project" data-type="link" data-id="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project">here</a>.</p><h2 class="wp-block-heading">Add dashboard from an existing template</h2><p>For a first start, we will use this <a href="https://startbootstrap.com/previews/sb-admin-2/"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824470188863680783027">sb</gwmw>-admin-2 dashboard</a> template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>:</p><figure class="wp-block-image size-full"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/61_dashboard.png" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><h2 class="wp-block-heading">Download required files</h2><p>Bootstrap templates consist of at least 3 different types of files</p><ul class="wp-block-list"><li>main index.html page, responsible for collection all elements and set up your page</li><li>CSS files defining the style of your page</li><li>JavaScript files, containing needed frameworks and code</li></ul><p>So, first start by downloading the sample template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>. Be sure, you start in our project root folder:</p><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="">❯ cd $DASHBOARD_ROOT</pre><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="">❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 </pre><p>Next, find out, what we need for our template in addition to the file <kbd>index.html</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)="</pre><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script></pre><p>That’s a lot of additional files.</p><p>To keep the file structure consistent, these files should be stored under the <kbd>dashboard/static</kbd> folder (same as the bootstrap files before).</p><p>To achieve this, there are <gwmw class="ginger-module-highlighter-mistake-type-2" id="gwmw-15824469384628631344488">two possi</gwmw>bilities:</p><ul class="wp-block-list"><li>Create desired folder and copy each of the source files to the destination folder</li><li><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824469457060378385283">Copy</gwmw> the complete static folder from the <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap">Github Repository</a> for this post.</li></ul><p>We use the second option to keep the focus on creating our dashboard.<gwmw style="display:none;"></gwmw></p><p>So, first, clone the repository:</p><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="">cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap</pre><p>Then, copy the requred files</p><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="">cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard</pre><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 -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard</pre><p>Having everything needed for the dashboard template, the next step is to modify the front-end template</p><p>File <code>dashboard/apps/frontend/templates/frontend/index.html</code></p> <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="">{ { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div></pre></pre></div></div></div></div></article><footer class="site-footer"><div class="container"><div class="row footer-sidebar"><div class="col-lg-3 col-md-6 col-sm-12"><aside id="categories-1" class="widget widget_categories wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Categories</h4><form action="https://via-internet.de/blog" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name="cat" id="cat" class="postform"><option value="-1">Select Category</option><option class="level-0" value="2">3D Printing (1)</option><option class="level-0" value="168">AI (3)</option><option class="level-0" value="1">Allgemein (32)</option><option class="level-0" value="151">Anaconda (1)</option><option class="level-0" value="4">Apache (3)</option><option class="level-0" value="5">Apache Spark (3)</option><option class="level-0" value="6">Apache Zeppelin (1)</option><option class="level-0" value="7">Arduino (1)</option><option class="level-0" value="160">Astro (3)</option><option class="level-0" value="9">Azure (7)</option><option class="level-1" value="20"> Databricks (4)</option><option class="level-1" value="87"> Widgets (1)</option><option class="level-0" value="158">BeautifulSoup (1)</option><option class="level-0" value="10">Bootstrap (6)</option><option class="level-0" value="12">Capacitor (1)</option><option class="level-0" value="13">CI/CD (3)</option><option class="level-1" value="40"> Jenkins (3)</option><option class="level-0" value="153">Container (9)</option><option class="level-1" value="22"> Docker (8)</option><option class="level-2" value="43"> Kubernetes (2)</option><option class="level-1" value="154"> Podman (1)</option><option class="level-0" value="16">Cookbook (30)</option><option class="level-0" value="17">CSS (3)</option><option class="level-0" value="135">Daily (6)</option><option class="level-0" value="144">Dart (1)</option><option class="level-0" value="18">Data Science (1)</option><option class="level-0" value="19">Database (2)</option><option class="level-1" value="50"> MySQL (1)</option><option class="level-1" value="58"> PostgreSQL (1)</option><option class="level-0" value="96">FastAPI (1)</option><option class="level-0" value="27">Generell (1)</option><option class="level-0" value="28">Git und Github (6)</option><option class="level-0" value="157">Grafana (1)</option><option class="level-0" value="31">Hadoop (1)</option><option class="level-0" value="163">Hexo (1)</option><option class="level-0" value="33">Homebrew (1)</option><option class="level-0" value="165">HyperDiv (1)</option><option class="level-0" value="34">Ionic 3 (5)</option><option class="level-0" value="35">Ionic 4 (9)</option><option class="level-0" value="39">Jekyll (1)</option><option class="level-0" value="41">Jupyter (2)</option><option class="level-0" value="42">Keycloak (3)</option><option class="level-0" value="137">Languages (60)</option><option class="level-1" value="14"> ClojureScript (1)</option><option class="level-1" value="15"> Cobol (1)</option><option class="level-1" value="24"> Erlang (2)</option><option class="level-2" value="94"> Elixir (2)</option><option class="level-1" value="149"> F# (2)</option><option class="level-1" value="29"> Go (1)</option><option class="level-1" value="30"> Groovy (1)</option><option class="level-1" value="32"> Haskell (3)</option><option class="level-1" value="36"> iPython (1)</option><option class="level-1" value="37"> Java (5)</option><option class="level-1" value="38"> Javascript (7)</option><option class="level-1" value="56"> Perl (1)</option><option class="level-1" value="57"> PHP (13)</option><option class="level-1" value="63"> PureScript (1)</option><option class="level-1" value="65"> Python (19)</option><option class="level-2" value="141"> PIP (1)</option><option class="level-1" value="68"> Rust (3)</option><option class="level-1" value="75"> Swift (1)</option><option class="level-0" value="99">Laravel (16)</option><option class="level-0" value="44">Learning (5)</option><option class="level-0" value="45">Linux (1)</option><option class="level-0" value="46">macOS (1)</option><option class="level-0" value="47">matter.js (1)</option><option class="level-0" value="48">Maven (1)</option><option class="level-0" value="49">Mobile Development (9)</option><option class="level-0" value="51">NestJS (1)</option><option class="level-0" value="156">Nicepage (1)</option><option class="level-0" value="52">Node.js (2)</option><option class="level-0" value="53">Office 365 (2)</option><option class="level-1" value="95"> Excel (1)</option><option class="level-1" value="81"> VBA (1)</option><option class="level-1" value="88"> Word (1)</option><option class="level-0" value="164">Ollama (4)</option><option class="level-0" value="54">OpenSCAD (1)</option><option class="level-0" value="159">Power Apps (1)</option><option class="level-0" value="59">Power BI (4)</option><option class="level-0" value="146">Power BI Visuals (3)</option><option class="level-0" value="61">Power Query (3)</option><option class="level-0" value="62">Protractor (1)</option><option class="level-0" value="64">PySpark (2)</option><option class="level-0" value="69">rxjs (2)</option><option class="level-0" value="70">SAS (3)</option><option class="level-0" value="71">Selenium (1)</option><option class="level-0" value="72">Shell (10)</option><option class="level-1" value="92"> Bash (1)</option><option class="level-1" value="102"> Power Shell (8)</option><option class="level-0" value="73">Smalltalk (1)</option><option class="level-0" value="74">Spring Boot (2)</option><option class="level-0" value="166">Static-Site-Generator (1)</option><option class="level-1" value="167"> Hugo (1)</option><option class="level-0" value="76">TDD (1)</option><option class="level-1" value="77"> Testing / Unittests (1)</option><option class="level-0" value="145">Troubleshooting (3)</option><option class="level-0" value="126">Tutorial (1)</option><option class="level-0" value="78">Ubuntu (1)</option><option class="level-0" value="79">Uncategorized (7)</option><option class="level-0" value="129">Unix (1)</option><option class="level-0" value="80">Vagrant (1)</option><option class="level-0" value="82">Virtual Machine (2)</option><option class="level-0" value="83">Virtualbox (2)</option><option class="level-0" value="84">Visual Studio Code (4)</option><option class="level-0" value="85">Visualisation (3)</option><option class="level-1" value="93"> D3.js (2)</option><option class="level-1" value="100"> p5.js (1)</option><option class="level-0" value="86">Web Framework (40)</option><option class="level-1" value="90"> Angular (10)</option><option class="level-1" value="91"> AngularJS (1)</option><option class="level-1" value="21"> Django (5)</option><option class="level-1" value="97"> Flask (1)</option><option class="level-1" value="26"> Flutter (6)</option><option class="level-1" value="98"> Ionic (13)</option><option class="level-1" value="66"> React (3)</option><option class="level-1" value="148"> React Native (1)</option><option class="level-1" value="67"> ReactJS (3)</option><option class="level-1" value="103"> VUE (2)</option><option class="level-0" value="143">Windows Subsystem for Linux (1)</option><option class="level-0" value="89">Wordpress (2)</option><option class="level-0" value="155">XAMPP (1)</option> </select></form><script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJjYXQiICk7CglmdW5jdGlvbiBvbkNhdENoYW5nZSgpIHsKCQlpZiAoIGRyb3Bkb3duLm9wdGlvbnNbIGRyb3Bkb3duLnNlbGVjdGVkSW5kZXggXS52YWx1ZSA+IDAgKSB7CgkJCWRyb3Bkb3duLnBhcmVudE5vZGUuc3VibWl0KCk7CgkJfQoJfQoJZHJvcGRvd24ub25jaGFuZ2UgPSBvbkNhdENoYW5nZTsKfSkoKTsKCi8qIF1dPiAqLwo="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="archives-1" class="widget widget_archive wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Archives</h4> <label class="screen-reader-text" for="archives-dropdown-1">Archives</label> <select id="archives-dropdown-1" name="archive-dropdown"><option value="">Select Month</option><option value="https://via-internet.de/blog/2024/11/"> November 2024</option><option value="https://via-internet.de/blog/2024/10/"> October 2024</option><option value="https://via-internet.de/blog/2024/09/"> September 2024</option><option value="https://via-internet.de/blog/2024/07/"> July 2024</option><option value="https://via-internet.de/blog/2024/05/"> May 2024</option><option value="https://via-internet.de/blog/2024/04/"> April 2024</option><option value="https://via-internet.de/blog/2024/03/"> March 2024</option><option value="https://via-internet.de/blog/2024/01/"> January 2024</option><option value="https://via-internet.de/blog/2023/12/"> December 2023</option><option value="https://via-internet.de/blog/2023/11/"> November 2023</option><option value="https://via-internet.de/blog/2023/10/"> October 2023</option><option value="https://via-internet.de/blog/2023/09/"> September 2023</option><option value="https://via-internet.de/blog/2023/08/"> August 2023</option><option value="https://via-internet.de/blog/2023/07/"> July 2023</option><option value="https://via-internet.de/blog/2023/04/"> April 2023</option><option value="https://via-internet.de/blog/2023/03/"> March 2023</option><option value="https://via-internet.de/blog/2023/02/"> February 2023</option><option value="https://via-internet.de/blog/2022/11/"> November 2022</option><option value="https://via-internet.de/blog/2022/10/"> October 2022</option><option value="https://via-internet.de/blog/2022/07/"> July 2022</option><option value="https://via-internet.de/blog/2022/06/"> June 2022</option><option value="https://via-internet.de/blog/2022/05/"> May 2022</option><option value="https://via-internet.de/blog/2022/04/"> April 2022</option><option value="https://via-internet.de/blog/2022/03/"> March 2022</option><option value="https://via-internet.de/blog/2022/01/"> January 2022</option><option value="https://via-internet.de/blog/2021/12/"> December 2021</option><option value="https://via-internet.de/blog/2021/11/"> November 2021</option><option value="https://via-internet.de/blog/2021/10/"> October 2021</option><option value="https://via-internet.de/blog/2021/08/"> August 2021</option><option value="https://via-internet.de/blog/2021/07/"> July 2021</option><option value="https://via-internet.de/blog/2021/06/"> June 2021</option><option value="https://via-internet.de/blog/2021/05/"> May 2021</option><option value="https://via-internet.de/blog/2021/02/"> February 2021</option><option value="https://via-internet.de/blog/2021/01/"> January 2021</option><option value="https://via-internet.de/blog/2020/12/"> December 2020</option><option value="https://via-internet.de/blog/2020/11/"> November 2020</option><option value="https://via-internet.de/blog/2020/10/"> October 2020</option><option value="https://via-internet.de/blog/2020/09/"> September 2020</option><option value="https://via-internet.de/blog/2020/08/"> August 2020</option><option value="https://via-internet.de/blog/2020/07/"> July 2020</option><option value="https://via-internet.de/blog/2020/06/"> June 2020</option><option value="https://via-internet.de/blog/2020/05/"> May 2020</option><option value="https://via-internet.de/blog/2020/04/"> April 2020</option><option value="https://via-internet.de/blog/2020/03/"> March 2020</option><option value="https://via-internet.de/blog/2020/02/" selected="selected"> February 2020</option><option value="https://via-internet.de/blog/2020/01/"> January 2020</option><option value="https://via-internet.de/blog/2019/12/"> December 2019</option><option value="https://via-internet.de/blog/2019/09/"> September 2019</option><option value="https://via-internet.de/blog/2019/08/"> August 2019</option><option value="https://via-internet.de/blog/2019/07/"> July 2019</option><option value="https://via-internet.de/blog/2019/06/"> June 2019</option><option value="https://via-internet.de/blog/2019/05/"> May 2019</option><option value="https://via-internet.de/blog/2019/04/"> April 2019</option><option value="https://via-internet.de/blog/2019/03/"> March 2019</option><option value="https://via-internet.de/blog/2019/02/"> February 2019</option><option value="https://via-internet.de/blog/2019/01/"> January 2019</option><option value="https://via-internet.de/blog/2018/12/"> December 2018</option><option value="https://via-internet.de/blog/2018/11/"> November 2018</option><option value="https://via-internet.de/blog/2018/09/"> September 2018</option><option value="https://via-internet.de/blog/2018/08/"> August 2018</option><option value="https://via-internet.de/blog/2018/07/"> July 2018</option><option value="https://via-internet.de/blog/2018/03/"> March 2018</option><option value="https://via-internet.de/blog/2018/02/"> February 2018</option><option value="https://via-internet.de/blog/2018/01/"> January 2018</option><option value="https://via-internet.de/blog/2017/12/"> December 2017</option><option value="https://via-internet.de/blog/2017/07/"> July 2017</option><option value="https://via-internet.de/blog/2017/05/"> May 2017</option><option value="https://via-internet.de/blog/2017/03/"> March 2017</option><option value="https://via-internet.de/blog/2017/02/"> February 2017</option><option value="https://via-internet.de/blog/2016/12/"> December 2016</option><option value="https://via-internet.de/blog/2016/11/"> November 2016</option><option value="https://via-internet.de/blog/2016/10/"> October 2016</option> </select> <script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJhcmNoaXZlcy1kcm9wZG93bi0xIiApOwoJZnVuY3Rpb24gb25TZWxlY3RDaGFuZ2UoKSB7CgkJaWYgKCBkcm9wZG93bi5vcHRpb25zWyBkcm9wZG93bi5zZWxlY3RlZEluZGV4IF0udmFsdWUgIT09ICcnICkgewoJCQlkb2N1bWVudC5sb2NhdGlvbi5ocmVmID0gdGhpcy5vcHRpb25zWyB0aGlzLnNlbGVjdGVkSW5kZXggXS52YWx1ZTsKCQl9Cgl9Cglkcm9wZG93bi5vbmNoYW5nZSA9IG9uU2VsZWN0Q2hhbmdlOwp9KSgpOwoKLyogXV0+ICovCg=="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="search-1" class="widget widget_search wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Search</h4><form method="get" id="searchform" class="input-group" action="https://via-internet.de/blog/"> <input type="text" class="form-control" placeholder="Search" name="s" id="s"><div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button></div></form></aside></div></div></div><div class="site-info text-center"> Copyright © 2024 | Powered by <a href="//wordpress.org/">WordPress</a> <span class="sep"> | </span> Aasta Blog theme by <a target="_blank" href="//themearile.com/">ThemeArile</a></div></footer><div class="page-scroll-up"><a href="#totop"><i class="fa fa-angle-up"></i></a></div><div id="cookie-law-info-bar" data-nosnippet="true" data-cli-style="cli-style-v2" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: inherit; bottom: 0px; position: fixed;"><span><div class="cli-bar-container cli-style-v2"><div class="cli-bar-message">We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.</div><div class="cli-bar-btn_container"><a role="button" class="medium cli-plugin-button cli-plugin-main-button cli_settings_button" style="margin: 0px 5px 0px 0px; color: rgb(51, 51, 51); background-color: rgb(222, 223, 224);">Cookie Settings</a><a id="wt-cli-accept-all-btn" role="button" data-cli_action="accept_all" class="wt-cli-element medium cli-plugin-button wt-cli-accept-all-btn cookie_action_close_header cli_action_button" style="color: rgb(255, 255, 255); background-color: rgb(97, 162, 41);">Accept All</a></div></div></span></div><div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); position: fixed; font-family: inherit; width: auto; bottom: 0px; right: 100px; display: none;"><span id="cookie_hdr_showagain">Manage consent</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true"><div class="cli-modal-dialog" role="document"><div class="cli-modal-content cli-bar-popup"> <button type="button" class="cli-modal-close" id="cliModalClose"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg> <span class="wt-cli-sr-only">Close</span> </button><div class="cli-modal-body"><div class="cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-privacy-overview"><h4>Privacy Overview</h4><div class="cli-privacy-content"><div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ...</div></div> <a class="cli-privacy-readmore" aria-label="Show more" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a></div></div><div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container"><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab"> Necessary </a><div class="wt-cli-necessary-checkbox"> <input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked"> <label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label></div> <span class="cli-necessary-caption">Always Enabled</span></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="necessary"><div class="wt-cli-cookie-description"> Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.<table class="cookielawinfo-row-cat-table cookielawinfo-winter"><thead><tr><th class="cookielawinfo-column-1">Cookie</th><th class="cookielawinfo-column-3">Duration</th><th class="cookielawinfo-column-4">Description</th></tr></thead><tbody><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-analytics</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-functional</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-necessary</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-others</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-performance</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">viewed_cookie_policy</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.</td></tr></tbody></table></div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="functional" data-toggle="cli-toggle-tab"> Functional </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-functional" class="cli-user-preference-checkbox" data-id="checkbox-functional"> <label for="wt-cli-checkbox-functional" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Functional</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="functional"><div class="wt-cli-cookie-description"> Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="performance" data-toggle="cli-toggle-tab"> Performance </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-performance" class="cli-user-preference-checkbox" data-id="checkbox-performance"> <label for="wt-cli-checkbox-performance" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Performance</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="performance"><div class="wt-cli-cookie-description"> Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="analytics" data-toggle="cli-toggle-tab"> Analytics </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-analytics" class="cli-user-preference-checkbox" data-id="checkbox-analytics"> <label for="wt-cli-checkbox-analytics" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Analytics</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="analytics"><div class="wt-cli-cookie-description"> Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="advertisement" data-toggle="cli-toggle-tab"> Advertisement </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-advertisement" class="cli-user-preference-checkbox" data-id="checkbox-advertisement"> <label for="wt-cli-checkbox-advertisement" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Advertisement</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="advertisement"><div class="wt-cli-cookie-description"> Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="others" data-toggle="cli-toggle-tab"> Others </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-others" class="cli-user-preference-checkbox" data-id="checkbox-others"> <label for="wt-cli-checkbox-others" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Others</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="others"><div class="wt-cli-cookie-description"> Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.</div></div></div></div></div></div></div></div><div class="cli-modal-footer"><div class="wt-cli-element cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-tab-footer wt-cli-privacy-overview-actions"> <a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a></div></div></div></div></div></div></div></div><div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div><div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div> <script defer="" src="data:text/javascript;base64,DQogICAgICAgICAgICBmdW5jdGlvbiBfa2F0ZXhSZW5kZXIocm9vdEVsZW1lbnQpIHsNCiAgICAgICAgICAgICAgICBjb25zdCBlbGVzID0gcm9vdEVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgiLmthdGV4LWVxOm5vdCgua2F0ZXgtcmVuZGVyZWQpIik7DQogICAgICAgICAgICAgICAgZm9yKGxldCBpZHg9MDsgaWR4IDwgZWxlcy5sZW5ndGg7IGlkeCsrKSB7DQogICAgICAgICAgICAgICAgICAgIGNvbnN0IGVsZSA9IGVsZXNbaWR4XTsNCiAgICAgICAgICAgICAgICAgICAgZWxlLmNsYXNzTGlzdC5hZGQoImthdGV4LXJlbmRlcmVkIik7DQogICAgICAgICAgICAgICAgICAgIHRyeSB7DQogICAgICAgICAgICAgICAgICAgICAgICBrYXRleC5yZW5kZXIoDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxlLnRleHRDb250ZW50LA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZSwNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXlNb2RlOiBlbGUuZ2V0QXR0cmlidXRlKCJkYXRhLWthdGV4LWRpc3BsYXkiKSA9PT0gJ3RydWUnLA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aHJvd09uRXJyb3I6IGZhbHNlDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgKTsNCiAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChuKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUuc3R5bGUuY29sb3I9InJlZCI7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUudGV4dENvbnRlbnQgPSBuLm1lc3NhZ2U7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGZ1bmN0aW9uIGthdGV4UmVuZGVyKCkgew0KICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihkb2N1bWVudCk7DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoIkRPTUNvbnRlbnRMb2FkZWQiLCBmdW5jdGlvbigpIHsNCiAgICAgICAgICAgICAgICBrYXRleFJlbmRlcigpOw0KDQogICAgICAgICAgICAgICAgLy8gUGVyZm9ybSBhIEthVGVYIHJlbmRlcmluZyBzdGVwIHdoZW4gdGhlIERPTSBpcyBtdXRhdGVkLg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcihmdW5jdGlvbihtdXRhdGlvbnMpIHsNCiAgICAgICAgICAgICAgICAgICAgW10uZm9yRWFjaC5jYWxsKG11dGF0aW9ucywgZnVuY3Rpb24obXV0YXRpb24pIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmIChtdXRhdGlvbi50YXJnZXQgJiYgbXV0YXRpb24udGFyZ2V0IGluc3RhbmNlb2YgRWxlbWVudCkgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihtdXRhdGlvbi50YXJnZXQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgICAgICB9KTsNCg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2YXRpb25Db25maWcgPSB7DQogICAgICAgICAgICAgICAgICAgIHN1YnRyZWU6IHRydWUsDQogICAgICAgICAgICAgICAgICAgIGNoaWxkTGlzdDogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgY2hhcmFjdGVyRGF0YTogdHJ1ZQ0KICAgICAgICAgICAgICAgIH07DQoNCiAgICAgICAgICAgICAgICBrYXRleE9ic2VydmVyLm9ic2VydmUoZG9jdW1lbnQuYm9keSwga2F0ZXhPYnNlcnZhdGlvbkNvbmZpZyk7DQogICAgICAgICAgICB9KTsNCg0KICAgICAgICA="></script> <style type="text/css">.theme-testimonial { background-image: url(https://via-internet.de/blog/wp-content/themes/aasta-blog/assets/img/theme-bg.jpg); background-size: cover; background-position: center center; }</style> <script defer="" src="data:text/javascript;base64,CgkvLyBUaGlzIEpTIGFkZGVkIGZvciB0aGUgVG9nZ2xlIGJ1dHRvbiB0byB3b3JrIHdpdGggdGhlIGZvY3VzIGVsZW1lbnQuCgkJaWYgKHdpbmRvdy5pbm5lcldpZHRoIDwgOTkyKSB7CgkJCWRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBmdW5jdGlvbihlKSB7CgkJCWxldCBpc1RhYlByZXNzZWQgPSBlLmtleSA9PT0gJ1RhYicgfHwgZS5rZXlDb2RlID09PSA5OwoJCQkJaWYgKCFpc1RhYlByZXNzZWQpIHsKCQkJCQlyZXR1cm47CgkJCQl9CgkJCQkKCQkJY29uc3QgIGZvY3VzYWJsZUVsZW1lbnRzID0KCQkJCSdidXR0b24sIFtocmVmXSwgaW5wdXQsIHNlbGVjdCwgdGV4dGFyZWEsIFt0YWJpbmRleF06bm90KFt0YWJpbmRleD0iLTEiXSknOwoJCQljb25zdCBtb2RhbCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5uYXZiYXIubmF2YmFyLWV4cGFuZC1sZycpOyAvLyBzZWxlY3QgdGhlIG1vZGFsIGJ5IGl0J3MgaWQKCgkJCWNvbnN0IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCA9IG1vZGFsLnF1ZXJ5U2VsZWN0b3JBbGwoZm9jdXNhYmxlRWxlbWVudHMpWzBdOyAvLyBnZXQgZmlyc3QgZWxlbWVudCB0byBiZSBmb2N1c2VkIGluc2lkZSBtb2RhbAoJCQljb25zdCBmb2N1c2FibGVDb250ZW50ID0gbW9kYWwucXVlcnlTZWxlY3RvckFsbChmb2N1c2FibGVFbGVtZW50cyk7CgkJCWNvbnN0IGxhc3RGb2N1c2FibGVFbGVtZW50ID0gZm9jdXNhYmxlQ29udGVudFtmb2N1c2FibGVDb250ZW50Lmxlbmd0aCAtIDFdOyAvLyBnZXQgbGFzdCBlbGVtZW50IHRvIGJlIGZvY3VzZWQgaW5zaWRlIG1vZGFsCgoJCQkgIGlmIChlLnNoaWZ0S2V5KSB7IC8vIGlmIHNoaWZ0IGtleSBwcmVzc2VkIGZvciBzaGlmdCArIHRhYiBjb21iaW5hdGlvbgoJCQkJaWYgKGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQgPT09IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCkgewoJCQkJICBsYXN0Rm9jdXNhYmxlRWxlbWVudC5mb2N1cygpOyAvLyBhZGQgZm9jdXMgZm9yIHRoZSBsYXN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsKCQkJCX0KCQkJICB9IGVsc2UgeyAvLyBpZiB0YWIga2V5IGlzIHByZXNzZWQKCQkJCWlmIChkb2N1bWVudC5hY3RpdmVFbGVtZW50ID09PSBsYXN0Rm9jdXNhYmxlRWxlbWVudCkgeyAvLyBpZiBmb2N1c2VkIGhhcyByZWFjaGVkIHRvIGxhc3QgZm9jdXNhYmxlIGVsZW1lbnQgdGhlbiBmb2N1cyBmaXJzdCBmb2N1c2FibGUgZWxlbWVudCBhZnRlciBwcmVzc2luZyB0YWIKCQkJCSAgZmlyc3RGb2N1c2FibGVFbGVtZW50LmZvY3VzKCk7IC8vIGFkZCBmb2N1cyBmb3IgdGhlIGZpcnN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsJCQkgIAoJCQkJfQoJCQkgIH0KCgkJCX0pOwoJCX0K"></script> <script defer="" src="data:text/javascript;base64,CiAgICAgICAgbmV3Q29udGFpbmVyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3BhbicpOwogICAgICAgIG5ld0NvbnRhaW5lci5zdHlsZS5zZXRQcm9wZXJ0eSgnZGlzcGxheScsJ25vbmUnLCcnKTsKICAgICAgICBuZXdOb2RlICAgICAgICAgICA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NjcmlwdCcpOwogICAgICAgIG5ld05vZGUudHlwZSAgICAgID0gJ21hdGgvdGV4JzsKICAgICAgICBuZXdOb2RlLmlubmVySFRNTCA9ICdcXG5ld2NvbW1hbmR7XFxlcHN9e1xcdmFyZXBzaWxvbn1cblxcbmV3Y29tbWFuZHtcXFJSfXtcXG1hdGhiYntSfX1cblxcbmV3Y29tbWFuZHtcXHJkfXtcXG9wZXJhdG9ybmFtZXtkfX1cblxcbmV3Y29tbWFuZHtcXHNldH1bMV17XFxsZWZ0XFx7IzFcXHJpZ2h0XFx9fSc7CiAgICAgICAgbmV3Q29udGFpbmVyLmFwcGVuZENoaWxkKG5ld05vZGUpOwogICAgICAgIGRvY3VtZW50LmJvZHkuaW5zZXJ0QmVmb3JlKG5ld0NvbnRhaW5lcixkb2N1bWVudC5ib2R5LmZpcnN0Q2hpbGQpOwogICAgICAgIA=="></script> <script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], displayMath: [['$$', '$$'], ["\\[", "\\]"]], processEscapes: true }, TeX: { equationNumbers: {autoNumber: "AMS", useLabelIds: true} }, });</script> <link rel="stylesheet" id="cookie-law-info-table-css" href="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_26b4f0c3c1bcf76291fa4952fb7f04fb.php?ver=3.2.8" type="text/css" media="all"> <script defer="" id="toc-front-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgdG9jcGx1cyA9IHsidmlzaWJpbGl0eV9zaG93IjoiQW56ZWlnZW4iLCJ2aXNpYmlsaXR5X2hpZGUiOiJBdXNibGVuZGVuIiwidmlzaWJpbGl0eV9oaWRlX2J5X2RlZmF1bHQiOiIxIiwid2lkdGgiOiJBdXRvIn07Ci8qIF1dPiAqLwo="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_93d421fd7576b0ca9c359ffe2fa16113.php?ver=20151215" id="aasta-skip-link-focus-fix-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.7.2" id="katex-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=UnpSS38vU0joHj5" id="enlighterjs-js"></script> <script defer="" id="enlighterjs-js-after" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwohZnVuY3Rpb24oZSxuKXtpZigidW5kZWZpbmVkIiE9dHlwZW9mIEVubGlnaHRlckpTKXt2YXIgbz17InNlbGVjdG9ycyI6eyJibG9jayI6InByZS5FbmxpZ2h0ZXJKU1JBVyIsImlubGluZSI6ImNvZGUuRW5saWdodGVySlNSQVcifSwib3B0aW9ucyI6eyJpbmRlbnQiOjQsImFtcGVyc2FuZENsZWFudXAiOnRydWUsImxpbmVob3ZlciI6dHJ1ZSwicmF3Y29kZURiY2xpY2siOnRydWUsInRleHRPdmVyZmxvdyI6ImJyZWFrIiwibGluZW51bWJlcnMiOmZhbHNlLCJ0aGVtZSI6ImNsYXNzaWMiLCJsYW5ndWFnZSI6ImdlbmVyaWMiLCJyZXRhaW5Dc3NDbGFzc2VzIjpmYWxzZSwiY29sbGFwc2UiOmZhbHNlLCJ0b29sYmFyT3V0ZXIiOiIiLCJ0b29sYmFyVG9wIjoie0JUTl9SQVd9e0JUTl9DT1BZfXtCVE5fV0lORE9XfXtCVE5fV0VCU0lURX0iLCJ0b29sYmFyQm90dG9tIjoiIn19OyhlLkVubGlnaHRlckpTSU5JVD1mdW5jdGlvbigpe0VubGlnaHRlckpTLmluaXQoby5zZWxlY3RvcnMuYmxvY2ssby5zZWxlY3RvcnMuaW5saW5lLG8ub3B0aW9ucyl9KSgpfWVsc2V7KG4mJihuLmVycm9yfHxuLmxvZyl8fGZ1bmN0aW9uKCl7fSkoIkVycm9yOiBFbmxpZ2h0ZXJKUyByZXNvdXJjZXMgbm90IGxvYWRlZCB5ZXQhIil9fSh3aW5kb3csY29uc29sZSk7Ci8qIF1dPiAqLwo="></script> <script type="text/javascript" id="jetpack-stats-js-before">_stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"195943667\",\"post\":\"0\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]); _stq.push([ "clickTrackerInit", "195943667", "0" ]);</script> <script type="text/javascript" src="https://stats.wp.com/e-202510.js" id="jetpack-stats-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="gt_widget_script_62673750-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['62673750'] = {"default_language":"de","languages":["de","en","fr","zh-CN","nl","it","es","da","pt"],"url_structure":"none","native_language_names":1,"flag_style":"2d","flag_size":24,"wrapper_selector":"#gtranslate_menu_wrapper_37060","alt_flags":[],"switcher_open_direction":"top","switcher_horizontal_position":"inline","switcher_text_color":"#666","switcher_arrow_color":"#666","switcher_border_color":"#ccc","switcher_background_color":"#fff","switcher_background_shadow_color":"#efefef","switcher_background_hover_color":"#fff","dropdown_text_color":"#000","dropdown_hover_color":"#fff","dropdown_background_color":"#eee","flags_location":"\/blog\/wp-content\/plugins\/gtranslate\/flags\/"};</script><script src="https://via-internet.de/blog/wp-content/plugins/gtranslate/js/dwf.js?ver=6.7.2" data-no-optimize="1" data-no-minify="1" data-gt-orig-url="/blog/2020/02/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="62673750" defer=""></script><script defer="" id="wpcd-scripts-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgd3BjZGFqYXggPSB7ImFqYXh1cmwiOiJodHRwczpcL1wvdmlhLWludGVybmV0LmRlXC9ibG9nXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAifTsKLyogXV0+ICovCg=="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_231b95969d2321feeaab8fdd8121442a.php" id="wpcd-scripts-js"></script> <script defer="" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js&ver=2.7.5" id="mathjax-js"></script> <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async="" src="https://via-internet.de/blog/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js"></script> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Page Caching using Disk: Enhanced Lazy Loading Database Caching 2/163 queries in 0.254 seconds using Disk Served from: via-internet.de @ 2025-03-08 07:08:06 by W3 Total Cache --></pre></pre></pre></pre> { { { <h1 style="text-align: center">BUTTONS</h1> { Save everything and view at the resulting page What happens, from showing the page, clicking on the link until you see the final result: Django create the side menu item Cards with the corresponding link localhost:9000/cards which will be the destination page, if you click on the link and finally, Django creates the desired page (through view.py) Namespaces and structure Now, think about the names, e. g. buttons and cards in our Components. Your project is getting bigger and you plan to add an additional page info with general information for both Components and Utilities menu. So, you will have to additional files, for example dashboard/apps/components/info/views.py dashboard/apps/utilities/info/views.py The corresponding url mapping (urls.py) could look like this: Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter import dashboard.apps.components.info.views as ComponentInfoViews import dashboard.apps.utilities.info.views as UtilitiesInfoViews urlpatterns = [ path('', include('dashboard.apps.urls')), path('info', ComponentInfoViews.IndexView.as_view(), name='info'), path('info', UtilitiesInfoViews.IndexView.as_view(), name='info'), import dashboard.apps.components.info.views as ComponentInfoViews import dashboard.apps.utilities.info.views as UtilitiesInfoViews urlpatterns = [ path('', include('dashboard.apps.urls')), path('info', ComponentInfoViews.IndexView.as_view(), name='info'), path('info', UtilitiesInfoViews.IndexView.as_view(), name='info'), import dashboard.apps.components.info.views as ComponentInfoViews import dashboard.apps.utilities.info.views as UtilitiesInfoViews urlpatterns = [ path('', include('dashboard.apps.urls')), path('info', ComponentInfoViews.IndexView.as_view(), name='info'), path('info', UtilitiesInfoViews.IndexView.as_view(), name='info'), Two pages with the same name (info) in different views.py! Of course, we could choose different names and link (component_info, utilities_info), but this not a good programming style. We will choose a more modern way of programming Spread the responsibility over separate, independent modules Name these modules with different names What does this mean? We will have a separate module frontend, only responsible for the start page (frontend) a separate module components, responsible for all components a separate module utilities, responsible for all utilities a separate module pages, responsible for all pages Resulting folder structure and file content File dashbard/urls.py Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter urlpatterns = [ path('', include('dashboard.apps.urls')), path('admin/', admin.site.urls), ] urlpatterns = [ path('', include('dashboard.apps.urls')), path('admin/', admin.site.urls), ] urlpatterns = [ path('', include('dashboard.apps.urls')), path('admin/', admin.site.urls), ] File dashbard/apps/urls.py Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter from django.urls import path from django.urls.conf import include from dashboard.apps.frontend.views import IndexView app_name = 'app' urlpatterns = [ path('', IndexView.as_view(), name='index'), path('pages/', include('dashboard.apps.pages.urls')), path('components/', include('dashboard.apps.components.urls')), path('utilities/', include('dashboard.apps.utilities.urls')), ] from django.urls import path from django.urls.conf import include from dashboard.apps.frontend.views import IndexView app_name = 'app' urlpatterns = [ path('', IndexView.as_view(), name='index'), path('pages/', include('dashboard.apps.pages.urls')), path('components/', include('dashboard.apps.components.urls')), path('utilities/', include('dashboard.apps.utilities.urls')), ] from django.urls import path from django.urls.conf import include from dashboard.apps.frontend.views import IndexView app_name = 'app' urlpatterns = [ path('', IndexView.as_view(), name='index'), path('pages/', include('dashboard.apps.pages.urls')), path('components/', include('dashboard.apps.components.urls')), path('utilities/', include('dashboard.apps.utilities.urls')), ] File dashbard/apps/components/urls.py Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter from django.urls import path import dashboard.apps.components.buttons.views as ButtonsViews import dashboard.apps.components.cards.views as CardsViews app_name = 'components' urlpatterns = [ path('', ButtonsViews.IndexView.as_view(), name='index'), path('buttons/', ButtonsViews.IndexView.as_view(), name='buttons'), path('cards/', CardsViews.IndexView.as_view(), name='cards'), ] from django.urls import path import dashboard.apps.components.buttons.views as ButtonsViews import dashboard.apps.components.cards.views as CardsViews app_name = 'components' urlpatterns = [ path('', ButtonsViews.IndexView.as_view(), name='index'), path('buttons/', ButtonsViews.IndexView.as_view(), name='buttons'), path('cards/', CardsViews.IndexView.as_view(), name='cards'), ] from django.urls import path import dashboard.apps.components.buttons.views as ButtonsViews import dashboard.apps.components.cards.views as CardsViews app_name = 'components' urlpatterns = [ path('', ButtonsViews.IndexView.as_view(), name='index'), path('buttons/', ButtonsViews.IndexView.as_view(), name='buttons'), path('cards/', CardsViews.IndexView.as_view(), name='cards'), ] File dashbard/apps/utilities/urls.py Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter from django.urls import path import dashboard.apps.utilities.colors.views as ColorsViews import dashboard.apps.utilities.borders.views as BordersViews import dashboard.apps.utilities.animations.views as AnimationsViews import dashboard.apps.utilities.others.views as OthersViews app_name = 'utilities' urlpatterns = [ path('', BordersViews.IndexView.as_view(), name='index'), path('animations/', AnimationsViews.IndexView.as_view(), name='animations'), path('borders/', BordersViews.IndexView.as_view(), name='borders'), path('colors/', ColorsViews.IndexView.as_view(), name='colors'), path('others/', OthersViews.IndexView.as_view(), name='others'), ] from django.urls import path import dashboard.apps.utilities.colors.views as ColorsViews import dashboard.apps.utilities.borders.views as BordersViews import dashboard.apps.utilities.animations.views as AnimationsViews import dashboard.apps.utilities.others.views as OthersViews app_name = 'utilities' urlpatterns = [ path('', BordersViews.IndexView.as_view(), name='index'), path('animations/', AnimationsViews.IndexView.as_view(), name='animations'), path('borders/', BordersViews.IndexView.as_view(), name='borders'), path('colors/', ColorsViews.IndexView.as_view(), name='colors'), path('others/', OthersViews.IndexView.as_view(), name='others'), ] from django.urls import path import dashboard.apps.utilities.colors.views as ColorsViews import dashboard.apps.utilities.borders.views as BordersViews import dashboard.apps.utilities.animations.views as AnimationsViews import dashboard.apps.utilities.others.views as OthersViews app_name = 'utilities' urlpatterns = [ path('', BordersViews.IndexView.as_view(), name='index'), path('animations/', AnimationsViews.IndexView.as_view(), name='animations'), path('borders/', BordersViews.IndexView.as_view(), name='borders'), path('colors/', ColorsViews.IndexView.as_view(), name='colors'), path('others/', OthersViews.IndexView.as_view(), name='others'), ] File dashbard/apps/pages/urls.py Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter from django.urls import path import dashboard.apps.pages.blank.views as BlankViews import dashboard.apps.pages.login.views as LoginViews import dashboard.apps.pages.pagenotfound.views as PageNotFoundViews import dashboard.apps.pages.password.views as PasswordViews import dashboard.apps.pages.register.views as RegisterViews import dashboard.apps.pages.charts.views as ChartsViews import dashboard.apps.pages.tables.views as TablesViews app_name = 'pages' urlpatterns = [ path('', ChartsViews.IndexView.as_view(), name='index'), path('blank', BlankViews.IndexView.as_view(), name='blank'), path('charts', ChartsViews.IndexView.as_view(), name='charts'), path('login', LoginViews.IndexView.as_view(), name='login'), path('pagenotfound', PageNotFoundViews.IndexView.as_view(), name='pagenotfound'), path('password', PasswordViews.IndexView.as_view(), name='password'), path('register', RegisterViews.IndexView.as_view(), name='register'), path('tables', TablesViews.IndexView.as_view(), name='tables'), ] from django.urls import path import dashboard.apps.pages.blank.views as BlankViews import dashboard.apps.pages.login.views as LoginViews import dashboard.apps.pages.pagenotfound.views as PageNotFoundViews import dashboard.apps.pages.password.views as PasswordViews import dashboard.apps.pages.register.views as RegisterViews import dashboard.apps.pages.charts.views as ChartsViews import dashboard.apps.pages.tables.views as TablesViews app_name = 'pages' urlpatterns = [ path('', ChartsViews.IndexView.as_view(), name='index'), path('blank', BlankViews.IndexView.as_view(), name='blank'), path('charts', ChartsViews.IndexView.as_view(), name='charts'), path('login', LoginViews.IndexView.as_view(), name='login'), path('pagenotfound', PageNotFoundViews.IndexView.as_view(), name='pagenotfound'), path('password', PasswordViews.IndexView.as_view(), name='password'), path('register', RegisterViews.IndexView.as_view(), name='register'), path('tables', TablesViews.IndexView.as_view(), name='tables'), ] from django.urls import path import dashboard.apps.pages.blank.views as BlankViews import dashboard.apps.pages.login.views as LoginViews import dashboard.apps.pages.pagenotfound.views as PageNotFoundViews import dashboard.apps.pages.password.views as PasswordViews import dashboard.apps.pages.register.views as RegisterViews import dashboard.apps.pages.charts.views as ChartsViews import dashboard.apps.pages.tables.views as TablesViews app_name = 'pages' urlpatterns = [ path('', ChartsViews.IndexView.as_view(), name='index'), path('blank', BlankViews.IndexView.as_view(), name='blank'), path('charts', ChartsViews.IndexView.as_view(), name='charts'), path('login', LoginViews.IndexView.as_view(), name='login'), path('pagenotfound', PageNotFoundViews.IndexView.as_view(), name='pagenotfound'), path('password', PasswordViews.IndexView.as_view(), name='password'), path('register', RegisterViews.IndexView.as_view(), name='register'), path('tables', TablesViews.IndexView.as_view(), name='tables'), ] Let’s finally check the namespace structure: Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter $ find . -name urls.py ./dashboard/urls.py ./dashboard/apps/utilities/urls.py ./dashboard/apps/components/urls.py ./dashboard/apps/urls.py ./dashboard/apps/pages/urls.py $ find . -name urls.py ./dashboard/urls.py ./dashboard/apps/utilities/urls.py ./dashboard/apps/components/urls.py ./dashboard/apps/urls.py ./dashboard/apps/pages/urls.py $ find . -name urls.py ./dashboard/urls.py ./dashboard/apps/utilities/urls.py ./dashboard/apps/components/urls.py ./dashboard/apps/urls.py ./dashboard/apps/pages/urls.py We create three levels for our namespaces: Djane URL File Namespace ./dashboard/urls.py – ./dashboard/apps/urls.py app ./dashboard/apps/utilities/urls.py ./dashboard/apps/components/urls.py ./dashboard/apps/pages/urls.py app:utilities app:components app:pages These namespaces must be used in the template files, for example: Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter <a href="{ <a href="{ <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=""><a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <p>Install the Django Extensions for additional commands:</p> <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><p>Add Django Extensions to the INSTALLED_APPS</p><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 = [ ... 'django_extensions' ]</pre><p>Show URLs and Namespaces (only for out apps, admin urls are removed)</p><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><figure class="wp-block-image size-large"><img decoding="async" width="1676" height="449" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201676%20449'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_55_namespaces.png?fit=700%2C188&ssl=1" alt="" class="wp-image-6078 lazy" data-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" data-sizes="auto, (max-width: 1676px) 100vw, 1676px"></figure><h2 class="wp-block-heading">Preparing required components and pages</h2><p>In summary, these are the steps to create the desired folder structure:</p><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 mkdir -p dashboard/apps/components/cards/templates/cards mkdir -p dashboard/apps/pages/blank/templates/blank mkdir -p dashboard/apps/pages/charts/templates/charts mkdir -p dashboard/apps/pages/login/templates/login mkdir -p dashboard/apps/pages/pagenotfound/templates/pagenotfound mkdir -p dashboard/apps/pages/password/templates/password mkdir -p dashboard/apps/pages/register/templates/register mkdir -p dashboard/apps/pages/tables/templates/tables mkdir -p dashboard/apps/utilities/animations/templates/animations mkdir -p dashboard/apps/utilities/borders/templates/borders mkdir -p dashboard/apps/utilities/colors/templates/colors mkdir -p dashboard/apps/utilities/others/templates/others</pre><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 python3 manage.py startapp cards dashboard/apps/components/cards python3 manage.py startapp blank dashboard/apps/pages/blank python3 manage.py startapp charts dashboard/apps/pages/charts python3 manage.py startapp login dashboard/apps/pages/login python3 manage.py startapp pagenotfound dashboard/apps/pages/pagenotfound python3 manage.py startapp password dashboard/apps/pages/password python3 manage.py startapp register dashboard/apps/pages/register python3 manage.py startapp tables dashboard/apps/pages/tables python3 manage.py startapp animations dashboard/apps/utilities/animations python3 manage.py startapp borders dashboard/apps/utilities/borders python3 manage.py startapp colors dashboard/apps/utilities/colors python3 manage.py startapp others dashboard/apps/utilities/others</pre><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 "{ { { <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 cp base.html dashboard/apps/components/cards/templates/cards cp base.html dashboard/apps/pages/blank/templates/blank cp base.html dashboard/apps/pages/charts/templates/charts cp base.html dashboard/apps/pages/login/templates/login cp base.html dashboard/apps/pages/pagenotfound/templates/pagenotfound cp base.html dashboard/apps/pages/password/templates/password cp base.html dashboard/apps/pages/register/templates/register cp base.html dashboard/apps/pages/tables/templates/tables cp base.html dashboard/apps/utilities/animations/templates/animations cp base.html dashboard/apps/utilities/borders/templates/borders cp base.html dashboard/apps/utilities/colors/templates/colors cp base.html dashboard/apps/utilities/others/templates/others</pre><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><figure class="wp-block-image size-large"><img decoding="async" width="291" height="874" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20291%20874'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_10_folder_structure.png" alt="" class="wp-image-6012 lazy" data-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" data-sizes="auto, (max-width: 291px) 100vw, 291px"></figure><p>Each of the folders has the same structure, for example the buttons component. We will delete some unnecessary files</p><figure class="wp-block-image size-large is-resized"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20293%20284'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_11_app-folder-structure.png" alt="" class="wp-image-6013 lazy" width="293" height="284" data-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" data-sizes="auto, (max-width: 293px) 100vw, 293px"></figure><h2 class="wp-block-heading">Replacing Projects with dynamic data</h2><p>Replacing the static parts with dynamic content could be achieved by the following approach:</p><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><p>The steps are the same for all components (all items of the side menu).</p><p>Find the</p><p>Identify dynamic parts in template</p><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_20_projects_html_old-700x374.png" alt="" class="wp-image-5972 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><figure class="wp-block-image size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data-700x219.png" alt="" class="wp-image-5971 lazy"></figure><figure class="wp-block-table"><table><tbody><tr><td><img decoding="async" width="500" height="278" class="wp-image-5973 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20278'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_42_projects_old_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="157" class="wp-image-5971 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20157'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="279" class="wp-image-5975 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20279'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_44_projects_new_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="151" class="wp-image-5974 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20151'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_43_projects_new_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><h2 class="wp-block-heading">Create templates for side menu pages</h2><p>For every side menu item, their is a corresponding html file in the install folder of the <code>sb-admin-2</code> template:</p><p>Remember the environment variable we create in part 1 for the start of our project</p><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><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 find dashboard/apps install/sb-admin-2 -name *.html</pre><p>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><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><p>Each template base.html should have the following content:</p><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="">{ { { <p>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> <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 class IndexView(generic.TemplateView): template_name = 'buttons/base.html'</pre><p>So, for each template file, we have to</p><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><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=""> <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --></pre><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure><div class="post-content"><div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 22<small class="months">Feb</small></time></a> </span><div class="media-body"><header class="entry-header"><h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/">Django | Build a Dashboard with Django and Bootstrap: Part 2</a></h4></header><div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span></div><div class="entry-content"><p>This is Part 2 of <em>Building a Dashboard with Django and Bootstrap</em>:</p><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><h2 class="wp-block-heading">Introduction</h2><p>If you follow the first part of this blog topic, you have a running Django dashboard.</p><p>But, unfortunately, the content is still static. Let’s review the current state:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"></div></div><p>Perfect. We are done with the basic setup.</p><p>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><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>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><p>We will do this by following these steps:</p><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><h2 class="wp-block-heading">Identify dynamic parts</h2><p>How to find the parts, which are dynamic.</p><p>One way is to ask:</p><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><p>You mostly get the same answers by the question:</p><ul class="wp-block-list"><li>What are the main components of a web page (including navigation and content)</li></ul><p>For answer the first question, take a look at the current page and “name” the areas:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="563" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20563'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/02_elements_of_dashboard_page.png?fit=700%2C394&ssl=1" alt="" class="wp-image-5929 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>So, these “names” are also the answer for the 3. Question:</p><ul class="wp-block-list"><li>sidemenu</li><li>top bar</li><li>content</li></ul><p>And maybe you find additional “names”</p><ul class="wp-block-list"><li>header</li><li>footer</li><li>top menu</li><li>left and right sidebar</li></ul><h2 class="wp-block-heading">Find identified parts in template</h2><p>Next step is, to find the identified parts in our dashboard template</p><p><code>dashboard/templates/site/sb-admin-2/base.html</code></p><p>This is an easy step, because the developer of the SB Admin 2 template documented their template well:</p><figure class="wp-block-image size-large"><img decoding="async" width="2004" height="1706" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202004%201706'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/03_elements_of_dashboard_in_codepage.png?fit=700%2C596&ssl=1" alt="" class="wp-image-5932 lazy" data-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" data-sizes="auto, (max-width: 2004px) 100vw, 2004px"></figure><p>Looking into the code of the template, you will find comment lines describing the content:</p><ul class="wp-block-list"><li><code><!-- Sidebar --></code></li><li><code><!-- Topbar --></code></li><li><code><!-- Top Search --></code></li><li><code><!-- Top Navbar --></code></li><li><code><!-- Begin Page Content--></code></li></ul><p>So, it is obvious what do to next:</p><ul class="wp-block-list"><li>get the <em>dynamic</em> part (lines under)<code><!-- Begin Page Content--></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><p>This is the way, the template system of django works:</p><figure class="wp-block-image size-large"><img decoding="async" width="954" height="251" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20954%20251'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/21_combine_template_and_content_ui.png?fit=700%2C184&ssl=1" alt="" class="wp-image-5944 lazy" data-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" data-sizes="auto, (max-width: 954px) 100vw, 954px"></figure><p>Let’s explain this with a simple example: the page title</p><p>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><p>To achieve this, we have to tell our template system the following:</p><figure class="wp-block-image size-large"><img decoding="async" width="940" height="209" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20940%20209'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/22_combine_template_and_content_code.png?fit=700%2C156&ssl=1" alt="" class="wp-image-5943 lazy" data-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" data-sizes="auto, (max-width: 940px) 100vw, 940px"></figure><p>Now, we do the same with the content:</p><figure class="wp-block-image size-large"><img decoding="async" width="983" height="457" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20983%20457'%3E%3C/svg%3E" data-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&ssl=1" alt="" class="wp-image-5947 lazy" data-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" data-sizes="auto, (max-width: 983px) 100vw, 983px"></figure><p>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><p>Well, let’s make a test and try to include a different content in the dashboard template.</p><p>Change the lines, where we include the content into this:</p><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="">{ MISSING CONTENT { <p>Did you notice the other name of the content: <strong>content_missing</strong>?</p> <p>Change the template, save the file and have a look at the result:</p> <figure class="wp-block-image size-large"><img decoding="async" width="2328" height="448" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202328%20448'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/41_missing_content.png?fit=700%2C135&ssl=1" alt="" class="wp-image-5949 lazy" data-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" data-sizes="auto, (max-width: 2328px) 100vw, 2328px"></figure> <p>Change content back, so your template is working again:</p> <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="">{ MISSING CONTENT { <p>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> </pre></pre></div> </div> </div> </div> </article><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"> <figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure> <div class="post-content"> <div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 21<small class="months">Feb</small></time></a> </span> <div class="media-body"> <header class="entry-header"> <h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/">Django | Build a Dashboard with Django and Bootstrap: Part 1</a></h4> </header> <div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span> </div> <div class="entry-content"> <p>This is Part 1 of <em>Building a Dashboard with Django and Bootstrap</em>:</p> <ul class="wp-block-list"> <li><strong>Part 1: Building a base Django project</strong></li> <li><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/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/build-a-dashboard-with-django-and-bootstrap-part-4/">Part 4: Deploy Django App to Azure</a></li> </ul> <h2 class="wp-block-heading">Introduction</h2> <p>Building a complete web app isn’t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don’t using tools or framework, which helps and makes our life easier. <a href="https://www.djangoproject.com/"><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824465754606598455505">Django</gwmw></a> is one of these frameworks:</p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468379037630016661">Django</gwmw> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development</p> </blockquote> <p>So, let’s get started.</p> <h3 class="wp-block-heading">Create project</h3> <p>For subsequent steps, we will remember our starting directory </p> <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="">❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder...</pre><p>First step is to create our main Django project</p><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="">❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate</pre><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="">❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK.</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="782" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20782'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png" alt="" class="wp-image-9675 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-300x229.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-768x587.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1536x1173.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-2048x1564.png 2048w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure></div><h3 class="wp-block-heading">Create first apps</h3><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="">❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend</pre><p>The folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="970" height="436" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20970%20436'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png" alt="" class="wp-image-9690 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png 970w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-300x135.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-768x345.png 768w" data-sizes="auto, (max-width: 970px) 100vw, 970px"></figure><h2 class="wp-block-heading">Add new apps to project</h2><p>Modify name in <code>apps/core/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core'</pre><p>Modify name in <code>apps/frontend/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend'</pre><p>Modify <code>dashboard/settings.py</code></p><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="">INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ]</pre><p>Modify <code>dashboard/urls.py</code></p><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="">from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ]</pre><h3 class="wp-block-heading">Create view</h3><p>Modify view in <code>apps/frontend/views.py</code></p><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="">from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html'</pre><h3 class="wp-block-heading">Create template for frontend View</h3><p>Create template file <code>apps/frontend/templates/frontend/index.html</code></p><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=""><h1> Frontend: Let's get started </h1></pre><h3 class="wp-block-heading">Add template folder to configuration</h3><p>In <kbd>dashboard/settings.py</kbd>, add template folder to TEMPLATES</p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ]</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="624" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20624%20186'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png" alt="" class="wp-image-8442 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png 624w, https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2-300x89.png 300w" data-sizes="auto, (max-width: 624px) 100vw, 624px"></figure></div><h2 class="wp-block-heading">Current folder Structure</h2><p>So far, we have the following folder structure</p><figure class="wp-block-image size-full"><img decoding="async" width="690" height="982" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20690%20982'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png" alt="" class="wp-image-9691 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png 690w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001-211x300.png 211w" data-sizes="auto, (max-width: 690px) 100vw, 690px"></figure><h2 class="wp-block-heading">Prepare for administrate your project</h2><h3 class="wp-block-heading">Create admin user</h3><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="">❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully.</pre><h2 class="wp-block-heading">Add Bootstrap support</h2><p>Download requires files for Bootstrap, jQuery and PopperJS.</p><p>Or download <a href="https://via-internet.de/blog/wp-content/uploads/2021/10/static.zip">this </a>prepared archiv and unzip the files unter <code>dashboard</code>.</p><p>Run the scripts in <kbd>$DASHBOARD_ROOT</kbd></p><p>Hint: You need to install <a href="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3" data-type="link" data-id="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3">PowerShell</a> before running the scripts.</p><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 > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1</pre><p><kbd>download_bootstrap.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' </pre><p><kbd>download_jquery.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map</pre><p><kbd>download_popperjs.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js</pre><p>Finally, the folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="474" height="660" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20474%20660'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png" alt="" class="wp-image-9679 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png 474w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008-215x300.png 215w" data-sizes="auto, (max-width: 474px) 100vw, 474px"></figure><h3 class="wp-block-heading">Create site templates in <code>dashboard/templates/site</code></h3><h3 class="wp-block-heading">Add templates path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470508427730698282">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="5" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ...</pre><h3 class="wp-block-heading"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-2" id="gwmw-15824470715450370185521">Add static</gwmw> path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470715451132153545">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><p>Add as first line</p><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="">import os</pre><p>Then add / replace at <kbd>STATIC_URL=...</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="2-4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ]</pre><h2 class="wp-block-heading">Modify frontend view template</h2><p>File <code>dashboard/apps/frontend/templates/index.html</code></p><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="">{ { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { <p>File <kbd>dashboard/apps/frontend/templates/site/base.html</kbd></p> <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="">{ <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html></pre><h2 class="wp-block-heading">View current status of project</h2><figure class="wp-block-image size-large"><img decoding="async" width="1024" height="778" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20778'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png" alt="" class="wp-image-9682 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-300x228.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-768x583.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1536x1167.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap.png 1714w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure><h2 class="wp-block-heading">Final Result</h2><p>The final result could be found <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project" data-type="link" data-id="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project">here</a>.</p><h2 class="wp-block-heading">Add dashboard from an existing template</h2><p>For a first start, we will use this <a href="https://startbootstrap.com/previews/sb-admin-2/"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824470188863680783027">sb</gwmw>-admin-2 dashboard</a> template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>:</p><figure class="wp-block-image size-full"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/61_dashboard.png" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><h2 class="wp-block-heading">Download required files</h2><p>Bootstrap templates consist of at least 3 different types of files</p><ul class="wp-block-list"><li>main index.html page, responsible for collection all elements and set up your page</li><li>CSS files defining the style of your page</li><li>JavaScript files, containing needed frameworks and code</li></ul><p>So, first start by downloading the sample template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>. Be sure, you start in our project root folder:</p><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="">❯ cd $DASHBOARD_ROOT</pre><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="">❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 </pre><p>Next, find out, what we need for our template in addition to the file <kbd>index.html</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)="</pre><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script></pre><p>That’s a lot of additional files.</p><p>To keep the file structure consistent, these files should be stored under the <kbd>dashboard/static</kbd> folder (same as the bootstrap files before).</p><p>To achieve this, there are <gwmw class="ginger-module-highlighter-mistake-type-2" id="gwmw-15824469384628631344488">two possi</gwmw>bilities:</p><ul class="wp-block-list"><li>Create desired folder and copy each of the source files to the destination folder</li><li><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824469457060378385283">Copy</gwmw> the complete static folder from the <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap">Github Repository</a> for this post.</li></ul><p>We use the second option to keep the focus on creating our dashboard.<gwmw style="display:none;"></gwmw></p><p>So, first, clone the repository:</p><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="">cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap</pre><p>Then, copy the requred files</p><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="">cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard</pre><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 -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard</pre><p>Having everything needed for the dashboard template, the next step is to modify the front-end template</p><p>File <code>dashboard/apps/frontend/templates/frontend/index.html</code></p> <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="">{ { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div></pre></pre></div></div></div></div></article><footer class="site-footer"><div class="container"><div class="row footer-sidebar"><div class="col-lg-3 col-md-6 col-sm-12"><aside id="categories-1" class="widget widget_categories wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Categories</h4><form action="https://via-internet.de/blog" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name="cat" id="cat" class="postform"><option value="-1">Select Category</option><option class="level-0" value="2">3D Printing (1)</option><option class="level-0" value="168">AI (3)</option><option class="level-0" value="1">Allgemein (32)</option><option class="level-0" value="151">Anaconda (1)</option><option class="level-0" value="4">Apache (3)</option><option class="level-0" value="5">Apache Spark (3)</option><option class="level-0" value="6">Apache Zeppelin (1)</option><option class="level-0" value="7">Arduino (1)</option><option class="level-0" value="160">Astro (3)</option><option class="level-0" value="9">Azure (7)</option><option class="level-1" value="20"> Databricks (4)</option><option class="level-1" value="87"> Widgets (1)</option><option class="level-0" value="158">BeautifulSoup (1)</option><option class="level-0" value="10">Bootstrap (6)</option><option class="level-0" value="12">Capacitor (1)</option><option class="level-0" value="13">CI/CD (3)</option><option class="level-1" value="40"> Jenkins (3)</option><option class="level-0" value="153">Container (9)</option><option class="level-1" value="22"> Docker (8)</option><option class="level-2" value="43"> Kubernetes (2)</option><option class="level-1" value="154"> Podman (1)</option><option class="level-0" value="16">Cookbook (30)</option><option class="level-0" value="17">CSS (3)</option><option class="level-0" value="135">Daily (6)</option><option class="level-0" value="144">Dart (1)</option><option class="level-0" value="18">Data Science (1)</option><option class="level-0" value="19">Database (2)</option><option class="level-1" value="50"> MySQL (1)</option><option class="level-1" value="58"> PostgreSQL (1)</option><option class="level-0" value="96">FastAPI (1)</option><option class="level-0" value="27">Generell (1)</option><option class="level-0" value="28">Git und Github (6)</option><option class="level-0" value="157">Grafana (1)</option><option class="level-0" value="31">Hadoop (1)</option><option class="level-0" value="163">Hexo (1)</option><option class="level-0" value="33">Homebrew (1)</option><option class="level-0" value="165">HyperDiv (1)</option><option class="level-0" value="34">Ionic 3 (5)</option><option class="level-0" value="35">Ionic 4 (9)</option><option class="level-0" value="39">Jekyll (1)</option><option class="level-0" value="41">Jupyter (2)</option><option class="level-0" value="42">Keycloak (3)</option><option class="level-0" value="137">Languages (60)</option><option class="level-1" value="14"> ClojureScript (1)</option><option class="level-1" value="15"> Cobol (1)</option><option class="level-1" value="24"> Erlang (2)</option><option class="level-2" value="94"> Elixir (2)</option><option class="level-1" value="149"> F# (2)</option><option class="level-1" value="29"> Go (1)</option><option class="level-1" value="30"> Groovy (1)</option><option class="level-1" value="32"> Haskell (3)</option><option class="level-1" value="36"> iPython (1)</option><option class="level-1" value="37"> Java (5)</option><option class="level-1" value="38"> Javascript (7)</option><option class="level-1" value="56"> Perl (1)</option><option class="level-1" value="57"> PHP (13)</option><option class="level-1" value="63"> PureScript (1)</option><option class="level-1" value="65"> Python (19)</option><option class="level-2" value="141"> PIP (1)</option><option class="level-1" value="68"> Rust (3)</option><option class="level-1" value="75"> Swift (1)</option><option class="level-0" value="99">Laravel (16)</option><option class="level-0" value="44">Learning (5)</option><option class="level-0" value="45">Linux (1)</option><option class="level-0" value="46">macOS (1)</option><option class="level-0" value="47">matter.js (1)</option><option class="level-0" value="48">Maven (1)</option><option class="level-0" value="49">Mobile Development (9)</option><option class="level-0" value="51">NestJS (1)</option><option class="level-0" value="156">Nicepage (1)</option><option class="level-0" value="52">Node.js (2)</option><option class="level-0" value="53">Office 365 (2)</option><option class="level-1" value="95"> Excel (1)</option><option class="level-1" value="81"> VBA (1)</option><option class="level-1" value="88"> Word (1)</option><option class="level-0" value="164">Ollama (4)</option><option class="level-0" value="54">OpenSCAD (1)</option><option class="level-0" value="159">Power Apps (1)</option><option class="level-0" value="59">Power BI (4)</option><option class="level-0" value="146">Power BI Visuals (3)</option><option class="level-0" value="61">Power Query (3)</option><option class="level-0" value="62">Protractor (1)</option><option class="level-0" value="64">PySpark (2)</option><option class="level-0" value="69">rxjs (2)</option><option class="level-0" value="70">SAS (3)</option><option class="level-0" value="71">Selenium (1)</option><option class="level-0" value="72">Shell (10)</option><option class="level-1" value="92"> Bash (1)</option><option class="level-1" value="102"> Power Shell (8)</option><option class="level-0" value="73">Smalltalk (1)</option><option class="level-0" value="74">Spring Boot (2)</option><option class="level-0" value="166">Static-Site-Generator (1)</option><option class="level-1" value="167"> Hugo (1)</option><option class="level-0" value="76">TDD (1)</option><option class="level-1" value="77"> Testing / Unittests (1)</option><option class="level-0" value="145">Troubleshooting (3)</option><option class="level-0" value="126">Tutorial (1)</option><option class="level-0" value="78">Ubuntu (1)</option><option class="level-0" value="79">Uncategorized (7)</option><option class="level-0" value="129">Unix (1)</option><option class="level-0" value="80">Vagrant (1)</option><option class="level-0" value="82">Virtual Machine (2)</option><option class="level-0" value="83">Virtualbox (2)</option><option class="level-0" value="84">Visual Studio Code (4)</option><option class="level-0" value="85">Visualisation (3)</option><option class="level-1" value="93"> D3.js (2)</option><option class="level-1" value="100"> p5.js (1)</option><option class="level-0" value="86">Web Framework (40)</option><option class="level-1" value="90"> Angular (10)</option><option class="level-1" value="91"> AngularJS (1)</option><option class="level-1" value="21"> Django (5)</option><option class="level-1" value="97"> Flask (1)</option><option class="level-1" value="26"> Flutter (6)</option><option class="level-1" value="98"> Ionic (13)</option><option class="level-1" value="66"> React (3)</option><option class="level-1" value="148"> React Native (1)</option><option class="level-1" value="67"> ReactJS (3)</option><option class="level-1" value="103"> VUE (2)</option><option class="level-0" value="143">Windows Subsystem for Linux (1)</option><option class="level-0" value="89">Wordpress (2)</option><option class="level-0" value="155">XAMPP (1)</option> </select></form><script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJjYXQiICk7CglmdW5jdGlvbiBvbkNhdENoYW5nZSgpIHsKCQlpZiAoIGRyb3Bkb3duLm9wdGlvbnNbIGRyb3Bkb3duLnNlbGVjdGVkSW5kZXggXS52YWx1ZSA+IDAgKSB7CgkJCWRyb3Bkb3duLnBhcmVudE5vZGUuc3VibWl0KCk7CgkJfQoJfQoJZHJvcGRvd24ub25jaGFuZ2UgPSBvbkNhdENoYW5nZTsKfSkoKTsKCi8qIF1dPiAqLwo="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="archives-1" class="widget widget_archive wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Archives</h4> <label class="screen-reader-text" for="archives-dropdown-1">Archives</label> <select id="archives-dropdown-1" name="archive-dropdown"><option value="">Select Month</option><option value="https://via-internet.de/blog/2024/11/"> November 2024</option><option value="https://via-internet.de/blog/2024/10/"> October 2024</option><option value="https://via-internet.de/blog/2024/09/"> September 2024</option><option value="https://via-internet.de/blog/2024/07/"> July 2024</option><option value="https://via-internet.de/blog/2024/05/"> May 2024</option><option value="https://via-internet.de/blog/2024/04/"> April 2024</option><option value="https://via-internet.de/blog/2024/03/"> March 2024</option><option value="https://via-internet.de/blog/2024/01/"> January 2024</option><option value="https://via-internet.de/blog/2023/12/"> December 2023</option><option value="https://via-internet.de/blog/2023/11/"> November 2023</option><option value="https://via-internet.de/blog/2023/10/"> October 2023</option><option value="https://via-internet.de/blog/2023/09/"> September 2023</option><option value="https://via-internet.de/blog/2023/08/"> August 2023</option><option value="https://via-internet.de/blog/2023/07/"> July 2023</option><option value="https://via-internet.de/blog/2023/04/"> April 2023</option><option value="https://via-internet.de/blog/2023/03/"> March 2023</option><option value="https://via-internet.de/blog/2023/02/"> February 2023</option><option value="https://via-internet.de/blog/2022/11/"> November 2022</option><option value="https://via-internet.de/blog/2022/10/"> October 2022</option><option value="https://via-internet.de/blog/2022/07/"> July 2022</option><option value="https://via-internet.de/blog/2022/06/"> June 2022</option><option value="https://via-internet.de/blog/2022/05/"> May 2022</option><option value="https://via-internet.de/blog/2022/04/"> April 2022</option><option value="https://via-internet.de/blog/2022/03/"> March 2022</option><option value="https://via-internet.de/blog/2022/01/"> January 2022</option><option value="https://via-internet.de/blog/2021/12/"> December 2021</option><option value="https://via-internet.de/blog/2021/11/"> November 2021</option><option value="https://via-internet.de/blog/2021/10/"> October 2021</option><option value="https://via-internet.de/blog/2021/08/"> August 2021</option><option value="https://via-internet.de/blog/2021/07/"> July 2021</option><option value="https://via-internet.de/blog/2021/06/"> June 2021</option><option value="https://via-internet.de/blog/2021/05/"> May 2021</option><option value="https://via-internet.de/blog/2021/02/"> February 2021</option><option value="https://via-internet.de/blog/2021/01/"> January 2021</option><option value="https://via-internet.de/blog/2020/12/"> December 2020</option><option value="https://via-internet.de/blog/2020/11/"> November 2020</option><option value="https://via-internet.de/blog/2020/10/"> October 2020</option><option value="https://via-internet.de/blog/2020/09/"> September 2020</option><option value="https://via-internet.de/blog/2020/08/"> August 2020</option><option value="https://via-internet.de/blog/2020/07/"> July 2020</option><option value="https://via-internet.de/blog/2020/06/"> June 2020</option><option value="https://via-internet.de/blog/2020/05/"> May 2020</option><option value="https://via-internet.de/blog/2020/04/"> April 2020</option><option value="https://via-internet.de/blog/2020/03/"> March 2020</option><option value="https://via-internet.de/blog/2020/02/" selected="selected"> February 2020</option><option value="https://via-internet.de/blog/2020/01/"> January 2020</option><option value="https://via-internet.de/blog/2019/12/"> December 2019</option><option value="https://via-internet.de/blog/2019/09/"> September 2019</option><option value="https://via-internet.de/blog/2019/08/"> August 2019</option><option value="https://via-internet.de/blog/2019/07/"> July 2019</option><option value="https://via-internet.de/blog/2019/06/"> June 2019</option><option value="https://via-internet.de/blog/2019/05/"> May 2019</option><option value="https://via-internet.de/blog/2019/04/"> April 2019</option><option value="https://via-internet.de/blog/2019/03/"> March 2019</option><option value="https://via-internet.de/blog/2019/02/"> February 2019</option><option value="https://via-internet.de/blog/2019/01/"> January 2019</option><option value="https://via-internet.de/blog/2018/12/"> December 2018</option><option value="https://via-internet.de/blog/2018/11/"> November 2018</option><option value="https://via-internet.de/blog/2018/09/"> September 2018</option><option value="https://via-internet.de/blog/2018/08/"> August 2018</option><option value="https://via-internet.de/blog/2018/07/"> July 2018</option><option value="https://via-internet.de/blog/2018/03/"> March 2018</option><option value="https://via-internet.de/blog/2018/02/"> February 2018</option><option value="https://via-internet.de/blog/2018/01/"> January 2018</option><option value="https://via-internet.de/blog/2017/12/"> December 2017</option><option value="https://via-internet.de/blog/2017/07/"> July 2017</option><option value="https://via-internet.de/blog/2017/05/"> May 2017</option><option value="https://via-internet.de/blog/2017/03/"> March 2017</option><option value="https://via-internet.de/blog/2017/02/"> February 2017</option><option value="https://via-internet.de/blog/2016/12/"> December 2016</option><option value="https://via-internet.de/blog/2016/11/"> November 2016</option><option value="https://via-internet.de/blog/2016/10/"> October 2016</option> </select> <script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJhcmNoaXZlcy1kcm9wZG93bi0xIiApOwoJZnVuY3Rpb24gb25TZWxlY3RDaGFuZ2UoKSB7CgkJaWYgKCBkcm9wZG93bi5vcHRpb25zWyBkcm9wZG93bi5zZWxlY3RlZEluZGV4IF0udmFsdWUgIT09ICcnICkgewoJCQlkb2N1bWVudC5sb2NhdGlvbi5ocmVmID0gdGhpcy5vcHRpb25zWyB0aGlzLnNlbGVjdGVkSW5kZXggXS52YWx1ZTsKCQl9Cgl9Cglkcm9wZG93bi5vbmNoYW5nZSA9IG9uU2VsZWN0Q2hhbmdlOwp9KSgpOwoKLyogXV0+ICovCg=="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="search-1" class="widget widget_search wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Search</h4><form method="get" id="searchform" class="input-group" action="https://via-internet.de/blog/"> <input type="text" class="form-control" placeholder="Search" name="s" id="s"><div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button></div></form></aside></div></div></div><div class="site-info text-center"> Copyright © 2024 | Powered by <a href="//wordpress.org/">WordPress</a> <span class="sep"> | </span> Aasta Blog theme by <a target="_blank" href="//themearile.com/">ThemeArile</a></div></footer><div class="page-scroll-up"><a href="#totop"><i class="fa fa-angle-up"></i></a></div><div id="cookie-law-info-bar" data-nosnippet="true" data-cli-style="cli-style-v2" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: inherit; bottom: 0px; position: fixed;"><span><div class="cli-bar-container cli-style-v2"><div class="cli-bar-message">We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.</div><div class="cli-bar-btn_container"><a role="button" class="medium cli-plugin-button cli-plugin-main-button cli_settings_button" style="margin: 0px 5px 0px 0px; color: rgb(51, 51, 51); background-color: rgb(222, 223, 224);">Cookie Settings</a><a id="wt-cli-accept-all-btn" role="button" data-cli_action="accept_all" class="wt-cli-element medium cli-plugin-button wt-cli-accept-all-btn cookie_action_close_header cli_action_button" style="color: rgb(255, 255, 255); background-color: rgb(97, 162, 41);">Accept All</a></div></div></span></div><div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); position: fixed; font-family: inherit; width: auto; bottom: 0px; right: 100px; display: none;"><span id="cookie_hdr_showagain">Manage consent</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true"><div class="cli-modal-dialog" role="document"><div class="cli-modal-content cli-bar-popup"> <button type="button" class="cli-modal-close" id="cliModalClose"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg> <span class="wt-cli-sr-only">Close</span> </button><div class="cli-modal-body"><div class="cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-privacy-overview"><h4>Privacy Overview</h4><div class="cli-privacy-content"><div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ...</div></div> <a class="cli-privacy-readmore" aria-label="Show more" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a></div></div><div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container"><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab"> Necessary </a><div class="wt-cli-necessary-checkbox"> <input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked"> <label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label></div> <span class="cli-necessary-caption">Always Enabled</span></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="necessary"><div class="wt-cli-cookie-description"> Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.<table class="cookielawinfo-row-cat-table cookielawinfo-winter"><thead><tr><th class="cookielawinfo-column-1">Cookie</th><th class="cookielawinfo-column-3">Duration</th><th class="cookielawinfo-column-4">Description</th></tr></thead><tbody><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-analytics</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-functional</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-necessary</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-others</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-performance</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">viewed_cookie_policy</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.</td></tr></tbody></table></div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="functional" data-toggle="cli-toggle-tab"> Functional </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-functional" class="cli-user-preference-checkbox" data-id="checkbox-functional"> <label for="wt-cli-checkbox-functional" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Functional</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="functional"><div class="wt-cli-cookie-description"> Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="performance" data-toggle="cli-toggle-tab"> Performance </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-performance" class="cli-user-preference-checkbox" data-id="checkbox-performance"> <label for="wt-cli-checkbox-performance" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Performance</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="performance"><div class="wt-cli-cookie-description"> Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="analytics" data-toggle="cli-toggle-tab"> Analytics </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-analytics" class="cli-user-preference-checkbox" data-id="checkbox-analytics"> <label for="wt-cli-checkbox-analytics" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Analytics</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="analytics"><div class="wt-cli-cookie-description"> Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="advertisement" data-toggle="cli-toggle-tab"> Advertisement </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-advertisement" class="cli-user-preference-checkbox" data-id="checkbox-advertisement"> <label for="wt-cli-checkbox-advertisement" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Advertisement</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="advertisement"><div class="wt-cli-cookie-description"> Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="others" data-toggle="cli-toggle-tab"> Others </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-others" class="cli-user-preference-checkbox" data-id="checkbox-others"> <label for="wt-cli-checkbox-others" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Others</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="others"><div class="wt-cli-cookie-description"> Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.</div></div></div></div></div></div></div></div><div class="cli-modal-footer"><div class="wt-cli-element cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-tab-footer wt-cli-privacy-overview-actions"> <a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a></div></div></div></div></div></div></div></div><div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div><div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div> <script defer="" src="data:text/javascript;base64,DQogICAgICAgICAgICBmdW5jdGlvbiBfa2F0ZXhSZW5kZXIocm9vdEVsZW1lbnQpIHsNCiAgICAgICAgICAgICAgICBjb25zdCBlbGVzID0gcm9vdEVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgiLmthdGV4LWVxOm5vdCgua2F0ZXgtcmVuZGVyZWQpIik7DQogICAgICAgICAgICAgICAgZm9yKGxldCBpZHg9MDsgaWR4IDwgZWxlcy5sZW5ndGg7IGlkeCsrKSB7DQogICAgICAgICAgICAgICAgICAgIGNvbnN0IGVsZSA9IGVsZXNbaWR4XTsNCiAgICAgICAgICAgICAgICAgICAgZWxlLmNsYXNzTGlzdC5hZGQoImthdGV4LXJlbmRlcmVkIik7DQogICAgICAgICAgICAgICAgICAgIHRyeSB7DQogICAgICAgICAgICAgICAgICAgICAgICBrYXRleC5yZW5kZXIoDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxlLnRleHRDb250ZW50LA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZSwNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXlNb2RlOiBlbGUuZ2V0QXR0cmlidXRlKCJkYXRhLWthdGV4LWRpc3BsYXkiKSA9PT0gJ3RydWUnLA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aHJvd09uRXJyb3I6IGZhbHNlDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgKTsNCiAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChuKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUuc3R5bGUuY29sb3I9InJlZCI7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUudGV4dENvbnRlbnQgPSBuLm1lc3NhZ2U7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGZ1bmN0aW9uIGthdGV4UmVuZGVyKCkgew0KICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihkb2N1bWVudCk7DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoIkRPTUNvbnRlbnRMb2FkZWQiLCBmdW5jdGlvbigpIHsNCiAgICAgICAgICAgICAgICBrYXRleFJlbmRlcigpOw0KDQogICAgICAgICAgICAgICAgLy8gUGVyZm9ybSBhIEthVGVYIHJlbmRlcmluZyBzdGVwIHdoZW4gdGhlIERPTSBpcyBtdXRhdGVkLg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcihmdW5jdGlvbihtdXRhdGlvbnMpIHsNCiAgICAgICAgICAgICAgICAgICAgW10uZm9yRWFjaC5jYWxsKG11dGF0aW9ucywgZnVuY3Rpb24obXV0YXRpb24pIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmIChtdXRhdGlvbi50YXJnZXQgJiYgbXV0YXRpb24udGFyZ2V0IGluc3RhbmNlb2YgRWxlbWVudCkgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihtdXRhdGlvbi50YXJnZXQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgICAgICB9KTsNCg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2YXRpb25Db25maWcgPSB7DQogICAgICAgICAgICAgICAgICAgIHN1YnRyZWU6IHRydWUsDQogICAgICAgICAgICAgICAgICAgIGNoaWxkTGlzdDogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgY2hhcmFjdGVyRGF0YTogdHJ1ZQ0KICAgICAgICAgICAgICAgIH07DQoNCiAgICAgICAgICAgICAgICBrYXRleE9ic2VydmVyLm9ic2VydmUoZG9jdW1lbnQuYm9keSwga2F0ZXhPYnNlcnZhdGlvbkNvbmZpZyk7DQogICAgICAgICAgICB9KTsNCg0KICAgICAgICA="></script> <style type="text/css">.theme-testimonial { background-image: url(https://via-internet.de/blog/wp-content/themes/aasta-blog/assets/img/theme-bg.jpg); background-size: cover; background-position: center center; }</style> <script defer="" src="data:text/javascript;base64,CgkvLyBUaGlzIEpTIGFkZGVkIGZvciB0aGUgVG9nZ2xlIGJ1dHRvbiB0byB3b3JrIHdpdGggdGhlIGZvY3VzIGVsZW1lbnQuCgkJaWYgKHdpbmRvdy5pbm5lcldpZHRoIDwgOTkyKSB7CgkJCWRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBmdW5jdGlvbihlKSB7CgkJCWxldCBpc1RhYlByZXNzZWQgPSBlLmtleSA9PT0gJ1RhYicgfHwgZS5rZXlDb2RlID09PSA5OwoJCQkJaWYgKCFpc1RhYlByZXNzZWQpIHsKCQkJCQlyZXR1cm47CgkJCQl9CgkJCQkKCQkJY29uc3QgIGZvY3VzYWJsZUVsZW1lbnRzID0KCQkJCSdidXR0b24sIFtocmVmXSwgaW5wdXQsIHNlbGVjdCwgdGV4dGFyZWEsIFt0YWJpbmRleF06bm90KFt0YWJpbmRleD0iLTEiXSknOwoJCQljb25zdCBtb2RhbCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5uYXZiYXIubmF2YmFyLWV4cGFuZC1sZycpOyAvLyBzZWxlY3QgdGhlIG1vZGFsIGJ5IGl0J3MgaWQKCgkJCWNvbnN0IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCA9IG1vZGFsLnF1ZXJ5U2VsZWN0b3JBbGwoZm9jdXNhYmxlRWxlbWVudHMpWzBdOyAvLyBnZXQgZmlyc3QgZWxlbWVudCB0byBiZSBmb2N1c2VkIGluc2lkZSBtb2RhbAoJCQljb25zdCBmb2N1c2FibGVDb250ZW50ID0gbW9kYWwucXVlcnlTZWxlY3RvckFsbChmb2N1c2FibGVFbGVtZW50cyk7CgkJCWNvbnN0IGxhc3RGb2N1c2FibGVFbGVtZW50ID0gZm9jdXNhYmxlQ29udGVudFtmb2N1c2FibGVDb250ZW50Lmxlbmd0aCAtIDFdOyAvLyBnZXQgbGFzdCBlbGVtZW50IHRvIGJlIGZvY3VzZWQgaW5zaWRlIG1vZGFsCgoJCQkgIGlmIChlLnNoaWZ0S2V5KSB7IC8vIGlmIHNoaWZ0IGtleSBwcmVzc2VkIGZvciBzaGlmdCArIHRhYiBjb21iaW5hdGlvbgoJCQkJaWYgKGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQgPT09IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCkgewoJCQkJICBsYXN0Rm9jdXNhYmxlRWxlbWVudC5mb2N1cygpOyAvLyBhZGQgZm9jdXMgZm9yIHRoZSBsYXN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsKCQkJCX0KCQkJICB9IGVsc2UgeyAvLyBpZiB0YWIga2V5IGlzIHByZXNzZWQKCQkJCWlmIChkb2N1bWVudC5hY3RpdmVFbGVtZW50ID09PSBsYXN0Rm9jdXNhYmxlRWxlbWVudCkgeyAvLyBpZiBmb2N1c2VkIGhhcyByZWFjaGVkIHRvIGxhc3QgZm9jdXNhYmxlIGVsZW1lbnQgdGhlbiBmb2N1cyBmaXJzdCBmb2N1c2FibGUgZWxlbWVudCBhZnRlciBwcmVzc2luZyB0YWIKCQkJCSAgZmlyc3RGb2N1c2FibGVFbGVtZW50LmZvY3VzKCk7IC8vIGFkZCBmb2N1cyBmb3IgdGhlIGZpcnN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsJCQkgIAoJCQkJfQoJCQkgIH0KCgkJCX0pOwoJCX0K"></script> <script defer="" src="data:text/javascript;base64,CiAgICAgICAgbmV3Q29udGFpbmVyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3BhbicpOwogICAgICAgIG5ld0NvbnRhaW5lci5zdHlsZS5zZXRQcm9wZXJ0eSgnZGlzcGxheScsJ25vbmUnLCcnKTsKICAgICAgICBuZXdOb2RlICAgICAgICAgICA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NjcmlwdCcpOwogICAgICAgIG5ld05vZGUudHlwZSAgICAgID0gJ21hdGgvdGV4JzsKICAgICAgICBuZXdOb2RlLmlubmVySFRNTCA9ICdcXG5ld2NvbW1hbmR7XFxlcHN9e1xcdmFyZXBzaWxvbn1cblxcbmV3Y29tbWFuZHtcXFJSfXtcXG1hdGhiYntSfX1cblxcbmV3Y29tbWFuZHtcXHJkfXtcXG9wZXJhdG9ybmFtZXtkfX1cblxcbmV3Y29tbWFuZHtcXHNldH1bMV17XFxsZWZ0XFx7IzFcXHJpZ2h0XFx9fSc7CiAgICAgICAgbmV3Q29udGFpbmVyLmFwcGVuZENoaWxkKG5ld05vZGUpOwogICAgICAgIGRvY3VtZW50LmJvZHkuaW5zZXJ0QmVmb3JlKG5ld0NvbnRhaW5lcixkb2N1bWVudC5ib2R5LmZpcnN0Q2hpbGQpOwogICAgICAgIA=="></script> <script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], displayMath: [['$$', '$$'], ["\\[", "\\]"]], processEscapes: true }, TeX: { equationNumbers: {autoNumber: "AMS", useLabelIds: true} }, });</script> <link rel="stylesheet" id="cookie-law-info-table-css" href="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_26b4f0c3c1bcf76291fa4952fb7f04fb.php?ver=3.2.8" type="text/css" media="all"> <script defer="" id="toc-front-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgdG9jcGx1cyA9IHsidmlzaWJpbGl0eV9zaG93IjoiQW56ZWlnZW4iLCJ2aXNpYmlsaXR5X2hpZGUiOiJBdXNibGVuZGVuIiwidmlzaWJpbGl0eV9oaWRlX2J5X2RlZmF1bHQiOiIxIiwid2lkdGgiOiJBdXRvIn07Ci8qIF1dPiAqLwo="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_93d421fd7576b0ca9c359ffe2fa16113.php?ver=20151215" id="aasta-skip-link-focus-fix-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.7.2" id="katex-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=UnpSS38vU0joHj5" id="enlighterjs-js"></script> <script defer="" id="enlighterjs-js-after" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwohZnVuY3Rpb24oZSxuKXtpZigidW5kZWZpbmVkIiE9dHlwZW9mIEVubGlnaHRlckpTKXt2YXIgbz17InNlbGVjdG9ycyI6eyJibG9jayI6InByZS5FbmxpZ2h0ZXJKU1JBVyIsImlubGluZSI6ImNvZGUuRW5saWdodGVySlNSQVcifSwib3B0aW9ucyI6eyJpbmRlbnQiOjQsImFtcGVyc2FuZENsZWFudXAiOnRydWUsImxpbmVob3ZlciI6dHJ1ZSwicmF3Y29kZURiY2xpY2siOnRydWUsInRleHRPdmVyZmxvdyI6ImJyZWFrIiwibGluZW51bWJlcnMiOmZhbHNlLCJ0aGVtZSI6ImNsYXNzaWMiLCJsYW5ndWFnZSI6ImdlbmVyaWMiLCJyZXRhaW5Dc3NDbGFzc2VzIjpmYWxzZSwiY29sbGFwc2UiOmZhbHNlLCJ0b29sYmFyT3V0ZXIiOiIiLCJ0b29sYmFyVG9wIjoie0JUTl9SQVd9e0JUTl9DT1BZfXtCVE5fV0lORE9XfXtCVE5fV0VCU0lURX0iLCJ0b29sYmFyQm90dG9tIjoiIn19OyhlLkVubGlnaHRlckpTSU5JVD1mdW5jdGlvbigpe0VubGlnaHRlckpTLmluaXQoby5zZWxlY3RvcnMuYmxvY2ssby5zZWxlY3RvcnMuaW5saW5lLG8ub3B0aW9ucyl9KSgpfWVsc2V7KG4mJihuLmVycm9yfHxuLmxvZyl8fGZ1bmN0aW9uKCl7fSkoIkVycm9yOiBFbmxpZ2h0ZXJKUyByZXNvdXJjZXMgbm90IGxvYWRlZCB5ZXQhIil9fSh3aW5kb3csY29uc29sZSk7Ci8qIF1dPiAqLwo="></script> <script type="text/javascript" id="jetpack-stats-js-before">_stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"195943667\",\"post\":\"0\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]); _stq.push([ "clickTrackerInit", "195943667", "0" ]);</script> <script type="text/javascript" src="https://stats.wp.com/e-202510.js" id="jetpack-stats-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="gt_widget_script_62673750-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['62673750'] = {"default_language":"de","languages":["de","en","fr","zh-CN","nl","it","es","da","pt"],"url_structure":"none","native_language_names":1,"flag_style":"2d","flag_size":24,"wrapper_selector":"#gtranslate_menu_wrapper_37060","alt_flags":[],"switcher_open_direction":"top","switcher_horizontal_position":"inline","switcher_text_color":"#666","switcher_arrow_color":"#666","switcher_border_color":"#ccc","switcher_background_color":"#fff","switcher_background_shadow_color":"#efefef","switcher_background_hover_color":"#fff","dropdown_text_color":"#000","dropdown_hover_color":"#fff","dropdown_background_color":"#eee","flags_location":"\/blog\/wp-content\/plugins\/gtranslate\/flags\/"};</script><script src="https://via-internet.de/blog/wp-content/plugins/gtranslate/js/dwf.js?ver=6.7.2" data-no-optimize="1" data-no-minify="1" data-gt-orig-url="/blog/2020/02/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="62673750" defer=""></script><script defer="" id="wpcd-scripts-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgd3BjZGFqYXggPSB7ImFqYXh1cmwiOiJodHRwczpcL1wvdmlhLWludGVybmV0LmRlXC9ibG9nXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAifTsKLyogXV0+ICovCg=="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_231b95969d2321feeaab8fdd8121442a.php" id="wpcd-scripts-js"></script> <script defer="" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js&ver=2.7.5" id="mathjax-js"></script> <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async="" src="https://via-internet.de/blog/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js"></script> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Page Caching using Disk: Enhanced Lazy Loading Database Caching 2/163 queries in 0.254 seconds using Disk Served from: via-internet.de @ 2025-03-08 07:08:06 by W3 Total Cache --></pre></pre></pre> <a href="{ <a href="{ <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=""><a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <p>Install the Django Extensions for additional commands:</p> <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><p>Add Django Extensions to the INSTALLED_APPS</p><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 = [ ... 'django_extensions' ]</pre><p>Show URLs and Namespaces (only for out apps, admin urls are removed)</p><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><figure class="wp-block-image size-large"><img decoding="async" width="1676" height="449" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201676%20449'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_55_namespaces.png?fit=700%2C188&ssl=1" alt="" class="wp-image-6078 lazy" data-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" data-sizes="auto, (max-width: 1676px) 100vw, 1676px"></figure><h2 class="wp-block-heading">Preparing required components and pages</h2><p>In summary, these are the steps to create the desired folder structure:</p><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 mkdir -p dashboard/apps/components/cards/templates/cards mkdir -p dashboard/apps/pages/blank/templates/blank mkdir -p dashboard/apps/pages/charts/templates/charts mkdir -p dashboard/apps/pages/login/templates/login mkdir -p dashboard/apps/pages/pagenotfound/templates/pagenotfound mkdir -p dashboard/apps/pages/password/templates/password mkdir -p dashboard/apps/pages/register/templates/register mkdir -p dashboard/apps/pages/tables/templates/tables mkdir -p dashboard/apps/utilities/animations/templates/animations mkdir -p dashboard/apps/utilities/borders/templates/borders mkdir -p dashboard/apps/utilities/colors/templates/colors mkdir -p dashboard/apps/utilities/others/templates/others</pre><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 python3 manage.py startapp cards dashboard/apps/components/cards python3 manage.py startapp blank dashboard/apps/pages/blank python3 manage.py startapp charts dashboard/apps/pages/charts python3 manage.py startapp login dashboard/apps/pages/login python3 manage.py startapp pagenotfound dashboard/apps/pages/pagenotfound python3 manage.py startapp password dashboard/apps/pages/password python3 manage.py startapp register dashboard/apps/pages/register python3 manage.py startapp tables dashboard/apps/pages/tables python3 manage.py startapp animations dashboard/apps/utilities/animations python3 manage.py startapp borders dashboard/apps/utilities/borders python3 manage.py startapp colors dashboard/apps/utilities/colors python3 manage.py startapp others dashboard/apps/utilities/others</pre><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 "{ { { <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 cp base.html dashboard/apps/components/cards/templates/cards cp base.html dashboard/apps/pages/blank/templates/blank cp base.html dashboard/apps/pages/charts/templates/charts cp base.html dashboard/apps/pages/login/templates/login cp base.html dashboard/apps/pages/pagenotfound/templates/pagenotfound cp base.html dashboard/apps/pages/password/templates/password cp base.html dashboard/apps/pages/register/templates/register cp base.html dashboard/apps/pages/tables/templates/tables cp base.html dashboard/apps/utilities/animations/templates/animations cp base.html dashboard/apps/utilities/borders/templates/borders cp base.html dashboard/apps/utilities/colors/templates/colors cp base.html dashboard/apps/utilities/others/templates/others</pre><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><figure class="wp-block-image size-large"><img decoding="async" width="291" height="874" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20291%20874'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_10_folder_structure.png" alt="" class="wp-image-6012 lazy" data-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" data-sizes="auto, (max-width: 291px) 100vw, 291px"></figure><p>Each of the folders has the same structure, for example the buttons component. We will delete some unnecessary files</p><figure class="wp-block-image size-large is-resized"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20293%20284'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_11_app-folder-structure.png" alt="" class="wp-image-6013 lazy" width="293" height="284" data-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" data-sizes="auto, (max-width: 293px) 100vw, 293px"></figure><h2 class="wp-block-heading">Replacing Projects with dynamic data</h2><p>Replacing the static parts with dynamic content could be achieved by the following approach:</p><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><p>The steps are the same for all components (all items of the side menu).</p><p>Find the</p><p>Identify dynamic parts in template</p><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_20_projects_html_old-700x374.png" alt="" class="wp-image-5972 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><figure class="wp-block-image size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data-700x219.png" alt="" class="wp-image-5971 lazy"></figure><figure class="wp-block-table"><table><tbody><tr><td><img decoding="async" width="500" height="278" class="wp-image-5973 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20278'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_42_projects_old_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="157" class="wp-image-5971 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20157'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="279" class="wp-image-5975 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20279'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_44_projects_new_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="151" class="wp-image-5974 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20151'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_43_projects_new_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><h2 class="wp-block-heading">Create templates for side menu pages</h2><p>For every side menu item, their is a corresponding html file in the install folder of the <code>sb-admin-2</code> template:</p><p>Remember the environment variable we create in part 1 for the start of our project</p><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><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 find dashboard/apps install/sb-admin-2 -name *.html</pre><p>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><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><p>Each template base.html should have the following content:</p><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="">{ { { <p>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> <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 class IndexView(generic.TemplateView): template_name = 'buttons/base.html'</pre><p>So, for each template file, we have to</p><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><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=""> <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --></pre><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure><div class="post-content"><div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 22<small class="months">Feb</small></time></a> </span><div class="media-body"><header class="entry-header"><h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/">Django | Build a Dashboard with Django and Bootstrap: Part 2</a></h4></header><div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span></div><div class="entry-content"><p>This is Part 2 of <em>Building a Dashboard with Django and Bootstrap</em>:</p><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><h2 class="wp-block-heading">Introduction</h2><p>If you follow the first part of this blog topic, you have a running Django dashboard.</p><p>But, unfortunately, the content is still static. Let’s review the current state:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"></div></div><p>Perfect. We are done with the basic setup.</p><p>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><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>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><p>We will do this by following these steps:</p><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><h2 class="wp-block-heading">Identify dynamic parts</h2><p>How to find the parts, which are dynamic.</p><p>One way is to ask:</p><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><p>You mostly get the same answers by the question:</p><ul class="wp-block-list"><li>What are the main components of a web page (including navigation and content)</li></ul><p>For answer the first question, take a look at the current page and “name” the areas:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="563" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20563'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/02_elements_of_dashboard_page.png?fit=700%2C394&ssl=1" alt="" class="wp-image-5929 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>So, these “names” are also the answer for the 3. Question:</p><ul class="wp-block-list"><li>sidemenu</li><li>top bar</li><li>content</li></ul><p>And maybe you find additional “names”</p><ul class="wp-block-list"><li>header</li><li>footer</li><li>top menu</li><li>left and right sidebar</li></ul><h2 class="wp-block-heading">Find identified parts in template</h2><p>Next step is, to find the identified parts in our dashboard template</p><p><code>dashboard/templates/site/sb-admin-2/base.html</code></p><p>This is an easy step, because the developer of the SB Admin 2 template documented their template well:</p><figure class="wp-block-image size-large"><img decoding="async" width="2004" height="1706" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202004%201706'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/03_elements_of_dashboard_in_codepage.png?fit=700%2C596&ssl=1" alt="" class="wp-image-5932 lazy" data-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" data-sizes="auto, (max-width: 2004px) 100vw, 2004px"></figure><p>Looking into the code of the template, you will find comment lines describing the content:</p><ul class="wp-block-list"><li><code><!-- Sidebar --></code></li><li><code><!-- Topbar --></code></li><li><code><!-- Top Search --></code></li><li><code><!-- Top Navbar --></code></li><li><code><!-- Begin Page Content--></code></li></ul><p>So, it is obvious what do to next:</p><ul class="wp-block-list"><li>get the <em>dynamic</em> part (lines under)<code><!-- Begin Page Content--></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><p>This is the way, the template system of django works:</p><figure class="wp-block-image size-large"><img decoding="async" width="954" height="251" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20954%20251'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/21_combine_template_and_content_ui.png?fit=700%2C184&ssl=1" alt="" class="wp-image-5944 lazy" data-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" data-sizes="auto, (max-width: 954px) 100vw, 954px"></figure><p>Let’s explain this with a simple example: the page title</p><p>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><p>To achieve this, we have to tell our template system the following:</p><figure class="wp-block-image size-large"><img decoding="async" width="940" height="209" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20940%20209'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/22_combine_template_and_content_code.png?fit=700%2C156&ssl=1" alt="" class="wp-image-5943 lazy" data-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" data-sizes="auto, (max-width: 940px) 100vw, 940px"></figure><p>Now, we do the same with the content:</p><figure class="wp-block-image size-large"><img decoding="async" width="983" height="457" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20983%20457'%3E%3C/svg%3E" data-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&ssl=1" alt="" class="wp-image-5947 lazy" data-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" data-sizes="auto, (max-width: 983px) 100vw, 983px"></figure><p>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><p>Well, let’s make a test and try to include a different content in the dashboard template.</p><p>Change the lines, where we include the content into this:</p><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="">{ MISSING CONTENT { <p>Did you notice the other name of the content: <strong>content_missing</strong>?</p> <p>Change the template, save the file and have a look at the result:</p> <figure class="wp-block-image size-large"><img decoding="async" width="2328" height="448" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202328%20448'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/41_missing_content.png?fit=700%2C135&ssl=1" alt="" class="wp-image-5949 lazy" data-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" data-sizes="auto, (max-width: 2328px) 100vw, 2328px"></figure> <p>Change content back, so your template is working again:</p> <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="">{ MISSING CONTENT { <p>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> </pre></pre></div> </div> </div> </div> </article><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"> <figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure> <div class="post-content"> <div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 21<small class="months">Feb</small></time></a> </span> <div class="media-body"> <header class="entry-header"> <h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/">Django | Build a Dashboard with Django and Bootstrap: Part 1</a></h4> </header> <div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span> </div> <div class="entry-content"> <p>This is Part 1 of <em>Building a Dashboard with Django and Bootstrap</em>:</p> <ul class="wp-block-list"> <li><strong>Part 1: Building a base Django project</strong></li> <li><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/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/build-a-dashboard-with-django-and-bootstrap-part-4/">Part 4: Deploy Django App to Azure</a></li> </ul> <h2 class="wp-block-heading">Introduction</h2> <p>Building a complete web app isn’t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don’t using tools or framework, which helps and makes our life easier. <a href="https://www.djangoproject.com/"><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824465754606598455505">Django</gwmw></a> is one of these frameworks:</p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468379037630016661">Django</gwmw> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development</p> </blockquote> <p>So, let’s get started.</p> <h3 class="wp-block-heading">Create project</h3> <p>For subsequent steps, we will remember our starting directory </p> <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="">❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder...</pre><p>First step is to create our main Django project</p><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="">❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate</pre><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="">❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK.</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="782" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20782'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png" alt="" class="wp-image-9675 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-300x229.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-768x587.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1536x1173.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-2048x1564.png 2048w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure></div><h3 class="wp-block-heading">Create first apps</h3><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="">❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend</pre><p>The folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="970" height="436" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20970%20436'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png" alt="" class="wp-image-9690 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png 970w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-300x135.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-768x345.png 768w" data-sizes="auto, (max-width: 970px) 100vw, 970px"></figure><h2 class="wp-block-heading">Add new apps to project</h2><p>Modify name in <code>apps/core/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core'</pre><p>Modify name in <code>apps/frontend/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend'</pre><p>Modify <code>dashboard/settings.py</code></p><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="">INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ]</pre><p>Modify <code>dashboard/urls.py</code></p><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="">from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ]</pre><h3 class="wp-block-heading">Create view</h3><p>Modify view in <code>apps/frontend/views.py</code></p><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="">from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html'</pre><h3 class="wp-block-heading">Create template for frontend View</h3><p>Create template file <code>apps/frontend/templates/frontend/index.html</code></p><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=""><h1> Frontend: Let's get started </h1></pre><h3 class="wp-block-heading">Add template folder to configuration</h3><p>In <kbd>dashboard/settings.py</kbd>, add template folder to TEMPLATES</p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ]</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="624" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20624%20186'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png" alt="" class="wp-image-8442 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png 624w, https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2-300x89.png 300w" data-sizes="auto, (max-width: 624px) 100vw, 624px"></figure></div><h2 class="wp-block-heading">Current folder Structure</h2><p>So far, we have the following folder structure</p><figure class="wp-block-image size-full"><img decoding="async" width="690" height="982" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20690%20982'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png" alt="" class="wp-image-9691 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png 690w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001-211x300.png 211w" data-sizes="auto, (max-width: 690px) 100vw, 690px"></figure><h2 class="wp-block-heading">Prepare for administrate your project</h2><h3 class="wp-block-heading">Create admin user</h3><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="">❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully.</pre><h2 class="wp-block-heading">Add Bootstrap support</h2><p>Download requires files for Bootstrap, jQuery and PopperJS.</p><p>Or download <a href="https://via-internet.de/blog/wp-content/uploads/2021/10/static.zip">this </a>prepared archiv and unzip the files unter <code>dashboard</code>.</p><p>Run the scripts in <kbd>$DASHBOARD_ROOT</kbd></p><p>Hint: You need to install <a href="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3" data-type="link" data-id="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3">PowerShell</a> before running the scripts.</p><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 > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1</pre><p><kbd>download_bootstrap.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' </pre><p><kbd>download_jquery.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map</pre><p><kbd>download_popperjs.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js</pre><p>Finally, the folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="474" height="660" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20474%20660'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png" alt="" class="wp-image-9679 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png 474w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008-215x300.png 215w" data-sizes="auto, (max-width: 474px) 100vw, 474px"></figure><h3 class="wp-block-heading">Create site templates in <code>dashboard/templates/site</code></h3><h3 class="wp-block-heading">Add templates path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470508427730698282">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="5" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ...</pre><h3 class="wp-block-heading"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-2" id="gwmw-15824470715450370185521">Add static</gwmw> path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470715451132153545">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><p>Add as first line</p><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="">import os</pre><p>Then add / replace at <kbd>STATIC_URL=...</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="2-4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ]</pre><h2 class="wp-block-heading">Modify frontend view template</h2><p>File <code>dashboard/apps/frontend/templates/index.html</code></p><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="">{ { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { <p>File <kbd>dashboard/apps/frontend/templates/site/base.html</kbd></p> <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="">{ <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html></pre><h2 class="wp-block-heading">View current status of project</h2><figure class="wp-block-image size-large"><img decoding="async" width="1024" height="778" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20778'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png" alt="" class="wp-image-9682 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-300x228.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-768x583.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1536x1167.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap.png 1714w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure><h2 class="wp-block-heading">Final Result</h2><p>The final result could be found <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project" data-type="link" data-id="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project">here</a>.</p><h2 class="wp-block-heading">Add dashboard from an existing template</h2><p>For a first start, we will use this <a href="https://startbootstrap.com/previews/sb-admin-2/"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824470188863680783027">sb</gwmw>-admin-2 dashboard</a> template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>:</p><figure class="wp-block-image size-full"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/61_dashboard.png" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><h2 class="wp-block-heading">Download required files</h2><p>Bootstrap templates consist of at least 3 different types of files</p><ul class="wp-block-list"><li>main index.html page, responsible for collection all elements and set up your page</li><li>CSS files defining the style of your page</li><li>JavaScript files, containing needed frameworks and code</li></ul><p>So, first start by downloading the sample template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>. Be sure, you start in our project root folder:</p><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="">❯ cd $DASHBOARD_ROOT</pre><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="">❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 </pre><p>Next, find out, what we need for our template in addition to the file <kbd>index.html</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)="</pre><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script></pre><p>That’s a lot of additional files.</p><p>To keep the file structure consistent, these files should be stored under the <kbd>dashboard/static</kbd> folder (same as the bootstrap files before).</p><p>To achieve this, there are <gwmw class="ginger-module-highlighter-mistake-type-2" id="gwmw-15824469384628631344488">two possi</gwmw>bilities:</p><ul class="wp-block-list"><li>Create desired folder and copy each of the source files to the destination folder</li><li><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824469457060378385283">Copy</gwmw> the complete static folder from the <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap">Github Repository</a> for this post.</li></ul><p>We use the second option to keep the focus on creating our dashboard.<gwmw style="display:none;"></gwmw></p><p>So, first, clone the repository:</p><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="">cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap</pre><p>Then, copy the requred files</p><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="">cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard</pre><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 -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard</pre><p>Having everything needed for the dashboard template, the next step is to modify the front-end template</p><p>File <code>dashboard/apps/frontend/templates/frontend/index.html</code></p> <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="">{ { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div></pre></pre></div></div></div></div></article><footer class="site-footer"><div class="container"><div class="row footer-sidebar"><div class="col-lg-3 col-md-6 col-sm-12"><aside id="categories-1" class="widget widget_categories wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Categories</h4><form action="https://via-internet.de/blog" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name="cat" id="cat" class="postform"><option value="-1">Select Category</option><option class="level-0" value="2">3D Printing (1)</option><option class="level-0" value="168">AI (3)</option><option class="level-0" value="1">Allgemein (32)</option><option class="level-0" value="151">Anaconda (1)</option><option class="level-0" value="4">Apache (3)</option><option class="level-0" value="5">Apache Spark (3)</option><option class="level-0" value="6">Apache Zeppelin (1)</option><option class="level-0" value="7">Arduino (1)</option><option class="level-0" value="160">Astro (3)</option><option class="level-0" value="9">Azure (7)</option><option class="level-1" value="20"> Databricks (4)</option><option class="level-1" value="87"> Widgets (1)</option><option class="level-0" value="158">BeautifulSoup (1)</option><option class="level-0" value="10">Bootstrap (6)</option><option class="level-0" value="12">Capacitor (1)</option><option class="level-0" value="13">CI/CD (3)</option><option class="level-1" value="40"> Jenkins (3)</option><option class="level-0" value="153">Container (9)</option><option class="level-1" value="22"> Docker (8)</option><option class="level-2" value="43"> Kubernetes (2)</option><option class="level-1" value="154"> Podman (1)</option><option class="level-0" value="16">Cookbook (30)</option><option class="level-0" value="17">CSS (3)</option><option class="level-0" value="135">Daily (6)</option><option class="level-0" value="144">Dart (1)</option><option class="level-0" value="18">Data Science (1)</option><option class="level-0" value="19">Database (2)</option><option class="level-1" value="50"> MySQL (1)</option><option class="level-1" value="58"> PostgreSQL (1)</option><option class="level-0" value="96">FastAPI (1)</option><option class="level-0" value="27">Generell (1)</option><option class="level-0" value="28">Git und Github (6)</option><option class="level-0" value="157">Grafana (1)</option><option class="level-0" value="31">Hadoop (1)</option><option class="level-0" value="163">Hexo (1)</option><option class="level-0" value="33">Homebrew (1)</option><option class="level-0" value="165">HyperDiv (1)</option><option class="level-0" value="34">Ionic 3 (5)</option><option class="level-0" value="35">Ionic 4 (9)</option><option class="level-0" value="39">Jekyll (1)</option><option class="level-0" value="41">Jupyter (2)</option><option class="level-0" value="42">Keycloak (3)</option><option class="level-0" value="137">Languages (60)</option><option class="level-1" value="14"> ClojureScript (1)</option><option class="level-1" value="15"> Cobol (1)</option><option class="level-1" value="24"> Erlang (2)</option><option class="level-2" value="94"> Elixir (2)</option><option class="level-1" value="149"> F# (2)</option><option class="level-1" value="29"> Go (1)</option><option class="level-1" value="30"> Groovy (1)</option><option class="level-1" value="32"> Haskell (3)</option><option class="level-1" value="36"> iPython (1)</option><option class="level-1" value="37"> Java (5)</option><option class="level-1" value="38"> Javascript (7)</option><option class="level-1" value="56"> Perl (1)</option><option class="level-1" value="57"> PHP (13)</option><option class="level-1" value="63"> PureScript (1)</option><option class="level-1" value="65"> Python (19)</option><option class="level-2" value="141"> PIP (1)</option><option class="level-1" value="68"> Rust (3)</option><option class="level-1" value="75"> Swift (1)</option><option class="level-0" value="99">Laravel (16)</option><option class="level-0" value="44">Learning (5)</option><option class="level-0" value="45">Linux (1)</option><option class="level-0" value="46">macOS (1)</option><option class="level-0" value="47">matter.js (1)</option><option class="level-0" value="48">Maven (1)</option><option class="level-0" value="49">Mobile Development (9)</option><option class="level-0" value="51">NestJS (1)</option><option class="level-0" value="156">Nicepage (1)</option><option class="level-0" value="52">Node.js (2)</option><option class="level-0" value="53">Office 365 (2)</option><option class="level-1" value="95"> Excel (1)</option><option class="level-1" value="81"> VBA (1)</option><option class="level-1" value="88"> Word (1)</option><option class="level-0" value="164">Ollama (4)</option><option class="level-0" value="54">OpenSCAD (1)</option><option class="level-0" value="159">Power Apps (1)</option><option class="level-0" value="59">Power BI (4)</option><option class="level-0" value="146">Power BI Visuals (3)</option><option class="level-0" value="61">Power Query (3)</option><option class="level-0" value="62">Protractor (1)</option><option class="level-0" value="64">PySpark (2)</option><option class="level-0" value="69">rxjs (2)</option><option class="level-0" value="70">SAS (3)</option><option class="level-0" value="71">Selenium (1)</option><option class="level-0" value="72">Shell (10)</option><option class="level-1" value="92"> Bash (1)</option><option class="level-1" value="102"> Power Shell (8)</option><option class="level-0" value="73">Smalltalk (1)</option><option class="level-0" value="74">Spring Boot (2)</option><option class="level-0" value="166">Static-Site-Generator (1)</option><option class="level-1" value="167"> Hugo (1)</option><option class="level-0" value="76">TDD (1)</option><option class="level-1" value="77"> Testing / Unittests (1)</option><option class="level-0" value="145">Troubleshooting (3)</option><option class="level-0" value="126">Tutorial (1)</option><option class="level-0" value="78">Ubuntu (1)</option><option class="level-0" value="79">Uncategorized (7)</option><option class="level-0" value="129">Unix (1)</option><option class="level-0" value="80">Vagrant (1)</option><option class="level-0" value="82">Virtual Machine (2)</option><option class="level-0" value="83">Virtualbox (2)</option><option class="level-0" value="84">Visual Studio Code (4)</option><option class="level-0" value="85">Visualisation (3)</option><option class="level-1" value="93"> D3.js (2)</option><option class="level-1" value="100"> p5.js (1)</option><option class="level-0" value="86">Web Framework (40)</option><option class="level-1" value="90"> Angular (10)</option><option class="level-1" value="91"> AngularJS (1)</option><option class="level-1" value="21"> Django (5)</option><option class="level-1" value="97"> Flask (1)</option><option class="level-1" value="26"> Flutter (6)</option><option class="level-1" value="98"> Ionic (13)</option><option class="level-1" value="66"> React (3)</option><option class="level-1" value="148"> React Native (1)</option><option class="level-1" value="67"> ReactJS (3)</option><option class="level-1" value="103"> VUE (2)</option><option class="level-0" value="143">Windows Subsystem for Linux (1)</option><option class="level-0" value="89">Wordpress (2)</option><option class="level-0" value="155">XAMPP (1)</option> </select></form><script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJjYXQiICk7CglmdW5jdGlvbiBvbkNhdENoYW5nZSgpIHsKCQlpZiAoIGRyb3Bkb3duLm9wdGlvbnNbIGRyb3Bkb3duLnNlbGVjdGVkSW5kZXggXS52YWx1ZSA+IDAgKSB7CgkJCWRyb3Bkb3duLnBhcmVudE5vZGUuc3VibWl0KCk7CgkJfQoJfQoJZHJvcGRvd24ub25jaGFuZ2UgPSBvbkNhdENoYW5nZTsKfSkoKTsKCi8qIF1dPiAqLwo="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="archives-1" class="widget widget_archive wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Archives</h4> <label class="screen-reader-text" for="archives-dropdown-1">Archives</label> <select id="archives-dropdown-1" name="archive-dropdown"><option value="">Select Month</option><option value="https://via-internet.de/blog/2024/11/"> November 2024</option><option value="https://via-internet.de/blog/2024/10/"> October 2024</option><option value="https://via-internet.de/blog/2024/09/"> September 2024</option><option value="https://via-internet.de/blog/2024/07/"> July 2024</option><option value="https://via-internet.de/blog/2024/05/"> May 2024</option><option value="https://via-internet.de/blog/2024/04/"> April 2024</option><option value="https://via-internet.de/blog/2024/03/"> March 2024</option><option value="https://via-internet.de/blog/2024/01/"> January 2024</option><option value="https://via-internet.de/blog/2023/12/"> December 2023</option><option value="https://via-internet.de/blog/2023/11/"> November 2023</option><option value="https://via-internet.de/blog/2023/10/"> October 2023</option><option value="https://via-internet.de/blog/2023/09/"> September 2023</option><option value="https://via-internet.de/blog/2023/08/"> August 2023</option><option value="https://via-internet.de/blog/2023/07/"> July 2023</option><option value="https://via-internet.de/blog/2023/04/"> April 2023</option><option value="https://via-internet.de/blog/2023/03/"> March 2023</option><option value="https://via-internet.de/blog/2023/02/"> February 2023</option><option value="https://via-internet.de/blog/2022/11/"> November 2022</option><option value="https://via-internet.de/blog/2022/10/"> October 2022</option><option value="https://via-internet.de/blog/2022/07/"> July 2022</option><option value="https://via-internet.de/blog/2022/06/"> June 2022</option><option value="https://via-internet.de/blog/2022/05/"> May 2022</option><option value="https://via-internet.de/blog/2022/04/"> April 2022</option><option value="https://via-internet.de/blog/2022/03/"> March 2022</option><option value="https://via-internet.de/blog/2022/01/"> January 2022</option><option value="https://via-internet.de/blog/2021/12/"> December 2021</option><option value="https://via-internet.de/blog/2021/11/"> November 2021</option><option value="https://via-internet.de/blog/2021/10/"> October 2021</option><option value="https://via-internet.de/blog/2021/08/"> August 2021</option><option value="https://via-internet.de/blog/2021/07/"> July 2021</option><option value="https://via-internet.de/blog/2021/06/"> June 2021</option><option value="https://via-internet.de/blog/2021/05/"> May 2021</option><option value="https://via-internet.de/blog/2021/02/"> February 2021</option><option value="https://via-internet.de/blog/2021/01/"> January 2021</option><option value="https://via-internet.de/blog/2020/12/"> December 2020</option><option value="https://via-internet.de/blog/2020/11/"> November 2020</option><option value="https://via-internet.de/blog/2020/10/"> October 2020</option><option value="https://via-internet.de/blog/2020/09/"> September 2020</option><option value="https://via-internet.de/blog/2020/08/"> August 2020</option><option value="https://via-internet.de/blog/2020/07/"> July 2020</option><option value="https://via-internet.de/blog/2020/06/"> June 2020</option><option value="https://via-internet.de/blog/2020/05/"> May 2020</option><option value="https://via-internet.de/blog/2020/04/"> April 2020</option><option value="https://via-internet.de/blog/2020/03/"> March 2020</option><option value="https://via-internet.de/blog/2020/02/" selected="selected"> February 2020</option><option value="https://via-internet.de/blog/2020/01/"> January 2020</option><option value="https://via-internet.de/blog/2019/12/"> December 2019</option><option value="https://via-internet.de/blog/2019/09/"> September 2019</option><option value="https://via-internet.de/blog/2019/08/"> August 2019</option><option value="https://via-internet.de/blog/2019/07/"> July 2019</option><option value="https://via-internet.de/blog/2019/06/"> June 2019</option><option value="https://via-internet.de/blog/2019/05/"> May 2019</option><option value="https://via-internet.de/blog/2019/04/"> April 2019</option><option value="https://via-internet.de/blog/2019/03/"> March 2019</option><option value="https://via-internet.de/blog/2019/02/"> February 2019</option><option value="https://via-internet.de/blog/2019/01/"> January 2019</option><option value="https://via-internet.de/blog/2018/12/"> December 2018</option><option value="https://via-internet.de/blog/2018/11/"> November 2018</option><option value="https://via-internet.de/blog/2018/09/"> September 2018</option><option value="https://via-internet.de/blog/2018/08/"> August 2018</option><option value="https://via-internet.de/blog/2018/07/"> July 2018</option><option value="https://via-internet.de/blog/2018/03/"> March 2018</option><option value="https://via-internet.de/blog/2018/02/"> February 2018</option><option value="https://via-internet.de/blog/2018/01/"> January 2018</option><option value="https://via-internet.de/blog/2017/12/"> December 2017</option><option value="https://via-internet.de/blog/2017/07/"> July 2017</option><option value="https://via-internet.de/blog/2017/05/"> May 2017</option><option value="https://via-internet.de/blog/2017/03/"> March 2017</option><option value="https://via-internet.de/blog/2017/02/"> February 2017</option><option value="https://via-internet.de/blog/2016/12/"> December 2016</option><option value="https://via-internet.de/blog/2016/11/"> November 2016</option><option value="https://via-internet.de/blog/2016/10/"> October 2016</option> </select> <script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJhcmNoaXZlcy1kcm9wZG93bi0xIiApOwoJZnVuY3Rpb24gb25TZWxlY3RDaGFuZ2UoKSB7CgkJaWYgKCBkcm9wZG93bi5vcHRpb25zWyBkcm9wZG93bi5zZWxlY3RlZEluZGV4IF0udmFsdWUgIT09ICcnICkgewoJCQlkb2N1bWVudC5sb2NhdGlvbi5ocmVmID0gdGhpcy5vcHRpb25zWyB0aGlzLnNlbGVjdGVkSW5kZXggXS52YWx1ZTsKCQl9Cgl9Cglkcm9wZG93bi5vbmNoYW5nZSA9IG9uU2VsZWN0Q2hhbmdlOwp9KSgpOwoKLyogXV0+ICovCg=="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="search-1" class="widget widget_search wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Search</h4><form method="get" id="searchform" class="input-group" action="https://via-internet.de/blog/"> <input type="text" class="form-control" placeholder="Search" name="s" id="s"><div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button></div></form></aside></div></div></div><div class="site-info text-center"> Copyright © 2024 | Powered by <a href="//wordpress.org/">WordPress</a> <span class="sep"> | </span> Aasta Blog theme by <a target="_blank" href="//themearile.com/">ThemeArile</a></div></footer><div class="page-scroll-up"><a href="#totop"><i class="fa fa-angle-up"></i></a></div><div id="cookie-law-info-bar" data-nosnippet="true" data-cli-style="cli-style-v2" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: inherit; bottom: 0px; position: fixed;"><span><div class="cli-bar-container cli-style-v2"><div class="cli-bar-message">We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.</div><div class="cli-bar-btn_container"><a role="button" class="medium cli-plugin-button cli-plugin-main-button cli_settings_button" style="margin: 0px 5px 0px 0px; color: rgb(51, 51, 51); background-color: rgb(222, 223, 224);">Cookie Settings</a><a id="wt-cli-accept-all-btn" role="button" data-cli_action="accept_all" class="wt-cli-element medium cli-plugin-button wt-cli-accept-all-btn cookie_action_close_header cli_action_button" style="color: rgb(255, 255, 255); background-color: rgb(97, 162, 41);">Accept All</a></div></div></span></div><div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); position: fixed; font-family: inherit; width: auto; bottom: 0px; right: 100px; display: none;"><span id="cookie_hdr_showagain">Manage consent</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true"><div class="cli-modal-dialog" role="document"><div class="cli-modal-content cli-bar-popup"> <button type="button" class="cli-modal-close" id="cliModalClose"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg> <span class="wt-cli-sr-only">Close</span> </button><div class="cli-modal-body"><div class="cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-privacy-overview"><h4>Privacy Overview</h4><div class="cli-privacy-content"><div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ...</div></div> <a class="cli-privacy-readmore" aria-label="Show more" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a></div></div><div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container"><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab"> Necessary </a><div class="wt-cli-necessary-checkbox"> <input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked"> <label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label></div> <span class="cli-necessary-caption">Always Enabled</span></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="necessary"><div class="wt-cli-cookie-description"> Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.<table class="cookielawinfo-row-cat-table cookielawinfo-winter"><thead><tr><th class="cookielawinfo-column-1">Cookie</th><th class="cookielawinfo-column-3">Duration</th><th class="cookielawinfo-column-4">Description</th></tr></thead><tbody><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-analytics</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-functional</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-necessary</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-others</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-performance</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">viewed_cookie_policy</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.</td></tr></tbody></table></div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="functional" data-toggle="cli-toggle-tab"> Functional </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-functional" class="cli-user-preference-checkbox" data-id="checkbox-functional"> <label for="wt-cli-checkbox-functional" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Functional</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="functional"><div class="wt-cli-cookie-description"> Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="performance" data-toggle="cli-toggle-tab"> Performance </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-performance" class="cli-user-preference-checkbox" data-id="checkbox-performance"> <label for="wt-cli-checkbox-performance" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Performance</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="performance"><div class="wt-cli-cookie-description"> Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="analytics" data-toggle="cli-toggle-tab"> Analytics </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-analytics" class="cli-user-preference-checkbox" data-id="checkbox-analytics"> <label for="wt-cli-checkbox-analytics" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Analytics</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="analytics"><div class="wt-cli-cookie-description"> Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="advertisement" data-toggle="cli-toggle-tab"> Advertisement </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-advertisement" class="cli-user-preference-checkbox" data-id="checkbox-advertisement"> <label for="wt-cli-checkbox-advertisement" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Advertisement</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="advertisement"><div class="wt-cli-cookie-description"> Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="others" data-toggle="cli-toggle-tab"> Others </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-others" class="cli-user-preference-checkbox" data-id="checkbox-others"> <label for="wt-cli-checkbox-others" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Others</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="others"><div class="wt-cli-cookie-description"> Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.</div></div></div></div></div></div></div></div><div class="cli-modal-footer"><div class="wt-cli-element cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-tab-footer wt-cli-privacy-overview-actions"> <a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a></div></div></div></div></div></div></div></div><div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div><div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div> <script defer="" src="data:text/javascript;base64,DQogICAgICAgICAgICBmdW5jdGlvbiBfa2F0ZXhSZW5kZXIocm9vdEVsZW1lbnQpIHsNCiAgICAgICAgICAgICAgICBjb25zdCBlbGVzID0gcm9vdEVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgiLmthdGV4LWVxOm5vdCgua2F0ZXgtcmVuZGVyZWQpIik7DQogICAgICAgICAgICAgICAgZm9yKGxldCBpZHg9MDsgaWR4IDwgZWxlcy5sZW5ndGg7IGlkeCsrKSB7DQogICAgICAgICAgICAgICAgICAgIGNvbnN0IGVsZSA9IGVsZXNbaWR4XTsNCiAgICAgICAgICAgICAgICAgICAgZWxlLmNsYXNzTGlzdC5hZGQoImthdGV4LXJlbmRlcmVkIik7DQogICAgICAgICAgICAgICAgICAgIHRyeSB7DQogICAgICAgICAgICAgICAgICAgICAgICBrYXRleC5yZW5kZXIoDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxlLnRleHRDb250ZW50LA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZSwNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXlNb2RlOiBlbGUuZ2V0QXR0cmlidXRlKCJkYXRhLWthdGV4LWRpc3BsYXkiKSA9PT0gJ3RydWUnLA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aHJvd09uRXJyb3I6IGZhbHNlDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgKTsNCiAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChuKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUuc3R5bGUuY29sb3I9InJlZCI7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUudGV4dENvbnRlbnQgPSBuLm1lc3NhZ2U7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGZ1bmN0aW9uIGthdGV4UmVuZGVyKCkgew0KICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihkb2N1bWVudCk7DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoIkRPTUNvbnRlbnRMb2FkZWQiLCBmdW5jdGlvbigpIHsNCiAgICAgICAgICAgICAgICBrYXRleFJlbmRlcigpOw0KDQogICAgICAgICAgICAgICAgLy8gUGVyZm9ybSBhIEthVGVYIHJlbmRlcmluZyBzdGVwIHdoZW4gdGhlIERPTSBpcyBtdXRhdGVkLg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcihmdW5jdGlvbihtdXRhdGlvbnMpIHsNCiAgICAgICAgICAgICAgICAgICAgW10uZm9yRWFjaC5jYWxsKG11dGF0aW9ucywgZnVuY3Rpb24obXV0YXRpb24pIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmIChtdXRhdGlvbi50YXJnZXQgJiYgbXV0YXRpb24udGFyZ2V0IGluc3RhbmNlb2YgRWxlbWVudCkgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihtdXRhdGlvbi50YXJnZXQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgICAgICB9KTsNCg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2YXRpb25Db25maWcgPSB7DQogICAgICAgICAgICAgICAgICAgIHN1YnRyZWU6IHRydWUsDQogICAgICAgICAgICAgICAgICAgIGNoaWxkTGlzdDogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgY2hhcmFjdGVyRGF0YTogdHJ1ZQ0KICAgICAgICAgICAgICAgIH07DQoNCiAgICAgICAgICAgICAgICBrYXRleE9ic2VydmVyLm9ic2VydmUoZG9jdW1lbnQuYm9keSwga2F0ZXhPYnNlcnZhdGlvbkNvbmZpZyk7DQogICAgICAgICAgICB9KTsNCg0KICAgICAgICA="></script> <style type="text/css">.theme-testimonial { background-image: url(https://via-internet.de/blog/wp-content/themes/aasta-blog/assets/img/theme-bg.jpg); background-size: cover; background-position: center center; }</style> <script defer="" src="data:text/javascript;base64,CgkvLyBUaGlzIEpTIGFkZGVkIGZvciB0aGUgVG9nZ2xlIGJ1dHRvbiB0byB3b3JrIHdpdGggdGhlIGZvY3VzIGVsZW1lbnQuCgkJaWYgKHdpbmRvdy5pbm5lcldpZHRoIDwgOTkyKSB7CgkJCWRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBmdW5jdGlvbihlKSB7CgkJCWxldCBpc1RhYlByZXNzZWQgPSBlLmtleSA9PT0gJ1RhYicgfHwgZS5rZXlDb2RlID09PSA5OwoJCQkJaWYgKCFpc1RhYlByZXNzZWQpIHsKCQkJCQlyZXR1cm47CgkJCQl9CgkJCQkKCQkJY29uc3QgIGZvY3VzYWJsZUVsZW1lbnRzID0KCQkJCSdidXR0b24sIFtocmVmXSwgaW5wdXQsIHNlbGVjdCwgdGV4dGFyZWEsIFt0YWJpbmRleF06bm90KFt0YWJpbmRleD0iLTEiXSknOwoJCQljb25zdCBtb2RhbCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5uYXZiYXIubmF2YmFyLWV4cGFuZC1sZycpOyAvLyBzZWxlY3QgdGhlIG1vZGFsIGJ5IGl0J3MgaWQKCgkJCWNvbnN0IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCA9IG1vZGFsLnF1ZXJ5U2VsZWN0b3JBbGwoZm9jdXNhYmxlRWxlbWVudHMpWzBdOyAvLyBnZXQgZmlyc3QgZWxlbWVudCB0byBiZSBmb2N1c2VkIGluc2lkZSBtb2RhbAoJCQljb25zdCBmb2N1c2FibGVDb250ZW50ID0gbW9kYWwucXVlcnlTZWxlY3RvckFsbChmb2N1c2FibGVFbGVtZW50cyk7CgkJCWNvbnN0IGxhc3RGb2N1c2FibGVFbGVtZW50ID0gZm9jdXNhYmxlQ29udGVudFtmb2N1c2FibGVDb250ZW50Lmxlbmd0aCAtIDFdOyAvLyBnZXQgbGFzdCBlbGVtZW50IHRvIGJlIGZvY3VzZWQgaW5zaWRlIG1vZGFsCgoJCQkgIGlmIChlLnNoaWZ0S2V5KSB7IC8vIGlmIHNoaWZ0IGtleSBwcmVzc2VkIGZvciBzaGlmdCArIHRhYiBjb21iaW5hdGlvbgoJCQkJaWYgKGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQgPT09IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCkgewoJCQkJICBsYXN0Rm9jdXNhYmxlRWxlbWVudC5mb2N1cygpOyAvLyBhZGQgZm9jdXMgZm9yIHRoZSBsYXN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsKCQkJCX0KCQkJICB9IGVsc2UgeyAvLyBpZiB0YWIga2V5IGlzIHByZXNzZWQKCQkJCWlmIChkb2N1bWVudC5hY3RpdmVFbGVtZW50ID09PSBsYXN0Rm9jdXNhYmxlRWxlbWVudCkgeyAvLyBpZiBmb2N1c2VkIGhhcyByZWFjaGVkIHRvIGxhc3QgZm9jdXNhYmxlIGVsZW1lbnQgdGhlbiBmb2N1cyBmaXJzdCBmb2N1c2FibGUgZWxlbWVudCBhZnRlciBwcmVzc2luZyB0YWIKCQkJCSAgZmlyc3RGb2N1c2FibGVFbGVtZW50LmZvY3VzKCk7IC8vIGFkZCBmb2N1cyBmb3IgdGhlIGZpcnN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsJCQkgIAoJCQkJfQoJCQkgIH0KCgkJCX0pOwoJCX0K"></script> <script defer="" src="data:text/javascript;base64,CiAgICAgICAgbmV3Q29udGFpbmVyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3BhbicpOwogICAgICAgIG5ld0NvbnRhaW5lci5zdHlsZS5zZXRQcm9wZXJ0eSgnZGlzcGxheScsJ25vbmUnLCcnKTsKICAgICAgICBuZXdOb2RlICAgICAgICAgICA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NjcmlwdCcpOwogICAgICAgIG5ld05vZGUudHlwZSAgICAgID0gJ21hdGgvdGV4JzsKICAgICAgICBuZXdOb2RlLmlubmVySFRNTCA9ICdcXG5ld2NvbW1hbmR7XFxlcHN9e1xcdmFyZXBzaWxvbn1cblxcbmV3Y29tbWFuZHtcXFJSfXtcXG1hdGhiYntSfX1cblxcbmV3Y29tbWFuZHtcXHJkfXtcXG9wZXJhdG9ybmFtZXtkfX1cblxcbmV3Y29tbWFuZHtcXHNldH1bMV17XFxsZWZ0XFx7IzFcXHJpZ2h0XFx9fSc7CiAgICAgICAgbmV3Q29udGFpbmVyLmFwcGVuZENoaWxkKG5ld05vZGUpOwogICAgICAgIGRvY3VtZW50LmJvZHkuaW5zZXJ0QmVmb3JlKG5ld0NvbnRhaW5lcixkb2N1bWVudC5ib2R5LmZpcnN0Q2hpbGQpOwogICAgICAgIA=="></script> <script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], displayMath: [['$$', '$$'], ["\\[", "\\]"]], processEscapes: true }, TeX: { equationNumbers: {autoNumber: "AMS", useLabelIds: true} }, });</script> <link rel="stylesheet" id="cookie-law-info-table-css" href="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_26b4f0c3c1bcf76291fa4952fb7f04fb.php?ver=3.2.8" type="text/css" media="all"> <script defer="" id="toc-front-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgdG9jcGx1cyA9IHsidmlzaWJpbGl0eV9zaG93IjoiQW56ZWlnZW4iLCJ2aXNpYmlsaXR5X2hpZGUiOiJBdXNibGVuZGVuIiwidmlzaWJpbGl0eV9oaWRlX2J5X2RlZmF1bHQiOiIxIiwid2lkdGgiOiJBdXRvIn07Ci8qIF1dPiAqLwo="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_93d421fd7576b0ca9c359ffe2fa16113.php?ver=20151215" id="aasta-skip-link-focus-fix-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.7.2" id="katex-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=UnpSS38vU0joHj5" id="enlighterjs-js"></script> <script defer="" id="enlighterjs-js-after" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwohZnVuY3Rpb24oZSxuKXtpZigidW5kZWZpbmVkIiE9dHlwZW9mIEVubGlnaHRlckpTKXt2YXIgbz17InNlbGVjdG9ycyI6eyJibG9jayI6InByZS5FbmxpZ2h0ZXJKU1JBVyIsImlubGluZSI6ImNvZGUuRW5saWdodGVySlNSQVcifSwib3B0aW9ucyI6eyJpbmRlbnQiOjQsImFtcGVyc2FuZENsZWFudXAiOnRydWUsImxpbmVob3ZlciI6dHJ1ZSwicmF3Y29kZURiY2xpY2siOnRydWUsInRleHRPdmVyZmxvdyI6ImJyZWFrIiwibGluZW51bWJlcnMiOmZhbHNlLCJ0aGVtZSI6ImNsYXNzaWMiLCJsYW5ndWFnZSI6ImdlbmVyaWMiLCJyZXRhaW5Dc3NDbGFzc2VzIjpmYWxzZSwiY29sbGFwc2UiOmZhbHNlLCJ0b29sYmFyT3V0ZXIiOiIiLCJ0b29sYmFyVG9wIjoie0JUTl9SQVd9e0JUTl9DT1BZfXtCVE5fV0lORE9XfXtCVE5fV0VCU0lURX0iLCJ0b29sYmFyQm90dG9tIjoiIn19OyhlLkVubGlnaHRlckpTSU5JVD1mdW5jdGlvbigpe0VubGlnaHRlckpTLmluaXQoby5zZWxlY3RvcnMuYmxvY2ssby5zZWxlY3RvcnMuaW5saW5lLG8ub3B0aW9ucyl9KSgpfWVsc2V7KG4mJihuLmVycm9yfHxuLmxvZyl8fGZ1bmN0aW9uKCl7fSkoIkVycm9yOiBFbmxpZ2h0ZXJKUyByZXNvdXJjZXMgbm90IGxvYWRlZCB5ZXQhIil9fSh3aW5kb3csY29uc29sZSk7Ci8qIF1dPiAqLwo="></script> <script type="text/javascript" id="jetpack-stats-js-before">_stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"195943667\",\"post\":\"0\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]); _stq.push([ "clickTrackerInit", "195943667", "0" ]);</script> <script type="text/javascript" src="https://stats.wp.com/e-202510.js" id="jetpack-stats-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="gt_widget_script_62673750-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['62673750'] = {"default_language":"de","languages":["de","en","fr","zh-CN","nl","it","es","da","pt"],"url_structure":"none","native_language_names":1,"flag_style":"2d","flag_size":24,"wrapper_selector":"#gtranslate_menu_wrapper_37060","alt_flags":[],"switcher_open_direction":"top","switcher_horizontal_position":"inline","switcher_text_color":"#666","switcher_arrow_color":"#666","switcher_border_color":"#ccc","switcher_background_color":"#fff","switcher_background_shadow_color":"#efefef","switcher_background_hover_color":"#fff","dropdown_text_color":"#000","dropdown_hover_color":"#fff","dropdown_background_color":"#eee","flags_location":"\/blog\/wp-content\/plugins\/gtranslate\/flags\/"};</script><script src="https://via-internet.de/blog/wp-content/plugins/gtranslate/js/dwf.js?ver=6.7.2" data-no-optimize="1" data-no-minify="1" data-gt-orig-url="/blog/2020/02/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="62673750" defer=""></script><script defer="" id="wpcd-scripts-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgd3BjZGFqYXggPSB7ImFqYXh1cmwiOiJodHRwczpcL1wvdmlhLWludGVybmV0LmRlXC9ibG9nXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAifTsKLyogXV0+ICovCg=="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_231b95969d2321feeaab8fdd8121442a.php" id="wpcd-scripts-js"></script> <script defer="" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js&ver=2.7.5" id="mathjax-js"></script> <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async="" src="https://via-internet.de/blog/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js"></script> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Page Caching using Disk: Enhanced Lazy Loading Database Caching 2/163 queries in 0.254 seconds using Disk Served from: via-internet.de @ 2025-03-08 07:08:06 by W3 Total Cache --></pre></pre></pre> <a href="{ <a href="{ Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter <a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <p>Install the Django Extensions for additional commands:</p> <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><p>Add Django Extensions to the INSTALLED_APPS</p><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 = [ ... 'django_extensions' ]</pre><p>Show URLs and Namespaces (only for out apps, admin urls are removed)</p><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><figure class="wp-block-image size-large"><img decoding="async" width="1676" height="449" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201676%20449'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_55_namespaces.png?fit=700%2C188&ssl=1" alt="" class="wp-image-6078 lazy" data-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" data-sizes="auto, (max-width: 1676px) 100vw, 1676px"></figure><h2 class="wp-block-heading">Preparing required components and pages</h2><p>In summary, these are the steps to create the desired folder structure:</p><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 mkdir -p dashboard/apps/components/cards/templates/cards mkdir -p dashboard/apps/pages/blank/templates/blank mkdir -p dashboard/apps/pages/charts/templates/charts mkdir -p dashboard/apps/pages/login/templates/login mkdir -p dashboard/apps/pages/pagenotfound/templates/pagenotfound mkdir -p dashboard/apps/pages/password/templates/password mkdir -p dashboard/apps/pages/register/templates/register mkdir -p dashboard/apps/pages/tables/templates/tables mkdir -p dashboard/apps/utilities/animations/templates/animations mkdir -p dashboard/apps/utilities/borders/templates/borders mkdir -p dashboard/apps/utilities/colors/templates/colors mkdir -p dashboard/apps/utilities/others/templates/others</pre><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 python3 manage.py startapp cards dashboard/apps/components/cards python3 manage.py startapp blank dashboard/apps/pages/blank python3 manage.py startapp charts dashboard/apps/pages/charts python3 manage.py startapp login dashboard/apps/pages/login python3 manage.py startapp pagenotfound dashboard/apps/pages/pagenotfound python3 manage.py startapp password dashboard/apps/pages/password python3 manage.py startapp register dashboard/apps/pages/register python3 manage.py startapp tables dashboard/apps/pages/tables python3 manage.py startapp animations dashboard/apps/utilities/animations python3 manage.py startapp borders dashboard/apps/utilities/borders python3 manage.py startapp colors dashboard/apps/utilities/colors python3 manage.py startapp others dashboard/apps/utilities/others</pre><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 "{ { { <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 cp base.html dashboard/apps/components/cards/templates/cards cp base.html dashboard/apps/pages/blank/templates/blank cp base.html dashboard/apps/pages/charts/templates/charts cp base.html dashboard/apps/pages/login/templates/login cp base.html dashboard/apps/pages/pagenotfound/templates/pagenotfound cp base.html dashboard/apps/pages/password/templates/password cp base.html dashboard/apps/pages/register/templates/register cp base.html dashboard/apps/pages/tables/templates/tables cp base.html dashboard/apps/utilities/animations/templates/animations cp base.html dashboard/apps/utilities/borders/templates/borders cp base.html dashboard/apps/utilities/colors/templates/colors cp base.html dashboard/apps/utilities/others/templates/others</pre><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><figure class="wp-block-image size-large"><img decoding="async" width="291" height="874" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20291%20874'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_10_folder_structure.png" alt="" class="wp-image-6012 lazy" data-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" data-sizes="auto, (max-width: 291px) 100vw, 291px"></figure><p>Each of the folders has the same structure, for example the buttons component. We will delete some unnecessary files</p><figure class="wp-block-image size-large is-resized"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20293%20284'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_11_app-folder-structure.png" alt="" class="wp-image-6013 lazy" width="293" height="284" data-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" data-sizes="auto, (max-width: 293px) 100vw, 293px"></figure><h2 class="wp-block-heading">Replacing Projects with dynamic data</h2><p>Replacing the static parts with dynamic content could be achieved by the following approach:</p><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><p>The steps are the same for all components (all items of the side menu).</p><p>Find the</p><p>Identify dynamic parts in template</p><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_20_projects_html_old-700x374.png" alt="" class="wp-image-5972 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><figure class="wp-block-image size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data-700x219.png" alt="" class="wp-image-5971 lazy"></figure><figure class="wp-block-table"><table><tbody><tr><td><img decoding="async" width="500" height="278" class="wp-image-5973 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20278'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_42_projects_old_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="157" class="wp-image-5971 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20157'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="279" class="wp-image-5975 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20279'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_44_projects_new_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="151" class="wp-image-5974 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20151'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_43_projects_new_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><h2 class="wp-block-heading">Create templates for side menu pages</h2><p>For every side menu item, their is a corresponding html file in the install folder of the <code>sb-admin-2</code> template:</p><p>Remember the environment variable we create in part 1 for the start of our project</p><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><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 find dashboard/apps install/sb-admin-2 -name *.html</pre><p>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><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><p>Each template base.html should have the following content:</p><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="">{ { { <p>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> <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 class IndexView(generic.TemplateView): template_name = 'buttons/base.html'</pre><p>So, for each template file, we have to</p><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><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=""> <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --></pre><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure><div class="post-content"><div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 22<small class="months">Feb</small></time></a> </span><div class="media-body"><header class="entry-header"><h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/">Django | Build a Dashboard with Django and Bootstrap: Part 2</a></h4></header><div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span></div><div class="entry-content"><p>This is Part 2 of <em>Building a Dashboard with Django and Bootstrap</em>:</p><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><h2 class="wp-block-heading">Introduction</h2><p>If you follow the first part of this blog topic, you have a running Django dashboard.</p><p>But, unfortunately, the content is still static. Let’s review the current state:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"></div></div><p>Perfect. We are done with the basic setup.</p><p>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><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>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><p>We will do this by following these steps:</p><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><h2 class="wp-block-heading">Identify dynamic parts</h2><p>How to find the parts, which are dynamic.</p><p>One way is to ask:</p><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><p>You mostly get the same answers by the question:</p><ul class="wp-block-list"><li>What are the main components of a web page (including navigation and content)</li></ul><p>For answer the first question, take a look at the current page and “name” the areas:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="563" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20563'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/02_elements_of_dashboard_page.png?fit=700%2C394&ssl=1" alt="" class="wp-image-5929 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>So, these “names” are also the answer for the 3. Question:</p><ul class="wp-block-list"><li>sidemenu</li><li>top bar</li><li>content</li></ul><p>And maybe you find additional “names”</p><ul class="wp-block-list"><li>header</li><li>footer</li><li>top menu</li><li>left and right sidebar</li></ul><h2 class="wp-block-heading">Find identified parts in template</h2><p>Next step is, to find the identified parts in our dashboard template</p><p><code>dashboard/templates/site/sb-admin-2/base.html</code></p><p>This is an easy step, because the developer of the SB Admin 2 template documented their template well:</p><figure class="wp-block-image size-large"><img decoding="async" width="2004" height="1706" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202004%201706'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/03_elements_of_dashboard_in_codepage.png?fit=700%2C596&ssl=1" alt="" class="wp-image-5932 lazy" data-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" data-sizes="auto, (max-width: 2004px) 100vw, 2004px"></figure><p>Looking into the code of the template, you will find comment lines describing the content:</p><ul class="wp-block-list"><li><code><!-- Sidebar --></code></li><li><code><!-- Topbar --></code></li><li><code><!-- Top Search --></code></li><li><code><!-- Top Navbar --></code></li><li><code><!-- Begin Page Content--></code></li></ul><p>So, it is obvious what do to next:</p><ul class="wp-block-list"><li>get the <em>dynamic</em> part (lines under)<code><!-- Begin Page Content--></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><p>This is the way, the template system of django works:</p><figure class="wp-block-image size-large"><img decoding="async" width="954" height="251" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20954%20251'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/21_combine_template_and_content_ui.png?fit=700%2C184&ssl=1" alt="" class="wp-image-5944 lazy" data-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" data-sizes="auto, (max-width: 954px) 100vw, 954px"></figure><p>Let’s explain this with a simple example: the page title</p><p>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><p>To achieve this, we have to tell our template system the following:</p><figure class="wp-block-image size-large"><img decoding="async" width="940" height="209" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20940%20209'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/22_combine_template_and_content_code.png?fit=700%2C156&ssl=1" alt="" class="wp-image-5943 lazy" data-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" data-sizes="auto, (max-width: 940px) 100vw, 940px"></figure><p>Now, we do the same with the content:</p><figure class="wp-block-image size-large"><img decoding="async" width="983" height="457" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20983%20457'%3E%3C/svg%3E" data-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&ssl=1" alt="" class="wp-image-5947 lazy" data-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" data-sizes="auto, (max-width: 983px) 100vw, 983px"></figure><p>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><p>Well, let’s make a test and try to include a different content in the dashboard template.</p><p>Change the lines, where we include the content into this:</p><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="">{ MISSING CONTENT { <p>Did you notice the other name of the content: <strong>content_missing</strong>?</p> <p>Change the template, save the file and have a look at the result:</p> <figure class="wp-block-image size-large"><img decoding="async" width="2328" height="448" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202328%20448'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/41_missing_content.png?fit=700%2C135&ssl=1" alt="" class="wp-image-5949 lazy" data-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" data-sizes="auto, (max-width: 2328px) 100vw, 2328px"></figure> <p>Change content back, so your template is working again:</p> <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="">{ MISSING CONTENT { <p>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> </pre></pre></div> </div> </div> </div> </article><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"> <figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure> <div class="post-content"> <div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 21<small class="months">Feb</small></time></a> </span> <div class="media-body"> <header class="entry-header"> <h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/">Django | Build a Dashboard with Django and Bootstrap: Part 1</a></h4> </header> <div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span> </div> <div class="entry-content"> <p>This is Part 1 of <em>Building a Dashboard with Django and Bootstrap</em>:</p> <ul class="wp-block-list"> <li><strong>Part 1: Building a base Django project</strong></li> <li><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/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/build-a-dashboard-with-django-and-bootstrap-part-4/">Part 4: Deploy Django App to Azure</a></li> </ul> <h2 class="wp-block-heading">Introduction</h2> <p>Building a complete web app isn’t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don’t using tools or framework, which helps and makes our life easier. <a href="https://www.djangoproject.com/"><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824465754606598455505">Django</gwmw></a> is one of these frameworks:</p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468379037630016661">Django</gwmw> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development</p> </blockquote> <p>So, let’s get started.</p> <h3 class="wp-block-heading">Create project</h3> <p>For subsequent steps, we will remember our starting directory </p> <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="">❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder...</pre><p>First step is to create our main Django project</p><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="">❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate</pre><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="">❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK.</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="782" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20782'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png" alt="" class="wp-image-9675 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-300x229.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-768x587.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1536x1173.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-2048x1564.png 2048w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure></div><h3 class="wp-block-heading">Create first apps</h3><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="">❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend</pre><p>The folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="970" height="436" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20970%20436'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png" alt="" class="wp-image-9690 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png 970w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-300x135.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-768x345.png 768w" data-sizes="auto, (max-width: 970px) 100vw, 970px"></figure><h2 class="wp-block-heading">Add new apps to project</h2><p>Modify name in <code>apps/core/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core'</pre><p>Modify name in <code>apps/frontend/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend'</pre><p>Modify <code>dashboard/settings.py</code></p><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="">INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ]</pre><p>Modify <code>dashboard/urls.py</code></p><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="">from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ]</pre><h3 class="wp-block-heading">Create view</h3><p>Modify view in <code>apps/frontend/views.py</code></p><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="">from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html'</pre><h3 class="wp-block-heading">Create template for frontend View</h3><p>Create template file <code>apps/frontend/templates/frontend/index.html</code></p><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=""><h1> Frontend: Let's get started </h1></pre><h3 class="wp-block-heading">Add template folder to configuration</h3><p>In <kbd>dashboard/settings.py</kbd>, add template folder to TEMPLATES</p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ]</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="624" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20624%20186'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png" alt="" class="wp-image-8442 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png 624w, https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2-300x89.png 300w" data-sizes="auto, (max-width: 624px) 100vw, 624px"></figure></div><h2 class="wp-block-heading">Current folder Structure</h2><p>So far, we have the following folder structure</p><figure class="wp-block-image size-full"><img decoding="async" width="690" height="982" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20690%20982'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png" alt="" class="wp-image-9691 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png 690w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001-211x300.png 211w" data-sizes="auto, (max-width: 690px) 100vw, 690px"></figure><h2 class="wp-block-heading">Prepare for administrate your project</h2><h3 class="wp-block-heading">Create admin user</h3><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="">❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully.</pre><h2 class="wp-block-heading">Add Bootstrap support</h2><p>Download requires files for Bootstrap, jQuery and PopperJS.</p><p>Or download <a href="https://via-internet.de/blog/wp-content/uploads/2021/10/static.zip">this </a>prepared archiv and unzip the files unter <code>dashboard</code>.</p><p>Run the scripts in <kbd>$DASHBOARD_ROOT</kbd></p><p>Hint: You need to install <a href="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3" data-type="link" data-id="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3">PowerShell</a> before running the scripts.</p><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 > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1</pre><p><kbd>download_bootstrap.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' </pre><p><kbd>download_jquery.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map</pre><p><kbd>download_popperjs.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js</pre><p>Finally, the folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="474" height="660" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20474%20660'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png" alt="" class="wp-image-9679 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png 474w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008-215x300.png 215w" data-sizes="auto, (max-width: 474px) 100vw, 474px"></figure><h3 class="wp-block-heading">Create site templates in <code>dashboard/templates/site</code></h3><h3 class="wp-block-heading">Add templates path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470508427730698282">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="5" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ...</pre><h3 class="wp-block-heading"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-2" id="gwmw-15824470715450370185521">Add static</gwmw> path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470715451132153545">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><p>Add as first line</p><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="">import os</pre><p>Then add / replace at <kbd>STATIC_URL=...</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="2-4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ]</pre><h2 class="wp-block-heading">Modify frontend view template</h2><p>File <code>dashboard/apps/frontend/templates/index.html</code></p><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="">{ { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { <p>File <kbd>dashboard/apps/frontend/templates/site/base.html</kbd></p> <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="">{ <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html></pre><h2 class="wp-block-heading">View current status of project</h2><figure class="wp-block-image size-large"><img decoding="async" width="1024" height="778" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20778'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png" alt="" class="wp-image-9682 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-300x228.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-768x583.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1536x1167.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap.png 1714w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure><h2 class="wp-block-heading">Final Result</h2><p>The final result could be found <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project" data-type="link" data-id="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project">here</a>.</p><h2 class="wp-block-heading">Add dashboard from an existing template</h2><p>For a first start, we will use this <a href="https://startbootstrap.com/previews/sb-admin-2/"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824470188863680783027">sb</gwmw>-admin-2 dashboard</a> template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>:</p><figure class="wp-block-image size-full"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/61_dashboard.png" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><h2 class="wp-block-heading">Download required files</h2><p>Bootstrap templates consist of at least 3 different types of files</p><ul class="wp-block-list"><li>main index.html page, responsible for collection all elements and set up your page</li><li>CSS files defining the style of your page</li><li>JavaScript files, containing needed frameworks and code</li></ul><p>So, first start by downloading the sample template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>. Be sure, you start in our project root folder:</p><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="">❯ cd $DASHBOARD_ROOT</pre><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="">❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 </pre><p>Next, find out, what we need for our template in addition to the file <kbd>index.html</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)="</pre><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script></pre><p>That’s a lot of additional files.</p><p>To keep the file structure consistent, these files should be stored under the <kbd>dashboard/static</kbd> folder (same as the bootstrap files before).</p><p>To achieve this, there are <gwmw class="ginger-module-highlighter-mistake-type-2" id="gwmw-15824469384628631344488">two possi</gwmw>bilities:</p><ul class="wp-block-list"><li>Create desired folder and copy each of the source files to the destination folder</li><li><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824469457060378385283">Copy</gwmw> the complete static folder from the <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap">Github Repository</a> for this post.</li></ul><p>We use the second option to keep the focus on creating our dashboard.<gwmw style="display:none;"></gwmw></p><p>So, first, clone the repository:</p><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="">cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap</pre><p>Then, copy the requred files</p><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="">cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard</pre><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 -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard</pre><p>Having everything needed for the dashboard template, the next step is to modify the front-end template</p><p>File <code>dashboard/apps/frontend/templates/frontend/index.html</code></p> <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="">{ { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div></pre></pre></div></div></div></div></article><footer class="site-footer"><div class="container"><div class="row footer-sidebar"><div class="col-lg-3 col-md-6 col-sm-12"><aside id="categories-1" class="widget widget_categories wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Categories</h4><form action="https://via-internet.de/blog" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name="cat" id="cat" class="postform"><option value="-1">Select Category</option><option class="level-0" value="2">3D Printing (1)</option><option class="level-0" value="168">AI (3)</option><option class="level-0" value="1">Allgemein (32)</option><option class="level-0" value="151">Anaconda (1)</option><option class="level-0" value="4">Apache (3)</option><option class="level-0" value="5">Apache Spark (3)</option><option class="level-0" value="6">Apache Zeppelin (1)</option><option class="level-0" value="7">Arduino (1)</option><option class="level-0" value="160">Astro (3)</option><option class="level-0" value="9">Azure (7)</option><option class="level-1" value="20"> Databricks (4)</option><option class="level-1" value="87"> Widgets (1)</option><option class="level-0" value="158">BeautifulSoup (1)</option><option class="level-0" value="10">Bootstrap (6)</option><option class="level-0" value="12">Capacitor (1)</option><option class="level-0" value="13">CI/CD (3)</option><option class="level-1" value="40"> Jenkins (3)</option><option class="level-0" value="153">Container (9)</option><option class="level-1" value="22"> Docker (8)</option><option class="level-2" value="43"> Kubernetes (2)</option><option class="level-1" value="154"> Podman (1)</option><option class="level-0" value="16">Cookbook (30)</option><option class="level-0" value="17">CSS (3)</option><option class="level-0" value="135">Daily (6)</option><option class="level-0" value="144">Dart (1)</option><option class="level-0" value="18">Data Science (1)</option><option class="level-0" value="19">Database (2)</option><option class="level-1" value="50"> MySQL (1)</option><option class="level-1" value="58"> PostgreSQL (1)</option><option class="level-0" value="96">FastAPI (1)</option><option class="level-0" value="27">Generell (1)</option><option class="level-0" value="28">Git und Github (6)</option><option class="level-0" value="157">Grafana (1)</option><option class="level-0" value="31">Hadoop (1)</option><option class="level-0" value="163">Hexo (1)</option><option class="level-0" value="33">Homebrew (1)</option><option class="level-0" value="165">HyperDiv (1)</option><option class="level-0" value="34">Ionic 3 (5)</option><option class="level-0" value="35">Ionic 4 (9)</option><option class="level-0" value="39">Jekyll (1)</option><option class="level-0" value="41">Jupyter (2)</option><option class="level-0" value="42">Keycloak (3)</option><option class="level-0" value="137">Languages (60)</option><option class="level-1" value="14"> ClojureScript (1)</option><option class="level-1" value="15"> Cobol (1)</option><option class="level-1" value="24"> Erlang (2)</option><option class="level-2" value="94"> Elixir (2)</option><option class="level-1" value="149"> F# (2)</option><option class="level-1" value="29"> Go (1)</option><option class="level-1" value="30"> Groovy (1)</option><option class="level-1" value="32"> Haskell (3)</option><option class="level-1" value="36"> iPython (1)</option><option class="level-1" value="37"> Java (5)</option><option class="level-1" value="38"> Javascript (7)</option><option class="level-1" value="56"> Perl (1)</option><option class="level-1" value="57"> PHP (13)</option><option class="level-1" value="63"> PureScript (1)</option><option class="level-1" value="65"> Python (19)</option><option class="level-2" value="141"> PIP (1)</option><option class="level-1" value="68"> Rust (3)</option><option class="level-1" value="75"> Swift (1)</option><option class="level-0" value="99">Laravel (16)</option><option class="level-0" value="44">Learning (5)</option><option class="level-0" value="45">Linux (1)</option><option class="level-0" value="46">macOS (1)</option><option class="level-0" value="47">matter.js (1)</option><option class="level-0" value="48">Maven (1)</option><option class="level-0" value="49">Mobile Development (9)</option><option class="level-0" value="51">NestJS (1)</option><option class="level-0" value="156">Nicepage (1)</option><option class="level-0" value="52">Node.js (2)</option><option class="level-0" value="53">Office 365 (2)</option><option class="level-1" value="95"> Excel (1)</option><option class="level-1" value="81"> VBA (1)</option><option class="level-1" value="88"> Word (1)</option><option class="level-0" value="164">Ollama (4)</option><option class="level-0" value="54">OpenSCAD (1)</option><option class="level-0" value="159">Power Apps (1)</option><option class="level-0" value="59">Power BI (4)</option><option class="level-0" value="146">Power BI Visuals (3)</option><option class="level-0" value="61">Power Query (3)</option><option class="level-0" value="62">Protractor (1)</option><option class="level-0" value="64">PySpark (2)</option><option class="level-0" value="69">rxjs (2)</option><option class="level-0" value="70">SAS (3)</option><option class="level-0" value="71">Selenium (1)</option><option class="level-0" value="72">Shell (10)</option><option class="level-1" value="92"> Bash (1)</option><option class="level-1" value="102"> Power Shell (8)</option><option class="level-0" value="73">Smalltalk (1)</option><option class="level-0" value="74">Spring Boot (2)</option><option class="level-0" value="166">Static-Site-Generator (1)</option><option class="level-1" value="167"> Hugo (1)</option><option class="level-0" value="76">TDD (1)</option><option class="level-1" value="77"> Testing / Unittests (1)</option><option class="level-0" value="145">Troubleshooting (3)</option><option class="level-0" value="126">Tutorial (1)</option><option class="level-0" value="78">Ubuntu (1)</option><option class="level-0" value="79">Uncategorized (7)</option><option class="level-0" value="129">Unix (1)</option><option class="level-0" value="80">Vagrant (1)</option><option class="level-0" value="82">Virtual Machine (2)</option><option class="level-0" value="83">Virtualbox (2)</option><option class="level-0" value="84">Visual Studio Code (4)</option><option class="level-0" value="85">Visualisation (3)</option><option class="level-1" value="93"> D3.js (2)</option><option class="level-1" value="100"> p5.js (1)</option><option class="level-0" value="86">Web Framework (40)</option><option class="level-1" value="90"> Angular (10)</option><option class="level-1" value="91"> AngularJS (1)</option><option class="level-1" value="21"> Django (5)</option><option class="level-1" value="97"> Flask (1)</option><option class="level-1" value="26"> Flutter (6)</option><option class="level-1" value="98"> Ionic (13)</option><option class="level-1" value="66"> React (3)</option><option class="level-1" value="148"> React Native (1)</option><option class="level-1" value="67"> ReactJS (3)</option><option class="level-1" value="103"> VUE (2)</option><option class="level-0" value="143">Windows Subsystem for Linux (1)</option><option class="level-0" value="89">Wordpress (2)</option><option class="level-0" value="155">XAMPP (1)</option> </select></form><script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJjYXQiICk7CglmdW5jdGlvbiBvbkNhdENoYW5nZSgpIHsKCQlpZiAoIGRyb3Bkb3duLm9wdGlvbnNbIGRyb3Bkb3duLnNlbGVjdGVkSW5kZXggXS52YWx1ZSA+IDAgKSB7CgkJCWRyb3Bkb3duLnBhcmVudE5vZGUuc3VibWl0KCk7CgkJfQoJfQoJZHJvcGRvd24ub25jaGFuZ2UgPSBvbkNhdENoYW5nZTsKfSkoKTsKCi8qIF1dPiAqLwo="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="archives-1" class="widget widget_archive wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Archives</h4> <label class="screen-reader-text" for="archives-dropdown-1">Archives</label> <select id="archives-dropdown-1" name="archive-dropdown"><option value="">Select Month</option><option value="https://via-internet.de/blog/2024/11/"> November 2024</option><option value="https://via-internet.de/blog/2024/10/"> October 2024</option><option value="https://via-internet.de/blog/2024/09/"> September 2024</option><option value="https://via-internet.de/blog/2024/07/"> July 2024</option><option value="https://via-internet.de/blog/2024/05/"> May 2024</option><option value="https://via-internet.de/blog/2024/04/"> April 2024</option><option value="https://via-internet.de/blog/2024/03/"> March 2024</option><option value="https://via-internet.de/blog/2024/01/"> January 2024</option><option value="https://via-internet.de/blog/2023/12/"> December 2023</option><option value="https://via-internet.de/blog/2023/11/"> November 2023</option><option value="https://via-internet.de/blog/2023/10/"> October 2023</option><option value="https://via-internet.de/blog/2023/09/"> September 2023</option><option value="https://via-internet.de/blog/2023/08/"> August 2023</option><option value="https://via-internet.de/blog/2023/07/"> July 2023</option><option value="https://via-internet.de/blog/2023/04/"> April 2023</option><option value="https://via-internet.de/blog/2023/03/"> March 2023</option><option value="https://via-internet.de/blog/2023/02/"> February 2023</option><option value="https://via-internet.de/blog/2022/11/"> November 2022</option><option value="https://via-internet.de/blog/2022/10/"> October 2022</option><option value="https://via-internet.de/blog/2022/07/"> July 2022</option><option value="https://via-internet.de/blog/2022/06/"> June 2022</option><option value="https://via-internet.de/blog/2022/05/"> May 2022</option><option value="https://via-internet.de/blog/2022/04/"> April 2022</option><option value="https://via-internet.de/blog/2022/03/"> March 2022</option><option value="https://via-internet.de/blog/2022/01/"> January 2022</option><option value="https://via-internet.de/blog/2021/12/"> December 2021</option><option value="https://via-internet.de/blog/2021/11/"> November 2021</option><option value="https://via-internet.de/blog/2021/10/"> October 2021</option><option value="https://via-internet.de/blog/2021/08/"> August 2021</option><option value="https://via-internet.de/blog/2021/07/"> July 2021</option><option value="https://via-internet.de/blog/2021/06/"> June 2021</option><option value="https://via-internet.de/blog/2021/05/"> May 2021</option><option value="https://via-internet.de/blog/2021/02/"> February 2021</option><option value="https://via-internet.de/blog/2021/01/"> January 2021</option><option value="https://via-internet.de/blog/2020/12/"> December 2020</option><option value="https://via-internet.de/blog/2020/11/"> November 2020</option><option value="https://via-internet.de/blog/2020/10/"> October 2020</option><option value="https://via-internet.de/blog/2020/09/"> September 2020</option><option value="https://via-internet.de/blog/2020/08/"> August 2020</option><option value="https://via-internet.de/blog/2020/07/"> July 2020</option><option value="https://via-internet.de/blog/2020/06/"> June 2020</option><option value="https://via-internet.de/blog/2020/05/"> May 2020</option><option value="https://via-internet.de/blog/2020/04/"> April 2020</option><option value="https://via-internet.de/blog/2020/03/"> March 2020</option><option value="https://via-internet.de/blog/2020/02/" selected="selected"> February 2020</option><option value="https://via-internet.de/blog/2020/01/"> January 2020</option><option value="https://via-internet.de/blog/2019/12/"> December 2019</option><option value="https://via-internet.de/blog/2019/09/"> September 2019</option><option value="https://via-internet.de/blog/2019/08/"> August 2019</option><option value="https://via-internet.de/blog/2019/07/"> July 2019</option><option value="https://via-internet.de/blog/2019/06/"> June 2019</option><option value="https://via-internet.de/blog/2019/05/"> May 2019</option><option value="https://via-internet.de/blog/2019/04/"> April 2019</option><option value="https://via-internet.de/blog/2019/03/"> March 2019</option><option value="https://via-internet.de/blog/2019/02/"> February 2019</option><option value="https://via-internet.de/blog/2019/01/"> January 2019</option><option value="https://via-internet.de/blog/2018/12/"> December 2018</option><option value="https://via-internet.de/blog/2018/11/"> November 2018</option><option value="https://via-internet.de/blog/2018/09/"> September 2018</option><option value="https://via-internet.de/blog/2018/08/"> August 2018</option><option value="https://via-internet.de/blog/2018/07/"> July 2018</option><option value="https://via-internet.de/blog/2018/03/"> March 2018</option><option value="https://via-internet.de/blog/2018/02/"> February 2018</option><option value="https://via-internet.de/blog/2018/01/"> January 2018</option><option value="https://via-internet.de/blog/2017/12/"> December 2017</option><option value="https://via-internet.de/blog/2017/07/"> July 2017</option><option value="https://via-internet.de/blog/2017/05/"> May 2017</option><option value="https://via-internet.de/blog/2017/03/"> March 2017</option><option value="https://via-internet.de/blog/2017/02/"> February 2017</option><option value="https://via-internet.de/blog/2016/12/"> December 2016</option><option value="https://via-internet.de/blog/2016/11/"> November 2016</option><option value="https://via-internet.de/blog/2016/10/"> October 2016</option> </select> <script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJhcmNoaXZlcy1kcm9wZG93bi0xIiApOwoJZnVuY3Rpb24gb25TZWxlY3RDaGFuZ2UoKSB7CgkJaWYgKCBkcm9wZG93bi5vcHRpb25zWyBkcm9wZG93bi5zZWxlY3RlZEluZGV4IF0udmFsdWUgIT09ICcnICkgewoJCQlkb2N1bWVudC5sb2NhdGlvbi5ocmVmID0gdGhpcy5vcHRpb25zWyB0aGlzLnNlbGVjdGVkSW5kZXggXS52YWx1ZTsKCQl9Cgl9Cglkcm9wZG93bi5vbmNoYW5nZSA9IG9uU2VsZWN0Q2hhbmdlOwp9KSgpOwoKLyogXV0+ICovCg=="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="search-1" class="widget widget_search wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Search</h4><form method="get" id="searchform" class="input-group" action="https://via-internet.de/blog/"> <input type="text" class="form-control" placeholder="Search" name="s" id="s"><div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button></div></form></aside></div></div></div><div class="site-info text-center"> Copyright © 2024 | Powered by <a href="//wordpress.org/">WordPress</a> <span class="sep"> | </span> Aasta Blog theme by <a target="_blank" href="//themearile.com/">ThemeArile</a></div></footer><div class="page-scroll-up"><a href="#totop"><i class="fa fa-angle-up"></i></a></div><div id="cookie-law-info-bar" data-nosnippet="true" data-cli-style="cli-style-v2" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: inherit; bottom: 0px; position: fixed;"><span><div class="cli-bar-container cli-style-v2"><div class="cli-bar-message">We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.</div><div class="cli-bar-btn_container"><a role="button" class="medium cli-plugin-button cli-plugin-main-button cli_settings_button" style="margin: 0px 5px 0px 0px; color: rgb(51, 51, 51); background-color: rgb(222, 223, 224);">Cookie Settings</a><a id="wt-cli-accept-all-btn" role="button" data-cli_action="accept_all" class="wt-cli-element medium cli-plugin-button wt-cli-accept-all-btn cookie_action_close_header cli_action_button" style="color: rgb(255, 255, 255); background-color: rgb(97, 162, 41);">Accept All</a></div></div></span></div><div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); position: fixed; font-family: inherit; width: auto; bottom: 0px; right: 100px; display: none;"><span id="cookie_hdr_showagain">Manage consent</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true"><div class="cli-modal-dialog" role="document"><div class="cli-modal-content cli-bar-popup"> <button type="button" class="cli-modal-close" id="cliModalClose"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg> <span class="wt-cli-sr-only">Close</span> </button><div class="cli-modal-body"><div class="cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-privacy-overview"><h4>Privacy Overview</h4><div class="cli-privacy-content"><div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ...</div></div> <a class="cli-privacy-readmore" aria-label="Show more" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a></div></div><div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container"><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab"> Necessary </a><div class="wt-cli-necessary-checkbox"> <input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked"> <label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label></div> <span class="cli-necessary-caption">Always Enabled</span></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="necessary"><div class="wt-cli-cookie-description"> Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.<table class="cookielawinfo-row-cat-table cookielawinfo-winter"><thead><tr><th class="cookielawinfo-column-1">Cookie</th><th class="cookielawinfo-column-3">Duration</th><th class="cookielawinfo-column-4">Description</th></tr></thead><tbody><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-analytics</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-functional</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-necessary</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-others</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-performance</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">viewed_cookie_policy</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.</td></tr></tbody></table></div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="functional" data-toggle="cli-toggle-tab"> Functional </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-functional" class="cli-user-preference-checkbox" data-id="checkbox-functional"> <label for="wt-cli-checkbox-functional" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Functional</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="functional"><div class="wt-cli-cookie-description"> Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="performance" data-toggle="cli-toggle-tab"> Performance </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-performance" class="cli-user-preference-checkbox" data-id="checkbox-performance"> <label for="wt-cli-checkbox-performance" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Performance</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="performance"><div class="wt-cli-cookie-description"> Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="analytics" data-toggle="cli-toggle-tab"> Analytics </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-analytics" class="cli-user-preference-checkbox" data-id="checkbox-analytics"> <label for="wt-cli-checkbox-analytics" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Analytics</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="analytics"><div class="wt-cli-cookie-description"> Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="advertisement" data-toggle="cli-toggle-tab"> Advertisement </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-advertisement" class="cli-user-preference-checkbox" data-id="checkbox-advertisement"> <label for="wt-cli-checkbox-advertisement" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Advertisement</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="advertisement"><div class="wt-cli-cookie-description"> Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="others" data-toggle="cli-toggle-tab"> Others </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-others" class="cli-user-preference-checkbox" data-id="checkbox-others"> <label for="wt-cli-checkbox-others" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Others</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="others"><div class="wt-cli-cookie-description"> Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.</div></div></div></div></div></div></div></div><div class="cli-modal-footer"><div class="wt-cli-element cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-tab-footer wt-cli-privacy-overview-actions"> <a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a></div></div></div></div></div></div></div></div><div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div><div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div> <script defer="" src="data:text/javascript;base64,DQogICAgICAgICAgICBmdW5jdGlvbiBfa2F0ZXhSZW5kZXIocm9vdEVsZW1lbnQpIHsNCiAgICAgICAgICAgICAgICBjb25zdCBlbGVzID0gcm9vdEVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgiLmthdGV4LWVxOm5vdCgua2F0ZXgtcmVuZGVyZWQpIik7DQogICAgICAgICAgICAgICAgZm9yKGxldCBpZHg9MDsgaWR4IDwgZWxlcy5sZW5ndGg7IGlkeCsrKSB7DQogICAgICAgICAgICAgICAgICAgIGNvbnN0IGVsZSA9IGVsZXNbaWR4XTsNCiAgICAgICAgICAgICAgICAgICAgZWxlLmNsYXNzTGlzdC5hZGQoImthdGV4LXJlbmRlcmVkIik7DQogICAgICAgICAgICAgICAgICAgIHRyeSB7DQogICAgICAgICAgICAgICAgICAgICAgICBrYXRleC5yZW5kZXIoDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxlLnRleHRDb250ZW50LA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZSwNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXlNb2RlOiBlbGUuZ2V0QXR0cmlidXRlKCJkYXRhLWthdGV4LWRpc3BsYXkiKSA9PT0gJ3RydWUnLA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aHJvd09uRXJyb3I6IGZhbHNlDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgKTsNCiAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChuKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUuc3R5bGUuY29sb3I9InJlZCI7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUudGV4dENvbnRlbnQgPSBuLm1lc3NhZ2U7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGZ1bmN0aW9uIGthdGV4UmVuZGVyKCkgew0KICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihkb2N1bWVudCk7DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoIkRPTUNvbnRlbnRMb2FkZWQiLCBmdW5jdGlvbigpIHsNCiAgICAgICAgICAgICAgICBrYXRleFJlbmRlcigpOw0KDQogICAgICAgICAgICAgICAgLy8gUGVyZm9ybSBhIEthVGVYIHJlbmRlcmluZyBzdGVwIHdoZW4gdGhlIERPTSBpcyBtdXRhdGVkLg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcihmdW5jdGlvbihtdXRhdGlvbnMpIHsNCiAgICAgICAgICAgICAgICAgICAgW10uZm9yRWFjaC5jYWxsKG11dGF0aW9ucywgZnVuY3Rpb24obXV0YXRpb24pIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmIChtdXRhdGlvbi50YXJnZXQgJiYgbXV0YXRpb24udGFyZ2V0IGluc3RhbmNlb2YgRWxlbWVudCkgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihtdXRhdGlvbi50YXJnZXQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgICAgICB9KTsNCg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2YXRpb25Db25maWcgPSB7DQogICAgICAgICAgICAgICAgICAgIHN1YnRyZWU6IHRydWUsDQogICAgICAgICAgICAgICAgICAgIGNoaWxkTGlzdDogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgY2hhcmFjdGVyRGF0YTogdHJ1ZQ0KICAgICAgICAgICAgICAgIH07DQoNCiAgICAgICAgICAgICAgICBrYXRleE9ic2VydmVyLm9ic2VydmUoZG9jdW1lbnQuYm9keSwga2F0ZXhPYnNlcnZhdGlvbkNvbmZpZyk7DQogICAgICAgICAgICB9KTsNCg0KICAgICAgICA="></script> <style type="text/css">.theme-testimonial { background-image: url(https://via-internet.de/blog/wp-content/themes/aasta-blog/assets/img/theme-bg.jpg); background-size: cover; background-position: center center; }</style> <script defer="" src="data:text/javascript;base64,CgkvLyBUaGlzIEpTIGFkZGVkIGZvciB0aGUgVG9nZ2xlIGJ1dHRvbiB0byB3b3JrIHdpdGggdGhlIGZvY3VzIGVsZW1lbnQuCgkJaWYgKHdpbmRvdy5pbm5lcldpZHRoIDwgOTkyKSB7CgkJCWRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBmdW5jdGlvbihlKSB7CgkJCWxldCBpc1RhYlByZXNzZWQgPSBlLmtleSA9PT0gJ1RhYicgfHwgZS5rZXlDb2RlID09PSA5OwoJCQkJaWYgKCFpc1RhYlByZXNzZWQpIHsKCQkJCQlyZXR1cm47CgkJCQl9CgkJCQkKCQkJY29uc3QgIGZvY3VzYWJsZUVsZW1lbnRzID0KCQkJCSdidXR0b24sIFtocmVmXSwgaW5wdXQsIHNlbGVjdCwgdGV4dGFyZWEsIFt0YWJpbmRleF06bm90KFt0YWJpbmRleD0iLTEiXSknOwoJCQljb25zdCBtb2RhbCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5uYXZiYXIubmF2YmFyLWV4cGFuZC1sZycpOyAvLyBzZWxlY3QgdGhlIG1vZGFsIGJ5IGl0J3MgaWQKCgkJCWNvbnN0IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCA9IG1vZGFsLnF1ZXJ5U2VsZWN0b3JBbGwoZm9jdXNhYmxlRWxlbWVudHMpWzBdOyAvLyBnZXQgZmlyc3QgZWxlbWVudCB0byBiZSBmb2N1c2VkIGluc2lkZSBtb2RhbAoJCQljb25zdCBmb2N1c2FibGVDb250ZW50ID0gbW9kYWwucXVlcnlTZWxlY3RvckFsbChmb2N1c2FibGVFbGVtZW50cyk7CgkJCWNvbnN0IGxhc3RGb2N1c2FibGVFbGVtZW50ID0gZm9jdXNhYmxlQ29udGVudFtmb2N1c2FibGVDb250ZW50Lmxlbmd0aCAtIDFdOyAvLyBnZXQgbGFzdCBlbGVtZW50IHRvIGJlIGZvY3VzZWQgaW5zaWRlIG1vZGFsCgoJCQkgIGlmIChlLnNoaWZ0S2V5KSB7IC8vIGlmIHNoaWZ0IGtleSBwcmVzc2VkIGZvciBzaGlmdCArIHRhYiBjb21iaW5hdGlvbgoJCQkJaWYgKGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQgPT09IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCkgewoJCQkJICBsYXN0Rm9jdXNhYmxlRWxlbWVudC5mb2N1cygpOyAvLyBhZGQgZm9jdXMgZm9yIHRoZSBsYXN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsKCQkJCX0KCQkJICB9IGVsc2UgeyAvLyBpZiB0YWIga2V5IGlzIHByZXNzZWQKCQkJCWlmIChkb2N1bWVudC5hY3RpdmVFbGVtZW50ID09PSBsYXN0Rm9jdXNhYmxlRWxlbWVudCkgeyAvLyBpZiBmb2N1c2VkIGhhcyByZWFjaGVkIHRvIGxhc3QgZm9jdXNhYmxlIGVsZW1lbnQgdGhlbiBmb2N1cyBmaXJzdCBmb2N1c2FibGUgZWxlbWVudCBhZnRlciBwcmVzc2luZyB0YWIKCQkJCSAgZmlyc3RGb2N1c2FibGVFbGVtZW50LmZvY3VzKCk7IC8vIGFkZCBmb2N1cyBmb3IgdGhlIGZpcnN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsJCQkgIAoJCQkJfQoJCQkgIH0KCgkJCX0pOwoJCX0K"></script> <script defer="" src="data:text/javascript;base64,CiAgICAgICAgbmV3Q29udGFpbmVyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3BhbicpOwogICAgICAgIG5ld0NvbnRhaW5lci5zdHlsZS5zZXRQcm9wZXJ0eSgnZGlzcGxheScsJ25vbmUnLCcnKTsKICAgICAgICBuZXdOb2RlICAgICAgICAgICA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NjcmlwdCcpOwogICAgICAgIG5ld05vZGUudHlwZSAgICAgID0gJ21hdGgvdGV4JzsKICAgICAgICBuZXdOb2RlLmlubmVySFRNTCA9ICdcXG5ld2NvbW1hbmR7XFxlcHN9e1xcdmFyZXBzaWxvbn1cblxcbmV3Y29tbWFuZHtcXFJSfXtcXG1hdGhiYntSfX1cblxcbmV3Y29tbWFuZHtcXHJkfXtcXG9wZXJhdG9ybmFtZXtkfX1cblxcbmV3Y29tbWFuZHtcXHNldH1bMV17XFxsZWZ0XFx7IzFcXHJpZ2h0XFx9fSc7CiAgICAgICAgbmV3Q29udGFpbmVyLmFwcGVuZENoaWxkKG5ld05vZGUpOwogICAgICAgIGRvY3VtZW50LmJvZHkuaW5zZXJ0QmVmb3JlKG5ld0NvbnRhaW5lcixkb2N1bWVudC5ib2R5LmZpcnN0Q2hpbGQpOwogICAgICAgIA=="></script> <script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], displayMath: [['$$', '$$'], ["\\[", "\\]"]], processEscapes: true }, TeX: { equationNumbers: {autoNumber: "AMS", useLabelIds: true} }, });</script> <link rel="stylesheet" id="cookie-law-info-table-css" href="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_26b4f0c3c1bcf76291fa4952fb7f04fb.php?ver=3.2.8" type="text/css" media="all"> <script defer="" id="toc-front-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgdG9jcGx1cyA9IHsidmlzaWJpbGl0eV9zaG93IjoiQW56ZWlnZW4iLCJ2aXNpYmlsaXR5X2hpZGUiOiJBdXNibGVuZGVuIiwidmlzaWJpbGl0eV9oaWRlX2J5X2RlZmF1bHQiOiIxIiwid2lkdGgiOiJBdXRvIn07Ci8qIF1dPiAqLwo="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_93d421fd7576b0ca9c359ffe2fa16113.php?ver=20151215" id="aasta-skip-link-focus-fix-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.7.2" id="katex-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=UnpSS38vU0joHj5" id="enlighterjs-js"></script> <script defer="" id="enlighterjs-js-after" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwohZnVuY3Rpb24oZSxuKXtpZigidW5kZWZpbmVkIiE9dHlwZW9mIEVubGlnaHRlckpTKXt2YXIgbz17InNlbGVjdG9ycyI6eyJibG9jayI6InByZS5FbmxpZ2h0ZXJKU1JBVyIsImlubGluZSI6ImNvZGUuRW5saWdodGVySlNSQVcifSwib3B0aW9ucyI6eyJpbmRlbnQiOjQsImFtcGVyc2FuZENsZWFudXAiOnRydWUsImxpbmVob3ZlciI6dHJ1ZSwicmF3Y29kZURiY2xpY2siOnRydWUsInRleHRPdmVyZmxvdyI6ImJyZWFrIiwibGluZW51bWJlcnMiOmZhbHNlLCJ0aGVtZSI6ImNsYXNzaWMiLCJsYW5ndWFnZSI6ImdlbmVyaWMiLCJyZXRhaW5Dc3NDbGFzc2VzIjpmYWxzZSwiY29sbGFwc2UiOmZhbHNlLCJ0b29sYmFyT3V0ZXIiOiIiLCJ0b29sYmFyVG9wIjoie0JUTl9SQVd9e0JUTl9DT1BZfXtCVE5fV0lORE9XfXtCVE5fV0VCU0lURX0iLCJ0b29sYmFyQm90dG9tIjoiIn19OyhlLkVubGlnaHRlckpTSU5JVD1mdW5jdGlvbigpe0VubGlnaHRlckpTLmluaXQoby5zZWxlY3RvcnMuYmxvY2ssby5zZWxlY3RvcnMuaW5saW5lLG8ub3B0aW9ucyl9KSgpfWVsc2V7KG4mJihuLmVycm9yfHxuLmxvZyl8fGZ1bmN0aW9uKCl7fSkoIkVycm9yOiBFbmxpZ2h0ZXJKUyByZXNvdXJjZXMgbm90IGxvYWRlZCB5ZXQhIil9fSh3aW5kb3csY29uc29sZSk7Ci8qIF1dPiAqLwo="></script> <script type="text/javascript" id="jetpack-stats-js-before">_stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"195943667\",\"post\":\"0\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]); _stq.push([ "clickTrackerInit", "195943667", "0" ]);</script> <script type="text/javascript" src="https://stats.wp.com/e-202510.js" id="jetpack-stats-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="gt_widget_script_62673750-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['62673750'] = {"default_language":"de","languages":["de","en","fr","zh-CN","nl","it","es","da","pt"],"url_structure":"none","native_language_names":1,"flag_style":"2d","flag_size":24,"wrapper_selector":"#gtranslate_menu_wrapper_37060","alt_flags":[],"switcher_open_direction":"top","switcher_horizontal_position":"inline","switcher_text_color":"#666","switcher_arrow_color":"#666","switcher_border_color":"#ccc","switcher_background_color":"#fff","switcher_background_shadow_color":"#efefef","switcher_background_hover_color":"#fff","dropdown_text_color":"#000","dropdown_hover_color":"#fff","dropdown_background_color":"#eee","flags_location":"\/blog\/wp-content\/plugins\/gtranslate\/flags\/"};</script><script src="https://via-internet.de/blog/wp-content/plugins/gtranslate/js/dwf.js?ver=6.7.2" data-no-optimize="1" data-no-minify="1" data-gt-orig-url="/blog/2020/02/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="62673750" defer=""></script><script defer="" id="wpcd-scripts-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgd3BjZGFqYXggPSB7ImFqYXh1cmwiOiJodHRwczpcL1wvdmlhLWludGVybmV0LmRlXC9ibG9nXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAifTsKLyogXV0+ICovCg=="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_231b95969d2321feeaab8fdd8121442a.php" id="wpcd-scripts-js"></script> <script defer="" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js&ver=2.7.5" id="mathjax-js"></script> <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async="" src="https://via-internet.de/blog/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js"></script> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Page Caching using Disk: Enhanced Lazy Loading Database Caching 2/163 queries in 0.254 seconds using Disk Served from: via-internet.de @ 2025-03-08 07:08:06 by W3 Total Cache --></pre></pre> <a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <p>Install the Django Extensions for additional commands:</p> <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><p>Add Django Extensions to the INSTALLED_APPS</p><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 = [ ... 'django_extensions' ]</pre><p>Show URLs and Namespaces (only for out apps, admin urls are removed)</p><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><figure class="wp-block-image size-large"><img decoding="async" width="1676" height="449" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201676%20449'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/3_55_namespaces.png?fit=700%2C188&ssl=1" alt="" class="wp-image-6078 lazy" data-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" data-sizes="auto, (max-width: 1676px) 100vw, 1676px"></figure><h2 class="wp-block-heading">Preparing required components and pages</h2><p>In summary, these are the steps to create the desired folder structure:</p><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 mkdir -p dashboard/apps/components/cards/templates/cards mkdir -p dashboard/apps/pages/blank/templates/blank mkdir -p dashboard/apps/pages/charts/templates/charts mkdir -p dashboard/apps/pages/login/templates/login mkdir -p dashboard/apps/pages/pagenotfound/templates/pagenotfound mkdir -p dashboard/apps/pages/password/templates/password mkdir -p dashboard/apps/pages/register/templates/register mkdir -p dashboard/apps/pages/tables/templates/tables mkdir -p dashboard/apps/utilities/animations/templates/animations mkdir -p dashboard/apps/utilities/borders/templates/borders mkdir -p dashboard/apps/utilities/colors/templates/colors mkdir -p dashboard/apps/utilities/others/templates/others</pre><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 python3 manage.py startapp cards dashboard/apps/components/cards python3 manage.py startapp blank dashboard/apps/pages/blank python3 manage.py startapp charts dashboard/apps/pages/charts python3 manage.py startapp login dashboard/apps/pages/login python3 manage.py startapp pagenotfound dashboard/apps/pages/pagenotfound python3 manage.py startapp password dashboard/apps/pages/password python3 manage.py startapp register dashboard/apps/pages/register python3 manage.py startapp tables dashboard/apps/pages/tables python3 manage.py startapp animations dashboard/apps/utilities/animations python3 manage.py startapp borders dashboard/apps/utilities/borders python3 manage.py startapp colors dashboard/apps/utilities/colors python3 manage.py startapp others dashboard/apps/utilities/others</pre><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 "{ { { <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 cp base.html dashboard/apps/components/cards/templates/cards cp base.html dashboard/apps/pages/blank/templates/blank cp base.html dashboard/apps/pages/charts/templates/charts cp base.html dashboard/apps/pages/login/templates/login cp base.html dashboard/apps/pages/pagenotfound/templates/pagenotfound cp base.html dashboard/apps/pages/password/templates/password cp base.html dashboard/apps/pages/register/templates/register cp base.html dashboard/apps/pages/tables/templates/tables cp base.html dashboard/apps/utilities/animations/templates/animations cp base.html dashboard/apps/utilities/borders/templates/borders cp base.html dashboard/apps/utilities/colors/templates/colors cp base.html dashboard/apps/utilities/others/templates/others</pre><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><figure class="wp-block-image size-large"><img decoding="async" width="291" height="874" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20291%20874'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_10_folder_structure.png" alt="" class="wp-image-6012 lazy" data-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" data-sizes="auto, (max-width: 291px) 100vw, 291px"></figure><p>Each of the folders has the same structure, for example the buttons component. We will delete some unnecessary files</p><figure class="wp-block-image size-large is-resized"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20293%20284'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_11_app-folder-structure.png" alt="" class="wp-image-6013 lazy" width="293" height="284" data-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" data-sizes="auto, (max-width: 293px) 100vw, 293px"></figure><h2 class="wp-block-heading">Replacing Projects with dynamic data</h2><p>Replacing the static parts with dynamic content could be achieved by the following approach:</p><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><p>The steps are the same for all components (all items of the side menu).</p><p>Find the</p><p>Identify dynamic parts in template</p><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_20_projects_html_old-700x374.png" alt="" class="wp-image-5972 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><figure class="wp-block-image size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data-700x219.png" alt="" class="wp-image-5971 lazy"></figure><figure class="wp-block-table"><table><tbody><tr><td><img decoding="async" width="500" height="278" class="wp-image-5973 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20278'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_42_projects_old_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="157" class="wp-image-5971 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20157'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="279" class="wp-image-5975 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20279'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_44_projects_new_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="151" class="wp-image-5974 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20151'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_43_projects_new_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><h2 class="wp-block-heading">Create templates for side menu pages</h2><p>For every side menu item, their is a corresponding html file in the install folder of the <code>sb-admin-2</code> template:</p><p>Remember the environment variable we create in part 1 for the start of our project</p><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><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 find dashboard/apps install/sb-admin-2 -name *.html</pre><p>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><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><p>Each template base.html should have the following content:</p><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="">{ { { <p>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> <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 class IndexView(generic.TemplateView): template_name = 'buttons/base.html'</pre><p>So, for each template file, we have to</p><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><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=""> <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --></pre><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure><div class="post-content"><div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 22<small class="months">Feb</small></time></a> </span><div class="media-body"><header class="entry-header"><h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/">Django | Build a Dashboard with Django and Bootstrap: Part 2</a></h4></header><div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span></div><div class="entry-content"><p>This is Part 2 of <em>Building a Dashboard with Django and Bootstrap</em>:</p><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><h2 class="wp-block-heading">Introduction</h2><p>If you follow the first part of this blog topic, you have a running Django dashboard.</p><p>But, unfortunately, the content is still static. Let’s review the current state:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"></div></div><p>Perfect. We are done with the basic setup.</p><p>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><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>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><p>We will do this by following these steps:</p><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><h2 class="wp-block-heading">Identify dynamic parts</h2><p>How to find the parts, which are dynamic.</p><p>One way is to ask:</p><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><p>You mostly get the same answers by the question:</p><ul class="wp-block-list"><li>What are the main components of a web page (including navigation and content)</li></ul><p>For answer the first question, take a look at the current page and “name” the areas:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="563" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20563'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/02_elements_of_dashboard_page.png?fit=700%2C394&ssl=1" alt="" class="wp-image-5929 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>So, these “names” are also the answer for the 3. Question:</p><ul class="wp-block-list"><li>sidemenu</li><li>top bar</li><li>content</li></ul><p>And maybe you find additional “names”</p><ul class="wp-block-list"><li>header</li><li>footer</li><li>top menu</li><li>left and right sidebar</li></ul><h2 class="wp-block-heading">Find identified parts in template</h2><p>Next step is, to find the identified parts in our dashboard template</p><p><code>dashboard/templates/site/sb-admin-2/base.html</code></p><p>This is an easy step, because the developer of the SB Admin 2 template documented their template well:</p><figure class="wp-block-image size-large"><img decoding="async" width="2004" height="1706" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202004%201706'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/03_elements_of_dashboard_in_codepage.png?fit=700%2C596&ssl=1" alt="" class="wp-image-5932 lazy" data-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" data-sizes="auto, (max-width: 2004px) 100vw, 2004px"></figure><p>Looking into the code of the template, you will find comment lines describing the content:</p><ul class="wp-block-list"><li><code><!-- Sidebar --></code></li><li><code><!-- Topbar --></code></li><li><code><!-- Top Search --></code></li><li><code><!-- Top Navbar --></code></li><li><code><!-- Begin Page Content--></code></li></ul><p>So, it is obvious what do to next:</p><ul class="wp-block-list"><li>get the <em>dynamic</em> part (lines under)<code><!-- Begin Page Content--></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><p>This is the way, the template system of django works:</p><figure class="wp-block-image size-large"><img decoding="async" width="954" height="251" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20954%20251'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/21_combine_template_and_content_ui.png?fit=700%2C184&ssl=1" alt="" class="wp-image-5944 lazy" data-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" data-sizes="auto, (max-width: 954px) 100vw, 954px"></figure><p>Let’s explain this with a simple example: the page title</p><p>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><p>To achieve this, we have to tell our template system the following:</p><figure class="wp-block-image size-large"><img decoding="async" width="940" height="209" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20940%20209'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/22_combine_template_and_content_code.png?fit=700%2C156&ssl=1" alt="" class="wp-image-5943 lazy" data-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" data-sizes="auto, (max-width: 940px) 100vw, 940px"></figure><p>Now, we do the same with the content:</p><figure class="wp-block-image size-large"><img decoding="async" width="983" height="457" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20983%20457'%3E%3C/svg%3E" data-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&ssl=1" alt="" class="wp-image-5947 lazy" data-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" data-sizes="auto, (max-width: 983px) 100vw, 983px"></figure><p>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><p>Well, let’s make a test and try to include a different content in the dashboard template.</p><p>Change the lines, where we include the content into this:</p><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="">{ MISSING CONTENT { <p>Did you notice the other name of the content: <strong>content_missing</strong>?</p> <p>Change the template, save the file and have a look at the result:</p> <figure class="wp-block-image size-large"><img decoding="async" width="2328" height="448" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202328%20448'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/41_missing_content.png?fit=700%2C135&ssl=1" alt="" class="wp-image-5949 lazy" data-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" data-sizes="auto, (max-width: 2328px) 100vw, 2328px"></figure> <p>Change content back, so your template is working again:</p> <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="">{ MISSING CONTENT { <p>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> </pre></pre></div> </div> </div> </div> </article><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"> <figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure> <div class="post-content"> <div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 21<small class="months">Feb</small></time></a> </span> <div class="media-body"> <header class="entry-header"> <h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/">Django | Build a Dashboard with Django and Bootstrap: Part 1</a></h4> </header> <div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span> </div> <div class="entry-content"> <p>This is Part 1 of <em>Building a Dashboard with Django and Bootstrap</em>:</p> <ul class="wp-block-list"> <li><strong>Part 1: Building a base Django project</strong></li> <li><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/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/build-a-dashboard-with-django-and-bootstrap-part-4/">Part 4: Deploy Django App to Azure</a></li> </ul> <h2 class="wp-block-heading">Introduction</h2> <p>Building a complete web app isn’t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don’t using tools or framework, which helps and makes our life easier. <a href="https://www.djangoproject.com/"><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824465754606598455505">Django</gwmw></a> is one of these frameworks:</p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468379037630016661">Django</gwmw> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development</p> </blockquote> <p>So, let’s get started.</p> <h3 class="wp-block-heading">Create project</h3> <p>For subsequent steps, we will remember our starting directory </p> <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="">❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder...</pre><p>First step is to create our main Django project</p><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="">❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate</pre><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="">❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK.</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="782" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20782'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png" alt="" class="wp-image-9675 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-300x229.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-768x587.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1536x1173.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-2048x1564.png 2048w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure></div><h3 class="wp-block-heading">Create first apps</h3><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="">❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend</pre><p>The folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="970" height="436" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20970%20436'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png" alt="" class="wp-image-9690 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png 970w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-300x135.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-768x345.png 768w" data-sizes="auto, (max-width: 970px) 100vw, 970px"></figure><h2 class="wp-block-heading">Add new apps to project</h2><p>Modify name in <code>apps/core/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core'</pre><p>Modify name in <code>apps/frontend/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend'</pre><p>Modify <code>dashboard/settings.py</code></p><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="">INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ]</pre><p>Modify <code>dashboard/urls.py</code></p><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="">from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ]</pre><h3 class="wp-block-heading">Create view</h3><p>Modify view in <code>apps/frontend/views.py</code></p><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="">from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html'</pre><h3 class="wp-block-heading">Create template for frontend View</h3><p>Create template file <code>apps/frontend/templates/frontend/index.html</code></p><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=""><h1> Frontend: Let's get started </h1></pre><h3 class="wp-block-heading">Add template folder to configuration</h3><p>In <kbd>dashboard/settings.py</kbd>, add template folder to TEMPLATES</p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ]</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="624" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20624%20186'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png" alt="" class="wp-image-8442 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png 624w, https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2-300x89.png 300w" data-sizes="auto, (max-width: 624px) 100vw, 624px"></figure></div><h2 class="wp-block-heading">Current folder Structure</h2><p>So far, we have the following folder structure</p><figure class="wp-block-image size-full"><img decoding="async" width="690" height="982" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20690%20982'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png" alt="" class="wp-image-9691 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png 690w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001-211x300.png 211w" data-sizes="auto, (max-width: 690px) 100vw, 690px"></figure><h2 class="wp-block-heading">Prepare for administrate your project</h2><h3 class="wp-block-heading">Create admin user</h3><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="">❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully.</pre><h2 class="wp-block-heading">Add Bootstrap support</h2><p>Download requires files for Bootstrap, jQuery and PopperJS.</p><p>Or download <a href="https://via-internet.de/blog/wp-content/uploads/2021/10/static.zip">this </a>prepared archiv and unzip the files unter <code>dashboard</code>.</p><p>Run the scripts in <kbd>$DASHBOARD_ROOT</kbd></p><p>Hint: You need to install <a href="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3" data-type="link" data-id="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3">PowerShell</a> before running the scripts.</p><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 > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1</pre><p><kbd>download_bootstrap.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' </pre><p><kbd>download_jquery.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map</pre><p><kbd>download_popperjs.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js</pre><p>Finally, the folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="474" height="660" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20474%20660'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png" alt="" class="wp-image-9679 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png 474w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008-215x300.png 215w" data-sizes="auto, (max-width: 474px) 100vw, 474px"></figure><h3 class="wp-block-heading">Create site templates in <code>dashboard/templates/site</code></h3><h3 class="wp-block-heading">Add templates path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470508427730698282">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="5" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ...</pre><h3 class="wp-block-heading"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-2" id="gwmw-15824470715450370185521">Add static</gwmw> path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470715451132153545">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><p>Add as first line</p><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="">import os</pre><p>Then add / replace at <kbd>STATIC_URL=...</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="2-4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ]</pre><h2 class="wp-block-heading">Modify frontend view template</h2><p>File <code>dashboard/apps/frontend/templates/index.html</code></p><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="">{ { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { <p>File <kbd>dashboard/apps/frontend/templates/site/base.html</kbd></p> <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="">{ <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html></pre><h2 class="wp-block-heading">View current status of project</h2><figure class="wp-block-image size-large"><img decoding="async" width="1024" height="778" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20778'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png" alt="" class="wp-image-9682 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-300x228.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-768x583.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1536x1167.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap.png 1714w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure><h2 class="wp-block-heading">Final Result</h2><p>The final result could be found <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project" data-type="link" data-id="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project">here</a>.</p><h2 class="wp-block-heading">Add dashboard from an existing template</h2><p>For a first start, we will use this <a href="https://startbootstrap.com/previews/sb-admin-2/"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824470188863680783027">sb</gwmw>-admin-2 dashboard</a> template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>:</p><figure class="wp-block-image size-full"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/61_dashboard.png" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><h2 class="wp-block-heading">Download required files</h2><p>Bootstrap templates consist of at least 3 different types of files</p><ul class="wp-block-list"><li>main index.html page, responsible for collection all elements and set up your page</li><li>CSS files defining the style of your page</li><li>JavaScript files, containing needed frameworks and code</li></ul><p>So, first start by downloading the sample template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>. Be sure, you start in our project root folder:</p><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="">❯ cd $DASHBOARD_ROOT</pre><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="">❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 </pre><p>Next, find out, what we need for our template in addition to the file <kbd>index.html</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)="</pre><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script></pre><p>That’s a lot of additional files.</p><p>To keep the file structure consistent, these files should be stored under the <kbd>dashboard/static</kbd> folder (same as the bootstrap files before).</p><p>To achieve this, there are <gwmw class="ginger-module-highlighter-mistake-type-2" id="gwmw-15824469384628631344488">two possi</gwmw>bilities:</p><ul class="wp-block-list"><li>Create desired folder and copy each of the source files to the destination folder</li><li><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824469457060378385283">Copy</gwmw> the complete static folder from the <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap">Github Repository</a> for this post.</li></ul><p>We use the second option to keep the focus on creating our dashboard.<gwmw style="display:none;"></gwmw></p><p>So, first, clone the repository:</p><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="">cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap</pre><p>Then, copy the requred files</p><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="">cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard</pre><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 -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard</pre><p>Having everything needed for the dashboard template, the next step is to modify the front-end template</p><p>File <code>dashboard/apps/frontend/templates/frontend/index.html</code></p> <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="">{ { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div></pre></pre></div></div></div></div></article><footer class="site-footer"><div class="container"><div class="row footer-sidebar"><div class="col-lg-3 col-md-6 col-sm-12"><aside id="categories-1" class="widget widget_categories wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Categories</h4><form action="https://via-internet.de/blog" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name="cat" id="cat" class="postform"><option value="-1">Select Category</option><option class="level-0" value="2">3D Printing (1)</option><option class="level-0" value="168">AI (3)</option><option class="level-0" value="1">Allgemein (32)</option><option class="level-0" value="151">Anaconda (1)</option><option class="level-0" value="4">Apache (3)</option><option class="level-0" value="5">Apache Spark (3)</option><option class="level-0" value="6">Apache Zeppelin (1)</option><option class="level-0" value="7">Arduino (1)</option><option class="level-0" value="160">Astro (3)</option><option class="level-0" value="9">Azure (7)</option><option class="level-1" value="20"> Databricks (4)</option><option class="level-1" value="87"> Widgets (1)</option><option class="level-0" value="158">BeautifulSoup (1)</option><option class="level-0" value="10">Bootstrap (6)</option><option class="level-0" value="12">Capacitor (1)</option><option class="level-0" value="13">CI/CD (3)</option><option class="level-1" value="40"> Jenkins (3)</option><option class="level-0" value="153">Container (9)</option><option class="level-1" value="22"> Docker (8)</option><option class="level-2" value="43"> Kubernetes (2)</option><option class="level-1" value="154"> Podman (1)</option><option class="level-0" value="16">Cookbook (30)</option><option class="level-0" value="17">CSS (3)</option><option class="level-0" value="135">Daily (6)</option><option class="level-0" value="144">Dart (1)</option><option class="level-0" value="18">Data Science (1)</option><option class="level-0" value="19">Database (2)</option><option class="level-1" value="50"> MySQL (1)</option><option class="level-1" value="58"> PostgreSQL (1)</option><option class="level-0" value="96">FastAPI (1)</option><option class="level-0" value="27">Generell (1)</option><option class="level-0" value="28">Git und Github (6)</option><option class="level-0" value="157">Grafana (1)</option><option class="level-0" value="31">Hadoop (1)</option><option class="level-0" value="163">Hexo (1)</option><option class="level-0" value="33">Homebrew (1)</option><option class="level-0" value="165">HyperDiv (1)</option><option class="level-0" value="34">Ionic 3 (5)</option><option class="level-0" value="35">Ionic 4 (9)</option><option class="level-0" value="39">Jekyll (1)</option><option class="level-0" value="41">Jupyter (2)</option><option class="level-0" value="42">Keycloak (3)</option><option class="level-0" value="137">Languages (60)</option><option class="level-1" value="14"> ClojureScript (1)</option><option class="level-1" value="15"> Cobol (1)</option><option class="level-1" value="24"> Erlang (2)</option><option class="level-2" value="94"> Elixir (2)</option><option class="level-1" value="149"> F# (2)</option><option class="level-1" value="29"> Go (1)</option><option class="level-1" value="30"> Groovy (1)</option><option class="level-1" value="32"> Haskell (3)</option><option class="level-1" value="36"> iPython (1)</option><option class="level-1" value="37"> Java (5)</option><option class="level-1" value="38"> Javascript (7)</option><option class="level-1" value="56"> Perl (1)</option><option class="level-1" value="57"> PHP (13)</option><option class="level-1" value="63"> PureScript (1)</option><option class="level-1" value="65"> Python (19)</option><option class="level-2" value="141"> PIP (1)</option><option class="level-1" value="68"> Rust (3)</option><option class="level-1" value="75"> Swift (1)</option><option class="level-0" value="99">Laravel (16)</option><option class="level-0" value="44">Learning (5)</option><option class="level-0" value="45">Linux (1)</option><option class="level-0" value="46">macOS (1)</option><option class="level-0" value="47">matter.js (1)</option><option class="level-0" value="48">Maven (1)</option><option class="level-0" value="49">Mobile Development (9)</option><option class="level-0" value="51">NestJS (1)</option><option class="level-0" value="156">Nicepage (1)</option><option class="level-0" value="52">Node.js (2)</option><option class="level-0" value="53">Office 365 (2)</option><option class="level-1" value="95"> Excel (1)</option><option class="level-1" value="81"> VBA (1)</option><option class="level-1" value="88"> Word (1)</option><option class="level-0" value="164">Ollama (4)</option><option class="level-0" value="54">OpenSCAD (1)</option><option class="level-0" value="159">Power Apps (1)</option><option class="level-0" value="59">Power BI (4)</option><option class="level-0" value="146">Power BI Visuals (3)</option><option class="level-0" value="61">Power Query (3)</option><option class="level-0" value="62">Protractor (1)</option><option class="level-0" value="64">PySpark (2)</option><option class="level-0" value="69">rxjs (2)</option><option class="level-0" value="70">SAS (3)</option><option class="level-0" value="71">Selenium (1)</option><option class="level-0" value="72">Shell (10)</option><option class="level-1" value="92"> Bash (1)</option><option class="level-1" value="102"> Power Shell (8)</option><option class="level-0" value="73">Smalltalk (1)</option><option class="level-0" value="74">Spring Boot (2)</option><option class="level-0" value="166">Static-Site-Generator (1)</option><option class="level-1" value="167"> Hugo (1)</option><option class="level-0" value="76">TDD (1)</option><option class="level-1" value="77"> Testing / Unittests (1)</option><option class="level-0" value="145">Troubleshooting (3)</option><option class="level-0" value="126">Tutorial (1)</option><option class="level-0" value="78">Ubuntu (1)</option><option class="level-0" value="79">Uncategorized (7)</option><option class="level-0" value="129">Unix (1)</option><option class="level-0" value="80">Vagrant (1)</option><option class="level-0" value="82">Virtual Machine (2)</option><option class="level-0" value="83">Virtualbox (2)</option><option class="level-0" value="84">Visual Studio Code (4)</option><option class="level-0" value="85">Visualisation (3)</option><option class="level-1" value="93"> D3.js (2)</option><option class="level-1" value="100"> p5.js (1)</option><option class="level-0" value="86">Web Framework (40)</option><option class="level-1" value="90"> Angular (10)</option><option class="level-1" value="91"> AngularJS (1)</option><option class="level-1" value="21"> Django (5)</option><option class="level-1" value="97"> Flask (1)</option><option class="level-1" value="26"> Flutter (6)</option><option class="level-1" value="98"> Ionic (13)</option><option class="level-1" value="66"> React (3)</option><option class="level-1" value="148"> React Native (1)</option><option class="level-1" value="67"> ReactJS (3)</option><option class="level-1" value="103"> VUE (2)</option><option class="level-0" value="143">Windows Subsystem for Linux (1)</option><option class="level-0" value="89">Wordpress (2)</option><option class="level-0" value="155">XAMPP (1)</option> </select></form><script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJjYXQiICk7CglmdW5jdGlvbiBvbkNhdENoYW5nZSgpIHsKCQlpZiAoIGRyb3Bkb3duLm9wdGlvbnNbIGRyb3Bkb3duLnNlbGVjdGVkSW5kZXggXS52YWx1ZSA+IDAgKSB7CgkJCWRyb3Bkb3duLnBhcmVudE5vZGUuc3VibWl0KCk7CgkJfQoJfQoJZHJvcGRvd24ub25jaGFuZ2UgPSBvbkNhdENoYW5nZTsKfSkoKTsKCi8qIF1dPiAqLwo="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="archives-1" class="widget widget_archive wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Archives</h4> <label class="screen-reader-text" for="archives-dropdown-1">Archives</label> <select id="archives-dropdown-1" name="archive-dropdown"><option value="">Select Month</option><option value="https://via-internet.de/blog/2024/11/"> November 2024</option><option value="https://via-internet.de/blog/2024/10/"> October 2024</option><option value="https://via-internet.de/blog/2024/09/"> September 2024</option><option value="https://via-internet.de/blog/2024/07/"> July 2024</option><option value="https://via-internet.de/blog/2024/05/"> May 2024</option><option value="https://via-internet.de/blog/2024/04/"> April 2024</option><option value="https://via-internet.de/blog/2024/03/"> March 2024</option><option value="https://via-internet.de/blog/2024/01/"> January 2024</option><option value="https://via-internet.de/blog/2023/12/"> December 2023</option><option value="https://via-internet.de/blog/2023/11/"> November 2023</option><option value="https://via-internet.de/blog/2023/10/"> October 2023</option><option value="https://via-internet.de/blog/2023/09/"> September 2023</option><option value="https://via-internet.de/blog/2023/08/"> August 2023</option><option value="https://via-internet.de/blog/2023/07/"> July 2023</option><option value="https://via-internet.de/blog/2023/04/"> April 2023</option><option value="https://via-internet.de/blog/2023/03/"> March 2023</option><option value="https://via-internet.de/blog/2023/02/"> February 2023</option><option value="https://via-internet.de/blog/2022/11/"> November 2022</option><option value="https://via-internet.de/blog/2022/10/"> October 2022</option><option value="https://via-internet.de/blog/2022/07/"> July 2022</option><option value="https://via-internet.de/blog/2022/06/"> June 2022</option><option value="https://via-internet.de/blog/2022/05/"> May 2022</option><option value="https://via-internet.de/blog/2022/04/"> April 2022</option><option value="https://via-internet.de/blog/2022/03/"> March 2022</option><option value="https://via-internet.de/blog/2022/01/"> January 2022</option><option value="https://via-internet.de/blog/2021/12/"> December 2021</option><option value="https://via-internet.de/blog/2021/11/"> November 2021</option><option value="https://via-internet.de/blog/2021/10/"> October 2021</option><option value="https://via-internet.de/blog/2021/08/"> August 2021</option><option value="https://via-internet.de/blog/2021/07/"> July 2021</option><option value="https://via-internet.de/blog/2021/06/"> June 2021</option><option value="https://via-internet.de/blog/2021/05/"> May 2021</option><option value="https://via-internet.de/blog/2021/02/"> February 2021</option><option value="https://via-internet.de/blog/2021/01/"> January 2021</option><option value="https://via-internet.de/blog/2020/12/"> December 2020</option><option value="https://via-internet.de/blog/2020/11/"> November 2020</option><option value="https://via-internet.de/blog/2020/10/"> October 2020</option><option value="https://via-internet.de/blog/2020/09/"> September 2020</option><option value="https://via-internet.de/blog/2020/08/"> August 2020</option><option value="https://via-internet.de/blog/2020/07/"> July 2020</option><option value="https://via-internet.de/blog/2020/06/"> June 2020</option><option value="https://via-internet.de/blog/2020/05/"> May 2020</option><option value="https://via-internet.de/blog/2020/04/"> April 2020</option><option value="https://via-internet.de/blog/2020/03/"> March 2020</option><option value="https://via-internet.de/blog/2020/02/" selected="selected"> February 2020</option><option value="https://via-internet.de/blog/2020/01/"> January 2020</option><option value="https://via-internet.de/blog/2019/12/"> December 2019</option><option value="https://via-internet.de/blog/2019/09/"> September 2019</option><option value="https://via-internet.de/blog/2019/08/"> August 2019</option><option value="https://via-internet.de/blog/2019/07/"> July 2019</option><option value="https://via-internet.de/blog/2019/06/"> June 2019</option><option value="https://via-internet.de/blog/2019/05/"> May 2019</option><option value="https://via-internet.de/blog/2019/04/"> April 2019</option><option value="https://via-internet.de/blog/2019/03/"> March 2019</option><option value="https://via-internet.de/blog/2019/02/"> February 2019</option><option value="https://via-internet.de/blog/2019/01/"> January 2019</option><option value="https://via-internet.de/blog/2018/12/"> December 2018</option><option value="https://via-internet.de/blog/2018/11/"> November 2018</option><option value="https://via-internet.de/blog/2018/09/"> September 2018</option><option value="https://via-internet.de/blog/2018/08/"> August 2018</option><option value="https://via-internet.de/blog/2018/07/"> July 2018</option><option value="https://via-internet.de/blog/2018/03/"> March 2018</option><option value="https://via-internet.de/blog/2018/02/"> February 2018</option><option value="https://via-internet.de/blog/2018/01/"> January 2018</option><option value="https://via-internet.de/blog/2017/12/"> December 2017</option><option value="https://via-internet.de/blog/2017/07/"> July 2017</option><option value="https://via-internet.de/blog/2017/05/"> May 2017</option><option value="https://via-internet.de/blog/2017/03/"> March 2017</option><option value="https://via-internet.de/blog/2017/02/"> February 2017</option><option value="https://via-internet.de/blog/2016/12/"> December 2016</option><option value="https://via-internet.de/blog/2016/11/"> November 2016</option><option value="https://via-internet.de/blog/2016/10/"> October 2016</option> </select> <script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJhcmNoaXZlcy1kcm9wZG93bi0xIiApOwoJZnVuY3Rpb24gb25TZWxlY3RDaGFuZ2UoKSB7CgkJaWYgKCBkcm9wZG93bi5vcHRpb25zWyBkcm9wZG93bi5zZWxlY3RlZEluZGV4IF0udmFsdWUgIT09ICcnICkgewoJCQlkb2N1bWVudC5sb2NhdGlvbi5ocmVmID0gdGhpcy5vcHRpb25zWyB0aGlzLnNlbGVjdGVkSW5kZXggXS52YWx1ZTsKCQl9Cgl9Cglkcm9wZG93bi5vbmNoYW5nZSA9IG9uU2VsZWN0Q2hhbmdlOwp9KSgpOwoKLyogXV0+ICovCg=="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="search-1" class="widget widget_search wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Search</h4><form method="get" id="searchform" class="input-group" action="https://via-internet.de/blog/"> <input type="text" class="form-control" placeholder="Search" name="s" id="s"><div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button></div></form></aside></div></div></div><div class="site-info text-center"> Copyright © 2024 | Powered by <a href="//wordpress.org/">WordPress</a> <span class="sep"> | </span> Aasta Blog theme by <a target="_blank" href="//themearile.com/">ThemeArile</a></div></footer><div class="page-scroll-up"><a href="#totop"><i class="fa fa-angle-up"></i></a></div><div id="cookie-law-info-bar" data-nosnippet="true" data-cli-style="cli-style-v2" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: inherit; bottom: 0px; position: fixed;"><span><div class="cli-bar-container cli-style-v2"><div class="cli-bar-message">We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.</div><div class="cli-bar-btn_container"><a role="button" class="medium cli-plugin-button cli-plugin-main-button cli_settings_button" style="margin: 0px 5px 0px 0px; color: rgb(51, 51, 51); background-color: rgb(222, 223, 224);">Cookie Settings</a><a id="wt-cli-accept-all-btn" role="button" data-cli_action="accept_all" class="wt-cli-element medium cli-plugin-button wt-cli-accept-all-btn cookie_action_close_header cli_action_button" style="color: rgb(255, 255, 255); background-color: rgb(97, 162, 41);">Accept All</a></div></div></span></div><div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); position: fixed; font-family: inherit; width: auto; bottom: 0px; right: 100px; display: none;"><span id="cookie_hdr_showagain">Manage consent</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true"><div class="cli-modal-dialog" role="document"><div class="cli-modal-content cli-bar-popup"> <button type="button" class="cli-modal-close" id="cliModalClose"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg> <span class="wt-cli-sr-only">Close</span> </button><div class="cli-modal-body"><div class="cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-privacy-overview"><h4>Privacy Overview</h4><div class="cli-privacy-content"><div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ...</div></div> <a class="cli-privacy-readmore" aria-label="Show more" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a></div></div><div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container"><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab"> Necessary </a><div class="wt-cli-necessary-checkbox"> <input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked"> <label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label></div> <span class="cli-necessary-caption">Always Enabled</span></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="necessary"><div class="wt-cli-cookie-description"> Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.<table class="cookielawinfo-row-cat-table cookielawinfo-winter"><thead><tr><th class="cookielawinfo-column-1">Cookie</th><th class="cookielawinfo-column-3">Duration</th><th class="cookielawinfo-column-4">Description</th></tr></thead><tbody><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-analytics</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-functional</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-necessary</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-others</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-performance</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">viewed_cookie_policy</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.</td></tr></tbody></table></div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="functional" data-toggle="cli-toggle-tab"> Functional </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-functional" class="cli-user-preference-checkbox" data-id="checkbox-functional"> <label for="wt-cli-checkbox-functional" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Functional</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="functional"><div class="wt-cli-cookie-description"> Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="performance" data-toggle="cli-toggle-tab"> Performance </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-performance" class="cli-user-preference-checkbox" data-id="checkbox-performance"> <label for="wt-cli-checkbox-performance" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Performance</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="performance"><div class="wt-cli-cookie-description"> Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="analytics" data-toggle="cli-toggle-tab"> Analytics </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-analytics" class="cli-user-preference-checkbox" data-id="checkbox-analytics"> <label for="wt-cli-checkbox-analytics" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Analytics</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="analytics"><div class="wt-cli-cookie-description"> Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="advertisement" data-toggle="cli-toggle-tab"> Advertisement </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-advertisement" class="cli-user-preference-checkbox" data-id="checkbox-advertisement"> <label for="wt-cli-checkbox-advertisement" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Advertisement</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="advertisement"><div class="wt-cli-cookie-description"> Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="others" data-toggle="cli-toggle-tab"> Others </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-others" class="cli-user-preference-checkbox" data-id="checkbox-others"> <label for="wt-cli-checkbox-others" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Others</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="others"><div class="wt-cli-cookie-description"> Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.</div></div></div></div></div></div></div></div><div class="cli-modal-footer"><div class="wt-cli-element cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-tab-footer wt-cli-privacy-overview-actions"> <a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a></div></div></div></div></div></div></div></div><div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div><div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div> <script defer="" src="data:text/javascript;base64,DQogICAgICAgICAgICBmdW5jdGlvbiBfa2F0ZXhSZW5kZXIocm9vdEVsZW1lbnQpIHsNCiAgICAgICAgICAgICAgICBjb25zdCBlbGVzID0gcm9vdEVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgiLmthdGV4LWVxOm5vdCgua2F0ZXgtcmVuZGVyZWQpIik7DQogICAgICAgICAgICAgICAgZm9yKGxldCBpZHg9MDsgaWR4IDwgZWxlcy5sZW5ndGg7IGlkeCsrKSB7DQogICAgICAgICAgICAgICAgICAgIGNvbnN0IGVsZSA9IGVsZXNbaWR4XTsNCiAgICAgICAgICAgICAgICAgICAgZWxlLmNsYXNzTGlzdC5hZGQoImthdGV4LXJlbmRlcmVkIik7DQogICAgICAgICAgICAgICAgICAgIHRyeSB7DQogICAgICAgICAgICAgICAgICAgICAgICBrYXRleC5yZW5kZXIoDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxlLnRleHRDb250ZW50LA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZSwNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXlNb2RlOiBlbGUuZ2V0QXR0cmlidXRlKCJkYXRhLWthdGV4LWRpc3BsYXkiKSA9PT0gJ3RydWUnLA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aHJvd09uRXJyb3I6IGZhbHNlDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgKTsNCiAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChuKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUuc3R5bGUuY29sb3I9InJlZCI7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUudGV4dENvbnRlbnQgPSBuLm1lc3NhZ2U7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGZ1bmN0aW9uIGthdGV4UmVuZGVyKCkgew0KICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihkb2N1bWVudCk7DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoIkRPTUNvbnRlbnRMb2FkZWQiLCBmdW5jdGlvbigpIHsNCiAgICAgICAgICAgICAgICBrYXRleFJlbmRlcigpOw0KDQogICAgICAgICAgICAgICAgLy8gUGVyZm9ybSBhIEthVGVYIHJlbmRlcmluZyBzdGVwIHdoZW4gdGhlIERPTSBpcyBtdXRhdGVkLg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcihmdW5jdGlvbihtdXRhdGlvbnMpIHsNCiAgICAgICAgICAgICAgICAgICAgW10uZm9yRWFjaC5jYWxsKG11dGF0aW9ucywgZnVuY3Rpb24obXV0YXRpb24pIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmIChtdXRhdGlvbi50YXJnZXQgJiYgbXV0YXRpb24udGFyZ2V0IGluc3RhbmNlb2YgRWxlbWVudCkgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihtdXRhdGlvbi50YXJnZXQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgICAgICB9KTsNCg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2YXRpb25Db25maWcgPSB7DQogICAgICAgICAgICAgICAgICAgIHN1YnRyZWU6IHRydWUsDQogICAgICAgICAgICAgICAgICAgIGNoaWxkTGlzdDogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgY2hhcmFjdGVyRGF0YTogdHJ1ZQ0KICAgICAgICAgICAgICAgIH07DQoNCiAgICAgICAgICAgICAgICBrYXRleE9ic2VydmVyLm9ic2VydmUoZG9jdW1lbnQuYm9keSwga2F0ZXhPYnNlcnZhdGlvbkNvbmZpZyk7DQogICAgICAgICAgICB9KTsNCg0KICAgICAgICA="></script> <style type="text/css">.theme-testimonial { background-image: url(https://via-internet.de/blog/wp-content/themes/aasta-blog/assets/img/theme-bg.jpg); background-size: cover; background-position: center center; }</style> <script defer="" src="data:text/javascript;base64,CgkvLyBUaGlzIEpTIGFkZGVkIGZvciB0aGUgVG9nZ2xlIGJ1dHRvbiB0byB3b3JrIHdpdGggdGhlIGZvY3VzIGVsZW1lbnQuCgkJaWYgKHdpbmRvdy5pbm5lcldpZHRoIDwgOTkyKSB7CgkJCWRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBmdW5jdGlvbihlKSB7CgkJCWxldCBpc1RhYlByZXNzZWQgPSBlLmtleSA9PT0gJ1RhYicgfHwgZS5rZXlDb2RlID09PSA5OwoJCQkJaWYgKCFpc1RhYlByZXNzZWQpIHsKCQkJCQlyZXR1cm47CgkJCQl9CgkJCQkKCQkJY29uc3QgIGZvY3VzYWJsZUVsZW1lbnRzID0KCQkJCSdidXR0b24sIFtocmVmXSwgaW5wdXQsIHNlbGVjdCwgdGV4dGFyZWEsIFt0YWJpbmRleF06bm90KFt0YWJpbmRleD0iLTEiXSknOwoJCQljb25zdCBtb2RhbCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5uYXZiYXIubmF2YmFyLWV4cGFuZC1sZycpOyAvLyBzZWxlY3QgdGhlIG1vZGFsIGJ5IGl0J3MgaWQKCgkJCWNvbnN0IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCA9IG1vZGFsLnF1ZXJ5U2VsZWN0b3JBbGwoZm9jdXNhYmxlRWxlbWVudHMpWzBdOyAvLyBnZXQgZmlyc3QgZWxlbWVudCB0byBiZSBmb2N1c2VkIGluc2lkZSBtb2RhbAoJCQljb25zdCBmb2N1c2FibGVDb250ZW50ID0gbW9kYWwucXVlcnlTZWxlY3RvckFsbChmb2N1c2FibGVFbGVtZW50cyk7CgkJCWNvbnN0IGxhc3RGb2N1c2FibGVFbGVtZW50ID0gZm9jdXNhYmxlQ29udGVudFtmb2N1c2FibGVDb250ZW50Lmxlbmd0aCAtIDFdOyAvLyBnZXQgbGFzdCBlbGVtZW50IHRvIGJlIGZvY3VzZWQgaW5zaWRlIG1vZGFsCgoJCQkgIGlmIChlLnNoaWZ0S2V5KSB7IC8vIGlmIHNoaWZ0IGtleSBwcmVzc2VkIGZvciBzaGlmdCArIHRhYiBjb21iaW5hdGlvbgoJCQkJaWYgKGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQgPT09IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCkgewoJCQkJICBsYXN0Rm9jdXNhYmxlRWxlbWVudC5mb2N1cygpOyAvLyBhZGQgZm9jdXMgZm9yIHRoZSBsYXN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsKCQkJCX0KCQkJICB9IGVsc2UgeyAvLyBpZiB0YWIga2V5IGlzIHByZXNzZWQKCQkJCWlmIChkb2N1bWVudC5hY3RpdmVFbGVtZW50ID09PSBsYXN0Rm9jdXNhYmxlRWxlbWVudCkgeyAvLyBpZiBmb2N1c2VkIGhhcyByZWFjaGVkIHRvIGxhc3QgZm9jdXNhYmxlIGVsZW1lbnQgdGhlbiBmb2N1cyBmaXJzdCBmb2N1c2FibGUgZWxlbWVudCBhZnRlciBwcmVzc2luZyB0YWIKCQkJCSAgZmlyc3RGb2N1c2FibGVFbGVtZW50LmZvY3VzKCk7IC8vIGFkZCBmb2N1cyBmb3IgdGhlIGZpcnN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsJCQkgIAoJCQkJfQoJCQkgIH0KCgkJCX0pOwoJCX0K"></script> <script defer="" src="data:text/javascript;base64,CiAgICAgICAgbmV3Q29udGFpbmVyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3BhbicpOwogICAgICAgIG5ld0NvbnRhaW5lci5zdHlsZS5zZXRQcm9wZXJ0eSgnZGlzcGxheScsJ25vbmUnLCcnKTsKICAgICAgICBuZXdOb2RlICAgICAgICAgICA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NjcmlwdCcpOwogICAgICAgIG5ld05vZGUudHlwZSAgICAgID0gJ21hdGgvdGV4JzsKICAgICAgICBuZXdOb2RlLmlubmVySFRNTCA9ICdcXG5ld2NvbW1hbmR7XFxlcHN9e1xcdmFyZXBzaWxvbn1cblxcbmV3Y29tbWFuZHtcXFJSfXtcXG1hdGhiYntSfX1cblxcbmV3Y29tbWFuZHtcXHJkfXtcXG9wZXJhdG9ybmFtZXtkfX1cblxcbmV3Y29tbWFuZHtcXHNldH1bMV17XFxsZWZ0XFx7IzFcXHJpZ2h0XFx9fSc7CiAgICAgICAgbmV3Q29udGFpbmVyLmFwcGVuZENoaWxkKG5ld05vZGUpOwogICAgICAgIGRvY3VtZW50LmJvZHkuaW5zZXJ0QmVmb3JlKG5ld0NvbnRhaW5lcixkb2N1bWVudC5ib2R5LmZpcnN0Q2hpbGQpOwogICAgICAgIA=="></script> <script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], displayMath: [['$$', '$$'], ["\\[", "\\]"]], processEscapes: true }, TeX: { equationNumbers: {autoNumber: "AMS", useLabelIds: true} }, });</script> <link rel="stylesheet" id="cookie-law-info-table-css" href="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_26b4f0c3c1bcf76291fa4952fb7f04fb.php?ver=3.2.8" type="text/css" media="all"> <script defer="" id="toc-front-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgdG9jcGx1cyA9IHsidmlzaWJpbGl0eV9zaG93IjoiQW56ZWlnZW4iLCJ2aXNpYmlsaXR5X2hpZGUiOiJBdXNibGVuZGVuIiwidmlzaWJpbGl0eV9oaWRlX2J5X2RlZmF1bHQiOiIxIiwid2lkdGgiOiJBdXRvIn07Ci8qIF1dPiAqLwo="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_93d421fd7576b0ca9c359ffe2fa16113.php?ver=20151215" id="aasta-skip-link-focus-fix-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.7.2" id="katex-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=UnpSS38vU0joHj5" id="enlighterjs-js"></script> <script defer="" id="enlighterjs-js-after" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwohZnVuY3Rpb24oZSxuKXtpZigidW5kZWZpbmVkIiE9dHlwZW9mIEVubGlnaHRlckpTKXt2YXIgbz17InNlbGVjdG9ycyI6eyJibG9jayI6InByZS5FbmxpZ2h0ZXJKU1JBVyIsImlubGluZSI6ImNvZGUuRW5saWdodGVySlNSQVcifSwib3B0aW9ucyI6eyJpbmRlbnQiOjQsImFtcGVyc2FuZENsZWFudXAiOnRydWUsImxpbmVob3ZlciI6dHJ1ZSwicmF3Y29kZURiY2xpY2siOnRydWUsInRleHRPdmVyZmxvdyI6ImJyZWFrIiwibGluZW51bWJlcnMiOmZhbHNlLCJ0aGVtZSI6ImNsYXNzaWMiLCJsYW5ndWFnZSI6ImdlbmVyaWMiLCJyZXRhaW5Dc3NDbGFzc2VzIjpmYWxzZSwiY29sbGFwc2UiOmZhbHNlLCJ0b29sYmFyT3V0ZXIiOiIiLCJ0b29sYmFyVG9wIjoie0JUTl9SQVd9e0JUTl9DT1BZfXtCVE5fV0lORE9XfXtCVE5fV0VCU0lURX0iLCJ0b29sYmFyQm90dG9tIjoiIn19OyhlLkVubGlnaHRlckpTSU5JVD1mdW5jdGlvbigpe0VubGlnaHRlckpTLmluaXQoby5zZWxlY3RvcnMuYmxvY2ssby5zZWxlY3RvcnMuaW5saW5lLG8ub3B0aW9ucyl9KSgpfWVsc2V7KG4mJihuLmVycm9yfHxuLmxvZyl8fGZ1bmN0aW9uKCl7fSkoIkVycm9yOiBFbmxpZ2h0ZXJKUyByZXNvdXJjZXMgbm90IGxvYWRlZCB5ZXQhIil9fSh3aW5kb3csY29uc29sZSk7Ci8qIF1dPiAqLwo="></script> <script type="text/javascript" id="jetpack-stats-js-before">_stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"195943667\",\"post\":\"0\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]); _stq.push([ "clickTrackerInit", "195943667", "0" ]);</script> <script type="text/javascript" src="https://stats.wp.com/e-202510.js" id="jetpack-stats-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="gt_widget_script_62673750-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['62673750'] = {"default_language":"de","languages":["de","en","fr","zh-CN","nl","it","es","da","pt"],"url_structure":"none","native_language_names":1,"flag_style":"2d","flag_size":24,"wrapper_selector":"#gtranslate_menu_wrapper_37060","alt_flags":[],"switcher_open_direction":"top","switcher_horizontal_position":"inline","switcher_text_color":"#666","switcher_arrow_color":"#666","switcher_border_color":"#ccc","switcher_background_color":"#fff","switcher_background_shadow_color":"#efefef","switcher_background_hover_color":"#fff","dropdown_text_color":"#000","dropdown_hover_color":"#fff","dropdown_background_color":"#eee","flags_location":"\/blog\/wp-content\/plugins\/gtranslate\/flags\/"};</script><script src="https://via-internet.de/blog/wp-content/plugins/gtranslate/js/dwf.js?ver=6.7.2" data-no-optimize="1" data-no-minify="1" data-gt-orig-url="/blog/2020/02/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="62673750" defer=""></script><script defer="" id="wpcd-scripts-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgd3BjZGFqYXggPSB7ImFqYXh1cmwiOiJodHRwczpcL1wvdmlhLWludGVybmV0LmRlXC9ibG9nXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAifTsKLyogXV0+ICovCg=="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_231b95969d2321feeaab8fdd8121442a.php" id="wpcd-scripts-js"></script> <script defer="" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js&ver=2.7.5" id="mathjax-js"></script> <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async="" src="https://via-internet.de/blog/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js"></script> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Page Caching using Disk: Enhanced Lazy Loading Database Caching 2/163 queries in 0.254 seconds using Disk Served from: via-internet.de @ 2025-03-08 07:08:06 by W3 Total Cache --></pre></pre> <a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ <a class="collapse-item" href="{ Install the Django Extensions for additional commands: Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter pip install django-extensions pip install django-extensions pip install django-extensions Add Django Extensions to the INSTALLED_APPS Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter INSTALLED_APPS = [ ... 'django_extensions' ] INSTALLED_APPS = [ ... 'django_extensions' ] INSTALLED_APPS = [ ... 'django_extensions' ] Show URLs and Namespaces (only for out apps, admin urls are removed) Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter python3 manage.py show_urls python3 manage.py show_urls python3 manage.py show_urls Preparing required components and pages In summary, these are the steps to create the desired folder structure: Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter mkdir -p dashboard/apps/components/buttons/templates/buttons mkdir -p dashboard/apps/components/cards/templates/cards mkdir -p dashboard/apps/pages/blank/templates/blank mkdir -p dashboard/apps/pages/charts/templates/charts mkdir -p dashboard/apps/pages/login/templates/login mkdir -p dashboard/apps/pages/pagenotfound/templates/pagenotfound mkdir -p dashboard/apps/pages/password/templates/password mkdir -p dashboard/apps/pages/register/templates/register mkdir -p dashboard/apps/pages/tables/templates/tables mkdir -p dashboard/apps/utilities/animations/templates/animations mkdir -p dashboard/apps/utilities/borders/templates/borders mkdir -p dashboard/apps/utilities/colors/templates/colors mkdir -p dashboard/apps/utilities/others/templates/others mkdir -p dashboard/apps/components/buttons/templates/buttons mkdir -p dashboard/apps/components/cards/templates/cards mkdir -p dashboard/apps/pages/blank/templates/blank mkdir -p dashboard/apps/pages/charts/templates/charts mkdir -p dashboard/apps/pages/login/templates/login mkdir -p dashboard/apps/pages/pagenotfound/templates/pagenotfound mkdir -p dashboard/apps/pages/password/templates/password mkdir -p dashboard/apps/pages/register/templates/register mkdir -p dashboard/apps/pages/tables/templates/tables mkdir -p dashboard/apps/utilities/animations/templates/animations mkdir -p dashboard/apps/utilities/borders/templates/borders mkdir -p dashboard/apps/utilities/colors/templates/colors mkdir -p dashboard/apps/utilities/others/templates/others mkdir -p dashboard/apps/components/buttons/templates/buttons mkdir -p dashboard/apps/components/cards/templates/cards mkdir -p dashboard/apps/pages/blank/templates/blank mkdir -p dashboard/apps/pages/charts/templates/charts mkdir -p dashboard/apps/pages/login/templates/login mkdir -p dashboard/apps/pages/pagenotfound/templates/pagenotfound mkdir -p dashboard/apps/pages/password/templates/password mkdir -p dashboard/apps/pages/register/templates/register mkdir -p dashboard/apps/pages/tables/templates/tables mkdir -p dashboard/apps/utilities/animations/templates/animations mkdir -p dashboard/apps/utilities/borders/templates/borders mkdir -p dashboard/apps/utilities/colors/templates/colors mkdir -p dashboard/apps/utilities/others/templates/others Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter python3 manage.py startapp buttons dashboard/apps/components/buttons python3 manage.py startapp cards dashboard/apps/components/cards python3 manage.py startapp blank dashboard/apps/pages/blank python3 manage.py startapp charts dashboard/apps/pages/charts python3 manage.py startapp login dashboard/apps/pages/login python3 manage.py startapp pagenotfound dashboard/apps/pages/pagenotfound python3 manage.py startapp password dashboard/apps/pages/password python3 manage.py startapp register dashboard/apps/pages/register python3 manage.py startapp tables dashboard/apps/pages/tables python3 manage.py startapp animations dashboard/apps/utilities/animations python3 manage.py startapp borders dashboard/apps/utilities/borders python3 manage.py startapp colors dashboard/apps/utilities/colors python3 manage.py startapp others dashboard/apps/utilities/others python3 manage.py startapp buttons dashboard/apps/components/buttons python3 manage.py startapp cards dashboard/apps/components/cards python3 manage.py startapp blank dashboard/apps/pages/blank python3 manage.py startapp charts dashboard/apps/pages/charts python3 manage.py startapp login dashboard/apps/pages/login python3 manage.py startapp pagenotfound dashboard/apps/pages/pagenotfound python3 manage.py startapp password dashboard/apps/pages/password python3 manage.py startapp register dashboard/apps/pages/register python3 manage.py startapp tables dashboard/apps/pages/tables python3 manage.py startapp animations dashboard/apps/utilities/animations python3 manage.py startapp borders dashboard/apps/utilities/borders python3 manage.py startapp colors dashboard/apps/utilities/colors python3 manage.py startapp others dashboard/apps/utilities/others python3 manage.py startapp buttons dashboard/apps/components/buttons python3 manage.py startapp cards dashboard/apps/components/cards python3 manage.py startapp blank dashboard/apps/pages/blank python3 manage.py startapp charts dashboard/apps/pages/charts python3 manage.py startapp login dashboard/apps/pages/login python3 manage.py startapp pagenotfound dashboard/apps/pages/pagenotfound python3 manage.py startapp password dashboard/apps/pages/password python3 manage.py startapp register dashboard/apps/pages/register python3 manage.py startapp tables dashboard/apps/pages/tables python3 manage.py startapp animations dashboard/apps/utilities/animations python3 manage.py startapp borders dashboard/apps/utilities/borders python3 manage.py startapp colors dashboard/apps/utilities/colors python3 manage.py startapp others dashboard/apps/utilities/others Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter echo "{ { { <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 cp base.html dashboard/apps/components/cards/templates/cards cp base.html dashboard/apps/pages/blank/templates/blank cp base.html dashboard/apps/pages/charts/templates/charts cp base.html dashboard/apps/pages/login/templates/login cp base.html dashboard/apps/pages/pagenotfound/templates/pagenotfound cp base.html dashboard/apps/pages/password/templates/password cp base.html dashboard/apps/pages/register/templates/register cp base.html dashboard/apps/pages/tables/templates/tables cp base.html dashboard/apps/utilities/animations/templates/animations cp base.html dashboard/apps/utilities/borders/templates/borders cp base.html dashboard/apps/utilities/colors/templates/colors cp base.html dashboard/apps/utilities/others/templates/others</pre><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><figure class="wp-block-image size-large"><img decoding="async" width="291" height="874" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20291%20874'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_10_folder_structure.png" alt="" class="wp-image-6012 lazy" data-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" data-sizes="auto, (max-width: 291px) 100vw, 291px"></figure><p>Each of the folders has the same structure, for example the buttons component. We will delete some unnecessary files</p><figure class="wp-block-image size-large is-resized"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20293%20284'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_11_app-folder-structure.png" alt="" class="wp-image-6013 lazy" width="293" height="284" data-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" data-sizes="auto, (max-width: 293px) 100vw, 293px"></figure><h2 class="wp-block-heading">Replacing Projects with dynamic data</h2><p>Replacing the static parts with dynamic content could be achieved by the following approach:</p><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><p>The steps are the same for all components (all items of the side menu).</p><p>Find the</p><p>Identify dynamic parts in template</p><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_20_projects_html_old-700x374.png" alt="" class="wp-image-5972 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><figure class="wp-block-image size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data-700x219.png" alt="" class="wp-image-5971 lazy"></figure><figure class="wp-block-table"><table><tbody><tr><td><img decoding="async" width="500" height="278" class="wp-image-5973 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20278'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_42_projects_old_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="157" class="wp-image-5971 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20157'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="279" class="wp-image-5975 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20279'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_44_projects_new_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="151" class="wp-image-5974 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20151'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_43_projects_new_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><h2 class="wp-block-heading">Create templates for side menu pages</h2><p>For every side menu item, their is a corresponding html file in the install folder of the <code>sb-admin-2</code> template:</p><p>Remember the environment variable we create in part 1 for the start of our project</p><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><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 find dashboard/apps install/sb-admin-2 -name *.html</pre><p>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><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><p>Each template base.html should have the following content:</p><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="">{ { { <p>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> <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 class IndexView(generic.TemplateView): template_name = 'buttons/base.html'</pre><p>So, for each template file, we have to</p><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><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=""> <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --></pre><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure><div class="post-content"><div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 22<small class="months">Feb</small></time></a> </span><div class="media-body"><header class="entry-header"><h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/">Django | Build a Dashboard with Django and Bootstrap: Part 2</a></h4></header><div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span></div><div class="entry-content"><p>This is Part 2 of <em>Building a Dashboard with Django and Bootstrap</em>:</p><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><h2 class="wp-block-heading">Introduction</h2><p>If you follow the first part of this blog topic, you have a running Django dashboard.</p><p>But, unfortunately, the content is still static. Let’s review the current state:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"></div></div><p>Perfect. We are done with the basic setup.</p><p>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><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>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><p>We will do this by following these steps:</p><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><h2 class="wp-block-heading">Identify dynamic parts</h2><p>How to find the parts, which are dynamic.</p><p>One way is to ask:</p><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><p>You mostly get the same answers by the question:</p><ul class="wp-block-list"><li>What are the main components of a web page (including navigation and content)</li></ul><p>For answer the first question, take a look at the current page and “name” the areas:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="563" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20563'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/02_elements_of_dashboard_page.png?fit=700%2C394&ssl=1" alt="" class="wp-image-5929 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>So, these “names” are also the answer for the 3. Question:</p><ul class="wp-block-list"><li>sidemenu</li><li>top bar</li><li>content</li></ul><p>And maybe you find additional “names”</p><ul class="wp-block-list"><li>header</li><li>footer</li><li>top menu</li><li>left and right sidebar</li></ul><h2 class="wp-block-heading">Find identified parts in template</h2><p>Next step is, to find the identified parts in our dashboard template</p><p><code>dashboard/templates/site/sb-admin-2/base.html</code></p><p>This is an easy step, because the developer of the SB Admin 2 template documented their template well:</p><figure class="wp-block-image size-large"><img decoding="async" width="2004" height="1706" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202004%201706'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/03_elements_of_dashboard_in_codepage.png?fit=700%2C596&ssl=1" alt="" class="wp-image-5932 lazy" data-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" data-sizes="auto, (max-width: 2004px) 100vw, 2004px"></figure><p>Looking into the code of the template, you will find comment lines describing the content:</p><ul class="wp-block-list"><li><code><!-- Sidebar --></code></li><li><code><!-- Topbar --></code></li><li><code><!-- Top Search --></code></li><li><code><!-- Top Navbar --></code></li><li><code><!-- Begin Page Content--></code></li></ul><p>So, it is obvious what do to next:</p><ul class="wp-block-list"><li>get the <em>dynamic</em> part (lines under)<code><!-- Begin Page Content--></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><p>This is the way, the template system of django works:</p><figure class="wp-block-image size-large"><img decoding="async" width="954" height="251" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20954%20251'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/21_combine_template_and_content_ui.png?fit=700%2C184&ssl=1" alt="" class="wp-image-5944 lazy" data-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" data-sizes="auto, (max-width: 954px) 100vw, 954px"></figure><p>Let’s explain this with a simple example: the page title</p><p>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><p>To achieve this, we have to tell our template system the following:</p><figure class="wp-block-image size-large"><img decoding="async" width="940" height="209" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20940%20209'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/22_combine_template_and_content_code.png?fit=700%2C156&ssl=1" alt="" class="wp-image-5943 lazy" data-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" data-sizes="auto, (max-width: 940px) 100vw, 940px"></figure><p>Now, we do the same with the content:</p><figure class="wp-block-image size-large"><img decoding="async" width="983" height="457" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20983%20457'%3E%3C/svg%3E" data-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&ssl=1" alt="" class="wp-image-5947 lazy" data-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" data-sizes="auto, (max-width: 983px) 100vw, 983px"></figure><p>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><p>Well, let’s make a test and try to include a different content in the dashboard template.</p><p>Change the lines, where we include the content into this:</p><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="">{ MISSING CONTENT { <p>Did you notice the other name of the content: <strong>content_missing</strong>?</p> <p>Change the template, save the file and have a look at the result:</p> <figure class="wp-block-image size-large"><img decoding="async" width="2328" height="448" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202328%20448'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/41_missing_content.png?fit=700%2C135&ssl=1" alt="" class="wp-image-5949 lazy" data-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" data-sizes="auto, (max-width: 2328px) 100vw, 2328px"></figure> <p>Change content back, so your template is working again:</p> <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="">{ MISSING CONTENT { <p>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> </pre></pre></div> </div> </div> </div> </article><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"> <figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure> <div class="post-content"> <div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 21<small class="months">Feb</small></time></a> </span> <div class="media-body"> <header class="entry-header"> <h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/">Django | Build a Dashboard with Django and Bootstrap: Part 1</a></h4> </header> <div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span> </div> <div class="entry-content"> <p>This is Part 1 of <em>Building a Dashboard with Django and Bootstrap</em>:</p> <ul class="wp-block-list"> <li><strong>Part 1: Building a base Django project</strong></li> <li><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/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/build-a-dashboard-with-django-and-bootstrap-part-4/">Part 4: Deploy Django App to Azure</a></li> </ul> <h2 class="wp-block-heading">Introduction</h2> <p>Building a complete web app isn’t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don’t using tools or framework, which helps and makes our life easier. <a href="https://www.djangoproject.com/"><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824465754606598455505">Django</gwmw></a> is one of these frameworks:</p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468379037630016661">Django</gwmw> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development</p> </blockquote> <p>So, let’s get started.</p> <h3 class="wp-block-heading">Create project</h3> <p>For subsequent steps, we will remember our starting directory </p> <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="">❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder...</pre><p>First step is to create our main Django project</p><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="">❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate</pre><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="">❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK.</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="782" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20782'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png" alt="" class="wp-image-9675 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-300x229.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-768x587.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1536x1173.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-2048x1564.png 2048w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure></div><h3 class="wp-block-heading">Create first apps</h3><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="">❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend</pre><p>The folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="970" height="436" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20970%20436'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png" alt="" class="wp-image-9690 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png 970w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-300x135.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-768x345.png 768w" data-sizes="auto, (max-width: 970px) 100vw, 970px"></figure><h2 class="wp-block-heading">Add new apps to project</h2><p>Modify name in <code>apps/core/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core'</pre><p>Modify name in <code>apps/frontend/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend'</pre><p>Modify <code>dashboard/settings.py</code></p><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="">INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ]</pre><p>Modify <code>dashboard/urls.py</code></p><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="">from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ]</pre><h3 class="wp-block-heading">Create view</h3><p>Modify view in <code>apps/frontend/views.py</code></p><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="">from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html'</pre><h3 class="wp-block-heading">Create template for frontend View</h3><p>Create template file <code>apps/frontend/templates/frontend/index.html</code></p><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=""><h1> Frontend: Let's get started </h1></pre><h3 class="wp-block-heading">Add template folder to configuration</h3><p>In <kbd>dashboard/settings.py</kbd>, add template folder to TEMPLATES</p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ]</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="624" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20624%20186'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png" alt="" class="wp-image-8442 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png 624w, https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2-300x89.png 300w" data-sizes="auto, (max-width: 624px) 100vw, 624px"></figure></div><h2 class="wp-block-heading">Current folder Structure</h2><p>So far, we have the following folder structure</p><figure class="wp-block-image size-full"><img decoding="async" width="690" height="982" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20690%20982'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png" alt="" class="wp-image-9691 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png 690w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001-211x300.png 211w" data-sizes="auto, (max-width: 690px) 100vw, 690px"></figure><h2 class="wp-block-heading">Prepare for administrate your project</h2><h3 class="wp-block-heading">Create admin user</h3><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="">❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully.</pre><h2 class="wp-block-heading">Add Bootstrap support</h2><p>Download requires files for Bootstrap, jQuery and PopperJS.</p><p>Or download <a href="https://via-internet.de/blog/wp-content/uploads/2021/10/static.zip">this </a>prepared archiv and unzip the files unter <code>dashboard</code>.</p><p>Run the scripts in <kbd>$DASHBOARD_ROOT</kbd></p><p>Hint: You need to install <a href="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3" data-type="link" data-id="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3">PowerShell</a> before running the scripts.</p><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 > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1</pre><p><kbd>download_bootstrap.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' </pre><p><kbd>download_jquery.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map</pre><p><kbd>download_popperjs.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js</pre><p>Finally, the folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="474" height="660" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20474%20660'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png" alt="" class="wp-image-9679 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png 474w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008-215x300.png 215w" data-sizes="auto, (max-width: 474px) 100vw, 474px"></figure><h3 class="wp-block-heading">Create site templates in <code>dashboard/templates/site</code></h3><h3 class="wp-block-heading">Add templates path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470508427730698282">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="5" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ...</pre><h3 class="wp-block-heading"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-2" id="gwmw-15824470715450370185521">Add static</gwmw> path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470715451132153545">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><p>Add as first line</p><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="">import os</pre><p>Then add / replace at <kbd>STATIC_URL=...</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="2-4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ]</pre><h2 class="wp-block-heading">Modify frontend view template</h2><p>File <code>dashboard/apps/frontend/templates/index.html</code></p><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="">{ { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { <p>File <kbd>dashboard/apps/frontend/templates/site/base.html</kbd></p> <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="">{ <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html></pre><h2 class="wp-block-heading">View current status of project</h2><figure class="wp-block-image size-large"><img decoding="async" width="1024" height="778" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20778'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png" alt="" class="wp-image-9682 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-300x228.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-768x583.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1536x1167.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap.png 1714w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure><h2 class="wp-block-heading">Final Result</h2><p>The final result could be found <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project" data-type="link" data-id="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project">here</a>.</p><h2 class="wp-block-heading">Add dashboard from an existing template</h2><p>For a first start, we will use this <a href="https://startbootstrap.com/previews/sb-admin-2/"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824470188863680783027">sb</gwmw>-admin-2 dashboard</a> template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>:</p><figure class="wp-block-image size-full"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/61_dashboard.png" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><h2 class="wp-block-heading">Download required files</h2><p>Bootstrap templates consist of at least 3 different types of files</p><ul class="wp-block-list"><li>main index.html page, responsible for collection all elements and set up your page</li><li>CSS files defining the style of your page</li><li>JavaScript files, containing needed frameworks and code</li></ul><p>So, first start by downloading the sample template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>. Be sure, you start in our project root folder:</p><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="">❯ cd $DASHBOARD_ROOT</pre><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="">❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 </pre><p>Next, find out, what we need for our template in addition to the file <kbd>index.html</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)="</pre><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script></pre><p>That’s a lot of additional files.</p><p>To keep the file structure consistent, these files should be stored under the <kbd>dashboard/static</kbd> folder (same as the bootstrap files before).</p><p>To achieve this, there are <gwmw class="ginger-module-highlighter-mistake-type-2" id="gwmw-15824469384628631344488">two possi</gwmw>bilities:</p><ul class="wp-block-list"><li>Create desired folder and copy each of the source files to the destination folder</li><li><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824469457060378385283">Copy</gwmw> the complete static folder from the <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap">Github Repository</a> for this post.</li></ul><p>We use the second option to keep the focus on creating our dashboard.<gwmw style="display:none;"></gwmw></p><p>So, first, clone the repository:</p><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="">cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap</pre><p>Then, copy the requred files</p><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="">cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard</pre><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 -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard</pre><p>Having everything needed for the dashboard template, the next step is to modify the front-end template</p><p>File <code>dashboard/apps/frontend/templates/frontend/index.html</code></p> <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="">{ { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div></pre></pre></div></div></div></div></article><footer class="site-footer"><div class="container"><div class="row footer-sidebar"><div class="col-lg-3 col-md-6 col-sm-12"><aside id="categories-1" class="widget widget_categories wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Categories</h4><form action="https://via-internet.de/blog" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name="cat" id="cat" class="postform"><option value="-1">Select Category</option><option class="level-0" value="2">3D Printing (1)</option><option class="level-0" value="168">AI (3)</option><option class="level-0" value="1">Allgemein (32)</option><option class="level-0" value="151">Anaconda (1)</option><option class="level-0" value="4">Apache (3)</option><option class="level-0" value="5">Apache Spark (3)</option><option class="level-0" value="6">Apache Zeppelin (1)</option><option class="level-0" value="7">Arduino (1)</option><option class="level-0" value="160">Astro (3)</option><option class="level-0" value="9">Azure (7)</option><option class="level-1" value="20"> Databricks (4)</option><option class="level-1" value="87"> Widgets (1)</option><option class="level-0" value="158">BeautifulSoup (1)</option><option class="level-0" value="10">Bootstrap (6)</option><option class="level-0" value="12">Capacitor (1)</option><option class="level-0" value="13">CI/CD (3)</option><option class="level-1" value="40"> Jenkins (3)</option><option class="level-0" value="153">Container (9)</option><option class="level-1" value="22"> Docker (8)</option><option class="level-2" value="43"> Kubernetes (2)</option><option class="level-1" value="154"> Podman (1)</option><option class="level-0" value="16">Cookbook (30)</option><option class="level-0" value="17">CSS (3)</option><option class="level-0" value="135">Daily (6)</option><option class="level-0" value="144">Dart (1)</option><option class="level-0" value="18">Data Science (1)</option><option class="level-0" value="19">Database (2)</option><option class="level-1" value="50"> MySQL (1)</option><option class="level-1" value="58"> PostgreSQL (1)</option><option class="level-0" value="96">FastAPI (1)</option><option class="level-0" value="27">Generell (1)</option><option class="level-0" value="28">Git und Github (6)</option><option class="level-0" value="157">Grafana (1)</option><option class="level-0" value="31">Hadoop (1)</option><option class="level-0" value="163">Hexo (1)</option><option class="level-0" value="33">Homebrew (1)</option><option class="level-0" value="165">HyperDiv (1)</option><option class="level-0" value="34">Ionic 3 (5)</option><option class="level-0" value="35">Ionic 4 (9)</option><option class="level-0" value="39">Jekyll (1)</option><option class="level-0" value="41">Jupyter (2)</option><option class="level-0" value="42">Keycloak (3)</option><option class="level-0" value="137">Languages (60)</option><option class="level-1" value="14"> ClojureScript (1)</option><option class="level-1" value="15"> Cobol (1)</option><option class="level-1" value="24"> Erlang (2)</option><option class="level-2" value="94"> Elixir (2)</option><option class="level-1" value="149"> F# (2)</option><option class="level-1" value="29"> Go (1)</option><option class="level-1" value="30"> Groovy (1)</option><option class="level-1" value="32"> Haskell (3)</option><option class="level-1" value="36"> iPython (1)</option><option class="level-1" value="37"> Java (5)</option><option class="level-1" value="38"> Javascript (7)</option><option class="level-1" value="56"> Perl (1)</option><option class="level-1" value="57"> PHP (13)</option><option class="level-1" value="63"> PureScript (1)</option><option class="level-1" value="65"> Python (19)</option><option class="level-2" value="141"> PIP (1)</option><option class="level-1" value="68"> Rust (3)</option><option class="level-1" value="75"> Swift (1)</option><option class="level-0" value="99">Laravel (16)</option><option class="level-0" value="44">Learning (5)</option><option class="level-0" value="45">Linux (1)</option><option class="level-0" value="46">macOS (1)</option><option class="level-0" value="47">matter.js (1)</option><option class="level-0" value="48">Maven (1)</option><option class="level-0" value="49">Mobile Development (9)</option><option class="level-0" value="51">NestJS (1)</option><option class="level-0" value="156">Nicepage (1)</option><option class="level-0" value="52">Node.js (2)</option><option class="level-0" value="53">Office 365 (2)</option><option class="level-1" value="95"> Excel (1)</option><option class="level-1" value="81"> VBA (1)</option><option class="level-1" value="88"> Word (1)</option><option class="level-0" value="164">Ollama (4)</option><option class="level-0" value="54">OpenSCAD (1)</option><option class="level-0" value="159">Power Apps (1)</option><option class="level-0" value="59">Power BI (4)</option><option class="level-0" value="146">Power BI Visuals (3)</option><option class="level-0" value="61">Power Query (3)</option><option class="level-0" value="62">Protractor (1)</option><option class="level-0" value="64">PySpark (2)</option><option class="level-0" value="69">rxjs (2)</option><option class="level-0" value="70">SAS (3)</option><option class="level-0" value="71">Selenium (1)</option><option class="level-0" value="72">Shell (10)</option><option class="level-1" value="92"> Bash (1)</option><option class="level-1" value="102"> Power Shell (8)</option><option class="level-0" value="73">Smalltalk (1)</option><option class="level-0" value="74">Spring Boot (2)</option><option class="level-0" value="166">Static-Site-Generator (1)</option><option class="level-1" value="167"> Hugo (1)</option><option class="level-0" value="76">TDD (1)</option><option class="level-1" value="77"> Testing / Unittests (1)</option><option class="level-0" value="145">Troubleshooting (3)</option><option class="level-0" value="126">Tutorial (1)</option><option class="level-0" value="78">Ubuntu (1)</option><option class="level-0" value="79">Uncategorized (7)</option><option class="level-0" value="129">Unix (1)</option><option class="level-0" value="80">Vagrant (1)</option><option class="level-0" value="82">Virtual Machine (2)</option><option class="level-0" value="83">Virtualbox (2)</option><option class="level-0" value="84">Visual Studio Code (4)</option><option class="level-0" value="85">Visualisation (3)</option><option class="level-1" value="93"> D3.js (2)</option><option class="level-1" value="100"> p5.js (1)</option><option class="level-0" value="86">Web Framework (40)</option><option class="level-1" value="90"> Angular (10)</option><option class="level-1" value="91"> AngularJS (1)</option><option class="level-1" value="21"> Django (5)</option><option class="level-1" value="97"> Flask (1)</option><option class="level-1" value="26"> Flutter (6)</option><option class="level-1" value="98"> Ionic (13)</option><option class="level-1" value="66"> React (3)</option><option class="level-1" value="148"> React Native (1)</option><option class="level-1" value="67"> ReactJS (3)</option><option class="level-1" value="103"> VUE (2)</option><option class="level-0" value="143">Windows Subsystem for Linux (1)</option><option class="level-0" value="89">Wordpress (2)</option><option class="level-0" value="155">XAMPP (1)</option> </select></form><script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJjYXQiICk7CglmdW5jdGlvbiBvbkNhdENoYW5nZSgpIHsKCQlpZiAoIGRyb3Bkb3duLm9wdGlvbnNbIGRyb3Bkb3duLnNlbGVjdGVkSW5kZXggXS52YWx1ZSA+IDAgKSB7CgkJCWRyb3Bkb3duLnBhcmVudE5vZGUuc3VibWl0KCk7CgkJfQoJfQoJZHJvcGRvd24ub25jaGFuZ2UgPSBvbkNhdENoYW5nZTsKfSkoKTsKCi8qIF1dPiAqLwo="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="archives-1" class="widget widget_archive wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Archives</h4> <label class="screen-reader-text" for="archives-dropdown-1">Archives</label> <select id="archives-dropdown-1" name="archive-dropdown"><option value="">Select Month</option><option value="https://via-internet.de/blog/2024/11/"> November 2024</option><option value="https://via-internet.de/blog/2024/10/"> October 2024</option><option value="https://via-internet.de/blog/2024/09/"> September 2024</option><option value="https://via-internet.de/blog/2024/07/"> July 2024</option><option value="https://via-internet.de/blog/2024/05/"> May 2024</option><option value="https://via-internet.de/blog/2024/04/"> April 2024</option><option value="https://via-internet.de/blog/2024/03/"> March 2024</option><option value="https://via-internet.de/blog/2024/01/"> January 2024</option><option value="https://via-internet.de/blog/2023/12/"> December 2023</option><option value="https://via-internet.de/blog/2023/11/"> November 2023</option><option value="https://via-internet.de/blog/2023/10/"> October 2023</option><option value="https://via-internet.de/blog/2023/09/"> September 2023</option><option value="https://via-internet.de/blog/2023/08/"> August 2023</option><option value="https://via-internet.de/blog/2023/07/"> July 2023</option><option value="https://via-internet.de/blog/2023/04/"> April 2023</option><option value="https://via-internet.de/blog/2023/03/"> March 2023</option><option value="https://via-internet.de/blog/2023/02/"> February 2023</option><option value="https://via-internet.de/blog/2022/11/"> November 2022</option><option value="https://via-internet.de/blog/2022/10/"> October 2022</option><option value="https://via-internet.de/blog/2022/07/"> July 2022</option><option value="https://via-internet.de/blog/2022/06/"> June 2022</option><option value="https://via-internet.de/blog/2022/05/"> May 2022</option><option value="https://via-internet.de/blog/2022/04/"> April 2022</option><option value="https://via-internet.de/blog/2022/03/"> March 2022</option><option value="https://via-internet.de/blog/2022/01/"> January 2022</option><option value="https://via-internet.de/blog/2021/12/"> December 2021</option><option value="https://via-internet.de/blog/2021/11/"> November 2021</option><option value="https://via-internet.de/blog/2021/10/"> October 2021</option><option value="https://via-internet.de/blog/2021/08/"> August 2021</option><option value="https://via-internet.de/blog/2021/07/"> July 2021</option><option value="https://via-internet.de/blog/2021/06/"> June 2021</option><option value="https://via-internet.de/blog/2021/05/"> May 2021</option><option value="https://via-internet.de/blog/2021/02/"> February 2021</option><option value="https://via-internet.de/blog/2021/01/"> January 2021</option><option value="https://via-internet.de/blog/2020/12/"> December 2020</option><option value="https://via-internet.de/blog/2020/11/"> November 2020</option><option value="https://via-internet.de/blog/2020/10/"> October 2020</option><option value="https://via-internet.de/blog/2020/09/"> September 2020</option><option value="https://via-internet.de/blog/2020/08/"> August 2020</option><option value="https://via-internet.de/blog/2020/07/"> July 2020</option><option value="https://via-internet.de/blog/2020/06/"> June 2020</option><option value="https://via-internet.de/blog/2020/05/"> May 2020</option><option value="https://via-internet.de/blog/2020/04/"> April 2020</option><option value="https://via-internet.de/blog/2020/03/"> March 2020</option><option value="https://via-internet.de/blog/2020/02/" selected="selected"> February 2020</option><option value="https://via-internet.de/blog/2020/01/"> January 2020</option><option value="https://via-internet.de/blog/2019/12/"> December 2019</option><option value="https://via-internet.de/blog/2019/09/"> September 2019</option><option value="https://via-internet.de/blog/2019/08/"> August 2019</option><option value="https://via-internet.de/blog/2019/07/"> July 2019</option><option value="https://via-internet.de/blog/2019/06/"> June 2019</option><option value="https://via-internet.de/blog/2019/05/"> May 2019</option><option value="https://via-internet.de/blog/2019/04/"> April 2019</option><option value="https://via-internet.de/blog/2019/03/"> March 2019</option><option value="https://via-internet.de/blog/2019/02/"> February 2019</option><option value="https://via-internet.de/blog/2019/01/"> January 2019</option><option value="https://via-internet.de/blog/2018/12/"> December 2018</option><option value="https://via-internet.de/blog/2018/11/"> November 2018</option><option value="https://via-internet.de/blog/2018/09/"> September 2018</option><option value="https://via-internet.de/blog/2018/08/"> August 2018</option><option value="https://via-internet.de/blog/2018/07/"> July 2018</option><option value="https://via-internet.de/blog/2018/03/"> March 2018</option><option value="https://via-internet.de/blog/2018/02/"> February 2018</option><option value="https://via-internet.de/blog/2018/01/"> January 2018</option><option value="https://via-internet.de/blog/2017/12/"> December 2017</option><option value="https://via-internet.de/blog/2017/07/"> July 2017</option><option value="https://via-internet.de/blog/2017/05/"> May 2017</option><option value="https://via-internet.de/blog/2017/03/"> March 2017</option><option value="https://via-internet.de/blog/2017/02/"> February 2017</option><option value="https://via-internet.de/blog/2016/12/"> December 2016</option><option value="https://via-internet.de/blog/2016/11/"> November 2016</option><option value="https://via-internet.de/blog/2016/10/"> October 2016</option> </select> <script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJhcmNoaXZlcy1kcm9wZG93bi0xIiApOwoJZnVuY3Rpb24gb25TZWxlY3RDaGFuZ2UoKSB7CgkJaWYgKCBkcm9wZG93bi5vcHRpb25zWyBkcm9wZG93bi5zZWxlY3RlZEluZGV4IF0udmFsdWUgIT09ICcnICkgewoJCQlkb2N1bWVudC5sb2NhdGlvbi5ocmVmID0gdGhpcy5vcHRpb25zWyB0aGlzLnNlbGVjdGVkSW5kZXggXS52YWx1ZTsKCQl9Cgl9Cglkcm9wZG93bi5vbmNoYW5nZSA9IG9uU2VsZWN0Q2hhbmdlOwp9KSgpOwoKLyogXV0+ICovCg=="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="search-1" class="widget widget_search wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Search</h4><form method="get" id="searchform" class="input-group" action="https://via-internet.de/blog/"> <input type="text" class="form-control" placeholder="Search" name="s" id="s"><div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button></div></form></aside></div></div></div><div class="site-info text-center"> Copyright © 2024 | Powered by <a href="//wordpress.org/">WordPress</a> <span class="sep"> | </span> Aasta Blog theme by <a target="_blank" href="//themearile.com/">ThemeArile</a></div></footer><div class="page-scroll-up"><a href="#totop"><i class="fa fa-angle-up"></i></a></div><div id="cookie-law-info-bar" data-nosnippet="true" data-cli-style="cli-style-v2" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: inherit; bottom: 0px; position: fixed;"><span><div class="cli-bar-container cli-style-v2"><div class="cli-bar-message">We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.</div><div class="cli-bar-btn_container"><a role="button" class="medium cli-plugin-button cli-plugin-main-button cli_settings_button" style="margin: 0px 5px 0px 0px; color: rgb(51, 51, 51); background-color: rgb(222, 223, 224);">Cookie Settings</a><a id="wt-cli-accept-all-btn" role="button" data-cli_action="accept_all" class="wt-cli-element medium cli-plugin-button wt-cli-accept-all-btn cookie_action_close_header cli_action_button" style="color: rgb(255, 255, 255); background-color: rgb(97, 162, 41);">Accept All</a></div></div></span></div><div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); position: fixed; font-family: inherit; width: auto; bottom: 0px; right: 100px; display: none;"><span id="cookie_hdr_showagain">Manage consent</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true"><div class="cli-modal-dialog" role="document"><div class="cli-modal-content cli-bar-popup"> <button type="button" class="cli-modal-close" id="cliModalClose"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg> <span class="wt-cli-sr-only">Close</span> </button><div class="cli-modal-body"><div class="cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-privacy-overview"><h4>Privacy Overview</h4><div class="cli-privacy-content"><div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ...</div></div> <a class="cli-privacy-readmore" aria-label="Show more" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a></div></div><div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container"><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab"> Necessary </a><div class="wt-cli-necessary-checkbox"> <input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked"> <label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label></div> <span class="cli-necessary-caption">Always Enabled</span></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="necessary"><div class="wt-cli-cookie-description"> Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.<table class="cookielawinfo-row-cat-table cookielawinfo-winter"><thead><tr><th class="cookielawinfo-column-1">Cookie</th><th class="cookielawinfo-column-3">Duration</th><th class="cookielawinfo-column-4">Description</th></tr></thead><tbody><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-analytics</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-functional</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-necessary</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-others</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-performance</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">viewed_cookie_policy</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.</td></tr></tbody></table></div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="functional" data-toggle="cli-toggle-tab"> Functional </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-functional" class="cli-user-preference-checkbox" data-id="checkbox-functional"> <label for="wt-cli-checkbox-functional" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Functional</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="functional"><div class="wt-cli-cookie-description"> Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="performance" data-toggle="cli-toggle-tab"> Performance </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-performance" class="cli-user-preference-checkbox" data-id="checkbox-performance"> <label for="wt-cli-checkbox-performance" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Performance</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="performance"><div class="wt-cli-cookie-description"> Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="analytics" data-toggle="cli-toggle-tab"> Analytics </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-analytics" class="cli-user-preference-checkbox" data-id="checkbox-analytics"> <label for="wt-cli-checkbox-analytics" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Analytics</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="analytics"><div class="wt-cli-cookie-description"> Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="advertisement" data-toggle="cli-toggle-tab"> Advertisement </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-advertisement" class="cli-user-preference-checkbox" data-id="checkbox-advertisement"> <label for="wt-cli-checkbox-advertisement" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Advertisement</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="advertisement"><div class="wt-cli-cookie-description"> Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="others" data-toggle="cli-toggle-tab"> Others </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-others" class="cli-user-preference-checkbox" data-id="checkbox-others"> <label for="wt-cli-checkbox-others" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Others</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="others"><div class="wt-cli-cookie-description"> Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.</div></div></div></div></div></div></div></div><div class="cli-modal-footer"><div class="wt-cli-element cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-tab-footer wt-cli-privacy-overview-actions"> <a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a></div></div></div></div></div></div></div></div><div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div><div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div> <script defer="" src="data:text/javascript;base64,DQogICAgICAgICAgICBmdW5jdGlvbiBfa2F0ZXhSZW5kZXIocm9vdEVsZW1lbnQpIHsNCiAgICAgICAgICAgICAgICBjb25zdCBlbGVzID0gcm9vdEVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgiLmthdGV4LWVxOm5vdCgua2F0ZXgtcmVuZGVyZWQpIik7DQogICAgICAgICAgICAgICAgZm9yKGxldCBpZHg9MDsgaWR4IDwgZWxlcy5sZW5ndGg7IGlkeCsrKSB7DQogICAgICAgICAgICAgICAgICAgIGNvbnN0IGVsZSA9IGVsZXNbaWR4XTsNCiAgICAgICAgICAgICAgICAgICAgZWxlLmNsYXNzTGlzdC5hZGQoImthdGV4LXJlbmRlcmVkIik7DQogICAgICAgICAgICAgICAgICAgIHRyeSB7DQogICAgICAgICAgICAgICAgICAgICAgICBrYXRleC5yZW5kZXIoDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxlLnRleHRDb250ZW50LA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZSwNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXlNb2RlOiBlbGUuZ2V0QXR0cmlidXRlKCJkYXRhLWthdGV4LWRpc3BsYXkiKSA9PT0gJ3RydWUnLA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aHJvd09uRXJyb3I6IGZhbHNlDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgKTsNCiAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChuKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUuc3R5bGUuY29sb3I9InJlZCI7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUudGV4dENvbnRlbnQgPSBuLm1lc3NhZ2U7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGZ1bmN0aW9uIGthdGV4UmVuZGVyKCkgew0KICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihkb2N1bWVudCk7DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoIkRPTUNvbnRlbnRMb2FkZWQiLCBmdW5jdGlvbigpIHsNCiAgICAgICAgICAgICAgICBrYXRleFJlbmRlcigpOw0KDQogICAgICAgICAgICAgICAgLy8gUGVyZm9ybSBhIEthVGVYIHJlbmRlcmluZyBzdGVwIHdoZW4gdGhlIERPTSBpcyBtdXRhdGVkLg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcihmdW5jdGlvbihtdXRhdGlvbnMpIHsNCiAgICAgICAgICAgICAgICAgICAgW10uZm9yRWFjaC5jYWxsKG11dGF0aW9ucywgZnVuY3Rpb24obXV0YXRpb24pIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmIChtdXRhdGlvbi50YXJnZXQgJiYgbXV0YXRpb24udGFyZ2V0IGluc3RhbmNlb2YgRWxlbWVudCkgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihtdXRhdGlvbi50YXJnZXQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgICAgICB9KTsNCg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2YXRpb25Db25maWcgPSB7DQogICAgICAgICAgICAgICAgICAgIHN1YnRyZWU6IHRydWUsDQogICAgICAgICAgICAgICAgICAgIGNoaWxkTGlzdDogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgY2hhcmFjdGVyRGF0YTogdHJ1ZQ0KICAgICAgICAgICAgICAgIH07DQoNCiAgICAgICAgICAgICAgICBrYXRleE9ic2VydmVyLm9ic2VydmUoZG9jdW1lbnQuYm9keSwga2F0ZXhPYnNlcnZhdGlvbkNvbmZpZyk7DQogICAgICAgICAgICB9KTsNCg0KICAgICAgICA="></script> <style type="text/css">.theme-testimonial { background-image: url(https://via-internet.de/blog/wp-content/themes/aasta-blog/assets/img/theme-bg.jpg); background-size: cover; background-position: center center; }</style> <script defer="" src="data:text/javascript;base64,CgkvLyBUaGlzIEpTIGFkZGVkIGZvciB0aGUgVG9nZ2xlIGJ1dHRvbiB0byB3b3JrIHdpdGggdGhlIGZvY3VzIGVsZW1lbnQuCgkJaWYgKHdpbmRvdy5pbm5lcldpZHRoIDwgOTkyKSB7CgkJCWRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBmdW5jdGlvbihlKSB7CgkJCWxldCBpc1RhYlByZXNzZWQgPSBlLmtleSA9PT0gJ1RhYicgfHwgZS5rZXlDb2RlID09PSA5OwoJCQkJaWYgKCFpc1RhYlByZXNzZWQpIHsKCQkJCQlyZXR1cm47CgkJCQl9CgkJCQkKCQkJY29uc3QgIGZvY3VzYWJsZUVsZW1lbnRzID0KCQkJCSdidXR0b24sIFtocmVmXSwgaW5wdXQsIHNlbGVjdCwgdGV4dGFyZWEsIFt0YWJpbmRleF06bm90KFt0YWJpbmRleD0iLTEiXSknOwoJCQljb25zdCBtb2RhbCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5uYXZiYXIubmF2YmFyLWV4cGFuZC1sZycpOyAvLyBzZWxlY3QgdGhlIG1vZGFsIGJ5IGl0J3MgaWQKCgkJCWNvbnN0IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCA9IG1vZGFsLnF1ZXJ5U2VsZWN0b3JBbGwoZm9jdXNhYmxlRWxlbWVudHMpWzBdOyAvLyBnZXQgZmlyc3QgZWxlbWVudCB0byBiZSBmb2N1c2VkIGluc2lkZSBtb2RhbAoJCQljb25zdCBmb2N1c2FibGVDb250ZW50ID0gbW9kYWwucXVlcnlTZWxlY3RvckFsbChmb2N1c2FibGVFbGVtZW50cyk7CgkJCWNvbnN0IGxhc3RGb2N1c2FibGVFbGVtZW50ID0gZm9jdXNhYmxlQ29udGVudFtmb2N1c2FibGVDb250ZW50Lmxlbmd0aCAtIDFdOyAvLyBnZXQgbGFzdCBlbGVtZW50IHRvIGJlIGZvY3VzZWQgaW5zaWRlIG1vZGFsCgoJCQkgIGlmIChlLnNoaWZ0S2V5KSB7IC8vIGlmIHNoaWZ0IGtleSBwcmVzc2VkIGZvciBzaGlmdCArIHRhYiBjb21iaW5hdGlvbgoJCQkJaWYgKGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQgPT09IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCkgewoJCQkJICBsYXN0Rm9jdXNhYmxlRWxlbWVudC5mb2N1cygpOyAvLyBhZGQgZm9jdXMgZm9yIHRoZSBsYXN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsKCQkJCX0KCQkJICB9IGVsc2UgeyAvLyBpZiB0YWIga2V5IGlzIHByZXNzZWQKCQkJCWlmIChkb2N1bWVudC5hY3RpdmVFbGVtZW50ID09PSBsYXN0Rm9jdXNhYmxlRWxlbWVudCkgeyAvLyBpZiBmb2N1c2VkIGhhcyByZWFjaGVkIHRvIGxhc3QgZm9jdXNhYmxlIGVsZW1lbnQgdGhlbiBmb2N1cyBmaXJzdCBmb2N1c2FibGUgZWxlbWVudCBhZnRlciBwcmVzc2luZyB0YWIKCQkJCSAgZmlyc3RGb2N1c2FibGVFbGVtZW50LmZvY3VzKCk7IC8vIGFkZCBmb2N1cyBmb3IgdGhlIGZpcnN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsJCQkgIAoJCQkJfQoJCQkgIH0KCgkJCX0pOwoJCX0K"></script> <script defer="" src="data:text/javascript;base64,CiAgICAgICAgbmV3Q29udGFpbmVyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3BhbicpOwogICAgICAgIG5ld0NvbnRhaW5lci5zdHlsZS5zZXRQcm9wZXJ0eSgnZGlzcGxheScsJ25vbmUnLCcnKTsKICAgICAgICBuZXdOb2RlICAgICAgICAgICA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NjcmlwdCcpOwogICAgICAgIG5ld05vZGUudHlwZSAgICAgID0gJ21hdGgvdGV4JzsKICAgICAgICBuZXdOb2RlLmlubmVySFRNTCA9ICdcXG5ld2NvbW1hbmR7XFxlcHN9e1xcdmFyZXBzaWxvbn1cblxcbmV3Y29tbWFuZHtcXFJSfXtcXG1hdGhiYntSfX1cblxcbmV3Y29tbWFuZHtcXHJkfXtcXG9wZXJhdG9ybmFtZXtkfX1cblxcbmV3Y29tbWFuZHtcXHNldH1bMV17XFxsZWZ0XFx7IzFcXHJpZ2h0XFx9fSc7CiAgICAgICAgbmV3Q29udGFpbmVyLmFwcGVuZENoaWxkKG5ld05vZGUpOwogICAgICAgIGRvY3VtZW50LmJvZHkuaW5zZXJ0QmVmb3JlKG5ld0NvbnRhaW5lcixkb2N1bWVudC5ib2R5LmZpcnN0Q2hpbGQpOwogICAgICAgIA=="></script> <script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], displayMath: [['$$', '$$'], ["\\[", "\\]"]], processEscapes: true }, TeX: { equationNumbers: {autoNumber: "AMS", useLabelIds: true} }, });</script> <link rel="stylesheet" id="cookie-law-info-table-css" href="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_26b4f0c3c1bcf76291fa4952fb7f04fb.php?ver=3.2.8" type="text/css" media="all"> <script defer="" id="toc-front-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgdG9jcGx1cyA9IHsidmlzaWJpbGl0eV9zaG93IjoiQW56ZWlnZW4iLCJ2aXNpYmlsaXR5X2hpZGUiOiJBdXNibGVuZGVuIiwidmlzaWJpbGl0eV9oaWRlX2J5X2RlZmF1bHQiOiIxIiwid2lkdGgiOiJBdXRvIn07Ci8qIF1dPiAqLwo="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_93d421fd7576b0ca9c359ffe2fa16113.php?ver=20151215" id="aasta-skip-link-focus-fix-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.7.2" id="katex-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=UnpSS38vU0joHj5" id="enlighterjs-js"></script> <script defer="" id="enlighterjs-js-after" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwohZnVuY3Rpb24oZSxuKXtpZigidW5kZWZpbmVkIiE9dHlwZW9mIEVubGlnaHRlckpTKXt2YXIgbz17InNlbGVjdG9ycyI6eyJibG9jayI6InByZS5FbmxpZ2h0ZXJKU1JBVyIsImlubGluZSI6ImNvZGUuRW5saWdodGVySlNSQVcifSwib3B0aW9ucyI6eyJpbmRlbnQiOjQsImFtcGVyc2FuZENsZWFudXAiOnRydWUsImxpbmVob3ZlciI6dHJ1ZSwicmF3Y29kZURiY2xpY2siOnRydWUsInRleHRPdmVyZmxvdyI6ImJyZWFrIiwibGluZW51bWJlcnMiOmZhbHNlLCJ0aGVtZSI6ImNsYXNzaWMiLCJsYW5ndWFnZSI6ImdlbmVyaWMiLCJyZXRhaW5Dc3NDbGFzc2VzIjpmYWxzZSwiY29sbGFwc2UiOmZhbHNlLCJ0b29sYmFyT3V0ZXIiOiIiLCJ0b29sYmFyVG9wIjoie0JUTl9SQVd9e0JUTl9DT1BZfXtCVE5fV0lORE9XfXtCVE5fV0VCU0lURX0iLCJ0b29sYmFyQm90dG9tIjoiIn19OyhlLkVubGlnaHRlckpTSU5JVD1mdW5jdGlvbigpe0VubGlnaHRlckpTLmluaXQoby5zZWxlY3RvcnMuYmxvY2ssby5zZWxlY3RvcnMuaW5saW5lLG8ub3B0aW9ucyl9KSgpfWVsc2V7KG4mJihuLmVycm9yfHxuLmxvZyl8fGZ1bmN0aW9uKCl7fSkoIkVycm9yOiBFbmxpZ2h0ZXJKUyByZXNvdXJjZXMgbm90IGxvYWRlZCB5ZXQhIil9fSh3aW5kb3csY29uc29sZSk7Ci8qIF1dPiAqLwo="></script> <script type="text/javascript" id="jetpack-stats-js-before">_stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"195943667\",\"post\":\"0\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]); _stq.push([ "clickTrackerInit", "195943667", "0" ]);</script> <script type="text/javascript" src="https://stats.wp.com/e-202510.js" id="jetpack-stats-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="gt_widget_script_62673750-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['62673750'] = {"default_language":"de","languages":["de","en","fr","zh-CN","nl","it","es","da","pt"],"url_structure":"none","native_language_names":1,"flag_style":"2d","flag_size":24,"wrapper_selector":"#gtranslate_menu_wrapper_37060","alt_flags":[],"switcher_open_direction":"top","switcher_horizontal_position":"inline","switcher_text_color":"#666","switcher_arrow_color":"#666","switcher_border_color":"#ccc","switcher_background_color":"#fff","switcher_background_shadow_color":"#efefef","switcher_background_hover_color":"#fff","dropdown_text_color":"#000","dropdown_hover_color":"#fff","dropdown_background_color":"#eee","flags_location":"\/blog\/wp-content\/plugins\/gtranslate\/flags\/"};</script><script src="https://via-internet.de/blog/wp-content/plugins/gtranslate/js/dwf.js?ver=6.7.2" data-no-optimize="1" data-no-minify="1" data-gt-orig-url="/blog/2020/02/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="62673750" defer=""></script><script defer="" id="wpcd-scripts-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgd3BjZGFqYXggPSB7ImFqYXh1cmwiOiJodHRwczpcL1wvdmlhLWludGVybmV0LmRlXC9ibG9nXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAifTsKLyogXV0+ICovCg=="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_231b95969d2321feeaab8fdd8121442a.php" id="wpcd-scripts-js"></script> <script defer="" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js&ver=2.7.5" id="mathjax-js"></script> <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async="" src="https://via-internet.de/blog/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js"></script> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Page Caching using Disk: Enhanced Lazy Loading Database Caching 2/163 queries in 0.254 seconds using Disk Served from: via-internet.de @ 2025-03-08 07:08:06 by W3 Total Cache --></pre> echo "{ { { <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 cp base.html dashboard/apps/components/cards/templates/cards cp base.html dashboard/apps/pages/blank/templates/blank cp base.html dashboard/apps/pages/charts/templates/charts cp base.html dashboard/apps/pages/login/templates/login cp base.html dashboard/apps/pages/pagenotfound/templates/pagenotfound cp base.html dashboard/apps/pages/password/templates/password cp base.html dashboard/apps/pages/register/templates/register cp base.html dashboard/apps/pages/tables/templates/tables cp base.html dashboard/apps/utilities/animations/templates/animations cp base.html dashboard/apps/utilities/borders/templates/borders cp base.html dashboard/apps/utilities/colors/templates/colors cp base.html dashboard/apps/utilities/others/templates/others</pre><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><figure class="wp-block-image size-large"><img decoding="async" width="291" height="874" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20291%20874'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_10_folder_structure.png" alt="" class="wp-image-6012 lazy" data-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" data-sizes="auto, (max-width: 291px) 100vw, 291px"></figure><p>Each of the folders has the same structure, for example the buttons component. We will delete some unnecessary files</p><figure class="wp-block-image size-large is-resized"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20293%20284'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_11_app-folder-structure.png" alt="" class="wp-image-6013 lazy" width="293" height="284" data-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" data-sizes="auto, (max-width: 293px) 100vw, 293px"></figure><h2 class="wp-block-heading">Replacing Projects with dynamic data</h2><p>Replacing the static parts with dynamic content could be achieved by the following approach:</p><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><p>The steps are the same for all components (all items of the side menu).</p><p>Find the</p><p>Identify dynamic parts in template</p><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_20_projects_html_old-700x374.png" alt="" class="wp-image-5972 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-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 lazy"></figure></div><figure class="wp-block-image size-large"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data-700x219.png" alt="" class="wp-image-5971 lazy"></figure><figure class="wp-block-table"><table><tbody><tr><td><img decoding="async" width="500" height="278" class="wp-image-5973 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20278'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_42_projects_old_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="157" class="wp-image-5971 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20157'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_41_projects_old_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="279" class="wp-image-5975 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20279'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_44_projects_new_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="151" class="wp-image-5974 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20151'%3E%3C/svg%3E" data-src="https://blog.via-internet.de/wp-content/uploads/2020/02/3_43_projects_new_data.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><h2 class="wp-block-heading">Create templates for side menu pages</h2><p>For every side menu item, their is a corresponding html file in the install folder of the <code>sb-admin-2</code> template:</p><p>Remember the environment variable we create in part 1 for the start of our project</p><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><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 find dashboard/apps install/sb-admin-2 -name *.html</pre><p>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><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><p>Each template base.html should have the following content:</p><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="">{ { { <p>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> <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 class IndexView(generic.TemplateView): template_name = 'buttons/base.html'</pre><p>So, for each template file, we have to</p><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><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=""> <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --></pre><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure><div class="post-content"><div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 22<small class="months">Feb</small></time></a> </span><div class="media-body"><header class="entry-header"><h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/">Django | Build a Dashboard with Django and Bootstrap: Part 2</a></h4></header><div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span></div><div class="entry-content"><p>This is Part 2 of <em>Building a Dashboard with Django and Bootstrap</em>:</p><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><h2 class="wp-block-heading">Introduction</h2><p>If you follow the first part of this blog topic, you have a running Django dashboard.</p><p>But, unfortunately, the content is still static. Let’s review the current state:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"></div></div><p>Perfect. We are done with the basic setup.</p><p>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><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>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><p>We will do this by following these steps:</p><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><h2 class="wp-block-heading">Identify dynamic parts</h2><p>How to find the parts, which are dynamic.</p><p>One way is to ask:</p><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><p>You mostly get the same answers by the question:</p><ul class="wp-block-list"><li>What are the main components of a web page (including navigation and content)</li></ul><p>For answer the first question, take a look at the current page and “name” the areas:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="563" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20563'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/02_elements_of_dashboard_page.png?fit=700%2C394&ssl=1" alt="" class="wp-image-5929 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>So, these “names” are also the answer for the 3. Question:</p><ul class="wp-block-list"><li>sidemenu</li><li>top bar</li><li>content</li></ul><p>And maybe you find additional “names”</p><ul class="wp-block-list"><li>header</li><li>footer</li><li>top menu</li><li>left and right sidebar</li></ul><h2 class="wp-block-heading">Find identified parts in template</h2><p>Next step is, to find the identified parts in our dashboard template</p><p><code>dashboard/templates/site/sb-admin-2/base.html</code></p><p>This is an easy step, because the developer of the SB Admin 2 template documented their template well:</p><figure class="wp-block-image size-large"><img decoding="async" width="2004" height="1706" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202004%201706'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/03_elements_of_dashboard_in_codepage.png?fit=700%2C596&ssl=1" alt="" class="wp-image-5932 lazy" data-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" data-sizes="auto, (max-width: 2004px) 100vw, 2004px"></figure><p>Looking into the code of the template, you will find comment lines describing the content:</p><ul class="wp-block-list"><li><code><!-- Sidebar --></code></li><li><code><!-- Topbar --></code></li><li><code><!-- Top Search --></code></li><li><code><!-- Top Navbar --></code></li><li><code><!-- Begin Page Content--></code></li></ul><p>So, it is obvious what do to next:</p><ul class="wp-block-list"><li>get the <em>dynamic</em> part (lines under)<code><!-- Begin Page Content--></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><p>This is the way, the template system of django works:</p><figure class="wp-block-image size-large"><img decoding="async" width="954" height="251" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20954%20251'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/21_combine_template_and_content_ui.png?fit=700%2C184&ssl=1" alt="" class="wp-image-5944 lazy" data-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" data-sizes="auto, (max-width: 954px) 100vw, 954px"></figure><p>Let’s explain this with a simple example: the page title</p><p>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><p>To achieve this, we have to tell our template system the following:</p><figure class="wp-block-image size-large"><img decoding="async" width="940" height="209" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20940%20209'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/22_combine_template_and_content_code.png?fit=700%2C156&ssl=1" alt="" class="wp-image-5943 lazy" data-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" data-sizes="auto, (max-width: 940px) 100vw, 940px"></figure><p>Now, we do the same with the content:</p><figure class="wp-block-image size-large"><img decoding="async" width="983" height="457" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20983%20457'%3E%3C/svg%3E" data-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&ssl=1" alt="" class="wp-image-5947 lazy" data-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" data-sizes="auto, (max-width: 983px) 100vw, 983px"></figure><p>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><p>Well, let’s make a test and try to include a different content in the dashboard template.</p><p>Change the lines, where we include the content into this:</p><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="">{ MISSING CONTENT { <p>Did you notice the other name of the content: <strong>content_missing</strong>?</p> <p>Change the template, save the file and have a look at the result:</p> <figure class="wp-block-image size-large"><img decoding="async" width="2328" height="448" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202328%20448'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/41_missing_content.png?fit=700%2C135&ssl=1" alt="" class="wp-image-5949 lazy" data-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" data-sizes="auto, (max-width: 2328px) 100vw, 2328px"></figure> <p>Change content back, so your template is working again:</p> <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="">{ MISSING CONTENT { <p>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> </pre></pre></div> </div> </div> </div> </article><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"> <figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure> <div class="post-content"> <div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 21<small class="months">Feb</small></time></a> </span> <div class="media-body"> <header class="entry-header"> <h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/">Django | Build a Dashboard with Django and Bootstrap: Part 1</a></h4> </header> <div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span> </div> <div class="entry-content"> <p>This is Part 1 of <em>Building a Dashboard with Django and Bootstrap</em>:</p> <ul class="wp-block-list"> <li><strong>Part 1: Building a base Django project</strong></li> <li><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/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/build-a-dashboard-with-django-and-bootstrap-part-4/">Part 4: Deploy Django App to Azure</a></li> </ul> <h2 class="wp-block-heading">Introduction</h2> <p>Building a complete web app isn’t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don’t using tools or framework, which helps and makes our life easier. <a href="https://www.djangoproject.com/"><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824465754606598455505">Django</gwmw></a> is one of these frameworks:</p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468379037630016661">Django</gwmw> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development</p> </blockquote> <p>So, let’s get started.</p> <h3 class="wp-block-heading">Create project</h3> <p>For subsequent steps, we will remember our starting directory </p> <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="">❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder...</pre><p>First step is to create our main Django project</p><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="">❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate</pre><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="">❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK.</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="782" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20782'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png" alt="" class="wp-image-9675 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-300x229.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-768x587.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1536x1173.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-2048x1564.png 2048w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure></div><h3 class="wp-block-heading">Create first apps</h3><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="">❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend</pre><p>The folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="970" height="436" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20970%20436'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png" alt="" class="wp-image-9690 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png 970w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-300x135.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-768x345.png 768w" data-sizes="auto, (max-width: 970px) 100vw, 970px"></figure><h2 class="wp-block-heading">Add new apps to project</h2><p>Modify name in <code>apps/core/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core'</pre><p>Modify name in <code>apps/frontend/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend'</pre><p>Modify <code>dashboard/settings.py</code></p><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="">INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ]</pre><p>Modify <code>dashboard/urls.py</code></p><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="">from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ]</pre><h3 class="wp-block-heading">Create view</h3><p>Modify view in <code>apps/frontend/views.py</code></p><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="">from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html'</pre><h3 class="wp-block-heading">Create template for frontend View</h3><p>Create template file <code>apps/frontend/templates/frontend/index.html</code></p><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=""><h1> Frontend: Let's get started </h1></pre><h3 class="wp-block-heading">Add template folder to configuration</h3><p>In <kbd>dashboard/settings.py</kbd>, add template folder to TEMPLATES</p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ]</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="624" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20624%20186'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png" alt="" class="wp-image-8442 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png 624w, https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2-300x89.png 300w" data-sizes="auto, (max-width: 624px) 100vw, 624px"></figure></div><h2 class="wp-block-heading">Current folder Structure</h2><p>So far, we have the following folder structure</p><figure class="wp-block-image size-full"><img decoding="async" width="690" height="982" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20690%20982'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png" alt="" class="wp-image-9691 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png 690w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001-211x300.png 211w" data-sizes="auto, (max-width: 690px) 100vw, 690px"></figure><h2 class="wp-block-heading">Prepare for administrate your project</h2><h3 class="wp-block-heading">Create admin user</h3><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="">❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully.</pre><h2 class="wp-block-heading">Add Bootstrap support</h2><p>Download requires files for Bootstrap, jQuery and PopperJS.</p><p>Or download <a href="https://via-internet.de/blog/wp-content/uploads/2021/10/static.zip">this </a>prepared archiv and unzip the files unter <code>dashboard</code>.</p><p>Run the scripts in <kbd>$DASHBOARD_ROOT</kbd></p><p>Hint: You need to install <a href="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3" data-type="link" data-id="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3">PowerShell</a> before running the scripts.</p><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 > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1</pre><p><kbd>download_bootstrap.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' </pre><p><kbd>download_jquery.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map</pre><p><kbd>download_popperjs.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js</pre><p>Finally, the folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="474" height="660" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20474%20660'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png" alt="" class="wp-image-9679 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png 474w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008-215x300.png 215w" data-sizes="auto, (max-width: 474px) 100vw, 474px"></figure><h3 class="wp-block-heading">Create site templates in <code>dashboard/templates/site</code></h3><h3 class="wp-block-heading">Add templates path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470508427730698282">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="5" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ...</pre><h3 class="wp-block-heading"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-2" id="gwmw-15824470715450370185521">Add static</gwmw> path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470715451132153545">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><p>Add as first line</p><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="">import os</pre><p>Then add / replace at <kbd>STATIC_URL=...</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="2-4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ]</pre><h2 class="wp-block-heading">Modify frontend view template</h2><p>File <code>dashboard/apps/frontend/templates/index.html</code></p><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="">{ { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { <p>File <kbd>dashboard/apps/frontend/templates/site/base.html</kbd></p> <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="">{ <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html></pre><h2 class="wp-block-heading">View current status of project</h2><figure class="wp-block-image size-large"><img decoding="async" width="1024" height="778" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20778'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png" alt="" class="wp-image-9682 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-300x228.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-768x583.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1536x1167.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap.png 1714w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure><h2 class="wp-block-heading">Final Result</h2><p>The final result could be found <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project" data-type="link" data-id="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project">here</a>.</p><h2 class="wp-block-heading">Add dashboard from an existing template</h2><p>For a first start, we will use this <a href="https://startbootstrap.com/previews/sb-admin-2/"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824470188863680783027">sb</gwmw>-admin-2 dashboard</a> template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>:</p><figure class="wp-block-image size-full"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/61_dashboard.png" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><h2 class="wp-block-heading">Download required files</h2><p>Bootstrap templates consist of at least 3 different types of files</p><ul class="wp-block-list"><li>main index.html page, responsible for collection all elements and set up your page</li><li>CSS files defining the style of your page</li><li>JavaScript files, containing needed frameworks and code</li></ul><p>So, first start by downloading the sample template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>. Be sure, you start in our project root folder:</p><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="">❯ cd $DASHBOARD_ROOT</pre><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="">❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 </pre><p>Next, find out, what we need for our template in addition to the file <kbd>index.html</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)="</pre><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script></pre><p>That’s a lot of additional files.</p><p>To keep the file structure consistent, these files should be stored under the <kbd>dashboard/static</kbd> folder (same as the bootstrap files before).</p><p>To achieve this, there are <gwmw class="ginger-module-highlighter-mistake-type-2" id="gwmw-15824469384628631344488">two possi</gwmw>bilities:</p><ul class="wp-block-list"><li>Create desired folder and copy each of the source files to the destination folder</li><li><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824469457060378385283">Copy</gwmw> the complete static folder from the <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap">Github Repository</a> for this post.</li></ul><p>We use the second option to keep the focus on creating our dashboard.<gwmw style="display:none;"></gwmw></p><p>So, first, clone the repository:</p><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="">cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap</pre><p>Then, copy the requred files</p><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="">cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard</pre><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 -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard</pre><p>Having everything needed for the dashboard template, the next step is to modify the front-end template</p><p>File <code>dashboard/apps/frontend/templates/frontend/index.html</code></p> <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="">{ { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div></pre></pre></div></div></div></div></article><footer class="site-footer"><div class="container"><div class="row footer-sidebar"><div class="col-lg-3 col-md-6 col-sm-12"><aside id="categories-1" class="widget widget_categories wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Categories</h4><form action="https://via-internet.de/blog" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name="cat" id="cat" class="postform"><option value="-1">Select Category</option><option class="level-0" value="2">3D Printing (1)</option><option class="level-0" value="168">AI (3)</option><option class="level-0" value="1">Allgemein (32)</option><option class="level-0" value="151">Anaconda (1)</option><option class="level-0" value="4">Apache (3)</option><option class="level-0" value="5">Apache Spark (3)</option><option class="level-0" value="6">Apache Zeppelin (1)</option><option class="level-0" value="7">Arduino (1)</option><option class="level-0" value="160">Astro (3)</option><option class="level-0" value="9">Azure (7)</option><option class="level-1" value="20"> Databricks (4)</option><option class="level-1" value="87"> Widgets (1)</option><option class="level-0" value="158">BeautifulSoup (1)</option><option class="level-0" value="10">Bootstrap (6)</option><option class="level-0" value="12">Capacitor (1)</option><option class="level-0" value="13">CI/CD (3)</option><option class="level-1" value="40"> Jenkins (3)</option><option class="level-0" value="153">Container (9)</option><option class="level-1" value="22"> Docker (8)</option><option class="level-2" value="43"> Kubernetes (2)</option><option class="level-1" value="154"> Podman (1)</option><option class="level-0" value="16">Cookbook (30)</option><option class="level-0" value="17">CSS (3)</option><option class="level-0" value="135">Daily (6)</option><option class="level-0" value="144">Dart (1)</option><option class="level-0" value="18">Data Science (1)</option><option class="level-0" value="19">Database (2)</option><option class="level-1" value="50"> MySQL (1)</option><option class="level-1" value="58"> PostgreSQL (1)</option><option class="level-0" value="96">FastAPI (1)</option><option class="level-0" value="27">Generell (1)</option><option class="level-0" value="28">Git und Github (6)</option><option class="level-0" value="157">Grafana (1)</option><option class="level-0" value="31">Hadoop (1)</option><option class="level-0" value="163">Hexo (1)</option><option class="level-0" value="33">Homebrew (1)</option><option class="level-0" value="165">HyperDiv (1)</option><option class="level-0" value="34">Ionic 3 (5)</option><option class="level-0" value="35">Ionic 4 (9)</option><option class="level-0" value="39">Jekyll (1)</option><option class="level-0" value="41">Jupyter (2)</option><option class="level-0" value="42">Keycloak (3)</option><option class="level-0" value="137">Languages (60)</option><option class="level-1" value="14"> ClojureScript (1)</option><option class="level-1" value="15"> Cobol (1)</option><option class="level-1" value="24"> Erlang (2)</option><option class="level-2" value="94"> Elixir (2)</option><option class="level-1" value="149"> F# (2)</option><option class="level-1" value="29"> Go (1)</option><option class="level-1" value="30"> Groovy (1)</option><option class="level-1" value="32"> Haskell (3)</option><option class="level-1" value="36"> iPython (1)</option><option class="level-1" value="37"> Java (5)</option><option class="level-1" value="38"> Javascript (7)</option><option class="level-1" value="56"> Perl (1)</option><option class="level-1" value="57"> PHP (13)</option><option class="level-1" value="63"> PureScript (1)</option><option class="level-1" value="65"> Python (19)</option><option class="level-2" value="141"> PIP (1)</option><option class="level-1" value="68"> Rust (3)</option><option class="level-1" value="75"> Swift (1)</option><option class="level-0" value="99">Laravel (16)</option><option class="level-0" value="44">Learning (5)</option><option class="level-0" value="45">Linux (1)</option><option class="level-0" value="46">macOS (1)</option><option class="level-0" value="47">matter.js (1)</option><option class="level-0" value="48">Maven (1)</option><option class="level-0" value="49">Mobile Development (9)</option><option class="level-0" value="51">NestJS (1)</option><option class="level-0" value="156">Nicepage (1)</option><option class="level-0" value="52">Node.js (2)</option><option class="level-0" value="53">Office 365 (2)</option><option class="level-1" value="95"> Excel (1)</option><option class="level-1" value="81"> VBA (1)</option><option class="level-1" value="88"> Word (1)</option><option class="level-0" value="164">Ollama (4)</option><option class="level-0" value="54">OpenSCAD (1)</option><option class="level-0" value="159">Power Apps (1)</option><option class="level-0" value="59">Power BI (4)</option><option class="level-0" value="146">Power BI Visuals (3)</option><option class="level-0" value="61">Power Query (3)</option><option class="level-0" value="62">Protractor (1)</option><option class="level-0" value="64">PySpark (2)</option><option class="level-0" value="69">rxjs (2)</option><option class="level-0" value="70">SAS (3)</option><option class="level-0" value="71">Selenium (1)</option><option class="level-0" value="72">Shell (10)</option><option class="level-1" value="92"> Bash (1)</option><option class="level-1" value="102"> Power Shell (8)</option><option class="level-0" value="73">Smalltalk (1)</option><option class="level-0" value="74">Spring Boot (2)</option><option class="level-0" value="166">Static-Site-Generator (1)</option><option class="level-1" value="167"> Hugo (1)</option><option class="level-0" value="76">TDD (1)</option><option class="level-1" value="77"> Testing / Unittests (1)</option><option class="level-0" value="145">Troubleshooting (3)</option><option class="level-0" value="126">Tutorial (1)</option><option class="level-0" value="78">Ubuntu (1)</option><option class="level-0" value="79">Uncategorized (7)</option><option class="level-0" value="129">Unix (1)</option><option class="level-0" value="80">Vagrant (1)</option><option class="level-0" value="82">Virtual Machine (2)</option><option class="level-0" value="83">Virtualbox (2)</option><option class="level-0" value="84">Visual Studio Code (4)</option><option class="level-0" value="85">Visualisation (3)</option><option class="level-1" value="93"> D3.js (2)</option><option class="level-1" value="100"> p5.js (1)</option><option class="level-0" value="86">Web Framework (40)</option><option class="level-1" value="90"> Angular (10)</option><option class="level-1" value="91"> AngularJS (1)</option><option class="level-1" value="21"> Django (5)</option><option class="level-1" value="97"> Flask (1)</option><option class="level-1" value="26"> Flutter (6)</option><option class="level-1" value="98"> Ionic (13)</option><option class="level-1" value="66"> React (3)</option><option class="level-1" value="148"> React Native (1)</option><option class="level-1" value="67"> ReactJS (3)</option><option class="level-1" value="103"> VUE (2)</option><option class="level-0" value="143">Windows Subsystem for Linux (1)</option><option class="level-0" value="89">Wordpress (2)</option><option class="level-0" value="155">XAMPP (1)</option> </select></form><script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJjYXQiICk7CglmdW5jdGlvbiBvbkNhdENoYW5nZSgpIHsKCQlpZiAoIGRyb3Bkb3duLm9wdGlvbnNbIGRyb3Bkb3duLnNlbGVjdGVkSW5kZXggXS52YWx1ZSA+IDAgKSB7CgkJCWRyb3Bkb3duLnBhcmVudE5vZGUuc3VibWl0KCk7CgkJfQoJfQoJZHJvcGRvd24ub25jaGFuZ2UgPSBvbkNhdENoYW5nZTsKfSkoKTsKCi8qIF1dPiAqLwo="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="archives-1" class="widget widget_archive wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Archives</h4> <label class="screen-reader-text" for="archives-dropdown-1">Archives</label> <select id="archives-dropdown-1" name="archive-dropdown"><option value="">Select Month</option><option value="https://via-internet.de/blog/2024/11/"> November 2024</option><option value="https://via-internet.de/blog/2024/10/"> October 2024</option><option value="https://via-internet.de/blog/2024/09/"> September 2024</option><option value="https://via-internet.de/blog/2024/07/"> July 2024</option><option value="https://via-internet.de/blog/2024/05/"> May 2024</option><option value="https://via-internet.de/blog/2024/04/"> April 2024</option><option value="https://via-internet.de/blog/2024/03/"> March 2024</option><option value="https://via-internet.de/blog/2024/01/"> January 2024</option><option value="https://via-internet.de/blog/2023/12/"> December 2023</option><option value="https://via-internet.de/blog/2023/11/"> November 2023</option><option value="https://via-internet.de/blog/2023/10/"> October 2023</option><option value="https://via-internet.de/blog/2023/09/"> September 2023</option><option value="https://via-internet.de/blog/2023/08/"> August 2023</option><option value="https://via-internet.de/blog/2023/07/"> July 2023</option><option value="https://via-internet.de/blog/2023/04/"> April 2023</option><option value="https://via-internet.de/blog/2023/03/"> March 2023</option><option value="https://via-internet.de/blog/2023/02/"> February 2023</option><option value="https://via-internet.de/blog/2022/11/"> November 2022</option><option value="https://via-internet.de/blog/2022/10/"> October 2022</option><option value="https://via-internet.de/blog/2022/07/"> July 2022</option><option value="https://via-internet.de/blog/2022/06/"> June 2022</option><option value="https://via-internet.de/blog/2022/05/"> May 2022</option><option value="https://via-internet.de/blog/2022/04/"> April 2022</option><option value="https://via-internet.de/blog/2022/03/"> March 2022</option><option value="https://via-internet.de/blog/2022/01/"> January 2022</option><option value="https://via-internet.de/blog/2021/12/"> December 2021</option><option value="https://via-internet.de/blog/2021/11/"> November 2021</option><option value="https://via-internet.de/blog/2021/10/"> October 2021</option><option value="https://via-internet.de/blog/2021/08/"> August 2021</option><option value="https://via-internet.de/blog/2021/07/"> July 2021</option><option value="https://via-internet.de/blog/2021/06/"> June 2021</option><option value="https://via-internet.de/blog/2021/05/"> May 2021</option><option value="https://via-internet.de/blog/2021/02/"> February 2021</option><option value="https://via-internet.de/blog/2021/01/"> January 2021</option><option value="https://via-internet.de/blog/2020/12/"> December 2020</option><option value="https://via-internet.de/blog/2020/11/"> November 2020</option><option value="https://via-internet.de/blog/2020/10/"> October 2020</option><option value="https://via-internet.de/blog/2020/09/"> September 2020</option><option value="https://via-internet.de/blog/2020/08/"> August 2020</option><option value="https://via-internet.de/blog/2020/07/"> July 2020</option><option value="https://via-internet.de/blog/2020/06/"> June 2020</option><option value="https://via-internet.de/blog/2020/05/"> May 2020</option><option value="https://via-internet.de/blog/2020/04/"> April 2020</option><option value="https://via-internet.de/blog/2020/03/"> March 2020</option><option value="https://via-internet.de/blog/2020/02/" selected="selected"> February 2020</option><option value="https://via-internet.de/blog/2020/01/"> January 2020</option><option value="https://via-internet.de/blog/2019/12/"> December 2019</option><option value="https://via-internet.de/blog/2019/09/"> September 2019</option><option value="https://via-internet.de/blog/2019/08/"> August 2019</option><option value="https://via-internet.de/blog/2019/07/"> July 2019</option><option value="https://via-internet.de/blog/2019/06/"> June 2019</option><option value="https://via-internet.de/blog/2019/05/"> May 2019</option><option value="https://via-internet.de/blog/2019/04/"> April 2019</option><option value="https://via-internet.de/blog/2019/03/"> March 2019</option><option value="https://via-internet.de/blog/2019/02/"> February 2019</option><option value="https://via-internet.de/blog/2019/01/"> January 2019</option><option value="https://via-internet.de/blog/2018/12/"> December 2018</option><option value="https://via-internet.de/blog/2018/11/"> November 2018</option><option value="https://via-internet.de/blog/2018/09/"> September 2018</option><option value="https://via-internet.de/blog/2018/08/"> August 2018</option><option value="https://via-internet.de/blog/2018/07/"> July 2018</option><option value="https://via-internet.de/blog/2018/03/"> March 2018</option><option value="https://via-internet.de/blog/2018/02/"> February 2018</option><option value="https://via-internet.de/blog/2018/01/"> January 2018</option><option value="https://via-internet.de/blog/2017/12/"> December 2017</option><option value="https://via-internet.de/blog/2017/07/"> July 2017</option><option value="https://via-internet.de/blog/2017/05/"> May 2017</option><option value="https://via-internet.de/blog/2017/03/"> March 2017</option><option value="https://via-internet.de/blog/2017/02/"> February 2017</option><option value="https://via-internet.de/blog/2016/12/"> December 2016</option><option value="https://via-internet.de/blog/2016/11/"> November 2016</option><option value="https://via-internet.de/blog/2016/10/"> October 2016</option> </select> <script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJhcmNoaXZlcy1kcm9wZG93bi0xIiApOwoJZnVuY3Rpb24gb25TZWxlY3RDaGFuZ2UoKSB7CgkJaWYgKCBkcm9wZG93bi5vcHRpb25zWyBkcm9wZG93bi5zZWxlY3RlZEluZGV4IF0udmFsdWUgIT09ICcnICkgewoJCQlkb2N1bWVudC5sb2NhdGlvbi5ocmVmID0gdGhpcy5vcHRpb25zWyB0aGlzLnNlbGVjdGVkSW5kZXggXS52YWx1ZTsKCQl9Cgl9Cglkcm9wZG93bi5vbmNoYW5nZSA9IG9uU2VsZWN0Q2hhbmdlOwp9KSgpOwoKLyogXV0+ICovCg=="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="search-1" class="widget widget_search wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Search</h4><form method="get" id="searchform" class="input-group" action="https://via-internet.de/blog/"> <input type="text" class="form-control" placeholder="Search" name="s" id="s"><div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button></div></form></aside></div></div></div><div class="site-info text-center"> Copyright © 2024 | Powered by <a href="//wordpress.org/">WordPress</a> <span class="sep"> | </span> Aasta Blog theme by <a target="_blank" href="//themearile.com/">ThemeArile</a></div></footer><div class="page-scroll-up"><a href="#totop"><i class="fa fa-angle-up"></i></a></div><div id="cookie-law-info-bar" data-nosnippet="true" data-cli-style="cli-style-v2" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: inherit; bottom: 0px; position: fixed;"><span><div class="cli-bar-container cli-style-v2"><div class="cli-bar-message">We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.</div><div class="cli-bar-btn_container"><a role="button" class="medium cli-plugin-button cli-plugin-main-button cli_settings_button" style="margin: 0px 5px 0px 0px; color: rgb(51, 51, 51); background-color: rgb(222, 223, 224);">Cookie Settings</a><a id="wt-cli-accept-all-btn" role="button" data-cli_action="accept_all" class="wt-cli-element medium cli-plugin-button wt-cli-accept-all-btn cookie_action_close_header cli_action_button" style="color: rgb(255, 255, 255); background-color: rgb(97, 162, 41);">Accept All</a></div></div></span></div><div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); position: fixed; font-family: inherit; width: auto; bottom: 0px; right: 100px; display: none;"><span id="cookie_hdr_showagain">Manage consent</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true"><div class="cli-modal-dialog" role="document"><div class="cli-modal-content cli-bar-popup"> <button type="button" class="cli-modal-close" id="cliModalClose"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg> <span class="wt-cli-sr-only">Close</span> </button><div class="cli-modal-body"><div class="cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-privacy-overview"><h4>Privacy Overview</h4><div class="cli-privacy-content"><div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ...</div></div> <a class="cli-privacy-readmore" aria-label="Show more" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a></div></div><div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container"><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab"> Necessary </a><div class="wt-cli-necessary-checkbox"> <input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked"> <label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label></div> <span class="cli-necessary-caption">Always Enabled</span></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="necessary"><div class="wt-cli-cookie-description"> Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.<table class="cookielawinfo-row-cat-table cookielawinfo-winter"><thead><tr><th class="cookielawinfo-column-1">Cookie</th><th class="cookielawinfo-column-3">Duration</th><th class="cookielawinfo-column-4">Description</th></tr></thead><tbody><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-analytics</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-functional</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-necessary</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-others</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-performance</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">viewed_cookie_policy</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.</td></tr></tbody></table></div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="functional" data-toggle="cli-toggle-tab"> Functional </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-functional" class="cli-user-preference-checkbox" data-id="checkbox-functional"> <label for="wt-cli-checkbox-functional" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Functional</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="functional"><div class="wt-cli-cookie-description"> Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="performance" data-toggle="cli-toggle-tab"> Performance </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-performance" class="cli-user-preference-checkbox" data-id="checkbox-performance"> <label for="wt-cli-checkbox-performance" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Performance</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="performance"><div class="wt-cli-cookie-description"> Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="analytics" data-toggle="cli-toggle-tab"> Analytics </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-analytics" class="cli-user-preference-checkbox" data-id="checkbox-analytics"> <label for="wt-cli-checkbox-analytics" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Analytics</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="analytics"><div class="wt-cli-cookie-description"> Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="advertisement" data-toggle="cli-toggle-tab"> Advertisement </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-advertisement" class="cli-user-preference-checkbox" data-id="checkbox-advertisement"> <label for="wt-cli-checkbox-advertisement" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Advertisement</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="advertisement"><div class="wt-cli-cookie-description"> Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="others" data-toggle="cli-toggle-tab"> Others </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-others" class="cli-user-preference-checkbox" data-id="checkbox-others"> <label for="wt-cli-checkbox-others" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Others</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="others"><div class="wt-cli-cookie-description"> Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.</div></div></div></div></div></div></div></div><div class="cli-modal-footer"><div class="wt-cli-element cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-tab-footer wt-cli-privacy-overview-actions"> <a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a></div></div></div></div></div></div></div></div><div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div><div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div> <script defer="" src="data:text/javascript;base64,DQogICAgICAgICAgICBmdW5jdGlvbiBfa2F0ZXhSZW5kZXIocm9vdEVsZW1lbnQpIHsNCiAgICAgICAgICAgICAgICBjb25zdCBlbGVzID0gcm9vdEVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgiLmthdGV4LWVxOm5vdCgua2F0ZXgtcmVuZGVyZWQpIik7DQogICAgICAgICAgICAgICAgZm9yKGxldCBpZHg9MDsgaWR4IDwgZWxlcy5sZW5ndGg7IGlkeCsrKSB7DQogICAgICAgICAgICAgICAgICAgIGNvbnN0IGVsZSA9IGVsZXNbaWR4XTsNCiAgICAgICAgICAgICAgICAgICAgZWxlLmNsYXNzTGlzdC5hZGQoImthdGV4LXJlbmRlcmVkIik7DQogICAgICAgICAgICAgICAgICAgIHRyeSB7DQogICAgICAgICAgICAgICAgICAgICAgICBrYXRleC5yZW5kZXIoDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxlLnRleHRDb250ZW50LA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZSwNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXlNb2RlOiBlbGUuZ2V0QXR0cmlidXRlKCJkYXRhLWthdGV4LWRpc3BsYXkiKSA9PT0gJ3RydWUnLA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aHJvd09uRXJyb3I6IGZhbHNlDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgKTsNCiAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChuKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUuc3R5bGUuY29sb3I9InJlZCI7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUudGV4dENvbnRlbnQgPSBuLm1lc3NhZ2U7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGZ1bmN0aW9uIGthdGV4UmVuZGVyKCkgew0KICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihkb2N1bWVudCk7DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoIkRPTUNvbnRlbnRMb2FkZWQiLCBmdW5jdGlvbigpIHsNCiAgICAgICAgICAgICAgICBrYXRleFJlbmRlcigpOw0KDQogICAgICAgICAgICAgICAgLy8gUGVyZm9ybSBhIEthVGVYIHJlbmRlcmluZyBzdGVwIHdoZW4gdGhlIERPTSBpcyBtdXRhdGVkLg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcihmdW5jdGlvbihtdXRhdGlvbnMpIHsNCiAgICAgICAgICAgICAgICAgICAgW10uZm9yRWFjaC5jYWxsKG11dGF0aW9ucywgZnVuY3Rpb24obXV0YXRpb24pIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmIChtdXRhdGlvbi50YXJnZXQgJiYgbXV0YXRpb24udGFyZ2V0IGluc3RhbmNlb2YgRWxlbWVudCkgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihtdXRhdGlvbi50YXJnZXQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgICAgICB9KTsNCg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2YXRpb25Db25maWcgPSB7DQogICAgICAgICAgICAgICAgICAgIHN1YnRyZWU6IHRydWUsDQogICAgICAgICAgICAgICAgICAgIGNoaWxkTGlzdDogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgY2hhcmFjdGVyRGF0YTogdHJ1ZQ0KICAgICAgICAgICAgICAgIH07DQoNCiAgICAgICAgICAgICAgICBrYXRleE9ic2VydmVyLm9ic2VydmUoZG9jdW1lbnQuYm9keSwga2F0ZXhPYnNlcnZhdGlvbkNvbmZpZyk7DQogICAgICAgICAgICB9KTsNCg0KICAgICAgICA="></script> <style type="text/css">.theme-testimonial { background-image: url(https://via-internet.de/blog/wp-content/themes/aasta-blog/assets/img/theme-bg.jpg); background-size: cover; background-position: center center; }</style> <script defer="" src="data:text/javascript;base64,CgkvLyBUaGlzIEpTIGFkZGVkIGZvciB0aGUgVG9nZ2xlIGJ1dHRvbiB0byB3b3JrIHdpdGggdGhlIGZvY3VzIGVsZW1lbnQuCgkJaWYgKHdpbmRvdy5pbm5lcldpZHRoIDwgOTkyKSB7CgkJCWRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBmdW5jdGlvbihlKSB7CgkJCWxldCBpc1RhYlByZXNzZWQgPSBlLmtleSA9PT0gJ1RhYicgfHwgZS5rZXlDb2RlID09PSA5OwoJCQkJaWYgKCFpc1RhYlByZXNzZWQpIHsKCQkJCQlyZXR1cm47CgkJCQl9CgkJCQkKCQkJY29uc3QgIGZvY3VzYWJsZUVsZW1lbnRzID0KCQkJCSdidXR0b24sIFtocmVmXSwgaW5wdXQsIHNlbGVjdCwgdGV4dGFyZWEsIFt0YWJpbmRleF06bm90KFt0YWJpbmRleD0iLTEiXSknOwoJCQljb25zdCBtb2RhbCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5uYXZiYXIubmF2YmFyLWV4cGFuZC1sZycpOyAvLyBzZWxlY3QgdGhlIG1vZGFsIGJ5IGl0J3MgaWQKCgkJCWNvbnN0IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCA9IG1vZGFsLnF1ZXJ5U2VsZWN0b3JBbGwoZm9jdXNhYmxlRWxlbWVudHMpWzBdOyAvLyBnZXQgZmlyc3QgZWxlbWVudCB0byBiZSBmb2N1c2VkIGluc2lkZSBtb2RhbAoJCQljb25zdCBmb2N1c2FibGVDb250ZW50ID0gbW9kYWwucXVlcnlTZWxlY3RvckFsbChmb2N1c2FibGVFbGVtZW50cyk7CgkJCWNvbnN0IGxhc3RGb2N1c2FibGVFbGVtZW50ID0gZm9jdXNhYmxlQ29udGVudFtmb2N1c2FibGVDb250ZW50Lmxlbmd0aCAtIDFdOyAvLyBnZXQgbGFzdCBlbGVtZW50IHRvIGJlIGZvY3VzZWQgaW5zaWRlIG1vZGFsCgoJCQkgIGlmIChlLnNoaWZ0S2V5KSB7IC8vIGlmIHNoaWZ0IGtleSBwcmVzc2VkIGZvciBzaGlmdCArIHRhYiBjb21iaW5hdGlvbgoJCQkJaWYgKGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQgPT09IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCkgewoJCQkJICBsYXN0Rm9jdXNhYmxlRWxlbWVudC5mb2N1cygpOyAvLyBhZGQgZm9jdXMgZm9yIHRoZSBsYXN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsKCQkJCX0KCQkJICB9IGVsc2UgeyAvLyBpZiB0YWIga2V5IGlzIHByZXNzZWQKCQkJCWlmIChkb2N1bWVudC5hY3RpdmVFbGVtZW50ID09PSBsYXN0Rm9jdXNhYmxlRWxlbWVudCkgeyAvLyBpZiBmb2N1c2VkIGhhcyByZWFjaGVkIHRvIGxhc3QgZm9jdXNhYmxlIGVsZW1lbnQgdGhlbiBmb2N1cyBmaXJzdCBmb2N1c2FibGUgZWxlbWVudCBhZnRlciBwcmVzc2luZyB0YWIKCQkJCSAgZmlyc3RGb2N1c2FibGVFbGVtZW50LmZvY3VzKCk7IC8vIGFkZCBmb2N1cyBmb3IgdGhlIGZpcnN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsJCQkgIAoJCQkJfQoJCQkgIH0KCgkJCX0pOwoJCX0K"></script> <script defer="" src="data:text/javascript;base64,CiAgICAgICAgbmV3Q29udGFpbmVyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3BhbicpOwogICAgICAgIG5ld0NvbnRhaW5lci5zdHlsZS5zZXRQcm9wZXJ0eSgnZGlzcGxheScsJ25vbmUnLCcnKTsKICAgICAgICBuZXdOb2RlICAgICAgICAgICA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NjcmlwdCcpOwogICAgICAgIG5ld05vZGUudHlwZSAgICAgID0gJ21hdGgvdGV4JzsKICAgICAgICBuZXdOb2RlLmlubmVySFRNTCA9ICdcXG5ld2NvbW1hbmR7XFxlcHN9e1xcdmFyZXBzaWxvbn1cblxcbmV3Y29tbWFuZHtcXFJSfXtcXG1hdGhiYntSfX1cblxcbmV3Y29tbWFuZHtcXHJkfXtcXG9wZXJhdG9ybmFtZXtkfX1cblxcbmV3Y29tbWFuZHtcXHNldH1bMV17XFxsZWZ0XFx7IzFcXHJpZ2h0XFx9fSc7CiAgICAgICAgbmV3Q29udGFpbmVyLmFwcGVuZENoaWxkKG5ld05vZGUpOwogICAgICAgIGRvY3VtZW50LmJvZHkuaW5zZXJ0QmVmb3JlKG5ld0NvbnRhaW5lcixkb2N1bWVudC5ib2R5LmZpcnN0Q2hpbGQpOwogICAgICAgIA=="></script> <script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], displayMath: [['$$', '$$'], ["\\[", "\\]"]], processEscapes: true }, TeX: { equationNumbers: {autoNumber: "AMS", useLabelIds: true} }, });</script> <link rel="stylesheet" id="cookie-law-info-table-css" href="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_26b4f0c3c1bcf76291fa4952fb7f04fb.php?ver=3.2.8" type="text/css" media="all"> <script defer="" id="toc-front-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgdG9jcGx1cyA9IHsidmlzaWJpbGl0eV9zaG93IjoiQW56ZWlnZW4iLCJ2aXNpYmlsaXR5X2hpZGUiOiJBdXNibGVuZGVuIiwidmlzaWJpbGl0eV9oaWRlX2J5X2RlZmF1bHQiOiIxIiwid2lkdGgiOiJBdXRvIn07Ci8qIF1dPiAqLwo="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_93d421fd7576b0ca9c359ffe2fa16113.php?ver=20151215" id="aasta-skip-link-focus-fix-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.7.2" id="katex-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=UnpSS38vU0joHj5" id="enlighterjs-js"></script> <script defer="" id="enlighterjs-js-after" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwohZnVuY3Rpb24oZSxuKXtpZigidW5kZWZpbmVkIiE9dHlwZW9mIEVubGlnaHRlckpTKXt2YXIgbz17InNlbGVjdG9ycyI6eyJibG9jayI6InByZS5FbmxpZ2h0ZXJKU1JBVyIsImlubGluZSI6ImNvZGUuRW5saWdodGVySlNSQVcifSwib3B0aW9ucyI6eyJpbmRlbnQiOjQsImFtcGVyc2FuZENsZWFudXAiOnRydWUsImxpbmVob3ZlciI6dHJ1ZSwicmF3Y29kZURiY2xpY2siOnRydWUsInRleHRPdmVyZmxvdyI6ImJyZWFrIiwibGluZW51bWJlcnMiOmZhbHNlLCJ0aGVtZSI6ImNsYXNzaWMiLCJsYW5ndWFnZSI6ImdlbmVyaWMiLCJyZXRhaW5Dc3NDbGFzc2VzIjpmYWxzZSwiY29sbGFwc2UiOmZhbHNlLCJ0b29sYmFyT3V0ZXIiOiIiLCJ0b29sYmFyVG9wIjoie0JUTl9SQVd9e0JUTl9DT1BZfXtCVE5fV0lORE9XfXtCVE5fV0VCU0lURX0iLCJ0b29sYmFyQm90dG9tIjoiIn19OyhlLkVubGlnaHRlckpTSU5JVD1mdW5jdGlvbigpe0VubGlnaHRlckpTLmluaXQoby5zZWxlY3RvcnMuYmxvY2ssby5zZWxlY3RvcnMuaW5saW5lLG8ub3B0aW9ucyl9KSgpfWVsc2V7KG4mJihuLmVycm9yfHxuLmxvZyl8fGZ1bmN0aW9uKCl7fSkoIkVycm9yOiBFbmxpZ2h0ZXJKUyByZXNvdXJjZXMgbm90IGxvYWRlZCB5ZXQhIil9fSh3aW5kb3csY29uc29sZSk7Ci8qIF1dPiAqLwo="></script> <script type="text/javascript" id="jetpack-stats-js-before">_stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"195943667\",\"post\":\"0\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]); _stq.push([ "clickTrackerInit", "195943667", "0" ]);</script> <script type="text/javascript" src="https://stats.wp.com/e-202510.js" id="jetpack-stats-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="gt_widget_script_62673750-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['62673750'] = {"default_language":"de","languages":["de","en","fr","zh-CN","nl","it","es","da","pt"],"url_structure":"none","native_language_names":1,"flag_style":"2d","flag_size":24,"wrapper_selector":"#gtranslate_menu_wrapper_37060","alt_flags":[],"switcher_open_direction":"top","switcher_horizontal_position":"inline","switcher_text_color":"#666","switcher_arrow_color":"#666","switcher_border_color":"#ccc","switcher_background_color":"#fff","switcher_background_shadow_color":"#efefef","switcher_background_hover_color":"#fff","dropdown_text_color":"#000","dropdown_hover_color":"#fff","dropdown_background_color":"#eee","flags_location":"\/blog\/wp-content\/plugins\/gtranslate\/flags\/"};</script><script src="https://via-internet.de/blog/wp-content/plugins/gtranslate/js/dwf.js?ver=6.7.2" data-no-optimize="1" data-no-minify="1" data-gt-orig-url="/blog/2020/02/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="62673750" defer=""></script><script defer="" id="wpcd-scripts-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgd3BjZGFqYXggPSB7ImFqYXh1cmwiOiJodHRwczpcL1wvdmlhLWludGVybmV0LmRlXC9ibG9nXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAifTsKLyogXV0+ICovCg=="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_231b95969d2321feeaab8fdd8121442a.php" id="wpcd-scripts-js"></script> <script defer="" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js&ver=2.7.5" id="mathjax-js"></script> <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async="" src="https://via-internet.de/blog/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js"></script> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Page Caching using Disk: Enhanced Lazy Loading Database Caching 2/163 queries in 0.254 seconds using Disk Served from: via-internet.de @ 2025-03-08 07:08:06 by W3 Total Cache --></pre> echo "{ { { Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter cp base.html dashboard/apps/components/buttons/templates/buttons cp base.html dashboard/apps/components/cards/templates/cards cp base.html dashboard/apps/pages/blank/templates/blank cp base.html dashboard/apps/pages/charts/templates/charts cp base.html dashboard/apps/pages/login/templates/login cp base.html dashboard/apps/pages/pagenotfound/templates/pagenotfound cp base.html dashboard/apps/pages/password/templates/password cp base.html dashboard/apps/pages/register/templates/register cp base.html dashboard/apps/pages/tables/templates/tables cp base.html dashboard/apps/utilities/animations/templates/animations cp base.html dashboard/apps/utilities/borders/templates/borders cp base.html dashboard/apps/utilities/colors/templates/colors cp base.html dashboard/apps/utilities/others/templates/others cp base.html dashboard/apps/components/buttons/templates/buttons cp base.html dashboard/apps/components/cards/templates/cards cp base.html dashboard/apps/pages/blank/templates/blank cp base.html dashboard/apps/pages/charts/templates/charts cp base.html dashboard/apps/pages/login/templates/login cp base.html dashboard/apps/pages/pagenotfound/templates/pagenotfound cp base.html dashboard/apps/pages/password/templates/password cp base.html dashboard/apps/pages/register/templates/register cp base.html dashboard/apps/pages/tables/templates/tables cp base.html dashboard/apps/utilities/animations/templates/animations cp base.html dashboard/apps/utilities/borders/templates/borders cp base.html dashboard/apps/utilities/colors/templates/colors cp base.html dashboard/apps/utilities/others/templates/others cp base.html dashboard/apps/components/buttons/templates/buttons cp base.html dashboard/apps/components/cards/templates/cards cp base.html dashboard/apps/pages/blank/templates/blank cp base.html dashboard/apps/pages/charts/templates/charts cp base.html dashboard/apps/pages/login/templates/login cp base.html dashboard/apps/pages/pagenotfound/templates/pagenotfound cp base.html dashboard/apps/pages/password/templates/password cp base.html dashboard/apps/pages/register/templates/register cp base.html dashboard/apps/pages/tables/templates/tables cp base.html dashboard/apps/utilities/animations/templates/animations cp base.html dashboard/apps/utilities/borders/templates/borders cp base.html dashboard/apps/utilities/colors/templates/colors cp base.html dashboard/apps/utilities/others/templates/others Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter rm base.html rm base.html rm base.html Each of the folders has the same structure, for example the buttons component. We will delete some unnecessary files Replacing Projects with dynamic data Replacing the static parts with dynamic content could be achieved by the following approach: Identify the dynamic parts Move these parts from the site template into the view template base.html of the component Modify frontend view.py to generate dynamic content from data The steps are the same for all components (all items of the side menu). Find the Identify dynamic parts in template Create templates for side menu pages For every side menu item, their is a corresponding html file in the install folder of the sb-admin-2 template: Remember the environment variable we create in part 1 for the start of our project Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter DASHBOARD_ROOT=$(pwd) DASHBOARD_ROOT=$(pwd) DASHBOARD_ROOT=$(pwd) Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter cd $DASHBOARD_ROOT find dashboard/apps install/sb-admin-2 -name *.html cd $DASHBOARD_ROOT find dashboard/apps install/sb-admin-2 -name *.html cd $DASHBOARD_ROOT find dashboard/apps install/sb-admin-2 -name *.html Each template file base.html has a corresponding html file unter sb-admin-2. Look at the following table to find the mapping: apps/components/buttons/templates/buttons/base.html sb-admin-2/buttons.html apps/components/cards/templates/cards/base.html sb-admin-2/cards.html apps/pages/blank/templates/blank/base.html sb-admin-2/blank.html apps/pages/charts/templates/charts/base.html sb-admin-2/charts.html apps/pages/login/templates/login/base.html sb-admin-2/login.html apps/pages/pagenotfound/templates/pagenotfound/base.html sb-admin-2/404.html apps/pages/password/templates/password/base.html sb-admin-2/forgot-password.html apps/pages/register/templates/register/base.html sb-admin-2/register.html apps/pages/register/templates/tables/base.html sb-admin-2/tables.html apps/utilities/animations/templates/animations/base.html sb-admin-2/utilities-animation.html apps/utilities/borders/templates/borders/base.html sb-admin-2/utilities-border.html apps/utilities/colors/templates/colors/base.html sb-admin-2/utilities-color.html apps/utilities/others/templates/others/base.html sb-admin-2/utilities-html Each template base.html should have the following content: Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter { { { <p>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> <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 class IndexView(generic.TemplateView): template_name = 'buttons/base.html'</pre><p>So, for each template file, we have to</p><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><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=""> <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --></pre><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure><div class="post-content"><div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 22<small class="months">Feb</small></time></a> </span><div class="media-body"><header class="entry-header"><h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/">Django | Build a Dashboard with Django and Bootstrap: Part 2</a></h4></header><div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span></div><div class="entry-content"><p>This is Part 2 of <em>Building a Dashboard with Django and Bootstrap</em>:</p><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><h2 class="wp-block-heading">Introduction</h2><p>If you follow the first part of this blog topic, you have a running Django dashboard.</p><p>But, unfortunately, the content is still static. Let’s review the current state:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"></div></div><p>Perfect. We are done with the basic setup.</p><p>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><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>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><p>We will do this by following these steps:</p><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><h2 class="wp-block-heading">Identify dynamic parts</h2><p>How to find the parts, which are dynamic.</p><p>One way is to ask:</p><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><p>You mostly get the same answers by the question:</p><ul class="wp-block-list"><li>What are the main components of a web page (including navigation and content)</li></ul><p>For answer the first question, take a look at the current page and “name” the areas:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="563" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20563'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/02_elements_of_dashboard_page.png?fit=700%2C394&ssl=1" alt="" class="wp-image-5929 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>So, these “names” are also the answer for the 3. Question:</p><ul class="wp-block-list"><li>sidemenu</li><li>top bar</li><li>content</li></ul><p>And maybe you find additional “names”</p><ul class="wp-block-list"><li>header</li><li>footer</li><li>top menu</li><li>left and right sidebar</li></ul><h2 class="wp-block-heading">Find identified parts in template</h2><p>Next step is, to find the identified parts in our dashboard template</p><p><code>dashboard/templates/site/sb-admin-2/base.html</code></p><p>This is an easy step, because the developer of the SB Admin 2 template documented their template well:</p><figure class="wp-block-image size-large"><img decoding="async" width="2004" height="1706" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202004%201706'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/03_elements_of_dashboard_in_codepage.png?fit=700%2C596&ssl=1" alt="" class="wp-image-5932 lazy" data-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" data-sizes="auto, (max-width: 2004px) 100vw, 2004px"></figure><p>Looking into the code of the template, you will find comment lines describing the content:</p><ul class="wp-block-list"><li><code><!-- Sidebar --></code></li><li><code><!-- Topbar --></code></li><li><code><!-- Top Search --></code></li><li><code><!-- Top Navbar --></code></li><li><code><!-- Begin Page Content--></code></li></ul><p>So, it is obvious what do to next:</p><ul class="wp-block-list"><li>get the <em>dynamic</em> part (lines under)<code><!-- Begin Page Content--></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><p>This is the way, the template system of django works:</p><figure class="wp-block-image size-large"><img decoding="async" width="954" height="251" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20954%20251'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/21_combine_template_and_content_ui.png?fit=700%2C184&ssl=1" alt="" class="wp-image-5944 lazy" data-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" data-sizes="auto, (max-width: 954px) 100vw, 954px"></figure><p>Let’s explain this with a simple example: the page title</p><p>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><p>To achieve this, we have to tell our template system the following:</p><figure class="wp-block-image size-large"><img decoding="async" width="940" height="209" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20940%20209'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/22_combine_template_and_content_code.png?fit=700%2C156&ssl=1" alt="" class="wp-image-5943 lazy" data-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" data-sizes="auto, (max-width: 940px) 100vw, 940px"></figure><p>Now, we do the same with the content:</p><figure class="wp-block-image size-large"><img decoding="async" width="983" height="457" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20983%20457'%3E%3C/svg%3E" data-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&ssl=1" alt="" class="wp-image-5947 lazy" data-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" data-sizes="auto, (max-width: 983px) 100vw, 983px"></figure><p>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><p>Well, let’s make a test and try to include a different content in the dashboard template.</p><p>Change the lines, where we include the content into this:</p><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="">{ MISSING CONTENT { <p>Did you notice the other name of the content: <strong>content_missing</strong>?</p> <p>Change the template, save the file and have a look at the result:</p> <figure class="wp-block-image size-large"><img decoding="async" width="2328" height="448" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202328%20448'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/41_missing_content.png?fit=700%2C135&ssl=1" alt="" class="wp-image-5949 lazy" data-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" data-sizes="auto, (max-width: 2328px) 100vw, 2328px"></figure> <p>Change content back, so your template is working again:</p> <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="">{ MISSING CONTENT { <p>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> </pre></pre></div> </div> </div> </div> </article><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"> <figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure> <div class="post-content"> <div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 21<small class="months">Feb</small></time></a> </span> <div class="media-body"> <header class="entry-header"> <h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/">Django | Build a Dashboard with Django and Bootstrap: Part 1</a></h4> </header> <div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span> </div> <div class="entry-content"> <p>This is Part 1 of <em>Building a Dashboard with Django and Bootstrap</em>:</p> <ul class="wp-block-list"> <li><strong>Part 1: Building a base Django project</strong></li> <li><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/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/build-a-dashboard-with-django-and-bootstrap-part-4/">Part 4: Deploy Django App to Azure</a></li> </ul> <h2 class="wp-block-heading">Introduction</h2> <p>Building a complete web app isn’t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don’t using tools or framework, which helps and makes our life easier. <a href="https://www.djangoproject.com/"><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824465754606598455505">Django</gwmw></a> is one of these frameworks:</p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468379037630016661">Django</gwmw> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development</p> </blockquote> <p>So, let’s get started.</p> <h3 class="wp-block-heading">Create project</h3> <p>For subsequent steps, we will remember our starting directory </p> <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="">❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder...</pre><p>First step is to create our main Django project</p><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="">❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate</pre><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="">❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK.</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="782" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20782'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png" alt="" class="wp-image-9675 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-300x229.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-768x587.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1536x1173.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-2048x1564.png 2048w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure></div><h3 class="wp-block-heading">Create first apps</h3><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="">❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend</pre><p>The folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="970" height="436" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20970%20436'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png" alt="" class="wp-image-9690 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png 970w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-300x135.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-768x345.png 768w" data-sizes="auto, (max-width: 970px) 100vw, 970px"></figure><h2 class="wp-block-heading">Add new apps to project</h2><p>Modify name in <code>apps/core/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core'</pre><p>Modify name in <code>apps/frontend/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend'</pre><p>Modify <code>dashboard/settings.py</code></p><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="">INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ]</pre><p>Modify <code>dashboard/urls.py</code></p><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="">from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ]</pre><h3 class="wp-block-heading">Create view</h3><p>Modify view in <code>apps/frontend/views.py</code></p><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="">from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html'</pre><h3 class="wp-block-heading">Create template for frontend View</h3><p>Create template file <code>apps/frontend/templates/frontend/index.html</code></p><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=""><h1> Frontend: Let's get started </h1></pre><h3 class="wp-block-heading">Add template folder to configuration</h3><p>In <kbd>dashboard/settings.py</kbd>, add template folder to TEMPLATES</p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ]</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="624" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20624%20186'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png" alt="" class="wp-image-8442 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png 624w, https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2-300x89.png 300w" data-sizes="auto, (max-width: 624px) 100vw, 624px"></figure></div><h2 class="wp-block-heading">Current folder Structure</h2><p>So far, we have the following folder structure</p><figure class="wp-block-image size-full"><img decoding="async" width="690" height="982" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20690%20982'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png" alt="" class="wp-image-9691 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png 690w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001-211x300.png 211w" data-sizes="auto, (max-width: 690px) 100vw, 690px"></figure><h2 class="wp-block-heading">Prepare for administrate your project</h2><h3 class="wp-block-heading">Create admin user</h3><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="">❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully.</pre><h2 class="wp-block-heading">Add Bootstrap support</h2><p>Download requires files for Bootstrap, jQuery and PopperJS.</p><p>Or download <a href="https://via-internet.de/blog/wp-content/uploads/2021/10/static.zip">this </a>prepared archiv and unzip the files unter <code>dashboard</code>.</p><p>Run the scripts in <kbd>$DASHBOARD_ROOT</kbd></p><p>Hint: You need to install <a href="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3" data-type="link" data-id="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3">PowerShell</a> before running the scripts.</p><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 > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1</pre><p><kbd>download_bootstrap.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' </pre><p><kbd>download_jquery.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map</pre><p><kbd>download_popperjs.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js</pre><p>Finally, the folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="474" height="660" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20474%20660'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png" alt="" class="wp-image-9679 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png 474w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008-215x300.png 215w" data-sizes="auto, (max-width: 474px) 100vw, 474px"></figure><h3 class="wp-block-heading">Create site templates in <code>dashboard/templates/site</code></h3><h3 class="wp-block-heading">Add templates path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470508427730698282">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="5" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ...</pre><h3 class="wp-block-heading"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-2" id="gwmw-15824470715450370185521">Add static</gwmw> path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470715451132153545">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><p>Add as first line</p><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="">import os</pre><p>Then add / replace at <kbd>STATIC_URL=...</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="2-4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ]</pre><h2 class="wp-block-heading">Modify frontend view template</h2><p>File <code>dashboard/apps/frontend/templates/index.html</code></p><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="">{ { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { <p>File <kbd>dashboard/apps/frontend/templates/site/base.html</kbd></p> <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="">{ <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html></pre><h2 class="wp-block-heading">View current status of project</h2><figure class="wp-block-image size-large"><img decoding="async" width="1024" height="778" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20778'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png" alt="" class="wp-image-9682 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-300x228.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-768x583.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1536x1167.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap.png 1714w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure><h2 class="wp-block-heading">Final Result</h2><p>The final result could be found <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project" data-type="link" data-id="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project">here</a>.</p><h2 class="wp-block-heading">Add dashboard from an existing template</h2><p>For a first start, we will use this <a href="https://startbootstrap.com/previews/sb-admin-2/"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824470188863680783027">sb</gwmw>-admin-2 dashboard</a> template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>:</p><figure class="wp-block-image size-full"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/61_dashboard.png" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><h2 class="wp-block-heading">Download required files</h2><p>Bootstrap templates consist of at least 3 different types of files</p><ul class="wp-block-list"><li>main index.html page, responsible for collection all elements and set up your page</li><li>CSS files defining the style of your page</li><li>JavaScript files, containing needed frameworks and code</li></ul><p>So, first start by downloading the sample template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>. Be sure, you start in our project root folder:</p><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="">❯ cd $DASHBOARD_ROOT</pre><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="">❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 </pre><p>Next, find out, what we need for our template in addition to the file <kbd>index.html</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)="</pre><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script></pre><p>That’s a lot of additional files.</p><p>To keep the file structure consistent, these files should be stored under the <kbd>dashboard/static</kbd> folder (same as the bootstrap files before).</p><p>To achieve this, there are <gwmw class="ginger-module-highlighter-mistake-type-2" id="gwmw-15824469384628631344488">two possi</gwmw>bilities:</p><ul class="wp-block-list"><li>Create desired folder and copy each of the source files to the destination folder</li><li><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824469457060378385283">Copy</gwmw> the complete static folder from the <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap">Github Repository</a> for this post.</li></ul><p>We use the second option to keep the focus on creating our dashboard.<gwmw style="display:none;"></gwmw></p><p>So, first, clone the repository:</p><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="">cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap</pre><p>Then, copy the requred files</p><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="">cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard</pre><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 -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard</pre><p>Having everything needed for the dashboard template, the next step is to modify the front-end template</p><p>File <code>dashboard/apps/frontend/templates/frontend/index.html</code></p> <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="">{ { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div></pre></pre></div></div></div></div></article><footer class="site-footer"><div class="container"><div class="row footer-sidebar"><div class="col-lg-3 col-md-6 col-sm-12"><aside id="categories-1" class="widget widget_categories wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Categories</h4><form action="https://via-internet.de/blog" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name="cat" id="cat" class="postform"><option value="-1">Select Category</option><option class="level-0" value="2">3D Printing (1)</option><option class="level-0" value="168">AI (3)</option><option class="level-0" value="1">Allgemein (32)</option><option class="level-0" value="151">Anaconda (1)</option><option class="level-0" value="4">Apache (3)</option><option class="level-0" value="5">Apache Spark (3)</option><option class="level-0" value="6">Apache Zeppelin (1)</option><option class="level-0" value="7">Arduino (1)</option><option class="level-0" value="160">Astro (3)</option><option class="level-0" value="9">Azure (7)</option><option class="level-1" value="20"> Databricks (4)</option><option class="level-1" value="87"> Widgets (1)</option><option class="level-0" value="158">BeautifulSoup (1)</option><option class="level-0" value="10">Bootstrap (6)</option><option class="level-0" value="12">Capacitor (1)</option><option class="level-0" value="13">CI/CD (3)</option><option class="level-1" value="40"> Jenkins (3)</option><option class="level-0" value="153">Container (9)</option><option class="level-1" value="22"> Docker (8)</option><option class="level-2" value="43"> Kubernetes (2)</option><option class="level-1" value="154"> Podman (1)</option><option class="level-0" value="16">Cookbook (30)</option><option class="level-0" value="17">CSS (3)</option><option class="level-0" value="135">Daily (6)</option><option class="level-0" value="144">Dart (1)</option><option class="level-0" value="18">Data Science (1)</option><option class="level-0" value="19">Database (2)</option><option class="level-1" value="50"> MySQL (1)</option><option class="level-1" value="58"> PostgreSQL (1)</option><option class="level-0" value="96">FastAPI (1)</option><option class="level-0" value="27">Generell (1)</option><option class="level-0" value="28">Git und Github (6)</option><option class="level-0" value="157">Grafana (1)</option><option class="level-0" value="31">Hadoop (1)</option><option class="level-0" value="163">Hexo (1)</option><option class="level-0" value="33">Homebrew (1)</option><option class="level-0" value="165">HyperDiv (1)</option><option class="level-0" value="34">Ionic 3 (5)</option><option class="level-0" value="35">Ionic 4 (9)</option><option class="level-0" value="39">Jekyll (1)</option><option class="level-0" value="41">Jupyter (2)</option><option class="level-0" value="42">Keycloak (3)</option><option class="level-0" value="137">Languages (60)</option><option class="level-1" value="14"> ClojureScript (1)</option><option class="level-1" value="15"> Cobol (1)</option><option class="level-1" value="24"> Erlang (2)</option><option class="level-2" value="94"> Elixir (2)</option><option class="level-1" value="149"> F# (2)</option><option class="level-1" value="29"> Go (1)</option><option class="level-1" value="30"> Groovy (1)</option><option class="level-1" value="32"> Haskell (3)</option><option class="level-1" value="36"> iPython (1)</option><option class="level-1" value="37"> Java (5)</option><option class="level-1" value="38"> Javascript (7)</option><option class="level-1" value="56"> Perl (1)</option><option class="level-1" value="57"> PHP (13)</option><option class="level-1" value="63"> PureScript (1)</option><option class="level-1" value="65"> Python (19)</option><option class="level-2" value="141"> PIP (1)</option><option class="level-1" value="68"> Rust (3)</option><option class="level-1" value="75"> Swift (1)</option><option class="level-0" value="99">Laravel (16)</option><option class="level-0" value="44">Learning (5)</option><option class="level-0" value="45">Linux (1)</option><option class="level-0" value="46">macOS (1)</option><option class="level-0" value="47">matter.js (1)</option><option class="level-0" value="48">Maven (1)</option><option class="level-0" value="49">Mobile Development (9)</option><option class="level-0" value="51">NestJS (1)</option><option class="level-0" value="156">Nicepage (1)</option><option class="level-0" value="52">Node.js (2)</option><option class="level-0" value="53">Office 365 (2)</option><option class="level-1" value="95"> Excel (1)</option><option class="level-1" value="81"> VBA (1)</option><option class="level-1" value="88"> Word (1)</option><option class="level-0" value="164">Ollama (4)</option><option class="level-0" value="54">OpenSCAD (1)</option><option class="level-0" value="159">Power Apps (1)</option><option class="level-0" value="59">Power BI (4)</option><option class="level-0" value="146">Power BI Visuals (3)</option><option class="level-0" value="61">Power Query (3)</option><option class="level-0" value="62">Protractor (1)</option><option class="level-0" value="64">PySpark (2)</option><option class="level-0" value="69">rxjs (2)</option><option class="level-0" value="70">SAS (3)</option><option class="level-0" value="71">Selenium (1)</option><option class="level-0" value="72">Shell (10)</option><option class="level-1" value="92"> Bash (1)</option><option class="level-1" value="102"> Power Shell (8)</option><option class="level-0" value="73">Smalltalk (1)</option><option class="level-0" value="74">Spring Boot (2)</option><option class="level-0" value="166">Static-Site-Generator (1)</option><option class="level-1" value="167"> Hugo (1)</option><option class="level-0" value="76">TDD (1)</option><option class="level-1" value="77"> Testing / Unittests (1)</option><option class="level-0" value="145">Troubleshooting (3)</option><option class="level-0" value="126">Tutorial (1)</option><option class="level-0" value="78">Ubuntu (1)</option><option class="level-0" value="79">Uncategorized (7)</option><option class="level-0" value="129">Unix (1)</option><option class="level-0" value="80">Vagrant (1)</option><option class="level-0" value="82">Virtual Machine (2)</option><option class="level-0" value="83">Virtualbox (2)</option><option class="level-0" value="84">Visual Studio Code (4)</option><option class="level-0" value="85">Visualisation (3)</option><option class="level-1" value="93"> D3.js (2)</option><option class="level-1" value="100"> p5.js (1)</option><option class="level-0" value="86">Web Framework (40)</option><option class="level-1" value="90"> Angular (10)</option><option class="level-1" value="91"> AngularJS (1)</option><option class="level-1" value="21"> Django (5)</option><option class="level-1" value="97"> Flask (1)</option><option class="level-1" value="26"> Flutter (6)</option><option class="level-1" value="98"> Ionic (13)</option><option class="level-1" value="66"> React (3)</option><option class="level-1" value="148"> React Native (1)</option><option class="level-1" value="67"> ReactJS (3)</option><option class="level-1" value="103"> VUE (2)</option><option class="level-0" value="143">Windows Subsystem for Linux (1)</option><option class="level-0" value="89">Wordpress (2)</option><option class="level-0" value="155">XAMPP (1)</option> </select></form><script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJjYXQiICk7CglmdW5jdGlvbiBvbkNhdENoYW5nZSgpIHsKCQlpZiAoIGRyb3Bkb3duLm9wdGlvbnNbIGRyb3Bkb3duLnNlbGVjdGVkSW5kZXggXS52YWx1ZSA+IDAgKSB7CgkJCWRyb3Bkb3duLnBhcmVudE5vZGUuc3VibWl0KCk7CgkJfQoJfQoJZHJvcGRvd24ub25jaGFuZ2UgPSBvbkNhdENoYW5nZTsKfSkoKTsKCi8qIF1dPiAqLwo="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="archives-1" class="widget widget_archive wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Archives</h4> <label class="screen-reader-text" for="archives-dropdown-1">Archives</label> <select id="archives-dropdown-1" name="archive-dropdown"><option value="">Select Month</option><option value="https://via-internet.de/blog/2024/11/"> November 2024</option><option value="https://via-internet.de/blog/2024/10/"> October 2024</option><option value="https://via-internet.de/blog/2024/09/"> September 2024</option><option value="https://via-internet.de/blog/2024/07/"> July 2024</option><option value="https://via-internet.de/blog/2024/05/"> May 2024</option><option value="https://via-internet.de/blog/2024/04/"> April 2024</option><option value="https://via-internet.de/blog/2024/03/"> March 2024</option><option value="https://via-internet.de/blog/2024/01/"> January 2024</option><option value="https://via-internet.de/blog/2023/12/"> December 2023</option><option value="https://via-internet.de/blog/2023/11/"> November 2023</option><option value="https://via-internet.de/blog/2023/10/"> October 2023</option><option value="https://via-internet.de/blog/2023/09/"> September 2023</option><option value="https://via-internet.de/blog/2023/08/"> August 2023</option><option value="https://via-internet.de/blog/2023/07/"> July 2023</option><option value="https://via-internet.de/blog/2023/04/"> April 2023</option><option value="https://via-internet.de/blog/2023/03/"> March 2023</option><option value="https://via-internet.de/blog/2023/02/"> February 2023</option><option value="https://via-internet.de/blog/2022/11/"> November 2022</option><option value="https://via-internet.de/blog/2022/10/"> October 2022</option><option value="https://via-internet.de/blog/2022/07/"> July 2022</option><option value="https://via-internet.de/blog/2022/06/"> June 2022</option><option value="https://via-internet.de/blog/2022/05/"> May 2022</option><option value="https://via-internet.de/blog/2022/04/"> April 2022</option><option value="https://via-internet.de/blog/2022/03/"> March 2022</option><option value="https://via-internet.de/blog/2022/01/"> January 2022</option><option value="https://via-internet.de/blog/2021/12/"> December 2021</option><option value="https://via-internet.de/blog/2021/11/"> November 2021</option><option value="https://via-internet.de/blog/2021/10/"> October 2021</option><option value="https://via-internet.de/blog/2021/08/"> August 2021</option><option value="https://via-internet.de/blog/2021/07/"> July 2021</option><option value="https://via-internet.de/blog/2021/06/"> June 2021</option><option value="https://via-internet.de/blog/2021/05/"> May 2021</option><option value="https://via-internet.de/blog/2021/02/"> February 2021</option><option value="https://via-internet.de/blog/2021/01/"> January 2021</option><option value="https://via-internet.de/blog/2020/12/"> December 2020</option><option value="https://via-internet.de/blog/2020/11/"> November 2020</option><option value="https://via-internet.de/blog/2020/10/"> October 2020</option><option value="https://via-internet.de/blog/2020/09/"> September 2020</option><option value="https://via-internet.de/blog/2020/08/"> August 2020</option><option value="https://via-internet.de/blog/2020/07/"> July 2020</option><option value="https://via-internet.de/blog/2020/06/"> June 2020</option><option value="https://via-internet.de/blog/2020/05/"> May 2020</option><option value="https://via-internet.de/blog/2020/04/"> April 2020</option><option value="https://via-internet.de/blog/2020/03/"> March 2020</option><option value="https://via-internet.de/blog/2020/02/" selected="selected"> February 2020</option><option value="https://via-internet.de/blog/2020/01/"> January 2020</option><option value="https://via-internet.de/blog/2019/12/"> December 2019</option><option value="https://via-internet.de/blog/2019/09/"> September 2019</option><option value="https://via-internet.de/blog/2019/08/"> August 2019</option><option value="https://via-internet.de/blog/2019/07/"> July 2019</option><option value="https://via-internet.de/blog/2019/06/"> June 2019</option><option value="https://via-internet.de/blog/2019/05/"> May 2019</option><option value="https://via-internet.de/blog/2019/04/"> April 2019</option><option value="https://via-internet.de/blog/2019/03/"> March 2019</option><option value="https://via-internet.de/blog/2019/02/"> February 2019</option><option value="https://via-internet.de/blog/2019/01/"> January 2019</option><option value="https://via-internet.de/blog/2018/12/"> December 2018</option><option value="https://via-internet.de/blog/2018/11/"> November 2018</option><option value="https://via-internet.de/blog/2018/09/"> September 2018</option><option value="https://via-internet.de/blog/2018/08/"> August 2018</option><option value="https://via-internet.de/blog/2018/07/"> July 2018</option><option value="https://via-internet.de/blog/2018/03/"> March 2018</option><option value="https://via-internet.de/blog/2018/02/"> February 2018</option><option value="https://via-internet.de/blog/2018/01/"> January 2018</option><option value="https://via-internet.de/blog/2017/12/"> December 2017</option><option value="https://via-internet.de/blog/2017/07/"> July 2017</option><option value="https://via-internet.de/blog/2017/05/"> May 2017</option><option value="https://via-internet.de/blog/2017/03/"> March 2017</option><option value="https://via-internet.de/blog/2017/02/"> February 2017</option><option value="https://via-internet.de/blog/2016/12/"> December 2016</option><option value="https://via-internet.de/blog/2016/11/"> November 2016</option><option value="https://via-internet.de/blog/2016/10/"> October 2016</option> </select> <script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJhcmNoaXZlcy1kcm9wZG93bi0xIiApOwoJZnVuY3Rpb24gb25TZWxlY3RDaGFuZ2UoKSB7CgkJaWYgKCBkcm9wZG93bi5vcHRpb25zWyBkcm9wZG93bi5zZWxlY3RlZEluZGV4IF0udmFsdWUgIT09ICcnICkgewoJCQlkb2N1bWVudC5sb2NhdGlvbi5ocmVmID0gdGhpcy5vcHRpb25zWyB0aGlzLnNlbGVjdGVkSW5kZXggXS52YWx1ZTsKCQl9Cgl9Cglkcm9wZG93bi5vbmNoYW5nZSA9IG9uU2VsZWN0Q2hhbmdlOwp9KSgpOwoKLyogXV0+ICovCg=="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="search-1" class="widget widget_search wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Search</h4><form method="get" id="searchform" class="input-group" action="https://via-internet.de/blog/"> <input type="text" class="form-control" placeholder="Search" name="s" id="s"><div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button></div></form></aside></div></div></div><div class="site-info text-center"> Copyright © 2024 | Powered by <a href="//wordpress.org/">WordPress</a> <span class="sep"> | </span> Aasta Blog theme by <a target="_blank" href="//themearile.com/">ThemeArile</a></div></footer><div class="page-scroll-up"><a href="#totop"><i class="fa fa-angle-up"></i></a></div><div id="cookie-law-info-bar" data-nosnippet="true" data-cli-style="cli-style-v2" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: inherit; bottom: 0px; position: fixed;"><span><div class="cli-bar-container cli-style-v2"><div class="cli-bar-message">We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.</div><div class="cli-bar-btn_container"><a role="button" class="medium cli-plugin-button cli-plugin-main-button cli_settings_button" style="margin: 0px 5px 0px 0px; color: rgb(51, 51, 51); background-color: rgb(222, 223, 224);">Cookie Settings</a><a id="wt-cli-accept-all-btn" role="button" data-cli_action="accept_all" class="wt-cli-element medium cli-plugin-button wt-cli-accept-all-btn cookie_action_close_header cli_action_button" style="color: rgb(255, 255, 255); background-color: rgb(97, 162, 41);">Accept All</a></div></div></span></div><div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); position: fixed; font-family: inherit; width: auto; bottom: 0px; right: 100px; display: none;"><span id="cookie_hdr_showagain">Manage consent</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true"><div class="cli-modal-dialog" role="document"><div class="cli-modal-content cli-bar-popup"> <button type="button" class="cli-modal-close" id="cliModalClose"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg> <span class="wt-cli-sr-only">Close</span> </button><div class="cli-modal-body"><div class="cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-privacy-overview"><h4>Privacy Overview</h4><div class="cli-privacy-content"><div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ...</div></div> <a class="cli-privacy-readmore" aria-label="Show more" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a></div></div><div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container"><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab"> Necessary </a><div class="wt-cli-necessary-checkbox"> <input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked"> <label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label></div> <span class="cli-necessary-caption">Always Enabled</span></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="necessary"><div class="wt-cli-cookie-description"> Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.<table class="cookielawinfo-row-cat-table cookielawinfo-winter"><thead><tr><th class="cookielawinfo-column-1">Cookie</th><th class="cookielawinfo-column-3">Duration</th><th class="cookielawinfo-column-4">Description</th></tr></thead><tbody><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-analytics</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-functional</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-necessary</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-others</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-performance</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">viewed_cookie_policy</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.</td></tr></tbody></table></div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="functional" data-toggle="cli-toggle-tab"> Functional </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-functional" class="cli-user-preference-checkbox" data-id="checkbox-functional"> <label for="wt-cli-checkbox-functional" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Functional</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="functional"><div class="wt-cli-cookie-description"> Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="performance" data-toggle="cli-toggle-tab"> Performance </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-performance" class="cli-user-preference-checkbox" data-id="checkbox-performance"> <label for="wt-cli-checkbox-performance" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Performance</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="performance"><div class="wt-cli-cookie-description"> Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="analytics" data-toggle="cli-toggle-tab"> Analytics </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-analytics" class="cli-user-preference-checkbox" data-id="checkbox-analytics"> <label for="wt-cli-checkbox-analytics" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Analytics</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="analytics"><div class="wt-cli-cookie-description"> Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="advertisement" data-toggle="cli-toggle-tab"> Advertisement </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-advertisement" class="cli-user-preference-checkbox" data-id="checkbox-advertisement"> <label for="wt-cli-checkbox-advertisement" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Advertisement</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="advertisement"><div class="wt-cli-cookie-description"> Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="others" data-toggle="cli-toggle-tab"> Others </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-others" class="cli-user-preference-checkbox" data-id="checkbox-others"> <label for="wt-cli-checkbox-others" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Others</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="others"><div class="wt-cli-cookie-description"> Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.</div></div></div></div></div></div></div></div><div class="cli-modal-footer"><div class="wt-cli-element cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-tab-footer wt-cli-privacy-overview-actions"> <a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a></div></div></div></div></div></div></div></div><div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div><div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div> <script defer="" src="data:text/javascript;base64,DQogICAgICAgICAgICBmdW5jdGlvbiBfa2F0ZXhSZW5kZXIocm9vdEVsZW1lbnQpIHsNCiAgICAgICAgICAgICAgICBjb25zdCBlbGVzID0gcm9vdEVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgiLmthdGV4LWVxOm5vdCgua2F0ZXgtcmVuZGVyZWQpIik7DQogICAgICAgICAgICAgICAgZm9yKGxldCBpZHg9MDsgaWR4IDwgZWxlcy5sZW5ndGg7IGlkeCsrKSB7DQogICAgICAgICAgICAgICAgICAgIGNvbnN0IGVsZSA9IGVsZXNbaWR4XTsNCiAgICAgICAgICAgICAgICAgICAgZWxlLmNsYXNzTGlzdC5hZGQoImthdGV4LXJlbmRlcmVkIik7DQogICAgICAgICAgICAgICAgICAgIHRyeSB7DQogICAgICAgICAgICAgICAgICAgICAgICBrYXRleC5yZW5kZXIoDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxlLnRleHRDb250ZW50LA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZSwNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXlNb2RlOiBlbGUuZ2V0QXR0cmlidXRlKCJkYXRhLWthdGV4LWRpc3BsYXkiKSA9PT0gJ3RydWUnLA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aHJvd09uRXJyb3I6IGZhbHNlDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgKTsNCiAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChuKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUuc3R5bGUuY29sb3I9InJlZCI7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUudGV4dENvbnRlbnQgPSBuLm1lc3NhZ2U7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGZ1bmN0aW9uIGthdGV4UmVuZGVyKCkgew0KICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihkb2N1bWVudCk7DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoIkRPTUNvbnRlbnRMb2FkZWQiLCBmdW5jdGlvbigpIHsNCiAgICAgICAgICAgICAgICBrYXRleFJlbmRlcigpOw0KDQogICAgICAgICAgICAgICAgLy8gUGVyZm9ybSBhIEthVGVYIHJlbmRlcmluZyBzdGVwIHdoZW4gdGhlIERPTSBpcyBtdXRhdGVkLg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcihmdW5jdGlvbihtdXRhdGlvbnMpIHsNCiAgICAgICAgICAgICAgICAgICAgW10uZm9yRWFjaC5jYWxsKG11dGF0aW9ucywgZnVuY3Rpb24obXV0YXRpb24pIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmIChtdXRhdGlvbi50YXJnZXQgJiYgbXV0YXRpb24udGFyZ2V0IGluc3RhbmNlb2YgRWxlbWVudCkgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihtdXRhdGlvbi50YXJnZXQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgICAgICB9KTsNCg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2YXRpb25Db25maWcgPSB7DQogICAgICAgICAgICAgICAgICAgIHN1YnRyZWU6IHRydWUsDQogICAgICAgICAgICAgICAgICAgIGNoaWxkTGlzdDogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgY2hhcmFjdGVyRGF0YTogdHJ1ZQ0KICAgICAgICAgICAgICAgIH07DQoNCiAgICAgICAgICAgICAgICBrYXRleE9ic2VydmVyLm9ic2VydmUoZG9jdW1lbnQuYm9keSwga2F0ZXhPYnNlcnZhdGlvbkNvbmZpZyk7DQogICAgICAgICAgICB9KTsNCg0KICAgICAgICA="></script> <style type="text/css">.theme-testimonial { background-image: url(https://via-internet.de/blog/wp-content/themes/aasta-blog/assets/img/theme-bg.jpg); background-size: cover; background-position: center center; }</style> <script defer="" src="data:text/javascript;base64,CgkvLyBUaGlzIEpTIGFkZGVkIGZvciB0aGUgVG9nZ2xlIGJ1dHRvbiB0byB3b3JrIHdpdGggdGhlIGZvY3VzIGVsZW1lbnQuCgkJaWYgKHdpbmRvdy5pbm5lcldpZHRoIDwgOTkyKSB7CgkJCWRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBmdW5jdGlvbihlKSB7CgkJCWxldCBpc1RhYlByZXNzZWQgPSBlLmtleSA9PT0gJ1RhYicgfHwgZS5rZXlDb2RlID09PSA5OwoJCQkJaWYgKCFpc1RhYlByZXNzZWQpIHsKCQkJCQlyZXR1cm47CgkJCQl9CgkJCQkKCQkJY29uc3QgIGZvY3VzYWJsZUVsZW1lbnRzID0KCQkJCSdidXR0b24sIFtocmVmXSwgaW5wdXQsIHNlbGVjdCwgdGV4dGFyZWEsIFt0YWJpbmRleF06bm90KFt0YWJpbmRleD0iLTEiXSknOwoJCQljb25zdCBtb2RhbCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5uYXZiYXIubmF2YmFyLWV4cGFuZC1sZycpOyAvLyBzZWxlY3QgdGhlIG1vZGFsIGJ5IGl0J3MgaWQKCgkJCWNvbnN0IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCA9IG1vZGFsLnF1ZXJ5U2VsZWN0b3JBbGwoZm9jdXNhYmxlRWxlbWVudHMpWzBdOyAvLyBnZXQgZmlyc3QgZWxlbWVudCB0byBiZSBmb2N1c2VkIGluc2lkZSBtb2RhbAoJCQljb25zdCBmb2N1c2FibGVDb250ZW50ID0gbW9kYWwucXVlcnlTZWxlY3RvckFsbChmb2N1c2FibGVFbGVtZW50cyk7CgkJCWNvbnN0IGxhc3RGb2N1c2FibGVFbGVtZW50ID0gZm9jdXNhYmxlQ29udGVudFtmb2N1c2FibGVDb250ZW50Lmxlbmd0aCAtIDFdOyAvLyBnZXQgbGFzdCBlbGVtZW50IHRvIGJlIGZvY3VzZWQgaW5zaWRlIG1vZGFsCgoJCQkgIGlmIChlLnNoaWZ0S2V5KSB7IC8vIGlmIHNoaWZ0IGtleSBwcmVzc2VkIGZvciBzaGlmdCArIHRhYiBjb21iaW5hdGlvbgoJCQkJaWYgKGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQgPT09IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCkgewoJCQkJICBsYXN0Rm9jdXNhYmxlRWxlbWVudC5mb2N1cygpOyAvLyBhZGQgZm9jdXMgZm9yIHRoZSBsYXN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsKCQkJCX0KCQkJICB9IGVsc2UgeyAvLyBpZiB0YWIga2V5IGlzIHByZXNzZWQKCQkJCWlmIChkb2N1bWVudC5hY3RpdmVFbGVtZW50ID09PSBsYXN0Rm9jdXNhYmxlRWxlbWVudCkgeyAvLyBpZiBmb2N1c2VkIGhhcyByZWFjaGVkIHRvIGxhc3QgZm9jdXNhYmxlIGVsZW1lbnQgdGhlbiBmb2N1cyBmaXJzdCBmb2N1c2FibGUgZWxlbWVudCBhZnRlciBwcmVzc2luZyB0YWIKCQkJCSAgZmlyc3RGb2N1c2FibGVFbGVtZW50LmZvY3VzKCk7IC8vIGFkZCBmb2N1cyBmb3IgdGhlIGZpcnN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsJCQkgIAoJCQkJfQoJCQkgIH0KCgkJCX0pOwoJCX0K"></script> <script defer="" src="data:text/javascript;base64,CiAgICAgICAgbmV3Q29udGFpbmVyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3BhbicpOwogICAgICAgIG5ld0NvbnRhaW5lci5zdHlsZS5zZXRQcm9wZXJ0eSgnZGlzcGxheScsJ25vbmUnLCcnKTsKICAgICAgICBuZXdOb2RlICAgICAgICAgICA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NjcmlwdCcpOwogICAgICAgIG5ld05vZGUudHlwZSAgICAgID0gJ21hdGgvdGV4JzsKICAgICAgICBuZXdOb2RlLmlubmVySFRNTCA9ICdcXG5ld2NvbW1hbmR7XFxlcHN9e1xcdmFyZXBzaWxvbn1cblxcbmV3Y29tbWFuZHtcXFJSfXtcXG1hdGhiYntSfX1cblxcbmV3Y29tbWFuZHtcXHJkfXtcXG9wZXJhdG9ybmFtZXtkfX1cblxcbmV3Y29tbWFuZHtcXHNldH1bMV17XFxsZWZ0XFx7IzFcXHJpZ2h0XFx9fSc7CiAgICAgICAgbmV3Q29udGFpbmVyLmFwcGVuZENoaWxkKG5ld05vZGUpOwogICAgICAgIGRvY3VtZW50LmJvZHkuaW5zZXJ0QmVmb3JlKG5ld0NvbnRhaW5lcixkb2N1bWVudC5ib2R5LmZpcnN0Q2hpbGQpOwogICAgICAgIA=="></script> <script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], displayMath: [['$$', '$$'], ["\\[", "\\]"]], processEscapes: true }, TeX: { equationNumbers: {autoNumber: "AMS", useLabelIds: true} }, });</script> <link rel="stylesheet" id="cookie-law-info-table-css" href="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_26b4f0c3c1bcf76291fa4952fb7f04fb.php?ver=3.2.8" type="text/css" media="all"> <script defer="" id="toc-front-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgdG9jcGx1cyA9IHsidmlzaWJpbGl0eV9zaG93IjoiQW56ZWlnZW4iLCJ2aXNpYmlsaXR5X2hpZGUiOiJBdXNibGVuZGVuIiwidmlzaWJpbGl0eV9oaWRlX2J5X2RlZmF1bHQiOiIxIiwid2lkdGgiOiJBdXRvIn07Ci8qIF1dPiAqLwo="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_93d421fd7576b0ca9c359ffe2fa16113.php?ver=20151215" id="aasta-skip-link-focus-fix-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.7.2" id="katex-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=UnpSS38vU0joHj5" id="enlighterjs-js"></script> <script defer="" id="enlighterjs-js-after" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwohZnVuY3Rpb24oZSxuKXtpZigidW5kZWZpbmVkIiE9dHlwZW9mIEVubGlnaHRlckpTKXt2YXIgbz17InNlbGVjdG9ycyI6eyJibG9jayI6InByZS5FbmxpZ2h0ZXJKU1JBVyIsImlubGluZSI6ImNvZGUuRW5saWdodGVySlNSQVcifSwib3B0aW9ucyI6eyJpbmRlbnQiOjQsImFtcGVyc2FuZENsZWFudXAiOnRydWUsImxpbmVob3ZlciI6dHJ1ZSwicmF3Y29kZURiY2xpY2siOnRydWUsInRleHRPdmVyZmxvdyI6ImJyZWFrIiwibGluZW51bWJlcnMiOmZhbHNlLCJ0aGVtZSI6ImNsYXNzaWMiLCJsYW5ndWFnZSI6ImdlbmVyaWMiLCJyZXRhaW5Dc3NDbGFzc2VzIjpmYWxzZSwiY29sbGFwc2UiOmZhbHNlLCJ0b29sYmFyT3V0ZXIiOiIiLCJ0b29sYmFyVG9wIjoie0JUTl9SQVd9e0JUTl9DT1BZfXtCVE5fV0lORE9XfXtCVE5fV0VCU0lURX0iLCJ0b29sYmFyQm90dG9tIjoiIn19OyhlLkVubGlnaHRlckpTSU5JVD1mdW5jdGlvbigpe0VubGlnaHRlckpTLmluaXQoby5zZWxlY3RvcnMuYmxvY2ssby5zZWxlY3RvcnMuaW5saW5lLG8ub3B0aW9ucyl9KSgpfWVsc2V7KG4mJihuLmVycm9yfHxuLmxvZyl8fGZ1bmN0aW9uKCl7fSkoIkVycm9yOiBFbmxpZ2h0ZXJKUyByZXNvdXJjZXMgbm90IGxvYWRlZCB5ZXQhIil9fSh3aW5kb3csY29uc29sZSk7Ci8qIF1dPiAqLwo="></script> <script type="text/javascript" id="jetpack-stats-js-before">_stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"195943667\",\"post\":\"0\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]); _stq.push([ "clickTrackerInit", "195943667", "0" ]);</script> <script type="text/javascript" src="https://stats.wp.com/e-202510.js" id="jetpack-stats-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="gt_widget_script_62673750-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['62673750'] = {"default_language":"de","languages":["de","en","fr","zh-CN","nl","it","es","da","pt"],"url_structure":"none","native_language_names":1,"flag_style":"2d","flag_size":24,"wrapper_selector":"#gtranslate_menu_wrapper_37060","alt_flags":[],"switcher_open_direction":"top","switcher_horizontal_position":"inline","switcher_text_color":"#666","switcher_arrow_color":"#666","switcher_border_color":"#ccc","switcher_background_color":"#fff","switcher_background_shadow_color":"#efefef","switcher_background_hover_color":"#fff","dropdown_text_color":"#000","dropdown_hover_color":"#fff","dropdown_background_color":"#eee","flags_location":"\/blog\/wp-content\/plugins\/gtranslate\/flags\/"};</script><script src="https://via-internet.de/blog/wp-content/plugins/gtranslate/js/dwf.js?ver=6.7.2" data-no-optimize="1" data-no-minify="1" data-gt-orig-url="/blog/2020/02/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="62673750" defer=""></script><script defer="" id="wpcd-scripts-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgd3BjZGFqYXggPSB7ImFqYXh1cmwiOiJodHRwczpcL1wvdmlhLWludGVybmV0LmRlXC9ibG9nXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAifTsKLyogXV0+ICovCg=="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_231b95969d2321feeaab8fdd8121442a.php" id="wpcd-scripts-js"></script> <script defer="" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js&ver=2.7.5" id="mathjax-js"></script> <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async="" src="https://via-internet.de/blog/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js"></script> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Page Caching using Disk: Enhanced Lazy Loading Database Caching 2/163 queries in 0.254 seconds using Disk Served from: via-internet.de @ 2025-03-08 07:08:06 by W3 Total Cache --> { { { <p>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> <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 class IndexView(generic.TemplateView): template_name = 'buttons/base.html'</pre><p>So, for each template file, we have to</p><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><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=""> <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --></pre><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure><div class="post-content"><div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 22<small class="months">Feb</small></time></a> </span><div class="media-body"><header class="entry-header"><h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/22/build-a-dashboard-with-django-and-bootstrap-part-2/">Django | Build a Dashboard with Django and Bootstrap: Part 2</a></h4></header><div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span></div><div class="entry-content"><p>This is Part 2 of <em>Building a Dashboard with Django and Bootstrap</em>:</p><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><h2 class="wp-block-heading">Introduction</h2><p>If you follow the first part of this blog topic, you have a running Django dashboard.</p><p>But, unfortunately, the content is still static. Let’s review the current state:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"></div></div><p>Perfect. We are done with the basic setup.</p><p>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><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>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><p>We will do this by following these steps:</p><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><h2 class="wp-block-heading">Identify dynamic parts</h2><p>How to find the parts, which are dynamic.</p><p>One way is to ask:</p><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><p>You mostly get the same answers by the question:</p><ul class="wp-block-list"><li>What are the main components of a web page (including navigation and content)</li></ul><p>For answer the first question, take a look at the current page and “name” the areas:</p><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="563" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20563'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/02_elements_of_dashboard_page.png?fit=700%2C394&ssl=1" alt="" class="wp-image-5929 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>So, these “names” are also the answer for the 3. Question:</p><ul class="wp-block-list"><li>sidemenu</li><li>top bar</li><li>content</li></ul><p>And maybe you find additional “names”</p><ul class="wp-block-list"><li>header</li><li>footer</li><li>top menu</li><li>left and right sidebar</li></ul><h2 class="wp-block-heading">Find identified parts in template</h2><p>Next step is, to find the identified parts in our dashboard template</p><p><code>dashboard/templates/site/sb-admin-2/base.html</code></p><p>This is an easy step, because the developer of the SB Admin 2 template documented their template well:</p><figure class="wp-block-image size-large"><img decoding="async" width="2004" height="1706" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202004%201706'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/03_elements_of_dashboard_in_codepage.png?fit=700%2C596&ssl=1" alt="" class="wp-image-5932 lazy" data-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" data-sizes="auto, (max-width: 2004px) 100vw, 2004px"></figure><p>Looking into the code of the template, you will find comment lines describing the content:</p><ul class="wp-block-list"><li><code><!-- Sidebar --></code></li><li><code><!-- Topbar --></code></li><li><code><!-- Top Search --></code></li><li><code><!-- Top Navbar --></code></li><li><code><!-- Begin Page Content--></code></li></ul><p>So, it is obvious what do to next:</p><ul class="wp-block-list"><li>get the <em>dynamic</em> part (lines under)<code><!-- Begin Page Content--></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><p>This is the way, the template system of django works:</p><figure class="wp-block-image size-large"><img decoding="async" width="954" height="251" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20954%20251'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/21_combine_template_and_content_ui.png?fit=700%2C184&ssl=1" alt="" class="wp-image-5944 lazy" data-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" data-sizes="auto, (max-width: 954px) 100vw, 954px"></figure><p>Let’s explain this with a simple example: the page title</p><p>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><p>To achieve this, we have to tell our template system the following:</p><figure class="wp-block-image size-large"><img decoding="async" width="940" height="209" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20940%20209'%3E%3C/svg%3E" data-src="https://i0.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/22_combine_template_and_content_code.png?fit=700%2C156&ssl=1" alt="" class="wp-image-5943 lazy" data-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" data-sizes="auto, (max-width: 940px) 100vw, 940px"></figure><p>Now, we do the same with the content:</p><figure class="wp-block-image size-large"><img decoding="async" width="983" height="457" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20983%20457'%3E%3C/svg%3E" data-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&ssl=1" alt="" class="wp-image-5947 lazy" data-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" data-sizes="auto, (max-width: 983px) 100vw, 983px"></figure><p>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><p>Well, let’s make a test and try to include a different content in the dashboard template.</p><p>Change the lines, where we include the content into this:</p><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="">{ MISSING CONTENT { <p>Did you notice the other name of the content: <strong>content_missing</strong>?</p> <p>Change the template, save the file and have a look at the result:</p> <figure class="wp-block-image size-large"><img decoding="async" width="2328" height="448" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202328%20448'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/41_missing_content.png?fit=700%2C135&ssl=1" alt="" class="wp-image-5949 lazy" data-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" data-sizes="auto, (max-width: 2328px) 100vw, 2328px"></figure> <p>Change content back, so your template is working again:</p> <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="">{ MISSING CONTENT { <p>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> </pre></pre></div> </div> </div> </div> </article><article class="post wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"> <figure class="post-thumbnail"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/"><img width="1000" height="668" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20668'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png" class="img-fluid wp-post-image lazy" alt="" decoding="async" data-srcset="https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2.png 1000w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-300x200.png 300w, https://via-internet.de/blog/wp-content/uploads/2020/02/00_header_2-768x513.png 768w" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></a></figure> <div class="post-content"> <div class="media mb-3"> <span class="posted-on"> <a href="https://via-internet.de/blog/2020/02/"><time class="days"> 21<small class="months">Feb</small></time></a> </span> <div class="media-body"> <header class="entry-header"> <h4 class="entry-title"><a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/">Django | Build a Dashboard with Django and Bootstrap: Part 1</a></h4> </header> <div class="entry-meta"> <span class="author"> <a href="https://via-internet.de/blog/author/admin/"><span class="grey">by </span>Ralph</a> </span> <span class="cat-links"><a href="https://via-internet.de/blog/category/bootstrap/" rel="category tag">Bootstrap</a>, <a href="https://via-internet.de/blog/category/web-framework/django/" rel="category tag">Django</a></span> </div> <div class="entry-content"> <p>This is Part 1 of <em>Building a Dashboard with Django and Bootstrap</em>:</p> <ul class="wp-block-list"> <li><strong>Part 1: Building a base Django project</strong></li> <li><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/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/build-a-dashboard-with-django-and-bootstrap-part-4/">Part 4: Deploy Django App to Azure</a></li> </ul> <h2 class="wp-block-heading">Introduction</h2> <p>Building a complete web app isn’t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don’t using tools or framework, which helps and makes our life easier. <a href="https://www.djangoproject.com/"><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824465754606598455505">Django</gwmw></a> is one of these frameworks:</p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468379037630016661">Django</gwmw> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development</p> </blockquote> <p>So, let’s get started.</p> <h3 class="wp-block-heading">Create project</h3> <p>For subsequent steps, we will remember our starting directory </p> <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="">❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder...</pre><p>First step is to create our main Django project</p><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="">❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate</pre><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="">❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK.</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="782" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20782'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png" alt="" class="wp-image-9675 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1024x782.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-300x229.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-768x587.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-1536x1173.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_005-2048x1564.png 2048w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure></div><h3 class="wp-block-heading">Create first apps</h3><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="">❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend</pre><p>The folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="970" height="436" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20970%20436'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png" alt="" class="wp-image-9690 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1.png 970w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-300x135.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-initial-folder-structure-1-768x345.png 768w" data-sizes="auto, (max-width: 970px) 100vw, 970px"></figure><h2 class="wp-block-heading">Add new apps to project</h2><p>Modify name in <code>apps/core/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core'</pre><p>Modify name in <code>apps/frontend/apps.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="3" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend'</pre><p>Modify <code>dashboard/settings.py</code></p><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="">INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ]</pre><p>Modify <code>dashboard/urls.py</code></p><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="">from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ]</pre><h3 class="wp-block-heading">Create view</h3><p>Modify view in <code>apps/frontend/views.py</code></p><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="">from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html'</pre><h3 class="wp-block-heading">Create template for frontend View</h3><p>Create template file <code>apps/frontend/templates/frontend/index.html</code></p><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=""><h1> Frontend: Let's get started </h1></pre><h3 class="wp-block-heading">Add template folder to configuration</h3><p>In <kbd>dashboard/settings.py</kbd>, add template folder to TEMPLATES</p><pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ]</pre><h3 class="wp-block-heading">View current project in browser</h3><div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="624" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20624%20186'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png" alt="" class="wp-image-8442 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2.png 624w, https://via-internet.de/blog/wp-content/uploads/2021/10/build_a_dashboard_with_django_006-2-300x89.png 300w" data-sizes="auto, (max-width: 624px) 100vw, 624px"></figure></div><h2 class="wp-block-heading">Current folder Structure</h2><p>So far, we have the following folder structure</p><figure class="wp-block-image size-full"><img decoding="async" width="690" height="982" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20690%20982'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png" alt="" class="wp-image-9691 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001.png 690w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-folder-structure-001-211x300.png 211w" data-sizes="auto, (max-width: 690px) 100vw, 690px"></figure><h2 class="wp-block-heading">Prepare for administrate your project</h2><h3 class="wp-block-heading">Create admin user</h3><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="">❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully.</pre><h2 class="wp-block-heading">Add Bootstrap support</h2><p>Download requires files for Bootstrap, jQuery and PopperJS.</p><p>Or download <a href="https://via-internet.de/blog/wp-content/uploads/2021/10/static.zip">this </a>prepared archiv and unzip the files unter <code>dashboard</code>.</p><p>Run the scripts in <kbd>$DASHBOARD_ROOT</kbd></p><p>Hint: You need to install <a href="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3" data-type="link" data-id="https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3">PowerShell</a> before running the scripts.</p><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 > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1</pre><p><kbd>download_bootstrap.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' </pre><p><kbd>download_jquery.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map</pre><p><kbd>download_popperjs.ps1</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js</pre><p>Finally, the folder structure should look like this:</p><figure class="wp-block-image size-full"><img decoding="async" width="474" height="660" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20474%20660'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png" alt="" class="wp-image-9679 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008.png 474w, https://via-internet.de/blog/wp-content/uploads/2023/08/build_a_dashboard_with_django_008-215x300.png 215w" data-sizes="auto, (max-width: 474px) 100vw, 474px"></figure><h3 class="wp-block-heading">Create site templates in <code>dashboard/templates/site</code></h3><h3 class="wp-block-heading">Add templates path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470508427730698282">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="5" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ...</pre><h3 class="wp-block-heading"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-2" id="gwmw-15824470715450370185521">Add static</gwmw> path to <gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3" id="gwmw-15824470715451132153545">settings</gwmw></h3><p>File <code>dashboard/settings.py</code></p><p>Add as first line</p><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="">import os</pre><p>Then add / replace at <kbd>STATIC_URL=...</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="2-4" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ]</pre><h2 class="wp-block-heading">Modify frontend view template</h2><p>File <code>dashboard/apps/frontend/templates/index.html</code></p><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="">{ { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { <p>File <kbd>dashboard/apps/frontend/templates/site/base.html</kbd></p> <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="">{ <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html></pre><h2 class="wp-block-heading">View current status of project</h2><figure class="wp-block-image size-large"><img decoding="async" width="1024" height="778" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20778'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png" alt="" class="wp-image-9682 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-300x228.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-768x583.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1536x1167.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap.png 1714w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure><h2 class="wp-block-heading">Final Result</h2><p>The final result could be found <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project" data-type="link" data-id="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project">here</a>.</p><h2 class="wp-block-heading">Add dashboard from an existing template</h2><p>For a first start, we will use this <a href="https://startbootstrap.com/previews/sb-admin-2/"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824470188863680783027">sb</gwmw>-admin-2 dashboard</a> template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>:</p><figure class="wp-block-image size-full"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/61_dashboard.png" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><h2 class="wp-block-heading">Download required files</h2><p>Bootstrap templates consist of at least 3 different types of files</p><ul class="wp-block-list"><li>main index.html page, responsible for collection all elements and set up your page</li><li>CSS files defining the style of your page</li><li>JavaScript files, containing needed frameworks and code</li></ul><p>So, first start by downloading the sample template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>. Be sure, you start in our project root folder:</p><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="">❯ cd $DASHBOARD_ROOT</pre><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="">❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 </pre><p>Next, find out, what we need for our template in addition to the file <kbd>index.html</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)="</pre><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script></pre><p>That’s a lot of additional files.</p><p>To keep the file structure consistent, these files should be stored under the <kbd>dashboard/static</kbd> folder (same as the bootstrap files before).</p><p>To achieve this, there are <gwmw class="ginger-module-highlighter-mistake-type-2" id="gwmw-15824469384628631344488">two possi</gwmw>bilities:</p><ul class="wp-block-list"><li>Create desired folder and copy each of the source files to the destination folder</li><li><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824469457060378385283">Copy</gwmw> the complete static folder from the <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap">Github Repository</a> for this post.</li></ul><p>We use the second option to keep the focus on creating our dashboard.<gwmw style="display:none;"></gwmw></p><p>So, first, clone the repository:</p><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="">cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap</pre><p>Then, copy the requred files</p><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="">cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard</pre><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 -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard</pre><p>Having everything needed for the dashboard template, the next step is to modify the front-end template</p><p>File <code>dashboard/apps/frontend/templates/frontend/index.html</code></p> <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="">{ { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div></pre></pre></div></div></div></div></article><footer class="site-footer"><div class="container"><div class="row footer-sidebar"><div class="col-lg-3 col-md-6 col-sm-12"><aside id="categories-1" class="widget widget_categories wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Categories</h4><form action="https://via-internet.de/blog" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name="cat" id="cat" class="postform"><option value="-1">Select Category</option><option class="level-0" value="2">3D Printing (1)</option><option class="level-0" value="168">AI (3)</option><option class="level-0" value="1">Allgemein (32)</option><option class="level-0" value="151">Anaconda (1)</option><option class="level-0" value="4">Apache (3)</option><option class="level-0" value="5">Apache Spark (3)</option><option class="level-0" value="6">Apache Zeppelin (1)</option><option class="level-0" value="7">Arduino (1)</option><option class="level-0" value="160">Astro (3)</option><option class="level-0" value="9">Azure (7)</option><option class="level-1" value="20"> Databricks (4)</option><option class="level-1" value="87"> Widgets (1)</option><option class="level-0" value="158">BeautifulSoup (1)</option><option class="level-0" value="10">Bootstrap (6)</option><option class="level-0" value="12">Capacitor (1)</option><option class="level-0" value="13">CI/CD (3)</option><option class="level-1" value="40"> Jenkins (3)</option><option class="level-0" value="153">Container (9)</option><option class="level-1" value="22"> Docker (8)</option><option class="level-2" value="43"> Kubernetes (2)</option><option class="level-1" value="154"> Podman (1)</option><option class="level-0" value="16">Cookbook (30)</option><option class="level-0" value="17">CSS (3)</option><option class="level-0" value="135">Daily (6)</option><option class="level-0" value="144">Dart (1)</option><option class="level-0" value="18">Data Science (1)</option><option class="level-0" value="19">Database (2)</option><option class="level-1" value="50"> MySQL (1)</option><option class="level-1" value="58"> PostgreSQL (1)</option><option class="level-0" value="96">FastAPI (1)</option><option class="level-0" value="27">Generell (1)</option><option class="level-0" value="28">Git und Github (6)</option><option class="level-0" value="157">Grafana (1)</option><option class="level-0" value="31">Hadoop (1)</option><option class="level-0" value="163">Hexo (1)</option><option class="level-0" value="33">Homebrew (1)</option><option class="level-0" value="165">HyperDiv (1)</option><option class="level-0" value="34">Ionic 3 (5)</option><option class="level-0" value="35">Ionic 4 (9)</option><option class="level-0" value="39">Jekyll (1)</option><option class="level-0" value="41">Jupyter (2)</option><option class="level-0" value="42">Keycloak (3)</option><option class="level-0" value="137">Languages (60)</option><option class="level-1" value="14"> ClojureScript (1)</option><option class="level-1" value="15"> Cobol (1)</option><option class="level-1" value="24"> Erlang (2)</option><option class="level-2" value="94"> Elixir (2)</option><option class="level-1" value="149"> F# (2)</option><option class="level-1" value="29"> Go (1)</option><option class="level-1" value="30"> Groovy (1)</option><option class="level-1" value="32"> Haskell (3)</option><option class="level-1" value="36"> iPython (1)</option><option class="level-1" value="37"> Java (5)</option><option class="level-1" value="38"> Javascript (7)</option><option class="level-1" value="56"> Perl (1)</option><option class="level-1" value="57"> PHP (13)</option><option class="level-1" value="63"> PureScript (1)</option><option class="level-1" value="65"> Python (19)</option><option class="level-2" value="141"> PIP (1)</option><option class="level-1" value="68"> Rust (3)</option><option class="level-1" value="75"> Swift (1)</option><option class="level-0" value="99">Laravel (16)</option><option class="level-0" value="44">Learning (5)</option><option class="level-0" value="45">Linux (1)</option><option class="level-0" value="46">macOS (1)</option><option class="level-0" value="47">matter.js (1)</option><option class="level-0" value="48">Maven (1)</option><option class="level-0" value="49">Mobile Development (9)</option><option class="level-0" value="51">NestJS (1)</option><option class="level-0" value="156">Nicepage (1)</option><option class="level-0" value="52">Node.js (2)</option><option class="level-0" value="53">Office 365 (2)</option><option class="level-1" value="95"> Excel (1)</option><option class="level-1" value="81"> VBA (1)</option><option class="level-1" value="88"> Word (1)</option><option class="level-0" value="164">Ollama (4)</option><option class="level-0" value="54">OpenSCAD (1)</option><option class="level-0" value="159">Power Apps (1)</option><option class="level-0" value="59">Power BI (4)</option><option class="level-0" value="146">Power BI Visuals (3)</option><option class="level-0" value="61">Power Query (3)</option><option class="level-0" value="62">Protractor (1)</option><option class="level-0" value="64">PySpark (2)</option><option class="level-0" value="69">rxjs (2)</option><option class="level-0" value="70">SAS (3)</option><option class="level-0" value="71">Selenium (1)</option><option class="level-0" value="72">Shell (10)</option><option class="level-1" value="92"> Bash (1)</option><option class="level-1" value="102"> Power Shell (8)</option><option class="level-0" value="73">Smalltalk (1)</option><option class="level-0" value="74">Spring Boot (2)</option><option class="level-0" value="166">Static-Site-Generator (1)</option><option class="level-1" value="167"> Hugo (1)</option><option class="level-0" value="76">TDD (1)</option><option class="level-1" value="77"> Testing / Unittests (1)</option><option class="level-0" value="145">Troubleshooting (3)</option><option class="level-0" value="126">Tutorial (1)</option><option class="level-0" value="78">Ubuntu (1)</option><option class="level-0" value="79">Uncategorized (7)</option><option class="level-0" value="129">Unix (1)</option><option class="level-0" value="80">Vagrant (1)</option><option class="level-0" value="82">Virtual Machine (2)</option><option class="level-0" value="83">Virtualbox (2)</option><option class="level-0" value="84">Visual Studio Code (4)</option><option class="level-0" value="85">Visualisation (3)</option><option class="level-1" value="93"> D3.js (2)</option><option class="level-1" value="100"> p5.js (1)</option><option class="level-0" value="86">Web Framework (40)</option><option class="level-1" value="90"> Angular (10)</option><option class="level-1" value="91"> AngularJS (1)</option><option class="level-1" value="21"> Django (5)</option><option class="level-1" value="97"> Flask (1)</option><option class="level-1" value="26"> Flutter (6)</option><option class="level-1" value="98"> Ionic (13)</option><option class="level-1" value="66"> React (3)</option><option class="level-1" value="148"> React Native (1)</option><option class="level-1" value="67"> ReactJS (3)</option><option class="level-1" value="103"> VUE (2)</option><option class="level-0" value="143">Windows Subsystem for Linux (1)</option><option class="level-0" value="89">Wordpress (2)</option><option class="level-0" value="155">XAMPP (1)</option> </select></form><script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJjYXQiICk7CglmdW5jdGlvbiBvbkNhdENoYW5nZSgpIHsKCQlpZiAoIGRyb3Bkb3duLm9wdGlvbnNbIGRyb3Bkb3duLnNlbGVjdGVkSW5kZXggXS52YWx1ZSA+IDAgKSB7CgkJCWRyb3Bkb3duLnBhcmVudE5vZGUuc3VibWl0KCk7CgkJfQoJfQoJZHJvcGRvd24ub25jaGFuZ2UgPSBvbkNhdENoYW5nZTsKfSkoKTsKCi8qIF1dPiAqLwo="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="archives-1" class="widget widget_archive wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Archives</h4> <label class="screen-reader-text" for="archives-dropdown-1">Archives</label> <select id="archives-dropdown-1" name="archive-dropdown"><option value="">Select Month</option><option value="https://via-internet.de/blog/2024/11/"> November 2024</option><option value="https://via-internet.de/blog/2024/10/"> October 2024</option><option value="https://via-internet.de/blog/2024/09/"> September 2024</option><option value="https://via-internet.de/blog/2024/07/"> July 2024</option><option value="https://via-internet.de/blog/2024/05/"> May 2024</option><option value="https://via-internet.de/blog/2024/04/"> April 2024</option><option value="https://via-internet.de/blog/2024/03/"> March 2024</option><option value="https://via-internet.de/blog/2024/01/"> January 2024</option><option value="https://via-internet.de/blog/2023/12/"> December 2023</option><option value="https://via-internet.de/blog/2023/11/"> November 2023</option><option value="https://via-internet.de/blog/2023/10/"> October 2023</option><option value="https://via-internet.de/blog/2023/09/"> September 2023</option><option value="https://via-internet.de/blog/2023/08/"> August 2023</option><option value="https://via-internet.de/blog/2023/07/"> July 2023</option><option value="https://via-internet.de/blog/2023/04/"> April 2023</option><option value="https://via-internet.de/blog/2023/03/"> March 2023</option><option value="https://via-internet.de/blog/2023/02/"> February 2023</option><option value="https://via-internet.de/blog/2022/11/"> November 2022</option><option value="https://via-internet.de/blog/2022/10/"> October 2022</option><option value="https://via-internet.de/blog/2022/07/"> July 2022</option><option value="https://via-internet.de/blog/2022/06/"> June 2022</option><option value="https://via-internet.de/blog/2022/05/"> May 2022</option><option value="https://via-internet.de/blog/2022/04/"> April 2022</option><option value="https://via-internet.de/blog/2022/03/"> March 2022</option><option value="https://via-internet.de/blog/2022/01/"> January 2022</option><option value="https://via-internet.de/blog/2021/12/"> December 2021</option><option value="https://via-internet.de/blog/2021/11/"> November 2021</option><option value="https://via-internet.de/blog/2021/10/"> October 2021</option><option value="https://via-internet.de/blog/2021/08/"> August 2021</option><option value="https://via-internet.de/blog/2021/07/"> July 2021</option><option value="https://via-internet.de/blog/2021/06/"> June 2021</option><option value="https://via-internet.de/blog/2021/05/"> May 2021</option><option value="https://via-internet.de/blog/2021/02/"> February 2021</option><option value="https://via-internet.de/blog/2021/01/"> January 2021</option><option value="https://via-internet.de/blog/2020/12/"> December 2020</option><option value="https://via-internet.de/blog/2020/11/"> November 2020</option><option value="https://via-internet.de/blog/2020/10/"> October 2020</option><option value="https://via-internet.de/blog/2020/09/"> September 2020</option><option value="https://via-internet.de/blog/2020/08/"> August 2020</option><option value="https://via-internet.de/blog/2020/07/"> July 2020</option><option value="https://via-internet.de/blog/2020/06/"> June 2020</option><option value="https://via-internet.de/blog/2020/05/"> May 2020</option><option value="https://via-internet.de/blog/2020/04/"> April 2020</option><option value="https://via-internet.de/blog/2020/03/"> March 2020</option><option value="https://via-internet.de/blog/2020/02/" selected="selected"> February 2020</option><option value="https://via-internet.de/blog/2020/01/"> January 2020</option><option value="https://via-internet.de/blog/2019/12/"> December 2019</option><option value="https://via-internet.de/blog/2019/09/"> September 2019</option><option value="https://via-internet.de/blog/2019/08/"> August 2019</option><option value="https://via-internet.de/blog/2019/07/"> July 2019</option><option value="https://via-internet.de/blog/2019/06/"> June 2019</option><option value="https://via-internet.de/blog/2019/05/"> May 2019</option><option value="https://via-internet.de/blog/2019/04/"> April 2019</option><option value="https://via-internet.de/blog/2019/03/"> March 2019</option><option value="https://via-internet.de/blog/2019/02/"> February 2019</option><option value="https://via-internet.de/blog/2019/01/"> January 2019</option><option value="https://via-internet.de/blog/2018/12/"> December 2018</option><option value="https://via-internet.de/blog/2018/11/"> November 2018</option><option value="https://via-internet.de/blog/2018/09/"> September 2018</option><option value="https://via-internet.de/blog/2018/08/"> August 2018</option><option value="https://via-internet.de/blog/2018/07/"> July 2018</option><option value="https://via-internet.de/blog/2018/03/"> March 2018</option><option value="https://via-internet.de/blog/2018/02/"> February 2018</option><option value="https://via-internet.de/blog/2018/01/"> January 2018</option><option value="https://via-internet.de/blog/2017/12/"> December 2017</option><option value="https://via-internet.de/blog/2017/07/"> July 2017</option><option value="https://via-internet.de/blog/2017/05/"> May 2017</option><option value="https://via-internet.de/blog/2017/03/"> March 2017</option><option value="https://via-internet.de/blog/2017/02/"> February 2017</option><option value="https://via-internet.de/blog/2016/12/"> December 2016</option><option value="https://via-internet.de/blog/2016/11/"> November 2016</option><option value="https://via-internet.de/blog/2016/10/"> October 2016</option> </select> <script defer="" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwoKKGZ1bmN0aW9uKCkgewoJdmFyIGRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICJhcmNoaXZlcy1kcm9wZG93bi0xIiApOwoJZnVuY3Rpb24gb25TZWxlY3RDaGFuZ2UoKSB7CgkJaWYgKCBkcm9wZG93bi5vcHRpb25zWyBkcm9wZG93bi5zZWxlY3RlZEluZGV4IF0udmFsdWUgIT09ICcnICkgewoJCQlkb2N1bWVudC5sb2NhdGlvbi5ocmVmID0gdGhpcy5vcHRpb25zWyB0aGlzLnNlbGVjdGVkSW5kZXggXS52YWx1ZTsKCQl9Cgl9Cglkcm9wZG93bi5vbmNoYW5nZSA9IG9uU2VsZWN0Q2hhbmdlOwp9KSgpOwoKLyogXV0+ICovCg=="></script> </aside></div><div class="col-lg-3 col-md-6 col-sm-12"><aside id="search-1" class="widget widget_search wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><h4 class="widget-title">Search</h4><form method="get" id="searchform" class="input-group" action="https://via-internet.de/blog/"> <input type="text" class="form-control" placeholder="Search" name="s" id="s"><div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button></div></form></aside></div></div></div><div class="site-info text-center"> Copyright © 2024 | Powered by <a href="//wordpress.org/">WordPress</a> <span class="sep"> | </span> Aasta Blog theme by <a target="_blank" href="//themearile.com/">ThemeArile</a></div></footer><div class="page-scroll-up"><a href="#totop"><i class="fa fa-angle-up"></i></a></div><div id="cookie-law-info-bar" data-nosnippet="true" data-cli-style="cli-style-v2" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: inherit; bottom: 0px; position: fixed;"><span><div class="cli-bar-container cli-style-v2"><div class="cli-bar-message">We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.</div><div class="cli-bar-btn_container"><a role="button" class="medium cli-plugin-button cli-plugin-main-button cli_settings_button" style="margin: 0px 5px 0px 0px; color: rgb(51, 51, 51); background-color: rgb(222, 223, 224);">Cookie Settings</a><a id="wt-cli-accept-all-btn" role="button" data-cli_action="accept_all" class="wt-cli-element medium cli-plugin-button wt-cli-accept-all-btn cookie_action_close_header cli_action_button" style="color: rgb(255, 255, 255); background-color: rgb(97, 162, 41);">Accept All</a></div></div></span></div><div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); position: fixed; font-family: inherit; width: auto; bottom: 0px; right: 100px; display: none;"><span id="cookie_hdr_showagain">Manage consent</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true"><div class="cli-modal-dialog" role="document"><div class="cli-modal-content cli-bar-popup"> <button type="button" class="cli-modal-close" id="cliModalClose"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg> <span class="wt-cli-sr-only">Close</span> </button><div class="cli-modal-body"><div class="cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-privacy-overview"><h4>Privacy Overview</h4><div class="cli-privacy-content"><div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ...</div></div> <a class="cli-privacy-readmore" aria-label="Show more" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a></div></div><div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container"><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab"> Necessary </a><div class="wt-cli-necessary-checkbox"> <input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked"> <label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label></div> <span class="cli-necessary-caption">Always Enabled</span></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="necessary"><div class="wt-cli-cookie-description"> Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.<table class="cookielawinfo-row-cat-table cookielawinfo-winter"><thead><tr><th class="cookielawinfo-column-1">Cookie</th><th class="cookielawinfo-column-3">Duration</th><th class="cookielawinfo-column-4">Description</th></tr></thead><tbody><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-analytics</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-functional</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-necessary</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-others</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">cookielawinfo-checkbox-performance</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".</td></tr><tr class="cookielawinfo-row"><td class="cookielawinfo-column-1">viewed_cookie_policy</td><td class="cookielawinfo-column-3">11 months</td><td class="cookielawinfo-column-4">The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.</td></tr></tbody></table></div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="functional" data-toggle="cli-toggle-tab"> Functional </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-functional" class="cli-user-preference-checkbox" data-id="checkbox-functional"> <label for="wt-cli-checkbox-functional" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Functional</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="functional"><div class="wt-cli-cookie-description"> Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="performance" data-toggle="cli-toggle-tab"> Performance </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-performance" class="cli-user-preference-checkbox" data-id="checkbox-performance"> <label for="wt-cli-checkbox-performance" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Performance</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="performance"><div class="wt-cli-cookie-description"> Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="analytics" data-toggle="cli-toggle-tab"> Analytics </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-analytics" class="cli-user-preference-checkbox" data-id="checkbox-analytics"> <label for="wt-cli-checkbox-analytics" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Analytics</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="analytics"><div class="wt-cli-cookie-description"> Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="advertisement" data-toggle="cli-toggle-tab"> Advertisement </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-advertisement" class="cli-user-preference-checkbox" data-id="checkbox-advertisement"> <label for="wt-cli-checkbox-advertisement" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Advertisement</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="advertisement"><div class="wt-cli-cookie-description"> Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.</div></div></div></div><div class="cli-tab-section"><div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="others" data-toggle="cli-toggle-tab"> Others </a><div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-others" class="cli-user-preference-checkbox" data-id="checkbox-others"> <label for="wt-cli-checkbox-others" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Others</span></label></div></div><div class="cli-tab-content"><div class="cli-tab-pane cli-fade" data-id="others"><div class="wt-cli-cookie-description"> Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.</div></div></div></div></div></div></div></div><div class="cli-modal-footer"><div class="wt-cli-element cli-container-fluid cli-tab-container"><div class="cli-row"><div class="cli-col-12 cli-align-items-stretch cli-px-0"><div class="cli-tab-footer wt-cli-privacy-overview-actions"> <a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a></div></div></div></div></div></div></div></div><div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div><div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div> <script defer="" src="data:text/javascript;base64,DQogICAgICAgICAgICBmdW5jdGlvbiBfa2F0ZXhSZW5kZXIocm9vdEVsZW1lbnQpIHsNCiAgICAgICAgICAgICAgICBjb25zdCBlbGVzID0gcm9vdEVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgiLmthdGV4LWVxOm5vdCgua2F0ZXgtcmVuZGVyZWQpIik7DQogICAgICAgICAgICAgICAgZm9yKGxldCBpZHg9MDsgaWR4IDwgZWxlcy5sZW5ndGg7IGlkeCsrKSB7DQogICAgICAgICAgICAgICAgICAgIGNvbnN0IGVsZSA9IGVsZXNbaWR4XTsNCiAgICAgICAgICAgICAgICAgICAgZWxlLmNsYXNzTGlzdC5hZGQoImthdGV4LXJlbmRlcmVkIik7DQogICAgICAgICAgICAgICAgICAgIHRyeSB7DQogICAgICAgICAgICAgICAgICAgICAgICBrYXRleC5yZW5kZXIoDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxlLnRleHRDb250ZW50LA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsZSwNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXlNb2RlOiBlbGUuZ2V0QXR0cmlidXRlKCJkYXRhLWthdGV4LWRpc3BsYXkiKSA9PT0gJ3RydWUnLA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aHJvd09uRXJyb3I6IGZhbHNlDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgKTsNCiAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChuKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUuc3R5bGUuY29sb3I9InJlZCI7DQogICAgICAgICAgICAgICAgICAgICAgICBlbGUudGV4dENvbnRlbnQgPSBuLm1lc3NhZ2U7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGZ1bmN0aW9uIGthdGV4UmVuZGVyKCkgew0KICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihkb2N1bWVudCk7DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoIkRPTUNvbnRlbnRMb2FkZWQiLCBmdW5jdGlvbigpIHsNCiAgICAgICAgICAgICAgICBrYXRleFJlbmRlcigpOw0KDQogICAgICAgICAgICAgICAgLy8gUGVyZm9ybSBhIEthVGVYIHJlbmRlcmluZyBzdGVwIHdoZW4gdGhlIERPTSBpcyBtdXRhdGVkLg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcihmdW5jdGlvbihtdXRhdGlvbnMpIHsNCiAgICAgICAgICAgICAgICAgICAgW10uZm9yRWFjaC5jYWxsKG11dGF0aW9ucywgZnVuY3Rpb24obXV0YXRpb24pIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmIChtdXRhdGlvbi50YXJnZXQgJiYgbXV0YXRpb24udGFyZ2V0IGluc3RhbmNlb2YgRWxlbWVudCkgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIF9rYXRleFJlbmRlcihtdXRhdGlvbi50YXJnZXQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9KTsNCiAgICAgICAgICAgICAgICB9KTsNCg0KICAgICAgICAgICAgICAgIGNvbnN0IGthdGV4T2JzZXJ2YXRpb25Db25maWcgPSB7DQogICAgICAgICAgICAgICAgICAgIHN1YnRyZWU6IHRydWUsDQogICAgICAgICAgICAgICAgICAgIGNoaWxkTGlzdDogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSwNCiAgICAgICAgICAgICAgICAgICAgY2hhcmFjdGVyRGF0YTogdHJ1ZQ0KICAgICAgICAgICAgICAgIH07DQoNCiAgICAgICAgICAgICAgICBrYXRleE9ic2VydmVyLm9ic2VydmUoZG9jdW1lbnQuYm9keSwga2F0ZXhPYnNlcnZhdGlvbkNvbmZpZyk7DQogICAgICAgICAgICB9KTsNCg0KICAgICAgICA="></script> <style type="text/css">.theme-testimonial { background-image: url(https://via-internet.de/blog/wp-content/themes/aasta-blog/assets/img/theme-bg.jpg); background-size: cover; background-position: center center; }</style> <script defer="" src="data:text/javascript;base64,CgkvLyBUaGlzIEpTIGFkZGVkIGZvciB0aGUgVG9nZ2xlIGJ1dHRvbiB0byB3b3JrIHdpdGggdGhlIGZvY3VzIGVsZW1lbnQuCgkJaWYgKHdpbmRvdy5pbm5lcldpZHRoIDwgOTkyKSB7CgkJCWRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBmdW5jdGlvbihlKSB7CgkJCWxldCBpc1RhYlByZXNzZWQgPSBlLmtleSA9PT0gJ1RhYicgfHwgZS5rZXlDb2RlID09PSA5OwoJCQkJaWYgKCFpc1RhYlByZXNzZWQpIHsKCQkJCQlyZXR1cm47CgkJCQl9CgkJCQkKCQkJY29uc3QgIGZvY3VzYWJsZUVsZW1lbnRzID0KCQkJCSdidXR0b24sIFtocmVmXSwgaW5wdXQsIHNlbGVjdCwgdGV4dGFyZWEsIFt0YWJpbmRleF06bm90KFt0YWJpbmRleD0iLTEiXSknOwoJCQljb25zdCBtb2RhbCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5uYXZiYXIubmF2YmFyLWV4cGFuZC1sZycpOyAvLyBzZWxlY3QgdGhlIG1vZGFsIGJ5IGl0J3MgaWQKCgkJCWNvbnN0IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCA9IG1vZGFsLnF1ZXJ5U2VsZWN0b3JBbGwoZm9jdXNhYmxlRWxlbWVudHMpWzBdOyAvLyBnZXQgZmlyc3QgZWxlbWVudCB0byBiZSBmb2N1c2VkIGluc2lkZSBtb2RhbAoJCQljb25zdCBmb2N1c2FibGVDb250ZW50ID0gbW9kYWwucXVlcnlTZWxlY3RvckFsbChmb2N1c2FibGVFbGVtZW50cyk7CgkJCWNvbnN0IGxhc3RGb2N1c2FibGVFbGVtZW50ID0gZm9jdXNhYmxlQ29udGVudFtmb2N1c2FibGVDb250ZW50Lmxlbmd0aCAtIDFdOyAvLyBnZXQgbGFzdCBlbGVtZW50IHRvIGJlIGZvY3VzZWQgaW5zaWRlIG1vZGFsCgoJCQkgIGlmIChlLnNoaWZ0S2V5KSB7IC8vIGlmIHNoaWZ0IGtleSBwcmVzc2VkIGZvciBzaGlmdCArIHRhYiBjb21iaW5hdGlvbgoJCQkJaWYgKGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQgPT09IGZpcnN0Rm9jdXNhYmxlRWxlbWVudCkgewoJCQkJICBsYXN0Rm9jdXNhYmxlRWxlbWVudC5mb2N1cygpOyAvLyBhZGQgZm9jdXMgZm9yIHRoZSBsYXN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsKCQkJCX0KCQkJICB9IGVsc2UgeyAvLyBpZiB0YWIga2V5IGlzIHByZXNzZWQKCQkJCWlmIChkb2N1bWVudC5hY3RpdmVFbGVtZW50ID09PSBsYXN0Rm9jdXNhYmxlRWxlbWVudCkgeyAvLyBpZiBmb2N1c2VkIGhhcyByZWFjaGVkIHRvIGxhc3QgZm9jdXNhYmxlIGVsZW1lbnQgdGhlbiBmb2N1cyBmaXJzdCBmb2N1c2FibGUgZWxlbWVudCBhZnRlciBwcmVzc2luZyB0YWIKCQkJCSAgZmlyc3RGb2N1c2FibGVFbGVtZW50LmZvY3VzKCk7IC8vIGFkZCBmb2N1cyBmb3IgdGhlIGZpcnN0IGZvY3VzYWJsZSBlbGVtZW50CgkJCQkgIGUucHJldmVudERlZmF1bHQoKTsJCQkgIAoJCQkJfQoJCQkgIH0KCgkJCX0pOwoJCX0K"></script> <script defer="" src="data:text/javascript;base64,CiAgICAgICAgbmV3Q29udGFpbmVyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3BhbicpOwogICAgICAgIG5ld0NvbnRhaW5lci5zdHlsZS5zZXRQcm9wZXJ0eSgnZGlzcGxheScsJ25vbmUnLCcnKTsKICAgICAgICBuZXdOb2RlICAgICAgICAgICA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NjcmlwdCcpOwogICAgICAgIG5ld05vZGUudHlwZSAgICAgID0gJ21hdGgvdGV4JzsKICAgICAgICBuZXdOb2RlLmlubmVySFRNTCA9ICdcXG5ld2NvbW1hbmR7XFxlcHN9e1xcdmFyZXBzaWxvbn1cblxcbmV3Y29tbWFuZHtcXFJSfXtcXG1hdGhiYntSfX1cblxcbmV3Y29tbWFuZHtcXHJkfXtcXG9wZXJhdG9ybmFtZXtkfX1cblxcbmV3Y29tbWFuZHtcXHNldH1bMV17XFxsZWZ0XFx7IzFcXHJpZ2h0XFx9fSc7CiAgICAgICAgbmV3Q29udGFpbmVyLmFwcGVuZENoaWxkKG5ld05vZGUpOwogICAgICAgIGRvY3VtZW50LmJvZHkuaW5zZXJ0QmVmb3JlKG5ld0NvbnRhaW5lcixkb2N1bWVudC5ib2R5LmZpcnN0Q2hpbGQpOwogICAgICAgIA=="></script> <script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], displayMath: [['$$', '$$'], ["\\[", "\\]"]], processEscapes: true }, TeX: { equationNumbers: {autoNumber: "AMS", useLabelIds: true} }, });</script> <link rel="stylesheet" id="cookie-law-info-table-css" href="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_26b4f0c3c1bcf76291fa4952fb7f04fb.php?ver=3.2.8" type="text/css" media="all"> <script defer="" id="toc-front-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgdG9jcGx1cyA9IHsidmlzaWJpbGl0eV9zaG93IjoiQW56ZWlnZW4iLCJ2aXNpYmlsaXR5X2hpZGUiOiJBdXNibGVuZGVuIiwidmlzaWJpbGl0eV9oaWRlX2J5X2RlZmF1bHQiOiIxIiwid2lkdGgiOiJBdXRvIn07Ci8qIF1dPiAqLwo="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_93d421fd7576b0ca9c359ffe2fa16113.php?ver=20151215" id="aasta-skip-link-focus-fix-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.7.2" id="katex-js"></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=UnpSS38vU0joHj5" id="enlighterjs-js"></script> <script defer="" id="enlighterjs-js-after" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwohZnVuY3Rpb24oZSxuKXtpZigidW5kZWZpbmVkIiE9dHlwZW9mIEVubGlnaHRlckpTKXt2YXIgbz17InNlbGVjdG9ycyI6eyJibG9jayI6InByZS5FbmxpZ2h0ZXJKU1JBVyIsImlubGluZSI6ImNvZGUuRW5saWdodGVySlNSQVcifSwib3B0aW9ucyI6eyJpbmRlbnQiOjQsImFtcGVyc2FuZENsZWFudXAiOnRydWUsImxpbmVob3ZlciI6dHJ1ZSwicmF3Y29kZURiY2xpY2siOnRydWUsInRleHRPdmVyZmxvdyI6ImJyZWFrIiwibGluZW51bWJlcnMiOmZhbHNlLCJ0aGVtZSI6ImNsYXNzaWMiLCJsYW5ndWFnZSI6ImdlbmVyaWMiLCJyZXRhaW5Dc3NDbGFzc2VzIjpmYWxzZSwiY29sbGFwc2UiOmZhbHNlLCJ0b29sYmFyT3V0ZXIiOiIiLCJ0b29sYmFyVG9wIjoie0JUTl9SQVd9e0JUTl9DT1BZfXtCVE5fV0lORE9XfXtCVE5fV0VCU0lURX0iLCJ0b29sYmFyQm90dG9tIjoiIn19OyhlLkVubGlnaHRlckpTSU5JVD1mdW5jdGlvbigpe0VubGlnaHRlckpTLmluaXQoby5zZWxlY3RvcnMuYmxvY2ssby5zZWxlY3RvcnMuaW5saW5lLG8ub3B0aW9ucyl9KSgpfWVsc2V7KG4mJihuLmVycm9yfHxuLmxvZyl8fGZ1bmN0aW9uKCl7fSkoIkVycm9yOiBFbmxpZ2h0ZXJKUyByZXNvdXJjZXMgbm90IGxvYWRlZCB5ZXQhIil9fSh3aW5kb3csY29uc29sZSk7Ci8qIF1dPiAqLwo="></script> <script type="text/javascript" id="jetpack-stats-js-before">_stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"195943667\",\"post\":\"0\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]); _stq.push([ "clickTrackerInit", "195943667", "0" ]);</script> <script type="text/javascript" src="https://stats.wp.com/e-202510.js" id="jetpack-stats-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="gt_widget_script_62673750-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['62673750'] = {"default_language":"de","languages":["de","en","fr","zh-CN","nl","it","es","da","pt"],"url_structure":"none","native_language_names":1,"flag_style":"2d","flag_size":24,"wrapper_selector":"#gtranslate_menu_wrapper_37060","alt_flags":[],"switcher_open_direction":"top","switcher_horizontal_position":"inline","switcher_text_color":"#666","switcher_arrow_color":"#666","switcher_border_color":"#ccc","switcher_background_color":"#fff","switcher_background_shadow_color":"#efefef","switcher_background_hover_color":"#fff","dropdown_text_color":"#000","dropdown_hover_color":"#fff","dropdown_background_color":"#eee","flags_location":"\/blog\/wp-content\/plugins\/gtranslate\/flags\/"};</script><script src="https://via-internet.de/blog/wp-content/plugins/gtranslate/js/dwf.js?ver=6.7.2" data-no-optimize="1" data-no-minify="1" data-gt-orig-url="/blog/2020/02/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="62673750" defer=""></script><script defer="" id="wpcd-scripts-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgd3BjZGFqYXggPSB7ImFqYXh1cmwiOiJodHRwczpcL1wvdmlhLWludGVybmV0LmRlXC9ibG9nXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAifTsKLyogXV0+ICovCg=="></script> <script defer="" type="text/javascript" src="https://via-internet.de/blog/wp-content/cache/autoptimize/autoptimize_single_231b95969d2321feeaab8fdd8121442a.php" id="wpcd-scripts-js"></script> <script defer="" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js&ver=2.7.5" id="mathjax-js"></script> <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async="" src="https://via-internet.de/blog/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js"></script> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Page Caching using Disk: Enhanced Lazy Loading Database Caching 2/163 queries in 0.254 seconds using Disk Served from: via-internet.de @ 2025-03-08 07:08:06 by W3 Total Cache --> { { { And each corresponding view.py file should have the following content, only the template_name should be different (the name of the template base.html file) Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter from django.views import generic class IndexView(generic.TemplateView): template_name = 'buttons/base.html' from django.views import generic class IndexView(generic.TemplateView): template_name = 'buttons/base.html' from django.views import generic class IndexView(generic.TemplateView): template_name = 'buttons/base.html' So, for each template file, we have to locate the corresponding html file from the install folder (see table above) copy the content between these tags to the template file: Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --> <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --> <!-- Begin Page Content --> <div class="container-fluid"> .... </div> <!-- /.container-fluid --> 22Feb Django | Build a Dashboard with Django and Bootstrap: Part 2 by Ralph Bootstrap, Django 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’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 example, look at the cards with the earnings at the top: 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. We will do this by following these steps: Identify the dynamic parts Move these parts from the template into for frontend view template index.html Modify frontend view.py to generate dynamic content from data Identify dynamic parts How to find the parts, which are dynamic. One way is to ask: Which parts should be on every page (unchanged) and What should change on every page You mostly get the same answers by the question: What are the main components of a web page (including navigation and content) For answer the first question, take a look at the current page and “name” the areas: So, these “names” are also the answer for the 3. Question: sidemenu top bar content And maybe you find additional “names” header footer top menu left and right sidebar Find identified parts in template Next step is, to find the identified parts in our dashboard template dashboard/templates/site/sb-admin-2/base.html This is an easy step, because the developer of the SB Admin 2 template documented their template well: Looking into the code of the template, you will find comment lines describing the content: <!-- Sidebar --> <!-- Topbar --> <!-- Top Search --> <!-- Top Navbar --> <!-- Begin Page Content--> So, it is obvious what do to next: get the dynamic part (lines under)<!-- Begin Page Content--> the green box in the following image move it to the frontend template place some information in the dashboard template, that the real content should be displayed here the blue curly braces in the following image This is the way, the template system of django works: Let’s explain this with a simple example: the page title 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). To achieve this, we have to tell our template system the following: Now, we do the same with the content: Looking at our resulting page, nothing changes. This is the desired result, but how could we be sure, that we really change the structure? Well, let’s make a test and try to include a different content in the dashboard template. Change the lines, where we include the content into this: Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter { MISSING CONTENT { <p>Did you notice the other name of the content: <strong>content_missing</strong>?</p> <p>Change the template, save the file and have a look at the result:</p> <figure class="wp-block-image size-large"><img decoding="async" width="2328" height="448" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202328%20448'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/41_missing_content.png?fit=700%2C135&ssl=1" alt="" class="wp-image-5949 lazy" data-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" data-sizes="auto, (max-width: 2328px) 100vw, 2328px"></figure> <p>Change content back, so your template is working again:</p> <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="">{ MISSING CONTENT { <p>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> </pre> { MISSING CONTENT { <p>Did you notice the other name of the content: <strong>content_missing</strong>?</p> <p>Change the template, save the file and have a look at the result:</p> <figure class="wp-block-image size-large"><img decoding="async" width="2328" height="448" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202328%20448'%3E%3C/svg%3E" data-src="https://i2.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/41_missing_content.png?fit=700%2C135&ssl=1" alt="" class="wp-image-5949 lazy" data-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" data-sizes="auto, (max-width: 2328px) 100vw, 2328px"></figure> <p>Change content back, so your template is working again:</p> <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="">{ MISSING CONTENT { <p>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> </pre> { MISSING CONTENT { Did you notice the other name of the content: content_missing? Change the template, save the file and have a look at the result: Change content back, so your template is working again: Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter { MISSING CONTENT { <p>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> { MISSING CONTENT { <p>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> { MISSING CONTENT { The final step in Part 3 will be replacing all static content of the dashboard with dynamic content. 21Feb Django | Build a Dashboard with Django and Bootstrap: Part 1 by Ralph Bootstrap, Django This is Part 1 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 Building a complete web app isn’t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don’t using tools or framework, which helps and makes our life easier. Django is one of these frameworks: Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development So, let’s get started. Create project For subsequent steps, we will remember our starting directory Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter ❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder... ❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder... ❯ DASHBOARD_ROOT=$(pwd) ❯ echo $DASHBOARD_ROOT ... here you will see your current folder... First step is to create our main Django project Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter ❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate ❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate ❯ django-admin startproject dashboard ❯ mv dashboard project ❯ cd project ❯ python manage.py migrate Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter ❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK. ❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK. ❯ python manage.py runserver 8080 ... Starting development server at http://127.0.0.1:8080/ Quit the server with CTRL-BREAK. View current project in browser Create first apps Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter ❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend ❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend ❯ mkdir -p apps/core ❯ python manage.py startapp Core apps/core ❯ mkdir -p apps/frontend ❯ python manage.py startapp Frontend apps/frontend The folder structure should look like this: Add new apps to project Modify name in apps/core/apps.py Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core' class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core' class CoreConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.core' Modify name in apps/frontend/apps.py Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend' class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend' class FrontendConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'apps.frontend' Modify dashboard/settings.py Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ] INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ] INSTALLED_APPS = [ ... 'apps.core', 'apps.frontend', ] Modify dashboard/urls.py Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ] from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ] from django.contrib import admin from django.urls import path import apps.frontend.views as views urlpatterns = [ path('', views.IndexView.as_view(), name='index'), path('admin/', admin.site.urls), ] Create view Modify view in apps/frontend/views.py Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html' from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html' from django.shortcuts import render from django.views import generic class IndexView(generic.TemplateView): """ IndexView: """ module = 'indexView' template_name = 'frontend/index.html' Create template for frontend View Create template file apps/frontend/templates/frontend/index.html Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter <h1> Frontend: Let's get started </h1> <h1> Frontend: Let's get started </h1> <h1> Frontend: Let's get started </h1> Add template folder to configuration In dashboard/settings.py, add template folder to TEMPLATES Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ] TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ] TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], ] View current project in browser Current folder Structure So far, we have the following folder structure Prepare for administrate your project Create admin user Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter ❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully. ❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully. ❯ python manage.py createsuperuser Username (leave blank to use 'user'): admin Email address: admin@localhost Password: Password (again): Superuser created successfully. Add Bootstrap support Download requires files for Bootstrap, jQuery and PopperJS. Or download this prepared archiv and unzip the files unter dashboard. Run the scripts in $DASHBOARD_ROOT Hint: You need to install PowerShell before running the scripts. Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter > cd $DASHBOARD_ROOT > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1 > cd $DASHBOARD_ROOT > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1 > cd $DASHBOARD_ROOT > ./download_bootstrap.ps1 > ./download_jquery.ps1 > ./download_popperjs.ps1 download_bootstrap.ps1 Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter #!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' #!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' #!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $global:ProgressPreference = 'SilentlyContinue' $response = Invoke-WebRequest https://getbootstrap.com/ $downloadlink = $response.links | Where-Object { $_.href -like "*download/" } | foreach-object { $_.href } | select-object -first 1 $downloadpage = Invoke-WebRequest https://getbootstrap.com$downloadlink $dist_download_url = $downloadpage.links | where-object { $_.href -like "*-dist.zip" } | foreach-object { $_.href } $dist_version = $dist_download_url.split("/")[-2].replace("v","") $dist_zip = "$ROOT\${dist_version}.zip" Write-Host "Download $dist_zip from $dist_download_url" Invoke-WebRequest $dist_download_url -O $dist_zip Write-Host "Unpack to assets\vendor\bootstrap\${dist_version}" $fldr_bootstrap = "project\dashboard\static\assets\vendor\bootstrap" if (Test-Path -Path $fldr_bootstrap) { Remove-Item -recurse -force $fldr_bootstrap } New-Item -type directory $fldr_bootstrap > $null Expand-Archive $dist_zip -destinationpath $fldr_bootstrap Move-Item $fldr_bootstrap\bootstrap* $fldr_bootstrap\${dist_version} $global:ProgressPreference = 'Continue' download_jquery.ps1 Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter #!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map #!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map #!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "3.7.0" $url_base = "https://code.jquery.com" $destination = "project\dashboard\static\assets\vendor\jquery\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/jquery-${version}.js -O $destination/jquery-${version}.js Invoke-WebRequest $url_base/jquery-${version}.min.map -O $destination/jquery-${version}.min.map download_popperjs.ps1 Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter #!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js #!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js #!/usr/bin/env pwsh $ROOT = Split-Path -Parent $PSSCRIPTROOT $version = "2.11.8" $url_base = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/${version}/umd/" $destination = "project\dashboard\static\assets\vendor\popperjs\$version\js" Write-Host "Prepare destination $destination" if (Test-Path -Path $destination) { Remove-Item -recurse -force $destination > $null } New-Item -type directory $destination > $null Invoke-WebRequest $url_base/popper.js -O $destination/popper.js Finally, the folder structure should look like this: Create site templates in dashboard/templates/site Add templates path to settings File dashboard/settings.py Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ... TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ... TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / '/dashboard/templates', ], ... Add static path to settings File dashboard/settings.py Add as first line Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter import os import os import os Then add / replace at STATIC_URL=... Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ] STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ] STATIC_URL = 'static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'dashboard/static') ] Modify frontend view template File dashboard/apps/frontend/templates/index.html Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter { { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { <p>File <kbd>dashboard/apps/frontend/templates/site/base.html</kbd></p> <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="">{ <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html></pre><h2 class="wp-block-heading">View current status of project</h2><figure class="wp-block-image size-large"><img decoding="async" width="1024" height="778" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20778'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png" alt="" class="wp-image-9682 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-300x228.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-768x583.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1536x1167.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap.png 1714w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure><h2 class="wp-block-heading">Final Result</h2><p>The final result could be found <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project" data-type="link" data-id="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project">here</a>.</p><h2 class="wp-block-heading">Add dashboard from an existing template</h2><p>For a first start, we will use this <a href="https://startbootstrap.com/previews/sb-admin-2/"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824470188863680783027">sb</gwmw>-admin-2 dashboard</a> template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>:</p><figure class="wp-block-image size-full"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/61_dashboard.png" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><h2 class="wp-block-heading">Download required files</h2><p>Bootstrap templates consist of at least 3 different types of files</p><ul class="wp-block-list"><li>main index.html page, responsible for collection all elements and set up your page</li><li>CSS files defining the style of your page</li><li>JavaScript files, containing needed frameworks and code</li></ul><p>So, first start by downloading the sample template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>. Be sure, you start in our project root folder:</p><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="">❯ cd $DASHBOARD_ROOT</pre><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="">❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 </pre><p>Next, find out, what we need for our template in addition to the file <kbd>index.html</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)="</pre><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script></pre><p>That’s a lot of additional files.</p><p>To keep the file structure consistent, these files should be stored under the <kbd>dashboard/static</kbd> folder (same as the bootstrap files before).</p><p>To achieve this, there are <gwmw class="ginger-module-highlighter-mistake-type-2" id="gwmw-15824469384628631344488">two possi</gwmw>bilities:</p><ul class="wp-block-list"><li>Create desired folder and copy each of the source files to the destination folder</li><li><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824469457060378385283">Copy</gwmw> the complete static folder from the <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap">Github Repository</a> for this post.</li></ul><p>We use the second option to keep the focus on creating our dashboard.<gwmw style="display:none;"></gwmw></p><p>So, first, clone the repository:</p><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="">cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap</pre><p>Then, copy the requred files</p><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="">cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard</pre><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 -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard</pre><p>Having everything needed for the dashboard template, the next step is to modify the front-end template</p><p>File <code>dashboard/apps/frontend/templates/frontend/index.html</code></p> <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="">{ { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div></pre> { { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { <p>File <kbd>dashboard/apps/frontend/templates/site/base.html</kbd></p> <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="">{ <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html></pre><h2 class="wp-block-heading">View current status of project</h2><figure class="wp-block-image size-large"><img decoding="async" width="1024" height="778" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20778'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png" alt="" class="wp-image-9682 lazy" data-srcset="https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1024x778.png 1024w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-300x228.png 300w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-768x583.png 768w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap-1536x1167.png 1536w, https://via-internet.de/blog/wp-content/uploads/2023/08/10_base_app_with_bootstrap.png 1714w" data-sizes="auto, (max-width: 1024px) 100vw, 1024px"></figure><h2 class="wp-block-heading">Final Result</h2><p>The final result could be found <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project" data-type="link" data-id="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap/tree/main/project">here</a>.</p><h2 class="wp-block-heading">Add dashboard from an existing template</h2><p>For a first start, we will use this <a href="https://startbootstrap.com/previews/sb-admin-2/"><gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824470188863680783027">sb</gwmw>-admin-2 dashboard</a> template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>:</p><figure class="wp-block-image size-full"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://via-internet.de/blog/wp-content/uploads/2020/02/61_dashboard.png" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><h2 class="wp-block-heading">Download required files</h2><p>Bootstrap templates consist of at least 3 different types of files</p><ul class="wp-block-list"><li>main index.html page, responsible for collection all elements and set up your page</li><li>CSS files defining the style of your page</li><li>JavaScript files, containing needed frameworks and code</li></ul><p>So, first start by downloading the sample template from <a href="https://github.com/BlackrockDigital/startbootstrap-sb-admin-2">here</a>. Be sure, you start in our project root folder:</p><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="">❯ cd $DASHBOARD_ROOT</pre><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="">❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 </pre><p>Next, find out, what we need for our template in addition to the file <kbd>index.html</kbd></p><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)="</pre><pre class="EnlighterJSRAW" data-enlighter-language="shell" data-enlighter-theme="" data-enlighter-highlight="1,2" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script></pre><p>That’s a lot of additional files.</p><p>To keep the file structure consistent, these files should be stored under the <kbd>dashboard/static</kbd> folder (same as the bootstrap files before).</p><p>To achieve this, there are <gwmw class="ginger-module-highlighter-mistake-type-2" id="gwmw-15824469384628631344488">two possi</gwmw>bilities:</p><ul class="wp-block-list"><li>Create desired folder and copy each of the source files to the destination folder</li><li><gwmw class="ginger-module-highlighter-mistake-type-1" id="gwmw-15824469457060378385283">Copy</gwmw> the complete static folder from the <a href="https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap">Github Repository</a> for this post.</li></ul><p>We use the second option to keep the focus on creating our dashboard.<gwmw style="display:none;"></gwmw></p><p>So, first, clone the repository:</p><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="">cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap</pre><p>Then, copy the requred files</p><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="">cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard</pre><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 -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard</pre><p>Having everything needed for the dashboard template, the next step is to modify the front-end template</p><p>File <code>dashboard/apps/frontend/templates/frontend/index.html</code></p> <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="">{ { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div></pre> { { { { { <main> <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </main> { File dashboard/apps/frontend/templates/site/base.html Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter { <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html> { <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html> { <!DOCTYPE html> <html> <head> <title>{ <link rel="stylesheet" href="{ </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navigation</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="polls">Polls</a> </li> </ul> </div> </div> </nav> <div class="container"> { { </div> <script src="{ </body> </html> View current status of project Final Result The final result could be found here. Add dashboard from an existing template For a first start, we will use this sb-admin-2 dashboard template from here: Download required files Bootstrap templates consist of at least 3 different types of files main index.html page, responsible for collection all elements and set up your page CSS files defining the style of your page JavaScript files, containing needed frameworks and code So, first start by downloading the sample template from here. Be sure, you start in our project root folder: Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter ❯ cd $DASHBOARD_ROOT ❯ cd $DASHBOARD_ROOT ❯ cd $DASHBOARD_ROOT Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter ❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 ❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 ❯ git clone https://github.com/BlackrockDigital/startbootstrap-sb-admin-2 install/sb-admin-2 Next, find out, what we need for our template in addition to the file index.html Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter ❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)=" ❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)=" ❯ cd install/sb-admin-2 ❯ grep -E "<(link|script)" index.html | grep -E "(href|src)=" Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="js/sb-admin-2.min.js"></script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="js/demo/chart-area-demo.js"></script> <script src="js/demo/chart-pie-demo.js"></script> That’s a lot of additional files. To keep the file structure consistent, these files should be stored under the dashboard/static folder (same as the bootstrap files before). To achieve this, there are two possibilities: Create desired folder and copy each of the source files to the destination folder Copy the complete static folder from the Github Repository for this post. We use the second option to keep the focus on creating our dashboard. So, first, clone the repository: Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap cd $DASHBOARD_ROOT/install https://github.com/r14r/Django_Dashboard-with-Django-and-Bootstrap Then, copy the requred files Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard cd $DASHBOARD_ROOT cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/static project/dashboard Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard cp -R install/Django_Dashboard-with-Django-and-Bootstrap/project/dashboard/templates dashboard Having everything needed for the dashboard template, the next step is to modify the front-end template File dashboard/apps/frontend/templates/frontend/index.html Plain text Copy to clipboard Open code in new window EnlighterJS 3 Syntax Highlighter { { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div> { { { {<h3 class="wp-block-heading">View current project in browser</h3><figure class="wp-block-image size-large"><img decoding="async" width="1000" height="870" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20870'%3E%3C/svg%3E" data-src="https://i1.wp.com/blog.via-internet.de/wp-content/uploads/2020/02/61_dashboard.png?fit=700%2C609&ssl=1" alt="" class="wp-image-5886 lazy" data-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" data-sizes="auto, (max-width: 1000px) 100vw, 1000px"></figure><p>Perfect. We are done with the basic setup.</p><p>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/<gwmw class="ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1" id="gwmw-15824468928077326673877">sb</gwmw>-admin-2/base.html</code></p><p>For example, look at the cards with the earnings at the top:</p><figure class="wp-block-table alignwide"><table><tbody><tr><td><img decoding="async" width="500" height="168" class="wp-image-5890 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="154" class="wp-image-5888 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20154'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_monthly_codeX.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr><tr><td><img decoding="async" width="500" height="168" class="wp-image-5889 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20168'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_ui.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td><td><img decoding="async" width="500" height="158" class="wp-image-5891 lazy" style="width: 500px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20158'%3E%3C/svg%3E" data-src="http://blog.via-internet.de/wp-content/uploads/2020/02/71_static_data_earnings_annual_code.png" alt="" data-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" data-sizes="auto, (max-width: 500px) 100vw, 500px"></td></tr></tbody></table></figure><p>To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.</p><p>This will be described in the next step: <a href="https://blog.via-internet.de/en/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-2">Part 2: Prepare for dynamic content</a></p><div class="page-links">Pages: <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/" class="post-page-numbers">1</a> <a href="https://via-internet.de/blog/2020/02/21/build-a-dashboard-with-django-and-bootstrap-part-1/2/" class="post-page-numbers">2</a></div> { { { { View current project in browser 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 example, look at the cards with the earnings at the top: To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file. This will be described in the next step: Part 2: Prepare for dynamic content Pages: 1 2 We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent. Cookie SettingsAccept All Manage consent Close Privacy Overview This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ... Necessary Necessary Always Enabled Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously. Cookie Duration Description cookielawinfo-checkbox-analytics 11 months This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics". cookielawinfo-checkbox-functional 11 months The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional". cookielawinfo-checkbox-necessary 11 months This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary". cookielawinfo-checkbox-others 11 months This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other. cookielawinfo-checkbox-performance 11 months This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance". viewed_cookie_policy 11 months The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. Functional Functional Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features. Performance Performance Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors. Analytics Analytics Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc. Advertisement Advertisement Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads. Others Others Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet. SAVE & ACCEPT