CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. Ngôn ngữ thiết kế website HTML: HTML(Hypertext Markup Language – Ngôn ngữ đánh dấu siêu văn bản) là một sự định dạng để hiển thị một trang Web. Các trang Web thực ra không có gì khác ngoài văn bản cùng với các tag HTML được sắp xếp đúng cách hoặc các đoạn mã để trình duyệt Web biết cách thông dịch và hiển thị chúng lên màn hình. Hiện nay, phiên bản mới HTML5 có một số tính năng ưu việt hơn so với phiên bản cũ: Định nghĩa nhiều ảnh cho thiết kế responsive: Với HTML 5 có thể dùng thẻ <picture> cùng với thuộc tính srcset để tạo nên ảnh responsive.
Thẻ <picture> đại diện cho một khung ảnh, cho phép nhà phát triển khai báo nguồn ảnh khác nhau để thích ứng với kích thước khung hình, mật độ điểm ảnh màn hình, loại màn hình. trong thiết kế responsive. Hiển thị hoặc ẩn thông tin thêm: Với thẻ <details> và <summary> có thể thêm thông tin cho một đoạn nội dung, các thông tin thêm mặc định không hiển thị. Trong code, phải đặt thẻ <summary> trong thẻ <details>, trong thẻ <summary> có thể đặt thông tin thêm muốn ẩn.
Thêm chức năng cho menu ngữ cảnh: Với thẻ <menuitem> và <type=”context”>, có thể thêm chức năng tùy chỉnh vào menu ngữ cảnh của trình duyệt. Cần gán thẻ <menuitem> là thành phần của thẻ <menu>. Thẻ <menuitem> có 3 loại thuộc tính khác nhau là “checkbox”, “command”, “radio”. Nó có khả năng thêm nhiều hơn một menu.
-1- Lồng ghép header và footer: HTML 5 cho phép lồng ghép header và footer trong nội dung của một section. Tính năng này có thể hữu ích nếu chúng ta muốn thêm sectioning element, chẳng hạn như <article>. Sử dụng mật mã nonce cho style và script: Với HTML 5 có thể thêm mã cho style và script, có thể sử dụng thuộc tính nonce cùng với thẻ <script> và thẻ <style>. Mã nonce sẽ khởi tạo những con số ngẫu nhiên và duy nhất, có thể phục hồi sau mỗi lần request page, mã nonce có thể sử dụng trong bảo mật website.
CSS: CSS – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML. CSS là viết tắt của Cascading Style Sheets. CSS được hiểu một cách đơn giản đó là cách mà chúng ra thêm các kiểu hiển thị (font chữ, kích thước, màu sắc,…) cho một tài liệu Web. CSS có tác dụng chính là: Hạn chế tối thiểu việc làm rối HTML của trang Web bằng các thẻ quy định kiểu dáng(chữ đậm, in nghiêng,.), giúp mã nguồn của trang Web trở nên gọn gàng hơn.
Tách biệt nội dung trang Web và định dạng hiển thị, dễ dàng cho việc thay đổi. Tạo ra các kiểu dáng áp dụng được cho nhiều trang Web, tránh lặp lại việc định dạng cho các trang Web giống nhau. Ngôn ngữ lập trình Javascript: Javascript là một ngôn ngữ lập trình của HTML và ứng dụng Web. Nó được sử dụng phổ biến nhất, như một phần của các trang web.
Chúng cho phép -2- client-server script tương tác với người sử dụng và tạo các trang web động. Nó là một ngôn ngữ chương trình thông dịch với các khả năng hướng đối tượng. Một số ưu điểm của JavaScript: Tiêt kiệm băng thông máy chủ: Javascript sử dụng trong thiết kế website có thể giúp tiết kiệm băng thông máy máy chủ vô cùng tốt bởi chúng được chạy trực tiếp trên máy của người dùng. Gia tăng hiệu suất, kéo dài tuổi thọ máy chủ và tiết kiệm diện tích băng thông.
Linh hoạt vận hành, tương thích tốt: Để thực thi, trình duyệt web chỉ cần tải file JavaScript về máy chủ từ một tên miền riêng biệt hoặc nhúng thẳng vào file HTML và chạy mà không cần tải thêm. Javascript có thể chạy được trên hầu hết các trình duyệt phổ biến hiện nay. Hầu hết các trình duyệt web đều có tích hợp sẵn trình thông dịch ngôn ngữ JavaScript, đảm bảo người dùng có thể sử dụng ngay mà không mất công tải về trình duyệt, giảm tỷ lệ thực thi các chức năng của JavaScript. Dễ dàng xử lý vấn đề: Với lợi thế có nhiều trình duyệt hỗ trợ nên việc kiểm tra và xử lý vấn đề dễ dàng hơn.
Đa số các trình duyệt web hiện nay đều có cài sẵn các công cụ xử lý lỗi Javascript trong bảng điều khiển trình duyệt. Javascript sở hữu cấu trúc dễ đọc với các nguyên tắc rõ ràng nên việc xác định và gỡ lỗi trở nên đơn giản hơn. Nâng cao trải nghiệm người dùng: Website sử dụng ngôn ngữ lập trình giúp thu hút người dùng bởi những tính năng ưu việt, hình ảnh sinh động hấp dẫn, chức năng lướt và tương tác nhanh nhạy. Nhờ những tính năng đó, người dùng cảm thấy thoải mái, thích thú và tin dùng trang web hơn.
PHP: -3- PHP là ngôn ngữ script được tạo cho các giao tiếp phía server. Do đó, nó có thể xử lý các giao tiếp phiá server như thu thập dữ liệu, biểu mẫu, quản lý file trên server, sửa đổi cơ sở dữ liệu và nhiều hơn. Ngôn ngữ này ban đầu được tạo ra bởi Lerdorf để theo dõi khách truy cập vào trang chủ cá nhân của anh. Khi trở nên phổ biến, Lerdorf phát hành nó thành dự án nguồn mở.
Quyết định này khuyến khích các nhà phát triển sử dụng, sửa chữa và cải thiện, biến nó thành ngôn ngữ script sử dụng ngày nay. Dù PHP được coi là ngôn ngữ script vì mục đích chung, nhưng nó được sử dụng rộng rãi nhất để phát triển web. Khả năng nhúng vào file HTML là một trong những tính năng nổi bật của nó. Nếu không muốn người khác xem mã nguồn, có thể ẩn bằng ngôn ngữ script này.
Đơn giản, chỉ cần viết code vào file PHP và nhúng vào HTML thì mọi người sẽ không biết được nội dung gốc. Hệ quản trị cơ sở dữ liệu: Cơ sở dữ liệu (Database) là một tập hợp các dữ liệu có tổ chức, thường được lưu trữ và truy cập điện tử từ hệ thống máy tính. Khi cơ sở dữ liệu phức tạp hơn, chúng thường được phát triển bằng cách sử dụng các kỹ thuật thiết kế và mô hình hóa chính thức. Hệ quản trị cơ sở dữ liệu (Database Management System) là một phần mềm để lưu trữ và truy xuất dữ liệu của người dùng trong khi xem xét các biện pháp bảo mật thích hợp.
Nó bao gồm một nhóm các chương trình thao tác cơ sở dữ liệu. Hệ quản trị cơ sở dữ liệu chấp nhận yêu cầu dữ liệu từ một ứng dụng và hướng dẫn hệ điều hành cung cấp dữ liệu cụ thể. Trong các hệ thống lớn, nó giúp người dùng và phần mềm bên thứ ba lưu trữ và truy xuất dữ liệu. MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (Relational Database Management System, viết tắt là RDBMS) hoạt động theo mô hình client-server.
MySQL là một trong số các phần mềm của RDBMS, nhưng -4- thường được cho là một vì độ quá phổ biến của nó. Các ứng dụng web lớn nhất như Facebook, Youtube, Google. đều dùng MySQL cho mục đích lưu trữ dữ liệu. Quy trình hoạt động khá đơn giản mỗi Client(máy khách) yêu cầu dữ liệu từ Server(máy chủ), từ Server sẽ phản hồi lại các dữ liệu đó.
Ví dụ khi người dùng truy cập vào một trang web nào đó các Request sẽ gửi tới Server, lúc này Server sẽ nhận được Request và bắt đầu gửi dữ liệu quay lại máy người dùng để hiển thị thông tin trang web đó lên. Mô hình hoạt động của MySQL Một số lý do chính khiến MySQL trở nên quan trọng: Linh hoạt và dễ dùng: Có thể sửa source code để đáp ứng nhu cầu sử dụng mà không phải thanh toán thêm chí phí nào, quá trình cài đặt cũng đơn giản. Hiệu năng cao: Bất kể lưu trữ dữ liệu lớn của các trang thương mại điện tử hoặc những hoạt động kinh doanh lớn liên quan đến công nghệ thông tin, MySQL cũng có thể đáp ứng. An toàn: An toàn dữ liệu luôn là vấn đề quan trọng nhất khi chọn phần mềm RDBMS.
Với hệ thống phân quyền truy cập và quản lý tài khoản, MySQL đặt tiêu chuẩn bảo mật rất cao. Công cụ - công nghệ sử dụng 1. Thư viện ReactJS -5- ReactJS là một opensource được phát triển bởi Facebook, vào năm 2013. Đây là một thư viện Javascript được dùng để xây dựng các tương tác với các thành phần website.
Một trong những điểm nổi bật của thư viện này là việc render dữ liệu không chỉ thực hiện phía Server, mà còn thực hiện được phía Client. ReactJS là một thư hiện Javascript chuyên giúp các nhà phát triển xây dựng giao diện người dùng hay UI. Trong lập tình ứng dụng front-end, lập trình viên thường phải làm việc chính trên 2 thành phần: UI và xử lý tương tác người dùng. UI là tập hợp những thành phần nhìn thấy được trên bất kỳ một ứng dụng nào, ví dụ thanh tìm kiếm, nút nhấn… Trước khi có ReactJS, lập trình viên thường gặp khó khăn rất nhiều khi sử dụng Javascript thuần và Jquery để xây dựng UI.
Để tăng tốc quá trình phát triển và giảm thiểu rủi ro xảy ra trong khi coding, React còn cung cấp khả năng Reusable Code(tái sử dụng code) bằng cách đưa ra 2 khái niệm quan trọng: JSX và Virtual DOM. JSX(nói ngắn gọn là Javascript extension) là một React extension giúp chúng ta dễ dàng thay đổi cây DOM bằng các HTML-style code đơn giản. Và ReactJS browser hỗ trợ toàn bộ những trình duyệt web hiện đại, có thể sử dụng JSX trên bất kỳ trình duyệt nào đang làm việc. JSX Code style Nếu không sử dụng ReactJS (và JSX), website sẽ sử dụng HTML để cập nhật lại cây DOM(quá trình thay đổi diễn ra tự nhiên trên trang mà người dùng không cần tải lại trang).
Cách này sẽ ổn với các trang web nhỏ, đơn giản, static, nhưng với các website lớn, đặc biệt thiên về xử lý tương tác, điều này sẽ làm ảnh hưởng performance website nghiêm trọng vì toàn bộ cây DOM phải reload lại mỗi lần người dùng nhấn tính năng yêu cầu tải lại trang. Tuy nhiên, nếu sử dụng JSX sẽ giúp cây DOM cập nhật cho chính DOM đó, ReactJS đã khởi tạo Virtual DOM(DOM ảo). Virtual DOM là bản copy của Real DOM(DOM thật) trên trang đó, và ReactJS sử dụng bản copy để tìm kiếm đúng phần mà DOM thật cần cập nhật khi bất kỳ sự kiện nào khiến thành phần trong nó thay đổi(như việc người dùng nhấn vào một nút). So sánh Virtual DOM và Real DOM 1.
TypeScript TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, có thể được coi là phiên bản nâng cao của JavaScript bởi việc bổ sung tùy chọn kiểu tĩnh và lớp hướng đối tượng mà JavaScript không có.