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:
Tuesday, 17 December 2013
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
id | common | name |
1 | a | Name 1 |
2 | b | Name 2 |
Table B
id | common | title |
1 | b | Title 1 |
2 | c | Title 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;
- 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;
- 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;
- 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/
Inner Join A and B
a.id | a.common | a.name | b.id | b.common | b.title |
2 | b | Name 2 | 1 | b | Title 1 |
Left Outer Join A and B
a.id | a.common | a.name | b.id | b.common | b.title |
1 | a | Name 1 | NULL | NULL | NULL |
2 | b | Name 2 | 1 | b | Title 1 |
Right Outer Join A and B
a.id | a.common | a.name | b.id | b.common | b.title |
2 | b | Name 2 | 1 | b | Title 1 |
NULL | NULL | NULL | 2 | c | Title 2 |
Full Outer Join A and B
a.id | a.common | a.name | b.id | b.common | b.title |
1 | a | Name 1 | NULL | NULL | NULL |
2 | b | Name 2 | 1 | b | Title 1 |
NULL | NULL | NULL | 2 | c | Title 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
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.
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.
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>
<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.
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;
}
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;
}
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;
}
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.
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;
}
float: left;
}
Now the list starts to resemble a horizontal menu. At the moment the menu looks like in picture 4.
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;
}
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.
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>
<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;
}
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.
Picture 7. The complete horizontal menu made with HTML list (ul li) and styled with CSS.
Subscribe to:
Posts (Atom)