Xây dựng ứng dụng mạng xã hội cho các trung tâm nuôi dạy trẻ mồ côi tại đà nẵng

ĐẠI HỌC ĐÀ NẴNG TRƢỜNG ĐẠI HỌC SƢ PHẠM KHOA TIN HỌC KHĨA LUẬN TỐT NGHIỆP NGÀNH CỬ NHÂN CƠNG NGHỆ THÔNG TIN ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG MẠNG XÃ HỘI CHO CÁC TRUNG TÂM NUÔI DẠY TRẺ MỒ CƠI TẠI ĐÀ NẴNG GVHD : Th.S NGƠ ĐÌNH THƢỞNG SVTH : NGUYỄN THỊ THÚY PHƢỢNG LỚP : 10CNTT4 ĐÀ NẴNG – 5/2014 LỜI CẢM ƠN Đầu tiên, em xin bày tỏ lòng biết ơn sâu sắc đến quý Thầy Cô Khoa Tin học– Trƣờng Đại Học Sƣ Phạm Đà Nẵng với tri thức tâm huyết để truyền đạt vốn kiến thức quý báu cho chúng em suốt thời gian học tập trƣờng Đặc biệt, em xin chân thành cảm ơn thầy Ngơ Đình Thƣởng, ngƣời thầy ln nhiệt tình hƣớng dẫn em trình thực đề tài tốt nghiệp Em xin chân thành cảm ơn ban lãnh đạo công ty TNHH Tin học & Thƣơng mại AsNet, đặc biệt anh Ngơ Chí Trung, anh Phạm Trần Hữu Thọ tiếp nhận, tạo điều kiện tốt kĩ thuật mơi trƣờng cho nhóm sinh viên chúng em đƣợc thực tập tốt Em xin gởi lời cảm ơn đến anh chị: Thi Nhƣợc Kim, Phan Duy, Nguyễn Trịnh Anh Hậu, Trần Phan Quang Vinh, Nguyễn Thị Thu Trang ln nhiệt tình hỗ trợ hƣớng dẫn em suốt quãng thời gian em học tập công ty Chân thành cảm ơn bạn nhóm thực tập làm việc hỗ trợ em gặp khó khăn tập thể lớp 10CNTT4 sát cánh, chia sẻ kiến thức kinh nghiệm suôt thời gian học tập lớp Lời cảm ơn chân thành sâu sắc, em xin gởi đến gia đình, ln bên cạnh động viên em giai đoạn khó khăn Trong trình thực luận văn tốt nghiệp, em ln cố gắng hồn thành luận văn cách tốt Nhƣng kinh nghiệm nhƣ vốn kiến thức cịn hạn chế nên khơng tránh khỏi thiếu sót thân Rất mong thầy cơ, bạn nhận xét góp ý thêm để em ngày hoàn thiện tốt Em xin chân thành cảm ơn Sinh viên Nguyễn Thị Thúy Phƣợng LỜI CAM ĐOAN Tôi xin cam đoan: Những nội dung báo cáo thực hướng dẫn trực tiếp thầy Thạc sĩ Ngô Đình Thưởng Mọi tham khảo dùng báo cáo trích dẫn rõ ràng tên tác giả, tên cơng trình, thời gian, địa điểm cơng bố Mọi chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, tơi xin chịu hồn tồn trách nhiệm Sinh viên Nguyễn Thị Thúy Phượng MỤC LỤC MỞ ĐẦU 1 Tên đề tài Lý chọn đề tài Mục đích nghiên cứu Đối tƣợng nghiên cứu 4.1 Đối tƣợng nghiên cứu 4.2 Phạm vi nghiên cứu Phƣơng pháp nghiên cứu Ý nghĩa đề tài CHƢƠNG 1: CƠ SỞ LÝ THUYẾT HTML 1.1 HTML CSS 2.1 Khái niệm CSS 2.2 Cú pháp CSS JavaScript 3.1 Khái niệm 3.2 Cú pháp jQuery 4.1 Khái niệm 4.2 Cách áp dụng jQuery vào trang web Twitter Bootstrap 10 5.1 Lý sử dụng Twitter Bootstrap 10 5.2 Sơ lƣợc Twitter Bootstrap 10 5.3 Cách sử dụng 10 Google Maps API 11 Node.js 12 7.1 Tổng quan Node.js 12 7.2 Khái quát Blocking Non-Blocking 13 MySQL 17 CHƢƠNG 2: XÂY DỰNG ỨNG DỤNG 18 Giới thiệu ứng dụng Website xây dựng mạng xã hội cho trung tâm nuôi dạy trẻ mồ côi Đà Nẵng 18 Các chức ứng dụng 19 Triển khai đánh giá 35 KẾT LUẬN 54 Ƣu điểm 54 Hạn chế 54 Hƣớng phát triển 54 TÀI LIỆU THAM KHẢO 55 Sách: 55 Website: 55 DANH MỤC HÌNH ẢNH Hình Các chức ứng dụng 19 Hình Sơ đồ Use Case 20 Hình Biểu đồ phân rã chức 22 Hình Biểu đồ luồng liệu mức khung cảnh 25 Hình Biểu đồ luồng liệu mức đỉnh 25 Hình Biểu đồ luồng liệu mức dƣới đỉnh Chức xem thông tin 26 Hình Biểu đồ luồng liệu mức dƣới đỉnh Chức chỉnh sửa thông tin 26 Hình Biểu đồ luồng liệu mức dƣới đỉnh Chức thêm thơng tin 27 Hình 9: Biểu đồ luồng liệu mức dƣới đỉnh Chức tìm kiếm 27 Hình 10 Biểu đồ luồng liệu mức dƣới đỉnh Chức tạo tài khoản 28 Hình 11 Liên kết thực thể 28 Hình 12 Mơ hình thực thể liên kết E-R 29 Hình 13 Lƣợc đồ quan hệ thực thể 34 Hình 14 Trang chủ gồm có đồ 35 Hình 15 Đăng nhập 45 Hình 16 Đăng kí tài khoản 45 Hình 17 Chỉnh sửa tài khoản 46 Hình 18 Hiển thị danh sách tìm trẻ 46 Hình 19 Đăng kí thơng tin tìm trẻ 47 Hình 20 Danh sách trẻ trung tâm 47 Hình 21 Giới thiệu chung trung tâm 48 Hình 22 Danh sách trẻ trung tâm 49 Hình 23 Danh sách ân nhân, nhà hảo tâm 50 Hình 24 Danh sách học bổng 51 Hình 25 Danh sách văn thơ trẻ 52 Hình 26 Danh sách kiện 53 DANH MỤC BẢNG BIỂU Bảng Mô tả Actor 21 Bảng 2: Mô tả Use Case 21 Bảng Toàn vẹn giá trị bảng nguoithan 30 Bảng Toàn vẹn giá trị bảng vantho 30 Bảng Toàn vẹn giá trị bảng tre 31 Bảng Toàn vẹn giá trị bảng trungtam 31 Bảng Toàn vẹn giá trị bảng sukien 32 Bảng Toàn vẹn giá trị bảng baiviet 32 Bảng Bảng lƣợc đồ quan hệ 33 DANH MỤC CÁC TỪ VIẾT TẮT Tên đầy đủ Từ viết tắt API Application programming Diễn giải nghĩa Giao diện lập trình ứng dụng interface HTML HyperText Markup Language Ngơn ngữ Đánh dấu Siêu văn CSS Cascading Style Sheet Là ngơn ngữ đƣợc dùng để mơ tả cách trình bày tài liệu viết ngôn ngữ HTML XHTML, …và số ngôn ngữ khác OOCSS Object Oriented Cascading Style Hƣớng đối tƣợng CSS Sheet NPM Node Package Manager Trình quản lý Node.js Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngơ Đình Thưởng MỞ ĐẦU Tên đề tài Xây dựng ứng dụng mạng xã hội cho trung tâm nuôi dạy trẻ mồ côi Đà Nẵng Lý chọn đề tài Mạng xã hội, hay gọi mạng xã hội ảo, (tiếng Anh: social network) ngày phổ biến nay, dịch vụ nối kết thành viên sở thích Internet lại với với nhiều mục đích khác khơng phân biệt không gian thời gian Hiện giới có hàng trăm mạng mạng xã hội khác nhau, với MySpace Facebook tiếng thị trƣờng Bắc Mỹ Tây Âu; Orkutvà Hi5 Nam Mỹ; Friendster Châu Á đảo quốc Thái Bình Dƣơng Mạng xã hội khác gặt hái đƣợc thành công đáng kể theo vùng miền nhƣ Bebo Anh Quốc, CyWorld Hàn Quốc, Mixi Nhật Bản Việt Nam xuất nhiều mạng xã hội nhƣ: Zing Me, YuMe mạng xã hội để tìm hỗ trợ hỗ trợ cộng đồng thƣờng nhắm đến nhóm đối tƣợng cụ thể, ví dụ webtretho.com Việt Nam có khoảng 150.000 trẻ em mồ cơi nhƣng có gần 12.000 em đƣợc ni dƣỡng trung tâm bảo trợ xã hội (chiếm tỷ lệ chƣa đến 10%) Cịn nhiều địa phƣơng có số lƣợng trẻ mồ côi đông Nhà nƣớc hầu nhƣ khơng đủ sức thực cơng tác chăm sóc trẻ em mồ côi, nên họ cần phải kêu gọi hảo tâm quan, cá nhân, tổ chức nƣớc hỗ trợ lĩnh vực Để ngƣời biết đến trung tâm nuôi dạy trẻ cách dễ dàng để tài trợ trung tâm nhận nuôi, trao học bổng cho đứa trẻ cần để học tập Vấn đề tài trợ học bổng, tài trợ kinh phí hay giúp đỡ mặt sống ngày phổ biến đƣợc lan rộng nhƣ giúp đỡ sống ngƣời với ngƣời Các bậc cha mẹ muốn nhận nuôi, họ bƣớc đầu khó tìm đƣợc đứa trẻ phù hợp với ý muốn, mặt khác tạo cho trẻ có sống nhƣng để ngƣời dễ dàng tìm đƣợc đối tƣợng phù hợp để tài trợ nhận nuôi vấn đề khó khăn việc tiếp cận giúp đỡ SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngơ Đình Thưởng Chính lý đó, em chọn đề tài tạo website “Xây dựng ứng dụng mạng xã hội cho trung tâm nuôi dạy trẻ mồ côi” mà bƣớc đầu thực trung tâm Đà Nẵng với mục đích hƣớng tới tạo mạng xã hội cho trung tâm mồ cơi tự giới thiệu trung tâm ngƣời biết tài trợ trung tâm cách dễ dàng Mục đích nghiên cứu ● Nghiên cứu tìm hiểu cơng nghệ: ○ HTML5 ○ CSS ○ JavaScript ○ jQuery ○ Twitter Bootstrap ○ Google Maps API ○ Node.js ○ MySQL ● Tìm hiểu thông tin trung tâm nuôi dạy trẻ mồ côi Đà Nẵng ○ Thông tin tổng quan trung tâm nuôi dạy trẻ mồ côi thành phố Đà Nẵng ○ Thông tin hoạt động diễn trung tâm ○ Thông tin số lƣợng trẻ em, sơ yếu lý lịch, tình trạng sức khỏe, bệnh tật trẻ ○ Thông tin tình hình trung tâm, hoạt động tài trợ nhà hảo tâm ○ Bản đồ địa điểm trung tâm thành phố Đà Nẵng ● Phƣơng pháp xây dựng website mạng xã hội cho trung tâm mồ côi Đà Nẵng desktop SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngơ Đình Thưởng $(".form-listDetailChildrenNewsFeedtemplate").html(template2({data_detail: response.result})); } }); }); $('.form-listNewsFeed-template').on('click', '.newsfeed-bene', function(e){ var tentre = data[$(this).data('id')].id_bang; $.ajax({ type: 'POST', url: 'http://localhost:9000/listdetailBenefactorsnewsfeed', data:{ "chitietbaiviet" : tentre }, success: function(response){ data_detail = response.result; var source2 = $(".detail_listNewsFeedChildBenefactors-template").html(); var template2 = Handlebars.compile(source2); $(".form-listDetailBenefactorsNewsFeedtemplate").html(template2({data_detail: response.result})); } }); }); $('.form-listNewsFeed-template').on('click', '.helpevent', function(e){ var tentre = data[$(this).data('id')].id_bang; $.ajax({ type: 'POST', url: 'http://localhost:9000/listdetailEventnewsfeed', SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 41 Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngô Đình Thưởng data:{ "id_sukien" : tentre }, success: function(response){ data_detail = response.result; // console.log(data_detail); var source2 = $(".detail_listNewsFeedChildEvent-template").html(); var template2 = Handlebars.compile(source2); $(".form-listDetailEventNewsFeedtemplate").html(template2({data_detail: response.result})); } }); }); } }); }); main.js var View_newsfeed = require('./view_newsfeed.js'); var View_newsfeedBenefactors = require('./view_newsfeed_benefactors.js'); //function newsfeed app.post('/newsfeed', function(req,res){ var newsfeed = new View_newsfeed(connection); newsfeed.viewListNewsfeed(function(data){ res.setHeader('Access-Control-Allow-Origin',"*"); if(data){ res.send({result: data}); } else{ res.send('error'); } }); SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 42 Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngơ Đình Thưởng }); //end function newsfeed //function newsfeed benefactors app.post('/newsfeedbenefactors', function(req,res){ // console.log("asasa"); var newsfeed = new View_newsfeedBenefactors(connection); newsfeed.viewListNewsfeedBenefactors(function(data){ res.setHeader('Access-Control-Allow-Origin',"*"); if(data){ res.send({result: data}); } else{ res.send('error'); } }); }); view_newsfeed.js module.exports = function View_newsfeed(connection){ this.viewListNewsfeed = function (done) { connection.query("SELECT * FROM (SELECT tentrungtam, id_tre AS id_bang,tentre AS ten,tre.id_trungtam,ngayvao AS thoigian,tre.dang_hinhanh AS hinhanh, 'tre' AS type FROM tre,trungtam WHERE trungtam.id_trungtam=tre.id_trungtam UNION SELECT tentrungtam,id_baiviet AS id_bang, tieudebaiviet AS ten,baiviet.id_trungtam, ngayviet AS thoigian, baiviet.dang_hinhanh AS hinhanh,'baiviet' AS type FROM baiviet,trungtam WHERE trungtam.id_trungtam=baiviet.id_trungtam UNION SELECT tentrungtam,id_sukien AS id_bang, tensukien AS ten, sukien.id_trungtam,ngaytochuc AS thoigian,sukien.dang_hinhanh AS hinhanh,'sukien' AS type FROM sukien,trungtam WHERE trungtam.id_trungtam=sukien.id_trungtam)tbl ORDER BY tbl.thoigian DESC ", function(err, result) { if (err) { SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 43 Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngơ Đình Thưởng console.log(err); } else { done(result); } }); } } view_newsfeed_benefactors.js module.exports = function View_newsfeedBenefactors(connection){ this.viewListNewsfeedBenefactors = function (done) { connection.query("SELECT trungtam.id_trungtam,id_baiviet, baiviet.dang_hinhanh, tentrungtam, tieudebaiviet, noidungbaiviet FROM baiviet, trungtam WHERE trungtam.id_trungtam=baiviet.id_trungtam ORDER BY ngayviet DESC", function(err, result) { if (err) { console.log(err); } else { done(result); } }); } } SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 44 Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngơ Đình Thưởng Hình 15 Đăng nhập Hình 16 Đăng kí tài khoản SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 45 Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngơ Đình Thưởng Hình 17 Chỉnh sửa tài khoản Hình 18 Hiển thị danh sách tìm trẻ SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 46 Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngơ Đình Thưởng Hình 19 Đăng kí thơng tin tìm trẻ Hình 20 Danh sách trẻ trung tâm SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 47 Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngô Đình Thưởng Hình 21 Giới thiệu chung trung tâm SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 48 Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngơ Đình Thưởng Hình 22 Danh sách trẻ trung tâm SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 49 Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngơ Đình Thưởng Hình 23 Danh sách ân nhân, nhà hảo tâm SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 50 Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngơ Đình Thưởng Hình 24 Danh sách học bổng SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 51 Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngơ Đình Thưởng Hình 25 Danh sách văn thơ trẻ SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 52 Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngơ Đình Thưởng Hình 26 Danh sách kiện SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 53 Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngơ Đình Thưởng KẾT LUẬN Sau q trình làm luận văn tốt nghiệp thân em học hỏi đƣợc nhiều kinh nghiệm quý báu kỹ cần thiết, em tự nhận thấy thân có ƣu điểm hạn chế nhƣ sau: Ƣu điểm Học đƣợc nhiều kinh nghiệm công việc làm quen với môi trƣờng làm việc chuyên nghiệp Học đƣợc cách làm web với công nghệ nhƣ HTML5 CSS, Twitter Bootstrap, JavaScript, jQuery, Node.js, MySQL Xây dựng đƣợc demo mạng xã hội thu nhỏ Rút đƣợc nhiều kinh nghiệm quý báu, học đƣợc cách tự lập, tự nghiên cứu, học đƣợc phong cách làm việc mơi trƣờng chun nghiệp có nhìn nhận công việc tƣơng lai Hạn chế Đọc nghiên cứu tài liệu chậm Demo chƣa thực đƣợc hết chức mong muốn đề tài Bản thân em cố gắng khắc phục nhƣợc điểm để hoàn thiện Hƣớng phát triển Vì khoảng thời gian ngắn nên em xây dựng đƣợc mơ hình thu nhỏ trung tâm mồ cơi Đà Nẵng, có hội em thu thập liệu thực cho trung tâm mồ côi nƣớc, phát triển thành website hoàn chỉnh thiết bị smartphone SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 54 Báo cáo luận văn tốt nghiệp GVHD: Th.S Ngô Đình Thưởng TÀI LIỆU THAM KHẢO Sách: [1] Dejan V Cancarevi Front-end Guide, ISBN 978-1-257-37903-3, 2011 [2] Bruce Lawson and Remy Sharp Introduce HTML5, CA 94710, 1249 Eighth Street 2011 [3] Douglas Crockford Oreilly.JavaScript.The.Good.Parts.May.2008.pdf, [4] Packt Publishing Ltd Learning jQuery Third Edition.Livery Place, 35 Livery Street, Birmingham B3 2PB, UK , ISBN 978-1-84951-654-9 [5] Tom Hughes-Croucher & Mike Wilson.Oreilly.Node.Up.and.Running.Apr 2012 Website: http://www.w3schools.com/ Truy cập ngày 7/1/2014 http://twitter.github.com/bootstrap/ Truy cập ngày 15/2/2014 SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 55 ... thiết kế xây dựng website xây dựng mạng xã hội cho trung tâm mồ côi Đà Nẵng Ý nghĩa đề tài Về mặt ý nghĩa thực tiễn, đề tài xây dựng mạng xã hội cho trung tâm nuôi dạy trẻ mồ côi Đà Nẵng đáp ứng đƣợc... website ? ?Xây dựng ứng dụng mạng xã hội cho trung tâm nuôi dạy trẻ mồ côi? ?? mà bƣớc đầu thực trung tâm Đà Nẵng với mục đích hƣớng tới tạo mạng xã hội cho trung tâm mồ cơi tự giới thiệu trung tâm ngƣời... ? ?Xây dựng ứng dụng mạng xã hội cho trung tâm mồ côi? ?? mà bƣớc đầu thực trung tâm Đà Nẵng với mục đích hƣớng tới tạo mạng xã hội cho trung tâm mồ cơi tự giới thiệu trung tâm ngƣời biết tài trợ trung