(Đồ án) đồ án thiết kế i đề tài thiết kế website blog cá nhân

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI VIỆN ĐIỆN TỬ - VIỄN THÔNG ĐỒ ÁN THIẾT KẾ I Đề tài: THIẾT KẾ WEBSITE BLOG CÁ NHÂN Sinh viên thực hiện: NGUYỄN MINH THUẬN Lớp ĐTVT03 – K62 Giảng viên hướng dẫn: ThS ĐINH THỊ NHUNG h Hà Nội, 12-2019 h LỜI NĨI ĐẦU Ngày cơng nghệ thơng tin có bước phát triển mạnh mẽ theo chiều rộng chiều sâu Máy tính điện tử khơng cịn thứ phương tiện quý mà ngày trở thành công cụ làm việc giải trí thơng dụng người Mỗi gia đình, cơng ti, nhà trường sở hữu thiết bị thơng minh kết nối mạng Mạng xã hội ngày phát triển mạnh mẽ giúp kết nối người xa lạ với không kể khoảng cách địa lí Ta tìm thấy nhiều tin tức, kiến thức phong phú mạng Internet Khi xưa, hoạt động diễn đời sống thường ngày thay chia sẻ cho người thân quen xung quanh biết, lưu giữ lại cách viết nhật ký giấy trắng dấu ấn kiện hay kiến thức muốn chia sẻ hoàn toàn lan rộng tới nhiều người khắp nơi Đồng thời, kiến thức, câu chuyện thay bị lãng quên theo thời gian lưu trữ lâu dài mạng Internet Bằng cách vận dụng kiến thức lập trình học, đồng thời tìm hiểu thêm kiến thức mới, với mong muốn lưu giữ lại câu chuyện đời sống hàng ngày, chia sẻ câu chuyện lý thú, kết nối người có đam mê, sở thích, em định thực đề tài “Thiết kế website blog cá nhân” Với hướng dẫn tận tình Đinh Thị Nhung, em hoàn thành báo cáo đồ án thiết kế Tuy cố gắng tìm hiểu, phân tích thiết kế cài đặt hệ thống chắn khơng tránh khỏi thiếu sót Em xin chân thành cảm ơn thầy cơ, anh chị khóa trước bảo giúp đỡ nhiệt tình thời gian thực đồ án thiết kế h h MỤC LỤC DANH MỤC HÌNH VẼ .i DANH MỤC BẢNG BIỂU .ii DANH MỤC KÝ HIỆU VÀ CHỮ VIẾT TẮT iii TÓM TẮT ĐỒ ÁN vi PHẦN MỞ ĐẦU CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1 Tìm hiểu ngơn ngữ HTML, CSS, JS 1.2 Tìm hiểu ngơn ngữ PHP 1.3 Tìm hiểu sở liệu MYSQL .10 CHƯƠNG KHẢO SÁT HIỆN TRẠNG VÀ XÁC LẬP ĐỀ TÀI 12 2.1 Xác lập đề tài 12 2.2 Khảo sát trạng .12 2.3 Phân tích tính khả thi 13 CHƯƠNG TÌM HIỂU YÊU CẦU ĐỀ TÀI .14 3.1 Các yêu cầu thu nhập 14 3.2 Các yêu cầu chức phi chức 15 CHƯƠNG PHÂN TÍCH HỆ THỐNG 17 4.1 Sơ đồ phân cấp chức hệ thống 17 4.2 Sơ đồ ngữ cảnh hệ thống 18 4.3 Sơ đồ luồng liệu mức chức tương ứng .19 CHƯƠNG THIẾT KẾ CƠ SỞ DỮ LIỆU 23 5.1 Xác định thực thể hệ thống .23 5.2 Chuẩn hóa liệu hệ thống 25 h CHƯƠNG THIẾT KẾ MỘT SỐ FORM BÁO CÁO ĐẦU RA CỦA HỆ THỐNG 26 6.1 Giao diện trang chủ trang nhỏ 26 6.2 Giao diện trang quản lý người quản trị cộng tác viên 28 KẾT LUẬN 33 Kết luận chung 33 Hướng phát triển 33 TÀI LIỆU THAM KHẢO 34 h DANH MỤC HÌNH VẼ Hình 4.1 Sơ đồ phân cấp chức .17 Hình 4.2 Sơ đồ mức ngữ cảnh 18 Hình 4.3 Sơ đồ luồng liệu chức quản lý hệ thống 19 Hình 4.4 Sơ đồ luồng liệu chức quản lý viết 20 Hình 4.5 Sơ đồ luồng liệu chức quản lý cộng tác viên .20 Hình 4.6 Sơ đồ luồng liệu chức quản lý phân loại viết .21 Hình 4.7 Sơ đồ luồng liệu chức quản lý bình luận 21 Hình 4.8 Sơ đồ luồng liệu chức tìm kiếm 22 Hình 4.9 Sơ đồ luồng liệu chức báo cáo hệ thống 22 Hình 5.1 Sơ đồ chuẩn hóa liệu dạng 3NF 25 Hình 5.2 Sơ đồ thực thể liên kết hệ thống 25 Hình 6.1 Giao diện đầu trang chủ website 26 Hình 6.2 Giao diện đầu viết chi tiết website 27 Hình 6.3 Giao diện đầu thêm bình luận cho viết 27 Hình 6.4 Giao diện đầu danh sách viết chủ đề website 28 Hình 6.5 Giao diện đầu trang đăng nhập dành cho người dùng 28 Hình 6.6 Giao diện đầu trang quản lý viết 29 Hình 6.7 Giao diện đầu trang thêm viết .30 Hình 6.8 Giao diện đầu trang quản lý chủ đề viết .30 Hình 6.9 Giao diện đầu trang thêm chủ đề viết 31 Hình 6.10 Giao diện đầu trang quản lý cộng tác viên .31 Hình 6.11 Giao diện đầu trang thêm tài khoản dành cho người quản trị 32 Hình 6.12 Giao diện đầu trang quản lý tài khoản dành cho cộng tác viên 32 i h DANH MỤC BẢNG BIỂU Bảng 1.1 Các toán tử thường dùng với câu lệnh điều kiện Bảng 1.2 Toán tử số học PHP .8 Bảng 1.3 Các toán tử logic PHP Bảng 1.4 Toán tử gán PHP Bảng 1.5 Toán tử so sánh PHP Bảng 2.1 Bảng kế hoạch công việc .12 ii h DANH MỤC KÝ HIỆU VÀ CHỮ VIẾT TẮT Tên viết tắt Tên đầy đủ Ý nghĩa Kiểu liệu Giá trị mẫu maSoTK Mã số tài khoản ID riêng tài khoản INT tenTK Tên tài khoản Tên đăng kí viết liền khơng dấu, khơng trùng tên VAR CHAR taikhoan1 matKhauTK Mật tài khoản Mật đăng kí VAR CHAR 1234567 maSoCTV Mã số cộng tác viên ID riêng cộng tác viên ứng với ID tài khoản tạo INT hoTenCTV Họ tên cộng tác viên Họ tên cộng tác viên tự quản lý VAR CHAR Nguyễn A emailCTV Email cộng tác viên Email cộng tác viên tự quản lý VAR CHAR abc@mail.com maSoPL Mã số phân loại viết ID riêng phân loại viết INT tenPL Tên phân loại viết Tên phân loại viết người quản lí, cộng tác viên quản lý VAR CHAR Loại A moTaPL Mô tả phân loại viết Thông tin mô tả cho phân loại NVAR CHAR Phân loại nói abc… maSoBV Mã số viết Mã số riêng viết INT iii h tenBV Tên viết Tiêu đề viết VAR CHAR Bài viết số anhMoTa Ảnh mô tả viết Hình ảnh mơ tả viết VAR CHAR gioiThieuBV Giới thiệu ngắn gọn viết Giới thiệu ngắn gọn, tóm tắt ý viết VAR CHAR Bài viết nói abc… Nội dung viết Nội dung viết người quản lý, cộng tác viên tiến hành tạo mới, sửa, xóa VAR CHAR Bài viết nói abc… thoiGianTao Thời gian tạo viết Thời gian tạo viết gồm ngày, tháng, năm, thiết lập tự động cập nhật VAR CHAR 7/9/2019 9:00 am maSoBL Mã số bình luận ID riêng bình luận đăng INT noiDungBL Nội dung bình luận Nội dung bình luận VAR CHAR Bài viết tốt emaiNBL Email người bình luận Người truy cập tiến hành nhập email để xác nhận đăng bình luận VAR CHAR abc@mail.com Thời gian đăng bình luận gồm Thời gian đăng ngày, tháng, năm, bình luận thiết lập tự động cập nhật VAR CHAR 7/9/2019 9:00 am noiDungBV thoiGianBL iv h 24 h CHƯƠNG THIẾT KẾ CƠ SỞ DỮ LIỆU Sau tìm hiểu rõ ràng yêu cầu đề tài, phân tích hệ thống cách chi tiết, em tiến hành thiết kế sở liệu 5.1 Xác định thực thể hệ thống Cơ sở liệu hệ thống hành gốm thực thể sau:  Tài khoản: R1 (maSoTK, tenTK, matKhauTK) Ý nghĩa: Bảng liệu quản lý thơng tin tên mật đăng kí/đăng nhập người dùng  Cộng tác viên: R2 (maSoCTV, hoTenCTV, emailCTV) Ý nghĩa: Bảng liệu quản lý thông tin cộng tác viên  Phân loại viết R3 (maSoPL, tenPL, moTaPL) Ý nghĩa: Bảng liệu quản lý thông tin phân loại viết  Bài viết: R4 (maSoBV, tenBV, anhMoTa, gioiThieuBV, noiDungBV, maSoCTV, tenCTV, maSoPL, tenPL, thoiGianTao) Ý nghĩa: Bảng liệu quản lý thông tin viết, phân loại viết  Bình luận: R5 (maBL, noiDungBL emailNBL, maSoBV, tenBV, thoiGianBL) Ý nghĩa: Bảng liệu quản lý thơng tin bình luận Sau xác định thực thể, em tiến hành xác định phụ thuộc hàm (PTH) − R1: Mỗi người dùng có mã tài khoản riêng, tên tài khoản, mật 25 h PTH: maSoTK  tenTK, matKhauTK − R2: Mỗi cộng tác viên có mã số riêng, có tài khoản với mã số tài khoản tương ứng, có họ tên, email PTH: maSoCTV  maSoTK, hoTenCTV, emailCTV maSoTK  ten TK, matKhauTK − R3: Mỗi phân loại viết có mã số riêng, có tên phân loại, mô tả phân loại PTH: maSoPL  tenPL, moTaPL − R4: Mỗi viết có mã số riêng, có tên viết, hình ảnh mơ tả, giới thiệu viết, nội dung viết, thuộc phân loại viết, thời gian đăng tương ứng PTH: maSoBV  tenBV, anhMoTa, gioiThieuBV, noiDungBV, maSoPL, maSoCTV, thoiGianTao maSoPL  tenPL, moTaPL maSoCTV  tenCTV − R5: Mỗi bình luận có mã số riêng, có nội dung bình luận, có email người đăng, thời gian bình luận tương ứng Một bình luận sử dụng cho viết, viết có nhiều bình luận PTH: maSoBL noiDungBL, emailNBL, maSoBV, thoiGianBL 26 h 5.2 Chuẩn hóa liệu hệ thống Hình 5.10 Sơ đồ chuẩn hóa liệu dạng 3NF Sau chuẩn hóa bảng liệu dạng 3NF (hình 5.1), ta thu sơ đồ thực thể liên kết hệ thống hình sau: 27 h Hình 5.11 Sơ đồ thực thể liên kết hệ thống CHƯƠNG THIẾT KẾ MỘT SỐ FORM BÁO CÁO ĐẦU RA CỦA HỆ THỐNG Thực xong tất bước tìm hiểu yêu cầu, phân tích, thiết kế sở liệu, tiến hành lập trình thiết kế website thu thành đầu ra, chương giới thiệu đầu ứng với chức cần thực 6.1 Giao diện trang chủ trang nhỏ Khi người đọc truy cập vào website, trang chủ thị hình (hình 6.1) để chào đón bạn đọc Hình 6.12 Giao diện đầu trang chủ website Giao diện trang chủ thị danh sách viết website dạng tóm tắt gồm tiêu đề, ảnh, thời gian đăng bài, tóm tắt nội dung Bạn đọc đọc 28 h cách click vào “READMORE” click trực tiếp vào tiêu đề viết, trang web điều hướng bạn đọc sang trang viết chi tiết hình 6.2 Hình 6.13 Giao diện đầu viết chi tiết website Dưới viết chi tiết, bạn đọc để lại bình luận, yêu cầu phải nhập đủ email nội dung bình luận hình sau: Hình 6.14 Giao diện đầu thêm bình luận cho viết Bạn đọc tìm kiếm viết theo tên chủ đề click vào tên topic, website thị danh sách viết chủ đề hình 6.4 29 h Hình 6.15 Giao diện đầu danh sách viết chủ đề website Các viết chủ đề hiển thị với Như vậy, phần giới thiệu xong phần đầu hệ thống dành cho bạn đọc, phần giới thiệu đầu trang quản lý dành cho quản trị viên cộng tác viên 6.2 Giao diện trang quản lý người quản trị cộng tác viên Để tiến hành truy cập vào trang quản lý, cộng tác viên admin cần phải tiến hành đăng nhập với tài khoản cấp Tiến hành đăng nhập sử dụng tên tài khoản mật điền vào hai ô trống hình 6.5 theo thứ tự từ xuống Hình 6.16 Giao diện đầu trang đăng nhập dành cho người dùng 30 h Sau tiến hành đăng nhập thành công, người quản lý cộng tác viên truy cập vào trang quản lý (hình 6.6) thực thao tác quản lý Hình 6.17 Giao diện đầu trang quản lý viết Các biết đăng thị dạng danh sách để dễ quản lý như hình 16 Các thơng tin hiển thị tên viết, chủ đề viết, thao tác thực với viết đăng sửa, xóa Phía bên có hai nút điều hướng “Add Post” Manage Posts” ứng với tạo viết quản lý viết (sửa, xóa) Khi click vào nút tạo viết mới, website điều hướng quản trị viên cộng tác viên sang trang web tạo viết hình 6.7, nội dung cần tạo hiển thị bao gồm: − Choose File: Chọn ảnh mô tả cho viết − Tilte: Tiêu đề viết − Description: Mơ tả khái qt (tóm tắt) viết − Body: Nội dung viết − Topic: Chủ đề viết Sau nhập đủ tất thông tin trên, click vào nút “Add Post” phía để tiến hành tạo viết Tạo viết thành công, trang web điều hướng trang quản lý hình 6.6 31 h Hình 6.18 Giao diện đầu trang thêm viết Quản trị viên cộng tác viên quản lý chủ đề viết trang web quản lý hình 6.8 32 h Hình 6.19 Giao diện đầu trang quản lý chủ đề viết Hình 6.20 Giao diện đầu trang thêm chủ đề viết Tạo chủ đề viết tương tự tạo viết, sau điền đủ thơng tin cần nhập tiến hành “Add topic” hình 6.9 Hình 6.21 Giao diện đầu trang quản lý cộng tác viên Chỉ có quản trị viên quản lý cộng tác viên, thêm tài khoản (cấp thêm tài khoản cho cộng tác viên mới) tạo tài khoản cho cộng tác viên 33 h Tiến hành tạo tài khoản yêu cầu thông tin: Tên tài khoản, mật khẩu, xác nhận mật khẩu, vai trò (cộng tác viên quản trị viên) Trang tạo tài khoản có giao diện hình 6.11 Hình 6.22 Giao diện đầu trang thêm tài khoản dành cho người quản trị Đối với cộng tác viên, truy cập vào trang web quản lý tài khoản, nhận thơng báo hình 6.12 Hình 6.23 Giao diện đầu trang quản lý tài khoản dành cho cộng tác viên 34 h Như vậy, chương hoàn thành giới thiệu đầu tương ứng với chức hệ thống, chưa thật hoàn thiện nhìn chung đạt chức đặt chương trước 35 h KẾT LUẬN Kết luận chung Đề tài “Thiết kế website blog cá nhân” thực tạo tảng sở ban đầu để hỗ trợ thêm cho bạn muốn thiết kế Website hoàn chỉnh Mặc dù có nhiều cố gắng, tìm hiểu kiến thức học, kết hợp tra cứu tài liệu chuyên ngành hạn chế thời gian, khả kinh nghiệm nên không tránh khỏi thiếu sót định Bởi đề tài hồn thành mức độ sau: − Tìm hiểu ngơn ngữ lập trình PHP MySQL − Áp dụng xây dựng ứng dụng thực nghiệm trang Website blog cá nhân mạng Internet cho fanpage hội yêu mèo Hướng phát triển Có thể tìm hiểu sâu ngơn ngữ lập trình để đáp ứng nhiều nhu cầu người sử dụng, phát triển tối ưu hóa hệ thống Tìm hiểu thêm số ngôn ngữ, phần mềm ứng dụng để nâng cao giao diện đồ họa đẹp mắt, thân thiện hơn… Xây dựng trang Web quy mô lớn với nhiều ứng dụng, chức Cuối cùng, lần nữa, em xin chân thành cảm ơn cô Đinh Thị Nhung, thầy cơ, anh chị khóa trước bảo nhiệt tình giúp đỡ em hồn thành đồ án thiết kế 36 h TÀI LIỆU THAM KHẢO [1] Joel Murach, Ray Harris, Lập trình PHP MySQL (Murach’s PHP and MySQL) FPT Polytechnic, Nhà xuất Khoa học Kĩ Thuật, 2013 [2] http://www.viblo.asia/, truy nhập cuối ngày 31/12/2019 [3] http://www.w3schools.com/, truy nhập cuối ngày 31/12/2019 37 h h