Satu halaman mentah ajax php mysql

Hari ini, Kami ingin berbagi dengan Anda Tutorial Contoh PHP Jquery Ajax CRUD Dari Awal. Dalam posting ini kami akan menunjukkan kepada Anda Operasi Jquery Ajax CRUD di PHP, dengar untuk PHP MySQL CRUD Operations menggunakan jQuery dan Bootstrap kami akan memberi Anda demo dan contoh untuk diterapkan. Dalam posting ini, kita akan belajar tentang contoh tutorial Simple PHP Jquery Ajax CRUD(insert update delete) dengan sebuah contoh

PHP Jquery Ajax CRUD Contoh Tutorial Dari Awal

Isi

Berikut Tutorial Sederhana Tentang PHP Jquery Ajax CRUD Contoh Tutorial Dari Awal Informasi Lengkap Beserta Contoh dan Source Code

Karena saya akan membahas Posting ini dengan contoh Kerja langsung untuk mengembangkan Operasi CRUD menggunakan PHP/MySQLi dan AJAX/jQuery, jadi beberapa file utama dan struktur Direktori untuk contoh ini adalah sebagai berikut di bawah ini

• indeks. php
• ambilMemberData. php
• membuat. php
• sunting. php
• memperbarui. php
• menghapus. php
• js/member-ajax. js

Langkah 1. Membuat Database dan Tabel Mysql

Kueri Tabel Item

CREATE TABLE IF NOT EXISTS `members` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `membername` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `member_info` text COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=63 ;

Langkah 1. 1 membuat konfigurasi basis data

api/config_database. php

<?php
//CRUD Operation using PHP/MySQLi and AJAX/jQuery
    $hostName = "localhost";
    $username = "root";
    $password = "root";
    $dbname = "atmiya25";
    $mysqli = new mysqli($hostName, $username, $password, $dbname);
?>

Langkah 2. Buat Halaman Indeks antarmuka HTML

indeks. php

Di sinilah saya akan membuat formulir HTML sederhana dan kode sumber sisi server PHP untuk aplikasi web kita. Untuk membuat formulir, cukup salin semua kode sumber dan tuliskan ke editor teks Anda seperti Notepad ++, lalu simpan file itu sebagai indeks. php

Oke, bagaimana Anda melakukannya. ?

# include this file at the very top of your script
require_once('preheader.php');

# the code for the class
include ('ajaxCRUD.class.php');

# this one line of code is how you implement the class
$tblCustomer = new ajaxCRUD("Customer",
                             "tblCustomer", "pkCustomerID");

# don't show the primary key in the table
$tblCustomer->omitPrimaryKey();

# my db fields all have prefixes;
# display headers as reasonable titles
$tblCustomer->displayAs("fldFName", "First");
$tblCustomer->displayAs("fldLName", "Last");
$tblCustomer->displayAs("fldPaysBy", "Pays By");
$tblCustomer->displayAs("fldPhone", "Phone");
$tblCustomer->displayAs("fldZip", "Zip");

# define allowable fields for my dropdown fields
# (this can also be done for a pk/fk relationship)
$values = array("Cash", "Credit Card", "Paypal");
$tblCustomer->defineAllowableValues("fldPaysBy", $values);

# add the filter box (above the table)
$tblCustomer->addAjaxFilterBox("fldFName");

# add validation to certain fields (via jquery in validation.js)
$tblCustomer->modifyFieldWithClass("fldPhone", "phone");
$tblCustomer->modifyFieldWithClass("fldZip", "zip");

# actually show to the table
$tblCustomer->showTable();

Ini adalah aplikasi CRUD satu halaman penuh (seperti yang menjadi perhatian halaman depan) dengan ajax no page referesh no redirection semuanya realtime

Rekatkan folder PHP Ajax di htdocs buat database bernama ajax dan impor file cars.sql untuk basis data

Buka http. //localhost/PHP%20Ajax/

Saya belum Mengikuti pendekatan Berorientasi Objek atau praktik yang baik dalam aplikasi ini Misalnya saya telah membuat koneksi pada setiap file PHP alih-alih membuatnya dalam file terpisah Saya telah menggunakan HTML yang sama id untuk beberapa elemen. Saya belum membuat fungsi untuk menampilkan data secara realtime sebagai gantinya saya menyalin dan menempelkan kode setiap kali saya perlu merender data dari data Base

Tujuan dari aplikasi ini hanya untuk menunjukkan kepada Anda kekuatan ajax meskipun Anda dapat menerapkan aplikasi ini dengan cara yang jauh lebih baik tetapi konsep dasar ajax adalah sama

Pada postingan kali ini kami akan memberikan informasi tentang Operasi Jquery Ajax CRUD di PHP. Dengar kami akan memberi Anda detail tentang Operasi Jquery Ajax CRUD di PHP Dan cara menggunakannya juga memberi Anda demo untuk itu jika diperlukan

Halo kawan-kawan,

Dalam tutorial ini, saya ingin menunjukkan cara membuat operasi tambah edit hapus dan pagination menggunakan jquery ajax di php. Anda hanya perlu mengikuti 4 langkah untuk membuat operasi php crud menggunakan ajax/jquery dengan bootstrap. Saya juga menambahkan validasi jquery menggunakan plugin validatorjs

Dalam posting ini, saya juga membuat pagination, notifikasi dan juga validasi dalam operasi kasar. Ketika Anda akan menambahkan item baru, maka tampilkan notifikasi "item berhasil dibuat". Jadi cukup ikuti beberapa langkah yang tercantum dan Anda akan mendapatkan aplikasi kasar seperti tangkapan layar di bawah ini

Ikhtisar Konten

Anda dapat mengimplementasikan aplikasi kasar dari awal, jadi jangan khawatir jika Anda dapat mengimplementasikan melalui langkah sederhana di bawah ini. Setelah berhasil membuat contoh, Anda akan menemukan tata letak seperti di bawah ini

Pratinjau

Langkah 1. Membuat Konfigurasi Database dan Tabel

pertama-tama, kita harus membuat database dan tabel item. jadi mari kita buat database saya membuat database "h_blog" dan tabel "item" di dalam database itu. sehingga Anda dapat membuat database sesuai keinginan tetapi Anda harus membuat tabel "item" jika Anda melakukannya dari awal. jadi buat tabel "item" menggunakan kueri mysql berikut

Kueri Tabel Item

CREATE TABLE IF NOT EXISTS 'items' (
  'id' int(10) unsigned NOT NULL AUTO_INCREMENT,
  'title' varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  'description' text COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY ('id')
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=63 ;

Oke, mari kita lanjutkan dengan cara ini, kita melakukannya dari awal jadi kita perlu membuat file konfigurasi database dengan cara itu kita dapat menggunakan file itu di banyak file lainnya. jadi mari buat direktori api dan buat db_config. php di direktori api dan masukkan kode di bawah ini.

api/db_config. php

<?php
    $hostName = "localhost";
    $username = "root";
    $password = "root";
    $dbname = "blog2";
    $mysqli = new mysqli($hostName, $username, $password, $dbname);
?>

Dalam file di atas pastikan untuk memeriksa konfigurasi database Anda karena bisa jadi masalah Anda temukan di suatu tempat. begitulah cara saya memberi tahu Anda memeriksanya dua kali. Itu hanya untuk informasi baik Anda

Langkah 2. Buat Halaman Indeks

Oke, sekarang kita juga perlu membuat index. php di direktori root kita. Dalam file ini saya menambahkan variabel "url" di js untuk URL root situs. Anda juga dapat memperbarui dengan URL situs Anda. jadi mari kita buat index. php dan letakkan konten di bawah dalam file itu

indeks. php

<!DOCTYPE html>
<html>
<head>
    <title>PHP Jquery Ajax CRUD Example</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.3.1/jquery.twbsPagination.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">

    <script type="text/javascript">
        var url = "http://localhost:8000/";
    </script>

    <script src="/js/item-ajax.js"></script>
</head>
<body>

    <div >
        <div >
            <div >                    
                <div >
                    <h2>PHP Jquery Ajax CRUD Example</h2>
                </div>
                <div >
                <button type="button"  data-toggle="modal" data-target="#create-item">
                      Create Item
                </button>
                </div>
            </div>
        </div>

        <table >
            <thead>
                <tr>
                <th>Title</th>
                <th>Description</th>



 <th width="200px">Action</th>
 </tr>
 </thead>
 <tbody>
 </tbody>
 </table>

 <ul id="pagination" ></ul>

 <!-- Create Item Modal -->
 <div id="create-item" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div role="document">
 <div >
 <div >
 <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
 <h4 id="myModalLabel">Create Item</h4>
 </div>

 <div >
 <form data-toggle="validator" action="api/create.php" method="POST">

 <div >
 <label for="title">Title:</label>
 <input type="text" name="title" data-error="Please enter title." required />
 <div ></div>
 </div>

 <div >
 <label for="title">Description:</label>
 <textarea name="description" data-error="Please enter description." required></textarea>
 <div ></div>
 </div>

 <div >
 <button type="submit" >Submit</button>
 </div>

 </form>

 </div>
 </div>

 </div>
 </div>

 <!-- Edit Item Modal -->
 <div id="edit-item" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div role="document">
 <div >
 <div >
 <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
 <h4 id="myModalLabel">Edit Item</h4>
 </div>

 <div >
 <form data-toggle="validator" action="api/update.php" method="put">
 <input type="hidden" name="id" >

 <div >
 <label for="title">Title:</label>
 <input type="text" name="title" data-error="Please enter title." required />
 <div ></div>
 </div>

 <div >
 <label for="title">Description:</label>
 <textarea name="description" data-error="Please enter description." required></textarea>
 <div ></div>
 </div>

 <div >
 <button type="submit" >Submit</button>
 </div>

 </form>

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

 </div>
</body>
</html>

Langkah 3. Buat File JS CRUD

Pada langkah ini kita akan membuat file jquery dan menulis kode permintaan ajax di atasnya. Jadi pertama-tama buat folder js pada direktori root Anda dan kemudian buat item-ajax. file js di atasnya.

js/item-ajax. js

$( document ).ready(function() {

var page = 1;
var current_page = 1;
var total_page = 0;
var is_ajax_fire = 0;

manageData();

/* manage data list */
function manageData() {
    $.ajax({
        dataType: 'json',
        url: url+'api/getData.php',
        data: {page:page}
    }).done(function(data){
        total_page = Math.ceil(data.total/10);
        current_page = page;

        $('#pagination').twbsPagination({
            totalPages: total_page,
            visiblePages: current_page,
            onPageClick: function (event, pageL) {
                page = pageL;
                if(is_ajax_fire != 0){
                  getPageData();
                }
            }
        });

        manageRow(data.data);
        is_ajax_fire = 1;

    });

}

/* Get Page Data*/
function getPageData() {
    $.ajax({
        dataType: 'json',
        url: url+'api/getData.php',
        data: {page:page}
    }).done(function(data){
        manageRow(data.data);
    });
}

/* Add new Item table row */
function manageRow(data) {
    var    rows = '';
    $.each( data, function( key, value ) {
          rows = rows + '<tr>';
          rows = rows + '<td>'+value.title+'</td>';
          rows = rows + '<td>'+value.description+'</td>';
          rows = rows + '<td data-id="'+value.id+'">';
        rows = rows + '<button data-toggle="modal" data-target="#edit-item" >Edit</button> ';
        rows = rows + '<button >Delete</button>';
        rows = rows + '</td>';
          rows = rows + '</tr>';
    });

    $("tbody").html(rows);
}

/* Create new Item */
$(".crud-submit").click(function(e){
    e.preventDefault();
    var form_action = $("#create-item").find("form").attr("action");
    var title = $("#create-item").find("input[name='title']").val();
    var description = $("#create-item").find("textarea[name='description']").val();

    if(title != '' && description != ''){
        $.ajax({
            dataType: 'json',
            type:'POST',
            url: url + form_action,
            data:{title:title, description:description}
        }).done(function(data){
            $("#create-item").find("input[name='title']").val('');
            $("#create-item").find("textarea[name='description']").val('');



            getPageData();
            $(".modal").modal('hide');
            toastr.success('Item Created Successfully.', 'Success Alert', {timeOut: 5000});
        });
    }else{
        alert('You are missing title or description.')
    }

});

/* Remove Item */
$("body").on("click",".remove-item",function(){
    var id = $(this).parent("td").data('id');
    var c_obj = $(this).parents("tr");

    $.ajax({
        dataType: 'json',
        type:'POST',
        url: url + 'api/delete.php',
        data:{id:id}
    }).done(function(data){
        c_obj.remove();
        toastr.success('Item Deleted Successfully.', 'Success Alert', {timeOut: 5000});
        getPageData();
    });

});

/* Edit Item */
$("body").on("click",".edit-item",function(){

    var id = $(this).parent("td").data('id');
    var title = $(this).parent("td").prev("td").prev("td").text();
    var description = $(this).parent("td").prev("td").text();

    $("#edit-item").find("input[name='title']").val(title);
    $("#edit-item").find("textarea[name='description']").val(description);
    $("#edit-item").find(".edit-id").val(id);

});

/* Updated new Item */
$(".crud-submit-edit").click(function(e){

    e.preventDefault();
    var form_action = $("#edit-item").find("form").attr("action");
    var title = $("#edit-item").find("input[name='title']").val();

    var description = $("#edit-item").find("textarea[name='description']").val();
    var id = $("#edit-item").find(".edit-id").val();

    if(title != '' && description != ''){
        $.ajax({
            dataType: 'json',
            type:'POST',
            url: url + form_action,
            data:{title:title, description:description,id:id}
        }).done(function(data){
            getPageData();
            $(".modal").modal('hide');
            toastr.success('Item Updated Successfully.', 'Success Alert', {timeOut: 5000});
        });
    }else{
        alert('You are missing title or description.')
    }

});
});

Langkah 4. Buat File AJAX

Pada langkah ini kita perlu membuat file api untuk mendapatkan Data item, Menambahkan Data item, memperbarui Data item, dan menghapus Data item. Jadi mari kita buat file api satu per satu

api/getData. php

<?php
require 'db_config.php';

$num_rec_per_page = 5;

if (isset($_GET["page"])) { $page  = $_GET["page"]; } else { $page=1; };

$start_from = ($page-1) * $num_rec_per_page;

$sqlTotal = "SELECT * FROM items";
$sql = "SELECT * FROM items Order By id desc LIMIT $start_from, $num_rec_per_page"; 

$result = $mysqli->query($sql);




  while($row = $result->fetch_assoc()){

     $json[] = $row;

  }

  $data['data'] = $json;

$result =  mysqli_query($mysqli,$sqlTotal);

$data['total'] = mysqli_num_rows($result);

echo json_encode($data);

?>

api/buat. php

<?php

require 'db_config.php';

  $post = $_POST;

  $sql = "INSERT INTO items (title,description) 

    VALUES ('".$post['title']."','".$post['description']."')";

  $result = $mysqli->query($sql);

  $sql = "SELECT * FROM items Order by id desc LIMIT 1"; 

  $result = $mysqli->query($sql);

  $data = $result->fetch_assoc();

echo json_encode($data);

?>

api/pembaruan. php

<?php

  require 'db_config.php';

  $id  = $_POST["id"];
  $post = $_POST;

  $sql = "UPDATE items SET title = '".$post['title']."'
    ,description = '".$post['description']."' 
    WHERE id = '".$id."'";

  $result = $mysqli->query($sql);

  $sql = "SELECT * FROM items WHERE id = '".$id."'"; 

  $result = $mysqli->query($sql);

  $data = $result->fetch_assoc();

  echo json_encode($data);

?>

api/hapus. php

<?php

 require 'db_config.php';

 $id  = $_POST["id"];

 $sql = "DELETE FROM items WHERE id = '".$id."'";

 $result = $mysqli->query($sql);

 echo json_encode([$id]);

?>

Ok sekarang kita siap menjalankan contoh ini dengan mengikuti perintah

php -S localhost:8000

Periksa URL Browser seperti di bawah ini

Lihat juga. Operasi CRUD menggunakan PHP & Mongodb

http://localhost:8000

Saya harap ini dapat membantu Anda…

Semoga kode dan postingan ini akan membantu Anda untuk mengimplementasikan Jquery Ajax CRUD Operations di PHP. jika Anda memerlukan bantuan atau umpan balik, berikan di bagian komentar atau Anda memiliki ide bagus tentang posting ini, Anda dapat memberikannya di bagian komentar. Komentar Anda akan membantu kami untuk membantu Anda lebih banyak dan meningkatkan kami. kami akan memberi Anda jenis posting yang lebih menarik di fitur ini juga,

Bagaimana cara membuat CRUD sederhana di PHP dan MySQL?

Bagaimana cara CRUD di PHP menggunakan AJAX?

Bisakah AJAX digunakan dengan MySQL?

Apakah baik menggunakan AJAX dengan PHP?