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
import dashboard.apps.components.buttons.views as ButtonsViews
import dashboard.apps.components.cards.views as CardsViews
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
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
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
< 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" >< span id= "Namespaces_and_structure" > Namespaces and structure < /span >< /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
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" >< span id= "Resulting_folder_structure_and_file_content" > Resulting folder structure and file content < /span >< /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
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
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
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
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" >< span id= "Let8217s_finally_check_the_namespace_structure" > Let’s finally check the namespace structure: < /span >< /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/apps/utilities/urls. py
./dashboard/apps/components/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= "{
< 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 = [
]< /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" >< span id= "Preparing_required_components_and_pages" > Preparing required components and pages < /span >< /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 "><span id=" Replacing_Projects_with_dynamic_data ">Replacing Projects with dynamic data</span></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"><span id="Create_templates_for_side_menu_pages">Create templates for side menu pages</span></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" >
< !-- /.container-fluid -- >< /pre >< div class = "entry-meta mt-4 mb-0 pt-3 theme-b-top" > < span class = "tag-links" > < a href= "https://via-internet.de/blog/tag/django/" rel= "tag" > Django < /a >< a href= "https://via-internet.de/blog/tag/python/" rel= "tag" > Python < /a > < /span >< /div >< article class = "theme-comment-form wow animate fadeInUp" data-wow-delay= ".3s" style= "visibility: hidden; animation-delay: 0.3s; animation-name: none;" >< div id= "respond" class = "comment-respond" >< h3 id= "reply-title" class = "comment-reply-title" >< div class = "theme-comment-title" >< h4 > Leave a Reply < /h4 >< /div > < small >< a rel= "nofollow" id= "cancel-comment-reply-link" href= "/blog/2020/02/23/build-a-dashboard-with-django-and-bootstrap-part-3/#respond" style= "display:none;" > Cancel reply < /a >< /small >< /h3 >< form action= "https://via-internet.de/blog/wp-comments-post.php" method= "post" id= "action" class = "comment-form" >< p class = "comment-notes" >< span id= "email-notes" > Your email address will not be published. < /span > < span class = "required-field-message" > Required fields are marked < span class = "required" > * < /span >< /span >< /p >< div class = "form-group" >< label > Comment < /label >< textarea id= "comments" rows= "5" class = "form-control" name= "comment" type= "text" >< /textarea >< /div >< div class = "form-group" >< label > Name < span class = "required" > * < /span >< /label >< input class = "form-control" name= "author" id= "author" value= "" type= "text" >< /div >< div class = "form-group" >< label > Email < span class = "required" > * < /span >< /label >< input class = "form-control" name= "email" id= "email" value= "" type= "email" >< /div >< p class = "comment-form-cookies-consent" >< input id= "wp-comment-cookies-consent" name= "wp-comment-cookies-consent" type= "checkbox" value= "yes" > < label for = "wp-comment-cookies-consent" > Save my name, email, and website in this browser for the next time I comment. < /label >< /p >< p class = "form-submit" >< input name= "submit" type= "submit" id= "send_button" class = "submit" value= "Submit" > < input type= "hidden" name= "comment_post_ID" value= "5959" id= "comment_post_ID" > < input type= "hidden" name= "comment_parent" id= "comment_parent" value= "0" >< /p >< /form >< /div >< 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/" > 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-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({
inlineMath: [['$','$'], [" \\ ( "," \\ ) "]],
displayMath: [['$$', '$$'], [" \\ [ ", " \\ ] "]],
equationNumbers: {autoNumber: " AMS ",
});</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-includes/js/comment-reply.min.js?ver=6.7.2" id="comment-reply-js" data-wp-strategy="async"></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\":\"5959\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}" ) ]) ;
_stq. push ([ "clickTrackerInit" , "195943667" , "5959" ]) ; < /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_75611056-js-before" > window. gtranslateSettings = /* document.write */ window. gtranslateSettings || {} ;window. gtranslateSettings [ '75611056' ] = { "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_52292" , "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/23/build-a-dashboard-with-django-and-bootstrap-part-3/" data-gt-orig-domain= "via-internet.de" data-gt-widget-id= "75611056" defer= "" >< /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
Database Caching 139 / 154 queries in 0.346 seconds using Disk
Served from: via-internet. de @ 2025 - 03 - 05 04 : 35 : 12 by W3 Total Cache
-- >< /article >< /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"><span id="Namespaces_and_structure">Namespaces and structure</span></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"><span id="Resulting_folder_structure_and_file_content">Resulting folder structure and file content</span></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"><span id="Let8217s_finally_check_the_namespace_structure">Let’s finally check the namespace structure:</span></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"><span id="Preparing_required_components_and_pages">Preparing required components and pages</span></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"><span id="Replacing_Projects_with_dynamic_data">Replacing Projects with dynamic data</span></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"><span id="Create_templates_for_side_menu_pages">Create templates for side menu pages</span></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><div class="entry-meta mt-4 mb-0 pt-3 theme-b-top"> <span class="tag-links"> <a href="https://via-internet.de/blog/tag/django/" rel="tag">Django</a><a href="https://via-internet.de/blog/tag/python/" rel="tag">Python</a> </span></div><article class="theme-comment-form wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title"><div class="theme-comment-title"><h4>Leave a Reply</h4></div> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/2020/02/23/build-a-dashboard-with-django-and-bootstrap-part-3/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://via-internet.de/blog/wp-comments-post.php" method="post" id="action" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><div class="form-group"><label>Comment</label><textarea id="comments" rows="5" class="form-control" name="comment" type="text"></textarea></div><div class="form-group"><label>Name<span class="required">*</span></label><input class="form-control" name="author" id="author" value="" type="text"></div><div class="form-group"><label>Email<span class="required">*</span></label><input class="form-control" name="email" id="email" value="" type="email"></div><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p><p class="form-submit"><input name="submit" type="submit" id="send_button" class="submit" value="Submit"> <input type="hidden" name="comment_post_ID" value="5959" id="comment_post_ID"> <input type="hidden" name="comment_parent" id="comment_parent" value="0"></p></form></div><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/"> 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-includes/js/comment-reply.min.js?ver=6.7.2" id="comment-reply-js" data-wp-strategy="async"></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\":\"5959\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]);
_stq.push([ "clickTrackerInit", "195943667", "5959" ]);</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_75611056-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['75611056'] = {"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_52292","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/23/build-a-dashboard-with-django-and-bootstrap-part-3/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="75611056" defer=""></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 139/154 queries in 0.346 seconds using Disk
Served from: via-internet.de @ 2025-03-05 04:35:12 by W3 Total Cache
--></article></pre></pre></pre></pre></pre>
{
{
{
<h1 style="text-align: center">CARDS</h1>
{
dashboard/apps/components/cards/templates/buttons/base.html
< 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" >< span id= "Namespaces_and_structure" > Namespaces and structure < /span >< /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
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" >< span id= "Resulting_folder_structure_and_file_content" > Resulting folder structure and file content < /span >< /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
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
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
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
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" >< span id= "Let8217s_finally_check_the_namespace_structure" > Let’s finally check the namespace structure: < /span >< /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/apps/utilities/urls.py
./dashboard/apps/components/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= "{
< 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 = [
]< /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" >< span id= "Preparing_required_components_and_pages" > Preparing required components and pages < /span >< /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 "><span id=" Replacing_Projects_with_dynamic_data ">Replacing Projects with dynamic data</span></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 "><span id=" Create_templates_for_side_menu_pages ">Create templates for side menu pages</span></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 ">
<!-- /.container-fluid --></pre><div class=" entry-meta mt- 4 mb- 0 pt- 3 theme-b-top "> <span class=" tag-links "> <a href=" https://via-internet.de/blog/tag/django/ " rel=" tag ">Django</a><a href=" https://via-internet.de/blog/tag/python/ " rel=" tag ">Python</a> </span></div><article class=" theme-comment-form wow animate fadeInUp " data-wow-delay=" .3 s " style=" visibility: hidden; animation-delay: 0.3 s; animation-name: none; "><div id=" respond " class=" comment-respond "><h3 id=" reply-title " class=" comment-reply-title "><div class=" theme-comment-title "><h4>Leave a Reply</h4></div> <small><a rel=" nofollow " id=" cancel-comment-reply-link " href=" /blog/ 2020 / 02 / 23 /build-a-dashboard- with -django- and -bootstrap-part- 3 / #respond" style="display:none;">Cancel reply</a></small></h3><form action="https://via-internet.de/blog/wp-comments-post.php" method="post" id="action" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><div class="form-group"><label>Comment</label><textarea id="comments" rows="5" class="form-control" name="comment" type="text"></textarea></div><div class="form-group"><label>Name<span class="required">*</span></label><input class="form-control" name="author" id="author" value="" type="text"></div><div class="form-group"><label>Email<span class="required">*</span></label><input class="form-control" name="email" id="email" value="" type="email"></div><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p><p class="form-submit"><input name="submit" type="submit" id="send_button" class="submit" value="Submit"> <input type="hidden" name="comment_post_ID" value="5959" id="comment_post_ID"> <input type="hidden" name="comment_parent" id="comment_parent" value="0"></p></form></div><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/"> 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-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 ({
inlineMath: [[ '$' , '$' ] , [ "\\(" , "\\)" ]] ,
displayMath: [[ '$$' , '$$' ] , [ "\\[" , "\\]" ]] ,
equationNumbers: { autoNumber: "AMS" ,
}) ; < /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-includes/js/comment-reply.min.js?ver=6.7.2" id= "comment-reply-js" data-wp-strategy= "async" >< /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\":\"5959\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}" ) ]) ;
_stq. push ([ "clickTrackerInit" , "195943667" , "5959" ]) ; < /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_75611056-js-before" > window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {} ;window.gtranslateSettings [ '75611056' ] = { "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_52292" , "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/23/build-a-dashboard-with-django-and-bootstrap-part-3/" data-gt-orig-domain= "via-internet.de" data-gt-widget-id= "75611056" defer= "" >< /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
Database Caching 139 / 154 queries in 0.346 seconds using Disk
Served from : via-internet.de @ 2025 - 03 - 05 04 : 35 : 12 by W3 Total Cache
-- >< /article >< /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"><span id="Namespaces_and_structure">Namespaces and structure</span></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"><span id="Resulting_folder_structure_and_file_content">Resulting folder structure and file content</span></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"><span id="Let8217s_finally_check_the_namespace_structure">Let’s finally check the namespace structure:</span></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"><span id="Preparing_required_components_and_pages">Preparing required components and pages</span></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"><span id="Replacing_Projects_with_dynamic_data">Replacing Projects with dynamic data</span></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"><span id="Create_templates_for_side_menu_pages">Create templates for side menu pages</span></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><div class="entry-meta mt-4 mb-0 pt-3 theme-b-top"> <span class="tag-links"> <a href="https://via-internet.de/blog/tag/django/" rel="tag">Django</a><a href="https://via-internet.de/blog/tag/python/" rel="tag">Python</a> </span></div><article class="theme-comment-form wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title"><div class="theme-comment-title"><h4>Leave a Reply</h4></div> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/2020/02/23/build-a-dashboard-with-django-and-bootstrap-part-3/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://via-internet.de/blog/wp-comments-post.php" method="post" id="action" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><div class="form-group"><label>Comment</label><textarea id="comments" rows="5" class="form-control" name="comment" type="text"></textarea></div><div class="form-group"><label>Name<span class="required">*</span></label><input class="form-control" name="author" id="author" value="" type="text"></div><div class="form-group"><label>Email<span class="required">*</span></label><input class="form-control" name="email" id="email" value="" type="email"></div><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p><p class="form-submit"><input name="submit" type="submit" id="send_button" class="submit" value="Submit"> <input type="hidden" name="comment_post_ID" value="5959" id="comment_post_ID"> <input type="hidden" name="comment_parent" id="comment_parent" value="0"></p></form></div><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/"> 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-includes/js/comment-reply.min.js?ver=6.7.2" id="comment-reply-js" data-wp-strategy="async"></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\":\"5959\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]);
_stq.push([ "clickTrackerInit", "195943667", "5959" ]);</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_75611056-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['75611056'] = {"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_52292","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/23/build-a-dashboard-with-django-and-bootstrap-part-3/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="75611056" defer=""></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 139/154 queries in 0.346 seconds using Disk
Served from: via-internet.de @ 2025-03-05 04:35:12 by W3 Total Cache
--></article></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.pydashboard/apps/utilities/info/views.pyThe corresponding url mapping (urls.py) could look like this:
import dashboard.apps.components.info.views as ComponentInfoViews
import dashboard.apps.utilities.info.views as UtilitiesInfoViews
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
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
from django. urls import path
from django. urls . conf import include
from dashboard. apps . frontend . views import IndexView
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
from django. urls import path
import dashboard. apps . components . buttons . views as ButtonsViews
import dashboard. apps . components . cards . views as CardsViews
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
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
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
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
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: ./dashboard/apps/utilities/urls.py
./dashboard/apps/components/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.pyapp:utilities
These namespaces must be used in the template files, for example:
< 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 = [
]< /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" >< span id= "Preparing_required_components_and_pages" > Preparing required components and pages < /span >< /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 "><span id=" Replacing_Projects_with_dynamic_data ">Replacing Projects with dynamic data</span></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"><span id="Create_templates_for_side_menu_pages">Create templates for side menu pages</span></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" >
< !-- /.container-fluid -- >< /pre >< div class = "entry-meta mt-4 mb-0 pt-3 theme-b-top" > < span class = "tag-links" > < a href= "https://via-internet.de/blog/tag/django/" rel= "tag" > Django < /a >< a href= "https://via-internet.de/blog/tag/python/" rel= "tag" > Python < /a > < /span >< /div >< article class = "theme-comment-form wow animate fadeInUp" data-wow-delay= ".3s" style= "visibility: hidden; animation-delay: 0.3s; animation-name: none;" >< div id= "respond" class = "comment-respond" >< h3 id= "reply-title" class = "comment-reply-title" >< div class = "theme-comment-title" >< h4 > Leave a Reply < /h4 >< /div > < small >< a rel= "nofollow" id= "cancel-comment-reply-link" href= "/blog/2020/02/23/build-a-dashboard-with-django-and-bootstrap-part-3/#respond" style= "display:none;" > Cancel reply < /a >< /small >< /h3 >< form action= "https://via-internet.de/blog/wp-comments-post.php" method= "post" id= "action" class = "comment-form" >< p class = "comment-notes" >< span id= "email-notes" > Your email address will not be published. < /span > < span class = "required-field-message" > Required fields are marked < span class = "required" > * < /span >< /span >< /p >< div class = "form-group" >< label > Comment < /label >< textarea id= "comments" rows= "5" class = "form-control" name= "comment" type= "text" >< /textarea >< /div >< div class = "form-group" >< label > Name < span class = "required" > * < /span >< /label >< input class = "form-control" name= "author" id= "author" value= "" type= "text" >< /div >< div class = "form-group" >< label > Email < span class = "required" > * < /span >< /label >< input class = "form-control" name= "email" id= "email" value= "" type= "email" >< /div >< p class = "comment-form-cookies-consent" >< input id= "wp-comment-cookies-consent" name= "wp-comment-cookies-consent" type= "checkbox" value= "yes" > < label for = "wp-comment-cookies-consent" > Save my name, email, and website in this browser for the next time I comment. < /label >< /p >< p class = "form-submit" >< input name= "submit" type= "submit" id= "send_button" class = "submit" value= "Submit" > < input type= "hidden" name= "comment_post_ID" value= "5959" id= "comment_post_ID" > < input type= "hidden" name= "comment_parent" id= "comment_parent" value= "0" >< /p >< /form >< /div >< 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/" > 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-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({
inlineMath: [['$','$'], [" \\ ( "," \\ ) "]],
displayMath: [['$$', '$$'], [" \\ [ ", " \\ ] "]],
equationNumbers: {autoNumber: " AMS ",
});</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-includes/js/comment-reply.min.js?ver=6.7.2" id="comment-reply-js" data-wp-strategy="async"></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\":\"5959\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}" ) ]) ;
_stq. push ([ "clickTrackerInit" , "195943667" , "5959" ]) ; < /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_75611056-js-before" > window. gtranslateSettings = /* document.write */ window. gtranslateSettings || {} ;window. gtranslateSettings [ '75611056' ] = { "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_52292" , "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/23/build-a-dashboard-with-django-and-bootstrap-part-3/" data-gt-orig-domain= "via-internet.de" data-gt-widget-id= "75611056" defer= "" >< /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
Database Caching 139 / 154 queries in 0.346 seconds using Disk
Served from: via-internet. de @ 2025 - 03 - 05 04 : 35 : 12 by W3 Total Cache
-- >< /article >< /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"><span id="Preparing_required_components_and_pages">Preparing required components and pages</span></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"><span id="Replacing_Projects_with_dynamic_data">Replacing Projects with dynamic data</span></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"><span id="Create_templates_for_side_menu_pages">Create templates for side menu pages</span></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><div class="entry-meta mt-4 mb-0 pt-3 theme-b-top"> <span class="tag-links"> <a href="https://via-internet.de/blog/tag/django/" rel="tag">Django</a><a href="https://via-internet.de/blog/tag/python/" rel="tag">Python</a> </span></div><article class="theme-comment-form wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title"><div class="theme-comment-title"><h4>Leave a Reply</h4></div> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/2020/02/23/build-a-dashboard-with-django-and-bootstrap-part-3/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://via-internet.de/blog/wp-comments-post.php" method="post" id="action" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><div class="form-group"><label>Comment</label><textarea id="comments" rows="5" class="form-control" name="comment" type="text"></textarea></div><div class="form-group"><label>Name<span class="required">*</span></label><input class="form-control" name="author" id="author" value="" type="text"></div><div class="form-group"><label>Email<span class="required">*</span></label><input class="form-control" name="email" id="email" value="" type="email"></div><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p><p class="form-submit"><input name="submit" type="submit" id="send_button" class="submit" value="Submit"> <input type="hidden" name="comment_post_ID" value="5959" id="comment_post_ID"> <input type="hidden" name="comment_parent" id="comment_parent" value="0"></p></form></div><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/"> 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-includes/js/comment-reply.min.js?ver=6.7.2" id="comment-reply-js" data-wp-strategy="async"></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\":\"5959\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]);
_stq.push([ "clickTrackerInit", "195943667", "5959" ]);</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_75611056-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['75611056'] = {"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_52292","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/23/build-a-dashboard-with-django-and-bootstrap-part-3/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="75611056" defer=""></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 139/154 queries in 0.346 seconds using Disk
Served from: via-internet.de @ 2025-03-05 04:35:12 by W3 Total Cache
--></article></pre></pre></pre>
<a href="{
<a href="{
< 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 = [
]< /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" >< span id= "Preparing_required_components_and_pages" > Preparing required components and pages < /span >< /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 "><span id=" Replacing_Projects_with_dynamic_data ">Replacing Projects with dynamic data</span></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"><span id="Create_templates_for_side_menu_pages">Create templates for side menu pages</span></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" >
< !-- /.container-fluid -- >< /pre >< div class = "entry-meta mt-4 mb-0 pt-3 theme-b-top" > < span class = "tag-links" > < a href= "https://via-internet.de/blog/tag/django/" rel= "tag" > Django < /a >< a href= "https://via-internet.de/blog/tag/python/" rel= "tag" > Python < /a > < /span >< /div >< article class = "theme-comment-form wow animate fadeInUp" data-wow-delay= ".3s" style= "visibility: hidden; animation-delay: 0.3s; animation-name: none;" >< div id= "respond" class = "comment-respond" >< h3 id= "reply-title" class = "comment-reply-title" >< div class = "theme-comment-title" >< h4 > Leave a Reply < /h4 >< /div > < small >< a rel= "nofollow" id= "cancel-comment-reply-link" href= "/blog/2020/02/23/build-a-dashboard-with-django-and-bootstrap-part-3/#respond" style= "display:none;" > Cancel reply < /a >< /small >< /h3 >< form action= "https://via-internet.de/blog/wp-comments-post.php" method= "post" id= "action" class = "comment-form" >< p class = "comment-notes" >< span id= "email-notes" > Your email address will not be published. < /span > < span class = "required-field-message" > Required fields are marked < span class = "required" > * < /span >< /span >< /p >< div class = "form-group" >< label > Comment < /label >< textarea id= "comments" rows= "5" class = "form-control" name= "comment" type= "text" >< /textarea >< /div >< div class = "form-group" >< label > Name < span class = "required" > * < /span >< /label >< input class = "form-control" name= "author" id= "author" value= "" type= "text" >< /div >< div class = "form-group" >< label > Email < span class = "required" > * < /span >< /label >< input class = "form-control" name= "email" id= "email" value= "" type= "email" >< /div >< p class = "comment-form-cookies-consent" >< input id= "wp-comment-cookies-consent" name= "wp-comment-cookies-consent" type= "checkbox" value= "yes" > < label for = "wp-comment-cookies-consent" > Save my name, email, and website in this browser for the next time I comment. < /label >< /p >< p class = "form-submit" >< input name= "submit" type= "submit" id= "send_button" class = "submit" value= "Submit" > < input type= "hidden" name= "comment_post_ID" value= "5959" id= "comment_post_ID" > < input type= "hidden" name= "comment_parent" id= "comment_parent" value= "0" >< /p >< /form >< /div >< 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/" > 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-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({
inlineMath: [['$','$'], [" \\ ( "," \\ ) "]],
displayMath: [['$$', '$$'], [" \\ [ ", " \\ ] "]],
equationNumbers: {autoNumber: " AMS ",
});</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-includes/js/comment-reply.min.js?ver=6.7.2" id="comment-reply-js" data-wp-strategy="async"></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\":\"5959\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}" ) ]) ;
_stq. push ([ "clickTrackerInit" , "195943667" , "5959" ]) ; < /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_75611056-js-before" > window. gtranslateSettings = /* document.write */ window. gtranslateSettings || {} ;window. gtranslateSettings [ '75611056' ] = { "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_52292" , "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/23/build-a-dashboard-with-django-and-bootstrap-part-3/" data-gt-orig-domain= "via-internet.de" data-gt-widget-id= "75611056" defer= "" >< /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
Database Caching 139 / 154 queries in 0.346 seconds using Disk
Served from: via-internet. de @ 2025 - 03 - 05 04 : 35 : 12 by W3 Total Cache
-- >< /article >< /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"><span id="Preparing_required_components_and_pages">Preparing required components and pages</span></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"><span id="Replacing_Projects_with_dynamic_data">Replacing Projects with dynamic data</span></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"><span id="Create_templates_for_side_menu_pages">Create templates for side menu pages</span></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><div class="entry-meta mt-4 mb-0 pt-3 theme-b-top"> <span class="tag-links"> <a href="https://via-internet.de/blog/tag/django/" rel="tag">Django</a><a href="https://via-internet.de/blog/tag/python/" rel="tag">Python</a> </span></div><article class="theme-comment-form wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title"><div class="theme-comment-title"><h4>Leave a Reply</h4></div> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/2020/02/23/build-a-dashboard-with-django-and-bootstrap-part-3/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://via-internet.de/blog/wp-comments-post.php" method="post" id="action" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><div class="form-group"><label>Comment</label><textarea id="comments" rows="5" class="form-control" name="comment" type="text"></textarea></div><div class="form-group"><label>Name<span class="required">*</span></label><input class="form-control" name="author" id="author" value="" type="text"></div><div class="form-group"><label>Email<span class="required">*</span></label><input class="form-control" name="email" id="email" value="" type="email"></div><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p><p class="form-submit"><input name="submit" type="submit" id="send_button" class="submit" value="Submit"> <input type="hidden" name="comment_post_ID" value="5959" id="comment_post_ID"> <input type="hidden" name="comment_parent" id="comment_parent" value="0"></p></form></div><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/"> 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-includes/js/comment-reply.min.js?ver=6.7.2" id="comment-reply-js" data-wp-strategy="async"></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\":\"5959\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]);
_stq.push([ "clickTrackerInit", "195943667", "5959" ]);</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_75611056-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['75611056'] = {"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_52292","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/23/build-a-dashboard-with-django-and-bootstrap-part-3/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="75611056" defer=""></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 139/154 queries in 0.346 seconds using Disk
Served from: via-internet.de @ 2025-03-05 04:35:12 by W3 Total Cache
--></article></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:
pip install django-extensions
pip install django-extensions
pip install django-extensions Add Django Extensions to the INSTALLED_APPS
INSTALLED_APPS = [
...
'django_extensions'
]
INSTALLED_APPS = [
...
'django_extensions'
] Show URLs and Namespaces (only for out apps, admin urls are removed)
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:
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 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 <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 "><span id=" Replacing_Projects_with_dynamic_data ">Replacing Projects with dynamic data</span></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"><span id="Create_templates_for_side_menu_pages">Create templates for side menu pages</span></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" >
< !-- /.container-fluid -- >< /pre >< div class = "entry-meta mt-4 mb-0 pt-3 theme-b-top" > < span class = "tag-links" > < a href= "https://via-internet.de/blog/tag/django/" rel= "tag" > Django < /a >< a href= "https://via-internet.de/blog/tag/python/" rel= "tag" > Python < /a > < /span >< /div >< article class = "theme-comment-form wow animate fadeInUp" data-wow-delay= ".3s" style= "visibility: hidden; animation-delay: 0.3s; animation-name: none;" >< div id= "respond" class = "comment-respond" >< h3 id= "reply-title" class = "comment-reply-title" >< div class = "theme-comment-title" >< h4 > Leave a Reply < /h4 >< /div > < small >< a rel= "nofollow" id= "cancel-comment-reply-link" href= "/blog/2020/02/23/build-a-dashboard-with-django-and-bootstrap-part-3/#respond" style= "display:none;" > Cancel reply < /a >< /small >< /h3 >< form action= "https://via-internet.de/blog/wp-comments-post.php" method= "post" id= "action" class = "comment-form" >< p class = "comment-notes" >< span id= "email-notes" > Your email address will not be published. < /span > < span class = "required-field-message" > Required fields are marked < span class = "required" > * < /span >< /span >< /p >< div class = "form-group" >< label > Comment < /label >< textarea id= "comments" rows= "5" class = "form-control" name= "comment" type= "text" >< /textarea >< /div >< div class = "form-group" >< label > Name < span class = "required" > * < /span >< /label >< input class = "form-control" name= "author" id= "author" value= "" type= "text" >< /div >< div class = "form-group" >< label > Email < span class = "required" > * < /span >< /label >< input class = "form-control" name= "email" id= "email" value= "" type= "email" >< /div >< p class = "comment-form-cookies-consent" >< input id= "wp-comment-cookies-consent" name= "wp-comment-cookies-consent" type= "checkbox" value= "yes" > < label for = "wp-comment-cookies-consent" > Save my name, email, and website in this browser for the next time I comment. < /label >< /p >< p class = "form-submit" >< input name= "submit" type= "submit" id= "send_button" class = "submit" value= "Submit" > < input type= "hidden" name= "comment_post_ID" value= "5959" id= "comment_post_ID" > < input type= "hidden" name= "comment_parent" id= "comment_parent" value= "0" >< /p >< /form >< /div >< 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/" > 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-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({
inlineMath: [['$','$'], [" \\ ( "," \\ ) "]],
displayMath: [['$$', '$$'], [" \\ [ ", " \\ ] "]],
equationNumbers: {autoNumber: " AMS ",
});</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-includes/js/comment-reply.min.js?ver=6.7.2" id="comment-reply-js" data-wp-strategy="async"></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\":\"5959\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}" ) ]) ;
_stq. push ([ "clickTrackerInit" , "195943667" , "5959" ]) ; < /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_75611056-js-before" > window. gtranslateSettings = /* document.write */ window. gtranslateSettings || {} ;window. gtranslateSettings [ '75611056' ] = { "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_52292" , "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/23/build-a-dashboard-with-django-and-bootstrap-part-3/" data-gt-orig-domain= "via-internet.de" data-gt-widget-id= "75611056" defer= "" >< /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
Database Caching 139 / 154 queries in 0.346 seconds using Disk
Served from: via-internet. de @ 2025 - 03 - 05 04 : 35 : 12 by W3 Total Cache
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"><span id="Replacing_Projects_with_dynamic_data">Replacing Projects with dynamic data</span></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"><span id="Create_templates_for_side_menu_pages">Create templates for side menu pages</span></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><div class="entry-meta mt-4 mb-0 pt-3 theme-b-top"> <span class="tag-links"> <a href="https://via-internet.de/blog/tag/django/" rel="tag">Django</a><a href="https://via-internet.de/blog/tag/python/" rel="tag">Python</a> </span></div><article class="theme-comment-form wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title"><div class="theme-comment-title"><h4>Leave a Reply</h4></div> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/2020/02/23/build-a-dashboard-with-django-and-bootstrap-part-3/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://via-internet.de/blog/wp-comments-post.php" method="post" id="action" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><div class="form-group"><label>Comment</label><textarea id="comments" rows="5" class="form-control" name="comment" type="text"></textarea></div><div class="form-group"><label>Name<span class="required">*</span></label><input class="form-control" name="author" id="author" value="" type="text"></div><div class="form-group"><label>Email<span class="required">*</span></label><input class="form-control" name="email" id="email" value="" type="email"></div><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p><p class="form-submit"><input name="submit" type="submit" id="send_button" class="submit" value="Submit"> <input type="hidden" name="comment_post_ID" value="5959" id="comment_post_ID"> <input type="hidden" name="comment_parent" id="comment_parent" value="0"></p></form></div><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/"> 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-includes/js/comment-reply.min.js?ver=6.7.2" id="comment-reply-js" data-wp-strategy="async"></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\":\"5959\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]);
_stq.push([ "clickTrackerInit", "195943667", "5959" ]);</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_75611056-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['75611056'] = {"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_52292","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/23/build-a-dashboard-with-django-and-bootstrap-part-3/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="75611056" defer=""></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 139/154 queries in 0.346 seconds using Disk
Served from: via-internet.de @ 2025-03-05 04:35:12 by W3 Total Cache
--></article></pre>
echo "{
{
{
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 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
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
DASHBOARD_ROOT=$(pwd) 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:
< 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" >
<!-- /.container-fluid --> </ pre > < div class = "entry-meta mt-4 mb-0 pt-3 theme-b-top" > < span class = "tag-links" > < a href = "https://via-internet.de/blog/tag/django/" rel = "tag" > Django </ a > < a href = "https://via-internet.de/blog/tag/python/" rel = "tag" > Python </ a > </ span > </ div > < article class = "theme-comment-form wow animate fadeInUp" data-wow-delay = ".3s" style = "visibility: hidden; animation-delay: 0.3s; animation-name: none;" > < div id = "respond" class = "comment-respond" > < h3 id = "reply-title" class = "comment-reply-title" > < div class = "theme-comment-title" > < h4 > Leave a Reply </ h4 > </ div > < small > < a rel = "nofollow" id = "cancel-comment-reply-link" href = "/blog/2020/02/23/build-a-dashboard-with-django-and-bootstrap-part-3/#respond" style = "display:none;" > Cancel reply </ a > </ small > </ h3 > < form action = "https://via-internet.de/blog/wp-comments-post.php" method = "post" id = "action" class = "comment-form" > < p class = "comment-notes" > < span id = "email-notes" > Your email address will not be published. </ span > < span class = "required-field-message" > Required fields are marked < span class = "required" > * </ span > </ span > </ p > < div class = "form-group" > < label > Comment </ label > < textarea id = "comments" rows = "5" class = "form-control" name = "comment" type = "text" > </ textarea > </ div > < div class = "form-group" > < label > Name < span class = "required" > * </ span > </ label > < input class = "form-control" name = "author" id = "author" value = "" type = "text" > </ div > < div class = "form-group" > < label > Email < span class = "required" > * </ span > </ label > < input class = "form-control" name = "email" id = "email" value = "" type = "email" > </ div > < p class = "comment-form-cookies-consent" > < input id = "wp-comment-cookies-consent" name = "wp-comment-cookies-consent" type = "checkbox" value = "yes" > < label for = "wp-comment-cookies-consent" > Save my name, email, and website in this browser for the next time I comment. </ label > </ p > < p class = "form-submit" > < input name = "submit" type = "submit" id = "send_button" class = "submit" value = "Submit" > < input type = "hidden" name = "comment_post_ID" value = "5959" id = "comment_post_ID" > < input type = "hidden" name = "comment_parent" id = "comment_parent" value = "0" > </ p > </ form > </ div > < 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/" > 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-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({
inlineMath: [['$','$'], ["\\(","\\)"]],
displayMath: [['$$', '$$'], ["\\[", "\\]"]],
equationNumbers: {autoNumber: "AMS",
}); </ 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-includes/js/comment-reply.min.js?ver=6.7.2" id = "comment-reply-js" data-wp-strategy = "async" > </ 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\":\"5959\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]);
_stq.push([ "clickTrackerInit", "195943667", "5959" ]); </ 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_75611056-js-before" > window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['75611056'] = {"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_52292","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/23/build-a-dashboard-with-django-and-bootstrap-part-3/" data-gt-orig-domain = "via-internet.de" data-gt-widget-id = "75611056" defer = "" > </ 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
Database Caching 139/154 queries in 0.346 seconds using Disk
Served from: via-internet.de @ 2025-03-05 04:35:12 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><div class="entry-meta mt-4 mb-0 pt-3 theme-b-top"> <span class="tag-links"> <a href="https://via-internet.de/blog/tag/django/" rel="tag">Django</a><a href="https://via-internet.de/blog/tag/python/" rel="tag">Python</a> </span></div><article class="theme-comment-form wow animate fadeInUp" data-wow-delay=".3s" style="visibility: hidden; animation-delay: 0.3s; animation-name: none;"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title"><div class="theme-comment-title"><h4>Leave a Reply</h4></div> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/2020/02/23/build-a-dashboard-with-django-and-bootstrap-part-3/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://via-internet.de/blog/wp-comments-post.php" method="post" id="action" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><div class="form-group"><label>Comment</label><textarea id="comments" rows="5" class="form-control" name="comment" type="text"></textarea></div><div class="form-group"><label>Name<span class="required">*</span></label><input class="form-control" name="author" id="author" value="" type="text"></div><div class="form-group"><label>Email<span class="required">*</span></label><input class="form-control" name="email" id="email" value="" type="email"></div><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p><p class="form-submit"><input name="submit" type="submit" id="send_button" class="submit" value="Submit"> <input type="hidden" name="comment_post_ID" value="5959" id="comment_post_ID"> <input type="hidden" name="comment_parent" id="comment_parent" value="0"></p></form></div><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/"> 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-includes/js/comment-reply.min.js?ver=6.7.2" id="comment-reply-js" data-wp-strategy="async"></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\":\"5959\",\"tz\":\"1\",\"srv\":\"via-internet.de\",\"j\":\"1:14.4\"}") ]);
_stq.push([ "clickTrackerInit", "195943667", "5959" ]);</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_75611056-js-before">window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['75611056'] = {"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_52292","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/23/build-a-dashboard-with-django-and-bootstrap-part-3/" data-gt-orig-domain="via-internet.de" data-gt-widget-id="75611056" defer=""></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 139/154 queries in 0.346 seconds using Disk
Served from: via-internet.de @ 2025-03-05 04:35:12 by W3 Total Cache
--></article>
{
{
{
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)
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: < !-- Begin Page Content -- >
< div class = "container-fluid" >
< !-- /.container-fluid -- >
<!-- Begin Page Content -->
<div class="container-fluid">
....
</div>
<!-- /.container-fluid -->
<!-- Begin Page Content -->
<div class="container-fluid">
....
</div>
<!-- /.container-fluid --> 
Leave a Reply