Đặt Vấn Đề Ngày nay, với sự phát triển mạnh mẽ của khoa học – công nghệ, nó góp phần thúc đẩy sự tiến bộ của xã hội trong tất cả các lĩnh vực của đời sống xã hội. Đặc biệt với sự bùng nổ của công nghệ thông tin và internet thì tất cả các thông tin luôn được cập nhật, thay đổi một cách liên tục và đầy đủ thông qua mạng truyền thông và internet, mà phổ biến là thông qua các website. Hiện nay, nhu cầu mua hàng ngày càng nhiều trong thời đại thương mại điện tử, từ các thiết bị công nghệ đến những nhu yếu phẩm hằng ngày, các trang thương mại điện tử đang dần là xu thế như: Shopee, Tiki, Lazada. hiện không còn mấy xa lại với nhiều người.
Trên thực tế cho thấy, hiện nay rất nhiều nhà bán hành đang có nhu cầu bán hàng trực tuyến, nhưng muốn làm 1 trang website riêng biệt để tăng độ uy tín và mở rộng thị trường thay vì chỉ làm đối tác cho các nền tảng lớn như Shopee. Nhưng để làm 1 website bán hàng chuẩn SEO thật hoàn chỉnh sẽ mất rất nhiều thời gian nhưng chỉ yêu cầu những tính năng cơ bản. Nắm bắt được nhu cầu đó, ý tưởng làm "WebSite bán đồ ăn vặt" với những công nghệ đơn giản giúp cho việc giới thiệu những món hàng của nhà buôn bán nhanh chóng quản lý thu chi và đơn hàng, với thời gian có hạn 2. Mục Tiêu Đề Bài Đây là tài liệu đặc tả yêu cầu về hệ thống chia sẻ giáo trình, tài liệu trên nền web.
Tài liệu này nhằm mục đích mô tả và cung cấp các thông tin về chức năng, hiệu năng, các yêu cầu về thiết kế, giao diện và các yêu cầu đặc biệt khác cho thiết kế viên. Bên cạnh đó còn xây dựng một hệ thống đẹp mắt, thân thiện với người dùng. Đối Tượng Và Phương Pháp Nghiên Cứu "Website bán hàng" được xây dựng với mục đích phục vụ cho các nhà bán hàng có 1 website riêng biệt của mình với thời gian xây dựng ngắn mà vẫn đảm bảo được công việc cốt lõi bán hàng của mình. Nội Dung Nghiên Cứu Tìm hiểu cách làm 1 website bằng những công nghệ cơ bản như HTML, CSS, Javascript, PHP, mySQL và mô hình MVC và cách áp dụng những thư viện Javascript để đơn giản hoá vấn đề Đồng thời sử dụng Figma để thiết kế UI/UX đánh mạnh vào giao diện và trải nghiệm người dùng để tạo cảm giác đồng nhất, mượt mà, dễ sử dụng… Trang 1 Tieu luan CHƯƠNG II.
Ngôn Ngữ Thiết Kế WebSite HTML là khung xương của website CSS như lớp da thẩm mỹ của website Javascript như các hệ thống thần kinh và cơ bắp của website giúp cho mọi thứ hoạt động Hình 1. Cấu trúc của một website 1.1 HTML5 Là viết tắt của từ Hypertext Markup Language, một ngôn ngữ lập trình đánh dấu siêu văn bản dùng để xây dựng các website. HTML được hiểu là cấu trúc của một trang web, sử dụng các thẻ và nhãn để định dạng các nội dung khác nhau của 1 trang web. GIAI ĐOẠN PHÁT TRIỂN CỦA HTML Năm Phiên bản 1989 Tim Berners-Lee giới thiệu World Wide Web … … 1995 HTML 2 ra đời … … 2014 HTML5 ra đời được W3C khuyên dùng 2016 HTML5.1 ra đời được W3C khuyên dùng 2017 HTML5.2 ra đời được W3C khuyên dùng Trang 2 Tieu luan 1.2 CSS3 Là viết tắt của Cascading Style Sheets, dùng để định dạng cách mà các thẻ HTML hoạt động trên màn hình của các thiết bị, được ví như lớp áo của trang web, nó có thể điều khiển bố cục trang, và thêm các hiệu ứng hoạt ảnh cho trang web thêm sinh động HTML chưa từng sinh ra để định dạng trang web mà nó chỉ mô tả trang web chính vì thế W3C đã tạo ra CSS để làm việc đó CSS được sử dụng để xác định kiểu cho các trang web của bạn, bao gồm thiết kế, bố cục và các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau, có cấu trúc đơn giản và sử dụng các từ tiếng anh để đặt tên cho các thuộc tính.
CSS khi sử dụng có thể viết trực tiếp xen lẫn vào mã HTML hoặc tham chiếu từ một file css riêng biệt. Hiện nay CSS thường được viết riêng thành một tập tin với mở rộng là ". Chính vì vậy mà các trang web có sử dụng CSS thì mà HTML sẽ trở nên ngắn gọn hơn. GIAI ĐOẠN PHÁT TRIỂN CỦA CSS: Năm Phiên bản 1996 CSS1 được giới thiệu chính thức bởi W3C 1998 CSS2 ra đời cải tiến so với CSS1 1999 CSS3 ra đời và phát triển tới hiện nay Trang 3 Tieu luan 1.3 JavaScript Là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm nguyên mẫu.
Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng) cũng như phía máy chủ (với Nodejs). Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java.js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript GIAI ĐOẠN PHÁT TRIỂN JAVASCRIPT Năm Phiên bản 1995 Javascript được tạo ra bởi Brendan Eich 1997 Javascript trở thành chuẩn ECMA, và phiên bản ECMAScript 1 đầu tiên ra rời 1998 ECMAScript 2 ra đời 1999 ECMAScript 3 ra đời 2009 ECMAScript 5 ra đời 2015 ECMAScript 2015 ra đời 2016 ECMAScript 2016 ra đời … … 2022 ECMAScript 2022 ra đời Trang 4 Tieu luan 2. Thư Viện Cho CSS Và Javascript 2.1 Bootstrap Là một Frontend Framework để giúp xây dựng website nhanh và tương thích nhiều thiết bị (laptop, điện thoại,.) Bootstrap chứa những thiết kế HTML và CSS cũng như Javascript để nhà phát triển có thể nhanh chóng và dễ dàng phát triển web thích ứng phù hợp với mọi thiết bị, trình duyệt và tính nhất quán trong thiết kế được đảm bảo GIAI ĐOẠN PHÁT TRIỂN BOOTSTRAP: Năm Phiên bản 2011 Ra đời đầu tiên với tên Twitter Blueprint bởi Mark Otto và Jacob Thornton 2012 Bootstrap 2 ra đời 2013 Bootstrap 3 ra đời 2014 Bootstrap 4 ra đời 2021 Bootstrap 5 ra đời ( Sử dụng ) Trang 5 Tieu luan 2.2 jQuery Là một thư viện phổ biến nhất của Javascript đơn giản hoá việc lập trình Javascript nhiều hơn jQuery thực hiện rất nhiều tác vụ phổ biến đòi hỏi nhiều dòng code JavaScript để hoàn thành và gói chúng thành các phương thức mà bạn chỉ cần gọi chúng.
Hoạt động tốt với mọi nền tảng trang trình duyệt như IE, Firefox, Chrome… từng được các công ty lớn sử dụng như Google, Microsoft, IBM, Netflix… Thư viện jQuery chứa: Thao tác HTML/DOM Thao tác CSS Phương thức HTML event Hiệu ứng và hoạt ảnh chuyển cảnh AJAX Tiện ích GIAI ĐOẠN PHÁT TRIỂN JQUERY Năm Phiên bản 2006 jQuery 1 ra đời … … 2013 jQuery 2 ra đời … … 2016 jQuery 3 ra đời … … Hiện nay jQuery 3.6 ra đời ( Sử dụng ) Trang 6 Tieu luan 2.3 Các thư viện bổ sung cho web Tên thư viện Phiên bản Chức năng Nguồn fontAwesome Pro 6.1 Hỗ trợ gói icon fontawesome.4 HIển thị process codebyzach.io/pace page load animate 4.1 Thêm animation animate.style cho thẻ HTML aos 2.4 Thêm animation michalsnik.io/aos khi lướt web nice-select 2.0 Cải tiến select bluzky.io/nice-select2 dropdown lolibox 1.7 Popup hiển thị github.com/arboshiki/lobibox notification thông báo tiny-slider 2.3 Làm slider cho ganlanyuan.io/tiny-slider ảnh hoặc đối tượng metismenu 3.7 Cải tiến thanh onokumus.io/metismenu menu có thể thu gọn perfect-scrollbar 1.5 Tạo thanh cuộn perfectscrollbar.1 Tạo các biểu đồ apexcharts.com thống kê hiện đại datatable 1.1 Xây dựng bảng datatables.net dữ liệu thống kê star-rating.0 Tạo đánh giá sản pryley.io/star-rating.js phẩm Trang 7 Tieu luan 3. Ngôn Ngữ Lập Trình Backend PHP PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") là một ngôn ngữ lập trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát. Nó rất thích hợp với web và có thể dễ dàng nhúng vào trang HTML. Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến nhất thế giới.
GIAI ĐOẠN PHÁT TRIỂN PHP Năm Phiên bản 1995 PHP 1 ra đời lần đầu với tên gọi Personal Home Page Tools (PHP Tool) 1997 PHP 2 ra đời với tên gọi PHP/FI 2.0 1998 PHP 3 ra đời, với chuyển đổi giữa dự án cá nhân thành dự án cộng đồng gồm nhiều nhà phát triển đóng góp 2000 PHP 4 ra đời với Zend engine … … 2020 PHP 8 ra đời 2021 PHP 8.1 ra đời ( Sử dụng ) Trang 8 Tieu luan 4. MySQL Database MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng. Vì MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh. Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên internet.
MySQL miễn phí hoàn toàn cho nên bạn có thể tải về MySQL từ trang chủ. Nó có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS,… GIAI ĐOẠN PHÁT TRIỂN mySQL Năm Phiên bản 1995 Phiên bản mySQL đầu tiên ra đời 1997 mySQL 3.20 ra đời … … 2008 Sun MicroSystem mua lại mySQL và mySQL 5 ra đời 2013 mySQL 5.1 ra đời … … 2015 mySQL 5.7 ra đời 2018 mySQL 8 ra đời ( Sử dụng ) Trang 9 Tieu luan 5. Mô Hình MVC 5.1 Giới thiệu MVC MVC là viết tắt của Model-View-Controller là một mô hình trong thiết kế phần mềm để triển khai giao diện, dữ liệu, kiểm soát logic của người dùng. Mô hình nhấn mạnh điểm tách biệt giữa logic và hiển thị của phần mềm Sự tách biệt này giúp cho việc phát triển và bảo trì ứng dụng được làm hiệu quả hơn, và nhanh chóng hơn, mọi thứ được cải thiện… Có một số mẫu thiết kế khác dựa trên MVC chẳng hạn như: MVVM (Model-View-ViewModel), MVP (Model-View-Presenter), MVW (Model-View-Whatever).
Ba thành phần chính của MVC như sau: Model (dữ liệu), View (giao diện) và Controller (bộ điều khiển). Mỗi thành phần có một nhiệm vụ độc lập không phụ thuộc vào các thành phần khác.