Đồ án cơ sở 2 đề tài xây dựng website chia sẻ preset lightroom và hướng dẫn chụp hình

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH ĐỒ ÁN CƠ SỞ ĐỀ TÀI: XÂY DỰNG WEBSITE CHIA SẺ PRESET LIGHTROOM VÀ HƯỚNG DẪN CHỤP HÌNH Sinh viên thực : PHAN THỊ THẢO MAI – 21SE1 NGUYỄN TIẾN LINH – 21MC Giảng viên hướng dẫn : TS NGUYỄN THU HƯƠNG Đà nẵng, tháng 12 năm 2022 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH ĐỒ ÁN CƠ SỞ ĐỀ TÀI: XÂY DỰNG WEBSITE CHIA SẺ PRESET LIGHTROOM VÀ HƯỚNG DẪN CHỤP HÌNH Sinh viên thực : PHAN THỊ THẢO MAI – 21SE1 NGUYỄN TIẾN LINH – 21MC Giảng viên hướng dẫn : TS NGUYỀN THU HƯƠNG Đà Nẵng, tháng 12 năm 2022 MỞ ĐẦU Ngày nay, với phát triển mạnh mẽ khoa học – công nghệ, giới trải qua Cách mạng cơng nghệ lần thứ tư Có thể nói, Cách mạng thúc đẩy phát triển cơng nghệ kỹ thuật lên tầm cao đó, bên cạnh tăng cao nhu cầu sử dụng mạng Internet kết nối vạn vật việc truy cập liệu tham gia vào không gian mạng Rõ ràng ngày có nhiều người tham tảng mạng xã hội, diễn đàn, để thỏa mãn nhu cầu giúp kết nối mối quan hệ, cập nhật tin tức xu thế, làm nơi chia sẻ cảm xúc, Một số mạng xã hội tiếng kể đến như: Facebook, Instagram, Youtube, Twitter, phủ nhận ứng dụng sử dụng rộng rãi khắp giới nhờ tiện ích mà chúng mang lại Và điều thiếu sử dụng trang mạng xã hội việc đăng tải hình ảnh, khoảnh khắc đẹp để lưu giữ kỉ niệm, chia sẻ người Tuy nhiên, để có ảnh đẹp ngồi việc chụp ảnh cịn phải làm cho ảnh trở nên sống động màu sắc tone màu thể tâm trạng qua ảnh khơgn phải có kiến thức hay số hiểu biết định để làm cho ảnh trở nên nghệ thuật Vì vậy, Nhóm chúng em thực đồ án “XÂY DỰNG WEBSITE CHIA SẺ PRESET LIGHTROOM VÀ HƯỚNG DẪN CHỤP HÌNH” nhằm mục đích chia sẻ hưởng dẫn cho người để có ảnh đẹp, vừa ý với kể cho người mưới bắt đầu tập chỉnh ảnh hay đơn giản người muốn ảnh đẹp lên LỜI CẢM ƠN Để làm trang web này, nhóm chúng em nhận hỗ trợ, giúp đỡ nhiều từ giảng viên hướng dẫn - TS Nguyễn Thu Hương Với tình cảm sâu sắc, chân thành, cho phép em bày tỏ lòng biết ơn đến thầy tất bạn giúp đỡ, nghiên cứu suốt trình thực đề tài Với điều kiện thời gian kinh nghiệm hạn chế, báo cáo khơng thể tránh thiếu sót Chúng em mong nhận bảo, đóng góp ý kiến từ thầy cơ, từ chúng em bổ sung, nâng cao kinh nghiệm mình, phục vụ tốt cho dự án sau Nhóm chúng em xin chân thành cảm ơn! NHẬN XÉT (Của giảng viên hướng dẫn) …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… ……………………………………………………… MỤC LỤC Chương Giới thiệu 1.1 Tổng quan 1.1.1 Tên đề tài 1.1.2 Giới thiệu 1.1.3 Mục tiêu 1.1.4 Logo Website 1.1.5 Kế hoạch thực hiện: 1.2 Phương pháp, kết 1.3 Cấu trúc đồ án Chương Tìm hiểu cơng cụ 10 2.1 Tìm hiểu HTML 10 2.1.1 HTML gì? 10 2.1.2 Vai trò HTML .10 2.1.3 Đặc điểm HTML 10 2.1.4 Cấu trúc trang HTML 11 2.1.5 Lịch sử HTML 11 2.1.6 Ví Dụ + Kết 12 2.2 Tìm hiểu CSS 12 2.2.1 CSS ? 12 2.2.2 Vai trò CSS 13 2.2.3 Cấu trúc CSS 13 2.2.4 Lịch sử phát triển 13 2.2.5 Ví dụ + Kết 14 2.3 JavaScript 15 2.3.1 JavaScript ? 15 2.3.2 Vai trò Javascript 15 2.3.3 Cấu trúc JavaScript .16 2.3.4 Lịch sử Javascript 16 2.3.5 Ví dụ + kết 16 2.4 Bootstrap 17 2.4.1 Bootstrap ? 17 2.4.2 Lịch sử Bootstrap 18 2.4.3 Ví dụ + kết 18 2.5 PHP 19 2.5.1 PHP ? 19 2.5.2 Lịch sử PHP 19 2.5.3 Cú pháp 20 2.5.4 Ví dụ + kết Ví dụ: Kết quả: .20 2.6 Laravel 21 2.6.1 Laravel gì? 21 2.6.2 Lịch sử Laravel 21 2.6.3 Ví dụ + kết 23 Chương Phân tích thiết kế hệ thống 24 3.1 Phân tích thiết kế hệ thống 24 3.1.1 Phân tích 24 3.1.2 Thiết kế hệ thống .24 3.2 Thiết kế chi tiết với UML 25 3.2.1 Tổng quan UML 25 3.2.2 Các tác nhân hệ thống 26 3.2.3 Biểu đồ Use case .27 3.2.5 Biểu đồ, danh sách đối tượng 33 3.2.6 Thiết kế sở liệu 33 Chương Triển khai xây dựng .37 4.1 Chức trang web .37 4.2 Hệ thống thông tin 37 4.3 Hình ảnh trang web 38 4.3.1 Giao diện trang chủ hiển thị 38 4.3.2 Giao diện giới thiệu 38 4.3.3 Giao diện danh mục 38 4.3.4 Giao diện danh sách preset 39 4.3.5 Giao diện chi tiết preset .39 4.3.6 Giao diện viết 40 4.3.7 Giao diện đăng ký .41 4.3.8 Giao diện đăng nhập 42 4.3.9 Giao diện admin 42 Chương Kết luận Hướng phát triển .44 5.1 Kết luận 44 5.1.1 Chương trình làm 44 5.1.2 Chương trình chưa làm .44 5.2 Hướng phát triển .44 DANH MỤC TÀI LIỆU THAM KHẢO 45 Chương Giới thiệu 1.1 Tổng quan 1.1.1 Tên đề tài “THIẾT KẾ WEBSITE CHIA SẺ PRESET LIGHTROOM VÀ HƯỚNG DẪN CHỤP HÌNH” 1.1.2 Giới thiệu  Bối cảnh thực đề tài: Ngày nay, với phát triển mạnh mẽ khoa học – công nghệ, giới trải qua Cách mạng công nghệ lần thứ tư Có thể nói, Cách mạng thúc đẩy phát triển công nghệ kỹ thuật lên tầm cao đó, bên cạnh tăng cao nhu cầu sử dụng mạng Internet kết nối vạn vật việc truy cập liệu tham gia vào không gian mạng Rõ ràng ngày có nhiều người tham tảng mạng xã hội, diễn đàn, để thỏa mãn nhu cầu giúp kết nối mối quan hệ, cập nhật tin tức xu thế, làm nơi chia sẻ cảm xúc, Một số mạng xã hội tiếng kể đến như: Facebook, Instagram, Youtube, Twitter, phủ nhận ứng dụng sử dụng rộng rãi khắp giới nhờ tiện ích mà chúng mang lại Tuy nhiên, với đa dạng nhu cầu người sử dụng việc xuất mong muốn ẩn danh đảm bảo bí mật thơng tin điều tất yếu  Vấn đề cần giải quyết: Xây dựng phát triển trang web – nơi bạn thể tình cảm, suy nghĩ mình, trao đổi kiến thức học tập, dạng chế độ ẩn danh không ẩn danh  Đề xuất nội dung thực hiện: Website giúp người dùng đăng viết để bày tỏ tình cảm, suy nghĩ mình, trao đổi kiến thức học tập, tìm kiếm thơng tin tuyển sinh, … Đặc biệt người dùng tùy chỉnh chế độ ẩn danh viết 1.1.3 Mục tiêu  Thiết kế trang web với giao diện website bắt mắt, thân thiện với người dùng  Đầy đủ tính năng, dễ sử dụng, mang lại cho người dùng, đặc biệt trao đổi với người dùng khác qua viết  Hỗ trợ bảo mật nhiều lớp, đảm bảo tồn thơng tin người dùng bảo mật  Được tích hợp công nghệ thiết kế web như: HTML5, CSS3 1.1.4 Logo Website 1.1.5 Kế hoạch thực hiện: Thời gian Từ 12/09/2022 Đến 20/9/2022 Từ 20/09/2022 Đến 27/09/2022 Từ 27/09/2022 Đến 04/10/2022 Nội dung thực Hoàn thiện Đề cương chi tiết gửi qua email để GVHD duyệt Nộp đề cương lên hệ thống Nghiên cứu tìm hiểu Cơng nghệ web Phân tích thiết kế hệ thống, thiết kế giao diện Từ 04/10/2022 Đến 18/10/2022 Xây dựng Website chia sẻ preset Lightroom hướng dẫn chụp hình Từ 18/10/2022 Đến 29/11/2022 Triển khai hồn thiện website Từ 29/11/2022 Đến 05/12/2022 Hoàn thiện báo cáo, slide, mã nguồn nộp lên hệ thống 1.2 Phương pháp, kết  Phương pháp: Sử dụng PHP, CSS, HTML, JavaScript, Bootstrap vài ngôn ngữ lập trình khác để hồn thành nên giao diện website  Kết quả: Website giúp người dùng đăng viết để bày tỏ tình cảm, suy nghĩ mình, trao đổi kiến thức học tập, tìm kiếm thông tin tuyển sinh, … 1.3 Cấu trúc đồ án Nội dung luận văn gồm có chương:  Chương 1: Tổng quan: Tổng quan vấn đề, giới thiệu, mục tiêu, vấn đề cần giải phương pháp nghiên cứu  Chương 2: Tìm hiểu cơng cụ thực hiện: Cách sử dụng công cụ  Chương 3: Nội dung kết nghiên cứu: Từ vấn đề tốn tiến hành phân tích, thiết kế hệ thống, thiết kế mơ hình, thiết kế giao diện hồn thiện chương trình  Chương 4: Kết luận hướng phát triển: Từ kết làm đưa kết luận đạt được, chưa đạt đồng thời đưa hướng phát triển cho đề tài Tác nhân: admin Mô tả: Use case cho phép xem, thêm, sửa, xóa, tìm kiếm thơng tin viết Điều kiện trước: admin đăng nhập vào hệ thống Dòng kiện chính: - Người dùng chọn kiểu tác động: thêm, sửa, xóa, tìm kiếm thơng tin viết - Nếu việc thay đổi thành cơng hệ thống đưa thơng báo, sai thực dịng rẽ nhánh A.I, lưu thông tin danh sách viết Kết quả: thông tin viết cập nhật sở liệu 3.2.4 Biểu đồ Hình 3.7 Biểu đồ chức Đăng nhập 31 Hình 3.8 Biểu đồ chức Quản lý preset Hình 3.9 Biểu đồ chức Quản lý danh mục preset 32 Hình 3.10 Biểu đồ chức Quản lý người dùng 3.2.5 Biểu đồ, danh sách đối tượng Bảng 3.2 Bảng Danh sách đối tượng STT Tên lớp/quan hệ Admin Ý nghĩa/Ghi Mơ tả thuộc tính phương thức liên quan Category_preset tới nghiệp vụ quản lý Admin Mơ tả thuộc tính phương thức liên quan Category_New tới nghiệp vụ quản lý danh mục preset Mơ tả thuộc tính phương thức liên quan News tới nghiệp vụ quản lý tạo danh mục Mơ tả thuộc tính phương thức liên quan Preset tới nghiệp vụ quản lý viết Mơ tả thuộc tính phương thức liên quan User tới nghiệp vụ quản lý danh sách preset Mô tả thuộc tính phương thức liên quan tới nghiệp vụ quản lý danh sách người dùng 3.2.6 Thiết kế sở liệu  Danh sách bảng Bảng 3.3 Danh sách bảng 33 STT Tên thực thể Admin Category_Preset Category_New News Preset User Chương STT  Mô tả Lưu thông tin danh sách Admin Lưu thông tin danh sách danh mục sản phẩm Lưu thông tin tạo danh mục viết Lưu thông tin viết, tin tức Lưu thông tin danh sách preset Lưu thông tin danh sách người dùng Bảng Admin Bảng 3.4 Bảng Admin Tên thực thể Admin_ID Role Username Password Email Created_at Updated_at Kiểu liệu Char Int String String String Timestamp Timestamp Mô tả Mã Admin Biểu thị quyền người dùng Tên đăng nhập Mật Email Ngày tạo Ngày hoạt động gần Bảng Category_Preset Bảng 3.5 Bảng Category_Preset STT  Tên thực thể Category_ID Name Order Created_at Updated_at Kiểu liệu Char String Int Timestamp Timestamp Mô tả Mã danh mục preset Tên danh mục preset Thứ tự hiển thị danh mục Ngày tạo Ngày chỉnh sửa gần Bảng Category_New Bảng 3.6 Bảng Category_New STT Tên thực thể Category_New_ID Name Kiểu liệu Char String 34 Mô tả Mã danh mục viết Tên danh mục viết  Sort_order Status Created_at Updated_at Bảng News STT  Tên thực thể New_ID Category_New_ID Title Info Content Image Created_at Updated_at Int Int Timestamp Timestamp Thứ tự hiển thị danh mục Trạng thái Ngày tạo Ngày chỉnh sửa gần Bảng 3.7 Bảng News Kiểu liệu Char Char String String String String Timestamp Timestamp Mô tả Mã viết Mã danh mục viết Tiêu đề viết Mô tả viết Nội dung viết Ảnh mô tả viết Ngày tạo viết Ngày chỉnh sửa gần Bảng Preset Bảng 3.8 Bảng Preset STT 10 11  Tên thực thể Preset_ID Preset_name Category_ID Hot View Download Image Description Content Created_at Updated_at Kiểu liệu Char String Char Int Int Int String String String Timestamp Timestamp Mô tả Mã preset Tên preset Mã danh mục preset Preset phổ biến, nhiều lượt yêu thích Lượt xem Lượt tải Ảnh mô tả preset Mô tả preset Nội dung Ngày tạo Ngày cập nhật gần Bảng User Bảng 3.9 Bảng User STT Tên thực thể User_ID Name Email Kiểu liệu Char String String 35 Mô tả Mã khách hàng Tên khách hàng Email Gender Phone Address Birthday Created_at Updated_at Int Int String Date Timestamp Timestamp Giới tính Số điện thoại Địa Ngày sinh Ngày tạo Ngày hoạt động gần 36 Chương Triển khai xây dựng 5.1 Chức trang web Đây website mạng xã hội nhằm giúp người dùng trao đổi, bày tỏ suy nghĩ, tìm kiếm thơng tin, … Có chứa chức sau:  Đăng nhập  Đăng ký  Tìm kiếm thơng tin presets  Tìm kiếm thơng tin tips chụp hình, tips phối đồ  Tải sử dụng presets 5.2 Hệ thống thông tin Thông tin người dùng  Nickname Thông tin viết  Người đăng  Tiêu đề  Nội dung  Danh sách bình luận Thơng tin bình luận  Người bình luận  Nội dung 37 5.3 Hình ảnh trang web 5.3.1 Giao diện trang chủ hiển thị Hình 4.1 Giao diện Trang chủ 5.3.2 Giao diện giới thiệu Hình 4.2 Giao diện giới thiệu 5.3.3 Giao diện danh mục 38 5.3.4 Giao diện danh sách preset Hình 4.4 Giao diện danh sách preset 5.3.5 Giao diện chi tiết preset Hình 4.5 Giao diện chi tiết preset (1) 39 Hình 4.6 Giao diện chi tiết preset (2) 5.3.6 Giao diện viết Hình 4.7 Giao diện viết (1) 40 hình 4.8 Giao diện viết (2) 5.3.7 Giao diện đăng ký Hình 4.9 Giao diện đăng ký 41 5.3.8 Giao diện đăng nhập Hình 4.10 Giao diện đăng nhập 5.3.9 Giao diện admin Hình 4.11 Giao diện admin quản lý Danh mục preset 42 Hình 4.12 Giao diện admin quản lý Danh mục viết Hình 4.13 Giao diện admin quản lý Danh sách preset 43 Chương Kết luận Hướng phát triển 6.1 Kết luận 6.1.1 Chương trình làm  Xem thơng tin đề mục  Có thể chạy nhiều giao diện,hệ điều hành khác  Giao diện đẹp mắt, dễ sử dụng  Admin quan lý toàn trang web, bao gồm: quản lý người dùng, quản lý preset, quản lý viết,… 6.1.2 Chương trình chưa làm  Chưa cập nhật tính cho biên tập viên  Thời gian nên bị hạn chế liệu  Khi đưa vào hoạt động thực tế host hệ thống chưa đáp ứng nhu cầu tốc độ tải 6.2 Hướng phát triển  Mở rộng thêm nguồn liệu presets  Làm thêm chức cho biên tập viên  Xử lý thêm chức cho admin  Cải thiện tốc độ xử lý 44 DANH MỤC TÀI LIỆU THAM KHẢO [1] Wikipedia [2] Wikipedia [3] Wikipedia [4] W3school [5] Bootstrap [6] Wikipedia https://vi.wikipedia.org/wiki/HTML https://vi.wikipedia.org/wiki/JavaScript https://vi.wikipedia.org/wiki/CSS https://www.w3schools.com/css/default.asp https://www.w3schools.com/bootstrap https://vi.wikipedia.org/wiki/PHP 45