Friday, July 29, 2016

jQuery and upload file using jQuery

What is jQuery?

jQuery is a lightweight, "write less, do more", JavaScript library.

It is a light JavaScript library. Work of jQuery is to make use Javascript in easy way to develop. jQuery wraps lots of function and method to call them with a single line and to reduce to lines of JavaScript. It also simplifies complicated things from JavaScript like AJAX calls and DOM manipulation.

  • The jQuery library contains the following features: 
  • HTML/DOM manipulation 
  • CSS manipulation 
  • HTML event methods 
  • Effects and animations 
  • AJAX 
  • Utilities 
Why jQuery?

There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.

  • Many of the biggest companies on the Web use jQuery, such as: 
  • Google 
  • Microsoft 
  • IBM 
  • Netflix 
How to upload file using J Query?

There are two ways to use jQuery.

Local Installation − You can download jQuery library on your local machine and include it in your HTML code.




<script type = "text/javascript" src = "Directory Name/libs/jquery/2.1.3/jquery.min.js"></script>


CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).


<script type = "text/javascript" src = "http://ajax.googleapis.com/
ajax/libs/jquery/2.1.3/jquery.min.js"></script>


J-Query-File-Upload plugin allow user to select multiple files, display information about them, and provide previews for images. 

Example:


<!DOCTYPE html>

<html>
            <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                    <link rel="stylesheet" type="text/css" href="style/default.css" media="screen" />
                    <title>JavaScript File API and Ajax uploading Demo</title>
            </head>
           
            <body>
                        <div id="wrap">
                                    <h1>JavaScript File API and Ajax uploading Demo</h1>
                                    <h2>Choose a file to upload:</h2>
                                    <input id="file_upload" type="file" name="files[]" />

                                    <div id="files">
                                                <h2>File Preview</h2>
                                                <ul id="filePreview"></ul>
                                                <a id="remove" href="#" title="Remove file">Remove file</a>
                                    </div>

                    </div>
            </body>
</html>


Script References

JQuery-File-Upload front-end code is spread across four external JS files, two of which are not included in the download package and are hosted on the googleapis.com site. Here is what is contained in each:

  • J-Query.min.js: The hosted minified j Query library.
  • J-Query-ui.min.js: A hosted extention of the basic fileupload widget. It also adds a complete user interface based on j Query templates.
  • J-Query.fileupload.js: The basic j Query-File-Upload plugin, used to enhance the file upload process.
  • J-Query.iframe-transport.js: Adds iframe transport support to j Query.ajax() for browsers that don't support the File API.
In addition to these four files, we'll need to add two more of our own:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/j Query/1.6.4/j Query.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/j Queryui/1.8.16/j Query-ui.min.js"></script>
        <script src="js/j Query.fileupload.js"></script>
        <script src="js/j Query.iframe-transport.js"></script>
        <script src="js/json_parse.js"></script>
        <script src="js/upload.js"></script>
    </head>
</html>


Minimal code

The plugin is instantiated when you call fileupload() from a JQuery file upload widget. By building our own UI, as we have done here, we can use the basic plugin version with only a few options. At a minimum, you need to and pass it a options object that contains the server component url, some files, and perhaps a function to run once the upload has completed. To convert any HTML element into a j Query widget, call it with any j Query DOM function that returns a JQuery widget. The $('#elementid') function is usually the simplest. Here's a very simple call to fileupload() which adds the uploaded file's name to the document once it's done:

$('#file_upload').fileupload
({
               url: 'php/index.php',
               done: function (e, data)
               {
                               $.each(data.result, function (index, file))
                               {
                                              $('<p/>').text(file.name).appendTo('body');
                               };
               }

});

And yes, we didn't even code an onchange event handler for the file input element!

Other interesting things?

jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list of important core features supported by jQuery −

  • DOM manipulation − The jQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open source selector engine called Sizzle.
  • Event handling − The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
  • AJAX Support − The jQuery helps you a lot to develop a responsive and feature-rich site using AJAX technology.
  • Animations − The jQuery comes with plenty of built-in animation effects which you can use in your websites.
  • Lightweight − The jQuery is very lightweight library - about 19KB in size ( Minified and gzipped ).
  • Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+

Thursday, July 28, 2016

Node.js

What is Node JS?
Node.js is powerful JS Framework built in chrome’s v8 engine. It is used to develop I/O intensive web applications like video streaming sites, single-page applications, and other web applications. Node.js is open source, completely free, and used by thousands of developers around the world. This article will give you enough learning of node.js. Before moving further one should have basic knowledge of JavaScript.
Node.js was developed by Ryan Dahl in 2009 and its latest version is v0.10.36.
Node.js is a server side platform built on Google Chrome's JavaScript Engine (V8 Engine). Node.js is a platform built on Chrome's JavaScript runtime for easily building fast and scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that is able to load in every devices.
Why to use it?
Following are the areas where Node.js is proving itself as a perfect technology partner.
  • I/O bound Applications
  • Data Streaming Applications
  • Data Intensive Real time Applications (DIRT)
  • JSON APIs based Applications
  • Single Page Applications

How to use Node JS?
Download latest version of Node.js installable archive file from Node.js Downloads. At the time of writing this tutorial, following are the versions available on different OS.
OS
Archive Name
Windows
node-v0.12.0-x64.msi
Linux
node-v0.12.0-linux-x86.tar.gz
Mac
node-v0.12.0-darwin-x86.tar.gz
SunOS
node-v0.12.0-sunos-x86.tar.gz

Verifying installation.
Create a js file named 1st.js on your machine (Windows or Linux) having the following code.
/* Hello, World! program in node.js */
console.log("Hello, World!")

Now execute main.js file using Node.js interpreter to see the result:
$ node 1st.js

It should produce the following result:"Hello, World!"
Import required module.Example
We use require directive to load http module and store returned HTTP instance into http variable as follows –
var http = require("http");

Create server.
At next step we use created http instance and call http.createServer()method to create server instance and then we bind it at port 8081 using listenmethod associated with server instance. Pass it a function with parameters request and response. Write the sample implementation to always return "Hello World".

http.createServer(function (request, response) {

   // Send the HTTP header
   // HTTP Status: 200 : OK
   // Content Type: text/plain
   response.writeHead(200, {'Content-Type': 'text/plain'});
  
   // Send the response body as "Hello World"
   response.end('Hello World\n');
}).listen(8081);

// Console will print the message
console.log('Server running at http://127.0.0.1:8081/');


Request and Response Test
Let's put importing and creating server together in a file called 1st.js and start our HTTP server as shown below –
var http = require("http");

http.createServer(function (request, response) {

   // Send the HTTP header
   // HTTP Status: 200 : OK
   // Content Type: text/plain
   response.writeHead(200, {'Content-Type': 'text/plain'});
  
   // Send the response body as "Hello World"
   response.end('Hello World\n');
}).listen(8081);

// Console will print the message
console.log('Server running at http://127.0.0.1:8081/');


Now execute the main.js to start the server as follows -
$ node 1st.js

Verify the Output. Server has started
Server running at http://127.0.0.1:8081/

Open http://127.0.0.1:8081/ in your browser to see the result.
REPL terminal

REPL stands for Read Eval Print Loop and it represents a computer environment like a window console or Unix/Linux. It performs the following desired tasks.

Read - Reads user's input, parse the input into JavaScript data-structure and stores in memory.
  • Eval - Takes and evaluates the data structure
  • Print - Prints the result
  • Loop - Loops the above command until user press ctrl-c twice.

REPL feature of Node is very useful in experimenting with Node.js codes and to debug JavaScript codes.

Other interesting things to know?
Features
Following are some of the important features that make Node.js the first choice of software architects.
  • Asynchronous and Event Driven - All APIs of Node.js library are asynchronous that is, non-blocking. It essentially means a Node.js based server never waits for an API to return data. The server moves to the next API after calling it and a notification mechanism of Events of Node.js helps the server to get a response from the previous API call.
  • Very Fast - Being built on Google Chrome's V8 JavaScript Engine, Node.js library is very fast in code execution.
  • Single Threaded but Highly Scalable - Node.js uses a single threaded model with event looping. Event mechanism helps the server to respond in a non-blocking way and makes the server highly scalable as opposed to traditional servers which create limited threads to handle requests. Node.js uses a single threaded program and the same program can provide service to a much larger number of requests than traditional servers like Apache HTTP Server.
  • No Buffering - Node.js applications never buffer any data. These applications simply output the data in chunks.



Thursday, July 21, 2016

How to create simple PHP page?

What is PHP?
"PHP: Hypertext Preprocessor". PHP is a freeware scripting language. PHP is server side scripting language. It is powerful for making interactive, faster, and dynamic web pages. To create PHP one should know basic about HTML, CSS and JavaScript. A simple PHP example is given below. It is widely used and it compete with Microsoft’s ASP in market.

Why PHP?
Fast Load Time – PHP is much faster than ASP because it runs with its own memory space while ASP uses overhead server.
Less Expensive Software – Working with is almost because software like wordpress are open source and free to use while ASP is costly compare to PHP.
Database Flexibility – There are many DB that can be used with PHP most commonly used is My SQL. MySQL is also open source and free. Other DB like dBase, IBM DB2, Inter Base, Front Base, ODBC, Postgre SQL, SQLite, etc. are also supported.

How to use PHP?
Set Up PHP on Your Own PC
However, if your server does not support PHP, you must:
  • install a web server
  • install PHP
  • install a database, such as MySQL
The official PHP website (PHP.net) has installation instructions for PHP: http://php.net/manual/en/install.php

Example

<html>
<body>

<?php
echo "<h1>starting with PHP..!!!</h1>";
?>

</body>
</html>


  • A PHP script starts with   <?php   and ends with   ?>.
  • The default file extension for PHP files is ".php".
  • "echo" is a built in php function that help to output in our case text ” starting with PHP..!!! is printes

Output



Other interesting things to know?

CAPABLE
It can be used to design any type of website and can handle websites with a lot of traffic. Facebook, Twitter, Wikipedia and many other very widely visited websites are made from PHP.

EASY
It has a readable and easily understandable syntax. Its code is embedded in the HTML source code and it is based on C/C++. Therefore, it is very familiar and programmers are very comfortable coding with it.

PLATFORM INDEPENDENT
It can be run on all major operating systems like Linux, UNIX, Mac OS and Windows.

FASTER DEVELOPMENTS
It uses its own memory space and thus decreases the loading time and workload from the server. The processing speed is fast and web applications like Ecommerce, CRM, CMS and Forums are also developed faster by it.

SECURE
It has multiple layers of security to prevent threats and malicious attacks.

LARGE COMMUNITIES
It has a large community of developers who regular and timely updates tutorials, documentation, online help and FAQs.

PROVEN AND TRUSTED
It is being used since close to two decades now since its inception in 1995. It is trusted by thousands of websites and developers and the list is increasing day by day. It has also proven its capability and versatility by developing and maintaining some of the most highly visited and popular websites.

Tuesday, July 19, 2016

Knockout JS

What is Knockout JS?

It is a JavaScript library based on MVVM pattern. MVVM help us to build rich and responsive websites. MVVM means model (stored data), view (UI) and view model (it represent the model). This article covers basics of Knockout JS and its concept of program in easy and simple way.

To start with Knockout JS one should have basics of html, CSS, JavaScript, DOM and text editor.
KO is an abbreviation used for KnockoutJS.
Second word for Knockout JS is KO.
KO was developed by Steve Sanderson, employee of Microsoft.
What is Knockout JS?

It is a JavaScript library based on MVVM pattern. MVVM help us to build rich and responsive websites. MVVM means model (stored data), view (UI) and view model (it represent the model). This article covers basics of Knockout JS and its concept of program in easy and simple way.

To start with Knockout JS one should have basics of html, CSS, JavaScript, DOM and text editor.
KO is an abbreviation used for KnockoutJS.
Second word for Knockout JS is KO.
KO was developed by Steve Sanderson, employee of Microsoft.

Why knockout JS?


It is easy to handle data driven interfaces with KO. With KO we can write auto update UI codes. It is cannot replace JQuery but it can work as splement with smart and very useful feature. KO is small & lightweight. KO is independent. It is compatible with both client and server side technologies.


How to use knockout JS?


you can download production build of Knockout.js from its official website



 <script type='text/javascript' src='Directory_Name/knockout-3.3.0.js'></script>

Or you can include from CDN:



 <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>


 Example



 <!DOCTYPE html>
<head>
   <title>KnockoutJS Simple Example</title>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>

<body>
   <!-- This is called "view" of HTML markup that defines the appearance of UI -->
   <p>First String: <input data-bind="value: fstring" /></p>
   <p>Second String: <input data-bind="value: sstring" /></p>

   <p>First String: <strong data-bind="text: fstring">Hi</strong></p>
   <p>Second String: <strong data-bind="text: sstring">There</strong></p>

   <p>Derived String: <strong data-bind="text: tstring"></strong></p>

   <script>
   <!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->

   function AppViewModel() {
       this.fstring = ko.observable("Enter First String");
       this.sstring = ko.observable("Enter Second String");

       this.tstring = ko.computed(function() {
              return this.fstring() + " " + this.sstring();
    }, this);
   }

   // Activates knockout.js
   ko.applyBindings(new AppViewModel());
   </script>
</body>
</html>
  • We have two input boxes : First String and Second String. These 2 variables are initialized with values Enter First String and Enter 
  • Second String respectively in ViewModel. <p>First String: < input data-bind="value: fstring" /> </p>This is how we are binding values from ViewModel to HTML elements using 'data-bind' attribute in the body section.Here 'fstring' refers to ViewModel variable.
  •  this.fstring = ko.observable("Enter First String");ko.observable is a concept which keeps an eye on value changes so that it can update underlying ViewModel data.To understand this better, let's update first input box to "Hello" and Second input box to "world". You will see values are updated simultaneously. We will study more about this concept in KnockoutJS - Observables chapter.
  •  this.tstring = ko.computed(function() {return this.fstring() + " " + this.sstring();}, this); Next we have computed function in viewmodel. This function derives third string based on 2 strings mentioned earlier. So any updates made first to string it directly reflects to the third string. There is no need of writing extra code to accomplish this. This is just a simple example.
Output
Save the above code as example.html. Open this file in your browser and you will see an output as below:





Other interesting things to know?


Features



  • Declarative Binding - DOM elements are directly connected to model using data-bind attribute with very simple syntax.
  • Automatically Refresh for UI- Change made to view model data are reflected in UI automatically and vice-versa. It doesn’t require extra code.
  • Dependency Tracking - Relationships between attributes and library functions/components are transparent.
  • Temp late – it is used to build complex UI structures - with possibility of repeating or nesting blocks - as a function of view model data.
  • Extensible – We can easily extends custom behavior.

KnockoutJS is widely used for Single Page Applications - A web site that is created with ability to retrieve all necessary data dynamically with a single page load reducing server round trips.

KnockoutJS is a client side framework. This is a Javascript library which makes it very easy to bind HTML to domain data. It implements a pattern called"Model-View-ViewModel"(MVVM). Observables is the magic ingredient of KnockoutJS. All data remains in sync because of Observable attribute.


View


View is nothing but User Interface created using HTML elements and CSS styling.

You can bind HTML DOM elements to data model using KnockoutJS. It provides 2 way data binding between View and ViewModel using 'data-bind' concept, which means any updates done in UI are reflected in data model and any changes done in data model are reflected in UI. One can create self-updating UI with help ofknockoutJS.

ViewModel


ViewModel is a Javascript object which contains necessary properties and functions to represent data. View and ViewModel are connected together with declarative data-bind concept used in HTML. This makes it easy to change HTML without changing ViewModel. KnockoutJS takes care of automatic data refresh between them through use of Observables.

Synchronization of data is achieved through binding DOM elements to Data Model first using data-bind and then refreshing these 2 components through use of Observables. Dependency tracking is done automatically due to this synchronization of data. No extra coding is required to achieve it. KnockoutJS allows you to create direct connection between your display and underlying data.
You can create your own bindings called as custom bindings for application specific behaviors. This way knockout gives direct control of how you want to transform your data into HTML.

Model


Model is domain data on server and it gets manipulated as and when request is sent/received from ViewModel.

The data could be stored in database, cookie or other form of persistent storage. KnockoutJS does not worry about how it is stored. It is up to programmer to communicate between stored data and KnockoutJS.


Why knockout JS?


It is easy to handle data driven interfaces with KO. With KO we can write auto update UI codes. It is cannot replace JQuery but it can work as splement with smart and very useful feature. KO is small & lightweight. KO is independent. It is compatible with both client and server side technologies.


How to use knockout JS?


you can download production build of Knockout.js from its official website



 <script type='text/javascript' src='Directory_Name/knockout-3.3.0.js'></script>

Or you can include from CDN:



 <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>


 Example



 <!DOCTYPE html>
<head>
   <title>KnockoutJS Simple Example</title>
   <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>

<body>
   <!-- This is called "view" of HTML markup that defines the appearance of UI -->
   <p>First String: <input data-bind="value: fstring" /></p>
   <p>Second String: <input data-bind="value: sstring" /></p>

   <p>First String: <strong data-bind="text: fstring">Hi</strong></p>
   <p>Second String: <strong data-bind="text: sstring">There</strong></p>

   <p>Derived String: <strong data-bind="text: tstring"></strong></p>

   <script>
   <!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->

   function AppViewModel() {
       this.fstring = ko.observable("Enter First String");
       this.sstring = ko.observable("Enter Second String");

       this.tstring = ko.computed(function() {
              return this.fstring() + " " + this.sstring();
    }, this);
   }

   // Activates knockout.js
   ko.applyBindings(new AppViewModel());
   </script>
</body>
</html>

  • We have two input boxes : First String and Second String. These 2 variables are initialized with values Enter First String and Enter Second String respectively in ViewModel.
  •  <p>First String: < input data-bind="value: fstring" /> </p>This is how we are binding values from ViewModel to HTML elements using 'data-bind' attribute in the body section.Here 'fstring' refers to ViewModel variable.
  •  this.fstring = ko.observable("Enter First String");ko.observable is a concept which keeps an eye on value changes so that it can update underlying ViewModel data.To understand this better, let's update first input box to "Hello" and Second input box to "world". You will see values are updated simultaneously. We will study more about this concept in KnockoutJS - Observables chapter.
  • this.tstring = ko.computed(function() {return this.fstring() + " " + this.sstring();}, this); Next we have computed function in viewmodel. This function derives third string based on 2 strings mentioned earlier. So any updates made first to string it directly reflects to the third string. There is no need of writing extra code to accomplish this. This is just a simple example.

Output
Save the above code as example.html. Open this file in your browser and you will see an output as below:





Other interesting things to know?


Features


  • Declarative Binding - DOM elements are directly connected to model using data-bind attribute with very simple syntax.
  • Automatically Refresh for UI- Change made to view model data are reflected in UI automatically and vice-versa. It doesn’t require extra code.
  • Dependency Tracking - Relationships between attributes and library functions/components are transparent.
  • Temp late – it is used to build complex UI structures - with possibility of repeating or nesting blocks - as a function of view model data.
  • Extensible – We can easily extends custom behavior.

KnockoutJS is widely used for Single Page Applications - A web site that is created with ability to retrieve all necessary data dynamically with a single page load reducing server round trips.


KnockoutJS is a client side framework. This is a Javascript library which makes it very easy to bind HTML to domain data. It implements a pattern called"Model-View-ViewModel"(MVVM). Observables is the magic ingredient of KnockoutJS. All data remains in sync because of Observable attribute.


View


View is nothing but User Interface created using HTML elements and CSS styling.

You can bind HTML DOM elements to data model using KnockoutJS. It provides 2 way data binding between View and ViewModel using 'data-bind' concept, which means any updates done in UI are reflected in data model and any changes done in data model are reflected in UI. One can create self-updating UI with help ofknockoutJS.

ViewModel


ViewModel is a Javascript object which contains necessary properties and functions to represent data. View and ViewModel are connected together with declarative data-bind concept used in HTML. This makes it easy to change HTML without changing ViewModel. KnockoutJS takes care of automatic data refresh between them through use of Observables.

Synchronization of data is achieved through binding DOM elements to Data Model first using data-bind and then refreshing these 2 components through use of Observables. Dependency tracking is done automatically due to this synchronization of data. No extra coding is required to achieve it. KnockoutJS allows you to create direct connection between your display and underlying data.
You can create your own bindings called as custom bindings for application specific behaviors. This way knockout gives direct control of how you want to transform your data into HTML.

Model


Model is domain data on server and it gets manipulated as and when request is sent/received from ViewModel.

The data could be stored in database, cookie or other form of persistent storage. KnockoutJS does not worry about how it is stored. It is up to programmer to communicate between stored data and KnockoutJS.