BANGALORE UNIVERSITY

VI – Semester (NEP) BCA Internship Report on

“PYTHON FULL STACK DEVELOPMENT”

Submitted by
PUNITH M
U03HA22S0009
Under the guidance of
Mr. KSS Praveen Kumar, M.Tech(Ph.D)
(Department of Computer Applications – BCA)

SHREE VEDHA COLLEGE

#6 Papareddy Palya,Nagarbhavi II Stage,Bangalore - 560072
2025
 SHREE VEDHA COLLEGE
#6 Papareddy Palya,Nagarbhavi II Stage,Bangalore - 560072

GUIDE CERTIFICATE

This is to certify that Mr. PUNITH M (U03HA22S0009) of VI

Semester BCA, Bangalore University, has done Internship report
entitled on “PYTHON FULL STACK DEVELOPMENT” at RG
Technologies Pvt Ltd using “Python, Django, HTML, CSS,
JavaScript, and MySQL/MongoDB” covering both front-end and
back-end development as part of the course curriculum during the
term 10th February 2025 to 13th April 2025

Internal Guide
 SHREE VEDHA COLLEGE
Department of Computer Applications - BCA
Internship Day Book

Student Name and USN No: PUNITH M (U03HA22S0009)

Company Name: Revanth Software Solutions Private Limited
Address: #403, Ramachandra nivas, SR Nagar, Hyderabad-38
SL.No Date Activities/Work Done
1 10/02/25 Introduction to Python Full Stack Development,
Installation of Python, VS Code, Git
2 11/02/25 Basic Python Syntax: Variables, Data Types, Loops,
Conditionals
3 12/02/25 Type Casting, Input/Output Statements
4 13/02/25 HTML Basics: Tags, Forms, Tables
5 14/02/25 CSS Fundamentals: Selectors, Layouts, Box Model
6 15/02/25 HTML/CSS Assignments and Practice
7 17/02/25 Conditional & Looping Statements in Python

8 18/02/25 Functions in Python, Scope and Arguments

9 19/02/25 OOPs: Classes, Objects, Inheritance
10 20/02/25 File Handling and Exception Handling in Python
11 21/02/25 Git and GitHub Basics: Creating Account, Repository
Setup
12 22/02/25 Assignment: Git Workflow: Clone, Push, Pull,
Branching
13 25/02/25 Django Framework Introduction, Project Structure
14 26/02/25 Django App Creation, URL Routing, Views and
Templates
15 27/02/25 Forms in Django, Model Binding, Validation
16 28/02/25 Mini Project Planning: Login & Registration System
17 01/03/25 Assignment: Python Web App - User Authentication
18 03/03/25 Frontend with JavaScript: Form Validation
19 04/03/25 Static Files in Django, CSS & JS Integration
20 05/03/25 Django Template Language, Template Inheritance
21 06/03/25 Backend Integration: Connecting to MySQL/MongoDB
 22 07/03/25 Bootstrap Integration, Responsive Design
23 08/03/25 Assignment: Full-stack Integration
24 10/03/25 CRUD Operations in Django with MySQL
25 11/03/25 Django Models and Admin Customization
26 12/03/25 Deployment Setup: GitHub Repo, PythonAnywhere
27 13/03/25 Bash Console Configuration, Virtual Environment
Setup
28 14/03/25 Static Files Collection, Migrations
29 15/03/25 Assignment: Final Deployment Testing and Debugging
30 17/03/25 Advanced Django: Middleware, Signals
31 18/03/25 API Development: REST Framework Basics
32 19/03/25 API Authentication: Token-Based Authentication
33 20/03/25 Advanced API Features: Pagination, Filtering
34 21/03/25 Frontend Integration with APIs
35 22/03/25 Assignment: API Integration in Mini Project
36 24/03/25 Session Management in Django
37 25/03/25 Data Execution Flow and Debugging in Django Projects
38 26/03/25 Using Templates for Advanced UI Design
39 27/03/25 CMS Project: Collecting Static Files and Advanced
Setup
40 28/03/25 Reloading and Testing Applications
41 29/03/25 Assignment: Enhancing CMS Features
42 31/03/25 Advanced JavaScript: Frameworks (React Basics)
43 01/04/25 Component-Based Architecture in React
44 02/04/25 State Management in React (useState, useReducer)
45 03/04/25 Advanced Features in React (Hooks, Context API)
46 04/04/25 Integration of React with Django Backend
47 05/04/25 Assignment: Building a Full-Stack React-Django
Application
48 07/04/25 Testing in Django: Unit Testing and Integration
Testing
49 08/04/25 Debugging Strategies in Full-Stack Applications
50 09/04/25 Optimizing Django Projects for Performance
51 10/04/25 Deploying Advanced Features on Production Server
52 11/04/25 Maintenance Strategies for Deployed Applications
53 14/04/25 Assignment: Testing and Deployment Refinements

Mr. K.S.S Praveen Kumar Mr. K.S.S Praveen Kumar Dr.K.Dharani Devi
Internal Guide HOD Principal
Shree Vedha College Shree Vedha College Shree Vedha College
 WEEKLY OVERVIEW OF INTERNSHIP ACTIVITIES

DATE DAY NAME OF THE HOURS

TOPIC/MODULE COMPLETED
10/02/25 MONDAY Introduction to Python Full Stack 1
Development, Installation of Python,
1st WEEK

VS Code, Git
11/02/25 TUESDAY Basic Python Syntax: Variables, Data 1
Types, Loops, Conditionals
12/02/25 WEDNESDAY Type Casting, Input/Output Statements 2
13/02/25 THURSDAY HTML Basics: Tags, Forms, Tables 2
14/02/25 FRIDAY CSS Fundamentals: Selectors, Layouts, 3
Box Model
15/02/25 SATURDAY HTML/CSS Assignments and Practice 3

DATE DAY NAME OF THE HOURS

TOPIC/MODULE COMPLETED
17/02/25 MONDAY Conditional & Looping Statements in 1
Python
2nd WEEK

18/02/25 TUESDAY Functions in Python, Scope and 1

Arguments
19/02/25 WEDNESDAY OOPs: Classes, Objects, Inheritance 2
20/02/25 THURSDAY File Handling and Exception Handling 2
in Python
21/02/25 FRIDAY Git and GitHub Basics: Creating 2
Account, Repository Setup
22/02/25 SATURDAY Assignment: Git Workflow: Clone, 1
Push, Pull, Branching

DATE DAY NAME OF THE HOURS

TOPIC/MODULE COMPLETED
25/02/25 TUESDAY Django Framework Introduction, 2
Project Structure
3rd WEEK

26/02/25 WEDNESDAY Django App Creation, URL Routing, 3

Views and Templates
27/02/25 THURSDAY Forms in Django, Model Binding, 3
Validation
28/02/25 FRIDAY Mini Project Planning: Login & 2
Registration System
01/03/25 SATURDAY Assignment: Python Web App - User 2
Authentication
 DATE DAY NAME OF THE TOPIC/MODULE HOURS
COMPLETED
03/03/25 MONDAY Frontend with JavaScript: Form 2
Validation
4th WEEK

04/03/25 TUESDAY Static Files in Django, CSS & JS 1

Integration
05/03/25 WEDNESDAY Django Template Language, Template 2
Inheritance
06/03/25 THURSDAY Backend Integration: Connecting to 2
MySQL/MongoDB
07/03/25 FRIDAY Bootstrap Integration, Responsive Design 2
08/03/25 SATURDAY Assignment: Full-stack Integration 2

DATE DAY NAME OF THE TOPIC/MODULE HOURS

COMPLETED
10/03/25 MONDAY CRUD Operations in Django with MySQL 2
5th WEEK

11/03/25 TUESDAY Django Models and Admin Customization 2

12/03/25 WEDNESDAY Deployment Setup: GitHub Repo, 2
PythonAnywhere
13/03/25 THURSDAY Bash Console Configuration, Virtual 2
Environment Setup
14/03/25 FRIDAY Static Files Collection, Migrations 3
15/03/25 SATURDAY Assignment: Final Deployment Testing 2
and Debugging

DATE DAY NAME OF THE TOPIC/MODULE HOURS

COMPLETED
17/03/25 MONDAY Advanced Django: Middleware, Signals 2
18/03/25 TUESDAY API Development: REST Framework 1
6th WEEK

Basics
19/03/25 WEDNESDAY API Authentication: Token-Based 1
Authentication
20/03/25 THURSDAY Advanced API Features: Pagination, 2
Filtering
21/03/25 FRIDAY Frontend Integration with APIs 1
22/03/25 SATURDAY Assignment: API Integration in Mini 2
Project
 DATE DAY NAME OF THE TOPIC/MODULE HOURS
COMPLETED
24/03/25 MONDAY Session Management in Django 1
7th WEEK

25/03/25 TUESDAY Data Execution Flow and Debugging in 2

Django Projects
26/03/25 WEDNESDAY Using Templates for Advanced UI Design 2
27/03/25 THURSDAY CMS Project: Collecting Static Files and 2
Advanced Setup
28/03/25 FRIDAY Reloading and Testing Applications 2
29/03/25 SATURDAY Assignment: Enhancing CMS Features 2

DATE DAY NAME OF THE TOPIC/MODULE HOURS

COMPLETED
31/03/25 MONDAY Advanced JavaScript: Frameworks (React 2
8th WEEK

Basics)
01/04/25 TUESDAY Component-Based Architecture in React 2
02/04/25 WEDNESDAY State Management in React (useState, 2
useReducer)
03/04/25 THURSDAY Advanced Features in React (Hooks, 2
Context API)
04/04/25 FRIDAY 2
Integration of React with Django Backend
05/04/25 SATURDAY Assignment: Building a Full-Stack React- 1
Django Application

DATE DAY NAME OF THE TOPIC/MODULE HOURS

COMPLETED
07/04/25 MONDAY Testing in Django: Unit Testing and 2
Integration Testing
9th WEEK

08/04/25 TUESDAY Debugging Strategies in Full-Stack 2

Applications
09/04/25 WEDNESDAY Optimizing Django Projects for Performance 2
10/04/25 THURSDAY Deploying Advanced Features on Production 2
Server
11/04/25 FRIDAY Maintenance Strategies for Deployed 2
Applications
14/04/25 SATURDAY Assignment: Testing and Deployment 2
Refinements

Total Duration 101

 DECLARATION

I PUNITH M (U03HA22S0009) Student of VI Semester, Bachelor of

Computer Applications (BCA) of Bangalore University hereby declare that
the Internship report entitled on “PYTHON FULL STACK
DEVELOPMENT” is the result of the original work done by me.

PUNITH M

(U03HA22S0009)
 ACKNOWLEDGEMENT

The satisfaction and successful completion of any task would be

incomplete without the mention of the people who made It possible
for the successful completion of the Internship report.

I express my sincere gratitude to Late Smt.V.Anuradha Rao,

Founder of NRI-Shree Vedha College and Sri.V.RangaRao,
Chairman, Shree Vedha College, Bangalore for providing us the
facilities and encouragement in completing this Internship report.

I take this opportunity to express my sincere gratitude to

Dr.K.Dharani Devi Principal, Shree Vedha College for her valuable
suggestions.

I convey my sincere regards to Mrs.K.Nalini Satya Sai, Mr.K.S.S

Praveen Kumar, Mr.Jeevan Kumar B, Mr.K Murali Krishna
lecturers Department of Computer Science, Shree Vedha College for
providing us guidance, lots of support and timely advice.

I affectionately acknowledge the help and encouragement received

from my beloved parents Sri.Mohan Babu K , Smt.Geetha for their
Unparallel affection and encouragement throughtout my life.

I am grateful to all my friends who helped me directly or indirectly

with their valuable suggestions for the completion of the Internship
report.

PUNITH M

(U03HA22S0009)
 Chapter - 1
Overview of Python Full Stack Development

What is Python?
Python is a popular programming language. It was created by Guido van Rossum, and
released in 1991.

It is used for:

 web development (server-side),

 software development,
 mathematics,
 system scripting.

What can Python do?

 Python can be used on a server to create web applications.
 Python can be used alongside software to create workflows.
 Python can connect to database systems. It can also read and modify files.
 Python can be used to handle big data and perform complex mathematics.
 Python can be used for rapid prototyping, or for production-ready software
‘ development.

Python Quickstart
Python is an interpreted programming language, this means that as a developer you write
Python (.py) files in a text editor and then put those files into the python interpreter to be
executed.

The way to run a python file is like this on the command line:

C:\Users\Your Name>python helloworld.py

Where "helloworld.py" is the name of your python file.

Let's write our first Python file, called helloworld.py, which can be done in any text
editor.

helloworld.py

print("Hello, World!")

Dept of BCA, SHREE VEDHA COLLEGE Page | 1

 The Python Command Line
To test a short amount of code in python sometimes it is quickest and easiest not to write
the code in a file. This is made possible because Python can be run as a command line itself.

Type the following on the Windows, Mac or Linux command line:

C:\Users\Your Name>python
Or, if the "python" command did not work, you can try "py":
C:\Users\Your Name>py

From there you can write any python, including our hello world example from earlier in the
tutorial:

C:\Users\Your Name>python
Python 3.6.4 (v3.6.4:d48eceb, Dec 19 2017, 06:04:45) [MSC v.1900 32 bit (Intel)] on
win 32
Type "help", "copyright", "credits" or "license" for more information.
>>> print("Hello, World!")

Which will write "Hello, World!" in the command line:

C:\Users\Your Name>python
Python 3.6.4 (v3.6.4:d48eceb, Dec 19 2017, 06:04:45) [MSC v.1900 32 bit (Intel)] on
win32
Type "help", "copyright", "credits" or "license" for more information.
>>> print("Hello, World!")
Hello, World!

Whenever you are done in the python command line, you can simply type the following to
quit the python command line interface:

exit()

IMPLEMENTATION

Implementation Tools

Implementation is an activity that is contained throughout the development phase. It

is the process of bringing designed system into operational use. The system is tested first
and then turned into working system. Every task identified in the design specification is
carried out in this phase.
Front End Tools

Dept of BCA, SHREE VEDHA COLLEGE Page | 2

 HTML
HTML known as Hyper Text Mark-up Language, the authoring language used to
create documents on the World Wide Web. HTML defines the structure and layout of a
Web document by using a variety of tags and attributes. Theme or plugin does exactly
what you need it to do, and looks almost exactly how you need it to look. But still, you
wish it would look slightly different. For this reason, HTML was used. HTML tags were
used in posts, pages, sidebar text widgets to code a hyperlink by hand, or adjust the header
sizes.

CSS
CSS stands for Cascading Style Sheets. It describes how HTML elements are to be
displayed on screen or in other media. In this project, additional CSS was used when
further customization on the site was required. Sometimes, the theme does not work as per
the requirement of the user so to meet the requirement of the user additional CSS was used.
To add in the icons, to scale the logo properly, change the font size of the specified content,
to add a specific call out box, or style just a section of a post differently CSS was used.
The theme option does provide certain features but to add the features according to the
client’s requirement additional CSS was applied.

JAVASCRIPT
JavaScript (sometimes abbreviated JS) is a prototype-based scripting language that
is dynamic, weakly typed. JavaScript is a client-side scripting language meaning that
JavaScript code written into an HTML page. When a user requests an HTML page with
JavaScript in it, the script is sent to the browser and it's up to the browser to do something
with it. It is used to make webpage more interactive, check or modify the contents of
forms, change images, open new windows and write dynamic page content.

BOOTSTRAP
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-
first frontend web development. It contains CSS- and (optionally) JavaScript-based design
templates for typography, forms, buttons, navigation, and other interface components.
Bootstrap is a web framework that focuses on simplifying the development of informative
web pages (as opposed to web apps). The primary purpose of adding it to a web project is
to apply Bootstrap's choices of colour, size, font and layout to that project. As such, the
primary factor is whether the developers in charge find those choices to their liking. Once
added to a project, Bootstrap provides basic style definitions for all HTML elements. In
addition, developers can take advantage of CSS classes defined in Bootstrap to further
customize the appearance of their contents. For example, Bootstrap has provisioned for
light- and darkcoloured tables, page headings, more prominent pull quotes, and text with a
highlight.
Back End Tools XAMPP
XAMPP is a free and open-source cross-platform web server solution stack package
developed by Apache Friends, consisting mainly of the Apache HTTP Server, MariaDB
database, and interpreters for scripts written in the PHP and Perl programming languages.
Dept of BCA, SHREE VEDHA COLLEGE Page | 3
 Since most actual web server deployments use the same components as XAMPP, it makes
transitioning from a local test server to a live server possible. XAMPP's ease of
deployment means a WAMP or LAMP stack can be installed quickly and simply on an
operating system by a developer, with the advantage a number of common add-in
applications such as WordPress and Joomla! can also be installed with similar ease using
Bitnami

XAMPP Control Panel

PHP
PHP is an amazing and popular language. It is powerful enough to be at the core of
the biggest blogging system on the web. PHP is an acronym for "PHP: Hypertext Pre-
processor". PHP is a widely-used, open source scripting language. PHP scripts are executed
on the server. PHP is free to download and use. PHP files can contain text, HTML, CSS,
JavaScript, and PHP code. PHP code are executed on the server, and the result is returned
to the browser as plain HTML. PHP files have extension “.php.

Dept of BCA, SHREE VEDHA COLLEGE Page | 4

 SCREEN SHOTS OF WEBSITE
Login Page

Signup Page

Dept of BCA, SHREE VEDHA COLLEGE Page | 5

 Setting Page

HomePage

Product Page

Dept of BCA, SHREE VEDHA COLLEGE Page | 6

 Cart Page

Dept of BCA, SHREE VEDHA COLLEGE Page | 7

 Logout Page

Variables
Variables are containers for storing data values.

Creating Variables
Python has no command for declaring a variable.

A variable is created the moment you first assign a value to it.

Example

x=5
y = "John"
print(x)
print(y)
Casting
If you want to specify the data type of a variable, this can be done with casting.

Dept of BCA, SHREE VEDHA COLLEGE Page | 8

Example

x = str(3) # x will be '3'

y = int(3) # y will be 3
z = float(3) # z will be 3.0

Global Variables
Variables that are created outside of a function (as in all of the examples in the previous
pages) are known as global variables.

Global variables can be used by everyone, both inside of functions and outside.

Example

Create a variable outside of a function, and use it inside the function

x = "awesome"

def myfunc():
print("Python is " + x)

myfunc()

Built-in Data Types

In programming, data type is an important concept.

Variables can store data of different types, and different types can do different things.

Python has the following data types built-in by default, in these categories:

Dept of BCA, SHREE VEDHA COLLEGE Page | 9

 :

Getting the Data Type

You can get the data type of any object by using the type() function:

Example

Print the data type of the variable x:

x=5
print(type(x))

1.Basic Data Types

a) int (Integer)

Represents whole numbers (positive or negative), without decimals.

Example:

python
x = 10
y = -5

Dept of BCA, SHREE VEDHA COLLEGE Page | 10

 b) float (Floating Point)

Represents real numbers with decimal points.

Example:

python
pi = 3.14
price = -99.99

c) complex (Complex Numbers)

Used for complex numbers, written as real + imaginaryj.

Example:

python
z = 2 + 3j

d) bool (Boolean)

Only two values: True or False. Often used in conditions and loops.
Example:

python
is_active = True
is_logged_in = False

e) str (String)

Used to represent text data, enclosed in quotes.

Example:

python
name = " Yashwanth"
msg = 'Hello, World!'

2. Sequence Data Types

a) list

Ordered, mutable (changeable), and allows duplicate elements.

Example:

Dept of BCA, SHREE VEDHA COLLEGE Page | 11

 python
fruits = ["apple", "banana", "cherry"]
fruits[0] = "mango"

b) tuple

Ordered, immutable (unchangeable), and allows duplicates.

Example:

python
coordinates = (10.0, 20.0)

c) range

Represents a sequence of numbers. Commonly used in loops.

Example:

python
nums = range(1, 6) # 1 to 5

3. Mapping Data Type

dict (Dictionary)

Unordered, mutable collection of key-value pairs.

Example:

python
student = {"name": "Yashwanth", "age": 21, "course": "BCA"}

4. Set Data Types

a) set

Unordered, mutable, and does not allow duplicates.

Example:

python
colors = {"red", "blue", "green"}

b) frozenset
Dept of BCA, SHREE VEDHA COLLEGE Page | 12
 Same as a set, but immutable (cannot be changed).
Example:

python
frozen = frozenset(["a", "b", "c"])

5. Binary Data Types

a) bytes

Immutable sequence of bytes.

python
b = bytes([65, 66, 67])

b) bytearray

Mutable version of bytes.

python
ba = bytearray([65, 66, 67])
ba[0] = 90

c) memoryview

Used to access internal data of binary objects without copying.

python
mv = memoryview(bytes(5))

Type Checking & Conversion

Checking Type:

python
x=5
print(type(x))
# Output: <class 'int'>

Type Conversion:

python
Dept of BCA, SHREE VEDHA COLLEGE Page | 13
 int("10")
# Converts string to intfloat("3.14")
# Converts string to floatstr(100)
# Converts int to stringlist("abc")
# Converts string to list

Python Loops

Dept of BCA, SHREE VEDHA COLLEGE Page | 14

 Python has two primitive loop commands:

 while loops
 for loops

The while Loop

With the while loop we can execute a set of statements as long as a condition is true.

Example

Print i as long as i is less than 6:

i=1
while i < 6:
print(i)
i += 1
Python For Loops
A for loop is used for iterating over a sequence (that is either a list, a tuple, a dictionary, a
set, or a string).

This is less like the for keyword in other programming languages, and works more like an
iterator method as found in other object-orientated programming languages.

With the for loop we can execute a set of statements, once for each item in a list, tuple, set
etc.

Example

Print each fruit in a fruit list:

fruits = ["apple", "banana", "cherry"]

for x in fruits:
print(x)

Loop Control Statements

Dept of BCA, SHREE VEDHA COLLEGE Page | 15

 Python provides special statements to control loop execution:

Statement Description
Break Exits the loop prematurely.
continue Skips the current iteration and moves to the next.
pass Does nothing; acts as a placeholder.

Example of break:

python
for num in range(10):
if num == 5:
break
print(num)

Stops printing after 4.

Example of continue:

python
for num in range(5):
if num == 2:
continue
print(num)

Nested Loops
A loop inside another loop.

Useful for working with multi-dimensional data.

Example:

python
for i in range(3):
for j in range(2):
print(i, j)

Output:

00
01
10
Dept of BCA, SHREE VEDHA COLLEGE Page | 16
 11
20
21

Why Use Loops?

Automate and repeat tasks efficiently.

Reduce the amount of code written.

Handle large amounts of data easily.

Summary Table

Type Usage Example

for loop Iterating over a
list
while loop Run while a
condition is True
break Exit loop early
continue Skip to next
iteration
nested loop Loop inside
another loop

Conditional Statements in Python

Conditional statements in Python are used to control the flow of the program based on
specific conditions. They allow the program to make decisions and execute certain blocks
of code accordingly.

1. if Statement

The if statement is used to test a specific condition. If the condition evaluates to True, the
block of code under it runs.

python
x = 10if x > 5:
print("x is greater than 5")

2. if-else Statement

When the if condition is False, the code inside the else block will execute.

x=3
if x > 5:

Dept of BCA, SHREE VEDHA COLLEGE Page | 17

 print("x is greater than 5")
else:
print("x is 5 or less")

3. if-elif-else Ladder
This allows checking multiple conditions one by one.
python
x=5
if x > 5:
print("x is greater than 5")
elif x == 5:
print("x is exactly 5")
else:
print("x is less than 5")

4. Nested if Statement

You can use one if statement inside another for more complex decision-making.

python

x = 15if x > 10:

if x < 20:
print("x is between 10 and 20")
5. Short-hand if Statement

Python allows writing the if statement in a single line when it's a simple condition.

python
x = 10
if x > 5:
print("x is greater than 5")

Dept of BCA, SHREE VEDHA COLLEGE Page | 18

6. Ternary Operator (Short-hand if-else)
Used to assign values based on conditions in a concise way.

python
x = 10
status = "High" if x > 5 else "Low"print(status)

1. Check if a number is positive or negative

python
num = int(input("Enter a number: "))
if num > 0:
print("The number is positive.")elif num == 0:
print("The number is zero.")else:
print("The number is negative.")

2. Check if a number is even or odd

python
num = int(input("Enter a number: "))
if num % 2 == 0:
print("Even number.")else:
print("Odd number.")

3. Login System (basic username-password check)

python
username = input("Enter username: ")
password = input("Enter password: ")
if username == "admin" and password == "1234":
print("Login successful!")else:
print("Invalid credentials.")

Python Functions
A function in Python is a reusable block of code that performs a specific task.
Functions help to organize code, avoid repetition, and make programs modular and easier to
manage.

Dept of BCA, SHREE VEDHA COLLEGE Page | 19

 Types of Functions in Python
 Built-in Functions

Predefined in Python.

Example: print(), len(), input(), type(), range()

 User-Defined Functions

Created by the programmer to perform specific tasks

 Creating a Function

We use the def keyword to define a function.

Syntax:

python
def function_name(parameters):
# code block
return value

Example of a Simple Function

python
def greet():
print("Hello, Yashwanth!")
greet()

Output:

Hello, Yashwanth!

Function with Parameters

Functions can accept parameters (inputs) to work with.

python
def greet(name):
print(f"Hello, {name}!")
greet("Yashwanth")

Output:
Dept of BCA, SHREE VEDHA COLLEGE Page | 20
 Hello, Yashwanth!

Function with Return Value

A function can return a result using the return keyword.

python
def add(a, b):
return a + b

result = add(5, 3)print(result)

Output:

Types of Function Arguments

Type Description Example

Based on the position in function
Positional add(3, 4)
call
Arguments passed with key =
Keyword greet(name="Yashwanth")
value format
Parameter with a default value if
Default def greet(name="Guest")
not provided
Accept multiple values using def func(*args) or def
Variable-length
*args or **kwargs func(**kwargs)

Example: Default Argument

python
def greet(name="Guest"):
print(f"Hello, {name}!")
greet()

# Output: Hello, Guest!

greet("Yashwanth")
# Output: Hello, Yashwanth!

Variable-length Arguments

Dept of BCA, SHREE VEDHA COLLEGE Page | 21

 *args for multiple positional arguments.

**kwargs for multiple keyword arguments.

python
def sum_all(*numbers):
return sum(numbers)
print(sum_all(1, 2, 3, 4))

# Output: 10

Lambda Functions (Anonymous Functions)

Short, one-line functions without a name.

Created using lambda keyword.

Syntax:

python
lambda arguments: expression

Example:

python
square = lambda x: x * xprint(square(5)) # Output: 25

Python Modules

What is a Module?
Consider a module to be the same as a code library.

A file containing a set of functions you want to include in your application.

Create a Module

To create a module just save the code you want in a file with the file extension .py:

Example
Save this code in a file named mymodule.py
Dept of BCA, SHREE VEDHA COLLEGE Page | 22
 def greeting(name):
print("Hello, " + name)

Types of Python Modules

Built-in Modules

Already available in Python.

No installation needed.

Examples: math, random, os, datetime, sys, time, etc.

Example:

import mathprint(math.sqrt(16))

# Output: 4.0

User-Defined Modules

Created by the user.

A Python file (e.g., my_module.py) that contains your code.

Example:

python
# my_module.pydef greet(name):
return f"Hello, {name}!"
# main.pyimport my_moduleprint(my_module.greet("Yashwanth"))

External Modules (Third-Party)

Need to be installed using pip.

Examples: numpy, pandas, requests, flask, Django

Install using pip:

bash
pip install numpy
Dept of BCA, SHREE VEDHA COLLEGE Page | 23
 Reloading a Module

If you change a module, use importlib.reload() to reload it:

python
import importlibimport my_module
importlib.reload(my_module)

File Handling
The key function for working with files in Python is the open() function.

The open() function takes two parameters; filename, and mode.

Dept of BCA, SHREE VEDHA COLLEGE Page | 24

 There are four different methods (modes) for opening a file:

"r" - Read - Default value. Opens a file for reading, error if the file does not exist

"a" - Append - Opens a file for appending, creates the file if it does not exist

"w" - Write - Opens a file for writing, creates the file if it does not exist

"x" - Create - Creates the specified file, returns an error if the file exists

In addition you can specify if the file should be handled as binary or text mode

"t" - Text - Default value. Text mode

"b" - Binary - Binary mode (e.g. images)

Syntax
To open a file for reading it is enough to specify the name of the file:

f = open("demofile.txt")

The code above is the same as:

f = open("demofile.txt", "rt")

Because "r" for read, and "t" for text are the default values, you do not need to specify them

Open a File on the Server

Assume we have the following file, located in the same folder as Python:

demofile.txt

Dept of BCA, SHREE VEDHA COLLEGE Page | 25

Hello! Welcome to demofile.txt
This file is for testing purposes.
Good Luck!

To open the file, use the built-in open() function.

The open() function returns a file object, which has a read() method for reading the content
of the file:

Example

f = open("demofile.txt")
print(f.read())

If the file is located in a different location, you will have to specify the file path, like this:

Example

Open a file on a different location:

f = open("D:\\myfiles\welcome.txt")
print(f.read())
Using the with statement
You can also use the with statement when opening a file:

Example

Using the with keyword:

with open("demofile.txt") as f:
print(f.read())

Then you do not have to worry about closing your files, the with statement takes care of
that.

Close Files
It is a good practice to always close the file when you are done with it.

If you are not using the with statement, you must write a close statement in order to close
the file:
Dept of BCA, SHREE VEDHA COLLEGE Page | 26
 Example

Close the file when you are finished with it:

f = open("demofile.txt")
print(f.readline())
f.close()

Read Only Parts of the File

By default the read() method returns the whole text, but you can also specify how many
characters you want to return:

Example

Return the 5 first characters of the file:

with open("demofile.txt") as f:
print(f.read(5))

Python File Write

Write to an Existing File:

To write to an existing file, you must add a parameter to the open() function:

"a" - Append - will append to the end of the file

"w" - Write - will overwrite any existing content

Example
Open the file "demofile.txt" and append content to the file:
with open("demofile.txt", "a") as f:
f.write("Now the file has more content!")

Dept of BCA, SHREE VEDHA COLLEGE Page | 27

 #open and read the file after the appending:
with open("demofile.txt") as f:
print(f.read())

Create a New File:

To create a new file in Python, use the open() method, with one of the following parameters:

"x" - Create - will create a file, returns an error if the file exists

"a" - Append - will create a file if the specified file does not exists

"w" - Write - will create a file if the specified file does not exists

Example

Create a new file called "myfile.txt":

f = open("myfile.txt", "x")

Delete a File:
To delete a file, you must import the OS module, and run its os.remove() function:

Example

Remove the file "demofile.txt":

import os
os.remove("demofile.txt")

Check if File exist:

To avoid getting an error, you might want to check if the file exists before you try to delete
it:

Example

Dept of BCA, SHREE VEDHA COLLEGE Page | 28

 Check if file exists, then delete it:

import os
if os.path.exists("demofile.txt"):
os.remove("demofile.txt")
else:
print("The file does not exist")

Delete Folder:
To delete an entire folder, use the os.rmdir() method:

Example

Remove the folder "myfolder":

import os
os.rmdir("myfolder")

Object-Oriented Programming in Python

Object-Oriented Programming (OOP) is a programming paradigm that structures a program
using classes and objects. It helps to organize code, promote reusability, and model real-
world scenarios effectively.

Class and Object

Class: A blueprint for creating objects. It defines attributes and behaviors.

Object: An instance of a class containing actual data.

python
class Student:
def __init__(self, name, age):
self.name = name
self.age = age

def display(self):
print(f"Name: {self.name}, Age: {self.age}")
# Creating an object
s1 = Student("Yashwanth", 20)
s1.display()
Dept of BCA, SHREE VEDHA COLLEGE Page | 29
 Inheritance
Inheritance allows a class to acquire properties and methods from another class. It promotes
code reuse.

Single Inheritance
python
class Animal:
def speak(self):
print("Animal speaks")
class Dog(Animal):
def bark(self):
print("Dog barks")

d = Dog()
d.speak()
d.bark()

Multiple Inheritance
python
class Father:
def skill(self):
print("Gardening")
class Mother:
def skill(self):
print("Cooking")
class Child(Father, Mother):
def my_skill(self):
print("Painting")

c = Child()
c.skill() # Inherits from Father (priority from left)
c.my_skill()

Multilevel Inheritance
python
class Grandparent:
def house(self):
print("Big house")
class Parent(Grandparent):
def car(self):
print("SUV")
Dept of BCA, SHREE VEDHA COLLEGE Page | 30
 class Child(Parent):
def bike(self):
print("Sports bike")

c = Child()
c.house()
c.car()
c.bike()

Types of Methods in a Class

Type Description
Instance Method Operates on object using self
Class Method Uses @classmethod and cls
Uses @staticmethod, independent of
Static Method object python

class Demo:
def instance_method(self):
print("This is an instance method")
@classmethod
def class_method(cls):
print("This is a class method")
@staticmethod
def static_method():
print("This is a static method")
obj = Demo()
obj.instance_method()
Demo.class_method()
Demo.static_method()

Polymorphism
Polymorphism means “many forms”. In Python, it allows methods with the same name to
behave differently depending on the object or context.

Method Overriding:

python

class Bird:
def fly(self):
print("Birds can fly")
class Ostrich(Bird):
def fly(self):
Dept of BCA, SHREE VEDHA COLLEGE Page | 31
 print("Ostrich can't fly")

b1 = Bird()
b2 = Ostrich()
b1.fly() # Birds can fly
b2.fly() # Ostrich can't fly

This is runtime polymorphism through method overriding.

Encapsulation

Encapsulation means protecting data by keeping it private inside a class.

Private variables and methods cannot be accessed directly from outside the class. We use
getter and setter methods to interact with them.

Example:

python
class Account:
def __init__(self):
self.__balance = 0 # private variable

def deposit(self, amount):

if amount > 0:
self.__balance += amount

def get_balance(self):
return self.__balance

acc = Account()
acc.deposit(1000)print(acc.get_balance()) # 1000

🔒 __balance is a private variable (cannot be accessed with acc.__balance).

Abstraction
Abstraction means hiding implementation details and showing only essential features.
This is achieved in Python using abstract classes and the abc module.

Abstract Class Example:

python
from abc import ABC, abstractmethod
class Vehicle(ABC): @abstractmethod

Dept of BCA, SHREE VEDHA COLLEGE Page | 32

 def start(self):
pass
class Bike(Vehicle):
def start(self):
print("Bike started")

b = Bike()
b.start()

Vehicle is an abstract class.

Bike must implement the start() method.

Constructor (__init__)
The constructor in Python is a special method: __init__().
It runs automatically when an object is created.

Example:

python
class Book:
def __init__(self, title):
self.title = title

b = Book("Python Guide")print(b.title)

Output:

nginx
Python Guide

Dept of BCA, SHREE VEDHA COLLEGE Page | 33

 Destructor (__del__)
A deconstruct is called when an object is deleted or destroyed. In Python, it is defined as
__del__().

Example:

python
class Demo:
def __del__(self):
print("Destructor called")

d = Demo()del d # Destructor called

Login and Registration System in Python

This system allows users to register with a username and password, and then log in by
verifying credentials stored in a file.

To create a login and registration system using Python and full-stack technologies, you can
use the following stack:

Frontend: HTML, CSS, and JavaScript (for user interface)

Backend: Python (Flask or Django)

Database: SQLite or MySQL (to store user credentials)

Create login.html inside the templates folder:

<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title></head><body>
<h2>Login</h2>
<form method="POST">
<label>Email</label>
<input type="email" name="email" required><br><br>
<label>Password</label>
<input type="password" name="password" required><br><br>
<button type="submit">Login</button>
</form></body></html>

Dept of BCA, SHREE VEDHA COLLEGE Page | 34

 Create register.html inside the templates folder:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title></head><body>
<h2>Register</h2>
<form method="POST">
<label>Username</label>
<input type="text" name="username" required><br><br>
<label>Email</label>
<input type="email" name="email" required><br><br>
<label>Password</label>
<input type="password" name="password" required><br><br>
<label>Confirm Password</label>
<input type="password" name="confirm_password" required><br><br>
<button type="submit">Register</button>
</form></body></html>

Create the style.css file inside the static folder (for styling purposes).
Visit http://127.0.0.1:5000/register to register and http://127.0.0.1:5000/login to log in.

This basic login and registration system uses SQLite to store user credentials. You can
expand on this by adding features like session management, email validation, password
reset, and more.

Dept of BCA, SHREE VEDHA COLLEGE Page | 35

 Git and GitHub
In this section you will:
• create a GitHub account
• create your own fork of a repository
• create a new Git branch
• edit and commit a file on GitHub
• make a pull request
• merge upstream changes into your fork
What is it? Git is a source code management system, designed to support collaboration.
GitHub is a web-based service that hosts Git projects, including Django itself:
https://github.com/django/django.
The key idea in Git is that it’s distributed. If you’re not already familiar with version
control systems, then explaining why this is important will only introduce distinctions and
complications that you don’t need to worry about, so that’s the last thing I will say on the
subject.
Set up a GitHub account
• sign up at GitHub if you don’t already have an account
It’s free.
Some basic editing on GitHub Forking
• visit https://github.com/evildmp/afraid-to-commit/ You can do various things there,
including browsing through all the code and files.
• hit the Fork button Afew moments later, you’ll have your own copy, on GitHub, of
everything in that repository, and from now on you’ll do your work on your copy of it.
Your copy is at https://github.com//afraid-to-commit/. You will typically do this for any
Git project you want to contribute to. It’s good for you because it means you don’t have to
sign up for access to a central repository to be permitted to work on it, and even better for
the maintainers because they certainly don’t want to be managing an small army of
volunteers on top of all their other jobs.

Note: Don’t worry about all the forks You’ll notice that there might be a few forks of
https://github.com/evildmp/afraid-to-commit;

Dept of BCA, SHREE VEDHA COLLEGE Page | 36

 if you have a look at https://github.com/django/django
you’ll see thousands. There’ll even be forks of the forks. Every single one is complete
and independent.

So, which one is the real one- which one is the Django repository?
Contents Full Stack Development Documentation, Release 1.0 In a technical sense, they all
are, but the more useful answer is: the one that most people consider to be the canonical or
official version. In the case of Django, the version and above all, it’s the one that the
community treats as cannonical and official, not because it’s the original one, but because
it’s the most useful one to rally around. The same goes for https://github.com/evildmp/
afraid-to-commit and its more modest collection of forked copies. If I stop updating it, but
someone else is making useful updates to their own fork, then in time theirs might start to
become the one that people refer to and contribute to. This could even happen to Django
itself, though it’s not likely to any time soon. The proliferation of forks doesn’t somehow
dilute the original. Don’t be afraid to create more. Forks are simply the way collaboration is
made possible. Create a new branch Don’t edit the master (default) branch of the repository.
It’s much better to edit the file in a new branch, leaving the master branch clean and
untouched:
1. select the branch menu
2. in Find or create a branch... enter add-my-name
3. hit Create branch: add-my-name
Note: Don’t hesitate to branch As you may have noticed on GitHub, a repository can have
numerous branches within it. Branches are ways of organising work on a project: you can
have a branch for a new feature, for trying out something new, for exploring an issue-
anything at all. Just as virtualenvs are disposable, so are branches in Git. You can have too
many branches, but don’t hesitate to create new ones; it costs almost nothing. It’s a good
policy to create a new branch for every new bit of work you start doing, even if it’s a very
small one. It’s especially useful to create a new branch for every new feature you start work
on. Branch early and branch often. If you’re in any doubt, create a new branch. Edit a file
GitHub allows you to edit files online. This isn’t the way you will normally use Git, and it’s

Dept of BCA, SHREE VEDHA COLLEGE Page | 37

 certainly not something you’ll want to spend very much time doing, but it’s handy for very
small changes, for example typos and spelling mistakes you spot.

1. go to https://github.com//afraid-to-commit
2. find the attendees_and_learners.rst file
3. hit the Edit button
4. add your name (just your name, you will add other information later) to the appropriate
place in the file. If you’re following the tutorial by yourself, add your details in the I
followed the tutorial online section. 1.3. Phase II: Team Project Workflow 25 Full Stack
Development Documentation, Release 1.0 Commit your changes

• hit Commit Changes Nowyour copy of the file, the one that belongs to your fork of the
project, has been changed; it’s reflected right away on GitHub. If you managed to mis-spell
your name, or want to correct what you entered, you can simply edit it again. What you
have done now is make some changes, in a new branch, in your own fork of the repository.
You can see them there in the file. Make a Pull Request When you’re ready to have your
changes incorporated into my original/official/canonical repository, you do this by making
a Pull Request.

• go back to https://github.com//
afraid-to-commit You’ll see that GitHub has noted your recent changes, and now offers
various buttons to allow you to compare them with the original or make a pull request.

• hit Compare & pull request This will show you a compare view, from which you can
make your pull request. When preparing for a pull request, GitHub will show you what’s
being compared: evildmp:master ... :add-my-name On the left is the base for the
comparison, my fork and branch. On the right is the head, your fork and branch, that you
want to compare with it. Apull request goes from the head to the base- from right to left.

You can change the bases of the comparison if you need to:
1. hit Edit

Dept of BCA, SHREE VEDHA COLLEGE Page | 38

 2. select the forks and branches as appropriate You want your version, the head branch of
the head fork- on the right- with some commits containing file changes, to be sent to my
base repo- on the left.
3. hit the Pull Request button
4. add a comment if you like (e.g. “please add me to the attendees list”)
5. hit Send pull request You have now made a pull request to an open-source community
project- if it’s your first one, congratulations. GitHub will notify me (by email and on the
site, and will show me the changes you’re proposing to make). It’ll tell me whether they
can be merged in automatically, and I can reject, or accept, or defer a decision on, or
comment on, your pull request. GitHub can automatically merge your contribution into my
repository if mine hasn’t changed too much since you forked it. If I want to accept it but
GitHub can’t do it automatically, I will have to merge the changes manually (we will cover
this later). Once they’re merged, your contributions will become a part of
6. https://github.com/evildmp
7. /afraid-to-commit. And this is the basic lifecycle of a contribution using git: fork > edit >
commit > pull request > merge.

1. Contents Full Stack Development Documentation, Release 1.0 Incorporate upstream

changes into your master In the meantime, other people may have made their own forks,
edits, commits, and pull requests, and I may have merged those too- other people’s names
may now be in the list of attendees. Your own version of afraid-to-commit, downstream
from mine, doesn’t yet know about those. Since your work is based on mine, you can think
of my repository as being upstream of yours. You need to merge any upstream changes into
your version, and you can do this with a pull request on GitHub too. This time though you
will need to switch the bases of the comparison around, because the changes will be coming
from my version to yours.
2. hit Pull Request once more
3. hit Edit, to switch the bases

4. change the head repo on the right to my version, evildmp/afraid-to-commit, branch

master

Dept of BCA, SHREE VEDHA COLLEGE Page | 39

 5. change the base repo to yours, and the base branch to master, so the comparison bar
looks like: :master ... evildmp:master
6. hit Click to create a pull request for this comparison
7. add a Title (e.g. “merging upstream master on Github) and hit Send pull request You’re
sending a pull request to to yourself, based on updates in my repository. And in fact if you
check in your Pull Requests on GitHub, you’ll see one there waiting for you, and you too
can review, accept, reject or comment on it. If you decide to Merge it, your fork will now
contain any changes that other people sent to me and that I merged. The story of your work
is this: you forked away from my codebase, and then created a new branch in your fork.
Then you committed changes to your branch, and sent them upstream back to me (with a
pull request). I merged your changes, and perhaps those from other people, into my
codebase, and you pulled all my recent changes back into your master branch (again with a
pull request). So now, your master and mine are once more in step. Git on the commandline
In this section you will:

• install and configure Git locally

• create your own local clone of a repository
• create a new Git branch
• edit a file and stage your changes
• commit your changes
• push your changes to GitHub
• make a pull request
• merge upstream changes into your fork
• merge changes on GitHub into your local clone

Introduction to HTML

Dept of BCA, SHREE VEDHA COLLEGE Page | 40

 HTML, which stands for HyperText Markup Language, is the standard markup language
used to create and design the structure of web pages. It forms the backbone of almost every
website on the internet. As a Full Stack Developer, understanding HTML is fundamental
because it is the first step in building the front-end of web applications.

What is HTML?

HTML is not a programming language; it is a markup language that defines the structure
and layout of a web document by using a system of tags and attributes. It tells the web
browser how to display content like text, images, links, videos, and more.

Features of HTML

Simple and Easy to Learn: HTML is straightforward and beginner-friendly.

Platform Independent: HTML files can run on any device or browser.

Flexible: Easily integrates with CSS, JavaScript, and other technologies.

Hyperlinking: Allows linking between different web pages through hyperlinks.

Multimedia Support: Embeds images, audio, and video content directly into web pages.

Basic Structure of an HTML Document

A simple HTML document typically has the following structure:

html
<!DOCTYPE html><html><head>
<title>Page Title</title></head><body>
<h1>This is a Heading</h1>
<p>This is a paragraph of text.</p></body></html>

Important HTML Elements

Tag Description
<h1> to <h6> Headings from largest to smallest
<p> Paragraph of text
<a> Anchor tag for hyperlinks
<img> Embeds images
<div> Container for block elements
<span> Container for inline elements
<table> Creates tables
<form> Creates user input forms
<ul>, <ol>, <li> Lists (unordered/ordered)
Dept of BCA, SHREE VEDHA COLLEGE Page | 41
 Importance of HTML in Full Stack Development
As a Full Stack Developer:

HTML provides the foundation to build the user interface (UI).

It works alongside CSS (for design) and JavaScript (for interactivity).

HTML is essential for rendering dynamic content and creating responsive designs.

It is integrated with back-end frameworks (like Flask, Django) through templating engines
such as Jinja2.

Evolution of HTML
HTML 1.0 (1993): The first release with basic tags.

HTML 4.01 (1999): Added support for scripting languages like JavaScript.

HTML5 (2014): Modern version with features like audio, video, and local storage without
needing plugins.

Advantages of HTML
Free and Open Standard: No licensing required; it's open for everyone.

Lightweight: HTML documents are lightweight and easy to load.

SEO Friendly: HTML structures like headings, paragraphs, and meta tags improve Search
Engine Optimization (SEO).

Cross-Platform Support: HTML works uniformly across various operating systems and
browsers.

Integration with Other Languages: HTML can easily integrate with CSS, JavaScript, and
server-side languages like Python (using Django, Flask)

Applications of HTML
1. Website Development: Every website uses HTML at its core.
2. Web Application Frontends: Web apps like Gmail, Facebook, and Twitter use HTML
in their user interfaces.
3. Email Templates: HTML is used to design professional, responsive email layouts.
Dept of BCA, SHREE VEDHA COLLEGE Page | 42
 4. Mobile App Development: Tools like React Native or Flutter web components use
HTML-like syntax.
5. Game Development: Some simple browser games use HTML5 Canvas element.

HTML Versions Timeline

Version Year Key Features

HTML 1.0 1993 Basic structure, limited tags
HTML 2.0 1995 Form-based elements introduced
HTML 3.2 1997 Scripting support (JavaScript)
HTML 4.01 1999 CSS support, frames
HTML5 2014 Audio, video, SVG support, semantic elements

Key HTML Features

Semantic Elements: <header>, <footer>, <section>, <article>, etc., which give meaning to
the structure.

Audio and Video Tags: No need for external plugins.

Canvas Element: For drawing graphics and animations via JavaScript.

Local Storage and Session Storage: Storing data on the client side.

Responsive Web Design: Combined with CSS3 for better mobile compatibility.

Role of HTML in Python Full Stack Development

Front-End Development: Building UI elements using HTML template

Back-End Integration: Frameworks like Django and Flask use HTML through templating
engines such as:

Django Template Language (DTL)

APIs and Forms: HTML forms (<form>) collect user input which can be sent to server-
side APIs built in Python.

Dynamic Pages: Python renders dynamic HTML based on user interaction and database
queries.

Real-Life Example

Dept of BCA, SHREE VEDHA COLLEGE Page | 43

 Example:
If you create a blog application using Flask:

HTML is used to create blog pages (title, content, publish button).

Python (Flask) handles data processing and database storage.

Future Scope of HTML

Progressive Web Apps (PWA): New-age apps combining web and mobile app features.

Web Assembly Integration: Future will see HTML working alongside high-performance
Web Assembly modules.

Virtual and Augmented Reality: With WebXR APIs, HTML is stepping into VR and AR
applications.

Sample Advanced HTML Code: "About Me" Webpage

<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me</title></head><body>
<h1>Welcome to My Page!</h1>

<p>Hello! My name is Ram. I am a passionate Full Stack Developer in training. 🚀</p>

<h2>My Hobbies</h2>
<ul>
<li>Learning Web Development</li>
<li>Exploring AI and Machine Learning</li>
<li>Reading Technology Blogs</li>
</ul>

<h2>Skills</h2>
<table border="1" cellpadding="10">
<tr>
<th>Skill</th>
<th>Level</th>
</tr>
<tr>
<td>HTML</td>
<td>Intermediate</td>
</tr>
<tr>
Dept of BCA, SHREE VEDHA COLLEGE Page | 44
 <td>Python</td>
<td>Intermediate</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Beginner</td>
</tr>
</table>

<h2>My Picture</h2>
<img src="https://via.placeholder.com/150" alt="My Profile Picture" width="150"
height="150">

<p>Want to connect with me? <a href="https://www.linkedin.com/"

target="_blank">Visit my LinkedIn</a></p></body></html>

Structure in HTML

Structure in HTML means how different sections of a webpage are arranged logically and
visually.
The structure is built using structural tags to organize the content.

Key Structure Elements:

<html> — Main container for the webpage.

<head> — Information about the document (not visible to the user).

Dept of BCA, SHREE VEDHA COLLEGE Page | 45

 <body> — All visible elements like text, images, forms, tables, etc.

<header> — Top section (title, navigation).

<nav> — Navigation links.

<section> — Group of related content.

<article> — Independent content (e.g., blog post).

<aside> — Side content (ads, extra info).

<footer> — Bottom section (copyright, links).

Simple Example of Structure:

<html>
<head>
<title>My Website</title>
</head>
<body>
<header>Site Header</header>
<nav>Navigation Links</nav>
<section>Main Content</section>
<aside>Sidebar</aside>
<footer>Footer Information</footer>
</body></html>

Tags in HTML

Tags are the building blocks of HTML.

They define and format different types of content.

Types of Tags:

Type Example Purpose

Structural Tags <html>, <head>, <body> Build the page layout.
Formatting Tags <h1>, <p>, <strong>, <em> Style the text

Dept of BCA, SHREE VEDHA COLLEGE Page | 46

 (headings, paragraphs).
Linking Tags <a> Create hyperlinks.
Media Tags <img>, <video>, <audio> Add images, videos,
sounds.
List Tags <ul>, <ol>, <li> Create lists.
Table Tags <table>, <tr>, <td>, <th> Create tables.
Form Tags <form>, <input>, <textarea>, <button> Collect user input.
Meta Tags <meta> Provide metadata
(charset, keywords)

Example:

html
<p>This is a paragraph.</p><a href="https://example.com">This is a link</a><img
src="photo.jpg" alt="A photo">

Form in HTML

Forms are used to collect information from users, like login details, feedback, or orders.

Important Form Tags:

Tag Purpose
<form> Defines a form for user input.
<input> Single-line input field (text, password, email, etc.).
<textarea> Multi-line text input.
<select> Drop-down list.
<option> Items inside a <select>.
<button> Button to submit or reset the form.
<label> Label for an input field (improves accessibility).

Simple Form Example:

<form action="/submit" method="post">

<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button></form>

Table in HTML

Dept of BCA, SHREE VEDHA COLLEGE Page | 47

 Tables are used to display data in a grid format (rows and columns).

Important Table Tags:

Tag Purpose
<table> Creates the table.
<tr> Creates a table row.
<td> Creates a table data/cell.
<th> Creates a header cell (bold and centered).
<thead> Groups header rows.
<tbody> Groups body rows.
<tfoot> Groups footer rows.

Simple Table Example:

<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yashwanth </td>
<td>20</td>
</tr>
<tr>
<td>Rahul</td>
<td>21</td>
</tr>
</tbody></table>

Basic HTML Skeleton Page

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title></head><body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my first webpage.
</p>
Dept of BCA, SHREE VEDHA COLLEGE Page | 48
 </body>
</html>

OUTPUT

HTML Page with Formatting Tags

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p><strong>Bold Text</strong> and <em>Italic Text</em>.
</p>
<p>This is a <u>underlined</u> text example.
</p>
</body>
</html>

OUTPUT

HTML Page with Lists

HTML Code:

<!DOCTYPE html><html><head>

Dept of BCA, SHREE VEDHA COLLEGE Page | 49

 <title>Lists Example</title></head><body>
<h1>My Hobbies</h1>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Traveling</li>
</ul>

<h2>Steps to Make Tea</h2>

<ol>
<li>Boil water</li>
<li>Add tea leaves</li>
<li>Pour into cup</li>
<li>Add sugar and milk</li>
</ol></body></html>

OUTPUT

HTML Page with Table

HTML Code:

<!DOCTYPE html><html><head>
<title>Simple Table</title></head><body>
<h1>Student Information</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Course</th>
</tr>
<tr>
Dept of BCA, SHREE VEDHA COLLEGE Page | 50
 <td>Ram</td>
<td>101</td>
<td>BCA</td>
</tr>
<tr>
<td>Seetha</td>
<td>102</td>
<td>BCA</td>
</tr>
</table></body></html>

OUTPUT

Introduction to CSS
What is CSS?

CSS (Cascading Style Sheets) is a style sheet language that describes the presentation of a
web page written in HTML or XML. CSS controls the layout of multiple web pages at once,
making it easier to maintain and update the design of a website without changing the
HTML content.

Importance of CSS in Full Stack Development

In full-stack web development, CSS is crucial for creating the user interface (UI) and
enhancing the user experience (UX). It controls how the website looks, how elements are
arranged, and how responsive the site is on different devices.

Dept of BCA, SHREE VEDHA COLLEGE Page | 51

 CSS Syntax
Basic CSS Syntax

CSS is made up of selectors, properties, and values.

Selector: Specifies which HTML element you want to style.

Property: Defines the aspect of the HTML element you want to change (e.g., color, font
size).

Value: Specifies the value for the property (e.g., blue, 16px).

Example:

css
h1 {
color: blue;
font-size: 24px;
text-align: center;
}

Integrating CSS with Python Frameworks

CSS in Flask

In Flask, static files such as CSS are typically stored in the static directory. You can link to
CSS files in your HTML templates using Flask's url_for() function, which generates the
correct URL to the static file.

Dept of BCA, SHREE VEDHA COLLEGE Page | 52

 Example:

Folder Structure

CSS in Django

Django uses a similar structure to Flask but requires additional setup for static files in the
settings.py file. You need to include 'django.contrib.staticfiles' in your INSTALLED_APPS.

CSS Layout Techniques

The Box Model

All elements in CSS are rectangular boxes, and their layout is controlled through the box
model. The box model consists of four components:

Content: The actual content of the element.

Padding: Space between the content and the border.

Border: Surrounds the padding and content.

Margin: Space outside the border, separating the element from others

Dept of BCA, SHREE VEDHA COLLEGE Page | 53

 Example:

css
div {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}

Flexbox Layout

Flexbox is a one-dimensional layout model that helps distribute space along a row or
column.

Example:

css
.container {
display: flex;
justify-content: space-between;
}

Grid Layout

CSS Grid Layout provides a two-dimensional grid-based layout system that works both
horizontally and vertically.

Example:

css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}

Responsive Design

Media Queries

Media queries allow you to apply different styles for different screen sizes. They help
create responsive designs that adjust based on the device’s screen width.

Dept of BCA, SHREE VEDHA COLLEGE Page | 54

 Example:

css
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

CSS Preprocessors (Sass, LESS)

What are Preprocessors?

CSS preprocessors like Sass and LESS enhance CSS by adding features such as variables,
nesting, and mixins. These features make your CSS more maintainable, modular, and easier
to manage.

Sass Example:

scss
$primary-color: #3498db;$font-size: 16px;
body {
background-color: $primary-color;
font-size: $font-size;
}

Bootstrap

Bootstrap is a popular front-end framework that provides pre-designed templates for

responsive web design. It includes ready-made components like navigation bars, buttons,
and forms.

Example:

html
<button class="btn btn-primary">Click Me</button>

Tailwind CSS

Tailwind is a utility-first CSS framework that allows you to apply styles directly in HTML
using utility classes.

Dept of BCA, SHREE VEDHA COLLEGE Page | 55

 Example:

<div class="bg-blue-500 text-white p-4">

Hello, World!</div>

8. Best Practices for CSS in Full Stack Development

Modular CSS

To improve maintainability, CSS should be modular. This means breaking your CSS into
smaller, reusable components or files.

BEM (Block Element Modifier) Methodology

BEM is a naming convention for CSS classes to make the code more readable and
maintainable.

Example:

css
.button { }.button__icon { }.button--primary { }

Avoid Inline Styles

Use external stylesheets rather than inline styles to separate content and design, which
improves performance and maintainability.

9. Debugging and Testing CSS

Browser Developer Tools

You can use browser developer tools like Chrome DevTools to inspect and modify CSS on
the fly.

Example:

Right-click on an element in the browser and click "Inspect" to open DevTools.

You can see the styles applied to the element and modify them live.

Inline CSS
Dept of BCA, SHREE VEDHA COLLEGE Page | 56
 ➤ Description:

CSS is written directly in the HTML element using the style attribute. This affects only that
specific element.

➤ Syntax Example:

<h1 style="color: blue; font-size: 24px;">Welcome</h1>

➤ Use Case:

Used for quick styling or testing.

Not recommended for large projects due to poor maintainability.

➤ Pros:

Easy to apply and override.

No external files needed.

➤ Cons:

Hard to maintain.

Violates separation of concerns (HTML should not handle design)

Internal CSS
➤ Description:

CSS rules are defined inside a <style> tag within the <head> section of the HTML file.

➤ Syntax Example:

<!DOCTYPE html><html><head>
<style>
h1 {
color: green;
font-family: Arial;
}
</style></head><body>
<h1>Hello World</h1></body></html>

Dept of BCA, SHREE VEDHA COLLEGE Page | 57

 ➤ Use Case:

Suitable for single-page projects or when styles do not need to be reused.

➤ Pros:

Styles are all in one place in the document.

No need to manage external files.

➤ Cons:

Cannot be reused across multiple pages.

Less efficient for large websites.

External CSS
➤ Description:

CSS rules are written in a separate .css file and linked to the HTML file using a <link> tag.

➤ Syntax Example:

HTML File:

<!DOCTYPE html><html><head>
<link rel="stylesheet" href="styles.css"></head><body>
<h1>External CSS Example</h1></body></html>

styles.css File:
h1 {
color: red;
text-align: center;
}

➤ Use Case:

Ideal for large-scale applications and when reusing styles across multiple pages.

➤ Pros:

Dept of BCA, SHREE VEDHA COLLEGE Page | 58

 Clean and maintainable.

Promotes reusability and modular code.

Better for team collaboration.

➤ Cons:

Requires managing multiple files.

One extra HTTP request to load the CSS file.

Bonus: CSS with Python Frameworks (like Flask/Django)

You typically use External CSS in full stack Python apps.

Example:

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

Django Example:

{% load static %}<link rel="stylesheet" href="{% static 'css/style.css' %}">

CSS Styling – Background Color and Border

Background Color in CSS

The background-color property in CSS is used to define the background color of HTML
elements. This property is fundamental in front-end web development and plays a crucial
role in enhancing user interface aesthetics and improving the user experience by visually
differentiating sections or elements.

Syntax:

css
selector {
background-color: value;
}

Accepted Value Formats:

Color names: red, blue, green

Hex codes: #FF5733, #00FF00

RGB values: rgb(255, 255, 0)

Dept of BCA, SHREE VEDHA COLLEGE Page | 59
 RGBA values (with transparency): rgba(0, 128, 128, 0.5)

transparent for no color

Example in Flask or Django Template:

css
.container {
background-color: #e0f7fa;
}

This can be used in an external stylesheet and linked to an HTML template in a

Flask/Django application for styling div or section elements.

Use Case in Full Stack Development:

In my internship, I used the background-color property to:

Highlight alert messages (e.g., success or error notifications).

Differentiate the navigation bar from the rest of the page.

Apply color themes dynamically in user dashboards.

Border Property in CSS

The border property is used to apply a boundary around an HTML element. It helps in
visually separating content, enclosing input fields, and creating structured layouts.

Shorthand Syntax:

selector {
border: [width] [style] [color];
}

Individual Border Properties:

border-width (e.g., 1px, 3px)

border-style (e.g., solid, dashed, dotted, double, none)

border-color (e.g., #000000, red)

Dept of BCA, SHREE VEDHA COLLEGE Page | 60

 Example:

.card {
border: 2px solid #009688;
border-radius: 10px; /* for rounded corners */
}

Use Case in Full Stack Development:

During my internship, I applied the border property to:

Style form input fields for better visibility.

Create card-style components for displaying user data.

Highlight buttons with colored borders for action prompts.

Visual Example in Project

HTML (Flask/Django Template):

html
<div class="profile-box">
Welcome, User!</div>

CSS:

css
.profile-box {
background-color: #fef3c7;
border: 3px dashed #f59e0b;
padding: 20px;
width: 300px;
}

This style was used to highlight user profile boxes on a dashboard developed during the
internship.

CSS Styling – Background Color and Border

Background Color in CSS

The background-color property in CSS is used to define the background color of HTML
elements. This property is fundamental in front-end web development and plays a crucial

Dept of BCA, SHREE VEDHA COLLEGE Page | 61

 role in enhancing user interface aesthetics and improving the user experience by visually
differentiating sections or elements.

Syntax:

selector {
background-color: value;
}

Accepted Value Formats:

Color names: red, blue, green

Hex codes: #FF5733, #00FF00

RGB values: rgb(255, 255, 0)

RGBA values (with transparency): rgba(0, 128, 128, 0.5)

transparent for no color

Example in Flask or Django Template:

.container {
background-color: #e0f7fa;
}

This can be used in an external stylesheet and linked to an HTML template in a Django
application for styling div or section elements.

Use Case in Full Stack Development:

In my internship, I used the background-color property to:

Highlight alert messages (e.g., success or error notifications).

Differentiate the navigation bar from the rest of the page.

Apply color themes dynamically in user dashboards.

Border Property in CSS

The border property is used to apply a boundary around an HTML element. It helps in
visually separating content, enclosing input fields, and creating structured layouts.

Dept of BCA, SHREE VEDHA COLLEGE Page | 62

 Shorthand Syntax:

selector {
border: [width] [style] [color];
}

Individual Border Properties:

border-width (e.g., 1px, 3px)

border-style (e.g., solid, dashed, dotted, double, none)

border-color (e.g., #000000, red)

Example:

.card {
border: 2px solid #009688;
border-radius: 10px; /* for rounded corners */
}

Use Case in Full Stack Development:

During my internship, I applied the border property to:

Style form input fields for better visibility.

Create card-style components for displaying user data.

Highlight buttons with colored borders for action prompts.

visual Example in Project

HTML (Django Template):

<div class="profile-box">
Welcome, User!</div>

CSS:

.profile-box {
background-color: #fef3c7;
border: 3px dashed #f59e0b;
Dept of BCA, SHREE VEDHA COLLEGE Page | 63
 padding: 20px;
width: 300px;
}

This style was used to highlight user profile boxes on a dashboard developed during the
internship.

Dept of BCA, SHREE VEDHA COLLEGE Page | 64

 CSS Styling: background-color and border Properties
1. Background-color Property

Definition:

The background-color property in CSS sets the background color of an element. It affects
the entire area of the element, including its padding and border, but not the margin.

Syntax:

css
selector {
background-color: value;
}

value: Can be a color name (red), HEX code (#ff0000), RGB (rgb(255, 0, 0)), RGBA
(rgba(255, 0, 0, 0.5)), HSL (hsl(0, 100%, 50%)), or HSLA (hsla(0, 100%, 50%, 0.5)).

Border Property

Definition:

The border property is a shorthand in CSS that sets the width, style, and color of an
element's border. It can be used to define borders on all sides of an element simultaneously.

Dept of BCA, SHREE VEDHA COLLEGE Page | 65

 Syntax:

selector {
border: [border-width] [border-style] [border-color];
}

border-width: Specifies the thickness of the border (e.g., 1px, 0.5em).

border-style: Defines the style of the border (solid, dashed, dotted, double, groove, ridge,
inset, outset, none).

border-color: Sets the color of the border.

Introduction to and Django Frameworks

What is a Web Framework?

A web framework is a software tool that provides a structured and reusable way to build
and deploy web applications. In Python, the two most popular web frameworks are Flask
and Django. Both help in handling backend functionalities like URL routing, request
handling, database operations, and rendering HTML templates.

Flask Framework

Definition:

Flask is a lightweight and minimalistic Python web framework. It follows the

microframework philosophy, meaning it comes with the basic tools needed to build a web
application but allows developers to add additional functionality using extensions as
required.

Key Features:

Minimal and flexible

Built-in development server and debugger

RESTful request dispatching

Jinja2 templating engine

Supports extensions (Flask-SQLAlchemy, Flask-Login, etc.)

Syntax Example:

Dept of BCA, SHREE VEDHA COLLEGE Page | 66

 python
from flask import Flask

app = Flask(__name__)
@app.route("/")def home():
return "Welcome to Flask"
if __name__ == "__main__":
app.run(debug=True)

Django Framework
Definition:

Django is a high-level Python web framework that promotes rapid development and clean,
pragmatic design. It follows the "batteries-included" philosophy, meaning it comes with a
wide range of features built-in, such as authentication, ORM (Object Relational Mapper),
admin panel, and more.

Key Features:

Built-in admin interface

Robust ORM system

Built-in authentication system

Secure against SQL injection, CSRF, and XSS

Scalable and production-ready

Syntax Example:

python
# views.pyfrom django.http import HttpResponse
def home(request):
return HttpResponse("Welcome to Django")
python
\# urls.pyfrom django.urls import pathfrom . import views

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

Setting Up Project Structure in Flask and Django

Flask Project Structure
Dept of BCA, SHREE VEDHA COLLEGE Page | 67
 Flask is flexible and allows developers to structure the project in a custom way. However, a
standard best-practice structure looks like this:

To Set Up:

Django Project Structure

Django provides a structured layout by default when you create a project using django-
admin.
Dept of BCA, SHREE VEDHA COLLEGE Page | 68
 HTML with Dynamic Content in Flask and Django
What is Dynamic Content?

Dynamic content refers to parts of a webpage that are generated on the server side using
data, instead of being hard-coded. In full stack development, this content is inserted into
HTML using template engines like Jinja2 (Flask) or Django Templates, based on values
passed from the backend.

Dept of BCA, SHREE VEDHA COLLEGE Page | 69

 HTML with Dynamic Content in Flask

Flask Setup:

Flask uses the Jinja2 templating engine.

HTML files are stored in the templates/ folder.

Example:

app.py (Flask Backend):

templates/index.html (HTML with dynamic content):

OUTPUT

HTML with Dynamic Content in Django

Dept of BCA, SHREE VEDHA COLLEGE Page | 70

 Django Setup:

Django uses its own templating language, similar to Jinja2.

HTML files are stored in the templates/ folder inside your app.

Example:

views.py (Django View):

templates/index.html:

Dept of BCA, SHREE VEDHA COLLEGE Page | 71

 Form Handling and Validation in Flask & Django
What is Form Handling?

Form handling is the process of:

Receiving user input through HTML forms.

Processing the data on the backend.

Validating the input to ensure correctness, security, and integrity

Form Handling in Flask

Flask uses HTML forms, and form data is accessed using request.form. For validation,
developers commonly use Flask-WTF (WTForms extension).

Basic Example (Manual Validation)

app.py

Dept of BCA, SHREE VEDHA COLLEGE Page | 72

 templates/login.html

Form Handling in Django

Django provides built-in support for form handling via forms.py, with automatic validation
and error rendering. Basic Example

forms.py

Dept of BCA, SHREE VEDHA COLLEGE Page | 73

 views.py

templates/login.html

Dept of BCA, SHREE VEDHA COLLEGE Page | 74

 Mini Project Deployment in Python Full Stack Development
What is Deployment?

Deployment is the process of making a web application live on the internet so users can
access it through a browser. After developing a project locally using Flask or Django, it
needs to be hosted on a cloud platform or web server for public access.

Flask Mini Project Deployment (Using Render)

Steps to Deploy on Render.com:

Step 1: Prepare Your Project

Ensure your Flask project has these files:

requirements.txt – List of packages

Procfile – Deployment instructions

run.py or main Python file

Example: Procfile

web: gunicorn run:app

requirements.txt

bash
Flask==2.2.2
gunicorn==20.1.0

Folder Structure

Push Code to GitHub

Dept of BCA, SHREE VEDHA COLLEGE Page | 75

 Step 3: Deploy on Render

Create account at render.com

Click "New Web Service"

Connect your GitHub repo

Select:

Build Command: pip install -r requirements.txt

Start Command: gunicorn run:app

Choose Python version and deploy!

Django Mini Project Deployment (Using Vercel or Railway)

Steps to Deploy on Railway.app (or similar):

Step 1: Prepare Project

Add requirements.txt

Add Procfile

Set ALLOWED_HOSTS = ['*'] in settings.py

Use gunicorn as your production server

Procfile

Dept of BCA, SHREE VEDHA COLLEGE Page | 76

 makefile
web: gunicorn myproject.wsgi

requirements.txt (sample)

bash
Django==4.0.0
gunicorn==20.1.0

Database Configuration (Optional)

If using PostgreSQL in production, use dj-database-url to configure environment variables.

Final Checklist Before Deployment

✔ Complete HTML/CSS files in templates and static

✔ Database (SQLite/PostgreSQL) configured
✔ Environment variables hidden using .env
✔ Project pushed to GitHub
✔ Platform-specific files (Procfile, requirements.txt) ready

Steps to Create an Account on PythonAnywhere:

Go to PythonAnywhere Website:

Open a browser and navigate to https://www.pythonanywhere.com/.

Sign Up:

Dept of BCA, SHREE VEDHA COLLEGE Page | 77

 On the homepage, you will see an option to Sign up. Click on it to create an account.

Choose a Plan:

PythonAnywhere offers different plans (Free, Hacker, and Web Developer). Select the Free
Plan if you want to use it for small projects. You can upgrade later if needed.

The Free plan gives you access to a single web app and limited resources.

Fill in the Sign-Up Form:

Username: Choose a unique username.

Email: Provide a valid email address (you’ll get verification emails).

Password: Set a strong password.

Complete Captcha:

PythonAnywhere may ask you to complete a CAPTCHA to verify you're not a robot.

Verify Your Email Address:

PythonAnywhere will send a verification email to the address you provided.

Open your inbox and click the verification link to confirm your email.

Login to PythonAnywhere:

After email verification, you can log in to PythonAnywhere with the credentials you
created.

Setting Up a Web App on PythonAnywhere:

Once your account is set up, you can deploy a simple Python application (Flask or Django).
Here's how you can get started:

Go to the "Web" Tab:

After logging in, navigate to the "Web" tab in the top menu.

Create a New Web App:

Dept of BCA, SHREE VEDHA COLLEGE Page | 78

 Click on "Add a new web app".

Choose the type of web app: Flask, Django, or another type.

Select the version of Python you want to use (Python 3.x).

Upload Your Files:

You can upload your Python files (e.g., app.py for Flask or manage.py for Django) and
static files through the Files section.

Configure Web App:

In the Web tab, you can configure your app’s settings, including:

Virtual Environment: Set up a virtual environment to manage your dependencies.

Web Framework: Choose whether it’s Flask, Django, or another framework.

Static Files & Media: Set up static file and media directories.

Run the Web App:

After setting it up, you can start the web app, and PythonAnywhere will assign you a
subdomain (e.g., yourusername.pythonanywhere.com).

Steps to Create a Repository on GitHub

1. Sign In to GitHub:

Open your browser and go to https://github.com.

If you already have a GitHub account, click on Sign in in the top right corner and enter
your credentials.

If you don’t have an account, click Sign up to create a new account.

2. Go to Your Profile:

After logging in, click on your profile icon in the top right corner and select Your
repositories.

3. Create a New Repository:

Dept of BCA, SHREE VEDHA COLLEGE Page | 79
 On the repositories page, click the New button (usually located on the left side of the screen
under "Repositories").

4. Fill in Repository Details:

Repository Name: Choose a name for your repository (e.g., my-flask-project or my-
django-app).

Description (Optional): Add a short description of your project (e.g., "A simple Flask web
app").

Visibility: Choose between:

Public: Anyone can see this repository.

Private: Only you and people you specify can see the repository.

Initialize with README: Check this box if you want to add a README file to the
repository automatically (which is usually recommended for documentation).

5. Create the Repository:

After filling in the details, click the Create repository button.

Set Up the Local Repository and Push Code (Command Line)

Once the repository is created on GitHub, you can push your local code to the repository.

Step 1: Initialize a Git Repository Locally

If you haven't already, go to your project folder and initialize Git:

bash
cd my-project-folder
git init

Step 2: Add Files to the Repository

Add your project files to the Git repository:

bash
git add .

Step 3: Commit Your Changes

Dept of BCA, SHREE VEDHA COLLEGE Page | 80

 Commit the changes to your local Git repository:

bash
git commit -m "Initial commit"

Step 4: Link to GitHub Repository

Get the remote repository URL from GitHub. It will look something like this:

perl
https://github.com/yourusername/my-flask-project.git

Add the remote repository:

bash
git remote add origin https://github.com/yourusername/my-flask-project.git

Step 5: Push Your Code to GitHub

Push your local changes to GitHub:

bash
git push -u origin master

For future pushes, you can simply use:

bash
git push

Steps to Create a Repository Path URL

Create a Repository on GitHub: If you haven’t already created a repository on GitHub,

follow the steps I provided earlier to create one.

Get the Repository URL: Once the repository is created, you’ll need the URL of the
repository. Here’s how to get it:

Go to the repository page on GitHub.

On the top right of the page, you’ll see a Code button (green).

Click on it, and you will see the URL in either HTTPS or SSH format.

Repository URL Format:

HTTPS URL:

Dept of BCA, SHREE VEDHA COLLEGE Page | 81

 arduino
https://github.com/username/repository-name.git

SSH URL (if using SSH keys):

scss
[email protected]:username/repository-name.git

Replace username with your GitHub username.

Replace repository-name with the name of your repository.

Example:

If your GitHub username is Yashwanth and the repository name is my-flask-project, the
repository URL would be:

perl
https://github.com/Yashwanth/my-flask-project.git

How to Use This URL Locally:

Once you have the URL, you can link your local project to the GitHub repository by
running the following command in your project folder:

bash
git remote add origin https://github.com/username/repository-name.git

Then, to push your local code to GitHub, you can use:

bash
git push -u origin master

A .gitignore file is used to tell Git which files or directories it should ignore when you
commit code. It’s essential for preventing sensitive files, build files, or system-specific files
(like IDE configurations) from being tracked in your Git repository.

Steps to Create a .gitignore File

Create the .gitignore File:
Dept of BCA, SHREE VEDHA COLLEGE Page | 82
 In the root directory of your project, create a new file named .gitignore (without any file
extension).

You can create it using a text editor or via the terminal with this command:

bash

touch .gitignore

Edit the .gitignore File:

Open the .gitignore file in your preferred text editor (e.g., VS Code, Sublime, Notepad++)
and add the files and folders you want Git to ignore.

Common Entries for .gitignore (for Python projects):

Here's a basic .gitignore template that works for Python projects, including Flask or Django
projects:

# Python cache files

__pycache__/

*.py[cod]

# Virtual Environment

venv/

.env/

# IDE files

.vscode/

.idea/

# Operating system files

.DS_Store

Thumbs.db

# Logs

Dept of BCA, SHREE VEDHA COLLEGE Page | 83

 *.log

# Databases

*.sqlite3

*.db

# Python wheel files

*.whl

# Distribution directories

build/

dist/

Steps to Add .gitignore to Git

Add .gitignore to Git: If the .gitignore file is already created, use the following command
to add it to your Git repository

bash

git add .gitignore

Commit the .gitignore File: After adding .gitignore, commit it to your Git repository:

bash
git commit -m "Add .gitignore file”

Push to GitHub: Finally, push your changes (including the .gitignore file) to GitHub:

Bash

git push

Steps to Configure Environment in PythonAnywhere

1. Log in to PythonAnywhere:

Go to PythonAnywhere and sign in to your account.

2. Create or Open Your Web App:

After logging in, go to the "Web" tab at the top of the page.
Dept of BCA, SHREE VEDHA COLLEGE Page | 84
 If you already have a web app set up, click on it to open its settings.

If not, click "Add a new web app" to create a new one and choose your web framework
(Flask, Django, etc.).

3. Create a Virtual Environment:

Go to the "Consoles" tab.

Start a new Bash console by clicking "Bash" under the Consoles section.

Once the Bash console is open, use the following command to create a virtual environment:

bash
python3 -m venv /home/yourusername/.virtualenvs/myen

Replace yourusername with your PythonAnywhere username.

Replace myenv with the desired name for your virtual environment.

4. Activate the Virtual Environment:

After creating the virtual environment, you need to activate it. Run the following command:

bash
source /home/yourusername/.virtualenvs/myenv/bin/activate

5. Install Dependencies:

Once the virtual environment is activated, you can install the required dependencies for
your project (e.g., Flask, Django, etc.). Use the following command to install packages:

bash
pip install -r /path/to/your/project/requirements.txt

Replace /path/to/your/project/requirements.txt with the actual path to your requirements.txt

file.

Alternatively, you can install packages manually:

bash
pip install flask # or any other dependency

6. Link Virtual Environment to Your Web App:

Dept of BCA, SHREE VEDHA COLLEGE Page | 85

 Go to the "Web" tab and open the settings for your web app.

Under the "Virtualenv" section, you’ll see a field for Virtualenv. Here, enter the path to
the virtual environment you created earlier:

swift
/home/yourusername/.virtualenvs/myenv

Click "Save" at the bottom to apply the changes.

7. Configure Static Files (Optional):

If your web app uses static files (images, CSS, JavaScript), make sure to configure the
static files and media files sections in the "Web" tab. You can specify the directory path
for static files and media files.

8. Reload Your Web App:

After configuring the environment and setting up the dependencies, go back to the "Web"
tab.

Click "Reload" to restart your web app with the new virtual environment and settings.

Verify the Configuration:

After reloading your web app, visit your app’s URL (e.g.,
yourusername.pythonanywhere.com).

Ensure that the app is working correctly, and the environment has been set up properly.

1. Create a Folder and Clone the Project from GitHub

First, log in to your PythonAnywhere account and open a Bash console from the
"Consoles" tab.

Create a Folder

bash
mkdir myprojectcd myproject

Clone the GitHub Repository

Replace the URL with your own GitHub project link:

bash
Dept of BCA, SHREE VEDHA COLLEGE Page | 86
 git clone https://github.com/yourusername/your-repo-name.gitcd your-repo-name

2. Create a Virtual Environment

You should always create a virtual environment to isolate dependencies for your project.

Create the Virtual Environment

bash
python3 -m venv ~/.virtualenvs/myenv

Here:

~/.virtualenvs/myenv is the path to your virtual environment.

You can name myenv anything (e.g., flaskenv, djangoenv).

3. Activate the Virtual Environment

bash
source ~/.virtualenvs/myenv/bin/activate

When it's activated, your terminal prompt will show the virtual environment name in
parentheses like:

ruby
(myenv) yourusername@pythonanywhere:~/myproject/your-repo-name$

4. Install Required Libraries

If you have a requirements.txt file in the cloned project folder:

bash
pip install -r requirements.txt

If not, install libraries manually:

bash
pip install flask
pip install django
pip install gunicorn

5. Link Virtual Environment to Web App

Go to the "Web" tab on PythonAnywhere.

Dept of BCA, SHREE VEDHA COLLEGE Page | 87

 Scroll to Virtualenv section and paste:

Swift
/home/yourusername/.virtualenvs/myenv

Click Save and Reload your app.

Django Project – requirements.txt

txt
Django==4.2.6
gunicorn==21.2.0

If you use a database like PostgreSQL or additional packages, include them:

txt
psycopg2-binary==2.9.9

dj-database-url==2.1.0
python-decouple==3.8

How to Use

After creating the file:

bash
pip install -r requirements.txt

This will automatically install all required packages into your virtual environment.

Dept of BCA, SHREE VEDHA COLLEGE Page | 88

 1. Go to the "Web" Tab

Log in to https://www.pythonanywhere.com

Click the "Web" tab at the top.

2. Click "Add a New Web App"

Click the "Add a new web app" button.

Choose your domain (e.g., yourusername.pythonanywhere.com) and click Next.

3. Choose Framework

Select:

Flask → if your project is in Flask.

Django → if your project is in Django.

Or Manual configuration → if you're deploying something custom.

Choose the correct Python version (the one you used in your virtual environment)

Dept of BCA, SHREE VEDHA COLLEGE Page | 89

 4. Set Up Your Source Code Path

After setup, go back to the Web tab.

Find the section named "Source code".

Set the working directory to your project folder path, e.g.:

swift
/home/yourusername/myproject/your-repo-name

5. Set the WSGI File

Under the "WSGI configuration file" section, click the path shown to open the .py config
file.

Edit it to point to your Flask or Django app.

For Django:

Change:

python
CopyEdit
os.environ['DJANGO_SETTINGS_MODULE'] = 'yourproject.settings'

Replace yourproject with the Django project folder name.

6. Link Virtual Environment

In the "Virtualenv" section:

Paste your virtual environment path (e.g.):

swift
/home/yourusername/.virtualenvs/myenv

Dept of BCA, SHREE VEDHA COLLEGE Page | 90

 7. Reload Your Web App

Scroll to the top or bottom and click "Reload" to apply all changes.

8. Visit Your Web Page

Open your browser and go to:

arduino
CopyEdit
https://yourusername.pythonanywhere.com

You should see your live website now!

Step 1: Open a Bash Console

Go to the "Consoles" tab on PythonAnywhere.

Open a Bash console.

Step 2: Activate Your Virtual Environment

bash

Replace myenv with your actual virtual environment name.

Step 3: Navigate to Your Django Project Folder

bash

Dept of BCA, SHREE VEDHA COLLEGE Page | 91

 Replace:

yourusername with your PythonAnywhere username

yourprojectfolder with the folder where your manage.py file is located.

Step 4: Run Migrations

bash

This applies any changes to your database models.

Step 5: Collect Static Files

Before running this command, make sure your settings.py has the correct STATIC_ROOT,
like:

Then run:

Bash

It will collect all static files into the STATIC_ROOT directory (like CSS, JS, images).

Step 6: Configure Static Files on Web Tab

Go to the "Web" tab and find the Static files section:

URL: /static/

Directory: /home/yourusername/yourprojectfolder/staticfiles

Dept of BCA, SHREE VEDHA COLLEGE Page | 92

 Then click Reload at the top.

Why You Need to Reload

When you:

Make changes to your Python code, HTML templates, or static files

Install new Python packages

Modify environment variables or settings

Run migrate or collectstatic

Your app on PythonAnywhere doesn’t auto-update. You need to manually tell

PythonAnywhere to reload the app.

Step-by-Step Guide to Reload Your App

Step 1: Log in to PythonAnywhere

Go to: https://www.pythonanywhere.com

Log in with your account credentials.

Step 2: Open the "Web" Tab

After logging in, click the "Web" tab at the top of the dashboard.

Step 3: Select Your Web App

You’ll see your web app listed, like this:

Click on your web app name to open its configuration page

Dept of BCA, SHREE VEDHA COLLEGE Page | 93

 Step 4: Scroll to Find the "Reload" Button

On the web app configuration page:

Look at the top or scroll to the bottom.

You’ll find a blue button labeled "Reload <yourdomain>".

Click the Reload button.

Once clicked:

PythonAnywhere restarts your web server.

It re-applies the latest settings, code, static files, and database migrations.

Sample View:

Imagine you see this on the Web tab:

Click the Reload button (shown leftmost).

After Reloading

Now you can:

Open a new browser tab

Go to:

Check:

Are your static files (CSS, JS, images) loading?

Are changes in your HTML templates or views showing?

Are new features (migrated models or database changes) working?

Dept of BCA, SHREE VEDHA COLLEGE Page | 94

Dept of BCA, SHREE VEDHA COLLEGE Page | 95
 BIBLIOGRAPHY

Books
1. Object Oriented Programming Using JAVA - Srikanth.S

2.Web Programming – Srikanth S

Sources from the Internet

1. https://www.w3schools.com/python/

2. https://flask.palletsprojects.com/

3. https://docs.djangoproject.com/

4.https://developer.mozilla.org/en-US/docs/Web

5.https://www.w3schools.com/html/

6.https://www.w3schools.com/css/

7. https://www.w3schools.com/js/

Dept of BCA, SHREE VEDHA COLLEGE Page | 96