Tuesday, October 25, 2016

Login module using jsp, servlet, JQuery, bootstrap by santosh sir

Login module using jsp, servlet, JQuery, bootstrap by santosh sir


index.jsp

<!-- Add a Navbar -->
<!-- Add a navbar at the top of the page that collapses on smaller screens: -->


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme Company</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    
/*    navigation bar css */
    .navbar {
    margin-bottom: 0;
    background-color: #f4511e;
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
}

.navbar li a, .navbar .navbar-brand {
    color: #fff !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: #f4511e !important;
    background-color: #fff !important;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}

/* navigation bar css */

#panel{  
    padding: 5px;  
    text-align: center;  
    background-color:#f4511e;  
    border: solid 1px #c3c3c3;
   
    float: ;
    margin-right:px;   
}  
#panel {  
    padding: 50px;  
    display:none;  
}  
</style>
</head>
<body>
<!-- adding  navigation bar -->
<div>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about" title="login" data-toggle="popover" data-placement="bottom" data-content="content">ABOUT</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#pricing">PRICING</a></li>
        <li><a href="#contact">CONTACT</a></li>
        <li><a href="#contact" id="flip" >LOGIN</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div id="panel">
<!-- form -->
<div class="container" style="float: left">  
   
  <form class="form-inline" role="form">  
    <form style="width:500px; float: left;" >  
  <div class="form-group">  
    <label for="exampleInputEmail1">Email address</label>  
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">  
  </div>  
  <div class="form-group">  
    <label for="exampleInputPassword1">Password</label>  
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">  
  </div>  
    
  <button type="submit" class="btn btn-default">Login</button>  
</form>  
</div>  

</div>
</div> 
<div class="jumbotron text-center">
  <h1>Company</h1>
  <p>We specialize in blablabla</p>
  <form class="form-inline">
    <input type="email" class="form-control" size="50" placeholder="Email Address" required>
    <button type="button" class="btn btn-danger">Subscribe</button>
  </form>
</div>
<!-- adding  navigation bar -->


<!-- java script for popover -->
<script>  
$(document).ready(function(){  
    $('[data-toggle="popover"]').popover();     
});  




$(document).ready(function(){  
    $("#flip").click(function(){  
        $("#panel").slideToggle("slow");  
    });  
});  
</script>  
</body>
</html>


loginServlet.java






Monday, October 17, 2016

Creating a mailing Module in Project using JSP and SERVLET by santosh sir

    Mailing Module in  Project  using  JSP and SERVLET

create table in oracle 

CREATE TABLE  "SUBSCRIBE" 
   ( "EMAILID" VARCHAR2(40)
   )
/

1. ConnectionProvider Class to give Connection to our application

1. Create index.jsp





<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme Company</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
.jumbotron {
    background-color: #f4511e; /* Orange */
    color: #ffffff;
}

.navbar {
    margin-bottom: 0;
    background-color: #f4511e;
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
}

.navbar li a, .navbar .navbar-brand {
    color: #fff !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: #f4511e !important;
    background-color: #fff !important;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}



</style>
</head>
<body>

<!-- navigation bar code  -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#pricing">PRICING</a></li>
        <li><a href="#contact">CONTACT</a></li>
        <li><a href="#contact">LOGIN</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="jumbotron text-center">
  <h1>Company</h1> 
  <p>We specialize in blablabla</p> 
  <form class="form-inline"  action="storemailid">
    <input type="email" class="form-control" size="50" placeholder="Email Address">
    <button type="button" class="btn btn-danger">Subscribe</button>
  </form>

<!-- this is the logic to show message to end user that he has subscribed..!! -->
 <%if((String)request.getAttribute("subMsg")!=null){%>
<div><span><%=(String)request.getAttribute("subMsg") %></span></div> 

 <%} %>  

</div>

</body>
</html>

2. storemailid.java (this is a servlet )






Sunday, October 16, 2016

Creating first dynamic Web project using Eclipse

Creating First Dynamic Web Application In Eclipse 

click on file

click on dynamic web project
Give Project Name
 SRC is the folder in which we will be writing all our .java files
Eclipse will compile it automatically and put it in build/classes folder
 select web.xml
project structure will be automatically generate by eclipse in project explore




NEXT WE ARE GOING TO WORK ON THIS  BOOTSTRAP TEMPLATE 
So please go through My Bootstrap Bolgs --->           CLICK HERE

Java Project Setup

INSTALLATION OF ECLIPSE AND INTEGRATION OF APACHE TOMCAT 
steps by steps guide to develop project in java  :

1. Download the project development tools
  -- > JDK 1.7
  -->  apache tomcat
  -->  oracle 10g
  -->  eclipse
2. Install all the above software
    --> keep apache port no:8082
    --> keep Oracle port no:8080






HOPE YOU ALL HAVE DOWNLOADED AND INSTALL THE REQUIRED SOFTWARE PROPERLY . IF YOU ARE HAVING ANY QUERIES DURING INSTALLATION OF ALL THE ABOVE SOFTWARE, PLEASE FEEL FREE TO ASK YOU QUERIES IN COMMENTS BOX BELOW.

NEXT STEP IS TO EXTRACT AND OPEN ECLIPSE :










CLICK ON WORKBENCH TO MOVE IN DEVELOPMENT TAB OF ECLIPSE



                                 THIS IS ECLIPSE DEVELOPMENT TAB