XÂY DỰNG HỆ THỐNG KIỂM TRA NĂNG LỰC TIẾNG ANH

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN TỐT NGHIỆP NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ PHẦN MỀM ĐỀ TÀI: XÂY DỰNG HỆ THỐNG KIỂM TRA NĂNG LỰC TIẾNG ANH Người hướng dẫn: THS. NGUYỄN THỊ MINH HỶ Sinh viên thực hiện: TRẦN HỮU TRUNG Số thẻ sinh viên: 102150142 Lớp : 15T2 Đà Nẵng, 12 / 201 9 NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN .......................................................................................................... ............................................. ......................................................................................................... ............................................ .. .......................................................................................................... ............................................. ........................................................... ....................................................................... ..................... .......................................................................................................... ............................................. ............. ................................................................................................. ......................................... .......................................................................................................... ............ ................................. .......................................................................................................... ............................................. ........................................................................ ................................................................ ............... .......................................................................................................... ............................................. .......................... .......................................................................................... ................................... .......................................................................................................... ......................... .................... .......................................................................................................... ............................................. ..................................................................................... ........................................................ .......... .......................................................................................................... ............................................. ....................................... ................................................................................... ............................. .......................................................................................................... ...................................... ....... .......................................................................................................... ............................................. .................................................................................................. ................................................. .... .................. ............................. ...................................................... .............................. ................... Đà Nẵng, ngày … tháng 12 năm 2019 G i ảng viên hướng d ẫn Ths. Nguyễn Thị Minh Hỷ NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN .......................................................................................................... ............................................. ......................................................................................................... ............................................ .. .......................................................................................................... ............................................. ........................................................... ....................................................................... ..................... .......................................................................................................... ............................................. ............. ................................................................................................. ......................................... .......................................................................................................... ............ ................................. .......................................................................................................... ............................................. ........................................................................ ................................................................ ............... .......................................................................................................... ............................................. .......................... .......................................................................................... ................................... .......................................................................................................... ......................... .................... .......................................................................................................... ............................................. ..................................................................................... ........................................................ .......... .......................................................................................................... ............................................. ....................................... ................................................................................... ............................. .......................................................................................................... ...................................... ....... .......................................................................................................... ............................................. ................................................................................................. ......... .......................... .................. Đà Nẵng, ngày … tháng 12 năm 2019 PHI Ế U DUY Ệ T Đ Ồ ÁN T Ố T NGHI Ệ P I. Ph ầ n dành cho Sinh viên 1. H ọ và tên: TR Ầ N H Ữ U TRUNG 2. Mã Sinh viên : 102150142 3. L ớ p: 15T2 4. Tên đ ề tài: Xây d ự ng h ệ th ố ng ki ể m tra năng l ự c Ti ế ng Anh 5. S ố đi ệ n tho ạ i: 0966581498 6. E - mail : tranhuutrung1408@gmail.com 7. H ọ và tên GVHD: ThS . Nguy ễ n Th ị Minh H ỷ II. Ph ầ n dành cho H ộ i đ ồ ng STT N ộ i dung đánh giá K ế t lu ậ n 1. Trình bày báo cáo theo đúng m ẫ u qui đ ị nh c ủ a Khoa 2. Không có s ự sao chép n ộ i dung báo cáo và chương trình đã có 3. Biên d ị ch mã ngu ồ n và ch ạ y đư ợ c chương trình 4. Có k ị ch b ả n th ự c hi ệ n v ớ i d ữ li ệ u th ử nghi ệ m 5. K ế t qu ả th ự c hi ệ n chương trình đúng theo báo cáo 6. Có s ự đóng góp, phát tri ể n c ủ a tác gi ả trong đ ồ án Ý ki ế n khác: ..................................................................... .. .... . ....... .. ....... .. ....... .. .................................................................. .... .. ....... .. ....... .. ...................................................................... .. .... . ....... .. ....... .. ....... .. ...................................................................... . K ế t lu ậ n:  Đ ạ t yêu c ầ u  Ph ả i s ử a ch ữ a l ạ i  Không đ ạ t yêu c ầ u Đà N ẵ ng, ngày tháng 12 năm 2019 Ch ủ t ị ch H ộ i đ ồ ng (Ký và ghi h ọ tên) Cán b ộ duy ệ t ki ể m tra (Ký và ghi h ọ tên) TÓM TẮT Tên đề tài: Xây dựng hệ th ống kiểm tra năng lực Tiếng Anh Sinh viên thực hiệ n: Trần Hữu Trung Số thẻ SV: 102150142 Lớp: 15T2 Hệ thống kiểm tra năng lực tiếng Anh cung cấp cho các trung tâm, công ty , nhóm giải pháp để đánh giá năng lực của học viên, nhân viên , thành viên thông qua những bài kiểm tra một cách nhanh chóng, tiết kiệm thời gian cũng như chi phí. Bên cạnh đó hệ thống cũng cung cấp một số thông tin, bài viết, các bài thi thử và các mẹo để khách có thể có được kiến thức về những bài thi. Các bộ đề thi và câu hỏi được người quản lý tạo ra và nhập vào hệ thống , sau đó tạo các bài thi với các thông tin cụ thể như đề thi được sử dụng , mời các cá nhân tham gia bài thi thông qua email cá nhân hoặc email của công ty. Các cá nhân được mời tham gia sẽ nhìn thấy được thông tin bài thi sau khi đăng nhập vào hệ thống. Kết thúc mỗi lần thi, người quản lý có thể thống kê danh sách số lượng ngườ i tham gia, kết quả chi tiết của từ ng người và thống kê , lưu trữ kết quả đó một các nhanh chóng, dễ dàng. ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN CỘNG HÒA XÃ HÔI CHỦ NGHĨA VIỆT NAM Độc lập - Tự do - Hạnh phúc NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP Họ tên sinh viên: TRẦN HỮU TRUNG Số thẻ sinh viên: 102150142 Lớp: 15T2 Khoa: Công nghệ thông tin Ngành: Công nghệ thông tin 1. Tên đề tài đồ án: Xây dựng hệ thống kiểm tra năng lực Tiếng Anh 2. Đề tài thuộc diện: ☐ Có ký kết thỏa thuận sở hữu trí tuệ đối với kết quả thực hiện 3. Các số liệu và dữ liệu ban đầu: Không có. 4. Nội dung các phần thuyết minh và tính toán: Nội dung của thuyết minh gồm : Mở đầu: Phần mở đầu của luận văn, giới thiệu về nhu cầu thực tế và lý do thực hiện đề tài, đồng thời giới thiệu sơ lược về đề tài và mục tiêu phải đạt được. Chương 1 . Cơ sở lý thuyết : trình bày những lý thuyết học được và đã áp dụng vào hệ thống. Chương 2 . Phân tích và thiết k ế : trình bày các hồ sơ phân tích và hồ sơ thiết kế trong xây dựng hệ thống và luồng hoạt động của hệ thống. Chương 3 . Triển khai và đánh giá kết quả : mô tả cách cài đặ t, vận hành hệ thố ng và đánh giá kết quả đạt được. 5. Các bản vẽ, đồ thị ( ghi rõ các loại và kích thước bản vẽ ): Không có. 6. Họ tên người hướng dẫn: THS. NGUYỄN THỊ MINH HỶ 7. Ngày giao nhiệm vụ đồ án: ……../……./ 201 9 8. Ngày h oàn thành đồ án: ……../……./ 2019 Đà Nẵng, ngày tháng 12 năm 201 9 Trưởng Bộ môn …………………….. Người hướng dẫn i L Ờ I C Ả M ƠN Lời đầu tiên, e m xin phép gửi lời cảm ơn chân thành và sâu sắc đến các Thầy C ô trong Khoa Công nghệ thông tin, cũng như tất cả các Thầy C ô trong trường Đại học Bách khoa – Đại học Đà Nẵng – những người đã dìu dắt, dạy dỗ và truyền đạt kiến thức, kinh nghiệm quý báu của mình trong suốt quá trình em học tập và nghiên cứu tại trường. Em xin bày tỏ tình cảm và lòng biết ơn chân thành tới C ô giáo Ths . Nguyễn Thị Minh Hỷ , người đã từng bước hướng dẫn, giúp đỡ tậ n tình và tạo điều kiện thuận lợi nhất cho em trong quá trình thực hiện đồ án tốt nghiệp của mình. Nhờ đó em đã hoàn thành đồ án đúng tiến độ và tích lũy cho mình nhiều kiến thức quý báu. Con xin gửi lời cảm ơn to lớn nhất đến cha, mẹ và gia đình. Cha, mẹ và gia đình đã luôn ở bên con, là nguồn động lực không mệt mỏi và là chỗ dựa tinh thần vững chắc giúp con vượt qua những khó khăn để hoàn thành đề tài này. Trong quá trình thực hiện đồ án sẽ không tránh khỏi những thiếu sót , em rất mong nhận được sự thông cảm, góp ý và tận tình chỉ bảo của quý Thầy C ô cũng như tất cả các bạn để đề tài được hoàn thiện hơn cũng như tích lũy được thêm nhiều kinh nghiệm bổ ích cho công việc tương lai của mình. Một lần nữa em xin gửi lời cảm ơn chân thành đến tất cả mọi n gười đã giúp đỡ em hoàn thiện đồ án này ! Trần Hữu Trung ii CAM ĐOAN Em xin cam đoan: 1. Nội dung trong đồ án này là do em thực hiện dưới sự hướng dẫn trực tiếp của Cô giáo Th S . Nguyễn Thị Minh Hỷ. 2. Các tham khảo dùng trong đồ án đều được trích dẫn rõ ràng tên tác giả, tên công trình, thời gian, địa điểm công bố. Nếu có những sao chép không hợp lệ, vi phạm quy chế đào tạo , em xin chịu hoàn toàn trách nhiệm. Đà Nẵng, ngày tháng 12 năm 201 9 Sinh viên thực hiện Trần Hữu Trung iii M Ụ C L Ụ C L Ờ I C Ả M ƠN ................................ ................................ ................................ ............................ i CAM ĐOAN ................................ ................................ ................................ .............................. ii M Ụ C L Ụ C ................................ ................................ ................................ ................................ iii DANH SÁCH CÁC B Ả NG ................................ ................................ ................................ ...... v DANH SÁCH CÁC HÌNH V Ẽ ................................ ................................ ............................... vi DANH SÁCH CÁC KÝ HI Ệ U, CH Ữ VI Ế T T Ắ T ................................ ................................ ix Trang GI Ớ I THI Ệ U Đ Ề TÀI ................................ ................................ ................................ .............. 1 CHƯƠNG 1: CƠ S Ở LÝ THUY Ế T VÀ CÔNG C Ụ S Ử D Ụ NG ................................ ........ 4 1.1. T Ổ NG QUAN V Ề PHP VÀ LARAVEL FRAMEWORK ................................ ............ 4 1.2. T Ổ NG QUAN V Ề RESTful API ................................ ................................ ................... 6 1. 3. T Ổ NG QUAN V Ề ReactJS ................................ ................................ ............................ 9 1.4. CÔNG C Ụ S Ử D Ụ NG ................................ ................................ ................................ . 13 CHƯƠNG 2: PHÂN TÍCH VÀ THI Ế T K Ế H Ệ TH Ố NG ................................ ................ 16 2.1. KH Ả O SÁT BÀI TOÁN TH Ự C T Ế ................................ ................................ ............ 16 2.1.1. T ổ ng quan hi ệ n tr ạ ng ................................ ................................ ............................ 16 2.1.2. C ấ u trúc bài ki ể m tra ................................ ................................ ............................. 18 2. 1.3. Tham kh ả o đánh giá năng l ự c theo m ứ c đi ể m ................................ ...................... 18 2.2. PHÂN TÍCH CH Ứ C NĂNG ................................ ................................ ........................ 19 2.2.1. Các ch ứ c năng c ủ a Khách ................................ ................................ ..................... 19 2.2.2. Các ch ứ c năng c ủ a Thành viên ................................ ................................ ............. 19 2.2.3. Các ch ứ c năng c ủ a Qu ả n lý ................................ ................................ ................... 20 2.2.4. Các ch ứ c năng c ủ a Qu ả n tr ị viên ................................ ................................ .......... 20 2.3. SƠ Đ Ồ CA S Ử D Ụ NG ................................ ................................ ................................ 21 2.3.1. Các tác nhân trong h ệ th ố ng ................................ ................................ .................. 21 2.3.2. Sơ đ ồ ca s ử d ụ ng t ổ ng quát c ủ a h ệ th ố ng ................................ .............................. 21 2.3.3. Sơ đ ồ ca s ử d ụ ng đăng ký tài kho ả n c ủ a Khách ................................ ................... 23 2.3.4. Sơ đ ồ ca s ử d ụ ng c ủ a Thành viên ................................ ................................ ......... 23 2.3.5. Sơ đ ồ ca s ử d ụ ng c ủ a Qu ả n lý ................................ ................................ ............... 24 2.3.6. Sơ đ ồ ca s ử d ụ ng c ủ a Qu ả n tr ị viên ................................ ................................ ...... 26 2.4. Đ Ặ C T Ả CA S Ử D Ụ NG ................................ ................................ ............................. 28 2.4.1. Đ ặ c t ả ca s ử d ụ ng Đăng ký ................................ ................................ ................... 28 2.4.2. Đ ặ c t ả ca s ử d ụ ng Đăng nh ậ p ................................ ................................ ................ 29 iv 2.4.3. Đ ặ c t ả ca s ử d ụ ng Qu ả n lý tài kho ả n ................................ ................................ ..... 29 2.4.4. Đ ặ c t ả ca s ử d ụ ng T ạ o đ ề thi ................................ ................................ ................. 30 2.4.5. Đ ặ c t ả ca s ử d ụ ng T ạ o bài thi ................................ ................................ ................ 30 2.4.6. Đ ặ c t ả ca s ử d ụ ng Làm bài thi ................................ ................................ ............... 31 2.4.7. Đ ặ c t ả ca s ử d ụ ng Qu ả n lý k ế t qu ả các bài thi. ................................ ..................... 32 2.4.8. Đ ặ c t ả ca s ử d ụ ng Qu ả n lý ngư ờ i dùng ................................ ................................ . 32 2.4.9. Đ ặ c t ả ca s ử d ụ ng Qu ả n lý các bài vi ế t, m ẹ o ................................ ........................ 33 2.4.10. Đ ặ c t ả ca s ử d ụ ng Qu ả n lý liên h ệ ................................ ................................ ....... 33 2.5. SƠ Đ Ồ HO Ạ T Đ Ộ NG ................................ ................................ ................................ . 34 2.5.1. Sơ đ ồ ho ạ t đ ộ ng c ủ a khách ................................ ................................ ................... 34 2.5.2. Sơ đ ồ ho ạ t đ ộ ng c ủ a thành viên ................................ ................................ ............ 35 2.5.3. Sơ đ ồ ho ạ t đ ộ ng c ủ a qu ả n lý ................................ ................................ ................. 36 2.5.4. Sơ đ ồ ho ạ t đ ộ ng c ủ a qu ả n tr ị viên ................................ ................................ ......... 37 2.6. KI Ế N TRÚC H Ệ TH Ố NG ................................ ................................ ........................... 38 2.7. S Ơ Đ Ồ L Ớ P ................................ ................................ ................................ ................. 38 2.8. THI Ế T K Ế CƠ S Ở D Ữ LI Ệ U ................................ ................................ ...................... 40 2.8.1. Chi ti ế t các b ả ng d ữ li ệ u ................................ ................................ ........................ 40 2.8.2. Sơ đ ồ quan h ệ cơ s ở d ữ li ệ u ................................ ................................ .................. 47 CHƯƠNG 3: TRI Ể N KHAI VÀ CH Ạ Y TH Ử NGHI Ệ M ................................ ................. 49 3.1. MÔI TRƯ Ờ NG TRI Ể N KHAI ................................ ................................ .................... 49 3.2. K Ế T QU Ả DEMO VÀ HƯ Ớ NG D Ẫ N S Ử D Ụ NG CHƯƠNG TRÌNH ..................... 52 3.3. ĐÁNH GIÁ ................................ ................................ ................................ .................. 78 K Ế T LU Ậ N ................................ ................................ ................................ ............................. 79 TÀI LI Ệ U THAM KH Ả O ................................ ................................ ................................ ..... 81 v DANH SÁCH CÁC B Ả NG B ả ng 2.1. Đ ặ c t ả ca s ử d ụ ng đăng ký ................................ ................................ ....................... 28 B ả ng 2.2. Đ ặ c t ả ca s ử d ụ ng đăng nh ậ p ................................ ................................ ................... 29 B ả ng 2.3. Đ ặ c t ả ca s ử d ụ ng qu ả n lý tài kho ả n ................................ ................................ ........ 29 B ả ng 2.4. Đ ặ c t ả ca s ử d ụ ng t ạ o đ ề thi ................................ ................................ ..................... 30 B ả ng 2.5. Đ ặ c t ả ca s ử d ụ ng t ạ o bài thi ................................ ................................ .................... 30 B ả ng 2.6. Đ ặ c t ả ca s ử d ụ ng làm bài thi ................................ ................................ ................... 31 B ả ng 2.7. Đ ặ c t ả ca s ử d ụ ng qu ả n lý k ế t qu ả các bài thi ................................ .......................... 32 B ả ng 2.8. Đ ặ c t ả ca s ử d ụ ng qu ả n lý ngư ờ i dùng ................................ ................................ ..... 32 B ả ng 2.9. Đ ặ c t ả ca s ử d ụ ng qu ả n lý các bài vi ế t, m ẹ o ................................ ............................ 33 B ả ng 2.10. Đ ặ c t ả ca s ử d ụ ng qu ả n lý liên h ệ ................................ ................................ .......... 33 B ả ng 2.11. B ả ng d ữ li ệ u user ................................ ................................ ................................ ... 40 B ả ng 2.12. B ả ng d ữ li ệ u role ................................ ................................ ................................ .... 41 B ả ng 2.13. B ả ng d ữ li ệ u company ................................ ................................ ........................... 41 B ả ng 2.14. B ả ng d ữ li ệ u exam_question ................................ ................................ .................. 41 B ả ng 2.15. B ả ng d ữ li ệ u part ................................ ................................ ................................ .... 42 B ả ng 2.16. B ả ng d ữ li ệ u question ................................ ................................ ............................ 42 B ả ng 2.17. B ả ng d ữ li ệ u answer ................................ ................................ ............................... 43 B ả ng 2.18. B ả ng d ữ li ệ u participant ................................ ................................ ......................... 43 B ả ng 2.19. B ả ng d ữ li ệ u exam ................................ ................................ ................................ 44 B ả ng 2.20. B ả ng d ữ li ệ u report ................................ ................................ ................................ 44 B ả ng 2.21. B ả ng d ữ li ệ u result ................................ ................................ ................................ . 45 B ả ng 2.22. B ả ng d ữ li ệ u exam_question_score ................................ ................................ ....... 45 B ả ng 2.23. B ả ng d ữ li ệ u score_ mapping ................................ ................................ .................. 46 B ả ng 2.24. B ả ng d ữ li ệ u contact ................................ ................................ .............................. 46 B ả ng 2.25. B ả ng d ữ li ệ u slide ................................ ................................ ................................ .. 46 B ả ng 2.26. B ả ng d ữ li ệ u category ................................ ................................ ............................ 47 B ả ng 2.27. B ả ng d ữ li ệ u article ................................ ................................ ................................ 47 vi DANH SÁCH CÁC HÌNH V Ẽ Hình 1.1. Ví d ụ v ề mã PHP nhúng trong HTML ................................ ................................ ...... 4 Hình 1.2. Mô hình MVC ................................ ................................ ................................ ........... 5 Hình 1.3. C ấ u trúc t ổ ch ứ c thư m ụ c và file trong Laravel. ................................ ........................ 6 Hình 1.4. Mô t ả RESTful API ................................ ................................ ................................ .... 6 Hình 1.5. Các phương th ứ c HTTP c ủ a RESTful API ................................ ................................ 7 Hình 1.6. Ho ạ t đ ộ ng c ủ a RESTful API ................................ ................................ ..................... 8 Hình 1.7. Jordan Walke, ngư ờ i sáng l ậ p ra ReactJS ................................ ................................ .. 9 Hình 1.8. Component trong ReactJS. ................................ ................................ ...................... 10 Hình 1.9. S ử d ụ ng state trong Component ................................ ................................ ............... 11 Hình 1.10. Sơ đ ồ vòng đ ờ i c ủ a component trong ReactJS ................................ ...................... 11 Hình 1.11. Công c ụ draw.io ................................ ................................ ................................ ..... 14 Hình 1 .12. Công c ụ Editor VSCode ................................ ................................ ......................... 14 Hình 1.13. Công c ụ Postman ................................ ................................ ................................ .... 15 Hình 2.1. Sơ đ ồ ca s ử d ụ ng t ổ ng quát c ủ a h ệ th ố ng ................................ ................................ . 22 Hình 2.2. Sơ đ ồ ca s ử d ụ ng đăng ký tài kho ả n c ủ a Khách ................................ ....................... 23 Hình 2.3. Sơ đ ồ ca s ử d ụ ng qu ả n lý tài kho ả n trong h ệ th ố ng. ................................ ............... 23 Hình 2.4. Sơ đ ồ ca s ử d ụ ng qu ả n lý bài thi c ủ a thành viên. ................................ ..................... 23 Hình 2.5. Sơ đ ồ ca s ử d ụ ng qu ả n lý k ế t qu ả thi cá nhân c ủ a thành viên. ................................ . 24 Hình 2.6. Sơ đ ồ ca s ử d ụ ng qu ả n lý đ ề thi ................................ ................................ ............... 24 Hình 2.7. Sơ đ ồ ca s ử d ụ ng qu ả n lý bài thi ................................ ................................ .............. 25 Hình 2.8. Sơ đ ồ ca s ử d ụ ng qu ả n lý k ế t qu ả các bài thi ................................ ........................... 25 Hình 2.9. Sơ đ ồ ca s ử d ụ ng qu ả n lý ngư ờ i dùng trong h ệ th ố ng ................................ .............. 26 Hình 2.10. Sơ đ ồ ca s ử d ụ ng qu ả n lý đ ề thi m ẫ u . ................................ ................................ ..... 26 Hình 2.11. Sơ đ ồ ca s ử d ụ ng qu ả n lý các bài vi ế t, tips ................................ ............................ 27 Hình 2.12. Sơ đ ồ ca s ử d ụ ng qu ả n lý báo cáo th ố ng kê các bài thi m ẫ u ................................ .. 27 Hình 2.13. Sơ đ ồ ca s ử d ụ ng qu ả n lý liên h ệ ................................ ................................ ............ 28 Hình 2.14. Sơ đ ồ ho ạ t đ ộ ng các ch ứ c năng c ủ a khách. ................................ ............................ 34 Hình 2.15. Sơ đ ồ ho ạ t đ ộ ng các ch ứ c năng c ủ a thành viên. ................................ ..................... 35 Hình 2.16. Sơ đ ồ ho ạ t đ ộ ng các ch ứ c năng c ủ a qu ả n lý ................................ ........................... 36 Hình 2.17. Sơ đ ồ ho ạ t đ ộ ng các ch ứ c năng c ủ a qu ả n tr ị viên ................................ .................. 37 Hình 2.18. Sơ đ ồ ki ế n trúc h ệ th ố ng ................................ ................................ ........................ 38 Hình 2.19. Sơ đ ồ l ớ p h ệ th ố ng. ................................ ................................ ................................ . 39 Hình 2.20. Sơ đ ồ quan h ệ cơ s ở d ữ li ệ u ................................ ................................ ................... 48 Hình 3.1. Lưu tr ữ mã ngu ồ n trên github ................................ ................................ .................. 4 9 vii Hình 3.2. Môi trư ờ ng Node.js ................................ ................................ ................................ .. 49 Hình 3.3. Trình qu ả n lý thư vi ệ n npm ................................ ................................ ...................... 50 Hình 3.4. Trình qu ả n lý các gói, thư vi ệ n trong PHP ................................ ............................... 50 Hình 3.5. Wampserver ................................ ................................ ................................ .............. 50 Hình 3.6. Ngôn ng ữ back - end s ử d ụ ng ................................ ................................ ..................... 51 Hình 3.7. Ngôn ng ữ font - end s ử d ụ ng ................................ ................................ ...................... 51 Hình 3.8. H ệ qu ả n tr ị cơ s ở d ữ li ệ u ................................ ................................ .......................... 51 Hình 3.9. Môi trư ờ ng heroku deploy b ả n production ................................ .............................. 52 Hình 3.10. Màn hình chính c ủ a h ệ th ố ng ................................ ................................ ................. 53 Hình 3.11. Màn hình đăng ký dành cho cá nhân ................................ ................................ ...... 54 Hình 3.12. Màn hình đăng ký dành cho các trung tâm, công ty ho ặ c nhóm ............................ 54 Hình 3.13. Email thông báo đăng ký tài kho ả n cá nhân thành công và yêu c ầ u xác th ự c ....... 55 Hình 3.14. Email thông báo đăng ký tài kho ả n công ty thành công và yêu c ầ u xác th ự c ........ 55 Hình 3.15. Màn hình đăng nh ậ p vào h ệ th ố ng ................................ ................................ ......... 56 Hình 3.16. Màn hình qu ả n lý tài kho ả n cá nhân ................................ ................................ ....... 56 Hình 3.17. Màn hình danh sách các bài thi đư ợ c m ờ i tha m d ự ................................ ................ 57 Hình 3.18. Màn hình t ổ ng quan đ ề thi trư ớ c khi b ắ t đ ầ u làm bài ................................ ............ 57 Hình 3.19. Màn hình chính làm bài thi ................................ ................................ ..................... 58 Hình 3.20. Xem b ả ng câu tr ả l ờ i đã ch ọ n ................................ ................................ ................. 58 Hình 3.21. Màn hình hi ể n th ị k ế t qu ả đi ể m sau khi k ế t thúc ................................ .................... 59 Hình 3.22. Email thông báo đi ể m sau khi k ế t thúc làm bài thi ................................ ................ 59 Hình 3.23. Màn hình th ố ng kê k ế t qu ả các bài thi đã tham gia ................................ ................ 60 Hình 3.24. Màn hình th ố ng kê k ế t qu ả các bài thi đã tham gia ................................ ................ 60 Hình 3.25. Màn hình chi ti ế t k ế t qu ả các bài thi đã tham gia ................................ ................... 61 Hình 3.26. Màn hình danh sách các bài thi th ử ................................ ................................ ........ 61 Hình 3.27. Màn hình hi ể n th ị thông tin v ề ch ứ ng ch ỉ ................................ ............................... 62 Hình 3.28. Màn hình danh sách bài vi ế t, m ẹ o ................................ ................................ .......... 62 Hình 3.29. Màn hình hi ể n th ị chi ti ế t bài vi ế t ................................ ................................ ........... 63 Hình 3.30. Màn hình qu ả n lý chung c ủ a qu ả n tr ị viên ................................ ............................ 63 Hình 3.31. Màn hình qu ả n lý ngư ờ i dùng ................................ ................................ ............... 64 Hình 3.32. Màn hình ch ỉ nh s ử a thông tin ngư ờ i dùng trong h ệ th ố ng ................................ ..... 64 Hình 3.33. Màn hình qu ả n lý các trung tâm, công ty có trong h ệ th ố ng ................................ .. 65 Hình 3.34. Màn hình qu ả n lý đ ề thi ................................ ................................ .......................... 65 Hình 3.35. Màn hình t ạ o m ớ i đ ề thi ................................ ................................ ......................... 66 Hình 3.36. Màn hình xóa đ ề thi ................................ ................................ ................................ 66 Hì nh 3.37. Màn hình chi ti ế t c ủ a m ộ t đ ề thi ................................ ................................ ............. 67 Hình 3.38. Màn hình t ạ o, ch ỉ nh s ử a câu h ỏ i cho ph ầ n 1 cho đ ề thi ................................ ......... 67 viii Hình 3.39. Màn hình t ạ o, ch ỉ nh s ử a câu h ỏ i cho ph ầ n 2 c ủ a đ ề thi ................................ .......... 68 Hình 3.40. Màn hình t ạ o, ch ỉ nh s ử a câu h ỏ i cho ph ầ n 3 c ủ a đ ề thi ................................ .......... 68 Hì nh 3.41. Màn hình t ạ o, ch ỉ nh s ử a câu h ỏ i cho ph ầ n 4 c ủ a đ ề thi ................................ .......... 69 Hình 3.42. Màn hình t ạ o, ch ỉ nh s ử a câu h ỏ i cho ph ầ n 5 c ủ a đ ề thi ................................ .......... 69 Hình 3.43. Màn hình t ạ o, ch ỉ nh s ử a câu h ỏ i cho ph ầ n 6 c ủ a đ ề thi ................................ .......... 70 Hình 3.44. Màn hình t ạ o, ch ỉ nh s ử a câu h ỏ i cho ph ầ n 7 c ủ a đ ề thi ................................ .......... 70 Hình 3.45. Màn hình danh sách b ả ng đ ố i chi ế u đi ể m ................................ .............................. 71 Hình 3.46. Màn hình chi ti ế t c ủ a m ộ t b ả ng đ ố i chi ế u đi ể m ................................ ..................... 71 Hình 3.47. Màn hình qu ả n lý bài thi m ẫ u ................................ ................................ ................. 72 Hình 3.48. Màn hình t ạ o đ ề thi m ẫ u cho h ệ th ố ng ................................ ................................ ... 72 Hình 3.49. Màn hình qu ả n lý bài thi ................................ ................................ ......................... 73 Hình 3.50. Màn hình t ạ o bài thi m ớ i ................................ ................................ ........................ 73 Hình 3.51. Màn hình qu ả n lý báo cáo, th ố ng kê v ề bài thi ................................ ....................... 74 Hình 3.52. Màn hình hi ể n th ị chi ti ế t báo cáo, th ố ng kê ................................ .......................... 74 Hình 3.53. Màn hình qu ả n lý danh sách các cá nhân đã tham gia các bài thi .......................... 75 Hình 3.54. Màn hình th ố ng kê chi ti ế t các l ầ n thi c ủ a m ộ t cá nhân ................................ ......... 75 Hình 3.55. Màn hình g ử i yêu c ầ u, th ắ c m ắ c ................................ ................................ ............. 76 Hình 3.56. Màn hình qu ả n lý danh sách các liên h ệ ................................ ................................ 76 Hình 3.57. Màn hình xem chi ti ế t liên h ệ ................................ ................................ ................. 77 Hình 3.58. Màn hình qu ả n lý các bài vi ế t, m ẹ o ................................ ................................ ........ 77 Hình 3.59. Màn hình thêm m ớ i bài vi ế t, m ẹ o ................................ ................................ .......... 78 Hình 3.60. Màn hình xóa bài vi ế t ................................ ................................ ............................. 78 ix DANH SÁCH CÁC KÝ HI Ệ U, CH Ữ VI Ế T T Ắ T Từ V iết tắt của Diễn giải API Application Programming Interface Giao diện lập trình ứng dụng RESTful RE presentational S tate T ransfer Một dạng chuyển đổi cấu trúc dữ liệu, một kiểu kiến trúc để viết API HTTP Hypertext Transfer Protocol Giao thức truyền tải siêu văn bản MVC Model - View - Controller Mô hình - Giao diện - Bộ điều khiển DB Database Cơ sở dữ liệu HTML HyperText Markup Language Ngôn ngữ đánh dấu siêu văn bản CSS Cascading Style Sheets Điều khiển cách hiện thị nội dung trang web DOM Document Object Model Mô hình đối tượng tài liệu URI Uniform Resource Identifier Định dạng tài nguyên thống nhất JSX JavaScript XML Một loại cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo kiểu XML SQL Structured Query Language Ngôn ngữ truy vấn cấu trúc JSON JavaS cript Object Notation Kiểu dữ liệu mở trong javascript XML eXtensible Markup Language Ngôn ngữ đánh dấu mở rộng TOEIC Test of English for International Communication Bài kiểm tra tiếng anh cho giao tiếp quốc tế Framework : là một thư viện các lớp đã được xây dựng hoàn chỉnh, bộ khung để phát triển các Phần mềm ứng dụng. Có thể ví Framework như tập các “ Vật liệu” ở từng lĩnh vực cho người lập trình viên, thay vì họ phải mất nhiều thời gian để tự thiết kế trước khi dùng. Do vậy, người lập trình viên chỉ cần tìm hiểu và khai thác các vật liệu này rồi thực hiện để gắn kết chúng lại với nhau, tạo ra sản phẩm . Xây dựng hệ thống kiểm tra năng lực Tiếng Anh SVTH: Trần Hữu Trung GVHD : Ths. Nguyễn Thị Minh Hỷ 1 GI Ớ I THI Ệ U Đ Ề TÀI 1. Lý do chọn đề tài Với tốc độ phát triển kinh tế như hiện nay, sự giao lưu và hội nhập toàn cầu khiến việc hiểu biết và sử dụng tiếng Anh như là yêu cầu cơ bản dù bạn muốn hoặc đã làm việc trong công ty trong nước hay nước ngoài . Tiếng Anh được coi là ngôn ngữ quốc tế số một trên thế giới. Hàng triệu người từ các nền văn hóa khác nhau đều nỗ lực trau dồi kiến thức, khả năng tiếng Anh của mình mỗi ngày. Ở Việt Nam, tiếng Anh cũng đã chiếm được vị trí quan trọng kể từ khi đất nước thực hiện các chính sách mở c ửa hội nhập với các nước trong khu vực cũng như trên Thế giới. Ở nhiều lĩnh vực khác nhau trong xã hội như kinh tế, chính trị, khoa học, du lịch,vv… đều rất cần những người có trình độ tiếng Anh giỏi. Người ta học và sử dụng tiếng Anh với nhiều mục đích kh ác nhau trong các lĩnh vực của họ. Hiện tại, các trung tâm tiếng Anh, các công ty thường tổ chức đánh giá học viên, nhân viên của họ không chỉ thông qua trình độ chuyên môn mà còn đánh giá cao khả năng sử dụng tiếng Anh của nhân viên mình. Qua đó, họ đã tổ chức các kỳ thi kiểm tra về năng lực tiếng Anh cho nhân viên bằng các phương pháp thủ công thông qua giấy và phải c hờ đợi thời gian chấm thi mới đánh giá được, việc đó mất rất nhiều thời gian và chi phí tùy theo quy mô . Cùng với đó, trong bối cảnh của sự bùng nổ công nghệ thông tin nói chung và mạng Internet nói riêng , công nghệ đang hiện diện mọi lúc mọi n ơ i trong toàn bộ khía cạnh của đời sống xã hội. Đặc biệt, Công nghệ thông tin đóng vai trò quan trọng không thể thiếu trong quá trình quản trị, điều hành các hoạt động của mỗi doanh nghiệp , những công việc, thủ tục hành chính thủ công ngày xưa đã dần được s ố hóa mà cụ thể là các trang web. Bằng cách này, các thủ tục được thực hiện nhanh hơn, chính xác hơn, ít tốn công sức, nhân lực hơn và đặc biệt giảm chi phí đi rất nhiều. Chính vì vậy nhiều công ty đã thực hiện số hóa các công tác quản lý và mang lại hiệu quả cao. Vì những lí do trên, em đã quyết định chọn đề tài “ Xây dựng hệ thống kiểm tra năng lực Tiếng Anh ” làm đề tài tốt nghiệp của mình. 2. Mục đích của đề tài “ Xây dựng hệ thống kiểm tra năng lực Tiếng Anh ” với mục đích xây dựng một hệ thống đơn giản, thân thiện , dễ sử dụng chạy trên nền tảng web , tạo ra một hệ thống có thể hỗ trợ cho các trung tâm, công ty , nhóm thực hiện các bài thi để kiểm tra trình độ Xây dựng hệ thống kiểm tra năng lực Tiếng Anh SVTH: Trần Hữu Trung GVHD : Ths. Nguyễn Thị Minh Hỷ 2 tiếng Anh của nhân viên, thành viên một cách nhanh chóng, tiện lợi, kết hợp thống kê số liệu các bài thi, số lượng người tham gia, quản lý và lưu trữ kết quả thi tốt hơn trên hệ thống thay vì phải lưu trữ trên giấy như cũ . Hệ t hống cho phép người dùng đăng ký làm thành viên, qua đó có thể làm các bài thi mẫu, rèn luyện khả năng làm bài thi. Ngoài ra, hệ thống còn cung cấp cho người dùng các kiến thức về các chứng chỉ, cấu trúc của các bài thi, các mẹo để đạt được kết quả cao, các câu hỏi mẫu thông qua các bài viết, các mẹo thi. 3. Nội dung của đề tài Những nội dung công việc cần thực hiện để hoàn thành đề tài bao gồm: - Tìm hiểu bài toán kiểm tra năng lực tiếng Anh thực tế. - Tìm hiểu và phân tích UML. - Phân tích và thiết kế hệ thống thông tin. - Thiết kế cơ sở dữ liệu cho hệ thống. - Tìm hiểu và nghiên cứu, áp dụng các ngôn ngữ, công cụ lập trình PHP, Javascript với framework Laravel và ReactJS, cách thức xây dựng WebAPI theo cơ chế RESTful. - Nghiên cứu và ứng dụng MySQL làm nền tảng cơ sở dữ liệu. - Xây dựng ứng dụng với cá c chức năng chính - Viết báo cáo. 4. Phạm vi sử dụng đề tài Ứng dụng được sử dụng tại các trung tâm tiếng Anh, các công ty, tổ chức hoặc nhóm có nhu cầu kiểm tra năng lực tiếng Anh cho học viên, nhân viên và thành viên của mình. Và các cá nhân muốn tìm hiểu và làm thử để nâng cao kỹ năng làm bài của mình với dạng bài thi kiểm tra năng lực tiếng Anh. 5. Bố cục của báo cáo Đồ án được chia làm 3 chương chính: Với chương thứ nhất đi vào tìm hiểu và nghiên cứu cơ sở lý thuyết để thực hiệ n áp dụng vào đề tài. Tìm hiều công cụ và ngôn ngữ lập trình. T rong chương thứ hai đi vào quá trình khảo sát hiện trạng thực tế, phân tích và thiết kế hệ thống thông tin, xác định các tác nhân chính của hệ thống, thiết kế và x ây dựng cơ sở dữ liệu . Tiếp nối chương thứ hai, chương thứ ba sẽ đi vào quá trình triển khai hệ thống, thực hiện xây dựng mã nguồn chương trình và chạy thử nghiệm . Xây dựng hệ thống kiểm tra năng lực Tiếng Anh SVTH: Trần Hữu Trung GVHD : Ths. Nguyễn Thị Minh Hỷ 3 Đề tài được đánh giá lại qua phần kết luận, đưa ra các đánh giá kết quả về những vấn đề đã gải quyết, những vấn đề chưa giải quyết được và các giải pháp cho để cải tiến, khắc phục những vấn đề đó. Xây dựng hệ thống kiểm tra năng lực Tiếng Anh SVTH: Trần Hữu Trung GVHD : Ths. Nguyễn Thị Minh Hỷ 4 CHƯƠNG 1 : CƠ S Ở LÝ THUY Ế T VÀ CÔNG C Ụ S Ử D Ụ NG 1.1. T Ổ NG QUAN V Ề PHP VÀ LARAVEL FRAMEWORK PHP ( Hypertext Preprocessor ) là một ngôn ngữ lập trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn mở , dùng cho mục đích tổng quát . Nó rất thích hợp với web và có thể dễ dàng nhúng vào trang HTML và xuất ra trình duyệt web theo yêu cầu của người sử dụng. PHP cho phép xây dựng ứng dụng web trên mạng internet tương tác với mọi cơ sở dữ liệu như: MySQL, Oracle,… Ngôn ngữ lập trình PHP được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã n hanh chóng trở thành một ngôn ngữ lập trình phổ biến nhất thế giới. Ngôn ngữ, các thư viện, tài liệu gốc của PHP được xây dựng bởi cộng đồng và có sự đóng góp rất lớn của Zend Inc. , công ty do các nhà phát triển cốt lõi của PHP lập nên nhằm tạo ra một môi trường chuyên nghiệp để đưa PHP phát triển ở quy mô doanh nghiệp . PHP chỉ phân tích các đoạn mã nằm trong những dấu giới hạn của nó. Bất cứ mã nào nằm ngoài những dấu giới hạn đều được xuất ra trực tiếp không thông qua xử lý bởi PHP. Các dấu giới hạn thường dùng nhất là , tương ứng với dấu giới hạn mở và đóng. Các dấu giới hạn và cũng đôi khi được sử dụng. Cách viết dấu giới hạn dạng thẻ ngắn cũng có thể được dùng để thông báo bắt đầu đoạn mã PHP, là . Hình 1.1. Ví d ụ v ề mã PHP nhúng trong HTML Xây dựng hệ thống kiểm tra năng lực Tiếng Anh SVTH: Trần Hữu Trung GVHD : Ths. Nguyễn Thị Minh Hỷ 5  Mô hình MVC trong PHP MVC là viết tắt của Model – View – Controller. Là một kiến trúc phần mềm hay mô hình thiết kế được sử dụng trong kỹ thuật phần mềm. Nói cho dễ hiểu, nó là mô hình phân bố source code thành 3 phần, mỗi thành phần có một nhiệm vụ riêng biệt và độc lập với các thành phần khác . Để từ đó chúng ta có thể giải quyết các công việc một các nhanh gọn và dễ dàng hơn. Hình 1.2 . Mô hình MVC − Thành phần:  Controller : Giữ nhiệm vụ nhận điều hướng các yêu cầu từ người dùng và gọi đúng những phương thức xử lý chúng… Chẳng hạn thành phần này sẽ nhận request từ url và form để thao tác trực tiếp với Model .  Model : Đây là thành phần chứa tất cả các nghiệp vụ logic, phương thức xử lý, truy xuất database, đối tượng mô tả dữ liệu như các Class, hàm xử lý…  View : Đảm nhận việc hiển thị thông tin, tương tác với người dùng, nơi chứa tất cả các đối tượng GUI như textbox, images… Hiểu một cách đơn giản, nó là tập hợp c ác form hoặc các file HTML.  Laravel Là một PHP framework mã nguồn mở và miễn phí, được phát triển bởi Taylor Otwell và nhắm vào mục tiêu hỗ trợ phát triển các ứng dụng web theo kiếm trúc model - Xây dựng hệ thống kiểm tra năng lực Tiếng Anh SVTH: Trần Hữu Trung GVHD : Ths. Nguyễn Thị Minh Hỷ 6 view - controller (MVC). Những tính năng nổi bật của L aravel ba o gồm cú pháp dễ hiểu, rõ ràng , một hệ thống đóng gói modular và quản lý gói phụ thuộc, nhiều cách khác nhau để truy cập vào các cơ sở dữ liệu quan hệ, nhiều tiện ích khác nhau hỗ trợ việc triển khai vào bảo trì ứng dụng . Hình 1.3 . C ấ u trúc t ổ ch ứ c thư m ụ c và file trong Laravel. 1.2. T Ổ NG QUAN V Ề RESTful API  Định nghĩa: RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng web (thiết kế Web services) để tiện cho việc quản lý các resource. Nó chú trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu động…), bao gồm các trạng thái tài nguyên được định dạng và được truyền tải qua HTTP. Hình 1.4 . Mô t ả RESTful API Xây dựng hệ thống kiểm tra năng lực Tiếng Anh SVTH: Trần Hữu Trung GVHD : Ths. Nguyễn Thị Minh Hỷ 7 API ( A pplication P rogramming I nterface) là một tập các quy tắc và cơ chế mà theo đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay thành phần khác. API có thể trả về dữ liệu mà bạn cần cho ứng dụng của mình ở những kiểu dữ liệu phổ biến như JSON hay XML. REST ( RE presentational S tate T ransfer) là một dạng chuyển đổi cấu trúc dữ liệu, một kiểu kiến trúc để viết API. Nó sử dụng phương thức HTTP đơn giản để tạo cho giao tiếp giữa các máy. Vì vậy, thay vì sử dụng một URL cho việc xử lý một số thông tin người dùng, R EST gửi một yêu cầu HTTP như GET, POST, PUT, DELETE, vv đến một URL để xử lý dữ liệu. RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng dụng web để quản lý các resource. RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến ngày nay để cho các ứng dụng (web, mobile…) khác nhau giao tiếp với nhau. Chức năng quan trọng nhất của REST là quy định cách sử dụng các HTTP method (như GET, POST, PUT, DELETE…) và cách định dạng các URL cho ứng dụng web để quản các resource. RESTf ul không quy định logic code ứng dụng và không giới hạn bởi ngôn ngữ lập trình ứng dụng, bất kỳ ngôn ngữ hoặc framework nào cũng có thể sử dụng để thiết kế một RESTful API . Hình 1.5 . Các phương th ứ c HTTP c ủ a RESTful API  Hoạt động REST hoạt động chủ yếu dựa vào giao thức HTTP. Các hoạt động cơ bản nêu trên sẽ sử dụng những phương thức HTTP riêng. Xây dựng hệ thống kiểm tra năng lực Tiếng Anh SVTH: Trần Hữu Trung GVHD : Ths. Nguyễn Thị Minh Hỷ 8  GET (SELECT): Trả về một Resource hoặc một danh sách Resource.  POST (CREATE): Tạo mới một Resource.  PUT (UPDATE): Cập nhật thông tin cho Resource.  DELETE (DELETE): Xoá một Resource. Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa. Hình 1.6 . Ho ạ t đ ộ ng c ủ a RESTful API Sau quá trình gọi API việc trả về những mã trạng thái cụ thể k hi nhận và phiên dịch một HTTP Request, Server sẽ gửi tín hiệu phản hồi là một HTTP Response là một trong số các loại trạng thái sau:  200 OK – Trả về thành công cho những phương thức GET, PUT, PATCH hoặc DELETE.  201 Created – Trả về khi một Resouce vừa đượ c tạo thành công.  204 No Content – Trả về khi Resource xoá thành công.  304 Not Modified – Client có thể sử dụng dữ liệu cache.  400 Bad Request – Request không hợp lệ  401 Unauthorized – Request cần có auth.  403 Forbidden – B ị từ chối không cho phép.  404 Not Found – Không tìm thấy resource từ URI .  405 Method Not Allowed – Phương thức không cho phép với user hiện tại.  410 Gone – Resource không còn tồn tại, Version cũ đã không còn hỗ trợ. Xây dựng hệ thống kiểm tra năng lực Tiếng Anh SVTH: Trần Hữu Trung GVHD : Ths. Nguyễn Thị Minh Hỷ 9  415 Unsupported Media Type – Không hỗ trợ kiểu Resource này.  422 Unprocess able Entity – Dữ liệu không được xác thực  429 Too Many Requests – Request bị từ chối do bị giới hạn 1.3. T Ổ NG QUAN V Ề ReactJS React (Hay ReactJS, React.js) là một thư viện Javascript mã nguồn mở để xây dựng các thành phần giao diện có thể tái sử dụng. Nó được tạo ra bởi Jordan Walke , một kỹ sư phần mềm tại Facebook. Người bị ảnh hưởng bởi XHP (Một nền tảng thành phần HTML cho PHP). Re act lần đầu tiên được triển khai cho ứng dụng Newsfeed của Facebook năm 2011, sau đó được triển khai cho Instagram.com năm 2012. Nó được mở mã nguồn (open - sourced) tại JSConf US tháng 5 năm 2013. Hình 1. 7 . Jordan Walke, ngư ờ i sáng l ậ p ra ReactJS - Đặc tính của ReactJS:  Tư tưởng của ReactJS là xây dựng lên các components có tính tái sử dụng, dễ dàng cho việc chia nhỏ vấn đề, testing. Nó giúp chúng ta dễ dàng quản lý , mở rộng hệ thống .  ReactJS luôn giữ các components ở trạng thái stateless (nhiều nhất có thể) khiến ta dễ dàng quản lí bởi nó chẳng khác gì một trang static HTML. Bản thân các components này không có trạng thái (state) nó nhận đầu vào từ bên ngoài và chỉ hiển thị ra dựa vào các đầu vào đó, điều này giải thích tại sao n ó mang tính tái sử dụng và dễ dàng cho việc test.  Các đặc trưng của ReactJS: - Component:  Là một đoạn mã ngắn có ý nghĩa thể hiện một chức năng hay đối tượng nhất định, có thể tái sử dụng. Xây dựng hệ thống kiểm tra năng lực Tiếng Anh SVTH: Trần Hữu Trung GVHD : Ths. Nguyễn Thị Minh Hỷ 10  Một ứng dụng React có thể sử dụng hàng chục, hoặc hàng trăm cá c component liên kết và tương tác với nhau.  Ta có thể tạo ra một component bằng cách extends từ Component như sau : Hình 1.8 . Component trong ReactJS .  Phương thức quan trọng nhất là render(), phương thức này được trigger khi component đã sẵn sàng để được render lên trên trang . Trong hàm này, sẽ trả về mô tả cho việc bạn muốn React render cái gì lên trên trang . Hàm rend er chính là mô tả cụ thể của giao d iện người dùng tại bất cứ thời điểm nào. Vì thế nếu dữ liệu thay đổi, React sẽ quan tâm đến việc cập nhật lại giao diện với dữ liệu tương ứng. - Props:  Thông tin được truyền từ component này sang component khác được gọi là props.  Props của một component có thể là một object, function, string, number …. Nó chứa thông tin về thành phần đó. - State:  Một component trong React có 2 cách để lấy thông tin props và state. Không như props, state của 1 component không được truyền từ bên ngoài vào. Một component sẽ tự qu yết định state của chính nó. Để tạo ra state cho component, ta sẽ phải khai báo nó trong hàm constructor . Xây dựng hệ thống kiểm tra năng lực Tiếng Anh SVTH: Trần Hữu Trung GVHD : Ths. Nguyễn Thị Minh Hỷ 11 Hình 1.9 . S ử d ụ ng state trong Component  This.state ở đây là một đối tượng. Để truy cập đến các state ta sử dụng cú pháp: this.state.name_of_property . Và cách phổ biến để thay đổi state của một component là dùng hàm setState(). - Lifecycle : Hình 1.10. Sơ đ ồ vòng đ ờ i c ủ a component trong ReactJS  Một thành phần đặc trưng không kém Props và State của React đó là LifeCycle. LifeCycle là những phương thức được viết sẵn truy cập đến từng thời điểm trong một vòng đời của component, từ đó chúng ta có thể triển khai ý tưởng một cách dễ dàng mà linh động.  contructor(props): Xây dựng hệ thống kiểm tra năng lực Tiếng Anh SVTH: Trần Hữu Trung GVHD : Ths. Nguyễn Thị Minh Hỷ 12 Hàm này là hàm khởi tạo, là hàm chạy ngay sau khi componen t được tạo ra, đầu vào của hàm này là props (tức là thuộc tính của component được dùng để truyền dữ liệu từ bên ngoài vào). Trong hàm này chúng ta cũng có thể khởi tạo state cho component.  componentWillMount: Trước khi render thì sẽ gọi đến hàm này. Ở đây chúng ta có thể đăng kí các biến toàn cục và có thể dựa vào props tính toán và setState nếu có.  render Là hàm bắt buộc, vì đây là đầu ra của component. Nó chịu trách nhiệm trả về một đối tượng JSX những gì chúng ta muốn hiển thị ra bên ngoài.  componentDidMount: Là hàm được gọi ngay sau khi giao diện được render xong, có nghĩa là khi giao diện hiện lên sẽ gọi hàm này. Trong hàm này chúng ta có thể dùng để lấy dữ liệu từ api, server… và setState dữ liệu ra.  componentWillRecieveProps(nextProps): Hàm này được gọi đến mỗi khi props thay đổi. Do vậy được sử dụng để thay đổi trạng thái của các component phụ thuộc vào props và sử dụng các kết quả, khởi tạo các biến có tính chất bất đồng bộ .  shouldComponentUpdate (nextProps, nextState) : Hàm này được gọi khi state và props thay đổi và sẽ trả về kết quả true/false, chúng ta sử dụng hàm này để xử lý xem có cần update component hay không. Mặc định hàm này sẽ trả về true.  componentWillUpdate (nextProps, nextState) : Hàm này được gọi dựa vào kết quả của hàm shouldComponentUpdate, nếu trả về false thì hàm này sẽ không được gọi .  componentDidUpdate (prevProps, prevState) : Hàm này được gọi ngay sau khi component được render lại .  componentWillUnmount: Hàm này được gọi khi component loại bỏ DOM, thực hiện các thao t ác dọn dẹp, loại bỏ những phần tử dư thừa và hủy các timer…  Ưu điểm và nhược điểm của ReactJS : - Ưu điểm:  ReactJs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất nhiều. Xây dựng hệ thống kiểm tra năng lực Tiếng Anh SVTH: Trần Hữu Trung GVHD : Ths. Nguyễn Thị Minh Hỷ 13 Reactjs cũng tính toán những thay đổi nào cần cập nhật lên DOM và chỉ thực hiện chúng. Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí.  ReactJ s giúp việc viết các đoạn code JS dễ dàng hơn: Nó dùng cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript. Ta có thể thêm vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi. Đây là đặc tính thú vị của Reactjs. Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX.  Reactjs có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng