In: Computer Science
PHP, JAVASCRIPT, MYSQL below is what I have. Can fill in the details for the database
5. “Login to DB”, “Logout DB”, sub-menus of “File”
5.1 _____ When the user selects “Login to DB”, a window should
popup asking the user to enter
login and password. Your program should verify the login and
password against the DV_User table in
the datamining database. A corresponding message should be shown in
the message area when the
login failed or successful. If it is successful, please store the
user information on the browser and the
message should include welcome and the user name.
5.2 _____ When the user selects “Logout DB”, a window should popup
asking the user to confirm.
If user confirms to logout, your program should clean the user
information from the browser, and a
“Successful logout” should be displayed in the message area.
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">File <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<input id="csvfile" type="file" style="display:none" />
<a href="#" id="loadCSV">Load CSV file</a>
<a href="#" id='navLoginDB' onclick="return loginDB('show');">Login to DB</a>
<a href="#" id='navLogoutDB' onclick="return logoutDB();">Logout DB</a>
<a href="#">Exit</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">View <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#">Line</a>
<a href="#">Pie</a>
<a href="#">Bar</a>
<a href="#">Map</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Setting <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#link1">User Info</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Help <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#">Info</a>
<a href="#">Client</a>
</div>
</div>
</div>
<div id="dvCSV">
</div>
<script>
$(document).ready(function () {
var browserSupportFileUpload = function () {
var isCompatible = false;
if (window.File && window.FileReader && window.FileList && window.Blob) {
isCompatible = true;
}
return isCompatible;
};
if (browserSupportFileUpload()) {
document.getElementById('csvfile').addEventListener('change', uploadFile, false);
} else {
$("#message").html('The File APIs is not fully supported in thie browser. please use another browser.');
}
$(function () {
$("#loadCSV").click(function(e){
//$("#loadCSV").on('click', function (e) {
e.preventDefault();
$("#csvfile:hidden").trigger('click');
});
});
var uploadFile = function (event) {
var file = event.target.files[0];
var fileformat;
if (file.name.indexOf("csv") != -1) {
fileformat = true;
}
else {
fileformat = false;
}
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (event) {
if ((file.size / Math.pow(1024, 3)) > navigator.deviceMemory) {
document.getElementById("message").innerHTML = "The data requires more memory than the client can offer";
}
else if (!fileformat) {
document.getElementById("message").innerHTML = "The data is in wrong format. Only CSV file can be loaded!";
}
else {
createArray($.csv.toArrays(event.target.result));
}
};
};
function createArray(data) {
if (data !== null && data !== "" && data.length > 1) {
this.CSVdata = data;
document.getElementById("message").innerHTML = " File upload successful with" + ((CSVdata.length) - 1) + " records! lower threshold is:" + highlight('OutlierL') + " upper threshold is: " + highlight('OutlierU');
var wage = findAvg('Avg');
var pop = findAvg('Pop');
if (getCookie("p1UserName") != "") {
var uname = getCookie("p1UserName");
$.ajax({
url: "",
type: 'POST',
async: false,
data: {
uname: uname
},
success: function (response) {
var dd = JSON.parse(response);
console.log(dd);
wage = parseFloat(dd[0][0]);
pop = parseFloat(dd[0][1]);
}
});
}
}
}
}
);
</script>
</body>
</html>
style.css
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
#upload {
display: block;
visibility: hidden;
width: 0;
height: 0;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
5.1 On the webpage, if user click on the file menu - login page then popup window display with desired login and password, here the code should use in the hml page:
<a href="#" onclick="document.getElementById('navLoginDB').style.display='block'" style="width:auto;">Login to DB</a>
<div id="navLoginDB" class="modal">
<form class="modal-content animate" action="" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('navLoginDB').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('navLoginDB').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
The style.css for define the popup of username and password:
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
For poup need to use the javascript, here the code which need to add on html page:
<script>
// Get the modal
var modal = document.getElementById('navLoginDB');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Hence for popup need to define each class on css and for operation in javascript, now the final code will be:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
#upload {
display: block;
visibility: hidden;
width: 0;
height: 0;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">File <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<input id="csvfile" type="file" style="display:none" />
<a href="#" id="loadCSV">Load CSV file</a>
<a href="#" onclick="document.getElementById('navLoginDB').style.display='block'" style="width:auto;">Login to DB</a>
<div id="navLoginDB" class="modal">
<form class="modal-content animate" action="" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('navLoginDB').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('navLoginDB').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('navLoginDB');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<a href="#" id='navLogoutDB' onclick="return logoutDB();">Logout DB</a>
<a href="#">Exit</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">View <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#">Line</a>
<a href="#">Pie</a>
<a href="#">Bar</a>
<a href="#">Map</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Setting <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#link1">User Info</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Help <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#">Info</a>
<a href="#">Client</a>
</div>
</div>
</div>
<div id="dvCSV">
</div>
<script>
$(document).ready(function () {
var browserSupportFileUpload = function () {
var isCompatible = false;
if (window.File && window.FileReader && window.FileList && window.Blob) {
isCompatible = true;
}
return isCompatible;
};
if (browserSupportFileUpload()) {
document.getElementById('csvfile').addEventListener('change', uploadFile, false);
} else {
$("#message").html('The File APIs is not fully supported in thie browser. please use another browser.');
}
$(function () {
$("#loadCSV").click(function(e){
//$("#loadCSV").on('click', function (e) {
e.preventDefault();
$("#csvfile:hidden").trigger('click');
});
});
var uploadFile = function (event) {
var file = event.target.files[0];
var fileformat;
if (file.name.indexOf("csv") != -1) {
fileformat = true;
}
else {
fileformat = false;
}
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (event) {
if ((file.size / Math.pow(1024, 3)) > navigator.deviceMemory) {
document.getElementById("message").innerHTML = "The data requires more memory than the client can offer";
}
else if (!fileformat) {
document.getElementById("message").innerHTML = "The data is in wrong format. Only CSV file can be loaded!";
}
else {
createArray($.csv.toArrays(event.target.result));
}
};
};
function createArray(data) {
if (data !== null && data !== "" && data.length > 1) {
this.CSVdata = data;
document.getElementById("message").innerHTML = " File upload successful with" + ((CSVdata.length) - 1) + " records! lower threshold is:" + highlight('OutlierL') + " upper threshold is: " + highlight('OutlierU');
var wage = findAvg('Avg');
var pop = findAvg('Pop');
if (getCookie("p1UserName") != "") {
var uname = getCookie("p1UserName");
$.ajax({
url: "",
type: 'POST',
async: false,
data: {
uname: uname
},
success: function (response) {
var dd = JSON.parse(response);
console.log(dd);
wage = parseFloat(dd[0][0]);
pop = parseFloat(dd[0][1]);
}
});
}
}
}
}
);
</script>
</body>
</html>
Now, the situation is about the user, if the user login in page then its show successfully or fail for that we need to call the form value on aspx value on datatable so it will validate the data if it is stored other wise it will show unsuccessfully, firstly the define the name on the form for login and password
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using MySql.Data.MySqlClient;
using connect;
public partial class login : System.Web.UI.Page
{
MySqlConnection cn = new MySqlConnection();
connect_class cnn = new connect_class();
protected void Page_Load(object sender, EventArgs e)
{
cn = cnn.myconect();
string uid = Request.QueryString["name"];
string pass = Request.QueryString["pass"];
q_login(uid, pass);
}
public void q_login(string uid,string pass)
{
DataTable dt1 = new DataTable();
string SqlStr = "select * from login where user_id='" + uid + "' and pass='" + pass + "'";
MySqlDataAdapter dap1 = new MySqlDataAdapter(SqlStr, cn);
dap1.Fill(dt1);
if (dt1.Rows.Count > 0)
{
string temp = dt1.Rows[0][2].ToString(); // geting user type
string tmp = dt1.Rows[0][0].ToString();
string tuserid = dt1.Rows[0][3].ToString();
switch (temp)
{
case "USER":
Session.Add("uid", tmp);
Session.Add("username", tuserid);
string uID = Session["uid"].ToString();
Response.Redirect("login.html");
break;
default:
lblerror.Text = "Invalid user or password,try again";
Response.Write("<script>alert('Invalid user or password,try again')</script>");
break;
}
}
}
The file named as login.aspx.cs, now the form call this aspx value:
<div id="navLoginDB" class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('navLoginDB').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="name" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pass" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('navLoginDB').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
Now the final output will be:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
#upload {
display: block;
visibility: hidden;
width: 0;
height: 0;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">File <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<input id="csvfile" type="file" style="display:none" />
<a href="#" id="loadCSV">Load CSV file</a>
<a href="#" onclick="document.getElementById('navLoginDB').style.display='block'" style="width:auto;">Login to DB</a>
<div id="navLoginDB" class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('navLoginDB').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="name" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pass" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('navLoginDB').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('navLoginDB');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<a href="#" id='navLogoutDB' onclick="return logoutDB();">Logout DB</a>
<a href="#">Exit</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">View <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#">Line</a>
<a href="#">Pie</a>
<a href="#">Bar</a>
<a href="#">Map</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Setting <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#link1">User Info</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Help <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#">Info</a>
<a href="#">Client</a>
</div>
</div>
</div>
<div id="dvCSV">
</div>
<script>
$(document).ready(function () {
var browserSupportFileUpload = function () {
var isCompatible = false;
if (window.File && window.FileReader && window.FileList && window.Blob) {
isCompatible = true;
}
return isCompatible;
};
if (browserSupportFileUpload()) {
document.getElementById('csvfile').addEventListener('change', uploadFile, false);
} else {
$("#message").html('The File APIs is not fully supported in thie browser. please use another browser.');
}
$(function () {
$("#loadCSV").click(function(e){
//$("#loadCSV").on('click', function (e) {
e.preventDefault();
$("#csvfile:hidden").trigger('click');
});
});
var uploadFile = function (event) {
var file = event.target.files[0];
var fileformat;
if (file.name.indexOf("csv") != -1) {
fileformat = true;
}
else {
fileformat = false;
}
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (event) {
if ((file.size / Math.pow(1024, 3)) > navigator.deviceMemory) {
document.getElementById("message").innerHTML = "The data requires more memory than the client can offer";
}
else if (!fileformat) {
document.getElementById("message").innerHTML = "The data is in wrong format. Only CSV file can be loaded!";
}
else {
createArray($.csv.toArrays(event.target.result));
}
};
};
function createArray(data) {
if (data !== null && data !== "" && data.length > 1) {
this.CSVdata = data;
document.getElementById("message").innerHTML = " File upload successful with" + ((CSVdata.length) - 1) + " records! lower threshold is:" + highlight('OutlierL') + " upper threshold is: " + highlight('OutlierU');
var wage = findAvg('Avg');
var pop = findAvg('Pop');
if (getCookie("p1UserName") != "") {
var uname = getCookie("p1UserName");
$.ajax({
url: "",
type: 'POST',
async: false,
data: {
uname: uname
},
success: function (response) {
var dd = JSON.parse(response);
console.log(dd);
wage = parseFloat(dd[0][0]);
pop = parseFloat(dd[0][1]);
}
});
}
}
}
}
);
</script>
</body>
</html>
5.2 For logout, the logout popup will display tell successfully logout, here the final code need to add the javascript code to display it and here the final code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
#upload {
display: block;
visibility: hidden;
width: 0;
height: 0;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">File <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<input id="csvfile" type="file" style="display:none" />
<a href="#" id="loadCSV">Load CSV file</a>
<a href="#" onclick="document.getElementById('navLoginDB').style.display='block'" style="width:auto;">Login to DB</a>
<div id="navLoginDB" class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('navLoginDB').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="name" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pass" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('navLoginDB').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('navLoginDB');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<a href="#" onclick="document.getElementById('navLogoutDB').style.display='block'" style="width:auto;">Logout DB</a>
<div id="navLogoutDB" class="modal">
<div class="modal-content animate">
<div class="imgcontainer">
<span onclick="document.getElementById('navLogoutDB').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="container">
Successfully logout thanks you visiting the page
</div>
<div class="container" style="background-color:#f1f1f1">
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('navLogoutDB');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<a href="#">Exit</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">View <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#">Line</a>
<a href="#">Pie</a>
<a href="#">Bar</a>
<a href="#">Map</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Setting <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#link1">User Info</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Help <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#">Info</a>
<a href="#">Client</a>
</div>
</div>
</div>
<div id="dvCSV">
</div>
<script>
$(document).ready(function () {
var browserSupportFileUpload = function () {
var isCompatible = false;
if (window.File && window.FileReader && window.FileList && window.Blob) {
isCompatible = true;
}
return isCompatible;
};
if (browserSupportFileUpload()) {
document.getElementById('csvfile').addEventListener('change', uploadFile, false);
} else {
$("#message").html('The File APIs is not fully supported in thie browser. please use another browser.');
}
$(function () {
$("#loadCSV").click(function(e){
//$("#loadCSV").on('click', function (e) {
e.preventDefault();
$("#csvfile:hidden").trigger('click');
});
});
var uploadFile = function (event) {
var file = event.target.files[0];
var fileformat;
if (file.name.indexOf("csv") != -1) {
fileformat = true;
}
else {
fileformat = false;
}
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (event) {
if ((file.size / Math.pow(1024, 3)) > navigator.deviceMemory) {
document.getElementById("message").innerHTML = "The data requires more memory than the client can offer";
}
else if (!fileformat) {
document.getElementById("message").innerHTML = "The data is in wrong format. Only CSV file can be loaded!";
}
else {
createArray($.csv.toArrays(event.target.result));
}
};
};
function createArray(data) {
if (data !== null && data !== "" && data.length > 1) {
this.CSVdata = data;
document.getElementById("message").innerHTML = " File upload successful with" + ((CSVdata.length) - 1) + " records! lower threshold is:" + highlight('OutlierL') + " upper threshold is: " + highlight('OutlierU');
var wage = findAvg('Avg');
var pop = findAvg('Pop');
if (getCookie("p1UserName") != "") {
var uname = getCookie("p1UserName");
$.ajax({
url: "",
type: 'POST',
async: false,
data: {
uname: uname
},
success: function (response) {
var dd = JSON.parse(response);
console.log(dd);
wage = parseFloat(dd[0][0]);
pop = parseFloat(dd[0][1]);
}
});
}
}
}
}
);
</script>
</body>
</html>
the above the page final page in which both login and logout operation involved.