 Welcome back team is your biggest fan the real Casadero and I realized that in the first part of this series That I didn't explain a couple of the extensions that I'm using Inside a visual studio code. So what I'm going to do right now is I'm going to show you those Extensions that I'm using so you have access to those as well Some of you guys already figured it out But if not I'm going to show you exactly what those extensions are team So you can have those inside a visual studio code as well And then we're going to go in and we're going to set up our development environment for those of you who If you didn't install xamp, no problem This video is going to walk you through going through installing xamp And it's actually going to show you how to set it up So you can have your local web dev server going and then we're going to move forward And we are going to set up a small php application that is going to act as a back end So we're going to have this system on our computer that will allow us to uh to basically pretend That we are working with some sort of remote server somewhere and this is what developers do All day every day because sometimes it's not as easy to work with remote servers Now I use what's called the jam stack and what that does well And I say I use the jam stack. I use that term loosely Because I'm not building new websites every day using the jam stack, right? I'm not even building new websites every day But the jam stack allows us to sort of we don't have to worry about the back end stuff And that's way down the road team, but we'll get to that point. The goal is is to Is is as you learn stuff, you're able to go out and build stuff. So like just from the very last Video, you know how to set up a html form so you can go in and you can start start experimenting You can build a html page. You can put some basic text on there Throw some form fields on it see what it looks like team and then in this video and this in this second part You're actually going to see what you can make a form do and when you put that form out on the internet If you set it up, right? It'll do what you want it to do now We aren't going to go all the way that far just yet team But we will get to that process if you stick with if you stick with this series if you sign up or Or if you sign up to the code 365 startup lab to support the channel You're going to have access to all this same stuff as well Is just that it there'll be there'll be more segmented And a little more detailed team, but for the most part like all this stuff the same I'm pulling these videos literally right out of The the the html mastery, but anyway team that's enough of that. Let's get to it So I am now down here in the lower left hand corner as you can see and I shouldn't be impeding anything down here When we're really getting to the coding stuff But what I'm going to do is I'm going to hit the windows key and I'm going to type in a code And this is going to bring up visual studio code and I'm just going to show you those extensions. I was talking about We don't need this and I'm just going to bring this up and I'll zoom in so you guys can see Well, actually let me close this window by hitting control w and now a whole control And visual studio code is different. It doesn't let us zoom, but if we do a control in the plus key We can zoom in on everything And we'll go right over here to these boxes off to the the right side of the screen click on those And then at the very top you just type a live server And live server 5.6 point one will pop up you just click there and then you can go right over here and you can just hit install team And also we're going to be installing. I think it's rainbow brackets r a i n b o w Brackets or is it? Yeah rainbow brackets right here rainbow Rainbow b r a c k e and so we got rainbow brackets right there zero point zero point six and this This isn't this isn't what I was looking for There's a there's a different program. Hold on. I think it's called indent rainbow indent Yeah, there it is indent rainbow version seven point Four point zero and indent rainbow what it does is adds those colors next to our our code so we can see Where our indenting is and if you guys don't understand the the whole idea of indenting It's just so that we can it makes our code easier to read So we can read it better another human being can read it better That's it, but those are the two main extensions you're going to see and if i'm using some other extension Hopefully I remember to call it out, but also what you can do is as you learn more stuff You can just go over in here and you can just look around at the extensions There's all kinds of stuff you can install you can install Stuff to do timers and to do lists and i'm talking about just like With the application like you can keep track of I mean there's The point is there's all kinds of extensions and then A lot of you you'll reach the point where you'll be able to go in here and write your own extensions And and other people will be able to get them and use them But those are the the two things that I saw that just stood out that uh that I didn't tell you guys about Apologize about that team, but now we're going to get into the second part of the series And we're going to set up our local web dev server. All right team. So let's get to it All right team. So we are here on the desktop. I'm going to hit the window Well, we don't need the windows key We're just going to right click here on my face and we are going to go new folder and in new folder We are going to read. Well, we're going to rename this folder to html input in put elements ellie mints All right team. Now we got it. Well, we already got a folder with that name We're just going to say yes and now we got this empty folder here. So we're good We're going to double click this folder and there is a this isn't what I want. This is I'm going to take this out of here Actually and uh because this is the footage for this course I'm going to put this down here And then so this is the intro video and then this is the video I'm recording right now So inside this folder, we're just going to click open with code And we are going to double click to make this full screen And we've got this basic html document here and you guys you guys understand this You remember how to make this using the asterisk symbol. I'm sure so we're going to hit save And it's going to ask us for a name. We're just going to name this index And hit enter and I spelled it wrong. So we got to go over here We got to rename this and we just go index. All right team. So now we're going to do We're just going to make a basic form element And We'll the we'll we'll leave the action blank for now and we will go down here And we're just going to add a couple fields just like we did before input fields team Just regular little input fields and I don't like it when there's red here So what I'm going to do is I'm going to right click and I'm going to say format document and that looks a little better All right. So inside of our format, we're going to type input and now we have an input We're going to have a text type. We're going to give this a hold on team Move this back Control Z. Let's do this again input. There we go. And we're going to have a text type And we're going to give this a Value is it do we need a value team? We got text type. We need a we need a name That's what we need. We need name is going to be equal to we're going to call this username username And Down underneath that so we're going to hit alt shift and hit down to duplicate this and where it says text We're going to make this p a s s w r d and over here where it says name. We're just going to say P a s s w r d and actually we could do something like if we want to we could do We name these any things we want anything we want so we could say user password So now we've got a name input and a password input in every form needs a button so we could go input And we can give this a form of input And then we have to set the value of this input. So right inside of here We just go value and we're going to set that value to submit and actually This isn't supposed to be input. This is supposed to this is supposed to be submit Submit so now when we save we don't have our live reload here So we're just going to alt f4 and close out visual studio code and then we will right click and we will say Right click inside of this folder will say open with code and this will open in visual studio code And then we will get our live reload at the bottom of the screen So when that's set up, we'll just hit go live And it's going to open in another browser window for me because that's how it all gets down over here We'll bring that onto this screen. We'll hold the windows can hit right bring that off to the right And then we can just arrow through all these open windows and we're just going to select Visual studio code and then we do a control b and make that go away And now we have our our input up here now. We don't know what this this says. So, right? Let's give this um, let's give it a label. We'll say pat. Well, we'll say username And we'll add that right there and down here. We'll do the same thing So we'll just go down to this line hit control enter to make a line beneath it and we're going to say pass word pass W hardd man. It's getting late team. It's getting late. All right. So we'll save and so now we got a username and a password now if we because username And password and all these input fields that we're using they're all in line elements So they just they naturally just line up next to each other If we want to one atop another then we got to go about this in a whole different way We could use brakes so we could just go br tab And save and now we got this field underneath username Password we could do the same thing if we go br tab save and now Password but but look right because we don't have a br right there So we got to go br tab save and now it looks good Kinda because our buttons in the in a in a real janky place And so we go here. We're going to move this button right same thing b r tab save Now we can make these block level elements But we use css to do that and so right what i'm what i'm just showing you is that we don't have to go and use css for Everything when we need to build something we just start building team We go into css and we can refine it if we need to now we can go up here We can add another br by hitting alt shift And save and now we got a little space and our form looks fairly decent team. There's nothing wrong with this This is a this is a decent. It's a decent Good-looking form now that we've covered the basic elements. We got text input. We've got a password input And and so indeed and so here's the deal team. These are all these are all Well, they're all inputs obviously But they're these are all text inputs team and there's different There's different attributes that we can give each of these to make them do different things So like we gave this just a regular text attribute a type of text What we can do is we can go up here and like when we type a name It just shows up but in password It's blocked out so nobody can see it now This doesn't mean it's like super secure. It's encrypted or anything It just means that nobody can look at it the computer the browser just doesn't show this Because if somebody's standing over your shoulder, you don't want them to see your password, right? But you get this little dot right here the browser Uh, I think it took it away But sometimes you get this little symbol here at the end and it'll be like hey Do you want to show your password? You know what I'm saying team? So these are two of the input fields All right team so for us to move on and and really get the full experience here What we're going to have to do is we're going to have to set up a php server And I can't remember if we've done that already So we're going to do is we're just going to go over into our browser window And we're going to hit control t and we're going to type in xamp And our search result is going to bring up the x amp installer for patchy friends But what we're going to do is we're going to go Yeah, we'll just go here a patchy friends.org and on this main page We pick our operating system and what it's going to do is it's going to open this other window And I'm going to say hey, what do you want to do and in this case? We're going to say yo, we want to save this and we'll go save as and we'll just save it to Our download folder, so we'll save boom And it is running the security scan and then it's going to open up team And we are going to install xamp and what xamp is going to do is going to give us a full php server environment So we're going to say yes When it's done downloading To open it and if it just down if it just downloaded it probably went into your downloads folder So you're going to go into your downloads folder and says important because an active because an activated user Account control uac or your system some functions of xamp may not work It's just a window security thing right and so you go through here and we're going to install install everything So you're going to well not don't install everything team can install you can install my sequel We don't need file zilla. We don't need mercury or mailer. We don't need tom cat You can install pearl if you want maybe you want to learn the pearl programming language at some point Um, but let's let's walk through these so file zilla is just the ftp server But we're working locally so we don't need an ftp server and then of course we got a mail server And I have no idea what tom cat is team Uh php, that's why we're downloading this whole thing so we can use php In order to return us some data when we submit our form and then we're going to need uh php My admin that's going to give us an admin panel for php. We don't need web Eliza and we don't need fakes in mail team so you Hit next and it's just going to put this right on your c drive in the x amp folder now I already have this installed so i'm not going to continue from this point on i'm just going to close this out But when you continue That folder is going to end up on your c drive So what we can do is we can hit the um the windows key and we're going to hit I think it's windows Windows e to open up explore and if we go to our c drive, we will see this x amp folder And in the x amp folder you have this folder called ht docs But before we get to there and almost forgot team We're going to open up our x amp control just by double clicking that and you may get a windows security alert Just say okay, and you're going to go in here. You're going to make sure your apache server is started So it needs to be green and you're going to make sure your mysql server is started and it needs to be green Now we're not going to be using mysql server We're just going to be using the apache web server which is going to give us access to php So if that's green, we are good to go team And if you look over here, it's going to give us two ports It's going to give us a local host port 80 and a local host port 443 and if you guys can't see that I apologize. It's really tiny But just make sure you got your stuff set in green and then when you go back to your browser All you have to do is type in local host colon 80 And this is going to open up. Uh, oh, I messed up. What did I do wrong? So let's try this again local host colon 80 All right, and that opens up our local host now minds is already set up But I'm going to show you guys how to go in and set yours up to team So that's how you get to that local host and we can also use local host 443. I believe so we go 443 enter Oh object not found Let's see local host 443 the request that you are was not found on the server If you entered the ur manually, please check your spelling Try again. Oh it's because we have a dash instead of a colon So we'll go back put a colon there Enter and let's see bad request. Let's try this one more time Uh, your browser or proxy sent a request to this server cannot send a request the server cannot understand if you think this Is a server error. Please contact the web master. Oh boy team Uh, so we're going to stick to port 80 for now. The deal is is port Port 443 is the HTTP port. It's a secure port So we may we have to access that in a different kind of way, but right now we're going to stick to port 80 So what we're going to do Is once you have everything set up and you get your x amp folder and you got everything running You're going to go into this folder ht docs, which is where is it at ht ht ht ht There we go ht docs And in here, right? I already have these files because I moved them over. That's why you saw my php page when I ran local host But if we go back into our browser now, I'm just going to hit windows and type in edge And if we go to local host locl local Host and we go into port 80 We should get this is what we should get we should get nothing team So what we're going to do is we'll take this and we'll just put it We'll just minimize it for now And we can go back to our main Folder, which is right here and we're just going to copy both of these controls see And we'll go back into our ht docs folder and we're going to paste them here, right? And so I have this php folder. I'm going to get rid of this just to demonstrate how this is done And so we'll save And now when we bring up our local host We should see well, let's close these both out Now if you got if you got your index.html inside of the ht docs folder, that is a web server It's the same kind of thing that we've been using over here In our live server and we might sort of turn off our live server now because we aren't going to need it So we'll open up our web browser again, and I'm using edge right now So I'm just going to grab edge. We'll bring that over to the side And we're on local host. Let's just hit enter and it brings up that page now if we put some information in here Nothing's going to happen, right? It's just we hit submit and nothing goes down And that's because this this doesn't do anything like the action says to Well, I have post in here, but let's take this out All right team. So we've got we've got our action there. We'll hit save and we got to get rid of that semicolon I mean not the semicolon, but that quotation mark will hit save with control s go back over here refresh our page And we're going to retry and now we'll try this again Submit and see nothing happens team. So what we're going to do is we're going to write a basic php file That will return us some sort of data when we submit our form team So I will see you in the next video where we build our simple php Form team well not our simple php form, but our simple php application that will return us data when we we send our form