1.2 Phương pháp, kết quả Phương pháp: Sử dụng PHP, CSS, HTML, JavaScript, Bootstrap và một vài ngôn ngữ lập trình khác để hoàn thành nên giao diện website Kết quả: Website giúp người dùn
Giới thiệu
Tổng quan
“THIẾT KẾ WEBSITE CHIA SẺ PRESET LIGHTROOM VÀ HƯỚNG DẪN
Ngày nay, sự phát triển mạnh mẽ của khoa học – công nghệ đã dẫn đến cuộc Cách mạng công nghệ lần thứ tư, thúc đẩy công nghệ kỹ thuật lên tầm cao mới Sự gia tăng nhu cầu sử dụng Internet và tham gia vào không gian mạng ngày càng rõ rệt, với nhiều người tham gia các nền tảng mạng xã hội như Facebook, Instagram, Youtube, và Twitter để kết nối, cập nhật tin tức và chia sẻ cảm xúc Tuy nhiên, bên cạnh những lợi ích, nhu cầu về ẩn danh và bảo mật thông tin cũng ngày càng trở nên cần thiết trong bối cảnh này.
Để giải quyết vấn đề xây dựng và phát triển một trang web, chúng tôi đề xuất tạo ra một nền tảng cho phép người dùng thể hiện tình cảm, suy nghĩ và trao đổi kiến thức học tập dưới dạng ẩn danh hoặc không ẩn danh Trang web sẽ cung cấp chức năng cho phép người dùng đăng bài viết, tìm kiếm thông tin tuyển sinh và tùy chỉnh chế độ ẩn danh cho mỗi bài viết, từ đó tạo ra một không gian giao tiếp đa dạng và phong phú.
Thiết kế trang web cần có giao diện hấp dẫn và thân thiện với người dùng, đảm bảo đầy đủ tính năng và dễ sử dụng Điều này không chỉ mang lại trải nghiệm tốt cho người dùng mà còn cho phép họ tương tác và trao đổi với những người khác thông qua các bài viết của mình.
Hệ thống hỗ trợ bảo mật nhiều lớp, đảm bảo an toàn cho toàn bộ thông tin người dùng Ngoài ra, nền tảng được tích hợp các công nghệ thiết kế web tiên tiến nhất hiện nay, bao gồm HTML5 và CSS3.
Thời gian Nội dung thực hiện
Hoàn thiện Đề cương chi tiết và gửi qua email để GVHD duyệt
Nộp đề cương lên hệ thống
Từ 20/09/2022 Đến 27/09/2022 Nghiên cứu và tìm hiểu về Công nghệ web
Phân tích thiết kế hệ thống, thiết kế giao diện
Xây dựng Website chia sẻ preset Lightroom và hướng dẫn chụp hình
Từ 18/10/2022 Đến 29/11/2022 Triển khai và hoàn thiện website
Hoàn thiện báo cáo, slide, mã nguồn và nộp lên hệ thống
Phương pháp, kết quả
Phương pháp: Sử dụng PHP, CSS, HTML, JavaScript, Bootstrap và một vài ngôn ngữ lập trình khác để hoàn thành nên giao diện website
Website cho phép người dùng đăng bài viết để chia sẻ cảm xúc, suy nghĩ, trao đổi kiến thức học tập và tìm kiếm thông tin tuyển sinh.
Cấu trúc đồ án
Nội dung chính của luận văn gồm có 4 chương:
Chương 1: Tổng quan: Tổng quan vấn đề, giới thiệu, mục tiêu, các vấn đề cần giải quyết và 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 và kết quả nghiên cứu: Từ các vấn đề của bài toán tiến hành phân tích, thiết kế hệ thống, thiết kế các mô hình, thiết kế giao diện và hoàn thiện chương trình.
Chương 4: Kết luận và hướng phát triển: Từ kết quả những gì làm được đưa ra kết luận về những gì đã đạt được, những gì chưa đạt được đồng thời đưa ra hướng phát triển cho đề tài.
Tìm hiểu công cụ
Tìm hiểu về HTML
HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ giúp người dùng tạo và cấu trúc các thành phần trên trang web hoặc ứng dụng, bao gồm việc phân chia đoạn văn, tiêu đề, liên kết và blockquotes.
HTML không phải là một ngôn ngữ lập trình, mà chỉ là công cụ để bố cục và định dạng trang web, tương tự như Microsoft Word Do đó, HTML không thể tạo ra các chức năng "động".
HTML là ngôn ngữ đánh dấu siêu văn bản cơ bản, đóng vai trò quan trọng trong việc cấu trúc và tổ chức các thành phần của một Website Nó giúp tạo ra khung sườn cho trang Web, đảm bảo tính hoàn chỉnh của hệ thống Ngoài ra, HTML còn cho phép khai báo và tích hợp các tệp kỹ thuật số như âm thanh, video và hình ảnh, nâng cao trải nghiệm người dùng.
Để xây dựng một website có cấu trúc tốt và sử dụng đa dạng yếu tố trong văn bản, HTML là yếu tố không thể thiếu HTML cung cấp các thành phần cần thiết cho mọi loại website, giúp hiển thị nội dung một cách hiệu quả cho người truy cập Dù trang web của bạn được xây dựng trên nền tảng nào hay giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu, HTML vẫn đóng vai trò quan trọng trong việc truyền tải thông tin.
HTML là một ngôn ngữ đánh dấu đơn giản và hiệu quả, cho phép bạn dễ dàng thiết kế và trình bày trang web với nhiều thẻ định dạng Nó hỗ trợ liên kết đến các trang web khác và cho phép thêm video, hình ảnh, âm thanh, làm cho website trở nên hấp dẫn và dễ tương tác hơn Đặc biệt, HTML có thể hiển thị trên mọi nền tảng như Linux, Windows và Mac, nhờ vào tính độc lập của nó.
2.1.4 Cấu trúc cơ bản trang HTML
Tiêu đề trang web
HTML, được phát minh bởi Tim Berners-Lee, một nhà vật lý tại trung tâm nghiên cứu CERN ở Thụy Sĩ, đã ra đời từ ý tưởng về hệ thống hypertext trên nền tảng Internet.
Hypertext là văn bản có chứa liên kết, cho phép người dùng truy cập ngay lập tức Năm 1991, Anh đã phát hành phiên bản đầu tiên của HTML với 18 thẻ HTML Kể từ đó, mỗi phiên bản mới của HTML đều bổ sung thêm các thẻ và thuộc tính mới.
According to the Mozilla Developer Network's HTML Element Reference, there are currently over 140 HTML tags, although some of these have been deprecated and are no longer supported by modern browsers.
HTML đã nhanh chóng trở thành tiêu chuẩn thiết yếu cho các trang web, với các thiết lập và cấu trúc được phát triển bởi Tổ chức W3C Để cập nhật thông tin mới nhất về ngôn ngữ này, bạn có thể truy cập trang web của W3C bất cứ lúc nào.
Nâng cấp mới nhất của HTML diễn ra vào năm 2014 với sự ra mắt của chuẩn HTML5, bổ sung nhiều thẻ mới vào markup, giúp xác định rõ ràng nội dung, bao gồm các thẻ như , , và .
Tìm hiểu về CSS
CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để tạo phong cách và định dạng cho các yếu tố trong tài liệu đánh dấu như HTML Nó cho phép kiểm soát định dạng cho nhiều trang web cùng lúc, giúp tiết kiệm thời gian và công sức cho lập trình viên web.
CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm
Vào năm 1996, HTML không được phát triển với mục đích gắn thẻ để định dạng trang web, mà chỉ được sử dụng để "đánh dấu" nội dung trên trang.
Hạn chế việc sử dụng các thẻ HTML định dạng như chữ đậm, chữ in nghiêng, và màu sắc giúp mã nguồn trang Web gọn gàng hơn, tách biệt nội dung và định dạng hiển thị, từ đó dễ dàng cập nhật nội dung Việc tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web không chỉ giúp tiết kiệm thời gian mà còn tránh việc lặp lại định dạng cho các trang tương tự.
Một đoạn CSS có cấu trúc 4 phần như sau:
+ selector : tên thẻ html hoặc class hoặc Id
+ { } : Cặp thẻ mở đóng, các thuộc tính của selector sẽ nằm trong cặp ngoặc nhọn này.
Trong CSS, thuộc tính xác định cách bố trí và màu sắc của các phần tử trên trang web Giá trị thuộc tính, nằm bên phải dấu ":" , chỉ ra giá trị cụ thể cho thuộc tính đó Ví dụ: selector { thuộc tính 1 : giá trị 1; thuộc tính 2 : giá trị 2; }
CSS được đề xuất lần đầu tiờn vào ngày 10/10/1994 bởi Hồkon Wium Lie.
Kể từ khi ra mắt, CSS đã trải qua nhiều phiên bản khác nhau, mỗi phiên bản mới không chỉ khắc phục các lỗi của phiên bản trước mà còn mang đến nhiều cải tiến đáng kể.
Phiên bản đầu tiên của CSS, hay còn gọi là CSS cấp 1, có những đặc điểm nổi bật như: thuộc tính font chữ, màu văn bản, hình nền, các thuộc tính văn bản, căn lề, định vị cho các yếu tố, cũng như khả năng nhận dạng duy nhất và phân loại chung các nhóm thuộc tính.
Phiên bản CSS cấp 2, được W3C phát triển vào tháng 5 năm 1998, đã mang đến nhiều cải tiến so với phiên bản CSS cấp 1, bao gồm định vị tuyệt đối, tương đối và cố định các yếu tố chỉ mục z, cùng với khái niệm về các loại phương tiện và hỗ trợ cho các biểu định kiểu âm thanh và văn bản hai chiều Ngoài ra, phiên bản CSS 2.1, được đề xuất vào tháng 4 năm 2011, đã được phát triển nhằm sửa lỗi và loại bỏ những tính năng không tương thích hoặc kém hiệu quả cho người dùng.
CSS3 là phiên bản nâng cấp của CSS2, với sự thay đổi quan trọng là cấu trúc mô-đun, cho phép mở rộng và cải tiến các tính năng của CSS2 mà vẫn giữ được khả năng tương thích ngược Đặc biệt, CSS3 cung cấp các bộ chọn và thuộc tính mới, mang lại sự linh hoạt trong việc bố trí và trình bày trang, giúp lập trình viên tạo ra các hiệu ứng hình ảnh mà không cần sử dụng hình ảnh đã được tạo sẵn.
JavaScript
JavaScript là một ngôn ngữ kịch bản dựa trên đối tượng, chủ yếu được sử dụng để tương tác với các trang HTML Ngôn ngữ này thường được tích hợp trực tiếp vào tập tin HTML thông qua thẻ hoặc thông qua một tập tin được khai báo trong thẻ .
JavaScript có một số đặc điểm:
Là một ngôn ngữ thông dịch, các script trong ngôn ngữ này không cần phải biên dịch trước khi thực thi Trình duyệt sẽ phân tích và thực hiện script ngay lập tức, mang lại sự linh hoạt và tiện lợi cho người lập trình.
Lập trình theo cấu trúc (Structured programing)
Có phân biệt chữ hoa và chữ thường
Responding (đáp lại) nhanh chóng các request (yêu cầu) của người dùng.+ Tạo ra các thành phần HTML nằm trong thành phần HTML khác.
+ Kiểm tra tính hợp lệ của dữ liệu do người dùng nhập (gửi nhận file, đăng ký người dùng, )
+ Thực hiện các tính toán đơn giản phía client (người dùng).
2.3.3 Cấu trúc của JavaScript Đoạn mã javascript được đặt trong cặp thẻ mở javascript
JavaScript được phát triển vào năm 1995 bởi Netscape Communications nhằm nâng cao trải nghiệm người dùng trên trình duyệt Nhận thấy nhu cầu sử dụng một "glue language", họ đã mời Brendan Eich tham gia vào dự án, ban đầu dựa trên ngôn ngữ Scheme Tuy nhiên, do sự nổi bật của Java vào thời điểm đó, họ đã quyết định thiết kế JavaScript với cú pháp tương tự Java Kết quả là một ngôn ngữ mới, kết hợp các tính năng của Scheme, định hướng đối tượng của SmallTalk và cú pháp của Java Phiên bản đầu tiên, mang tên Mocha, ra mắt vào tháng 5 năm 1995, sau đó đổi tên thành LiveScript vào tháng 9 và cuối cùng trở thành JavaScript vào tháng 12 năm 1995.
Năm 1996, JavaScript đã được gửi đến ECMA International để hoàn thiện thành một đặc tính kỹ thuật tiêu chuẩn Đến tháng 6 năm 1997, đặc tính kỹ thuật chính thức đầu tiên của ngôn ngữ này đã được phát hành, mang tên ECMA-262.
262 Phiên bản mới nhất của ngôn ngữ là ECMAScript 2017 được phát hành vào tháng 6 năm 2017.
Bootstrap
Bootstrap is a framework that facilitates faster and easier responsive web design, enabling the development of mobile-responsive websites It includes a variety of HTML templates, CSS templates, and JavaScript components, providing essential elements such as typography, forms, buttons, tables, navigation, modals, image carousels, and more Additionally, Bootstrap features built-in JavaScript plugins that streamline the responsive design process, making it more efficient and user-friendly.
Bootstrap, được phát triển bởi Mark Otto và Jacob Thornton tại Twitter, là một framework mã nguồn mở được phát hành vào ngày 19/8/2011 trên GitHub Ban đầu, nó được gọi là Twitter Blueprint Đến ngày 31/1/2012, phiên bản 2 của Bootstrap đã chính thức ra mắt.
Bootstrap 2 đã giới thiệu bố cục lưới 12 cột với thiết kế tùy chỉnh cho nhiều kích thước màn hình, tiếp nối thành công của nó, Bootstrap 3 ra mắt vào ngày 19/8/2013 với giao diện tương thích cho smartphone Chỉ sau 3 năm, Bootstrap đã trở thành dự án hàng đầu trên GitHub Vào tháng 10/2014, Mark Otto công bố rằng Bootstrap 4 đang được phát triển, và phiên bản alpha đầu tiên đã được triển khai vào tháng 8/2015 Phiên bản mới nhất hiện nay là Bootstrap 4.3.1, và Bootstrap vẫn là một trong những framework thiết kế website phổ biến nhất.
PHP
PHP (Hypertext Preprocessor) là một ngôn ngữ lập trình kịch bản mã nguồn mở, chủ yếu dùng để phát triển ứng dụng cho máy chủ Với khả năng nhúng dễ dàng vào HTML, PHP rất phù hợp cho các ứng dụng web nhờ vào tốc độ nhanh, cú pháp giống C và Java, cũng như thời gian xây dựng sản phẩm ngắn Nhờ những ưu điểm này, PHP đã trở thành ngôn ngữ lập trình web phổ biến nhất thế giới Ngôn ngữ và các thư viện của PHP được phát triển bởi cộng đồng, với sự đóng góp lớn từ Zend Inc., công ty do các nhà phát triển cốt lõi của PHP thành lập để thúc đẩy sự phát triển của PHP trong môi trường doanh nghiệp.
PHP được phát triển từ một sản phẩm có tên là PHP/FI PHP/FI do Rasmus Lerdorf tạo ra năm 1995 được viết bằng C và được sửa lại năm 1997.
PHP 3.0: Được Andi Gutmans và Zeev Suraski tạo ra năm 1997 sau khi viết lại hoàn toàn bộ mã nguồn trước đó Lý do chính mà họ đã tạo ra phiên bản này là do họ nhận thấy PHP/FI 2.0 không mở rộng được trong việc phát triển các ứng dụng thương mại điện tử PHP 3.0 như là phiên bản thế hệ kế tiếp của PHP/FI 2.0, và chấm dứt phát triển PHP/FI 2.0 PHP 3.0 cung cấp cho người dùng cuối một cơ sở hạ tầng dùng cho nhiều cơ sở dữ liệu, giao thức và API khác nhau Cho phép người dùng có thể mở rộng theo module Chính điều này làm cho PHP3 thành công so với PHP2 Lúc này chính thức đặt tên ngắn gọn là PHP (Hypertext Preprocessor). PHP4: Được công bố năm 2000 tốc độ xử lý được cải thiện, PHP 4.0 đem đến các tính năng chủ yếu khác gồm có hỗ trợ nhiều máy chủ web, hỗ trợ session HTTP, tạo output buffering, nhiều cách xử lý dữ liệu input bảo mật hơn và cung cấp một vài các cấu trúc ngôn ngữ mới Với PHP 4, số nhà phát triển dùng PHP lên đến hàng trăm nghìn và hàng triệu trang web dùng PHP, chiếm 20% số tên miền trên mạng Internet Team phát triển PHP lên tới con số hàng nghìn người và nhiều người khác tham gia vào các dự án có liên quan đến PHP như PEAR, PECL và tài liệu cho PHP.
PHP 5 chính thức ra mắt vào ngày 13 tháng 7 năm 2004, sau nhiều phiên bản thử nghiệm như Beta 4 và các bản RC 1, RC 2, RC 3 Dù là phiên bản sản xuất đầu tiên, PHP 5.0 vẫn tồn tại một số lỗi, trong đó lỗi xác thực HTTP là đáng chú ý.
2.5.3 Cú pháp Đoạn mã PHP thường được chữa trong cặp hoặc
Laravel
Laravel là một framework PHP mã nguồn mở và miễn phí, được phát triển bởi Taylor Otwell, nhằm hỗ trợ phát triển ứng dụng web theo kiến trúc MVC Nó nổi bật với cú pháp dễ hiểu và rõ ràng, hệ thống đóng gói modular, quản lý gói phụ thuộc, cùng với nhiều phương thức truy cập cơ sở dữ liệu quan hệ và tiện ích hỗ trợ triển khai, bảo trì ứng dụng.
Bản Laravel beta đầu tiên được phát hành vào ngày 9/6/2011, tiếp đó là Laravel
Laravel 1 được phát hành trong cùng tháng và bao gồm các tính năng như xác thực, bản địa hóa, model, view, session và định tuyến Tuy nhiên, nó vẫn thiếu controller, điều này khiến Laravel 1 chưa thực sự trở thành một framework MVC đúng nghĩa.
Laravel 2 được phát hành vào tháng 9 năm 2011, mang đến nhiều cài tiến từ tác giả và cộng đồng Tính năng đáng kể bao gồm hỗ trợ controller, điều này thực sự biến Laravel 2 thành một MVC framework hoàn chỉnh, hỗ trợ Inversion of Control (IoC), hệ thống template Blade Bên cạnh đó, có một nhược điểm là hỗ trợ cho các gói của nhà phát triển bên thứ 3 bị gỡ bỏ.
Laravel 3 được phát hành vào tháng 2 năm 2012, với một tấn tính năng mới bao gồm giao diện dòng lệnh (CLI) tên “Artisan”, hỗ trợ nhiều hơn cho hệ thống quản trị cơ sở dữ liệu, chức năng ánh xạ cơ sở dữ liệu Migration, hỗ trợ “bắt sự kiện” trong ứng dụng, và hệ thống quản lý gói gọi là “Bundles” Lượng người dùng và sự phổ biến tăng trưởng mạnh kể từ phiên bản Laravel 3.
Laravel 4, được biết đến với tên mã "Illuminate", ra mắt vào tháng 5 năm 2013, đánh dấu một bước tiến lớn trong việc tái cấu trúc framework Laravel Phiên bản này chuyển đổi các gói hỗ trợ thành một tập hợp được phân phối qua Composer, cải thiện khả năng mở rộng so với các phiên bản trước Laravel 4 giới thiệu lịch phát hành chính thức với các bản nâng cấp nhỏ mỗi sáu tháng, cùng với nhiều tính năng mới như tạo dữ liệu mẫu (database seeding), hỗ trợ hàng đợi, các phương thức gửi mail đa dạng, và tính năng "xóa mềm" (soft-delete), cho phép các bản ghi bị ẩn khỏi truy vấn mà không bị xóa hoàn toàn khỏi cơ sở dữ liệu.
Laravel 5 được phát hành trong tháng 2 năm 2015, như một kết quả thay đổi đáng kể cho việc kết thúc vòng đời nâng cấp Laravel lên 4.3 Bên cạnh một loạt tính năng mới và các cải tiến như hiện tại, Laravel 5 cũng giới thiệu cấu trúc cây thư mục nội bộ cho phát triển ứng dụng mới Những tính năng mới của Laravel 5 bao gồm hộ trợ lập lịch định kỳ thực hiện nhiệm vụ thông qua một gói tên là
“Scheduler” là một lớp trừu tượng trong “Flysystem”, giúp quản lý lưu trữ từ xa dễ dàng như trên máy local, với hỗ trợ mặc định cho dịch vụ Amazon S3 Nó cải tiến việc quản lý tài sản thông qua “Elixir” và đơn giản hóa quản lý xác thực với các dịch vụ bên ngoài nhờ gói “Socialite”.
Laravel 5.1 phát hành vào tháng 6 năm 2015, là bản phát hành đầu tiên nhận được hỗ trợ dài hạng (LTS) với một kết hoạch fix bug lên tới 2 năm vào hỗ trợ vá lỗi bảo mật lên tới 3 năm Các bản phát hành LTS của Laravel được lên kế hoạch theo mỗi 2 năm.
Laravel 5.3, được phát hành vào ngày 23 tháng 8 năm 2016 Các tính năng mới trong 5.3 tập trung vào việc cải thiện tốc độ phát triển bằng cách bổ sung thêm các cải tiến cho các tác vụ phổ biến.
Laravel 5.4 Phiên bản này có nhiều tính năng mới, như Laravel Dusk, Laravel
Mix, Blade Components và Slots, Markdown Emails, Automatic Facades, Route Improvements, Higher Order Messaging cho Collections, và nhiều thứ khác.
Laravel 5.5, phát hành vào ngày 30 tháng 8 năm 2017 là phiên bản LTS thứ 2 Laravel 5.6, phát hành vào ngày 7 tháng 2 năm 2018.
Laravel 5.7, phát hành vào ngày 4 tháng 9 năm 2018 với những cập nhật.
Cải thiện thông báo lỗi
Bổ sung phương thức mới cho tùy chỉnh phân trang
Thay đổi cấu trúc thư mục Resource
Laravel 6, phát hành vào ngày 3 tháng 9 năm 2019 Đây là version LTS Phiên bản này có gì mới?? Đổi versioning scheme sang Semantic Versioning
Cải thiện Exceptions thông qua Ignition
Laravel 7, ra mắt ngày 3 tháng 3 năm 2020 với nhiều tính năng mới như Laravel
Sanctum, Custome Eloquent Casts, Blade Component Tags, Fluent String Operations và Route Model Binding Improvements.
Laravel 8, ra mắt vào ngày 8 tháng 9 năm 2020, giới thiệu nhiều tính năng mới nổi bật như Laravel Jetstream, lớp mô hình nhà máy, tính năng nén di chuyển, và sử dụng Tailwind CSS cho chế độ xem phân trang, cùng với các cải tiến đáng kể về khả năng sử dụng.
Phiên bản Laravel mới nhất là phiên bản Laravel 9, được phát hành vào ngày 8 tháng 2 năm 2022.
Phân tích thiết kế hệ thống
Phân tích và thiết kế hệ thống
Phần quản lý trong admin
- Admin quản lý toàn bộ hoạt động của trang web.
- Quản lý nội dung bài viết, các bài viết liên quan, người đăng tải bài viết,….
- Quản lý tài nguyên preset.
- Tư vấn và trả lời các liên hệ của người dùng.
- Website không nên quá phức tạp.
- Dung lượng file không quá lớn.
- Phải có thông tin liên hệ.
- Thanh menu đơn giản, dễ sử dụng.
- Font chữ đơn giản, dễ nhìn, màu sắc hài hòa
- An toàn và bảo mật dữ liệu
- Kiểm tra website có tương thích với các trình duyệt phổ biến hay không.
- Hiển thị được các preset mới, các preset hot, các preset cùng loại,……
- Cho phép người dùng xem thông tin chi tiết, tìm kiếm các preset, bài viết mà người dùng quan tâm.
- Cho phép người dùng đăng ký tài khoản để download preset và sử dụng các ưu đãi
Hệ thống quản trị trang web
- Quản lý danh mục preset
- Quản lý preset: Cập nhật thông tin về các preset
- Quản lý tin tức, danh mục tin tức, ảnh của bài viết,….
- Quản lý danh sách người dùng.
Hệ thống giới thiệu preset
- Hiển thị danh mục preset.
- Hiển thị thông tin preset (người đăng tải, mô tả preset, hình ảnh, bài viết liên quan… )
- Giới thiệu về trang web.
- Hiển thị danh sách tin tức, bài viết.
- Cho phép đăng ký, đăng nhập tài khoản.
- Người dùng có thể xem các bài viết, các thông tin liên quan đến preset, download và sử dụng.
Thiết kế chi tiết với UML
Vào đầu những năm 1980, ngành công nghệ phần mềm chỉ có một ngôn ngữ hướng đối tượng duy nhất là Simula Đến nửa sau của thập kỷ 1980, các ngôn ngữ mới như Smalltalk và C++ ra đời, tạo ra nhu cầu mô hình hóa các hệ thống phần mềm theo hướng đối tượng UML, hay Ngôn ngữ Mô hình Hóa Thống nhất, đã được phát triển để đáp ứng nhu cầu này.
UML, hay ngôn ngữ mô hình hóa thống nhất, là một công cụ quan trọng trong việc sử dụng các ký hiệu hình học để diễn đạt và mô tả thiết kế hệ thống Nó giúp đặc tả, trực quan hóa, xây dựng và lưu trữ nhiều khía cạnh của hệ thống phần mềm UML cũng đóng vai trò là cầu nối giao tiếp hiệu quả giữa người dùng, nhà phân tích, nhà thiết kế và nhà phát triển phần mềm.
Một số biểu đồ cơ bản trong UML:
Biểu đồ Use Case trong ngôn ngữ UML mô tả các tương tác giữa hệ thống và các tác nhân thông qua các Use Case Mỗi biểu đồ này thể hiện rõ ràng hệ thống, tác nhân và các Use Case, đồng thời chỉ ra các mối quan hệ giữa chúng Một Use Case luôn được kích hoạt bởi một tác nhân và thực hiện nhân danh tác nhân đó, với yêu cầu tác nhân phải ra lệnh cho hệ thống, dù là trực tiếp hay gián tiếp Mục tiêu của mỗi Use Case là cung cấp giá trị cho tác nhân, giá trị này có thể không nổi bật nhưng phải rõ ràng Hơn nữa, một Use Case không phải là một thực thể mà là một lớp, mô tả đầy đủ một chức năng, bao gồm các giải pháp thay thế, lỗi có thể xảy ra và ngoại lệ trong quá trình thực thi.
Trong lập trình, "Use Case" có thể được sử dụng lại bằng cách áp dụng chức năng của một "Use Case" khác, tạo ra sự hiệu quả và tiết kiệm thời gian Đồng thời, "Use Case" cũng có thể được mở rộng từ một "Use Case" hiện có bằng cách thêm vào các chức năng cụ thể, giúp cải thiện và nâng cao khả năng hoạt động của hệ thống.
+ Generalization: Use – Case này được kế thừa các chức năng từ Use – Case kia.
Biểu đồ lớp là một mô hình tĩnh, thể hiện cái nhìn tổng quan về hệ thống thông qua các khái niệm lớp và mối quan hệ giữa chúng Nó đóng vai trò quan trọng trong việc tạo nền tảng cho các biểu đồ khác, như sơ đồ Use-Case, giúp tìm kiếm thông tin sản phẩm và mô tả mối quan hệ giữa hai cách diễn đạt khác nhau về cùng một đối tượng, nhưng ở các mức độ trừu tượng hóa khác nhau.
Biểu đồ tương tác chính này thể hiện trình tự thời gian của các thông điệp, đồng thời trình bày một tập hợp các đối tượng và các thông điệp được chuyển giao giữa chúng.
* Biểu đồ tuần tự có hai trục:
Trục dọc biểu thị thời gian, với mỗi đối tượng có một đường đời riêng, kết thúc khi đối tượng bị hủy bỏ Các thông điệp, được thể hiện bằng những mũi tên nằm ngang, nối kết đường đời của hai đối tượng và được sắp xếp theo thứ tự thời gian từ trên xuống dưới Trong khi đó, trục ngang đại diện cho một tập hợp các đối tượng, được thể hiện dưới dạng hình chữ nhật hoặc biểu tượng, sắp xếp thành hàng ngang trên đỉnh biểu đồ.
Ngoài ba biểu đồ cơ bản của UML, còn có các biểu đồ khác như biểu đồ hoạt động và biểu đồ trạng thái Tuy nhiên, do hạn chế về thời gian, tôi chỉ có thể nghiên cứu các biểu đồ cơ bản này.
3.2.2 Các tác nhân của hệ thống
Bảng 3.1 Bảng Tác nhân của hệ thống
STT Actor Ý nghĩa, nhiệm vụ của Actor
1 Tác nhân Admin và tác nhân giữ vai trò chính của hệ thống website, là người điều hành, quản lý và theo dõi mọi hoạt động của hệ thống.
Có thể thực hiện các chức năng có trong hệ thống quản trị như: đăng nhập, quản lý bài viết, preset,…
Người dùng truy cập website để khám phá nội dung blog, bài viết, preset và các mẹo hướng dẫn Họ có khả năng tìm kiếm và xem các bài viết mới, nội dung liên quan, cũng như để lại bình luận và phản hồi.
Hình 3.1 Biểu đồ Use case Tổng quát
Hình 3.2 Biểu đồ Use case Đăng nhập
Mô tả: Use case cho admin đăng nhập vào hệ thống. Điều kiện trước: admin đăng nhập vào hệ thống.
- Chọn chức năng đăng nhập.
- Giao diện đăng nhập hiển thị.
Nhập mã admin, mật khẩu vào giao diện đăng nhập
Hệ thống kiểm tra mã admin và mật khẩu của quản trị viên Nếu thông tin nhập vào không chính xác, hệ thống sẽ chuyển hướng đến sự kiện rẽ nhánh A.I Ngược lại, nếu thông tin đúng, người dùng sẽ được chuyển tới trang quản trị.
Dòng sự kiện rẽ nhánh:
Dòng rẽ nhánh A.I: admin đăng nhập không thành công.
Hệ thống thông báo quá trình đăng nhập không thành công do sai mã admin hoặc mật khẩu.
Chọn nhập lại hệ thống sẽ yêu cầu nhập lại mã admin, mật khẩu.
Kết quả: admin đăng nhập thành công và có thể sử dụng các chức năng quán lý tương ứng trong trang quản trị.
Use case Quản lý danh mục preset
Hình 3.3 Biểu đồ Use case Quản lý danh mục preset
Mô tả: Tính năng cho phép người dùng quản lý thông tin danh mục preset trong hệ thống, bao gồm các thao tác xem, thêm, sửa, xóa và tìm kiếm Điều kiện tiên quyết là admin phải đăng nhập vào hệ thống để thực hiện các chức năng này.
- Người sử dụng chọn kiểu tác động: thêm, sửa, xóa, tìm kiếm thông tin danh mục preset
Nếu việc thay đổi thành công, hệ thống sẽ thông báo kết quả Ngược lại, nếu có sai sót, quy trình sẽ chuyển sang dòng rẽ nhánh A.I và lưu trữ thông tin danh sách các danh mục preset.
Kết quả: các thông tin về danh mục preset được cập nhật trong cơ sở dữ liệu.
Use case Quản lý preset
Hình 3.4 Biểu đồ Use case Quản lý preset
Mô tả: Use case cho phép xem, thêm, sửa, xóa, tìm kiếm thông tin preset trong hệ thống. Điều kiện trước: admin đã đăng nhập vào hệ thống.
- Người sử dụng chọn kiểu tác động: thêm, sửa, xóa, tìm kiếm thông tin preset
- Nếu việc thay đổi thành công thì hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A.I, lưu thông tin danh sách preset.
Kết quả: các thông tin về preset được cập nhật trong cơ sở dữ liệu.
Use case Quản lý người dùng
Hình 3.5 Biểu đồ Use case Quản lý người dùng
Mô tả: Use case cho phép xem, thêm, sửa, xóa, tìm kiếm thông tin người dùng. Điều kiện trước: admin đã đăng nhập vào hệ thống.
- Người dùng chọn kiểu tác động: thêm, sửa, xóa, tìm kiếm thông tin người dùng.
- Nếu việc thay đổi thành công thì hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A.I, lưu thông tin danh sách người dùng.
Kết quả: các thông tin về nguời dùng được cập nhật trong cơ sở dữ liệu.
Use case Quản lý bài viết
Hình 3.6 Biểu đồ Use case Quản lý bài viết
Mô tả: Use case cho phép xem, thêm, sửa, xóa, tìm kiếm thông tin bài viết. Điều kiện trước: admin đã đăng nhập vào hệ thống.
- Người dùng chọn kiểu tác động: thêm, sửa, xóa, tìm kiếm thông tin bài viết.
- Nếu việc thay đổi thành công thì hệ thống sẽ đưa ra thông báo, nếu sai thì thực hiện dòng rẽ nhánh A.I, lưu thông tin danh sách bài viết.
Kết quả: các thông tin về bài viết được cập nhật trong cơ sở dữ liệu.
Hình 3.7 Biểu đồ tuần tự chức năng Đăng nhập
Hình 3.8 Biểu đồ tuần tự chức năng Quản lý preset
Hình 3.9 Biểu đồ tuần tự chức năng Quản lý danh mục preset
Hình 3.10 Biểu đồ tuần tự chức năng Quản lý người dùng
3.2.5 Biểu đồ, danh sách các đối tượng
Bảng 3.2 Bảng Danh sách các đối tượng
STT Tên lớp/quan hệ Ý nghĩa/Ghi chú
1 Admin Mô tả các thuộc tính và các phương thức liên quan tới nghiệp vụ quản lý Admin.
2 Category_preset Mô tả các thuộc tính và các phương thức liên quan tới nghiệp vụ quản lý danh mục preset.
3 Category_New Mô tả các thuộc tính và các phương thức liên quan tới nghiệp vụ quản lý tạo mới danh mục.
4 News Mô tả các thuộc tính và các phương thức liên quan tới nghiệp vụ quản lý bài viết.
5 Preset Mô tả các thuộc tính và các phương thức liên quan tới nghiệp vụ quản lý danh sách preset.
6 User Mô tả các thuộc tính và các 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ế cơ sở dữ liệu
Bảng 3.3 Danh sách các bảng
STT Tên thực thể Mô tả
1 Admin Lưu thông tin danh sách các Admin.
2 Category_Preset Lưu thông tin danh sách danh mục sản phẩm.
3 Category_New Lưu thông tin tạo danh mục bài viết mới.
4 News Lưu thông tin bài viết, tin tức.
5 Preset Lưu thông tin danh sách preset.
6 User Lưu thông tin danh sách người dùng.
STT Tên thực thể Kiểu dữ liệu Mô tả
1 Admin_ID Char Mã Admin
2 Role Int Biểu thị quyền của người dùng
3 Username String Tên đăng nhập
6 Created_at Timestamp Ngày tạo
7 Updated_at Timestamp Ngày hoạt động gần nhất
STT Tên thực thể Kiểu dữ liệu Mô tả
1 Category_ID Char Mã danh mục preset
2 Name String Tên danh mục preset
3 Order Int Thứ tự hiển thị của danh mục
4 Created_at Timestamp Ngày tạo
5 Updated_at Timestamp Ngày chỉnh sửa gần nhất
STT Tên thực thể Kiểu dữ liệu Mô tả
1 Category_New_ID Char Mã danh mục bài viết
2 Name String Tên danh mục bài viết
3 Sort_order Int Thứ tự hiển thị của danh mục
5 Created_at Timestamp Ngày tạo
6 Updated_at Timestamp Ngày chỉnh sửa gần nhất
STT Tên thực thể Kiểu dữ liệu Mô tả
1 New_ID Char Mã bài viết
2 Category_New_ID Char Mã danh mục bài viết
3 Title String Tiêu đề bài viết
4 Info String Mô tả bài viết
5 Content String Nội dung bài viết
6 Image String Ảnh mô tả bài viết
7 Created_at Timestamp Ngày tạo bài viết
8 Updated_at Timestamp Ngày chỉnh sửa gần nhất
STT Tên thực thể Kiểu dữ liệu Mô tả
1 Preset_ID Char Mã preset
2 Preset_name String Tên preset
3 Category_ID Char Mã danh mục preset
4 Hot Int Preset phổ biến, nhiều lượt yêu thích
7 Image String Ảnh mô tả preset
8 Description String Mô tả preset
10 Created_at Timestamp Ngày tạo
11 Updated_at Timestamp Ngày cập nhật gần nhất
STT Tên thực thể Kiểu dữ liệu Mô tả
1 User_ID Char Mã khách hàng
2 Name String Tên khách hàng
5 Phone Int Số điện thoại
8 Created_at Timestamp Ngày tạo
9 Updated_at Timestamp Ngày hoạt động gần đây
Chương 5 Triển khai xây dựng
5.1 Chức năng trang web Đây là một 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 các chức năng sau: Đăng nhập Đăng ký
Tìm kiếm thông tin về presets
Tìm kiếm thông tin về các tips chụp hình, tips phối đồ
Tải và sử dụng presets
5.3.1 Giao diện trang chủ hiển thị
Hình 4.1 Giao diện Trang chủ
Hình 4.2 Giao diện giới thiệu
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)
Hình 4.6 Giao diện chi tiết preset (2)
Hình 4.7 Giao diện bài viết (1) hình 4.8 Giao diện bài viết (2)
Hình 4.9 Giao diện đăng ký
Hình 4.10 Giao diện đăng nhập
Hình 4.11 Giao diện admin quản lý Danh mục preset
Hình 4.12 Giao diện admin quản lý Danh mục bài viết
Hình 4.13 Giao diện admin quản lý Danh sách preset
Chương 6 Kết luận và Hướng phát triển
6.1.1 Chương trình đã làm được
Xem thông tin của các đề mục
Có thể chạy trên nhiều giao diện,hệ điều hành khác nhau
Giao diện đẹp mắt, dễ sử dụng
Admin có thể quan lý toàn bộ trang web, bao gồm: quản lý người dùng, quản lý preset, quản lý bài viết,….
6.1.2 Chương trình chưa làm được
Chưa cập nhật tính năng cho biên tập viên
Thời gian còn quá ít nên còn bị hạn chế về dữ liệu
Khi đưa vào hoạt động thực tế trên host hệ thống chưa đáp ứng được nhu cầu về tốc độ tải.
Mở rộng thêm nguồn dữ liệu về presets
Làm thêm chức năng cho biên tập viên
Xử lý thêm chức năng cho admin
Cải thiện tốc độ xử lý