Đang tải... (xem toàn văn)
TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA TOÁN – TIN ----- ----- KOMMANY KONGKIVONGSA THIẾT KẾ VÀ XÂY DỰNG WEBSITE QUẢN LÝ CỬA HÀNG CÀ PHÊ TRỰ C TUYẾN KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC Quảng Nam , tháng 05 năm 2021 TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA TOÁN – TIN ----- ----- KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC Tên đề tài: THIẾT KẾ VÀ XÂY DỰNG WEBSITE QUẢN LÝ CỬA HÀNG CÀ PHÊ TRỰC TUYẾN Sinh viên thực hiện KOMMANY KONGKIVONGSA MSSV: 21 18100115 CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN KHÓA 2018 – 2022 Cán bộ hướng dẫn TS HUỲNH TẤN KHẢI MSCB: 1245 Quảng Nam, tháng 05 năm 2022 LỜI CẢM ƠN Để hoàn thành khóa luận của mình, em xin chân thành cảm ơn giáo viên hướng dẫn là thầy Huỳnh Tấn Khải, giảng viên Trường Đại Học Quảng Nam, đã hướng dẫn tận tình, giúp em tìm ra hướng đi đúng của đề tài, tạo điều kiện thuận lợi cho em về thời gian và vấn đề tìm tài liệu có liên quan để giúp em hoàn thành đề tài nhanh nhất và tốt nhất Em là du học sinh đ ến từ một đất nước xa xôi, dĩ nhiên là không tránh khỏi những khó khăn nhất định, đặc biệt về mặt ngôn ngữ dẫn đến khả năng lĩnh hội bài giảng của thầy cô cũng gặp nhiều vấn đề Tuy nhiên, em rất vui mừng tự hào khi được sống và học tập dưới mái Trường Đại Học Quảng Nam, một môi trường đào tạo về ngành IT chuyên nghiệp và đặc biệt, dưới sự bảo bọc dạy dỗ tận tình của nhà trường, của các quý thầy cô, đến nay em đã tích lũy cho mình những vốn kiến thức vô cùng quý giá, làm hành trang cho cuộc sống sau này của em Em tự tin rằng, sau khi về lại đất nước Lào yêu thương của mình, em sẽ vận dụng tất cả kiến thức được đào tạo để truyền đạt lại cho những thế hệ đàn em đi sau, vận dụng kiến thức vào công việc kinh doanh làm giàu chính đáng và góp phần xây dựng đất n ước Lào ngày càng giàu đẹp hơn Một lần nữa, em xin tỏ lòng biết ơn chân thành đến thầy Huỳnh Tấn Khải Em chúc thầy luôn khỏe và thành đạt “Việt – Lào hai nước chúng ta Tình sâu hơn nước Hồng Hà, Cửu Long” MỤC LỤC PHẦN 1 MỞ ĐẦU 1 1 1 Lý do chọn đề tài 1 1 2 Mục tiêu 2 1 3 Lịch sử nghiên cứu 2 1 4 Phương pháp nghiên cứu 2 1 5 Cấu trúc đề tài 2 Phần 2 NỘI DUNG 3 Chương 1 CƠ SỞ LÝ THUYẾT 3 1 1 Lý thuyết về ngôn ngữ HTML 3 1 1 1 Tổng quan về ngôn ngữ HTML 3 1 1 2 Các thẻ trong HTML 4 1 1 3 C ấu trúc của một trang HTML 4 1 1 4 Các phần tử HTML (HTML element) 5 1 1 5 Form trong HTML 6 1 1 6 Sử dụng đa phương tiện trong HTML 7 1 2 Lý thuyết ngôn ngữ CSS 8 1 2 1 Tổng quan về CSS 8 1 2 2 Cách chèn mã CSS vào trang HTML 8 1 2 3 Cú pháp CSS 9 1 2 4 Thẻ chọn trong CSS 9 1 3 Lý thuyết về ngôn ngữ JavaScript 11 1 3 1 Tổng quan về ngôn ngữ JavaScript 11 1 3 2 Cách nhúng mã JavaScript vào trang HTML 12 1 3 3 Mô hình đối tượng tài liệu DOM 13 1 3 4 Mô hình đối tượng trình duyệt BOM 13 1 4 Lý thuyết ngôn ngữ PHP 15 1 4 1 Tổng quan về ngôn ngữ PHP 15 1 4 2 Cú pháp cơ bản của PHP 17 1 4 3 Một số lưu ý khi sử dụng PHP 17 1 4 4 Biến trong PHP 17 1 5 Lý thuyết về MySQL 18 1 5 1 Tổng quan về MySQL 18 1 5 2 PHP kết nối với MySQL 19 1 5 3 Mục đích sử dụng cơ sở dữ liệu 20 1 6 Giới thiệu về phần mềm tạo máy chủ web XAMPP 20 1 6 1 Tổng quan về XAMPP 20 1 6 2 Thông tin cơ bản Xampp 21 1 6 3 Phần mềm được tích hợp với xampp là gì? 22 1 6 4 XAMPP được dùng làm gì? 23 1 6 5 Ưu điểm và nhược điểm của XAMPP là gì? 23 1 6 6 Hướng dẫn cài đặt XAMPP 24 Chương 2 PHÂN TÍCH CÁC CHỨC NĂNG CỦA HỆ THỐNG 26 2 1 Đặc tả bài toán 26 2 2 Phân tích hệ thống 26 2 2 1 Yêu cầu giao diện của website 26 2 2 2 Các tác nhân của hệ thống 27 2 3 Mô hình biển đồ Use case của hệ thống 27 2 4 Thiết kế hệ thống 31 2 4 1 Đầu tiên là đăng nhập 31 2 4 2 Đối với trang chủ của chương trình sẽ có 31 2 4 3 Đối với sản phẩm trong cửa hàng 31 2 4 4 Đối với nhân viên trong của hàng 32 2 4 5 Đối với hóa đơn của cửa hàng sẽ tách ra thành hai phần 32 2 4 6 Đối với vấn đề thống kê doanh thu của cửa hàng 33 2 4 7 Đối với khách hàng của cửa hàng 33 2 4 8 Đối với đăng nhập 33 2 5 Lược đồ thiết kế Cơ sở dữ liệu 33 2 6 Dữ liệu bảng 34 2 6 1 Bảng hóa đơn 34 2 6 2 Bảng sản phẩm 34 2 6 3 Bảng sự thay đổi lịch 35 2 6 4 Bảng nhà cung cấp 35 2 6 5 Bảng nhân viên 35 Chương 3 TRIỂN KHAI XÂY DỰNG WEBSITE 36 3 1 Giao diện trang Thống kê 36 3 2 Giao diện trang chủ 36 3 3 Giao diện trang đăng nhập 38 3 4 Giao diện trang Quản lý Sản phẩm 38 3 5 Giao diện trang Quản lý Nhân Viên 39 3 6 Giao diện trang Quản lý Lịch làm việc 40 3 7 Giao diện trang Quản lý Tiền lương 40 Phần 3 KẾT LUẬN 41 1 Kết quả đạt được 41 2 Hạn chế của đề tài 41 3 Hướng phát triển của đề tài 41 Phần 4 TÀI LI ỆU THAM KHẢO 42 1 PHẦN 1 MỞ ĐẦU 1 1 Lý do chọn đề tài Trên thế giới cũng như ở Việt Nam, công nghệ thông tin trở thành một công nghệ mũi nhọn, nó là ngành khoa học kỹ thuật không thể thiếu trong việc áp dụng vào các h oạt động xã hội như: xây dựng website cửa hàng cafe, kinh tế, thông tin, kinh doanh và mọi hoạt động trong lĩnh vực nghiên cứu,… Việc tiếp thị và xây dựng các chiến dịch tiếp tị trực tuyến vô cùng quan trọng, có thể nói nó tác động trực tiếp đến mức độ và hiệu quả kinh doanh cảu nhiều công ty, doanh ng hiệp hiện nay Các doanh nghiệp luôn muốn sở hữu một trang web hoàn hảo, dễ dàng tiếp cận các khách hàng tiềm năng và tăng độ phổ biến rộng rãi đến nhiều tầng lớp đối tượng trong xã hội Mục đích của việc thi ết kế web chính là có thể giúp bạn quảng bá thương hiệu không giới hạn với chi phí quảng cáo thấp nhưng mang về nguồn lợi hiệu quả Do đó, nhiều doanh nghiệp khi mới thành lập đã tiến hành thiết kế website, một mặt để đảy mạnh các hoạt động kinh doanh, mặt khác để khẳng định thương hiệu của mình tr ê n th ị trường Ở nước ta hiện nay, để đáp ứng được nhu cầu và sở thích của con người trong việc mua bán đồ uống giải khát qua mạng Ngoài những cửa hàng quán cafe trên thị trường, để có thể phục vụ tại chỗ mà khôn g cần đi lại, không tốn thời gian thì con người chỉ cần ngồi và order nhanh Quản lý cửa hàng café trực tuyến giúp phục vụ việc tìm hiểu và tra cứu các thông tin liên quan đến thức uống của con người Hiện nay trên nhiều trang mạng có rất nhiều trang quản g cáo về các sản phẩm cho quán đồ uống của mình, cũng như có các lời tư vấn về các loại nước và đặc biệt là cà phê Để giúp đỡ trong việc lựa chọn của các khách hàng một cách tốt nhất, không lãng phí thời gian và được sản phẩm có chất lượng cao Vì các lý do trên, e m lựa chọn t hiết kế và xây dự ng website quản lý cửa hàng cà phê trực tuyến 2 1 2 Mục tiêu Em chọn đề tài “Thiết kế và xây dựng website quản lý cửa hàng cà phê trực tuyến” nhằm dựa vào việc xây dựng một website quản lý các đồ uống, quảng bá sản p hẩm, các mặt hàng có trên trang Thông qua đó nâng cao năng lực sử dụng các ngôn ngữ HTML, CSS, JS, PHP, MySQL 1 3 Lịch sử nghiên cứu Đã có nhiều người nghiên cứu về phần mềm quản ký website café trực tuyến Em đã chọn đề tài :” Thiết kế và xây dựng web site quản lý cửa hàng cà phê trực tuyến “ Em đã dành thời gian nghiên cứu trong vòng 5 tháng kể từ tháng 11 năm 2021 đến tháng 4 năm 2022 1 4 Phương pháp nghiên cứu - Phương pháp nghiên cứu tài liệu - Phương pháp nghiên cứu thực nhiệm 1 5 Cấu trúc đề tà i Bài báo cáo gồm 3 chương: Chương 1: CƠ SỞ LÝ THUYẾT Chương 2: PHÂN TÍCH CÁC CHỨC NĂNG CỦA HỆ THỐNG Chương 3: TRIỂN KHAI XÂY DỰNG WEBSITE 3 Phần 2 NỘI DUNG Chương 1 CƠ SỞ LÝ THUYẾT 1 1 Lý thuyết về ngôn ngữ HTML 1 1 1 Tổng quan về ngôn ngữ HT ML Ngôn ngữ HTML là ngôn ngữ dùng để mô tả cấu trúc nội dung các tài liệu Web (Web document) hay trang Web (Web page) HTML viết tắt của cụm từ HyperText Markup Language Tài liệu được mô tả bởi các thẻ HTML (HTML tags) Mỗi thẻ HTML mô tả nội dung tài li ệu khác nhau Để phổ biến thông tin trên toàn cục, cần một ngôn ngữ phổ biến và dễ hiểu, một kiểu việc phổ biến tiếng mẹ đẻ mà toàn bộ các máy tính có thể hiểu được Ngôn ngữ phổ biến dùng bởi World Wide Web là HTML (Hyper Text Markup Language) HTML cho tác giả các ý nghĩa để: • Phổ biến các tài liệu trực tuyến với các heading, văn bản, bảng, danh sách, ảnh, v v… • Truy tìm thông tin trực tuyến theo các liên kết siêu văn bản bằng việc kích vào một nút • Thiết kế các định dạng cho việc kiểm soát các giao dịch (transaction) với các thiết bị từ xa, đối với người dùng trong việc tìm kiếm thông tin, tạo các sản phẩm, đặt hàng, v v… • Bao gồm spread - sheets, video clips, sound clips, và các ứng dụng trực tiếp khác trong các tài liệu của họ Các trang Web đầy si nh động mà bạn thấy trên World Wide Web là các trang siêu văn bản được viết bằng ngôn ngữ đánh dấu siêu văn bản hay HTML - HyperText Markup Language HTML cho phép bạn tạo ra các trang phối hợp hài hòa văn bản thông thường với hình ảnh, âm thanh, video, cá c mối liên kết đến các trang siêu văn bản khác Tên gọi ngôn ngữ dánh dấu siêu văn bản phản ánh đúng thực chất của công cụ này: • Đánh dấu (Markup): HTML là ngôn ngữ của các thẻ đánh dấu - Tag Các thẻ này xác định cách thức trình bày đoạn văn bản tươ ng ứng trên màn hình 4 • Ngôn ngữ (Language): HTML là một ngôn ngữ tương tự như các ngôn ngữ lập trình, tuy nhiên đơn giản hơn Nó có cú pháp chặt chẽ để viết các lệnh thực hiện việc trình diễn văn bản Các từ khoá có ý nghĩa xác định được cộng đồng Internet thừa nhận và sử dụng Ví dụ b = bold, ul = unordered list, • Văn bản (Text): HTML đầu tiên và trước hết là để trình bày văn bản và dựa trên nền tảng là một văn bản Các thành phần khác như hình ảnh, âm thanh, hoạt hình đều phải cắm neo vào một đoạn văn bản nào đó • Siêu văn bản (Hyper): HTML cho phép liên kết nhiều trang văn bản rải rác khắp nơi trên Internet Nó có tác dụng che dấu sự phức tạp của Internet đối với người sử dụng Người dùng Internet có thể đọc văn bản mà không cần biết đến văn bản đó nằm ở đâu, hệ thống được xây dựng phức tạp như thế nào HTML thực sự đã vượt ra ngoài khuôn khổ khái niệm văn bản cổ điển 1 1 2 Các thẻ trong HTML Các thẻ HTML là các từ khóa được bao bọc bởi cặp dấu ngoặc nhọn Cú pháp như sau: N Ộ I DUNG < /tên th ẻ > Trong đó: thẻ đầu tiên gọi là thẻ mở và thẻ thứ hai gọi là thẻ đóng Thẻ đóng được viết giống như thẻ mở nhưng thêm vào dấu xuyệt (/) ở phía trước 1 1 3 Cấu trúc của một trang HTML Dưới đây là mô tả cấu trúc của một trang HTML Tiêu đ ề c ủ a trang Đây là ph ầ n m ở r ộ ng
Đây là m ộ t đo ạ n
Đây là m ộ t đo ạ n khác
5 Cấu trúc của HTML rất đơn giản và logic, với bố cục từ trên xuống dưới, từ trái qua phải, với 2 phần chính là HEAD và BODY Các website viết bằng HTML đều tuân theo cấu trúc cơ bản như sau: - Mọi trang HTML đều phải khai báo DOCTYPE (định nghĩa chuẩn văn bản) ngay từ dòng đầu tiên - Thẻ < html > cho trình duyệt biết mở đầu và kết thúc của trang HTML - Thẻ < head > chứa tiêu đề và các thông tin khai báo, các thông tin ẩn khác - Thẻ < body > sẽ hiển thị nội dung của trang web Đây là phần thông tin mà người dùng sẽ nhìn thấy khi trình duyệt đọc các mã HTML - Thẻ cho biết tiêu đề của tài liệu Tiêu đề sẽ không hiển thị trong tài liệu nhưng chúng xuất hiện trong thẻ trình duyệt (browser tab) - Mọi kí tự nằm giữa dấu sẽ được xem là thẻ comment và sẽ bị trình duyệt bỏ qua, không xử lý và không hiển thị Một file HTML có phần mở rộng là html hoặc htm 1 1 4 Các phần tử HTML (HTML element) - Một tài liệu HTML tạo nên từ nhiều thành phần HTML Một thành phần HTML được đánh dấu bằng một cặp thẻ mở và thẻ đóng - Các thành phần HTML có thể cấu trúc phân cấp hình câ y, thành phần mẹ chứa nhiều thành phần con khác lồng bên trong nó - Có thành phần rỗng, chỉ có thẻ mở - Để soạn thảo tài liệu HTML đúng cú pháp, cần nắm vững cấu trúc của từng thành phần HTML Không giống như khi lập trình, nếu bạn mắc lỗi cú pháp HTLM sẽ không có một thông báo lỗi nào báo cho biết mà trình duyệt sẽ hiểu lầm và trình bày trang Web không như bạn muốn mà thôi 6 1 1 5 Form trong HTML Phần tử trong HTML được sử dụng để thu thập thông tin của người dùng nhập vào Được định nghĩa như sau: Các ph ầ n t ử trong form Các phần tử trong form bao gồm các phần tử input, checkbox, radio button, submit button, … 1 1 5 1 Các thuộc tính trong Một phần tử với các thuộc tính được thiết lập có dạng như sau: Các phần tử trong form Các thuộc tính của form bao gồm: action, accept - charset, encty pe, method, name, target Lưu ý: Thuộc tính method mô tả phương thức HTML sử dụng để gửi dữ liệu từ form Hai phương thức được sử dụng là POST và GET Khi sử dụng phương thức GET, dữ liệu từ form sẽ được hiển thị trên thanh địa chỉ (address) do vậy không có tính bảo mật Đây là phương thức mặc định Trong trường hợp thông tin trên form là quan trọng, cần được bảo mật (như password) thì ta sử dụng phương thức POST, lúc này dữ liệu được gởi đi sẽ không hiển thị trên thanh address 1 1 5 2 Các phần tử tron g - Phần tử : Đây là phần tử quan trọng nhất trong form Phần tử này có nhiều biến thể phụ thuộc vào thuộc tính type - Phần tử : Phần tử định nghĩa một danh sách thả xuống - Phần tử : Phần tử định nghĩa một trường nhập văn bản trên nhiều dòng Trong đó, thuộc tính rows, cols cho biết số dòng và số cột của ô nhập 7 - Phần tử : Phần tử định nghĩa một danh sách các tùy chọn đã được xác định trước trong phần tử Người dùng sẽ thấy một danh sách sổ xuống các tùy chọn đã được xác định trước Thuộc tính list của phần tử ám chỉ thuộc tính id của phần tử - Phần tử : Mục đích của phần tử là cung cấp một cách an toàn để xác thực người dùng Phần tử mô tả một trường tạo khóa trong một form Khi một form được gửi, hai khóa sẽ được tạo ra, một khóa private và một khóa public Khóa private được lưu trữ máy client, và khóa public được gửi đén server Các khóa public có thể sử dụng để tạo một chứng chỉ k hách hàng để xác thực người dùng trong tương lai 1 1 6 Sử dụng đa phương tiện trong HTML Thuật ngữ “Đa phương tiện” (multimedia) trên web được hiểu là âm thanh, nhạc, phim ảnh, hoạt hình trên trang web đó - Chèn Video: Trước HTML5, một video có thể đượ c chạy trên trình duyệt với một plug - in (như flash) Trong HTML5, sử dụng thẻ để nhúng 1 file video vào trong trang web Văn bản nằm giữa cặp thẻ sẽ xuất hiện trên trình duyệt trong trường hợp trình duyệt không hỗ trợ phần tử - Ch èn Audio: HTML5 sử dụng phần tử để chèn 1 file audio vào trang web - Chèn Plug - ins: Plug - ins là các chương trình máy tính dùng để mở rộng các chức năng tiêu chuẩn của một trình duyệt web, ví dụ như Java applet, PDF readers, Flash Players… Plug - ins có thể được thêm vào trang web bằng phần tử hoặc Plug - ins có thể được sử dụng cho nhiều mục đích như: hiển thị bản đồ,scan vius, xác thực mã ngân hàng,… - Chèn Video từ Youtube: Bằng cách sử dụng một trong các phần tử: , hoặc ta đều có thể chèn một file video từ Youtube vào trang web mình 8 1 2 Lý thuyết ngôn ngữ CSS 1 2 1 Tổng quan về CSS CSS (Cascading Style Sheet) là một ngôn ngữ định kiểu mô tả cách trình bày một tài liệu HTML hoặc XML CSS mô tả cách các p hần tử được xuất ra trên màn hình, trên giấy hoặc trên các phương tiện truyền thông HTML được tạo ra để mô tả nội dung của trang web, nhưng không thể định dạng cách trình bày một trang web Còn CSS được sử dụng để định nghĩa kiểu dáng cho trang web, bao gồm cả việc thiết kế, bố trí và các thay đổi khi hiển thị cho các thiết bị và kích cỡ màn hình khác nhau CSS có thể điều chỉnh bố cục của nhiều trang web cùng một lúc 1 2 2 Cách chèn mã CSS vào trang HTML Khi trình duyệt đọc một bảng định kiểu (styles heet), nó sẽ định dạng tài liệu HTML theo các thông tin trong bảng định kiểu đó Có ba cách chèn mã CSS vào trang HTML: - CSS ngoại tuyến (external CSS) - CSS nội tuyến (internal CSS) - CSS cục bộ (inline CSS) 1 2 2 1 CSS ngoại tuyến Với CSS ngoại tuyến, t a có thể thay đổi toàn bộ giao diện trang web bằng cách chỉ thay đổi một tập tin Lúc này bảng định dạng sẽ được khai báo trong một tập tin có phần mở rộng là css Mỗi trang HTML phải chứa một tham chiếu đến tập tin CSS này Địa chỉ của tập tin CSS sẽ đượ c khai báo trong phần tử Lưu ý: Một file CSS có thể được viết bằng bất kỳ một trình soạn thảo nào Trong tập tin CSS không chứa bất kỳ một thẻ HTML nào, và tập tin CSS có phần mở rộng là css 1 2 2 2 CSS nội tuyến Với CSS nội tuyến, ta chỉ có t hể định dạng kiểu dáng cho trang web hiện hành Để sử dụng CSS nội tuyến, ta khai báo nội dung định dạng trong phần tử trong phần của trang HTML hiện hành 9 1 2 2 3 CSS cục bộ CSS cục bộ được sử dụng để tác động đến kiểu dáng của một phần tử HTML bất kỳ Để sử dụng CSS cục bộ, ta thêm thuộc tính style vào phần tử chịu tác động Thuộc tính style này có thể chứa bất kỳ thuộc tính CSS nào Lưu ý : Khi có nhiều hơn một khai báo định dạng trong 1 trang HTML, thì thứ tự ưu tiên sẽ được thực hiện như sau: 1 CSS cục bộ 2 CSS nội tuyến và ngoại tuyến (theo thứ tự khai báo tr ong phần , nếu có hai khai báo của cùng một phần tử thì khai báo sau thì sẽ được sử dụng trước) 3 CSS mặc định của trình duyệt 1 2 3 Cú pháp CSS Cú pháp của CSS bao gồm th ẻ chọn (selector) và khối khai báo (declaration block): Th ẻ ch ọ n{ Thu ộ c tính 1: Giá tr ị 1; Thu ộ c tính 2: Giá tr ị 2; } Trong đó: - Thẻ chọn chứa phần tử HTML cần định dạng - Khối khai báo chứa nhiều khai báo được ngăn cách bởi dấu ; - Mỗi khai báo bao gồm tên một thuộc tính CSS và một giá trị tương ứng, ngăn cách nhau bởi dấu: - Khối khai báo được đặt trong cặp dấu {} 1 2 4 Thẻ chọn trong CSS 1 2 4 1 Thẻ chọn phần tử HTML Thẻ chọn phần tử HTML lựa chọn các phần tử dựa trên tên của phần tử HTML 1 2 4 2 Thẻ chọn id 10 Thẻ chọn id sử dụng thuộc tính id của phẩn tử HTML, id của một phần tử là duy nhất trong một trang, nên thẻ chon id được sử dụng để chọn một phần tử duy nhất Khi khai báo ta sử dụng dấu thăng (#) phía trước thẻ chọn Cách khai báo như sau: []#(< kh ố i khai báo>) Trong đó: là tùy chọn Lúc này trong phần tử sử dụng ta khai báo thuộc tính id=”” 1 2 4 3 Thẻ chọn Class Thẻ chọn class lựa chọn các phần tử HTML dựa vào thuộc tính class Thẻ chọn class có thể được sử dụng để chọn nhiều phần tử trên cùng một trang Khi khai báo, ta sử dụng dấu chấm ( ) phía trước tên thẻ chọn: [] () Trong đó: là tùy chọn Lúc này trong phần tử sử dụn g ta khai báo thuộc tính class=”tên thẻ chọn” Tại sao sử dụng CSS? Đây là ba lợi ích chính của CSS: Giải quyết một vấn đề lớn Trước khi có CSS, các thẻ như phông chữ, màu sắc, kiểu nền, các sắp xếp phần tử, đường viền và kích thước phải được lặp lại t rên mọi trang web Đây là một quá trình rất dài tốn thời gian và công sức Ví dụ: Nếu bạn đang phát triển một trang web lớn nơi phông chữ và thông tin màu được thêm vào mỗi trang, nó sẽ trở thành một quá trình dài và tốn kém CSS đã được tạo ra để giải quy ết vấn đề này Đó là một khuyến cáo của W3C Nhờ CSS mà source code của trang Web sẽ được tổ chức gọn gàng hơn, trật tự hơn Nội dung trang web sẽ được tách bạch hơn trong việc định dạng hiển thị Từ đó, quá trình cập nhập nội dung sẽ dễ dàng hơn và có th ể hạn chế tối thiểu làm rối cho mã HTML Tiết kiệm rất nhiều thời gian Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài vì vậy có thể thay đổi toàn bộ trang web bằng cách thay đổi chỉ một tệp Sử dụng CSS sẽ giúp bạn không cần 11 thực hiện lặp lại các mô tả cho từng thành phần Từ đó, bạn có thể tiết kiệm được tối đa thời gian làm việc với nó, làm code ngắn lại giúp kiểm soát dễ dàng hơn các lỗi không đáng có CSS tạo ra nhiều style khác nhau nên có thể được áp dụng với nhiều trang web, từ đó giảm t ránh việc lặp lại các định dạng của các trang web giống nhau Cung cấp thêm các thuộc tính CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của trang web CSS giúp người dùng nhiều styles trên một trang web HTML nên khả năng điều c hỉnh trang của bạn trở nên vô hạn 1 3 Lý thuyết về ngôn ngữ JavaScript 1 3 1 Tổng quan về ngôn ngữ JavaScript JavaScript là một trong ba ngôn ngữ mà các nhà phát triển web phải học Với HTML và CSS ta đã biết cách tạo ra trang web, tuy nhiên chỉ mới ở mức biểu diễ thông tin chứ chưa phải là các trang web động có khả năng đáp ứng các sự kiện từ phía người dùng Việc sử dụng JavaScript giúp biểu diễn hành vi của trang web phản hồi với những tương tác từ phía người sử dụng JavaScript là ngôn ngữ dưới s cript coa thể gắn với các file HTML Noa không được biên dịch mà được trình duyệt diễn dịch Không giống java phải chuyển thành các mã để biên dịch, trình duyệt đọc javaScript dưới dạng mã nguồn Chính vì vậy ta có thể dễ dàng học JavaScript qua các ví dụ JavaScript là ngôn ngữ lập trình dựa trên đối tượng, có nghĩa là bao ggoomf nhiều kiểu đối tượng Tuy vậy javaScript không phải là ngôn ngữ lập trình hướng đối tượng như C++ hay java do không hỗ trợ các lớp hay tính thừa kế JavaScript có thể đáp ứng các sự kiện như tải hay loại bỏ các form Khả năng này cho phép JavaScript trở thành một ngôn ngữ script động Giống với HTML va java, JavaScript được thiết kế độc lập với hệ điều hành Nó có thể chạy trên bất kỳ điều hành nào có trình duyệt hỗ trợ JavaScrip t Ngoài ra JavaScript giống java ở khía cạnh an ninh: JavaScript không thể đọc và viết vào file của người dùng Các trình duyệt web hiện nay có thể hiển thị những câu lệnh JavaScript được nhúng vào trang HTML Khi trình duyệt yêu cầu một trang, server sẽ gửi đầy đủ nội dung của 12 trang đó, bao gồm cả HTML và các câu lệnh JavaScript qua mạng tới Client Client sẽ đọc trang đó từ đầu đến cuối, hiển thị các kết quả cảu HTML và xử lý các câu lệnh JavaScript bất cứ nơi nào chúng xuất hiện Các câu lệnh JavaScri pt được nhúng trong một trang HTML có thể trả lời cho các sự kiện của người sử dụng như kích chuột, nhập vào một form và điều hướng trang Ví dụ ta có thể kiểm tra các giá trị thông tin mà người sử dụng đưa vào mà không cần đến bất cứ một quá trình truyền trên mạng nào Trang HTML mà JavaScript được nhúng vào sẽ kiểm tra các giá trị được đưa vào và sẽ thông báo với người sử dụng khi giá trị đưa vào là không hợp lệ 1 3 2 Cách nhúng mã JavaScript vào trang HTML Ta có thể nhúng JavaScript vào một file HTML theo một trong các cách sau đây: - Sử dụng các câu lệnh và các hàm trong cặp thẻ - Sử dụng các file JavaScript bên ngoài 1 3 2 1 Sử dụng thẻ Script được đưa vào file HTML bằng cách sử dụng cặp thẻ Các thẻ có thể xuất hiện trong phần hay của file HTML hoặc ở cả hai nơi Nếu đặt trong phần