Giáo án Lập trình Web - Nguyễn Huy Thưởng
CỤC HÀNG HẢI VIỆT NAM
TRƯỜNG CAO ĐẲNG HÀNG HẢI
SỔ GIÁO ÁN
LÝ THUYẾT
Môn học: LẬP TRÌNH WEB
Lớp: 41 CTH
Giáo viên: Nguyễn Huy Thưởng
Năm 2015
1
GIÁO ÁN SỐ 1
Thời gian thực hiện: phút
Chương 1: Tổng quan về thiết kế web
Thực hiện ngày .... tháng ..... năm 2015
Lớp:
TÊN BÀI: TỔNG QUAN VỀ THIẾT KẾ WEB
Mục tiêu của bài
Sau khi học xong bài này người học có khả năng:
- Hiểu được các dạng bài tập ứng dụng cơ bản trong hàng hải.
- Sử dụng các công cụ tin học để giải quyết một bài toán hàng hải trên máy tính.
- Ý thức được tầm quan trọng của các thiết bị, các biện pháp an toàn cho thiết bị trong
quá trình sử dụng.
Đồ dùng và phương tiện dạy học:
- Đề cương, giáo án, giáo trình;
- Máy tính, máy chiếu;
- Trực quan.
I. ỔN ĐỊNH LỚP HỌC
Số học sinh vắng: .................
Thời gian: 2 phút
Tên: ......................................................................................................................................
..............................................................................................................................................
II. THỰC HIỆN BÀI HỌC
Thời gian: 43 phút
HOẠT ĐỘNG
DẠY HỌC
THỜI
GIAN
TT
NỘI DUNG
HĐ
HĐ
CỦA GV
CỦA SV
Thuyết
Nghe
1 phút
1
Dẫn nhập
giảng
trình
42 phút
5 phút
2
Giảng bài mới
-Thuyết
trình
- Nghe
giảng.
Ghi
tóm tắt.
- Quan
sát trực
quan.
- Trả lời
câu hỏi
1.1 Một số khái niệm, thuật ngữ về web
1.1.1 Các thành phần của web
Địa chỉ IP: Các máy tính trong mạng Internet/ Giảng
Intranet trao đổi thông tin với nhau theo chuẩn truyền giải
thông gọi là giao thức TCP/IP. Đây là giao thức cung - Phát
cấp dịch vụ truyền các gói dữ liệu (IP datagrams) theo vấn:
địa chỉ IP bằng cách chọn đường (routing) trong mạng Hãy nêu
thông qua cổng kết nối (gateway). Để việc trao đổi thông các bài
tin trong mạng Internet thực hiện được, mỗi máy tính toán
trong mạng cần phải được cấp một định danh (Identify) chuyên
để phân biệt các máy với nhau, mỗi máy được gán cho ngành đó
một nhóm số gọi là địa chỉ IP (IP Address) hay nói cách học
khác địa chỉ IP dùng xác định đối tượng nhận và gửi
thông tin trên Internet. Địa chỉ IP gồm 4 nhóm số thập
phân có giá trị từ 0 đến 255, phân các nhau bằng dấu
chấm (.)
Tên miền (Domain name): Do địa chỉ IP là một dãy
số, không có tính gợi nhớ, trong mạng Internet người ta
1
thường sử dụng dịch vụ tên miền (Domain Name
Service) cho các máy trong mạng.
Mỗi tên miền có dạng: Host.Subdomain.Domain
Trong đó : Host là tên máy, Domain là tên của một
tổ chức mạng lớn, như các Cty đa quốc gia, các quốc gia,
Subdomain là tên một tổ chức nhỏ hơn trong domain.
1.1.2 Webpage, website
10
Web page: trang web, trên world wide web thông tin
được hiển thị dưới dạng trang web, một web page có thể
chứa văn bản đã được định dạng, hình ảnh, âm thanh,
video v.v.
Một trang web còn chứa các
siêu liên kết
(hyperlink), siêu liên kết cho phép người sử dụng truy
cập đến một trang web khác hay một tài nguyên khác
trong cùng website hay trên các website khác.
Website: Một vị trí trên world wide web, được đặc
trưng bởi một tên miền, mỗi wesite có một trang chủ
(home page) là trang web đầu tiên mà người sử dụng gặp
đầu tiên khi truy cập vào website, trang chủ đóng vai trò
như là mục lục chỉ đến các tư liệu khác trong website hay
địa chỉ của các website liên quan. Một website còn chứa
các thư mục, các tệp tin, các trang web khác. Website của
các tổ chức hay cá nhân trên mạng bao gồm tập hợp các
trang web liên quan đến tổ chức này.
8
1.1.3 URL – Uniform Resource Location
URL, viết tắt của Uniform Resource Locator, được
mang lại khả năng siêu liên kết cho các trang mạng. Các
tài nguyên khác nhau được tham chiếu tới bằng địa chỉ,
chính là URL.
Trong trường hợp URL kết thúc với dấu gạch xéo tới
(slash, /) mà không có tên tệp tin nằm sau, sẽ chỉ đến tệp
tin mặc định trong thư mục cuối cùng (trong ví dụ này là
web). Một số tệp tin mặc định là index.htm hay
default.htm.
- URL tuyệt đối: bao gồm toàn bộ đường dẫn đến tệp
tin, URL tuyệt đối thường dùng để liên kết đến một tài
nguyên ngoài web site.
-URL tương đối: mô tả ngắn gọn địa chỉ của tệp tin
kết nối trong cùng web site chứa tệp tin hiện hành (tệp
chứa liên kết).
Các scheme khác như: ftp để truyền tệp tin trên mạng,
gopher dùng để tìm thông tin, news để gửi và nhận tin
trong nhóm, mailto để gửi email, file để dẫn đến một tệp
tin trong đĩa cứng cục bộ. Ví dụ:
news:sos.culture.catalan
mailto:[email protected]n
file:///d:/thuchanh/web/chuong1.htm
7
1.1.4 Web Server – Web Browser
Web Server (máy phục vụ Web): máy tính mà trên đó
cài đặt phần mềm phục vụ Web, đôi khi người ta cũng
gọi chính phần mềm đó là Web Server. Tất cả các Web
2
Server đều hiểu và chạy được các file *.htm và *.html,
tuy nhiên mỗi Web Server lại phục vụ một số kiểu file
chuyên biệt chẳng hạn như IIS của Microsoft dành cho
*.asp, *.aspx...; Apache dành cho *.php...; Sun Java
System Web Server của SUN dành cho *p...
Máy Web Server là máy chủ có dung lượng lớn, tốc độ
cao, được dùng để lưu trữ thông tin như một ngân hàng
dữ liệu, chứa những website đã được thiết kế cùng với
những thông tin liên quan khác. (các mã Script, các
chương trình, và các file Multimedia).
Web Server có khả năng gửi đến máy khách những
trang Web thông qua môi trường Internet (hoặc Intranet)
qua giao thức HTTP - giao thức được thiết kế để gửi các
file đến trình duyệt Web (Web Browser), và các giao
thức khác.
Tất cả các Web Server đều có một địa chỉ IP (IP
Address) hoặc cũng có thể có một Domain Name. Giả sử
khi bạn đánh vào thanh Address trên trình duyệt của bạn
sẽ gửi một yêu cầu đến một Server có Domain Name là
index.htm rồi gửi nó đến trình duyệt của bạn.
Bất kỳ một máy tính nào cũng có thể trở thành một Web
Server bởi việc cài đặt lên nó một chương trình phần
mềm Server Software và sau đó kết nối vào Internet.
Khi máy tính của bạn kết nối đến một Web Server và gửi
đến yêu cầu truy cập các thông tin từ một trang Web nào
đó, Web Server Software sẽ nhận yêu cầu và gửi lại cho
bạn những thông tin mà bạn mong muốn.
Giống như những phần mềm khác mà bạn đã từng cài đặt
trên máy tính của mình, Web Server Software cũng chỉ là
một ứng dụng phần mềm. Nó được cài đặt, và chạy trên
máy tính dùng làm Web Server, nhờ có chương trình này
mà người sử dụng có thể truy cập đến các thông tin của
trang Web từ một máy tính khác ở trên mạng (Internet,
Intranet).
Web Server Software còn có thể được tích hợp với
CSDL (Database), hay điều khiển việc kết nối vào CSDL
để có thể truy cập và kết xuất thông tin từ CSDL lên các
trang Web và truyền tải chúng đến người dùng.
Server phải hoạt động liên tục 24/24 giờ, 7 ngày một tuần
và 365 ngày một năm, để phục vụ cho việc cung cấp
thông tin trực tuyến. Vị trí đặt server đóng vai trò quan
trọng trong chất lượng và tốc độ lưu chuyển thông tin từ
server và máy tính truy cập.
8
1.1.5 Một số khái niệm, thuật ngữ khác
Định dạng file của một trang web thường
là HTML (ngôn ngữ đánh dấu siêu văn bản) và được
xác định bởi giao thức HTTP sử dụng kiểu nội
dung MIME. Phần lớn các trình duyệt hỗ trợ nhiều
định dạng file khác bên cạnh HTML, như là các định
dạng ảnh JPEG, PNG, GIF... và có thể mở rộng để hỗ
trợ nhiều hơn nhờ sử dụng các plug-in. Sự kết hợp
3
của kiểu nội dung HTTP và đặc tả giao thức URL cho
phép các nhà thiết kế trang web có thể đưa ảnh, hoạt
hình, video, âm thanh và đa phương tiện được
streaming vào trang web, hoặc có thể truy cập chúng
thông qua trang web.
6
1.2 Khái niệm web tĩnh, web động
Web tĩnh là những website không có hệ thống quản lý
sửa được hoặc có thể chỉnh sửa, thay đổi dữ liệu được.
Hiện nay web tĩnh hầu như ít tồn tại hoặc chỉ tồn tại
với những công ty chuyên về thiết kế website, họ sử
dụng web tĩnh bởi họ có kiến thức và dễ dàng chỉnh
sửa nội dung khi cần.
Web động sử dụng các công nghệ như HTML, CSS,
HTML5, CSS3, JAVASCRIPT, ... và điều đặc biệt là
có sử dụng một ngôn ngữ lập trình server như PHP,
một hệ quản trị cơ sở dữ liệu như MySQL, vì vậy web
động phải chạy trong máy chủ. Nếu đặt trên máy tính
của bạn thì bạn phải cài các Web server ảo như
vertrigo, Xampp, wampp, ...
Web tĩnh
20
1.2.1
Web tĩnh là những website không có hệ thống
quản lý nội dung và người dùng không thể chỉnh sửa
được hoặc có thể chỉnh sửa, thay đổi dữ liệu được.
Hiện nay web tĩnh hầu như ít tồn tại hoặc chỉ tồn tại
với những công ty chuyên về thiết kế website, họ sử
dụng web tĩnh bởi họ có kiến thức và dễ dàng chỉnh
sửa nội dung khi cần.
Hình 1.2: Mô hình hoạt động của web tĩnh
Web tĩnh được làm từ gì?
Về kiến thức cơ bản thì web tĩnh thường được
xây dựng từ CSS, HTML, JAVASCRIPT (DHTML),
hiện nay có thêm công nghệ HTML5 & CSS3. Có
thể bạn nhìn một web nào đó nhìn rất lung linh, đẹp
và nội dung có thể thay đổi nhưng chưa chắc nó là
web động bởi vì người ta có thể sử dụng DHTML để
thay đổi nội dung (tại client).
Nếu bạn chạy trên máy tính của bạn thì với
web tĩnh bạn có thể đặt tại đâu cũng chạy được vì
bản chất nó chỉ là một file bình thường.
Ưu điểm của web tĩnh:
Về giao diện Designer có thẻ thiết kế
theo kiểu mới lạ
Tốc độ truy cập nhanh bởi nó chỉ là
những file HTML
Chi phí đầu tư thấp bởi bạn không
phải trả tiền nhiều cho Coder
4
Thân thiện với bộ máy tìm kiếm bởi
bạn có thể đặt tên file tùy ý (ten-
file.html, tieu-de-tin-tuc.html)
Nhược điểm của web tĩnh:
Khó quản lý nội dung
Khó nâng cấp bảo trì
Chỉnh sửa phải vào từng file HTML,
CSS hoặc JAVASCRIPT.
Khi nào nên sử dụng web tĩnh?
Nếu bạn là doanh nghiệp muốn tự
mình làm website thì bạn có thể học
các kiến thức căn bản và tự làm một
Web tĩnh cho mình
Nội dung website ít cập nhật và ít nên
bạn muốn tiết kiệm chi phí
Website bạn nhỏ và bạn thuê luôn
người chuyên về web để quản trị.
Web động
26
1.2.2
Ngược lại với web tĩnh, web động là những
website có hệ thống quản lý nội dung và người dùng
có thể chỉnh sửa nội dung được. Ví dụ như trang
vnexpress.net hay 24h.com.vn thì đó là những web
động bởi vì họ có thể đăng tin mới, chỉnh sửa tin mới
và chỉnh sửa danh mục menu, ...
Hình 1.3: Mô hình hoạt động của web động
Web động được làm từ gì?
Web động sử dụng các công nghệ như
HTML, CSS, HTML5, CSS3, JAVASCRIPT, ... và
điều đặc biệt là có sử dụng một ngôn ngữ lập trình
server như PHP, một hệ quản trị cơ sở dữ liệu như
MySQL, vì vậy web động phải chạy trong máy chủ.
Nếu đặt trên máy tính của bạn thì bạn phải cài các
Web server ảo như Vertrigo, Xampp, Wampp, ...
Ưu điểm của web động:
Dễ dàng quản lý nội dung
Dễ dàng nâng cấp và bảo trì
Có thể xây dụng được web lớn
Thường sử dụng tương tác với người
dùng cao
Nhược điểm của web động:
Chi phí xây dựng cao
Nếu web lớn có thể cần thêm nhân sự
chuyên ngành
Khi nào nên sử dụng web động?
Bạn làm website thương mại điện tử
bán hàng
5
Bạn làm web giới thiệu sản phảm công
ty
Bạn làm web tin tức, blog cá nhân
Website có quy mô lớn
42
1.3 Mô hình hoạt động của một website
Mô hình MVC (Model-View-Controller) là một kiến
trúc phần mềm, đây là mô hình tổ chức code một
cách hợp lý và có hệ thống. Mô hình MVC tách biệt
phần xử lý dữ liệu ra khỏi phần giao diện, cho phép
phát triển, kiểm tra và làm việc theo dự án.
Theo đó:
- Model: thể hiện các cấu trúc dữ liệu. Các
lớp thuộc thành phần Model thường thực hiện các tác
vụ như truy vấn, thêm, xoá, cập nhật dữ liệu. Khi dữ
liệu trong Model thay đổi, thành phần View sẽ được
cập nhật lại. Nói đơn giản hơn, Model là lớp thao tác
với database là chính.
- View: là thành phần thể hiện dữ liệu trong
Model thành các giao diện tương tác với người sử
dụng. Một mô hình có thể có nhiều View phụ thuộc
vào các mục đích khác nhau. Nói đơn giản hơn, View
là lớp hiển thị dữ liệu ra bên ngoài cho người dùng
xem.
- Controller đóng vai trò trung gian giữa
Model và View. Thông tin người dùng từ View được
gửi cho Controller xử lý, sau đó Controller tương tác
với Model để lấy dữ liệu được yêu cầu, sau cùng
Controller trả dữ liệu này về cho View. Nói đơn giản
hơn, Controller là lớp điều khiển, có chức năng điều
khiển các hành vi, yêu cầu.
Mô hình MVC thường được sử dụng trong
các ứng dụng web, vì thành phần View (mã
HTML/XHTML) được sinh ra từ các ngôn ngữ thiết
kế website. Thành phần Controller sẽ nhận các dữ
liệu GET/POST, xử lý những dữ liệu này, sau đó
chuyển sang Model xử lý.
Model sẽ trả dữ liệu về phía Controller, sau
6
đó Controller sinh mã HTML/XHTML để thể hiện
trên View.
Cách làm việc của mô hình MVC:
o Khi user tương tác với View bằng cách click
vào button, user gửi yêu cầu đi.
o Controller nhận và điều hướng chúng đến
phương thức xử lý ở Modem.
o Cotroller nhận thông tin và thực thi yêu cầu
o Khi Model hoàn tất việc xử lý, View sẽ nhận
kết quả và hiển thị lại cho người dùng.
Theo mô hình trên, trình duyệt web thực hiện một kết
nối tới máy chủ web, yêu cầu một trang web và nhận
lại nó. Sau đây, là thứ tự từng bước cơ bản xảy đến
đằng sau màn hình của bạn:
Trình duyệt web tách địa chỉ website làm 3 phần:
Phần giao thức: (“http”)
Tên tệp: (“web-server.htm”)
Trình duyệt liên hệ với máy chủ tên miền để chuyển
(Internet Protcol).
Sau đó, trình duyệt sẽ gửi tiếp một kết nối tới máy chủ
có địa chỉ IP tương ứng qua cổng 80.
Dựa trên giao thức HTTP, trình duyệt gửi yêu cầu GET
đến
máy
chủ,
yêu
cầu
tệp
"http://computer.howstuffworks.com/web-server.htm.".
(Bạn chú ý, cookies cũng sẽ được gửi kèm theo từ trình
duyệt web đến máy chủ)
Tiếp đến, máy chủ sẽ gửi đoạn text dạng HTML đến
trình duyệt web của bạn. (cookies cũng được gửi kèm
theo từ máy chủ tới trình duyệt web, cookies được ghi
trên đầu trang của mỗi trang web)
Trình duyệt web đọc các thẻ HTML, định dạng trang
web và kết xuất ra màn hình của bạn.
42 phút
1.4 Một số mô hình website điển hình
7
Cửa hàng, siêu thị điện tử
-Thuyết
Với mô hình siêu thị điện tử, website gồm các phần trình.
chính sau: Giảng
- Thông tin hàng hóa: là cơ sở dữ liệu phân loại giải
- TT nghe
giảng.
1.4.1
- Quan
sát TQ.
nhiều nhóm sản phẩm, sản phẩm mới, sản phẩm đang
khuyến mãi v.v... Thông tin về từng sản phẩm gồm: hình,
giá, giới thiệu ngắn, mô tả thông số, loại sản phẩm...
- Thông tin giới thiệu, hướng dẫn: gồm những thông
tin như: giới thiệu chủ sở hữu website, chính sách mua
bán, giao hàng, trả lại hàng, hướng dẫn cách tìm kiếm
hàng hóa v.v...
- Công cụ mua hàng, thanh toán: nhất thiết phải có
công cụ giỏ mua hàng (shopping cart), chức năng thanh
toán (qua mạng, qua bưu điện, chuyển tiền, qua ATM,
thanh toán khi giao hàng...). Nên có thông tin hướng dẫn
các cách thức thanh toán khác nhau để người mua hiểu rõ
và chọn lựa.
- Chức năng thành viên dành cho người đã mua
hàng để tiết kiệm thời gian nhập thông tin khi họ mua
hàng những lần sau và để cung cấp thông tin lịch sử mua
hàng, giới thiệu hàng hóa mới, hàng hóa khách hàng
quan tâm... cho khách hàng.
- Một số chức năng tự chọn khác như chức năng tìm
kiếm sản phẩm trong siêu thị, chức năng nhận bản tin
định kỳ...
Nổi tiếng nhất
ở
dạng này là website
www.amazon.com bán lẻ sách báo, CD, ứng dụng phần
mềm, đồ chơi qua internet. Mô hình này hoạt động tương
tự một siêu thị hay cửa hàng truyền thống, cho phép
người mua chọn lựa hàng hóa, thay đổi số lượng món
hàng, tính tiền thanh toán và nhận hàng.
Đấu giá trực tuyến
-Thuyết
- TT nghe
giảng.
1.4.2
Với mô hình đấu giá trực tuyến, website gồm trình.
các phần chính sau: Giảng
o Thông tin hàng hóa: là cơ sở dữ liệu phân loại giải
- Quan
sát TQ.
8
nhiều nhóm sản phẩm. Thông tin về từng sản
phẩm gồm: hình, giá, giới thiệu ngắn, nhóm
sản phẩm, giá sàn, thời gian kết thúc đấu giá,
giá hiện tại, điều khoản khác liên quan đến
việc bán món hàng...
o Thông tin giới thiệu, hướng dẫn: gồm những
thông tin như: giới thiệu chủ sở hữu website,
chính sách mua-bán, quy định tham gia đấu
giá, quy định giao hàng, trả lại hàng, hướng
dẫn cách tìm kiếm hàng hóa v.v...
o Công cụ rao bán, công cụ chọn mua, công cụ
hỗ trợ thanh toán, công cụ tìm kiếm hàng
hóa...
o Thành viên: để lưu thông tin thành viên tham
gia mua, bán, đấu giá, phục vụ các mục tiêu:
Xác nhận tư cách tham gia, Lưu thông tin lịch
sử tham gia mua, bán, đấu giá, Phục vụ việc
quản lý mối quan hệ khách hàng giữa thành
viên và website...
Minh họa website đấu giá trực tuyến nổi tiếng
dụng, tức là người bán đưa ra giá sàn (giá thấp nhất
ban đầu), sau đó người mua lần lượt trả cao hơn. Đến
thời điểm nhất định ai trả cao hơn sẽ là người có
quyền mua món hàng.
Sàn giao dịch B2B, B2C
-Thuyết
- TT nghe
giảng.
1.4.3
Với mô hình sàn giao dịch B2B, website gồm trình.
các phần chính sau: Giảng
o Thông tin hàng hóa: là cơ sở dữ liệu phân loại giải
- Quan
sát TQ.
nhiều nhóm sản phẩm. Thông tin về từng sản
phẩm gồm: hình, giá, giới thiệu ngắn, nhóm
sản phẩm, nhà sản xuất...
o Danh mục thông tin về doanh nghiệp: phân
loại theo ngành nghề, theo quốc gia, địa
phương, theo nhu cầu mua – bán – tìm đối
9
tác...
o Thông tin chào hàng (chào mua, chào bán):
như rao vặt, phục vụ nhu cầu tìm kiếm đối tác
của các doanh nghiệp.
o Thông tin giới thiệu, hướng dẫn: gồm những
thông tin như: giới thiệu chủ sở hữu website,
chính sách mua-bán, quy định tham gia giới
thiệu trên website, hướng dẫn cách sử dụng
website v.v...
o Những công cụ hỗ trợ như: đăng tải thông tin,
tìm kiếm thông tin, hỏi thông tin, nhận bản tin
định kỳ...
o Thành viên: lưu thông tin thành viên tham gia
phục vụ các mục tiêu: xác nhận tư cách tham
gia; lưu thông tin lịch sử tham
gia tạo sự tiện lợi cho thành viên khi cần truy
xuất lịch sử tham gia; và phục vụ việc quản lý
mối quan hệ khách hàng giữa thành viên và
website.
điển hình, nơi các doanh nghiệp tham gia giới thiệu
về mình, đăng tải yêu cầu mua, bán, tìm đối tác. Sàn
giao dịch này không phục vụ bán lẻ và thanh toán
qua mạng vì không cần thiết.
Cổng thông tin portal
-Thuyết
- TT nghe
giảng.
1.4.4
Với mô hình cổng thông tin, website gồm các trình.
phần chính sau: Giảng
o Phân loại thông tin: là cơ sở dữ liệu phân loại giải
- Quan
sát TQ.
nhiều nhóm thông tin. Thông tin về từng
“thông tin” gồm: địa chỉ website, giới thiệu
ngắn về website, tựa đề dành cho website.
o Chức năng tìm kiếm thông tin.
o Chức năng gửi email cho bạn bè để giới thiệu
trang web đang xem.
o Chức năng đề nghị một website mới tạo điều
10
kiện cho người xem đóng góp nguồn website
mới, góp phần làm phong phú thêm cơ sở dữ
liệu website hiện có.
Cổng thông tin điển hình là Yahoo! tại địa chỉ
công ty theo ngành nghề.
Website thông tin phục vụ việc quảng bá
-Thuyết
- TT nghe
giảng.
1.4.5
Với website thông tin, phần chính là cơ sở dữ trình.
liệu các thông tin, được phân chia theo từng thể loại. Giảng
Phần phụ là những thông tin quảng cáo (banner - cột giải
dọc bên phải trang web) và thông tin liên hệ với chủ
sở hữu website khi có nhu cầu quảng cáo.
- Quan
sát TQ.
Ví
trang www.vnexpress.net
Website giới thiệu thông tin doanh nghiệp
dụ
cho
trường
hợp
này
là
-Thuyết
- TT nghe
giảng.
1.4.6
Website giới thiệu thông tin doanh nghiệp có các trình.
phần chính như: trang chủ, giới thiệu doanh nghiệp, Giảng
- Quan
giới thiệu sản phẩm, dịch vụ, trang liên hệ.
1.5 Những bước cần thiết trong việc lập website
Yêu cầu cần để một website hoạt động
giải
sát TQ.
42 phút
12
-Thuyết
- TT nghe
giảng.
1.5.1
Để một website hoạt động được trên mạng cần phải trình.
có 3 yếu tố cơ bản:
Giảng
giải
- Quan
o Tên miền (hay còn gọi là domain).
o Nơi lưu trữ website (hosting).
o Nội dung các trang web hoặc cơ sở dữ liệu
thông tin.
sát TQ.
Các bước thiết lập website
-Thuyết
- TT nghe
giảng.
30
1.5.2
Để xây dựng website cho mình, cần theo các bước trình.
sau: Giảng
o Xác định mục đích của website, đối tượng giải
- Quan
sát TQ.
người xem.
o Xác định sơ bộ cách thức hoạt động của
website, các chức năng chính và các phần nội
dung cần có.
o Tham khảo một số website tương tự để lấy ý
11
tưởng, học hỏi, so sánh điểm mạnh, điểm yếu
của chúng.
o Mua tên miền (domain): cần mua tên miền
sớm để đảm bảo tên miền không bị người
khác mua mất trong tương lai.
o Tìm một công ty dịch vụ để được tư vấn thêm
chi tiết và nhờ họ thiết kế xây dựng website
sao cho có hiệu quả cao nhất.
o Chuẩn bị thông tin, hình ảnh... để đăng tải
trên các trang web.
o Giải pháp duy trì website (hosting).
Sau khi website được xây dựng xong và đưa vào
hoạt động, doanh nghiệp cần phải marketing, cập
nhật thông tin, thêm thông tin, thay đổi nhỏ... để
tránh nhàm chán và thu hút người xem.
Các bước xây dựng website:
o Xác định tên miền và mua tên miền
o Xác định sitemap: như mục lục một quyển
sách, gồm các phần 1., 1.1., 1.1.1.,
Ví dụ 1.1:
Trang chủ
Giới thiệu Công ty
Sản phẩm
Dòng sản phẩm 1
Dòng sản phẩm 2
...
Dịch vụ
Chính sách bán hàng
Liên hệ
Xác định cấu trúc kỹ thuật của từng phần trong
sitemap, ví dụ trang giới thiệu thông tin là trang
web tĩnh (static page), trang giới thiệu sản
phẩm là cơ sở dữ liệu (database), trang chủ bố trí
như thế nào, các hiệu ứng hình ảnh trên trang chủ...
Chọn các kỹ thuật, ngôn ngữ để xây dựng website.
12
o Thiết kế đồ họa
o Lập trình những phần cần lập trình
o Nhập liệu vào cơ sở dữ liệu, làm các trang
web tĩnh
o Chọn host (lưu trữ) cho website. Host phải hỗ
trợ các ngôn ngữ dùng để xây dựng website.
o Tải toàn bộ nội dung website lên host
o Kiểm tra toàn bộ website trước khi chính thức
đưa vào hoạt động.
Những lưu ý khi chuẩn bị xây dựng website
o Website không nên có quá nhiều hình ảnh
động, hiệu ứng hình ảnh, nội dung quá
nhiều trên một trang vì sẽ làm người xem bị
rối và trang web sẽ nặng, hiển thị chậm làm
người xem mất kiên nhẫn.
o Website không nên có quá nhiều nội dung
trên một trang vì sẽ làm người xem lúng túng
không biết phả làm thế nào để tìm được
thông tin họ cần.
o Website phải được thiết kế đồng nhất về thẩm
mỹ, dùng thống nhất vài gam màu nhất định,
font chữ, cỡ chữ thống nhất trên các trang.
o Tên miền không nên quá dài hay có ký tự
gạch nối (-). Tên miền nên gợi nhớ được mục
đích của website.
o Website nên có công cụ cập nhật thông tin
sao cho người không hiểu biết về thiết kế lập
trình web cũng có thể dễ dàng nhập liệu cho
website.
o Chất lượng host phải tốt để hạn chế khả năng
website bị “chết” (ngưng hoạt động) hoặc bị
hacker đánh phá.
42 phút
14
1.6 Các thành phần cơ bản của website
Một website thông thường có thể hiển thị 02 ngôn -Thuyết
ngữ. Các đặc tả kỹ thuật, cho phép bạn đếm được trình.
- TT nghe
1.6.1
giảng.
13
lượt truy cập, biết được khách hàng đã ghé thăm từ Giảng
- Quan
sát TQ.
những nước nào trên thế giới,..
giải
Trang chủ (cho phép chọn 1 trong 2 ngôn ngữ)
Trang web đầu tiên người xem truy cập từ tên
miền thường được gọi là trang chủ (homepage),
người xem có thể xem các trang khác thông qua
các siêu liên kết (hyperlinks).
- Thể hiện theo từng danh mục tin tức, mỗi
danh mục có ba tin tức hiển thị nhanh.
- Người duyệt web có thể xem toàn bộ tin tức
theo từng mục hoặc có thể xem chi tiết từng bản tin.
- Mỗi bản tin bao gồm 01 tiêu đề tin, 01 ảnh
minh họa, 01 nội dung chính, 01 nội dung chi tiết.
- Bên trái website bao gồm: Danh sách danh
mục các bản tin, 01 khung cho phép thành viên đăng
nhập, 01 khung cho phép cập nhật tỷ giá ngoại tệ, 01
khung cho phép hiển thị dự báo thời tiết, 01 khung
cho phép hiển thị giá vàng, 01 khung cho phép
quảng cáo, quảng bá các địa chỉ website…
- Bên phải website bao gồm: 01 khung cho
phép tìm kiếm thông tin trong website, 01 khung cho
phép thăm dò ý kiến, 01 khung quảng cáo.
- Có thể cho phép thêm nhiều danh mục tin
tức khác nhau.
-Thuyết
- TT nghe
giảng.
14
1.6.2 Trang sản phẩm
- Thừa kế theo trang chủ: menu trái là danh trình.
mục các loại sản phẩm và menu phải như trang chủ. Giảng
- Có thể cho phép thêm nhiều danh mục sản giải
phẩm khác nhau.
- Quan
sát TQ.
- Được thể hiện theo từng danh mục sản
phẩm, mỗi danh mục có ba sản phẩm hiển thị để xem
nhanh tương tự trang tin tức.
- Mỗi sản phẩm bao gồm 01 tiêu dề sản phẩm,
01 ảnh minh hoạ, 01 nội dung chính, 01 nội dung chi
tiết về sản phẩm đó và không giới hạn số lượng ảnh
14
minh hoạ cho sản phẩm đó.
- Bên dưới trang xem chi tiết sản phẩm là
danh sách các sản phẩm khác cùng danh mục.
- Mỗi danh mục cho phép xem toàn bộ các
sản phẩm theo danh mục đó.
- Người duyệt web có thể xem chi tiết theo
từng sản phẩm.
-Thuyết
- TT nghe
giảng.
14
1.6.3 Trang thành phần
Trang giới thiệu
trình.
- Hiển thị các danh mục giới thiệu: sứ mạng, Giảng
- Quan
sơ đồ tổ chức, chính sách.
- Cho phép hiển thị các thông tin giới thiệu
của công ty.
giải
sát TQ.
Trang hỗ trợ và dịch vụ
- Cho phép cập nhật các danh mục đại lý,
khách hàng của công ty.
- Các chính sách bảo hành sản phẩm.
- Chương trình đào tạo, tuyển dụng.
Trang liên hệ
- Cho phép hiển thị thông tin liên hệ của
Công ty.
- Một khung cho phép khách hàng gửi thông
tin yêu cầu.
1.7 Định hướng cho môn học
-Thuyết
- TT nghe 42 phút
giảng.
Ngôn ngữ thiết kế web: trong giai đoạn khởi đầu của trình.
website, có rất nhiều ngôn ngữ lập trình được sử dụng Giảng
- Quan
khác. Nhưng hiện tại có 2 ngôn ngữ được dùng phổ biến
giải
sát TQ.
15
chủ vật lí.
Hiện tại, web động được thiết kế trên nền mã nguồn
mở đang rất được ưa chuộng và thịnh hành. Mã nguồn
mở đang trở thành một xu hướng mới, một người không
Nghe, rà 2 phút
soát các
kiến thức
đã học.
3
4
Củng cố kiến thức và kết thúc bài
Nhắc lại nội dung của bài học.
2 phút
Hướng dẫn tự học
Tài liệu tham khảo:
[1] Phạm Hữu Khang, Lập trình web bằng php 5.3 và CSDL MySQL 5.1, NXB
Phương Đông, 2010.
[2] Nguyễn Văn Lân, Kỹ thuật xây dựng ứng dụng ASP.net tập 1,2,3 (kèm CD),
NXB LĐXH.
[3] Lê Minh Hoàng, Tự học thiết kế Web – tập 1,2 (kèm CD), NXB LĐXH.
[4] Nguyễn Ngọc Quyên, Xây dựng báo biểu bằng SQL report service 2008, NXB
LĐXH
PHÓ TỔ TRƯỞNG
Nguyễn Quang Huy
GIÁO VIÊN
Nguyễn Huy Thưởng
16
GIÁO ÁN SỐ 2
Thời gian thực hiện: phút
Chương 2: Tổng quan về ngôn ngữ HTML
Thực hiện ngày .... tháng ..... năm 2015
Lớp:
TÊN BÀI: TỔNG QUAN VỀ NGÔN NGỮ HTML
Mục tiêu của bài
Sau khi học xong bài này người học có khả năng:
- Hiểu được các dạng bài tập ứng dụng cơ bản trong hàng hải.
- Sử dụng các công cụ tin học để giải quyết một bài toán hàng hải trên máy tính.
- Ý thức được tầm quan trọng của các thiết bị, các biện pháp an toàn cho thiết bị trong
quá trình sử dụng.
Đồ dùng và phương tiện dạy học:
- Đề cương, giáo án, giáo trình;
- Máy tính, máy chiếu;
- Trực quan.
I. ỔN ĐỊNH LỚP HỌC
Số học sinh vắng: .................
Thời gian: 2 phút
Tên: ......................................................................................................................................
..............................................................................................................................................
II. THỰC HIỆN BÀI HỌC
Thời gian: 43 phút
HOẠT ĐỘNG
DẠY HỌC
THỜI
GIAN
TT
NỘI DUNG
HĐ
HĐ
CỦA GV
CỦA SV
Thuyết
Nghe
1 phút
1
Dẫn nhập
giảng
trình
42 phút
20 phút
2
Giảng bài mới
-Thuyết
- Nghe
2.1
Giới thiệu
trình
giảng.
Ghi
2.1.1 Giới thiệu ngôn ngữ HTML
HTML được viết tắt của HyperText Mark-up Giảng
giải
- Phát
vấn:
Hãy nêu
các bài
tóm tắt.
- Quan
sát trực
quan.
- Trả lời
câu hỏi
Language (ngôn ngữ đánh dấu siêu văn bản). Có thể
định nghĩa HTML:
Là một tập hợp các quy tắc và các thẻ (tag) được sử
dụng để quy định cách thức trình bày, hiển thị nội dung toán
chuyên
của các trang web, tập hợp các quy tắc và thẻ này phải
ngành đó
tuân theo chuẩn quốc tế, đảm bảo cho các trình duyệt học
khác nhau, trên các nền phần cứng và hệ điều hành
khác nhau đều hiểu được và hiển thị đúng nội dung của
các trang web.
17
HTML không phải là một ngôn ngữ lập trình, nó là
một ngôn ngữ đánh dấu. HTML dễ hiểu hơn hầu hết
các ngôn ngữ lập trình.
Một tài liệu HTML là một tập tin văn bản trong đó
có sử dụng các thẻ HTML để quy định cách thức hiển
thị văn bản khi nó được mở bởi một trình duyệt web.
-Thuyết
trình.
Giảng
giải
- TT nghe
giảng.
4
2.1.2 Cú pháp cơ bản của 1 thẻ
Cơ bản các thẻ định dạng trong HTMl thường có
từng cặp, gồm: thẻ mở <tag> và thẻ đóng </tag>.
Các văn bản nằm giữa hai thẻ này sẽ được chịu tác
động định dạng bởi thẻ. Ví dụ, thẻ <B> dùng để định
dạng chữ in đậm, khi đó văn bản “<B>Hello</B> sẽ
được hiển thị là “Hello”.
- Quan
sát TQ.
-Thuyết
trình.
Giảng
giải
- TT nghe
giảng.
28
2.2 Cấu trúc tổng thể của một trang HTML
Thẻ khai báo cho trình duyệt web biết loại văn
bản HTML này có chuẩn gì để hiển thị đúng với yêu
cầu của nội dung cần thiết. Thẻ này đặt ở ngay dòng
đầu tiên của mỗi văn bản HTML.
- Quan
sát TQ.
Thẻ đánh dấu bắt đầu của văn bản HTML, thẻ này
bắt buộc phải có.
Thẻ bắt đầu của phần khai báo thông tin về trang
web, thông tin này sẽ không được hiển thị trên trang
Web
Thẻ kết thúc phần khai báo thông tin về trang web.
Thẻ đánh dấu bắt đầu phần nội dung của trang web,
đây là phần nội dung sẽ hiển thị trên trang web, thẻ này
bắt buộc phải có.
Thẻ đánh dấu kết thúc phần nội dung của trang
web.
Thẻ đánh dấu kết thúc văn bản HTML.
18
2.3 Các loại thẻ trong HTML
-Thuyết
trình.
Giảng
giải
- TT nghe
giảng.
2.3.1
42
Các thẻ định cấu trúc tài liệu
Đây là những cặp thẻ bắt buộc luôn phải có trong
- Quan
tài liệu HTML, định nghĩa cấu trúc cơ bản của 1 tài
liệu HTML.
sát TQ.
1.1 HTML
Cặp thẻ này được sử dụng để xác nhận một tài liệu
là tài liệu HTML, thẻ mở nằm ở đầu tiên và thẻ đóng ở
cuối cùng tài liệu. Cú pháp:
<HTML>
... Toàn bộ nội của tài liệu được đặt ở đây
</HTML>
Trình duyệt sẽ xem các tài liệu không sử dụng thẻ
<HTML> như những tệp tin văn bản bình thường.
1.2 HEAD
Thẻ <HEAD> được dùng để xác định phần mở đầu
cho tài liệu. Cú pháp:
<HEAD>
... Phần mở đầu (HEADER) của tài liệu được đặt ở
đây
</HEAD>
1.3 TITLE
Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu
của tài liệu, tức là nó phải nằm trong thẻ phạm vi giới
hạn bởi cặp thẻ <HEAD>
<TITLE>Tiêu đề của tài liệu</TITLE>
1.4 BODY
Thẻ này sử dụng để xác định phần nội dung chính
của tài liệu - phần thân (body)
<BODY>
.... phần nội dung của tài liệu đặt ở đây
</BODY>
Trong phần thân có thể chứa các thông tin định
dạng nhất định, ví dụ: màu nền, màu văn bản siêu liên
kết, đặt lề cho trang tài liệu...
2.3.2 Các thẻ định dạng khối
-Thuyết
- TT nghe
42
19
Tải về để xem bản đầy đủ
53 trang
18840
Free
Bạn đang xem 20 trang mẫu của tài liệu "Giáo án Lập trình Web - Nguyễn Huy Thưởng", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- giao_an_lap_trinh_web_nguyen_huy_thuong.pdf
