Phát triển hệ thống từ điển việt lào trực tuyến chuyên ngành công nghệ thông tin

 View: chứa các mã html, hiển thị dữ liệu được chỉ định bởi controller  Migrations: cung cấp một hệ thống kiểm soát các phiên bản lược đồ cơ sở dữ liệu database cheme, làm cho web ứng

LỜI CẢM ƠN

Sau một thời gian học tập, nghiên cứu và triển khai khóa luận tốt nghiệp:

“Phát triển hệ thống từ điển Việt - Lào trực tuyến chuyên ngành CNTT ”, đến

nay tôi đã hoàn thành khóa luận tốt nghiệp của mình

Tôi xin bày tỏ tấm lòng biết ơn sâu sắc nhất tới ThS Nguyễn Duy Hiếu đã

trực tiếp hướng dẫn, chỉ bảo tận tình trong suốt quá trình tôi thực hiện khóa luận

tốt nghiệp này

Đồng thời tôi cũng chân thành cảm ơn tới lãnh đạo Nhà trường, Ban chủ

nhiệm Khoa cùng các thầy cô giáo đã giúp đỡ, tạo điều kiện để tôi có cơ hội nghiên

cứu, học tập và hoàn thành khóa luận tốt nghiệp này

Do hạn chế về trình độ chuyên môn và thời gian thực hiện nên đề tài không

tránh khỏi những thiếu sót, rất mong nhận được sự góp ý của thầy cô để tôi có thể

hoàn thành tốt nhất đề tài nghiên cứu này

Xin chân thành cảm ơn!

Sơn La, tháng 5 năm 2018

Sinh viên

Trịnh Minh Quý

MỤC LỤC

MỞ ĐẦU 1

1 Lý do chọn đề tài 1

2 Mục đích nghiên cứu 1

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

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

5 Phương pháp nghiên cứu 2

6 Bố cục đề tài 2

CHƯƠNG 1: NGÔN NGỮ PHP VÀ PHP FRAMEWORK LARAVEL 3

1 Ngôn ngữ PHP 3

2 PHP framework Laravel 3

2.1 Tìm hiểu về Framework và mô hình MVC (Model – View- Controller) 4

2.2 Sơ lược các tính năng cơ bản của Laravel 4

3 AJAX và JSON 6

3.1 AJAX 6

3.2 JSON 7

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THÔNG TỪ ĐIỂN VIỆT - LÀO TRỰC TUYẾN CHUYÊN NGÀNH CÔNG NGHỆ THÔNG TIN 9

1 Mô tả hệ thống 9

1.1 Các chức năng 9

1.2 Nhiệm vụ của hệ thống 9

2 Liệt kê và đặc tả các ca sử dụng 10

2.1 Use case 10

2.2 Đặc tả ca sử dụng 10

2.3 Biểu đồ ca sử dụng 16

2.4 Biểu đồ hoạt động 18

2.5 Biểu đồ trình tự 26

2.6 Biểu đồ thực thể liên kết 33

2.7 Thiết kế cơ sở liệu 33

CHƯƠNG 3: CÀI ĐẶT VÀ THỬ NGHIỆM ỨNG DỤNG 37

1 Thiết kế giao diện 37

1.1 Trang đăng nhập 37

1.2 Trang đăng ký 38

1.3 Khung hiển thị của website 38

1.4 Quản lý từ điển 40

1.5 Quản lý từ 41

1.6 Quản lý người dùng 43

1.7 Quản lý bình luận 43

2 Cài đặt một số chức năng 44

2.1 Đăng nhập 44

2.2 Đăng ký 44

2.3 Quản lý từ điển 45

2.4 Quản lý từ 46

2.5 Quản lý người dùng 48

2.6 Quản lý bình luận 49

KẾT LUẬN 53

TÀI LIỆU THAM KHẢO 54

DANH MỤC HÌNH ẢNH

Hình 1: Mô hình ứng dụng web truyền thống so sánh với mô hình có áp dụng

Ajax 7

Hình 2: Biểu đồ Use Case của quản trị viên (Back End) 16

Hình 3: Biểu đồ Use Case của người dùng (Front End) 17

Hình 4: Biểu đồ hoạt động đăng nhập 18

Hình 5: Biểu đồ hoạt động đăng ký 19

Hình 6: Biểu đồ hoạt động quản lý từ 20

Hình 7: Biểu đồ hoạt động thêm từ 21

Hình 8: Biểu đồ hoạt động quản lý người dùng 22

Hình 9: Biểu đồ hoạt động tra từ 23

Hình 10: Biểu đồ hoạt động thêm từ vào danh sách yêu thích 23

Hình 11: Biểu đồ hoạt động quản lý từ điển 24

Hình 12: Biểu đồ hoạt động quản lý bình luận 25

Hình 13: Biểu đồ hoạt động bình luận 26

Hình 14: Biểu đồ trình tự đăng nhập 26

Hình 15: Biểu đồ trình tự đăng ký 27

Hình 16: Biểu đồ trình tự duyệt từ 27

Hình 17: Biểu đồ trình tự quản lý từ của quản trị viên 28

Hình 18: Biểu đồ trình tự quản lý từ của người dùng 29

Hình 19: Biểu đồ trình tự thên từ vào yêu thích 30

Hình 20: Biểu đồ trình tự tra từ 30

Hình 21: Biểu đồ trình tự quản lý từ điển 31

Hình 22: Biểu đồ trình tự quản lý bình luận 32

Hình 23: Biểu đồ trình tự bình luận 32

Hình 24: Biểu đồ thực thể liên kết (E-R) 33

Hình 25: Trang đăng nhập 37

Hình 26: Trang đăng ký 38

Hình 27: Khung hiển thị của người dùng 38

Hình 28: Khung hiển thị của quản trị viên 39

Hình 29: Trang danh sách từ điển 40

Hình 30: Trang cập nhật từ điển 40

Hình 31: Trang thêm mới từ điển 40

Hình 32: Trang danh sách từ 41

Hình 33: Trang cập nhật từ 41

Hình 34: Trang duyệt từ mới 42

Hình 35: Trang duyệt từ sửa 42

Hình 36: Trang nhập từ 42

Hình 37: Trang xuất từ 42

Hình 38: Trang danh sách người dùng 43

Hình 39: Trang danh sách bình luận 43

Hình 40: Trang duyệt bình luận 43

Hình 41: Giao diện đăng nhập 44

Hình 42: Giao diện đăng ký 44

Hình 43: Giao diện danh sách từ điển 45

Hình 44: Giao diện cập nhật từ điển 45

Hình 45: Giao diện danh sách từ 46

Hình 46: Giao diện cập nhật từ 46

Hình 47: Giao diện duyệt từ mới 47

Hình 48: Giao diện thêm từ mới 47

Hình 49: Giao diện duyệt từ sửa 48

Hình 50: Giao diện quản lý người dùng 48

Hình 51: Giao diện danh sách bình luận 49

Hình 52: Giao diện duyệt bình luận mới 49

Hình 53: Giao diện tìm kiếm từ 50

Hình 54: Giao diện xem từ 50

Hình 55: Giao diện sửa từ 51

Hình 56: Giao diện danh sách từ yêu thích 52

DANH MỤC BẢNG BIỂU

Bảng 1: Bảng người dùng 33

Bảng 2: Bảng từ 34

Bảng 3: Bảng từ tạm 34

Bảng 4: Bảng trạng thái 34

Bảng 5: Bảng bình luận 35

Bảng 6: Bảng yêu thích 35

Bảng 7: Bảng vai trò của người dùng 35

Bảng 8: Bảng vai trò 36

Bảng 9: Bảng trạng thái 36

Bảng 10: Bảng từ điển 36

Bảng 11: Bảng hình ảnh 36

đi mới cho ngành giáo dục, giúp đổi mới phương pháp và hình thức dạy nhằm nâng cao chất lượng dạy và học

Các bạn du học sinh Lào khi học tiếng Việt trên lớp chỉ ở mức độ là giao tiếp chứ chưa thực sự chuyên sâu vào chuyên ngành Gây khó khăn trong việc tham khảo tài liệu, nghe giảng

Hiện nay, các từ điển chủ yếu vẫn là loại từ điển giấy và là các từ giao tiếp mang nghĩa chung, với đặc thù của chuyên ngành công nghệ thông tin thì việc cập nhật các từ mới khó có thể bắt kịp sự thay đổi nhanh chóng của công nghệ

Hệ thống từ điển Việt - Lào chuyên ngành Công nghệ thông tin giúp các lưu học sinh Lào nhanh chóng nắm bắt ý nghĩa của các từ chuyên ngành, thuận tiện hơn trong việc trao đổi về kiến thức giữa sinh viên Lào và sinh viên Việt Nam, chủ động trong việc tìm hiểu thêm và hiểu sâu hơn về bài học, nâng cao hiệu quả học tập, giúp người học hiểu bài nhanh hơn nhờ những thuật ngữ chuyên ngành có trong từ điển

Tiếp nối đề tài nghiên cứu khoa học “Phần mềm từ điển Việt - Lào chuyên ngành Công nghệ thông tin” khi mới chỉ dừng lại ở người dùng cho máy tính, chưa thực sự tiện lợi khi yêu cầu người sử dụng phải có máy tính, chính vì thế tôi đã

chọn và thực hiện đề tài “Phát triển hệ thống từ điển Việt - Lào trực tuyến chuyên ngành Công nghệ Thông tin” xây dựng trên nền web, có thể truy cập từ nhiều hệ

điều hành và nhiều thiết bị trong đó có điện thoại thông minh là phổ biến nhất, tiện lợi khi sử dụng nhất Ngoài ra với tính mở của từ điển, người sử dụng không những

có thể tra cứu mà còn có thể đóng góp từ mới, chỉnh sửa từ đã có, bình luận tương tác với nhau

2 Mục đích nghiên cứu

- Nghiên cứu về PHP Framework Laravel, AJAX, JSON

2

- Nghiên cứu và phát triển ứng dụng “Hệ thống từ điển Việt - Lào trực tuyến chuyên ngành Công nghệ Thông tin”

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

- Ngôn ngữ PHP và PHP framework Laravel, AJAX, JSON

- Hệ thống từ điển Viê ̣t - Lào trực tuyến chuyên ngành Công nghệ Thông tin

- Chương 1 PHP framework Laravel, AJAX, JSON

- Chương 2 Phân tích và thiết kế hệ thống từ điển Viê ̣t - Lào trực tuyến chuyên ngành Công nghệ Thông tin

- Chương 3 Cài đặt và thử nghiệm ứng dụng

 Kết luận

 Tài liệu tham khảo

PHP chạy trên môi trường Webserver và lưu trữ dữ liệu thông qua hệ quản trị

cơ sở dữ liệu nên PHP thường đi kèm với Apache, MySQL và hệ điều hành Linux (LAMP)

Apache là một phần mềm web server có nhiệm vụ tiếp nhận request từ trình duyệt người dùng sau đó chuyển giao cho PHP xử lý và gửi trả lại cho trình duyệt MySQL cũng tương tự như các hệ quản trị cơ sở dữ liệu khác (Postgress, Oracle, SQL server ) đóng vai trò là nơi lưu trữ và truy vấn dữ liệu

Linux: Hệ điều hành mã nguồn mở được sử dụng rất rộng rãi cho các webserver Thông thường các phiên bản được sử dụng nhiều nhất là RedHat Enterprise Linux, Ubuntu

Những tính năng nổi bật của Laravel bao gồm cú pháp dễ hiểu - rõ ràng, chứa rất nhiều tính năng có thể giúp tăng tốc quá trình phát triển website lên một cách nhanh chóng, giúp tiết kiệm một khối lượng thời gian đáng kể Không chỉ vậy, website được xây dựng trên nền Laravel bảo mật rất tốt Nó sẽ ngăn chặn được rất nhiều các kiểu tấn công từ bên ngoài tới website

Phiên bản mới nhất hiện tại của Laravel là 5.6

2.1 Tìm hiểu về Framework và mô hình MVC (Model - View - Controller)

- Framework là một thư viện các hàm xây dựng sẵn, chuyên dùng phục vụ cho công việc lập trình PHP Việc sử dụng các framework hỗ trợ công việc lập trình nhanh hơn,tiết kiệm thời gian và đảm bảo bảo mật hơn cho hệ thống Một PHP Framework thường được xây dựng trên mô hình MVC

- Mô hình MVC (Model – View- Controller):

M là Model: cấu trúc dữ liệu theo cách tin cậy và chuẩn bị dữ liệu theo lệnh của controller

V là View: Hiển thị dữ liệu cho người dùng theo cách dễ hiểu dựa trên hành động của người dùng

C là Controller: Nhận lệnh từ người dùng, gửi lệnh đến cho Model để cập nhập dữ liệu, truyền lệnh đến View để cập nhập giao diện hiển thị

2.2 Sơ lược các tính năng cơ bản của Laravel

 Bundles: Ở laravel phiên bản 3.x, cung cấp một hệ thống đóng gói các module, với rất nhiều tính năng đi kèm

 Composer: Ở laravel phiên bản 4.x, được sử dụng như một công cụ quản lý với tính năng như thêm các gói cài đặt, các chức năng PHP phụ trợ cho Laravel có trong kho Packagist

 Eloquent ORM (object relation mapping): ánh xạ các đối tượng và quan

hệ cơ sở dữ liệu, cung cấp các phương thức nội bộ để thực thi đồng thời cũng

bổ sung các tính năng hạn chế về mối quan hệ giữa các đối tượng cơ sở dữ liệu Eloquent ORM trình bày các bảng trong cơ sở dữ liệu dưới dạng các

5

lớp, cung cấp thêm lựa chọn truy cập cơ sở dữ liệu trực tiếp mới mẻ hơn, chuyên nghiệp hơn

 Application logic: Là một phần của phát triển ứng dụng, được sử dụng bởi

bộ điều khiển controllers

 Routes: Định nghĩa mối quan hệ giữa các đường dẫn (url), các liên kết (link) Khi một liên kết được tạo ra bằng cách sử dụng tên của routes, thì một định danh liên kết thống nhất sẽ được tạo ra bởi laravel

 Restful Controller: cung cấp các tùy chọn để tách các logic phía sau các request HTTP POST, GET

 Class auto loading: cung cấp việc tải tự động các class trong PHP, mà không cần include các class vào Tùy thuộc vào yêu cầu các class cần thiết sẽ được nạp vào, hạn chế các class không cần thiết

 View: chứa các mã html, hiển thị dữ liệu được chỉ định bởi controller

 Migrations: cung cấp một hệ thống kiểm soát các phiên bản lược đồ cơ sở

dữ liệu (database cheme), làm cho web ứng dụng có khả năng tương tác phù hợp những thay đổi logic, các đoạn mã code của ứng dụng và những thay đổi cần thiết trong việc bố trí cơ sở dữ liệu, triển khai nới lỏng và cập nhật các ứng dụng

 Unit Testing: đóng một vai trò quan trọng trong Laravel, Unit testting chứa rất nhiều các hệ thống unit testing, giúp phát hiện và ngăn chặn lỗi trong khuôn khổ nhất định Unit Testing có thể được chạy thông qua tiện ích command-line

 Automatic pagination: Tính năng tự động phân trang được tích hợp

vào Laravel giúp đơn giản hóa các nhiệm vụ thực hiện phân trang so với các phương pháp thông thường

- Ajax không phải là một công nghệ đơn lẻ mà là tập hợp của một vài công nghệ, chúng được kết hợp lại với nhau và tạo nên một sự đột phá Cụ thể, danh sách

- Cách tiếp cận này trong nhiều trường hợp không tạo nên được trải nghiệm tốt cho người dùng Trong lúc server đang thực hiện chức năng của mình, client sẽ làm gì? Hiển nhiên rồi, người dùng sẽ đợi đến lượt mình, người dùng còn phải đợi lâu hơn

- Một điều rõ ràng, nếu bạn xây dựng một ứng dụng web từ đầu, bạn sẽ không muốn người dùng phải chờ đợi quá lâu (câu chuyện sẽ rất khác nếu như bạn kế thừa code từ ai đó đã làm trước đấy, bảo trì và tiếp tục bổ sung code vào project) Mỗi khi một màn hình đang được tải về từ server, tại sao sự tương tác của người dùng với trình duyệt lại phải dừng lại? Tại sao lại bắt người dùng bất đắc dĩ phải biết rằng khi đó ứng dụng web đang tương tác với server? Điều này

có cần thiết hay không?

- JSON ban đầu đƣợc phát triển để dành phục vụ cho ứng dụng viết bằng JavaScript Bản thân thuật ngữ JSON là viết tắt của cụm từ JavaScript Object Notation Tuy nhiên vì JSON là một định dạng dữ liệu nên nó có thể đƣợc sử dụng bởi bất cứ ngôn ngữ nào mà không giới hạn với JavaScript

 Number: kiểu số bao gồm số nguyên và số thực

 String: kiểu chuỗi, nội dung bao bởi cặp dấu nháy kép “, những ký tự đặt biệt được escape bởi dấu \.Theo chuẩn JSON thì không sử dụng dấu nháy đơn như Javascript để bọc chuỗi

 Boolean: kiểu luận lý bao gồm 2 giá trị là true và false

 Array: kiểu mảng, gồm các phần tử phân cách nhau bởi dấu phẩy „,‟

và mảng được bao bởi cặp dấu [ và ]

 Object: kiểu đối tượng, gồm những cặp giá trị đi cùng nhau, mỗi cặp phân cách bởi dấu phẩy ‟,‟, đối tượng được bao bởi cặp dấu { và }, cặp giá trị bao gồm tên và giá trị được phân cách bởi dấu hai chấm

‟:‟

 Null: giá trị null

o Kiểu DateTime: Do JSON là một chuẩn chung có nghĩa là không phụ thuộc nền tảng hay công nghệ, vì vậy JSON không định ra một kiểu thời gian cụ thể, do mỗi ngôn ngữ lập trình, mỗi nền tảng triển khai có sự quy định về kiễu dữ liệu ngày tháng khác nhau, đơn cử như Javascript lưu trữ kiểu Date chỉ từ 1-1-1970 trở đi hoặc như PHP thì không có kiểu dữ liệu Date, Date chỉ là một con số chỉ ra số millisecond tính từ 1-1-1970 (với phiên bản 5.1.0 thì từ 13-12-1901), còn NET thì có giới hạn ngày gần như rộng nhất Chính vì không thể quy định được nên cách gửi / nhận kiểu dữ liệu ngày tháng (Date) bằng JSON cũng khác nhau

1.1.6 Thêm từ vào danh sách yêu thích

Người dùng có thể thêm các từ vào danh sách yêu thích của mình

- Điều kiện tiên quyết: Không

- Kết quả: Đăng ký được tài khoản

- Ngoại lệ: Nếu username bị trùng, yêu cầu người dùng nhập lại

- Tác nhân: Người dùng, Quản trị viên

- Điều kiện tiên quyết: Không

- Kết quả: Đăng nhập được vào hệ thống

- Tác nhân: Quản trị viên

- Sự kiện kích hoạt: Quản trị viên chọn các chức năng quản lý từ: phê duyệt từ mới, phê duyệt từ sửa, sửa từ, xóa từ

- Điều kiện tiên quyết: Đã đăng nhập

+ Phê duyệt từ mới

 Chọn từ cần phê duyệt trong danh sách

 Chỉnh sửa thông tin của từ và bấm lưu

 Kết quả: Cập nhật thông tin của từ

+ Xóa

 Tìm đến từ cần xóa

 Bấm xóa

- Mô tả: Người dùng thực hiện thêm từ cho hệ thống

- Tác nhân: Quản trị viên hoặc Người dùng

- Sự kiện kích hoạt: Quản trị viên hoặc Người dùng chọn chức năng

 Quản trị viên hoặc Người dùng nhập thông tin như: từ gốc, nghĩa của

từ, ngôn ngữ nguồn - ngôn ngữ đích

- Kết quả: Thêm từ vào hệ thống thành công

- Tần suất sử dụng: Trung bình

2.2.5 Quản lí người dùng

- Tên mục: Quản lí người dùng

- Mô tả: Quản trị viên thực hiện xóa người dùng

- Tác nhân: Quản trị viên

- Sự kiện kích hoạt: Quản trị viên chọn chức năng “Quản lý người dùng”

- Điều kiện tiên quyết: Đã đăng nhập

- Dòng sự kiện chính:

 Quản trị viên đăng nhập vào hệ thống, lựa chọn chức năng Quản lý người dùng

- Mô tả: Người sử dụng tra cứu từ cần dịch

- Tác nhân: Quản trị viên, Người dùng, Khách

- Sự kiện kích hoạt: Người dùng chọn chức năng tra từ

- Điều kiện tiên quyết: Không

- Dòng sự kiện chính:

 Người sử dụng chọn chức năng tra từ

 Gõ từ cần tìm kiếm

 Chọn từ trong danh sach kết quả tìm kiếm

- Kết quả: Hiển thị từ cần tra

- Tần suất sử dụng: Cao

2.2.7 Thêm từ vào mục yêu thích

- Tên mục: Thêm từ vào mục yêu thích

- Mô tả: Người sử dụng thêm từ vào danh sách yêu thích của mình

- Tác nhân: Người dùng

- Sự kiện kích hoạt: Người dùng chọn chức năng thêm vào yêu thích

- Điều kiện tiên quyết: Đã tra từ

- Dòng sự kiện chính:

 Người sử dụng chọn chức năng thêm từ vào danh sách yêu thích

- Kết quả: Từ được lưu vào danh sách yêu thích

- Tần suất sử dụng: Trung bình

2.2.8 Quản lí từ điển

- Tên mục: Quản lí từ điển

- Mô tả: Quản trị viên thực hiện thêm mới, sửa hoặc xóa từ điển

14

- Tác nhân: Quản trị viên

- Sự kiện kích hoạt: Quản trị viên chọn chức năng “Quản lý từ điển”

- Điều kiện tiên quyết: Đã đăng nhập

- Sự kiện kích hoạt: Người dùng thêm bình luận trên trang tra từ

- Điều kiện tiên quyết: Đã đăng nhập

- Dòng sự kiện chính:

o Người dùng đăng nhập vào hệ thống, điền bình luận vào ô thêm bình luận

o Người dùng bấm nút gửi

15

- Kết quả: Từ điển sẽ được thêm, sửa hoặc xóa khỏi hệ thống

- Tần suất sử dụng: Trung bình

2.2.10 Quản lý bình luận

- Tên mục: Quản lý bình luận

- Mô tả: Quản trị viên quản lý bình luận của người dùng

- Tác nhân: Quản trị viên

- Sự kiện kích hoạt: Quản trị viên chọn chức năng “Quản lý bình luận”

- Điều kiện tiên quyết: Đã đăng nhập

 Tất cả bình luận: có thể xem và xóa bình luận

 Duyệt bình luận mới: kiểm tra và phê duyệt các bình luận mới của người dùng

- Kết quả: Từ điển sẽ được thêm, sửa hoặc xóa khỏi hệ thống

- Tần suất sử dụng: Trung bình

16

3 Biểu đồ ca sử dụng

 Biểu đồ Use Case của quản trị viên (Back End)

Hình 2: Biểu đồ Use Case của quản trị viên (Back End)

17

 Biểu đồ Use Case của người dùng (Front End)

Hình 3: Biểu đồ Use Case của người dùng (Front End)

19

4.2 Đăng ký

Hình 5: Biểu đồ hoạt động đăng ký

20

4.3 Quản lý từ

Hình 6: Biểu đồ hoạt động quản lý từ

21

4.4 Thêm từ

Hình 7: Biểu đồ hoạt động thêm từ

22

4.5 Quản lý người dùng

Hình 8: Biểu đồ hoạt động quản lý người dùng

23

4.6 Tra từ

Hình 9: Biểu đồ hoạt động tra từ

4.7 Thêm từ vào danh sách yêu thích

Hình 10: Biểu đồ hoạt động thêm từ vào danh sách yêu thích

24

4.8 Quản lí từ điển

Hình 11: Biểu đồ hoạt động quản lý từ điển