Scribd
Upload
49 views

E-Book - Full Stack Python

Uploaded by

deerajgamer7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
49 views

E-Book - Full Stack Python

Uploaded by

deerajgamer7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Full Stack

A comprehensive e-book for your basic understanding


Full Stack Python: A comprehensive e-book for your basic understanding

Full Stack Python: A comprehensive e-book for your basic understanding


Course material: e-book
Copyright © 2023 TEKS Academy

Contact Us:
TEKS Academy
Flat No: 501, 5th Floor, Amsri Faust Building,
SD Road, near Reliance Digital Mall,
Regimental bazaar,
Shivaji Nagar,
Secunderabad,
Telangana - 500025

Support: 1800-120-4748
Email: [email protected]

2
Full Stack Python refers to the development of both the front-end and back-end components of a web application. A
full-stack developer is someone who has the skills to work on both the client side (front end) and server side (back end)
of a web application. This includes dealing with databases, server-side scripting, client-side scripting, and the
integration of all these components to create a complete and functional web application.

1. 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 and also consists of series of elements. HTML elements tell the browser
to display the content. It labels pieces of content such as heading, paragraph, link, etc.

Example of a simple HTML 5 document:


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<body>

<h1>My first heading</h1>


<p>My first paragraph</p>

</body>
</html>

HTML Page structure:


Below is a visualization of HTML page structure.
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>

HTML formatting elements:


<b> - Bold text </b>
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text

3
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text <u> </u>
<sub> - Subscript text
<sup> - Superscript text
<b> - Bold text

HTML List Tags:


Tag Description:
<ul> Unordered list
<ol> Ordered list
<li> List item
<dl> Description list
<dt> Terms in a description list

HTML Input Types:


This chapter describes the different types for the HTML <input> element. HTML Input Types: Here are the different
input types you can use in HTML:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="week">

2. CSS (Cascading Style Sheet):


CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in
other media CSS saves a lot of work. It can control the layout of multiple web pages all at once External style sheets

are stored in CSS files.

4
CSS, or Cascading Style Sheets, is used for describing the presentation of a document written in a markup
language. It is used to separate the presentation of a document from its structure, allowing for greater flexibility and
maintainability of web pages. CSS can be used to control the layout, colours, fonts, and other visual elements of a
page, allowing for the creation of complex and visually appealing designs. It is an essential part of web development
and is used in conjunction with HTML and JavaScript to create fully functional and dynamic web pages.

CSS Class Selector:


The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write
a period (.) character, followed by the class name.

Example:
In this example all HTML elements with class="center" will be red and center-aligned:
center {
text-align: center; color: red;
}
You can also specify that only specific HTML elements should be affected by a class.

CSS Grouping Selector:


The grouping selector selects all the HTML elements with the same style definitions. Look at the following CSS code
(the h1, h2, and p elements have the same style definitions):
h1 {text-align: center; color: red;
}
h2 {text-align: center; color: red;
} p {text-align: center; color: red;
}

It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a
comma.

Pseudo –classes:
In HTML, pseudo-classes are special types of classes that allow you to target specific elements or states
within an element. For example, the :next pseudo-class targets the next sibling of an element, while
the :hover pseudo-class targets an element when the user hovers over it. Pseudo-classes are very useful for styling
and manipulating elements in your web page.

CSS Pseudo-elements:
CSS pseudo-elements allow you to style elements in a document based on specific criteria or attributes.
There are several types of pseudo-elements, including :first-child, :last-child, :nth-child, :not, :before, and :after.
These elements allow for advanced styling techniques, such as creating dropdown menus, adding content to
elements, and modifying the layout of a page. Additionally, pseudo-elements can also be used in conjunction with
the ::after and ::before elements to create content such as icons or arrow shapes.

3. JavaScript:

5
In 1995, Netscape created the programming language known as JavaScript. It is commonly used to add
dynamic, interactive elements to web pages. Unlike many languages, JavaScript is a scripting language rather than an
actual programming language. It is also the basis for many programming languages, such as TypeScript, which
compiles into JavaScript. JavaScript can be used to manipulate documents directly, which makes it very popular for
creating interactive websites. Additionally, JavaScript has a large number of libraries and frameworks that make it
easy to build complex applications.

Document Object Model (DOM):


The DOM is the structured representation of the HTML document created by the browser. It allows
JavaScript to manipulate, structure, and style your website.

Document Object:
It is the entry point of the DOM. For accessing any HTML Element, you should always start with accessing the
document object first.

HTML DOM Tree:


The DOM tree represents an HTML document as nodes. Each node is referred to as an Object.

The Document Object Model (DOM) is a crucial concept in web development that allows programmers to manipulate
the structure, content, and style of HTML and XML documents using programming languages like JavaScript. The
DOM represents the document as a tree-like structure, where each node corresponds to an element, attribute, or
piece of text in the document. This hierarchical representation enables dynamic modification of web pages, making it
an integral part of interactive and responsive web applications.

In JavaScript, the DOM is implemented as a set of objects that represent the various components of an HTML or XML
document. These objects can be accessed and manipulated using JavaScript, allowing developers to dynamically
update the content and appearance of a web page without requiring a page reload.

Here are some key aspects of working with the DOM in JavaScript:

Accessing Elements: JavaScript provides several methods to access elements in the DOM. The most common
methods include ‘getElementById’, ‘getElementsByClassName’, ‘getElementsByTagName’, and ‘querySelector’. These
methods allow developers to retrieve references to specific elements in the document, enabling subsequent
manipulation.

// Example: Accessing an element by its ID


var myElement = document.getElementById('myElement');

Manipulating Elements: Once you have a reference to an element, you can modify its content, attributes, or style
using JavaScript. Common methods include innerHTML for updating content, setAttribute for modifying attributes,
and style for changing CSS properties.

// Example: Modifying element content and style


myElement.innerHTML = 'New Content';

6
myElement.setAttribute('class', 'newClass');
myElement.style.color = 'blue';

Traversing the DOM: DOM traversal involves moving through the document's tree structure to access
different elements. You can navigate to parent, child, or sibling nodes using properties like parentNode, childNodes,
firstChild, lastChild, nextSibling, and previousSibling.

// Example: Traversing the DOM


var parentElement = myElement.parentNode;
var firstChildElement = myElement.firstChild;

Creating and Appending Elements: You can create new HTML elements dynamically using JavaScript and append
them to the document. The createElement and appendChild methods are commonly used for this purpose.

// Example: Creating and appending a new element


var newElement = document.createElement('div');
newElement.innerHTML = 'New Element';
document.body.appendChild(newElement);

Event Handling: JavaScript enables the attachment of event handlers to DOM elements, allowing developers to
respond to user interactions. Common events include clicks, keypresses, and form submissions.

// Example: Adding a click event listener


myElement.addEventListener('click', function() {
alert('Element clicked!');
});

4. React JS:
React.js is an open-source JavaScript library for building user interfaces. It was developed by Facebook and is
now maintained by Facebook and a community of developers. React.js allows developers to create reusable
components, making it easier to build complex UIs. It also enables efficient rendering of large parts of an application,
improving performance.

React JSX:
JSX stands for JavaScript XML. It is similar in appearance to HTML, hence provides a way to easily write HTML
in react.

Syntax:
JSX looks similar to HTML but is incorporated directly into JavaScript code. It allows developers to write UI
elements using a familiar HTML-like syntax within their JavaScript code.

const element = <h1>Hello, JSX!</h1>;

Embedding Expressions:

7
JSX allows embedding JavaScript expressions within curly braces {}. This enables dynamic content rendering
and the execution of JavaScript code within the JSX.

const name = "John";


const element = <p>Hello, {name}!</p>;

React Elements:
JSX is used to create React elements. React elements are the building blocks of React applications,
representing the UI structure. JSX makes it more concise and readable to define these elements.

const element = <div className="container">Hello, React!</div>;

Attributes:
JSX supports HTML-like attributes for elements. These attributes are used to set properties or pass data to
React components.

const image = <img src="image.jpg" alt="An example" />;

HTML Entities:
JSX supports HTML entities for special characters, such as &nbsp; for a non-breaking space.
const greeting = <p>Hello&nbsp;World!</p>;

Conditional Rendering:
JSX allows the use of JavaScript expressions and conditional statements for dynamic rendering. This makes it
easy to conditionally render different parts of the UI based on certain conditions.

const isLoggedIn = true;


const greeting = isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>;

Event Handling:
JSX supports the use of event handlers, allowing developers to attach functions to events like onClick,
onChange, etc.

function handleClick() {
console.log("Button clicked!");
}
const button = <button onClick={handleClick}>Click me</button>;

Java Script Expressions:


JSX can contain any valid JavaScript expression, providing a powerful way to create dynamic and expressive
UIs.

const randomNumber = Math.floor(Math.random() * 100);


const message = <p>The random number is {randomNumber}.</p>;
Babel Transformation:

8
JSX code needs to be Trans piled to regular JavaScript using tools like Babel before it can be executed in the
browser. This step is crucial for converting JSX syntax into JavaScript that the browser can understand.

5. Python:
Python is a high-level, interpreted programming language known for its readability, simplicity, and versatility.
In 1991, Guido van Rossum released it for the first time. Python supports multiple programming paradigms, including
procedural, object-oriented, and functional programming, making it suitable for a wide range of applications.

Why Python:
Python is an easy to learn, powerful programming language. With Python, it is possible to create programs
with minimal amount of code. Look at the code in Java and Python used for printing the message "Hello World."

Applications of Python:
Python is a versatile language which has applications in almost every field.

 Artificial intelligence (AI)


 Machine Learning (ML)
 Big Data
 Smart Devices/Internet of Things (IoT)
 Cyber Security
 Game Development
 Backend Development, etc.

Career opportunities:
Python developers have plenty of opportunities across the world:

 DevOps Engineer
 Software Developer
 Data Analyst
 Data Scientist
 Machine Learning (ML) Engineer
 AI Scientist, etc.

Types of Methods:
In Python, instance methods, class methods, and static methods are three types of methods that can be
defined in a class. Each serves a different purpose and has different rules regarding access to class attributes and the
way they are called.

Instance Methods:

 Instance methods are the most common type of methods in Python classes.
 They operate on an instance of the class and have access to the instance's attributes.
 They are defined by using the def keyword inside the class and have the instance itself (often named self) as
the first parameter.

Example:

9
class MyClass:
def __init__(self, value):
self.value = value

def get_value(self):
return self.value

obj = MyClass(42)
print(obj.get_value()) # Output: 42

Class Methods:
 Class methods are bound to the class rather than the instance of the class.
 They are defined using the @classmethod decorator and have the class itself (often named cls) as the first
parameter.
 Class methods can access and modify class-level attributes but not instance-level attributes.

Example:
class MyClass:
class_variable = "Class Variable"

def __init__(self, value):


self.value = value

@classmethod
def print_class_variable(cls):
print(cls.class_variable)

MyClass.print_class_variable() # Output: Class Variable

Static Methods:
 Class methods are bound to the class rather than the instance of the class.
 They are defined using the @classmethod decorator and have the class itself (often named cls) as the first
parameter.
 Class methods can access and modify class-level attributes but not instance-level attributes.

Example:
class MathOperations:
@staticmethod
def add(x, y):
return x + y

10
result = MathOperations.add(3, 5)
print(result) # Output: 8

7. SQL:
What is SQL?
SQL, or Structured Query Language, is a standard programming language used for managing and
manipulating relational databases. It provides a set of commands to interact with databases, allowing users to
perform tasks such as querying data, updating records, inserting new data, and more. SQL is used across different
database management systems (DBMS) like MySQL, PostgreSQL, SQLite, Microsoft SQL Server, and Oracle.

Key Concepts in SQL:

Tables: A table is a fundamental structure in a relational database. It consists of rows and columns, where each row
represents a record, and each column represents a field or attribute of that record.

Columns and Data Types: Columns define the structure of a table and specify the type of data it can store, such as
text, numbers, dates, etc.

Queries: SQL queries are used to retrieve specific data from a database. The SELECT statement is a fundamental part
of querying, allowing you to filter and sort data based on various conditions.

SELECT column1, column2 FROM table WHERE condition;

Insert, Update, Delete: SQL provides commands to add new records, modify existing ones, or delete records from a
table.
INSERT INTO table (column1, column2) VALUES (value1, value2);
UPDATE table SET column1 = value1 WHERE condition;
DELETE FROM table WHERE condition;

Joins: Joins are used to combine rows from two or more tables based on related columns. Common types include
INNER JOIN, LEFT JOIN, and RIGHT JOIN.
SELECT * FROM table1 INNER JOIN table2 ON table1.column = table2.column;

Indexes: Indexes improve the speed of data retrieval operations on a database by providing quick access to rows
based on specific columns.
CREATE INDEX index_name ON table_name (column1, column2);

Primary Keys and Foreign Keys: Primary keys uniquely identify records in a table, while foreign keys establish
relationships between tables.
CREATE TABLE table1 (
id INT PRIMARY KEY,
name VARCHAR(50)
);

CREATE TABLE table2 (

11
id INT PRIMARY KEY,
table1_id INT,
FOREIGN KEY (table1_id) REFERENCES table1(id)
);

Data Base Management Systems (DBMS):


A Database Management System (DBMS) is a software application that facilitates the creation, organization,
retrieval, and management of data in a database. It acts as an interface between the users and the database,
ensuring efficient and secure storage and retrieval of data. DBMS is crucial in modern information systems, providing
a structured and organized approach to handling vast amounts of data.

Advantages of DBMS:

1. Data Integrity: DBMS ensures data integrity by enforcing data constraints and relationships, preventing data
anomalies and inconsistencies.
2. Data Security: Access to the database is controlled through user authentication and authorization
mechanisms, protecting sensitive information from unauthorized access.
3. Data Independence: DBMS provides abstraction between the physical data storage and the applications
using the data. This allows changes to the database structure without affecting the applications.
4. Concurrent Access and Transaction Management: DBMS manages multiple users accessing the database
simultaneously, ensuring data consistency and integrity even in a multi-user environment.
5. Data Redundancy Control: Redundant storage of data is minimized, reducing the chances of inconsistencies
and saving storage space.
6. Data Retrieval and Query Optimization: DBMS allows users to retrieve and manipulate data using a query
language (e.g., SQL). The system optimizes queries for efficient data retrieval.
7. Backup and Recovery: DBMS provides mechanisms for regular backups and recovery procedures, ensuring
data durability and availability in case of system failures.
8. Scalability: DBMS systems are scalable, allowing for the efficient handling of growing amounts of data and
increased user demands.

Types of DBMS:

1. Relational Database Management System (RDBMS): Organizes data into tables with rows and columns, and
establishes relationships between tables. Examples include MySQL, PostgreSQL, and Oracle Database.

2. NoSQL Database Management System: Designed to handle unstructured or semi-structured data and offer
flexible data models. Types include document-oriented (e.g., MongoDB), key-value stores (e.g., Redis), and
graph databases (e.g., Neo4j).

3. Object-Oriented Database Management System (OODBMS): Stores data in the form of objects, similar to
object-oriented programming concepts. This type is suitable for applications with complex data structures.
Examples include db4o and ObjectDB.

4. Hierarchical Database Management System: Organizes data in a tree-like structure, with parent-child
relationships. IMS (Information Management System) is an example.

12
5. Network Database Management System: Similar to hierarchical DBMS but allows more complex
relationships between records. CODASYL database management system is an example.

6. In-Memory Database Management System: Stores data in the computer's main memory (RAM) rather than
on disk for faster access. Examples include SAP HANA and Redis.

7. Distributed Database Management System (DDBMS): Manages data across multiple interconnected
databases. Examples include Apache Cassandra and Amazon DynamoDB.

Pagination:

E-commerce applications like Amazon or Flipkart hold millions of products. But the user does not require all
the available products every time s/he accesses the application. In fact, fetching all the products takes too long and
consumes huge amount of data. Using pagination, only a chunk of the data can be sent to the user based on their
request. And, the next chunk of data can be fetched only when the user asks for it.

Key features of pagination include:

Page Numbers: Content is divided into pages, each assigned a page number. Users can navigate through the pages
using links or buttons corresponding to these page numbers.

Previous and Next Buttons: Users can move to the previous or next page of content with the help of navigation
buttons.

Page Size: The number of items displayed on each page is known as the page size. Common page sizes are 10, 20, or
50 items per page, but this can vary depending on the application.

First and Last Page Links: Links or buttons to go to the first or last page of content provide additional navigation
options.

Pagination is commonly used in various contexts, such as:

 Search Engine Results: Search engines often display search results across multiple pages to make it easier for
users to find relevant information.
 E-commerce Websites: Product listings on e-commerce sites are often paginated to avoid overwhelming
users with a large number of products on a single page.
 Tables and Lists: In applications with tables or lists of data, pagination is used to manage and present data in
a more organized manner.
 Forums and Blogs: Long discussions or blog post archives are often paginated to make it easier for users to
navigate and find specific content.

13

You might also like