Web App Topic on USER ROLES

Question

I'm currently working on a web-App using Glass-Fish and Servlet although I am a bit confused on the logic concept on how to handle the different HTML content for each user Role such as Admin, Instructor and Client. Lets consider that we have those roles in our systems and all are able to login and using a username and a password that would be checked if exists in the database, so they will be able to access the web-Application.

---

To give u an idea see the example below that I'm currently working on. The JavaScript here could control the whole content of the HTML, but I have done this by using a string for now until i find how to get the current role of the current logged-in person:

/* Variables Declaration */
var currentTypeLoggedIn = "ALL";

displayHomePageElements(currentTypeLoggedIn);


function displayHomePageElements(currentTypeLoggedIn){

    document.getElementById("menuBar_HOME").style.display = 'block';
    document.getElementById("menuBar_HISTORY").style.display = 'block';
    document.getElementById("menuBar_LOGOUT").style.display = 'block';
        
    if(currentTypeLoggedIn === "Student"){
        /* Display Elements in Menu Bar */
        document.getElementById("menuBar_STUDENT").style.display = 'block';

        /* Display Main Elements in the middle of the Screen */
        document.getElementById("menuInstructor").style.display = 'none';
        document.getElementById("menuAdministrator").style.display = 'none';

    }
    else if(currentTypeLoggedIn === "Instructor"){
        /* Display Elements in Menu Bar */
        document.getElementById("menuBar_INSTRUCTOR").style.display = 'block';

        /* Display Main Elements in the middle of the Screen */
        document.getElementById("menuStudent").style.display = 'none';
        document.getElementById("menuAdministrator").style.display = 'none';
    }
    else if(currentTypeLoggedIn === "Administrator"){
        /* Display Elements in Menu Bar */
       document.getElementById("menuBar_ADMINISTRATOR").style.display = 'block';
    
        /* Display Main Elements in the middle of the Screen */
        document.getElementById("menuStudent").style.display = 'none';
        document.getElementById("menuInstructor").style.display = 'none';
    }
    else if(currentTypeLoggedIn === "ALL" || currentTypeLoggedIn === ""){
        
        /* Display Elements in Menu Bar */
        document.getElementById("menuBar_INSTRUCTOR").style.display = 'block';
        document.getElementById("menuBar_STUDENT").style.display = 'block';
        document.getElementById("menuBar_ADMINISTRATOR").style.display = 'block';
        
        /* Display Main Elements in the middle of the Screen */
        //Display All - Dont take action.
    }
}

body {
    overflow: scroll; /* Add Scroll Bar at the right */
    background: #339958; 
    background: -webkit-linear-gradient(right, #339958 , #7FCC9B);
    background: -moz-linear-gradient(right, #339958, #7FCC9B);
    background: -o-linear-gradient(right, #339958, #7FCC9B);
    background: linear-gradient(to left, #7FCC9B, #339958);
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;        
}
.menuBar{

    margin-bottom: 150px;
}

#listHolder{ /* Group of Lists */
    
    /* Keep elements in line */
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    
    /* Style */
    background-color: #111;   
    border-radius: 5px;

    border-style: solid;
    border-width: 3px;
    
}
.link{ /* Menu List (Every Link) */
    float: left;
    padding: 14px 16px;
    text-decoration: none; /* Remove Underline from links */
    text-align: center;
    color: #FFFFFF;
    font-size: 25px;
    font-weight: bold;
}

.link:hover{ /* Menu List (Every Element on hover) */
    cursor:pointer;
    background-color: #b3b3b3;
}

#logoutButton{
    float: right;
}

/* Menu List (All Elements) Hide all elements, show only from javascript */
#menuBar_HOME, #menuBar_INSTRUCTOR, #menuBar_STUDENT, 
#menuBar_HISTORY, #menuBar_ADMINISTRATOR, #menuBar_LOGOUT{
   display: none;
}
#menuBar_LOGOUT:hover{
    background-color: red;
}

/* Elements in the body (4 possible options (Words Manager, Take a Test, View History, Add Members) ) */
/* Change the size of the images according to the screen size */
@media (min-width: 768px) {
  .mainContainer {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .mainContainer {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .mainContainer {
    width: 1170px;
  }
}

.mainContainer {
    width: 50%;
    margin: auto;
    display: grid;
    grid-column-gap: 150px;
    grid-row-gap: 100px;
    padding: 10px;
}
.rows{
    display: flex;
}
.column {
    margin: auto;
    float: left;
    text-align: center;
    font-size: 35px;
    font-weight: bold;
    padding:1px;
    border:1px solid #021a40;
    background-color: #cce5d5;
    width: 290px;
    height: 270px;
}
.column a label{
    color: #111;
}
.container_image{
    width: 100%;
    height: 100%;
    
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Home Page</title> <!-- Head Title -->
        <link rel="icon" href="images/homePage.png"/> <!-- Login Favicon -->
        <!-- Reference Cascade Style Sheet-->
        <link rel="stylesheet" type="text/css" href="css/menu_and_background.css"/>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="addMenuContent.js"></script>
    </head>
    <body>
        
        <!-- Menu Bar -->
        <div class="menuBar"> 
            <ul id="listHolder">
                <li><a id="menuBar_HOME" class="link" href="/OualikoLeksiko/homePage.xhtml">Home</a></li>
                <li><a id="menuBar_INSTRUCTOR" class="link" href="WordsManagerServlet">Words Manager</a></li>
                <li><a id="menuBar_STUDENT" class="link" href="TakeTestServlet">Take a Test</a></li>
                <li><a id="menuBar_HISTORY" class="link" href="HistoryServlet">View History</a></li>
                <li><a id="menuBar_ADMINISTRATOR" class="link" href="AddUserServlet">Add Users</a></li>
                <!-- Logout Button -->
                <li id="logoutButton"><a id="menuBar_LOGOUT" class="link" href="LoginServlet">Logout</a></li>
            </ul>
        </div>
        
        
        
        <div class="mainContainer">
            <div class="rows">
                <div id="menuInstructor" class="column">
                    <a id="link" href="/OualikoLeksiko/WordsManagerServlet">
                        <img class="container_image" src="images/words_manager.png" />
                        <br/>
                        <label>Words Manager</label>
                    </a>
                </div>
                <div id="menuStudent" class="column">
                    <a id="link" href="/OualikoLeksiko/TakeTestServlet">
                        <img class="container_image" src="images/take_test.png"/>
                        <br/>
                        <label>Take a Test</label>
                    </a>
                </div>
                <div class="column">
                    <a id="link" href="/OualikoLeksiko/HistoryServlet">
                        <img class="container_image" src="images/history.png"/>
                        <br/>
                        <label>View History</label>
                    </a>
                </div>
                <div id="menuAdministrator" class="column">
                    <a id="link" href="/OualikoLeksiko/AddUserServlet">
                        <img class="container_image" src="images/add_member.png"/>
                        <br/>
                        <label>Add Users</label>
                    </a>
                </div>
            </div>
        </div> <!-- End of main Container -->
        
        <!-- Reference JavaScript to display the appropriate elements in the Menu Bar -->
        <script src="js/displayHomePageElements.js"></script>
    </body>
</html>

---

I'm sure that there is a different way of doing this. if somebody knows a similar example or a relevant reference I would be grateful to hear from anyone who may be able to help. Thanks

Answer 1

fair enough question.

There are a couple ways to go about doing this and it really depends on the type of project. You don't mention anything about the database so i'll start from there. If you have only username and password as your fields in the user table in your database then you can't really differentiate between the account type unless you stored another field. So you'll need something like an account type field.

From here you can start to see how this will play out. Once you have another field in your user table which you can use to differentiate between the different account types then you can create restrictions for limiting content. Looking at your javascript example, i can see you are just hiding the content that's relevant to the certain type of user. I would strongly advise against this approach because anyone could just inspect the page they are viewing and modify the html/css so that they can see the potentially sensitive information.

A good way to go about doing this would be to serve completely different html files/content depending on the user account type. Below i will create a quick example using JSP/JSTL to filter the content depending on the user account type.

Let's say we have a database with id,username,password,account_type

When the user submits the form on your login page, a servlet will check to see if the details they entered matches the details in the database.

Login servlet

@WebServlet("/Login")
public class Login extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public Login() {
        super();
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //form on login page has method="post" action="Login"
        HttpSession session = (request.getSession());
        String username = request.getParameter("username");    
        String userpass = request.getParameter("userpass");  

        UserModel um = new UserModel(); 
        if(um.validate(username, userpass)){  //checks database to see if details exist/match, returns true if they do.

            String accountType = um.getAccountType(username); //gets account type of current user

            session.setAttribute("username", username);
            session.setAttribute("accountType", accountType); //set account type session variable (which we can access in our jsp)

            RequestDispatcher rd = request.getRequestDispatcher("welcome.jsp"); //go to welcome page
            rd.forward(request, response);

        }else{

            //error logic
            RequestDispatcher rd = request.getRequestDispatcher("error.jsp");
            rd.forward(request, response);
        }
    }
}

welcome jsp page

<!DOCTYPE HTML>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<html>
<head><title>welcome</title></head>
<body>

//eq is short for equal in jstl
<c:if test="${accountType eq 'admin'}">
<p>Admin content...</p>
</c:if>


<c:if test="${accountType eq 'instructor'}">
<p>Instructor content...</p>
</c:if>

<c:if test="${accountType eq 'client'}">
<p>Client content...</p>
</c:if>

</body>
</html>

The server runs the jsp with the jstl before sending to the browser, so you can not inspect and see the content of a user who doesn't have the right account type...

Hope that gives you an idea of what is possible. Let me know if you have questions