Báo cáo Xây dựng ứng dụng web browser môn Lập trình nâng cao | Trường Đại học Bách Khoa Hà Nội

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
TRƯỜNG ĐIỆN - ĐIỆN TỬ BÁO CÁO LẬP TRÌNH NÂNG CAO
Đề tài: Xây dựng ứng dụng Web Browser Giảng viên hướng dẫn PGS T.S Vũ Song Tùng Sinh Viên: Phạm Văn Sơn : 20193086 Đỗ Thanh Tùng : 20193177 Bùi Lê Đức Minh 20193005 Lớp : Điện tử 01 – K64 Hà Nội, 8 - 2023 LỜI NÓI ĐẦU
Ngày nay ứng dụng CNTT và việc tin học hoá được xem là 1 trong những yếu tố
mang tính quyết định trong hoạt động của các chính phủ, tổ chức cũng như các công
ty , nó đóng vai trò hết sức quan trọng , có thể tạo ra những bước đột phá mạnh mẽ.
Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng điện tử, CNTT
cũng được những công nghệ cấp cao chinh phục hết đỉnh cao này đến đỉnh cao khác.
Mạng Internet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng
trở thành nền tảng chính cho sự truyền tải, trao đổi thông tin toàn cầu.
Là một sinh viên IT – được đào tạo những cơ sở lý luận, được cung cấp những
kiến thức từ cơ bản đến phức tạp về về khoa học tự nhiên, kiến thức cơ bản như
mạng máy tính, hệ thống thông tin, lập trình, phần mềm… đã giúp chúng em nâng
cao trình độ hiểu biết của mình.
Xuất phát từ nhận thức trên và dựa trên kiến thức học được,chúng em đã lựa chọn
đi sâu nghiên cứu rõ hơn về đề tài : “Xây dựng ứng dụng WebBrowser”
Mặc dù đã cố gắng hết khả năng của mình nhưng do trình độ kiến thức và kinh
nghiệm còn hạn chế, nên không tránh khỏi có những sơ sót. Chúng em rất mong
được sự nhận xét, đánh giá, đóng góp ý kiến của thầy để đề tài này được hoàn thiện hơn.
Xin cảm ơn sự quan tâm và hỗ trợ của thầy Vũ Song Tùng dành cho đề tài này.
Mong rằng, với sự đồng hành của thầy, chúng em sẽ tạo nên một ứng dụng trò chơi xếp hình thú vị. MỤC LỤC
LỜI NÓI ĐẦU................................................................................................2
CHƯƠNG 1. TỔNG QUAN ĐỀ TÀI...........................................................5
1.1 Giới thiệu về đề tài:...................................................................................5
1.2 Tổng quan về đề tài:.................................................................................6
1.3 Yêu cầu chức năng:..................................................................................7
1.4 Yêu cầu phi chức năng :...........................................................................7
1.5 Công cụ lập trình :....................................................................................8
1.6 Kết luận chương :...................................................................................10
CHƯƠNG 2. PHÂN TÍCH ỨNG DỤNG...................................................11
2.1 Tổng quan hệ thống:...............................................................................11
2.2 Thiết kế hệ thống:...................................................................................11
2.2.1 Sơ đồ user case :............................................................................11
2.2.2 Sơ đồ Activity :.............................................................................13
2.2.3 Sơ đồ Sequence :...........................................................................14
CHƯƠNG 3. THIẾT KẾ ỨNG DỤNG......................................................18
3.1 Thiết kế giao diện:..................................................................................18
3.1.1 Khởi tạo dự án...............................................................................18
3.1.2 Thiết kế giao diện :........................................................................20
3.2 Xây dựng chức năng:.............................................................................21
3.2.1 Chức năng của những nút :...........................................................22
3.2.2 Chức năng tìm kiếm :....................................................................23
3.2.3 Chức năng thêm/xóa Tab..............................................................25
3.2.4 Chức năng đánh dấu trang :..........................................................30
3.2.5 Chức năng xem lịch sử :...............................................................32
CHƯƠNG 4. KẾT QUẢ THỰC NGHIỆM...............................................34
4.1 Kết quả :..................................................................................................34
4.1.1 Giao diện ứng dụng :.....................................................................34
4.1.2 Giao diện truy cập trang web........................................................35
4.1.3 Giao diện hiển thị lịch sử trang web :...........................................36
4.1.4 Giao diện các trang đánh dấu :......................................................37
CHƯƠNG 5. KẾT LUẬN............................................................................38
MỤC LỤC HÌNH ẢNH
2.2-1 Sơ đồ user case..........................................................................................12
2.2-2 Sơ đồ Activity...........................................................................................13
2.2-3 Sơ đồ sequence truy cập URL...................................................................14
2.2-4 Sơ đồ sequence thêm tab...........................................................................14
2.2-5 Sơ đồ sequence đánh dấu trang.................................................................15
2.2-6 Sơ đồ sequence xóa tab.............................................................................15
2.2-7 Sơ đồ sequence xem lịch sử......................................................................16
2.2-8 Sơ đồ sequence tương tác với trang web..................................................16
2.2-9 Sơ đồ lớp của hệ thống..............................................................................17
3.1-1 Hình ảnh khởi tạo dự án............................................................................19
3.1-2 Hình giao diện của ứng dụng....................................................................20
4.1-1 Giao diện của ứng dụng trình duyệt..........................................................34
4.1-2 Giao diện khi truy cập trang web..............................................................35
4.1-3 Giao diện hiển thị lịch sử..........................................................................36
4.1-4 Giao diện hiện thị các trang web được đánh dấu......................................37
CHƯƠNG 1. TỔNG QUAN ĐỀ TÀI
1.1 Giới thiệu về đề tài:
Một web browser là một phần mềm ứng dụng để truy xuất, trình diễn và chuyển
các nguồn thông tin (information resource) trên mạng hệ thống mạng toàn cầu
(World Wide Web). Một nguồn thông tin được nhận dạng bởi một Uniform Resource
Identifier (URI) và có thể là một trang web, phim - video, hình ảnh (images) hoặc các mẫu thông tin khác.
Mặc dù các trình duyệt với mục đích là để truy cập vào hệ thống mạng toàn cầu,
các trình duyệt còn được sử dụng để truy cập các thông tin được cung cấp bởi các
web servers (máy chủ web) trong hệ thống mạng riêng hoặc các tài liệu (files) đến
các hệ thống file (file system). Hoặc cũng được dùng để tiết kiệm tài nguyên thông
tin cho các hệ thống lưu trữ file.
Lịch sử của các trình duyệt Web bắt đầu vào cuối thập niên 1980, khi một loạt
các công nghệ đặt nền móng cho các trình duyệt Web đầu tiên, WorldWideWeb, do
Tim Berners-Lee vào năm 1991. Sự phát triển này dựa trên các công nghệ phần mềm
và phần cứng hiện có, ngoài ra cũng mở ra nhiều công nghệ mới bắt đầu tư đây.
Ted Nelson và Douglas Engelbart phát triển khái niệm siêu văn bản trước khi
Berners-Lee và CERN khá lâu. Web browser đã trở thành cốt lõi của World Wide
Web. Berners-Lee thừa nhận sự đóng góp của Engelbart.
Việc giới thiệu trình duyệt Mosaic NCSA Web vào năm 1993 - một trong những
trình duyệt web với giao diện đồ họa đầu tiên - đã dẫn tới sự bùng nổ trong việc dùng
web. Marc Andreessen, người lãnh đạo của đội Mosaic tại NCSA, sớm bắt đầu công
ty riêng của mình, đặt tên là Netscape, và phát hành các phiên bản Mosaic Netscape
Navigator vào năm 1994, và sau đó nhanh chóng trở thành trình duyệt phổ biến nhất
thế giới, chiếm 90% của tất cả các sử dụng Web đỉnh cao của nó.
Microsoft đã đáp trả bằng trình duyệt Internet Explorer của mình trong năm 1995
(cũng bị ảnh hưởng nhiều từ Mosaic), và đầu cuộc chiến trình duyệt đầu tiên. Bằng
việc kết hợp Internet Explorer với Windows, Microsoft đã có thể tận dụng ưu thế
của nó trong thị trường hệ điều hành để quản lý thị trường trình duyệt Web; Internet
Explorer sử dụng đạt vị trí trên 95% người dùng vào năm 2002. Internet Explorer
chiếm 60% người sử dụng trình duyệt vào Tháng Tư năm 2010 theo thống kê của Net Applications.
Opera đầu tiên xuất hiện vào năm 1996; mặc dù nó đã không bao giờ đạt được
sử dụng rộng rãi, chiếm 2% thị phần trình duyệt vào tháng tư năm 2010, tuy nhiên
Opera chiếm một phần đáng kể của thị trường đang phát triển nhanh là trình duyệt
Web điện thoại di động, Oepra được cài đặt sẵn trên trên 40.000.000 điện thoại.
Opera cũng có sẵn trên một số hệ thống nhúng khác, bao gồm video game console Wii của Nintendo.
Năm 1998, Netscape triển khai Mozilla Foundation trong một nỗ lực để sản xuất
một trình duyệt cạnh tranh bằng cách sử dụng mô hình phần mềm mã nguồn mở. Đó
là trình duyệt sau nay phát triển thành Firefox, sau đó thì trình duyệt này được phát
triển khá tốt trong khi vẫn còn trong giai đoạn beta, ngay sau khi phát hành Firefox
1.0 vào cuối năm 2004, Firefox (mọi phiên bản) đã chiếm 7,4% thị phần sử dụng
trình duyệt. Và đến tháng tư năm 2010, Firefox đã có một thị phần 25%.
Safari của Apple đã phát hành phiên bản beta đầu tiên vào tháng một năm 2003;
vào tháng 10 năm 2009, đã chi phối thị phần của trình duyệt web dựa trên việc phát
triển từ các ứng dụng của Apple, chiếm dưới 5% thị trường trình duyệt toàn bộ vào
tháng 4 năm 2010. Nó được xem như là công cụ cho web (còn được gọi là WebKit)
để trình diễn các tính năng và là nền tảng được ứng dụng nhiều trên thiết bị di động,
bao gồm cả hệ điều hành iPhone, Google Android, Nokia S60 và Palm WebOS.
Vào tháng 9 năm 2008, Google bắt đầu nhảy vào cuộc chiến các trình duyệt bằng
trình duyệt web Google Chrome. Đến tháng 4 năm 2010, Google Chrome đã chiếm 7% thị phần
1.2 Tổng quan về đề tài:
Đề tài của nhóm chúng em là xây dựng một trình duyệt web Browser , với những
tính năng cơ bản như truy cập trang web, thêm/xóa tab , quay lại, chuyển tiếp, đánh
dấu trang , xem lịch sử web.
Ứng dụng của chúng em sẽ được xây dụng với giao diện dễ nhìn, tối ưu các chức
năng để trình duyệt được gọn nhẹ, sử dụng ít tài nguyên.
1.3 Yêu cầu chức năng:
Trình duyệt của chúng em có những chức năng sau :
Điều hướng Trang Web: •
Quay lại: Di chuyển đến trang web đã xem trước đó. •
Chuyển tiếp: Di chuyển đến trang web tiếp theo sau khi đã quay lại. •
Địa chỉ URL: Nhập địa chỉ web để truy cập trực tiếp một trang cụ thể. •
Tìm kiếm: Tìm kiếm thông tin trên các công cụ tìm kiếm. Mở Nhiều Tab: •
Mở tab mới: Mở một tab mới để duyệt trang web khác mà không cần đóng trang hiện tại. •
Quản lý tab: Cho phép người dùng chuyển đổi giữa các tab đã mở. Đánh Dấu Trang: •
Lưu trang web vào danh sách đánh dấu để dễ dàng truy cập lại sau này. •
Quản lý danh sách đánh dấu: Cho phép người dùng quản lý, sửa đổi
hoặc xóa các mục đánh dấu.
Lịch Sử Truy Cập: •
Hiển thị lịch sử truy cập các trang web đã xem. •
Quay lại các trang đã xem trước đó trong lịch sử. Tải Lại Trang: •
Tải lại trang web hiện tại để cập nhật thông tin mới nhất.
1.4 Yêu cầu phi chức năng :
Giao diện người dùng của ứng dụng có đầy đủ các thành phần:
• Nút quay lại và chuyển tiếp để quay lại tài nguyên trước và tương ứng.
• Một refresh hoặc reload nút để tải lại tài nguyên hiện hành.
• Một stop nút để hủy bỏ tải các tài nguyên. Trong một số trình duyệt, nút dừng
được hợp nhất với nút tải lại.
• Một nút home để trở về của người sử dụng trang chủ .
• Một thanh địa chỉ để nhập vào Uniform Resource Identifier (URI) của tài
nguyên mong muốn và hiển thị nó.
• Thanh tìm kiếm nhập từ vào một công cụ tìm kiếm web . Trong một số trình
duyệt, thanh tìm kiếm được hợp nhất với thanh địa chỉ.
• Một thanh trạng thái để hiển thị tiến bộ trong việc tải các tài nguyên và cũng
là URI của liên kết khi con trỏ dao động lên chúng, và trang zoom khả năng.
Trình duyệt cần có tính bảo mật, hỗ trợ HTTP Secure và cung cấp các cách nhanh
chóng và dễ dàng để xóa thông tin nhận dạng cá nhân như bộ nhớ cache web, lịch
sử tải xuống, biểu mẫu và lịch sử tìm kiếm, cookie và lịch sử duyệt web.
1.5 Công cụ lập trình :
Công cụ lập trình mà nhóm chúng em sử dụng là Visual Studio. Visual Studio là
một môi trường phát triển tích hợp (IDE) mạnh mẽ và phổ biến do Microsoft phát
triển. Nó cung cấp các công cụ và tài nguyên để phát triển, kiểm tra và triển khai
ứng dụng trên nhiều nền tảng khác nhau. Visual Studio hỗ trợ nhiều ngôn ngữ lập
trình, bao gồm C#, C++, VB.NET, F#, Python và nhiều ngôn ngữ khác. Dưới đây là
một số điểm nổi bật về Visual Studio và ứng dụng của nó trong việc tạo Windows Form Application:
1. Giao Diện Thân Thiện: •
Visual Studio cung cấp một giao diện thân thiện với người dùng, với
các công cụ và trình chỉnh sửa dễ sử dụng, giúp tạo và chỉnh sửa mã dễ dàng.
2. Tích Hợp Mọi Thứ: •
Visual Studio tích hợp nhiều công cụ và tài nguyên, bao gồm trình soạn
thảo mã, gỡ lỗi, thiết kế giao diện người dùng, quản lý dự án, kiểm thử
và triển khai ứng dụng.
3. Hỗ Trợ Đa Ngôn Ngữ: •
Visual Studio cho phép bạn phát triển ứng dụng bằng nhiều ngôn ngữ
lập trình khác nhau. Trong việc tạo Windows Form Application, bạn có
thể sử dụng C#, VB.NET hoặc nhiều ngôn ngữ khác.
4. Thư Viện Đa Dạng: •
Visual Studio đi kèm với một loạt các thư viện và khung làm việc có
sẵn, giúp bạn nhanh chóng xây dựng các ứng dụng phức tạp mà không
phải viết mã từ đầu.
5. Windows Form Application: •
Visual Studio cho phép bạn tạo các ứng dụng Windows Form
Application dễ dàng. Các ứng dụng này có giao diện người dùng dựa
trên Windows Forms, giúp bạn tạo các ứng dụng giao diện đồ họa như
trình duyệt, ứng dụng văn phòng, ứng dụng quản lý, v.v.
6. Kéo Thả Và Thảo Tác WYSIWYG: •
Visual Studio cho phép bạn thiết kế giao diện người dùng bằng cách
kéo thả các phần tử lên giao diện. Giao diện thiết kế WYSIWYG (What
You See Is What You Get) cho phép bạn thấy trước cách giao diện sẽ
hiển thị khi chạy ứng dụng.
7. Gỡ Lỗi Đa Dạng: •
Visual Studio cung cấp công cụ mạnh mẽ để gỡ lỗi mã nguồn, cho phép
bạn xác định và sửa lỗi một cách hiệu quả.
8. Công Cụ Kiểm Thử:
Visual Studio hỗ trợ kiểm thử ứng dụng với các công cụ kiểm thử tích
hợp, giúp bạn đảm bảo ứng dụng hoạt động chính xác và ổn định.
9. Hỗ Trợ Phiên Bản Quản Lý: •
Visual Studio tích hợp với hệ thống quản lý phiên bản như Git, TFS
(Team Foundation Server), SVN (Subversion), giúp bạn theo dõi và
quản lý mã nguồn dễ dàng.
10.Triển Khai Ứng Dụng: •
Visual Studio cung cấp các công cụ để triển khai ứng dụng lên các môi
trường khác nhau, bao gồm desktop, di động, đám mây và nhiều nền tảng khác.
Visual Studio là một môi trường phát triển đa năng và mạnh mẽ, cho phép bạn
tạo và phát triển các ứng dụng Windows Form Application và nhiều loại ứng dụng
khác một cách hiệu quả và tiện lợi.
1.6 Kết luận chương :
Qua chương 1, chúng ta đã hiểu được khái quát về đề tài, chính là xây dựng một
ứng dụng web browser – một Window Form Application với ngôn ngữ lập trình C sharp.
CHƯƠNG 2. PHÂN TÍCH ỨNG DỤNG
2.1 Tổng quan hệ thống:
Hệ thống của một trình duyệt web bao gồm một loạt các thành phần và modules
làm việc cùng nhau để cho phép người dùng truy cập và tương tác với các trang web trên Internet.:
Giao Diện Người Dùng (User Interface):
Giao diện người dùng là nơi mà người dùng tương tác với trình duyệt. Nó bao
gồm thanh địa chỉ (URL), nút điều hướng (quay lại, chuyển tiếp, tải lại), thanh đánh
dấu, lịch sử truy cập, và các công cụ khác để quản lý và điều hướng trang web.
Bộ Quản Lý Tabs (Tab Management):
Bộ quản lý tabs cho phép người dùng mở và quản lý nhiều tab trang web cùng
một lúc. Người dùng có thể mở tab mới, chuyển đổi giữa các tab, đóng tab không
cần thiết, và quản lý các trang đang mở.
Quản Lý Lịch Sử Và Đánh Dấu:
Hệ thống này ghi lại lịch sử trang web mà người dùng đã truy cập, cho phép họ
quay lại các trang đã xem trước đó. Đánh dấu (Bookmark) cung cấp cách lưu lại các
trang web ưa thích để dễ dàng truy cập sau này.
Công Cụ Tìm Kiếm:
Công cụ tìm kiếm tích hợp giúp người dùng tìm kiếm thông tin trên Internet trực
tiếp từ thanh địa chỉ hoặc từ một ô tìm kiếm riêng. Cài Đặt Và Tùy Chọn:
Người dùng có thể tùy chỉnh cài đặt của trình duyệt, chẳng hạn như thay đổi trang
chủ mặc định, quản lý độ phân giải, cài đặt tiện ích mở rộng và nhiều tùy chọn khác.
2.2 Thiết kế hệ thống:
2.2.1 Sơ đồ user case :
Sơ đồ User Case của hệ thống :
2.2-1 Sơ đồ user case Các
chức năng của người dùng : • Thêm tab • Xóa tab • Truy cập URL
• Tương tác với trang web • Đánh dấu trang web
• Xem lịch sử duyệt web
2.2.2 Sơ đồ Activity :
Sơ đồ Activity của hành động truy cập trang web :
2.2-2 Sơ đồ Activity
2.2.3 Sơ đồ Sequence :
Sơ đồ sequence truy cập URL :
2.2-3 Sơ đồ sequence truy cập URL
Sơ đồ sequence thêm tab :
2.2-4 Sơ đồ sequence thêm tab
Sơ đồ sequence đánh dấu trang :
2.2-5 Sơ đồ sequence đánh dấu trang Sơ đồ sequence xóa tab :
2.2-6 Sơ đồ sequence xóa tab
Sơ đồ sequence xem lịch sử :
2.2-7 Sơ đồ sequence xem lịch sử
Sơ đồ sequence tương tác với trang web :
2.2-8 Sơ đồ sequence tương tác với trang web
2.2.4 Sơ đồ lớp :
Sơ đồ lớp của hệ thống :
2.2-9 Sơ đồ lớp của hệ thống
CHƯƠNG 3. THIẾT KẾ ỨNG DỤNG
3.1 Thiết kế giao diện:
3.1.1 Khởi tạo dự án
Chúng ta sẽ thiết kế ứng dụng trình duyệt bằng Visual Studio, trước tiên, chúng
ta sẽ vào tạo một dự án mới.
3.1-10 Hình ảnh khởi tạo dự án
3.1.2 Thiết kế giao diện :
Tiếp theo chúng ta sẽ dựa vào giao diện của các trình duyệt phổ biến như Google
Chrome, Cốc Cốc, Microsoft Edge để thiết kế giao diện riêng của ứng dụng .
3.1-11 Hình giao diện của ứng dụng
Ứng dụng của chúng ta sẽ có thiết kế như trên hình, chúng ta sẽ đi sâu hơn về
phần thiết kế ra form ứng dụng này.
Trước tiên chúng ta sẽ tạo ra thanh công cụ của trình duyệt chứa các nút như
trên : Nút quay lại trang trước, nút đi đến trang sau, nút tạm dừng tải trang, nút tải
lại trang , nút quay về trang chủ, nút điều hướng đến trang web ,thanh chứa URL của
trang web, nút thêm một tab mới, nút xóa tab hiện có, nút đánh dấu trang, nút cài đặt trình duyệt.
Tiếp theo, chúng ta sẽ tạo ra một khoảng trống để thêm một tab mới. Phần chính
giữa của giao diện sẽ là nơi trúng ta sử dụng để xem trang web.
Sau khi thiết kế giao diện xong, trình duyệt sẽ tạo cho chúng ta các lớp tương ứng
với các nút trên, việc chúng ta cần làm chính là lập trình ra các chức năng tương ứng
với từng nút để người dùng có thể tương tác với ứng dụng. Đoạn mã sau đây sẽ thể hiện điều đó :
private void toolStripButton1_Click(object sender, EventArgs e) { webBrowser1.GoBack(); }
private void toolStripButton6_Click(object sender, EventArgs e) {
webBrowser1.Navigate(toolStripTextBox1.Text); }
private void toolStripButton2_Click(object sender, EventArgs e) {
webBrowser1.GoForward(); }
private void toolStripButton5_Click(object sender, EventArgs e) { webBrowser1.GoHome(); }
private void toolStripButton4_Click(object sender, EventArgs e) {
webBrowser1.Refresh(); }
private void toolStripButton3_Click(object sender, EventArgs e) { webBrowser1.Stop(); }
Các nút (Button) từ 1 đến 6 tương ứng với các nút quay tại, chuyển tiếp, dừng tải
trang web, làm mới trang web, quay lại trang chủ, nút điều hướng đến trang web có
chứa URL trong textbox. private void toolStripTextBox1_KeyDown(object sender, KeyEventArgs e)
Textbox này sẽ chứa đường dẫn URL của trang web mà chúng ta tìm kiếm.
3.2 Xây dựng chức năng:
Với yêu cầu của ứng dụng là có thể tương tác với người dùng dựa trên các nút,
giúp người dùng có thể truy cập trang web dựa trên từ khóa tìm kiếm, quay lại,
chuyển tiếp các trang web, đánh dấu trang web, xem lịch sử trang web, … chúng ta
sẽ xây dựng chi tiết các hàm chức năng cho từng nút như sau : public Browser() {
InitializeComponent();