Google Custom Search Engine

Google cung cấp công cụ giúp chúng ta tạo và nhúng kết quả tìm kiếm vào website một cách dễ dàng đó là  Google Custom Search Engine (CSE). Sử dụng công cụ này bạn sẽ không phải viết Form tìm kiếm trên trang web của bạn và cũng sẽ nhận được nhiều lợi ích từ google search

Có một điều khi bạn sử dụng Google Custom Search Engine là bạn không chạy thử được khi bạn đang xây dựng website vì dữ liệu trả về phải có trong cơ sở dữ liệu của google tức là web của bạn đã search được trên google và những bài mới cập nhật chưa được google cập nhật cũng sẽ không xuất hiện trong kết quả tìm kiếm.
Bài viết này tôi sẽ hướng dẫn bạn các bước để thực hiện sử dụng CSE của google để tạo chức năng tìm kiếm trên website của bạn.
Bạn cần đảm bảo là đã có một tài khoản gmail vì chúng ta sẽ sử dụng tài khoản gmail để đăng ký. Nếu chưa có bạn cần tạo cho mình 1 tài khoản gmail. Bạn truy cập http://www.google.com/cse/ Hoặc nếu thích dùng tiếng việt bạn truy cập http://www.google.com.vn/cse/ ở đât tôi sẽ dùng tiếng việt mô tả cho dễ. Tiếp theo chọn Tạo Công cụ Tìm kiếm Tuỳ chỉnh (Create a Custom Search Engine). Bạn được chuyển đến trang tiếp theo bạn đăng nhập với tài khoản gmail của bạn.
Bước tiếp theo bạn nhập các thông tin trong phần mô tả công cụ tìm kiếm của bạn. Ví dụ
- Tên (Tên công cụ tìm kiếm:): hmweb.com.vn Chia sẻ là niềm vui
- Mô tả: OTDH, Lập trình web với asp.net, C#, SQL server, jquery
- Ngôn ngữ: Tiếng Việt
- Trang web tìm kiếm: bạn có thể cấu hình để CSE tìm kiếm cụ thể ví dụ nếu bạn muốn chỉ tìm các trang aspx thì bạn điền nội dung: http://tenweb.com/*.aspx.  Nhưng tốt nhât ta nên chọn tìm kiếm tất cả các trang ta sẽ dùng: http://tenweb.com/*
- Phiên bạn: Bạn chọn phiên bản miễn phí
Nhấn Next. Tại đây bạn có thể chọn các tùy chọn cho kết quả tìm kiếm. Ta cứ chọn mặc định vì sau đó ta có thể thay đổi được. Google sẽ cung cấp cho bạn một id chính là id cse của bạn
Nhấn Next đến bước này bạn đã hoàn thành đăng ký. Google sẽ gửi mail cho bạn và cung cấp cho bạn đoạn mã html để nhúng vào trang web của bạn.
Giờ bạn chọn liên kết Giao diện để tiếp tục các thay đổi của bạn. Bạn thay đổi các thiết lập nếu bạn muốn. Ở hmweb tôi chọn tùy chọn lưu trữ là iframe: Cung cấp tuỳ chỉnh giới hạn và yêu cầu trang riêng biệt về các kết quả trên trang web của bạn.
Các tùy chọn khác bạn có thể tìm hiểu thêm. Bạn nhấn vào liên kết nhận mã để lấy code html đặt vào trang nơi muốn hiển thị form tìm kiếm. Chúng ta sẽ nhận được 2 đoạn code html. một dùng là Form tìm kiếm cái còn lại là code để hiển thị kết quả tìm kiếm. Copy code html form tìm kiếm vào nơi bạn muốn hiển thị

  


    006309227296184785814:f9bcc86z5hm" />
    
    
    
    
  

Bạn chú ý id của bạn sẽ khác. Bạn tạo trang hiển thị kết quả search_result.aspx. Và copy đoạn code hiển thị kết quả tìm kiếm

Trong Form trên bạn chú ý đến thuộc tính action="" của thẻ form chỉ định đến trang kết quả search_result.aspx.  Khi ta nhập từ khóa tại ô tìm kiếm thì sẽ postback đến trang search_result.aspx với url là:

search_result.aspx?cx=006309227296184785814:f9bcc86z5hm&cof=FORID%3A11&ie=UTF-8&q=Từ Khóa&sa=Search

Như vậy nếu bạn truy cập trực tiếp trang search_result với url với Từ Khóa cần tìm. Vậy ta sẽ tìm cách cải tiến form search.
Ta sẽ sửa lại để form tìm kiếm không còn phụ thuộc vào thuộc tính action nữa và code tại nơi muốn hiển thị textbox tìm kiếm sẽ như sau:

Giờ ta sẽ viết các hàm cho sự kiện onKeyPress và onclick như sau:

function URLEncode (clearString) {
  var output = '';
  var x = 0;
  clearString = clearString.toString();
  var regex = /(^[a-zA-Z0-9_.]*)/;
  while (x < clearString.length) {
    var match = regex.exec(clearString.substr(x));
    if (match != null && match.length > 1 && match[1] != '') {
     output += match[1];
      x += match[1].length;
    } else {
      if (clearString[x] == ' ')
        output += '+';
      else {
        var charCode = clearString.charCodeAt(x);
        var hexVal = charCode.toString(16);
        output += '%' + ( hexVal.length < 2 ? '0' : '' ) + hexVal.toUpperCase();
      }
      x++;
    }
  }
  return output;
}

function SubmitOnEnter(myfield, e)
{
 var keycode;
 if (window.event)
  keycode = window.event.keyCode;
 else if (e)
  keycode = e.which;
 else
  return true;
 if (keycode == 13)
 {
  SearchSite();
  return false;
 }
 else
  return true;
}
function SearchSite()
{
    document.location.href='search_result.aspx?cx=006309227296184785814:f9bcc86z5hm&cof=FORID%3A11&ie=UTF-8&q=' + URLEncode(document.getElementById('q').value) + '&sa=Search';
}

http://hmweb.com.vn