Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Ajax-Jquery-Javascript > Facebook Style Tag Friend với Jquery, Ajax và PHP
Facebook Style Tag Friend với Jquery, Ajax và PHP
Nguyễn Trung Hiếu
Share Code Web Company 2012

Facebook Style Tag Friend với Jquery, Ajax và PHP

Bài viết sau sẽ hướng dẫn các bạn thực hiện làm việc mention như Tag friend của facebook. Bài viết sử dụng Jquery, Ajax và PHP. Với thủ thuật này, các bạn ứng dụng rất nhiều vào hệ thống project thêm phong phú.

facebook style tag friend with jquery ajax and php

Thiết kế Database

Trước hết chúng ta sẽ tạo một database để lưu trữ dữ liệu về người dùng bao gồm Họ tên, thành phố và ảnh đại diện.

Thiết kế khung HTML

Tiếp theo là thiết kế 1 trang html cho phép user nhập và hiển thị dữ liệu. Đoạn code trong file html bao gồm các đoạn mã jquery và Ajax. Các bạn có thể xem lại bài viếthướng dẫn lấy dữ liệu ra Repeater sử dụng Jquery và Ajax.

Đầu tiên là jquery thực hiện việc xác định ký tự @ để thực hiện việc mention, cứ sau mỗi ký tự @, hệ thống sẽ xử lý dữ liệu trong database để hiển thị ra. Sau đó là các hiệu ứng jquery dành cho việc hiển thị. Và các đoạn ajax gọi file boxsearch.php. File này sẽ xử lý dữ liệu do user nhập vào, sau đó tìm kiếm trong cơ sở dữ liệu, và hiển thị chúng ra.

tập tin Boxsearch.php

Tập tin này bao gồm include config.php và đoạn SQL query lấy dữ liệu từ Database sau đó hiển thị dữ liệu

Cuối cùng là CSS

Một vài dòng CSS đơn giản. Nếu bạn thích cầu kỳ thì có thể tham khảo loạt bài viết về style css tại đây

Download code Facebook Tag

Download Code

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 6.212 hits
%d bloggers like this: