Báo Cáo Đồ Án Cơ Sở 4 Đề Tài Xây Dựng Một Trình Duyệt Web Cơ Bản.docx

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT HÀN KHOA KHOA HỌC MÁY TÍNH BÁO CÁO ĐỒ ÁN CƠ SỞ 4 ĐỀ TÀI XÂY DỰNG MỘT TRÌNH DUYỆT WEB CƠ BẢN LỜI CẢM ƠN Trong lời đầu tiên của báo cáo đồ án cơ s[.]

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN KHOA KHOA HỌC MÁY TÍNH BÁO CÁO ĐỒ ÁN CƠ SỞ ĐỀ TÀI XÂY DỰNG MỘT TRÌNH DUYỆT WEB CƠ BẢN LỜI CẢM ƠN Trong lời báo cáo đồ án sở này, nhóm báo chúng em muốn gửi lời cảm ơn biết ơn chân thành tới tất người hỗ trợ, giúp đỡ chúng em kiến thức tinh thần trình thực đồ án sở Trước hết, chúng em xin chân thành cảm ơn cô – Trần Uyên Trang , người trực tiếp hướng dẫn, nhận xét, giúp đỡ chúng em trình thực đồ án Chúng em xin chân thành cảm ơn đội ngũ giảng viên Khoa Công nghệ thông tin – Đại học công nghệ thông tin Việt Hàn tạo điều kiện tốt cho chúng em bạn sinh viên khác trình học tập làm đồ án sở Do thời gian thực có hạn, kiến thức nhiều hạn chế nên đồ án sở chắn khơng tránh khỏi thiếu xót Chúng em mong nhận ý kiến đóng góp thầy để chúng em có thêm kinh nghiệm cố gắng cho đồ án sau Chúng em xin chân thành cảm ơn! MỤC LỤC MỞ ĐẦU 1 Lý chọn đề tài .1 Mục đích đề tài Đối tượng phạm vi nghiên cứu đề tài 3.1 Đối tượng: 3.2 Phạm vi nghiên cứu: Kết cấu đồ án CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Tổng quan giao thức TCP/IP giao thức HTTP Cấu trúc trình duyệt Tìm hiểu thêm Render Engine Python thư viện PyQtWebkit 13 CHƯƠNG 2: THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG 15 Code 15 1.1 Xây dựng giao diện 15 1.2 Thao tác với nút 16 1.3 Xử lí địa URL 17 1.4 Thêm tab 17 1.5 Thay đổi chuyển trang 17 DEMO 18 CHƯƠNG : KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 19 Kết luận 19 Hướng phát triển 19 MỞ ĐẦU Lý chọn đề tài Với phát triển mạnh mẽ công nghệ nay, internet phổ biến tồn giới, nhu cầu duyệt web tiếp cận internet cần thiết để bắt nhịp với xu toàn cầu tiếp cận với thơng tin, làm việc, giải trí, trao đổi thơng tin, trị chuyện vv… Do đó, để đáp ứng nhu cầu trên, việc truy cập vào trang web ln ln cần đến trình duyệt web để thao tác với liệu số khô khan từ hệ thống mạng toàn cầu internet thành liệu đa phương tiện hình ảnh, âm video… đa dạng nhiều màu sắc Và để đáp ứng điều kiện đó, trình duyệt web ln phải đảm bảo nhiều yếu tố bảo mật, hiển thị thơng tin tốt, trình bày hợp lí để mang đến cho người dùng trải nghiệm tốt Trong học phần lập trình mạng trường, em học giao thức mạng, giao thức, tầng giao thức, đường liệu mạng, bảo mật mạng Những kiến thức thực sữ hữu ích để áp dụng vào đề tài xây dựng trình duyệt web Đề tài xây dựng trình duyệt web đề tài phổ biến mơn lập trình mạng, giúp em áp dụng tất kiến thức học vào đề tài Vì đề tài xây dựng trình duyệt web đề tài hoàn hảo để tìm hiểu, nghiên cứu hồn thành đồ án sở Mục đích đề tài - Xây dựng phần mềm duyệt web Tìm hiểu Python thư viện PyQtWebkit,PyWebEngine Đối tượng phạm vi nghiên cứu đề tài 3.1 Đối tượng: - Bộ giao thức TCP/IP giao thức HTTP - Các phương pháp, thuật toán phục vụ cho việc duyệt web xử lí URL - Bộ thư viện PyQtWebkit thư viện xử lí giao diện PyQt5 3.2 Phạm vi nghiên cứu: - Tập trung vào nghiên cứu trình duyệt , thành phần trình duyệt, hướng gói tin - Nghiên cứu giao thức chủ yếu sử dụng việc duyệt web TCP/IP HTTP,HTTPS - Nghiên cứu parser, browser engine chủ yếu browser engine webkit sử dụng đề tài Kết cấu đồ án Gồm chương :  Chương : Cơ sở lý thuyết  Chương : Thiết kế xây dựng hệ thống  Chương : Kết luận hướng phát triển CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Tổng quan giao thức TCP/IP giao thức HTTP Giao thức TCP/IP Cơ quan đạo dự án nghiên cứu Quốc phòng tiên tiến (Defense Advanced Research Projects Agency - DARPA), chi nhánh nghiên cứu Bộ Quốc phòng Mỹ, tạo model TCP/IP năm 1970 để sử dụng ARPANET, mạng diện rộng có trước Internet TCP/IP ban đầu thiết kế cho hệ điều hành Unix tích hợp vào tất hệ điều hành sau Model TCP/IP giao thức liên quan Internet Engineering Task Force trì Bộ giao thức TCP/IP, giao thức truyền thông cài đặt chồng giao thức (protocol stack) mà Internet hầu hết mạng máy tính thương mại chạy Bộ giao thức đặt tên theo hai giao thức TCP (Giao thức Điều khiển Giao vận) IP (Giao thức Liên mạng) Chúng hai giao thức định nghĩa Như nhiều giao thức khác, giao thức TCP/IP coi tập hợp tầng, tầng giải tập vấn đề có liên quan đến việc truyền liệu, cung cấp cho giao thức tầng cấp dịch vụ định nghĩa rõ ràng dựa việc sử dụng dịch vụ tầng thấp Về mặt logic, tầng gần với người dùng làm việc với liệu trừu tượng hơn, chúng dựa vào giao thức tầng cấp để biến đổi liệu thành dạng mà cuối truyền cách vật lý Mơ hình OSI miêu tả tập cố định gồm tầng mà số nhà sản xuất lựa chọn so sánh tương giao thức TCP/IP Sự so sánh gây nhầm lẫn mang lại hiểu biết sâu giao thức TCP/IP Bộ giao thức IP dùng đóng gói liệu hịng trừu tượng hóa (thu nhỏ lại quan niệm cho dễ hiểu) giao thức dịch vụ Nói cách chung chung, giao thức tầng cao dùng giao thức tầng thấp để đạt mục đích Chồng giao thức Internet gần giống tầng cấp mơ hình Bộ quốc phòng Mỹ: - Tầng ứng dụng Tầng giao vận Tầng mạng Tầng liên kết Và chủ đề ta sử dụng chủ yếu giao thức HTTP giao thức TCP/IP nên tìm hiểu kĩ giao thức HTTP Giao thức HTTP: HTTP (Hypertext Transfer Protocol) giao thức truyền tải siêu văn Đây giao thức tiêu chuẩn cho World Wide Web (www) để truyền tải liệu dạng văn bản, âm thanh, hình ảnh, video từ Web Server tới trình duyệt web người dùng ngược lại Sự phát triển HTTP Tim Berners-Lee CERN khởi xướng vào năm 1989 Việc phát triển RFC HTTP ban đầu nỗ lực phối hợp Lực lượng Đặc nhiệm Kỹ thuật Internet (IETF) World Wide Web Consortium (W3C), với thay đổi sau chuyển sang IETF phụ trách HTTP/1.1 lần chuẩn hóa RFC 2068 vào năm 1997 Đặc điểm kỹ thuật RFC 2616 tuân theo vào năm 1999, thay họ RFC RFC 7230 vào năm 2014 HTTP/2 giao thức hiệu ngữ nghĩa HTTP "trên dây" xuất vào năm 2015; hỗ trợ tất trình duyệt web máy chủ web lớn qua Bảo mật tầng truyền tải (TLS) cách sử dụng tiện ích mở rộng Application-Layer Protocol Negotiation (ALPN) TLS 1.2 bắt buộc phải có HTTP/3 kế thừa đề xuất cho HTTP / 2, sử dụng web (được bật theo mặc định macOS nhất), sử dụng UDP thay TCP cho giao thức truyền tải Giống HTTP / 2, khơng lỗi thời phiên trước giao thức Hỗ trợ cho HTTP/3 thêm vào Cloudflare Google Chrome vào tháng năm 2019, kích hoạt phiên ổn định Chrome Firefox HTTP giao thức ứng dụng giao thức TCP/IP (các giao thức tảng cho Internet) Bộ giao thức TCP/IP giao thức truyền thông cài đặt chồng giao thức mà Internet hầu hết mạng máy tính thương mại chạy Bộ giao thức đặt theo tên hai giao thức TCP (Transmission Control Protocol – Giao thức điều khiển truyền vận) IP (Internet Protocol – Giao thức Internet) HTTP hoạt động theo mơ hình Client (máy khách) – Server (máy chủ) Việc truy cập website tiến hành dựa giao tiếp đối tượng Khi bạn truy cập trang web qua giao thức HTTP, trình duyệt thực phiên kết nối đến server trang web thơng qua địa IP hệ thống phân giải tên miền DNS cung cấp Máy chủ sau nhận lệnh, trả lệnh tương ứng giúp hiển thị website, bao gồm nội dung như: văn bản, ảnh, video, âm thanh,… Trong trình kết nối trao đổi thơng tin, trình duyệt bạn thừa nhận địa IP đến từ server website mà bạn muốn truy cập mà khơng có biện pháp xác thực Các thông tin gửi qua giao thức HTTP (bao gồm địa IP, thông tin mà bạn nhập vào website…) khơng mã hóa bảo mật Đây kẽ hở mà nhiều hacker lợi dụng để đánh cắp thông tin người dùng, thường gọi công sniffing HTTP Request Method phương thức để thực nguồn nhận diện Request-URI cung cấp: - - GET GET sử dụng để lấy lại thông tin từ Server cung cấp sử dụng URI cung cấp Các yêu cầu sử dụng GET nhận liệu khơng có ảnh hưởng tới liệu HEAD Tương tự GET, truyền tải dòng trạng thái khu vực Header - POST Một yêu cầu POST sử dụng để gửi liệu tới Server, ví dụ, thơng tin khách hàng, file tải lên, …, sử dụng mẫu HTML - PUT Thay đổi tất đại diện nguồn mục tiêu với nội dung tải lên - DELETE Gỡ bỏ tất đại diện nguồn mục tiêu URI - CONNECT Thiết lập tunnel tới Server xác định URI cung cấp - OPTIONS Miêu tả chức giao tiếp cho nguồn mục tiêu - TRACE Trình bày vịng lặp kiểm tra thơng báo song song với path tới nguồn mục tiêu HTTPS hoạt động tương tự HTTP, nhiên bổ sung thêm chứng SSL (Secure Sockets Layer – tầng ổ bảo mật) TLS (Transport Layer Security – bảo mật tầng truyền tải) Hiện tại, tiêu chuẩn bảo mật hàng đầu cho hàng triệu website toàn giới Cả SSL TLS sử dụng hệ thống PKI (Public Key Infrastructure -hạ tầng khóa cơng khai) khơng đối xứng Hệ thống sử dụng hai “khóa” để mã hóa thơng tin liên lạc, “khóa cơng khai” (public key) “khóa riêng” (private key) Bất thứ mã hóa khóa cơng khai giải mã khóa riêng ngược lại Các tiêu chuẩn đảm bảo nội dung mã hóa trước truyền đi, giải mã nhận Điều khiến hacker dù có chen ngang lấy thơng tin khơng thể “hiểu” thơng tin Mặc dù giao thức truyền tải thông tin mạng internet, HTTP HTTPS có điểm khác cốt lõi khiến cho HTTPS ưa chuộng toàn giới Sự khác biệt lớn HTTP HTTPS chứng SSL Về bản, HTTPS giao thức HTTP với bảo mật bổ sung Tuy nhiên, thời đại mà thông tin số hóa, giao thức HTTPS lại trở nên cần thiết cho bảo mật website Dù bạn sử dụng máy tính cá nhân hay cơng cộng, tiêu chuẩn SSL đảm bảo liên lạc máy khách máy chủ an toàn, chống bị dịm ngó Port cổng xác định thơng tin máy khách, sau phân loại để gửi đến máy chủ Mỗi Port mang số hiệu riêng với chức riêng biệt Giao thức HTTP sử dụng Port 80, HTTPS sử dụng Port 443 – cổng hỗ trợ mã hóa kết nối từ máy tính client đến server, nhằm bảo vệ gói liệu truyền Giao thức HTTPS sử dụng phương thức mã hóa (encryption) để đảm bảo thông điệp trao đổi máy khách máy chủ không bị kẻ thứ ba (hackers) đọc Nếu truy cập website không cài đặt giao thức HTTPS, người dùng đối diện với nguy bị cơng sniffing Hacker “chen ngang” vào kết nối máy khách máy chủ, đánh cắp liệu mà người dùng gửi (password, thông tin thẻ tín dụng, văn email,…) thơng tin sẵn có từ website Thậm chí, thao tác người dùng website bị quan sát, ghi lại mà họ không hay biết Với giao thức HTTPS, người dùng máy chủ hoàn toàn tin tưởng thơng điệp chuyển giao qua trạng thái nguyên vẹn, không qua chỉnh sửa, sai lệch so với liệu đầu vào Một số trình duyệt web phổ biến Google Chrome, Mozilla Firefox, Microsoft Edge, hay Apple Safari có cảnh báo người dùng website “khơng bảo mật” sử dụng HTTP Động thái giúp bảo vệ thông tin người dùng lướt web, bao gồm thông tin cá nhân, thẻ ngân hàng liệu nhạy cảm khác Cấu trúc trình duyệt Trước tiên qua cấu trúc, thành phần chung trình duyệt web đại, gồm thành phần (tầng) sau: Thành phần nằm phía thành phần gần với tương tác người dùng, phía sâu nặng xử lý liệu tương tác Nhiệm vụ lớp sau:  User Interface: Là tầng cao nhất, nơi tương tác chủ yếu người dùng trình duyệt, bao gồm thành phần quen thuộc Address, nút Reload – Back – Home, Biểu tượng Bookmarks…  Browser Engine: Đây tầng nằm cầu nối User Interface & Rendering Engine Tầng cung cấp hành động (actions) để giao tiếp xử lý liệu từ tầng Rendering Engine lên tầng User Interface ngược lại, chuyển đổi hành động người dùng thao tác tầng Interface xuống Rendering Engine Ví dụ nhấp vào nút Reload trang User Interface có “tên” mang thơng điệp xuống bên để xử lý thực load lại trang, “tên” đóng vai trò Browser Engine Vậy để dễ phân biệt bạn xem Reload icon User Interface, cịn Reload page action Browser Engine lo  Rendering Engine (Layout engine): Đây tầng quan trọng, đóng vai trò xử lý (rendering) thẻ – câu lệnh HTML, CSS, XML, JS để hình thành giao diện (layout) hiển thị lên tầng User Interface, nhìn thấy tương tác Nên hiểu tầng xử lý khơng hiệu phía người dùng khơng hiển thị tốt Các trình duyệt họ dùng xử lý Rendering Engine không giống sau:  IE: Trident Engine  Firefox: Gecko Engine  Safari & Chrome: WebKit (Note: Chrome uses Blink after version 27)  Opera: Presto Đây lý trang web bạn lại hiểu thị khơng giống trình duyệt, trình duyệt họ sử dụng Rendering Engine khác để xử lý  Networking – JavaScript Interpreter – Display UI Backend  Networking: Có nhiệm vụ gọi giao thức mạng Ví dụ giao thức HTTP (Hypertext Transfer Protocol)  UI Backend: Có chức xử lý hiển thị UI components phổ biến combo-boxes, textbox, drop-down hiển thị web  JavaScript interpreter: xử lý thực thi đoạn mã JavaScript để hiển thị lên trang web Đây thành phần quan trọng ảnh hưởng đến việc hiển thị trang web, trang web thường cần xử lý sử dụng nhiều mã JavaScript.ý khác khơng thể trơng mong xử lý hiển thị giống  Data persistence: Có chức lưu trữ thơng tin liệu máy local Những liệu Cache, Cookies, localStorage, IndexedDB, WebSQL and FileSystem tùy vào hệ thống web Vậy thấy trình duyệt cần nhiều thàn phần thành phần có nhữn chức riêng biệt, tất ảnh hưởng nhiều đến việc hình thành xử lý giao diện, chức trang web hiển thị lên cho người sử dụng Tìm hiểu thêm Render Engine Render Engine phần quan trọng trình duyệt, giúp xử lí liệu HTML CSS thành Render tree từ đưa layout giúp hiển thị lên hình người dùng Dưới bước xử lý (render) thường có trình duyệt nay:     Bước – Parsing (HTML to DOM and CSS to CSSOM) Bước – Render tree (Combine DOM and CSSOM together) Bước – Layout of the render tree Bước – Painting the render tree 10 Bước 1: Parsing HTML & CSS Ở bước này, Rendering Engine có nhiệm vụ sau:  Parses HTML tag: Phân tích thẻ (tags) HTML viết trong code tạo thành cấu trúc dạng DOM (Document Object Model) tree hình bên dưới, giải đoạn gọi lại “content tree” Thành phần cao DOM thẻ HTML parsing xử lý từ xuống dừng lại gặp thẻ internal / external , trình dừng lại để tìm đến thẻ mã sau gởi script qua cho lớp “Javascript engine” xử lý, làm xong xong giai đoạn tìm kiếm bàn giao HTML parsing tiếp tục công việc làm Nên lý nên đưa thẻ xuống cuối code (bên nội dung web) để trang parsing nhanh hơn, khơng phải dừng lại để tìm kiếm gặp thẻ chừng, điều quan trọng để tăng tốc tộ trang web Thẻ có hai thuộc tính định việc load scripts async attribute defer attribute: 11 - - The async attribute: – Sẽ load lên độc lập, không cần quan tâm đến việc chờ nội dung load lên xong hay chưa Bạn dùng thuộc tính để ngăn chặn việc dừng trình parsing (parser blocking) Defer attribute: – Với thuộc tính Defer, script thực thi sau nội dung load lên hồn tất Khơng xử lý nội dung chưa load xong  Parses CSS to CSSOM (CSS Object Model) : Giống HTML, CSS chia thành dạng nhánh hình bên với mục đích tạo thành cấu trúc elements phục vụ cho trình render, nhiên DOM CSSOM hai q trình độc lập Có thể hiểu, giai đoạn Parsing chuyển thẻ HTML sang dạng DOM & chuyển CSS sang CSSOM – dùng phase bên DOM lo nội dung hiển thị, CSSOM tập trung vào style dùng nội dung document Bước – Render tree construction Sau nhận kết cấu trúc DOM/CSSOM bước trên, giai đoạn thứ tạo Render tree từ DOM/CSSOM Các “nodes” từ DOM CSSOM trees kết hợp lại với giai đoạn Mục tiêu Render tree xếp 12 elements theo thứ tự hiển thị (từ xuống dưới) Đây hình mơ tả kết hợp DOM CSSOM để hình thành Render Tree Render Tree chứa thành phần hiển thị (visible elements) web Những element có thuộc tính CSS “display: none” hay khơng hiển thị khơng đưa vào Render Tree (cịn lại đưa vào) Chú ý hai thuộc tính sau: - “display:none“: Xem không hiển thị không ảnh hưởng đến hiệu “visiblity:hidden“: trình duyệt phải xử lý để ẩn element ảnh hưởng & tác động đến hiệu trang web Bước – Layout of the render tree (flow re-flow) Giai đoạn gọi Layout process với nhiệm vụ tính tốn vị trí hiển thị hình dáng đối tượng render tree Việc tính tốn phân bổ đối đối tượng thực từ trái sang phải xuống tính từ tọa độ từ bên trái Việc mang ý nghĩa quan trọng định đến hiển thị bố cục layout trước chuyển sang giai đoạn xuất giao diện (painting bên dưới) Bước Layout tính thơng số vị trí elements, kích thước element, dịng nội dung, Z-index property…v v Bước – Paint the render tree Đây giai đoạn cuối trình, trình duyệt hiển thị nội dung đến cho người dùng Quá trình painting làm theo thứ tự định (từ xuống, trái qua phải, từ background colour => background image => border) xuất dạng pixels hiển thị 13 Thời gian để painting phụ thuộc kích thước cấu trúc DOM, CSSOM Một vài thuộc tính tốn thời gian painting thuộc tính khác (Ví dụ background-image chậm solid background colour) Python thư viện Webkit Engine Python Python ngơn ngữ lập trình bậc cao cho mục đích lập trình đa năng, Guido van Rossum tạo lần đầu mắt vào năm 1991 Python thiết kế với ưu điểm mạnh dễ đọc, dễ học dễ nhớ Python ngôn ngữ có hình thức sáng sủa, cấu trúc rõ ràng, thuận tiện cho người học lập trình Cấu trúc Python cho phép người sử dụng viết mã lệnh với số lần gõ phím tối thiểu Vào tháng năm 2018, Van Rossum từ chức Leader cộng đồng ngôn ngữ Python sau 30 năm lãnh đạo Python hoàn toàn tạo kiểu động dùng chế cấp phát nhớ tự động; tương tự Perl, Ruby, Scheme, Smalltalk, Tcl Python phát triển dự án mã mở, tổ chức phi lợi nhuận Python Software Foundation quản lý Ban đầu, Python phát triển để chạy Unix Nhưng theo thời gian, Python dần mở rộng sang hệ điều hành từ MS-DOS đến Mac OS, OS/2, Windows, Linux hệ điều hành khác thuộc họ Unix Mặc dù phát triển Python có đóng góp nhiều cá nhân, Guido van Rossum tác giả chủ yếu Python Ơng giữ vai trị chủ chốt việc định hướng phát triển Python Webkit WebKit khung ứng dụng nguồn mở cung cấp thành phần cần thiết để xây dựng trình duyệt web WebKit Apple Inc thức nhận từ thư viện phần mềm KHTML trình duyệt Konqueror để sử dụng cỗ máy cho trình duyệt hệ điều hành Mac OS X Safari tiếp tục phát triển dự án KDE, Apple, Nokia, Google, Torch Mobile số khác Nó chuyển thể sang nhiều tảng khác dùng cỗ máy kết xuất nhiều phần mềm khác WebKit nguồn mở; thành phần WebCore JavaScriptCore sử dụng bảo hộ giấy phép GNU Lesser General Public License, WebKit sử dụng với giấy phép kiểu BSD WebKit bắt đầu khởi công từ năm 2002 Apple Inc tạo dự án phần mềm fork từ dự án KDE cỗ máy bố cục HTML KHTML Cỗ máy JavaScript KDE (KJS) Các nhà phát triển Apple giải thích e-mail gửi tới nhà phát triển KDE máy cho phép phát triển dễ công nghệ khác tính nhỏ gọn (ít 14 140,000 dịng mã nguồn), thiết kế sáng sủa hợp chuẩn KHTML KJS chuyển thể sang Mac OS X với giúp đỡ thư viện chuyển đổi đổi tên thành WebCore JavaScriptCore JavaScriptCore thông báo đến danh sách thư KDE vào tháng năm 2002, với mắt với thay đổi Apple WebCore thông báo Macworld Expo vào tháng năm 2003 Apple CEO Steve Jobs với đợt phát hành trình duyệt Safari JavaScriptCore lần phát hành kèm với Mac OS X v10.2 để sử dụng khung riêng để chạy ứng dụng Sherlock, WebCore lần đầu kèm với beta Safari Mac OS X v10.3 hệ điều hành Apple có WebKit, xuất trước số 10.2 Tuy vậy, việc trao đổi vá mã nguồn hai phiên KHTML trở nên khó khăn hai bên có cách viết mã khác Một lý Apple làm việc với phiên KHTML họ năm trước đưa fork cho công chúng Khó chịu điều đó, dự án KDE kết hợp thay đổi để củng cố tốc độ kết xuất KHTML thêm vào chức năng, bao gồm việc vượt qua kiểm tra Acid2 Konqueror 3.5 vượt qua kiểm tra Acid2, phiên mắt sau Apple mở hệ thống CVS Cơ sở liệu lỗi phần mềm cho WebKit Theo Apple, số thay đổi gặp rắc rối với tính đặc trưng Mac OS X (vd., Objective-C, KWQ, hàm gọi Mac OS X) khơng có KHTML KDE, cần có chiến lược phát triển khác WebKit sử dụng cỗ máy dựng hình cho Safari chạy Mac OS X, Windows iPhone OS Các ứng dụng khác Mac OS X sử dụng WebKit, trình khách e-mail Apple Mail Entourage Microsoft phiên 2008, hai dùng WebKit để dựng hình nội dung HTML bên ứng dụng Các trình duyệt web sử dụng WebKit Shiira Chrome, ngồi số trình duyệt khác dùng WebKit để thay cỗ máy dựng hình mặc định OmniWeb, iCab Epiphany Epiphany hỗ trợ Gecko WebKit số thời điểm, đội ngũ phát triển cho vòng đời mắt Gecko việc lập kế hoạch phát triển cho trở nên nặng nề, hiệu Và browser engine Webkit hỗ trợ thư viện python thư viện pyQtWebkit, thư viện hoàn hảo để giúp xây dựng trình duyệt web mượt mà, ổn định 15 CHƯƠNG 2: THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG Code 1.1 Xây dựng giao diện def tab1UI(self,tabName): backButton = QPushButton("") backIcon = QIcon() backIcon.addPixmap(QPixmap(os.path.join('Img','arrow_left_2.png'))) backButton.setIcon(backIcon) backButton.setFlat(True) nextButton = QPushButton("") nextIcon = QIcon() nextIcon.addPixmap(QPixmap(os.path.join('Img','arrow_right_2.png'))) nextButton.setIcon(nextIcon) nextButton.setFlat(True) reloadButton = QPushButton("") reloadIcon = QIcon() reloadIcon.addPixmap(QPixmap(os.path.join('Img','refresh.png'))) reloadButton.setIcon(reloadIcon) reloadButton.setFlat(True) # loadingIcon = QIcon() # loadingIcon.addPixmap(QPixmap(os.path.join('Img','cat.png'))) backButton.clicked.connect(self.Back) nextButton.clicked.connect(self.Next) reloadButton.clicked.connect(self.Reload) self.newTabButton = QPushButton("+") self.destroyTabButton = QPushButton("-") self.tabWidget = QTabWidget() Line1 = QLineEdit() Line1.returnPressed.connect(self.requestUri) tabGrid = QGridLayout() tabGrid.setContentsMargins(0,0,0,0) navigationFrame = QWidget() navigationFrame.setMaximumHeight(32) navigationGrid = QGridLayout(navigationFrame) navigationGrid.setSpacing(0) 16 navigationGrid.setContentsMargins(0,0,0,0) navigationGrid.addWidget(backButton,0,1) navigationGrid.addWidget(nextButton,0,2) navigationGrid.addWidget(reloadButton,0,3) navigationGrid.addWidget(Line1,0,4) tabGrid.addWidget(navigationFrame) webView = QWebEngineView() htmlhead = "body{ background-color: #fff; }" webView.setHtml(htmlhead) webView.setUrl(QUrl("https://www.bing.com/")) webView.loadProgress.connect(self.Loading) webView.loadProgress.connect(self.Loading) webView.loadFinished.connect(self.changePage) frame = QFrame() frame.setFrameStyle(QFrame.Panel) gridLayout = QGridLayout(frame) gridLayout.setContentsMargins(0, 0, 0, 0) gridLayout.addWidget(webView, 0, 0, 1, 1) frame.setLayout(gridLayout) self.tabWebView.append(webView) self.tabWidget.setCurrentWidget(webView) self.UrlLine.append(Line1) tabGrid.addWidget(frame) tabName.setLayout(tabGrid) def tab2UI(self): vbox = QVBoxLayout() tbl1 = QTableWidget() tbl1.setRowCount(5) tbl1.setColumnCount(5) vbox.addWidget(tbl1) tbl1.setItem(0, 0, QTableWidgetItem("1")) self.tab2.setLayout(vbox) 1.2 Thao tác với nút def Back(self): index = self.tabs.currentIndex() self.tabWebView[index].back() def Next(self): index = self.tabs.currentIndex() self.tabWebView[index].forward() def Reload(self): index = self.tabs.currentIndex() 17