Html5 Tutorial - Future Technology

Showing posts with label ios. Show all posts
Showing posts with label ios. Show all posts

Wednesday, 17 July 2013

HTML5 Tutorial - Create your own blog in minutes using html5,css,php and mysql part 1


HTML5 Tutorial - Create your own blog in minutes using html5,css,php and mysql.

/ Hi friends, I am going to explain you how to create your own blog using html5,css,php and mysql. Requirements : 1) Basic knowledge on html5 and how to use new elements. 2) Basic knowledge on html5 and how to use new elements. 3) Php and mysql hosting(PhpMyAdmin). 4) Notepad++ for editing code. Get a free PHP,MySql account for this project from here http://serversfree.com Now you got all your requirements for free, now go to control panel and create a database,and create one user and add the user to created database.to create database you go to advanced tab in control panel and click on mysql databases icon as shown below. Next enter phpMyAdmin, create a new table for storing blog items. Now Create a table with xyz name and add Blog Title,Description,Image fields. After creating table you have to insert values in to data base by creating one admin panel or one html form to insert data. I have allready written one example showing how to insert form data to php mysql database. Here is the example link to create it and add data to database table. Please check How to insert form data to mysql data base using php For now i will tell you one simple step how to insert data to table directly. Click on table name right side and click insert button and form appears according to your fields.now insert data to our example. Now convert the form data to xml service so, that we can use the data where ever we want to use. For converting mysql data to xml service using php please visit our tutorial converting mysql table data to here Ok now we are ready with our back end services. Now we have to concentrate on front end i.e mostly html5 and css. Here is the HTML5 code for Placing header,content,article,section,aside and footer.

Html5 Tutorial - Future Technology

All Rights Reserved to ss consultancy.
Here is Javascript used to parse xml file and display results in required fields.

Here is css file to align html5 elements.

Ok you are done, Check here for demo. I will update part 2 as soon as posible please write comments or queries and i will solve them.

Friday, 5 July 2013

PhoneGap pagination tutorial using swiping from one page to another page.


Title : Hi i am going to explain you how to navigate from one screen to other screen using swiping. Description : In PhoneGap Application there are two ways to implement pagination using swiping , one way is writing our custom code for swiping from one page to other page.another way is using jQuery Mobile framework in our script.I am using the second way to explain you and in next article i will explain you the first method. I am assuming all of you know how to import jQuery mobile libraries into our html file. Download jQuery mobile files and add them to your working folder or give reference to online repository. Here is the html code :

Index.html

  • Swipe Right to view Page 1

Yeah!
You Swiped Right to view Page 1

Here is the jQuery and javascript for activating swipe functionality.
// If you swipe your page right you screen will be filled by page1 content.
$("#listitem").swiperight(function() {
    $.mobile.changePage("#page1");
});

// If you swipe your page right you screen will be filled by page1 content.
$("#listitem").swipeleft(function() {
    $.mobile.changePage("#page2");
});

Tuesday, 25 June 2013

PhoneGap Tutorial - Parsing xml file using javascipt and displaying the data on the android and ios mobile screens

Title : I am going to explain u how to parse xml file and display data on your mobile screen.

Description : In today's world every business application need to contact webservices or xml services or xml files in the server and parse the files and need to display some results on the screen.for example take a live cricket score card : in the server we write a program where the score will be updated ball by ball,run by run in the web service , and the xml file also get updated with the live score and now the our application screen should also contact the webservice every 5 seconds and parse xml file and will update the live score for us , I will explain this with source code latter , for now i will explain you a simple example.

Here is the xml file which we are going to parse.
    
    
        MakeMyTrip.com
        MakeMyTrip.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/makemytrip-logo.jpg
    
    
        GoIbibo.com
        GoIbibo.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/goibibo_logo.png
    
    
        Abhibus.com
        Abhibus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/abhibus-logo.png
    
    
        Travelyaari.com
        Travelyaari.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/travelyaari-com-logo-w240.png
    
    
        Redbus.in
        Redbus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/logo_bc9228d_163.jpg
    
    
        Expedia.co.in
        Expedia.co.in is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/expedia-logo.png
    
    
        Other websites
        We Provide more websites that offer good Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/travel-agency-logos.jpg
    

Now we have to parse the above file using java script and display the results using html5. Here is the html and javascript code to parse this xml file.

Javascript file

function travel(){	
	if (window.XMLHttpRequest)
	 {	// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	 }
	else
	 {	// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	 }
		xmlhttp.open("GET","Travel.xml",false);
		xmlhttp.send();
		xmlDoc=xmlhttp.responseXML;		
		travels = xmlDoc.getElementsByTagName("website");
		alert("travels:"+travels.length);
		var websites = [];
		var description = [];
		var logos = [];		
		for(var travel=0;travel

Html File



  
    
    
    Minimal AppLaud App


	  
	    

 
  
  
 
  
  
  

Coupons Shop

Monday, 24 June 2013

Converting MySql table data to xml file or xml web service - a part of phonegap tutorial for mobile web developers

Title : Converting mysql table data to xml file. Description : All mobile developers know how to parse xml data and display the data in the blocks of mobile screen.and it is also easy to parse xml data rather then fetching data directly from database every time going and hitting database and requesting to open connection and retriving data and closing connection.so i am going to explain you how to convert database data to xml file, and also in my previous tutorial i have explained you how to store form data to mysql database table. Now create a database, and create a table and store some data inthe table or open PhpMyAdmin panel and click on create table tab. now create some columns with some variables, and insert some data into the fields.so that you can able to create some usefull table to use it as webservices. Here is the following code to convert your table data to xml file.
";
$root_element = $config['table_name']."s"; //fruits
$xml         .= "<$root_element>";

//select all items in table
$sql = "SELECT * FROM ".$config['table_name'];
 
$result = mysql_query($sql);
if (!$result) {
    die('Invalid query: ' . mysql_error());
}
 
if(mysql_num_rows($result)>0)
{
   while($result_array = mysql_fetch_assoc($result))
   {
      $xml .= "<".$config['table_name'].">";
 
      //loop through each key,value pair in row
      foreach($result_array as $key => $value)
      {
         //$key holds the table column name
         $xml .= "<$key>";
 
         //embed the SQL data in a CDATA element to avoid XML entity issues
         $xml .= "";
 
         //and close the element
         $xml .= "";
      }
 
      $xml.="";
   }
}
//close the root element
$xml .= "";
 
//send the xml header to the browser
header ("Content-Type:text/xml");
 
//output the XML data
echo $xml;
?>
Here is the out put file i got with the above code.
MakeMyTrip.comMakeMyTrip.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/makemytrip-logo.jpgGoIbibo.comGoIbibo.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/goibibo_logo.pngAbhibus.comAbhibus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/abhibus-logo.pngTravelyaari.comTravelyaari.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/travelyaari-com-logo-w240.pngRedbus.inRedbus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/logo_bc9228d_163.jpgExpedia.co.inExpedia.co.in is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/expedia-logo.pngOther websitesWe Provide more websites that offer good Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/travel-agency-logos.jpg
In next tutorial I will explain you how to parse this xml file and display data on mobile screen using phonegap.

Tuesday, 25 December 2012

Difference between Native , Web and Hybrid Mobile Applications.

Title : Difference Between Native Web and hybrid Mobile Applications.

Hi, I am going to explain the main differences between Native , Web and Mobile Applications.In Present days smart phones are playing a major role in market where millions of people are expecting new features and new technologies in their mobiles.Every person using smart phone want to change his mobile in two years and expecting to purchase new mobile with more features then the previous mobile what he is using.
so that as a mobile developer we have to come with new technology with that we have to consider cost,portability,reusablity,performance,user interactivity and apperance.based upon the above things i am going to exaplain how native applications,web applications and hybrid applications play and which one to choose.

Native Apps :  Native mobile Applications are the applications build using the native language of the mobile and can be deployed to a specified store for example if we want to build native android application we have to know java and using java and android sdk we can build native android app and can only be deployed android market(Play Store).where as iphone applications can be developed by a c++ proggramer
and can be only deployed itunes.coming to portability Native apps are platform dependent.coming to cost native apps are cost as we need different programmers for devloping different native apps and every application need to be deployed in it's own market store and we have to pay for diploying our applications.
coparing to others native applications are fast , user interactive, provide good apperance and also deploying to market stores makes your application reachable to users easily.

 to develop native applications please refer the following link.

Web Applications : Web Applications are simple applications build using HTML5 and JavaScript and can be deployed in our own webservers. any mobile user can use this application from their mobile browser.compared to native apps this applications are low cost and can be used by any mobile user it is platform independent.Compared to native apps web apps are slow,appearence is not good as native apps,we cannot use mobile hardware like camera,gps,sensors.any web developer can develop web apps and can deploy the apps in their own web server and can be accessed by any mobile os devices.

to devlop web apps please refer the following link.

Hybrid Apps : Hybrid Apps are the applications build using HTML5 And JavaScript and deployed to any mobile os store by just changing some configurations and this is done by some opensource frameworks like PhoneGap.PhoneGap is a frame work that consists of different libraries which can convert a web application into native application and uses native apps webview and display the webapp in the webview and makes work as native apps.it is platform independent(but need to change some configurations while deploying).
it solves many disadvantages seen in webapplications and native applications.cost is less then native apps,can be deployed in market stores like playstore,itunes,ovi.Mobile hardware can be accessed by hybrid apps as native apps uses.user interactivity is good any web developer can build this hybrid apps with some additional things.user interactivity is good,appearence is good,reusability.

to develop hybrid apps please refer the following link.