Question
In: Computer Science
PHP, JAVASCRIPT, MYSQL below is what I have. Can fill in the details for the database...
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;
}
Solutions
Expert Solution
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.
venereology answered 1 month agoRelated Solutions
Using PHP and MYSQL and with a simple customer database, how can I create a simple...
Using PHP and MYSQL and with a simple customer database, how can
I create a simple log in and registration system for an ecommerce
site
the mysql lyrics database is provided below 1.)What is a primary key used for? Can you...
the mysql lyrics database is provided below
1.)What is a primary key used for? Can you give me an example of
a primary key in the Lyrics database?
2.)What is the purpose of doing a join between two tables. Ex.
Why would I ever want to join the Tracks and Titles tables
together?
3.)Why is isolation important in database design?
DROP TABLES IF EXISTS Artists,Genre, Members, Titles,
Tracks,SalesPeople,Studios,XrefArtistsMembers;
DROP TABLES IF EXISTS
Authors,Publishers,Titles,Title_Authors,Royalties;
DROP TABLES IF EXISTS
Products,Customers,Orders,Order_details;
DROP TABLES...
Write a log-in log-out session using PHP, CSS, and HTML only. NO MYSQL and JavaScript allowed....
Write a log-in log-out session using PHP, CSS, and HTML
only. NO MYSQL and JavaScript allowed.
1. Need an HTML form and a login form; separate file.
2. need a CSS file to make it look good
3. Must store visitors' info in a .txt file and validate from
there if the user exists before granting access to the dashboard.
If the user does not exist, render the form to signup. If the user
exists take them to their dashboard....
-JavaScript task, just need the layout, I will fill out the citations and details and aparagraphs. Create...
-JavaScript task, just need the layout, I will fill
out the citations and details and aparagraphs.
Create a webpage that is a based on your
research on
The Pros and Cons of Internet Voting.
Research the Pros and Cons of Internet
Voting and create an informative webpage. Be sure to
include:
Use at least three references
One of the references must be Joshua Conway, an internet voting
expert from UJSC.
Your sources are to be cited in a list of references...
I already have a database in phpMyAdmin and need to create an html/php "SEARCH" page to...
I already have a database in phpMyAdmin and need to create an
html/php "SEARCH" page to retrieve the information from the
database on to my localhost. Please post a php/html code that will
create a search page and return the data from my phpmyadmin
database. The 3 items I have on the database are first_name,
last_name and birth_day.
(PHP and MySQL) How do you determine what size (in terms of subtype or length) a...
(PHP and MySQL)
How do you determine what size (in terms of subtype or length) a
column should be?
What are some of the other properties that can be assigned to
columns?
What is a primary key?
if you`re using the command-line myaql client to connect to
MySQL,What username and password combination is required?
using the lyrics database schema in mysql provided below. 1.)List the artist name of the artists...
using the lyrics database schema in mysql provided below.
1.)List the artist name of the artists who do not have a
webaddress and their leadsource is “Directmail”?
2.)List the names of members in the artist called 'Today'.
3.)Report the total runtime in minutes FOR EACH album in the
Titles table.
4.)List the firstname, lastname of members who are represented
by the salesperson “Lisa Williams”
5.)List EACH salesperson’s firstname along with the number of
Members that EACH SalesPerson represents.
below is...
I. Fill in Blank / Matching Fill in the blanks with the appropriate terms below. (2...
I. Fill in Blank / Matching Fill in
the blanks with the appropriate terms below. (2 pts. each =
20 pts.)
activity
chemical
resonance
polychromatic
empirical
electrons
evaporation
emission
filtration
filtrate
gas
hydrogen
VESPR
limiting
liquid
mass
mass percent
mole
molecular
oxide
absorption
oxygen
physical
precipitate
precipitation
monochromatic
Lewis
Dot
supernatant
periods
groups
Many metals react readily with oxygen to form binary
____________ compounds.
...
Can I get a summary of this article in details and what is your position and...
Can I get a summary of this article in details and what is your
position and opinion on the topic of the Nicaragua channel?
Nicaragua's dream of building an interoceanic canal fades in the
face of uncertainty over the 50 billion dollars needed to finance
it and China's decision to open relations with its rival in Panama,
according to analysts. The project "has been totally de-funded
because it did not meet the reliability requirements it needed" for
its execution, the...
i have a skeleton class and i have to fill some methods of this class. i...
i have a skeleton class and i have to fill some methods of this
class. i am having difficulties especially with the findAppointment
method. so this is the problem.
Implement a superclass Appointment and subclasses OneTime,
Daily, and Monthly. An Appointment has a description (for example
“see the dentist”) and a date. Write a method occursOn(int year,
int month, int day) that checks whether the appointment occurs on
that date. For example, for a monthly appointment, you must check
whether...
ADVERTISEMENT
ADVERTISEMENT
Latest Questions
- 1) What are a few (name at least three) important values in Japanese culture? 2) What...
- S&P 500 Index is at 2780. A European June 21, 2019 SPX call option struck at...
- ou are required to post a minimum of one 200-word post in discussing this issue. 1-What...
- You are planning on retiring the moment that you accumulate $1,000,000 in your mutual fund. Currently,...
- Why must a power cycle release heat at some point
- Gaseous ammonia can be injected into the exhaust stream of a coal-burning power plant to reduce...
- You will find that we consume monopolies in our daily lives from our electricity to internet...
ADVERTISEMENT