Scribd Logo
Upload

Welcome to Scribd!

  • Master of Applied Computing: LAB 7 (Part 1) - Base Template and CSS

    Uploaded by

    nizam diwan
    5 views4 pages

    Original Title

    Untitled

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views4 pages

    Master of Applied Computing: LAB 7 (Part 1) - Base Template and CSS

    Uploaded by

    nizam diwan

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    Master of Applied Computing

    COMP-8347
    Internet Applications and Distributed Systems
    Dr. Usama Mir – Usama.Mir@uwindsor.ca
    School of Computer Science
    https://cs.uwindsor.ca

    Marks = 2
    Submission =
    • For this lab, you must work as a group of 3 students i.e., as per your lab/assignment group. After
    completion, upload all the newly created files and the files you made changes to on Brighspace before the
    due date. Only one group member should submit the files.
    • Every student should complete Part 1 and Part 2A in the class.

    LAB 7 (Part 1) – Base Template and CSS

    A. Create dir for static files:

    • Create a new dir myapp1/static. Inside myapp1/static, create a new dir called myapp1. This is where your
    static files (e.g., css style sheets) will reside.
    • Create a new file style.css in dir grocsite/myapp1/static/myapp1.
    • style.css should define default background color, default text color, and default font size, color, style, and
    position for <h1> tags. Also define the following class:

    .hbar1 {
    display: inline;
    margin: 15px;
    }

    In addition, you can define more styles for the rest of the contents of your pages.

    B. Create base.html:

    • Create a new file base.html in dir grocsite/myapp1/templates/myapp1.


    • Edit base.html as follows:
    <!DOCTYPE html>
    {% load static %}
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="{% static 'myapp1/style.css'
    %}"/>
    <title> Online Grocery Store - {% block title %} Welcome! {% endblock
    %}</title>
    </head>
    <body>
    <div>
    <h1>{% block myhdg %} Welcome to our online grocery store {% endblock %}</h1>

    1
    {% block body_block %}*** {% endblock %}
    </div>
    <hr />
    <div>
    <ul>
    <li class="hbar1"><a href="http://127.0.0.1:8000/about/"> Find out about
    this site </a></li>
    <li class="hbar1"><a href = "{% url 'myapp1:index'%}"> Click here to
    return to main page </a><br/></li>
    </ul>
    </div>
    </body>

    C. Edit index0.html:

    • Edit index0.html as follows:

    {% extends 'myapp1/base.html' %}

    {% block body_block %}
    {% endblock %}

    • Inside the body_block block, include the contents of your index0.html file from lab 6 “the <body> part”.
    • Go to url for your app and view the main page. Remove any duplicated links.
    • Repeat the above steps for about0.html and detail0.html pages to extend these pages from base.html.

    2
    LAB 7 (Part 2) – Introduction to Forms
    A. Update the Item model:

    • Edit models.py to add a new PositiveIntegerField called interested to the Item model. This field indicates how
    many people are interested in this item. The default value for the field is 0.

    • In models.py, create a method topup(self) for the Item model. This method is used to replenish the stock for a
    particular item. When topup(self) is called, it adds 200 to the current value of the stock field for the specified
    item.

    • Run makemigrations, sqlmigrate and migrate to update the database.

    B. Create new forms:

    • Create a new file myapp1/forms.py and add the following two lines:
    from django import forms
    from myapp1.models import OrderItem
    • Create a new form class: class OrderItemForm(forms.ModelForm):
    • OrderItemForm should be a form based on the OrderItem model. The form fields should include: item,
    client, and items_ordered.
    • Set the widget for client field to RadioSelect. It should display something like the figure below:

    • Set the labels for the items_ordered field to ‘Quantity’ and client field to ‘Client Name’.
    • Create another new form class class InterestForm(forms.Form):
    • The form should have 3 fields:
    o interested: Should display RadioSelect buttons (Yes/No). The value returned will be 1 for Yes and
    0 for No.

    o quantity: Will accept an integer value of 1 or higher, indicating how many units of an item the user
    is interested in. Initial value is set to 1.

    o comments: An optional input using Textarea widget and label = ‘Additional Comments’

    3
    C. Create items view:
    This view will send a list of items in the database to items.html. The template will display the list of the items
    and also have a link (url /myapp1/placeorder) to place a new order.
    • Edit your views.py file as follows:
    # Import necessary classes and models #
    Create your views here.

    def items(request):
    itemlist = Item.objects.all().order_by('id')[:20]
    return render(request, 'myapp1/items.html', {'itemlist': itemlist})

    • Update myapp1/urls.py so that going to url myapp1/items/ will call the function views.items.
    • Create the template items.html in myapp1/templates/myapp1 dir. This template should display the list
    of available items.
    • Update base.html to add a link to url myapp1/items/ in addition to the main (index) and about pages.
    • Define another function placeorder(request) in your views.py file. When the user goes to url
    myapp1/placeorder, it should display the following text: “You can place your order here.” This view
    will be updated later. You should also update myapp1/urls.py with the suitable url pattern.

    You might also like