Home / Unlabelled / Membuat sweetalert-master

Membuat sweetalert-master

Part 1 (Sama Kayak Part3)

created by sance ainul yaqin

1.Download Sweet master  Click here
2.buat kode program

home.php


<!DOCTYPE html>
<html>
<head>
<title>Sweet Alert</title>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
<script type="text/javascript" src="dist/sweetalert.min.js"></script>
</head>
<body>
<button onclick="classic()">Normal Alert</button>
<button onclick="sweet()">Sweet Alert</button>
<script>
function normal () {
alert("Normal Alert!");
}
function sweet (){
swal("Good job!", "You clicked the button!", "success");
}
</script>
</body>
</html>
Atw menggunakan ini  :

"success" => "warning"

1.https://sweetalert.js.org/guides/#installation
2.https://www.codepolitan.com/mempercantik-alert-javascript-dengan-sweet-alert
3.Tes

Contoh yang sudah jadi
Download Disini
https://drive.google.com/open?id=1Iv-OW0DmEpUAIq-F9K-NQx_GKTlsSFmr


=======================================
Part 2

 Ketentuan pembuatan
1.Downoad alert
https://drive.google.com/open?id=1dOiqPpIus01RPnUhG2eNOMx0oBS_uKp7
2.Download Javasrip
http://code.jquery.com/jquery-1.9.1.js
Halman javasrip 191
https://blog.jquery.com/2013/02/04/jquery-1-9-1-released/
3.Buat Kode Program

KodeProgram

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Aguzrybudy.com | Sweet Alert</title>
<link rel="stylesheet" href="alert/css/sweetalert.css">
</head>
<body >

<table id="mytable" class="table table-bordered" border="1">
    <thead>
      <th>No</th>
      <th>Name</th>
      <th>Description</th>
      <th>Action</th>
    </thead>
  <tr>
      <td>sfd</td>
      <td>dfs</td>
      <td>se</td>
      <td>
         <a href="d"  class="edit-link">Edit</a>
<a href="r"  class="delete-link">Delete</a>

      </td>
  </tr>

</table>

<!--Scripts-->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="alert/js/sweetalert.min.js"></script>
<script src="alert/js/qunit-1.18.0.js"></script>


<script>
        jQuery(document).ready(function($){
            $('.delete-link').on('click',function(){
                var getLink = $(this).attr('href');
                swal({
                        title: 'Alert',
                        text: 'Hapus Data?',
                        html: true,
                        confirmButtonColor: '#d9534f',
                        showCancelButton: true,
                        },function(){
                        window.location.href = getLink
                    });
                return false;
            });
        });
    </script>

    <script>
        jQuery(document).ready(function($){
            $('.edit-link').on('click',function(){
               var getLink = $(this).attr('href');
                swal({
                        title: ' Alert',
                        text: 'Edit Data?',
                        html: true,
                        confirmButtonColor: '#d9534f',
                        showCancelButton: true,
                        },function(){
                        window.location.href = getLink
                    });
                return false;
            });
        });
    </script>

</body>
</html>

*********************************
Ketentuan penggunaan
harus javasript kemudian function jika terbalik maka tidak terbaca contoh


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="../alert/js/sweetalert.min.js"></script>
<script>
jQuery(document).ready(function($){
$('.delete-link').on('click',function(){
var getLink = $(this).attr('href');
swal({
title: 'Alert',
text: 'Hapus Data?',
html: true,
confirmButtonColor: '#d9534f',
showCancelButton: true,
},function(){
window.location.href = getLink
});

return false;
});
});
</script>



=====================================================
Part 3
Alert_Simple1
Bisa Langsung Download File sudah jadi pada foldert alert simple1

1.Download Dist pada folder alert simple1

2.Ketikn kode program

<!DOCTYPE html>
<html>
<head>
<title>Sweet Alert</title>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
<script type="text/javascript" src="dist/sweetalert.min.js"></script>
</head>
<body>
<button onclick="classic()">Normal Alert</button>
<button onclick="sweet()">Sweet Alertd</button>
<script>
function normal () {
alert("Normal Alert!");
}
function sweet (){
swal("Good job!", "You clicked the button!", "success");
}
</script>
</body>
</html>
==============================
Part 4


<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Aguzrybudy.com | Sweet Alert</title>

</head>
<body >

<table id="mytable" class="table table-bordered" border="1">
    <thead>
      <th>No</th>
      <th>Name</th>
      <th>Description</th>
      <th>Action</th>
    </thead>
  <tr>
      <td>sfd</td>
      <td>dfs</td>
      <td>se</td>
      <td>
         <a href="#"  class="edit-link">Edit</a>
   <a href="#"  class="delete-link">Delete</a>
<button onclick="test()">Test Button</button>
      </td>
  </tr>

</table>

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

 <script>
function test()
{
Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})
}
</script>
 
</body>
</html>

========================================






Membuat sweetalert-master Membuat sweetalert-master Reviewed by Leo on 08:56 Rating: 5
Tags

No comments

Subscribe to: Post Comments (Atom)