I'm working on database design for my new application that has people with two different roles in the system. Those two groups are User and Staff. The main difference is that Users have activeUser
,username
,password
,security-question
and answer
and Staff has activeStaff
and position
. Both of these also share next fields that are required for users and staff like FirstName
, LastName
, Middle
and Email
. Originally I thought that this will be very simple and I will add the flag accountType
with option User
or Staff
. Here is example of my interface:
$('#frm_type').on('change',displayForm);
function displayForm() {
var fldType = $(this).find(':selected').data('type');
if(fldType === 'isUser') {
$('.isUser').show();
$('.isStaff').hide();
}
if(fldType === 'isStaff') {
$('.isStaff').show();
$('.isUser').hide();
}
if(!fldType) {
$('.isUser').hide();
$('.isStaff').hide();
}
}
#main-container {
padding-top: 20px;
}
.isUser {
display: none;
}
.isStaff {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="main-container" class="container">
<form name="frmSaveuser" id="frmSaveuser" class="frm-agencySubmit" data-frm="SaveUser" autocomplete="off">
<div class="form-group required">
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group">
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="1">
</div>
<div class="form-group required">
<input type="email" class="form-control" name="frm_email" id="frm_email" placeholder="Enter email" maxlength="80" required>
</div>
<div class="form-group required">
<select class="form-control" name="frm_type" id="frm_type" required>
<option value="">-- Select Account Type --</option>
<option value="1" data-type="isUser">User</option>
<option value="2" data-type="isStaff">Staff</option>
</select>
</div>
<div class="isUser">
<div class="form-group required">
<select class="form-control" name="frm_activeuser" id="frm_activeuser" required>
<option value="">-- Active User --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group required">
<select class="form-control" name="frm_systemadmin" id="frm_systemadmin" required>
<option value="">-- System Admin --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group required">
<input type="text" class="form-control" name="frm_username" id="frm_username" placeholder="Enter UserName" maxlength="50" required>
</div>
<div class="form-group password-container">
<input type="password" class="form-control" name="frm_password" id="frm_password" placeholder="Enter Password" maxlength="50" required>
</div>
<div class="form-group">
<select class="form-control" name="frm_questionid" id="frm_questionid">
<option value="">-- Select the question --</option>
<option value="1">What was the name of your first pet?</option>
<option value="2">In what city were you born?</option>
<option value="3">What is your mother's maiden name?</option>
<option value="4">What is your favorite vacation spot?</option>
<option value="5">What is your favorite musical group?</option>
<option value="6">Where did you meet your spouse?</option>
<option value="7">What model was your first car?</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" name="frm_answer" id="frm_answer" placeholder="Enter Answer" maxlength="100">
</div>
</div>
<div class="isStaff">
<div class="form-group required">
<select class="form-control" name="frm_activestaff" id="frm_activestaff" required>
<option value="">-- Active Staff --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group required">
<input type="text" class="form-control" name="frm_position" id="frm_position" placeholder="Choose Position" required>
</div>
</div>
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Problem with the concept above is next: let's say We create account user but that account has to be staff as well or other way around staff that has to be user as well. In that case I would need third option for Account Type that would be Both
(User & Staff). This would make querying data more difficult because we would have to include always at least two options. I'm wondering if there is better way to handle this? Also we have to consider switching between accounts for example someone with User account will become Staff or Staff become User. This has to be available and I'm looking for efficient and long term solution. So far I have only one table in my database that stores information for Users and Staff.