CHƯƠNG 1: TÌM HIỂU VỀ LẬP TRÌNH WEB TRÊN NỀN TẢNG C#/.NET CORE VÀ MONGODB 1.1 World Wide Web và HTML, CSS, JavaScript, Bootstrap 1.1 World Wide Web 1.1 Khái niệm World Wide Web (WWW) hay còn gọi là web là một dịch vụ phổ biến nhất hiện nay trên Internet, 85% các giao dịch trên Internet ước lượng thuộc về WWW. Ngày nay số website trên thế giới đã đạt tới con số khổng lồ. WWW cho phép truy xuất thông tin văn bản, hình ảnh, âm thanh, video trên toàn thế giới. Thông qua website, các quý công ty có thể giảm thiểu tối đa chi phí in ấn và phân phát tài liệu cho khách hàng ở nhiều nơi.2 Cách tạo trang web Có nhiều cách để tạo trang web, có thể tạo trang web trên bất kì chương trình xử lí văn bản nào: • Tạo web bằng cách viết mã nguồn bởi một trình soạn thảo văn bản như: Notepad, WordPad,.
là những chương trình soạn thảo văn bản có sẵn trong Window. • Thiết kế bằng cách dùng web Wizard và công cụ của Word 97, Word 2000. Thiết kế web bằng các phần mềm chuyên nghiệp: FrontPage, Dreamweaver, Nescape Editor,. Phần mềm chuyên nghiệp như DreamWeaver sẽ giúp thiết kế trang web dễ dàng hơn, nhanh chóng hơn.
Để xây dựng một ứng dụng web hoàn chỉnh và có tính thương mại, cần kết hợp cả Client Script (kịch bản trình khách) và Server Script (kịch bản trên trình chủ) với một loại cơ sở dữ liệu nào đó, chẳng hạn như: MS Access, SQL Server, MySQL, Oracle,. Khi muốn triển khai ứng dụng web trên mạng, ngoài các điều kiện về cấu hình phần cứng, cần có trình chủ web thường gọi là web Server.3 Trình duyệt web (web Client hay web Browser) Trình duyệt Web là công cụ truy xuất dữ liệu trên mạng, là phần mềm giao diện trực tiếp với người sử dụng. Nhiệm vụ của Web Browser là nhận các 15 Lê Quang Vũ – CT1802 yêu cầu của người dùng, gửi các yêu cầu đó qua mạng tới các Web Server và nhận các dữ liệu cần thiết từ Server để hiển thị lên màn hình. Để sử dụng dịch vụ WWW, Client cần có một chương trình duyệt Web, kết nối vào Internet thông qua một ISP.
Các trình duyệt thông dụng hiện nay là: Microsoft Internet Explorer, Google Chrome, Mozilla FireFox….4 Webserver Webserver là một máy tính được nối vào Internet và chạy các phần mềm được thiết kế. Webserver đóng vai trò một chương trình xử lí các nhiệm vụ xác định, như tìm trang thích hợp, xử lí tổ hợp dữ liệu, kiểm tra dữ liệu hợp lệ. Webserver cũng là nơi lưu trữ cơ sở dữ liệu, là phần mềm đảm nhiệm vai trò server cung cấp dịch vụ Web. • Webserver hỗ trợ các các công nghệ khác nhau: • IIS (Internet Information Service): Hỗ trợ ASP, mở rộng hỗ trợ PHP.
• Apache: Hỗ trợ PHP. • Tomcat: Hỗ trợ JSP (Java Servlet Page).5 Phân loại Web Web tĩnh: • Tài liệu được phân phát rất đơn giản từ hệ thống file của Server. • Định dạng các trang web tĩnh là các siêu liên kết, các trang định dạng Text, các hình ảnh đơn giản. • Ưu điểm: CSDL nhỏ nên việc phân phát dữ liệu có hiệu quả rõ ràng, Server có thể đáp ứng nhu cầu Client một cách nhanh chóng.
Ta nên sử dụng Web tĩnh khi không thay đổi thông tin trên đó. • Nhược điểm: Không đáp ứng được yêu cầu phức tạp của người sử dụng, không linh hoạt,. • Hoạt động của trang Web tĩnh được thể hiện như sau: Hình 1: Hoạt động của trang web 16 Lê Quang Vũ – CT1802 Website động: • Về cơ bản nội dung của trang Web động như một trang Web tĩnh, ngoài ra nó còn có thể thao tác với CSDL để đáp ứng nhu cầu phức tập của một trang Web. Sau khi nhận được yêu cầu từ Web Client, chẳng hạn như một truy vấn từ một CSDL đặt trên Server, ứng dụng Internet Server sẽ truy vấn CSDL này, tạo một trang HTML chứa kết quả truy vấn rồi gửi trả cho người dùng.1 Cấu trúc chung của một trang HTML <html> <head> <title>Tiêu đề của trang Web</title> </head> <body> <!-các thẻ html và nội dung sẽ hiển thị--> </body> </html> 1.2 Các thẻ HTML cơ bản - Thẻ <head>.
</head> tạo đầu mục trang. </title> tạo tiêu đề trang trên thanh tiêu đề, đây là thẻ bắt buộc. Thẻ title cho phép trình bày chuỗi trên thanh tựa đề của trang web mỗi khi trang Web đó được duyệt trên trình duyệt web. - Thẻ <body> </body> tất cả các thông tin khai báo trong thẻ <body> đều có thể xuất hiện trên trang web.
Những thông tin này có thể nhìn thấy trên trang web. </p> tạo một đoạn mới. </font> thay đổi phông chữ, kích cỡ và màu kí tự. </table> đây là thẻ định dạng bảng trên trang web.
Sau khi khai báo thẻ này, phải khai báo các thẻ hàng <tr> và thẻ cột <td> cùng với các thuộc tính của nó. - Thẻ <img /> cho phép chèn hình ảnh vào trang web. Thẻ này thuộc loại thẻ không có thẻ đóng. </a> là loại thẻ dùng để liên kết giữa các trang web hoặc liên kết đến địa chỉ Internet, Mail hay Intranet (URL) và địa chỉ trong tập tin trong mạng cục bộ (UNC).
17 Lê Quang Vũ – CT1802 - Thẻ <input /> cho phép người dùng nhập dữ liệu hay chỉ thị thực thi một hành động nào đó, thẻ Input bao gồm các loại thẻ như: text, password, submit, button, reset, checkbox, radio, hidden, image. < \textarea> cho phép người dùng nhập liệu với rất nhiều dòng. Với thẻ này không thể giới hạn chiều dài lớn nhất trên trang Web. - Thẻ <select> … </select> cho phép người dùng chọn phần tử trong tập phương thức đã được định nghĩa trước.
Nếu thẻ <select> cho phép người dùng chọn một phần tử trong danh sách phần tử thì thẻ <select> sẽ giống như combobox. Nếu thẻ <select> cho phép người dùng chọn nhiều phần tử cùng một lần trong danh sách phần tử, thẻ <select> đó là dạng listbox.</form> khi muốn submit dữ liệu người dùng nhập từ trang web phía Client lên phía Server, có hai cách để làm điều nàu ứng với hai phương thức POST và GET trong thẻ form. Trong một trang web có thể có nhiều thẻ <form> khác nhau, nhưng các thẻ <form này không được lồng nhau, mỗi thẻ form sẽ được khai báo hành động (action) chỉ đến một trang khác 1.1 CSS là gì? CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML). Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web.
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 style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc… CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web. 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 đó 1.2 Bố cục và cấu trúc một đoạn CSS Bố cục CSS thường chủ yếu dựa vào hình hộp và mỗi hộp đều chiếm những khoảng trống trên trang của bạn với các thuộc tính như: ● Padding: Gồm không gian xung quanh nội dung (ví dụ: xung quanh đoạn văn bản). ● Border: Là đường liền nằm ngay bên ngoài phần đệm.
● Margin: Là khoảng cách xung quanh bên ngoài của phần tử. 18 Lê Quang Vũ – CT1802 Một đoạn CSS bao gồm các phần như thế này: vùng chọn { thuộc tính : giá trị; thuộc tính: giá trị;} Nghĩa là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá trị sẽ nằm bên trong cặp dấu ngoặc nhọn {}. Mỗi thuộc tính sẽ luôn có một giá trị riêng, giá trị có thể là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS. Phần giá trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗi một dòng khai báo thuộc tính sẽ luôn có dấu chấm phẩy ở cuối.
Một vùng chọn có thể sử dụng không giới hạn thuộc tính. Định nghĩa của các phần này như sau: ● Bộ chọn (Selector): là mẫu để chọn phần tử HTML mà bạn muốn định nghĩa phong cách. Các selector được áp dụng cho các trường hợp sau: o Tất cả phần tử theo một dạng cụ thể nào đó, ví dụ phần tử tiêu đề h1. o Thuộc tính id và class của các phần tử.
o Các phần tử dựa vào mối liên quan với các phần tử khác trong cây phân cấp tài liệu. ● Khai báo (Declaration): Khối khai báo chứa một hoặc nhiều khai báo, phân tách với nhau bằng các dấu chấm phẩy. Mỗi khai báo gồm tên và giá trị đặc tính CSS, phân tách bằng dấu phẩy. Khai báo CSS luôn kết thúc bằng dấu chấm phẩy, khối khai báo nằm trong các dấu ngoặc móc.
Trong ví dụ dưới đây, các phần tử <p> sẽ được căn giữa, chữ màu đỏ. p{ color: red; text-align: center; } ● Thuộc tính (Properties): Những cách mà bạn có thể tạo kiểu cho một phần tử HTML. Chính vì vậy, với CSS thì bạn chỉ cần lựa chọn thuộc tính mà chính bạn muốn tác động nhất trong bộ quy tắc của mình. ● Giá trị thuộc tính: Ở bên phải của thuộc tính sau dấu hai chấm(:), chúng ta sẽ sở hữu giá trị thuộc tính mà việc lựa chọn trong số đó sẽ xuất hiện nhiều lần để có thể cho một thuộc tính cụ thể nào đó.
19 Lê Quang Vũ – CT1802 1.1 JavaScript là gì? JavaScript là ngôn ngữ lập trình cho phép triển khai những chức năng phức tạp trên website. Như hiển thị các cập nhật nội dung kịp thời, tương tác với bản đồ, hoạt cảnh 2D/3D.Những hoạt động này đều có sự tham gia của JS. Đây là mảnh ghép thứ 3 trong tiêu chuẩn công nghệ về website, hai trong số đó là HTML và CSS.1 JavaScript là có thể làm được gì? Bên trong ngôn ngữ JavaScript bao gồm một vài tính năng lập trình phổ biến cho phép bạn thực hiện một vài sau: ● Lưu trữ các giá trị (thông tin) trong các biến(variables).Như ở ví dụ bên trên, chúng tôi yêu cầu nhập một tên mới sau đó lưu trữ tên vừa nhập trong một biến gọi là name ● Thao tác trên đoạn văn bản (còn gọi là chuỗi - strings trong lập trình). Trong ví dụ trên, chúng tôi lấy chuỗi "Player 1:" và đưa nó vào biến name để tạo đoạn văn bản hoàn chỉnh là ''Player 1: Chris".