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 7 months 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...
PHP The database should have at least two tables with, at minimum, the following fields: Table...
PHP
The database should have at least two tables with, at minimum,
the following fields:
Table customers: Fields:
Table billing: Fields:
customer_ID
customer_ID
customer_L_Name
customer_L_Name
customer_F_Name
service
customer_Title (Mr, Ms, Dr. etc,)
customer_bill
street_Address
amt_paid
city_State_Zip
bill_date
customer_Phone
date_paid
customer_Email
Create a PHP page that will extract a customer’s bill amount and
the amount paid. Then it will calculate the amount due. If the
amount due is greater than 0, an email should be generated and sent
to the customer...
(mysql)Lab 10 Database Normalization The relation (PatientLab) below provides some sample data for a clinic office...
(mysql)Lab 10 Database Normalization
The relation (PatientLab) below provides some
sample data for a clinic office that stores patient, insurance, lab
test, and lab test result information. The relation is already in
first normal form (1NF). Assuming that one patient can have
multiple different tests performed in one day and same test can be
performed for the same patient in different dates.
Patient _ID
Name
Insurance_Code
Insurance_Name
DOB
Lab_Test_ID
Lab_Test_Name
Lab_Result
Lab_Test_Date
P001
Joe Doe
IN001
B&B
1/1/1990
L001
WBC...
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.
...
ADVERTISEMENT
ADVERTISEMENT
Latest Questions
- Rotating bits in C This rotates bits to the left which means the bits that were...
- Implement a method that meets the following requirements: (a) Takes as parameter 1) an int array...
- Write a function that takes a binary search tree as input and produces a linked list...
- XYZ Company is considering purchasing a piece of equipment costing $400,000. It has a useful life...
- Reflection of the short film "How Wolves Change Rivers" and Aldo Leopold's "Thinking Like A Mountain".
- What kind of rebar would be most cost effective for foundation? Would it be to design...
- Why would UnderArmour want to be sure that consumers can clearly see different models ( about...
ADVERTISEMENT