Tag Archives: High Quality Designs

PHP Function

Introduction to function

A function is a part of independent code that can be use to perform any specific task. Function are use to get the required output. The output entirely depends on the code you specified in it. You can call the same function as many time as you want in the same page. A function does the fallowing things:

Accept value

A function accept values from the argument passed to it. But this is an optional part. You may not assign any value to a function.

Process value

A function executes the code specified within it.

Perform an action

Lastly this is the output that returns after the function is executed.

The advantage of using function in code are that, a function makes a code simple to read and understand and also ensure reusability of codes. This is because the same function can be called several times. To use a particular piece of code specified within a function, the developers just need to call the specific function.

Features of PHP functions

– Function are self contained .That is they are self sufficient blocks of code that can operate independently.
– A function needs to called in a spirit to be executed.
– Values can be passed with functions.
– A function can be declared and hen executed whenever required.
– A particular function can be called several times within the same page.
– A function can consist of PHP code, other functions, or a class definition.
– A function cannot be redefined after it is declared.

User defined versus built in function

In PHP ,function can be broadly categorized as user defined or built in functions. User define functions as the name suggest, are function created by a user as per requirement so the programmer can completely customize.

Unlike user defined functions, built in function are prewritten functions that are part of PHP. These functions have a predetermined functionality that doesn’t change. There are hundreds of built in functions available with PHP.

How to Define a Function

<?php
function MyFunction($value1, $value2){
 /* write your code here */
}
?>

Create a Simple Addition Function

<?php
function addMe($value1, $value2){
 $result = $value1 + $value2;
 return $result;
}
/* Call in action */
print addMe('6','3');

?>

The Output will be : 9.

PHP Data Handling

Handling data

Every programming language has its own set of data types that help developers to write programs. A data type is a classification of data . This could mean categorizing the the type of data as an amount of money, time or percentage. In PHP the data type can be broadly classified as scalar and compounddata types.

Scalar data type

Four type of data comes under the category of scalar data type: Boolean, integer, float and string.

Boolean

The Boolean data type can either be true or false. The numeric representation of the Boolean data type is 1 for true and 0 for false. The the fallowing example uses this data type:

<?php
$myVal = True; // Boolean variable type.
?>

Integer

An integer data type consist of numbers. You can use both negative or positive numbers like […-2,-1,0,1,2,3,…]. The size of an integer in PHP solely depends on the operating system that you are using. typically , the size of an integer can be up to 2 billion. In the fallowing code, $myVal is aninteger type variable with a value of 9:

<?php
 $myVal =9; //Is an integer.
?>

Float

A float is a data type that is also use for storing numbers. Usually floats are use to express decimal numbers, you can use the integer data type for non decimal numbers. Floats are also known as doubles or real numbers and have a precision of up 14 decimal places. In the fallowing code ,$floatVal is a float type variable and has a value of 9.98765:

<?php
$ floatVal = 9.98765 // Is a float type variable
?>

String

A string can be best defined as a series of characters. In PHP, a character is nothing but a byte. There are 256 different types of characters that can be used in strings. There is no maximum limit specification in relation to strings to PHP; therefore you need not worry about a very long string .There are two ways to specify a string discussed on fallowing sections.

Single quoted

You can use single quotes to specify a simple string. How ever when a string is enclosed in single quotes and it also contains some text enclosed in double quotes, you must use the backslash escape character to escape the single quotes. In other wards when you don’t want to parser to treat single quotes as syntax and display them as part of the output of the code, you need o use a back slash beforethe single quotes.

Lets consider a simple example to understand how single quotes are used to specify a string:

<?php
      echo 'This is my First String'; // will print the string on the screen.
?>

Now consider an example where double quotes are used within single quotes and single quotes is represent in the text enclosed in double quotes:

echo 'Rishi says: "I'm doing well "'; , //will display error.

When you try to execute this statement, an error message will appear on the screen. This is because when you use a single quote within double quotes, you need to escape the single quote with a backslash. In the fallowing statement is written correctly:

echo 'Rishi says: "I\'m doing well "'; , //is Correct now.

The output will be Rishi says: “I’m doing well”.

Another thing that you should remember when using single quoted string is that such string don’t support variable expansion: If you use a name of variable within single quote and try to print the value of a variable, the name of the variable will be printed instead of its value. Consider the fallowing example:

<?php
  $name='Rishi';
  echo 'Hello $name';
?>

The output will be Hello $name.
The correct syntax is

<?php
  $name="Rishi";
  echo "Hello $name";
?>

The output will be Hello Rishi.

Double quoted

A double quoted strings supports several other escape characters as follows
– \n: new line
– \r: carriage
– \t: Horizontal tab
– \\: backslash
– \$: Dollar sign
– \”: Double quote

HTML Attributes

Many HTML tags have a unique set of their own attributes. These attributes are divided into core attributesinternationalization attributes, and scripting events. Attributes are always specified in the start tag and come in name/value pairs like: name=”value”

Example

<a href="http://www.a2zwebhelp.com">Link to my website.</a>
<p id="firstp">This is my first paragraph.</p>
<h2 align="center" title="center text">Centered Heading</h2>

HTML Attributes with category

Category Attributes Name
Core Attributes id <p id=”myid”>My Text.</p>
class <div clsss=”newclass”> Text </div>
name <form name=”arup”></form>
style <span style=”font-family: arial”> Arial</span>
title <h1 title=”Heading”> Heading </h1>
alt <img src=”” alt=”my image”>
align <p align=”left”></p>
valign <td valign=”top”>&nbsp;</td>
bgcolor <td bgcolor=”#808080″>&nbsp;</td>
background <td background=”filepath”>&nbsp;</td>
width <img width=”100px”>
height <img width=”100px” height=”100px”>
Internationalization Attributes LANG <span lang=en>Welcome</span>
DIR
Common Scripting Events ONCLICK mouse button is clicked on an element.
ONDBLCLICK mouse button is double-clicked on an element
ONMOUSEDOWN mouse button is pressed over an element
ONMOUSEUP mouse button is released over an element
ONMOUSEOVER mouse is moved onto an element
ONMOUSEMOVE mouse is moved while over an element
ONMOUSEOUT mouse is moved away from an element
ONKEYPRESS a key is pressed and released over an element
ONKEYDOWN a key is pressed down over an element
ONKEYUP a key is released over an element

Introduction to HTML5

HTML stands for Hyper Text Markup Language. HTML is an application of the Standard Generalized Markup Language (SGML) which is the International Standard (ISO 8879) for text markup. As you know HTML is not a programming language, it is a markup language and it is a set of markup tags. Thelatest version on HTML is know as HTML5. HTML5 has many new tags and attributes to make web sitedesigning simple and attractive. You can create simple and nice animation with the help of HTML5 and CSS3.

What’s new in HTML 5

Let’s discuss what are the new tags and attributes introduced in HTML 5. For the very beginning it makes the document type very simple. Forget about the long document type used in the older version of HTML.

HTML 5 Doctype and Charset

<!doctype html>
<meta charset="UTF-8">

Yes, very simple. To define document type just use doctype as html and for character encoding use charset =’UTF-8′ or something like that.

HTML 5 Structure

HTML 5 can recognize the structure on a web page. The new tag introduced for structure are <header>, <nav>, <section>, <aside>, <article>, <figure>.

<header>   It defines the header part of a webpage.
<nav>  It defines the navigation menu on a webpage.
<section> It used to define the sections of a webpage.
<aside>  It used to defines sidebar on a webpage.
<article>  It defines the content area on a webpage.
<figure>  It defines images that embedded in a webpage content.
<footer>  It defines the footer of a webpage.

You can assign a class or Id to the above tags as you do it for <div> tag.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML 5 Page</title>
<meta name="title" content="My First HTML 5 Page"/>
<meta name="description" content="My First HTML 5 Page"/>
<meta name="keywords" content="My First HTML 5 Page"/>
<meta charset="utf-8">
</head>
<body>

<!-- header -->
<header>
<div> <!-- Head section goes here --> </div>
</header>

<!-- menu -->
<nav>
<div> <!-- Top menu goes here --></div>
</nav>

<!-- Sidebar -->
<aside>
<!-- Left side bar goes here -->
</aside>

<!-- content -->
<section>
<div>
<article><!-- First article goes here --> </article>
<article><!-- Second article goes here --> </article>
</div>
</section>

<!-- footer -->
<footer>
<!-- Footer content goes here -->
</footer>

</body>
</html>

Responsive Webpage Layout

Responsive Webpage Layout Design

Lets create our first responsive web page. As we discuss before our layout should auto resize in different screen resolution and should work fine in different device like computers, iPads and phones.

Click here to view list of devise and screen resolution in pixels.

HTML Code:

<body>
<div>
<!-- Heasder Starts Here --> 
<header>
<div> <!-- Head section goes here --> </div>
</header>
<!-- menu -->
<nav>
<div> <!-- Top menu goes here --></div>
</nav>
<div>
<!-- Sidebar -->
<aside>
<!-- Left side bar goes here -->
</aside>
<!-- content -->
<section>
<div>
<!-- Text Content Goes here -->
</div>
</section>
</div>
<!-- footer -->
<footer>
<!-- Footer content goes here -->
</footer>
</div> <!-- End of Wrapper -->
</body>

Output:

CSS Code:

body {
font-size: 12px;
line-height: 22px;
font-family: arial, sans-serif;
color: #828282;
background-color:#F1F1F1;
max-width: 980px;
margin: 0 auto;
}
.wrapper{ 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto;
}

.header{
float: left;
width: 100%;
height: 120px;
border: 5px solid #FFFFFF;
border-radius: 10px;
margin: 5px 0 0 0;
background-color: #e9f7fd;
}
.menu{
float: left;
width: 100%;
height: 40px;
border: 5px solid #007aad; 
border-radius: 10px;
margin: 5px 0 0 0;
background-color:#009bdb;
}
.content{
float: left;
width: 100%;
border: 5px solid #FFFFFF; 
border-radius: 10px;
margin: 5px 0 0 0;
background-color:#FFFFFF; 
}

.left-side{
float: left;
width: 220px; 
margin: 5px;
border-radius: 10px;
background-color:#009bdb;
min-height: 600px; 
height: auto !important; 
height: 600px; 
}
.container{
float: left;
width: 740px; 
min-height: 600px; 
height: auto !important; 
height: 600px; 
margin: 5px;
border-radius: 10px;
background-color:#F5F5F5; 
}
.footer{
float: left;
width: 100%;
height: 60px;
border: 5px solid #FFFFFF;
border-radius: 10px;
margin: 5px 0 10px 0;
background-color: #bdc8cd;
}

/* Lets make the Design Responsive */

@media (min-width: 960px) and (max-width: 1023px) { 
/* CSS for browsers less than 1024px*/
body { max-width: 920px; }
.left-side{ width: 200px; }
.container{ width: 700px; }
}

@media (min-width: 768px) and (max-width: 959px) { 
/* CSS for browsers less than 960px*/
body { max-width: 720px; }
.left-side{ width: 200px; }
.container{ width: 500px; } 
}

@media (min-width: 600px) and (max-width: 767px) { 
/* CSS for browsers less than 768px*/
body { max-width: 580px; }
.left-side{ width: 200px; }
.container{ width: 360px; }
}

@media (min-width: 480px) and (max-width: 599px) { 
/* CSS for browsers less than 600px*/
body { max-width: 460px; }
.header{ width: 450px; border: 3px solid #FFFFFF; border-radius: 5px; }
.menu{ width: 450px; border: 3px solid #007aad; border-radius: 5px; }
.content{ width: 450px; border: 3px solid #FFFFFF; border-radius: 5px; }
.left-side{ width: 445px; margin: 5px 2px 5px 2px;}
.container{ width: 445px; margin: 5px 2px 5px 2px; } 
.footer{ width: 450px;border: 3px solid #FFFFFF; border-radius: 5px; }
}

@media (min-width: 320px) and (max-width: 479px) { 
/* CSS for browsers less than 480px*/
body { max-width: 310px; }
.header{ width: 300px; border: 3px solid #FFFFFF; border-radius: 5px; }
.menu{ width: 300px; border: 3px solid #007aad; border-radius: 5px; }
.content{ width: 300px; border: 3px solid #FFFFFF; border-radius: 5px; }
.left-side{ width: 294px; margin: 5px 2px 5px 2px;}
.container{ width: 294px; margin: 5px 2px 5px 2px; } 
.footer{ width: 300px;border: 3px solid #FFFFFF; border-radius: 5px; }
}

@media (max-width: 319px) { /* CSS For 320px or less browsers */
body { max-width: 100%; }
.left-side{ width: 96%; }
.container{ width: 96%; }
}

Download File from here