Myfe - 23/03/22
source link: https://dev.to/vulcanwm/myfe-230322-1083
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
My next step was to add a profile page, but I ended up doing way more than that.
Profile Page
First of all, I added a profile route in app.py
:
@app.route("/profile")
def profile():
if getcookie("User") == False:
return redirect("/")
else:
return render_template("profile.html", user=getuser(getcookie("User")))
Enter fullscreen mode
Exit fullscreen mode
Then I made the profile.html
file in the templates
folder:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Myfe - Your Profile</title>
</head>
<body>
<h1>{{user['Username']}}</h1>
<p>Account created on: {{user['Created']}}</p>
<p>Money: {{user['Money']}}</p>
<p>XP: {{user['XP']}}</p>
</div>
</body>
</html>
Enter fullscreen mode
Exit fullscreen mode
Main Page
Then I made a better main page, so I created the index.html
page in the templates
folder:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Myfe - Login</title>
</head>
<body>
<h1>Myfe</h1>
{% if error != False and error != None and error != "" %}
<p>{{error}}</p>
{% endif %}
</div>
</body>
</html>
Enter fullscreen mode
Exit fullscreen mode
After that, instead of the index
function I had before for the route /
, I replaced it with the one below:
@app.route('/')
def index():
return render_template("index.html", logged=getcookie("User"))
Enter fullscreen mode
Exit fullscreen mode
Navigation Bar
After that, I wanted it to be able to render it's own navbar without me defining all the navbar link tags every time, so I created a static
folder, in which I added a script.js
file, which had the code below:
function navbaredit(thelist){
const elements = {
home : '<a class="nav-link nav-link-ltr" href="/">Home</a>',
login: '<a class="nav-link nav-link-ltr" href="/login">Login</a>',
signup: '<a class="nav-link nav-link-ltr" href="/signup">Signup</a>',
profile: '<a class="nav-link nav-link-ltr" href="/profile">Profile</a>',
logout: '<a class="nav-link nav-link-ltr" href="/logout">Logout</a>'
};
var thenavbar = document.getElementsByClassName("navbar")[0]
for (let i = 0; i < thelist.length; i++) {
thenavbar.innerHTML = thenavbar.innerHTML + elements[thelist[i]];
}
}
Enter fullscreen mode
Exit fullscreen mode
Now I wanted to link it to every HTML file, so first I made a url for the file so it was easy to access in the HTML file:
from flask import send_file
@app.route("/script.js")
def scriptjs():
return send_file("static/script.js")
Enter fullscreen mode
Exit fullscreen mode
Then I added the classes header
(which contains the h1
tag of the page), navbar
(which has the navbar JS code) and content
(which has the rest of the code) in each HTML file. Then I linked the script.js
file to every HTML file
eg:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Myfe - Login</title>
<script src="/script.js"></script>
</head>
<body>
<div class="header">
<h1>Myfe</h1>
</div>
<div class="navbar">
</div>
<div class="content">
{% if error != False and error != None and error != "" %}
<p>{{error}}</p>
{% endif %}
</div>
</body>
</html>
Enter fullscreen mode
Exit fullscreen mode
Finally to actually make the navbar work, I added the jinja code in a script tag which would change the navbar depending on if the user was logged in or not:
<script>
{% if logged == False %}
navbaredit(['home', 'signup', 'login'])
{% else %}
navbaredit(['home', 'profile', 'logout'])
{% endif %}
</script>
Enter fullscreen mode
Exit fullscreen mode
Viewing my changes
After I ran all of that code, this was the output:
At least I made some change to the game!
You can view all the code together in a GitHub repo here
Thanks for reading!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK