Self ssl certification of the site

Continuation to previous post about enabling SSL, which is needed to use Google SMTP and other things. This post will help you in getting your site SSL certificate, so that Facebook API can be used, which now requires HTTPS protocol. Below are the steps to give your localhost a local SSL certificate.

1. Open the DOS command window and change directory to bin directory of wamp apache directory by using the DOS command without quotes: “cd /d c:\” and then “cd wamp\bin\apache\apache2.2.8\bin”. apache2.2.8 should be changed to what apache folder your wamp server has. After done, the DOS prompt should look like:
   C:\wamp\bin\apache\apache2.2.8\bin>
   
2. Create a server key with 1024 bits encryption. You should enter this command without quotes:
   
   “openssl genrsa -des3 -out server.key 1024″.
   It’ll ask you a pass phrase, just enter it.
   
   
3. Remove the pass phrase from the RSA private key (while keeping a backup copy of the original file). Enter this command without quotes:
   
   “copy server.key server.key.org”
   and then
   
   “openssl rsa -in server.key.org -out server.key”. 
   It’ll ask you the pass phrase, just type it.
   
   
   You’ll fill in the information after entering this command. The correct location of config file, openssl.cnf may need to be changed. In windows, you won’t see “.cnf” extension of the file openssl, but in DOS you’ll see the full name openssl.cnf.
   
   
4. Create a self-signed Certificate (X509 structure) with the RSA key you just created. Enter the command without quotes:
   
   “openssl req -new -x509 -nodes -sha1 -days 365 -key server.key -out server.crt -config C:\wamp\bin\apache\apache2.2.8\conf\openssl.cnf”.
   
   
5. In the conf folder of apache2.2.8 folder, create two folders named as ssl.key and ssl.crt. Copy the server.key file to ssl.key folder and server.crt file to ssl.crt.
   
   
6. In httpd.conf file, remove the comment ‘#’ at the line which says:
   
   LoadModule ssl_module modules/mod_ssl.so
   
   
7. In httpd.conf, remove the comment ‘#’ at the line which says:
   Include conf/extra/httpd_ssl.confThen move that line after this block
   
   <IfModule ssl_module>…. </IfModule>
   
   
8. Open the php.ini file located in apache2.2….\bin folder, remove the comment ‘;’ at the line which says: extension=php_openssl.dll
   
   
9. Edit the httpd_ssl.conf file in the folder name, extra.
   
1. Find the line which says “SSLMutex ….” and change it to “SSLMutex default” without quotes.
   
2. Find the line which says: <VirtualHost _default_:443>. Right after it, change the line which says “DocumentRoot …” to DocumentRoot “C:/wamp/www/” with quotes. Change the line “ErrorLog….” to Errorlog logs/sslerror_log. Change the line “TransferLog ….” to TransferLog logs/sslaccess_log.
   
3. SSL crt file: Change the line “SSLCertificateFile ….” to SSLCertificateFile “conf/ssl.crt/server.crt”.
   
4. SSL key file: Change the line “SSLCertificateKeyFile ….” to SSLCertificateKeyFile “conf/ssl.key/server.key”.
   
5. Change the line which says <Directory “C:/Program Files/Apache Software Foundation/Apache2.2/cgi-bin”> or something similar to <Directory “C:/wamp/www/”> and add the following lines inside those <Directory … >…</Directory> tags:
   Options Indexes FollowSymLinks MultiViewsAllowOverride AllOrder allow,denyallow from all
   
6. Make sure the line CustomLog
   “logs/ssl_request_log” is uncommented (remove the #). This step is suggested.
   
   
10. In the previous DOS Command windows, enter httpd -t . If it displays Sysntax is OK, then go to Step 11. If not, then correct the wrong syntax and redo step 9.
    
    
11. Restart the Apache server. This is most important step.
    
    
12. If restart is successful, then open the browser and enter “https://localhost” without quotes.

Note: 

          Follow the above steps carefully and you'll be done.

          This will work for Linux too. Just use the path to www folder.

          For original certification there are lot many organizations like Verisign.

          For firefox go to options and add that certificate to your browser.

Configuring SSL on Apache

Our local server run on HTTP protocol. Then how will you work with facebook APIs where you need secured protocol now to work with APIs. Well its very easy to configure WAMP for ssl. Follow the steps below and you are done with it.

1.  Left click on wamp icon in taskbar in windows and go to apache->apache modules and select ssl_module.
2. Left click on wamp icon again. php->php extensions. Select php_openssl.
3. Most important restart your wamp and you are done.

For those who want to configure by editing file do the following.

1. Open httpd.conf in apache->conf folder.
2. Uncomment the line saying or write 'LoadModule ssl_module modules/mod_ssl.so' minus the quotes(').
3. Uncomment the line php.ini file in apache folder 'extension=php_openssl.dll' minus quotes(').
4. Save  the doument and restart apache.

Configuring php for ssl is done by editing php.ini.

1. Open the php.ini in PHP folder.
2. Uncomment the line 'extension=extension=php_openssl.dll'.
3. Save it restart the server.

Zomato.com

Zomato.com is a new buzz on internet for foodies. They provide lists of restaurant through many filters like your location, by cuisine, by name(of course). Over it there are many more filters so you can choose the restaurant of your choice. They currently provide service in 10 major cities of India. You can download app for android, iphone, blackberry and nokia/symbian or you can visit at m.zomato.com on mobiles.

For website developers they have a search widget which can be embedded in site. Customize size of the widget according to the need of site and embed it using the script they provide.

From a point of view of web developer, content placement on the site is very good and the color combination of shades of dark red and shades of grey is also great. That is why the site looks cleaner.

Zomato has released their API publicly. Here we will talk about the API of zomato, not all but one of them. The API is very easy to use.

Requires:

Zomato API key, PHP, JSON

Using:

Let the key be 'api'. Now we would like to have names of cities where they provide service.

1. <?php 
2. 
   
3.  $cities = json_decode(get_file_contents("https://api.zomato.com/v1/cities.json?apikey=api"));
4.  echo $cities->city[0]->city->name;
5.  
6. ?>

Explanation:

       3. 'apikey' is must in the url because it has to be parsed to get the JSON. The 'api' is to be replaced with
           you api key given by zomato. Function json_decode() will turn that JSON in a stdClass object.

       4. Data can be fetched from the object like the syntax in this line. Its similar to calling object variables or
           methods as done in class objects.

Note: SSL has to be enabled on your server, because look at the url it has 'https' which is secured.
         Respect the privacy of the users and read zomato policies before taking the application
         online.

So, go to zomato build your own application about restaurants, their menus and much more. This is a great site to find place where you will like to eat what you want to eat.

All new HTML- HTML5

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.
Syntax: <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.

Syntax: <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.

Syntax: <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.

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

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

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

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

syntax: <footer>Some thing</footer>

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

syntax: <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.

syntax: <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.

syntax: <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.

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

Note: This is not all read about these tags, they have lot of things.

          You can see dive into HTML 5. Everything is explained beautifully.

Creating HTML elements dynamically

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:

1. <script type="text/javascript">
2.       var i = 0;
3.       function creatediv()    
5.      {
6.             i++;
7.             var newelement = document.createElement('div');
8.             newelement.setAttribute('id', i);
9.             newelement.innerHTML = 'This is newly created div.';
10.             var parentelement = document.getElementById('presentdiv')
11.             parentelement.appendChild(newelement);
12.             //var firstchild = parentelement.firstChild;
13.             //parentelement.insertBefore(newelement, firstchild);
14.              
15.      }
16. </script>
17. <html>
18. <body>
19.              <div id="presentdiv">This div is present here from the moment the page is opened.<input type="button" value="Click to create new div" onclick="javascript:creatediv();"></div>
20. </body>
21. </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: 

    Uncomment the line 11 and 12 if you want to insert 'newelement' before 'firstchild'.

    Also see lastChild and returning values of firstChild and lastChild.

Fetching from database using PHP

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:

table1

name(varchar)

$query = "SELECT name FROM table1";

$rows = mysql_query($query);

$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.

Creating a menu

Well there are two ways to create menu that I can think of. One is the Google's way, you click on it to get the menu items. Other is which we see on other sites when you hover on menu and it shows you the menu items.

But we will go the Google's way.

Required: Javascript, HTML

Using:

1. <html>
2. <script type="text/javascript">
3. var toggle = 1; 
4. function showmenuitems()
5. {
6.    if(toggle == 1)
7.    {
8.       document.getElementById('menuitems').style.visibility = 'visible';
9.       toggle = 0;
10.    }
11.    else
12.    {
13.       hidemenuitems();
14.       toggle = 1;
15.    }
16. }
17. function hidemenuitems()
18. {
19.       document.getElementById('menuitems').style.visibility = 'hidden';
20. }
21. </script>
22. <body>
23. <p id="menu" onclick="showmenuitems()">Menu</p>
24. <dl onblur="hidemenuitems()" id="menuitems" style="visibility:hidden; z-index:1">
25. <dt>Item1</dt>
26. <dt>Item2</dt>
27. </dl>
28. </body>
29. </html>

Explanation:

If you will read the code you will find that all is done is using the visibility property of the dl. Here toggle variable helps us to determine the current state. A lot can be done with this code. For ex: if you click on the document except the paragraph menu items should hide, adding href to items etc etc.

Note: It is just basic way to implement the menu. Use your imagination to create something new.