Điều khiển và giám sát mô hình hệ thống phân loại sản phẩm qua Webserver sử dụng PLC S7-1200

Nhiệm vụ của đồ án tốt nghiệp là thiết kế một Web Server cho mô hình phân loại sản phẩm sử dụng bộ điều khiển PLC S7-1200 Siemens. Mục tiêu của đồ án là sử dụng internet để điều khiển mô hình hệ thống phân loại thông qua bộ điều khiển PLC S7-1200. Trang web sử dụng bộ điều PLC S7-1200 làm server. Trang web được định dạng bằng tài liệu dạng .html. Trang web được thiết kế giao diện trên phần mềm Visual Studio Code và được viết bằng các ngôn ngữ lập trình HTML (HyperText Markup Language), CSS (Cascading Style Sheets) và Javascript. Mô hình phân loại bao gồm một cảm biến hồng ngoại, một cảm biến từ, một động cơ, một tay gạt, một bang tải. Đồ án đã có thể hoàn thành cơ bản mục tiêu. Tuy nhiên đồ án phù hợp ở mức tìm hiểu và nghiên cứu về web server, ứng dụng trong thực tế là chưa cao vì bộ điều khiển S7-1200 dung lượng bộ nhớ thấp, tốc độ xử lí chậm tạo ra sự delay giữa tín hiệu trang web hiển thị và tín hiệu thực tế. Tính thực tế của đồ án có thể được thực hiện khi sử dụng bộ điều khiên PLC S7-1500. Thông qua đồ án em đã có them kiến thức về lập trình web sử dụng các ngôn ngữ html, css và javascript. Tìm hiểu them được một phương án giao tiếp giữa người và hệ thống thông qua mạng Internet. Đây là điều hết sức cần thiết trong thời đại Internet kết nối vạn vật như hiện nay.

ĐẠI HỌC BÁCH KHOA HÀ NỘI

TRƯỜNG CƠ KHÍ KHOA CƠ ĐIỆN TỬ

ĐỒ ÁN TỐT NGHIỆP Điều khiển và giám sát mô hình

hệ thống phân loại sản phẩm qua

Webserver sử dụng PLC S7-1200

VŨ TÙNG LÂM

Mssv: 20184505 Email: lam.vt184505@sis.hust.edu.vn

Chuyên ngành Kỹ thuật Cơ Điện Tử

Giảng viên hướng dẫn: TS Dương Văn Lạc

Chữ ký của GVHD

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

NHIỆM VỤ THIẾT KẾ ĐỒ ÁN TỐT NGHIỆP

Họ và tên sinh viên: Vũ Tùng Lâm MSSV: 20184505

Lớp: Kỹ thuật Cơ điện tử – K63

Khoa: Cơ Điện Tử

- Bản vẽ mô hình hệ thống phân loại (A0)

- Vẽ mạch điện và giản đồ Grafcet (A0)

III/ CÁN BỘ HƯỚNG DẪN: TS Dương Văn Lạc

IV/ NGÀY GIAO NHIỆM VỤ THIẾT KẾ: 20/3/2023

ĐẠI HỌC BÁCH KHOA HÀ NỘI

TRƯỜNG CƠ KHÍ

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập - Tự do - Hạnh phúc

NHẬN XÉT ĐỒ ÁN TỐT NGHIỆP

(Dành cho Giáo viên hướng dẫn)

Tên đề tài: Điều khiển và giám sát mô hình hệ thống phân loại sản phẩm qua Webserver sử dụng PLC S7-1200

Họ và tên SV: Vũ Tùng Lâm Lớp: ME1- 01- K63

Chuyên ngành: Kỹ thuật Cơ điện tử

Giáo viên hướng dẫn: TS Dương Văn Lạc

NỘI DUNG NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

I Tác phong làm việc

Sinh viên chăm chỉ, chủ động trong công việc

II Những kết quả đạt được

Đề tài đã nghiên cứu ứng dụng Webserver trên bộ lập trình PLC S7-1200 để điềukhiển giám sát hệ thống điều khiển từ xa thuận tiện qua mạng Internet, và sửdụng được trên các thiết bị khác nhau như Laptop, PC và điện thoại di động, thông qua các trình duyệt Internet phổ biến hiện nay như Google Chorme, Kếtquả của đề tài giúp tiết kiệm chi phí khi sử dụng các màn hình HMI công nghiệpcó giá thành cao

III Hạn chế của đồ án

Trang web điều khiển mô hình hệ thống còn đơn giản, tốc độ phản hồi của hệthống sau khi thao tác trên trang web còn trễ Cũng như hiện tại Webserver chỉđược thử nghiệm sử dụng được trong không gian mạng nội bộ

IV Kết luận

Đồ án đáp ứng yêu cầu chuẩn đầu ra của chương trình đào tạo Kỹ sư Cơ điện tử

Do vậy người hướng dẫn đồng ý cho phép sinh viên Vũ Tùng Lâm bảo vệ đề tài tốt nghiệp trước Hội đồng chấm đồ án tốt nghiệp

Đánh giá: 10 điểm

Hà Nội, ngày tháng năm 2023

Giáo viên hướng dẫn (Ký và ghi rõ họ tên)

ĐẠI HỌC BÁCH KHOA HÀ NỘI

TRƯỜNG CƠ KHÍ

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập - Tự do - Hạnh phúc

NHẬN XÉT ĐỒ ÁN TỐT NGHIỆP

(Dành cho Giáo viên phản biện)

Tên đề tài: Điều khiển và giám sát mô hình hệ thống phân loại sản phẩm qua Webserver sử dụng PLC S7-1200

Họ và tên SV: Vũ Tùng Lâm Lớp: ME1- 01- K63

Chuyên ngành: Kỹ thuật Cơ điện tử NỘI DUNG NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN I Những kết quả đạt được ………

………

………

………

………

………

II Hạn chế của đồ án ………

………

………

………

III Kết luận ………

………

Đánh giá:……….điểm

Hà Nội, ngày tháng năm 2023

Giáo viên hướng dẫn (Ký và ghi rõ họ tên)

LỜI CẢM ƠN

Em xin chân thành cảm ơn tới thầy hướng dẫn TS Dương Văn Lạc, Khoa CơĐiện Tử, Trường Cơ Khí đã hướng dẫn tận tình, cung cấp nhiều kiến thức quýbáu, giải đáp các thắc mắc và tạo mọi điều kiện thuận lợi cho em trong quá trìnhthực hiện và hoàn thành Đồ án tốt nghiệp kỹ sư

Tóm tắt nội dung đồ án

Nhiệm vụ của đồ án tốt nghiệp là thiết kế một Web Server cho mô hình phân loạisản phẩm sử dụng bộ điều khiển PLC S7-1200 Siemens Mục tiêu của đồ án là sửdụng internet để điều khiển mô hình hệ thống phân loại thông qua bộ điều khiểnPLC S7-1200 Trang web sử dụng bộ điều PLC S7-1200 làm server Trang webđược định dạng bằng tài liệu dạng html Trang web được thiết kế giao diện trênphần mềm Visual Studio Code và được viết bằng các ngôn ngữ lập trình HTML(HyperText Markup Language), CSS (Cascading Style Sheets) và Javascript Môhình phân loại bao gồm một cảm biến hồng ngoại, một cảm biến từ, một động cơ,một tay gạt, một bang tải Đồ án đã có thể hoàn thành cơ bản mục tiêu Tuy nhiênđồ án phù hợp ở mức tìm hiểu và nghiên cứu về web server, ứng dụng trong thựctế là chưa cao vì bộ điều khiển S7-1200 dung lượng bộ nhớ thấp, tốc độ xử líchậm tạo ra sự delay giữa tín hiệu trang web hiển thị và tín hiệu thực tế Tínhthực tế của đồ án có thể được thực hiện khi sử dụng bộ điều khiên PLC S7-1500.Thông qua đồ án em đã có them kiến thức về lập trình web sử dụng các ngôn ngữhtml, css và javascript Tìm hiểu them được một phương án giao tiếp giữa người

và hệ thống thông qua mạng Internet Đây là điều hết sức cần thiết trong thời đạiInternet kết nối vạn vật như hiện nay

Sinh viên thực hiện

Ký và ghi rõ họ tên

MỤC LỤC

CHƯƠNG 1 TỔNG QUAN HỆ THỐNG PHÂN LOẠI SẢN PHẨM 1

1.1 Tổng quan 1

1.2 Bài toán phân loại của đồ án 1

CHƯƠNG 2 THIẾT KẾ HỆ THỐNG ĐIỀU KHIỂN 2

2.1 Ý tưởng điều khiển, tính năng điều khiển và giao tiếp 2

2.2 Lựa chọn phương án điều khiển 2

2.2.1 Phân loại PLC và ứng dụng 2

2.2.2 Cấu tạo và nguyên lí hoạt động của PLC 3

2.3 Xây dựng mô hình phân loại sản phẩm 5

2.4 Giản đồ Gratcet của mô hình hệ thống 8

CHƯƠNG 3 THIẾT KẾ GIAO DIỆN WEBSERVER 10

3.1 Các khái niệm cơ bản về Web 10

3.2 Các ngôn ngữ lập trình 12

3.2.1 HTML-Hypertext Markup Language 12

3.2.2 CSS-Cascading Style Sheet 16

3.2.3 Javascript 22

3.3 Giao diện Web server hệ thống phân loại 28

CHƯƠNG 4 THIẾT LẬP KẾT NỐI GIỮA PLC VÀ WEB SERVER 29

4.1 Cài đặt phần mềm Visual Studio Code 29

4.1.1 Các bước tiến hành cài phần mềm Visual Studio Code 29

4.2 Cài đặt phần mềm Symbol Factory 29

4.2.1 Các bước tiến hành cài đặt phần mềm Symbol Factory 29

4.2.2 Xuất hình ảnh đồ họa từ phần mềm Symbol Factory 3.0 33

4.3 Cấu hình webserver trên phần mềm TIA Portal V16 35

4.4 Đưa trang Web lên môi trường Internet 39

4.4.1 Trang Web tiêu chuẩn (Standard Webpages) 39

4.4.2 Trang Web người dùng định nghĩa (User Defined Webpage) .40 4.4.3 NAT Port 41

CHƯƠNG 5 KẾT LUẬN 42

TÀI LIỆU THAM KHẢO 43

PHỤ LỤC 44

DANH MỤC HÌNH VẼ

Hình 1.1 Hệ thống phân loại 1

Hình 2.1 Mô hình băng tải 5

Hình 2.2 Động cơ Servo 5

Hình 2.3 Động cơ MISUMI AC OIK3GN-D 6

Hình 2.4 Cảm biến KEYENCE EV-118M 6

Hình 2.5 Cảm biến quang SICK GTB6-N1212 6

Hình 2.6 Bộ điều khiển PLC 7

Hình 2.7 Rơ-le trung gian OMRON MY2N 7

Hình 2.8 Giản đồ Grafcet 8

Hình 3.1 Ví dụ Inline Style Sheet 16

Hình 3.2 Ví dụ Element Selector 18

Hình 3.3 Ví dụ Class Selector 19

Hình 3.4 Ví dụ Id Selcetor 20

Hình 3.5 Giao diện hệ thống phân loại chế độ Auto 28

Hình 4.1 Cài đặt Symbol Factory bước 2 29

Hình 4.2 Cài đặt Symbol Factory bước 3 30

Hình 4.3 Cài đặt Symbol Factory bước 4 30

Hình 4.4 Cài đặt Symbol Factory bước 5 31

Hình 4.5 Cài đặt Symbol Factory bước 6 31

Hình 4.6 Cài đặt Symbol Factory bước 7 32

Hình 4.7 Cài đặt Symbol Factory bước 8 32

Hình 4.8 Cài đặt Symbol Factory bước 9 33

Hình 4.9 Xuất đồ họa từ Symbol Factory bước 1 33

Hình 4.10 Xuất đồ họa từ Symbol Factory bước 2 34

Hình 4.11 Xuất đồ họa từ Symbol Factory bước 3 34

Hình 4.12 Xuất đồ họa từ Symbol Factory bước 4 35

Hình 4.13 Xác định địa chỉ IP của PLC 35

Hình 4.14 Bật chức năng PUT/GET trên PLC 36

Hình 4.15 Thiết lập PLC ở chế độ full access 36

Hình 4.16 Bật chức năng Web server 37

Hình 4.17 Tạo các lựa chọn cho người dùng 37

Hình 4.18 Thiết lập chu kì giao tiếp giữa PLC và trang Web 38

Hình 4.19 Tạo khối Database truyền thông giữa PLC và Webserver 38

Hình 4.20 Tạo Watch_table 39

Hình 4.21 Bật chức năng Webserver 39

Hình 4.22 Chọn loại trang tiêu chuẩn 40

Hình 4.23 Giao diện tiêu chuẩn của hãng Siemens 40 Hình 4.24 Chọn loại trang người dùng tự định nghĩa 41

DANH MỤC BẢNG BIỂU

Bảng 2.1 Bảng kiểu dữ liệu trong PLC 4

Bảng 2.2 Thông số cơ bản của bộ điều khiển PLC 7

Bảng 3.1 Các thẻ HTML sử dụng trong đồ án 14

Bảng 3.2 Cú pháp đọc giá trị từ PLC 15

Bảng 3.3 Bảng thuộc tính CSS dùng trong đồ án 21

Bảng 3.4 Một số thuộc tính sử dụng trong Javascript 25

CHƯƠNG 1 TỔNG QUAN HỆ THỐNG PHÂN LOẠI SẢN PHẨM 1.1 Tổng quan

Hệ thống phân loại sản phẩm là một giải pháp công nghiệp thay thế con ngườithực hiện công đoạn phân loại sản phẩm theo từng đặc tính của sản phẩm để thựchiện đóng gói hay loại bỏ sản phẩm không đạt yêu cầu do người sử dụng quyđịnh

Các hệ thống phân loại thường gặp như hệ thống phân loại theo màu sắc, phânloại theo kích thước, phân loại theo khối lượng, phân loại sử dụng xử lí ảnh.Nguyên lí hoạt động chung của hệ thống là sử dụng cảm biến để xác định các yếutố mang tính chất phân loại sản phẩm Chuyển động của băng tải đưa sản phẩmđến vị trí phân loại đã lắp đặt từ trước để tiến hành phân loại Chu trình sẽ lặp lạicho đến khi đủ số lượng sản phẩm yêu cầu

Hình 1.1 Hệ thống phân loại

1.2 Bài toán phân loại của đồ án

Yêu cầu của bài toán là phân loại được hai loại sản phẩm Loại sản phẩm đạt tiêuchuẩn là loại sản phẩm nhựa Loại sản phẩm không đạt chuẩn là sản phẩm kimloại Hệ thống hiển thị số lượng sản phẩm đã phân loại, số lượng sản phẩm lỗi, sốlượng sản phẩm đạt yêu cầu lên HMI và trang Web được thiết kế cho hệ thốngphân loại Ấn nút ON để cấp điện cho mô hình hệ thống Khi ấn nút Start thìđộng cơ băng tải chạy Khi số lượng sản phẩm đủ tiêu chuẩn đạt đến số lượngtheo yêu cầu thì đèn vàng sẽ sáng lên, đồng thời đèn xanh tắt Ấn nút Reset đểđặt có ô hiển thị đếm số sản phẩm về 0 Sau đó ấn nút GO ON để tiếp tục quátrình phân loại Ấn nút STOP để dừng quá trình phân loại ngay lập tức Ấn nútOFF để ngắt điện toàn bộ hệ thống Hệ thống có thể được giám sát và điều khiểntrên một trang Web tự thiết kế thông qua các trình duyệt Internet trên máy tính vàthiết bị di động

CHƯƠNG 2 THIẾT KẾ HỆ THỐNG ĐIỀU KHIỂN

2.1 Ý tưởng điều khiển, tính năng điều khiển và giao tiếp

Hiện nay, công nghiệp hóa hiện đại hóa đang giúp giải phóng sức lao động củacon người khỏi những công việc nặng nhọc lặp đi lặp lại Vấn đề phân loại sảnphẩm trong các kho dự trữ, kho đóng gói sản phẩm, kho phân loại sản phẩm,…cũng không phải là ngoại lệ Chính vì thế ý tưởng thiết kế một hệ thống điềukhiển tự động hóa cho hệ thống phân loại sản phẩm được hình thành

Hệ thống điều khiển cần phải có tính năng linh hoạt, chính xác, đáp ứng đượcnăng suất yêu cầu và làm việc được trong môi trường công nghiệp Ngoài ra hệthống điều khiển cũng cần phải thân thiện, dễ dàng sử dụng để không tạo khókhăn cho việc giao tiếp giữa người giám sát và hệ thống Ngoài ra, hệ thống điềukhiển cũng phải hỗ trợ chức năng liên quan đến Webserver để phù hợp với yêucầu của đề tài

2.2 Lựa chọn phương án điều khiển

Từ những ý tưởng, tính năng điều khiển của hệ thống điều khiển, ta sẽ tiến hànhlựa chọn phương án điều khiển phù hợp Tiêu biểu nhất cho phương án điềukhiển đó là sử dụng bộ điều khiển PLC (Programmable Logic Controller – Bộđiều khiển logic có khả năng lập trình) Bộ điều khiển PLC cho phép thực hiệnlinh hoạt các thuật toán điều khiển logic thông qua ngôn ngữ lập trình Bộ điềukhiển PLC được dùng để thay thế cho các mạch rơ-le (relay) trong thực tế Bộđiều khiển PLC có thể được lập trình bằng các ngôn ngữ khác nhau như LAD(Ladder logic), FBD (Function Block Diagram),…

Ưu điểm của bộ điều khiển PLC là dễ dàng thay đổi chương trình theo ý muốn,thực hiện các thuật toán phức tạp và độ chính xác cao, mạch điện gọn nhẹ dễdàng trong việc bảo quản và sửa chữa Cấu trức PLC dạng module, cho phép dễdàng thay thế, mở rộng đầu vào/ra, mở rộng các chức năng khác Khả năngchống nhiễu của PLC rất tốt, hoàn toàn tin cậy trong môi trường công nghiệp Cóthể giao tiếp với các thiết bị thông minh khác như máy tính, nối mạng truyềnthông với các thiết bị khác Hiện nay, bộ điều khiển PLC cũng đã hỗ trợ chứcnăng Webserver, đáp ứng nhu cầu của người dùng trong thời đại Internet đangbao phủ toàn cầu Tuy nhiên giá thành phần cứng PLC cao, một số hãng phảimua thêm phần mềm lập trình Bộ điều khiển PLC cũng yêu cầu người sử dụngcó trình độ chuyên môn cao

2.2.1 Phân loại PLC và ứng dụng

PLC có rất nhiều chủng loại và do nhiều nhà sản xuất cung cấp Một số nhà sảnxuất và tích hợp hệ thống sử dụng PLC do chính họ tạo ra Nó là một thành phầncấu thành hệ thống và được sử dụng trong phạm vi hẹp Một số nhà sản xuấtcung cấp PLC như là sản phẩm đa dụng cho người thiết kế và tích hợp hệ thống.Nhà sản xuất cung cấp thiết bị , phần mềm, hỗ trợ kĩ thuật và đào tạo người để sửdụng có điều kiện ứng dụng các sản phẩm này vào hệ thống của mình Có thể liệt

kê một số hãng sản xuất điển hình là: SIEMENS (Đức), ALLEN-BRADLEY,GE-FUNUC (Mỹ), OMRON, MITSUBISHI, TOSHIBA (Nhật Bản)…

Việc phân loại PLC dựa trên cơ sở khả năng (tốc độ xử lí, dung lượng bộ nhớ, sốlượng đầu vào/ra) được chia thành các loại chính sau: loại nhỏ, loại vừa và loạilớn

 PLC loại nhỏ có nhiều tên gọi khác nhau tùy thuộc các hãng chế tạo(Small, Micro), có dung lượng bộ nhớ dưới 2KB, quản lí số điểm vào radưới 128 và được sử dụng trong các ứng dụng đơn giản, yêu cầu ít điểmvào/ra

 PLC cỡ vừa (Medium) có bộ nhớ đến 32KB, và quản lí số điểm vào/ra đến

2048 Cấu hình của hệ có thể sử dụng các module vào/ra đặc biệt để thựchiện các chức năng điều khiển quá trình và xử lí thông tin

 PLC cỡ lớn (Large) là thiết bị phức tạp nhất, có thể quản lí đến 2MB bộnhớ và 16000 điểm vào/ra PLC cỡ lớn có ứng dụng không hạn chế, từđiều khiển một quá trình công nghệ đến điều khiển một phân xưởng, mộtnhà máy

Để thuận tiện cho việc tìm hiểu, thiết kế hệ thống điều khiển và tính ứng dụngcao trong thực tế, trong phạm vi đồ án tốt nghiệp em lựa chọn bộ điều khiển PLCSIMATIC S7-1200 của hãng Siemens để thiết kế hệ thống điều khiển cho hệthống phân loại sản phẩm Phần mềm lập trình và mô phỏng cho bộ điều khiểnPLC SIMATIC S7-1200 là phần mềm TIA Portal V16

2.2.2 Cấu tạo và nguyên lí hoạt động của PLC

 Nguyên lí làm việc

Bộ điều khiển PLC thực hiện chương trình theo chu kì lặp, mỗi vòng lặp là mộtchu kì quét của PLC Một vòng quét được thực hiện trong một khoảng thời gianrất ngắn (1-100ms cho một vòng đơn) Chu kỳ quét dài hay ngắn của bộ điềukhiển PLC phụ thuộc vào độ dài của chương trình và mức độ giao tiếp của PLCvới các thiết bị ngoại vi Trong thực tế, các cơ cấu chấp hành là hệ thống cơ khínên tốc độ quét của bộ điều khiển PLC hoàn toàn có thể đáp ứng yêu cầu

 Module nguồn

Đây là bộ phận cung cấp nguồn điện cho CPU và các module vào/ra Nguồncung cấp điện có thể được tích hợp sẵn trên PLC hoặc có thể là module độc lập.Các mức điện áp phổ biến khi cấp nguồn cho PLC là 220 VAC, 110VAC hoặc

24 VDC Đối với các hệ PLC nhỏ thì có thể nguồn điện có thể được sửu dụngcho các thiết bị trên module Đối với các hệ PLC lớn thì nguồn cung cấp cho cácmodule trên PLC có thể được lấy từ bên ngoài

 Bộ xử lí trung tâm CPU - Central Processing Unit

Bộ xử lí trung tâm CPU là bộ não của PLC, có chức năng nhận dữ liệu từ cácmodule vào, thực hiện chương trình, đưa ra quyết định và điều khiển các cơ cấu

phần chính của CPU bao gồm: bộ vi xử lí, bộ nhớ, cách mạch truyền thông, cácmạch phụ trợ và mạch biến đổi nguồn Các bộ vi xử lí có thể khác nhau về tốc dộ

xử lí và tùy chọn bộ nhớ Bộ nhớ là nơi lưu trữ chương trình điều khiển cùng vớicác thông tin có thể truy xuất

 Cấu trúc thanh ghi và bộ nhớ trên PLC

Bit là đơn vị nhỏ nhất của bộ nhớ và chỉ chứa được thông tin ở dạng 0 và 1 Một byte được định nghĩa là một nhóm nhỏ nhất các bit mà CPU có thể xử líđồng thời trong một lần Trong các thiết bị điều khiển PLC, một byte có kích cỡthông thường là 8 bit

Kiểu dữ liệu Giá trị biểu biểu diễn

BYTE Char 1 byte = 8 bit , biễu diễn giá trị từ 0 - 255WORD Int 1 word =16 bit, biểu diễn giá trị từ 0 - 65535

DWORD Real, Dint, Time 1 Dword = 32 bit, biểu diễn giá trị từ 0 – 232-1

Bảng 2.1 Bảng kiểu dữ liệu trong PLC

 Cách gọi BIT trong thanh ghi PLC Siemens

I0.1 : Bit số 1 của thanh ghi thứ 0 trên vùng nhớ I

M10.5: Bit số 5 trên thanh ghi thứ 10 của vùng nhớ M

Q2.4 : Bit số 4 trên thanh ghi thứ 2 của vùng nhớ Q

 Cách gọi WORD trong thanh ghi PLC Siemens

IW0 = IB0 + IB1: gồm byte 0 và byte 1 trên vùng nhớ I

MW7 = MB7 + MB8: Byte 7 và byte 8 trên vùng nhớ M

QW2 = QB2 + QB3: Byte 2 và byte 3 trên vùng nhớ Q

 Cách Gọi DWORD trong thanh ghi PLC Siemens

ID0 = IW0 + IW2 = IB0 + IB1 + IW2 + IW3

2.3 Xây dựng mô hình phân loại sản phẩm

Để đơn giản, thuận tiện cho quá trình làm đồ án, em sử dụng một mô hình phânloại sản phẩm đơn giản đáp ứng những yêu cầu cơ bản của bài toán phân loại sảnphẩm Mô hình bao gồm:

 Một mô hình băng tải

Hình 2.2 Mô hình băng tải

 Một động cơ Servo gắn tay gạt (Phụ lục)

Hình 2.3 Động cơ High Voltage Servo

 Một động cơ một pha (Phụ lục)

Hình 2.4 Động cơ MISUMI AC OIK3GN-D

 Một cảm biến tiệm cận loại 2 dây (Phụ lục)

Hình 2.5 Cảm biến KEYENCE EV-118M

 Một cảm biến quang NPN loại 3 dây (Phụ lục)

Hình 2.6 Cảm biến quang SICK GTB6-N1212

 Một bộ điều khiển PLC S7-1200 1214C DC/DC/DC

Hình 2.7 Bộ điều khiển PLC

Bộ nhớ (Work Memmory) 100KB

Bộ đếm tốc độ cao 6 bộ high-speed counter

Bảng 2.2 Thông số cơ bản của bộ điều khiển PLC

 Rơ-le trung gian OMRON MY2N (Phụ lục)

Hình 2.8 Rơ-le trung gian OMRON MY2N

2.4 Giản đồ Gratcet của mô hình hệ thống

Hình 2.9 Giản đồ Grafcet

 Giải thích giản đồ Grafcet:

 S0: Hệ thống không có điện Động cơ không hoạt động Tất cả các đèn tắt.

 S1: Hệ thống có điện Động cơ không hoạt động Đèn GREEN ON sáng.Các đèn còn lại tắt

 S2: Động cơ hoạt động Đèn GREEN ON, GREEN ST sáng Các đèn cònlại tắt

 S3: Động cơ dừng hoạt động Đèn GREEN ON, Red sáng Đèn GREEN

ST, Yellow tắt

 S4: Động cơ dừng hoạt động Đèn GREEN ON, Yellow sáng ĐènGREEN ST, Red tắt

 S5: Động cơ hoạt động Động cơ hoạt động Đèn GREEN ON, GREEN

ST sáng Các đèn còn lại tắt Tay gạt hoạt động

CHƯƠNG 3 THIẾT KẾ GIAO DIỆN WEBSERVER

3.1 Các khái niệm cơ bản về Web

 Mạng máy tính

Mạng máy tính là một tập các máy tính được nối với nhau bởi đường truyền theomột cấu trúc nào đó và qua đó các máy tính có th ể trao đổi tin tức thông qua cácgiao thức truyền thông

Đường truyền là một hệ thống các thiết bị truyền dẫn có dây hay không có dâynhư cáp xoắn, cáp đồng trục , cáp quang, dây điện thoại, sóng vô tuyến

Tập các đường truyền tạo nên một cấu trúc mạng

Mạng máy tính được phân thành 2 loại: mạng diện rộng và mạng cục bộ, việcphân loại mạng máy tính dựa vào khoảng cách địa lý

 Mạng cục bộ (Local Area Networks) hay thường gọi là mạng LAN: làmạng được thiết kế để trao đổi thông tin giữa các máy tính trong mộttoà nhà, một khu nhà, một phân xưởng nhỏ

 Mạng diện rộng (Wide Area Networks) hay còn gọi là mạng WAN: Làmạng được thiết lập để kết nối các máy tính ở những khu vực lại vớinhau, ví dụ như giữa các thành phố, giữa các khu vực

 Internet

Internet ra đời vào giữa năm 1960 Người ta đã xây dựng Internet như một giaothức để trao đổi và chia sẻ thông tin giữa các viện nghiên cứu với nhau Ngàynay Internet cho phép hằng trăm triệu người trên khắp thế giới liên lạc và trao đổithông tin với nhau thông qua tập các tập các giao thức gọi chung là TCP/IP(Transmission Control Protocol/Internet Protocol)

 Website

Website còn gọi là trang web (hoặc trang mạng) là tập hợp các trang chứa thôngtin bao gồm văn bản, hình ảnh, video, dữ liệu,… nằm trên một domain (tênmiền), được lưu trữ trên máy chủ (web server) Các trang web có thể được tạo vàduy trì bởi một cá nhân, nhóm, doanh nghiệp hoặc tổ chức để phục vụ nhiều mụcđích khác nhau Website có thể được người dùng truy cập từ xa thông qua mạngInternet

 Web page

Web page là trang web, là một loại tập tin đặc biệt được viết bằng ngôn ngữsiêu văn bản HTML Web page có thể hiển thị các thông tin văn bản, âm thanh,hình ảnh Trang Web này được đặt trên máy chủ (server) sao cho máy khách(client) có thể truy cập được nó Chúng ta cũng có thể đặt tập tin này trên ổ cứngmáy tính của mình nhưng người khác sẽ không đọc được nó

 Webserver

Web server đơn giản là một máy tính kết nối vào Internet và chạy các phần mềmđược thiết kế để truyền tải nội dung dưới dạng trang HTML (Trang HTML có thểchứa âm thanh, hình ảnh, video, văn bản) hay dưới dạng tập tin (tập tin có thể làtập tin hình ảnh, âm thanh, văn bản, video ) Máy chủ (server) phải đủ mạnh để

đáp ứng nhiều kết nối Internet đồng thời Thông qua trình duyệt Web máy chủ sẽcung cấp các dịch vụ được yêu cầu đến máy khách (client)

 Web Browser

Web browser là một công cụ hay chương trình cho phép bạn truy xuất và xemthông tin trên web Có nhiều web browser để truy xuất web Mỗi web browser cónhững đặc điểm khác nhau và chúng sẽ hiển thị những trang web không hoàntoàn giống nhau

 Địa chỉ IP

IP là một địa chỉ dùng để xác định đối tượng gởi và nhận thông tin trên Internet,địa chỉ này có kích thước 32 bits (version 4), 64 bits (version 5 trở l ên) Khi gửi

một nội dung, thì địa chỉ IP của bạn sẽ được gửi cùng các gói tin nội dung đến

người nhận Khi người nhận nhận được yêu cầu từ bạn thì họ căn cứ vào địa chỉ

IP để phản hồi thông tin lại cho bạn.

Địa chỉ IP gồm 2 phần: Phần địa chỉ mạng và phần địa chỉ máy 32 bit địa chỉ IP

được chia thành 4 vùng, mỗi vùng có kích thước 1 byte (8 bits) được biểu diễndưới dạng thập phân thập lục phân hay nhị phân Thông thường người ta dùng

cách viết thập có dấu chấm để tách các vùng Mục đích của địa chỉ IP là để định

danh duy nhất cho một máy tính bất kỳ tr ên liên mạng

Các máy tính trao đổi thông tin với nhau thông qua mô hình Client/Server Môhình Client/Server là mô hình trao đổi thông tin giữa các máy tính trong đóServer thường là máy cung cấp thông tin trong khi Client là một công cụ haychương trình trên máy tính khác dùng để lấy thông tin từ máy Server Tuy nhiên,máy Client cũng có thể đóng vai trò cung cấp dữ liệu cho máy Server

Để trao đổi thông tin giữa các máy tính với nhau người ta đặt ra một số giao thức(Protocol) truyền thông trên mạng, các quy định về việc trao đổi thông tin để cácmáy tính có thể nói chuyện với nhau thông qua mạng

Với mức độ phổ biến của Internet ngày càng cao, số lượng người tham gia ngàycàng lớn thì các giao thức truyền thông trở nên phổ biến và đa dạng

 IP Public

Địa chỉ IP Public là địa chỉ IP được cung cấp bởi ISP (Internet Service Provider)khi truy cập vào không gian mạng Internet Đây là địa chỉ xác định máy tính củangười dùng trên không gian mạng Internet

Địa chỉ IP Public có thể được chia thành hai loại là địa chỉ IP tĩnh (Static IP) vàđịa chỉ IP động (Dynamic IP) Địa chỉ IP tĩnh là địa chỉ không thay đổi kể cả khingắt kết nối với mạng Internet Trái lại, địa chỉ IP động luôn thay đổi địa chỉ IPtheo mỗi lần kết nối vào mạng Internet Mỗi người sử dụng Internet đều có mộtđịa chỉ IP động do ISP cung cấp mỗi khi vào mạng Internet Khi ngắt kết nối vớimạng Internet, địa chỉ IP này sẽ được cung cấp cho một thiết bị khác truy cậpInternet Điều này giúp tiết kiệm được địa chỉ cung cấp do số lượng thiết bị truycập mạng Internet đồng thời ngày càng lớn

 IP Private

Khác với Public IP là địa chỉ dùng để xác định máy tính của bạn trên Internetthì Private IP là địa chi dùng để xác định máy tính của bạn trên một mạng riêngnào đó, như mạng nội bộ của các công ty, trường học… Các địa chỉ Public IPđược cung cấp bởi ISP, còn Private IP thì sẽ được người điều hành gán cho mỗimáy tính trong mạng riêng của mình, người điều hành này được quyền gán bất kỳđịa chỉ IP nào tuỳ thích miễn là nằm trong dãy IP được quy định sẵn cho mạngriêng (Private Network) bởi tổ chức IANA (Internet Assigned NumbersAuthority)

 Domain (Tên miền)

Là địa chỉ trang web hoạt động trên môi trường Internet mà mọi người sử dụngđể tìm kiếm và truy cập vào một website bất kì Tên miền được sử dụng rộng rãi

và thường xuyên hơn so với địa chỉ IP do tên miền được thể hiện bằng các kí tựcó trong bảng chữ cái và dễ nhớ hơn so với dãy số địa chỉ IP Một trang webthường sẽ đi kèm với một địa chỉ IP cố định (IP Static ) và không thay đổi

Một domain thường bao gồm hai phần chính: phần tên miền (domain name) vàphần mở rộng (domain extension) Phần tên miền thường là tên duy nhất và phảnánh nội dung hoặc thương hiệu của trang web, ví dụ: “google” Phần mở rộngđược thêm vào phần tên miền và thường chỉ định loại domain hoặc quốc gia, vídụ: “.com” cho các trang web thương mại, “.org” cho các tổ chức phi lợi nhuận,hoặc “.vn” cho các trang web tại Việt Nam

 DNS (Domain Name System)

DNS là hệ thống phân giải tên miền trên Internet Thông thường, trình duyệt sẽtìm kiếm một website thông qua địa chỉ IP của website được cung cấp (thường làbốn số ngăn cách nhau bởi dấu chấm đối với Ipv4) Nhưng việc phải nhớ dãy sốdài và không có ý nghĩ gây ra khó khăn lớn cho người sử dụng, nhất là trong thờibuổi hiện nay số lượng website là rất lớn DNS thực hiện chuyển đổi các tênmiền (domain) dạng kí tự mà người sử dụng dùng để truy cập một website thànhđịa chỉ IP dạng vật lí dạng của website đó Việc chuyển đổi tên địa chỉ IP củawebsite sang tên miền sẽ giúp cho người dùng dễ dàng tron việc truy cập vàotrang web

3.2 Các ngôn ngữ lập trình

3.2.1 HTML-Hypertext Markup Language

a Khái niệm

HTML (Hypertext Larkup Language) là ngôn ngữ định dạng văn bản siêu liênkết, là ngôn ngữ lập trình Web căn bản, cho phép định dạng văn bản, bổ sunghình ảnh, âm thanh, video, cũng như lưu tất cả vào một tập tin dưới dạng văn bảnhay dưới dạng mã ASCII, mã nhị phân mà bất cứ máy tính nào cũng có thể đọcđược thông qua trình duyệt Web (Web Browser) HMLT có hai đặc tính cơ bảnnhư sau:

 Siêu văn bản: Tạo các liên kết trong trang Web, cho phép truy cậpthông tin từ nhiều hướng khác nhau thông qua các Hyperlinks.

 Tính tổng quát: Hầu như máy tính nào cũng có thể đọc được thiết kếbằng ngôn ngữ HTML Điều đó là do dữ liệu trong tập tin HTML đượclưu dưới dạng văn bản hay dưới dạng mã ASCII

b Cấu trúc của một tài liệu HTML

 Tag

Tag (thẻ) là một tập các ký hiệu được định nghĩa trong HTML có ý nghĩa đặcbiệt Tag được bắt đầu bằng ký hiệu nhỏ hơn (<) theo sau bởi một từ khoá (tênthẻ), và kết thúc bằng ký hiệu lớn hơn (>) Nó quy định văn bản được hiển thịtrên màn hình như thế nào

- Thẻ mở : <tên thẻ>

- Thẻ đóng : </tên thẻ>

 Phần tử (Element)

Tất cả các nội dung nằm giữa thẻ mở (<tên thẻ>) và thẻ đóng (</tên thẻ>) đượcgọi là một phần tử (Element) của tài liệu HTML Một phần tử (Element) thôngthường như thẻ <div>, <p>, <h>,… sẽ được coi là một block Một block thôngthường khi chưa có tác động của các thuộc tính sẽ chiến toàn bộ không gian theochiều ngang của trang và được sắp xếp theo thứ tự từ trên xuống dưới Khác vớiBlock ta có các Inline Element ( <img>, <a>,…) Các Inline Element sẽ khôngchiếm toàn bộ không gian theo chiều ngang của trang Các Inline Element đượcsắp xếp theo thứ tự từ trái sang phải liền nhau

VD: <h1> Đây là phần tử </h1>

 <!DOCTYPE>

Đây không phải là một thẻ HTML Vai trò của <!DOCTYPE> là giúp cho trìnhduyệt biết được phiên bản HTML trang web đang sử dụng Tất cả các tài liệuHTML điều phải khai báo loại tài liệu bằng <!DOCTYPE> Điều này giúp chotrình duyệt hiển thị trang web một các chính xác Khai báo <!DOCTYPE> khôngphân biệt chữ hoa và chữ thường

Siêu dữ liệu thường định nghĩa tiêu đề văn bản (thẻ <title>), bộ kí tự (thẻ

<meta>), kiểu cách (thẻ <style>), đường dẫn (thẻ <link>), kịch bản (thẻ <script>)

 Thẻ <title>: Định nghĩa tiêu đề hiển thị trên trình duyệt web, làmtiêu đề cho trang khi nó được thêm vào yêu thích, hiển thị tiêu đề

trong các bộ kết quả tìm kiếm Đây là thẻ bắt buộc đối với mọi vănbản HTML.

 Thẻ <meta>: Xác định bộ kí tự được sử dụng, mô tả trang, từ khóa,tác giả và các thông tin siêu dữ liệu khác Siêu dữ liệu được trìnhduyệt dùng để tìm kiếm nội dung Bộ tìm kiếm dùng để hiển tự từkhóa và các dịch vụ Web khác

 Thẻ <link> : Dùng để liên kết tới các Sheet bên ngoài

 Thẻ <style> Dùng để biểu diễn thông tin và kiểu cách cho mộttrang HTML

 Thẻ <script>: Dùng để định nghĩa Javascript

 Thẻ <body>

Phần thân của trang Webđược đặt giữa thẻ <body> và thẻ </body> Thẻ được sửdụng để xác định phần thân của tài liệu Chứa tất cả nội dung của tài liệu HTMLnhư tiêu đề, đoạn văn, hình ảnh, bảng, danh sách Chỉ có thể sử dụng duy nhấtmột lần thẻ <body> trong tài liệu HTML

 Các thẻ HTML sử dụng trong đồ án

<h>…</h> Giúp tạo đề mục , tiêu đề cho nội dung hiển thị trên trang

Web Thường sẽ là tiêu đề cho khối văn bản

<p>…</p> Dùng để biểu diễn khối văn bản

<div>…</div>

Được sử dụng làm nơi chứa các phần tử HTML, giúp cho việc tạo bố cuc của trang web trở nên dễ dàng và thuận tiên Bất kì nội dung nào của HTML đều có thể đặt trong thẻ <div> Đây là phần tử dạng block, độ rộng là toàn bộ trang web

<button>…</

button>

Dùng để tạo các nút ấn có thể nhấn hiển thị ở trên trang web

<img>…</img> Định nghĩ một hình ảnh trong tài liệu HTML

<label>…</label> Dùng để xác định nhãn cho phần tử <input> như password,textbox,…

<input>…</input> Dùng để tạo ra một ô nhập liệu trong tài liệu HTML như nhập tên đăng nhâp, mật khẩu,…

<span>…</span> Tương tự như thẻ <div> nhưng <span> là phần tử dạng

inline Có độ rộng bằng nội dung mà thẻ span tác động

<form>…</form> Tạo một biểu mẫu HTML để thu thập đầu vào của người

dùng nhằm mục đích gửi thông tin đến máy chủ để xử lí

<br> Nội dung hiển thị sẽ tự động xuống dòng ngay sau khi gặpthẻ <br>.

Bảng 3.3 Các thẻ HTML sử dụng trong đồ án

 Thuộc tính ID

Thuộc tính id được sử dụng để chỉ định một id duy nhất cho một phần tử trongtoàn bộ tài liệu HTML Giá trị của id là duy nhất trong một tài liệu HTML Giá

trị của id trong tài liệu HTML cũng được sử dụng trong CSS hoặc Javascript đểthực hiện một tác vụ duy nhất với giá trị của id đó Thuộc tính id có thể dùng chobất kì phần tử nào của HTML Giá trị id có phân biệt chữ hoa và chữ thường.

 Thuộc tính Class

Thuộc tính class dùng để xác định một hoặc nhiều tên lớp cho phần tử HTML.Tên lớp có thể dùng trong CSS hoặc JavaScript để thực hiện một số tác vụ nhấtđịnh cho phần tử có tên lớp đó Trong tài liệu HTML để thêm thuộc tính classcủa một phần tử sẽ được định nghĩa trong phần đầu của tài liệu HTML, nằm giữahai thẻ <style> và </style> Trong CSS, để chọn phần tử có lớp đặc biệt, ta thêmdấu chấm (.) và sau đó điền tên lớp

 Automation Web Programming (AWP)

Automation Web Programming là ngôn ngữ Web do hãng Siemens phát triển chocác dòng PLC được tích hợp tính năng Webserver AWP thực chất là các dòngghi chú được mô tả trong tài liệu HTML nhưng bộ điều khiển PLC có thể biêndịch và hiểu được Nhờ vào AWP mà người dùng có thể truy cập đẻ lấy dữ liệutrên PLC Automation Web Programming bao gồm ba tác vụ cơ bản là đọc giá trịtừ PLC (Read), ghi giá trị xuống PLC (Write) và thay thế giá trị dạng số bằngdạng văn bản (Enum) Trong phạm vi đồ án không sử dụng tác vụ (Enum)

 Đọc giá trị từ PLC

Để đọc giá trị từ PLC người dùng có ther sử dụng cú pháp sau:

“tên_biến:=I0.5:”, Đọc giá trị từ ô nhớ I0.5

“tên_biến:=”Motor”:”, Đọc giá trị từ tag Motor

"name_tag1":":="DB_name".name_tag2:", Đọc giá trị tag “name_tag2” trong

khối DB_name

Bảng 3.4 Cú pháp đọc giá trị từ PLC

Các cụ pháp được đặt giữa hai dấu ngoặc nhọn {}

 Ghi giá trị xuống PLC

Để ghi giá trị xuống PLC, ta cần khai báo biến muốn ghi giá trị theo cú phápchung:

<! AWP_In_Variable Name='"DB_name".tag_name' >

Trong phạm vi của đồ án Các cú pháp đọc giá trị biến và ghi giá trị xuống PLCđược đặt ở một tài liệu HTML riêng Tài liệu này được lấy làm dữ liệu cho các

câu lệnh trong tài liệu Javascript Việc để riêng các cú pháp AWP giúp cho việcquản lí các tag name, các biến được hiển thị và được ghi giá trị trở nên dễ dàng.

3.2.2 CSS-Cascading Style Sheet

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sửdụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu(HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web Có thểhiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên websitenhư việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta cóthể thêm kiểu cách (style) vào các phần tử HTML đó như đổi bố cục, màu sắctrang, đổi màu chữ, font chữ, thay đổi cấu trúc…

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọncó thể là tên một thẻ HTML, tên một ID, Class hay nhiều kiểu khác Sau đó là nó

sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó Mối tương quan giữaHTML và CSS rất mật thiết HTML là ngôn ngữ markup (nền tảng của site) vàCSS định hình phong cách (tất cả những gì tạo nên giao diện website) CSS vàHTML có mối liên kết thể tách rời

Dựa vào cách sử dụng, CSS trong tài liệu HTML được chia thành ba phươngpháp sử dụng CSS vào tài liệu HTML bao gồm: Inline Style Sheet, EmbeddingStyle Sheet, External Style Sheet

a Inline Style Sheet (Nhúng CSS vào thẻ HTML)

Đây là phương pháp dùng để định nghĩa kiểu cách (Style) cho một thẻ (Tag) haymột phần tử (Element) cụ thể Do đó, kiểu cách này sẽ không thể dùng cho cácthẻ khác Inline Style Sheet được sử dụng phù hợp trong các trường hợp các thẻ(Tag) hay các phần tử (Element) cục bộ, không lặp lại trong tài liệu HTML

 Ưu Điểm: Inline Style Sheet là có thể dễ dàng quản lí trực tiếp kiểu

cách của phần tử HTML

 Nhược điểm: Cần phải định nghĩa lại từng kiểu cách (style) trong

mỗi tài liệu HTML cụ thể Khó cập nhật kiểu cách của các phần tửmột cách nhanh chóng

 Cú pháp

<tag style = “ property1: value1; property2: value2;…”> Element</tag>

Hình 3.10 Ví dụ Inline Style Sheet

b Embedding Style Sheet (Nhúng CSS vào tài liệu HTML)

Đây là phương pháp dùng để định nghĩa kiểu cách (Style) mà toàn bộ các phần tửcó tài liệu HTML đều có thể sử dụng Phần định nghĩa được đặt giữa thẻ mở

<style> và thẻ đóng </style> Thẻ <style> được đặt trong phần đầu của tài liệuHTML (giữa thẻ <head> và thẻ </head>) Kiểu cách sẽ được gọi trong phần thâncủa tài liệu HTML (nằm giữa thẻ <body> và </body>) khi sử dụng Kiểu địnhnghĩa này phù hợp trong trường hợp trang web này có kiểu cách riêng biệt vàkhông mang tính tổng quát cho các trang web được thiết kế sau này

 Ưu điểm: Embedding Style Sheet là dễ dàng quản lí kiểu cách

(style) của trang theo từng tì liệu HTML

 Nhược điểm: Mỗi khi thiết kế một tài liệu HTML mới thì phải

định nghĩa lại kiểu cách (style) cho các phần tử, đối tượng trong tàiliệu

 CSS Selector

CSS Selector là bộ chọn của CSS có chức năng tìm và chọn các phần tử(Element) trong tài liệu HTML mà ta muốn tạo kiểu cách (style) Có tám loạiCSS Selector bao gồm: Basic CSS Selectors, Descendant CSS Selectors,Multiple CSS Selectors, Combination CSS Selectors, Sibling CSS Selectors,Pseudo CSS Selectors, Pseudo CSS Selectors (link and input), Attribute CSSSelectors Phạm vi của đồ án chỉ sử dụng loại Basic CSS Selectors

Basic CSS Selector được sử dụng để chọn các phần tử (Element Selector), cáclớp (Class Selector) và id (Id Selector)

 Element Selector

Bộ chọn phần tử chọn phần tử dựa vào tên của các phần tử Cụ thể là dựa vào tênthẻ có sẵn trong các tài liệu HTML của các phần tử được chọn Lúc này toàn bộcác phần tử trong tài liệu HTML được bắt đầu bằng thẻ đã được định nghĩa kiểucách (style) theo phương thức Element Selector sẽ có kiểu cách đã định nghĩa.Cú pháp của bộ chọn Element Selector:

Hình 3.11 Ví dụ Element Selector

 Class Selector

Bộ chọn phần tử chọn các phần tử (Element) có sử dụng thuộc tính dưới dạngClass trong tài liệu HTML Một phần tử có thể mang nhiều loại kiểu cách (style)được định nghĩa trong các Class khác nhau bằng cách khai báo thuộc tính classtrong thẻ mở <tag_name> Cú pháp của bộ chọn class Selector:

Property2: value2;

…}

Hình 3.12 Ví dụ Class Selector

 Id Selector

Bộ chọn phần tử chọn phần tử (Element) dựa vào id mà phần tử đó được đặt Khi

sử dụng bộ chọn phần tử này thì chỉ có duy nhất phần tử (Element) có thuộc tính

id đã được chọn mới có kiểu cách (style) đã được định nghĩa

Cú pháp của bộ chọn Id Selector:

#id_name2{

Property2: value2;

…}

</style>

</head>

<body>

<tag_name1 id = “id_name1”>… Content …</tag_name1>

<tag_name2 id = “id_name2”>… Content …</tag_name2>

</body>

Hình 3.13 Ví dụ Id Selcetor

 Chú ý

Để dễ dàng quản lí và thiết kế kiểu cách trang web, thứ tự ưu tiên khi áp dụngcác bộ chọn cần phải được lưu ý Một phần tử có thể cùng được tạo kiểu cách(style) bằng các bộ chọn Element Selector, Class Selector và Id Selector Chínhvì thế, thứ tự ưu tiên sử dụng bộ chọn cũng rất quan trọng Cùng một thuộc tính(property) nhưng khác nhau về giá trị thuộc tính (value) thì giá trị thuộc tính nàođang ở bộ chọn có thứ tự ưu tiên cao hơn thì giá trị thuộc tính đó sẽ được áp dụngcho phần tử đang được tạo kiểu cách

Thứ tự ưu tiên của các bộ chọn Basic CSS Selector tăng dần theo thứ tự: ExternalStyle Sheet, Embedding Style Sheet, Inline Style Sheet

c External Style Sheet ( Liên kết tài liệu CSS vào tài liệu HTML)

Đây là phương pháp hay dùng nhất để tạo kiểu cách (style) cho các phần tử củamột trang web nói riêng và toàn bộ trang web nói chung Đặc điểm của phươngpháp là các kiểu cách của các phần tử (Element) trong tài liệu HTML sẽ đượcđịnh nghĩa và lưu trong một tài liệu có phần mở rộng là “.css” Kiểu cách được

áp dụng trong tài liệu HTML bằng cách thêm vào bên trong tài liệu HTML mộtđường dẫn đến nơi lưu trữ tài liệu định nghĩa các kiểu cách (style) có phần mởrộng “.css” Một tài liệu HTML có thể sử dụng kiểu cách được định nghĩa trongnhiều tài liệu CSS khác nhau

 Ưu điểm: Có thể quản lí dễ dàng kiểu cách theo từng tài liệu CSS.

Điều này có lợi cho các trang web có độ phức tạp cao Bên cạnhđó, phương pháp cũng giúp thiết lập kiểu cách Style cho nhiềutrang web hay các tài liệu HTML được thiết kế về sau

 Nhược điểm: Tốn thời gian tải xuống tài liệu có phần mở rộng

“.css” và làm chậm quá trình biên dịch web ở trình duyệt trong lần đầu sử dụng

 Cú pháp:

Đầu tiên, tạo một tài liệu có phần mở rộng “.css” có tên : “name_file.css” Cáckiểu cách (style) áp dụng cho tài liệu HTML sẽ được định nghĩa tại đây Các cúpháp để định nghĩa các kiểu cách (style) trong tài liệu CSS sẽ tương tự cú phápcủa bộ chọn Basic CSS Selector bao gồm: Element Selector, Class Selector, IdSelector

Tại phần đầu của tài liệu HTML giữa hai thẻ <head> và </head> sẽ thêm đườngdẫn đến tài liệu CSS vừa tạo bằng cú pháp:

<tag_name1 id = “id_name1”>… Content …</tag_name1>

<tag_name2 class = “class_name2”>… Content …</tag_name2>

</body>

</html>

 Thuộc tính CSS dùng trong đồ án

Background-color Điều chỉnh màu cho nền

Background-img Đặt ảnh bìa nền

Font-weight Điều chỉnh độ đậm

Font-family Đặt font chữ cho nội dung

width Điều chỉnh độ rộng cho một block

Height Điều chỉnh chiều cao cho một block

Boder – radius Bo góc cho khối block

Margin Điều chỉnh vị trí tương đối của khối block

padding Điều chỉnh vị trí nội dung của một khối block

Text-align Căn chỉnh vị trí nội dung có chữ trong một block

Bảng 3.5 Bảng thuộc tính CSS dùng trong đồ án

3.2.3 Javascript

a Khái niệm

Javascript là ngôn ngữ phổ biến trên thế giới Đây là ngôn ngữ kịch bản phíakhách hàng (Client-side script), hoạt động dựa trên những thay đổi hay tác động(click chuột,…) bên phía trình duyệt của người dùng Javascript là một ngôn ngữdễ học, tương đồng với cú pháp của ngôn ngữ lập trình C Ngôn ngữ Javascriptđược hỗ trợ bởi hầu hết các trình duyệt hiện có trên máy tính như Chorme,Mozilla Fierfox,…Nếu như CSS tạo nên kiểu cách cho tài liệu HTML (dạng tĩnh)thì ngôn ngữ Javascript sẽ tạo nên các chuyển động, hiệu ứng (Animation, effect,

… ) hay các thay đổi (dạng động) của các phần tử trong tài liệu HTML

b Client-Side Script và Server-Side Script

 Client-Side Script

Script sẽ được thực hiện tại phía giao diện hiển thị với người dùng (Client-Side)như tạo menu chuyển động, hiển thị trạng thái nhập dữ liệu,…Người dùng có thểxem được mã nguồn trên trình duyệt Việc chạy chương trình với những mãnguồn mà người dùng có thể xem ở trên sẽ được thực hiện tại máy khách Bênphía máy khách sẽ không thể truy cập vào quá trình xử lí dữ liệu của máy chủ(Web server) – nơi mà các câu lệnh của ngôn ngữ Javascript được thực hiện.Chương trình phía máy khách có thể được chạy mà không cần sự có mặt của máychủ

 Server-Side Script

Script sẽ được xử lí tại máy chủ dựa trên những tác động phía máy khách Side) như nháy đúp chuột, nhập thông tin cá nhân và mật khẩu,…phía Server sẽthực hiện kết nối đến hệ cơ sở dữ liệu để kiểm tra, xử lí các thông tin nhận đượctừ phía máy khách, xử lí và trả lại kết quả hiển thị đến với trang Web trên trìnhduyệt (Client-Side) Chương trình được thực hiện trên máy chủ, vì vậy tốc độphản hồi thông tin đến phía người dùng (Client-side) phụ thuộc nhiều vào tốc độ

(Client-xử lí của máy chủ

c Các phương pháp áp dụng Javascript vào tài liệu HTML

Trong tài liệu HTML, các câu lệnh Javascript được thêm vào giữa hai thẻ

<script> và </script> Số lượng câu lệnh Javascript trong tài liệu HTML là khônggiới hạn Kịch bản (Script) giữa hai thẻ <script>và </script> có thể được đặttrong phần đầu (<head>) hoặc phần thân (<body>) hoặc đặt trong cả phần đầu vàphần thân của tài liệu HTML Có hai phương pháp để thêm Javascript vào tài liệuHTML bao gồm: External Javascript và Internal Javascript

 Intrenal Javascript

Internal Javascript là phương pháp thêm các câu lệnh vào trực tiếp tài liệuHTML Các câu lệnh Javascript được định nghĩa ngay trong phần đầu hoặc phầnthân hoặc cả phần đầu và phần thân của tài liệu HTML

</head>

<body>

<h2> Internal Javascript </h2>

<p id= “test”> doan van</p>

<button type= “button” onclick= “name_func()”> but on </button>

sử dụng cho nhiều tài liệu HTMl khác nhau Phương pháp External Javascriptgiúp quản lí tốt các câu lệnh, hàm,… Javascript, giảm số lượng dòng “code” bênphái tài liệu HTML, qua đó giúp tăng tốc độ xử lí của trang web Đây cũng làphương pháp được dùng phổ biến nhất

 Ví dụ:

-Tại tài liệu “name_javascript.js” hàm được định nghĩa:

function myFunction() {

document.getElementById("demo").innerHTML = "Paragraph changed.";