API tools faq
paste
Advertisement
herusuandana

setting.php

herusuandana
Jan 29th, 2024 (edited)
723
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 13.63 KB | None | 0 0
raw download clone embed print report
  1. <link rel="stylesheet" href="<?= base_url() ?>assets/css/plugins/cropper.min.css">
  2. <script src="<?= base_url() ?>assets/js/plugins/cropper.min.js"></script>
  3. <style>
  4.     .preview {
  5.         overflow: hidden;
  6.         width: 160px;
  7.         height: 160px;
  8.         margin: 10px;
  9.         border: 1px solid red;
  10.     }
  11. </style>
  12. <div class="row">
  13.     <div class="col-md-9">
  14.         <div class="card">
  15.             <div class="card-header">
  16.                 <h4 class="mb-0"><i class="fas fa-cog me-2"></i>Pengaturan Akun</h4>
  17.             </div>
  18.             <div class="card-body pb-3">
  19.                 <div class="row">
  20.                     <div class="col-md-6">
  21.                         <form method="POST" action="<?= base_url() ?>user/setting?act=foto" enctype="multipart/form-data">
  22.                             <input type="hidden" class="txt_csrfname" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">
  23.                             <div class="row">
  24.                                 <div class="form-group col-md-3">
  25.                                     <label class="form-label">Profil</label><br>
  26.                                     <img src="<?= base_url() ?>uploads/profil/<?= user('foto') ?>" class="rounded-circle" style="width: 80px;" alt="Profil <?= user('full_name') ?>">
  27.                                 </div>
  28.                                 <div class="form-group col-md-9">
  29.                                     <label class="form-label">Foto Profil Baru (.jpg, .jpeg, .png)</label>
  30.                                     <input class="form-control mb-0 <?= (form_error('foto_profil') ? 'is-invalid' : '') ?>" type="file" name="foto_profil" id="foto_profil" accept="image/png, image/jpeg, image/jpg">
  31.                                     <?php echo form_error('target', '<div class="invalid-feedback">', '</div>'); ?>
  32.                                 </div>
  33.                             </div>
  34.                             <div class="mb-0">
  35.                                 <button type="submit" class="btn btn-primary float-end"><i class="fas fa-edit fs-6 me-2"></i>Ubah</button>
  36.                                 <a href="<?= base_url() ?>user/setting?act=reset_foto" class="btn btn-danger float-end me-2"><i class="fas fa-sync fs-6 me-2"></i>Reset</a>
  37.                             </div>
  38.                         </form>
  39.                     </div>
  40.                     <div class="col-md-6">
  41.                         <form method="POST" action="<?= base_url() ?>user/setting?act=profil">
  42.                             <input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>" />
  43.                             <div class="form-group row">
  44.                                 <label class="col-md-3 col-form-label">Username</label>
  45.                                 <div class="col-md-9">
  46.                                     <input type="text" class="form-control" value="<?= user('username') ?>" disabled>
  47.                                 </div>
  48.                             </div>
  49.                             <div class="form-group row">
  50.                                 <label class="col-md-3 col-form-label">Email</label>
  51.                                 <div class="col-md-9">
  52.                                     <input type="email" class="form-control" value="<?= user('email') ?>" disabled>
  53.                                 </div>
  54.                             </div>
  55.                             <div class="form-group row">
  56.                                 <label class="col-md-3 col-form-label">Nama Lengkap <span class="text-danger">*</span></label>
  57.                                 <div class="col-md-9">
  58.                                     <input type="text" class="form-control" name="full_name" value="<?= user('full_name') ?>">
  59.                                 </div>
  60.                             </div>
  61.                             <div class="form-group row">
  62.                                 <label class="col-md-3 col-form-label">WhatsApp <small class="text-danger">*</small> <a href="javascript:;" class="text-primary" data-bs-toggle="tooltip" data-bs-html="true" title="Isi dengan awalan (628) bukan (08) contoh 6282265******"><i class="fas fa-exclamation-circle"></i></a></label>
  63.                                 <div class="col-md-9">
  64.                                     <input type="number" class="form-control" name="whatsapp" value="<?= user('whatsapp') ?>">
  65.                                 </div>
  66.                             </div>
  67.                             <div class="form-group row">
  68.                                 <label class="col-md-3 col-form-label">Gender</label>
  69.                                 <div class="col-md-9">
  70.                                     <div class="form-check">
  71.                                         <input class="form-check-input" type="radio" name="gender" id="male" value="male" <?= (user('gender') == 'male') ? 'checked' : '' ?>>
  72.                                         <label class="form-check-label" for="male"><i class="fas fa-male me-1"></i>Laki-laki</label>
  73.                                     </div>
  74.                                     <div class="form-check">
  75.                                         <input class="form-check-input" type="radio" name="gender" id="female" value="female" <?= (user('gender') == 'female') ? 'checked' : '' ?>>
  76.                                         <label class="form-check-label" for="female"><i class="fas fa-female me-1"></i>Perempuan</label>
  77.                                     </div>
  78.                                 </div>
  79.                             </div>
  80.                             <div class="form-group row">
  81.                                 <label class="col-md-3 col-form-label">Telegram <small class="text-danger">*</small> <a href="javascript:;" class="text-primary" data-bs-toggle="tooltip" data-bs-html="true" title="isi username (tanpa @)"><i class="fas fa-exclamation-circle"></i></a></label>
  82.                                 <div class="col-md-9">
  83.                                     <input type="text" class="form-control" name="telegram" value="<?= user('telegram') ?>">
  84.                                 </div>
  85.                             </div>
  86.                             <div class="form-group row">
  87.                                 <label class="col-md-3 col-form-label">Password Saat Ini <span class="text-danger">*</span></label>
  88.                                 <div class="col-md-9">
  89.                                     <input type="password" class="form-control" name="password">
  90.                                 </div>
  91.                             </div>
  92.                             <div class="mb-0">
  93.                                 <button type="submit" class="btn btn-primary float-end"><i class="fas fa-cog fs-6 me-2"></i>Simpan</button>
  94.                             </div>
  95.                         </form>
  96.                     </div>
  97.                 </div>
  98.             </div>
  99.         </div>
  100.     </div>
  101.     <div class="col-md-3">
  102.         <div class="card">
  103.             <div class="card-header">
  104.                 <h4 class="mb-0"><i class="fas fa-cog me-2"></i>Ubah Password</h4>
  105.             </div>
  106.             <div class="card-body pb-3">
  107.                 <form method="POST" action="<?= base_url() ?>user/setting?act=password">
  108.                     <input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>" />
  109.                     <div class="form-group">
  110.                         <label class="form-label">Password Baru <span class="text-danger">*</span></label>
  111.                         <input type="password" class="form-control" name="new_password">
  112.                     </div>
  113.                     <div class="form-group">
  114.                         <label class="form-label">Konfirmasi Password Baru <span class="text-danger">*</span></label>
  115.                         <input type="password" class="form-control" name="confirm_new_password">
  116.                     </div>
  117.                     <div class="form-group">
  118.                         <label class="form-label">Password Saat Ini <span class="text-danger">*</span></label>
  119.                         <input type="password" class="form-control" name="password">
  120.                     </div>
  121.                     <div class="mb-0">
  122.                         <button type="submit" class="btn btn-primary float-end"><i class="fas fa-cog fs-6 me-2"></i>Ubah Password</button>
  123.                     </div>
  124.                 </form>
  125.             </div>
  126.         </div>
  127.     </div>
  128. </div>
  129. <?php if (user('crop_foto') == 0) : ?>
  130.     <div class="modal fade show" id="imgcrop_modal" tabindex="-1" aria-modal="true" role="dialog" style="display: block;">
  131.         <div class="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered">
  132.             <div class="modal-content">
  133.                 <div class="modal-header">
  134.                     <h5 class="modal-title"><i class="fas fa-crop me-2"></i>Crop Image</h5>
  135.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  136.                 </div>
  137.                 <div class="modal-body">
  138.                     <div class="img-container">
  139.                         <div class="row" style="margin-top: -20px; max-width: 100% !important;">
  140.                             <div class="col-md-8">
  141.                                 <img src="<?= base_url() ?>uploads/profil/<?= user('foto') ?>" style="max-width: 100%;" id="cropbox">
  142.                             </div>
  143.                             <div class="col-md-4">
  144.                                 <div class="preview"></div>
  145.                             </div>
  146.                         </div>
  147.                     </div>
  148.                 </div>
  149.                 <div class="modal-footer py-2">
  150.                     <button type="button" class="btn btn-danger float-end my-2" onclick="reset_img();"><i class="fas fa-sync fs-6 me-2"></i>Reset</button>
  151.                     <button type="button" class="btn btn-primary float-end my-2" onclick="crop();"><i class="fas fa-crop fs-6 me-2"></i>Crop</button>
  152.                 </div>
  153.             </div>
  154.         </div>
  155.     </div>
  156. <?php endif; ?>
  157. <script type="text/javascript">
  158.     var TARGET_WIDTH = 600;
  159.     var TARGET_HEIGHT = 600;
  160.     var image = document.getElementById('cropbox');
  161.     var coptions = {
  162.         aspectRatio: 1 / 1,
  163.         viewMode: 1,
  164.         preview: '.preview'
  165.     };
  166.  
  167.     $("#imgcrop_modal").on('hide.bs.modal', function() {
  168.         setTimeout(() => {
  169.             cropper.destroy();
  170.             location.reload(true);
  171.         }, 250);
  172.     });
  173.     if (!($("#imgcrop_modal").data('bs.modal') || {})._isShown) {
  174.         setTimeout(() => {
  175.             cropper = new Cropper(image, coptions);
  176.         }, 500);
  177.     };
  178.  
  179.     function reset_img() {
  180.         window.location.href = '<?= base_url() ?>user/setting?act=reset_foto';
  181.     }
  182.  
  183.     function crop() {
  184.         var csrfName = $('.txt_csrfname').attr('name');
  185.         var csrfHash = $('.txt_csrfname').val();
  186.         var data = cropper.getData();
  187.         $.ajax({
  188.             url: '<?= base_url() ?>ajax/crop',
  189.             type: 'POST',
  190.             data: {
  191.                 tw: TARGET_WIDTH,
  192.                 th: TARGET_HEIGHT,
  193.                 x: data.x,
  194.                 y: data.y,
  195.                 [csrfName]: csrfHash
  196.             },
  197.             success: function(response) {
  198.                 try {
  199.                     var data = JSON.parse(response);
  200.  
  201.                     if (data.status === 'success') {
  202.                         Swal.fire({
  203.                             title: 'Sukses!',
  204.                             text: data.message,
  205.                             icon: 'success',
  206.                             confirmButtonText: 'Okay',
  207.                             customClass: {
  208.                                 confirmButton: 'btn btn-primary',
  209.                             },
  210.                             buttonsStyling: false,
  211.                         }).then(function() {
  212.                             // Reload halaman setelah menekan tombol "Okay" pada Swal
  213.                             location.reload(true);
  214.                         });
  215.                     } else {
  216.                         Swal.fire({
  217.                             title: 'Error!',
  218.                             text: data.message || 'Terjadi kesalahan tanpa pesan keterangan.',
  219.                             icon: 'error',
  220.                             confirmButtonText: 'Okay',
  221.                             customClass: {
  222.                                 confirmButton: 'btn btn-primary',
  223.                             },
  224.                             buttonsStyling: false,
  225.                         });
  226.                     }
  227.                 } catch (error) {
  228.                     console.error('Gagal parsing respons JSON:', error);
  229.                 }
  230.             },
  231.             error: function(jqXHR, textStatus, errorThrown) {
  232.                 console.error('AJAX Error:', textStatus, errorThrown);
  233.                 Swal.fire({
  234.                     title: 'Error!',
  235.                     text: 'Terjadi kesalahan dalam melakukan permintaan.',
  236.                     icon: 'error',
  237.                     confirmButtonText: 'Okay',
  238.                     customClass: {
  239.                         confirmButton: 'btn btn-primary',
  240.                     },
  241.                     buttonsStyling: false,
  242.                 });
  243.             },
  244.             beforeSend: function() {
  245.                 // Tambahkan logika loading atau indikator visual jika diperlukan
  246.             },
  247.             complete: function() {
  248.                 // Tambahkan logika yang dijalankan setelah permintaan selesai, jika diperlukan
  249.             }
  250.         });
  251.     }
  252. </script>
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!