PHP Constants

Constants are same like variables but once constants values are defined it can not be changed or undefined. Constants are used to define settings/configurations which remains same through out the execution. actually constants are used when you want a surety that these values will not change in throughout program execution cycle.

Define Constant

Define constant is very simple like define(“constant name”,”Value”);

<!doctype html>	
<html>
	<head>
	<title>
		PHP Constants
	</title>
	</head>
	<body>
		<?php
			define("WELCOME","Welcome to PHPDocs.com!");
			
			echo WELCOME; //this is will output Welcome to PHPDocs.com!
		?>
	</body>
</html>

PHP Strings

if we see the real word string then it’s the bunch of threads. same in the programming world if we have stream of characters it is called string

Concatenation

in our daily life programing tasks we need many time to join different string to show the proper output. in PHP we concatenate the two or more strings with dot(.)

<!doctype html>	
<html>
	<head>
		<title>
			PHP String Concatenation
		</title>
	</head>
	<body>
	<?php
		$name="Qasim";
		echo "Welcome ".$name; //output shows "Welcome Qasim"
	?>
	</body>
</html>

String Type

In php we are allowed to wrap our string with double quote(“text”) or with single quote. but both have difference if you want exact string content then enclosed your string into single quote. else if you are suing a variable in your string then use Double quote for proper execution of variable.

<!doctype html>	
<html>
	<head>
		<title>
			PHP String Types
		</title>
	</head>
	<body>
	<?php
		$name="Qasim";
		echo 'Variable name is $name'; // it shows Variable name is $name
		
		echo "Welcome Mr. $name"; //it shows Welcome Mr. Qasim
	?>
	</body>
</html>

Escape Character

Some time we require single quote (‘) or double Quote (“) in our content. but these two characters are used by php so we are required to use escape sequence to include such a special characters which are not usable in straight way. Escape characters starts with “\”

<!doctype html>	
<html>
	<head>
		<title>
			PHP Escape Character
		</title>
	</head>
	<body>
	<?php
		//Usage of single Quote (')
		echo 'My all class teacher\'s are very nice'; 
		
		echo "Welcome Mr.\t$name"; //Tab Escape Sequence
	?>
	</body>
</html>


PHP Variable Scope

In PHP any where you can create variables. Scope of a Variable is the part of the script where the variable can be referenced/used.

PHP has 3 different level scope variables

  • Local
  • Global
  • Static

Global vs Local Scope

A Variable declared outside of function has a global scope. and can be accessed outside of a function.

A Variable declared with in a function has a local scope. which can onle be used with in a function.

<?php

$a=10; //Global Variable

function ShowUsers(){
	$a=5; //Local Scope
	echo "Total Users are $a <br/>";
}

ShowUsers();
echo $a;
?>

Now we created two $a variables but both contains own values why ? because $a which is created outside of function is accessible to every where except functions. and other $a is created inside function which is only accessible with in a function.

PHP GLOBAL Keyword

In PHP we use GLOBAL Keyword before variable name when we want to access variable every where.

<?php
$a=10; 
$b=20;
function ShowUsers(){
	GLOBAL $a,$b
	$a+=$b;
}

ShowUsers();
echo $a;// output will show 30
?>
	

PHP STATIC Keyword

Normally when a function complete it’s execution it’s variable are deleted. however some times are required to preserve some local variables to save for further use.

To do this we use STATIC Keyword before variable name

<?php

function Counter(){
	STATIC $a=0; //Static Variable
	echo $a;
	++$a;
}

Counter(); // it will output 0
Counter(); // it will output 1
Counter(); // it will output 2
?>
	


PHP Syntax &
Hello World Example

Syntax

PHP Script can be placed any where in the document. and it start’s with <?php and ends with ?>

<?php

//php Code goes here

?>

By Default php file Extension is .php but you can also override the extension in your web server settings to your required extension.

Hello World Example

PHP document contains html, Java-Script, Css or any other front end scripting language.

in below example we will use the php code in the body of html. echo is used to print data.

<!doctype html>	
<html>
	<head>
		PHP Hello World Example
	</head>
	<body>
	<?php
		echo 'Hello World';
	?>
	</body>
</html>

Comments

Comment is very important ingredient in every programming language. PHP Provide Single line comments and also multi line comments option.

			  
<!doctype html>	
<html>
	<head>
		PHP Hello World Example
	</head>
	<body>
	<?php
	
		//This is a single line comment.
		
		#This is another way of writing single line comment.
		
		/*
		 *This is a 
		 *Multi line 
		 *Comment
		 */
		 
		 $value=10; //you can also comment like that.
		 $total=$value/*here you can also place the comment*/+20;
	?>
	</body>
</html>

PHP Rules

  • PHP Syntax based on C
  • PHP Every line terminates with semi colon (;)
  • PHP Keywords like (e.g if-else,for, echo, etc.), classes, functions and user-defined functions are not case sensitive.
  • PHP Variables are case sensitive

PHP
Variables

Variables

PHP Variables are just like a cup which can store water, tea, ice-cream. same in php we can store integer, string, character, decimal value in a variable without defining it’s data type.

<!doctype html>	
<html>
	<head>
			<title>
				PHP Variables
			</title>
	</head>
	<body>
		<?php
		//String Variable
		$Name="Qasim";
		
		//Numeric Variable
		$Marks=785;
		
		//Decimal Variable
		$Height=5.78;
		
		//Character Variable
		$Grade='A';
		?>
	</body>
</html>

PHP Variable Rules

  • A Variable Starts with $ sign
  • A Variable Starts with Letter or Underscore after the $ Sign
  • A Variable can’t start with Number or any other special charter except underscore
  • A Variable can contains Alphabets, Number and underscore from special characters like (A-Z, a-z, 0-9, and _)
  • Variable names are case sensitive so be carefull with this

Introduction to
PHP

PHP is a server-side scripting language designed for web development
but also used as a general-purpose programming language. Originally created by Rasmus Lerdorf in 1994, the PHP reference implementation is now produced by The PHP Group

Features

PHP is mainly focused on server-side scripting, so you can do anything any other CGI program can do, such as below.

  • Collect form data
  • Generate dynamic page content
  • Send and receive cookies
  • Data Create, Read, Update, Delete operations with Famous Database Systems Like Mysql, Sql Server and many more
  • File Open, Read, Write, Delete functions at Server Side
  • Execute System Level Commands according to system access level
  • Data Encryption

But PHP can do much more. You can access the PHP program output with a web browser, viewing the PHP page through the server.

Why PHP

  • Open Source
  • Cross Platform Compatibility (Windows,Mac, Linux, Unix, Solaris, etc.)
  • Compatible with almost every Web Server Platform (IIS,Apache, etc.)
  • Works with wide range of Database System
  • Easy to learn, heavy community support, lots of resources
  • Famous CMS Systems are made in PHP (WordPress, Joomla, Opencart, etc.)

CSS
Media Queries

Media queries are used when the site or app need to be modified according to a device’s general type.

Media Query Breakdown

Here is the breakdown of Media Queries

Media Query Example

Below example will demonstrate the basic architecture of Media Queries

<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style> 
            @media screen and (min-width: 480px) {
                body {
                    background-color: #007bff;
                }
            }  

          @media screen and (min-width: 600px) {
              body {
                  background-color: #343a40;
                  color: #fff;
              }
          }
        </style> 
    </head>
  
    <body>
        $lt;h1>PHPDocs$lt;/h1>
        $lt;p>Resize the window and see the magic$lt;/p>
    </body>
</html>

CSS
Pagination

Pagination links allow users to surf through the content easily by dividing the document into pages and providing them with numbers.

Pagination Example


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style> 
            .pagination { 
                display: inline-block; 
            } 

            .pagination a { 
                font-weight:bold; 
                font-size:20px; 
                color: black; 
                float: left; 
                padding: 8px 16px; 
                text-decoration: none; 
            } 
            .pagination a.active { 
                background-color:#009900; 
            } 
            .pagination a:hover:not(.active) { 
                background-color: #d4d5d2; 
            } 
            .GFG { 
                font-size:42px; 
                font-weight:bold; 
                color:#009900; 
                margin-left:100px; 
                margin-bottom:60px; 
            } 
            .peg { 
                font-size:24px; 
                font-weight:bold; 
                margin-left:90px; 
                margin-bottom:20px; 
            } 
        </style> 
    </head>
  
    <body>
        <div class="pagination"> 
            <a href="#">«</a> 
            <a href="#">1</a> 
            <a href="#">2</a> 
            <a href="#">3</a> 
            <a href="#">4</a> 
            <a class = "active" href="#">5</a> 
            <a href="#">6</a> 
            <a href="#">7</a> 
            <a href="#">8</a> 
            <a href="#">9</a> 
            <a href="#">10</a> 
            <a href="#">»</a> 
        </div> 
    </body>
</html>

CSS
Buttons

Here are some ways to style buttons in CSS.

Buttons

PropertySyntaxOutput
Button Color.button {background-color: #343a40;}
Button Size.button {font-size: 20px;}
Rounded Button.button {border-radius: 4px;}
Button with Colored Borders.button {border: 2px solid #4CAF50;}
Hoverable Button.button:hover {background-color: #4CAF50; }
Shadow Button.button {box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),
0 6px 20px 0 rgba(0,0,0,0.19);}
Disabled Button.button {background-color: #343a40;}


CSS
Transitions & Animations

CSS property transitions allow the appearance and behavior of an element to be altered in multiple ways.

Transition Property

The transition-property determines what properties will be transitioned.

ValueDescription
BackgroundIt only transitions the background property
ColorIt only transitions the color property
TransformIt only transitions the transform property
AllIt transitions all the properties
NoneThe transition is instant as the element transitions no property

Example:

<!doctype html>  
<html>
    <head>
        <title>...</title>

        <style type="text/css">
            .box {
                background: #2db34a;
                border-radius: 6px
                transition-property: background, border-radius;
                transition-duration: 1s;
                transition-timing-function: linear;
            }
            .box:hover {
                background: #ff7b29;
                border-radius: 50%;
            }
        </style>
    </head>
  
    <body>
        <div class="box">Box</div>
    </body>
</html>

Transition Duration

The transition-duration property set the duration in which a transition takes place. The value of this property can be set using general timing values, including seconds (s) and milliseconds (ms).

ValueDescription
0sThe transition is instant as the element transitions no property
1.2sIt uses decimal values in seconds with the keyword “s”
2400msIt uses decimal values in milliseconds with the keyword “ms”

Example:

<!doctype html>  
<html>
    <head>
        <title>...</title>

        <style type="text/css">
            .box {
                background: #2db34a;
                border-radius: 6px;
                transition-property: background, border-radius;
                transition-duration: .2s, 1s;
                transition-timing-function: linear;
            }
            .box:hover {
                background: #ff7b29;
                border-radius: 50%;
            }
        </style>
    </head>
  
    <body>
        <div class="box">Box</div>
    </body>
</html>

Transition Time

The CSS property transition-timing-function is used to set the speed in which a transition will move.

ValueDescription
easeIt starts slowly, accelerates in the middle, and slows down at the end
ease-inIt starts slowly, and accelerates gradually until the end
ease-outIt starts quickly, and decelerates gradually until the end
ease-in-outIt starts quickly, and decelerates gradually until the end
linearIt has a *constant speed
step-startIt jumps instantly to the final state
step-endIt stays at the initial state until the end, when it instantly jumps to the final state

Example:

<!doctype html>  
<html>
    <head>
        <title>...</title>

        <style type="text/css">
            .box {
                background: #2db34a;
                border-radius: 6px;
                transition-property: background, border-radius;
                transition-duration: .2s, 1s;
                transition-timing-function: linear, ease-in;
            }
            .box:hover {
                background: #ff7b29;
                border-radius: 50%;
            }

        </style>
    </head>
  
    <body>
        <div class="box">Box</div>
    </body>
</html>

Transition Delay

CSS transition propert delay sets a time value, seconds or milliseconds, that determines how long a transition will take time before execution.

ValueDescription
0sIt will wait zero seconds, and thus start right away
1.2sIt uses decimal values in seconds with the keyword “s”
2400msIt uses decimal values in milliseconds with the keyword “ms”
-500msIt uses negative values so the transition will start as if it had already been playing for 500ms.

Example:

<!doctype html>  
<html>
    <head>
        <title>...</title>

        <style type="text/css">
            .box {
                background: #2db34a;
                border-radius: 6px
                transition-property: background, border-radius;
                transition-duration: .2s, 1s;
                transition-timing-function: linear, ease-in;
                transition-delay: 0s, 1s;
            }
            .box:hover {
                background: #ff7b29;
                border-radius: 50%;
            }

        </style>
    </head>
  
    <body>
        <div class="box">Box</div>
    </body>
</html>