Skip to main content

Too. Much. Code.

Too. Much. Code.

As you've probably figured out by now, your flask files get pretty big pretty quickly.


No one wants all of that code in one page. It's too much.


Today we will learn how to use templating and redirecting to slim things down a bit.


👉 Here's some simple Flask code to start us off:


from flask import Flask

app = Flask(__name__)

@app.route('/')

def index():

  myName = "David"

  page = f"""Hi {myName}"""

  return page

app.run(host='0.0.0.0', port=81)



👉 This is fine for small code, but for much larger projects we can create templates to store our HTML elsewhere. Let's do that now:


1.Create a folder called template.

2.Create an HTML file called portfolio inside the template folder.


3.Now I'm going to paste my portfolio code from before into the portfolio page.

4.Next, I create a CSS folder and a file called style.css. I paste my CSS for the portfolio page into that file.

5.Edit my HTML in the portfolio page to fully reference the style.css file in the static folder.

<link href="/static/css/portfolio.css" rel="stylesheet" type="text/css" />  

6.Make sure all of my images, etc. are in suitable subfolders in static. Edit all the references in portfolio.html to ensure that they have the proper file paths.

Now, back in main.py... 

1.Set our fString to blank
2.Revist an old friend f= open()
3.Open the portfolio.html file
4.Read the contents into the 'page' variable

@app.route('/')
def index():
  myName = "David"
  page = ""
  f = open("template/portfolio.html", "r")
  page = f.read()
  f.close()
  return page


More Pages
👉 Next, I'm going to add a 'home' page to the Flask code. 

from flask import Flask

app = Flask(__name__)


@app.route('/')
def index():
    return 'Hello from Flask!'

@app.route('/home') # Creates the path to the home page
def home(): # Subroutine to create the home page
  # Three quotes followed by the html for the baldies site. Three more quotes to close. All the HTML is assigned to the 'page' variable
  page = """html
  
  <html>
    
  <head>
    <title>David's World Of Baldies</title>
  </head>


  <body>
  <h1>Dave's World of Baldies</h1> 
  <h2>Welcome to our website!</h2>

  <p>We all know that throughout history some of the greatest have been Baldies, let's see the epicness of their heads bereft of hair.</p>

  <h2>Gallery of Baldies</h2>
  <p>Here are some of the legends of the bald world.</p>

  <img src="images/picard.jpg" width = 30%> 
  <p><a href = "https://memory-alpha.fandom.com/wiki/Star_Trek:_Picard">Captain Jean Luc Picard: Baldest Star Trek captain, and legend.</a></p>

  <ul>
    <li>Beautiful bald man</li>
    <li>Calm and cool under pressure</li>
    <li>All the Picard memes</li>
  </ul>

  <p><a href = "page2.html">Go to page 2</a></p>
  
</body>
  
</html>
  
  """
  
  return page # returns the contents of the page variable


app.run(host='0.0.0.0', port=81)   

fStrings and Replacing
Using fStrings and the .replace() string manipulation technique from many lessons ago lets us customize the webpage for our user. Here's how:

👉 First, I've put a placeholder for a name in my portfolio.html file.

<body>
  <h1>{name}'s Portfolio</h1>


👉 Now in the Flask code, I can use the replace() function. Note that I've done this before the return command.

@app.route('/')
def index():
  myName = "Katie"
  page = ""
  f = open("template/portfolio.html", "r")
  page = f.read()
  f.close()
  page = page.replace("{name}", myName) # Replace all instances of {name} with the contents of the 'myName' variable
  
  return page


I can reuse this technique to make multiple changes to a page.

👉 Let's look at some example code where I've done this to create a generic page that can be customised by the user:

<body>
  <h1>{name}'s Portfolio</h1>
  <h2>{title}</h2>
  <p>{text}</p>
<a href="{link}"><img src="static/images/{image}" width="500px"></a>


👉 Now in my main code, all I have to do is store the information in variables and use multiple replace. 

def index():
  myName = "Katie"
  title = "Day 56 Solution"
  text = "So, day 56 was all about using csv reading and file and folder manipulation to make 100 files in dozens of folders. This was tricky because the names of the folders and files were based on the top 100 streaming songs and so weren't simple to encode."
  image = "56.png"
  link = "https://replit.com/@DavidAtReplit/Day-056-Solution#main.py"
  
  page = ""
  f = open("template/portfolio.html", "r")
  page = f.read()
  f.close()
  page.replace("{name}", myName)
  page.replace("{title}", title)
  page.replace("{text}", text)
  page.replace("{image}", image)
  page.replace("{link}", link)
  return page  


👉 For example, I could create Day 56 as its own app.route like this:

@app.route('/56')
def fiftySix():
  myName = "Dave"
  title = "Day 56 Solution"
  text = "So, day 56 was all about using csv reading and file and folder manipulation to make 100 files in dozens of folders. This was tricky because the names of the folders and files were based on the top 100 streaming songs and so weren't simple to encode."
  image = "56.png"
  link = "https://replit.com/@DavidAtReplit/Day-056-Solution#main.py"
  
  page = ""
  f = open("template/portfolio.html", "r")
  page = f.read()
  f.close()
  page.replace("{name}", myName)
  page.replace("{title}", title)
  page.replace("{text}", text)
  page.replace("{image}", image)
  page.replace("{link}", link)
  return page 


Redirecting

Redirecting is useful when you want to send a user to another web address, but that address is really long.

It requires another import at the top of the main.py file:

from flask import Flask, redirect


👉 Now I'll add an app route. In this example, I want to redirect users to my page for Day 77. All I put in the subroutine is a return redirect("") with the URL in the quotes.

from flask import Flask, redirect
@app.route('/77')
def seventySeven():
  return redirect("https://replit.com/@DavidAtReplit/Day-077-Solution#main.py")
  
  return page


This is really powerful. You've effectively created your own link shortener. All the user has to do is add /77 to the end of the home page URL.


Comments

Post a Comment

Popular posts from this blog

Web Scraping

 Web Scraping Some websites don't have lovely APIs for us to interface with. If we want data from these pages, we have to use a tecnique called scraping. This means downloading the whole webpage and poking at it until we can find the information we want. You're going to use scraping to get the top ten restaurants near you. Get started 👉 Go to a website like Yelp and search for the top 10 reastaurants in your location. Copy the URL.   url = "https://www.yelp.co.uk/search?find_desc=Restaurants&find_loc=San+Francisco%2C+CA%2C+United+States"   Import libraries 👉 Import your libraries. Beautiful soup is a specialist library for extracting the contents of HTML and helping us parse them. Run the Repl once your imports are sorted because we want the Beautiful Soup library to be installed (it'll run quicker this way). import requests from bs4 import BeautifulSoup url = "https://www.yelp.co.uk/search?find_desc=Restaurants&find_loc=San+Francisco%2C+CA%2C+Unite...
Post a Comment
Read more

It's Called Hashing,Hashing, Printing the Hash , Salty, Second User ,

 It's Called Hashing One of the big issues with storing usernames and passwords in a database is what happens if we're hacked? If those passwords are stored as text, our users' security is compromised. Probably across multiple sites because they ignored our advice and used the same password for everything!!!!! Hashing  In reality, organizations don't store your actual password. They store a hash of your password. A hash is produced by turning your password into a sequence of numbers, then passing it though a hashing algorithm (some mathematical process that is very difficult to reverse engineer). The data spit out of this hashing algorithm is what's stored instead of your actual password. 👉 So let's do it. I'm using the built-in hash function to create a numerical hash of the password  password = "baldy1" password = hash(password) print(password) # This will output a really long number  👉 Now let's store that hashed version in our database in...
Post a Comment
Read more

Hide & Remove,Come Back!,

 Hide & Remove DISCLAIMER: I promise the good stuff is coming back. We have to go through the valley to get to the mountain, right? Sometimes, we want to remove a button, image or piece of text from the screen. To do this, we use pack_forget(). 👉 We'll start with our default tkinter program. import tkinter as tk window = tk.Tk() window.title("Hello World")  window.geometry("300x200")  hello = tk.Label(text = "Hello World")  hello.pack()  button = tk.Button(text = "Click me!")  button.pack() tk.mainloop() 👉 Now I'm going to add a new subroutine to hide the label and call it on a button click. import tkinter as tk window = tk.Tk() window.title("Hello World")  window.geometry("300x200")  # New subroutine def hideLabel():   hello.pack_forget() # Removes the 'hello' label hello = tk.Label(text = "Hello World")  hello.pack()  button = tk.Button(text = "Click me!", command = hideLabel) # Call...
Post a Comment
Read more