Tag Archives: Connect Application

Introduction to PHP

What is PHP?

PHP stands for Hypertext Preprocessor. PHP is one of the first growing, free and platform independent server side scripting language. PHP is very easy to understand and user friendly programming language. The first version of PHP was released in 1994 by Rasmus Lerdof.

Sample PHP code

<?php
    echo "This is my first line.";
?>

Lets examine this code line by line:

1. The first line is consist of opening of tag, <?php. And it is mandatory.

2. The second line has echo statement, which is used to display text in browser when we run the php file. All string in PHP should pass between single quote or double quote. The second line ends with a semicolon. You must use semicolon after each statement ends. The semicolon is known as the terminator in PHP. Otherwise it will display error when you run the code.

3. The third line consist of the closing tag, ?>.The closing tag marks the end of the PHP code and it ismandatory.

How to Embed PHP in HTML

Lets discuss how to embed PHP codes in HTML page.

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First PHP Page</title>
<meta charset="utf-8">
</head>
<body>
<?php
   echo "This is my First PHP Page.";
?>
</body>
</html>

PHP parse error

A parse error is come across when the code has syntax errors in it .For example, each line of PHP code should end with a semicolon. If you don’t specify a semicolon, you will get parse error, and the code will not be executed. Similarly, you will get a parse error when you forgot to uses double quotes for strings. Apart for this, there are several others options that might display parse error. The PHP parser tells the exert line on which it encounters a parse error. So you can easily find the mistakes and rectify it.

The following code will display error, because it is missing the semicolon termination.

<?php
    echo "This is my first line."
?>

Escaping PHP Code

Escaping code is the process of overlooking instances of special characters in the code. The following code will display error. To avoid the error you can use an escape character (\) before double quote.

Wrong Code

<?php
  echo "Do you think, "You like php?"";
?>

Correct Code

<?php
  echo "Do you think, \"You like php?\"";
?>

Comment in PHP code

Comments are an primary part of any program. They are statement that are not executed along with the code. They help developers remember and recall why they have used a particular code block in a script.
There are four ways of specifying comments in PHP code:

<!-- You can put comment here -->

This is an HTML comment. Comments stated like this will be ignored by the browserand will not be interpreted.

//Put comment here.

This kinds of comments is commonly used within PHP codes.

#Put comment here.

The hash character can also be used to specify comments within PHP code.

/* 
Put comment here 
Here you can comment multiple lines    
*/

HTML Colors

You can define HTML colors as string, number or hexadecimal value. But it is always recommended to define the value as hexadecimal. All browser supports hexadecimal color codes.

RGB Colors:

RGB stands for Red, Green and Blue. The HTML format for a RGB value is rgb (Value of RED, Value of GREEN, Value of BLUE). The value range are from 0 to 255. rgb(0,0,0) stand for Black color and rgb(255,255,255) stands for White color.

<body bgcolor="rgb(255,0,0)"> - Returns Red color
<body bgcolor="rgb(0,255,0)"> - Returns Green color
<body bgcolor="rgb(0,0,255)"> - Returns Blue color
<body bgcolor="rgb(255,255,255)"> - Returns White color
<body bgcolor="rgb(0,0,0)"> - Returns Black color

Hexadecimal Colors:

A hexadecimal color code starts with a hash(#) and followed by 6 alpha numeric value. Like #000000 stands for Black color and #FFFFFF stands for White color. The First 2 letter stands for Red, next 2 forGreen and last 2 letter for Blue color. The range is from Zero (0) to F. The Hexadecimal color values are 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F total 16 digits.

The Hexadecimal colors created with a simple formula.

(First digit x 16) + Second digit = RGB Color value

If you write #000000 then as per the formula (0x16 + 0) = 0 so it Will be rgb(0,0,0) and it is black in color.

If you write #FFFFFF then as per the formula ((15 x16) +15) = 255 so the result will be rgb (255,255,255) and it is white in color.

So, with the help of the above formula you can convert any hexadecimal color code to RGB.

<body bgcolor="#FF0000"> - Returns Red color
<body bgcolor="#00FF00"> - Returns Green color
<body bgcolor="#0000FF"> - Returns Blue color
<body bgcolor="#FFFFFF)"> - Returns White color
<body bgcolor="#000000"> - Returns Black color

Convert RBG Color to Hexadecimal Color:

RED GREEN BBLUE Result
#
<bgcolor=”#FFFFFF”>
<bgcolor=”rgb(255,255,255)”>

Convert Hexadecimal Color to RGB Color :

RED GREEN BBLUE
#
<bgcolor=”#FFFFFF”>
<bgcolor=”rgb(255,255,255)”>

HTML Meta Tags

HTML Meta Tages can be used to specify additional metadata about a document, such as author,publication date, expiration date, page description, keywords, or other information not provided through the other header elements and attributes. Because of their generic nature, meta elements specify associative key-value pairs.

Meta elements can specify HTTP headers which should be sent before the actual content when the HTML page is served from Web server to client

Example

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

Adding Meta Tags

You can add metadata to your web pages by placing <meta> tags between the <head> and </head>tags. The can include the following attributes:

Attribute Description
Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
content Specifies the property’s value.
scheme Specifies a scheme to use to interpret the property’s value (as declared in the content attribute).
http-equiv Used for http response message headers. For example http-equiv can be used to refreshthe page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

More Examples

This meta element defines a description of your page:

<meta name="description" content="Web Tutorials on HTML, CSS">

This meta element defines keywords for your page:

<meta name="keywords" content="HTML,DHTML,CSS,XML,XHTML,JavaScript" />

The date and time after which the document should be considered expired:
Web robots may delete expired documents from a search engine, or schedule a revisit.
Dates must be given in RFC850 format, in GMT. E.g. (META tag):

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT" />

The HTTP content type may be extended to give the character set.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-2022-JP" />

Specifies the default scripting language in a document:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript" />

Specifies the default style sheet language for a document:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css" />

Declare the natural language of the document:

<META HTTP-EQUIV="Content-Language" CONTENT="en-GB" />

Specifies a delay in seconds before the browser automatically reloads the document:

<META HTTP-EQUIV="Refresh" CONTENT="3;URL=http://www.some.org/some.html"/>

Refresh the page every 5 seconds:

<meta http-equiv="refresh" content="5" />

Specifies the named window of the current page; can be used to stop a page appearing in a frame with many (not all) browsers:

<META HTTP-EQUIV="Window-target" CONTENT="_top" />

Controls Web robots on a per-page basis:

<META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW" />

HTML5 Forms

HTML 5 Form Input Types

Lets discuss what are the new input type introduced in HTML 5 and how to use them.

color [Browser: Opera 11+, Chrome 20+ ]

It used to give an option to the user to select a colour through a color picker. It returns the value as hexadecimal.

<input id="myColor" name="myColor" type="color">

Dates and times [Browser: Opera 11+, Chrome 20+ ]

HTML 5 has introduced 6 input types for date related functionality. Like date, datetime, datetime-local, time, week and month.

Date

<input id="myDate" name="myDate" type="date">

You can also assign date range as min and max attribute as yyyy-mm-dd format.

<input id="myDate" name="myDate" type="date" min="2013-01-01" max="2013-12-31">

Input type datetime is only supported by Opera 9+ and datetime-local will not work in any browser, though you can use it as an input type in your form. So let’s forget about both input type for now.

Time

<input id="myTime" name="myTime" type="time">

Number [Browser: Opera 11+, Chrome 8+ , Safari 5 on MAC]

Another input type introduced in HTML 5 is number. This will force user to enter number only. In case of Iphone the browser will display number pad only.

<input id="myNum" name="myNum" type="number">

Attributes used in number type are valueminmax and step. Value is used to set the default value and where min and max are used to set the Minimum and Maxim value of the input field. Step sets the increment or decrement value of the number field.
The following example will set the default / minimum value of the number field to 10 and maximum to 100. It will increase  or decrease by 2points each time the user change it.

<input id="myNum" name="myNum" type="number" 
       value="10" min="10" max="100" step="2">

Range [Browser: Opera 11+, Chrome 8+ , Safari 5 on MAC]

In order to create a Slider in HTML we can use input type range. Though this will not look fancy, you can use is as a basic slider. You can use negative values in range.
Attributes used in range are  valueminmax and step.

<input id="myRange" name="myRange" type="range" 
       value="10" min="10" max="100" step="2">

Email:

Force user to enter valid email address.

<input id="myEmail" name="myEmail" type="email">

URL:

Force user to enter valid URL.

<input id="myURL" name="myURL" type="url">

Tel:

Force user to enter valid phone number.

<input id="myPhone" name="myPhone" type="tel">

HTML Forms

HTML forms are used to send information to server. You can use input elements like text fields, radio buttons, check box, dropdown etc. to capture information. You can use multiple forms in a single HTML page, but you can’t use one form inside another form.

<form action="contact.php"></form>

Form and the Attribute:

Action: This attribute is used to send the information to the specified page. In the following page the value of all input filels will send to contact.php page.

<form action="contact.php"></form>

Autocomplete: As you start type in a input fields your browser history shows the previously enteredvalue, to avoid that you can set autocomplete off.

<form action="contact.php" autocomplete="off"></form>

Method: Method is use to set the send method of the form. It can either be GET or POST. To know more please click here.

<form action="contact.php" method="post"></form>

Name: Name attribute is used to assign a name to the form. It may required in JavaScript.

<form action="contact.php" method="post" name="myForm"></form>

HTML Forms Input Element

The Input elements are used to capture the user information.

<form action="contact.php" method="post" name="myForm">
<input type="text" />
</form>

Input and the Attribute:

Type: This attribute is use to define what type of element you want to display. It can be button, checkbox, file, hidden, image, password, radio, reset, submit or text.

<form action="contact.php" method="post" name="myForm">
<input type="text" />
</form>

Name: This is used to assign a name to the input fiel. Plese use unique name to each element in a form.

<form action="contact.php" method="post" name="myForm">
<input type="text" />
</form>

Value: This attribute is use to set the default value of an element.

<form action="contact.php" method="post" name="myForm">
<input type="text" value="Enter Name" />
</form>

You can also set the height, width of an text input field. And also assign calss and id to any input field.