0% found this document useful (0 votes)
47 views41 pages

Vaibhav ITS Report 4th

vscz

Uploaded by

sasuke20.y4sh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
47 views41 pages

Vaibhav ITS Report 4th

vscz

Uploaded by

sasuke20.y4sh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

An

Industrial Training Report

on

FULL STACK WEB DEVELOPMENT USING


DJANGO
At
Techno Park Computer

Submitted in partial fulfilment of the requirements for the award of the degree of

Bachelor of Technology
In

Information Technology

(Session 2024-2025)

Submitted to - Submitted by-


Dr. Ghanshyam Singh Vaibhav Dubey

Ms. Priya Shekhawat PCE21IT056

(Faculty Coordinators- Industrial Training Seminar)


DEPARTMENT OF INFORMATION TECHNOLOGY

POORNIMA COLLEGE OF ENGINEERING, JAIPUR

RAJASTHAN TECHNICAL UNIVERSITY, KOTA

September, 2024

1
DECLARATION

I hereby declare that the work which is being presented in the Industrial Training report titled
Full Stack Web Development using DJANGO in partial fulfilment for the award of the
Degree of Bachelor of Technology in Information Technology and submitted to the
Department of Information Technology, Poornima College of Engineering, Jaipur, is an
authentic record of my own work carried out at Techno Park Computer during the session
2024-25 (Odd Semester). I have not submitted the matter presented in this report anywhere
for the award of any otherDegree.

Signature of the Student

Name: Vaibhav Dubey

Reg No: PCE21IT056

Place: Poornima College of Engineering, Jaipur


Date:

Enclosed: Training Certificate from Company

2
Training Certificate

3
DEPARTMENT OF INFORMATION TECHNOLOGY

Date:21-9-2024

CERTIFICATE

This is to certify that Industrial Training report titled Full Stack Web Development using
DJANGO has been submitted by Vaibhav Dubey (PCE21IT056) in partial fulfilment for the
award of the Degree of Bachelor of Technology in Information Technology during the
session 2024-25, Odd Semester. The industrial training work is found satisfactory andapproved
for submission.

Names & Signatures (Dr. Gajendra Singh Rajawat)


1. Dr. Ghanshyam Singh HOD, IT
2. Ms. Priya Shekhawat
(Faculty Coordinators- Industrial Training Seminar)

Date:
Place: Jaipur

4
ACKNOWLEDGEMENT
The success and final outcome of learning web development required a lot of guidance and
assistance from many people and I am extremely privileged to have got this all along the
completion of my course and few of the projects. All that have done is only due to such
supervision and assistance and I would not forget to thank them.

I respect and thank Techno Park Computer, for providing me an opportunity to do the course
and project work and giving me all support and guidance, which made me complete the course
duly. I am extremely thankful to the course advisor Mr. Mukesh Tiwari.

I am thankful to and fortunate enough to get constant encouragement, support and guidance
from all Teaching staff which helped us in successfully completing my course.

…….……………………..
(Signature of Student)

Name of Student: - Vaibhav Dubey


Registration No: - PCE21IT056
Date………….

5
TABLE OF CONTENTS

CHAPTER PARTICULARS PAGE NO.


NO.

Title Page 1

Candidate’s Declaration 2

Certificate (s) of all Trainings undergone 3


Certificate by the Department 4

Acknowledgment 5
Table of Contents 6-7

List of Figures 8-9


Abstract 10

Training Platforms and Trainer description 11

1 Introduction 12-13

1.1 Introduction
1.2 Significance of Training

2 Technology Specification 14

1.1 Technology Learned


1.2 Tools Used

3 Hyper Text Markup Language


3.1 Introduction 15-17
3.2 Understanding HTML

6
3.3 Semantic HTML
3.4 HTML5 Features
3.5 Conclusion

4 Cascading Style Sheet


4.1 Introduction 18-26
4.2 CSS Box Model
4.3 CSS Layout

5 JavaScript 27-31
5.1 Data Types and Variables
5.2 Variables and Constants
5.3 Operators and Expresions
5.4 Control Flow
5.5 Functions

6 Django 32-25
6.1 Introduction
6.2 Installing Django
6.3 Creating a Django project
6.4 Starting the Development Server
6.5 Creating a Django App
6.6 Defining a Model
6.7 Creating Views and Templates
6.8 Creating URL’s

7 Project Description 36

8 Project Snapshots 37-38

9 Future Scope 39

10 Conclusions 40

11 References 41

7
LIST OF FIGURES

FIGURE NO. TITLE PAGE NO.

3.1 HTML Document Structure 15

3.2 HTML Headings 16


3.3 HTML Paragraphs 16
3.4 HTML Links 16
3.5 HTML Lists 16
3.6 HTML Links 17
4.1 CSS Syntax 19
4.2 CSS Example 19
4.3 Inline CSS 19
4.4 Internal CSS 19
4.5 External CSS 20
4.6 Box Model 21
4.7 Content Box 22
4.8 Border Box 22
4.9 CSS Float 24
4.10 HTML 24
4.11 Flex Box Layout CSS 24
4.12 Flex Box Layout HTML 25
4.13 Grid Layout CSS 25
4.14 Grid Layout HTML 25
4.15 CSS Media Queries 26
5.1 Int and Float Datatype in JavaScript 27
5.2 String Data Type in JavaScript 27
5.3 Boolean Data Type in JavaScript 27
5.4 Undefined and Null Variable 27
5.5 Objects in Variable 28
5.6 Arrays in JavaScript 28
5.7 Variable and Constant 28
5.8 Arithmetic Operators 29
8
LIST OF FIGURES
5.9 Comparison Operators 29
5.10 Logical Operators 29
5.11 Assignment Operators 29
5.12 Conditional Statement – if-else 30
5.13 For-Loop 30
5.14 While-Loop 30
5.15 DO-WHILE_LOOP 31
5.16 Functions 31
8.1 Login Page of Project 37
8.2 Sign Up Page 37
8.3 Librarian Menu 38
8.4 Student Menu 38

9
Abstract
Web development is the work involved in developing a website for the Internet (World Wide
Web) or an internet (a private network). Web development can range from developing a simple
single static page of plain text to complex web applications, electronic businesses, and social
network services. A more comprehensive list of tasks to which Web development commonly
refers, may include Web engineering, Web design, Web content development, client liaison,
client-side/server-side scripting, Web server and network security configuration, and e-
commerce development.

Among Web professionals, "Web development" usually refers to the main non-design aspects
of building Web sites: writing markup and coding. Web development may use content
management systems (CMS) to make content changes easier and available with basic technical
skills.

For larger organizations and businesses, Web development teams can consist of hundreds of
people (Web developers) and follow standard methods like Agile methodologies while
developing Web sites. Smaller organizations may only require a single permanent or contracting
developer, or secondary assignment to related job positions such as a graphic designer or
information systems technician. Web development may be a collaborative effort between
departments rather than the domain of a designated department. There are three kinds of Web
developer specialization: front-end developer, back-end developer, and full-stack developer.
Front-end developers are responsible for behaviour and visuals that run in the user browser,
while back-end developers deal with the servers. Since the commercialization of the Web with
Tim Berners-Lee developing the World Wide Web at CERN, the industry has boomed and has
become one of the most used technologies ever.

10
Training Platform
Techno Park Computer, an computer learning platform. Furthering our 10+ years of strong
legacy and training over 200K candidates from 300+ institutes, Techno Park Computer aims at
making high-quality technical education accessible to learners across the country. Techno Park
Computer works as the cornerstone for budding technocrats and a stepping stone for working
professionals, enabling India with technology creators. It offers the independence of learning by
focusing on the core aspects of niche industry-demanded skills for the positions of Embedded
Engineer, IoTEngineer, Data Scientist, Data Engineer, Data Analyst, AI/ML Engineer, Security
Analyst, Systems Design Architect, Cloud Engineer, DevOps Engineer, Full Stack Developer,
and manyother.

➢ Legal Name: Techno Park Computer

➢ Headquarters: Jaipur, Rajasthan, India

➢ Full Name of Certificate: Full Stack Web Development using Django

➢ Training Starting Date: 5 july,2024

➢ Training Ending Date: 25 August,2024

Trainer description

➢ Name – Mr. Mukesh Tiwari


➢ Work at Techno Park Computer.

11
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

CHAPTER 1
Introduction
1.1 Introduction

Web development is the art and science of creating and maintaining websites and web applications
that are accessible, functional, and visually appealing. It encompasses a wide range of skills and
technologies, including front-end development, which focuses on the user interface and user
experience, and back-end development, which involves server-side logic, databases, and server
management. Web developers use programming languages like HTML, CSS, JavaScript, and various
back-end languages such as Python, Ruby, or PHP to build websites and web applications. With the
continuous growth of the internet and the increasing reliance on digital platforms for various aspects
of life, web development plays a crucial role in shaping our online experiences and connecting
businesses and individuals worldwide. It's a dynamic and ever-evolving field that offers endless
opportunities for innovation and creativity.

Django is a high-level Python web framework known for its efficiency, simplicity, and robustness in
building web applications. It follows the "batteries-included" philosophy, providing a wide range of
built-in features for common web development tasks, such as URL routing, authentication, database
management (using Django's Object-Relational Mapping), and a templating engine for creating
dynamic web pages. Django also encourages clean and maintainable code through its Model-View-
Controller (MVC) architectural pattern, referred to as Model-View-Template (MVT) in Django's
context. This framework is widely used by developers due to its scalability, security features, and a
thriving community that supports and extends its capabilities through a multitude of third-party
packages. Django simplifies web development, allowing developers to focus on building feature- rich
web applications with less effort.

In this report I am presenting what I have learned during this training and the project I made with
the learning. The project I made is from learning is “Library management system ”. This project has
many features like :

• Check Any Record


• Add a record
• Modify a record
• Delete a record

1.2 Significance of Training


I chose to pursue full-stack web development for my industrial training because it offers a
comprehensive and versatile skill set that is in high demand in today's tech-driven world. Web
development encompasses the creation and maintenance of websites and web applications, making it
a pivotal field in the digital age. Full-stack developers, in particular, have the ability to work on both
the front-end and back-end of these web-based systems. This means they can design user- friendly
interfaces, ensuring a seamless and engaging user experience, while also efficiently implementing
server-side logic and managing databases to ensure data integrity and functionality. As our world
becomes increasingly interconnected through the internet, the demand for web developers continues
to grow. Thus, choosing full-stack web development for my industrial training
12
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

not only aligns with my career aspirations but also equips me with the skills needed to excel in this
dynamic and ever-evolving field of technology.

13
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

CHAPTER-2
Technology Specifications
2.1 Technologies Learned

Full-stack web development using Django involves a combination of front-end and back-end
technologies. Here's a list of technologies used in full-stack web development with Django:

Front-End Technologies:

• HTML (Hypertext Markup Language): Used for creating the structure and content of web
pages.
• CSS (Cascading Style Sheets): Responsible for styling and layout, ensuring that web pages
are visually appealing and responsive.
• JavaScript: Provides interactivity to web applications, handling user interactions, and
dynamic content.

Back-End Technologies:

• Django: The primary back-end framework that handles server-side logic, database interactions,
and URL routing.
• Python: The programming language used in Django development for writing server-side
code.
• Database Management Systems (DBMS): Django supports various DBMS, with
PostgreSQL, MySQL, and SQLite being popular choices. I used mysql as a database in my
project.MySQL is an open-source relational database management system (RDBMS).

2.2 Tools Used

Following are the tools used during development of the project.

Visual Studio Code: VScode is a code editor developed by Microsoft. It is a cross-platform, free and
open-source code editor that runs on Windows, macOS, and Linux. VS Code is used bymillions of
developers around the world to code, debug, and build applications.VS Code is a powerful and
versatile code editor that can be used for a variety of development tasks. It is apopular choice
for both beginners and experienced developers.

Here are some of the features of VS Code:

• Support for a wide range of programming languages, including JavaScript, TypeScript, Python,
C++, Java, and Go.
• IntelliSense code completion, which helps you write code faster and more accurately.
• Debugging tools that help you find and fix errors in your code.
• A rich ecosystem of extensions that add new features and functionality to VS Code.

14
CHAPTER-3
Hypertext Markup Language (HTML)
3.1 Introduction

In the digital age, the World Wide Web has become an integral part of our lives. The ability to create
web content is a fundamental skill for professionals in various fields. This chapter delves into
Hypertext Markup Language (HTML), the backbone of web development. HTML is the standard
markup language used to structure content on the web, making it accessible and visually appealing.
Understanding HTML is crucial for anyone seeking to participate in the creation of web content or
applications.

3.2 Understanding HTML

3.2.1 What is HTML?

HTML stands for Hypertext Markup Language. It is a markup language used to create the structure
and layout of web documents, often referred to as web pages. HTML documents are composed of
elements, each with its own purpose and meaning, which are enclosed within tags. These elements
define the content, headings, paragraphs, links, images, and more on a web page.

3.2.2 HTML Document Structure

An HTML document typically consists of the following structure:

Figure : 3.1(HTML Document Structure)

-<!DOCTYPE html>: Specifies the document type and version.


- <html>: The root element that contains all other HTML elements.
- <head>: Contains meta-information about the document, such as the title.
- <title>: Sets the title of the web page, displayed in the browser's title bar.
- <body>: Contains the visible content of the web page.
15
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

3.2.3 Common HTML Elements

HTML provides a wide range of elements to structure content:

- Headings: "<h1>", "<h2>", "<h3>", "<h4>", "<h5>", "<h6>" for creating headings of varying
levels.

Figure : 3.2(HTML Headings)

- Paragraphs: "<p>" for creating paragraphs of text.

Figure : 3.3(HTML Paragraphs)

- Links: "<a>" for creating hyperlinks.

Figure : 3.4(HTML Links)

- Lists: "<ul>" for unordered (bullet) lists and "<ol>" for ordered (numbered) lists.

Figure : 3.5 (HTML Lists)

16
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

3.2.4 Attributes

HTML elements often have attributes that provide additional information or configuration. Attributes
are defined within the opening tag of an element. For example, the "href" attribute in the "<a>"
element specifies the link's destination.

FIGURE : 3.6 (HTML LINKS)

3.3 Semantic HTML

Semantic HTML is a way of writing HTML that focuses on the meaning of the content rather than its
presentation. It helps search engines and assistive technologies understand the structure of apage,
making it more accessible to all users.

Semantic elements include "<header>", "<nav>", "<main>", "<section>", "<article>", "<aside>",


"<footer>", and more. These elements provide context to the content they enclose, improving the
overall structure and accessibility of a web page.

3.4 HTML5 Features

HTML5 introduced several new features and elements, including "<video>", "<audio>", "<canvas>",
and improved form elements. These additions enhance the capabilities of web applications, enabling
multimedia content and interactivity without relying on plugins.

3.5 Conclusion

HTML is the foundation upon which the web is built. As a fundamental skill in web development,
understanding HTML is crucial for creating web content and applications. In the next chapter, we
will explore how Cascading Style Sheets (CSS) can be used to style and design HTML elements,
enhancing the visual appeal of web pages.

17
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

Chapter-4
Cascading Style Sheets (CSS)
4.1 Introduction to CSS

Cascading Style Sheets, commonly referred to as CSS, is a fundamental technology in web


development. It is used to control the presentation and layout of web pages, enabling developers to
define how HTML elements should be displayed on a website. CSS plays a crucial role in creating
visually appealing and user-friendly websites.

4.1.1 Why CSS?

Before delving into the details of CSS, it's essential to understand why it's so important in web
development. CSS offers several advantages:

1. Separation of Concerns: CSS allows for a clear separation of content (HTML), presentation
(CSS), and behaviour (JavaScript). This separation simplifies maintenance and makes it easier to
update or modify a website's appearance without altering its underlying content or functionality.

2. Consistency: CSS ensures consistency in design across a website. By defining styles in one central
location, you can apply them consistently to multiple pages, promoting a cohesive user experience.

3. Flexibility: CSS provides developers with granular control over design elements, enabling them
to create responsive, adaptable layouts for various screen sizes and devices.

4. Efficiency: By using CSS, developers can write reusable styles, reducing redundancy and
improving code efficiency. This helps decrease page load times and improve website performance.

4.1.2 How CSS Works

CSS operates on the principle of selecting HTML elements and applying styles to them. Thisprocess
involves three key components:

1. Selectors: Selectors are patterns used to target HTML elements. They can target specific elements,
classes, IDs, or even elements with certain attributes. For example, "h1" selects all"<h1>"
elements, while ".header" selects all elements with the class "header."

2. Properties: Properties define the visual aspects of selected elements. Properties include attributes
like color, font-size, margin, padding, and many others. For instance, "color: blue;" sets the text color
to blue.

3. Values: Values specify the settings for properties. In the example above, "blue" is the value
assigned to the "color" property. Different properties accept different types of values, such as colors,
lengths, or keywords.

18
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

4.1.3 CSS Syntax

CSS rules consist of a selector, a set of properties, and their corresponding values, enclosed in curly
braces "{}". Here's a basic example:

FIGURE : 4.1 (CSS SYNTAX)

For instance, to set the text color of all "<h1>" elements to red, you would use the following CSS
rule:

FIGURE :
4.2(CSS
EXAMPLE)

CSS can be included in HTML documents in three main ways:

1. Inline: You can include CSS directly within HTML elements using the "style" attribute. While
this approach is straightforward, it's not recommended for larger projects due to maintainability
issues.

FIGURE : 4.3 ( INLINE CSS )

2. Internal: You can embed CSS within an HTML document's "<style>" element, typically placed
within the document's "<head>" section. This approach offers better separation of concerns but may
still pose maintenance challenges for larger projects.

FIGURE : 4.4 ( INTERNAL CSS)

19
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

3. External: For larger and more maintainable projects, it's common to store CSS in separate external
files with a ".css" extension. You link these external CSS files to your HTML documents using the
"<link>" element in the document's "<head>" section.

FIGURE : 4.5 (EXTERNAL CSS)

The "<link>" element's "href" attribute specifies the path to the external CSS file, and the "rel"
attribute indicates that it's a stylesheet.

4.2 CSS Box Model

Understanding the CSS box model is essential for creating responsive and visually appealing web
layouts. The box model defines how HTML elements are rendered on a web page, including their
dimensions, spacing, and borders.

4.2.1 The Box Model Components

The CSS box model consists of the following components:

1. Content: The content of an HTML element, such as text, images, or other elements, is surrounded
by the content box.

2. Padding: Padding is the space between the content box and the element's border. It provides
internal spacing within the element. Padding can be adjusted using the "padding" property.

3. Border: The border surrounds the padding and content of an element. It defines a visible boundary
around the element. You can set the border's width, style, and color using the "border" property.

4. Margin: The margin is the space outside the element's border. It creates spacing between the
element and adjacent elements on the page. Margin can be adjusted using the "margin" property.

4.2.2 Box Model Illustration

Let's illustrate the box model with an example:


In this example, we have a "<div>" element with the class "box." Here's how the box model
components are applied:

20
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

FIGURE : 4.6 ( BOX MODEL )

- Content: The "<div>" has a width of 200px and a height of 100px, defining the dimensions of the
content box.

- Padding: We've added 20px of padding to all sides of the content box, creating internal spacing
between the content and the border.

- Border: A 2px solid border surrounds the padding and content.

- Margin: A 10px margin provides spacing between the "<div>" and adjacent elements on the page.

As a result, the total dimensions of the element, including content, padding, border, and margin, are
220px (width) by 140px (height).

4.2.3 Box Sizing


The default behaviour of the CSS box model is to calculate an element's total width and height
based on the sum of its content, padding, border, and margin. This behaviour can sometimes lead to
unexpected layout issues, especially in responsive design.

21
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

To control how an element's dimensions are calculated, you can use the "box-sizing" property. The
two common values for "box-sizing" are:

- Content-Box (Default): This value calculates the element's dimensions based on the content's
width and height, excluding padding and border. It's the default behaviour.

FIGURE : 4.7 ( CONTENT-BOX )

- - Border-Box: This value calculates the element's dimensions based on the content, padding, and
border. It includes these values in the width and height calculations.

FIGURE : 4.8 ( BORDER-BOX )

- The "border-box" value is particularly useful in responsive design because it ensures that
changing an element's padding or border won't affect its overall size.

4.2.4 Box Model and Layout

Understanding the box model is crucial for creating effective layouts in CSS. When designing web
pages, you often need to control the spacing, dimensions, and alignment of elements. Here are some
common layout scenarios and how the box model comes into play:

1. Centring Elements: To centre an element both horizontally and vertically within its parent
container, you can use margins and the "text-align" property for inline elements. For block-level
elements, you can use the "margin: 0 auto;" shorthand.

2. Equal-Sized Columns: When designing a grid layout with equal-sized columns, you need to
account for the padding and border in the column width calculation. Using "box-sizing: border- box;"
simplifies this process.

3. Spacing Between Elements: To create consistent spacing between elements, you can adjust the
margins or padding. Consider using a combination of margins for spacing between elements and
padding for internal spacing.

4. Responsive Design: When building responsive websites, you can adjust padding, margin, and
border properties to adapt the layout to different screen sizes and devices.

22
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

4.2.5 Box Model Challenges

While the box model is a powerful tool for controlling layout and spacing, it can also posechallenges,
especially when working with complex designs. Here are some common issues developers encounter:

1. Collapsing Margins: In certain situations, adjacent margins between elements can collapse,
resulting in unexpected spacing. Understanding margin collapsing and using techniques like clearing
floats can help mitigate this issue.

2. Overflow: When content, padding, or borders exceed an element's specified dimensions, overflow
issues can occur. You can control how overflow is handled using the "overflow" property.

3. Box Sizing Confusion: Misunderstanding or forgetting to set the "box-sizing" property can lead
to layout inconsistencies, especially in responsive designs.

4. Complex Layouts: As web layouts become more complex, managing the box model for multiple
elements and components can become challenging. It's essential to plan and structure your CSS
code effectively.

4.3 CSS Layouts

Creating flexible and responsive layouts is a crucial aspect of web development. CSS provides several
techniques and properties to achieve different types of layouts. In

this section, we'll explore some common CSS layout strategies and their practical applications.

4.3.1 CSS Display Property

The "display" property is a fundamental CSS property used to control how elements are rendered on
the page. It determines an element's box type and behaviour. Common "display" property values
include:

- "block": Block-level elements, such as "<div>", "<p>", and "<h1>", generate a block box. They
create a new line and extend horizontally to fill their containing element.

- "inline": Inline-level elements, like "<span>", "<a>", and "<strong>", generate an inline box. They
do not create new lines and only occupy the necessary width.

- "inline-block": Inline-block elements combine the characteristics of both block and inline elements.
They generate a block-level box while staying inline with other elements.

- "none": Elements with "display: none;" are completely hidden from the layout and do not take up
any space. This is often used for hiding and showing elements dynamically.

- "flex": The "flex" value is used with the CSS Flexbox layout model, which allows for flexible and
efficient layouts. It's suitable for arranging elements in rows or columns with variable sizing.

23
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

- "grid": The "grid" value is used with the CSS Grid layout model, providing a powerful way to create
grid-based layouts. It's ideal for complex, grid-like structures.

- "table": Elements with "display: table;", "display: table-row;", or "display: table-cell;" mimic the
behaviour of table elements, which can be useful for creating table-like structures.

4.3.2 CSS Float Property

The "float" property is used to make an element float to the left or right within its containing element.
It's often used for creating column-based layouts and for wrapping text around images or other floated
elements.

Here's an example of floating elements:

FIGURE : 4.9 (CSS FLOAT) FIGURE : 4.10 ( HTML )

While "float" can be effective for certain layout scenarios, it has limitations and can lead to clearfix
issues when not used carefully. In modern web development, CSS Flexbox and CSS Grid are
preferred for creating complex layouts due to their greater flexibility and ease of use.

4.3.2 CSS Flexbox Layout

CSS Flexbox, short for "Flexible Box," is a layout model that simplifies the arrangement ofelements
in rows or columns. It provides excellent support for both one-dimensional and two- dimensional
layouts.

To create a flex container and use Flexbox, set the "display" property of the container to "flex". Here's
an example:

FIGURE : 4.11 ( FLEXBOX LAYOUT CSS)

24
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

FIGURE : 4.12 ( FLEXBOX LAYOUT HTML )

In this example, the ".flex-container" becomes a flex container, and its child elements become flex
items. The "justify-content" property is used to distribute the items evenly along the main axis,
creating space between them.

Flexbox offers various properties and features for controlling the layout, alignment, and order of
flex items. Some of the key properties include "flex-direction", "flex-wrap", "align-items", and
"order".

4.3.4 CSS Grid Layout

CSS Grid Layout is a two-dimensional layout system that allows you to create complex grid-based
layouts with rows and columns. It's ideal for creating responsive and grid-like structures, such as
product listings, calendars, and navigation menus.

FIGURE : 4.13 ( GRID LAYOUT CSS )

FIGURE : 4.14 ( GIRD LAYOUT HTML )

To use CSS Grid, set the "display" property of the container to "grid", and define the grid structure
using properties like "grid-template-columns" and "grid-template-rows". Here's an example:
In this example, the ".grid-container" becomes a grid container, and its child elements become grid
items. The "grid-template-columns" property defines three equal-width columns, and the "grid-gap"
property specifies a 10px gap between grid items.

25
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

CSS Grid offers advanced features, including grid alignment, spanning, and responsive design
capabilities, making it a powerful tool for creating versatile layouts.

4.3.4 Responsive Design with CSS Media Queries

In modern web development, creating responsive layouts that adapt to different screen sizes and
devices is essential. CSS media queries allow you to apply specific styles based on the characteristics
of the user's device, such as screen width, height, and orientation.

Here's an example of a media query that changes the background color of a page when the screen
width is less than 600px:

FIGURE : 4.15 ( CSS MEDIA QUERIES )

Media queries can be used to adjust various layout properties, such as font size, column count, and
element visibility, to create responsive designs that provide an optimal user experience on both
desktop and mobile devices.

26
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

Chapter-5
JavaScript

5.1 Data Types and Variables

JavaScript is a dynamically typed language, which means you don't need to declare a variable's type
explicitly. Instead, JavaScript determines the type at runtime. There are several primitive data types
in JavaScript:

5.1.1 Numbers
Numbers in JavaScript can be integers or floating-point numbers. You can perform arithmetic
operations like addition, subtraction, multiplication, and division.

FIGURE : 5.1 ( INT AND FLOAT DATA TYPE IN JAVASCRIPT )

5.1.2 Strings
Strings are sequences of characters enclosed in single or double quotes. You can concatenate strings
using the “+” operator.

FIGURE : 5.2 ( STRING DATA TYPE IN JAVASCRIPT )

5.1.3 Booleans
Booleans represent true or false values. They are often used for conditional statements and
comparisons.

FIGURE : 5.3 ( BOOLEAN DATA TYPE IN JAVASCRIPT )

5.1.4 Undefined and Null


“undefined” is a special value that indicates a variable has been declared but has not been assigned
a value. “null” represents the absence of any object value.

FIGURE : 5.4
(UNDEFINED AND NULL VARIABLES)

27
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

5.1.5 Objects
Objects are collections of key-value pairs and are used to represent complex data structures.

FIGURE : 5.5 ( OBJECTS IN JAVASCRIPT )

5.1.6 Arrays
Arrays are ordered collections of values, which can be of different types. You can access array
elements by their index.

FIGURE : 5.6 ( ARRAYS IN JAVASCRIPT )

5.2 Variables and Constants


In JavaScript, you can declare variables using `let` and constants using `const`. Variables declared
with `let` can be reassigned, while those declared with `const` cannot be reassigned after initialisation.

FIGURE : 5.7 ( VARIABLE AND CONSTANT )

5.3 Operators and Expressions

JavaScript supports a variety of operators, including arithmetic, comparison, logical, and


assignment operators. You can use these operators to perform operations on variables and values.

5.3.1 Arithmetic Operators


Arithmetic operators allow you to perform mathematical calculations.

28
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

FIGURE : 5.8 ( ARITHMETIC OPERATORS )

5.3.2 Comparison Operators


Comparison operators are used to compare values and return a boolean result.

FIGURE : 5.9 ( COMPARISON OPERATIORS )

5.3.3 Logical Operators


Logical operators are used to combine or manipulate boolean values.

FIGURE : 5.10 ( LOGICAL OPERATORS )

5.3.4 Assignment Operators


Assignment operators are used to assign values to variables.

FIGURE : 5.11 ( ASSIGNMENT OPERATORS )

29
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

5.4 Control Flow

Control flow statements allow you to control the flow of your program's execution. These include
conditional statements and loops.

5.4.1 Conditional Statements


Conditional statements allow you to execute different code blocks based on specified conditions.

FIGURE : 5.12 ( CONDITIONAL STATEMENT - IF-ELSE )

5.4.2 Loops
Loops are used to execute a block of code repeatedly.

5.4.2.1 ‘for’ Loop


The `for` loop is commonly used to iterate over arrays or perform a specific number of iterations.

FIGURE : 5.13 ( FOR - LOOP )

5.4.2.2 `while` Loop


The `while` loop continues executing as long as a specified condition is true.

FIGURE : 5.14 ( WHILE - LOOP )

30
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

5.4.2.3 `do...while` Loop


The `do...while` loop is similar to the `while` loop but guarantees at least one execution of the code

FIGURE : 5.15 ( DO-WHILE - LOOP )

block.
5.5 Functions

Functions are reusable blocks of code that can take parameters and return values. They help
organise and modularise your code.

FIGURE : 5.16 ( FUNCTIONS )

31
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

Chapter-6
Django
6.1 Introduction

Django is a high-level Python web framework that makes it easier to build web applications quickly
and efficiently. In this chapter, we'll cover the basics of setting up a Django project, creating a simple
web application, and understanding the core components of Django.

6.2 Installing Django

Before you can start working with Django, you need to install it. Django can be installed using pip,
the Python package manager. Open your terminal or command prompt and run the command : “pip
install django” .

Once Django is installed, you can verify the installation by running : “django-admin —version”
This should display the installed Django version.

6.3 Creating a Django Project

A Django project is a collection of settings, configurations, and applications for a specific web
application. To create a new Django project, use the command: “django-admin startproject
projectname”

Replace `projectname` with the name you want to give to your project. This command will create a
directory with the same name as your project containing the necessary project files and directories.

6.3.1 Django Project Structure

Let's take a closer look at the project structure created by Django:

- projectname/: This is the root directory of your Django project.


- projectname/: This inner directory contains the settings for your project.
- settings.py: This file contains various configuration settings for your project, such as
database settings, middleware, and more.
- urls.py: This file defines the URL patterns for your project.
- init .py: This file is required for Python to recognise the project directory as a package.
- manage.py: This script is used to interact with your project, such as running development
servers, creating database tables, and more.
- venv/: This directory is used to store your virtual environment, which isolates your project's
dependencies from the system-wide Python installation.

- db.sqlite3: This is the default SQLite database created for your project.

6.4 Starting the Development Server

32
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

To test your newly created project, navigate to the project directory in your terminal and run the
command: “python manage.py runserver”

This will start the development server, and you should see output indicating that the server is running.
By default, the development server runs on `http://127.0.0.1:8000/`.

Open a web browser and enter the URL `http://127.0.0.1:8000/` to see the default Django welcome
page.

6.5 Creating a Django App

In Django, applications are modular components that can be reused in different projects. To create a
new Django app, use the command: “python manage.py startapp appname”

Replace “appname” with the name of your app. This command will create a directory with the same
name as your app containing the necessary app files and directories.

6.5.1 Understanding the App Structure

Here's a brief overview of the app structure:


• appname/: This is the root directory of your app.
• admin.py: This file is used to register models with the Django admin site.
• apps.py: This file contains app-specific configuration.
• models.py: This is where you define your data models using Django's Object-Relational Mapping
(ORM).
• views.py: This is where you define the views that handle HTTP requests and render templates.
• urls.py: This file defines the URL patterns specific to your app.
• templates/: This directory is where you can store HTML templates for your app.
• migrations/: This directory contains database migration files.

6.6 Defining a Model

In Django, models are used to define the structure of your database tables. Let's create a simple model
for a blog post. Open the `models.py` file in your app directory and define a `Post` model:

from django.db import models

class Post(models.Model):
title = models.CharField(max_length=200)
content = models.TextField()
pub_date = models.DateTimeField('date published')

This model has three fields: `title`, `content`, and `pub_date`. `title` is a character field for the post
title, `content` is a text field for the post content, and `pub_date` is a date and time field for the
publication date.

6.6.1Creating Database Tables

33
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

To create the database table for the `Post` model, run the following command:

python manage.py makemigrations


python manage.py migrate

The `makemigrations` command generates a migration file based on the changes to the model, and
the `migrate` command applies the migrations to create the database table.

6.7 Creating Views and Templates

Now that you have defined a model, let's create views to display the blog posts and templates to render
them. Open the `views.py` file in your app directory and define a view function to display a list of
posts:

from django.shortcuts import render


from .models import Post

def post_list(request):
posts = Post.objects.all()
return render(request, 'appname/post_list.html', {'posts': posts})

In this view, we retrieve all the `Post` objects from the database and pass them to a template called
`post_list.html`.

Next, create the `post_list.html` template in your app's `templates` directory. Here's a simpleexample
of what the template might look like:

<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
</head>
<body>
<h1>Blog</h1>
<ul>
{% for post in posts %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
</body>
</html>

This template iterates through the `posts` queryset and displays the titles of the blog posts in an
unordered list.

34
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

6.8 Creating URLs

To make the `post_list` view accessible, you need to define a URL pattern for it. Open the `urls.py`
file in your app directory and add the following code:

from django.urls import path


from . import views

urlpatterns = [
path('', views.post_list, name='post_list'),
]

This code creates a URL pattern that maps the root URL of your app to the ‘post_list’ view.

Connecting the App to the Project

To make your app accessible within your project, you need to include it in the project's `urls.py`
file. Open the `urls.py` file in your project directory and add the following code:

from django.contrib import admin


from django.urls import path, include

urlpatterns = [
path('admin/', admin.site.urls),
path('appname/', include('appname.urls')),
]

Replace ‘appname’ with the name of your app. This code includes the app's URLs under the
‘appname/‘ path.

Running the Development Server

With everything set up, start the development server again: “python manage.py runserver”

Now, you can access

your blog post list by visiting `http://127.0.0.1:8000/appname/` in your web browser

35
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

Chapter -
Project Description
725
A Library Management System (LMS) is a comprehensive software solution designed to streamline
and automate the various operations and tasks associated with library management. This system
serves as a centralised platform for efficiently organising, cataloging, and managing a library's
resources, including books, journals, multimedia materials, and more. The primary functionalities of
a Library Management System include:

• Cataloging and Classification: The LMS facilitates the systematic organisation of library
materials by providing tools to catalog items, assign classifications, and manage metadata,
ensuring easy retrieval and identification of resources.
• Borrowing and Returning: Users can seamlessly check out and return items through the
system, which automates the tracking of borrowed materials, due dates, and late fees,
enhancing the overall borrowing experience for patrons.
• User Management: The system maintains a database of library patrons, managing user
accounts, tracking borrowing history, and providing personalised features such as user
profiles, preferences, and notifications.
• Inventory Management: Library staff can efficiently monitor and manage the library's
inventory, including acquisitions, withdrawals, and real-time stock updates. This feature aids
in maintaining an accurate and up-to-date record of the library's collection.
• Search and Retrieval: The LMS offers advanced search capabilities, enabling users to
locate specific resources using various criteria such as title, author, subject, or keywords.
This enhances the accessibility and discoverability of library materials.
• Automation of Administrative Tasks: Routine administrative tasks, such as generating
reports, managing fines, and tracking library usage statistics, are automated, saving time and
resources for library staff.
• Security and Access Control: The system ensures data security and access control by
implementing user authentication mechanisms, restricting access to sensitive information,
and safeguarding against unauthorised use or modifications.
• Integration with Online Resources: Many modern LMS platforms integrate with online
databases, e-books, and digital repositories, expanding the library's offerings and providing
users with access to a broader range of resources.
• Customisation and Scalability: Libraries can tailor the system to their specific needs,
incorporating custom fields, workflows, and policies. Additionally, the LMS is designed to
scale, accommodating the growth of the library's collection and user base.
• User-Friendly Interface: A well-designed, intuitive interface ensures that both library staff
and patrons can navigate the system easily, promoting user adoption and satisfaction.

36
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

Chapter - 8
Project Snapshots

FIGURE - 8.1 ( LOGIN PAGE OF PROJECT )

FIGURE - 8.2 ( SING UP PAGE )

37
FIGURE - 8.3 ( LIBRARIAN MENU )

FIGURE - 8.4 ( STUDENT MENU )

38
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

Chapter - 9
Future Scope

9.1 Future Scope

1. Growing Demand for Web Applications

 As businesses increasingly shift online, the demand for robust web applications continues to rise.
Django's framework allows for rapid development, making it an attractive choice for startups and
established companies alike.

2. Microservices and APIs

 With the rise of microservices architecture, Django REST Framework is becoming essential for building
APIs. The trend towards decoupled applications and single-page applications (SPAs) requires efficient
API development, an area where Django excels.

3. Integration with Emerging Technologies

 Django's versatility allows for integration with technologies like AI and machine learning. Frameworks
like TensorFlow can be integrated with Django to create intelligent applications, enhancing its scope in
data-driven industries.

4. Enhanced Security Features

 Security is a top priority for web applications. Django's built-in features, such as protection against SQL
injection, cross-site scripting, and cross-site request forgery, continue to make it a preferred choice for
secure web development.

5. Community and Ecosystem Growth

 Django has a vibrant community that contributes to its continuous improvement. The growth of plugins
and third-party libraries enhances its functionality, making it easier to implement complex features.
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

Chapter – 10
Conclusion
10.1 Conclusion

The Django course has offered participants a thorough and immersive exploration of web development
using one of the most popular and powerful frameworks available today. Throughout the course, students
engaged deeply with a variety of critical concepts and tools, including Django's architecture, its
sophisticated Object-Relational Mapping (ORM) capabilities, the templating system, and robust security
features that safeguard web applications from various vulnerabilities.
By combining theoretical instruction with practical application, the course fostered an environment where
learners could directly implement their newfound knowledge. Participants worked on a series of hands-on
projects that ranged from creating basic web applications to developing more complex systems capable of
handling user authentication, data management, and dynamic content generation. These projects were
designed not only to challenge students but also to mimic real-world scenarios they are likely to encounter
in their careers.
One of the standout aspects of the course was the emphasis on best practices in software development.
Students learned to utilize version control systems such as Git to track changes and collaborate effectively.
They were also introduced to the importance of writing tests for their code to ensure reliability and
maintainability. These practices are essential in the industry, where teamwork and code quality are
paramount for successful software delivery.
Feedback from participants indicated a strong appreciation for the collaborative and interactive nature of the
course. The opportunity to work alongside peers, engage in discussions, and participate in group projects
enriched the learning experience. Students learned not only from their instructors but also from each other,
fostering a sense of community and shared learning. This collaborative atmosphere encouraged participants
to explore diverse approaches to problem-solving and application design.
Furthermore, the course kept pace with current trends in web development, including the creation of
RESTful APIs and the integration of front-end frameworks. This knowledge is crucial, as the tech industry
is continually evolving, and developers must stay updated on the latest tools and technologies. By the end of
the course, participants had not only gained a solid foundation in Django but also an understanding of how it
fits into the broader landscape of web development.
As the demand for web applications continues to grow across various industries, the skills and knowledge
acquired during this course will significantly enhance the employability of the participants. They are now
better prepared to pursue further studies, contribute to open-source projects, or embark on their own
development endeavors. The ability to build secure, scalable, and user-friendly applications is a highly
sought-after skill set in today’s job market.
In summary, this Django course has not only advanced participants' technical skills but has also fostered a
sense of confidence and readiness to tackle the challenges of developing robust web applications. The
comprehensive knowledge and practical experience gained will serve as invaluable assets as they navigate
their future careers in web development and technology, empowering them to make meaningful
contributions to the field.
Third Year Industrial Training Seminar Report, Academic Year 2024-25(Odd), PCE, Jaipur

Chapter – 11
References
11.1 References

1. https://docs.djangoproject.com/
2. https://www.coursera.org/specializations/django
3. https://www.udemy.com/course/python-django-dev-to-deployment/
4. https://realpython.com/tutorials/django/
5. https://forum.djangoproject.com/
6. https://stackoverflow.com/questions/tagged/django
7. https://www.youtube.com/playlist?list=PL-osiE80TeTn5yOUyP4yP8vD_8E8KjF4

You might also like