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”

MỤC LỤC

DANH MỤC HÌNH ẢNH

DANH MỤC BẢNG


DANH MỤC TỪ VIẾT TẮT
Từ Viết Tắt

Ý Nghĩa

HTML

HyperText Markup Language

CSS

PHP

Cascading Style Sheet
Scripting language standardized by Ecma
International
Hypertext Preprocessor

W3C

World Wide Web Consortium

SGML

Standard Generalized Markup Language

XSS

Cross Site Scripting

MVC

Modal-View-Controller

J2EE

Java 2 Platform, Enterprise Edition

Xmind

Mind map

CSDL

Database

ECMAScript


3


MỞ ĐẦ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
o Thiết kế và lập trình Web
o Truyền và bảo mật thông tin
o Công nghệ phần mềm

•

Nghiên cứu và tìm hiểu các công nghệ:
o HTML5
o CSS3
o JavaScript
o jQuery
o Mysql server
o Ruby on Rails

•

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

4


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ài hát,
truyện kể, phim

3.2. Phạm vi nghiên cứu
•

Đị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ẻ em trong giáo
trình “Pronunciation in use”.

5


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ên
fontend là HTML, CSS, JavaScript, Jquery về khái niệm, cấu trúc văn bản, cú pháp
trì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ết
quả đạt được trong xuất quá trình thực hiện đồ án và các hạn chế, ưu điểm và hướng
phát triển trong tương lai có thể thực hiện được.

6


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

1.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ớ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 (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 Web
Consortium (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 tin
hiể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

7


<!DOCTYPE html>
<html>
<head>

Các thẻ <meta>
</head>
<body>
Nội dung trang web
</body>
</html>

1.1.3. Cấu trúc thành phần của HTML
Các thành phần của HTML đều có thẻ mở và thẻ đóng.
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 thường

chứa thẻ body và thẻ head.
● Thẻ <head>...</head>: Định nghĩa thông tin về tài liệu HTML, thường chứa
các thẻ title, script, style, meta,...
● Thẻ <body>...</body>: Định nghĩa phần thân của tài liệu. Chứa tấ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,...
● Thẻ <div>...</div>: Định nghĩa một bộ phận hoặc một phần trong văn bản
HTML. Thường được dùng để nhóm các thành phần nội dung thành một khối để
định dạng bằng CSS.
● Thẻ <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.
b
Các thẻ meta
●
Thẻ <meta>: là một thành phần quan trọng trong file HTML, nó
chứa 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ả trang đó,... Và có thể có 1 số thông tin điều khiển trình duyệt, chỉ định cho các
máy tìm kiếm,...
Thẻ meta có có cấu trúc như sau:
<meta name="" http-equiv="" content="" scheme="" >
Trong đó:
○
name là tên của thẻ meta.

8


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 đó.
○
scheme 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.
● 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>.
c
Các thẻ văn bản
● Thẻ h1- h6: Thẻ <hx>: Sử dụng để định nghĩa tiêu đề cho HTML. Với <hx>
có giá trị từ

tới

. Trong đó thành phần quan trọng cũng giảm từ

tới

(hay từ tiêu đề lớn nhất là

, và tiêu đề nhỏ nhất là

). Thẻ

là thành phần quan trọng nhất trong trang HTML, thường người ta sử dụng

cho logo, hoặc dòng mô tả trang web.
● 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ẻ
: Dùng để xuống hàng, giống phím “Enter”.
● Thẻ

: Định nghĩa một đoạn văn bản.
d
Các thẻ ảnh và đối tượ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>, : Dùng để thêm nhiều đối tượng như ảnh, audio,
video,... vào tài liệu HTML.
e
Thẻ liên kết
● Thẻ <a>: Xác định một siêu liên kết (hyperlink). Được dùng để:
○

Link từ trang này tới trang khác.
○
Link anchor (link neo) từ vị trí này tới vị trí khác.
○
Link để 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 đó,...
f
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>.
g
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>.
○

9


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>.
h
Các thẻ form
● Thẻ <form> được dùng để tạo một “hình thức” HTML cho người dùng.

Được dùng để truyền dữ liệu lên máy chủ.
Trong <form> bắt buộc phải có tham số action:
○
<form action=""></form>.
○
<form> có thể chứa thành phần <input /> như trường text,
checkbox, radio-button, button submit,...
○
<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.
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è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 “;”.
j
Chú thích
● Chúng ta dùng thẻ chú thích để thêm các đoạn chú thích vào tài liệu HTML.
Trình duyệt web sẽ bỏ qua dòng chú thích này.
Cú pháp: