Saturday, 14 December 2013

Friday, 13 December 2013

Part:1:-C Programming

Part-1 C Programming-Introduction

Before going to Start C Programming, Take a Look at Few Definitions:-

What is Program:-
A Program (i.e. Computer Program) is a Sequence of instructions, written to perform a Specified task with Computer.
Task of developing programs is called Programming.

Who is Programmer:-
The Person who is engaged in Programming Activity is known as Programmer. We can also say that Programmer is a person who writes Computer Software.

Introduction to C-Programming language

C is a general-purpose programming language developed by Dennis Ritchie for the Unix Operating System in 1972 at Bell Laboratories. C is successor of B language which was introduced around 1970. C is also Known as Middle level Language because it combines the best elements of low level or Machine language with high level language.
C Language has the ability to communicate directly with hardware makes it powerful Choice for System Programmers for writing system programs like Compiler and Interpreters. Today C is most widely used System Programming language. UNIX and Linux Operating System are written using C Language.

Why you should Learn C?
C is simple and Easy to Learn.
C is structured programming language.
C can compiled on variety of computers and programs written in C runs faster as Compared to other programming language.

C Compiler:-
C programs are written into text files with extension “.c”. Example helloworld.c. After creating a program using C language, if you want to run your program then you need a compiler. Compiler converts your program into a language understandable by a computer i.e.  Machine language (binary format).If you don’t have Compiler than you have to download it. Without Compiler you are not able to run your C Program.

Compiler vendors provides several Integrated Development Environment (IDE) which contain Editor as well as Compiler. There are several IDE available in the market targeting different Operating System. For Example:-Turbo C++, Borland C++, Microsoft C++ etc.


Example1.1: A Simple C Program:-

#include <stdio.h>
#include <conio.h>
void main()
{
       printf("Hello World");
       getch();
}



Explanation of Program:

#include is directive to C preprocessor known as Compiler Directive. Lines starting with # are processed by the preprocessor before the program is compiled by the Compiler. As we know that C is Small Language and it can do almost nothing without including the External Libraries. So, we have to tell the compiler what external code we want to use by including header files. In above example we have used two header files i.e. “stdio.h” and “conio.h”. The stdio library (standard input/output header) contains the code that allow us to read and write data from and to the terminal (Console).

Every program starts Executing from the main function. C Program can contain one or more function out of which one must be main. When printf statement executed, It prints Hello World message to the terminal.

Note:-
C is a Case sensitive Language.
      Always terminate the statement using semi-colon.


Example 1.2 Using Escape Sequence:-

#include <stdio.h>
#include <conio.h>
void main()
{
       printf("Hello World\n");
       printf("Welcome to C Programming Introduction");
       getch();

}

When printf statement executed, all the characters inside double quotes printed exactly same as the written in the code till it encounter the backslash. On encountering the backslash (“\”) in the string, it combines backslash with the next character and form an Escape Sequence. In Example 1.2 it form “\n” which means new line. When “\n” comes, the cursor moves to the next line and starts writing the characters from next line.

Escape Sequence
Description
\n
New Line
\a
Alert Sound
\t
Horizontal tab
\”
Inserting Double quote in string
\\
Inserting backslash in string
Table 1.1 Escape Sequence

Comments: Comments help people to read and understand your Program code. Comments are ignored by the Compiler. We can use Comments in two ways:-

Single line Comment:-
//This is the Example of Single Line Comment

Multiline Comment:-
/* this is the example of Multiline Comment
Program Created by Anoop Kumar Sharma*/



Tuesday, 26 November 2013

Copy Table Schema and Data From One Database to Another Database in SQL Server

Several times we need to copy SQL Server table schemas and data from one database to another database. In this article, I show how to do this using a query as well as graphically in SQL Server.

I have created two databases named databasefrm and databaseto. In database databasefrm, I have a table named Emp containing data like ID, Name, Address and so on. I want to copy the table Emp to databaseto. We can do this using various methods.

Method 1: Using Query
The query required here is:

Query Syntax: 
Select * into DestinationDB.dbo.tableName from SourceDB.dbo.SourceTable
Example
select * into databaseto.dbo.emp from databasefrm.dbo.Emp

This command only copies the table schema and data. If we want to copy objects, indexes, triggers or constraints then we need to generate Scripts (third method) that we will talk about later in this article.

If we want to copy a table in the same database then we need to first use our database then execute this query:
select * into newtable from SourceTable

Example
 
select * into emp1 from emp

We can also select only a few columns into the destination table.

Query Syntax
select col1, col2 into <destination_table> from <source_table>

Example
select Id,Name into databaseto.dbo.emp1 from databasefrm.dbo.Emp

Preview after executing this query:

Here we only copy Id and Name in table emp1 from the Emp table in the databasefrm database.
If we want to copy only the structure or the schema of the table then we need to use this query:
 
select *into <destination_database.dbo.destination table> from <source_database.dbo.source table> where 1 = 2
Preview after executing this query:

Method 2:
1. Open SQL Server Management Studio

2. Right-click on the database name then select "Tasks" > "Export data..." from the object explorer.

3. The SQL Server Import/Export wizard opens; click on "Next"


4. Provide authentication and select the source from which you want to copy the data; click "Next".


5. Specify where to copy the data to; click on "Next".





Method 3: Generate Script
By using the above two methods we are only able to copy the table schema and data but we are not able to copy views, functions, constraints, triggers and so on. We can copy all these things by generating scripts.

Let's see how to generate a script:
  1. Right-click on the database name then select "Tasks" then click on "Generate Scripts". After that the Script Wizard opens. Click on "Next".
  2. Select the Database you want to script.
  3. Choose the object types. Click on "Next".
  4. Select the tables.
  5. Select the Output option for the script.
  6. Change/Edit the database name to the name you want to execute this script for.
Let's see how to do it step-by-step:








Sunday, 27 October 2013

Customize Scrollbars using CSS3

In this tip, we will learn How to Customize Scrollbars using CSS3. Today, more than 55% people use Chrome + Safari as their Web Browser. The common thing in these browser is that both are supported by Webkit platform. Customization of scrollbar is very easy using CSS3, but Custom Scrollbars are supported by Webkit Browsers. Don't worry, as we know that more than 55% of browser marketplace is covered by webkit platform based browser (i.e., Chrome and Safari) which is also a great thing.

Before going to start, we will see Structure of Scrollbar:


Let's Begin:

Create HTML Document:
<div class="scrollbar" id="ex3">
    <div class="content">Example 3</div>
</div>

CSS Stylesheet:
Firstly, we set the .scrollbar (class) width, height, background-color. We set overflow-y:scroll for getting vertical scrollbar. Then set .content div height more than .scrollbar so that scrollbar appears (because we used overflow-y property to scroll in .scrollbar class).

.scrollbar{
width:150px;
height:300px;
background-color:lightgray;
margin-top:40px;
margin-left:40px;
overflow-y:scroll;
float:left;
}
.content{
height:450px;
}
Preview:
After that, we use scrollbar pseudo-element for creating custom scrollbar. When we use scrollbar pseudo-element, it will turn off its default scrollbar and a scrollbar is appeared with 16px width and background-color:#cccccc.

#ex3::-webkit-scrollbar{
width:16px;
background-color:#cccccc;
}
Preview:
As we know that Scrollbar contains Track, Button and Thumb.
In the next step, we are going to give a stylish look to thumb. We use pseudo-element (i.e. scrollbar-thumb) with webkit prefix. Set scrollbar-thumb background- color,border-radius. We also change the color for mouse hovering and active(on clicking).

#ex3::-webkit-scrollbar-thumb{
background-color:#B03C3F;
border-radius:10px;
}
#ex3::-webkit-scrollbar-thumb:hover{
background-color:#BF4649;
border:1px solid #333333;
}
#ex3::-webkit-scrollbar-thumb:active{
background-color:#A6393D;
border:1px solid #333333;
}

After that, scrollbar looks like this:
Preview:
We set border and border-radius of scrollbar-track and use box-shadow to make it stylish.

#ex3::-webkit-scrollbar-track{
border:1px gray solid;
border-radius:10px;
-webkit-box-shadow:0 0 6px gray inset;
}
Final Preview:
Using the above procedure, I have created some other scrollbars. I am providing the source code of others for downloading.
Preview:

That's all. Hope you like it.

Thanks.
Download Source Code[4shared.com]





Friday, 25 October 2013

How to use HTML5 Download Attribute

HTML5 came with various new features like new attributes for forms, new input types as well as new API. One of the upgrade that came with HTML5 is the Download attribute.

As we know, there are many files that are not downloaded directly. For example: images, WebPages, PDF files, music files, etc. We have to right click on images and then click on Save Image to save an image file. But if I want to download an image file directly, then we have to use the download attribute.

Before going to Start, I will show you How to check Browser Support for this attribute.

For checking Browser support we have to use JavaScript:
var a = document.createElement('a');
if (typeof a.download != "undefined") {
     document.write('Download attribute supported');
}
else {
    document.write('Download attribute not supported');
}

If your Browser support it, It gives “Download attribute supported” message otherwise if gives “Download attribute not supported” message.

Using Download Attribute:
 
<a href="Image.jpeg" download>Download image</a>
  
Simply type download in the <a> anchor tag. By using this, when we click on download image, the image starts downloading. The same method is used for downloading PDF, webpage files (HTML), etc. (I am attaching a file in which I have shown a comparison between using the download attribute and not using it.)

If we want to rename the name of file that we are going to download irrespective of whatever be the name of file present in server then we have to write:
<a href="Folder/myimagehavenoname.png" download="myImage">Download image</a>
 
Here, we write download="myImage". When we click on Download image, then an image file is downloaded with  name myImage with a .png extension. The browser automatically detects the correct file extension and adds it to the downloaded file. So there is no need to add the file extension in the download attribute.

Chrome 14+ and Firefox 20+ supports the download attribute. I have tried and tested it in Chrome.

I am including a .zip file for downloading in which I am showing use of download attribute as well as for checking  Browser Support.

Download Source Code[4shared.com]

Thursday, 24 October 2013

HTML5 Drag and Drop

Using the HTML5 Drag and Drop API we can drag and drop any element that we want. Before this feature we could do drag and drop using jQuery and so on. Now we have HTML5 Drag and Drop, that gives us the ability to drag and drop. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.


The Drag and Drop API cames with seven new events to track a drag and drop. The events are dragstart, drag, dragend, dragenterdragleavedragover and drop that are triggered during various stages of the drag and drop operation. These events are listed below:  


  • Elements that are dragged during Drag and Drop can trigger three events. These events are dragstart, drag, dragend. 
  • Elements in which we drop the draggable elements can trigger four events. These events are dragenter, dragleave, dragover and drop.
Let's Begin
   
In this example I will show you how to drag and drop an image (you can drag anything you want).
 
Creating HTML5 Document
First, to make an element draggable, set the draggable property ="true". Here we are making an image draggable.
Then add an ondragstart event. On dragstart event, call a function "startdrag (event)" that stores the data of the element being dragged. The dataTransfer.setData("text",e.target.id) method sets the data type and the value of the dragged data.
 
The ondragover event indicates where the dragged data can be dropped. Basically any element (data) cannot be dropped in another element. If we want to allow the draggable object (image) to be dropped inside the Red box then we must prevent the default behavior of the browser. This is done by calling the event.preventDefault() method in the ondragover event. 
 
When the dragged image (or data) is dropped, the ondrop event calls a function (in other words drophere (event)). Here we call preventDefault(). After that we get the data from dataTransfer.getData("Text") method (used for getting the dragged data). then we are attaching the dragged element using appendchild() into the drop element.

<div id="leftbox"ondrop="drophere(event)"ondragover="allowdrophere(event)"></div>
<div id="rightbox"><imgsrc="images/folder.jpg"draggable="true"ondragstart="startdrag(event)"id="image"></div>

CSS Stylesheet:
 
#leftbox{
width:150px;
height:150px;
border:1px solid red;
float:left;
margin-left:10px;
}
#rightbox{
width:150px;
height:150px;
border:1px solid black;
float:left;
margin-left:10px;
}
JavaScript
 
function startdrag(e)
{
e.dataTransfer.setData("Text",e.target.id);
}
function allowdrophere(e)
{
e.preventDefault();
}
function drophere(e)
{
e.preventDefault();
var data=e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}

We can also do the same thing by adding an EventListener using JavaScript.
 
window.addEventListener("load",dofirst,false);
function dofirst()
{
image=document.getElementById('image');
image.addEventListener("dragstart",startdrag,false);
box=document.getElementById('leftbox');
leftbox.addEventListener("dragover",allowdrophere,false);
leftbox.addEventListener("drop",drophere,false);
}
function startdrag(e)
{
e.dataTransfer.setData("Text",e.target.id);
}
function allowdrophere(e)
{
e.preventDefault();
}
function drophere(e)
{
e.preventDefault();
var data=e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
  
Here we call the function dofirst on loading the window (onload event). In the do first function we use a var named image for accessing the image. The getElementById() method accesses the element with the specified id.add addEventListener("dragstart", startdrag, false) on the image. When we start dragging the image it calls the startdrag (e) function. The same thing is done for leftbox (where we need to drop the image).

Preview

Example 2
 
If we want to drag the image back to the rightbox(black box) then we need to add the ondrop and ondragover events in div(.rightbox).
 
<div id="leftbox"ondrop="drophere(event)"ondragover="allowdrophere(event)"></div>
<div id="rightbox"ondrop="drophere(event)"ondragover="allowdrophere(event)"><imgsrc="images/folder.jpg"draggable="true" ondragstart="startdrag(event)"id="image"></div>
 
Example 3: (showing the use of dragenter and dragleave event)
 
As we know, dragenter is triggered when a draggable element is dragged over the target element and dragleave triggered when the user's cursor leaves the target element. We will change the background-color and border on dragging the image over the target box (leftbox) using these two events.
 
Add these events in the tag that receive the draggable element (ondragenter="dragenter(event)" ondragleave="dragleave(event)).ondragenter triggers dragenter(event) function and ondragleave triggers dragleave (event) function.

function dragenter(e)
{
e.preventDefault();
varleft=document.getElementById('leftbox');
left.style.border="1px blue dotted";
left.style.background="silver";
}
function dragleave(e)
{
e.preventDefault();
varleft=document.getElementById('leftbox');
left.style.border="1px red solid";
left.style.background="white";
}
 
Here I am accessing the leftbox using HTML DOM (document.getElementById() method) and changing the style to Background="silver", border="1px dotted blue" in the dragenter function and Background="white", border="1px solid red" in the dragleave function (back to original color).
 
Preview

Other interesting Drag and Drop Examples:
 
Example 4: Checking the Total No. of Dragging of Box 

<div class="heading">Drag the box and check Total no. of Drag</div><br>
<div class="box"draggable="true"id="box"ondragstart="dragstart(event)"ondragend="dragend(event)">Drag this box</div>
I am not showing the CSS stylesheet here, you can download the source file containing all the examples.
 
function dargstart(e)
{
e.dataTransfer.setData("Text",e.target.id);
}
varcount=0;
function dragend(e)
{
varbox=document.getElementById('box');
count++;
box.innerHTML='Total No. of Drag='+count+'.';
}

Here I used the dragend event that triggers when the drag and drop operation stops. I have used a variable (count=0). When the drag and drop operation ends it increases the count value by 1 and displays it in the box (using .innerHTML).
 
Browser Support for HTML5 Drag and Drop
 
For checking browser support for Drag and Drop, we need to use JavaScript as in the following:
 
if('draggable'in document.createElement('span')) 
{
  alert("Drag support detected");
}
else
{
  alert("Drag support not detected");
}

HTML5 Drag & Drop is supported in Firefox 3.5+, Chrome 4.0+, IE 10 and so on. Click here to know more about the browser support. I have tried and tested it in IE 10 and Chrome 29.
 
You can also download the zip file that contains all the examples as well as checking browser support for the Drag and Drop.
 
That's all. Hope you like it.
 
Thanks.
Download Source Code[4shared.com]



Subscribe Now

Popular Posts

Contact us

Name

Email *

Message *

Subscribe us on YouTube

Like us on Facebook

Follow us on Google+