Ngày nodejs mongodb

Question

Ở đây các bạn nhất định phải luôn cho mình một thẻ div để bao bọc các chức năng như. xem tác giả, xóa, sửa sách. 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 tiện thời gian =)))

Nội dung chính Show

Định Nghĩa Router Cập Nhật Trong Books
Giao diện Cập nhật Nhật Trọng Books
Controller Cập nhật Nhật Trọng Books
Định nghĩa và Bộ điều khiển Bộ định tuyến Xóa Trong Sách
Trang chủ Hiển Thị Trang
Định Nghĩa Và Controller Router Trang Trang chủ
Giao Diện Hiển Thị Trang HomePage
Dự án CSS Lại Giao Diện Cho
Triển khai dự án Lên Heroku

sách/chương trình. 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 sổ chi tiết nha

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

Thì thì cập nhật này cách làm nó cũng tựa như tạo sách thôi khác là thay vì sẽ tạo một cái mới thì ta sẽ lấy id của sách đấy để mà edit lại thông tin mà mình đã tạo.
Để mà hiện chi tiết được chúng ta phải dựa vào id của tác giả thì update sách 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 hiện sổ chi tiết thì trong phần hiện chi tiết mình đã tạo thẻ liên kết a .

Trong thư mục route có file

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

1 các bạn tạo cho mình hai router update đó là

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

7 để render ra views và

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

8 để cập nhật sách nha. Trước mắt các bạn chỉ cần tạo và hiển thị lượt xem 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 Nhật Trọng Books

Trong lượt xem bạn tạo cho mình thư mục là sách sẽ bao gồm 4 tệp

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

2,

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

3,

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

4,

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

5.
Ở đây thì nói thật thì nó chả khác gì sáng tạo sách cả chỉ khác là hành động ở dạng 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 trường tạo và sách cập nhật nó giống nhau đúng sai nào, bây giờ các bạn tạo một tệp sẽ chứa các trường đó để khi cần bạn có thể tái sử dụng được nha.
sách/chỉnh sửa. 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 sách

Controller Cập nhật Nhật Trọng Books

Để có thể cập nhật các sách đã được và sử dụng phương thức PUT được, ta cần sử dụng một phần mềm trung gian đó là ghi đè phương thức.
Trong

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

0 có sách/chỉnh sửa. pug các bạn thêm cho mình đoạn mã này

// 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) => {
  
})

4 vào trong hành động của mẫu cái này mình đã thêm vào phần hành động phía trên rồi nha

Trong tệp

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

1 ta có bộ định tuyến. đặt('/. Tôi',. ) dùng để cập nhật sách. Ở đây mình sẽ hóng giải thích dài dòng nữa nha bởi vì tạo sách như nào thì cập nhật sách như vậy thôi. ))

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

3

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

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

4

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

Định nghĩa và Bộ điều khiển Bộ định tuyến Xóa Trong Sách

Như các bạn đã thấy ở trên khi mình hiển thị chi tiết thì trong phần hiển thị chi tiết mình đã tạo một biểu mẫu có chứa một nút để xóa sách

Cũng trong tệp

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

1 ta có bộ định tuyến. xóa bỏ('/. Tôi',. ) dùng để xóa sách. Xóa sách với xóa tác giả 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 tác giả thì sách mà tác giả sẽ bị xóa, còn khi xóa sách thì tác giả nó vẫn hiển thị bình thường

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

6

Trong

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

0 có tập sách/chương trình. pug các bạn thêm cho mình đoạn mã này

// 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) => {
  
})

8 vào trong hành động của biểu mẫu cái này mình đã thêm vào phần hành động trong phần hiển thị chi tiết ở phía trên rồi nha.
Và đây là kết quả khi chúng ta thực hiện xóa sách nha.

Trang chủ Hiển Thị Trang

Định Nghĩa Và Controller Router Trang Trang chủ

Trong ________ 49 có tệp ________ 90 ở đây các bạn tạo cho mình một bộ định tuyến. được('/',. ) để có thể lấy dữ liệu và hiển thị ra trang chủ. Tại trang chủ này mục đích của nó chỉ là hiển thị sách mà thôi.
Đầu tiên các bạn cần yêu cầu sách mẫu vào trước nhà, sau đó chúng ta sẽ tìm toàn bộ dữ liệu sách dựa trên thời gian tạo mà nó sẽ hiển thị ra trước hay là sau nha.

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

1

Giao Diện Hiển Thị Trang HomePage

Trong

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

0 có chỉ mục tệp. pug will be place that we will code phần view cho trang chủ. Để hiển thị ra sách thì cũng đơn giản thôi ta chỉ cần lặp qua chúng rồi render ra ảnh theo dõi kèm theo tiêu đề, sau khi lặp qua sách rồi thì ta cần tạo thẻ liên kết a để khi click vào đó sẽ hiện chi tiết

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

3

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

Dự án CSS Lại Giao Diện Cho

Trong

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

2 có tệp /stylesheets/style. css các bạn nhớ import link css vào 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ế chiều rộng và chiều cao trong các thẻ img dùng để hiển thị ảnh bìa bằng một lớp 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.
Dự án CSS

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

5

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

Triển khai dự án Lên Heroku

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

programming nodejs

Ngày nodejs mongodb

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

Giao diện Cập nhật Nhật Trọng Books

Controller Cập nhật Nhật Trọng Books

Định nghĩa và Bộ điều khiển Bộ định tuyến Xóa Trong Sách

Trang chủ Hiển Thị Trang

Định Nghĩa Và Controller Router Trang Trang chủ

Giao Diện Hiển Thị Trang HomePage

Dự án CSS Lại Giao Diện Cho

Triển khai dự án Lên Heroku

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội