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

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN - - ĐỒ ÁN MÔN CƠ SỞ ĐỀ 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 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển 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 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển LỜI CẢM ƠN Tất tiếp cận với ứng dụng để lướt web từ lâu, sớm có yahoo, edgle, google chrome, firefox Việt Nam có cốc cốc vài browser khác Em muốn thử sức lĩnh vực lập trình mạng tạo browser riêng thân Tuy đơn giản chưa có thực sự bật để so sánh với browser khác mà project thân nên em chưa làm thật sự tốt, mong thầy góp ý đưa đánh giá để giúp em hồn thiện project Em có tham khảo vài youtube vài trang mạng lập trình Nhờ em tạo nên browser với giao diện đơn giản có qua tham khảo giao diện cốc cốc Sau qua tìm hiểu học hỏi em hồn thiện browser, không đẹp hay đầy đủ chức browser khác đáp ứng đầy đủ chức mà browser hiện có tìm kiếm chạy url Vì đề tài đồ án mơn học nên nhóm em cố gắng phát triển tốt khả thân Dự kiến chương trình hoàn thành trước tháng 12-2020 cố gắng phát triển tiếp mong sau vào hoạt động thức Em xin cảm ơn thầy Đặng Quang Hiển hướng dẫn giúp đỡ em mơn lập trình mạng suốt thời gian vừa qua MỤC LỤC Trang Chương CƠ SỞ LÝ THUYẾT .7 1.1 Tổng quan lập trình mạng .7 1.2 Một số 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 1.3.2 Các giao thức truyền thông mạng 1.3.3 Các cấu trúc C# 10 1.3.4 Đặc điểm ngôn ngữ 12 Chương PHÂN TÍCH THIẾT KẾ HỆ THỐNG TRÌNH DUYỆT WEB 11 2.1 Giới thiệu 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 ? 12 2.2.2 Sơ đồ hoạt động HTTP 12 2.2.3 Uniform Resource Locator (URL) 12 2.2.4 Các thành phần HTTP 13 a HTTP - Requests 13 b HTTP - Responses .13 2.2.5 Phương thức Get Post 14 2.3 Phân tích thiết kế hệ thống 16 2.4 Biểu đồ use - case 16 2.5 Biểu đồ 17 2.6 Biểu đồ trạng thái 17 2.7 Biểu đồ hoạt động 18 Chương 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 đạt 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 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển MỤC LỤC HÌNH ẢNH Hình 1: Một số thiết bị phổ biến lập trình mạng Hình 2: Sơ đồ hoạt động giao thức HTTP 12 Hình 3: Sơ đồ Use-case 16 Hình 4: Biểu đồ 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ế chức trình duyệt Web 19 Hình 8: Các chức trình duyệt Web 20 Hình 9: Chức tìm kiếm trình duyệt Web 20 Hình 10: Chức thêm tab trình duyệt Web 21 Hình 11: Chức xóa tab 22 Hình 12: Chức tạo lịch sử trình duyệt Web 22 Hình 13: Đoạn code xóa tất tab 23 Hình 14: Kiểu tra ứng dụng .23 Hình 15: Giao diện sau sử dụng trình duyệt Web 24 Hình 16: Nhập từ khóa google 24 Hình 17: Giao diện sau 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 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển TỔNG QUAN Trình duyệt web (web browser) phần mềm ứng dụng cho phép người sử dụng xem tương tác với văn bản, hình ảnh, đoạn phim, nhạc, trị chơi thơng tin khác trang web địa web mạng toàn cầu mạng nội Trình duyệt web cho phép người sử dụng truy cập thông tin trang web cách nhanh chóng dễ dàng, đọc định dạng HTML, CSS, XML,… để hiển thị, trang web hiển thị khác trình duyệt khác Một số trình duyệt web phổ biến hiện bao gồm Internet Explorer(Edge), Mozilla Firefox, Safari, Google Chrome, Opera,… Trình duyệt web sử dụng địa URL (Uniform Resource Locator) dùng để tham chiếu tới tài nguyên Internet URL mang lại khả siêu liên kết cho trang mạng, tài nguyên khác Web browser sử dụng giao thức HTTP HTTP (Hypertext Transfer Protocol), giao thức thuộc lớp ứng dụng mơ hình OSI Hoạt động thông thường cổng (port) 80 giao thức hướng kết nối Các phương thức hoạt động HTTP:  GET: Phương thức lấy đối tượng tài nguyên máy chủ (server)  POST: Phương thức mà máy trạm (Client) sử dụng để gửi thông tin đến Server  PUT: Phương thức dùng để máy trạm (Client) đẩy (upload) liệu lên Server  DELETE: Phương thức giúp Client xoá đối tượng, tài nguyên từ máy Webserver  HEAD: Phương thức xác minh đối tượng có tồn hay không  TRACE: Phương thức sử dụng để gọi từ xa lớp ứng dụng trở lại Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển CẤU TRÚC CỦA BÁO CÁO Chương 1: CƠ SỞ LÍ THUYẾT  Tổng quan lập trình mạng  Phương pháp ngun cứu  Cơng nghệ ngơn ngữ sử dụng Chương 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG TRÌNH DUYỆT WEB  Đưa đặc tả yêu cầu ứng dụng  Phân tích thiết kế hệ thống Chương 3: XÂY DỰNG TRÌNH DUYỆT WEB  Thiết kế giao diện  Chạy demo chương trình  Tổng kết đề án làm chưa làm  Đưa hướng cho đề tài Đồ án sở 4:Trình Duyệt Web giao thức HTTP Chương GVHD: Đặng Quang Hiển CƠ SỞ LÝ THUYẾT 1.1 Tổng quan lập trình mạng Hình 1: Một số thiết bị phổ biến lập trình mạng Ngày nói đến phát triển ứng dụng phần mềm, đa số người ta muốn nói đến chương trình có khả làm việc mơi trường mạng tích hợp nói chung mạng máy tính nói riêng Từ chương trình kế tốn doanh nghiệp, quản lý, trò chơi, điều khiển 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 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 sở liệu kiến thức truyền thông, kiến thức lĩnh vực liên quan khác mạng điện thoại di động, PSTN, hệ thống GPS, mạng BlueTooth, WUSB, mạng sensor Nhưng nói vấn đề lập trình mạng có vấn đề cốt lõi tích hợp lập trình ứng dụng mạng thể hiện hình Hay nói cách khác, vấn đề lập trình mạng định nghĩa với cơng thức sau: LTM = KTM + MH + NN Đồ án sở 4:Trình Duyệt Web giao thức HTTP  LTM: Lập trình mạng  KTM: Kiến thức mạng truyền thơng (mạng máy tính, PSTN, )  MH: Mơ hình lập trình mạng  NN: Ngơn ngữ lập trình mạng 1.2 - GVHD: Đặng Quang Hiển Một số mơ hình mạng Mơ hình Trạm – Chủ (Client-Server):  Mơ hình phần mềm Client-Server: Mơ hình nhằm khắc phục tình trạng tải mạng, phần mềm xây dựng theo mơ hình Client/Server chia làm hai phần phần hoạt động trạm làm việc gọi phần phía Client phần hoạt động máy phục vụ gọi phần phía Server  Mơ hình Client-Server: Các máy trạm nối với máy chủ, nhận quyền truy nhập mạng tài nguyên mạng từ 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 truy cập thiết bị máy in mà không cần đến máy chủ hay phần mềm máy chủ 1.3 Ngơn ngữ lập trình mạng 1.3.1 Giới thiệu chung Nói chung tất ngơn ngữ lập trình sử dụng để lập trình mạng Nhưng ngơn ngữ có ưu, nhược điểm khác hỗ trợ thư viện API mức độ khác Tuỳ ứng dụng mạng cụ thể, hệ điều hành mạng cụ thể thói quen lập trình mà người lập trình chọn ngơn ngữ phù hợp để phát triển ứng dụng mạng Các ngơn ngữ lập trình phổ biến hiện gồm ngôn ngữ sau:  Hợp ngữ( Assembly Language)  C/C++  VC++, VB, Delphi  Java  NET Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển  ASP Đối với phát triển ứng dụng mạng hiện có ngơn ngữ lập trình sử dụng phổ biến nhất, NET C# Người lập trình sử dụng thành thạo dịng ngơn ngữ để phát triển ứng dụng mạng(ở với Việt Nam nói chung nên nắm tốt cơng nghệ này) Trong giáo trình chúng tơi sử dụng ngơn ngữ lập trình JAVA cơng nghệ liên quan đến để phát triển ứng dụng mạng Sau nắm kỹ thuật, tư tưởng lập trình mạng thơng qua ngơn ngữ Java, sinh viên sử dụng ngơn ngữ lập trình phù hợp VB.NET, C#, 1.3.2 Các giao thức truyền thông mạng Giao thức mạng tập hợp quy tắc mà mạng phải tuân theo Giao thức mạng tiêu chuẩn sách thức tạo thành từ quy tắc, quy trình định dạng xác định giao tiếp hai nhiều thiết bị qua mạng Các giao thức mạng thực hiện hành động, sách giải vấn đề từ đầu đến cuối, để trình giao tiếp mạng liệu diễn kịp thời, bảo mật quản lý Giao thức mạng xác định quy tắc quy ước giao tiếp Một số giao thức hiện nay:  Internet Protocol Suite  Protocol stack  Tranmission Control Protocol (TCP)  User Datagram Protocol (UDP)  Internet Protocol (IP)  Hypertext Transfer Protocol (HTTP)  File Transfer Protocol (FTP)  Secured Shell (SSH)  Simple Mail Transfer Protocol (SMTP)  Post Office Protocol (POP) Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển Trong URL có thành phần:  Protocol: giao thức tầng ứng dụng sử dụng client server  Hostname: tên DNS domain  Port: Cổng TCP để server lắng nghe request từ client  Path-and-file-name: Tên vị trí tài nguyên yêu cầu 1.5.4 Các thành phần HTTP 1.6 HTTP - Requests HTTP Request Method: Là phương thức để hành động mong muốn thực hiện tài nguyên xác định Cấu trúc HTTP Request:  Một Request-line = Phương thức + URI–Request + Phiên HTTP Giao thức HTTP định nghĩa tập giao thức GET, POST, HEAD, PUT Client sử dụng phương thức để gửi request lên server  Có thể có khơng trường header  Một dòng trống để đánh dấu sự kết thúc trường Header Request Header Fields: Các trường header cho phép client truyền thông tin bổ sung yêu cầu, client, đến server Một số trường: Accept-Charset, AcceptEncoding, Accept-Language, Authorization, Expect, From, Host, …  Tùy chọn thông điệp Khi request đến server, server thực hiện hành động sau: Server phân tích request nhận được, maps yêu cầu với tập tin tập tài liệu server, 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 chương trình server, thực thi chương trình trả lại kết 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 HTTP response: 13 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển  Một Status-line = Phiên HTTP + Mã trạng thái + Trạng thái  Có thể có khơng có trường header  Một dịng trống để đánh dấu sự kết thúc trường header  Tùy chọn thông điệp Mã trạng thái: Thông báo kết nhận yêu cầu xử lí bên server cho client Các kiểu mã trạng thái: 1xx: Thông tin (100 -> 101)  VD: 100 (Continue), … 2xx: Thành công (200 -> 206)  VD: 200 (OK) , 201 (CREATED), … 3xx: Sự điều hướng lại (300 -> 307)  VD: 305 (USE PROXY), … 4xx: Lỗi phía Client (400 -> 417)  VD: 403 (FORBIDDEN), 404 (NOT FOUND), … 5xx: Lỗi phía Server (500 -> 505)  VD: 500 (INTERNAL SERVER ERROR) 1.7.1 Phương thức Get Post Phương thức Get  Phương thức GET dễ nhận thấy URL kèm theo liệu mà muốn gửi  Client gửi lên Phương thức GET phương thức gửi liệu thông qua đường dẫn URL nằm địa Browser Server nhận đường dẫn phân tích trả kết cho bạn Server phân tích tất thơng tin đằng sau dấu hỏi (?) phần liệu mà Client gửi lên 14 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển  Ví dụ: Với URL viblo.asia?id=10 Server nhận giá trị id = 10  Để truyền nhiều liệu lên Server ta dùng dấu & để phân cách cặp giá trị Giả sử muốn truyền id = 10 title = 'get’ URL có dạng viblo.asia? id=10&title=get Lưu ý với bạn vị trí cặp giá trị không quan trọng, nghĩa cặp title nằm trước cặp id Server nhận liệu Tất liệu mà Client gửi lên phương thức GET lưu biến tồn cục mà PHP tự tạo biến $_GET, biến kiểu mảng kết hợp lưu trữ danh sách liệu từ client gửi lên theo quy luật key => value Đặc điểm:  HTTP GET cache trình dụt  HTTP GET trì lịch sử lý mà người dùng có thê bookmark  HTTP GET không sử dụng form có liệu nhạy cảm password, tài khoản ngân hàng  HTTP GET bị giới hạn số trường độ dài data gửi Phương thức Post  Phương thức POST có tính bảo mật liệu gửi phải thông qua form HTML nên bị ẩn, nghĩa khơng thể thấy giá trị  Client Gửi Lên với phương thức GET liệu thấy URL phương thức POST hồn tồn ngược lại, POST gửi liệu qua form HTML giá trị định nghĩa input gồm kiểu (textbox, radio, checkbox, password, textarea, hidden) nhận dang thông qua tên (name) input Server nhận liệu Tất liệu gửi phương thức POST lưu biến tồn cục $_POST PHP tự tạo ra, để lấy liệu bạn cần lấy biến Cũng lưu ý với bạn trước lấy phải dùng hàm isset($bien) để kiểm tra có hay khơng Đặc điểm:  HTTP POST khơng cache trình dụt  HTTP POST khơng thể trì lịch sử lý mà người dùng không thê bookmark HTTP POST 15 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển  HTTP POST khơng giới hạn liệu gửi 1.8 Phân tích thiết kế hệ thống  JXBrowser – Thư viện JXBrowser  Tài liệu JXBrowser - https://jxbrowser.support.teamdev.com/support/solutions  Hướng dẫn - https://www.youtube.com/watch?v=7rVChaNN33U Trong hướng dẫn này, tạo hai lớp: Class Browser.cs[Design]: Chúng tạo đối tượng ToolStrip MenuStrip để phục vụ trường địa cửa sổ Người dùng nhập URL vào trường địa nhấn nút enter chương trình dẫn người dùng đến trang web, hiển thị nội dung cửa sổ Class Browser.cs: Chứa phương thức để chạy hướng dẫn Hướng dẫn thực hiện với giả định người dùng làm theo hướng dẫn trước quen thuộc với thuật ngữ mã hóa sử dụng đó, đồng thời có kiến thức lập trình C# 1.9 Biểu đồ use - case Hình 3: Sơ đồ Use-case 16 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển 1.10 Biểu đồ Hình 4: Biểu đồ 1.11 Biểu đồ trạng thái Hình 5: Biểu đồ trạng thái 17 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển 1.12 Biểu đồ hoạt động Hình 6: Biểu đồ hoạt động 18 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển CHƯƠNG 3: XÂY DỰNG TRÌNH DUYỆT WEB 1.13 Thiết kế giao diện Bước 1:Thêm số công cụ biểu mẫu bạn Hình 7: Thiết kế chức trình duyệt Web Bước 2:Mã cho Quay lại / Chuyển tiếp / Trang chủ / Làm 19 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển Hình 8: Các chức trình duyệt Web Bước 3:Mã cho Nút Go/ Tìm kiếm Hình 9: Chức tìm kiếm trình duyệt Web 20 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển Bước 4:Thêm Tab tìm kiếm Hình 10: Chức thêm tab trình duyệt Web 21 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển Bước 6:Xóa Tab hiện Hình 11: Chức xóa tab Bước 7: Tạo lịch sử Hình 12: Chức tạo lịch sử trình duyệt Web 22 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển Bước 8: Xóa tab Hình 13: Đoạn code xóa tất tab Bước 9:Kiểm tra ứng dụng Hình 14: Kiểu tra ứng dụng 23 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển 1.14 Chạy demo browser - Nhập Instagram.com vào tìm kiếm url, sau ấn icon search enter - Hiển thị bên kết tìm kiếm Hình 15: Giao diện sau sử dụng trình duyệt Web Hoặc tìm kiếm home browser(google) đáp ứng tất chức browser khác: Hình 16: Nhập từ khóa google 24 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển Hình 17: Giao diện sau duyệt Web Có thể tra lịch sử tìm kiếm có ngày cụ thể: Hình 18: Tra cứu lịch sử duyệt Web 25 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển Hình 19: Danh sách lịch sử duyệt Web 1.15 Kết đạt  Em giải vấn đề: - Giới thiệu sơ lược WebBrowser - Sử dụng đối tượng Windows Forms - Có thể chạy chức trình duyệt web như: o Nút Back (quay lại trang trước) o Nút Forward (tiến đến trước trước) o Nút Home o Nút Reload (tải lại trang) o Có thể tìm kiếm tiềm kiếm o Xem lịch sử duyển web  Những chức chưa làm được: - Chưa tạo chức tạo tab - Chưa có tab ẩn danh - Chưa có chức đăng nhập gmail để quản lí trình dụt - Chưa tạo chức đánh dấu trang 26 Đồ án sở 4:Trình Duyệt Web giao thức HTTP GVHD: Đặng Quang Hiển 1.16 Phương hướng phát triển ứng dụng Trong tương lai, em tiếp tục phát triển ứng dụng để hoàn thiện Phát triển đầu tư giao diện vài tính đặc biệt khác:  Tab ẩn danh  Web chạy nhanh  Chụp ảnh hình  Quản lý tải xuống  Setup giao diện trình dụt Để đưa vào hoạt động Đây chương trình ứng dụng thực tế lớn phức tạp, cần có nhóm chuyên gia thực hiện.Vì khn khổ đồ án đưa chức bản, mô phần nhỏ yêu cầu thực tế.Rất mong nhận sự đóng góp ý kiến thầy giáo bạn bè để chương trình tiếp tục hoàn thiện, đáp ứng cách tốt browser đơn giản 1.17 Tài liệu tham khảo  Cách thức giao tiếp HTTP: https://www.topwebviet.com/cach-thuc-giao-tiep-giua-trinh-duyet-web-voi-maychu-web.html  Mô hình Client-Server trình duyệt: https://www.stdio.vn/csharp-for-automation/socket-server-trong-c-416TFe1  Hướng dẫn làm trình duyệt web đơn giản: https://www.youtube.com/watch?v=XhdJF4XyquA 27