CHƯƠNG I. Khái quát đề tài 1.1 Phân tích yêu cầu đề tài Yêu cầu của đề tài xây dựng một Website bán cà phê , người dùng có thể mua nước uống cà phê qua mạng bằng cách đăng ký tài khoản cá nhân. Thanh toán khi nhận hàng trực tiếp hoặc tích hợp thanh toán online bằng thẻ ngân hàng. Cửa hàng sẽ thường xuyên cập nhật các sản phẩm mới nhất, thuận tiện nhất cho người mua và người bán.
Khách hàng có thể dễ dàng tìm kiếm các sản phẩm phù hợp. Giao diện đơn giản, dễ sử dụng, thân thiện với người dùng. Phần quản trị có thể thêm, sửa, xóa các danh mục sản phẩm, thiết lập website, hoàn toàn có thể thay đổi toàn bộ giao diện trên trang quản trị. Giúp người dùng có thể thay đổi theo ý mình.2 Phạm vi đề tài Phạm vi quay quanh các nghiệp vụ bán hàng, tuân theo nghiệp vụ quán lý của quán cafe, đảm bảo đầy đủ các chức năng chính của phần mềm và khai thác các chức năng mới có liên quan đến quản lý quán café nhằm giúp cho phần mềm thêm phần tiện ích.
Giới thiệu ngôn ngữ và công nghệ sử dụng 2.1 Tìm hiểu về HTML 2. HTML là gì? 12 HTML có tên đầy đủ là Hypertext Markup Language nghĩa là ngôn ngữ đánh dấu siêu văn bản. HTML thường được sử dụng để tạo và cấu trúc các phần trong trang web và ứng dụng, phân chia các đoạn văn, heading, link, blockquotes,… HTML không phải là một ngôn ngữ lập trình mà chỉ là một ngôn ngữ đánh dấu. Điều này đồng nghĩa với việc HTML không thể thực hiện các chức năng “động”.
Nói cách khác, HTML tương tự như phần mềm Microsoft Word, chỉ có tác dụng định dạng các thành phần có trong website. Vai trò của HTML HTML là một loại ngôn ngữ đánh dấu siêu văn bản. Nó giúp cấu thành các cấu trúc cơ bản của một Website, làm cho trang Web trở thành một hệ thống hoàn chỉnh. Cụ thể, ngôn ngữ đánh dấu siêu văn bản này giúp bố cục, chia khung sườn các thành phần trang Web.
Đồng thời, nó còn hỗ trợ khai báo các File kỹ thuật số như nhạc, Video, hình ảnh, … Nếu muốn Website có cấu trúc tốt, sử dụng nhiều loại yếu tố trong văn bản, bạn sẽ cần đến HTML. HTML thực chất chứa những yếu tố cần thiết cho mọi thể loại Website. Trang Web của bạn sẽ cần đến ngôn ngữ HTML để hiển thị nội dung cho người truy cập. Điều này đúng dù trang của bạn xây dựng trên bất kỳ nền tảng nào, giao tiếp với bất kỳ ngôn ngữ lập trình nào để xử lý dữ liệu 2.
Đặc điểm của HTML HTML có nhiều thẻ định dạng, do đó bạn có thể trình bày trang Web dễ dàng, hiệu quả với ngôn ngữ đánh dấu siêu văn bản này. Với tôi, nó là một ngôn ngữ đánh dấu dễ dàng và đơn giản để sử dụng. Chúng ta có thể sử dụng nó để thiết kế trang Web cùng với văn bản một cách linh hoạt. HTML có thể liên kết đến các trang Web khác.
Nhờ ngôn ngữ đánh dấu 13 này, bạn có thể thêm các Video, hình ảnh, âm thanh vào để các Website hấp dẫn, đẹp mắt và dễ tương tác hơn. Đặc biệt, HTML có thể hiển thị trên bất kỳ nền tảng nào khác như Linux, Windows, và Mac vì nó là một nền tảng độc lập 2. Ưu nhược điểm của HTML a. - Kho tài nguyên khổng lồ với cộng đồng người dùng rộng lớn - Sử dụng mã nguồn mở nên người dùng có thể sử dụng miễn phí - Hoạt động mượt mà trên hầu hết các trình duyệt - Cách thức hoạt động đơn giản nên người học có thể dễ dàng nắm bắt được kiến thức để triển khai cho website của mình - Có thể tích hợp với nhiều ngôn ngữ khác nhau như PHP, Java, NodeJs, Ruby,… giúp người dùng xây dựng được một trang web với nhiều tính năng hấp dẫn - Sử dụng các markup ngắn gọn và có tính đồng nhất cao - Quy định theo một tiêu chuẩn nhất định và được vận hành bởi World Wide Web Consortium (W3C) b.
Nhược điểm. - Chỉ áp dụng được cho web tĩnh, không có sự tương tác với người dùng. Nếu muốn trang bị cho web các tính năng tự động thì cần phải sử dụng dịch vụ của bên thứ 3. - Một số trình duyệt còn cập nhật chậm để hỗ trợ các phiên bản mới của HTML, đặc biệt là HTML5 - Việc kiểm soát cách đọc và hiển thị file HTML của trình duyệt khó thực hiện - Chỉ áp dụng với cấu trúc nhất định, không có khả năng sáng tạo 14 2.
Cấu trúc cơ bản trang HTML <!DOCTYPE html> <html> <head> <title>Tiêu đề trang web</title> </head> <body> .Phầ n thân viết ở đây. Lịch sử của HTML HTML được sáng tạo bởi Tim Berners-Lee, nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ. Anh ta đã nghĩ ra được ý tưởng cho hệ thống hypertext trên nền Internet. Hypertext có nghĩa là văn bản chứa links, nơi người xem có thể truy cập ngay lập tức.
Anh xuất bản phiên bản đầu tiên của HTML trong năm 1991 bao gồm 18 tag HTML. Từ đó, mỗi phiên bản mới của HTML đều có thêm tag mới và attributes mới. Theo Mozilla Developer Network: HTML Element Reference, hiện tại có hơn 140 HTML tags, mặc dù một vài trong số chúng đã bị tạm ngưng (không hỗ trợ bởi các trình duyệt hiện đại). Nhanh chóng phổ biến ở mức độ chóng mặt, HTML được xem như là chuẩn mật của một website.
Các thiết lập và cấu trúc HTML được vận hành và phát triển bởi World Wide Web Consortium (W3C). Bạn có thể kiểm tra tình trạng mới nhất của ngôn ngữ này bất kỳ lúc nào trên trang W3C’s website. Nâng cấp mới nhất gần đây là vào năm 2014, khi ra mắt chuẩn HTML5. Nó thêm vài tags vào markup, để xác định rõ nội dung thuộc loại là gì, như là <article>, <header>, và <footer>.
Ví dụ và kết quả 15 2.2 Tìm hiểu về CSS 2. CSS là gì? CSS là chữ viết tắt của Cascading Style Sheets, là ngôn ngữ tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như HTML. Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì một lý do đơn giản, HTML không được thiết kế để gắn tag để giúp định dạng trang web. Chỉ có thể dùng nó để “đánh 2.2 Vai trò của CSS Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ 16 màu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung.
Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau. Cấu trúc của CSS 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. + Thuộc tính: Thuộc tính của css qui định về cách bố trí, màu sắc,. + Giá trị thuộc tính: Nằm bên phải dấu " : " chỉ ra giá trị của thuộc tính đó.
VD: selector { thuộc tính 1 : giá trị 1; thuộc tính 2 : giá trị 2;. Lịch sử phát triển CSS lần đầu tiên được đề xuất bởi Håkon Wium Lie vào ngày 10 tháng 10 năm 1994. Vào thời điểm đó, Lie đang làm việc với Tim Berners-Lee tại CERN. Một số ngôn ngữ định kiểu khác cho web đã được đề xuất cùng lúc và các cuộc thảo luận về danh sách gửi thư cộng đồng cũng như đồng thuận trong World Wide Web Consortium dẫn đến CSS W3C đầu tiên 17 (CSS1) được phát hành vào năm 1996.
Đặc biệt, một đề nghị của Bert Bos có ảnh hưởng hơn đó là ông trở thành đồng tác giả của CSS1 và được coi là đồng sáng tạo CSS. Tập tin định kiểu theo tầng đã tồn tại ở dạng này hay dạng khác kể từ khi bắt đầu Ngôn ngữ đánh dấu tổng quát tiêu chuẩn (SGML -Standard Generalized Markup Language) vào những năm 1980 và CSS được phát triển để cung cấp biểu định kiểu cho web. Một yêu cầu đối với ngôn ngữ biểu định kiểu web là nó đến từ các nguồn khác nhau trên web. Do đó, các ngôn ngữ biểu định kiểu hiện có như DSSSL và FOSI không phù hợp.
Mặt khác, CSS để cho kiểu của tài liệu bị ảnh hưởng bởi nhiều biểu định kiểu theo kiểu “cascading” Khi HTML phát triển, nó đã bao gồm nhiều phong cách hơn để đáp ứng nhu cầu của các nhà phát triển web. Sự phát triển này đã cho nhà thiết kế kiểm soát nhiều hơn về diện mạo trang web. Một điều nữa đó là chi phí HTML phức tạp hơn. Sự khác biệt trong việc triển khai trình duyệt web, chẳng hạn như ViolaWWW và WorldWideWeb, khiến giao diện trang web nhất quán trở nên khó khăn và người dùng ít kiểm soát hơn cách hiển thị nội dung web.
Ví dụ và kết quả 18 2. Javascript là gì? JavaScript là một ngôn ngữ kịch bản (scripting language) dùng để tương tác với các trang HTML dựa trên đối tượng (object-based scripting language). Ngôn ngữ này chủ yếu dùng cho kỹ thuật lập trình ở phía client Các chương trình JavaScript thường được nhúng trực tiếp vào tập tin HTML bằng tag <script> hoặc tích hợp vào trang web thông qua một tập tin được khai báo trong tag <link> JavaScript có một số đặc điểm: Là một ngôn ngữ thông dịch (interpreted language), nghĩa là các script thi hành không cần biên dịch trước(precompile). Trình duyệt dịch Script phân tích và thi hành ngay tức 19 thời Lập trình theo cấu trúc (Structured programing) Có phân biệt chữ hoa và chữ thường 2.
Vai trò của Javascript 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. Cấu trúc của Javascript Đoạn mã javascript được đặt trong cặp thẻ mở javascript <script> </script> 2.
Lịch sử của Javascript JavaScript được bắt đầu vào năm 1995 tại Netscape Communications. Vào thời gian này, các nhà sản xuất Netscape browser nhận ra rằng, việc thêm một "glue language" để nâng cao trải nghiệm người dùng sẽ làm tăng sự tiêu thụ nội dung của người dùng. Vì vậy, họ đã đưa Brendan Eich nhúng vào Scheme Programming language.