- Dashboard -> edit profile pic

- Image Preview
- Ajax

Edit Profile Pic

- Add a new method inside StudentDao for update Image inside Database table
- Design a form to upload image same as we have created for registration and upload
the image to target folder then call the method of Dao for updating image inside
database.

How to show preview of selected image inside jsp page

- Create an input filed for file upload (input type=file)
- Create an Image filed (<img src=' '>) for showing preview
- Create a javascript function like the given code and call it on change event of input
control.

<script>
function previewImage(e) {
const preview = document.getElementById('preview'); #id of img tag
preview.src = URL.createObjectURL(e.target.files[0]);
preview.onload = () => URL.revokeObjectURL(preview.src);
}

</script>

Student/header.jsp :
<%@page import="models.beans.Student"%>
<%
Student student =(Student)session.getAttribute("student");
%>
<nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
<div class="text-center navbar-brand-wrapper d-flex align-items-center justify-
content-center">
<a class="navbar-brand brand-logo mr-5" href="index.html"><img
src="images/logo.svg" class="mr-2" alt="logo"/></a>
<a class="navbar-brand brand-logo-mini" href="index.html"><img
src="images/logo-mini.svg" alt="logo"/></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
 <button class="navbar-toggler navbar-toggler align-self-center" type="button"
data-toggle="minimize">
<span class="icon-menu"></span>
</button>
<div style="display: inline-block; padding: 50px;font-size: 20px"> <center> <b>
welcome ${student.name}</b></center></div>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item dropdown">
<a class="nav-link count-indicator dropdown-toggle"
id="notificationDropdown" href="#" data-toggle="dropdown">
<i class="icon-bell mx-0"></i>
<span class="count"></span>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown
preview-list" aria-labelledby="notificationDropdown">
<p class="mb-0 font-weight-normal float-left dropdown-
header">Notifications</p>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-success">
<i class="ti-info-alt mx-0"></i>
</div>
</div>
<div class="preview-item-content">
<h6 class="preview-subject font-weight-normal">Application Error</h6>
<p class="font-weight-light small-text mb-0 text-muted">
Just now
</p>
</div>
</a>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-warning">
<i class="ti-settings mx-0"></i>
</div>
</div>
<div class="preview-item-content">
<h6 class="preview-subject font-weight-normal">Settings</h6>
<p class="font-weight-light small-text mb-0 text-muted">
Private message
</p>
 </div>
</a>
<a class="dropdown-item preview-item">
<div class="preview-thumbnail">
<div class="preview-icon bg-info">
<i class="ti-user mx-0"></i>
</div>
</div>
<div class="preview-item-content">
<h6 class="preview-subject font-weight-normal">New user
registration</h6>
<p class="font-weight-light small-text mb-0 text-muted">
2 days ago
</p>
</div>
</a>
</div>
</li>
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
id="profileDropdown">
<img src="../<%=student.getImage()==null?
"ProfilePics/notimg.png":student.getImage()%>" alt="profile"/>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-
labelledby="profileDropdown">
<a class="dropdown-item" href="editProfilePic.jsp">
<i class="ti-settings text-primary"></i>
Change Pic
</a>
<a class="dropdown-item" href="../StudentController?op=logout">
<i class="ti-power-off text-primary"></i>
Logout
</a>
</div>
</li>
<li class="nav-item nav-settings d-none d-lg-flex">
<a class="nav-link" href="#">
<i class="icon-ellipsis"></i>
</a>
</li>
 </ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center"
type="button" data-toggle="offcanvas">
<span class="icon-menu"></span>
</button>
</div>
</nav>

editProfilePic.jpg

<%@page contentType="text/html" pageEncoding="UTF-8"

import="models.beans.Student"%>
<%
Student student = (Student)session.getAttribute("student");
if(student==null){
response.sendRedirect("../login.jsp");
return;
}
%>

<!DOCTYPE html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Admin Dashboard</title>
<script>
function previewImage(e) {
const preview = document.getElementById('preview'); //id of img tag
 preview.src = URL.createObjectURL(e.target.files[0]);
preview.onload = () => URL.revokeObjectURL(preview.src);
}

</script>

<!-- plugins:css -->

<%@include file="csslinks.jsp"%>
</head>
<body>
<div class="container-scroller">
<!-- partial:partials/_navbar.html -->
<jsp:include page="header.jsp"></jsp:include>

<!-- partial -->

<div class="container-fluid page-body-wrapper">
<!-- partial:partials/_settings-panel.html -->
<!-- partial:partials/_sidebar.html -->
<jsp:include page="sidebar.jsp"></jsp:include>
<!-- partial -->
<div class="main-panel" style="height:100vh">
<!-- Main Content Area -->
<div class="row">
<div class="col col-md-6">
<center><br/><br/>
<h3>Upload Your Image </h3>
<form
action="../StudentController?op=editProfilePic&rollno=<%=student.getRollno()%>"
method="post" enctype="multipart/form-data" class="form form-group">
 <label for="mypic" class="form-control bg-dark text-white">Upload Your Profile
Image </label><br/>
<input type="file" id="mypic" name="mypic" class="form-control"
onchange="previewImage(event)"/>
<br/>
<br/>
<img style="width:200px;height: 200px;border-style:solid;border-width: 2px"
id="preview"/>
<br/><br/><br/>
<input type="submit" value="Update Profile Pic" name="submit" class="btn btn-
primary form-control"/>

</form>
</center>

</div>
</div>
</div>
</div>

<%@include file="myscript.jsp"%>
</body>

</html>

StudentDao.java
package models.doas;

import com.mysql.jdbc.ConnectionProperties;
import java.sql.*;
import models.beans.Student;
import java.util.ArrayList;
import models.connect.ConnectionProvider;

//to perform database operations :insert, update, delete,find,login, ....

//data can be received as argument in the form of variables or bean (multiple)
//data can be returned in the form of : bean(single row), arrayList(multple row/beans),
boolean
public class StudentDao {

public boolean insert(Student student) {

boolean status = false;
try {
Connection con = ConnectionProvider.getConnection();
String sql = "Insert into
students(rollno,name,age,mobile,city,classname,fee,cast,userid,password,image)values(?,
?,?,?,?,?,?,?,?,?,?)";
PreparedStatement smt = con.prepareStatement(sql);
smt.setInt(1, student.getRollno());
smt.setString(2, student.getName());
smt.setInt(3, student.getAge());
smt.setString(4, student.getMobile());
smt.setString(5, student.getCity());
smt.setString(6, student.getClassname());
smt.setInt(7, student.getFee());
smt.setString(8, student.getCast());
smt.setString(9, student.getUserid());
smt.setString(10, student.getPassword());
smt.setString(11, student.getImage());
int n = smt.executeUpdate();
 if (n > 0) {
status = true;
}
con.close();

} catch (Exception e) {
System.out.println("Insert error : " + e.getMessage());
}

return status;
}

public boolean delete(int rollno) {

boolean status = false;
try {
Connection con = ConnectionProvider.getConnection();
String sql = "delete from students where rollno=?";
PreparedStatement smt = con.prepareStatement(sql);
smt.setInt(1, rollno);
int n = smt.executeUpdate();
if (n > 0) {
status = true;
}
con.close();
} catch (Exception e) {
System.out.println("Deletion error : " + e.getMessage());
}
return status;
}
 public boolean update(Student student) {
boolean status = false;
try {
Connection con = ConnectionProvider.getConnection();
String sql = "update students set name=?, age=?,
mobile=?,city=?,classname=?,fee=?,cast=?,userid=?,password=? where rollno=?";
PreparedStatement smt = con.prepareStatement(sql);
smt.setString(1, student.getName());
smt.setInt(2, student.getAge());
smt.setString(3, student.getMobile());
smt.setString(4, student.getCity());
smt.setString(5, student.getClassname());
smt.setInt(6, student.getFee());
smt.setString(7, student.getCast());
smt.setString(8, student.getUserid());
smt.setString(9, student.getPassword());
smt.setInt(10, student.getRollno());

int n = smt.executeUpdate();
if (n > 0) {
status = true;
}
con.close();
} catch (Exception e) {
System.out.println("Update Error : " + e.getMessage());
}
return status;
}
public Student findByRollno(int rollno) {
Student student = null;
try {
Connection con = ConnectionProvider.getConnection();
String sql = "select * from students where rollno=?";
PreparedStatement smt = con.prepareStatement(sql);
smt.setInt(1, rollno);
ResultSet rs = smt.executeQuery();
if (rs.next()) {
student = new Student();
student.setRollno(rs.getInt("rollno"));
student.setName(rs.getString("name"));
student.setAge(rs.getInt("age"));
student.setMobile(rs.getString("mobile"));
student.setClassname(rs.getString("classname"));
student.setCast(rs.getString("cast"));
student.setCity(rs.getString("city"));
student.setFee(rs.getInt("fee"));
student.setUserid(rs.getString("userid"));
student.setPassword(rs.getString("password"));
student.setImage(rs.getString("image"));

}
} catch (Exception e) {
System.out.println("Find Error : " + e.getMessage());
}
return student;
}
public ArrayList<Student> findAll() {
ArrayList<Student> list = new ArrayList();
try {
Connection con = ConnectionProvider.getConnection();
String sql = "select * from students";
PreparedStatement smt = con.prepareStatement(sql);
ResultSet rs = smt.executeQuery();
while (rs.next()) {
Student student = new Student();
student = new Student();
student.setRollno(rs.getInt("rollno"));
student.setName(rs.getString("name"));
student.setAge(rs.getInt("age"));
student.setMobile(rs.getString("mobile"));
student.setClassname(rs.getString("classname"));
student.setCast(rs.getString("cast"));
student.setCity(rs.getString("city"));
student.setFee(rs.getInt("fee"));
student.setUserid(rs.getString("userid"));
student.setPassword(rs.getString("password"));
student.setImage(rs.getString("image"));
list.add(student);
}
} catch (Exception e) {
System.out.println("Find Error : " + e.getMessage());
}
return list;
}
public Student findByLoginDetail(String userid,String password) {
Student student = null;
try {
Connection con = ConnectionProvider.getConnection();
String sql = "select * from students where userid=? and password=?";
PreparedStatement smt = con.prepareStatement(sql);
smt.setString(1, userid);
smt.setString(2, password);
ResultSet rs = smt.executeQuery();
if (rs.next()) {
student = new Student();
student.setRollno(rs.getInt("rollno"));
student.setName(rs.getString("name"));
student.setAge(rs.getInt("age"));
student.setMobile(rs.getString("mobile"));
student.setClassname(rs.getString("classname"));
student.setCast(rs.getString("cast"));
student.setCity(rs.getString("city"));
student.setFee(rs.getInt("fee"));
student.setUserid(rs.getString("userid"));
student.setPassword(rs.getString("password"));
student.setImage(rs.getString("image"));

}
} catch (Exception e) {
System.out.println("Find Error : " + e.getMessage());
}
return student;
 }

public boolean updatePassword(int rollno, String newPwd) {

boolean status = false;
try {
Connection con = ConnectionProvider.getConnection();
String sql = "update students set password=? where rollno=?";
PreparedStatement smt = con.prepareStatement(sql);
smt.setString(1, newPwd);
smt.setInt(2, rollno);

int n = smt.executeUpdate();
if (n > 0) {
status = true;
}
con.close();
} catch (Exception e) {
System.out.println("Update Error : " + e.getMessage());
}
return status;
}

public boolean updateProfileImag(int rollno, String imgPath) {

boolean status = false;
try {
Connection con = ConnectionProvider.getConnection();
String sql = "update students set image=? where rollno=?";
PreparedStatement smt = con.prepareStatement(sql);
smt.setString(1, imgPath);
 smt.setInt(2, rollno);

int n = smt.executeUpdate();
if (n > 0) {
status = true;
}
con.close();
} catch (Exception e) {
System.out.println("Update Error : " + e.getMessage());
}
return status;
}

}
StudentController.java (Servlet)
…
…
doPost :
…

if(op!=null && op.equals("editProfilePic")){

int rollno = Integer.parseInt(request.getParameter("rollno"));
String path = ImageUtility.uploadImage(getServletConfig(), request, response,
"ProfilePics");
if(path!=null){
if(sd.updateProfileImag(rollno,path)){
HttpSession session = request.getSession();
Student student = (Student)session.getAttribute("student");
 student.setImage(path);
session.setAttribute("student", student);
response.sendRedirect("student/dashboard.jsp");
/*
HttpSession session = request.getSession();
session.removeAttribute("student");
response.sendRedirect("login.jsp");
*/
}
else
out.println("<font color='red'>Unable to save this record</font>");
}
}
…
…