Skip to content

GP4: Admin Interface

Due: Monday, Nov 3rd

Screenshot of Sign In form

Overview

For this assignment, you will create an initial web application for your project. Specifically, you will design the user interface for an admin to view and edit all tables in the database. This part of the web application will be built using Flask-AppBuilder.

A model solution for this assignment is available in the webapp folder of the profs repository. Begin by making a copy of the webapp folder in your own repository. You can then edit the files in place to match your database design.

Instructions

Please develop your solution incrementally. Ideally, each team member will make multiple commits to the repo during the week. Don't wait until step 5 to test your code; you should run steps 3, 4, and 5 iteratively.

Tip

Divide up your database so that each person is responsible for several tables. Have one team member run the sqlacodegen and mvstubs.py scripts to generate the initial code. Then have each team member refine the code for their assigned tables.

  1. Finish writing (and running) the Scripts for your Project Database. Your database will need to exist on the server before you can generate the SQLAlchemy model classes and Flask-AppBuilder model views.
  2. Edit webapp/config.py with your own TEAM, SECRET_KEY, and APP_NAME. See the README.md file and Base Configuration docs for more details.
  3. Implement webapp/models.py:
    • Run sqlacodegen to generate the initial source code.
    • Remove class Base(DeclarativeBase) and make each model class extend flask_appbuilder.Model instead.
    • Rearrange your model classes (tables and views) to be in the same order as in your drop.sql script. This will make code reviews easier.
      • Put "Database Tables" at the top of the file.
      • Put "Database Views" at the bottom of the file.
      • Define mapped classes for database views (see example at the end of models.py).
    • Add a reasonable __str__() method for each class. You don't need to show every attribute in the string, but the string should clearly identify the object.
    • Search for Mapped[list and change the variable name to a plural noun. Be sure to make the same change on the other side of the relationship. For example:
      • The College class has departments: Mapped[list['Department']].
      • The Department class has relationship('College', back_populates='departments').
      • Notice the list attribute name is departments (plural), not department (singular).
  4. Implement webapp/views.py:
    • Run mvstubs.py to generate the first draft of the model view classes. (This script is found in the archive directory of the profs repository.)
    • Remove model views that don't correspond to classes in models.py. In other words, remove the ones that correspond only to Table objects.
    • Double check the list_title makes sense; for example, use "People" instead of "Persons".
    • Comment out any list_columns you don't want to show in the table.
    • Exclude attributes that don't correspond to table columns (Ex: the "departments" attribute of the College class).
    • Add related_views for the excluded attributes (Ex: DepartmentModelView).
      • These will generally correspond to the "1" side of 1:N relationships.
      • For example: Department is a child of College, so College is refers to DepartmentModelView.
      • Hint: Arrange your model view classes in the same order as in your drop.sql script.
    • For database views, set base_permissions = ['can_list'] to make the model view read-only.
    • Build the "Tables Menu" and "Views Menu" at the bottom of the file.
  5. Test your application:
    • Run flask fab create-admin to create the admin user and password. Do this only once; the account will be stored in your shared database.
    • Run flask run --debug to start the dev server. If any errors are displayed, fix the corresponding bugs in your code.
    • Log in as the admin user, and click through each of your model views. Make sure all objects are rendered correctly.

Note

In a way, GP4 is another data modeling assignment. As you view your finished database through a web interface, you may notice aspects of your design you'd like to improve. Feel free to update your GP2 and GP3 files at any time. Rerun the scripts to rebuild your database and regenerate the model classes.

Submission

The following files are required for GP4:

  • webapp/README.md – can be identical to the provided example
  • webapp/app.py – can be identical to the provided example
  • webapp/config.py – set your own TEAM, SECRET_KEY, APP_NAME
  • webapp/models.py – generate from sqlacodgen and complete by hand
  • webapp/views.py – generate from mvstubs.py and complete by hand