API tools faq
paste
Advertisement
er_ull

tampilan crud nya

er_ull
May 25th, 2016
77
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.83 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2. include('ses.php');
  3. ?>
  4. <HTML>
  5. <HEAD>
  6. <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  7. <meta content="utf-8" http-equiv="encoding">
  8. <title>Formulir Pendaftaran HERBALIFE</title>
  9. <!-- JQUERY -->
  10. <script type="text/javascript" language="javascript" src="assets/media/js/jquery.js"></script>
  11.  
  12. <!-- BOOTSTRAP -->
  13. <!-- Latest compiled and minified CSS -->
  14. <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
  15.  
  16. <!-- Optional theme
  17. <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-theme.min.css">
  18. <!-- Latest compiled and minified JavaScript -->
  19. <script src="assets/bootstrap/js/bootstrap.min.js"></script>
  20.  
  21. <!-- DataTables -->
  22. <link rel="stylesheet" type="text/css" href="assets/media/css/dataTables.bootstrap.css">
  23. <!--<link rel="stylesheet" type="text/css" href="assets/media/css/dataTables.responsive.css">-->
  24. <script type="text/javascript" language="javascript" src="assets/media/js/jquery.dataTables.js"></script>
  25. <!--<script type="text/javascript" language="javascript" src="assets/media/js/dataTables.responsive.js"></script>-->
  26. <script type="text/javascript" language="javascript" src="assets/media/js/dataTables.bootstrap.js"></script>
  27. <script type="text/javascript" language="javascript" src="assets/media/js/common.js"></script>
  28. <style>
  29. body
  30. {
  31. background: #fff;
  32. }
  33. </style>
  34. <script type="text/javascript" language="javascript" >
  35.  
  36. var dTable;
  37. // #Example adalah id pada table
  38. $(document).ready(function() {
  39. dTable = $('#example').DataTable( {
  40. "pageLength": 50,
  41. "bProcessing": true,
  42. "bServerSide": true,
  43. "bJQueryUI": false,
  44. "responsive": true,
  45. "sAjaxSource": "serverSide.php", // Load Data
  46. "sServerMethod": "POST",
  47. "columnDefs": [
  48. { "orderable": false, "targets": 0, "searchable": false },
  49. { "orderable": true, "targets": 1, "searchable": true },
  50. { "orderable": true, "targets": 2, "searchable": true },
  51. { "orderable": true, "targets": 3, "searchable": true },
  52. { "orderable": true, "targets": 4, "searchable": true }
  53. ]
  54. }
  55. );
  56.  
  57.  
  58. $('#example').removeClass( 'display' ).addClass('table table-hover table-bordered stripe row-border order-column');
  59.  
  60.  
  61. } );
  62. </script>
  63. </HEAD>
  64. <BODY>
  65.  
  66. <div class="container-fluid">
  67.  
  68. <div class="row">
  69.  
  70. <div class="col-md-12">
  71. <div class="navbar navbar-default navbar-fixed-top ">
  72. <div class="container-fluid">
  73. <div class="navbar-header">
  74. <a href="./" class="navbar-brand">FORM ADMIN</a>
  75.  
  76. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
  77. <span class="sr-only">Toggle navigation</span>
  78. <span class="icon-bar"></span>
  79. <span class="icon-bar"></span>
  80. <span class="icon-bar"></span>
  81. </button>
  82. </div>
  83. <div class="collapse navbar-collapse">
  84. <ul class="nav navbar-nav navbar-right">
  85.  
  86. <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" href="#">Hy , Mas&nbsp&nbsp<span class="glyphicon glyphicon-user"></span></a>
  87. <ul class="dropdown-menu">
  88. <li><a href="#">Menu Ini Coming Soon</a></li>
  89. <li role="separator" class="divider"></li>
  90. <li><a href="exs.php">KELUAR</a></li>
  91. </ul>
  92. </li>
  93. </ul>
  94. </div>
  95. </div>
  96. </div>
  97. <br>
  98. <br>
  99. <br>
  100. <center><img src="assets/media/logo.png" width="250px"/></center>
  101.  
  102. <button onClick="showModals()" class="btn btn-primary">UPDATE DATA</button>
  103. <br/>
  104. <hr>
  105. <table id="example" cellpadding="0" cellspacing="0" border="1" class="display" width="100%">
  106. <thead>
  107. <tr>
  108. <th bgcolor="green">Action</th>
  109. <th bgcolor="green">FQS</th>
  110. <th bgcolor="green">FQSNAME</th>
  111. <th bgcolor="green">SPOUSE</th>
  112. <th bgcolor="green">FQSTEAM</th>
  113. <th bgcolor="green">CITY</th>
  114. <th bgcolor="green">BINDER</th>
  115. <th bgcolor="green">VIP</th>
  116. <th bgcolor="green">CREDENTIAL</th>
  117. <th bgcolor="orange">NAMA</th>
  118. <th bgcolor="orange">SPOUSE</th>
  119. <th bgcolor="orange">ATTEND</th>
  120. <th bgcolor="orange">TRANSFORT</th>
  121. <th bgcolor="orange">ABSEN</th>
  122. <th bgcolor="orange">NO.HP</th>
  123. <th bgcolor="orange">SMSDATE</th>
  124. <th bgcolor="orange">REMARKS</th>
  125. <th bgcolor="orange">ROOMTYPE</th>
  126. <th bgcolor="orange">HOTEL</th>
  127. <th bgcolor="orange">CHECKIN</th>
  128. <th bgcolor="orange">CHECKOUT</th>
  129. </tr>
  130. </thead>
  131. <tbody bgcolor="white">
  132. </tbody>
  133. </table>
  134. </div>
  135. </div>
  136. </div>
  137.  
  138. <!-- Modal Popup -->
  139. <div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  140. <div class="modal-dialog modal-lg">
  141. <div class="modal-content">
  142. <div class="modal-header">
  143. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  144. <h4 class="modal-title" id="myModalLabel">Add User</h4>
  145. </div>
  146. <div class="modal-body">
  147.  
  148. <div class="alert alert-danger" role="alert" id="removeWarning">
  149. <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  150. <span class="sr-only">Error:</span>
  151. Anda yakin ingin menghapus user ini
  152. </div>
  153. <br>
  154. <form class="form-horizontal" id="formUser">
  155.  
  156. <input type="hidden" class="form-control" id="id" name="id">
  157. <!--<input type="hidden" class="form-control" id="fqs" name="fqs">-->
  158. <input type="hidden" class="form-control" id="type" name="type">
  159.  
  160. <div class="form-group">
  161. <div class="col-xs-4">
  162. <label for="fqs" class=" control-label">FQS</label>
  163. <input type="text" class=" form-control" id="fqs" name="fqs" />
  164. <label for="fqs_name" class=" control-label">Nama User</label>
  165. <input type="text" class=" form-control" id="fqs_name" name="fqs_name" />
  166. <label for="spouse" class=" control-label">SPOUSE</label>
  167. <input type="text" class=" form-control" id="spouse" name="spouse" />
  168. <label for="fqs_team" class=" control-label">FQS TEAM</label>
  169. <input type="text" class=" form-control" id="fqs_team" name="fqs_team" />
  170. <label for="cit1" class=" control-label">CITY</label>
  171. <input type="text" class=" form-control" id="cit1" name="cit1" />
  172. <label for="binder" class=" control-label">BINDER</label>
  173. <select name="binder" class="form-control" id="binder"><option value="TRUE">TRUE</option><option value="FALSE">FALSE</option></select>
  174. <label for="v1p" class=" control-label">VIP</label>
  175. <select name="v1p" class="form-control" id="v1p"><option value="TRUE">TRUE</option><option value="FALSE">FALSE</option></select>
  176. </div>
  177. <div class="col-xs-4">
  178. <label for="c3r3d" class=" control-label">CREDENTIAL</label>
  179. <select name="c3r3d" class="form-control" id="c3r3d"><option value="TRUE">TRUE</option><option value="FALSE">FALSE</option></select>
  180. <label for="p4s4n9" class=" control-label">SPOUSE</label>
  181. <input type="text" class="form-control" id="p4s4n9" name="p4s4n9" >
  182. <label for="jlh_h4dir" class=" control-label">ATTEND</label>
  183. <input type="text" class="form-control" id="jlh_h4dir" name="jlh_h4dir" >
  184. <label for="tr4n" class=" control-label">TRANSFORT</label>
  185. <select name="tr4n" class="form-control" id="tr4n"><option value="TRANSFORT">IYA</option><option value="0">TIDAK</option></select>
  186. <label for="k_h4dr" class=" control-label">ABSEN</label>
  187. <input type="text" class="form-control" id="k_h4dr" name="k_h4dr" >
  188. <label for="nop3" class=" control-label">No. HP</label>
  189. <input type="text" class="form-control" id="nop3" name="nop3" >
  190. </div>
  191. <div class="col-xs-4">
  192. <label for="tsms" class=" control-label">SMS DATE</label>
  193. <input type="date" class="form-control" id="tsms" name="tsms" >
  194. <label for="r3m4r" class=" control-label">REMARKS</label>
  195. <input type="text" class="form-control" id="r3m4k" name="r3m4k" >
  196. <label for="t1p3" class=" control-label">ROOM TYPE</label>
  197. <input type="text" class="form-control" id="t1p3" name="t1p3" >
  198. <label for="hotl" class=" control-label">HOTEL</label>
  199. <input type="text" class="form-control" id="hotl" name="hotl" >
  200. <label for="ck_in" class=" control-label">CHEK IN</label>
  201. <input type="date" class="form-control" id="ck_in" name="ck_in" >
  202. <label for="ck_ot" class=" control-label">CHEK OUT</label>
  203. <input type="date" class="form-control" id="ck_ot" name="ck_ot" >
  204. </br></br></br>
  205. <button type="button" onClick="submitUser()" class="btn btn-info" data-dismiss="modal">Submit</button>
  206. <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
  207. </div>
  208. </div>
  209. </form>
  210.  
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215.  
  216. <script>
  217.  
  218. //Tampilkan Modal
  219. function showModals( id )
  220. {
  221. waitingDialog.show();
  222. clearModals();
  223.  
  224. // Untuk Eksekusi Data Yang Ingin di Edit atau Di Hapus
  225. if( id )
  226. {
  227. $.ajax({
  228. type: "POST",
  229. url: "crud.php",
  230. dataType: 'json',
  231. data: {id:id,type:"get"},
  232. success: function(res) {
  233. waitingDialog.hide();
  234. setModalData( res );
  235. }
  236. });
  237. }
  238. // Untuk Tambahkan Data
  239. else
  240. {
  241. $("#myModals").modal("show");
  242. $("#myModalLabel").html("New User");
  243. $("#type").val("new");
  244. waitingDialog.hide();
  245. }
  246. }
  247.  
  248. //Data Yang Ingin Di Tampilkan Pada Modal Ketika Di Edit
  249. function setModalData( data )
  250. {
  251. $("#myModalLabel").html(data.fqs_name);
  252. $("#id").val(data.id);
  253. $("#type").val("edit");
  254. $("#fqs").val(data.fqs);
  255. $("#fqs_name").val(data.fqs_name);
  256. $("#spouse").val(data.spouse);
  257. $("#fqs_team").val(data.fqs_team);
  258. $("#cit1").val(data.cit1);
  259. $("#binder").val(data.binder);
  260. $("#v1p").val(data.v1p);
  261. $("#c3r3d").val(data.c3r3d);
  262. $("#p4s4n9").val(data.p4s4n9);
  263. $("#jlh_h4dir").val(data.jlh_h4dir);
  264. $("#tr4n").val(data.tr4n);
  265. $("#k_h4dr").val(data.k_h4dr);
  266. $("#nop3").val(data.nop3);
  267. $("#tsms").val(data.tsms);
  268. $("#r3m4k").val(data.r3m4k);
  269. $("#t1p3").val(data.t1p3);
  270. $("#hotl").val(data.hotl);
  271. $("#ck_in").val(data.ck_in);
  272. $("#ck_ot").val(data.ck_ot);
  273. $("#myModals").modal("show");
  274. }
  275.  
  276. //Submit Untuk Eksekusi Tambah/Edit/Hapus Data
  277. function submitUser()
  278. {
  279. var formData = $("#formUser").serialize();
  280. waitingDialog.show();
  281. $.ajax({
  282. type: "POST",
  283. url: "crud.php",
  284. dataType: 'json',
  285. data: formData,
  286. success: function(data) {
  287. dTable.ajax.reload(); // Untuk Reload Tables secara otomatis
  288. waitingDialog.hide();
  289. }
  290. });
  291. }
  292.  
  293. //Hapus Data
  294. function deleteUser( id )
  295. {
  296. clearModals();
  297. $.ajax({
  298. type: "POST",
  299. url: "crud.php",
  300. dataType: 'json',
  301. data: {id:id,type:"get"},
  302. success: function(data) {
  303. $("#removeWarning").show();
  304. $("#myModalLabel").html("Delete User");
  305. $("#id").val(data.id);
  306. $("#fqs").val(data.fqs);
  307. $("#type").val("delete");
  308. $("#fqs_name").val(data.fqs_name).attr("disabled","true");
  309. $("#spouse").val(data.spouse).attr("disabled","true");
  310. $("#fqs_team").val(data.fqs_team).attr("disabled","true");
  311. $("#cit1").val(data.cit1).attr("disabled","true");
  312. $("#binder").val(data.binder).attr("disabled","true");
  313. $("#v1p").val(data.v1p).attr("disabled","true");
  314. $("#c3r3d").val(data.c3r3d).attr("disabled","true");
  315. $("#p4s4n9").val(data.p4s4n9).attr("disabled","true");
  316. $("#jlh_h4dir").val(data.jlh_h4dir).attr("disabled","true");
  317. $("#tr4n").val(data.tr4n).attr("disabled","true");
  318. $("#k_h4dr").val(data.k_h4dr).attr("disabled","true");
  319. $("#nop3").val(data.nop3).attr("disabled","true");
  320. $("#tsms").val(data.tsms).attr("disabled","true");
  321. $("#r3m4k").val(data.r3m4k).attr("disabled","true");
  322. $("#t1p3").val(data.t1p3).attr("disabled","true");
  323. $("#hotl").val(data.hotl).attr("disabled","true");
  324. $("#ck_in").val(data.ck_in).attr("disabled","true");
  325. $("#ck_ot").val(data.ck_ot).attr("disabled","true");
  326. $("#myModals").modal("show");
  327. waitingDialog.hide();
  328. }
  329. });
  330. }
  331.  
  332. //Clear Modal atau menutup modal supaya tidak terjadi duplikat modal
  333. function clearModals()
  334. {
  335. $("#removeWarning").hide();
  336. $("#id").val("").removeAttr( "disabled" );
  337. $("#fqs").val("").removeAttr( "disabled" );
  338. $("#fqs_name").val("").removeAttr( "disabled" );
  339. $("#spouse").val("").removeAttr( "disabled" );
  340. $("#type").val("");
  341. $("#fqs_team").val("").removeAttr( "disabled" );
  342. $("#cit1").val("").removeAttr( "disabled" );
  343. $("#binder").val("").removeAttr( "disabled" );
  344. $("#v1p").val("").removeAttr( "disabled" );
  345. $("#c3r3d").val("").removeAttr( "disabled" );
  346. $("#p4s4n9").val("").removeAttr( "disabled" );
  347. $("#jlh_h4dir").val("").removeAttr( "disabled" );
  348. $("#tr4n").val("").removeAttr( "disabled" );
  349. $("#k_h4dr").val("").removeAttr( "disabled" );
  350. $("#nop3").val("").removeAttr( "disabled" );
  351. $("#tsms").val("").removeAttr( "disabled" );
  352. $("#r3m4k").val("").removeAttr( "disabled" );
  353. $("#t1p3").val("").removeAttr( "disabled" );
  354. $("#hotl").val("").removeAttr( "disabled" );
  355. $("#ck_in").val("").removeAttr( "disabled" );
  356. $("#ck_ot").val("").removeAttr( "disabled" );
  357. }
  358.  
  359. </script>
  360.  
  361. </BODY>
  362. </HTML>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!