Coding A Simple Web Browser in Python

Key Takeaways

[Music] what is going on guys welcome back in today's video we're going to build a simple web browser in python and this is what it's going to look like in the end we're going to have a basic browser a url bar a go button a back button and a forward button of course you can also implement another feature like i don't know refresh or something and we're going to be able to navigate to neuralmind.com for example by just saying go as you can see it added the http we can also navigate to yahoo.com for example and we can also try to navigate to something that does not exist so i don't know this.com and then we're going to see can't be reached there you go you can go back back and we can go forward again so this is a very basic web browser that we're going to implement in python today so for this project we're going to use pi qt5 we're not going to use tk enter for the graphical user interface and this means that we need to install it by opening up cmd or your terminal of choice and then call pip install pi qt5 like that in my case i already have it installed um this is just for the basic graphical user interface in addition to that we're also going to need a pi qt web engine i think yes i always forget the name pip install pi qt web engine which is what we're going to use for the web browser in my case i already have this installed as well so once you have these installed you can start by importing from pi qt5 dot uh qt widgets import everything from pi qt five dot q t gui import everything from pi q t five q core import everything and from pi qt5 dot qt web engine widgets import everything this is what we're going to need and we're going to start by creating a basic class for our main window we're going to call this my web browser it's going to extend from q main window and it's going to call the init method here i'm going to call the super constructor so super my web browser self dot underscore underscore init and uh we're going to pass arcs and keyword arguments here nothing too special just calling the parent constructor and inside of that we're going to now create our gui so we're going to say self.window is going to be um self.windows going to be qt widget like that and self dot window dot set window title is going to be neural nine web browser like that now what is the problem up here we have rx keyword rx oh of course our constructor doesn't have arcs and keyword arcs there you go oh there you go now what's the problem here qt widget oh it's q widget come on stupid mistakes here okay so we have the q widget we have the window we set the window tile to neural nine web browser um and now we can start with the ui elements now first of all let's choose a layout we want to have a v box layout so a basic vertical box layout so we're going to say self.layout is going to be q v box layout like that and inside of that we also want to have a horizontal layout for the buttons in the top so i'm going to say self dot horizontal is going to be qhbox layout now what's the problem with the widget now uh i don't see the problem with the widget to be honest parameter flags unfilled okay i'm not sure that we need those but let's just skip that for now um so now we have the two layouts and we're going to place the hbox layout inside of the v box layout because we want to have a vertical layout of ui elements and then the web browser itself and inside of the ui elements we want to have a horizontal layout so this is what we're going to do uh and we're going to create first of all the url bar so self dot url bar is going to be q text edit like that then we're going to say self.url bar we're going to set the maximum height to 30 and then we're going to have a button which is going to be the go button and the go button is going to be a cue push button with a text go obviously and here we're going to set the minimum size to 30. minimum height not size let's set this to 30 so that we have the same size uh we're going to copy that a couple of times and change this to back button and to forward button there you go i'm going to change the text here to forward or actually let's do it like that there you go so that should work set minimum height minimum height minimum height and the maximum height so those are just the buttons we can now add these to the horizontal uh layout so we're going to say self dot horizontal dot dot at widget and we're going to add self dot url bar and we're also going to add the buttons so self.go button self.back button and self.forward button in that order there you go so we have the widgets now and then we're going to create the browser itself so the self.browser is going to be a uh qt or actually a q web engine view i'm always confused by the q web stuff there's so many similar names so q web engine view is going to be the browser and then we're going to say self dot layout dot add layout and we're going to add at self.horizontal and then we're going to add the widget which is the web engine view so the browser itself there you go then for the browser itself we're going to already set it to a starting page so self.browser set url is going to be a queue url and it's going to be http google.com like that all right so that's a basic web browser and um we will connect the buttons in a second but first of all we're going to say self.window dot set layout and it's going to be the layout and then self.window.show oh it's going to be self.layout there you go now we're going to do the application um functionality in a second now let's just say app equals q application um and then window equals main or actually what what did i call it my web browser and then app dot exec let's see if this works uh we need to pass an empty list here there you go so it doesn't have any functionality but i mean google works but we cannot do anything here because the buttons don't have any functionality uh yet but as you can see the browser itself works and the ui looks fine so we're now going to only have to implement uh the functionality now one thing i'm questioning right now is if we even need all of this here so do i actually need um do i actually need all of this here or can i just have this basic class like that let's just play around with it a little bit and see if it works i think it should work like that as well and i'm right it works like that as well we don't need to inherit from anything so that was a little bit useless in the beginning but now we have fixed that and let's continue with the functions so we want to have one basic function and this function is called navigate so we're going to call this function navigate self and we want to navigate to a url and we're going to say okay if that url dot starts with uh http then we're just going to navigate to it or yeah if it starts with starts with hdp we're going to navigate to it uh by just saying well actually let's do it like that we're going to say if it doesn't start with http if not url starts with http then we're going to um to say the url is the url or it's going to be http colon slash plus the url like that and we're also going to change that in the in the url bar itself so self.urlbar.set text and we're going to say this is going to be hdp slash and the url yes or actually we can just set it to the url directly right there you go and what we're going to do in all the cases so even if it was correct in the beginning we're just going to say self.browser.set urlq url um q url url like that and all we need to do now is we need to bind the buttons to the individual events so what we want to do is we want to go to the after the browser and we're going to say self dot go button dot clicked dot connect and we're going to say going to have a lambda expression here and we're just going to call self dot navigate to self dot url bar dot to plain text so by doing that we get the text from the url bar and we pass it to a navigate function and since this is a lambda expression we do not call it unless we actually call it then we have the back button [Music] and the forward button and here we don't need a lambda expression we're just going to say uh what was itself.browser dot back and dot self.browser.4 like that and i think we're actually done now this is uh as simple as it gets we don't need to gui as it seems so let's just remove that and now we should be able to use the web browser let's see if we can navigate to neural nine dot com there you go and it actually works we can go back as well we can go forward and if i provide it correctly http slash yahoo.com it should also work there you go so this is how you build a simple web browser in python so that's it for today's video if you enjoy hope you learned something if so let me know by hitting a like button and leaving a comment in the comment section down below and of course don't forget to subscribe to this channel and hit the notification bell to not miss a single future video for free other than that thank you much for watching see you next video and bye [Music] you