Làm cách nào để tạo cảnh báo ngọt ngào trong PHP?

Được đăng ban đầu @ https. // mã và triển khai. com truy cập và tải xuống mã mẫu. https. // mã và triển khai. com/blog/php/integrate-sweetalert-2-in-php-mysql-using-ajax

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tích hợp sweetalert 2 trong PHP & MySQL bằng Ajax. Cảnh báo ngọt ngào 2 cho phép chúng tôi tùy chỉnh hộp cảnh báo trong các ứng dụng web của mình và giao diện thật tuyệt vời khiến nhiều nhà phát triển yêu thích nó. Vì vậy, trong bài viết này, tôi sẽ chia sẻ cách tích hợp nó dễ dàng vào các ứng dụng của chúng tôi

Tạo chỉ mục HTML

Vì vậy, trước tiên hãy bắt đầu bằng cách tạo tệp index.html của chúng tôi. Xem mã dưới đây


 lang="en">

    </span>Integrate Sweetalert 2 In PHP <span>&</span> MySQL Using Ajax<span>

    
     rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    
     rel="stylesheet" href="assets/plugins/sweetalert2/sweetalert2.min.css">

    
     rel="stylesheet" href="assets/css/styles.css">




     class="container">

        

Integrate Sweetalert 2 In PHP & MySQL Using Ajax



class="row"> class="col-md-4">

Add New Employee

action="save.php" id="form"> class="form-group"> for="email">Email class="form-control" type="text" name="email">
class="form-group"> for="first_name">First Name class="form-control" type="text" name="first_name"> class="form-group"> for="last_name">Last Name class="form-control" type="text" name="last_name"> class="form-group"> for="address">Address class="form-control" type="text" name="address" rows="3"> type="button" class="btn btn-primary" id="btnSubmit">Submit class="col-md-8">

List of Employees

id="employees-list"> class="modal" id="edit-employee-modal"> class="modal-dialog"> class="modal-content"> class="modal-header"> class="modal-title">Edit Employee type="button" class="close" data-dismiss="modal">× class="modal-body"> action="update.php" id="edit-form"> class="form-control" type="hidden" name="id"> class="form-group"> for="email">Email class="form-control" type="text" name="email"> class="form-group"> for="first_name">First Name class="form-control" type="text" name="first_name"> class="form-group"> for="last_name">Last Name class="form-control" type="text" name="last_name"> class="form-group"> for="address">Address class="form-control" type="text" name="address" rows="3"> type="button" class="btn btn-primary" id="btnUpdateSubmit">Update type="button" class="btn btn-danger float-right" data-dismiss="modal">Close

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Như bạn có thể thấy ở trên, chúng tôi đã nhập javascript và kiểu Sweetalert2

Triển khai Sweetalert với Lưu bản ghi bằng Ajax?

Vì vậy, trong các hướng dẫn trước của chúng tôi, chúng tôi chỉ sử dụng cảnh báo javascript gốc sau khi tạo thành công bản ghi. Như bạn có thể thấy bên dưới ảnh chụp màn hình

Làm cách nào để tạo cảnh báo ngọt ngào trong PHP?

Vì vậy, chúng tôi sẽ thay thế nó ngay bây giờ bằng thiết kế tuyệt vời của sweetalert2. Vui lòng kiểm tra mã dưới đây để biết ai sẽ làm điều đó

function save() 
{
    $("#btnSubmit").on("click", function() {
        var $this           = $(this); //submit button selector using ID
        var $caption        = $this.html();// We store the html content of the submit button
        var form            = "#form"; //defined the #form ID
        var formData        = $(form).serializeArray(); //serialize the form into array
        var route           = $(form).attr('action'); //get the route using attribute action

        // Ajax config
        $.ajax({
            type: "POST", //we are using POST method to submit the data to the server side
            url: route, // get the route value
            data: formData, // our serialized array data for server side
            beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
                $this.attr('disabled', true).html("Processing...");
            },
            success: function (response) {//once the request successfully process to the server side it will return result here
                $this.attr('disabled', false).html($caption);

                // Reload lists of employees
                all();

                // We will display the result using alert
                Swal.fire({
                  icon: 'success',
                  title: 'Success.',
                  text: response
                });

                // Reset form
                resetForm(form);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // You can put something here if there is an error from submitted request
            }
        });
    });
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Trong chức năng lưu của chúng tôi ở trên, bạn sẽ thấy một mã bắt đầu bằng Swal.fire bên trong thành công ajax. Như bạn có thể thấy bên dưới


Swal.fire({
    icon: 'success',
    title: 'Success.',
    text: response
});


Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ vì chúng tôi đã thêm sweetalert2 nên nếu chúng tôi lưu một bản ghi mới, hộp cảnh báo sẽ xuất hiện như hình bên dưới

Làm cách nào để tạo cảnh báo ngọt ngào trong PHP?

Vì chúng tôi đã triển khai cái cơ bản. Tiếp theo, chúng tôi sẽ triển khai hộp thoại Xác nhận loại sweetalert 2

Triển khai Loại hộp thoại Sweetalert với Ajax Delete trên PHP & MySQL

Dưới đây là mã ví dụ về loại hộp thoại sweetalert 2 mà chúng ta sẽ sử dụng để xác nhận việc xóa bản ghi

Làm cách nào để tạo cảnh báo ngọt ngào trong PHP?

Làm cách nào để tạo cảnh báo ngọt ngào trong PHP?


Swal.fire({
    icon: 'warning',
    title: 'Are you sure you want to delete this record?',
    showDenyButton: false,
    showCancelButton: true,
    confirmButtonText: 'Yes'
}).then((result) => {
  /* Read more about isConfirmed, isDenied below */
  if (result.isConfirmed) {
    //action here
  }

});

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Vì bạn có mã mẫu về, tiếp theo chúng tôi sẽ giải quyết toàn bộ mã về cách triển khai mã đó với xóa ajax. Vui lòng kiểm tra mã dưới đây

function del() 
{
    $(document).delegate(".btn-delete-employee", "click", function() {


        Swal.fire({
            icon: 'warning',
            title: 'Are you sure you want to delete this record?',
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: 'Yes'
        }).then((result) => {
          /* Read more about isConfirmed, isDenied below */
          if (result.isConfirmed) {

            var employeeId = $(this).attr('data-id');

            // Ajax config
            $.ajax({
                type: "GET", //we are using GET method to get data from server side
                url: 'delete.php', // get the route value
                data: {employee_id:employeeId}, //set data
                beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click

                },
                success: function (response) {//once the request successfully process to the server side it will return result here
                    // Reload lists of employees
                    all();

                    Swal.fire('Success.', response, 'success')
                }
            });


          } else if (result.isDenied) {
            Swal.fire('Changes are not saved', '', 'info')
          }
        });


    });
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Được rồi, bây giờ bạn đã sẵn sàng triển khai cảnh báo ngọt ngào 2 với dự án của mình. Vì vậy, đã đến lúc xem xét các hành động thực tế của mã này. Tôi hy vọng hướng dẫn này có thể giúp bạn. Vui lòng truy cập tại đây https. // mã và triển khai. com/blog/php/integrate-sweetalert-2-in-php-mysql-using-ajax nếu bạn muốn tải xuống mã này

Làm cách nào để sử dụng cảnh báo ngọt ngào trong mã PHP?

Để sử dụng nó trong php, bạn có thể sử dụng đoạn mã sau. Đầu tiên, bạn phải đưa vào thư viện sweetalert như tôi đã đưa vào. Sau đó, bạn có thể sử dụng cảnh báo ngọt ngào như tôi đã sử dụng trong tiếng vang . Sweetalert không tải cho đến khi các phần tử dom được tải.

Tại sao hộp cảnh báo của tôi không hoạt động trong PHP?

PHP không hỗ trợ hộp thông báo cảnh báo vì đây là ngôn ngữ phía máy chủ nhưng bạn có thể sử dụng mã JavaScript trong phần thân PHP để .

Swal trong JavaScript là gì?

Có 4 cái được xác định trước. "cảnh báo", "lỗi", "thành công" và "thông tin". swal( "Làm tốt lắm. ", " Bạn đã nhấp vào nút. ", " thành công"); Xem trước.