Kotha Abhishek

Flask Tutorial

Flask is a web application framework.
Web Application Framework or simply Web Framework represents a collection of libraries and modules that enables a web application developer to write applications without having to bother about low-level details such as protocols, thread management etc.

pip install Flask

Basic webpage

Importing flask module in the project is mandatory.
Flask constructor takes the name of current module (__name__) as argument.
The route() function of the Flask class is a decorator, which tells the application which URL should call the associated function.

app.route(rule)

Finally the run() method of Flask class runs the application on the local development server.

app.run(host, port, debug)

Hostname to listen on. Defaults to 127.0.0.1 (localhost).
Defaults to 5000.
Defaults to false. If set to true, provides a debug information.

from flask import Flask
app = Flask(__name__)

@app.route('/')
def my_welcome_page():
   return 'Welcome to my webpage’

if __name__ == '__main__':
   app.run()

Routing

App routing is used to map the specific URL with the associated function that is intended to perform some task. It is used to access some particular page in the web application.
Modern web frameworks use the routing technique to help a user remember application URLs.
It is useful to access the desired page directly without having to navigate from the home page.
The route() decorator in Flask is used to bind URL to a function.
Flask facilitates us to add the variable part to the URL by using the section. We can reuse the variable by adding that as a parameter into the view function.

from flask import Flask
app = Flask(__name__)

@app.route('/')
def my_welcome_page():
   return 'Welcome to My Webpage’

@app.route('/about')
def my_about_page():
   return 'About Us Page’

@app.route('/contact')
def my_contact_page():
   return 'My Contact Page’

@app.route('/welcome/<name>')
def welcome(name):
    return "hello,"+name;

if __name__ == '__main__':
   app.run()

# import flask
from flask import Flask

webpage = Flask(__name__)           # Flask class object

@webpage.route("/")         # routing index/home  ---->   /
def my_welcome_page():
    return "<h1><u>Welcome to our subscribers from Kotha Abhishek</u></h1>"

@webpage.route("/about")         # about page  ---->   /about
def my_about_page():
    return "<p>Myself Im Kotha Abhishek, working as a Python Full Stack Developer in Hyderabad.</p>"

if __name__ == "__main__":
    webpage.run(host="127.0.0.2", port=5001, debug=True)

Display webpages in Browser and handle Page Not Found Error

mainwebpage.py

# import flask
from flask import Flask, render_template

webpage = Flask(__name__)           # Flask class object

@webpage.route("/")         # routing index/home  ---->   /
def my_welcome_page():
    return render_template("index.html")

@webpage.route("/about")         # about page  ---->   /about
def my_about_page():
    return render_template("about.html")

@webpage.route("/contact")         # about page  ---->   /about
def my_contact_page():
    return render_template("contact.html")

@webpage.errorhandler(404)
def my_error_page(err):
    return render_template("error.html")


if __name__ == "__main__":
    webpage.run(host="127.0.0.2", port=5001, debug=True)

common.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/about">Aboutus</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/contact">Contactus</a>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="/register">Registration</a>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="/login">Login</a>
      </li>
    </ul>
  </div>
</nav>
<br>

<div>
    {% block content %}

    {% endblock %}
</div>

</body>
</html>

index.html

{% extends 'common.html' %}

about.html

{% extends 'common.html' %}

contact.html

{% extends 'common.html' %}

error.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <img src="error.png" alt="error image" />
</body>
</html>

HTML Background

These are the attributes to change web page looking.
Attributes are used inside a tag and it follows att_name="value" format. Ex : text="red"
bgcolor attribute is used to change the background-color in a web page.
text attribute is used to change the text color in a web page.
background attribute is used to set an image as a background in a web page. Here we have to give the whole image url with extension.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body bgcolor="red" text="white">
 Hello Welcome To HTML Tutorials
</body>
</html>

<!DOCTYPE HTML>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body background="html1.png" text="yellow">
 Hello Welcome To HTML Tutorials
</body>
</html>

HTML Images

You can insert any image in your web page by using <img> tag.
The simple syntax to use this tag is <img src="Image URL" ... attributes-list/>
The src attribute is used to give the address of the image with extension.
The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed.
You can set image width and height based on your requirement using&n width and height attributes.
By default image will have a border around it, you can specify border thickness in terms of pixels/value using border attribute. A thickness of 0 means, no border around the picture.
By default image will align at the left side of the page, but you can use align attribute to set it in the center or right.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <img src="html.png" alt="HTML5" height="200" width="250">
 <img src="css3.png" alt="css3" height="200" width="250">
</body>
</html>

HTML Tables

The HTML tables allow to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td>tag is used to create data cells.
Here border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border then you can use border="0".You can also set border color also using bordercolor attribute.
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell.
There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white space in your table cells.
cellpadding represents the distance between cell borders and the content within a cell.
The cellspacing attribute defines the width of the border.
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.
bgcolor attribute is used to set background color for whole table or just for one cell.
background attribute is used to set background image for whole table or just for one cell.
You can set a table width and height using width and height attrubutes.
The caption tag will serve as a title or explanation for the table and it shows up at the top of the table.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
   <table border="2" cellpadding="3" cellspacing="3"
  bgcolor="aqua">
      <tr>
         <th colspan="3" bgcolor="red">Programming Tutorials</th>
      </tr>
      <tr>
         <td bgcolor="white">HTML</td>
      <td rowspan="4" bgcolor="orange">In Telugu</td>
      <td bgcolor="white">CSS</td>
      </tr>
      <tr>
      <td bgcolor="pink">SQL</td>
      <td bgcolor="pink">Java</td>
      </tr>
      <tr>
      <td bgcolor="lightgreen">JavaScript</td>
      <td bgcolor="lightgreen">Python</td>
      </tr>
      <tr>
      <td bgcolor="yellow">PHP</td>
      <td bgcolor="yellow">go</td>
      </tr>
 </table>
</body>
</html>

HTML Lists

HTML offers three ways for specifying lists of information. All lists must contain one or more list elements.
<ul> - An unordered list. This will list items using plain bullets.
The Unordered list starts with <ul> tag and list items start with the <li> tag.
You can use type attribute for <ul> tag to specify the type of bullet you like. By default it is a disc. But you can change to square or circle or none.
<ol> - An ordered list. This will use different schemes of numbers to list your items.
The numbering starts at one and is incremented by one for each successive ordered list tagged with <li>.
You can use type attribute for <ol> tag to specify the type of numbering you like. By default it is a number.
But you can change to Roman Numbers(I),Small roman numbers(i), alphabets(A), small aplhabets (a).
You can use start attribute for <ol> tag to specify the starting point of numbering you need.
<dl> - A definition list. This arranges your items in the same way as they are arranged in a dictionary.
<dl> - Defines the start of the list.
<dt> - Defines a term.
<dd> - Defines term definition

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <h2>An Unordered HTML List</h2>
 <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
 </ul< 
 <h2>An Ordered HTML List</h2>
 <ol>
    <li>SQL</li>
    <li>Java</li>
    <li>Python</li>
 </ol>
 <h2>HTML Description Lists</h2>
 <dl>
   <dt>Coffee</dt>
     <dd>- black hot drink</dd>
    <dt>Milk</dt>
     <dd>- white cold drink</dd>
 </dl>
 </body>
</html>

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <ul type="square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
 </ul< 
 <ul type="circle">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
 </ul>
 <ol type="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
 </ol< 
 <ol type="i">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
 </ol>
</body>
</html>

HTML Links

A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images.
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a>tag and the closing </a> tag becomes part of the link.
Following is the simple syntax to use <a> tag.<a href="Document URL" ... attributes-list>Link Text</a>
target attribute is used to specify the location where linked document is opened. Possible options are
_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same frame.
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body>tag.
You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple, you just need to give complete URL of the downloadable file.
It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the place of text.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
If you want to goto google
  <a href="http://www.google.com" target="_blank">Click Here</a>
</body>
</html>

HTML Fonts

Fonts play very important role in making a website more user friendly and increasing content readability.
HTML tag to add style, size, and color to the text on your website.
You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.
You can set font face using face attribute.
You can set font color using color attribute.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
<font size="3" color="red">This is some text!</font> <br>
<font size="7" color="blue">This is some text!</font> <br>
<font face="verdana" color="green">This is some text!</font><br>
</body>
</html>

HTML Forms

HTML Forms are required when you want to collect some data from the site visitor.For example during user registration you would like to collect information such as name, email address, credit card, etc.
There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form.
Apart from common attributes, following is a list of the most frequently used form attributes:
action Backend script ready to process your passed data.
method Method to be used to upload data. The most frequently used are GET and POST methods.
target Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
There are different types of form controls that you can use to collect data using HTML form:
Those are:
Single-line text input controls <input type="text" name="name"/>
Password input controls <input type="password" name="pwd" />
Email input controls <input type="email" name="email" />
Number input controls <input type="number" name="number" />
Date input controls <input type="date" name="date" />
Multi-line input controls <textarea rows="5" cols="50" name="description"/>
Checkbox controls <input type="checkbox" name="m1" />
Radio Button controls <input type="radio" name="male" />
Select Box controls <select name="select" ><option value="Maths">Maths</option>
File upload box <input type="file" name="fileupload" accept="image/*" />
Button controls <input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
<input type="color" name="color" />
search <input type="search" name="search" />
url <input type="url" name="url" />
Some attributes of form controls size, maxlength, checked, multiple, placeholder, value, pattern

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
<form action="html.html" method="get" target="_self">
  Name: <input type="text" name="fname"><br><br>
  Password: <input type="password" name="pwd">br><br>
  Email: <input type="email" name="email">
  Phone Number:<input type="number" name="number">
  DOB:<input type="date" name="date"> 
  Address:<textarea rows="5" cols="50" name="description">
  </textarea>
  Hobbies:<input type="checkbox" name="m1">
  Gender:<input type="radio" name="male">
  Branch:<select name="select" ><option value="cse">CSE</option>
  Photo:<input type="file" name="fileupload" accept="image/*">
  Search:<input type="search" name="search"> 
  url: <input type="url" name="url">
  <input type="submit" value="Submit">
  <input type="reset" name="reset" value="Reset"> 
  <input type="button" name="ok" value="OK">
  <input type="color" name="color"> 
</form>
</body>
</html>

HTML Marquee

An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings.
This is created by using HTML <marquee> tag.
<marquee att_name="att_value".. more attributes> Text here </marquee>
Attributes are:
width This specifies the width of the marquee. This can be a value like 10 or 20% etc.
height This specifies the height of the marquee. This can be a value like 10 or 20% etc.
direction This specifies the direction in which marquee should scroll. This can be a value like up, down, left or right.
scrolldelay This specifies how long to delay between each jump. This will have a value like 10 etc.
scrollamount This specifies the speed of marquee text. This can have a value like 10 etc.
loop This specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.
bgcolor This specifies background color in terms of color name or color hex value.
hspace This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.
vspace This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
    <marquee>This is basic example of marquee</marquee>
    <marquee direction = "right">The direction of text
       will be from left to right.</marquee>
    <marquee scrolldelay="10">Using Scroll Delay</marquee>
    <marquee scrollamount="2">Using Scroll Amount</marquee>
    <marquee bgcolor="yellow">Using Background Color</marquee>
</body>
</html>

HTML Audio

HTML audio tag is used to define sounds such as music and other audio clips. Currently there are three supported file format for HTML 5 audio tag.
autoplay Specifies that the audio will start playing as soon as it is ready.
controls Specifies that audio controls should be displayed (such as a play/pause button etc).
loop Specifies that the audio will start over again, every time it is finished.
src Specifies the URL of the audio file.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
<audio controls autoplay loop>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
</body>
</html>

HTML Video

HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files such as a movie clip, song clip on the web page.
autoplay Specifies that the audio will start playing as soon as it is ready.
controls Specifies that audio controls should be displayed (such as a play/pause button etc).
loop Specifies that the audio will start over again, every time it is finished.
src Specifies the URL of the audio file.
height pixels Sets the height of the video player.
widthSets the width of the video player.
poster Specifies an image to be shown while the video is downloading, or until the user hits the play button

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
<video width="300" height="200" controls autoplay loop>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</body>
</html>

HTML 5

HTML5 tutorial provides details of all 40+ HTML tags including audio, video, header, footer, data, datalist, article etc.
HTML5 is a next version of HTML. Here, you will get some brand new features which will make HTML much easier. These new introducing features make your website layout clearer to both website designers and users.
There are some elements like <header>, <footer>, <nav> and <article> that define the layout of a website.
It allows you to play a video and audio file.
<article>-This element is used to define an independent piece of content in a document, that may be a blog, a magazine or a newspaper article.
<footer> It defines a footer for a section.
<header> It defines a header for a section.
<main> It defines the main content of a document.
<nav>-It is used to define the navigation link in the document.
<progress>-It specifies the progress of the task.
<section>- It defines a section in the document.
<time>- It is used to define a date/time.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <nav>
  <a href="/html.html">HTML</a> |
   <a href="/css.html">CSS</a> |
   <a href="/js/">JavaScript</a> |
   <a href="/jquery/">jQuery</a>
 </nav>
 <br><br>
   <progress value="35" max="100">
</body>
</html>

HTML Canvas

The HTML <canvas> element is used to draw graphics on a web page.
The graphic below is created with <canvas>.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

What we can do with Canvas?

Canvas can draw colorful text, with or without animation.
Canvas has great features for graphical data presentation with an imagery of graphs and charts.
Canvas objects can move. Everything is possible: from simple bouncing balls to complex animations.
Canvas can respond to JavaScript events.Canvas can respond to any user action (key clicks, mouse clicks, button clicks, finger movement).
Canvas' methods for animations, offer a lot of possibilities for HTML gaming applications.

Creating Canvas

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
</body>
</html>

Drawing Lines

First of all, you must find the <canvas> element.
This is done by using the HTML DOM method getElementById():
var canvas = document.getElementById
("myCanvas");
Secondly, you need a drawing object for the canvas.
The getContext() is a built-in HTML object, with properties and methods for drawing:
var ctx = canvas.getContext("2d");
Finally, you can draw on the canvas.

Canvas Coordinates:
1) The HTML canvas is a two-dimensional grid.
2) The upper-left corner of the canvas has the coordinates (0,0)
Draw a Line:
1) To draw a straight line on a canvas, use the following methods:
moveTo(x,y) - defines the starting point of the line
lineTo(x,y) - defines the ending point of the line
2) To actually draw the line, you must use one of the "ink" methods, like stroke().

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(0,0);
  ctx.lineTo(200,100);
  ctx.stroke();
 </script>
</body>
</html>

Drawing Circles

1) To draw a circle on a canvas, use the following methods:
beginPath() - begins a path
arc(x,y,r,startangle,endangle) - creates an arc/curve.
2) To create a circle with arc() Set start angle to 0 and end angle to 2*Math.PI.
3) The x and y parameters define the x- and y-coordinates of the center of the circle.
4) The r parameter defines the radius of the circle.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95,50,40,0,2*Math.PI);
  ctx.stroke();
 </script>
</body>
</html>

Adding Text

1) To draw text on a canvas, the most important property and methods are:
font - defines the font properties for the text
fillText(text,x,y) - draws "filled" text on the canvas
strokeText(text,x,y) - draws text on the canvas (no fill)

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.font = "23px Arial";
  ctx.fillText("Programming Tutorials",10,50);
  ctx.strokeText("In Telugu",170,100);
 </script>
</body>
</html>

Linear Gradient

1) Gradients can be used to fill rectangles, circles, lines, text, etc.
2) Shapes on the canvas are not limited to solid colors.
3) CreateLinearGradient(x,y,x1,y1) - creates a linear gradient
4)Once we have a gradient object, we must add two or more color stops.
5) The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
6) To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape (rectangle, text, or a line).

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var grd = ctx.createLinearGradient(0,0,200,0);
  grd.addColorStop(0,"green");
  grd.addColorStop(1,"white");
  ctx.fillStyle = grd;
  ctx.fillRect(10,10,150,80);
 </script>
</body>
</html>

Radial Gradient

1) Gradients can be used to fill rectangles, circles, lines, text, etc.
2) Shapes on the canvas are not limited to solid colors.
3) CreateRadialGradient(x,y,r,x1,y1,r1) - creates a radial/circular gradient 4)Once we have a gradient object, we must add two or more color stops.
5) The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
6) To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape (rectangle, text, or a line).

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
 var grd = ctx.createRadialGradient(75,50,5,90,60,100);
  grd.addColorStop(0,"red");
  grd.addColorStop(1,"aqua");
  ctx.fillStyle = grd;
  ctx.fillRect(10,10,150,80);
 </script>
</body>
</html>