Tìm hiểu ruby on rails và xây dựng website “học tiếng anh cho trẻ em từ 6 – 10 tuổi”

ẻ ...: Định nghĩa thành phần gốc root của trang ẻ ...: Định nghĩa thành phần gốc root của trang ● Th ...: Đ nh nghĩa thông tin v tài li u HTML, thẻ ...: Định nghĩa thành phần gốc root củ

M C L C ỤC LỤC ỤC LỤC

MỤC LỤC ii

DANH MỤC HÌNH ẢNH iv

DANH MỤC BẢNG v

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

MỞ ĐẦU 0

1 LÝ DO CHỌN ĐỀ TÀI 1

2 MỤC TIÊU NGHIÊN CỨU 1

3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 1

3.1 Đối tượng nghiên cứu 1

3.2 Phạm vi nghiên cứu 2

BỐ CỤC 3

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 4

1.1 HTML 4

1.1.1 Khái niệm HTML 4

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

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

1.1.4 Các thẻ cơ bản 5

1.2 CSS 7

1.2.1 Khái niệm CSS 7

1.2.2 Cú pháp CSS 7

1.2.3 Cách khai báo CSS 7

1.3 BOOTSTRAP 8

1.3.1 Giới thiệu về Bootstrap 8

1.3.2 Ưu điểm của Bootstrap 8

1.4 MySQL 8

1.4.1 MySQL là gì? 8

1.4.2 Tại sao lại sử dụng MySQL? 9

1.4.3 Cấp quyền cho người dùng 10

1.5 JAVASCRIPT 10

1.5.1 Khái niệm 10

1.5.2 Cú pháp 10

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

1.6 RUBY 12

1.6.1 Ruby là gì? 12

1.6.2 Ưu điểm của Ruby 13

1.6.3 Cú pháp 13

1.7 RUBY ON RAILS 14

1.7.1 Ruby on Rails là gì? 14

1.7.2 Các tính năng và ưu điểm của Ruby on Rails 15

1.7.3 So sánh Ruby on Rails với các công nghệ hiện có 16

1.7.4 Cài đặt và sử dụng Rails 16

CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 17

2.1 CHỨC NĂNG CHÍNH CỦA WEBSITE 17

2.2 ĐẶC TẢ YÊU CẦU 17

2.2.1 Yêu cầu chức năng 17

2.2.2 Yêu cầu phi chức năng 18

2.3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE 18

2.3.1 Phân tích hệ thống 19

2.3.1.1 Biểu đồ ca sử dụng 19

2.3.1.2 Đặc tả ca sử dụng 21

2.3.1.3 Biểu đồ hoạt động 24

2.3.2 Thiết kế hệ thống 28

2.3.2.1 Biểu đồ lớp 28

2.3.2.2 Biểu đồ tuần tự 28

2.3.2.3 Thiết kế cơ sở dữ liệu 30

CHƯƠNG 3 TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ 37

1 MÔI TRƯỜNG, CÔNG CỤ SỬ DỤNG 37

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 44

1 KẾT QUẢ ĐẠT ĐƯỢC 44

2 HẠN CHẾ 44

3 HƯỚNG PHÁT TRIỂN 44

TÓM TẮT KẾT QUẢ ĐỒ ÁN TỐT NGHIỆP Error! Bookmark not defined.

TÀI LIỆU THAM KHẢO Error! Bookmark not defined.

DANH M C HÌNH NH ỤC LỤC ẢNH

Hình 1.1 Mô hình MVC trong Rails 15

Hình 2.1 Sơ đồ thể hiện chức năng chính cho hệ thống 17

Hình 2.2 Sơ đồ ca sử dụng hệ thống 19

Hình 2.2 Sơ đồ ca sử dụng tham gia học phát âm 20

Hình 2.3 Sơ đồ ca sử dụng tham gia học từ vựng 20

Hình 2.4 Sơ đồ ca sử dụng tham gia học theo các chủ đề 21

Hình 2.5 Sơ đồ ca sử dụng tham gia giải trí 21

Hình 2.6 Sơ đồ hoạt động tham gia học phát âm 25

Hình 2.7 Sơ đồ hoạt động tham gia học từ vựng 26

Hình 2.8 Sơ đồ hoạt động tham gia học qua các chủ đề 26

Hình 2.9 Sơ đồ hoạt động tham gia giải trí 27

Hình 2.10 Sơ đồ lớp 28

Hình 2.11 Sơ đồ tuần tự học phát âm 29

Hình 2.12 Sơ đồ tuần tự học từ vựng 29

Hình 2.13 Sơ đồ tuần tự học theo các chủ đề 30

Hình 2.14 Sơ đồ tuần tự tham gia giải trí 30

Hình 2.15 Sơ đồ thực thể quan hệ 31

Hình 2.16 Lược đồ quan hệ 32

Hình 3.1 Trang chủ 38

Hình 3.2 Trang từ vựng 38

Hình 3.3 Trang chi tiết từ vựng 39

Hình 3.4 Form đăng ký 39

Hình 3.5 Danh sách các chủ đề 40

Hình 3.6 Danh mục trang chủ đề 40

Hình 3.7 Trang học từ vựng theo chủ đề 41

Hình 3.8 Bài luyện viết 41

Hình 3.9 Xuất thông báo 42

Hình 3.10 Trang học phát âm 42

Hình 3.11 Trang giải trí 43

DANH M C B NG ỤC LỤC ẢNH

Bảng 1.1 Cấu trúc của một tài liệu HTML 4

Bảng 1.2 Cú pháp CSS 7

Bảng 1.3 Cấp quyền cho người dùng trong MySQL 10

Bảng 1.4 Cách nhúng JavaScript vào trang HTML 12

Bảng 1.5 Toán tử trong Ruby 13

Bảng 2.1 Bảng mô tả ca sử dụng học phát âm 22

Bảng 2.2 Bảng mô tả ca sử dụng học phát âm 22

Bảng 2.3 Bảng mô tả ca sử dụng học từ vựng 22

Bảng 2.4 Bảng mô tả các sự kiện chính của hoạt động học từ vựng 23

Bảng 2.5 Bảng mô tả ca sử dụng học theo các chủ đề 23

Bảng 2.6 Bảng mô tả các sự kiện chính của hoạt động học theo các chủ đề 23

Bảng 2.7 Bảng mô tả ca sử dụng tham gia giải trí 24

Bảng 2.8 Bảng mô tả các sự kiện chính của hoạt động tham gia giả trí 24

Bảng 2.9 Bảng mô tả các phương thức 28

Bảng 2.10 Bảng mô tả các thuộc tính của pronunciations 32

Bảng 2.11 Bảng mô tả các thuộc tính của subjects 33

Bảng 2.2 Bảng mô tả các thuộc tính của vocabularies 33

Bảng 2.13 Bảng mô tả các thuộc tính của parts 33

Bảng 2.14 Bảng mô tả các thuộc tính của details 34

Bảng 2.15 Bảng mô tả các thuộc tính của pronunciation_examples 34

Bảng 2.16 Bảng mô tả các thuộc tính của vocabulary_examples 35

Bảng 2.17 Bảng mô tả các thuộc tính của quizzes 36

Bảng 2.18 Bảng mô tả các thuộc tính của sub_quizzes 36

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

T Vi t T t ừ Viết Tắt ết Tắt ắt Ý Nghĩa

ECMAScript Scripting languageInternational standardized by Ecma

M Đ U Ở ĐẦU ẦU

1 LÝ DO CHỌN ĐỀ TÀI

Ngày nay khoa học và xã hội ngày càng phát triển thì tiếng anh luôn là một yêu cầu bức thiết của xã hội Bên cạnh đó ở lứa tuổi này bộ não trẻ em như một tờ giấy trắng dễ dàng tiếp thu những kiến thức xung quanh một cách nhanh chóng Dựa vào đó em muốn tạo một ứng dụng để đưa tiếng anh sơ khai vào trong não bé một cách nhanh chóng.

2 MỤC TIÊU NGHIÊN CỨU

 Áp dụng các kiến thức đã học được ở trường như:

o Cơ sở dữ liệu

o Hệ quản trị cơ sở dữ liệu (MySQL)

o Phân tích và thiết kế hệ thống thông tin

o Công cụ và môi trường phát triển phần mềm

o Trí tuệ nhân tạo

 Tìm hiểu các thông tin về website dành cho trẻ em:

o Thông tin về website tiếng anh dành cho trẻ em từ 6-10 tuổi

o Thông tin về cách học từ vựng dành cho trẻ em

o Thông tin về cách học phát âm dành cho trẻ em

o Thông tin về cách học qua các chủ đề dành cho trẻ em

o Thông tin về các bài hát, câu chuyện phù hợp với lứa tuổi từ 6-10 tuổi

 Đi sâu nghiên cứu, phân tích và xây dựng một hệ thống hoàn chỉnh

3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU

3.1 Đối tượng nghiên cứu

 Khách thể nghiên cứu:

o Trẻ em từ 6-10 tuổi

o Giáo trình Let’s go, Pronunciation in use

o Các phương thức của ruby on rails để xây dựng lên website

 Đối tượng nghiên cứu:

o Thông tin về học từ vựng, phát âm, học qua các chủ đề và qua các bàihát, truyện kể, phim

 Địa điểm:

o Nghiên cứu và tìm hiểu thông tin giảng dạy theo giáo trình Let’s go 1

và Let’s go start về từ vựng và các chủ đề phù hợp với trẻ em từ 6-10 tuổi

o Nghiên cứu và tìm hiểu cách giảng dạy về cách phát âm cho trẻ emtrong giáo trình “Pronunciation in use”

BỐ CỤC

1 CHƯƠNG 1 CƠ SỞ LÝ THUYẾT

Trình bày cơ sở lý thuyết được áp dụng trong quá trình thực hiện như là: bênfontend là HTML, CSS, JavaScript, Jquery về khái niệm, cấu trúc văn bản, cú pháptrình bày Bên backend như là MySQL, Ruby on rails về cách cài đặt ban đầu và

cú pháp ngôn ngữ Ruby cũng như ưu điểm, khuyết điểm của framework Rails

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

Đây là nơi phân tích các chức năng chính của website thông qua sơ đồ Xmind

và đặc tả các yêu cầu để làm rõ hệ thống bằng các yêu cầu chức năng và phi chức năng Phân tích hệ thống áp dụng phân tích theo hướng đối tượng được biểu hiện qua các sơ đồ ca sử dụng, sơ đồ hoạt động, sơ đồ lớp, sơ đồ tuần tự và phân tích cơ

sở dữ liệu

3 CHƯƠNG 3 TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ

Nơi miêu tả môi trường, công cụ thực hiện để tạo nên ứng dụng cũng như kếtquả đạt được trong xuất quá trình thực hiện đồ án và các hạn chế, ưu điểm và hướngphát triển trong tương lai có thể thực hiện được

CH ƯƠNG 1 NG 1 C S LÝ THUY T ƠNG 1 Ở ĐẦU ẾT TẮT1.1 HTML

1.1.1. Khái niệm HTML

HTML (viết tắt của HyperText Markup Language, "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ớicá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 (Standard Generalized Markup Language) 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 WebConsortium (W3C) duy trì Phiên bản chính thức mới nhất của HTML làHTML5 (tháng 12 năm 2012) HTML5 vẫn giữ lại những đặc điểm cơ bản của

HTML4 và bổ sung thêm các đặc tả nổi trội của XHTML (Extensible HyperText Markup Language, "Ngôn ngữ Đánh dấu Siêu văn bản Mở rộng"), DOM (Document Object Model, "Mô hình Đối tượng Tài liệu") cấp 2, đặc biệt là

JavaScript

1.1.2. Cấu trúc của một 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> nằm bên trong thẻ <html></html> chứa các thông tinhiển thị ở thanh điều hướng của trình duyệt web và các thông tin về trang web

● Phần <body> </body> nằm trong thẻ <html></html> và nằm sau thẻ

<head></head>, chứa nội dung trang web

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

Bảng 1.1 Cấu trúc của một tài liệu HTML

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>

Trong đó:

● <tag_name>: thẻ mở

● Nội dung: là nội dung của thành phần HTML

● </tag_name>: thẻ đóng

● attributes: các thuộc tính của thẻ

1.1.4. Các thẻ cơ bản

a Các thẻ cấu trúc

● Th <html> </html>: Đ nh nghĩa thành ph n g c (root) c a trangẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ịnh nghĩa thành phần gốc (root) của trang ần gốc (root) của trang ốc (root) của trang ủa trang

thường chứa thẻ body và thẻ head.ng ch a th body và th head.ứa thẻ body và thẻ head ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang

● Th <head> </head>: Đ nh nghĩa thông tin v tài li u HTML, thẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ịnh nghĩa thành phần gốc (root) của trang ề tài liệu HTML, thường ệu HTML, thường ường chứa thẻ body và thẻ head.ng

ch a các th title, script, style, meta, ứa thẻ body và thẻ head ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang

● Th <body> </body>: Đ nh nghĩa ph n thân c a tài li u Ch a t t cẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ịnh nghĩa thành phần gốc (root) của trang ần gốc (root) của trang ủa trang ệu HTML, thường ứa thẻ body và thẻ head ất cả ả

n i dung c a m t tài li u HTML nh văn b n, siêu liên k t, nh, ủa trang ệu HTML, thường ư ả ết, ảnh, ả

● Th <div> </div>: Đ nh nghĩa m t b ph n ho c m t ph n trong vănẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ịnh nghĩa thành phần gốc (root) của trang ận hoặc một phần trong văn ặc một phần trong văn ần gốc (root) của trang

b n HTML Thả ường chứa thẻ body và thẻ head.ng được dùng để nhóm các thành phần nội dung thành mộtc dùng đ nhóm các thành ph n n i dung thành m tể nhóm các thành phần nội dung thành một ần gốc (root) của trang

kh i đ đ nh d ng b ng CSS.ốc (root) của trang ể nhóm các thành phần nội dung thành một ịnh nghĩa thành phần gốc (root) của trang ạng bằng CSS ằng CSS

● Th <span> </span>: Đẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ược dùng để nhóm các thành phần nội dung thành một ử dụng để nhóm các thành phần trên một ụng để nhóm các thành phần trên mộtc s d ng đ nhóm các thành ph n trên m tể nhóm các thành phần nội dung thành một ần gốc (root) của trangdòng trong tài li u HTML Ta có th dùng span kèm v i css đ đ nh d ng m tệu HTML, thường ể nhóm các thành phần nội dung thành một ới css để định dạng một ể nhóm các thành phần nội dung thành một ịnh nghĩa thành phần gốc (root) của trang ạng bằng CSS

ph n n i dung trong văn b n HTML.ần gốc (root) của trang ả

b Các th meta ẻ meta

● Th <meta>: là m t thành ph n quan tr ng trong file HTML, nó ch aẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ần gốc (root) của trang ọng trong file HTML, nó chứa ứa thẻ body và thẻ head.các thông tin v file HTML đó nh tên tác gi , các t khoá, các thông tin mô tề tài liệu HTML, thường ư ả ừ khoá, các thông tin mô tả ảtrang đó, Và có th có 1 s thông tin đi u khi n trình duy t, ch đ nh cho cácể nhóm các thành phần nội dung thành một ốc (root) của trang ề tài liệu HTML, thường ể nhóm các thành phần nội dung thành một ệu HTML, thường ỉ định cho các ịnh nghĩa thành phần gốc (root) của trangmáy tìm ki m, ết, ảnh,

Th meta có có c u trúc nh sau:ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ất cả ư

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

Trong đó:

○ name là tên c a th meta.ủa trang ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang

○ content là giá tr tịnh nghĩa thành phần gốc (root) của trang ương ứng với name đó, nội dung trong contentng ng v i name đó, n i dung trong contentứa thẻ body và thẻ head ới css để định dạng một

ch có th là text ch ko th có các th HTML trong đó.ỉ định cho các ể nhóm các thành phần nội dung thành một ứa thẻ body và thẻ head ể nhóm các thành phần nội dung thành một ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang

○ scheme là đ nh d ng c a giá tr , ví d scheme=”day-month-year”ịnh nghĩa thành phần gốc (root) của trang ạng bằng CSS ủa trang ịnh nghĩa thành phần gốc (root) của trang ụng để nhóm các thành phần trên một

là đ nh d ng ngày tháng năm.ịnh nghĩa thành phần gốc (root) của trang ạng bằng CSS

Không có chu n cho nh ng thu c tính trong th meta vì v y ta có th tẩn cho những thuộc tính trong thẻ meta vì vậy ta có thể tự ững thuộc tính trong thẻ meta vì vậy ta có thể tự ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ận hoặc một phần trong văn ể nhóm các thành phần nội dung thành một ự

đ nh nghĩa tho i mái nh ng metadata ịnh nghĩa thành phần gốc (root) của trang ả ững thuộc tính trong thẻ meta vì vậy ta có thể tự

● Th <title>: Đ nh nghĩa m t tiêu đ cho tài li u HTML Th này khôngẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ịnh nghĩa thành phần gốc (root) của trang ề tài liệu HTML, thường ệu HTML, thường ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang

có thu c tính Nó là yêu c u trong t t c các tài li u HTML.ần gốc (root) của trang ất cả ả ệu HTML, thường

● Th <link />: Xác đ nh m i quan h gi a m t tài li u HTML và các tàiẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ịnh nghĩa thành phần gốc (root) của trang ốc (root) của trang ệu HTML, thường ững thuộc tính trong thẻ meta vì vậy ta có thể tự ệu HTML, thườngnguyên bên ngoài Được dùng để nhóm các thành phần nội dung thành mộtc dùng ph bi n nh t là link t i tài li u css Th <link /ổ biến nhất là link tới tài liệu css Thẻ <link / ết, ảnh, ất cả ới css để định dạng một ệu HTML, thường ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang

> được dùng để nhóm các thành phần nội dung thành mộtc vi t bên trong th <head>.ết, ảnh, ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang

● Th <style >: Đ nh nghĩa thông tin v ki u đ nh d ng cho tài li u HTML.ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ịnh nghĩa thành phần gốc (root) của trang ề tài liệu HTML, thường ể nhóm các thành phần nội dung thành một ịnh nghĩa thành phần gốc (root) của trang ạng bằng CSS ệu HTML, thường

M t tài li u HTML có th ch a nhi u th <style>.ệu HTML, thường ể nhóm các thành phần nội dung thành một ứa thẻ body và thẻ head ề tài liệu HTML, thường ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang

c Các th văn b n ẻ meta ản

● Th h1- h6: Th <hx>: S d ng đ đ nh nghĩa tiêu đ cho HTML V iẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ử dụng để nhóm các thành phần trên một ụng để nhóm các thành phần trên một ể nhóm các thành phần nội dung thành một ịnh nghĩa thành phần gốc (root) của trang ề tài liệu HTML, thường ới css để định dạng một

<hx> có giá tr t <h1> t i <h6> Trong đó thành ph n quan tr ng cũng gi mịnh nghĩa thành phần gốc (root) của trang ừ khoá, các thông tin mô tả ới css để định dạng một ần gốc (root) của trang ọng trong file HTML, nó chứa ả

t <h1> t i <h6> (hay t tiêu đ l n nh t là <h1>, và tiêu đ nh nh t làừ khoá, các thông tin mô tả ới css để định dạng một ừ khoá, các thông tin mô tả ề tài liệu HTML, thường ới css để định dạng một ất cả ề tài liệu HTML, thường ỏ nhất là ất cả

<h6>) Th <h1> là thành ph n quan tr ng nh t trong trang HTML, thẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ần gốc (root) của trang ọng trong file HTML, nó chứa ất cả ường chứa thẻ body và thẻ head.ng

ngường chứa thẻ body và thẻ head.i ta s d ng <h1> cho logo, ho c dòng mô t trang web.ử dụng để nhóm các thành phần trên một ụng để nhóm các thành phần trên một ặc một phần trong văn ả

● Th <strong>, <em>: Đ nh nghĩa văn b n đ m mang ý nghĩa quan tr ngẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ịnh nghĩa thành phần gốc (root) của trang ả ận hoặc một phần trong văn ọng trong file HTML, nó chứa

ho c in nghiêng mang ý nghĩa nh n m nh v i c u trúc dòng.ặc một phần trong văn ất cả ạng bằng CSS ới css để định dạng một ất cả

● Th <br />: Dùng đ xu ng hàng, gi ng phím “Enter”.ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ể nhóm các thành phần nội dung thành một ốc (root) của trang ốc (root) của trang

● Th <p>: Đ nh nghĩa m t đo n văn b n.ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ịnh nghĩa thành phần gốc (root) của trang ạng bằng CSS ả

d Các th nh và đ i t ẻ meta ản ối tượng ượng ng

● Th <img />: Dùng đ nhúng m t image vào tài li u HTML Th <img />ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ể nhóm các thành phần nội dung thành một ệu HTML, thường ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang

có 2 thu c tính c n thi t là src và alt.ần gốc (root) của trang ết, ảnh,

Trong đó:

○ src: đường chứa thẻ body và thẻ head.ng d n tham chi u t i image.ẫn tham chiếu tới image ết, ảnh, ới css để định dạng một

○ alt: được dùng để nhóm các thành phần nội dung thành mộtc s d ng nh m t văn b n thay th khi image khôngử dụng để nhóm các thành phần trên một ụng để nhóm các thành phần trên một ư ả ết, ảnh,

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ể nhóm các thành phần nội dung thành một ịnh nghĩa thành phần gốc (root) của trang ặc một phần trong văn ẵn có thể do lỗi không hiển thi alt sẽ hiển thị ể nhóm các thành phần nội dung thành một ỗi không hiển thi alt sẽ hiển thị ể nhóm các thành phần nội dung thành một ể nhóm các thành phần nội dung thành một ịnh nghĩa thành phần gốc (root) của trangthay)

● Th <object>, <param>: Dùng đ thêm nhi u đ i tẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ể nhóm các thành phần nội dung thành một ề tài liệu HTML, thường ốc (root) của trang ược dùng để nhóm các thành phần nội dung thành mộtng nh nh, audio,ư ảvideo, vào tài li u HTML.ệu HTML, thường

e Th liên k t ẻ meta ết

● Th <a>: Xác đ nh m t siêu liên k t (hyperlink) Đẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ịnh nghĩa thành phần gốc (root) của trang ết, ảnh, ược dùng để nhóm các thành phần nội dung thành mộtc dùng đ :ể nhóm các thành phần nội dung thành một

○ Link t trang này t i trang khác.ừ khoá, các thông tin mô tả ới css để định dạng một

○ Link anchor (link neo) t v trí này t i v trí khác.ừ khoá, các thông tin mô tả ịnh nghĩa thành phần gốc (root) của trang ới css để định dạng một ịnh nghĩa thành phần gốc (root) của trang

○ Link đ m (hay download) m t file nào đó (file word, excel, pdf,ể nhóm các thành phần nội dung thành một ở (hay download) một file nào đó (file word, excel, pdf,image, ),m m t c a s hay m t object nào đó, ở (hay download) một file nào đó (file word, excel, pdf, ử dụng để nhóm các thành phần trên một ổ biến nhất là link tới tài liệu css Thẻ <link /

f Các th d ng danh sách ẻ meta ạng danh sách

● Các th <ul>, <ol>, <li>, <dl> dùng đ đ nh nghĩa ph n t d ng danhẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ể nhóm các thành phần nội dung thành một ịnh nghĩa thành phần gốc (root) của trang ần gốc (root) của trang ử dụng để nhóm các thành phần trên một ạng bằng CSS.sách

● Th <ul>, <ol> đ nh nghĩa m t danh sách v i các ph n t là th <li>.ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ịnh nghĩa thành phần gốc (root) của trang ới css để định dạng một ần gốc (root) của trang ử dụng để nhóm các thành phần trên một ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang

Th dl đ nh nghĩa m t danh sách v i các ph n t là th <dt> và <dd>.ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ịnh nghĩa thành phần gốc (root) của trang ới css để định dạng một ẩn cho những thuộc tính trong thẻ meta vì vậy ta có thể tự ử dụng để nhóm các thành phần trên một ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang

g Các th d ng b ng ẻ meta ạng danh sách ản

● Th <table> đẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ược dùng để nhóm các thành phần nội dung thành mộtc dùng đ t o m t b ng HTML M t th <table> đ nể nhóm các thành phần nội dung thành một ạng bằng CSS ả ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ơng ứng với name đó, nội dung trong content

gi n có ch a m t ho c nhi u <tr>, <th> và <td>.ả ứa thẻ body và thẻ head ặc một phần trong văn ề tài liệu HTML, thường

Trong đó:

○ <tr> xác đ nh hàng c a table.ịnh nghĩa thành phần gốc (root) của trang ủa trang

○ <th> xác đ nh ph n t tiêu đ c a table.ịnh nghĩa thành phần gốc (root) của trang ần gốc (root) của trang ử dụng để nhóm các thành phần trên một ề tài liệu HTML, thường ủa trang

○ <td> xác đ nh ph n t n i dung c a table.ịnh nghĩa thành phần gốc (root) của trang ần gốc (root) của trang ử dụng để nhóm các thành phần trên một ủa trang

M t table ph c t p có th bao g m nhi u thành ph n khác, g m:ứa thẻ body và thẻ head ạng bằng CSS ể nhóm các thành phần nội dung thành một ồm nhiều thành phần khác, gồm: ề tài liệu HTML, thường ần gốc (root) của trang ồm nhiều thành phần khác, gồm:

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

h Các th form ẻ meta

● Th <form> đẻ <html> </html>: Định nghĩa thành phần gốc (root) của trang ược dùng để nhóm các thành phần nội dung thành mộtc dùng đ t o m t “hình th c” HTML cho ngể nhóm các thành phần nội dung thành một ạng bằng CSS ứa thẻ body và thẻ head ường chứa thẻ body và thẻ head.i dùng

Được dùng để nhóm các thành phần nội dung thành mộtc dùng đ truy n d li u lên máy ch ể nhóm các thành phần nội dung thành một ề tài liệu HTML, thường ững thuộc tính trong thẻ meta vì vậy ta có thể tự ệu HTML, thường ủa trang

Trong <form> b t bu c ph i có tham s action:ắt buộc phải có tham số action: ả ốc (root) của trang

○ <form action=""></form>

○ <form> có th ch a thành ph n <input /> nh trể nhóm các thành phần nội dung thành một ứa thẻ body và thẻ head ần gốc (root) của trang ư ường chứa thẻ body và thẻ head.ng text,checkbox, radio-button, button submit,

○ <form> cũng có th ch a thành ph n <select>, <textarea>,ể nhóm các thành phần nội dung thành một ứa thẻ body và thẻ head ần gốc (root) của trang

<fieldset>, <legend> và <label> Bên trong form cũng có th ch a các thể nhóm các thành phần nội dung thành một ứa thẻ body và thẻ head ẻ <html> </html>: Định nghĩa thành phần gốc (root) của trangkhác

i 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ènnhữ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ênthực thể được quy định trước hoặc dấu “#” và số hiệu thực thể (cũng được quy địnhtrước), và cuối cùng là dấu chấm phẩy “;”

CSS – Viết tắt của 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ônngữ 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

● Cách 1: nhúng ngày trong thành phần: áp dụng trực tiếp trên một đối tượngnhất định bằng thuộc tính style:

<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.1. Giới thiệu về Bootstrap

Bootstrap là một CSS Framework phổ biến nhất hiện nay do Twitter phát triểngiúp bạn làm CSS nhanh hơn khi bắt đầu phát triển một website mới

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

bố trí dạng lưới chia làm 12 cột mỗi hàng Style của các phần tử HTML trongTwitter Bootstrap khá đơn giản và thanh lịch

1.3.2. Ưu điểm của Bootstrap

● Hỗ trợ khả năng Responsive: tức là trang web sẽ tự động co giãn theo kíchthước của cửa sổ trình duyệt

● Tương thích tốt với thiết bị cỡ nhỏ

● Được tích hợp với thư viện jQuery và tương tác tốt với chuẩn HTML5 vàCSS3

Ngoài ra Bootstrap còn được cập nhật phiên bản thường xuyên, hệ thống tàiliệu hướng dẫn chi tiết, thân thiện với các công cụ tìm kiếm, tương thích trên nhiềutrình duyệt,

1.4 MySQL

1.4.1. MySQL là gì?

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

cơ sở dữ liệu trên Internet MySQL là một trong những ví dụ rất cơ bản về Hệ Quảntrị Cơ sở dữ liệu quan hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL) MySQLđược sử dụng cho việc bổ trợ PHP, Perl, và nhiều ngôn ngữ khác, nó làm nơi lưu trữnhững thông tin trên các trang web viết bằng PHP hay Perl,

1.4.2. Tại sao lại sử dụng MySQL?

MySQL là phần mềm miễn phí hoàn toàn, ổn định và có tính an toàn cao Nó

có một số ưu điểm nổi bật như:

● Tính linh hoạt

Máy chủ cơ sở dữ liệu MySQL cung cấp đặc tính linh hoạt Sự linh hoạt vềnền tảng là một đặc tính lớn của MySQL với tất cả các phiên bản của Linux,Unix và Windows đang được hỗ trợ

● 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ấttrên thị trường Tính 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áthiệ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 website 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ácchức năng chuyên dụng của website như tìm kiếm văn bản nhanh

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

MySQL đưa ra tính năng bảo mật đặc biệt, chắc chắn dữ liệu được bảo mậttuyệ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à chắc chắn chỉ có người sử dụng đã được xác nhận mới có thể truy nhậpvào server cơ sở dữ liệu

● Sự phát triển ứng dụng hỗn hợp

Một trong số các lý do khiến cho MySQL là cơ sở dữ liệu mã nguồn mở phổbiến nhất thế giới là nó cung cấp hỗ trợ hỗn hợp cho bất kỳ sự phát triển ứngdụng nào cần

● 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 hoàn thành cài đặt chỉ mất chưa đầy 15 phút Điều này đúng cho dù nềntả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ự động 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.4.3. Cấp quyền cho người dùng

Bảng 1.3 Cấp quyền cho người dùng trong MySQL

Select tables, columns Cho phép user truy vấn dữ liệu từ tableinsert tables, columns Cho phép user thêm dữ liệu vào tableupdate tables, columns Cho phép user thay đổi giá trị của dữ liệu

tồn tại trong tabledelete Tables Cho phép user xóa dữ liệu tồn tại trong

table

của table

tượng table hoặc database đã tồn tại, nhưthêm cột vào trong table đã tồn tại, thayđổi kiểu dữ liệu của cột dữ liệu

create Databases, tables Cho phép user tạo mới đối tượng table

1.5.2. Cú pháp

a Khoảng trắng

Dấu cách, tab và ký tự dòng mới sử dụng bên ngoài một chuỗi ký tự được gọi

là khoảng trắng Khoảng trắng trong JavaScript có thể ảnh hưởng trực tiếp tới ýnghĩa của câu lệnh Sử dụng phương pháp "tự động thêm dấu chấm phẩy", bất cứmột 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) 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ínhxá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.

b Chú thích

Cú pháp chú thích của JavaScript giống với C++ Lập trình viên có thể chúgiải trên nhiều dòng bằng cách bao bọc chú thích với /* và */ hoặc sử dụng // đểchú thích từ vị trí // đến hết dòng.

c Biến

Trước khi sử dụng biến trong JavaScript, lập trình viên không nhất thiết phảikhai báo biến Có hai cách để định nghĩa biến trong JavaScript, một là sử dụng cúpháp var để khai báo biến:

d Đố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 Đốitượng trong JavaScript là một thực thể có tên xác định và có thuộc tính trỏ đếngiá trị, hàm hoặc cũng có thể là một đối tượng khác Có nghĩa là, đối tượng trongJavaScript là một mảng kết hợp (associative array) JavaScript có một số đốitượ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ểuthứ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ìnhduyệ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 ragiữa các đối tượng, không phải giữa các lớp (JavaScript không hề có lớp) Đốitượ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óathuộc tính hoặc hàm trong đối tượng sau khi đối tượng đã được tạo Để làm việcnà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ụngthuộc tính prototype của hàm khởi tạo để truy cập đối tượng nguyên mẫu Lậptrình viên không nhất thiết phải tự xóa các đối tượng đã tạo, JavaScript tự độnggom rác tất cả những biến không còn được dùng nữa

e 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ộtbả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êmnhiều tính năng xử lý chỉ mục và dữ liệu đặc biệt.

1.5.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

● Cách 2: Gọi một tệp từ bên ngoài:

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 trongtấ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íchthước của trang web và đỡ tốn thời gian, JavaScript cho chúng ta 1 phương phápchèn đoạn mã JavaScript bằng cách gọi từ ngoài vào Muốn gọi tập tinJavaScript, trước hết tập tin đó phải có phần mở rộng là js Và trong tập tin nàykhông được chứa thẻ mở và đóng <script></script>

● Cá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ặcgọi các đối tượng như JavaScript: window.location

tục vẫn còn được hỗ trợ, có vẻ như là ngoài tầm vực của mọi đối tượng, nhưng thực

sự là thuộc một thể hiện của class Object tên là “main”

● Ruby được xem là một ngôn ngữ lập trình đa mẫu hình: nó cho phép bạn lậptrình dạng thủ tục, với khả năng hướng đối tượng (mọi thứ đều là đối tượng) hayhàm (nó có các hàm không tên, bao đóng, và sự mở rộng, mọi lệnh đều có giá trị trả

về, và các hàm đều trả về kết quả ước lượng cuối cùng) Nó hỗ trợ mạnh cho tự địnhkiểu, sự phản xạ và meta – programming

1.6.2. Ưu điểm của Ruby

● Sức mạnh: là sự kết hợp hoàn hảo giữa sức mạnh hướng đối tượng thuần túy

của ngôn ngữ hướng đối tượng với sức diễn đạt và sự tiện lợi của ngôn ngữ kịchbản của Perl Chương trình Ruby rất nhỏ gọn, dễ đọc

● Tính đơn giản: Cú pháp và ngữ nghĩa của nó rất trực quan và dễ đọc Các

đối tượng, số nguyên, hay các lớp vừa đủ giống với các ngôn ngữ khác

● Tính vô hình: Ruby giải phóng người lập trình khỏi sự cực nhọc trong việc

nhồi nhét các trình biên dịch Ruby luôn nằm trong “vùng kiểm soát”, do đó ta cóthể tập trung giải quyết các lỗi bằng tay

● Sẵn có: Ruby là nguồn mở nên có thể sử dụng một cách tự do đối với người

dùng hoặc người phát triển Không giống như nhiều ngôn ngữ khác, Ruby khônggiới hạn người dùng về vấn đề hệ điều hành và pháp lý

● Thư viện hỗ trợ: Ruby có một lượng lớn thư viện không thuộc thư viện lõi, hầu hết được phát hành dưới dạng gem RubyGems là hệ thống đóng gói giúp Ruby

tạo, chia sẻ và cài đặt thư viện Từ phiên bản 1.9, Ruby có kèm RubyGems vàocùng, trong khi đó những phiên bản cũ hơn thì phải cài đặt riêng

● Biến dùng trong phạm vi hẹp có thể viết tắt từ tên lớp

● Tên lớp, module: viết hoa chữ đầu mỗi từ, không dùng dấu gạch dưới, từ viếttắt thì ghi toàn bộ là chữ hoa

● Tên phương thức: trả về giá trị đúng/sai phải kết thúc bằng dấu “?”, khôngdùng “is_”, tên làm thay đổi nội bộ kết thúc bằng dấu “!”

● Tên hằng: viết hoa toàn bộ, các từ nối nhau bằng dấu gạch dưới

● Chú thích: bắt đầu bằng dấu “#” cho một dòng, chú thích một đoạn bằngcách mở đầu bằng “=begin”, kết thúc bằng “=end”

b Toán tử

Bảng 1.5 Toán tử trong Ruby

! ~ + Toán t ph đ nh, bù bit, phépử dụng để nhóm các thành phần trên một ủa trang ịnh nghĩa thành phần gốc (root) của trang c ng m t toán h ngạng bằng CSS

** Phép lũy th aừ khoá, các thông tin mô tả

- Phép tr m t toán h ngừ khoá, các thông tin mô tả ạng bằng CSS

* / % Phép nhân, chia, l y s dất cả ốc (root) của trang ư

+ - Phép c ng, tr ( hai toán h ng)ừ khoá, các thông tin mô tả ạng bằng CSS.

<< >> Phép d ch bit (trái, ph i)ịnh nghĩa thành phần gốc (root) của trang ả

< <= >= > So sánh h n kémơng ứng với name đó, nội dung trong content (ho c b ng)ặc một phần trong văn ằng CSS

== === != =~ !~ <=> So sánh b ng, so sánh ki usánh ằng CSS. ể nhóm các thành phần nội dung thành một case, so sánh khác, h p m u,ợc dùng để nhóm các thành phần nội dung thành một ẫn tham chiếu tới image so

&& Phép AND logic

D i giá tr và flip-flopả ịnh nghĩa thành phần gốc (root) của trang

?: Đi u ki nề tài liệu HTML, thường ệu HTML, thường

rescue B nghĩa ngo i lổ biến nhất là link tới tài liệu css Thẻ <link / ạng bằng CSS ệu HTML, thường

not Phép ph đ nh logic ( u tiên th p)ủa trang ịnh nghĩa thành phần gốc (root) của trang ư ất cả

and or Phép AND, OR logic ( u tiên th p)ư ất cả

c Biến

● Nhập biến: bắt đầu bằng STDOUT.fush và dùng gets.chrome

● Xuất bằng lệnh puts

● Tạo tập hợp: <tên> = (giá trị)

d Cấu trúc điều kiện

● Cấu trúc if…else và if…elsif, kết thúc bằng end

● Dùng unless x thay cho !x

● Lượt bỏ do khi dùng while/until, thay while !x bằng until x

● Dùng loop cho vòng lặp vô hạn

1.7 RUBY ON RAILS

1.7.1. Ruby on Rails là gì?

● Ruby on Rails, hay còn được gọi là Rails hoặc RoR, là một framework mãnguồn mở, viết trên nền ngôn ngữ Ruby Rails ra mắt công chúng lần đầu tiên vàonăm 2004, Rails thoạt đầu được dùng như là nền tảng cho một công cụ quản lý dự

án được đặt tên là Basecamp và được tạo ra bởi nhà phát triển web DavidHeinemeier Hansson

● Rails xây dựng trên mô hình MVC và tuân thủ triệt để mô hình này Mộttrong những quy ước bất di bất dịch của Rails chính là về cấu tạo của 3 thư mụcModels, Views và Controllers

Hình 1.1 Mô hình MVC trong Rails1.7.2. Các tính năng và ưu điểm của Ruby on Rails

● Thư viện cho các tác vụ thông thường: Rails bao gồm một máy chủ thư việngiúp đơn giản hóa việc gõ code cho các tác vụ lập trình thông thường như:validation, quản lý phiên làm việc,…

● Thư viện AJAX: một thư viện phong phú cho các chức năng của AJAX,code Ruby được sử dụng để tạo ra code AJAX

● Debugging: cung cấp chi tiết các bản ghi lỗi làm cho việc gỡ rối ứng dụngtrở nên dễ dàng hơn

● Components: các thành phần có thể được sử dụng để lưu trữ các đoạn code

● Tiết kiệm thời gian viết mã hơn so với các ngôn ngữ khác

● Việc tuân thủ chặt chẽ theo mô hình MVC giúp cho dự án được rõ ràng

● Dễ dàng sửa chữa, nâng cấp ứng dụng

● Có nhiều plugins hỗ trợ, cài đặt thêm một cách dễ dàng (chỉ cần thêm vàoGemfile rồi chạy lệnh bundle)

● Tính bảo mật được đề cao trong Ruby on Rails, các vấn đề về lỗi bảo mậtnhư SQL Injection hoặc Cross Site Scripting (XSS) đều được framework Rails dựliệu khóa

1.7.3. So sánh Ruby on Rails với các công nghệ hiện có

● Giải pháp mã nguồn mở: Hiện tại, PHP được sử dụng rộng rãi với lợi thế đơngiản dễ học, nhưng với các ứng dụng phức tạp và cấu trúc chặt chẽ, lập trình viênđều sử dụng Java Ruby on Rails dung hòa cả hai tính năng đó, vừa đơn giản, dễhọc, vừa có cấu trúc chặt chẽ

● Giải pháp thương mại: các nền J2EE và NET hiện đang được sử dụng trongcác công ty lớn với tính năng ổn định, an toàn, chặt chẽ trong việc quản lý khốilượng lớn dữ liệu Ruby on Rails có thể đảm nhận tính năng tương tự với giá thànhhạ

1.7.4. Cài đặt và sử dụng Rails

● Cài đặt bằng lệnh: gem install rails -v 4.2.0

● Dự án mới được khởi tạo chỉ bằng một dòng lệnh đơn giản:

rails new [tên dự án]

Lệnh này sẽ tự động tạo ra tất cả những thứ cơ bản nhất trong một cây thưmục hoàn chỉnh cho dự án Rails

● Sau khi tạo dự án mới, thực hiện lệnh bundle install để cài đặt các thư viện

gem

● Các lệnh chính xác cho việc khởi động máy chủ tùy thuộc vào môi trường sử

dụng Đối với máy chủ địa phương (localhost), thì lệnh này là: rails server

CH ƯƠNG 1 NG 2 PHÂN TÍCH THI T K H TH NG ẾT TẮT ẾT TẮT Ệ THỐNG ỐNG

Các chức năng chính của website được thể hiện rõ thông qua sơ đồ Xmind sau

Hình 2.1 Sơ đồ thể hiện chức năng chính cho hệ thống

2.2.1 Yêu cầu chức năng

Yêu cầu chức năng là phát biểu về về các dịch vụ/chức năng mà hệ thống cần cung cấp

Thiết kế website “học tiếng anh cho trẻ em từ 6-10 tuổi” bao gồm các yêu cầu chức năng sau:

- Người sử dụng có thể học từ vựng thông qua mục học từ vựng có trong website Được phân chia theo bảng chữ cái với hình ảnh sinh động, âm thanh rõ ràng.

- Người sử dụng có thể học theo các chủ đề trong giáo trình Let’s go dành cho trẻ em Mỗi chủ đề có các phần: luyện từ vựng, luyện viết và các bài kiểm tra phong phú

- Người sử dụng có thể học phát âm thông qua các hình ảnh, file âm thanh có trong hệ thống giúp người sử dụng có thể hình dung và tiếp thu một cách nhanh chóng

- Người sử dụng có thể giải trí thông qua mục giải trí có trong hệ thống như là: truyện kể, bài hát, phim, truyện cười

- Hệ thống cung cấp cho người sử dụng phương tiện hiển thị dễ dàng các file âm thanh, hính ảnh, tài liệu từ CSDL

- Hệ thống phải đọc được từng file âm thanh của mỗi từ, bài hát, truyện

kể, truyện cười

2.2.2 Yêu cầu phi chức năng

Yêu cầu phi chức năng là thể hiện các ràng buộc trên các dịch vụ/chức năng của hệ thống

 Yêu cầu về sản phẩm:

a Hiệu suất: Hiệu năng liên quan đến tài nguyên được sử dụng trong các điều

kiện xác định

+ Yêu cầu về thời gian: Thời gian cho phép để hệ thống phản hồi lại thông tin

đã tiếp nhận yêu cầu xử lý từ phía người sử dụng tối đa là 3 giây (s)(kết nối internet)

+ Tài nguyên sử dụng: Tài nguyên lưu trữ chiếm dụng nhỏ

b Tính khả dụng: Mức độ một hệ thống có thể hiểu được, học cách sử dụng

được và làm hài lòng người sử dụng trong các trường hợp cụ thể

+ Phù hợp với yêu cầu: Với giao diện đơn giản, hình ảnh sinh động, âm thanh

rõ ràng giúp cho người sử dụng nhất là đối với trẻ em dễ dàng tiếp thu theo đúng

độ tuổi từ 6-10 tuổi

+ Giao diện người sử dụng: Tông màu chủ đạo của giao diện là tông màu vàngnền xanh da trời nhạt Giao diện hỗ trợ 2 ngôn ngữ (Tiếng Việt + Tiếng Anh).+ Khả năng truy cập: Hệ thống được sử dụng cho người dùng là trẻ em từ 6-10tuổi

2.3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE

Hiện nay có nhiều phương pháp phân tích và thiết kế hệ thống khác nhaunhưng trong báo cáo dưới đây em xin lựa chọn phương pháp phân tích và thiết kế hệthống theo hướng đối tượng để phân tích thiết kế hệ thống cho ứng dụng

Nội dung phân tích thiết kế bao gồm biểu đồ ca sử dụng, biểu đồ tuần tự, biểu

 Giới thiệu các tác nhân

Một tác nhân xác định một tập các vai trò khi người sử dụng tương tác với hệthống Người sử dụng có thể là một tác nhân hay một hệ thống khác

Trong website “Học tiếng anh cho trẻ em từ 6-10 tuổi” có tác nhân chính làngười sử dụng

 Người sử dụng là người trực tiếp sử dụng ứng dụng, dưới đây là các ca sử

dụng của tác nhân này:

o Tham gia bài học về phát âm

o Tham gia các bài học về từ vựng

o Tham gia các bài học theo các chủ đề

o Tham gia giải trí

Hình 2.2 Sơ đồ ca sử dụng hệ thống

a Phân tích.

 Biểu đồ ca sử dụng: tham gia học phát âm

Hình 2.2 Sơ đồ ca sử dụng tham gia học phát âm

 Biểu đồ ca sử dụng: tham gia học từ vựng

Hình 2.3 Sơ đồ ca sử dụng tham gia học từ vựng