Improving the Home Page Flask Tutorial




In this tutorial with Flask, we cover how to include some of the fancier javascript aspects from Bootstrap. I happen to like the "modals" that Bootstrap offers. These are where you click on a link and, instead of loading to another page, the background dims out a bit and there is a sort of "pop up" window. This seems to fit fairly well with something like a log in button, but can also fit for a sort of "more information" button. Obviously there are many reasons why this might work, however.

Here is an example of us including the modal to work on-click with the login button:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Python Programming Tutorials</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
	<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>

<header>
	<div class="navbar-header">
      <a class="navbar-brand" href="/">
	  <img style="max-width:120px; margin-top: -7px;" src="{{ url_for('static', filename='images/mainlogo.png') }}">
	  </a>
    </div>
	
	
	<div class = "container-fluid">

		<a href="/dashboard/"><button type="button" class="btn btn-primary" aria-label="Left Align" style="margin-top: 5px; margin-bottom: 5px; height: 44px; margin-right: 15px">
		  <span class="glyphicon glyphicon-off" aria-hidden="true"></span> Start Learning
		</button></a>

	
	
	
	<ul class="nav navbar-nav navbar-right">
		  
		  <div style="margin-right: 10px; margin-left: 15px; margin-top: 5px; margin-bottom: 5px;"  class="container-fluid">
			<h5>

			<a href="/support-donate/"> <span class="glyphicon glyphicon-heart"></span> Support   </a>
	
			<a role="presentation" data-toggle="modal" data-target="#exampleModal" href="#"><span class="glyphicon glyphicon-log-in"></span> Login   </a>

			<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			  <div class="modal-dialog">
				<div class="modal-content">
				  <div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
					<h4 class="modal-title" id="exampleModalLabel">Login</h4>
				  </div>
				  <div class="modal-body">
					  <div class="container-fluid">
						  <form action="" class="form-inline" method="post">
							<input type="text" class="form-control" placeholder="Username" name="username" value="">
							 <input type="password" class="form-control" placeholder="Password" name="password" value="">
							<input class="btn btn-primary" type="submit" value="Login">
						  </form>
						  
							<div class="container">
							<br>
						   <p>No account? <a href='/register'>Register here</a>.</p>
						   <br>
							
						  </div>
					</div>
				  </div>

				</div>
			  </div>
			</div>

		<a role="presentation" class="active" data-toggle="modal" data-target="#register" href="#"><span class="glyphicon glyphicon-pencil"></span> Sign up</a><h5>
		<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
			<div class="modal-content">
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
				<h4 class="modal-title" id="exampleModalLabel">Register</h4>
			  </div>
			  <div class="modal-body">
				  <div class="container">
					  
						<form method=post action="/register">
						  <dl>
							
  <dt><label for="username">Username</label>
  <dd><input id="username" name="username" type="text" value="">
  
  </dd>

							
  <dt><label for="email">Email Address</label>
  <dd><input id="email" name="email" type="text" value="">
  
  </dd>

							
  <dt><label for="password">New Password</label>
  <dd><input id="password" name="password" type="password" value="">
  
  </dd>

							
  <dt><label for="confirm">Repeat Password</label>
  <dd><input id="confirm" name="confirm" type="password" value="">
  
  </dd>

							
  <dt><label for="accept_tos">I accept the <a href="/about/tos" target="blank">Terms of Service</a> and <a href="/about/privacy-policy" target="blank">Privacy Notice</a> (updated Jan 22, 2015)</label>
  <dd><input id="accept_tos" name="accept_tos" type="checkbox" value="y">
  
  </dd>

						  </dl>
						  <p><input type=submit value=Register>
						</form>
					  
				</div>
			  </div>

			</div>
		  </div>
		</div>
	  </div>
      </ul>
	</ul>
	</div>

</header>

<body>

	<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

</body>

</html>

Now, when you click to log in, a modal will pop up, rather than you being sent to another page to log in.

The next tutorial:





  • Introduction to Practical Flask

  • Basic Flask Website tutorial

  • Flask with Bootstrap and Jinja Templating

  • Starting our Website home page with Flask Tutorial

  • Improving the Home Page Flask Tutorial
  • Finishing the Home Page Flask Tutorial

  • Dynamic User Dashboard Flask Tutorial

  • Content Management Beginnings Flask Tutorial

  • Error Handling with Flask Tutorial

  • Flask Flash function Tutorial

  • Users with Flask intro Tutorial

  • Handling POST and GET Requests with Flask Tutorial

  • Creating MySQL database and table Flask Tutorial

  • Connecting to MySQL database with MySQLdb Flask Tutorial

  • User Registration Form Flask Tutorial

  • Flask Registration Code Tutorial

  • Finishing User Registration Flask Tutorial

  • Password Hashing with Flask Tutorial

  • Flask User Login System Tutorial

  • Decorators - Login_Required pages Flask Tutorial

  • Dynamic user-based content Flask Tutorial

  • More on Content Management Flask Tutorial

  • Flask CMS Concluded Flask Tutorial

  • The Crontab Flask Tutorial

  • Flask SEO Tutorial

  • Flask Includes Tutorial

  • Jinja Templating Tutorial

  • Flask URL Converters Tutorial

  • Flask-Mail Tutorial for email with Flask

  • Return Files with Flask send_file Tutorial

  • Protected Directories with Flask Tutorial

  • jQuery with Flask Tutorial

  • Pygal SVG graphs with Flask Tutorial

  • PayPal with Flask Web Development Tutorial

  • Securing your Flask website with SSL for HTTPS using Lets Encrypt