bg thiet ke va trien khai website 2022 chuong 3 442

CHƯƠNG 3: CÁC NGÔN NGỮ VÀ CÔNG CỤ  HTML: khai báo ra các đối tượng trên trang web + một số thuộc tính định dạng cơ bản, tạo ra cấu trúc của trang web  CSS: xác định kiểu trình diễn các

CHƯƠNG 3: NGÔN NGỮ VÀ CÔNG CỤ

CHƯƠNG 3: CÁC NGÔN NGỮ VÀ

CÔNG CỤ

 HTML: khai báo ra các đối tượng trên trang web + một số thuộc tính định dạng cơ bản, tạo ra cấu trúc của trang web

 CSS: xác định kiểu trình diễn các đối tượng trên trang web với bộ

thuộc tính phong phú, được hỗ trợ bởi tất cả các trình duyệt

 JavaScript: quản lý các đối tượng trên trang web, đặt các phép tính, điều kiện logic, các chức năng lập trình

— Ví dụ: thẻ <button> tạo nút bấm và xử lý sự kiện khi nút được bấm

 PHP: ngôn ngữ lập trình để tạo trang web động, ngôn ngữ phía máy chủ, cho phép tạo các hoạt động bên trong trang web, được thực thi

3.1.1 Tổng quan về HTML

văn bản (ngôn ngữ để viết các trang web)

Tệp mã nguồn HTML và trang Web

— Là tệp văn bản bình thường gồm

các kí tự ASCII

— Có thể được tạo ra bằng bất cứ bộ

soạn thảo thông thường nào

(Frontpage, EditPlus, MS Word,

Notepage, Wordpage,…)

— Có đuôi là html hoặc htm

Tệp mã nguồn HTML và trang Web

 Trang Web

— Là kết quả hiển thị tệp mã nguồn

bằng cách sử dụng trình duyệt

(Browsers: Internet Explorer,

Google Chrome, Firefox, Mozilar)

— Không tồn tại trên ổ đĩa cứng của

máy tính

— Bấm chuột phải vào bất kỳ vị trí nào

trên trang Web, tệp mã nguồn được

mở ra.

Bài tập số 5

— Tiêu đề: chào mừng bạn đến trang cá nhân của tôi

— Trang chủ (index.html)

• Đề mục: Giới thiệu

• Nội dung của đề mục: thông tin cá nhân cơ bản (danh sách) + ảnh chân dung

— Trang quá trình đào tạo/sở trường/sở thích

— Trang liên kết (contact.html)

• Đề mục: các liên kết

• Nội dung:

• Liên kết tới “Trường tôi”: liên kết đến website của Trường

• Liên kết từ trang này đến trang chủ: index.html

• Liên kết đến đề mục khác trong cùng trang

• Mailto

Bài tập 6

Bài tập 7

Bài tập 8

 Tệp html? <fieldset> </fieldset> <legend> </legend>

Bài tập về nhà

 Mỗi bạn tạo 1 website cá nhân (tĩnh) gồm các trang web:

— Trang chủ: sử dụng các liên kết trong cùng và khác website

• Liên kết tới “Trường tôi”: liên kết đến website của Trường

• Liên kết từ trang này đến trang chủ: index.html

• Liên kết đến đề mục khác trong cùng trang

• Mailto

— Liên lạc: sử dụng các đối tượng của form

Tổ chức lưu trữ các tệp html theo các

thư mục

 Trang chủ

— Tệp index.html

Địa chỉ tương đối liên kết các trang

3.1.3 Công cụ thiết kế web

— Có sẵn trong bộ MS Office

— Tách biệt cửa sổ Design

View, Code View

3.1.3 Công cụ thiết kế web

Tổng kết

 Các lớp thẻ cơ bản: cấu trúc, định dạng, form, chèn ảnh, bảngbiểu, khung

 Các công cụ thiết kế web

Bài tập về nhà

 Mỗi bạn tạo 1 website cá nhân (tĩnh) gồm các trang web:

— Trang chủ: sử dụng các liên kết trong cùng và khác website

— Quá trình học tập và làm việc: sử dụng bảng

— Sở thích: chèn hình ảnh, film, audio (bản nhạc)

— Liên lạc: sử dụng các đối tượng của form

3.2 Ngôn ngữ CSS (Cascading Style

Sheet)

3.2.2 Cú pháp

3.2.3 Một số thuộc tính định dạng cơ bản

3.1.1 Giới thiệu CSS

thuộc tính phong phú, được hỗ trợ bởi tất cả các trình duyệt

— Style Sheet : bảng định dạng, cho biết áp dụng kiểu dáng gì trên loại đối tượng nào

— Giúp tách biệt nội dung trang web với cách trình diễn nội dung

— Giúp đảm bảo sự nhất quán trong trình diễn

— Giúp sử dụng lại mã trong trình diễn

— Giúp tiết kiệm được thời gian, công sức thiết kế web

 Value: giá trị của thuộc tính tương ứng

— Ví dụ: font-family: ”Time New Roman”

selector {

Property1: Value1;

Property2: Value2;

}

Nhúng CSS vào trang HTML

Cách 2: sử dụng cú pháp selector (internal style): nhúng vào phần

header của trang (đặt giữa cặp <style type=“text/css”> … </style> )

Nhúng CSS vào trang HTML

styles.css

3.3 JavaScript

3.3.2 Chèn mã javaScript vào HTML

3.3.3 Biến, hàm, các cấu trúc lệnh

3.3.4 Giới thiệu DOM

3.3.5 Quản lý các đối tượng HTML bằng JavaScript

3.3.6 Kiểm tra tính hợp lệ của dữ liệu từ form - Form validation

3.3.1 Giới thiệu JavaScript

 Là ngôn ngữ kịch bản được thực thi bởi trình duyệt

 Phương pháp lập trình: mệnh lệnh, thủ tục, hướng đối tượng

 Kiểu dữ liệu ko tường minh (được xác định khi thực thi)

 Mã nguồn JavaScript đặt trong thẻ <script>

 Mã nguồn JavaScript gồm nhiều lệnh, mỗi lệnh kết thúc bằng dấu chấm phẩy (; )

 Javascript phân biệt chữ hoa chư thường

 Trong code js, có thể ghi chú thích Dùng // để chú thích 1 dòng, dùng / * */ để chú thích nhiều dòng

3.3.2 Chèn javaScript vào HTML

 Cách 1: Viết mã javaScript trực tiếp trong tệp mã nguồn HTML trong

phần head hoặc phần body:

<script language="JavaScript">

chỗ này viết mã javaScript;

<! // >

</script>

 Cách 2: Viết mã javaScript ở tệp khác (.js) và tải tệp đó trong tệp mã

nguồn HTML trong phần head hoặc phần body

<script language="JavaScript" src="filename.js">

</script>

9/5/2022 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 73

3.3.3 Biến, hàm, các cấu trúc, …

 Biến: khai báo bằng từ khóa var hoặc let

 Kiểu dữ liệu: số, xâu ký tự, logic

 Các cấu trúc: rẽ nhánh, lặp

 Mảng: chỉ số mảng bắt đầu từ 0

 Hàm

3.3.4 DOM (Document Object Model)

 Mô hình đối tượng tài liệu: là chuẩn được định nghĩa bởi W3C

 Truy xuất và thao tác (quản lý) các tài liệu có cấu trúc như HTML, XML

 Thao tác với dữ liệu theo mô hình hướng đối tượng

— Mỗi phần tử HTML được định nghĩa như một đối tượng có thuộc tính, phương thức (để thêm, xóa, sửa, cập nhật)

3.3.5 Quản lý các đối tượng trong

trang web

phần tử HTML

o Chỉnh nội dung các tag HTML trong trang

o Chỉnh thuộc tính các tag HTML trong trang

o Chỉnh định dạng CSS các tag HTML trong trang

o Xóa các tag và thuộc tính không mong muốn trong trang

o Thêm các tag HTML mới vào trang

o Tương tác với các sự kiện của các tag trong trang

o Trực tiếp: thông qua id, name, tag name

o Gián tiếp: thông qua mối quan hệ giữa các đối tượng trên DOM Tree

3.3.6 Kiểm tra tính hợp lệ của dữ liệu từ

Form (Form Validation)

 Giới thiệu về Form

 Thu thập dữ liệu từ Form

 Kiểm tra tính hợp lệ của dữ liệu Form

 Xử lý dữ liệu

 Hiển thị kết quả

Bài tập

 Viết mã HTML để tạo form có 1 ô textbox và 1 nút bấm submit

 Viết mã JS:

— Tìm phần tử textbox trong form bằng nhiều cách khác nhau

— Lấy giá trị của phần tử textbox tìm được và in ra màn hình giá trị đó

Bài tập số 2

thoại, Tính năng, Giá Ô Select Hãng có các giá trị NOK0001,

SAM0003, và SNY0006

 Khi người dùng nhập dữ liệu vào các ô điều khiển và click vàonút lệnh ‘Thêm mới’ thì toàn bộ dữ liệu trên form được in ra

màn hình

Bài tập

Tổng kết

 JavaScript cho phép quản lý các đối tượng trong trang web

— Thay đổi nội dung đối tượng

— Thay đổi giá trị thuộc tính của đối tượng

— Thay đổi kiểu trình diễn đối tượng (CSS)

— Có thể ẩn/hiện đối tượng

— Tạo mới, chèn, xóa đối tượng

— Bắt sự kiện, kiểm tra tính hợp lệ của dữ liệu

• tên truy cập không rỗng

• 2 mật khẩu giống nhau, khác rỗng, >4 ký tựNếu hợp lệ được submit, ngược lại thông báo lỗi.

Bài tập về nhà (khuyến khích)

 Tạo trang web để nhập thông tin cá nhân như sơ yếu lý lịch,

sử dụng JavaScript để kiểm tra dữ liệu được nhập có hợp lệhay không?

 Tiếp tục hoàn thiện website cá nhân gồm các phần nội dung

3.4 PHP

3.4.2 Cú pháp cơ bản

3.4.3 Làm việc với form

Giới thiệu về các phần mềm phía

Clien t

3.4.1 Giới thiệu PHP

 Ngôn ngữ lập trình phía máy chủ, miễn phí, được phát triển

 Hỗ trợ cả lập trình hướng thủ tục và lập trình hướng đối tượng

 Giao tiếp với trình phục vụ web qua CGI hoặc API

 Hỗ trợ nhiều loại cơ sở dữ liệu

3.4.1 Giới thiệu PHP

 Mã nguồn PHP được thực thi tại server, trả về kết quả là tệp

 PHP có thể:

— Tạo trang web động

— Tạo, đọc, mở, xóa, ghi, đóng các tệp trên server

— Thu thập dữ liệu từ form

— Thêm, xóa, sửa, đọc dữ liệu trong cơ sở dữ liệu

— Điều khiển truy cập

— Nén dữ liệu

3.4.1 Giới thiệu PHP

 Thực thi

— Lưu toàn bộ mã nguồn dự án tại thư mục cài đặt phần mềm Xampp/htdocs

— Mở trình duyệt, tại thanh địa chỉ gõ: localhost/tên tệp mã nguồn

3.4.1 Giới thiệu PHP

Nguồn: xuanthulab.net

3.4.2 Cú pháp cơ bản

 Để tạo ra các kết xuất trả về cho môi trường bên ngoài (trình duyệt) ta có thể sử dụng các cách sau:

— Viết kết xuất bên ngoài cặp thẻ <?php và ?>

— Dùng lệnh echo hoặc print

 Để tạo ra chú thích , có thể dùng cú pháp dạng C như sau:

Tham khảo thêm:

- Bài Ch3_Chi tiết về PHP và MySQL

- Trang http://phptutorial.net

3.4.3 Làm việc với Form

 Thu thập dữ liệu từ Form

 Kiểm tra tính hợp lệ của dữ liệu thu thập từ Form

 …

3.4.4 Kết nối với CSDL

1 Tạo kết nối đến máy chủ CSDL

2 Lựa chọn CSDL để làm việc

3 Xây dựng truy vấn, cập nhật và thực hiện truy vấn, cập nhật

4 Xử lý dữ liệu kết quả trả về khi thực hiện truy vấn, cập nhật

5 Đóng kết nối đến máy chủ CSDL

Tổng kết

 Làm việc với Form: thu thập dữ liệu Form, chuẩn hóa và kiểmtra dữ liệu Form

 Làm việc với Cơ sở dữ liệu (MySQL): tạo kết nối, đóng kết

nối, thêm dữ liệu, cập nhật dữ liệu, tìm kiếm dữ liệu, xóa dữliệu,…

Bài tập

 Tạo cơ sở dữ liệu QL_SACH (quản lý sách) trên máy

chủ cơ sở dữ liệu MySQL (với tên đăng nhập là root

mật khẩu là 123456) đặt tại máy có tên máy là MAY5 như sau:

 Hãy tạo 1 trang web như hình dưới đây, trong đó:

 Form nhập gồm các ô TextBox: Mã sách, Tên sách, Tác giả,

Nhà xuất bản, Thể loại, Giá Ô Select Thể loại có nguồn là

phần tử của Form Sử dụng thêm Javascript kiểm tra

tính hợp lệ của các dữ liệu trên các thẻ của From.

Các dạng câu hỏi phần bài tập

1. Tạo form (textbox, listbox, combo box, checkbox, radio, text

• Đọc dữ liệu từ bảng Loai sách (select * from LoaiSach)

• Tạo vòng lặp, tách lấy dữ liệu ở thuộc tính loại sách

• Gán cho thuộc tính value của các options

Các dạng câu hỏi phần bài tập

 Đọc dữ liệu từ bảng trong csdl bằng truy vấn (select … from …)

 Tạo vòng lặp, tách lấy dữ liệu các thuộc tính cần thiết

 Gán cho nội dung của các ô trong bảng

Các dạng câu hỏi phần bài tập

3 Thêm mới dữ liệu

— Nhận dữ liệu từ form ($_POST hoặc $_GET, giá trị của name mỗi pt)

— Chèn dữ liệu nhận được từ form vào bảng trong csdl (INSERT INTO)

— Nếu chèn thành công thì thông báo kết quả (echo “chèn thành công”)

— Nếu chèn thành công thì bản ghi mới được thêm vào dòng cuối của bảng trên giao diện và các ô trong form được để trống

• Dùng 1 tệp (kiểm tra xem dữ liệu được submit lên server thì chèn)

• Dùng 2 tệp: tệp 1 hiển thị form, bảng-> tệp 2 chèn dữ liệu->tải lại tệp 1 với dữ liệu mới

(require tentep.php)

Các dạng câu hỏi trong phần bài tập

4 Xem chi tiết thông tin sản phẩm/mặt hàng/cuốn sách/sinh viên

 Tạo bảng như mục 1b

 Tạo một liên kết trên mỗi hàng của bảng có nhãn “detail”

 Khi người dùng bấm vào “detail” thì hiển thị thông tin chi tiết

— Tạo liên kết “detail” trên mỗi hàng

(<a href=“chitiet.php”?id=TH0001>detail</a> )

— Tệp “chitiet.php”:

 Đọc dữ liệu từ CSDL (SELECT * From SACH WHERE Masach=id)

 Hiển thị dữ liệu chi tiết trên giao diện

1: thêm dữ liệu (chèn bản ghi mới vào CSDL

2: xem chi tiết (đọc dữ liệu)

3 Sửa dữ liệu

4 Xóa dữ liệu

5 Tìm kiếm dữ liệu

Dạng bài 8

Yêu cầu: tạo trang web thực hiện chức năng đặt bàn cho website của nhà hàng

1 Tạo Form có các ô nhập dữ liệu: họ tên khách hàng, số điện thoại, số lượng

người, khung giờ, ngày đặt bàn, ngày đến ăn, bấm submit, nút bấm reset.

2 Nhận dữ liệu từ form

3 Lưu dữ liệu form vào CSDL dữ liệu

4 Hiển thị thông báo cho người dùng biết kết quả (bảng thông tin đặt bàn)

Viết mã nguồn theo 2 cách:

— Chỉ viết 1 tệp mã nguồn chứa form và mã nguồn xử lý dữ liệu

— Viết 2 tệp riêng: tệp chứa form tách riêng với tệp xử lý dữ liệu

thành công hay không