Tìm hiểu ajax và tìm kiếm đơn giản trong Codeigniter

Bài đăng này đã không được cập nhật trong 8 năm

Ajax trong Codeigniter

Ajax là gì ?

Chắc hẳn rất nhiều người đã dùng và biết ajax hoạt động như thế nào, nhưng bài này dành cho người mới lập trình. Ajax là bộ máy trung gian, xử lý tương tác dữ liệu giữa client và server, với dữ liệu trả về từ server có thể là json, xml, text,….Ajax là cách mà chúng ta xử lý dữ liệu tại một số phần nhỏ trên ứng dụng web mà không cần phải load lại toàn bộ trang web

Sử dụng Ajax trong Codeigniter (Ajax jQuery)

Để các bạn dễ hình dung cách sử dụng ajax trong php, mình sẽ lấy ví dụ là tạo form đăng ký bài viết đơn giản

Tạo file xử lý client ajax.php
- Đầu tiên, các bạn tạo 1 file đặt tên là create.php (có thể đặt tên file tùy ý). Trong file này thì có các trường như title, content, category, sub category,image như hình dưới đây.
Công việc tiếp theo của chúng ta đó là khi mà người dùng click vào selectbox chọn category, ta sẽ tiến hành gửi thông tin categoryId tới server để xử lý. Tạo 1file category.js như sau

 $(document).ready(function(){
  $('#category').change(function() {
    var category_id = $("#category").val();
    $.ajax({
      url: 'get_category',  // gọi đến file server articles.php để xử lý
      data: {category_id: category_id}, //lấy toàn thông tin các fields trong form bằng hàm serialize của jquery
      type: 'POST',   // phương thức dữ liệu được truyền đi
      datatype: 'json', // định dạng dữ liệu trả về là json
      success: function(data){ //kết quả trả về từ server nếu gửi thành công
        var option = "";
        $.each($.parseJSON(data),function(key, value){
          option += "<option value='"+value['id']+"'>"+value['title']+"</option>"
        })
        $("#sub_category").html(option);
      }
    });
  });
});

Giải thích : Đoạn mã javascript trên chính là mình đang sử dụng jquery.ajax của jquery. Đoạn code này lấy thông categoryId trong form , và gửi đi xuống file phía dưới server là articles.php để xử lý. Nếu như dữ liệu được gửi thành công, thì trong hàm success sẽ có kết quả trả về được lưu trong tham số response.

Tạo file xử lý phía server
- articles.php

function get_category(){
      $category_id = $this->input->post('category_id');  //lấy category_id từ view
      $this->db->where('category_id', $category_id);    //đưa vào điều kiện tìm kiếm
      $query = $this->db->get('sub_categories');       // lấy ra các subcategory có  category_id như đưa vào
      $result = $query->result();
      echo json_encode($result);      //trả về response dưới dạng json
    }

Code trong file này khá đơn giản, đó là ta sẽ lấy thông tin gửi từ file create.php qua phương thức POST, và tiến hành echo dữ liệu lấy được để kiểm tra xem chúng ta đã lấy được thông tin thành công hay không

Hình ảnh minh họa:
kiểm tra trên trình duyệt ajax có làm việc không.

alt

2 . Tìm kiếm trong Codeigniter

Sau đây tôi sẽ hướng dẫn mọi người xây dựng chức năng tìm kiếm đơn giản nhất, nó chỉ thao tác với database và lọc dữ liệu ở mức độ đơn giản nhất.

Xây dựng form tìm kiếm

ở đây tôi viết trong index.php tạo 1 form tìm kiếm đơn giản

<form name="frm_search" action="articles" method="get">
    <div class="col-lg-6">
      <div class="input-group">
        <input type="text" name="search_text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">Go!</button>
        </span>
      </div><br><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
  </form>

Gồm một input và một nút submit, do chúng ta phải truyền đối số vào url nên chúng ta đặt method của form bằng phương thức GET. Action của Form tôi trỏ đến file hiện, form trên gọi đến action articles(index) của trên controller của articles

Check submit form tìm kiếm

Trước tiên chúng ta cần kiểm tra người dùng có nhấn vào button tìm kiếm hay không? Bắt buộc chúng ta phải thực hiện bước này tại vì khi submit mới cần xử lý truy vấn database để lấy thông tin tìm kiếm. ở đây tôi check params search_text xem có được truyền lên hay không?

if($search_text = $this->input->get('search_text')){
  $temp['data']['articles'] = $this->Marticle->search($search_text);
}else{
  $temp['data']['articles'] = $this->Marticle->list_article($config['per_page'], $start);
}

khi submit url sẽ có dạng như sau: alt

Xử lý tìm kiếm với lệnh Like trong MySql

Model article
- nó sẽ gọi đến hàm search trong model article

  public function search($search_text){
  $this->db->like('title', $search_text);
  $this->db->or_like('content', $search_text);
  $query = $this->db->get('articles');
  return $query->result_array();
}