\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{khalidhariry}
\pdfinfo{
  /Title (flask-wtf-and-quick-reference.pdf)
  /Creator (Cheatography)
  /Author (khalidhariry)
  /Subject (Flask\_WTF and Quick Reference Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{03BF2D}
\definecolor{LightBackground}{HTML}{EFFBF1}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Flask\_WTF and Quick Reference Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{khalidhariry} via \textcolor{DarkBackground}{\uline{cheatography.com/169470/cs/35550/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}khalidhariry \\
  \uline{cheatography.com/khalidhariry} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 21st November, 2022.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\#Barebones App}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\# importing Flask \newline from flask import Flask, render\_template \newline  \newline \# importing the flask\_wtf library \newline from flask\_wtf import FlaskForm \newline  \newline \# importing the Fields \newline from wtforms import StringField, PasswordField, SubmitField \newline  \newline \# importing the validations \newline from wtforms.validators import DataRequired} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\# Getting Started}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{app = Flask(\_\_name\_\_) \newline app.config{[}"SECRET\_KEY"{]} = "Thisisasecretkey" \newline  \newline class LoginForm(FlaskForm): \newline     email = \seqsplit{StringField(label="Email"}, \textbackslash{}  \newline             validators={[}DataRequired(){]}) \newline     submit = \seqsplit{SubmitField(label="login")} \newline  \newline @app.route("/") \newline def login(): \newline     login\_form = LoginForm() \newline     \seqsplit{login\_form.validate\_on\_submit()} \newline     return \seqsplit{render\_template("login.html"}, form=login\_form)} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\# label}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{email = \seqsplit{StringField(label="Email")} \newline \# the label property in use in login.html when the form object is passed over. \newline 	\textless{}form method-"POST" action="\{\{ url\_for('login') \}\}"\textgreater{} \newline 		\{\{ form. csrf\_token \}\} \newline 		\{\{ form.email.label \}\} \{\{ form.email(size=30) \}\} \newline 		\{\{ form.submit \}\} \newline 	\textless{}/form\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\# Validation}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{email = \seqsplit{StringField(Label='Email'}, validators= {[}DataRequired(){]}) \newline \# The validators parameter accepts a List of validator Objects. DataRequired makes the field required fields, so the user must type something, otherwise an error will be generated. \newline  \newline \# iIn order to make sure that we are giving all users field validation, we have to switch off the browser validation, and we do that with an attribute on the form element called novalidate. \newline  \newline \textless{}form method= "POST" action="\{\{ url\_for('login') \}\}" novalidate\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\# Error handling}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\# When a form is submitted, there may be a number of errors, so a List of errors can be generated and passed over to our form HTML as a property on the field which generated the error, e.g. \newline form.\textless{}field\textgreater{}.errors \newline \{\{ form.email.label \}\} \textless{}br\textgreater{} \{\{ form.email (size=30) \}\} \newline \{\% for err in form.email.errors \%\}  \newline \textless{}span style="color:red"›\{\{ err \}\}\textless{}/span\textgreater{} \newline \{\% endfor \%\} \newline  \newline \# Form validation \newline \# to validate the user's entry when they hit submit. so we have to edit our route and make sure it is able to respond to POST requests and then to validate\_on\_submit() e.g. \newline login\_form.validate\_on\_submit()} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\#Template Inheritance Using Jinja2}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\#1. This line of code tells the templating engine (Jinja) to use "base.html" as the template for this page \newline \{\% extends "base.html" \%\} \newline \#2.This block inserts a custom title into the header of the template. \newline \{\% block title \%\}Success\{\% endblock \%\} \newline \#3.This block provides the content of the website. The part that is going to vary between webpages. \newline \{\% block content \%\} \newline    \textless{}div class="container"\textgreater{} \newline       \textless{}h1\textgreater{}Top Secret \textless{}/h1\textgreater{} \newline       \textless{}iframe \seqsplit{src="https://giphy.com/embed/Ju7l5y9osyymQ"} width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen\textgreater{}\textless{}/iframe\textgreater{} \newline       \textless{}p\textgreater{}\textless{}a href="https://giphy.com/gifs/rick-astley-Ju7l5y9osyymQ"\textgreater{}via GIPHY\textless{}/a\textgreater{}\textless{}/p\textgreater{} \newline    \textless{}/div\textgreater{} \newline \{\% endblock \%\}\# label \newline email = \seqsplit{StringField(label="Email")} \newline \# the label property in use in login.html when the form object is passed over. \newline \textless{}form method-"POST" action="\{\{ url\_for('login') \}\}"\textgreater{} \newline 	\{\{ form. csrf\_token \}\} \newline 	\{\{ form.email.label \}\} \{\{ form.email(size=30) \}\} \newline 	\{\{ form.submit \}\} \newline \textless{}/form\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}