Transcripts
1. Introduction to 'Understanding Web Development': Hello and welcome to my first Skillshare class, understanding web development. I'm Chris. I'm a self-taught web developer and content creator who has worked for startups and small businesses as a freelancer since 2015. Working remotely, I've been able to use this skill to work from locations all around the world and for a variety of clients. I'm a big believer in the power of learning to code and I'm excited to share with you what I believe are the major things you need to know to understand how the web works and how you can develop for it. In this class we'll discuss some of the major concepts behind developing for the web including: One getting you up to speed with how the web works, two learning the difference between front-end and back-end development, and three showing you how to deploy your own website to the Internet. We'll also go over some of the tools and languages necessary for web development including HTML, CSS, and JavaScript, PHP, and MySQL, and frameworks such as Bootstrap, and Jquery. My goal for this class is that by the end, you will have a broad understanding of web development and become clear of how you want to use this important skill of web development in your professional career or for personal use. So if you're ready to get started click on the next video and I'll see you on the inside.
2. What to expect from the course: So in this class, I'm going to provide an overview of web development and give you a taste of developing HTML, CSS, JavaScript, PHP, and MySQL, as well as helping you deploy your website to the Internet. At the end of the class, you should be able to understand the difference between front-end and back-end, the purpose of HTML, CSS, and JavaScript, what a framework is and why you should use one, the purpose of PHP and MySQL, the difference between a domain name and hosting, and finally, how to publish your website to the Internet. It is my belief that web development is best learned by doing, and so this class is going to be very practical rather than purely theoretical. You will learn what HTML, CSS, JavaScript, and PHP are by actually using them. The goal at the end of this class is for you to have a good understanding of the web and the web development process, after which, you'll be in a better position to choose which area of web development you would like to learn more about. So without further ado, let's begin the first lesson of understanding web development.
3. How you can edit any page on the web: To begin this course, I want to show you something cool that you may not have realized. This will help to demonstrate the difference between front end and back end in a real life setting before we get into the theory. For this demo, I'm using a browser called Google Chrome. It's the one I use as a consumer and regularly as a web developer as well. But you might use Firefox, which I've got open here as well, and Safari. You can do similar things, pretty much the same thing, just with slightly different tools in either of these browsers. I'll show you how to do that in just a sec. But let's go back to Chrome and let's go to Google.com. Now you can do this little experiment in any website at all. But I just thought we'd go if a website that we all know, and that's Google.com. Now a little known secret that you may not already know is that you can edit virtually any webpage right within your browser. All you got to do in Chrome, is right-click on any element. I'm going to right click on this button here and click Inspect. I did that a little fast. Right-click, click Inspect. What this opens up on the side here is the Google Chrome Developer Tools. If we go into Firefox and go do the same thing, Google Chrome. I just Google.com. Go to Google on Safari as well. On Firefox, we can do the exact same thing. We can inspect element, and it brings up a similar console down here. On Safari, you have to go to Preferences and enable Developer Tools. You go down to click on Advanced, go down to Show Develop menu in Menu bar. Then from here, I'm not sure what you click. I think show Web Inspector and you can see similar things. It's a similar thing in all web browsers or the major web browsers. But as I said before, I like to use Chrome. What you can do here is this is all the HTML and this is all the CSS. If we go into console, we can interact directly with the page using JavaScript. But let's not overwhelm you right now if you're just getting started. All I want to show you is that this is completely editable. You can see here this value. I'll click off it and then I'll click in again. Just if I double-click that value, I can now edit that value. You see here it says Google search here, it says Google search there. I can change that to whatever I want. Maybe I say my search, and wallah, you can change the text on that. If you wanted to change the styling, which is done with CSS, I can go down to here with Element style, and I can type in color, and I can scroll through all these different colors. I can literally color it whatever I want. Let's use chocolate. Just because that sounds fun. I can even delete elements. I'm going to click on this and press the Delete key. Boom, it's gone. But before you get really excited and think, "Wow, I'm changing the homepage of Google," how is this going to affect everyone else who uses Google? Click the Reload button and you'll see that Google comes out exactly as it was beforehand. That's because we're just editing the front end. When you press reload or go back to Google, it's sending another request to the server and hits the backend. Google uses whatever complex logic they have on the backend to determine what shows up here. Anything you change in here is just in your browser and not actually on Google. But this, as you'll see at the end of the course, is super powerful. To work on your own websites, you can go in and check anything on the front end, modify it live basically, and then you can figure out how to do that in your code editor or whatever. The reason why I wanted to show you that straight up is because I think this is a practical way of physically demonstrating the way the Web works or rather how the frontend works because you can interact with, I just pressed option Command I on Mac. If you're running Mac and you're using Chrome to open up Developer Tools, you can interact with any webpage on the internet, any the front end assets, the HTML, the CSS, the JavaScript, which we'll get into later. It doesn't show you the backend unfortunately because that is all private, but we'll get into why the backend is private and how we work with the backend in this course as well. What I'm going to do in the next video is dive right into the theory, which is a bit heavy, which is why I wanted to do this video first. Then we're going to get into some actual code. I hope that was a cool little demo, and let's now talk theory in the next lesson.
4. Front-end vs Back-end: Probably the most important concept to understanding web development, is the idea between front-end and back-end. To explain this, I want to use a diagram from Felix Thea. I'm going to go to felixthea.com/frontend-vs- backend. At the bottom of this article, you can find the diagram. What we saw in the first video, was me interacting with what's called the frontend. As you can see, the frontend code is always written in HTML, CSS, and JavaScript. The frontend code is basically what comes to giving your browser to create what you see and interact with in your browser. The reason why the code on the frontend is always HTML, CSS, and JavaScript, is because we all use similar web browsers like Chrome, Safari and Firefox. International standards had to be developed so that developers all agreed on which technologies would make up the websites we see and interact with. The frontend, however, is just the tip of the iceberg as the backend can be infinitely more complex. The role of the backend is simply to generate the frontend, but in a much more intelligent way. Let's return to our example in the first video. What happens when we click "Reload" after editing the page? The changes disappear, right? Well, of course, this makes sense. Google is not going to let us change their website, but what is actually happening when we click that reload button? The answer is that we're creating a new request to the server. When we make that request, the backend performs any number of simple or complex calculations and then sends to the browser HTML, CSS, and JavaScript. These three scripts are then interpreted by your browser to generate the website that you see and interact with. In the Google example, the backend might calculate Number 1, which country you are accessing the website from. Number 2, whether you are logged in or logged out. Whatever calculations Google may perform on the backend, is completely private. The backend code never makes it to your browser, and therefore, there's no way of viewing it. Unlike the frontend, a website's backend can be generated or created using any programming languages, or technologies. Your browser always requires HTML, CSS, and JavaScript, but it doesn't really care how it gets there. It just cares that the code on the frontend is readable. That being said, there are a few popular choices that power most of the web. These are PHP, Ruby, Python, Java, C#, and C++. Let's return to the diagram. We've talked about the frontend and the backend, but there is one other point of interaction here, and that is the database. The database is where data is stored. Using this example in the diagram, a user might click on a button to access a photo gallery. The request is then sent to the backend, which then queries the database and then the database will return the photo information to the backend. Then the backend will determine what to send to the browser. If everything makes sense right now, great, but if not, keep in mind that you will start to understand better once you start to work directly with the backend and frontend, and once we get into some code, but to finish off this section, I just wanted to share one last example that is quite common in web development, and it's a process called authentication. Now, authentication is something that you probably come across all the time. It's just a fancy word for logging in somebody and logging out someone from a website or an app. If a user is authenticated, it just means that they have been able to identify themselves and login to the site. Authentication always involves or always should involve the backend, as user information should be always saved privately and it should interact with the database. Remember, everything on the backend, including the database, is not visible to the user. Only what is delivered to the frontend can be viewed and interacted with. In the case of authentication, the user Number 1, types in their username and password, and then hits "Enter." Number 2, the information is then sent to the backend, which queries the database to see if one, the username exists in a database and two, whether the password matches what is stored for that user. Number 3, if both conditions match, the backend decides that the user should be granted access and in collaboration with the frontend declares the user as logged in. Do you see now how the frontend and the backend interact? Let's face it, I could throw so much more theory at you, but web development is best learned by doing. Let's jump into some code in the next video. Again, remember that you do not need to have everything super clear to jump into the next section. This is all theory that will make so much more sense when we actually get into some code. Just re-watch this video if you need to, but know that once we get through this course, the concepts that we talked about in this lesson will become clearer. Let's jump into some HTML in the next video.
5. HTML: Let's dive right into some HTML. For this we're going to need, one, a code editor. If you're using Windows, you can just open Notepad and you can realistically use Notepad. In Mac, I wouldn't necessarily recommend using text edit, so I would recommend downloading a free code editor. The one I'm using is called Atom. You can find it just by going to atom.io and download it. It's really, as you can see, pretty lean and nice to work with. I've got my browser open of course. We're going to need a web browser to see our actual project. What you're going to need, as well, is a project folder which I've set up right here. What you're going to do first, is go to this page to get us a little bit of a template, a beginning point for a basic project. You can type this into Google, I'm sure it'll come up or I can insert the link somewhere. You just scroll down here and you can copy paste this. I'm going to copy that, head over to this file and paste it. The reason why we don't have the nice coloring, like it has over here for the different parts, is because our code editor here, Atom doesn't know what type of file this is. It's always a good idea to save our project straight away anyway. Let's go to File, click "Save As", and inside our project directory, we're going to name it. You can name it whatever you want, just as long as it has.HTML on the end. You could name it with a different extension like TXT, but then your browser and your code editor won't know that it's HTML. For a homepage of a website, it's usually index.php and that's for a few reasons which we might go into later. But for now, let's just call it index.html. I'm just going to close that. Suddenly, you have coloring because Atom knows that it's HTML, and suddenly you've got your project here as well. Once we add more files, this becomes important because we can go into the other files, click on them, and edit them. Just general navigation. What we're going to do now that we have a HTML file, is view it. There's a few ways to do it. The simplest way is just to right-click on it and click open with. Chrome is the default application on my computer for opening HTML, so I can just click on it and bam, it comes up. Now, you might be thinking, well, we've just got a white screen. How do you know it's coming up successfully Chris? How I know actually is, up here. Up here it says the HTML5 Herald, which is what we've got in this title tag up here, the HTML5 Herald. If we change this, let's just change this to my HTML project and hit "Save". I'm just using Command S on a Mac, but you can go save like this, or whatever shortcut it is. Then we click over to our browser, we click "Reload" or Command R, and we can see that the title of the page is now changed. We could do a two-hour series on HTML in this course, but I just want to give you guys an overview. There's a lot of information here, but the main things you need to know, is head and body. In the head section, you can't necessarily see on the page what happens in head, but it has a few important tags that go in here. You can link to external files here. This one doesn't exist yet, it's just in the template. There's meta information here which is important for SEO. There's the title which we already interacted with, and there's other things you can put in here as well. But the body tag is where you'll put stuff that'll show up in the actual body of your HTML document of your web page. A few basic elements we can put in our body to start with is a div. Which is basically just a block, and it just gives us a way of organizing our code. You can put two divs in. By the way, the convention always stays the same with HTML. You do a less than sign and then the name of the element with no space, then a greater than sign,and then you put the content within it, and at the end you do the exact same thing except you put a slash in front of the element name. As you can see, we've got two divs here. But if I click save, we're not going to see anything because these divs are just for structuring basically. We won't see anything unless we define styles on these divs or we put some content in them. What I'm going to do is put in, what should I do? A heading tag. Most web pages start with a heading tag, and there's a few heading tags we can do. It ranges from H1, H2, H3, H4, all the way down to H6, maybe even longer. I think H6 might be the longest one. But H1 is a heading that is supposed to be the top-level heading. Usually, you only have one H1 in a webpage and let's just call this page title. Then to close that tag, like we mentioned, same thing as what we did to open it, we just put a slash in front of that. I'm going to click "Save", do the same process, come over here, reload the page and boom, you've got a page title. What we're going to do here, in this div, is put a p tag, and p tag just means paragraph. It's when you put a bit of text in. I'm going to put, this is pretty bad but, blah, blah, blah, press "Save". We've got blah, blah, blah. There's nothing really special about p tags until you put them together, and then it gives you division of paragraphs. This is a basic thing you can do to have a heading, paragraphs, maybe another heading in there for a subsection where you do H2, H2, and say subsection. Voila. Just to drive home the difference, because right now these divs don't really do anything, is I'm going to apply a style. We're getting a little bit into CSS now, but don't be warned, don't be afraid. What we're going to do here is give our element an attribute. How we do this is we find the last character of the element name, press space, and the attribute we're going to give it is style. We're going to type in style, equals open double quotes and close double quotes. My code editor gives me the closing double quotes already because it knows what I'm trying to do. Let's give this a border, so I'm going to type in border, one px, solid black. Put in a semicolon to say that's the end of the rule, click "Save", and you'll see that the box now has a border which makes it actually visible. What we can do here, is copy this style tag, put it here, press "Save", and then you can see the second div. Divs are important for nesting, we can make these divs smaller, we can put them side by side, and that allows us to affect the structure of our page. As I said, we could spend hours on HTML, and there's so many more elements that you could learn, but this is an overview course. I've just given you a little bit of a teaser. You can dive deep into HTML through another course, or maybe I can create one for you if you like. But this should give you some indication about what HTML does for you. It's basically the content of your webpage and how it's structured. In the next video, we're going to go over CSS, which we've done a little bit of styling here. But it's already time for some CSS, so we're going to build on top of what we've done here with some styling.
6. CSS: All right, so in this lesson on CSS, I'm going to start us off right where we left off in the last video. What we've got here is our HTML file, and we've got the result of our HTML file in our browser. Now, one thing I want to draw your attention to over here is this link to an external style sheet. This is actually a tag that doesn't have a closing tag because it doesn't have any content. It just has attributes. What I mean by that is you don't need to go like this to close it because there's nothing in between, it is just a link to an external style sheet. The first attribute here is rel equals stylesheet. That just tells that we're linking to a style sheet basically, and href is just the location of the stylesheet. First, it's everything before the styles.css is a folder path so we're going to need to create a folder called CSS in this directory. Then we're going to need to create a file called styles.css. This is just an extra query parameter that talks about the version. I actually have never needed to use that before, so let's just get rid of it for simplicity. All right, so like I said, we need to go into our project directory, we need to create a new folder called CSS. As you can see, everything's coming up here so it can easily be navigated from our code editor. I'm going to go into that folder. Actually, I don't create the new file here. I go back into the code editor and what I can do is create a new file in the code editor. Before we write any CSS, I'm going to save it with the proper extension so that our code editor and our browser knows exactly what kind of file this is. As we defined in our link tag there, I think it was styles.css, so you have to call it a dot CSS. We can always change this to whatever we want. We don't have it to be styles. We just have to update the link in HTML document, but it always has to end in dot CSS. So now we've got our dot CSS file. Yes, as we can see, this should now be linked to this HTML file because we've got this link tag and that address is CSS. So it goes into the CSS folder. Actually, I've named it with capitals when perhaps shouldn't have. Now it's goes to CSS, then it goes to styles.css, which we've got there. Now, I can already see an opportunity for creating a CSS class in our document. Where that opportunity comes is right here. I've got two divs and I'm copying and pasting code. This is a good lesson to learn for anyone doing web development. Anytime you're copying and pasting code a lot, there is probably a much better way to do it. In this case, instead of defining particular styles on each of these divs, we can define a class name for both of these divs and then define the styles that are attributed to those class names in CSS. Now, just like in HTML, there is so much we can do with CSS and it could be a two hour course on its own. So I'm going to give you guys just a little taste of CSS in this video. But what I see here is the big opportunity for us to use CSS to create a class. Now to create a class, what we have to do is start with a dot. You just go into your CSS file and press dot. Then we can name a class. I'm just going to call it box. Very simple name, but we don't need anything else. Now that defines our class basically, but we need to give it styles, otherwise it's not going to do anything. We open up a curly bracket [inaudible] and M is already generated a closing curly bracket for me. Then I'm going to press enter. What we can do is we can go back to here where we have this style defined. Grab that, put it in here. Now any div or any element for that matter where it can have a border, anytime we put this class on it, it'll have a border that's one pixel wide, solid and black. Let's do that now. We're going to remove this whole thing and instead of style, we're going to have class. Remember when we put in the class, same convention as before, with an equal sign and two double quotes, but we don't actually put the dot in. We've defined class here. In CSS, we would define the dot to make sure that everyone knows that it is a class. But here we just type in box. What we can do is copy that and replace that with box. Now you might think, we didn't save that many characters. But once you start to generate heaps of styles, like maybe you want to put a min-height in here and all this stuff. We don't want to have to copy and paste any of these changes, is just a very much better organized system to have classes. These all inherit the same styles that we defined over here. If I give this a really obvious one like 500 will be super obvious. Now you'll see all the divs with the class name box, which we could call boxes, is going to be a minimum height of 500. I'm going to reload and bam, now everything with a class box is going to be 500. There's a few other ways you can target elements in this as well. If you want to target every element, you just type in the name of the element p. This is going to create a style on every p element. I'm just going to go color. These styling rules, you won't know them all straight away, you just learn them over time. Don't like, oh, how do you change the text color? How do you change this? Literally just Google it. It's just a memory game for a lot of these things. Put in a space there, and let's do color blue. Now you can see every paragraph tag is now going to have this color blue. What we could have done here is just going div and every div would have had that so that's going to target every div. But if we want to have some divs that doesn't have the styles and some divs that don't. It's better to be specific and put a class name in. Now the other one we have is an ID and that's defined with a hash. An ID should only be given to one element. We'll have a really specific name like box1. What should we do here? Let's give it a background color of black. Let's just try. It's not going to be the most beautiful website, but you get the message. Now, what we have to do here is give one of these boxes, the ID. That's just a simple matter of ID equals box1. That's right. Box1 without the hash because we've already given it its attribute name. Go in here and as black. Now, obviously we've got another problem now, which is the text color is black also, so you can't see it. If we're going to have a black background, goes without saying that we're going to need some contrast in the text so we can change color to white. Now at the risk of going into something that's a little bit more complicated, more mobile responsiveness is very important in today's day and age of web development. The way you can define styles based on the screen size is by using media tags. Now I'm jumping a few steps ahead here because we have hardly even just scratched the surface with CSS, but I just wanted to give you for when you reach that section of, how do I make my website responsive? It's through media tags. You can have, at media screen. Then you define. Again, I'm not going to spend a lot of time on this. I'm just showing you an example, max-width, 500 pixels. Then we will open up the curly brackets and then we need to put another thing in here. The other thing with CSS is the more specific the rule is, the more it'll overrule another rule. Say for instance, we've got up here, were not very specific here we're just saying all p's are blue. If I'm being more specific and saying that max-width 500 of the screen, I can put in another rule. When the screen is below 500 pixels in width, this rule will overrule this rule up here. I'm going to make it red instead. I'm going to reload the page and you can't see anything different. But if I go and resize the window, look at that. Suddenly, at 500, the text changes to red. That's not that practical of an application, but you can understand the concept, at least that media queries allow you to change the styling of your web page based on how big the screen is. All right, so hopefully that explains CSS a little bit. Again, a lot of depth you can go into in CSS. We don't have much time to cover all the different things you can do with CSS. Hopefully that was a good overview. In the next video, we're going to talk about the final different script or a piece of code that you want to have on your front end, and that is JavaScript. I'm looking forward to seeing you in the next video.
7. Javascript: All right, so in this video we're going to talk about JavaScript. We're going to jump right where we left off just like we did in the last video. What our HTML document has here that it had before for CSS, right here it had a link tag to CSS which defined where to put our CSS file. Right here we can see a script tag in our body section that gives us a path to put our JavaScript. I'm going to follow what the template says here and I'm going to go to my project directory which is here. I'm going to do a new folder, call it js, which by the way, this is a standard convention to put your HTML files in the root. This is called the root of the directory. Then put your CSS files in a CSS folder and put your JavaScript files in a JavaScript folder. I'm going to go back to here to generate a new file. Click New File. I'm going a bit faster this time because we've already gone over this, so hopefully that's fine with you guys. What I'm going to do here is, Save As and I'm going to go into JavaScript. I forgot actually what they called it. They called it scripts dot js. I'm going to go back here, Save As, go into js, copy across that. It doesn't, copy and paste, so I have to type it in. It was just scripts dot js. Cool. Now everyone knows, the browser knows, the Code Editor knows that, that is a JavaScript file. JavaScript files end in dot js. Just to be clear, we don't have to follow these paths, I could change any of this, but it just has to match up to where the file is stored. It's just a link to the file wherever it is. I'm just following the convention here because it is pretty stock standard convention. Now, before we actually write some JavaScript, it's important to know what JavaScript actually is. JavaScript is a programming language. JavaScript is the interactive front end programming language. What I mean by that is it's delivered with the front end. Anytime that you interact with a page, you click on something and something opens up. That is JavaScript working for you, unless of course, it reloads the page, in which case that's probably sending a request to the server which is spitting out the HTML, CSS and JavaScript all over again. I am just trying to think of what's a JavaScript heavy thing we could look at. Google Sheets, for example and Gmail and all of that, they're real-time apps. All of the interaction done here is JavaScript because as you can see, it's all real time. If I click on this and this, and click on that and that hides and that shows. I click on that, this opens. It defines how you interact with a web page. As you can see, as I'm doing all of this, the web-page isn't reloading, it's all JavaScript. What does that mean for our project? It means that we can manipulate some of these things here or set off other functions. One of the most basic ones we can do is a console log. A console log is great for spitting out variables or anything else that you need to check when you're doing JavaScript development. I'm just going to put out a console dot log and say Hello world. You probably won't understand the purpose behind the console log right now, but when it comes to debugging later, it's really important. I'm going to put my browser over there, open up developer tools and what I'm going to do is because we've got it, I'm going to just put it to the bottom so that we can see everything. What you can do is you can go over the console here and reload. It shows up with Hello world. But I know that's not really practical. But say for instance, you wanted to check whether a function was firing or something, you could put hello console log in there. Then you can start to do programming things like define a variable. You would say var x, call x, Hello world. Then instead of explicitly logging Hello world, you could log x and you get the exact same thing. When I'm debugging, I like to say, for instance, if I was trying to find the value of x, I would type in something like, x as a string. If I put these quote marks on either side of it, that means that I'm just putting out whatever I've written there. Then a comma allows you to put another variable or piece of string in there. A string is just text as you'll find out. Then so I can see x is Hello world. Now, another thing you can do, which we can actually see happening in our browser is an alert. This is one of the most basic things you can do in JavaScript as well. I'll reload the page and you get an alert saying, hello world. Every time you reload the page, it will show up again. Now, let's actually use it to interact with this page because honestly what we're doing over here, just defining a variable and then putting it out, it's not really interacting with our web page. What we could do is, and I encourage you to do this as well, just head to Google and ask Google how to do things. This is actually a really important skill as a developer. Developers don't remember how to do everything and they often forget, sometimes I had to do something. There's plenty of documentation online and stuff. You're not supposed to remember absolutely everything. If you ever forget how to do something or you just want to learn how to do something straight away. If you type in a good question into Google, you'll get a good answer and you will know how to do it. Let's just say, how to hide and element with JavaScript. You can type in js for sure. I'm going to load the page. JavaScript, show hide element. Let's have a look at this one. This website is a Stack Overflow website. If you ever have an issue, you can go see what other people's issues have been and see how they've solved it. If you have a similar issue, it gives you ideas about how to solve your particular problem. What we can do here is, I'm going to copy this part here. Actually I'm going to copy this. I'm going to go back to our project here. I'm going to go into our scripts and let's explain what we've got here. But first of all, actually before we explain, I'm going to modify this. I'm going to save that and I'm going to press reload. Now what has happened here? JavaScript is what's called an object oriented language. What that means is we can target nested elements by putting in dots between them. Again, don't get overwhelmed by this, I'm just trying to explain what's going on here. It's basically, we start with the document, which is our web page right here. We've got a dot and this method is get element by ID, which just finds our element based on an ID. Remember we set up an ID here for this div, ID box one. What we need to do is put in a string, which remember, a string is just text in here and we target box one. Now we're in this element and within this element we can target style. We're in style now so we need another thing and that is, within style we can target an attribute called display. Then we can set it to none using an equal sign. Another important thing to know in programming, I know I'm throwing a lot of stuff here as I'm thinking of it, that is a single equal is assignment. If you were doing a comparison, for example, if let's say x, I know we don't have these variable setup yet, but if x equals one, you would do two equals. This is more like what you would think of with equals. Equals in programming languages like JavaScript is assignments. We're just saying, assign this part to this part. As you can see, it's set the style property of whatever has the ID of box one to none. What we can do is put this to block, which is another possible value and it shows up again. That gives us the opportunity to edit things based on logic. Right now it's just hiding it, which it really doesn't need to. But what we could do is put in a conditional, which would be, say for instance, if something was the case, hide the box. Without getting into a lot of detail here, let's just put in a statement that is definitely not true. If one is greater than two, display none. Obviously one is not greater than two, so it won't do that. Is one less than two? Yes, it is. Don't display it. Now I know this is a primitive example, but we can't get into a full rundown of JavaScript in this video. But the important thing to know here is that we've got our HTML document here. It is linked to a style sheet, which is where our CSS is, which defines our styles. It is also linked to our JavaScript where we can define programmatic front end behavior. We could have, for example, if somebody clicks this, this happens. If a box is a certain size, this other box shouldn't show up. Stuff like that. Anything you can really think of in terms of what appears on the front end or what the user is interacting with or what you've seen on other websites. Just do what we've done on Google. I know I used some of my experience to figure out what part of the web page to copy. If you did a little bit more digging and this is something that you will learn over time, is how to use Google as a developer. You can see here they're doing it as well. Document, get element by ID, assigning that to a variable, and then switching that over. But yeah. Basically, you can do an infinite amount of things with JavaScript. To be honest, using a framework like jQuery, which we're going to go into in the next video, is really powerful and helps you to really simplify what you do with JavaScript in terms of manipulating HTML. In the next video, I want to show you jQuery, which is a popular JavaScript framework. I also want to show you Bootstrap, which is a popular CSS framework. Once we put in these frameworks, which are going to do a lot of the heavy lifting for us and make things a lot easier, you'll start to see that we can develop faster and easier and a lot of developers actually develop this way. It's important for you to know that these frameworks exist and how to get started with them. I am looking forward to seeing you in the next video on frameworks.
8. Frameworks: Welcome back. In this video, we're going to talk about frameworks, what frameworks, and how they help us develop for the web. Upwork have a good article on frameworks. I'm sure if you search for this on Google, you'll probably find it, otherwise, here's the direct URL. What I like about this article is it shares the core features of a web application framework and also shares some common examples of frameworks that real web developers actually using the core features of a web application framework, libraries, APIs, Scaffolding, Ajax, Caching, Security, and Compilers. Depending on where you are in your learn to code journey, some of these might not make any sense, maybe all of them might not make any sense and that's fine. The best way to think of a framework is it really is a framework. It's a bunch of code that's already set up for you to develop on. It takes care of the heavy lifting in certain areas so that you can focus on the fully customizable parts of your code. Technically everything is customizable, but the framework is set up so that you don't have to do common functionality things over and over again. We talked about authentication, for example, in an earlier video. That's something that's quite common in a lot of different web applications and websites. It makes sense that, that becomes part of the framework and then other things which will help you develop faster. There is an extra learning curve with learning a framework because you have to learn to develop in that framework. But it usually saves you a lot of time and a lot of headaches and especially on the front end, using a CSS framework and a JavaScript framework, I think is a very good idea. I'm about to show you two frameworks that I use and that are very popular. But before we dive into these front-end frameworks, I wanted to talk about these backend frameworks. If you've done any study into Python, you've probably heard of Django, which is, I think the most popular framework for Python, it's definitely a very popular one. If you've ever looked at Ruby for web development, you've probably heard of Ruby on Rails, but there's other frameworks you can use like Sinatra and for PHP, there's a bunch of frameworks as well. Code ignited I've used before, and I know that Ravel is very popular. What I want to do is show you two frameworks that I use most often. We're going to download them into our project and we're going to start using them right away because as usual, the best way to learn a concept is to go in and do it. The first one I want to show you is called a Bootstrap. If we type in Bootstrap CSS into Google, we will come up with Bootstrap, which is a CSS framework. Bootstrap is really powerful for creating responsive websites. But also it provides a bunch of styles already in there to create components. First of all, the responsive stuff, as you can see here, we've div got and we worked with div in the lesson on HTML and CSS. But instead of building our own classes, we can just attach a class straightaway of column medium 1. How Bootstrap works is that as a 12 column system. If I was to put six there, that would mean it's half the width of the page and if I was to put three there, that's going to be a quarter of the width of the page. You can start to, here some other examples. This is going to take up eight columns, this division, and this one is going to take up four columns. That helps you to build these fluid responsive containers and by doing that in a column way. But also what Bootstrap does is it gives you components, you can come down here and see any number of different components that it has. If you wanted to make a progress bar that looked exactly like this, you can do it with Bootstrap, you just need to download Bootstrap, link it to your project, and then you can build a structure like this with a few classes to tell HTML what class to go after in Bootstrap and then, boom, you've got a progress bar that looks like this. As I always say, you will start to understand more about how this works as we actually use it. But there's one other framework I want to introduce before we get stuck into our project, and that's jQuery. JQuery is a JavaScript framework. I don't know, it just makes doing JavaScript a lot more easy and intuitive, at least for me it does. What we can do with jQuery is we can manipulate the DOM using jQuery. For those of you don't know what the DOM is, its stands for Document Object Model. It just means your structure of your page that you've defined here with HTML. We can use the classes that we used in CSS. You saw before how we defined an ID with a hash and we define a class by a dot. You can use those selectors in jQuery to find an element targeted and then change an attribute on it like, it's HTML. That is very powerful and you'll see in just a sec, how are we going to use it. In the next video, because this one's gotten a little long, I'm going to show you these frameworks. In the next video, I'm going to show you a live demo of using these frameworks. I think you'll start to understand how they really save us time and a lot more intuitive to use. This video is getting a little bit long, so I'm going to break it up in the next video. We're going to get on with the demo.
9. Bootstrap: In the last video we talked about frameworks and I introduced two frameworks that I commonly use, which were Bootstrap and jQuery. In this video, I want to talk about Bootstrap specifically. We're going to download Bootstrap and we're actually going to start playing with it. If you go to the homepage of Bootstrap, which I believe is getbootstrap.com, you can click the button "Download Bootstrap", and we can just download Bootstrap by clicking on this button here. I'm going to find my project directory and I'm going to click "Save". Going back to my finder window, I'm going to open up this because this is a zip file. I'm going to double-click on it, it's going to extract. I can throw away the zip file. If we look inside the folder, we can see a similar structure to what we already have. We don't necessarily have funds, but they've organized their CSS and JavaScript in the exact same way that we have. The thing that I didn't necessarily mention was that Bootstrap also has JavaScript as well, but for now we just want to use their CSS file. Go into CSS, and right here, bootstrap.css is the file we're looking for. I'm just going to click drag that to move it over to the CSS folder. I don't know why it's showing up like that. But if we go backwards, we can now delete the rest of the Bootstrap files. If we go into our code editor, we now have Bootstrap in them. We can actually click on it and look at it. It's a long file and it's filled with a bunch of different styles, a bunch of different rules and this is what makes Bootstrap work. But the good news is you don't have to know all of this stuff. You just need to know how to use it. I'm going to close that. There's another step we need to do before we can start using it in our project, and that's to link to that style sheet. Remember how we linked up here to our styles.css? Well, we need to do that again. What I'm going to do is I'm going to copy that by pressing Command C, new line Command V, or the equivalent on a Windows computer and all the details are going to be the same as set the filename is different, so I'll put in here bootstrap.css I want you to look closely as we refresh the page because there's going to be some changes straightaway. If I reload, you can see that the style of our page has already changed. In this case, we know that Bootstrap is now working. How do we use Bootstrap? Well, right here is the documentation. Documentation is just the technical term for you can think of it like a manual or just all the information you need to know to be able to use a framework or a piece of software. In here we can define the columns like we mentioned earlier, but what we can do here, which I think will be a little bit more fun, is copy across some component. You can see how quickly we can get a stylized website appearing on our screen. I'm going to expand the window so I can see the menu bar here and I'm going to go down to page header. I'm going to collapse this again. Where is it? Here it is. I'm going to delete all of our divs we have so far, so selecting all of that and deleting it. We've got a basically a blank document. What I want to do is start building our document again, but using Bootstrap elements. To get this header, we can copy this and put it straight in. Now, copy and pasting sometimes doesn't work, so you should tab your content across to make it look just as nice as on here. If I reload the page, we've got a header and we can add any number of components here. I can go to this thing which they call a jumbotron. Sounds pretty cool. I'll copy that code and then I will put it after our page header div. I will click "Save", and then it comes up. Now the padding is a bit off and that's because we haven't used another feature of bootstrap, which is a container. What I need to do is wrap all of this which we just created into a container. This is all, of course, a personal choice. It's up to you how you style your website. But all we need to do is get a div and give it a class of container. I'm going to indent that so it's obvious that it's within this parent div, and then I'm going to close the div, closing tag. Now I want you to watch closely. I'm going to open up the page and watch as we refresh the page. We've now put it in a container, which looking at it on a big screen, it just gives it more padding on the sides, and then when we look at it on a smaller screen, the padding shrinks, and then if we were to move it like this, it's responsive, which depending on how you write your code, is a huge time-saver. Now we've got this lovely container. We've got this lovely page header which we can edit any of this by the way, we can go back in here and in this H1 tag, we can say, "Our awesome website." What would be the subtext for our awesome website, "The best website ever." Then say, instead of saying hello world, "Hello and welcome." Then in our p tag, "This is the greatest website you will ever see." Bold claim on. You've got all of this changed now. You can change the text on the button as well by going into here, I'm going to expand out and between the a tags, which is just a way of defining a link, you can put whatever text you want here. Instead of learn more, we can say, "Get started, " instead, save that. Move that over to the side, refresh and suddenly you can see how Bootstrap's working for us. Now if we were to code that ourselves, it would be a lot longer because we will have to define all these styles ourselves. Just to demonstrate what Bootstrap is doing for us, if we were to take these classes off, what would our website look like? I'm going to get rid of that class and and refresh the page. Yeah, it still looks good, but there's no border there, there's no padding. For a more dramatic effect, I might get rid of this class here on jumbotron. Going back, there's no big padding, there's no background color. Bootstrap is adding all of that. I hope you can start to see how bootstrap is making this process of developing responsive websites that look pretty cool. I think this is pretty good design, and they make it so much more easier. I encourage you to download Bootstrap and just start playing with it. Copy and paste some of these different bits of code in and if you ever like, say for instance, wanted to build a form and have it look nice, you could search for form and then you can come down to forms, and you can put in nice buttons, have these different tabs, all kinds of stuff, and you get all of these components styled right out of the box with Bootstrap. I think I have made my point clear now of just how much a framework like Bootstrap gives you so much and saves you so much time if you want to create an app and style it. In the next video, we're going to talk about the other framework that I really love, and that is jQuery.
10. Jquery: In the last video, we use a popular CSS framework called Bootstrap to streamline how we create our webpages and we were able to create components like this with a small amount of code and it's all about how we structure our document and also putting different classes on our elements to inherit some of these styles directly from Bootstrap. In this video, we're going to go over jQuery very briefly by the way. There's a lot you can do with jQuery. But jQuery, if we go to their website which is jQuery.com is a JavaScript library, it's technically not a framework. It's a library where you can write less code and do a lot with it. If we scroll down on the homepage, we can take a brief look at the three main features of jQuery. One being DOM Traversal and Manipulation. That sounds fancy but basically what DOM stands for is document object model and essentially what a document object model is is just what we've got here. We've got different elements and it's structured in a certain way. This DIV for example is nested within this DIV and we've got this heading tag within the DIV. Basically you can think of our HTML structure as our document object model. What jQuery allows us to do is manipulate our elements. We can target a particular element using a jQuery selector and then we can call a method to change something. In this case, we will look at this button with the class continue and then we would change the HTML to next step, dot-dot-dot. The second feature that jQuery is really good for is event handling. Event handling, basically an event is anything where something happens on the page so I could click on this button. That is an event, even me moving my mouse around can be an event, me right-clicking, me scrolling to a certain position on the page, these are all me interacting with the web page and that is considered an event. Anytime an event happens, what we can do is program with jQuery for something else to happen. In this example which we are going to create a similar example in our project is if something gets clicked on, so in this case a button within button container. If it gets clicked, then this hidden box will show. The third thing we can do with jQuery is Ajax. Ajax is a bit of more of an advanced concept but it's a way that we can call a local script on the server. We can basically access the backend and grab data without having to reload the page and use back-end code. Don't worry too much about Ajax yet but it is very powerful once you start to get further into jQuery. On jQuery's website, I want you to click the ''Download button,'' and on the download page, we'll find a link to the compressed production jQuery. First of all let's just click on it. It looks like gibberish because it has been what's called minified to make it a smaller file. But if we wanted to look at how it really looks, we can click on the next file and then we can see a whole bunch of JavaScript with comments in there describing what's going on. You're not expected to understand any of this by the way. Whoops, I need to go back to that. We can go back here and we can just download this one and don't worry about the version number ever, this will constantly go up every time. Just right-click on it and click ''Save Link As.'' This we'll be a JavaScript file and you just need to go to your project directory and go to your JavaScript directory which is where you store all your JavaScript for your project and click ''Save.'' You can see it here already showing up. You can look at it in your code editor but it will not make any sense because it is minified, which by the way is demonstrated by this dot min dot JS. If we downloaded this one for example, if I open up this one in a new tab, it doesn't have that dot min on it. You can see the whole uncompressed file. But for our purposes we don't really need to look at the code so we can just have it minified. Now, just like we did with CSS, there's one more thing we need to do to include it in our project and that's to reference it with this script tag. Just like we've done beforehand, I'm going to copy that. I'm going to put it above because I want my jQuery to load before I use it using my own scripts and I'm just going to right-click on here and rename this so I can copy and paste the name, save me a bit of time. I'll close this and go back here and it's in the same photo, we just need to change the file name. Now, this is going to be included and if we reload the page, we're not going to notice anything yet because we haven't actually used any jQuery. What I'm going to do is go into scripts, delete this because that element box 1, we don't even have it in our project anymore so this pretty much does nothing. I'm going to backspace that and what I'm going to do is start with something that's really common in jQuery and don't worry, I'm going to explain what this is in just a moment. But I'm going to type in dollar sign document dot ready. Open brackets function, open and close brackets, space. Curly brackets, go to the end, put in a semicolon and inside here, I'm going to put console dot log jQuery loaded and then end that with a semicolon. We're going to refresh the page on this side after clicking ''Save.'' How do we know if it's working? Because essentially we've just done a console log. It's not actually changing anything on the page. But if you remember the developer tools that we worked with right at the beginning of our video, we can open them. I'm on a Mac so I press option Command I on Chrome and we can now see the console open. Probably I had my console opened before. It'll probably come up with this and then you click ''Console'' and you can start to see your JavaScript console. Right now we've got an error and the error is dollar sign is not defined. What have we done wrong here? Let me go back. I mentioned that we should have put this first but we didn't. So I'm going to cut and paste that and put it where it's supposed to go above. This is important rather concept to understand is the order of your files. If I start using dollar sign which this whole thing is a jQuery selector and a jQuery method, if I start to use that before I've even loaded jQuery, so like it was before where it was underneath. Where it was underneath. This is loading before even the jQuery is loading, so it's of course it's got an error. So make sure that's above. Reload the page, and it says jQuery loaded. Now we know that jQuery is working, but what is this? Basically, the first part of this is the selector, and the second part is the method. In the document object model, we are able to target the whole document by using a variable called document. The convention with jQuery selectors always goes, $, open brackets, and then whatever it is you want to select. Then you would close your brackets, put a dot to define your method. In this case, we've got a ready method, which basically, it makes this function to trigger whenever this is ready. So we've selected document, and then when it's ready, we're going to launch this function. Again, I'm probably throwing you under the bus here, but we'll see in just a second how this is powerful. We don't just want to do a console log out, that just helps us to determine whether jQuery is working or not. What we can do, is instead of doing that console log, actually start to handle an event on the page and actually do something that makes up a bit more sense. What I'm going to do is select one of our objects on our page using a jQuery selector, and what's great about jQuery selectors, is we can target elements the same way we would target with styles.css, with CSS, sorry, in general. So we can target elements of a certain ID by using hash, and we can target elements of a certain class by using the dot. So what I'm going to do, we actually don't have these anymore, so it's pretty pointless, I might as well just delete them. We don't have those anymore, but what we do have is these different elements. What I can do here is target this particular div by its class. Like I showed you before, we can do dot to say it is a class, and then we can say page header. I think that's what it was. Page-header, yeah, that's correct. Now we've selected all of the elements with the class page header. In this case there's only one, so we can go into here, and we can manipulate the HTML just like the example we saw in jQuery's website. Whenever we're typing in just raw text, we need to have single quotes or double quotes, so what I'm going to do here is just put in hello, and put a semicolon on the end to end that function, and suddenly, the entirety of my page header has been replaced with hello, which isn't that great. I think probably a better idea to leave it. But that just goes to show you how number 1, I'll put this up again. How number 1, we can select an element and then we can manipulate it. This is very powerful. We can put all kinds of logic in here, like we would using JavaScript. But where jQuery really helps is by having these selectors and these methods to easily manipulate. Now, I might be talking over your head right now, but I just want to show you exactly what jQuery is great for. What I want to do is a common handle, a common event, which is a click. So what I'm going to do to make this a little bit easier, is I'm going to come down to this button, which is the A tag here, and what I'm going to do is given an ID, so we can target it very specifically. I'm going to call it, Get Started button. So this is got a class now. Now what I'm going to do, is I'm going to set up an event handler, and how you do that is you first target the element. So I'm going to, actually, there's a few ways of doing it, but I'll show you this way. I'm going to grab Get Started button. I put a hash in because it's an ID. I'm going to select the Get Started button. I'm going to do the on method, and then the first thing I'm going to say is Click, because that's the event that we want to handle. Then the second part will be the function. So what's going to happen when the click actually gets triggered? At the end I'm going to put a semicolon because we are using JavaScript. Right here, I can do any number of things I want, but let's just do something silly just for the sake of it, and hide the page header. We can grab that class, and then we can use another jQuery selector to put.page-header.hide. Hide is a method that you can use. It's a jQuery method, and it's just very easy. I just select it, and then I can put.hide and then I'll hide it. Let's see if it works. I'm going to refresh our project, click on the Get Started button, and we've hidden the page header. Now, I know that's not really very practical, so what I'm going to do is provide a better example. That is, I'm going to put some hidden text below here. Let's start with a p tag, pointing the p, and we'll put in hidden. Well, let's say this is the answer to your problem. Now, if we just save that, and refresh the page, it will show up. It'll show up by default, which is what you'd probably expected. But if we want it to be hidden at first, what we will do is we can add an attribute to this p tag, style equals, double quotes, and inside we can do a display none. Save that, refresh the page, and there is no paragraph there. One other thing I want to do is give this an ID so I can target it specifically, and I'm going to call this hidden text. Now it's got an ID, and it's got a style that's telling it to not display when the page first loads. What I can do is I can target it here, by using its ID, which is hidden-text. It's an ID, so I'll use hash. Now I've selected the hidden text, and what I'll do is I'll use a method, a very simple one in jQuery, which is.show. So save that page, refresh. You wouldn't see anything yet, but what happens when we click on the button? The hidden texts that we set to display as none in our HTML has now been manipulated by using jQuery. This is a very basic example of what we can do with jQuery. There are so many things we can do with jQuery. I just want you to think of all the different ways you could manipulate a webpage or handle events. So we could do something that if I click this heading, something happens or if I scroll something happens. Or we could figure out, we could do math problems and all kinds of things in here and we can basically do an infinite number of things using jQuery to target elements and then manipulate them. Then we can also combine that with event handlers like we've done here, and we can basically manipulate the DOM, manipulate our document based on how the person interacts with the webpage. Now, of course, you can do this with just JavaScript, you don't need jQuery. But these selectors and these methods make it so much easier to the point where I can confidently go in here and target another element if we just give this an ID of jumbotron, and we can just do #jumbotron.htmlblah. Let's just double check, that's all correct, jumbotron, blah. Suddenly, it just turns into blah. If I had to do this in JavaScript, maybe I'd be looking it up, but with jQuery, it just makes it so easy and intuitive, and it saves me a lot of headaches and I really enjoy working with it. Given its popularity, I'd say a lot of people enjoy working with it as well. In the next video, we're going to move on from the front-end and start looking at the back-end. Hopefully, we're not overwhelming you so far. Feel free to ask questions and I'll help you out as best as I can, and hopefully we are learning some good things so far. I'll see you on the next video.
11. Setting up a basic server: We now have our basic website that we built with HTML, CSS, and JavaScript. But front-end web development can be just the tip of the iceberg when it comes to the overall web development process, and the back-end, as we discussed earlier, can be built in any number of programming languages with any number of server configurations, it can get infinitely more complex. But in today's video, and in the next videos coming up, I want to talk about the back-end in the simplest way. Also with the back-end, it can be a hard thing to understand without actually seeing it, actually interacting with it, and actually implementing in your project. That's what we're going to do straight away. We're going to first of all get a server then we're going to start to write some PHP code. PHP is very common back-end programming language for the web. It's what a lot of websites use, and it's going to make it easy for us to deploy our website later as well, having PHP as our code base. What you need for back-end web development, if you look at our website that we've just built on the front end here. We just had to have a folder, and we can literally just open the file like we did before hand and just read it directly off the file system into our browser. See here we can see that it's just reading the file. The difference between this and back-end development is that we can't just read it off the final file system. When we're doing back-end programming, we need what's called a server. Now for PHP, a common stack, as they call it, is the lamp stack, which we type in, lamp stack is Linux. Linux which is the operating system, Apache, which is the HTTP server, MySQL and other alternatives, and PHP and other alternatives. For us, we're just going to use MySQL and PHP. It doesn't really matter that we're using Apache. You don't really need to know why that is. But we aren't necessarily using Linux. I have a computer, my computer is Mac OS X. You might be developing on Windows, depending on whether you're developing on Windows or you're developing on Mac or even Linux, you need a different server. For Mac, I'm just going to expand this. There is a server called MAMP that you can install and MAMP is just lamp with the L replaced with M for Mac. If you are a Windows user, you can type in WAMP, I actually have never used WAMP because I've always use MAMP. But it's basically the equivalent of MAMP but for Windows. Going over to MAMP, I'm going to download MAMP in here. I'll just find the latest version. Download. I will just put that in my download directory. All right, after I long wait MAMP is now downloaded and we just need to install it. I'm just going to click through the prompts. Agree, it's going to take one giga of space, I didn't realize that it was so big. Typing in your password to install software. All right, our installation was successful, there's no special fields there anything we have to know how to do when we're installing that, we just click continue basically on everything, we close down these websites now. Once MAMP is installed, we can open it up, and it shows up like this. Before we can start the server though, we have got to change some settings. Go into the web server here. What I want you to do is click this icon to go into our project and click that. Now I've set it to my project directory and I'm going to click okay. Now what I'm going to do is click start service. You can see now that the, sorry it moved. But you can see now that the MySQL server is now green, which means it's on, and the Apache server is green, which means it's now on. It'll open up the MAMP start page. What you can do to access your website is click my website. We've got our website again. We can access it through the file system like this, or we can access it through our new server, which is localhost colon 8888. Why this is important, why we need to have a server is because we're soon going to be transforming our code into back-end code. Another thing we can do within MAMP start page is going to tools and click PHP my admin. Now that we're in PHP my admin, we can see what databases we have installed. PHP my admin is just basically a control panel to work with databases. So there's one here just called MySQL. But we will be creating a new database very soon. I think I'm going to leave it there for this video because the next one we're going to be doing some PHP. But now that you've got your server, you are ready to start doing some back-end programming. I will see you in the next video.
12. PHP: In the last video, we set up MAMP because I'm on a Mac computer. If you're on a Windows, you would have set up WAMP hopefully, and if you're on Linux, you can set up a Linux equivalent, and now we have a server. The reason why this comes up when we go to localhost 8888 is because we directed, if you remember, in our Preferences, in our Document Root, we set our project to document root. We can set a new project up and we can direct the server to there and it'll show up there, but I thought it would be easier just to start with what we've already created. Now the first thing we can do to start using PHP and turning our purely front-end project into something that uses the back-end, is we can go into here and instead of this being.html, we can call it.php. How I do that? I'll close that, and I'll go here, and I'll right-click Rename index.PHP and this will tell the server that it's a PHP file. I'll reload the page and nothing changes. So you're like Chris, why did we do that? Well, something did change and if we open this up or attempt to open this up just from the file system, it'll just display the contents of the page. It won't display HTML because you can only just pull in HTML files here. What you need is a sever and why we need to do.PHP is because we're going to start putting some PHP code right in here. Instead of h1, what I want to do is instead write some PHP code. Now the good thing about PHP is you can just insert it anywhere on a PHP document that otherwise looks like HTML. Right now we've got pure HTML, even though it's got.PHP there. What we can do to insert some PHP is opening bracket, question mark PHP and then I'm going to close it straight away so we don't forget, you've got a question mark again and a closing tag. Now what I can do here, which is not going to be that amazing, is use the function print to say, "Hello World." Needs a closing. So if I move that back over here, you'll see the this first part of the h1 tag is now "Hello World" because I've put in some PHP programming. There's no way that your browser can figure this out unless it was to run a server, because if I just type in this, it'll come up directly as we've typed it. It just sees it as text. So that's why we need a server that can interpret PHP and process that back-end. This is not really relevant, we could've just typed in "Hello World" here and gotten the same results. What can we do with PHP? Well, we can use it as a programming language. What I can do up here is I can define some variables. I will just get some PHP opening and closing tags and I will say, in PHP by the way you define variables with a $ sign and then the name of the variables. We will call this heading, and I will call this, what did I call the website before? Let me just go back a step, "Our awesome website". I'll just put all of that back and then the heading will now be semicolon to end "My awesome website". Then so down here, instead of putting out a string, which is just the explicit text, we can do print heading. "My awesome website". So you see here we've set a variable and now we're putting it in here. Why is this important? Well, we'll now doing back-end programming so we can type in stuff like an if statement. If I don't know, we haven't really set up many variables here, but if one is less than two, let's change the heading to "My not-so awesome website." One is less than two. So the heading changes, if it was set to, if one is greater than two, the heading wouldn't change. Hopefully that demonstrates how we can put some logic in and start to do some actual programming and one thing I want to make clear is well this back-end code is all server side. What that means is it happens before it gets to your browser. If we actually look at the page source here, we won't see any of the logic, we will literally see the output. In "My not-so awesome website", we wouldn't see this code here, because what happens on the back-end side is this all gets figured out, this whole thing gets figured out and then it sends through just a straight up HTML file to the front-end. We only see the results in our browser of what happened on the back-end, we don't see the actual back-end code. Whereas if we were writing in JavaScript, we could go down to our Developer tools, look in Sources we can see all the scripts here. I can look at that, I can look in here, I can see the scripts, I can see all the programming happening here, and if I was to change something with JavaScript, say for instance, remember we can inspect different elements of the page. If we were able to find this, there we go, we can find this element, that's display none. If we click on Get Started, suddenly that changes live in front of us and we can see that code over here in our scripts photo. It's all front-end, is the point I'm making. But anything programming wise that we do in PHP, it's a back-end language, so it's not going to come through to the front-end. Everything's gets calculated server side, so on this server, and then the only thing that makes it to your browser is the HTML, CSS, and JavaScript. Hopefully, me actually putting some code into our projects has made it a bit clearer to you and in the next video, we're going to see how developing a PHP is actually useful beyond just creating a heading variable and then putting it in a heading tag. I'll see you in the next one.
13. MySQL: In the last video, we got started with PHP, but we didn't do anything that amazing or anything we really couldn't have done using what we can do on the front end. What we can use the back end for, and it's what's really important to use the back end for, is interaction with a database. Before we write some more PHP code, I want to talk a little bit about databases and actually create a database with a few tables. I'm going to make this full width. What I'm going to do is open up PHP admin. We can do that by going to your MAMP start page or WAMP start page. Go to Tools and then go to phpMyAdmin. If you're using a different server other than MAMP, you might have to look up how to access phpMyAdmin, but it should be there. Now in phpMyAdmin, what we can do is do any number of database functions as an administrator. We can click "New" here and create a new database. I'm just going to call this database test_db. I'll Create, and suddenly we got a database. Now a database is a place where you store your data, and it can be complex, how you structure it. The hardest thing with databases is how to design it and how to get it all designed perfectly so that the tables relate to each other in the most efficient way possible. But we're just covering the basics here, and so what you can think of databases as is just selections or groups of tables. A common object type in apps and websites is a user. I'm going to start there and create a table for users. I'm going to call this users. Going to go with the default number of columns. The first field should be a unique identifier, so I'm just going to call it ID. I'm just going to keep it on INT, which means integer. I'm going to click on this to make it unsigned, which means it won't be negative. I'm going to make it the primary index, and click "Okay" on this. I'm going to click here, the auto increments, so instead of defining the ID every time, every new one, every new record of this that we create, there'll be a new ID automatically. I'm just going to put in some basic fields, username, and then we choose the type text. Let's say password, TEXT, and email, TEXT. You can also put in some rules around how long you want to accept these fields. We don't really need that right now, so we can just click "Save" or we can click "Preview SQL". Why I wanted to mention preview SQL is, this right here is the SQL code that the PHP, my admin has generated for us. If we wanted to write this ourselves, we could just copy that, go to the SQL tab, and write that ourselves and hit "Execute". We would get the same result. But this obviously streamlines it for us, makes it a bit easier with being interactive and stuff, and you don't need any knowledge of SQL. To look at this query just quickly so that you can recognize SQL when you see it. We've got a few keywords here, CREATE TABLE. Then we define the database that we're targeting. Dot the table that we're targeting. The ID which is an integer unsigned, it's not null, which means it's not empty and it's going to order increment. Then the username, which is not null text, and the password, text not null, email, text not null. The primary key being ID and the engine being innoDB. I'll click "Close" on that and I'll click "Save". You can see now we've got a table that shows up in our database. We can see the different fields here. What we can do with this table is we can insert. I'm going to put in a username. Let's just say Chris, for password, I'll type in Chris password. Down here, I'll type in chris@christhefreelancer.com. Click "Go, and we've got a new row. Right here is the code that we could've done ourselves to insert a row in our table. If we go back to browse, we can see this is our table. We've got ID of 1, username of Chris, password of Chris password, and e-mail of chris@christhefreelancer.com. Now, like I said, we can execute SQL ourselves, so I'm going to copy back in the SQL that we generated before. I can just change these details. Maybe it's Denise and we got Denise password, and I want to share her password with everyone so I'll just type in denise@gmail.com. If I click "Go", that should work. It says tick one row inserted. If we go back, we've got two users in our database now and I misspelled Denise, which means I can just go in here and click "Edit". Her name's not Dennis, it's Denise. That e-mail might probably lead somewhere, but it doesn't lead to any Denise I know. What we can do now is add another table. This is a lead into relational databases. What I'm going to do is create the ID again, and I'm going to do an unsigned primary index that auto increments just like before. What I'm going to do here is put in owner ID. What we can do with owner ID is have that as related to an ID in users, so we can associate this pet in our table, pets to a particular user. I'm going to put in the name here, make that a text field. Then I'm going to create a type, let's say type. That can be dog, cat, whatever, and we'll click "Save". Now we've got this pets table. Let's go and insert a pet name, owner ID. Let's assign it to me. I was one, so assign it to me. I will call it Boris, and it's a dog. Then we've got that there. Now these aren't actually linked yet, and there's certain ways we can do that within phpMyAdmin, but we are not going to go too deep into databases in this course. But what we want to do now is to actually use this database, interact with this database using a PHP code. We've already got our project now, it's already got PHP in it. The next step for us is to connect to this database and then start outputting stuff from the database. When we do that, you will be able to see the whole thing coming together. The database working with the back end to produce the front end, and then the other way around where we can use the front end to send a server request to the back end to manipulate the database. That, in essence, is the whole web development cycle. I'm excited to show you the next video, which is where we are going to be connecting to the database and creating our very basic, but hopefully very telling web app. I'll see you on the next video.
14. Connecting to a database: In the last video, we created a database. We inserted some tables into that database, and then we inserted some records into these database tables. Now in this video, we're finally going to bring these records into our projects using PHP. The way to do this is to establish a connection to the database and then access these different records through SQL and then implement with PHP. One of the ways we can start off the connection is I've just got some documentation here from MAMP. They've given us some code to work with here. I'm just going to copy everything except the tags because we already have them in our project. I'm going to go over to my code editor. I can get rid of this because it's just silly anyway. Then I can paste in this example code. Now what we're going to have to do is change this for as specific circumstance. We're not looking at a database called Performance Schema. We are now looking at a database called test DB. Now if we've done everything correctly, this should connect successfully and we should see a success message. It says connected successfully. The reason why is because we put in here echo. Echo is another way you can print out text onto a screen using PHP. If there was an era, the page would have died and then what we would have spit out the error. But because it connected successfully, we got this feedback. Now that we know we have a connection, now it's about bringing the data that we have and putting it out into our application. For that, I've got a another article here from W3 schools. They've got this little example here. What we've already done is we've created our connection, so we don't need to do that again. But what we do need to do is create an SQL query and then take the result and do a loop here over all the results. Then output it on the page so that you can actually see it. I'm going to copy that. I'm going to go to my code editor here. I'm going to maximize the screen and where I want to output it is down here. I'll create another div. I'll just give it the class row. Remember we're working with bootstrap here, so row is a bootstrap class that we can use. Then I'm going to insert our PHP. I'll need the opening and closing tags. Less than sign question mark, PHP, question mark, closing tag. Then between here, all of the code goes in. We actually got the closing tags. I need to get rid of that and push this in. Move that, whoops, move that back. What we've got here is web building an SQL query and assigning it to this variable. This is an example. What we're going to need to do is adjust it for us and we don't really need the ID per se. But if we go into our table here, we've got username and password. This example, let's not show how uses password on the screen. We can type in username and email. What we're saying here, we want to select the column username and the column email. This has to match up to these columns here from and then this is the table name, so it's not my guests, its users. Another thing we're going to have to change here is the object that defines our connection. So in this example here, they've used conn as the connection. You can see here, conn equals the new MySQL. It's assigned the connection to this variable. But in our example, if we scroll up, we have assigned the connection to this variable. I'm going to go click that and then replace the mention of conn here. What we're assigning to result here is we're actually taking the connection where using a method called query, we're putting in the SQL that we've just built up here into this method of query. It's going to return to us a certain result and then we're going to store it in this variable. Then down here, what we're going to ask is if the number of rows that come out of the results is greater than zero, we are going to output something. Otherwise, we are going to output just zero results, the text zero results. Then at the end of this, we're going to close our connection to the database. What we're going to need to do down here is change these fields again, so we are not showing ID. It can do is get rid of that. We are showing the username. Instead of name, I'm going to put user name. Then instead of first name here, going to put in a user name and going to what else is there? We got email here, which we've pulled off of here. We can do email with a colon. Then we can change what we're targeting here to email. Then a BR tag at the end. BR just means it's a break tag in HTML and it just means go to the next line. If we're lucky, we have written a code correctly and this will actually work. I'm going to refresh the page and something's happened. I'm going to inspect that because it looks like it's cutoff here. Why isn't this working? Well, we have one more typo in our code. That is, we haven't changed the name of our connection down here, and also we have already closed our connection up here. What I'm going to do here is replace con with MySQL and get rid of this close because we are going to close it down here. I'll click "Save". I'll refresh the page. We are now getting fields from the database. Granted they look pretty terrible right now, but we can always jazz them up with our knowledge of front end code. Instead of this, what I'll do is I will create a div. We can insert whatever HTML we want here. Div here, closing div. I'll call this give this a class of DB, row. Click "Save", refresh the page. Not much has changed because we haven't applied any styles. One thing I want to do first off is this row is not inside the container, so that's the first thing I would fix. I would go inside and put that nested within the container div. It's now in the container. What we can do is apply a few more styles to make it look a little bit nicer. This is up to you how you want to do it. But let's do a dots because we've got a Class, DB row, open curly brackets to define our styles and let's just give that more margin to the bottom so we'll get 10 px. Reload the page is a little bit more margin there. Maybe we want the first part of it, bold. We can do that without CSS. We can just use HTML to create a strong tag. Anything within a strong tag will be the font light will be boulder. Usually, we can use it for other purposes. I can put in strong. Then now you can see the label is bold and the result is not bold. We've established a connection to our database. We have retrieved items from our database. You can start to see now the back end working for us. The good thing about the database is it's permanent. If we make a change here, we let the database sit there. Whenever we hit the website, if we made a change, it'll show up. To demonstrate this, I'm going to make a change in the database right now. I'm going to insert another user, call this user Marco is positive, it is going to be Marco polo, and it's going to be Marco@gmail. However we change the database, where reading directly from the database onto this web page. It should show up no matter how we change this database and it does. This is essentially the back end working for us. Again, if we were to inspect this, we wouldn't see any back-end code. We would literally just see a bunch of DB rose with the output HTML code. This is good for security. We don't know what's going on in the back end. While that is really important is for number of reasons, but one that I can show you right now, and that is that we have all this information here with a username and password. We definitely don't want anybody accessing our website on the other end to be able to see that. If it was like, say for instance, JavaScript code, if we just put that in a JavaScript file, again, we can open up our developer tools, go to network, sorry, sources, not network. We can go in and see what the scripts are. But on the back-end, there is no way of seeing this configuration data. That is one reason why if you're making a connection to the database, if you're working with user information. If you're segregating information based on whether somebody is logged in and you only want to show information that that user is authorized to see, then that all needs to be secure. That's why it is very important that we have the back-end to connect to the database and also be very private. Hopefully you can understand the role of the back end now and how we are able to connect to a database. Again, very simple explanation or demonstration here of how the back end works using a database. We could do a full course on PHP with MySQL and go through how we could create, update, and delete these records. But this is an overview of web development. We don't have time to go into a huge 12 hours. It could be 12 hour course to be honest on this. If you want to stick to the end and you actually want to do a PHP MySQL project. I'll have some recommendations at the end. But in the next video, we are going to get into how to actually what's called deploy this website, which means putting it on a server that can be accessed from anywhere and basically creating you a live functioning website. I'm excited to show you how to deploy your new little basic app. I'll see you in the next video.
15. Deploy P1. 1: Domain: In the next few videos, we are going to deploy our website, and deploy is just a developer term meaning, we are putting our website on another server, and we are going to deploy our website to the web, which means we are just going to put it on another server so we can access our website from anywhere in the world. Essentially, we are putting our website on the Internet. Right now it's just stored on our local computer, and we're running a server locally, but we need to put our website on a server that's connected to the Internet and running 24/7, so people can access our website around the clock from anywhere. The two concepts we have to understand to do this domains and hosting, and a lot of people think that domains and hosting are the same thing, but they are definitely not. So what I'm going to do, just do a Google search for the difference between domain and hosting, and just start your research there to figure out what the difference is if you need to do extra reading, but I'm going to click on the first article and take a look at this house analogy. Essentially your domain is an address. When you buy, let's just say skillsharecourse.com, or something like that you're just getting the address. You're just getting the domain name. You don't actually get a place to actually start building your website. You can think of the domain name as just an address, and that address will point to the location of your website which is hosted somewhere. Those files have to sit somewhere on a hosting platform on another web server, and that's what will serve your website. You can think of, in this house analogy, the domain name is just your address, and the house itself is hosting in this analogy. The first step will be to get your domain, and essentially what happens when you register a domain, is it goes into a centralized system called DNS. I'm just going to type in, "Where are website domains stored?" On howstuffworks.com, you can read all about where your domain is stored. Basically what you're doing when you register a domain on GoDaddy, or Namecheap, or any of those domain buying websites, is you're basically getting a listing in this whole DNS system. How do we get a domain? Well, you might have seen this before. We can go to any number of domain providers. GoDaddy is a popular one, and they're also a host. I'm pretty sure if you go to hosting, you can buy a hosting account that comes with a domain, but if we just click on "Domains" and find a domain, we would just get the domain and their website. GoDaddy actually isn't necessarily the cheapest. There's another one called Namecheap, and seeming I'm just registering a domain that I'm not really going to use, but just show as an example. I'm going to use Namecheap and I'm going to type in skillsharecourse, and now it's going to load all the ideas, all the available domains we could have. Skillsharecourse.com is pretty certain that that's not available, but we can get all these obscure ones like skillsharecourse.xyz, and skillsharecourse.space. I'm just going to choose one of the cheaper ones because this is just an example, so I'm going to go to cart. It's going to cost me one Australian dollar. We don't need any of the extras, so I'm going to confirm. Login to my account because I already have an account with Namecheap, and check my details, pay now. It will start processing your order, and voila. I just bought skillsharecourse.space, and what I can do now, is I can click "Manage" and this should be similar on all domain providers. Here's a list of other domains I have. I can go down to skillsharecourse.space, click "Manage" and why we click "Manage" straight away is to go down to our name servers. Right here, we've got domain servers that we need to set up. This is basically where we're going to point our domain to where our website is stored. So essentially where our hosting is. Now, because Namecheap, well, they do, do hosting, but if we were for instance going to host our website on Namecheap, we already bought a domain, so we could just leave this as Namecheap basic DNS. Just to reiterate that, if you were to host your website in the same place you bought your domain, you probably don't need to change your DNS settings. They are already set to direct to the website that you bought it on, but if you're hosting your website on another host that's different to where you bought your domain, you will have to set up here using custom DNS, where you want that domain to direct to. Now, the choice of where you host your website is up to you. I host using my reseller account on a host called Netorigin in Australia. I wouldn't necessarily recommend that for you if you're in the United States, or the UK, or wherever you are else in the world, but for me in Australia, that's the host I use, but regardless of whether you use that host or not, or any host that you use, the thing that you need to do in order to link your domain to your hosting, is to find the name servers of that particular host. For me, it is Netorigin, and this is how I go about it. I will just type in Netorigin DNS servers, and if you're going with GoDaddy, you could type in GoDaddy.DNS servers, and right here there is a knowledge base article from Netorigin, which is the company I use, and right here is some domain name servers. I can take the first one, put it in there, the second one put it in there, and you probably don't need all four, but I think these are just for backup. Put it in there, and then I'm going to click "Tick" or whatever it is, on your particular domain thing that you use to register. As it says up here, it may take 48 hours to take effect, but it's often very much shorter than that, but soon enough we will have our domain provider linked to our hosting provider, and what will happen is when you hit this domain it will look up websites on this domain name server, and your host, whatever its Netorigin, or GoDaddy, or whoever it is, will find your website and serve it up to you. What if you don't already have a host like me? Well, like I said you can go to somewhere like GoDaddy. I keep misspelling GoDaddy. I didn't know there was actually a website called GoDay. You can go to GoDaddy, click for "Hosting" and buy some web hosting. You can buy economy it's only five bucks a month, and then what you do when you register for hosting is, when they ask for your domain name, you can put that in. With GoDaddy however, they offer you a free domain. It's probably more cost-effective for you to just get your domain along with your hosting, and you don't even have to link these together, but for me, I have my hosting on Netorigin, and I just wanted to buy a cheap domain on Namecheap. So this linking is necessary, and also it just goes to show you the difference between domains and hosting. If I did go to GoDaddy and get the web hosting with the free domain, I may not fully understand the difference between domains and web hosting, because they make it so easy to put the two together. So I think that even if you do decide to go with a host that will give you a free domain, and link it for you automatically, it's good to know the difference between domains and hosting, and be able to link it in future if you need to.
16. Deploy Pt 2: Files: All right, so by now you should have your domain, which you registered through a domain registry like Name Cheap and you should have your hosting which you may have registered at the same place or somewhere different, if they're somewhere different, you should have linked them together, putting in your custom domain name servers. So the next step will be to access your control panel and if you remember before, in the last video, it said it was going to take up to 48 hours to link our domain to our hosting. But it often takes a lot less time and I've left it about 5-10 minutes and it's already linked. So what I'm going to do is first of all to verify that we can access our control panel and also to then change some things on our Control Panel and begin to deploy our website. I'm going to type in the address of our website, which was Skillsharecourse.space/cpanel. I'll press "Enter" and cPanel is just a standardized control panel that you can use to do a lot of functions in your website. It's a lot better to see and interact with it than to describe it at a distance. So what I'm going to do is log in and show you it straight away. So I'll use a name that we set up on the hosting platform. I did that privately but for you, you might have done that on GoDaddy or any other number of host and then we put in our password and we login. This is cPanel and it gives you a file manager, you can go in and change your files, there's phpMyAdmin, so we can do our database stuff there. We can install applications like WordPress or Joomla press to shop with one-click basically, we just click into there and then click "Install." That's very handy. We can create subdomains, we can create e-mail accounts. There is a lot of different things we can do, a lot of which I haven't even done before. What I want you to do now is I want you to go to your file manager and I want you to just look in here. All right, so looking at this structure, we can see that we have our home directory and we have these different folders, ETC, logs, mail, public FTP, HTML, SSL, TMP. You don't need to know what all of these do but if you have a folder called public HTML, definitely click into that because that's where you're going to put your website because when you hit your domain, it's going to serve up the website from this location. Right now we've just got this random photo of CGI bin that's completely empty, so there's no risk in whatever you do with this right now because it's completely empty. So the next step would be to upload our website into this file manager. So what I'm going to do for that is I'm going to go to my Skillshare course my project folder. I'm going to go back, I'm going to find it here, and then I'm going to zip it so that we can upload it as one file. So on Mac, I press "Compress" and I get a zip file. So I'm going to go here, I'm going to click "Upload." I'm going to grab that zip file which is right here, it's going to upload. I'm going to go back and then from within our file manager, I can click on it and click "Extract", I think is the word on the C panel. So now we've got this because I compressed it on a Mac, we've got this macOSx folder, rather, we can delete that and then in here is our website. We're going to need to grab all of these and move it back one. So rather than this photo, we're just going to get rid of that and move it to public HTML. Go back into public HTML, this folder is now empty, so we can delete it. Wallah, we've got our website up there. Just one second. I think we will delete this zip file as well, but yeah, we've got our front end assets there, and let's just see what happens when we type in our domain now. Skillsharecourse.space. We're going to get a database connection error and that doesn't surprise me at all because we've forgotten an important step right now, and that is we haven't set up our database. So putting in all the files is all well and good but we did have defined in here, if you click into the file and then click "Edit", you can edit the file directly from your file manager. We have all this information. We have all these servers and database to connect to and the database really is a separate entity so just putting our files in here is not enough. We also need to set up our database and copy that across as well so that's what we're going to do in the next video.
17. Deploy Pt 3: Database: In the last video, we uploaded our website files to our new host, but there's one thing missing, and that is our database. Hence why when we go to a website, it says connection error. That's a good sign in the sense that we know that our website is now loading that code that we created, but we haven't actually set up the database on this remote server. Of course we're going to get a connection error. Now just to be clear, if we didn't have a connection to the database, perhaps we were uploading an app that didn't even have a back end, we would not have an issue. I just want to demonstrate that quickly. You don't have to follow along. But if we dig, revert this back to what it was before which was hates HTML, and I click Edit, and I just got rid of all the PHP, which wouldn't make sense in an HTML document anyway. Remember we've got this file save locally so you don't have to worry about losing your progress. We can just grab it as long as we've got it saved to our computer. I'll click Save. I'll just double-check. There's no PHP. I'll go back to my Website, refresh the page and you can see we've now got the best website ever. I just realized that we do have some PHP here. We had the heading, so I can put in Best website of all time. I think that wasn't what the name was, but all well but we can go back. You can see that we have a website live on the Internet. But we want to deploy a website that is connected with a back end, with a database. I'm just going to delete that file and then upload our PHP file again. I'm going to go back to my school share course, put this back in. It's uploaded. I can go back here and we'll get that connection error again, because we need to set up the database. What we can do is use phpMyAdmin. The same program we used on our local map sever, we can use on a host as well. What I'm going to do is find our phpMyAdmin. You can access it via here, but if you don't have this page, you can also take your host name and then input /phpMyAdmin. What we're going to do here is click on test db, and we're going to export everything here so we can quickly import it on your host and then start to create a connection to it. I'm going to do a quick export. This is the SQL code which will create everything. We just need to copy all of that. Then we're going to go back to our cPanel, and from here we're going to use phpMyAdmin which is right here in just a sec. But first of all, we need to create that database that we made on our local website, the test db because it doesn't yet exist on our host. I'm going to go click MySQL Databases, and I'm going to create a new database. I'm just going to call it test. It's created and you can go down here and see it's got skillsharecourse_test. It forces us to namespace it using this which is the name of our website. What we need to do now is create a user to access that database. I'm just going to call this user admin, and I'm going to type for the password. You can type whatever you want. I'm just going to generate a password randomly up here in my one password manager. There's a very strong passwords. Make sure to copy that. I'm going to create a new document just so I can store that pathway. You don't want to lose it. That's the password that I selected, then create user. Now you've successfully created a database user. Now the last thing you want to do is add the user to the database. The user is going to be skillsharecourse/admin, and the database is skillsharecourse_test. Click Add and give it all the privileges. Click Make Changes, and the changes have been made. Now we can go to phpMyAdmin which we can do by clicking over here. Go into phpMyAdmin, and from here you can see that we have our skillsharecourse_test. Now the first thing you should notice is it's different in its name to our test db which is test db. We're going to need to make some changes there as well. But we can go into here, into our SQL and copy across our query. We've got password by now, so I'm going to have to go back to here, copy across this query that we put there before, paste it in here. Instead of test db , I'm going to change this to skillsharecourse_test which is a new database name. Now, look for any other references of test_db. That should be its does no more. If we click Go now, it should select that database and then import all our tables. Hopefully, let's see if it works. It says no database selected. What we're going to do is we're going to go into the database and then put the SQL from the context of that database. I'm going to go back here, put in the name of the database again, click Go. Table pets already exists. It looks like our import already worked. We can now go in and see we've got our table for our users and now table for the pets. Now, it's a case of using all the information. The database name, the new user we created, and now changing that in our code so we can get a database connection. and that will be the final stage of getting our website to show up. Let's do that right now. We've got our database now inside our new website. What we need to do is update our index.php file because the name of the database is changed and also the user which we're using to access this database has changed. If we go over here and go into our index php, we can edit it. If you double-click, it will download. You'll just want to click it once, and then click Edit and you can edit it right in your browser. When you're doing small changes like this, this is okay. But if you are doing big website changes, you would probably want to go with FTP, which you can access down here. That's a bit more of where can you access it, which you can access from here. But that's more of an advanced concepts. For now what we're doing, it's totally fine just to use the File Manager. What we're going to do is update this fields here, that username, password, host and database. The easy one we know is the database is no longer test db, it is skillsharecourse_test. I'm going to put that in there. I intuitively pressed Command S to save, but you don't do that when you're using the File Manager. Going back to here, if we don't remember our username, we can just go into MySQL Databases and check the current uses. Our username was skillsharecourse_admin. We can go back here, put that in as the username. Remember I created a document to save our password. I'm going to go in, copy that and put in that password. Now for DB HOST, we can just leave it as localhost. Click Save. Go over to our project, refresh the page, and let's see what happens. Connection successful and we have our website here and all our references to the database still work. The only thing that really changed was the name of our database, but everything inside is the same. Also the user that connects to the database, that is just to have a user to log into the database. Everything once we logged into the database is the same. The table where names were the same, the fields were the same, and that's why we suddenly have a website here. In the next video, I'm going to show you how you would edit your website live, using FTP. Because if you are to make changes over and over again, you don't really want to do it in the File Manager. Chances are you probably want to do it locally first if you're doing a lot of development, so edit it here and then ported across. There are many ways to deploy a more advanced wise to deploy. But I just wanted to quickly show you FTP because it's important to know as a web developer. I'll see you in next video.
18. Using FTP: In the last video, we updated our index.php using the inbuilt editor in our cpanel file manager. But in this video, we're going to talk about FTP, which stands for File Transfer Protocol. What is really beneficial about FTP in our situation is say for instance, we don't want to edit these files from within this cloud interface. Maybe we want to edit them using our code editor Adam, because at least for me it's a lot more nicer to use and we can have all of our files here quickly editable. It just makes it easier. We can use our local tools to make live changes to our website. Now, a disclaimer, depending on how big your website is or what the changes are you're making, you might not want to make live changes so you probably should build it all locally, develop it all on your local host here, verify it works, and then start to migrate it over. There are more sophisticated ways than just copying the files over like we've done. You can also do that through FTP, but say for instance, there was a small change or anything that you think is not going to cause a big problem and you wanted to edit this using your own code editor, we can use what's called FTP. I thought this would be important to include FTP because it's something that I use all the time with my projects. We're going to go back to cpanel here, and we're going to go back to the homepage. What we can do to create an FTP account is click on FTP accounts. Here I'm not going to be too creative, I'm just going to call it FTP account. I'm going to go to one password to generate a random password to use. What's important here is the directory so you want to get rid of all of this because by default, it's got a section of the amount of information that this FTP account can gather. If you were running a big website and you just wanted to give a particular user access to a small part of your site., you would maybe create a different directory for them, but we want to edit the whole site, so we're going to get rid of that. We don't really need a coder because we're is using it so we'll create the FTP account. Now, we can see it here. Now, the other thing you're going to need to use FTP locally, on your own computer is an FTP client and the FTP client that I use is called Cyberduck, there's also one called FileZilla. But basically it is a small program that allows you to connect via FTP. They allow you to connect other servers as well. I've already got Cyberduck installed, all you need to do is just download it and install it, there's not much configuration that needs to happen in that respect. What I like about cpanel is I can just click on this and you can download the configuration files. If you want to make your life easier in your Windows, use FileZilla or CoreFTP and if you're on Mac, you can use Cyberduck like me and you are able to download the configuration file which will have all the information saved for you already. If you want to do it manually, these are the fields that you need to put into your client. What I'm going to do is download the FTP configuration file for Cyberduck. Just saving into downloads. All I need to do now is just click on it and suddenly Cyberduck opens and it'll open, or it will start to open a connection to our website. It's got here, the username prefilled and we can access it. We just need to type in our password again because it's not saving the password for security reasons so we can paste in that password there, click log in. It's going to say unsecured connection most oftentimes, just click continue. Once you're logged in, you'll be able to see your whole website. Then you can click into public HTML and there's your index php. The cool thing about using FTP is I can right-click on this. I don't want to click edit with text edit so I can change my preferences and go to editor and say I want to edit with Atom and always use this application. I think maybe you need to refresh. Now I can click the edit button and suddenly we have it in our code editor. Now, something that you need to be aware of is the difference between your index php on your remote web server and the index php you have locally. If you have them open at the same time, I'll just expand this, Atom will let you know which is which. The one in the private var folders is the one that you're editing temporarily to then re-upload to your website and this one is in your Skillshare course project directory or whatever it is called, mine is just called Skillshare course. We can do stuff like go into here and I'm going to go over to here where we can see our website live, put it to the side, and let's change some things. Lets say "Hello and welcome to this website, " and then we press save. What's going to happen is it's going to upload with Cyberduck. It says upload complete, once it says upload complete, we should be able to refresh the page and it says "Hello and welcome to this website." Now we're able to edit our live website using a system that's a lot more familiar to us when we develop what's called locally, locally meaning on our own computer, we can use our own code editor, we can navigate to different files. Say for instance, if I wanted to edit another file as well, say for instance I wanted to have the styles open at the same time, I can edit those as well and so I can bounce back between index.php and styles.css on the remote server and click save. As soon as it uploads, those changes are live on our website so that's the benefit of using FTP. There's other benefits, but for me as a developer, I use FTP in this way most often, being able to edit a website on a remote server, which sometimes is not even a live website, might be on what's called a staging server. A staging server is a live website, but it's not at the address of the final website. That's a little bit about FTP, Cyberduck is a cool little lightweight program for use on the Mac, for you guys on Windows, you might like FileZilla. But now that we've covered FTP, we now know how to build a website, put it on the Internet, and now edit it using FTP and so that is essentially the bulk of the course. I got a few more videos coming up to wrap us up. Yeah, hopefully you can start to understand now how web development works and the different parts that all come together to get you a website on the Internet. If you have any questions, of course, leave them in the question section, and I will see you in the next video.
19. Bonus: Wordpress: All right. In this video, I want to share with you a little bit of a bonus and that bonus is WordPress. Now in this course, we've basically built everything from scratch. Yes, we did use some frameworks in the case of jQuery and Bootstrap and we did use a little bit of a template to get started on our homepage but you'll notice that all the PHP we had to do ourselves and if you were to build a fully customizable web app, you would have to program yourself and use libraries and maybe develop one of those back-end frameworks we covered in the lesson on frameworks but for a lot of people, we don't need to reinvent the wheel, we just need a simple content website and one of the best platforms to develop that is a system called WordPress. Now if we go into, type in WordPress into Google, what I'm not talking about is wordpress.com, which is a website that will allow you to create a WordPress website on their own hosting and they control everything but what we're talking about is the open source software. WordPress is a bunch of code that you can just download and edit completely or use as it's given to you right out of the box. Just to demonstrate that, if we were to download WordPress, it's only about a nine megabyte file, so I can go into downloads, I will unzip WordPress and then this is essentially the back-end of a WordPress site. So you've got a whole bunch of PHP files in here, you've got plugins and themes and different things which we'll get to in just a sec but I just wanted to make the point of you get a bunch of PHP files when you download WordPress but together they create a website right out the box. To demonstrate this, what I'm going to do is, I'm going to go back to our project here and I was never too attached to this website to begin with. What I'm going to do is just delete what we've got here, if you've put a lot of effort into your website, maybe you don't want to delete this and maybe you should do this on a different website but I'm not too attached to that, so I'm going to use the exact same host to do this in the exact same domain. So I'm going to go to cPanel and what's great about cPanel is you can install a few applications with, basically, they call it a one-click install but there's only a few clicks to do. Installing WordPress on your own computer takes a bit of time, you need to set up databases like we've done but using cPanel, we can just get a WordPress site pretty easily. So we've got WordPress here, we can click "Install application" and it'll ask us a few questions. We want to install it right on our domain because I've just deleted the files, I don't mind that this will become my WordPress website now. You can stay with the standard settings, what I'm going to do is I'm going to change my Administrator username just to Admin and I'm going put in another password. I know we created a lot of passwords in this course but we should really create a separate password for WordPress as well and so what I'm going to do is like always, I'm going to go to my one password and just generate a new password and make sure to save that somewhere. I've got FTP password here, WordPress, password. Okay. This one's empty. Your administrator e-mail is the e-mail it's going to send information to based on what's going on, on WordPress. I'm going to change that to chris@christhefreelancer.com and you can name your website, whatever. I'm just going to leave it as my blog, just another WordPress site and you can leave everything else the same and click "Install". You'll see here how quickly you can get a WordPress installation app. I'll close these and hopefully I can show you this in real time. So very fast, hopefully it doesn't get stuck on 99 and installation is complete, how quick was that? Now when we go to our domain, we have a WordPress site. It doesn't look like much now but there's a few things going on here and what we can do is we can access the admin. The important thing to know is a lot of people get confused about, I already have my login details for cPanel, why do I need to log into WordPress and go into a different dashboard. Well, cPanel is one layer deeper, it's just a place to manage your website and you can actually access the code, so if we go back to our file manager, we can see now that in public HTML, that structure that we saw before when we downloaded WordPress is now on here. Like I said before, WordPress is just a bunch of code files that together make you a website. In cPanel, this is where you would do all the things that we've done already, like access your files, you would look at your database manually, do all these e-mail addresses, subdomains, all of that stuff you would do from your cPanel but in terms of your new WordPress website, this is the back end. This is your dashboard and so you need a different login for this. How WordPress works and the magic of it is actually started off as a blogging platform, is I can create posts. I can click into here and instead of Hello World, I'll just leave Hello World there for a second and I'll say blog post number two and then we can just type in blog content and we can give it a category as well. Let's just say it is travel articles, I love travel. I know this is not related to travel but just as an example, we can click "Publish" and then we can view it. Now we have a blog post with blog content and then anywhere which references all the blog posts, we will see. So by default, when we go to our website, it'll show us all our blog posts. Now you can see Hello World and you can also see blog posts too. Now we're currently logged in, so we've got this bar as an admin but if we were to open it in an Incognito Window, so that we can see it as the user would see it, they see it exactly the same except without this bar and they're not able to edit things on here either. If you notice from before, there's a few extra things that pop up like edit, the user won't have that on their end. It's completely secure unless you give them a login and they can actually change this stuff. The first thing with having a WordPress site that you'll want to customize is a theme and what you're seeing here, when you go to the actual website is a basic theme by WordPress itself called 2017. Every year they create a new one based on the year and so that's what 2015 looked like, that's what 2016 looks like. I'm assuming the new one will come out pretty soon and then there will be another one the year after. But I like to use a theme called Divi and you can find Divi, just type in Divi theme, it's provided by elegant themes. You definitely don't have to use this one but it does pay to invest in a nice WordPress theme that has a page builder. Because essentially, if we wanted, I've got too many things at the same time. If we wanted to customize and create a page in this current theme, we can go to "Add New Page" and we basically get the same interface as our posts and we can add images. Let's just put an image of my face in there, it's not because I love myself, it's just because it came up first and maybe this isn't about page for me, so I can align this to the left and then put in, ''Hi, I'm Chris" and I click the link there, so that's trying to link to somewhere but I can just edit that and you can see we haven't had to dig into code yet at all, it's all just using this editor. I still can't get rid of this. Essentially to get rid of this, we can actually dig into the HTML and that's done by clicking this text tab. I can see here now that we have a link tag, so you can get rid of that on either side and that allows us to click back into here and see the visual representation. But when you're using a theme that doesn't have a page builder, this is all the customization you get. You can align, you can put in a quote, you can put in links, different headings. So I'm going to put in the heading one. Then we can publish that as a page or maybe not. I should probably give it a title first, About. Then we can have our About page. That'll show up based on our theme. But the benefit of using something like Divi is you get a page builder. Because Divi is a premium theme, you can't search for it here, you'll have to upload it once you have downloaded it. Again, we're not doing a full course on Divi or WordPress development. I just wanted to give you a bit of a demonstration about how you can create a website with minimal code and also have it fully customizable. This is just uploading now, it's a pretty big theme, we'll just fast-forward this and I'll see you in just a sec. Divi has uploaded into our WordPress site now. They're just going to install it now for us. As you can see here it says, Theme installed successfully. The last step, will be to activate it if we're confident we definitely want to change to this theme. We don't have anything on our website yet, so that is not an issue. You can see it's already added some stuff to our list here. There's another post type in Divi called Projects and that is good for portfolios. If you're using a premium theme like Divi, it'll often give you another menu and give you theme options so you can edit features directly in the theme. If we go back to our website, we can go up here and click Visit Site. Suddenly, our website looks completely different. We still have the two blog posts, but we have a whole new structure, I guess a new skin, you can say, and this is really the new theme, Divi. But the powerful thing about Divi and a few other premium themes as well, is you can create a new page and you can structure it using their page builder. Now that we have Divi, you can see these extra purple things coming up. We got the settings over here, and then we've got a button here to use the Divi Builder. What I'm going to do is, I'm going to name this page Divi Page and I'm going to click Use Divi Builder. You can actually use the Visual Builder. I'll show you that. This is a special visual What You See Is What You Get builder in Divi, and then so you can actually interact with the page right in front of you. It's great for designers that want to see their changes happening straight away. In here, I can just put some text, hello, hello and you can see that straight away. Then we can change other design aspects like alignment, sizing, there's a lot of options here and it'll take awhile to get familiar with, and it's going to depend on which theme you're using, I'm just using Divi. If we click Save, I'll show you, I'll publish rather because it is a new page. Now that has been saved and published, I'm going to exit Visual Builder and show you the other way we can edit. We've Divi and that's through this Divi Builder and we can build out sections. Where is our row here? We've got our row in module. We can add another row and we can set it up however we like, like four same size columns, or we can have it like this with one being two-thirds size and one being one-third size, we can split it into two. Let's just do that. Then we have these spaces to click in and put a module. You can look up the different ones in Divi if you're interested, but we could put like an image, for example, and then we could put in that image that we had before, hit Save. If you don't want to actually publish the changes, say if you're using this on a live website, you can just preview to see what it would look like before you save. I haven't put any restrictions on the actual image, so it comes up as the full width. But if we wanted to change the width of it to 12 percent, we could refresh it. Then in the other part, we could move it down to here, delete this row, put in a text field. I'm just playing around to be honest, I'm just showing you what we can do in Divi. I'll put test text, save, update, view page. You can see we got one column here and one column there. Now, obviously, it's not the most beautiful website. There's still work that needs to be done. But I wanted to demonstrate to you guys WordPress and how we can do a lot of the heavy lifting right out of the box with WordPress, it's a very powerful open source software. The reason why it's called open source is because we can edit the code directly. In fact, we can go right into appearance, editor, and it's saying, be very careful about editing back-end code. I'm saying yes, and we can edit any of the theme files of any of our themes. From within WordPress, we can edit anything within this particular photo. This is just an example, but on this website we would see another folder for Divi, and we could edit all of those files. Then if we go one step deeper, like we did with our File Manager, we can go right into our file structure and edit any of these. Now, you wouldn't want to edit any of these because these are the ones that make WordPress work. But again, just to demonstrate that this is open source, this is just a bunch of files that you can edit, but it is insanely powerful and you can customize as much as you want with WordPress. It provides the good balance of doing a lot of the heavy lifting, preparing some of the stuff that you wouldn't want to code from scratch, and then also allowing you to still fully edit it and customize the site as much as you need. I just want to leave you with WordPress because for a lot of my client websites who come to me and they just say, I want a website, I recommend them WordPress, and Divi is the theme I've used recently, but there are other themes that I would recommend as well. One I've used on a client project has been Fortuna, which comes with its own page builder. I would totally do your own research to find a theme with a good page builder, and you can have websites up and running like that. For example, my own website, Chris the Developer, I built very quickly using WordPress and Divi. It's quite easy. With WordPress you set your menus, you can set everything dynamic, you can create pages like we did, you can see blog posts, and you can upload your photos and logos and different things. I hope that was a good little introduction into WordPress. If you don't want to build everything from scratch and you just need a basic content website and not even a basic content website, but a blog or something that doesn't, like a whole standalone app that has to do something special. WordPress is often a good choice. If you're doing a e-commerce website, there's a few different platforms as well, but I mainly do content websites and WordPress is a very popular what's called Content Management System, aka CMS, for doing content websites. I hope that was a good introduction into WordPress. In the next few videos, we're going to wrap up and get you started on your own class project. I'll see you in the next video.
20. Conclusion & Class Project: It's time to wrap up this course and get you started on your class project. By now you should understand the difference between the front end and the back end, the purpose of HTML, CSS, and JavaScript, what a framework is and why you should use one, the purpose of PHP and MySQL, the difference between a domain name and hosting and how to publish your website to the internet. In our class project, it's time to bring all of this new knowledge together to publish your first website to the internet or second or third, maybe you've done this before. Regardless, I'm going to give you a few options. Number 1, you can build your site from scratch like we did in the majority of this class or two, like we did at the end, start with getting signed up to hosting and start building your site on WordPress. It's up to you either way how you want to do it. Just remember that anytime you don't know how to do something, just start googling. I'm being serious here and I'm not exaggerating when I say that constant research is something you will need to do throughout your career as a developer. Even if you came just to learn more about the web, learning how to research like a web developer is a skill we can all definitely benefit from. Developers after all, are just problem solvers and the Internet itself is a vast resource for learning anything, just like we've done within this course. If you do need any extra help, just leave me a comment in the discussion box and also let me know if you'd like me to create another class for you guys, going into greater detail about anything we talked about in today's class. That concludes the course. I thank you guys so much for watching and I look forward to seeing your class projects. Best of luck, and I'll see you guys in the discussion section.
Christopher Dodd, Web Developer / Educator
