Bootstrap is a popular open-source front-end framework that simplifies the process of

designing and developing responsive and visually appealing websites and web applications. It
was initially created by Twitter and is now maintained by the open-source community.
Bootstrap provides a set of pre-designed HTML, CSS, and JavaScript components, making it
easy for developers to create consistent and modern-looking user interfaces.

Here are some key aspects and features of Bootstrap:

1. Responsive Design: Bootstrap is built with a mobile-first approach, ensuring that

websites and applications look good on devices of all sizes, from desktops to tablets
and smartphones. It includes a responsive grid system that automatically adjusts the
layout based on the screen size.
2. Pre-designed Components: Bootstrap comes with a wide range of pre-built
components such as navigation bars, buttons, forms, modals, carousels, and more.
These components are designed to be customizable, allowing developers to easily
modify them to fit the specific requirements of their projects.
3. Grid System: The grid system in Bootstrap is a powerful and flexible layout system
based on a 12-column grid. It enables developers to create responsive and organized
layouts by specifying the number of columns each element should span, making it
easy to create complex page structures.

<div class=”row”>

<div class=”col-md-4”>

</div>

<div class=”col-md-4”>

</div>

<div class=”col-md-4”>

</div>

</div>

In a row there are three columns of width 4 and total width in a row is 12. Md stands for
medium devices

<div class=”row”>

<div class=”col-md-6”>

</div>

<div class=”col-md-6”>

</div>

</div>
In a row there are three columns of width 6and total width in a row is 12. Page is divided
into 2 columns of equal size.

Django

Django is a high-level, open-source web framework for building web applications or websites
using the Python programming language.

It follows the Model-View-Controller (MVC) architectural pattern, but in the case of Django,
the terminology is often referred to as Model-View-Template (MVT).

Here are some key features and concepts associated with Django:

• MVT Architecture:

• Model: Represents the data structure and handles the interactions with the database.
allows developers to define models in Python code, and it automatically translates
these models into database tables.
• View: Manages the presentation logic and handles user requests. Views in Django are
responsible for processing user input, interacting with models, and returning the
appropriate response, often in the form of HTML content.
• Template: Deals with the presentation layer by defining the structure and layout of
the HTML pages.

URL Routing: Django uses a powerful URL routing system that allows developers to map
URLs to specific views. This is achieved through the use urls.py file, making it easy to
define how different URLs should be handled by the application.

Getting started with Django involves installing it, creating a project, defining models, views,
and templates, and configuring the URL routing. Django provides a development server for
testing, and once the application is ready, it can be deployed to a production server.

pip install Django

After installation, you can create a new Django project using:

django-admin startproject projectname

And then run the development server:

cd projectname
python manage.py runserver

Django will then be accessible at http://127.0.0.1:8000/. From there, you can start
building your web application using the Django framework.
 • When a user enters http://127.0.0.1:8000 into their web browser, • The Django
development server listens for incoming requests on the specified IP address and port
(in this case, 127.0.0.1:8000).
• When a request is received, the server forwards it to the Django application for
processing.

1. URL Routing:

• Django uses a URL routing mechanism to determine which view function should
handle the incoming request.
• The urls.py file in the Django project contains a mapping between URLs and view
functions. Django matches the requested URL against patterns defined in this file.

2. View Function:

• Once Django determines the appropriate view function based on the URL, it calls that
function to handle the request.
• Views in Django are responsible for processing the request, interacting with models
or other data sources, and returning an HTTP response.

3. Model Interaction (Optional):

• If the view needs to interact with a database or perform any data-related operations, it
typically uses Django's ORM (Object-Relational Mapping) to interact with models.
• Models represent the data structure and provide an abstraction layer over the database.

4. Template Rendering:

• If the view is responsible for rendering an HTML page, it often uses a Django
template to dynamically generate the HTML content.
• The template can include placeholders for dynamic data, which is populated by the
view before rendering.

5. HTTP Response:

• The view returns an HTTP response, which includes the content to be displayed,
status codes, headers, etc.
• The response is then sent back to the user's web browser.

6. Web Browser Rendering:

• The user's web browser receives the HTTP response and renders the HTML content.

MySQL Database setting are done in settings.py file

Code for displaying graph : explanation

1. importing Libraries:
 o The code imports necessary Python libraries such as pandas, Django-related
modules, and others for data manipulation and visualization.
2. Retrieving Data from Database:
o It fetches data from a Django model named TestDet. The data is retrieved,
grouped by the 'res' field, and annotated with the total count.
3. Data Visualization:
o It creates a bar plot using the data retrieved from the database.
4. Saving Plot as Image:
o The plot is saved as a PNG image in memory (using BytesIO).
5. Encoding Image in Base64:
o The image is encoded in base64 format. Base64 encoding is a way to represent
binary data as ASCII text, which is useful for embedding images in HTML.
6. Constructing URI for Image:
o A URI (Uniform Resource Identifier) is constructed with the base64-encoded
image data. This URI can be used to embed the image directly in an HTML
page.
7. Rendering HTML Template:
o The function renders an HTML template named 'graph.html' and passes the
constructed URI as a variable named 'graphlib'.
8. Printing for Debugging:
o There are print statements for debugging purposes. They help in understanding
the content of the data and the constructed URI.

In summary, this Django view function fetches data from a database model, creates a bar plot
using the data, converts the plot to a base64-encoded PNG image, constructs a URI for
embedding in HTML, and then renders an HTML template with the embedded image.