Create Your Own Browser Using Python | Python Project | PyQt5

don't use google chrome rather create your own with just 40 lines of python this is super easy super fun and super crazy so let's get started before getting into the detail please please like this video and subscribe to this channel otherwise grandma will come to your house and eat all the cookies in your browser to start with this project you will definitely need to have a python installed in your computer and we would be using a python code editor called pycharm and once this pycharm is ready all you have to do is to click on this new project and then give some fancy name for your project here i will be giving name like my cool browser and then press enter and while pycharm is starting your projects let's go back to your favorite google uncle and then ask google uncle to find something for you and you'd be searching peep pie qt5 and google uncle will tell you to go to this website and once you go there you will see a tiny button just click on this that means you'll be using pip install pi qt5 and qt5 is a very very powerful application development package so we will go back to pie chart and once this python is ready all you have to do is to press ctrl a and then backspace and then click on this dude so that you have a big slate to write your code and then click on this terminal and just press ctrl v that means you would be using pip to install pi qt5 package press enter and it will take literally few seconds for the pycharm to install this pi qt5 for your project then all you have to do is to import this package for creating your awesome browser the very first thing you would be doing is to like from a pi qt5 dot qt visits and then you would be importing everything and once you import everything the first thing you need to is to create a class and you will give some name like main window for your class and then you pass something called queue main window and then write some column after that you will press enter and inside this class the first thing you will do is to create a constructor and this constructor is nothing but a function so i will type like def as if i am writing a function and then under score and python will suggest me to write underscore underscore in it so i will press enter and this will create a constructor for this class i will press enter and then i will call something called super and then i will press enter again and this will create a super connection with our parent class which is this q main window if you don't understand up to this part just ignore this part and we will explain this little later and after this all you need to do is to self and then show maximized and show maximized is that your browser would be the full screen mode that's it so you created the very very little class we will add tons of fun functionalities inside it but for now we want to see how does it looks so we'll go here and then we'll create an application that would be q application and then you need to pass some system argument and that's why it is asking for argument v and all you have to do is to import sys and you don't need to install it because this is built in python environment and here you have to pass sys dot arc v and then you can call q application that hey q application i want to give some application name like set application name and you can set like a my cool browser or something like this or chrome killer whatever you want to give name and then create a window and that window would be your main window class that you just created right here and the last thing you need to call the app and then ask it to execute so you wrote pretty much like 10 lines of code and if you click on this run button it will open a browser like window we don't have like a cool fancy juice here yet but don't worry juice is coming and you would be using google and everything right in your personal browser and you don't need to go to google chrome and all other places so all we need to do add like maybe like a five six small lines of code and that's it and so we will go back here and then we will tell hey we need to create a browser so that's why we'll call like a self dot browser and then the value would be some other qt package and here we will tell hey from uh pi five i need uh qt and then web engine wizards and if you don't see it like in some cases uh you want to import everything from here and after typing uh qt web engine widgets still you see some red is quickly 9 don't worry or you can just copy it and for now since your browser is not ready you can still go back to the google and the search for it say for example pi qt 5 and then this uh not available not found something like this and it will take you to some stack overflow answer and then they would be subjecting to install some packages like this peeping installed by qt engine so you copy this dude and come back here and in the terminal uh all you need to do paste this dude and press enter it will take another few seconds for this guy to be installed and after this installation is done qt web engine widgets this is squiggly line would be gone like a magic and once you have that here you can create your browser and here you can tell like hey i need queue web engine view here that means you want to see some webview in this place and after that you need to do self.browser and you need to set url and once you want to set url it would be asking for url in the form of q url so to use q u r l you need a little bit help from pi qt so for that purpose you can type like a from pi qt5 and then qt core and then you want to import everything that's it here you would be saying like okay i got this q url and inside it all you have to do is to write any website so you type http and then colon colon google.com after this you will need to write just one single line of code and that would be self and then set center visit and that center wizard would be your self dot browser and if you just type this guy and then click on this down button you will see you will have an empty window and within a few seconds you have google and this is not just an ordinary google you can search anything if you want so for example you're really curious who will be who will be my valentine you can search for something like this and it will give you the search result not only that you can go to any of this link and you can search anything one this is like fully functional google in your own browser and all you have to write is like 10 12 lines of code all you did create a class and after the class you just created constructor inside constructor you use some cue or web in scene and then you set the url it could be anywhere it doesn't have to be google it could be youtube it could be facebook it could be anything else you can go there and you can set this browser as your center window boom you have a browser it's little bit working browser will add much more functionalities to it to make it much more practical but at least with just few lines of code you got your browser and you can browse you can see stuff and how cool is that so in the part 2 we will add some cool control to our browser so if you go to some realistic your browser and which is your old google chrome you'll see it has some controls here that means it has a back button it has a forward button maybe it has a reload button right so these are super easy like it's a piece of cake for you you already have your browser uh running right here so that means you can operate it now you need some control and this is called some kind of like a navigation bar or a status bar something like this for any browser so we'll go back to the code inside here we will create a nav bar so we'll say like star this is our nav bar and for the name part you will need to create in a variable called nav bar so you'll do this and this would be q tool bar that means you are creating a toolbar and for this toolbar you can say like hey this class you need to add some a toolbar and that would be your name bar so if you just go to this browser right now there is nothing in between you see this is google or if you go to like any website this is the top bar and there is nothing in between but if you add this nav bar save this guy stop this dude and then run it again you will see there is a small tiny thing but nothing in it right now so would be adding this back button and some other button here we can easily do those and the for first thing for the back button will declare a variable that would be back button back button and that would be q action that means some action has to be done and the name of the action would be back and you will pass the reference of this current class and after that you will say like hey back button when somebody triggered you in that case you need to do some connection with the browser and that connection would be self dot browser and then you will go to the back side and if you have this one and the last thing you need to do is to add this back button with your navbar so you will type like a navbar dot add action and this action would be back button so if you look into this this is this five lines of code you created an app bar and you added it to your browser which is the class that is like self dot add toolbar and you saw this toolbar is running this is very tiny but nothing there and after that you said okay i need a back button and that will happen back action and when somebody triggered that means click on it you will connect to the browser back and eventually you tell network to add this action that's it so you stop this dude and then you run this guy you see there's something back here not only this you can search anything like a tailor sweep or something like this taylor swift here you have some result but maybe you want to go back to google again all you have to do is to click on this tiny back button and you go there not only this you can search for like maybe uh maybe uh rihanna or ariana grande somebody something like this and you can go to their any news and you can go to their website you can go to youtube maybe wikipedia you can go anywhere and then from wikipedia you can go to like any other link this person have like a videography doesn't matter you are going multiple places and after that you can back it go one step back if you click again it goes another step back if you click again it goes to that another step back that means you already got a very very functional back button for your browser and since you are able to create a back button you would be able to create a forward button is super easy and for that purpose we will do exactly the same thing just little bit different so this would be our forward and then button and this forward button would be a q action as usual but the name would be forward and then we'll pass this current class and after that we'll say like the hey forward button you need to do some connection when somebody figured you and then you will do the connect and you would be connecting self dot browser dot forward that means you would be going forward and this is just don't call the function just write the name of the function and the last thing you need to do is to nab bar hey you have to add this action and this would be your forward button that's it so now you stop this dude and then run this guy you will have a forward button as well that means if you go some reason go backward you can come back forward so this case maybe we'll uh look for someone else for example we're looking for maybe black pink or something like this and we go to the black pink maybe we listen to this song for some reason we like this song and we got some ad and after that maybe we go some other song like this that means we are going something in forward and then we go back that's fine we go back we go to google we go to the initial one and if we want to come back we can forward that means we searched this black pink we went there youtube and then we went to some other youtube uh videos that means you can go back and forth that means two core functionalities of a browser is already implemented this is super fun and the next button is like similar to this if you go to like an actual google chrome you will see they have some reload button maybe you could have a home button this kind of thing so since you are able to create like forward and backward you'll be able to create the reload button so this would be your reload or refresh whatever you call uh the reload button or refresh button and this would be another q actions and then this would be your reload and you will reference the current class and after this as usual your reload button somebody triggered it and then you will connect with the browser that would be self dot browser dot reload that's it and the last part you need to tell the nav bar hey never you need to add some action and that action would be your reload button so now if you run this guy you will go there and then you'll see like a reload button so if you reload it it's it's very quick so you don't see it say for example we go oh maybe some something maybe we'll go like twitter or something like this uh we we want to go to twitter and then we go to like twitch and then in this website since this is taking a little longer now if your reload you'll see this browser is reloading or maybe you can go to like anywhere rather than twitter you can go back as usual and maybe you find like something here like youtube and something and you go to some other youtube home page or somewhere else and then you need to reload this space for some reason you want to reload it just click on this it would be reloading the page that means refreshing again and again again and again for you so you got the reload working for you as well so i'm enjoying it i'm loving it and i'm sure you are loving this too and definitely if you enjoyed up to this point please please write some romantic fancy lovely comment for the grandma and grandma would be super happy to see your name below this video the next thing is super fun because in your browser you need a home button and this is very common among a lot of browsers because you click on this guy it will take you to a specific website that you define so we can create the similar button here and that would be our home button and this would be a queue action so we're creating an action and this would be our home button and then we pass this current class and after this we'll say like this home button and you need to do something when somebody triggered it that means you need to connect but this time you have to tell specifically where it should go and for that purpose we'll define it little bit differently that means if somebody clicks on this home button we will take this click to a different method and that method name will define little bit it would be like navigate something like this and after that we will tell like as usual nap bar you need to add some action and that would be the home button and right now you don't have anything called like a navigate home so we will create another method here and for that purpose we'll define something called navy gate under score home and then it would be if you just press the parenthesis pycharm will provide the initial parameter and after that you need to define where this navigate home button will take and you will type like a self.browser you would be telling the browser hey you need to set the url and to set the url you need to call the queue url and then pass the url so for example by default we want to maybe http and then colon colon then google.com something like this and it could be like any other website so first start with that google and we click on this guy we come here and by default this is google we go any website say for example we go or maybe programming hero something like this and it takes us to the programming hero and after using the programming hero website we want to go to the home and for that purpose we click on this guy it takes us to the home and if you want to go somewhere else that means like you want to go to youtube you can search for youtube if you want to search for maybe anna konda or something like this you can search for anaconda and find some other fun stuff if you want to but any point of time you click on this home it will take you exactly the place that you defined here your home could be something else it could be programming hero or dot com something like this and if you do this so like i i stop this guy i run this and now if by default this is google but my home is different so i click on the home it takes me that website whatever the website i do so so far we have like some basic functionalities but the very very core functionality of a browser is still missing and that is you would be able to type some website url and then you'd be able to go there so far we can actually go back forward reload it go to the home but that's not the core functionality of a browser you will need a a text box or somewhere you'd be able to type the name of the website and then you press enter or do something and it will take you to exactly to that website we need to do that and that would be the fun part we'll be looking into in the next part and to do so uh we will go to the uh go to the code editor we will be adding a search box right here but we'll be going to the code editor and then here we would be adding a different things and that means you need something to edit and you'd be creating an instant attribute that means you'd be using like a self dot url bar because you need to use it in some other places as well and you'd be using q line edit that means you would be editing stuff in the single line and after that you will tell the number hey never you need to add some widget and that wizard would be yourself dot url bar that's it so this will show but it will not do anything right now so if you stop this guy and you run this and you come here you see something you can type here like http and then slash something you want to type asdf whatever com but if you press enter it doesn't do anything so you need to add some functionality hook some functionality with it and we'll be doing it very easily and the next part is you need to go to this self dot url bar and then tell is hey if anybody press the return in that case you need to connect to a specific thing and that specific thing would be like an another thing because you need to capture whatever is written over there and then call the browser to go so that's why we will create another method and that would be self dot navigate to url something like this and here similar to like a navigate home we'll create a method diff navigate to url something like this and if you just press the parenthesis it will add the self now you need to get the text uh whatever is written there and that text is written in the url bar and that's why we created like an instance attribute so that we can access it from anywhere else so here you need the url that is written over there and that url you will get self dot url bar dot text so if you get the text this is your url the next part is easy it's exactly similar to this so you'd be calling the self dot browser hey you need to set some url and that would be q url and pass this url variable that's it so now if you run this guy and if you have like coded it correctly and then you can type something here say for example here uh http and then colon colon twitter.com and then just press enter and if you type correctly you see twitter is coming and not only that just typing here you can go to youtube press enter it will take you to youtube if you miss mark zuckerberg you can go to like hey facebook don't cry i'm coming here if our team cook is like missing you you can just type apple and then go to team cook and you will have this browser going like nuts for you that means you can actually type something and then you can definitely go to this website not only that your all old functionalities would be working but with some little hiccup and we will fix it in the next part so for example right now you are seeing apple and if you click on this back button it goes to the previous one but each guide didn't change if you press the back button it goes to the back to youtube but these dude didn't change and if you go back again it goes to twitter but this dude didn't change so your back forward everything works but this search box is not updated but this is super easy and we'll be doing it in our next part to fix it uh you just have to capture some url change event and that's it so what we will do here here we will add one extra line here we will say like hey self.browser if your url is changed then you need to do some connection and do some work and that work is to like calling another method and that would be self dot maybe a update url something like this so what we are doing is like we are calling the browser hey if somehow your url is changed you need to connect to this uh method that we didn't wrote yet so we'll be writing it right now and here it will be like a div and the name is uh update url so update url and if you press this will add some parameter but you need to know which parameter is updated so you can type like something like an url or maybe some q parameter whatever you want to do and inside it you need to call the self.url bar and you want to set text and that text would be q and this is coming as like an string and but you can be little bit sure and then type like a true string to make sure this is a string so what all we are doing is that we are telling the browser hey if url changes you need to go to update url and this is your update url method and it's taking some parameter and we're just converting it to any string and then it will be set text of the url bar and url bar is nothing but the text box that we are using so now if we stop this guy and then click on this run button you will see by default we have google doesn't matter if we type here twitter or or anything here it will take us to twitter maybe after that we'll take it to programming hyphen hero we can take you there and it will go to the programming hyphen hero and if you uh mistype it it will take you there into the right place programming hero here and then you can go anywhere from here for example uh if you want to go back like your gold youtube or somewhere else you can go to youtube if you want to if you want to go back home again you can go to the home again doesn't matter this is your home and you can utilize this and if you go to the back button right now you see this is youtube so it's updating if you go back again it changes to this and if you go back again it goes to the messed one if you go this goes to the twitter one so this url is updating even if you use the back and forward button that means we have fixed this problem so so far what we have is we already did some cool things in this our custom browser we have like a back fourth those functionalities we can go anywhere and we can search this and we can visit any website it could be youtube it's any website in this world and this is like a super power so this is a super crazy and super fun and super powerful python code you just created your awesome browser with just 40 lines of code and if you have watched until this much i definitely definitely recommend you to test whether your browser is working so for that purpose you will definitely go to the google in your browser and search for programming hero and then once this programming hero is coming all you need to do go to this link and then you find the programming hero there and if you want to use much more fun you can go back again and then you can go to google play store and find this fancy app and then installed it and also if you want to have much more fun you can go back and then you can go to our youtube channel and if you see a red button here definitely you need to press this subscribe button so that you are part of our grand family where we have grandma and you so if you like this video until this point please please like this video write some fancy romantic lovely comment and subscribe to this channel and this way your grandma and i will see you in the next video with some fancy project fun project just for you [Music] you

Channel: Programming Hero

Views: 267,786

Rating: 4.8978806 out of 5

Keywords: Programming, python, web development, learn programming, programming tutorial, coding, software, python tutorial, python projects, python for beginners, learn python, python tips, python tricks

Id: z-5bZ8EoKu4

Length: 28min 32sec (1712 seconds)

Published: Thu Feb 18 2021