Thiết kế và xậy dựng hệ thống website tin tức bằng công nghệ asp.net có sơ đồ use case và giao diện ổn. Thiết kế và xậy dựng hệ thống website tin tức bằng công nghệ asp.net có sơ đồ use case và giao diện ổn
TRƯỜNG ĐẠI HỌC VINH VIỆN KỸ THUẬT VÀ CÔNG NGHỆ BÀI TẬP LỚN HỌC PHẦN: LẬP TRÌNH WEB LỚP: LẬP TRÌNH WEB_01 NHĨM : Giảng viên hướng dẫn: Sinh viên thực hiện: Lê Văn Thành Đặng Văn Nam – 18574802010200 – Lớp 59k1 Nguyễn Duy Nghĩa – 18574802010129 – Lớp 59k1 Ouphaxay Chilayouth – 18574802014197 – Lớp 59k2 Vương Đình Ninh – 18574802010111 –Lớp 59k3 Nghệ An – 2022 Báo cáo tập lớn học phần: Lập trình Web MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN DANH MỤC HÌNH ẢNH CHƯƠNG GIỚI THIỆU BÀI TOÁN .5 1.1 Tổng quan toán 1.1.1 Tổng quan website 1.1.2 Tổng quan toán 1.2 Mục đích phát triển CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 2.1 Yêu cầu hệ thống 2.2 Các ca sử dụng hệ thống .7 2.3 Thiết kế sở liệu .8 2.4 Thiết kế giao diện 13 CHƯƠNG 3: TRIỂN KHAI HỆ THỐNG 16 3.1 Phân tích công nghệ sử dụng hệ thống 16 3.2 Triển khai Fontend 16 3.3 Triển khai Backend 18 KẾT LUẬN 20 Báo cáo tập lớn học phần: Lập trình Web LỜI MỞ ĐẦU Ngày công nghệ thông tin phát triển với tốc độ nhanh chóng Cơng nghệ tin học ứng dụng nhiều lĩnh vực nghiên cứu khoa học, phát triển kinh tế, quân nhiều loại hình nghệ thuật khác Ở nước tiên tiến, máy tính ứng dụng nhiều lĩnh vực nhằm phục vụ lợi ích cho người Việc liên lạc tìm kiếm thơng tin khơng cịn bị cản trở Thế giới trở lên xích lại gần nhờ công nghệ thông tin Để người nước giới nắm bắt thông tin chung nhiều lĩnh vực nước quốc tế, để người tiện tìm kiếm cơng nghệ web đời nhằm phục vụ mục đích Những trang tin tức, trang chứa thông tin đầy đủ lĩnh vực điểu hiển nhiên cần phải có bối cảnh công nghệ phát triển mạnh, để người nắm bắt thông tin cách hiệu nhanh chóng, hạn chế đươc thơng tin khơng thật Vì vậy, nhóm chúng em lựa chọn xây dựng phát triển hệ thống website thơng tin nhiều lĩnh vực để người dùng nắm bắt thông tin dễ dàng hiệu Báo cáo tập lớn học phần: Lập trình Web LỜI CẢM ƠN Bộ mơn lập trình web môn hay phổ biến thị trường Mặc dù lượng kiến thức hộc phần nặng nề có nhiều hay ho, nhiều ưu điểm mà trình theo học mà chúng em cảm nhận Bộ môn lập trình web định hướng cho chúng em lộ trình học hợp lý logic, từ đơn giản nâng dần lên khó để tạo kiến thức tảng cho học phía sau Bộ mơn có fontend backend, nhằm xậy dựng phát triển hệ thống website hoàn chỉnh triển khai thực tế hosting, domain Chúng em định tự xây dựng hệ thống website để áp dụng kiến thức tự tìm hiểu thêm môn học với giảng viên Lê Văn Thành truyển đạt lại kinh nghiệm định hướng cho chúng em phát triển hệ thống website Xin cảm ơn thầy Lê Văn Thành đồng hành giúp đỡ chúng em q trình học mơn lập trình web, trình phát triển hệ thống website riêng chúng em Do lượng kiến thức học phần nặng, nên sản phẩm chúng em có thiếu sót mong thầy bỏ qua góp ý để sản phẩm chúng em hoàn thiện Xin chân thành cảm ơn! Báo cáo tập lớn học phần: Lập trình Web DANH MỤC HÌNH Ả Hình 2.1: Biểu đồ use case cho actor “người dùng thông thường” Hình 2.2: Biểu đồ use case cho actor “tài khoản quản trị” Hình 2.3:Mơ hình thực thể thể quan hệ bảng tin với loại tin Hình 2.4: Mơ hình thực thể thể quan hệ bảng tin với bảng kiện .9 Hình 2.5: Mơ hình thực thể thể quan hệ bảng users tới bảng liên quan .10 Hình 2.6: Mơ hình thực thể thể quan hệ bảng users tới bảng bình luận,ý kiến 10 Hình 7: Mơ hình thực thể thể quan hệ bảng tin tới bảng quảng cáo .11 Hình 8: Mơ hình thực thể thể quan hệ bảng kiện tới bảng phương án 11 Hình 9: Mơ hình quan hệ bảng sở liệu 12 Hình 10: Sơ đồ diagram sở liệu .12 Hình 11: Giao diện trang chủ website 13 Hình 12: Trang thành phần tin tức 13 Hình 13: Giao diện đăng kí thành viên 14 Hình 14: Giao diện trang quản trị 14 Hình 15: Giao diện quản lí người dùng 15Y Hinh 1: Thiết kế MasterPage cho người dùng .16 Hinh 2: Trang chủ website .17 Hinh 3: Giao diện trang thành phần .17 Hinh 4: Giao diện trang đăng ký 18 Hinh 5: Giao diện đăng nhập 18 Hinh 6: Thiết kế masterpage backend visual studio .19 Hinh 7: Giao diện trang chủ backend 19 Hinh 8: Giao diện quản lý người dùng 19 Báo cáo tập lớn học phần: Lập trình Web CHƯƠNG GIỚI THIỆU BÀI TỐN 1.1 Tổng quan tốn 1.1.1 Tổng quan website Thực trạng nay, công nghệ web phát triển mạnh kể sau Website nơi chứa hàng loạt thông tin mà người dùng cần tới, tham khảo quảng cáo sản phẩm, khinh doanh sản phẩm Website có lượng người dùng đơng đảo Tính đến tháng 2022 năm 5,152,254,587, có 5.1 (hơn XNUMX tỷ) người dùng internet Người dùng Internet tồn cầu trung bình dành 43 phút trực tuyến ngày Sau số lý mà lượng người dùng sử dụng website lớn vậy: Nhu cầu đời sống thay đổi: Cách vài thập niên, Công nghệ thông tin chưa phát triển, việc đọc báo, đọc sách,… phổ biến Song vài chục năm gần đây, việc đọc sách báo giấy có nhiều hạn chế tốn diện tích lưu trữ, khó mang theo chuyến đi, vậy, trang báo điện tử, truyện tranh online,… xuất giải hạn chế sách báo cũ, đồng thời thúc đẩy phát triển ngành thiết kế website Sự bùng nổ Công nghệ thông tin: Trong trình hội nhập giới, việc liên kết nhà đầu tư quốc gia, giao lưu học hỏi bạn bè nước, cập nhật thông tin hàng ngày,… vô quan trọng Do đó, để đáp ứng nhu cầu người dùng đặt yêu cầu với nhà quản lý phải có phương tiện thơng tin nhanh, xác hơn, từ đó, ngành thiết kế website đời nhằm giải vấn đề đến ngày phát triển mạnh mẽ Nhu cầu giải trí tăng cao: Khi đời sống vật chất người ngày cải thiện nâng cao, đồng nghĩa với việc nhu cầu tinh thần cần trọng Khi công việc mệt mỏi, áp lực sống,… cần thư giãn, cần “xả stress” để cân lại sống Vì lý đó, nhà phát triển, người trực tiếp làm trang web, không ngừng nỗ lực, tạo trang web có tính giải trí cao cho người dùng Nhu cầu quảng bá sản phẩm, kinh doanh: Chi phí vận hành trì website thường hình thức giới thiệu sản phẩm tới người dùng cách phổ thông Công nghệ phát triển, việc người dùng sử dụng website để tìm kiếm thơng tin nhiều nên dễ tiếp cận người dùng Báo cáo tập lớn học phần: Lập trình Web 1.1.2 Tổng quan tốn Hệ thơng chủ yếu đăng tin tức cho người dùng sử dụng để nắm bắt tin tức, hệ thống cần phải ý đến việc trải nghiệm người dùng Đầu tiên, hệ thống website cần phải có giao diện thân thiện, dễ sử dụng, giao diện không màu mè, tránh hạn chế việc ảnh hưởng tới trải nghiệm người dùng sử dụng, đọc tin tức gây cảm giác mỏi mắt, đau mắt cho người dùng Thứ hai, hệ thống cần phải có lượng thơng tin khổng lồ, làm phong phú lượng tin, viết website Một lượng thông tin khủng thuộc nhiều mảng, lĩnh vực khác dễ thỏa mãn nhu cầu thông tin đọc giả website góp phần làm phong phú tin website Thứ ba, giữ chân đọc giả website Mặc dù người ta khơng đếm xem website có link đủ họ muốn nhu cầu tìm kiếm thơng tin ln đáp ứng tìm kiếm trang web Bạn thử nghĩ vơ tình truy cập vào website vài tin tức hấp dẫn, đọc hết viết có phải bạn nghía coi bên cịn có thêm thơng tin khác Nếu có tin tức thú vị có phải bạn tiếp tục nhấp link, link Thói quen hầu hết đọc giả vậy, phần thể tính tị mị người Nếu muốn giữ chân người đọc lâu, tin phải thật nhiều Ngoài ra, cần phải ý nhiều vấn đề khác tối ưu chuẩn SEO, tăng lượng người sử dủng, tăng lượng truy cập người dùng sử dụng hệ thống, phân quyền người dùng 1.2 Mục đích phát triển Hệ thống website tin tức online nơi chứa nguồn tin khổng lồ có tính chân thực khơng xun tạt, hi vong thu hút nhiều lượt truy cập nhiều thành viên trung thành với website Là nơi cho phép người dùng bình luận viết góp ý tin sau độc giả nắm thông tin muốn để lại ý kiến riêng người khác bàn luận tin tức Hi vọng hệ thống phát triên lâu dài, có khả canh trạnh với trang tin tức khác Báo cáo tập lớn học phần: Lập trình Web CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 2.1 Yêu cầu hệ thống Là nơi chưa thông tin, tin tức nhiều lĩnh vực, kho chứa lượng thơng tin khổng lồ Đăng tin tức có tính xác thực, không xuyên tạc thực tế Là trang tin tức có độ tin cậy cao cho người dùng Đảm bảo tính an tồn bảo mật website thông tin người dùng Phân quyền cho người dùng, cho phép người dùng bình luận, góp ý kiến cho viết Có thể tổ chức số kiện cho người dùng, nhằm giữ chân người dùng độc giả Hệ thống phải chạy nhanh, tránh gây cảm giác đình trễ cho người dùng 2.2 Các ca sử dụng hệ thống Đối với loại tài khoản người dùng thông thường Người dùng đọc tin tức bình luận, góp ý viết hệ thống Hình 2.1: Biểu đồ use case cho actor “người dùng thông thường” Đối với tài khoản quản trị: Với tài khoản quản trị, có nhiều chức để quản trị quản lí người dùng, quản lý viết, quản lí bình luận, quản lí kiện Tài khoản thường cấp quyền CRUD (create, read, update, delete) để dễ dàng thao tác quản trị cách hiệu Báo cáo tập lớn học phần: Lập trình Web Hình 2.2: Biểu đồ use case cho actor “tài khoản quản trị” 2.3 Thiết kế sở liệu Cần bảng để chứa thông tin tin Bảng tin bao gồm thuộc tính sau:idTin, TieuD, TomTat, Ngay, NoiDung1, NoiDung2, urlHinh, urlHinh2,SoLanXem, TinNoiBat, AnHien, idUser, idSk, idLT Để phân loại tin cần dựng thêm bảng loại tin bao gồm thuộc tính sau: idLT(int), Ten(nvarchar(100)), ThuTu(int), AnHien(tinyint) Bảng Tin với bảng loại tin có mối quan hệ nhiều thơng qua khóa ngoại (idLT) Hình 2.3:Mơ hình thực thể thể quan hệ bảng tin với loại tin Báo cáo tập lớn học phần: Lập trình Web Ngồi ra, bảng tin cịn thêm ràng buộc khác, bảng kiện nhằm tổ chức thêm kiện website để tạo hứng thú cho độc giả giữ chân người dùng Bàng kiện bao gồm thuộc tính sau: idSk(int), Mota(ntext) Bảng kiện có mối quan hệ nhiều với bảng tin thơng qua khóa ngoại (idTin) Hình 2.4: Mơ hình thực thể thể quan hệ bảng tin với bảng kiện Tiếp theo bảng Users (Người dùng) bao gồm thuộc tính: idUser, HoTen, DiaChi, Email, DienThoai, GioiTinh, NgaySinh, idGroup, NgayDangKi, Active Để quản lý người dùng cần phải phân quyền sử dụng cho user Do cần thêm bảng phân quyền cho user Bảng phân quyền bao gồm thuộc tính: idGroup, Ten, MoTa Mối quan hệ hai bảng quan hệ nhiều thơng qua khóa ngoại (idGroup) Cần thêm bảng để chứa thông tin tài khoản đăng nhập Bảng UserLogin bao gồm thuộc tính: idUsername, Username, Password, idUser Bảng có khóa ngoại (idUser) liên kết với bảng Users Bảng UserLogin có mối quan hệ một với bảng User 10 Báo cáo tập lớn học phần: Lập trình Web Hình 2.5: Mơ hình thực thể thể quan hệ bảng users tới bảng liên quan Tiếp theo, cần thêm bảng để ghi lại bình luận người dùng, phản hồi người dùng tin Bảng ý kiến bao gồm thuộc tính sau: idYKien, NoiDung, Ngay, idUse, idTin Có khóa ngoại liên kết với bảng user (idUser) bảng tin (idTin) Hình 2.6: Mơ hình thực thể thể quan hệ bảng users tới bảng bình luận,ý kiến 11 Báo cáo tập lớn học phần: Lập trình Web Tiếp theo cần thêm bảng để lưu thông tin quảng cáo nhằm mục đích sau thương mại hóa Bảng cáo cáo bao gồm thuộc tính sau: idQC, Ten, MoTa, Url, UrlHinh, idTin Bảng có mối liên kết với bảng tin thơng qua khóa ngoại (idTim) để định quảng cáo xuất viết Hình 2.7: Mơ hình thực thể thể quan hệ bảng tin tới bảng quảng cáo Ngồi ra, cịn phải thiết kế thêm bảng phương án để triển khai kiện, để tạo tính hấp dẫn độc giả Bảng phương án bao gồm thuộc tính: IdPA, MoTa, Solanchon, idSk, idUser Bảng phương án có hai khóa ngoại ràng buộc hai bảng kiện (idSK) bảng người (idUser) Hình 2.8: Mơ hình thực thể thể quan hệ bảng kiện tới bảng phương án 12 Báo cáo tập lớn học phần: Lập trình Web Dưới mơ hình quan hệ bảng sở liệu Hình 2.9: Mơ hình quan hệ bảng sở liệu Hình 2.10: Sơ đồ diagram sở liệu 13 Báo cáo tập lớn học phần: Lập trình Web 2.4 Thiết kế giao diện Thiết kế giao diện trang chủ Hình 2.11: Giao diện trang chủ website Hình 2.12: Trang thành phần tin tức 14 Báo cáo tập lớn học phần: Lập trình Web Hình 2.13: Giao diện đăng kí thành viên Hình 2.14: Giao diện trang quản trị 15 Báo cáo tập lớn học phần: Lập trình Web Hình 2.15: Giao diện quản lí người dùng 16 Báo cáo tập lớn học phần: Lập trình Web CHƯƠNG 3: TRIỂN KHAI HỆ THỐNG 3.1 Phân tích cơng nghệ sử dụng hệ thống Hệ thống dựng thông qua phần mềm Visual Studio Community 2019 Microsoft SQL Server Manegement Studio để thiết kế dựng mơ hình sở liệu Sử dụng ngơn ngữ lập trình HTML, CSS, JavaScript, ASP.NET, C# Website dựng tảng ASP.NET Winform Sử dụng công nghệ ADO Và LinQ để kết nối sở liệu Sử toolbox có sẵn phần mềm để thiết kế như: Label, HyperLink, DataList, Gridview, Textbox, RadioButton, DropDownList 3.2 Triển khai Fontend Thiết kế MasterPage: Sử dụng ngôn ngữ html, css, javascript để thiết kế giao diện Sử dụng toolbox DataList để đọc liệu từ sở liệu hiển thị menu Sử dụng toolbox Label với từ khóa Eval(“Tên thuộc tính bảng”) để hiển thị liệu website Sử dụng Session để thiết kế chức đăng nhập, đăng ký để thị cho người dùng Kiểm tra người dùng chưa đăng nhập website hiển thị chức đăng nhập, đăng kí cho người dùng Ngược lại, người dùng đăng nhập phải ẩn chức đăng nhập, đăng xuất thị nút đăng xuất cho người dùng Khi người dùng bấm nút đằng xuất phải hủy session Dùng HyperLink để tạo liên kết cho menu, thị nội dung theo danh mục menu Hinh 3.1: Thiết kế MasterPage cho người dùng 17 Báo cáo tập lớn học phần: Lập trình Web Thiết kế trang chủ Kế thừa masterpage thiết kế Sử dụng toolbox DataList, Label, HyperLink, ngơn ngữ lập trình (css, html, c#) công nghệ LinQ ADO đọc liệu sở liệu để hiển thị liệu cho người dùng Hinh 3.2: Trang chủ website Thiết kế trang thành phần Từ trang loại tin sử dụng toolbox HyperLink để chuyển sang trang chi tiết tin Hinh 3.3: Giao diện trang thành phần Thiết kế trang đăng kí, đăng nhập cho người dùng: Để đảm bảo an tồn thơng tin cho người dùng, cần phải hóa mật người dùng, sử dụng hàm mã hóa MD5 có sẵn thư viện C# 18 Báo cáo tập lớn học phần: Lập trình Web Hinh 3.4: Giao diện trang đăng ký Giao diện đăng nhập cần phải thực kiểm tra loại tài khoản đăng nhập tài khoản quản trị tài khoản thành viên Nếu tài khoản quản trị chuyển trang tran quản trị ngược lại loại tài khoản thành viên chuyển hướng tới trang chủ người dùng Hinh 3.5: Giao diện đăng nhập 3.3 Triển khai Backend Công nghệ sử dụng chủ yếu phần là: ngơn ngữ lập trình html, css, javascript, c#; số toolbook có sẵn phần mềm như: Label, Gridview, HyperLink công nghệ Linq ADO để đọc liệu Thiết kế MasterPage cho backend 19 Báo cáo tập lớn học phần: Lập trình Web Hinh 3.6: Thiết kế masterpage backend visual studio Thiết kế trang chủ cho backend Hinh 3.7: Giao diện trang chủ backend Thiết kế trang quản lý người dùng Hinh 3.8: Giao diện quản lý người dùng 20 Báo cáo tập lớn học phần: Lập trình Web KẾT LUẬN Học phần lập trình web mơn học có nhiều kiến thức để học Các kiến thức từ tảng tới nâng cao Mơn học có lượng kiến thức rộng lớn Trong thời gian q trình theo học mơn học chúng em thấy để lập trình tốt thành thạo để tự thiết kế cho riêng hệ thống website đẹp bắt mắt chưa đủ, cần phải rèn luyện thêm tìm hiểu thêm để trang trải cho chúng em kến thức vững Sản phẩm nhóm chúng em chưa hồn thiện lắm, có số lỗi thiếu sót giao diện website chưa thực đẹp mắt Qua môn học này, chúng em nắm vững lượng kiến thức để dựng nên hệ thống website Mặc dù lượng thời gian học lớp thực không nhiều Do cần phải thân nhóm cần rèn luyện thực hành nhiều để sau phát triển hệ thống website cách đẹp mắt chuẩn hơn, hạn chế lỗi lặt vặt hệ thống Tóm lại, Lập trình web mơn học hay tuyệt với.Lượng người sử dụng website lớn tiềm cho phát triển sau cho cá nhân chúng em Chúng em cảm ơn thầy Lê Văn Thành đồng hành, giảng dạy hỗ trợ chúng em suốt trình học tìm hiểu môn TÀI LIỆU THAM KHẢO 21 Báo cáo tập lớn học phần: Lập trình Web [1] G EDU, "Gofatech EDU," 29 09 2021 [Online] Available: https://gofatech.edu.vn/tong-quan-ve-website-tin-tuc.html#Website_tin_tuc_la_gi [2] S V P Ltd, "Website Rating," [Online] Available: https://www.websiterating.com/vi/research/internet-statistics-facts/ [3] webtintuc, "webtintuc," 2018 [Online] Available: https://webtintuc.com/ [4] P T Anh, "DanTri," Bộ Lao động - Thương binh Xã hội, [Online] Available: https://dantri.com.vn/ [5] B T Niên, " Báo Thanh Niên," Báo Thanh Niên, [Online] Available: https://thanhnien.vn/ [6] VICO, "VICO," CÔNG TY CỔ PHẦN CÔNG NGHỆ ĐA NỀN TẢNG VICO, [Online] Available: https://vicogroup.vn/tu-van-website/co-so-du-lieu-cua-website-tintuc-24155.html 22 ... thành phần tin tức 14 Báo cáo tập lớn học phần: Lập trình Web Hình 2.13: Giao diện đăng kí thành viên Hình 2.14: Giao diện trang quản trị 15 Báo cáo tập lớn học phần: Lập trình Web Hình 2.15: Giao... dựng phát triển hệ thống website thơng tin nhiều lĩnh vực để người dùng nắm bắt thông tin dễ dàng hiệu Báo cáo tập lớn học phần: Lập trình Web LỜI CẢM ƠN Bộ mơn lập trình web môn hay phổ biến thị... dùng 19 Báo cáo tập lớn học phần: Lập trình Web CHƯƠNG GIỚI THIỆU BÀI TỐN 1.1 Tổng quan tốn 1.1.1 Tổng quan website Thực trạng nay, công nghệ web phát triển mạnh kể sau Website nơi chứa