Web Programming with Python and Java Script

S Title Signature
.No
1 To understand the Execution and Compilation of
program.
2 HTML Practice using HTML forms and other
elements.
3 CSS Practice using Inline, External & Internal CSS.

4 Bootstrap Practice using login page design.

5 Java Scrip Practical using DOM manipulation.

6 Python Installation & Python Core Programs Practice

 Prime Number
 Fibonacci Series
 Patter Printing
7 Different Python Web Framework like: Django and
Flask.
8 SQL Installation & Query Command Implementation
using MS SQL like:
 DDL
 DML
 DCL
9 Testing Concepts Manual and Automation Testing,
Test Id, Test Case, Test Description understanding.
10 GIT Commands Execution and GUI & CLI
understanding.
 PRACTICAL- 1

AIM: To understand the Execution and Compilation of program.

 Python program Execution:

The Python interpreter processed the script in a sequential manner. Then the
code is compiled into a form of instruction set called the byte code. Byte code
is a low level language. It is an intermediate, machine independent code
which optimizes the process of code execution.
Python Programming:
o It is very popular and open source programming language.
o It is easy to learn.
o Can be used on a server to create web applications:
Software development.
Mathematics
System scripting
o Simple and effective approach to oops.

 .NET Program Execution

 o .Net Application consists of steps:
Compilation
Execution
o CLR is a runtime environment for .NET application
o CLR not only for portability but also for garbage collection.
o In .NET we don’t have the problem of memory execution because CLR
handling this by their own.
o CLR is going to manage IL called management code.

JIT( Just-In-Time ):

 It is to transform bytecodes into native machine code at runtime, the Just-In-Time

(JIT) compiler, a part of the runtime environment, improves the performance of
Java applications.
 Classes, the building blocks of Java applications, include platform-neutral
bytecodes that a JVM can be a variety of computer architectures.
 INTERPRETER v/s COMPILER

COMPILER INTERPRETER
Steps of Programming: Steps of Programming:
 Program Creation.  Program Creation.
 Analysis of language by the  Linking of files or generation of
compiler and throws errors in case Machine Code is not required by
of any incorrect statement. Interpreter.
 In case of no error, the Compiler  Execution of source statements
converts the source code to one by one.
Machine Code.
 Linking of various code files into a
runnable program.
 Finally runs a Program

The compiler saves the Machine The Interpreter does not save the
Language in form of Machine Code Machine Language.
on disks.
The compiler generates an output in The interpreter does not generate any
the form of (.exe). output.
Errors are displayed in Compiler after Errors are displayed in every single
Compiling together at the current line.
time.
Object code is permanently saved for No object code is saved for future
future use. use.
C, C++, C#, etc are programming Python, Ruby, Perl,
languages that are compiler-based SNOBOL, MATLAB, etc are
programming languages that are
interpreter-based

 JAVA Program Execution

  JVM can be used to interpret bytecode.

 This byte code can be taken to any platform for execution

 Hence java is a platform independent.

Compilation:
A special application called a compiler, executes our Java program on what is
known as a virtual Java machine (JVM).

The compiler transforms source code into so-called JVM bytecode, or machine
code read by JVM. In addition, the compiler should check the code for lexical and
semantic issues and optimise it.

Interpretation:
Interpretation is the process of analyzing machine code and running it. The
interpreter is a unique program that does these tasks.
JVM (Java Virtual Machine)

 JVM stands for Java Virtual Machine. It is software that provides a runtime
environment to execute Java code or other programming languages that target the
JVM.
 The JVM is responsible for interpreting and executing Java bytecode, which is a
compiled version of the Java source code.
 Some popular JVM languages include Java, Kotlin, Scala, and Groovy. The JVM is
widely used in enterprise software development, web development, and mobile app
development.
 PRACTICLE- 2

AIM: HTML Practice using HTML forms and other elements.

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

 HTML Page Structure


  Structure explain:
 The <!DOCTYPE html> declaration defines that this document is an HTML5 document


 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?

 An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

 The HTML element is everything from the start tag to the end tag:
 <h1>My First Heading</h1>
 <p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Note: Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end tag!

HTML Attributes
  All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to:

Example
<a href="https://www.webprogramins.com">Visit web programing</a>

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the
path to the image to be displayed:

Example
<img src="img_girl.jpg">

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width
and height of the image (in pixels):

Example
<img src="img_girl.jpg" width="500" height="600">

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the
image for some reason cannot be displayed. This can be due to a slow connection, or an
error in the src attribute, or if the user uses a screen reader.

Example
<img src="img_girl.jpg" alt="Girl with a jacket">
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the language of
the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

HTML Paragraphs
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space
(a margin) before and after a paragraph.

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
 Practical-3

Aim: CSS Practice using Inline, External & Internal CSS.

 What is CSS?
 CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the
presentation and formatting of a document written in HTML or XML. CSS is used to control
the visual appearance of web pages and user interfaces in various applications.
 With CSS, you can define styles for elements such as text, images, backgrounds, borders,
spacing, and layout. It allows you to control the colors, fonts, sizes, positioning, and other
visual aspects of the elements on a web page. By separating the content (HTML) from its
presentation (CSS), web developers can create consistent styles across multiple pages and
easily make changes to the appearance of a website.
 CSS uses a selector mechanism to target specific elements in an HTML document and apply
styles to them. Selectors can target elements by their tag name, class, ID, or other
attributes.CSS rules consist of a selector and a declaration block enclosed in curly braces.
Within the declaration block, you define the styles using property-value pairs.
 For example, the following CSS code sets the color and font size for all paragraphs in an
HTML document:

Applying CSS to HTML

First, let's examine three methods of applying CSS to a document: with an external stylesheet, with an
internal stylesheet, and with inline styles.
External stylesheet

An external stylesheet contains CSS in a separate file with a .css extension. This is the most
common and useful method of bringing CSS to a document. You can link a single CSS file to
multiple web pages, styling all of them with the same CSS stylesheet. In the Getting started with
CSS, we linked an external stylesheet to our web page.

You reference an external CSS stylesheet from an HTML <link> element:

The CSS stylesheet file might look like this:

Internal stylesheet

An internal stylesheet resides within an HTML document. To create an internal stylesheet, you
place CSS inside a <style> element contained inside the HTML <head>.

The HTML for an internal stylesheet might look like this:

Inline styles

Inline styles are CSS declarations that affect a single HTML element, contained within
a style attribute. The implementation of an inline style in an HTML document might look like this:

Avoid using CSS in this way, when possible. It is the opposite of a best practice. First, it is the least
efficient implementation of CSS for maintenance. One styling change might require multiple edits
within a single web page. Second, inline CSS also mixes (CSS) presentational code with HTML and
content, making everything more difficult to read and understand. Separating code and content
makes maintenance easier for all who work on the website.

There are a few circumstances where inline styles are more common. You might have to resort to
using inline styles if your working environment is very restrictive. For example, perhaps your CMS
only allows you to edit the HTML body. You may also see a lot of inline styles in HTML email to
achieve compatibility with as many email clients as possible.
Properties and values

At its most basic level, CSS consists of two components:

 Properties: These are human-readable identifiers that indicate which stylistic features
youwant to modify. For example, font-size, width, background-color.
 Values: Each property is assigned a value. This value indicates how to style the property. 

The example below highlights a single property and value. The property name is color and the value
is blue.

When a property is paired with a value, this pairing is called a CSS declaration. CSS declarations
are found within CSS Declaration Blocks. In the example below, highlighting identifies the CSS
declaration block.

Finally, CSS declaration blocks are paired with selectors to produce CSS rulesets (or CSS rules).
The example below contains two rules: one for the h1 selector and one for the p selector. The
colored highlighting identifies the h1 rule.
Setting CSS properties to specific values is the primary way of defining layout and styling for a
document. The CSS engine calculates which declarations apply to every single element of a page.

CSS properties and values are case-insensitive. The property and value in a property-value pair are
separated by a colon (:).

Web Page without using CSS:

Web Page using CSS:
 PRACTICLE-4

AIM:- Bootstrap Practice using login page design.

What is Bootstrap?
 Bootstrap is a free front-end framework for faster and easier web development
 Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as
optional JavaScript plugins
 Bootstrap also gives you the ability to easily create responsive designs

Bootstrap History
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an
open source product in August 2011 on GitHub.

In June 2014 Bootstrap was the No.1 project on GitHub!

Why Use Bootstrap?

Advantages of Bootstrap:

 Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
Bootstrap
 Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and
desktops
 Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core
framework
 Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome,
Firefox, Internet Explorer, Edge, Safari, and Opera)

Bootstrap Versions
This tutorial follows Bootstrap 3, which was released in 2013. However, we also cover
newer versions; Bootstrap 4 (released 2018) and Bootstrap 5 (released 2021).
 Bootstrap 5 is the newest version of Bootstrap; with new components, faster stylesheets,
more responsiveness etc. It supports the latest, stable releases of all major browsers and
platforms. However, Internet Explorer 11 and down is not supported.

Bootstrap Grid System

Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns
together to create wider columns:

span span span span span span span span span 1 span 1 span span
1 1 1 1 1 1 1 1 1 1

span 4 span 4 span 4

span 4 span 8

span 6 span 6

span 12

Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:

<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
 Bootstrap Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table:

Example

Firstname Lastname Email

John Doe [email protected]

Mary Moe [email protected]

July Dooley [email protected]

Bootstrap Image Shapes

Rounded Corners
The .img-rounded class adds rounded corners to an image (IE8 does not support rounded
corners):

Example
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre">

Circle
The .img-circle class shapes the image to a circle (IE8 does not support rounded corners):

Example
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre">
Thumbnail
The .img-thumbnail class shapes the image to a thumbnail:

Example
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Creating a Page Header

A page header is like a section divider.

The .page-header class adds a horizontal line under the heading (+ adds some extra space
around the element):

Example Page Header

Use a <div> element with class .page-header to create a page header:

Example
<div class="page-header">
<h1>Example Page Header</h1>
</div>

Alerts
Bootstrap provides an easy way to create predefined alert messages:

×Success! This alert box indicates a successful or positive action.

×Info! This alert box indicates a neutral informative change or action.

×Warning! This alert box indicates a warning that might need attention.

×Danger! This alert box indicates a dangerous or potentially negative action.

Alerts are created with the .alert class, followed by one of the four contextual
classes .alert-success, .alert-info, .alert-warning or .alert-danger:

Example

<div class="alert alert-success">

<strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">

 <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">

<strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">

<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
 PRACTICLE-5

AIM: Java script using DOM manipulation.

JAVASCRIPT:-

JavaScript is the world's most popular programming language.

JavaScript is the programming language of the Web.

JavaScript is easy to learn.

This tutorial will teach you JavaScript from basic to advanced.

JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById().

The example below "finds" an HTML element (with id="demo"), and changes the element
content (innerHTML) to "Hello JavaScript":

Example
document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript Can Change HTML Attribute Values

In this example JavaScript changes the value of the src (source) attribute of an <img> tag:

The Light Bulb

Turn on the light Turn off the light

JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute:

Example
document.getElementById("demo").style.fontSize = "35px";

JavaScript Where To
The <script> Tag

In HTML, JavaScript code is inserted between <script> and </script> tags.

Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when "called" for.

For example, a function can be called when an event occurs, like when the user clicks a
button.

JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.

Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page.

The function is invoked (called) when a button is clicked:

Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an HTML page.

The function is invoked (called) when a button is clicked:

Example
<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

External JavaScript
Scripts can also be placed in external files:

External file: myScript.js

function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
External scripts are practical when the same code is used in many different web pages.

JavaScript files have the file extension .js.

To use an external script, put the name of the script file in the src (source) attribute of
a <script> tag:

Example
<script src="myScript.js"></script>

JavaScript Display Possibilities

JavaScript can "display" data in different ways:

 Writing into an HTML element, using innerHTML.

 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().

Using innerHTML

To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML
content:

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

Using window.alert()

You can use an alert box to display data:

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

JavaScript Values
The JavaScript syntax defines two types of values:

 Fixed values
 Variable values

Fixed values are called Literals.

Variable values are called Variables.

JavaScript Literals

The two most important syntax rules for fixed values are:

1. Numbers are written with or without decimals:

10.50

1001

2. Strings are text, written within double or single quotes:

"John Doe"

'John Doe'

JavaScript Variables

In a programming language, variables are used to store data values.

JavaScript uses the keywords var, let and const to declare variables.

An equal sign is used to assign values to variables.

In this example, x is defined as a variable. Then, x is assigned (given) the value 6:

let x;
x = 6;

JavaScript Operators

JavaScript uses arithmetic operators ( + - * / ) to compute values:

(5 + 6) * 10

JavaScript uses an assignment operator ( = ) to assign values to variables:

let x, y;
x = 5;
y = 6;

JavaScript Expressions

An expression is a combination of values, variables, and operators, which computes to a

value.

The computation is called an evaluation.

For example, 5 * 10 evaluates to 50:

5 * 10

Expressions can also contain variable values:

x * 10

The values can be of various types, such as numbers and strings.

For example, "John" + " " + "Doe", evaluates to "John Doe":

"John" + " " + "Doe"

JavaScript Keywords

JavaScript keywords are used to identify actions to be performed.

The let keyword tells the browser to create variables:

let x, y;
x = 5 + 6;
y = x * 10;

The var keyword also tells the browser to create variables:

var x, y;
x = 5 + 6;
y = x * 10;

JavaScript Comments

Not all JavaScript statements are "executed".

Code after double slashes // or between /* and */ is treated as a comment.

Comments are ignored, and will not be executed:

let x = 5; // I will be executed

// x = 6; I will NOT be executed

JavaScript Identifiers / Names

Identifiers are JavaScript names.

Identifiers are used to name variables and keywords, and functions.

The rules for legal names are the same in most programming languages.

A JavaScript name must begin with:

 A letter (A-Z or a-z)

 A dollar sign ($)
 Or an underscore (_)

Subsequent characters may be letters, digits, underscores, or dollar signs.

JavaScript is Case Sensitive

All JavaScript identifiers are case sensitive.

The variables lastName and lastname, are two different variables:

let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
 Practical-6
Aim: Python Installation & Python Core Programs
Practice:
 Fibonacci series
 Prime numbers
 Pattern printing

How to Install Python on Windows

There are three installation methods on Windows:

1. The Microsoft Store

2. The full installer
3. Windows Subsystem for Linux

In this section, you’ll learn how to check which version of Python, if any, is installed on
your Windows computer. You’ll also learn which of the three installation methods you
should use. For a more comprehensive guide, check out Your Python Coding Environment on
Windows:

How to Check Your Python Version on Windows

To check if you already have Python on your Windows machine, first open a command-line application,
such as PowerShell.

Tip: Here’s how you open PowerShell:

1. Press the Win key.

2. Type PowerShell.
3. Press Enter .

Alternatively, you can right-click the Start button and select Windows PowerShell or Windows PowerShell
(Admin).
You can also use cmd.exe or Windows Terminal.
Note: To learn more about your options for the Windows terminal, check out Using the Terminal on
Windows.
With the command line open, type in the following command and press Enter :

C:\> python --version

Python 3.8.4
Using the --version switch will show you the version that’s installed. Alternatively, you can use the -
V switch:

C:\> python -V
Python 3.8.4
In either case, if you see a version less than 3.8.4, which was the most recent version at the time of
writing, then you’ll want to upgrade your installation.

Note: If you don’t have a version of Python on your system, then both of the above commands will launch
the Microsoft Store and redirect you to the Python application page. You’ll see how to complete the
installation from the Microsoft Store in the next section.
If you’re interested in where the installation is located, then you can use the where.exe command
in cmd.exe or PowerShell:

C:\> where.exe python

C:\Users\mertz\AppData\Local\Programs\Python\Python37-32\python.exe
Note that the where.exe command will work only if Python has been installed for your user account.

What Your Options Are

As mentioned earlier, there are three ways to install the official Python distribution on Windows:

1. Microsoft Store package: The most straightforward installation method on Windows involves
installing from the Microsoft Store app. This is recommended for beginner Python users looking
for an easy-to-set-up interactive experience.
2. Full Installer: This approach involves downloading Python directly from the Python.org website.
This is recommended for intermediate and advanced developers who need more control during the
setup process.
3. Windows Subsystem for Linux (WSL): The WSL allows you to run a Linux environment
directly in Windows. You can learn how to enable the WSL by reading the Windows Subsystem
for Linux Installation Guide for Windows 10.

In this section, we’ll focus on only the first two options, which are the most popular installation methods
in a Windows environment.

If you want to install in the WSL, then you can read the Linux section of this tutorial after you’ve installed
the Linux distribution of your choice.

Note: You can also complete the installation on Windows using alternative distributions, such
as Anaconda, but this tutorial covers only official distributions.
Anaconda is a popular platform for doing scientific computing and data science with Python. To learn how
to install Anaconda on Windows, check out Setting Up Python for Machine Learning on Windows.

Fibonacci series:
1. a series of numbers in which each number ( Fibonacci number ) is the sum of the
two preceding numbers. The simplest is the series 1, 1, 2, 3, 5, 8, etc.
2. The first two terms are 0 and 1. All other terms are obtained by adding the preceding two terms. This
means to say the nth term is the sum of (n-1)th and (n-2)th term.

Program:
nterms = int(input("How many terms? "))
# first two terms
n1, n2 = 0, 1
count = 0
# check if the number of terms is valid
if nterms <= 0:
print("Please enter a positive integer")
# if there is only one term, return n1
elif nterms == 1:
print("Fibonacci sequence upto",nterms,":")
print(n1)
# generate fibonacci sequence
else:
print("Fibonacci sequence:")
while count < nterms:
print(n1)
nth = n1 + n2
# update values
n1 = n2
n2 = nth
count += 1
Output:
How many terms? 10
Fibonacci sequence:
0 1 1 2 3 5 8 13 21 34

Prime Numbers:
Prime numbers are numbers that have only 2 factors: 1 and themselves. For example, the first 5
prime numbers are 2, 3, 5, 7, and 11.

Program:
# Program to check if a number is prime or not
 num = 29
# To take input from the user
#num = int(input("Enter a number: "))
# define a flag variable
flag = False
if num == 1:
print(num, "is not a prime number")
elif num > 1:
# check for factors
for i in range(2, num):
if (num % i) == 0:
# if factor is found, set flag to True
flag = True
# break out of loop
break
# check if flag is True
if flag:
print(num, "is not a prime number")
else:
print(num, "is a prime number")

Output:
29 is a prime number.

Pattern Printing:
 Pattern 1
rows = int(input("Enter number of rows: "))
for i in range(rows):
for j in range(i+1):
print("* ", end="")
print("\n")

Output:
Enter number of rows: 3
*
**
***
 Pattern 2
rows = int(input("Enter number of rows: "))
for i in range(rows):
for j in range(i+1):
print(j+1, end=" ")
print("\n")

Output:
 Enter number of rows: 3
1
12
123

 Pattern 3
rows = int(input("Enter number of rows: "))
ascii_value = 65
for i in range(rows):
for j in range(i+1):
alphabet = chr(ascii_value)
print(alphabet, end=" ")
ascii_value += 1
print("\n")

Output:
Enter number of rows: 3
A
BB
CCC

 Pattern 4
rows = int(input("Enter number of rows: "))
for i in range(rows, 0, -1):
for j in range(0, i):
print("* ", end=" ")
print("\n")

Output:
Enter number of rows: 3
* * *
* *
*

 Pattern 5
rows = int(input("Enter number of rows: "))
for i in range(rows, 0, -1):
for j in range(1, i+1):
print(j, end=" ")
print("\n")

Output:
Enter number of rows: 3
123

12
1
 PRACTICLE-7
AIM: Different Python Web framework like: Django and Flask
Django Introduction and Installation

What is Django?
Django is a Python-based web framework which allows you to quickly create web
application without all of the installation or dependency problems that you normally
will find with other frameworks.
When you’re building a website, you always need a similar set of components: a way
to handle user authentication (signing up, signing in, signing out), a management
panel for your website, forms, a way to upload files, etc. Django gives you ready-
made components to use.
Why Django?

1. It’s very easy to switch database in Django framework.

2. It has built-in admin interface which makes easy to work with it.
3. Django is fully functional framework that requires nothing else.
4. It has thousands of additional packages available.
5. It is very scalable.

Popularity of Django
Django is used in many popular sites like as: Disqus, Instagram, Knight Foundation,
MacArthur Foundation, Mozilla, National Geographic etc. There are more than 5k
online sites based on the Django framework. ( Source )
Sites like Hot Frameworks assess the popularity of a framework by counting the
number of GitHub projects and StackOverflow questions for each platform, here
Django is in 6th position. Web frameworks often refer to themselves as “opinionated”
or “un-opinionated” based on opinions about the right way to handle any particular
task. Django is somewhat opinionated, hence delivers the in both worlds( opinionated
& un-opinionated ).
Features of Django
Versatility of Django
Django can build almost any type of website. It can also work with any client-side
framework and can deliver content in any format such as HTML, JSON, XML etc.
Some sites which can be built using Django are wikis, social networks, new sites etc.
Security
Since Django framework is made for making web development easy, it has been
engineered in such a way that it automatically do the right things to protect the
website. For example, In the Django framework instead of putting a password in
cookies, the hashed password is stored in it so that it can’t be fetched easily by
hackers.

Scalability
Django web nodes have no stored state, they scale horizontally – just fire up more of
them when you need them. Being able to do this is the essence of good scalability.
Instagram and Disqus are two Django based products that have millions of active
users, this is taken as an example of the scalability of Django.

Portability
All the codes of the Django framework are written in Python, which runs on many
platforms. Which leads to run Django too in many platforms such as Linux, Windows
and Mac OS.

Installation of Django

 Install
python3 if not installed in your system ( according to configuration of your
system and OS) from here . Try to download the latest version of python it’s
python 3.11.0 this time.

Note- Installation of Django in Linux and Mac is similar, here I am showing it

in windows for Linux and mac just open terminal in place of command prompt
and go through the following commands.

 Install pip- Open command prompt and enter following command-

python -m pip install -U pip
 Install virtual environment- Enter following command in cmd-
pip install virtualenv

 Set Virtual environment- Setting up the virtual environment will allow you to edit
the dependency which generally your system wouldn’t allow.
Follow these steps to set up a virtual environment-

1. Create a virtual environment by giving this command in cmd-

virtualenv env_site
2. Change directory to env_site by this command-
cd env_site

3. Go to Scripts directory inside env_site and activate virtual environment-

cd Scripts
activate


Install Django- Install django by giving following command-

pip install django
 Return to the env_site directory-
cd ..

 Start a project by following command-

django-admin startproject geeks_site

 Change directory to geeks_site

cd geeks_site

 Start the server- Start the server by typing following command in cmd-
python manage.py runserver
 To check whether server is running or not go to web browser and
enter http://127.0.0.1:8000/ as url.

Django Urls
from django.urls import path

from . import views

urlpatterns = [

path('bands/', views.band_listing, name='band-list'),

path('bands/<int:band_id>/', views.band_detail, name='band-detail'),

path('bands/search/', views.band_search, name='band-search'),

from django.shortcuts import render

from bands.models import Band

 def band_listing(request):

"""A view of all bands."""

bands = Band.objects.all()

return render(request, 'bands/band_listing.html', {'bands': bands})

Templates
Django’s template language is designed to strike a balance between power and ease.
It’s designed to feel comfortable and easy-to-learn to those used to working with
HTML, like designers and front-end developers. But it is also flexible and highly
extensible, allowing developers to augment the template language as needed.

<html>

<head>

<title>Band Listing</title>

</head>

<body>

<h1>All Bands</h1>

<ul>

{% for band in bands %}

<li>

<h2><a href="{{ band.get_absolute_url }}">{{ band.name

}}</a></h2>

{% if band.can_rock %}<p>This band can rock!</p>{% endif %}

</li>

{% endfor %}

</ul>

</body>
</html>

 Admin
One of the most powerful parts of Django is its automatic admin interface. It
reads metadata in your models to provide a powerful and production-ready
interface that content producers can immediately use to start managing content
on your site. It’s easy to set up and provides many hooks for customization.

from django.contrib import admin

from bands.models import Band, Member

class MemberAdmin(admin.ModelAdmin):

"""Customize the look of the auto-generated admin for the

Member model"""

list_display = ('name', 'instrument')

list_filter = ('band',)

admin.site.register(Band) # Use the default options

admin.site.register(Member, MemberAdmin) # Use the customized

options
 Practical-8

AIM- SQL Installation & Query Command Implementation

using MY SQL like:
>DDL
>DML
>DCL

What is SQL?
• stands for Structured Query Language
• is a standard language for dealing with Relational Database
• is a query language used for storing, manipulating and retrieving
data stored in relational database
• a non-procedural language (also called a declarative language)
• allows users to query the database in a number of ways, using
English-like statements
• is not case sensitive

Characteristics of SQL

• is easy to learn.
• is used to access data from relational database management
systems.
• can execute queries against the database.
• is used to describe the data.

• is used to define the data in the database and manipulate it when

needed.
• is used to create and drop the database and table.
• is used to create a view, stored procedure, function in a database.
• allows users to set permissions on tables, procedures, and views.

SQL Environment
Advantages of SQL

• High speed : user can quickly and efficiently retrieve a large

amount of records from a database.
• No coding needed : doesn't require a substantial amount of code
to manage the database system.
• Well defined standards : used by the SQL databases that are being
used by ISO and ANSI.
• Portability : can be used in laptop, PCs, server and even some
mobile phones.
• Interactive language : is a domain language used to communicate
with the database.
• Multiple data view : users can make different views of the
database structure.

What is RDBMS?

• RDBMS stands for Relational Database Management System

• is based on a most popular data storage model, relational model
introduced by E. F. Codd.
• stores data in a structured format
• uses relations(tables) to store data
• tables are made up of rows and column
Popular RDBMS:

 MySQL
 ORACLE
 MS SQL Server
 IBM DB2
 Microsoft Access
 Sybase
 PostgreSQL
 SQL Lite

Types of SQL Statements :

DML:
Data Manipulation Language (DML)-Typical manipulations include
retrieval, insertion, deletion, and modification of the data. The DBMS
provides a set of operations or a language called the data manipulation
language (DML) for these purposes.

DDL:

Data Definition Language (DDL)-It is used by the DBA and by database

designers to define both schemas.

DCL:

Data Control Language (DCL)-the language is used to control access to

data stored in a database . The operations for which privileges may be
granted to or revoked from a user.

Basic SQL Commands:

1. CREATE
The CREATE TABLE statement is used to create a new table in a
database.
 Syntax:

2. INSERT INTO
The INSERT INTO statement of SQL is used to insert a new row in a
table. There are two ways of using INSERT INTO statement for
inserting rows.
Syntax:

3. SELECT
The SELECT Statement is used to retrieve or fetch data
from the database.
Syntax:
To fetch the entire table or all the fields in the table:

To fetch the specific fields from the table:

 How to install MySQL
 Follow these steps:

 Step 1: Go to the official website of MySQL and download the community server edition
software. Here, you will see the option to choose the Operating System, such as Windows.
 Step 2: Next, there are two options available to download the setup. Choose the version
number for the MySQL community server, which you want. If you have good internet
connectivity, then choose the mysql-installer-web-community. Otherwise, choose the other
one.

Installing MySQL on Windows

 Step 1: After downloading the setup, unzip it anywhere and double click theMSI
installer .exe file. It will give the following screen:

 Step 2: In the next wizard, choose the Setup Type. There are several types available, andyou need
to choose the appropriate option to install MySQL product and features. Here, we are going to
select the Full option and click on the Next button.
 


This option will install the following things: MySQL Server, MySQL Shell, MySQL
Router, MySQL Workbench, MySQL Connectors, documentation, samples and
examples, and many more.

 Step 3: Once we click on the Next button, it may give information about some features that may
fail to install on your system due to a lack of requirements. We can resolve them by clicking on
the Execute button that will install all requirements automatically or
 can skip them. Now, click on the Next button.

 Step 4: In the next wizard, we will see a dialog box that asks for our confirmation of afew
products not getting installed. Here, we have to click on the Yes button.
 After clicking on the Yes button, we will see the list of the products which are going tobe
installed. So, if we need all products, click on the Execute button.
 Step 5: Once we click on the Execute button, it will download and install all the products. After
completing the installation, click on the Next button.

 Step 6: In the next wizard, we need to configure the MySQL Server and Router. Here, I am not
going to configure the Router because there is no need to use it with MySQL. Weare going to
show you how to configure the server only. Now, click on the Next button.


 Step 7: As soon as you will click on the Next button, you can see the screen below. Here,we have
to configure the MySQL Server. Now, choose the Standalone MySQL Server/Classic MySQL
Replication option and click on Next. Here, you can also choose the InnoDB Cluster based on
your needs.

 Step 8: In the next screen, the system will ask you to choose the Config Type and other
connectivity options. Here, we are going to select the Config Type as 'Development Machine'
and Connectivity as TCP/IP, and Port Number is 3306, then click on Next.
 Step 9: Now, select the Authentication Method and click on Next. Here, I am going toselect
the first option.

 Step 10: The next screen will ask you to mention the MySQL Root Password. After fillingthe
password details, click on the Next button.

 Step 11: The next screen will ask you to configure the Windows Service to start theserver.
Keep the default setup and click on the Next button.
 Step 12: In the next wizard, the system will ask you to apply the Server Configuration. Ifyou
agree with this configuration, click on the Execute button

 Step 13: Once the configuration has completed, you will get the screen below. Now,click on
the Finish button to continue.
 .
 Step 14: In the next screen, you can see that the Product Configuration is completed. Keep
the default setting and click on the Next-> Finish button to complete the MySQLpackage
installation.
 Step 15: In the next wizard, we can choose to configure the Router. So click on Next-
>Finish and then click the Next button.

 Step 16: In the next wizard, we will see the Connect to Server option. Here, we have to
mention the root password, which we had set in the previous steps.
In this screen, it is also required to check about the connection is successful or not by
clicking on the Check button. If the connection is successful, click on the Execute button.
Now, the configuration is complete, click on Next.

 Step 17: In the next wizard, select the applied configurations and click on the Executebutton.
 Step 17: In the next wizard, select the Finish button.

 Step 19: Now, the MySQL installation is complete. Click on the Finish button.
 PRACTICLE -9

AIM: Testing Concepts Manual and Automation

Testing, Test ID, Test Case, Test description understanding.

WHAT IS TESTING ?
 Software testing is the process of evaluating and verifying that a software
product or application does what it is supposed to do. The benefits of testing
include preventing bugs, reducing development costs and improving
performance.
 Software testing can be defined as the action for checking if the tangible resultor
output of product matches with the projected or expected output (of your client), and
testing also ensures that the product is free from any bug or defect.

Why do we need of testing:-

 We need software testing for the following reasons:
 Cost Effective : Testing has many advantages and one of themost
essential ones is cost effectiveness.
 Security : This is the most responsive and vulnerable part of
software testing. Customers are always searching for trusted
product that they can depend on.
 Product Quality : It is essential to follow the product requirements
because it facilitates you get the needed end results.
 Customer Satisfaction : The ultimate objective for a product owneris to
give the best customer satisfaction.

Types of testing:-

1.Manual Testing:-
In manual testing, software testing is done manually without the use of
automated tools or applications available in the market. In this form of testing,
the software tester tests or checks for bugs like the end-user and checks the
project for identifying any abnormal behaviour or bugs in it. Various diverse
phases are there for testing a project manually. These are:
  unit-testing
 integration testing
 system testing and
 user acceptance testing


2. Automation Testing:-
Automated testing is the technique of testing a product that requires special
application tools for controlling the test execution and eventually evaluates test
outputs with predicted ones. These tests are automated through these special
tools, and hence the name automated testing requires little or no involvement
from testing engineers or testers. It gives additional testing or supplementary
test, which may be difficult to carry out if done manually.

Automated tested tools :-

Automated testing needs the support of various languages such as VBScript
along with automated applications. Various tools are available which can be
implemented for writing such scripts. Some of these are:

 Test Link
 Selenium
 IBM Rational Functional Tester
 SoapUI
 Para soft C/C++test
 Ranorex
 Test Complete
 Test Studio
 Testing Anywhere
 WinRunner
 Web LOAD
 LoadRunner
 Visual Studio Test Professional
 CloudTest
 HP Quick Test Professional

What makes selenium such a widely used testing tool:-

Selenium is an open souíce umbíella píoject foí a íange of tools and libíaíies aimed at suppoítingbíowseí
automation. It píovides a playback tool foí authoíing functional tests acíoss most modeín web
bíowseís, without the need to leaín a test scíipting language (Selenium IDE). It also píovides a test
domain-specific language (Selenese) to wíite tests in a numbeí of populaí píogíamming languages.
  Selenium is easy to use since its primarily developed in JavaScript.
 Selenium can test web application against various browsers like Firefox
,Chrome ,Opera and Safari.

 Tests can be coded in several programming languages like Java , PHP

,Python ,Perl and Ruby.
 Selenium is platform-independent meaning it can deploy on Windows ,
Linux , Mac.
 Selenium can be integrated with tools like Junit and TestNG for test
management.

Test Case
The test case is defined as a group of conditions under which a tester determines
whether a software application is working as per the customer's requirements or not.
Test case designing includes preconditions, case name, input conditions, and
expected result. A test case is a first level action and derived from test scenarios.

It is an in-details document that contains all possible inputs (positive as well as

negative) and the navigation steps, which are used for the test execution process.
Writing of test cases is a one-time attempt that can be used in the future at the time
of regression testing.

Test case gives detailed information about testing strategy, testing process,
preconditions, and expected output. These are executed during the testing process
to check whether the software application is performing the task for that it was
developed or not.
When do we write a test case?
We will write the test case when we get the following:

o When the customer gives the business needs then, the developer starts developing
and says that they need 3.5 months to build this product.
o And In the meantime, the testing team will start writing the test cases.
o Once it is done, it will send it to the Test Lead for the review process.
o And when the developers finish developing the product, it is handed over to the
testing team.
o The test engineers never look at the requirement while testing the product
document because testing is constant and does not depends on the mood of the
person rather than the quality of the test engineer.

Why we write the test cases?

We will write the test for the following reasons:

o To require consistency in the test case execution

o To make sure a better test coverage
o It depends on the process rather than on a person
o To avoid training for every new test engineer on the product

To require consistency in the test case execution: we will see the test case and
start testing the application.

To make sure a better test coverage: for this, we should cover all possible
scenarios and document it, so that we need not remember all the scenarios again
and again.

It depends on the process rather than on a person: A test engineer has tested an
application during the first release, second release, and left the company at the time
of third release. As the test engineer understood a module and tested the application
thoroughly by deriving many values.

To avoid giving training for every new test engineer on the product: When the
test engineer leaves, he/she leaves with a lot of knowledge and scenarios. Those
scenarios should be documented so that the new test engineer can test with the
given scenarios and also can write the new scenarios.
Test case template
The primary purpose of writing a test case is to achieve the efficiency of the
application.

As we know, the actual result is written after the test case execution, and most of
the time, it would be same as the expected result. But if the test step will fail, it will
be different. So, the actual result field can be skipped, and in the Comments section,
we can write about the bugs.

And also, the Input field can be removed, and this information can be added to
the Description field.

The test case should be written in simple language so that a new test engineer can
also understand and execute the same.

In the above sample template, the header contains the following:

Step number
It is also essential because if step number 20 is failing, we can document the bug
report and hence prioritize working and also decide if it’s a critical bug.

Test case type

It can be functional, integration or system test cases or positive or negative or

positive and negative test cases.

Release

One release can contain many versions of the release.

Pre-condition

These are the necessary conditions that need to be satisfied by every test engineer
before starting the test execution process. Or it is the data configuration or the data
setup that needs to be created for the testing.

For example: In an application, we are writing test cases to add users, edit users,
and delete users. The per-condition will be seen if user A is added before editing it
and removing it.

Test data

These are the values or the input we need to create as per the per-condition.

For example, Username, Password, and account number of the users.

The test lead may be given the test data like username or password to test the
application, or the test engineer may themself generate the username and password.

Severity

The severity can be major, minor, and critical, the severity in the test case talks
about the importance of that particular test cases. All the text execution process
always depends on the severity of the test cases.

We can choose the severity based on the module. There are many features include
in a module, even if one element is critical, we claim that test case to be critical. It
depends on the functions for which we are writing the test case.

For example, we will take the Gmail application and let us see the severity based on
the modules:
 Modules Severity

Login Critical

Help Minor

Compose mail Critical

Setting Minor

Inbox Critical

Sent items Major

Logout Critical

And for the banking application, the severity could be as follows:

Modules Severity

Amount transfer critical

Feedback minor

Brief description

The test engineer has written a test case for a particular feature. If he/she comes and
reads the test cases for the moment, he/she will not know for what feature has
written it. So, the brief description will help them in which feature test case is written.

Example of a test case template

Here, we are writing a test case for the ICICI application’s Login module:
Types of test cases
We have a different kind of test cases, which are as follows:

o Function test cases

o Integration test cases
o System test cases

The functional test cases

Firstly, we check for which field we will write test cases and then describe accordingly.

In functional testing or if the application is data-driven, we require the input column

else; it is a bit time-consuming.

Rules to write functional test cases:

o In the expected results column, try to use should be or must be.

o Highlight the Object names.
o We have to describe only those steps which we required the most; otherwise, we do
not need to define all the steps.
o To reduce the excess execution time, we will write steps correctly.
o Write a generic test case; do not try to hard code it.
Let say it is the amount transfer module, so we are writing the functional test cases
for it and then also specifies that it is not a login feature.

The functional test case for amount transfer module is in the below Excel file:

Integration test case

In this, we should not write something which we already covered in the functional
test cases, and something we have written in the integration test case should not be
written in the system test case again.

Rules to write integration test cases

o Firstly, understand the product

 o Identify the possible scenarios
o Write the test case based on the priority

When the test engineer writing the test cases, they may need to consider the
following aspects:

If the test cases are in details:

o They will try to achieve maximum test coverage.

o All test case values or scenarios are correctly described.
o They will try to think about the execution point of view.

System test cases

We will write the system test cases for the end-to-end business flows. And we have
the entire modules ready to write the system test cases.

The process to write test cases

The method of writing a test case can be completed into the following steps, which
are as below:
System study

In this, we will understand the application by looking at the requirements or the SRS,
which is given by the customer.

Identify all scenarios:

o When the product is launched, what are the possible ways the end-user may use the
software to identify all the possible ways.
o I have documented all possible scenarios in a document, which is called test
design/high-level design.

o The test design is a record having all the possible scenarios.

Write test cases

Convert all the identified scenarios to test claims and group the scenarios related to
their features, prioritize the module, and write test cases by applying test case design
techniques and use the standard test case template, which means that the one which
is decided for the project.

Review the test cases

Review the test case by giving it to the head of the team and, after that, fix the review
feedback given by the reviewer.

Test case approval

After fixing the test case based on the feedback, send it again for the approval.

Store in the test case repository

After the approval of the particular test case, store in the familiar place that is known
as the test case repository.
 Practical- 10

Aim: Git Commands and Execution and GUI & CLI

Understanding.

 What is Git?

Git is a version control system for tracking changes in computer files. It helps in coordinating work
amongst several people in a project and tracks progress over time. Unlike the centralized version control
system, Git branches can be easily merged. A new branch is created every time a developer wants to start
working on something. This ensures that the master branch always has a production-quality code.

Git is a distributed version control system, so here, every developer gets their local repository with full
commit history. The commit history makes Git fast, as now a network connection is not needed to create
commits or perform diffs between commits.

 What is GitHub?

GitHub is a Git repository hosting service that provides a web-based graphical interface (GUI). It helps
every team member work together on a project from anywhere, making it easy to collaborate.

GitHub is one place where project managers and developers coordinate, track, and update their work, so
projects stay transparent and on schedule. The packages can be published privately, within the team, or
publicly for the open-source community. Downloading packages from GitHub enables them to be used
and reused. GitHub helps all team members stay on the same page and stay organized. Moderation tools,
like issue and pull request locking, helps the team focus on the code.

 Different Commands in Git

 Git config
 Git init
  Git add
 Git diff
 Git commit
 Git reset
 Git status
 Git merge
 Git push
 Git pull

Git Push Command

The Git push command is used to push the local repository content to a remote repository. After a local repository
has been modified, a push is executed to share the modifications with remote team members. Pushing is the way
commits are transferred from the local repository to the remote repository.

Next, let's check the status of the file that was created using git status

This shows that there isn't a file committed yet, and there are untracked files. The untracked files can be seen in red.
For Git to track that file, add command is used. If you know the exact name of the file, you can specify it and simply
type the following command:

The next step is to commit the file.

Next, check all the information regarding the commits that were made.

This displays the commit ID, author's name, and email ID used. You can also find the date and commit message on
the screen.

 What is a Git Merge Conflict?

A merge conflict is an event that takes place when Git is unable to automatically resolve differences in code between
two commits. Git can merge the changes automatically only if the commits are on different lines or branches.

The following is an example of how a Git merge conflict works:

Let’s assume there are two developers: Developer A and Developer B. Both of them pull the same code
file from the remote repository and try to make various amendments in that file. After making the changes,
Developer A pushes the file back to the remote repository from his local repository. Now, when Developer
B tries to push that file after making the changes from his end, he is unable to do so, as the file has already
been changed in the remote repository.

To prevent such conflicts, developers work in separate isolated branches. The Git merge command
combines separate branches and resolves any conflicting edits.