CARA MENGGUNAKAN SWEET ALERT 2

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh,

Ditutorial ini akan berbagi cara menggunakan sweet alert, mungkin tidak selengkap dokumentasinya, saya hanya menampilkan sweet alert sesuai dengan kebutuhan saya saja, dimana sweet alert yang saya gunakan yaitu saat user berhasil menyimpan data atau menghapus data

maka sweet alert akan muncul, karena alert yang biasa sudah saya rasa membosankan, saya menggunakan sweet alert. dan berikut langkah-langkah nya.

Sebelum koding atau copy paste script sweet alert nya baik dari blok ini atau pun langsung dari situs resmi sweet alert anda harus memasukkan link css atau lin js yang disediakan oleh sweet alert. Berikut link nya jika ingin secara online :

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Kalian bisa download sweet alert melalui npm juga npm install sweetalert2 , setelah selesai download nya kalian bisa pindah sweet alert nya ke dalam projek anda atau ke folder yang inginkan. lalu panggi seewt alertnya dengan kode yang biasa kalian lakukan contoh seperti ini :

<script src="sweetalert2.all.min.js"></script>

letakkan kode sweet alert diatas sendiri atau dibawah sendiri dari script anda.

Selanjutnya adalah cara menggunakan sweet alert yang mungkin akan biasa diguanakan seperti contoh diatas yang sudah saya sebutkan, dimana sweet alert akan muncul jika aplikasi telah berhasil menyimpan, mengubah data atau menghapus data.

Berikut ini hanya contoh dari kode sweet alert yang sederhana. Kalian bisa mengembangakannya sendiri.

<button class="btn btn-warning" onclick="warning()">Sweet Alert Warning</button>
 
<script type="text/javascript">
 
    function warning(){
        Swal.fire({
          position: 'center',
          icon: 'warning',
          title: 'Data Tidak Terdaftar',
          showConfirmButton: true,
          confirmButtonColor: '#3085d6'
        })  
    }
</script>

Hasilnya akan seperti gambar dibawah, dimana saat menekan tombol nya sweet alert akan menampilkan alert atau notif seperti gambar dibawah ini.

Sekarang kita coba sweet alert yang lain, seperti saat user menekan tombol delete maka akan sweet alert akan menampilkan notif persetujuan terlebih dahulu. berikut script pada sweet alert nya :

<button class="btn btn-danger" onclick="deleted()">Sweet Alert Warning</button><br>
 
<script type="text/javascript">
    function deleted(){
        Swal.fire({
          title: 'Apakah Anda Yakin ?',
          text: "Data Anda Tidak Dapat di Kembalikan ..",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Ya, Hapus Data ini!',
          cancelButtonText: 'Tidak..',
        }).then((result) => {
          if (result.isConfirmed) {
            Swal.fire(
              'Deleted!',
              'Berhasil Dihapus.',
              'success'
            )
          }else{
            Swal.fire(
              'Warning..!',
              'Gagal Dihapus.',
              'warning'
            )             
          }
        })      
    }
</script>

script sweet alert diatas akan menampilkan seperti gambar dibawah ini :

jika user memilih tombol Ya Hapus Data ini! maka sweet alert akan menampilkan notif lagi serperti gambar dibawah ini :

Jika user memilih tombol Tidak maka sweet alert akan menampilkan notif lagi seperti gambar dibawah ini.

Terima Kasih
Thank's

TAG TAGS :

sweet alert || sweetalert || cara menggunakan sweet alert || how to use sweet alert in php || sweet alert bahasa indonesia || sweetalert2 || how to custom sweet alert || how to custom color button confirm sweet alert || how to custom color button cancel in sweet alert langsungkoding.blogspot.com | langsungkoding |

BACA JUGA :

• C.R.U.D AJAX dengan php

SOURCE :

- https://sweetalert2.github.io/#examples

CARA BREAK PAGE BARU SAAT SUDAH ADA 6 ROW DENGAN PHP

source logo : www.php.com


Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh,

Pada kasus ini saat saya sedang membuat kartu barang kurang lebih seperti kartu indentitas seperti ktp hanya saja namanya berisi atribut seperti nama barang, kondisi barang, lokasi barang dll. Saya mengalami kesulitan saat mau print, dimana saat pindah halaman baru ada beberapa kartu yang kepotong karena sudah tidak menemukan tempat. Struktur html nya adalah seperti dibawah ini

<div >
    <div>
        <table>
            <tr>
                <td>nama_barang</td>
                <td><?php echo $row['nama_barang'];  ?></td>
            </td>
        </table>
    </div>
</div>

Setelah cari solusi di google selama 3 hari saya, yang saya temukan hanya script css nya saja seperti ini page-break-after: always; namun setelah saya coba cari stackoverflow saya menemukan scriptnya seperti ini :

#script_nya :

<?php 
    $q = "SELECT * FROM tb_sarpras";
    $myq = mysqli_query($link, $q);
    $fixtures ='';
    $i=0;
        while($row=mysqli_fetch_assoc($myq)) {
            $r[]=$row;
        }
 
 
        foreach ($r as $isi) {
            $i++;
    ?>
 
    <table>
        <tr>
            <td><?php echo $isi['nama_barang']; ?></td>
        </tr>
    </table>
 
<?php
        if($i % 6==0){
            echo '<div style="page-break-after: always;">[------ break ------]</div>' . PHP_EOL;
        $i=0;
        }
    }
 
    ?>

#result_nya :

Di script saya memasukkan perulangan while untuk mengeluarkan data nya dan dimasukkan ke dalam array lalu dikeluarkan dengan menggunakan foreach lalu pada script if($i % 6==0) adalah untuk menampilkan data sebanyak 6 kali setelah 6 kali. maka script page-break:after; akan dijalankan, maka jadilah seperti gambar diatas.

Setelah saya membuat script diatas saya mempercantik nya dengan menggunakan framework BULMA FRAMEWORK CSS dengan tanpa menggunakan class="is-multiline" karena jika tetap digunakan, fungsi page-break-nya tidak berfungsi. jadi hasilnya akan terpotong. Di akhir artikel kalian bisa kunjungi link yang sudah saya sediakan cara multiline atau istilah lainnya cara agar table berdampingan.

Berikut hasilnya jika ditekan ctrl dan P pada keyboard :

Terima Kasih
Thank's

TAG TAGS :

after count 4 page break print in php | after count 4 br in php | menampilkan beberapa div dengan page break | after count 4 page break print in php site:stackoverflow.com | cara break page baru saat sudah ada 6 row dengan php | langsungkoding.blogspot.com | langsungkoding |

BACA JUGA :

• C.R.U.D AJAX dengan php

SOURCE :

- html - php code to break page after 6th row - Stack Overflow
- php - How to add page-breaks to generated multiple page pdf - Stack Overflow
- php - Break while loop every 3 iterations - Stack Overflow
- PHP add html break after every 10th mysql result - Stack Overflow
- referensii agar table nya berdampingan

Read More

CARA MENGUNAKAN LIBRARY DATATABLES

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh,

source logo : www.freebiesupply.com

Ditutorial jquery ini akan berbagi cara menampilkan data pada table menggunakan jquery DataTables , tentunya akan membutuhkan library jquery dan jquery dataTables nya disini. kalian bisa download langsung ke website resminya, baik langsung saja langkah awal adalah membuat database dulu berikut adalah struktur database nya sebelum menampilkan datanya ke dalam dataTables

Berikut kode awal nya yaitu berupa link dan source library DataTables

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

Pada script ini untuk menampilkan data dari database nya pada dataTables, tentunya jangan lupa, untuk membuat script koneksi ke databasenya dulu, pada script di bawah ini sudah ada script terhubung dengan database

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>City</th>
      <th>Country</th>
      <th>Date Birth</th>
    </tr>
  </thead>
  <tbody> 
    <?php 
	    $connection = mysqli_connect($server="localhost",$username="root",$password="",$database="test");
	?> 
	
	<?php 
		$query = "SELECT * FROM tb_users";
		$myq = mysqli_query($connection, $query);
		
		while( $row = mysqli_fetch_assoc($myq) ){
	?> 
	
	<tr>
      <td> <?php echo $row['name']; ?> </td>
      <td> <?php echo $row['city']; ?> </td>
      <td> <?php echo $row['country']; ?> </td>
      <td> <?php echo $row['date_birth']; ?> </td>
    </tr> 
    <?php } ?> 
    </tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>City</th>
      <th>Country</th>
      <th>Date Birth</th>
    </tr>
  </tfoot>
</table>

Pada script berikut adalah script jquery untuk memanggil fungsi-fungsi dataTables nya sesuaikan dengan nama atribut pada tag Table nya, pada tag Table nya saya memberi nama id="example" maka pada script ini di ketik $("#example").DataTable();

<script type="text/javascript">
   
   $(document).ready(function() {
      $('#example').DataTable();
   });
   
</script>

berikut Hasilnya :

Terima Kasih
Thank's


TAG TAGS :

CARA Mengunakan Library DataTabales | CARA Mengunakan Library DataTabales Pada JQUERY | DataTables dengan menggunakan JQUERY | DataTables Libarry DENGAN JQUERY | JQUERY LIBRARY | DataTables Library | LANGSUNGKODING |

BACA JUGA :

• C.R.U.D AJAX dengan php

Read More