Step 1: Add the 960 grid

Alignment is essential for any sort of design. We will use 960s Grid system which you can download it from here. Once file is downloaded open 960_grid_12_col.psd which is within photoshop folder. Usually the document size is 1080 X 1080 px but we need 1200 X 1100 px for our template. To change the template size go to Image -> Canvas size, input 180 width and 80 height and select top arrow. This will make the template 1200 X 1100 px. To fill the background layer with white color, select background layer, press Shift + backspace and fill it with white.

Step 2: Folder structure

I like to maintain structure while designing anything and like you to do so. Divide this design into 3 part (Header, Body and Footer). To implement this create three folder with name Header, Body and Footer in layer palette. We will work on each section step by step: first on header, then body and finally on footer.

Head Section

Step 3: Add gradient background on header

Before adding gradient background we will add guide lines. Click View -> New Guide, select horizontal and input 100 for position. Repeat same step to add guide line of 140px and 180px.

To add gradient background on header section create a new layer called Header bg. Using marquee tool create a selection of 1200×140px then click Shift+Backspace and fill it with any color. Then right click the Header bg layer and select blending options. Apply following settings for gradient overlay according to the following image.

Step 4: Add two pixel lines

About 80px from top add we will add two one pixel lines. Create a new layer called Line 1px dark, select marquee tool and select 940 x 1 px as shown in the image below.

Fill the layer with #A54E0F, repeat same for other 1px line, call it Line 1px dark and fill it with #E37D1E.

Step 5: Clean up time

Its good habit to start organizing your file right from the beginning. If you have been working on the same folder (Header bg) all layer we created till now should be in it. Even if you didn’t no need to worry. Lock your Background layer.

Using marquee tool drag selection from outside of the document so that three layer Header bg, Line 1px light and Line 1px dark are selected. Now in layer palette drag the selected layers to Background folder. From now onwards I will not explain this step to organize file instead just refer to Step 5.

Step 6: Insert your logo

Type in PORTFOLIA just above 1px lines, right click the portfolia layer and add blending option with the following settings.

Now we will add fade light behind logo to do so create a new layer call Fade, set Layer mode to Overlay. Using Rectangle Marquee Tool select a rectangle just to cover the logo then choose a soft brush of 175px and set the color to #FFFFFF. Click on the layer few times to give it a fade effect. You should have a light effect behind the logo.

Step 7: Call to action button

Select Rounded rectangle tool and set radius to 15px. Drag to create a 225 x 30 px round rectangle, name it Orange rectangle. Add layer style with the following settings.

We need to add white/grey gradient round rectangle on right hand side of call to action button. We cannot use rectangle tool in this situation so we will use pen tool to create our custom round rectangle. Select pen tool draw semi circle shape as shown below.

Add following layer settings to the layer.

Write a phone number and give a outler glow in the layer style setting.

Add call us text and use following setting.

We are almost finished with call to action button but need last bit to be added. Add two 1px lines between call us text and phone number.

Create a folder called “Call to action button” and follow step 5

Step 8: Add navigation

Select round rectangle tool with radius set to 10px. Draw round rectangle of 100 x 40px dimensional.

Add text to navigation menu.

• Font-family: Verdana
• Font-size: 14pt
• Font-style: Regular
• Font-color: #FFFFFF

Lets add some shadow below menus to do so create a new layer called Nav bottom shadow. With the help of rectangle tool draw a rectangle of 1200×40px and add drop shadow with the following settings

We are done with Header section so place all the layers and folders inside Header folder except Background layer.

Body Section

Step 9: Image slider

Download three images from SXC

• Sunflower and coriander
• CGI waves
• Delicate Floral Background 4

Place the downloaded images on the document. Resize the Sunflower and coriander image to 300×200px and place it on the middle of the document. Resize other 2 images to 240×158px and place it left and right of the document. After aligning images, blur the two small images. Go to Filter-> Blur-> Motion Blur. Set the angle to 180 and distance to 6px.

Now its turn for shadows. Using Rectangle tool create a rectangle of 300 x 120px and fill it with #000000 (black) color.

Then right click on the rectangle and select perspective.

Drag the anchor from one of the top end to make it similar to image below. Now go to Filter-> Blur-> Motion Blur. Set the angle to 180 and distance to 6px. Then go to Filter-> Blur-> Gaussian Blur, set the radius to 5.5 px. During blurring the image a pop up window will ask to rasterize the shape first, click ok.

Move the layer behind the image and it should look like the image below.

Repeat same steps with smaller rectangle for other two images.

Step 10: Slider bar

Draw a slider bar for the slider by using a Rounded rectangle tool with radius set to 20px. Again using Rounded rectangle tool with radius set to 8px draw a rectangle of 70 x 26px. Apply following blending option settings to the slider.

Time to add some slider grip to the slider button. Using Rectangle marquee tool draw a 1 x 13px and fill it with white. Next apply gradient overlay setting to the layer, name it 1px gradient line. Replicate the layer 4 times and move copied layer to adjecent sides.

Step 11: Content area

Add two new guides at 480 and 520 px. Then download icons from Pixel-mixer basic set and Pixel-mixer basic set 2. Drop setting tool icon from basic set 2 from the downloaded icon.

Write some text for the title with following settings

• Font: Arial
• Font size:18px
• Color: #E5932A
• Font style: Italic

Do similar for main text with following settings

• Font: Arial
• Font size:13px
• Color: #79807C
• Font style: Regular

Repeat this step with different text and icons. Then it should look like the following image.

Time to organize file again. Create folder call “Main content” and repeat Step 5.

Step 12: Testimonial

Add two new guides at 620 and 660 px. Using Rounded rectangle tool create rectangle with radius set to 10px (Width: 940px and height: 140px). Apply following setting to the layer.

Using pen tool add two points on the rectangle then using direct selection tool drag the right point as show on below image to create kind of arrow.

For quote sign type ” with following settings

• Font: Arial
• Font size:80px
• Color: #6E6C6C
• Font style: Italic

Do similar for main testimonial with following settings

• Font: Arial
• Font size:13px
• Color: #79807C
• Font style: Italic

Then add name with same settings except Font style: Regular and for the website link use Color: #E5932A.

Step 13: Footer

Draw a rectangle by using a Rounded rectangle tool with radius set to 8px of 920 x 170px and color #E37DLE. Apply following stroke option settings to the rectangle. Name this layer “Box frame”.

Now at the bottom of the round rectangle create a rectangle of 940 x 60px (name this layer “Front shape” and apply gradient overlay as shown in image below.

It should look like this.

After creating basic framework for footer, add shadow underneath the framework. To do so draw rectangle of 850 x 70 px name it Shadow. Click Edit -> Free Transform then Right click on the rectangle and select Perspective. Drag the top point on one side of the rectangle towards another point till it looks like the image below.

Go to Filter -> Blur -> Motion Blur and apply following settings.

Again go to Filter -> Blur -> Gaussian Blur

Move the Shadow layer underneath other footer layer.

To add in bit 3d effect add new layer “Box angled shape left” of 26 x 60px color it with #B16117. Click Edit -> Free Transform then Right click the rectangle and select Skew. Holding Alt key drag the top right point in upward direction.

Move the layer just below the gradient rectangle. Do same for the right side except drag the top left point in upward direction.

For the scrolling thumbnails start by adding a new rounded rectangle (name it Image shape) of 175×100px fill it with #FFFFFF and apply 1px stroke of #985414. Download image MAM Chihuly Show 5 from SXC and place it above Image shape layer. Select the image layer then go to Layer -> Create clipping mask, this will mask the image with the rectangle layer below it. Adjust the image as needed. To show a uplift effect on the thumbnail add a Shadow layer and using Ellipse Tool create a small ellipse and go to Filter -> Gaussian blur with Raidus 1.3px you should now have a thumbnail image with shadow like the image below.

Repeat same steps to create two more thumbnail images.

Last step of this tutorial is to add arrows for the thumbnails. Create a circle (name it Arrow circle left) of 19 x 19px, apply following setting to the layer.

Above the circle layer add new layer and call it “Arrow left”. Add a small arrow and apply stroke setting as shown below.

Last but not the least do not forget to organize your layers. This is how mine looks like.

Conclusion

Using simple techniques we can achieve fresh and creative templates. Here is the final image how the template should look like. If you have any queries pour in your precious comments below, till then cheers from my side.

Related posts:

1. How to add Floating share box to your website
2. 20 ways to improve website’s readability
3. Everything a Web Designer Should Know About Google Fonts API

Icon can be grabbed from a free zone or purchased but if you want an icon to match you web page you can get one by creating it yourself. Here are some tutorials that shall help show you how to create beautiful icons and add beauty to your page.

1. How to Make a Professional Buddy Icon in Photoshop

2. Design a Stylish Mail Icon in Photoshop

3. Create a Stylized First Aid Icon in Illustrator

4. Create a Cute Panda Bear Face Icon

5. How To Create a Detailed Apple iPad Icon in Photoshop

6. Creating a Modern, Glossy Mouse Icon in Photoshop

7. Design a Vintage Radio Icon in Photoshop

8. Creating a Toaster-Popping Illustration

9. Beginner Illustrator Tutorial– Create a Vector RSS Icon

10. Create A Vector Art Twitter Bird Character Icon In Adobe Illustrator

11. How to Create a Vector Safari Compass in Illustrator

12. How to Create an Envelope Icon in Photoshop

13. Icon design tutorial:How to make a Calendar icon

14. Icon Design Tutorial: Drawing A Pencil Icon

15. How to Create a Basic House Icon in Photoshop

16. Create an envelpe icon with a satin feel

17. PC Mouse Tutorial

18. Create A Briefcase Icon

19. How to Create a Golden, Vector Compass in Illustrator

20. How to create a Television Icon

21. Create a glossy high tech 3D speaker icon

22. Create a Leather-Textured, Realistic Briefcase Icon

23. Share This Icon

24. Create a Vintage TV Set Icon in Illustrator

25. How to Create a Vector Sketchbook

26. Wii Mote Controller Tutorial

27. How to Design a Set of Multicolored Buddy Icons

28. Illustrating a Business Briefcase in Windows 7 Style

28. Make a 3D Pencil and Paper Icon in Photoshop

30. How to Create a Juicy RSS Feed Icon

31. Monitor Icon Design

32. How To Create An Academy Icon From Simple Shapes

33. Create A Stylish And Sleek Play-Station Portable Icon

34. Photoshop Scissor Icon

35. LG LCD Monitor Icon

Related posts:

1. Logo designing tutorial using photoshop and illustrator plus resources
2. 40 best illustrator tutorials plus websites for illustrator tutorials
3. 15 Photoshop tutorial websites en route for learning

1. If you can convey in a sentence don’t drag it to a paragraph

Short and sweet sentence are always effective and makes a mark. So if a thing can be stated in a sentence or two don’t make it paragraph long .As great things come in small packages.

2. Keep sentence short, but increase in the number of paragraph

Be precise with what you have to say, in two or three sentence. Instead of making the paragraph long break it into paragraph, as it looks trendy and easy is easy to express as well.

3. Keep it virtually clean

Don’t hesitate to keep space between your paragraph. A ideal way is to divide your line-height by your font-size. That is you will keep it in a space of 1.5. 

4. Managed write up will make your write up look decent

To manage and make it look decent make use of heading, subheading, bullets, such that your write up is managed and the readers get all the important information.

Structured hierarchy like Title, Introduction, Heading, Text, Subheading – Text, gives your page a more logical flow

5. Headings and subheadings must stand out

One of the major benefits of using headings is that readers can scan down and see exactly what is in the article. This only works if the headings stand out, so feel free to use larger fonts, underlines, colors or whatever else is necessary.

6. Text width can spoilt the management so watch out

Make note of it shorter the width easier it is to read. So try to limit in the width, just don’t run over the width of the page. This will certainly help as if you see a newspaper you can see this being applied in the column of the paper, so it works. 

7. Be color conscious

Colors are another importance aspect that adds lots to readability so try and use contrast colors so that the visibility of text is prominent .But try and avoid colors that are aloud and it disturbs the visitor. 

8. Think twice when you are dealing with background

Background plays the lead role as it matters where you are writing you text .A soothing background speaks for the letters written .so choose background with great care .Avoid loud background keep it decent and professional.

9. “Text size” give the chain of command to the readers

Some user like it small some big, so let your reader have the control over the size of the text. 

10. Creativity with simplicity in case of text

In the hedge of standing out don’t make your text over attractive. Avoid using italics and other design which is hard to read and understand .keeping it simple will make it effective.

11. Text case to be considered

Mixed case is easier to read than uppercase. Uppercase is taken as a dictator in terms of webpage that screams, we don’t want to portray as a dictator so to be in amicable relation with the reader and to ease the reader use mixed case.

12. Don’t push your reader through the text

The visitor might get bored with chunks of text so be innovative and keeping the synchronization lighten your write-up.

13. Unavoidable and not crucial, faint color will help you

There are things in a post that are unavoidable that are the post date ,authors name,but it is not crucial so to write these stuffs use faint color so you wont draw.

14. Diagram and chart speaks a lot so don’t avoid it

Photo credit: miamiamia

If an image plays a vital part in your post, use it but with technicality   that is place the image such that it looks like it is a part of the article, not just a decoration. So center it, and skip a line before and after the image.

15. Say no to hurdles in between the post

Adverts in the middle of the post is a hurdle to the reader as it disturbs the reader pace so try avoiding it.

16. Clearly separate your post from the rest of your design

Design is what addresses the post so the post needs to stand out .you need to design in such a manner that it should be obvious where the post starts and stops. Your sidebar, comments, etc. should be visually distinct from the main content.

17. Links don’t forget to underline them

Photo credit: adamci

Links are always underlined, and the visitors have the habit of finding the links underlined so make sure you cater to what they want.

18. Avoid using snapshots in link

The feature of whilst seems fascinating but it is a means of trouble. Trouble in the sense it hides your valuable text every time you by chance hover over a link.

19. Don’t let your audience concentration go towards sidebar

Your visitor come to your site for your post, so don’t let a long side bar take all the attention keep it short. 

20. Make your navigation easier to use

If you are planning on referring your article from one page to other than make the mechanism simple to use. It is important that simplicity is considered as you don’t want your reader to get diverted because of pagination. 

Use this simple step and your user will have the ease in reading your write-up making your site readers friendly.

Related posts:

1. 16 tutorials using photoshop to build a website
2. 15 Free PSD and photoshop resources websites
3. How to promote your website

1. Logo Design Process and Walkthrough for Vivid Ways

2. Ornate lettering

3. Skype Logo

4.
Logo Design Project Step by Step Walkthrough

5. How to make an awesome logo

6. Volks Logo Tutorial

7. Step-by-step logo

8. How to Design the Firefox Logo in Photoshop

9. Creating a crazy cool logo

10. Design a Print-Ready Beer Label in Adobe Illustrator

11. EURO 2008 Logo design

12. Mac OS X

13. Create a Logo for Your Feature Posts

14. Create Rainbow Logos with Warped Grids

15. Suns Logo

16. Creating the brand identity for a sports team

17. Photoshop Logo Jelly Remake

18. How to Design a Logotype from Conception to Completion

19. Creating an Environmentally Friendly Green Type Treatment

Resources of Logo Design Inspiration

Logopond

Creattica

Logo of the day

Logo moose

Logo faves

Related posts:

1. 35 icon design tutorials in Photoshop and Illustrator
2. 40 best illustrator tutorials plus websites for illustrator tutorials
3. 15 Photoshop tutorial websites en route for learning

Specify your schedule

Photo credit: jan-willem

As you are in home working so there is a risk of overworking and overloading yourself “as you are at work always “so it is necessary you differentiate your daily domestic routine from work. At least specify working hours so that you can give time to yourself and your friends and family.

Chose your space and apply minimalist approach

This is a must situation as productivity is what you are seeking for and it can’t come lying down in the bedroom or having a tea in your kitchen. So specifies your work zone at your place. Create a section at home for work that can be done by partitioning your room or create a studio will help you create your working zone.

Ambiance shouldn’t be compromised Be specific about the color you chose for your workspace as color play a lot in human psychology which affects an individual mood. Define the color that makes maximum use of soft and light color, warm colored light bulbs for a pleasant ambiance. As color and light are directly related to our mindset, so be choosy and peculiar while choosing the color of your workplace.

Be specific towards design

Design your space with all your heart as this is the place where you are going to spend most of your time So make it perfect so that you are happy while you are working. This can be done by adding something that brings you to peace.

Have the right thing in right place

Place your things according to priority, have the right thing in right place. Don’t jumble official stuff up as this can bring a lot of tension. Have a place for things like calendar, phone book and other small details that are important. Getting this right when you want it right on time trust me avoids stress and executed work efficiently.

Avoid chaos

Try avoiding muddle at your working place, as clutter brings confusion and confusion leads to stress so in order to have a stress free working arena move towards minimalist approach with clean desk free from tangled wires, stationary, scattered paper, empty water jar, and dirty mug. A clean desk is a place for clear ideas so if you want to get your work done with effectiveness try applying a cleaner approach towards work.

Have a board for updates

Photo credit: tsk

As you are your boss you might at times miss on stuff, so be sure on what you are doing. so get a board for yourself who can act as your assistant in noting down important appointments ,dates and innovative ideas.

Painting can add light and brighten your day.

Work brings stress and there are ways in which you can release and relax. Relaxation is not getting lazy but is easing yourself from the pressure you get. There are ways you can relax hanging a painting of your choice would be one way.

Get an Aquarium or plant

Photo credit: kwod

Watching fish swim about is relaxing, this can be a way to get off the work, feeding the fish and watch them can be another way to take off pressure and relax. Aquarium adds beauty to your space and you can have a feel of peace around the workplace. Plants can also be an option as a green plant changes the atmosphere you are working.

Set a relaxation time and area

Photo credit: code1name

If your work nature is really stressful and you need to do a lot of thinking you can set a relaxing zone with a sound system at your work place. This can add value to your creativity as creative ideas come with a fresh set of mind. So get a couch in your studio or arena and relax with soft music in the background.

Working environment should be thus designed so that an individual is able to maximize motivation and productivity. These are few tips which can add value and maximize output.

Related posts:

1. Don’t work Hard, work efficiently
2. Love to Work vs Work to Work
3. Ways to tame anger at work

The programming paradigm we have learned so far is called Procedural Paradigm. In Procedural programming paradigm, programmer writes a program as collections of independently behaving procedures and makes use of procedure call to access those procedures. As we already discussed in Part8, how procedural programming is a better choice than a simple unstructured programming. It has been a long time, programmers have started thinking about new paradigm called Object oriented paradigm (OOP) which provides a better way to develop big and complex system than procedural programming. We don’t want to confuse readers by putting too complex terms and advantages of OOP at this stage, we will discuss when required.

In OOP, a class is a language construct that is used as a template or blue print to create instances of class called objects. This tutorial explains step by step to make the things clear. 

Creating Class

Example#1

The example below creates a class called Person. It has two instance variables; name and address and few methods. The instance variables are not accessible outside the class when they are defined as private; we need methods to access them. But public variable can be accessed outside the class. All instance variables should be kept private and there should be some methods to access those variables. Here, we have SET and GET methods which are be public. All methods should be public; otherwise they cannot be accessed outside the class.

After the end of class, we have created a instance “p” of class “Person”. “p” is called object of class “Person”. Note that, “p” object binds instance variables and methods together, that property of OOP is known as encapsulation.

<?php
class Person
{
// Properties or Instance variables
private $name;
private $address;

//Methods or behaviours
//set methods are used to set the instance variables
              public function setName($aName)
             {
	         $this->name= $aName;
    	}
	public function setAddress($aAddress)
	{
       		$this->address= $aAddress;
    	}
	//get methods are used to get the instance variables
	public function getName()
	{
      		 return $this->name;
    	}
	public function getAddress()
	{
        		return $this->address;
    	}
}// end of class

//create a object of Person class
$p = new Person();
//Set name
$p->setName("Gary Tom");
//Set address
$p->setAddress("Unit 10 Nelson Bay, NSW 2030 Australia");
//Print name
echo $p->getName();
//Print Address
echo $p->getAddress();
?>

The output of the above code will be
Gary Tom Unit 10 Nelson Bay, NSW 2030 Australia

Constructor and Destructor

When we create an object constructor method is called, hence it is useful to initialize the instance variables before they are ready to use. Similarly, destructor method is called when we destroy the objects.

Example#2

The code we have in this example produces the same output as in example#1, but has been implemented in a different way. Here we initialize the instance variables using constructors.

<?php
class Person
{
    	// Properties or Instance variables
   	 private $name;
	private $address;

	//Default Constructor
	public function __construct()
	{
       		$this->name= "Gary Tom";
	   	$this->address= "Unit 10 Nelson Bay, NSW 2030 Australia";
   	}
      	//Default Destructor
   	function __destruct()
   	{
     		//This portion of the code will be executed when
	 	// we destroy an object explicitly.
   	}

  	//get methods are used to get the instance variables
	public function getName()
	{
       		return $this->name;
    	}
	public function getAddress()
	{
        		return $this->address;
    	}
}// end of class

//create a object of Person class
$p = new Person();
//Print name
echo $p->getName();
//Print Address
echo $p->getAddress();
?>

This code will also produces the same output as in example#1, that is
Gary Tom Unit 10 Nelson Bay, NSW 2030 Australia

Inheritance

As the name suggests, inheritance is a principle by which child class can inherit the methods form its parent class and the methods performs their original functionality.

Example#3

In this example, we extend a class called Student from the class Person. The subclass Student inherits printMe methods and all instance variables from the parent class Person. The printMe method of Person class has been rewritten with the same name in Student class. If a method with same name exists in parent and child class, the child class object has two version of the same module. In this situation the child class method overrides the parent class method, it known as method overriding.  When we call printMe method of Student object, it calls printMe of Student class not the printMe of Person class. Remember that all data members of Person class are available in Student class.

<?php
class Person
{
    	// Properties or Instance variables
    	private $name;
	private $address;

   	//Function to print Instance variables
   	public function printMe()
   	{
   		echo $this->name.", ".$this->address;
   	}
}// end of Person class

//Student class, inherits from Person class
class Student extends Person
{
	//Instance variables, remember that name and address is inherited from Person
	private $program;

	//Default Constructor
	public function __construct()
	{
       		$this->name= "Gary Tom";
	   	$this->address= "Unit 10 Nelson Bay NSW 2030 Australia";
	   	$this->program= "Masters in IT";
   	}

   	public function printMe()
   	{
   		echo $this->name.", ".$this->address.", ".$this->program;
   	}
}// end of Student class

//create a object of Person class
$s = new Student();
//Print s
$s->printMe();
?>

The output of the above code will be
Gary Tom, Unit 10 Nelson Bay NSW 2030 Australia, Masters in IT

This tutorial tries to describe Classes and Objects in short, for a complete reference please visit http://www.php.net/manual/en/language.oop5.php

Related posts:

1. Introduction to PHP – Part7
2. Introduction to PHP – Part9
3. Introduction to PHP – Part8

A form is an area where user can input data. The place in the form where user input data is called form element. A form element can be a text field, text area field, drop-down list, radio buttons and checkbox. In this tutorial we will apply the knowledge we have gained so far and use it with HTML forms. The best thing to use PHP with HTML is that any elements in HTML forms are directly available in PHP scripts. That means the data entered in HTML forms can be manipulated using PHP scripts.

Creating form

A form is created using <form> tag. To learn more about HTML please refer to HTML tutorials available in net. Let us start with a simple HTML form that we use for user feedback.

Example#1

<html>
<body>
<form >
 <p>Name : <input type="text" name="name" /></p>
 <p>Email : <input type="text" name="email" /></p>
 <p>Subject : <input type="text" name="subject" /></p>
 <p>Message : <br/>
 <textarea rows="10" cols="30"> </textarea>
 <p><input type="submit" /></p>
</form>
</body>

The output of the above HTML code will be

Collecting information from HTML form using POST method

As we already mentioned, the best thing to use PHP with HTML is that any elements in HTML forms are directly available in PHP scripts. After filling the form, when we pressed Submit Query button, everything we filled in the form will be available in PHP script.

Example#2

<html>
<body>
<form action="action.php" method="post">
 <p>Name : <input type="text" name="name" /></p>
 <p>Email : <input type="text" name="email" /></p>
 <p>Subject : <input type="text" name="subject" /></p>
 <p>Message : <br/>
 <textarea rows="10" cols="30"> </textarea>
 <p><input type="submit" /></p>
</form>
</body>

We can notice that we added action and method in the above code, which tells the server what action is to be taken and what method is to be used. In this example, when we click on Submit Query button the page action.php is called and the method used is post. In order to access the form elements we should write action.php like this. Note that the file name should be action.php and saved in the same directory.

action.php

<?php
echo $_POST["name"]."<br/>";
echo $_POST["email"]."<br/>";
echo $_POST["subject"]."<br/>";
echo $_POST["message"];
?>

When we fill the form and click the submit button, action.php will be called, the URL will look like http://webanddesigners.com/action.php. Information filled in the form is now available in action.php page. post method use $_POST array to save the form information, the name of the form fields will be the key in the $_POST array.

Collecting information from HTML form using GET method

The following code is exactly same as code in example#2, except that the method used here is GET.

Example#3

<html>
<body>
<form action="action.php" method="get">
 <p>Name : <input type="text" name="name" /></p>
 <p>Email : <input type="text" name="email" /></p>
 <p>Subject : <input type="text" name="subject" /></p>
 <p>Message : <br/>
 <textarea rows="10" cols="30"> </textarea>
 <p><input type="submit" /></p>
</form>
</body>

action.php will look like as the following code. Note that when GET method is used the data elements are available in $_GET array. The data elements are accessed in the similar fashion.

action.php

<?php
echo $_GET["name"]."<br/>";
echo $_GET["email"]."<br/>";
echo $_GET["subject"]."<br/>";
echo $_GET["message"];
?>

Comparison of GET and POST method

When we use GET method, the information sent is visible. It will display the variable and value in browser’s address bar. The address bar will look like http://webanddesigners.com/action.php?name=John&email=john@webanddesigner.com&subject=hi&message=This+is+the+test+message+using+get+method. There is a limitation in the amount of data send using GET method, maximum of 100 characters can be send. One best thing about GET method is that, the page can be bookmarked; this is because all the variables and data are available in URL.

When we use POST method the information sent is completely invisible. In addition, there is no restriction on the amount of information to be sent. Up to 8mb of data can be sent using POST method. However, because data and variables are not available in URL, it is not possible to bookmark the page. The URL will look like http://webanddesigners.com/action.php

Related posts:

1. Introduction to PHP – Part 1
2. Introduction to PHP – Part8
3. Introduction to PHP – Part 5

A function is a subprogram that performs a specific task when called by the main program. It is always a good practice to divide a huge program into a number of subprograms until elementary functions are reached. More clearly, a huge program should be divided into number of functions, and a function precisely should do one job. Suppose, we have a big program that reads data from user at the beginning, save data to a database and displays the saved data at the end. We can divide this program into three subprograms or functions. The first function reads data from user, the second function writes data to the database and finally third function writes data to monitor.

There are number of advantages of implementing a huge program into a number of subprograms. The first advantage is we can reuse the existing code. During a single execution of a program, a function can be called several times from different places and even from another function. The second advantage is it is easy to understand the program logic, debugging and testing is easier.

Functions can be categorised in two broad topics, built-in functions and user defined functions. Built-in functions are the language constructs that comes with PHP. There are hundreds of built-in functions available in PHP for our use. User-defined functions are the functions created by programmers. In this tutorial we will discuss user-defined functions in detail.

Creating function

Let us start with a simple function that calculates sum of two numbers.

Example#1

<html>
<body>
<?php
/*
This function calculates the sum of two numbers
*/
function sum()
{
            //declare and initialize variables
            $x=20;
            $y=30;
            $z=$x+$y;
            //print the result
            echo 'The value of $x is '.$x. ' and value of $y is '. $y .' The result of  $x + $y is '.$z;
}
//Execution of this program starts from here, and calls the function sum, that means code inside the function sum will be executed
sum();
?>
</body>

 
Function with parameter

Though we can call the function sum in example#1 as many times as we want, it produces the same result. Let us modify the above code to achieve better result.

Example#2

<html>
<body>
<?php
/*
This function calculates the sum of two numbers
*/
function sum($x,$y)
{
            //Calculate result
            $result=$x+$y;
            //print the result
            echo $result;
}
//Execution starts from here
$x=20;
$y=30;
sum($x,$y);

//We can call the function using different value
$x=200;
$y=300;
sum($x,$y);
?>
</body>

The code in both examples provides the same functionality but the variables in example#1 are hardcoded inside the function itself and hence, can provide the functionality of adding the hardcoded values. If we have to add other numbers we have to write another function. The code in example#2 solves this problem by passing parameters and provides more functionality. We can add any two numbers any times by just calling the function with parameters. The function sum in example#2 takes two parameters. The parameters are enclosed in parenthesis and separated by comma.

Function with parameter and return value

A function can also return value. The return statement is optional. A function can return any type including arrays and objects. After a function returns a value, its execution is passed back to the line from which it was called. Let us modify the code of example#2 to see how a function can return value.

Example#3

<html>
<body>
<?php
/*
This function calculates and returns the sum of two numbers
*/
function sum($x,$y)
{
            //Calculate result
            $result=$x+$y;
            return $result;
}
//Execution starts from here
$x=200;
$y=300;
//calculate and print the result
echo "The sum is : ". sum($x,$y);
?>
</body>

For a complete reference of functions please visit http://www.php.net/manual/en/language.functions.php

Related posts:

1. Introduction to PHP – Part7
2. Introduction to PHP – Part10
3. Introduction to PHP – Part4

Array is a systematic collection of data of similar data types that can be accessed by numeric index. Array is one of the most important and oldest data structures that are used to implement other data structures like strings, maps, vector etc. An array in PHP is in fact an ordered map type that associates values to keys. We suggest readers to not get confused with map type here, simply understand PHP array as a data type that can be accessed using keys.

In a situation where it is almost impossible to create a number of variables, a single array can solve the problem. For example, we need to store marks of 100 students having Roll no 1 to 100. Instead of creating 100 variables student1, student2, ……., student100 we can create an array of size 100. After we created array, the Roll no can be used as index. More clearly, mark of student with Roll no 1 can be a stored and accessed using index 1, i.e. student[1].

Creating Array

Syntax

array() is used to create an array. We can specify any number of parameters of key => value pairs separated by comma.

array(  key1 =>  value1, key2 =>value 2,..............keyn => valuen)

Key can only be number or string, but value can be any type, it can be an array, map, vector, object or any other PHP supported type.

Example#1

<html>
<body>
<?php
/*
Output: 59 69 90 84 73 79 33 66 93 54
Average marks: 70
Marks of Roll No 5: 73
Program description: This program creates an array called student with 10 elements
and stores marks obtained by each student. The code inside the foreach loop print the marks obtained
by each student and adds to the totalMarks. After foreach loop the Average marks is calculated.
*/
$student  = array(1 => 59, 2 => 69, 3 => 90, 4 => 84, 5 => 73, 6 => 79, 7 => 33, 8 => 66, 9 => 93, 10 => 54);
/*
This array can also be defined as
$student = array(59, 69, 90, 84, 73, 79, 33, 66, 93, 54);
If you want to start index from a specific number for example say 100, you can write like
$student = array(100 => 59, 69, 90, 84, 73, 79, 33, 66, 93, 54);
*/
$totalMarks=0;
foreach($student as $marks)
{
         echo $marks." ";
         $totalMarks+=$marks;
}
echo "<br/> Average marks: ". $totalMarks/10;

/*
It is also possible to access the array element using the numeric index,
for example to print the marks of student with rollno 5 can be printed as
*/
echo "<br/> Marks of Roll No 5 : ". $student[5];
?>
</body>

The array we used in example has a numeric index or key. We can also implement array with string key, this array is known as associative array very similar to map data structure.

Example#2

<html>
<body>
<?php
/*
Output: 59 69 90 84 73 79 33 66 93 54
Average marks: 70
Marks of Sam: 69
Program description: This program creates an array called student with 10 elements
and stores marks obtained by each student. The code inside the foreach loop print the marks obtained
by each student and adds to the totalMarks. After foreach loop the Average marks is calculated.
*/

$student  = array("Hary" => 59, "Sam" => 69, "Joe" => 90, "Kevin" => 84, "Kelly" => 73, "Steve" => 79,
 "Craig" => 33, "Jodi" => 66, "John"=> 93, "Rose" => 54);
$totalMarks=0;
foreach($student as $marks)
{
            echo $marks." ";
            $totalMarks+=$marks;
}
echo "<br/> Average marks: ". $totalMarks/10;

/*
It is also possible to access the array element using the string key,
for example to print the marks of "Sam" can be printed as
*/
echo "<br/> Marks of Sam : ". $student["Sam"];
?>
</body>

Modifying array

To modify an existing array, we can assign values explicitly to the array. Remember that, if the specified array does not exist yet, a new array will be created. The following example shows how to modify an existing array.

Example#3

<html>
<body>
<?php
/*
This program creates an array called countries with two elements
*/
$countries  = array(1 => "Australia", 2 => "New Zealand");
// To add a country called Japan, we need to assigh it explicitly as
$countries[3] = "Japan";
// We can aslo add a element without specifying the key, in this situation
// the key of new element will he the key of last element + 1
$countries[] = "United Kingdom";
 
//To simply print an array we can use the function print_r($array) as follows
// Output: Array ( [1] => Australia [2] => New Zealand [3] => Japan [4] => United Kingdom )
print_r($countries);

/* Deleting element from array:
Output:  Array ( [1] => Australia [3] => Japan [4] => United Kingdom )
Remember that the key of Japan and United Kingdom does not get changed
*/
unset($countries[2]);
print_r($countries);

// This will delete the whole array
unset($countries);
//If we try to print the array, a message like the following will be displayed
//Undefined variable: countries in C:\wamp\www\WebTest\index.php on line 29
print_r($countries);
?>
</body>

For a complete reference of array please visit http://www.php.net/manual/en/language.types.array.php and for complete reference on array functions please visit http://www.w3schools.com/PHP/php_ref_array.asp

Related posts:

1. Introduction to PHP – Part 5
2. Introduction to PHP – Part10
3. Introduction to PHP – Part2

A string is an array of characters. This tutorial demonstrates the use of string to manipulate text. A string can be represented in one of the following four ways; single quoted, double quoted, heredoc syntax and nowdoc syntax. Before describing each string in detail, it would be appropriate to discuss about escape sequence. Escape sequence are used to format the output text and other output options. The table below presents the escape sequences for special characters.

There are many functions available in PHP to manipulate strings. For a complete list of reference on functions please visit the link http://www.w3schools.com/PHP/php_ref_string.asp

Single quoted

A string can be represented in single quote. In PHP a single quote string can be expanded in more than one line. Remember that, if we attempt to escape the character other than the above table, it will print the backslash too.

Example#1

<html>
<body>
<?php
//Output: Hello World
$myString = 'Hello World';
echo $myString;
//or we can simply write
echo 'Hello World';

//To print string enclosed in double quotation, simply enclose it with single quotation
//Output: "Hello World"
$myString = '"Hello World"';
echo $myString;
 
//To print string that contains single quotation, simply use escape sequence "\" in front of single quote
//Output: "Hello World, let's begin with more complex examples"
$myString = '"Hello World, let\'s begin with more complex examples"';
echo $myString;
?>
</body>

Double quoted
PHP recognized all of the above escape sequences if it is enclosed in double quotes. Remember that, as in single quoted string, if we attempt to escape the character other than the above table, it will print the backslash too.

Example #2

<html>
<body>
<?php
//Output: Hellow World
//This is similar to the example presented in Example#1, except that it is enclosed by double quote
$myString = "Hello World";
echo $myString;
//or we can simply write
echo "Hello World";
 
//Similar to this example, \v \t \r can be implemented
//Output: Hellow World
//This will print in a new line
$myString = "Hello World \n This will be printed in a new line";
echo $myString;

//This example demonstrate how variables can be expanded using double quote string
//Output: The value of $x is 10 and value of $y is 20. The result of  $x + $y is 30
$x=10;
$y=20;
$z=$x+$y;
//In the following statement, concatenation operator "." is used to concatenate two strings. The variable $x in single quote is not expanded where it is expanded in double quote
echo 'The value of $x is '."$x". ' and value of $y is '. "$20" .'. The result of  $x + $y is '."30";
?>
</body>

heredoc

heredoc syntax <<< can also be used to represent string. heredoc text behaves like double quote string, except that it is not enclosed with double quote, that means that escape sequence can be used in heredoc in the similar manner. The variables are also expanded in heredoc text.

Example#3

<html>
<body>
<?php
//Output: Hellow World, This is your heredoc example, and this can be expanded as necessary
//As shown in the code, after <<< an identifier (here ID) should be provided and then a newline should begin.
//Then the string comes and at last the same identifier is used to close the quotation.
$myString = <<<ID
Hellow World
This is your heredoc example,
and this can be expanded as necessary
ID;
echo $myString;
?>
</body>

nowdoc

heredoc text behaves like double quote string while nowdoc text behaves like single quote string. The main difference is that  escape sequence cannot be used in nowdoc.

Example#4

<html>
<body>
<?php
//Output: Hellow World, This is your nowdoc example, and this can be expanded as necessary
//To differenciate between heredoc and nowdoc, identifier is enclosed in single quote in nowdoc as shown
$myString  = <<<'ID'
Hellow World
This is your nowdoc example,
and this can be expanded as necessary
ID; */
echo $myString;
?>
</body>

Related posts:

1. Introduction to PHP – Part2
2. Introduction to PHP – Part7
3. Introduction to PHP – Part 1