Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 34

My Home Page

Made in NetBeans IDE 7.4 on


1.
2.
3.
4.

Windows 7 Home Basic


i5 Processor @ 2.50 GHz
RAM 4 GB
64-bit Operating System
Created on : 24 Apr, 2014, 8:29:18 PM
Commenced on 3 May,2014,3:24:24PM

Project Consised of
1. 26 JSP Pages out of 24 Being used for user and admin side.
2. Images Folder for the Several Images the project Consists of.
3. Web.xml used for Servlet mapping & Web Application Deployment
descriptor.
4. Slider holds all the prctures frm the various sliders used in the project
/images & /Tooltips holds the pictures the folder also consists on 12 HTML
pages of the various slider prodects I have used in this project.
5. Coming to my source pakages ,7 pakages with database connaction.
6. /Libraries ,/Config Files & /Server Resources .

Google Search bar

Google search bar is located on all the user pages as it will be easier for them to
navigate to any other pages or search for anything needed or any information
they require.

Eg.

Code for G Search Bar


<div><script>
(function() {
var cx = '018234450843738192895:9iejvglfli4';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;

gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +


'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search></div>

Navagation Bar

Code for links


<ul>
<li class='active'><a
href='home.jsp'><span>Home</span></a></li>
<li><a href='casual.jsp'><span>Casual</span></a></li>
<li><a href='football.jsp'><span>Football</span></a></li>
<li><a href='running.jsp'><span>Running</span></a></li>
<li><a href='basketball.jsp'><span>Basketball</span></a></li>
<li><a href='womens.jsp'><span>Womens Shoes</span></a></li>
<li><a href='login.jsp'><span>Admin</span></a></li>
<li><a href='aboutus.jsp'><span>Contact Us</span></a></li>
</ul>

&

For css to work , you need the css pasted in the head tag under style
Following css code
<style>
#cssmenu {
background: #009999;
width: auto;
}
#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content: ' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
float: left;
display: block;
padding: 0;

}
#cssmenu ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding: 28px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 16px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #d6f011;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content: '';
display: block;
position: absolute;

right: -3px;
top: 20px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li a:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #d6f011;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {

color: #d6f011;
}
#cssmenu ul li.active a:before {
width: 100%;
}
@media screen and (max-width: 768px) {
#cssmenu ul li {
float: none;
}
#cssmenu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li a:after {
display: none;
}
#cssmenu ul li a:before {
height: 1px;
background: #ffffff;
width: 100%;
opacity: .2;
}
#cssmenu ul li.last > a:before,
#cssmenu ul li:last-child > a:before {
display: none;

}
}
</style>

Home page slider


Home page slider is different from other page sliders it is a online slider
with role over function , one you role over the complete picture will b able
to b seen.
Please look at page 1 for picture code snipit is below
<center>
<div id="cp_widget_95f2e1d5-e235-4106-937aae60966f8c8b">...</div><script type="text/javascript">
var cpo = []; cpo["_object"] ="cp_widget_95f2e1d5-e235-4106-937aae60966f8c8b"; cpo["_fid"] = "AsOAFlLIrfnx";
var _cpmp = _cpmp || []; _cpmp.push(cpo);
(function() { var cp = document.createElement("script"); cp.type =
"text/javascript";
cp.async = true; cp.src = "//www.cincopa.com/mediaplatform/runtime/libasync.js";
var c = document.getElementsByTagName("script")[0];
c.parentNode.insertBefore(cp, c); })(); </script><noscript>Powered by
Cincopa <a href='http://www.cincopa.com/video-hosting'>Video
Hosting</a> solution.</noscript>

</center>

FOOTER SECTION
<tr><td colspan="2" align="center" height="20"
bgcolor="#777d6a">Copyright Nikhil</td></tr>

Contact Us

This page has out information about our store and how to
conact us our store address and so on the find a store is a store
locator , it will locate our store for u.

Code for find a store is as follows


<form
action="https://www.google.co.in/maps/place/Nikhil+Shoes/@2
8.724607,77.178709,16z/data=!4m2!3m1!
1s0x390d01ee6a07849d:0x8239a824e8e9d25a"
method="post">
<input type="image"
src="Images/Home_FindStore.png" name="submit" />

</form> <br><br><br>

Moving on to the categories


they are
Casual

Football

Running

Basketball

Womens Shoes

I have added 2 shoes in each category and complete information about


the shoes when u click on the link
How does it work ?
The admin has to login , in the admin page

Code for login page


<section class="container">
<div class="login">
<h1>Login for Admin Modifications</h1>

<form method="post" action="NewServlet">


<p><input type="text" name="login" value=""
placeholder="Username"></p>
<p><input type="password" name="password" value=""
placeholder="Password"></p>

<p class="submit"><input type="submit" name="commit"


value="Login"></p>
</form>
</div>
</section>

And servlet code

import java.io.IOException;
import java.io.PrintWriter;
import static java.lang.System.out;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
*
* @author Nick
*/

@WebServlet(urlPatterns = {"/NewServlet"})
public class NewServlet extends HttpServlet {

/**
* Processes requests for both HTTP <code>GET</code> and
<code>POST</code>
* methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");

PrintWriter out = response.getWriter();


try {

String username=request.getParameter("login");
String password=request.getParameter("password");

if(username.equals("nikhil") && password.equals("admin"))


{
RequestDispatcher rd=
request.getRequestDispatcher("admin.jsp");

rd.forward(request, response);
}
else
{
out.println("<script>alert('Re-enter details')</script>");
RequestDispatcher rda=
request.getRequestDispatcher("login.jsp");
rda.forward(request, response);
}

/* TODO output your page here. You may use following sample
code. */
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet NewServlet</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Servlet NewServlet at " +
request.getContextPath() + "</h1>");
out.println("</body>");
out.println("</html>");
}
finally
{

}
}

// <editor-fold defaultstate="collapsed" desc="HttpServlet methods.


Click on the + sign on the left to edit the code.">
/**
* Handles the HTTP <code>GET</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
processRequest(request, response);
}

/**
* Handles the HTTP <code>POST</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override

protected void doPost(HttpServletRequest request,


HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}

/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>

Then the updating can be done by the login modification page

The pages are similar for all the other categories will be shown
in the demonstration

When u add the below code the code will be inserted in the
table though the edit casual servlet
<%--<td valign="top" style="border-bottom-right-radius: 8px;
border-top-left-radius: 8px; background-color: #FFFFFF;borderstyle: solid; border-color: #bebebe ">
<img src="Images/casual1thumbail.jpg"
width="85" height="110" alt=""/>
<div><a href="casual01.jsp" style="textdecoration: none; font-size: small;">&nbspRoadster
Men<br>&nbsp Dark Blue</a></div>
</td>
<td valign="top" style="border-bottom-right-radius: 8px;
border-top-left-radius: 8px; background-color: #FFFFFF;borderstyle: solid; border-color: #bebebe ">
<img src="Images/casual2thumbnail.jpg"
width="85" height="110" alt=""/>
<div><a href="casual02.jsp" style="textdecoration: none; font-size: small;">&nbspNike Men
Black<br>&nbspLiteforce II Mid</a></div>
</td>--%>

The casual jsp page consists of the following code to


retrieve the information.

<% DataSource ds=null;


Connection con=null;

Statement state=null;
ResultSet rs=null;
/* TODO output your page here. You may use following
sample code. */
try
{
Context ctx=new InitialContext();
if(ctx==null)
{
throw new RuntimeException("whjcbgfhkwdh");
}
ds=(DataSource)ctx.lookup("jdbc/nikhil");
con=ds.getConnection();
String q="select * from CASUAL";
state=con.createStatement();
rs=state.executeQuery(q);
// out.println("<div style='overflow:auto; width:550px;
height:700px;'>");
out.println("<table cellspacing='0px'
cellpadding='7px'>");
out.println("<tr>");
while(rs.next())
{

out.println("<td>"+rs.getString("CASUAL")
+"</div></td>");

//out.println("<td width='13%'><div style='color:


green; font-size: 13px; background-color:
#FFFFFF'>"+rs.getString("SPECS") +"</div></td>");
//out.println("<td width='50%'><div style='color:
#666666; font-size: 11px; background-color:
#FFFFFF'>"+rs.getString("DETAILS") +"</div></td>");
}
out.println("</tr>");
out.println("</table>");
// out.println("</div>");
}
catch(NamingException ex)
{
}
catch(SQLException ex)
{
}
%>

The edit casual servlet


/*
* To change this license header, choose License Headers in
Project Properties.
* To change this template file, choose Tools | Templates

* and open the template in the editor.


*/

package editcasual;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.sql.DataSource;

/**
*
* @author Nikhil
*/
public class editcasual extends HttpServlet {

DataSource ds=null;
Connection con=null;
PreparedStatement ps=null;

protected void processRequest(HttpServletRequest request,


HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

String casual=request.getParameter("casual");
try {
/* TODO output your page here. You may use following
sample code. */
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet acer</title>");
out.println("</head>");
out.println("<body>");
try{
Context ctx=new InitialContext();
if(ctx==null)
{
throw new RuntimeException("Connection not
found");

}
ds=(DataSource)ctx.lookup("jdbc/nikhil");
con=ds.getConnection();
ps=con.prepareStatement("insert into CASUAL
values(?)");
ps.setString(1,casual);
int vv=ps.executeUpdate();
if(vv>0)
{
out.println("<script>alert('inserted
succesfully')</script>");
RequestDispatcher
view=request.getRequestDispatcher("addcasual.jsp");
view.forward(request, response);
}
}
catch( NamingException | SQLException ex)
{

}
out.println("</body>");
out.println("</html>");
} finally {
out.close();
}

// <editor-fold defaultstate="collapsed" desc="HttpServlet


methods. Click on the + sign on the left to edit the code.">
/**
* Handles the HTTP <code>GET</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Handles the HTTP <code>POST</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs

*/
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>

The Services options will show u the databases

After adding anything in the add casual box it will


appear in the database n the retrieving function will
retrieve it n display it in the users casual shoes page.

This is to view the table I can edit and modify if any problem.

The comment box

or

Feedback

Here the user can comment on the shoe give any feedback any
opinions and even reviews
The best thing is that the comments are visible to other users
and they can reply to each other by commenting again even
the admin can reply to them.
The following code below in the casual 1 & casual 2 page
makes it possible to send and retrieve a comment when it is
made.
<div>
<form action="football2comment" method="post">
<div style="background-color: #FFFFFF; color: #cc0033;font-family:
sans-serif">USER OPINIONS AND REVIEWS</div><br>
<div style="font-size: small; color: #4a4949">Nick Name:</div><input
type="text" name="nickname"><br>
<div style="font-size: small; color: #4a4949">Email-ID:</div><input
type="email" name="emailid"><br>
<div style="font-size: small; color: #4a4949">Comment
here:</div><textarea name="comments" title="only 500 characters are
allowd" cols="40" rows="5"></textarea><br>

<input style="height: 20px" type="submit" value="Submit"


/><br><br>
</form>

</div>
<%
DataSource ds=null;
Connection con=null;
Statement state=null;
ResultSet rs=null;
try
{
Context ctx=new InitialContext();
if(ctx==null)
{
throw new RuntimeException("whjcbgfhkwdh");
}
ds=(DataSource)ctx.lookup("jdbc/nikhil");
con=ds.getConnection();
String q="select * from FEEDBACKWOMENS2 order by
COMMENTS desc";
state=con.createStatement();
rs=state.executeQuery(q);

out.println("<div style='overflow:auto; width:800px;


height:600px;'>");
while(rs.next())

{
out.println("<table>");
out.println("<tr><div style='font-size:12px;font-weight: bold
'>Name:</div><div style='background-color: #FFFFFF; color: #cc0033;
font-family: sans-serif'>"+rs.getString("NAME") +"</div></tr>");
out.println("<tr><div style='font-size:12px;font-weight:
bold'>E-Mail:</div><div style='color: #666666; font-size: 13px;
background-color: #FFFFFF'>"+rs.getString("EMAIL") +"</div></tr>");
out.println("<tr><div style='font-size:12px;font-weight:
bold'>Comment:</div><div style='color: #666666; font-size: 14px;
background-color: #FFFFFF'>"+rs.getString("COMMENTS")
+"</div></tr><hr>");
//out.println("</tr>");
out.println("</table>");
}
out.println("</div>");
}
catch(NamingException ex)
{
}
catch(SQLException ex)
{
}
%>

The following packages also need to be imported for the above code
snipet to work
<%@page import="javax.sql.DataSource"%>
<%@page import="java.sql.SQLException"%>
<%@page import="javax.naming.NamingException"%>
<%@page import="javax.naming.InitialContext"%>
<%@page import="javax.naming.Context"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
%@page import="java.sql.Connection"%

The servelet will have another code to send and receive the
comments frm the data base the code is as follows
/*
* To change this license header, choose License Headers in Project
Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/

package commentbox;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import javax.naming.Context;

import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.sql.DataSource;

/**
*
* @author Nikhil
*/
public class casual1comment extends HttpServlet {

DataSource ds=null;
PreparedStatement ps=null;
Connection con=null;

protected void processRequest(HttpServletRequest request,


HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();

String name=request.getParameter("nickname");
String mail=request.getParameter("emailid");
String comm=request.getParameter("comments");

if(name.length()==0 || mail.length()==0 || comm.length()==0)


{
out.println("<script>alert('Please Enter Details');</script>");
RequestDispatcher
view=request.getRequestDispatcher("casual01.jsp");
view.forward(request, response);
}
try {
/* TODO output your page here. You may use following sample
code. */
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet comment</title>");
out.println("</head>");
out.println("<body>");
if(name.length()>1 && mail.length()>1 && comm.length() >1)
{
try
{
Context ctx=new InitialContext();
if(ctx==null)
{
throw new RuntimeException("Connection not found");
}
ds=(DataSource)ctx.lookup("jdbc/nikhil");
con=ds.getConnection();

ps=con.prepareStatement("insert into FEEDBACKCASUAL1


values(?,?,?)");
ps.setString(1,name);
ps.setString(2,mail);
ps.setString(3,comm);
int vv=ps.executeUpdate();
if(vv>0)
{
out.println("<script>alert('inserted succesfully')</script>");
RequestDispatcher
view=request.getRequestDispatcher("casual01.jsp");
view.forward(request, response);
}
}
catch(NamingException | SQLException ex)
{
}
}
out.println("</body>");
out.println("</html>");
} finally {
out.close();
}
}

// <editor-fold defaultstate="collapsed" desc="HttpServlet methods.


Click on the + sign on the left to edit the code.">
/**

* Handles the HTTP <code>GET</code> method.


*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
processRequest(request, response);
}

/**
* Handles the HTTP <code>POST</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);

}
/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}

You might also like