CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Khái Niệm Fontend Phần front-end của một trang web là phần tương tác với người dùng. Tất cả mọi thứ bạn nhìn thấy khi điều hướng trên Internet, từ các font chữ, màu sắc cho tới các menu xổ xuống và các thanh trượt, là một sự kết hợp của HTML, CSS, và JavaScript được điều khiển bởi trình duyệt máy tính của bạn.2 Khái Niệm Backend Phần back end của một trang web bao gồm một máy chủ, một ứng dụng, và một cơ sở dữ liệu. Một lập trình viên back-end xây dựng và duy trì công nghệ mà sức mạnh của những thành phần đó, cho phép phần giao diện người dùng của trang web có thể tồn tại được.3 HTML HTML là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web. Cùng với CSS và JavaScript, HTML là một trong những ngôn ngữ quan trọng trong lĩnh vực thiết kế website.1 CSS CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language.
Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như là HTML. Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web. Nó phân biệt cách hiển thị của trang web với nội dung chính của trang bằng cách điều khiển bố cục, màu sắc, và font chữ. Ngoài ra nó còn tên gọi SASS bản chất cũng giống nhau 1.2 SCSS SCSS sử dụng cú pháp giống với Ruby (vì đơn giản nó được thiết kế bởi các lập trình viên Ruby).
Có phần mở rộng là .scss , SCSS ra đời sau SASS và có cú pháp viết tương tự như cách viết CSS. Cú pháp này được tạo ra nhằm thu hẹp khoảng cách giữa SASS và CSS bằng cách mang lại một thứ gì đó thân thiện với CSS. Ta phân biệt nó trong hình dưới đây SVTH: Trần Hữu Thắng - Lớp 18CNTT3 13 Bên trái SCSS , Bên phải CSS 1.1 Khái Niệm Bootstrap là một front-end framework miễn phí giúp quá trình phát triển web được nhanh và dễ dàng hơn. Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS như typography, forms, buttons, tables, navigation, modals, image carousels… cũng như các plugin JavaScript tùy chọn.
Bootstrap cũng cung cấp cho bạn khả năng tạo ra các responsive designs một cách dễ dàng.2 Vì sao nên sử dụng - Dễ sử dụng: Bất kỳ ai có kiến thức cơ bản về HTML và CSS đều có thể bắt đầu sử dụng Bootstrap. - Các tính năng đáp ứng (Responsive features): responsive CSS của Bootstrap điều chỉnh cho điện thoại, máy tính bảng và máy tính để bàn. - Cách tiếp cận Mobile-first: Trong Bootstrap 3, mobile-first styles là một phần của core framework. - Khả năng tương thích trình duyệt: Bootstrap tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera).3 Cài đặt Có 2 cách để có thể sử dụng Bootstrap trên web của bạn.
Download Bootstrap packet từ getbootstrap. Thêm Bootstrap từ CDN SVTH: Trần Hữu Thắng - Lớp 18CNTT3 14 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.1/css/bootstrap- theme.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.1Khái niệm Javascript JavaScript là một ngôn ngữ lập trình của HTML và 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 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 1.1 DOM là gì ? DOM là viết tắt của chữ Document Object Model, dịch tạm ra là mô hình các đối tượng trong tài liệu HTML.
mỗi thẻ HTML sẽ có những thuộc tính (Properties) và có phân cấp cha - con với các thẻ HTML khác. Sự phân cấp và các thuộc tính của thẻ HTML này ta gọi là selector và trong DOM sẽ có nhiệm vụ xử lý các vấn đề như đổi thuộc tính của thẻ, đổi cấu trúc HTML của thẻ, .2 Các loại DOM trong JS - DOM document: có nhiệm vụ lưu trữ toàn bộ các thành phần trong tài liệu của website - DOM element: có nhiệm vụ truy xuất tới thẻ HTML nào đó thông qua các thuộc tính như tên class, id, name của thẻ HTML SVTH: Trần Hữu Thắng - Lớp 18CNTT3 15 - DOM HTML: có nhiệm vụ thay đổi giá trị nội dung và giá trị thuộc tính của các thẻ HTML - DOM CSS: có nhiệm vụ thay đổi các định dạng CSS của thẻ HTML - DOM Event: có nhiệm vụ gán các sự kiện như onclick(), onload() vào các thẻ HTML - DOM Listener: có nhiệm vụ lắng nghe các sự kiện tác động lên thẻ HTML đó - DOM Navigation dùng để quản lý, thao tác với các thẻ HTML, thể hiện mối quan hệ cha - con của các thẻ HTML - DOM Node, Nodelist: có nhiệm vụ thao tác với HTML thông qua đối tượng (Object) 1.3 Các Kiểu dữ liệu trong JS Trong JS có 6 kiểu dữ liệu cơ bản: - Number - Boolean - String - Null - Undefined - Object 1.4 Biến và khai báo biến 1.1 Khái niệm về biến Giống như nhiều ngôn ngữ lập trình khác, JavaScript có các biến. Các biến có thể được coi là các thùng chứa có tên. Bạn có thể đặt dữ liệu vào các vùng chứa này và sau đó tham khảo dữ liệu chỉ bằng cách đặt tên vùng chứa.2 Khai Báo biến Để khai báo một biến ta sử dụng từ khóa const, let, var.
const được sử dụng để khai báo 1 hằng số, và giá trị của nó không thay đổi trong suốt chương trình. let khai báo biến chỉ có thể truy cập được trong block bao quanh nó được xác định bằng cặp {}. var khai báo biến có thể truy cập ở phạm vi hàm số hoặc bên ngoài hàm số, toàn cục. Giống như ngôn ngữ khác, cách đặt tên biến của JS cũng phải tuân theo 1 số quy tắc sau : SVTH: Trần Hữu Thắng - Lớp 18CNTT3 16 - Tên biến phải là các chữ không dấu viết hoa hoặc viết thường, các chữ số từ 0-9 và dấu gạch dưới () và kí hiệu $.
- Tên biến bắt đầu phải là chữ hoặc dấu gạch dưới (_), nếu bắt đầu bằng số là sai. - Không thể sử dụng các từ dành riêng (như từ khóa JavaScript) làm tên. - Các tên có phân biệt chữ hoa chữ thường Ví dụ khai báo biến đúng var person; var _person; var __person; var __person1; 1.5 Function Function JavaScript (hàm số) là một thành phần không thể thiếu trong cấu trúc chương trình. Function giúp cho chương trình trở nên rõ ràng, dễ hiểu bằng cách gộp những đoạn code lặp lại thành một hàm số.
Nhờ vậy mà việc bảo trì phần mềm cũng dễ dàng hơn 1.6 Các Framework JS - React : React được xem là framework đứng đầu trong thế giới JavaScript. Framework này dùng cách tiếp cận phản ứng và cũng đưa ra nhiều ý tưởng riêng cho việc phát triển web front-end. Muốn sử dụng React, bạn phải học cách dùng một loạt các công cụ bổ sung để có thể linh hoạt tối đa trong phát triển web front-end. Danh sách chưa đầy đủ các thư viện mà bạn có thể dùng với React, gồm: Redux, MobX, Fluxy, Fluxible, hay RefluxJS.
Ngoài ra, React cũng có thể được dùng với jQuery AJAX, fetch API, Superagent, và Axios. - Vue Gọi tắt là Vue (phát âm là /vjuː/, giống như view trong tiếng Anh), Vue.js là một framework linh động (nguyên bản tiếng Anh: progressive – tiệm tiến) dùng để xây dựng giao diện người dùng (user interfaces). - Angular hay AngularJS là một web framework JavaScript được phát triển và tài trợ bởi Google và cộng đồng để giải quyết các vấn đề gặp phải trong việc phát triển ứng dụng đơn trang. Ngoài ra, AngularJs còn có các thành phần bổ sung cho Cordova, framework sử thường dùng để viết các ứng dụng di động.
SVTH: Trần Hữu Thắng - Lớp 18CNTT3 17 1.1 Khái niệm về Framework Framework chính là một thư viện với các tài nguyên có sẵn cho từng lĩnh vực để lập trình viên sử dụng thay vì phải tự thiết kế. Có Framework, lập trình viên chỉ tìm hiểu và khai thác những tài nguyên đó, gắn kết chúng lại với nhau và hoàn chỉnh sản phẩm của mình. Đối với lập trình viên trong mỗi một lĩnh vực, họ cần phải xây dựng các lớp chương trình để xây dựng nên những phần mềm, ứng dụng thành phẩm.2 Laravel Là gì ? Laravel là một PHP framework, có mã nguồn mở và miễn phí, được xây dựng nhằm hỗ trợ phát triển các phần mềm, ứng dụng, theo kiến trúc MVC.3 Ưu điểm và nhược điểm của Laravel 1.1 Ưu điểm -Sử dụng các tính năng mới nhất của PHP Sử dụng Laravel 5 giúp các lập trình viên tiếp cận những tính năng mới nhất mà PHP cung cấp, nhất là đối với Namespaces, Interfaces, Overloading, Anonymous functions và Shorter array syntax. -Nguồn tài nguyên vô cùng lớn và sẵn có Nguồn tài nguyên của Laravel rất thân thiện với các lập trình viên với đa dạng tài liệu khác nhau để tham khảo.
Các phiên bản được phát hành đều có nguồn tài liệu phù hợp với ứng dụng của mình. -Tích hợp với dịch vụ mail Lavarel là framework được trang bị API sạch trên thư viện SwiftMailer, do đó, bạn có thể gửi thư qua các dịch vụ dựa trên nền tảng đám mây hoặc local.2 Nhược điểm So với các PHP framework khác, Laravel bộc lộ khá ít nhược điểm. Vấn đề lớn nhất có thể kể đến của framework này là thiếu sự liên kết giữa các phiên bản, nếu cố cập nhật code, có thể khiến cho ứng dụng bị gián đoạn hoặc phá vỡ. Bên cạnh đó, Lavarel cũng quá nặng cho ứng dụng di động, khiến việc tải trang trở nên chậm chạp.4 Cài đặt Bạn mở Terminal (CMD hoặc Git Bash), gõ dòng lệnh sau: “composer global require “laravel/installer””.
SVTH: Trần Hữu Thắng - Lớp 18CNTT3 18 Đối với Windows, đường dẫn là “%appdata%Composervendorbin”. Đối với macOS và Linux, đường dẫn là “~/.composer/vendor/bin”. Sau khi cài đặt xong, bạn di chuyển vào thư mục htdocs của XAMPP. Sau đó mở cửa sổ lệnh (đối với windows thì nhấp Shift + chuột phải và chọn Command Window Here hoặc Git Bash Here) và gõ: “laravel new blog”.
Trong đó blog chính là tên thư mục laravel project của bạn. Vậy là chúng ta đã cài đặt xong Laravel Cài đặt theo composer Di chuyển thẳng vào thư mục htdocs của XAMPP,, tại đây mở cửa sổ lệnh và gõ “composer create-project –prefer-dist laravel/laravel blog” Trong đó blog chính là tên thư mục laravel project của bạn.5 Mô hình MVC MVC (Model-View-Controller) là mẫu kiến trúc phần mềm trên máy tính nhằm mục đích tạo lập giao diện cho người dùng. Theo đó, hệ thống MVC được chia thành ba phần có khả năng tương tác với nhau và tách biệt các nguyên tắc nghiệp vụ với giao diện người dùng.