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á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á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().
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é.
Đâ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();
}[ '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