Download as pdf or txt
Download as pdf or txt
You are on page 1of 7

Web Development with Python and Django

BCAT – 218

ASSIGNMENT – I

Q.1. What is CSS? Explain how many types of CSS? Write a program for using external CSS to login
form.

Ans. CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the
presentation of a document written in a markup language like HTML. CSS describes how elements
should be rendered on screen, in print, or in other media.

There are mainly three types of CSS:

1. Inline CSS: Inline CSS is applied directly to an HTML element using the style attribute. It's
specific to a single element and overrides any external or internal CSS rules.

2. Internal CSS: Internal CSS is defined within the <style> tag in the head section of an HTML
document. It applies styles to the entire document or to specific sections by targeting
elements using selectors.

3. External CSS: External CSS is stored in separate CSS files and linked to HTML documents
using the <link> tag. This method allows for the separation of content from presentation and
enables reusability across multiple pages.

Here's an example of how to create a login form using an external CSS file:

HTML (login.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form>
<div class="input-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>

CSS (styles.css):

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}

.login-container {
width: 300px;
margin: 100px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
text-align: center;
}

.input-group {
margin-bottom: 15px;
}

.input-group label {
display: block;
margin-bottom: 5px;
}

.input-group input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
}

button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

Q.2. Explain MVT and MVC architecture of Django Framework with the help of suitable diagram.

Ans. Django is a high-level Python web framework that encourages rapid development and clean,
pragmatic design. It follows the Model-View-Template (MVT) architecture, which is a variation of the
Model-View-Controller (MVC) architecture. Let's explain both MVT and MVC architectures with
suitable diagrams:

Model-View-Template (MVT) Architecture:

In the MVT architecture, the components are:

1. Model: This represents the data structure. It defines the data schema, handles database
operations, and interacts with the database. Models encapsulate the business logic of the
application.

2. View: Views are responsible for processing the user's request and returning an appropriate
response. They interact with models to fetch or update data and render templates to
generate HTML responses.

3. Template: Templates are used for presentation logic. They contain the HTML structure with
placeholders (template tags) for dynamic content. Templates are rendered with data by
views to produce the final output sent to the client's browser.

Diagram:

Model-View-Controller (MVC) Architecture:

In the MVC architecture, the components are:

1. Model: Same as in MVT, the model represents the data structure and handles database
operations.

2. View: Views in MVC represent the presentation layer. They are responsible for rendering the
user interface and displaying data from the model. Views can be any output representation
(HTML, JSON, XML, etc.).
3. Controller: Controllers handle user input and update the model and view accordingly. They
interpret user actions (such as clicking a button) and decide how to respond. Controllers act
as intermediaries between models and views.

Diagram:

Q.3. How to install Django using the pip command. Write down complete steps installation Django
on Visual Studio Code.

Ans. To install Django using the pip command, you can follow these steps:

1. Open a Terminal or Command Prompt: On your computer, open a terminal or command


prompt. You can do this by searching for "Terminal" (on macOS and Linux) or "Command
Prompt" (on Windows) in your system's search bar.

2. Install Django: Once you have the terminal or command prompt open, type the following
command and press Enter:

pip install django

3. This command will download and install the latest version of Django from the Python
Package Index (PyPI).

4. Verify Installation: After the installation is complete, you can verify that Django has been
installed correctly by typing the following command and pressing Enter:

django-admin --version
This command should display the version number of Django that was installed.

Now, to set up Django in Visual Studio Code, follow these steps:

1. Open Visual Studio Code: Launch Visual Studio Code on your computer.

2. Create a New Django Project: You can create a new Django project by opening a terminal
within Visual Studio Code (Terminal > New Terminal) and navigating to the directory where
you want to create your project. Then, run the following command:

django-admin startproject myproject


Replace myproject with the name you want to give to your Django project.
3. Open the Project Folder in Visual Studio Code: After creating the project, open Visual Studio
Code and use the "Open Folder" option to open the folder containing your Django project.

4. Start Developing: You can now start developing your Django project within Visual Studio
Code. You can use the built-in terminal for running Django commands (python manage.py
...), editing code, managing files, and more.

Q.4. How many types of form fields are available in Django? Write a program to show employee
information using Django Form field.

Ans. Django provides a variety of form fields to handle different types of input data. Some common
form fields available in Django include:

1. CharField: A field for storing character data, typically used for short strings like names, titles,
etc.

2. IntegerField: A field for storing integer data.

3. EmailField: A specialized CharField for storing email addresses.

4. DateField: A field for storing dates.

5. DateTimeField: A field for storing dates and times.

6. BooleanField: A field for storing boolean (true/false) values.

7. FileField: A field for uploading files.

8. ImageField: A specialized FileField for uploading image files.

9. ChoiceField: A field for selecting one choice from a list of choices.

10. MultipleChoiceField: A field for selecting multiple choices from a list of choices.

11. ForeignKey: A field for establishing relationships with other models.

12. ManyToManyField: A field for establishing many-to-many relationships with other models.

And many more...

Django form to show employee information using Django form fields:

# forms.py
from django import forms

class EmployeeForm(forms.Form):
first_name = forms.CharField(max_length=100)
last_name = forms.CharField(max_length=100)
email = forms.EmailField()
date_of_birth = forms.DateField()
is_active = forms.BooleanField(required=False)
Q.5. Why do we use Django templates? Explain How we set Django path in setting.py?

Ans. We use Django templates to separate the presentation logic from the Python code. Django
templates allow developers to create HTML files with placeholders for dynamic content. These
placeholders, known as template tags and filters, are replaced with actual values when the template
is rendered and sent to the client's browser.

Here are some reasons why Django templates are used:

1. Separation of Concerns: Templates separate the presentation logic from the business logic
in views. This separation makes the codebase more organized and easier to maintain.

2. Reusable Components: Templates allow developers to create reusable components


(template fragments) that can be included in multiple pages, reducing redundancy and
promoting code reusability.

3. Dynamic Content: Templates facilitate the rendering of dynamic content by providing


mechanisms for injecting data into HTML files.

4. Security: Django templates come with built-in security features, such as automatic HTML
escaping, which helps prevent cross-site scripting (XSS) attacks.

5. Ease of Development: Django templates provide a familiar syntax (similar to HTML) and
integrate seamlessly with Django's built-in template engine, making it easy for developers to
create dynamic web pages.

Setting up paths in Django's settings.py file involves configuring various directories for static files,
templates, and media files. Here are the steps to set Django paths in settings.py:

1. Open settings.py: First, open the settings.py file located in your Django project directory.

2. Import os Module: At the top of the settings.py file, import the os module. This module
provides functions to interact with the operating system.

import os

3. Define BASE_DIR: Define a variable BASE_DIR to store the base directory of your Django
project. This is typically the directory containing the settings.py file.

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

4. Configure Static Files Path: Define the URL prefix and additional directories from which
Django should serve static files (CSS, JavaScript, images).

STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]

5. Configure Templates Path: Configure directories where Django should look for template
files. Django searches within the templates directory of each installed app by default, but
you can specify additional directories using the DIRS option.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR, 'templates'),
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]

6. Configure Media Files Path (Optional): If your Django application involves uploading and
serving media files (such as user-uploaded images), configure the URL prefix and the
filesystem path where these files should be stored.

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

7. Save settings.py File: Save the settings.py file after making the necessary changes.

You might also like