Scribd
Upload
6 views

Lab3django Intro HTML

Uploaded by

preethasivakumar111
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

Lab3django Intro HTML

Uploaded by

preethasivakumar111
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

COMP 8347: Internet Applications and Distributes Systems

SUMMER 2024 LAB #3

1. Follow the setup instructions given in Brightspace, if you do not already have the necessary
software installed.
2. Check Django version: $ python -c "import django; print(django.get_version())"

PART 1: Run Django from Pycharm

1. Start pycharm. Then File  New Project.


a) In left pane select “Django”
b) In dialog box enter path and project name (mysiteS24)
c) Click “More Settings” Enter APP name (myapp)
d) Click Create.

2. Click Tools  Run manage.py Task …

a) Create db. Type migrate in manage.py console. # Verify that db is created.


b) Create admin user. Type createsuperuser in manage.py console. Enter username, email,
password as prompted.
c) Start server. Click Run  Run ‘mysiteS24’.
d) Go to 127.0.0.1:8000/ and see what it shows.
COMP 8347: Internet Applications and Distributes Systems
SUMMER 2024 LAB #3

PART 2: Edit models.py to create the necessary models


from django.db import models
import datetime
from django.contrib.auth.models import User
from django.utils import timezone

1. Add the following models.


a. Publisher with fields below:
class Publisher(models.Model):
name = models.CharField(max_length=200)
website = models.URLField()
city = models.CharField(max_length=20, blank=True)

b. Book with fields below:


class Book(models.Model):
CATEGORY_CHOICES = [
('S', 'Scinece&Tech'),
('F', 'Fiction'),
('B', 'Biography'),
('T', 'Travel'),
('O', 'Other')
]
title = models.CharField(max_length=200)
category = models.CharField(max_length=1, choices=CATEGORY_CHOICES,
default='S')
num_pages = models.PositiveIntegerField(default=100)
price = models.DecimalField(max_digits=10, decimal_places=2)
publisher = models.ForeignKey(Publisher, related_name='books',
on_delete=models.CASCADE)

2. Create db tables (make sure myapp is included under INSTALLED_APPS in settings.py). See what
happens after each step.
a. Tools  Run manage.py Task… (opens a window where you can type manage.py commands)
b. In manage.py window: Type makemigrations myapp in dialog box.
c. In manage.py window: Type sqlmigrate myapp 0001 #Check latest file in migrations dir
d. In manage.py window: Type migrate

PART 3: Enter data through Admin interface


1. Update admin.py as follows:
from django.contrib import admin
from .models import Publisher, Book
COMP 8347: Internet Applications and Distributes Systems
SUMMER 2024 LAB #3

# Register your models here.


admin.site.register(Publisher)
admin.site.register(Book)

2. Start your server (Run  Run ‘mysiteS24’) and navigate to admin site (127.0.0.1:8000/admin).
3. Login using superuser name and password (from PART 1).
4. Enter the information for each Publisher and Book, as given in lab3data.txt through the admin
interface. How is the data being displayed? Would it be more useful to display additional information?

PART 4: Work with HTML/CSS


Your task is to create a mini website for a fictional university club. This website should consist of two
interconnected web pages:

Home Page (home.html):

1. Create a new HTML file named "home.html"


2. Define the basic structure of an HTML document, including the <!DOCTYPE> declaration, <html>,
<head>, and <body> elements.
3. Inside the <head> section, set the title of the page to something relevant to the club or organization.
4. Add a main heading (e.g., <h1>) that introduces the club or organization.
5. Write a paragraph (or more) explaining the purpose and benefits of the club.
6. Include an unordered list (<ul>) that lists at least five key benefits or features of the club.
7. Add at least two images (<img>) related to the club or its activities.
8. Create a navigation menu with links to the Home and About Us pages. Use anchor tags (<a>) for this
purpose.
9. Save your work.

About Us Page (about.html):

1. Create a new HTML file named "about.html"


2. Follow the same document structure as for the Home Page.
3. Set an appropriate title for the page.
4. Add a main heading describing the club's history or mission.
5. Write paragraphs to provide detailed information about the club, its achievements, and its goals.
6. Use an ordered list (<ol>) to create a timeline of key events or milestones in the club's history.
7. Include images or media that illustrate the club's activities.

CSS Styling:
COMP 8347: Internet Applications and Distributes Systems
SUMMER 2024 LAB #3

1. Create a new CSS file named "styles.css"


2. Link the CSS file to both HTML pages using the <link> element within the <head> section.
3. Start by selecting the HTML elements you want to style. For example:
a. Use the body selector for overall page styling (background color, font, etc.).
b. Use specific selectors (e.g., menu) for styling the navigation menu.
c. Select headings (h1, h2, etc.), paragraphs (p), lists (ul, ol, li), and form elements (form, input,
label, button) to apply appropriate styles.
d. Customize fonts, colors, margins, and padding for each selected element.
e. Test your website in different web browsers to ensure the CSS styles are consistent and
functional.

You might also like