API tools faq
paste
Advertisement
arbi_fajar

Untitled

arbi_fajar
May 16th, 2017
141
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 17.00 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.  <title>Matrix Admin</title>
  5.  <meta charset="UTF-8" />
  6.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.  <link rel="stylesheet" href="css/bootstrap.min.css" />
  8.  <link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
  9.  <link rel="stylesheet" href="css/fullcalendar.css" />
  10.  <link rel="stylesheet" href="css/matrix-style.css" />
  11.  <link rel="stylesheet" href="css/matrix-media.css" />
  12.  <link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
  13.  <link rel="stylesheet" href="css/jquery.gritter.css" />
  14.  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
  15.  </head>
  16.  <body>
  17.  
  18.  <!--Header-part-->
  19.  <div id="header">
  20.    <h1><a href="/">Matrix Admin</a></h1>
  21.  </div>
  22.  <!--close-Header-part-->
  23.  
  24.  
  25.  <!--top-Header-menu-->
  26.  <div id="user-nav" class="navbar navbar-inverse">
  27.    <ul class="nav">
  28.      <li  class="dropdown" id="profile-messages" ><a title="" href="#" data-toggle="dropdown" data-target="#profile-messages" class="dropdown-toggle"><i class="icon icon-user"></i>  <span class="text">arbi</span><b class="caret"></b></a>
  29.        <ul class="dropdown-menu">
  30.          <li><a href="/profile"><i class="icon-user"></i> My Profile</a></li>
  31.          <li class="divider"></li>
  32.          <li><a href="/logout"><i class="icon-key"></i> Log Out</a></li>
  33.        </ul>
  34.      </li>
  35.      <li class=""><a title="" href="/setting"><i class="icon icon-cog"></i> <span class="text">Settings</span></a></li>
  36.      <li class=""><a title="" href="/logout"><i class="icon icon-share-alt"></i> <span class="text">Logout</span></a></li>
  37.    </ul>
  38.  </div>
  39.  <!--close-top-Header-menu-->
  40.  <!--start-top-serch-->
  41.  <div id="search">
  42.    <input type="text" placeholder="Search here..."/>
  43.    <button type="submit" class="tip-bottom" title="Search"><i class="icon-search icon-white"></i></button>
  44.  </div>
  45.  <!--close-top-serch-->
  46.  <!--sidebar-menu-->
  47.  <div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-home"></i> Dashboard</a>
  48.    <ul>
  49.      <li><a href="/"><i class="icon icon-home"></i> <span>Dashboard</span></a> </li>
  50.      <li class="submenu"> <a href="#"><i class="icon icon-folder-open"></i> <span>Data Inventaris</span></a>
  51.        <ul>
  52.          <li><a href="/inventory"><i class="icon-eye-open"></i> Tampilkan</a></li>
  53.          <li><a href="/inventory-add"><i class="icon-plus"></i> Tambah</a></li>
  54.        </ul>
  55.      </li>
  56.          <li class="submenu"> <a href="#"><i class="icon icon-user"></i> <span>Data Pegawai</span></a>
  57.        <ul>
  58.          <li><a href="/officer"><i class="icon-eye-open"></i> Tampilkan</a></li>
  59.          <li><a href="/officer-add"><i class="icon-plus"></i> Tambah</a></li>
  60.        </ul>
  61.      </li>
  62.  
  63.      <li class="content"> <span>Monthly Bandwidth Transfer</span>
  64.        <div class="progress progress-mini progress-danger active progress-striped">
  65.          <div style="width: 77%;" class="bar"></div>
  66.        </div>
  67.        <span class="percent">77%</span>
  68.        <div class="stat">21419.94 / 14000 MB</div>
  69.      </li>
  70.      <li class="content"> <span>Disk Space Usage</span>
  71.        <div class="progress progress-mini active progress-striped">
  72.          <div style="width: 87%;" class="bar"></div>
  73.        </div>
  74.        <span class="percent">87%</span>
  75.        <div class="stat">604.44 / 4000 MB</div>
  76.      </li>
  77.    </ul>
  78.  </div>
  79.  <!--sidebar-menu-->
  80.  
  81.  <!--main-container-part-->
  82.  <div id="content">
  83.  <!--breadcrumbs-->
  84. <div id="content-header">
  85.   <div id="breadcrumb"> <a href="/" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a> <a href="/officer-add">Tambah Data</a> <a href="/officer" class="current">Pegawai</a> </div>
  86.   <h1>Tambah Pegawai</h1>
  87. </div>
  88. <div class="container-fluid"><hr>
  89.   <div class="row-fluid">
  90.     <div class="span12">
  91.   <div class="widget-box">
  92.     <div class="widget-title"> <span class="icon"> <i class="icon-align-justify"></i> </span>
  93.       <h5>Personal-info</h5>
  94.     </div>
  95.     <div class="widget-content nopadding">
  96.       <form action="/proses/insert-officer.php" method="post" class="form-horizontal cmxform" enctype="multipart/form-data" id="register">
  97.         <fieldset>
  98.         <div class="control-group">
  99.           <label class="control-label">Id Pegawai<sup style="color: red;">*</sup>:</label>
  100.           <div class="controls">
  101.             <input type="text" class="span11" name="id"/>
  102.           </div>
  103.         </div>
  104.         <div class="control-group">
  105.           <label class="control-label">Nama Lengkap :</label>
  106.           <div class="controls">
  107.             <input type="text" class="span11" placeholder="Nama Lengkap . . ." name="nama_pegawai" id="nama_pegawai"/>
  108.           </div>
  109.         </div>
  110.         <div class="control-group">
  111.           <label class="control-label">No Induk Pegawai :</label>
  112.           <div class="controls">
  113.             <input type="text" class="span11" placeholder="No Induk Pegawai . . ." name="nip" id="nip"/>
  114.           </div>
  115.         </div>
  116.         <div class="control-group">
  117.           <label class="control-label">Alamat :</label>
  118.           <div class="controls">
  119.             <textarea class="span11" name="alamat" placeholder="Alamat . . ." id="alamat"></textarea>
  120.           </div>
  121.         </div>
  122.         <div class="control-group">
  123.           <label class="control-label">No HP</label>
  124.           <div class="controls">
  125.             <input type="text"  class="span11" placeholder="No HP . . ."  name="nohp" id="nohp"/>
  126.           </div>
  127.         </div>
  128.         <div class="control-group">
  129.           <label class="control-label">Email :</label>
  130.           <div class="controls">
  131.             <input type="text" class="span11" placeholder="Email . . ." name="email" id="email"/>
  132.           </div>
  133.         </div>
  134.         <div class="control-group">
  135.           <label class="control-label">Username :</label>
  136.           <div class="controls">
  137.             <input type="text" class="span11" placeholder="Username . . ." name="username" id="username"/>
  138.           </div>
  139.         </div>
  140.         <div class="control-group">
  141.           <label class="control-label">Password :</label>
  142.           <div class="controls">
  143.             <input type="password" class="span11" name="password" id="password"/>
  144.           </div>
  145.         </div>
  146.         <div class="control-group">
  147.           <label class="control-label">Ulangi Password :</label>
  148.           <div class="controls">
  149.             <input type="password" class="span11" name="password2" id="password2"/>
  150.           </div>
  151.         </div>
  152.         <div class="control-group">
  153.           <label class="control-label">Tempat Lahir :</label>
  154.           <div class="controls">
  155.             <input type="text" class="span11" placeholder="Tempat lahir . . ." name="tempat" id="tempat"/>
  156.           </div>
  157.         </div>
  158.         <div class="control-group">
  159.           <label class="control-label">Tanggal Lahir :</label>
  160.           <div class="controls">
  161.             <input type="text" class="span11" placeholder="tanggal lahir . . ." name="tanggal" id="tanggal"/>
  162.           </div>
  163.         </div>
  164.         <div class="control-group">
  165.           <label class="control-label">Jenis kelamin:</label>
  166.           <div class="controls">
  167.             <select name="Jenis Kelamin" class="span11" id="jenis">
  168.               <option value="laki-laki">Laki-laki</option>
  169.               <option value="perempuan">Perempuan</option>
  170.               <option value="lainya">Lainya ...</option>
  171.             </select>
  172.           </div>
  173.         </div>
  174.         <div class="control-group">
  175.           <label class="control-label">Foto</label>
  176.           <div class="controls">
  177.             <input type="file" name="gambar" class="span11" id="gambar">
  178.           </div>
  179.         </div>
  180.         <div class="form-actions">
  181.           <input type="submit" class="btn btn-success" name="submit" value="Save">
  182.         </div>
  183.           </fieldset>
  184.       </form>
  185.     </div>
  186.   </div>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191.  </div>
  192.  
  193.  <!--end-main-container-part-->
  194.  
  195.  <!--Footer-part-->
  196.  
  197.  <div class="row-fluid">
  198.    <div id="footer" class="span12"> 2013 &copy; Matrix Admin. Brought to you by <a href="http://themedesigner.in">Themedesigner.in</a> </div>
  199.  </div>
  200.  
  201.  <!--end-Footer-part-->
  202.  <script src="js/excanvas.min.js"></script>
  203.  <script src="js/jquery.min.js"></script>
  204.  <script src="js/jquery.ui.custom.js"></script>
  205.  <script src="js/bootstrap.min.js"></script>
  206.  <script src="js/jquery.flot.min.js"></script>
  207.  <script src="js/jquery.flot.resize.min.js"></script>
  208.  <script src="js/jquery.peity.min.js"></script>
  209.  <script src="js/fullcalendar.min.js"></script>
  210.  <script src="js/matrix.js"></script>
  211.  <script src="js/matrix.dashboard.js"></script>
  212.  <script src="js/jquery.gritter.min.js"></script>
  213.  <script src="js/matrix.interface.js"></script>
  214.  <script src="js/matrix.chat.js"></script>
  215.  <script src="js/jquery.validate.js"></script>
  216.  <script src="js/matrix.form_validation.js"></script>
  217.  <script src="js/jquery.wizard.js"></script>
  218.  <script src="js/jquery.uniform.js"></script>
  219.  <script src="js/select2.min.js"></script>
  220.  <script src="js/matrix.popover.js"></script>
  221.  <script src="js/jquery.dataTables.min.js"></script>
  222.  <script src="js/matrix.tables.js"></script>
  223.  <script src="js/jquery.flot.pie.min.js"></script>
  224.  <script src="js/jquery.uniform.js"></script>
  225. <script src="js/jquery.ui.custom.js"></script>
  226.  <script src="js/matrix.charts.js"></script>
  227.  <script src="js/matrix.tables.js"></script>
  228.  <script src="js/jquery.flot.resize.min.js"></script>
  229.  <script src="js/jquery.peity.min.js"></script>
  230.  <script src="js/jquery.dataTables.min.js"></script>
  231.  <script src="js/jquery.validate.js"></script>
  232.  <script src="js/matrix.form_validation.js"></script>
  233.  <!--Real-time-chart-js-->
  234.  <script type="text/javascript">
  235.  $.validator.setDefaults({
  236.         submitHandler: function() {
  237.             alert("submitted!");
  238.         }
  239.     });
  240.  
  241.     $().ready(function() {
  242.         // validate signup form on keyup and submit
  243.         $("#register").validate({
  244.             rules: {
  245.                 nama_pegawai: {
  246.                     required: true,
  247.                     minlength: 2
  248.                 },
  249.  
  250.                 nip: {
  251.                     required: true,
  252.                     minlength: 2
  253.                 },
  254.  
  255.                 password: {
  256.                     required: true,
  257.                     minlength: 5
  258.                 },
  259.  
  260.                 password2: {
  261.                     required: true,
  262.                     minlength: 5,
  263.                     equalTo: "#password"
  264.                 },
  265.  
  266.                 email: {
  267.                     required: true,
  268.                     email: true
  269.                 },
  270.  
  271.                 tempat: {
  272.                     required: true,
  273.                     minlength: 2
  274.                 },
  275.  
  276.                 tanggal:  {
  277.                     required: true,
  278.                     minlength: 2
  279.                 },
  280.  
  281.                 alamat: {
  282.                     required: true
  283.                 }
  284.  
  285.  
  286.             },
  287.  
  288.             messages: {
  289.  
  290.                 nama_pegawai: "tolong masukan nama anda !!",
  291.  
  292.                 username: {
  293.                     required: "Please enter a username",
  294.                     minlength: "Your username must consist of at least 2 characters"
  295.                 },
  296.  
  297.                 password: {
  298.                     required: "Please provide a password",
  299.                     minlength: "Your password must be at least 5 characters long"
  300.                 },
  301.  
  302.                 confirm_password: {
  303.                     required: "Please provide a password",
  304.                     minlength: "Your password must be at least 5 characters long",
  305.                     equalTo: "Please enter the same password as above"
  306.                 },
  307.  
  308.                 email: "Please enter a valid email address",
  309.                 agree: "Please accept our policy",
  310.                 topic: "Please select at least 2 topics"
  311.             }
  312.         });
  313.     });
  314.  </script>
  315.  <script type="text/javascript">
  316.  $(function () {
  317.      // we use an inline data source in the example, usually data would
  318.      // be fetched from a server
  319.      var data = [], totalPoints = 300;
  320.      function getRandomData() {
  321.          if (data.length > 0)
  322.              data = data.slice(1);
  323.  
  324.          // do a random walk
  325.          while (data.length < totalPoints) {
  326.              var prev = data.length > 0 ? data[data.length - 1] : 50;
  327.              var y = prev + Math.random() * 10 - 5;
  328.              if (y < 0)
  329.                  y = 0;
  330.              if (y > 100)
  331.                  y = 100;
  332.              data.push(y);
  333.          }
  334.  
  335.          // zip the generated y values with the x values
  336.          var res = [];
  337.          for (var i = 0; i < data.length; ++i)
  338.              res.push([i, data[i]])
  339.          return res;
  340.      }
  341.  
  342.      // setup control widget
  343.      var updateInterval = 30;
  344.      $("#updateInterval").val(updateInterval).change(function () {
  345.          var v = $(this).val();
  346.          if (v && !isNaN(+v)) {
  347.              updateInterval = +v;
  348.              if (updateInterval < 1)
  349.                  updateInterval = 1;
  350.              if (updateInterval > 2000)
  351.                  updateInterval = 2000;
  352.              $(this).val("" + updateInterval);
  353.          }
  354.      });
  355.  
  356.      // setup plot
  357.      var options = {
  358.          series: { shadowSize: 0 }, // drawing is faster without shadows
  359.          yaxis: { min: 0, max: 100 },
  360.          xaxis: { show: false }
  361.      };
  362.      var plot = $.plot($("#placeholder2"), [ getRandomData() ], options);
  363.  
  364.      function update() {
  365.          plot.setData([ getRandomData() ]);
  366.          // since the axes don't change, we don't need to call plot.setupGrid()
  367.          plot.draw();
  368.  
  369.          setTimeout(update, updateInterval);
  370.      }
  371.  
  372.      update();
  373.  });
  374.  </script>
  375.  <!--Real-time-chart-js-end-->
  376.  <!--Turning-series-chart-js-->
  377.  <script type="text/javascript">
  378.  $(function () {
  379.      var datasets = {
  380.          "usa": {
  381.              label: "USA",
  382.              data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]]
  383.          },
  384.          "russia": {
  385.              label: "Russia",
  386.              data: [[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [1994, 36600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]]
  387.          },
  388.          "uk": {
  389.              label: "UK",
  390.              data: [[1988, 62982], [1989, 62027], [1990, 60696], [1991, 62348], [1992, 58560], [1993, 56393], [1994, 54579], [1995, 50818], [1996, 50554], [1997, 48276], [1998, 47691], [1999, 47529], [2000, 47778], [2001, 48760], [2002, 50949], [2003, 57452], [2004, 60234], [2005, 60076], [2006, 59213]]
  391.          },
  392.          "germany": {
  393.              label: "Germany",
  394.              data: [[1988, 55627], [1989, 55475], [1990, 58464], [1991, 55134], [1992, 52436], [1993, 47139], [1994, 43962], [1995, 43238], [1996, 42395], [1997, 40854], [1998, 40993], [1999, 41822], [2000, 41147], [2001, 40474], [2002, 40604], [2003, 40044], [2004, 38816], [2005, 38060], [2006, 36984]]
  395.          },
  396.          "denmark": {
  397.              label: "Denmark",
  398.              data: [[1988, 3813], [1989, 3719], [1990, 3722], [1991, 3789], [1992, 3720], [1993, 3730], [1994, 3636], [1995, 3598], [1996, 3610], [1997, 3655], [1998, 3695], [1999, 3673], [2000, 3553], [2001, 3774], [2002, 3728], [2003, 3618], [2004, 3638], [2005, 3467], [2006, 3770]]
  399.          },
  400.          "sweden": {
  401.              label: "Sweden",
  402.              data: [[1988, 6402], [1989, 6474], [1990, 6605], [1991, 6209], [1992, 6035], [1993, 6020], [1994, 6000], [1995, 6018], [1996, 3958], [1997, 5780], [1998, 5954], [1999, 6178], [2000, 6411], [2001, 5993], [2002, 5833], [2003, 5791], [2004, 5450], [2005, 5521], [2006, 5271]]
  403.          },
  404.          "norway": {
  405.              label: "Norway",
  406.              data: [[1988, 4382], [1989, 4498], [1990, 4535], [1991, 4398], [1992, 4766], [1993, 4441], [1994, 4670], [1995, 4217], [1996, 4275], [1997, 4203], [1998, 4482], [1999, 4506], [2000, 4358], [2001, 4385], [2002, 5269], [2003, 5066], [2004, 5194], [2005, 4887], [2006, 4891]]
  407.          }
  408.      };
  409.  
  410.      // hard-code color indices to prevent them from shifting as
  411.      // countries are turned on/off
  412.      var i = 0;
  413.      $.each(datasets, function(key, val) {
  414.          val.color = i;
  415.          ++i;
  416.      });
  417.  
  418.      // insert checkboxes
  419.      var choiceContainer = $("#choices");
  420.      $.each(datasets, function(key, val) {
  421.          choiceContainer.append('<br/><input type="checkbox" name="' + key +
  422.                                 '" checked="checked" id="id' + key + '">' +
  423.                                 '<label for="id' + key + '">'
  424.                                  + val.label + '</label>');
  425.      });
  426.      choiceContainer.find("input").click(plotAccordingToChoices);
  427.  
  428.  
  429.      function plotAccordingToChoices() {
  430.          var data = [];
  431.  
  432.          choiceContainer.find("input:checked").each(function () {
  433.              var key = $(this).attr("name");
  434.              if (key && datasets[key])
  435.                  data.push(datasets[key]);
  436.          });
  437.  
  438.          if (data.length > 0)
  439.              $.plot($("#placeholder"), data, {
  440.                  yaxis: { min: 0 },
  441.                  xaxis: { tickDecimals: 0 }
  442.              });
  443.      }
  444.  
  445.      plotAccordingToChoices();
  446.  });
  447.  </script>
  448.  <!--Turning-series-chart-js-->
  449.  <script src="js/matrix.dashboard.js"></script>
  450.  <script type="text/javascript">
  451.     $('#dataTable').dataTable();
  452.  </script>
  453.  </body>
  454.  </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!