RSS

Category Archives: HTML

HTML5 SQL Database Tutorial

HTML5 Data Storage

HTML5 Data Storage

HTML5 supports client side data storage. There are several types of storing data with HTML5

1. local storage through localStorage object

2. session storage through sessionStorage object

3. SQL based database

This tutorial demonstrates how to manage a client side SQL based database with HTML5.

Demo

<!DOCTYPE html>
<html>
    <head>
        <meta name=viewport content="user-scalable=no,width=device-width" />
        <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
        <script src="js/jquery-1.7.2.min.js"></script>
        <script src="js/jquery.mobile-1.1.0.min.js"></script>
    </head>
    <body>
        <div data-role=page id=home>
            <div data-role=header>
                <h1>Home</h1>
            </div>

            <div data-role="content">
                <a href="#" data-role="button" id="create"> Create table </a>
                <a href="#" data-role="button" id="remove"> Delete table </a>
                <span> Item </span>
                <input type="text" id="item">
                <span> Quantity </span>
                <input type="text" id="quantity">
                <a href="#" data-role="button" id="insert">Insert item</a>
                <a href="#" data-role="button" id="list">List items </a>

                <ul data-inset="true" data-role="listview" id="itemlist"></ul>
            </div>
        </div>

        <script>
            var db = openDatabase ("itemDB", "1.0", "itemDB", 65535);
            $("#create").bind ("click", function (e)
            {
                db.transaction (function (transaction)
                {
                    var sql = "CREATE TABLE items " +
                        " (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, " +
                        "item VARCHAR(100) NOT NULL, " +
                        "quantity int(2) NOT NULL)"
                    transaction.executeSql (sql, undefined, function ()
                    {
                        alert ("Table created");
                    },error
                );
                });
            });

            $("#remove").bind ("click", function (e)
            {
                if (!confirm ("Delete table?", "")) return;;
                db.transaction (function (transaction)
                {
                    var sql = "DROP TABLE items";
                    transaction.executeSql (sql, undefined, success, error);
                });
            });

            $("#insert").bind ("click", function (event)
            {
                var item = $("#item").val ();
                var quantity = $("#quantity").val ();
                db.transaction (function (transaction)
                {
                    var sql = "INSERT INTO items (item, quantity) VALUES (?, ?)";
                    transaction.executeSql (sql, [item, quantity], function ()
                    {
                        alert ("Item created!");
                    }, error);
                });
            });

            $("#list").bind ("click", function (event)
            {
                $("#itemlist").children().remove()
                db.transaction (function (transaction)
                {
                    var sql = "SELECT * FROM items";
                    transaction.executeSql (sql, undefined,
                    function (transaction, result)
                    {

                        if (result.rows.length)
                        {
                            for (var i = 0; i < result.rows.length; i++)
                            {
                                var row = result.rows.item (i);
                                var item = row.item;
                                var quantity = row.quantity;
                                $("#itemlist").append("<li>" + item + " - " + quantity + "</li>");
                            }
                        }
                        else
                        {
                            $("#itemlist").append("<li> No items </li>");
                        }
                    }, error);

                });

            });

            function success ()
            {
            }

            function error (transaction, err)
            {
                alert ("DB error : " + err.message);
                return false;
            }
        </script>
    </body>

</html>

Please note that Firefox does not support this type of web SQL databases. If you try this in a FF browser, it will throw “ReferenceError: openDatabase is not defined”.

 
2 Comments

Posted by on August 11, 2013 in HTML, HTML5, jQueryMobile

 

Tags:

Retrieve Video Details From Youtube

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<div>
<form id="youtubeDataQuery" action="#">
<div>
<b>Enter YouTube Video ID or URL in the text box below</b><br/>
<input id="youtubeVideoId" type="text" style="width: 70%;" value="" maxlength="200"/>
<input type="submit" style="width: 28%;" value="Fetch Video Information"/>
</div>
<br/>
<div id="youtubeDataOutput">Video information will appear here.</div>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function youtubeDataCallback(data) {
var s = '';
s += '<img src="' + data.entry.media$group.media$thumbnail[0].url + '" width="' + data.entry.media$group.media$thumbnail[0].width + '" height="' + data.entry.media$group.media$thumbnail[0].height + '" alt="' + data.entry.media$group.media$thumbnail[0].yt$name + '" align="right"/>';
s += '<b>Title:</b> ' + data.entry.title.$t + '<br/>';
s += '<b>Author:</b> ' + data.entry.author[0].name.$t + '<br/>';
s += '<b>Published:</b> ' + new Date(data.entry.published.$t).toLocaleDateString() + '<br/>';
s += '<b>Duration:</b> ' + Math.floor(data.entry.media$group.yt$duration.seconds / 60) + ':' + (data.entry.media$group.yt$duration.seconds % 60) + ' (' + data.entry.media$group.yt$duration.seconds + ' seconds)<br/>';
if (data.entry.gd$rating) {
s += '<b>Rating:</b> ' + data.entry.gd$rating.average.toFixed(1) + ' out of ' + data.entry.gd$rating.max + ' (' + data.entry.gd$rating.numRaters + ' ratings)<br/>';
}
s += '<b>Statistics:</b> ' + data.entry.yt$statistics.favoriteCount + ' favorite(s); ' + data.entry.yt$statistics.viewCount + ' view(s)<br/>';
s += '<br/>' + data.entry.media$group.media$description.$t.replace(/\n/g, '<br/>') + '<br/>';
s += '<br/><a href="' + data.entry.media$group.media$player.url + '" target="_blank">Watch on YouTube</a>';
$('#youtubeDataOutput').html(s);
}
$(document).ready(function() {
$('#youtubeDataQuery').submit(function(e) {
e.preventDefault();
var videoid = $('#youtubeVideoId').val();
var m;
if (m = videoid.match(/^http:\/\/www\.youtube\.com\/.*[?&]v=([^&]+)/i) || videoid.match(/^http:\/\/youtu\.be\/([^?]+)/i)) {
videoid = m[1];
}
if (!videoid.match(/^[a-z0-9_-]{11}$/i)) {
alert('Unable to parse Video ID/URL.');
return;
}
$.getScript('http://gdata.youtube.com/feeds/api/videos/' + encodeURIComponent(videoid) + '?v=2&alt=json-in-script&callback=youtubeDataCallback');
});
});
</script>
</div>
</body>
</html>
 
Leave a comment

Posted by on October 23, 2012 in HTML, JavaScript, jQuery

 

Tags:

Paypal Pay Now Button

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="YOUR_EMAIL">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="Gold Package">
<input type="hidden" name="item_number" value="1">
<input type="hidden" name="amount" value="400.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="UseSandbox" value="true">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_paynow_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form>
 
Leave a comment

Posted by on September 8, 2012 in HTML

 

Tags:

Bing Search For Your Web Site

<form method="get" action="http://www.bing.com/search" target="_blank">
<input type="text" name="q">Bing Search.
<input type="submit" value="Go!">
</form>
 
Leave a comment

Posted by on August 27, 2012 in HTML

 

Tags:

Google Search For Your Web Site

<form action="http://www.google.com/search" method="get"><input type="text" name="q" value="" size="31" maxlength="255" />
<input type="submit" value="Google Search" />
<input type="radio" name="sitesearch" value="" />
The Web
<input type="radio" name="sitesearch" value="codezone4.wordpress.com" checked="checked" /> This site
</form>
 
Leave a comment

Posted by on August 27, 2012 in HTML

 

Tags:

Access Skype Functionality in Web Site

The Skype protocol allows users to deal with Skype related activities. The only condition is to have installed Skype  in client side. Getting a call, sending a IM, sending a voicemail and having a conference call  are still possible when the Skype username is known.

The following examples use ‘echo123’ demo user provided by Skype. Replace it with your friend’s Skype username.

Call a Skype user

call Skype demo user

<a href="skype:echo123?call">call Skype demo user</a>

Send a Skype IM message

Chat with Skype demo user

<a href="skype:echo123?chat">Chat with Skype demo user</a>

Send a voicemail

Send voicemail to demo user

<a href="skype:echo123?voicemail">Send voicemail to demo user</a>

Create a Skype conference call

conference call

<a href="skype:echo123;ANOTHER_USER?call">conference call</a>
 
Leave a comment

Posted by on June 29, 2012 in HTML, Miscellaneous

 

Tags: