How to use Toastr Alerts in PHP?
Apr 07, 2022 . Admin
Hello dev,
I am going to explain you How to use Toastr Alerts in PHP?. You will learn How To Use Toastr In Php?
This article will give you simple example of Creating Real Time Notification System in PHP and AJAX. We will use get simple How can I show a Toast notification on form submission.
I will give you simple Example of How to use Toastr Alerts in PHP?.
So, let's see bellow solution:
index.php
<!DOCTYPE html>
<html>
<head>
<title>How to use Toastr Alerts in PHP?</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.toast
{
position: absolute;
top: 10px;
right: 10px;
}
</style>
</head>
<body class="bg-dark">
<div class="container mt-5 pt-5" >
<div class="row">
<div class="col-md-12">
<div class="card mt-3">
<div class="card-header text-center bg-danger text-white">
<h1>How to use Toastr Alerts in PHP?</h1>
</div>
<div class="card-body">
<form id="submit_form">
<div class="mb-3">
<label>Email : </label>
<input type="email" name="email" id="email" class="form-control" />
</div>
<div class="mb-3">
<label>Message : </label>
<textarea name="message" id="message" class="form-control" rows="5" ></textarea>
</div>
<div class="d-flex justify-content-center">
<input type="button" name="submit" id="submit" class="btn btn-primary" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
<div class="toast" id="myToast" data-bs-autohide="true">
<div class="toast-header">
<strong class="me-auto"><i class="bi-bell-fill"></i>notification</strong>
<small>1 sec ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
<p id="error_message"></p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#submit').click(function(){
var email = $('#email').val();
var message = $('#message').val();
if(email == '' || message == ''){
$('#error_message').html("All Fields are required");
$('.toast').toast('show');
}else{
$.ajax({
url:"insert.php",
method:"POST",
data:{email:email, message:message},
success:function(data){
$('.toast').toast('show');
$('#error_message').html(data);
}
});
}
});
});
</script>
</body>
</html>
insert.php
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "aatman";
$conn = new mysqli($servername,$username,$password,$dbname);
if($conn->connect_error){
die ('connection faild:'.$conn->connect_error);
}
$email = $_POST['email'];
$message = $_POST['message'];
$sql = "INSERT INTO users (email,message)VALUES('$email','$message')";
if ($conn->query($sql)===TRUE) {
echo "message sent successfully";
}else{
echo "Error: ".$sql."<br>".$conn->error;
}
$conn->close();
?>
Output:
It will help you...