Hướng dẫn sweet alert in php w3schools - cảnh báo ngọt ngào trong php w3schools

Question

Cách để - cảnh báo

Tìm hiểu cách tạo thông báo cảnh báo với CSS.

Nội dung chính Show

Cách để - cảnh báo
Cảnh báo
Bước 1) Thêm HTML:
Tôi có thể sử dụng cảnh báo ngọt ngào trong PHP không?
Cảnh báo ngọt ngào là gì?
Làm thế nào để bạn sử dụng cảnh báo ngọt ngào?
Làm thế nào để bạn xác nhận với cảnh báo ngọt ngào?

Cảnh báo

Thông báo cảnh báo có thể được sử dụng để thông báo cho người dùng về điều gì đó đặc biệt: nguy hiểm, thành công, thông tin hoặc cảnh báo.

× nguy hiểm! Chỉ ra một hành động nguy hiểm hoặc có khả năng tiêu cực. Danger! Indicates a dangerous or potentially negative action.

× Thành công! Chỉ ra một hành động thành công hoặc tích cực. Success! Indicates a successful or positive action.

× Thông tin! Chỉ ra một sự thay đổi hoặc hành động thông tin trung tính. Info! Indicates a neutral informative change or action.

× Cảnh báo! Chỉ ra một cảnh báo có thể cần chú ý. Warning! Indicates a warning that might need attention.

Hãy tự mình thử »

Bước 1) Thêm HTML:

Thí dụ

& nbsp; & thời gian; & nbsp; Đây là một hộp cảnh báo.
×
This is an alert box.

Nếu bạn muốn khả năng đóng thông báo cảnh báo, hãy thêm một phần tử với thuộc tính onclick có nội dung "Khi bạn nhấp vào tôi, hãy ẩn phần tử cha của tôi" - đó là container (class = "alert").

Mẹo: Sử dụng thực thể HTML "×" để tạo chữ "X". Use the HTML entity "×" to create the letter "x".

Bước 2) Thêm CSS:

Kiểu hộp cảnh báo và nút đóng:

Thí dụ

& nbsp; & thời gian; & nbsp; Đây là một hộp cảnh báo.
.alert {
padding: 20px;
background-color: #f44336; /* Red */
color: white;
margin-bottom: 15px;
}

Nếu bạn muốn khả năng đóng thông báo cảnh báo, hãy thêm một phần tử với thuộc tính onclick có nội dung "Khi bạn nhấp vào tôi, hãy ẩn phần tử cha của tôi" - đó là container (class = "alert").
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

Mẹo: Sử dụng thực thể HTML "×" để tạo chữ "X".
.closebtn:hover {
color: black;
}

Hãy tự mình thử »

Bước 1) Thêm HTML:

Thí dụ

& nbsp; & thời gian; & nbsp; Đây là một hộp cảnh báo.

Thí dụ

& nbsp; & thời gian; & nbsp; Đây là một hộp cảnh báo.
.alert {
opacity: 1;
transition: opacity 0.6s; /* 600ms to fade out */
}

Nếu bạn muốn khả năng đóng thông báo cảnh báo, hãy thêm một phần tử với thuộc tính onclick có nội dung "Khi bạn nhấp vào tôi, hãy ẩn phần tử cha của tôi" - đó là container (class = "alert").
// Get all elements with class="closebtn"
var close = document.getElementsByClassName("closebtn");
var i;

Mẹo: Sử dụng thực thể HTML "×" để tạo chữ "X".
for (i = 0; i < close.length; i++) {
// When someone clicks on a close button
close[i].onclick = function(){

Bước 2) Thêm CSS:
var div = this.parentElement;

Kiểu hộp cảnh báo và nút đóng:
div.style.opacity = "0";

/ * Hộp thông báo cảnh báo */. Cảnh báo {& nbsp; & nbsp; padding: 20px; & nbsp; Màu nền: #F44336; / * Đỏ */& nbsp; Màu sắc: Trắng; & nbsp; Biên độ bottom: 15px;}
setTimeout(function(){ div.style.display = "none"; }, 600);
}
}

Hãy tự mình thử »

Bước 1) Thêm HTML: Also check out Notes.

[AD_1]

Thông báo chuyển đổi

swal({
	title: "Good job!",
	text: "You clicked the button!",
	icon: "success",
	button: "Aww yiss!"
});

ví dụ cảnh báo ngọt ngào

swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success",
  button: "Aww yiss!",
});

Xác nhận cảnh báo ngọt ngào

swal("Are you sure?", {  dangerMode: true,  buttons: true,});

[ad_2]

Hãy chia sẻ

Tôi đã có 2 tệp, một tệp là Login.php và những người khác là LoginProcess.php, điều tôi muốn xảy ra là khi tôi nhấp vào nút Gửi trong Đăng nhập, một thông báo ngọt ngào sẽ bật lên rằng đó là một đăng nhập thành công sau đó Chuyển hướng đến trang .PHP khác và khi thông tin đăng nhập không chính xác, nó sẽ hiển thị lỗi swal và quay lại đăng nhập lại.

Mẫu đăng nhập:

Đây là mã của tôi:

login.php

    <!DOCTYPE html>
<html>
<head>
    <title>Login Form</title>

  <script src="sweet\node_modules\sweetalert\dist\sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="sweet\node_modules\sweetalert\dist\sweetalert.css">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"/> 

</head>
<body>
    <form action="student_logprocess.php" method="POST">
    <div class="container">
        <h2><center>Student Login Form</center></h2><hr>
         <h4><center>Please login to continue</center></h4>

         <div class="row">
   <div class="col-md-4 col-md-offset-4">
      <div class="panel panel-default">
         <div class="panel-body">
        <div class="form-group">
             <center><img src="img/user.png" class="img-circle img-thumbnail" width="200" alt="UserPhoto" />
        </center>
             </div>

<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Username" name="txtusername" id="user">
</div>

<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="Password" name="txtpassword" id="pw">
</div>

<div class="checkbox">
   <label>
      <input type="checkbox"> Remember me
   </label>
</div>


<button onclick="showmsg();" type="submit" class="btn btn-primary btn-lg btn-block" id="submit">Login</button>

  </div>
      </div>
 </div> 
</form>

<script type="text/javascript">
  function showmsg()
  {

    var user = 'txtusername';
    var pw = 'txtpassword';

    var userName = document.getElementById('username').value;
    var passWord = document.getElementById('password').value;

  if((username == userName) && (pw == passWord)) {
    swal("Good job!", "Login Success!", "success");
  }
  else{
    swal("Oops...", "Invalid credentials!", "error");
  }
}
</script>

  <script src="jquery-3.1.1.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

loginprocess.php

    <?php
require_once('student_conn.php');

$fname = $_POST['txtusername'];
$password = $_POST['txtpassword'];

$sql=$db->prepare("SELECT * FROM lgn_student WHERE fname=:txtusername AND password=:txtpass");
$sql->bindParam(':txtusername',$fname);
$sql->bindParam(':txtpass',$password);
$sql->execute();

If($row=$sql->rowCount()<>0){
session_start();
$_SESSION['account']=true;

header('location:student_main.php');
}else{
    header('location:student_login.php');
}
?>

Vấn đề ở đây là, tôi không thể làm cho nó hoạt động. Tôi đã thử tìm kiếm ở đây nhưng tôi không hiểu mã được cung cấp .. và nó sẽ không phù hợp với tôi .. Tôi đang sử dụng XAMPP và Navicat cho cơ sở dữ liệu ..

lgn_student là bảng cho thông tin đăng nhập

Cảm ơn bạn trước!

** Chỉnh sửa (sử dụng mã của Michael S.) **EDIT (using the code by Michael S.) **

student_login.php

    <!DOCTYPE html>
<html>
<head>
    <title>Login Form</title>

  <script src="sweet\node_modules\sweetalert\dist\sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="sweet\node_modules\sweetalert\dist\sweetalert.css">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"/> 

</head>
<body>
    <form action="student_logprocess.php" method="POST">
    <div class="container">
        <h2><center>Student Login Form</center></h2><hr>
         <h4><center>Please login to continue</center></h4>

         <div class="row">
   <div class="col-md-4 col-md-offset-4">
      <div class="panel panel-default">
         <div class="panel-body">
        <div class="form-group">
             <center><img src="img/user.png" class="img-circle img-thumbnail" width="200" alt="UserPhoto" />
        </center>
             </div>

<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Username" name="txtusername" id="user">
</div>

<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="Password" name="txtpassword" id="pw">
</div>

<div class="checkbox">
   <label>
      <input type="checkbox"> Remember me
   </label>
</div>


<button type="submit" class="btn btn-primary btn-lg btn-block" id="submit">Login</button>

  </div>
      </div>
 </div> 
</form>

  <script type="text/javascript">
    $(function() {

         var username = $('#user').val(),
                password = $('#pw').val(),
                smb = $('#submit');

           smb.on('click', function(e){
              e.preventDefault();

              $.post( "/htdocs/0205_stud/student_logprocess.php", 
                    {txtusername: username, txtpassword: password},
                    function( data ) { 
                      
                      var_dump( $sql->fetch() );die()
                      if(data.state == 1) {
                         swal("Good job!", "Login Success!", "success");
                         
                         window.location.href = "student_main.php";
                      }
                      else
                         swal("Oops...", "Invalid credentials!", "error");
                    });
              });});

      </script>

  <script src="jquery-3.1.1.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

student_logprocess.php

    <?php
require_once('student_conn.php');
session_start();  


$fname = $_POST['txtusername']; //Retrieve AJAX data

$password = $_POST['txtpassword']; //Retrieve AJAX data

$sql=$db->prepare("SELECT * FROM lgn_student WHERE fname=:txtusername AND password=:txtpass");
$sql->bindParam(':txtusername',$fname);
$sql->bindParam(':txtpass',$password);
$sql->execute();

if( $sql->fetch() ){

    $_SESSION['account']=true;
    $data['state'] = 1; 

}

else{

    $data['state'] = 0;  

}

header("Content-type: application/json; charset=utf-8");
echo json_encode($data);

Tôi có thể sử dụng cảnh báo ngọt ngào trong PHP không?

Trong hướng dẫn này, chúng tôi sẽ thảo luận về cách sử dụng cảnh báo ngọt ngào bằng PHP. Đầu tiên, bạn phải bao gồm Thư viện Alert Sweet như tôi đã bao gồm. Cảnh báo ngọt ngào không tải cho đến khi các phần tử DOM được tải. Ở đây, tôi sẽ chia sẻ cách sử dụng cảnh báo ngọt ngào bằng PHP.you have to include the sweet alert library as I have included. The sweet alert doesn't load until the dom elements get loaded. Here, I will share how to use sweet alert using PHP.

Cảnh báo ngọt ngào là gì?

Sweet Alert là một cách để tùy chỉnh cảnh báo trong các trò chơi và trang web của bạn.Nó cho phép bạn thay đổi từ một nút JavaScript tiêu chuẩn.Chúng tôi có thể thêm các nút, thay đổi văn bản màu và thậm chí thêm các cảnh báo bổ sung thay đổi tùy thuộc vào nhấp chuột của người dùng.a way to customize alerts in your games and websites. It allows you to change from a standard JavaScript button. We can add buttons, change the color text, and even add additional alerts that change depending on user click.

Làm thế nào để bạn sử dụng cảnh báo ngọt ngào?

Tất cả những gì bạn phải làm là gọi hàm swal () ...

Nhập.React từ 'React'.

Nhập khẩu.....

const onpick = value => {.

Swal ("Xin vui lòng phản hồi!", `....

Làm thế nào để bạn xác nhận với cảnh báo ngọt ngào?

Sweetalert sử dụng lời hứa để theo dõi cách người dùng tương tác với cảnh báo.Nếu người dùng nhấp vào nút Xác nhận, lời hứa sẽ giải quyết thành true.Nếu cảnh báo bị loại bỏ (bằng cách nhấp vào bên ngoài nó), lời hứa sẽ giải quyết được.swal ("Nhấp vào nút hoặc bên ngoài phương thức.")If the user clicks the confirm button, the promise resolves to true . If the alert is dismissed (by clicking outside of it), the promise resolves to null . swal("Click on either the button or outside the modal.")