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ú MỤC LỤC LỜI CẢM ƠN 1 MỤC LỤC 2 LỜI NÓI ĐẦU 4 CHƯƠNG I:TÌM HIỂU VỀ HTML, CSS VÀ JAVASCRIPT 5 1.1 Tìm hiểu về HTML 5 1.1.1.Trình bày tài liệu trong HTML 5 1.1.2. Multimedia 7 1.2. Tìm hiểu về CSS 8 1.2.1.Giới thiệu 8 1.2.2.Các lệnh cơ bản 8 1.3 Tìm hiểu về ngôn ngữ kịch bản javascript 11 1.3.1 Giới thiệu ngôn ngữ JavaScript 11 1.3.2 Sử dụng thư viện JQuery trong web. 14 CHƯƠNG II:PHÂN TÍCH THIẾT KẾ HỆ THỐNG ĐĂNG KÝ HỌC PHẦN 16 2.1 Xác định các yêu cầu của hệ thống 16 2.2 Xác định các tác nhân của hệ thống 16 2.3 Biểu đồ phân cấp chức năng 16 2.4 Xác định các ca sử dụng của hệ thống 17 2.5 Đặc tả các ca sử dụng 18 2.5.1 Ca sử dụng Đăng nhập hệ thống 18 2.5.2 Ca sử dụng Đăng ký môn học 19 2.5.3 Ca sử dụng hủy học phần đã đăng ký 20 2.5.4 Ca sử dụng tra cứu điẻm 21 2.5.5 Ca sử dụng xem lịch thi cá nhân 22 2.5.6 Ca sử dụng Đăng ký thi lại 23 2.5.7 Ca sử dụng đổi mật khẩu 24 2.6 Biểu đồ trình tự 25 2.6.1 Biểu đồ trình tự đăng nhập 25 2.6.2 Biểu đồ trình tự đăng ký học 26 2.7 Biểu đồ hoạt động 26 2.7.1 Biểu đồ đăng nhập 26 2.7.2 Biểu hoạt động đăng ký học 27 2.7.3 Biểu đồ hoạt động hủy đăng ký học 27 2.8 Xác định các lớp 27 CHƯƠNG III:XÂY DỰNG TRANG WEBSITE ĐĂNG KÝ HỌC PHẦN CHO SINH VIÊN CÔNG NGHỆ THÔNG TIN 29 3.1Giao diện đăng nhập 29 3.2 Giao diện đăng nhập sai tài khoản 30 3.3 Giao diện sai mật khẩu 31 3.4 Giao diện đăng nhập thành công 32 3.5 Đăng ký học phần 33 3.6 Kết quả đăng ký trùng lịch 34 3.7 Kết quả đăng ký thành công 35 3.8 Xen kết quả đăng ký 36 3.9 Hủy học phần 36 KẾT LUẬN 37 TÀI LIỆU THAM KHẢO 38 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 39 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 tư đúng mức. Xã hội và kinh tế phát triển đòi hỏi công nghệ cũng phát triển. Công nghệ phát triển, con người ngày càng phát minh ra những thiết bị công nghệ số thông minh giúp con người rất nhiều mặt trong cuộc sống và đặc biệt là phát triển và thiết kế website luôn được xã hội quan tâm và đầu tư phát triển. Có thể nói website là không thể thiếu đối với tất cả các ngành nghề và tất cả các đối tượng từ doanh nghiệp đến các tổ chức cá nhân và được ứng dụng trong tất cả các lĩnh vực của đời sống xã hội từ kinh tế, chính trị, văn hóa,giáo dục, thể thao và du lịch… Với mong muốn để tìm hiểu rõ hơn về môn thiết kế phát triển website và ứng dụng cho việc xây dựng hệ thống website đăng ký học em quyết định chọn đề tài thực tập cơ sở:“ 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”. CHƯƠNG I: TÌM HIỂU VỀ HTML, CSS VÀ JAVASCRIPT 1.1Tìm hiểu về HTML HTML là ngôn ngữ đánh dấu siêu văn bản được sử dụng để xây dựng web. • HTML là chữ viết tắt của Hyper Text Markup Language hay tiếng Việt gọi là Ngôn ngữ đánh dấu siêu văn bản. • 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ụ: , , …. HTML tags thông thường phải đi cùng một cặp gồm thẻ đóng và thẻ mở như: Các tag đầu tiên trong một cặp là thẻ bắt đầu, các thẻ thứ hai là thẻ kết thúc Thẻ Bắt đầu và thẻ kết thúc còn được gọi là thẻ mở và thẻ đóng Thẻ đóng kết thúc bằng dấu () Nội dung của thẻ sẽ được nằm giữa thẻ đóng và thẻ mở Một số thẻ chỉ có thẻ mở mà không có thẻ đóng (như các thẻ , , ) Thẻ meta Thẻ meta là thẻ thông tin cho một văn bản HTML. Thẻ này sẽ không hiển thị đối với người sử dụng, nó sẽ được ẩn và thể hiện một nội dung nào đó cho phép các ứng dụng có thể đọc và hiểu thông qua từng nội dung của thẻ. Thẻ Meta phải nằm trong thẻ HEAD của văn bản HTML. Thẻ định dạng khối Thẻ định dạng khối trong HTML, được sử dụng để định nghĩa một đoạn văn bản, một tiêu đề hay một định dạng có sẵn.
,,..., Thẻ P: Được dùng để định dạng đánh dấu một đoạn văn bản. Thẻ H1, H2…: Được dùng để đánh dấu đề mục trong văn bản. Thẻ Br: định dạng xuống dòng văn bản. Thẻ Pre: Được dùng để giới hạn đoạn văn bản được định dạng sẵn.Văn bản đặt trong thẻ này sẽ được thể hiện giống như khi chúng được đánh vào. 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:
- Mục thứ nhất
- Mục thứ hai
-
-
< Thẻ mày mang tính đánh số các danh mục >
- Mục thứ nhất
- Mục thứ hai
-
-
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ẻ
Bảng
Bảng trong HTML được định nghĩa bởi thẻ . Một bảng được chia thành các hàng (row, định nghĩa bởi ), và mỗi hàng được chia thành các cột (column, định nghĩa bởi ).
1.1.2. Multimedia
Hình ảnh
Hình ảnh khi sử dụng trong web được sử dụng thẻ cách sử dụng như sau.
Code:
.
Forms
• Giới thiệu
HTML Form được sử dụng để truyền dữ liệu tới server. Form trong html có thểchứa nhiều các thẻ input để dịnh nghĩa dữ liệu.
Thẻ định nghĩa form:
.
input elements.
• Một số thuộc tính của form
Thuộc tính Giá trị Giải thích
accept
MIME_type Chỉ rõ những kiểu file có thể upload thông qua form
acceptcharset
character_set Chỉ rõ những hệ mã hóa kí tự có thể sử dụng trong form.
enctype
applicationxwwwformurlencoded
multipartformdata
textplain Chỉ rõ phương thức mã hóa dữ liệu khi form gửi dữ liệu tới server. (chỉ sử dụng cho method=post)
method
GetPost Chỉ rõ kiểu gửi dữ liệu.
name
Name Chỉ rõ tên của form.
Action
URL Chỉ rõ địa chỉ dữ liệu sẽ gửi tới.
(Thuộc tính bắt buộc)
1.2. Tìm hiểu về CSS
1.2.1.Giới thiệu
CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một dạng file text với phần tên mở rộng là .css. Trong Style Sheet này chứa những câu lệnh CSS.Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML.
Các cách nhúng style cho văn bản HTML
Hiện tại có ba cách để định dạng văn bản sử dụng CSS: cục bộ, nhúng vào trang và liên kết đến một file CSS riêng biệt. Trong thực tế thì cách cuối cùng là liên kết đến một file riêng biệt được sử dụng phổ biến nhất.
Cục bộ: code CSS được chèn trực tiếp vào trong thẻ HTML. Cách định dạng cục bộ là bạn sử dụng code CSS chèn trực tiếp vào thẻ HTML và chỉ có tác động lên thẻ đó.
Nhúng vào trang web.Cách thứ hai là khai báo code CSS nằm trong cặp thẻ được đặt ở phần của tài liệu.
1.2.2.Các lệnh cơ bản
Màu chữ và màu nền
Để có thể định dạng nền của một thành phần HTML ta có thể sử dụng các định dạng sau:
backgroundcolor backgroundimage chỉ định hình ảnh được sử dụng trong nền backgroundrepeat chỉ định tính lặp lại của nền
backgroundattachment chỉ định kiểu di chuyển của nền
backgroundposition 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 fontweight 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.
Cú pháp cho việc định dạng độ dày như sau:
p.normal {fontweight:normal;}
p.thick {fontweight:bold;}
p.thicker {fontweight: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.
Font style
Cú pháp như sau:
p.normal {fontstyle:normal;}
p.italic {fontstyle:italic;}
Text
Kiểu văn bản trong CSS có thể được định dạng những thuộc tính sau: Màu sắc (color), căn lề (text alignment), trang chí (text decoration), kiểu chữ (text transformation) và định lề chữ đầu (text Indentation).
Class và Id
Id hay là index(chỉ số) được dùng để xác định một đối tượng duy nhất nào đó.
Class hay còn gọi là lớp dùng để chỉ một lớp các đối tượng có chung các thuộc tính. Các đối tượng trong cùng một class có tính thừa kế lẫn nhau.
Box model
Tất cả các thành phần của HTML đều có thể được coi như một hộp (box), chúng có thể sắp xệp cạnh nhau hoặc chồng lên nhau. CSS Box về cơ bản là hộp bao quanh một thành phần HTML và nó có các khoảng cách về: lề trong, lề ngoài, độ dày lề của hộp. Các hộp khi được xắp xếp với nhau sẽ xây dựng nên layout của một website. Hình sau mô tả về box của HTML:
Trong đó:
Margin: sẽ tạo ra lề ngoài của box, toàn bộ khoảng này sẽ được xây dựng như khoảng trống và không có màu nền.
Border: là phần lề bao bọc padding và content, border có thể có các thuộc tính về màu nền, bo tròn, độ dày…
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 Giải thích Giá trị
height
Định chiều cao của đối tượng Auto,length, %,inherit
maxheight
Định chiều cao lớn nhất của đối tượng Auto,length, %,inherit
maxwidth
Định chiều rộng lớn nhất của đối tượng Auto,length, %,inherit
minheight
Định chiều cao nhỏ nhất của đối tượng Auto,length, %,inherit
minwidth
Định chiều rộng nhỏ nhất của đối tượng Auto,length, %,inherit
width
Định chiều rộng của đối tượng Auto,length, %,inherit
Float và Clear
Float chủ yếu dùng để căn chỉnh hình ảnh sao cho chữ sẽ bao quanh hình ảnh.
Để tạo được hiệu ứng này bạn cần có một thẻ và
- Mục thứ nhất
- Mục thứ hai
- Mục thứ nhất
- Mục thứ hai
Box Model
Tạo thẻ div bao quanh là cách để bạn quản lý độ rộng thực sự của box. cho dù khi tôi thêm giá trị padding bằng 5px vào mỗi bên trái phải, nó cũng không làm tăng độ lớn. Mà ngược lại, nó sẽ bị đầy lùi vào biên là 5px .
Clear thực chất chỉ là một tính năng chống không cho đoạn văn ở dưới tràn lên trên để lấp vào chỗ trống.Như đã nói ở trên, khi dùng float có thể tạo ra hiệu ứng chữ bao xung quanh hình.Nhưng đôi khi vì dư chỗ, cho nên đoạn văn ở dưới di chuyển lên trên và lấp vào chỗ trống.Tất nhiên đó không phải là điều mong muốn, do vậy cần sử dụng Clear để xử lý vấn đề này nó đi. Positions Thuộc tính position xác định phương pháp định vị trí cho thành phần của HTML. Nó thường sử dụng với các thuộc tính khác như left,right, bottom, top để định vị vị trí của khối. tag { 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. 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ẻ . Nội dung của javascript có thể được đặt trong thẻ và phần của trang web, hay có thể được đặt riêng ra 1 file .js Biến và đối tượng Khai báo không tường minh: ten_bien = bieu_thuc; Khai báo tường minh: + Khai báo biến và không khởi tạo giá trị: var ten_bien; + Khai báo biến và khởi tạo giá trị ban đầu: var ten_bien = bieu_thuc; Quy tắc đặt tên biến: Ký tự bắt đầu phải là một chữ cái hoặc dấu gạch dưới “_” Trong tên biến không chứa khoảng trắng và các kỹ tự đặc biệt Các biến phân biệt chữ hoa, chữ thường. Các toán tử Gán (=) So sánh Toán tử Ý nghĩa = = So sánh bằng = So sánh không bằng > So sánh lớn hơn >= So sánh lớn hơn hoặc bằng < So sánh nhỏ hơn >>Toán tử dịch phải có chèn 0. Hàm và gọi hàm Cú pháp: function ten_ham(các tham số){ các câu lệnh trong hàm return bieu_thuc; kết thúc và trả về giá trị cho hàm } Các cấu trúc lệnh Câu lệnh rẽ nhánh (1) Câu lệnh if Cú pháp: if (dieu_kien) { 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: for (khởi tạo biến đếm; điều kiện; thay đổi giá trị biến đếm){ các câu lệnh thực hiện trong khi lặp } (2)Câu lệnh lặp while (số lần lặp không xác định trước) Cú pháp: while (dieu_kien){ các câu lệnh thực hiện trong khi lặp } 1.3.2 Sử dụng thư viện JQuery trong web. Đưa JQuery vào trang web Để sử dụng jQuery phải có thư viện do jQuery cung cấp bằng cách truy cập vào http:jquery.com để Download phiên bản mới. Hoặc có thể sử dụng trực tiếp jQuery lưu trữ tại jQuery hay Google từ 2 địa chỉ sau: http:code.jquery.comjquery1.7.2.min.js http:ajax.googleapis.comajaxlibsjquery1.7.1jquery.min.js Cú pháp cơ bản của Jquery • Cú pháp để chọn đối tượng jQuery sử dụng cùng một cách như CSS để lựa chọn những phần tử HTML (thẻ HTML) và thực hiện vài việc gì đó lên những đối tượng được chọn. Việc chọn đối tượng có thể thực hiện theo kiểu chọn một đối tượng duy nhất (đơn lẻ) hoặc một tập hợp các đối tượng có cùng đặc điểm( nhiều thành phần). Nguyên tắc để chọn cụ thể như sau: Cú pháp:(doi_tuong) : Ký tự bắt đầu của jQuery trong việc xác định đối tượng doi_tuong: tiêu chí để xác định đối tượng. Liệt kê cụ thể những trường hợp như bên dưới. (this) Chọn đối tượng hiện tại (đối tượng đặc biệt) | đối tượng đơn lẻ (document) Chọn đối tượng toàn bộ tài liệu (window) Chọn đối tượng về cửa sổ hiện hành (‘p’) Chọn tất cả các thẻ
(‘.ClassName’) Chọn tất cả các thẻ HTML có class=”ClassName” (‘IdValue’) Chọn thẻ HTML có id=”IdValue” 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. Sau khi nhận được thông tin đăng kí của Sinh viên, hệ thống sẽ xử lý thông tin nhận được một cách tự động và gửi thông tin phản hồi tới họ để xác nhận việc đăng kí thành công hay không.Thông tin phản hồi phải nhanh chóng và chính xác. 2.2 Xác định các tác nhân của hệ thống Tác nhân Sinh viên: sử dụng hệ thống để đăng kí các môn học. 2.3 Biểu đồ phân cấp chức năng 2.4 Xác định các ca sử dụng của hệ thống Dựa vào việc phân tích các tác nhân, ta xác định được các ca sử dụng như sau: Đăng nhập hệ thống Đăng ký học phần Hủy học phần Tra cứu điểm Xem lịch thi cá nhân Đăng ký thi lại Đổi mật khẩu Biểu đồ ues case tổng quát: 2.5 Đặc tả các ca sử dụng 2.5.1 Ca sử dụng Đăng nhập hệ thống a. Mô tả tóm tắt Tên ca sử dụng: Đăng nhập hệ thống Mục đích: Mô tả cách một người sử dụng đăng nhập vào hệ thống. 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 tác nhân muốn đăng nhập vào hệ thống. Hệ thống yêu cầu tác nhân nhập tên đăng nhập và mật khẩu đăng nhập. Tác nhân nhập tên đăng nhập và mật khẩu đăng nhập của mình. Hệ thống xác nhận tài khoản và mật khẩu đăng nhập có hợp lệ không, nếu không hợp lệ thì thực hiện luồng A1. Các luồng rẽ nhánh Luồng A1: Nhập sai tài khoảnmật khẩu đăng nhập Hệ thống sẽ thông báo lỗi. Người sử dụng có thể đăng nhập lại hoặc là huỷ bỏ đăng nhập, khi đó ca sử dụng kết thúc . 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 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, hoặc là môn học đó đã đủ số lượng sinh viên đăng ký + Hệ thống hiển thị thông báo lỗi. + Sinh viên có thể lựa chọn một môn học khác và đăng ký hoặc là thoát khỏi ca sử dụng này. • Luồng A2: Hết hạn đăng ký + 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. d. Hậu điều kiện Nếu ca sử dụng được thực hiện thành công thì hệ thống sẽ thông báo cho người sử dụng biết là đã dăng ký thành công.Sinh viên có thể hủy những môn học đã đăng ký, trong trường hợp khác hệ thống ở trong trạng thái không thay đổi. 2.5.3 Ca sử dụng hủy học phần đã đăng ký a. Mô tả tóm tắt Tên ca sử dụng: hủy học phần Mục đích: Giúp cho Sinh viên có thể hủy những môn học mà mình đã đăng ký. 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 a. Mô tả tóm tắt Tên ca sử dụng: Tra cứu điểm Mục đích: Giúp cho Sinh viên có thể tra cứu được điểm cá nhân của mình theo từng môn 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 hoạt động khi sinh viên đã có điểm thi của các học phần và đã được cập nhập vào hệ thống. Hệ thống hiển thị điểm của sinh viên theo từng môn họ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. Điểm 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 điểm của các môn đã cập nhập điểm. 2.5.5 Ca sử dụng xem lịch thi cá nhân 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. 2.5.6 Ca sử dụng Đăng ký thi lại a. Mô tả tóm tắt Tên ca sử dụng: Đăng ký thi lại Mục đích: Giúp cho Sinh viên có thể đăng ký thi lại những môn học mà bị tích F và tích D trong lần thi 1. 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 muốn đăng kýthi lại. Hệ thống hiển thị các lớp học phần bị tích F và tích D để sinh viên có thể lựa chọn các lớp học phần mà mình muốn đăng ký thi lại. 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: Hết hạn đăng ký + 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. Phải trong khoảng thời gian cho phép của hệ thống( chưa hết hạn đăng ký thi lại). d. Hậu điều kiện Nếu ca sử dụng được thực hiện thành công thì hệ thống sẽ thông báo cho người sử dụng biết là đã dăng ký thành công và sẽ được cập nhập vào lịch thi cá nhân của sinh viên. 2.5.7 Ca sử dụng đổi mật khẩu a. Mô tả tóm tắt Tên ca sử dụng: Đổi mật khẩu Mục đích: Thay đổi mật khẩu của người sử dụng. 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 người sử dụng muốn thay đổi mật khẩu đăng nhập khi đăng nhập vào hệ thống. Hệ thống tạo ra một form yêu cầu người sử dụng điền mật khẩu cũ, điền mật khẩu mới và xác nhận lại mật khẩu mới. Hệ thống xác nhận mật khẩu vừa đổi có hợp lệ hay không, nếu hợp lệ thì thực hiện luồng A1và ngược lại thì thực hiện luồng A2. Các luồng rẽ nhánh Luồng A1: Mật khẩu hợp lệ. + Hệ thống sẽ thông báo đổi mật khẩu thành công.khi đó ca sử dụng kết thúc. Luồng A2: Mật khẩu không hợp lệ. + Hệ thống sẽ thông báo lỗi.khi đó người sử dụng có thể tiên hành đổi lại hoặc kết thúc ca sử dụng mà không thay đổi gì. c. Tiền điều kiện Phải đăng nhâọ thành công vào hệ thống d. Hậu điều kiện Nếu việc đổi mật khẩu thành công, hệ thống sẽ xóa mật khẩu cũ và lưu mật khẩu mới vào tài khoảng đang nhập. 2.6 Biểu đồ trình tự 2.6.1 Biểu đồ trình tự đăng nhập 2.6.2 Biểu đồ trình tự đăng ký học 2.7 Biểu đồ hoạt động 2.7.1 Biểu đồ đăng nhập 2.7.2 Biểu hoạt động đăng ký học 2.7.3 Biểu đồ hoạt động hủy đăng ký học 2.8Xác định các lớp Dựa vào các khái niệm của lĩnh vực ứng dụng ta xác định được các lớp thực thể như sau: Lớp Tài khoản (TaiKhoan) gồm có các thông tin sau: • Tài khoản đăng nhập (taiKhoanDN) • Mật khẩu (matKhau) Lớp Sinh viên (SinhVien) gồm có các thông tin sau: • Mã sinh viên (maSV) • Họ tên sinh viên (tenSV) • Ngày sinh (ngayS) • Lớp (lop) • Số điện thoại (soDT) • Email (email) Lớp Môn học (MonHoc) gồm có các thông tin sau: • Mã môn học (maMH) • Tên môn học (tenMH) • Số tín chỉ (soTC) Lớp giảng đường gồm các thông tin sau: • Mã giảng đường(MDG) • Tên giảng đường(TenGD) Biểu đồ lớp CHƯƠNG III: XÂY DỰNG TRANG WEBSITE ĐĂNG KÝ HỌC PHẦN CHO SINH VIÊN CÔNG NGHỆ THÔNG TIN 3.1Giao diện đăng nhập Hình 3.1: Đăng nhập 3.2Giao diện đăng nhập sai tài khoản Hình 3.2: Giao diện đăng nhập sai tài khoản 3.3 Giao diện sai mật khẩu Hình 3.3: Giao diện đăng nhập sai mật khẩu 3.4 Giao diện đăng nhập thành công Hình 3.4:Giao diện đăng nhập thành công 3.5 Đăng ký học phần Hình 3.5: Đăng ký học phần 3.6 Kết quả đăng ký trùng lịch Hình 3.6: Kết quả đăng ký trùng lịch 3.7 Kết quả đăng ký thành công Hình 3.7: Kết quả đăng ký thành công 3.8 Xen kết quả đăng ký Hình 3.8: Kết quả đăng ký học 3.9 Hủy học phần Hình 3.9: Kết quả hủy học phần KẾT LUẬN Sau một thời gian tìm hiểu và làm việc với sự giúp đỡ tận tình của cô hướng dẫn cuối cùng em cũng đã hoàn thành đề tài thực tập cơ sở “Tìm hiểu 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”em đã làm được những công việc sau: + Hiểu được một chút về HTML,CSS và Javascript. + Xây dựng được trang website đơn giản đăng ký học phần cho sinh viên công nghệ thông tin. Tuy nhiên trong quá trình tìm hiểu, phân tích, thiết kế và xây dựng hệ thống do kiến thức của bản thân em còn hạn chế nên chắc chắn trong bài báo cáo này không tránh khỏi các lỗi và còn thiếu sót nhiều. Em rất mong nhận được những nhận xét, đánh giá cũng như những đóng góp ý kiến từ phía các Thầy, cô để em khắc phục và hoàn thiện hơn trong các bài báo cáo sau này. TÀI LIỆU THAM KHẢO 1 Giaó trình môn thiết kế phát triển website 2 Bài giảng môn thiết kế websiteTrường CĐ CNTT hữu nghị ViệtHàn 3 Các tài liệu trên mạng: Các video bài giảng thiết kế website của TrườngDayNghề.NET Luan Van.net.vn NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Giảng viên hướng dẫn Thạc sỹ :Dương Thúy Hường Sinh viên Giàng A Tú
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 hướng giúp em hoàn thành tốt đề tài thực tập cơsở Em chân thành cảm ơn tất thầy cô Trường Đại Học Công Nghệ Thông Tin Và Truyền Thơng Thái Ngun nhiệt tình giảng dạy giúp đỡ em trình học tập trường Một lần 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 hạnh phúc Em chúc cơng tác tốt Vì lượng kiến thức thời gian có hạn, thực tập sở em khơng tránh khỏi khiếm khuyết,sai sót Rất mong nhận nhận xét, ý kiến đóng góp thầy, 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 những ngành 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 tư đúng mức Xã hội và kinh tế phát triển đòi hỏi công nghệ cũng phát triển Công nghệ phát triển, người ngày càng phát minh những thiết bị công nghệ số thông minh giúp người rất nhiều mặt cuộc sống và đặc biệt là phát triển và thiết kế website được xã hội quan tâm và đầu tư phát triển Có thể nói website là không thể thiếu đối với tất cả các ngành nghề và tất cả các đối tượng từ doanh nghiệp đến các tổ chức cá nhân và được ứng dụng tất cả các lĩnh vực của đời sống xã hội từ kinh tế, chính trị, văn hóa,giáo dục, thể thao và du lịch… Với mong muốn để tìm hiểu rõ về môn thiết kế phát triển website và ứng dụng cho việc xây dựng hệ thống website đăng ký học em quyết định chọn đề tài thực tập sở:“ 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” 33 44 CHƯƠNG I: TÌM HIỂU VỀ HTML, CSS VÀ JAVASCRIPT 1.1Tìm hiểu về HTML HTML ngôn ngữ đánh dấu siêu văn sử dụng để xây dựng web • HTML chữ viết tắt Hyper Text Markup Language hay tiếng Việt gọi • Ngơn ngữ đánh dấu siêu văn HTML khơng phải ngơn ngữ lập trình, mà ngơn ngữ đánh dấu ( hiển • • • thị) bao gồm tập thẻ hiển thị (HTML Tag) HTML dùng HTML tags để miêu tả trình bày trang web Một file HTML chứa thẻ HTML Những thẻ HTML hướng dẫn trình duyệt web trình bày thành phần • • trang web Một file HTML phải có phần mở rộng html htm Một file HTML tạo trình soạn thảo văn đơn giản Notepad 1.1.1.Trình bày tài liệu HTML Thẻ thể cấu trúc thẻ HTML - HTML tags từ khóa bao dấu nhỏ () : Ví dụ: , , … HTML tags thông thường phải cặp gồm thẻ đóng thẻ mở như: - Các tag cặp thẻ bắt đầu, thẻ thứ hai thẻ kết thúc Thẻ Bắt đầu thẻ kết thúc gọi thẻ mở thẻ đóng Thẻ đóng kết thúc dấu / () Nội dung thẻ nằm thẻ đóng thẻ mở Một số thẻ có thẻ mở mà khơng có thẻ đóng (như thẻ , , ) Thẻ meta Thẻ meta thẻ thông tin cho văn HTML Thẻ khơng hiển thị người sử dụng, ẩn thể nội dung cho phép ứng dụng đọc hiểu thông qua nội dung thẻ Thẻ Meta phải nằm thẻ HEAD văn HTML Thẻ định dạng khối 55 Thẻ định dạng khối HTML, sử dụng để định nghĩa đoạn văn bản, tiêu đề hay định dạng có sẵn ,, , Thẻ P: Được dùng để định dạng đánh dấu đoạn văn Thẻ H1, H2…: Được dùng để đánh dấu đề mục văn Thẻ Br: định dạng xuống dòng văn Thẻ Pre: Được dùng để giới hạn đoạn văn định dạng sẵn.Văn đặt thẻ thể giống chúng đánh vào 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 nhiều thể phần tử danh sách (List Item – LI) Cấu trúc:1010 2.5.6 Ca sử dụng Đăng ký thi lại Dang nhap dang ky thi lai mon dang ky thi lai a Mơ tả tóm tắt Tên ca sử dụng: Đăng ký thi lại Mục đích: - Giúp cho Sinh viên đăng ký thi lại mơn học mà bị tích F và tích D lần thi Tác nhân: Sinh viên b Các luồng kiện Luồng kiện - Ca sử dụng bắt đầu sinh viên muốn đăng kýthi lại - Hệ thống hiển thị lớp học phần bị tích F và tích D để sinh viên có thể lựa chọn các lớp học phần mà mình muốn đăng ký thi lại - Sau đã 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: Hết hạn đăng ký + 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 Phải khoảng thời gian cho phép của hệ thống( chưa hết hạn đăng ký thi lại) d Hậu điều kiện 2525 Nếu ca sử dụng thực thành cơng hệ thống sẽ thông báo cho người sử dụng biết là đã dăng ký thành công và sẽ được cập nhập vào lịch thi cá nhân của sinh viên 2.5.7 Ca sử dụng đổi mật khẩu Dang nhap Thay doi mat khau Mat khau cu mat khau moi xac nhan mat khau moi a Mơ tả tóm tắt Tên ca sử dụng: Đởi mật khẩu Mục đích: Thay đởi mật khẩu của người sử dụng Tác nhân: Sinh viên b Các luồng kiện Luồng kiện chính: - Ca sử dụng bắt đầu người sử dụng muốn thay đổi mật khẩu đăng nhập - đăng nhập vào hệ thống Hệ thống tạo một form yêu cầu người sử dụng điền mật khẩu cũ, điền mật khẩu mới - và xác nhận lại mật khẩu mới Hệ thống xác nhận mật khẩu vừa đởi có hợp lệ hay khơng, hợp lệ thực luồng A1và ngược lại thì thực hiện luồng A2 Các luồng rẽ nhánh - Luồng A1: Mật khẩu hợp lệ 2626 + Hệ thống sẽ thông báo đổi mật khẩu thành cơng.khi ca sử dụng kết thúc - Luồng A2: Mật khẩu không hợp lệ + Hệ thống sẽ thơng báo lỡi.khi người sử dụng có thể tiên hành đổi lại hoặc kết thúc ca sử dụng mà không thay đổi gì c Tiền điều kiện Phải đăng nhâọ thành công vào hệ thống d Hậu điều kiện Nếu việc đổi mật khẩu thành công, hệ thống sẽ xóa mật khẩu cũ và lưu mật khẩu mới vào tài khoảng nhập 2.6 Biểu đồ trình tự 2.6.1 Biểu đồ trình tự đăng nhập Trang dang nhap CSDL : Sinh vien : nhap tai khoang+pass() : Kiem tra tai khoang() : Kiem tra pass() : Thong bao() : Tao trang moi Trang chinh : dong trang() 2727 2.6.2 Biểu đồ trình tự đăng ký học 2.7 Biểu đồ hoạt động 2.7.1 Biểu đồ đăng nhập Bat dau Hien thi trang dang nhap Nhap tai khoang [ sai tai khoang hoac mat khau] Kich bottom dang nhap Thong bao dung tai khoang va matkhau Ket thuc 2828 2.7.2 Biểu hoạt động đăng ký học Bat dau Dang ky hoc dang ky khong cong sinh vien dang ky hoc chon mon dang ky hoc Thanh cong Ket thuc 2.7.3 Biểu đồ hoạt động hủy đăng ký học Bat dau Dang ky hoc sinh vien dang ky hoc chon mon huy Thanh cong Ket thuc 2.8Xác định lớp Dựa vào khái niệm lĩnh vực ứng dụng ta xác định lớp thực thể sau: - Lớp Tài khoản (TaiKhoan) gồm có thơng tin sau: • Tài khoản đăng nhập (taiKhoanDN) • Mật (matKhau) - Lớp Sinh viên (SinhVien) gồm có thơng tin sau: • • • • Mã sinh viên (maSV) Họ tên sinh viên (tenSV) Ngày sinh (ngayS) Lớp (lop) 2929 • Số điện thoại (soDT) • Email (email) - Lớp Mơn học (MonHoc) gồm có thơng tin sau: • Mã mơn học (maMH) • Tên mơn học (tenMH) • Số tín (soTC) -Lớp giảng đường gồm các thông tin sau: • Mã giảng đường(MDG) • Tên giảng đường(TenGD) Biểu đồ lớp Tai khoang Sinh vien #MSV: char(20) #MMH: char(10) #MGD: char(5) #MSV: char(20) +TenSV: string #MGD: char(5) +Khoa: string Mon hoc Giang duong #MMH: char(30) +TenMH: string +So TC: Interger #MGD: char(5) +TenGD: string #MMH: char(30) 3030 3131 CHƯƠNG III: XÂY DỰNG TRANG WEBSITE ĐĂNG KÝ HỌC PHẦN CHO SINH VIÊN CÔNG NGHỆ THÔNG TIN 3.1Giao diện đăng nhập Hình 3.1: Đăng nhập 3232 3.2Giao diện đăng nhập sai tài khoản Hình 3.2: Giao diện đăng nhập sai tài khoản 3333 3.3 Giao diện sai mật khẩu Hình 3.3: Giao diện đăng nhập sai mật khẩu 3434 3.4 Giao diện đăng nhập thành công Hình 3.4:Giao diện đăng nhập thành công 3535 3.5 Đăng ký học phần Hình 3.5: Đăng ký học phần 3636 3.6 Kết quả đăng ký trùng lịch Hình 3.6: Kết quả đăng ký trùng lịch 3737 3.7 Kết quả đăng ký thành công Hình 3.7: Kết quả đăng ký thành công 3838 3.8 Xen kết quả đăng ký Hình 3.8: Kết quả đăng ký học 3939 ... sở:“ 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? ?? 33 44 CHƯƠNG I: TÌM HIỂU VỀ HTML, CSS VÀ JAVASCRIPT 1. 1Tìm hiểu. .. sở ? ?Tìm hiểu 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? ??em làm công việc sau: + Hiểu được một chút về HTML,CSS và Javascript. .. đăng ký trùng lịch Hình 3.6: Kết quả đăng ký trùng lịch 3737 3.7 Kết quả đăng ký thành công Hình 3.7: Kết quả đăng ký thành công 3838 3.8 Xen kết quả đăng ký Hình 3.8: Kết