Learn Premium Technologies @eduonix - Tumblr Blog

New Post has been published on www.eduonix.com - Conditionals and Regular Expressions in PHP

Conditionals and Regular Expressions in PHP

We learned functions in the last session. Today we are going to learn conditional statements and some regular expressions in this Conditionals and Regular Expressions tutorial.

Let us start with Conditional Statements.

Create a new folder named Conditionals in htdocs folder in the xampp folder in C drive.

Open a new notepad++ document and save it as index.php in the newly created Conditionals folder.

We can embed PHP in HTML also, so let us write the following HTML code first:

<!DOCTYPE html> <html> <head> <title>PHP Conditionals</title> </head> <body> </body> </html>

The page when opened in browser using localhost/Conditionals address in the address bar of the browser will look like this:

fig 1

If statement:

If conditional statement is used to check whether a given condition is true or false.

If the given condition is satisfied, if statement returns true otherwise it returns false.

Write the following code in the body section of index.php page to demonstrate the if statement:

<?php $x=5; if($x>2) echo $x." is greater than 2"; ?>

Here, we have assigned a value 5 to variable $x.

Condition $x>2 is checked in if statement.

If this condition evaluates to true, the statement in the curly braces will be executed.

The output is shown below:

fig 2

Now just change the value of variable $x from 5 to some other value less than 2 say 1.

When you reload the browser you will see that no output is seen.

This is because if block executes only when the condition is true; but we need to handle the situation even if the condition evaluates to false.

For this else part is used.

If-else statement:

If the condition in if statement evaluates to false, else block of if-else statement is executed.

Write the following code in the body section of the page to demonstrate if-else statement.

<?php $x=1; if($x>2) echo $x." is greater than 2"; else echo $x." is NOT greater than 2"; ?>

Here, we see that variable $x has been assigned value 1.

The condition $x>2 in if statement will not be satisfied with value 1. So as the condition evaluates to false, else part of the statement will be executed.

The output is shown below:

fig 3

Multiple conditions in the if statement:

We can use multiple conditions in if statement using logical operators such as logical AND (&&), logical OR (||) and logical Not (!).

Let us see an example using logical AND operator. Write the following code in the body section of the page:

<?php $x=4; if($x>2 && $x<10) echo $x." is greater than 2 and less than 10."; ?>

Here, we have assigned value 4 to variable $x.

Next we have checked 2 conditions $x>2 and $x<10 with a logical AND operator which insists that both the conditions should be true.

If and only if both the conditions are true, if block will be executed.

So the output is shown below:

fig 4

If – elseif statement:

If we want to check more than one condition, we can use if-elseif statement. It is also called if-elseif ladder.

Let us see an example. Write the following code in body section of the page:

<?php $x=4; if($x==10) echo $x." is 10."; elseif($x==2) echo $x." is 2."; else echo $x." is not 10 or 2."; ?>

In the above statements, a condition is checked in if statement first and if this condition evaluates to false then the next condition in the following elseif statement is checked.

This cycle continues till the condition does not evaluate to true.

If no condition is true then the statements in the else part are executed.

In the if-elseif statement of PHP the keyword elseif have no space in between.

In the above code $x variable is assigned value 4.

Then condition $x==10 in if statement is checked. This condition evaluates to false since 4 is not equal to 10.

Then next condition $x==2 in the elseif statement is checked. This condition also evaluates to false since 4 is not equal to 2.

So the statements in the else part are executed.

The output is shown below:

fig 5

If now you change the value of variable $x to 2 or 10, you will get different output.

Just change the value of variable $x to 2 and see the output.

Output is shown below:

fig 6

Switch-case statement:

Switch-case statement is similar to if-elseif statement used to check multiple conditions.

Syntax of switch case statement is :

switch(variable/expression) case value 1: statement(s); break; case value 2: statement(s); break; case value n: statement(s); break; default: statement(s); break;

We need to pass a variable or an expression whose value is to be matched with the case value.

Once the value passed in switch is matched with the case value, the statements inside that particular case are executed.

If no case value is matched then the statements of the default case are executed.

Write the following code of switch case in the body section of the page:

<?php $x=3; switch($x) case 2: echo $x." matched 2"; break; case 3: echo $x." matched 3"; break; default:echo $x." does not match 2 or 3"; break; ?>

Here, variable $x is assigned value 3 which is passed in the switch statement.

The value 3 in $x variable does not match with case 2, hence control goes to the next case i.e. case 3. Here the value in variable and the case value both are equal so the statements inside case 3 are executed.

The break statement is used to terminate and bring the control outside the switch block.

The output is shown below:

fig 7

Now change the value of $x to 5. You will get the output as 5 does not match 2 or 3.

In this way we learned conditional statements, now we will go for Regular Expressions.

Regular Expressions:

Regular expression is used to match something against something else.

They enable us to search patterns within a string and extract matches flexibly and precisely.

Some of the regular expressions and what will it match is shown in the table below:

Regular Expression Will match.. foo The string “foo” ^foo “foo” at the start of a string foo$ “foo” at the end of a string ^foo$ “foo” when it is alone on a string [abc] a,b or c [a-z] Any lowercase letter [^A-Z] Any character that is not a uppercase letter (gif|jpg) Matches either “gif” or “jpeg” [a-z]+ One or more lower case letters [0-9\.\-] ?ny number, dot, or minus sign ^[a-zA-Z0-9_]1,$ Any word of at least one letter, number or _ ([wx])([yz]) wy, wz, xy, or xz [^A-Za-z0-9] Any symbol (not a number or a letter) ([A-Z]3|[0-9]4) Matches three letters or four numbers

Let us try some examples of regular expressions.

There is a method called preg_match() used to match patters.

Syntax of preg_match() method is as follows:

preg_match(“/match string/”,”original string”,$matches)

In the syntax above, match string is the string to be matched with the original string. This match string is written between forward slashes.

$matches is an array that stores the match found in the string.

Write the following code in the body section of the page:

<?php if(preg_match("/ell/","Hello World",$matches)) echo "Match was found<br/>"; echo $matches[0]; ?>

Here, preg_match() method is used in the if statement.

We are trying to search “ell” in the string “Hello World”.

If this string is found in the original string then it is stored in the array $matches passed as a third parameter of preg_match() method.

The output is shown below:

fig 8

Search for a string at the beginning of the given string:

Now put a caret symbol(^) before ell and remove ‘H’ from the string “Hello World” in the above code as shown below:

<?php if(preg_match("/^ell/","ello World",$matches)) echo "Match was found<br/>"; echo $matches[0]; ?>

The caret symbol preceding a string indicates that the string should be matched at the beginning of the original string.

In the above given code we have preceded ell with the caret symbol and the original string is ello World.

Since now the ell is at the beginning of the string it will match.

If the original string would have been Hello World then the ell would not have been matched because we required ell to be at the beginning.

The output is shown below:

fig 9

Now try to search Hello at the beginning of the string Hello World using the code as follows:

<?php if(preg_match("/^Hello/","Hello World",$matches)) echo "Match was found<br/>"; echo $matches[0]; ?>

You will find the match because Hello is at the starting of the string.

Search for a string at the end of the given string:

To search for a string at the end of another string we need to put a dollar symbol ($) after the string to be searched.

Write the following code in the body section of the page:

<?php if(preg_match("/Hello$/","Hello World",$matches)) echo "Match was found<br/>"; echo $matches[0]; else echo "No match found<br/>"; ?>

Here, in the above code we have put dollar symbol ($) after the string Hello. This indicates that the string Hello should be at the end of the string Hello World.

But since the string Hello is not at the end of Hello World, the match fails. Hence we don’t get any output.

Since condition in if statement has been failed, else block statement is executed and the following output is obtained:

fig 10

Now if you remove World from the original string in the above code, you will get the output as match found because now there is only one word Hello in the original string.

Searching for a string which is at the start as well as at the end:

When we want to search a string in a given string, the regular expression we use is put caret symbol (^) before and dollar symbol ($) after the string to be searched.

The following code demonstrates the regular expression for the same:

<?php if(preg_match("/^Hello$/","Hello",$matches)) echo "Match was found<br/>"; echo $matches[0]; ?>

In the above code, we want to search for a string Hello at the start as well as end of the original string.

The original string is Hello. So we will get the match as there is only single word Hello in the original string.

The output is shown below:

fig 11

Search for a given alphabet in a string:

To search for some alphabets in a string we need to use [abc] regular expression.

Write the following code in the body section of the page:

<?php if(preg_match("/[abc]/","Hello",$matches)) echo "Match was found<br/>"; echo $matches[0]; ?>

The [abc] regular expression will search for the alphabets a, b and c in the string Hello.

But as there is no a, b or c alphabets in the string Hello, we will get no output.

But if instead of [abc] we use [Hbc], we will get the following output.

fig 12

If we want a match which is not case sensitive, we should use i.For example see the following code:

<?php if(preg_match("/[hbc]/i","Hello",$matches)) echo "Match was found<br/>"; echo $matches[0]; ?>

Here, we have capital H in the string Hello. But in regular expression we have used small h. To avoid considering case and make a match we need to use i at the end of the regular expression.

The output will be the same as shown in fig 12.

In this way you can use different regular expressions listed in a table above for matching.

Thus we learned the conditional statements and some of the regular expressions in this Conditionals and Regular Expressions tutorial.

#Conditional statements in PHP #Conditionals and Regular Expressions in PHP #PHP #PHP Tutorial #Regular expressions in php #Web Development #web programming #WebDevelopment #Web Programming Tutorials

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality

Anya is LIVE right now

FREE

Free to watch • No registration required • HD streaming

New Post has been published on www.eduonix.com - PHP Functions

PHP Functions

In this tutorial we are going to learn about functions in PHP those are same as in javascript. We are also going to learn about the use of include and require keywords in this PHP Functions tutorial.

Let us start with user defined functions.

Create a new folder named Functions in the htdocs folder in the xampp folder in C drive.

Open a new notepad++ document and save it as index.php in the newly created Functions folder in the htdocs folder.

Write the following code for a simple function:

<?php function sayHello() echo 'Hello'; ?>

This is a simple function written to display Hello on the browser.

In PHP the keyword function is used to define a function name.

The keyword function is followed by a function name with parenthesis.

The naming convention followed in function name is that starting word of function name is in small case letters and the initial letter of the following word is capital.

The opening and closing curly braces forms the body of the function.

The body of the function contains the code to be executed.

Here, echo statement to display a word Hello is used.

The opening curly brace indicate the start of the function and the closing brace indicate the end of the function.

Writing just the function definition would not display anything on the browser. To execute a function it should be called.

Write the following code below the function definition:

sayHello(); //call to sayHello() function

To call any function you just have to write its name with parenthesis.

When a function is called, it gets executed and the output is shown.

Let us see the output on the browser. Open your browser and write localhost/Functions in the address bar of the browser.

fig 1

Now let us go for a parameterized function. Write the following code in index.php file.

<?php function sayIt($word) echo $word;

You can drop the ?> delimiter of php tag.

Here, in the sayIt function one parameter $word is passed. And its value is printed in the function body using echo statement.

The value for the parameter $word is passed through function call.

So write the sayIt() function call statement below the function definition as shown below:

sayIt('Hello World');

The output after the function call is shown below:

fig 2

Now let us see function with multiple parameters. Write the following code in index.php document:

<?php function sayAll($word1,$word2) echo $word1.' '.$word2;

We have a sayAll() function with 2 parameters $word1 and $word2.

The body of the function contains the echo statement that displays the values of the two parameters concatenated with a space.

The function is executed when it is called. The function call statement is shown below:

sayAll('Hello','Brad');

The value Hello in the above function call will be assigned to parameter $word1 and value Brad will be assigned to parameter $word2.

The output after calling sayAll() function is shown below:

fig 3

Now instead of 2 parameters if we pass only one parameter value to the sayAll() function as shown below:

sayAll(‘Hello’);

And then reload the browser, it will display Hello but also a warning for the missing second parameter as shown below:

fig 4

To avoid this type of warning we can provide the function parameter with a default value as shown below:

<?php function sayAll($word1,$word2='World') echo $word1.' '.$word2;

Here we have given a default value World to the second parameter $word2.

Now if we call the above function with a single parameter as shown below:

sayAll(‘Hello’);

The value Hello will be assigned to parameter $word1 and as there is no second parameter provided, the parameter $word2 will take the default value World and Hello World will be displayed as shown below:

fig 5

If we call the sayAll() function with 2 parameters as shown below:

sayAll(‘Hello’,’Bob’);

The value Hello will be assigned to $word1 and value Bob will be assigned to $word2 overwriting the default value World and the function will display Hello Bob.

Now let’s try a mathematical function for addition of 2 numbers.

Write the following code in index.php document.

<?php function add($num1,$num2) echo “Addition of 2 numbers = ”.($num1+$num2);

Here, we have a two parameterized function displaying addition of 2 numbers.

The function call is shown below:

add(7,2);

The value 7 and value 2 in the function call will be assigned to $num1 and $num2 function parameters respectively.

These values are numbers hence not placed in single/double quotes.

A string Addition of 2 numbers is concatenated with the addition.

The output of addition is shown below:

fig 6

In the above add() function we have directly printed the output in the function itself using echo statement.

But it is not a good practice. I mean if we don’t want to print the value and just want to store it for some other use, then.

The return statement is the solution. Instead of echo use return, it will return the calculated value to the function call statement.

Modify the above add() function in the way shown below:

function add($num1,$num2) return $num1+$num2;

Now write the function call statement below this function as shown:

$sum=add(10,5); echo 'Addition = '.$sum;

After calling the add() function the addition of values 10 and 5 will be returned from the function and stored in the variable $sum. You can now display it using echo statement or can use it for some other calculation purpose.

We have displayed the addition. Output is shown below:

fig 7

Now let us learn a new topic of linking one PHP file to another.

To link one PHP file to another we use keywords include and require.

Now go to the Functions folder in the htdocs folder and open a new notepad++ document. Save it as functions.php.

Write the add function in this file functions.php as shown below:

<?php function add($num1,$num2) return $num1+$num2;

Comment the whole add() function in the index.php document.

Keep the function call to add() function uncommented.

Now you don’t have the function body for add() function in index.php file but you have a call for the function.

Reload the browser and you will get an error saying “call to undefined function add()” as shown below:

fig 8

This is because body for function add() is not written in index.php document.

Since this function is written in functions.php file, we can link this file to index.php to resolve this problem.

Write the following code inside the tag at the top to link the functions.php file to index.php file, in the index.php file.

include 'functions.php';

Actually the uncommented code in index.php file will be only this much:

<?php include 'functions.php'; $sum=add(5,5); echo 'Addition = '.$sum; ?>

Now reload the browser and see the output:

fig 9

In the above linking code we can also use require or require_once keyword instead of include.

The code for it is shown below:

require ‘functions.php’;

require_once ‘functions.php’;

Both include and require keywords do the same work but the only difference between them is that,

If you use include keyword to link one file with another and any error occurs in linking the file, you will get an error message for the file linking; but the rest of the code that does not require the file will work properly.

Next if we use require keyword to link the file and there is some problem in file linking, all the code along with the code that does not require linked file will stop working.

To demonstrate the difference between the include and require keywords let’s do some task:

Replace the function call to add() function in index.php file with the following statement:

echo 'I am in index.php';

Replace the function body in functions.php file with the following statement:

echo 'I am in functions.php <br/>';

We have used include keyword in index.php file to link functions.php file with it.

So now reload the browser and see the output:

fig 10

Now just purposefully make a mistake in the linked filename in index.php file as shown below:

include ‘functions1.php’;

This will invoke a warning saying “failed opening functions1.php” but at the same time it will display the statement “I am in index.php” which has nothing to do with the linked file as shown below:

fig 11

Now just replace include keyword with require keyword in the index.php file as shown below:

require 'functions1.php';

Remember we had made a mistake in the linked file name i.e. instead of writing functions.php we have written functions1.php.

Now reload the browser and view the output:

fig 12

Here, when you use require keyword we get a fatal error and the statements that do not require the file are also not executed.

Hence, it is mostly good to use include keyword instead of require.

Now let us go for some inbuilt functions and understand them.

str_replace() function:

The task of str_replace() function is to replace a string or word in a phrase/sentence with the specified string.

Syntax of the str_replace() function is :

str_replace(‘old string’,’new string’,’statement’);

In the above syntax: old string indicate the string in the sentence which is to be replaced, new string indicate the string to be placed in the old string’s position and statement is the sentence in which this replacement is to be done.

Let us demonstrate it with an example. Write the following code in index.php file:

<?php $phrase="<h1>I like to eat apples.</h1>"; echo 'Before replacement:'; echo $phrase; $phrase=str_replace('apples','oranges',$phrase); echo 'After replacement:'; echo $phrase;

Here, we have a sentence “I like to eat apples.” in a variable $phrase which is displayed using echo under the heading “Before replacement”.

Next we have used the str_replace() function to replace the word apples with oranges and displayed the sentence again under the heading “After replacement”.

You will see in the output that after replacement the word apples have been replaced with oranges. Output is shown below:

fig 13

print_r() function:

This function is used to print the entire array in the browser.

Let us see an example. Write the following code in index.php file:

<?php $name_array=array('Brad','Bob','Mike','Sarah','Michelle'); print_r($name_array);

This function print_r() will display the array in the form of index=>value pair. Output is shown below:

fig 14

implode() function:

This function deals with arrays.

Its purpose is to display an array directly in a string format.

If we try to display it directly using echo it will give an error.

Suppose I try to display the array $name_array declared in the above code example for print_r() function as shown below, it will give an error:

echo $name_array;

After reloading the browser you will notice the array to string conversion error as shown below:

fig 15

To resolve this problem we need to use implode() function which converts the array to string and gives us the string output of array.

Syntax of implode() function is :

implode(‘separator’,array_name);

Here, separator indicate a delimiter like comma, period, semi-colon, brake tag, space etc to separate the array elements.

And array_name indicate the name of the array whose elements are to be displayed in the form of string.

Let us see one example. Write the following code in index.php file.

<?php $name_array=array('Brad','Bob','Mike','Sarah','Michelle'); $name_string=implode(',',$name_array); echo $name_string;

The function implode() will take all the array elements and use comma as the separator and store it in the variable $name_string which is then displayed using echo.

The output is shown below:

fig 16

explode() function:

The function explode() is the opposite of implode().

It does the work of converting a string into an array.

To demonstrate it let us try an example. Write the following code in index.php file:

<?php $car_string='Toyota,Ford,Dodge,Nissan,Kia,Mazda'; $car_array=explode(',',$car_string); print_r($car_array);

Here, a variable $car_string contains a string of names of cars separated by comma.

We have used explode() function to convert it into an array.

Syntax of explode() function:

explode(‘separator’,string);

Here, separator indicates a delimiter that is used in the string to separate the elements in the string.

And string indicates the name of the string that is to be converted in to an array.

The explode() function considers each element separated by a comma in this case as one element and gives each element an index and then stores the array formed in a variable $car_array.

It is then displayed using print_r() function.

The output is shown below:

fig 17

Some other inbuilt functions:

ucwords() function:

This function is used to convert the lower case initial letters to capital letters.

Write the following code in index.php:

echo ucwords('hello world');

The output is shown below:

fig 18

strtolower() function:

This function is used to convert all the lower case letters in a string to upper case letters.

Write the following code in index.php:

echo strtolower('HELLO WORLD');

The output is shown below:

fig 19

count() function:

This function counts the number of elements in a given array.

Write the following code in index.php file:

$name_array=array('Brad','Bob','Mike','Sarah','Michelle'); echo 'No. of elements: '.count($name_array);

The array $name_array contains 5 elements that will be counted using count() function.

The output is shown below:

fig 20

sort() function:

This function sorts the given array alphabetically.

Write the following code in index.php file:

$car_array=array('Toyota','Ford','Dodge','Nissan','Kia','Mazda'); sort($car_array); print_r($car_array);

Here, we have declared an array $car_array. Elements are not arranged alphabetically in it. Using sort() function we will arrange them alphabetically.

And print_r() function is used to display the array.

The output is shown below:

fig 21

Thus we finished learning user defined functions, linking two PHP files and some built-in functions in this PHP Functions tutorial.

#Linking two PHP files #PHP #php functions #PHP Tutorial #PHP user-defined and built-in functions #Web Development #web programming #WebDevelopment #Web Programming Tutorials

New Post has been published on www.eduonix.com - PHP Loops

PHP Loops

In this section we are going to learn about different loops in PHP and use a loop in displaying the information from a JSON file. I mean we are going to create a project in which we are going to get the information stored in “movies.json” file created in section 4 and then loop through the JSON file using PHP. So let’s learn about loops and how to extract data from a json file using PHP in this PHP Loops tutorial.

To start our project let’s create a new folder named Loops in the htdocs folder in the xampp folder in C drive.

Open a new notepad++ file and save it as index.php in the newly created folder named Loops in htdocs folder.

Open this project in browser by just writing localhost/Loops in the address bar. You will see the following output:

fig 1

Let’s start with PHP loops.

Loops in PHP have the same syntax as we used in javascript.

FOR LOOP

Syntax for a for loop is shown below:

for(initialization;condition;increment/decrement) Statement(s);

Let us try one example. Write the following code in index.php document:

<?php for($i=0;$i<=10;$i++) echo 'Number '.$i.'<br/>'; ?>

Here, we are dealing with PHP, so have included the code within

<?php?>

tag.

For loop has a variable $i initialized to 0 having condition $i<=10 and incrementing $i with every iteration.

The statement echo displays a string “Number ” with the value of $i variable concatenated with it using a period(.) in every iteration till the condition is satisfied.

Brake tag is used for a line brake.

The process of displaying will continue till the condition is true. Once the condition becomes false, the loop will terminate.

Now just reload the page and see the output as shown below:

fig 2

WHILE LOOP

Syntax for while loop is show below:

Variable initialization; while(condition) Statement(s); Increment/decrement;

Let us try the same example shown above using while loop. Write the following code in index.php document:

<?php $i=0; while($i<=10) echo 'Number '.$i.'<br/>'; $i++; ?>

Here, we have initialized $i variable to zero(0) initially.

Next we have given the condition $i<=10 in the while statement.

The statement echo inside the while block will display the string “Number ” with the value of $i as it changes in every iteration.

The statement $i++; is used to increment the value of $i after displaying it. But remember if you forget to increment/decrement its value, the loop will become an infinite loop. This will happen because the value of $i will remain constant and it will always satisfy the condition and will always return true.

Now reload the browser and see the output, it is shown below:

fig 3

FOREACH LOOP

Syntax for a foreach loop is shown below:

foreach(Variable_pointing_to_array as variable_traversing_through_array) Statement(s);

Let us try it with an example. Write the following code in index.php document:

<?php $people=array('Robbin','Michael','Jeorge','Kevin'); foreach($people as $person) echo $person.'<br/>'; ?>

Here, we have declared an array named $people. We want to just display the names in the array using foreach loop.

The foreach loop contains array name i.e. $people, as keyword and a variable $person for traversing the array $people.

The variable $person fetches one value from the array and then auto-increments itself to point to the next value in the array with every iteration.

We have displayed the array contents using echo statement.

Now reload the browser and see the output. The output is shown below:

fig 4

Now we have learned the loops, so let us turn to the next part of our project i.e. looping through a JSON file using PHP.

For this copy the movies.json file created in some of the previous chapters of section 4 “XML,JSON and AJAX” and paste in our Loops folder created for this project in htdocs file.

Since we want to display data in a systematic way we need to use html in this project.

So write the following HTML code in index.php document. You can comment all the loop examples taken above.

Comments in PHP are :

// — single line comment

/* —-*/ — multiline comment

HTML code is as follows:

<!DOCTYPE html> <html> <head> <title>My Movies</title> </head> <body> </body> </html>

Your page will look like this:

fig 5

Now to show the information on the webpage we need to grab the contents of the movies.json file. So write the following code above the statement

<!DOCTYPE html>

<?php $jsondata=file_get_contents("movies.json"); ?>

Here, we have not given the full path of movies.json file because our index.php file and movies.json file are in the same folder.

Due to the above code we will get all the data from the movies.json file and it will be stored in the variable $jsondata.

If we are working with a website and we want data from a URL, we can use the URL in place of the file name.

We got the data from the JSON file and stored it in the variable $jsondata. Next thing we want to do is decode the JSON data so that we could parse it with php. So write the following statement below the statement written in step 7 inside the

<?php?>

tag:

$json=json_decode($jsondata,true);

This statement will decode the JSON data and store it in the variable $json.

Now we have the decoded data with us. So to represent it using php and html write the following code in the

tags.

<body> <div id="container"> <h1>My Favourite Movies</h1> <ul> <?php foreach($json['movies'] as $key=>$value) echo '<h4>'.$value['title'].'</h4>'; echo '<li>Year: '.$value['year'].'</li>'; echo '<li>Genre: '.$value['genre'].'</li>'; echo '<li>Director: '.$value['director'].'</li>'; ?> </ul> </div> </body>

Here, we are representing the information in an un-ordered list.

The whole information is contained in a div tag with id “container”. It will be easy to apply styling to the information.

We have used PHP to display the decoded information stored in the variable $json.

foreach loop is used to display the contents of the array.

The title of the movie is displayed in an h4 heading tag and the details of the movie viz. year, genre and director are displayed in the li tags.

Output after writing the above code is shown below:

fig 6

Now as we have displayed all the information, we will apply some styling to it. Write the following code in the head section of the page:

Here, we have styled the h1, h4, li tags and container id.

Due to the text-align:center; style applied to the h1 tag, the heading My Favourite Movies is aligned to centre.

Next each movie title is given the margin of zero pixels, padding of 5 pixels from all sides and a gray background color; as it is in h4 tag.

Next the bullets of each list item are removed using the statement list-style:none and a padding of 5 pixels is given from left side.

Next the id container is styled with width of 600 pixels. This will club all the information within the width of 600 pixels.

A margin with value autois given to the container div so that the contents of the container div are always shown at the centre.

The styling overflow:hidden; is used to hide any overflown data.

Output of the styled webpage is shown below:

fig 7

Thus we finished with our PHP loops and a task of grabbing JSON file data and displaying it using PHP in this PHP Loops tutorial.

#PHP #PHP Loops #PHP Tutorial #Web Development #web programming #WebDevelopment #Web Programming Tutorials

New Post has been published on www.eduonix.com - Movie Select Project

Movie Select Project

Today we are going to practically use Ajax with JSON in this Movie Select Project. In this project we are going to create a drop-down list box containing movie titles. It contains such a mechanism that when we select any of the movie title from the drop down list, its details viz year, genre and director will be displayed asynchronously i.e. without refreshing the page. The information will be fetched from the movies.json file created in few previous tutorials. As this uses Ajax, we again need server to run the project. We will use xampp server. We have learned to install xampp server and start the Apache from the xampp control panel in the last tutorial.

So let’s start the process step by step.

Create a folder on desktop and name it as “Ajax”.

Copy and paste the file “movies.json” previously created in this “Ajax” folder.

Now open a new notepad++ document and save it as “index.html” in the “Ajax” folder created on desktop.

Write the following html code in this “index.html” file./li>

<!DOCTYPE html> <html> <head> <title>My Movies</title> </head> <body onload=”getMovieTitles()”> <div id="container"> <h1>My Favourite Movies</h1> <div id="movie_title"></div> <br/> <div id="movie_info"></div> </div> </body> </html>

Here, in the above html code we have defined a main div tag with id container to hold the rest of the div blocks.

A function getMovieTitles() is called on the onload event of the body tag.

Next we have placed a title “My Favourite Movies” in the h1 heading tags.

Then another div block with id “movie_title” is defined that will hold the drop-down list containing movie titles fetched from the file movies.json.

Then again a third div block with id “movie_info” is defined that will hold the detailed information about a selected movie title in the drop-down list.

Now after writing the html code let’s run the page.

For this we need to paste our folder “Ajax” in the htdocs folder which is inside the xampp folder placed in C drive.

Now after copying the “Ajax” folder to htdocs folder, open the xampp control panel and start the Apache module. Otherwise page will not run.

Now open the browser and type localhost/Ajax in the address bar. Ajax is the name of our folder from where the page will run.

The output is shown below:

fig 1

Let’s do some styling to the page. Write the following code in head section above

tag.

<head> <style> h1 text-align:center; </style> <title>My Movies</title> </head>

Here, we have simply aligned the heading My Favourite Movies at the center of the page.

The output is shown below:

fig 2

Now let us move to the processing part. Write the following getMovieTitles() function that will be called at the onload event of the body element in the head section in the

tags.

<head> <style> h1 text-align:center; </style> <title>My Movies</title> <script> function getMovieTitles() var xmlhttp; if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function() if(xmlhttp.readyState==4 && xmlhttp.status==200) jsondata=JSON.parse(xmlhttp.responseText); var movies=jsondata.movies; var output='<form>'; output+='<select id="movie_select" onchange="movieSelect()">'; for(var i=0;i<movies.length;i++) output+='<option value="'+i+'">'+movies[i].title+'</option>'; output+='</select>'; output+='</form>'; document.getElementById('movie_title').innerHTML=output; xmlhttp.open("GET","movies.json",true); xmlhttp.send(); </script> </head>

Here, we have the code for getMovieTitles() function in the script tag.

We have used the AJAX technology to get the desired output.

It uses XMLHttpRequest object to send and receive the request asynchronously.

Hence we have declared a variable xmlhttp and created the object of XMLHttpRequest using the following code:

if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

Here, all browsers does not support XMLHttpRequest i.e. browsers with version IE6 and below does not support XMLHttpRequest but the browsers other than these support XMLHttpRequest.

So, for browsers supporting XMLHttpRequest, XMLHttpRequest object is created and for those that do not support ActiveXObject is created.

Next on the onreadystatechange event the readyState and status properties of the XMLHttpRequest object are checked in the if statement. If the condition is satisfied, we get the response and it is designed to be shown in a dropdown list in a form as follows:

xmlhttp.onreadystatechange=function() if(xmlhttp.readyState==4 && xmlhttp.status==200) jsondata=JSON.parse(xmlhttp.responseText); var movies=jsondata.movies; var output='<form>'; output+='<select id="movie_select" onchange="movieSelect()">'; for(var i=0;i<movies.length;i++) output+='<option value="'+i+'">'+movies[i].title+'</option>'; output+='</select>'; output+='</form>'; document.getElementById('movie_title').innerHTML=output;

Here, inside if block we get the response from xmlhttp.responseText statement. We don’t have direct method for getting JSON response. So we convert the received response to JSON using JSON.parse() method as shown below:

jsondata=JSON.parse(xmlhttp.responseText);

The response is stored in jsondata variable.

Next the movies array in the movies.json file is stored in the variable movies as shown below:

var movies=jsondata.movies;

Next output is stored in the output variable.

It contains a form. Inside the form we have a select tag that creates a dropdownlist. This select tag has an id movie_select and it calls movieSelect() function on onchange event.

The titles of the movies are put in the option tags that form the values of the dropdownlist.

All this output is displayed in the div block having id movie_title.

Next the details for transfer of response is given in open method as shown below:

xmlhttp.open("GET","movies.json",true);

It contains the transfer with GET method, response will be fetched from movies.json file and true indicate the asynchronous transfer.

Then response will be sent using the statement

xmlhttp.send();

Reload the page and see the output as shown below:

fig 3

We now have all the movie titles in the dropdown list. Now we need to write the logic to select or get and store the selected movie title to get the further information. Hence, write the following function movieSelect() below getMovieTitles() function.

function movieSelect() var selectBox=document.getElementById('movie_select'); var movieIndex=selectBox.options[selectBox.selectedIndex].value; getMovieInfo(movieIndex);

Here, the function movieSelect() is called at the onchange event of the select tag of dropdownlist.

Purpose forthis function is just to get the index of the selected dropdownlist item.

So first of all we have stored the element having id movie_select i.e. the dropdownlist in the selectBox variable.

Next we retrieved the index of the selected movie title using the statement

var movieIndex=selectBox.options[selectBox.selectedIndex].value;

The retrieved index is stored in the variable movieIndex.

After retrieving the selected index we want to fetch its details which is done in getMovieInfo() function, hence this retrieved movieIndex is passed to getMovieInfo() function and the function is called using the following statement:

getMovieInfo(movieIndex);

Now as the function getMovieInfo() is called from the movieSelect() function, let us write code for it below movieSelect() function. The code for getMovieInfo() function is given below:

function getMovieInfo(i) var xmlhttp; if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function() if(xmlhttp.readyState==4 && xmlhttp.status==200) jsondata=JSON.parse(xmlhttp.responseText); var movies=jsondata.movies; var output=''; output+='<li>Year : '+movies[i].year+'</li>'; output+='<li>Genre : '+movies[i].genre+'</li>'; output+='<li>Director : '+movies[i].director+'</li>'; document.getElementById('movie_info').innerHTML=output; xmlhttp.open("GET","movies.json",true); xmlhttp.send();

The above function getMovieInfo() is written to get the detailed information of the selected movie title.

The movieIndex variable value in the movieSelect() function is received in the getMovieInfo() function in variable i.

Here also we have AJAX for asynchronous transfer, so all the things are same as explained for getMovieTitles() function.

The only difference is in the displaying code inside if statement that checks the satisfaction of readyState and status properties of XMLHttpRequest object.

The code for it is shown below:

if(xmlhttp.readyState==4 && xmlhttp.status==200) jsondata=JSON.parse(xmlhttp.responseText); var movies=jsondata.movies; var output=''; output+='<li>Year : '+movies[i].year+'</li>'; output+='<li>Genre : '+movies[i].genre+'</li>'; output+='<li>Director : '+movies[i].director+'</li>'; document.getElementById('movie_info').innerHTML=output;

Here, the response is received, converted to javascript object i.e. and stored in the variable jsondata.

Then we retrieved the movies array from the jsondata object and stored it in the movies variable.

The output to be displayed is stored in the output variable.

We have retrieved the year, genre and director details of the selected movie using the following code:

var output=''; output+='<li>Year : '+movies[i].year+'</li>'; output+='<li>Genre : '+movies[i].genre+'</li>'; output+='<li>Director : '+movies[i].director+'</li>';

Then this output is displayed in the div block having id movie_info.

Reload the page and see the output as shown below:

fig 4

We finished displaying the output. You can see in the above output that the year, genre and director of the selected movie Superbad are displayed.

Now let us make it more attractive by applying some styles. Write the code for it in the head section in

tags as shown below:

In the above code, we have seen the styling for h1 beforehand, so let’s start with styling of li tag.

In the styling of li tag we have removed the bullets using list-style:none; and have given a padding of 5 pixels to the left side using padding-left:5px;.

Next we have styled the id container. # sign is used before it because it is an id.

The container div is given a width of 600 pixels, a top and bottom margin of 80 pixels and left and right margin as auto so that output should be displayed at the centre.

A 1 pixel dashed border with gray color is drawn with minimum height 200 pixels and padding of 15 pixels from all sides.

After styling reload the page and see the output as shown below:

fig 5

We have used Ajax and JSON and practically learned to retrieve data asynchronously. Thus we finished our Movie Select Project.

#Ajax #AJAX and JSON Project #Ajax tutorial #HTML #Java Script #Java Script Tutorial #JavaScript #JavaScript Tutorial #Json #json tutorial #Web Development #web programming #WebDevelopment #XML #XML Tutorial #Web Programming Tutorials

New Post has been published on www.eduonix.com - Variables and Arrays in PHP

Variables and Arrays in PHP

Today we are going to learn about creating variables and arrays and use them in our programs. In last session we had learned to install xampp server on our computer to make it a local server. So now our computer or local server is now ready to run PHP programs. Let us now start from variables in this Variables and Arrays in PHP tutorial.

We know that to run PHP pages, we need to put it in the htdocs folder in the xampp folder located in C drive. So create a new folder named Var_Array in the htdocs folder.

Open a new notepad++ document and save it as index.php in the newly created folder Var_Array in the htdocs folder.

Now let’s open this page in the browser. For it you just have to write localhost/Var_Array in the address bar of the browser. Var_Array is the folder containing index.php page. No need to specify the name of page index.php, because it automatically runs the page having name index. The page in browser is shown below:

fig 1

Now write the following statement in index.php file.

$x=5;

This is the variable declaration in PHP.

If you compare it with javascript, in javascript the variable declaration is as shown below:

var x=5;

The difference is that PHP does not use any keyword like var to declare the variable and variable name always starts with $ sign.

Now reload the page, output is shown below:

fig 2

Here in the above figure we can see that the PHP code has printed as it is.

This is because the tag is not being used. So put the above code in

<?php?>

tag as shown below and then see the output.

<?php $x=5; echo $x; ?>

It will work even if you omit ?>.

Here, $x=5; is the variable declaration and echo $x; is the statement used to print it on the webpage. Keyword echo is used to display anything i.e. a string or value of a variable.

Every statement ends with a semicolon.

The output is shown below:

fig 3

Printing a string is very simple. Write the following code:

<?php echo 'Any String'; ?>

Here, echo ‘Any String’; statement will print Any String on the page. The string to be printed can be enclosed in single quotes or double quotes.

Output is shown below:

fig 4

Concatenating values of 2 variables:

Write the following code in index.php file:

<?php $word1='Hello'; $word2='World'; echo $word1.' '.$word2; ?>

Here, $word1 variable contains string Hello and $word2 variable contains string World.

To concatenate values of two or more variables and strings in PHP we use period(.).

So in the above echo statement we have concatenated both the variables with a space in between using a period.

Output is shown below:

fig 5

Now I will just add another string before Hello World in the above code.The changed code is shown below:

<?php $word1='Hello'; $word2='World'; echo 'I just want to say '.$word1.' '.$word2; ?>

Here, I have added a string “I just want to say”. The output is shown below:

fig 6

Now let us add two variables.

Write the following code inside

<?php?>

tag:

<?php $num1=5; $num2=7; echo $num1+$num2; ?>

Here, the numbers 5 and 7 stored in variables $num1 and $num2 are added using arithmetic addition operator(+).

Output is shown below:

fig 7

If you want to write some string before the addition, follow the code:

<?php $num1=5; $num2=7; echo "Sum of 2 numbers = ".($num1+$num2); ?>

Here, we have added a string “Sum of 2 numbers = ” to the addition of variables using a period.

During this make it sure that you put your variable addition in the parenthesis like ($num1+$num2), otherwise instead of the sum of 2 variables only the value of second variable will be printed.

The output is shown below:

fig 8

In this way we can work with variables.

Now let us work with arrays.

Array is nothing but a collection of values stored in a single variable.

Declaration syntax of an array is done as follows:

Variable_name= array(val1,val2.val3);

Eg: $fruits=array(‘apple’,’mango’,’banana’,’grapes’);

Write the following code in the index.php file:

<?php $cars=array('Honda','Toyota','Ford'); echo $cars[0]; ?>

Here, we have declared an array of $cars having values Honda, Toyota and Ford.

In PHP also like JavaScript the start index of array is zero(0).

So echo $cars[0]; statement prints the value at index 0 i.e. Honda.

The output is shown below:

fig 9

We can also concatenate a string with an array value as shown below:

echo 'I drive a '.$cars[2];

Here we have concatenated a string “I drive a ” with the $cars array value located at index 2 i.e. Ford.

The output is shown below:

fig 10

Traversing whole array with a foreach loop.

In PHP most of the times it is feasible to use foreach loop.

Let us write the following code:

<?php $cars=array('Honda','Toyota','Ford'); foreach($cars as $car) echo $car.'<br/>'; ?>

Foreach loop is written using the foreach keyword.

It contains the name of the array whose values are to be displayed, a keyword as and any variable to traverse through the array .

In the above case, array whose values are to be displayed is $cars and the variable used to traverse through the array is $car.

The statement inside the foreach loop is

echo $car. ;

This statement is used to print the array values fetched by the variable $car. Brake tag is concatenated to give a line brake.

In foreach loop the variable $car fetches the value at index 0 of $cars array which is printed using echo statement. It then automatically points to the next index i.e. index 1 and displays the next value in the array. It repeats this process till the end of the array.

The output is shown below:

fig 11

If you add one more value to the array $cars, it will also be printed.

Now let us learn about an array having not only a value but also a key.

These arrays contain a key value pair.

Let us learn it by declaring it and accessing it s value. Write the code shown below in index.php page:

<?php $car=array('make'=>'Toyota','model'=>'Camry','color'=>'Black'); echo $car['make'].’<br>’; echo $car['color']; ?>

The declaration of array $car is shown above.

It contains key value pairs separated by a comma.

In the above array, make is a key and Toyota is its value, similarly model is a key and Comry is its value and so on.

A value is associated with the key using => sign.

The values are accessed using the keys as shown above.

The output is shown below:

fig 12

Displaying key-value pair array values using foreach loop.

Write the following code in index.php file:

<?php $car=array('make'=>'Toyota','model'=>'Camry','color'=>'Black'); foreach($car as $key=>$value) echo $key.' : '.$value.'<br>'; ?>

For the key – value pair array there is a slight difference in using foreach loop.

In the above foreach loop $car is the array whose values are to be displayed, as is the keyword and there is a variable used $key for the key in the array and $value for the value of the key in that array. And this key value pair in the foreach loop is written in the same way as written in the array.

Next we have displayed the keys as well as the values from the array in the echo statement.

The output is shown below:

fig 13

If we want to capitalize the initail letters of the keys, use ucwords() function in the echo statement as shown below:

echo ucwords($key).' : '.$value.'<br>';

Here, we have given $key as a parameter to the function ucwords(). This will capitalize the first letter of all keys.

The output is shown below:

fig 14

These arrays are sometimes called hashes in other languages.

Thus we finished learning to use variables and arrays in this Variables and Arrays in PHP tutorial.

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality

Anya is LIVE right now

FREE

Free to watch • No registration required • HD streaming

New Post has been published on www.eduonix.com - PHP Environment Setup

PHP Environment Setup

In the last session we learned some of the PHP fundamentals. So we now very well know that PHP is a server side language. Hence it requires a server to run its programs. It is not like JavaScript where we directly write the JavaScript code in the html page and open the html page in the browser. The files of php have to be placed on the server for execution. For this you can use any of your host server/private server or any of the server application platform like xampp or wamp that gives you an apache server and MYSQL database. So we are going to study the requirements for PHP in this PHP Environment Setup tutorial.

We will use xampp server platform for our PHP programs. So follow the steps to download and install the xampp server.

Open your browser and go to apachefriends.org. The following page will open:

fig 1

Now click on Download tab above in the horizontal menu bar. The following page will appear:

fig 2

Download the setup by clicking on the download button and save it.

Install the setup following the instructions given same like any other setup.

After the setup is installed completely it will automatically open the xampp control panel as shown below:

fig 3

This xampp server contains Apache, MYSQL, FileZilla server, etc. We need only Apache and MYSQL for PHP. It will work only when we start the Apache and MYSQL.

We can allow the Apache and MYSQL to start along with windows by clicking on the cross sign besides it as shown below:

fig 4

When you click on the cross shown by the arrow, a dialog box appears asking you to “Click Yes to install the Apache service”.

So click on the “Yes” button and the red cross sign will change to the green color tick mark sign as shown below:

fig 5

Follow the same process for MYSQL to start it with windows.

You can also start it by clicking on the “Start” button in front of Apache and MYSQL. When you click on it, the text of the button will change from “Start” to “Stop” and vice-versa. Just see in the figure below:

fig 6

You can see the text changed from “Start” to “Stop” as shown by arrow. This means our apache and MYSQL has been started.

Now close the xampp control panel.

Now we know that xampp server has been installed on our computer, but the PHP applications that we wish to run cannot be run from anywhere on our computer. Let us first see the xampp structure:

When xampp is installed, a folder named xampp gets created in the C drive of our computer.

This xampp folder consists of many folders and files like htdocs, apache, mysql, php etc. as shown below:

fig 7

If we wish to run our PHP or any other application using server, we need to place the folder or file of our application in the htdocs folder shown by an arrow in the above figure.

Now let us see if xampp have been installed properly.

For this, open the browser and type localhost in the address bar.

A splash.php page will be opened, which is inside the xampp folder.

It is shown below:

fig 8

This shows that now our xampp is successfully installed without any error.

Next step is giving password to MYSQL.

We have MYSQL also, but it is not secure. To make it secure we need to give it a password.

For this select the English language when you run the localhost i.e. click on the English link shown in the above figure.

Following page will appear:

fig 9

In the page appeared click on Security which is shown using the black color arrow in the above figure.

When you click on “Security” you will get the following page:

fig 10

In this page above you will notice that it is written The MYSQL admin user root has NO password.

Now click on the link http://localhost/security/xamppsecurity.php which is placed at the lower side of the page shown above in fig 10.

Again a page will open where you have to enter your password.

fig 11

Enter your password in the above fields for new password and repeat password as I did in the above figure and then click on Password changing button.

After you click on the Password changing button you will get a message saying, The root password was successfully changed. Please restart MYSQL for loading these changes!

For this just open the xampp control panel. Click on the Stop button in front of the MYSQL to stop the MYSQL service and again click on the Start button in front of the MYSQL to again start the MYSQL service.

Thus we have successfully changed the MYSQL password and restarted it.

Now let’s test if our applications work on xampp.

First we will test html document.

Create a new folder in the htdocs folder which is inside the xampp folder on C drive and name it as Test.

Open a notepad++ document and save it as index.html in the Test folder in the htdocs folder.

Write the following in the index.html document and save it:

TESTING

Now open the browser and write localhost/Test in the address bar. Test is the folder containing index.html document in the htdocs folder.

You will get the following output:

fig 12

HTML file will show the correct output even if you place the file anywhere on your computer, because it doesn’t need server to run.

Testing a .php file.

Now change the extension of file index.html from .html to .php. You can do this by renaming index.html file.

After renaming the file write the following PHP code in it and save the file:

<?php echo 'TEST';?>

Now reload the browser and see the output as shown below:

fig 13

Now do one thing, copy the index.php file from the Test folder and paste it on the desktop.

Open this index.php file with Google Chrome. You will see the following output:

fig 14

The PHP code is printed as it is on the web page. This shows us that PHP programs needs a server to run, without a server we cannot run PHP pages.

Thus we studied the requirements and the environment needed for PHP in this PHP Environment Setup tutorial.

#PHP #PHP Environment #PHP Environment Setup #PHP Tutorial #Web Development #web programming #WebDevelopment #Xampp server for PHP #Web Programming Tutorials

New Post has been published on www.eduonix.com - PHP Fundamentals

PHP Fundamentals

Till now we have dealt many server side programming languages. Also we have dealt with javascript which is a client side programming language along with DTD schema with XML, JSON etc. Today we will deal with a solid server side language called PHP which is used in many of the popular websites such as twitter, facebook, etc. PHP goes well with MYSQL.

So let’s learn basics of PHP in this PHP Fundamentals tutorial.

What is PHP?

PHP stands for PHP Hypertext Preprocessor.

PHP was created by Rasmus Lerdorf in 1995.

PHP is a server side scripting language i.e. everything is done on server, may it be decision making, condition checking, etc.

PHP can be directly embedded into HTML using

<?php?>

tags.

PHP is free and open source scripting language.

PHP is a loosely typed language. It means that there is no need to define the type of a variable.

PHP works great with databases like MSQL. It also works nicely with other database systems.

What is PHP used for?

PHP is mostly used with databases like MYSQL. It creates a user friendly interface when dealing with data.

PHP generates web content/HTML.

You can use command line scripting with PHP.

PHP can even be used to build desktop applications.

It can be used in an object oriented or procedural manner.

Its more secure, more usable and a better programming language.

Embedding PHP into HTML

It is extremely easy to add PHP programming into HTML.

All we need to do is embed

<?php?>

tag wherever we want to write the php code in the HTML document.

Let’s have a look at an example below:

<h1>Welcome To My Page</h1> <p>This is my page</p> <p>Written by <?php echo $name;?></p>

In the above code we can see that we have a heading and 2 paragraphs in HTML.

A php code is embedded into the second paragraph using

<?php?>

tag.

In the statement

<?php echo $name;?>

written above, $name is a variable name and echo is a command given for displaying/printing exactly like

document.write();

in javascript.

Programming Basics

All the programming basics are available in PHP such as variables, loops, arrays, functions and objects.

Variables start with $ sign. ( Eg: $myVar=’my variable’;)

Arrays can also have associative arrays. It is sometimes called as hash eg: array(“name” => “Brad”), here, name is a key and Brad is its value.

In PHP we have for, while, do while and foreach loops.

Object Oriented Programming

PHP works greatly with object oriented programming.

We can create classes in PHP which represent an object.

Objects in turn can have properties and methods.

Let’s have a look on a small PHP class

Class dog private $breed; private $color; public function bark() echo “Bark”; $spot=new dog(); //To instantiate an object of class dog $spot->bark(); //call a class method

In the above code we have created a class dog.

$breed and $color are the private members or variables of the class dog.

Next we have defined an function named bark() that prints Bark when called to execute.

To execute the class methods, an object named $spot of type dog is created/instantiated .

Using the $spot object the bark() method of dog class is called using the following statement:

$spot->bark();

Thus we have gone through some introduction of PHP basics in this PHP Fundamentals tutorial.

New Post has been published on www.eduonix.com - How to create a responsive website using html5 and css

How to create a responsive website using html5 and css

In this tutorial today we will learn how to create a responsive website using html5 and css .

So to learn how to create a responsive website using html5 and css follow the steps given below :

Before working on responsive website first of all lets create a basic design template .

First of all create a new folder for example say responsive, inside that folder create some other folders like css, images and also create a new index.html file .

CSS folder will contain the style.css file which we will be using in our website development to add some styling effect .

So you will have the following content in your responsive folder as shown below :

Open your index.html file with any of the text editor and write the following code :

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Responsive Design</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div id="wrapper"> <div id="logo"> <h1>Logo</h1> </div>  <div id="header">  <ul> <li> <a href="#" class="active" >Home</a></li> <li> <a href="#" >About</a></li> <li> <a href="#" >Services</a></li> <li> <a href="#" >Product</a></li> </ul> </div>  <div id="slider"> <img src="images/v1.jpg" width="425%;"/> </div> <div id="contentarea"> <div id="leftside"> <div class="thumb"> <h2>Hotel</h2> <p>Hi how are you</p> </div> <div class="thumb"> <h2>Restaurent</h2> <p>Hi how are you</p> </div> <div class="thumb"> <h2>Bar</h2> <p>Hi how are you</p> </div> <div class="thumb"> <h2>Club</h2> <p>Hi how are you</p> </div> </div> <div id="rightside"> <h2>Links</h2> <ul> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> </ul> </div> <br clear="all" />  </div> <div id="footer"> &Copyright eduonixlearning solution.com </div> </div> </body> </html>

Here are the screenshots for the code :

Now to add some styling effects just create a style.css file in css folder and write the following code in it :

body margin:0; padding:0; font-family:Arial,Helvitica Sanf serif; * padding:0; margin:0; #wrapper border:solid 1px; max-width:1100px; margin:auto; #logo border:0px solid; width:20%; float:left; padding-left:30px; font-style:italic; #header clear:both; width:100%; background:#292929; height:42px; margin-top:100px; float:left; #header ul list-style:none; #header ul li a text-decoration:none; color:#fff; float:left; padding:0px 40px; height:42px; line-height:42px; text-align:center; #header ul li a:hover background:#f20068; #header ul li a.active background:#f20068; which ever tab active that has that color #slider clear:both; float:left; width:100%; #slider img width:100%; #contentarea border:1px solid; clear:both; float:left; margin-top:20px; width:100%; #contentarea #leftside float:left; width:70%; border:0px solid; #contentarea #leftside .thumb width:45%; margin-left:30px; margin-bottom:30px; float:left; min-height:200px; border:0px solid #ccc; #contentarea #leftside .thumb h2 background:#f20068; width:100%; color:white; text-align:center; #contentarea #rightside width:26%; float:right; border:0px solid #ccc; margin-right:20px; #contentarea #rightside h2 background:#f20068; width:100%; color:white; text-align:center; #contentarea #rightside ul list-style:none; #contentarea #rightside ul li border-bottom:1px dotted #ccc; height:55px; line-height:35px; padding-left:10px; #contentarea #rightside ul li a text-decoration:none; color:#333; #contentarea #rightside ul li a:hover color:#f20068; #footer clear:both; float:left; width:100%; height:30px; line-height:30px; color:#fff; background:#333; text-align:center; color:red; @media screen and (max-width:720px){ #logo border:1px solid; text-align:center; width:100%; float:left; padding-left:30px; font-style:italic; #header clear:both; width:100%; background:#292929; height:200px; margin-top:30px; float:left; #header ul list-style:none; #header ul li a float:none; display:block; text-decoration:none; color:#fff; float:left; padding:0px 40px; height:42px; line-height:42px; text-align:center; #header ul li a:hover background:#f20068; #header ul li a.active background:#f20068; which ever tab active that has that color #slider clear:both; float:left; width:100%; #slider img width:100%; #contentarea border:1px solid; clear:both; float:left; margin-top:20px; width:100%; #contentarea #leftside float: none; width:100%; border:0px solid; #contentarea #leftside .thumb width:90%; margin-left:30px; margin-bottom:30px; float: none; min-height:200px; border:0px solid #ccc; #contentarea #leftside .thumb h2 background:#f20068; width:100%; color:white; text-align:center; #contentarea #rightside width:90%; float:none; border:0px solid #ccc; margin-right:20px; margin-left:35px; #contentarea #rightside h2 background:#f20068; width:100%; color:white; text-align:center; #contentarea #rightside ul list-style:none; #contentarea #rightside ul li border-bottom:1px dotted #ccc; height:55px; line-height:35px; padding-left:10px; #contentarea #rightside ul li a text-decoration:none; color:#333; #contentarea #rightside ul li a:hover color:#f20068; #footer clear:both; float:left; width:100%; height:30px; line-height:30px; color:#fff; background:#333; text-align:center; color:red;

Screenshots for the style.css file are given below :

Hence, when you run your index.html file you will have following output :

To make your website responsive you will have to add the media queries in your css file .

The syntax is given below :

//This is for the tablet. // Syntax to add the media queries: @media screen and (max-width:720px;) //Add your css here. //For the mobile you have to add the media queries: @media screen and (max-width:420px;) //Add your css here.

So now when you shrink the page you will have the following output :

Now just perform slight changes in the css as shown below :

After adding media screen for the tablet the output window will have following look out :

Hence, we have successfully learnt how to create a responsive website using html5 and css .

New Post has been published on www.eduonix.com - Fetching Data with Ajax

Fetching Data with Ajax

Last time we understood the basics of Ajax. So, today we are going to learn how to fetch data using Ajax without refreshing the page or browser practically in the tutorial Fetching Data with Ajax.

In this practical with Ajax we are going to work with a web server. While running, there are some cases where the page won’t work on local machine; it needs a web server. To work on server we can built our files on the local machine and then upload it in a sub directory created on the server. In this tutorial we are going to use a Xampp server application.

So let’s start step by step.

First download the Xampp server from the link https://www.apachefriends.org/download.html.

Install the Xampp server.

Start the Apache in the Xampp Control Panel as shown below:

fig 1

You can see a red colour arrow showing a Stop button in front of the Apache Module. Actually this button has Start written on it initially and when you click it, it starts the Apache and changes its text from Start to Stop.

After starting the Apache close the Xampp Control Panel window.

Now your Xampp server is ready to run your webpages.

Whenever you want to run your webpages or a website using Xampp server, you need to copy your website folder to htdocs folder located in xampp folder in your C drive.

Now create a folder on desktop and name it as eduonix.

Open a notepad++ document and save it as index.html in the eduonix folder just created on desktop.

Now write the following code in index.html file and save it.

<!DOCTYPE html> <html> <head> <title>Ajax Lesson</title> </head> <body> test the page </body> </html>

The text test the page is written in the body section to just check the page.

Now copy the eduonix folder and paste it in the htdocs folder which is in the xampp folder on C drive.

Now next step is to open the browser and run the webpage. For this write the following address in the address bar of the browser:

localhost/eduonix The index.html page in the eduonix folder will be shown with the text test the page.

Here we finished testing the page. Now we want to create a div block containing some text and a button which when clicked will change the text in div block asynchronously.

So replace the text test the page with the following code:

<div id="data"><h2>Replace this text</h2></div> <button type="button" onclick="getDataFromXML()">Get Data</button>

Here, Replace this text is the statement that will be replaced asynchronously i.e. without page refresh and getDataFromXML() is the function called at the click event of the button to replace the text.

Now as we have made changes replace the eduonix folder in the htdocs folder again with eduonix folder on desktop and then reload the browser, you will get the following output:

fig 2

Actually we want to fetch data from a XML file, a simple text file and a JSON file asynchronously using AJAX in this Fetching Data with Ajax tutorial. So let’s start with a XML file.

First upload the movies.xml file created in previous tutorials to the eduonix folder inside htdocs folder.

Now write the following code in the head section of index.html document in the

tag. We are now writing code for getDataFromXML() function.

Description of the function:

Here, getDataFromXML() function is defined to replace the text on the webpage with the data in the movies.xml file asynchronously.

A variable xmlhttp is declared for the XMLHttp object.

Next the XMLHttpRequest object is created to send the request to the server. But some browsers like IE6 and lower versions of IE do not support XMLHttp object, so they require creating ActiveXObject for sending the request. This is done by using the following code:

if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

The else part in above code is for lower versions of IE browser.

Now after creating the request object and sending the request, we need to check whether our request has been processed or not. For this we need to check the readyState and status properties of XMLHttpRequest object. The code is as follows:

xmlhttp.onreadystatechange=function() if(xmlhttp.readyState==4 && xmlhttp.status==200) xmldata=xmlhttp.responseXML; var movies=xmldata.getElementsByTagName('movie'); var output=""; output+=movies[0].getElementsByTagName('title')[0].firstChild.nodeValue; document.getElementById("data").innerHTML=output;

Here, in the above code onreadystatechange is the event that occurs when the request is being processed.

It is assigned a function that checks the readyState ad status properties.

In the if statement the readyState is equated to 4 and status is equated to 200 because 4 indicate that request finished and response is ready and 200 indicates that the status is OK.

If this if statement is satisfied, the XML response object is assigned to xmldatavariable as shown below:

xmldata=xmlhttp.responseXML;

After this a variable movies is declared which is assigned an element retrieved from xmldata by the tag name.

Then a variable output is declared to store the output.

Next the title of the first movie is assigned to the output using the following statement:

output+=movies[0].getElementsByTagName('title')[0].firstChild.nodeValue;

Next it is displayed in the browser window.

Here, we have printed only one movie title, the output is shown below:

fig 3

If we want all the movie titles to be displayed, then we should do it in a loop. Follow the following code to display all the movie titles:

if(xmlhttp.readyState==4 && xmlhttp.status==200) xmldata=xmlhttp.responseXML; var movies=xmldata.getElementsByTagName('movie'); var output='<ul>'; //output+=movies[0].getElementsByTagName('title')[0].firstChild.nodeValue; for(i=0;i<movies.length;i++) output+='<li>'+movies[i].getElementsByTagName('title')[0].firstChild.nodeValue+'</li>'; output+='</ul>' document.getElementById("data").innerHTML=output;

Here, we have put the movie titles in the un-ordered list and have put the statement to retrieve movie titles in a for loop so that all the titles are added up to the variable output.

Next outside for loop, the variable output is printed.

The output is shown below:

fig 4

Now next thing is to just get the data and send the response to the client. The code for it is as follows:

xmlhttp.open("GET","movies.xml",true); xmlhttp.send();

We know that the data to be send in response is in the movies.xml file, so we specify the details in the statement xmlhttp.open(“GET”,”movies.xml”,true);

Here, GET is the method to be used for sending the data. We can use POST method also.

The data to be send is in the movies.xml file so it is specified as the second value of the open method.

The third value of open method is true which indicates that the response should be sent asynchronously.

Next the response is sent through statement xmlhttp.send().

We finished sending the text, the output is shown as shown in fig 4.

Now we will see how to replace the div block text with plain text. So create a new text file and name it as data.txt. Write the following text in the file and save it.

This text is from the data.txt file.

The procedure is same as the XML file, just a slight change. The code for getDataFromText() function is written in the

tag:

function getDataFromText() var xmlhttp; if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function() if(xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById('data').innerHTML=xmlhttp.responseText; xmlhttp.open("GET","data.txt",true); xmlhttp.send();

Description of the function

Here, everything is same as done in the getDataFromXML function.

Only the if block checking the readyState and status properties have the following statement that executes when the condition satisfies:

document.getElementById('data').innerHTML=xmlhttp.responseText;

This statement selects the div block with its id data and replaces its actual text with the response text using the statement innerHTML.

And xmlhttp.responseText is the response object that contains response in the plain text format.

The response is fetched from data.txt file, so it is specified in the statement shown below:

xmlhttp.open("GET","data.txt",true);

Call the function getDataFromText()at the onclick event of the button Get Data as shown below.

<div id="data"><h2>Replace this text</h2></div> <button type="button" onclick="getDataFromText()">Get Data</button>

The output that we get on clicking on the Get Data button is shown below:

fig 5

Now next we will deal with JSON. We had created a JSON file in previous tutorials named movies.json. Upload this file in the eduonix folder located in the htdocs file in xampp folder.

Write the following function in order to replace the div block text with the data present in the movies.json file in the head section inside

tags.

function getDataFromJSON() var xmlhttp; if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function() if(xmlhttp.readyState==4 && xmlhttp.status==200) var jsondata=JSON.parse(xmlhttp.responseText); //retrieve result as a javascript object var movies=jsondata.movies; var output='<ul>'; for(i=0;i<movies.length;i++) output+='<li>'+movies[i].title+'<li>'; output+='</ul>' document.getElementById('data').innerHTML=output; xmlhttp.open("GET","movies.json",true); xmlhttp.send();

Description of the function

Here also the rest of the part is same, only there is slight difference in the retrieving of the output.

Let us understand the code executed when the if condition checking readyState and status properties is satisfied:

The code is shown below:

if(xmlhttp.readyState==4 && xmlhttp.status==200) var jsondata=JSON.parse(xmlhttp.responseText); //retrieve the result in JSON format var movies=jsondata.movies; var output='<ul>'; for(i=0;i<movies.length;i++) output+='<li>'+movies[i].title+'<li>'; output+='</ul>' document.getElementById('data').innerHTML=output;

Here, a variable jsondata is declared to store the response. It is assigned with the response object.

We don’t have direct method to retrieve the JSON response object hence the xmlhttp.responseText is converted to JSON using the following statement:

var jsondata=JSON.parse(xmlhttp.responseText);

Next we have retrieved movies array from jsondata object and stored it in movies variable.

And then displayed the movie titles in for loop using statement

output+='<li>'+movies[i].title+'<li>';

Here we have just used movies[i].title to retrieve the movie title which is very easy as compared to XML. Hence JSON is more popular than XML.

Next the output is printed using statement

document.getElementById('data').innerHTML=output;

One more thing, you have to add your movies.json file name to the response to be send as shown below:

xmlhttp.open("GET","movies.json",true);

Now call getDataFromJSON() function at the onclick event of the button GET DATA as shown below:

<div id="data"><h2>Replace this text</h2></div> <button type="button" onclick="getDataFromJSON()">Get Data</button>

The output of the data fetched and displayed in the div block is shown below:

fig 6

Here you can notice that whatever we have fetched using Ajax, may it be a plain text, a XML data or JSON; it is fetched asynchronously i.e. without refreshing the page.

Thus in this tutorial we learned Fetching Data with Ajax.

New Post has been published on www.eduonix.com - How to create drop down div in JQuery

How to create drop down div in JQuery

In this session today we will learn how to create a drop down div in jquery with the help of toggle functionality.

To learn how to create drop down div in jquery follow the steps given below :

First of all create a folder and name it for example as DropDown .

Now in this DropDown folder create an html file called as index.html .

Open this index.html file with any one of the text editor for example NotePad++ and write the following code in it :

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="dropdown.js"></script> <title>Div Slide</title> </head> <body> <div class="boxcontainer"> <div class="button"> Inclusion <div class="data"> Data in Inclusion div. </div> </div><br> <div class="button"> Exclusion <div class="data"> It was to be a two column table-like design with all links vertically left aligned in a left column and a right column, also left aligned, containing a brief description of each link. </div> </div><br> <div class="button"> Enquiry Form <div class="data"> Here the data will be shown in the drop down div. </div> </div><br> <div class="button"> Email To Friend <div class="data"> <label>Email of friend</label> <input placeholder="Friends Email" type="text"> <button>Send</button> </div> </div><br> <div class="button"> Download in PDF. <div class="data"> Download link for PDF file goes here. </div> </div> </div> </body> </html>

Here are the screen shots for the code :

Now in our DropDown folder create another file called as style.css and add the following code into it .

.boxcontainer width: 1000px; height: auto; border: 1px solid #ba0000; margin-left:200px; margin-top: 100px; .button background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ba0000), color-stop(1, #ba0000) ); background:-moz-linear-gradient( center top, #ba0000 5%, #ba0000 100% ); background-color:#ededed; border-bottom-left-radius:0px; text-indent:0; border:1px solid #dcdcdc; display:inline-block; color:#FFF; font-family:arial; font-size:15px; font-weight:normal; font-style:normal; height:30px; line-height:30px; width:200px; text-decoration:none; text-align:center; margin-left: 100px; margin: 10px; .data width: 800px; display: none; text-align: justify; padding: 15px; color:#000; .alt background: #808079;

Here are the screen shots for the code :

Now to implement drop down menu effect let’s add some jquery code.

For this we will require jquery header file to run our jquery programme.

So just visit jquery.com and you will have the following window :

Now click on the Download jquery button as shown in the above image:

After clicking the download button you will be navigated to the following page :

Now you can download any version from the jquery, here we will be downloading the compressed jQuery 1.11.1 as shown below:

Now click on the above link as shown you will be navigated to the following page:

Create a new jquery.js file in our DropDown folder and copy paste the above code into it.

Now let’s create a file which will create some dropdown effect on the div .

So in the DropDown folder create a new file called as Dropdown.js and write the following code in it:

$(document).ready(function () //this line to active the first div $('div.boxcontainer div.button:first-child div.data:nth-child(1)').show(); //This for adding color in odd and even manner $('.button:odd').addClass('alt'); $('.button:even').addClass('button'); //this is for showing div on click event $('.button').click(function() $(this).children().toggle("slow"); ); );

Here is the screen shot for the code :

Now if you run the index.html file you will have the following output :

Thus, we have successfully learnt how to create drop down div in JQuery .

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality

Anya is LIVE right now

FREE

Free to watch • No registration required • HD streaming

New Post has been published on www.eduonix.com - AJAX Fundamentals

AJAX Fundamentals

Ajax is a technology that allows us to dynamically send and receive data from the server without having to reload the page or browser. Ajax works very well with XML and JSON, infact ‘X’ in AJAX stands for XML.

What is AJAX?

AJAX stands for Asynchronous Javascript and XML.

In web development Asynchronous means getting information without having to reload the page.

AJAX is not a programming language but a way to use existing standards.

AJAX was made popular in 2005. It was first used in Google Suggest where when you try to search anything in the Google search engine, various suggestions are given in a drop down list for that particular word or phrase. AJAX is also used in Google maps.

It can interact with servers and files without needing to refresh the browser.

It works well with XML and JSON. Ajax was initially made to work with

XML, but as JSON became popular due to its easy, fast and lightweight property, it is used with it also.

How AJAX Works?

fig 1

Here, when an event occurs in a browser, an XMLHttpRequest object is created and sent to the server through internet.

The server, on receiving the request, processes it, creates a response and sends it back to the browser.

The browser then receives the response, processes the data using javascript and updates the page content.

In this only the part of the page data to be modified is sent to the server, not the whole page, hence the changes are reflected without page refresh.

AJAX Internet Standards

AJAX is based on current internet standards. It uses a combination of the following technologies:

XMLHttpRequest object: Lets us interact with server data asynchronously (without page refresh).

Javascript/DOM: Lets us interact with the information.

CSS: Lets us to style the returned data.

XML/JSON: XML or JSON is often used as the format for transferring data. We can use plain text as well.

Let us learn more about XMLHttpRequest object.

XMLHttpRequest Object:

The XMLHttpRequest is a javascript object used to send and receive information to and from the browser asynchronously.

The XMLHttpRequest object is instantiated differently in older versions of IE.

The instantiation of XMLHttpRequest object for different browsers is shown below:

if(window.XMLHttpRequest) //code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); else //code for IE6, IE5 xmlhttp=new ActiveXObject(“Microsoft XMLHTTP”);

In the above code, the XMLHttpRequest object for all the higher versions of IE greater than version 6 and for all other browsers is defined as xmlhttp=new XMLHttpRequest();

In the same way for the lower versions of IE equal to 6 and less than that, the XMLHttpRequest object is defined as xmlhttp=new ActiveXObject(“Microsoft XMLHTTP”);

We have to include this code in AJAXScript.

Onreadystatechange Event

onreadystatechange is an event which occurs whenever the server readyState changes and holds the status of the XMLHttpRequest object.

The important properties of the XMLHttpRequest object are readyState and status.

The readyState property has five stages in its process numbered 0 to 4 as shown below:

0 : request not initialized

1 : server connection established

2 : request received

3 : processing request

4 : request finished and response is ready.

As the stages from 0 to 3 are in process, a rotating image appears indicating that work is in progress.

Status property have two values:

200 : “OK”

404 : Page not found

We should make sure that we check for value 4 in readyState and value 200 in Status property, so that our request is processed successfully.

Checking the Status and readyState

Syntax for checking the status and readyState is given below:

xmlhttp.onreadystatechange=function() if(xmlhttp.readyState==4 && xmlhttp.status==200) //do something

In the above code, the request in xmlhttp is checked during the onreadystatechange event in the function. The readystate and status of the request is matched to 4 and 200 respectively in the statement if(xmlhttp.readyState==4 && xmlhttp.status==200).

If the condition returns true then the statements in if block will be executed.

Whole Syntax:

The whole code of a page with the XMLHttpRequest object is shown below:

<!DOCTYPE html> <html> <head> <script> function loadXMLDoc() var xmlhttp; if(window.XMLHttpRequest) //code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); else //code for IE6, IE5 xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); xmlhttp.onreadychange=function() if(xmlhttp.readyState==4 && xmlhttp.status==200) Document.getElementById(“myDiv”).innerHTML= xmlhttp.responseText; xmlhttp.open(“GET”,”ajax_info.txt”,true); xmlhttp.send(); </script> </head> <body> <div id=”myDiv”><h2>Let AJAX change this text</h2></div> <button type=”button” onclick=”loadXMLDoc()”>Change Content</button> </body> </html>

Here we have a code for a webpage requesting to change the content in the div block.

In the body section of the above code, a text Let AJAX change this text is defined in the h2 heading tag in the div block having id myDiv.

Next a button with caption Change Contentis added which calls the function loadXMLDoc()when clicked.

In the loadXMLDoc() function we have declared a variable xmlhttp.

Then we have created the XMLHttpRequest object according to the supporting versions of the browsers.

When the request is processed, the readyState and the status properties are checked to make sure that the request is processed successfully.

And if the readyState and status properties satisfy the condition, the content of the div block having id myDiv is changed using innerHTML statement.

The response is send through xmlhttp.open(“GET”,”ajax_info.txt”,true); statement. The response is send through GET method and the text to be changed is written in the ajax_info.txt file.

Then the response is send through the statement xmlhttp.send().

Thus we studied the basics of AJAX Fundamentals and will try it in next session.

#Ajax #AJAX Basics #AJAX Fundamentals #Ajax tutorial #Web Programming Tutorials

New Post has been published on www.eduonix.com - Looping through JSON

Looping through JSON

We have gone through the theory of JSON in the previous session. Today we will learn how to create JSON objects and arrays practically and how to traverse through the arrays using loops. Let’s start the task step by step.

Create a new folder on desktop and name it as “Sec4_Ch21”.

Open a new notepad++ document and save it as “index.html” in the newly created folder “Sec4_Ch21”.

Write the following code in “index.html” file.

<!DOCTYPE html> <html> <head> <title>My Movies</title> </head> <body> </body> </html>

When we open the file “index.html” with any browser say chrome, it will look like this:

fig 1

In this tutorial of Looping through JSON, we are going to use the same information of movies used in XML file in last session but in JSON format. To store information JSON objects are used, so create a JSON object in the head section of the document in the -- tags as follows:

<head> <title>My Movies</title> <script> var movie= title:"The Godfather", year:"1972", genre:"Drama", director:"Francis Ford Capolla" </script> </head>

In the above code, movie is the object name that contains the information about a movie. Information of an object is always written in the curly braces and it is in the form of name/value pair separated by comma (,).

Now to grab this information and display it on the screen, write the following code in the body section of the document inside

tags.

Here, title of the movie is displayed with the statement

document.write(movie.title+’<br><br>’);

where, movie is the object name and title is its property. And genre of the movie is displayed with the statement

document.write(movie.genre);

where, movie is the object name and genre is its property.

br tag is used for a line brake.

Hence any information in the object is displayed with object name with its property along with a period (.) in between.

The statement

document.write();

is used to display any text.

Output of the above code is shown below:

fig 2

The Godfather is the title of the movie and Drama is its genre. This is how we access a JSON object.

If we want some more objects i.e. if we want to store the information of some more movies we can create that many objects but it is not a good practice. To store information in more than two or three objects we can directly declare an array.

Let us create an array to store the information of five movies.

Write the following code in the head section of the document in

tags:

Here, we have stored information of 5 movies in the array named movies.

Each array value in the above case is a movie object separated by comma.

The objects in the array are contained in the opening and closing square brackets [].

Now let us print some of the array values. Write the following code in body section inside the

tags.

Here, we have printed the values using document.write(); statement.

Looking at the statements we can understand that we are trying to print the genre of first movie and the title of the third movie.

Since we are dealing with arrays, we know that data is stored in array from index 0 (zero).

So while printing the value, the array name with the index of the object in square brackets followed by a particular property with a period in between is given.

The output of the code above is shown below:

fig 3

In the above output, the genre of first movie and the title of the third movie are displayed.

We have displayed just two values in the above code, but if we want to display the whole array, we cannot just sit and write code for each and every value. We can use any looping structure for this.

Let us write the following code to display the whole array using for loop in the body section:

<div id="container"> <h1>My Favourite Movies</h1> <ul> <script> for(i=0;i<movies.length;i++) document.write('<h4>'+movies[i].title +'</h4>'); document.write('<li>'+movies[i].year +'</li>'); document.write('<li>'+movies[i].genre +'</li>'); document.write('<li>'+movies[i].director +'</li>'); </script> </ul> </div>

In the above code, the code to display array values is written in a div block given an id container.

A heading My favourite Movies is given in h1 tag.

The movies details are displayed in an un-ordered list.

tag is defined inside

tags because everything before it, was html and now we want to write the scripting code.

So we have used for loop to display the array elements.

Condition given in for loop is

i<movies.length

. Here we know “movies” is an array and array is an object. Objects have properties and hence length is the property of an array which gives the number of elements present in the array. In the above example of movies, length property will return value 5, since we have 5 movie objects in the array movies and for loop will therefore iterate 5 times.

We are going to display the movie details in an un-ordered list with all the movie titles as the heading and the other details of the movie under it as the list items.

Title of every movie is displayed with the h4 heading tag in the statement

document.write('<h4>'+movies[i].title +'</h4>');

Here, h4 tag is the html part hence written in the string format and concatenated with the code to display movie title i.e. movies[i].title. The variable i will change accordingly from 0 to 5.

The output after displaying only movie titles is shown below:

fig 4

Now, when we write the further statements in the for loop i.e.

document.write('<li>'+movies[i].year +'</li>'); document.write('<li>'+movies[i].genre +'</li>'); document.write('<li>'+movies[i].director +'</li>');

It will display the year, genre and director under the title of each movie. Since these are the list items of un-ordered list, they are enclosed in the li tags.

The output after writing the whole code is seen like this:

fig 5

All the 5 movie details are shown in an un-ordered list in the above output. But this displayed information needs some styling to look presentable.

Let us provide some styling to the page.

We have defined a div block with id container in the above given code; this will be used for styling.

Write the following code in head section of the page below the page title and outside the script tag:

The page after styling will look like this:

fig 6

Let us understand, how styling is done?

We have used inline styling by writing the code for it in the

tags in the head section.

First the Heading “My Favourite Movies” heading is styled. Since this heading is written in

tags, h1 tag is styled. The code for it is shown below:

h1 text-align:center;

Here, Due to h1 tag the size of the heading is already large, so we have just placed the heading text at the center of the page by using the statement text-align:center;

Next, we have styled the h4 tag that contains the titles of the movies. The code is shown below:

h4 margin:0; padding:5px; background:#f4f4f4;

Here, each movie title is given no margin i.e. margin:0; padding of 5 pixels is given from all sides and a grey background color is given using the statement background:#f4f4f4;

Next the list items i.e. the movie details are styled using the following code:

li list-style:none; padding-left:5px;

The list items have bullets due un-ordered list, these bullets are removed using the statement list-style:none; padding of 5 pixels is given from the left side using statement padding-left:5px;

The div block having the id container is also styled with the following code:

#container width:600px; margin:auto; overflow:hidden;

Since container is an id of the div block, it is preceded with the # sign. The div block is given a width of 600 pixels. Margin is given auto; this auto indicates that all the content should be placed in the middle of the page. Any overflow or distortion is hidden using the statement overflow:hidden;

Thus we successfully finished working with Looping through JSON.

#HTML #Html Tutorial #Json #json tutorial #Looping through JSON #Objects and Arrays in JSON #Web Development #web programming #HTML 5 Tutorials #Web Programming Tutorials

New Post has been published on www.eduonix.com - XML with DTD Schema

XML with DTD Schema

In this tutorial we are going to create an XML file and a schema as well. So let’s start with our XML with DTD Schema.

Steps are as follows:

Create a new folder on the desktop named “Sec4_Ch20”.

Now open a new notepad++ file and save it as “movies.xml” in the newly created “Sec4_Ch20” folder.

Write the following code in the file “movies.xml”.

<?xml version="1.0"?> <movies> <movie> <title>The Godfather</title> <year>1972</year> <genre>Drama</genre> <director>Francis Ford Coppola</director> </movie> <movie> <title>Superbad</title> <year>2007</year> <genre>Comedy</genre> <director>Greg Mottola</director> </movie> <movie> <title>The Departed</title> <year>2006</year> <genre>Drama</genre> <director>Martin Scorsese</director> </movie> <movie> <title>Saving Private Ryan</title> <year>1998</year> <genre>Action</genre> <director>Steven Spielberg</director> </movie> <movie> <title>The Expendables</title> <year>2010</year> <genre>Action</genre> <director>Sylvester Stallone</director> </movie> </movies>

After writing the above code, save the file and open it with internet explorer browser. The whole code is displayed as it is. The movies.xml file opened in IE is shown below:

fig 1

The XML file can be styled using CSS also.

After creating the xml file we would like to validate it. For this we can use xml validators.

Open your browser and search for xml validator.

W3schools has xml validator. You will get a hyperlink “XML Validator – W3Schools”, click on it.

A page will appear which has a block of code below the heading “Syntax – Check Your XML”. A “Validate” button is placed below the code.

Copy the whole code from our “movies.xml” file.

Replace the code in the block of code of xml validator with the copied xml code.

Now click on “Validate” button.

As there is no error in the code, a popup box will appear with a message “No errors found”.

The output is shown below:

fig 2

Now, purposefully delete one of the tag and again click on “Validate” button. You will get an error along with the line number where error has occurred.

The output is shown below:

fig 3

Now it’s time to create a schema using DTD which is Document Type Definition. We will create a separate .dtd file external to the code in movies.xml file.

Create a new text document and name it as “movies.dtd” and open it with notepad++. We can write the DTD code inline to the xml code in the same file i.e. movies.xml also, below the declaration statement.

Type the format that we need in order to validate each element in movies.dtd file. Syntax for validating an element is as follows:

<!ELEMENT ElementName Type>

Here, ELEMENT is just a word. ElementName will be the name of the element to be validated.

Type can be of many different things:

One thing, if an element does not contain content, it should be specified as an empty element in the place of Type.

Next, if an element contains other elements and no content, then it should be specified in Type.

A mixed type is also there which is a combination of child elements and character data.

Last type can be anything, any content allowed by DTD.

Let us understand a code with xml and DTD schema. Just have a look on the code given below:

<?xml version="1.0"?> <!DOCTYPE note [ <!ELEMENT note (to,from,heading,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)> ]> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <message>Don't forget me this weekend!</message> </note>

In the above code, the statements in

tags are the xml statements,

being the root element.

The statements starting with

<!ELEMENT>

are DTD schema statements validating xml part of the file.

contains child elements in it like to, from, heading, etc.

To validate each xml element we use DTD schema. For root element note, the DTD schema

<!ELEMENT note (to,from,heading,body)>

is used. Here, note is the root element and this root element does not directly contain data, it contains child elements. So these child elements are specified as type in the paranthesis i.e. (to, from, heading, body).

Next the child elements directly contain data in it, so it has #PCDATA as the type. #PCDATA means parse data that can be read by the system.

All the child elements that contain directly the content without any other element has the type as #PCDATA.

Let’s write our own DTD document. Open our “movies.dtd” file, write the following code in it and save the file:

<!DOCTYPE movies[ <!ELEMENT movies (movie)> <!ELEMENT movie (title,year,genre,director)> <!ELEMENT title (#PCDATA)> <!ELEMENT year (#PCDATA)> <!ELEMENT genre (#PCDATA)> <!ELEMENT director (#PCDATA)> ]>

We have our xml code in movies.xml file and DTD schema in movies.dtd file. This DTD schema will validate the xml code only if both the files are linked to each other. So to link the two files, we need to declare the file movies.dtd in the file movies.xml below the xml declaration statement as shown below:

<!DOCTYPE movies SYSTEM “movies.dtd”

Thus we declared the external DTD file in the xml file.

Now again follow the steps from 6 to 11 and see if our movies.xml file is validated or not. Replace the DTD linking statement in movies.xml code with the DTD schema code in the xml validator block for validating purpose.Here we are validating our XML with DTD Schema

Thus we created our XML with DTD Schema.

#DTD Schema #XML #XML Tutorial #XML with DTD Schema #HTML 5 Tutorials #Web Programming Tutorials

New Post has been published on www.eduonix.com - Learn to implement image slider using bootstrap

Learn to implement image slider using bootstrap

Today in this tutorial, we will learn to implement image slider using bootstrap, similarly we will learn how to create content slider called as carousel using the same technique.

So to, learn to implement image slider using bootstrap follow the steps given below :

First of all visit the getbootstrap.com website .

Click on Download link .

Download the latest version of the bootstrap which will be in zip format .

Just Extract the downloaded zip bundle .

After extracting the folder you will have following contents in it :

In this downloaded folder lets create index.html and style.css file and an img folder to save the images.

Hence you will have following view of your window :

Let’s learn to implement image slider using bootstrap.

Now open the index.html file with any text editor like Notepad++ and write the following code in it :

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="../../assets/ico/favicon.ico"> <title>Carousel for Bootstrap</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body>   <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="img/slide1.jpg" class="img-responsive"> <div class="carousel-caption"> <h3>Anroid</h3> <p>hi welcome to Anroid</p> </div> </div> <div class="item"> <img src="img/slide2.jpg" class="img-responsive"> <div class="carousel-caption"> <h3>WEB DESING</h3> <p>hi welcome to web design</p> </div> </div> <div class="item"> <img src="img/slide3.jpg" class="img-responsive"> <div class="carousel-caption"> <h3>PHP</h3> <p>hi welcome to PHP</p> </div> </div> <div class="item"> <img src="img/slide4.jpg" class="img-responsive"> <div class="carousel-caption"> <h3>Asp</h3> <p>hi welcome to ASP</p> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span></a> </div>  <div class="container"> </div>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

Thus when you run your index.html file you will have the following output :

You can also use the content slider if you want to insert some text inside the slider.

For this just replace the code of the index.html file with the following one :

<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="../../assets/ico/favicon.ico"> <title>Carousel for Bootstrap</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body>  <div id="myCarousel" class="carousel slide jumbotron"> <div class="container"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="item active"> <h1>Web Design</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit consectetur adipiscing elit. Praesent commodo cursus magna,et.consectetur adipiscing elit. Maecenas sed diam.consectetur adipiscing elit.</p> <a href="#" class="btn btn-success btn-lg">Learn More..</a> </div> <div class="item"> <h1>Web Developments</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit consectetur adipiscing elit. Praesent commodo cursus magna,et.consectetur adipiscing elit. Maecenas sed diam.consectetur adipiscing elit.</p> <a href="#" class="btn btn-success btn-lg">Learn More..</a> </div> <div class="item"> <h1>Wordpress Devlopment</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit consectetur adipiscing elit. Praesent commodo cursus magna,et.consectetur adipiscing elit. Maecenas sed diam.consectetur adipiscing elit.</p> <a href="#" class="btn btn-success btn-lg">Learn More..</a> </div> <div class="item"> <h1>PHP Devlopment</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit consectetur adipiscing elit. Praesent commodo cursus magna,et.consectetur adipiscing elit. Maecenas sed diam.consectetur adipiscing elit.</p> <a href="#" class="btn btn-success btn-lg">Learn More..</a> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span></a> </div>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

Hence, when you run index.html file now, you will have the following output :

To add style to our slider just in your style.css file write the given code :

Hence, after adding style we will have the following output :

Hence, we have successfully learnt to implement image slider using bootstrap.

New Post has been published on www.eduonix.com - XML Fundamentals

XML Fundamentals

Today we will be learning XML Fundamentals. XML and JSON are different but are used for same thing, that is to store data, structure data. They are called Data Interchange Formats. So let’s have an introduction to XML.

What is XML?

XML stands for Extensible Markup Language.

XML is a markup language like HTML and not a programming language.

It uses tags, just like HTML.

XML is not a replacement for HTML.

XML was created to transport or store data.

XML is very easy to learn compared to learn any programming language.

Some XML History

XML is an application profile of an ISO standard SGML, and most of XML comes from SGML unchanged.

XML version 1.0 was defined in 1998. It had many minor revisions since then XML 1.0 is the recommended version.

XML version 1.1 was published in February of 2004, the same day as version 1.0’s third edition. 1.0 is generally suggested over 1.1 unless the project needs specific features of 1.1.

There have been discussions of an XML 2.0, although no organization has announced plans for work on such a project.

XML vs. HTML

There is no comparison between HTML and XML. They are completely different and are used in different situations.

XML is a Data Interchange Format; it’s a way to structure and store data and also to transport data.

XML was created to transport and store data and is more behind the scenes.XML has no pre-defined tags.

HTML is used to display data in a browser and focus on physical presentation. HTML has pre-defined tags.

Now let’s see the basic document structure of XML file in this XML Fundamentals tutorial.

Document Structure

The basic XML file structure is shown below.

We can define our own “tags” in XML.

<?xml version = “1.0” encoding=”UTF-8”?> ----Declaration <users> --------------------------------Root Element <user> ----------------------------Child Element <firstname>Brad</firstname>---Sub <lastname>Traversy</lastname> <email>[email protected]</email>---Child <phone>555-555-5555</phone> ------ Elements </user> <user gender=”male”> <firstname>John</firstname> <lastname>Doe</lastname> <email>[email protected]</email> <phone>444-444-4444</phone> </user> </users>

In the XML file structure, the first line is the declaration that contains the document information like version information, character set, etc.

Declaration must come first in the document.

Every opening tag should have a closing tag.

Each XML document has a root element.

Root element contains the child elements which can in turn have sub-child elements.

All the sub-child elements in a child element are called the siblings of each other.

Attributes like gender=”male” can also be given to the tags.

Use of XML in many different places

Different computer systems and databases usually have different kinds of formats that are incompatible with each other.

This is where XML comes in. XML is stored in plain text format and can be read by almost any system.

XML makes it such that, you can have one system talk to another and share data even though there are completely different platforms.

It is very extensive and comparable with different kinds of system.

Today developers are replacing XML with JSON, but this is the one aspect where XML ought to use XML.

So XML is a software and hardware – independent format for storing data. This is where XML shines.

Some Advantages of XML

Simplifies Data Sharing – Can be used by many systems and offer compatibility.

Simplifies Transport of data – transport of data from one platform to another.

Simplifies Platform Changes – Easy to upgrade systems as the new platform will have no issue reading XML.

Makes data more available – Multiple applications can access the same XML data.

Can Create new internet languages – XHTML, WSDL, RSS, RDF… These use XML in some way.

Important XML Rules

All tags must have an opening and close tags (unlike HTML tags such as

<br/>

) .In XML closing of tag is compulsory. You can write br tag in HTML but in XML you need to write it as

Tags in XML are case sensitive – is not the same as .

Elements need to be nested properly. If you open the user tag i.e. the child element in the document structure shown above, and close any sub-child element after the closing of the user tag, it will be an error.

XML documents must have a root element. There can only be one instance of a root element.

Attributes must be quoted.

XML Schemas

All XML Schema describes the structure of an XML document.

The schema describes the allowed data, required data and how the data should be organized.

Types of schemas are:

DTD – Document Type Definition.

XML Schema – XSD, RELAX NG, W3C XML Schema language. These are the different versions of XML Schemas.

XML has a certain schema that an XML file has to match up against in order to be comparable.

This was a short introduction to XML Fundamentals.

#XML #XML Fundamentals #XML Tutorial #Web Programming Tutorials

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality

Anya is LIVE right now

FREE

Free to watch • No registration required • HD streaming

New Post has been published on www.eduonix.com - JSON Fundamentals

JSON Fundamentals

In the last session we had an introduction to XML Fundamentals. Like XML, JSON is also used to store a structured data. So today we will have an introduction to JSON Fundamentals.

What is JSON?

JSON stands for Javascript Object Notation.

It is a lightweight data interchange format.

It is easy for humans to read and write.

It is a text based open standard, designed for human readable data. It is readable only if it is formatted properly.

It uses name/value pairs to store data.

It has same value types as javascript.

It works like XML and is an alternative to XML.

It is not possible to decide which one is better, XML or JSON; because there are certain areas where XML is a better choice and certain other areas where JSON is a better choice.

Let’s understand the syntax of JSON in this JSON Fundamentals tutorial.

JSON Syntax

In JSON all data is formatted in name/value pairs.

Example of a name/value pair is as shown below:

“firstname” : “Brad”

In the above example : firstname is the name, then we have a colon and then the value Brad. The name and value must be enclosed in the double quotes.

If you have more data i.e. more than one name/value pairs, they are separated using comma. Eg: “firstname” : “Brad” , “lastname” : “Dixon”.

JSON objects are contained in curly braces ().

JSON arrays are contained in brackets ([]).

JSON files have a .json extension.

The MIME type is “application/json”.

JSON Object

Here, we have shown an example of JSON Object for a user with 3 properties:

“firstName” : “Brad” , “lastName” : “Traversy” , “email” : “[email protected]”

We know that JSON objects are contained in curly braces, so we have the object in curly braces in the above example.

The object has 3 name/value pairs which are its properties separated by comma.

JSON Array

An example of array is shown below:

“pets” : [ “name” : “jack” , “animal” : “dog”, “name” : “john” , “animal” : “cat”, “name” : “joe” , “animal” : “fish” ]

We have shown an array named “pets”, which holds 3 JSON objects.

Each object is a record of a pet with a name and the type of animal it is.

XML vs. JSON

JSON:

JSON is more lightweight than XML.

It is more simple.

Since JSON is lightweight, it is more faster than XML.

It is a little easier to read.

JSON is native to javascript.

XML:

XML is more extensible.

It is more flixible.

It is more complicated compared to JSON.

It offers more compatibility between systems.

JSON is generally preffered over XML on most of the occasions.

This was all about JSON Fundamentals.

#Json #JSON Fundamentals #json tutorial #Uncategorized

New Post has been published on www.eduonix.com - Learn how to implement pagination in php

Learn how to implement pagination in php

In this tutorial today we will learn how to implement pagination in php.Pagination in PHP helps to access multiple pages instead of accessing them one by one seperately.

To learn how to implement pagination in php follow the steps given below :

First of all download and install xampp server in your machine .

Now go to your xampp folder i.e the folder you have installed your xampp .

Open the xampp control pannel from this xampp folder and you will get the following window :

Now start the Apache and MySQL modules as shown in the above image .

Let’s create a database which we will be accessing in this session.

Open up your browser and enter the following url : localhost/phpmyadmin and you will get the following window :

Now enter username and password and click on the GO button , you will be navigated to the following window , where you have to click on the Database tab and then enter your database name and finally click on the create button and your database is generated in the database list at the left hand side as shown in the image :

Now select the database from the list then you will get the following window where you have to select the SQL tab as shown in the image :

After selecting the SQL tab you will get the query box where you have to write the following query to create a table :

CREATE TABLE IF NOT EXISTS `fruits` ( `id` int(5) NOT NULL AUTO_INCREMENT, `name` varchar(21) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;

Here is the screen shot for the code :

After writing the query click on the GO button .

Now again click on the SQL tab where a query box will appear and insert the following values into the table :

INSERT INTO `fruits` (`id`, `name`) VALUES (1, 'Mango'), (2, 'Jackfruit'), (3, 'Guava'), (4, 'Apple'), (5, 'Strawberry'), (6, 'Banana'), (7, 'Custard Apple'), (8, 'Musk Melon'), (9, 'Water Melon'), (10, 'Pineapple');

Here is the screen shot for the code :

After that click on the GO button to execute the query.

Now we have the database as follows:

Now create a Folder inside the xampp\htdocs and name the folder for example as testing .

Inside the testing folder create a file called as fruit.php:

Now write the following code as per instruction inside the fruit.php file .

<?php //Local host connection mysql_connect("localhost","root","1234") or die (mysql_error()); mysql_select_db("ijdb") or die (mysql_error()); //select the table $sql = mysql_query("SELECT name from fruits"); // Logic // // Get total of Num rows from the database query $nr = mysql_num_rows($sql); // Get pn from URL vars if it is present if (isset($_GET['pn'])) // filter everything but numbers for security(new) $pn = preg_replace('#[^0-9]#i', '', $_GET['pn']); // filter everything but numbers for security(deprecated) $pn = ereg_replace("[^0-9]", "", $_GET['pn']); else // If the pn URL variable is not present force it to be value of page number 1 $pn = 1; //This is where we set how many database items to show on each page $itemsPerPage = 1; // Get the value of the last page in the pagination result set $lastPage = ceil($nr / $itemsPerPage); // Be sure URL variable $pn(page number) is no lower than page 1 and no higher than $lastpage if ($pn < 1) // If it is less than 1 $pn = 1; // force if to be 1 // if it is greater than $lastpage else if ($pn > $lastPage) // force it to be $lastpage's value $pn = $lastPage; // This creates the numbers to click in between the next and back buttons $centerPages = ""; $sub1 = $pn - 1; $sub2 = $pn - 2; $add1 = $pn + 1; $add2 = $pn + 2; if ($pn == 1) $centerPages .= '  <span class="pagNumActive">' . $pn . '</span>  '; $centerPages .= '  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add1.'">' . $add1 . '</a>  '; else if ($pn == $lastPage) $centerPages .= '  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub1 . '">' . $sub1 . '</a>  '; $centerPages .= '  <span class="pagNumActive">' . $pn . '</span>  '; else if ($pn > 2 && $pn < ($lastPage - 1)) $centerPages .= '  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub2 . '">' . $sub2 . '</a>  '; $centerPages .= '  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub1 . '">' . $sub1 . '</a>  '; $centerPages .= '  <span class="pagNumActive">' . $pn . '</span>  '; $centerPages .= '  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add1 . '">' . $add1 . '</a>  '; $centerPages .= '  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add2 . '">' . $add2 . '</a>  '; else if ($pn > 1 && $pn < $lastPage) $centerPages .= '  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub1 . '">' . $sub1 . '</a>  '; $centerPages .= '  <span class="pagNumActive">' . $pn . '</span>  '; $centerPages .= '  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add1 . '">' . $add1 . '</a>  '; // This line sets the "LIMIT" range. the 2 values we place to choose a range of rows from database in our query $limit = 'LIMIT ' .($pn - 1) * $itemsPerPage .',' .$itemsPerPage; // Now we are going to run the same query as above but this time add $limit onto the end of the SQL syntax // $sql2 is what we will use to fuel our while loop statement below $sql2 = mysql_query("SELECT name FROM fruits $limit"); // Logic Ends // // Pagination Display Setup Begins // Initialize the pagination output variable $paginationDisplay = ""; // This code runs only if the last page variable is not equal to 1,else we dont need pagination if ($lastPage != "1") // This shows the user what page they are on, and the total number of pages $paginationDisplay .= 'Page <strong>' . $pn . '</strong> of ' . $lastPage. '      '; // If we are not on page 1 we can place the Back button if ($pn != 1) $previous = $pn - 1; $paginationDisplay .= '  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $previous . '"> Back</a> '; // Lay in the clickable numbers display here between the Back and Next links $paginationDisplay .= '<span class="paginationNumbers">' . $centerPages . '</span>'; // If we are not on the very last page we can place the Next button if ($pn != $lastPage) $nextPage = $pn + 1; $paginationDisplay .= '  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $nextPage . '"> Next</a> '; //// END Pagination Display Setup // Build the Output Section Here $outputList = ''; while($row = mysql_fetch_array($sql2)) $name = $row["name"]; $outputList .= '<h1>' . $name . '</h1><br />'; // close while loop ?> Now we have to give heading and the styling to our page as follows <html> <head> <title>Pagination</title> <style type="text/css">  </style> </head> <body> <div style="margin-left:64px; margin-right:64px;"> <h2>Total Items: <?php echo $nr; ?></h2> </div> <div style="margin-left:58px; margin-right:58px; padding:6px; background-color:#FFF; border:#999 1px solid;"> <?php echo $paginationDisplay; ?></div> <div style="margin-left:64px; margin-right:64px;"><?php print "$outputList"; ?></div> <div style="margin-left:58px; margin-right:58px; padding:6px; background-color:#FFF; border:#999 1px solid;"> <?php echo $paginationDisplay; ?></div> </body> </html>

Here are the screen shots for the code :

Now open up the browser and enter the following url : localhost/testing/fruits.php and you will have the following output :

Thus we have successfully learnt how to implement pagination in php .

#database in mysql #implementation of php #Learn how to implement pagination in php #pagination in php #php implementation #PHP Programs #PHP Tutorial #web programming #xampp #Web Programming Tutorials

Trending Blogs

Last Seen Blogs

Learn Premium Technologies