Understanding PHP-Html/Css-Ajax-Javascript and Jquery all in one with examples

Posted by Linjo Joson on April 16, 2013

Php, Ajax,Jquery,Javascript,Html and Css all these languages are very much related. You need to know all these (or atleast the the basics of all these languages to build a website or web application. Many of you might know these stuffs, but atleast some of you might be confused about the clubbing of all these techniques. This tutorial will help you to understand the basics all these languages and the relation between them in a minimum amount of code.

Step1 : Understanding the html part

First name: Capitalize Javascript
Last name:
Interest :
2nd Interest :
My message Port dummy message

Above  code shows a simple HTML form which contains two divisions in it.

  • div with id = names

Every element got a tag name, attribute and value, consider the a tag Here the tag is “a” and the attribute is href and attribute value is ‘#’.

  • div with id= other details

 

Lets have a close look about whats there inside these divisions.
div names In this div there are two input text boxes into which we can input values. You can check the type attribute for the input boxes has been given as “text”, which makes them text input boxes.  In line no   17(in the second div), the input type is  “submit”, which means its supposed to be a submit button (This submit button helps us to submit the form) .You might also have checked the “a” tag in line number 3,

  Capitalize Javascript

“a” tag generates a hyperlink, this specific “a” tag is very much related to javascript so I will explain this in that section.

div otherdetails

In the second div, there are two select boxes, one text input box and a submit button.The first select box  allows us to select an interest, vehicles or fruits

The second select box is part of our ajax , so I will explain it later , in the ajax section

Step2 :Understanding CSS -Style Sheets

Anything given in the style tags refers makes up the styles for the html, the purpose of using css is to style what we build using html. For instance, adding a color to paragraph.


This style sheet brings up the entire style for the html shown above.  Style sheets are very simple to understand, there are selectors and  properties in stylesheets. We select a particular element from the html and applies the css properties into it, for instance

#names input {
border: 2px solid grey;
margin-left: 24px;
margin-top: 12px;
}

“#” (hash) are for selecting id and “.” (dot) are for selecting a class
css selector
Here we are selecting the element with id “names”. If we give a close look to the html code, we can see that it is selecting the first division with id “names”. #names input, means that we are selecting all the “input” html elements inside the names division.
We can select html elements using the attributes given also.

#otherdetails input[type=submit]

Selects the input elements from the div otherdetails which has attribute type=submit. So, for sure, its selecting the submit button.
Css Properties
Now we are applying the properties to the selected html elements , going above.
The style gives a 2 px grey border to the input boxes and a left margin and right top margin to each and every input elements in the division names.

For the submit button, background-color: #E3E138; property gives the color to the submit button.
Generalizing, Css selectors and properties should have a general format

selector{
property name: property value;
}

Have a look at the different types of css properties

Step 3: Understanding the Php Side

Coming to the php side


First Name :
Last Name :
Message :
Second Interest :

At once we submit the form using the submit button, the form gets submitted or request goes to the server page along with the values we entered inside the input elements . From the code, its clear that the php is printing the values we entered inside the input fields

Step 4: Understanding the Javascript :

Javascripts are very much useful in client side interactions, if we need to do something with php, as it being the server side, request needs to be send to the server where in turn javascript being a client side or browser side language, no request needs to be send to the server or the page doesnt gets reloaded , You saved some of your internet bandwidth right? 🙂
Here is where javascripts can do magic. Imagine that you are building a calculator to sum two values, if you are using php you need to pass both values to server and should get the response from the server (calculated sum ). While in case of javascript, as the sum function is as simple as adding both two values passed, we just need to pass the values to the function to display the result without browser reload or delay.

Here the javascript we are using is two display the value entered in the first name input field to uppercase.

Capitalize Javascript

This “a” tag got an onclick attribute which has a values upper(), which means that it calls the javascript function named upper

Javascripts should be written inside

tags and here in the upper function which we have written,

 var firstname=document.getElementById("fname").value;

Here “document” represents the whole page, getElementById as it means,it gets an element with respect to its id. So as we said about the css selectors, it select the element with id=”fname” which is clearly the first name input field. value is a javascript property which gets the value inserted in that field.

function upper () {
var firstname=document.getElementById("fname").value;
var capitalname= firstname.toUpperCase();
alert(capitalname);
}

So in short variable firstname in the javascript should hold the firstname value which we have entered .
In the second line, we are converting the firstname value to uppercase, using the js function toUpperCase() . After that we are passing that final upper case translated values to the alert function, which displays the transformed name as a popup.

Step 5: Understanding the Jquery Part

Now lets have a close look at how jquery is implemented in this code.

$(document).ready(function(){
$('#dummymessage').click(function(){
$('#otherdetails input[name=message]').val('Hi , How are you?');
});
$("#interest").change(function(){
var datapassed={};
datapassed['interest']=$('#interest').val();
$.post('ajax.php', datapassed,function(response) {
$('#bestinterest').html(response);
});
});
});

This much part deals with the jquery in the entire code.
This can splitted into two sections

1. To port the dummy Message

Use of document.ready

$(document). ready is general for all jqueries, its not necessary if our jquery selectors( same
as css selectors) is selecting an element after its loaded .

Her we are selecting an id equal to “dummymessage” , that is its selecting the a tag next to the
message field,

So with out using the document.ready, we should write the jquery code below that “a”
tag, or else the jquery wont work. Here comes the use of document.ready, this makes sure that,
the jquery functions will be called after loading all the document elements.

Coming back to the jquery, click is a jquery function very much similar to javascript onclick. What happens is that when we click on the “a” tag with the id dummy message, this jquery code gets
executed.

$('#dummymessage').click(function(){
$('#otherdetails input[name=message]').val('Hi , How are you?');
});

Thats what happens inside the function. The above given jquery code is very much similar to the
css generalized syntax except the dollar sign and all.
Generalizing, what we have done above is

$(selector).property(value);

We are selecting the otherdetails div, and the text input field for message in that div.
val() is a jquery propery which deals about the value attribute of an element.

So whats happening in short is, when we click the ‘a tag’, the value, “Hi, How are you “, is inserted
into the message text box.

Step 6: Understanding the Ajax part

2. Ajax request for the dependent drop down

$("#interest").change(function(){
var datapassed={};
datapassed['interest']=$('#interest').val();
$.post('ajax.php', datapassed,function(response) {
$('#bestinterest').html(response);
});
});

You may have seen the dependent drop down in many website to display the state name at once we
select the country name, same is what implemented here.

$("#interest").change

Change is another jquery function which triggers the change of an element. So this jquery function.
gets called once we change the interest dropdown .
datapassed[‘interest’] is a javascript array, into which we ports the value from the interst dropdown.
Lets assume that “vehicles” is the value passed to the array,

Whats written next is the $.post,
this sends a request to the file ajax.php, passes the datapassed array which we made.

Now in ajax.php

  
	 ";
}
else {
?>