From afa8556976ddcea2b1fd7763dca4a0561c57983f Mon Sep 17 00:00:00 2001 From: Siegel16 <32434236+Siegel16@users.noreply.github.com> Date: Mon, 30 Oct 2017 14:14:21 +0700 Subject: [PATCH 1/9] Fix heading --- Composer.md | 64 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 Composer.md diff --git a/Composer.md b/Composer.md new file mode 100644 index 0000000..b7c92c5 --- /dev/null +++ b/Composer.md @@ -0,0 +1,64 @@ +## 1. Composer là gì +[Composer](https://getcomposer.org/) là công cụ để quả lý package hay library PHP. +Composer sẽ cài đặt những libraries vào một thư mục nào đó nằm bên trong project bạn đang làm việc. +Về cơ cản, Composer sẽ không cài đặt global, chính vì thế nó còn được gọi là Dependency Manager. +(Những package được cài đặt được gọi là Dependency, còn Composer là công cụ quản lý các Dependency) +Composer tương tự bundler của Ruby hay npm của NodeJS +## 2. Cách cài đặt +Composer phiên bản hiện tại yêu cầu phiên bản PHP >= 5.3.2 +Thông tin chi tiết về hướng dẫn cài đặt Composer có thể xem ở [đây](https://getcomposer.org/download/) +## 3. Composer.json và composer.lock +`composer.json` : Là nơi ta khai báo những dependencies dùng trong project, những thông tin về tên, phiên bản, licenses, source … Nội dung được viết theo JSON format. +VD: + + { + "name": "wataridori/bphalcon", + "type": "project", + "description": "A small library which implement some features to phalcon", + "license": "GPL-3.0", + "authors": [ + { + "name": "Phan Minh Truong", + "email": "truongpm@haposoft.com" + } + ], + "require": { + "php": ">=5.4" + } + } + + `composer.lock` : Là nơi lưu trữ thông tin về dependencies đã được cài đặt. Ví dụ khi bạn dùng lệnh install để cài đặt lần đầu thì composer sẽ đọc thông tin về dependencies ở trong file composer.json, sau đó cài đặt và tạo ra file composer.lock để lưu thông tin cụ thể về những dependencies đó +## 4. Packagist + [Packagist]( https://packagist.org): Là repository chính để lưu những thông tin về composer package + Đây là nơi ta có tìm kiếm những library cần thiết và cài đặt chúng một cách nhanh chóng và dễ dàng thông qua composer +## 5. Các câu lệnh của Composer + +### a. Các Global Option +`verbose (-v)` : Hiện message dài +`help (-h)` : Hiện thông tin help +`quiet (-q)` : Không xuất ra message gì trong khi chạy câu lệnh +`no-interaction (-n)` : Không hỏi gì trong khi chạy câu lệnh +`working-dir (-d)` : Thiết lập working dir chỉ định +`profile` : Hiển thị thời gian và memory được sử dụng +`ansi` : Xuất kết quả với encoding là ANSI +`no-ansi` : Dừng việc xuất kết quả với encoding là ANSI +`version (-V)` : Hiển thị version hiện tại của Composer + +### b. Các local Option +`init` : Tạo ra file composer.json nhằm khai báo các thông tin cho package +`install` : Đọc thông tin từ file composer.json tại thư mục đang đứng, tổng hợp các package cần cài đặt, và cài đặt chúng vào một thư mục nào đó bên trong project. +`update` : Update những dependencies đã được cài đặt lên version mới nhất, đồng thời update nội dung vào file composer.lock +`require` : Add hoặc thay đổi nội dung một requirement vào file composer.json. Sau đó package được add vào hoặc thay đổi sẽ được cài đặt hoặc update. +`global` : Là command cho phép ta thực hiện các command khác như install, update một cách global. Tuy nhiên câu lệnh global yêu cầu ta phải chạy từ thư mục COMPOSER_HOME +`search` : Cho phép bạn tìm kiếm một package từ trong project của mình, hoặc từ packagist.org +`show` : Hiện ra những package khả dụng. Ngoài ra nếu đưa thêm tham số là tên package ở cuối thì sẽ hiện ra thông tin về package đó. +`depends` : Thông tin về những package nào phụ thuộc vào package nào +`validate` : Kiểm tra xem nội dung file composer.json có hợp hệ hay không +`status` : Check xem có gì được thay đổi ở bên trong dependencies (do mình thực hiện) hay không. +`self-update` : Update bản thân composer +`config` : Chỉnh sửa các setting cơ bản +`create-project`: Tạo ra một project từ package đã có sẵn. (chẳng hạn như bạn muốn deploy một package là một application, hay muốn develop tiếp từ một package đã có) +`dump-autoload` : Update autoloader khi có khi có class mới tong classmap package. +`run-script` : Dùng để chạy script một cách thủ công +`diagnose`: Check xem có vấn đề gì với composer hay không +`archive` : Tạo ra một file nén (zip hoặc tar) cho một package ở một version chỉ định \ No newline at end of file From 6a1f18421a526e2516ff42c002602239c1b7a76f Mon Sep 17 00:00:00 2001 From: Siegel16 <32434236+Siegel16@users.noreply.github.com> Date: Mon, 30 Oct 2017 14:26:13 +0700 Subject: [PATCH 2/9] Fix typo --- Composer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer.md b/Composer.md index b7c92c5..03b1424 100644 --- a/Composer.md +++ b/Composer.md @@ -1,5 +1,5 @@ ## 1. Composer là gì -[Composer](https://getcomposer.org/) là công cụ để quả lý package hay library PHP. +[Composer](https://getcomposer.org/) là công cụ để quản lý package hay library PHP. Composer sẽ cài đặt những libraries vào một thư mục nào đó nằm bên trong project bạn đang làm việc. Về cơ cản, Composer sẽ không cài đặt global, chính vì thế nó còn được gọi là Dependency Manager. (Những package được cài đặt được gọi là Dependency, còn Composer là công cụ quản lý các Dependency) From 6d527b51e45dd8058233367cbfbe885cf03513c4 Mon Sep 17 00:00:00 2001 From: Siegel16 <32434236+Siegel16@users.noreply.github.com> Date: Mon, 6 Nov 2017 10:29:27 +0700 Subject: [PATCH 3/9] Basic blade template of Laravel --- blade-template.md | 63 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 blade-template.md diff --git a/blade-template.md b/blade-template.md new file mode 100644 index 0000000..015f58f --- /dev/null +++ b/blade-template.md @@ -0,0 +1,63 @@ +###1.Tổng quan +* [Blade](https://laravel.com/docs/master/blade) là một khuôn mẫu (template) đơn giản, mạnh mẽ được cung cấp bởi Laravel +* Không giống như những template PHP khác, blade không giới hạn việc sử dụng code PHP trong views +* Các file Blade sử dụng phần mở rộng là `blade.php` và được đặt ở trong thư mục `resources/views +### 2.Thừa kế views +* Đây là một ưu điểm lớn trong việc sử dụng Blade template +* Khi sử dụng một template engine thì việc tái sử dụng lại layout là vô cùng quan trọng, điều này khiến chúng ta tránh được việc lặp code và có thể dễ dàng nâng cấp hoặc bảo trì +#### a. Khởi tạo layout +* Đầu tiên tạo file `layouts.blade.php`: +``` + + + + App Name - @yield('title') + + @section('sidebar') + This is the master sidebar. + @show +
+ @yield('content') +
+ + +``` + +* `@yield` sẽ khai báo nơi để hiển thị dữ liệu +* `@section` là khu vực để hiển thị dữ liệu (tức là nội dung trong `@yield`), mỗi section được bắt đầu bởi `@section('ten-section')` và kết thúc bởi `@endsection` +#### b. Thừa kế layout +* Để một view kế thừa một view khác, chúng ta sử dụng `@extends('ten-view')` +* Để sử dụng một view, ta dùng `@include('ten-view')` +VD: File `child.blade.php` sẽ kế thừa `layouts.blade.php` +``` +@extends('layouts') +@section('sidebar') + @parent + +

This is appended to the master sidebar.

+@endsection +@section('content') +

This is my body content.

+@endsection +``` +* Ở đây `@parent` nhằm viết tiếp section `sidebar` chứ không ghi đè nó +* `@endsection` sẽ chỉ định nghĩa section còn `@show` sẽ lập tức yield section đó +### 3.Hiển thị dữ liệu +* Để hiển thị dữ liệu ra view, chúng ta sử dụng cặp ngoặc nhọn `{{}}` +VD: Ta có route như sau +``` +// Biến name sẽ được gửi sang welcome +Route::get('greeting', function () { + return view('welcome', ['name' => 'Samantha']); +}); +``` +Để hiển thị biến name : `Hello, {{ $name }}` +* Về cơ bản `{{}}` tương đương với hàm `htmlspecialchars` của PHP, để hiển thị unescaped data ta sử dụng +`{!! $name !!}` +* Ngoài ra ta còn có thể in ra kết quả của các hàm trong PHP +* Hiển thị dữ liệu dạng JSON: +``` + +``` \ No newline at end of file From 5d9b8b9ac988ee681db829064e1ac1d5daf46a9e Mon Sep 17 00:00:00 2001 From: Siegel16 <32434236+Siegel16@users.noreply.github.com> Date: Mon, 6 Nov 2017 10:31:42 +0700 Subject: [PATCH 4/9] Basic blade template of Laravel --- blade-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blade-template.md b/blade-template.md index 015f58f..3dce8e1 100644 --- a/blade-template.md +++ b/blade-template.md @@ -1,4 +1,4 @@ -###1.Tổng quan +### 1.Tổng quan * [Blade](https://laravel.com/docs/master/blade) là một khuôn mẫu (template) đơn giản, mạnh mẽ được cung cấp bởi Laravel * Không giống như những template PHP khác, blade không giới hạn việc sử dụng code PHP trong views * Các file Blade sử dụng phần mở rộng là `blade.php` và được đặt ở trong thư mục `resources/views From 3243f79b091b680cf4006b53a9aed401ae6b713c Mon Sep 17 00:00:00 2001 From: Siegel16 <32434236+Siegel16@users.noreply.github.com> Date: Mon, 6 Nov 2017 10:45:34 +0700 Subject: [PATCH 5/9] Fix typo for blade-template.md --- blade-template.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blade-template.md b/blade-template.md index 3dce8e1..463853a 100644 --- a/blade-template.md +++ b/blade-template.md @@ -1,7 +1,7 @@ ### 1.Tổng quan * [Blade](https://laravel.com/docs/master/blade) là một khuôn mẫu (template) đơn giản, mạnh mẽ được cung cấp bởi Laravel -* Không giống như những template PHP khác, blade không giới hạn việc sử dụng code PHP trong views -* Các file Blade sử dụng phần mở rộng là `blade.php` và được đặt ở trong thư mục `resources/views +* Không giống như những template PHP khác (Twig, etc..), blade không giới hạn việc sử dụng code PHP trong views +* Các file Blade sử dụng phần mở rộng là `blade.php` và được đặt ở trong thư mục `resources/views` ### 2.Thừa kế views * Đây là một ưu điểm lớn trong việc sử dụng Blade template * Khi sử dụng một template engine thì việc tái sử dụng lại layout là vô cùng quan trọng, điều này khiến chúng ta tránh được việc lặp code và có thể dễ dàng nâng cấp hoặc bảo trì From a7033ffd4d0e85c0a20ffdfe85e15f6edf493b47 Mon Sep 17 00:00:00 2001 From: Siegel16 <32434236+Siegel16@users.noreply.github.com> Date: Mon, 6 Nov 2017 14:19:36 +0700 Subject: [PATCH 6/9] Fix typo --- blade-template.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/blade-template.md b/blade-template.md index 463853a..c82cde2 100644 --- a/blade-template.md +++ b/blade-template.md @@ -1,8 +1,8 @@ -### 1.Tổng quan +### 1. Tổng quan * [Blade](https://laravel.com/docs/master/blade) là một khuôn mẫu (template) đơn giản, mạnh mẽ được cung cấp bởi Laravel * Không giống như những template PHP khác (Twig, etc..), blade không giới hạn việc sử dụng code PHP trong views * Các file Blade sử dụng phần mở rộng là `blade.php` và được đặt ở trong thư mục `resources/views` -### 2.Thừa kế views +### 2. Thừa kế views * Đây là một ưu điểm lớn trong việc sử dụng Blade template * Khi sử dụng một template engine thì việc tái sử dụng lại layout là vô cùng quan trọng, điều này khiến chúng ta tránh được việc lặp code và có thể dễ dàng nâng cấp hoặc bảo trì #### a. Khởi tạo layout @@ -25,7 +25,7 @@ * `@yield` sẽ khai báo nơi để hiển thị dữ liệu * `@section` là khu vực để hiển thị dữ liệu (tức là nội dung trong `@yield`), mỗi section được bắt đầu bởi `@section('ten-section')` và kết thúc bởi `@endsection` -#### b. Thừa kế layout +#### b. Kế thừa layout * Để một view kế thừa một view khác, chúng ta sử dụng `@extends('ten-view')` * Để sử dụng một view, ta dùng `@include('ten-view')` VD: File `child.blade.php` sẽ kế thừa `layouts.blade.php` @@ -42,7 +42,7 @@ VD: File `child.blade.php` sẽ kế thừa `layouts.blade.php` ``` * Ở đây `@parent` nhằm viết tiếp section `sidebar` chứ không ghi đè nó * `@endsection` sẽ chỉ định nghĩa section còn `@show` sẽ lập tức yield section đó -### 3.Hiển thị dữ liệu +### 3. Hiển thị dữ liệu * Để hiển thị dữ liệu ra view, chúng ta sử dụng cặp ngoặc nhọn `{{}}` VD: Ta có route như sau ``` From d650ad95245316cbd86d44913c94826fc4cc6dc2 Mon Sep 17 00:00:00 2001 From: Siegel16 <32434236+Siegel16@users.noreply.github.com> Date: Mon, 6 Nov 2017 14:22:14 +0700 Subject: [PATCH 7/9] Fix typo --- blade-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blade-template.md b/blade-template.md index c82cde2..7c33451 100644 --- a/blade-template.md +++ b/blade-template.md @@ -1,5 +1,5 @@ ### 1. Tổng quan -* [Blade](https://laravel.com/docs/master/blade) là một khuôn mẫu (template) đơn giản, mạnh mẽ được cung cấp bởi Laravel +* [Blade](https://laravel.com/docs/master/blade) là một khuôn mẫu (template engine) đơn giản, mạnh mẽ được cung cấp bởi Laravel * Không giống như những template PHP khác (Twig, etc..), blade không giới hạn việc sử dụng code PHP trong views * Các file Blade sử dụng phần mở rộng là `blade.php` và được đặt ở trong thư mục `resources/views` ### 2. Thừa kế views From b1555647eb1e792ff2956ff391e0e2c7fa7e5384 Mon Sep 17 00:00:00 2001 From: Siegel16 <32434236+Siegel16@users.noreply.github.com> Date: Mon, 6 Nov 2017 14:59:28 +0700 Subject: [PATCH 8/9] Add annotation for @show --- blade-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blade-template.md b/blade-template.md index 4d85b4a..529fefd 100644 --- a/blade-template.md +++ b/blade-template.md @@ -42,7 +42,7 @@ VD: File `child.blade.php` sẽ kế thừa `layouts.blade.php` ``` * Ở đây `@parent` nhằm viết tiếp section `sidebar` chứ không ghi đè nó * Có 2 cách đóng `@section` đó là `@endsection` và `@show`, trong đó `@section` -đơn thuần là đóng section còn `@show` sẽ đóng và thực hiện `@yield` section đó +đơn thuần là đóng section còn `@show` sẽ đóng và thực hiện đánh dấu section đó bằng `@yield` ### 3. Hiển thị dữ liệu * Để hiển thị dữ liệu ra view, chúng ta sử dụng cặp ngoặc nhọn `{{}}` VD: Ta có route như sau From 346812ad3f847a0918ede6231a0329f3a884af57 Mon Sep 17 00:00:00 2001 From: Siegel16 <32434236+Siegel16@users.noreply.github.com> Date: Mon, 6 Nov 2017 17:58:53 +0700 Subject: [PATCH 9/9] Fix heading and something --- html-css/bem.md | 8 ++++---- html-css/convention.md | 10 +++++----- html-css/html.md | 22 +++++++++++----------- html-css/oocss.md | 12 ++++++------ 4 files changed, 26 insertions(+), 26 deletions(-) diff --git a/html-css/bem.md b/html-css/bem.md index 25be2fc..091bef3 100644 --- a/html-css/bem.md +++ b/html-css/bem.md @@ -1,7 +1,7 @@ -#BEM (Block, Element, Modifier) là 1 quy tắc đặt tên cho các class trong HTML và CSS.Nó giúp cho lập trình viên hiểu rõ hơn về quan hệ giữa HTML và CSS trong 1 dự án. +# BEM (Block, Element, Modifier) là 1 quy tắc đặt tên cho các class trong HTML và CSS.Nó giúp cho lập trình viên hiểu rõ hơn về quan hệ giữa HTML và CSS trong 1 dự án. -##Cách đặt tên cho các thành phần: .[block-name]__[element_name]--[modifier-name] +## Cách đặt tên cho các thành phần: .[block-name]__[element_name]--[modifier-name] 1. Block được coi là thành phần lớn nhất: .btn {} . 2. Element là thành phần con của block và đằng trước tên của nó có thêm 2 dầu gạch dưới: .btn__price {} . @@ -21,14 +21,14 @@ ```` -##Quy tắc khi sử dụng vùng chọn cho CSS: +## Quy tắc khi sử dụng vùng chọn cho CSS: 1. Chỉ sử dụng class selector. 2. Không sử dụng id và tagname. 3. Không sử dụng class selector mà bị phụ thuôc vào blocks/elements ở page đó: -##Tại sao nên sử dụng bem: +## Tại sao nên sử dụng bem: 1. Khi nhìn vào tên của 1 class thì có thể biết được nó phụ thuộc vào class nào hoặc nó định nghĩa cho thành phần HTML nào. 2. Khi tạo style mới cho 1 thành phần.Chúng ta có thể tận dụng lại các modifier có sẵn mà không cần viết mới. diff --git a/html-css/convention.md b/html-css/convention.md index edd4925..4bbf870 100644 --- a/html-css/convention.md +++ b/html-css/convention.md @@ -44,7 +44,7 @@ // ... } -* Sau `:` phải có khoảng trắng ` ` +* Sau `:` phải có khoảng trắng ### Không tốt .selector{ @@ -91,7 +91,7 @@ # SCSS -* SCSS selector tối đa 3 lever +* SCSS selector tối đa 3 level ### Tốt @@ -128,9 +128,9 @@ } #Đặt tên cho class -- Khi đặt tên cho class theo cấu trúc `[Tên viết tắt của dự án]-[Chức năng của section]` +* Khi đặt tên cho class theo cấu trúc `[Tên viết tắt của dự án]-[Chức năng của section ]` #Phân chia section rõ ràng -- Phân chia section rõ ràng với từng chức năng của nó +* Phân chia section rõ ràng với từng chức năng của nó -Đặt tên class theo chức năng và hướng tới "Đối tượng" +* Đặt tên class theo chức năng và hướng tới "Đối tượng" diff --git a/html-css/html.md b/html-css/html.md index 9be9978..1e176b9 100644 --- a/html-css/html.md +++ b/html-css/html.md @@ -1,12 +1,12 @@ -#HTML Convention +# HTML Convention -##Tất cả các thẻ (tags) phải là chữ thường +## Tất cả các thẻ (tags) phải là chữ thường ```
``` -###Sử dụng tên ý nghĩa khi đặt cho ID và các phần tử HTML +### Sử dụng tên ý nghĩa khi đặt cho ID và các phần tử HTML ``` txtName, txtAge ``` @@ -15,7 +15,7 @@ thay vì text1, text2 ``` -###Indent HTML code consistently (Thụt lề cho mã HTML) +### Indent HTML code consistently (Thụt lề cho mã HTML) ```
@@ -30,10 +30,10 @@ text1, text2 ``` -###Không sử dụng inline style attributes +### Không sử dụng inline style attributes Hạn chế sử dụng nó càng ít càng tốt, điều này có những lợi thế sau: -- Có thể dễ dàng chỉnh sửa giao diện cho mã HTML -- Có thể kế thừa CSS nếu bạn muốn sử dụng lại nó ở 1 nơi khác. +* Có thể dễ dàng chỉnh sửa giao diện cho mã HTML +* Có thể kế thừa CSS nếu bạn muốn sử dụng lại nó ở 1 nơi khác. ```
@@ -42,8 +42,8 @@ Hạn chế sử dụng nó càng ít càng tốt, điều này có những lợ
``` -###Sử dụng 1 file CSS riêng không đặt trong trang HTML +### Sử dụng 1 file CSS riêng không đặt trong trang HTML -###Tuân thủ W3C validate -- Việc này giúp website của bạn tối ưu được các đoạn mã HTML và hỗ trợ cho SEO -- Có thể check W3C validate trên trang https://validator.w3.org/ \ No newline at end of file +### Tuân thủ W3C validate +* Việc này giúp website của bạn tối ưu được các đoạn mã HTML và hỗ trợ cho SEO +* Có thể check W3C validate trên trang https://validator.w3.org/ \ No newline at end of file diff --git a/html-css/oocss.md b/html-css/oocss.md index ce78580..6f6f552 100644 --- a/html-css/oocss.md +++ b/html-css/oocss.md @@ -1,9 +1,9 @@ -#OCSS là cách viết CSS theo kiểu hướng đối tượng,nó giúp cho chúng ta có thể tận dụng tối đa được mã nguồn và giúp phát triển cũng như bảo trì dự án tốt hơn +# OCSS là cách viết CSS theo kiểu hướng đối tượng,nó giúp cho chúng ta có thể tận dụng tối đa được mã nguồn và giúp phát triển cũng như bảo trì dự án tốt hơn -##2 Nguyên tắc cơ bản khi sử dụng OOCSS: +## 2. Nguyên tắc cơ bản khi sử dụng OOCSS: -###Tách biệt giữa cấu trúc và giao diện: -1. không viết các thuộc tính liên quan tới cấu trúc (position, float, margin, padding….), giao diện(background, border, color…) vào 1 class. +### Tách biệt giữa cấu trúc và giao diện: +1. Không viết các thuộc tính liên quan tới cấu trúc (position, float, margin, padding….), giao diện(background, border, color…) vào 1 class. 2. Lên kế hoạch trước khi viết mã CSS cho 1 trang: Viết class riêng cho các yếu tố có tính chất lặp lại để có thể tái sử dụng lại. 3. VD: ``` @@ -37,7 +37,7 @@ Sau đó sử dụng CSS như sau: .box1 { background: red } .box2 { background: blue } ``` -###Tách biệt giữa container(phần chứa nội dung) và content(nội dung): +### Tách biệt giữa container(phần chứa nội dung) và content(nội dung): Giả sử bạn định dạng style như này cho thẻ h3 ở sidebar: ``` #sidebar h3 { @@ -84,7 +84,7 @@ Sau đó sử dụng CSS như sau: Bạn thấy có khá nhiều dòng CSS bị lặp lại.Nếu chúng ta làm theo kiểu OOCSS thì sẽ tách thẻ h3(vai trò là content) ra khỏi sidebar và footer (vai trò là container) và tạo class riêng cho nó để tái sử dụng. -##Quy tắc sử dụng selector: +## Quy tắc sử dụng selector: 1. Tránh sử dụng ID. 2. Tránh sử dung selector hậu duệ .(VD: .footer h3) 3. Không gắn class với 1 element.(VD: div.title)