Change navigation menu when user is logged in HTML

Question

I have a site in HTML, where I implemented login and register system using PHP.

When there is no user logged in, the navigation item "Contul meu" from every page need to send me to "gotosigning.html" page. However, when the user is logged in I want that the menu item "Contul meu" from every page to send me to "account.html" page.

Some menu items for example, in the index.html page:

<li class="active"><a href="index.html">Acasă</a></li>
<li><a href="login.html">login</a></li>
<li><a href="signin.html">sign in</a></li>
<li><a href="gotosigning.html">Contul meu</a></li>

the gotosigning.html page redirects to a page where you can select if you want to sign in or login, and based on the selection here you go to login.html or signin.html.

This is the basic example,when the user is not logged in, but when it is, the last item should become <li><a href="account.html">Contul meu</a></li> in all the pages.

login.php , which is implemented in the login.html and signup.html pages

  <?php

 $link = new mysqli("localhost", "root", "", "graphicdesign");
if($link->connect_error){
   die("ERROR: Nu s-a putut realiza conexiunea la baza de date " .$link->connect_error);
}

session_start();

$email =$_POST['email'];
$password=$_POST['pass'];

$result = $link->query("SELECT email_cl, parola_cl FROM clienti WHERE email_cl= '".$email."' AND parola_cl= '".$password."'");

if($result->num_rows == 0 ) { 
    echo "Datele nu corespund!";
}
else { 
        $_SESSION['logged in']=true;
        $_SESSION['email']=$email;

        echo "Login cu succes!";
        echo "<script>setTimeout(\"location.href = '../account.html';\",1500);</script>";
}

?>

How can I make the server know all the time which the user is logged in?

And how can I tell the HTML pages when to update their navigation based on that state of logged in or not?

The only thing I thought about was to duplicate all the pages ( but they are too many ) and then implement some code to test if the user is logged in to the server can choose the choice with the right menu... but doesn't seem okay at all...

Thank you!

Answer 1

First, you need to rename all your pages from .html to .php . There is absolutely no difference between the two extension except for this: if the page ends in .php , then the PHP processor knows to interpret any PHP code found between <?php and ?> tags. If the page ends in .html then the PHP will not be processed. HTML will continue to work exactly the same. Try it now - create a test page with some HTML in it and name it with the .php extension. You will see it works exactly like one ending in .html

In order to change the navigation items after the user has logged in, you can refer to the $_SESSION variables that you set when they logged in. Note: do not use spaces in session variable names - underscore chars (eg logged_in ) are fine, though.

Example:

<?php
    if ($_SESSION['logged_in'] == true){
        $out = '<li><a href="file_if_logged_in.php">Contul meu</a></li>';
    }else{
        $out = '<li><a href="file_if_NOT_logged_in.php">Contul meu</a></li>';
    }
    echo $out;
?>

And, most important - make sure that you put session_start(); at the top of every PHP file.

As a side note, I personally like to have a <?php ?> section at the top of my PHP files that contains as much of my PHP code as possible. For example, I would place the above code right up at the top of the file -- before any HTML -- before <!DOCTYPE html> . Then, I have all my HTML code and -- where it belongs -- I echo out the PHP variable, like this:

<li class="active"><a href="index.html">Acasă</a></li>
<li><a href="login.html">login</a></li>
<?php echo $out ?>
<li><a href="signin.html">sign in</a></li>

(I intentionally placed your Contul meu menu item for DEMO purposes, so that you can see stuff above it and also below it. In your example, it was the last menu item which would not be as clear for demo purposes.)

Answer 2

you can display your menu based on condition. Put a check using session on the top of every login/logout and signin page like that:-

Note: you make your start session on top of every file.

<?php 
 session_start();
if(isset($_SESSION['email']) && !empty($_SESSION['email'])){
?>
      <a href="logout.php">Logout</a>
<?php
 }else{
?>
    <li class="active"><a href="index.html">Acasă</a></li>
    <li><a href="login.html">login</a></li>
    <li><a href="signin.html">sign in</a></li>
    <li><a href="account.html">Contul meu</a></li>
<?php } ?>