tag:blogger.com,1999:blog-35341944978954378112024-03-13T15:33:44.743+05:30StudywithDemofarukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.comBlogger45125tag:blogger.com,1999:blog-3534194497895437811.post-35262762567498782452015-08-29T10:36:00.000+05:302015-08-29T10:36:44.234+05:30Adding Blur to part of a Video Screen in Camtasia<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Camtasia is a most popular tool used to record your computer screen, powerpoint presentation, edit your videos effectively and we can also share the video directly to youtube in HD format, among this it contains lot of features like predefined video and audio templates which are mostly useful while adding opening and closing credits. I personally love to work with camtasia studio software because it is very easy to learn and no need of any previous experience to use it. Simply go to official website, register and download 30 days trail version first and use it definitely you will love.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
We can apply so many effects to video while editing but not apply at a time because we have to add according to movie/short film requirement. Now im going to explain how to Blur the Part of a Video in camtasia very quickly. we use blur effect to hide section of text, pictures, videos. It is used at least once in a every movie so all editors has to know about this feature. Lets take a sample video and start applying on it.</div>
<div style="text-align: justify;">
<br /></div>
<b>Step 1:</b> Open the application.<br />
<br />
<b>Step 2:</b> Select clip bin tab and right click on the white space then select the import media.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFGPDqrS_5QYXQMuLWrt54cDiIiHrrL25JjQyHabyf8GGy5XnGgcgQ_G9_KLRNYhEqGtf_C3B-1SFjixA4klumx8pKPmmTXkyFhNIUFpyiJCYRgiZZiNhcQc9bhwrAYMJGll0JREKIGlY/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFGPDqrS_5QYXQMuLWrt54cDiIiHrrL25JjQyHabyf8GGy5XnGgcgQ_G9_KLRNYhEqGtf_C3B-1SFjixA4klumx8pKPmmTXkyFhNIUFpyiJCYRgiZZiNhcQc9bhwrAYMJGll0JREKIGlY/s640/1.png" width="640" /></a></div>
<a name='more'></a><br />
<b>Step 3:</b> Now select callouts tab there we can see shape rectangular box.<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM06hwA2_irRc2ikL5gyt8V0mws-FBuaYE5255xt8OloQWLv5v8MK7reuDWnxWfXK4t7rHR9itqRfQWfsgUlC_1nw57ZtA_jX91HupMH2lFHgdb2f2EiqA_NZvuJ_4Dd3X1uZWQ_QtsEk/s1600/2+%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM06hwA2_irRc2ikL5gyt8V0mws-FBuaYE5255xt8OloQWLv5v8MK7reuDWnxWfXK4t7rHR9itqRfQWfsgUlC_1nw57ZtA_jX91HupMH2lFHgdb2f2EiqA_NZvuJ_4Dd3X1uZWQ_QtsEk/s640/2+%25281%2529.png" width="640" /></a></div>
<br />
<b>Step 4:</b> Click on the down arrow and double click on the blur option in special category.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdFcz9ywgYEhTfnHQtnFtbFj_B-Qf_ZhDI02Wf3N_6VIb9AHmtNFLc13L3_kt4uVMgagaxk6oHyXWacI-imoD6q7XWFznkrrsbgSC4VtikX_UepfD1dn9fTV8igPPi604xkU4wFFSuk3s/s1600/3+%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdFcz9ywgYEhTfnHQtnFtbFj_B-Qf_ZhDI02Wf3N_6VIb9AHmtNFLc13L3_kt4uVMgagaxk6oHyXWacI-imoD6q7XWFznkrrsbgSC4VtikX_UepfD1dn9fTV8igPPi604xkU4wFFSuk3s/s640/3+%25281%2529.png" width="640" /></a></div>
<br />
<b>Step 5:</b> Now the blur effect appears in the right side screen.<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBzjoFgpIcvgcwVU9vrdcnfgmB2nqJpECbclphHMDs4x2sk_Rec5h7st3N4Hyh9qcmY3aXpPh7_dukAlw_I255zs9g0-Agc15MnHw1pg7l9FgOajDpzqJScIjFnD5RLG3oL-HIroMf9BI/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBzjoFgpIcvgcwVU9vrdcnfgmB2nqJpECbclphHMDs4x2sk_Rec5h7st3N4Hyh9qcmY3aXpPh7_dukAlw_I255zs9g0-Agc15MnHw1pg7l9FgOajDpzqJScIjFnD5RLG3oL-HIroMf9BI/s640/4.png" width="640" /></a></div>
<br />
<b>Step6:</b> Adjust the position where you want to add blur.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpDbQ42zk-YSgA7WWXi5IFJHuegTqrHnUGQh_K59slVFZfKl_JmzArTFT34V3dzqs3FGjSsl8gkJB3WcnoVETlU9dKkfVOCFJPOO8hc-w3hvuPKmh7wYfTgc541mvLH_purL2HyaEhfto/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpDbQ42zk-YSgA7WWXi5IFJHuegTqrHnUGQh_K59slVFZfKl_JmzArTFT34V3dzqs3FGjSsl8gkJB3WcnoVETlU9dKkfVOCFJPOO8hc-w3hvuPKmh7wYfTgc541mvLH_purL2HyaEhfto/s640/5.png" width="640" /></a></div>
<div>
<br /></div>
<div style="text-align: center;">
<span style="color: #990000;"><b>Watch Video Demo</b></span></div>
<div style="text-align: center;">
<span style="color: #990000;"><b><br /></b></span></div>
<div style="text-align: center;">
<span style="color: #990000;"><iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/bZQazMCdrj0" width="640"></iframe></span></div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com46tag:blogger.com,1999:blog-3534194497895437811.post-15073497175443742462015-08-13T18:46:00.000+05:302015-08-13T18:55:30.061+05:30Convert Seconds to Hours, Minutes and Seconds in Java<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Today i have written a program to convert seconds into hours, minutes and seconds in java. Any one can easily understand this program and implement in their web application without any difficulties. Definitely it is more usefull for those who are working on date/time related functionalites. Lets start understanding the example carefully.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnmKzBqY91QQXX08ZbLgj-IeA2iGatkXLQe02jwcsODVmCloRsX9_nd7eRW1HUmqrdr33tdMHSYl9ib3U3wdWeo5mkQR9SkoGLeDD7BbmAFQZDPo8lhajX6c1-mhSXGFQCNDsx9Z8rKoI/s1600/convet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="337" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnmKzBqY91QQXX08ZbLgj-IeA2iGatkXLQe02jwcsODVmCloRsX9_nd7eRW1HUmqrdr33tdMHSYl9ib3U3wdWeo5mkQR9SkoGLeDD7BbmAFQZDPo8lhajX6c1-mhSXGFQCNDsx9Z8rKoI/s400/convet.png" width="400" /></a></div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=h_3hg5NEFIw" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVF2hNSYMVuKrdIxPo6HvXMsLc9EyErd2e_JYKwYzwg8tywbUSC2dv3STYLIAipQVEt-lVtQom2JY2tr8jl_26wz7vQc0-NJMlso1eOsRGdXFSB-cT_SpbVNKRnveG8Wtubi_bJ_zyCSE/s1600/mynew.png" /></a></div>
<pre class="brush:java">package Examples;
public class ConvertSeconds2Time {
public static String getFormattedTimeString(long timeInSeconds) {
String timeStr = new String();
long sec_term = 1;
long min_term = 60 * sec_term;
long hour_term = 60 * min_term;
long result = Math.abs(timeInSeconds);
int hour = (int) (result / hour_term);
result = result % hour_term;
int min = (int) (result / min_term);
result = result % min_term;
int sec = (int) (result / sec_term);
if (timeInSeconds < 0) {
timeStr = "-";
}
if (hour > 0) {
timeStr += hour + "h ";
}
if (min > 0) {
timeStr += min + "m ";
}
if (sec > 0) {
timeStr += sec + "s ";
}
return timeStr;
}
public static void main(String args[]){
System.out.println(getFormattedTimeString(64000));
}
}
</pre>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com2tag:blogger.com,1999:blog-3534194497895437811.post-51038108195058554442015-08-13T18:00:00.000+05:302015-08-13T19:38:46.213+05:30Java 8 String Joiner Usage<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
In every programming language and in many applications developers have to put together list of values, frequently these are comma delimited lists but they can also incorporated with other string separators. Java SE 8 has two new utils for this one is StringJoiner class and another static method of string class name join which are newly introduced in Java 8 using these features we can easily concatenate or add strings and also contains so many uses. Now we are going to have discussion on this topics.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCncTaS7Hd_0-mrAN81wiybK7jlGXG_Qk_UYXRBPiHScb7xERhyjDPz77IZKh1N1F3ATxDT1i0VOucCn7FxfD5JfpF50WnWgVQ_pkvCKn2XkTSEAIrzC6Sz4LxasUbR2pp-vJVedrY-6w/s1600/logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="String Joiner" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCncTaS7Hd_0-mrAN81wiybK7jlGXG_Qk_UYXRBPiHScb7xERhyjDPz77IZKh1N1F3ATxDT1i0VOucCn7FxfD5JfpF50WnWgVQ_pkvCKn2XkTSEAIrzC6Sz4LxasUbR2pp-vJVedrY-6w/s400/logo.png" title="" width="400" /></a></div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=cN49SqWzfbc" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIucKmTV86iSV9lQz4ENI5rQEKWtaGAcd0XRCyYTofN4WzK6w4FH9pYO2n1sdb6UkpIx0VtJHZU9PuOuyEFMOzEtd32iVd4mjoyRO3yhh4g1jFaZfmY-Se8yv2s8E3QWqybnnw9BtIqTc/s1600/mynew.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Sample code:</b></div>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">package com.steve.jobs;</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">import java.util.StringJoiner;</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">public class StringJoinEx {</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>public static void main(String[] args) {</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>StringJoinEx sjEx = new StringJoinEx();</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>sjEx.go();</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>private void go() {</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>StringJoiner sj1 = new StringJoiner(",","{","}");</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>sj1.add("Steve Jobs");</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>sj1.add("Warren Buffet");</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>sj1.add("Dovincy");</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>System.out.println("WOW:"+sj1.toString());</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>StringJoiner sj2 = new StringJoiner("","{","}");</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>System.out.println("wow:"+sj2.toString());</span></div>
<div class="separator" style="clear: both;">
<span class="Apple-tab-span" style="white-space: pre;"><span style="color: #990000;"> </span></span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>sj2.setEmptyValue("");</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>System.out.println("Ouch.. Where are my curly braces? "+sj2.toString());</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>System.out.println("Thats how setEmptyValue method works.");<span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">}</span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Output:</div>
<div class="separator" style="clear: both;">
WOW:{Steve Jobs,Warren Buffet,Dovincy}</div>
<div class="separator" style="clear: both;">
wow:{}</div>
<div class="separator" style="clear: both;">
Ouch.. Where are my curly braces? </div>
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both;">
Thats how setEmptyValue method works.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
As we see in the output constructor allows strings to be separated by commas with prefix and suffix.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Then we represented displaying of empty string as {}.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
When we use method setEmptyValue method it returns an empty string without any prefix and suffix.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
We left with one method named merge().</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Code Snippet:</b></div>
<div class="separator" style="clear: both;">
<b><br /></b></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">StringJoiner sj1 = new StringJoiner(",","{","}");</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">sj1.add("Steve Jobs");</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">sj1.add("Warren Buffet");</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">sj1.add("Dovincy");</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">System.out.println("First String: "+sj1.toString());</span></div>
<div class="separator" style="clear: both;">
<span class="Apple-tab-span" style="white-space: pre;"><span style="color: #990000;"> </span></span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">StringJoiner sj2 = new StringJoiner("","[","]");</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">System.out.println("Second String: "+sj2);</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">sj2.merge(sj1);</span></div>
<div class="separator" style="clear: both;">
<span class="Apple-tab-span" style="white-space: pre;"><span style="color: #990000;"> </span></span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">System.out.println("Second String: "+sj2);</span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Output:</div>
<div class="separator" style="clear: both;">
First String: {Steve Jobs,Warren Buffet,Dovincy}</div>
<div class="separator" style="clear: both;">
Second String: []</div>
<div class="separator" style="clear: both;">
Second String: [Steve Jobs,Warren Buffet,Dovincy]</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Here in this case first string is added to the second string ignoring its prefix and suffix.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Another nice thing is that string joiner can be used directly from the string class using join method lets see the example.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Code Snippet:</b></div>
<div class="separator" style="clear: both;">
<b><br /></b></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">String items = new String.join(",","fridge","washing machine","oven");</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">System.out.println(items);</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">String[] states = {" Andhra Pradesh"," Assam","Bihar"};</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">String stateslist = new String.join(",",states);</span></div>
<div class="separator" style="clear: both;">
<span style="color: #990000;">System.out.println(</span><span style="color: #990000;">stateslist</span><span style="color: #990000;">);</span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
This is one thing that we need to notice.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Previously we used '+' operator, StringBuffer and StringBuilder to add two strings. We can use Perf4j which of the above methods performs better in which scenario.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Note:</b> Jprofiler is a performance tool in industry standard. </div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com1tag:blogger.com,1999:blog-3534194497895437811.post-90418461897738653072015-08-13T16:27:00.000+05:302015-08-13T18:55:57.435+05:30How to Move Multi Select Dropdown Options using Up and Down Buttons<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Now we are going to learn how to move multi select dropdown options using up and down buttons. I used jquery and bootstrap technologies. Bootstrap is used for only designing the select dropdown values, up/down buttons and adding icons. If you don't want design you can remove it and we can also use javascript to create these functionality but jquery makes little bit easy. Lets see the example and video demo.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6CRkO7dgpZYt4fqYJ4BtkEIWOKETAHu9AvJRLUkaAYr5noDHao7vEtQ64l_jpvgSbdolrtSaiNpYy5Ct241cCGhVLzm4OXJZfrknZuliy2aInh6CLvRi4lZRveLn6AEYZRPIpZ-PSm5E/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6CRkO7dgpZYt4fqYJ4BtkEIWOKETAHu9AvJRLUkaAYr5noDHao7vEtQ64l_jpvgSbdolrtSaiNpYy5Ct241cCGhVLzm4OXJZfrknZuliy2aInh6CLvRi4lZRveLn6AEYZRPIpZ-PSm5E/s640/Capture.PNG" width="640" /></a></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=FrRZs2xXf7o" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXzvfXIc6fRzesciX5tYCxrs_JgCzHk0Wx9wzsY2S4XDKsOUPcj9EZbdSUAYAf2piyxo0vIc8sHENuIbga5ZJBJ5dPPtKuVqCA_r8exlscK44MbaO612654fnjT0ORzR1xokV3DuByZSw/s1600/mynew.png" /></a></div>
<pre class="brush:html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Multiple Select Dropdown Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/
css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/
bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="form-group" style="padding-top:150px">
<label class="control-label col-sm-2">Number List :</label>
<div class="col-sm-5">
<select multiple class="form-control input-sm" name="reorderNumbers"
id="reorderNumbers" style="height:200px">
<option value="1" >one</option>
<option value="2" >two</option>
<option value="3" >three</option>
<option value="4" >four</option>
<option value="5" >five</option>
<option value="6" >six</option>
</select>
</div>
</div>
<div style="margin-bottom:20px;margin-top:50px">
<button type="button" class="btn btn-default reorder" id="Up">
<span class="glyphicon glyphicon-chevron-up"></span>
</button>
</div>
<div>
<button type="button" class="btn btn-default reorder" id="Down">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
</div>
</div>
<script>
$(document).ready(function(){
$('.reorder').click(function(){
var $options = $('#reorderNumbers option:selected'),
$this = $(this);
if($options.length){
($this.attr("id") == 'Up') ? $options.first().prev().before($options)
: $options.last().next().after($options);
}
});
});
</script>
</body>
</html>
</pre>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com0tag:blogger.com,1999:blog-3534194497895437811.post-36169538641429864932015-03-15T18:48:00.000+05:302015-03-15T18:48:47.765+05:30How to Fix Binary logging Error in MySQL<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
While executing the show binary logs command i got one error message “Error Code: 1381. You are not using binary logging”. To fix this you can simply add the “log-bin=mysql-bin” text in your my.ini file. But the main problem is finding the location of my.ini configuration file ”. I searched a lot but found different solutions due to this i totally confused. Finally did some analysis and fixed the error. I checked my solution in my pc(Windows 7), laptop(Win 8)worked fine. So that i decided to share with you along with video demo. This is the exact solution those who are getting this issue. Just by following the below procedure you can easily fix it.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvmXeD4gvNmpuD6haB4NDF13clUIJ7k1driFAjsypon7K0x84hC3hixC6la_O7eByIOLQw5tv9q9btNrQIy4O6pch8JAeeEeXlEifHAE4Tno26sD9gpLEz-EFUm9nA8DpyiavClsYEp4/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvmXeD4gvNmpuD6haB4NDF13clUIJ7k1driFAjsypon7K0x84hC3hixC6la_O7eByIOLQw5tv9q9btNrQIy4O6pch8JAeeEeXlEifHAE4Tno26sD9gpLEz-EFUm9nA8DpyiavClsYEp4/s1600/1.jpg" height="360" width="640" /></a></div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=xrTBFZyn-Bk" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXzvfXIc6fRzesciX5tYCxrs_JgCzHk0Wx9wzsY2S4XDKsOUPcj9EZbdSUAYAf2piyxo0vIc8sHENuIbga5ZJBJ5dPPtKuVqCA_r8exlscK44MbaO612654fnjT0ORzR1xokV3DuByZSw/s1600/mynew.png" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Step 1: Open Run and type services.msc</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Step 2: Select mysql55 service (Service name is depends upon the MySQL server version) and double click on it. Now we can see the text “path to executable:” there we can find the exact location of the my.ini file. The path is different from one operating system to another. Look the below screenshot to get the clear idea.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-6tiN2NVxqTMNRLD-hBezUPcb1Hmm7driAbSAU8JMZokn66hkOd2aSZDMWv-kj_-KalfI_Nhv4ObcvI0V4FmSTSEyv8MHLF0BKrNTYXOfTOQB7cmclbhj4vyo0ER2ZXhBOt8BjHe1H9U/s1600/1+(1).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-6tiN2NVxqTMNRLD-hBezUPcb1Hmm7driAbSAU8JMZokn66hkOd2aSZDMWv-kj_-KalfI_Nhv4ObcvI0V4FmSTSEyv8MHLF0BKrNTYXOfTOQB7cmclbhj4vyo0ER2ZXhBOt8BjHe1H9U/s1600/1+(1).png" height="377" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Step 3: By default ProgramData is in hidden so again go to run and type control folders click view and tick the show hidden files option.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Step 4: Open the my.ini file and add “log-bin=mysql-bin” below the [mysqld].</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Step 5: Restart the Service. Go and check now your issue is fixed.</div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com0tag:blogger.com,1999:blog-3534194497895437811.post-80025831850754150532015-03-01T17:36:00.001+05:302015-03-01T17:46:31.133+05:30Upload Image File Using Jsp/Servlet<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
In this tutorial we are going to look at how to enable your user to upload files to your web application using Servlet/JSP. File uploading is most common feature in every web application for example uploading the profile picture, cover picture etc. We can observe these while applying government jobs and in social networking sites. I used JSP technology for front end purpose and servlet as backend both are related to java programming languages. First we will see how to create dynamic project in eclipse and creating servlet and web.xml in eclipse IDE.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXvW39O6-eQaNLWVlFy1nC7rtiTOfUoQvlMQwa6eulRDCR7v1-XlewDEjQapukXnz_KSw4_qKBw74DGNXTdKHJTFrqWvoTqmT76M76ciCR4CbdYLucvsACPRITI1ht2buwqflhj9sYX18/s1600/maxresdefault+copy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Image File Uploading" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXvW39O6-eQaNLWVlFy1nC7rtiTOfUoQvlMQwa6eulRDCR7v1-XlewDEjQapukXnz_KSw4_qKBw74DGNXTdKHJTFrqWvoTqmT76M76ciCR4CbdYLucvsACPRITI1ht2buwqflhj9sYX18/s1600/maxresdefault+copy.png" height="321" title="" width="640" /></a></div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=JJFvsBV2C84" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQA55kn2BuF-bcaasI9WJ6ctSyZNWlK9dQd6OqJCmQIDdWnyE7cXq2a3ycLQXpqgW6w6YrxKhSzito7Ny5GUP1Rrh5VnXxpcmbtGRaBRmLH_FAA7aw6O9WhMQSyV845WrfJeA27opC7-Q/s1600/mynew.png" /></a></div>
<div style="text-align: justify;">
Step 1: Go to File menu -> New -> Dynamic Web Project</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtOmTz9BZ3NYeAB5cPQernEg0g5syXy1R2R9XK8gSSJUZirj9ftO-jeaZvHOE2tlOVkH30Y45IAFea__5ff5mhLjDtiL_S414yG6IiT25A2W9MNV3IPNr-GAQGO-Uwt1gzpwEMv529keU/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtOmTz9BZ3NYeAB5cPQernEg0g5syXy1R2R9XK8gSSJUZirj9ftO-jeaZvHOE2tlOVkH30Y45IAFea__5ff5mhLjDtiL_S414yG6IiT25A2W9MNV3IPNr-GAQGO-Uwt1gzpwEMv529keU/s1600/1.png" height="339" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Step 2: Sometimes web.xml will not generate while creating project so we have to create manually.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdAAaZDjmjV14rp4LrhpBs6locN8jvOziZ3_ExzFUa9qJzppTmJLZlwfj-Jb0JqojFrqdNqrp-rfQZJQqu5NRCqGaHmp0A6_73gaHyzGx1JcMLxvBDMEvzw-7f8U9O0Uyx1OoF63qLlNI/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdAAaZDjmjV14rp4LrhpBs6locN8jvOziZ3_ExzFUa9qJzppTmJLZlwfj-Jb0JqojFrqdNqrp-rfQZJQqu5NRCqGaHmp0A6_73gaHyzGx1JcMLxvBDMEvzw-7f8U9O0Uyx1OoF63qLlNI/s1600/2.png" height="340" width="640" /></a></div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVNRzJJLjFbZb3HIYaSO8UUmzfHiHO1gyVZMWcE6YQ8UdDMwWvaXrFWwhlrsQn7OpIUpoGPIfxXVR5oZMLRTxNR12LaNPgk_ktj0r82kYTyamkqAlK7z3F0RK_WyOTC-VXcg_el4rSARI/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVNRzJJLjFbZb3HIYaSO8UUmzfHiHO1gyVZMWcE6YQ8UdDMwWvaXrFWwhlrsQn7OpIUpoGPIfxXVR5oZMLRTxNR12LaNPgk_ktj0r82kYTyamkqAlK7z3F0RK_WyOTC-VXcg_el4rSARI/s1600/4.png" height="372" width="640" /></a></div>
<br /></div>
<div style="text-align: justify;">
Step 3 : Create the upload.jsp file and in that take a form tag with action and encType=”multipart/</div>
<div style="text-align: justify;">
form-data” attributes. If you want to upload binary file we should encTypeattribute to form tag. Using this we can upload binary stuff and in form include two input tags one for to browse the file and another to submit (upload) the file. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<pre class="brush:html"><%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>File Uploading using Java</title>
</head>
<body>
<form method="post" action="${ pageContext.request.contextPath}/Uploader"
encType="multipart/form-data">
<input type="file" name="file" value="select images..."/>
<input type="submit" value="start upload"/>
</form>
</body>
</html>
</pre>
</div>
<br />
<div style="text-align: justify;">
Step 4: To Create servlet class in eclipse right click on src -> new -> other -> web -> servlet. Now Provide the servlet name and package name.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0IkxEMjyUreWnoQnmEIrKtanzyIN-6H1WeqKUWZh76D-96k_uL6GriEVvudP4AiC08BP9B0wVRu7-cTzv4Wk4kZ97Y_8hTPjadiRYaz27pT3Do2xQJrpak2jIClqqHqqr1-mdcAGwE5I/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0IkxEMjyUreWnoQnmEIrKtanzyIN-6H1WeqKUWZh76D-96k_uL6GriEVvudP4AiC08BP9B0wVRu7-cTzv4Wk4kZ97Y_8hTPjadiRYaz27pT3Do2xQJrpak2jIClqqHqqr1-mdcAGwE5I/s1600/3.png" height="340" width="640" /></a></div>
<br />
<div>
<pre class="brush:java">package Demo;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.tomcat.util.http.fileupload.FileItem;
import org.apache.tomcat.util.http.fileupload.FileItemFactory;
import org.apache.tomcat.util.http.fileupload.FileUploadException;
import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;
import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;
/**
* Servlet implementation class Uploader
*/
@WebServlet("/Uploader")
public class Uploader extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
if(!ServletFileUpload.isMultipartContent(request)){
out.println("Nothing to upload");
return;
}
FileItemFactory itemfactory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(itemfactory);
try{
List<fileitem> items = upload.parseRequest(request);
for(FileItem item:items){
String contentType = item.getContentType();
if(!contentType.equals("image/png")){
out.println("only png format image files supported");
continue;
}
File uploadDir = new File("F:\\UploadedFiles");
File file = File.createTempFile("img",".png",uploadDir);
item.write(file);
out.println("File Saved Successfully");
}
}
catch(FileUploadException e){
out.println("upload fail");
}
catch(Exception ex){
out.println("can't save");
}
}
}
</fileitem></pre>
</div>
Step 5: Finally add the tomcat server and run the code. If you face any problems please feel free to put a comment.</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com31tag:blogger.com,1999:blog-3534194497895437811.post-38916999749152171022015-02-17T19:30:00.000+05:302015-02-18T15:05:47.835+05:30HTML5 Canvas API Examples<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
One of the goals of HTML5 is to make the web completely independent of plugins such as Silverlight, Flash or java applets. To handle this HTML5 introduced the canvas API to create own graphics in our websites with help of JavaScript. It creates a drawing surface a blank area with in the browser that area is marked of in XY coordinates. In this tutorial i want to explain how to create different shapes using canvas element easily with examples. Lets Start with rectangles</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The rectangles are fully supported by the canvas tag and it has three set of properties like stroke, fill, clear. In this sample ex i have created canvas it has blue outline and filled with green background color and inside the canvas i just drawn the sample shape rectangle and filled with light green. Please look the example</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnDjRUP7m0jXau36og-URXHWn2C2IqK7J98dd7WEUjkWh1kSJ2qW9FBIvP69PDipvhmE0MyU7TzL44SZdr1wKtkyQ0i0tSPuAu6ZOgmlXeP6O3aM5W7hMXMs0khu9iXapT2heYT71v5w0/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnDjRUP7m0jXau36og-URXHWn2C2IqK7J98dd7WEUjkWh1kSJ2qW9FBIvP69PDipvhmE0MyU7TzL44SZdr1wKtkyQ0i0tSPuAu6ZOgmlXeP6O3aM5W7hMXMs0khu9iXapT2heYT71v5w0/s1600/Capture.PNG" height="218" width="320" /></a></div>
<a name='more'></a><pre class="brush:html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas Tutorial</title>
<style>
body {
font-family: arial, verdana;
font-size: 12px;
}
canvas {
border: 2px solid darkblue;
background-color: lightgreen;
}
</style>
</head>
<body>
<H1>Basic Example</H1>
<canvas id="myCanvas">
Sorry, your browser doesn't support canvas.
</canvas>
<script>
// Get the canvas element and its drawing context.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// Draw a simple filled rectangle.
var edge = 20;
context.fillStyle = "rgba(0, 0, 255, 0.25)";
//Another way to define fill style
//context.fillStyle = "grey";
context.fillRect(20, 20, 260, 110);
</script>
</body>
</html></pre>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com3tag:blogger.com,1999:blog-3534194497895437811.post-13081762508865408772015-02-14T18:27:00.000+05:302015-03-01T14:20:30.483+05:30How to Make Stamp Size Photos in Photoshop Easily<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Now we are going to see how to make stamp size photo in Photoshop. By following this technique you can easily create a stamp size photo to any one of your family members, friends or relatives.Initially I will show how to set 16 photos in one maxi by doing this we can get 16 stamp size photoswith one maxi size photo and printing cost is less than 10 rupees so it is not a big matter. Just you need a little bit Photoshop knowledge and we can use any version of Photoshop. Start following step by step procedure as shown below</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH8l12yMYo2RHuHfajpZna4Xg9hMG8HuJlvrBme599841KB-bEDc-Xs9gXlaUxmX3c9BLnLf9ROOSrvBYLrspfcrfrj32xkpIqw1ssO90Ch8eNg7ModYrhdIT1nNbZ_pwfa0eJapuL2rI/s1600/stampsize.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH8l12yMYo2RHuHfajpZna4Xg9hMG8HuJlvrBme599841KB-bEDc-Xs9gXlaUxmX3c9BLnLf9ROOSrvBYLrspfcrfrj32xkpIqw1ssO90Ch8eNg7ModYrhdIT1nNbZ_pwfa0eJapuL2rI/s1600/stampsize.jpg" height="425" width="640" /></a></div>
<a name='more'></a><span style="text-align: justify;">Step 1: Open the photoshop and go to File -> New </span><br />
<div style="text-align: justify;">
Give width 6 inches, height 4 inches and resolution 300 Pixels/inch</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2DQG_XIwKQo5BAzFUHidxxdocyRwATP57W1R-MYezZvVy1kpl0dvlw-qazHvRVdtZxHmWFOEdd82L6V1xUNYQmNWinY4W7EyA6k8RYpO4J_hRWPu9oFglWjwuPE_xfe5IFJJKGE9ZEEc/s1600/Screenshot+(33).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2DQG_XIwKQo5BAzFUHidxxdocyRwATP57W1R-MYezZvVy1kpl0dvlw-qazHvRVdtZxHmWFOEdd82L6V1xUNYQmNWinY4W7EyA6k8RYpO4J_hRWPu9oFglWjwuPE_xfe5IFJJKGE9ZEEc/s1600/Screenshot+(33).png" height="247" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: justify;">
Step 2: Now take a photo which you want to create stamp size. Width : 1.5cm, height : 2.0cm Resolution 300px</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge92uKQZ_KagDtJMhlH-cGO9TDje3nULxEpVZdZsHPHLtQhsYvTLr69bH0IxQdYi3aX8fmAvQNWVz-4QxhN8o2gSVErOS2FzhM73NB6fzsatx1oPSdmfi8tc3oEeqTIVfo9kfZWR69R38/s1600/Screenshot+(34).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge92uKQZ_KagDtJMhlH-cGO9TDje3nULxEpVZdZsHPHLtQhsYvTLr69bH0IxQdYi3aX8fmAvQNWVz-4QxhN8o2gSVErOS2FzhM73NB6fzsatx1oPSdmfi8tc3oEeqTIVfo9kfZWR69R38/s1600/Screenshot+(34).png" height="72" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj84HwD_uh3ybobOs9mNVkQbtHrF_1GmYWZktnFrdwTCQb7u6Oa-rWzQ9F05p6B-O9EtO_jWS39dszwAGpmGb3E2RZcZLFJHONIn8A8OkD7q-stfCx18P0_t6mAQMK0DzZrjje-TBLdFns/s1600/11+copy.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="stamp size photo" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj84HwD_uh3ybobOs9mNVkQbtHrF_1GmYWZktnFrdwTCQb7u6Oa-rWzQ9F05p6B-O9EtO_jWS39dszwAGpmGb3E2RZcZLFJHONIn8A8OkD7q-stfCx18P0_t6mAQMK0DzZrjje-TBLdFns/s1600/11+copy.jpg" height="200" title="" width="150" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: justify;">
<div>
<b>Step 3:</b> Take the crop tool (Shortcut CTRL + c ) and crop the pic.</div>
<div>
<br /></div>
<div>
<b>Step 4:</b> Now drag the stamp size pic into maxi size image and arrange as 4 rows and 8 columns = 16pics</div>
<div>
<br /></div>
<div>
<b>Step 5:</b> Finally save as .jpg format </div>
<div>
<br /></div>
<div>
Hope you understand and Thank for visiting StudywithDemo.<br />
<br />
<div style="text-align: center;">
<span style="color: #cc0000;"><b>Watch Video Demo</b></span></div>
</div>
<div style="text-align: center;">
<br />
<iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/AF-KMbToKKM" width="640"></iframe></div>
</div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com66tag:blogger.com,1999:blog-3534194497895437811.post-90956764691421412632015-02-10T17:08:00.000+05:302015-02-10T18:02:51.416+05:30Spring 4 MVC Java Configuration Example<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
In this tutorial i want to explain about how to do spring 4 MVC Java Configuration with example. Java configuration doesn’t require an appContext.xml or even a servlet-config.xml we can do all our configurations in java classes by using @Configuration and @EnableWebMVC annotations. Spring provided set of annotations for various Configuration elements like component-scan, interceptors, handlers, formatters, converts, etc. One more think in this example I also covered WebAppInitializer class using this we can run the web application without web.xml.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
First setup project: There are multiple ways to setup a project in eclipse or spring STS all are previous methods you used will works fine. There is also option to use spring web project inside our IDE and more convenient way using spring STS 3.5+ and spring 4</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp9SRsTmBm2QvdkxxjVkQKUZW-cMiBCHAkb8UDWT-YGJwwB3NhbABIDewDVfzHpMTkSc6IJhxGgn6sJqTTuYEoUzCtpn6gal7NA1j0g2-rNqtqLVeUV6czAvYHvQvgZb-wxsLxXllUhKw/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp9SRsTmBm2QvdkxxjVkQKUZW-cMiBCHAkb8UDWT-YGJwwB3NhbABIDewDVfzHpMTkSc6IJhxGgn6sJqTTuYEoUzCtpn6gal7NA1j0g2-rNqtqLVeUV6czAvYHvQvgZb-wxsLxXllUhKw/s1600/Untitled.png" height="320" width="211" /></a></div>
</div>
<div style="text-align: justify;">
Step 1: Open the spring STS and go to the package explorer right click on it select new-> other and go down to Spring and Spring Starter Project then click next provide the required details check the web and finally click finish</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpkAsMsDby3HO1bMv0Jq50QkQYbU4dCaSSLlTH2HsqXwoBVKMY8MyipkrXYddC8X_8CwOzjZSLO5YcZjOIeoTA2Bx8BCyg-zqu4ZQsPh78nIbX8ntE49vKByAdaPsIGK5QH_Wm76SOAUM/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpkAsMsDby3HO1bMv0Jq50QkQYbU4dCaSSLlTH2HsqXwoBVKMY8MyipkrXYddC8X_8CwOzjZSLO5YcZjOIeoTA2Bx8BCyg-zqu4ZQsPh78nIbX8ntE49vKByAdaPsIGK5QH_Wm76SOAUM/s1600/3.png" height="342" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisGxivB43W65yL8SIlmtAR6o9eplg_QBpkp2lEwbTSNqoGTLE-amwsWH3vcDgaO5z0zLHE7DNdO0H6JNw6U5grMDayCMo5kkurNRo0yiGqY3_ayoNUX1rLl02ewDkl6QKfDWOrpZbNa14/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisGxivB43W65yL8SIlmtAR6o9eplg_QBpkp2lEwbTSNqoGTLE-amwsWH3vcDgaO5z0zLHE7DNdO0H6JNw6U5grMDayCMo5kkurNRo0yiGqY3_ayoNUX1rLl02ewDkl6QKfDWOrpZbNa14/s1600/1.png" height="358" width="640" /></a></div>
<a name='more'></a>Provide the required details project name, type, packaging, java version, language, and boot version.<br />
<br />
<b>Note: </b>Some times we get the issue with boot version if you face any problem please go to pom.xml file change the version to 1.0.2 manually<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGbWZi-gxpeMbenb0DNxhMKOjpMpOphJue1PBJkxxDn2_ZpQzS6esJCH2sRc00_34piRAKOLT7Mm-ua2-kjv4wwGslmZTXYpS5cIv1AoPz6F_3VZG5h_90E61nJHYdLzM3xjz29R2yGvo/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGbWZi-gxpeMbenb0DNxhMKOjpMpOphJue1PBJkxxDn2_ZpQzS6esJCH2sRc00_34piRAKOLT7Mm-ua2-kjv4wwGslmZTXYpS5cIv1AoPz6F_3VZG5h_90E61nJHYdLzM3xjz29R2yGvo/s1600/2.png" height="356" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Now will go to learn how java configuration is different from xml configuration.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div>
<b>Create a WebConfig.java</b></div>
<div>
<br /></div>
<div>
Now right click on com.studywithdemo site select create a class and named as WebConfig.java go head and click finish. I have added Configuration and EnableWebMVC annotations here once check it. Most of the configuration is done using two annotations.</div>
<div>
<br /></div>
<div>
EnableWebMVC: The EnableWebMVC is only used for java configuration of spring MVC web apps</div>
<div>
<br /></div>
<div>
Component scan in xml: It is used to scan our base packages<br />
<br /></div>
<div>
<pre class="brush:java">package com.studywithdemo;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "com.studywithdemo")
public class WebConfig {
@Bean
public InternalResourceViewResolver getInternalResourceViewResolver() {
InternalResourceViewResolver resolver = new InternalResourceViewResolver();
resolver.setPrefix("/WEB-INF/");
return resolver;
}
}
</pre>
</div>
<div>
<b>Using WebAppInitializer.java instead of web.xml</b></div>
<div>
<b><br /></b></div>
<div>
The servlet 3+ specification negates the need for having web.xml.</div>
<div>
<br /></div>
<div>
<pre class="brush:java">package com.studywithdemo;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRegistration;
import org.springframework.web.WebApplicationInitializer;
import org.springframework.web.context.ContextLoaderListener;
import org.springframework.web.context.WebApplicationContext;
import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;
import org.springframework.web.servlet.DispatcherServlet;
public class WebAppInitializer implements WebApplicationInitializer {
@Override
public void onStartup(ServletContext servletContext) throws ServletException {
WebApplicationContext context = getContext();
servletContext.addListener(new ContextLoaderListener(context));
ServletRegistration.Dynamic dispatcher = servletContext.addServlet("DispatcherServlet",
new DispatcherServlet(context));
dispatcher.setLoadOnStartup(1);
dispatcher.addMapping("*.html");
}
private AnnotationConfigWebApplicationContext getContext() {
AnnotationConfigWebApplicationContext context = new AnnotationConfigWebApplicationContext();
context.setConfigLocation("com.studywithdemo.WebConfig");
return context;
}
}
</pre>
There is no changes in controller and view pages it works as usually like previous versions.
<br />
<br /></div>
<div>
<b>WishController.java</b></div>
<div>
<pre class="brush:java">package com.studywithdemo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class WishController {
@RequestMapping(value = "/wishes")
public String sayHello(Model model) {
model.addAttribute("wishes", "Thank You For Visiting StudywithDemo");
return "wish.jsp";
}
}
</pre>
</div>
<div>
<b>wish.jsp</b></div>
<div>
<pre class="brush:java"><%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello</title>
</head>
<body>
<h1>${wishes}</h1>
</body>
</html><b>
</b></pre>
</div>
<div>
<b>Note: </b>please observe the <b style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">WebConfig.java</b> i also configured View Resolver in java class. </div>
</div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com0tag:blogger.com,1999:blog-3534194497895437811.post-7587895554496129372015-02-05T12:40:00.002+05:302015-02-10T09:47:23.591+05:30Customizing the HTML5 Video and Audio Controls<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: justify;">
One of the most powerful feature of HTML5 is supports for audio and video tags this feature allows you to reduce the third party plug-ins like silverlight and flash. HTML5 programmers has really done nice job by developing these tags. These video and audio tags contains predefined controls but I want to develop custom controls using javascript according to real time requirements. Creating custom video play and pause buttons are very easy when compare to creating stop, forward, reverse buttons and also developed the custom audio controls to increase and decrease the volume. One more think can also develop same code in jquery. Lets begin</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp3c68Uh6xMAPVppZHzyONw0EUDg4VsXPMO0UZMiogsCv0eItAtK2ru0cy5h3sBIxa0k6GejQUxwRxfrxMnrXCwKtrvaIYeVqnSrGTbxx4hp6JBUaFXYCSa4jgr3TXyBZAe-iQhEEugrk/s1600/video+and+audio.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp3c68Uh6xMAPVppZHzyONw0EUDg4VsXPMO0UZMiogsCv0eItAtK2ru0cy5h3sBIxa0k6GejQUxwRxfrxMnrXCwKtrvaIYeVqnSrGTbxx4hp6JBUaFXYCSa4jgr3TXyBZAe-iQhEEugrk/s1600/video+and+audio.png" height="453" width="640" /></a></div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=jwHDCOuCnzo" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw8ZhNQxBvep8mFLQWttBwpSNCqi3DEF7MG6L7M4NYBDQDZWqTRe-_Q9zQlX6NpVohikvQin8oOvvOuO2D5swkIlPobLUc-eqs0rhDy-XlziwT4Awo01j11zZem15yeNEOcCGY_wDrL2Y/s1600/mynew.png" /></a></div>
<b>Custom Video controls Using JavaScript</b><br />
<b><br /></b>
<span style="text-align: justify;">The supported video formats of HTML5 video tags are MP4, Quick Time, AVI, OGG. In these MP4 is most popular and most of the video editing tools and mobile devices supports MP4 format. Quick time is for mac users and we can also use on any platform. OGG is a new one compressed file format which maintains the quality of MP4. Do not use Flash (SWF).</span><br />
<div style="text-align: justify;">
<br />
Browser Support<br />
<ul>
<li>No standard across browsers</li>
<li>IE and Safari currently only support MP4</li>
<li>MP4 is not free. There are parent/license issues.</li>
<li>WEBM the current alternative</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD0DFNpRSFkwiCzI43eLWwtqIf0tlNQM39os5sgc7P7R7uE9YLOj49oqLrgjmV6JqcGC1u7pxkWtUcnMkJIv4EJ5OXEyBuQ2dPvpd159gVRGmXUu0NZXQv9oeM8HbOyc4yVwaXYyOWToQ/s1600/vlcsnap-2015-02-04-21h59m11s61.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD0DFNpRSFkwiCzI43eLWwtqIf0tlNQM39os5sgc7P7R7uE9YLOj49oqLrgjmV6JqcGC1u7pxkWtUcnMkJIv4EJ5OXEyBuQ2dPvpd159gVRGmXUu0NZXQv9oeM8HbOyc4yVwaXYyOWToQ/s1600/vlcsnap-2015-02-04-21h59m11s61.png" height="148" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<pre class="brush:html"><!doctype html>
<html>
<head>
</head>
<body>
<h1>Custom Video Controls Example</h1>
<video id="video" width=320 height=240 poster="media/poster.jpg"
onloadedmetadata="setDuration()" ontimeupdate="update()">
<source src="media/test-video.theora.ogv" type="video/ogg" />
<source src="media/test-video.mp4" type="video/mp4" />
this text should only appear when your browser does not support
video playback. </video>
<button type="button" onClick="playVideo()">play</button>
<button type="button" onClick="pauseVideo()">pause</button>
<button type="button" onClick="stopVideo()">stop</button>
<button type="button" onClick="forwardVideo()">forward</button>
<button type="button" onClick="reverseVideo()">reverse</button>
<p>total duration <span id="totalTime">x</span> seconds<br>
current time <span id="timeText">x</span> seconds
</p>
<div id="totalTime"></div>
<script>
function playVideo(){
document.getElementById("video").play();
}
function pauseVideo(){
document.getElementById("video").pause();function reverseVideo(){
document.getElementById("video").currentTime--;
}
}
function forwardVideo(){
document.getElementById("video").currentTime++;
}
function stopVideo(){
document.getElementById("video").pause();
document.getElementById("video").currentTime=0;
}
function setDuration(){
document.getElementById("totalTime").innerHTML=
document.getElementById("video").duration;
}
function update(){
document.getElementById("timeText").innerHTML=
document.getElementById("video").currentTime;
}
</script>
</body>
</html>
</pre>
<div>
<br /></div>
</div>
<b>Custom Audio Controls Using JavaScript</b><br />
<b><br /></b>
The supported audio formats of HMTL5 audio tags are wav, mp3, AIFF, OGG. In these wav is editable format used in audio editing. MP3 everyone knows, AIFF is very popular for mac users and OOG is new format I’m not familiar this. Don’t use iTunes file format.<br />
<br />
Browser Support<br />
<ul>
<li>No one standard across browsers</li>
<li>IE and Safari currently only support MP3</li>
<li>MP3 is not free. There are parent/license issues.</li>
<li>Other codecs: Vorbis (The audio codec in the OGG container) supports Firefox and Opera</li>
</ul>
<div>
<pre class="brush:html"><!doctype html>
<html>
<head>
</head>
<body>
<h1>Custom Audio Controls Example</h1>
<audio controls id="audio">
<source src="media/audio_sample.ogg" type="audio/ogg" />
<source src="media/audio_sample.mp3" type="audio/mpeg" />
Your browser does not support the audio element. </audio>
<br/>
<p>current volume <span id="volume">xx</span></p>
<button type="button" onClick="volumeDown()">volume down</button>
<button type="button" onClick="volumeUp()">volume up</button>
<script>
audio = document.getElementById("audio");
document.getElementById("volume").innerHTML=audio.volume;
function volumeDown(){
audio.volume-=.1
document.getElementById("volume").innerHTML=audio.volume;
}
function volumeUp(){
audio.volume+=.1
document.getElementById("volume").innerHTML=audio.volume;
}
</script>
</body>
</html>
</pre>
</div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com2tag:blogger.com,1999:blog-3534194497895437811.post-364764870769042382015-02-03T12:43:00.000+05:302015-02-10T09:46:39.656+05:30How to Access HTML5 Data Attributes using JQuery<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
In this tutorial we will talk about different jquery techniques and various approaches to access the HTML5 data-attributes data. Jquery contains data() and attr() methods by using this we will see how to set and get HTML5 data-attributes data. HTML5 has brought lot of interesting changes into html one of the item that is very helpful in client side programming is data-* Attributes provide a way to store custom data on elements.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Jquery easily read and write data using two approaches but there are some differences between them here we can except different outputs so observe the examples carefully.</div>
<div style="text-align: justify;">
<br />
<b>Example</b><br />
<br /></div>
<div style="text-align: justify;">
<pre class="brush:html"><!DOCTYPE html>
<html>
<head>
<title>Accessing HTML5 Data-* Attributes Example</title>
</head>
<body>
<div id="attendanceList"
data-name="faruk"
data-age="24"
data-gender="male"
data-attended ="true"
data-object='{"name": "faruk", "gender":"male", "age": 24, "attended": true}'>
Today Faruk Attended to Class
</div>
<h1>How to set /get data-* values using attr() function</h1>
<div id="attrOutput"></div>
<h1>How to set /get data-* values using data() function</h1>
<div id="dataOutput"></div>
<script src="jquery.min.js"></script>
<script>
var $attendanceList = $("#attendanceList ");
var $attrOutput = $("#attrOutput");
var getName = $attendanceList.attr("data-name");
var getAge = $attendanceList.attr("data-age");
var getGender = $attendanceList.attr("data-gender");
var addingOneToAge = getAge + 1;
var getAttended = $attendanceList.attr("data-attended");
var getObject = $attendanceList.attr("data-object");
$attrOutput.html("Name: " + getName + "<br /><br />Gender: " + getGender +"
<br /><br />Age: " + getAge + " = " + typeof (getAge) +"
<br /><br />Age + 1: " + addingOneToAge +"
<br /><br />Attended: " + getAttended + " = " + typeof (getAttended) +"
<br /><br />Object: " + getObject);
//var setName = $attendanceList.attr("data-name","shaik");
//alert(setName.attr("data-name"));
var $attendanceList = $("#attendanceList");
var $dataOutput = $("#dataOutput");
var getName = $attendanceList.data("name");
var getAge = $attendanceList.data("age");
var getGender = $attendanceList.data("gender");
var addingOneToAge = getAge + 1;
var getAttended = $attendanceList.data("attended");
var getObject = $attendanceList.data("object");
$dataOutput.html("Name: " + getName + "<br /><br />Gender: " + getGender +"
<br /><br />Age: " + getAge + " = " + typeof (getAge) +"
<br /><br />Age + 1: " + addingOneToAge +"
<br /><br />Attended: " + getAttended + " = " + typeof (getAttended) +"
<br /><br />Object: " + getObject);
//var setName = $attendanceList.attr("data-name","shaik");
//alert(setName.data("name"));
</script>
</body>
</html>
</pre>
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="color: #990000;">Output Screenshot</span></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia45Y2On5hGmirRiavSFHt7BgMlVPF0PmzAcrVGz1SMBTTgKJu69jsm9RgfSoOwsuf8XAyJtquhCby0bZCWifFQvqG4-gKpHF1bQ-fylA1PF7atmb2TvCL-oDQeb7N4XEGFwSDNfz_pe0/s1600/final+(1).PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia45Y2On5hGmirRiavSFHt7BgMlVPF0PmzAcrVGz1SMBTTgKJu69jsm9RgfSoOwsuf8XAyJtquhCby0bZCWifFQvqG4-gKpHF1bQ-fylA1PF7atmb2TvCL-oDQeb7N4XEGFwSDNfz_pe0/s1600/final+(1).PNG" height="570" width="640" /></a></div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=3nWo_-rk25A" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw8ZhNQxBvep8mFLQWttBwpSNCqi3DEF7MG6L7M4NYBDQDZWqTRe-_Q9zQlX6NpVohikvQin8oOvvOuO2D5swkIlPobLUc-eqs0rhDy-XlziwT4Awo01j11zZem15yeNEOcCGY_wDrL2Y/s1600/mynew.png" /></a></div>
<b>attr() function</b><br />
<div>
<b><br /></b></div>
<div>
Use attr() when attribute values need to be accessed as string.</div>
If you see the attr result the name, gender, age, attended are return as string and object is in json format</div>
<div style="text-align: justify;">
<b><br /></b>
<b>data() function</b></div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
Use data() when you want to data-* values automatically converted to javascript value (number, bool, object, etc.) </div>
<div style="text-align: justify;">
Another one is when you need to cache a simple or complex value.</div>
<div style="text-align: justify;">
The data result is name and gender are return as string, age is number, attended is Boolean, object is return as object.</div>
<div style="text-align: justify;">
<br /></div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com0tag:blogger.com,1999:blog-3534194497895437811.post-13400293967537823952015-01-31T16:12:00.001+05:302015-01-31T16:42:51.242+05:30New Date & Time API in Java 8 Example<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
We are going to discuss about new Java 8 API today. In the recent release of Java 8, new Date and Time API was introduced. It supports ISO (International Organization for Standardization) calendar system. It also supports commonly used global calendars. Let’s quickly get into the example</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTErBJTjElcK384Id_Z8j-1Ar62adf8VM2eHmOn_6fyb-8cssz_6FeAmKdAQ2qnw2ysZ2mMXM0rIAlTA1Uk7hHdmfuWkYstOUt1ZY-Ui96aR9Hnuh8IwSSafcu0bXfQYejE1kZYA8kRSk/s1600/java-8-date-and-time-api-1-638.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTErBJTjElcK384Id_Z8j-1Ar62adf8VM2eHmOn_6fyb-8cssz_6FeAmKdAQ2qnw2ysZ2mMXM0rIAlTA1Uk7hHdmfuWkYstOUt1ZY-Ui96aR9Hnuh8IwSSafcu0bXfQYejE1kZYA8kRSk/s1600/java-8-date-and-time-api-1-638.png" height="213" width="320" /></a></div>
<a name='more'></a><div style="text-align: justify;">
<pre class="brush:java">import java.time.Duration;
import java.time.Instant;
public class TimeEx {
public static void main(String[] args) throws InterruptedException {
Instant start = Instant.now();
System.out.println(start);
Thread.sleep(1000);
Instant end = Instant.now();
System.out.println(end);
Duration elapsed = Duration.between(start,end);
System.out.println("Elapsed: "+elapsed.toMillis()+" milliseconds");
}
}
</pre>
</div>
<br />
<div style="text-align: justify;">
Output:</div>
<div style="text-align: justify;">
2015-01-26T02:36:36.269Z</div>
<div style="text-align: justify;">
2015-01-26T02:36:37.518Z</div>
<div style="text-align: justify;">
Elapsed: 1249 milliseconds</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Firstly we imported Duration and Instant Java classes from the java.time package. This allows us to use required methods in the program. Here we mainly used two Java classes Duration and Instant but we also required to know about Temporal Java class as well i.e. is Instant class is a sub class of Temporal. That the reason why we are able to use Instant object as arguments in the following line even though its asking for Temporal Java class as arguments. You can see the Hierarchy of different classes of this package here in the following link</div>
<div style="text-align: justify;">
<a href="http://docs.oracle.com/javase/8/docs/api/java/time/package-tree.html" rel="nofollow" target="_blank">http://docs.oracle.com/javase/8/docs/api/java/time/package-tree.html</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Instant java class contains static method now() which gives us current time-stamp. Duration java class contains static method between() which allows us to get elapsed time between two time-stamps.</div>
<div style="text-align: justify;">
We used toMillis() method with the instance of Duration java class to represent elapsed time between two time-stamps in readable format i.e. milliseconds.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Here is the another program,<br />
<br /></div>
<div style="text-align: justify;">
<pre class="brush:java">import java.time.LocalDate;
import java.time.LocalDateTime;
import java.time.LocalTime;
public class DateTimeValues {
public static void main(String[] args) {
LocalDate currentDate = LocalDate.now();
System.out.println(currentDate);
LocalDate specificDate = LocalDate.of(2000,1,1);
System.out.println(specificDate);
LocalTime currentTime = LocalTime.now();
System.out.println(currentTime);
LocalTime specificTime = LocalTime.of(14,0,45);
System.out.println(specificTime);
LocalDateTime currentDT = LocalDateTime.now();
System.out.println(currentDT);
LocalDateTime specificDT = LocalDateTime.of(specificDate,specificTime);
System.out.println(specificDT);
}
}
</pre>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Output:</div>
<div style="text-align: justify;">
2015-01-26</div>
<div style="text-align: justify;">
2000-01-01</div>
<div style="text-align: justify;">
09:42:12.908</div>
<div style="text-align: justify;">
14:00:45</div>
<div style="text-align: justify;">
2015-01-26T09:42:12.908</div>
<div style="text-align: justify;">
2000-01-01T14:00:45</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Here in the above program,</div>
<div style="text-align: justify;">
LocalDate currentDate = LocalDate.now(); is used to display current date.</div>
<div style="text-align: justify;">
LocalDate specificDate = LocalDate.of(2000,1,1); is used to display specific date.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Similarly, we display time here</div>
<div style="text-align: justify;">
LocalTime currentTime = LocalTime.now(); is used to display current time where as</div>
<div style="text-align: justify;">
LocalTime specificTime = LocalTime.of(14,0,45); is used to display specific time.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Similarly we are going to display both date and time using LocalDataTime java class</div>
<div style="text-align: justify;">
LocalDateTime currentDT = LocalDateTime.now(); is used to display current date and time.</div>
<div style="text-align: justify;">
LocalDateTime specificDT = LocalDateTime.of(specificDate,specificTime); is used to display specific date and time.</div>
<div style="text-align: justify;">
Here, we passed LocalDate and LocalTime instances as arguments to the LocalDateTime java class.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
You can observe output for better understanding.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Previous versions of Java allows us to work with Date and Time but they are mutable and not thread safe. </div>
<div style="text-align: justify;">
That’s the reason they are leading to potential concurrency errors.</div>
<div style="text-align: justify;">
All the classes in the Java 8 Date-Time API are immutable and thread-safe. </div>
<div style="text-align: justify;">
This makes us feel comfortable to use them in multi-threaded environments.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Java 8 Date-Time package is a well-structured API which clearly separates between human readable date, time format and machine time-stamp. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
All the classes used Factory and Strategy design pattern for better handling. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
All the Date-Time API Java classes comes with same methods.</div>
<div style="text-align: justify;">
Working with one Java class in this package allows us to feel comfortable to work with other java classes.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Immutable object: Once the object is created its state cannot be modified.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Example: </div>
<div style="text-align: justify;">
String str = “BOSS”;</div>
<div style="text-align: justify;">
str.toLowerCase();</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Using toLowerCase() method doesn’t change the value of str object instead it creates another object and gives the value boss in its construction.</div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com1tag:blogger.com,1999:blog-3534194497895437811.post-27530914066085871592015-01-23T12:36:00.003+05:302015-02-15T16:34:50.535+05:30How to Setup WhatsApp Web on Your Desktops and Laptops<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Very good news for whatsApp lovers and users. WhatsApp provided the special feature called WhatsApp Web Client now we can use WhatsApp on your personal computers, laptops or desktops via google chrome browser using this feature we can send and receive messages from your computer browser but it works only in chrome browser. I think it is awesome feature those who want to chat from there pc. We don’t need any tricks it is officially released. just follow the step by step procedure as shown below.</div>
<br />
<div style="text-align: justify;">
<span style="text-align: left;"><b>Note:</b> Present Iphone users don’t have WhatsApp Web Client facility but definitely we can except in future.</span><br />
<span style="text-align: left;"><br /></span></div>
<div style="text-align: justify;">
<span style="text-align: left;"><b>Step 1:</b> Make sure your mobile and computer should be connected to the internet.</span><br />
<span style="text-align: left;"><br /></span></div>
<b>Step 2:</b> First go to playstore and update the WhatsApp to latest version.<br />
<br />
<b>Step 3:</b> Install google chrome in your desktops or laptops.<br />
<br />
<b>Step 4:</b> Open the <a href="https://web.whatsapp.com/" rel="nofollow" target="_blank">https://web.whatsapp.com/</a> link in your chrome browser. It shows like below screenshot.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1bcNwlWXyWEg-nrQF2ytWqjBS2FDS3IaDqMFnwX-OOTFtDCqZvr7GdSmzAvDnhyphenhyphenTc_ZJPLJ8dzOj0W2Nqxi7LNFIg4u70YDHgzxxUtQ_VU8fPgRaD7-neR1ogKC5xKD-CMOqDXA5hgVQ/s1600/wat1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1bcNwlWXyWEg-nrQF2ytWqjBS2FDS3IaDqMFnwX-OOTFtDCqZvr7GdSmzAvDnhyphenhyphenTc_ZJPLJ8dzOj0W2Nqxi7LNFIg4u70YDHgzxxUtQ_VU8fPgRaD7-neR1ogKC5xKD-CMOqDXA5hgVQ/s1600/wat1.PNG" height="310" width="640" /></a></div>
<br />
<b>Step 5:</b> Now open the whatsApp in your mobile then go to menu options and select the WhatsApp Web.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNeyAjFUi_UToV7iUkCM5hgieDwXxMjgjv7MNU_SUMEVSQytL0AYGhZVdqprSSgCB_nCWl5SggnpIpGJq6R5zbLuFmyoDHDffsn5ScO5FGWWSXVnF6JU8IJPu7IymLk-QJ54YYDYgX14/s1600/2+maki.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNeyAjFUi_UToV7iUkCM5hgieDwXxMjgjv7MNU_SUMEVSQytL0AYGhZVdqprSSgCB_nCWl5SggnpIpGJq6R5zbLuFmyoDHDffsn5ScO5FGWWSXVnF6JU8IJPu7IymLk-QJ54YYDYgX14/s1600/2+maki.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<b>Step 6:</b> Scan the QR code with your mobile phone then it will activates the whatsApp web Client. Sometimes it takes few seconds to scan the code please wait.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY5J2-TjZzigZxrYAFu1yFZvCuKc2Tk5Ete-vvQXbbscCDZLR4eBiehKHjTiQHbkOJ-zpWcSqnVuA7mdWbvVZXXN2eDa-Hl5PpOgdxkd0F8-XE3Bl0huO54dlsG96Ms9eLz03J_qGBeRI/s1600/scan+code.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY5J2-TjZzigZxrYAFu1yFZvCuKc2Tk5Ete-vvQXbbscCDZLR4eBiehKHjTiQHbkOJ-zpWcSqnVuA7mdWbvVZXXN2eDa-Hl5PpOgdxkd0F8-XE3Bl0huO54dlsG96Ms9eLz03J_qGBeRI/s1600/scan+code.png" height="356" width="400" /></a></div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<b>Step 7:</b> Haha now your mobile successfully paired with chrome web browser. Start chatting with your friends from your system. Enjoy<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhUx4pq8e6LAau1E9hRtpKAavKzVOMsFyfhssXf-e5qnD3QW_DKodHFn9uHFCKnb07CfMYaEyhza75sSbGC1GM9VhFNanDuqu1EvfSk1K0dzEFjq5NSJvaOeFRUiv1zjLzpw6rc4Z2lVA/s1600/final+round+(1).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhUx4pq8e6LAau1E9hRtpKAavKzVOMsFyfhssXf-e5qnD3QW_DKodHFn9uHFCKnb07CfMYaEyhza75sSbGC1GM9VhFNanDuqu1EvfSk1K0dzEFjq5NSJvaOeFRUiv1zjLzpw6rc4Z2lVA/s1600/final+round+(1).png" height="334" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<div style="text-align: left;">
If you want to logout the whatsApp from your browser please look the below image. Just click on the logout.<br />
<br /></div>
<div style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn14-1LF2Dc9TXg9EDd9ULgVeNwD-50br9xsvZxhicoL3vnMrDI-c9KgZzI7ZQjBRbJ4-YkZmwkBPyilVDGRDn8SPMxDuvhZDRKAS9AhKUAViVCTjU69d4_hRiLUYEVMf_0utRZzjapZE/s1600/logout+copy+(1).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn14-1LF2Dc9TXg9EDd9ULgVeNwD-50br9xsvZxhicoL3vnMrDI-c9KgZzI7ZQjBRbJ4-YkZmwkBPyilVDGRDn8SPMxDuvhZDRKAS9AhKUAViVCTjU69d4_hRiLUYEVMf_0utRZzjapZE/s1600/logout+copy+(1).png" height="179" width="640" /></a></div>
<br />
<div style="text-align: center;">
<b><span style="color: #990000;">Watch Video Demo</span></b><br />
<b><span style="color: #990000;"><br /></span></b></div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/LAiFwF0Qx2o" width="640"></iframe>
</div>
</div>
<br />
I hope you have understood this tutorial very clearly. Please leave a comment if you face any issues. Thank you for visiting studywithdemo stay tuned for latest updates.</div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com6tag:blogger.com,1999:blog-3534194497895437811.post-84061341820737532072015-01-17T17:54:00.000+05:302015-01-17T19:28:02.865+05:30Bootstrap Alert Along With Modal Dialog Box<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Bootstrap provided interactive modal and alert classes now i’m going to combine both alert and modal. Modal creates popup and dialog like experience and alerts are used to display notification messages. There are different types of indication colors for alert. Lets see how to use alert along with modal popup. Actually it is good idea in most cases it is very useful in real time senario. When ever we click on submit button it displays a modal popup along with alert message. If you want to close message simply click on the right side close icon of alert message.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibc4mOWvdMckN4ENnY0NzzvFUblUydpskIZjolozOBwIxgI1Cg5MFKQ54cUSFEcO9q8jX38sWOBEjT1nhEnEqv9mj3F2Ad9qV3BUIGitQ-pv6mG9ekm7WZ5iTnDdMuvG1Vg8AA-tdTSgM/s1600/modal.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibc4mOWvdMckN4ENnY0NzzvFUblUydpskIZjolozOBwIxgI1Cg5MFKQ54cUSFEcO9q8jX38sWOBEjT1nhEnEqv9mj3F2Ad9qV3BUIGitQ-pv6mG9ekm7WZ5iTnDdMuvG1Vg8AA-tdTSgM/s1600/modal.PNG" height="247" width="640" /></a></div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=ot7SyCwLrd4" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjguCozUbrfdfsqloOi9BBLxiTkPsIHtqOfiUB4psned3Qo4x5GgxCdUMV1zyNyZFHUi7ED9ZgPEVXZ-kXRwXmYl3MpLWWyZrL8vFDGsJNkARjRpMRmgoxKhlOiyD5fK7kzB-nBLK5bOxw/s1600/mynew.png" /></a></div>
<div style="text-align: justify;">
<pre class="brush:html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Alert and Modal Example</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body style="margin-top: 70px;">
<div>
<header class="container">
<h4>Alert Along With Modal Dialog Box</h4>
</header>
<section class="container">
<div class="alert alert-warning collapse" id="sentAlert">
<a href="#" data-dismiss="alert" class="close">&times;</a>
<p>This is warning message</p>
</div>
<div class="tab-content">
<div class="well" id="formTab">
<div class="row">
<form class="form-horizontal" id="contactForm">
<div class="form-group">
<label for="emailInput" class="control-label col-md-2">Email</label>
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="email" name="emailInput" class="form-control"
placeholder="e.g. Your Email" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-2">
<input type="submit" value="Submit" class="btn btn-success"/>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
<div class="modal" id="sentDialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">&times;</a>
<h4>Thanks for clicking</h4>
</div>
<div class="modal-body">
<p>This is modal body</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<script >
(function () {
"use strict";
var $sentDialog = $("#sentDialog");
$("#contactForm").on("submit", function () {
$sentDialog.modal('show');
return false;
});
var $sentAlert = $("#sentAlert");
$sentDialog.on("hidden.bs.modal", function () {
//alert("close");
$sentAlert.show();
});
$sentAlert.on("close.bs.alert", function () {
$sentAlert.hide();
return false;
});
})();
</script>
</body>
</html>
</pre>
</div>
<div style="text-align: justify;">
<br /></div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com0tag:blogger.com,1999:blog-3534194497895437811.post-72938600283068481642015-01-17T17:09:00.001+05:302015-01-17T19:24:02.801+05:30Bootstrap 3 Responsive Tables and Lists<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
In every web application we required tabular data and lists most of the time data can be represented in form of tables and lists. So that I decided to design and build a responsive tables and lists using bootstrap 3 without having designing knowledge we can easily create using bootstrap special classes. We can run these tables and lists example from small mobile screen to big desktop screen it is completely responsive changes according to device width.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
In our example we have created un-ordered list with some information and table that represents the top list of directors along with movie name.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO8TTDCTgfkH5LjpZMD4JQ09cDNIpR3CNgqAxwubASuSeeyZ7j3QHpx4HSuOo6TP45Am1cMPXQhCWi4aIenseT4TLPkbVWCvbW9ksh4ZtR0R_qV2hiHB9Z4oDvl_m7oy-9k65JFy_0Phc/s1600/tables.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO8TTDCTgfkH5LjpZMD4JQ09cDNIpR3CNgqAxwubASuSeeyZ7j3QHpx4HSuOo6TP45Am1cMPXQhCWi4aIenseT4TLPkbVWCvbW9ksh4ZtR0R_qV2hiHB9Z4oDvl_m7oy-9k65JFy_0Phc/s1600/tables.PNG" height="276" width="640" /></a></div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=c2gnKOLspY8" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjguCozUbrfdfsqloOi9BBLxiTkPsIHtqOfiUB4psned3Qo4x5GgxCdUMV1zyNyZFHUi7ED9ZgPEVXZ-kXRwXmYl3MpLWWyZrL8vFDGsJNkARjRpMRmgoxKhlOiyD5fK7kzB-nBLK5bOxw/s1600/mynew.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<pre class="brush:html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 3 Responsive Tables and Lists</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="margin-top: 70px;">
<div>
<section class="container">
<h3>Top 5 Directors</h3>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>Director Name</th>
<th>Movie Name</th>
</tr>
</thead>
<tr>
<td>S. S. Rajamouli</td>
<td>Bahubali</td>
</tr>
<tr>
<td>Puri Jagannadh</td>
<td>Temper</td>
</tr>
<tr>
<td>Kishore Kumar Pardasani</td>
<td>Gopala Gopala</td>
</tr>
<tr>
<td>Shankar</td>
<td>'I'</td>
</tr>
<tr>
<td>Trivikram Srinivas</td>
<td>Attarintiki Daredi</td>
</tr>
</table>
</div>
</div>
</div>
<h3>List of Flowers</h3>
<div class="row">
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item">
<span class="badge">
<span class="glyphicon glyphicon-earphone"></span>
</span>
Rose
</li>
<li class="list-group-item">
Lilly
</li>
<li class="list-group-item active">
Red Charm
</li>
<li class="list-group-item">
<a href="" target="_blank">Coral Sunset</a>
</li>
</ul>
</div>
</div>
</section>
</div>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
</pre>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com0tag:blogger.com,1999:blog-3534194497895437811.post-64874918556391774122015-01-14T17:47:00.002+05:302015-01-25T18:43:43.490+05:30How to Run Javascript in Java Using Nashorn<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Java 8 is a major release for the java programming language and java virtual machine. It includes many changes in that we are going to discuss about nashorn javascript engine example. Java se 8 provided a brand new library JavaScript engine named nashorn. Nashorn is completely new engine. It can used from command line or directly in your java code. This is entirely written from scratch. Let you write JavaScript code using java classes and objects. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>How to use Nashorn from command line</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
If you are working on windows first open the command prompt type jjs now we can see the jjs prompt appear and now you can start typing javascript code.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD2Y0lZTchPDZZveAS18odMxN3iUk9byKTdBlTAWc-crAmwFYuYW76n-YeFV1WSOEMmcH4Ma3ZOpoOZt0BJxxMaR99EinSdQmFlRCW6tStg-ql2LNQUc_dSvD70HV-I3ZA3o4Z6IAp60E/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Nashorn from command line" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD2Y0lZTchPDZZveAS18odMxN3iUk9byKTdBlTAWc-crAmwFYuYW76n-YeFV1WSOEMmcH4Ma3ZOpoOZt0BJxxMaR99EinSdQmFlRCW6tStg-ql2LNQUc_dSvD70HV-I3ZA3o4Z6IAp60E/s1600/1.PNG" title="" /></a></div>
<span style="text-align: justify;"><br /></span>
<span style="text-align: justify;">If you want to read some content from remote server first copy the url from the browser and copy into the java.net.URL class. Please check the below code</span><br />
<div style="text-align: justify;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1__kAyX9BXJnZtNU_c8Np6c7E7UPZ4EyW6cVQbehOmc4EeIma8Ismbhnlh9EKhJ1RLxqHWwKiH5TC-PilakwnbC-fK5fd8RYIx-zF0GB-0y9JXlNSzOq7bN4L4BuBe0joLlTqBXla-TE/s1600/2ong.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="java 8 nashorn engine example" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1__kAyX9BXJnZtNU_c8Np6c7E7UPZ4EyW6cVQbehOmc4EeIma8Ismbhnlh9EKhJ1RLxqHWwKiH5TC-PilakwnbC-fK5fd8RYIx-zF0GB-0y9JXlNSzOq7bN4L4BuBe0joLlTqBXla-TE/s1600/2ong.PNG" height="176" title="" width="640" /></a></div>
<a name='more'></a><br />
<span style="color: #990000;">var input = new </span></div>
<div style="text-align: justify;">
<span style="color: #990000;">java.util.Scanner(new </span><span style="color: #990000;">java.net.URL</span><br />
<span style="color: #990000;">(“https://googledrive.com/host/0Bw-ZBbYmW_PRWkFJRDJYczUzYTg</span><span style="color: #990000;">”).openStream())</span></div>
<div style="text-align: justify;">
<span style="color: #990000;">input.useDelimiter(‘$’)</span></div>
<div style="text-align: justify;">
<span style="color: #990000;">var data = input.next()</span></div>
<div style="text-align: justify;">
<span style="color: #990000;">data</span></div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=FNNuDoU6m8U" rel="nofollow" target="_blank"><img alt="https://www.youtube.com/watch?v=FNNuDoU6m8U" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpa1f7skLB5awAFruBKmpOg8QLvHH2kvxKm5lYK8uLTxNZ5SOW8Fkgz4RGSJJI8aVtgL_I7exr19uGtE755tyy65v-gJ_8-Z1eD4y2oCYx8KYYbAtJPkXa2QPnOogW4ATGlzad-w0sjmM/s1600/mynew.png" /></a></div>
<br /></div>
<div style="text-align: justify;">
<b>How to write JavaScript in separate file and then execute that file from java code.</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
We can also build javascript into your java code you can write complete code blocks using javascript and execute easily. ScriptEngineManager class is used the get the script engine object. It has access to all script engine that are build into java runtime.<br />
<br />
<span style="color: #990000;">package com.example.java8;</span><br />
<span style="color: #990000;"><br /></span>
<span style="color: #990000;">import javax.script.ScriptEngine;</span><br />
<span style="color: #990000;">import javax.script.ScriptEngineManager;</span><br />
<span style="color: #990000;">import javax.script.ScriptException;</span><br />
<span style="color: #990000;"><br /></span>
<span style="color: #990000;">public class java8NashornExample {</span><br />
<span style="color: #990000;"><br /></span>
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>public static void main(String[] args) {</span><br />
<span style="color: #990000;"><br /></span>
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>ScriptEngineManager mgr = new ScriptEngineManager();</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>ScriptEngine engine = mgr.getEngineByName("nashorn");</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>String script = </span><span style="color: #990000;">"var message = 'Welcome to StudywithDemo'; "</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>+ "message";</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>String result;</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>try {</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>result = (String)engine.eval(script);</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>System.out.println(result);</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>} catch (ScriptException e) {</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><span class="Apple-tab-span" style="white-space: pre;"> </span>System.out.println("There was a JavaScript error"+e.getMessage());</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>e.printStackTrace();</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #990000;">}</span><br />
<div>
<br /></div>
</div>
<div style="text-align: justify;">
When you running complex javascript in java code it is better to put javascript in separate file. Look the below example.<br />
<br />
<span style="color: #990000;">package com.example.java8;</span><br />
<span style="color: #990000;"><br /></span>
<span style="color: #990000;">import javax.script.ScriptEngine;</span><br />
<span style="color: #990000;">import javax.script.ScriptEngineManager;</span><br />
<span style="color: #990000;">import javax.script.ScriptException;</span><br />
<span style="color: #990000;"><br /></span>
<span style="color: #990000;">import java.io.*;</span><br />
<span style="color: #990000;"><br /></span>
<span style="color: #990000;">public class java8NashornExample2 {</span><br />
<span style="color: #990000;"><br /></span>
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>public static void main(String[] args) throws FileNotFoundException {</span><br />
<span style="color: #990000;"><br /></span>
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>ScriptEngineManager mgr = new ScriptEngineManager();</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>ScriptEngine engine = mgr.getEngineByName("nashorn");</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>File f = new File("jsfolder/sample.js");</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>Reader read = new FileReader(f);</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>String result;</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>try {</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>result = (String)engine.eval(read);</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>System.out.println(result);</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>} catch (ScriptException e) {</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>System.out.println("There was a JavaScript error"+e.getMessage());</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>e.printStackTrace();</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #990000;">}</span><br />
<span style="color: #990000;"><br /></span>
<b>sample.js</b><br />
<span style="color: #990000;"><br /></span>
<span style="color: #990000;">var feed = 'https://googledrive.com/host/0Bw-ZBbYmW_PRWkFJRDJYczUzYTg</span><span style="color: #990000;">';</span><br />
<span style="color: #990000;">var url = new java.net.URL(feed);</span><br />
<span style="color: #990000;">input = new java.util.Scanner(url.openStream());</span><br />
<span style="color: #990000;">input.useDelimiter('$')</span><br />
<span style="color: #990000;">var data = input.next()</span><br />
<span style="color: #990000;">data</span></div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com1tag:blogger.com,1999:blog-3534194497895437811.post-71494300968280573542015-01-10T16:06:00.000+05:302015-01-31T16:30:50.984+05:30Random JQuery Progress Bar using Ajax and Servlet <div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Hi everyone welcome to studywithdemo. Today im very much interested to tell about how to create random jquery progress bar using ajax and servlet because this is the first tutorial i have done after learning jquery. Jquery is one of the favorite subject to me. Using jQuery most of the work becomes easy and it makes UI <span style="text-align: left;">more interactive and rich look.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Before going into the example I want to tell one thing here am not covering any file upload and download progress bar only showing how progress bar will works on server side. This example completely not suitable for everyone but definitely creates a basic idea, using this you can modify and implement code according to your requirements. To create random progress bar I have used ajax and servlet as serverside technology.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0oN0TKIozZCasdd0sB6OvAva3f5-D7tblS18FXG3M-xgrjx8aUAFIOCWW6P1TY7E2J476CHAHoVrxL21qV9WWL30pV0JxnW7fNVa3JjPkUJPk4rEo81v8X9JC3jON1zW_5jXLwLxUMA/s1600/progress_bar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Random Progress bar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0oN0TKIozZCasdd0sB6OvAva3f5-D7tblS18FXG3M-xgrjx8aUAFIOCWW6P1TY7E2J476CHAHoVrxL21qV9WWL30pV0JxnW7fNVa3JjPkUJPk4rEo81v8X9JC3jON1zW_5jXLwLxUMA/s1600/progress_bar.png" height="339" title="" width="640" /></a></div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: left;">
Each time ajax pass a value to servlet and servlet increases number randomly and sends the response back this will continue untill the progress bar will complete 100% thats it just simple logic no need to worry look at the code. We can also increase or decrease the progress bar speed by changing the setTimeout value and easily customize the progressbar label text.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=xC_OzSQYJsk" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrp1nvp_BKo6TvJUNY6mdvw529vwh-BWWnZlvo7opvGWD3tx-2g3ddzoZ_d5iB7vTcMsAn5HLNblLq-MhY2Z9i2EHGBWfpCeaI1jadMHQNk79_vWUP8y1A9oBhIW9G_yP5BaVALV_91Xk/s1600/mynew.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>ProgressBarServlet.java</b></div>
<pre class="brush:html"> import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ProgressBarServlet
extends HttpServlet
{
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
Random r = new Random();
try
{
int pval = Integer.parseInt(request.getParameter("pval"));
float randomval = r.nextFloat();
int seedval = (int)(10.0F * randomval);
out.print(pval + seedval);
}
finally
{
out.close();
}
}
}
</pre>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>index.jsp</b></div>
<div class="separator" style="clear: both;">
<br /></div>
<pre class="brush:html"><html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Progressbar Random</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
var pval=0;
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
}
});
progress();
function progress() {
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
pval=xmlhttp.responseText;//getting result from servlet
progressbar.progressbar( "value",parseInt(pval));//converting string result to integer
}
}
xmlhttp.open("GET","ProgressBarServlet?pval="+pval,true);//value sending to servlet
xmlhttp.send();
var val=parseInt(pval);
if ( val < 100 ) {
setTimeout( progress, 1000 );
}
}
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label"></div></div>
</body>
</html>
</pre>
<br />
<b>web.xml</b>
<br />
<pre class="brush:xml"> <servlet>
<servlet-name>ProgressBarServlet</servlet-name>
<servlet-class>ProgressBarServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ProgressBarServlet</servlet-name>
<url-pattern>/ProgressBarServlet</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>/index.jsp</welcome-file>
</welcome-file-list>
</pre>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com1tag:blogger.com,1999:blog-3534194497895437811.post-7637020810980121572015-01-03T15:08:00.000+05:302015-02-03T15:29:00.084+05:30CSS3 Rounded Corners and Box Shadows Example<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
In this tutorial we going to take look of some nice features in CSS3 provide rounded corners, drop shadows and few new color management features. It doesn’t matter if your are developer or designer at the end of the day our job is basically same we have to create rich, usable website and web application with an awesome user experience.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
First we will see how to create rounded corner. Rounded corners are nothing but rounds the corner(s) of an element with a defined radius value. I have taken three div tags and each div has a different border class . Look at the top div the border radius property is 20px and applied same pixel to all the four corners. We can also specify amount in percentage for example 1%. If you want to define different border radius on each corner look the second div and last div contains the individual border property.<br />
<br />
<pre class="brush:css">
div {
font-family: verdana, arial;
font-size: small;
padding: 10px;
width: 400px;
height: 50px;
background-color: orange;
}
.borderEffect1 {
border-radius: 20px;
}
.borderEffect2 {
/* top-left top-right bottom-right bottom-left */
border-radius: 10px 50px 10px 0px;
}
.borderEffect3 {
border-top-left-radius: 10px;
border-top-right-radius: 50px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 0px;
}
</pre>
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrOPdRuZI2dwZQG5q7i0sSWvj4tZeNS1WJfNaREGrFGrEulpViwJ8pc2ShEe1BEgolJvzWnQ2OowwcChMNxgkXC38Yx2ttDVTq_nSQka1Ig79QMgOqUyjtj-VB3Vj_5QVtVduEVznPijc/s1600/borders.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Rounded Corners and borders" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrOPdRuZI2dwZQG5q7i0sSWvj4tZeNS1WJfNaREGrFGrEulpViwJ8pc2ShEe1BEgolJvzWnQ2OowwcChMNxgkXC38Yx2ttDVTq_nSQka1Ig79QMgOqUyjtj-VB3Vj_5QVtVduEVznPijc/s1600/borders.PNG" height="290" title="" width="400" /></a></div>
<div style="text-align: justify;">
Box shadow is a new property in CSS3. It takes five values horizontal offset the positive number means up shadow and negative number means down shadow, vertical offset, blur distance, spread distance, color, and inset. I have taken series of div tags and applied shadow class for each div.<br />
<pre class="brush:css">
div {
font-family: verdana, arial;
font-size: small;
padding: 10px;
width: 300px;
height: 40px;
background-color: pink;
border-radius: 5px;
}
.dropShadow1 {
box-shadow: -10px -10px skyblue;
}
.dropShadow2 {
box-shadow: 10px 10px skyblue;
}
.dropShadow3 {
box-shadow: 10px 10px 20px skyblue;
}
.dropShadow4 {
box-shadow: 10px 10px 20px 10px skyblue;
}
.dropShadow5 {
box-shadow: 10px 10px 20px skyblue inset;
}
</pre>
</div>
<div style="text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="box shadow CSS3 example" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_KNwaGnwip3Jmfuh-ChfGoVMK0vRhXiPWE10EmzhfhooSkPFK7yuGcTiy8cIxLUQ9pfdErRn4vm9O6cYawdnEq9pL9GD_tB7uLu-3kWHrn6GtfeAQwjBmprxYrdAw2O0DoS8p6Z_oogY/s1600/C3.PNG" style="margin-left: auto; margin-right: auto;" title="" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;"></td></tr>
</tbody></table>
<a name='more'></a><div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=ODYOpZs0OvI" rel="nofollow" style="margin-left: 1em; margin-right: 1em; text-align: center;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzdQnsTgOTBUTv7kQ1gXP5y5k-DHGaDY5gOW7Edf5YdpVLbS0lnRLU1IywoQ7xHfGOWT8pm7A1-3vE-9siwsFPWz8FcKFlaJZltty1UshZrlpRTwx3zXZSk00O4oixah0AOI3ryajOrk0/s1600/mynew.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
Color management is the new way to specify colors in CSS3. We have rgba or rgb and hsla or hsl function. RGBA is used to specify the colors red, blue, green and opacity. HSLA is used to specify Hue, Saturation, Lightness. RGBA and HSLA colors expressed using percentages or numbers. Once check the code in below example.<br />
<br />
Opacity is another property in CSS3 used to set opacity.<br />
<br />
<pre class="brush:css">
div {
font-family: verdana, arial;
font-size: small;
padding: 10px;
width: 400px;
height: 40px;
border-radius: 5px;
}
.colorOpacity1 {
background-color: rgba(255, 0, 0, 0.1);
}
.colorOpacity2 {
background-color: rgba(0%, 100%, 0%, 0.1);
}
.colorOpacity3 {
background-color: hsl(240, 100%, 90%);
}
.colorOpacity4 {
background-color: hsla(240, 100%, 90%, 0.25);
}
</pre>
<br />
<pre class="brush:html"><div style="background: red; opacity: 0.0;">opacity: 0.0</div>
<div style="background: red; opacity: 0.2;">opacity: 0.2</div>
<div style="background: red; opacity: 0.4;">opacity: 0.4</div>
<div style="background: red; opacity: 0.6;">opacity: 0.6</div>
<div style="background: red; opacity: 0.8;">opacity: 0.8</div>
<div style="background: red; opacity: 1.0;">opacity: 1.0</div>
</pre>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYxU0CH2odb_rsgNx764RlnasAIzwNDPPkhpY7L-rR0Gygg4cY5rBGBqGLFd0mr8w4ESTY3CpMp4iYZB7aOqoKm-Ps4WSBi8Yh_8n7mqq1C4-JIu5WvXqOEmlmg5Ox5U5WXKeH9jmVSY/s1600/4PNG.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="opacity and colors in CSS3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYxU0CH2odb_rsgNx764RlnasAIzwNDPPkhpY7L-rR0Gygg4cY5rBGBqGLFd0mr8w4ESTY3CpMp4iYZB7aOqoKm-Ps4WSBi8Yh_8n7mqq1C4-JIu5WvXqOEmlmg5Ox5U5WXKeH9jmVSY/s1600/4PNG.PNG" height="258" title="" width="640" /></a></div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com3tag:blogger.com,1999:blog-3534194497895437811.post-9939865052685794872014-12-29T18:35:00.000+05:302015-01-16T20:01:29.168+05:30How to Connect XenServer and Operating VM Using Java<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal" style="text-align: justify;">
At the time of final year project in MCA we have done a challenging project on citrix xenserver. Initially we did research and learn about virtualization, xenserver and xen java API concepts later we decided to do a web based project and named as xenserver management on cloud computing. We developed a web console to interact with xenserve and performing various operations on it. In our project we did different modules like establishing connection with xenserver, getting the xenserver version, vm creation, VM destroy and virtual machine life cycle. Life cycle is nothing but VM start, stop and reboot.</div>
<div class="MsoNormal" style="text-align: justify;">
<br /></div>
<div class="MsoNormal" style="text-align: justify;">
It is difficult to explain all modules so I will cover most useful functionality how to connect xenserver using java and VM life cycle using java. Don’t be confuse VM is called as virtual machine and it a guest operating system. In below video demo we can watch complete practical part like how to create web project, adding xen API jars in project, configuring apache tomcat server etc.</div>
<div class="MsoNormal" style="text-align: justify;">
<br /></div>
<div class="MsoNormal" style="text-align: center;">
<span style="color: #990000;"><b>Screenshots</b></span></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioItvVQH2nMCGYQGkvZAeTamgLO_n0gsXeeKb9P20gboBObHaHKkiwLKN6VBNl-ISIsWmEs7oeW6S66DV2SSUYYfVJ-mkqm3z-tBI4-2ZlwYT60cm_qiCPkQZn4Jk4Ihvjcn5paxCUPAc/s1600/vlcsnap-2014-12-29-07h58m24s200.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="xenserver project connection page" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioItvVQH2nMCGYQGkvZAeTamgLO_n0gsXeeKb9P20gboBObHaHKkiwLKN6VBNl-ISIsWmEs7oeW6S66DV2SSUYYfVJ-mkqm3z-tBI4-2ZlwYT60cm_qiCPkQZn4Jk4Ihvjcn5paxCUPAc/s1600/vlcsnap-2014-12-29-07h58m24s200.png" height="278" title="" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5c9J_vEnbfNHE9ybmsnSsGxyjdWaKq_w2yOaDLv3-DJFR86K0XQ8xyrURK7HoosnqC80atlfQlFW4F34lwabW1EU4xWdsBUob_tRTcSqrwwH-fGiaFHn-TJMunNxpfTkBBf-JzsTVxjk/s1600/shot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="vm life cycle image" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5c9J_vEnbfNHE9ybmsnSsGxyjdWaKq_w2yOaDLv3-DJFR86K0XQ8xyrURK7HoosnqC80atlfQlFW4F34lwabW1EU4xWdsBUob_tRTcSqrwwH-fGiaFHn-TJMunNxpfTkBBf-JzsTVxjk/s1600/shot.png" height="299" title="" width="640" /></a></div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=eq8fwjnzJuE" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxd5oLktVp4DSsLdSEXDynaVd0bjDhfIkwGO_mOuvNMs56UKk6TijXKCWGPydRClVtvL9ejNFU62vGvv4ARIqunWm2JWo-8vDrZ3bec8uSuCQgkDMSGxtHMC_kp6QjEhCWE6qcuSN0zPo/s1600/mynew.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<b>Code to connect xenserver using java</b></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<b><br /></b></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<pre class="brush:java">import com.xensource.xenapi.Connection;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpSession;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*
* @author Faruk Shaik
*/
public class connection extends HttpServlet {
public static String IP;
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String ip=request.getParameter("IP");
IP="http://"+ip;
String uname=request.getParameter("uname");
String pass=request.getParameter("pass");
Connection conn = new Connection(IP,uname,pass);
if(conn!=null)
{
HttpSession hs=request.getSession();
hs.setAttribute("ip",IP);
hs.setAttribute("uname",uname);
hs.setAttribute("pass",pass);
javax.swing.JOptionPane.showMessageDialog(null,"connection established");
response.sendRedirect("task.jsp");
}
}
catch(Exception e)
{
javax.swing.JOptionPane.showMessageDialog(null,"connection not established");
response.sendRedirect("connection.jsp");
}
finally {
out.close();
}
}
public String s()
{
return IP;
}
}
</pre>
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<b>Code to Start, stop and reboot the VM using java</b><br />
<b><br /></b></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<pre class="brush:java">import com.xensource.xenapi.APIVersion;
import com.xensource.xenapi.Connection;
import com.xensource.xenapi.*;
import com.xensource.xenapi.VM;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
*
* @author Faruk Shaik
*/
public class vmlife extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String name1=null;
try {
HttpSession hs=request.getSession();
String ip=(String)hs.getAttribute("ip");
String uname=(String)hs.getAttribute("uname");
String pass=(String)hs.getAttribute("pass");
Connection conn = new Connection(ip,uname,pass);
String name=request.getParameter("count");
if(name.equalsIgnoreCase("start"))
{
String vmname=request.getParameter("vmname");
Map<vm ecord=""> vms=VM.getAllRecords(conn);
for(VM.Record record: vms.values())
{
if(!record.isATemplate&&!record.isControlDomain )
{
if(vmname.equals(record.nameLabel.toString()))
{
VM.getByUuid(conn,record.uuid).start(conn, false, false);
name1="VM"+vmname+" started successfully";
}
}
}
}
else if(name.equalsIgnoreCase("shut"))
{
String vmname=request.getParameter("vmname");
Map<vm ecord=""> vms=VM.getAllRecords(conn);
for(VM.Record record: vms.values())
{
if(!record.isATemplate&&!record.isControlDomain )
{
if(vmname.equals(record.nameLabel.toString()))
{
VM.getByUuid(conn,record.uuid).hardShutdown(conn);
name1="VM"+vmname+" shutdown successfully";
}
}
}
}
else if(name.equalsIgnoreCase("reboot"))
{
String vmname=request.getParameter("vmname");
Map<vm ecord=""> vms=VM.getAllRecords(conn);
for(VM.Record record: vms.values())
{
if(!record.isATemplate&&!record.isControlDomain )
{
if(vmname.equals(record.nameLabel.toString()))
{
VM.getByUuid(conn,record.uuid).hardReboot(conn);
name1="VM" +vmname+"rebooted successfully";
}
}
}
}
}
catch(Exception e){
System.out.println(e);
javax.swing.JOptionPane.showMessageDialog(null,"xen excepton is"+e);
}finally {
out.close();
}
}
}</vm></vm></vm></pre>
</div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com1tag:blogger.com,1999:blog-3534194497895437811.post-28004235356815359582014-12-19T16:30:00.003+05:302015-01-16T20:13:22.957+05:30HTML5 Data Storage Example<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
One of the key feature in HTML5 is ability to store data on the local machine is known as data storage. Html 5 data storage is an extension of the already existing cookie mechanism. There are two types of storages one is session storage and another is local storage. These two types share same methods and properties but the difference is how long data is stored. In either case both types are origin depended which means the data we treat must be from the same source or the same server. The data is stored as items. Items are nothing but key/value pairs.<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilEyyUbD-SBsuzan297txZt1033pjSBPaBOIKJD8fZa_bGpNvoqoxdnx70WT6xwdpXzVM2eKUakDDc1BZcqocNIsAAO-YdSV5sCXlvdpLYcUqJkfPqZV8cFF4h-mEEUAasQn-cisOabDM/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML5 SESSION STORAGE AND LOCAL STORAGE" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilEyyUbD-SBsuzan297txZt1033pjSBPaBOIKJD8fZa_bGpNvoqoxdnx70WT6xwdpXzVM2eKUakDDc1BZcqocNIsAAO-YdSV5sCXlvdpLYcUqJkfPqZV8cFF4h-mEEUAasQn-cisOabDM/s1600/Capture.PNG" height="370" title="" width="640" /></a></div>
<a name='more'></a><br />
<div style="text-align: justify;">
List of Very Useful methods.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>getItem(key):</b> we can get the value using this method.</div>
<div style="text-align: justify;">
<b>setItem(key, value): </b>we can set key and value using this method.</div>
<div style="text-align: justify;">
<b>Length:</b> To find how many items are in session storage.</div>
<div style="text-align: justify;">
<b>Key(index):</b> Used to find a particular value.</div>
<div style="text-align: justify;">
<b>removeItem(key): </b>To delete single item.</div>
<div style="text-align: justify;">
<b>Clear:</b> If you wish to clear the saved items then use the clear().<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=grxUK83MYY4" rel="nofollow" style="margin-left: 1em; margin-right: 1em; text-align: center;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJPeUJnPtCA8A7e2IpLfSw1U3cAgXPmPX9XDUHpiskaqs0NUBXYp5O35r2HISvFPLAAFXIkyV9lSrHrJ9-zykMerqvF-KfOjE4jLMJqMnFct3TbGoQ6GVGIV0yfRcsQ9bcbmOsyFfZUnM/s1600/mynew.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
<div style="text-align: justify;">
<b>Session storage:</b> It lasts as long its page or tap is open. It is tied to window or tab. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>home.html</b><br />
<pre class="brush:css">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #009B57;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.style1 {
font-weight: bold;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="DataStorage.js"></script>
</head>
<body>
<div style="padding-top:200px" align="center">
<table width="432" align="center" cellpadding="5" cellspacing="1"
style="border:1px solid #009B57">
<tr>
<td colspan="5"><div align="center"><h4>HTML5 SESSION STORAGE AND LOCAL
STORAGE EXAMPLE </h4></div></td>
</tr>
<tr>
<td colspan="3"><span>Key</span></td>
<td width="56"><span class="style1">:</span></td>
<td width="166">
<label>
<input type="text" name="key" id="key" />
</label>
</td>
</tr>
<tr>
<td colspan="3"><span>Value</span></td>
<td><span class="style2"><strong>:</strong></span></td>
<td>
<label>
<input type="text" name="value" id="value" />
</label>
</td>
</tr>
<tr>
<td width="62">
<input type="button" name="save" id="save" value="Save" />
</td>
<td width="68">
<input type="button" name="retrieve" id="retrieve" value="Retrieve" />
</td>
<td width="56">
<input type="button" name="delete" id="delete" value="Delete" />
</td>
<td>
<input type="button" name="review" id="review" value="Review" />
</td>
<td>
<input type="button" name="clear" id="clear" value="Clear" />
</td>
</tr>
</table>
<section id="data" style="padding: 15px;
border: 1px solid #009B57; width:432px">
No data
</section>
</div>
</body>
</html>
</pre>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>DataStorage.js</b><br />
<br />
<pre class="brush:js">function save()
{
var key = $('#key').val();
var value = $('#value').val();
sessionStorage[key] = value;
$('#data').html('Item is Saved');
}
function retrieve()
{
var key = $('#key').val();
var value = sessionStorage[key];
$('#data').html( '' + key + ': ' + value + '');
}
function deleteItem()
{
if (confirm('Delete?'))
{
var key = $('#key').val();
sessionStorage.removeItem(key);
$('#data').html('Item is deleted.');
}
}
function reviewListOfItems()
{
var p='';
for(var i = 0; i < sessionStorage.length; i++)
{
var key = sessionStorage.key(i);
var value = sessionStorage[key];
p=key+" "+value+''+p;
}
$('#data').html( '' +p+'');
}
function clearAllItems()
{
if (confirm('Do u want to clear?'))
{
sessionStorage.clear();
$('#data').html('Items are cleared.');
}
}
$(document).ready(function(){
$('#save').click(function(){
save();
});
$('#retrieve').click(function(){
retrieve();
});
$('#delete').click(function(){
deleteItem();
});
$('#review').click(function(){
reviewListOfItems();
});
$('#clear').click(function(){
clearAllItems();
});
});
</pre>
</div>
<br />
<b>Local storage:</b> It is persisted on the hardware. Local storage: There is a potential problem with session storage that is the storage is limit if u close the tab or browser the data is lost when the session is lost we can solve this with the local storage.<br />
<br />
Dont worry about local storage example just copy the above code and replace with localStorage where we have <span style="text-align: justify;">sessionStorage.</span><br />
<span style="text-align: justify;"><br /></span>
<span style="text-align: justify;">for example:</span><br />
<pre class="brush:js">function save()
{
var key = $('#key').val();
var value = $('#value').val();
localStorage[key] = value;
$('#data').html('<div>
Item is Saved</div>
');
}</pre>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com1tag:blogger.com,1999:blog-3534194497895437811.post-38916366923342512092014-12-13T15:28:00.000+05:302015-01-16T19:38:02.418+05:30Bootstrap Togglable Tabs Example<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
I think everyone knows about tabs so that am directly going into the topic how to create togglable tabs using bootstrap 3. By combining different sections we can create a togglable tabs structure. Here you can get one doubt whether the tabs are responsive or not, yes the tabs are completely responsive and easily fits according to your window size. Now away days there are different sizes of devices are rolling around the world so that i have created this tabs to suitable for all sizes. </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW7KkIUng4l3E-hTyGTOoXZ8wFBzGt2weRtgyPScGotftYT-pzBSZsjoOwxRzOvWi7TpuYpZYSIHan5MFJmCWEOm3TFFSo1yUkCGoxghKMqSR70rd7Qf3Qgznf2Phb4I3qvPyDJsLjuWE/s1600/fff.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span id="goog_1541625785"></span><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW7KkIUng4l3E-hTyGTOoXZ8wFBzGt2weRtgyPScGotftYT-pzBSZsjoOwxRzOvWi7TpuYpZYSIHan5MFJmCWEOm3TFFSo1yUkCGoxghKMqSR70rd7Qf3Qgznf2Phb4I3qvPyDJsLjuWE/s1600/fff.png" height="170" width="640" /><span id="goog_1541625786"></span></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><span style="text-align: justify;">By seeing the above screenshot you can observe that i have created four sections of information like about study with demo, android L, IOS 8 and Windows 10. Tabs are more useful at contact pages. I have done this example based on bootstrap v3.0.0 and jquery v 1.10.2. So please download the exact version of bootstrap.min.css, bootstrap.min.js, jquery.js and added one custom style.css file make a copy from the code and include it.</span><br />
<span style="text-align: justify;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=zfyBr_bMKc0" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2fGRsyyZhuZxPHKl1UN2g9MwZx2DaxfswI9Q-LA8Qg1IKuEl7KEURQqkbwAqebgvihkxRX2ue3fqCwOCPRMzwQPOtCIziGU3N68aURLB_pmIGAYqvHX1Egj7lw6pIv99XvFr4mwrou9I/s1600/mynew.png" /></a></div>
<div style="text-align: justify;">
<span style="text-align: justify;"></span></div>
<span style="text-align: justify;"><br /></span>
<span style="text-align: justify;">Images used in this example</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0PtLkkqCIW_qKnUS4DYbp0TeaWlqOVqLfh-FaBMWgbrKVslaUIETcd9rhs07xGDalFc_LxtgcySxESeZM0Q0UYJc7npOrVXs9TKTO1a8AW8nTt0tiaPh9SzCqRJpkXlYlpYxR5Izxlvo/s1600/gplay.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="google play" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0PtLkkqCIW_qKnUS4DYbp0TeaWlqOVqLfh-FaBMWgbrKVslaUIETcd9rhs07xGDalFc_LxtgcySxESeZM0Q0UYJc7npOrVXs9TKTO1a8AW8nTt0tiaPh9SzCqRJpkXlYlpYxR5Izxlvo/s1600/gplay.jpg" title="" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOVM__eNtLVg10L0O_KZVQ1aoRpw9kvUsM-RKmOqEsNK3M2-d6RKGs15azSTDXByc2GBRgI2yiuddmSKubLYQmNO4qwrrcH07fG0byOisA5bW1hQxqqglUF1LwBQLYaeRuHCDOizBf24Y/s1600/appstore.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="app store" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOVM__eNtLVg10L0O_KZVQ1aoRpw9kvUsM-RKmOqEsNK3M2-d6RKGs15azSTDXByc2GBRgI2yiuddmSKubLYQmNO4qwrrcH07fG0byOisA5bW1hQxqqglUF1LwBQLYaeRuHCDOizBf24Y/s1600/appstore.jpg" title="" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXExS6S9PRwzypJhTpj4XyAokuwyvdKd2CJteOX7zoHwnVd5s93USVgwoJvlfwIPawTlhzug6zaX76NJx__z80CyJ5K9vwrIFEbzjdT8U-xEh2MY7FqEBW3PIUZ5fcTd0jO1cZp8UeYOA/s1600/winstore.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="windows store" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXExS6S9PRwzypJhTpj4XyAokuwyvdKd2CJteOX7zoHwnVd5s93USVgwoJvlfwIPawTlhzug6zaX76NJx__z80CyJ5K9vwrIFEbzjdT8U-xEh2MY7FqEBW3PIUZ5fcTd0jO1cZp8UeYOA/s1600/winstore.jpg" title="" /></a></div>
<span style="text-align: justify;"><br /></span>
<br />
<div style="text-align: justify;">
<b>style.css</b><br />
<pre class="brush:css">
html, body{
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.7;
}
.myStyle{
background: #ffa753 ;
padding: 20px 0;
}
.myStyle small{
color: #eeefe9;
}
.myStyle a{
color: #fff;
}
.myStyle a:hover{
color: #333;
}
.tab-pane{
padding: 40px 10px 0 10px;
}
</pre>
</div>
<div>
<br /></div>
<div>
</div>
<div>
<b>index.html</b><br />
<pre class="brush:css"><!DOCTYPE html>
<html>
<head>
<title>Bootstrap Togglable Tabs Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="myStyle">
<div class="container">
<div class="row">
<div class="col-sm-6 tabbable">
<!-- Togglable Tabs go here -->
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#abt" data-toggle="tab">About</a></li>
<li><a href="#and" data-toggle="tab">Android L</a></li>
<li><a href="#ios" data-toggle="tab">iOS 8</a></li>
<li><a href="#win" data-toggle="tab">Windows 10</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="abt">
<p>study with demo is a technical website and author is shaik umar faruk currently
working as software engineer.</p>
</div>
<div class="tab-pane fade in" id="and"><p><img src="images/gplay.jpg"
alt="androidL" class="pull-right"> Android Lollipop is the new mobile operating system
developed by google.<br><span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">
</span><span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span></p></div>
<div class="tab-pane fade in" id="ios"><p><img src="images/appstore.jpg"
alt="ios" class="pull-right">iOS 8 is ready to hit iphone 6.<br> <span
class="glyphicon glyphicon-star"> </span><span class="glyphicon glyphicon-star">
</span><span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span><span
class="glyphicon glyphicon-star-empty"></span></p></div>
<div class="tab-pane fade in" id="win"><p><img src="images/winstore.jpg"
alt="windows" class="pull-right">Windows 10 is upcoming os developed by Microsoft.<br><span
class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">
</span><span class="glyphicon glyphicon-star"></span><span
class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty">
</span></p></div> </div> </div> </div> </div> </div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
</pre>
</div>
<div>
<div style="text-align: center;">
<br /></div>
</div>
<div>
<b><br /></b></div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com2tag:blogger.com,1999:blog-3534194497895437811.post-57087621218017378032014-12-10T22:06:00.001+05:302015-03-01T18:31:04.039+05:30 Datatable Server Side Processing Using Java<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Lets start creating datatable server side listing page using java. Datatable is an ultimate solution for those who want to develop listing pages. By using datatable we can can handle, render large and complicated data very easily. In this example I have implemented so many features like custom toolbar, initialized filter delay, added refresh and multiple search boxes at the top for individual column search. The processing of sorting, pagination and search is completely done at serverside using java.Technologies used in this example are java, servlet, jsp, jquery-datatable plugin and little bit css. You can also use this plugin in your frameworks like spring MVC and structs.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP9JMn4mDwnE2GrFYZmKcUan36BW9t-L8zgJumKA7zIL8B_M1SjzofCw2NAc6PZjfkvK8KKxXv6_ndksOXe3biRkwE3yHt_xcMILZDQd_TJ0xtVXgupw9VNfeaqUcKuED5TRj1EEFfAfA/s1600/Screenshot+(28).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Datatable serverside listing page using java" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP9JMn4mDwnE2GrFYZmKcUan36BW9t-L8zgJumKA7zIL8B_M1SjzofCw2NAc6PZjfkvK8KKxXv6_ndksOXe3biRkwE3yHt_xcMILZDQd_TJ0xtVXgupw9VNfeaqUcKuED5TRj1EEFfAfA/s1600/Screenshot+(28).png" height="340" title="" width="640" /></a></div>
<a name='more'></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<b>Eclipse Project Structure and caret image</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggaV8EImNvRdm45e3sXv4YA9NLgvMsmXRJvT7n-PbAKVcMBln12VcqF92Imzdd-KnZSIMHMareu1pUIJsHT_0YFKkaT-nDP0toyV84hhgZIlCDN2VNo_30TfY-YTJ9g6tGTdxHIbTJe2M/s1600/Screenshot+(27).png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggaV8EImNvRdm45e3sXv4YA9NLgvMsmXRJvT7n-PbAKVcMBln12VcqF92Imzdd-KnZSIMHMareu1pUIJsHT_0YFKkaT-nDP0toyV84hhgZIlCDN2VNo_30TfY-YTJ9g6tGTdxHIbTJe2M/s1600/Screenshot+(27).png" height="320" width="238" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF1_Uj6WGl8QNLohXd5PjVfQ0FfD8625-dnPCqQ5acx3_QO_tXTfQRUtKEJxoKzdxUmhrG1Dk0xSqd9R-ygWZ-15GDxK9GUglZZRpv_WDR3xVL3RfEMBhIyLs7cPOUFiQz3UbF0_TDoPo/s1600/caaret.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF1_Uj6WGl8QNLohXd5PjVfQ0FfD8625-dnPCqQ5acx3_QO_tXTfQRUtKEJxoKzdxUmhrG1Dk0xSqd9R-ygWZ-15GDxK9GUglZZRpv_WDR3xVL3RfEMBhIyLs7cPOUFiQz3UbF0_TDoPo/s1600/caaret.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=NXTvuo2N8AA&feature=youtu.be" rel="nofollow" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2fGRsyyZhuZxPHKl1UN2g9MwZx2DaxfswI9Q-LA8Qg1IKuEl7KEURQqkbwAqebgvihkxRX2ue3fqCwOCPRMzwQPOtCIziGU3N68aURLB_pmIGAYqvHX1Egj7lw6pIv99XvFr4mwrou9I/s1600/mynew.png" /></a></div>
<br />
The complete serverside logic is written in JqueryDatatablePluginDemo.java handles all incoming request and process the response.<br />
<br />
<b>iDisplayStart:</b> This is used to display initial point of data with pagination like 0, 10, 20, 30. For example your are displaying 10 records per page and you want to display 4th page set intially 30.<br />
<br />
<b>iDisplayLength: </b>Using this<b> </b>we can set records display range per each page.<br />
<br />
<b>iSortCol_0:</b> Used to get column index.
<br />
<br />
<b>sSortDir_0:</b> Used to get sorting direction. whether it is ascending(ASC) order or desending(DSC) order.
<br />
<br />
<b>iTotalRecords:</b> Total number of records.<br />
<b><br /></b>
<b>iTotalDisplayRecords:</b> Total number of display records.
<br />
<br />
sSearch and sSearch_0, 1, 2, 3, 4, sSearch_5 are used to get global filter and multi filter values.
<br />
<br />
<b>JqueryDatatablePluginDemo.java</b><br />
<pre class="brush:java">package com.studywithdemo;
import java.io.*;
import java.sql.*;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import org.json.*;
@SuppressWarnings("serial")
public class JqueryDatatablePluginDemo extends HttpServlet {
private String GLOBAL_SEARCH_TERM;
private String COLUMN_NAME;
private String DIRECTION;
private int INITIAL;
private int RECORD_SIZE;
private String ID_SEARCH_TERM,NAME_SEARCH_TERM,PLACE_SEARCH_TERM,CITY_SEARCH_TERM,
STATE_SEARCH_TERM,PHONE_SEARCH_TERM;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String[] columnNames = { "id", "name", "place", "city", "state","phone" };
JSONObject jsonResult = new JSONObject();
int listDisplayAmount = 10;
int start = 0;
int column = 0;
String dir = "asc";
String pageNo = request.getParameter("iDisplayStart");
String pageSize = request.getParameter("iDisplayLength");
String colIndex = request.getParameter("iSortCol_0");
String sortDirection = request.getParameter("sSortDir_0");
if (pageNo != null) {
start = Integer.parseInt(pageNo);
if (start < 0) {
start = 0;
}
}
if (pageSize != null) {
listDisplayAmount = Integer.parseInt(pageSize);
if (listDisplayAmount < 10 || listDisplayAmount > 50) {
listDisplayAmount = 10;
}
}
if (colIndex != null) {
column = Integer.parseInt(colIndex);
if (column < 0 || column > 5)
column = 0;
}
if (sortDirection != null) {
if (!sortDirection.equals("asc"))
dir = "desc";
}
String colName = columnNames[column];
int totalRecords= -1;
try {
totalRecords = getTotalRecordCount();
} catch (SQLException e1) {
e1.printStackTrace();
}
RECORD_SIZE = listDisplayAmount;
GLOBAL_SEARCH_TERM = request.getParameter("sSearch");
ID_SEARCH_TERM=request.getParameter("sSearch_0");
NAME_SEARCH_TERM=request.getParameter("sSearch_1");
PLACE_SEARCH_TERM=request.getParameter("sSearch_2");
CITY_SEARCH_TERM=request.getParameter("sSearch_3");
STATE_SEARCH_TERM=request.getParameter("sSearch_4");
PHONE_SEARCH_TERM=request.getParameter("sSearch_5");
COLUMN_NAME = colName;
DIRECTION = dir;
INITIAL = start;
try {
jsonResult = getPersonDetails(totalRecords, request);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
response.setContentType("application/json");
response.setHeader("Cache-Control", "no-store");
PrintWriter out = response.getWriter();
out.print(jsonResult);
}
public JSONObject getPersonDetails(int totalRecords, HttpServletRequest request)
throws SQLException, ClassNotFoundException {
int totalAfterSearch = totalRecords;
JSONObject result = new JSONObject();
JSONArray array = new JSONArray();
String searchSQL = "";
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
String dbConnectionURL = "jdbc:mysql://localhost:3306/faruk?user=root&password=root";
Connection con = DriverManager.getConnection(dbConnectionURL);
String sql = "SELECT " + "id, name, place, city, state, "
+ "phone " + "FROM " + "person " + "WHERE ";
String globeSearch = "id like '%" + GLOBAL_SEARCH_TERM + "%'"
+ "or name like '%" + GLOBAL_SEARCH_TERM + "%'"
+ "or place like '%" + GLOBAL_SEARCH_TERM + "%'"
+ "or city like '%" + GLOBAL_SEARCH_TERM + "%'"
+ "or state like '%" + GLOBAL_SEARCH_TERM + "%'"
+ "or phone like '%" + GLOBAL_SEARCH_TERM + "%'";
String idSearch="id like " + ID_SEARCH_TERM + "";
String nameSearch="name like '%" + NAME_SEARCH_TERM + "%'";
String placeSearch=" place like '%" + PLACE_SEARCH_TERM + "%'";
String citySearch=" city like '%" + CITY_SEARCH_TERM + "%'";
String stateSearch=" state like '%" + STATE_SEARCH_TERM + "%'";
String phoneSearch=" phone like '%" + PHONE_SEARCH_TERM + "%'";
System.out.println(phoneSearch);
if (GLOBAL_SEARCH_TERM != "") {
searchSQL = globeSearch;
}
else if(ID_SEARCH_TERM !="")
{
searchSQL=idSearch;
}
else if(NAME_SEARCH_TERM !="")
{
searchSQL=nameSearch;
}
else if(PLACE_SEARCH_TERM!="")
{
searchSQL=placeSearch;
}
else if(CITY_SEARCH_TERM!="")
{
searchSQL=citySearch;
}
else if(STATE_SEARCH_TERM!="")
{
searchSQL=stateSearch;
}
else if(PHONE_SEARCH_TERM!=null)
{
searchSQL=phoneSearch;
}
sql += searchSQL;
sql += " order by " + COLUMN_NAME + " " + DIRECTION;
sql += " limit " + INITIAL + ", " + RECORD_SIZE;
//for searching
PreparedStatement stmt = con.prepareStatement(sql);
ResultSet rs = stmt.executeQuery();
while (rs.next()) {
JSONArray ja = new JSONArray();
ja.put(rs.getString("id"));
ja.put(rs.getString("name"));
ja.put(rs.getString("place"));
ja.put(rs.getString("city"));
ja.put(rs.getString("state"));
ja.put(rs.getString("phone"));
array.put(ja);
}
stmt.close();
rs.close();
String query = "SELECT " + "COUNT(*) as count " + "FROM " + "person " + "WHERE ";
//for pagination
if (GLOBAL_SEARCH_TERM != ""||ID_SEARCH_TERM != "" || NAME_SEARCH_TERM != ""
||PLACE_SEARCH_TERM != ""||CITY_SEARCH_TERM != ""|| STATE_SEARCH_TERM != ""
|| PHONE_SEARCH_TERM != "" ) {
query += searchSQL;
PreparedStatement st = con.prepareStatement(query);
ResultSet results = st.executeQuery();
if (results.next()) {
totalAfterSearch = results.getInt("count");
}
st.close();
results.close();
con.close();
}
try {
result.put("iTotalRecords", totalRecords);
result.put("iTotalDisplayRecords", totalAfterSearch);
result.put("aaData", array);
} catch (Exception e) {
}
return result;
}
public int getTotalRecordCount() throws SQLException {
int totalRecords = -1;
String sql = "SELECT " + "COUNT(*) as count " + "FROM " + "person";
String dbConnectionURL = "jdbc:mysql://localhost:3306/myDB?user=root&password=root";
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
Connection con = DriverManager.getConnection(dbConnectionURL);
PreparedStatement statement = con.prepareStatement(sql);
ResultSet resultSet = statement.executeQuery();
if (resultSet.next()) {
totalRecords = resultSet.getInt("count");
}
resultSet.close();
statement.close();
con.close();
return totalRecords;
}
}
</pre>
<br />
<div>
</div>
<div>
</div>
<b>custom-datatable.js</b><br />
<pre class="brush:java">var table;
jQuery(document).ready(function() {
table = $('#personTable').dataTable({
"bPaginate": true,
"order": [ 0, 'asc' ],
"bInfo": true,
"iDisplayStart":0,
"bProcessing" : true,
"bServerSide" : true,
"sAjaxSource" : path+"/com/studywithdemo/JqueryDatatablePluginDemo.java",
"dom": 'C<"clear">lfrtip',
colVis: {
"align": "right",
restore: "Restore",
showAll: "Show all",
showNone: "Show none",
order: 'alpha',
"buttonText": "columns <img src=\"/datatableServersideExample/images/caaret.png\"/>"
},
"language": {
"infoFiltered": ""
},
"dom": 'Cf<"toolbar"">rtip',
})
.columnFilter({
aoColumns: [
{ type: "number"},
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
],
bUseColVis: true
}).fnSetFilteringDelay();
$("#personTable_length").hide();
$("div.toolbar").append('<div class="btn-group" style="padding:5px "><button
class="btn btn-default" id="refreshbtn" style="background:none;border:1px
solid #ccc;height:30px"
type="button"><span class="glyphicon glyphicon-refresh" style="padding:3px">
</span></button>
</div>');
$("div.toolbar").css("float","right");
$('#refreshbtn').click(function(){
table.fnStandingRedraw();
});
});
</pre>
<br />
<b>viewDatatable.jsp</b><br />
<pre class="brush:java"><%@ page import="java.util.*"%><!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var path = '${pageContext.request.contextPath}';
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap
/3.2.0/css/bootstrap.min.css">
<link href="http://cdn.datatables.net/1.10.3/css/jquery.dataTables.css" rel="stylesheet"
type="text/css">
<link href="http://datatables.net/release-datatables/extensions/ColVis/
css/dataTables.colVis.css"
rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script src="http://datatables.net/release-datatables/extensions/ColVis/js/
dataTables.colVis.js"
></script>
<script src="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/
js/jquery.dataTables.columnFilter.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/
assets/js/custom-datatable.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/
assets/plugin/fnStandingRedraw.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/
assets/plugin/fnSetFilteringDelay.js"></script>
<title>Person Form</title>
</head>
<body>
<form>
<div class="form">
<table width="100%" border="0" margin="0" padding="0"
class="row-border tableHeader" id="personTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Place</th>
<th>City</th>
<th>State</th>
<th>Phone</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Name</th>
<th>Place</th>
<th>City</th>
<th>State</th>
<th>Phone</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</div>
</form>
<style>
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
.tableHeader{
text-align:left;
}
tfoot {
display: table-header-group;
}
.dataTables_length
{
position: absolute;
top: 10px;
left: 220px;
}
.dataTables_info {
position: absolute;
top: 0px;
left: 5px;
}
.ColVis{
padding-right:10px;
padding-top:5px;
}
.dataTables_filter {
position: absolute;
top: 10px;
left: 200px;
font-size:15px;
}
.dataTables_filter input{
height:22px;
width:150px
}
input
{
-moz-border-radius: 15px;
border-radius: 3px;
border:solid 1px #c7c7c7;
padding:5px;
}
table.dataTable tbody td {
padding: 5px;
padding-left: 20px;
}
</style>
</body>
</html>
</pre>
<br />
<b>web.xml</b><br />
<pre class="brush:xml"><?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:jsp="http://java.sun.com/xml/ns/javaee/jsp"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>datatableServersideExample</display-name>
<servlet>
<servlet-name>JqueryDatatablePluginDemo</servlet-name>
<servlet-class>com.studywithdemo.JqueryDatatablePluginDemo</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>JqueryDatatablePluginDemo</servlet-name>
<url-pattern>/com/studywithdemo/JqueryDatatablePluginDemo.java</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>
/WEB-INF/views/viewDatatable.jsp
</welcome-file>
</welcome-file-list>
</web-app>
</pre>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br /></div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com46tag:blogger.com,1999:blog-3534194497895437811.post-61704127240897473312014-11-08T16:49:00.000+05:302018-02-28T15:14:13.671+05:30Data Export and Import using MySQL Workbench<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
MySQL Workbench is a visual database designing tool that integrates sql administration, sql development and database modeling. It is available on windows, Linux and mac os that means you can use MySQL document work on any of this platform and can use this unified integrated development environment for your MySQL database system. You can download MySQL workbench for free from the URL “<span style="color: #0b5394;">https://www.mysqlcom/products/workbench</span>”. MySQL workbench installation pretty straight forward.<br />
<br />
In MySQL Workbench under navigator session we have two important things
1. Data export 2. Data import. I will explain in detail with the help of
screenshots.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9LQ1THoer8xcTJ8n8HGDMPYfbjjTsCShKhlbk6IstAREsARGFc8KJXFO4UgPsxlRhuutACvXcKkXeqoLEGo56IIZD-GMJqMcbjBc-mEwpMTBQEl5qwnbMb0yPdJvO47KyQwCgb0MB_tw/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="382" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9LQ1THoer8xcTJ8n8HGDMPYfbjjTsCShKhlbk6IstAREsARGFc8KJXFO4UgPsxlRhuutACvXcKkXeqoLEGo56IIZD-GMJqMcbjBc-mEwpMTBQEl5qwnbMb0yPdJvO47KyQwCgb0MB_tw/s1600/8.png" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br />
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=OcoIqgnHG54" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxd5oLktVp4DSsLdSEXDynaVd0bjDhfIkwGO_mOuvNMs56UKk6TijXKCWGPydRClVtvL9ejNFU62vGvv4ARIqunWm2JWo-8vDrZ3bec8uSuCQgkDMSGxtHMC_kp6QjEhCWE6qcuSN0zPo/s1600/mynew.png" /></a></div>
</div>
<h2 style="text-align: justify;">
Backup Single Database with MySQL Workbench</h2>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Here we are in MySQL workbench double click on connection and enter the password. It opens a screen it shows in left side navigator option data export and data import. </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPFO9N_WlWgFpSflL7YMFFIt9oLGduiRRxy7v8XT3GF4gzImNGqx-mJDYLGKTSxnlDSFEybXJ3ZZxkcAKJcMIC78bDTxu20w6Xtoy8hE9wuSUSby55UPX-QRE9-Nu2KG2v8I9KzygvS4M/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPFO9N_WlWgFpSflL7YMFFIt9oLGduiRRxy7v8XT3GF4gzImNGqx-mJDYLGKTSxnlDSFEybXJ3ZZxkcAKJcMIC78bDTxu20w6Xtoy8hE9wuSUSby55UPX-QRE9-Nu2KG2v8I9KzygvS4M/s1600/1.png" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
First open data export it bring administrator screen where we can do data export in left side you can see all the database exists on the server. First we have to learn how can take backup of single database. Hence click on Sakila here are few options u can learn them later. Over here we have to specify the file were we are going to export the data from sakila database we will give a path to c:\backup folder in mysql bench right after that we enter the name of the file sakilabackup.sql .</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkxtf-os8_-2i7B3aR9qwQrbsVpRUXwKVpYSRL8jxUOVk1CfxauVTdNkULysvc3oWGdhfDyVX0wVNwnRTP_6M5ewR6cNnp2mMQWd0B2idDX-t4w0cm0cdrW8xdNdmU-4hNGc0tyJdNcRo/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkxtf-os8_-2i7B3aR9qwQrbsVpRUXwKVpYSRL8jxUOVk1CfxauVTdNkULysvc3oWGdhfDyVX0wVNwnRTP_6M5ewR6cNnp2mMQWd0B2idDX-t4w0cm0cdrW8xdNdmU-4hNGc0tyJdNcRo/s1600/2.png" width="640" /></a></div>
<br />
<div style="text-align: justify;">
Click on start export it will bring to second step of export process it
shows status export completed they are 23 different objects which are
exported successfully under ,ow up we can see various messages if u know
the technology my used to take backup enter base u can just look at
mysqldump.exe defaults and various options also to take backup u have
already learn in earlier module now u can see that mysql also use mysql
dump to take back of database. </div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPwyn62p-FGdQC6EVZd2dIJ5fHWHnUUkHsGgUybl4AAEOmeyyf_W5dsud7ACotRABip8z9NJEUDFqyAxqQeSNrO4y0kCs7SApCB6L3UbIX-iBNA4mGtGXJ2S9uHtrO2G1gN2GwsUYJ8w/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPwyn62p-FGdQC6EVZd2dIJ5fHWHnUUkHsGgUybl4AAEOmeyyf_W5dsud7ACotRABip8z9NJEUDFqyAxqQeSNrO4y0kCs7SApCB6L3UbIX-iBNA4mGtGXJ2S9uHtrO2G1gN2GwsUYJ8w/s1600/3.png" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<h2 style="text-align: justify;">
Backup Multiple Database with MySQL Workbench</h2>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
In reality most of the time we take backup of multiple database. lets see how we can export schema and data of multiple database with the help of MySQL Workbench. Go to MySQL workbench and click on data export under navigator pane. Select three databases now lets provide file name and location for data export. </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJsW3AAkj0HgUVarenDAvJRTp7_2x-BcGXhaRHKA38kVNTYwwJG75nGCiammW2R3jn8WN9oHXc4sR92uNkdJEkGC8t3UIasHFSeFjryUhmVSW7-szvhOu8kus7GdK0Hxp7PWc7gaIQ0hc/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJsW3AAkj0HgUVarenDAvJRTp7_2x-BcGXhaRHKA38kVNTYwwJG75nGCiammW2R3jn8WN9oHXc4sR92uNkdJEkGC8t3UIasHFSeFjryUhmVSW7-szvhOu8kus7GdK0Hxp7PWc7gaIQ0hc/s1600/5.png" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<h2 style="text-align: justify;">
Backup Individual Tables with MySQL Workbench</h2>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Some times we don't need backup of complete tables in database we need only one or more tables. If you want to take using command prompt it little bit complicated using workbench the same task becomes very easy. Lets see that how we can achieve that with the help of workbench. Select the database and click on the name of the database on the right side it displays all the tables exists in this database. Here we can select table and take backup.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh8haTrx8CYYEbQQOT7QL5Bqa404EgFw0ROqALs49SFrCp7jjTQnfcVZRYvp2zbPuFuiIUxnFQ6nRRMUaOvI1MlOlihwqLT5snZjd4qF9OZ9kVZhyphenhyphen6MWYv1FV9vq8s3v3fwF4SXo9thkk/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh8haTrx8CYYEbQQOT7QL5Bqa404EgFw0ROqALs49SFrCp7jjTQnfcVZRYvp2zbPuFuiIUxnFQ6nRRMUaOvI1MlOlihwqLT5snZjd4qF9OZ9kVZhyphenhyphen6MWYv1FV9vq8s3v3fwF4SXo9thkk/s1600/6.png" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<h2 style="text-align: justify;">
Restore Database from Single File with MySQL Workbench</h2>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
So far we have learn how to export database objects and data. Now we will see how to restore database objects and data from the dump files. Lets go to mysql workbench then click on data import/restore under navigator it will bring a screen Import from disk now select the Import from self-contained file and select the dump location of the database then click open and click on start import.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinU6PId3JiQVnyjvfBeSeAaOHklnYZhTa44uEC-UvSVJUelkfM-M8B2rMDz_Wqr2cTnPPaXEVzbFO9OcVN1yt1adEEKY8WxYf7iaM-UELkDf07rPY5Jr90ZPVXgLnoGuzMV_5inZUoD6E/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinU6PId3JiQVnyjvfBeSeAaOHklnYZhTa44uEC-UvSVJUelkfM-M8B2rMDz_Wqr2cTnPPaXEVzbFO9OcVN1yt1adEEKY8WxYf7iaM-UELkDf07rPY5Jr90ZPVXgLnoGuzMV_5inZUoD6E/s1600/7.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
</div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com0tag:blogger.com,1999:blog-3534194497895437811.post-12056319523051964752014-11-07T19:12:00.000+05:302018-02-28T15:15:13.011+05:30Backup and Restore MySQL Database using Command Prompt<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
In this article i have covered two modules Backup with mysqldump command and Restore with mysql command. Database concepts are considered as dry subject. I promised to make backup and recovery subject as interesting as possible it is very useful whenever developer or any user accidently drop database table and don’t have any backup, they want to audit database which existed quite a while ago. Sometime they have a backup and they don’t know how to restore it and something bad happens like disaster and they do not have data or any database backup. In addition to that human errors are going to be there always. So that am going to tell how to take efficient backup and recovery your database by restoring it to its original state.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJjFnns12cJ4eWiTUFIpY0G4Ua9V7EgjySfuKCpercu3orBA4sOoiDV-HjWv0UZx2piWqRpPXxSrxWmkqKfNdIloNMXw2TpfkQisccNEanGixO9mKaviOSU0Ojiy2d2XPw_qav4AUR4mg/s1600/success-failure-arrow-opposite-directions-pencil-vector-32219664+copy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Backup with mysqldump command and Restore with mysql command" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJjFnns12cJ4eWiTUFIpY0G4Ua9V7EgjySfuKCpercu3orBA4sOoiDV-HjWv0UZx2piWqRpPXxSrxWmkqKfNdIloNMXw2TpfkQisccNEanGixO9mKaviOSU0Ojiy2d2XPw_qav4AUR4mg/s1600/success-failure-arrow-opposite-directions-pencil-vector-32219664+copy.png" title="" width="374" /></a></div>
<a name='more'></a><br />
<br />
<h2 style="font-weight: bold; text-align: justify;">
Backup with mysqldump command.</h2>
<h2 style="font-weight: bold; text-align: justify;">
</h2>
<div style="text-align: justify;">
<b>Introduction to mysqldump:</b> Mysqldump is very powerfull command and very easy to use. By using this we can perform backup operations.</div>
<div style="text-align: justify;">
<br />
<b>Backup Single Database:</b> Now im going to take a backup of single database for that open the MySQL command line client and check the database names by using typing the command show databases.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Open Run-> cmd click ok.<br />
Cd <span style="color: #990000;">C:\Program Files\MySQL\MySQL Server 5.5\bin mysqldump –h 127.0.0.1 –u [uname] –p patientDB> c:\backup\singleDbBackup.sql</span><br />
After typing the command press enter it asks for <b>Enter Password</b> type the mysql password. <br />
-h means host name of the system<br />
-u username of the MySQL <br />
-p password of the MySQL</div>
<div style="text-align: justify;">
<br />
<b>Backup multiple Databases:</b> Now let us see how we can take backup of multiple database.<br />
<span style="color: #990000;">C:\Program Files\MySQL\MySQL Server 5.5\bin mysqldump –h 127.0.0.1 –u [uname] –p --database patientDB hospitalDB> c:\backup\twoDbBackup.sql</span><br />
Here we used –database option which is very popular in industry.It will be deprecated eventually. So many users are suggested to use –database option in future version.<br />
Note: Before taking backup of multiple database specify the two database names after --database keyword. If you forget to specify --database keyword it treats first name as database name and second name as table name so be carefull.<br />
<br />
<b>Backup All Databases:</b> Now we can learn how to take backup of all the databases.<br />
<span style="color: #990000;">C:\Program Files\MySQL\MySQL Server 5.5\bin mysqldump –h 127.0.0.1 –u [uname] –p --all-database> c:\backup\allDbBackup.sql</span><br />
By using –all-database command we can directly backup all the databases</div>
<div style="text-align: justify;">
<br />
<b>Backup Single Table:</b> If you want to backup single table from particular database use the below command<br />
<span style="color: #990000;">C:\Program Files\MySQL\MySQL Server 5.5\bin mysqldump –h 127.0.0.1 –u [uname] –p --database </span><span style="color: #990000;">patientDB</span><span style="color: #990000;"> –tables appointment> c:\backup\singleTable.sql</span><br />
However if you want to take backup of multiple table we can specify other names of the table right after rental.</div>
<div style="text-align: justify;">
<br />
<b>Backup Stored Routines: </b><br />
<span style="color: #990000;">C:\Program Files\MySQL\MySQL Server 5.5\bin mysqldump –h 127.0.0.1 –u </span><span style="color: #990000;"><span style="color: #990000;">[uname]</span> –p --</span><span style="color: #990000;">database --routines --no-create-info --no-data --no-create-db --skip-opt </span><span style="color: #990000;">patientDB</span><span style="color: #990000;">> c:\backup\sr.sql</span><br />
<br />
--no-create-info: will not create any table definition<br />
--no-data: will not create any table content<br />
--no-create-db: will not create database statement<br />
--skip-opt: will turn of option set by any other options<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/watch?v=AoZVLe2VqR4" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxd5oLktVp4DSsLdSEXDynaVd0bjDhfIkwGO_mOuvNMs56UKk6TijXKCWGPydRClVtvL9ejNFU62vGvv4ARIqunWm2JWo-8vDrZ3bec8uSuCQgkDMSGxtHMC_kp6QjEhCWE6qcuSN0zPo/s1600/mynew.png" /></a></div>
<h2 style="font-weight: bold; text-align: left;">
Restore with mysql command</h2>
<h2 style="font-weight: bold; text-align: left;">
</h2>
<div style="text-align: justify;">
In earlier module we learn how to take backup with the help of mysqldump command and now in this module we will restore the same backup with the help of mysql command.</div>
<div style="text-align: justify;">
<br />
<b>Restore Single Databases</b><br />
Open Run-> cmd press enter.<br />
Cd <span style="color: #990000;">C:\Program Files\MySQL\MySQL Server 5.5\bin mysql –h localhost –u </span><span style="color: #990000;"><span style="color: #990000;">[uname]</span> –p</span><span style="color: #990000;"> </span><span style="color: #990000;">patientDB</span><span style="color: #990000;"><c:\backup\singleDbBackup.sql</span></div>
<div style="text-align: justify;">
<br />
<b>Restore multiple Databases</b><br />
<span style="color: #990000;">C:\Program Files\MySQL\MySQL Server 5.5\bin mysql –h localhost –u </span><span style="color: #990000;"><span style="color: #990000;">[uname]</span> –p </span><span style="color: #990000;">< c:\backup\twoDbBackup.sql</span><br />
<br />
<div style="text-align: center;">
<span style="color: #990000;"> </span></div>
</div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com1tag:blogger.com,1999:blog-3534194497895437811.post-48587474547414307172014-10-24T16:51:00.000+05:302015-01-13T12:13:20.238+05:30What is JSON and its Uses?<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
JSON stands for javascript object notation and it is a text format that makes easy to share data between devices like clients and servers. JSON objects works like the way javascript object work, so infact it looks related to javascript objects but not to close. JSON available in many different languages like c, ruby, python and php. JSON is also an alternative to xml.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7rsx0iRbvK7ATPz_672LgCMRmz9DA70-DzpqwoByxjuJMSWsoJEnfR9JM69iZN8pQoe6gXNRCwhtbpNM04KQbGldWu6MS6O4-Z03kjvVSvlqEJnXOMv_Rgheu2pF_K-oKAjVr5ABB6mw/s1600/Untitled-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7rsx0iRbvK7ATPz_672LgCMRmz9DA70-DzpqwoByxjuJMSWsoJEnfR9JM69iZN8pQoe6gXNRCwhtbpNM04KQbGldWu6MS6O4-Z03kjvVSvlqEJnXOMv_Rgheu2pF_K-oKAjVr5ABB6mw/s1600/Untitled-1.png" height="320" width="640" /></a></div>
<div style="text-align: justify;">
<br />
<a name='more'></a><br /></div>
<div style="text-align: justify;">
<b>Advantages of JSON</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Very easy to read and super easy to parse. JSON uses minimum formatting and few special characters in addition to the data. In the above image you can see the json object with few key value pairs. The keys are in left hand side and values of keys in right hand side. For example key would be “full_name” and value be “Rahul”. Javascript can understand this as an object and we can access it. For example you can create object with this data and pass into a javascript object simply using javascript command call JSON.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Now we take a look at same data expressed in XML notation which is an other very popular format you can see that it is very larger than json. It means JSON data takes less space and loads faster in web application plus parsing an xml object is complicated and time consuming where as JSON can easily map into javascript object and consume less time.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div>
<b>Difference between JSON and Javascript</b></div>
<div>
<br /></div>
<div>
The Json declaration is a string with key and value pairs. In Json the keys are wrapped with double Quotes</div>
<div>
The keys with single quotation or with out quotation is not valid json.</div>
<div>
Json values have to be one of the six datatypes</div>
<div>
Strings, Objects, Arrays, Numbers, booleans or null.</div>
<div>
Here we created the javasript object</div>
<div>
It is very close to json string but we can see some difference for example we are missing Quotation. Quotes on key not necessary.</div>
<div>
Javascript object can be any data type including a function which u can do with json here we assigned a function to the key</div>
<div>
<br /></div>
<div>
<div>
<b>JavaScript and JSON</b></div>
<div>
<br /></div>
<div>
JavaScript and JSON objects are really very easy to generate so take a look at some examples how Different types of information expressed in this format. The most common type of data is expressed in key and values pairs</div>
<div>
<br /></div>
<div>
Var info = {</div>
<div>
"name" <span class="Apple-tab-span" style="white-space: pre;"> </span>: "Faruk",</div>
<div>
"age" <span class="Apple-tab-span" style="white-space: pre;"> </span>: 24,</div>
<div>
"company"<span class="Apple-tab-span" style="white-space: pre;"> </span>: www.studywithdemo.com</div>
<div>
};</div>
<div>
<br /></div>
<div>
<b>Usefull Points </b></div>
<div>
<br /></div>
<div>
Multiple values are separted by commas</div>
<div>
white space is for clearity and you can add any number of tabs, spaces.</div>
<div>
The last element no need of comma.</div>
<div>
Quotes are not required for numbers, true, false, null.</div>
<div>
<br /></div>
<div>
<b>Retrieving Values</b></div>
<div>
<br /></div>
<div>
Once data is parse into a variable it becomes a javascript object. Normally it is accessed though dot notation.</div>
<div>
<br /></div>
<div>
Console.log(info.name);</div>
<div>
Faruk</div>
<div>
<br /></div>
<div>
You can also use the [] notation. This is specially used for the reason keys are not using valid javascript names</div>
<div>
<br /></div>
<div>
Objects are also contains the list which are like array elements</div>
<div>
<br /></div>
<div>
Var info = {</div>
<div>
"name" <span class="Apple-tab-span" style="white-space: pre;"> </span>: "Faruk",</div>
<div>
"age" <span class="Apple-tab-span" style="white-space: pre;"> </span>: 24,</div>
<div>
"company"<span class="Apple-tab-span" style="white-space: pre;"> </span>: www.studywithdemo.com</div>
<div>
“hobbies”<span class="Apple-tab-span" style="white-space: pre;"> </span>: [</div>
<div>
“bloggging”</div>
<div>
“Singing” ]</div>
<div>
};</div>
<div>
Console.log(info.hobbies[1]);</div>
<div>
Singing</div>
<div>
<br /></div>
<div>
The Value of any element can also be an object</div>
<div>
Console.log(info.hobbies.link);</div>
<div>
<br /></div>
<div>
<b>Note: </b>while creating javascript objects we should take care about syntax.</div>
</div>
<div>
<br /></div>
</div>
</div>
farukhttp://www.blogger.com/profile/15119712200848837607noreply@blogger.com0