Month: October 2011

All new HTML- HTML5

~ Neeraj Khandelwal ~ 2 Comments

HTML 5 has come up with some super cool tags, which makes things(coding) easier and reduces the use of third party applications(flash, Adobe is going to launch Adobe Edge in near future which generates code in jQuery, HTML 5, CSS). Here are some of the tags which are revolutionary.

iframe: It is not related to Steve Jobs or Apple at all! 😉 Well it is super awesome tag. It works like page in some page. Place it where ever you want. Try it, you gonna love it.

<iframe src="somefile.html">Not supported by browser</iframe>

audio: Before this we used to use third party tools for audio. This lets you embed audio without any problem in your webpage.

<audio controls="controls" ><source src="somefile.mp3" type="audio/mp3" />Not supported by webbrowser</audio>

video: Same as audio just the tag name is changed and source type.

<video controls="controls"><source src="somefile.mp4" type="audio/mp4" />Not supported by webbrowser</audio>

progress: Many times we brainstorm over progress bar. Here it is, very simple to use and looks pretty cool, basically dependent on OS you are using.

<progress value="40" max="100"></progress>

header: This creates header and it knows where it should be.

<header><p>Some thing some thing</p></header>

footer: This places footer in the webpage. But personally I don’t understand its behaviour.

<footer>Some thing</footer>

nav: Now you don’t need to write extra CSS for making navgation, like inline.

<nav><a href="1.html">One</a><a href="2.html">Two</a></nav>
Tip: Use nav with header and footer.

localStorage: HTML 5 also worked towards replacement of cookies. This stores data on client computer just as cookies but you can store large amount of data. Because whatever is needed can be fetched alone. It requires javascript to work.

<script type="text/javascript">localStorage.name = 'James Bond'</script>

sessionStorage: This is just like session but again created by javascript. It is also cool thing as you can understand.

<script type="text/javascript">sessionStorage.name = 'James Bond'</script>

canvas: This is the ultimate thing of all. You can draw on your web page now using this element. This works just as canvas in real but coding part. It has some easy calling involved for making lines, rectangle and other. This also uses javascript to create. Go on google HTML 5 games. You can create wonder using this. But first of all you need to read all about it.

<canvas id="mycanvas"></canvas>

Note:

  • This is not all read about these tags, they have lot of things.
  • You can see HERE. Everything is explained beautifully.

Creating HTML elements dynamically

~ Neeraj Khandelwal ~ Leave a comment

There are times when we want to create HTML elements on the page, result of a certain action. Below is explained how to do that using Javascript.

I have written a javascript which you can download. Please read “README” before using it.

Required: Javascript, HTML.

Using:

The javascript code for this is: 
<script type="text/javascript">
var i = 0;
function creatediv()
{
 i++;
 var newelement = document.createElement('div');
 newelement.setAttribute('id', i);
 newelement.innerHTML = 'This is newly created div.';
 var parentelement = document.getElementById('presentdiv')
 parentelement.appendChild(newelement);
 var firstchild = parentelement.firstChild;
 parentelement.insertBefore(newelement, firstchild);
}
</script>

HTML code for this is:

<html>
<body>
<div id="presentdiv"&gt;This div is present here from the moment the page is opened.&lt;input type="button" value="Click to create new div" onclick="javascript:creatediv();"></div>
</body>
</html>
Explanation:

First, we see the div ‘presentdiv’. It has two nodes, first is the text node and another is input ‘button’. New div is created on clicking button. How?

Look at the javascript function creatediv().

          6: A new div is created using createElement(). It takes the HTML tagname of element to be created as argument.

          7: setAttribtue() sets the attribute of the element using it. Like we have set ‘id’ as i, which is incrementing on every click.

          8: innerHTML is used if you want to add text to the element. Mostly used with div.

          9: We saved parentelement i.e., ‘presentdiv’ for further use instead of calling again and again.

          10: appendChild() is called to append  the element we just created, div(i). It appends at the end of the ‘parentelement’.

          11: This line is used if we want to add new element at the beginning of parent element. ‘firstChild’ returns the first child of the ‘parentelement’.

          12:  insertBefore() is used if new element is to be inserted before the some element we know. Here we insert ‘newelement’ before ‘firstchild’.

Note:

    Also see lastChild and returning values of firstChild and lastChild.

Fetching from database using PHP

~ Neeraj Khandelwal ~ 2 Comments

If you have database, then of course you will need to fetch data out of it. Four methods are described below to fetch from database and whats the difference between them.

Required: PHP, MySQL.
Using:

SQL table

table1(
name varchar(20)
)

PHP query:

$query = "SELECT name FROM table1";
$rows = mysql_query($query);

PHP fetch functions:

$row = mysql_fetch_array($rows, $result_type);
$row = mysql_fetch_assoc($rows);
$row = mysql_fetch_row($rows);
$row = mysql_fetch_object($rows, 'class', $params);
Note: All parameters are not defined here but are explained below.
Explanation:

Methods to fetch are described below:

  1. mysql_fetch_array($rows, $result_type): First argument, $rows is same as we have described earlier. Second argument is the result type which has three values MYSQL_ASSOC, MYSQL_NUM, MYSQL_BOTH, which is default and this argument is optional.
    • MYSQL_ASSOC is used when we want to use associative key or table name for fetching. So, if we want to echo result it would be like
      echo $row[‘name’];
    • MYSQL_NUM is used if we are going to use numbers as associative keys also called index. It would go like
      echo $row[0].
    • MYSQL_BOTH is used if you don’t know what you are going to use. With this way you can use both key and index.
  2. This is just the same as mysql_fetch_array() with result type argument as MYSQL_ASSOC. Syntax will be
    $row[‘name’];
  3. It is identical to mysql_fetch_array() with result type as MYSQL_NUM. Syntax will be
    echo $row[0];
  4. mysql_fetch_object($rows, ‘class’, $params): This is same as mysql_fetch_assoc() but instead of array this returns object of class ‘class’. That is it can be accessed by only with column name in table. Syntax would be:
    echo class->name;
    The last argument, $params, is used when parameters are needed to be passed in constructor of ‘class’, it has to be array. Also $params is optional.

Note: All the fetch function are almost equivalent in terms of performance.

         Also see PHP manual on these function.

Comparing timestamp in MySQL

~ Neeraj Khandelwal ~ Leave a comment

We often use timestamps in databases. In fact people often use it to make session keys. Comparing timestamp is also often required when detecting any change in database. You can read rest of the post on my personal website, here is the link.

My personal website is up and all new blog posts will only be available on https://neerajkhandelwal.com.

That’s too much often. 😛

Required: MySQL

Using:

Table defination

table1(
id (int)
jointime(timestamp))

SQL query

SELECT id FROM table1 WHERE jointime > '2011-10-08 00:00:00';

Explantion:

  1. This query selects id from table where jointime is greater than 2011-10-08.

Note:

  • Timestamp is a standard data type in MySQL and it should have both date and time.
  • For current time use NOW()
  • If you are using only date then use conversion from date to timestamp using TIMESTAMP()
  • With PHP
    • First get the time if current time use time(), it will give time in Unix Epoch.
    • Convert above time to timestamp using date() and then use in query.
    • If using some other time use mktime().
  • Remember the quotes they are important.

Also see MySQL timestamp datatype and PHP date time functions, also other functions.

Cool front page

~ Neeraj Khandelwal ~ Leave a comment

There is a site on internet  We Are Empire. This site has pretty cool front page. Page is pretty descriptive too plus it don’t irritate the user by reloading for new content. Some other site like this which I personally liked is Nike‘s nike better world site. It takes a little while to load but every information is on just one single page and designed in awesome way using HTML5, z-index and many more things. We will come to it some other time.

But we will talk about the former one here. After running a console over the site, I understood what they had done. Well its nothing but Javascript and applaud to the maker, it is used very well for designing. It do not have flash.

  1. What they had done is when you click on the front logo which is image it shows you next div which is hidden behind it and hide the top div.
  2. Now you see 4 bubbles. Thats interesting now margin of the image in background of the bubble changes when you hover it while hiding the overflow. This is a good thing, must have taken long time to do that.
  3. Open at the bottom is the coolest thing. Click on it and another page comes with no page loading. Again is the game of margin. Margin-top is changed using Javascript to animate.
  4. There are smaller effects also like close appearing and hiding, get in touch etc.

So, this is how this front page is working. Try making yours with such innovation.

Here is a example of that a very short one.

<script type="text/javascript">
function anim(mydiv)
{
   var i = 0;
   while(i < 10)
  {
     mydiv.style.marginTop = 10*i + 'px';
     i++;
  }
}
</script>
<div id="mydiv" onclick="javascript:anim(this)">
    test
</div>

There is no need to explain the code above. Its self explanatory and use basics of Javascript and HTML.

Jquery post method for JSON in php files

~ Neeraj Khandelwal ~ Leave a comment

jQuery is the awesomest thing I have came across so far. It makes things so easy one can easily understand why upon seeing example below. “post” method of jQuery is frequently used by many sites even Facebook and Google. You must have seen that log-in to Gmail doesn’t redirect/reload and tells you that username or password is incorrect instead they post the values using AJAX or lets say using post method of jQuery and display the error response.

Required: jquery.js(I use jquery-1.6.js. Download latest!)

Using:

file1.php


$(document).ready(function(){
$.post( 'filename', {data : data}, function(data , status){
if(status == 'success'){
alert(data.name); //your code }
}, "json" );
});

In file2.php


</div>
<div>if(isset($_POST['data'])){
echo json_encode(array('name'=>$_POST['data']));
}</div>
<div>

Explanation:

file1.php

  1. checks if the current document is ready.
  2. is the jquery method “post” is given arguments, first is the “filename” is the file name which you want to handle the post variables. Second is associative array sort of thing in which first “data” is name of the post variable and second “data” is the value of the variable. Third argument is the callback function, this executes when the post is complete. This function is provided two arguments, first is “data” which is the response from the file which is handling post. We will explain it after sometime. And the second is “status” it is optional in all of this without this code will still work. It actually holds the status of response.
  3. checks if status is success
  4. if status is success we use alert to check for the JSON value which is data.name and will alert “data” because we sent it back from file2.php.
  5. “json” is the last argument of the post method which tells the that this method is expecting JSON as response.

Note:

  • post variable name can be in quotes ‘data’.
  •  argument status can be omit.
  • “json” is required as argument if you want response to be JSON.

 

file2.php

  1. checks if $_POST[‘data’] is set. The data index is the same variable name we have sent from file1.php.
  2. first we create an associative array with key as “name” and value as $_POST[‘data’]. Then we encode it in JSON using json_encode and echo it, which is accepted by first file in callback function as data and checked using alert in file1.php as data.name which is the key in associative array.

Note:

  • This file should not have any of HTML code.
  • This file should not echo anything other than JSON.
  • You can use include() but above two points should always hold.
Hope this will help you in case you find trouble. Please also go through the jQuery website, they have pretty good tutorials.