XÂY DỰNG ỨNG DỤNG - Xây dựng ứng dụng mạng xã hội- 123docz.net

1. Giới thiệu về ứng dụng Website xây dựng mạng xã hội cho các trung tâm nuôi dạy trẻ mồ côi Đà Nẵng nuôi dạy trẻ mồ côi Đà Nẵng

Việt Nam có khoảng trên 150.000 trẻ em mồ côi nhƣng chỉ có gần 12.000 em đƣợc nuôi dƣỡng tại các trung tâm bảo trợ xã hội (chiếm tỷ lệ chƣa đến 10%). Còn rất nhiều địa phƣơng có số lƣợng trẻ mồ côi rất đông và Nhà nƣớc hầu nhƣ không đủ sức thực hiện công tác chăm sóc trẻ em mồ côi, nên họ cần phải kêu gọi sự hảo tâm của các cơ quan, cá nhân, tổ chức trong và ngoài nƣớc hỗ trợ trong lĩnh vực nàỵ Để mọi ngƣời biết đến các trung tâm nuôi dạy trẻ một cách dễ dàng để có thể tài trợ trung tâm hoặc nhận con nuôi, trao học bổng cho những đứa trẻ đang cần để học tập. Vấn đề tài trợ học bổng, tài trợ về kinh phí hay giúp đỡ nhau trong mọi mặt của cuộc sống ngày càng phổ biến và đƣợc lan rộng nhƣ là sự giúp đỡ nhau trong cuộc sống giữa ngƣời với ngƣời nhƣng làm sao để tìm đƣợc đối tƣợng phù hợp để tài trợ, không phải qua các bƣớc tìm hiểu rắc rối cũng là một câu hỏi đặt rạ Các bậc cha mẹ muốn nhận con nuôi, họ bƣớc đầu khó có thể tìm ra đƣợc đứa trẻ phù hợp với ý muốn, về tình trạng sức khỏe, giới tính. mặc khác là tạo cho các trẻ có một cuộc sống mới nhƣng làm sao để mọi ngƣời dễ dàng tìm ra đƣợc đứa trẻ phù hợp để nhận con nuôi cũng đang là một vấn đề khó khăn trong việc tiếp cận và giúp đỡ.

Các trung tâm mồ côi ở nhiều vùng xa xôi mà có thể nhiều ngƣời không biết đến hay tổ chức các hoạt động cần sự trợ giúp từ bên ngoài mà làm sao để mọi ngƣời biết và giúp đỡ đúng thời gian mong muốn.

Chính vì những lý do đó, em đã chọn đề tài là tạo một website “Xây dựng ứng dụng mạng xã hội cho các trung tâm mồ côi” mà bƣớc đầu là thực hiện tại các trung tâm ở Đà Nẵng với mục đích hƣớng tới là tạo ra một mạng xã hội cho các trung tâm mồ côi có thể tự giới thiệu về trung tâm mình và mọi ngƣời ai cũng có thể biết và tài trợ trung tâm đó một cách dễ dàng.

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 19

2. Các chức năng chính của ứng dụng

Các chức năng chính của website đƣợc thể hiện rõ thông qua sơ đồ Xmind sau:

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 20

2.1 Phân tích hệ thống website chung một mái nhà 2.1.1 Phân tích hệ thống về chức năng

Sơ đồ Use Case

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 21

Mô tả Actor:

Bảng 1. Mô tả Actor

Actor Mô tả

Ngƣời chƣa có tài khoản Ngƣời dùng chƣa có tài khoản có thể xem thông tin, thêm thông tin đăng kí tìm ngƣời thân, chia sẻ trang văn thơ thông qua facebook, tìm kiếm tên trung tâm, đăng kí tài khoản

Ngƣời có tài khoản Ngƣời dùng có tài khoản có các chức năng của ngƣời chƣa có tài khoản, ngoài ra còn thêm các chức năng chỉnh sửa thông tin, thêm thông tin của mình.

Mô tả Use Case:

Bảng 2: Mô tả Use Case

TT Use Case Mô tả

1 Đăng kí tài khoản Ngƣời dùng đăng kí tài khoản

2 Xem thông tin Ngƣời dùng có thể xem thông tin của tất cả các trung tâm mồ côị

3 Tìm kiếm Ngƣời dùng có thề tìm kiếm tên trung tâm và tên trẻ thông qua tìm kiếm trực tiếp hoặc tìm tên trung tâm trên bản đồ.

4 Chia sẻ Ngƣời dùng có thể chia sẻ văn thơ qua trang mạng xã hội facebook.

5 Thêm thông tin Ngƣời chƣa có tài khoản có thể thêm thông tin đăng kí tìm ngƣời thân, ngƣời có tài khoản có thể thêm

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 22

thông tin thuộc trung tâm của mình

6 Chỉnh sửa thông tin Ngƣời có tài khoản có thể chỉnh sửa các thông tin thuộc trung tâm của mình.

2.1.2 Biểu đồ phân rã chức năng

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 23

2.1.2.1 Đặc tả chức năng của hệ thống

(1) Chức năng tài khoản:

 Chức năng đăng ký:

Cho phép ngƣời dùng đăng ký thông tin để tạo một tài khoản trong websitẹ

 Chức năng đăng nhập:

Nếu ngƣời dùng có tài khoản thì có thể đăng nhập tài khoản để sử dụng websitẹ

(2) Chức năng xem thông tin:

 Chức năng xem thông tin chung của tất cả các trung tâm:

Cho phép ngƣời dùng có thể xem tất cả các thông tin nhƣ ân nhân nhà hảo tâm, học bổng, văn thơ, sự kiện.

 Chức năng xem danh sách trẻ của mỗi trung tâm:

Cho phép ngƣời dùng xem tất cả các trẻ hiện đang có của các trung tâm mồ côị

 Chức năng xem danh sách tìm ngƣời thân:

Cho phép ngƣời dùng xem tất cả thông tin của các trẻ đã đƣợc đăng thông tin tìm.

(3) Chức năng chỉnh sửa thông tin:

 Chức năng chỉnh sửa thông tin trung tâm:

Cho phép ngƣời có tài khoản chỉnh sửa đƣợc thông tin của trung tâm mình.

 Chức năng chỉnh sửa thông tin trẻ:

Cho phép ngƣời có tài khoản có thể chỉnh sửa đƣợc thông tin của trẻ thuộc trung tâm mình.

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 24

Cho phép ngƣời có tài khoản có thể chỉnh sửa đƣợc thông tin tài khoản của mình.

(4) Chức năng thêm thông tin:

 Chức năng thêm thông tin tìm ngƣời thân:

Cho phép ngƣời dùng có thể đăng thông tin tìm ngƣời thân.

 Chức năng thêm trẻ:

Cho phép ngƣời có tài khoản có thể thêm trẻ thuộc trung tâm mình.

 Chức năng thêm nhà hảo tâm:

Cho phép ngƣời có tài khoản có thể thêm thông tin nhà hảo tâm thuộc trung tâm mình.

 Chức năng thêm học bổng:

Cho phép ngƣời có tài khoản có thể thêm thông tin học bổng thuộc trung tâm mình.

 Chức năng thêm văn thơ:

Cho phép ngƣời có tài khoản có thể thêm văn thơ của trẻ thuộc trung tâm mình.

 Chức năng thêm sự kiện:

Cho phép ngƣời có tài khoản có thể thêm thông tin sự kiện thuộc trung tâm mình.

(5) Chức năng tìm kiếm:

 Tìm tên trung tâm:

Cho phép ngƣời dùng có thể tìm tên trung tâm qua hai cách là tìm trên bản đồ hoặc tìm trực tiếp tên trung tâm

 Tìm tên trẻ:

Cho phép ngƣời dùng có thể tìm tên trẻ trực tiếp. (6) Chức năng chia sẻ:

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 25

 Chức năng chia sẻ qua mạng xã hội facebook

Cho phép ngƣời dùng có thể chia sẻ mục văn thơ thông qua mạng xã hội facebook.

2.1.3 Biểu đồ luồng dữ liệu

* Mức 0(Mức khung cảnh): là mức khái quát của hệ thống, mô tả sự trao đổi thông tin của các đối tác với hệ thống.

Hình 4. Biểu đồ luồng dữ liệu mức khung cảnh

* Mức 1(Mức đỉnh): là mức mô tả quá trình trao đổi thông tin của những chức năng chính với nhau và đối tác.

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 26

* Mức 2(Mức dƣới đỉnh): mô tả quá trình trao đổi thông tin một cách chi tiết của chức năng nhỏ trong từng chức năng lớn.

+ BLD chức năng 1: Chức năng xem thông tin

Hình 6. Biểu đồ luồng dữ liệu mức dưới đỉnh. Chức năng xem thông tin

+ BLD chức năng 2: Chức năng chỉnh sửa thông tin

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 27

+ BLD chức năng 3: Chức năng thêm thông tin

Hình 8. Biểu đồ luồng dữ liệu mức dưới đỉnh. Chức năng thêm thông tin

+ BLD chức năng 4: Chức năng tìm kiếm

Khi ngƣời dùng cần tìm kiếm về tên trung tâm hoặc tên trẻ thuộc các trung tâm thì ngƣời dùng sẽ nhập từ khóa cần tìm kiếm, kết quả sẽ trả về kết quả cần tìm.

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 28

+ BLD chức năng 5: Chức năng tạo tài khoản

Hình 10. Biểu đồ luồng dữ liệu mức dưới đỉnh. Chức năng tạo tài khoản

+ Chức năng 6: Chức năng chia sẻ

Khi ngƣời dùng muốn chia sẻ thông tin văn thơ thì thông tin sẽ đƣợc chia sẻ lên mạng xã hội facebook.

2.1.4 Phân tích hệ thống về dữ liệu

2.1.4.1 Xác định các liên kết và các mối quan hệ thực thể

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 29

2.1.4.2 Mô hình thực thể/ liên kết (Mô hình E-R)

Hình 12. Mô hình thực thể liên kết E-R

Chú thích :

Ở mô hình với mỗi bảng ta biểu diễn nhƣ sau - Một khung thể hiện một bảng

- Dòng trên cùng là tên của bảng

- Các thuộc tính của một bảng ở phía dƣới đƣợc ngăn cách bởi dấu gạch ngang.

- Các thuộc tính là khóa chính đƣợc ký hiệu bằng dấu gạch chân và in nghiêng thuộc tính đó.

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 30

2.1.4.3 Mô tả dữ liệu các bảng

 Bảng nguoithan

Bảng 3. Toàn vẹn giá trị của bảng nguoithan

Thuộc tính Kiểu dữ liệu Độ dài Giá trị NULL

Mô tả khóa Ghi chú id_nguoitim int 11 not null Khóa chính

tennguoitim varchar 250 not null quequan varchar 250 not null

diachi varchar 250 not null tentre varchar 250 null

gioitinh varchar 20 not null

namsinh date not null

noithatlac varchar 250 not null

thoigianthatlac varchar 200 not null dacdiemnhandang text null

dang_hinhanh varchar 200 not null

 Bảng vantho

Bảng 4. Toàn vẹn giá trị của bảng vantho

Thuộc tính Kiểu dữ liệu Độ dài Giá trị NULL

Mô tả khóa Ghi chú id_vantho int 11 not null Khóa chính

tentre varchar 200 not null id_trungtam int 11 not null

noidungbaiviet text not null

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 31

 Bảng tre

Bảng 5. Toàn vẹn giá trị của bảng tre

Thuộc tính Kiểu dữ liệu Độ dài Giá trị NULL

Mô tả khóa Ghi chú

id_tre int 11 not null Khóa chính

id_trungtam int 11 not null tentre varchar 200 not null

tuoi int 11 not null

gioitinh varchar 20 not null

ngayvao date not null

tinhtrangsuckhoe varchar 250 not null

trinhdohocvan varchar 250 null

hoancanhsong text null

dang_hinhanh varchar 200 null

 Bảng trungtam

Bảng 6. Toàn vẹn giá trị của bảng trungtam

Thuộc tính Kiểu dữ liệu Độ dài Giá trị NULL

Mô tả khóa Ghi chú id_trungtam int 11 not null Khóa chính

tentrungtam varchar 200 not null diachi varchar 250 not null

dienthoai char 15 not null

email varchar 250 not null

matkhau varchar 20 not null

giamdoc varchar 250 not null gioithieutomtat text not null noidunggioithieu text not null

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 32

dang_hinhanh varchar 200 not null

lat varchar 200 null

lng varchar 200 null

 Bảng sukien

Bảng 7. Toàn vẹn giá trị của bảng sukien

Thuộc tính Kiểu dữ liệu Độ dài Giá trị NULL

Mô tả khóa Ghi chú id_sukien int 11 not null Khóa chính

id_trungtam int 11 not null

ngaytochuc date null

tensukien varchar 250 not null

noidung text not null

soluongnguoi int 11 null

thamgia int 11 null

tinhtrang varchar 250 not null

dang_hinhanh varchar 200 null

 Bảng baiviet

Bảng 8. Toàn vẹn giá trị của bảng baiviet

Thuộc tính Kiểu dữ liệu Độ dài Giá trị NULL

Mô tả khóa Ghi chú

id_baiviet int 11 not null Khóa chính id_trungtam int 11 not null

ngayviet date not null

tieudebaiviet varchar 250 not null noidungbaiviet text not null

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 33

dang_hinhanh varchar 200 null

2.1.4.4 Lƣợc đồ dữ liệu

Ta có các lƣợc đồ quan hệ nhƣ sau:

 baiviet (id_baiviet, id_trungtam, ngayviet, tieudebaiviet, noidungbaiviet, vaitro, dang_hinhanh).

 nguoithan (id_nguoitim, tennguoitim, quequan, diachi, tentre, gioitinh, namsinh, noithatlac, thoigianthatlac, dacdiemnhandang, dang_hinhanh).

 sukien (id_sukien, id_trungtam, ngaytochuc, tensukien, noidung, soluongnguoi, thamgia, tinhtrang, dang_hinhanh).

 tre (id_tre, id_trungtam, tentre, tuoi, gioitinh, ngayvao, tinhtrangsuckhoe, trinhdohocvan, hoancanhsong, dang_hinhanh).

 trungtam (id_trungtam, tentrungtam, diachi, dienthoai, email, matkhau, giamdoc, gioithieutomtat, noidunggioithieu, dang_hinhanh, lat, lng).

 vantho (id_vantho, tentre, id_trungtam, noidungbaiviet, ngayviet). Mô tả lƣợc đồ quan hệ

Bảng 9. Bảng lược đồ quan hệ

STT Tên bảng Các trƣờng Mô tả

1 trungtam id_trungtam, tentrungtam, diachi, dienthoai, email, matkhau,

giamdoc, gioithieutomtat,

noidunggioithieu, dang_hinhanh, lat, lng

Chứa thông tin về các trung tâm mồ côi tại Đà Nẵng.

2 nguoithan id_nguoitim, tennguoitim, quequan, diachi, tentre, gioitinh, namsinh, noithatlac,

thoigianthatlac,

dacdiemnhandang, dang_hinhanh

Chứa thông tin tìm ngƣời thân.

3 tre id_tre, id_trungtam, tentre, tuoi, gioitinh, ngayvao,

tinhtrangsuckhoe, trinhdohocvan, hoancanhsong, dang_hinhanh

Chứa thông tin các trẻ tại các trung tâm mồ côị

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 34

4 baiviet id_baiviet, id_trungtam, ngayviet, tieudebaiviet, noidungbaiviet, vaitro, dang_hinhanh

Chứa các bài viết về các nhà tài trợ cho các trung tâm.

5 vantho id_vantho, tentre, id_trungtam, noidungbaiviet, ngayviet

Chứa các bài văn, bài thơ của các trẻ tại trung tâm.

6 sukien id_sukien, id_trungtam,

ngaytochuc, tensukien, noidung, soluongnguoi, thamgia, vaitro, dang_hinhanh

Chứa các thông tin về các sự kiện của từng trung tâm.

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 35

3. Triển khai và đánh giá

Tiến hành xây dựng website dựa trên những chức năng đã đƣợc phân tích ở trên, website đƣợc thiết kế nhƣ saụ

Hình 14. Trang chủ gồm có bản đồ

Mã nguồn để hiển thị thông tin mới của tất cả các trung tâm:

home_pagẹhtml <body>

</a> </div>

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 36

<div class = "header-newfeed"> <p>Thông tin mới</p>

</a> </div>

<div class = "text-newsfeed"> <h4><a href="Center_wall.html?id={{id_trungtam}}">{{tentrungtam}}</h4> <p >{{ten}}</p> <p>{{formatDate thoigian}}</p> </a> </div> </a> </div> {{/ifCond}}

{{#ifCond type "==" "baiviet"}} <div class = "newsfeed-benefactors">

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 37

<div class = "newsfeed-bene" data-id="{{@index}}" > <img class="image-newsfeed" src="{{hinhanh}}"

alt="benefactors" >

<div class = "text-newsfeed"> <h4><a href="Center_wall.html?id={{id_trungtam}}">{{tentrungtam}}</h4> <p>{{ten}}</p> </a> </div> </div> </a> </div> {{/ifCond}}

<div class = "help-event" data-id="{{@index}}"> <h4>{{tentrungtam}}</h4> <p>{{ten}}</p> </div> </a> {{/ifCond}} {{/each}} </script>

<div class = "modal-body-text-newsfeed"> <p>Họ và tên:{{tentre}} </p>

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 38

</div>

<p>Ngày vào trung tâm:{{formatDate ngayvao}} </p> <p>Tình trạng sức khỏe:{{tinhtrangsuckhoe}} </p> <p>Trình độ học vấn:{{trinhdohocvan}}</p>

<p>Hoàn cảnh, môi trường sống:{{hoancanhsong}} </p> </div> {{/each}} </script> <script class="detail_listNewsFeedChildBenefactors-template" type="text/x-handlebars-template"> {{#each data_detail}}

<div class = "modal-body-text2"> <h4>{{tentrungtam}}</h4> <p>{{noidungbaiviet}}</p> </div> {{/each}} </script> <script class="detail_listNewsFeedChildEvent-template" type="text/x-handlebars-template"> {{#each data_detail}}

<div class = "modal-body-help" > <h4>{{tentrungtam}}</h4> <p>{{tensukien}}</p> <p>{{noidung}}</p> </div> {{/each}} </script> <script type="text/javascript"> Handlebars.registerHelper('formatDaté, function(ngayvao) { date = new Date(ngayvao);

return datẹtoLocaleDateString(); });

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 39 </script> <body> newsfeed.js $('.newsfeed').click(function(){ $.ajax({ type: 'POST', url: 'http://localhost:9000/newsfeed', data: { }, success: function(response){ var hbs = Handlebars;

// overwrite if condition with 2 param

hbs.registerHelper('ifCond', function (v1, operator, v2, options) { switch (operator) { case '==': return (v1 == v2) ? options.fn(this) : options.inverse(this); case '===': return (v1 === v2) ? options.fn(this) : options.inverse(this); case '!=': return (v1 != v2) ? options.fn(this) : options.inverse(this); case '!==': return (v1 !== v2) ? options.fn(this) : options.inverse(this); case '<': return (v1 < v2) ? options.fn(this) : options.inverse(this); case '<=':

SV: Nguyễn Thị Thúy Phượng - Lớp 10CNTT4 Trang 40 return (v1 <= v2) ? options.fn(this) : options.inverse(this); case '>': return (v1 > v2) ? options.fn(this) :