MODULE NO 1

MODULE NAME :- Homepage of Web Browser.

PLANNING OF MODULE
The web browser is based on PyQt5 . The project has a graphical users
interface provided by python programming language and PyQt5 . The
PyQt installer comes with a GUI builder tool called Qt designer. Using its
simple drag and drop interface a GUI interface can be quickly built
without having to write the code. We use some Requirement in project.

1. PyQt5
2. sys
3. PyQt5.QtCore
4. PyQt5.QtWidgets
5. PyQt5.QtWebEngineWidgets

In module one we have create the homepage window for the web
browser. We add the four types of buttons in home screen.

The buttons in the home screen are given below :

 Back : A back buttons in the browser lets you back-up to the

copies of pages you visited previously.
 Forward : Forward moves you forward a page. It only works if
you have previously used the back button. If you have not gone
back and browser shows a forward button it will be grayed out.
 Reload : Also known as refresh, reload is a browser feature
that provides users with the latest version of the web page.
 Home : The home button provides a quick and easy way to
return to your browser’s default home page.
 DESIGNING OF MODULE
For creating the home screen page window of Web Browser need the
basic programming language so syntax is easily used.

We use the following Requirements for the project :

1. Python 3.9.5 :
Python 3.9.5 is the newest majir release of the python
programming language and it contains many new features and
optimizations. There’s been 111 commits since 3.9.4 which is a
similar amount compared to 3.8 at the same stage of the relese
cycle.
2. PyQt5 :
PyQt5 is a python binding of the cross platform GUI toolkit Qt,
implemented as a Python pluging. PyQt is free software
developed by the British firm Riverbank computing. It is available
under similar terms Qt version older than 4.5.
3. SYS :
This module provides access to some variable used or maintained
by the interpreter and to functions that interact strongly with the
interpreter.
4. Sys.argv :
The list of command line argument passed to a python script.
Argv is the script name. If the command was execute using the -c
command line option to the interpreter, argv is set to the string ‘-
c’.
Process for making home screen window :

Step 1 : Create a Project name.

First step open the Pycharm and click “File” and select “New” and
the create a project name after that click “create” button.

Step 2 : Save a python file.

Second step after creating a new file “Right” click the project name and
the click “save as” for the python file saving. After thet choose “python
file”
Step 3 : Name the Python file.

Third step after choose python file name the file “Web_Browser” and
then click enter.
 Step 4 : The actual code Now you can start coding

IMPLIMENTATION OF MODULE
Below is the step-by-step Approach to create a home Screen window of
the module :

Step 1 : This code is for homepage of Web Browser.

import sys
from PyQt5.QtWidgets import*

Class MainWindow(QMainWindow) def _ _init_ _(self): super(MainWindow, self)._ _init_ _()

self.showMaximized()

app = QApplicati on(sys.argv) QApplicati on.setApplicati onName(‘Web Broser’) Window =

MainWindow()
app.exec()
Step 2 : Add URL in Browser.
form PyQt5.QtCore import*
from PyQt5.QtWebEngineWidgets import*

Class MainWindow(QMainWindow) def _ _init_ _(self): super(MainWindow, self)._ _init_ _()

self.browser = QWebEngineView()
self.browser.setUrl(QUrl(‘ htt p://google.com’)) self.setCentralWidget(self.browser)
self.showMaximized()
Step 3: Add Butt ons in Browser.
# navbar
navbar = QToolBar() self.addToolBar(navbar)

back_btn = QActi on('Back', self) back_btn.triggered.connect(self.browser.back)

navbar.addActi on(back_btn)

forward_btn =QActi on('Forward', self) forward_btn.triggered.connect(self.browser.forward)

navbar.addActi on(forward_btn)

reload_btn = QActi on('Reload', self)

reload_btn.triggered.connect(self.browser.reload) navbar.addActi on(reload_btn)

home_btn = QActi on('Home', self) home_btn.triggered.connect(self.navigate_home)

navbar.addActi on(home_btn)

self.url_bar = QLineEdit() self.url_bar.returnPressed.connect(self.navigate_to_url)

navbar.addWidget(self.url_bar)

self.browser.urlChanged.connect(self.update_url)

def navigate_home(self): self.browser.setUrl(QUrl('htt p://google.com'))

def navigate_to_url(self): url = self.url_bar.text()

self.browser.setUrl(QUrl(url))

def update_url(self, q): self.url_bar.setText(q.toString())

Below the complete program for creating the home screen :

import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import*
from PyQt5.QtWebEngineWidgets import *

class MainWindow(QMainWindow): def init

(self):
super(MainWindow, self). init () self.browser =
QWebEngineView() self.browser.setUrl(QUrl('http://google.com'))
self.setCentralWidget(self.browser) self.showMaximized()

# navbar
navbar = QToolBar() self.addToolBar(navbar)

back_btn = QAction('Back', self) back_btn.triggered.connect(self.browser.back)

navbar.addAction(back_btn)

forward_btn =QAction('Forward', self) forward_btn.triggered.connect(self.browser.forward)

navbar.addAction(forward_btn)

reload_btn = QAction('Reload', self) reload_btn.triggered.connect(self.browser.reload)

navbar.addAction(reload_btn)
 home_btn = QAction('Home', self) home_btn.triggered.connect(self.navigate_home)
navbar.addAction(home_btn)

self.url_bar = QLineEdit()
self.url_bar.returnPressed.connect(self.navigate_to_url)
navbar.addWidget(self.url_bar)

self.browser.urlChanged.connect(self.update_url)

def navigate_home(self): self.browser.setUrl(QUrl('http://google.com'))

def navigate_to_url(self): url =

self.url_bar.text()
self.browser.setUrl(QUrl(url))

def update_url(self, q):

self.url_bar.setText(q.toString())

app = QApplication(sys.argv) QApplication.setApplicationName('Bro

Code') Window = MainWindow()
app.exec()
 TESTING OF MODULE

While testing this module the main focus is to find whether the
program run as we aim, also to cheak that the program runs without
the software we mentioned and used. As reference here we use various
screenshots.
As we discussed to run this program code we need Pycharm and python
of latest version we run the program only on python compiler or
interpreters.

Below is the testing of the web browser home screen window:

After testing of the home screen window we check in it that the button
as well as search bar we are how to search on google search engine are
display or not , the code is running or not in python IDLE. After testing the
code is run in pycharm as well as all IDE of support to python.
After testing the buttons as well as search bar in home in the homepage
window are:
1.reload
2.Back
3.Forward
4.Home
5. Search Bar (search on the google )
Output :
 MODULE NO 2
Module Name :- Design Phase of Web browser.
PLANNING OF MODULE

In the Web browser Project we make a button as well as search bar to

search on google for inserting information we search on google we are
complete in module 1.
We make a second module the buttons are not good design for the web
browser so we add a logo to identify which feature are you use as well as we
add some black theme so your eye condition will be beter!
We

 Back :

 Forward:

 Reload :
 Home :

DESIGNING OF MODULE

For creating the logo buttons and display such like black theme we use some
Inbuilt functions like OS for path distribution.

Process for making the Designing phase of the web Browser :

Step 1: Open the code of home screen Window.

Open the code that use for creating the home screen Window.
Step 2 : Adding of the code of Design phase window. Add the code of Design
phase in the module 1 code.

Step 3: Save the code.

After completion of the code of the insert design phase you can save the
program in your pc by click on “file ” button and then “save”.
Installation :-
1) OS :-
The OS module in Python provides functions for interacting with
the operating system.OS comes under Python`s standard utility
modules. This module provides a portable way of using operating
system dependent functionality. The *os* and *os.path* module
include many functions to interact with the file system.

IMPLIMENTATION OF MODULE

Below is the step-by-step Approach to create a design phase of the module:

Step 1 : The code is given below for Creating a new class for inserting tab
wigets to display web tabs.
# MAIN WINDOW
class MainWindow(QMainWindow):
def init (self, *args, **kwargs):
super(MainWindow, self). init (*args, **kwargs)
# ADD WINDOW ELEMENTS
# ADD TAB WIGDETS TO DISPLAY WEB TABS
self.tabs = QTabWidget()
self.tabs.setDocumentMode(True)
self.tabs.setTabsClosable(True)
self.setCentralWidget(self.tabs)
# ADD DOUBLE CLICK EVENT LISTENER
self.tabs.tabBarDoubleClicked.connect(self.tab_open_doubleclick)
# ADD TAB CLOSE EVENT LISTENER
self.tabs.tabCloseRequested.connect(self.close_current_tab)
# ADD ACTIVE TAB CHANGE EVENT LISTENER
self.tabs.currentChanged.connect(self.current_tab_changed)

# ADD NAVIGATION TOOLBAR

navtb =
QToolBar("Navigation")
navtb.setIconSize(QSize(16,
16)) self.addToolBar(navtb)
Step 2: Add the Navigate details

# ADD BUTTONS TO NAVIGATION TOOLBAR

new_tab_action = QAction(QIcon(os.path.join('icons', 'cil-library-add.png')), "New Tab", self)
new_tab_action.setStatusTip("Open a new tab")
navtb.addAction(new_tab_action)
# PREVIOUS WEB PAGE BUTTON
back_btn = QAction(QIcon(os.path.join('icons', 'cil-arrow-circle-left.png')), "Back", self)
back_btn.setStatusTip("Back to previous page")
navtb.addAction(back_btn)
# NAVIGATE TO PREVIOUS PAGE
back_btn.triggered.connect(lambda: self.tabs.currentWidget().back())

# NEXT WEB PAGE BUTTON

next_btn = QAction(QIcon(os.path.join('icons', 'cil-arrow-circle-right.png')), "Forward", self)
next_btn.setStatusTip("Forward to next page")
navtb.addAction(next_btn)
# NAVIGATE TO NEXT WEB PAGE
next_btn.triggered.connect(lambda: self.tabs.currentWidget().forward())

# REFRESH WEB PAGE BUTTON

reload_btn = QAction(QIcon(os.path.join('icons', 'cil-reload.png')), "Reload", self)
reload_btn.setStatusTip("Reload page")
navtb.addAction(reload_btn)
# RELOAD WEB PAGE
reload_btn.triggered.connect(lambda: self.tabs.currentWidget().reload())

# HOME PAGE BUTTON

home_btn = QAction(QIcon(os.path.join('icons', 'cil-home.png')), "Home", self)
home_btn.setStatusTip("Go home")
navtb.addAction(home_btn)
# NAVIGATE TO DEFAULT HOME PAGE
home_btn.triggered.connect(self.navigate_home)

# ADD SEPARATOR TO NAVIGATION BUTTONS

navtb.addSeparator()

# ADD LABEL ICON TO SHOW THE SECURITY STATUS OF THE LOADED URL
self.httpsicon = QLabel()
self.httpsicon.setPixmap(QPixmap(os.path.join('icons', 'cil-lock-unlocked.png')))
navtb.addWidget(self.httpsicon)
# ADD LINE EDIT TO SHOW AND EDIT URLS
self.urlbar = QLineEdit()
navtb.addWidget(self.urlbar)
# LOAD URL WHEN ENTER BUTTON IS PRESSED
self.urlbar.returnPressed.connect(self.navigate_to_url)

# ADD STOP BUTTON TO STOP URL LOADING

stop_btn = QAction(QIcon(os.path.join('icons', 'cil-media-stop.png')), "Stop", self)
stop_btn.setStatusTip("Stop loading current page")
navtb.addAction(stop_btn)
# STOP URL LOADING
stop_btn.triggered.connect(lambda: self.tabs.currentWidget().stop())

# ADD TOP MENU

# File menu
file_menu = self.menuBar().addMenu("&File")
# ADD FILE MENU ACTIONS

voice_search_action = QAction(QIcon(os.path.join('icons', 'cil-microphone.png')), "Vioce Search", self)

voice_search_action.setStatusTip("Voice Search")
file_menu.addAction(voice_search_action)
# ADD NEW TAB
new_tab_action.triggered.connect(lambda _: self.add_new_tab())
voice_search_action.triggered.connect(lambda _: self.voice_search())

# Help menu
help_menu = self.menuBar().addMenu("&Help")
# ADD HELP MENU ACTIONS
navigate_home_action = QAction(QIcon(os.path.join('icons', 'cil-exit-to-
app.png')), "Homepage", self)
navigate_home_action.setStatusTip("Go to Design Homepage")
help_menu.addAction(navigate_home_action)
# NAVIGATE TO DEVELOPER WEBSITE
navigate_home_action.triggered.connect(self.navigate_home)

# SET WINDOW TITTLE AND ICON

self.setWindowTitle("Browser")
self.setWindowIcon(QIcon(os.path.join('icons', 'cil-screen-desktop.png')))
Step 3: Add the Stylesheet (Dark Mode)

# ADD STYLESHEET TO CUSTOMIZE YOUR

WINDOWS # STYLESHEET (DARK MODE)
self.setStyleSheet("""QWidget{ bac
kground-color: rgb(48, 48, 48);
color: rgb(255, 255, 255);
}
QTabWidget::pane { /* The tab widget frame
*/ border-top: 2px solid rgb(90, 90, 90);
position: absolute;
top: -0.5em;
color: rgb(255, 255,
255); padding: 5px;
}

QTabWidget::tab-bar
{ alignment: left;
}

/* Style the tab using the tab sub-control. Note

that it reads QTabBar _not_ QTabWidget */
QLabel, QToolButton, QTabBar::tab {
background: rgb(90, 90, 90);
border: 2px solid rgb(90, 90, 90);
/*border-bottom-color: #C2C7CB; /* same as the pane color
*/ border-radius: 10px;
min-width: 8ex;
padding: 5px;
margin-right:
2px;
color: rgb(255, 255, 255);
}

QLabel:hover, QToolButton::hover, QTabBar::tab:selected, QTabBar::tab:hover {

background: rgb(49, 49, 49);
border: 2px solid rgb(0, 36, 36);
background-color: rgb(0, 36, 36);
}

QLineEdit {
border: 2px solid rgb(0, 36,
36); border-radius: 10px;
padding: 5px;
background-color: rgb(0, 36, 36);
 color: rgb(255, 255, 255);
}
QLineEdit:hover {
border: 2px solid rgb(0, 66, 124);
}
QLineEdit:focus{
border: 2px solid rgb(0, 136, 255);
color: rgb(200, 200, 200);
}
QPushButton{
background: rgb(49, 49, 49);
border: 2px solid rgb(0, 36, 36);
background-color: rgb(0, 36,
36); padding: 5px;
border-radius: 10px;
}""")
Step 4: Adding functions in this code.

# LOAD DEFAULT HOME PAGE (GOOLE.COM)

#url =
http://www.google.com,
#label = Homepage
self.add_new_tab(QUrl('http://www.google.com'), 'Homepage')

# SHOW MAIN WINDOW

self.show()

# ############################################
# FUNCTIONS
##############################################
# ADD NEW WEB TAB
def add_new_tab(self, qurl=None,
label="Blank"): # Check if url value is blank
if qurl is None:
qurl = QUrl('http://www.google.com')#pass empty string to url

# Load the passed url

browser =
QWebEngineView()
browser.setUrl(qurl)

# ADD THE WEB PAGE TAB

i = self.tabs.addTab(browser,
label) self.tabs.setCurrentIndex(i)
# ADD BROWSER EVENT LISTENERS
 # On URL change
browser.urlChanged.connect(lambda qurl,
browser=browser: self.update_urlbar(qurl,
browser))
# On loadfinished
browser.loadFinished.connect(lambda _, i=i, browser=browser:
self.tabs.setTabText(i, browser.page().title()))

# ADD HISTORY TAB

def voice_search(self, qurl=None, label="Blank"):
pass
# ADD NEW TAB ON DOUBLE CLICK ON TABS
def tab_open_doubleclick(self, i):
if i == -1: # No tab under the click
self.add_new_tab()

# CLOSE TABS
def close_current_tab(self, i):
if self.tabs.count() < 2: #Only close if there is more than one tab
open return

self.tabs.removeTab(i)

# UPDATE URL TEXT WHEN ACTIVE TAB IS CHANGED

def update_urlbar(self, q, browser=None):
#q = QURL
if browser != self.tabs.currentWidget():
# If this signal is not from the current tab,
ignore return
# URL Schema
if q.scheme() == 'https':
# If schema is https change icon to locked padlock to show that the webpage is secure
self.httpsicon.setPixmap(QPixmap(os.path.join('icons', 'cil-lock-locked.png')))

else:
# If schema is not https change icon to locked padlock to show that the webpage is unsecure
self.httpsicon.setPixmap(QPixmap(os.path.join('icons', 'cil-lock-unlocked.png')))

self.urlbar.setText(q.toString()
)
self.urlbar.setCursorPosition(0)
# ACTIVE TAB CHANGE ACTIONS
def current_tab_changed(self, i):
 # i = tab index
# GET CURRENT TAB URL
qurl =
self.tabs.currentWidget().url() #
UPDATE URL TEXT
self.update_urlbar(qurl, self.tabs.currentWidget())
# UPDATE WINDOWS TITTLE
self.update_title(self.tabs.currentWidget())

# UPDATE WINDOWS TITTLE

def update_title(self, browser):
if browser != self.tabs.currentWidget():
# If this signal is not from the current ACTIVE tab,
ignore return

title =
self.tabs.currentWidget().page().title()
self.setWindowTitle(title)

# NAVIGATE TO PASSED URL

def navigate_to_url(self): # Does not receive the Url
# GET URL TEXT
q=
QUrl(self.urlbar.text()) if
q.scheme() == "":
# pass http as default url schema
q.setScheme("http")

self.tabs.currentWidget().setUrl(q)

# NAVIGATE TO DEFAULT HOME PAGE

def navigate_home(self):
self.tabs.currentWidget().setUrl(QUrl("index.html"))
app = QApplication(sys.argv)
# APPLICATION NAME
app.setApplicationName("Browser")

window =
MainWindow()
app.exec_()
Below the complete program for creating the design phase :
# IMPORTS

import os

import

sys

from PyQt5.QtCore import *

from PyQt5.QtWidgets import *

from PyQt5.QtGui import *

from PyQt5.QtWebEngineWidgets import *

# MAIN WINDOW

class MainWindow(QMainWindow):

def init (self, *args, **kwargs):

super(MainWindow, self). init (*args,

**kwargs)
# ADD WINDOW ELEMENTS

# ADD TAB WIGDETS TO DISPLAY WEB TABS

self.tabs = QTabWidget()

self.tabs.setDocumentMode(True)

self.tabs.setTabsClosable(True)

self.setCentralWidget(self.tabs)

# ADD DOUBLE CLICK EVENT LISTENER

self.tabs.tabBarDoubleClicked.connect(self.tab_open_doubleclick

) # ADD TAB CLOSE EVENT LISTENER

self.tabs.tabCloseRequested.connect(self.close_current_tab

) # ADD ACTIVE TAB CHANGE EVENT LISTENER

self.tabs.currentChanged.connect(self.current_tab_changed)

# ADD NAVIGATION TOOLBAR

navtb = QToolBar("Navigation")

navtb.setIconSize(QSize(16, 16))

self.addToolBar(navtb)

# ADD BUTTONS TO NAVIGATION

TOOLBAR # PREVIOUS WEB PAGE BUTTON

back_btn = QAction(QIcon(os.path.join('icons', 'cil-arrow-circle-left.png')), "Back",

self) back_btn.setStatusTip("Back to previous page")

navtb.addAction(back_btn)

# NAVIGATE TO PREVIOUS PAGE

back_btn.triggered.connect(lambda: self.tabs.currentWidget().back())
# NEXT WEB PAGE BUTTON

next_btn = QAction(QIcon(os.path.join('icons', 'cil-arrow-circle-right.png')), "Forward",

self) next_btn.setStatusTip("Forward to next page")

navtb.addAction(next_btn)

# NAVIGATE TO NEXT WEB PAGE

next_btn.triggered.connect(lambda: self.tabs.currentWidget().forward())

# REFRESH WEB PAGE BUTTON

reload_btn = QAction(QIcon(os.path.join('icons', 'cil-reload.png')), "Reload", self)

reload_btn.setStatusTip("Reload page")

navtb.addAction(reload_btn)

# RELOAD WEB PAGE

reload_btn.triggered.connect(lambda: self.tabs.currentWidget().reload())

# HOME PAGE BUTTON

home_btn = QAction(QIcon(os.path.join('icons', 'cil-home.png')), "Home",

self) home_btn.setStatusTip("Go home")

navtb.addAction(home_btn)

# NAVIGATE TO DEFAULT HOME PAGE

home_btn.triggered.connect(self.navigate_home)

# ADD SEPARATOR TO NAVIGATION BUTTONS

navtb.addSeparator()

# ADD LABEL ICON TO SHOW THE SECURITY STATUS OF THE LOADED URL

self.httpsicon = QLabel()

self.httpsicon.setPixmap(QPixmap(os.path.join('icons', 'cil-lock-unlocked.png')))

navtb.addWidget(self.httpsicon)
# ADD LINE EDIT TO SHOW AND EDIT URLS

self.urlbar = QLineEdit()

navtb.addWidget(self.urlbar)

# LOAD URL WHEN ENTER BUTTON IS PRESSED

self.urlbar.returnPressed.connect(self.navigate_to_url)

# ADD STOP BUTTON TO STOP URL LOADING

stop_btn = QAction(QIcon(os.path.join('icons', 'cil-media-stop.png')), "Stop", self)

stop_btn.setStatusTip("Stop loading current page")

navtb.addAction(stop_btn)

# STOP URL LOADING

stop_btn.triggered.connect(lambda: self.tabs.currentWidget().stop())

# ADD TOP MENU

# File menu

file_menu =

self.menuBar().addMenu("&File") # ADD FILE

MENU ACTIONS

new_tab_action = QAction(QIcon(os.path.join('icons', 'cil-library-add.png')), "New Tab", self)

new_tab_action.setStatusTip("Open a new tab")

file_menu.addAction(new_tab_action)

# ADD NEW TAB

new_tab_action.triggered.connect(lambda _: self.add_new_tab())

# Help menu
help_menu =

self.menuBar().addMenu("&Help") # ADD HELP

MENU ACTIONS

navigate_home_action = QAction(QIcon(os.path.join('icons', 'cil-exit-to-app.png')),

"Homepage", self)

navigate_home_action.setStatusTip("Go to Spinn Design Homepage")

help_menu.addAction(navigate_home_action)

# NAVIGATE TO DEVELOPER WEBSITE

navigate_home_action.triggered.connect(self.navigate_home)

# SET WINDOW TITTLE AND ICON

self.setWindowTitle("ES Browser")

self.setWindowIcon(QIcon(os.path.join('icons', 'cil-screen-desktop.png')))

# ADD STYLESHEET TO CUSTOMIZE YOUR WINDOWS

# STYLESHEET (DARK MODE)

self.setStyleSheet("""QWidget{ bac

kground-color: rgb(48, 48, 48);

color: rgb(255, 255, 255);

QTabWidget::pane { /* The tab widget frame */

border-top: 2px solid rgb(90, 90, 90);

position:

absolute; top: -

0.5em;

color: rgb(255, 255, 255);

padding: 5px;

}
QTabWidget::tab-bar {

alignment: left;

/* Style the tab using the tab sub-control. Note

that it reads QTabBar _not_ QTabWidget */

QLabel, QToolButton, QTabBar::tab {

background: rgb(90, 90, 90);

border: 2px solid rgb(90, 90, 90);

/*border-bottom-color: #C2C7CB; /* same as the pane color

*/ border-radius: 10px;

min-width: 8ex;

padding: 5px;

margin-right: 2px;

color: rgb(255, 255, 255);

QLabel:hover, QToolButton::hover, QTabBar::tab:selected, QTabBar::tab:hover {

background: rgb(49, 49, 49);

border: 2px solid rgb(0, 36, 36);

background-color: rgb(0, 36, 36);

QLineEdit {

border: 2px solid rgb(0, 36,

36); border-radius: 10px;

padding: 5px;

background-color: rgb(0, 36, 36);

 color: rgb(255, 255, 255);

QLineEdit:hover {

border: 2px solid rgb(0, 66, 124);

QLineEdit:focus{

border: 2px solid rgb(0, 136, 255);

color: rgb(200, 200, 200);

QPushButton{

background: rgb(49, 49, 49);

border: 2px solid rgb(0, 36, 36);

background-color: rgb(0, 36, 36);

padding: 5px;

border-radius: 10px;

}""")

# LOAD DEFAULT HOME PAGE (GOOLE.COM)

#url = http://www.google.com,

#label = Homepage

self.add_new_tab(QUrl('http://www.google.com'), 'Homepage')

# SHOW MAIN WINDOW

self.show()

# ############################################

# FUNCTIONS

##############################################
# ADD NEW WEB TAB

def add_new_tab(self, qurl=None, label="Blank"):

# Check if url value is blank

if qurl is None:

qurl = QUrl('')#pass empty string to url

# Load the passed url

browser = QWebEngineView()

browser.setUrl(qurl)

# ADD THE WEB PAGE TAB

i = self.tabs.addTab(browser, label)

self.tabs.setCurrentIndex(i)

# ADD BROWSER EVENT LISTENERS

# On URL change

browser.urlChanged.connect(lambda qurl, browser=browser:

self.update_urlbar(qurl, browser))

# On loadfinished

browser.loadFinished.connect(lambda _, i=i, browser=browser:

self.tabs.setTabText(i, browser.page().title()))

# ADD NEW TAB ON DOUBLE CLICK ON TABS

def tab_open_doubleclick(self, i):

if i == -1: # No tab under the click

self.add_new_tab()
# CLOSE TABS

def close_current_tab(self, i):

if self.tabs.count() < 2: #Only close if there is more than one tab open

return

self.tabs.removeTab(i)

# UPDATE URL TEXT WHEN ACTIVE TAB IS CHANGED

def update_urlbar(self, q, browser=None):

#q = QURL

if browser != self.tabs.currentWidget():

# If this signal is not from the current tab, ignore

return

# URL Schema

if q.scheme() == 'https':

# If schema is https change icon to locked padlock to show that the webpage is

secure self.httpsicon.setPixmap(QPixmap(os.path.join('icons', 'cil-lock-locked.png')))

else:

# If schema is not https change icon to locked padlock to show that the webpage is unsecure

self.httpsicon.setPixmap(QPixmap(os.path.join('icons', 'cil-lock-unlocked.png')))

self.urlbar.setText(q.toString())

self.urlbar.setCursorPosition(0)
# ACTIVE TAB CHANGE ACTIONS

def current_tab_changed(self, i):

# i = tab index

# GET CURRENT TAB URL

qurl = self.tabs.currentWidget().url()

# UPDATE URL TEXT

self.update_urlbar(qurl,

self.tabs.currentWidget()) # UPDATE WINDOWS

TITTLE

self.update_title(self.tabs.currentWidget())

# UPDATE WINDOWS TITTLE

def update_title(self, browser):

if browser != self.tabs.currentWidget():

# If this signal is not from the current ACTIVE tab, ignore

return

title = self.tabs.currentWidget().page().title()

self.setWindowTitle(title)

# NAVIGATE TO PASSED URL

def navigate_to_url(self): # Does not receive the Url

# GET URL TEXT

q = QUrl(self.urlbar.text())

if q.scheme() == "":

# pass http as default url schema

q.setScheme("http")
 self.tabs.currentWidget().setUrl(q)

# NAVIGATE TO DEFAULT HOME PAGE

def navigate_home(self):

self.tabs.currentWidget().setUrl(QUrl("http://www.google.com"))

app = QApplication(sys.argv)

# APPLICATION NAME

app.setApplicationName("ES Browser")

# APPLICATION COMPANY NAME

app.setOrganizationName("ES Company")

# APPLICATION COMPANY

ORGANISATION

app.setOrganizationDomain("ES.org")

window = MainWindow()

app.exec_()
 TESTING OF MODULE

Below is the testing of the Web Browser Design phase :

After testing of the design phase we check in it that the code isrunning or not,
display logo buttons, google search , the Dark theme is working or not in
python, because we code the program in vs code or pychrme IDE.

After testing the logo buttons are shown in the deign phase are:
1. Firstlly we finally add logo buttons in the code.
2. We add File drop down menu because a new tab insert in the program.
3. We are shown website which show are secure are not.
4. We also add Help button.
5. Add black theme this is amazing.
6. The new tab and old tab we are close by one click.

Output:-
 Module no.3
Module Name:- Adding feature to web browser.

Planning of module

In third module we have done some changes in homepage of browser

and we also add feature of voice search in our browser. For homepage of our
browser, we are going to create a simple webpage for which we are going to use
html and CSS. And in order to add the voice search feature we will be using
Pyaudio and Speech recognitions tool of python.

1] homepage of the browser

In this module we are going to change the home page of the module from the
google search page to a customize page which was design by us using html and
CSS.

2] voice search
In additional to homepage, we also add a feature of voice search tour browser
so that it will simpler for a user to use that browser. For that we use a python
library that in Pyaudio and speech recognition using that we going to search by
taking a voice input from a user.
 DESIGNING OF MODULE

For creating the web browser insert voice search button and renew home
page. We add the basic syntax for easily understand the language.

We define the “Voice search” button for search for user.

Process for making the Web Browser insert voice button.

Step 1 : Open the code of home page of browser.

Open the code that you use for creating the home page of web browser.
Step 2: Adding of the code of creating insert voice button.
Add the code of voice button in module 1.

Step 3: Save the code.

After completion of the code of voice button you can save the program in your
pc by click on “file button” and then “save”.
 IMPLIMENTATION OF MODULE

Below is the step-by-step Approach to create a design of the module:

1] Homepage of browser
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home </title>
</head>
<body>
<div class="search">
<img src="g.png" alt="" class="logo">
<input type="text" placeholder="Search the web" class="inp">
<button class="search _btn" onclick="search()">
<img src="btn.svg" alt=""></button>
</div>
<div class="top-site">
<h3 onclick="hideThis()">Top sites</h3>
<div class="sites">
<a href="https://www.youtube.com/"><div class="site">
<img src="yt.png" alt="">
<h4>YouTube</h4>
</div></a>
<a href="https://www.facebook.com/"><div class="site">
<img src="fb.png" alt="">
<h4>Facebook</h4>
</div></a>
<a href="https://en.wikipedia.org/wiki/Main_Page"> <div class="site">
<img src="wiki.png" alt="">
<h4>Wikipedia</h4>
</div></a>
<a href="https://www.reddit.com/"> <div class="site">
<img src="reddit.png" alt="">
<h4>Reddit</h4>
</div></a>
<a href="https://www.amazon.in/"> <div class="site">
<img src="az.png" alt="">
<h4>Amazon</h4>
</div></a>
<a href="https://twitter.com/"> <div class="site">
<img src="tw.png" alt="">
<h4>Twitter</h4>
</div></a>
</div>
</div>
</body>
<style
>
body{
background:#333
; margin:0;
padding:0;
color:#777;
width:100vw;
}
.search{
width:50%;
margin:200px auto
20px; display:flex;
align-items: center;
height:20px;
padding:8px 5px;
background:none;
border:1px solid
#777; position:
relative;
}
a{
text-decoration:none;
color:#888;
}
.search button{
filter: invert(.5);
width:30px;
height:30px;
margin:0;
border:none;
position:
absolute;
right:5px;
 }
.logo{
height:20px
;
width:20px;
border-radius:
50%; margin:0px
5px;
}
input{
margin:0;
background:none
; outline:none;
border:none;
height:100%;
width:80%;
padding :0 10px;
color:#888;
}
.search button img{
width:100%;
height:100%;
}
.top-site{
width:80%;
margin:10px
auto; overflow:
hidden;
}
.top-site h3{
margin:5px 50px;
}
.sites{
display:flex;
align-items:
center; flex-
wrap:wrap;
justify-content:
center; text-align:
center; transition:.4s;
}
.site{
position: relative;
height:100px;
width:100px;
margin:40px
20px;
}
.site img{
height:100%;
width:100%;
background:#fff;
 }
.hidden{
height:0px;
overflow:
hidden;
}
</style>
<script>
function hideThis() {
document.querySelector(".sites").classList.toggle("hidden");
}
function search() {
v=
document.querySelector(".inp").value;
if(v.length > 0)
{window.location = "https://www.google.com/search?q="+v;}
}
</script>
</html>
2] VoiceSearch
# ADD HISTORY TAB add voice search feature
def voice_search(self, qurl=None,
label="Blank"):
sr.Microphone(device_index=1)
r=sr.Recognizer()
r.energy_threshold=20000000

with sr.Microphone()as source:

sepeker = pyttsx3.init()
sepeker.say("speak
now") audio =
r.listen(source)

text= r.recognize_google(audio)
url='https://www.google.co.in/search?q='
search_url=url+text
# Check if url value is
blank if qurl is None:
qurl = QUrl(search_url)#pass empty string to url

# Load the passed url

browser =
QWebEngineView()
browser.setUrl(qurl)

# ADD THE WEB PAGE TAB

i = self.tabs.addTab(browser, label)
self.tabs.setCurrentIndex(i)

# ADD BROWSER EVENT LISTENERS

# On URL change
browser.urlChanged.connect(lambda qurl,
browser=browser: self.update_urlbar(qurl,
browser))
# On loadfinished
browser.loadFinished.connect(lambda _, i=i, browser=browser:
self.tabs.setTabText(i, browser.page().title()))
 IMPLIMENTATION OF WEB BROWSER

# IMPORTS
import os
import
sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import
* from PyQt5.QtGui import *
from PyQt5.QtWebEngineWidgets import
* import pyaudio
import speech_recognition as sr
import pyttsx3
# MAIN WINDOWpip insta
class MainWindow(QMainWindow):
def init (self, *args, **kwargs):
super(MainWindow, self). init (*args, **kwargs)

# ADD WINDOW ELEMENTS

# ADD TAB WIGDETS TO DISPLAY WEB TABS
self.tabs = QTabWidget()
self.tabs.setDocumentMode(True)
self.tabs.setTabsClosable(True)
self.setCentralWidget(self.tabs)
# ADD DOUBLE CLICK EVENT LISTENER
self.tabs.tabBarDoubleClicked.connect(self.tab_open_doubleclick)
# ADD TAB CLOSE EVENT LISTENER
self.tabs.tabCloseRequested.connect(self.close_current_tab)
# ADD ACTIVE TAB CHANGE EVENT LISTENER
self.tabs.currentChanged.connect(self.current_tab_changed)

# ADD NAVIGATION TOOLBAR

navtb =
QToolBar("Navigation")
navtb.setIconSize(QSize(16,
16)) self.addToolBar(navtb)

# ADD BUTTONS TO NAVIGATION

TOOLBAR # PREVIOUS WEB PAGE BUTTON
back_btn = QAction(QIcon(os.path.join('icons', 'cil-arrow-circle-left.png')), "Back", self)
back_btn.setStatusTip("Back to previous page")
navtb.addAction(back_btn)
# NAVIGATE TO PREVIOUS PAGE
back_btn.triggered.connect(lambda: self.tabs.currentWidget().back())

# NEXT WEB PAGE BUTTON

next_btn = QAction(QIcon(os.path.join('icons', 'cil-arrow-circle-right.png')), "Forward", self)
next_btn.setStatusTip("Forward to next page")
navtb.addAction(next_btn)
# NAVIGATE TO NEXT WEB PAGE
next_btn.triggered.connect(lambda: self.tabs.currentWidget().forward())

# REFRESH WEB PAGE BUTTON

reload_btn = QAction(QIcon(os.path.join('icons', 'cil-reload.png')), "Reload", self)
reload_btn.setStatusTip("Reload page")
navtb.addAction(reload_btn)
# RELOAD WEB PAGE
reload_btn.triggered.connect(lambda: self.tabs.currentWidget().reload())

# HOME PAGE BUTTON

home_btn = QAction(QIcon(os.path.join('icons', 'cil-home.png')), "Home", self)
home_btn.setStatusTip("Go home")
navtb.addAction(home_btn)
# NAVIGATE TO DEFAULT HOME PAGE
home_btn.triggered.connect(self.navigate_home)

# ADD SEPARATOR TO NAVIGATION BUTTONS

navtb.addSeparator()

# ADD LABEL ICON TO SHOW THE SECURITY STATUS OF THE LOADED URL
self.httpsicon = QLabel()
self.httpsicon.setPixmap(QPixmap(os.path.join('icons', 'cil-lock-unlocked.png')))
navtb.addWidget(self.httpsicon)

# ADD LINE EDIT TO SHOW AND EDIT URLS

self.urlbar = QLineEdit()
navtb.addWidget(self.urlbar)
# LOAD URL WHEN ENTER BUTTON IS PRESSED
self.urlbar.returnPressed.connect(self.navigate_to_url)

# ADD STOP BUTTON TO STOP URL LOADING

stop_btn = QAction(QIcon(os.path.join('icons', 'cil-media-stop.png')), "Stop", self)
stop_btn.setStatusTip("Stop loading current page")
navtb.addAction(stop_btn)
# STOP URL LOADING
stop_btn.triggered.connect(lambda: self.tabs.currentWidget().stop())

# ADD TOP MENU

# File menu
file_menu = self.menuBar().addMenu("&File")
# ADD FILE MENU ACTIONS
new_tab_action = QAction(QIcon(os.path.join('icons', 'cil-library-add.png')), "New Tab", self)
new_tab_action.setStatusTip("Open a new tab")
voice_search_action = QAction(QIcon(os.path.join('icons', 'cil-microphone.png')), "Vioce Search", self)
voice_search_action.setStatusTip("Voice Search")
file_menu.addAction(new_tab_action)
file_menu.addAction(voice_search_action)
# ADD NEW TAB
new_tab_action.triggered.connect(lambda _: self.add_new_tab())
voice_search_action.triggered.connect(lambda _: self.voice_search())

# Help menu
help_menu =
self.menuBar().addMenu("&Help") # ADD HELP
MENU ACTIONS
navigate_home_action = QAction(QIcon(os.path.join('icons', 'cil-exit-to-app.png')),
"Homepage", self)
navigate_home_action.setStatusTip("Go to Design Homepage")
help_menu.addAction(navigate_home_action)
# NAVIGATE TO DEVELOPER WEBSITE
navigate_home_action.triggered.connect(self.navigate_home)

# SET WINDOW TITTLE AND ICON

self.setWindowTitle("Browser")
self.setWindowIcon(QIcon(os.path.join('icons', 'cil-screen-desktop.png')))

# ADD STYLESHEET TO CUSTOMIZE YOUR

WINDOWS # STYLESHEET (DARK MODE)
self.setStyleSheet("""QWidget{ bac
kground-color: rgb(48, 48, 48);
color: rgb(255, 255, 255);
}
QTabWidget::pane { /* The tab widget frame
*/ border-top: 2px solid rgb(90, 90, 90);
position: absolute;
top: -0.5em;
color: rgb(255, 255,
255); padding: 5px;
}

QTabWidget::tab-bar
{ alignment: left;
}

/* Style the tab using the tab sub-control. Note

that it reads QTabBar _not_ QTabWidget */
QLabel, QToolButton, QTabBar::tab {
background: rgb(90, 90, 90);
 border: 2px solid rgb(90, 90, 90);
/*border-bottom-color: #C2C7CB; /* same as the pane color
*/ border-radius: 10px;
min-width: 8ex;
padding: 5px;
margin-right:
2px;
color: rgb(255, 255, 255);
}

QLabel:hover, QToolButton::hover, QTabBar::tab:selected, QTabBar::tab:hover {

background: rgb(49, 49, 49);
border: 2px solid rgb(0, 36, 36);
background-color: rgb(0, 36, 36);
}

QLineEdit {
border: 2px solid rgb(0, 36,
36); border-radius: 10px;
padding: 5px;
background-color: rgb(0, 36, 36);
color: rgb(255, 255, 255);
}
QLineEdit:hover {
border: 2px solid rgb(0, 66, 124);
}
QLineEdit:focus{
border: 2px solid rgb(0, 136, 255);
color: rgb(200, 200, 200);
}
QPushButton{
background: rgb(49, 49, 49);
border: 2px solid rgb(0, 36, 36);
background-color: rgb(0, 36,
36); padding: 5px;
border-radius: 10px;
}""")

# LOAD DEFAULT HOME PAGE (GOOLE.COM)

#url =
http://www.google.com,
#label = Homepage
self.add_new_tab(QUrl('https://a1malegaonkar.github.io/host/'), 'Homepage')

# SHOW MAIN WINDOW

self.show()

# ############################################
# FUNCTIONS
##############################################
# ADD NEW WEB TAB
def add_new_tab(self, qurl=None, label="Blank"):
 # Check if url value is
blank if qurl is None:
qurl = QUrl('https://a1malegaonkar.github.io/host/')#pass empty string to url

# Load the passed url

browser =
QWebEngineView()
browser.setUrl(qurl)

# ADD THE WEB PAGE TAB

i = self.tabs.addTab(browser,
label) self.tabs.setCurrentIndex(i)

# ADD BROWSER EVENT LISTENERS

# On URL change
browser.urlChanged.connect(lambda qurl, browser=browser:
self.update_urlbar(qurl, browser))
# On loadfinished
browser.loadFinished.connect(lambda _, i=i,
browser=browser: self.tabs.setTabText(i,
browser.page().title()))

# ADD HISTORY TAB add voice search feature

def voice_search(self, qurl=None,
label="Blank"):
sr.Microphone(device_index=1)
r=sr.Recognizer()
r.energy_threshold=20000000

with sr.Microphone()as source:

sepeker = pyttsx3.init()
sepeker.say("speak
now")
sepeker.runAndWait()
audio = r.listen(source)
try:
text= r.recognize_google(audio)
url='https://www.google.co.in/search?q='
search_url=url+text
# Check if url value is
blank if qurl is None:
qurl = QUrl(search_url)#pass empty string to url

# Load the passed url

browser =
QWebEngineView()
browser.setUrl(qurl)

# ADD THE WEB PAGE TAB

i = self.tabs.addTab(browser, label)
self.tabs.setCurrentIndex(i)
 # ADD BROWSER EVENT LISTENERS
# On URL change
browser.urlChanged.connect(lambda qurl, browser=browser:
self.update_urlbar(qurl, browser))
# On loadfinished
 browser.loadFinished.connect(lambda _, i=i, browser=browser:
self.tabs.setTabText(i, browser.page().title()))
except:
sepeker.say("Can`t
Recoginze")
sepeker.runAndWait()

# ADD NEW TAB ON DOUBLE CLICK ON TABS

def tab_open_doubleclick(self, i):
if i == -1: # No tab under the click
self.add_new_tab()

# CLOSE TABS
def close_current_tab(self, i):
if self.tabs.count() < 2: #Only close if there is more than one tab
open return

self.tabs.removeTab(i)

# UPDATE URL TEXT WHEN ACTIVE TAB IS CHANGED

def update_urlbar(self, q, browser=None):
#q = QURL
if browser != self.tabs.currentWidget():
# If this signal is not from the current tab,
ignore return
# URL Schema
if q.scheme() == 'https':
# If schema is https change icon to locked padlock to show that the webpage is secure
self.httpsicon.setPixmap(QPixmap(os.path.join('icons', 'cil-lock-locked.png')))

else:
# If schema is not https change icon to locked padlock to show that the webpage is unsecure
self.httpsicon.setPixmap(QPixmap(os.path.join('icons', 'cil-lock-unlocked.png')))

self.urlbar.setText(q.toString()
)
self.urlbar.setCursorPosition(0)

# ACTIVE TAB CHANGE ACTIONS

def current_tab_changed(self, i):
# i = tab index
# GET CURRENT TAB URL
qurl = self.tabs.currentWidget().url()
# UPDATE URL TEXT
self.update_urlbar(qurl, self.tabs.currentWidget())
# UPDATE WINDOWS TITTLE
self.update_title(self.tabs.currentWidget())
# UPDATE WINDOWS TITTLE
def update_title(self, browser):
 if browser != self.tabs.currentWidget():
# If this signal is not from the current ACTIVE tab,
ignore return

title =
self.tabs.currentWidget().page().title()
self.setWindowTitle(title)

# NAVIGATE TO PASSED URL

def navigate_to_url(self): # Does not receive the Url
# GET URL TEXT
q=
QUrl(self.urlbar.text()) if
q.scheme() == "":
# pass http as default url schema
q.setScheme("http")

self.tabs.currentWidget().setUrl(q)

# NAVIGATE TO DEFAULT HOME PAGE

def navigate_home(self):
self.tabs.currentWidget().setUrl(QUrl("https://a1malegaonkar.github.io/host/"))

app = QApplication(sys.argv)
# APPLICATION NAME
app.setApplicationName("Browser")

window =
MainWindow()
app.exec_()
 TESTING OF MODULE

Below is the testing of the Web Browser :-

After testing the feature module in it that we code is running or not, Voice
search feature are successfully working are not , the web page is host are
properly working or not in html.

After testing the project:

1. Voice search are Properly working.
2. Html Page is a search the query are working.
3. Html page shortcut are working.

Output:-
Screen the final Project:
When you click File drop down menu Button:

Voice search :