Java,Android,j2ee and jsp tutorials blog: web designing-JavaTyro

Showing posts with label web designing. Show all posts

Monday 1 October 2012

How to use MSAccess as Database

In database, jquery, php, web designing // siddhu vydyabhushana // 4 comments

Microsoft Access is one of the part of MSOFFICE .It is a database management system from microsoft that combines the relational microsoft jet database engine with a graphical user interface and software development tools. we can also use this as oracle ,mysql database.... in first i used this one but present i addicted to php......for beginners it is very useful and interesting no use to write code for creating tables.....................

Login and Regisration Using Jsp:-

http://aitamelearning.blogspot.in/2012/10/login-and-registration-using-jsp-ms.html

NAME YOUR DATABASE: open MSACCESS in microsoft office

START->>>MICROSOFT OFFICE-->>msaccess

after that choose blank database and save it with example.accddb extension

CREATE TABLE : After RIGHT CLICK ON table1 and take Design View to create table.there is no need to write commands create table.

after clicking design view u can edit like this

and rename table1 with whatever u like

u create table and save the database in certain folder i am going explain to place it in tomcat server.for example if u name as example.accdb...u need to place it in

folder of web apps

CONFIGURATION:

Go to Control Panel -->and choose small icons instead of lage->> at next

click on Administrative Tools and select Data Sources

Click on Add to add database ---------------------------------------------------------

add *.mdb ,*.accdb Microsoft Access Driver and Finish.

in Data Source Name u choose name Whatever u like it will be used to call database in jsp.

Connection con=DriverManager.getConnection("jdbc:odbc:example","","");

on 4 line Database:
Select and set path where database was u successfully configured
if u have any doubts regarding to this topic leave doubts..

Siddhu vydyabhushana please subscribe to get this type posts to ur mail ...

live word preview using jquery

In ajax, Html, jquery, web designing // siddhu vydyabhushana // 3 comments

am sure that this post can really motivate to develop projects.

in my last posts i taught u about jquery functions. present i used keyup() function, html()

LIVE PREVIEW

1.JQUERY CODE:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<style>
input
{
width:300px;
height:50px;
}
</style>
<script>
$(function()
{
$('.username').keyup(function()
{
var username=$(this).val();

if(username!='')

$('.check').html(username);

});
});
</script>

2. HTML CODE:

<body>
<input type="text" name="username" class="username"><bR><span class="check" style="color:red;" >-------------</span>@aitamelearning.blogspot.com.
</body>

jQuery Cook Book for beginners

In Html, jquery, php, web designing // siddhu vydyabhushana // 1 comment

hello , i know u shocked because u may waiting for this type of material ,it was really help full to beginners ,already i completed and made tutorials on this in my last posts also...

while reading if u feel bore don't throw away ,leave present chapters and take another chapter..not only this one all 0'Really books are "REALLY SUPERB"..if u are interested download it by below link..

LAST POSTS RELATED TO JQUERY:

JQUERY PART-1

JQUERY PART-2

JQUERY PART-3

DOWNLOAD BOOK: HERE(AITAMELEARNING.BLOGSPOT.COM)

JQuery validation with Regular expressions

In Html, jquery, web designing // siddhu vydyabhushana // 1 comment

jQuery is a javascript library used to develop web applications.!
it will help u to develop good user interface.....in engineering
Regular Expressions will poke u..

after enter ur input into text it will automatically pops up....

Before going to develop u need to use jquery.validator.js

DOWNLOAD: https://www.box.com/s/iu027r2qbiqr8mid088m

jQuery code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.validator.addMethod("email", function(value, element) {  
return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);  
}, "Please enter a valid email address.");
    $("#signup").validate({

                rules: {

                        email: "required email",
                },
    
        });
  });



</script>

HTML CODE:

<style>
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}

label.error 
{

background-color:#9900cc;
color:#FFFFFF;
padding:3px;
}
</style>

</head>
<body>
<div align="center">

<form method="post" action="jqueryregthank.html" name="signup" id="signup">
<b>ENTER UR EMAIL:</b><br />
<input  type="text" name="email" id='email'><br />
<input type="submit" value=" Sign-UP " name='SUBMIT' id="SUBMIT"/>

Interesting presentationt's for students to learn jQUERY,AJAX,CSS,PHP,JAVASCRIPT

In css, how to, Html, jquery, web designing // siddhu vydyabhushana // 3 comments

i know as long long time u are waiting for this type of tutorials, by a simple presentation u can able to understand,learn all scripting languages here..the below list includes,ajax,how to write modular css, about java script libraries, jquery

AJAX:
Introduction to programming with Ajax. Covers XMLHttpRequest, XML, JSON, JavaScript, HTML, CSS, Dom Scripting, Event Handling with some examples from YUI library.

JQUERY:
A short introduction to jQuery in particular about functions, collections, grabbing values and chaining.

JAVASCRIPT:
An interesting Overview about the most popular JavaScript libraries (jquery, prototype, Scriptaculous...) for web designers.

CSS:
A clearly explained modular system that allows you to hide and show CSS rules to specific browsers without the need for extensive hacks or workarounds

jquery,css code to design post like facebook,google+

In css, Html, jquery, web designing // siddhu vydyabhushana // Leave a Comment

hi already in my last posts i discussed on

JQUERY ,CSS , tutorials but today as per many requests,present am going to explain on fb posts

LIVE DEMO DOWNLOAD

LAST POSTS ARE:

JQUERY PART-1 (INSTALLATION , CLICK())
JQUERY PART-1 (INSTALLATION , fadeIn(),fadeOut(),slideToggle())

css code to above posts:

<style>
#main
{
margin-left:300px;
overflow:auto;
margin-top:3px;
background:#eeeeee;
width:620px;

}
#popup_container {
font-family:'Lucida Grande',arial;
 font-weight:bold;
 
 text-align:left;
 font-size: 12px;
 width: 364px; 
 height: 86px; 
 background: #F3F3F3;
 
 border:solid 1px #dedede;
 border-bottom: solid 2px #456FA5;
 color: #000;
 
}

#popup_title {
display:none;
}



#popup_message {
padding-top: 15px;
padding-left: 15px;
}

#popup_panel {
text-align: left;
padding-left:15px;
 
}
#main_left
{

float:left;
width:100px;
background-color:#f2f2f2;
height:120px;
}
#main_right
{
height:100px;
border: solid 1px black;
float:right;
width:490px;
padding:10px;
background-color:#bdbdbd;
}
#delete
{
margin-top:auto;
float:right;
text-decoration:none;
color:blue;
border:solid 1px black;
padding:3 3px;
}
#like
{
margin-left:110px;
text-decoration:none;

}
#comment
{
margin-left:10px;
text-decoration:none;
}
#comment:hover
{
margin-left:10px;
text-decoration:none;
color:#333333;
}
#com
{
margin-left:150px;
}
#button
{
background:#bdbdbd;
border-radius:4px;
border:blue;
padding:1px;
text-decoration:none;
}
#button:hover
{
background:#eeeeee;
border-radius:4px;
border:blue;
padding:1px;
text-decoration:none;
}
</style>

Jquery code:

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

</script>
<script>
$(function()
{
$('#delete').click(function()
{
jConfirm('are u sure to delete?','Confirmation Dialouge',
function(r)
{
if(r==true)
{
$('#main').fadeOut(300);
}
});
});

$('#comment').click(function()
{
$('#com').slideToggle();
});
$('#like').click(function()
{
$(this).html('unlike');

});

});
</script>

HTML CODE:

<body bgcolor='#9900cc'>
<div id="main">
<div id="main_left">
<img src='67.jpg' width='100' height='100'></img>
</div>
<div id="main_right">
<a href='#' id='delete'>X</a>
hi, tutorial by siddhu vydyabhushana.<br>
<a href='#'>click here for tutorial aitamelearning.blogspot.com</a>

</div>
<a href='#' id='like'>like</a>
<a href='#' id='comment'>comment</a>
<div id='com'>
<textarea cols='35' rows='1'></textarea>&nbsp&nbsp<a href='#' id='button'>Comment</a>
</div>
<hr size='1' color:'#1e1e1e' />
</div>

JQUERY PART-3 VERY INTERESTING

In how to, Html, jquery, web designing // siddhu vydyabhushana // Leave a Comment

in my last posts i really enjoyed for ur good response , today am going to post on ANIMATE() .this is very interesting to do web projects..

LAST POSTS ARE:

JQUERY PART-1 (INSTALLATION , CLICK())

JQUERY PART-1 (INSTALLATION , fadeIn(),fadeOut(),slideToggle())

animation with animation() event:

while clicking the animate block1 button it calls block1 when we

press animate block2 button it calls block2 when we are going to

reset it uses $(selector).css() function

LIVE DEMO

<html>
<head>
  <style>
div {
  background-color:#bca;
  width:200px;
  height:1.1em;
  text-align:center;
  border:2px solid green;
  margin:3px;
  font-size:14px;
}
button {
  font-size:14px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<button id="go3">» Animate Both</button>

<button id="go4">» Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<script>

$( "#go1" ).click(function(){
  $( "#block1" ).animate( { width: "30%" }, 200)
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
});

$( "#go2" ).click(function(){
  $( "#block2" ).animate({ width: "90%" }, 1000 )
     .animate({ fontSize: "24px" }, 1000 )
     .animate({ borderLeftWidth: "15px" }, 1000 );
});

$( "#go3" ).click(function(){
  $( "#go1" ).add( "#go2" ).click();
});

$( "#go4" ).click(function(){
  $( "div" ).css({ width: "", fontSize: "", borderWidth: "" });
});

</script>

</body>
</html>

CHANGE BACKGROUND COLOR ON HOVER :

please download first CILCK HERE (jquery.color.js)

for this i am going to use jquery.color.js after
$(selector).hover(function()) and $(this).animate() enjoy this..

<style>
#div
{
background:#333333;
width:500px;
broder:1px;

}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(function()
{
$('#div').hover(function()
{
$(this).animate({
"backgroundColor":"#bdbdbd",
},5000);
});

});
</script>

<div id="div"> 
this is siddhu
</div>

play with Mouseover() and Mouseout() Events:
same as above exmaple but o mouse over and out it will be animate

this is siddhu

<style>
#div
{
background-color:#eeeeee;
border:solid 3px #9900cc; 
height:160px;
font-size:46px;
font-weight:bold;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(function()
{
$('#div').mouseover(function()
{
$(this).animate({
"backgroundColor":"#bdbdbd",
"borderBottomWidth":"10px",
"borderBottomColor":"green"
},1000);
}).mouseout(function()
{
$(this).animate({
"backgroundColor":"#333333",
"borderBottomWidth":"3px"

},1000);
});

});
</script>

<div id="div"> 

this is siddhu
</div>

JQUERY PART-2 FOR BEGINNERS

In jquery, web designing // siddhu vydyabhushana // Leave a Comment

Hello today this is my second post on jquery
for my last post i got good response

last post: JQUERY PART-1

in this i really want to discuss on EFFECTS AND HTML

EFFECTS: in this for

Fadein and fadeout:$().fadeIn() ,$().fadeOut()
sliding up and down:$().slideUp(),$().slideDown()
Sliding toggle:$().slideToggle()

am going to show examples on above events:

FADEIN AND OUT EVENT:
in the below eg fadeIn(speed,callback)

fadeIn("speed" or "slow")

else

fadeIn(300)

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

<script type="text/javascript">
$(function()
{
$('#fadeout').click(function()
{
$('#box').fadeOut("slow");
});
$('#fadein').click(function()
{
$('#box').fadeIn("slow");
});

});
</script>
<body>
<input type="button" value="fadein" id="fadein">
<input type="button" value="fadeout" id="fadeout">
<div id="box">

hello this is siddhu

</div>
</body>

learn attr() in jquery()
attr() is a function in jquery it will retrive the value from html
syntax: $().attr(property) property:-'id','class','href'

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

<script type="text/javascript">
$(function()
{
$('#link').click(function()
{
var id=$(this).attr("id");
alert(id);
});


});

</script>
<a href="http://aitamelearning.blogspot.com" id="link">siddhu tut link click here</a>
</body>

LEARN addClass() AND html() in JQUERY

get the html contents by html.$(selector).html()

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

<script type="text/javascript">
$(function() 
{
$('.link').click(function()
{
var href=$(this).attr("href");
$("h1").html(href);
});
});
</script>
<a href="http://aitamelearning.blogspot.com" >Click </a>
Link HREF value : <h1></h1>

Add specified class to each set ofelements.$(selector).addClass()

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

<script type="text/javascript">
$(function() 
{
$('.changeclass').click(function()
{
$(".big").addClass("small");
});
});
</script>
<a href="#" class="changeclass" >Click </a>
<div class="big">aitamelearning.blogspot.com</div>

css code:

.big
{
font-size:106px;
}
.small
{
font-size:12px;
}

JQUERY PART-1 FOR BEGINNERS

In jquery, web designing // siddhu vydyabhushana // Leave a Comment

JQUERY PART-1 FOR BEGINNERS

hi friends if u really want to learn JQUERY ,just follow the below steps...jquery is a awesome javascript library .its help you to develop good interface

This tutorials is very basic level i will show tut using CLICK() event...................

INSTALLATION:

before you use jquery function you download

jquery.js from jquery.com

JQUERY CODE:

we use this jquery in html files...

<script type="text/javascript">
$(document).ready(function()
{
alert("this is first tutby siddhu");
});
</script>

in the above script we used $(document).ready(function()
instead of that we can use function()
for example:

if u want to alert any code after loading of page we need to use $(window).load(function())

<script type="text/javascript">
$(window).load(function()
{
alert("this is first tutby siddhu");
});
</script>

JQUERY STRUCTURE:

we are using '$' symbol that indicates jquery
selector is a document object model,function executes parameters

$(selectors).function(parameters)

Selectors

Select DOM elements eg: $('h1') ,$('div'), $('li')..
Select ID : $('#id_name')

Select Class : $('.class_name')

WORKING WITH CLICK() EVENT:

syntax:$().click() below ex:

<script type="text/javascript">
$(function()
{
$('#button').click(function()
{
alert('button clicked by siddhu');
});
});
</script>
<body>
<input type="button" id="button" value="button">
</body>

HIDE AND SHOW WITH CLICK EVENT:
we use $().hide(),$().show() functions

<script type="text/javascript">
$(function()
{
$('.hide').click(function()
{
$('#div').hide();
});

$('.show').click(function()
{
$('#div').show();
});

});
</script>
<body>
<input type="button" class="hide" value="button">
<input type="button" class="show" value="button">
<div id="div">
u learned jquery part-1 by siddhu
</div>
</body>

Attractive page loading effect with jquery for blogger and websites

In jquery, web designing // siddhu vydyabhushana // 1 comment

Good evening friends today am surely telling u that this tutorial is really attractive and suspecious.Jquery is a lightweight framework ,it will provide attractive interface.for some changes we need to provide some images also.

first i will show this effect for blogger , follow the below steps

1. If u used blogger ,its good!! else If u interested in site its also good......

before </head> please paste the below code

$(window).load(function(){

    $("#md-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#md-loading").fadeOut("fast",function(){ $(this).remove(); });
    });

});
})(jQuery);

after please paste the below code after <body>

below code for all pages

<div id='md-loading'><div 
id='md-progress-bar'></div><div 
id='md-loader'>Loading...</div></div>

for only home page

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

 <div id='md-loading'><div  
id='md-progress-bar'></div><div  
id='md-loader'>Loading...</div></div></b:if>

thanq

SIDDHU VYDYABHUSSHANA

LOVE WEB DESIGNING,SCRIPTING,PROGRAMMING.

EMAIL::: VYDYAS[at]GMAIL.COM

Dynamic image selection by query and html

In how to, Html, jquery, web designing // siddhu vydyabhushana // Leave a Comment

hello friends in my there are some posts on jquery but today am interesting to post dynamic image selection

in my blog there is so many posts and tut based on jquery ,php, ajax, and html also. I think this is useful to u.

CODE IS :

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

$(document).ready(function()
{
$('#radio').click(function()
{
$('#female').hide();
$('#male').show();

});
$('#radio1').click(function()
{
$('#female').show();
$('#male').hide();

});


});
</script>
<form>
<input type="radio" name="choose" id="radio" checked="checked"/> male<br />
<input type="radio" name="choose" id="radio1"/> female<br />
</form>
<img id="male" src="male.jpg"></img>
<img id="female" src="female.jpg"></img>

the below code is constant we cant modifyit the file is in googleapis

"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

PHP script for password encryption

In how to, php, web designing // siddhu vydyabhushana // Leave a Comment

hi friends i explained and teach u about php in many posts but now i want teach u on topic password encryption. on registration page our password going to be stored in one particular location in our database.
last post relate to this is

in facebook,google they protected their password by using this method

DOWNLOAD ALL IN ONE FILE

1.At first you need to create a table with three coloumns
id must be tick auto increment,username,passcode

2. Databse connection db.php

<?php
mysql_connect("localhost","root","") or die("Opps some thing went wrong");
mysql_select_db("dream") or die("Opps some thing went wrong");
?>

3.Registration page

<?php
include("db.php");
if($_SERVER["REQUEST_METHOD"] == "POST")
{
// username and password sent from Form
$username=$_POST['username']; 
$password=$_POST['password']; 
$password=md5($password); // Encrypted Password
$sql="Insert into admin(username,passcode) values('$username','$password');";
$result=mysql_query($sql);
echo "Registration Successfully";
}
?>
<html>
<body>
<form action="registration.php" method="post">
<label>UserName :</label>
<input type="text" name="username"/><br />


<label>Password :</label>
<input type="password" name="password"/><br/>
<input type="submit" value=" Registration "/><br />
</form>
</body>
</html>

4.Login page

<?php
include("db.php");
session_start();
if($_SERVER["REQUEST_METHOD"] == "POST")
{
// aitamelearning.blogspot.com
$username=$_POST['username']; 
$password=$_POST['password']; 
$password=md5($password); // Encrypted Password
$sql="SELECT id FROM admin WHERE username='$username' and passcode='$password'";
$result=mysql_query($sql);
$count=mysql_num_rows($result);


if($count==1)
{
header("location: welcome.php");//its ur wish 
}
else 
{
$error="Your Login Name or Password is invalid";
}
}
?>
<form action="login.php" method="post">
<label>UserName :</label>
<input type="text" name="username"/><br />
<label>Password :</label>
<input type="password" name="password"/><br/>
<input type="submit" value=" Login "/><br />
</form>

Good web hosting sites

In web designing // siddhu vydyabhushana // Leave a Comment

hi friends its my second post in this day,but it was not technical it is related to information about web hosting

if u want to host ur own site into web ,there are many site but some are giving to less price

that are http://www.godady.com
http://www.bigrock.com
http://www.sriganeshhosting.in enjoy

css rounded corners for attracting website

In css, how to, web designing // siddhu vydyabhushana // 1 comment

already i gave more tutorials on cascade style sheets on my last posts ,what i posted it will really help full to u . today am here with css rounded corners concept to attract users

what i want to type here its in rounded corners like this u can also enjoy with this(aitamelearning.blogspot.com)

background-color: black;
color: #eeeeee;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

thanq

i wana show another type of :

hello hi this is siddhu

        -moz-border-radius-topleft: 3px;
 -webkit-border-top-left-radius: 3px; 
 -moz-border-radius-bottomright: 3px;
 -webkit-border-bottom-right-radius: 3px;

on below comment box:

u can give comments here freely if u have any doubts

 -moz-border-radius-topleft: 15px;
 -webkit-border-top-left-radius: 15px; 
 -moz-border-radius-topright: 15px;
 -webkit-border-top-right-radius: 8px;  
 -moz-border-radius-bottomleft: 15px;
 -webkit-border-bottom-left-radius: 15px;

background-url('https://www.opendrive.com/files/58027859_ZWb1H/siddhu%20-%20Copy.jpg') no-repeat center center fixed;
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;

Learn JQUERY hover effect easily & Live Demo

In how to, jquery, web designing // siddhu vydyabhushana // Leave a Comment

What is jQuery?

jQuery is a library of JavaScript Functions.

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

The jQuery library contains the following features:

HTML element selections
HTML element manipulation
CSS manipulation
HTML event functions
JavaScript Effects and animations
HTML DOM traversal and modification
AJAX

JQUERY POPOVER STYLE:

DOWNLOAD HERE

DEMO VIEW

Monday 1 October 2012

Sunday 23 September 2012

Saturday 22 September 2012

Thursday 20 September 2012

Saturday 8 September 2012

Friday 7 September 2012

Saturday 1 September 2012

Good evening friends today am surely telling u that this tutorial is really attractive and suspecious.Jquery is a lightweight framework ,it will provide attractive interface.for some changes we need to provide some images also.

first i will show this effect for blogger , follow the below steps

Sunday 26 August 2012

1.At first you need to create a table with three coloumns id must be tick auto increment,username,passcode

2. Databse connection db.php

3.Registration page

4.Login page

Saturday 25 August 2012

i wana show another type of :

on below comment box:

Friday 24 August 2012

Thursday 23 August 2012

About Me

Subscribe Here

Popular Posts

Labels

Android Tutorials

Articles on Java

1.At first you need to create a table with three coloumns
id must be tick auto increment,username,passcode