Material Dashboard PRO by Creative Tim

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="apple-touch-icon" sizes="76x76" href="../../../assets-old/img/apple-icon.png"> <link rel="icon" type="image/png" href="../../../assets-old/img/favicon.png"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> Material Dashboard PRO by Creative Tim </title> <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />   <link rel="canonical" href="https://www.creative-tim.com/product/material-dashboard-pro" />  <meta name="keywords" content="creative tim, html dashboard, html css dashboard, web dashboard, bootstrap 4 dashboard, bootstrap 4, css3 dashboard, bootstrap 4 admin, material dashboard bootstrap 4 dashboard, frontend, responsive bootstrap 4 dashboard, material design, material dashboard bootstrap 4 dashboard"> <meta name="description" content="Material Dashboard PRO is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design.">  <meta itemprop="name" content="Material Dashboard PRO by Creative Tim"> <meta itemprop="description" content="Material Dashboard PRO is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design."> <meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg">  <meta name="twitter:card" content="product"> <meta name="twitter:site" content="@creativetim"> <meta name="twitter:title" content="Material Dashboard PRO by Creative Tim"> <meta name="twitter:description" content="Material Dashboard PRO is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design."> <meta name="twitter:creator" content="@creativetim"> <meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg">  <meta property="fb:app_id" content="655968634437471"> <meta property="og:title" content="Material Dashboard PRO by Creative Tim" /> <meta property="og:type" content="article" /> <meta property="og:url" content="http://demos.creative-tim.com/material-dashboard-pro/examples/dashboard.html" /> <meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg" /> <meta property="og:description" content="Material Dashboard PRO is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design." /> <meta property="og:site_name" content="Creative Tim" />  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">  <link href="../../../assets-old/css/material-dashboard.min.css?v=2.2.2" rel="stylesheet" />  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" /> <link rel="stylesheet" href="../../../assets-old/demo/docs.min.css"> <style> .navbar-absolute-logo { padding-left: 45px; } .navbar-absolute-logo img { position: absolute; left: 15px; margin-top: -6px; } body { background: white; } </style>  <link href="../../../assets-old/demo/demo.css" rel="stylesheet" />  <script> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6'); </script>  </head> <body class="bd-docs " data-spy="scroll" data-target=".bd-sidenav-active">   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <a id="skippy" class="sr-only sr-only-focusable" href="#content"> <div class="container"> <span class="skiplink-text">Skip to main content</span> </div> </a> <header class="navbar navbar-expand navbar-dark bg-primary flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/material-dashboard-pro-bs4" target="_blank"> Material Dashboard PRO </a> <ul class="navbar-nav flex-row d-none d-lg-flex"> <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> v2.2.2 </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> <a class="dropdown-item" href="https://www.creative-tim.com/learning-lab/bootstrap/overview/material-dashboard">BS5 - 3.0.0</a> <a class="dropdown-item" href="../../../docs/2.1/getting-started/introduction.html">BS4 - 2.2.2</a> <a class="dropdown-item" href="../../../docs/2.0/getting-started/introduction.html">BS4 - 2.1.0</a> <a class="dropdown-item" href="https://demos.creative-tim.com/bs3/material-dashboard-pro/documentation/tutorial-components.html" target="_blank">BS3 - 1.0</a> </div> </li> <li class="nav-item"> <a class="nav-link p-2" href="https://github.com/creativetimofficial/ct-material-dashboard-pro" target="_blank" rel="noopener" aria-label="GitHub"> <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"> <title>GitHub</title> <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd" /> </svg> </a> </li> <li class="nav-item"> <a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter"> <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"> <title>Twitter</title> <path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor" /> </svg> </a> </li> </ul> <div class="navbar-nav-scroll ml-md-auto "> <ul class="navbar-nav bd-navbar-nav flex-row"> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard-pro-bs4"> <i class="material-icons">card_membership</i> Buy Now! </a> </li> <li class="nav-item"> <a class="nav-link" href="https://demos.creative-tim.com/material-dashboard-pro-bs4/examples/dashboard.html"><i class="material-icons">view_carousel</i> Live Preview</a> </li> <li class="nav-item"> <a class="nav-link" href="https://github.com/creativetimofficial/ct-material-dashboard-pro" target="_blank" rel="noopener"><i class="material-icons">star</i> Help with a star</a> </li> <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="javascript:;" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="material-icons">translate </i> ENGLISH <div class="ripple-container"></div> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> <a class="dropdown-item active dropdown-flag-holder" href="https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html"> ENGLISH </a> <a class="dropdown-item dropdown-flag-holder" href="https://demos.creative-tim.com/material-dashboard/zh/docs/2.1/getting-started/introduction.html">中文 </a> <a class="dropdown-item dropdown-flag-holder" href="https://demos.creative-tim.com/material-dashboard/ja/docs/2.1/getting-started/introduction.html">日本人 </a> </div> </li> <li class="nav-item"> <a class="nav-link"></a> </li> <li class="nav-item"> <a class="nav-link"></a> </li> </ul> </div> <a href="https://github.com/creativetimofficial/ct-material-dashboard-pro" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"> <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path> <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path> </svg></a> <style> .github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out } @keyframes octocat-wave { 0%, 100% { transform: rotate(0) } 20%, 60% { transform: rotate(-25deg) } 40%, 80% { transform: rotate(10deg) } } @media (max-width:500px) { .github-corner:hover .octo-arm { animation: none } .github-corner .octo-arm { animation: octocat-wave 560ms ease-in-out } } </style> </header> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <nav class="collapse bd-links" id="bd-docs-nav"> <div class="bd-toc-item active"> <a class="bd-toc-link" href="#docs"> Getting started </a> <ul class="nav bd-sidenav"> <li class=""> <a href="../../../docs/2.1/getting-started/introduction.html"> Introduction </a> </li> <li class=""> <a href="../../../docs/2.1/getting-started/license.html"> License </a> </li> <li class=""> <a href="../../../docs/2.1/getting-started/file-structure.html"> File Structure </a> </li> <li class=""> <a href="../../../docs/2.1/getting-started/build-tools.html"> Build Tools </a> </li> <li class="active bd-sidenav-active"> <a href="../../../docs/2.1/getting-started/build-tools-django.html"> Build Tools Django </a> </li> </ul> </div> <div class="bd-toc-item active"> <a class="bd-toc-link" href="#docs"> Components </a> <ul class="nav bd-sidenav"> <li class=""> <a href="../../../docs/2.1/components/alerts.html"> Alerts </a> </li> <li class=""> <a href="../../../docs/2.1/components/badge.html"> Badge <span class="badge badge-primary">Pro</span> </a> </li> <li class=""> <a href="../../../docs/2.1/components/breadcrumb.html"> Breadcrumb <span class="badge badge-primary">Pro</span> </a> </li> <li class=""> <a href="../../../docs/2.1/components/buttons.html"> Buttons </a> </li> <li class=""> <a href="../../../docs/2.1/components/card.html"> Card </a> </li> <li class=""> <a href="../../../docs/2.1/components/carousel.html"> Carousel <span class="badge badge-primary">Pro</span> </a> </li> <li class=""> <a href="../../../docs/2.1/components/collapse.html"> Collapse <span class="badge badge-primary">Pro</span> </a> </li> <li class=""> <a href="../../../docs/2.1/components/dropdowns.html"> Dropdowns </a> </li> <li class=""> <a href="../../../docs/2.1/components/forms.html"> Forms </a> </li> <li class=""> <a href="../../../docs/2.1/components/google-maps.html"> Google Maps </a> </li> <li class=""> <a href="../../../docs/2.1/components/info-areas.html"> Info Areas <span class="badge badge-primary">Pro</span> </a> </li> <li class=""> <a href="../../../docs/2.1/components/material-icons.html"> Material Icons </a> </li> <li class=""> <a href="../../../docs/2.1/components/modal.html"> Modal </a> </li> <li class=""> <a href="../../../docs/2.1/components/navs.html"> Navs </a> </li> <li class=""> <a href="../../../docs/2.1/components/navbar.html"> Navbar </a> </li> <li class=""> <a href="../../../docs/2.1/components/pagination.html"> Pagination <span class="badge badge-primary">Pro</span> </a> </li> <li class=""> <a href="../../../docs/2.1/components/parallax.html"> Parallax <span class="badge badge-primary">Pro</span> </a> </li> <li class=""> <a href="../../../docs/2.1/components/popovers.html"> Popovers <span class="badge badge-primary">Pro</span> </a> </li> <li class=""> <a href="../../../docs/2.1/components/progress.html"> Progress </a> </li> <li class=""> <a href="../../../docs/2.1/components/tables.html"> Tables </a> </li> <li class=""> <a href="../../../docs/2.1/components/tooltips.html"> Tooltips <span class="badge badge-primary">Pro</span> </a> </li> <li class=""> <a href="../../../docs/2.1/components/typography.html"> Typography </a> </li> </ul> </div> <div class="bd-toc-item active"> <a class="bd-toc-link" href="#docs"> Plugins </a> <ul class="nav bd-sidenav"> <li class=""> <a href="../../../docs/2.1/plugins/bootstrap-switch.html"> Bootstrap Switch <span class="badge badge-primary">Pro</span> </a> </li> <li class=""> <a href="../../../docs/2.1/plugins/datetimepicker.html"> DateTimePicker <span class="badge badge-primary">Pro</span> </a> </li> <li class=""> <a href="../../../docs/2.1/plugins/fileupload-jasny.html"> FileUpload Jasny <span class="badge badge-primary">Pro</span> </a> </li> <li class=""> <a href="../../../docs/2.1/plugins/select-bootstrap.html"> Select Bootstrap <span class="badge badge-primary">Pro</span> </a> </li> <li class=""> <a href="../../../docs/2.1/plugins/sweet-alert-2.html"> Sweet Alert 2 <span class="badge badge-primary">Pro</span> </a> </li> <li class=""> <a href="../../../docs/2.1/plugins/sliders.html"> Sliders </a> </li> <li class=""> <a href="../../../docs/2.1/plugins/perfect-scrollbar.html"> Perfect Scrollbar </a> </li> </ul> </div> </nav> </div> <div class="d-none d-xl-block col-xl-2 bd-toc"> <ul class="section-nav"> <li class="toc-entry toc-h3"><a href="#what-is-django-">What is Django </a></li> <li class="toc-entry toc-h3"><a href="#environment-">Environment </a></li> <li class="toc-entry toc-h3"><a href="#build-the-app-">Build the app </a></li> <li class="toc-entry toc-h3"><a href="#app-codebase-simplified-">App Codebase (simplified) </a></li> <li class="toc-entry toc-h3"><a href="#the-bootstrap-flow-">The bootstrap flow </a></li> <li class="toc-entry toc-h3"><a href="#app-codebase-">App Codebase </a></li> <li class="toc-entry toc-h3"><a href="#app-configuration-">App Configuration </a></li> <li class="toc-entry toc-h3"><a href="#app-tables-">App Tables </a></li> <li class="toc-entry toc-h3"><a href="#app-forms-">App Forms </a></li> <li class="toc-entry toc-h3"><a href="#app-routing-">App Routing </a></li> <li class="toc-entry toc-h3"><a href="#pages--assets-">Pages & Assets </a> <ul> <li class="toc-entry toc-h4"><a href="#static-assets-">Static Assets </a></li> <li class="toc-entry toc-h4"><a href="#templates-folder-">Templates Folder </a></li> <li class="toc-entry toc-h4"><a href="#common-pages-">Common pages </a></li> </ul> </li> <li class="toc-entry toc-h3"><a href="#data-structures-">Data Structures </a> <ul> <li class="toc-entry toc-h4"><a href="#requestuser-object-">request.user object </a></li> </ul> </li> <li class="toc-entry toc-h3"><a href="#"></a></li> <li class="toc-entry toc-h3"><a href="#django-resources-">Django resources </a></li> </ul> </div> <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <h1 class="bd-title" id="content">Material Dashboard Pro Django </h1> <p class="bd-lead">Django Seed Project with Material Dashboard Design (premium version)</p> <p><a href="https://www.creative-tim.com/templates/django"><strong>Django Template</strong></a> crafted on top of <strong>Material Dashboard PRO</strong>, a premium Bootstrap 4 design. Start your development with a modern, dark-themed Bootstrap 4 Admin template for <strong>Django</strong>. It features a huge number of components built to fit together and look fantastic. If you want to code faster, with a smooth workflow, then you should try this template carefully developed with Django, a well-known Python Framework. <strong>Django codebase</strong> is crafted using a simple, modular structure that follows the best practices and provides authentication, database configuration, and deployment scripts for Docker and Gunicorn/Nginx stack.</p> <blockquote> <p>Links</p> </blockquote> <ul> <li><a href="https://www.creative-tim.com/product/material-dashboard-pro-django">Material Dashboard PRO Django</a> - product page</li> <li><a href="https://www.creative-tim.com/live/material-dashboard-pro-django">Material Dashboard PRO Django</a> - LIVE demo</li> </ul> <p><img src="https://github.com/app-generator/material-dashboard-pro-django-docs/raw/master/.gitbook/assets/material-dashboard-pro-django-charts.jpg" class="w-100" alt="Material Dashboard PRO - Django Seed Project." /></p> <h3 id="what-is-django-">What is <a href="https://www.djangoproject.com/">Django</a> <a id="what-is-django"></a></h3> <p><a href="https://www.djangoproject.com/">Django</a> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.</p> <blockquote> <p><strong>Django Resources</strong></p> </blockquote> <ul> <li><a href="https://www.djangoproject.com/">Django</a> - official website</li> <li><a href="https://docs.djangoproject.com/en/3.0/">Django</a> - official documentation</li> </ul> <h3 id="environment-">Environment <a id="environment"></a></h3> <p>To use the stater, <a href="https://www.python.org/">Python3</a> should be installed properly in the workstation. If you are not sure if Python is properly installed, please open a terminal and type <code class="highlighter-rouge">python --version</code>. The full list with dependencies and tools required to build the app:</p> <ul> <li><a href="https://www.python.org/">Python3</a> - the programming language used to code the app</li> <li><a href="https://git-scm.com/">GIT</a> - used to clone the source code from the Github repository</li> <li>Basic development tools (g++ compiler, python development libraries ..etc) used by Python to compile the app dependencies in your environment.</li> </ul> <blockquote> <p>Check <a href="https://www.python.org/">Python</a> version (using the terminal)</p> </blockquote> <div class="language-text highlighter-rouge"><pre class="highlight"><code>$ # Check Python version $ python --version Python 3.7.2 # <--- All good </code></pre> </div> <blockquote> <p>Check <a href="https://git-scm.com/">GIT</a> command tool (using the terminal)</p> </blockquote> <div class="language-text highlighter-rouge"><pre class="highlight"><code>$ # Check git $ git --version $ git version 2.10.1.windows.1 # <--- All good </code></pre> </div> <p>For more information on how to set up your environment please access the <a href="https://www.creative-tim.com/product/material-dashboard-pro-django">product page</a> and ask for support.</p> <h3 id="build-the-app-">Build the app <a id="build-the-app"></a></h3> <p>To built and start the app locally, follow the steps:</p> <blockquote> <p><strong>Get the source code -</strong> by accessing the <a href="https://www.creative-tim.com/product/material-dashboard-pro-django">product page</a> and purchase a license.</p> </blockquote> <p>Access the product page and download the latest stable release or clone the sources using GIT command-line tool.</p> <blockquote> <p><strong>Change the current directory</strong> to <code class="highlighter-rouge">source code</code> directory</p> </blockquote> <p><strong>Step #1</strong> - Create a Virtual Environment to isolate the app dependencies:</p> <div class="language-text highlighter-rouge"><pre class="highlight"><code>$ # Unix based systems $ virtualenv env $ source env/bin/activate </code></pre> </div> <p>For Windows-based systems, please type:</p> <div class="language-text highlighter-rouge"><pre class="highlight"><code>$ # Windows based systems $ # virtualenv env $ # .\env\Scripts\activate </code></pre> </div> <p><strong>Step #2</strong> - Install dependencies</p> <div class="language-text highlighter-rouge"><pre class="highlight"><code>$ pip3 install -r requirements.txt </code></pre> </div> <p><strong>Step #3</strong> - Set up database and create tables</p> <div class="language-text highlighter-rouge"><pre class="highlight"><code>$ python manage.py makemigrations $ python manage.py migrate </code></pre> </div> <p><strong>Step #4</strong> - Start the app in development mode</p> <div class="language-text highlighter-rouge"><pre class="highlight"><code>$ python manage.py runserver </code></pre> </div> <p>At this point, we can visit the app in the browser <strong><code class="highlighter-rouge">http://127.0.0.1:8000/</code></strong>. By default, the app will redirect guest users to the login page. To access the private pages:</p> <ul> <li>Create a new user using the <strong>registration page</strong></li> <li>Authenticate using the <strong>login page</strong></li> </ul> <p><img src="https://github.com/app-generator/material-dashboard-pro-django-docs/raw/master/.gitbook/assets/material-dashboard-pro-django-login.jpg" alt="Material Dashboard PRO - Login Page." /></p> <h3 id="app-codebase-simplified-">App Codebase (simplified) <a id="app-codebase-simplified"></a></h3> <p>The codebase is built using a modular, intuitive structure, quite easy to maintain and extend by any developer with basic <strong>Python/Django</strong> knowledge:</p> <div class="language-text highlighter-rouge"><pre class="highlight"><code>< PROJECT ROOT > | |-- core/ # Implements app logic and serve assets | |-- static/ | | |-- <css, JS, images> # CSS files, Javascripts files | |-- templates/ # Templates used to render pages | |-- includes/ # HTML chunks and components | |-- layouts/ # Master pages | |-- accounts/ # Authentication pages | | | index.html # The default page | *.html # All other HTML pages | |-- authentication/ # Handles auth routes (login and register) |-- app/ # A simple app that serve HTML files | |-- requirements.txt # Development modules - SQLite storage | |-- .env # Inject Configuration via Environment |-- manage.py # Start the app - Django default start script | |-- **************************** </code></pre> </div> <h3 id="the-bootstrap-flow-">The bootstrap flow <a id="the-bootstrap-flow"></a></h3> <ul> <li>Django bootstrapper <code class="highlighter-rouge">manage.py</code> uses <code class="highlighter-rouge">core/settings.py</code> as the main configuration file</li> <li><code class="highlighter-rouge">core/settings.py</code> loads the app magic from <code class="highlighter-rouge">.env</code> file</li> <li>Redirect the guest users to the <code class="highlighter-rouge">Login</code> page</li> <li>Unlock the pages served by the <code class="highlighter-rouge">app</code> node for authenticated users</li> </ul> <h3 id="app-codebase-">App Codebase <a id="app-codebase"></a></h3> <p>The codebase structure is presented below:</p> <div class="language-text highlighter-rouge"><pre class="highlight"><code>< PROJECT ROOT > | |-- core/ # Implements app logic | |-- settings.py # Django app bootstrapper | |-- wsgi.py # Start the app in production | |-- urls.py # Define URLs served by all apps/nodes | | | |-- static/ | | |-- <css, JS, images> # CSS files, Javascripts files | | | |-- templates/ # Templates used to render pages | | | |-- includes/ # HTML chunks and components | | |-- navigation.html # Top menu component | | |-- sidebar.html # Sidebar component | | |-- footer.html # App Footer | | |-- scripts.html # Scripts common to all pages | | | |-- layouts/ # Master pages | | |-- base-fullscreen.html # Used by Authentication pages | | |-- base.html # Used by common pages | | | |-- accounts/ # Authentication pages | | |-- login.html # Login page | | |-- register.html # Register page | | | index.html # The default page | page-404.html # Error 404 page | page-500.html # Error 404 page | *.html # All other HTML pages | |-- authentication/ # Handles authentication routes | | | |-- urls.py # Define authentication routes | |-- views.py # Handles login and registration | |-- forms.py # Define auth forms | |-- app/ # A simple app that serve HTML files | | | |-- views.py # Serve pages for authenticated users | |-- urls.py # Define some super simple routes | |-- requirements.txt # Development modules - SQLite storage | |-- .env # Inject Configuration via Environment |-- manage.py # Start the app | |-- ************************************ </code></pre> </div> <h3 id="app-configuration-">App Configuration <a id="app-configuration"></a></h3> <p>The environment configuration file <strong><code class="highlighter-rouge">.env</code></strong> specify a short-list with variables:</p> <ul> <li><a href="https://docs.djangoproject.com/en/3.0/ref/settings/#secret-key"><code class="highlighter-rouge">SECRET_KEY</code></a> - Used by Django for <a href="https://docs.djangoproject.com/en/3.0/topics/signing/">cryptographic signing</a></li> <li><code class="highlighter-rouge">SERVER</code> - The public domain/address used in <code class="highlighter-rouge">production</code></li> </ul> <div class="language-text highlighter-rouge"><pre class="highlight"><code># File: core/settings.py ... # SECRET_KEY value is read from `.env` file SECRET_KEY = config('SECRET_KEY', default='S#perS3crEt_1122') ... # Load the production server address from `.env` file ALLOWED_HOSTS = ['localhost', '127.0.0.1', config('SERVER', default='127.0.0.1')] ... # The SQLite database, located in the root of the project DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), } } </code></pre> </div> <p>The default database is <a href="https://www.sqlite.org/">SQLite</a> and the name and physical location can be changed by updating <code class="highlighter-rouge">core/settings.py</code> The database and associated tables are created during the migration commands, listed in the README file</p> <div class="language-text highlighter-rouge"><pre class="highlight"><code>$ # README file, shipped with every Django project ... $ python manage.py makemigrations $ python manage.py migrate ... </code></pre> </div> <blockquote> <p><strong>Hint</strong>: to visualize the SQLite database content an external tool should be installed: <a href="https://sqlitebrowser.org/">DB Browser for SQLite</a> it might be a good choice.</p> </blockquote> <h3 id="app-tables-">App Tables <a id="app-tables"></a></h3> <p>The tables created by the Django migration are generated by the default modules that handle the authentication, session management, and permissions:</p> <ul> <li><a href="https://docs.djangoproject.com/en/3.0/ref/contrib/auth/#django-contrib-auth"><code class="highlighter-rouge">django.contrib.auth</code></a> - Django middleware app that implements authentication</li> <li><code class="highlighter-rouge">django.contrib.sessions</code> - Django middleware app that implements session management</li> </ul> <h3 id="app-forms-">App Forms <a id="app-forms"></a></h3> <p>The file <strong><code class="highlighter-rouge">authentication/forms.py</code></strong> defines the table(s) used by the application. Being a simple starter, by default the following forms are defined:</p> <ul> <li>Form #1 - <strong>LoginForm</strong> with fields: <ul> <li>username</li> <li>password</li> </ul> </li> <li>Form #2 - <strong>SignUpForm</strong> with fields: <ul> <li>name - The friendly name</li> <li>email - eMail address</li> <li>username - used to authenticate</li> <li>password1 - used to authenticate</li> <li>password2 - password check field</li> </ul> </li> </ul> <h3 id="app-routing-">App Routing <a id="app-routing"></a></h3> <p>The settings file <strong><code class="highlighter-rouge">core/settings.py</code></strong> specify the routing file <code class="highlighter-rouge">core/urls.py</code> via <code class="highlighter-rouge">ROOT_URLCONF</code> variable</p> <div class="language-text highlighter-rouge"><pre class="highlight"><code># File: core/settings.py ... ROOT_URLCONF = 'core.urls' ... </code></pre> </div> <blockquote> <p><strong><code class="highlighter-rouge">core/urls.py</code></strong> file</p> </blockquote> <p>The core routing file aggregates the routing from all apps defined in the project:</p> <div class="language-text highlighter-rouge"><pre class="highlight"><code># File: core/urls.py urlpatterns = [ # Django admin routes - inherited from Django default modules path('admin/', admin.site.urls), # Authentication routes - login / register # exposed by `authentication` app path("", include("authentication.urls")), # App routes - the modules that serve the UI Kit pages path("", include("app.urls")) ] </code></pre> </div> <h3 id="pages--assets-">Pages & Assets <a id="pages--assets"></a></h3> <p>Pages served by the starter are organized using a simple folder structure:</p> <div class="language-text highlighter-rouge"><pre class="highlight"><code>< PROJECT ROOT > | |-- core/ # Implements app logic and serve the static assets | | | |-- static/assets/ | | |-- css | | |-- JS | | |-- images | | |-- SCSS | | | |-- templates/ # Templates used to render pages | | | |-- includes/ # HTML chunks and components | | |-- navigation.html # Top menu component | | |-- sidebar.html # Sidebar component | | |-- footer.html # App Footer | | |-- scripts.html # Scripts common to all pages | | | |-- layouts/ # Master pages | | |-- base-fullscreen.html # Used by Authentication pages | | |-- base.html # Used by common pages | | | |-- accounts/ # Authentication pages | | |-- login.html # Login page | | |-- register.html # Register page | | | index.html # The default page | page-404.html # Error 404 page | page-500.html # Error 404 page | *.html # All other HTML pages | |-- app/ # A simple app that serve HTML files | | | |-- views.py # Serve HTML pages for authenticated users | |-- urls.py # Define some super simple routes | |-- ************************************************************************ </code></pre> </div> <h4 id="static-assets-">Static Assets <a id="static-assets"></a></h4> <p>The folder that contains all assets provided by the UI Kit is located in the <code class="highlighter-rouge">core</code> directory</p> <ul> <li><code class="highlighter-rouge">static/assets</code> - the root directory for all files (JS, images)</li> <li><code class="highlighter-rouge">static/assets/css</code> - CSS files that style the app</li> <li><code class="highlighter-rouge">static/assets/img</code> - Images and Icons</li> <li><code class="highlighter-rouge">static/assets/js</code> - javascript files provided by the UI Kit</li> <li><code class="highlighter-rouge">static/assets/scss</code> - SCSS files, if provided by the UI Kit vendor</li> </ul> <h4 id="templates-folder-"><code class="highlighter-rouge">Templates</code> Folder <a id="templates-folder"></a></h4> <p>All pages served by the application are located inside this folder.</p> <ul> <li><code class="highlighter-rouge">templates/layouts</code> - the directory with app master pages</li> <li><code class="highlighter-rouge">templates/includes</code> - the directory with HTML chunks and components</li> <li><code class="highlighter-rouge">templates/accounts</code> - store the authentication pages (login, registration)</li> <li><code class="highlighter-rouge">templates/</code> - all pages defined/served by the app are saved at the root of the <code class="highlighter-rouge">templates</code> folder</li> </ul> <h4 id="common-pages-">Common pages <a id="common-pages"></a></h4> <p>This section lists the common pages defined in all Flask applications prototyped on top of this generic starter.</p> <ul> <li>login.html, rendered with <code class="highlighter-rouge">layouts/base-fullscreen.html</code></li> <li>register.html, rendered with <code class="highlighter-rouge">layouts/base-fullscreen.html</code></li> <li>index.html, rendered with <code class="highlighter-rouge">layouts/base.html</code></li> <li>page-404.html, rendered with <code class="highlighter-rouge">layouts/base.html</code></li> <li>page-403.html, rendered with <code class="highlighter-rouge">layouts/base.html</code></li> </ul> <h3 id="data-structures-">Data Structures <a id="data-structures"></a></h3> <p>The starter exposes a short-list with data structures used globally across the app:</p> <h4 id="requestuser-object-"><code class="highlighter-rouge">request.user</code> object <a id="requestuser-object"></a></h4> <p>Constructed by <a href="https://docs.djangoproject.com/en/3.0/ref/middleware/#django.contrib.auth.middleware.AuthenticationMiddleware">AuthenticationMiddleware</a> can be used to detect if the current request is executed by an authenticated user or not. The object has global visibility and can be used in all app controllers and handlers but also in views.</p> <blockquote> <p><strong>Usage in controller</strong></p> </blockquote> <div class="language-text highlighter-rouge"><pre class="highlight"><code># Sample File from django.http import HttpResponse def testme(path): # Redirect guests users to login page if request.user.is_authenticated: return HttpResponse("User authenticated") else: return HttpResponse("Access forbidden - please authenticate") </code></pre> </div> <blockquote> <p><strong>Usage in view</strong></p> </blockquote> <div class="language-text highlighter-rouge"><pre class="highlight"><code> <div class="collapse navbar-collapse" id="navigation"> <ul class="navbar-nav ml-auto">   <li class="nav-item "> <a href="{ % url 'register' % }" class="nav-link"> <i class="tim-icons icon-laptop"></i> Register </a> </li> <li class="nav-item "> <a href="{ % url 'login' % }" class="nav-link"> <i class="tim-icons icon-single-02"></i> Login </a> </li> </ul> </div> </code></pre> </div> <h3><a id="django-resources"></a></h3> <h3 id="django-resources-"><a href="https://www.djangoproject.com/">Django</a> resources <a id="django-resources"></a></h3> <ul> <li><a href="https://www.djangoproject.com/">Django</a> - the official website</li> <li><a href="https://docs.djangoproject.com/en/3.0/">Django Documentation</a> - a <code class="highlighter-rouge">must-read</code> resource for any Django developer</li> <li><a href="https://www.creative-tim.com/templates/django">Django Templates</a> - more Django starters provided by Creative-Tim</li> </ul> </main> </div> </div>  <script src="../../../assets-old/js/core/jquery.min.js"></script> <script src="../../../assets-old/js/core/popper.min.js"></script> <script src="../../../assets-old/js/core/bootstrap-material-design.min.js"></script> <script src="../../../assets-old/js/plugins/perfect-scrollbar.jquery.min.js"></script>  <script src="../../../assets-old/js/plugins/moment.min.js"></script>  <script src="../../../assets-old/js/plugins/sweetalert2.js"></script>  <script src="../../../assets-old/js/plugins/jquery.validate.min.js"></script>  <script src="../../../assets-old/js/plugins/jquery.bootstrap-wizard.js"></script>  <script src="../../../assets-old/js/plugins/bootstrap-selectpicker.js"></script>  <script src="../../../assets-old/js/plugins/bootstrap-datetimepicker.min.js"></script>  <script src="../../../assets-old/js/plugins/jquery.dataTables.min.js"></script>  <script src="../../../assets-old/js/plugins/bootstrap-tagsinput.js"></script>  <script src="../../../assets-old/js/plugins/jasny-bootstrap.min.js"></script>  <script src="../../../assets-old/js/plugins/fullcalendar.min.js"></script>  <script src="../../../assets-old/js/plugins/jquery-jvectormap.js"></script>  <script src="../../../assets-old/js/plugins/nouislider.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>  <script src="../../../assets-old/js/plugins/arrive.min.js"></script>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2Yno10-YTnLjjn_Vtk0V8cdcY5lC4plU"></script>  <script async defer src="https://buttons.github.io/buttons.js"></script>  <script src="../../../assets-old/js/plugins/chartist.min.js"></script>  <script src="../../../assets-old/js/plugins/bootstrap-notify.js"></script>  <script src="../../../assets-old/js/material-dashboard.min.js?v=2.2.2" type="text/javascript"></script>  <script src="../../../assets-old/demo/jquery.sharrre.js"></script> <script> $(document).ready(function() { $('#facebook').sharrre({ share: { facebook: true }, enableHover: false, enableTracking: false, enableCounter: false, click: function(api, options) { api.simulateClick(); api.openPopup('facebook'); }, template: '<i class="fab fa-facebook-f"></i> Facebook', url: 'https://demos.creative-tim.com/material-dashboard-pro/examples/dashboard.html' }); $('#google').sharrre({ share: { googlePlus: true }, enableCounter: false, enableHover: false, enableTracking: true, click: function(api, options) { api.simulateClick(); api.openPopup('googlePlus'); }, template: '<i class="fab fa-google-plus"></i> Google', url: 'https://demos.creative-tim.com/material-dashboard-pro/examples/dashboard.html' }); $('#twitter').sharrre({ share: { twitter: true }, enableHover: false, enableTracking: false, enableCounter: false, buttons: { twitter: { via: 'CreativeTim' } }, click: function(api, options) { api.simulateClick(); api.openPopup('twitter'); }, template: '<i class="fab fa-twitter"></i> Twitter', url: 'https://demos.creative-tim.com/material-dashboard-pro/examples/dashboard.html' }); // Facebook Pixel Code Don't Delete ! function(f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function() { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s) }(window, document, 'script', '//connect.facebook.net/en_US/fbevents.js'); try { fbq('init', '111649226022273'); fbq('track', "PageView"); } catch (err) { console.log('Facebook Track Error:', err); } }); </script> <script> // Facebook Pixel Code Don't Delete ! function(f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function() { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s) }(window, document, 'script', '//connect.facebook.net/en_US/fbevents.js'); try { fbq('init', '111649226022273'); fbq('track', "PageView"); } catch (err) { console.log('Facebook Track Error:', err); } </script> <noscript> <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=111649226022273&ev=PageView&noscript=1" /> </noscript> <script> $(document).ready(function() { if ($('.card-header.card-chart').length != 0) { md.initDashboardPageCharts(); } if ($('#websiteViewsChart').length != 0) { md.initDocumentationCharts(); } if ($('.datetimepicker').length != 0) { md.initFormExtendedDatetimepickers(); } if ($('#fullCalendar').length != 0) { md.initFullCalendar(); } if ($('.slider').length != 0) { md.initSliders(); } // Activate the tooltips $('[data-toggle="tooltip"]').tooltip(); // Activate Popovers $('[data-toggle="popover"]').popover(); // Vector map if ($('#worldMap').length != 0) { md.initVectorMap(); } if ($('#RegisterValidation').length != 0) { setFormValidation('#RegisterValidation'); function setFormValidation(id) { $(id).validate({ highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-danger'); $(element).closest('.form-check').removeClass('has-success').addClass('has-danger'); }, success: function(element) { $(element).closest('.form-group').removeClass('has-danger').addClass('has-success'); $(element).closest('.form-check').removeClass('has-danger').addClass('has-success'); }, errorPlacement: function(error, element) { $(element).closest('.form-group').append(error); }, }); } } }); // FileInput $('.form-file-simple .inputFileVisible').click(function() { $(this).siblings('.inputFileHidden').trigger('click'); }); $('.form-file-simple .inputFileHidden').change(function() { var filename = $(this).val().replace(/C:\\fakepath\\/i, ''); $(this).siblings('.inputFileVisible').val(filename); }); $('.form-file-multiple .inputFileVisible, .form-file-multiple .input-group-btn').click(function() { $(this).parent().parent().find('.inputFileHidden').trigger('click'); $(this).parent().parent().addClass('is-focused'); }); $('.form-file-multiple .inputFileHidden').change(function() { var names = ''; for (var i = 0; i < $(this).get(0).files.length; ++i) { if (i < $(this).get(0).files.length - 1) { names += $(this).get(0).files.item(i).name + ','; } else { names += $(this).get(0).files.item(i).name; } } $(this).siblings('.input-group').find('.inputFileVisible').val(names); }); $('.form-file-multiple .btn').on('focus', function() { $(this).parent().siblings().trigger('focus'); }); $('.form-file-multiple .btn').on('focusout', function() { $(this).parent().siblings().trigger('focusout'); }); </script> </body> </html>

CINXE.COM

Material Dashboard PRO by Creative Tim