MyGear - Benutzerprofil

Die Benutzer sollen ihre Daten auf einer Profilseite sehen können. Die basteln wir uns jetzt. Die gehört für mich direkt zum Hauptprojekt und nur für die eine Funktion braucht sie keine eigene App. Also kommt sie in home.

In der urls.py lege ich zuerst die URL an, unter der das Profil aufrufbar ist.

path('user_profile/', views.user_profile, name="user_profile"),

Und in der views.py kommt die Funktion rein, die die Seite rendert. Da ich auch hier den Namen abhängig von den vorhanden Informationen anzeigen lassen möchte, lagere ich die Funktion aus dem home-View aus. Die sieht dann jetzt so aus:

from django.shortcuts import render
from django.contrib.auth.decorators import login_required

def get_display_name(request):
    if request.user.first_name=="":
        display_name=request.user.last_name
        if request.user.last_name=="":
            display_name=request.user.email
    else:
        display_name=request.user.get_full_name
    return display_name

def home_view(request):
    if request.user.is_authenticated:
        display_name=get_display_name(request)
    else:
        display_name=""
    return render(request, 'home.html', {'user':request.user,'display_name':display_name})

@login_required
def user_profile(request):
    display_name=get_display_name(request)
    return render(request, 'user_profile.html', {'user':request.user,'display_name':display_name})   

Hinzu kam das login_required. Damit kann die Seite des Benutzerprofils nur aufgerufen werden, wenn ein User eingeloggt ist. Rufe ich jetzt die Profil-Seite manuell auf, wird auf die Login-Seite weitergeleitet, wenn kein User eingeloggt ist.

In meiner user.html kommt jetzt der Link hinzu:

<a href="{% url 'user_profile' %}">User Profile</a>

Im template-Ordner lege ich mir eine user_profile.html an. Diese erweitert home.html im Block content.

{% extends 'home.html' %}
{% load static %}
{% block title %}User Profile{% endblock %}
{% block content %}
    <div class="username">
        <div class="avatar"><img src="{% static 'images/avatar.png' %}"></div>
        <div><p>{{ display_name }}</p></div>
    </div>
    <div class="section">
        <h1>My Profile</h1>
        <div class="table">
            <div class="table-label">Name:</div><div class="table-value">{{ user.first_name }} {{ user.last_name }}</div>
            <div class="table-label">eMail:</div><div class="table-value">{{ user.email }}</div>
            <div class="table-label">Location:</div><div class="table-value">{{ user.location }}</div>
            <div class="table-label">Maximum Gear:</div><div class="table-value">{{ user.maxgear }} Items</div>
        </div>
    </div>
    <div class="section">
        <h1>My Gear</h1>
    </div>
{% endblock %}

Ich binde wieder static ein. Das muss hier noch mal sein, auch wenn es in der home.html drin steht. Für feste Bilder kommt hier ein Image-Ordner neu dazu, in den in ein Avater-Bild lege, welches angezeigt wird, wenn es keines vom User gibt. Eine Funktion für den Upload und den Wechsel dazu kommt später.

Dann folgen die Benutzerdaten und in einem weiteren Bereich die Ausrüstung. Damit steht das Grundgerüst mit entsprechenden Klassen für das Styling später. Zur Optik bekommt die style.css noch ein paar rudimentäre Einträge, damit die Optik nicht ganz banal ist.

.username div{
    float: left;
    font-size: 2em;
    padding-right: 1em;
}

.avatar img{
    width: 100px;
    float: left;
}

.section {
    clear: both;
}