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 Platform, Enterprise Edition Xmind Mind map CSDL Database ECMAScript MỞ ĐẦU LÝ DO CHỌN ĐỀ TÀI Ngày khoa học xã hội ngày phát triển tiếng anh yêu cầu thiết xã hội Bên cạnh lứa tuổi não trẻ em tờ giấy trắng dễ dàng tiếp thu kiến thức xung quanh cách nhanh chóng Dựa vào em muốn tạo ứng dụng để đưa tiếng anh sơ khai vào não bé cách nhanh chóng MỤC TIÊU NGHIÊN CỨU • Áp dụng kiến thức học trường như: o Cơ sở liệu o Hệ quản trị sở liệu (MySQL) o Phân tích thiết kế hệ thống thông tin o Công cụ môi trường phát triển phần mềm o Trí tuệ nhân tạo o Thiết kế lập trình Web o Truyền bảo mật thông tin o Công nghệ phần mềm • Nghiên cứu tìm hiểu công nghệ: o HTML5 o CSS3 o JavaScript o jQuery o Mysql server o Ruby on Rails • Tìm hiểu thông tin website dành cho trẻ em: o Thông tin website tiếng anh dành cho trẻ em từ 6-10 tuổi o Thông tin cách học từ vựng dành cho trẻ em o Thông tin cách học phát âm dành cho trẻ em o Thông tin cách học qua chủ đề dành cho trẻ em o Thông tin 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 xây dựng hệ thống hoàn chỉnh ĐỐ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 ruby on rails để xây dựng lên website • Đối tượng nghiên cứu: o Thông tin học từ vựng, phát âm, học qua chủ đề qua hát, truyện kể, phim 3.2 Phạm vi nghiên cứu • Địa điểm: o Nghiên cứu tìm hiểu thông tin giảng dạy theo giáo trình Let’s go Let’s go start từ vựng chủ đề phù hợp với trẻ em từ 6-10 tuổi o Nghiên cứu tìm hiểu cách giảng dạy cách phát âm cho trẻ em giáo trình “Pronunciation in use” BỐ CỤC CHƯƠNG CƠ SỞ LÝ THUYẾT Trình bày sở lý thuyết áp dụng trình thực là: bên fontend HTML, CSS, JavaScript, Jquery khái niệm, cấu trúc văn bản, cú pháp trình bày Bên backend MySQL, Ruby on rails cách cài đặt ban đầu cú pháp ngôn ngữ Ruby ưu điểm, khuyết điểm framework Rails CHƯƠNG PHÂN TÍCH THIẾT KẾ HỆ THỐNG Đây nơi phân tích chức website thông qua sơ đồ Xmind đặc tả yêu cầu để làm rõ hệ thống yêu cầu chức phi chức Phân tích hệ thống áp dụng phân tích theo hướng đối tượng biểu qua sơ đồ ca sử dụng, sơ đồ hoạt động, sơ đồ lớp, sơ đồ phân tích sở liệu CHƯƠNG TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ Nơi miêu tả môi trường, công cụ thực để tạo nên ứng dụng kết đạt xuất trình thực đồ án hạn chế, ưu điểm hướng phát triển tương lai thực CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1 HTML 1.1.1 Khái niệm HTML HTML (viết tắt HyperText Markup Language, "Ngôn ngữ Đánh dấu Siêu văn bản") ngôn ngữ đánh dấu thiết kế để tạo nên trang web với mẩu thông tin trình bày World Wide Web HTML định nghĩa ứng dụng đơn giản SGML (Standard Generalized Markup Language) sử dụng tổ chức cần đến yêu cầu xuất phức tạp HTML trở thành chuẩn Internet tổ chức World Wide Web Consortium (W3C) trì Phiên thức HTML HTML5 (tháng 12 năm 2012) HTML5 giữ lại đặc điểm HTML4 bổ sung thêm đặc tả trội XHTML (Extensible HyperText Markup Language, "Ngôn ngữ Đánh dấu Siêu văn Mở rộng"), DOM (Document Object Model, "Mô hình Đối tượng Tài liệu") cấp 2, đặc biệt JavaScript 1.1.2 Cấu trúc tài liệu HTML Cấu trúc tài liệu HTML gồm có phần bản: ● Phần chứa code html ● Phần nằm bên thẻ chứa thông tin hiển thị điều hướng trình duyệt web thông tin trang web ● Phần nằm thẻ nằm sau thẻ , chứa nội dung trang web Cấu trúc thể sau: Bảng 1.1 Cấu trúc tài liệu HTML Các thẻ Nội dung trang web 1.1.3 Cấu trúc thành phần HTML Các thành phần HTML có thẻ mở thẻ đóng Dưới cấu trúc chung thành phần HTML Nội dung Trong đó: ● : thẻ mở ● Nội dung: nội dung thành phần HTML ● : thẻ đóng ● attributes: thuộc tính thẻ 1.1.4 Các thẻ a Các thẻ cấu trúc ● Thẻ : Định nghĩa thành phần gốc (root) trang thường chứa thẻ body thẻ head ● Thẻ : Định nghĩa thông tin tài liệu HTML, thường chứa thẻ title, script, style, meta, ● Thẻ : Định nghĩa phần thân tài liệu Chứa tất nội dung tài liệu HTML văn bản, siêu liên kết, ảnh, ● Thẻ : Định nghĩa phận phần văn HTML Thường dùng để nhóm thành phần nội dung thành khối để định dạng CSS ● Thẻ : Được sử dụng để nhóm thành phần dòng tài liệu HTML Ta dùng span kèm với css để định dạng phần nội dung văn HTML b Các thẻ meta ● Thẻ : thành phần quan trọng file HTML, chứa thông tin file HTML tên tác giả, từ khoá, thông tin mô tả trang đó, Và có số thông tin điều khiển trình duyệt, định cho máy tìm kiếm, Thẻ meta có có cấu trúc sau: Trong đó: ○ name tên thẻ meta content giá trị tương ứng với name đó, nội dung content text ko thể có thẻ HTML ○ scheme định dạng giá trị, ví dụ scheme=”day-month-year” định dạng ngày tháng năm Không có chuẩn cho thuộc tính thẻ meta ta tự định nghĩa thoải mái metadata ● Thẻ : Định nghĩa tiêu đề cho tài liệu HTML Thẻ thuộc tính Nó yêu cầu tất tài liệu HTML ● Thẻ : Xác định mối quan hệ tài liệu HTML tài nguyên bên Được dùng phổ biến link tới tài liệu css Thẻ viết bên thẻ ● Thẻ : Định nghĩa thông tin kiểu định dạng cho tài liệu HTML Một tài liệu HTML chứa nhiều thẻ c Các thẻ văn ● Thẻ h1- h6: Thẻ : Sử dụng để định nghĩa tiêu đề cho HTML Với có giá trị từ tới Trong thành phần quan trọng giảm từ tới (hay từ tiêu đề lớn , tiêu đề nhỏ ) Thẻ thành phần quan trọng trang HTML, thường người ta sử dụng cho logo, dòng mô tả trang web ● Thẻ , : Định nghĩa văn đậm mang ý nghĩa quan trọng 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 đoạn văn d Các thẻ ảnh đối tượng ● Thẻ : Dùng để nhúng image vào tài liệu HTML Thẻ có thuộc tính cần thiết src alt Trong đó: ○ src: đường dẫn tham chiếu tới image ○ alt: sử dụng văn thay image không hiển thị (hoặc sẵn lỗi không hiển thi alt hiển thị thay) ● Thẻ , : Dùng để thêm nhiều đối tượng ảnh, audio, video, vào tài liệu HTML e Thẻ liên kết ● Thẻ : Xác định siêu liên kết (hyperlink) Được dùng để: ○ Link từ trang tới trang khác ○ Link anchor (link neo) từ vị trí tới vị trí khác ○ Link để mở (hay download) file (file word, excel, pdf, image, ),mở cửa sổ hay object đó, f Các thẻ dạng danh sách ● Các thẻ , , , dùng để định nghĩa phần tử dạng danh sách ● Thẻ , định nghĩa danh sách với phần tử thẻ Thẻ dl định nghĩa danh sách với phẩn tử thẻ g Các thẻ dạng bảng ● Thẻ dùng để tạo bảng HTML Một thẻ đơn giản có chứa nhiều , ○ Trong đó: xác định hàng table xác định phần tử tiêu đề table xác định phần tử nội dung table Một table phức tạp bao gồm nhiều thành phần khác, gồm: , , , ,, h Các thẻ form ● Thẻ dùng để tạo “hình thức” HTML cho người dùng Được dùng để truyền liệu lên máy chủ Trong bắt buộc phải có tham số action: ○ ○ chứa thành phần trường text, checkbox, radio-button, button submit, ○ chứa thành phần , , , Bên form chứa thẻ khác i Các ký tự đặc biệt ● Một số ký tự có ý nghĩa đặc biệt HTML, chẳng hạn dấu nhỏ “[...]... 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ào nă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 David Heinemeier Hansson ● Rails xây dựng. .. 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àng nề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- 10 tuổi c Tính tin cậy + Khả năng chụi... dụng: Tham gia học từ vựng Tác nhân: Trẻ em từ 6- 10 tuổi Vị trí: Là nơi trẻ em được hướng dẫn học từ vựng khi tham gia vào hệ thống Mô tả hoạt động: Khi tác nhân tham gia vào mục từ vựng + Các bài học theo bảng chữ cái Bảng 2.3 Bảng mô tả ca sử dụng học từ vựng Thuộc tính Mô tả Tác nhân Trẻ em Điều kiện trước Tác nhân vào được trang hệ thống Điều kiện sau Hiển thị trang học theo từ vựng Luồng 1 Chuyển... khác, Ruby không giớ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ào cùng, trong khi đó những phiên bản cũ hơn thì phải cài đặt riêng ● 1 .6. 3 Cú pháp a Quy ước ● Dùng tên tiếng. .. dựng trên mô hình MVC và tuân thủ triệt để mô hình này Một trong 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ục Models, Views và Controllers ● 18 Hình 1.1 Mô hình MVC trong Rails 1.7.2 Các tính năng và ưu điểm của Ruby on Rails a Các tính năng ● Kiến trúc MVC: Ruby on Rails dựa trên cấu trúc MVC cho phép dữ liệu được tách ra ● Thư viện truy xuất dữ liệu: Rails bào gồm một thư... Click chuột vào button “Next” 12 Hiển thị thông báo sai, đúng 14 Hiển thị thông tin từ luyện viết tiếp theo 16 Hiển thị thông tin bài kiểm tra 18 Hiển thị thông báo sai, đúng 15 Chọn mục [Bài kiểm tra] 17 Click chuột vào đáp án và button “Check” 19 Click chuột vào button “Next” • Ca sử dụng: giải trí - 20 Hiển thị thông tin câu hỏi tiếp theo Tác nhân: Trẻ em từ 6- 10 tuổi Vị trí: Đây là nơi trẻ em thư giản... này là: rails server CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 20 2.1 CHỨC NĂNG CHÍNH CỦA WEBSITE 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 ĐẶC TẢ YÊU CẦU 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”. .. tin các từ vựng theo mục đã được chọn 3 Chọn mục cần học 5 Click chuột - - • Ca sử dụng: chủ đề Tác nhân: Trẻ em từ 6- 10 tuổi Vị trí: Đây là nơi trọng tâm của hệ thống, giúp các em học tập qua các chủ đề Mỗi chủ đề có các bài học phù hợp cho từng lứa tuổi và các trò chơi nhanh trí giúp các em dễ tiếp thu bài học hơn Mô tả hoạt động: Khi tác nhân tham gia vào mục học qua các chủ đề + Tham gia vào các... 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... 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 22 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ơ đồ