article

Saturday, February 26, 2022

PHP Mysqli CRUD with JQuery AJAX and Bootstrap 5

PHP Mysqli CRUD (Create, Read, Update and Delete) with JQuery AJAX and Bootstrap 5

Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js

Bootstrap icons
https://icons.getbootstrap.com/#install
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css
index.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
//index.php
<?php
    include('conn.php');
?>
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8" name = "viewport" content = "width-device=width, initial-scale=1" />
        <link rel = "stylesheet" type = "text/css" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
        <title>PHP Mysqli CRUD with JQuery AJAX and Bootstrap 5</title>
    </head>
<body>
    <div style="height:30px;"></div>
    <div class = "row">  
        <div class = "col-md-3">
        </div>
        <div class = "col-md-6 well">
            <div class="row">
                <div class="col-lg-12">
                    <center><h2 class = "text-primary">PHP Mysqli CRUD with JQuery AJAX and Bootstrap 5</h2></center>
                    <hr>
                <div>
                    <form>
                        <div class="mb-3">
                            <label>Firstname:</label>
                            <input type  = "text" id = "firstname" class = "form-control">
                        </div>
                        <div class="mb-3">
                            <label>Lastname:</label>
                            <input type  = "text" id = "lastname" class = "form-control">
                        </div>
                        <div class="mb-3">
                            <button type = "button" id="addnew" class = "btn btn-primary"><i class="bi bi-clipboard2-plus-fill"></i> Add</button>
                        </div>
                    </form>
                </div>
                </div>
            </div><br>
            <div class="row">
            <div id="userTable"></div>
            </div>
        </div>
    </div>
</body>
<script src = "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> 
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script type = "text/javascript">
    $(document).ready(function(){
        showUser();
        //Add New
        $(document).on('click', '#addnew', function(){
            if ($('#firstname').val()=="" || $('#lastname').val()==""){
                alert('Please input data first');
            }
            else{
            $firstname=$('#firstname').val();
            $lastname=$('#lastname').val();            
                $.ajax({
                    type: "POST",
                    url: "addnew.php",
                    data: {
                        firstname: $firstname,
                        lastname: $lastname,
                        add: 1,
                    },
                    success: function(){
                        showUser();
                    }
                });
            }
        });
        //Delete
        $(document).on('click', '.delete', function(){
            $id=$(this).val();
                $.ajax({
                    type: "POST",
                    url: "delete.php",
                    data: {
                        id: $id,
                        del: 1,
                    },
                    success: function(){
                        showUser();
                    }
                });
        });
        //Update
        $(document).on('click', '.updateuser', function(){
            $uid=$(this).val();
            $('#edit'+$uid).modal('hide');
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
            $ufirstname=$('#ufirstname'+$uid).val();
            $ulastname=$('#ulastname'+$uid).val();
                $.ajax({
                    type: "POST",
                    url: "update.php",
                    data: {
                        id: $uid,
                        firstname: $ufirstname,
                        lastname: $ulastname,
                        edit: 1,
                    },
                    success: function(){
                        showUser();
                    }
                });
        });
     
    });
     
    //Showing our Table
    function showUser(){
        $.ajax({
            url: 'show_user.php',
            type: 'POST',
            async: false,
            data:{
                show: 1
            },
            success: function(response){
                $('#userTable').html(response);
            }
        });
    }
     
</script>
</html>
conn.php
?
1
2
3
4
5
6
7
//conn.php
<?php
$conn = mysqli_connect("localhost","root","","testingdb");
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
?>
addnew.php
?
1
2
3
4
5
6
7
8
9
10
//addnew.php
<?php
    include('conn.php');
    if(isset($_POST['add'])){
        $firstname=$_POST['firstname'];
        $lastname=$_POST['lastname'];
         
        mysqli_query($conn,"insert into usertble (firstname, lastname) values ('$firstname', '$lastname')");
    }
?>
show_user.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//show_user.php
<?php
    include('conn.php');
    if(isset($_POST['show'])){
        ?>
        <table class = "table table-bordered alert-success table-hover">
            <thead>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Action</th>
            </thead>
                <tbody>
                    <?php
                        $quser=mysqli_query($conn,"select * from usertble");
                        while($urow=mysqli_fetch_array($quser)){
                            ?>
                                <tr>
                                    <td><?php echo $urow['firstname']; ?></td>
                                    <td><?php echo $urow['lastname']; ?></td>
                                    <td><button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#editModal<?php echo $urow['userid']; ?>"><i class="bi bi-pencil"></i> Edit</button> | <button class="btn btn-danger delete" value="<?php echo $urow['userid']; ?>"><i class="bi bi-trash"></i> Delete</button>
                                    <?php include('edit_modal.php'); ?>
                                    </td>
                                </tr>
                            <?php
                        }
                     
                    ?>
                </tbody>
            </table>
        <?php
    }
 
?>
edit_modal.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//edit_modal.php
<div class="modal fade" id="edit<?php echo $urow['userid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <?php
        $n=mysqli_query($conn,"select * from `user` where userid='".$urow['userid']."'");
        $nrow=mysqli_fetch_array($n);
    ?>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class = "modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <center><h3 class = "text-success modal-title">Update Member</h3></center>
        </div>
        <form>
        <div class="modal-body">
            Firstname: <input type="text" value="<?php echo $nrow['firstname']; ?>" id="ufirstname<?php echo $urow['userid']; ?>" class="form-control">
            Lastname: <input type="text" value="<?php echo $nrow['lastname']; ?>" id="ulastname<?php echo $urow['userid']; ?>" class="form-control">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal"><span class = "glyphicon glyphicon-remove"></span> Cancel</button> | <button type="button" class="updateuser btn btn-success" value="<?php echo $urow['userid']; ?>"><span class = "glyphicon glyphicon-floppy-disk"></span> Save</button>
        </div>
        </form>
    </div>
  </div>
</div>
update.php
?
1
2
3
4
5
6
7
8
9
10
11
//update.php
<?php
    include('conn.php');
    if(isset($_POST['edit'])){
        $id=$_POST['id'];
        $firstname=$_POST['firstname'];
        $lastname=$_POST['lastname'];
         
        mysqli_query($conn,"update usertble set firstname='$firstname', lastname='$lastname' where userid='$id'");
    }
?>
?
1
2
3
4
5
6
7
8
//delete.php
<?php
    include('conn.php');
    if(isset($_POST['del'])){
        $id=$_POST['id'];
        mysqli_query($conn,"delete from usertble where userid='$id'");
    }
?>

Posted by ednalan at 7:37 PM . Under , , .

Related Post