Tìm hiểu về HTML,CSS và JAVASCRIPT ứng dụng thiết kế website đăng ký học phần cho sinh viên công nghệ thông tin - Pdf 41

LỜI CẢM ƠN

Em xin gửi lời cảm ơn chân thành tới cô giáo Th.S Dương Thúy Hường đã tận
tình hướng dẫn, cho em những định hướng và giúp em hoàn thành tốt đề tài thực tập
cơsở này.
Em chân thành cảm ơn tất cả các thầy cô trong Trường Đại Học Công Nghệ
Thông Tin Và Truyền Thông Thái Nguyên đã nhiệt tình giảng dạy và giúp đỡ em trong
quá trình học tập tại trường.
Một lần nữa em xin chúc cô Dương Thúy Hường,cùng gia đình thầy sức khỏe
dồi dào,thành đạt và hạnh phúc. Em chúc cô công tác tốt.
Vì lượng kiến thức và thời gian có hạn, bài thực tập cơ sở của em không tránh
khỏi những khiếm khuyết,sai sót. Rất mong nhận được sự nhận xét, ý kiến đóng góp
của các thầy, cô và các bạn .
Thái Nguyên, ngày 17 tháng 05 năm
2016
Sinh viên
Giàng A Tú

11


MỤC LỤC

22


LỜI NÓI ĐẦU
Ngày nay, công nghệ thông tin là một trong những ngành đang phát triển
mạnh mẽ và ảnh hưởng sau rộng đến mọi mặt của đời sống. Nó là nền tảng của nền
kinh tế tri thức, là thước đo trình độ phát triển của một quốc gia. Vì vậy, việc đào tạo
đội ngũ kỹ sư công nghệ thông tin có chất lượng đòi hỏi phải được chú trọng và đầu

HTML không phải là ngôn ngữ lập trình, mà là một ngôn ngữ đánh dấu ( hiển





thị) bao gồm tập các thẻ hiển thị (HTML Tag).
HTML dùng các HTML tags để miêu tả trình bày một trang web.
Một file HTML chứa những thẻ HTML.
Những thẻ HTML sẽ hướng dẫn trình duyệt web trình bày thành phần của một




trang web
Một file HTML phải có phần mở rộng là .html hoặc .htm
Một file HTML có thể được tạo ra bởi trình soạn thảo văn bản đơn giản như
Notepad
1.1.1.Trình bày tài liệu trong HTML

 Thẻ thể hiện cấu trúc thẻ HTML
-

HTML tags là những từ khóa được bao bởi dấu nhỏ hơn (<)và dấu lớn hơn (>) : . Ví dụ: <html>, <a>, <b>….
HTML tags thông thường phải đi cùng một cặp gồm thẻ đóng và thẻ mở như:


 Thẻ định dạng danh sách
-

Danh sách không theo thứ tự (Unorder list- UL)
Danh sách theo thứ tự (Ordered List – OL).
Một hoặc nhiều thể phần tử trong danh sách (List Item – LI).
Cấu trúc:
<!--Thẻ này mang tính chất liệt kê, không thứ tự. -->
<UL>
<LI> Mục thứ nhất</LI>
<LI> Mục thứ hai</LI>
</UL>
<!-- Thẻ mày mang tính đánh số các danh mục -->
<OL TYPE=“1/a/A/i/I”>
<LI> Mục thứ nhất</LI>
<LI> Mục thứ hai</LI>
</OL>

 Liên kết
Một trang website bao gồm rất nhiều trang web (web page), các web page liên



kết lại với nhau để tạo lên website.


Liên kết trong HTML được định nghĩa bằng cặp thẻ <a>

 Bảng


thông qua form
Chỉ rõ những hệ mã hóa kí tự có thể

accept-charset character_set

sử dụng trong form.

application/x-www-formenctype

Chỉ rõ phương thức mã hóa dữ liệu

urlencoded

khi form gửi dữ liệu tới server. (chỉ

multipart/form-data

method
name

text/plain
Get/Post
Name

Action

URL

sử dụng cho method="post")
Chỉ rõ kiểu gửi dữ liệu.

background-attachment // chỉ định kiểu di chuyển của nền
background-position // chỉ định vị trí của nền
 Font chữ

Trong CSS hệ thống font chữ có thể định dạng được các thuộc tính sau: loại
font chữ (font family), độ dày của font chữ (font boldness), cỡ fontchữ (font size), kiểu
font chữ (font style)
Font weight
Để định dạng độ dày của chữ ta sử dụng thuộc tính font-weight của CSS. Các
giá trị có thể nhận của thuộc tính này là: normal, bold, bolder, lighter, các giá trị từ 100
tới 900.

88


Cú pháp cho việc định dạng độ dày như sau:
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
Font size
Ta có 2 cách để định giá trị cho cỡ chữ:
-

Cách định giá trị cỡ chữ tuyệt đối: cỡ chữ sẻ được định theo giá trị không thay đổi

-

được.
Cách định giá trị tương đối: cỡ chữ có thể thay đổi dựa theo các thành phần khác của
web.

- Padding: là phần lề trong, padding background có thể bị ảnh hưởng bởi màu
của box.
- Content: Là phần nội dung của box.
 Height và Width

Một block trong CSS có thể định nghĩa được chiều cao và chiêu rộng thông qua
height và width thuộc tính. Dưới đây là bảng các thuộc tính và giá trị có thể có:
Thuộc tính
height

Giải thích

Giá trị

Định chiều cao của đối tượng

Auto,length, %,inherit

max-height Định chiều cao lớn nhất của đối tượng Auto,length, %,inherit
max-width

Định chiều rộng lớn nhất của đối

Auto,length, %,inherit
tượng
min-height Định chiều cao nhỏ nhất của đối tượng Auto,length, %,inherit
Định chiều rộng nhỏ nhất của đối
min-width
Auto,length, %,inherit
tượng

position: giá trị;
}
1.3 Tìm hiểu về ngôn ngữ kịch bản javascript
1.3.1 Giới thiệu ngôn ngữ JavaScript
Javascript là ngôn ngữ kịch bản phổ biến nhất trên thế giới hiện nay.Nó là ngôn
ngữ chuẩn được sử dụng trong các trang web cũng như cho các ứng dụng desktop,
mobile.Javascript được thiết kế thêm các tương tác tới các trang html.
Vậy thế nào là ngôn ngữ kịch bản?Ngôn ngữ kịch bản là ngôn ngữ lập trình
nhẹ hỗ trợ việc viết kịch bản. Kịch bản ở đây là các dòng code có thể được thông dịch
và thực thi nhanh chóng với các bước liên kết và biên dịch rõ ràng.
Javascript có thể làm những gì?
- Javascript cung cấp 1 công cụ lập trình cho các nhà thiết kế web html.

1111


- Javascript có thể thao tác html (đọc và thay đổi nội dung của các thẻ html).
- Javascript có thể thao tác với CSS (đọc và thay đổi định dạng của các thẻ html).
- Javascript có thể xác định tính hợp lệ của dữ liệu (validate data).
- Javascript có thể lưu trữ dữ liệu.
- Javascript có thể thực hiện lại các sự kiện
 Nhúng JavaScript vào trang HTML

Nội dung của javascript được đặt trong cặp thẻ <script></script>.
Nội dung của javascript có thể được đặt trong thẻ <body> và phần <head> của
trang web, hay có thể được đặt riêng ra 1 file .js
 Biến và đối tượng

-




//các câu lệnh nếu dieu_kien đúng;
}
else
{
//các câu lệnh nếu điều kiện sai;
}
(2)

Câu lệnh lựa chọn switch
Cú pháp:
switch (bieu_thuc){
case gia_tri_1:
//mã lệnh thực hiện khi bieu_thuc= =gia_tri_1
break;
case gia_tri_2:
//mã lệnh thực hiện khi bieu_thuc= =gia_tri_2
break;
…….
case gia_tri_n:
//mã lệnh thực hiện khi bieu_thuc= =gia_tri_n
break;
default:
//mã lệnh thực hiện khi không có giá trị nào phù hợp
}
Câu lệnh lặp

(1)

Câu lệnh for (số lần lặp xác định trước)
Cú pháp:

như bên dưới.
$(this)
$(document)
$(window)
$(‘p’)
$(‘.ClassName’)
$(‘#IdValue’)

Chọn đối tượng hiện tại (đối tượng đặc biệt) | đối tượng đơn lẻ
Chọn đối tượng toàn bộ tài liệu
Chọn đối tượng về cửa sổ hiện hành
Chọn tất cả các thẻ


Chọn tất cả các thẻ HTML có class=”ClassName”
Chọn thẻ HTML có id=”IdValue”

1515


1616


CHƯƠNG II:
PHÂN TÍCH THIẾT KẾ HỆ THỐNG ĐĂNG KÝ HỌC PHẦN
2.1 Xác định các yêu cầu của hệ thống
- Hệ thống phải cung cấp cho Sinh viên một danh sách các học phần
cùng với các thông tin liên quan (nội dung, thời lượng, thời điểm bắt đầu, người
dạy...) để người học có thể xem và lựa chọn.
- Khi Sinh viên có yêu cầu đăng kí một học phần, hệ thống phải cung cấp
cho họ mẫu Form để họ điền những thông tin cần thiết, giúp cho họ có thể
thực hiện được việc đăng kí dễ dàng.


1818


System

dang nhap
dang ky hoc

huy

sinh vien

tra cuu diem

dang ky thi lai

doi mat khau

xem lich thi ca nhan

1919


2.5 Đặc tả các ca sử dụng
2.5.1 Ca sử dụng Đăng nhập hệ thống

Ten tai khaong

Dang nhap

2020


c. Tiền điều kiện
Không
d. Hậu điều kiện
Nếu việc đăng nhập thành công, người sử dụng sẽ đăng nhập được vào
hệ thống.
2.5.2 Ca sử dụng Đăng ký môn học

a. Mô tả tóm tắt
Tên ca sử dụng: Đăng ký môn học
Mục đích:
- Giúp cho Sinh viên có thể đăng ký những môn học mà mình có thể học
trong một học kì.
- Sinh viên chọn các môn học để đăng ký hoặc thay đổi các môn học mà mình
đã đăng ký trong khoảng thời gian cho phép trước khi bắt đầu kì học.
Tác nhân: Sinh viên
b. Các luồng sự kiện

2121


 Luồng sự kiện chính
• Ca sử dụng này bắt đầu khi sinh viên muốn đăng ký môn học.
• Hệ thống hiển thị các lớp học phần để sinh viên có thể lựa chọn các lớp học
phần mà mình muốn đăng ký
• Sau khi đã chọn lớp học phần thì nhấm vào nút “đăng ký” để đăng ký.
 Các luồng rẽ nhánh
• Luồng A1: Môn học mà Sinh viên đăng ký không thoả mãn các điều kiện tiên quyết,

- Sinh viên chọn các môn học đã đăng ký để “hủy” trong khoảng thời gian cho
phép trước khi bắt đầu kì học.
Tác nhân: Sinh viên
b. Các luồng sự kiện
 Luồng sự kiện chính
• Ca sử dụng này bắt đầu khi sinh viên đã đăng ký thành công và muốn hủy học
phần đã đang ký.
• Hệ thống hiển thị các lớp học phần đã đăng ký để sinh viên có thể lựa chọn các lớp


+
+

học phần mà mình muốn hủy.
Sau khi đã chọn lớp học phần thì nhấm vào nút “hủy” để hủy.
Các luồng rẽ nhánh
Luồng A1: Qúa thời gian cho phép.
Hệ thống hiển thị thông báo lỗi.
Ca sử dụng kết thúc.
c. Tiền điều kiện:

-

Sinh viên phải đăng nhập thành công vào hệ thống.
Sinh viên phải đăng ký thành công các học phần muốn hủy trước đó.
Phải trong khoảng thời gian cho phép của hệ thống.
d. Hậu điều kiện: Nếu ca sử dụng được thực hiện thành công thì danh sách các
môn học mà Sinh viên đã chọn hủy sẽ được hủy và học phần đó sẽ được xóa khỏi danh
sách đã đăng ký.
2.5.4 Ca sử dụng tra cứu điẻm


Dang nhap

a. Mô tả tóm tắt
Tên ca sử dụng: xem lịch thi cá nhân
Mục đích:
- Giúp cho Sinh viên có thể xem lịch thi cá nhân của mình theo từng học kỳ.
Tác nhân: Sinh viên
b. Các luồng sự kiện
 Luồng sự kiện chính
 Ca sử dụng này hoạt động khi sinh viên đã có lịch thi của các học phần đang theo
học trong học kỳ đó và đã được cập nhập vào hệ thống.
 Hệ thống hiển thị lịch thi của sinh viên theo từng môn học cùng với địa điểm, thời
gian cụ thể.
c. Tiền điều kiện:
-

Sinh viên phải đăng nhập thành công vào hệ thống.
Lịch thi đã được cập nhập vào hệ thống.
d. Hậu điều kiện: Hệ thống sẽ hiện thị bảng lịch thi của các môn đã cập nhập.

2424


2.5.6 Ca sử dụng Đăng ký thi lại

Dang nhap

dang ky thi lai
mon dang ky thi lai


Nhờ tải bản gốc

Tài liệu, ebook tham khảo khác

Music ♫

Copyright: Tài liệu đại học © DMCA.com Protection Status