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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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.


Related 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
ADVERTISEMENT