Monday, 5 July 2021

Web development with Html and PHP

 HTML Codes:-

We see Lots of Website Like Facebook, Yahoo, Instagram.....Now We will see how this website works and we also try to make this type of websites.......Come ON guys !! Let's ROCK 😈😈 

We use Sublime Text as a text editor, If you want you guys can also use Visual-Code Studio and other software also.


1.Heading:

    <!DOCTYPE html>
<html>
<head>
<title>First Html File</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<img src="E:\Courses\PHP trainig tedtree\images\1.jpg"height="200" border="2" alt="Image1" title="FirstImage">       **path of my image are given between " " **

</body>
</html>

2.Title & Image:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="E:\Courses\PHP trainig tedtree\images\1.jpeg"height="200" border="2" alt="Image1" title="FirstImage">

</body>
</html>

3.  HyperLink :

  <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

</head>
<body>
<img src="E:\Courses\PHP trainig tedtree\images\Turkey.jpg" height="200" border="2" alt="Image 1" title="Turkey">

<img src="E:\Courses\PHP trainig tedtree\images\Turkey2.jfif" height="200" border="2" alt="Image 1" title="Turkey_Shots">

<br>
<a href="test1.html">Go First Page</a>

</body>
</html>

4.Listing:

Prototype 1:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Listing</title>

</head>
<body>
<ol>                   ** OL- ordered list
<li>Kolkata</li>    ** li- number
<li>Delhi</li>
<li>Mumbai</li>
</ol>
 

</body>
</html>

Prototype 2:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Listing</title>

</head>
<body>
<ol type="A">
<li>Kolkata</li>
<li>Delhi</li>
<li>Mumbai</li>
</ol>

</body>
</html>

Prototype 3:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Listing</title>

</head>
<body>
<ol type="i"> <!-- ol=ordered list -->
<li>Kolkata</li> <!-- li means listing items -->
<li>Delhi</li>
<li>Mumbai</li>
</ol>
<ul>  <!-- ul=unordered list -->
<li>Kolkata</li>
<li>Delhi</li>
<li>Mumbai</li>
</ul>
<ul type="Circle">  <!-- ul=unordered list -->
<li>Kolkata</li>
<li>Delhi</li>
<li>Mumbai</li>
</ul>

</body>
</html>

Table:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
</head>

<body>
<table>
<thead> 
<tr>
<th>Name</th>
<th>Eamil</th>
</tr>
</thead>
<tbody>
<tr>
<td>Saumitra</td>
<td>saumitra.das@techtreeindia.com</td>
</tr>
<tr>
<td>Anirban</td>
<td>anirban@gmail.com</td>
</tr>
<tr>
<td>Sourav</td>
<td>sourav@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>

With Border:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
</head>

<body>
<table border="1">
<thead> 
<tr>
<th>Name</th>
<th>Eamil</th>
</tr>
</thead>
<tbody>
<tr>
<td>Saumitra</td>
<td>saumitra.das@techtreeindia.com</td>
</tr>
<tr>
<td>Anirban</td>
<td>anirban@gmail.com</td>
</tr>
<tr>
<td>Sourav</td>
<td>sourav@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>

With Border and cell padding:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
</head>

<body>
<table border="1" cellpadding="7">
<thead> 
<tr>
<th>Name</th>
<th>Eamil</th>
</tr>
</thead>
<tbody>
<tr>
<td>Saumitra</td>
<td>saumitra.das@techtreeindia.com</td>
</tr>
<tr>
<td>Anirban</td>
<td>anirban@gmail.com</td>
</tr>
<tr>
<td>Sourav</td>
<td>sourav@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>

With Border and cell padding and Cell padding:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
</head>

<body>
<table border="1" cellpadding="7" cellspacing="10">
<thead> 
<tr>
<th>Name</th>
<th>Eamil</th>
</tr>
</thead>
<tbody>
<tr>
<td>Saumitra</td>
<td>saumitra.das@techtreeindia.com</td>
</tr>
<tr>
<td>Anirban</td>
<td>anirban@gmail.com</td>
</tr>
<tr>
<td>Sourav</td>
<td>sourav@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>


colspan                     **Colspan- Merging Two or more column in given column
rowspan                       **Rowspan- Merging Two or more row in give row


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
</head>

<body>
<table border="1" cellpadding="7" cellspacing="0">
<thead> 
<tr>
<th>Name</th>
<th>Eamil</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Saumitra</td>
<td>saumitra.das@techtreeindia.com</td>
</tr>
<tr>
<td>sau@gmail.com</td>
<tr>
<td>Anirban</td>
<td>anirban@gmail.com</td>
</tr>
<tr>
<td>Sourav</td>
<td>sourav@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>

Making a Registration Page:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Registration</title>
</head>  

<body>
<h2>User Registration</h2>
<form  name="frm">
<table cellpadding="12">
<tr>
<td>Name</td>
<td><input type="text" name="nm" value="Techtree"></td><br><br>
</tr>
<tr>
<td>Email</td>
<td><input type="Email" name="email_id"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td>Date of Birth</td>
<td><input type="date" name="dob"></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="gender" value=" Male"> Male
<input type="radio" name="gender" value=" Female"> Female
</td>
</tr>
<tr>
<td>Language</td>
<td><input type="checkbox" name="lang" value="C"> C
<input type="checkbox" name="lang" value="C++">C++
<input type="checkbox" name="lang" value="PHP">PHP 
</td>
</tr>
<tr>
<td>Address</td>
<td>
<textarea name="addr" cols="21" rows="5"></textarea>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="city">
<option value="Kolkata">Kolkata</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
</select>
<tr>
<td colspan="2" align="center">
<input type="submit" name="ok" value="Register">
</td>
</table>
</form>
</body>
 


CELLSPACING controls the space between table cells.

CELLPADDING sets the amount of space between the contents of the cell and the cell wall.


WHY PHP??

  • Php is Hypertext Preprocessor.
  • Php is an interpreted language, i.e., there is no need for compilation.
  • Php is a server-side Scripting Language.
  • Php is an Object-Oriented Language.


Easy to Use:
        Code is embedded to HTML.
         Easy to Learn.
         Case sensitive

Cross-Platform:
        Runs on almost any server on several operating systems.
        Wide range of supported database.
          








Install XAMPP: https://www.apachefriends.org/download.html

Now fire on GUYZZ for our next big step towards PHP 💣💣

Full form of XAMPP is : 
X (cross-platform), Apache, MySQL, PHP, Perl
For Internal Server and Database in our system, we have to use it.

Now after installing XAMPP start MySql and Apache .



Now create a Folder in -- installation_directory:\xampp\htdocs\php_svt_2

here In this Folder, we will do the next operations.

Using PHP in HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-=8">
<title>First PHP Program</title>
</head>
<body>
<?php
echo "Hello World";   //for Printing line in PHP
?>
</body>
</html>




Save this in our folder php_svt_2  & give it .php extension.

Now open your browser and type: http://localhost/php_svt_2/



You can see this type now open your PHP file and you can see the printed line:




We can start Php code-writing from below::

<?php   ?>  --   Standard type Embedding
<?          ?> --   Short type Embedding
<%       %> --  .net type Embedding

**Short Type does not support Asynchronous Data.
**Standard type embedding supports Asynchronous & synchronous data

Synchronous data: Submitting the Data from Client to the server with Submit Button.
Asynchronous data: Submitting the Data from Client to the server without Submit Button.


<?          ?> 
<%       %> 

 **This two is not active in Real-time server we have to activate it manually, The best option is we use the default type embedding  --   ðŸ˜†

<?php   ?>


To activate other types Embedding : :




Click Config >> PHP(php.ini) >> 


Then from here activate that other types of Embedding.

DEFINING VARIABLE IN PHP :

  $a =25;   ✌
  $b=25.9; ✌




O/P: 


Addition in PHP:




PHP $ and $$ Variables :

$Var is a normal variable with the name var that stores any value like string, integer, float etc.
$$Var is a reference variable that stores the value of the $variable inside it.

Ex-1:
<?php
$x="abc";
$$x=200;
echo $x."<br/>";
echo $$x."<br/>";
echo $abc;
?>

O/P:

abc
200
200


Different Types of Loops :

  1. While loop
  2. Do-While loop
  3. for loop
  4. for each loop

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-=8">
<title>Loop</title>
</head>
<body>
<?php
$n=1;
while($n<=10){
echo $n;
$n++;
}

?>
</body>
</html>

O/P: 1 2 3 4 5 6 7 8 9 10


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-=8">
<title>Loop</title>
</head>
<body>
<?php
$n=1;
while($n<=10){
if($n%2==0)
{
echo $n;
}
$n++;
if($n==7){
break;
}
}
?>
</body>
</html>




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-=8">
<title>Loop</title>
</head>
<body>
<?php
do{
echo $n;
$n++;

}while($n<=7);

?>
</body>
</html>

O/P: 1 2 3 4 5 6 7

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-=8">
<title>Loops</title>
</head>
<body>
<?php
for($i=1;$i<11;$i++)
{
echo $i."<br>"
}
?>
</body>
</html>






























Web development with Html and PHP