XÂY DỰNG PHẦN MỀM HỖ TRỢ DẠY VÀ HỌC TIẾNG ANH TRỰC TUYẾN

Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Công nghệ thông tin UBND TỈNH QUẢNG NAM TRỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGHỆ THÔNG TIN ---------- NGUYỄN THỊ MỸ VÂN XÂY DỰNG PHẦN MỀM HỖ TRỢ DẠY VÀ HỌ C TIẾNG ANH TRỰC TUYẾN KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC Quảng Nam, tháng 05 năm 2019 UBND TỈNH QUẢNG NAM TRỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGHỆ THÔNG TIN ---------- KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC Tên đề tài: XÂY DỰNG PHẦN MỀM HỖ TRỢ DẠY VÀ HỌC TIẾNG ANH TRỰC TUYẾN Sinh viên thực hiện NGUYỄN THỊ MỸ VÂN MSSV: 2115021054 CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN KHÓA 2015 – 2019 Cán bộ hƣớng dẫn ThS. HỒ TUẤN ANH MSCB: 24615 Quảng Nam, tháng 05 năm 2019 MỤC LỤC Phần 1. MỞ ĐẦU ........................................................................................................1 1.1. Lý do chọn đề tài ..................................................................................................1 1.2. Mục tiêu của đề tài ...............................................................................................2 1.3. Đối tƣợng và phạm vi nghiên cứu ........................................................................2 1.4. Phƣơng pháp nghiên cứu ......................................................................................2 1.5. Lịch sử nghiên cứu ...............................................................................................2 1.6. Đóng góp của đề tài..............................................................................................3 1.7. Cấu trúc đề tài ......................................................................................................3 Phần 2. NỘI DUNG NGHIÊN CỨU ..........................................................................5 Chƣơng 1: CƠ SỞ LÝ THUYẾT VỀ CÁC CÔNG NGHỆ SỬ DỤNG TRONG XÂY DỰNG PHẦN MỀM .........................................................................................5 1.1. Ngôn ngữ sử dụng ................................................................................................5 1.1.1. HTML ...............................................................................................................5 1.1.2. CSS ....................................................................................................................6 1.1.3. JavaScript ..........................................................................................................6 1.1.4. PHP ...................................................................................................................6 1.1.5. MySQL ..............................................................................................................7 1.2. Công cụ sử dụng ...................................................................................................8 1.2.1. Visual Studio Code ...........................................................................................8 1.2.2. Xampp ...............................................................................................................8 1.3. Tổng quan về Bootstrap .......................................................................................8 1.3.1. Bootstrap là gì? .................................................................................................8 1.3.2. u điểm .............................................................................................................9 1.3.3. Nhƣợc điểm .....................................................................................................10 Chƣơng 2: MÔ TẢ BÀI TOÁN ................................................................................11 2.1. Thực trạng bài toán ............................................................................................11 2.1.1. Tầm quan trọng của tiếng Anh trong thời đại hiện nay ..................................11 2.1.2. Thực trạng học tiếng Anh hiện nay .................................................................12 2.1.3. Một số phƣơng pháp để học tốt tiếng Anh ......................................................14 2.2. Khảo sát bài toán ................................................................................................16 2.2.1. Khảo sát thực tế ...............................................................................................16 2.2.2. Phân tích hệ thống ...........................................................................................17 Chƣơng 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ............................................19 3.1. Tìm hiểu hệ thống ..............................................................................................19 3.2. Sơ đồ phân rã chức năng của hệ thống...............................................................19 3.3. Biểu đồ Usecase .................................................................................................21 3.4. Biểu đồ lớp .........................................................................................................25 3.5. Biểu đồ chuyển trạng thái ..................................................................................25 3.6. Biểu đồ hoạt động ..............................................................................................26 3.7. Biểu đồ thành phần.............................................................................................27 3.8. Biểu đồ triển khai ...............................................................................................28 Chƣơng 4: THIẾT KẾ HỆ THỐNG VÀ XÂY DỰNG CHƠNG TRÌNH ............29 4.1. Cơ sở dữ liệu ......................................................................................................29 4.1.1. Bảng admin .....................................................................................................29 4.1.2. Bảng category..................................................................................................29 4.1.3. Bảng lesson .....................................................................................................29 4.2. Thiết kế giao diện ...............................................................................................30 4.2.1. Giao diện trang chủ .........................................................................................30 4.2.2. Giao diện trang con: nghe, phát âm, giao tiếp ................................................31 4.2.3. Giao diện trang thƣ giãn ..................................................................................32 4.2.4. Giao diện trang kinh nghiệm ...........................................................................33 4.2.5. Giao diện trang tìm kiếm.................................................................................34 4.2.6. Giao diện trang chi tiết ....................................................................................34 4.2.7. Giao diện trang đăng nhập ..............................................................................34 4.2.8. Giao diện trang quản trị...................................................................................35 4.2.9. Giao diện trang quản trị admin .......................................................................35 4.2.10. Giao diện trang quản trị category ..................................................................36 4.2.11. Giao diện trang quản trị lesson .....................................................................36 Phần 3. KẾT LUẬN VÀ KIẾN NGHỊ .....................................................................37 1. Kết luận .................................................................................................................37 2. Kiến nghị ...............................................................................................................37 Phần 4. TÀI LIỆU THAM KHẢO ............................................................................38 DANH MỤC CÁC HÌNH Hình 3.1 - Biểu đồ phân rã chức năng của hệ thống .................................................20 Hình 3.2 - Biểu đồ Usecase của hệ thống .................................................................21 Hình 3.3 - Biểu đồ trình tự của UC đăng nhập .........................................................22 Hình 3.4 - Biểu đồ trình tự của UC quản lý danh mục .............................................23 Hình 3.5 - Biểu đồ trình tự của UC quản trị hệ thống ...............................................24 Hình 3.6 - Biểu đồ lớp của hệ thống .........................................................................25 Hình 3.7- Biểu đồ chuyển trạng thái của quản trị viên .............................................25 Hình 3.8 - Biểu đồ chuyển trạng thái của bài học .....................................................25 Hình 3.9 - Biểu đồ hoạt động của UC đăng nhập .....................................................26 Hình 3.10 - Biểu đồ hoạt động của UC quản lý danh mục .......................................26 Hình 3.11- Biểu đồ hoạt động của UC quản trị hệ thống.........................................27 Hình 3.12 - Biểu đồ thành phần của hệ thống ...........................................................27 Hình 3.13 - Biểu đồ triển khai của hệ thống .............................................................28 LỜI CẢM ƠN Để hoàn thành đề tài khóa luận và kết thúc khóa học, với tình cảm chân thành, tôi xin bày tỏ lòng biết ơn sâu sắc tới trƣờng Đại học Quảng Nam đã tạo điều kiện cho tôi có môi trƣờng học tập tốt trong suốt thời gian tôi học tập và nghiên cứu tại trƣờng. Trong suốt thời gian thực hiện đề tài khóa luận của mình, tôi luôn nhận đƣợc sự quan tâm hƣớng dẫn, chỉ bảo tận tình của thầy giáo, Th.S Hồ Tuấn Anh để có thể hoàn thành tốt khóa luận này. Tôi xin gửi đến thầy một lời cảm ơn chân thành và sâu sắc nhất Tôi cũng xin chân thành cảm ơn quý thầy, cô khoa Công nghệ thông tin, trƣờng Đại học Quảng Nam đã tận tình truyền đạt kiến thức cho tôi trong suốt bốn năm học tại trƣờng. Với vốn kiến thức đƣợc tiếp thu trong quá trình học tập không chỉ là nền tảng cho quá trình nghiên cứu khóa luận này mà còn là hành trang quý báu để tôi bƣớc vào đời một cách vững chắc và tự tin. Đồng thời, tôi xin bày tỏ lời cảm ơn tới bạn bè, gia đình đã giúp đỡ, tạo điều kiện cho tôi trong suốt quá trình học tập và hoàn thành khóa luận tốt nghiệp lần này. Trong quá trình làm khóa luận, không thể tránh khỏi những sai sót, rất mong quý thầy, cô bỏ qua và đóng góp ý kiến để tôi có thể học hỏi thêm đƣợc nhiều kinh nghiệm hơn. Tôi xin chân thành cảm ơn 1 Phần 1. MỞ ĐẦU 1.1. Lý do chọn đề tài Trong những năm gần đây, cùng với sự phát triển của công nghệ thông tin và các phƣơng tiện truyền thông nhƣ Internet đã mang lại nhiều chuyển biến trong tất cả các lĩnh vực của xã hội đặc biệt là hỗ trợ trong việc dạy và học tiếng Anh của sinh viên hiện nay. Ngày nay có khoảng hơn hai tỷ ngƣời nói tiếng Anh trên khắp thế giới và con số này ngày càng tăng lên, tiếng Anh trở thành “ ngôn ngữ phụ ” quan trọng và ngày càng đƣợc nhiều ngƣời sử dụng. Tuy tiếng Anh đƣợc sử dụng rộng rãi nhƣng không hề thay thế các ngôn ngữ khác mà thay vào đó là hỗ trợ cho các ngôn ngữ khác. Đó dƣờng nhƣ là tiếng nói chung của nhiều nƣớc, nơi mọi ngƣời nói nhiều ngôn ngữ khác nhau. Do đó, ngôn ngữ của thời đại bùng nổ thông tin chính là tiếng Anh, t iếng Anh không chỉ giúp chúng ta mở rộng phạm vi giao tiếp, gây ứng tƣợng với những ngƣời xung quanh mà còn mang lại cho chúng ta nhiều lợi ích khác. Hầu hết các phƣơng tiện thông tin ngày nay, nhƣ internet, tivi, báo chí cung cấp nguồn tri thức vô tận về các chủ đề chúng ta yêu thích, vì chúng ta đang sống trong thời đại thông tin. Tuy nhiên, đa số những thông tin đó đều đƣợc viết bằng tiếng Anh do đó chúng ta có cơ hội đƣợc tiếp cận với ngôn ngữ này rất nhiều. Rõ ràng các tài liệu viết bằng tiếng Anh nhiều hơn rất nhiều so với tài liệu bằng tiếng Việt, đặc biệt là với các ngành công nghệ cao. Vì thế, tiếng Anh là chìa khoá mở cánh cửa vào thế giới khoa học. Trải qua nhiều năm, phƣơng thức đào tạo, dạy và học tiếng Anh theo kiểu truyền thống đã cho thấy sự đóng góp không thể chối cãi trong công cuộc giáo dục và đào tạo. Tuy nhiên cùng với sự phát triển và bùng nổ của công nghệ thông tin thì chính những phƣơng thức đó cũng đã bộc lộ một số yếu kém ảnh hƣởng đến việc truyền đạt và tiếp thu nội dung kiến thức, từ đó mang lại hiệu quả học tập không cao mà chi phí đào tạo, học tập lại rất lớn dẫn đến sự lãng phí không nhỏ cả về thời gian và tiền bạc. Nhận thức đƣợc vấn đề trên, công tác giáo dục đã có nhiều thay đổi, cải tiến với những hình thức học tập mới, khắc phục những hình thức học tập truyền thống. Vì thế, việc xây dựng phần mềm hỗ trợ học tiếng Anh cho sinh viên là rất cần thiết, với sự trợ giúp của công nghệ có thể sẽ khắc phục tốt những nhƣợc điểm của phƣơng pháp học truyền thống hiện nay. Và đó cũng là lý do tôi chọn đề tài 2 “Xây dựng phần mềm hỗ trợ dạy và học tiếng Anh trực tuyến ” để làm đề tài nghiên cứu khóa luận của mình. 1.2. Mục tiêu của đề tài Đề tài tập trung nghiên cứu và xây dựng phần mềm hỗ trợ dạy và học tiếng Anh trực tuyến cho sinh viên. Giới thiệu về các ngôn ngữ sử dụng trong xây dựng phần mềm: PHP, MySQL… 1.3. Đối tƣợng và phạm vi nghiên cứu - Đối tƣợng nghiên cứu: Phần mềm hỗ trợ dạy và học tiếng Anh trực tuyến. - Phạm vi nghiên cứu: Xây d ựng phần mềm hỗ trợ dạy và học tiếng Anh trực tuyến cho sinh viên trƣờng Đại học Quảng Nam. 1.4. Phƣơng pháp nghiên cứu - Phƣơng pháp nghiên cứu lý thuyết + Tìm hiểu và phân tích hệ thống thông tin. + Tìm hiểu về mô hình ứng dụng. + Thu thập thông tin, nghiên cứu thực trạng. + Tham khảo ý kiến từ giảng viên hƣớng dẫn đề tài. + Tham khảo sách, báo và các nguồn tài liệu từ Internet về các phần mềm đã có. - Phƣơng pháp nghiên cứu thực nghiệm + Đƣa ra các yêu cầu quản lý và chức năng cần có, từ đó phân tích và thiết kế hệ thống hỗ trợ dạy và học tiếng Anh trực tuyến theo quy trình ứng dụng phần mềm. + Xây dựng phần mềm hỗ trợ dạy và học tiếng Anh trực tuyến. 1.5. Lịch sử nghiên cứu Đề tài chủ yếu hoàn thiện về các chức năng cần thiết nhất nhƣ: nghe, nói, đọc, viết,... để đáp ứng nhu cầu sử dụng của sinh viên khi tham gia học tại phần mềm dạy và học tiếng Anh trực tuyến này, tạo ra nhiều bài giảng hấp dẫn thu hút bạn học cũng nhƣ các trò chơi cần thiết đối với bài học đó để sinh viên có thể tiếp thu hiệu quả đặc biệt đối với những bạn mất gốc về tiếng Anh. 3 1.6. Đóng góp của đề tài Đề tài cung cấp một nền tảng các kiến thức để thuận tiện hơn trong việc xây dựng phần mềm hỗ trợ dạy và học tiếng Anh trực tuyến. Có thể nói đây là một ứng dụng thiết thực và có tính ứng dụng cao. Ứng dụng này giúp ngƣời dùng có thêm nhiều lựa chọn và những trải nghiệm tốt nhất. Phần mềm dạy và học tiếng Anh này sẽ giúp cho ngƣời dùng tìm kiếm từ vựng, ngữ pháp,.... tiếng Anh một cách nhanh chóng và hiệu quả. Với đề tài này tôi mong muốn cung cấp một tài liệu tham khảo cho các bạn sinh viên trong khoa cũng nhƣ ngoài khoa có cơ hội tiếp cận và tìm hiểu sâu hơn về lĩnh vực nghiên cứu của bản thân. 1.7. Cấu trúc đề tài Cấu trúc của bài khóa luận này bao gồm các phần: Phần 1. MỞ ĐẦU 1. Lý do chọn đề tài 2. Mục tiêu của đề tài 3. Đối tƣợng và phạm vi nghiên cứu 4. Nội dung và phƣơng pháp nghiên cứu 5. Ý nghĩa khoa học và thực tiễn của đề tài Phần 2. NỘI DUNG NGHIÊN CỨU Chƣơng 1: Cơ sở lý thuyết về các công nghệ sử dụng trong xây dựng phần mềm 1.1. Ngôn ngữ sử dụng 1.2. Công cụ sử dụng 1.3. Tổng quan về Boostrap Chƣơng 2: Mô tả bài toán 2.1. Thực trạng bài toán 2.2. Khảo sát bài toán Chƣơng 3: Phân tích và thiết kế hệ thống 3.1. Tìm hiểu hệ thống 3.2. Sơ đồ phân rã chức năng của hệ thống 3.3. Biểu đồ usecase 3.4. Biểu đồ lớp 3.5. Biểu đồ chuyển trạng thái 4 3.6. Biểu đồ hoạt động 3.7. Biểu đồ thành phần 3.8. Biểu đồ triển khai Chƣơng 4: Thiết kế hệ thống và xây dựng chƣơng trình 4.1. Cơ sỡ dữ liệu 4.2. Thiết kế giao diện Phần 3. KẾT LUẬN VÀ KIẾN NGHỊ Phần 4. TÀI LIỆU THAM KHẢO 5 Phần 2. NỘI DUNG NGHIÊN CỨU Chƣơng 1: CƠ SỞ LÝ THUYẾT VỀ CÁC CÔNG NGHỆ SỬ DỤNG TRONG XÂY DỰNG PHẦN MỀM 1.1. Ngôn ngữ sử dụng 1.1.1. HTML Ngôn ngữ HTML (HyperText Markup Language) là ngôn ngữ dùng để mô tả các tài liệu Web (Web document) hay trang Web (Web page), là một ngôn ngữ siêu văn bản, có nhiệm vụ xây dựng cấu trúc cơ bản của một trang web nhƣ hiển thị văn bản, link, hình ảnh... Tài liệu HTML đƣợc mô tả bởi các thẻ HTML (HTML tags). Mỗi thẻ HTML mô tả nội dung tài liệu khác nhau. Trong HTML, các thẻ có thể tồn tại đơn lẻ, hoặc tồn tại dƣới dạng một cặp thẻ. Nếu tồn tại dƣới dạng một cặp thẻ thì thẻ bắt đầu gọi là thẻ mở và thẻ kết thúc gọi là thẻ đóng. Để soạn thảo một file HTM L, có thể sử dụng bất kì trình soạn thảo nào, ví dụ nhƣ NotePad, và phải đặt đuôi file là .html hoặc .htm thì trình duyệt mới hiểu và phân biệt đƣợc. Cấu trúc của một file HTML bắt đầu và kết thúc bằng cặp thẻ . Các đoạn mã nằm trong cặp thẻ sẽ đƣợc hiển thị còn nằm ngoài thì sẽ không hiển thị. Toàn bộ nội dung chính của trang đƣợc đặt trong cặp thẻ . Nếu khai báo thẻ mở đầu mà không đóng thẻ hoặc ngƣợc lại thì thẻ sẽ bị lỗi và không hiển thị. Một trang web có thể chỉ cần mỗi ngôn ngữ HTML là có thể hiển thị và hoạt động đƣợc nhƣ một trang web mà không sử dụng ngôn ngữ HTML thì sẽ không hiển thị và hoạt động đƣợc. - Các thẻ trong HTML: + : Còn gọi là thẻ khai báo một tài liệu HTML. Thẻ này xác định loại tài + : Thẻ này chứa đựng các tài liệu HTML đầy đủ. Ở đầu trang sẽ xuất hiện các thẻ và thân tài liệu là các thẻ + : Thẻ này đại diện cho đầu trang tài liệu mà có thể giữ các thẻ HTML nhƣ , ... + : Thẻ đƣợc sử dụng trong thẻ chỉ tiêu đề tài liệu + : Thẻ này đại diện cho thân tài liệu và giữ các thẻ nhƣ , ,

.... 6 + : Thẻ tag này đại diện cho các tiêu đề trang +

: Thẻ tag này đại diện cho định dạng các đoạn văn trong trang web 1.1.2. CSS CSS đƣợc dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML. CSS là viết tắt của Cascading Style Sheets. CSS đƣợc hiểu một cách đơn giản đó là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thƣớc, màu sắc…) cho một tài lệu web. Tác dụng của CSS: - Hạn chế tối thiểu việc làm rối mã HTML của trang web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu…), khiến mã nguồn của trang web đƣợc gọn gàng hơn, tách nội dung của trang web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung. - Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang web, giúp tránh phải lặp lại việc định dạng cho các trang web giống nhau. 1.1.3. JavaScript JavaScript là ngôn ngữ kịch bản dùng để tạo các kịch bản phía client (client- slide) và phía server (server-slide). JavaScript làm cho việc tạo các trang web động và tƣơng tác trên internet dễ dàng hơn. Chức năng của JavaScript: - JavaScript cung cấp tính tự động và tính tƣơng tác trong các trang web qua các chức năng: + Đáp lại (responding) nhanh chóng các yêu cầu (request) của ngƣời dùng. + Sinh ra các trang HTML bằng việc viết nội dung HTML. + Kiểm tra tính hợp lệ của dữ liệu do ngƣời dùng nhập + Thực hiện các tính toán đơn giản phía client. 1.1.4. PHP PHP là một ngôn ngữ kịch bản đƣợc thực thi phía máy chủ (server) và là một công cụ mạnh mẽ để tạo ra các trang web có tính động và tƣơng tác. PHP lúc đầu đƣợc biết đến là viết tắt của cụm từ Personal Home Page, còn bây giờ đƣợc hiểu là cách viết tắt hồi quy của “PHP: Hypertext Preprocessor”. PHP là ngôn ngữ kịch bản mã nguồn mở, đƣợc sử dụng rộng rãi và miễn phí hiện nay. 7 PHP có thể tạo, mở, đọc, viết, xóa các tập tin trên server; lấy dữ liệu từ form từ client gửi tới serverr; gửi và nhận cookie; thêm, xóa và sửa đổi dữ liệu trong cơ sở dữ liệu; kiểm soát truy cập của ngƣời dùng và mã hóa dữ liệu. PHP có thể chạy trên nhiều nền tảng khác nhau, nhƣ Windows, Linus, Unix… và tƣơng thích với hầu hết các máy chủ hiện nay. PHP là miễn phí, hỗ trợ một loạt các cơ sở dữ liệu, dễ hiểu và thực thi hiệu quả từ phía máy chủ. Một tập PHP có thể chứa văn bản, mã HTML, CSS, JavaScript và PHP. Mã PHP đƣợc thực thi phía server và kết quả trả về cho trình dyệt chỉ chứa mã HTML. Một file PHP có phần mở rộng là .php. Một kịch bản PHP có thể đƣợc đặt bất cứ đâu trong một trang tài liệu. 1.1.5. MySQL MySQL là hệ quản trị cơ sở dữ liệu tự do 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. MySQL miễn phí hoàn toàn cho nên ta có thể tải về MySQL từ trang chủ. MySQL có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS,... 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,... - Một số hàm cơ bản trong MySQL: + Kết nối cơ sở dữ liệu: Cấu trúc: mysqlconnect("hostname","user","pass") + Kiểm tra số dòng dữ liệu trong bảng: Cấu trúc: mysqlnumrows(); + Đƣa dữ liệu từ bảng vào mảng: Cấu trúc: mysqlfetcharray(); 8 + Đóng kết nối với cơ sở dữ liệu: Cấu trúc: mysqlclose(); 1.2. Công cụ sử dụng 1.2.1. Visual Studio Code Visual Studio Code là một trình biên tập mã, có thể hỗ trợ nhiều ngôn ngữ và chức năng tùy vào ngôn ngữ sử dụng. Nhiều chức năng của Visual Studio Code không hiển thị ra trong các menu tùy chọn hay giao diện ngƣời dùng. Thay vào đó, chúng đƣợc gọi thông qua khung nhập lệnh hoặc qua một tập tin .json (ví dụ nhƣ tập tin tùy chỉnh của ngƣời dùng). Khung nhập lệnh là một giao diện theo dòng lệnh. Tuy nhiên, khung nhập lệnh sẽ biến mất khi ngƣời dùng nhấp bất cứ nơi nào khác, hoặc nhấn tổ hợp phím để tƣơng tác với một cái gì đó ở bên ngoài đó. Tƣơng tự nhƣ vậy với những dòng lệnh tốn nhiều thời gian để xử lý. Khi thực hiện những điều trên thì quá trình xử lý dòng lệnh đó sẽ bị hủy. 1.2.2. Xampp Phần mềm XAMPP là một loại ứng dụng phần mềm khá phổ biến và thƣờng hay đƣợc các lập trình viên sử dụng để xây dựng và phát triển các dự án website theo ngôn ngữ PHP. XAMPP thƣờng đƣợc dùng để tạo máy chủ web (web server) đƣợc tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ nhƣ phpMyAdmin. Đặc biệt, Xampp có giao diện quản lý khá tiện lợi, cho phép ngƣời dùng chủ động bật tắt hoặc khởi động lại các dịch vụ máy chủ bất kỳ lúc nào. Phần mềm này cũng đƣợc thiết lập và phát triển dựa trên mã nguồn mở. Nhìn chung XAMPP đƣợc xem là một bộ công cụ hoàn chỉnh dành cho lập trình viên PHP trong việc thiết lập và phát triển các website, phần mềm này tích hợp các thành phần quan trọng và tƣơng thích lẫn nhau. 1.3. Tổng quan về Bootstrap 1.3.1. Bootstrap là gì? Bootstrap là một nền tảng (framework) miễn phí, mã nguồn mở, dựa trên HTML, CSS và Javascript, cho phép ngƣời dùng dễ dàng thiết kế website theo một chuẩn nhất định, tạo các website tƣơng thích với tất cả các thiết bị có kích thƣớc màn hình khác nhau nhƣ mobile, ipad, tablet,... Trong Bootstrap có thêm nhiều 9 Component, Javascript hỗ trợ cho việc thiết kế reponsive của bạn dễ dàng, thuận tiện và nhanh chóng hơn. 1.3.2. u điểm Hi ện nay Bootstrap là một trong những framework đƣợc sử dụng nhiều nhất trên thế giới để tạo ra các responsive website. Bootstrap đã tạo ra một tiêu chuẩn riêng và rất đƣợc các lập trình viên ƣa chuộng. Về cơ bản Bootstrap có 3 ƣu điểm nổi bật: - Rất dễ để sử dụng. - Responsive: Bootstrap xây dựng sẵn các “reponsive css” trên các thiết bị iphones, tablets, và desktops. Tính năng này khiến cho ngƣời dùng tiết kiệm đƣợc rất nhiều thời gian trong việc tạo ra một website thân thiện với các thiết bị điện tử, thiết bị cầm tay. - Tƣơng thích với tất cả các trình duyệt: Chrome, Firefox, Internet Explorer, Safari, and Opera. Tuy nhiên, với IE browser, Bootstrap chỉ hỗ trợ từ IE10 trở lên. Bootstrap cung cấp một nền tảng tối ƣu với một thƣ viện lƣu trữ các thiết kế có sẵn và hoàn toàn có thể tùy chỉnh theo mục đích cá nhân. Điều này giúp ngƣời dùng có thể phát triển website một cách nhanh chóng và tiện lợi. Ngoài ra, Bootstrap còn đƣợc xây dựng với khả năng tƣơng thích trên hầu hết các trình duyệt và thiết bị để website để ngƣời dùng có thể tiếp cận một cách tốt nhất. Nếu nhƣ trƣớc đây cần phải lập trình hai phiên bản website cho desktop và mobile. Tuy nhiên, với sự xuất hiện của Bootstrap, ngƣời dùng chỉ cần thiết kế một phiên bản web cho tất cả các thiết bị. Bootstrap sử dụng hệ thống lƣới hỗ trợ responsive và đƣợc viết theo xu hƣớng ƣu tiên giao diện mobile. Do đó, website của sẽ đƣợc hỗ trợ tối đa khi khách hàng truy cập trên các thiết bị di động. Ngoài ra, giao diện ngƣời dùng của Bootstrap đƣợc đánh giá là khá thân thiện. Cấu trúc rõ ràng giúp ngƣời dùng nhanh chóng nắm bắt cách sử dụng và phát triển. Không những thế, Bootstrap còn giúp website hiển thị tốt khi co giãn màn hình. Cuối cùng, đó chính là khả năng tùy biến của Bootstrap, ngƣời dùng có thể thay đổi hầu hết các tính năng để website có thể phù hợp với hoạt động kinh doanh của bạn. Nếu vẫn chƣa hài lòng thì có thể chỉnh sửa trực tiếp ngay trên mã nguồn 10 của Bootstrap. Ngoài ra, Bootstrap cũng rất thân thiện với Google nên đây có thể coi là lợi thế trong chiến dịch quảng bá thƣơng hiệu. 1.3.3. Nhƣợc điểm Mặc dù có nhiều ƣu điểm nổi bật, song bất cứ công cụ nào cũng sẽ còn những nhƣợc điểm luôn tồn tại song song với ƣu điểm và Bootstrap cũng vậy. Boostrap vẫn còn có một số nhƣợc điểm nhất định. Tính kém phổ biến: Bootstrap không phải là ứng dụng web phổ biến nên để tìm đƣợc một tổ chức, cá nhân thành thạo bootstrap để có thể sử dụng với nền tảng lập trình web không nhiều. Sản phẩm nặng, tốc độ tối ƣu chƣa cao: nên nếu dự án của ngƣời dùng đòi hỏi sản phẩm nhẹ thì việc sử dụng Bootstrap sẽ là cả một gánh nặng cho web. Chƣa hoàn thiện: Bootstrap chƣa đầy đủ các thƣ viện cần thiết. Các phát triển chƣa thể tạo ra một framework riêng hoàn hảo, do đó một số trang web vẫn phải dùng phiên bản dành riêng cho mobile Quá nhiều code thừa: Không thể phủ nhận rằng Bootstrap có rất nhiều ƣu điểm khi nó cũng cấp gần nhƣ đầy đủ những tính năng cơ bản của một trang web responsive hiện đại. Tuy nhiên, mặt trái của việc này là website sẽ phải tải thêm rất nhiều dòng code không cần thi...

NỘI DUNG NGHIÊN CỨU

TRONG XÂY DỰNG PHẦN MỀM 1.1 Ngôn ngữ sử dụng

Ngôn ngữ HTML (HyperText Markup Language) là ngôn ngữ dùng để mô tả các tài liệu Web (Web document) hay trang Web (Web page), là một ngôn ngữ siêu văn bản, có nhiệm vụ xây dựng cấu trúc cơ bản của một trang web nhƣ hiển thị văn bản, link, hình ảnh Tài liệu HTML đƣợc mô tả bởi các thẻ HTML (HTML tags) Mỗi thẻ HTML mô tả nội dung tài liệu khác nhau Trong HTML, các thẻ có thể tồn tại đơn lẻ, hoặc tồn tại dưới dạng một cặp thẻ Nếu tồn tại dưới dạng một cặp thẻ thì thẻ bắt đầu gọi là thẻ mở và thẻ kết thúc gọi là thẻ đóng Để soạn thảo một file HTML, có thể sử dụng bất kì trình soạn thảo nào, ví dụ nhƣ NotePad, và phải đặt đuôi file là html hoặc htm thì trình duyệt mới hiểu và phân biệt đƣợc

Cấu trúc của một file HTML bắt đầu và kết thúc bằng cặp thẻ

Các đoạn mã nằm trong cặp thẻ sẽ đƣợc hiển thị còn nằm ngoài thì sẽ không hiển thị Toàn bộ nội dung chính của trang đƣợc đặt trong cặp thẻ Nếu khai báo thẻ mở đầu mà không đóng thẻ hoặc ngƣợc lại thì thẻ sẽ bị lỗi và không hiển thị

Một trang web có thể chỉ cần mỗi ngôn ngữ HTML là có thể hiển thị và hoạt động đƣợc nhƣ một trang web mà không sử dụng ngôn ngữ HTML thì sẽ không hiển thị và hoạt động đƣợc

+ : Còn gọi là thẻ khai báo một tài liệu HTML Thẻ này xác định loại tài

+ : Thẻ này chứa đựng các tài liệu HTML đầy đủ Ở đầu trang sẽ xuất hiện các thẻ và thân tài liệu là các thẻ

+ : Thẻ này đại diện cho đầu trang tài liệu mà có thể giữ các thẻ HTML nhƣ ,

+ : Thẻ đƣợc sử dụng trong thẻ chỉ tiêu đề tài liệu + : Thẻ này đại diện cho thân tài liệu và giữ các thẻ nhƣ , ,

CƠ SỞ LÝ THUYẾT VỀ CÁC CÔNG NGHỆ SỬ DỤNG TRONG XÂY DỰNG PHẦN MỀM

Công cụ sử dụng

Chương 2: Mô tả bài toán

Chương 3: Phân tích và thiết kế hệ thống

3.2 Sơ đồ phân rã chức năng của hệ thống

3.5 Biểu đồ chuyển trạng thái

Chương 4: Thiết kế hệ thống và xây dựng chương trình 4.1 Cơ sỡ dữ liệu

Phần 3 KẾT LUẬN VÀ KIẾN NGHỊ

Phần 4 TÀI LIỆU THAM KHẢO

Phần 2 NỘI DUNG NGHIÊN CỨU Chương 1: CƠ SỞ LÝ THUYẾT VỀ CÁC CÔNG NGHỆ SỬ DỤNG

+ : Thẻ tag này đại diện cho các tiêu đề trang

+

: Thẻ tag này đại diện cho định dạng các đoạn văn trong trang web

CSS đƣợc dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML CSS là viết tắt của Cascading Style Sheets CSS đƣợc hiểu một cách đơn giản đó là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc…) cho một tài lệu web

- Hạn chế tối thiểu việc làm rối mã HTML của trang web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu…), khiến mã nguồn của trang web đƣợc gọn gàng hơn, tách nội dung của trang web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung

- Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang web, giúp tránh phải lặp lại việc định dạng cho các trang web giống nhau

JavaScript là ngôn ngữ kịch bản dùng để tạo các kịch bản phía client (client- slide) và phía server (server-slide)

JavaScript làm cho việc tạo các trang web động và tương tác trên internet dễ dàng hơn

- JavaScript cung cấp tính tự động và tính tương tác trong các trang web qua các chức năng:

+ Đáp lại (responding) nhanh chóng các yêu cầu (request) của người dùng + Sinh ra các trang HTML bằng việc viết nội dung HTML

+ Kiểm tra tính hợp lệ của dữ liệu do người dùng nhập

+ Thực hiện các tính toán đơn giản phía client

PHP là một ngôn ngữ kịch bản đƣợc thực thi phía máy chủ (server) và là một công cụ mạnh mẽ để tạo ra các trang web có tính động và tương tác PHP lúc đầu đƣợc biết đến là viết tắt của cụm từ Personal Home Page, còn bây giờ đƣợc hiểu là cách viết tắt hồi quy của “PHP: Hypertext Preprocessor” PHP là ngôn ngữ kịch bản mã nguồn mở, đƣợc sử dụng rộng rãi và miễn phí hiện nay

PHP có thể tạo, mở, đọc, viết, xóa các tập tin trên server; lấy dữ liệu từ form từ client gửi tới serverr; gửi và nhận cookie; thêm, xóa và sửa đổi dữ liệu trong cơ sở dữ liệu; kiểm soát truy cập của người dùng và mã hóa dữ liệu

PHP có thể chạy trên nhiều nền tảng khác nhau, nhƣ Windows, Linus, Unix… và tương thích với hầu hết các máy chủ hiện nay PHP là miễn phí, hỗ trợ một loạt các cơ sở dữ liệu, dễ hiểu và thực thi hiệu quả từ phía máy chủ Một tập PHP có thể chứa văn bản, mã HTML, CSS, JavaScript và PHP Mã PHP đƣợc thực thi phía server và kết quả trả về cho trình dyệt chỉ chứa mã HTML Một file PHP có phần mở rộng là php Một kịch bản PHP có thể đƣợc đặt bất cứ đâu trong một trang tài liệu

MySQL là hệ quản trị cơ sở dữ liệu tự do 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 MySQL miễn phí hoàn toàn cho nên ta có thể tải về MySQL từ trang chủ MySQL có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS,

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,

- Một số hàm cơ bản trong MySQL:

+ Kết nối cơ sở dữ liệu:

Cấu trúc: mysql_connect("hostname","user","pass")

+ Kiểm tra số dòng dữ liệu trong bảng:

Cấu trúc: mysql_num_rows();

+ Đƣa dữ liệu từ bảng vào mảng:

Cấu trúc: mysql_fetch_array();

+ Đóng kết nối với cơ sở dữ liệu:

Visual Studio Code là một trình biên tập mã, có thể hỗ trợ nhiều ngôn ngữ và chức năng tùy vào ngôn ngữ sử dụng Nhiều chức năng của Visual Studio Code không hiển thị ra trong các menu tùy chọn hay giao diện người dùng Thay vào đó, chúng đƣợc gọi thông qua khung nhập lệnh hoặc qua một tập tin json (ví dụ nhƣ tập tin tùy chỉnh của người dùng) Khung nhập lệnh là một giao diện theo dòng lệnh Tuy nhiên, khung nhập lệnh sẽ biến mất khi người dùng nhấp bất cứ nơi nào khác, hoặc nhấn tổ hợp phím để tương tác với một cái gì đó ở bên ngoài đó Tương tự nhƣ vậy với những dòng lệnh tốn nhiều thời gian để xử lý Khi thực hiện những điều trên thì quá trình xử lý dòng lệnh đó sẽ bị hủy

Phần mềm XAMPP là một loại ứng dụng phần mềm khá phổ biến và thường hay đƣợc các lập trình viên sử dụng để xây dựng và phát triển các dự án website theo ngôn ngữ PHP XAMPP thường được dùng để tạo máy chủ web (web server) đƣợc tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ nhƣ phpMyAdmin Đặc biệt, Xampp có giao diện quản lý khá tiện lợi, cho phép người dùng chủ động bật tắt hoặc khởi động lại các dịch vụ máy chủ bất kỳ lúc nào Phần mềm này cũng đƣợc thiết lập và phát triển dựa trên mã nguồn mở

Nhìn chung XAMPP đƣợc xem là một bộ công cụ hoàn chỉnh dành cho lập trình viên PHP trong việc thiết lập và phát triển các website, phần mềm này tích hợp các thành phần quan trọng và tương thích lẫn nhau.

Tổng quan về Bootstrap

Bootstrap là một nền tảng (framework) miễn phí, mã nguồn mở, dựa trên HTML, CSS và Javascript, cho phép người dùng dễ dàng thiết kế website theo một chuẩn nhất định, tạo các website tương thích với tất cả các thiết bị có kích thước màn hình khác nhau nhƣ mobile, ipad, tablet, Trong Bootstrap có thêm nhiều

Component, Javascript hỗ trợ cho việc thiết kế reponsive của bạn dễ dàng, thuận tiện và nhanh chóng hơn

Hiện nay Bootstrap là một trong những framework đƣợc sử dụng nhiều nhất trên thế giới để tạo ra các responsive website Bootstrap đã tạo ra một tiêu chuẩn riêng và rất đƣợc các lập trình viên ƣa chuộng Về cơ bản Bootstrap có 3 ƣu điểm nổi bật:

- Rất dễ để sử dụng

- Responsive: Bootstrap xây dựng sẵn các “reponsive css” trên các thiết bị iphones, tablets, và desktops Tính năng này khiến cho người dùng tiết kiệm được rất nhiều thời gian trong việc tạo ra một website thân thiện với các thiết bị điện tử, thiết bị cầm tay

- Tương thích với tất cả các trình duyệt: Chrome, Firefox, Internet Explorer, Safari, and Opera Tuy nhiên, với IE browser, Bootstrap chỉ hỗ trợ từ IE10 trở lên

Bootstrap cung cấp một nền tảng tối ưu với một thư viện lưu trữ các thiết kế có sẵn và hoàn toàn có thể tùy chỉnh theo mục đích cá nhân Điều này giúp người dùng có thể phát triển website một cách nhanh chóng và tiện lợi Ngoài ra, Bootstrap còn được xây dựng với khả năng tương thích trên hầu hết các trình duyệt và thiết bị để website để người dùng có thể tiếp cận một cách tốt nhất

Nếu như trước đây cần phải lập trình hai phiên bản website cho desktop và mobile Tuy nhiên, với sự xuất hiện của Bootstrap, người dùng chỉ cần thiết kế một phiên bản web cho tất cả các thiết bị Bootstrap sử dụng hệ thống lưới hỗ trợ responsive và được viết theo xu hướng ưu tiên giao diện mobile Do đó, website của sẽ đƣợc hỗ trợ tối đa khi khách hàng truy cập trên các thiết bị di động

Ngoài ra, giao diện người dùng của Bootstrap được đánh giá là khá thân thiện Cấu trúc rõ ràng giúp người dùng nhanh chóng nắm bắt cách sử dụng và phát triển Không những thế, Bootstrap còn giúp website hiển thị tốt khi co giãn màn hình

Cuối cùng, đó chính là khả năng tùy biến của Bootstrap, người dùng có thể thay đổi hầu hết các tính năng để website có thể phù hợp với hoạt động kinh doanh của bạn Nếu vẫn chƣa hài lòng thì có thể chỉnh sửa trực tiếp ngay trên mã nguồn

10 của Bootstrap Ngoài ra, Bootstrap cũng rất thân thiện với Google nên đây có thể coi là lợi thế trong chiến dịch quảng bá thương hiệu

Mặc dù có nhiều ƣu điểm nổi bật, song bất cứ công cụ nào cũng sẽ còn những nhƣợc điểm luôn tồn tại song song với ƣu điểm và Bootstrap cũng vậy Boostrap vẫn còn có một số nhƣợc điểm nhất định

Tính kém phổ biến: Bootstrap không phải là ứng dụng web phổ biến nên để tìm đƣợc một tổ chức, cá nhân thành thạo bootstrap để có thể sử dụng với nền tảng lập trình web không nhiều

Sản phẩm nặng, tốc độ tối ưu chưa cao: nên nếu dự án của người dùng đòi hỏi sản phẩm nhẹ thì việc sử dụng Bootstrap sẽ là cả một gánh nặng cho web

Chƣa hoàn thiện: Bootstrap chƣa đầy đủ các thƣ viện cần thiết Các phát triển chƣa thể tạo ra một framework riêng hoàn hảo, do đó một số trang web vẫn phải dùng phiên bản dành riêng cho mobile

Quá nhiều code thừa: Không thể phủ nhận rằng Bootstrap có rất nhiều ƣu điểm khi nó cũng cấp gần nhƣ đầy đủ những tính năng cơ bản của một trang web responsive hiện đại Tuy nhiên, mặt trái của việc này là website sẽ phải tải thêm rất nhiều dòng code không cần thiết khi mà chỉ cần chƣa đến 10% những gì Bootstrap cung cấp

Bootstrap không khuyến khích sáng tạo: Sự tiện dụng và dễ dàng của Bootstrap nhiều khi sẽ khuyến khích tính lười sáng tạo

MÔ TẢ BÀI TOÁN

Khảo sát bài toán

Chương 3: Phân tích và thiết kế hệ thống

3.2 Sơ đồ phân rã chức năng của hệ thống

3.5 Biểu đồ chuyển trạng thái

+

Nhìn chung XAMPP đƣợc xem là một bộ công cụ hoàn chỉnh dành cho lập trình viên PHP trong việc thiết lập và phát triển các website, phần mềm này tích hợp các thành phần quan trọng và tương thích lẫn nhau

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Biểu đồ chuyển trạng thái

Biểu đồ triển khai

+

THIẾT KẾ HỆ THỐNG VÀ XÂY DỰNG CHƯƠNG TRÌNH

Thiết kế giao diện

+

Tiêu đề	Xây Dựng Phần Mềm Hỗ Trợ Dạy Và Học Tiếng Anh Trực Tuyến
Tác giả	Nguyễn Thị Mỹ Vân
Người hướng dẫn	ThS. Hồ Tuấn Anh
Trường học	Trường Đại Học Quảng Nam
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	khóa luận tốt nghiệp đại học
Năm xuất bản	2019
Thành phố	Quảng Nam

Định dạng
Số trang	46
Dung lượng	2,26 MB