Giới thiệu website lập trình OnlineGDB

ĐẠI HỌC UEH
TRƯỜNG CÔNG NGHỆ VÀ THIẾT KẾ
KHOA CÔNG NGHỆ THÔNG TIN KINH DOANH
BỘ MÔN CÔNG NGHỆ THÔNG TIN

BÁO CÁO ĐỒ ÁN HỌC PHẦN
DỊCH VỤ MẠNG INTERNET
Đề tài: ONLINE PROGRAMING – WEBSITE
LẬP TRÌNH ONLINEGDB.COM

GVHD: Th.S.GVC Trần Lê Phúc Thịnh
Nhóm thực hiện: 1
Huỳnh Lê Vũ Hoàng
Đỗ Thị Thanh Hải
Võ Anh Vương
Lê Nguyễn Việt Tú
Nguyễn Hồng Thảo Như

TP. Hồ Chí Minh, Tháng 06/2022


MỤC LỤC

MỤC LỤC ....................................................................................................................... 2
DANH MỤC HÌNH ẢNH ................................................................................................ 4
Lời mở đầu .................................................................................................................... 6
Chương 1: Thông tin trang web ................................................................................. 7
1.1. THƠNG TIN TRANG WEB .............................................................................. 7
1.2. TÍNH NĂNG CHÍNH CỦA ONLINEGDB ........................................................ 8
Chương 2: Giao diện Website ..................................................................................... 9
2.1. THAO TÁC CỦA GIÁO VIÊN ............................................................................. 9

2.2. THAO TÁC CỦA HỌC SINH............................................................................ 16
Chương 3: Các tính năng nâng cao ......................................................................... 20
3.1.TÍNH NĂNG DEBUGGER. ................................................................................ 20
3.2. TÍNH NĂNG NHÚNG ĐOẠN MÃ CỦA GDB VÀO TRANG WEB. ................. 23
Chương 4: So sánh với Visual Studio ...................................................................... 25
4.1. GIỚI THIỆU TỔNG QUAN VỀ PHẦN MỀM OFFLINE VISUAL STUDIO. ..... 25
4.2. CÁC TÍNH NĂNG NỔI BẬT CỦA PHẦN MỀM VISUAL STUDIO ................ 26
4.2.1. Biên tập Code ........................................................................................... 26
4.2.2. Trình gỡ lỗi ................................................................................................ 27
4.3. SO SÁNH ONLINE GDB VÀ PHẦN MỀM VISUAL STUDIO ......................... 28
4.3.1. Về ngơn ngữ lập trình mà phần mềm hỗ trợ ........................................ 28
4.3.2. Về đối tượng và mục đích sử dụng ....................................................... 28
2
Báo cáo đồ án học phần Dịch vụ mạng Internet


4.3.3. Về ưu và khuyết điểm trong tính năng .................................................. 30
KẾT LUẬN .................................................................................................................... 32
TÀI LIỆU THAM KHẢO ............................................................................................... 33

3
Báo cáo đồ án học phần Dịch vụ mạng Internet


DANH MỤC HÌNH ẢNH
Hình 1. 1: Lượng truy cập vào web OnlineGDB thê thế giới............................................... 7
Hình 1. 2: Website OnlineGDB.com ...................................................................................... 8
Hình 2. 1: Giao diện đăng ký tài khoản. ................................................................................ 9
Hình 2. 2: Tên đăng ký được hiển thị trên trang chủ ........................................................ 10
Hình 2. 3: Chọn vào Classroom để vào lớp học. ............................................................... 10

Hình 2. 4: Chọn +Add để thêm lớp. ..................................................................................... 11
Hình 2. 5: Nhập tên lớp sau đó nhấn OK ............................................................................ 11
Hình 2. 6: Tạo lớp xong được danh sách lớp có thể chọn để sửa hoặc để xóa. .......... 11
Hình 2. 7: Chọn vào tên lớp sau đó chọn invite students. ............................................... 12
Hình 2. 8: Đường liên kết đến lớp học. ............................................................................... 12
Hình 2. 9: Danh sách học sinh. ............................................................................................ 13
Hình 2. 10: Chọn + Add Assignment để thêm bài tập mới .............................................. 13
Hình 2. 11: Giao diện tại phần Add Assignment. .............................................................. 14
Hình 2. 12: Phần cài đặt. ...................................................................................................... 14
Hình 2. 13: Bảng theo dõi tiến độ của học sinh. ............................................................... 15
Hình 2. 14: Kết quả làm bài của học sinh. ......................................................................... 15
Hình 2. 15: Giao diện làm bài của học sinh. ...................................................................... 15
Hình 2. 16: Bảng đăng nhập................................................................................................. 16
Hình 2. 17: Thơng báo đăng nhập thành cơng. ................................................................. 16
Hình 2. 18: Nhập thơng tin để giáo viên dễ quản lý. ......................................................... 17
Hình 2. 19: Các phần bài tập được thể hiện ở đây............................................................ 17

4
Báo cáo đồ án học phần Dịch vụ mạng Internet


Hình 2. 20: Các thơng tin về bài tập. ................................................................................... 18
Hình 2. 21: Khơng gian làm bài của học sinh. ................................................................... 18
Hình 2. 22: Sau khi hồn thành, sinh viên ấn vào Submit để nộp bài. ........................... 19
Hình 3. 1: Vị trí breakpoint. ................................................................................................... 20
Hình 3. 2: Breakpoints được thể hiện trong khung debug. .............................................. 21
Hình 3. 3: Bảng Call Stack. ................................................................................................... 22
Hình 3. 4: Bảng giá trị biến (Local Variables) .................................................................... 22
Hình 3. 5: Giao diện chức năng Debugger ......................................................................... 23
Hình 3. 6: Tự động nhúng, chỉ cần cung cấp 1 đường liên kết. ...................................... 23

Hình 4. 1: Thống kê nhóm tuổi và giới tính người dùng Visual Studio (SimilarWeb,
2022). ...................................................................................................................................... 29
Hình 4. 2: Thống kê nhóm tuổi và giới tính người dùng OnlineGDB (SimilarWeb, 2022).
.................................................................................................................................................. 30

5
Báo cáo đồ án học phần Dịch vụ mạng Internet


Lời mở đầu
Đây là phần báo cáo Đồ án môn học dịch vụ mạng Internet của nhóm 1
với tựa đề “WEBSITE LẬP TRÌNH ONLINEGDB.COM”. Nội dung báo cáo gồm 4
chương:
Chương 1: Thông tin trang web.
Chương 2: Giao diện website.
Chương 3: Các tính năng nâng cao.
Chương 4: So sánh với Visual Studio.
Trong phạm vi bài báo cáo, nhóm em trình bày các thông tin về trang web như
Chủ sở hữu, lưu lượng truy cập… sau đó đi vào phân tích các thanh cơng cụ
trên giao diện, từ đó đi sâu vào các chức năng đặc biệt của OnlineGDB.com và
cuối cùng tổng kết ưu nhược điểm, so sánh với các hệ lập trình IDE khác.
Mục tiêu của nhóm là giúp các bạn nắm được các thơng tin cơ bản về lập trình
online, chúng giống và khác nhau như thế nào so với phần mềm offline, tại sao
chỉ với 1 chiếc điện thoại lại coding được.
Bài báo cáo trên có sử dụng dữ liệu tham khảo từ nhiều nguồn như: Youtube,
Website về công nghệ và Các tài liệu về công nghệ thông tin của nhiều tác giả.
Nên không thể tránh khỏi những thông tin khơng thống nhất, khi phát hiện kính
mong thầy chỉ ra lỗi và giải đáp, chúng em rất trân trọng những ý kiến từ thầy.
Một lần nữa chân thành gửi lời cảm ơn đến nhà trường, quý giảng viên
bộ môn và các bạn trong lớp EE01 đã cùng nhau hoàn thành học phần “Dịch

vụ mạng Internet”. Kính chúc cả lớp hồn thành tốt bài thuyết trình và những
mơn học về sau.

6
Báo cáo đồ án học phần Dịch vụ mạng Internet


Chương 1: Thơng tin trang web
1.1.

THƠNG TIN TRANG WEB

OnlineGDB là một trình biên dịch và cơng cụ gỡ lỗi trực tuyến cho các ngơn
ngữ lập trình phổ biến nhất như C, C ++, Python, Java, PHP, Ruby, Perl,… Đây là
một trình biên dịch rất mạnh mẽ, tải siêu nhanh và cho kết quả ngay lập tức
được cung cấp miễn phí từ dự án GNU.
Người dùng cũng có thể thực thi ngôn ngữ phát triển web bao gồm HTML,
CSS, JavaScript và SQL bằng cách sử dụng trình chỉnh sửa mã trực tuyến này.
GDB theo truyền thống được sử dụng với các chương trình trên hệ điều hành
Linux, nhưng nó cũng sẽ hoạt động với hầu hết các Windows các biến thể và
thậm chí cả macOS.

Hình 1. 1: Lượng truy cập vào web OnlineGDB thê thế giới.

7
Báo cáo đồ án học phần Dịch vụ mạng Internet


Top 3 quốc gia trên thế giới có lượng truy cập vào trang web OnlineGDB.com
nhiều nhất là Ấn Độ, Hoa Kỳ, Nga với tỷ lệ truy cập gần 70%. Trong đó Việt

Nam đứng thứ 6 với 1,59%
Website được tạo đầu tiên vào 31/7/2016 ở Ahmedabad, Ấn Độ.
Đến hiện tại, OnlineGDB đã có hơn 4,53 triệu lượt truy cập hàng tháng và tập
trung nhiều vào các quốc gia: Ấn độ, Mỹ, Nga và Ấn Độ chiếm đến 46% tổng
lượng truy cập. Số lượng người truy cập vào OnlineGDB đến từ 2 dạng là
Mobile và PC chiếm lần lượt tỷ lệ 78% và 22%
1.2.

TÍNH NĂNG CHÍNH CỦA ONLINEGDB

Đây là IDE trực tuyến đầu tiên trên thế giới cung cấp cơ sở gỡ lỗi với trình gỡ lỗi
GDB được nhúng.
Ứng dụng web tiện dụng dành cho các lập trình viên u thích viết mã trực
tuyến.
Nền tảng đáng tin cậy khơng có sự cố bất ngờ.
Sức mạnh gỡ lỗi siêu việt, tìm những lỗi khó với GDB trực tuyến.
Ta có thể viết Mã, Biên dịch, Chạy và Gỡ lỗi trực tuyến từ mọi nơi với mọi thiết
bị.

Hình 1. 2: Website OnlineGDB.com
8
Báo cáo đồ án học phần Dịch vụ mạng Internet


Chương 2: Giao diện Website
Website được đánh giá có những ưu điểm sau:
•

Hỗ trợ nhiều ngơn ngữ: C, C++, Java, Python, Pascal...

•

Hoạt động tốt trên các thiết bị di động.

Giáo viên dễ dàng tạo lớp học ảo để giao bài tập trực tiếp cho học
sinh, chạy trực tiếp bài làm của học sinh để chấm điểm, nhận xét bài
làm, hẹn thời gian nộp bài, khóa chức năng sao chép (học sinh phải tự
gõ lệnh)
•

Học sinh làm bài và nộp trực tiếp cho giáo viên dễ dàng, thấy
được điểm số và nhận xét của giáo viên.
•

2.1. THAO TÁC CỦA GIÁO VIÊN
Bước 1: Truy cập vào trang onlinegdb.com chọn Sign Up đăng ký tài khoản
như các hình dưới

Hình 2. 1: Giao diện đăng ký tài khoản.

9
Báo cáo đồ án học phần Dịch vụ mạng Internet


Khi đăng ký thành công, hệ thống sẽ xuất hiện câu thơng báo “Welcome, tên
của bạn”

Hình 2. 2: Tên đăng ký được hiển thị trên trang chủ
Bước 2: Tạo lớp học ảo.

Hình 2. 3: Chọn vào Classroom để vào lớp học.

10
Báo cáo đồ án học phần Dịch vụ mạng Internet


Hình 2. 4: Chọn +Add để thêm lớp.

Hình 2. 5: Nhập tên lớp sau đó nhấn OK

Hình 2. 6: Tạo lớp xong được danh sách lớp có thể chọn để sửa hoặc để xóa.
11
Báo cáo đồ án học phần Dịch vụ mạng Internet


Bước 3: Gửi liên kết đến để học sinh tham gia vào lớp.

Hình 2. 7: Chọn vào tên lớp sau đó chọn invite students.

Hình 2. 8: Đường liên kết đến lớp học.
Sau khi học sinh nhận được liên kết sẽ tham gia vào lớp học (xem phần thao
tác của học sinh)
Con số ở mục Students Enrolled thể hiện số học sinh tham gia. Có thể chọn
vào View all để xem chi tiêt danh sách học sinh tham gia.

12
Báo cáo đồ án học phần Dịch vụ mạng Internet


Hình 2. 9: Danh sách học sinh.

Bước 4: Giao bài tập cho học

sinh.
Hình 2. 10: Chọn + Add Assignment để thêm bài tập mới

13
Báo cáo đồ án học phần Dịch vụ mạng Internet


Hình 2. 11: Giao diện tại phần Add Assignment.

Hình 2. 12: Phần cài đặt.

14
Báo cáo đồ án học phần Dịch vụ mạng Internet


Bước 5: Chấm bài. Sau khi xuất bản bài tập cho học sinh và học sinh đã nộp
bài thì giáo viên sẽ được giao diện như hình 2.13.

Hình 2. 13: Bảng theo dõi tiến độ của học sinh.

Hình 2. 14: Kết quả làm bài của học sinh.

Hình 2. 15: Giao diện làm bài của học sinh.
15
Báo cáo đồ án học phần Dịch vụ mạng Internet


2.2. THAO TÁC CỦA HỌC SINH

Bước 1: Tham gia vào lớp học. Học sinh nhận được liên kết gửi từ giáo viên
(xem Bước 3 - Thao tác của giáo viên), mở liên kết lên sẽ được giao diện như
hình 2.16

Hình 2. 16: Bảng đăng nhập.

Hình 2. 17: Thơng báo đăng nhập thành công.
16
Báo cáo đồ án học phần Dịch vụ mạng Internet


Sau khi quay lại chọn Classroom sau đó chọn lớp như hình 2.18
Bước 2: Làm và nộp bài tập của giáo viên giao.(2.19)

Hình 2. 18: Nhập thơng tin để giáo viên dễ
quản lý.

Hình 2. 19: Các phần bài tập được thể hiện ở
đây.

17
Báo cáo đồ án học phần Dịch vụ mạng Internet


Hình 2. 20: Các thơng tin về bài tập.

Hình 2. 21: Không gian làm bài của học
sinh.

18

Báo cáo đồ án học phần Dịch vụ mạng Internet


Hình 2. 22: Sau khi hồn thành, sinh viên ấn vào Submit để nộp bài.

19
Báo cáo đồ án học phần Dịch vụ mạng Internet


Chương 3: Các tính năng nâng cao
3.1.TÍNH NĂNG DEBUGGER.
Là tính năng cho phép kiểm sốt chương trình, phần mã nguồn chỉ ra vấn đề ở
dòng nào (Mã lỗi, nội dung lỗi cụ thể).
GDBOnline cũng có tính năng debugger:tính năng này tích hợp trong mơi
trường đám mây, q trình xử lý tương tự với các trình GDB offline khác.
Sử dụng tính năng debugger: Ta sẽ sử dụng điểm “breakpoints”: Là 1 ký hiệu
cho phép dừng/khởi chạy chương trình tại vị trí mong muốn. Khi nhấp chuột
tại điểm bên trái của dòng này, chấm đỏ hiện lên đánh dấu vị trí “breakpoints”
(Hình 3.1)

Hình 3. 1: Vị trí breakpoint.
Khi khởi động chế độ debug, CT sẽ dừng xử lý tại điểm “breakpoints”.

20
Báo cáo đồ án học phần Dịch vụ mạng Internet


Hình 3. 2: Breakpoints được thể hiện trong khung debug.
Kết hợp debugger với chế độ debug ta sẽ có được trình kiểm tra và rà sốt mã
nguồn.

Giải thích thêm các nút chức năng:
▪ Câu lệnh continue trong C hoạt động giống như câu lệnh break. Thay vì
buộc kết thúc vịng lặp, nó buộc trở về kiểm tra điều kiện để thực hiện
vòng lặp tiếp theo và bỏ qua các lệnh bên trong vòng lặp hiện tại sau
lệnh continue.
Đối với vòng lặp for, câu lệnh continue làm cho điều khiển chương trình tăng
hoặc giảm biến đếm của vịng lặp. Đối với vòng lặp while và do-while, câu lệnh
continue làm cho điều khiển chương trình quay về đầu vịng lặp và kiểm tra
điều kiện của vòng lặp.
▪ Step into : Lệnh step into thực thi dòng lệnh kế tiếp. Nếu dòng này là
một lời gọi hàm, step into đi vào hàm và trả điều khiển vào đỉnh của
hàm.
▪ Step over : Giống như “Step into”, lệnh “Step over” thực thi dòng lệnh
tiếp theo của code. Nếu dòng lệnh là một lời gọi hàm, “Step over” thực
thi tất cả code trong hàm và tra điều khiển đến ta sau khi hàm đã được
thực thi.
▪ Step out : Không giống như hai lệnh stepping, “Step out” khơng chỉ thực
thi dịng kế tiếp của code. Thay vào đó, nó thực thi tất cả các code còn
lại trong hàm hiện tại của ta, và trả điều khiển cho ta khi hàm kết thúc.
21
Báo cáo đồ án học phần Dịch vụ mạng Internet


Quá trình kiểm tra mã nguồn:
▪ Bảng Call stack: #: Thứ tự các lệnh; Function: Chức năng của dòng lệnh;
File:Line: Vị trí dịng lệnh. Ở cột: Main: Hàm xử lý; Factional; multiply:
Hàm tính tốn. (Hình 3.3)

Hình 3. 3: Bảng Call Stack.
▪ Bảng Local Variables: Là bảng thể hiện giá trị các biến ở thời điểm hiện

tại: Biến “fact” đang có giá trị là 1; Biến “i” đang có giá trị là 2. (Hình 3.4)

Hình 3. 4: Bảng giá trị biến (Local Variables)
▪ Hình ảnh miêu tả sử dụng tính năng debugger (Hình 6):

22
Báo cáo đồ án học phần Dịch vụ mạng Internet


Hình 3. 5: Giao diện chức năng Debugger
3.2. TÍNH NĂNG NHÚNG ĐOẠN MÃ CỦA GDB VÀO TRANG WEB.
Nhờ tính năng này, giờ đây cơng việc lập trình web và nạp mã nguồn đến trang
có thể nhúng các đoạn mã được thực thi từ trang web / blog của mình. Đây là
ví dụ trực tiếp về đoạn mã runnable được nhúng..

Hình 3. 6: Tự động nhúng, chỉ cần cung cấp 1 đường liên kết.
23
Báo cáo đồ án học phần Dịch vụ mạng Internet


Dưới đây là các bước để nhúng các đoạn mã chạy được vào một trang web
Bước 1: Goto onlinegdb.com
Bước 2 : Viết và kiểm tra mã của ta
Bước 3: Nhấp vào nút "Chia sẻ"
Bước 4: Sao chép liên kết "Mã nhúng", liên kết này sẽ giống như mã bên
dưới.
<script src="//onlinegdb.com/embed/js/B1X6-oL-W"></script>
▪ Bước 5: Dán nó vào bài viết / trang của trang web của ta nơi ta muốn
hiển thị mã có thể chạy được. Giờ đây, người đọc có thể chạy các đoạn
mã từ trang web của ta.

▪
▪
▪
▪

24
Báo cáo đồ án học phần Dịch vụ mạng Internet


Chương 4: So sánh với Visual Studio
4.1. GIỚI THIỆU TỔNG QUAN VỀ PHẦN MỀM OFFLINE VISUAL STUDIO.
IDE (Integrated Development Environment) là mơi trường tích hợp được dùng
để viết code để phát triển ứng dụng. Visual Studio là một phần mềm IDE quen
thuộc với nhiều lập trình viên bởi đây là một phần mềm đắc lực hỗ trợ cơng
việc lập trình. Visual Studio được phát triển từ năm 1997 và thuộc quyền sở
hữu của Microsoft (Microsoft, n.d.).
Visual Studio là một hệ thống tập hợp mọi thứ liên quan đến phát triển ứng
dụng, bao gồm trình soạn thảo mã, thiết kế và gỡ lỗi. Phần mềm bao gồm một
trình soạn thảo mã hỗ trợ IntelliSense (thành phần hoàn thành mã) và tái cấu
trúc mã. Đối với trình gỡ lỗi, phần mềm tích hợp cả trình gỡ lỗi nguồn cấp dữ
liệu và sửa lỗi máy cấp. Ngồi ra, Visual Studio cịn cung cấp cho người dùng
các công cụ hỗ trợ tạo giao diện ứng dụng, thiết kế web, lược đồ cơ sở dữ liệu.
Visual Studio hỗ trợ nhiều ngơn ngữ lập trình khác nhau, trong đó trình soạn
thảo mã và gỡ lỗi có thể hỗ trợ hầu hết mọi ngơn ngữ lập trình (ở các mức độ
khác nhau). Các ngôn ngữ được thiết lập sẵn bao gồm C, C++ và C++ / CLI
(thông qua Visual C ++), VB.NET (thông qua Visual Basic .NET), C# (thông qua
Visual C#) và F# (trong Visual Studio 2010). Ngồi Ngồi ra, phần mềm cịn
hỗ trợ cho các ngơn ngữ khác như M, Python, Ruby, XML/ XSLT, HTML/
XHTML, JavaScript và CSS thông qua các dịch vụ ngôn ngữ được cài đặt
riêng.

25
Báo cáo đồ án học phần Dịch vụ mạng Internet