Đồ án môn học thiết kế web

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.04 MB, 19 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>BỘ GIÁO DỤC VÀ ĐÀO TẠO</b>

<b>TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNHKHOA QUẢN TRỊ KINH DOANH</b>

<b>ĐỒ ÁN MÔN HỌC</b>

<b>………Thiết kế Web…………..</b>

<b>Giảng viên hướng dẫn : ThS. Hồ Khôi</b>

<b>Sinh viên thực hiện : Nguyễn Quang Huy</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT Sinh viên thực hiện :

Ngày thi: Phòng thi:………... Đề tài tiểu luận/báo cáo của sinh viên :

Phần đánh giá của giảng viên (căn cứ trên thang rubrics của môn học):

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT

<b>Họ và tên sinh viên: Nguyễn Quang Huy MSSV: 2200003340</b>

Chuyên ngành: Marketing Lớp: 22DMK1B Email: SĐT: 0974540412 Tên đề tài: Thiết kế Website nhà hàng

Giảng viên giảng dạy: Hồ Khôi

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

<b>LỜI CẢM ƠN</b>

Trước tiên với tình cảm sâu sắc và chân thành nhất, cho phép em được bày tỏ lòng biết ơn đến nhà trường và thông qua thầy Hồ Khôi đã tạo điều kiện hỗ trợ, giúp đỡ em trong suốt quá trình học tập và nghiên cứu đề tài này. Trong suốt thời gian làm đồ án em đã nhận được rất nhiều sự quan tâm, giúp đỡ của Thầy và bạn bè.

Với lòng biết ơn sâu sắc nhất, em xin gửi đến Thầy Hồ Khôi ở Khoa công nghệ thông tin đã truyền đạt vốn kiến thức quý báu cho chúng em trong suốt thời gian học tập. Nhờ có những lời hướng dẫn, dạy bảo của các thầy nên đề tài nghiên cứu của em mới có thể hồn thiện tốt đẹp.

Bước đầu đi vào thực tế của em còn hạn chế và còn nhiều bỡ ngỡ nên khơng tránh khỏi những thiếu sót, em rất mong nhận được những ý kiến đóng góp quý báu của quý Thầy để kiến thức của em trong mơn học này được hồn thiện hơn đồng thời có điều kiện bổ sung, nâng cao ý thức của mình.

Em xin chân thành cảm ơn!

Sinh viên thực hiện (Ký tên)

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>LỜI MỞ ĐẦU</b>

Với sự phát triển mạnh mẽ của khoa học cơng nghệ thế giới, có thể nói rằng ngành Cơng nghệ thơng tin phát triển mạnh mẽ với tốc độ ngày càng nhanh và ngày càng thể hiện vai trò to lớn, hết sức quan trọng đối với con người. Hầu hết các lĩnh vực trong xã hội đều ứng dụng Công nghệ thông tin vào đời sống, nhiều phần mềm đã mang lại hiệu quả không thể phủ nhận hơn. Song thực tiễn luôn đặt ra những yêu cầu mới địi hỏi ngành Cơng nghệ thơng tin khơng ngừng phát triển để thỏa mãn và đáp ứng những thay đổi của cuộc sống hiện nay.

Đối với lĩnh vực về ẩm thực hiện nay, việc xây dựng giao diện đã khơng cịn xa lạ, nhưng để tạo ra một website ẩm thực đẹp mắt và chất lượng là một vấn đề không hề dễ. Để xây dựng được một website như vậy địi hỏi lập trình viên phải hiểu được về công cụ và ngôn ngữ lập trình.

Đây là bài báo cáo đồ án mơn học đầu tiên được thực hiện trong khoảng thời gian gần 2 tháng. Bước đầu đi vào thực tế của em còn hạn chế và còn nhiều bỡ ngỡ nên khơng tránh khỏi những thiếu sót, em rất mong nhận được những ý kiến đóng góp quý báu của quý Thầy Cô để kiến thức của em trong lĩnh vực này được hoàn thiện hơn đồng thời có điều kiện bổ sung, nâng cao ý thức của mình.

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b> Mục lục</b>

<b>CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI...8</b>

<b>3.Môi trường phát triển...8</b>

<b>1.Link source code:...19</b>

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI1. Lý do chọn đề tài</b>

Ngày nay mọi người thường có xu hướng tìm kiếm những nhà hàng, qn ăn thơng qua các cơng cụ tìm kiếm hoặc những trang web về ẩm thực. Những thông tin tổng quan về nhà hàng và các hình ảnh về món ăn sẽ giúp mọi người biết được thơng tin, các món ăn nhà hàng cung cấp. Vì thế thiết kế website nhà hàng giúp thu hút được nhiều khách hàng hơn.

Với sự phát triển hiện đại như ngày nay,Internet marketing được ứng dụng lên tất cả các ngành nghề, lĩnh vực. Thì với một nhà hàng hay quán ăn cũng cần phải có một website riêng cho mình.

Để thiết kế một website cho nhà hàng hay quán ăn cần phải tạo được sự hấp dẫn và chuyên nghiệp để tạo nên điểm khác biệt và thu hút nhiều khách hàng hơn bên cạnh những đối thủ cạnh tranh khác. Để có được điều này, mọi người có thể lựa chọn SIKIDO để tạo nên một website khơng chỉ đẹp mắt mà cịn có giao diện thân thiện. Với những thông tin chung trên mọi người có thể hiểu được tầm quan trọng và cần thiết của một website cho nhà hàng của mình. Hãy cùng SIKIDO tìm hiểu rõ hơn về những lợi ích mà thiết kế website mang lại.

 Tiếp cận khách hàng nhanh chóng  Quảng bá hình ảnh nhà hàng

 Khách hàng có thể đặt bàn trực tuyến thuận tiện

<b>3. Môi trường phát triển</b>

 <b>Internet</b>

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

 Internet là một mạng toàn cầu gồm nhiều máy tính khác nhau chúng kết nối với nhau thông qua một ngôn ngữ chung. Chúng rất đơn giản như một mạng điện thoại quốc tế không một ai sở hữu hay điều khiển hệ thống nay nhưng nó làm việc như một mạng diện rộng. Có vơ số các máy chủ trên Internet, mỗi máy chủ cung cấp thơng tin và dịch vụ khác nhau.

 Web

<i><b>Hình 1.3: WorldWideWeb </b></i>

 World Wide Web (www), gọi tắt là web, là một khơng gian thơng tin tồn cầu mà mọi người có thể truy nhập (gửi và nhận thơng tin) qua các máy tính nối với mạng Internet. Thuật ngữ này thường được hiểu nhầm là từ đồng nghĩa với chính thuật ngữ Internet. Nhưng web thực ra chỉ là một trong các dịch vụ chạy trên Internet.

 Các tài liệu trên web được lưu trữ trong một hệ thống siêu văn bản (Hypertext) đặt tại các máy Webserver nối mạng Internet. Người dùng phải sử dụng một chương trình được gọi là trình duyệt web (Web Browser) để xem các siêu văn bản này. Chương trình này sẽ nhận thông tin tại ô địa chỉ URL do người sử dụng u cầu, sau đó trình duyệt sẽ tự động gửi thông tin đến máy Webserver và hiển thị trên màn hình máy tính của người xem.  HTML

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

➢ Ngơn ngữ HTML (HyperText Markup Language – ngôn ngữ siêu văn bản) là một trong các loại ngôn ngữ được sử dụng trong lập trình web. Khi truy cập một trang web cụ thể là click vào các đường link, bạn sẽ được dẫn tới nhiều trang các nhau, và các trang này được gọi là một tài liệu HTML (tập tin HTML).

➢ Một trang HTML như vậy được cấu thành bởi nhiều phần tử HTML nhỏ và được quy định bằng các thẻ tag. Bạn có thể phân biệt một trang web được viết bằng ngôn ngữ HTML hay PHP thông qua đường link của nó. Ở cuối các trang HTML thường hay có đuôi là .HTML hoặc .HTM.

➢ HTML là ngơn ngữ lập trình web được đánh giá là đơn giản. Mọi trang web, mọi trình duyệt web đều có thể hiển thị tốt ngơn ngữ HTML. Hiện nay, phiên bản mới nhất của HTML là HTML 5 với nhiều tính năng tốt và chất lượng hơn so với các phiên bản HTML cũ.

 <b>CSS</b>

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<i><b>Hình 1.5: CSS</b></i>

➢

<b>CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngơn ngữ</b>

ngôn ngữ đánh dấu (ví dụ như HTML). Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trị định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,… thì CSS sẽ giúp chúng ta có thể thêm một chút “phong cách” vào các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc,… rất nhiều.

➢ Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó.



<b>JAVASCRIPT</b>

<i><b>Hình 1.6: JavaScript </b></i>

<b>➢ JavaScript là ngơn ngữ lập trình phổ biến nhất trên thế giới trong</b>

suốt 20 năm qua. Nó cũng là một trong số 3 ngơn ngữ chính của lập trình web:

1. HTML: Giúp bạn thêm nội dung cho trang web.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

2. CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web. 3. JavaScript: Cải thiện cách hoạt động của trang web.

➢ JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác nhau, từ việc cải thiện tính năng của website đến việc chạy game và tạo phần mềm nền web. Hơn nữa, có hàng ngàn mẫu template JavaScript và ứng dụng ngoài kia, nhờ vào sự cống hiến của cộng đồng, đặc biệt là Github.

 <b>BOOTSTRAP </b>

<i><b>Hình 1.7 Bootstrap</b></i>

➢ Bạn có thể đã quen thuộc với chức năng của frameworks là gì. Nó tập hợp các cú pháp dành riêng cho nhiệm nào đó trong một bộ sưu tập để giúp các web developer xây dựng website nhanh hơn nhiều, vì họ khơng cần phải lo về các lệnh và chức năng cơ bản.

➢ Mặc dù vậy, vẫn thiếu sự thống nhất do việc các thư viện được sử dụng quá nhiều, cần phải thay đổi liên tục. Bootstrap là câu trả lời cho vấn đề này. ➢ Front-end framework là mã nguồn mở, ban đầu được xây dựng bởi Mark Otto và Jacob Thornton để lập trình web front-end nhanh hơn và dễ dàng hơn.

➢ Nó chứa tất cả các mẫu thiết kế dựa trên HTML và CSS với nhiều chức năng và thành phần khác nhau, như điều hướng, hệ thống lưới, băng chuyền hình ảnh và các nút.

➢ Mặc dù Bootstrap giúp tiết kiệm thời gian của nhà phát triển khỏi việc phải quản lý các template nhiều lần, nhưng mục tiêu chính của nó là tạo ra các responsive

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

website. Nó cho phép giao diện người dùng của trang web có thể hoạt động tối ưu trên mọi kích thước màn hình, trên điện thoại màn hình nhỏ hoặc máy tính để bàn màn hình lớn.

➢ Do đó, các nhà phát triển khơng cần xây dựng các trang web dành riêng cho từng thiết bị và bị giới hạn phạm vi đối tượng nữa.

➢ Do sự phổ biến của nó, ngày càng nhiều cộng đồng Bootstrap xuất hiện. Đó là một nơi tuyệt vời để các nhà phát triển và nhà thiết kế trao đổi kiến thức và thảo luận về các bản vá framework mới

<b>4. Các cơng cụ hỗ trợ</b>

<b>Visual Studio Code</b>

<i><b>Hình 1.8: Visual Studio Code</b></i>

➢ Visual Studio Code chính là ứng dụng cho phép biên tập, soạn thảo các đoạn code để hỗ trợ trong quá trình thực hiện xây dựng, thiết kế website một cách nhanh chóng. Visual Studio Code hay cịn được viết tắt là VS Code. Trình soạn thảo này vận hành mượt mà trên các nền tảng như Windows, macOS, Linux. Hơn thế nữa, VS Code còn cho khả năng tương thích với những thiết bị máy tính có cấu hình tầm trung vẫn có thể sử dụng dễ dàng.

➢ Visual Studio Code hỗ trợ đa dạng các chức năng Debug, đi kèm với Git, có Syntax Highlighting. Đặc biệt là tự hồn thành mã thông minh, Snippets, và khả năng cải tiến mã nguồn. Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép các lập trình viên thay đổi Theme, phím tắt, và đa dạng các tùy chọn khác. Mặc dù trình soạn thảo Code này tương đối nhẹ, nhưng lại bao gồm các tính năng mạnh mẽ.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

➢ Dù mới được phát hành nhưng VSCode là một trong những Code Editor mạnh mẽ và phổ biến nhất dành cho lập trình viên. Nhờ hỗ trợ nhiều ngơn ngữ lập trình phổ biến, tích hợp đầy đủ các tính năng và khả năng mở rộng, nên VSCode trở nên cực

kì thân thuộc với bất kì lập trình viên nào.

➢ Visual Studio Code là gì được rất nhiều người tìm hiểu. Đây cũng là một trong các ứng dụng được dân IT “săn đón” và tải về và sử dụng rất nhiều. Visual Studio Code cũng luôn có những cải tiến và tạo ra đa dạng các tiện ích đi kèm từ đó giúp cho các lập trình viên sử dụng dễ dàng hơn. Trong đó có thể kể đến những ưu điểm

• Các tiện ích mở rộng rất đa dạng và phong phú.

• Tích hợp các tính năng quan trọng như tính năng bảo mật (Git), khả năng tăng tốc xử lý vòng lặp (Debug),…

• Đơn giản hóa việc tìm quản lý hết tất cả các Code có trên hệ thống.

➢ Visual Studio Code là một trong những trình biên tập Code rất phổ biến nhất hiện nay. Ứng dụng này cũng ngày càng chứng tỏ ưu thế vượt trội của mình khi so sánh với những phần mềm khác. Tuy bản miễn phí khơng có nhiều các tính năng nâng cao nhưng Visual Studio Code thực sự có thể đáp ứng được hầu hết nhu cầu cơ bản của lập trình viên.

<b>CHƯƠNG 2: THIẾT KẾ VÀ XÂY DỰNG TRANG WEB</b>

1) Thiết kế các chức năng:

<b>Layout Website</b>

 Bố cục trang web (Website Layout hay Layout Website) là sự sắp xếp của tất cả các phần tử trực quan trên trang web và các mối quan hệ giữa chúng. Thông qua việc định vị có chủ đích các phần tử của trang, bố cục trang web có thể cải thiện

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

khả năng truyền tải thông điệp của trang web cũng như khả năng sử dụng của nó.

 Bố cục trang web là một thành phần quan trọng của thiết kế web. Nó xác định trình tự các phần tử trang web được trình bày cho những người truy cập, phần tử nào thu hút sự chú ý nhiều nhất và sự cân bằng tổng thể trong thiết kế.

 Nói một cách dễ hiểu, thiết kế bố cục trang web tốt có thể thu hút sự chú ý của người dùng và dẫn dắt họ đi có chủ đích. Nó có thể giúp chủ sở hữu webstie điều hướng người dùng đến những thứ quan trọng nhất trước, và sau đó tiếp tục đến các phần tiếp theo trong kịch bản dựng sẵn.

2) Trang chủ có giao diện:

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

Mơ tả: Đây là hình ảnh lớn nhất và nổi bật nhất trên trang chủ, thường là ảnh chụp khơng gian nhà hàng hoặc các món ăn đặc trưng. Ảnh bìa cần có chất lượng cao và hấp dẫn để thu hút sự chú ý của khách hàng.

3) Trang thiết kế: Giao diện:

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

Mô tả: là phần giới thiệu ngắn gọn về nhà hàng, bao gồm các thông tin như địa chỉ, số điện thoại, giờ hoạt động, loại hình ẩm thực, các món ăn nổi bật,... Mơ tả cần súc tích và đầy đủ thơng tin để khách hàng có thể nắm được các thông tin cơ bản về nhà hàng.

4) Hướng dẫn sử dụng: Khi login vào trang Web:

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

Mô tả: Menu là phần quan trọng nhất trên trang chủ của một website nhà hàng. Menu cần hiển thị đầy đủ các món ăn và giá cả của nhà hàng. Menu cần được trình bày khoa học và dễ nhìn để khách hàng có thể dễ dàng lựa chọn món ăn.

 <b>Xây dựng được một trang web giới thiệu về nhà hàng</b>

 <b>Được nâng cao kiến thức và hiểu rõ hơn về HTML, CSS, Bootstrap,</b>

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b>II.TÀI LIỆU THAM KHẢO</b>

 Trang web W3Schools Online Web Tutorials, tham khảo vào tháng 8/2022: W3Schools Online Web Tutorials

 Trang web F8 – Học lập trình online, tham khảo vào tháng 8/2022: F8 - học lập trình để đi làm! | Học lập trình online | Học lập trình Javascript (fullstack.edu.vn)

 Trang web Bootstrap, tham khảo vào tháng 8/2022: Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)

 Trang Wikipedia, tham khảo vào tháng 8/2022: