Xây dựng website hỗ trợ khám và điều trị bệnh

HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp.. xThẻ ...: Được sử dụng để nhóm các thành phần trên mộ

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM

KHOA TIN HỌC

KHÓA LUẬN TỐT NGHIỆP

NGÀNH CỬ NHÂN CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI:

XÂY DỰNG WEBSITE HỖ TRỢ KHÁM VÀ ĐIỀU TRỊ BỆNH

GVHD : PGS.TS LÊ VĂN SƠN SVTH : TRẦN VĂN VĨNH LỚP : 10CNTT4

ĐÀ NẴNG – 05/2014

DANH MỤC BẢNG BIỂU iii

DANH MỤC HÌNH ẢNH iv

DANH MỤC TỪ VIẾT TẮT vi

MỞ ĐẦU 1

1 Bối cảnh đề tài 1

1.1 Tên đề tài 1

1.2 Lý do chọn đề tài 1

2 Mục đích nghiên cứu 1

3 Đối tượng và phạm vi nghiên cứu 2

3.1 Đối tượng 2

3.2 Phạm vi 2

4 Phương pháp nghiên cứu 2

5 Mục tiêu cần đạt được 3

CHƯƠNG 1: TỔNG QUAN VỀ NGÔN NGỮ VÀ CÔNG CỤ HỖ TRỢ LẬP TRÌNH 4

1.1 HTML 4

1.1.1 Khái niệm 4

1.1.2 Cấu trúc của 1 tài liệu HTML 4

1.1.3 Cấu trúc thành phần của HTML 5

1.1.4 Những nguyên tắc cơ bản 5

1.1.5 Các thẻ cơ bản 6

1.2 CSS 10

1.2.1 Khái niệm CSS 10

1.2.2 Cú pháp CSS 10

1.3.2 Sơ lƣợc về Twitter Bootstrap 12

1.3.3 Cách sử dụng 13

1.4 JavaScript 13

1.4.1 Khái niệm 13

1.4.2 Cú pháp 13

1.4.2.1 Khoảng trắng 13

1.4.2.2 Chú thích 14

1.4.2.3 Biến 14

1.4.2.4 Đối tƣợng 15

1.4.2.5 Cấu trúc dữ liệu 15

1.4.3 Cách nhúng JavaScript vào trang HTML 16

1.5 Tìm hiểu về jQuery 17

1.5.1 Khái niệm 17

1.5.2 Cách áp dụng jQuery vào trang web 17

1.6 Node.js 18

1.6.1 Giới thiệu về Node.js 18

1.6.2 Node Package Manager (NPM) 19

1.6.2.1 Giới thiệu về npm 19

1.6.2.2 Định dạng gói cài NPM 19

1.6.2.3 Sử dụng NPM 20

1.6.3 Express Framework 21

1.6.4 Node-mysql 22

1.7 MySQL 23

1.7.1 Khái niệm 23

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 27

2.1 Phân tích bài toán 27

2.2 Phân tích và thiết kế hệ thống 28

2.2.1 Sơ đồ Use Case 28

2.2.2 Mô hình chức năng 30

2.2.3 Sơ đồ phân rã các chức năng 31

2.2.4 Biểu đồ luồng dữ liệu 3 mức 32

2.2.4.1 Sơ đồ ngữ cảnh 32

2.2.4.2 Sơ đồ luồng dữ liệu mức đỉnh 33

2.2.4.3 Sơ đồ luồng dữ liệu mức dưới đỉnh 33

2.3 Thiết kế cơ sở dữ liệu 36

2.3.1 Sơ đồ quan hệ thực thể 36

2.3.2 Xây dựng các lược đồ quan hệ 37

2.3.2.1 Mô tả các lược đồ 37

2.3.2.2 Lược đồ quan hệ 38

2.3.2.3 Mô tả dữ liệu các bảng 39

CHƯƠNG 3: TRIỂN KHAI THỰC HIỆN VÀ ĐÁNH GIÁ WEBSITE HỖ TRỢ KHÁM VÀ ĐIỀU TRỊ BỆNH 43

3.1 Triển khai xây dựng 43

3.1.1 Cài đặt Node.js 43

3.1.2 Xây dựng server bằng module express 43

3.1.3 Giao diện website 44

3.1.4 Giao diện app 56

3.2 Đánh giá 59

LỜI CAM ĐOAN

Sinh viên

7U̯Q9ăQ9ƭQK

LỜI CẢM ƠN

7U˱ͣFWLrQW{L[LQEj\W͗OzQJF̫P˯QFKkQWKjQKÿ͇QWK̯\ JLiRK˱ͣQJG̳Q

PGS 76/r9ăQ6˯QQJ˱ͥLÿmW̵QWuQKG̳QG̷WWUX\͉Qÿ̩WNLQKQJKL͏PYjWUtWKͱF JL~SÿͩW{LKRjQWKjQKOX̵QYăQQj\

7{L[LQFKkQWKjQKF̫P˯QTXê7K̯\&{ÿmJL̫QJG̩\FKRW{LWURQJVX͙WQăP K͕FTXDQKͷQJQJ˱ͥLÿmWUX\͉Qÿ̩WFKRW{ LQKͷQJWULWKͱFPͣLWUDQJE͓FKRW{LKjQK

CKkQWKjQKF̫P˯Q

Ĉj1 ̽ng, ngày 7 tháng 05 QăP

Sinh viên th͹ c hi͏ n

7U̯Q9ăQ9ƭQK

DANH MỤC BẢNG BIỂU

%̫QJ0{W̫$FWRU 28

%̫QJ0{W̫8VH&DVH 29

%̫QJ0{W̫FiFO˱ͫFÿ͛TXDQK͏ 38

%̫QJ0{W̫FKLWL͇WE̫QJWDLNKRDQ 40

%̫QJ0{W̫FKLWL͇WE̫QJEHQKDQ 40

%̫QJ0{W̫FKLWL͇WE̫QJWRDWKXRF 41

%̫QJ0{W̫FKLWL͇WE̫QJFKLWLHWBWRDWKXRF 41

%̫QJ 0{W̫FKLWL͇WE̫QJWKXRF 42

DANH MỤC HÌNH ẢNH

Hình 2.1 Mô hình Use Case 28

+uQK0{KuQKFKͱFQăQJFͯDK͏WK͙QJ 30

+uQK6˯ÿ͛SKkQUmFKͱFQăQJ 31

Hình 2.4 6˯ÿ͛QJͷF̫QK 32

Hình 2.5 6˯ÿ͛OX͛QJGͷOL͏XPͱFÿ͑QK 33

Hình 2.6 6˯ÿ͛ OX͛QJGͷOL͏XPͱFG˱ͣLÿ͑QKFKͱFQăQJTX̫QOtWjLNKR̫Q 33

+uQK6˯ÿ͛OX͛QJGͷOL͏XPͱFG˱ͣLÿ͑QKFKͱFQăQJ[HPWK{QJWLQ 34

Hình 2.8 6˯ÿ͛OX͛QJGͷOL͏XPͱFG˱ͣLÿ͑QKFKͱFQăQJ FK͑QKV͵D thông tin 34

+uQK6˯ÿ͛OX͛QJGͷOL͏XPͱFG˱ͣLÿ͑QKFK ͱFQăQJ thêm thông tin 35

+uQK6˯ÿ͛WK͹FWK͋TXDQK͏ 36

+uQK/˱ͫFÿ͛TXDQK͏ 38

Hình 3.1 *LDRGL͏QWUDQJKRPH 44

Hình 3 7UDQJÿăQJNtWjLNKR̫Q 45

Hình 3 4XrQP̵WNḴX 46

Hình 3 7UDQJ[HPE͏QKiQFͯDWjLNKR̫QQJ˱ͥLE͏QK 47

Hình 3 ;HPWRDWKX͙F 48

Hình 3 ;HPFKLWL͇WE͏QKiQ 48

+uQK7UDQJWuPEiFVƭ 49

Hình 3.8 7UDQJFK͑QKV͵DWK{QJWLQFiQKkQ 50

+uQK7UDQJWKD\ÿ͝LP̵WNḴX 51

+uQK7UDFͱXWKX͙F 52

Hình 3.11 7UDQJQK̵SWKX͙FPͣL 53

Hình 7̩RE͏QKiQPͣL 54

+uQK7UDQJW̩RWRDWKX͙F 55

Hình 3.14*LDRGL͏QWUDQJFKͯDSS 56

Hình 3.157UDQJGDQKViFKE͏QKiQ 56

Hình 3.16;HPFKLWL͇WE͏QKiQ 57

Hình 3.17;HPFKLWL͇WWRDWKX͙F 58

DANH MỤC TỪ VIẾT TẮT

cách trình bày tài liệu viết bằng ngôn ngữ HTML và XHTML, …và một số ngôn ngữ khác

Bác sĩ khi kê toa thuốc cho bệnh nhân thường ghi tay dẫn đến những vấn đề như ghi sai tên thuốc, chữ viết khó đọc gây nên những khó khăn và sai sót cho người đọc toa thuốc

Ở các phòng khám tư, người ta thường bỏ qua việc lưu trữ bệnh án cho người bệnh vì việc lưu trữ sổ sách làm mất thời gian và mất công cất giữ

xTìm hiểu cách thức xây dựng một website và web app

xTự mình xây dựng được một sản phẩm hoàn chỉnh từ đó thấy được bản thân mình cần trang bị những gì và yếu ở điểm nào để dần hoàn thiện, chuẩn bị bước vào môi trường làm việc thực tiễn

3 Đối tượng và phạm vi nghiên cứu

3.1 Đối tượng

xCác công nghệ để xây dựng website , web app

xThông tin về các loại thuốc tây có trên thị trường, một số nghiệp vụ có liên quan đến ngành y

xĐối tượng sử dụng: Tất cả mọi người sử dụng internet, đặc biệt hướng đến các đối tượng chính sau:

+ Các bác sĩ tư

+ Bệnh nhân đang trong quá trình điều trị

+ Những người cần tra cứu các thông tin về thuốc hoặc muốn tìm danh sách các phòng khám tại khu vực nào đó

3.2 Phạm vi

Địa điểm: Nghiên cứu trên địa bàn thành phố Đà Nẵng

Thời gian: từ 13/01/2014 đến 10/05/2014

4 Phương pháp nghiên cứu

Đọc các tài liệu trên các Ebook và website để biết về các công nghệ sử dụng để xây dựng một trang web và web app

Lên ý tưởng cho đề tài, sử dụng phần mềm Xmind để phân tích, triển khai ý tưởng

Thông qua internet và đi khảo sát thực tế để tìm hiểu một số kiến thức nghiệp vụ của ngành y có sử dụng trong đề tài

Thực hành thiết kế, xây dựng trang web và app web dưới sự hướng dẫn của cán

bộ tại công ty thực tập cùng giáo viên hướng dẫn

5 Mục tiêu cần đạt đƣợc

Xây dựng thành công trang web cùng app web

Chạy đúng chức năng đã dự kiến

CHƯƠNG 1: TỔNG QUAN VỀ NGÔN NGỮ VÀ CÔNG CỤ HỖ

TRỢ LẬP TRÌNH 1.1 HTML

1.1.1 Khái niệm

HTML ( viết tắt cho HyperText Markup Language, hay là "Ngôn ngữ Đánh dấu

Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẫu thông tin được trình bày trên World Wide Web HTML được định nghĩa như

là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì [9]

1.1.2 Cấu trúc của 1 tài liệu HTML

Cấu trúc của tài liệu HTML gồm có 3 phần cơ bản:

● Phần <html> </html> chứa code của html

● Phần <head> ….</head> phần này nằm trong thẻ <html> </html> chứa các thông tin hiển thị ở thanh điều hướng của trình duyệt web, chứa các thông tin về trang web

● Phần <body>….</body> phần này nằm trong thẻ <html> </html> và nằm sau thẻ <head> </head> chứa nội dung của trang web

Cấu trúc được thể hiện như sau:

Các thành phần của HTML đều có thẻ bắt đầu và thẻ kết thúc

Dưới đây là cấu trúc chung của một thành phần HTML:

<tag_name attributes> nội dung </tag_name>

Dưới đây là một số nguyên tắc trong tài liệu HTML:

xTên thẻ không phân biệt chữ hoa và chữ thường

xGiá trị của thuộc tính nên được đặt trong dấu nháy đơn hoặc dấu nháy kép

xCác thẻ html có thể lồng nhau

xHtml sẽ hiển thị đúng 1 kí tự khoảng trắng giữa các từ trong vùng nội dung của

phần tử html

xKí tự tab, kí tự xuống dòng sẽ được bỏ qua Không sử dụng những kí tự này để

định vị nội dung của trang web

xThẻ <span> </span>: Được sử dụng để nhóm các thành phần trên một dòng trong tài liệu HTML Ta có thể dùng span kèm với css để định dạng một phần nội dung trong văn bản HTML

Thẻ meta có có cấu trúc như sau:

<meta name="" http-equiv="" content="" scheme="" >

Trong đó:

x name là tên của thẻ meta

x content là giá trị tương ứng với name đó, nội dung trong content chỉ có thể là text chứ ko thể có các thẻ HTML trong đó

xscheme là định dạng của giá trị, ví dụ scheme=”day-month-year” là định dạng

ngày tháng năm

Không có chuẩn cho những thuộc tính trong thẻ meta vì vậy ta có thể tự định nghĩa thoải mái những metadata Ví dụ có thể định nghĩa thông tin tác giả:

<meta name="author” content="tac gia">

● Thẻ <meta />: Xác định thông tin dữ liệu về văn bản HTML, thông tin dữ liệu sẽ

không được hiển thị trên trình duyệt Thường được sử dụng để xác định mô tả trang (description), từ khóa (keywords), tác giả của văn bản (author), sửa đổi lần cuối (last modified), và thông tin dữ liệu khác Thẻ <meta /> có thể được sử dụng bởi các trình duyệt (hiển thị nội dung hoặc tải lại trang), công cụ tìm kiếm (từ khoá), hoặc các dịch vụ web khác Nó luôn truyền dưới dạng các cặp tên và giá trị

● Thẻ <title>: Định nghĩa một tiêu đề cho tài liệu HTML Thẻ này không có thuộc tính Nó là yêu cầu trong tất cả các tài liệu HTML

● Thẻ <link />: Xác định mối quan hệ giữa một tài liệu HTML và các tài nguyên bên ngoài Được dùng phổ biến nhất là link tới tài liệu css Thẻ <link /> được viết bên trong thẻ <head>

● Thẻ <style >: Định nghĩa thông tin về kiểu định dạng cho tài liệu HTML Một tài liệu HTML có thể chứa nhiều thẻ <style>

● Thẻ <strong>, <em>: Định nghĩa văn bản đậm mang ý nghĩa quan trọng hoặc in nghiêng mang ý nghĩa nhấn mạnh với cấu trúc dòng

● Thẻ <blockquote>, <cite>: Định nghĩa khối trích dẫn lớn có cấu trúc khối hoặc các trích dẫn nhỏ có cấu trúc dòng

● Thẻ <pre>, <code>: Định nghĩa một khối code không được dịch bởi trình duyệt

● Thẻ <br />: Dùng để xuống hàng, giống phím “Enter”

● Thẻ <p>: Định nghĩa một đoạn văn bản

Các th̓ ̫ QKYjÿ ͙LW˱ ͫng

● Thẻ <img />: Dùng để nhúng một image vào tài liệu HTML Thẻ <img /> có 2 thuộc tính cần thiết là src và alt

Trong đó:

○ src: đường dẫn tham chiếu tới image

○ alt: được sử dụng như một văn bản thay thế khi image không hiển thị (hoặc không có sẵn có thể do lỗi không hiển thi alt sẽ hiển thị thay)

● Thẻ <object>, <param>: Dùng để thêm nhiều đối tượng như ảnh, audio, video,

… vào tài liệu HTML

● Thẻ <map>, <area />: Xác định một vùng bên trong image-map Image-map là hình trong đó có những khu vực có thể click được Các <area /> luôn được lồng bên trong tag <map>

Th̓ liên k͇ t

● Thẻ <a>: Xác định một siêu liên kết (hyperlink) Được dùng để:

xLink từ trang này tới trang khác

xLink anchor (link neo) từ vị trí này tới vị trí khác

xLink để mở (hay download) một file nào đó (file word, excel, pdf, image,…),mở một cửa sổ hay một object nào đó,…

Các th̓ d̩ ng danh sách

● Các thẻ <ul>, <ol>, <li>, <dl> dùng để định nghĩa phần tử dạng danh sách

● Thẻ <ul>, <ol> định nghĩa một danh sách với các phần tử là thẻ <li>

● Thẻ dl định nghĩa một danh sách với các phẩn tử là thẻ <dt> và <dd>

Các th̓ d̩ ng b̫ ng

● Thẻ <table> được dùng để tạo một bảng HTML Một thẻ <table> đơn giản có

chứa một hoặc nhiều <tr>, <th> và <td>

Trong đó:

○ <tr> xác định hàng của table

○ <th> xác định phần tử tiêu đề của table

○ <td> xác định phần tử nội dung của table

Một table phức tạp có thể bao gồm nhiều thành phần khác, gồm: <caption>, <col>,

<colgroup>, <thead>,<tfoot>, và <tbody>

○ <form> cũng có thể chứa thành phần <select>, <textarea>, <fieldset>,

<legend> và <label> Bên trong form cũng có thể chứa các thẻ khác

Các ký t͹ ÿ ̿c bi͏ t

● Một số ký tự có ý nghĩa đặc biệt trong HTML, chẳng hạn như dấu nhỏ hơn „<‟ cho biết điểm bắt đầu của một thẻ HTML Phần dưới đây trình bày cách chèn những ký tự này vào nội dung trang web như những ký tự thông thường khác

● Một ký tự đặc biệt được biểu diễn gồm 3 phần: dấu ampersand „&‟, phần tên thực thể được quy định trước hoặc dấu „#‟ và số hiệu thực thể (cũng được quy định trước), và cuối cùng là dấu chấm phẩy „;‟

CSS – Viết tắt từ Cascading Style Sheet – là ngôn ngữ được dùng để mô tả cách

trình bày tài liệu viết bằng ngôn ngữ HTML và XHTML, …và một số ngôn ngữ khác

Nó là một dạng file text với thành phần mở rộng là css, trong file này sẽ chứa những câu lệnh CSS, định dạng cho các thành phần HTML [9]

<span style="font-weight:bold; text-decoration:underline; color:#FFFFFF;"> Đoạn

text cần in đậm, gạch chân, màu trắng </span>

Ɣ Cách 2: nhúng vào đầu mỗi trang: Đặt CSS ở đầu trang web để áp dụng kiểu

dáng cho toàn bộ trang ấy, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ <style> rồi

đặt vào trong phần header của web (giữa <head> và </head>):

Ví dụ:

<styletype="text/css">

body {font-family: georgia;color:#0000FF;} /* Kiểu chữ trong trang Web là " georgia

", màu chữ là màu xanh dương*/

</style>

Ɣ Cách 3: gọi 1 tệp từ ngoài vào: Đặt các thuộc tính CSS vào một tệp tin riêng biệt

(*.css), khi đó có thể tham chiếu đến từ nhiều trang web khác nhau:

Ví dụ:

<link rel="stylesheet" type="text/css" href="style.css">

Mức độ ưu tiên của CSS: gọi tệp css từ ngoài vào < nhúng vào đầu mỗi trang < nhúng ngay trong thành phần

1.3 Twitter Bootstrap

1.3.1 Lý do sử dụng Twitter Bootstrap

Twitter Bootstrap giúp chúng ta giảm thiểu thời gian thiết kết html và css Twitter Bootstrap định nghĩa sẵn các class, công việc của chúng ta chỉ là sử dụng các class đó vào mục đích của mình Twitter Bootstrap còn hỗ trợ Responsive design một cách làm giao diện đa thiết bị rất được ưu chuộng trong thời gian gần đây [9]

1.3.2 Sơ lƣợc về Twitter Bootstrap

Bộ công cụ Twitter Bootstrap được tạo bởi Twitter giúp bạn làm CSS nhanh hơn khi bắt đầu phát triển một website mới

Twitter Bootstrap bao gồm các mã CSS + HTML cơ bản cho typography, forms, buttons, tables, grids, navigation, và nhiều thành phần khác của website

Twitter Bootstrap cung cấp lưới cố định (fixed) rộng 940px và 16 cột Tất nhiên là cũng có giải pháp cho việc dùng bố trí dạng động (fluid)

Style của các phần tử HTML trong Twitter Bootstrap khá đơn giản và thanh lịch Ví

dụ như phần đổ bóng trong input, highlight của bảng biểu, các mã CSS hiển thị cảnh báo, tabs, phân trang

1.3.3 Cách sử dụng

Hiện tại có 2 cách sử dụng đó là tham chiếu trực tiếp đến server chứa tệp css hoặc tải gói bootstrap về rồi để trên host mình trong quá trình thiết kế

Và thêm một tệp CSS vào header của trang web:

<link rel="stylesheet"href="http://twitter.github.com/bootstrap/assets/css/bootstrap-3.0.0.min.css">

Sau đó thử các thành phần như h1, h2, table, form trên tệp HTML Phần hướng dẫn chi tiết tên class, cách dụng grid có thể xem tại http://twitter.github.com/bootstrap/

1.4 JavaScript

1.4.1 Khái niệm

JavaScript là 1 ngôn ngữ dạng script thường được sử dụng cho viê ̣c lâ ̣p trình web ở phía client Nó tuân theo chuẩn ECMAScript Nó là 1 ngôn ngữ linh động , cú pháp dễ sử dụng như các ngôn ngữ khác và dễ dàng lập trình JavaScript không hề liên quan tới ngôn ngữ lâ ̣p trình Java , được hầu hết các trình duyê ̣t ngày nay hỗ trợ Với JavaScript, ứng dụng web của bạn sẽ trở nên vô cùng sinh động , mang tính trực quan

dòng JavaScript nào thích hợp sẽ được coi là một câu lệnh hợp lệ (giống như có dấu chấm phẩy trước ký tự dòng mới)

Tuy trong phần lớn trường hợp, dấu chấm phẩy trước khi kết thúc một dòng JavaScript

là không cần thiết để đoạn mã nguồn hoạt động chính xác, lập trình viên nên sử dụng dấu chấm phẩy sau mỗi câu lệnh để đoạn mã nguồn dễ nhìn hơn Ngoài ra, do đặc thù của JavaScript - chuyên dùng trên trang web, kích cỡ của đoạn mã nguồn là quan trọng,

có một số phần mềm có thể làm giảm kích cỡ của đoạn mã nguồn JavaScript bằng cách

bỏ đi những khoảng trắng không cần thiết, để những phần mềm này hoạt động chính xác, lập trình viên cần thêm dấu chấm phẩy vào cuối mỗi câu lệnh [2]

<script type=”text/javascript”>

var tên_biến;

</script>

Ngoài ra, lập trình viên có thể chỉ việc gán cho biến một giá trị để sử dụng biến

đó Biến được định nghĩa ngoài tất cả các hàm hoặc được sử dụng mà không khai báo với cú pháp var sẽ được coi là biến toàn cục, những biến này có thể sử dụng trên toàn trang web Biến được khai báo với var bên trong một hàm là biến cục bộ của hàm đó và

chỉ có thể sử dụng được bên trong hàm đó

1.4.2.4 Đối tƣợng

Kiểu của JavaScript được chia ra làm hai loại: kiểu cơ bản và đối tượng Đối tượng trong JavaScript là một thực thể có tên xác định và có thuộc tính trỏ đến giá trị, hàm hoặc cũng có thể là một đối tượng khác Có nghĩa là, đối tượng trong JavaScript là một mảng kết hợp (associative array)

JavaScript có một số đối tượng định nghĩa sẵn, bao gồm mảng (Array), đối tượng đại số bool (Boolean), đối tượng ngày tháng (Date), đối tượng hàm (Function), đối tượng toán học (Math), đối tượng số (Number), đối tượng đối tượng (Object), đối tượng biểu thức tìm kiếm (RegExp) và đối tượng chuỗi ký tự (String) Các đối tượng khác là đối tượng thuộc phần mềm chủ (phần mềm áp dụng JavaScript - thường là trình duyệt)

Bằng cách định nghĩa hàm khởi tạo, lập trình viên có thể tạo đối tượng JavaScript là một ngôn ngữ lập trình dựa trên nguyên mẫu do đó thừa kế diễn ra giữa các đối tượng, không phải giữa các lớp (JavaScript không hề có lớp) Đối tượng thừa kế thuộc tính từ các nguyên mẫu của chúng

Ta có thể thêm hoặc xóa thuộc tính hoặc hàm trong đối tượng sau khi đối tượng

đã được tạo Để làm việc này cho tất cả các đối tượng được tạo từ cùng một hàm khởi tạo, có thể sử dụng thuộc tính prototype của hàm khởi tạo để truy cập đối tượng nguyên mẫu Lập trình viên không nhất thiết phải tự xóa các đối tượng đã tạo, JavaScript tự động gom rác tất cả những biến không còn được dùng nữa [2]

1.4.2.5 Cấu trúc dữ liệu

Một cấu trúc dữ liệu tiêu điểm là mảng (Array), mảng trong JavaScript là một bảng liên kết chỉ mục đến giá trị Trong JavaScript, tất cả các đối tượng đều có thể liên

kết chỉ mục đến giá trị, nhưng mảng là một đối tượng đặc biệt có thêm nhiều tính năng

xử lý chỉ mục và dữ liệu đặc biệt (ví dụ: push, join, v.v.)

Mảng trong JavaScript có thuộc tính length Thuộc tính length của JavaScript luôn luôn lớn hơn số chỉ mục lớn nhất trong mảng một đơn vị Trong phần lớn ngôn ngữ lập trình, những thuộc tính có tính năng như length thường là thuộc tính chỉ đọc, tuy nhiên, với JavaScript, lập trình viên có thể thay đổi thuộc tính length Bằng cách thay đổi thuộc tính length, lập trình viên có thể làm mảng lớn hơn hoặc nhỏ hơn (và xóa

đi những chỉ mục lớn hơn hoặc bằng thuộc tính length mới)

1.4.3 Cách nhúng JavaScript vào trang HTML

Có 3 cách để nhúng JavaScript vào trang HTML

Ɣ Cách 1: Nhúng trực tiếp trong trang HTML hoặc khai báo trong thành phần

Giả sử bạn có một tập tin JavaScript dài và phức tạp và tệp này cần đặt trong tất

cả các trang HTML Nếu như trang nào bạn cũng phải chèn đoạn mã như phương pháp

1 thì mất nhiều thời gian và phải kiểm tra đoạn mã Để giảm kích thước của trang web

và đỡ tốn thời gian, JavaScript cho chúng ta 1 phương pháp chèn đoạn mã JavaScript bằng cách gọi từ ngoài vào Muốn gọi tập tin JavaScript, trước hết tập tin đó phải có phần mở rộng là js Và trong tập tin này không được chứa thẻ mở và đóng

<script></script>

xCách 3: Nhúng trong câu

Ngoài hai phương pháp trên dành cho các đoạn mã JavaScript dài và phức tạp, JavaScript cung cấp 1 phương pháp đơn giản dành cho việc xử lý sự kiện hoặc gọi các đối tượng như JavaScript: window.location

1.5 Tìm hiểu về jQuery

1.5.1 Khái niệm

jQuery là thư viện JavaScript, hay còn gọi là JavaScript Framework, hỗ trợ việc

xử lý các sự kiện trong trang HTML, tạo các hiệu ứng đẹp, xử lý Ajax nhanh và ngắn gọn hơn cho ứng dụng website của người sử dụng

1.5.2 Cách áp dụng jQuery vào trang web

● Tự tạo host jQuery

Vào trang chủ của jQuery và download phiên bản mới nhất Thường thì có 2 phiên bản của jQuery cho bạn download Phiên bản chưa nén dành cho những người phát triển và đang học như bạn Còn phiên bản nén kia dành cho phần sử dụng trực tiếp trên trang vì nó có dung lượng nhỏ hơn rất nhiều so với phiên bản chưa nén Bạn không cần phải cài đặt jQuery, bạn chỉ cần đặt đường link tới thư viện đó là được Bất cứ khi nào bạn cần sử dụng jQuery, bạn chỉ cần gọi nó trong tài liệu HTML đến nơi lưu trữ nó trên host của bạn

● Dùng phiên bản có sẵn trên server của Google

Sử dụng phiên bản có sẵn trên server của Google mà không cần phải download

về máy Cú pháp để chèn jQuery sử dụng file có sẵn trên server của Google như sau:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

type="text/javascript" />

1.6 Node.js

1.6.1 Giới thiệu về Node.js

JavaScript trước đây chỉ chạy được trên trình duyệt web Nhưng gần đây nó được dùng ở phía server Có những môi trường JavaScript ở phía server như là Jaxer và Narwhal, tuy nhiên Node.js có một chút khác biệt so với những cái trên Bởi vì nó dựa trên sự kiện hơn là dựa theo luồng (thread) Các máy chủ Web như Apache thường xử

lý PHP và các script CGI (Common Gateway Interface) khác dựa theo luồng bởi chúng sinh ra một hệ thống luồng cho mỗi request đến Trong khi cách đó là ổn cho rất nhiều ứng dụng thì các mô hình dựa theo luồng không thể mở rộng một cách có hiệu quả với nhiều kết nối tồn tại lâu Ví dụ như bạn muốn dùng các dịch vụ thời gian thực như Friendfeed hay Google Wave [3]

Node.js, sử dụng một sự kiện lặp thay cho các luồng, và nó có thể mở rộng lên hàng triệu kết nối một lúc Điều này rất có lợi vì thực tế các máy chủ sử dụng phần lớn thời gian vào việc đợi các xử lý vào ra (ví dụ như đọc một file từ ổ cứng, truy vấn đến một dịch vụ web bên ngoài hoặc là đợi file được tải lên hoàn tất) bởi vì các xử lý đó chậm hơn rất nhiều so với xử lý bộ nhớ Với kiến trúc hướng sự kiện thì lượng bộ nhớ dùng ít hơn, lưu lượng tăng cao và mô hình lập trình thì đơn giản hơn

Mỗi một xử lý vào ra trong Node.js là không đồng bộ, nghĩa là máy chủ có thể tiếp tục xử lý các request đến trong khi các xử lý vào ra đang diễn ra JavaScript mà một ngôn ngữ phù hợp cho việc lập trình hướng sự kiện bởi vì nó có các hàm không

đồng bộ và sự bao đống cái mà tạo ra một hàm callbacks đảm bảo Mô hình hướng sự kiện khiến cho Node.js chạy rất nhanh và có thể triển khai và mở rộng cho các ứng dụng thời gian thực một cách dễ dàng Một lợi ích lớn lao của Node.js đó là nó được viết bằng JavaScript Nó cũng hỗ trợ các hệ NoSQL dùng JavaScript để truy vấn Từ đây ta chỉ cần học một ngôn ngữ là JavaScript để thực thi từ phía trình duyệt, phía webserver và cả cho database server [3]

1.6.2 Node Package Manager (NPM)

1.6.2.1 Giới thiệu về npm

Được viết tắt bởi Node Package Manager (Trình quản lý gói của Node.js) Nó vừa là một trình quản lý gói vừa là một hệ thống phân tán phục vụ cho Node.js Mục đích chính của nó là tạo ra và phân phối các gói Node, các module qua internet sử dụng dòng lệnh Với npm chúng ta có thể dễ dàng tìm các module một cách tự động qua mạng Chỉ với một câu lệnh, ta có thể tải, cài và sử dụng các module [3]

1.6.2.2 Định dạng gói cài NPM

Một gói cài npm miêu tả cấu trúc thư mục của nó ở trong file package.json Nó bao gồm tên gói, phiên bản, cấu trúc các cấp của thư mục bên trong gói cài, các module nào cần thiết, phụ thuộc cần phải cài trước

Một file package.json đơn giản nhất sẽ có cấu trúc như dưới:

{ name: "PackageA",

version: "1.0", main: "mainModuleName", modules: {

"module1": "abc/module1",

"module2": "abc/module2"

} }

Hai thẻ quan trọng nhất trong file này là thẻ name và thẻ version Thẻ name sẽ miêu tả tên của gói và được dùng để tìm gói dễ dàng hơn

#npm search packageName

Ở đây package name chính là tên trong thẻ name Thẻ version là thẻ khai báo tên phiên bản của gói cài Mặc định npm nếu không có các tham số nó sẽ tải gói cài với phiên bản mới nhất

Trong một module trong Node.js cũng có thể đi kèm các module phụ thuộc nó Khai báo trong file json thì npm sẽ tự động cài các module khác đi kèm với module đó Khai báo các gói phụ thuộc như sau:

Nhưng nếu bạn không nhớ đầy đủ tên module mà chỉ nhớ một phần tên thì sao Ngoài việc vào trang http://search.npmjs.org thì bạn có thể dùng npm để cài

#npm search key_name

Sau khi cài đặt module, để tìm kiếm tài liệu hướng dẫn, trang chủ của module

đó, hoặc thông tin chi tiết về module này thì ngoài việc vào file package.json của chính module đó, ta có thể dùng npm:

#npm view moduleName

Nếu muốn tìm chi tiết hơn ví dụ là tìm trang chủ hay phiên bản của module:

#npm view moduleName version

1.6.3 Express Framework

Express là một web module cho Node.js Các web app thường dùng chung một

số cấu trúc nhất định nên ta có thể lập trình và viết app nhanh hơn khi sử dụng module Express

Với Express ta có thể tạo:

x Website quảng cáo đơn giản

x Web app phức tạp

Ưu điểm của Express:

x Trong module Express đã có sẵn các chức năng như: routing, templating nên ta không cần phải tốn thời gian viết code cho những phần này

Để cài đặt Express ta có thể dùng lệnh sau:

x #npm install -g express

Cấu trúc của 1 Express:

x app.js: là tập tin chương trình ta sử dụng để khởi động, nó chứa các lệnh khởi tạo chương trình

x node_modules: là một thư mục chứa các module thư viện mà chương

trình của chúng ta sử dụng (Những module này được liệt kê trong tập tin package.json)

x package.json: là một tập tin chứa các thông tin về các module mà chương trình của ta sử dụng Tập tin này có thể chứa các thông tin như: tên chương trình, tác giả, url,

x public: là thư mục chứa các tập tin mà client có thể lấy trực tiếp Ta có thể thêm các tập tin CSS, JavaScript và các hình ảnh vào mục này Thư mục không chứa các tập tin server script, đây là cách làm tăng tính bảo mật

x routes: là một thư mục chứa các đường dẫn

x views: là thư mục chứa các tập tin layout cho chương trình

Để sử dụng nó chúng ta sẽ khai báo như sau:

var mysql = require('mysql');

var connection = mysql.createConnection({

connection.query('SELECT * FROM table', function(err, rows, fields) {

if (err) throw err;

console.log(rows);

});

connection.end();

1.7 MySQL

Sự bùng nổ của công nghệ thiết kế website đưa đến sự thay thế website tĩnh

bằng website động Website động tạo ra cho người dùng khả năng tương tác với nó,

đồng thời cũng giúp người chủ website có thể quản lý nội dung trên website dễ dàng và

linh hoạt hơn Một website động cần phải có cơ sở dữ liệu (database), là nơi lưu trữ, tổ

chức và phân loại toàn bộ những thông tin trên website một cách có hệ thống

1.7.1 Khái niệm

+uQK%L͋XW˱ͫQJ0\64/VHUYHU

MySQL là hệ quản trị cơ sở dữ liệu mã nguồn mở phổ biến nhất thế giới và

được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng Vì MySQL

là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên

nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh Với tốc độ và

tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên

internet

Có thể download tại địa chỉ: http://www.mysql.com/downloads/

Ɣ Tính thực thi cao

Kiến trúc storage-engine (công cụ lưu trữ) cho phép các chuyên gia cơ sở dữ liệu cấu hình máy chủ cơ sở dữ liệu MySQL đặc trưng cho các ứng dụng đặc thù Dù ứng dụng là một hệ thống xử lý giao dịch tốc độ cao hay website dung lượng lớn phục

vụ hàng triệu yêu cầu mỗi ngày, MySQL có thể đáp ứng khả năng xử lý những đòi hỏi khắt khe nhất của bất kì hệ thống nào Với các tiện ích tải tốc độ cao, đặc biệt bộ nhớ caches, và các cơ chế xử lý nâng cao khác

Ɣ Có thể sử dụng ngay

Sự đáng tin cậy cao và tính “sử dụng ngay” là những tiêu chuẩn đảm bảo của MySQL MySQL đưa ra nhiều tùy chọn có thể dùng ngay từ cấu hình tái tạo server/client tốc độ cao, để các nhà phân phối thứ 3 đưa ra những giải pháp có thể dùng ngay duy nhất cho server cơ sở dữ liệu MySQL

Ɣ Hỗ trợ giao dịch mạnh

MySQL đưa ra một trong số những công cụ giao dịch cơ sở dữ liệu mạnh nhất trên thị trường Các đặc trưng bao gồm hỗ trợ giao dịch ACID hoàn thiện ( Atomic – tự động, Consistent – thống nhất, Isolated – độc lập, Durable – bền vững), khóa mức dòng không hạn chế, khả năng giao dịch được phân loại, và hỗ trợ giao dịch đa dạng (multi-

toàn vẹn của dữ liệu cũng phải được bảo đảm trong suốt quá trình server có hiệu lực, các mức giao dịch độc lập được chuyên môn hóa, và phát hiện khóa chết ngay lập tức

Ɣ Nơi lưu trữ Website và dữ liệu đáng tin cậy

MySQL là nhà máy chuẩn cho các websites phải trao đổi thường xuyên vì nó có công cụ xử lý tốc độ cao, khả năng chèn dữ liệu nhanh, và hỗ trợ mạnh cho các chức năng chuyên dụng của website như tìm kiếm văn bản nhanh Những tính năng này cũng được áp dụng cho môi trường lưu trữ dữ liệu mà MySQL tăng cường đến hàng terabyte cho các server đơn

Ɣ Chế độ bảo mật dữ liệu mạnh

Vì bảo mật dữ liệu cho một công ty là công việc số một của các chuyên gia về

cơ sở dữ liệu, MySQL đưa ra tính năng bảo mật đặc biệt chắc chắn dữ liệu sẽ được bảo mật tuyệt đối Trong việc xác nhận truy cập cơ sở dữ liệu, MySQL cung cấp các kĩ thuật mạnh mà chắc chắn chỉ có người sử dụng đã được xác nhận mới có thể truy nhập được vào server cơ sở dữ liệu, với khả năng này để chặn người dùng ngay từ mức máy khách là điều có thể làm được

Ɣ Dễ dàng quản lý

MySQL cài đặt khá nhanh với thời gian ở mức trung bình từ lúc tải phần mềm đến khi cài đặt hoàn thành chỉ mất chưa đầy 15 phút Điều này đúng cho dù nền tảng là Microsoft Windows, Linux, Macintosh hay Unix Khi đã được cài đặt, tính năng tự quản lý như tự động mở rộng không gian, tự khởi động lại, và cấu hình động sẵn sàng cho người quản trị cơ sở dữ liệu làm việc

1.8 jQuerymobile

1.8.1 Giới thiệu về jQuerymobile

jQuerymobile là một thư viện web dành riêng cho smartphones & tablets jQuerymobile đã được tối ưu với việc sử dụng cảm ứng chạm trên điện thoại Được xây dựng với thư viện jQuery của JavaScript và jQuery UI, jQuerymobile làm tốt việc hiển

thị giao diện người dùng trên tất cả các hệ điều hành điện thoại thông dụng (iOS, android, BlackBerry OS, Windows Phone, symbian )

1.8.2 jQuerymobile hỗ trợ các nền tảng di động

jQuery mobile hiện đang cung cấp sự hỗ trợ cho các nền tảng di động sau đây:

Ɣ Apple® iOS: iPhone, iPod Touch, iPad (tất cả các phiên bản)

Ɣ Android™: tất cả các thiết bị (tất cả các phiên bản)

Ɣ Blackberry®: Torch (phiên bản 6)

Ɣ Palm™: WebOS Pre, Pixi

Ɣ Nokia®: N900 (đang xây dựng)