How to use sweetalert in website using PHP and MySQL

• Tech Area
• June 10, 2024

In this post, We will discuss how to use javascript sweetalert in website using PHP and MySQL. If you want to show beautiful alert box, then you can achieve this task using javascript sweetalert.

Files used in this tutorial:

1- connection.php (database connection file)

2- index.php (registration form with javascript sweetalert)

Below are the step by step process of how to display sweetalert using PHP and MySQL.

Step 1: Create a Database connection

In this step, create a new file connection.php to create database connection.

connection.php

<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "college_db";
$connection = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($connection, $database);
if(!$select_db)
{
	echo("connection terminated");
}
?>

Step 2: Create a file for registration form

Now create a new file index.php This is the main file used for registration form and display sweetalert.

This screenshot shows the registration form.

index.php

First of all include necessary CSS and JavaScript library.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Now create HTML for registration form.

<div class="container">  
    <div class="table-responsive">  
    <h3 align="center">Registration Form</h3>
     <div class="box">
     <form method="post">
      <div class="form-group">
       <label for="name">Enter Your Name</label>
       <input type="text" name="name" id="name" placeholder="Enter Name" required class="form-control"/>
      </div>  
       <div class="form-group">
       <label for="email">Enter Your Email</label>
       <input type="text" name="email" id="email" placeholder="Enter Email" required class="form-control"/>
      </div>
      <div class="form-group">
       <label for="phone">Enter Your Phone Number</label>
       <input type="text" name="phone" id="phone" placeholder="Enter Phone Number" required class="form-control"/>
      </div>
      <div class="form-group">
       <label for="phone">Enter Your Address</label>
       <textarea name="address" id="address" placeholder="Enter Address" required class="form-control"></textarea> 
      </div>
      <div class="form-group">
       <input type="submit" id="register" name="register" value="Submit" class="btn btn-success" />
       </div>
   </form>
     </div>
   </div>  
  </div>

Now insert data into database and show sweetalert after successfully form submission.

<?php
    include('connection.php');
    if(isset($_REQUEST['register']))
    {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $phone = $_POST['phone'];
        $address = $_POST['address'];

        $insert_query = mysqli_query($connection,"insert into tbl_registration set name='$name', email='$email', phone='$phone', address='$address'");
        if($insert_query>0)
        {
            echo "<script>

            swal({
                 title: 'Success!',
                 text: 'Form Submitted Successfully.',
                 icon: 'success',
                 button: 'ok'
                 })
                </script>";
        }
        else
        {
            echo "<script>

            swal({
                 title: 'Error!',
                 text: 'Something went wrong.',
                 icon: 'error',
                 button: 'ok'
                 })
                </script>";
        }
    }
    ?>