Snippet menu using jQuery and PHP

Question

I have been trying to manage users using jQuery & PHP instead using just PHP because I think it is more comfortable to use jQuery & PHP but using just PHP is easier at my personal point though more organized.

Since I'm not an expert using jQuery I would like to know if the way I'm managing my users is optimal or should I return to full PHP?

Let's take an example of how I work with jQuery+PHP.

I have 3 kind of users:

• Guests
• Users
• Admins

I will start with my Login.php which code I will skip because I think is irrelevant. Login.php will start my sessions.

Session_handler.php

This helps me to focus which type of users is logged at the moment:

session_start();
if(isset($_SESSION['Usuario']))
{
    if( $_SESSION['estado'] == 'User'){
    $send = array('ID' => $_SESSION['ID'], 'user' => $_SESSION['Usuario'], 'estado' => 'usuario' ); 
    echo json_encode($send); 
    }
    if( $_SESSION['estado'] == 'Admin'){
    $send = array('ID' => $_SESSION['ID'], 'user' => $_SESSION['Usuario'], 'estado' => 'admin' ); 
    echo json_encode($send); 
    }

}
else{
    $send = array('estado' => 'invitado' ); 
    echo json_encode($send);
}

Sessions.js

Now I will manage my users menu depending on which type of user is logged in:

$(document).ready(function(){
    $.ajax({
        url:'js/Session_handler.php', 
        success:function(data) { 
            var result = $.parseJSON(data);
            var i = 0;
            var carrito = '<li><a href="Carrito.html"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a></li>';
            var admin = '<li><a href="Cuenta_admin.html">[Admin] '+result.user+'</a></li>';
            var cuenta = '<li><a href="Cuenta_us.html">'+result.user+'</a></li>';
            var navegacion = '<li><a href="Navegacion/Entrar.html">Entrar</a></li>';
            var registrase = '<li><a href="Navegacion/Registrarse.html">Registrarse</a></li>';
            var salir = '<li><a href="Navegacion/Php/logout.php">Salir</a></li>';
            if(result.estado == 'invitado'){
                $('#snipuser').append(navegacion,registrase);  
            }
            if(result.estado == 'usuario'){
                $('#snipuser').append(carrito,cuenta,salir);
            }
            if(result.estado == 'admin'){
                $('#snipuser').append(carrito,admin,salir);
            }
        }
    });
});

Then I just need to call my id to show the menu depending on which user is logged in:

Index.html

<div id="snipuser"></div>

OK, now I will ask again in case my doubt was not clear.

Is it more effective to work this way (JQuery+PHP) than working with full PHP? What does it mean to work with full PHP? I will show an example.

Login.php that will start my sessions.

Now instead working with Index.html I will be bound change my file extension to Index.php and work my menus like this:

<?php
  session_start(); 
   if(isset($_SESSION['Usuario']) and $_SESSION['estado'] == 'Autenticado')                     { ?>
    <a href="Navegacion/Cuenta.php"> <?php echo $_SESSION['Usuario'];?> </a>
    <a href="Navegacion/Carrito.php"><img src="Images/Carrito.png" alt=""  width="20" height="20" ></a>
    <a href="Navegacion/Php/Logout.php">Salir</a>
 <?php }    
    else {    ?>
        <a href="Navegacion/Entrar.php">Entrar</a>
        <a href="Navegacion/Registrarse.php">Registrarse</a>
<?php   }    ?>

jQuery+PHP or full PHP?

Answer 1

Reasons not to substitute Javascript for PHP

If you use Javascript (including jQuery), then your site won't work if Javascript is disabled.

To use Javascript, you have to give unauthenticated users the same information as authenticated users and even admins. Someone can save the HTML and edit it to show the full information. This doesn't matter much with a menu, but with data...

Formatting

<?php
  session_start(); 
   if(isset($_SESSION['Usuario']) and $_SESSION['estado'] == 'Autenticado')                     { ?>
    <a href="Navegacion/Cuenta.php"> <?php echo $_SESSION['Usuario'];?> </a>
    <a href="Navegacion/Carrito.php"><img src="Images/Carrito.png" alt=""  width="20" height="20" ></a>
    <a href="Navegacion/Php/Logout.php">Salir</a>
 <?php }    
    else {    ?>
        <a href="Navegacion/Entrar.php">Entrar</a>
        <a href="Navegacion/Registrarse.php">Registrarse</a>
<?php   }    ?>

I find your use of beginning and ending tags confusing. Consider

<?php
  session_start(); 
  if (isset($_SESSION['Usuario']) && $_SESSION['estado'] == 'Autenticado') {
?>
    <a href="Navegacion/Cuenta.php"> <?php echo $_SESSION['Usuario']; ?> </a>
    <a href="Navegacion/Carrito.php"><img src="Images/Carrito.png" alt=""  width="20" height="20" ></a>
    <a href="Navegacion/Php/Logout.php">Salir</a>
<?php
  }    
  else {
?>
        <a href="Navegacion/Entrar.php">Entrar</a>
        <a href="Navegacion/Registrarse.php">Registrarse</a>
<?php
  }
?>

By always putting tags at the left margin, it is easier to see where code blocks begin and end. Only the embedded output has the tags inline as well. This will look more familiar to most people who might edit your code later.

Answer 2

Is it more effective to work this way (JQuery+PHP) than working with full PHP? What does it mean to work with full PHP? I will show an example.

Well, in mdfst13's answer, there is mention of the user viewing the Javascript. A non-admin could still see that cuenta is a link to Cuenta_us.html and access that page even if the link doesn't appear on the page - thus it would be wise to have server-side validation on such pages.

Other feedback

The following code is a bit repetitive:

if( $_SESSION['estado'] == 'User'){
$send = array('ID' => $_SESSION['ID'], 'user' => $_SESSION['Usuario'], 'estado' => 'usuario' ); 
echo json_encode($send); 
}
if( $_SESSION['estado'] == 'Admin'){
$send = array('ID' => $_SESSION['ID'], 'user' => $_SESSION['Usuario'], 'estado' => 'admin' ); 
echo json_encode($send); 
}

One could reduce the redundancy a bit (and adhere to the Don't Repeat Yourself principle). The only real difference in the two arrays is the value at key estado. That change can be pulled out into a conditional block. That way if more data needs to change (e.g. add more data to the sent array), it only needs to be added in one spot instead of multiple.

$send = array('ID' => $_SESSION['ID'], 'user' => $_SESSION['Usuario'], 'estado' => 'usuario' ); 
if( $_SESSION['estado'] == 'Admin'){
    $send['estado'] => 'admin' ; 
}
echo json_encode($send);