Webpage Developing weekly I learned 7

Daniel Kim
2 min readJul 16, 2021

7–10–2021 ~ 7–16–2021

Multi-page Site

Before making multi-page site you need to set file. Please follow the following steps.

Make two folders called “templates” and “static” you need to type exactly I what I wrote, templates folder is for html and static folder is for CSS, and you need make a python file called app.py, in templates folder you need make a html file called index.html. And you are all set.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def main():
return render_template("index.html")

@app.route('/detail')
def detail():
return render_template("detail.html")

if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)

Put this on your app.py file. And before that you need to install flask, pymongo, and requests.

And make another html file called detail, so when you clicked a button you can moved to detail html.

<a href="/detail">Go to detail</a>

Put this on your index.html. So this code is a “a”tag it lead to your detail.html, by putting the href=”/detail”

<button onclick='window.location.href = "/"'>Go back to main</button>

Put this on your detail.html. Now this code is a button tag code and unlike a tag it has onclick function, normally people make a function and put the function name inside onclick, but in this case the function is too short, so this code is more efficient. I’ll explain the code when the button is clicked(onclick function) it let the window location to /, in this case as you can see on the first code(app.py) / is mainl.

Jinja2 Basic

@app.route('/')
def main():
myname = "Daniel" // put your name.
return render_template("index.html", name=myname)

Put myname = “Daniel” inside your def main():, and also put name=myname inside return statement. So to explain, it create variable named myname, and inside myname there’s a “Daniel”, and it send myname into your index.html.

<h3>Hello, {{ name }}!</h3>

Put this in your index.html, this is how you use Jinja2 basically make a {} inside a {} and put a variable name you made(we named our variable name)(name=myname).

--

--

Daniel Kim

Hello, I’m Daniel Kim. I write helpful tips about life.