ĐỀ TÀI NGHIÊN CỨU VÀ XÂY DỰNG CHƯƠNG TRÌNH DUYỆT WEB BẰNG GIAO THỨC HTTP

Từ kiến thức sử dụng ngôn ngữ lập trình, phân tích thiết kế hệ thống, kiến thức hệ thống mạng, môhình xây dựng chương trình ứng dụng mạng, kiến thức về cơ sở dữ liệu.... - Mô hình mạ

Trang 1

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

VIỆT - HÀN

- -ĐỒ ÁN MÔN CƠ SỞ 4

ĐỀ TÀI NGHIÊN CỨU VÀ XÂY DỰNG

CHƯƠNG TRÌNH DUYỆT WEB BẰNG

GIAO THỨC HTTP

Sinh Viên Thực Hiện :Văn Viết Hiếu 18IT3

Lê Nguyễn Phú Hữu 18IT3

Giảng viên hướng dẫn :TS Đặng Quang Hiển

Đà Nẵng, tháng 12 năm 2020

Trang 2

NHẬN XÉT (Của giáo viên hướng dẫn)

………

……

Đà nẵng, ngày … tháng … năm …

Giảng viên hướng dẫn

Trang 3

LỜI CẢM ƠN

Tất cả chúng ta đều đã được tiếp cận với các ứng dụng để lướt web từrất lâu, sớm nhất là có yahoo, edgle, google chrome, firefox hay là ở ViệtNam mình có cốc cốc và một vài browser khác

Em muốn thử sức mình ở lĩnh vực lập trình mạng và tạo ra một browsercủa riêng bản thân Tuy khá đơn giản và chưa có gì thực sự nổi bật để sosánh với các browser khác nhưng mà đây là project đầu tiên của bản thânnên em vẫn chưa làm được thật sự tốt, mong thầy góp ý và đưa ra đánh giá

để giúp em có thể hoàn thiện project này

Em có tham khảo 1 vài bài trên youtube và 1 vài trang mạng về lậptrình Nhờ đó em đã tạo nên browser với giao diện đơn giản và có qua thamkhảo giao diện của cốc cốc

Sau khi qua tìm hiểu và học hỏi em đã hoàn thiện được browser, mặc dùkhông được đẹp hay đầy đủ chức năng như các browser khác nhưng vẫnđáp ứng đầy đủ các chức năng mà các browser các hiện có là tìm kiếm vàchạy được các url

Vì đây là đề tài đồ án môn học nên nhóm em sẽ cố gắng phát triển tốtnhất trong khả năng của bản thân Dự kiến chương trình của sẽ hoàn thànhtrước tháng 12-2020 và sẽ cố gắng phát triển tiếp mong sau này có thể đivào hoạt động chính thức

Em xin được cảm ơn thầy Đặng Quang Hiển đã hướng dẫn và giúp đỡ emtrong bộ môn lập trình mạng trong suốt thời gian vừa qua

Trang 4

MỤC LỤC

Trang

Chương 1 CƠ SỞ LÝ THUYẾT 7

1.1 Tổng quan về lập trình mạng 7

1.2 Một số các mô hình mạng 8

1.3 Ngôn ngữ lập trình mạng 8

1.3.1 Giới thiệu chung 8

1.3.2 Các giao thức truyền thông mạng 9

1.3.3 Các cấu trúc trong C# 10

1.3.4 Đặc điểm của ngôn ngữ 12

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG TRÌNH DUYỆT WEB 11

2.1 Giới thiệu bài toán 11

2.1.1 Đề tài 11 2.1.2 Yêu cầu 11

2.1.3 Mục tiêu 11

2.1.4 Phương pháp 11

2.2 Giao thức HTTP 12

2.2.1 HTTP là gì ? 12

2.2.2 Sơ đồ hoạt động của HTTP 12

2.2.3 Uniform Resource Locator (URL) 12

2.2.4 Các thành phần chính của HTTP 13

a HTTP - Requests 13

b HTTP - Responses 13

2.2.5 Phương thức Get và Post 14

2.3 Phân tích và thiết kế hệ thống 16

2.4 Biểu đồ use - case 16

2.5 Biểu đồ tuần tự 17

2.6 Biểu đồ trạng thái 17

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

Chương 3 XÂY DỰNG TRÌNH DUYỆT WEB 19

3.1 Thiết kế giao diện 19

3.2 Chạy demo browser 24

3.3 Kết quả đạt được 26

3.4 Phương hướng phát triển ứng dụng 27

3.5 Tài liệu tham khảo 27

Trang 5

MỤC LỤC HÌNH ẢNH

Hình 1: Một số thiết bị phổ biến trong lập trình mạng 5

Hình 2: Sơ đồ hoạt động của giao thức HTTP 12

Hình 3: Sơ đồ Use-case 16

Hình 4: Biểu đồ tuần tự 17

Hình 5: Biểu đồ trạng thái 17

Hình 6: Biểu đồ hoạt động 18

Hình 7: Thiết kế các chức năng cơ bản của trình duyệt Web 19

Hình 8: Các chức năng của trình duyệt Web 20

Hình 9: Chức năng tìm kiếm của trình duyệt Web 20

Hình 10: Chức năng thêm tab của trình duyệt Web 21

Hình 11: Chức năng xóa tab hiện tại 22

Hình 12: Chức năng tạo lịch sử của trình duyệt Web 22

Hình 13: Đoạn code xóa tất cả các tab 23

Hình 14: Kiểu tra ứng dụng 23

Hình 15: Giao diện sau khi sử dụng trình duyệt Web 24

Hình 16: Nhập từ khóa trên google 24

Hình 17: Giao diện sau khi duyệt Web 25

Hình 18: Tra cứu lịch sử duyệt Web 25

Hình 19: Danh sách lịch sử đã duyệt Web 26

Trang 6

TỔNG QUAN

Trình duyệt web (web browser) là một phần mềm ứng dụng cho phép người sử dụngxem và tương tác với các văn bản, hình ảnh, đoạn phim, nhạc, trò chơi và các thôngtin khác ở trên một trang web của một địa chỉ web trên mạng toàn cầu hoặc mạng nộibộ

Trình duyệt web cho phép người sử dụng truy cập các thông tin trên các trang webmột cách nhanh chóng và dễ dàng, nó đọc định dạng HTML, CSS, XML,… để hiểnthị, do vậy một trang web có thể hiển thị khác nhau trên các trình duyệt khác nhau.Một số trình duyệt web phổ biến hiện nay bao gồm Internet Explorer(Edge), MozillaFirefox, Safari, Google Chrome, Opera,…

Trình duyệt web sử dụng địa chỉ URL (Uniform Resource Locator) được dùng đểtham chiếu tới tài nguyên trên Internet URL mang lại khả năng siêu liên kết cho cáctrang mạng, các tài nguyên khác nhau

Web browser sử dụng giao thức HTTP

HTTP (Hypertext Transfer Protocol), là giao thức thuộc lớp ứng dụng trong mô hìnhOSI Hoạt động thông thường ở cổng (port) 80 và là giao thức hướng kết nối

Các phương thức hoạt động của HTTP:

(server)

Server

Webserver

Trang 7

CẤU TRÚC CỦA BÁO CÁO

Chương 1 : CƠ SỞ LÍ THUYẾT

Chương 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

TRÌNH DUYỆT WEB

Chương 3: XÂY DỰNG TRÌNH DUYỆT WEB

 Thiết kế giao diện

Trang 8

Chương 1 CƠ SỞ LÝ THUYẾT

1.1 Tổng quan về lập trình mạng

Hình 1: Một số thiết bị phổ biến trong lập trình mạng

Ngày này khi nói đến phát triển các ứng dụng phần mềm, đa số là người ta muốn nóiđến chương trình có khả năng làm việc trong môi trường mạng tích hợp nói chung vàmạng máy tính nói riêng Từ các chương trình kế toán doanh nghiệp, quản lý, tròchơi, điều khiển đều là các chương trình ứng dụng mạng

Vấn đề lập trình mạng liên quan đế nhiều lĩnh vực kiến thức khác nhau Từ kiến thức

sử dụng ngôn ngữ lập trình, phân tích thiết kế hệ thống, kiến thức hệ thống mạng, môhình xây dựng chương trình ứng dụng mạng, kiến thức về cơ sở dữ liệu cho đếnkiến thức truyền thông, các kiến thức các lĩnh vực liên quan khác như mạng điệnthoại di động, PSTN, hệ thống GPS, các mạng như BlueTooth, WUSB, mạngsensor Nhưng có thể nói vấn đề lập trình mạng có 3 vấn đề chính cốt lõi tích hợptrong lập trình ứng dụng mạng và được thể hiện như hình

Hay nói cách khác, vấn đề lập trình mạng có thể được định nghĩa với công thức sau:LTM = KTM + MH + NN

Trang 9

 Mô hình phần mềm Client-Server: Mô hình này nhằm khắc phục tình trạng quá

tải trên mạng, và mỗi phần mềm xây dựng theo mô hình Client/Server sẽ đượcchia làm hai phần đó là phần hoạt động trên trạm làm việc gọi là phần phía Client

và phần hoạt động trên máy phục vụ gọi là phần phía Server

 Mô hình Client-Server: Các máy trạm được nối với các máy chủ, nhận quyền

truy nhập mạng và tài nguyên mạng từ các máy chủ

- Mô hình mạng ngang hàng (Peer-to-Peer P2P): Hai hay nhiều máy tính chia sẻ

tập tin và truy cập các thiết bị như máy in mà không cần đến máy chủ hay phần

1.3 Ngôn ngữ lập trình mạng

1.3.1 Giới thiệu chung

Nói chung tất cả các ngôn ngữ lập trình đều có thể sử dụng để lập trình mạng.Nhưng mỗi ngôn ngữ có những ưu, nhược điểm khác nhau và được hỗ trợ thưviện API ở các mức độ khác nhau Tuỳ từng ứng dụng mạng cụ thể, hệ điềuhành mạng cụ thể và thói quen lập trình mà người lập trình có thể chọn ngônngữ phù hợp để phát triển các ứng dụng mạng Các ngôn ngữ lập trình phổ biếnhiện nay gồm những ngôn ngữ sau:

Trang 10

Đối với phát triển ứng dụng mạng hiện nay có 2 ngôn ngữ lập trình được sửdụng phổ biến nhất, đó là NET và C# Người lập trình có thể sử dụng thànhthạo một trong 2 dòng ngôn ngữ đó để phát triển ứng dụng mạng(ở với ViệtNam nói chung nên nắm tốt cả 2 công nghệ này) Trong giáo trình này chúngtôi sẽ sử dụng ngôn ngữ lập trình JAVA và các công nghệ liên quan đến nó đểphát triển ứng dụng mạng Sau khi nắm chắc kỹ thuật, tư tưởng lập trình mạngthông qua ngôn ngữ Java, sinh viên có thể sử dụng bất kể ngôn ngữ lập trìnhnào phù hợp như VB.NET, C#,

1.3.2 Các giao thức truyền thông mạng

Giao thức mạng là một tập hợp các quy tắc mà mạng phải tuân theo Giao thứcmạng là những tiêu chuẩn và chính sách chính thức được tạo thành từ các quytắc, quy trình và định dạng xác định giao tiếp giữa hai hoặc nhiều thiết bị quamạng Các giao thức mạng thực hiện những hành động, chính sách và giảiquyết vấn đề từ đầu đến cuối, để quá trình giao tiếp mạng hoặc dữ liệu diễn rakịp thời, được bảo mật và quản lý Giao thức mạng xác định các quy tắc và quyước giao tiếp

Một số các giao thức hiện nay:

Trang 11

1.3.3 Các cấu trúc trong C#

1.3.3.1 Định nghĩa Lớp trong C#

Class trong C# chính là cách thể hiện khái niệm về lớp trong lập trình hướng đốitượng

Một Class trong C# có các thành phần như:

trong bài Biến trong C#

 <Phạm vi truy cập> Bao gồm các từ khóa như public, protected, private,static,

Trang 12

- Cấu tử là 1 phương thức đặc biệt của lớp dùng để khởi tạo giá trị ban đầu cho cácthành phần của các đối tượng của lớp Nó có đặc điểm

Class static là class chỉ có thể có static method Khi khai báo static cho class thì yêucầu tất cả các biến, hàm trong class cũng phải là static, thường dùng cho việc lưuthông tin chung cho toàn bộ ứng dụng

1.3.4 Đặc điểm của ngôn ngữ

C#, theo một hướng nào đó, là ngôn ngữ lập trình phản ánh trực tiếp nhất đến NET

Trang 13

framework này Mọi dữ liệu cơ sở đều là đối tượng, được cấp phát và hủy bỏ bởitrình dọn rác Garbage-Collector (GC), và nhiều kiểu trừu tượng khác chẳng hạn nhưclass, delegate, interface, exception phản ánh rõ ràng những đặc trưng của.NETruntime.

So sánh với C và C++, ngôn ngữ này bị giới hạn và được nâng cao ở một vài đặcđiểm nào đó, nhưng không bao gồm các giới hạn sau đây:

 Các con trỏ chỉ có thể được sử dụng trong chế độ không an toàn Hầu hếtcác đối tượng được tham chiếu an toàn, và các phép tính đều được kiểm tratràn bộ đệm Các con trỏ chỉ được sử dụng để gọi các loại kiểu giá trị; còn

những đối tượng thuộc bộ gom rác (garbage-collector) thì chỉ được gọi

bằng cách tham chiếu

 Các đối tượng không thể được giải phóng tường minh

 Chỉ có đơn kế thừa, nhưng có thể cài đặt nhiều interface trừu tượng(abstract interfaces) Chức năng này làm đơn giản hóa sự thực thi của thờigian thực thi

 C# thì an-toàn-kiểu (typesafe) hơn C++

 Cú pháp khai báo mảng khác nhau("int[] a = new int[5]" thay vì "int a[5]")

 Kiểu thứ tự được thay thế bằng tên miền không gian (namespace).

 C# không có tiêu bản

 Có thêm Properties, các phương pháp có thể gọi các Properties để truy cập

dữ liệu

 Có reflection

Trang 14

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ

95/98/NT/2000/Xp

1.4.4 Phương pháp

ứng dụng

Visual Studio IntelliCode sử dụng trí tuệ nhân tạo giúp cho việc code dễdàng hơn.

Trang 15

1.5 Giao thức HTTP

1.5.1 HTTP là gì ?

HTTP (HyperText Transfer Protocol - Giao thức truyền tải siêu văn bản) là một

trong các giao thức chuẩn về mạng Internet, được dùng để liên hệ thông tin giữa Máy

cung cấp dịch vụ (Web server) và Máy sử dụng dịch vụ (Web client), là giao thứcClient/Server dùng cho World Wide Web – WWW

HTTP là một giao thức ứng dụng của bộ giao thức TCP/IP (các giao thức nền tảng

cho Internet)

1.5.2 Sơ đồ hoạt động của HTTP

Hình 2: Sơ đồ hoạt động của giao thức HTTP

HTTP hoạt động dựa trên mô hình Client – Server Trong mô hình này, các máy tính

của người dùng sẽ đóng vai trò làm máy khách (Client) Sau một thao tác nào đó củangười dùng, các máy khách sẽ gửi yêu cầu đến máy chủ (Server) và chờ đợi câu trả lời

từ những máy chủ này

HTTP là một stateless protocol Hay nói cách khác, request hiện tại không biết

những gì đã hoàn thành trong request trước đó

HTTP cho phép tạo các yêu cầu gửi và nhận các kiểu dữ liệu, do đó cho phép xâydựng hệ thống độc lập với dữ liệu được truyển giao

1.5.3 Uniform Resource Locator (URL)

Một URL (Uniform Resource Locator) được sử dụng để xác định duy nhất một tài

nguyên trên Web Một URL có cấu trúc như sau:

protocol://hostname:port/path-and-file-name

Trang 16

Trong một URL có 4 thành phần:

 Protocol: giao thức tầng ứng dụng được sử dụng bởi client và server

 Hostname: tên DNS domain

 Port: Cổng TCP để server lắng nghe request từ client

 Path-and-file-name: Tên và vị trí của tài nguyên yêu cầu

1.5.4 Các thành phần chính của HTTP

1.6 HTTP - Requests

HTTP Request Method: Là phương thức để chỉ ra hành động mong muốn được thực hiện

trên tài nguyên đã xác định.

Cấu trúc của một HTTP Request:

 Một Request-line = Phương thức + URI–Request + Phiên bản HTTP Giao thức

HTTP định nghĩa một tập các giao thức GET, POST, HEAD, PUT Client có thể sử dụng một trong các phương thức đó để gửi request lên server.

 Có thể có hoặc không các trường header

 Một dòng trống để đánh dấu sự kết thúc của các trường Header.

Request Header Fields: Các trường header cho phép client truyền thông tin bổ sung

về yêu cầu, và về chính client, đến server Một số trường: Charset, Encoding, Accept-Language, Authorization, Expect, From, Host, …

Accept- Tùy chọn một thông điệp

Khi request đến server, server thực hiện một trong 3 hành động sau:

Server phân tích request nhận được, maps yêu cầu với tập tin trong tập tài liệu của server, và trả lại tập tin yêu cầu cho client.

Server phân tích request nhận được, maps yêu cầu vào một chương trình trên server, thực thi chương trình và trả lại kết quả của chương trình đó.

Request từ client không thể đáp ứng, server trả lại thông báo lỗi

1.7 HTTP - Responses

Cấu trúc của một HTTP response:

Trang 17

 Có thể có hoặc không có các trường header

Mã trạng thái: Thông báo về kết quả khi nhận được yêu cầu và xử lí bên server cho

4xx: Lỗi phía Client (400 -> 417)

5xx: Lỗi phía Server (500 -> 505)

1.7.1 Phương thức Get và Post

1 P hương thức Get

chúng ta muốn gửi

dẫn URL nằm trên thanh địa chỉ của Browser Server sẽ nhận đường dẫn đó vàphân tích trả về kết quả cho bạn Server sẽ phân tích tất cả những thông tin đằngsau dấu hỏi (?) chính là phần dữ liệu mà Client gửi lên

Trang 18

 Để truyền nhiều dữ liệu lên Server ta dùng dấu & để phân cách giữa các cặp giá

id=10&title=get Lưu ý với các bạn là vị trí các cặp giá trị không quan trọng,nghĩa là cặp title có thể nằm trước cặp id cũng được Server nhận dữ liệu Tất cảcác dữ liệu mà Client gửi lên bằng phương thức GET đều được lưu trong mộtbiến toàn cục mà PHP tự tạo ra đó là biến $_GET, biến này là kiểu mảng kếthợp lưu trữ danh sách dữ liệu từ client gửi lên theo quy luật key => value

Đặc điểm:

bookmark được

là password, tài khoản ngân hàng

2 Phương thức Post

form HTML nên nó bị ẩn, nghĩa là chúng ta không thể thấy các giá trị đó được

phương thức POST thì hoàn toàn ngược lại, POST sẽ gửi dữ liệu qua một cáiform HTML và các giá trị sẽ được định nghĩa trong các input gồm các kiểu(textbox, radio, checkbox, password, textarea, hidden) và được nhận dangthông qua tên (name) của các input đó Server nhận dữ liệu Tất cả các dữ liệugửi bằng phương thức POST đều được lưu trong một biến toàn cục $_POST doPHP tự tạo ra, vì thế để lấy dữ liệu thì bạn chỉ cần lấy trong biến này là được.Cũng như lưu ý với các bạn là trước khi lấy phải dùng hàm isset($bien) đểkiểm tra có hay không nhé

Đặc điểm:

không thê bookmark HTTP POST được

Trang 19

1.8 Phân tích và thiết kế hệ thống

Trong hướng dẫn này, chúng tôi sẽ tạo hai lớp:

Class Browser.cs[Design]: Chúng tôi sẽ tạo một đối tượng ToolStrip vàMenuStrip để phục vụ như một trường địa chỉ và một cửa sổ Người dùng sẽ nhậpURL vào trường địa chỉ và nhấn nút enter và chương trình sẽ dẫn người dùng đếntrang web, hiển thị nội dung trong cửa sổ

Class Browser.cs: Chứa phương thức chính để chạy các hướng dẫn Hướng dẫnnày được thực hiện với giả định rằng người dùng đã làm theo các hướng dẫn trước đó

và quen thuộc với các thuật ngữ mã hóa được sử dụng trong đó, đồng thời có kiếnthức lập trình C#

1.9 Biểu đồ use - case

Hình 3: Sơ đồ Use-case

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