Web Application Development Lab

ST.
MARY’S GROUP OF INSTITUTIONS GUNTUR

(Approved by AICTE &Govt .of AP, Affiliated to JNTU-KAKINADA, Accredited by 'NAAC')
Chebrolu (V&M), Guntur (Dist), Andhra Pradesh, INDIA-522212
SCHOOL OF ENGINEERING
PRACTICAL RECORD
Name of the student: __________________________________________________
Course:______________Branch:____________Reg.No:______________________
Year:_____________ Semester:_______________ Regulation:_________________
Name of Laboratory:___________________________________________________
ST.MARY’S GROUP OF INSTITUTIONS GUNTUR
SCHOOL OF ENGINEERING
Certificate
This is to certify that Mr. / Ms.
bearing roll no of _______B. Tech semester
branch has satisfactorily
completed laboratory during the
academic year .
Place: Signature of Faculty

Date:
External Practical Examination held on:______________________
Signature of HOD
Signature of Internal Examiner Signature of External Examiner

ST.MARY’S GROUP OF INSTITUTIONS GUNTUR
Index
Signature of
S.No Name of the Program Page No. Date
the Faculty
week1: AUTHENTICATIONUSINGJAVASERVLET
Functionalities:
Here,wearegoingtocreatethesimpleexampletocreatetheloginformusingservlet.Wehaveusedoracle10gasthedatabase.
Thereare5filesrequired for thisapplication.
o index.html
o FirstServlet.java
o LoginDao.java
o SecondServlet.java
o web.xml
Youmustneedtocreateatableuserregwithnameandpassfields.Moreover,itmusthavecontainedsome data.
Thetableshouldbeas:
1.createtableuserreg(namevarchar2(40),passvarchar2(40));
INDEX.html
1. <formaction="servlet1"method="post">
2. Name:<inputtype="text"name="username"/><br/><br/>
3. Password:<inputtype="password"name="userpass"/><br/><br/>
4. <inputtype="submit"value="login"/>
5. </form>
FirstServlet.java
1. importjava.io.IOException;
2. importjava.io.PrintWriter;3.
4. importjavax.servlet.RequestDispatcher;
5. importjavax.servlet.ServletException;
6. importjavax.servlet.http.HttpServlet;
7. importjavax.servlet.http.HttpServletRequest;
8. importjavax.servlet.http.HttpServletResponse;
9. publicclassFirstServletextendsHttpServlet{
10. publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
11. throwsservletException,IOException{
12. response.setContentType("text/html");
13. PrintWriter out = response.getWriter();
14. Stringn=request.getParameter("username");
1
15. String p=request.getParameter("userpass");
16. if(LoginDao.validate(n,p)){
17. RequestDispatcherrd=request.getRequestDispatcher("servlet2");
18. rd.forward(request,response);
19. }
20. else{
21. out.print("Sorryusernameorpassworderror");
22. RequestDispatcherrd=request.getRequestDispatcher("index.html");
23. rd.include(request,response);
24. }
25. out.close();
26. }
27. }
LoginDao.java
1.importjava.sql.*;
2.publicclassLoginDao{
3. publicstaticbooleanvalidate(Stringname,Stringpass){
4. booleanstatus=false;
5. try{
6. class.forName("oracle.jdbc.driver.OracleDriver");
7. Connectioncon=DriverManager.getConnection(
8. "jdbc:oracle:thin:@localhost:1521:xe","system","oracle");
9. preparedStatementps=con.prepareStatement(
10. "select*fromuserregwherename=?andpass=?");
11. ps.setString(1,name);
12. ps.setString(2,pass);
13. ResultSetrs=ps.executeQuery();
14. status=rs.next();
16.}
17.catch(Exceptione){System.out.println(e);
18.}
19. returnstatus;
20. }
21. }
WelcomeServlet.java
1. importjava.io.IOException;
2
2. importjava.io.PrintWriter;
3. importjavax.servlet.ServletException;
4. importjavax.servlet.http.HttpServlet;
5. importjavax.servlet.http.HttpServletRequest;
6. importjavax.servlet.http.HttpServletResponse;
7. publicclassWelcomeServletextendsHttpServlet{
8. publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
9. throws ServletException,IOException{
10. response.setContentType("text/html");
11. PrintWriter out = response.getWriter();
12. Stringn=request.getParameter("username");
13. out.print("Welcome "+n);
14. out.close();
15. }
16. }
OUTPUT
3
Week2: AUTHENTICATION USING JSP
Functionalities
In this example of creating login form, we have used the DAO (Data Access Object), Factory method and
DTO (Data Transfer Object) design patterns. There are many files:
o index.jspit provides three links for login, logout and profile
o login.jspfor getting the values from the user

o loginprocess.jsp, a jsp file that processes the request and calls the methods.
o LoginBean.java, a bean class that have properties and setter and getter methods.
o Provider.java,aninterfacethatcontainsmanyconstantslikeDRIVER_CLASS, CONNECTION_URL,
USERNAME and PASSWORD
o ConnectionProvider.java, a class that is responsible to return the object of Connection. It uses the
Singleton and factory method design pattern.
o LoginDao.java, a DAO class that verifies the emailId and password from the database.
o logout.jspit invalidates the session.
o profile.jspit provides simple message if user is logged in, otherwise forwards the request to the login.jsp
page.
In this example, we are using the Oracle10g database to match the emailId and password with the database. The
table name is user432 which have many fields like name, email, pass etc. You may use this query to create the
table:
1. CREATE TABLE "USER432"

2. ("NAME" VARCHAR2(4000),
3. "EMAIL" VARCHAR2(4000),
4. "PASS" VARCHAR2(4000)
5. )
6. /
index.jsp
It simply provides three links for login, logout and profile.
1. <a href="login.jsp">login</a>|
2. <a href="logout.jsp">logout</a>|
3. <a href="profile.jsp">profile</a>
4
login.jsp
This file creates a login form for two input fields name and password. It is the simple login form, you can
change it for better look and feel. We are focusing on the concept only.
1. <%@ include file="index.jsp" %>

2. <hr/>
3. <h3>Login Form</h3>
4. <%String profile_msg=(String)request.getAttribute("profile_msg");
5. if(profile_msg!=null){
6. out.print(profile_msg);
7. }
8.String login_msg=(String)request.getAttribute("login_msg");
9.if(login_msg!=null){
10.out.print(login_msg);
11.}
12. %>
13. <br/>
14.<form action="loginprocess.jsp" method="post">
15.Email:<input type="text" name="email"/><br/><br/>
16.Password:<input type="password" name="password"/><br/><br/>
17.<input type="submit" value="login"/>"
18.</form>
loginprocess.jsp
This jsp file contains all the incoming values to an object of bean class which is passed as an argument in the
validate method of the LoginDao class. If emailid and password is correct, it displays a message you are
successfully logged in! and maintains the session so that we may recognize the user.
1. <%@page import="bean.LoginDao"%>
2. <jsp:useBean id="obj" class="bean.LoginBean"/>
3.<jsp:setProperty property="*" name="obj"/>
4. <% booleanstatus=LoginDao.validate(obj);
5. if(status){
6. out.println("You r successfully logged in");
10.session.setAttribute("session","TRUE");
11.}
12.else
13.{
14.out.print("Sorry, email or password error");
15.%>
16.<jsp:include page="index.jsp"></jsp:include>
17.<%
5
18.}
19.%>
LoginBean.java
It is the bean class that have 2 properties email and pass with its setter and getter methods.
1. package bean;
2.public class LoginBean {
3. private String email,pass;
4. public String getEmail() {
5. return email;
6. }
7.
8. public void setEmail(String email) {
9. this.email = email;
10}
11.public String getPass() {
12. return pass;
13.}
14.
15.public void setPass(String pass) {
16. this.pass = pass;
17.
}
18.
.
23.
}
Provider.java
This interface contains four constants that may differ from database to database.
1. package bean;
2.public interface Provider {
3. String DRIVER="oracle.jdbc.driver.OracleDriver";
4. String CONNECTION_URL="jdbc:oracle:thin:@localhost:1521:xe";
6. 5. String USERNAME="system";
6. String PASSWORD="oracle";
8. }
ConnectionProvider.java
This class provides a factory method that returns the object of Connection. Here, driver class is loaded only
once and connection object gets memory only once because it is static.
6
1. package bean;
2. import java.sql.*;
3. import static bean.Provider.*; 4.
5. public class ConnectionProvider {
6. private static Connection con=null;
7. static{
8. try{
9. Class.forName(DRIVER);
10.con=DriverManager.getConnection(CONNECTION_URL,USERNAME,PASSWORD);
11.}catch(Exception e){}
12.}
13.
14.public static Connection getCon(){
15. return con;
16.}
17.
18.}
LoginDao.java
This class varifies the emailid and password.
1. package bean;
2. import java.sql.*;
3. public class LoginDao{
4.. public static booleanvalidate(LoginBean bean){
5. booleanstatus=false;
6. try{
7. Connection con=ConnectionProvider.getCon();
9.PreparedStatement ps=con.prepareStatement(
10."select * from user432 where email=? and pass=?");
12.ps.setString(1,bean.getEmail());
13.ps.setString(2, bean.getPass());
14.ResultSet rs=ps.executeQuery();
15.status=rs.next();
16.
17.}catch(Exception e){}
18.
19.return status;
20. }
21.}
7
OUTPUT
8
Week3 :CONNECT JSP WITH MYSQL
1. Create a database:
First create a database named usermasterinmysql. Before running the jsp code you need to
paste mySqlConnector.jar in lib directory of jdk.
mysql> create database usermaster;
(This query create database in my sql
command prompt)
2. Connect JSP with mysql:

Here is the jsp code.
ConnectJspToMysql.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page import="java.sql.*" %>

<%@ page import="java.io.*" %>
<html>
<head>
<title>Connection with mysql
database</title></head>
<body>
<h1>Connection status
</h1><%
try {
/* Create string of connection url within specified format with machine
name, port number and database name. Here machine name id localhost
and database name isusermaster. */
String connectionURL = "jdbc:mysql://localhost:3306/usermaster";
// declare a connection by using Connection

interface Connection connection = null;
// Load JBBC driver

"com.mysql.jdbc.Driver"Class.forName("com.mysql.jdbc
.Driver").newInstance();
/* Create a connection by using getConnection() method that takes parameters of

string type connection url, user name and password to connect to database. */
connection = DriverManager.getConnection(connectionURL, "root", "root");
// check weather connection is established or not by isClosed() method

if(!connection.isClosed())
%>
<font size="+3"
color="green"></b>
9
<%
out.println("Successfully connected to " + "MySQL server using
TCP/IP..."); connection.close();
}
catch(Exception ex){
%>
</font>
<font size="+3" color="red"></b>
<%
out.println("Unable to connect to database.");
}
%>
</font>
</body>
</html>
OUTPUT
10
Week4:Design and development of Online Book Shop using JSP/Node.js & React.js
Frameworks used in this application

Front-end Development
1. HTML5
2. CSS3
3. BOOTSTRAP
4 4. jQuery
Back-end Development
1. MongoDB
2.Express.js
3. Node.js
4. Passport.js
Functionalitites
1.Name of the book can be added
2.Author name can be added
3.Type of the Department can be selected
4.The books can be found below.
Admin module functionalities

1.Search option is enhanced to find your books
User module functionalities

1.user can add books
FRONT END CODE
<!doctype html>
<html lang="en">
<head>



<script src="libraryscript.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
<script src=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
</body>
<footer id="site-info">
<center>Copyright © AV DIGI LIBRARY
2022</center></footer>
</html> 13
BACK END CODE
console.log('This is ABHINAV VELAGA Project');

class Library {
constructor(name, author, type) {
this.name = name;
this.author = author;
this.type = type;
}
}
class Display {
add(bookoflibrary) {
console.log("Adding to UI");
let tableBody = document.getElementById('tableBody');
let uiString = `<tr>
<td>${bookoflibrary.name}</td>
<td>${bookoflibrary.author}</td>
<td>${bookoflibrary.type}</td>
</tr>`; tableBody.innerHTML +=
uiString;
}
clear() {
let libraryForm = document.getElementById('libraryForm');
libraryForm.reset();
}
validate(bookoflibrary) {
if (bookoflibrary.name.length< 2 || bookoflibrary.author.length< 2) {
return false
}
else {
return true;
}
}
show(type, displayMessage) {
let message = document.getElementById('message'); let
boldText;
if (type === 'success') {
boldText = 'Success';
}
else {
boldText = 'Error!'; }
message.innerHTML = `<div class="alert alert-${type} alert-dismissible fade show" role="alert">
<strong>${boldText}:</strong> ${displayMessage}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
14
<span aria-hidden="true">×</span>
</button>
</div>`;
setTimeout(function () {
message.innerHTML = ''
}, 5000);
}
}
//Add submit event listener to libraryForm

libraryForm.addEventListener('submit', libraryFormSubmit);
function libraryFormSubmit(e) {
console.log('YOu have submitted library form');
let name = document.getElementById('bookName').value;
let author = document.getElementById('author').value;
let type;
let philippine = document.getElementById('philippine');
let programming = document.getElementById('programming');
let science = document.getElementById('science');
if (philippine.checked) {
type = philippine.value;
}
else if (programming.checked) {
type = programming.value;
}
else if (science.checked) {
type = science.value;
}
let bookoflibrary = new Library(name, author, type);
console.log(bookoflibrary);
let display = new Display();
if (display.validate(bookoflibrary)) {
display.add(bookoflibrary);
display.clear();
display.show('success', 'Your book has been successfully added') }
else {
// Show error to the user
display.show('danger', 'Sorry you cannot add this book'); }
e.preventDefault(); }
15
OUTPUT
16
Week5 : Design and development of Online Examination using JSP/Node.js & React.js

5. HTML5
6. CSS3
7. BOOTSTRAP 4
8. jQuery
5. MongoDB
6. Express.js
7. Node.js
8. Passport.js
Functionalitites
1.Name of the exam can be added
2.Access to multiple choice questions is given
3.only single answer can be selected to ensure no wrong is
on. 4.The score is given at the end of the exam

1.Examination can be conducted in a quickie manner

1.user can answer the questions and know how many marks he secure
FRONT END CODE
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Abhinav Examination Solutions</title>
<style type="text/css">
div#test {
border: #000 1px solid; padding:
10px 40px 40px40px; width:
640px;
margin: auto; border-
radius: 12px;
background-color: blue; color:
rgb(252, 252, 252);
}
</style> 17
<center>
<h1 style="background-color: rgb(113, 16, 231);
color: white;">AV EXAM MANAGEMENT SYSTEM EXAMINATION</h1>
</center>
<script language="javascript" type="text/javascript" src="script.js"></script>
</head>
<body>
<h2 id="test_status" style="text-align:center;"></h2><div
id="test"></div>
</body>
</html>
BACK END
var pos = 0, test, test_status, questions choice, choices, chA, chB, chC, correct = 0;
var questions = [
["Who created python flask?", "Armin Ronacher", "Jude Suares", "Adrian Mercurio", "A" ],
["Who created javascript?", "Brendan Eich", "Kimmy Matillano", "Saxon Ong", "A"],["Who created java?",
"James Gosling", "Princely Ceasar", "July King Kadayuna", "A"],
["Who created c# language?", "Microsoft Corporation", "Google Company", "You Tube
Corporation", "A"],
["Who created php?", "Rasmus Lerdorf", "Grace Patulada", "Nikko Curaza", "A"],
["Who created itsourcecode.com?", "Charlotte Villanueva", "Joken Villanueva", "NikoEmbang", "B"],
["Who created laravel?", "BoknoiVillaflor", "Taylor Otwell", "Ryan Manaay", "B"],
["Who created database?", "Edgar Frank Codd", "Paul Niar", "Given Bariacto", "A"],
["Who created c++ language?", "Kirk Eriman", "Bjarne Stroustrup", "JomhelDulla","B"],
["Who created c language?", "Dennis Ritchie", "Daniel Bandiola", "CarlanPellobello", "A"]
];
function _(x){
return document.getElementById(x);
}
function renderQuestion(){
test = _("test");
if(pos >= questions.length){
test.innerHTML = "<h3>You got "+correct+" of "+questions.length+" questions
correct</h3>";
_("test_status").innerHTML = "Exam Completed";
pos = 0;
correct =0;
return false;
}
_("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
question = questions[pos][0];
18
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "<h3>"+question+"</h3>";
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>"; }
function checkAnswer(){
choices = document.getElementsByName("choices");
for(var i=0; i<choices.length; i++){
if(choices[i].checked){
choice = choices[i].value;
}
}
if (choice == questions[pos][4]){
correct++;
}
pos++;
renderQuestion(); }
window.addEventListener("load", renderQuestion, false);
OUTPUT
19
Week6:Design and development of online ticket reservation system using JSP/Node.js &
React.js
1.HTML5
2.CSS3 3.BOOTSTRAP
4 4.jQuery
1.MongoDB 2.Express.js
3. Node.js
4. Passport.js
Functionalitites
1.From location can be selected 2.Destination
source can be selected 3.Date can be selected
4.Round or One way can be selected

1.Can confirm the ticket status after payment gateway

1.can login and book tickets
FRONT END
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Abhinav Tours and Travels</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/fontAwesome.css">
<link rel="stylesheet" href="css/hero-slider.css">
<link rel="stylesheet" href="css/owl-carousel.css">
20
<link rel="stylesheet" href="css/datepicker.css">
<link rel="stylesheet" href="css/tooplate-style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800"
rel="stylesheet">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body><section class="banner" id="top">
<div class="container">
<div class="rw">
<div class="col-md-5">
<div class="left-side">
<div class="logo">
<imgsrc="img/logo.png" alt="Flight Template"></div>
<div class="tabs-content">
<h4><b>
<font size="+3 ">Abhinav Tours and Travels</font>
</b></h4>
<ul class="social-links">
<li><a href="http://facebook.com">Find us on <em>Facebook</em><i
class="fa fa-facebook"></i></a></li>
<li><ahref="http://youtube.com">Our <em>YouTube</em>Channel<i
class="fa fa-youtube"></i></a></li>
<li><a href="http://instagram.com">Follow our<em>instagram</em><i
class="fa fa-instagram"></i></a></li>
</ul></div>
<div class="page-direction-button">
<a href="contact.html"><i class="fa fa-phone"></i>Contact Us Now</a>
</div></div></div>
<div class="col-md-5 col-md-offset-1">
<section id="first-tab-group" class="tabgroup">
<div id="tab1">
<div class="submit-form">
<h4>Check availability for <em>direction</em>:</h4>
<form id="form-submit" action="" method="get">
<div class="row">
<fieldset>
<label for="from">From:</label>
<select required name='from' onchange='this.form.()'>
<option value="">Select a location...</option>
<option value="Cambodia">Cambodia</option>
<option value="Hong Kong">Hong Kong</option>
21
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="Korea">Korea</option>
<option value="Laos">Laos</option>
<option value="Myanmar">Myanmar</option>
<optionvalue="Singapore">Singapore</option>
<option value="Thailand">Thailand</option>
<option value="Vietnam">Vietnam</option>
</select>
</fieldset>
</div>
<fieldset>
<label for="to">To:</label>
<select required name='to'onchange='this.form.()'>
<option value="">Select a location...</option>
<option value="Cambodia">Cambodia</option>
<option value="Hong Kong">Hong Kong</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="Korea">Korea</option>
<option value="Laos">Laos</option>
<option value="Myanmar">Myanmar</option>
<optionvalue="Singapore">Singapore</option>
<option value="Thailand">Thailand</option>
<option value="Vietnam">Vietnam</option>
</select></fieldset>
</div>
<fieldset>
<label for="departure">Departure date:</label>
<input name="deparure" type="text" class="form-control date"
id="deparure" placeholder="Select date..." required=""
onchange='this.form.()'></fieldset>
</div>
<div class="col-md-6"><fieldset>
<label for="return">Return date:</label>
<input name="return" type="text" class="form-control date" id="return"
placeholder="Select date..." required="" onchange='this.form.()'>
</fieldset></div>
<div class="col-md-6"
<div class="radio-select"><div class="row">
<div class="col-md-6 col-sm-6 col-xs-6"><label for="round">Round</label>
22
<input type="radio" name="trip"
id="round" value="round"
required="required" onchange='this.form.()'>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="oneway">Oneway</label>
<input type="radio" name="trip"
id="oneway" value="one-way"
required="required" onchange='this.form.()'>
</div></div></div></div>
<fieldset>
<button type="submit" id="form-submit"
class="btn">Order Ticket
Now</button>
</fieldset>
</div></div></form></div></div>
</section>
</div></div></div>
</section>
<div class="tabs-content" id="weather">
<div class="row">
<div class="section-heading">
<h2>Check Weather For 5 NEXT days</h2>
</div></div>
<div class="wrapper">
<div class="weather-content">
<div class="row">
<ul class="tabs clearfix" data-tabgroup="second-tab-group">
<li><a href="#monday" class="active">Monday</a></li>
<li><a href="#tuesday">Tuesday</a></li>
<li><a href="#wednesday">Wednesday</a></li>
<li><a href="#thursday">Thursday</a></li>
<li><a href="#friday">Friday</a></li>
</ul>
</div>
<section id="second-tab-group" class="weathergroup">
<div id="monday">
23
<div class="row">
<div class="weather-item"><h6>Myanmar</h6>
<div class="weather-icon"><imgsrc="img/weather-icon-03.png" alt="">
</div><span>32°C</span>
<ul class="time-weather">
<li>6AM <span>26°</span></li>
<li>12PM <span>32°</span></li>
<li>6PM <span>28°</span></li><li>12AM
<span>22°</span></li>
</ul></div></div>
<div class="weather-item"><h6>Thailand</h6>
</div><span>28°C</span><ul class="time-weather">
<li>6AM <span>20°</span></li><li>12PM
</ul></div></div>
<div class="weather-item"><h6>India</h6>
</ul></div></div></div></div>
<div id="tuesday">
<div class="row">
<div class="weather-item">
<h6>Myanmar</h6>
</ul></div></div>
24
</div><span>31°C</span>
<ul class="time-weather">
<span>18°</span></li></ul></div></div>
<span>20°</span></li></ul></div></div></div></div>
<div id="wednesday"><div class="row">
</ul></div></div>
<span>17°</span></li></ul>
<div id="thursday"><div class="row">
<div class="col-md-4"> 25
<div class="weather-icon"><imgsrc="img/weather-icon-02.png"
alt=""></div><span>28°C</span><ul class="time-weather">
<span>18°</span></li></ul></div></div></div></div>
<div id="friday"><div class="row">
</ul></div></div>
<span>23°</span></li></ul></div>
</div>
26
<span>28°</span></li><li>6PM <span>26°</span></li>
<li>12AM<span>22°</span></li>
</ul></div></div></div></div></section></div></div></div></div></div>
</div></div></div>
<section class="services">
<div class="row">
<div class="service-item first-service"><div class="service-icon">
</div><h4>Easy Tooplate</h4>
<p>Donec variusporttitoriaculis. Integer sollicitudinerat et ligula viverravulputate. In in
quamefficitur, pulvinar justout, tempornunc. Phasellus pharetra
quisodio.</p>
</a></div></div>
<div class="service-item second-service"><div class="service-
icon"></div><h4>Unique Ideas</h4>
<p>Cras ligula diam, tristique at aliquam at, fermentum auctor turpis. Proin leomassa, iaculis
elementummassa et, consecteturvarius dolor. Fusce sed ipsum sit.</p>
</a></div></div>
<div class="service-item third-service"><div class="service-
icon"></div><h4>Best Support</h4>
<p>Fusceleo dui. Mauris et justoegetarcuultricies porta. Nullafacilisi. Nullanecrisus sit
amet magna hendreritvenenatis. Sed porta tinciduntlectusegetultrices.</p>
</a></div></div></div></div></section>
<div class="tabs-content" id="recommended-hotel"><div

class="container">
<div class="row">
<div class="section-heading"><h2>Recommended Hotel For You</h2>
</div></div><div class="wrapper">
<ul class="tabs clearfix" data-tabgroup="third-tab-group">
<li><a href="#livingroom" class="active">Living Room <i class="fa fa-angle-right"></i></a></li>
<li><a href="#suitroom">Suit Room <i class="fa fa-angle-right"></i></a></li>
<li><a href="#swimingpool">Swiming Pool <i class="fa fa-angle-right"></i></a></li>
<li><a href="#massage">Massage Service <i class="fa fa-angle-right"></i></a></li>
<li><a href="#fitness">Fitness Life <i class="fa fa-angle-right"></i></a></li>
27
<li><a href="#event">Evening Event <i class="fa fa-angle-right"></i></a></li>
</ul></div></div><div class="col-md-8">
<section id="third-tab-group" class="recommendedgroup">
<div id="livingroom">
<div class="text-content">
<iframe width="100%" height="400px"
src="https://www.youtube.com/embed/rMxTreSFMgE"></iframe></div></div>
<div id="suitroom"><div class="row">
<div id="owl-suiteroom" class="owl-carousel owl-theme"><div class="item">
<div class="suiteroom-item">
<imgsrc="img/suite-02.jpg" alt=""><div class="text-content">
<h4>Clean And Relaxing Room</h4><span>Aurora Resort</span>
</div></div></div>
<div class="item">
<h4>Special Suite Room TV</h4><span>Khao Yai Hotel</span>
</div></div></div>
<div class="item">
<h4>The Best Sitting</h4><span>Hotel Grand</span>
</div></div></div></div></div></div></div>
<div id="swimingpool">
<imgsrc="img/swiming-pool.jpg" alt=""><div class="row">
<h4>Lovely View Swiming Pool For Special Guests</h4><span>Victoria Resort and Spa</span>
<div id="massage">
<imgsrc="img/massage-service.jpg" alt=""><div class="row">
<h4>Perfect Place For Relaxation</h4><span>Napali Beach</span>
<div id="fitness">
<imgsrc="img/fitness-service.jpg" alt=""><div class="row">
<div class="text-content"><h4>Insane Street Workout</h4>
<span>Hua Hin Beach</span>
<div id="event"><imgsrc="img/evening-event.jpg" alt="">
28
<div class="row">
<div class="text-content"><h4>Finest Winery Night</h4><span>Queen Restaurant</span>
</div></div></div></div></section></div></div></div></div></div>
<section id="most-visited">
<div class="row">
<div class="section-heading"><h2>Most Visited Places</h2>
</div></div><div class="col-md-12">
<div id="owl-mostvisited" class="owl-carousel owl-theme"><div class="item col-md-12">
<div class="visited-item">
<imgsrc="img/place-01.jpg" alt="">
<div class="text-content"><h4>River Views</h4><span>New York</span>
</div></div></div>
<div class="item col-md-12"><div class="visited-item">
<imgsrc="img/place-02.jpg" alt=""><div class="text-content">
<h4>Lorem ipsum dolor</h4><span>Tokyo</span>
</div></div></div>
<h4>Proin dignissim</h4><span>Paris</span>
</div></div></div>
<h4>Fusce sed ipsum</h4><span>Hollywood</span>
</div></div></div>
<h4>Vivamusegestas</h4><span>Tokyo</span>
</div></div></div>
<h4>Aliquamelitmetus</h4>
<span>New York</span></div></div></div>
imgsrc="img/place-03.jpg" alt=""><div class="text-content">
<h4>Phasellus pharetra</h4><span>Paris</span>
</div></div></div>
<h4>In in quamefficitur</h4><span>Hollywood</span>
</div></div></div>
29
<h4>Sed faucibusodio</h4><span>NEW YORK</span>
</div></div></div>
<h4>Donec variusporttitor</h4><span>Tokyo</span>
</div></div></div></div></div></div></div></section>
<footer>
<div class="container"><div class="row">
<div class="primary-button">
<a href="#" class="scroll-top">Back To Top</a></div>
</div>
<ul class="social-icons">
<li><a href="https://www.facebook.com/tooplate"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li><li>
<a href="#"><i class="fa fa-linkedin"></i></a></li><li>
<a href="#"><i class="fa fa-rss"></i></a></li><li>
<a href="#"><i class="fa fa-behance"></i></a></li>
</ul></div>
<p>Copyright © 2022 Abhinav Travel
Design: <a href="http://www.code-projects.org" target="_parent"><em>Code
Projects</em></a></p></div></div></div></footer>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>window.jQuery ||
document.write('<script src="js/vendor/jquery-
1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/datepicker.js"></script><script
src="js/plugins.js"></script><script
src="js/main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function () {
// navigation click actions$('.scroll-link').on('click', function (event) { event.preventDefault();
var sectionID = $(this).attr("data-id"); scrollToID('#' + sectionID, 750);});
// scroll to top action
$('.scroll-top').on('click', function (event) {
event.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 'slow'); });
// mobile nav toggle
30
$('#nav-toggle').on('click', function (event) {
$('#main-nav').toggleClass("open"); });
});
// scroll function
function scrollToID(id, speed) { var
offSet = 0;
var targetOffset = $(id).offset().top - offSet; var mainNav
= $('#main-nav');
$('html,body').animate({ scrollTop: targetOffset }, speed); if
(mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function () { } };
}
</script></body>
</html>
CONTACT US FORM CODE
<!DOCTYPE
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Flight - Contact Page</title><meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/fontAwesome.css">
<link rel="stylesheet" href="css/hero-slider.css">
<link rel="stylesheet" href="css/owl-carousel.css">
<link rel="stylesheet" href="css/tooplate-style.css">
31
<link href="https://fonts.googleapis.com/css?family=Spectral:200,200i,300,300i,400,400i,500
,500i,600,600i,700,700i,800,800i"el="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
rel="stylesheet">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script></head>
<body>
<section class="page-heading" id="top">
<div class="row">
<div class="col-md-6"><div class="logo">
<imgsrc="img/logo.png" alt="Flight Template"></div></div>
<div class="page-direction-button">
<a href="index.html"><i class="fa fa-home"></i>Go Back Home</a></div>
</div></div>
</div></section>
<section class="contact-us">
<div class="row">
<div class="section-heading"><h2>Contact Information</h2>
<p>Pellentesquequisturpis et lectus auctor gravida ut vel orci. Proin et tempus nunc. Proin
sed justoneque. Donec et tempus ligula, et gravida elit. Vivamus vitae placeratmetus.</p>
</div></div>
<imgsrc="img/contact-01.jpg" alt=""></div>
<imgsrc="img/contact-02.jpg" alt=""></div>
<h6>Proin dignissimrhoncus</h6>
<p>Aliquamelitmetus, varius in ligula sed, posuerealiquamnibh. Class aptenttacitisociosqu ad
litoratorquent per conubia nostra, per inceptoshimenaeos. Duis vel
rhoncuslectus.</p>
</div>
<h6>Duis vehiculaquiselit</h6>
<p>Donec nislfelis, eleifendeu diam ut, condimentumfinibuserat. Aliquamluctuscommodo
ultricies. Etiam in tellus mi. Nam lobortisest magna, et rutrum ipsum lacinia id.</p>
</div><div class="col-md-4">
<h6>Duis vel rhoncuslectus</h6>
<p>Maurisa liquate get lorem a tempor. Morbi in duised orciplaceratultrices sed a mi. Praesent
egetporttitorenim. In tempor eros mi. Morbi a lobortis ante. Sed blandit vitae diam commodo
ultricies.
32
</p></div></div></div></section>
<section class="contact-form">
<div class="row">
<div class="section-heading"><h2>Leave us a message</h2>
</div></div>
<div class="col-md-6 col-md-offset-3">
<form id="contact" action="#" method="post">
<div class="row">
<input name="name" type="text" class="form-control" id="name"
placeholder="Your name..." required="">
</fieldset></div>
<input name="email" type="text" class="form-control" id="email"
placeholder="Your email..." required="">
</fieldset></div>
<textarea name="message" rows="6" class="form-control" id="message"
placeholder="Your message..." required=""></textarea>
</fieldset></div>
<button type="submit" id="form-submit" class="btn">Submit Your Message</button>
</fieldset></div></div></form></div></div></div></section>
<section class="map">
<div lass="container">
<div class="row">
<div class="col-md-12"><div id="map">

<iframesrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7895.4
85196115994!2d103.85995441789784!3d1.2880401763270322!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1
!3m3!1m2!1s0x0%3A0x7fb4e58ad9cd826e!2sSingapore+Flyer!5e0!3m2!1sen!2sth!4v1505825620371"
width="100%" height="500" frameborder="0" style="border:0" allowfullscreen></iframe>
</div></div></div></div></section>
<footer>
<div class="row">
<div class="col-md-12"> 33
<div class="primary-button">
<a href="#" class="scroll-top">Back To Top</a>
</div></div>
<ul class="social-icons">
<li><a href="https://www.facebook.com/tooplate"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-rss"></i></a></li>
<li><a href="#"><i class="fa fa-behance"></i></a></li></ul></div>
<p>Copyright © 2018 Flight Tour and Travel Company
| Design:<a href="http://www.code-projects.org" target="_parent"><em>Code
Projects</em></a></p></div></div></div></footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-
1.11.2.min.js"></script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// navigation click actions
$('.scroll-link').on('click', function (event) {
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function (event) {
$('html, body').animate({ scrollTop: 0 }, 'slow'); });
// mobile nav toggle

$('#nav-toggle').on('click', function (event) {
$('#main-nav').toggleClass("open"); });
});
// scroll function
function scrollToID(id, speed) { var offSet = 0;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
34
$('html,body').animate({ scrollTop: targetOffset }, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function () { } };
}
</script></body>
</html>
BACK END CODE

BOOTSTRAP
/*!
* Bootstrap v3.3.1 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
if (typeof jQuery === 'undefined') {
throw new Error('Bootstrap\'s JavaScript requires jQuery')
}
+function ($) {
var version = $.fn.jquery.split(' ')[0].split('.')
if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) {
throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher')
}}(jQuery);
/* ========================================================================
* Bootstrap: transition.js v3.3.1
* http://getbootstrap.com/javascript/#transitions
* ========================================================================
* ======================================================================== */
+function ($) {
'use strict';
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition : 'transitionend',
return false // explicit for ie8 ( ._.)
}
35
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false
var $el = this
$(this).one('bsTransitionEnd', function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}
$(function () {
$.support.transition = transitionEnd()
if (!$.support.transition) return
$.event.special.bsTransitionEnd = {
bindType: $.support.transition.end,
delegateType: $.support.transition.end,
handle: function (e) {
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
}
}
})}(jQuery);
/* ========================================================================
* Bootstrap: alert.js v3.3.1
* http://getbootstrap.com/javascript/#alerts
* ========================================================================
* ======================================================================== */
+function ($) {'use strict';
// ALERT CLASS DEFINITION
// ======================
var dismiss = '[data-dismiss="alert"]'
var Alert = function (el) {
$(el).on('click', dismiss, this.close)
}
Alert.VERSION = '3.3.1'
Alert.TRANSITION_DURATION = 150
Alert.prototype.close = function (e) {
var $this = $(this)
var selector = $this.attr('data-target')
if (!selector) {
selector = $this.attr('href')
selector = selector &&selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7"
}
var $parent = $(selector)
if (e) e.preventDefault()
if (!$parent.length) {
36
$parent = $this.closest('.alert')
}
$parent.trigger(e = $.Event('close.bs.alert'))
if (e.isDefaultPrevented()) return
$parent.removeClass('in')
function removeElement() {
// detach from parent, fire event then clean up data
$parent.detach().trigger('closed.bs.alert').remove()
}
$.support.transition&& $parent.hasClass('fade') ?
$parent.one('bsTransitionEnd', removeElement)
.emulateTransitionEnd(Alert.TRANSITION_DURATION) :
removeElement()
}
// ALERT PLUGIN DEFINITION
// =======================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.alert')
if (!data) $this.data('bs.alert', (data = new Alert(this)))
if (typeof option == 'string') data[option].call($this)
})
}
var old = $.fn.alert
$.fn.alert = Plugin
$.fn.alert.Constructor = Alert
// ALERT NO CONFLICT
// =================
$.fn.alert.noConflict = function () {
$.fn.alert = old
return this
}
// ALERT DATA-API
// ==============
$(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)
}(jQuery);
/* ========================================================================
* Bootstrap: button.js v3.3.1
* http://getbootstrap.com/javascript/#buttons
* ========================================================================

* ======================================================================== */
37
+function ($) {
'use strict';
// BUTTON PUBLIC CLASS DEFINITION
// ==============================
var Button = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Button.DEFAULTS, options)this.isLoading = false
}
Button.VERSION = '3.3.1'
Button.DEFAULTS = {
loadingText: 'loading...'
}
Button.prototype.setState = function (state) {
var d = 'disabled'
var $el = this.$element
var val = $el.is('input') ? 'val' : 'html'
var data = $el.data()
state = state + 'Text'
if (data.resetText == null) $el.data('resetText', $el[val]())
// push to event loop to allow forms to submit
setTimeout($.proxy(function () {
$el[val](data[state] == null ?this.options[state] : data[state])
if (state == 'loadingText') {
this.isLoading = true
$el.addClass(d).attr(d, d)
} else if (this.isLoading) {
this.isLoading = false
$el.removeClass(d).removeAttr(d)
}, this), 0)
}
Button.prototype.toggle = function () {
var changed = true
var $parent = this.$element.closest('[data-toggle="buttons"]')
if ($parent.length) {
var $input = this.$element.find('input')
if ($input.prop('type') == 'radio') {
if ($input.prop('checked') && this.$element.hasClass('active')) changed = false
else $parent.find('.active').removeClass('active')
}
if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
} else {
this.$element.attr('aria-pressed', !this.$element.hasClass('active'))
}
if (changed) this.$element.toggleClass('active')
}
// BUTTON PLUGIN DEFINITION
// ========================
38
var $this = $(this)
var data = $this.data('bs.button')
var options = typeof option == 'object' && option
if (!data) $this.data('bs.button', (data = new Button(this, options)))
if (option == 'toggle') data.toggle()
else if (option) data.setState(option)
})
}
var old = $.fn.button
$.fn.button = Plugin
$.fn.button.Constructor = Button
// BUTTON NO CONFLICT
// ==================
$.fn.button.noConflict = function () {
$.fn.button = old
return this
}
// BUTTON DATA-API
// ===============
$(document)
.on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
var $btn = $(e.target)
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
Plugin.call($btn, 'toggle')
e.preventDefault()
})
.on('focus.bs.button.data-apiblur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
$(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
})
}(jQuery);
/* ========================================================================
* Bootstrap: carousel.js v3.3.1
* http://getbootstrap.com/javascript/#carousel
* ========================================================================
* ======================================================================== */
+function ($) {'use strict';
// CAROUSEL CLASS DEFINITION
// =========================
var Carousel = function (element, options) {
this.$element = $(element)this.$indicators = this.$element.find('.carousel-indicators')
this.options = options
this.paused =
this.sliding =
this.interval =
this.$active =
this.$items = null
this.options.keyboard&& this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))
this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) &&this.$element
39
.on('mouseenter.bs.carousel', $.proxy(this.pause, this))
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
}
Carousel.VERSION = '3.3.1’
Carousel.TRANSITION_DURATION = 600
Carousel.DEFAULTS = {
interval: 5000,
pause: 'hover',
wrap: true,
keyboard: true
}
Carousel.prototype.keydown = function (e) {
if (/input|textarea/i.test(e.target.tagName)) return
switch (e.which) {
case 37: this.prev(); break
case 39: this.next(); break
default: return
}
e.preventDefault()
}
Carousel.prototype.cycle = function (e) {
e || (this.paused = false)
this.interval&&clearInterval(this.interval)
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
return this
}
Carousel.prototype.getItemIndex = function (item) {
this.$items = item.parent().children('.item')
return this.$items.index(item || this.$active)
}
Carousel.prototype.getItemForDirection = function (direction, active) {
var delta = direction == 'prev' ? -1 : 1
var activeIndex = this.getItemIndex(active)
var itemIndex = (activeIndex + delta) % this.$items.length
return this.$items.eq(itemIndex)
}
Carousel.prototype.to = function (pos) {
var that = this
var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))
if (pos > (this.$items.length - 1) || pos < 0) return
if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"
if (activeIndex == pos) return this.pause().cycle()
return this.slide(pos >activeIndex ? 'next' : 'prev', this.$items.eq(pos))
}
Carousel.prototype.pause = function (e) {
e || (this.paused = true)
if (this.$element.find('.next, .prev').length && $.support.transition) {
this.$element.trigger($.support.transition.end)
40
this.cycle(true)
}
this.interval = clearInterval(this.interval)
return this
}
Carousel.prototype.next = function () {
if (this.sliding) return
return this.slide('next')
}
Carousel.prototype.prev = function () {
if (this.sliding) return
return this.slide('prev')
}
Carousel.prototype.slide = function (type, next) {
var $active = this.$element.find('.item.active')
var $next = next || this.getItemForDirection(type, $active)
var isCycling = this.interval
var direction = type == 'next' ? 'left' : 'right'
var fallback = type == 'next' ? 'first' : 'last'
var that = this
if (!$next.length) {
if (!this.options.wrap) return
$next = this.$element.find('.item')[fallback]()
}
if ($next.hasClass('active')) return (this.sliding = false)
var relatedTarget = $next[0]
var slideEvent = $.Event('slide.bs.carousel', {
relatedTarget: relatedTarget,
direction: direction
})
this.$element.trigger(slideEvent)
if (slideEvent.isDefaultPrevented()) return
this.sliding = true
isCycling&&this.pause()
if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active')
var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])
$nextIndicator&& $nextIndicator.addClass('active')
}
var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes,
"slid"
if ($.support.transition&& this.$element.hasClass('slide')) {
$next.addClass(type)
$next[0].offsetWidth // force reflow
$active.addClass(direction)
$next.addClass(direction)
$active
.one('bsTransitionEnd', function () {
$next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' '))
that.sliding = false 41
setTimeout(function () {
that.$element.trigger(slidEvent)
}, 0)
})
.emulateTransitionEnd(Carousel.TRANSITION_DURATION)} else {
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger(slidEvent)
}
isCycling&&this.cycle()
return this
}
// CAROUSEL PLUGIN DEFINITION
// ==========================
var this = $(this)
var data = $this.data('bs.carousel')
var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
var action = typeof option == 'string' ? option : options.slide
if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option)
else if (action) data[action]()
else if (options.interval) data.pause().cycle()
})
}
var old = $.fn.carousel
$.fn.carousel = Plugin
$.fn.carousel.Constructor = Carousel
// CAROUSEL NO CONFLICT
// ====================
$.fn.carousel.noConflict = function () {
$.fn.carousel = old
return this
}
// CAROUSEL DATA-API
// =================
var clickHandler = function (e) {
var href
var $this = $(this)
var $target = $($this.attr('data-target') || (href = $this.attr('href')) &&href.replace(/.*(?=#[^\s]+$)/, '')) //
strip for ie7
if (!$target.hasClass('carousel')) return
var options = $.extend({}, $target.data(), $this.data())
var slideIndex = $this.attr('data-slide-to')
if (slideIndex) options.interval = false
Plugin.call($target, options)
if (slideIndex) {
42
$target.data('bs.carousel').to(slideIndex)
}
e.preventDefault()
}
$(document)
.on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
.on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)
$(window).on('load', function () {
$('[data-ride="carousel"]').each(function () {
var $carousel = $(this)
Plugin.call($carousel, $carousel.data())
})
})
}(jQuery);
/* ========================================================================
* Bootstrap: collapse.js v3.3.1
* http://getbootstrap.com/javascript/#collapse
* ========================================================================
* ======================================================================== */
+function ($) {
'use strict';
// COLLAPSE PUBLIC CLASS DEFINITION
// ================================
var Collapse = function (element, options) {
this.options = $.extend({}, Collapse.DEFAULTS, options)
this.$trigger = $(this.options.trigger).filter('[href="#' + element.id + '"], [data-target="#' + element.id +
'"]')
this.transitioning = null
if (this.options.parent {
this.$parent = this.getParent()
} else {
this.addAriaAndCollapsedClass(this.$element, this.$trigger)
}
if (this.options.toggle) this.toggle()
}
Collapse.VERSION = '3.3.1'
Collapse.TRANSITION_DURATION = 350
Collapse.DEFAULTS = {toggle: true,
trigger: '[data-toggle="collapse"]'
}
Collapse.prototype.dimension = function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
Collapse.prototype.show = function () {
if (this.transitioning || this.$element.hasClass('in')) 43
return
var activesData
var actives = this.$parent&& this.$parent.find('> .panel').children('.in, .collapsing')
if (actives &&actives.length) {
activesData = actives.data('bs.collapse')
if (activesData&&activesData.transitioning) return
}
var startEvent = $.Event('show.bs.collapse')

this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
if (actives &&actives.length) {
Plugin.call(actives, 'hide')
activesData || actives.data('bs.collapse', null)
}
var dimension = this.dimension()
this.$element.removeClass('collapse')
.addClass('collapsing')[dimension](0)
.attr('aria-expanded', true)
this.$trigger
.removeClass('collapsed')
.attr('aria-expanded', true)
this.transitioning = 1
var complete = function () {
this.$element
.removeClass('collapsing')
.addClass('collapse in')[dimension]('')
this.$element
.trigger('shown.bs.collapse')
}
if (!$.support.transition) return complete.call(this)
var scrollSize = $.camelCase(['scroll', dimension].join('-'))
this.$element
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize]
)
}
Collapse.prototype.hide = function () {
if (this.transitioning || !this.$element.hasClass('in')) return
var startEvent = $.Event('hide.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var dimension = this.dimension()
this.$element[dimension](this.$element[dimension]())[0].offsetHeight
this.$element.addClass('collapsing')
.removeClass('collapse in')
.attr('aria-expanded', false)
this.$trigger.addClass('collapsed')
.attr('aria-expanded', false)
44
this.$element
.removeClass('collapsing')
.addClass('collapse')
.trigger('hidden.bs.collapse')
}
if (!$.support.transition) return complete.call(this)
this.$element
[dimension](0)
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)
}
Collapse.prototype.toggle = function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
Collapse.prototype.getParent = function () {
return $(this.options.parent)
.find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
.each($.proxy(function (i, element) {
var $element = $(element)
this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
}, this))
.end()
}
Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
var isOpen = $element.hasClass('in')
$element.attr('aria-expanded', isOpen)
$trigger.toggleClass('collapsed', !isOpen)
.attr('aria-expanded', isOpen)
}
function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
|| (href = $trigger.attr('href')) &&href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
return $(target)
}
// COLLAPSE PLUGIN DEFINITION
// ==========================
var $this = $(this)
var data = $this.data('bs.collapse')
var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data&&options.toggle&& option == 'show') options.toggle = false
if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]()
})
}
45
var old = $.fn.collapse
$.fn.collapse = Plugin
$.fn.collapse.Constructor = Collapse
// COLLAPSE NO CONFLICT
// ====================
$.fn.collapse.noConflict = function () {
$.fn.collapse = old
return this
}
// COLLAPSE DATA-API
// =================
$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
var $this = $(this)
if (!$this.attr('data-target')) e.preventDefault()
var $target = getTargetFromTrigger($this)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this })
Plugin.call($target, option)
})
}(jQuery);
/* ========================================================================
* Bootstrap: dropdown.js v3.3.1
* http://getbootstrap.com/javascript/#dropdowns
* ========================================================================
* ======================================================================== */
+function ($) {
'use strict';
// DROPDOWN CLASS DEFINITION
// =========================
var backdrop = '.dropdown-backdrop
var toggle = '[data-toggle="dropdown"]'
var Dropdown = function (element) {
$(element).on('click.bs.dropdown', this.toggle)
}
Dropdown.VERSION = '3.3.1'
Dropdown.prototype.toggle = function (e) {
var $this = $(this)
if ($this.is('.disabled, :disabled')) return
var $parent = getParent($this)
var isActive = $parent.hasClass('open')
clearMenus()
if (!isActive) {
if ('ontouchstart' in document.documentElement&& !$parent.closest('.navbar-nav').length) {
// if mobile we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}
46
var relatedTarget = { relatedTarget: this }
$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
$this
.trigger('focus')
.attr('aria-expanded', 'true')
$parent
.toggleClass('open')
.trigger('shown.bs.dropdown', relatedTarget)
}
return false
}
Dropdown.prototype.keydown = function (e) {
if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
var $this = $(this)
e.preventDefault()e.stopPropagation()
if ($this.is('.disabled, :disabled')) return
var isActive = $parent.hasClass('open')
if ((!isActive&&e.which != 27) || (isActive&&e.which == 27)) {
if (e.which == 27) $parent.find(toggle).trigger('focus')
return $this.trigger('click')
}
var desc = ' li:not(.divider):visible a'
var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)
if (!$items.length) return
var index = $items.index(e.target)
if (e.which == 38 && index > 0) index-- // up
if (e.which == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items.eq(index).trigger('focus')
}
function clearMenus(e) {
if (e &&e.which === 3) return
$(backdrop).remove()
$(toggle).each(function () {
var $this = $(this)
var relatedTarget = { relatedTarget: this }
if (!$parent.hasClass('open')) return
$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
$this.attr('aria-expanded', 'false')
$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
})
}
function getParent($this) {
var selector = $this.attr('data-target')
if (!selector) {
selector = $this.attr('href')
47
selector = selector && /#[A-Za-z]/.test(selector) &&selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}
var $parent = selector && $(selector)
return $parent && $parent.length ? $parent : $this.parent()
}
// DROPDOWN PLUGIN DEFINITION
// ==========================
var $this = $(this)
var data = $this.data('bs.dropdown')
if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}
var old = $.fn.dropdown
$.fn.dropdown = Plugin
$.fn.dropdown.Constructor = Dropdown
// DROPDOWN NO CONFLICT
// ====================$.fn.dropdown.noConflict = function () {
$.fn.dropdown = old
return this
}
// APPLY TO STANDARD DROPDOWN ELEMENTS
// ===================================
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)
}(jQuery);
/* ========================================================================
* Bootstrap: modal.js v3.3.1
* http://getbootstrap.com/javascript/#modals
* ========================================================================
* ======================================================================== */
+function ($) {
'use strict';
// MODAL CLASS DEFINITION
// ======================
var Modal = function (element, options) {
this.options = options
this.$body = $(document.body)
this.$backdrop =
this.isShown = null
this.scrollbarWidth = 0 48
if (this.options.remote) {
this.$element.find('.modal-content')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')
}, this))
}
}
Modal.VERSION = '3.3.1'
Modal.TRANSITION_DURATION = 300
Modal.BACKDROP_TRANSITION_DURATION = 150
Modal.DEFAULTS = {
backdrop: true,
keyboard: true,
show: true
}
Modal.prototype.toggle = function (_relatedTarget) {
return this.isShown ? this.hide() : this.show(_relatedTarget)
}
Modal.prototype.show = function (_relatedTarget) {
var that = this
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
this.$element.trigger(e)
if (this.isShown || e.isDefaultPrevented()) return
this.isShown = true
this.checkScrollbar()
this.setScrollbar()
this.$body.addClass('modal-open')
this.escape()
this.resize()
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.backdrop(function () {
var transition = $.support.transition&& that.$element.hasClass('fade')
if (!that.$element.parent().length) {
that.$element.appendTo(that.$body) // don't move modals dom position
}
that.$element.show()
.scrollTop(0)
if (that.options.backdrop) that.adjustBackdrop()
that.adjustDialog()
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$element.find('.modal-dialog') // wait for modal to slide in
.one('bsTransitionEnd', function () {
that.$element.trigger('focus').trigger(e)
49
}).emulateTransitionEnd(Modal.TRANSITION_DURATION) :
that.$element.trigger('focus').trigger(e)
})
}
Modal.prototype.hide = function (e) {
if (e) e.preventDefault()
e = $.Event('hide.bs.modal')
if (!this.isShown || e.isDefaultPrevented()) return
this.isShown = false
this.escape()
this.resize()
$(document).off('focusin.bs.modal')
this.$element
.removeClass('in')
.attr('aria-hidden', true)
.off('click.dismiss.bs.modal')
$.support.transition&& this.$element.hasClass('fade') ?
this.$element
.one('bsTransitionEnd', $.proxy(this.hideModal, this))
.emulateTransitionEnd(Modal.TRANSITION_DURATION) :
this.hideModal()
}
Modal.prototype.enforceFocus = function () {
$(document)
.off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target&& !this.$element.has(e.target).length) {
this.$element.trigger('focus')
}
}, this))
}
Modal.prototype.escape = function () {
if (this.isShown&&this.options.keyboard) {
this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {

e.which == 27 &&this.hide()
}, this))
} else if (!this.isShown) {
this.$element.off('keydown.dismiss.bs.modal')
}
}
Modal.prototype.resize = function () {
if (this.isShown) {
$(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))
} else {
$(window).off('resize.bs.modal')
}
}
50
Modal.prototype.hideModal = function () {
var that = this
this.$element.hide()
this.backdrop(function () {
that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar()
that.$element.trigger('hidden.bs.modal')
})
}
Modal.prototype.removeBackdrop = function () {
this.$backdrop&& this.$backdrop.remove()
this.$backdrop = null
}
Modal.prototype.backdrop = function (callback) {
var that = this
var animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.isShown&&this.options.backdrop) {
var doAnimate = $.support.transition&& animate
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.prependTo(this.$element)
.on('click.dismiss.bs.modal', $.proxy(function (e) {
if (e.target !== e.currentTarget) return
this.options.backdrop == 'static'
? this.$element[0].focus.call(this.$element[0])
: this.hide.call(this)
}, this))
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop.addClass('in')
if (!callback) return
doAnimate ?this.$backdrop
.one('bsTransitionEnd', callback)
.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
callback()
} else if (!this.isShown&&this.$backdrop) {
this.$backdrop.removeClass('in')
var callbackRemove = function () {
that.removeBackdrop()
callback &&callback()
}
$.support.transition&& this.$element.hasClass('fade') ?
this.$backdrop
.one('bsTransitionEnd', callbackRemove)
.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
callbackRemove()
} else if (callback) {
callback()
}
}
51
// these following methods are used to handle overflowing modals
Modal.prototype.handleUpdate = function () {
if (this.options.backdrop) this.adjustBackdrop()
this.adjustDialog()
}
Modal.prototype.adjustBackdrop = function () {
this.$backdrop.css('height', 0)
.css('height', this.$element[0].scrollHeight)
}
Modal.prototype.adjustDialog = function () {
var modalIsOverflowing = this.$element[0].scrollHeight>document.documentElement.clientHeight
this.$element.css({
paddingLeft: !this.bodyIsOverflowing&&modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing&& !modalIsOverflowing ? this.scrollbarWidth : ''
})
}
Modal.prototype.resetAdjustments = function () {
this.$element.css({
paddingLeft: '',
paddingRight: '
})
}
Modal.prototype.checkScrollbar = function () {
this.bodyIsOverflowing = document.body.scrollHeight>document.documentElement.clientHeight
this.scrollbarWidth = this.measureScrollbar()
}
Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}
Modal.prototype.resetScrollbar = function () {
this.$body.css('padding-right', '')
}
Modal.prototype.measureScrollbar = function () { // thx walsh
var scrollDiv = document.createElement('div')
scrollDiv.className = 'modal-scrollbar-measure'
this.$body.append(scrollDiv)
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
this.$body[0].removeChild(scrollDiv)
return scrollbarWidth
}
// MODAL PLUGIN DEFINITION
// =======================
function Plugin(option, _relatedTarget) {
var $this = $(this)
var
options = $this.data('bs.modal'
var data= $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
52
if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option](_relatedTarget)
else if (options.show) data.show(_relatedTarget)
})
}
var old = $.fn.modal
$.fn.modal = Plugin
$.fn.modal.Constructor = Modal
// MODAL NO CONFLICT
// =================
$.fn.modal.noConflict = function () {
$.fn.modal = old
return this
}// MODAL DATA-API
// ==============
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this)
var href = $this.attr('href')
var $target = $($this.attr('data-target') || (href&&href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) &&href },
$target.data(), $this.data())
if ($this.is('a')) e.preventDefault()
$target.one('show.bs.modal', function (showEvent) {
if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get
shown
$target.one('hidden.bs.modal', function () {
$this.is(':visible') && $this.trigger('focus')
})
})
Plugin.call($target, option, this)
})
}(jQuery);
/* ========================================================================
* Bootstrap: tooltip.js v3.3.1
* http://getbootstrap.com/javascript/#tooltip
* Inspired by the original jQuery.tipsy by Jason Frame

* ========================================================================
* ======================================================================== */
+function ($) {
'use strict';
// TOOLTIP PUBLIC CLASS DEFINITION
// ===============================
var Tooltip = function (element, options) {
this.type =
this.options =
this.enabled =
this.timeout = 53
this.hoverStat =
this.$element = null
this.init('tooltip', element, options)
}
Tooltip.VERSION = '3.3.1'
Tooltip.TRANSITION_DURATION = 150
Tooltip.DEFAULTS = {
animation: true,
placement: 'top',
selector: false,
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div
class="tooltip-inner"></div></div>',
trigger: 'hover focus',
title: '',
delay: 0,
html: false,
container: false,
viewport: {
selector: 'body',
padding: 0
}
}
Tooltip.prototype.init = function (type, element, options) {
this.enabled = true
this.type = type
this.options = this.getOptions(options)
this.$viewport = this.options.viewport&& $(this.options.viewport.selector || this.options.viewport)
var triggers = this.options.trigger.split(' ')
for (var i = triggers.length; i--;) {
var trigger = triggers[i]
if (trigger == 'click') {
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
} else if (trigger != 'manual') {
var eventIn = trigger == 'hover' ? 'mouseenter' : 'focusin'
var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout'
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
}
}
this.options.selector ?
(this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
this.fixTitle()
}
Tooltip.prototype.getDefaults = function () {
return Tooltip.DEFAULTS
}
Tooltip.prototype.getOptions = function (options) {
options = $.extend({}, this.getDefaults(), this.$element.data(), options)
if (options.delay&&typeofoptions.delay == 'number') {
54
options.delay = {
show: options.delay,
hide: options.delay
}
}
return options
}
Tooltip.prototype.getDelegateOptions = function () {
var options = {}
var defaults = this.getDefaults()
this._options&& $.each(this._options, function (key, value) {
if (defaults[key] != value) options[key] = value
})
return options
}
Tooltip.prototype.enter = function (obj) {
var self = obj instanceofthis.constructor ?
obj : $(obj.currentTarget).data('bs.' + this.type)
if (self &&self.$tip&& self.$tip.is(':visible')) {
self.hoverState = 'in'
return
}
if (!self) {
self = new this.constructor(obj.currentTarget, this.getDelegateOptions())
$(obj.currentTarget).data('bs.' + this.type, self)
}
clearTimeout(self.timeout)
self.hoverState = 'in'
if (!self.options.delay || !self.options.delay.show) return self.show()
self.timeout = setTimeout(function () {
if (self.hoverState == 'in') self.show()
}, self.options.delay.show)
}
Tooltip.prototype.leave = function (obj) {
var self = obj instanceofthis.constructor ?
obj : $(obj.currentTarget).data('bs.' + this.type)
if (!self) {
self = new this.constructor(obj.currentTarget, this.getDelegateOptions())
$(obj.currentTarget).data('bs.' + this.type, self)
}
clearTimeout(self.timeout)
self.hoverState = 'out'
if (!self.options.delay || !self.options.delay.hide) return self.hide()
self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
}
55
Tooltip.prototype.show = function () {
var e = $.Event('show.bs.' + this.type)
if (this.hasContent() &&this.enabled) {
var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
if (e.isDefaultPrevented() || !inDom) return
var that = this
var $tip = this.tip()
var tipId = this.getUID(this.type)
this.setContent()
$tip.attr('id', tipId)
this.$element.attr('aria-describedby', tipId)
if (this.options.animation) $tip.addClass('fade')
var placement = typeofthis.options.placement == 'function' ?
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placemen
var autoToken = /\s?auto?\s?/i
var autoPlace = autoToken.test(placement)
if (autoPlace) placement = placement.replace(autoToken, '') || 'top'$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
.addClass(placement)
.data('bs.' + this.type, this)
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
var pos = this.getPosition()
var actualWidth = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight
if (autoPlace) {
var orgPlacement = placement
var $container = this.options.container ? $(this.options.container) : this.$element.parent()
var containerDim = this.getPosition($container)
placement = placement == 'bottom' &&pos.bottom + actualHeight>containerDim.bottom ? 'top' :
placement == 'top' &&pos.top - actualHeight<containerDim.top ? 'bottom' :
placement == 'right' &&pos.right + actualWidth>containerDim.width ? 'left' :
placement == 'left' &&pos.left - actualWidth<containerDim.left ? 'right' :
placement
$tip
.removeClass(orgPlacement)
.addClass(placement)
}
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
this.applyPlacement(calculatedOffset, placement)
var prevHoverState = that.hoverState
that.$element.trigger('shown.bs.' + that.type)
that.hoverState = null
56
if (prevHoverState == 'out') that.leave(that)
}
$.support.transition&& this.$tip.hasClass('fade') ?
$tip
.one('bsTransitionEnd', complete)
.emulateTransitionEnd(Tooltip.TRANSITION_DURATION) :
complete()
}
}
Tooltip.prototype.applyPlacement = function (offset, placement) {
var width = $tip[0].offsetWidth
var height = $tip[0].offsetHeight
// manually read margins because getBoundingClientRect includes difference
var marginTop = parseInt($tip.css('margin-top'), 10)
var marginLeft = parseInt($tip.css('margin-left'), 10)
// we must check for NaN for ie 8/9
if (isNaN(marginTop)) marginTop = 0
if (isNaN(marginLeft)) marginLeft = 0
offset.top = offset.top + marginTop
offset.left = offset.left + marginLeft
// $.fn.offset doesn't round pixel values
// so we use setOffset directly with our own function B-0
$.offset.setOffset($tip[0], $.extend({
using: function (props) {
$tip.css({
top: Math.round(props.top),
left: Math.round(props.left)
})
}
}, offset), 0)
$tip.addClass('in')
// check to see if placing tip in new offset caused the tip to resize itself
var actualWidth = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight
if (placement == 'top' &&actualHeight != height) {
offset.top = offset.top + height - actualHeight
}
var delta = this.getViewportAdjustedDelta(placement, offset, actualWidth, actualHeight)
if (delta.left) offset.left += delta.left
else offset.top += delta.top
var isVertical = /top|bottom/.test(placement)
var arrowDelta = isVertical ?delta.left * 2 - width + actualWidth : delta.top * 2 - height + actualHeight
var arrowOffsetPosition = isVertical ? 'offsetWidth' : 'offsetHeight'
$tip.offset(offset)
this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], isVertical)
}
Tooltip.prototype.replaceArrow = function (delta, dimension, isHorizontal) {
this.arrow()
.css(isHorizontal ? 'left' : 'top', 50 * (1 - delta / dimension) + '%')
57
.css(isHorizontal ? 'top' : 'left', '')
}
Tooltip.prototype.setContent = function () {
var title = this.getTitle()
$tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title)
$tip.removeClass('fade in top bottom left right')
}
Tooltip.prototype.hide = function (callback) {
var that = this
var e = $.Event('hide.bs.' + this.type)
function complete() {
if (that.hoverState != 'in') $tip.detach()
that.$element
.removeAttr('aria-describedby')
.trigger('hidden.bs.' + that.type)
callback &&callback()
}
$tip.removeClass('in')
$.support.transition&& this.$tip.hasClass('fade') ?
$tip
.one('bsTransitionEnd', complete)
.emulateTransitionEnd(Tooltip.TRANSITION_DURATION) :
complete()
this.hoverState = null
return this
}
Tooltip.prototype.fixTitle = function () {
var $e = this.$element
if ($e.attr('title') || typeof ($e.attr('data-original-title')) != 'string') {
$e.attr('data-original-title', $e.attr('title') || '').attr('title', '')

}
}
Tooltip.prototype.hasContent = function () {
return this.getTitle()
}
Tooltip.prototype.getPosition = function ($element) {
$element = $element || this.$element
var el = $element[0]
var isBody = el.tagName == 'BODY'
var elRect = el.getBoundingClientRect()
if (elRect.width == null) {
// width and height are missing in IE8, so compute them
manually; see https://github.com/twbs/bootstrap/issues/14093
elRect = $.extend({}, elRect, { width: elRect.right - elRect.left, height: elRect.bottom - elRect.top })
}
58
var elOffset = isBody ?{ top: 0, left: 0 } : $element.offset()
var scroll = { scroll: isBody ? document.documentElement.scrollTop ||
document.body.scrollTop : $element.scrollTop() }
var outerDims = isBody ?{ width: $(window).width(), height: $(window).height() } : null
return $.extend({}, elRect, scroll, outerDims, elOffset)
}
Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
return placement == 'bottom' ?{ top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / } :
placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
/* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
}
Tooltip.prototype.getViewportAdjustedDelta = function (placement, pos, actualWidth, actualHeight) {
var delta = { top: 0, left: 0 }
if (!this.$viewport) return delta
var viewportPadding = this.options.viewport&&this.options.viewport.padding || 0
var viewportDimensions = this.getPosition(this.$viewport)
if (/right|left/.test(placement)) {
var topEdgeOffset = pos.top - viewportPadding - viewportDimensions.scroll
var bottomEdgeOffset = pos.top + viewportPadding - viewportDimensions.scroll + actualHeight
if (topEdgeOffset<viewportDimensions.top) { // top overflow
delta.top = viewportDimensions.top - topEdgeOffset
} else if (bottomEdgeOffset>viewportDimensions.top + viewportDimensions.height) { // bottom
overflow
delta.top = viewportDimensions.top + viewportDimensions.height - bottomEdgeOffset
}
} else {
var leftEdgeOffset = pos.left - viewportPadding
var rightEdgeOffset = pos.left + viewportPadding + actualWidth
if (leftEdgeOffset<viewportDimensions.left) { // left overflow
delta.left = viewportDimensions.left - leftEdgeOffset
} else if (rightEdgeOffset>viewportDimensions.width) { // right overflow
delta.left = viewportDimensions.left + viewportDimensions.width - rightEdgeOffset
}
}
return delta
}
Tooltip.prototype.getTitle = function () {
var title
var $e = this.$element
var o = this.options
title = $e.attr('data-original-title')
|| (typeofo.title == 'function' ? o.title.call($e[0]) : o.title)
return title
}
Tooltip.prototype.getUID = function (prefix) {
do prefix += ~~(Math.random() * 1000000)
while (document.getElementById(prefix))
return prefix
}
59
Tooltip.prototype.tip = function () {
return (this.$tip = this.$tip || $(this.options.template))
}
Tooltip.prototype.arrow = function () {
return (this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow'))
}
Tooltip.prototype.enable = function () {
this.enabled = true
}
Toltip.prototype.disable = function () {
this.enabled = false
}
Tooltip.prototype.toggleEnabled = function () {
this.enabled = !this.enabled
}
Tooltip.prototype.toggle = function (e) {
var self = this
if (e) {
self = $(e.currentTarget).data('bs.' + this.type)
if (!self) {
self = new this.constructor(e.currentTarget, this.getDelegateOptions())
$(e.currentTarget).data('bs.' + this.type, self)
}
}
self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
}
Tooltip.prototype.destroy = function () {
var that = thisclearTimeout(this.timeout)
this.hide(function () {
that.$element.off('.' + that.type).removeData('bs.' + that.type)p
})
}
60
// Add submit event listener to libraryForm
let name = document.getElementById('bookName').value; let
author = document.getElementById('author').value; let type;
let philippine = document.getElementById('philippine'); let
programming = document.getElementById('programming'); let
science = document.getElementById('science');
if (philippine.checked) { type =
philippine.value;
}
else if (programming.checked) { type
= programming.value;
}
else if (science.checked) { type =
science.value;
}

display.clear();
else {
61
OUTPUT
62
WEEK 7: Design and development of online library using JSP/Node.js &
React.js
9. HTML5
10. CSS3
11.
BOOTSTRAP 4
12. jQuery
5. MongoDB
6. Express.js
7. Node.js
8. Passport.js
Functionalitites
1.Name of the book can be
added 2.Author name can be
added
3.Type of the Department can be
selected 4.The books can be found
below.

1.Search option is enhanced to find your books

1.user can add books
FRONT END CODE
<!doctype
html><html
lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
<title>Welcome to Library
System</title></head>
<body> 63
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"><a
class="navbar-brand" href="#">AV DIGI LIBRARY</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-
icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"><ul
class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-
only">(current)</span></a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="searchTxt" type="search" placeholder="Search"
aria-label="Search">
<button class="btnbtn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form></div>
</nav>
<div id="message"></div>
<divclass="container my3"><h1>AV DIGI LIBRARY</h1><hr>
<form id="libraryForm">
<label for="bookName" class="col-sm-2 col-form-label">Name</label><div
class="col-sm-10">input type="text" class="form-control" id="bookName"
placeholder="Book Name">
</div><div>
<label for="Author" class="col-sm-2 col-form-label">Author</label><div
class="col-sm-10">
<input type="text" class="form-control" id="author" placeholder="Author"></div>
</div>
<fieldset class="form-group"><div
class="row">
<legend class="col-form-label col-sm-2 pt-0">Type</legend><div
class="col-sm-10">
<input class="form-check-input" type="radio" name="type" id="philippine" value="philippine"
checked>
<label class="form-check-label" for="philippine"> Database Management Systems
</label></div>
64
<input class="form-check-input" type="radio" name="type" id="programming"
value="programming">
<label class="form-check-label" for="programming">
Computer Science
</label></div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="type" id="science" value="science">
<label class="form-check-label" for="science">
Artificial Intellegence
</label></div>
</div>
</div>
</fieldset>
<div class="form-group row"><div
class="col-sm-10">
<button type="submit" class="btnbtn-primary">Add Book</button></div>
</div></form>
<div id="table"><h1>Your books</h1>
<table class="table table-striped"><thead><tr>
<th scope="col">Name</th><th
scope="col">Author</th><th
scope="col">Type</th>
</tr></thead>
<tbody
id='tableBody'></tbody></table>
</div></div>


<script src="libraryscript.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
</body>
65
<footer id="site-info">
<center>Copyright © AV DIGI LIBRARY
2022</center></footer>
</html>
BACK END CODE
console.log('This is ABHINAV VELAGA Project');

class Library {
constructor(name, author, type) { this.name = name; this.author = author; this.type = type;
}
}
class Display {
add(bookoflibrary) {
console.log("Adding to UI");
let tableBody = document.getElementById('tableBody'); let
uiString = `<tr>
<td>${bookoflibrary.name}</td><td>$
{bookoflibrary.author}</td><td>${boo
koflibrary.type}</td>
</tr>`;
tableBody.innerHTML += uiString;
}
clear() {
libraryForm.reset();
}
validate(bookoflibrary) {
if (bookoflibrary.name.length< 2 || bookoflibrary.author.length< 2) { return false
}
else {
return true; }
}
show(type, displayMessage) {
let message = document.getElementById('message'); let
boldText;
if (type === 'success') {
boldText = 'Success';
}
else {
boldText = 'Error!'; }
66
message.innerHTML = `<div class="alert alert-${type} alert-dismissible fade show" role="alert">
<strong>${boldText}:</strong> ${displayMessage}
<h1>SVM BANKING <span
class="style1"></span></h1><h2>Powered by AV
Technologies</h2>
</div>
<div id="navigation"><ul>
<li><a href="create.html">NEW
ACCOUNT</a></li><li><a
href="balance1.jsp">BALANCE</a></li><li><a
href="deposit1.jsp">DEPOSIT</a></li><li><a
href="withdraw1.jsp">WITHDRAW</a></li><li><a
href="transfer1.jsp">TRANSFER</a></li>
<li><a href="closeac1.jsp">CLOSE
A/C</a></li><li><a href="about.jsp">ABOUT
US</a></li></ul></div>
<table cellpadding="0" cellspacing="0" id="content1"><tr align="justify">
<td class="con" valign="top"><div
id="heade1">
<h1>Results</h1></div>
<p>This is Sree Business bank which is under business and finance category for your service....!
<br><br></p></td>
<td class="con" valign="top">
<div id="heade2">
<h1>Opportunities</h1></
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span></button>
</div>`; setTimeout(function () {
message.innerHTML = '' }, 5000);
}
}
// Add submit event listener to libraryForm
let name = document.getElementById('bookName').value; let
author = document.getElementById('author').value; let type;
let philippine = document.getElementById('philippine'); let
programming = document.getElementById('programming'); let
science = document.getElementById('science');
if (philippine.checked) { type =
philippine.value; 67
}
else if (programming.checked) { type
= programming.value;
}
else if (science.checked) { type =
science.value;
}
display.clear();
else {
OUTPUT
68
WEEK 8: Design and development of online banking using JSP/Node.js &
React.js

13.HTML5
14. CSS3
15. BOOTSTRAP 4
16. jQuery
9. MongoDB
10. Express.js
11. Node.js
12. Passport.js
Functionalitites
1.Customer can create an account
2.Customer can deposit the money
3.Customer can with draw the money
4.Customer can close the account.

1.can manage the customers

1.can do the banking services
FRONT END
<!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=utf-
8"><title>SVM BANKING</title>
<link href="style.css" rel="stylesheet" type="text/css"><script
type="text/javascript">
function ctck() {
var sds = document.getElementById("dum");
}
</script>
</head>
<body>
<div id="top_links">
69
<div id="header">div>
<p> Banking securities and assists with Loans and credit cards from
sreebank.<br><br></p></td>
<td class="con" valign="top"><div id="heade3">
<h1>Solutions</h1></div>
<p>Irrespective of Art, Finance, Nature, Night club, Communication, Computer,Music, Religious,
Fashion, Holiday, Travel, Health,Medicine. This free SreeBusiness bank helps the poor.<br>
</td></tr><
/table>
<table style="width:897px; background:#FFFFFF; margin:0 auto;">
<tr align="justify">
<td width="299" valign="top" style="border-right:#666666 1px dotted;"><div
id="services">
<h1>Services</h1><br><ul>
<li><a href="#"></a></li><li><a href="#"></a></li><li><a
href="#"></a></li></ul></div></td>
<td width="299" valign="top">
<div id="welcome" style="border-right:#666666 1px
dotted;"><h1>Welcome</h1><br>
<center><imgsrc="images/globe_10.gif" alt="business" width="196" height="106"></center><br>
<p>Each people plan their site layouts depending upon their business type. Here comes a free
designer template which provides you with a selection of different kinds of webdesign
starting from business template, fashion template, media template, Science template, Arts
template and much more.</p>
</div></td>
<td width="299" valign="top"><div
id="news">
<h1>News & Events</h1><br>
<div class="img"><imgsrc="images/globe_12.gi"
alt=""></div><h2></h2>
<p></p><
br>
<div class="img"><imgsrc="images/globe_16.gi"
alt=""></div><h2></h2>
<p><b>Contact Abhinav Velaga for web design</b></p>
</div></td></tr>
</table>
<div id="footer_top"><div id="footer_navigation">
</div>
<div id="footer_copyright">
<p>Abhinav Velaga Technical Solutions</p>
Copyright © Abhinav Velaga</div>
</div><script type="text/javascript">document.onload = ctck();
</script></div>
</body>
</html> 70
ABOUT PAGE

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SVM BANKING </title>
<A href="index.html"><IMG SRC=""></IMG></A></head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0"></TABLE>
<table width="100%" border="0" cellspacing="10" cellpadding="0"><tr>
<td class="bodyheading">
About Us 
</td></tr><tr>
<td class="bodytext">

<p align="center" class="bodytextheading"><img id="no-border" src="" width=""
height="208"><br>
<span class="style2"></span></p>
<p align="justify" class="bodytextheading">History </p>
<p align="justify"> SVM-BANK c.p. is one of the most prestigious BANKs in India. Founded as
a Public BANK in
1972 in New Delhi, it is a private institution run by the Delhi Public BANK Society.</p>
<p align="justify"> SVM-BANK, c.p. is affiliated to the Central Board of Bank (CBB), which is the
largesteducational board in the country. It is recognized by the Department of Education, Govt. of NCT Delhi
and theMinistry of HRD, Govt. of India. Over 5000 BANKs in India, with over 80,000 students, are members
of theBoard. </p>
<p align="justify"> The BANK is also affiliated to the Indian Public BANKs' Conference
(IPSC), and the National
Progressive BANKs' Conference (NPSC). The members of these organisations include some of
the premier BANKs in
the country.</p>
<p align="justify"> Life at DPSRKP centres on a shared commitment to academic
excellence, intellectual growth,
art, athletics, high standards of ethical awareness, sportsmanship, and community service. The
BANK's
traditions and accessibility to a broad curriculum add depth to each
student’s life.<br>
The BANK upholds the founders' commitment to excellence in all fields, with emphasis on
its motto Service Before Self.<br></p>
71
<p align="justify" class="bodytextheading">BANK Profile</p>
<p align="justify"> SVM-BANK, c.p. is a co-educational day-cum-boarding BANK, with
approximately 9,500 coustemer
on its rolls. These children, in the Junior and Senior branches, study in the three different campuses at East
of Kailash, Vasant Vihar and c.p.</p>
<p align="justify"> The BANK is among the most distinguished members of the Ravi Public BANK, c.p..
It is a pathbreaker in the pursuit of excellence. Its endeavour of integrating quality with quantity is
reflected in the
pivotal role it has played in the setting up of DPS Vasant Kunj, DPS Faridabad and DPS Manali at
the national
level. It has also promoted three BANKs abroad in Kuwait, Nepal and Indonesia. As their Linking
BANK it also
co-ordinates their activities. </p>
<p align="justify"> The BANK has also extended its expertise further and in collaboration
with the Government of
Haryana, has taken up 3 BANKs in the under-privileged area of Mewat, to augment and enhance
their standards
and make them more conducive to teaming.</p>
<p align="justify"> The BANK considers education to be a life-long process which should have
a strong
foundation. The goal of the BANK is to inculcate in the coustemer a love for learning and a
desire to excel at
every level. The BANK also aims at equipping the coustemer with the intellectual and practical
skills that are
necessary to meet the challenges in the future.</p>
<p align="justify"> To sum up, the mission of SVM-BANK, c.p."to open doors and open
minds" and
prepare the ground for the future of the nation.</p>
<p align="justify" class="bodytextheading"> Our Culture</p>
<p align="justify"> In the portals of SVM-BANK, c.p., c.p.coustemer discover their own talents,
and get an
opportunity to develop them to the fullest. The BANK provides an invigorating and competitive
atmosphere,
created by excellent facilities and guidance provided by a highly qualified and dedicated
faculty.</p>
<p align="justify"> The values, which are ingrained help to promote confidence, direction, and
critical thinking
skills, leading to the development of well-adjusted, adaptable and integrated personalities. In
other words,
SVM-BANK, c.p. offers comprehensive and holistic education.</p>
<p align="justify"> Besides being committed to academic excellence and providing education
for all round
development, another special characteristic of DPS R.K. Puram is the appreciation of the worth of
the each
72
Student. The BANK is equally committed to the under-represented and less-privileged segments of the
population, such as gifted applicants whose parents could not attend BANK, and children with
high potential
facing difficult financial circumstances.</p>
<p align="justify"> A major landmark development has been the inclusion of the physically
and mentally
handicapped children into the mainstream of BANK life. This contributes to a strong sense of community life,
so characteristic of the BANK. In other words, children belonging to every strata of society are
given the
opportunity to study here. The BANK, does not in any way, discriminate on the basis of race,
colour, religion,
sex, caste or creed, in the implementation of its admission policy.</p>
<p align="justify"> These qualities have placed SVM-BANK, c.p. on the forefront. There has
been a continuity of
purpose, underlying the change and growth of the BANK. Over the years, SVM-BANK, c.p. has
steadily reflected a
spirit of innovation in response to need, and has broadened its educational mission, by
creating an academic
environment that fosters close association and the exchange of ideas with some of the top BANKs
in the nation
and the world.</p>
<p align="justify"> Its membership with the IPSC has brought it into regular interaction
with BANKs of national
standing such as Mayo College, Ajmer; Scindia BANK, Gwalior; The Doon BANK,
Dehradun; Bishop Cotton, Simla
Hills; St. Xavier's and La-Martiniere at Calcutta; which has further inculcated a healthy spirit of
competition and strong bonds of brotherhood, conducive to national integration.</p><p
align="justify"> All the academic programs and activities at SVM-BANK, c.p. work
towards one purpose - to
help coustemer develop lives of significance for themselves and for others, true to the traditions of
the BANK
Motto "Service Before Self".</p>
</td></tr>
</table></td><td width="25"> </td></tr>
</table>
<table width="100%" height="26" border="0" cellpadding="0" cellspacing="0"></table>
</td></tr></table>
<table width="100%" border="0" cellspacing="7"
cellpadding="0"><tr><td>
<div align="center"><span class="bottombar"><strong>© SVM-BANK, c.p., New Delhi. All
Rights Reserved.
</strong></span></div></td>
73
</tr><tr><td>
<div align="center"></div></td>
</tr></table>
<table border="0" align="center" cellpadding="0" cellspacing="0"><tr>
<td><imgsrc="" width="915" height="1"></td></tr>
</table></td></tr></table>
</body>

</html>
BALANCE PAGE CODE

<html>
<head>
<SCRIPT LANGUAGE="JavaScript"> function dil(form) {
for (var i = 0; i<form.elements.length; i++) { if
(form.elements[i].value == "") {
alert("Fill out all Fields")
document.F1.accountno.focus()
return false
}
}
if (isNaN(document.F1.accountno.value)) { alert("Accountno must
be number & can't be null") document.F1.accountno.value =
"" document.F1.accountno.focus()
return false }
if (!isNaN(document.F1.username.value)) {
alert("User Name must be char's & can't be null")
document.F1.username.value = ""
document.F1.username.focus()
return false
}
if (!isNaN(document.F1.password.value)) { alert("Password must
be char's & can't be null") document.F1.password.value = ""
document.F1.password.focus()
return false }
return true }
</SCRIPT>
function ctck() {
74
}
</script>
</head>
<body>
<div id="header">
<h1>SVM BANKING<span class="style1"></span></h1><h2>Powered by AV
Technologies</h2>
<A href="index.html"><IMG
SRC="images/home1.gif"></IMG></A></div>
href="transfer1.jsp">TRANSFER</a></li><li><a
href="closeac1.jsp">CLOSE A/C</a></li><li><a
href="about.jsp">ABOUT US</a></li></ul>
</div>
<table style="width:897px; background:#FFFFFF; margin:0 auto;"><tr>
id="services">
<h1>Services</h1><br><ul></ul>
</div></td><td width="1200" valign="top">
dotted;"><h1>BALANCE FORM</h1><br>
<table align="center" bgcolor="white"><tr>
</tr><tr><td><div></div>
<form name=F1 onSubmit="return dil(this)" action="balance.jsp">
<table cellspacing="5" cellpadding="3"><tr>
<td>ACCOUNT NO:</td>
<td><input type="text" name="accountno" /></td>
</tr><tr>
<td>USER NAME:</td>
<td><input type="text" name="username" /></td></tr><tr>
<td>PASSWORD:</td><td><input type="password" name="password" /></td></tr><tr><td></td>
<td><input type="submit" value="Submit" />
<INPUT TYPE=RESET VALUE="CLEAR"></td></tr></table></form></td>
</tr></table></div></td>
<div id="welcome" style="border-right:#666666 1px dotted;"><h1>Welcome</h1><br>
75
</div></td></tr></table>
<div id="footer_top">
<div id="footer_navigation">
</div><div id="footer_copyright">
Copyright �Abhinav Technical Solutions
</div></div>
<script type="text/javascript">document.onload = ctck();
</script></div></body>
</html>
CLOSE ACCOUNT PAGE

<html><head>
<SCRIPT
LANGUAGE="JavaScript">
function dil(form) {
return false} }
if (isNaN(document.F1.accountno.value)) { alert("Accountno must
be number & can't be null") document.F1.accountno.value =
"" document.F1.accountno.focus()
return false }
return false }
return false }
return true }
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>SVM BANKING</title>
function ctck() {
var sds = document.getElementById("dum"); }
76
</script></head><body>
<div id="header">
<h1>SVM BANKING<span
Technologies</h2>
SRC="images/home1.gif"></IMG></A></div><div id="navigation"><ul>
href="about.jsp">ABOUT US</a></li>
</ul></div>
<td width="300" valign="top" style="border-right:#666666 1px dotted;"><div id="services">
<h1>Services</h1><br><ul></ul></div></td>
dotted;"><h1>CLOSE ACCOUNT FORM</h1><br>
<form name=F1 onSubmit="return dil(this)" action="closeac.jsp">
<td><input type="text" name="accountno" /></td></tr><tr>
<td>USER NAME:</td>
<td>PASSWORD:</td>
<td><input type="password" name="password" /></td></tr><tr><td></td>
<INPUT TYPE=RESET VALUE="CLEAR"></td></tr></table></form></td></tr></table></div>
</td>
<div id="footer_navigation"></div>
77
Copyright �Abhinav Technical Solutions</div></div>
<scripttype="text/javascript">document.onload = ctck();
</html>
CREATE PAGE CODE

<html><head>
for (var i = 0; i< 3; i++) {

if (!isNaN(form.elements[i].value)) { alert("This Field
must be Char's") form.elements[i].value = ""
form.elements[i].focus()
return false }
}
if (document.F1.password.value != document.F1.repassword.value) { alert("Check
Confirm PWD");
document.F1.repassword.value = ""
document.F1.repassword.focus() return false
}
if (!isNaN(document.F1.phone.value)) {
if (document.F1.phone.value > 9999999999) { alert("ye
kabhinhiaayegi") document.F1.phone.value = ""
document.F1.phone.focus()
return false }
} else {
alert("This field must be number")
document.F1.phone.value = ""
return false }
if (!isNaN(document.F1.amount.value)) { if
(document.F1.amount.value < 500) {
alert("Minimum Balance should be 500 /-")
document.F1.amount.value = ""
document.F1.amount.focus()
return false }
} else {
alert("This field must be number")
return false }
78
return false}}
return true }
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Sree
Banking</title>
function ctck() {
}</script></head><body>
<div id="header">
Technologies</h2>
<li><a href="create.html">NEW ACCOUNT</a></li><li>
<a href="balance1.jsp">BALANCE</a></li><li>
<a href="deposit1.jsp">DEPOSIT</a></li><li>
<a href="withdraw1.jsp">WITHDRAW</a></li><li>
<a href="transfer1.jsp">TRANSFER</a></li><li>
<a href="closeac1.jsp">CLOSE A/C</a></li><li>
<a href="about.jsp">ABOUT US</a></li></ul></div>
id="services">
<h1>Services</h1><br><ul>
<li><a href="#"></a></li><li><a href="#"></a></li><li><a
href="#"></a></li></ul></div></td>
<div id="welcome" style="border-right:#666666 1px dotted;"><h1>OPEN ACCOUNT
FORM</h1><br>
<table align="center" bgcolor="white"><tr></tr><tr><td>
<form name=F1 onSubmit="return dil(this)" action="CreateServlet">
<td>USER NAME:</td>
<td><input type="text" name="username" /></td>
79
</tr><tr>
<td>PASSWORD:</td>
<td><input type="password" name="password" /></td>
</tr><tr>
<td>RE-PASSWORD:</td>
<td><input type="password" name="repassword" /></td></tr><tr>
<td>AMOUNT:</td>
<td><input type="text" name="amount" /></td></tr>

<tr><td>ADDRESS:</td>
<td><input type="text" name="adderess" /></td></tr><tr>
<td>PHONE:</td>
<td><input type="text" name="phone" /></td></tr><tr><td></td>
<INPUT TYPE=RESET VALUE="CLEAR"></td></tr></table></form></td></tr>
</table></div></td>
<p>Irrespective of Art, Finance, Nature, Night club, Communication, Computer, Music, Religious, Fashion,
Holiday, Travel, Health,
Medicine. This free Sree Business bank helps the poor</p></div></td></tr></table>
<p></p>Copyright © Abhinav Technical Solutions </div></div>
</script></div>/body>
</html>
DEPOSIT CODE
<html><head>
<SCRIPT
LANGUAGE="JavaScript">
function dil(form) {
return false
}}
80
if (isNaN(document.F1.accountno.value)) {
alert("A/C No. must be number & can't be null")
document.F1.accountno.value = ""
return false }
return false }
return false }
if (isNaN(document.F1.amount.value)) {
alert("Amount must be number & can't be null")
return false }
return true }
</SCRIPT>
function ctck() {
}
<div id="top_links"><div id="header">
Technologies</h2>
<li><a href="create.html">NEW ACCOUNT</a></li><li>
<a href="balance1.jsp">BALANCE</a></li><li>
<a href="deposit1.jsp">DEPOSIT</a></li><li>
<a href="withdraw1.jsp">WITHDRAW</a></li><li>
<a href="transfer1.jsp">TRANSFER</a></li><li>
<a href="closeac1.jsp">CLOSE A/C</a></li><li>
<a href="about.jsp">ABOUT US</a></li>
81
</ul></div>
<td width="300" valign="top" style="border-right:#666666 1px dotted;">
<div id="services">
<div id="welcome" style="border-right:#666666 1px dotted;"><h1>DEPOSIT
FORM</h1><br>
<table align="center" bgcolor="white"><tr></tr><tr>
<td><div></div>
<form name=F1 onSubmit="return dil(this)" action="deposit.jsp">
< table cellspacing="5" cellpadding="3"><tr>
<td>USER NAME:</td>
<td>PASSWORD:</td>
<td><input type="password" name="password" /></td></tr><tr><td>AMOUNT:</td>
<td><input type="text" name="amount" /></td></tr>
<tr><td></td><td><input type="submit" value="Submit"
/>
<INPUT TYPE=RESET VALUE="CLEAR"></td></tr></table>
</form></td></tr></table></div></td>
<center><imgsrc="images/globe_10.gif" alt="business" width="196" height="106"></center><br></div>
< /td></tr></table>
Copyright �Abhinav Technical Solutions </div></div>
<scrip type="text/javascript">document.onload = ctck();
</html>
TRANSFER CODE

<html>
82
<head><SCRIPT LANGUAGE="JavaScript"> function dil(form) {
document.F1.accountno.focus(
) return false
}
}
document.F1.accountno.focus() return
false
}
return false }
return false }
if (isNaN(document.F1.taccountno.value)) {
alert("target account must be number & can't be null")
document.F1.taccountno.value = "" document.F1.taccountno.focus()
return false }
if (document.F1.accountno.value == document.F1.taccountno.value) {
alert("Change target accountno"); document.F1.taccountno.value = ""
document.F1.taccountno.focus()
return false }
return false }
return true }
</SCRIPT>
<link href="style.css" rel="stylesheet" type="text/css">
83
<script type="text/javascript">
function ctck() {
}
<div id="header">
Technologies</h2>
SRC="images/home1.gif"></IMG></A></div><div id="navigation"><ul>
href="about.jsp">ABOUT US</a></li>
</ul></div>
<td width="100" valign="top" style="border-right:#666666 1px dotted;"><div id="services">
<div id="welcome" style="border-right:#666666 1px dotted;">
<h1>TRANSFER FORM</h1><br>
<table align="center"
bgcolor="white"><tr></tr><tr>
<td><div></div>
<form name=F1 onSubmit="return dil(this)" action="transfer.jsp">
<td>USER NAME:</td>
<td>PASSWORD:</td><td><input type="password" name="password" /></td>
</tr><tr><td>TARGET ACCOUNT NO:</td>
<td><input type="text" name="taccountno" /></td></tr><tr>
<td>AMOUNT:</td><td><input type="text" name="amount" /></td></tr>
84
<tr><td></td><td><input type="submit" value="Submit"
/>
<INPUT TYPE=RESET VALUE="CLEAR"></td></tr></table></form></td></tr>
</table></div></td>
<div id="footer_copyright">Copyright �Abhinav Technical Solutions</div></div>
<script ype="text/javascript">document.onload = ctck();
</script></div></body></html>
WITHDRAW CODE

<html><head>
return false
}
}
return false }
return false }
return false }
document.F1.amount.value = "" 85
return false
}
return true }
</SCRIPT><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>SVM
BANKING</title>
function ctck() {
}
<div id="header">
Technologies</h2>
href="about.jsp">ABOUT US</a></li></ul></div>
<td width="300" valign="top" style="border-right:#666666 1px dotted;">
<div
id="services"><h1>Services</h1><br><ul></ul>
</div></td><td width="1200" valign="top">
dotted;"><h1>WITHDRAW FORM</h1><br>
<form name=F1 onSubmit="return dil(this)" action="withdraw.jsp">
<td> ACCOUNT NO: </td><td><input type="text" name="accountno" /></td>
</tr><tr><td>USER NAME: </td>
<td><input type="text" name="username" /></td>
</tr><tr><td>PASSWORD:</td>
<td><input type="password" name="password" /></td>
</tr><tr><td>AMOUNT:</td><td><input type="text" 86
name="amount" /></td></tr><tr><td></td>
<td><input type="submit" value="Submit" /><INPUT TYPE=RESET VALUE="CLEAR"></td>
</tr></table></form></td></tr></table></div></td>
Copyright �Abhinav Technical Solutions</div></div>
</script></div></body></html>
OUTPUT
87
WEEK 9: Design and development of online job portal using JSP/Node.js &
React.js
21. HTML5
22. CSS3
23. BOOTSTRAP 4
24. jQuery
13. MongoDB
14. Express.js
15. Node.js
16. Passport.js
Functionalitites
1.Create account to find jobs
2.Toprecuiters are highlighted
3.Search option to search for jobs
4.various options to become a member

1.Send the applied stats to job employers

1.can search for books
FRONT END
CSS
#searchjum{
background: #1abc9c;
color: #FFFFFF;
} #insidenav{
background: #1abc9c;
color: white;
font-size: 13px; }
nav a{
font-size: 16px; font-family: ubuntu;
color: white; }
nav ul li {
font-size: 16px; font-
family: ubuntu;
} li.active{
background: cadetblue; }
#subcontent{ 88
background: lavender;0
color: black;
font-size: 13px; }
footer .glyphicon { font-
size: 20px;
margin-bottom: 20px;
color: #f4511e;
}
div.bmsTop{
list-style-type: none;
display: block;
background:transparent;
padding: 10px 8px 8px;
margin-bottom: 10px;
}
div.bmsTopulli{ display:
inline; overflow:
hidden;
} .panel {
border: 1px solid #f4511e; border-
radius:0; transition: box-shadow
0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2); }
.panel-footer .btn:hover { border:

1px solid #f4511e;
background-color: #fff !important; color:
#f4511e;
}
panel-heading {
color: #fff !important;
background-color: #f4511e !important;
padding: 25px;
border-bottom: 1px solid transparent; border-
top-left-radius: 0px;
border-top-right-radius: 0px; border-
bottom-left-radius: 0px; border-
bottom-right-radius: 0px;
}
.panel-footer {
background-color: #fff !important; }
89
.panel-footer h3 { font-size: 32px;
}
.panel-footer h4 { color: #aaa; font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #f4511e;
color: #fff;
}
body{
background-image: url("../images/hero-background-lg.jpg"); font-
family: Ubuntu ;
font-weight: normal;
font-size: 16px;
}
MAIN PAGE CSS
td{
padding: 12px; }
body{
background:url("paper2.png") center center fixed; -webkit-
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Ubuntu ;
font-weight: normal;
font-size: 18px;
} table{
background:white;
font-size: 16px;
} label{
color: black;
font-family: consolas; }
body{
font-family: ubuntu; }
h2 {font-size: 24px;
text-transform: uppercase; font-
weight: 600;
margin-bottom: 30px; }
90
label.error{
color: crimson;
font-size: 16px;
} h3.h3style{
color: blue;
font-family: ubuntu; }
body.indexbody{ background:
lawngreen;
}
#header{
padding: 10px;
margin: 10px;
}
JOB SEARCH OPTION
/**
* Created by Abhinav Velaga on 06-08-2022 */
function search() {
var keyword = document.getElementById("keyword").value; //
alert(keyword);
var xmlhttp;
if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari xmlhttp =
new XMLHttpRequest();
} else { // for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState != 4 &&xmlhttp.status == 200) {
document.getElementById("subcontent").innerHTML = "Searching..";
} else if (xmlhttp.readyState == 4 &&xmlhttp.status == 200) {
document.getElementById("subcontent").innerHTML = xmlhttp.responseText;
} else {
document.getElementById("subcontent").innerHTML = "Error Occurred. <a
href='index.php'>Reload Or Try Again</a> the page.";
}
}
xmlhttp.open("GET", "home_search.php?key=" + keyword, true);
xmlhttp.send();
}
91
OUTPUT
234
92
WEEK 10: Design and development of Online Auction using JSP/Node.js &
React.js
17. HTML5
18. CSS3
19.BOOTSTRAP 4
20. jQuery
9. MongoDB 10.
Express.js 11.
Node.js 12.
assport.js
Functionalitites
1.Bids can be placed for the product
2.Bid is updated automatically
3.Sign up is there to place a bid
4.Time left option

1.Search the present bids and process

1.user can place the bids.
FRONT END
<!doctype html>
<html class="no-js" lang="en"><head>
<meta charset="utf-8" />
<meta name="robots" content="NOINDEX, NOFOLLOW">
<meta
name="description" content="An auction website">
<meta property="og:image" content="https://www.mellor.io/auction-website/img/banner.png"><meta
name="keywords" content="Online Auctions">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/><title>SVM BIDDING SOLUTIONS</title>
<link rel="icon" type="image/png" href="./img/favicon.ico">

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
93
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"

<link rel="stylesheet" href="./css/auction-website.css"><link
rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"></head>
<body><script
src="https://www.gstatic.com/firebasejs/6.5.0/firebase-app.js"></script><script
src="https://www.gstatic.com/firebasejs/6.5.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.5.0/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration const
firebaseConfig = {
apiKey: "AIzaSyCAYOYDuMKGGjTSJL5uDzG5hjQ6y_vYPiI", authDomain:
"auction-website-b12fc.firebaseapp.com", databaseURL: "https://auction-
website-b12fc.firebaseio.com", projectId: "auction-website-b12fc",
storageBucket: "auction-website-b12fc.appspot.com",
messagingSenderId: "791747024664",
appId: "1:791747024664:web:215a222a81c6d0c2aeb06d" };
// Initialize Firebase
firebase.initializeApp(firebaseConfig); var db =
firebase.firestore();
var auth = firebase.auth();
</script>

<nav class="navbar navbar-dark bg-primary"><div
class="container-fluid">
<a class="navbar-brand mb-0 h1">
<imgsrc="./img/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
SVM BIDDING SOLUTIONS </a>
<a class="navbar-brand" id="username-display"></a>
<button id="signup-button" class="btnbtn-secondary" type="submit"
onclick="openLogin()">Sign up</button>
</div></nav>

<div id="auction-container" class="container">
<div id="auction-grid" class="row row-cols-1 row-cols-md-3 g-4"></div>
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<center><span class="text-muted">© 2022 Abhinav Technical Soutions</span></center></div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex"><li class="ms-
94
3"><a class="bi bi-github text-muted" href="" width=""
height="24"></a></li></ul></footer></div>

<div id="login-modal" class="modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 id="login-modal-title" class="modal-title">Sign up for Markatplace Auction</h5></div>
<div class="modal-body">
<p>We use anonymous authentication provided by Google. Your account is attached to your
device signature.</p>
<p>The username just lets us know who's bidding!</p>
<form onsubmit="return false;">
<div class="form-floating mb-3">
<input type="username" class="form-control" id="username-input" placeholder="username"
onkeypress="if (event.key == 'Enter') {newUserLogin()}">
<label for="username-input">Username</label></div>
<div class="modal-footer">
<button type="button" class="btnbtn-secondary" data-bs-dismiss="modal" aria-
label="Cancel">Cancel</button>
<button type="submit" class="btnbtn-primary" onclick="newUserLogin()">Sign up</button>
</div></form></div></div></div></div>

<div id="info-modal" class="modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<h5 id="info-modal-title" class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<p id="info-modal-desc"></p><img
id="info-modal-img"></img>
</div>
label="Close">Close</button>
<button type="button" class="btnbtn-primary" data-bs-dismiss="modal" aria-label="Submit bid"
onclick="openBid(this.id)">Submit
bid</button></div></div></div></div>

<div id="bid-modal" class="modal" tabindex="-1">
95
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"><div class="modal-content">
<h5 id="bid-modal-title" class="modal-title">Place your bid</h5></div>
<p>You are about to place a bid on <strong id="bid-modal-subtitle"></strong></p><p
class="text-muted">(This is just a demo, you're not bidding real money)</p><form
onsubmit="return false;">
<div class="form-floating mb-3">
<input type="amount" class="form-control" id="amount-input" placeholder="amount"
onkeypress="if (event.key == 'Enter') {placeBid()}">
<label for="amount-input">Amount</label>
<div id="bad-amount-feedback" class="invalid-feedback"></div></div>
</form></div>
label="Cancel">Cancel</button>
<button type="submit" class="btnbtn-primary" onclick="placeBid()">Submit bid</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script
src="./js/auctions.js"></script>
<script src="./js/popups.js"></script>
<script>
populateAuctionGrid();
setClocks(); dataListener()
autoLogin();
</script></body>
</html>
BACK END
AUCTION PAGE CODE
// For a real auction, set this to false let

demoAuction = true;
// For a real auction, populate these arrays let
primaryImages = [];
let titles = [];
let subtitles = [];
let details = [];
let secondaryImages = [];
let startingPrices = [55, 60, 20, 0, 4, 0, 99, 0, 12, 6, 3, 7];
let endTimes = []; // Make sure to fix these to UTC time so they don't change with the users timezone
// Random auction information function
generateRandomAuctions() {
96
// Random cat images
document.querySelectorAll(".card >img").forEach(img => {
img.src = "https://cataas.com/cat/cute?random=" + Math.random();
primaryImages.push(img.src);
secondaryImages.push(img.src); });
// Random cat names
$.getJSON(
"https://random-data-api.com/api/name/random_name", {
size: startingPrices.length },
function (data) { data.forEach((elem,
idx) => {
document.querySelector("#auction-" + idx + " > div > h5").innerHTML = elem.name;
titles.push(elem.name);
});
});
// Random lorem ipsum cat descriptions
$.getJSON(
"https://random-data-api.com/api/lorem_ipsum/random_lorem_ipsum", { size:
startingPrices.length },
function (data) { data.forEach((elem,
idx) => {
document.querySelector("#auction-" + idx + " > div > p").innerHTML =
elem.short_sentence;
subtitles.push(elem.short_sentence);
details.push(elem.very_long_sentence);
}); }
); }
// Initial state of auction, used for resetting database let startPrices

= [];
for (let i = 0; i<startingPrices.length; i++) { if
(demoAuction) {
let now = new Date();
let endTime = new Date().setHours(8 + i, 0, 0, 0)
if (endTime - now < 0) { endTime = new Date(endTime).setDate(now.getDate() + 1) }
endTimes.push(endTime)
} startPrices.push({
bid0: {
bidder: String(i), amount:
startingPrices[i],
time: Date().substring(0, 24) }
})
}
97
// Convert time to string for HTML clocks
function timeBetween(start, end) {
let _string = ""
let secsRemaining = (end - start) / 1000; let d =
parseInt(secsRemaining / 86400);
let h = parseInt(secsRemaining % 86400 / 3600); let m =
parseInt(secsRemaining % 3600 / 60); let s =
parseInt(secsRemaining % 60);
if (d) { _string = _string + d + "d " } if (h) {
_string = _string + h + "h " } if (m) { _string =
_string + m + "m " } if (s) { _string = _string +
s + "s " } return _string.trim()
}
// Set time on HTML clocks
function setClocks() {
let now = new Date();
let nowTime = now.getTime();
for (i = 0; i<startingPrices.length; i++) {
let timer = document.getElementById("time-left-" + i) // remove
finished auction after 5 minutes
if (endTimes[i] - nowTime< -300) {
document.getElementById("auction-" + i).parentElement.style.display = "none" if
(demoAuction) {
endTimes[i] = new Date(endTimes[i]).setDate(now.getDate() + 1) // add 1 day
document.getElementById("auction-" + i).parentElement.remove() resetLive(i);
resetStore(i);
auctionGrid = document.getElementById("auction-grid");
auctionCard = generateAuctionCard(i);
auctionGrid.appendChild(auctionCard);
}
// disable bidding on finished auctions } else if
(endTimes[i] - nowTime< 0) {
timer.innerHTML = "Auction Complete";
document.getElementById("bid-button-" + i).setAttribute('disabled', '') } else {
timer.innerHTML = timeBetween(nowTime, endTimes[i]); }
}
setTimeout(setClocks, 1000); }
// Place a bid on an item
function placeBid() {
let nowTime = new Date().getTime();
let modalBidButton = document.querySelector("#bid-modal > div > div >div.modal-footer
>button.btn.btn-primary")
98
modalBidButton.setAttribute('disabled', '') // disable the button while we check let i =
modalBidButton.id.match("[0-9]+");
let feedback = document.getElementById("bad-amount-feedback") //
Cleanse input
let amountElement = document.getElementById("amount-input") let
amount = Number(amountElement.value)
if (endTimes[i] - nowTime< 0) {
feedback.innerText = "The auction is already over!"
amountElement.classList.add("is-invalid") setTimeout(() => {
bidModal.hide(); amountElement.classList.remove("is-
invalid"); modalBidButton.removeAttribute('disabled', '');
}, 1000);
} else if (amount == 0) { //
amount was empty
feedback.innerText = "Please specify an amount!"
amountElement.classList.add("is-invalid")
modalBidButton.removeAttribute('disabled', '');
} else if (!(/^-?\d*\.?\d{0,2}$/.test(amount))) { // field is
does not contain money
feedback.innerText = "Please specify a valid amount!"
} else {
// Checking bid amount
Get item and user info let user =
auth.currentUser;
let itemId = i.toString().padStart(5, "0") //
Documents to check and write to
let liveRef = db.collection("auction-live").doc("items") let storeRef =
db.collection("auction-store").doc(itemId) // Check live document
liveRef.get().then(function (doc) {
console.log("Database read from placeBid()") let
thisItem = doc.data()[itemId];
let bids = (Object.keys(thisItem).length - 1) / 2 let
currentBid = thisItem["bid" + bids]
if (amount >= 1 + currentBid) {
keyStem = itemId + ".bid" + (bids + 1)
liveRef.update({
[keyStem + "-uid"]: user.uid,
[keyStem]: amount,
})
console.log("Database write from placeBid()")
storeKey = "bid" + (bids + 1) storeRef.update({
99
[storeKey]: {
"bidder-username": user.displayName,
"bidder-uid": user.uid,
"amount": amount,
time: Date().substring(0, 24) }
})
//
console.log("Database write from placeBid()")
amountElement.classList.add("is-valid")
amountElement.classList.remove("is-invalid")
setTimeout(() => {
bidModal.hide(); amountElement.classList.remove("is-
valid"); modalBidButton.removeAttribute('disabled', '');
}, 1000); }
else {
feedback.innerText = "You must bid at least £" + (currentBid + 1).toFixed(2) + "!"
} });
}
}
function argsort(array) {
const arrayObject = array.map((value, idx) => { return { value, idx }; });
arrayObject.sort((a, b) => (a.value - b.value)) return
arrayObject.map(data =>data.idx);;
}
function generateAuctionCard(i) { //
create auction card
let col = document.createElement("div");
col.classList.add("col");
let card = document.createElement("div");

card.classList.add("card");
card.id = "auction-" +
icol.appendChild(card);
let image = document.createElement("img");

image.classList.add("card-img-top"); image.src =
primaryImages[i]; card.appendChild(image);
let body = document.createElement("div");

body.classList.add("card-body");
card.appendChild(body);
let title = document.createElement("h5"); 100
title.classList.add("title"); title.innerText =
titles[i]; body.appendChild(title);
let subtitle = document.createElement("p");
subtitle.classList.add("card-subtitle");
subtitle.innerText = subtitles[i];
body.appendChild(subtitle);
// Auction status
let statusTable = document.createElement("table");
statusTable.classList.add("table");
card.appendChild(statusTable);
let tableBody = document.createElement("tbody");
statusTable.appendChild(tableBody);
let bidRow = document.createElement("tr");
tableBody.appendChild(bidRow);
let bidTitle = document.createElement("th");
bidTitle.innerHTML = "Current bid:" bidTitle.scope
= "row";
bidRow.appendChild(bidTitle);
let bid = document.createElement("td");
bid.innerHTML = "£-.-- [- bids]"
bid.id = "current-bid-" +
ibidRow.appendChild(bid);
let timeRow = document.createElement("tr");
tableBody.appendChild(timeRow);
let timeTitle = document.createElement("th");
timeTitle.innerHTML = "Time left:" timeTitle.scope =
"row"; timeRow.appendChild(timeTitle);
let time = document.createElement("td"); time.id
= "time-left-" + itimeRow.appendChild(time);
// Auction actions
let buttonGroup = document.createElement("div");
buttonGroup.classList.add("btn-group");
card.appendChild(buttonGroup)
let infoButton = document.createElement("button");
infoButton.type = "button"
infoButton.href = "#"; infoButton.classList.add("btn",
"btn-secondary") infoButton.innerText = "Info";
infoButton.onclick = function () { openInfo(this.id); }
infoButton.id = "info-button-" +
ibuttonGroup.appendChild(infoButton);
let bidButton = document.createElement("button");
bidButton.type = "button"
bidButton.href = "#"; bidButton.classList.add("btn",
101
"btn-primary") bidButton.innerText = "Submit bid";
bidButton.onclick = function () { openBid(this.id); }
bidButton.id = "bid-button-" +
ibuttonGroup.appendChild(bidButton);
return col }
// Generatively populate the websire with auctions function
populateAuctionGrid() {
auctionGrid = document.getElementById("auction-grid"); let
endingSoonest = argsort(endTimes); endingSoonest.forEach((i)
=> {auctionCard = generateAuctionCard(i);
auctionGrid.appendChild(auctionCard);
});
if (demoAuction) { generateRandomAuctions() }; }
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }
function dataListener() {
// Listen for updates in active auctions
db.collection("auction-live").doc("items").onSnapshot(function (doc) {
console.log("Database read from dataListener()")
let data = doc.data() for
(key in data) {
let cb = document.getElementById("current-bid-" + Number(key)) let bids
= data[key]
// Extract bid data
let bidCount = (Object.keys(bids).length - 1) / 2
let currPound = Number.parseFloat(bids["bid" + bidCount]).toFixed(2) // Check if
the user is winning
if (auth.currentUser) {
let userWinning = bids["bid" + bidCount + "-user"] == auth.currentUser.uid }
// Add bid data to HTML
cb.innerHTML = "£" + numberWithCommas(currPound) + " [" + bidCount + " bid" + (bidCount != 1 ?
"s" : "") + "]"
}
})
}
function resetLive(i) {
let docRef = db.collection("auction-live").doc("items"); let itemId
= i.toString().padStart(5, "0") docRef.update({
[itemId]: {
bid0: startPrices[i]["bid0"]["amount"], }
})
console.log("Database write from resetLive()") }
function resetAllLive() { 102

console.log("Resetting live tracker")
for (i = 0; i<startingPrices.length; i++) { resetLive(i);
}
}
function resetStore(i) {
let itemId = i.toString().padStart(5, "0")
let docRef = db.collection("auction-store").doc(itemId);
docRef.set(startPrices[i])
console.log("Database write from resetStore()") }
function resetAllStore() { console.log("Resetting
auction storage") let batch = db.batch();
for (i = 0; i<startingPrices.length; i++) { letitemId =
i.toString().padStart(5, "0")
let currentItem = db.collection("auction-store").doc(itemId);
batch.set(currentItem, startPrices[i])
} batch.commit()
console.log(startingPrices.length + " database writes from resetAllStore()") }
function resetAll() {
resetAllLive();
resetAllStore();
}
POPUP CODE
loginModal = new bootstrap.Modal(document.getElementById('login-modal'))

infoModal = new bootstrap.Modal(document.getElementById('info-modal')) bidModal
= new bootstrap.Modal(document.getElementById('bid-modal'))
function openInfo(id) {
let i = id.match("[0-9]+");
document.getElementById('info-modal-title').innerText = titles[i] document.getElementById('info-
modal-desc').innerHTML = details[i] document.getElementById('info-modal-img').src =
secondaryImages[i]; document.querySelector("#info-modal > div > div >div.modal-footer
>button.btn.btn-
primary").id = "info-modal-submit-bid-btn-" +
iinfoModal.show()
}
function openBid(id) {
let i = id.match('[0-9]+');
document.getElementById("amount-input").value = ""
document.getElementById("amount-input").classList.remove("is-invalid")
document.getElementById('bid-modal-subtitle').innerText = titles[i] document.querySelector("#bid-
modal > div > div >div.modal-footer >button.btn.btn-
103
primary").id = "bid-modal-submit-bid-btn-" + i
loggedIn = auth.currentUser&&auth.currentUser.displayName if
(loggedIn) {
bidModal.show() document.getElementById("amount-
input").focus()
} else {
openLogin()
}
}
function openLogin() {
loggedIn = auth.currentUser&&auth.currentUser.displayName
if (!loggedIn) { loginModal.show(); document.getElementById('username-input').focus() } }
function newUserLogin() {
loggedIn = auth.currentUser&&auth.currentUser.displayName if
(!loggedIn) {
let username = document.getElementById('username-input').value let user
= auth.currentUser;
user.updateProfile({ displayName: username }) db.collection("users").doc(user.uid).set({
name: username, admin: false }) loginModal.hide()
replaceSignupButton(username) }
}
function autoLogin() {
auth.onAuthStateChanged(function (user) {
if (user &&user.displayName != null) {
replaceSignupButton(user.displayName)
} else {
auth.signInAnonymously()
} });
}
function replaceSignupButton(name) { document.getElementById('signup-
button').style.display = "none"
document.getElementById('username-display').innerText = "Hi " + name }
104
CSS CODE
html * {
font-family: 'Roboto', sans-serif; }
/* Bootstrap tweaks */
.card-img-top {
width: 100%; height:
16em; object-fit:
cover;
}
.list-group-horizontal > .list-group-item { border:

none;
}
#info-modal-img {
width: 100%;
}
.table {
margin-bottom: 0; }
OUTPUT
105

Web Application Development Lab

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Application Development Lab

Uploaded by

Copyright:

Available Formats

ST.

MARY’S GROUP OF INSTITUTIONS GUNTUR

Name of the student: __________________________________________________

Year:_____________ Semester:_______________ Regulation:_________________

bearing roll no of _______B. Tech semester

branch has satisfactorily

completed laboratory during the

Place: Signature of Faculty

External Practical Examination held on:______________________

Signature of Internal Examiner Signature of External Examiner

o login.jspfor getting the values from the user

1. CREATE TABLE "USER432"

It simply provides three links for login, logout and profile.

1. <%@ include file="index.jsp" %>

This class varifies the emailid and password.

2. Connect JSP with mysql:

<%@ page import="java.sql.*" %>

// declare a connection by using Connection

// Load JBBC driver

/* Create a connection by using getConnection() method that takes parameters of

// check weather connection is established or not by isClosed() method

Frameworks used in this application

Admin module functionalities

User module functionalities

FRONT END CODE

<!-- Bootstrap CSS --

console.log('This is ABHINAV VELAGA Project');

//Add submit event listener to libraryForm

Frameworks used in this application

Admin module functionalities

User module functionalities

FRONT END CODE

Admin module functionalities

User module functionalities

<div class="tabs-content" id="recommended-hotel"><div

CONTACT US FORM CODE

// mobile nav toggle

BACK END CODE

* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

var startEvent = $.Event('show.bs.collapse')

this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {

* Inspired by the original jQuery.tipsy by Jason Frame

$e.attr('data-original-title', $e.attr('title') || '').attr('title', '')

let bookoflibrary = new Library(name, author, type);

let display = new Display();

Admin module functionalities

User module functionalities

FRONT END CODE

BACK END CODE

console.log('This is ABHINAV VELAGA Project');

Frameworks used in this application

Admin module functionalities

User module functionalities

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

CLOSE ACCOUNT PAGE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

CREATE PAGE CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

for (var i = 0; i< 3; i++) {

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Year:_____ Semester:_ Regulation:___________