 Okay, so welcome back to the last lesson of the workshop, it's so many people today, so exciting, so brilliant. So what we're going to do today is the second part to JavaScript and of course deploying your website live on the internet. So there's some housekeeping words, no food or favorite drinks here, and Wi-Fi society is named up. Password is password, so if you're shy or for a while reason you don't want to raise up your hand, feel free to ask any questions through the last lesson. So again, for the fourth time, my name is Queeran, and I'm an open source advocate. I'm very interested right now I think. Then the student who is sitting in front of me is what in our talk will be helping out, helping us out today, and we also got another guest Josephine here who scores. They'll be helping out today, so there will be more hands-on activity today and more leeway for you all to do whatever you need to do. So just a quick recap of what we learned last week. So last week we talked about sessions, how it works, how we initiate a session, how we can assign session to a particular user, how we assign, how it is a super global variable by itself, and how it works eventually. And we also talked about how to store the system data through what we call a database, which is essentially a server that has the capability to read and write data on a table based format. So we talked about relational databases, and of course how we will look back at something like that. We've got index here, we've got index, and your particular columns, and our roles as your data set. And how PHP data objects work, actually this is just PDO, PHP page. So we talked about how we can use the PHP data objects to initiate connections to different kind of databases. So including today, we are going to connect L and L when we do outside the government. We are actually not going to connect to my SQL database, but we are going to connect to our favorite small company, Microsoft's SQL Server. So there will be some differences you will see later on. Of course, how we use preparations in PDO, and later on we run SQL to do this in this manner, which allows us to prevent SQL injections. And of course, we've got our standard EFL statement, logical statements in JavaScript itself, which looks synthetically similar to what we have in PHP. As for the dollar sign, we have a replaceable bar and a space there, as you can see. And if, and we don't have an else if in JavaScript, an else space if, right? So we also talked about anonymous function within JavaScript itself. How we can create anonymous functions without even naming a function itself. And we also briefly, and we went through how we can do form validation in JavaScript. How we can use event listener such as the document.braining. And of course, listen and attach a listener to form forms and listen for submit event. All right, so open up this bit.ly2ci, it's a capital I, I-E-Y-E-N code here. And you, you see the last week's code section. Open it up and let's just open it up here, right? So when you open up, you'll see a code box here. And we have our code anywhere account set up already, right? Everything is set up already, I think. Let's see if it actually works. Okay, so it actually works here. We don't need to spoil anything. So the previous code is actually down here, I think. Did I put every single thing? Was there anything missing? Did I miss all of that? Hold on. Okay, so I'm missing the app.js file. I'm just going to add in now. Okay, so, okay. I'm going to add in the JavaScript file for now. Table, table, table. I can see, oh, sorry. Okay, there we go. By the way, the Wi-Fi SSID is ninja. Password is password. No capital letters, just password. So under assets folder, we create another folder called JavaScript and we create the file name, app.js as well. So I'm just going to copy this part of code here first and put it right back in. So this is what we previously had for our assets. Our app.js file. There's a capital I, not an L. Okay, so some of you are looking forward to it. So anyway, create that file first and we'll briefly continue on from where we left off last week. So last week we talked about form validation and how it works, how event business works and all. So what we're going to do for the second part of JavaScript is we're going to learn JavaScript validation and Ajax and implement both of this into our existing blocking and registering system and see how it works. So previously we had this kind of data in our login HTML file, right? So if we go to login.html, we need to add that in first. What is login.html? There we go. So remember that, and you might have noticed that I actually that there was no cardboard because the cardboard is kind of the other end, right? So we won't be doing any cardboard right now. We're going to do that at the end. So let's include it into our login.html first. So go to login.html first and we're going to type in this thing, right? We're going to attach or include our JavaScript file into this login.html first. At the bottom of everything, below the bootstrap, absolutely at the bottom of everything, we included our assets, a JavaScript file. So what we're doing here is that we're loading the JavaScript file into our, you know, into our file itself, right? So right here, right, the screen would be able to do its execution at all. Yeah. So if we go back to add.js here, we see that we've got some sort of something here sent. Let's go to login.html first. So here, after we have added this thing here, can you see that we've added this here? Okay. So we have added this in here, right? Everyone is here, right? Everyone did this? All for this part, right? To your login.html file. Okay. So everyone hates our main status. Everyone is done already. So I'm going to move on to this f.js file. So right here, right here, we're actually attaching it to a non-assisted ID which doesn't exist at all. We're going to change this part a little. This is the form value that I talked about last week. So when we do like this form, space form equals $this. It's actually talking about, it's actually the event element itself. So what this would be, right? It would be essentially this thing here. It will be the form itself. So this is actually referencing towards, not referencing, but it's making a copy of the data of this object, the submit of the event object, right? So when we listen for an event, and then as an event that occurs, it will send an event object with all the origin and all that. So the origin and the source of everything is the form itself, right? So it's calling this. This is the origin. Does this sound confusing? It's okay, right? So this is the origin. So the origin is the form itself with all the data that it has submitted along with the event. So this would contain, this event object would contain the event data. So the event data itself will have all the values that they have submitted here. So if we go back to dongle.his.mail, we've got two inputs here. The username input, as you can see here, and the password input, right? We've got two inputs here. So in the form here, we will have these two data. So when we call to the form.data, right, we are re-serializing the data that we retrieve. So serializing is taking the data that was given to us and putting in the name, the key value for that. So remember how the way it works, right? So in p3 arrays, we've got a key and we've got a value. In JavaScript objects, it's similar. We've got a key and we've got a value. So right here, we've also got what we call an array with the key being the name and the value being the value being submitted and being inputted, right? Everyone, click on what form.serialize array will contain. So let me just type, but don't type this out again. So I'm going to remove this afterwards. So I mean, as for this part, I'm going to type in some data to how it will look like, right? So when we submit, using a parcel, right, we will essentially get an array of this. So form data will become like that. Right, it is something like that. Let me just double check the jQuery API. We look at a jQuery API itself. Oh, yeah. Okay, that's just different. So it's actually, so essentially your data will become like that. Right, so we will have an object. So remember curly braces in JavaScript is referencing to objects. It refers to objects. And within the object itself we call a name and we call a value. And the name would be username, right? Because down here, we put in name refers to username. So let's say I put in the username value that I key in would be w0, if you are sure. Something like that. Then it will give me the data like that. So that would be what form data will contain. Essentially an array of objects that was submitted through the form. Okay, cool. Everyone clear what form data will contain? Okay. I'll pick that as a yes, I think. Okay, then if you have any questions, just raise up your hand and ask. So this is how form data will look like. So let's get a clearer picture of us. Instead of attaching to an ID, let's try to attach this to a very generalized form itself. So let's just attach it to every single form that is available on the page. So something like that. So we've got form.subname and you'll call with this option. So let's alert something. So we've used alert before. So let's see what happens. Right now it says the screwing itself up already. Let's see if nothing dead is running. Okay, same. Okay, that's good. So when I submit this, I have to get this. You saw that? Literally just press the locking button and it will alert this up. Let's take our jobs before I see what happens. So we attach a listener to every single form we have. So let's look at the forms we have in... So logging itself, we've only got one form. Can you see this form here? So our form element, we've got action, logging.kd, method, pose. Then we've got the input here. We've got input here. We've got action tree inputs. So one is submit, the other is login. So... Yeah, this is the kind of data we'll be getting. All right. So this is our form. Let's go back to our JS here. So our JS, we went to... When we click on the locking button, it summits the form, right? When we click on the logging button, or when we hit enter, it will log in. It summits the form, and when the forms get submitted, the event listener receives an event. It saves all this data into a variable. Okay? It mirrors it into a variable, and then it alerts this thing called form submitted. Right? So that was what happened. Right? So then it comes out form submitted. Then it will continue with action, which is to actually send the post over, right? So when it sends the post over, it will go to the login.jp page, which is just what we actually had previously, right? So it's not changing anything. It's just alerting you when you press the submit. Nothing has been changed. Right? We have not modified the experience yet. We are still moving the data over to the other page. Right? So let's modify it further. So here we do some form dedication, right? We previously talked about form dedication of how it works. So we do a four-each loop, and then we loop through every single data. Then we verify the data, right? So let's try that here as well. So let's do a four-each loop as well here. So right now you still remember I just now typed out how the form data will look like, right? It's an array that contains a lot of objects, right? Three objects essentially, because we've got three inputs, which is the first, is the username, second, is the password, and third is the submit itself. Right? So let's loop through all these data. So if you look back to our first, our second section, our second workshop, so we talked about how PHP when we first did the login, we had a PHP login.php, right? Then we use a four-each loop. So it's very similar to what we did before, right? So it's very, very similar, just that right now we are doing it at the front end in JavaScript. So we are just validating the characters, number of characters and send them over to the front end. So let's see what we can do. This is how four-each should look like. The brain is not working in the morning, so pardon me for my brain not working. Oh, it's a oh, okay. Oh, it's a capital. Okay. A bit different from how we do it in PHP. So in PHP, we do a four-each something edge, right? So right here we are inserting another anonymous function and this anonymous function can accept a parameter. The parameter will be our data itself. So something like that. So within this loop itself, right, we would have this data over here which would map towards let's say it goes through the loop and the first one it hits is the user name. The data would be, so when we call to data.name, it would give us username. When we call to data.value, data.value, it would return us the value for the input. So let's take a look at how it would work. Right. This is we are validating the username data. So when we look at data.value, it will be the data we get from data.value data.value key. Right. So when we look at the data.value, it will be towards, it will get this value here and data.name is essentially the name that we get, right. Then we check, we check the characters, number of characters we have. Right. So how do we check number of characters we have on the string? It's through the dot line function. Smaller than operator, we check number of characters we have. So right here it is smaller than 3. So it's 1 or 2. 0, 1 or 2. So this three numbers or anything that's literally below 3 it can be negative, right. But it's not possible to have a negative here. Right. So let me let me refresh this page a little. Let's just see how it works first. So username is too short. Right. Then after that, after it says that username is too short, it will tell us that form submitted. Right. So when we click open again, it will tell us form submitted. And then we go to login.tp. But I'm still not modifying anything. We're just catching listeners and doing alerts. Right. So in our form issue, we call the normal function and supply data into this parameter called data. And we check whether the name, the input name is username. And then if it is, if it is username, we check the value. We want to check the length or length of the input that was given to us. Right. So I input something empty just now and of course that was given characters. Right. So it's of course shorter than three characters. So let's see what happens when I type something over. Something like that. What I do is it will tell me the username is too short. It will tell me that the form has been submitted. Like that. Right. So we pass the validation here. We pass the validation. Then we move on to form submitted learn. This is how we do our form validation. But you would have noticed that our form is still getting submitted even though the validation has failed. Right. So how can we prevent that from happening? How can we prevent our form from getting submitted when the validation has failed? So magically here in our submit listener and our function itself, it will pass us the parameter called an event object. So within the event object you will be able to prevent the event from happening. So we're going to be able to prevent the form submission form actually happening. So how are we going to do this? Well let's type some code first. So down here we supply the parameter called event. So we've got this thing called event already. So down here if we want to prevent the form from getting submitted, we call to a function that prevents the form from getting submitted. Which is called the event. Prevent default. This prevents the default behavior of the form. So the default behavior of the form is to submit data. So down here we want to prevent the form from submitting any data when the validation fails. So what do I mean by this? Let's take a look at how it will look like. Save the file, refresh the page and then we get this same login form and we press login. It tells how user name is full shot. Form submitted. And we see that we remain on the same page. We did not move to login.php. Previously when we submitted the form, no matter what happened, even though we had alert and all that, we still move on to alert.php login.php and the form still gets submitted. When we use the event.prevent default behavior, it prevents the form from having its normal behavior which is submitting the form. So down here calling to event.prevent default would prevent the normal form submission. So that's how we prevent the form from getting submitted when they fail validation. So let's say we pass the validation and what will happen? Of course the form will get submitted and we go to login.php immediately. So when we fill the validation there will be a full shot remain on the same page. You'll see this behavior happening right now. So magical isn't it? This is all happening on the JavaScript which is what which is literally the front end of the page itself. Nothing is happening on the server literally nothing is happening on the server. All this magic is all happening on the browser itself because it's JavaScript. Let's go through the code again. So first part we listen for the document that will be ready. Then we'll listen for a summit event from any form that is on the page itself. And when the event is heard by this event listener it will then accept an argument named as an event. And then this event will be used to do several things or to get data to call the functions or to set data and so forth. So here we call to this actual form itself and then we get when we encapsulate with the dollar sign and the bracket it's actually our selector. I previously mentioned about the query cycle which looks like that so it gets the element object. So here we got the element object of the form. Then from form itself we got the element of the form then we get the data out of it we get the serialized data out of it so we get the rate of objects with the key values of name followed by the name value followed by the input value then we do a forage loop through we loop through every single data that was passed in right then if the data if the data is the username then we check for the the length of the input if it's smaller than 3 we prevent the default input of a submission and we alert the user and tell them that username is too short. That is what is the magic happening down here in the app.k as well. So that was quite simple wasn't it that was really really simple but we did a lot of things we've learnt so many things just through validation itself but we want to do more than just that so we want to give even more immersive login experience and even more immersive and engaging refrigeration experience that allows us to stay on the same page so how do we do that so we've got this magical thing called ATX so in the early 20s we've got this small company named Microsoft they were the first to push out the standard of ATX request through iFrame so that was how we initially had this ATX technology it was pushed by this small company called Microsoft and it was pushed out onto the browser Internet Explorer and of course it got really popular most of the sites nowadays use a lot of ATX so let me do a very very quick demonstration of a website of a very small company that uses ATX if you go to google.com which is a very very small company that is not very well known and when you type something like that when you type in G you'll see that happen so we instantly get some search results here we get some search results here and then we type in O O G L E so what it's doing here is that it's listening as well there is an input listener that text for key for key press so when we when we take the key it will do a lookup how does this do the lookup the page doesn't move at all so it sends that ATX request to search for the data so in the background itself you don't see up from here but we've got ATX request so how do we know that there is an ATX request well I'm not going to lie to you or anything I'm going to literally show it to you how it looks so now here we've got our typical forms we've got our typical requests and when we type something let's say when I type something here look here look down here can you see this can you see it I suggest you all to move forward a bit so when I type in when I just click on that thing it really sends a search an empty search you can see down here it sends an empty search and then when I type K it sends another search and I've cut something it sends another search request then we get a lot of search here so all this is happening through what we call ATX so it's happening but we don't see it it keeps your interaction on the same page so literally you're on the all the same page itself we've not moved from any page we've not been redirected to let's say search.tsp something like that so this is a very prime example of how ATX works who doesn't know so we're going to use what this small company here do we're going to copy that but instead we're going to implement it on the login form and registration form instead so let's look at how we're going to copy Google so in jQuery we've got this API called the jQuery.axx and it supplies you can supply an optional an optional set of array data called settings I think it's yeah so down here we send an object method, post, url this data this and then we listen for it to be done this is what we call back but done is actually a callback thing that does an anonymous function and accepts the input of the data that was sent over right so it looks a bit confusing okay and of course it is so we're going to make it a lot easier for ourselves first through just sending our request to the login so we can supply url we can supply method we can supply data so it's literally the same as our form just that we are our login.html form just that we're putting it in the JavaScript format so how we're going to do this is we're going to type some code so down here we're going to move this event for moving this to the port so at any time even if the validation has passed we don't want the form to be submitted right we don't want the form to be submitted because we want the data to be sent through our Ajax call right so let's see what will happen then so down here after with with so called validated our data we're going to do an Ajax call so $.ajax followed by the parameters which is an object so let's make it a bit clearer so we've got far settings equals empty object and then we call this and then down here we're going to set up a callback to a anonymous function that accepts that accepts an argument or message and we open up the function with curly braces and also like that right looks just okay looks like better now so in settings itself we need to pass in 3 days the URL which we're going to submit our data to the method type which is supposedly post and of course our date our actual data itself so let's fetch this data from the form right so so do you see that our login.html our form here has an attribute remember that this action here is actually an attribute which we mentioned in our first action class is an attribute method is also an attribute so we need to fetch the attribute here from the form so it looks wrong this is so furlough so we've got this platform called stackworld which you can search for any kind of answers and you'll probably get ah, there we go okay, that looks wrong for right now so we're getting the method here and then after we want to we call our method attribute already here we fetch the attribute here then we want to get our what's next what is that? action we want to get our next action which is action right, so we call to our data here we've got our element here so we're going to call to we're going to serialize our data so you would have noticed that it's a little different here so serialize an array is getting an array whereas serialize itself is only returning an object right so there will be some difference when we serialize it into an array versus serializing it into a JSON object right, so down here we've set our settings our three main settings that we need method action and data and all of this is just taken directly from attributes method form attribute which you can see is down here our method form attribute here which is pose so down here is pose followed by our action which is login.php right, if you look to here we've got login.php followed by our data which is form.serialize which is an object that has been serialized from the inputs that we've given so let's see what was given to us when we press the submit button so this is one of the ways you can debug or you can use console.log as well so let's refresh our page a little I'm going to just briefly show you what happens so when you submit our form here we can see down here it's send a pose request to send a pose request to this request you are all here which comes it sends login.php did I do something about here action so this is not supposed to happen so when to send a request to login.php this is weird we want only a minute it's supposed to send to login.php but it doesn't want to send to login.php so it's method it's not action it's supplying the url for us for please for us to submit our data but I really need some sleep or something so yeah, so it's url so right now when it's changed to url we refresh this page a little and then we press the submit button and then we get our data out like that so we literally stay on the same page we didn't change the page at all the page didn't change to login.php the page didn't change to login.php at all but it's still sending a request to login.php so I don't think we need to stringify this let's see what happens when we don't stringify ok so our page itself on the login.php page itself it does the validation of it it checks whether the username is off-assisted then it tries to login so let's try to login with our valid data here see, now we get this in here, logged in as my username but we still stay on the same page we still stay on the same page so this is how we are able to do what Google do when we do our search data it stays on the same page and then it gets our data to send so this magical thing we have right here is what we call AIS I am going to copy this data over and put it up on the Google.form so I I am editing the data here ok, so how do we implement this same thing this thing to register.php as well how do we do this for register.php as well well if you go to register.html and it scrolls all the way to the bottom just edit the same screen then it will be the same for register.php so when we click register something like that I just submitted a blank user registration so we could do a user registration here and we stay on the same page right, you see that we just need to edit the script tab and then it references the same F40S because everything is off nothing here is being hard coded everything here takes the data from the HTML file itself right we didn't change much we didn't need to change or have a separate JavaScript file so it gets the data from our login or register from the HTML page it just maps it through our sectors and then it submits the data as per usual it submits the data as per usual it's literally the same thing as what we have done without JavaScript just that for now when we edit in JavaScript it's not redirected by not redirecting the users the user is not being redirected to any other it's not being redirected to login.php they stay on the exact same page, that's it that's the only thing we are adding in here and then it sends the request in the background to the agent called it was amazingly simple and fast there wasn't any major issue here and let's move on to our actual site this is the part where it gets a little tedious of to actually deploy it so what we are going to do here is that we are going to use we are going to revisit tp little and we are going to use what we call tp environment variables we are going to use the top code to github and of course we are going to do some environment configuration and hook up hook up github and azure so we are not going to buy and hooking up people but we are using webhooks on github and azure will hook up to the webhook that github has so it will isn't for any push event coming from github and when there is a push notification received from azure site it will then deploy the code that's what we meant by hooking up people alright so we are going to revisit tp again and use environment variables so why do we why do we want to use environment variables anyone know why no okay so so let's go to our topic of tp first as you can see here we've got our tp data object holds is local holds database is this username is root and the password is this but when we upload our code to github right so we are going to use our public repository so it's going to be public and we don't ever want to upload our password or credentials to the public right so no same man here or no same person in fact should be uploading passwords to the public and allowing the public to fill it so we want to make use of environment variables and since tp is tp is a scripting language it's going to fetch the environment variables and then it's going to be able fetch all of that data and put it in here so that we would be able to upload our code without any passwords right so no passwords will be uploaded and later on as those part we will be able to configure some environment variables so where will we be storing our so called passwords is that we are going to store these so called passwords in our azure deployment configuration which is kept private on azure right so I think I haven't said what is azure so azure is actually one of the pairs it's not tst but rather paah right so pairs is this so pairs is a platform as a service and we've got multiple other platforms as a service as well so well known platform as a service would be like Google Cloud Platform and we've got HeroCoup Cloud Platform as well and we've also got OpenShift, OpenShift Cloud Platform and finally Azure Cloud Platform so all this kind of cloud services they are actually a platform so pairs is essentially platform as a service right so that's what pairs represent so azure is a pairs and it can be interpreted as pairs as well because I find it okay anyway so it's a cloud platform so what is this cloud thing so it's not the cloud that we see when we wake up in the morning right so I don't think a lot of Singaporeans actually look up in the sky quite often right we usually look down at our phone and then we look at the floor we don't usually look up the sun or anything right so it's not that weather cloud that we see that we don't see it's actually just servers right so it's kind of thing of it, it's a code name for servers that is deployed and configured in a certain manner that allows horizontal scaling blah blah blah so I'm not going to go into too much of this marketing nonsense it's essentially just servers right so the cloud is just servers so we're not throwing our code into the blue sky we are uploading our code to servers and we're going to do this through Git and Azure simple isn't it right so it's really really simple and we're not going to even use FTP or SFTP or what so nonsense we're going to use Git then you might be questioning what the heck right how can we do that through just simple well we're going to start changing our files right so since the SQL server that we're using from Azure is the SQL is the MS SQL we're going to use the same PTO or PTP data object but we're going to change from MySQL all right so we're going to use both to SQL server and the server being the database host database being the database name followed by the database user and the database password so let's this part is a bit brainless so we can just copy it copy it okay so where is the okay so down here back at the login we're going to change our login first so down here we're just going to do this right so down here we're getting an environment we're getting an environment variable right so actually an environment variable is also a super global array just like post just like get just like request just like session all of these are super global variables but the way we're going to assess this environment super global variable is through this function called get environment right so remember to delete this old MySQL okay try to log in right now it's not going to work on code anywhere so if we go here that's not going to work anymore right it's just not going to work because it's different already right so we do have some sort of an issue which is that our server here is running MySQL whereas the server that we're going to deploy to is running Android right so how do we know that the code works when we deploy it right so we want to make sure that the code works before we deploy it right so usually we're going to use usually people will use what we call the CI continuous integration and we're going to do CIC which is a continuous deployment right so when we come to CI we do what we call testing so this test that we do are automated right we do unit testing through Travis CI through Jenkins through GitLab CI through various ways which we can test code right so if you visit TravisCI.org TravisCI.org you'll see this guy who is wearing a hoodie and who has great color beard or something actually it's showing up my code already so fast okay so the scene is manual oh it's so irritating so it shows by oh so much crap here oh okay anyway so if you visit TravisCI okay let me open a private info so when you visit TravisCI you'll get you'll see this test and deploy with confidence right blah blah blah blah blah but unfortunately we're not going to cover unit testing we're not going to cover testing in this session but this is I'm just mentioning this so that you'll know it exists so typically a CI CD workflow we have is before the code deploy gets deployed to the server or to the cloud if you want to play that game it goes through unit testing which tests if the code works before it gets deployed into production so we've got to always make sure that our code works before we deploy to the production so unfortunately since we're not going to cover that it will not work here we only know if it works when it gets deployed to Azure right so right here we get four environment variables dbhost, dbname dbuser, and dbpart and down here in dollar sign dp our variable here new pvd data object xpnode server, server equals dbhost which is here and the database is here our user is here our password is here in the environment variables so right here we have not specified any environment variables we have not specified any environment variables but what we can do is that we can we can use this function called boot boot empire to specify our variable I mean our super global environment variable but as I said earlier we're going to only specify the environment variables on Azure right yeah so this variables they don't exist there's no values right now so they would only exist when we deploy it to Azure simple as that understood okay so we have got four blank variables that are more consistent and we're going to do this for register.php as well copy this code I'm going to paste it into our ninja turtle teenager anyway so go down here and you see pasting this bunch of code and then I'm going to go to register.php I'm going to do the same here right so this is we do the same for register.php as well so now we can introduce our environment variables into our environment so we're going to do we're going to do our code uploading to github right so how do we code to github this is a part where it gets a little interesting and a bit difficult as well so go to github.com have you all logged in our register or whatsoever if you have not logged in please register and so what is this github thing right so github is a proprietary service is a proprietary service that is a proprietary github service that supports open source software development right so github essentially makes use of the gith technology so gith dates back to when Linus Taubros I don't even know how to pronounce his name when he started the Linus project so when he started off with the Linus project when Linus started off with the Linus project he started coding and things like that and he collaborated his code with people SGM we've got a version numbering checkout systems in the past but he felt that it was a mess when he did last year collaboration with people all around the world on the Linus project it was a mess and this needed to be fixed so he introduced he started he started off the key he started the github as you can see here it's a version control system that allows people to collaborate their code with version numbering and it is able to handle even different kind of code comments so let's say if the code collapses with another code so let's say right now there's this set of code and then person T uploads another set of code and it's different set of code right what will happen is that they will not get committed it will essentially require a deep merge it will require some merging and some manual changing right so this prevents like problems with actual code base right so it's a really really need to to allow last year collaboration so today we're going to learn very very simple github commands so we've learned them already so we've learned HTML we've learned CSS we've learned JavaScript we've learned PHP we've learned SQL and now we're going to learn a little bit on github so the first command you need to know is githab so the term really just githab the second is gith commit right so githab what github does is it adds the file in the deep repository and then it adds it into a tracker right it gets tracked and then it gets add to the potential commits that can be done right so after that when we do a gith commit we're creating a commit file that means we're going to commit this set of files that we've added in and then we've got deep push which is essentially a way for code the commit to be pushed to the server so when we want to add commit push it's going to upload the server to github right so other than github there's also other open source tools out there such as deep lab so deep lab is one of the another platform for which people can upload and manage the repository right right so this one is open source and not github right but github is more popular so we're going to use we're not going to be hipsters and we're going to use something more popular right so if you're registered you can do your own github from now you will have a name there and you will have a username right so I hope you can commit it anyway if everyone registered your github account or registered your github account yes or maybe okay good so now that everyone of you have registered your github account we're going to authorize code anywhere to use github so if you're going to code anywhere put it here put a code dash and then you go to my account you'll see that there's everyone at the network do you see this so you'll see that there's a different kind of connections connected account you can do so you can connect to you can connect to github you can connect to github you can connect to google, facebook, digital, motion, one drive everyone here so let me show you what I need to talk press this small little icon over here press this and press account dashboard and then open up this dashboard here and then click on the account and click on to connect I'm disconnected okay I'm going to disconnect first and then I'm going to connect so when I connect at time it will connect me and that's it everyone connected has everyone connected that github account good that was so easy wasn't it there's a few clicks actually for those who have not authorized code anywhere so if you have not authorized code anywhere you have to go to a screen that will ask you to authorize code anywhere and you just click on here and on so afterwards you will see that under the github profile here is um github so I think it's under settings and then if you go to github account under settings you will see that okay you see that we've got this thing here as we've added in so you have to code anywhere SSHT with the fingerprint and all yeah so the fingerprint is somewhat like a hash of the key that has been generated right so codeanimere.com would then generate like a key SSHT and then it will then update that key to your github profile so now that your github profile has that key you can then deploy the code from codeanimere.com to github so let's go back here and we see that with link file now with SSHT inside we're going to open up terminal and wait for terminal here so let's see if I've got gith in here if we save gith we've got gith installed already so everyone open up the terminal into this here as everyone open up terminal good so now that you've opened up terminal we're going to type some commands in right so we're going to check whether we are github repo by typing gith status this is protected with more so small so when we type in gith status it will tell us not a gith repo or any of the parent director so we're not github a gith repo we're not created a gith repo where's my mouse can you see I see my mouse so we're not a gith repo or anything we're not created a gith repo or anything so what we're going to do now is we're going to we're going to go github.com we're going to do it in a more you know way which is more friendly ok so right here now we are in github.com I'm going to make this page bigger so do you want to go to github.com so press this thing it will say create new right here so click press that thing the plus sign and press new repository right so repository is where you pull up your code and everything right so press new repository click on the there and it's going to say repository right so you can always put up a random name so here it's recommended supreme octo carnival I'm going to just put it up so I don't know what that means but I'm just going to put it up supreme octo carnival everyone has put up their repo name already so select your own as yourself and then create a public repository so everyone of you here have a free account so what this free account allows you to do is to allow you to upload your code into the public so my account is not a free account so I can actually I'm going to do a public one right so the license so there are different kind of licenses you can choose it's got a restricted restrictive lab and it's got a complete lab so the most left and the most liberal license is the MIT license which allows anyone to make use of your code right the more restricted a restricted lab license to be something like GTL so the new GTL 3 is a version 3 license which is a restricted lab license requires the user who uses your code to share your code if they make changes or if they call and also to retain the license itself so what this means is that if let's say I'm a private company and you put up your code on the public and use a GTL 3 license I can't use a code I could but I'll be I have to share the code if I make any modifications but if I'm using if you are using an MIT license and I'm a proprietary company I can take all the code I can take all the code and then I can modify it to whatever I need and I can sell it right so different license brands different brands so I'm not a lawyer or anything and I would spend a lot but you can you can consult a lawyer so I'm going to put up I'm going to put up an MIT license so you can put up no license as well so what no license essentially means you copyrighted your work right so without any license by default your work is copyrighted and if anyone copies a code you can sue them so that's how licensing engine works so we've got we're typing our key repo name we're selecting topic we've selected MIT license and we create repo repository and we're going to do some stuff here so we've got an actual repo here alright so now I want to pay attention for a moment we're going to look at this down here we're going to create new files find new file and code down this repository so down here select so by default they will say it's 20 ps I want all of you to use clone with SSH so click on this copy copy this and then code down so we have copy all of you copy this down here, other clone here initially you will have use page 20 ps but then click on the use page and copy this go to your code everyone copy it so now I'm assuming that everyone has created down repository on GitHub and yeah so now go here we're going to type G we're going to paste while the copy just now control shift D no paste so I want this essentially there's something like that alright I'm going to bring some water taste it with your hand if you have any problems alright so yeah you don't understand so this is magical key clone thing that we have right here so this is clone thing alright so clone is a way of replicating something right so in the past we've also replicated ships right we've clone ships for so we've done that in real life right now here we're going to do it on the virtual space we're going to do it on the internet we're going to clone the key repository that we had so this here this is a pretty good idea because okay so it's going to clone it's going to create a directory then you're going to move you will have to move all your code into that directory right so how are we going to do that you're going to clone it first right so key the enter key and then you do the most scientific and most technologically advanced way of copying things from key so it's going to use an empty directory because it's free of no kind of code so it's going to copy over and then this SSH key into the RSA links of known holes right so this is also a dirty stuff we don't need to know that then when we cut LSKL when we cut LSKL we're going to show a list of repository stuff here a list of directory stuff here just index login.html login.html blah blah blah blah and we got this supreme also playable down here right we created a new folder called the supreme of this name is so weird I'm going to give it the test for all of us already test for HTML first and I'm going to cut that memory so down here we've got we've got our full folder assets and the deep folder so right now we're going to move all our code into that directory and how we're going to do that so there's this magical command in the list called empty which is to move files so we're going to use that magical command to move files because it's into that directory right now let's see okay let's see let me just read the hell okay it's going to move everything okay so we're doing that R we just need the wall cut so I think we can we can remove that R and hit like that okay so we're going to get this error in more than an error so when you hit LS we're going to have one single so I'm going to show you that let me clear up so right now we're copying all our files and moving it over to this folder called supreme of no carnival replace supreme of no carnival we have given to your kids so not everything we've done but now we're moving all of our files over into this kit report right here anyone okay okay I'm going to go around and if you need anything that's the list I've got here I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I