Just Basics 1 - Python Flask Bootstrap SQLite for a web app with backend database

so this is a really quick project and it's just intended as a demonstration for how to do a handful of quick skills using Python flask sequel light and wrapping all this together into a web application front-end so what we're going to end up with is just something that looks roughly like this yours will include some different data assume that you follow along with the instructions you'll have the capacity to view all of the data straight out of a database and you can add some students via form it will incorporate some code we're going to be doing that using pycharm this is just going to using the pycharm professional so I'll try that again using the pycharm Community Edition if you use a professional all this will work exactly the same in fact I'll probably be a little bit easier yeah like I said before it will just use a single like three here in order for you to be connecting to a back-end database so let's just stop this and go right back to the start and we'll have a little look and how we go about doing this so I'm going to assume that you're using some form of ID such as a PI charm or Visual Studio code you can get by with any one of these or really any of the other ideas that are around here within pi charm I'm going to hit create new project I'm going to make sure that I give this a meaningful name and I'm going to call this student underscore MS which is student management system it's just going to store just some basic details regarding students now if you're using a different idea you may need to go and create a virtual environment manually yourself afterwards pycharm and including Python community is polite enough to do that for us I'm using Python 3.7 was given the particular date here but if you're using a later iteration such as 3.8 which is already out that should all work equally fine I'm gonna hit create here and then just patiently give it a chance to go and create its stuff so that took about 30 seconds to create and hopefully I'll end up with a screen that looks a little bit like that it may or may not be just entirely clothes you may have a project file over here again if you're using something different such as Visual Studio code it might end up looking different again just some basics here for you to know is within this project Explorer up here this is where we're going to be spending our time creating our files and our various top py files with HTML files we're gonna be using this is going to be our coding window that we use and down here we have access to our terminal so the first thing that we're gonna go in to do is install our various dependencies and there's really only one that we need to worry about and that is flask so flask is a web application micro framework that we use to create web applications if you're comfortable using the terminal down here it should just be as simple as saying pip install flask so if I hit enter there should go and install all that for me I'm just going to backspace it though briefly because I just wanted to show you as well here within PyCharm if you go file settings and then find along the left-hand side here the name of your project project student in this drop that down and go and find python interpreter this is PI CHUM's built-in package manager so I'm going to hit us up here to install I'm going to search for flask and then I'm going to hit install package so if you don't have access to the terminal or if you're uncomfortable with it you can just install it that way as well as long as you're within pycharm it's also a good idea wherever you can to get needs to use in the terminal so it will look like not much has really happened at that stage but you'll see that flask is going to be installed in here within L within our packages ginger to a whole stack of other stuff here and that leads into flask within our virtual environment again make sure if you're uncertain you should be able to create your own virtual environment here as well so we'll start off just by creating our database this is going to be the first logical step we're going to right click on the parent folder up here so this is student M s not the virtual environment just take note of that right click on that and go new python file and i'm going to create a file here called DB - creator this is just going to be like I said before basic Python file and we're going to use this to create the database in the tables to create and connect to a sequel Lite database within pycharm we first need to import sequel and then we also need to build a connection so we're going to call with our connection connie and we're going to cradle so you call light three and we want to connect to a database and what it's going to call this students dot DB beneath this I'm going to create a cursor and think of a cursor command it's like when you open up Excel and there's a particular cell that you click in and you use your cursor to provide different commands so this is the thing that you use in order to do stuff I'm going to give myself a bit of space here and I'm going to say a conic commit look open bracket close bracket I'm gonna say Akane dot close so this is a really basic starter all it's done is it's going to create a connection here to a database you know you'll notice that this database file we actually haven't gone about creating that at all sequel like three is polite enough to whenever you say hey connect to a database if one isn't there it's going to create one for you we then declare a cursor that we don't use just yet we then commit so this is say hey make any changes that we've made to our database commit them to the database and then close the connection here so see you later fire now go right click run you'll see that it doesn't look like anything's happen here it gives me how you finished with exit code zero but on the left-hand side here you'll see that I now have a student's DB so it's gone about creating our database it's important to note there that if there's no connection so if there's no file listed here that actually already exists it will create one for you so if you accidentally type the wrong thing here if you've got multiple connections and you may end up trading multiple databases to get around that what we're going to do now is we're going to create a new variable called DB locale and this is going to be students DB and I'm gonna ditch this stuff in here within this bracket and I'm gonna make this DB locale now why bother doing this well later on if I have multiple connections and multiple cursor commands and whatnot have it happening all within the same file here each time I go about typing students DB it's every likelihood that I'm gonna stuff it up at least once I might call it student I might call it students and it will mean that it won't work because it might might create a fresh database here with nothing in it so it's worthwhile just specifying hey this DB locale that's the variable that were going to use here this should work just just exactly same as before if I go right click run you'll see that it doesn't do anything because we haven't provided it with any instructions yet now I'm going to assume at this stage that you are a little bit comfortable with using sequel Lite and therefore some basic commands will make sense to you to create a basic command within sequel Lite we use our cursor here with this method execute and what I'm going to do is I'm going to go inside this bracket and I'm going to add three exclamation marks not the exclamation marks apologies three double quotation marks I'm going to skip this on to a different line this is me telling sequel Lite or path and really PyCharm that hey we're going to be creating a multi-line in destruction here so just just bear that in mind so what we want to do is we want to now create a table and wave this is going to call this students in fact we won't call it students for now that's actually a terrible idea because I mean we'll have a table inside a database database is called students and the table is called students things will get complicated we're just going to start off by creating contact details here now within that we want to add some information within some brackets here now because we have our three quotation marks here we can put this across multiple lines so this going to separate this out just to make a little bit more readable for us so what I want to do is I want to start off by creating an column here called entry jump it's going to be a primary key and I want it to auto increment as well as that I want to create a field called first-name on another field called text on another field name called street address which is also text and I want a suburb also text here so this is just basic sequel Lite instructions here to go about creating a table here called contact details now again if I go right click run this will look like nothing's happened here but what we can assume is that this has gone about creating a table for us now a cheeky way for us to test one one that's not necessarily recommended in all instances is if we run this again we'll get an error and that's because we're trying to create the same table over at twice all right so we're trying to create a second table within the same database and it throws up an error so we're pretty sure that there is something in here so we've now gone about creating a database here and we've created a table to go within that database that's all that I'm going to use within this file here the next stage that I want to do is I want to go about populating that that same table there the the contact details so to do that I'm going to right click on my parent folder again up here and say new Python file I'm going to create a file called DB populate now I'm gonna end up copying up most of the code here from DB cred so I'm gonna click here within cretton again if you're using Visual Studio or idle or anything else you should be able to navigate between your files reasonably easily I'm gonna need to select everything here by hitting ctrl a ctrl C or right click copy skip back here into DB populate and paste it all into there now two parts of this and by relate to the why do I bother doing this at all and have a separate bit here called DB populate why not just do everything within 1 DB file what one dot py file here well the reason for me is that I often end up making the sex and want to go back and recreate certain things and it's handy to have various pieces of code here ready to go there's boilerplate code that I can say I want to create a new table and I can just copy and paste this stuff over so it's handy to have that stuff in case I do want to go and recreate a later on it also means that I can now use this same content here all of the stuff within these three I can delete everything else within it and I can now really quickly go about adding some some actual data to my table here contact details so how am I going to do that well I'm going to use a insert into contact details and now I'm going to specify the various fields that I'm using now even though I did create an ID field I'm going to leave that one blank because you might remember that we made a primary key and we made it an integer that will auto increment so if we don't specify that when we're inserting data into these other fields it will automatically increment one up for us I'm going to say first name surname street address and the suburb and I want to insert the following values so again just basic sequel Lite coding or sequel coding I'm saying hey I want to insert into contact details table one two three four items for fields for each record in this instance sorry the first one I'm gonna do is I'm going to create some dummy data here and feel free to go ahead and into any of your own dummy data here as long as it does follow the same format and hopefully when you're done it will look a little bit like that apologies for skipping ahead but it's much more productive than watch than you watching me type so some important things to note here I've got four items in each one of these each of them is specified within a quotation mark here followed by a comma and in the next item so first name in each instance followed by the surname followed by the street address followed by the suburb just note here as well that each item each record is here within a bracket with a comma at the end of each one these records except for the last one and then we go into our usual conic commit and kind up close so let's see what this does now I'm gonna go right click run DB populate and usually we don't have any errors here so we don't actually know if anything's happened within our database so the way that we're gonna do that is we're now going to go about querying our database so we're going to query this table in particular to do that we're going to right click on student ms again the parent folder here and go a new Python file and we're gonna do DB query and I'm going to paste all the same stuff in here again because it should still be on the clipboard but this time what I'm going to do is within this CD I execute in my mi my trip quotation marks here I'm now going to use the Select statement and select star from we call this contact details done now importantly when it comes to using sequel light within pycharm you'll note that if I go right click run nothing actually happens here and that's because yes I've gone about selecting it but I haven't gone about then doing anything with it so the way that I do that is I'm going to say student info so there's a create a new variable and I want it to get all the data fetch all of the data from this select query and put it into this variable student dot info now just a quick note on this you can do fetch all you can do fetch one you can specify within fetch 1 which in value it is etc etc for now I'm just going to assume that we're just going to collect all of it now this should be as simple as now I can say print student info so now if I go right click run DB query you'll see that I get all of my info here now this is done quite ugly right so each one of these records is here within that's put it into a list and a tuple and whatnot the even though that is quite ugly a handy thing that we can do here is we can now do for student in student info and we can print student so this will make it a little bit better they'll still be able in parentheses and stuff around it but this is a much nicer way for us to do this so this is saying hey there's going to be multiple items within student info for each one of those items we're going to call it student print that student each in each instance now from there we've gone about creating one database with one table with three records in it and we can query it we could sit here and spend the next few hours creating a really beautiful database build some relationships and whatnot between it we could go about create an actual student management system which would include much more detail than just this stuff here you know you would add parent contact details any phone numbers etc etc you would probably then add some other tables and do with academic data and blah blah blah but in reality for our purposes if you can do this once in this sort of style that I'm sure that you can do it multiple times so instead the next stage that we're going to do is we're going to go about pushing this data into a flask web framework so to do that we're firstly gonna close all these various files here because we're not going to need them too much just now I'm also going to minimize this just so I get a little bit more space just to keep things neat I'm now gonna go about creating another dot py file I'm gonna right click on the parent folder student MS it's doing on squamous rather I'm gonna go new Python file I'm gonna create a file called app dot py try to stick without py for awhile for now so this is going to be a MDU file and I'm going to start off by typing some of the following here so in this instance we're going to go about using flask so flask as I said before is a micro framework for developing web apps you'll see that as soon as I go about importing this pycharm community says hey why don't you go on by pycharm professional pycharm professional is excellent and if you're going to be getting into using flask a lot it might be worth some dollars in order to get hold of it we're not going to do this for now when it's going to stick with the basic Community Edition but if you do want to go down the the professional route it is really handy it doesn't add heaps of additional functionality but it is a few extra bit so it doesn't love this this initial set up for us as well as that later am I going to need to use our sequel Lite so we're gonna go about importing that now in order to instantiate flask that is to make sure that we have an app here that's going to be run on a browser we need to go about creating an app and we're going to say that this is that the app is going to be if you like a version of flask we just referred that for now now as well as that what we need to do with creating something that will run within a browser is that we need to create a wrap for it so route this is going to be a URL so we're going to leave this route one for now but we're also going to do is create a double route which is going to be for both a slash and for a home so what does this actually mean this means that when we first run our app it's going to take us to this route here and whatever we put underneath here so within this DEF underneath this definition here underneath this function it's going to return whatever we say here when we go to that route so let's just add a basic bit of information here so we're going to say when you go to this URL return hello world now at the very bottom of this we need to add this part here so this should be pretty much the same again whether you're doing visual studio code or whatnot but when we now go right click run app it should give us some information here and whereas before it was just a basic printout you'll see that it stays running and if I were to click on this you'll see it'll take me up into my default browser and just at its basic wrap here so without the slash that's the same as including it not including is it going to print hello world for me so it's just within the browser there now if I hit stop and I change this to hello world again one off allowed a couple extracts explanations there and then run this again when I click on this you'll see that I can edit it if I were to click on this and go to the home you'll see that it takes me to the same page so that's the core of how flask works in to the extent where I can create other routes here such as add which is going to be one that will create later which is for adding a student or I can return here is where we will students should probably add to our database what we'll do for now when I hit stop and run this is my home this is my add student so I can create as many routes as I want here and this is this is just my localhost but after that I can't read as many routes here as I or just by using this decorator and adding a function to go with it just for neatness we're gonna ditch this one for now get rid of that entirely but we are going to keep keep a hold of this one we're going to try to build this out a little bit the first thing we gonna do is we're going to turn that off so just kind of stop excel as we'll just keep running in the background now rather than us need to add all this data here it makes a lot more sense for us to be using HTML so that then we can be making dynamic web pages we can add whatever content we want in here and instead of needing to make this one py file huge we can just change this to one HTML file so what we want to do is we want to create a template we can do that by right click on the parent folder here again and instead of going new path and follows normal we're gonna say new directory I'm gonna call this one templates make sure that you call that one templates within that I'm gonna go right click new and in this case I am right clicking on templates not on the parent folder just note that right click new HTML file I'm gonna create a new html5 file called home I'm just going to create some basic stuff here and just call this here is my home page and hit ctrl s to save so see that I've got home dot HTML and I've got app dot py so what I want to do now is I want to render this home page this HTML instead of just this basic stuff here and what I do is I can turn the top here and whereas I've previously had from flask import flask I now want to import another method here another function you've got render template windage all this stuff up as far as return now I'm going to type in return render template home dot HTML make sure that you've got your quotation marks here but now when I hit run on this and click on that you'll see that it takes me this and that this is different from these others and that being because this time it's gone about rendering not just whatever static text I had but this home dot HTML so now if I close that on turn off my local server here a real benefit of is using HTML is it affords us a lot of opportunities with bolt another with bolting in other add-ons and other bits so I'm gonna go back here to my browser and this time I'm going to go into a Google search for get bootstrap it's a bootstrap is a lot library of HTML CSS and JavaScript features that it's really quick and easy for us to use we're going to use this as our core method of building our user interface the way that we use bootstrap is we go to that website and we click on documentation this will take us to an introduction page here and if we scroll down and give us hey here's a starter template so this stuff here and what we're gonna do is we're going to copy and paste this over the top of what we previously have here within HTML now handily they've got a copy to clipboard up here so I'm going to use that click on that just note this is again here and the start a template on their on their introduction page here with documentation I'm gonna select everything here within home and digit and then I'm going to paste bootstrapping so what we can do now when I hit run is when I click on this you'll see that my font is no different from before and that's the usually usually pretty good indicator that hey bootstraps working so why use bootstrap and what is it well let's just start with a basic example up here under search I'm gonna type in the word jumbo and it's going to do a quick search for a Jumbotron I'm going to go and click on that and you'll see that it takes me to this stuff here so the beautiful thing with bootstrap is that once you have it installed and installing it I mean just as simple as copying all this other stuff in here they've got links to style sheets etc everything that we put in the body here can just be regular HTML as before but handily if we just use this code here to start us and start a boilerplate code it makes it really pretty really quickly prime example let's say I want to include this at the top of my page well it's saying hey here's a Jumbotron this is what it looks like here's a code to build it finally I'll go copy and straight over the top of this HelloWorld h1 and ditch that and paste it in now when I hit stop and run that again and return to here you'll see that I now have this even more handily because it's just built in straight HTML it's always really easy to easy to use so where it says hello world I'm pretty sure that's going to be that part up here so I can now go about customizing this so I can replace hello world this student management system 1.0 I can ditch all of this text here and I can change it to something else it makes sense here is my SNS and I might keep the buttons and stuff here but I'm gonna change this paragraph masked Marco - it uses Python flask bootstrap and simple light I'm gonna leave that as no more so now I hit stop and run again just by changing the static text in there when I click on this you'll see that I now have a relatively nice looking start it's not beautiful but it'll do for do us for now so real benefit of using bootstrap is that hey it's got all these precooked components so we can copy and paste in and just use as a style while we're here it's worth pointing out to useful things the first is that possibly the handiest shortcut key within pi charm is to hold down ctrl alt l and this will format all of your re indent everything so that all actually makes a bit more sense to you particularly your copying and pasting out the other thing is that whereas before we might have been used to right-clicking on a dot py file and hitting run if you do that within home dot HTML no HTML will work all that well right you can't right-click run on it and even if you can under certain circumstances it will look ugly because it needs to be wrapped up here within this flask stuff for it to actually look any decent what's a little so we now have our starter page here the next thing that we want to do is we want to actually display all of this data probably within a table given that we're pulling content out of a data bit database well getting quite a handle if we come back here to bootstrap and do a quick search for table you'll see that it has an option here for table slash tables I'm just going to use no might not use that one actually I don't they want a dark theme that'll make it look ugly I might use this one here with our struct rows so again just just look your way through all of these find one that you think will suit your your styling or feel free to create your own etc once you do find one that makes sense it should be just be as simple as oh I'm going to take this code and then I can just go about adapting it so I'm going to take it back here into my pie charm go ctrl V and then go control old L just to make it all a little bit neater so now if I hit run and then go to my page you'll see that I have my various data here now this is all just static data that came in with my bootstrap so what I want to do is now I want to make sure that this is actually displaying the data that is you that is coming out of my sequin light table right out of my contact details table so that's going to be a little bit of a trick here that we need to get right the first thing that we're going to do if you like a preliminary to this is to work out how we can pass variables from flask here from Python app py into our HTML code so I'm going to hit stop up here and I'm going to skip back here into app py so this is my home right here and I'm just going to go about creating a example text here is - and Mormon text use whatever variable you would like to be using them just as long as you've got some text here what we want to do is we want to see if we can get this to be displayed here within home dot HTML preferably with some bootstrap formatting well render template accepts not just this initial argument of dot HTML it can also accept additional arguments so I'm going to create an example example underscore text equals sample underscore text now this parts really confusing when you first come across it and because you know you're wondering why it isn't you've got to here example text equals example text all right you should just be fairly self-explanatory and you think that this just becomes circular and it won't actually achieve anything note here though that the formatting is slightly different on this one it's gone this sort of brownie thing this ugly color here the reason is it's recognized that hey I'm sending through a variable and called example text to HTML and I want it to be equal to this example text variable that I've got up here now I could rename this if I wanted to be ng text and you'll see that it doesn't actually worry what the name of this is the reason that I tend to keep it the same example text is because it's one less thing for you to think about well why is it example text here within H here within Python about eg text when we reach HTML so just keep these the same for now we'll hopefully get the hang of that the third go in now what we're doing is we're passing in this variable example text let's skip over here to HTML to do this I'm just going to open up a basic paragraph tag here and then I'm gonna do open double squiggle bracket thing and I'm going to create a line here example text so just note the convention here that I've got the space after the double squiggle bracket name of the variable another space and another double squiggle bracket so you've probably guessed or hopefully guessed what this would look like when you get to the other end here's my sample text so you'll note that I don't actually have any where here within my HTML so I mean that says here is my sample text although it's doing is it's pulling in whatever I write here back within flask back within Python so what we can do is we can use this same principle but instead of us passing through just some static text we can pass through some sequel queries well no really the response to a sequel query so what we're gonna do is we're gonna go about creating a contact details we're going to go about creating another function here that is going to do a lot of what I'll see our DB query over here actually did in the first instance alright so we're gonna go about recreating a lot of that using largely the same code because we've already got sequel Lite up here forgot our database it's been sitting there waiting patiently for us to use it again so gonna do the same as before we're gonna say this end we're also going to use the same method before DB locale is going to be equal to students DB in here we're going to say DB macao we're gonna create a C is equal to conduct cursor so that we have something where we can pass in execute and within this we're just gonna do our sentence before three lines we could probably get by with without at the moment but just to keep it neater select a star from and we call the table contact details so previously we did all the same stuff and you mind if remember that we need to then go about adding a variable here which would be a student data is it - seedot fetch all and we would then go print the student data so this function here is going to do again pretty much exactly what this here is going to do except we're going to skip the young skip the what I call it thing the iteration for now so here within that we now have this print student data if I don't run this you'll see that nothing actually happens because I haven't actually called this query contact details at all yet the reason is that when I do this I don't actually want to print this data what I want to do is I want to return it and there's an important distinction here when you print data it's going to pump it down out here into our console we actually don't want that we want it to come into here into this variable which can then get passed here into a HTML so instead of having static text here what we can do is we can say example text is going to actually be equal to query contact details now we're also not going to call this example text because that's going to get ugly instead we're going to call it student data and we're going to rename each instance where it occurred over there so what this is going to do is we're going to create a new variable student data which is going to be the result whatever is returned from this function here which as we know is selecting all of the data from contact details once that's done it gets passed in from flask to HTML as its variable called student data here within home we're going to rename this student data so that's a with you know home dot HTML the last point if you like where it's going to get get pushed out we're now on a hit play then hit go you'll see that's pulled in all of our data here out of kind of sequel so the next step we want to do is we want to be making sure that this goes from being just static text here and just boring paragraph mark here into our table so for us to do that we're obviously going to need to go if I just minimize this and stop that so we're also going to need to do this in such a way so that it doesn't matter how many records come out of our data base it will create that many rows so in this instance if your comes with programming you'll know that this is going to require some iteration now we can use Python style iteration here within home dot HTML and the way that we do that is we say we open a squiggle bracket just 1 this time with a percentage sign and we say for student in student data and then we close the lists we want to print student and then we need to do something different from Python and end for here so we'll just see what this star that's when we go about playing at this time you'll see that in this instance it's taking each student and it's putting it on a different line and that's because it's back in here we're saying we put it within a for loop and for each student within that student data print just the student right so that that that individual row now we can use this same principle when we when we go about creating rows one last piece of this puzzle is that each of these items if I skip back into here you'll see that each of these is stored within a tuple here right so each of these five pieces of data is stored within a two ball well we can go about calling each one of those by doing something such as zero and this student one double bracket so what this is going to do is it's going to print the first item in that tuple and then the second item in that tube I'm just noting those 0 and 1 0 its value is the first no now when I hit go you'll see that it prints one David to Johnny and 3 journey so I can now use again this same principle to get this final idea of I want to print each on the rows but then I also want to specify what data goes into each one of the cells now hopefully you're basically familiar with some core HTML and you'll be comfortable everything some of the data here so the way that I'm going to do this is I'm going to go about editing we've seen the table head in this first table row the table head of each item here so you see that that was a hash tag and that's this bit here so I'm gonna name these this need to be first SONA first name surname and I'll need another one here for what I lied I did I have I must first surname street name street address and suburb I'm gonna say ID I'm gonna make that first name I'm gonna make this surname I'm gonna make this street address duplicate the line if you use in Python we can do that with control D and then I'm going to suburb now when I hit stop and play you'll see that I've never got this extra column here without any data added to it so it kind of hates me at the moment but we can sort that at the moment now this here within our table body well these rows are the various ones that we want to crap we want to create one of these rows instead of one of these P tags so we can start off by just to make this a little bit neater deleting the next row and there are after that until we just have one row here within that within our table body so what we now want to do is we want to say well each one of these we want this to be ID again this isn't going to work just fur just for demo purposes we want this to be first this to be sewn in such a room we wanted to use our data so what we can do is we can just put our for loop or student and student data here on either side of the row in fact we should do it outside that row as well here and we should do a in for outside that Row two so then we don't end up with thumb yeah always I would have made things a little bit messy so I'm gonna say that for each student in student data or for this one we want to output student 0 and this is going to give us the first item of data which is we saw before is this item the ID now item number student 1 is going to be their first result so I can say here student 1 and that's going to give me their table sorry their first name of the table I can put here student 2 and again we can just duplicate some rows here so then we can say student 3 2 4 and now I'm gonna come back here I'm gonna delete all of that stuff here that I didn't necessarily want to keep forever so this is saying for each student in student data create a row and within that row have a header right so that's the column at the very far left with that student data there their ID rather the first name surname their street address and their suburb now I wanna hit stop and run I'll end up with this stuff here now the beautiful the beautiful thing with this is that that wouldn't have mattered how many rows of data I wanted to give it if it had a brought out a thousand it would have gone and printed each one of those simply because we have these lines here just getting your head around this notion of iteration has such outsides benefits because you can then iterate through each one of these and display your data house so ever you want so hopefully you've kept up with all of that a lot of things covered here and it's probably worth doing a quick recap create your data base here we then went about creating a table underneath that within that we then populated it with a set of data we then went and managed to query that make sure that our data was actually there we created a instance of flask and to hold that data and present it we used render template instead of just being able to just dump in raw text in here we then used sequel here in order to retrieve data and then pass it in through to flask to them pass in through here to HTML to then be able to iterate it that's obviously quite a bit to get your head around takes quite a bit of time in order to to perfect it so it's probably a logical place to pause and then think about how you might go about expanding on that and using those skills and other circumstances

Channel: Matt Collyer

Views: 8,072

Keywords:

Id: cGWP9FRMQLw

Length: 36min 23sec (2183 seconds)

Published: Tue May 26 2020