Khám phá cách tối ưu hóa trải nghiệm AI với các tính năng thông minh.

Sử dụng AI thông minh không chỉ là xu hướng mà còn là bước tiến cần thiết trong thế kỷ 21. AI giúp tối ưu hóa công việc, từ quản lý thời gian đến hỗ trợ học tập và làm việc. Tuy nhiên, việc sử dụng AI cần một cách thông minh để tránh phụ thuộc và lạm dụng. Trong bài viết này, chúng ta sẽ khám phá cách tận dụng AI một cách hiệu quả mà không làm mất đi khả năng tư duy và sáng tạo của con người.

1. AI là gì? Tại sao cần sử dụng AI thông minh?

Sử dụng AI thông minh không chỉ là một xu hướng mà còn là một bước tiến cần thiết trong thế kỷ 21. AI (Trí tuệ nhân tạo) là công nghệ mô phỏng khả năng tư duy và học hỏi của con người, giúp máy tính thực hiện các tác vụ phức tạp. Khi sử dụng AI một cách thông minh, chúng ta không chỉ tối ưu hóa công việc mà còn phát triển khả năng tư duy và sáng tạo của chính mình.

AI có thể giúp chúng ta trong nhiều lĩnh vực như:

• Quản lý thời gian: AI giúp lên kế hoạch công việc hiệu quả, sắp xếp thời gian và ưu tiên các nhiệm vụ quan trọng.
• Hỗ trợ học tập: AI cung cấp các công cụ học tập cá nhân hóa, giúp học sinh và sinh viên nắm bắt kiến thức nhanh chóng và hiệu quả.
• Tối ưu hóa làm việc: AI tự động hóa các quy trình, giúp tăng năng suất và giảm thiểu sai sót trong công việc.

2. Tại sao nên sử dụng AI thông minh, không phụ thuộc và không lạm dụng?

Sử dụng AI thông minh không chỉ giúp tối ưu hóa công việc mà còn giúp chúng ta phát triển tư duy và khả năng sáng tạo. Tuy nhiên, nếu sử dụng AI một cách phụ thuộc và lạm dụng, chúng ta có thể mất đi khả năng tư duy độc lập và sáng tạo. Dưới đây là một số lý do tại sao nên sử dụng AI một cách thông minh:

2.1. AI giúp tối ưu hóa công việc

Sử dụng AI thông minh giúp tối ưu hóa công việc một cách hiệu quả. AI có thể tự động hóa các quy trình, giúp giảm thiểu thời gian và công sức cần thiết cho các nhiệm vụ lặp đi lặp lại. Điều này không chỉ giúp tăng năng suất mà còn giảm thiểu sai sót trong công việc.

2.2. AI hỗ trợ học tập và phát triển cá nhân

AI cung cấp các công cụ học tập cá nhân hóa, giúp học sinh và sinh viên nắm bắt kiến thức nhanh chóng và hiệu quả. Việc sử dụng AI thông minh không chỉ giúp học tập mà còn giúp phát triển kỹ năng tư duy và giải quyết vấn đề.

2.3. AI giúp tăng khả năng sáng tạo

Thay vì phụ thuộc vào AI để thực hiện tất cả các công việc, chúng ta nên sử dụng AI như một công cụ hỗ trợ để tăng cường khả năng sáng tạo. AI có thể giúp chúng ta khám phá các ý tưởng mới, nhưng cuối cùng, việc thực hiện và phát triển ý tưởng đó vẫn phụ thuộc vào con người.

3. Cách sử dụng AI thông minh, không phụ thuộc và không lạm dụng

Sử dụng AI thông minh là một bước tiến cần thiết trong thế kỷ 21. Tuy nhiên, để tận dụng tối đa lợi ích của AI, chúng ta cần sử dụng nó một cách thông minh, không phụ thuộc và không lạm dụng. Dưới đây là một số cách để sử dụng AI một cách hiệu quả:

3.1. Sử dụng AI như công cụ hỗ trợ, không phải thay thế

AI là một công cụ hỗ trợ, giúp chúng ta thực hiện các công việc một cách hiệu quả. Thay vì phụ thuộc hoàn toàn vào AI, chúng ta nên sử dụng nó như một công cụ để tăng cường khả năng tư duy và sáng tạo của chính mình.

3.2. Học cách sử dụng AI để phát triển bản thân

Thay vì sử dụng AI để thực hiện tất cả các công việc, chúng ta nên sử dụng nó để học hỏi và phát triển bản thân. AI có thể cung cấp thông tin và gợi ý, nhưng cuối cùng, việc quyết định và thực hiện vẫn phụ thuộc vào con người.

3.3. Đặt giới hạn sử dụng AI

Để tránh lạm dụng AI, chúng ta nên đặt giới hạn về thời gian sử dụng AI mỗi ngày. Điều này không chỉ giúp chúng ta tránh phụ thuộc mà còn giúp chúng ta duy trì khả năng tư duy độc lập và sáng tạo.

4. AI thông minh có thể làm gì cho bạn?

Sử dụng AI thông minh giúp chúng ta tối ưu hóa công việc, học tập và phát triển bản thân. AI có thể làm gì cho bạn? Dưới đây là một số cách AI có thể hỗ trợ bạn trong cuộc sống hàng ngày:

• Quản lý thời gian: AI giúp lên kế hoạch công việc hiệu quả, sắp xếp thời gian và ưu tiên các nhiệm vụ quan trọng.
• Hỗ trợ học tập: AI cung cấp các công cụ học tập cá nhân hóa, giúp học sinh và sinh viên nắm bắt kiến thức nhanh chóng và hiệu quả.
• Tối ưu hóa làm việc: AI tự động hóa các quy trình, giúp tăng năng suất và giảm thiểu sai sót trong công việc.

Để sử dụng AI một cách hiệu quả, chúng ta cần hiểu rõ về AI và cách nó hoạt động. AI không phải là một công cụ hoàn hảo, nhưng nó có thể giúp chúng ta thực hiện các công việc một cách nhanh chóng và hiệu quả hơn. Tuy nhiên, để tránh phụ thuộc và lạm dụng AI, chúng ta cần sử dụng nó một cách thông minh.

5. Tại sao nên sử dụng AI thông minh?

Sử dụng AI thông minh là một bước tiến cần thiết trong thế kỷ 21. AI không chỉ giúp tối ưu hóa công việc mà còn giúp chúng ta phát triển khả năng tư duy và sáng tạo. Tuy nhiên, để tận dụng tối đa lợi ích của AI, chúng ta cần sử dụng nó một cách thông minh, không phụ thuộc và không lạm dụng. Điều này không chỉ giúp chúng ta tiết kiệm thời gian và công sức mà còn giúp chúng ta phát triển bản thân và học hỏi thêm nhiều điều mới.

Khi sử dụng AI một cách thông minh, chúng ta không chỉ có thể tối ưu hóa công việc mà còn có thể phát triển khả năng tư duy và sáng tạo của chính mình. AI là một công cụ hỗ trợ, giúp chúng ta thực hiện các công việc một cách hiệu quả. Tuy nhiên, để tránh phụ thuộc và lạm dụng AI, chúng ta cần sử dụng nó một cách thông minh.

Trên đây là bài viết về sử dụng AI thông minh không phụ thuộc và không lạm dụng. Nếu bạn đang tìm kiếm một cách để tối ưu hóa công việc và phát triển bản thân, thì việc sử dụng AI một cách thông minh là một lựa chọn tuyệt vời. Hãy bắt đầu sử dụng AI ngay hôm nay để tận hưởng những lợi ích mà nó mang lại.

Sử dụng AI thông minh không chỉ giúp tối ưu hóa công việc mà còn giúp chúng ta phát triển khả năng tư duy và sáng tạo. AI là một công cụ hỗ trợ, giúp chúng ta thực hiện các công việc một cách hiệu quả. Tuy nhiên, để tránh phụ thuộc và lạm dụng AI, chúng ta cần sử dụng nó một cách thông minh. Hãy bắt đầu sử dụng AI ngay hôm nay để tận hưởng những lợi ích mà nó mang lại.

Như vậy, bài viết đã cung cấp cho bạn những thông tin chi tiết về sử dụng AI thông minh không phụ thuộc và không lạm dụng. Hy vọng rằng, thông qua bài viết này, bạn đã có thêm những hiểu biết về AI và cách sử dụng nó một cách hiệu quả.

Cảm ơn bạn đã theo dõi bài viết của chúng tôi. Nếu bạn có bất kỳ câu hỏi nào về AI hoặc muốn tìm hiểu thêm về cách sử dụng AI một cách thông minh, hãy để lại bình luận dưới đây. Chúc bạn thành công trong việc sử dụng AI và tận hưởng những lợi ích mà nó mang lại!

Giới Thiệu Chung

Hôm nay mình sẽ hướng dẫn các bạn xây dựng một ứng dụng nhắc nhở với cron jon, nodemailer và express.

Mục Đích Của Bài Viết

Thì hôm nay mình sẽ thay đổi một chút thay vì viết một blog để hướng dẫn các bạn thì bây giờ mình sẽ quay video để cho các bạn hiểu kĩ hơn.
Mục đích của mình là để cho các bạn biết cron jobs là gì, gửi mail ra làm sao. Trên cloud heroku thì chúng sử dụng gì để thực hiện việc gửi mail.

Cuối cùng mình mong các bạn xem các project thật kĩ, không lượt bỏ <3 <3

Bắt Đầu Thôi Nào

1. Thiết Lập Project

2. Pay Index/Create/Reminder/Delete Routes

3. Styles CSS Project

4. Deploy Project Và Kết Thúc Dự Án

Link demo prject cho mọi người mà mình đã deploy lên heroku: tại đây nha
Vậy là xong rồi nha <3 <3 <3

Lời Kết

Vậy là xong bài Xây Dựng App Reminder Pay Với Cron Jobs, Nodemailer Và NodeJS. Mình mong muốn bài này sẽ giúp các bạn hiểu rõ hơn về cron jobs là gì, gửi mail bằng nodemailer bằng cách nào và cuối cùng làm cách nào để deploy một project lên heroku.
Các bạn nhớ like và theo dõi fanpage Thanh Long Dev để nhận những thông báo về bài viết mới nhất nha.
Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.
Chúc Các Bạn Thành Công!!

Giới Thiệu Chung

Hôm nay mình sẽ hướng dẫn các bạn xây dựng ứng dụng calculator với html, css và js.
Các chức năng chính:

• Các phép tính cơ bản cộng, trừ, nhân, chia.
• Dark & light mode
• Xem lại lịch sử các phép tính.

Mục Đích Bài Viết

Đây không phải là một ứng dụng gì quá mới mẻ cả nhưng khi vào tay mình thì sẽ có cái mới riêng kkkk.
Nhưng mình vẫn muốn chia sẻ để giúp các bạn beginner nắm kĩ hơn các kiến thức về javascript cũng như cảm thấy hứng thú hơn khi vừa được học và làm những pet project.

Bắt Đầu Thôi Nào

Lên Ý Tưởng

Ý tưởng cho project này cũng không có gì quá phức tạp, các bạn tham khảo hình ảnh ở dưới nha.

Cấu Trúc Thư Mục Cho Dự Án

Cấu trúc thư mục cho project này cũng đơn giản thôi hihihi
Ví dụ: Mình sẽ tạo một folder project với tên là Calculator with js. Trong folder đó các bạn tạo cho mình một file index.html, 1 folder css & js để chứa lần lượt các file đó là style.css và script.js

Bắt Đầu Code Thôi

1. Chức Năng Tính Toán Cơ Bản

1.1 Code HTML

Trong phần html này ta sẽ tạo một .container-grid để bao bọc toàn bộ calculator tiếp theo là một .result dùng để hiển thị kết quả tính toán và cuối cùng là các số và phép tính cần có để tính toán.
Bạn tạo cho mình các event onclick dùng để thực hiện các chức năng tính toán.
Các bạn tham khảo code ở dưới nha mục đích mà mình đưa ảnh lên đây để các bạn tự code theo chớ không phải là copy nó giúp ích rất nhiều trong quá trình học.

1.2 Code Javascript

Đây là phần mà có thể nói là quan trọng nhất, nếu mà bình thường thì html -> css -> js nhưng hôm nay mình thay đổi một tí thì mình sẽ code js trước.
Mình sẽ code xong các chức năng tính toán cơ bản rồi mới css cho nó nha.
Trước tiên các bạn import file js vào trong file index.html trước cái đã:
<script src="js/script.js"></script>
Trong phần này sẽ gồm các chức năng chi tiết như sau:
Hiển thị chữ số và kết quả phép toán
DEL (xóa các số cuối cùng) và AC (xóa toàn bộ)
Thực hiện các phép tính

• Các bạn khai báo hai biến để định nghĩa các phép tính và kết quả, tiếp theo các bạn chỉ cần lặp qua các phép tính rồi add event click cho nó là được. Khi click thì sẽ hiển thị ra trên phần kết quả.
• Để mà thực hiện được các phép tính thì ta sẽ sử dụng hàm eval các bạn có thể tham khảo thêm về eval tại đây.
• Tiếp đến là AC (xóa toàn bộ) khi click vào biểu thức đấy thì sẽ xuất hiện một empty string, còn khi click vào biểu thức DEL (xóa các số cuối cùng) bằng cách sử dụng hàm substring() các bạn tham khảo tấm hình ở dưới để hiểu rõ hơn nha.
  
  Còn dưới đây là code JS:
  
  Và đây là kết quả khi chúng ta thực hiện các phép tính mà chưa css cho nó:
  

1.3 Code CSS

Như các bạn đã thấy ở trên khi chúng ta chưa css cho nó thì nhìn khá là củ chuối đúng không nào, vậy bây giờ chúng ta bắt đầu css thôi nào.
Đầu tiên các bạn cần import cho mình file css vào trước đã nha:
<link rel="stylesheet" href="css/style.css" />
Bây giờ cái mà quan trọng nhất ở đây là việc chia layout như nào cho hợp lý. Thì mình sẽ sử dụng CSS Grid để chia layout cho nó (mình có viết một bài về grid tại đây các bạn tham khảo nha.)
Mình sẽ chia layout như sau các bạn xem ảnh ở dưới nha:
Với .container-grid mình chia làm 2 hàng với kích thước tương ứng. Trong đó .calculate mình sẽ chia ra làm 2 cột với mỗi cột lần lượt là 3 cột / 4 hàng và 2 cột / 4 hàng

Và dưới đây là toàn bộ code CSS
Các bạn có thể tham khảo và cũng như tự mình code tùy theo khả năng sáng tạo của mình nha.
Như các bạn đã thấy ở dưới thì mình có khai báo một số thuộc tính như: màu font, màu nền,... trong html với mục đích dễ dàng tái sử dụng và thay đổi bonus thêm thì khi viết như thế thì khi code chức năng dark & light mode sẽ dễ dàng hơn.

Còn đây là kết quả khi chúng ta đã hoàn thành xong chức năng tính toán cơ bản, nhìn cũng ra gì phết đấy hihi =)))

2. Chức Năng Dark & Light Mode

2.1 Code HTML

Trong code html này các bạn thêm cho mình một data-attribute với tên data-theme và value là light vào bên trong thẻ mở <html>.
Tiếp theo phía dưới .grid-container bạn thêm cho mình một class là heading. Bên trong heading sẽ là nơi chứa các icon như mình đã lên ý tưởng từ trước.

2.2 Code CSS

Để mà có thể chia được layout cho heading thì trong class grid-container các bạn thêm cho mình một hàng nữa vào thuộc tính grid-template-rows
grid-template-rows: .5fr 1fr 5fr;
Tiếp theo mình chỉ cần thêm một số thuộc tính như: màu nền, màu chữ vào thẻ attribute selector đó là html[data-theme='dark'] để có thể làm thay đổi được chế độ dark & light cho các element. Và dưới đây là code css cho chứ năng này các bạn tham khảo nha.

Giao diện của chức năng dark & light mode

2.3 Code Javascript

Trong phần này các bạn chỉ cần bắt sự kiện checked thì nó sẽ setAttribute tương ứng là được.
Mình sẽ giải thích rõ hơn một chút đó là mình sẽ gọi hàm checkbox rồi add event change cho nó. Data-attribute mặc định là light khi checked thì sẽ change thành dark, documentElement ở đây nó sẽ trả là là <html> element.

Và đây là kết quả khi chúng ta hoàn thành chức năng dark & light mode

3. Chức Năng Xem Lại Lịch Sử Tính Toán

3.1 Code HTML

Trong class heading các bạn thêm cho mình một đoạn code nhỏ để chứa icon history và kết quả lưu history.

            <span>
                <i class="fas fa-history">
                    <div id="history"></div>
                </i>
            </span>

3.2 Code Javascript

Mình sẽ sử dụng object và array để làm công đoạn lưu trữ lịch sử tính toán nay, thì chắc các bạn cũng đã hình dung ra được là mình sẽ làm như nào rồi nhờ.
Mình sẽ nói sơ qua một chút nha, trước hết mình sẽ tạo một array empty để lưu các biểu thức và kết quả tính toán. Sau đó ta chỉ get và render ra view là được rồi, các bạn xem ảnh ở dưới mình có giải thích chi tiết hơn í.

Chúng ta cùng xem thử nó đã lưu được lịch sử chưa nha hihi

3.3 Code CSS

Như các bạn đã thấy ở trên khi ta lưu lịch sử thì bị vỡ layout ngay vậy bây giờ chúng ta làm như nào nhờ?
Oke mình đã có bây giờ ta chỉ cần ẩn lịch sử đó đi và chỉ khi nào click vào icon history thì mới hiển thị.

#history {
    display: none;
    position: absolute;
    z-index: 9999;
    background: #5d4196;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    padding: .5rem;
    margin-top: .5rem;

}

// class hiển thị history
.indexHistory {
    display: block !important;
}

Dưới đây là code js để khi click vào icon thì sẽ add class để hiển thị lịch sử

// Index History
let indexHistory = document.getElementsByClassName("fa-history")
indexHistory[0].addEventListener("click", function () {
    logHistory.classList.toggle("indexHistory")
})

Và dưới là kết quả khi chúng đã hoàn thành lưu trữ lịch sử <3

Vậy là xong rồi nha, các bạn tham khảo code mà mình đã push lên github tại đây nha.

Lời Kết

Vậy là xong bài Xây Dựng Ứng Dụng Calculator Với Javascript. Mình mong muốn bài này sẽ giúp các bạn beginer hiểu, nắm rõ hơn và có cảm giác thú vị hơn khi học js.
Các bạn nhớ like và theo dõi fanpage Thanh Long Dev để nhận những thông báo về bài viết mới nhất nha.
Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.
Chúc Các Bạn Thành Công!!

Giới Thiệu Chung

Hôm nay mình sẽ hướng dẫn tất cả mọi người xây dựng một trang lading page với grid css.
Thì mình sẽ convert UI trang home của blog thanhlongdev với grid css bao gồm giao diện desktop và mobile.

Mục Đích Bài Viết

Đây không phải là chủ đề gì quá xa lạ và mới mẻ với các anh em front end dev.
Nhưng mình vẫn muốn chia sẻ để giúp các bạn beginner nắm kĩ hơn các kiến thức về cách dựng một layout và chia component ra làm sao cho nó hợp lý, mà không cần sử dụng bất kì framework nào cả thông qua việc xây dựng một project thực tế.
Mình chỉ mong muốn là các bạn đọc bài của mình thật kĩ và rõ ràng.

Bắt Đầu Thôi Nào

Lên Ý Tưởng

Ý tưởng để mà convert UI trang home của thanhlongdev cũng đơn giản thôi. Mình sẽ chia làm 3 phần nha header, main và footer để code nha.
Chúng ta sẽ code từ giao diện desktop đến mobile. Trong đó, phần main của giao diện desktop ta sẽ chia các topic theo từng cột mà template đã định nghĩa sẵn, còn mobile thì ta sẽ các bài topic đều một cột cả.

Cấu Trúc Thư Mục Cho Dự Án

Cấu trúc thư mục cho project này cũng đơn giản thôi chả có gì phức tạp cả hihihi
Ví dụ: Mình sẽ tạo một folder project với tên là Layout With Grid. Trong folder đó các bạn tạo cho mình một file index.html và 1 folder css để chứa 2 file đó là style.css, reponsive.css

Bắt Đầu Code Thôi

Phần Header

Trong phần header này chúng ta sẽ sử dụng css grid để chia layout và rõ hơn nữa đó là thuộc tính grid-template-columns để có thể chia layout cho nó.
grid-template-columns sẽ tương ứng với số cột, các giá trị sẽ tương ứng với chiều rộng của các cột lần lượt từ trái sang phải.
Còn grid-template-rows sẽ tương ứng số hàng, các giá trị sẽ tương ứng với chiều cao của các hàng lần lượt từ trên xuống dưới.
Chúng ta sẽ phân tích và chia tách từng component một để việc code dễ dàng hơn nha

Như các bạn thấy ở trên thì fr được viết tắt của "fraction" (phân số) là gì??
Thì nó cũng là một đơn vị kích thước tương tự như px, rem, em nhưng nó được thiết kế dành riêng cho grid. 1fr tương ứng với một phần trong không gian trống của grid container.
Code HTML

Lý do tại sao mình không copy code vào đây cho các bạn dễ dàng code hơn, bởi vì mình mong muốn các bạn nhìn vào đấy rồi làm theo tránh trường hợp copy,... Mục đích chỉ muốn tốt cho các bạn thôi hihihi.
Và đây là header khi mình code xong phần html cho nó. Nhìn củ chuối lắm các ông ạ =)))

Code CSS
Trong phần CSS này mình sẽ sử dụng grid để chia layout cho navbar và banner. Chúng ta sẽ đi từng phần nha trước tiên là navbar rồi tiếp đến là banner.

Repeat được sử dụng khi grid có nhiều hàng và cột giống nhau thì chúng ta nên sử dụng để khai báo nhanh hơn.
Justify-items sẽ căn chỉnh nội dung theo trục hoành (trục x), còn align-items sẽ căn chỉnh nội dung bên trong grid theo trục tung (trục y).

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

li { list-style: none; }

a { text-decoration: none; }

/* header */
header {
    background: #0a0b0c;
    padding: 0 5vw;
    color: #fff;
}

/* Navbar */
nav {
    margin: 0 auto; // Có chức năng căn giữa khi sử dụng chung với width
    max-width: 1040px; // Set width khi vượt quá 1040 thì sẽ bay vào giữa
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.menu {
    padding-top: .5rem;
    display: grid;
    grid-template-columns: repeat(4, .2fr);
    justify-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

/* Nav right */
.site-nav-right {
    display: grid;
    grid-template-columns: 12fr 1fr;
    padding: 10px 0;
    height: 64px;
    justify-items: right;
}

/* Banner */
.banner-header {
    display: grid;
    justify-items: center;
    align-items: center;
    padding: 6vw 3vw;
    min-height: 200px;
    max-height: 340px;
}

.banner-header .site-description {
    text-align: center;
    font-weight: 500;
    padding: 5px 0;
    font-size: 1.2rem;
    line-height: 1.4em;
    opacity: .8;
}

Style css các chi tiết trong phần header mà các bạn có thể tự css theo sức sáng tạo của mình nha.

Và đây là kết quả khi chúng ta đã hoàn thành xong phần header <3

Phần Main

Trong phần này mình sẽ chia layout giống như ý tưởng mà mình đã nói ở trên. Mình sẽ bao bọc ở ngoài một class="posts" bên trong đó là những class dùng để chia bố cục từng phần một và ngăn cách nhau bằng thẻ <hr>, bên trong là thẻ article dùng để chứa các bài topic các bạn xem ảnh ở dưới để có thể rõ hơn nha.

Code HTML
Dưới đây là tổng quát những class chính trong phần main.

Còn dưới đây là những class chi tiết trong thẻ article bao gồm: ảnh bìa, tiêu đề, mô tả, tác giả, thẻ tag,... Và có một lưu ý nữa đó là những bài topic đều có thể được click vào để xem chi tiết nên cần đặt trong thẻ liên kết a.

     <article class="post-wrapper">
                    <a href="#">
                        <img class="img-post"
                            src="https://digitalpress.fra1.cdn.digitaloceanspaces.com/4tg23ij/2020/09/33.png " alt="">
                    </a>
                    <div class="content-post">
                        <a href="#">
                            <div class="tag-post">Lập Trình Web</div>
                            <h2 class="title-post">Hướng Dẫn Xây Dựng Books Store Với NodeJS, Express và MongoDB - Phần 4 </h2>
                            <p class="desc-post">
                                Chức Năng Hiển Thị Chi Tiết, Cập Nhật Và Xóa Books Định Nghĩa Và Controller Router Hiển
                                Thị Chi Tiết Trong Books Mình sẽ nói sơ qua một chút về
                            </p>
                        </a>
                        <div class="author-post">
                            <a href="#">
                                <img class="avatar-author"
                                    src="https://digitalpress.fra1.cdn.digitaloceanspaces.com/4tg23ij/2020/05/IMG_20200331_120727-1.jpg"
                                    alt="" />
                            </a>
                            <div class="content-author">
                                <div>
                                    <a href="">Đặng Thanh Long</a>
                                </div>
                                <span class="post-card-byline-date"><time datetime="2020-09-12">12 Th09 2020</time>
                                    <span class="bull">•</span> 13 min read</span>
                            </div>
                        </div>
                    </div>
                </article>

Code CSS
Những class "posts-columns-1", posts-columns-3 và posts-columns-2 thì sẽ tương ứng lần lượt với các cột như sau grid-template-columns: 1fr; grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(2, 1fr).
Grid-column-gap là khoảng cách giữa các cột và ngược lại grid-row-gap sẽ là khoảng cách giữa các hàng với nhau.

/* Main */
main {
    padding: 0 5vw;
}

.margin-main {
    margin: 2.5rem 0 6rem;
}

.posts {
    max-width: 1040px;
    width: 100%;
    margin: 0 auto;
}

.posts-columns-1 {
    display: grid;
    grid-template-columns: 1fr;
}

.posts-columns-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 2rem;
}

.posts-columns-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2rem;
}

Style css các thành phần chi tiết trong thẻ article, có một vấn đề nhỏ đó là ảnh bìa và nội dung trong thẻ class="post-wrapper" được bao bọc bởi class="posts-columns-1" phải nằm ngang hàng với nhau vậy bây giờ ta phải làm sao nhờ. Thì đơn giản thôi trong class="post-wrapper" chúng ta sẽ sử dụng grid và thuộc tính grid-template-columns để làm điều đó hihihi.

Và đây là kết quả khi chúng ta đã hoàn thành xong phần main nhìn cũng ra gì phết nhờ =)))

Phần Footer

Phần này thì khá là đơn giản không có gì phức tạp cả nên mình sẽ đi nhanh phần này nha. Trước tiên các bạn tạo cho mình một thẻ footer bên trong sẽ chứa hai thẻ div tương ứng với hai nội dung trong footer, bây giờ ta chỉ cần sử dụng grid và một số thuộc tính của nó là có thể cân được footer rồi hihi.
Code HTML

 <!-- Footer -->
    <footer class="site-footer">
        <div class="site-footer-content posts">
            <section class="copyright">
               <a href="https://www.thanhlongdev.com">Thanh Long Dev</a> © 2020
            </section>
            <div class="site-footer-nav">
                <a href="https://www.thanhlongdev.com">Latest Posts</a>
                <a href="https://www.facebook.com/thanhlongdev/" target="_blank" rel="noopener">Facebook</a>
            </div>
        </div>
    </footer>

Code CSS
Phần css này chắc mình hổng cần giải thích gì nhờ các bạn nhìn vào chắc cũng hiểu được mình đang làm gì rồi.

Đây là kết quả khi chúng ta đã hoàn thành xong phần footer:

Và đây là giao diện desktop khi chúng ta đã dựng xong layout <3 <3 <3

Reponsive Layout Grid

Ảnh ở trên là giao diện mobile & tablet khi mình chưa reponsive nha, nhìn kinh vl kkkkk
Các bạn tạo cho mình file reponsive nhớ là phải import vào file index.html nha. Nếu mà muốn reponsive thì các bạn sử dụng thuộc tính media query nha.
Ở đây mình có soạn sẵn các media phù hợp với từng loại kích thước với nhau rồi nha, các bạn chỉ cần copy paste rồi sau đó code thôi nha.

@media(min-width: 1366px){
// code here
}
@media(min-width:1200px) and (max-width:1365px){
// code here
}
@media(min-width:992px) and (max-width:1199px){
 // code here
}
@media(min-width:768px) and (max-width:992px){
  // code here
}
/* --------Tablet-------- */
@media (min-width:480px) and (max-width:768px){
 // code here
}
/* ---------Mobile-------- */
@media only screen and (min-width:240px) and (max-width:480px){
// code here
}

Reponsive Giao Diện Mobile

Bây giờ chúng sẽ reponsive từ trên xuống dưới từ ngoài vào trong, từ trong ra ngoài từ header đến footer =))))

• Thứ nhất trong phần heder bạn ẩn cho mình thằng nav-right.
• Thứ hai trong phần main mình muốn các bài topic chỉ hiển thị một cột duy nhất.
• Thứ ba phần footer mình sẽ canh chỉnh cho nó ở giữa.
  

Reponsive Giao Diện Tablet

Trong phần này thì cũng khá đơn giản, chúng ta chỉ cần reponsive phần main là xong rồi.

• Phần main của tablet này mình muốn các bài topic chỉ hiển thị một cột duy nhất giống như phần main trong mobile vậy.
  
  Và đây là giao diện Mobile & Tablet mà mình đã reponsive nha:
  
  Ôi Vui Quá Cuối Cùng Cũng Xong Rồi hihihi
  Các bạn tham khảo trang homepage thanhlongdev mà mình đã deploy lên firebase tại đây nha

Lời Kết

Vậy là xong bài Xây Dựng Layout Đơn Giản Với CSS Grid. Mình mong muốn sau khi các bạn hoàn thành xong project này sẽ hiểu và nắm rõ hơn về grid, flex và cách phân tích từng component. Các bạn có thể dựa vào project này để có thể phát triển và scale project này lớn hơn nữa nha.
Các bạn nhớ like và theo dõi fanpage Thanh Long Dev để nhận những thông báo về bài viết mới nhất nha.
Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.
Chúc Các Bạn Thành Công!!

Chức Năng Hiển Thị Chi Tiết, Cập Nhật Và Xóa Books

Định Nghĩa Và Controller Router Hiển Thị Chi Tiết Trong Books

Mình sẽ nói sơ qua một chút về nguyên lí hoạt động của thèn này tí nha ^^.
Để hiển thị chi tiết(show detail) books thì chỉ có cách là lấy id của books đó rồi render ra các fields như: title, desc, author,...
Bắt đầu code thôi nào
Như các bạn đã biết thì trong phần 2 mình đã làm chức năng tạo books trong đó mình đã có tạo một thẻ liên kết a trước rồi. Mục đích là khi click vào đấy thì sẽ show detail books.
Khi các bạn vào trong views có file books/index.pug thì sẽ thấy một thẻ a được tạo sẵn rồi.

Cũng trong file books.routes.js ta sẽ tạo một router router.get('/:id,...), trong router này sẽ là nơi mà chúng ta dùng để show detail bằng cách sử dụng id của chúng.
Trước tiên ta sẽ dựa vào id của books để lấy data của books rồi render data đó ra thôi. Populate này giúp chúng ta tìm được tên tác giả thì cần phải truy vấn vào document của chúng, các bạn tìm hiểu thêm tại đây nha và đây nữa nha

// Show Details Books
router.get('/:id', async (req, res, next) => {
    try {
       // find data một books dựa vào id
        const book = await Book.findById(req.params.id).populate('author').exec();
        res.render('books/show', {
            book: book
        })
    } catch {
        res.redirect('/')
    }
})

Mình sẽ log ra data books khi click vào books để show detail để cho các bạn dễ hiểu nha

Giao Diện Hiển Thị Chi Tiết Trong Books

Trong views bạn tạo cho mình thư mục là books sẽ bao gồm 4 file index.pug, new.pug, show.pug, edit.pug.
Trước tiên các bạn nhớ extends layout vào nha sau đó chúng ta cần hiển thị những thông tin cần thiết của một books như: Cover image, title, author,... Khi chúng ta findById của books thì nó chỉ find một books có id mà nó đang tìm nên không cần phải lặp qua rồi hiển thị data. Các bạn để ý ở dưới thì sẽ thấy một thẻ a với tên là view author để khi click vào đấy nó sẽ đưa chúng ta đến trang show detail của author mà đã tạo books đấy.

Ở đây các bạn tạo hẳn luôn cho mình một thẻ div để bao bọc những chức năng như: view author, delete, edit books. Các bạn cũng biết mục đích của nó là làm gì rồi đấy, tạo luôn cho rồi tí nữa làm mấy phần dưới đỡ tốn thời gian =)))

books/show.pug

extends ../layouts/layout
block content
   .container

       ul
          li
            a(href="") 
              img(src=book.ImageUrl, width="250" height="280")
          li Title: 
            = book.title
          li Author: 
            = book.author.name  
          li Description: 
            = book.description
          li PageCount: 
            = book.pageCount
          li publishDate: 
            = book.publishDate.toDateString()
       div    
          a(href='/books/' + book.id +'/edit') Edit
          form(method="POST" action="/books/" + book.id + "?_method=DELETE")
               button(type='submit') Delete            
          a(href='/authors/' + book.author.id) View Author      

Và đây là kết quả khi chúng ta show detail books nha:

Định Nghĩa Router Cập Nhật Trong Books

Thì thèn cập nhật này cách làm nó cũng tựa tựa như tạo books thôi chỉ khác là thay vì sẽ tạo một cái mới thì ta sẽ lấy id của books đấy để mà edit lại thông tin mà mình đã tạo.
Để mà show detail được chúng ta phải dựa vào id của author, thì update books cũng tương tự vậy thôi nha.
Bắt đầu code thôi nào
Như các bạn đã thấy ở trên khi mình show detail books thì trong phần hiển thị chi tiết mình đã tạo một thẻ liên kết a với tên là edit để khi click vào đấy sẽ chuyển đến một trang edit books.

Trong thư mục routes có file books.routes.js các bạn tạo cho mình hai router update đó là router.get('/:id/edit',...) để render ra views và router.put('/:id',...) để cập nhật books nha. Trước mắt các bạn chỉ cần tạo và render ra views trước cho mình là được.

// Get Update Books
router.get('/:id/edit', async (req, res, next) => {
    try {
        const book = await Book.findById(req.params.id) // find một book trong DB dựa vào id của book đó
        const authors = await Author.find() // find data author trong DB
        
       // Truyền data authors, book vào views để có thể định nghĩa và render được nó ra trong view
        res.render('books/edit', {
            authors: authors, 
            book: book
        })
    } catch {
        res.redirect('/books')
    }
})

// Update Books
router.put('/:id', async (req, res, next) => {
  
})

Giao Diện Cập Nhật Trong Books

Trong views bạn tạo cho mình thư mục là books sẽ bao gồm 4 file index.pug, new.pug, show.pug, edit.pug.
Ở đây thì nói thật thì nó chả khác gì tạo books cả chỉ khác là action trong form nó sẽ thay đổi để phù hợp với chức năng mình đang sử dụng thôi nha.
Lưu ý: Các bạn để ý thì sẽ thấy các fields tạo và cập nhật books nó giống nhau đúng không nào, bây giờ các bạn tạo một file sẽ chứa các fields đó để khi cần bạn có thể tái sử dụng lại được nha.
books/edit.pug

extends ../layouts/layout
block content
   .container  

      h2 Edit Books
      form( action="/books/" + book.id + "?_method=PUT" method="POST"  enctype="multipart/form-data")
        div
          div
            label(for="name" ) Title
            input(placeholder="Title", type="text" name="title" value=book.title )
          div   
            label(for="author") Author
            select(name="author")
              each author in authors 
                if author.id === book.author
                  option(selected label=author.name, value=author.id)
                else
                  option( label=author.name, value=author.id)
        div
          div
            label(for="publish date") Publish Date
            input(type="date" name="publishDate" 
                        value= book.publishDate == null ? '' :
                        book.publishDate.toISOString().split('T')[0])

          div
            label(for="page count") Page Count 
            input(placeholder="Page Count",type="number" name="pageCount" min="1" value= book.pageCount )                
        div
          div
            label(for="coverImg") Image Cover
            input(type="file" name="ImageUrl" required)                
      
          div
          label(for="description") Description
          textarea(name="description", book.description )    
        div
            a(href="/books") Cancel
            button(type="submit") Update

Và đây là giao diện để cập nhật books:

Controller Cập Nhật Trong Books

Để có thể cập nhật được books và sử dụng được phương thức PUT ta cần sử dụng một middleware đó là method override.
Trong views có file books/edit.pug các bạn thêm cho mình đoạn mã này "?_method=PUT" vào trong action của form cái này mình đã thêm vào phần action phía trên rồi nha

Trong file books.routes.js ta có router.put('/:id',...) dùng để update books. Ở đây mình sẽ hông giải thích dài dòng nữa nha bởi vì tạo books như nào thì cập books như vậy thôi :))

// Update Books
router.put('/:id', upload.single('ImageUrl'), async (req, res, next) => {
    const result = await cloudinary.v2.uploader.upload(req.file.path)
    const authors = await Author.find()
    let book
    try {
        book = await Book.findById(req.params.id) // find một book dựa vào id và edit lại book
            book.title = req.body.title,
            book.author = req.body.author,
            book.publishDate = new Date(req.body.publishDate),
            book.pageCount = req.body.pageCount,
            book.description = req.body.description,
            book.ImageUrl = result.secure_url
        await book.save()

        res.redirect('/books')

    } catch {
        res.render('books/edit', {
            authors: authors,
            book: book,
            errorMessage: 'Error Updating Book'
        })
    }
})

Nếu mà có lỗi khi cập nhật books thì trong books/edit.pug các bạn thêm dòng code ở dưới vào phía sau thẻ h2 Edit Books để hiển thị thông báo lỗi nha.

    if locals.errorMessage
        = errorMessage

Và đây là kết quả khi chúng ta cập nhật books:

Định Nghĩa Và Controller Router Xóa Trong Books

Như các bạn đã thấy ở trên khi mình show detail thì trong phần hiển thị chi tiết mình đã tạo một form có chứa một button để xóa books

Cũng trong file books.routes.js ta có router.delete('/:id',...) dùng để xóa books. Xóa book với xóa author theo nguyên lí nó cũng không khác gì nhau nên mình sẽ không giải thích thêm nữa. Nó chỉ khác ở chỗ là khi xóa author thì books mà được author sẽ bị xóa, còn khi xóa books thì author nó vẫn hiển thị bình thường.

// Delete Books
router.delete('/:id', async (req, res, next) => {
    let book
    try {
        book = await Book.findById(req.params.id) // find một book dựa vào id
        await book.remove() // Xóa book trong DB
        res.redirect('/books')// chuyển hướng sang trang /books nếu xóa thành công
    } catch {      
          res.redirect(`/books/${book.id}`) 
    }
})

Trong views có file books/show.pug các bạn thêm cho mình đoạn mã này "?_method=DELETE" vào trong action của form cái này mình đã thêm vào phần action trong phần show detail ở phía trên rồi nha.
Và đây là kết quả khi chúng ta thực hiện xóa books nha:

Hiển Thị Trang HomePage

Định Nghĩa Và Controller Router Trang HomePage

Trong router có file index.routes.jsở đây các bạ tạo cho mình một router.get('/',...) để có thể get data và hiển thị ra trang homepage. Tại trang homepage này mục đích của nó chỉ là hiển thị books mà thôi.
Đầu tiên các bạn cần require model books vào trước nha, sau đó chúng ta sẽ find toàn bộ data books dựa vào thời gian tạo mà nó sẽ hiển thị ra trước hay là sau nha.

const Book = require("../models/books.model")

// Home page
router.get('/', async (req, res, next) => {
  let books
  try {
    // find books được sắp xếp theo thứ tự books nào tạo trước books nào tạo sau và chỉ giới hạn hiển thị 20 books thôi nha
    books = await Book.find().sort({createdAt: 'desc'}).limit(20).exec() 
  } catch {
    books = []
  }
  res.render('index', {
    books: books  // Truyền data books vào views để render ra dữ liệu
  });
})

Giao Diện Hiển Thị Trang HomePage

Trong views có file index.pug sẽ là nơi mà chúng sẽ code phần view cho trang homepage. Để hiển thị ra books thì cũng đơn giản thôi ta chỉ cần lặp qua chúng rồi render ra ảnh bìa kèm theo tiêu đề, sau khi lặp qua các books rồi thì ta cần tạo một thẻ liên kết a để khi click vào đấy sẽ show detail books là được nha.

extends layouts/layout
block content
   .container
      h2 Books Store 
      each book in books
        a(href='/books/' + book.id)
         img(src=book.ImageUrl, width="250" height="280")
         h3= book.title

Và đây là kết quả khi chúng ta hiển thị trang HomePage nha:

CSS Lại Giao Diện Cho Project

Trong public có file /stylesheets/style.css các bạn nhớ import link css vào trong project nha.
Riêng cái phần CSS này các bạn có thể sáng tạo theo sở thích của bản thân mình không nhất thiết phải làm giống mình nha.
Phần css này mình code khá ngắn mình tận dụng những class mà bootstrap hỗ trợ để style cho nó nha

Ở đây mình lưu ý một chút đó là các bạn sẽ thay thế những width và height trong các thẻ img dùng để hiển thị cover image bằng một class img-item nha. Để khi mình chia layout bằng bootstrap thì ảnh nó không bị vỡ nha.
Để biết thêm chi tiết mình chia layout như nào thì xem tại đây nha, mình cũng đã nói rồi riêng phần này các bạn có thể tự style theo sức sáng tạo của bản thân mình nha.
CSS Project

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

li {
    list-style: none;
}

a,
a:hover,
a:active,
a:visited,
a:focus {
    text-decoration: none;
}

label{
    font-weight: 700;
}

.h-30{
    height: 2rem;
}

/* Header */
.navbar {
    width: 100%;
}

.navbar-light .navbar-toggler {
    outline: none;
    border: none;
}

/* Content */
.title-h2 {
    text-align: center;
    font-weight: 700;
    margin-bottom: 2rem;
}

.item-wrapper:hover {
    box-shadow: 0px 0px 10px #444444;
}

.item-text {
    padding: .8rem 0;
    color: #333333;
    font-size: 1.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
    text-align: center;
}

.item-text:hover {
    color: #337ab7;
}

.img-item {
    width: 100%;
    height: 280px;
}

.form-control,
.btn {
    border-radius: inherit;
}

Và đây là kết quả khi chúng style lại toàn bộ giao diện cho project nha:

Deploy Project Lên Heroku

Để mà deploy được một project lên heroku thì các bạn đọc một topic mà mình đã từng viết để hướng dẫn tại đây nha

Gợi Ý Hướng Phát Triển Project

• Tạo một folder sẽ lấy nới chứa các file có source code lặp đi lặp lại nhiều lần
  VD: Như form tạo books/author và thông báo lỗi thì sẽ tạo cho nó một file riêng, nếu muốn dùng thì chỉ cần include vào là được tìm hiểu thêm tại đây nha
• Phát triển thành một trang ebook chẳng hạn khi click show detail book thì sẽ xuất hiển tác giả giới thiệu và sẽ có một cái nút nào đó khi click vào đấy sẽ mở một file PDF chẳng hạn,... Các bạn cần tạo cho mình một trang Admin và xác thực, phân quyền cho nó chỉ có bạn mới được vào để đăng sách, ở đây mình không cần yêu cầu user login hay làm gì cả. Hoặc các bạn có thể phát một nền tảng chia sẻ Ebook có thể cho người dùng đăng ebook lên và mình sẽ kiểm diệt ebook đăng lên,...
• Phát triển thành một trang web bán sách, phát triển thêm các chức năng đăng nhập đăng ký để khi user muốn mua hàng thì cần phải login vào mới mua được mình có viết một bằng hướng dẫn sử dụng jwt để làm hai chức năng trên bạn có thể tham khảo tại đây nha
• Phát triển thành một trang TMĐT mình sẽ cho phép người bán đăng sách lên bán. Mình sẽ là nơi trung gian để kiểm soát kiểm diệt sách đươc đăng lên bán và người mua. Chúng ta cần phân quyền ra ví dụ mình là nơi trung gian thì sẽ Admin có những chức năng như: diệt sách cần bán, xóa sách vi phạm bản quyền...Còn người bán sẽ có chức năng của seller như đăng bài, xóa bài của shop mình,.. Còn người mua thì chỉ có việc mua sách và đánh giá sách,.v.v.

Vậy Là Xong Rồi Nha Vui Quá =)))
Kết thúc một series về project này nha vã thật sự, các bạn có thể tham khảo code mà mình đã push lên github tại đây nha.

Lời Kết

Vậy là xong bài Hướng Dẫn Xây Dựng Books Store Với NodeJS, Express và MongoDB - Phần 4 cũng là phần cuối rồi nhé. Mình mong muốn sau khi các bạn hoàn thành xong project này sẽ hiểu và nắm rõ hơn về nodejs, express và mongodb nói riêng và lập trình nói chúng. Các bạn có thể dựa vào project này để có thể phát triển và scale project này lớn hơn nữa nha.
Các bạn nhớ like và theo dõi fanpage Thanh Long Dev để nhận những thông báo về bài viết mới nhất nha.
Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.
Chúc Các Bạn Thành Công!!

Chức Năng Hiển Thị Chi Tiết, Cập Nhật Và Xóa Author

Định Nghĩa Router Hiển Thị Chi Tiết Trong Author

Mình sẽ nói sơ qua một chút về nguyên lí hoạt động của thèn này tí nha ^^.
Để hiển thị chi tiết(show detail) author thì chỉ có cách là lấy id của author đó rồi render ra tên của author và books mà author đó đã tạo.
Thì cách hoạt động nó chỉ có vậy thôi =))
Bắt đầu code thôi nào
Trước tiên trong views có file authors/index.pug các bạn thêm cho mình dòng code này.
Đoạn code này là một thẻ liên kết a có chứa id của author mình click vao View nha.

   div
        a(href='/authors/' + author.id) View 

vào phía sau thẻ h4= author.name mà phần 1 mình đã tạo nha. Mục đích là tạo một thẻ a khi click vào đấy thì sẽ show detail author.

Controller Hiển Thị Chi Tiết Trong Author

Cũng trong file author.routes.js ta sẽ tạo một router router.get('/:id,...), trong router này sẽ là nơi mà chúng ta dùng để show detail bằng cách sử dụng id của chúng.
Trước tiên ta sẽ dựa vào id của author để lấy data của author đó ra gồm có name,... Cũng từ author đó thì ta sẽ lấy được books mà author đã tạo.

// Show Details Author
router.get('/:id', async (req, res, next) => {
  try {
    const author = await Author.findById(req.params.id) // find một author dựa vào id
    
   const booksByAuthor = await Book.find({ author: author.id }).limit(6).exec() 
   // find tất cả các book mà có author là id của author được tìm ở trên và giới hạn chỉ lấy 6 books.
    
    // Truyền data author và booksByAuthor vào trong views
    res.render('authors/show',
      {
        author: author,
        booksByAuthor: booksByAuthor
      })
  } catch{
    res.redirect('/')
  }
})

Mình sẽ thử log ra data của author và booksByAuthor cho các bạn dễ hình dung hơn nha:

Giao Diện Hiển Thị Chi Tiết Trong Author

Trong views bạn tạo cho mình thư mục là authors sẽ bao gồm 4 file index.pug, new.pug, show.pug, edit.pug.
Trước tiên các bạn nhớ extends layout vào nha sau đó chúng ta cần hiển thị tên author, nếu tác giả đó có tạo books thì ta sẽ lặp qua rồi hiển thị các thông tin của books đó và ngược lại ta sẽ hiển thị một thông báo với đoạn text "No books by author".
Câu hỏi ở đây là tại sao author ta không lặp mà books của author ta lại lặp qua? Thì đơn giản thôi khi chúng ta findById của author thì nó chỉ find một author có id mà nó đang tìm. Còn find books thì nó sẽ hiển thị toàn bộ sách mà author đã tạo để render ra views.
authors/show.pug

extends ../layouts/layout

block content
  div.container  
    h3='Author: '+ author.name
        
    if booksByAuthor.length > 0
        h2 Books By Author
        each book in booksByAuthor
            a(href='/books/' + book.id)
                img(src=book.ImageUrl, width="250" height="280")
                h3= book.title
    else
       h2 No books by author        

Và đây là kết quả khi chúng ta show detail authors nha:

Định Nghĩa Router Cập Nhật Trong Author

Thì thèn cập nhật này cách làm nó cũng tựa tựa như tạo author thôi chỉ khác là thay vì sẽ tạo một cái mới thì ta sẽ lấy id của author đó để edit lại tên author mà mình đã tạo.
Để mà show detail được chúng ta phải dựa vào id của author, thì update author cũng tương tự vậy thôi nha.
Bắt đầu code thôi nào
Trước tiên trong views có file authors/index.pug các bạn thêm cho mình dòng code này.
Đoạn code này là một thẻ liên kết a có chứa id của author khi mình click sẽ vào trang edit author nha.

   a(href='/authors/' + author.id + '/edit') Edit

vào phía sau thẻ a(href='/authors/' + author.id) View mà ở trên mình đã tạo nha.

Cũng tương tự như ở trên trong views có file authors/show.pug các bạn thêm cho mình dòng code này nha.

   div
      a(href='/authors/'+author.id +'/edit') Edit

vào phía sau thẻ h2='Author: '+ author.name mà ở trên mình đã tạo nha.

Trong thư mục routes có file author.routes.js các bạn tạo cho mình hai router update đó là router.get('/:id/edit',...) để render ra views và router.put('/:id',...) để cập nhật author nha. Trước mắt các bạn chỉ cần tạo và render ra views trước cho mình là được.

// Get Update Author
router.get('/:id/edit', async (req, res, next) => {
  try {
    const author = await Author.findById(req.params.id) // find ra một author dựa vào id
    res.render('authors/edit', { author: author }) // Truyền data vào trong views
  } catch{
    res.redirect('/authors')
  }
})
  
// Update Author  
router.put('/:id', async (req, res, next) => {
   
 });

Giao Diện Cập Nhật Trong Author

Trong views bạn tạo cho mình thư mục là authors sẽ bao gồm 4 file index.pug, new.pug, show.pug, edit.pug.
Trước tiên các bạn nhớ extends layout và tạo cho mình một cái form giống như tạo author nhưng các bạn phải thay đổi lại đường dẫn action nha.
authors/edit.pug

block content
  .container
    h2 Edit Author
    form(method="POST" action="/authors/" + author.id)
      label(for="name") Name
      input(placeholder="Name", type="text" name="name" value=author.name)
      div
       a(href="/authors/" + author.id) Cancel
       button(type="submit") Update

Và đây là giao diện để cập nhật author:

Controller Cập Nhật Trong Author

Để có thể cập nhật được author và sử dụng được phương thức PUT ta cần sử dụng một middleware đó là method override.
Module method override này mình đã khai báo và kích hoạt trong file app.js ở phần 1 rồi nha.
Vì biểu mẫu html nó chỉ hỗ trợ hai phương thức là GET và POST mà thôi, nên để có thể sử dụng được phương thức PUT thì ta cần phải ghi đè chúng.

Trong views có file authors/edit.pug các bạn thêm cho mình đoạn mã này "?_method=PUT" vào trong action của form giúp mình với nha.
Phương thức Put ghi đè lên phương thức Post
form(method="POST" action="/authors/" + author.id + "?_method=PUT")

Kiểm tra tên của author khi được cập nhật
Thì phần này nó cũng giống như tạo books ở phần 1, ta sẽ check xem tên cập nhật có trùng với tên mà author đã tạo từ trước nếu trùng thì sẽ hiển thị thông báo.
Bởi vì tên tác giả của một cuốn sách nào đó thì rất hiếm khi trùng nhau có thể nói là không có, còn tên người mà trùng nhau là chuyện bình thường.

Trong file authors.routes.js ta có router.put('/:id',...) dùng để update author.

// Update Author

router.put('/:id', async (req, res, next) => {
  let author
  
  author = await Author.findById(req.params.id)// Tìm một author dựa vào id

  // Kiểm tra name author có tồn tại hay không
  const nameAuthor = await Author.findOne({ // Tìm một tên author trong DB với tên được cập nhật
    name: req.body.name
  });
    // Nếu tìm được tên trùng nhau sẽ render ra mess
  if (nameAuthor) {
    return res.render('authors/edit', {
      author: author,
      errorMessage: 'Author Already Exists'
    })
  }
  
  try {
    author.name = req.body.name  // Cập nhật tên của author đó
    await author.save(); // Lưu tên đã được cập nhật vào DB
    res.redirect(`/authors/${author.id}`)  // Chuyển trang show detail nếu cập nhật thành công

  } catch{
    // Ngược lại, nếu cập nhật thất bại thì sẽ thông báo lỗi
    if (author == null) {  
      res.redirect('/')
    } else {
      res.render('authors/edit', {
        author: author,
        errorMessage: 'Error Updating Author'
      })
    }
  }
})

Nếu mà có lỗi khi cập nhật author thì trong authors/edit.pug các bạn thêm dòng code ở dưới vào phía thẻ h2 Edit Author để hiển thị thông báo lỗi nha.

    if locals.errorMessage
        = errorMessage

Và đây là kết quả khi chúng ta cập nhật author:

Định Nghĩa Router Xóa Trong Author

Trước tiên trong views có file authors/index.pug các bạn thêm cho mình dòng code này.
Đoạn code này là một thẻ liên kết a có chứa id của author khi mình click sẽ xóa author nha.

 form(method="POST" action="/authors/" + author.id )
           button(type='submit') Delete

vào phía sau thẻ a(href='/authors/' + author.id + '/edit') Edit mà ở trên mình đã tạo nha.

Cũng tương tự như ở trên trong views có file authors/show.pug các bạn thêm cho mình dòng code này nha.

form(method="POST" action="/authors/" + author.id )
              button(type='submit') Delete      

vào phía sau thẻ a(href='/authors/'+author.id +'/edit') Edit mà ở trên mình đã tạo nha.

Controller Xóa Author

Cũng trong file authors.routes.js ta có router.delete('/:id',...) dùng để xóa author.

// Delete Author
router.delete('/:id', async (req, res, next) => {
 let author
  try {
   author = await Author.findById(req.params.id)// find id author cần xóa
    await author.remove() // Xóa author
    res.redirect('/authors') // Chuyển hướng sang trang /authors nếu xóa được
  } catch{

    res.redirect(`/authors/${author.id}`)

  }
})

Để xóa được author thì cũng giống như cập nhật author nên mình sẽ không giải thích gì nhiều nữa. Muốn sử dụng được phương thức Delete ta cần sử dụng một middleware đó là method override.

Trong views có file authors/index.pug và authors/show.pug các bạn thêm cho mình đoạn mã này "?_method=DELETE" vào trong action của form giúp mình với nha.
Phương thức Delete ghi đè lên phương thức Post
form(method="POST" action="/authors/" + author.id + "?_method=DELETE")

Nhưng chờ chút còn một vấn đề nữa, chưa xong mô nạ :))
Có một vấn đề như này nếu như mà xóa theo cách trên í thì chỉ xóa author mà thôi còn books mà author tạo sẽ không bị xóa. Bởi vậy nên khi chúng ta xóa author thì cần phải xóa luôn books mà author đó đã tạo đúng không nào, mình đã có cách giải quyết chúng hehehe.

Để khi xóa author thì books cũng được xóa luôn ta cần sử dụng một middleware mà mongoose cung cấp đó là Pre.
Pre middleware này sẽ thực hiện một method xóa trước một hành động xóa xảy ra, có nghĩa là nó xóa books trước khi xóa author nói như vậy cho nó dễ hiểu nha. Còn sử dụng trong trường hợp nào thì các bạn tìm hiểu thêm tại đây nha.
Trong models có file author.model.js đây là nơi chứa các schema của author. Trước tiên bạn cần require cho mình model Book và sau đó gọi pre middleware function.
Khi bạn gọi next() thì nó sẽ được chuyển sang middleware tiếp theo nhưng mà vẫn chạy câu lệnh bên dưới middleware hiện tại.
Những trường hợp nào mà bạn sử dụng dụng Pre

const Book = require('../models/books.model')

authorSchema.pre('remove', function(next) {
    // Sẽ tìm những books có id author mà bạn xóa
    Book.find({author: this.id}, (err, books) => {
        if (err) {
            next (err)
        } else if (books.length > 0) { // Nếu author đó có tạo books thì sẽ xóa toàn bộ books
            books.forEach(book => book.remove())
            next()
        } else {
            next()
        }
    })
})

Và đây là kết quả khi chúng ta thực hiện xóa author nha:

Vậy là kết thúc phần 3 rồi nha mời các bạn xem tiếp phần 4
To Be Continued !!

Lời Kết

Vậy là xong bài Hướng Dẫn Xây Dựng Books Store Với NodeJS, Express và MongoDB - Phần 3 rồi nhé. Các bạn xem phần tiếp theo nha mình chia thành nhiều phần ra để các bạn có thể đọc và làm một cách dễ dàng hơn rành mạch và dễ hiểu hơn.
Các bạn nhớ like và theo dõi fanpage Thanh Long Dev để nhận những thông báo về bài viết mới nhất nha.
Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.
Chúc Các Bạn Thành Công!!

Chức Năng Hiển Thị Và Tạo Mới Books

Định Nghĩa Router Tạo Mới Trong Books

Trong thư mục routes có file books.routes.js thì trong này sẽ là nơi chứa toàn bộ các source liên quan đến books.
Trước tiên các bạn tạo cho mình router create books trước đã nha, trong router này nó sẽ bao gồm 2 router đó là router.get('/new') và router.post('/'). Router.get nó thực hiện nhiệm vụ get data và render ra views trả về phía client còn router.post sẽ gửi dữ liệu của books lên server. Các bạn chỉ cần tạo và render ra views trước cho mình đã nha và require model author vào nha model này là mình đã định nghĩa trước đó rồi nha. Mình cũng nói sơ qua một chút là trong books này mình sẽ tạo các fields như: title, description, author, cover image, page count, publishDate.
Đấy các bạn xem bức hình ở dưới thì sẽ hiểu rõ hơn nha, bức hình đấy mình chỉ mô tả sơ qua thôi nha.

const express = require("express") 
const router = express.Router()
const Author = require("../models/author.model") 

   router.get('/new', async (req, res, next) => {
    try {
        const authors = await Author.find()// find author với mục đích là để tạo books bao gồm việc chọn author trong tạo books
        const book = new Book()// Tạo một object rỗng để có thể truyền data và render

        res.render('books/new', {
            authors: authors,
            book: book
        })
    } catch{
        res.redirect('/books')
    }
   });
    
    
    // Create New Books
    router.post('/', async (req, res) => {
    ....... 
    ....... 
    ); 

Giao Diện Tạo Mới Trong Books

Trong views bạn tạo cho mình thư mục là books sẽ bao gồm 4 file index.pug, new.pug, show.pug, edit.pug.
Trước tiên các bạn nhớ extends layout vào nha và tạo cho mình một form sẽ chứa các fields mà mình đã nói ở trên nha.
books/new.pug

extends ../layouts/layout
block content
  .container
    h2 New Books
    form(action="/books" method="POST")
     div
      div
        label(for="name" ) Title
        input(placeholder="Title", type="text" name="title" value=book.title )
      div   
        label(for="author") Author
        select(name="author")
          each author in authors 
            if author.id === book.author
              option(selected label=author.name, value=author.id)
            else
              option( label=author.name, value=author.id)
     div
      div
        label(for="publish date") Publish Date
        input(type="date" name="publishDate" 
                    value= book.publishDate == null ? '' :
                    book.publishDate.toISOString().split('T')[0]) // Cái này mình sử dụng toán tử 3 ngôi nha, Nếu publishDate không có giá trị(true) thì nó sẽ có dạng một empty string và ngược lại

      div
        label(for="page count") Page Count 
        input(placeholder="Page Count",type="number" name="pageCount" min="1" value= book.pageCount )                
     div
      div
        label(for="coverImg") Image Cover
        input(type="file" name="ImageUrl" required)                
  
      div
       label(for="description") Description
       textarea(name="description", book.description )    
     div
            a(href="/books") Cancel
            button(type="submit") Create

Và đây là giao diện khi căn bản khi chúng ta tạo books

Định Nghĩa Các Schema Books Cho Mongoose

Như các bạn đã đọc ở trên thì cấu trúc thư mục cho dự án bên trong thư mục src các bạn tạo cho mình thư mục models, bên trong thư mục models các bạn tạo cho mình file books.model.js. Trong file books.model.js cần tạo một đối tượng book và sẽ chứa các fields như title, description, publishDate, pageCount, createdAT, ImageUrl, author của books.
Ref là một option trong mongoose có thể hiểu là nó sẽ liên kết với một model nào đó.
CreatedAT và publishDate nó khác nhau ở chỗ là publishDate sẽ trả về date mà bạn đã chọn còn createdAT nó sẽ trả về đúng ngày đúng thời gian mà mình đã tạo books.

const mongoose = require('mongoose');

const bookSchema = new mongoose.Schema({
    title:{type: String, required:true},
    description:{type: String, required:true},
    publishDate:{type: Date, required:true},
    pageCount:{type: Number, required:true},
    createdAT:{type: Date, required:true, default: Date.now},
    ImageUrl:{type:String, required:true},
    author:{type:mongoose.Schema.Types.ObjectId, required:true, ref:'Author'}
})


module.exports = mongoose.model('Book', bookSchema)

Tham số thứ nhất là tên riêng cho collection sắp được tạo ra cho mô hình của bạn, và tham số thứ hai là schema mà bạn muốn dùng để tạo ra mô hình.

Controller Tạo Mới Trong Books

Cũng trong file books.routes.js ta có router.post('/',..) dùng để tạo books. Các bạn nhớ require model của book mà mình đã tạo vào nha.
Nó sẽ tạo một object rộng chứa dữ liệu book được truyền vào. Rồi lưu dữ liệu vào database đã được khởi tạo.
Chúng ta sử dụng try{} catch{} nên khi có lỗi thì sẽ render ra lỗi khi tạo book.

const Book = require("../models/books.model") 

// Create New Books
router.post('/', async (req, res) => {
    const authors = await Author.find()
    const book = new Book({
        title: req.body.title,
        author: req.body.author,
        publishDate: new Date(req.body.publishDate),
        pageCount: req.body.pageCount,
        description: req.body.description,
    })
    try {
        const newBook = await book.save()
         res.redirect('/books')
    } catch{
        res.render('books/new', {
            authors: authors,
            book: book,
            errorMessage: 'Error Creating Book'
        })
    }
});

Khi mình tạo book thành công thì lưu vào DB và redirect sang trang books, bây giờ trong router.get('/',..) các bạn res.send một tin nhắn gì đấy khi tạo books thành công chẳng hạn.

router.get('/', async (req, res, next) => {
    res.send('All books') 
  }) 

Nếu mà có lỗi khi tạo book thì trong books/new.pug các bạn thêm dòng code ở dưới vào phía sau thẻ h2 New Books là được nha.

        if locals.errorMessage 
             = errorMessage 

Đừng vội mừng chưa xong mô nạ :)))
Khi các bạn tạo books xong rồi mới nhớ lại là Cover image mình chưa có thì lấy đâu ra ảnh mà hiển thị cho books đây. Các bạn cứ yên tâm mình đã có cách =))

Upload File Sử Dụng Cloudinary

Mình sẽ sử dụng kết hợp multer + cloudinary để thực hiện việc upload ảnh cho books Các bạn xem ảnh ở dưới để biết thêm về nguyên lí hoạt động nha:

Client(user) upload file(ảnh) thì file(ảnh) được gửi lên server(multer). Sau đó server sẽ upload file(ảnh) lên cloudinary và cloudinary sẽ trả về một url của file(ảnh) đấy rồi được lưu vào DB. Từ đó ta chỉ cần get url của image trong DB rồi render ra phía client.
Đầu tiên các bạn nên chỉnh sửa trong views trước đã nha, trong phần views của books/new.pug các bạn thêm enctype="multipart/form-data" vào trong form nha form(action="/books" method="POST" enctype="multipart/form-data"), bởi vì multer nó chỉ xử lý biểu mẫu nào liên quan đến multipart/form-data

Tiếp theo như các bạn để ý ở trong phần cấu trúc thư mục có folder handlers trong folder này sẽ chứa file upload.multer.js. Trong file này là nơi mà chúng ta dùng để code phần multer cho việc upload file(ảnh).

const multer = require('multer') // khai báo multer

module.exports = multer({
  storage: multer.diskStorage({}),
  fileFilter: (req, file, cb) => { // filFilter nó sẽ kiểm soát việc file nào nên tải lên và file nào không 
    if (!file.mimetype.match(/jpe|jpeg|png|gif$i/)) { // Nếu không đúng loại file ảnh thì sẽ không cho upload file và ngược lại 
      cb(new Error('File is not supported'), false)
      return
    }

    cb(null, true)
  }
})

Trong file books.routes.js thì trước tiên các bạn nhớ khai báo file upload.multer.js và module cloudinary.

const cloudinary = require('cloudinary') 
const upload = require('../handlers/upload.multer') 

Setup Cloudinary

Trước tiên các bạn vào website cloudinary tại đây để đăng ký tài khoản, sau khi đăng ký xong thì login thành công sẽ được vào trang dashboard của cloudinary.
Tại đây các bạn chú ý cho mình phần Account Details sẽ là nơi chứa các thông số mà bạn dùng để có thể sử dụng để upload ảnh lên cloudinary.

Bây giờ cũng trong file books.routes.js các bạn cấu hình cloudinary vào nha. CLOUD_NAME, API_ID(API Key) và API_SECRET là các thông số mật nên chúng ta cần lưu ở biến môi trường nha .env để nó có tính bảo mật.

// Setup Cloudinary
cloudinary.config({
    cloud_name: process.env.CLOUD_NAME,
    api_key: process.env.API_ID,
    api_secret: process.env.API_SECRET
})

Trong router.post('/',...) các bạn chỉ cần khởi tạo middleware upload file với cấu hình như trên. Sau khi xác định các thông số cấu hình Cloudinary thì bây giờ việc upload lên cloudinary khá đơn giản, nếu các bạn muốn biết thêm về phần upload thì xem tại đây nha.
Khi upload lên cloudinary thành công thì url image sẽ được lưu vào DB với key là ImageUrl đã được cấu hình sẵn.

  // Create New Books
   router.post('/', upload.single('ImageUrl'), async (req, res) => { 
        const result = await cloudinary.v2.uploader.upload(req.file.path) 
        const book = new Book({ 
            ...........
            ...........
            ...........
            ImageUrl: result.secure_url 
        }) 
        ........
        ........
        ........ 
     }); 

Vậy là xong phần upload file cũng như xong phần tạo books rồi nha
Cùng xem kết quả nào:

Và đây là hình ảnh sau khi được upload lên cloudinary và được lưu vào DB

Định Nghĩa Và Controller Router Hiển Thị Trong Books

Trong thư mục routes có file books.routes.js thì trong này sẽ là nơi chứa toàn bộ các source code liên quan đến books.
Chúng ta tạo router.get('/') đây chính là router của trang books, mục đích của trang này là tìm kiếm và hiển thị books.

Cách làm chức năng tìm kiếm và hiển thị của thèn books này cũng không khác thèn author cho lắm chỉ khác là mình sẽ có thêm chức năng tìm kiếm theo ngày xuất bản sau và ngày xuất bản trước mà thôi.
Thì trước tiên các bạn viết cho mình hàm try{}catch{}, trong try{} là nơi mà ta sẽ find Book trong DB và render ra author còn catch{} sẽ redirect sang trang homepage nếu có lỗi xảy ra. Có .exec () hay không có thì về mặt chức năng hai cái này tương đương nhau các bạn có thể xem thêm tại đây nha.

Bây giờ mình sẽ giới thiệu cho các bạn về hai thèn đó là publishedAfter và publishedBefore là như nào.
publishedAfter có nghĩa là xuất bản sau bởi vậy nên chúng ta sẽ sử dụng gte là một toán tử truy vấn, gte có nghĩa là lớn hơn hoặc bằng.
publishedBefore có nghĩa là xuất bản trước bởi vậy nên chúng ta sẽ sử dụng lte là một toán tử truy vấn, lte có nghĩa là nhỏ hơn hoặc bằng.

VD: Bây giờ bạn publish books vào ngày 28 khi tìm kiếm bạn chọn publishedAfter là ngày 27 và publishedBefore là ngày 29. Thì có phải là publishedAfter ta sử dụng gte thì nó sẽ trả về các ngày 27,28,29,30... Còn publishedBefore ta sử dụng lte thì nó sẽ trả về các ngày 29,28,27,26... Cái này giống bài toán liệt kê bây giờ chúng ta chỉ cần lấy giao của 2 thèn thôi =))).
Vì vậy nên khi tìm kiếm thì sẽ hiển thị kết quả từ ngày 27->29 các bạn tìm hiểu thêm tại đây nha.

// GET Books Page
router.get('/', async (req, res, next) => {
    let query = Book.find()

    if (req.query.title != null && req.query.title != '') {
        query = query.regex('title', new RegExp(req.query.title, 'i'))
    }
    if (req.query.publishedAfter != null && req.query.publishedAfter != '') {
        query = query.gte('publishDate', req.query.publishedAfter)
    }
    if (req.query.publishedBefore != null && req.query.publishedBefore != '') {
        query = query.lte('publishDate', req.query.publishedBefore)
    }

    try {
        const books = await query.exec()
        res.render('books/index', {
            books: books,
            searchOptions: req.query
        })
    } catch{
        res.redirect('/')
    }
});

Giao Diện Hiển Thị Trong Books

Trong views bạn tạo cho mình thư mục là books sẽ bao gồm 4 file index.pug, new.pug, show.pug, edit.pug.
Trước tiên các bạn extends layout vào nha và lặp qua các books để hiển thị ra cover image và title của books, nhớ bọc ở ngoài là một thẻ a nha các bạn đừng quan tâm cái books id đó vội nha chỉ cần biết là nó sẽ làm chức năng show detail là được rồi. Tạo một form để làm ô tìm kiếm cho author với method="GET" nha.
SearchOptions này là một object do mình đã định nghĩa req.query ở trên bây giờ muốn lấy value thì ta cần .title, .publishedAfter và .publishedBefore để có thể lấy được value của chúng.
books/index.pug

extends ../layouts/layout

block content
  .container
    h2 Search Books
    form(action="/books" method="GET")
      div 
       label(for="title") Title 
       input(placeholder="Title Book",type="text" name="title" value=searchOptions.title)
      div
       div
        label(for="published-after") Published After 
        input( type="date" name="publishedAfter" value=searchOptions.publishedAfter)
       div
        label(for="published-before") Published Before 
        input(type="date" name="publishedBefore" value=searchOptions.publishedBefore)
      div
        button(type="submit") Search
    div
      each book in books
         a(href='/books/' + book.id)
           img(src=book.ImageUrl, width="250" height="280")
           h3= book.title

Lưu ý: Mình có cập nhật lại code tại một số chỗ nên khi bạn thấy trên ảnh gif sẽ không được chính xác cho lắm nha.
Và đây là kết quả khi chúng ta hiển thị và tìm kiếm books nha:

Vậy là kết thúc phần 2 rồi nha mời các bạn xem tiếp phần 3
To Be Continued !!

Lời Kết

Vậy là xong bài Hướng Dẫn Xây Dựng Books Store Với NodeJS, Express và MongoDB - Phần 2 rồi nhé. Các bạn xem phần tiếp theo nha mình chia thành nhiều phần ra để các bạn có thể đọc và làm một cách dễ dàng hơn rành mạch và dễ hiểu hơn.
Các bạn nhớ like và theo dõi fanpage Thanh Long Dev để nhận những thông báo về bài viết mới nhất nha.
Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.
Chúc Các Bạn Thành Công!!

Giới Thiệu Chung

Hôm nay mình sẽ hướng dẫn các bạn xây dựng một project books store với NodeJS, Express và MongoDB.
Mục đích của bài này là mình mong muốn giúp các bạn nắm và ôn lại các kiến thức mà mình được học thông qua các project căn bản.
Mình sẽ viết một cách tận tình và chu đáo mong các bạn xem đầy đủ và kỹ càng. Thế là mình vui lắm rồi =))

Bắt Đầu Làm Thôi Nào

Lên Ý Tưởng

Thì ý tưởng của bài này cũng dựa theo các phương thức Rest để mà làm thôi đó là Get, Post, Put và Delete,... vừa giúp các bạn học thêm cũng như ôn lại các kiến thức mình được học.
Books Store gồm hai phần chính đó là books và author.
Project của chúng ta sẽ gồm các chức năng như sau: tạo/xem/sửa/xóa/tìm kiếm,.. books và author.
Và để biết nó được làm như thế nào thì các bạn cùng xem tiếp phía dưới nha :))

Cài Đặt Và Thiết Lập

Trước tiên các bạn tạo cho mình một folder trong folder đó là nơi chứa các thư mục dùng để mình code project library books.
Để mà cài các module trước hết các bạn phải cài đặt NodeJS tại đây.
Khởi tạo ứng dụng với file package.json
Trong thư mục gốc của ứng dụng của bạn và nhập npm init để khởi tạo ứng dụng của bạn với tệp package.json.
npm init
Sau đó các bạn cài đặt các module ở dưới để thiết lập ứng dụng nha.

• npm install express --save
  Module dùng để cài đặt framework express của nodejs giúp các bạn code một cách tối giản cũng như nhanh chóng hơn.
• npm install body-parse --save
  Body-parser là một middleware dùng để xử lý dữ liệu các HTTP POST request
• npm install pug --save
  Pug nó chỉ là một template engine mà thôi.
• npm install cloudinary --save
  Cloudinary là một dịch vụ đám mây cung cấp giải pháp cho toàn bộ quy trình quản lý hình ảnh của ứng dụng web.
• npm install multer --save
  Multer là một middleware xử lý các dữ liệu multipart/form-data chủ yếu là xử lý tệp thôi.
• npm install method-override --save
  Khi chúng ta sử dụng phương thức PUT và DELETE trong HTML thì gặp sự cố. Các trình duyệt hỗ trợ PUT và DELETE nhưng nó chỉ bằng cách sử dụng yêu cầu qua AJAX, chứ không phải thông qua gửi 'biểu mẫu HTML'.
  Đó cũng là lý do tại sao chúng ta lại sử dụng method-override một middleware để 'ghi đè phương thức' để giải quyết vấn đề này.
  Nếu các bạn muốn hiểu rõ hơn thì tìm hiểu thêm tại đây nha.
• npm install nodemon --save
  Tự động reload lại server khi bạn thay đổi code. Để khởi chạy server các bạn thêm "dev": "nodemon src/app.js" vào file** package.json** nha. Các bạn mở terminal lên sau đó gõ npm run dev để khởi chạy server nha.
• npm install mongoose --save
  Mongoose là một Object Document Mapper (ODM). Điều này có nghĩa là Mongoose cho phép bạn định nghĩa các object (đối tượng) với một schema được định nghĩa rõ ràng.
• npm install dotenv --save
  Dotenv là một biến môi trường dùng để bảo mật các thông tin quan trọng như username, password, url database,...Nếu chúng ta không lưu những thông tin mật vào file .env thì khi push source code lên github thì ai cũng có thể vào xem được và ai cũng biết username, password thì sẽ bị người khác chiếm đoạt và đánh cắp tài liệu rất là nguy hiểm nha.
  Và đây cũng là các package mà mình khi đã cài đặt cũng như cấu hình xong.

Cấu Trúc Thư Mục Cho Dự Án

Sau khi hoàn thành việc cài đặt module các bạn tạo cho mình một thư mục src, thư mục này dùng để chứa tất cả các file trong quá trình mình code project.

Lưu ý: Mình khuyên các bạn nên tạo thêm một folder controllers và file để chứa các logic khi mình code nha. Do mình code để làm demo cho mọi người nên mình viết chung vào thằng routes luôn.

Bắt Đầu Code Thôi Nào

Thiết Lập Web Server

Trong thư mục gốc các bạn tạo cho mình file app.js, file này là file chính dùng để điều khiển mọi hoạt động chính của server.
Trong file này các bạn cần import và enable các router homepage, authors và books vào nha.
Và cũng khai báo và enable luôn method-override và body-parser vào luôn nha.

const express = require("express")
const app = express()
const bodyParser = require('body-parser')
const methodOverride = require('method-override')
const port = 4444

// Import routes
const IndexRouter = require("../src/routes/index.routes")
const BookRouter = require("../src/routes/books.routes")
const AuthorRouter = require("../src/routes/author.routes")

// view engine setup
app.set('view engine', 'pug');
app.set('views', 'src/views');

// Enable Static file
app.use(express.static('src/public'))

// Enable Method Override
app.use(methodOverride('_method'));

// Enable Body Parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ limit:'10mb' ,extended: false }));  

// Enable Routes
app.use('/', IndexRouter)
app.use('/books', BookRouter)
app.use('/authors', AuthorRouter)

app.listen(port, () => {
    console.log(`Server listening ${port}`)
})

Trong thư mục routes có file index.routes.js, các bạn tạo cho nó một Route handlers và thử chạy sever xem sau. Mục đích để các bạn test xem server có chạy không nha.

router.get('/', (req, res, next) => {
   res.send('Hello Everyone')
})

Thiết Lập Database

Để mà có thể thiết lập được database thì các bạn đăng nhập tài khoản mongodb atlas tại đây nha. Sau khi các bạn bạn đã có tài khoản mongodb atlas thì tiếp đến cài đặt cấu hình để có thể kết nối mongodb atlas với ứng dụng của chúng ta. Để biết thêm chi tiết các bạn xem bước 3 trong bài viết của mình hướng dẫn deploy project nodejs lên heroku tại đây nha.
Sau đó các bạn copy link database mongodb đã tạo rồi paste vào project của mình là được nha. Các bạn tạo cho mình một file .env bên trong thư mục gốc.
Trong file này các bạn tạo một đường dẫn là DATABASE_URL=mongodb+srv://long:<password>@cluster0-b7d8c.mongodb.net/test?retryWrites=true&w=majority
Trong file app.js các bạn khai báo module dotenv với module mongoose và tạo đường dẫn mongodb.

// Khai báo dotenv
require('dotenv').config()

// Khai báo mongoose
var mongoose = require('mongoose')

// Connect database
 mongoose.connect(process.env.DATABASE_URL,{useUnifiedTopology: true,
   useNewUrlParser: true, })
 const db = mongoose.connection
  db.on('error', error => console.error(error))
  db.once('open', () => console.log('Connected to Database'))

Để biết nó đã kết nối hay chưa các bạn khởi động lại server sẽ biết nha.

Thiết Kế Layout Cho Project

Trong phần cấu trúc thư mục có folder views trong đó bạn tạo cho mình 2 thư mục layouts gồm có file layout.pug và partials gồm có header.pug. Hai thư mục này sẽ nơi chứa bố cục của ứng dụng.
partials/header.pug

header
  .container
    .row
      nav.navbar.navbar-expand-lg.navbar-light
        a.navbar-brand(href='/')
          img.img-fluid(src='https://png.pngtree.com/templates_detail/20180917/book-library-education-logo-png_32062.jpg', width='50')
        button.navbar-toggler(type='button', data-toggle='collapse', data-target='#navbarNavDropdown', aria-controls='navbarNavDropdown', aria-expanded='false', aria-label='Toggle navigation')
             span.navbar-toggler-icon
        #navbarNavDropdown.collapse.navbar-collapse.justify-content-end
          ul.navbar-nav.justify-content-end
            li
              a.nav-link(href="/authors") Authors
            li
              a.nav-link(href="/authors/new") Add Author
            li
              a.nav-link(href="/books") Books
            li
              a.nav-link(href="/books/new") Add Book

layouts/layout.pug
Trong này bạn chỉ cần include header và liên kết các link bootstrap vào nha

doctype html
html
  head
    title Books Store
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    include ../partials/header.pug
    block content
    
    script(src='https://code.jquery.com/jquery-3.4.1.min.js', integrity='sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=', crossorigin='anonymous')
    script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM', crossorigin='anonymous')

Chức Năng Hiển Thị Và Tạo Mới Author

Định Nghĩa Router Tạo Mới Trong Author

Trong thư mục routes có file author.routes.js thì trong này sẽ là nơi chứa toàn bộ các source liên quan đến author.
Trước tiên các bạn tạo cho mình hai router tạo mới đó là router.get('/new',...) và router.post('/',...) trước đã nha. Các bạn chỉ cần tạo và render ra views trước cho mình là được.

const express = require("express")
const router = express.Router()

// Get New Author
router.get('/new', (req, res) => {
  res.render('authors/new', {
    author: new Author()
  });
});
  
// Create new author  
router.post('/', async (req, res) => {
   
 });

Giao Diện Tạo Mới Trong Author

Trong views bạn tạo cho mình thư mục là authors sẽ bao gồm 4 file index.pug, new.pug, show.pug, edit.pug.
Trước tiên các bạn nhớ extends layout vào nha
authors/new.pug

extends ../layouts/layout

block content
 .container
   h2 New Author
   form(action="/authors" method="POST")
     label(for="name") Name
     input(placeholder="Name", type="text" name="name" value=author.name)
     div
      a(href="/authors") Cancel
      button(type="submit") Create  

Và đây là giao diện căn bản để tạo author:

Định Nghĩa Các Schema Author Cho Mongoose

Như các bạn đã đọc ở trên thì cấu trúc thư mục cho dự án bên trong thư mục src các bạn tạo cho mình thư mục models, bên trong thư mục models các bạn tạo cho mình file author.model.js.
Trong file author.model.js cần tạo một đối tượng book và sẽ chứa fields name author.

const mongoose = require('mongoose');

const authorSchema = new mongoose.Schema({
    name:{type: String, required:true}
})

module.exports = mongoose.model('Author', authorSchema)

Tham số thứ nhất là tên riêng cho collection sắp được tạo ra cho mô hình của bạn, và tham số thứ hai là schema mà bạn muốn dùng để tạo ra mô hình.

Controller Tạo Mới Trong Author

Cũng trong file authors.routes.js ta có router.post('/',...) dùng để tạo author. Các bạn nhớ require model của author mà mình đã tạo vào nha.

Kiểm tra tên của author khi được tạo
Ta sẽ check xem tên được tạo có trùng với tên mà author đã tạo từ trước hay không nếu trùng thì sẽ hiển thị thông báo.
Bởi vì tên tác giả của một cuốn sách nào đó thì rất hiếm khi trùng có thể nói là không bao giờ có tên tác giả giống, còn tên người mà trùng nhau là chuyện bình thường. Vì thế nên ta cần phải check name của tác giả

Nó sẽ tạo một object rộng chứa dữ liệu author được truyền vào. Rồi lưu dữ liệu vào database đã được khởi tạo. Chúng ta sử dụng try{} catch{} nên khi có lỗi thì sẽ render ra lỗi khi tạo author.

const Author = require('../models/author.model')

// Create New Author  
router.post('/', async (req, res) => {
  const author = new Author({ name: req.body.name })
  
  // Kiểm tra name author có tồn tại hay không
  // Tìm một tên author trong DB với tên được tạo
  const nameAuthor = await Author.findOne({ name: req.body.name });
  
  // Nếu tìm được tên trùng nhau sẽ render ra mess
  if (nameAuthor) {
    return res.render('authors/new', {
      author: author,
      errorMessage: 'Author Already Exists'
    })
  }

  try {
    await author.save();
    res.redirect('/authors')
  } catch {
    res.render('authors/new', {
      author: author,
      errorMessage: 'Error Creating Author'
    })
  }

});

Khi mình tạo author thành công thì lưu vào DB và redirect sang trang authors, bây giờ trong router.get('/',..) các bạn res.send một tin nhắn gì đấy khi tạo author thành công chẳng hạn.

router.get('/', async (req, res) => {
  res.send('Hello Authors')  
})

Nếu mà có lỗi khi tạo author thì trong authors/new.pug các bạn thêm dòng code ở dưới vào phía sau thẻ h2 New Author là được nha.

    if locals.errorMessage
        = errorMessage
        

Và đây là kết quả khi chúng ta tạo author nha:

Định Nghĩa Và Controller Router Hiển Thị Trong Author

Trong thư mục routes có file author.routes.js thì trong này sẽ là nơi chứa toàn bộ các source code liên quan đến author.
Chúng ta tạo router.get('/') đây chính là router của trang authors, mục đích của trang này là tìm kiếm và hiển thị author.

Thì trước tiên các bạn viết cho mình hàm try{}catch{}, trong try{} là nơi mà ta sẽ find Author trong DB và render ra author còn catch{} sẽ redirect sang trang homepage nếu có lỗi xảy ra.
Còn về vấn đề tìm kiếm thì mình sẽ sử dụng req.query để truy vấn dữ liệu nha kết hợp với RegExp.
RegExp là một chuỗi các ký tự tạo thành một mẫu tìm kiếm. Mẫu tìm kiếm có thể được sử dụng cho các hoạt động tìm kiếm văn bản và thay thế văn bản.

Mình sẽ giải thích sơ qua chút về cách hoạt động của chức năng tìm kiếm. Tạo một object rỗng là nơi chứa các cặp key và value, key ở đây là name và value là biểu thức chính quy vd: {name: /long/i}.
Toán tử && sẽ trả về truthy khi tất cả các toán hạng đều là true có nghĩa là mình search có name của author thì điều kiện nó là true.

const Author = require('../models/author.model')

// GET Authors Page
router.get('/', async (req, res) => {
   let searchOptions = {}
   if (req.query.name != null && req.query.name !==''){
     searchOptions.name = new RegExp(req.query.name, 'i') 
     // 'i' ở đây có nghĩa là tìm kiếm tên mà không phần biệt chữ hoa hay thường
   }
   try{
     const authors = await Author.find(searchOptions);
     res.render('authors/index',{
       authors: authors,
       searchOptions : req.query
     })
   
   }catch{
     res.redirect('/')
   }
 
});

Giao Diện Hiển Thị Trong Author

Trong views bạn tạo cho mình thư mục là authors sẽ bao gồm 4 file index.pug, new.pug, show.pug, edit.pug.
Trước tiên các bạn nhớ extends layout vào nha và lặp qua các author để hiển thị ra tên của author. Tạo một form để làm ô tìm kiếm cho author với method="Get" nha.
searchOptions này là một object do mình đã định nghĩa req.query ở trên bây giờ muốn lấy value thì ta cần .name để có thể lấy được value của chúng.
authors/index.pug

extends ../layouts/layout

block content
 .container
    h2 Search Authors
    form(action="/authors" method="GET")
        input( type="text" name="name" placeholder="Name Author" value=searchOptions.name)
        button(type="submit") Search
    each author in authors
      h4= author.name

Lưu ý: Mình có cập nhật lại code tại một số chỗ nên khi bạn thấy trên ảnh gif sẽ không được chính xác cho lắm nha.
Và đây là kết quả khi chúng ta hiển thị và tìm kiếm author nha:

Vậy là kết thúc phần 1 rồi nha mời các bạn xem tiếp phần 2
To Be Continued !!

Lời Kết

Vậy Là Xong bài Hướng Dẫn Xây Dựng Books Store Với NodeJS, Express và MongoDB - Phần 1 rồi nhé. Các bạn xem phần tiếp theo nha mình chia thành nhiều phần ra để các bạn có thể đọc và làm một cách dễ dàng hơn rành mạch và dễ hiểu hơn.

Các bạn nhớ like và theo dõi fanpage Thanh Long Dev để nhận những thông báo về bài viết mới nhất nha.
Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.

Chúc Các Bạn Thành Công!!

Giới Thiệu Chung

Hôm nay mình sẽ hướng dẫn các bạn làm một trong những chức năng khá phổ biến trên các trang web hiện nay đó là pagination.
Pagination hay còn gọi là phân trang, là quá trình phân chia tài liệu thành các trang riêng biệt, hoặc trang điện tử hoặc trang in.
Tuy bài này không có gì gọi là quá mới lạ hay khác biệt nhưng mình sẽ viết một cách tận tình và chu đáo mong các bạn xem đầy đủ và kỹ càng.

Bắt Đầu Làm Thôi Nào

Lên Ý Tưởng

Ý tưởng cái này cũng đơn giản thôi thì như các bạn đã biết thì bây giờ mình sẽ tạo một trang page chứa chứa tất cả sản phẩm đúng không nào. Nhưng bây giờ nếu như chúng ta có 200 sản phẩm mà chỉ đặt chúng lên một trang thì đó không phải là cách tối ưu và trải nghiệm người dùng không được tốt. Nên chúng ta sẽ sử dụng kỹ thuật phân trang(pagination).

Hướng để làm cái thì mình bắt buộc phải có sản phẩm(data) gì đó rồi mới làm phân trang cho nó đúng không nào. Bây giờ mình muốn phân làm 4 trang mỗi trang 16 sản phẩm(data) thế là chúng ta cần phải tạo 64 sản phẩm à tạo khi nào cho xong nên ta cần phải fake data cho chúng =))

Bài này mình chỉ hướng dẫn các bạn làm về pagination nên mới fake data chớ vào thực tế thì các bạn phải tạo sản phẩm đầy đủ nha.
Sau khi mà fake data thì đây là bước quan trọng nhất đó là phân trang các bạn xem tiếp để biết thêm chi tiết nha. Đó cũng chính là ý tưởng của mình và bây giờ chúng ta sẽ biến ý tưởng thành hiện thực.

Cài Đặt Và Thiết Lập

Trước tiên các bạn tạo cho mình một folder trong folder đó là nơi chứa các thư mục dùng để mình code pagination.
Để mà cài các module trước hết các bạn phải cài đặt NodeJS tại đây.
Khởi tạo ứng dụng với file package.json
Trong thư mục gốc của ứng dụng của bạn và nhập npm init để khởi tạo ứng dụng của bạn với tệp package.json.
npm init
Sau đó các bạn cài đặt các module ở dưới để thiết lập ứng dụng nha.

• npm install express --save
  Module dùng để cài đặt framework express của nodejs giúp các bạn code một cách tối giản cũng như nhanh chóng hơn.
• npm install nodemon --save
  Tự động reload lại server khi bạn thay đổi code. Để khởi chạy server các bạn thêm "dev": "nodemon src/app.js" vào file package.json nha. Các bạn mở terminal lên sau đó gõ npm run dev để khởi chạy server nha.
• npm install mongoose --save
  Mongoose là một Object Document Mapper (ODM). Điều này có nghĩa là Mongoose cho phép bạn định nghĩa các object (đối tượng) với một schema được định nghĩa rõ ràng.
• npm install dotenv --save
  Dotenv là một biến môi trường dùng để bảo mật các thông tin quan trọng như username, password, url database,...Nếu chúng ta không lưu những thông tin mật vào file .env thì khi push source code lên github thì ai cũng có thể vào xem được và ai cũng biết username, password thì sẽ bị người khác chiếm đoạt và đánh cắp tài liệu rất là nguy hiểm nha.
• npm install faker --save
  Faker là một package dùng để tạo các dữ liệu fake(giả) bao gồm rất nhiều API methods khác nhau như address, image, name,... các bạn xem thêm tại đây nha
• npm install ejs --save
  EJS nó chỉ là một template engine mà thôi hôm nay mình đổi giớ một tí thay vì dùng pug thì mình dùng ejs.
  Và đây cũng là các package mà mình khi đã cài đặt cũng như cấu hình xong.

Cấu Trúc Thư Mục Cho Dự Án

Sau khi hoàn thành việc cài đặt module các bạn tạo cho mình một thư mục src, thư mục này dùng để chứa tất cả các file trong quá trình mình code project.
Mình khuyên các bạn nên tạo thêm một folder controllers và file để chứa các logic khi mình code. Do mình code để làm demo cho mọi người nên mình viết chung vào thằng routes luôn.

Bắt Đầu Code Thôi Nào

Thiết Lập Web Server

Trong thư mục gốc các bạn tạo cho mình file app.js, file này là file chính dùng để điều khiển mọi hoạt động chính của server.

const express = require("express")
const app = express()
const path = require("path")
const port = 3333

// Import routes
const indexRoutes = require("./routes/index.routes")

// Settings
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');


// routes
app.use(indexRoutes);

app.listen(port, function(){
    console.log(`Server listening ${port}`)
})

Trong thư mục routes có file index.routes.js, các bạn tạo cho nó một Route handlers và thử chạy sever xem sau. Mục đích để các bạn test xem server có chạy không nha.

router.get('/', (req, res, next) => {
   res.send('Hello Everyone')
})

Thiết Lập Database

Để mà có thể thiết lập được database thì các bạn đăng nhập tài khoản mongodb atlas tại đây nha. Sau khi các bạn bạn đã có tài khoản mongodb atlas thì tiếp đến cài đặt cấu hình để có thể kết nối mongodb atlas với ứng dụng của chúng ta. Để biết thêm chi tiết các bạn xem bước 3 trong bài viết của mình hướng dẫn deploy project nodejs lên heroku tại đây nha.
Sau đó các bạn copy link database mongodb đã tạo rồi paste vào project của mình là được nha. Các bạn tạo cho mình một file .env bên trong thư mục gốc.
Trong file này các bạn tạo một đường dẫn là DATABASE_URL=mongodb+srv://long:<password>@cluster0-b7d8c.mongodb.net/test?retryWrites=true&w=majority
Trong file app.js các bạn khai báo module dotenv với module mongoose và tạo đường dẫn mongodb.
// Khai báo dotenv
require('dotenv').config()
// Khai báo mongoose
var mongoose = require('mongoose')

// Connect database
mongoose.connect(process.env.DATABASE_URL, 
    {useNewUrlParser: true, useUnifiedTopology: true}).then(function() {
        console.log("Successfully connected to the database");    
    }).catch(function(err) {
        console.log('Could not connect to the database. Exiting now...', err);
        process.exit();
    });

Để biết nó đã kết nối hay chưa các bạn khởi động lại server sẽ biết nha.

Thiết Kế Giao Diện

Nói thiết kế thì nó hơi quá chớ thật ra làm cái này cũng đơn giản. Không cần làm mà vẫn có ăn^^, đùa chút thôi nha. Trước tiên mình sẽ code giao diện trang chủ như các bạn đã thấy ở trên phần cấu trúc thư mục thì ta thấy trong folder views chứa folder layout chứa các file như: header.ejs, footer.ejs là nơi mà chúng ta dùng để code giao diện cho app. Mình sử dụng template engine ejs nên nó khá quen thuộc với chúng ta bởi vì nó khá giống html thuần.
Trong file header.ejs mình sẽ tạo cho nó một thanh nav sẽ bao gồm logo và menu. Và trong menu sẽ chữa một nav link đó là Fake data product để khi chúng ta click vào đó sẽ tạo các data fake cái này mình sẽ nói rõ ở phần sau bạn không cần quan tâm quá nhiều.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagination</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="/">
      <img src="https://bizweb.dktcdn.net/100/228/168/themes/715878/assets/logo.png?1594693671116" alt="logo Linh Kiện Điện Tử 3M" width="50%">
      </a>
      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
      <div class="navbar-collapse collapse justify-content-end" id="navbarNavDropdown">
        <ul class="navbar-nav">

          <li class="nav-item">
            <a class="nav-link" href="/generate-fake-data">
              Fake data product
            </a>
          </li>
         
        </ul>
      </div>
    </div>
  </nav>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Và đây là giao diện cho trang chủ của chúng ta

Định Nghĩa Các Schema Product Cho Mongoose

Như các bạn đã đọc ở trên thì cấu trúc thư mục cho dự án bên trong thư mục src các bạn tạo cho mình thư mục models, bên trong thư mục models các bạn tạo cho mình file product.model.js.
Trong file product.model.js cần tạo một đối tượng book và sẽ chứa ba fields là name, price và cover.

const mongoose = require("mongoose")
const Schema = mongoose.Schema;

const productSchema = new Schema({
    name: {type: String, required: true},
    price: {type: Number, required: true},
    cover: {type: String, required: true}
})
// Biên dịch mô hình từ schema
module.exports =  mongoose.model('product', productSchema)

Tham số thứ nhất là tên riêng cho collection sắp được tạo ra cho mô hình của bạn, và tham số thứ hai là schema mà bạn muốn dùng để tạo ra mô hình.
Sau khi chúng ta đã setup xong hệ thống thì bây giờ mình sẽ đi đến chức năng là tạo data fake và lưu vào DB như mong muốn của mình.

Tạo Dữ Liệu Fake

Nhìn tiêu đề hơi củ chuối các ông nhờ =)). Nhưng mà không sao củ chuối nhiều lúc cũng thú vị, mình không có đi vòng vo nữa mà là vào thẳng vẫn đề chính luôn đó là tạo data giả(fake). Lý do tại sao chúng ta lại phải fake data mục đích của nó đơn giản là có tạo ra nhiều data một cách nhanh chóng để thực hiện công việc đó là phân trang(pagination).
Trong thư mục src các bạn tạo cho mình thư mục routes, bên trong thư mục routes các bạn tạo cho mình file index.routes.js.
Trong file index.routes.js các bạn cần import và khai báo một số module như model, faker,...
Tiếp đến bạn tạo cho mình một routes.get('/generate-fake-data', ()=>{...}) để khi chúng ta click vào router đó nó sẽ tự động tạo cho ta hàng loạt các data fake và lưu vào database như ta mong muốn.
Mình sẽ giải thích qua một chút đó là chúng ta tạo một vòng lặp để làm gì để nó có thể tự động tạo số lượng data mà mình muốn fake. Trong vòng lặp đó tạo một object empty để chứa các thuộc tính của một sản phẩm như name, price, coverImg và lưu vào database rồi redirect trang chủ. Còn các API để tạo dữ liệu fake các bạn xem tại đây nha nó cũng khá là đơn giản.

const express = require("express")
const router = express.Router()
const faker = require('faker');
const Product = require("../models/product.model")

.............
.............
.............
  // Fake data products
router.get('/generate-fake-data', async(req, res, next) =>{
    for(let i = 0; i < 96; i++) {
    const newprd = new Product();
    newprd.name = faker.commerce.productName()
    newprd.price = faker.commerce.price()
    newprd.cover = faker.image.image()
    
    newprd.save((err)=>{
        if (err) { return next(err); }
      });
    }
    res.redirect('/');    
}) 

............
............
............

module.exports = router

Chúng ta cùng xem thử kết quả để biết nó có tự động fake data và lưu vào DB không nha

Hướng Dẫn Phân Trang

Sau khi đã data fake xong bây giờ chúng ta sẽ bắt đầu phân trang cho nó nha. Để phân trang mình cần làm như nhờ =)) mình sẽ nói sơ qua chút về quy trình hoạt động nha.
Thì khi chúng ta đã fake dữ liệu cho nó xong thì công việc bây giờ chính là phân trang. Có rất nhiều cách để phân trang nhưng mình sẽ sử dụng req.params và sử dụng nó như thế nào thì các bạn xem tiếp nha.
Mục đích khi mình sử dụng req.params đó là lấy thông số các page.
VD: router.get('/news/:page', (req, res, next) => {} ) thì page được gọi là params ngoài các này các bạn cũng có thể sử dụng req.query để truy vấn vào các trang được pagination.
Code Thôi Nào
Trong quá trình code mình sẽ nói thêm cho các bạn dễ hiểu hơn.
Bên trong thư mục routes có file index.routes.js chúng ta sẽ tạo một router.get('/news/:page', (req, res, next) => {} )

// pagination
router.get('/news/:page', (req, res, next) => {
    let perPage = 16; // số lượng sản phẩm xuất hiện trên 1 page
    let page = req.params.page || 1; 
  
    Product
      .find() // find tất cả các data
      .skip((perPage * page) - perPage) // Trong page đầu tiên sẽ bỏ qua giá trị là 0
      .limit(perPage)
      .exec((err, products) => {
        Product.countDocuments((err, count) => { // đếm để tính có bao nhiêu trang
          if (err) return next(err);
           res.send(products) // Trả về dữ liệu các sản phẩm theo định dạng như JSON, XML,...
        });
      });
  });

Và đây là kết quả khi chúng ta truy cập url localhost:3333/news/1 thì nó sẽ trả về dữ liệu các sản phẩm xuất hiện trên một trang đây là mình chỉ test thử thôi nha.

Sau khi chúng ta đã test thành công bằng cách gửi dữ liệu về, bây giờ ta cần làm là biến chúng thành những giao diện đẹp mắt =))
Thay vì res.send để trả về dữ liệu theo dạng json thì bây giờ chúng ta sẽ thay đổi thành res.render để trả về dữ liệu dưới dạng html nha.

// pagination
router.get('/news/:page', (req, res, next) => {

     .............
     .............
     .............
          res.render('product/index_product', {
            products, // sản phẩm trên một page
            current: page, // page hiện tại
            pages: Math.ceil(count / perPage) // tổng số các page
          });
          
      ..............
      ..............
      ..............

Trong file index_product.ejs ta sẽ code giao diện pagination cho nó. Trước tiên mình sẽ phải include thằng header và footer vào cái đã, để mà có thể hiển thị được sản phẩm ta chỉ cần lặp qua rồi chia cột cho nó là được. Nếu muốn hiển thị 3 sản phẩm thì col-4 còn muốn hiển thị 4 sản phẩm thì col-3 có thể thôi ấy mà :))

Tiếp đến phần khá là quan trọng đó là phân trang

<%- include('../layout/header'); -%>


<div class="container" style="margin-top: 50px">
  <div class="row">

    <!-- ITEMS -->
    <% for(var i = 0; i < products.length; i++) { %>
    <div class="col-md-3">
      <div class="p-1">
        <div class="card">
          <img src="<%= products[i].cover %>" class="card-img-top">
          <div class="card-body">
            <h4 class="card-title"><%= products[i].name %></h4>
            <p class="card-text"><%= products[i].category %></p>
            <p class="card-text"><%= products[i].price %>$</p>
          </div>
        </div>
      </div>
    </div>
    <% } %>
  </div>

 <!-- pagination -->
  <div class="row">
    <!-- hiển thị phân trang nếu có trang -->
    <% if(pages > 0) { %>
    <nav class="mx-auto">
      <ul class="pagination" style="margin-top: 2rem;">
      
        <!-- FIRST ITEM -->  
        <% if(current == 1) { %> 
      // Nếu thông số http://localhost:3333/news/1/ là 1 thì First sẽ bị disabled
            <li class="page-item disabled">
              <a class="page-link" href="/">First</a>
            </li>
        <% } else { %>
        // Nếu thông số http://localhost:3333/news/2/ từ 2 trở lên thì First sẽ bỏ disabled
            <li class="page-item">
              <a class="page-link" href="/">First</a>
            </li>
        <% } %>
        
        <!-- ITEMS  -->
        <% var i = (Number(current) > 3 ? Number(current) - 2 : 1) %> 
  // Toán tử điều kiện 3 ngôi syntax: < điều_kiện ? giá_trị_1 : giá_trị_2 >
 // Nếu điều_kiện trả về true, toán tử có giá trị giá_trị_1. Ngược lại toán tử có giá trị giá_trị_2.
        <% if(i !== 1) { %>
            <li class="page-item disabled">
              <a class="page-link" href="#">...</a>
            </li>
        <% } %>
        <% for(; i <= (Number(current) + 2) && i <= pages; i++) { %>
        // Sử dụng vòng lặp để lặp qua từng trang và tăng số trang 
        // Trong vòng lặp for có ba biểu thức tùy chọn nên chỉ cần các bạn tách mỗi biểu thức bằng dấu `;` là oke rồi
          <% if(i == current) { %>
            <li class="page-item active">
              <a class="page-link" href="/news/<%= i %>/">
                <%= i %>
              </a>
            </li>
        <% } else { %>
            <li class="page-item">
              <a class="page-link" href="/news/<%= i %>/">
                <%= i %>
              </a>
            </li>
        <% } %>
        <% if (i == Number(current) + 2 && i < pages) { %>
            <li class="page-item disabled">
              <a class="page-link" href="#">...</a>
            </li>
        <% } %>
        <% } %>
        
        <!-- LAST ITEM -->
        <% if(current == pages) { %> 
       // Nếu số current( chỉ số phân trang ) là 6 và tổng số page là 6 thì Last bị disabled
            <li class="page-item disabled">
              <a class="page-link" href="#">
                Last
              </a>
            </li>
        <% } else { %>
        // Ngược lại, thì Last là trang cuối cùng pages ở đây là 6 đồng nghĩa với Last là trang số 6
            <li class="page-item">
              <a class="page-link" href="/news/<%= pages %>/">
                Last
              </a>
            </li>
        <% } %>
      </ul>
    </nav>
    <% } %>
  </div>
</div>


<%- include('../layout/footer'); -%>

Và đây là kết quả khi chúng ta đã hoàn thành pagination cho nó:))

Từ từ mọi người đừng mừng vội còn một việc nữa đó là chả lẻ giờ muốn xem pagination thì phải ghi params /news/1/ vào url như này http://localhost:3333/news/1/ nhìn là biết trải nghiệm người dùng không tốt rồi =))
Bây giờ mình sẽ chuyển pagination ra trang home khi người dùng vào là sẽ thấy xuất hiện phân trang luôn. Đơn giản thôi bây giờ cũng trong file index.rotes.js bạn chỉ cần copy nguyên code từ router.get('/news/:page') sang router.get('/') là được thôi mà.

// home page
router.get('/', (req, res, next)=>{
  let perPage = 16; // số lượng sản phẩm xuất hiện trên 1 page
  let page = req.params.page || 1; 

  Product
    .find() // find tất cả các data
    .skip((perPage * page) - perPage) // Trong page đầu tiên sẽ bỏ qua giá trị là 0
    .limit(perPage)
    .exec((err, products) => {
      Product.countDocuments((err, count) => { // đếm để tính xem có bao nhiêu trang
        if (err) return next(err);
        res.render('product/index_product', {
          products, // sản phẩm trên một page
          current: page, // page hiện tại
          pages: Math.ceil(count / perPage) // tổng số các page
        });
      });
    });
})

Và đây là kết quả khi chúng ta chuyển pagination ra ngoài home page nha:

Vậy là xong rồi nha, các bạn có thể tham khảo code mà mình đã push lên github tại đây nha.

Lời Kết

Vậy Là Xong bài Hướng Dẫn Xây Dựng Pagination Với NodeJS, Express và MongoDB rồi nhé. Mình mong muốn sau bài topic này các bạn có thể biết và hiểu thêm về nodejs, express và biết pagination là gì?, từ topic này các bạn có thể mở rộng thêm ý tưởng và cách làm mới. Có thể tự tay mình làm những project không cần phải quá đặc biệt nhưng nó do chính bạn làm thì cũng coi như là thành quả trong quá trình bạn học được.

Các bạn nhớ like và theo dõi fanpage Thanh Long Dev để nhận những thông báo về bài viết mới nhất nha.
Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.

Chúc Các Bạn Thành Công!!

Giới Thiệu Chung

Hôm nay mình sẽ viết về một topic chả liên quan gì đến kỹ thuật cả và đây cũng là lần đầu tiên mình viết về mấy chủ đề này. Nếu có sai sót gì thì mong các bạn thông cảm nha.
Như các bạn đã thấy ở trên tiêu đề thì hôm nay mình sẽ viết một bài chia sẽ về con đường trở thành Dev và mình sẽ chia sẽ một cách đầy đủ nhất giúp các bạn lấy lại động lực và cảm hứng khi học.

Con Đường Học Lập Trình Web Của Mình

Thì mình cũng không lòng vòng nữa mình cũng nói luôn. Vào tháng 10/2017 mình bắt đầu biết đến lập trình và được va chạm với ngôn ngữ đầu tiên là Pascal(ngôn ngữ huyền thoại^^). Mình là một thằng rất thích chế cháo là fan cứng của KST mà:)), trong một ngày đẹp trời mình được một người bạn giới thiệu về arduino.

Và thế là mình chuyển hướng qua vọc arduino với mong muốn là chế được một con robot phơi nông sản nhưng đời không như là mơ. Bởi vì sao nó không như là mơ vì mình méo có tẹo nào về căn bản của arduino nhưng lại mong muốn làm được một sản phẩm hoàn thiện. Mình đầu tư rất nhiều về thời gian, công sức và tiền bạc về các món đồ linh kiện điện tử như: module L298, Srf05, Arduino Uno & Mega, Encoder, mạch in,...

Ui công nhận lúc đó mình làm liều thật không biết nó có chạy hay không nhưng mình làm khá công phu và đến bước quan trọng nhất là làm sao để xe nó chạy theo đúng ý mình thì mình lại thất bại ngay bước này đó là do sự chuẩn bị không tốt, trèo quá cao mình không biết nói như lào cho hợp lý nhở. Kiểu giống như một ngôi nhà đang xây rất là cao và đẹp thì bổng một ngày nó đổ sập là do phần móng nó không được chắc chắn đúng không nào thì sản phẩm mình làm nó cũng như vậy đó. Nhiều lúc nản thật sự các ông ạ và mình cũng đã đưa ra quyết định là bỏ sản phẩm này để học lại kiến thúc nền thật vững và làm một sản phẩm và cuối cùng nó cũng đã thành công. Sau một thời gian reseach thì mình cảm thấy méo có cảm tình chút nào nên bỏ arduino đến giờ và mình cũng quên cmnr =))).

Note: Sau bài học trên thì mình cũng rút ra được một số bài học và muốn nhắn nhủ với các bạn rằng muốn làm được việc lớn thì phải làm được việc nhỏ, không ai học một hay hai ngày mà có thể làm được và giỏi ngay tất cả đều cần có thời gian để thực hiện và cần phải có cái "móng" thật vững nhoa. Mình thấy khá rõ tình trạng học lập trình của các bạn hiện nay lúc nào cũng mong muốn là mình làm được một cái project gì đó hay hay và không cần biết là nó được làm như thế nào cả. Đấy là một sai lầm rất lớn nhá cần phải nhìn nhận lại và thay đổi ngay.

Sau bao nhiêu ngày tháng chán nản thì cuối cùng vào tháng 12/2018, mình cũng đã chọn đúng con đường mình đi và theo nó đến cùng đó là lập trình WEB. Nhưng cũng nhờ những vấp ngã ở trên những lần thất bại thì mình càng mạnh mẽ hơn để có thể đứng dậy và làm lại từ đầu.
Nơi mà mình bắt đầu học đó là kênh youtube thư viện lập trình lúc ấy thì cũng không biết gì cả lên youtube search với keyword học lập trình web thì nó ra một playlist của thư viện lập trình khá đầy đủ từ html, css, js,..Nhờ bài học rút ra ở trên nên khi học lập trình web mình học rất là nghiêm túc từ cơ bản đến nâng cao không sót một giây nào các ông ạ. Sau khi học xong thì mình bắt đầu là cắt psd sang HTMl, nói thật với các ông chớ lần đầu mình cắt code nó kinh thật xấu dã man:)) lần đầu làm chuyện ấy mà.

Sau một thời gian mình luyện cắt psd ấy thì mình nhận ra là mình còn phải bổ sung rất nhiều kiến thức và nhất là JS(javascript). Thì tính cờ mình biết đến CodersX(lúc trước là Coders.Tokyo) có dạy học lập trình web miễn phí thế là mình lần mò đến học thui, kiến thức ở đấy rất là hay và bổ ích các ông ạ ở mình đây mình không có PR hay gì nha nếu các ông không tin thì phải học thử là biết ngay ấy mà. Thì nhờ CodersX mà mình học được rất nhiều kiến thức và cũng xin cảm ơn anh Thịnh và team đã tạo ra CodersX.

Đấy chỉ là hai kênh mình học chủ yếu nhưng trong đó mình khuyên các bạn chịu khó reseach xem nhiều kiến thức hơn trên youtube và đọc các bài blog liên quan đến bài mình học nha. Nó giúp ích các bạn rất nhiều trong quá trình học và làm việc đó nha. Mình đã học lập trình web và trở thành dev như thế đấy ==))

Note: Để muốn học được lập trình web thì các bạn cần phải nắm vững các kiến thức cơ bản nha chưa biết bò mà muốn đi là hông được đó nha. Phải có lộ trình, định hướng rõ ràng học để làm gì để khi gặp khó khăn trong quá trình học thì còn có động lực mà cố gằng và cuối cùng đó là đam mê, can đảm,...

Lộ Trình Học Lập Trình Web

Trong lập trình người ta chia làm 3 mảng: Frontend, Backend or DevOps và còn một thằng nữa đó là phun sờ nách(fullstack)^^. Mình khuyên các bạn nên chọn một trong những thứ trên thôi nha. Trong quá trình bạn làm hay học thì bạn có thể học tiếp các kiến thức còn lại. Còn chi tiết frontend, backend và devops cần học những gì thì các bạn xem tại đây nha.

Truyền Cảm Hứng Học Đến Mọi Người

Truyền cảm hứng ở đây là mình muốn nói với các bạn rằng. Mỗi người chúng ta đều có con đường đi khác nhau và có điểm xuất phát khác nhau, có người ba mấy bốn mươi tuổi mới bắt đầu học còn có người mười tuổi là đã làm quen với lập trình rùi. Học không bao giờ là quá muộn nó chỉ muộn khi bạn không học. Còn học như thế nào thì mình cũng đã nói ở trên rồi. Mình viết blog này mong muốn chia sẽ chút kiến thức hạn hẹp của mình đến các bạn để cùng nhau phát triển. Mình không khuyên các bạn nên học cái này và bỏ cái kia. Bởi vì cuộc đời này là do bạn quyết định giàu nghèo cũng do bạn quyết định, mình phải tin tưởng vào bản thân mình chớ. Mình tin các bạn làm được và còn làm rất tốt nữa.
CỐ LÊN NÀO!!!

Jack Ma có một câu nói rất hay: "Nếu bạn không bắt tay vào làm thì chẳng có điều gì là khả thi cả"

Lời Kết

Tóm lại thì bài này mình cũng nói về con đường mà mình học lập trình web và những bài học mình đã trải qua. Mong muốn truyền cảm hứng học đến các bạn cũng một phần nào đó giúp các bạn có thêm động lực để học hơn. Đây là lần đầu mình viết một topic chả liên quan gì đến kỹ thuật nên có sai sót gì mong các bạn thông cảm.

Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.

Chúc Các Bạn Thành Công!!

Giới Thiệu Chung

Hôm nay mình sẽ hướng dẫn tất cả mọi người crawl dữ liệu trang linh kiện điện tử NShop. Mình sẽ giới thiệu đến tất cả mọi người về puppeteer, headless browser và puppeteer nó dùng để làm gì.

Headless Browser Là Gì?

Headless Browser là một trình duyệt web không có giao diện người dùng. Các headless browser cung cấp tương tác tự động một trang web trong một môi trường giống như các trình duyệt web phổ biến khác, nhưng nó được thực hiện thông qua giao diện dòng lệnh hoặc qua một mạng truyền thông. Các bạn có thể tham khảo thêm tại đây.
Ở đây mình có tóm gọn lại một câu đơn giản là headless Browser thay vì dùng để duyệt web thì nó sử dụng để cào dữ liệu, chụp ảnh màn hình của các trang web,...

Puppeteer Là Gì?

Puppeteer là thư viện của NodeJS, giúp bạn điều khiển headless Chrome. Các bạn tìm hiểu thêm tại đây nha

Bắt Đầu Làm Thôi Nào

Lên Ý Tưởng

Ý tưởng thì mình sẽ crawl dữ liệu trang linh kiện điện tử Nshop. Vậy mình sẽ crawl cái gì từ trang này, mình sẽ crawl tất các url ảnh, tiêu đề và giá của từng sản phẩm trong trang chủ của website. Trang chủ của thằng này nó có 60 sản phẩm thì mình sẽ crawl 60 url ảnh, tiêu đề và price. Crawl như thế nào thì các bạn xem tiếp ở phần dưới nha.

Cài Đặt Và Thiết Lập

Trước tiên các bạn tạo cho mình một folder trong folder đó là nơi chứa các thư mục dùng để crawl dữ liệu.
Khởi tạo ứng dụng với file package.json
Trong thư mục gốc của ứng dụng của bạn và nhập npm init để khởi tạo ứng dụng của bạn với tệp package.json.
npm init
Sau đó các bạn cài đặt module puppeteer để crawl dữ liệu nha.
Để mà cài đặt puppeteer trước hết các bạn phải cài đặt NodeJS tại đây.
npm install puppeteer
Sau khi cài đặt module xong các bạn tạo cho mình file index.js để mình viết chương trình crawl dữ liệu.

Bắt Đầu Code Thôi Nào

Trong file index.js các bạn require thư viện vào nha:

const puppeteer = require('puppeteer');

Tiếp đến, chúng ta sẽ khởi tạo một browser sử dụng phương thức launch() và truy cập vào trang linh kiện điện tử Nshop như sau:

const puppeteer = require('puppeteer');

let electronicUrl = 'https://nshopvn.com/';
(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto(electronicUrl);
  .........
  .........
  .........
})();

Để có thể crawl dữ liệu của trang web các bạn cần gọi đến API page.evaluate. Là một API rất quan trọng cho phép chúng ta chạy script để lấy nội dung trả về.

Bây giờ các bạn qua trang Nshop để xem cấu trúc HTML của nó như thế nào nha. Để có thể lấy url ảnh, tiêu đề và giá của từng sản phẩm.

Như các bạn đã thấy trên ảnh thì thằng class="product-wrapper" nó là class cha bao bọc tất cả các nội dung như: url ảnh, tiêu đề và giá.
Bây giờ các bạn mở tab console trong chrome dev tools để có thể cào dữ liệu bằng cách viết code JavaScript

let products = []; // tạo một array để có thể push dữ liệu của từng sản phẩm vào
    let product_wrapper = document.querySelectorAll('.product-wrapper');
    
    // Lặp qua các NodeList để có thể lấy dữ liệu và chuyển thành object
    product_wrapper.forEach((product) => {
      let dataJson = {};
      try {
        dataJson.img = product.querySelector('.image > img').src;
        dataJson.title = product.querySelector('.woocommerce-loop-product__title').innerText;
        dataJson.price = product.querySelector('.price').innerText;
      }
      catch (err) {
          console.log(err)
      }
      products.push(dataJson);// Push dữ liệu object vào trong array
    });
    console.log(products);

Và đây là kết quả khi chúng ta test trong console:

Sau khi test ok chúng ta vào file index.js và đây là code hoàn chỉnh:

const puppeteer = require('puppeteer');

let electronicUrl = 'https://nshopvn.com/';
(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto(electronicUrl);

  let electronicData = await page.evaluate(() => {
    let products = [];
    let product_wrapper = document.querySelectorAll('.product-wrapper');
    product_wrapper.forEach((product) => {
      let dataJson = {};
      try {
        dataJson.img = product.querySelector('.image > img').src;
        dataJson.title = product.querySelector('.woocommerce-loop-product__title').innerText;
        dataJson.price = product.querySelector('.price').innerText;
      }
      catch (err) {
          console.log(err)
      }
      products.push(dataJson);
    });
    return products;
  });

   console.log(electronicData);
    await browser.close();
})();

Tiếp đến các bạn mở terminal trong VScode hoặc trong cửa sổ cmd các bạn gõ cho mình node index.js. Và để xem nó crawl dữ liệu như thế nào nha.

Vậy là xong rồi nha, các bạn có thể tham khảo code mà mình đã push lên github tại đây nha

Lời Kết

Vậy Là Xong bài Hướng Dẫn Crawl Dữ Liệu Với Puppeteer Và Nodejs rồi nhé. Mình mong muốn sau bài topic này các bạn có thể biết và hiểu thêm về puppeteer, từ topic này các bạn có thể mở rộng thêm ý tưởng mới. Và có thể tự tay mình làm những project không cần phải quá đặc biệt nhưng nó do chính bạn làm thì cũng coi như là thành quả trong quá trình bạn học được.

Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.

Chúc Các Bạn Thành Công!!

Giới Thiệu Chung

Hôm nay mình sẽ hướng dẫn các bạn xây dựng một cái chức năng rất phổ biến hiện nay trong các trang web đó là tabs.

Tại Sao Mình Lại Hướng Dẫn Các Bạn Xây Dựng Tabs

Thì các bạn thử search trên google có rất nhiều bài viết hướng dẫn các bạn làm tabs, các plugin như bootstrap tabs,.. Nhưng mà mình vẫn muốn viết bài để hướng dẫn các bạn. Vậy mục đích của mình là gì?

Mục Đích Bài Viết

Mục đích của bài viết này giúp các bạn ôn lại các kiến thức về html, css và js. Không phụ thuộc quá nhiều vào các thư viện giúp các bạn nâng cao khả năng tư duy, logic và khả năng giải quyết vấn đề.

Bắt Đầu Thôi Nào

Lên Ý Tưởng

Thì thằng tabs này nó sinh ra dùng để hiển thị các thể loại khác nhau theo từng tabs khác nha. Chúng ta sử dụng html, css để làm layout và dùng JS để làm hiểu ứng chuyển tabs.
Ví dụ như website linh kiện điện tử 3M trong phần sản phẩm nổi bật nó cũng chia ra làm ba tabs khác nha.

Code Thôi Nào

Code HTML

Trước tiên các bạn cần phải code cho mình một bộ khung cần có để tạo tabs cho nó. Trong tabs đó có hai phần chính là tab links và tab content.
Trong tab links các bạn tạo cho mình các button trong button này chứa các data- attributes. để có thể truy vấn vào được các tab content mục đích là sử dụng tab links để chuyển các tabs.
Tiếp theo là trong tab content các bạn cho mình mỗi content một id khác nhau nhưng phải giống các giá trị trong data-attributes. Còn nội dung như thế nào thì bạn có thể tự custom theo ý muốn.
Các bạn để ý trong button đầu tiên của tab links chúng ta sẽ thấy thêm một class nữa đó là active, vậy class active đó dùng để làm gì vậy thì chúng ta cùng xem ở phần css nha. Cũng tương tự như trong phần tab content.

 <!-- Tab links -->
      <div class="tabs">
         <button class="tablinks active" data-electronic="allproducts">Tất cả sản phẩm</button>
         <button class="tablinks" data-electronic="Microcontrollers">Vi điều khiển - Nhúng</button>
         <button class="tablinks" data-electronic="module">Module ứng dụng</button>
      </div>

      <!-- Tab content -->
      <div class="wrapper_tabcontent">
         <div id="allproducts" class="tabcontent active">
           <img src="https://bizweb.dktcdn.net/thumb/large/100/228/168/products/sp1-949f885f-8d8a-445e-be5c-0cce06cdb4b1.jpg?v=1582441789000" width="100%"/>
           <h3>Combo Trạm Hàn Hakko 936 + Sensor Hàn A1321</h3>
         </div>

         <div id="Microcontrollers" class="tabcontent">
                <img src="https://bizweb.dktcdn.net/thumb/large/100/228/168/products/raspberry-pi-4-model-b.jpg?v=1566526980000" width="100%"/>
           <h3>Raspberry Pi 4 Model B 2019</h3>
         </div>

         <div id="module" class="tabcontent">
           <img src="//bizweb.dktcdn.net/thumb/large/100/228/168/products/sp1-96b83938-650f-4f51-8b0a-61ee9f8f9039.jpg?v=1580721383000" width="100%"/>
           <h3>Module Khuếch Đại Âm Thanh Bluetooth Stereo 30W/40W Công Suất Cao XY-P40W</h3>
         </div>
      </div>

lưu ý: Mình sử dụng codepen.io để code tạo tabs, các bạn cũng có thể sử dụng các text editor hay IDE khác để code tạo tabs nha.
Các bạn cùng xem thử kết quả khi chúng ta code HTML cho nó nha.

Code CSS

Để mà tabs chúng ta dễ nhìn hơn, bố cục đẹp mắt hơn thì chúng ta cần phải css cho nó. Trong phần CSS này mình không nói nhiều cho lắm bởi vì đây hoàn toàn là các kiến thức cơ bản.
Trong này các bạn css cho mình hai .active đó là .tablinks.active và .tabcontent.active một cái là dùng để hiển thị màu nền, màu chữ cái còn lại dùng để hiển thị nội dung của tab mà chúng ta add class vào.

/* Tab Links */
.tabs{
  display:flex;
}
.tablinks {
  border: none;
  outline: none;
  cursor: pointer;
  width: 100%;
  padding: 1rem;
  font-size: 13px;
  text-transform: uppercase;
  font-weight:600;
  transition: 0.2s ease;
}
.tablinks:hover{
  background:blue;
  color:#fff;
}
/* Tab active */
.tablinks.active {
   background:blue;
  color:#fff;
}

/* tab content */
.tabcontent {
  display: none;
}
/* Text*/
.tabcontent p {
  color: #333;
  font-size: 16px;
}
/* tab content active */
.tabcontent.active {
  display: block;
}

Các bạn cùng xem thử kết quả khi chúng ta code CSS cho nó nha.

Cuối cùng thì công việc chia layout cũng như giao diện cho tabs chúng ta cũng đã làm xong một cách cũng khá là ổn giờ đến công đoạn làm hiệu ứng chuyển tabs.

Code Javascript

Đây là phần khá là quan trọng trong bài viết ngày hôm. Tuy nó khá quan trọng nhưng nó cũng không quá khó lắm đâu.
Trước tiên mình sẽ nói sơ qua thuật toán tí làm sao để chúng ta có thể chuyển tabs. Thì trong tabs link chúng ta có ba button thì khi click button thứ hai thì nội dung trong thẻ thứ hai phải được hiển thị và cũng tương tự như nội dung trong thẻ button thứ ba và thứ nhất. Và các thẻ mà được add .active khi click vào button khác thì phải được remove.
Vì vậy nên chúng ta mới sử dụng data-attribute và id để có thể lấy được nội dung của từng tab khác nhau.

var tabLinks = document.querySelectorAll(".tablinks");
var tabContent =document.querySelectorAll(".tabcontent");

tabLinks.forEach(function(el) {
   el.addEventListener("click", openTabs);
});


function openTabs(el) {
   var btn = el.currentTarget; // lắng nghe sự kiện và hiển thị các element
   var electronic = btn.dataset.electronic; // lấy giá trị trong data-electronic
 
   tabContent.forEach(function(el) {
      el.classList.remove("active");
   }); //lặp qua các tab content để remove class active

   tabLinks.forEach(function(el) {
      el.classList.remove("active");
   }); //lặp qua các tab links để remove class active

   document.querySelector("#" + electronic).classList.add("active");
   // trả về phần tử đầu tiên có id="" được add class active
   
   btn.classList.add("active");
   // các button mà chúng ta click vào sẽ được add class active
}

Chúng ta để ý thấy hai dòng đầu tiên tại sao mình lại không sử phương thức getElementsByClassName mà lại sử dụng querySelectorAll thì câu trả của mình thì sử dụng cái nào cũng được cả nếu đó là class thì getElementsByClassName.
Để có thể chuyển tab chúng ta cần phải bắt sự kiện click để có thể click vào các button để chuyển tab. tham số el này là từ được viết tắt bởi từ element.

Thì mặc định tab links và tab content thư nhất sẽ được add class sẵn. Nên khi chúng ta click vào tab links thứ hai thì tab links, tab content sẽ được chạy vòng lặp nếu thằng nào trong tab links hay tab content có add .active thì sẽ bị remove. Khi remove xong thì tab links và tab content thứ hai sẽ được add .active

Chúng ta cùng xem thử nó chuyển tab như thế nào nhé.

Các bạn có thể tham khảo full source code mình đã code trong codepen tại đây

Lời Kết

Vậy Là Xong bài viết Hướng Dẫn Xây Dựng Tabs Với HTML, CSS và Javascript rồi nhé. Mình mong muốn sau bài topic này các bạn có thể nắm vững thêm về các kiến thức HTML, CSS và JS... Học thêm được nhiều kiến thức tuy không mới lắm nhưng cũng có thể giúp được phần nào đó của các bạn. Có thể tự tay mình làm những project không cần phải quá đặc biệt nhưng nó do chính bạn làm thì cũng coi như là thành quả trong quá trình bạn học được.

Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha

Chúc Các Bạn Thành Công!!

Giới Thiệu Chung

Hôm nay mình sẽ hướng dẫn các bạn xây dựng API xác thực với nodejs, express và mongodb.
API xác thực này sẽ bao gồm các chức năng đăng ký, đăng nhập, validate đầu vào, hash pass, xác thực với jwt,..

JWT Là Gì?

JSON Web Token (JWT) là một chuẩn mở (RFC 7519) định nghĩa một cách nhỏ gọn và khép kín để truyền thông tin một cách an toàn giữa các bên dưới dạng đối tượng JSON. Token bao gồm một header, một payload và một chữ ký.
Các bạn có thể tìm hiểu thêm về JWT tại đây.

JWT Hoạt Động Như Thế Nào?

Thì mình mới sưu tầm được trên google một hình vẽ khá chi tiết về cách hoạt động của JWT.

Ở đây mình cũng giải thích một tí cho các bạn hiểu thêm về cách hoạt động của JWT, đó là khi chúng ta đăng nhập một tài khoản và gửi các thông tin như email/password lên server thì nó sẽ ký một token và gửi token đó về phía client để lưu trữ.
Cứ như vậy mỗi lần client truy cập trang thì sẽ gửi request lên thì phải kèm theo token, sau đó server sẽ check mã này và gửi lại response thành công hay thất bại tương ứng ngược về client.

Mục Đích Bài Viết

Giúp các bạn ôn lại các kiến thức về NodeJS, cách xây dựng cũng như truy vấn database MongoDB.
Và học cũng như tìm hiểu thêm về JWT, cách xây dựng một API về xác thực và cách sử dụng postman.
Sau bài này các bạn có thể tự mình làm một trang web gồm các chức năng đăng nhập, đăng ký từ API mình xây dựng được. Đó cũng là một cách giúp các bạn có thể nắm vững các kiến thức được học.
Mình mong muốn các bạn đọc bài một cách tỉ mỉ, đọc không lướt nha.

Bắt Đầu Thôi Nào

Lên Ý Tưởng Xây Dựng API Xác Thực

Trước khi các bạn làm một cái gì đó thì trước hết phải hình thành ý tưởng, sau đó triển khai ý tưởng. Điều này giúp các bạn làm việc một cách có logic và khoa học hơn.
Trước khi chúng ta bắt tay vào code thì mình sẽ giúp các bạn nắm rõ hơn ý tưởng mình cần làm nha.
Chúng ta sẽ xây dựng các chức năng đăng nhập và đăng ký trước tiên đã. Đăng nhập và đăng ký thì chúng ta cần phải validate cho nó, mã hóa password,..Sử dụng JWT để tạo các private routes.
Ở đây mình chỉ nói sơ qua thôi để cho các bạn có thể hình dung ra được mình cần làm gì thôi nha. Các bạn cũng theo dõi các phần tiếp theo để biết thêm chi tiết nha.

Cài Đặt Và Thiết Lập

Trước tiên các bạn tạo cho mình một folder trong folder đó là nơi chứa các thư mục và chương trình mà chúng ta dùng để viết API xác thực.
Khởi tạo ứng dụng với file package.json
Trong thư mục gốc của ứng dụng của bạn và nhập npm init để khởi tạo ứng dụng của bạn với tệp package.json.
npm init
Sau đó các bạn cài đặt các module ở dưới để thiết lập ứng dụng nha.
Để mà cài các module trước hết các bạn phải cài đặt NodeJS tại đây.

• npm install express --save
  Module dùng để cài đặt framework express của nodejs giúp các bạn code một cách tối giản cũng như nhanh chóng hơn.
• npm install body-parse --save
  Package body-parser dùng để truy xuất dữ liệu trong form gửi lên server theo phương thức POST.
• npm install nodemon --save
  Tự động reload lại server khi bạn thay đổi code. Để khởi chạy server các bạn thêm "devStart": "nodemon app.js" vào file package.json nha. Các bạn mở terminal lên sau đó gõ npm run devStart để khởi chạy server nha.
• npm install mongoose --save
  Mongoose là một Object Document Mapper (ODM). Điều này có nghĩa là Mongoose cho phép bạn định nghĩa các object (đối tượng) với một schema được định nghĩa rõ ràng.
• npm install dotenv --save
  Dotenv là một biến môi trường dùng để bảo mật các thông tin quan trọng như username, password, url database,...Nếu chúng ta không lưu những thông tin mật vào file .env thì khi push source code lên github thì ai cũng có thể vào xem được và ai cũng biết username, password thì sẽ bị người khác chiếm đoạt và đánh cắp tài liệu rất là nguy hiểm nha.
• npm install @hapi/joi --save
  Module Joi này dùng để xác nhận dữ liệu, ví dụ như bạn khi bạn nhập bạn nhập password bắt buộc phải nhập trên 6 từ hay là email các bạn phải nhập đúng các kiểu kí tự để tạo email,..thì các bạn cần phải xác nhận cho nó bằng module joi.
• npm install bcryptjs --save
  Module dùng để mã hóa password.
• npm install jsonwebtoken --save
  Module này dùng để xác thực và tạo các private routes.
  Và đây cũng là package của mình khi đã cài đặt cũng như cấu hình xong các npm cho ứng dụng.
  

Trong thư mục ứng dụng của chúng ta bây giờ hiện có ba file đó là node_modules, package.json và package-lock.json

Authentication with JWT
     └── node_modules
     └── package-lock.json
     └── package.json

Bắt Đầu Code Thôi Nào

Thiết Lập Web Server

Trong thư mục gốc các bạn tạo cho mình file app.js, file này là file chính dùng để điều khiển mọi hoạt động chính của server.

const express = require("express");
const app = express();
const bodyParser = require('body-parser');
const port = 3333;

// Import routes
const indexUser = require("./routes/index")

// Gửi yêu cầu phân tích kiểu nội dung application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }))

// Gửi yêu cầu phân tích kiểu nội dung application/json
app.use(bodyParser.json())

// Route middlewares
app.use('/api/user',indexUser)

// Lắng nghe các requests
app.listen(port, function(){
    console.log("Server listening port",+port)
})

Trong thư mục gốc bạn tạo cho mình thư mục routes, trong thư mục router các bạn tạo cho mình file index.js. Tiếp đến tạo cho nó một Route handlers và thử chạy sever xem sau. Mục đích để các bạn test xem server có chạy không nha.

router.get('/',function(req, res, next){
res.send('Hello World')
})

Thiết Lập Database

Để mà có thể thiết lập được database thì các bạn đăng nhập tài khoản mongodb atlas tại đây nha. Sau khi các bạn bạn đã có tài khoản mongodb atlas thì tiếp đến cài đặt cấu hình để có thể kết nối mongodb atlas với ứng dụng của chúng ta. Để biết thêm chi tiết các bạn xem bước 3 trong bài viết của mình hướng dẫn deploy project nodejs lên heroku tại đây nha.
Sau đó các bạn copy link database mongodb đã tạo rồi paste vào project của mình là được nha. Các bạn tạo cho mình một file .env bên trong thư mục gốc.
Trong file này các bạn tạo một đường dẫn là DATABASE_URL=mongodb+srv://long:<password>@cluster0-b7d8c.mongodb.net/test?retryWrites=true&w=majority
Trong file app.js các bạn khai báo module dotenv với module mongoose và tạo đường dẫn mongodb.
// Khai báo dotenv
require('dotenv').config()
// path database
var mongoose = require('mongoose');

// Kết nối database
mongoose.connect(process.env.DATABASE_URL, 
{useNewUrlParser: true, useUnifiedTopology: true}).then(function() {
    console.log("Successfully connected to the database");    
}).catch(function(err) {
    console.log('Could not connect to the database. Exiting now...', err);
    process.exit();
});

Để biết nó đã kết nối hay chưa các bạn khởi động lại server sẽ biết nha.

Định Nghĩa Các Schema User Cho Mongoose

Bên trong thư mục gốc các bạn tạo cho mình thư mục modal bên trong thư mục modal các bạn tạo cho mình file user.modal.js.
Trong file user.modal.js cần tạo một đối tượng book và sẽ chứa ba thuộc tính là name, email và password.

const mongoose = require("mongoose")

const userSchema = mongoose.Schema({
    name:{required: true, type:String},
    email:{required: true, type:String},
    password:{required: true, type:String},
})
// Biên dịch mô hình từ schema
module.exports = mongoose.model('user', userSchema)

Tham số thứ nhất là tên riêng cho collection sắp được tạo ra cho mô hình của bạn, và tham số thứ hai là schema mà bạn muốn dùng để tạo ra mô hình.
Sau khi chúng ta đã setup xong hệ thống thì bây giờ mình sẽ đi đến từng chức năng cụ thể nha. Thì chức năng đầu tiên mình muốn giới thiệu đến là chức năng đăng ký.

Xử Lý Yêu Cầu Đăng Ký

Trong phần xử lý yêu cầu đăng ký chúng ta sẽ chia làm 3 phần:
Phần 1: Tạo user.
Phần 2: Validate user.
Phần 3: Check email có tồn tại hay không và mã hóa password.
Chúng ta sẽ bắt tay vào làm từng phần luôn nha.

Tạo User

Trong file index.js nằm trong thư mục routes, các bạn khai báo cho mình modal user lúc nãy mình vừa tạo.
const User = require("../modal/user.modal")
Thứ hai, các bạn tạo cho mình router Post /register. Trong router này chúng ta sử dụng để tạo user cũng như validate user, hash pass,...
Nó sẽ tạo một object rộng, chứa các dữ liệu user được truyền vào. Rồi lưu dữ liệu vào database đã được khởi tạo.
Chúng ta lưu dữ liệu cũng như log ra lỗi trong try{} catch{} nha. Nếu mà chúng ta nhập đầy đủ dữ liệu thì nó sẽ thực hiện trong hàm try rồi sau đó log ra dữ liệu của user.
Nếu bạn không nhập đầy đủ dữ liệu cũng như có lỗi xảy ra thì nó sẽ thực hiện hàm catch để log ra lỗi, các bạn có thể test thử trong postman để có thể hiểu rõ hơn.

router.post('/register', async function(req, res){

     // Tạo user
     const newuser = new User();
     newuser.name = req.body.name
     newuser.email = req.body.email
     newuser.password = req.body.password
     try{
         const User = await newuser.save()
         res.send(User);
     }catch(err){
         res.status(400).send(err);
     }
})

Chúng ta cùng test API này bằng postman để tạo user thử nha.

Validate User

Sau khi chúng ta tạo user xong thì sẽ dến phần xác nhận user. Xác nhận ở đây là chúng ta xác nhận đầu vào của user. Ví dụ như: bạn nhập có đúng email không, password phải dài hơn 6 kí tự,...
Thì để xác thực như vậy chúng ta sử dụng module Joi nha. Module này mình đã cài đặt ở trên rồi đó.
Trong thư mục gốc các bạn tạo cho mình folder có tên là auth trong thư mục đố các bạn tiếp tục tạo cho mình file validation.js.
File validation.js sẽ là file mà chúng ta dùng để điều khiển mọi hoạt động chính liên quan đến xác nhận.
Trước tiên các bạn khai báo cho mình module Joi. Các bạn có thể tham khảo thêm về joi tại đây
Data ở đây là tham số chúng ta truyền vào dùng để xác nhận và đó là các trường dữ liệu như: name, email, password.

const Joi = require('@hapi/joi');

// Register Validate
const registerValidation = function(data){
    const schema = Joi.object ({
        name: Joi.string()
                 .min(4)
                 .required(),
        email: Joi.string()
                   .email()
                   .min(6)
                   .required(),
        password: Joi.string()
                   .min(6)
                   .required(),
                          
    })
   return  schema.validate(data)
}
module.exports.registerValidation = registerValidation

Để mà nó có thể hoạt động được chúng ta cần phải import registerValidation từ file validation.js vào trong file index.js của routes.
const {registerValidation} = require("../auth/validation")
Cũng trong router Post /register các bạn code thêm một đoạn mã nữa ở trên thằng tạo user để có thể xác nhận đầu vào cho nó.

 // Validate user
    const{ error } = registerValidation(req.body);
     if(error) return res.status(400).send(error.details[0].message)

Data được truyền vào đó là req.body, nếu gặp lỗi thì log ra thông báo.
Chúng ta cùng xem thử nó xác nhận đầu vào như thế nào nhé
Chúng ta để ý trong password mình chỉ viết 3 kí tự thì nó liền log ra thông báo ngay, chúng ta đã yêu cầu là password phải 6 kí tự trở lên mới đúng.

Check Email Có Tồn Tại Hay Không Và Mã Hóa Password

Khi chúng ta đăng ký một tài khoản thì email là phần quan trọng nhất mỗi tài khoản sẽ có một email riêng. Name và password có thể giống nhau nhưng email là không bao giờ giống nhau được.
Vì thế chúng ta cần check email user để xem email họ đăng ký có trùng với email đã đăng ký hay chưa.
Cũng trong router Post /register các bạn code thêm một đoạn mã ở dưới thằng xác nhận user để có thể check email có tồn tại hay không.
Nó sẽ tìm trong database xem thử thằng email mà mình nhập nó có trùng với email nào trong database hay không. Nếu có thì sẽ log ra thông báo.

     // Kiểm tra email có tồn tại hay không
     const emailExist = await User.findOne({email: req.body.email});
     if(emailExist) return res.status(400).send("Email đã tồn tại")

Chúng ta xem thử nó kiểm tra email có tồn tại hay không như thế nào nhé
Bây giờ chúng ta thử đăng ký email trùng với email mà mình đã tạo rồi và xem thử kết quả nha.

Mã Hóa Password

Mã hóa password là phần rất là quan trọng và không thể thiếu trong mỗi website khi tạo user. Mục đích chính là bảo mật người ví dụ như khi các hacker tấn công website và lấy được database thì họ sẽ không thể chiếm đoạt được tài khoản của chúng ta vì password đã được mã hóa.
Trong file index.js của routes các bạn khai báo module bcrypt để có thể hash pass nha.
const bcrypt = require("bcryptjs")
Cũng trong router Post /register các bạn code thêm một đoạn mã nữa ở phía dưới thằng check email tồn tại nha để có thể mã hóa password cho nó.
Với bcrypt ta cần chú ý tới rounds truyền vào để sinh salt. Với rounds càng lớn thì càng bảo mật nhưng thời gian xử lý cũng mất nhiều hơn.

     // Mã hóa password
     
     const salt = await bcrypt.genSalt(10);
     const hashPass = await bcrypt.hash(req.body.password, salt)// mã hóa password truyền vào và gán nó vào biến hashPass để có thể lưu pass vào database.

Trong phần tạo user các bạn thay đổi một chút nha. Thay đổi newuser.password = req.body.password thành newuser.password = hashPass nha để nó có thể lưu pass đã thay đổi vào database.
Chúng ta cùng xem thử nó mã hóa ra sao nhé

Vậy là chúng ta đã xong phần đăng ký tiếp theo là đến phần đăng nhập nha.

Xử Lý Yêu Cầu Đăng Nhập

Trong phần đăng nhập mình chia làm 2 phần.
Phần 1: Validate user.
Phần 2: Check email và password.
Chúng ta sẽ bắt tay vào làm từng phần luôn nha.

Validate User

Thì thằng này cũng tương như thằng xác nhận user của đăng ký thôi, chỉ khác ở chổ từ ba trường bây giờ mình chỉ xác nhận 2 trường thôi.
Cũng trong file validation.js các bạn thêm cho mình phần xác nhận user để xử lý đăng nhập và exports nó ra là được.

// Login Validate
const loginValidation = function(data){
    const schema = Joi.object ({
        email: Joi.string()
                   .email()
                   .min(6)
                   .required(),
        password: Joi.string()
                   .min(6)
                   .required(),
    })
   return  schema.validate(data)
}
module.exports.loginValidation = loginValidation

Để mà nó có thể hoạt động được chúng ta cần phải import loginValidation từ file validation.js vào trong phần khai báo trước đó của chức năng đăng ký.
const {registerValidation, loginValidation} = require("../auth/validation")
Các bạn tạo cho router Post/login trong router này chúng ta sẽ sử dụng để xác nhận user, kiểm tra email và password.
Data được truyền vào đó là req.body, nếu gặp lỗi thì log ra thông báo.

router.post('/login', async function(req, res){
    // Validate user
    const{ error } = loginValidation(req.body);
     if(error) return res.status(400).send(error.details[0].message)
})

Chúng ta cùng xem thử nó xác nhận đầu vào khi login như thế nào nhé
Chúng ta để ý trong password mình chỉ viết 3 kí tự thì nó liền log ra thông báo ngay, chúng ta đã yêu cầu là password phải 6 kí tự trở lên mới đúng.

Check email và password

Để có thể đăng nhập được thì chúng ta cần phải kiểm tra email và password mình đã được tạo hay chưa và đăng nhập thông tin có chính xác không.
Cũng trong router Post /register các bạn code thêm một đoạn mã ở dưới thằng xác nhận user để có thể check email và password có chính xác hay không.
Trong phần kiểm tra email các bạn sẽ tìm trong database có email nào trùng với email mình nhập không, khi chúng ta sử dụng findOne thì nó sẽ log ra toàn dữ liệu của user có email trùng với email mình nhập. Nếu email nhập sai thì nó sẽ log ra thông báo.
Trong phần kiểm tra password thì chúng ta sẽ nhập password đăng nhập vào và mã hóa password đó đi, sau đó kiểm tra password đã được mã hóa có trùng với password cũng đã được mã hóa và lưu trong database chưa. Nếu password nhập sai thì nó sẽ log ra thông báo.
Còn nếu tất cả các trường hợp trên từ validate đến check email và password đều chính xác thì sẽ log ra thông báo "Bạn đã đăng nhập thành công".

     // Kiểm tra email
    const userLogin = await User.findOne({email: req.body.email});
    if(!userLogin) return res.status(400).send("Không tìm thấy email")

     // Kiểm tra password
    const passLogin = await bcrypt.compare(req.body.password, userLogin.password);
    if(!passLogin) return res.status(400).send("Mật khẩu không hợp lệ")

     res.send("Bạn đã đăng nhập thành công")

Chúng ta cùng xem thử nếu chúng ta đăng nhập chính xác thì nó sẽ hiển thị như thế nào nhé, còn các trường hợp khác các bạn tự test nha.

Xử Lý Xác Thực Bằng JWT

JWT là gì và cách hoạt động của nó như nào mình đã nói ở phần mở đầu rồi, giờ mình không nói lại nữa mà bắt tay vào làm luôn nha.
Trong phần xử lý xác thực bằng jwt chúng ta sẽ chia làm 3 phần:
Phần 1: Tạo Token.
Phần 2: Verify Token.

Tạo Token

Để có thể tạo được token các bạn cần phải khai báo module JWT mà chúng ta đã cài đặt ở trên rồi ấy.
const jwt = require("jsonwebtoken")
Vậy bây giờ làm thế nào để có thể tạo và assign token. Trong router Post/login các bạn thay thế cho mình thông báo này res.send("Bạn đã đăng nhập thành công") khi đăng nhập thành công. Bằng một đoạn code dùng để tạo mã JWT và gửi về cho user.
Trong file .env các bạn tạo cho mình mã secretkey(SECRET_TOKEN), mã này phải bảo mật tuyệt đối nên mình phải lưu nó và biến môi trường.
Sau đó chúng ta có thể add nó vào header với bất kì loại định danh nào mà chúng ta mong muốn. Nói đơn giản là token được tạo sẽ được lưu vào headers.

    // Ký và tạo token
   const token = jwt.sign({_id: userLogin._id}, process.env.SECRET_TOKEN)
   res.header("auth-token", token).send(token);

Chúng ta cùng xem thử nó tạo token như thế nào nhé.

Sau khi các bạn tạo token xong bây giờ các bạn cần phải verify token.

Verify Token

Trong thư mục auth các bạn tạo cho mình thêm file checkToken.js trong file này các bạn sẽ code cho mình một đoạn mã dùng để verify Token.

const jwt = require("jsonwebtoken")

module.exports = function(req, res, next){
   const token = req.header('auth-token'); // sẽ gửi yêu cầu lên header để tìm                                                   token ra rồi verify. 
   // Nếu bạn không truyền lên token thì nó sẽ gửi thông báo 
   if(!token) return res.status(401).send("Vui lòng đăng nhập để được truy cập")
   try{
        const checkToken = jwt.verify(token, process.env.SECRET_TOKEN) // kiểm tra token
       req.user = checkToken //lưu token lại để có thể kiểm tra 
       next()
   }catch(err){
       res.status(400).send('Token không hợp lệ')// thông báo lỗi khi bạn nhập sai token.
   }
}

Để có thể sử dụng được các bạn cần phải import file checkToken.js vào trong file index.js.
const verify = require("../auth/checkToken")
Các bạn tạo cho mình một router Get / để có thể tạo cho nó một middleware dùng để xác thực token có hợp lệ không.

router.get('/', verify, function(req, res){
    res.send("Chào mừng bạn đến với website của mình. Chúc bạn một ngày vui vẻ")
})

Chúng ta thử lấy token đã tạo ở trên để gọi API Get /
Cái tên mà mình gạch chân màu đỏ ấy các bạn phải nhập chính xác như trong code nha

Chúng ta cùng test thêm vài trường hợp không truyền mã token hoặc gửi sai mã token xem nó như thế nào nhé

Vậy là xong rồi nha, các bạn có thể tham khảo code mà mình đã push lên github tại đây nha

Lời Kết

Vậy Là Xong bài Hướng Dẫn Xây Dựng NodeJS API Xác Thực Với JWT rồi nhé. Mình mong muốn sau bài topic này các bạn có thể nắm vững thêm về các kiến thức NodeJS, Express, MongoDB và Authentication, JWT,... Và có thể tự tay mình làm những project không cần phải quá đặc biệt nhưng nó do chính bạn làm thì cũng coi như là thành quả trong quá trình bạn học được.

Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.

Chúc Các Bạn Thành Công!!

Giới Thiệu Chung

Hôm nay mình sẽ hướng dẫn các bạn xây dựng một web CRUD Books với NodeJS, Express và MongoDB.
CRUD là gì ?
CRUD có nghĩa là Create, Read, Update và Delete. Bài viết này mình sẽ hướng dẫn các bạn tạo, đọc, cập nhật và xóa dữ liệu cuốn sách,..

Mục Đích Bài Viết

Giúp các bạn ôn lại các kiến thức về NodeJS, cách xây dựng cũng như truy vấn database MongoDB.
Nắm vững các kiến thức và cách hoạt động về Get, Post request.
Sau bài viết này các bạn có thể tự xây dựng cho mình một web app tương tự như: todo list,...Đó cũng là một cách giúp các bạn có thể nắm vững các kiến thức được học.
Mình mong muốn các bạn đọc bài một cách tỉ mỉ, đọc không lướt nha.

Bắt Đầu Thôi Nào

Lên Ý Tưởng Về Web CRUD Books

Trước khi các bạn làm một cái gì đó thì trước hết phải hình thành ý tưởng, sau đó triển khai ý tưởng. Điều này giúp các bạn làm việc một cách có logic và khoa học hơn. Trước hết mà chúng ta bắt tay vào code thì mình sẽ giúp các bạn nắm rõ hơn ý tưởng mình cần làm nha. Ý tưởng cái này cũng đơn giản thôi nha.
Chúng ta muốn tạo book thì sẽ tạo ra các trường khi mình nhập dữ liệu vào thì sẽ lưu vào database.
Muốn hiển thị các book mà mình đã tạo thì chúng ta sẽ find dữ liệu trong database sau đó hiển thị ra màn hình.
Muốn cập nhật book chúng ta sử dụng ID để cập nhật nha. Mỗi book sẽ có mỗi id riêng chúng ta mà muốn chỉnh sửa chỉ cần find ID book cần chỉnh sửa dữ liệu rồi sau đó lưu lại database.
Còn muốn xóa thì chỉ cần nhập ID book muốn xóa sau đó xóa book đó khỏi database thôi.
Ở đây mình chỉ nói sơ qua thôi để cho các bạn có thể hình dung ra được mình cần làm gì thôi nha.

Cài Đặt Và Thiết Lập

Trước tiên các bạn tạo cho mình một folder trong folder đó là nơi chứa các thư mục và chương trình mà chúng ta dùng để viết cho ứng dụng CRUD books.
Cài đặt các module để thiết lập ứng dụng
Để mà cài các module trước hết các bạn phải cài đặt NodeJS tại đây.

• npm install --save express-generator
  Module này nó sẽ giúp chúng ta tạo nhanh khung sườn cho ứng dụng.
• express --view=pug
  Nó sẽ tạo cho các bạn phần view engine và được setup là Pug.
• npm install nodemon --save
  Tự động reload lại server khi bạn thay đổi code. Để khởi chạy server các bạn thêm "devStart": "nodemon app.js" vào file package.json nha. Các bạn mở terminal lên sau đó gõ npm run devStart để khởi chạy server nha.
• npm install mongoose --save
  Mongoose là một Object Document Mapper (ODM). Điều này có nghĩa là Mongoose cho phép bạn định nghĩa các object (đối tượng) với một schema được định nghĩa rõ ràng.
• npm install dotenv --save
  Dotenv là một biến môi trường dùng để bảo mật các thông tin quan trọng như username, password, url database,...Nếu chúng ta không lưu những thông tin mật vào file .env thì khi push source code lên github thì ai cũng có thể vào xem được và ai cũng biết username, password thì sẽ bị người khác chiếm đoạt và đánh cắp tài liệu rất là nguy hiểm nha.

Bắt Đầu Code Thôi Lào

Thiết Lập Web Server

Trong file app.js các bạn bỏ cho mình router user và tạo cổng port cho web server. Trong folder routes các bạn cũng bỏ cho mình file user.js nha, đó là các file mặc định khi mình chạy npm install --save express-generator không cần thiết thì mình bỏ nha.

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var port = 5555;
var indexRouter = require('./routes/index');
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// setup router
app.use('/', indexRouter);

// catch 404 and forward to error handler
.........
.........
.........

// error handler
.........
.........
.........
app.listen(port,function(){
  console.log("Server listening connect port" + port)
})
module.exports = app;

Trong thư mục router có file index.js, các bạn tạo cho nó một Route handlers và thử chạy sever xem sau. Mục đích để các bạn test xem server có chạy không nha.

router.get('/',function(req, res, next){
res.send('Hello Everyone')
})

Thiết Lập Database

Cài đặt mongodb download tại đây, các bạn tạo cho mình một file .env bên trong thư mục gốc nha. Trong file này các bạn tạo một đường dẫn là DB_URL=mongodb://localhost/CRUD_books
Trong file app.js các bạn khai báo module dotenv với module mongoose và tạo đường dẫn mongodb.
// Khai báo dotenv
require('dotenv').config()
// path database
var mongoose = require('mongoose');
mongoose.connect(process.env.DB_URL,{useNewUrlParser:true, useUnifiedTopology: true });
Bây giờ mà các bạn bạn muốn chạy được server thì phải khơi chạy database nha.

Định Nghĩa Các Schema Books Cho Mongoose

Bên trong thư mục gốc các bạn tạo cho mình thư mục modal bên trong thư mục modal các bạn tạo cho mình file book.modal.js.
Trong file book.modal.js cần tạo một đối tượng book và sẽ chứa ba thuộc tính là title, description và author.

var mongoose = require('mongoose');
var book = new mongoose.Schema({
    title: { type: String, required: true },
    description: { type: String, required: true },
    author: { type: String, required: true }
})
// Biên dịch mô hình từ schema
module.exports = mongoose.model('books', book);

Tham số thứ nhất là tên riêng cho collection sắp được tạo ra cho mô hình của bạn, và tham số thứ hai là schema mà bạn muốn dùng để tạo ra mô hình.

Định Nghĩa Các Router Cho CRUD Books

Trong file index.js nằm bên trong thư mục routes, tạo các phương thức để xử lý các hoạt động CRUD. Các bạn khai báo cho mình modal của Books nha.
var Book = require('../modal/book.modal')

Tạo Books

Giao diện để tạo book
Trước tiên để tạo book các bạn cần phải có một giao diện để điền các thông tin cần có để tạo book.
Trong thư mục views có file index.pug. Trong file đó các bạn tạo cho mình bộ khung gồm có form có chứa các thẻ label, input để điền các thông tin cần có để tạo book bao gồm: title, description và author.
Các bạn nhớ điền đúng các giá trị trong thuộc tính name trong thẻ input trùng với các thuộc tính trong file modal nha.

extends layout

block content
  div.title-book
    h1 CRUD BOOKS    

  //- Create books
  div.content_book
    h2 Create Books
    form(action="/" method="POST")
      div
        label(for="tittle") Title
        input(type="text" name="title" required="required")
      div 
        label(for="tittle") Description
        input(type="text" name="description" required="required")
      div 
        label(for="tittle") Author
        input(type="text" name="author" required="required")
      div  
       button(type="submit") Create

Routes Get/
Để mà có thể load được giao diện ra và tạo book thì chúng ta cần phải render nó ra bằng phương thức Get đúng không nào.

router.get('/', function (req, res, next) {
  res.render('index')
});

Routes Post/
Sau khi chúng ta đã tạo giao diện cho nó xong rồi thì tiếp đến. Trong thư mục routes có file index.js. Các bạn tạo cho mình phương thức POST để khi submit dữ liệu thì nó sẽ được gửi lên server và lưu trong database nha.

// Create books
router.post('/', function (req, res, next) {
  var newbook = new Book()
  newbook.title = req.body.title;
  newbook.description = req.body.description;
  newbook.author = req.body.author;
  newbook.save().then(function (err) {
    if (err) { console.log(err) }
  })
  res.redirect('/')
})

Mình giải thích ở đây một chút là khi mình post ngầm dữ liệu để tạo book thì nó sẽ tạo ra một cái object rỗng và gán vào biến newbook, object rỗng này được tạo ra từ thằng new thì trong object này sẽ chứa các title, description và author mà chúng ta đã req.body để truy xuất dữ liệu. Sau đó lưu nó vào database.
Bây giờ chúng ta cùng xem thử giao diện và nguyên lý hoạt động có đúng như chúng ta mong đợi không nha.

Thì như chúng ta đã thấy thì giao diễn nó khá chi là củ chuối bởi vì pug nó cũng giống như html thôi nó cũng chỉ xây khung sườn là chính thôi còn muốn đẹp thì phải css cho nó. Phần css mình sẽ làm ở phần sau nha.
Bây giờ các bạn xem thử trong database nó có lưu lại không nha. Nếu nó có lưu thì xem như phần tạo book coi như hoàn thành được 90% rồi giờ chỉ còn css cho nó thôi là ổn áp ngay.

Đọc Books

Đọc books có nghĩa là chúng ta in ra các dữ liệu của books mà mình nhập và lưu trong database như: title, description, author.
Routes Get/
Các bạn muốn hiển thị ra các dữ liệu của book thì chúng ta sử dụng phương thức Get . Chúng ta vừa Get giao diện cũng vừa Get ra dữ liệu.
Các bạn find dữ liệu book trong database ra nha. Sử dụng async, await để find dữ liệu.
Async await mục đích chính của nó là chuyển bất đồng bộ thành đồng bộ, nó sẽ chạy từ trên xuống dưới, nó sẽ find dữ liệu rồi mới đến việc render.
Nên các bạn gán cho nó một biến để có thể sử dụng để render ra được dữ liệu ra nha.

// Read books
router.get('/', async function (req, res, next) {
  let books = await Book.find()
  res.render('index', { books: books })
});

Giao diện để đọc dữ liệu của book
Tiếp đến bây giờ chúng ta phải hiển thị dữ liệu của nó ra. Trong thư mục views có file index.pug , chúng ta sẽ lặp qua biến books mà mình đã khai báo trong res.render để có thể truy vấn vào database và hiển thị ra ngoài màn hình.
Trong phần read book các bạn hiển thị ra bốn thuộc tính nha đó là: title, description, author và id. Tại sao lại hiển thị ra id, mục định của nó hiển thị ra để có thể lấy giá trị id làm các phần cập nhật books và delete books, các bạn theo dõi các phần tiếp theo để biết thêm chi tiết.

//- Read books
  div.content_book   
    h2 Read Books
    div.list_books
     each book in books
        ul
          li
           span Title:&nbsp
           =book.title
          li
           span Description:&nbsp
           =book.description
          li
           span Author:&nbsp
           =book.author
          li
           span ID:&nbsp
           =book._id 

Chúng ta cùng xem thử nó có hiển thị dữ liệu của book ra không nha.

Cập Nhật Books

Mình cũng nó sơ qua nguyên lý hoạt động là sẽ sử dụng id để cập nhật book, sử dụng id như thế nào thì đơn giản thôi chúng ta sẽ copy cái id mà mình đã hiển thị ra trong phần đọc books sao đó dán vào phần cập nhật bookks. sau khi dán vào thì chúng ta sẽ phải req.body thẻ id đó.
Rồi tiếp đến sẽ find id trong database có trùng với id mà mình nhập không, cuối cần các bạn chỉ cần thay đổi dữ liệu rồi lưu vào database thôi.
Giao diện để cập nhật dữ liệu book
Để mà có thể cập nhật được books thì chúng ta cần phải tạo cho nó một cái giao diện để có thể cập nhật books nó cũng tương tự như thằng tạo books thôi chỉ khác chỗ là thêm một trường id nữa thôi.
Lưu ý: Và các bạn nên nhớ là trong form thì action của thằng tạo books phải khác thằng cập nhật books và thằng xóa books nhỡ để nó không phải bị trùng nhau gây nhiễu loạn thông tin,..

//- Update books        
  div.content_book 
    h2 Update Books
    form(action="/update" method="POST")
      div
        label(for="tittle") ID
        input(type="text" name="id" required="required")
      div
        label(for="tittle") Title
        input(type="text" name="title" required="required")
      div 
        label(for="tittle") Description
        input(type="text" name="description" required="required")
      div 
        label(for="tittle") Author
        input(type="text" name="author" required="required")
      button(type="submit") Update   

Routes Post/update
Sau khi chúng ta đã tạo giao diện cho nó xong rồi thì tiếp đến. Trong thư mục routes có file index.js. Các bạn tạo cho mình phương thức POST/update để khi submit cập nhật dữ liệu thì nó sẽ được gửi lên server và lưu lại trong database nha.
Các hoạt động như thế nào thì mình cũng đã nói ở trên rồi nha.

// Update books
router.post("/update", function (req, res, next) {
  var id = req.body.id;
  Book.findById(id, function (err, book) {
    if (err) { console.log(err) }
    book.title = req.body.title
    book.description = req.body.description
    book.author = req.body.author
    book.save()
  })
  res.redirect('/')
})

Bây giờ các bạn thử sửa lại books sau đó cập nhật lại xem thử nó có thay đổi không nha.

Mình sẽ đổi author là Long Code Rạo thành Long Coder, sau đó mình sẽ submit để xem phần read book và database nó có thay đổi không nha.

Xóa Books

Cách hoạt của xóa books cũng tương tự như cập nhật books cũng sử dụng id để xóa khác ở chỗ một thằng thì cập nhật còn thằng kia là xóa mà thôi.
Giao diện để xóa dữ liệu book
Giao diện thằng này cũng đơn giản thôi chỉ chứa một trường id thôi nhưng các bạn nhớ rằng là action của mỗi thằng phải khác nhau nha.

  //- Delete books     
  div.content_book   
    h2 Delete Books
    form(action="/delete" method="POST")
      div
        label(for="id") ID
        input(type="text" name="id" required="required")
      button(type="submit") Delete

Routes Post/delete
Trong phần này các bạn chỉ cần tìm trong database có id nào mà trùng với id mà mình nhập không sau đó xóa thôi.

// Delete books
router.post("/delete", function (req, res, next) {
  var id = req.body.id
  Book.findByIdAndDelete(id, function (err) {
    if (err) { console.log(err) }
  })
  res.redirect('/')
})

Chúng ta cùng xem thử trong database nó có xóa không nha và phần đọc books có hiển thị dữ liệu của books không nha.

Và đây là kết quả khi chúng ta submit xóa dữ liệu books

và tất cả đều trống trơn trong database cũng bị xóa.
Vậy là chúng ta đã hoàn thành xong các chức năng CRUD, bây giờ chúng ta chỉ cần css lại cho nó nữa là ok.

Viết CSS Cho CRUD Books

Trong file style.css chúng ta sẽ cho bốn cái chức năng trên cùng một hàng bằng cách sử dụng float và width.
Tiếp đến các bạn chỉnh các màu width cũng như các font sao cho đẹp và phù hợp nhất nha.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  padding: 2rem;
  font-family: tahoma;
}

li {
  list-style: none;
}

label {
  margin-bottom: .2rem;
  font-weight: 700;
  display: block;
}

.content_book {
  width: 25%;
  display: block;
  float: left;
}

.title-book h1 {
  text-align: center;
  color: red;
  margin-bottom: 1.5rem;
}

.content_book h2 {
  color: #006600;
  margin-bottom: .5rem;
}

div {
  margin-bottom: .5rem;
}

input[type="text"] {
  width: 80%;
  padding: 5px;
  border-radius: 3px;
  outline: none;
  border: 1px solid #a5a5a5;
}

button {
  background: blue;
  cursor: pointer;
  text-transform: uppercase;
  padding: 0.5rem;
  border-radius: 5px;
  color: #fff;
  border: none;
}

.content_book ul {
  background: aqua;
  padding: 0.5rem;
  width: 100%;
  margin-bottom: .5rem;
}

.content_book ul li {
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: .3rem;
}

.content_book ul li span {
  font-weight: bold;
}
.content_book .list_books{
  width: 90%;
  height: 220px;
  overflow-y: scroll;
}

Các bạn sẽ thấy tại sao lại phải có thanh scroll bởi vì khpi chúng ta tạo rất nhiều books thì số lượng mà render ra rất nhiều và dài làm cho giao diện không được đẹp. Vì thế chúng ta sẽ cho height cố định, overflow-y: scroll.
Khi mà số lượng books vượt qua height cố định thì sẽ xuất hiện scroll.

Reponsive Giao Diện Cho CRUD Books

Trong file layout.pug các bạn nhớ add thẻ meta này để nó có thể reponsive giao diện nha.
meta(name='viewport', content='width=device-width, initial-scale=1')
Mobile
Trong file style.css các bạn chỉ cần cho width:100% cho mỗi chức năng là được.

/* Mobile */
@media only screen and (min-width:240px) and (max-width:480px) {
  html,
  body {
      padding: 1rem;
      font-family: tahoma;
  }
  .content_book {
      width: 100%;
      margin-bottom: 2rem;
  }
}

Và đây là giao diện mobile khi chúng ta đã reponsive nha.

Tablet
Thì cũng đơn giản thôi trong file style.css các bạn chỉ cần cho width:50% cho mỗi chức năng là được.

/* Tablet */
@media (min-width:480px) and (max-width:768px) {
  .content_book {
      width: 50%;
  }
}

Và đây là giao diện tablet khi chúng ta đã reponsive nha.

Vậy là xong rồi nha, các bạn có thể tham khảo code mà mình đã push lên github tại đây nha

Lời Kết

Vậy Là Xong bài Hướng Dẫn Xây Dựng Web CRUD Books Với NodeJS, Express và MongoDB rồi nhé. Mình mong muốn sau bài topic này các bạn có thể nắm vững thêm về NodeJS, Express và MongoDB và có thể tự tay mình làm những project không cần phải quá đặc biệt nhưng nó do chính bạn làm thì cũng coi như là thành quả trong quá trình bạn học được.

Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.

Chúc Các Bạn Thành Công!!

Giới Thiệu Chung

Hôm nay mình sẽ hường dẫn các bạn xây dựng một Restful CRUD API với nodejs, express và mongodb.
Các bạn cũng đã nghe khá nhiều về rest api hay restful api đúng không nào. Thì hôm nay mình cũng sẽ hướng dẫn các tạo một restful CRUD API.
Để các bạn hiểu rõ hơn mình sẽ giải thích api là gì?, rest là gì?,...

API là gì?

API (application programming interface) là giao diện dùng để tương tác giữa ứng dụng này với ứng dụng khác. API có thể trả về dữ liệu mà bạn cần cho ứng dụng của mình ở những kiểu dữ liệu phổ biến như JSON hay XML. Facebook, google là hai ứng dụng khá quen thuộc. Nó có những API riêng để cho chúng ta sử dụng để nó có thể lấy được thông tin của người dùng.

Rest là gì?

REST là từ viết tắt cho REpresentational State Transfer. REST không phải là một chuẩn hay một giao thức mà nó là một kiểu kiến trúc để viết API. Một web service là một tập hợp các giao thức và được sử dụng cho mục đích trao đổi giữa ứng dụng và hệ thống. Web service dựa trên các kiến trúc REST được biết như RESTful webservice . Những webservice này sử dụng phương thức HTTP để triển khai các định nghĩa kiến trúc REST.

RESTful API là gì?

RESTful API là một tiêu chuẩn dùng trong việc thết kế các API cho các ứng dụng web để quản lý các resource(tài nguyên). RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến nhất ngày nay. Trọng tâm của REST quy định cách sử dụng các HTTP method (như GET, POST, PUT, DELETE...) và cách định dạng các URL cho ứng dụng web để quản lý các resource. RESTful không quy định logic code ứng dụng và không giới hạn bởi ngôn ngữ lập trình ứng dụng.
RESTful hoạt động như thế nào?
Có 4 hoạt động chủ yếu ta có thể kể đến khi làm việc với server: lấy dữ liệu ở một định dạng nào đó (JSON), tạo dữ liệu mới, cập nhật dữ liệu, xóa dữ liệu. REST hoạt động chủ yếu dựa vào giao thức HTTP. Các hoạt động cơ bản nêu trên sẽ sử dụng những phương thức HTTP riêng.

GET: lấy dữ liệu
POST: tạo mới
PUT: cập nhật (thay đổi)
DELETE: Xóa dữ liệu

Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa. Mỗi phương thức trên phải được API gọi thông qua để gửi chỉ thị cho server phải làm gì.

Mục Đích Của Bài Viết

Thì bài viết này mình viết nhằm mục đích là hướng dẫn các bạn viết một RESTful API. Và giới thiệu RESTful API là gì?
Chúng ta sẽ xây dựng một ứng dụng todo list đơn giản. Chúng ta sẽ xây dựng các API còn để tạo, liệt kê, chỉnh sửa và xóa todo list.
Giúp các bạn hiểu rõ hơn về RESTful API, CRUD cũng như ôn lại các kiến thức về NodeJS, Express và MongoDB.
Giới thiệu cho các bạn công cụ Postman dùng để đọc API.
Mình viết bài này khá rõ ràng và tỉ mỉ mình mong các bạn đọc một cách đầy đủ nhất.

Bắt Đầu Thôi Nào

Cài Đặt Và Thiết Lập

Trước tiên các bạn tạo cho mình một folder trong folder đó là nơi chứa các thư mục và chương trình mà chúng ta viết cho các API.
Cài đặt các module để thiết lập chương trình như:
Để mà cài các module trước hết các bạn phải download nodejs.

• npm install --save express-generator
  Module này nó sẽ giúp chúng ta tạo nhanh khung sườn cho ứng dụng.
• express --view=pug
  Nó sẽ tạo cho các bạn phần view engine và được setup là Pug.
• npm install nodemon --save
  Tự động reload lại server khi bạn thay đổi code. Để khởi chạy server các bạn thêm "devStart": "nodemon app.js"vào file package.json nha. Các bạn mở terminal lên sau đó gõ npm run devStart để khởi chạy server nha.
• npm install mongoose --save
  Mongoose là một Object Document Mapper (ODM). Điều này có nghĩa là Mongoose cho phép bạn định nghĩa các object (đối tượng) với một schema được định nghĩa rõ ràng.
• npm install dotenv --save
  Dotenv là một module tải các biến môi trường từ tệp .env vào process.env. Lưu trữ cấu hình trong .env tách biệt với code để bảo mật thông tin.

Bắt Đầu Code Thôi Nào

Thiết lập Web Server

Trong file app.js các bạn bỏ cho mình router user và tạo cổng port cho web server. Trong folder routes các bạn cũng bỏ cho mình file user.js nha, đó là các file mặc định khi mình chạy npm install --save express-generator không cần thiết thì mình bỏ thôi nha

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var port = 5000;
var indexRouter = require('./routes/index');
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// setup router
app.use('/', indexRouter);

// catch 404 and forward to error handler
.........
.........
.........

// error handler
.........
.........
.........
app.listen(port,function(){
  console.log("Server listening connect port" + port)
})
module.exports = app;

Trong thư mục router có file index.js, các bạn tạo cho nó một Route handlers và thử chạy sever xem sau. Mục đích để các bạn test thử server có chạy không nha.

router.get('/',function(req, res, next){
res.send('Hello World')
})

Thiết Lập Database

Cài đặt mongodb download tại đây, các bạn tạo cho mình một file .env. Trong file này các bạn tạo cho mình một đường dẫn MONGOURL=mongodb://localhost/todolist
Trong file app.js các bạn khai báo module dotenv với module mongoose và tạo đường dẫn mongodb
// path database
mongoose.connect(process.env.MONGOURL,{useNewUrlParser:true, useUnifiedTopology: true });
Bây giờ mà các bạn bạn muốn chạy được server thì phải chạy database nha.

Định Nghĩa Schema TodoList Trong Mongoose

Các bạn tạo cho mình thư mục modal bên trong thư mục gốc của ứng dụng.
Bên trong thư mục modal thì mình sẽ tạo một file todo.modal.js. Đây cũng là phần quan trọng nhất trong topic này, các bạn nhớ đọc cho kĩ nha.

var mongoose = require('mongoose')
var todo = new mongoose.Schema({
    todolist:{ type:String, required:true}
  });
 module.exports = mongoose.model('todolist', todo);

Trong file todo.modal.js chúng ta sẽ khai báo module mongoose và chúng ta sẽ tạo cho nó một schema để chứa fields todolist.

Định Nghĩa Router Cho TodoList

Trong file index.js nằm bên trong thư mục routes, tạo các phương thức để xử lý các hoạt động CRUD. Các bạn khai báo cho mình modal của Todo List nha.
var Todo = require('../modal/todo.modal')

Tạo Và Lưu Các Todo List

Cũng trong file index.js thì các bạn tạo cho mình phương thức Post(gửi dữ liệu từ client lên server). Nó sẽ tạo một object rộng, chứa các todo list được truyền vào. Rồi lưu nó vào database đã được khởi tạo.

// Create TodoList
router.post('/', function(req,res,next){
  var newTodo = new Todo()
  newTodo.todolist =  req.body.todolist;
  newTodo.save(function(err,TodoList ){
    if (err)  console.log(err);
    res.json(TodoList)
  })
})

Đọc Tất Cả Các Todo List

Cũng tương tự như ở trên mà thay đổi ở chỗ là thay Get bằng Post thôi. Thì khi sử dụng get(đọc dữ liệu từ server trả về cho client). Chúng ta sẽ tìm trong database todolist có bao nhiêu dữ liệu thì sẽ trả về bấy nhiêu dữ liệu mà tìm được trong database.

// Read TodoList
router.get('/', function(req, res, next) {
  Todo.find(function(err, TodoList){
         if(err) console.log(err)
        res.json(TodoList)
  })
});

Đọc Một Todo List

Thì ở trên của chúng ta là trả về tất cả các todo list thì bây giờ chúng ta sẽ trả về 1 todo list mà thôi. Chúng ta cũng sử dụng phương thức Get để đọc dữ liệu về mà thôi, nhưng khác ở chỗ là chỉ đọc 1 todo list mà mỗi todo list khi được tạo thì sẽ có một id riêng chúng ta sẽ dựa vào id để Get dữ liệu của từng todo list nha.

Ví dụ: Khi chúng ta Get/121312(id) thì nó sẽ tìm todo list trong database có id nào mà giống id mà router đã get không. Nếu giống thì sẽ trả về kết quả dưới dạng json, còn không giống thì sẽ log ra lỗi.

router.get('/:id', function(req, res, next){
  Todo.findById(req.params.id, function(err, TodoList){
    if (err) console.log(err);
    res.json(TodoList)
  })
})

Cập Nhật Các Todo List

Muốn cập nhật todo list các bạn sử dụng method Put nhé, thì Put có nghĩa là ghi đè(toàn bộ) hoặc tạo mới 1 resource(tài nguyên). Thì cách hoạt động của thằng này cũng dựa trên id mà thôi.
Khi chúng ta sử dụng truy vấn là findByIdAndUpdate() thì nó sẽ tìm trong database xem thử có thằng todo list nào cùng id mà router đã Put không. Nếu có thì bạn phải sẽ thay đổi các giá trị mới và lưu nó lại thành một todo list mới.

// Update TodoList
router.put('/:id', function(req, res, next){
  var data = {
    todolist:req.body.todolist
}
  Todo.findByIdAndUpdate(req.params.id, data, function(err, TodoList){
    if (err) return next(err);
    res.json(TodoList)
  })
})

Xóa Các Todo List

Thì xóa nó cũng tương tự như cập nhật thôi nhưng khác ở chỗ cập nhật là Put còn xóa là Delete. Thì phương thức xóa nó cũng dựa vào id mà xóa, nó cũng tìm id của todo list nào trong database trùng với id mà router đã delete. Nếu trùng thì xóa còn không thì log ra lỗi.

// Delete TodoList
router.delete('/:id', function(req,res,next){
  Todo.findByIdAndRemove(req.params.id, function (err, TodoList ) {
    if (err) console.log(err);
    res.json(TodoList)
   });
})

Test Các RESTful API

Muốn test các RESTful API thì chúng ta sử dụng postman nha.

Tạo Và Lưu Các Todo List Sử Dụng Post / API

Và các bạn có thể tự tạo cho mình những todo list mới nha.

Các bạn xem thử trong database đã thêm todo list mà mình đã tạo chưa nha.

Đọc Tất Cả Các Todo List Sử Dụng Get / API

Đọc Một Todo List Sử Dụng Get /:id API

Cập Nhật Todo List Sử Dụng Put /:id API

Để biết nó có thay đổi hay không các bạn sử dụng Get /:id để xem thử todo list có thay đổi hay không nha.

Xóa Todo List Sử Dụng Delete /:id API

Để xem nó đã xóa hay chưa các bạn sử dụng Get / để nó hiển thị tất cả các todo list. Nếu nó đã xóa rồi thì chỉ hiển thị một todo list mà thôi.

Vậy là xong rồi nha, các bạn có thể tham khảo code mà mình đã push lên github tại đây nha

Lời Kết

Vậy Là Xong bài Hướng Dẫn Xây Dựng RETSful CRUD API Với NodeJS, Express và MongoDB rồi nhé. Mình mong muốn sau bài topic này các bạn có thể nắm vững thêm về NodeJS, Express và MongoDB và biết thêm cũng như hiểu rõ hơn về RESTful API.

Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.

Chúc Các Bạn Thành Công!!