Model, Databases, & Admin Portal #

During the track lessons you will be creating a web app for the ISF Riddler. You should remember the Riddle database from the Networking Unit!

[0] Starter Code #

cd ~/desktop/making-with-code/unit05_webapps
git clone https://github.com/the-isf-academy/lab_riddler_django_yourgithubusername
cd lab_riddler_django_yourgithubusername

poetry install

poetry shell

[1] The Model #

You can find the Riddle model in riddle_app/models.py.

classDiagram class Riddle { +question: CharField +answer: CharField +date_added: DateTimeField +difficulty: CharField +check_guess(guess) }

This a UML Diagram (Unnified Modeling Language) of the Riddle class.

• row 1 - the class name
• row 2 - the attributes with the data type
• row 3 - the methods with the parameter and return data type

Remember, an attribute is a variable associated with a class and a method is a function associated with a class

[2] Admin Portal #

Just like other parts of our app, the Administration page is a route that is configured in Django. With Django’s default project setup, the panel is automatically enabled.

As you can see in riddle_app/admin.py the Riddle model is registered.

from django.contrib import admin
from .models import Riddle

admin.site.register(Riddle)

💻 We can now access the admin portal by going to: 127.0.0.1:8000/admin/.

If you go to this URL, there will be a webpage where we can log in to the admin site. We need Superuser access to log in.

[Creating a Superuser Account] #

We’ve successfully checked that the admin site is ready to go but we can’t log in! We need to create a Superuser account to log into the admin site.

💻 Create a SuperUser to access the admin portal. You’ll need to quit the server, then create the user.
Remember, control + C quits the server.

python manage.py createsuperuser

Django will then prompt you to enter a username and password and that user will have superuser access to the admin site. For ease of use, keep your username and password short. You can also skip the email field with return. It will just ask you to type y to Bypass password validation and create user.

It can be as simple as

• username: a
• password: 123

💻 Now, restart the server and login to the admin portal: 127.0.0.1:8000/admin/

💻 Explore the portal and add 3 riddles

👾 💬 God View

As the owners and administrators of your website, you have access to your users’ accounts and all of your users’ data. We literally have a god view of everything that is entered into our database.

There are lots of ethical questions that need to be considered when building an app, and because of this, always remember the quote from Aunt May to Peter Parker…

With great power comes great responsibility!

[3] Worksheet #

💻 Visit 127.0.0.1:8000/ to view the app!

✅ CHECKPOINT:

✏️💻 Follow along with the worksheet to understand how this web app is made. You will be exploring many different files.:

💻 When you change the model, you must update the database with makemigrations, apply the changes with migrate, and re-run the server.

python manage.py makemigrations
python manage.py migrate
python manage.py runserver     

new_riddle() success message #

The goal is for the user to be notifed they successfully added a new Riddle. There are multiple ways to solve this issue, it all depends on how you want to design the user experience. Two potential methods are:

• create a new view, url, and template with the success message
• re-render the new_riddle page with the filled out form and the success message

To redirect, reference the code snippet OR try to solve it yourself. You may use AI.

def new_riddle(request):
    if request.method == "POST":
        form = NewRiddleForm(request.POST)
        if form.is_valid():
            new_riddle = form.save()

            params = {
                "form": NewRiddleForm(instance=new_riddle),  
                "message": "Success! Your riddle has been saved.",  
            }

            return render(request, "riddle_app/new_riddle_form.html", params)
    else:
        form = NewRiddleForm()

    params = {
        "form": form
    }
    
    return render(request, "riddle_app/new_riddle_form.html", params)

[4] Deliverables #

⚡✨

💻 Push your work to Github:

• git status
• git add -A
• git status
• git commit -m "your message goes here"
  • be sure to customize this message, do not copy and paste this line
• git push

[5] Extensions #

List of Riddles #

• Add the a page to view a list of riddles
• Add the feature to filter the page based on the difficuluty
  • consider how to use the URL paths all/easy, all/medium, all/hard

Update a Riddle #

• Add the ability to update a Riddle after its been added to the database
• Try using AI and referring to this guide

CSS frameworks #

CSS frameworks allow you to easily apply stylels to your web pages. There are many free frameworks. Two of the most common frameworks are Bootstrap and Tailwind. Feel free to test these or explore other options.

• Boostrap Setup
• Tailwind Setup