Continuing my article Tutorial Build Point Of Sale System With PHP, PDO, MySQL And Jquery. If previously I have discussed how to create a login form and dynamic menu adminLTE. In section 3 will create a master user page, which is used to add, edit and delete user data. To start this section, you should read the previous tutorials part 1 and part 2:
- Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 1.
- Dynamic Menu AdminLTE And Dashboard Page – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 2.
Table of Contents
Okay, let’s start the tutorial to create a master user form with PHP and adminLTE Template
I’ve discussed how to create a user permission to set the user’s access menu in the article https://seegatesite.com/how-to-create-user-permissions-view-to-dynamic-sidebar-menu-adminlte/. I will discuss it again by creating a user form menu so we can better understand it.
Add 3 new files in the “utility” folder (post/application/utility): c_mstuser.php, j_mstuser.js, v_mstuser.php. Fill in the following script on each file
v_mstuser.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | <?php $titlepage="Master User"; $idsmenu=3; include "../../library/config.php"; require_ once("../model/dbconn.php"); require_ once("../model/pos.php"); include "../layout/top-header.php"; include "../../library /check_login.php"; include "../../library /check_access.php"; include "../layout/header.php"; ?> <section class="content"> <div class="box box-success"> <div class="box-header with-border"> <h3 class="box-title">Master User</h3> </div><!--./ box header--> <div class="box-body"> <button type="submit" class="btn btn-primary " id="btnadd" name="btnadd"><i class="fa fa-plus"></i> Add User</button> <br> <div class="box-body table-responsive no-padding"> <table id="table_user" class="table table-bordered table-hover "> <thead> <tr class="tableheader"> <th style="width:30px">#</th> <th style="width:100px">Username</th> <th style="width:200px">Level</th> <th style="width:150px"></th> </tr> </thead> <tbody></tbody> </table> </div> </div> </div><!-- /.box --> </section><!-- /.content --> <div id="modalmasteruser" class="modal fade "> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Master user Form</h4> </div> <!--modal header--> <div class="modal-body"> <div class="form-horizontal"> <div class="box-body"> <div class="form-group"> <label class="col-sm-2 control-label">Username</label> <div class="col-sm-6"> <input type="text" class="form-control text-uppercase" id="txtusername" name="" value="" placeholder=""> <input type="hidden" id="txtiduser" name="inputcrud" class="" value="0"> <input type="hidden" id="inputcrud" name="inputcrud" class="" value="N"> <input type="hidden" id="hmenu" name="" class="" value=""> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Password</label> <div class="col-sm-6"> <input type="password" class="form-control " id="txtpass" name="" value="" placeholder=""> </div> </div> </div> </div> <!--form menuk--> <?php $pos = new pos(); $mymenu = $pos->getMenu(); $num=1; $menuku=''; foreach ($mymenu[1] as $key) { if($num==1) { $menuku .= '<div class="row" >'; $menuku .= '<div class="col-xs-6" style="padding-left:0px"><h4>'.$key['name_menu'].'</h4>'; $submenuk = $pos->getSubMenu($key['id_menu']); $menuku .= '<ul class="list-group">'; foreach ($submenuk[1] as $keys) { $menuku .= '<li class="list-group-item"> <input type="checkbox" id="check-'.$keys["id_sub_menu"].'" class="chkbox" value="'.$keys['id_sub_menu'].'" > <strong>'.$keys['name_sub_menu'].'</strong> </li>'; } $menuku .= '</ul>'; $menuku .= '</div>'; }else{ $menuku .= '<div class="col-xs-6" style="padding-left:0px"><h4>'.$key['name_menu'].'</h4>'; $submenuk = $pos->getSubMenu($key['id_menu']); $menuku .= '<ul class="list-group">'; foreach ($submenuk[1] as $keys) { $menuku .= '<li class="list-group-item"><input type="checkbox" id="check-'.$keys["id_sub_menu"].'" class="chkbox" value="'.$keys['id_sub_menu'].'" > <strong>'.$keys['name_sub_menu'].'</strong></li>'; } $menuku .= '</ul>'; $menuku .= '</div>'; $menuku .= '</div>'; $num=0; } $num++; } ?> <div class="form-horizontal menuk" > <div class="box-body"> <div class="form-group"> <label class="col-sm-2 control-label">Menu Access</label> <div class="col-xs-10"> <div> <input type="checkbox" id="check-all" class="txtcheckbox2"> <b>Selected All</b> </div> <?php echo $menuku; ?> </div> </div> </div> </div> <div class="form-horizontal"> <div class="box-body"> <div class="form-group"> <label class="col-sm-2 control-label"></label> <div class="col-sm-6"> <button type="submit" class="btn btn-primary " id="btnsaveuser" name="btnsaveuser"><i class="fa fa-save"></i> Save</button> </div> </div> </div> </div> <!--end form menuk--> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> <!--modal footer--> </div> <!--modal-content--> </div> <!--modal-dialog modal-lg--> </div> <!--form-kantor-modal--> </div> <!-- modal dialog untuk password --> <div id="passwordmodal" class="modal fade "> <div class="modal-dialog modal-md"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Reset Password</h4> </div><!--modal header--> <div class="modal-body"><div class="form-horizontal"><div class="box-body"><div class="form-group"> <label class="col-sm-3 control-label">Reset Password</label> <div class="col-sm-9"><input type="password" class="form-control " id="txtresetpass" name="txtresetpass" value="" placeholder=""><input type="hidden" id="txthiduser" name="" class="" value=""> </div> </div><div class="form-group"> <label class="col-sm-3 control-label"><button type="submit" class="btn btn-primary " id="btnresetpassword" name="btnresetpassword"><i class="fa fa-key"></i> Reset Password</button> <span id="infopassword"></span></label> <div class="col-sm-9"> </div> </div></div></div></div><div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div><!--modal footer--> </div><!--modal-content--> </div><!--modal-dialog modal-lg--> </div> <!-- end modal --> <?php include "../layout/footer.php"; //footer template ?> <?php include "../layout/bottom-footer.php"; //footer template ?> <script src="../../plugins/datepicker/bootstrap-datepicker.js"></script> <script src="j_mstuser.js"></script> </body> </html> |
j_mstuser.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 | $(document).ready( function () { var value = { method : "getdata" }; $('#table_user').DataTable({ "paging": false, "lengthChange": false, "searching": false, "ordering": false, "info": false, "responsive": true, "autoWidth": false, "pageLength": 50, "dom": '<"top"f>rtip', "ajax": { "url": "c_mstuser.php", "type": "POST", "data":value, }, "columns": [ { "data": "id_user" }, { "data": "username" }, { "data": "h_menu" }, { "data": "button" }, ] }); }); $(document).on("click","#check-all",function(){ if ($(this).is(':checked')){ $('.chkbox:enabled').prop('checked', true); }else{ $('.chkbox').prop('checked', false); } get_check_value(); }); $(document).on("click",".chkbox",function(){ get_check_value(); }); function get_check_value(){ var values = []; $('.chkbox:checked').each(function() { values.push($(this).val()); }); $('#hmenu').val(values.join(',')); } $(document).on( "click","#btnadd", function() { $("#modalmasteruser").modal('show'); $("#txtiduser").val(0); $("#txtusername").val(""); $("#inputcrud").val("N"); set_focus("#txtusername"); }); $(document).on( "click",".btnedit", function() { var id_user = $(this).attr("id_user"); var username = $(this).attr("username"); var h_menu = $(this).attr("h_menu"); $("#inputcrud").val("E"); $("#txtiduser").val(id_user); $("#txtusername").val(username); $("#txtpass").val("***********"); $("#hmenu").val(h_menu); $('.chkbox').prop('checked', false); var res = h_menu.split(","); for (i = 0; i < res.length; i++) { $("#check-"+res[i]).prop('checked', true); } $("#modalmasteruser").modal('show'); set_focus("#txtusername"); }); $(document).on( "click","#btnsaveuser", function() { var id_user = $("#txtiduser").val(); var username=$("#txtusername").val(); var pass_user=$("#txtpass").val(); var hmenu=$("#hmenu").val(); var crud=$("#inputcrud").val() if(username == '' || username== null ){ $.notify({ message: "Please fill out username!" },{ type: 'warning', delay: 10000, }); $("#txtusername").focus(); return; } if(username.toUpperCase()== 'ADMIN' ){ $.notify({ message: "Please Do Not use 'ADMIN' as username" },{ type: 'warning', delay: 10000, }); $("#txtusername").focus(); return; } if(pass_user == '' || pass_user == null ){ $.notify({ message: "Please fill out password" },{ type: 'warning', delay: 10000, }); $("#txtpass").focus(); return; } var value = { id_user: id_user, username: username, pass_user:pass_user, h_menu : hmenu, crud:crud, method : "save_user" }; $("#btnsaveuser").prop('disabled', true); proccess_waiting("#infoproses"); $.ajax( { url : "c_mstuser.php", type: "POST", data : value, success: function(data, textStatus, jqXHR) { $("#btnsaveuser").prop('disabled', false); $("#infoproses").html(""); var data = jQuery.parseJSON(data); if(data.crud == 'N'){ if(data.result == true){ $.notify("Save new user successfully"); var table = $('#table_user').DataTable(); table.ajax.reload( null, false ); $("#txtiduser").val(""); $("#txtusername").val(""); $("#pass_user").val(""); set_focus("#txtusername"); }else{ $.notify({ message: "Error save new user , Error : "+data.error },{ type: 'danger', delay: 10000, }); set_focus("#txtusername"); } }else if(data.crud == 'E'){ if(data.result == true){ $.notify("Update user successfully"); var table = $('#table_user').DataTable(); table.ajax.reload( null, false ); $("#modalmasteruser").modal("hide"); }else{ $.notify({ message: "Error save new user , Error : "+data.error },{ type: 'danger', delay: 10000, }); set_focus("#txtiduser"); } }else{ $.notify({ message: "Invalid Order!" },{ type: 'danger', delay: 10000, }); } }, error: function(jqXHR, textStatus, errorThrown) { $("#btnsaveuser").prop('disabled', false); } }); }); $(document).on("click",".btnpass",function(){ var id_user = $(this).attr("id_user"); $("#txthiduser").val(id_user); $("#passwordmodal").modal("show"); set_focus("#txtresetpass"); }) $(document).on("click","#btnresetpassword",function(){ var id_user = $("#txthiduser").val(); var new_pass = $("#txtresetpass").val(); swal({ title: "Reset Password", text: "Reset Password?", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Reset", closeOnConfirm: true }, function(){ var value = { id_user: id_user, new_pass : new_pass, crud:'D', method : "reset_password" }; $.ajax( { url : "c_mstuser.php", type: "POST", data : value, success: function(data, textStatus, jqXHR) { var data = jQuery.parseJSON(data); if(data.result == true){ $.notify("Reset password successfully"); $("#passwordmodal").modal("hide"); }else{ $.notify({ message: "Error reset password , Error : "+data.error },{ type: 'danger', delay: 10000, }); } }, error: function(jqXHR, textStatus, errorThrown) { $.notify({ message: "Error : "+textStatus },{ type: 'danger', delay: 10000, }); } }); }); }) $(document).on( "click",".btndelete", function() { var id_user = $(this).attr("id_user"); swal({ title: "Delete ", text: "Delete user with id : "+id_user+" ?", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Delete", closeOnConfirm: true }, function(){ var value = { id_user: id_user, crud:'D', method : "delete_user" }; $.ajax( { url : "c_mstuser.php", type: "POST", data : value, success: function(data, textStatus, jqXHR) { var data = jQuery.parseJSON(data); if(data.result == true){ $.notify("Delete user successfully"); var table = $('#table_user').DataTable(); table.ajax.reload( null, false ); }else{ $.notify({ message: "Error delete user , Error : "+data.error },{ type: 'danger', delay: 10000, }); } }, error: function(jqXHR, textStatus, errorThrown) { $.notify({ message: "Error : "+textStatus },{ type: 'danger', delay: 10000, }); } }); }); }); |
c_mstuser.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <?php session_start(); require_ once ("../model/dbconn.php"); require_ once ("../model/pos.php"); $method=$_POST['method']; if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' ) ) { $pos = new pos(); if($method == 'delete_user'){ $id_user=strtoupper($_POST['id_user']); $pos = new pos(); $array = $pos->deleteUser($id_user); $data['result'] = $array[0]; $data['error'] = $array[1]; echo json_encode($data); } if($method == 'getdata'){ $pos = new pos(); $array = $pos->getListUser(); $data = $array[1]; $i=0; foreach ($data as $key) { $data[$i]['button'] = ' <button type="submit" id_user="'.$key['id_user'].'" class="btn btn-warning btnpass btn-sm" id="btnpass'.$key['id_user'].'" ><i class="fa fa-key"></i> </button> <button type="submit" id_user="'.$key['id_user'].'" username="'.$key['username'].'" h_menu="'.$key['h_menu'].'" class="btn btn-primary btnedit btn-sm " id="btnedit'.$key['id_user'].'" ><i class="fa fa-edit"></i> </button> <button type="submit" id_user="'.$key['id_user'].'" class="btn btn-danger btndelete btn-sm " id="btndelete'.$key['id_user'].'" ><i class="fa fa-remove"></i> </button'; $i++; } $datax = array('data' => $data); echo json_encode($datax); } if($method == 'reset_password') { $id_user= $_POST['id_user']; $newpass = $_POST['new_pass']; $pos = new pos(); $array = $pos->resetPass($id_user,$newpass); $result['result'] = $array[0]; $result['error'] = $array[1]; echo json_encode($result); } if($method == 'save_user'){ $id_user=$_POST['id_user']; $username=strtoupper($_POST['username']); $pass_user=strtoupper($_POST['pass_user']); $h_menu=strtoupper($_POST['h_menu']); $pos = new pos(); if($_POST['crud'] == 'N'){ $array = $pos->saveUser($username,$pass_user,$h_menu); }else{ $array = $pos->updateUser($id_user,$username,$h_menu); } $result['result'] = $array[0]; $result['error'] = $array[1]; $result['crud'] = $_POST['crud']; echo json_encode($result); } } else { exit('No direct access allowed.'); } |
Add the following MySQL query list in the pos.php file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | /*********************query for master user*********************/ public function getListUser() { $db = $this->dblocal; try { $stmt = $db->prepare("select * from m_user where username<>'admin' order by username desc"); $stmt->execute(); $stat[0] = true; $stat[1] = $stmt->fetchAll(PDO::FETCH_ASSOC); return $stat; } catch(PDOException $ex) { $stat[0] = false; $stat[1] = $ex->getMessage(); return $stat; } } public function saveUser($username,$pass_user,$h_menu) { $db = $this->dblocal; try { $stmt = $db->prepare("insert into m_user(username,pass_user,h_menu) values(:name,MD5(:pass),:hmenu)"); $stmt->bindParam("name",$username); $stmt->bindParam("pass",$pass_user); $stmt->bindParam("hmenu",$h_menu); $stmt->execute(); $stat[0] = true; $stat[1] = "Sukses save!"; return $stat; } catch(PDOException $ex) { $stat[0] = false; $stat[1] = $ex->getMessage(); return $stat; } } public function updateUser($id_user,$username,$h_menu) { $db = $this->dblocal; try { $stmt = $db->prepare("update m_user set username = :name, h_menu = :hmenu where id_user = :id"); $stmt->bindParam("name",$username); $stmt->bindParam("id",$id_user); $stmt->bindParam("hmenu",$h_menu); $stmt->execute(); $stat[0] = true; $stat[1] = "Sukses update!"; return $stat; } catch(PDOException $ex) { $stat[0] = false; $stat[1] = $ex->getMessage(); return $stat; } } public function deleteUser($id_user) { $db = $this->dblocal; try { $stmt = $db->prepare("delete from m_user where id_user = :id"); $stmt->bindParam("id",$id_user); $stmt->execute(); $stat[0] = true; $stat[1] = "Sukses update!"; return $stat; } catch(PDOException $ex) { $stat[0] = false; $stat[1] = $ex->getMessage(); return $stat; } } public function checkPassword($id,$pass) { $db = $this->dblocal; try { $stmt = $db->prepare("select * from m_user where id_user = :id and pass_user = md5(:pass)"); $stmt->bindParam("id",$id); $stmt->bindParam("pass",$pass); $stmt->execute(); $stat[0] = true; $stat[1] = $stmt->rowCount(); return $stat; } catch(PDOException $ex) { $stat[0] = false; $stat[1] = $ex->getMessage(); return $stat; } } public function resetPass($iduser,$pass) { $db = $this->dblocal; try { $stmt = $db->prepare("update m_user set pass_user = md5(:pass) where id_user=:id"); $stmt->bindParam("id",$iduser); $stmt->bindParam("pass",$pass); $stmt->execute(); $stat[0] = true; $stat[1] = "Sukses reset pass!"; return $stat; } catch(PDOException $ex) { $stat[0] = false; $stat[1] = $ex->getMessage(); return $stat; } } |
Please save all of these files and try it on your browser.
http://localhost/pos/application/utility/v_mstuser.php ,
If successful the display will be as shown below
Little Explanation:
Our focus on this tutorial is how do we add user access to menu. To display a list of menus contained in the database using the following script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <?php $pos = new pos(); $mymenu = $pos->getMenu(); $num=1; $menuku=''; foreach ($mymenu[1] as $key) { if($num==1) { $menuku .= '<div class="row" >'; $menuku .= '<div class="col-xs-6" style="padding-left:0px"><h4>'.$key['name_menu'].'</h4>'; $submenuk = $pos->getSubMenu($key['id_menu']); $menuku .= '<ul class="list-group">'; foreach ($submenuk[1] as $keys) { $menuku .= '<li class="list-group-item"> <input type="checkbox" id="check-'.$keys["id_sub_menu"].'" class="chkbox" value="'.$keys['id_sub_menu'].'" > <strong>'.$keys['name_sub_menu'].'</strong> </li>'; } $menuku .= '</ul>'; $menuku .= '</div>'; }else{ $menuku .= '<div class="col-xs-6" style="padding-left:0px"><h4>'.$key['name_menu'].'</h4>'; $submenuk = $pos->getSubMenu($key['id_menu']); $menuku .= '<ul class="list-group">'; foreach ($submenuk[1] as $keys) { $menuku .= '<li class="list-group-item"><input type="checkbox" id="check-'.$keys["id_sub_menu"].'" class="chkbox" value="'.$keys['id_sub_menu'].'" > <strong>'.$keys['name_sub_menu'].'</strong></li>'; } $menuku .= '</ul>'; $menuku .= '</div>'; $menuku .= '</div>'; $num=0; } $num++; } ?> |
From the code above we can show the layout like image below:
You can add some parameters you need to the user module. Up here how to create the master user page module on point of sale PHP has been completed, my next article will discuss how to create a page to add new items/product.
Once again this is a tutorial for beginners, if you are already expert please provide feedback for this article, for those who still do not understand please ask through the comment form below
Leave a Reply