Tuesday, 17 December 2013

SQL: How to choose Table name and Column name

Say for example you have two table Customer and Supplier. Both table have surname and forename field. Now you need a query to select the name of the Customer and Supplier also.So, in order to distinguish between Customer surname, forename and Supplier surname, forename you have to name the filed in such a so that you understand it is Customer surname or it is Supplier surname.

To achieve this we can start with FOUR CAPITAL letter what will be the short name of the table and followed by the table full name. For example: We can name the Customer table as CUSTcustomer and supplier table as SUPPsupplier.

After creating table we can start the field name of the table with the chosen FOUR CAPITAL letter short name of the table followed by under score sign followed by field name. For example: surname of the Customer table can be CUST_Surname and surname of the Supplier table can be SUPP_Surname.

Now if we run a query and from the result sheet we will be able to distinguish between Customer surname and Supplier surname.

See picture bellow:

SQL Join Example: Inner join Vs Left Join Vs Full Outer Join

Source: http://johnragan.wordpress.com/2009/11/16/inner-join-vs-left-outer-join-vs-right-outer-join-vs-full-outer-join-examples/


Inner Join vs. Left Outer Join vs. Right Outer Join vs. Full Outer Join Examples

I write SQL queries (and joins) every once in a while, but never had to deal with such things as “left outer joins” or “full outer joins” and so forth.  I always found this a little confusing and could not remember the differences after reading about them.
Today I had a crazy idea – why not actually TRY using the different queries and see what happens?  Consider these tables:

Table A

idcommonname
1aName 1
2bName 2

Table B

idcommontitle
1bTitle 1
2cTitle 2
Here is what I found when I do various joins of table A to table B on a common column:
  • Inner Joins are the same as the regular joins you have been doing for a while.  I replaced my query’s ‘join’ statement with ‘inner join’ and got the same result (as well as reading that these were the same).  Note that this means that any rows from either table which do not intersect are not part of the result.  The remaining joins address this.
    The query: select * from table_a inner join table_b where table_a.common = table_b.common;
  • Inner Join A and B

    a.ida.commona.nameb.idb.commonb.title
    2bName 21bTitle 1
  • Left Outer Joins are the same as an Inner Join of A and B, PLUS all the rows from A that did not match a row from B, with all the fields from the B side set to NULL for those rows.  Think of A as being on the left side.
    The query: select * from table_a left join table_b on table_a.common = table_b.common;
  • Left Outer Join A and B

    a.ida.commona.nameb.idb.commonb.title
    1aName 1NULLNULLNULL
    2bName 21bTitle 1
  • Right Outer Joins are the same as an Inner Join of A and B, PLUS all the rows from B that did not match a row from A, with all the fields from the A side set to NULL for those rows.  Think of B as being on the right side.
    The query: select * from table_a right join table_b on table_a.common = table_b.common;
  • Right Outer Join A and B

    a.ida.commona.nameb.idb.commonb.title
    2bName 21bTitle 1
    NULLNULLNULL2cTitle 2
  • MySQL does not support Full Outer Joins natively (there are some work-arounds).  However, it is roughly like the union of Left Outer Joins and Right Outer Joins according to what I have read.  Seehttp://www.xaprb.com/blog/2006/05/26/how-to-write-full-outer-join-in-mysql/
  • Full Outer Join A and B

    a.ida.commona.nameb.idb.commonb.title
    1aName 1NULLNULLNULL
    2bName 21bTitle 1
    NULLNULLNULL2cTitle 2

Monday, 10 June 2013

ASP.NET Error: The type "xxxx...." user control exists in both folder

Just change the web.config file as followed:
<compilation debug="false" targetFramework="4.0" batch="false" />

Add the batch="false" attribute to the "compilation" element of the web.config file.
This problem occurs because of the way in which ASP.NET 2.0 uses the application references and the folder structure of the application to compile the application. If the batch property of the element in the web.config file for the application is set to true, ASP.NET 2.0 compiles each folder in the application into a separate assembly.

Friday, 7 June 2013

jQuery: Disable right click on my web page?

Disabling the right click on web page

Introduction
Want to protect your source code? Using this code will prevent the vast majority of users from right-clicking over a page and choosing "View source", or right-clicking over an image and saving it.
Some times there might be the requirement to disable the pop up menu on click of right button.

Programmers may need to disable right click to prevent user from saving the images on the page or viewing the source of the page.

Though disabling right click is not complete solution to save the data, but it will make task difficult, or may be impossible for the rookies.

I searched on a net for the solution to this problem and i got following solution.

Method 1

      In this method we add a javascript method, in this we check if click is right click or left click if it is right click then a message is displayed like "Right click disabled"

<script language="javascript">
document.onmousedown=disableclick;
status="Right Click Disabled";
Function disableclick(e)
{
  if(event.button==2)
   {
     alert(status);
     return false; 
   }
}
</script>
 
But in this solution if you click the right click it displays the message
“Right click disabled”.

If we want to remove the messegebox then this solution do not work.

  I am having another simple solution to achieve the same result and also it does not show the messegebox.

Method 2

          In this method we set the oncontextmenu="return false" in the body part of the page
so body part will look like
<body oncontextmenu="return false">
...
</body>
So whenever user clicks the right mouse button nothing will happen, no message no context menu.

 Sometimes there might be requirement to disable the right click on specific control to achive this we have to follow these steps.
1.      remove added code in body (i.e. oncontextmenu=”return false”)
2.      Add one table and in its row add the control e.g. datagrid control
3.      put the oncontextmenu=”return false” in the <tr> for that control

So code will look like this
<Body>
  <Table>
   <tr oncontextmenu="return false">
    <td>
     <asp:datagrid id="dgGrid1">---</asp:datagrid>
   </td>
  </tr>
 </Table>
</Body>

So by this method context menu on the right click of right mouse click can be disabled.



How to add a custom right-click menu to a webpage?

use contextmenu event, like below:
<html>
<head>
<script type="text/javascript">
    if (document.addEventListener) {
        document.addEventListener('contextmenu', function(e) {
            alert("You've tried to open context menu"); //here you draw your own menu
            e.preventDefault();
        }, false);
    } else {
        document.attachEvent('oncontextmenu', function() {
            alert("You've tried to open context menu");
            window.event.returnValue = false;
        });
    }
</script>
</head>
<body>
Lorem ipsum...
</body>
</html>
But you should ask yourself, do you really want to overwrite default right-click behavior - it depends on application that you're developing.

Wednesday, 5 June 2013

CSS: Centered ul li a Horizontal Menu Bar

CSS UL LI - Horizontal CSS Menu

31.10.2008 Category: Web Design
In this tutorial we're going to create a professional horizontal CSS menu. First we are going to create a HTML list by using Unordered List (ul) and List Item (li) elements. Then we are going to style the list with CSS (Cascading Style Sheets) into the form of a horizontal navigation menu like in Picture 1.
Horizontal CSS navigation menu
Picture 1. Horizontal navigation menu that is made with HTML UL and LI elements and styled with CSS.
Previous knowledge about some basic HTML and CSS is required. HTML elements used in this tutorial:
  • ul (Unordered List)
  • li (List Item)
  • a (Anchor / Link)
This is a CSS tutorial so I'm not going to go through the creation of the graphics used in this tutorial. However, you can download the images and even the original PSD file:

HTML List (ul li) With Links

Let's start by creating a list with links in HTML:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
ul tags define the whole list and each list element is defined with li tags. Additionally each list item is surrounded with link tag (a). In real life situation you will of course replace # with the real URL. In a browser the list looks like inpicture 2. My list has only five items but you can have as many as you like. Now the HTML part of the menu is complete. Next we're going to style the menu with CSS.
Vertical HTML menu
Picture 2. A basic HTML list created with UL and LI tags.

UL CSS Styling

First I change the background color to black. It's not required but my graphics just looks better on black;)
body {
background-color: #000;
}
Then I use universal selector (*) to remove browser's default values of padding and margin from all elements. I think it just makes life easier. Alternatively, you could place these declarations under the ul selector.
* {
margin: 0;
padding: 0;
}
Now we are going style the ul with CSS. CSS declaration block for ul:
ul {
list-style-type: none;
background-image: url(navi_bg.png);
height: 80px;
width: 663px;
margin: auto;
}
The first declaration removes the default HTML list bullets. The second declaration places small (1x80 pixels) image in the background (repeated automatically.) The third declaration sets the height of the list. The fourth declaration sets the width of the list. The fifth declaration is voluntary. Auto margin will center the list within its parent element. Now the list looks like in picture 3.
Background image placed with css in ul li list
Picture 3. Now the horizontal menu has a background but the list items are still vertically.

LI CSS Styling

Next the menu is made horizontal by floating li elements with CSS:
li {
float: left;
}
Now the list starts to resemble a horizontal menu. At the moment the menu looks like in picture 4.
HTML list menu in horizontal form
Picture 4. Work in progress CSS navigation menu.

Styling Links With CSS

Links are styled by making the following declarations to the descendant link (a) selector:
ul a {
background-image: url(navi_bg_divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 80px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
color: #371C1C;
}
The first declaration places a small (2x80 pixels) background image to each link. The background image works as a divider between the links (picture 5). The second declaration forbids the repeating of the background image. The third declaration defines the location of the background image. The fourth and fifth declaration create padding around each link. The sixth declaration makes the whole block clickable (instead of just the text) The seventh declaration sets the height of the link. This is needed so that the whole height of the block would be clickable. This also centers the text vertically. The eighth declaration removes the underlining from the links. The 9th - 11th declarations are just for styling the text. Now the menu looks like in picture 6.
Background images for horizontal list menu
Picture 5. Background images used in this horizontal navigation menu. You can download them here and here.
Horizontal CSS Navigation menu
Picture 6. Now the CSS styled ul li list looks like a real navigation menu.

Finalizing the Horizontal CSS Menu

The menu is almost complete but if you look closely you'll see one problem with the menu. There is unnecessary divider after the last link. It can be removed by adding style declaration inside of the last link tag. So the final HTML code looks like:
<ul>
<li> <a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li> 
<li><a style="background-image: none;" href="#">Contact</a></li>
</ul>
Last thing to do is a small visual enhancement. The following CSS declaration block creates mouse-over color change to the links:
ul a:hover {
color: #FFF;
}
In picture 7 you see the final horizontal CSS menu. The menu is tested with Internet Explorer 7, Firefox 3 and Google Chrome 0.2.149.30.
Horizontal CSS navigation menu made out of list (ul li)
Picture 7. The complete horizontal menu made with HTML list (ul li) and styled with CSS.