TẠO BẢNG DATABASE VÀ SUBMIT FORM BẰNG AJAX TRONG WORDPRESS

TẠO BẢNG DATABASE VÀ SUBMIT FORM BẰNG AJAX TRONG WORDPRESS

WordPress là một công cụ giúp bạn làm một trang web, blog hoặc tin tức cho riêng bạn. Và đây là một trong những CMS tốt nhất bạn có thể chọn sử dụng để tạo trang web cho riêng mình.
Tuy nhiên vì một số lý do nào đó mà bạn muốn custom lại database để tiện cho việc lưu, xuất dữ liệu của bạn thì trong bài này mình sẽ hướng dẫn các bạn tự tạo bảng mới trong database, sau đó sử dụng Ajax để submit form gửi dữ liệu lên database mà không cần load lại trang, rất tiện cho người dùng.
Ví dụ trong bài này mình có một form contact như sau:

Nhìn qua chúng ta sẽ có các field Name, Email, Phone, Company, Message và một field Datetime để lưu vào database.
Sẽ có 2 cách để các bạn tạo một bảng mới trong database.

Cách 1: Tạo thủ công

Các bạn vào phpMyAdmin để tạo một bảng mới database cho trang wordpress của bạn

Ở đây mình đã tạo một bảng là wp_contact với các field như trong hình trên.
Đối với các bạn chưa biết thì có thể tham khảo bài viết này để thiết lập cũng như tạo mới database.

Cách 2: Thêm code vào file function.php

Các bạn mở file functions.php trong themes của các bạn lên và chèn đoạn code này xuống dưới cùng. File này nằm trong đường dẫn /wp-content/themes/thư-mục-theme/functions.php

function creatDatabaseContact(){
    global $wpdb;
    $charsetCollate = $wpdb->get_charset_collate();
    $contactTable = $wpdb->prefix . 'contact';
    $createContactTable = "
        CREATE TABLE IF NOT EXISTS `{$contactTable}` (
            `id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT,
            `name` varchar(100) NOT NULL,
            `email` varchar(100) NOT NULL,
            `phone` varchar(30) NOT NULL,
            `company` varchar(255) NOT NULL,
            `message` longtext NULL,
            `datetime` timestamp NOT NULL,
            PRIMARY KEY (`id`)
        ) {$charsetCollate};";
    require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
    dbDelta( $createContactTable );
}

add_action('after_switch_theme', 'creatDatabaseContact');

Mình tạo mới function có tên creatDatabaseContact().

  • global $wpdb: đây là biến dùng để tương tác với csdl (biến này do wordpress quy định nên mình chỉ cần lấy nó ra xài thôi).
  • get_charset_collate(): mình gán vào biến $charsetCollate để tạo bảng mới cùng với charset của database. Còn chartset database là gì thì các bạn có thể đọc thêm ở đây https://dev.mysql.com/doc/refman/8.0/en/charset-database.html.
  • $wpdb->prefix: lấy prefix của database, mặc định là wp_ ghép với contact thì sẽ ra được bảng wp_contact sau đó gán vào biến $contactTable.
  • $createContactTable: bên trong là các câu lệnh SQL để tạo bảng wp_contact với id là số tự tăng.
  • require_once(…): include thư viện của wordpress để giúp ta tạo database.
  • dbDelta($createContactTable): Sửa đổi cơ sở dữ liệu dựa trên các câu lệnh SQL được chỉ định (Câu lệnh SQL ở đây chính là $createContactTable).
  • add_action(‘after_switch_theme’, ‘creatDatabaseContact’): tạo action sau khi active theme trong trang admin thì sẽ tạo bảng wp_contact vào database. Có thể hiểu là sau khi các bạn active theme trong phần Giao diện của trang Admin thì action này sẽ kiểm tra xem trong database đã có bảng wp_contact hay chưa. Nếu chưa thì thêm bảng wp_contact vào database thông qua câu SQL CREATE TABLE IF NOT EXISTS.

Sau khi xong thì các bạn vào trang Admin -> Giao diện -> active theme mà các bạn đã sửa và kiểm tra lại xem trong database đã có bảng wp_contact xuất hiện chưa nha.

Lưu ý: Chỉ làm theo 1 cách (Cách 1 hoặc cách 2) để tránh bị xung đột bảng trong database. Nếu bạn nào đã làm theo cách 1 mà muốn làm cách 2 thì sau khi xong cách 1 nhớ xoá bảng wp_contact đi trước khi làm cách 2 nhé.

Form Contact

Đây là code form Contact, các bạn mở file index.php và thêm vào chỗ các bạn muốn:

<form action="" method="POST" id="contactForm1" class="contact-us-form" novalidate="novalidate">
    <h6>Reach us quickly</h6>
    <div class="row">
        <div class="col-sm-6 col-12">
            <div class="form-group">
                <input type="text" class="form-control" name="contact_name" placeholder="Enter name" required="required">
            </div>
        </div>
        <div class="col-sm-6 col-12">
            <div class="form-group">
                <input type="email" class="form-control" name="contact_email" placeholder="Enter email" required="required">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-12">
            <div class="form-group">
                <input type="text" name="contact_phone" value="" class="form-control" id="phone" placeholder="Your Phone">
            </div>
        </div>
        <div class="col-sm-6 col-xs-12">
            <div class="form-group">
                <input type="text" name="contact_company" value="" size="40" class="form-control" id="company" placeholder="Your Company">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="form-group">
                <textarea name="contact_message" id="message" class="form-control" rows="7" cols="25" placeholder="Message"></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 mt-20">
            <button type="submit" class="btn softo-solid-btn float-right" id="btnContactUs">
                Send Message
            </button>
        </div>
    </div>

Sau đó các bạn mở file footer.php lên và thêm đoạn code sau lên trên đoạn <?php wp_footer(); ?>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
    $('#contactForm1').submit(function(event) {
        event.preventDefault();
        let app = $(this);
        let contact_name = $('input[name="contact_name"]').val();
        let contact_phone = $('input[name="contact_phone"]').val();
        let contact_email = $('input[name="contact_email"]').val();
        let contact_company = $('textarea[name="contact_company"]').val();
        let contact_message = $('input[name="contact_message"]').val();
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '<?php echo admin_url('admin-ajax.php');?>',
            data: {
                action: 'post_contact',
                'name': contact_name,
                'phone': contact_phone,
                'email': contact_email,
                'company': contact_company,
                'message': contact_message
            },
            beforeSend: function() {
                $('#btnContactUs').text('Sending...');
                $('#btnContactUs').attr('disabled', !0)
            },
            success: function(data) {
                $('#btnContactUs').text('Send Message');
                $('#btnContactUs').attr('disabled', !1);
                alert(data.message);
                app.trigger('reset');
            },
            error: function(error) {
                console.log(error)
            }
        })
    });
</script>

Dưới đây là đoạn code xử lý dữ liệu phía backend, các bạn chèn đoạn code này xuống dưới cùng của file functions.php

add_action('wp_ajax_post_contact', 'post_contact');
add_action('wp_ajax_nopriv_post_contact', 'post_contact');
function post_contact() {
    global $wpdb;

    $data = [
        'name' => sanitize_text_field($_POST['name']),
        'phone' => sanitize_text_field($_POST['phone']),
        'email' => sanitize_text_field($_POST['email']),
        'company' => sanitize_text_field($_POST['company']),
        'message' => sanitize_text_field($_POST['message'])
    ];

    $table = $wpdb->prefix . 'contact';
    $contact = $wpdb->insert($table, $data);

    if ($contact) {
        echo json_encode(array('title'=>'Success', 'message'=>__('The message has been sent! Thank you.')));
    } else {
        echo json_encode(array('title'=>'Fail', 'message'=>__('The message has not been sent yet.')));
    }
    wp_die();
}

  • add_action(‘wp_ajax_[action_name]’, functionName): wp_ajax không phải là hook hay callback, thay vào đó nó chỉ là tiền tố của hook hoặc callback.
  • add_action(‘wp_ajax_nopriv_[action_name]’, functionName): tương tự như trên.
  • global $wpdb: Đây là biến dùng để tương tác với database mặc định của WordPress, mình chỉ cần lấy ra xài thôi.
  • Mảng $data: mảng này sẽ lấy dữ liệu từ Ajax mà mình đã tạo ở trên kia. Các field ‘name’, ‘phone’… tương ứng với các field trong database nhé. Còn $_POST[‘name’], $_POST[‘phone’]… tương ứng với ‘name’, ‘phone’,… trong phần data của Ajax.
  • $table: lấy prefix của database, mặc định là wp_ ghép với contact thì sẽ ra được bảng wp_contact sau đó gán vào biến $table.
  • $contact: sử dụng hàm insert() của WordPress để thêm mới 1 dòng $data vào trong bảng $table.
  • Nếu như add thành công thì mình sẽ xuất ra mảng json:

[ 'title': 'Success','message': 'The message has been sent! Thank you.' ]

và sau đó gọi nó ra trong Ajax thông qua hàm alert() của function success;

Sau đó các bạn mở trang chủ và gửi form thôi.

Và đây là dữ liệu sau khi submit form trong database

Ngoài việc alert ra thông báo thì các bạn có thể làm 1 popup để thông báo như sau chẳng hạn

Vây là hôm nay mình đã hướng dẫn các bạn tự tạo bảng mới trong database và submit form bằng Ajax để gửi dữ liệu lên database mà không cần load lại trang, thuận tiện cho người dùng hơn.
Cảm ơn các bạn đã đọc bài viết và nhớ đón xem các series khác hay ho hơn nhé.

Nguyễn Linh

You can share this post!

TÌM HIỂU VỀ TAILWIND CSS FRAMEWORK

SINH VIÊN MỚI RA TRƯỜNG NÊN CHỌN LÀM VIỆC TẠI CÔNG TY LỚN HAY NHỎ?

Leave a Reply

Your email address will not be published. Required fields are marked *