haposoft · hapo-truongpm · Oct 30, 2017 · Oct 30, 2017 · Nov 6, 2017 · Nov 6, 2017
diff --git a/blade-template.md b/blade-template.md
@@ -0,0 +1,64 @@
+### 1. Tổng quan
+* [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  
+* Đâ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`:  
+```
+<html>
+    <body>
+        <head>
+              <title>App Name - @yield('title')</title>
+        </head>
+                @section('sidebar')
+                    This is the master sidebar.
+                @show
+        <div class='container'>
+             @yield('content')
+        </div>
+    </body>
+</html>
+```
+
+* `@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. 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`  
+```
+@extends('layouts')
+@section('sidebar')
+    @parent
+
+    <p>This is appended to the master sidebar.</p>
+@endsection  
+@section('content')
+    <p>This is my body content.</p>
+@endsection
+```
+* Ở đâ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 đá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
+```
+// 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:  
+```
+    <script>
+        var app = @json($array);
+    </script>
+```
diff --git 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
@@ -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
@@ -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
 ```
 <table></table>
 <form></form>
 ```
 
-###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)
 ```
 <body>
     <form name="frmActivity" method="post" action="<?php echo $formAction;?>">
@@ -30,10 +30,10 @@ text1, text2
 </body>
 ```
 
-###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.
 ```
 <!-- INSTEAD OF -->
 <div style="width:100px;align:center;">
@@ -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ợ
 <div class="message">
 ```
 
-###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/
+### 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/
diff --git 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)