The goal of this project assessment is to gauge your ability to develop a minimal full-stack web application using the Django framework, including your ability to:
- Create and configure a Django project
- Create a "main" app and install it within the project
- Create a
urls.pyfor the "main" app and include it within the project'surls.py - Define a Model
- Make and run migrations
- Define views that perform basic CRUD and redirect or render templates
- Code a template that displays a list of data and a template that shows a form
- Define a ModelForm used to create new data with
As you saw, the application consist of:
- A page (template) with a title of "Wish List Items", that displays all wish list items in the database and provides a link or button that takes the user to another page (template) to view a form that can be used to add a new wish item.
- When browsing to the root route of the application (
http://localhost:8000), the "Wish List" page is displayed - not the Django welcome page. - The wish list items are displayed in a
<table>. - Each wish list item's
<tr>has two<td>s to display:- The
descriptionfield - A "X" link used to delete a wish item
- The
- After a wish list item is added or deleted, the app redirects back to the "Wish List Items" page (the root route).
- When a wish list item is deleted, it is not a requirement to confirm the delete - this is optional. It will probably come down to whether you use a View Function or a DeleteView to implement the deletion.
- If there are no wish list items in the database, show a message "No Wish List Items Exist" instead of the table of wishes.
Use the screenshots below as your wireframes.
There are a few hints offered along the way.
The layout and styling of this assessment is secondary to its functionality. As long as the app behaves as required and displays all elements specified, you will pass.
There is a link to a minimalistic CSS framework (Pure.css) which defines several classes. Each step includes custom CSS and what classes to use from the framework - feel free to use them.
This assessment is an individual assignment - no collaboration please.
It's "open book" - you may reference anything on your computer, Google, use notes, etc.
When finished you will demo your app to an instructor and slack them the link to your personal GitHub repo.
Please follow the following steps in order:
- STEP 1 - Prepare
- STEP 2 - Set Up the App
- STEP 3 - Implement the App's Requirements
- STEP 4 - Demo & Slack Link to Your Instructor
The above times are just guidelines
Briefly read through the rest of this assignment to better understand what is required before starting to code.
Follow the standard workflow for creating a new Django app. Don't remember how to create a Django app? Check out the first part of the Django tutorial again.
You will have to slack your instructors a link to your personal GitHub repo so be sure to git init in the root of your project folder, create your repo on GitHub (without a README), and follow the instructions to add the remote.
You will not have to deploy this app, so do not waste time switching to use PostgreSQL, the default SQLite database is fine.
The app does not use the built-in User model or authentication.
This app will require only one Model.
The app will require more than one template, however, the decision to use and extend a base.html template is left up to you.
The demo application was built using the Pure.css CSS library. You can add the following to your template's <head> to play along:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">The inclusion of Pure.css will make HTML tables, buttons, and Django's forms look better simply by adding some classes, which are provided in each step below.
However, you are encouraged to add a stylesheet to perform custom styling such as adding margin, centering, etc. Some basic CSS is also provided to you.
Before you start coding, think about what Django technique you are going to use to implement the app's functionality. Are you going to use View Functions? A generic CreateView or ListView, etc.? The choice is yours, so you should use that with which you are most comfortable.
Browsing to the root route of the application should not display the Django welcome page:
Instead, the root route should render the index.html template with a title of "Wish List Items":
The "Wish List Items" page title is an <h1> element.
The following custom CSS has been added:
body {
text-align: center;
margin: 2rem;
}After this step is completed, your app should look something like this:
When there are no wish items in the database, a "No Wish Items Exist" message should be displayed.
The Item Model only has one field:
description- aCharFieldwith amax_lengthof your choosing
The "No Wish Items Exist" is an <h3> followed by an <hr>.
You can use the if template tag and the length filter to render different things in the template like this:
{% if item_list|length == 0 %}
{% else %}
{% endif %}Note that the name of item_list will be the name of the variable holding the list of items IF using an IndexView.
After adding a link that goes to the page for adding a new item, the display should look something like this:
The "Add Wish Item" link/button is an <a> below the <hr> styled to look like a button by adding a class of pure-button.
Clicking the Add Wish Item will show a "Add Wish Item" page that looks like:
- A
CreateViewis an excellent way to implement the Add Wish Item functionality.
The form has a class of pure-form added to it.
The button in the form has a class of pure-button added to it.
When there are wish items in the database, the display should look something like this:
The table has a <thead> with a header row (<tr>) that has two header cells (<th>): Description & Delete.
Each wish list item is being displayed as a <tr> with two <td> elements.
The red "X" is an <a> element that, when clicked, deletes that wish item from the database. For example, no more Pink Socks:
The table has classes of pure-table and pure-table-striped added to it.
The following custom CSS centers the table and styles the "X" link:
table {
margin: 2rem auto;
}
table a {
color: red;
text-decoration: none;
}Congrats, you're done!
When you're ready to demo your app:
- Do a final commit and push to your GitHub repo.
- Slack your instructor the link to your GitHub repo.
- You'll then demo your app for your instructor.
- If it's approved, you're done.
- If it's not, you'll continue working until you're ready to demo again. At that point, start at #1 again.