Tóm tắt đồ án Xây dựng website hỗ trợ tìm kiếm giấy tờ thất lạc sử dụng Framework VUE.JS

Nội dung text: Tóm tắt đồ án Xây dựng website hỗ trợ tìm kiếm giấy tờ thất lạc sử dụng Framework VUE.JS

1. TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THÔNG TIN HỮU NGHỊ VIỆT - HÀN KHOA CÔNG NGHỆ THÔNG TIN  XÂY DỰNG WEBSITE HỖ TRỢ TÌM KIẾM GIẤY TỜ THẤT LẠC SỬ DỤNG FRAMEWORK VUE.JS TÓM TẮT ĐỒ ÁN TỐT NGHIỆP NGÀNH: CÔNG NGHỆ THÔNG TIN NIÊN KHÓA: 2016 - 2019 HSSV : Lê Văn Tấn Lin Mã HSSV : CCCT16B010 CBHD : TS. Lê Tân Đà Nẵng, 06/2019
2. MỞ ĐẦU Nếu như một ngày bất cẩn, bạn làm mất đi một loại giấy tờ tùy thân quan trọng của mình ví dụ như chứng minh nhân dân, giấy phép lái xe, bảo hiểm y tế, Thì lúc đó bạn sẽ làm như thế nào??? Chắc có lẽ bạn sẽ phải mất nhiều thời gian để đăng tin trên các trang mạng xã hội và cầu mong cho ai đó nhặt được sẽ nói cho bạn biết để bạn có thể xin lại giấy tờ tùy thân của mình.Nhưng cơ hội đó là vô cùng thấp, bởi trên đất nước Việt Nam có hơn 90 triệu người với hơn 50 triệu tài khoản (theo thống kê số tài khoản Facenbook năm 2017- facebook là mạng xã hội lớn nhất hiện nay.)thì cơ hội họ nhìn thấy tin đăng giấy tờ thất lạc là cực kì cực kì thấp. Nếu bạn vẫn chưa tìm ra được giấy tờ thất lạc của mình thông qua việc đăng thông tin trên các trang mạng xã hội, thì chắc chắn đa số những người làm thất lạc giấy tờ của mình phải thực hiện việc xin cấp lại giấy tờ tại các cơ quan tổ chức có thẩm quyền.Điều này mang đến cho họ sự tốn kém lớn, vì họ phải mất nhiều thời gian để làm lại thủ tục xin cấp lại giấy tờ và nhiều chi phí phát sinh để làm việc đó.Chưa kể các bạn phải mất công mất việc chỉ vì một phút bất cẩn cho bản thân. Chính vì điều đó, tôi đã nghiên cứu và xây dựng một webside “HỖ TRỢ TÌM KIẾM GIẤY TỜ THẤT LẠC”.Giúp cho người nhặt và người mất có thể tìm thấy nhau để trao đổi thông tin về giấy tờ thất lạc.Người nhặt được có thể đăng tin tức lên webside, còn người làm mất cũng đồng thời lên webside để tìm kiếm giấy tờ thất lạc của mình.Và mục đích cuối cùng của tôi chỉ muốn giúp cho xã hội tốt đẹp hơn, giúp cho cuộc sống của mọi người cảm thấy dễ dàng và tiện lợi hơn. 1. Lý do chọn đề tài 1
3. Mỗi người trong chúng ta chắc chắn ai cũng đã từng làm thất lạc một cái gì đó trong đời rồi có đúng không nào???Bạn đã từng làm mất sách giáo khoa, mất thướt kẻ hay bút Rồi sau đó về nhà tỉ tê xin mẹ tiền để mà mua lại những vật dụng đó.Chúng ta là con người ,bất cẩn cũng là một trong những bản tính của chúng ta, chính vì thế mà không một ai trong đời mà chưa từng làm mất bất kì thứ gì được. Ngày nay, giữa bộn bề của cuộc sống, nhiều người đã vô tình làm thất lạc các loại giấy tờ tùy thân của mình trên đường, trong nhà vệ sinh các trung tâm thương mại.Việc làm mất các loại giấy tờ gây cho chúng ta không ít phiền phức.Lấy ví dụ dễ thấy nhất đó chính là : chúng ta làm mất giấy chứng minh nhân dân của bản thân, Thì chúng ta không thể nào làm một số thủ tục tại bệnh viện mỗi khi bị ốm hay tại các cơ quan nhà nước khi làm một loại giấy tờ nào đó chẳng hạn như làm giấy phép xây dựng chẳng hạn.Để xin cấp lại các loại giấy tờ thì chúng ta phải tốn nhiều thời gian và công sức và thậm chí là tiền của.Việc này làm gây nhiều phiền toái cho chúng ta. Mà hiện nay khi người nhặt được giấy tờ lại khó tìm ra được người mất vì trong nhiều tình huống người mất làm rơi giấy tờ khi đi du lịch thì việc người nhặt được loại giấy tờ và người mất có thể nhìn thấy nhau là vô cùng thấp. Chính vì những điều này mà tôi đã nghiên cứu và phát triển ra một website hỗ trợ việc tìm lại giấy tờ thất lạc cho người mất thông qua việc kết nối giữa người mất và người nhặt được lại với nhau.Và cũng chỉ với một nguyện vọng duy nhất là có thể đem những kiến thức mình học được tạo nên một sản phẩm để phục vụ cộng đồng, giúp cho cuộc sống con người có thể được thuận lợi và dễ dàng hơn.Từ đó giúp cho cuộc sống con người được nâng cao, khuyển 2
4. khích mọi người làm việc tốt, cuộc sống của con người sẽ trở nên tốt đẹp hơn. 2. Mục tiêu và nhiệm vụ nghiên cứu - Tìm hiểu quy trình chia sẻ thông tin về giấy tờ thất lạc - Tìm hiểu về ngôn ngữ lập trình C#. 3. Đối tƣợng và phạm vi nghiên cứu - Nghiên cứu về ngôn ngữ lập trình C# - Tìm hiểu và nghiên cứu Freamword vue.js - Nghiên cứu về quy trình thói quen đánh rơi giấy tờ của người dùng 4. Phƣơng pháp nghiên cứu Tìm hiểu và phân tích những tài liệu trên mạng. 5. Dự kiến kết quả Xây dựng hoàn thiện được một trang web hỗ trợ tìm kiếm giấy tờ thất lạc 6. Ý nghĩa khoa học và ý nghĩa thực tiễn - Ý nghĩa khoa học Kết quả nghiên cứu của đề tài góp phần nâng cao nhận thức, khả năng thu thập thông tin, phân tích yêu cầu của người dùng để xây dựng được trang web hoàn chỉnh. Bước đầu tiếp cận ngôn ngữ lập trình để xây dựng trang web. - Ý nghĩa thực tiễn Trang web giúp cho những người thất lạc giấy tờ của mình dễ dàng tiếp cận được những người nhặt được giấy tờ đó, từ đó nâng cao nghĩa tình của người xã hội ngày nay, Ngoài những nội dung như Phần mở đầu, kết luận, tài liệu tham khảo thì nội dung chính của đồ án gồm các chương như sau: 3
5. CHƢƠNG 1. CƠ SỞ LÍ THUYẾT 1.1. Ý TƢỞNG ĐỂ XÂY DỰNG TRANG WEB “HỖ TRỢ TÌM KIẾM GIẤY TỜ THẤT LẠC” Ngày nay, giữa bộn bề của cuộc sống, nhiều người đã vô tình làm thất lạc các loại giấy tờ tùy thân của mình trên đường, trong nhà vệ sinh các trung tâm thương mại.Việc làm mất các loại giấy tờ gây cho chúng ta không ít phiền phức.Lấy ví dụ dễ thấy nhất đó chính là: chúng ta làm mất giấy chứng minh nhân dân của bản thân, Thì chúng ta không thể nào làm một số thủ tục tại bệnh viện mỗi khi bị ốm hay tại các cơ quan nhà nước khi làm một loại giấy tờ nào đó chẳng hạn như làm giấy phép xây dựng chẳng hạn.Để xin cấp lại các loại giấy tờ thì chúng ta phải tốn nhiều thời gian và công sức và thậm chí là tiền của.Việc này làm gây nhiều phiền toái cho chúng ta. Hình 1.1. Người làm mất giấy tờ khổ sở tìm giấy tờ qua các tờ rơi Mà hiện nay khi người nhặt được giấy tờ lại khó tìm ra được người mất vì trong nhiều tình huống người mất làm rơi giấy tờ khi đi du lịch thì việc người nhặt được loại giấy tờ và người mất có thể nhìn thấy nhau là vô cùng thấp. Chính vì những điều này mà tôi đã nghiên cứu và phát triển ra một website hỗ trợ việc tìm lại giấy tờ thất lạc cho người mất thông qua việc kết nối giữa người mất và người nhặt được lại với nhau.Và 4
6. cũng chỉ với một nguyện vọng duy nhất là có thể đem những kiến thức mình học được tạo nên một sản phẩm để phục vụ cộng đồng, giúp cho cuộc sống con người có thể được thuận lợi và dễ dàng hơn.Từ đó giúp cho cuộc sống con người được nâng cao, khuyển khích mọi người làm việc tốt, cuộc sống của con người sẽ trở nên tốt đẹp hơn. 1.2. MỤC ĐÍCH VÀ NHỮNG MỤC TIÊU CẦN ĐẠT ĐƢỢC KHI XÂY DỰNG TRANG WEB “HỖ TRỢ TÌM KIẾM GIẤY TỜ THẤT LẠC” 1.2.1. Mục đích 1.2.2. Những mục tiêu cần đạt đƣợc khi xây dựng trang web “hỗ trợ tìm kiếm giấy tờ thất lạc” 1.3. VUE.JS – FREAMWORD SỐ 1 HỖ TRỢ XÂY DỰNG GIAO DIỆN NGƢỜI DÙNG CỦA WEBSITE 1.3.1. Lịch sử phát triển 1.3.2. Kiến thức cơ bản về vue.js 1.3.2.1 Đối tƣợng Vue 1.3.2.2 Dữ liệu và phƣơng thức 1.3.2.3 Vòng đời của đối tƣợng 1.3.2.4 Các thƣ viện hỗ trợ 1.3.2.5 Thƣ viện Vue-router 1.3.2.6 Thƣ viện Vuex 1.3.2.7 Thƣ viện Vuex 1.4. MỘT SỐ CÔNG NGHỆ KHÁC ĐƢỢC ÁP DỤNG ĐỂ XÂY DỰNG WEBSITE HỖ TRỢ TÌM KIẾM GIẤY TỜ THẤT LẠC 1.4.1. HTML/CSS 1.4.1.1. Khái niệm 5
7. 1.4.1.2. Tác dụng 1.4.2. Thƣ viện bootstrap 1.4.2.1. Khái niệm 1.4.2.2. Tác dụng 1.4.2.3. Lịch sử hình thành Bootstrap 1.4.2.4. Vì sao bạn nên sử dụng Bootstrap ? 1.4.2.5. Sử dụng Bootstrap có phải tốn phí không ? 1.4.2.6. Các bản dịch của Bootstrap 1.4.2.7. Những điểm mạnh của Bootstrap 4 1.4.3. Ngôn ngữ C# 1.4.3.1. Khái niệm 1.4.3.2. Mục tiêu phát triển C# 1.4.3.3. Đặc trưng của C# 1.4.4. Mô hình MVC 1.4.4.1. Khái niệm 1.4.4.2. Các thành phần trong MVC 1.4.4.3. MVC làm việc như thế nào? 1.4.4.4. Ưu và nhược điểm của mô hình MVC 6
8. CHƢƠNG 2. PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2.1. ĐẶC TẢ CHƢƠNG TRÌNH Mọi người có thể vào trang web để đăng tìm kiếm giấy tờ mà không cần phải đăng kí tài khoản của hệ thống. Người nhặt được giấy tờ cần phải khai báo một số thông tin như: Họ tên, giới tính, quê quán, số điện thoại, loại giấy tờ nhặt được, ngày nhặt được, vị trí mà người đó nhặt được: xã, huyện, tỉnh, Bang tin và viết ghi chú cần thiết. Người làm rơi giấy tờ có thể lên web tìm kiếm giấy tờ bằng cách tìm kiếm theo các dữ liệu như sau: tìm kiếm theo loại giấy tờ, tìm kiếm theo thời gian đánh mất và tìm kiếm theo địa điểm đánh rơi. Dang tin tim chinh chu Nguoi Su Dung Ngoài ra người nhặt và người làm mất giấy tờ còn có thế theo dõi bảng tin qua mục trang chủ được cập nhật hang giờ để dễ dàng tìm thấy nhau. 2.2. ĐẶC TẢ CÁC TRƢỜNG HỢP SỬTim DỤ NGkiem nhanh giay to 2.2.1. Yêu cầu chức năng 2.2.2. Yêu cầu phi chức năng 2.3. MÔ HÌNH HÓA CHỨC NĂNG 2.3.1. Xác định tác nhân Nguoi Su Dung Nguoi Quan Li He Thong Hình 2.1. Hai tác nhân chính tác động đến hệ thống 2.3.2. Xác định các ca sử dụng của hệ thống 7
9. Tin tuc Dong he thong Dang tin tim chinh chu Mo he thong Nguoi Su Dung Tim kiem nhanh giay to Nguoi Quan Li He Thong Update he thong Chia se thong tin len mang xa hoi Hình 2.2. Biểu đồ ca sử dụng 2.3.3. Biểu đồ hoạt động 2.3.3.1. Biểu đồ hoạt động xem tin tức Hình 2.3. Biểu đồ hoạt động xem tin tức 2.3.3.2. Biểu đồ hoạt động đăng tin tìm chính chủ Hình 2.4. Biểu đồ hoạt động đăng tin tìm chính chủ 8
10. 2.3.3.3. Biểu đồ hoạt động tìm kiếm nhanh giấy tờ Hình 2.5. Biểu đồ hoạt động tìm kiếm nhanh giấy tờ 2.3.3.4. Biểu đồ hoạt động chia sẻ thông tin lên mạng xã hội Hình 2.6. Biểu đồ hoạt động chia sẻ thông tin lên mạng xã hội 2.3.4. Biểu đồ tuần tự 2.3.4.1. Biểu đồ tuần tự xem tin tức 9
11. : Nguoi Su Dung : FrTinTuc : CtTinTuc : XaPhuongThiTran : : QuanHuyen TinhThanhPho : LoaiGiayTo : ThongTinNguoiN Xem tin tuc() Tin tuc() Lay TT XPT () Cap TT XPT () Lay TT QH () Cap TT QH () Lay TT TTP () Cap TT TTP () Lay TT LGT () Cap TT LGT() Lay TT NN () Cap TT NN () Loc TT can hien thi () Tra tin tuc () Hien thi noi dung tin tuc () Hình 2.7. Biểu đồ tuần tự xem tin tức 2.3.4.2. Biểu đồ tuần tự đăng tin tìm chính chủ : : : Nguoi Su Dung : FrDangTin CtDangTin : XaPhuongThiTran : QuanHuyen TinhThanhPho : LoaiGiayTo : ThongTinNguoiN Dang tin tim chinh chu () Dang Tin () Yeu cau nhap TT () Hien thi trang nhap TT () Nhap TT () Nhan TT() Luu TT XPT () Luu TT QH () Luu TT TTP () Luu TT LGT () Luu TT NN () Da luu () Thong bao dang tin thanh cong () Hình 2.8. Biểu đồ tuần tự đăng tin tìm chính chủ 10
12. 2.3.4.3. Biểu đồ tuần tự chia sẻ thông tin lên mạng xã hội : Nguoi Su Dung : : FrChiaSe Chia se TT () CtChiaSe Chia se TT () Lay lien ket den mang xa hoi () Hien thi trang mang xa hoi () Chon tai khoan chia se () Chon TK () Tra cuu TK () Xac nhan chia se () Dong y chia se TT voi Tk da chon () Chap nhan chia se () Thuc hien chia se () Chia se thanh cong () Thong bao chia se thanh cong () Hình 2.9. Biểu đồ tuần tự chia sẻ thông tin lên mạng xã hội 2.3.5. Biểu đồ lớp Hình 2.10. Biểu đồ lớp chi tiết của hệ thống 11
13. CHƢƠNG 3. XÂY DỰNG WEBSITE HỖ TRỢ TÌM KIẾM GIẤY TỜ THẤT LẠC 3.1. GIỚI THIỆU WEBSITE 3.1.1. Đôi nét về website “Hỗ trợ tìm kiếm giấy tờ thất lạc” 3.1.2. Cấu tạo website 3.1.2.1. Trang chủ Hình 3.2. Trang chủ của website 3.1.2.2. Tìm chính chủ Hình 3.3. Trang chính chủ của website 3.1.2.3. Tìm giấy tờ thất lạc Hình 3.4. Trang tìm kiếm giấy tờ thất lạc của website 12
14. 3.2. HƢỚNG DẪN CÁCH SỬ DỤNG WEBSITE “HỖ TRỢ TÌM KIẾM GIẤY TỜ THẤT LẠC” 3.2.1. Trang chủ của trang web Hình 3.5. Giao diện trang chủ Hình 3.6. Giao diện đăng nhập của chức năng chia sẻ thông tin 3.2.2. Trang tìm chính chủ 13
15. Hình 3.7. Giao diện tìm chính chủ Hình 3.8. Hiển thị thông báo khi đăng bài thành công 3.2.3. Trang tìm giấy tờ thất lạc Hình 3.9. Giao diện tìm kiếm giấy tờ thất lạc Hình 3.10. Giao diện phần nhập dữ liệu cho người dùng 14
16. Hình 3.11. Giao diện phần nhập hiển thị bản tin người dùng đã tìm kiếm Hình 3.12. Ví dụ về kết quả tìm kiếm 3.3. GIẤY TỜ THẤT LẠC VÀ VẤN ĐỀ PHÁP LÍ 3.3.1. Về vấn đề trao đổi mua bán thông tin cá nhân của ngƣời khác. 3.3.2. Về vấn đề đăng thông tin giả mạo để lừa đảo 15
17. KẾT LUẬN Bằng công sức và sự sáng tạo , mặc dù trang web này vẫn chưa được xuất sắc, nhưng tôi vẫn muốn cống hiến một chút gì đó cho xã hội thông qua đồ án của tôi, Chứ không phải là tôi làm đồ án chỉ để qua môn, để lấy bằng tốt nghiệp. Thông qua đồ án chuyên đề lần này tôi đã tự tìm tòi và học hỏi được khá nhiều kiến thức mới để vận dụng vào đồ án, thông qua đó tôi biết được VUE.JS một freamword tuyệt vời và linh động đã hỗ trợ tôi rất nhiều. Ngoài ra tôi còn gửi lời đến thầy Lợi đã tận tình giúp đỡ cho tôi trong suốt quá trình mà tôi làm đồ án có chút thắc mắc hay không hiểu gì đều hỏi thầy cả.Và tôi càng gửi lời cảm ơn đến anh Huấn – cựu sinh viên công nghệ thông tin khóa 10 đã gợi ý cho tôi làm đồ án từ VUE.JS và đưa ra khá nhiều lời khuyên cho tôi trong suốt quá trình làm đồ án Trong đồ án tốt nghiệp tiếp theo, tôi sẽ cố gắng hoàn thiện trang web này để thực hiện được nguyện vọng được cống hiến sức cho xã hội và làm cho xã hội tốt đẹp hơn. 16