9. Hoc form gui,nhan du lieu trong Node JS

Tạo project Express và gộp bootstrap vào • Bước 1: tạo project Express với template engine là EJS => express sudungform -e • Bước 2: vào project và cài đặt => cd sudungform và npm instal

Sử dụng Form trong NodeJS

Tạo project Express và

gộp bootstrap vào

• Bước 1: tạo project Express với template

engine là EJS => express sudungform -e

• Bước 2: vào project và cài đặt => cd

sudungform và npm install

• Bước 3 : cài đặt bootstrap/jquery => npm

install bootstrap và npm install jquery

• Bước 4 : vào thư mục node_modules, ta

có thể copy các thư mục js/css của

bootstrap và jquery vào thư mục public

để tiện sử dụng, nếu không muốn copy thì vào file app.js thêm các đường dẫn static

• Bước 5: gộp bootstrap vào file EJS cần

thiết

Tạo đường dẫn để dùng bootstrap, jquery

app use ( '/js' , express static ( dirname + '/node_modules/bootstrap/dist/js' )); //chuyển đến bootstrap

app use ( '/js' , express static ( dirname + '/node_modules/jquery/dist' )); //chuyển đến JS

app use ( '/css' , express static ( dirname + '/node_modules/bootstrap/dist/css' )); //chuyển đến CSS

<link href ="/css/bootstrap.min.css" rel ="stylesheet" >

<script src ="/js/jquery.js" ></script>

<script src ="/js/bootstrap.min.js" ></script>

Để có thể ghi được như vầy

Thì trong file app.js ta khai báo như sau

Dùng bootstrap tạo form như sau

Gợi ý: ta cài snippets bootstrap 4 sau đó chỉ

cần gõ b4-form-input, b4-jumbotron-default

Cách lấy dữ liệu từ form

Chỉnh lại router trong file routers/index.js, cần router post để chuyển hướng khi người dùng submit form

Trong mô hình MVC thì

✓ File routers/index.js đóng vai trò là controller để điều hướng cách

xem dữ liệu

✓ File views/index.ejs đóng vai trò là views để hiển thị dữ liệu

✓ Khi dùng cơ sở dữ liệu ta sẽ tạo thêm thư mục models để tương với

csdl (mongodb)

Gửi bằng phương thức post nên nếu không nhận được dữ liệu thì cần cài thêm body-parser

Cách lấy dữ liệu từ form (t.t)

router post(' / ', function ( req , res , next ) {

var tieude = req body tdsp; // nhờ body-parser nên req.body mới hiểu

res send(' Tiêu đề nhận được = ' + tieude );

});

Upload file trong NodeJS

Tham khảo

https://github.com/expressjs/multer

Ta dùng lại form cũ và thêm snippets

b4-form-file để hiển thị bootstrap cho

phần upload

Upload file trong NodeJS (t.t)

• Bước 0: cài đặt multer => npm install multer

• Bước 1: thêm thuộc tính cho form (index.ejs) là enctype="multipart/form-data" và

require(‘multer’) trong file index.js

• Bước 2: cấu hình để chạy multer, ta cấu hình trong file router index.js chứ không phải file app.js, và cần khai báo storage dẫn để biết ảnh upload lên sẽ lưu ở đâu

Upload file trong NodeJS (t.t)

• Bước 3: tiếp tục cần chỉ ra cách dùng Multer như thế nào trong index.js tại router post như sau

/* Lấy dữ liệu từ form gửi với phương thức post */

router post(' / ', upload single(' anhsp '), function ( req , res , next ) {

var tieude = req body tdsp ;

res send(' Tiêu đề nhận được = ' + tieude );

});

index.js index.ejs

Viết hàm chỉ cho upload file ảnh

• Ta chỉ muốn người dùng

upload hình ảnh mà thôi,

chứ không cho upload các

loại file khác, nên khi upload

cần check xem phải file ảnh

không, ta cần dùng regular

expression

(https://regex101.com/) để

giới hạn kiểu file được up lên

và dùng hàm fileFilter trong

multer

• Các file ảnh ta muốn cho

upload lên sẽ có đuôi là .jpg,

• Ta dùng trang web

https://regex101.com/ để

kiểm tra biểu thức

Nơi lưu trữ

Kiểm tra trước khi upload

Có phân biệt chữ hoa/thường