Chương 1. Tổng quan đề tài Đưa ra được những kết quả bước đầu của quá trình thực nghiệm, từ đó định hướng được hướng phát triển tương lai của đề tài. Kết Quả Cần Đạt Được. Tác nhân: Sinh viên trường Đại học Bình Dương (User) – Giảng viên (Admin) Chức năng: User (Sinh Viên): Đăng nhập Đăng ký môn học được hệ thống nhắc khi đăng ký môn không nằm trong chương trình đào tạo.
Xem lịch học, lịch thi, điểm Admin (Giảng viên): Đăng nhập Quản lý số lượng môn được mở đăng ký Quản lý điểm của sinh viên Kết quả mong đợi là khi hoàn thành đề tài là có thể áp dụng trực tiếp vào web đăng ký môn của trường Đại học Bình Dương. NHD: Bùi Văn Chuyên 2 SVTH: Trương Minh Hiệp Đồ án tốt nghiệp Chương 2. Cơ sở lý thuyết CHƯƠNG 2. NGÔN NGỮ CASCADING STYLE SHEETS (CSS) 2.
Khái Niệm CSS là từ viết tắt của Cascading Style Sheets, tức là ngôn ngữ được dùng để định dạng các phần tử do ngôn ngữ đánh dấu (như HTML) tạo ra. Hay nói cách khác, HTML định dạng các phần tử có trên website như tiêu đề, bảng biểu, tạo đoạn văn bản…, còn CSS giúp cho các phần tử của HTML trở nên phong phú, nổi bật hơn, bằng cách trang trí, đổi màu chữ, thêm màu sắc cho trang hay thay đổi cấu trúc trang… CSS hoạt động dựa vào việc tìm các vùng chọn, ví dụ như thẻ HTML, class, tên ID… Kế đến, nó áp dụng những thuộc tính cần thay đổi lên các vùng chọn. Các Thuật Ngữ Phổ Biến Của Cascading Style Sheets (CSS) Một số thuật ngữ phổ biến mà bạn cần biết của ngôn ngữ CSS là selectors, properties, và values. Selectors: Khi có yếu tố thêm vào trang web và được tạo kiểu bằng CSS thì Selector thực hiện việc chỉ định chính xác thành phần của HTML.
Điều này giúp xác định đúng mục tiêu và kiểu áp dụng như màu sắc, kích thước hay vị trí. Selector bao gồm nhiều vòng style khác nhau kết hợp lại để chọn những yếu tố duy nhất, tùy thuộc vào mức độ cụ thể theo nhu cầu của người dùng. Ví dụ, người dùng chọn một đoạn xác định trên một trang hoặc chọn mỗi đoạn trên một trang. Mỗi Selector thường có một giá trị thuộc tính mục tiêu, điển hình như một id, class hoặc loại phần tử (ví dụ <h1> hoặc <p>).
Các Selector sẽ theo sau dấu “{}” trong CSS. Properties: Khi có bất kỳ phần tử nào được chọn thì thuộc tính xác định kiểu sẽ áp dụng cho nó. Tên của thuộc tính được đặt trong dấu sau “{}” của Selector và ngay trước dấu “:”. Có nhiều loại thuộc tính mà người dùng được phép sử dụng như color, background, height, width, font-size cùng một số thuộc tính mới khác.
Ví dụ đoạn code sau sẽ xác định thuộc tính color, front-size áp dụng cho tất cả <p>: p{ color: …; font-size: …; } Values: Người dùng thường chọn một Element với Selector, đồng thời xác định kiểu thuộc tính sẽ áp dụng với Property. Sau đó, họ tiến hành xác định hành vi Property tương ứng với một giá trị Value. Những giá trị được xác định là văn bản nằm giữa dấu “:” và dấu “;”. NHD: Bùi Văn Chuyên 3 SVTH: Trương Minh Hiệp Đồ án tốt nghiệp Chương 2.
Cách Viết CSS Trong HTML Để ngôn ngữ CSS có thể nói chuyện được với HTML, người dùng phải thực hiện tham chiếu tệp tin CSS trong HTML. Cách tham chiếu CSS tốt nhất là gồm toàn bộ kiểu trong một style sheet, và tham chiếu từ bên trong phần <head> của file HTML. Cách này cho phép người dùng có thể sử dụng cùng kiểu trang trí cho tất cả trang web. Đồng thời, nó cũng giúp tiết kiệm thời gian thực hiện thay đổi.
Có 3 cách viết CSS trong HTML: Trực tiếp: Bạn dùng thuộc tính style trong thẻ HTML: Kiểu viết này chỉ hữu dụng trong trường hợp bạn trang trí một kiểu cho một thành thẻ của trang HTML. Inline CSS được viết qua thuộc tính style. Ví dụ: Để đổi màu chữ của đề mục, bạn viết đoạn CSS có mã như sau: <!DOCTYPE html> <html> <body> <h1 style="color:red">Đây là đề mục đỏ</h1> </body> </html> Nội bộ: Bạn dùng thuộc tính <style> trong phần <head> của trang HTML: Kiểu viết này dùng để trang trí cho toàn bộ thành phần có trong HTML. Ví dụ: Cách viết CSS nội bộ như sau.
<!DOCTYPE html> <html> <head> <style> body {background-color: grey} h1 {color:red} p {color:blue} </style> </head> <body> <h1>Đây là đề mục</h1> <p> Đoạn văn bản.</p> </body> </html> CSS ngoài: Bạn dùng một hay một số tập tin CSS bên ngoài: Nếu có nhiều trang HTML cùng một phong cách trang trí, bạn chỉ nên sử dụng cách viết CSS bên ngoài rồi gọi chúng vào trang HTML. Bởi nếu dùng CSS trực tiếp hay nội bộ thì bạn bắt buộc phải lặp lại chúng ở mỗi trang. Ngoài ra, khi muốn thay đổi bất kỳ thành phần trang trí nào, bạn cũng thực hiện sửa ở tất cả các trang. NHD: Bùi Văn Chuyên 4 SVTH: Trương Minh Hiệp Đồ án tốt nghiệp Chương 2.
Cơ sở lý thuyết Cách viết CSS ngoài rất hữu ích khi bạn trang trí nhiều trang. Đồng thời, nếu cần thay đổi chi tiết trang trí, bạn chỉ việc điều chỉnh trên một tệp tin CSS và các trang HTML sẽ được thay đổi theo. Viết CSS ngoài vào tệp tin .css, sau đó thông qua <head> để gọi vào trang HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/wp-content/uploads/2015/05/demo_style.css"> </head> <body> <h1>Đây là đề mục</h1> <p> Đoạn văn bản. Cách Khai Báo CSS Khai Báo CSS: Đặt các thuộc tính CSS thành các giá trị cụ thể là chức năng cốt lõi của ngôn ngữ CSS.
Một cặp thuộc tính và giá trị được gọi là một khai báo và bất kỳ công cụ CSS nào cũng sẽ tính toán những khai báo nào áp dụng cho từng thành phần của trang để bố trí và tạo kiểu cho nó một cách thích hợp. Cả thuộc tính và giá trị đều không phân biệt chữ hoa chữ thường theo mặc định trong CSS. Cặp này được phân tách bằng dấu hai chấm và các khoảng trắng trước, giữa và sau các thuộc tính và giá trị, nhưng không nhất thiết phải ở bên trong. Cú pháp khai báo CSS Có hơn 100 thuộc tính khác nhau trong CSS và gần như vô số giá trị khác nhau.
Không phải tất cả các cặp thuộc tính và giá trị đều được phép và mỗi thuộc tính xác định giá trị hợp lệ là gì. Khi một giá trị không hợp lệ cho một thuộc tính nhất định, khai báo được coi là không hợp lệ và hoàn toàn bị công cụ CSS bỏ qua. NHD: Bùi Văn Chuyên 5 SVTH: Trương Minh Hiệp Đồ án tốt nghiệp Chương 2. Cơ sở lý thuyết Khối Khai Báo CSS: Các khai báo được nhóm trong các khối , nghĩa là trong một cấu trúc được phân cách bằng dấu ngoặc mở, ' {' và dấu đóng, ' }'.
Các khối đôi khi có thể được lồng vào nhau, vì vậy các dấu ngoặc nhọn mở và đóng phải khớp với nhau. Các khối như vậy được gọi một cách tự nhiên là các khối khai báo và các khai báo bên trong chúng được phân tách bằng dấu chấm phẩy ' ;'. Một khối khai báo có thể trống, có chứa khai báo null. Khoảng trắng xung quanh khai báo được bỏ qua.
Tuyên bố cuối cùng của một khối không cần phải được kết thúc bằng dấu chấm phẩy, mặc dù nó thường được coi là phong cách tốt để làm điều đó vì nó tránh quên thêm nó khi mở rộng khối bằng một tuyên bố khác. Khai báo khối CSS. Bộ quy tắc CSS: Nếu các biểu định kiểu chỉ có thể áp dụng một khai báo cho từng thành phần của trang Web, thì chúng sẽ khá vô dụng. Mục tiêu thực sự là áp dụng các khai báo khác nhau cho các phần khác nhau của tài liệu.
CSS cho phép điều này bằng cách liên kết các điều kiện với các khối khai báo. Mỗi khối khai báo (hợp lệ) được đặt trước một hoặc nhiều bộ chọn được phân tách bằng dấu phẩy , là các điều kiện chọn một số thành phần của trang. Một nhóm bộ chọn và một khối khai báo có liên quan cùng nhau được gọi là một bộ quy tắc hoặc thường là một quy tắc. Bộ quy tắc CSS.
NHD: Bùi Văn Chuyên 6 SVTH: Trương Minh Hiệp Đồ án tốt nghiệp Chương 2. Khái Niệm Javascript chính là một ngôn ngữ lập trình web rất phổ biến ngày nay. Javascript được tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên sống động hơn. Chúng cũng đóng vai trò tương tự như một phần của website, cho phép Client- side Script từ người dùng tương tự máy chủ (Nodejs) để tạo ra những website động.
Công dụng của Javascript Bên cạnh việc tìm hiểu javascript là ngôn ngữ gì thì chúng được sử dụng để làm gì cũng rất quan trọng. Việc nắm bắt được mục đích của ngôn ngữ đặc biệt này sẽ giúp bạn dễ dàng sử dụng chúng hơn trong công việc. Cụ thể như sau: Thay đổi nội dung HTML: Một trong số nhiều phương thức HTML JavaScript chính là getElementById (). Chúng được sử dụng để tìm một phần tử của HTML với id =”demo” và dùng để thay đổi nội dung của phần từ (Internal HTML) sang thành “Hello JavaScript” Thay đổi giá trị thuộc tính HTML: Tổng quan về javascript còn có thể sử dụng để thay đổi các giá trị của thuộc tính.
Ví dụ: thay đổi thuộc tính src (source) của tag<img>. 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.fontSize = ’35px; Ẩn các phần tử HTML: Một hoạt động tiếp theo là Javascript có thể ẩn được các phần tử HTML. Chúng có thể được thực hiện thông qua hoạt động thay đổi kiểu hiển thị các phần tử HTML. Hiển thị các phần tử HTML: Một điểm đặc biệt là JavaScript có thể hiển thị được các yếu tố HTML ẩn.
Đồng thời, cũng có thể thực hiện được thông qua cách thay đổi kiểu hiển thị phần tử. Cách Viết Javascript Tất cả những đoạn mã JS đều sẽ được đặt ở trong cặp thẻ đóng và mở <script></script>. Một ví dụ cụ thể dễ hiểu như sau: <script language=”javascript”> alert(“Hello World!”); </script> Trong JS, chúng ta có 3 cách để đặt thẻ Script phổ biến như: Internal: Viết ở trong file HTML hiện tại; External: Viết ra một file JS khác và tiếp tục import vào; Inline: Viết trực tiếp ở trong các thẻ HTML; Có 3 cách đặt thẻ script thường được sử dụng như dưới đây: Với Internal, thông thường thẻ Script sẽ được đặt ở trong thẻ <head>, tuy nhiên bạn cũng có thể đặt ở bất kỳ chỗ nào. Yêu cầu duy nhất là phải có chứa đầy đủ mở và đóng thẻ <script></script>.
Bằng cách này, bạn có thể đặt phần head ở trong file HTML hiện có của mình. Đối với External, bạn sẽ viết được các đoạn mã Javascript ra trong một file mới.