Scribd Logo
Upload

Welcome to Scribd!

  • 17 views

    Lab 7 - Templates With CSS and Forms

    Uploaded by

    gabhajay
    This document provides instructions for a lab assignment on creating a basic website for an online car store using Django. It involves setting up the directory structure and files, defining stylesheets, creating template base and home pages, updating models to add vehicle features, creating forms, and adding views to display vehicles and a link to place orders. Students need to complete parts 1 and 2 during class and submit all files on the learning management system.

    Copyright:

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

    You might also like

    Lab 7 - Templates With CSS and Forms

    Uploaded by

    gabhajay
    17 views3 pages
    This document provides instructions for a lab assignment on creating a basic website for an online car store using Django. It involves setting up the directory structure and files, defining stylesheets, creating template base and home pages, updating models to add vehicle features, creating forms, and adding views to display vehicles and a link to place orders. Students need to complete parts 1 and 2 during class and submit all files on the learning management system.

    Original Description:

    Original Title

    Lab 7 - Templates with CSS and Forms

    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
    This document provides instructions for a lab assignment on creating a basic website for an online car store using Django. It involves setting up the directory structure and files, defining stylesheets, creating template base and home pages, updating models to add vehicle features, creating forms, and adding views to display vehicles and a link to place orders. Students need to complete parts 1 and 2 during class and submit all files on the learning management system.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    17 views3 pages

    Lab 7 - Templates With CSS and Forms

    Uploaded by

    gabhajay
    This document provides instructions for a lab assignment on creating a basic website for an online car store using Django. It involves setting up the directory structure and files, defining stylesheets, creating template base and home pages, updating models to add vehicle features, creating forms, and adding views to display vehicles and a link to place orders. Students need to complete parts 1 and 2 during class and submit all files on the learning management system.

    Copyright:

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

    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 = 3
    Submission =
    • For this lab, you must work as your lab group. After completion, submit all your files on Brightspace before
    the due date. Only one group member should submit the files.
    • You must complete Part 1 (a, b, c) and Part 2 (a) during the class to get 1/3 Mark.
    • Files to upload on Brightspace:
    o Your car site folder. For this lab, folder submission is allowed.

    LAB 7 (Part 1) – Base Template and CSS

    A. Create dir for static files:

    • Create a new dir carapp/static. Inside carapp/static, create a new dir called carapp. This is where your static
    files (e.g., css style sheets) will reside.
    • Create a new file style.css in dir carsite/carapp/static/carapp.
    • 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 carsite/carapp/templates/carapp.


    • Edit base.html as follows:
    <!DOCTYPE html>
    {% load static %}
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="{% static 'carapp/style.css'
    %}"/>
    <title> CarSite - {% block title %} Welcome! {% endblock %}</title>
    </head>
    <body>
    <div>

    1
    <h1>{% block myhdg %} Welcome to our online car store {% endblock %}</h1>
    {% block body_block %}*** {% endblock %}
    </div>
    <hr />
    <div>
    <ul>
    <li class="hbar1"><a href="http://127.0.0.1:8000/aboutus/"> Find out
    about this site </a></li>
    <li class="hbar1"><a href = "{% url 'carapp:home'%}"> Click here to
    return to the home page </a><br/></li>
    </ul>
    </div>
    </body>

    C. Edit home.html:

    • Edit home.html as follows:

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

    {% block body_block %}
    {% endblock %}

    • Inside the body_block block, include the contents of your home.html file from lab 6. Remove any duplicated
    urls from the home page.
    • Repeat the above steps for aboutus.html and cardetail.html pages to extend these pages from base.html.

    2
    LAB 7 (Part 2) – Updating Models and Introduction to Forms
    A. Update the Vehicle model:

    • Edit models.py, add a new field with car features. The features are Cruise Control, Audio Interface, Airbags,
    Air Conditioning, Seat Heating, ParkAssist, Power Steering, Reversing Camera. and Auto Start/Stop.

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

    B. Create new forms:

    • Create a new file carapp/forms.py and add the following two lines:
    from django import forms
    from carapp.models import OrderVehicle
    • Create a new form class: class OrderVehicleForm(forms.ModelForm):
    • OrderVehicleForm should be a form based on the OrderVehicle model. The form fields should include:
    vehicle, buyer, and vehicles_ordered.

    • Set the widget for buyer field so that only one buyer can be selected from all listed buyers.
    • Set the suitable label for the vehicle_ordered field.
    • Create another form for users to contact us (here us means your group). This form can include fields like
    name, email ID, subject/reason for contacting us, message, and so on. This form will be rendered later from
    the views.

    C. Create vehicles view:


    This view will send a list of vehicles in the database to vehciles.html. The template will display the list of
    the vehicles and also have a link (url /carapp/order) to place a new order. You should also perform the
    following steps:
    • Update carapp/urls.py so that going to url carapp/vehicles/ will call the function views.vehicles.
    • Create the template vehciles.html in carapp/templates/carapp dir. This template should display the list
    of available vehciles.
    • Update base.html to add a link to url carapp/vehciles/ in addition to the home and aboutus pages.
    • Define another function orderhere(request) in your views.py file. When the user goes to url
    carapp/orderhere, it should display the following text: “You can place your order here.” This view will
    be updated later. You should also update carapp/urls.py with the suitable url pattern.

    You might also like