Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to implement C.R.U.D operations using Ajax and Simple PHP

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.14k
    Comment on it

    This tutorial will help user to learn, how to implement create, retrieve, update, and delete operations without refreshing the web page using Ajax and simple php.

    This is the html file named view.php

    Ajax | CRUD <script src="js/jquery.js"></script> <script src="js/curd.js"></script>

    <div id="ajxrsp">
    <?php foreach ($data as $value): ?>
        <div class="row<?php echo $value['id']; ?>">
            <input class="name" type="text" value="<?php echo $value['name']; ?>" name="name" />
            <input class="phone" type="text" value="<?php echo $value['phone']; ?>" name="phone" />
            <input class="address" type="text" value="<?php echo $value['address']; ?>" name="address" />
            <a class="update" href="#" rel="<?php echo $value['id']; ?>">UPDATE</a>
            <a class="delete" href="#" rel="<?php echo $value['id']; ?>">DELETE</a>
        </div>
        <?php endforeach; ?>
    <form id="info">
        <label for="name">User Name:</label>
        <input id="name" type="text" name="name" /><br />
        <label for="phone">Contact No:</label>
        <input id="phone" type="text" name="phone" /><br />
        <label for="address">Address:</label>
        <input id="address" type="text" name="address" /><br />
        <input type="submit" value="Send"> <br/><br/><br/>
    </form>
    </div>
    


    This is the js file named as curd.js

    $(document).ready(function() {
    
        $('#info').submit(function() {
            $.post('./curd/ajaxPost.php',$('#info').serialize(), function() {
                $('#ajxrsp').load(location.href);
            });
            return false;
        });
    
        $('.update').click(function() {
            var item = $(this).parent();
            var id = $(this).attr('rel');
            var name = $('.row' + id + ' .name').val();
            var phone = $('.row' + id + ' .phone').val();
            var address = $('.row' + id + ' .address').val();
    
            $.post('./curd/ajaxUpdate.php', {
                'id' : id,
                'name' : name,
                'phone' : phone,
                'address' : address
            });
        });
    
        $('.delete').click(function() {
            var item = $(this).parent();
            var id = $(this).attr('rel');
            alert(id);
            $.post('./curd/ajaxDelete.php', {
                'id' : id
            }, function() {
                $(item).hide('slow', function() {
                    $(item).remove();
                });
            });
        })
    });
    

    config file config.php

    <?php
    include 'mysqli.class.php';
    
    $config = array();
    $config['host'] = 'localhost';
    $config['user'] = 'root';
    $config['pass'] = '123456';
    $config['dbase'] = 'crud';
    
    $db = new DB($config);
    

    Our first page that consists form for input, named as index.php

    <?php
    
    include 'curd/config.php';
    
    $db->query('SELECT * FROM crud.users');
    $data = $db->get();
    include 'view.php';
    

    File for making db connecting msqli.class.php

    <?php
    class DB
    {
    
        private $fetchMode = MYSQLI_BOTH;
    
        public function  __construct($db) {
            $this->mysqli = new mysqli($db['host'], $db['user'], $db['pass'], $db['dbase']);
    
            if (mysqli_connect_errno()) 
            {
                printf("<b>Connection failed:</b> %s\n", mysqli_connect_error());
                exit;
            }
        }
        public function setFetchMode($type)
        {
            switch($type)
            {           
                case 1:
                $this->fetchMode = MYSQLI_NUM;
                break;          
                case 2:
                $this->fetchMode = MYSQLI_ASSOC;
                break;
                default:
                $this->fetchMode = MYSQLI_BOTH;
                break;
    
            }
    
        }
    
        public function query($SQL)
        {   
            $this->SQL = $this->mysqli->real_escape_string($SQL);
            $this->result = $this->mysqli->query($SQL);
    
            if ($this->result == true)
            {
                return true;
            }
            else
            {
                printf("<b>Problem with SQL:</b> %s\n", $this->SQL);
                exit;
            }
        }
        public function get($field = NULL)
        {
            if ($field == NULL)
            {
                /** Grab all the data */
                $data = array();
    
                while ($row = $this->result->fetch_array($this->fetchMode))
                {
                    $data[] = $row;
                }
            }
            else
            {
                /** Select the specific row */
                $row = $this->result->fetch_array($this->fetchMode);
                $data = $row[$field];
            }
    
            /** Make sure to close the result Set */
            $this->result->close();
            return $data;
        }
        public function id()
        {
            return $this->mysqli->insert_id;
        }
        public function __destruct()
        {
            $this->mysqli->close();
        }
    }
    

    File for inserting data in the db ajaxPost.php

    <?php
    include 'config.php';
    
    $name = $_POST['name'];
    $phone = $_POST['phone'];
    $address = $_POST['address'];
    
    if ($name || $phone || $address) {
        $db->query("INSERT INTO users(name, phone, address) VALUES('$name', '$phone', '$address')");
    }
    

    File for updating data in the db ajaxUpdate.php

    <?php
    include 'config.php';
    
    $id = $_POST['id'];
    $name = $_POST['name'];
    $phone = $_POST['phone'];
    $address = $_POST['address'];
    
    $db->query("UPDATE users SET name = '" . $name . "', phone = '" . $phone ."', address = '" . $address . "' WHERE id = " . $id);
    

    File for deleting data in the db ajaxDelete.php

    <?php
    include 'config.php';
    
    $id = $_POST['id'];
    $db->query("DELETE FROM users WHERE id = ". $id);`print("code sample");`
    

    Database name: crud; Table name: users ; column name: id, name, phone, address

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: