DEV Community

Cover image for From-Basics-to-Deployment Day 2
Sabin Sim
Sabin Sim

Posted on

From-Basics-to-Deployment Day 2

#python #challenge #fullstack #learning

🧭 Week 1: Web & Flask Essential Basics

📅 Day 2 Mission: "Displaying Different Pages at Different Addresses" — Multi-Routing

1️⃣ Core Problem Identification

Why do websites have different addresses (pages) like /about, /contact, and /login?

How does the Flask server determine which URL a user has entered and how does it return the corresponding HTML?

The server we built yesterday could only display a single page (/). Today, we expand that server into a real 'website' structure with multiple pages.

2️⃣ Targeted Technical Goal

✔ Understanding Goal

  • Understand the structure of a single Flask app having multiple pages.
  • Understand what routing is and why it's necessary.
  • Internalize the mechanism for linking a URL to a View Function.

✔ Implementation Goal

  • Build a web server that responds with completely different screens when accessing different URLs.

3️⃣ Grasping the Concepts: What is Routing?

🌐 (1) The Core Concept of Routing

Routing is a very simple agreement:

"When a request comes in for this URL, execute this function!"

For example:

URL View Function Executed
/ home()
/about about()
/contact contact()

In short, the URL pattern and the Python function that processes the URL are linked by the Routing connection bridge.

🌐 (2) What @app.route Does

Flask connects the URL and the function using the decorator @app.route('/path').

Example:

@app.route('/about')
def about():
    return "Introduction Page!"
Enter fullscreen mode Exit fullscreen mode

When a user enters /about, Flask executes the about() function and passes its return value to the browser.

🌐 (3) Routing Expansion is "Page Expansion"

Most websites you know have countless URLs:

  • /
  • /login
  • /profile
  • /products
  • /products/3

Today is about creating this "foundation." One URL per Python function—if you understand this, you're halfway to success.

4️⃣ Today's Solution: Creating a 3-Page Website

If you paste this code into app.py and run it, you will have personally created a website with the following 3 pages:

  • / $\rightarrow$ Homepage
  • /about $\rightarrow$ About Page
  • /contact $\rightarrow$ Contact Page

📄 app.py 

# 1. Import Flask.
from flask import Flask

# 2. Create the Flask application object
app = Flask(__name__)

# =========================================================
# 3. Define Multiple Pages (Routing)
# =========================================================

# A. Homepage ('/')
@app.route('/', methods=['GET'])
def home():
    return '<h1>Homepage</h1><p>Day 2 Mission: Multi-Page Implementation!</p>'

# B. About Page ('/about')
@app.route('/about', methods=['GET'])
def about():
    return '<h1>Company Introduction</h1><p>We grow through Problem-Based Learning (PBL).</p>'

# C. Contact Page ('/contact')
@app.route('/contact', methods=['GET'])
def contact():
    return '<h1>Contact</h1><p>Inquiries: contact@pbl.com</p>'

# =========================================================
# 4. Start the Server
# =========================================================

if __name__ == '__main__':
    app.run(debug=True)
Enter fullscreen mode Exit fullscreen mode

5️⃣ How to Run

① Save File:
Save as app.py

② Run Server:
python app.py

③ Access the Following Addresses in Your Browser:

  • http://127.0.0.1:5000/
  • http://127.0.0.1:5000/about
  • http://127.0.0.1:5000/contact

If all three pages show different HTML, then $\rightarrow$ Day 2 Mission Success!

6️⃣ Today's Deconstruction Learning (Deep Understanding)

Now, to move beyond the beginner stage, you must actively experiment with "what role each route plays."

🔍 1. Does it work if the function name is changed?

For example, change about() to introduce_company().

@app.route('/about')
def introduce_company():
    return "..."
Enter fullscreen mode Exit fullscreen mode

/about still works perfectly. Why?
👉 Because Flask searches based on the URL path, not the function name.

🔍 2. What happens when you access a non-existent URL?

Try accessing /mission in your browser.

404 Not Found

This is Flask telling you: “There is no function corresponding to that URL!”
This experience will be extremely helpful later when you learn RESTful API design.

🔍 3. How should URLs be designed to be intuitive?

  • Company Introduction $\rightarrow$ /about
  • Blog Post List $\rightarrow$ /posts
  • Contact Information $\rightarrow$ /contact
  • Login $\rightarrow$ /login

URL design is critical for user experience (UX). Start developing the habit of designing intuitive URL names now.

🧩 Today's Summary

Concept Explanation
Routing The core technology linking URLs to functions.
Multi-Routing Creating multiple pages from a single server.
Independent View Functions Each URL operates independently.
404 Error Occurs when an undefined URL is requested.

🎯 Tomorrow's Mission Preview

“How should the server receive data that a user inputs into a form?”
$\rightarrow$ On Day 3, we will finally learn the POST request and how to process user input values!

Top comments (0)