Created Homepage user list template, User Details page template

WidgetFEKK/.python-version

+3.8.13

WidgetFEKK/Homepage/models.py

 from django.db import models
+from django.urls import reverse
 
 """
 A model for a school department in Widget.
@@ -29,4 +30,10 @@ class WidgetUser(models.Model):
         return f"""{self.last_name}, {self.first_name} {self.middle_name}: 
         {self.id_num}, {self.email}, {self.department}"""
 
+    def get_absolute_url(self):
+        return f"users/{self.id_num}/details"
+    
+    def get_name(self) -> str:
+        return f"{self.last_name}, {self.first_name} {self.middle_name}"
+
 

WidgetFEKK/Homepage/static/Homepage/styles.css

+body { 
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 0 auto;
+}
+
+h1 { 
+    color: white;
+    padding: 0.5em;
+    margin: auto;
+    text-align: center;
+    background-color: #365f90;
+}
+
+h2 { 
+    margin: 0.25em;
+}
+
+.user-list { 
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 0.25em;
+    margin: 1em;
+}
+
+.user-container { 
+    background-color: #A7C7E7;
+    padding: 0.5em;
+    border-radius: 0.5em;
+    max-width: 50vw;
+}
+
+.user-container:not(:last-of-type) { 
+    margin-bottom: 0.25em;
+}
+
+.user-container > h3 { 
+    margin: 0;
+    margin-bottom: 0.125em;
+}
+
+.user-links { 
+    display: flex;
+    justify-content: space-between;
+}
\ No newline at end of file

WidgetFEKK/Homepage/templates/index.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %} Widget - Home {% endblock %}
+
+{% block styles %}
+<link rel="stylesheet" href="{% static 'Homepage/styles.css' %}">
+{% endblock %}
+
+{% block content %}
+<h1> Welcome to Widget! </h1>
+<h2> Users </h2>
+<div class="user-list">
+    {% for user in users %} 
+        {% include "user_details.html" with user=user counter=forloop.counter %}
+    {% empty %}
+        <h2> No Widget Users. </h2>
+    {% endfor %}
+</div>
+{% endblock %}
\ No newline at end of file

WidgetFEKK/Homepage/templates/user_details.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %} Widget - Home {% endblock %}
+
+{% block styles %}
+<link rel="stylesheet" href="{% static 'Homepage/styles.css' %}">
+<style>
+    .user-container a { 
+        text-decoration: none;
+    }
+
+    .user-container a:hover { 
+        text-decoration: underline;
+        transition: 0.1s;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="user-container">
+    <h3> {{ counter }}. {{ user.get_name }} </h3>
+    <div class="user-links">
+        <span> {{ user.id_num }} </span>
+        <a href="{{ user.get_absolute_url }}"> View Profile </a>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file

WidgetFEKK/Homepage/templates/user_page.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %} Widget - user.get_name {% endblock %}
+
+{% block styles %}
+<link rel="stylesheet" href="{% static 'Homepage/styles.css' %}">
+<style>
+    h2 { 
+        margin: 0;
+    }
+
+    img { 
+        object-fit: cover;
+        border-radius: 0.5em;
+    }
+
+    .user-page-container { 
+        display: flex;
+        gap: 0.5em;
+        justify-content: center;
+        margin: 1em;
+    }
+
+    .user-page-details { 
+        display: flex;
+        flex-direction: column;
+        gap: 0.25em;
+        align-self: center;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+    <h1> Widget User Profile </h1>
+    <div class="user-page-container">
+        <img src="{% static 'Homepage/3.JPG' %}" alt="Profile Image of {{ user.get_name }}" width="192" height="192">
+        <div class="user-page-details">
+            {{ user.id_num }}
+            <h2> {{ user.get_name }} </h2>
+            <a href="mailto:{{ user.email }}"> {{ user.email }}</a>
+            {{ user.department }}
+        </div>
+    </div>
+{% endblock %}
\ No newline at end of file

WidgetFEKK/Homepage/urls.py

 from django.urls import path
-from .views import index
+from .views import HomePageView, UserPageView
 
 urlpatterns = [
-    path('', index, name='index'),
+    path('', HomePageView.as_view(), name='index'),
+    path('users/<int:user_id>/details', UserPageView.as_view(), name='user-details')
 ]
 
 app_name = "Homepage"
\ No newline at end of file

WidgetFEKK/Homepage/views.py

 from django.shortcuts import render
-from django.http import HttpResponse
+from django.views import View
 from .models import WidgetUser
 
-def index(response):
-    userString = "WIDGET USERS:<br>"
+class HomePageView(View):
+    def get(self, request):
+        users = WidgetUser.objects.all().order_by('last_name')
 
-    users = WidgetUser.objects.all()
+        return render(request, 'index.html', {'users': users})
 
-    for user in users:
-        userString += f"""{user}<br>"""
+class UserPageView(View):
+    def get(self, request, user_id):
+        user = WidgetUser.objects.get(id_num=user_id)
 
-    return HttpResponse(
-        userString
-    )
+        return render(request, 'user_page.html', {'user': user})

WidgetFEKK/WidgetFEKK/settings.py

@@ -125,7 +125,7 @@ USE_TZ = True
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/4.0/howto/static-files/
 
-STATIC_URL = 'static/'
+STATIC_URL = '/static/'
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field