1570 lines
48 KiB
HTML
1570 lines
48 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<link rel="apple-touch-icon" sizes="76x76" href="../../../assets/img/dashboard/free/apple-icon.png">
|
||
<link rel="icon" type="image/png" href="../../../assets/img/dashboard/free/favicon.png">
|
||
|
||
<title>
|
||
|
||
Black Dashboard Flask by Creative Tim
|
||
|
||
|
||
|
||
|
||
|
||
</title>
|
||
|
||
|
||
|
||
<!-- Fonts and icons -->
|
||
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
|
||
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
|
||
|
||
<!-- Nucleo Icons -->
|
||
<link href="../../../assets/css/nucleo-icons.css" rel="stylesheet" />
|
||
<!-- CSS Files -->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link href="../../../assets/css/dashboard-free.css?v=1.0.0" rel="stylesheet" />
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Documentation extras -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
||
|
||
<link rel="stylesheet" href="../../../assets/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>
|
||
|
||
|
||
<!-- CSS Just for demo purpose, don't include it in your project -->
|
||
<link href="../../../assets/demo/dashboard/free/demo.css" rel="stylesheet" />
|
||
|
||
|
||
|
||
</head>
|
||
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
||
|
||
|
||
<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 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/black-dashboard-flask" target="_blank">
|
||
Black Dashboard Flask
|
||
</a>
|
||
|
||
<ul class="navbar-nav flex-row d-none d-md-flex">
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="#version">
|
||
1.0.0
|
||
</a>
|
||
</li>
|
||
|
||
<!-- <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.0.0
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||
<a class="dropdown-item active" href="/docs/1.0/">BS4 - 1.0.0</a>
|
||
<a class="dropdown-item" href="">BS3 - 1.2.1</a>
|
||
</div>
|
||
</li> -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://github.com/creativetimofficial/black-dashboard-flask" 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 target="_blank" href="javascript:void(0)" rel="nofollow" class="btn btn-round btn-default disabled"><i class="tim-icons icon-send mr-2"></i>Upgrade to PRO</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../../../docs/1.0/getting-started/introduction.html"><i class="tim-icons icon-app"></i> Documentation</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://www.creative-tim.com/live/black-dashboard-flask"><i class="tim-icons icon-tv-2"></i> Live Preview</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://github.com/creativetimofficial/black-dashboard-flask" target="_blank" rel="noopener"><i class="tim-icons icon-shape-star"></i> Help with a star</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<a href="https://github.com/creativetimofficial/black-dashboard-flask" class="github-corner" aria-label="View source on Github"><svg width="60" height="60" 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>
|
||
|
||
<!-- <a class="btn btn-white d-none d-lg-inline-block" href="">Download</a> -->
|
||
</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="active bd-sidenav-active">
|
||
|
||
<a href="../../../docs/1.0/getting-started/getting-started-flask.html">
|
||
Getting Started Flask
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/getting-started/license.html">
|
||
License
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item active">
|
||
<a class="bd-toc-link" href="#docs">
|
||
Foundation
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/foundation/colors.html">
|
||
Colors
|
||
</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/1.0/components/alerts.html">
|
||
Alerts
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/badge.html">
|
||
Badge
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/breadcrumb.html">
|
||
Breadcrumb
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/buttons.html">
|
||
Buttons
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/card.html">
|
||
Card
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/collapse.html">
|
||
Collapse
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/dropdowns.html">
|
||
Dropdowns
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/forms.html">
|
||
Forms
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/google-maps.html">
|
||
Google Maps
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/modal.html">
|
||
Modal
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/navs.html">
|
||
Navs
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/navbar.html">
|
||
Navbar
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/nucleo-icons.html">
|
||
Nucleo Icons
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/tables.html">
|
||
Tables
|
||
</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/1.0/plugins/perfect-scrollbar.html">
|
||
Perfect Scrollbar
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/plugins/chart-js.html">
|
||
Chart.js
|
||
</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-h1"><a href="#black-dashboard-flask">Black Dashboard Flask</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h2"><a href="#what-is-flask">What is Flask</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#environment">Environment</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#build-the-app">Build the app</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#app-codebase-simplified">App Codebase (simplified)</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#the-bootstrap-flow">The bootstrap flow</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#app-codebase">App Codebase</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#app-configuration">App Configuration</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#app-tables">App Tables</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#app-forms">App Forms</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#app-routing">App Routing</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#pages--assets">Pages & Assets</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#data-structures">Data Structures</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#current_user-object">current_user object</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#flask-resources">Flask resources</a></li>
|
||
</ul>
|
||
</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">
|
||
<a href="https://www.creative-tim.com/product/black-dashboard-flask">Black Dashboard Flask</a>
|
||
</h1>
|
||
|
||
<p class="bd-lead"></p>
|
||
<hr />
|
||
<p>Black Dashboard Black is a free Bootstrap 4 Admin Template for Django - Features:</p>
|
||
|
||
<ul>
|
||
<li>Design - Black Dashboard (Free version)</li>
|
||
<li>UI-Ready, Django Native templating</li>
|
||
<li><a href="https://www.sqlite.org/">SQLite</a> database, Native Django ORM</li>
|
||
<li>Session-Based auth flow (login, register)</li>
|
||
<li>Deployment scripts: <a href="https://www.docker.com/">Docker</a>, <a href="https://gunicorn.org/">Gunicorn</a>/<a href="https://www.nginx.com/">Nginx</a> stack</li>
|
||
</ul>
|
||
|
||
<blockquote>
|
||
<p><strong>Links</strong></p>
|
||
</blockquote>
|
||
|
||
<ul>
|
||
<li><a target="_blank" href="https://www.creative-tim.com/product/black-dashboard-flask">Black Dashboard Flask</a> - product page</li>
|
||
<li><a target="_blank" href="https://www.creative-tim.com/live/black-dashboard-flask">Black Dashboard Flask Demo</a> - LIVE App, default login credentials ** <em>test / pass</em> **</li>
|
||
<li><a target="_blank" href="https://github.com/creativetimofficial/black-dashboard-flask/">Black Dashboard Flask Sources</a> - MIT License, released on Github</li>
|
||
<li>Tutorials
|
||
<ul>
|
||
<li><a href="./setup-centos-for-development.html">Set up <code class="highlighter-rouge">CentOS</code> for development</a></li>
|
||
<li><a href="./setup-ubuntu-for-development.html">Set up <code class="highlighter-rouge">Ubuntu</code> for development</a></li>
|
||
<li><a href="./setup-windows-for-development.html">Set up <code class="highlighter-rouge">Windows</code> for development</a></li>
|
||
<li><a href="./flask-deploy-on-heroku.html">Flask - Deploy on HEROKU</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<p><br /></p>
|
||
|
||
<p><img src="https://raw.githubusercontent.com/app-generator/black-dashboard-flask-demo/master/media/black-dashboard-flask-screen.png" alt="Black Dashboard Flask - Free Django template" /></p>
|
||
|
||
<p><br /></p>
|
||
|
||
<h2 id="what-is-flask">What is <a href="https://palletsprojects.com/p/flask/">Flask</a></h2>
|
||
<hr />
|
||
|
||
<p>Flask is a lightweight <a href="https://docs.appseed.us/what-is/wsgi/">WSGI</a> web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications.
|
||
Classified as a microframework, Flask is written in Python and it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.</p>
|
||
|
||
<blockquote>
|
||
<p><strong>Flask Links</strong></p>
|
||
</blockquote>
|
||
|
||
<ul>
|
||
<li><a href="https://palletsprojects.com/p/flask/">Flask</a> - the official website</li>
|
||
<li><a href="https://flask.palletsprojects.com/">Flask Documentation</a></li>
|
||
</ul>
|
||
|
||
<p><br /></p>
|
||
|
||
<h2 id="environment">Environment</h2>
|
||
<hr />
|
||
|
||
<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>
|
||
|
||
<p><br /></p>
|
||
|
||
<blockquote>
|
||
<p>Check <a href="https://www.python.org/">Python</a> version (using the terminal)</p>
|
||
</blockquote>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"> $ # Check Python version
|
||
$ python --version
|
||
Python 3.7.2 # <span class="nt"><---</span> <span class="na">All</span> <span class="na">good</span></code></pre></figure>
|
||
|
||
<p><br /></p>
|
||
|
||
<blockquote>
|
||
<p>Check <a href="https://git-scm.com/">GIT</a> command tool (using the terminal)</p>
|
||
</blockquote>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html">$ # Check git
|
||
$ git --version
|
||
$ git version 2.10.1.windows.1 # <span class="nt"><---</span> <span class="na">All</span> <span class="na">good</span></code></pre></figure>
|
||
|
||
<p><br /></p>
|
||
|
||
<p>For more information on how to set up your environment please access the resources listed below. In case we’ve missed something, contact us on Discord.</p>
|
||
|
||
<ul>
|
||
<li><a href="./setup-centos-for-development.html">Setup CentOS for development</a></li>
|
||
<li><a href="./setup-ubuntu-for-development.html">Setup Ubuntu for development</a></li>
|
||
<li><a href="./setup-windows-for-development.html">Setup Windows for development</a></li>
|
||
</ul>
|
||
|
||
<p><br /></p>
|
||
|
||
<h2 id="build-the-app">Build the app</h2>
|
||
<hr />
|
||
|
||
<p>To built and start the app locally, follow the steps:</p>
|
||
|
||
<blockquote>
|
||
<p><strong>Get the source code</strong></p>
|
||
</blockquote>
|
||
|
||
<ul>
|
||
<li>Download the ZIP from Github Repository</li>
|
||
<li>Using GIT tool in the terminal to clone the source code</li>
|
||
</ul>
|
||
|
||
<blockquote>
|
||
<p><strong>Change the current directory</strong> to <code class="highlighter-rouge">source code</code> directory</p>
|
||
</blockquote>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html">$ # Make sure you are running the commands INSIDE source code directory
|
||
$
|
||
$ # Create and activate a Virtualenv (Unix based systems)
|
||
$ virtualenv env
|
||
$ source env/bin/activate
|
||
$
|
||
$ # Create and activate a Virtualenv (Windows based systems)
|
||
$ # virtualenv env
|
||
$ # .\env\Scripts\activate
|
||
$
|
||
$ # Install requirements
|
||
$ pip3 install -r requirements.txt
|
||
$
|
||
$ # Set the FLASK_APP environment variable
|
||
$ (Unix/Mac) export FLASK_APP=run.py
|
||
$ (Windows) set FLASK_APP=run.py
|
||
$ (Powershell) $env:FLASK_APP = ".\run.py"
|
||
$
|
||
$ # Set up the DEBUG environment
|
||
$ # (Unix/Mac) export FLASK_ENV=development
|
||
$ # (Windows) set FLASK_ENV=development
|
||
$ # (Powershell) $env:FLASK_ENV = "development"
|
||
$
|
||
$ # Run the application
|
||
$ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)
|
||
$ # --port=5000 - specify the app port (default 5000)
|
||
$ flask run --host=0.0.0.0 --port=5000
|
||
$
|
||
$ # Access the app in browser: http://127.0.0.1:5000/</code></pre></figure>
|
||
|
||
<p>At this point, we can visit the app in the browser <strong><code class="highlighter-rouge">http://127.0.0.1:5000/</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><br /></p>
|
||
|
||
<h2 id="app-codebase-simplified">App Codebase (simplified)</h2>
|
||
<hr />
|
||
|
||
<p>Starter uses a simple codebase (no Blueprints) with a structure presented bellow:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><</span> <span class="nt">PROJECT</span> <span class="na">ROOT</span> <span class="nt">></span>
|
||
|
|
||
|-- app/ # Implements app logic
|
||
| |-- base/ # Base Blueprint - handles the authentication
|
||
| |-- home/ # Home Blueprint - serve UI Kit pages
|
||
| |
|
||
| __init__.py # Initialize the app
|
||
|
|
||
|-- requirements.txt # Development modules - SQLite storage
|
||
|-- requirements-mysql.txt # Production modules - Mysql DMBS
|
||
|-- requirements-pqsql.txt # Production modules - PostgreSql DMBS
|
||
|
|
||
|-- .env # Inject Configuration via Environment
|
||
|-- config.py # Set up the app
|
||
|-- run.py # Start the app - WSGI gateway
|
||
|
|
||
|-- ************************************************************************
|
||
|
||
</code></pre></figure>
|
||
|
||
<p><br /></p>
|
||
|
||
<h2 id="the-bootstrap-flow">The bootstrap flow</h2>
|
||
<hr />
|
||
|
||
<ul>
|
||
<li><code class="highlighter-rouge">run.py</code> loads the <code class="highlighter-rouge">.env</code> file</li>
|
||
<li>Initialize the app using the specified profile: <em>Debug</em> or <em>Production</em>
|
||
<ul>
|
||
<li>If env.DEBUG is set to <em>True</em> the SQLite storage is used</li>
|
||
<li>If env.DEBUG is set to <em>False</em> the specified DB driver is used (MySql, PostgreSQL)</li>
|
||
</ul>
|
||
</li>
|
||
<li>Call the app factory method <code class="highlighter-rouge">create_app</code> defined in app/<strong>init</strong>.py</li>
|
||
<li>Redirect the guest users to Login page</li>
|
||
<li>Unlock the pages served by <em>home</em> blueprint for authenticated users</li>
|
||
</ul>
|
||
|
||
<p><br /></p>
|
||
|
||
<blockquote>
|
||
<p><strong><code class="highlighter-rouge">.env</code></strong> (saved in the root of the project)</p>
|
||
</blockquote>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"># File: `.env`
|
||
|
||
DEBUG=True # Enable/Disable the development environment
|
||
|
||
SECRET_KEY=S3cr3t_Key # The Key used by Flask to encrypt session information
|
||
|
||
# Database production settings (If DEBUG=False)
|
||
|
||
DB_ENGINE=postgresql # DBMS
|
||
DB_NAME=appseed-flask # Database Name
|
||
DB_HOST=localhost # Database Host
|
||
DB_PORT=5432 # Database Port
|
||
DB_USERNAME=appseed # DB Username
|
||
DB_PASS=pass # DB Password</code></pre></figure>
|
||
|
||
<p><br /></p>
|
||
|
||
<blockquote>
|
||
<p><strong><code class="highlighter-rouge">run.py</code></strong> (simplified version)</p>
|
||
</blockquote>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"># File: run.py
|
||
|
||
DEBUG = config('DEBUG', default=True)
|
||
|
||
# Create the WSGI app, using the app factory pattern
|
||
app = create_app( app_config )
|
||
|
||
# Migrate automaticaly the app using Flask Migrate library
|
||
Migrate(app, db)</code></pre></figure>
|
||
|
||
<p><br /></p>
|
||
|
||
<blockquote>
|
||
<p><strong><code class="highlighter-rouge">app/__init__.py</code></strong> (simplified version)</p>
|
||
</blockquote>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"># File: app/__init__.py
|
||
|
||
db = SQLAlchemy() # Invoke SQLAlchemy
|
||
login_manager = LoginManager() # Invoke Login Manager
|
||
|
||
def register_extensions(app):
|
||
db.init_app(app) # Inject SQLAlchemy magic
|
||
login_manager.init_app(app) # Add Login Manager to the app
|
||
|
||
# Register app blueprints: `base`, `home`
|
||
def register_blueprints(app):
|
||
for module_name in ('base', 'home'):
|
||
module = import_module('app.{}.routes'.format(module_name))
|
||
app.register_blueprint(module.blueprint)
|
||
|
||
# Create the tables (automaticaly)
|
||
def configure_database(app):
|
||
|
||
@app.before_first_request
|
||
def initialize_database():
|
||
db.create_all()
|
||
|
||
# Create the WSGI app using the factory pattern
|
||
def create_app(config):
|
||
app = Flask(__name__, static_folder='base/static')
|
||
app.config.from_object(config)
|
||
register_extensions(app)
|
||
register_blueprints(app)
|
||
configure_database(app)
|
||
return app</code></pre></figure>
|
||
|
||
<p><br /></p>
|
||
|
||
<p>The <strong><code class="highlighter-rouge">app/__init__.py</code></strong> constructs the app by putting together a short-list of things:</p>
|
||
|
||
<ul>
|
||
<li>Invoke SQLAlchemy</li>
|
||
<li>Invoke and inject the <code class="highlighter-rouge">Login Manager</code> into the app</li>
|
||
<li>Load the configuration from <code class="highlighter-rouge">config.py</code> file</li>
|
||
<li>Register the app blueprints</li>
|
||
<li>Check if the database tables are created</li>
|
||
<li>return the WSGI app</li>
|
||
</ul>
|
||
|
||
<p><br /></p>
|
||
|
||
<h2 id="app-codebase">App Codebase</h2>
|
||
<hr />
|
||
|
||
<p>The starter defines two blueprints:</p>
|
||
|
||
<ul>
|
||
<li><em>Base</em> blueprint - handles the authentication (routes and forms) and assets management</li>
|
||
<li><em>Home</em> blueprint - serve HTML pages for authenticated users</li>
|
||
</ul>
|
||
|
||
<p><br /></p>
|
||
|
||
<blockquote>
|
||
<p><strong>App / Base Blueprint</strong> structure</p>
|
||
</blockquote>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><</span> <span class="nt">PROJECT</span> <span class="na">ROOT</span> <span class="nt">></span>
|
||
|
|
||
|-- app/
|
||
| |-- home/ # Home Blueprint - serve app pages (private area)
|
||
| |-- base/ # Base Blueprint - handles the authentication
|
||
| |-- static/
|
||
| | |-- <span class="nt"><css</span><span class="err">,</span> <span class="na">JS</span><span class="err">,</span> <span class="na">images</span><span class="nt">></span> # CSS files, Javascripts files
|
||
| |
|
||
| |-- templates/ # Templates used to render pages
|
||
| |
|
||
| |-- includes/ #
|
||
| | |-- 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 # Registration page
|
||
|
|
||
|-- requirements.txt # Development modules - SQLite storage
|
||
|-- requirements-mysql.txt # Production modules - Mysql DMBS
|
||
|-- requirements-pqsql.txt # Production modules - PostgreSql DMBS
|
||
|
|
||
|-- .env # Inject Configuration via Environment
|
||
|-- config.py # Set up the app
|
||
|-- run.py # Start the app - WSGI gateway
|
||
|
|
||
|-- ************************************************************************</code></pre></figure>
|
||
|
||
<p><br /></p>
|
||
|
||
<blockquote>
|
||
<p><strong>App / Home Blueprint</strong> structure</p>
|
||
</blockquote>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><</span> <span class="nt">PROJECT</span> <span class="na">ROOT</span> <span class="nt">></span>
|
||
|
|
||
|-- app/
|
||
| |-- base/ # Base Blueprint - handles the authentication
|
||
| |-- home/ # Home Blueprint - serve app pages (private area)
|
||
| |
|
||
| |-- templates/ # UI Kit Pages
|
||
| |
|
||
| |-- index.html # Default page
|
||
| |-- page-404.html # Error 404 - mandatory page
|
||
| |-- page-500.html # Error 500 - mandatory page
|
||
| |-- page-403.html # Error 403 - mandatory page
|
||
| |-- *.html # All other HTML pages
|
||
|
|
||
|-- requirements.txt # Development modules - SQLite storage
|
||
|-- requirements-mysql.txt # Production modules - Mysql DMBS
|
||
|-- requirements-pqsql.txt # Production modules - PostgreSql DMBS
|
||
|
|
||
|-- .env # Inject Configuration via Environment
|
||
|-- config.py # Set up the app
|
||
|-- run.py # Start the app - WSGI gateway
|
||
|
|
||
|-- ************************************************************************</code></pre></figure>
|
||
|
||
<p><br /></p>
|
||
|
||
<h2 id="app-configuration">App Configuration</h2>
|
||
<hr />
|
||
|
||
<p>The configuration file <strong><code class="highlighter-rouge">config.py</code></strong> (in the root of the project) define a dual configuration controlled via the <code class="highlighter-rouge">.env</code> file ( <code class="highlighter-rouge">DEBUG</code> variable)</p>
|
||
|
||
<blockquote>
|
||
<p><strong>DebugConfig</strong> - default configuration used for development</p>
|
||
</blockquote>
|
||
|
||
<p>This configuration becomes active if <code class="highlighter-rouge">.env</code> file has the <code class="highlighter-rouge">DEBUG</code> file set to <em>True</em></p>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"># Development/Debug configuration
|
||
|
||
# Set up the App SECRET_KEY
|
||
SECRET_KEY = config('SECRET_KEY', default='S#perS3crEt_007')
|
||
|
||
# This will create a file in <span class="nt"><app></span> FOLDER
|
||
SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'db.sqlite3')
|
||
SQLALCHEMY_TRACK_MODIFICATIONS = False</code></pre></figure>
|
||
|
||
<p>During the first request, the SQLite database and tables are automatically created in the root in the project.</p>
|
||
|
||
<blockquote>
|
||
<p><em>Hint</em>: 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>
|
||
|
||
<p><br /></p>
|
||
|
||
<blockquote>
|
||
<p><strong>ProductionConfig</strong> - production configuration</p>
|
||
</blockquote>
|
||
|
||
<p>This configuration becomes active if <code class="highlighter-rouge">.env</code> file has the <code class="highlighter-rouge">DEBUG</code> file set to <em>False</em></p>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"># Production configuration
|
||
|
||
SESSION_COOKIE_HTTPONLY = True
|
||
REMEMBER_COOKIE_HTTPONLY = True
|
||
REMEMBER_COOKIE_DURATION = 3600
|
||
|
||
# PostgreSQL database
|
||
SQLALCHEMY_DATABASE_URI = '{}://{}:{}@{}:{}/{}'.format(
|
||
config( 'DB_ENGINE' , default='postgresql' ),
|
||
config( 'DB_USERNAME' , default='appseed' ),
|
||
config( 'DB_PASS' , default='pass' ),
|
||
config( 'DB_HOST' , default='localhost' ),
|
||
config( 'DB_PORT' , default=5432 ),
|
||
config( 'DB_NAME' , default='appseed-flask' )
|
||
)</code></pre></figure>
|
||
|
||
<p>In this configuration profile, the database defaults to a PostgreSQL DBMS. Make sure the <code class="highlighter-rouge">.env</code> has the right credentials to access the database.</p>
|
||
|
||
<p><br /></p>
|
||
|
||
<h2 id="app-tables">App Tables</h2>
|
||
<hr />
|
||
|
||
<p>The file <strong><code class="highlighter-rouge">app/base/models.py</code></strong> (Base Blueprint) defines the table(s) used by the application. Being a simple starter, by default the following tabes are defined:</p>
|
||
|
||
<ul>
|
||
<li>Table #1 - <strong>User</strong> with fields:
|
||
<ul>
|
||
<li>Id - Primary key, unique</li>
|
||
<li>user - Store the username</li>
|
||
<li>email - The email address</li>
|
||
<li>password - Hashed password</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<p><br /></p>
|
||
|
||
<h2 id="app-forms">App Forms</h2>
|
||
<hr />
|
||
|
||
<p>The file <strong><code class="highlighter-rouge">app/base/forms.py</code></strong> (Base Blueprint) 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>
|
||
</ul>
|
||
|
||
<p><br /></p>
|
||
|
||
<ul>
|
||
<li>Form #2 - <strong>RegisterForm</strong> with fields:
|
||
<ul>
|
||
<li>username - used to authenticate</li>
|
||
<li>email - email address</li>
|
||
<li>password - used to authenticate</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<p><br /></p>
|
||
|
||
<h2 id="app-routing">App Routing</h2>
|
||
<hr />
|
||
|
||
<p>The routing rules are defined by <em>Base</em> and <em>Home</em> blueprints as specified below. This is the public zone of the app.</p>
|
||
|
||
<blockquote>
|
||
<p><strong>Base Blueprint</strong> - routing file <code class="highlighter-rouge">app/base/routes.py</code></p>
|
||
</blockquote>
|
||
|
||
<ul>
|
||
<li><code class="highlighter-rouge">/login</code> route is resolved by <code class="highlighter-rouge">login()</code> method</li>
|
||
<li><code class="highlighter-rouge">/register</code> route is resolved by <code class="highlighter-rouge">register()</code> method</li>
|
||
<li><code class="highlighter-rouge">/logout</code> route calls the <code class="highlighter-rouge">logout_user()</code> defined in <a href="https://flask-login.readthedocs.io/en/latest/">flask_login</a></li>
|
||
</ul>
|
||
|
||
<p><em>Registered ERROR handlers</em></p>
|
||
|
||
<ul>
|
||
<li>404 Error - Page not found</li>
|
||
<li>403 Error - Access Forbidden</li>
|
||
<li>500 Error - Internal Error</li>
|
||
</ul>
|
||
|
||
<p><br /></p>
|
||
|
||
<blockquote>
|
||
<p><strong>Home Blueprint</strong> - routing file <code class="highlighter-rouge">app/home/routes.py</code></p>
|
||
</blockquote>
|
||
|
||
<p>This blueprint will serve requested pages from <code class="highlighter-rouge">app/home/templates</code> directory to authenticated users.
|
||
The authentication status is checked by <code class="highlighter-rouge">@login_required</code> decorator.</p>
|
||
|
||
<ul>
|
||
<li><code class="highlighter-rouge">/<template></code> route resolved by <code class="highlighter-rouge">route_template()</code>.
|
||
<ul>
|
||
<li>If a requested page is not found a default 404 page is returned to the user</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<p><br /></p>
|
||
|
||
<h2 id="pages--assets">Pages & Assets</h2>
|
||
<hr />
|
||
|
||
<p>Pages and all assets defined in the UI Kits are served by the app using both blueprints:</p>
|
||
|
||
<ul>
|
||
<li><em>Home Blueprint</em> manage the static assets - <code class="highlighter-rouge">app/base/static/assets</code></li>
|
||
<li>
|
||
<p><em>Home Blueprint</em> store the layout <code class="highlighter-rouge">master pages</code>, HTML chunks (footer. header, scripts) and <code class="highlighter-rouge">login, registration</code> pages</p>
|
||
</li>
|
||
<li><em>Base Blueprint</em> serve the HTML pages (index, page-404, etc) and the rest of the pages defined in the UI kit.</li>
|
||
</ul>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><</span> <span class="nt">PROJECT</span> <span class="na">ROOT</span> <span class="nt">></span>
|
||
|
|
||
|-- app/
|
||
| |-- base/ # Base Blueprint
|
||
| | |-- static/assets/
|
||
| | | |-- css/ # UI Kit css
|
||
| | | |-- JS/ # Javascript files
|
||
| | | |-- images/ # images used by the app
|
||
| | | |-- scss/ # SCSS files (if any)
|
||
| | |
|
||
| | |-- templates/ # Templates used to render pages
|
||
| | |
|
||
| | |-- includes/ #
|
||
| | | |-- 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 # Registration page
|
||
| |
|
||
| |-- home/ # Home Blueprint - serve app pages (private area)
|
||
| |-- templates/ # UI Kit Pages
|
||
| |
|
||
| |-- index.html # Default page
|
||
| |-- page-404.html # Error 404 - mandatory page
|
||
| |-- page-500.html # Error 500 - mandatory page
|
||
| |-- page-403.html # Error 403 - mandatory page
|
||
| |-- *.html # All other HTML pages
|
||
|
|
||
|-- ************************************************************************</code></pre></figure>
|
||
|
||
<p><br /></p>
|
||
|
||
<h2 id="data-structures">Data Structures</h2>
|
||
<hr />
|
||
|
||
<p>The Flask starter exposes a short-list with data structures used globally across the app:</p>
|
||
|
||
<p><br /></p>
|
||
|
||
<h3 id="current_user-object"><code class="highlighter-rouge">current_user</code> object</h3>
|
||
|
||
<p>Constructed by <a href="https://flask-login.readthedocs.io/en/latest/">Flask-Login</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>
|
||
|
||
<p><br /></p>
|
||
|
||
<blockquote>
|
||
<p><strong>How it works</strong></p>
|
||
</blockquote>
|
||
|
||
<p><code class="highlighter-rouge">app/base/models.py</code> define the callback functions required by <strong>Flask-Login</strong> library:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"># File: app/base/models.py
|
||
|
||
@login_manager.user_loader
|
||
def user_loader(id):
|
||
return User.query.filter_by(id=id).first()
|
||
|
||
@login_manager.request_loader
|
||
def request_loader(request):
|
||
username = request.form.get('username')
|
||
user = User.query.filter_by(username=username).first()
|
||
return user if user else None</code></pre></figure>
|
||
|
||
<p><br /></p>
|
||
|
||
<blockquote>
|
||
<p><strong>Usage in contoler</strong> (Sample file)</p>
|
||
</blockquote>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html">def sample_method(path):
|
||
|
||
# Redirect guests users to login page
|
||
if not current_user.is_authenticated:
|
||
return redirect(url_for('login'))</code></pre></figure>
|
||
|
||
<p><br /></p>
|
||
|
||
<blockquote>
|
||
<p><strong>Usage in view</strong></p>
|
||
</blockquote>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navigation"</span><span class="nt">></span>
|
||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"navbar-nav ml-auto"</span><span class="nt">></span>
|
||
|
||
<span class="c"><!-- The Usage of <current_user> object --></span>
|
||
|
||
|
||
<span class="c"><!-- Html chunk rendered for guests users--></span>
|
||
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item "</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"nav-link"</span><span class="nt">></span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"tim-icons icon-laptop"</span><span class="nt">></i></span> Register
|
||
<span class="nt"></a></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item "</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"nav-link"</span><span class="nt">></span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"tim-icons icon-single-02"</span><span class="nt">></i></span> Login
|
||
<span class="nt"></a></span>
|
||
<span class="nt"></li></span>
|
||
|
||
|
||
|
||
<span class="nt"></ul></span>
|
||
<span class="nt"></div></span></code></pre></figure>
|
||
|
||
<p><br /></p>
|
||
|
||
<h2 id="flask-resources"><a href="https://palletsprojects.com/p/flask/">Flask</a> resources</h2>
|
||
<hr />
|
||
|
||
<ul>
|
||
<li><a href="https://palletsprojects.com/p/flask/">Flask</a> - the official website</li>
|
||
<li><a href="https://www.creative-tim.com/templates/flask">Flask Templates</a> - index provided by Creative-Tim</li>
|
||
</ul>
|
||
|
||
<p><br /></p>
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Core JS Files -->
|
||
<script src="../../../assets/js/core/jquery.min.js" ></script>
|
||
<script src="../../../assets/js/core/popper.min.js" ></script>
|
||
<script src="../../../assets/js/core/bootstrap.min.js" ></script>
|
||
<script src="../../../assets/js/plugins/dashboard/free/perfect-scrollbar.jquery.min.js" ></script>
|
||
|
||
|
||
|
||
|
||
<!-- Google Maps Plugin -->
|
||
|
||
<!-- Place this tag in your head or just before your close body tag. -->
|
||
|
||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||
|
||
|
||
<!-- Chart JS -->
|
||
<script src="../../../assets/js/plugins/dashboard/free/chartjs.min.js"></script>
|
||
|
||
<!-- Notifications Plugin -->
|
||
<script src="../../../assets/js/plugins/dashboard/free/bootstrap-notify.js"></script>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Control Center for Black Dashboard: parallax effects, scripts for the example pages etc --><script src="../../../assets/js/dashboard-free.js?v=1.0.0"></script><!-- Black Dashboard DEMO methods, don't include it in your project! -->
|
||
<script src="../../../assets/demo/dashboard/free/demo.js"></script>
|
||
|
||
|
||
|
||
<script>
|
||
$(document).ready(function(){
|
||
$().ready(function(){
|
||
$sidebar = $('.sidebar');
|
||
$navbar = $('.navbar');
|
||
$main_panel = $('.main-panel');
|
||
|
||
$full_page = $('.full-page');
|
||
|
||
$sidebar_responsive = $('body > .navbar-collapse');
|
||
sidebar_mini_active = true;
|
||
white_color = false;
|
||
|
||
window_width = $(window).width();
|
||
|
||
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
||
|
||
|
||
|
||
$('.fixed-plugin a').click(function(event){
|
||
if($(this).hasClass('switch-trigger')){
|
||
if(event.stopPropagation){
|
||
event.stopPropagation();
|
||
}
|
||
else if(window.event){
|
||
window.event.cancelBubble = true;
|
||
}
|
||
}
|
||
});
|
||
|
||
$('.fixed-plugin .background-color span').click(function(){
|
||
$(this).siblings().removeClass('active');
|
||
$(this).addClass('active');
|
||
|
||
var new_color = $(this).data('color');
|
||
|
||
if($sidebar.length != 0){
|
||
$sidebar.attr('data',new_color);
|
||
}
|
||
|
||
if($main_panel.length != 0){
|
||
$main_panel.attr('data',new_color);
|
||
}
|
||
|
||
if($full_page.length != 0){
|
||
$full_page.attr('filter-color',new_color);
|
||
}
|
||
|
||
if($sidebar_responsive.length != 0){
|
||
$sidebar_responsive.attr('data',new_color);
|
||
}
|
||
});
|
||
|
||
$('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function(){
|
||
var $btn = $(this);
|
||
|
||
if(sidebar_mini_active == true){
|
||
$('body').removeClass('sidebar-mini');
|
||
sidebar_mini_active = false;
|
||
blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
|
||
}else{
|
||
$('body').addClass('sidebar-mini');
|
||
sidebar_mini_active = true;
|
||
blackDashboard.showSidebarMessage('Sidebar mini activated...');
|
||
}
|
||
|
||
// we simulate the window Resize so the charts will get updated in realtime.
|
||
var simulateWindowResize = setInterval(function(){
|
||
window.dispatchEvent(new Event('resize'));
|
||
},180);
|
||
|
||
// we stop the simulation of Window Resize after the animations are completed
|
||
setTimeout(function(){
|
||
clearInterval(simulateWindowResize);
|
||
},1000);
|
||
});
|
||
|
||
$('.switch-change-color input').on("switchChange.bootstrapSwitch", function(){
|
||
var $btn = $(this);
|
||
|
||
if(white_color == true){
|
||
|
||
$('body').addClass('change-background');
|
||
setTimeout(function(){ $('body').removeClass('change-background');
|
||
$('body').removeClass('white-content'); }, 900);
|
||
white_color = false;
|
||
}else{
|
||
|
||
$('body').addClass('change-background');
|
||
setTimeout(function(){ $('body').removeClass('change-background');
|
||
$('body').addClass('white-content');}, 900);
|
||
|
||
white_color = true;
|
||
}
|
||
|
||
|
||
});
|
||
|
||
$('.light-badge').click(function(){
|
||
$('body').addClass('white-content');
|
||
});
|
||
|
||
$('.dark-badge').click(function(){
|
||
$('body').removeClass('white-content');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
|
||
|
||
|
||
<script src="../../../assets/demo/docs.min.js"></script>
|
||
<script src="../../../assets/demo/vendor/anchor.min.js"></script>
|
||
<script src="../../../assets/demo/vendor/clipboard.min.js"></script>
|
||
<script src="../../../assets/demo/vendor/holder.min.js"></script>
|
||
<script src="../../../assets/demo/src/application.js"></script>
|
||
|
||
<script>
|
||
$(document).ready(function(){
|
||
if($('#lineChartExample').length != 0){
|
||
demo.initDocChart();
|
||
}
|
||
|
||
|
||
|
||
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
Holder.addTheme('gray', {
|
||
bg: '#777',
|
||
fg: 'rgba(255,255,255,.75)',
|
||
font: 'Helvetica',
|
||
fontweight: 'normal'
|
||
})
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script><script>
|
||
window.TrackJS &&
|
||
TrackJS.install({
|
||
token: "ee6fab19c5a04ac1a32a645abde4613a",
|
||
application: "black-dashboard-free"
|
||
});
|
||
</script>
|
||
|
||
|
||
</body>
|
||
</html>
|