Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show the username in the top when the user is login

Tags:

javascript

php

I know this question look really simple for u guys but i cant find a tutorial or topic about this. I been trying and searching for days but no luck. What i want to do is when the user login, their name will be display at the top in the menu bar in every page. Please, Please, Please any help or suggestion will be appreciated.

This is the image when there is no login user

And this when a user is login. the login/register button should be hide then display the email and logout button

Here is the code i made. I try javascript and session but i cant do it properly.

<?php

error_reporting(E_ALL & ~E_NOTICE);
session_start();

if($_POST['LogIn'])
{
	$servername = "localhost";
	$username = "root";
	$password = "";
	$dbname = "dbuseraccounts";

	// Create connection
	$conn = new mysqli($servername, $username, $password, $dbname);
	
	$email = strip_tags($_POST['Email']);
	$password = strip_tags($_POST['Password']);
	
	$sql = "SELECT UserID, Email, Password FROM users WHERE Email = '$email'";
	
	$query = mysqli_query($conn, $sql);	
	
	if($query)
	{
		$row = mysqli_fetch_row($query);
		$userid = $row[0];
		$dbEmail = $row[1];
		$dbPassword = $row[2];
	}
	
	if($email == $dbEmail && $password == $dbPassword)
	{
		
		$_SESSION['Email'] = $email;
		$_SESSION['id'] = $userid;
		
	}
	else
	{
		
		$message = "Incorect username or password";
		echo "<script type='text/javascript'>alert('$message');</script>";
	}
}
?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
	margin-left: 0px;
	margin-right: 0px;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
	<div class="container-fluid">
	<div class="header">
	<nav class="navbar navbar-default navbar-fixed-top">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" id="Register" aria-expanded="false" data-toggle="collapse" data-target="#topFixedNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    <a class="navbar-brand" href="index.html">Neo</a></div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="topFixedNavbar1">
      <ul class="nav navbar-nav">
        <li class="active"></li>
        <li></li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group"> </div>
</form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="Home.php">Home</a></li>
        <li><a href="Services.html">Services</a></li>
        <li><a href="Promo.html">Promo</a></li>
        <li><a href="Promo.html">About Us</a></li>
        <li><a href="ContactUs.html">Contact Us</a></li>
        <li><a href="login.php"><?php echo $_SESSION["Email"]?></a></li>
        <li><a id="logout">Logout</li>
        <li class="dropdown">
<ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
</div>
<div class="content">
<h1 id="h1Contactus">Login</h1>
<form id="RegisterForm" name="RegisterForm" method="post">
  <div class="FormElement"><input name="Email" type="email" autofocus required="required" class="TField" id="Email" placeholder="Email Address"></div>
  <div class="FormElement"><input name="Password" type="password" required="required" class="TField" id="Password" placeholder="Password"></div>
  <div class="FormElement">
    <input name="LogIn" type="submit" class="button" id="LogIn" value="Log In">
  </div>
</form>
</div>
<div class="footerStick">
    <footer>© 2015 Neo</footer>
</div>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
like image 265
Red Avatar asked Oct 29 '22 21:10

Red


1 Answers

This is NOT secure, this is just a tutorial.

Essentially this is fairly easy if you got the right idea!

How to achieve...

  • First when the user successfully logs in create a $_SESSION[] var. $_SESSION[] vars are used on almost every website that runs on PHP, you can start a plain session by adding the code below to the top of your page.

    session_start();
    
  • Second when your code says the user login is successful create a session var as the code is shown below.

    $_SESSION['loggedIn'] = true;
    
  • Third you need to create some sort of code that checks to see if the user is logged in, an example code is shown below.

    if (isset($_SESSION['loggedIn'])) {
        // code to execute if the user is logged in
    } else {
        // code to execute if the user is not logged in
    }
    
  • And last of all when you log out you need to destroy the session and delete all $_SESSION[] vars by using the code below.

    $_SESSION = array();
    session_destroy();
    

Execute HTML Code based on the if statement:

<?php
if (isset($_SESSION['loggedIn'])) {
?> 
<p>Logged In!</p>
<?php
} else {
?>
<p>Logged Out!</p>
<?php
}
?>

If you want to display the username, you need to create a $_SESSION[] var called username and use the echo the $_SESSION[] var.

// To Echo
<?= $_SESSION['username']; ?>

// To Create
<?php $_SESSION['username'] = 'someusername'; ?>

Here are a couple resources that might help you security wise, i just looked at your code and it's simple but not really secured.

http://php.net/manual/en/session.security.php

http://php.net/manual/en/mysqli.quickstart.prepared-statements.php

like image 85
Affix Programmer Avatar answered Nov 12 '22 17:11

Affix Programmer