Đồ án tốt nghiệp chuyên ngành Công Nghệ Phần Mềm PHIẾU GIAO NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP 1 Mục tiêu của ĐATN Nghiên cứu và thử nghiệm bài toán Phân tích Thiết kế hệ thống Từ đó phân tích thiết kế website.
CƠ SỞ LÝ THUYẾT
HTML
[ CITATION HTM21 \l 1033 ] HTML tạm dịch là ngôn ngữ đánh dấu siêu văn bản Người ta thường sử dụng HTML trong việc phân chia các đoạn văn, heading, links, blockquotes,…
Hình 2- 1 : HTML là ngôn ngữ đánh dấu siêu văn bản
Một website thường bao gồm nhiều trang con, mỗi trang con được lưu trữ trong một tập tin HTML riêng biệt Cần lưu ý rằng HTML không phải là ngôn ngữ lập trình, do đó nó không có khả năng thực hiện các chức năng lập trình.
HTML là ngôn ngữ đánh dấu cơ bản giúp bố cục và định dạng trang web, tương tự như phần mềm Microsoft Word Khi kết hợp với CSS và JavaScript, HTML tạo thành nền tảng vững chắc cho thế giới mạng.
Nguyễn Đức Nguyên XIX Lớp CNPM B K62
HTML, được phát triển bởi Tim Berners-Lee tại CERN, hiện là một chuẩn Internet do tổ chức W3C quản lý Bạn có thể theo dõi tình trạng mới nhất của HTML trên trang web của W3C bất kỳ lúc nào.
Hình 2- 2: HTML được phát hành lần đầu tiên vào 1991
HTML ra đời lần đầu vào năm 1991 với 18 thẻ HTML Năm 1999, phiên bản HTML 4.01 được phát hành, và vào năm 2000, HTML đã được thay thế bằng XHTML Đến năm 2014, HTML5 được giới thiệu với nhiều thẻ mới trong markup, nhằm xác định rõ ràng nội dung của các loại khác nhau.
Theo Mozilla Developer Network, hiện nay có hơn 140 thẻ trong tài liệu tham khảo các phần tử HTML Tuy nhiên, một số thẻ trong số đó đã bị ngừng hỗ trợ do không còn được các trình duyệt hiện tại hỗ trợ.
1.1.3 Ưu diểm và nhược điểm của HTML
Nguyễn Đức Nguyên XX Lớp CNPM B K62
Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn
Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay
Học HTML khá đơn giản cho người mới bắt đầu
Các markup sử dụng trong HTML thường ngắn gọn và có độ đồng nhất cao
Sử dụng mã nguồn mở, hoàn toàn miễn phí
HTML là chuẩn web được vẫn hành bởi W3C
Dễ dàng để tích hợp với các loại ngôn ngữ backend ( như : PHP, Node.js)
Chỉ áp dụng chủ yếu cho website tĩnh, để tạo ra các tính năng động, lập trình viên cần sử dụng thêm JavaScript hoặc ngôn ngữ backend của bên thứ ba như PHP.
Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tố trùng lặp như header, footer.
Việc kiểm soát cách đọc và hiển thị file HTML trên trình duyệt gặp nhiều khó khăn, đặc biệt với các trình duyệt cũ không hỗ trợ các thẻ HTML mới Điều này dẫn đến việc những thẻ này không được trình duyệt nhận diện, mặc dù chúng có mặt trong tài liệu HTML.
Một vài trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML
1.1.4 Các thuật ngữ HTML phổ biến
Các yếu tố (Elements) trong một Website là các chỉ định xác định nội dung và cấu trúc của các đối tượng Tên của mỗi yếu tố được bao quanh bởi dấu ngoặc < > Một số yếu tố phổ biến bao gồm đoạn văn (
), các cấp độ tiêu đề từ đến , danh sách, cũng như các yếu tố khác như , , , , và .
Các thẻ trong HTML được định nghĩa bởi các dấu ngoặc < >, trong đó thẻ mở như đánh dấu sự bắt đầu của một Element, còn thẻ đóng như đánh dấu sự kết thúc Nội dung của Element nằm giữa thẻ mở và thẻ đóng.
Attributes là các thuộc tính dùng để cung cấp thông tin bổ sung cho một Element Chúng bao gồm tên và giá trị, được xác định ngay sau tên của thành phần trong thẻ mở Định dạng của Attributes được thể hiện như sau.
Nguyễn Đức Nguyên XXI Lớp CNPM B K62 đề cập đến cách sử dụng thuộc tính trong HTML, trong đó cấu trúc là tên thuộc tính, dấu bằng và giá trị thuộc tính được trích dẫn Ví dụ, thẻ `` có thuộc tính `href` như sau: `Shay Howe` Một số thuộc tính thường được sử dụng bao gồm `Class`, `ID`, `SRC`, và `href`.
HTML5, được phát hành vào năm 2014, là phiên bản nâng cấp của HTML, ra mắt lần đầu vào năm 1999 So với phiên bản trước, HTML5 đã bổ sung nhiều tính năng quan trọng, nâng cao khả năng phát triển web.
HTML5 hỗ trợ nhúng video và audio trực tiếp vào trang web mà không cần sử dụng Flash Player, giúp lập trình viên dễ dàng tích hợp các tệp tin âm thanh và video thông qua các thẻ và .
Hỗ trợ scalable vector graphic (SVG) và MathML cho các công thức toán học hoặc phương trình hóa học.
Có thêm nhiều cải thiện về mặt ngôn ngữ Chứa nhiều semantic tag giúp người dùng hiểu được nội dung chính của Website là gì (ví dụ như:
,,,, ).
Hỗ trợ nhiều loại kiểu form hơn so với HTML như : email cho doanh nghiệp, ngày/giờ, số điện thoại, URL, tìm kiếm,…
In HTML5, several outdated tags have been removed, including isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, and strike.
Một điểm khác biệt quan trọng giữa HTML và HTML5 là HTML không cho phép JavaScript chạy trong trình duyệt, mà JavaScript chỉ có thể hoạt động trong interface thread của trình duyệt Ngược lại, HTML5 hỗ trợ JavaScript chạy nền thông qua API web worker, mang lại hiệu suất tốt hơn cho các ứng dụng web.
Nguyễn Đức Nguyên XXII Lớp CNPM B K62
Nguyễn Đức Nguyên XXIII Lớp CNPM B K62
CSS
[ CITATION CSS21 \l 1033 ]CSS là chữ viết tắt của Cascading
Style Sheets, hay còn gọi là CSS, là ngôn ngữ dùng để tìm và định dạng các phần tử do HTML tạo ra Nói một cách đơn giản, CSS giúp tạo phong cách cho trang web Trong khi HTML định dạng các phần tử như đoạn văn, tiêu đề và bảng, CSS cho phép chúng ta thêm các yếu tố thẩm mỹ như bố cục, màu sắc trang, màu chữ, font chữ và thay đổi cấu trúc của các phần tử HTML.
CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web.
CSS hoạt động bằng cách tìm kiếm các vùng chọn, bao gồm tên thẻ HTML, ID, class và nhiều kiểu khác Sau khi xác định được vùng chọn, CSS sẽ áp dụng các thuộc tính cần thiết để thay đổi kiểu dáng của chúng.
Nguyễn Đức Nguyên XXIV Lớp CNPM B K62
HTML và CSS có mối quan hệ chặt chẽ; HTML là ngôn ngữ đánh dấu nền tảng cho website, trong khi CSS định hình phong cách và giao diện của nó Hai yếu tố này không thể tách rời trong việc xây dựng một trang web hoàn chỉnh.
1.2.2 Tại sao cần phải có CSS
Giải quyết một vấn đề lớp
Trước khi có CSS, việc lặp lại các thuộc tính như phông chữ, màu sắc, kiểu nền, sắp xếp phần tử, đường viền và kích thước trên mỗi trang web là một quá trình tốn thời gian và công sức Đặc biệt, trong phát triển các trang web lớn
CSS giúp tổ chức mã nguồn của trang web một cách gọn gàng và trật tự, tách biệt rõ ràng nội dung trong việc định dạng hiển thị Nhờ đó, quá trình cập nhật nội dung trở nên dễ dàng hơn và giảm thiểu rối rắm cho mã HTML.
Sử dụng CSS từ các tệp bên ngoài giúp tiết kiệm thời gian đáng kể bằng cách cho phép thay đổi toàn bộ giao diện trang web chỉ với một tệp Điều này không chỉ loại bỏ sự lặp lại trong việc mô tả các thành phần mà còn rút ngắn mã nguồn, giúp kiểm soát và khắc phục lỗi hiệu quả hơn.
CSS cung cấp nhiều kiểu dáng khác nhau, cho phép áp dụng linh hoạt trên nhiều trang web, từ đó giúp giảm thiểu việc lặp lại định dạng cho các trang web tương tự.
Nguyễn Đức Nguyên XXV Lớp CNPM B K62
Cung cấp các thuộc tính
CSS cung cấp các thuộc tính phong phú hơn HTML để định hình giao diện trang web Nhờ vào CSS, người dùng có thể áp dụng nhiều kiểu dáng khác nhau cho một trang HTML, mở ra khả năng tùy chỉnh vô hạn cho thiết kế của bạn.
1.2.3 Các phiên bản của CSS
CSS được xuất hiện lần đầu tiờn vào ngày 10/10/1994 bởi Hồkon Wium
CSS đã trải qua nhiều giai đoạn phát triển và hiện có 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 có những đặc điểm nổi bật như: thuộc tính font chữ, màu sắc văn bản, hình nền, các thuộc tính văn bản, căn lề, định vị các yếu tố, cùng với khả năng nhận dạng duy nhất và phân loại chung cho các nhóm thuộc tính.
CSS phiên bản 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 đầu tiên Phiên bản này giới thiệu các tính năng mới như định vị tuyệt đối, tương đối và cố định cho các yếu tố chỉ mục z, mở rộng khả năng thiết kế web.
Nguyễn Đức Nguyên XXVI Lớp CNPM B K62
CSS đóng vai trò quan trọng trong việc hỗ trợ biểu định kiểu cho âm thanh và văn bản hai chiều, giúp cải thiện trải nghiệm người dùng Sự xuất hiện của các kiểu font chữ mới đã mở ra nhiều cơ hội để định dạng văn bản một cách sáng tạo và hấp dẫn hơn.
Sau phiên bản 2, CSS 2.1 đã được phát hành vào tháng 4 năm 2011, với mục tiêu sửa lỗi và loại bỏ các 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ự bổ sung các module mở rộng tính năng và duy trì khả năng tương thích ngược Nó cung cấp các bộ chọn và thuộc tính mới, mang lại sự linh hoạt hơn trong việc bố trí và trình bày trang Nhờ đó, lập trình viên có thể 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.
Nguyễn Đức Nguyên XXVII Lớp CNPM B K62
CSS 4 là phiên bản kế thừa CSS 3 hiện vẫn đang được cập nhật, phát triển và được dự đoán sẽ có rất nhiều phương thức mới được thêm vào như:Mutability, Hyperlink…
Javascript
JavaScript là một ngôn ngữ lập trình web phổ biến, được tích hợp vào HTML để làm cho website trở nên sống động hơn Nó hoạt động như một phần của website, cho phép thực hiện các script phía máy khách, tương tự như trên máy chủ với Node.js, từ đó tạo ra những trang web động và tương tác.
JavaScript, hay còn gọi là JS, là một ngôn ngữ lập trình phổ biến hiện nay, được sử dụng rộng rãi trong nhiều lĩnh vực Trong những năm gần đây, nhiều framework đã được phát triển dựa trên ngôn ngữ này JS hiện diện từ frontend đến backend, khẳng định vị trí quan trọng của nó trong ngành công nghệ thông tin.
1.3.2 Lịch sử phát triển của Javascript
Nguyễn Đức Nguyên XXVIII Lớp CNPM B K62
Brendan Eich là người phát triển JavaScript tại Netscape, ban đầu được gọi là Mocha Sau đó, tên gọi Mocha đã được đổi thành LiveScript và cuối cùng là JavaScript.
Năm 1998, JavaScript với phiên bản mới nhất là ECMAScript 2 phát hành và đến năm 1999 thì ECMAScript 3 được ra mắt
Vào năm 2016, ứng dụng JavaScript đã thiết lập kỷ lục với 92% website sử dụng, khẳng định vai trò quan trọng của nó trong lĩnh vực lập trình.
1.3.3 Cách dùng và phương thức hoạt động của Javascript
Cách hoạt động của javascript là gì?
Thông thường, JavaScript sẽ được nhúng trực tiếp vào một website hoặc chúng được tham chiếu qua file js hoặc JavaScript
Đây là một ngôn ngữ đến từ phía Client nên Script sẽ được download về máy client khi truy cập
Tại đây, hệ thống sẽ xử lý dữ liệu một cách tự động, giúp bạn không cần phải tải về máy chủ và chờ đợi kết quả Điều này mang lại sự tiện lợi và nhanh chóng trong việc phản hồi cho khách hàng.
Nguyễn Đức Nguyên XXIX Lớp CNPM B K62
Hình 2- 7: Quá trình phát trển của Javascript
Javascript dùng để làm gì?
Ngoài việc tìm hiểu JavaScript là ngôn ngữ gì, việc hiểu rõ ứng dụng của nó cũng rất quan trọng Nắm bắt mục đích sử dụng của ngôn ngữ này sẽ giúp bạn áp dụng hiệu quả hơn trong công việc của mình.
Sử dụng phương thức getElementById() trong JavaScript là một cách hiệu quả để thay đổi nội dung HTML Phương thức này cho phép bạn tìm kiếm phần tử HTML có id="demo" và cập nhật nội dung bên trong nó thành "Hello JavaScript".
JavaScript cho phép thay đổi giá trị của thuộc tính HTML, chẳng hạn như thay đổi thuộc tính src (source) của thẻ .
Thay đổi kiểu HTML: Đây chính là một hoạt động biến thể của việc thay đổi thuộc tính của HTML ở trên Ví dụ: document.getElementById(‘demo’).style.fontSize = ’35px;
Javascript có khả năng ẩn các phần tử HTML bằng cách thay đổi kiểu hiển thị của chúng Điều này cho phép lập trình viên kiểm soát sự hiển thị của các thành phần trên trang web một cách linh hoạt.
Nguyễn Đức Nguyên XXX Lớp CNPM B K62
Hình 2- 8: Công dụng của Javascript
2.3.4 Ưu điểm và nhược điểm của ngôn ngữ lập trình Javascript Ưu điểm
Những lỗi Javascript rất dễ để phát hiện, từ đó giúp bạn sửa lỗi một cách nhanh chóng hơn
Những trình duyệt web có thể dịch thông qua HTML mà không cần sử dụng đến một compiler.
JS có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khác nhau.
Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ và nhanh hơn nhiều so với các ngôn ngữ lập trình khác
JS còn có thể được gắn trên một số các element hoặc những events của các trang web
Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó có sự tương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng
Người dùng có thể sử dụng JavaScript để kiểm tra các input một cách tự động, thay vì phải thực hiện kiểm tra thủ công thông qua việc truy xuất cơ sở dữ liệu.
Giao diện của ứng dụng rất phong phú, tích hợp nhiều thành phần như Drag and Drop và Slider, mang đến cho người dùng trải nghiệm Rich Interface (giao diện giàu tính năng).
Giúp thao tác với người dùng phía Client và tách biệt giữa các Client với nhau
Nguyễn Đức Nguyên XXXI Lớp CNPM B K62
Hình 2- 9 : Những ưu điểm nổi trội của Javascipt
JS Code Snippet khá lớn
JS dễ bị các hacker và scammer khai thác hơn
JS cũng không có khả năng đa luồng hoặc đa dạng xử lý
Có thể được dùng để thực thi những mã độc ở trên máy tính của người sử dụng
Những thiết bị khác nhau có thể sẽ thực hiện JS khác nhau, từ đó dẫn đến sự không đồng nhất
Vì tính bảo mật và an toàn nên các Client-Side Javascript sẽ không cho phép đọc hoặc ghi các file
JS không được hỗ trợ khi bạn sử dụng ở trong tình trạng thiết bị được kết nối mạng
Nguyễn Đức Nguyên XXXII Lớp CNPM B K62
Hình 2- 10: Một số nhược điểm còn tồn tại
1.3.4 Điểm khác biệt Javascript với HTML, CSS, PHP
JavaScript giúp nâng cao tính tương tác trên web bằng cách chạy trực tiếp trên trình duyệt của người dùng, thay vì trên server Thêm vào đó, JS thường sử dụng thư viện của bên thứ ba để mở rộng chức năng cho website mà không cần phải viết lại mã từ đầu.
HTML là một trong những ngôn ngữ lập trình phổ biến nhất trên web, đóng vai trò quan trọng trong việc xây dựng các khối cấu trúc chính của một trang web.
PHP là một ngôn ngữ lập trình phía server, khác với JavaScript chạy trên máy client Nó thường được sử dụng trong các hệ quản trị nội dung như WordPress và đóng vai trò quan trọng trong lập trình Back-end, giúp tạo ra các kênh truyền tải thông tin hiệu quả từ cơ sở dữ liệu.
Cascading Style Sheets (CSS) cho phép webmaster xác định các kiểu dáng và định nghĩa nhiều loại nội dung khác nhau Mặc dù bạn có thể thao tác thủ công với các yếu tố HTML, nhưng việc này có thể dẫn đến việc lặp lại các thành phần ở nhiều vị trí khác nhau.
Responsive Web Design
Thiết kế web đáp ứng là phương pháp phát triển trang web và ứng dụng nhằm tối ưu hóa trải nghiệm người dùng dựa trên kích thước màn hình, nền tảng và định hướng của thiết bị.
Website chuẩn responsive đảm bảo hiển thị tối ưu trên tất cả các thiết bị, trình duyệt và kích cỡ màn hình khác nhau Tùy thuộc vào loại màn hình, các trang web sẽ được điều chỉnh để phù hợp với chiều ngang hoặc chiều dọc, như chiều dọc trên các thiết bị di động, đồng thời sắp xếp menu và bố cục một cách hợp lý.
Để một website thực sự responsive, không chỉ cần đảm bảo yếu tố hiển thị mà còn phải tối ưu hóa hành vi người dùng Người dùng nên có khả năng xem nội dung rõ ràng mà không cần phải phóng to hay cuộn ngang màn hình Ngoài ra, website cần có khoảng trống hợp lý để người dùng dễ dàng nhấn vào các nút mà không bị nhầm lẫn.
Nguyễn Đức Nguyên XXXIV Lớp CNPM B K62
1.4.2 Những lợi ích Responsive Web Design mang lại
Giúp tiết kiệm thời gian và chi phí đáng kể bằng cách không cần duy trì nhiều phiên bản website khác nhau cho điện thoại và máy tính.
Cải thiện điểm SEO, tối ưu SEO OnPage, đặc biệt hữu ích cho thiết kế website chuẩn SEO
Tăng tỷ lệ chuyển đổi đáng kể (Higher Conversion Rates)
Website sẽ load nhanh hơn và được nhiều trình duyệt hỗ trợ
Giảm tỷ lệ thoát trang (Bounce Rates)
Việc bảo trì trang web trở nên dễ dàng hơn vì không cần can thiệp vào phía server; chỉ cần điều chỉnh HTML và CSS để cập nhật giao diện hoặc bố cục phù hợp với các thiết bị khác nhau.
Nguyễn Đức Nguyên XXXV Lớp CNPM B K62
Hình 2- 12 : Những lợi ích Responsive Web Design mang lại
1.4.3 Các nguyên tắc cơ bản để thiết kế website chuẩn Responsive
Nếu không sử dụng thẻ , trang web của bạn có thể gặp phải vấn đề về kích thước, như quá nhỏ hoặc bố cục bị kéo dài ra ngoài khung màn hình Thẻ giúp thiết bị nhận biết kích thước khung hình, từ đó cải thiện khả năng hiển thị của trang web.
widthice-width: thiết lập chiều rộng của trang web theo chiều rộng của thiết bị
initial-scale=1.0: thiết lập mức độ zoom ban đầu khi trang web được load bởi trình duyệt
Nguyễn Đức Nguyên XXXVI Lớp CNPM B K62
Hình 2- 13: Viewport là gì và minh họa giữa việc có và không có Viewport meta tag b.Fluid Grid – Bố cục linh hoạt
Fluid Grid là một hệ thống bố cục linh hoạt, được thiết kế dựa trên độ phân giải màn hình của người dùng, khác biệt hoàn toàn so với các layout cố định Hệ thống này sử dụng các đơn vị tính, chủ yếu là phần trăm (%) để xác định độ rộng cột, ví dụ như cột có độ rộng 25%, cùng với đơn vị em để tạo khoảng cách giữa các cột.
Fluid Grid chỉ thực hiện tốt vai trò của nó, nhưng khi các trình duyệt ngày càng hẹp hơn, những thách thức mới xuất hiện Đó là lý do tại sao Media Queries trở nên cần thiết.
Media Queries là kỹ thuật trong CSS cho phép chúng ta áp dụng các thuộc tính CSS chỉ khi một điều kiện cụ thể được đáp ứng, thông qua cú pháp @media.
Cách thức sử dụng Media Queries
Sử dụng trực tiếp cú pháp @media ở trong file style sẵn có.
Tạo 1 file chứa Media Queries riêng và @import nó vào CSS.
Gắn riêng mỗi file style trên các khung hình khác nhau vào qua HTML.
Nguyễn Đức Nguyên XXXVII Lớp CNPM B K62
Hình 2- 14: Fluid Grid – Bố cục linh hoạt
Nguyên tắc của Mobile First trong Responsive
Mobile-first là tiêu chuẩn ưu tiên mặc định cho các khung hình nhỏ như thiết bị di động sau đó mới cho các tablet và desktop.
Hình 2- 15 : Nguyên tắc của Mobile First trong Responsive
@media screen and (min-width: 240px){ } /Iphone(480 x 640)/
@media screen and (min-width: 320px){ } /Tablet nhỏ(480 x 640)/
@media screen and (min-width: 480px){ } /Ipad dọc(768 x 1024)/
@media screen and (min-width: 768px){ } /Ipad ngang(1024 x 768)/
@media screen and (min-width: 1024px){ }
Nguyễn Đức Nguyên XXXVIII Lớp CNPM B K62
Công cụ lập trình
Visual Studio Code (VS Code) là một trong những trình soạn thảo mã nguồn phổ biến nhất cho lập trình viên nhờ vào tốc độ nhanh, tính nhẹ, hỗ trợ đa nền tảng và nhiều tính năng nổi bật Với mã nguồn mở, VS Code ngày càng được ứng dụng rộng rãi trong cộng đồng lập trình.
Visual Studio Code là một trình biên tập mã nguồn miễn phí, hỗ trợ các hệ điều hành Windows, Linux và macOS, được phát triển bởi Microsoft Đây là sự kết hợp hoàn hảo giữa môi trường phát triển tích hợp (IDE) và trình biên tập mã.
Visual Studio Code cung cấp chức năng debug mạnh mẽ, tích hợp Git, hỗ trợ syntax highlighting, tự hoàn thành mã thông minh, và snippets, giúp cải thiện hiệu suất lập trình Bên cạnh đó, tính năng tùy chỉnh cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác theo nhu cầu cá nhân.
Nguyễn Đức Nguyên XXXIX Lớp CNPM B K62
Hình 2- 16 : Visual Studio Code là gì?
1.5.2 Một số tính năng của Visual Studio Code
Hình 2- 17: Những tiện ích mà Visual Studio mang lại
Hỗ trợ nhiều ngôn ngữ lập trình
Visual Studio Code hỗ trợ đa dạng ngôn ngữ lập trình như C/C++, C#, F#, Visual Basic, HTML, CSS và JavaScript, giúp người dùng dễ dàng phát hiện lỗi trong mã nguồn và nhận thông báo kịp thời.
Hỗ trợ đa nền tảng
Visual Studio Code là một trình viết code đa nền tảng, hoạt động hiệu quả trên Windows, Linux và Mac Systems, mang lại sự linh hoạt cho lập trình viên.
Cung cấp kho tiện ích mở rộng
Nếu lập trình viên cần sử dụng ngôn ngữ lập trình không được Visual Studio hỗ trợ, họ có thể tải xuống tiện ích mở rộng mà không ảnh hưởng đến hiệu suất của phần mềm, vì các tiện ích này hoạt động như chương trình độc lập.
Nguyễn Đức Nguyên XL Lớp CNPM B K62
Với sự phát triển của lập trình, nhu cầu lưu trữ an toàn ngày càng tăng cao Visual Studio Code đáp ứng nhu cầu này một cách hiệu quả, cho phép người dùng dễ dàng kết nối với Git hoặc bất kỳ kho lưu trữ nào khác, mang lại sự yên tâm cho người lập trình.
Visual Studio Code hỗ trợ nhiều ứng dụng web Ngoài ra, nó cũng có một trình soạn thảo và thiết kế website.
Lưu trữ dữ liệu dạng phân cấp
Hầu hết các tệp lưu trữ đoạn mã thường được tổ chức trong các thư mục tương tự nhau, trong khi Visual Studio Code cung cấp các thư mục riêng cho những tệp quan trọng.
Một số đoạn code có thể được điều chỉnh để cải thiện trải nghiệm người dùng Visual Studio Code cung cấp các gợi ý thay thế cho lập trình viên khi có sẵn các tùy chọn khác.
Hỗ trợ thiết bị đầu cuối
Visual Studio Code tích hợp thiết bị đầu cuối, giúp người dùng tiết kiệm thời gian và công sức bằng cách loại bỏ nhu cầu chuyển đổi giữa các màn hình hoặc quay về thư mục gốc trong quá trình làm việc.
Người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và thư mục – mặc dù chúng không hề liên quan với nhau.
Visual Studio Code hỗ trợ kéo hoặc sao chép mã trực tiếp từ GitHub.
Mã này sau đó có thể được thay đổi và lưu lại trên phần mềm.
Nguyễn Đức Nguyên XLI Lớp CNPM B K62
Việc để lại nhận xét giúp người dùng dễ dàng nhớ công việc cần hoàn thành.
Visual Studio Code nổi bật với tính năng nhắc mã Intellisense, giúp phát hiện các đoạn mã không đầy đủ Chương trình này hỗ trợ lập trình viên bằng cách tự động bổ sung cú pháp khi họ quên khai báo biến, mang lại trải nghiệm lập trình mượt mà và hiệu quả.
Hình 2- 18 : Intellisense trong Visual Code
1.5.3 Tại sao nên sử dụng Visual Studi Code?
Lý do bạn nên sử dụng Visual Studio Code là vì nó có rất nhiều ưu điểm vượt trội so với bất kỳ IDE nào khác:
Hỗ trợ đa nền tảng: Windows, Linux, Mac
Hỗ trợ đa ngôn ngữ: C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, JSON
Nguyễn Đức Nguyên XLII Lớp CNPM B K62
Visual Studio Code là phần mềm miễn phí, góp phần làm cho nó trở thành công cụ biên tập và soạn thảo code phổ biến nhất hiện nay Với sự cải tiến liên tục và ứng dụng nhiều công nghệ mới, Visual Studio Code đã chứng minh được hiệu quả của mình trong tay các lập trình viên Không chỉ dành cho Developers, phần mềm này còn hữu ích cho Testers, Data Administrators và tất cả những ai quan tâm đến lập trình.
Hình 2- 19: Visual Studio Code và những ưu điểm vượt trội
Nguyễn Đức Nguyên XLIII Lớp CNPM B K62
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Khảo sát hệ thống
Khách hàng có thể truy cập dễ dàng thông tin về phòng, giá cả, địa chỉ và các dịch vụ kèm theo trên website, từ đó giúp họ quyết định chọn khách sạn làm nơi nghỉ dưỡng trong thời gian tới.
Hệ thống sẽ đề xuất các địa điểm du lịch gần kề, giúp khách hàng dễ dàng tìm kiếm và có cái nhìn tổng quan hơn về những lựa chọn tương tự.
Hệ thống được thiết kế nhằm mang đến cái nhìn khách quan về khách sạn The Legend, giúp khách hàng dễ dàng khám phá các dịch vụ nổi bật, thông tin phòng và giá cả Bên cạnh đó, khách hàng còn có thể tham khảo phản hồi từ những khách trước để đưa ra quyết định phù hợp.
- Sau khi đặt phòng sẽ được phía nhân viên gọi điện hỗ trợ và xác nhận đặt phòng thành công.
Khách sạn cung cấp dịch vụ du lịch cho phép khách truy cập hệ thống dễ dàng Đồng thời, khách sạn có thể cập nhật thông tin về giá cả và các dịch vụ nhà hàng mà mình cung cấp, giúp du khách nắm rõ hơn về các lựa chọn sẵn có.
2.1.3 Nhóm chức năng chính a Chức năng dành cho ‘khách hàng’
Xem phòng, đặt phòng, huỷ phòng
Xem chỉ đường tới khách sạn
Thảo khảo và chọn lựa những dịch vụ phù hợp với nhu cầu và mục đích
Chia sẻ thông tin địa điểm du lịch
Nguyễn Đức Nguyên XLIV Lớp CNPM B K62
Khám phá thêm về các vùng miền, con người, đặc trưng riêng của từng vùng miền đó
Thắc mắc của khách hàng sẽ được giải quyết qua hệ thống messenger live b Chức năng dành cho “Quản trị viên”
Cập nhật thông tin về phòng (bao gồm giá phòng, dịch vụ, thông tin phòng…)
Quản lý thông tin hình ảnh trên hệ thống.
Giải đáp thắc mắc khách hàng qua hệ thống trực tuyến.
Hỗ trợ khách hàng khi có sự cố ( trễ lịch, huỷ lịch…)
Nhân viên sẽ gọi điện liên lạc và xác nhận lại thông tin của khách hàng khi có yêu cầu đặt phòng.
Mô tả hiện trạng Hệ thống hiện tại ( dành cho khách đặt phòng trực tiếp)
2.2.1 Chức năng, quan hệ giữa các bộ phận trong hệ thống
Chức năng các bộ phận trong hệ thống
Hội đồng quản trị là cơ quan quyền lực tối cao của khách sạn, bao gồm các đại biểu được chỉ định theo điều lệ và các quy định pháp lý hiện hành.
Giám đốc có trách nhiệm quản lý các bộ phận.
Trưởng Phòng các bộ phận chịu trách nhiệm quản lý các nghiệp vụ của nhân viên.
Bộ phận tiếp tân là trung tâm vận hành chính của khách sạn, đóng vai trò là cầu nối giữa khách hàng và quản lý Nhân viên tiếp tân có nhiệm vụ quan trọng như đón tiếp khách, giới thiệu và bán phòng cùng các dịch vụ khác, nhận đặt buồng và bố trí phòng, cũng như thực hiện thủ tục đăng ký cho khách.
Nguyễn Đức Nguyên, sinh viên lớp CNPM B K62, thực hiện các nhiệm vụ quan trọng tại khách sạn, bao gồm phối hợp với nhân viên phục vụ trong suốt thời gian khách lưu trú, tiếp nhận và giải quyết phàn nàn của khách hàng, theo dõi và tổng hợp chi phí, thực hiện thanh toán và tiễn khách Ngoài ra, anh còn tham gia vào các hoạt động quảng cáo và tiếp thị của khách sạn, cùng với các nhiệm vụ khác.
Bộ phận Quản lý trong khách sạn đảm nhiệm vai trò quan trọng trong việc quản lý nhân viên phục vụ phòng và nhân viên cung cấp dịch vụ Nhân viên phục vụ phòng có trách nhiệm giao và nhận phòng, trong khi nhân viên phục vụ dịch vụ đảm bảo cung cấp các dịch vụ chất lượng cho khách hàng.
Bộ phận kinh doanh của khách sạn bao gồm nhân viên kế toán và nhân viên kinh doanh, dưới sự quản lý trực tiếp của trưởng phòng kinh doanh Nhân viên kế toán đảm nhiệm các vấn đề liên quan đến tài chính và kế toán, trong khi nhân viên kinh doanh tập trung vào các hoạt động kinh doanh và chiến lược doanh thu của khách sạn.
Mối quan hệ giữa các Bộ phận:
Mối quan hệ giữa bộ phận lễ tân và bộ phận quản lý là rất quan trọng, với bộ phận quản lý đóng vai trò hỗ trợ chủ chốt cho các hoạt động của lễ tân Bộ phận quản lý phối hợp chặt chẽ trong việc báo cáo tình trạng phòng và giải quyết các vấn đề phát sinh nhằm nâng cao hiệu quả phục vụ Đồng thời, bộ phận lễ tân tiếp nhận yêu cầu của khách hàng về việc thuê phòng và sử dụng các dịch vụ của khách sạn, sau đó thông báo cho bộ phận quản lý để đảm bảo phục vụ khách hàng tốt nhất.
Mối quan hệ giữa bộ phận kinh doanh và bộ phận lễ tân rất quan trọng trong việc bảo quản tiền mặt và các nguồn thu cho khách sạn Sự phối hợp chặt chẽ giữa hai bộ phận này giúp tối ưu hóa quy trình quản lý tài chính và nâng cao hiệu quả hoạt động của khách sạn.
Nguyễn Đức Nguyên XLVI Lớp CNPM B K62 ra còn đề ra các chiến lược kinh doanh cho ban giám đốc và hội đồng quản trị.
2.2.2 Thiết kế chức năng hệ thống a Các chức năng hệ thống
Sử dụng dịch vụ theo gói, dịch vụ thêm b Trợ giúp, liên hệ
Giới thiệu về địa điểm du lịch lý thú khi tham quan
Hỗ trợ các dịch vụ đưa đón, google map
Giới thiệu về con người, ẩm thực, văn hoá vùng miền
Hỗ trợ trong những trường hợp khẩn cấp
2.2.3 Mô tả hiện trạng hệ thống hiện tại a, Quy trình nghiệp vụ
Khách hàng có thể đặt phòng tại quầy tiếp tân của khách sạn hoặc thông qua điện thoại, fax Khi thực hiện đặt phòng, khách hàng cần cung cấp đầy đủ thông tin cá nhân.
- CMND (đối với Khách hàng là người Việt Nam) hoặc thẽ Passpord (đối với khách hàng là người nước ngoài).
- Số điện thoại liên lạc….
Nguyễn Đức Nguyên XLVII Lớp CNPM B K62
Khi khách hàng hoàn tất đăng ký thuê phòng, khách sạn sẽ cung cấp các dịch vụ cần thiết theo yêu cầu Để sử dụng dịch vụ, khách hàng cần nhập đầy đủ thông tin vào hệ thống.
- Tên phòng khách đang sử dụng.
- Tên dịch vụ khách hàng muốn sử dụng.
Khi khách hàng có nhu cầu đổi phòng, hệ thống sẽ cung cấp chức năng đổi phòng cho khách.
Khi khách hàng yêu cầu các dịch vụ bổ sung như phòng họp, tổ chức lễ cưới hay team building, đội ngũ nhân viên sẽ lên lịch sự kiện và thảo luận chi tiết về địa điểm, thời gian, số lượng người tham gia và cung cấp dịch vụ tận tâm Mục tiêu là mang đến cho du khách trải nghiệm tuyệt vời nhất tại khách sạn Chi phí dịch vụ sẽ được thỏa thuận tùy thuộc vào quy mô sự kiện của khách hàng.
Khi khách hàng trả phòng, nhân viên lễ tân sẽ tiến hành lập hóa đơn thanh toán, bao gồm chi phí thuê phòng, dịch vụ đã sử dụng và các khoản chi phí phát sinh khác.
Các nhà quản lý có thể truy cập thông tin khách hàng, nhân viên, phòng, dịch vụ, cũng như thống kê về việc sử dụng phòng và dịch vụ Họ còn có khả năng xem các báo cáo thống kê theo tháng, quý hoặc năm để nắm bắt tình hình hoạt động.
• Thông tin của khách hàng thuê phòng ngày 20/06/2022
Mã số: A206 Phòng: 201-202 Khách hàng: Nguyễn Đức Nguyên CCCD: 033099004457
Khách hàng: Đặng Thuỳ Chi CCCD: 033199002808 Địa chỉ: Văn Giang- Hưng Yên
Mã số: A207 Phòng: 303 Khách hàng: Triệu Thế Hiển CCCD: 033098002102 Khách hàng: Nguyễn Thuỳ Linh CCCD: 033199001606 Địa chỉ: Hưng Hà - Thái Bình
Nguyễn Đức Nguyên XLVIII Lớp CNPM B K62 c, Xuất hoá đơn thanh toán khi khách hoàn thành thuê phòng
Khách sạn The Legend Hotel Số
Họ tân Khách : Ngày đến.: Giờ đến:
Số Phòng: Ngày đi: Giờ đi:
Tổng số tiền bằng chữ:
KHÁCH GIÁM ĐỐC TIẾP TÂN
Nguyễn Đức Nguyên XLIX Lớp CNPM B K62
Phân tích hệ thống
Biểu đồ Use Case thể hiện mối liên hệ giữa các tác nhân bên ngoài và các chức năng mà hệ thống cung cấp Một Use Case là mô tả chi tiết về một chức năng của hệ thống, thường được trình bày dưới dạng văn bản tài liệu và có thể kèm theo biểu đồ hoạt động Các Use Case được mô tả từ góc nhìn của các tác nhân, phản ánh hành vi của hệ thống theo mong đợi của người sử dụng, mà không đi sâu vào cách thức hoạt động nội bộ của hệ thống Chúng định nghĩa các yêu cầu chức năng cần thiết cho hệ thống.
Các tác nhân tham gia hệ thống:
Nguyễn Đức Nguyên L Lớp CNPM B K62
Hình 3 - 1: Biểu đồ UC tổng quát b Biểu đồ Use case khách đặt phòng Đặc tả chi tiết Use Case Khách du lịch
Khách hàng có thể xem thông tin phòng qua hình ảnh, bao gồm diện tích, view phòng và sức chứa tối đa Ngoài ra, họ còn được cung cấp giá phòng cùng các dịch vụ đi kèm và dịch vụ bổ sung trước khi đưa ra quyết định đặt phòng.
▪ Hệ thống hiển thị danh sách phòng còn trống
Nguyễn Đức Nguyên LI Lớp CNPM B K62
Hình 3 - 2: Biểu đồ UC khách đặt phòng
▪ Hiển thị hình ảnh chi tiết phòng ( bao gồm thông tin phòng,giá cả, tiện nghi, sức chứa, dịch vụ đi kèm, dịch vụ thêm ( nếu có)…)
▪ Hiển thị form đặt phòng
▪ Xác nhận đặt phòng và nhân viên tư vấn sẽ liên lạc lại với bạn để xác thực
C Biểu đồ Use Case Admin quản lý Đặc tả chi tiết Use Case Quản trị viên
- Mô tả tổng quát: admin có thể điều chỉnh như thêm/sửa/xoá về thông tin phòng, dịch vụ
▪ Chọn danh sách phòng, dịch vụ
▪ Lựa chọn chức năng quản lý phòng và dịch vụ
Nguyễn Đức Nguyên LII Lớp CNPM B K62
Hình 3 - 3: Biểu đồ UC quản trị viên
Hình 3- 4: Biểu đồ Use Case Admin quản lý
▪ Thêm sửa xoá thông tin phòng như: cập nhật ảnh, cập nhật giá, sửa đổi nội dung theo từng đợt ( nghỉ lễ, Tết…)
▪ Xem thông tin những phòng đã đặt và phòng còn trống
Cập nhật giá dịch vụ và điều chỉnh các dịch vụ hỗ trợ theo gói phòng, bao gồm cả những dịch vụ bổ sung có phí như đưa đón sân bay và thuê phòng họp, là những bước quan trọng để nâng cao trải nghiệm khách hàng.
▪ Quản lý đánh giá từ những khách hàng trước, cập nhật hệ thống
Nguyễn Đức Nguyên LIII Lớp CNPM B K62
2.3.2 Biểu đồ Sequece Diagram ( Biểu đồ tuần tự)
Biểu đồ trình tự là công cụ quan trọng để thể hiện sự tương tác giữa các đối tượng trong một hệ thống Nó mô tả trình tự các thông điệp được gửi đi và tương tác diễn ra tại các thời điểm cụ thể trong quá trình thực thi Các đối tượng được biểu diễn bằng các đường thẳng đứng, trong khi trục thời gian được hướng từ trên xuống dưới, cho thấy sự trao đổi thông điệp theo thời gian Những thông điệp này được minh họa bằng các đường gạch ngang kết nối giữa các đối tượng, với mũi tên chỉ rõ hướng của thông điệp Ngoài ra, trục thời gian và các ghi chú thường được trình bày ở phần lề của biểu đồ, giúp người xem dễ dàng theo dõi Biểu đồ tuần tự chức năng đặt phòng là một ví dụ điển hình cho việc áp dụng biểu đồ trình tự trong các hệ thống quản lý.
Nguyễn Đức Nguyên LIV Lớp CNPM B K62
Hình 3 - 4 :Biểu đồ tuần tự chức năng đặt phòng b Biểu đồ tuần tự chức năng quản lý phòng c Biểu đồ tuần tự chức năng thêm phòng
Nguyễn Đức Nguyên LV Lớp CNPM B K62
Hình 3 - 5 : Biểu đồ tuần tự chức năng quản lý phòng d.Biểu đồ tuần tự chức năng sửa phòng e Biểu đồ tuần tự chức năng Dịch vụ thêm
Nguyễn Đức Nguyên LVI Lớp CNPM B K62
2.3.3 Biểu đồ Active cho từng chức năng
Biểu đồ hoạt động là công cụ mô tả trình tự các hoạt động trong một thủ tục, có thể áp dụng cho các dòng chảy hoạt động khác như Use case hoặc trình tự tương tác Nó bao gồm các trạng thái hành động, thể hiện các hoạt động cần thực hiện, và mỗi trạng thái sẽ kết thúc khi hành động hoàn tất Dòng điều khiển kết nối các trạng thái hành động với nhau, đồng thời biểu đồ cũng có thể thể hiện các quyết định, điều kiện và thực thi song song Ngoài ra, biểu đồ còn chứa các đặc tả về thông điệp được gửi hoặc nhận trong quá trình thực hiện hành động.
Nguyễn Đức Nguyên LVII Lớp CNPM B K62 b, Biểu đồ Active chức năng Sửa thông tin phòng
Nguyễn Đức Nguyên LVIII Lớp CNPM B K62 c, Biểu đồ Active chức năng Xoá thông tin phòng
Nguyễn Đức Nguyên LIX Lớp CNPM B K62 d, Biểu đồ Active chức năng Thuê Phòng
Nguyễn Đức Nguyên LX Lớp CNPM B K62
2.3.3 Biểu đồ lớp ( Class Diagram) a Sơ dồ lớp
Nguyễn Đức Nguyên LXI Lớp CNPM B K62
Hình 3 - 6 : Biểu đồ lớp tổng quát b Các đối tượng và quan hệ c Đặc tả các lớp đối tượng
STT Thuộc tính/ Phương thức Mô tả
4 TinhTrang Tình trạng của phòng
6 GhiChu Ghi những thông tin về phòng
Nguyễn Đức Nguyên LXII Lớp CNPM B K62
Hình 3 - 7: Các đối tượng và quan hệ
7 ThemPhong() Thêm thông tin phòng mới
8 LayDanhSach() Lấy danh sách phòng trong khách sạn
9 CapNhatTinhTrang() Cập nhật tình trạng phòng
10 TimKiem() Tìm kiếm phòng theo nhiều tiêu chí.
11 XoaPhong() Xoá thông tin phòng
12 SuaPhong() Sửa thông tin phòng
13 ThongTinGiaPhong () Thông tin giá phòng
Bảng 2 - 1: Đặc tả các lớp đối tượng Phong
Nguyễn Đức Nguyên LXIII Lớp CNPM B K62
STT Thuộc tính/ Phương thức Mô tả
3 DonGia Đơn giá loại phòng
4 DichVuTheoPhong Dịch vụ theo phòng khi đăng kí gói
6 SuaPhong() Sửa thông tin loại phòng
7 XoaPhong() Xóa thông tin loại phòng
8 LayTenLoaiPhong() Lấy tên loại phòng
9 LayDonGia() Lấy đơn giá theo loại phòng
10 ThongTinGiaPhong() Lấy thông tin giá phòng theo từng loại phòng
11 DichVuTheoPhong() Thông tin dịch vụ theo phòng
12 TimKiem() Tìm kiếm loại phòng
Bảng 2 - 2 : Đặc tả các lớp đối tượng LoaiPhong
Nguyễn Đức Nguyên LXIV Lớp CNPM B K62
STT Thuộc tính/ Phương thức Mô tả
2 MaKhachHang Tên khách hàng hoặc cơ quan thanh toán
5 NgayThanhToan Thông tin ngày thanh toán
6 PhuongThucThanhToan Phương thức thanh toán (chuyển khoản, tiền mặt )
7 PhuThu Phụ thu : thuế VAT, >sức chứa tối đa phòng
8 TimKiem() Tìm kiếm hóa đơn
9 DoanhThuTheoLoaiPhong() Doanh thu tính trên loại phòng
10 DoanhThuTheoNgay() Doanh thu thu được theo ngày
11 DoanThuDichVu() Doanh thu thu được từ dịch vụ
12 LayPhuThu Phụ thu khách thứ 3 trong 1 phòng
Bảng 2 - 3 :Đặc tả các lớp đối tượng HoaDon
Nguyễn Đức Nguyên LXV Lớp CNPM B K62
STT Thuộc tính/ Phương thức Mô tả
4 SoNgayThue Số ngày khách thuê phòng
5 DonGia Đơn giá theo loại phòng
7 MaDichVuThem Mã dịch vụ thêm mà khách đăng kí
8 SoNgayThue() Tính số ngày thuê theo thời gian chọn
9 Them() Thêm một phòng vào hóa đơn
10 TimKiem() Tìm kiếm hóa đơn theo nhiều tiêu chí
10 DichVuThem () Dịch vụ thêm mà khách hàng yêu cầu hoặc đăng kí
Bảng 2 - 4 : Đặc tả các lớp đối tượng ChiTietHoaDon
STT Thuộc tính/ Phương thức Mô tả
Nguyễn Đức Nguyên LXVI Lớp CNPM B K62
2 NgayBatDauThue Ngày bắt đầu khách hàng thuê
NgayKetThucThue Ngày kết thúc khách hàng thuê
4 ThemPhieuThue() Thêm mới phiếu thuê
5 CapNhatPhieuThue() Cập nhật phiếu thuê
7 LayTTNgayBDThue() Lấy Thông tin ngày bắt đầu thuê
8 LayTTNgayKTThue() Lấy Thông tin ngày kết thúc thuê
9 LayDanhSach() Lấy danh sách phiếu thuê
10 TimKiem() Tìm kiếm phiếu thuê theo nhiều tiêu chí
Bảng 2 - 5 :Đặc tả các lớp đối tượng PhieuThue
Nguyễn Đức Nguyên LXVII Lớp CNPM B K62
STT Thuộc tính/ Phương thức Mô tả
1 MaChiTietPhieuThue Mã chi tiết phiếu thuê
2 MaKhachHang Mã khách hàng thuê phòng
5 Them () Thêm mới chi tiết phiếu thuê
6 Xoa () Xóa chi tiết phiếu thuê
7 CapNhatTinhTrang() Câp nhật chi tiết phiếu thuê
8 TimKiem () Tìm kiếm theo nhiều tiêu chí
9 KiemTraKH Kiểm tra thông tin khách hàng
10 LayDSTheoPhieuThue Lấy danh sách theo phiếu thuê
11 LaySoLuongKhach() Lấy số lợng khách trong 1 phòng
12 LayDanhSach() Lấy danh sách chi tiết phiếu thuê
Bảng 2 - 6 :Đặc tả các lớp đối tượng ChiTietPhieuThue
Nguyễn Đức Nguyên LXVIII Lớp CNPM B K62
STT Thuộc tính/ Phương thức Mô tả
1 SoLuongKhachToiDa Số lượng khách tối đa trong 1 phòng
2 ChinhSach phong Chính sách phòng đối với các vấn đề quy định, phát sinh thêm
3 SokhachToiDa Số lượng khách chứa tối đa trong 1 phòng
4 ChinhSachTraPhong Chính sách trả phòng
5 ChinhSachVoiTreEm Chính sách phòng đối với trẻ em
6 DoiPhong/HuyPhong Chính sách đổi phòng, huỷ phòng theo nhu cầu khách
7 LayDS () Danh sách chi tiết các chính sách phòng
8 CapNhatTinhTrang () Cập nhật thông tin hiện trạng phòng
Bảng 2 - 7 :Đặc tả các lớp đối tượng ThamSo
Nguyễn Đức Nguyên LXIX Lớp CNPM B K62
STT Thuộc tính/ Phương thức Mô tả
2 DichVuTheoPhong Mã dịch vụ theo phòng khi khách đăng kí theo gói
3 DichVuThem Dịch vụ thêm khi khách có yêu cầu
4 DonGia Đơn giá dịch vụ
5 ThemDichVu () Thêm thông tin dịch vụ
6 XoaDichVu () Xoá thông tin dịch vụ
7 SuaDichVu () Sửa, cập nhật thông tin dịch vụ
8 LayDS () Lấy danh sách các dịch vụ thêm hiện tại
9 CapNhatTinhTrang () Cập nhật tình trạng các dịch vụ
10 TimKiem () Tìm kiếm thông tin dịch vụ theo yêu cầu
11 TTDichVuTheoPhong () Thông tin dịch vụ theo phòng mà khách được hưởng
12 TTDichVuThem () Thông tin danh sách dịch vụ thêm
Bảng 2 - 8: Đặc tả các lớp đối tượng DichVu
Nguyễn Đức Nguyên LXX Lớp CNPM B K62
STT Thuộc tính/ Phương thức Mô tả
2 TenKhachHang Tên khách hàng thuê phòng
3 SoDienThoai Số điện thoại khách hàng
4 DiaChi Địa chỉ khách hàng
7 ThemTTKH Thêm mới thông tin khách hàng
8 CapNhatTTKH Câp nhật thông tin khách hàng
9 LayDS Lấy danh sách thông tin khách hàng
10 CapNhatTinhTrang Cập nhật, sửa đổi thông tin khách hàng
11 TimKiem Tìm kiếm thông tin khách hàng
Bảng 2 - 9 : Đặc tả các lớp đối tượng KhachHang
Nguyễn Đức Nguyên LXXI Lớp CNPM B K62
THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG
Site chính của website
Trang chủ của website sẽ có một thanh header bao gồm tên khách sạn, phần giới thiệu, dịch vụ, phòng, đánh giá và mục khám phá Phía dưới header sẽ là một phần slide trình bày hình ảnh phong phú về khách sạn.
Nguyễn Đức Nguyên LXXII Lớp CNPM B K62
Hình 4- 1:Giao diện trang chủ
Khách sạn của chúng tôi tọa lạc tại vị trí lý tưởng, dễ dàng tiếp cận các điểm tham quan nổi bật Với nhiều giải thưởng danh giá trong ngành dịch vụ, chúng tôi tự hào mang đến trải nghiệm lưu trú độc đáo và chất lượng Những đặc sắc riêng biệt, từ thiết kế đến dịch vụ, chắc chắn sẽ làm hài lòng mọi du khách.
Giao diện dịch vụ cung cấp thông tin tổng quát về các dịch vụ chính như hồ bơi và thể thao, tiệc cưới, spa và nghỉ dưỡng, hội họp & sự kiện, nhà hàng, và bar Khi người dùng nhấp vào khám phá, họ sẽ được dẫn đến trang chi tiết về từng dịch vụ.
Nguyễn Đức Nguyên LXXIII Lớp CNPM B K62
Hình 4- 3 : Giao diện dịch vụ
Hình 4- 4 : Giao diện chi tiết dịch vụ
Trang thông tin phòng cung cấp danh sách và đặc trưng của các phòng, giúp khách hàng có cái nhìn tổng quát Khi nhấp vào "xem thêm", khách sẽ được chuyển đến trang chi tiết với thông tin về diện tích, sức chứa, tiện ích, quang cảnh và các dịch vụ hỗ trợ kèm theo.
Nguyễn Đức Nguyên LXXIV Lớp CNPM B K62
Hình 4- 5 :Giao diện phòng và thông tin
Trong giao diện chi tiết phòng, khách hàng sẽ tìm thấy đầy đủ thông tin về diện tích, quang cảnh, số lượng giường và số lượng người tối đa trong mỗi phòng Bên dưới, danh sách các dịch vụ hỗ trợ đặt phòng của khách sạn được liệt kê rõ ràng, giúp khách hàng nắm bắt các ưu đãi khi đặt phòng Thêm vào đó, còn có những thông tin bổ sung khác về phòng để khách hàng tham khảo.
Nguyễn Đức Nguyên LXXV Lớp CNPM B K62
Hình 4- 6 :Giao diện thông tin chi tiết phòng
Hình 4- 7:Các tiện ích hỗ trợ và các thông tin phòng khác
Khách sạn có các chính sách rõ ràng về thời gian nhận phòng, trả phòng, quy định với trẻ em, cũng như các khoản thuế và phí dịch vụ liên quan đến việc hủy phòng Khi khách hàng tìm hiểu thông tin và cảm thấy hài lòng với dịch vụ phòng, họ có thể tiến hành đặt phòng Sau khi điền đầy đủ thông tin, hệ thống sẽ xác nhận và nhân viên sẽ gọi điện để xác nhận đặt phòng và thu tiền cọc Khách hàng cũng có thể liên hệ trực tiếp qua messenger live để được tư vấn và giải đáp thắc mắc về dịch vụ.
Nguyễn Đức Nguyên LXXVI Lớp CNPM B K62
Hình 4- 8:Chính sách phòng của khách sạn
Nếu bạn là du khách lần đầu đến Việt Nam, hãy khám phá nền ẩm thực phong phú và những nét đặc sắc trong văn hóa cũng như con người nơi đây.
Nguyễn Đức Nguyên LXXVII Lớp CNPM B K62
Nguyễn Đức Nguyên LXXVIII Lớp CNPM B K62
Hình 4- 9 :Đặc sắc trong nền ẩm thực Việt Nam
Nguyễn Đức Nguyên LXXIX Lớp CNPM B K62
Hình 4- 10:Những hình ảnh đẹp về con người Việt Nam
Cuối trang, bạn sẽ tìm thấy những đánh giá tích cực từ khách hàng đã trải nghiệm dịch vụ phòng của chúng tôi, thể hiện sự hài lòng với đội ngũ phục vụ và nhân viên khách sạn.
Nguyễn Đức Nguyên LXXX Lớp CNPM B K62
Hình 4- 11 : Đánh giá khách hàng về chất lượng phục vụ của nhà hàng
Kết luận và hướng phát triển, trong quá trình thực hiện đồ án tốt nghiệp, tôi đã áp dụng những kiến thức từ giảng viên và kết hợp với tài liệu trực tuyến để mở rộng hiểu biết của mình.
Thiết kế hoàn thiện các chức năng cơ bản của website
Giao diện thân thiện, dễ dàng sử dụng
Trang web cung cấp đầy đủ các thông tin cho người dùng về hình ảnh, giá phòng, dịch vụ, tiện nghi đi kèm
Giới thiệu về ẩm thực truyền thống cũng như hình ảnh con người Việt Nam.
Hỗ trợ trực tuyến cho khách khi gặp sự cố trong vấn đề đặt phòng, huỷ phòng, chuyển phòng.
Thiết kế responsive tương thích với nhiều loại màn hình như tablet, mobile, pc giúp nâng cao trải nghiệm người dùng.
Hướng phát triển tương lai
Kết hợp với team Back-end xây dưng hoàn thiện cũng như xử lý phần database của web.
Nâng cao tính bảo mật và kiểm soát các lỗ hổng, bug còn tồn động.
Tìm hiểu thêm về UI/UX để xây dựng bố cục trang web hoàn chỉnh hơn
Mặc dù tôi đã thiết kế và phát triển toàn bộ giao diện, nhưng vẫn còn thiếu sót ở phần Back-end Việc nhận ra những điểm chưa hoàn thiện này sẽ là động lực để tôi học hỏi và cải thiện bản thân sau khi hoàn thành ĐATN.
Nguyễn Đức Nguyên LXXXI Lớp CNPM B K62