CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. Ngôn ngữ thiết kế web HTML và CSS: Định nghĩa HTML: HTML(Hypertext Markup Language) là mã được dùng để xây dựng nên cấu trúc và nội dung của trang web. Ví dụ, nội dung có thể được cấu thành bởi một loạt các đoạn văn, một danh sách liệt kê, hoặc sử dụng những hình ảnh và bảng biểu. Tính năng mới của HTML5: - Phần tử <small> dùng để chỉ hiển thị cỡ nhỏ, nó có thể được ký hiệu là trình bao bọc chính xác cho thông tin này.
- Việc sử dụng dấu ngoặc kép có thể phụ thuộc vào người dùng. - Cho phép người dùng chỉnh sửa bất kỳ văn bản nào có trong phần tử, bao gồm cả phần tử con của nó. - HTML5 loại bỏ hoàn toàn thuộc tính <type>. - Cung cấp các đầu vào email cho phép hướng dẫn trình duyệt chỉ cho phép các chuỗi xác nhận địa chỉ email.
- Dễ dàng tạo thanh trượt với phạm vi đầu vào. Định nghĩa CSS: CSS (viết tắt của Cascading Style Sheets) 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 được hiểu một 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. Lợi ích của CSS với một trang web HTML: Page 1 of 12 Hình 1.
Lợi ích của việc sử dụng CSS trong trang web HTML 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 và thư viện Jquery: Định nghĩa JavaScript: JavaScript là một ngôn ngữ lập trình của HTML và ứng dụng Web.
Nó là nhẹ và được sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúng cho phép Client-Side script tương tác với người sử dụng và tạo Page 2 of 12 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. Minh họa JavaScript kết hợp với HTML và CSS Ư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. Các dòng Script đều được thực thi trên trình duyệt 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 như Cốc Cốc, Chrome, Firefox, Safari. Page 3 of 12 Không những thế, 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. Điều này vô cùng tiện lợi cho người dùng khi không có mạng.
- Dễ dàng kiểm tra, 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ácnguyê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 nhiều. - 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 hay ho, 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. Giới thiệu Jquery: JQuery là một thư viện được xây dựng trên Javascript. Chúng được tạo ra với mục đích hỗ trợ các lập trình viên giải quyết các khó khăn khi sử dụng Javascript. JQuery được tích hợp từ nhiều module chuyên biệt, bao gồm cả module hiệu ứng, đến module truy cấp selector.
Tính năng ưu việt: - Xử lý thao tác DOM: Công cụ này sẽ lựa chọn DOM để duyệt, chỉnh sửa nội dung bằng cách dùng các Selected mã nguồn mở. - Hỗ trợ AJAX: Jquery đem lại khả năng tương tác tốt với máy chủ, cập nhật các nội dung một cách tự động cho các đoạn code viết bằng AJAX. - Hỗ trợ tạo hiệu ứng động: Jquery giúp tạo các hiệu ứng động trên webdsite một cách nhanh chóng và dễ dàng. Page 4 of 12 - Xử lý sự kiện: Công cụ hỗ trợ tương tác giữa website với người truy cập dựa trên nguyên lý xử lý sự kiện nhưng không gây ảnh hưởng đến các mã HTML.
- Tương thích hầu hết trình duyệt, các nền tảng hiện đại: Jquery tương thích với gần như tất cả các trình duyệt từ Chrome, Android, Firefox, IOS… 3. Framework Bootstrap: Khái niệm Bootstrap: Bootstrap là một framework thuộc dạng Open Source(mã nguồn mở) – cho phép thiết kế website reponsive nhanh chóng, chuyên nghiệp và dễ dàng. Bootstrap bao gồm các HTML templates, CSS templates và JavaScript tạo ra một số thứ cơ bản như form, button, table, sidebar, navigation, modals… Cấu trúc và chức năng: - Bootstrap cho phép tùy chỉnh framework trước khi tải về sử dụng ngay tại trang web của framework. - Tích hợp sẵn các stylesheets được định nghĩa thao cách cơ bản nhất chỉ cần tích hợp với code HTML của trang web hiện tại.
- Tích hợp sẵn Jquery và chỉ cần khai báo đúng cách thì sẽ đảm bảo xuất hiện các tính năng cần thiết trong quá trình lập trình web. - Bootstrap định nghĩa sẵn các glyphicons giúp giảm tối đa việc sử dụng hình ảnh làm icon và giúp tăng tốc độ tải trang web. - Được thiết kế theo dạng module, vì vậy nó hoàn toàn dễ dàng tích hợp với hầu hết các bộ mã nguồn mở như WordPress, Magento, NukeViet… Lý do nên sử dụng Bootstrap: Một số lý do nên sử dụng Bootstrap: - Tính năng responsive: Xây dựng sẵn responsive trên các thiết bị desktop, tablet, mobile. Page 5 of 12 - Dễ dàng sử dụng: Framework đơn giản vì được xây dựng trên ngôn ngữ HTML, CSS và JavaScript, có kiến thức cơ bản về 3 phần nêu trên là có thể dễ dàng sử dụng Bootstrap.
- Tương thích với trình duyệt: Tương thích với tất cả các trình duyệt như Chrome, Firefox, Safari, Internet Explore và Opera. Mô hình MVC: Định nghĩa MVC: Mô hình MVC(MVC Design Pattern) là viết tắt của Model – View – Controller, tương ứng với ba bộ phận tạo nên cấu trúc của ứng dụng: - Model: Là nơi chứa các nghiệp vụ tương tác hoặc hệ quản trị CSDL gồm một số các class/function xử lý nhiều nghiệp vụ như kết nối database, truy vấn dữ liệu,. và bao gồm các xử lý nghiệp vụ khác. - View: Là nơi chứa giao diện người dùng như nút nhấn, khung nhập, hình ảnh… Thực hiện việc hiển thị dữ liệu giúp người dùng tương tác với hệ thống.
- Controller: Là nơi tiếp nhận và xử lý yêu cầu được gửi tới từ các thao tác của người dùng; gồm những class/function xử lý nghiệp vụ logic, lấy các dữ liệu, thông tin cần thiết nhờ nghiệp vụ lớp Model cung cấp và hiển thị dữ liệu cho người dùng nhờ lớp View. Page 6 of 12 Hình 1. Mô hình MVC Ưu điểm của mô hình MVC: - Dễ dàng thao tác chỉnh sửa: Bộ phận Model hoạt động tách biệt với View đồng nghĩa với việc có thể đưa các thay đổi, chỉnh sửa hoặc cập nhật dễ dàng ở các bộ phận khác. - Hỗ trợ quá trình phát triển nhanh chóng: Với đặc điểm hoạt động độc lập của từng thành phần, các lập trình viên có thể làm việc đồng thời trên từng bộ phận khác nhau của mô hình, giúp tiết kiệm rất nhiều thời gian.
- Khả năng cung cấp đồng thời nhiều khung View: Với mô hình MVC, có thể tạo đồng thời nhiều khung View cho Model. - Hỗ trợ các kỹ thuật không đồng bộ: MVC có thể hoạt động trên nền tảng JavaScript. Điều này có nghĩa các ứng dụng MVC có thể hoạt động với các file PDF, các trình duyệt web cụ thể và các widget máy tính. - Hỗ trợ các nền tảng phát triển SEO: Có thể dễ dàng tạo các mã SEO URL để thu hút lượng truy cập với ứng dụng bất kỳ.
Ngôn ngữ lập trình PHP: Định nghĩa PHP: PHP(viết tắt là Hypertext Preprocessor) là một ngôn ngữ lập trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, dùng cho các mục đích tổng quát. Rất thích hợp với các web và có thể nhúng vào trang HTML. Ưu điểm của PHP: PHP không phải là ngôn ngữ script phía server duy nhất có sẵn. Tuy nhiên, nó lợi thế hơn các đối thủ cạnh tranh nếu chạy trang web WordPress.
WordPress được xây dựng dựa trên việc sử dụng PHP. Vì vậy, sử dụng ngôn ngữ này giúp cải thiện đáng kể số lượng tùy chỉnh trên trang web. Còn một số lý do khác khiến PHP là ngôn ngữ script tuyệt vời để sử dụng: - Dễ học: Có thể học dễ dàng vì nó có tài liệu tuyệt vời về các chức năng về ví dụ. - Được sử dụng rộng rãi, phổ biến: Nó được sử dụng để tạo ra các loại nền tảng như thương mại điện tử, blogs, phương tiện truyền thông xã.
- Chi phí thấp: Nó là nguồn mở để có thể sử dụng miễn phí. - Cộng đồng lớn: Nếu gặp phải những khó khăn nào đó, sẽ không phải là điều lo lắng vì có rất nhiều blog PHP trên Internet. - Tích hợp với cơ sở dữ liệu: Ví dụ như MySQL, Oracle. Hệ quản trị cơ sở dữ liệu MySQL: Định nghĩa 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. Page 8 of 12 Định nghĩa Hệ quản trị cơ sở dữ liệu: Hệ quản trị cơ sở dữ liệu (Database Management System) là hệ thống được thiết kế để quản lý một khối lượng dữ liệu nhất định một cách tự động và có trật tự.