2 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 2�

ĐÁNH GIÁ MÔN HỌC

TRÊN LỚP

Bài tập nhóm (60%)
Chuyên cần (10%)

BÁO CÁO

Thuyết trình 20%
Nộp quyển báo cáo (10%)

TÀI LIỆU

Arvind Ravulavaru - Practical Internet of Things with JavaScript - Build standalone exciting IoT projects with Raspberry Pi 3 and JavaScript-Packt Publishing (2017)
Ioana Culic, Alexandru Radovici, Cristian Rusu - Commercial and Industrial Internet of Things Applications with the Raspberry Pi_ Prototyping IoT Solutions-Apress (2020)
Joseph Faisal Nusairat - Rust for the IoT_ Building Internet of Things Apps with Rust and Raspberry Pi-Apress (2020)

3 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

NỘI DUNG MÔN HỌC

Chương 1: TỔNG QUAN DỰ ÁN (2 BUỔI)

Tính cấp thiết dự án
Tổng quan giải pháp ứng dụng
Hướng nghiên cứu

Chương 2: THIẾT KẾ KIẾN TRÚC (4 BUỔI)

Kiến trúc giải pháp điều khiển giám sát từ xa
Kiến trúc thiết bị
Kiến trúc phần mềm

Chương 3: THIẾT KẾ GIẢI PHÁP (5 BUỔI)

Tầng 1: Sơ đồ đấu nối, bản vẽ bố trí thiết bị
Tầng 2: Mô hình mạng – cấu hình, cài đặt
Tầng 3: Mô hình cloud IoT – cấu hình, cài đặt server, phần mềm
Tầng 4: Giao tiếp người dùng – web/ứng dụng

Chương 4: KẾT LUẬN (1 BUỔI)

Kết luận – kết quả đạt được
Hướng phát triển

4 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

TỔNG QUAN HỆ THỐNG

5 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

TỔNG QUAN HỆ THỐNG

6 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

TỔNG QUAN HỆ THỐNG

7 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ KIẾN TRÚC

Thiết bị

Kiến trúc phần cứng
Kiến trúc phần mềm

Mạng

Kiến trúc mạng

Cloud

Kiến trúc phần mềm
Kiến trúc giải pháp

Người dùng

Kiến trúc phần mềm
Kiến trúc giải pháp

8 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ WEB ĐIỀU KHIỂN – GIÁM SÁT

Nền tảng

Front-end: tương tác người dùng
Back-end: tương tác thiết bị, cơ sở dữ liệu, front-end

Ngôn ngữ lập trình

Front-ent: html, css, js, jquery, boostrap
Back-end: java, .NET, php…

Mô hình web

Kiến trúc MVC
ASP .NET (C#)

Xây dựng

Trang web điều khiển giám sát chiếu sáng
Cơ sở dữ liệu, api truy xuất dữ liệu

9 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

WWW - WEB

11 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

Java vs .NET

12 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

MÔ HÌNH MVC

Mô hình MVC:

Model
View
Controller

13 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

HTML

Cấu trúc văn bản web
Các thẻ chức năng

CSS

Tùy biến văn bản
Các tham số cài đặt tham khảo

Boostrap

Framework phổ biến CSS
Responsive design
copy & paste: https://bootswatch.com/

Js, Jquery

Thiết kế web động
Ví dụ: login page

14 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

CÁC TRANG THAM KHẢO:

15 of 148

THIẾT KẾ GIAO DIỆN WEB

16 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

Nội dung của một tập tin HTML:

Được bắt đầu bằng thẻ <html>
Và kết thúc bởi thẻ </html>.

Bên trong cặp thẻ <html></html> được chia làm hai thành phần chính:

Phần head được bắt đầu bằng thẻ <head> và kết thúc bởi thẻ </head>, nó dùng để chứa tiêu đề và các thẻ khai báo thông tin cho trang web.
Phần body được bắt đầu bằng thẻ <body> và kết thúc bởi thẻ </body>, nó dùng để chứa những nội dung mà chúng ta muốn hiển thị trên trang web.

17 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

CẤU TRÚC MỘT PHẦN TỬ HTML

Đa số các thẻ trong HTML đều có cấu trúc như sau:

<tagName atrtibute="value">content</tagName>

tagName: tên của thẻ được HTML định nghĩa sẵn, mỗi thẻ được bắt đầu bởi cặp thẻ đóng mở <tagName>...</tagName>. hoặc mở và đóng ngay <tagName/>.
attribute: thuộc tính của thẻ HTML, cung cấp các thông tin về thẻ HTML đó, thuộc tính luôn luôn nằm trong thẻ mở <>. Mỗi thẻ HTML có thể có nhiều attribute, ví dụ thẻ <img> có thuộc tính là height và width quy định chiều cao và chiều rộng của 1 ảnh.
value: giá trị đi kèm với attribute. Ví dụ height="500".
content: nội dung của thẻ HTML, nằm giữa cặp thẻ đóng mở.
Ví dụ:

<a href="https://www.stdio.vn/">Trang chủ STDIO</a>

18 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

CÁC THẺ ĐỊNH DẠNG VĂN BẢN

HTML định nghĩa 1 loạt thẻ dùng để định nghĩa tiêu đề (heading)

Thẻ từ <h1> đến <h6>.
Các thẻ tiêu đề có cấu trúc là: <h.>Nội dung tiêu đề</h.>

19 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

CÁC THẺ ĐỊNH DẠNG VĂN BẢN

Thẻ định dạng đoạn văn <p>...<p>

Thẻ paragraph <p> định nghĩa một đoạn văn.
Thẻ tiêu đề có cấu trúc <p>Nội dung đoạn văn</p>.

20 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

CÁC THẺ ĐỊNH DẠNG VĂN BẢN

Thẻ định dạng ngắt dòng <br/>

Trình duyệt web xem tất cả khoảng trắng liên tiếp hoặc xuống dòng đều là 1 khoảng trắng.
Để có thể ngắt dòng sử dụng thẻ <br/>.

21 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

CÁC THẺ ĐỊNH Thẻ định dạng dữ liệu thô <pre>

Mặc định thì trình duyệt sẽ bỏ qua tất cả các khoảng trắng liên tiếp, tab, xuống dòng và xem như đó là 1 khoảng trắng.
Để giữ chính xác định dạng của dữ liệu, HTML định nghĩa thẻ dữ liệu thô <pre>

22 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

23 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

24 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

HTML: Thẻ Liên Kết trong HTML

Thẻ liên kết <a href="...">...</a> được xem như là trái tim của 1 trang web,
thẻ liên kết giúp điều hướng giữa các trang trong 1 website, từ trang này qua trang khác chỉ thông qua 1 cú nhấn.

25 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

26 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

HTML : Các Thẻ Định Dạng Danh Sách

Danh sách có thứ tự <ol>
Danh sách có thứ tự (Ordered List) được định nghĩa bởi cặp thẻ đóng mở <ol>...</ol>. Mỗi phần tử trong <ol> được định nghĩa bởi thẻ <li></li> (List Item).

27 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

Danh sách không thứ tự <ul>

Danh sách không có thứ tự (Unordered List) được định nghĩa bởi cặp thẻ đóng mở <ul></ul>
Với mỗi phần tử trong danh sách được định nghĩa bởi thẻ <li> (List Item).

28 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

Danh sách lồng danh sách

Mỗi <li> có thể chứa một danh sách <ol> hoặc <ul>.

29 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

HTML: Các Thẻ Hình Ảnh, Video, Audio

30 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

31 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

32 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

HTML : Các Thẻ Input trong HTML

33 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

HTML : Các Thẻ Input trong HTML

<input> với các type khác nhau có chức năng khác nhau:

text: nhập văn bản.
password: nhập mật khẩu.
radio: 1 lựa chọn.
checkbox: nhiều lựa chọn.
button: nút bấm.
file: lựa chọn file.
number: nhập số.
color: nhập màu sắc.
email: nhập email.

34 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

35 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

36 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

37 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

38 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

39 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

40 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

HTML: Thẻ Table Trong HTML

<table> có rất nhiều thẻ con và thuộc tính định dạng

Như hình và mã HTML mẫu trên, 1 <table> có thể chia ra làm 3 phần:

<thead>: dành cho tiêu đề, tên bảng, các miêu tả bắt đầu cho bảng.

<tbody>: dành cho bảng dữ liệu chính.

<tfoot>: dành cho tổng hợp, thống kê, bản quyền, lời kết.

<thead>, <tbody>, <tfoot> đều có thể định nghĩa:

<tr>: table-row - dòng dữ liệu. Trong khi đó ở mỗi dòng có thể định nghĩa từng ô.

<th>: dành cho các ô tiêu đề.

<td>: dành cho các ô dữ liệu.

* <th> và <td> về mặc cú pháp sử dụng giống nhau, nhưng được khuyến khích sử dụng đúng ngữ nghĩa của nó. <th> nên dành cho tiêu đề và <td> dành cho dữ liệu.

41 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

42 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

43 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

HTML : Thẻ Form trong HTML

Thẻ <form> trong HTML là một thẻ chứa các thành phần nhập liệu thẻ <input>
Lấy các thông tin từ người dùng nhập vào, và gửi đến server.

44 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

Slide 3�

THIẾT KẾ GIAO DIỆN WEB

Sau khi nhấn Đăng nhập (Submit)

Thì các dữ liệu được nhập trong các thẻ input text, password được gửi lên server với:
Đường dẫn từ server sẽ xử lý là: action="https://training.stdio.vn/login"
Phương thức nhập dữ liệu là: method="get"

45 of 148

THIẾT KẾ GIAO DIỆN WEB

HTML : tạo ra cấu trúc, nội dung các phần tử trong trang

CSS : quy định cách hiện thị phần tử trên trang.

46 of 148

THIẾT KẾ GIAO DIỆN WEB

Nhúng CSS dạng External - thẻ link tải file CSS

Cách này các mã CSS viết tập trung vào một file độc lập với file HTML (thường đặt phần mở rộng là css) sau đó dùng thẻ link đặt ở phần head để nạp vào theo cú pháp, ví dụ file ngoài là demo.css

47 of 148

THIẾT KẾ GIAO DIỆN WEB

48 of 148

THIẾT KẾ GIAO DIỆN WEB

49 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

50 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

51 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

XÂY DỰNG LAYOUT CƠ BẢN VỚI BOOTSTRAP

Hệ thống lưới (grid) gồm các hàng và cột để xây dựng nên giao diện cơ bản, cách tạo hàng, cột, định dạng cột của một layout

52 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

XÂY DỰNG LAYOUT CƠ BẢN VỚI BOOTSTRAP

Hệ thống lưới (grid) gồm các hàng và cột để xây dựng nên giao diện cơ bản, cách tạo hàng, cột, định dạng cột của một layout

53 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

XÂY DỰNG LAYOUT CƠ BẢN VỚI BOOTSTRAP

Hệ thống lưới (grid) gồm các hàng và cột để xây dựng nên giao diện cơ bản, cách tạo hàng, cột, định dạng cột của một layout

54 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

Ví dụ, một phần tử sử dụng container khi ở màn hình có độ rộng 840px, nhìn vào bảng trên nó thuộc md, nó sẽ hiện thị là một cái hộp chữ nhật có độ rộng lớn nhất là 720px (nghĩa là rộng có thể thay đổi từ 0px đến 720px tùy thuộc vào không gian cho phép container mở rộng)

các điểm dừng, đó là các breakpoint : sm, md, lg, xl

55 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

HỆ THỐNG LƯỚI (GRID) TRONG BOOTSTRAP

Bootstrap sử dụng container và các lớp về dòng (row), cột (colunm) phối hợp với nhau để tạo ra một hệ thống lưới giao diện. Trước tiên cần biết là những phần tử hàng, cột sử dụng kỹ thuật CSS flexbox để xây dựng.
Lưới layout được tạo ra từ các hàng bằng cách sử dụng class .row, trong hàng các phần tử con tạo thành cột (hàng) bằng cách sử dụng class có tiền tố là .col-, .col-sm-, .col-md-, .col-lg-, .col-xl-

56 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

57 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

58 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

59 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

60 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

CÁC TIỆN ÍCH CSS CƠ BẢN CỦA BOOTSTRAP

Bootstrap với các tiện ích trình bày văn bản, định dạng hiện thị chữ (màu sắc, nền, đậm, nghiêng), định dạng về hiện thị các phần tử, kẻ khung, bo góc, độ rộng và flexbox

61 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

62 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

63 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

64 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

65 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

66 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

67 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

68 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

69 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

70 of 148

THIẾT KẾ GIAO DIỆN WEB

ỨNG DỤNG LỚP .MEDIA CỦA BOOTSTRAP

Lớp .media trong Boostrap để tạo ra các đối tượng trực quan có cấu trúc lặp lại như danh sách các bài viết, danh sách bình luận, comment

71 of 148

THIẾT KẾ GIAO DIỆN WEB

72 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

TẠO BREADCRUMB VỚI BOOTSTRAP

Sử dụng .breadcrumb tạo phần tử chứa cấu trúc Breadcrumb, bên trong là các phần tử con có lớp .breadcumb-item

73 of 148

THIẾT KẾ GIAO DIỆN WEB

THANH ĐIỀU HƯỚNG PHÂN TRANG PAGINATION TRONG BOOTSTRAP

Sử dụng lớp .paginaton và lớp .page-item để tạo ra một thanh điều hướng các trang trong Bootstrap

74 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

75 of 148

THIẾT KẾ GIAO DIỆN WEB

SỬ DỤNG BADGE TẠO RA CÁC NHÃN LABLE TRONG BOOTSTRAP

Trong Bootstrap các lớp .badge, .badge-* dùng để tạo ra các hộp nhỏ hiện thị inline nội dung ngắn gọn để lưu ý người dùng

76 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

77 of 148

THIẾT KẾ GIAO DIỆN WEB

TẠO CÁC NÚT BẤM, NHÓM NÚT BẤM BUTTON TRONG BOOSTRAP

Sử dụng lớp .btn để tạo nút bấm và các lớp định dạng nút bấm như .btn-sm, .btn-danger, tạo nhóm nút bấm cho ứng dụng web

78 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

79 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

80 of 148

THIẾT KẾ GIAO DIỆN WEB

Trong Bootstrap .nav là lớp cơ bản để xây dựng nên các thành phần có chức năng điều hướng khác nhau như NavBar, Tab ... .nav được xây dựng với tính năng flexbox và nó sẽ áp dụng triệt để tính năng này trong tất cả các thành phần khác xây dựng nên từ nó.

81 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

82 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

83 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

Có thể tùy ý tùy biến thanh Tab theo cách tùy biến .nav cũng như tùy biến phần nội dung hiện thị bằng việc sử dụng các tiện ích Bootstrap đã biết.

84 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

Thu vien ho tro

85 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

TẠO THANH NAVBAR TRONG BOOTSTRAP

Thao các thanh Menu, NavBar điều hướng hiện thị ở đầu các trang bằng .navbar, thiết lập hiện thị Menu Dropdown trên NavBar

86 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

87 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

88 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

SỬ DỤNG CARD TẠO BOX CHỨA NỘI DUNG TRONG BOOTSTRAP

Cách sử dụng .card tạo ra các box chứa nội dung có tùy biến Footer, Header, cách nhóm các Card lại với card-group, card-deck và card-colunms

89 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

90 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

91 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

92 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

93 of 148

THIẾT KẾ GIAO DIỆN WEB

SỬ DỤNG COLLAPSE ẨN HIỆN NỘI DUNG HTML TRONG BOOTSTRAP

Cách sử dụng JS và các lớp liên quan trong Bootstrap để tạo ra tính năng bật ẩn, hiện nội dung HTML, cách tạo ra một accordion

94 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

95 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

96 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

TẠO CÁC MENU ĐỔ XUỐNG DROPDOWN TRONG BOOTSTRAP

Sử dụng .dropdown để tạo ra các Menu thả xuống, với các Menu dropdown-menu và Menu Item .dropdown-item

97 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

98 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

TẠO ALERT TRONG BOOTSTRAP

Tạo các Box hiện thị thông tin phản hồi bằng lớp .alert, cho phép bấm vào để đóng lại thông báo

99 of 148

THIẾT KẾ GIAO DIỆN WEB

100 of 148

THIẾT KẾ GIAO DIỆN WEB

TẠO CÁC SLIDE TRONG BOOTSTRAP VỚI CAROUSEL

Sử dụng carousel để tạo ra các slide trình diễn hình ảnh, nội dung, cho phép tự động chuyển hoặc bấm vào để chuyển đến slide bất kỳ

https://xuanthulab.net/tao-cac-slide-trong-bootstrap-voi-carousel.html

101 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

102 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

TẠO LIST GROUP TRONG BOOTSTRAP

Sử dụng list-group tạo ra danh sách các phần tử với sự tùy biến mềm dẻo, các phần tử con xây dựng từ list-group-item

103 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

104 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

105 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

TẠO RA POPOVER VỚI BOOSTRAP

Tạo một Popover khi bấm vào một phần tử sẽ xuất hiện một hộp thoại nhỏ thông tin về phần tử

106 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

107 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

TẠO THANH PROGRESS VỚI BOOTSTRAP

Sử dụng progress, progress-bar để tạo thanh biểu thị tiến trình đang xử lý nào đó

108 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

109 of 148

THIẾT KẾ GIAO DIỆN WEB

TẠO TOOLTIP VỚI BOOTSTRAP

Tạo tooltip, box nhỏ xuất hiện khi chuột di chuyển trên phần tử, ẩn khi chuột ra khỏi phần tử

110 of 148

THIẾT KẾ GIAO DIỆN WEB

TẠO CÁC HỘP THOẠI MODAL TRONG BOOTSTRAP

Tạo ra các hội thoại với modal, khai báo để kích hoạt hiện thị hộp thoại thông qua các hàm JS

111 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

112 of 148

THIẾT KẾ GIAO DIỆN WEB

XÂY DỰNG HTML FORM VỚI BOOTSTRAP

Sử dụng các lớp tiện ích để tạo ra giao diện form với các lớp như form-group, form-control, form-row

113 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

114 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

115 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

116 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

117 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

118 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

Javascript được sử dụng rất phổ biến để tích hợp vào các trang web, chạy ngay trong trình duyệt phía client giúp cho Website có được cách tương tác linh hoạt hơn với người dùng.

119 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

120 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

121 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

122 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

123 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

Biến trong JavaScript

Khai báo và sử dụng biến trong JavaScript với var và let, quy tắc đặt tên biến và phép toán gán, khai báo hằng số trong JS

124 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

125 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

126 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

127 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

128 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

129 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

130 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

131 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

132 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

133 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

Đối tượng trong JavaScript

Tạo và sử dụng các đối tượng trong JavaScript gần giống với các khái niệm trong lập trình hướng đối tượng, như thuộc tính, phương thức

134 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

135 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

136 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

137 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

138 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

Hàm setInterval clearInterval trong JavaScript

Sử dụng setInterval để gọi lặp lại một hàm trong một khoảng thời gian ấn định trước

139 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

Mảng trong JavaScript

Tạo đối tượng mảng trong JavaScript, các cách thức khởi tạo mạng và truy cập đến giá trị phần tử mảng

140 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

141 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

142 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

Đối tượng Date trong JavaScript

Làm việc với thời gian, ngày, tháng năm trong JavaScript thông qua các phương thức của đối tượng Date

143 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

144 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

Khái niệm cơ bản Dom - JavaScript

Tìm hiểu về đối tượng DOM document trong JavaScript, lựa chọn phần tử thay đổi các phần tử với các hàm như getElementById, getElementsByTagName

145 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

146 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

147 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

148 of 148

Technical Project�Nguyễn Hoài Phong @0963.95.91.94 �

THIẾT KẾ GIAO DIỆN WEB

https://freetuts.net/hoc-javascript/javascript-can-ban