I made a Navigation Bar which contain a Login , so I want to change it with a div (contain image and user's name), when the user log in !
NavBar :
<div class="collapse navbar-collapse" id="axit-nav">
<ul class="nav navbar-nav navbar-right">
<li><a> <button id="myButton">Create event</button></a></li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li><a class="dsctv hidden-xs hidden-sm">events</a></li>
<li><a class="dsctv hidden-xs hidden-sm">Login</a></li>
<li><img alt="Logo brand Wevento" class="navbar-brand hidden-xs hidden-sm" src="theme/img/logos/Logo%20White%20Blue.png" </li>
</ul>
</div>
PHPcode :
<?php
session_start();
if (isset($_SESSION['Mail'])) {
header('Location: admin/index.php');
}
include 'admin/init.php';
// Check for ADMINS
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$mail= $_POST['mail'];
$password= $_POST['password'];
$hashedPass= sha1($password);
// check if the user exist in DB
$stmt = $conn->prepare("SELECT Mail, Password FROM admin WHERE Mail= ? AND Password = ? ");
$stmt->execute(array($mail, $hashedPass));
$count = $stmt->rowCount();
if($count > 0) {
$_SESSION['Mail'] = $mail;
}
}
?>
You need to write a check to confirm if the session exists. If yes, show the user name, if not, show the login link. Something like this:
<div class="collapse navbar-collapse" id="axit-nav">
<ul class="nav navbar-nav navbar-right">
<li><a> <button id="myButton">Create event</button></a></li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li><a class="dsctv hidden-xs hidden-sm">events</a></li>
<?php if (!isset($_SESSION)) { ?>
<li><a class="dsctv hidden-xs hidden-sm">Login</a></li>
<?php } else { ?>
<li><a class="dsctv hidden-xs hidden-sm"><?php echo $_SESSION['user_name'];?></a></li>
<?php } ?>
<li><img alt="Logo brand Wevento" class="navbar-brand hidden-xs hidden-sm" src="theme/img/logos/Logo%20White%20Blue.png" </li>
</ul>
</div>
Of course echo out the user name based on how you stored it in the session.
If you are using jQuery, I think you can edit with .css() method.
Something like
$('your-element').click(function () {
$(this).css('background', '#000');
};
jQuery .css() method documentation : http://api.jquery.com/css/