Myfe - 23/03/22 - TheLazy.Dev

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")))

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>

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>

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"))

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]];
  }
}

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")

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>

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>

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!

Blog

Myfe - 23/03/22

Medea

Profile Page

Main Page

Navigation Bar

Viewing my changes

Join Our Newsletter. No Spam, Only the good stuff.

Related