Set up a localhost Web Server for Faster Website Development | Dave Hollingworth | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Set up a localhost Web Server for Faster Website Development

teacher avatar Dave Hollingworth, IT Trainer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

30 Lessons (1h 17m)
    • 1. Course introduction

      1:59
    • 2. Develop locally: the advantages of installing a web server on your computer

      3:14
    • 3. Learn what you need to develop websites locally

      2:15
    • 4. Install XAMPP (Windows)

      3:06
    • 5. Install XAMPP (OSX)

      2:34
    • 6. Install XAMPP (Linux)

      3:04
    • 7. Install a code editor

      1:54
    • 8. Find the web server's root directory

      2:05
    • 9. Develop one website in the web server root

      2:27
    • 10. Develop multiple websites in subfolders

      2:44
    • 11. Use easy-to-remember web addresses: an overview of the Domain Name System

      3:22
    • 12. The hosts file: add your own web addresses locally

      2:53
    • 13. Develop multiple websites in the web root using virtual hosts

      2:13
    • 14. Choose a local web address for the virtual host

      1:54
    • 15. Add a web address to the hosts file (Windows)

      1:37
    • 16. Add a web address to the hosts file (OSX)

      1:31
    • 17. Add a web address to the hosts file (Linux)

      1:23
    • 18. Add a new virtual host (Windows)

      2:22
    • 19. Add a new virtual host (OSX)

      2:53
    • 20. Add a new virtual host (Linux)

      3:00
    • 21. Use a web address in DNS for the local web server

      2:41
    • 22. Add a new virtual host with a DNS web address

      2:44
    • 23. Virtual document roots: Get the document root from the web address

      4:08
    • 24. Configure Apache using .htaccess files

      2:22
    • 25. Enable .htaccess files in the virtual host configuration

      1:31
    • 26. Using .htaccess files: common usage and an example

      3:02
    • 27. Local databases: Access phpMyAdmin and create a new database

      2:01
    • 28. Add a new user account and grant access to a database

      1:24
    • 29. Install WordPress locally

      6:01
    • 30. Conclusion

      2:15
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

239

Students

--

Projects

About This Class

d85c8971

Quickly set up all the software you need to develop websites faster and more easily.

  • Install a web server, PHP, database server and phpMyAdmin
  • Learn how web addresses work and how to use them locally
  • Develop multiple websites in the root instead of in subfolders
  • Learn how to configure Apache using .htaccess files
  • Create a new local database
  • Install WordPress

Developing websites is easier and faster if you do it locally, using a web server installed on your computer. All web developers develop locally first, before copying their work to a live web server.

By installing and configuring a local web development environment, you'll be able to create your website more quickly and even work when offline.

You'll also learn how to develop multiple websites on the same web server, each in the root instead of creating each one in a subfolder.

At the end of this course, you'll have a fully working web development environment on your computer, ready to start creating your own websites.

Meet Your Teacher

Teacher Profile Image

Dave Hollingworth

IT Trainer

Teacher

Hi, I'm Dave Hollingworth. I'm an IT trainer and web application developer. I've been writing code and teaching IT for over twenty years.

I've developed enterprise-level applications on platforms ranging from mainframes to mobiles: from my first web application, a quotes system created for a major insurance company back in 1999 - the first of its type in the sector - to interactive learning management systems for online language learning.

I've taught courses ranging from basic use of email to advanced web application development, both online and in-person.

I'm passionate about technology, and love teaching it! I believe it's possible to explain even the most complex subjects in a simple, straightforward way that doesn't confuse the student.

I look forward to ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course introduction: Welcome on this course. You'll learn how to install and configure a Web server on your computer so you can develop websites faster and more easily. Hello, I'm Dave Hollingworth, and I'll be leading you through the course. I've been writing replications since 1998 teaching I t. Since 1999 on teaching online since 2012. On this course, I'm going to teach you how to install and configure a Web server on your computer. If you're developing a website, whether it's with just HTML R PHP or even WordPress, developing get locally instead of directly on a live server on the Internet is faster and easier. I'll show you why. In the first part of the course, you'll also learn one of the most important things a Web developer needs when developing more than one website Locally. Instead of developing each website in a sub folder, you'll learn how to configure your local Web server so that each website is in the root throughout. The course will be installing and configuring software, each lecture building on the previous one. To get the most out of the course. I recommend you follow along by installing the software and configuring it yourself. Try and get out to see exactly what it does. I'll cover everything you need to know to get the necessary software installed and configured properly. And, of course, if it's any time you need help, please don't hesitate to ask. Don't forget if I can help in any way additional explanations are help getting software running on your computer. Please let me know. So if you're ready, let's get started. 2. Develop locally: the advantages of installing a web server on your computer: developed locally the advantages of installing a Web server on your computer. What is a website? Basically, it's a Web server sending files to a Web browser. These files can be HTML images, style sheets and so on. When you're developing a website, you create these files so that people can see your website. You need to get your files on a Web server that's connected to the Internet at a Web address that anyone can access, for instance, example dot com. For this, you'll normally pay a hosting provider for some space on a Web server that's connected to the Internet. You can write your HTML files, create your images and so on on your computer, then transfer your files across to the Web server. You could even edit files directly on the Web server. If you're hosting provider allows it. Once your files are there, they can be viewed at your website address. So when you start building your site, you could do it like this. Have you your site As you develop its on the live Web server. However, there are several reasons why this is a bad idea. First, this could be a time consuming process you need to either transfer. The files are edit thin remotely. Then load the websites in the browser, which could take time depending on how good your network connection is. Also, you do need a network connection. If you don't have a connection to the Internet, you can't develop your site. Another reason not to do this is that if you're developing a website for a client, they're going to be able to see the site as it's being built. As you develop the site, you might want to try things out that you lay to remove are even introduced errors. Also, a search engine could index your content before you want it to. Better that the clients on the search engine only see the finished product. So what's the solution? The solution is to develop your website locally on your own computer. If you install a Web server on your local computer, you can write and test your code there. Then, once you're happy with it, copy it to your Web server connected to the Internet. It's faster because your browser is viewing files sent from the same computer as it posted over the Internet. You can also develop offline. For example, when you're traveling and you have a happy client because they don't see your work in progress, so if you can, it's better to develop a website locally. 3. Learn what you need to develop websites locally: learn what you need to develop websites locally to develop and run a websites our Web application Locally on your computer, you need to install a Web server, which sends files such as HTML pages to the Web browser. The Web server needs to support PHP so that you can run code on the server. You need a database server so you can store and retrieve data. And ideally, you should have the PHP, my adamant program installed, which makes it much easier to administer the database. Now. You could go to the Apache Web sites on download and install the Apache Web server, then go to the Maria DB on my SQL website on download and install the database server, then the PHP Web site and download, install and configure that on did likewise with PHP my admin. However, as you can see from this list, there are many software packages available that will install and configure all of the's for you at once, saving you a lot of time and effort. One of the most popular packages is exempt are Zampa. This gives you the Apache Web server with PHP, the Maria DP database server and also PHP my admin. This is the one I recommend and the one we're going to install as a site from being the most popular. It's free. Open sauce works on all platforms, and it's easy to install, which is what we'll do next. Following this video, there's a separate video for installing example on Windows, Mac and Linux, so please choose the one relevant to your operating system. 4. Install XAMPP (Windows): install exempt on windows to install, exempt. First will open a Web browser and go to the Extent website. We'll click on the download link at the top and in the except for window section, select the download for the version of PHP that we want. When you save and then run the file, you'll get a warning asking you whether you want to run this file on your computer will say yes. You might get a user account control warning here I will just say OK, and now we're in the set up. Was it We click next were prompted to select the components that we want. I just want the Apache Web server, my SQL database server, PHP and PHP. My admin. Well, quick next. And then we have to select the folder where we want to install. Example. I'm going to accept this default. We click next. I don't want to know about Big NAMI at the moment, so well, uncheck this box and click next and now we're ready to install when we click next to the installation process begins, and this could take several minutes during the installation process, you might get a Windows firewall warning about the Apache Web server. So I will click private networks and uncheck the public networks Box and click allow access . And now we finished installing. When I click finish, we have to select the language, and now we have the exempt control panel. Apache and my SQL aren't currently running, so if I click start, the party starts on the same for my SQL. When you do that, you might get another Windows firewall warning again. We'll check the private Networks Box and uncheck the public networks box, and we'll quick allow access to check. This is running properly in a Web browser will go to local host, and here we see the exam dashboard. So this means that the Apache Web server is running correctly to check that PHP is working . If we click on PHP info at the top, we can see all the information about PHP. So this means that PHP is working properly to check that the databases working. If we click on PHP, my admin at the top, we can see all the databases that we have installed. So this means that the database server is working. So now we have exam installed with the Apache Web server, my SQL database server PHP and PHP. My admin 5. Install XAMPP (OSX): install exempt on OS X to install, exempt First will open a Web browser and go to the Extent website. We'll click on the download link at the top and scroll down to the exam for OS X section and will select the download Father version of PHP that we want. Once the installation file is downloaded, we'll double click on it to run it. And then in the installation package, double click on the except Icon. We'll get a warning asking us if we want to run. This file will say yes by clicking on open. We're prompted for the password, which will enter and click. OK, and here we are in the except set up wizard. Well, quick. Next on next again example is going to be installed to this location. We'll click next. I don't want to know more about bit na me at the moment, so I'll uncheck this box and click next, and now we're ready to install. When I click next, the installation process will begin, and this could take several minutes. Once it's finished, we click finish and now we have it installed. When we click manage servers, we can see we have the Apache Web server running. But then my SQL database isn't so. We'll select this Onda click start. So now if we open a Web browser and go to local host, we can see the except Dashboard, which means that the Apache Web server is running correctly to check that PHP is working. If we click on PHP info at the top here, we can see all the information about PHP. So this means that PHP is working to check the database server is working. If we click on PHP my Adam in here at the top, we can see all the databases we have installed. So this means that the database server is working correctly also. So now we have ex MP installed with the Apache Web server, the Maria D B database server PHP and PHP. My admin 6. Install XAMPP (Linux): install exempt on Lennox to install example. First will open a Web browser and go to the except Website. We'll click on the download link at the top and then in the except for Lennix section will select the download for the version of PHP that we want will save the file. And once it's downloaded, we'll run it on the command line. First, we need to make the downloaded file execute Herbal. I will do that by typing in this command. Then we need to run the file using pseudo because we need to install its with administrator privileges. We'll get prompted for our password, and this will run the installation file, and there were in the sets up wizard. We'll click next to begin the installation. We're going to accept the default components, and this is where except will be installed. I don't want to know more about Big NAMI at the moment, so I'll uncheck this box and click next and now we're ready to begin installing this installation process could take several minutes, depending on your computer. So now the installation is complete. We'll click, finish tow, launch the exempt control panel and there we are This is the Extent control panel. And if we click on the manage service tab, we can see that we have the Apache Web server running on from my SQL database server running to check. Everything is running correctly. Let's go to a Web browser and type in local host. We can now see the exam dashboard here, which means the Web server is running correctly to check that PHP is working. If we click on PHP info, we can see all the information about PHP. So this means that PHP is working to check the databases working. If we click on PHP, my admin at the top, we can see all the databases that we have installed. So now we know the databases working as well. So we've successfully installed example with the Apache Web server, my SQL Armory, a DB database server, PHP and PHP. My admin 7. Install a code editor: install a code editor when you're writing code html, CSS, JavaScript, PHP and so on, you're going to need an editor. Most operating systems haven't editor included. For example, note pad on Windows text at its on OS X G. Edits on Lenox and so on. You could use thes, but generally they don't have many features. Toe Help you code. A quick search reveals there are many alternatives, some free, Some you have to pay for the editor that I recommend is atom. It's free open sauce and has many useful features, such as auto completion and syntax highlighting. It's also multi platform. So if you move between operating systems, you can keep using the same editor without having to learn another. To install, just download and run the installation package. There are easier installers for Windows, Mark and Linux. You just need to run the downloaded installation file, and Atom will install. There are no installation options are a set up with it to go through. Once installed. It's pretty self explanatory. Don't worry. This is just some simple code to show you what it looks like in the editor. This is the code editor That will be using throughout the rest of this course. So now that we've got the software installed that we need, we can start to configure it. 8. Find the web server's root directory: find the Web Servers Root directory to start developing a website locally. First, we need to find where to put our files by default. The Web server has what's known as a root directory when you go to a local host in a browser. This directory are Folder is where the files that you see there are located in the file system that are a couple of ways you can find out where this folder is. The easiest way is to go to local host in a browser, and by default you're redirected to the exam dashboard page here. If you then click on PHP info at the top and look for the document root value. This tells you the root directory off the Web server. This will be different depending on your system. The other way is to look in the Apache Web server configuration file in the example dashboard, which may look slightly different depending on your operating system. Click the button to open the Apache configuration file. In that file, look for the document root value, which again is the root directory off the Web server. If we open that folder in our cold editor, we can see the files that are in the root directory. At the moment, there's an indexed up PHP file, which re directors to the dashboard, as we've seen. And here's the dashboard files themselves. All these files are in the route off the Web server. 9. Develop one website in the web server root: develop one website in the Web server route. At the moment in the Web service Root Directory here, these other files that have installed with exempt the index dot PHP file that simply redirects to the dashboard on the dashboard files themselves, which are just HTML CSS images and so on. These are what you see when you go to local host in a browser on that redirects to the dashboard. You don't actually need any of thes files, so if you like, you can delete them. If you're just developing one website, then you can put all your files here in the root folder and view them using the local host address in the browser. You could add your own code and files are installed. Something like WordPress are lauraville. Let's at an example HTML file that contains some very basic HTML that just displays a simple message like that. Then, if we go to a browser and Inter local host and then the name of the file we just created, we can see the content of the file. We just added, Let's add a file in a folder to so that we can see how that works. We'll add an example folder here and in their out place, another HTML file with some more sample content like that. Then in a browser, we can add to the name of the folder and the name of the file, and we can see that file. So if you're just developing one website, for example, you can add your files and folders to the root directory of the Web server here and view them at the local host address in a browser. 10. Develop multiple websites in subfolders: develop multiple websites in sub folders. If you're developing more than one website locally, you could develop each one separately in its own sub folder. This is one way to have more than one site on the same Web server. For example, let's create two new folders in the Web root here and in each one. Let's at a simple index html page that's just displays a simple message like that. Then, if we go to a browser and enter local host slash site one, we can see the file we put in the site one folder. And if we look at Site two, we can see the content off this site to folder. So if you're developing more than one site locally, you could develop them like this. With each project in its own folder, you could even install packages like WordPress, la Ravel and someone each in a different folder, then access them in a browser at local host, followed by the folder name. There is a problem with this. However, if you develop a site locally in a sub folder, any links you have in your HTML, including links to CSS and JavaScript files, for example, would have to include the sub folder you're developing in when you later copy it live to remote server. It's probably going to be in the root of the site using its own domain name instead of in a sub folder. This would mean that these links would be broken so you would have to go through and change all the internal links to remove the sub folder when you copied the site. Life. Oh, complicate development by including a valuable in all your links, notes An ideal solution. There's a better way to develop sites locally that doesn't use sub folders, however. First, though, we need to learn a little bit about how domain names work, which will do next. 11. Use easy-to-remember web addresses: an overview of the Domain Name System: use easy to remember. Web addresses an overview off the domain name system. Let's begin with an analogy. When you call someone by telephone, you need to know their phone number so each telephone has to have its own individual phone number in order to uniquely identify it, you can then use that unique number to call that specific person. Likewise, every Web server connected to the Internet also has to have its own unique address that your Web browser uses to find a specific website. These addresses are made up of numbers and more recently, letters as well that look like this. These are known as I P addresses. If you know the I P address off the Web server and depending on how the servers configured , you can access the website using its I P address, for example, the I P address off the example dot com website is 192.0 dot for 3.10 So if we enter that into the browser's address bar, we can access that website via its I P address. Your local computer also has an I P address, which is 1 to 7.0 dot 0.1. If you have a Web server installed locally on your computer, then you can access it in a browser using this I p address I P addresses are difficult for us to remember, though, So instead, when we're browsing the Web, we have a system where we can enter easy to remember names like this instead of I P addresses. For example, if I enter example dot com in a browser, we see the same website that we just saw. This is called the domain name system. Our DNS. It's the Internets equivalent of a phone book, and it's basically a directory that matches domain names to I p addresses. So when you enter a Web address into a browser, your computer looks up the Web address in the domain name system to find the I P address off the Web server. It can then get the page he requested from that Web server on display. It's in your browser. When you develop a website you are you're hosting provider can edit DNS to map whatever domain name you like to the I P address of your Web server, allowing people to access your website using a user friendly Web address instead of an I P address 12. The hosts file: add your own web addresses locally: the hosts file and your own Web addresses locally. When you enter a Web address into a browser, it uses the domain name system to look up the Web service I p. Address. So it confined the Web server. The domain name system is on the Internet. In other words, not on your computer. However. Your computer does have something similar called a Hosts file. This is like DNS, but it's on your local computer, just like DNS. It matches domain names to I p addresses. It's just a simple text file that's easy to edit. We'll look at how to edit it in a later video. So before your computer looks up a Web address in the DNS on the Internet, it first checks. The hosts file to see if the Web address is there. If it is, then it uses the I P address from the hosts file and doesn't even look at the domain name system so you can use the hosts file to override Web addresses in DNS, sending requests to a server with a different I P address. You can also use it to easily point your own Web addresses to I P addresses for example, by default, the local host Web address points to 1 to 7001 the I p address off the local Web server. This is often already set by default in the hosts file. If we look at the hosts file on this computer, we can see there is the mapping from the local I P address to the local host Web address. You can add any Web address you like, however, and even point several Web addresses to your local Web server, For example, with a local Web server installed. If we go to 127001 we see the content from the Web server. If we go to local host, we see the same content. So the hosts file can be used like a mini DNS on your local computer to map what ever Web address you like to an I. P address off the Web server 13. Develop multiple websites in the web root using virtual hosts: develop multiple websites in the Webroot using virtual hosts. We saw earlier how you can develop multiple websites locally on one Web server by developing each one in its own sub folder off the Web root. The problem with this, though, was that when you put the site live, it probably won't be in a sub folder rather in the route off the Web server, meaning you have to change your code when you copy it to the life server. To avoid this problem, we need to develop each site locally in the Web root instead of installing separate Web servers locally for each site. We can do this by using Virtual. Web servers are commonly known as virtual hosts. A single Web server can host several virtual hosts. Each virtual host has its own Web root and is accessible via its own Web address. So what we need to do is create a virtual host for each site we want to create. We'll do this in two stages. First, we used DNS. All the hosts file to point a separate Web address for each site to our local Web servers. I P. Address, which is 127001 Then we can figure the local Web server to create a virtual host for each site, telling each virtual host to use the address we just created and which folder to use as its root. When we visit that address in a browser, the Web server knows which virtual host to use based on the address and serves the files from its root folder. 14. Choose a local web address for the virtual host: choose a local Web address. Father Virtual host. When we create a virtual host, we need to choose a Web address for it. So what do we choose? Web sites on the Internet have Web addresses in DNS like example dot com, google dot co dot UK e n duct, Wikipedia, duct ogg and so on. The Internet Standard say a Web address should be a series of labels joined together by dots, where a label can contain letters, numbers and hyphens. So as long as you using address in that format, if you're adding an address to the hosts file, you can put anything you like. For example, cite one site one dot local my hyphen sites dot com website 123 Dots, Dev and so on. It's actually quite common to use an address with Dots Dev r dot local. At the end, however, the dot dev top level domain isn't meant for this and isn't recommended as discussed here. The Internet standard suggests using addresses that end induct local host on this top level domain is actually reserved specifically for that use. So when adding a Web address to the hosts file for a virtual host, the recommendation is to use a Web address like this that ends in dot local host 15. Add a web address to the hosts file (Windows): at a Web address to the host file. This video contains specific instructions for Windows. If you're using Mark are Lennox, please skip this video and go to the next one. Let's begin adding a virtual server by first creating a Web address. We'll do this in the host file. Editing the Hosts file requires administrative permissions to edit two file as an administrator on Windows. First, find the note pad text editor, right. Click the application and click run as administrator when asked if we're sure about face will say yes. And here we have no part of running as an administrator will open the hosts file, which is in this location. Windows System. 32 drivers, E T. C. And once we've opened the file, if we scroll to the bottom, we can add our new entry. First, we'll add the I P address we want. We're going to put 1 to 7001 the I P address of the local Web server and then our chosen Web address, which is site one dot local host. I will save this file and that's it. We've added a Web address to the hosts file 16. Add a web address to the hosts file (OSX): and a Web address to the hosts. File. This video contains specific instructions for OS X. If you using Lennox, please skip this video and go to the next one. Editing the hosts file requires Administrator permissions to edit two file as an administrator on OS X. First we need to open a terminal, which is an application in the Utilities folder. And then we're going to type this command pseudo, which runs the command as an administrator. No, no. Which is a text editor. And then the name of the hosts file when we run this command were prompted for the password which we enter. And here we have the hosts file. So we'll go down to the bottom of the file and enter our entry. We'll start with the I P address, which is 127001 And then I was chosen Web address, which is site one dot local host. Then we press control Oh, to write out the file. And there we have saved the file. So we've added an entry to the hosts file with our own Web address 17. Add a web address to the hosts file (Linux): at a Web address to the hosts. File on Linux editing The hosts file requires administrative permissions to editor file As an administrator on Lennox will do it from the command line. So we'll enter this command to use the Nano editor to edit the hosts file, which is here when we run, This command will get prompted for our password. When we enter it, we enter the Nano editor where we can edit the hosts file. You can see that there's already the entry for local host will go to the bottom toe adder entry. There First will enter the I P address off our local Web server, which is 1 to 7.0 dot 0.1, then will enter the Web address that we've chosen, which is site one darts local host than to save this file. We do control Oh, press enter and we've saved the file. So very simply, we've added a Web address to the hosts file on this computer 18. Add a new virtual host (Windows): at a new virtual host. This video contains specific instructions for Windows. If you're using Mac or Lennox, please go to the next video. We're going to add a virtual host to the Web server that we have installed locally. This is the content that's going to be at the root of the virtual host. I've got a folder here with a single HTML file in it, and in this file we have some simple HTML that just displays a message. We'll start by going to the exempt control panel and clicking on the conflict button to open the Apache configuration file. If we scroll almost of the bottom of this file will see a line that says Virtual hosts on what this line is doing is it's including another configuration file, which is in this folder. If we open this file, this is where we put all the configuration for our virtual hosts so that scroll to the bottom and add a new virtual host section. First we add the server name, which has to match the name that we put in the hosts file earlier site one dot local host. Then we add a document root, which is the full path to the folder where the content is, which is the folder we looked at at the start of the video. Then we had a directory section, which again takes the full path to the content. And in here, we have to say require all granted, which basically allows the Web server to view content in this folder. I will save this file, and then, as we've made changes to the configuration, we need to stop and start the Web server. Then, if we go to a browser and enter the address site one that local host, we see the content from our content folder. So we've added a virtual host to the Web server running on this computer. 19. Add a new virtual host (OSX): at a new virtual host. This video contains specific instructions from Mac OS X. If you're using Lennox, please go to the next video. We're going to add a virtual host to the Web server that we have running locally on this computer. This is the content that's going to be at the root of the virtual host. I have a folder that contains an HTML file that contains some simple HTML to display a message. We'll start by going to the Extent control panel clicking gun Come figure for the Apache Web server and opening the configuration file. If we scroll almost to the bottom of this file, we see a line about virtual hosts on what this line is doing is it's including another configuration file by default. This is commented out, so we'll remove the comment, save the file and then open the extra configuration file. This is the file where we put all the configuration for virtual hosts. So if we scroll to the bottom and at a new virtual host section first, we'll out of the server name, which has to match the address that we added to the hosts file earlier. Site one dot local host. Then we'll add the document root, which takes the full path to the folder. Weather content is, which is the folder we saw at the start of the video. Then we add a directory section which again takes the full path to the content folder and in here, we say require all granted. And basically what this does is it just gives the Web server permission to serve content from this folder. I will save this file, and then, as we've made changes to the Web server configuration, we need to restart it. So those changes a recognized. And finally, we need to make sure that the Web server has permission to view the files in this folder. So for the parent folder of our Content folder will right click get info and make sure that everyone has read access to this folder. Then, if we open a Web browser and enter our Web address site Wanda local host, we can see the content from our content folder. So we've added a virtual host to the Web server running locally on this computer 20. Add a new virtual host (Linux): at a new virtual host. This video contains specific instructions for Linux. We're going to add a virtual host to the Web server that we have installed locally. This is the content that's going to be at the root of the virtual host. I have a folder here with a single HTML file in it that just contains some simple HTML to display a message on the screen. We'll start by going to the Extent control panel and clicking on the configure button to configure the Apache Web server here in the Apache configuration file. If we scroll almost to the bottom, we can see an entry about virtual hosts on what this line is doing is it's including another configuration file. By default, this line is commented out. So let's remove the comment and save this file. Then, if we open this extra configuration file, this is where we put the configuration for virtual hosts. So if we scroll to the bottom and add a new virtual host section first, we out of the servant name, which has to match the address that we added to the hosts file earlier site one dot local host. Then we add the document Root, which takes the full path to the folder weather content, is which is the folder we saw at the start of the video. Then we had a directory section, which again takes the full path to the content folder and in here, we say, require all granted, which basically gives the Web server permission to serve. Content from this folder will save this file, then back in the exempt control panel. As we've made changes to the Web server configuration, we need to restart the Web server so that those changes are recognized then in a Web browser. If we enter our Web address site one dot local host, we can see the content in our content folder. So we've added a virtual host to the Web server installed locally on this computer. 21. Use a web address in DNS for the local web server: use a Web address in DNS. Father, local Web server. We just created a virtual host with the Web address that we added to the host file, pointing to the I p address of our local Web server. We can also use a Web address in DNS for this, Just like with the host file, we need a Web address Indiana's that points to 1 to 7001 We have two options for this at a new one are used an existing one. There are several existing domain names in DNS that's already point to the 1 to 7001 I p address. For example, local host up TV, local test done me and l v h dot me. The's Web addresses are configured so that any sub domain of these domains points to 1 to 7001 This means that you can put whatever prefix you like on these domains, and that Web address will point to your local Web server. So to use these domains, all you need to do is configure the virtual host on the Web server so that the server name matches the Web address you've chosen. This means that you can create a virtual host in one step. As you don't need to add a Web address to the hosts file. The other option is to add your own entry to DNS that points to 1 to 7001 If you have a domain registered, you can edit DNS entries on your domain via your domain Registrar, that isn't a standard interface for this. But if you're using the popular see panel, for example, you might see something that looks like this. All you need to do is point whatever address you like to the I P address of 1 to 7 001 Once again, you need to configure your virtual host to match the Web address that you've chosen. The big disadvantage of using DNS like this is that changes can take some time to propagate around DNS before you can use them. Unlike with an existing domain name are the hosts file 22. Add a new virtual host with a DNS web address: add a new virtual host with a DNS Web address. Let's at a new virtual host using a Web address in DNs. As opposed to the hosts file. Previously, we created a virtual host with this content in its document Root, a single HTML file saying, Welcome to Site one. We added an entry to the hosts file for this at site Wanda local host and a corresponding entry in the Virtual Host configuration file that matched this address so that when we go to site Wanda local host in a browser, we can see the content in that folder. Let's create another virtual host, but this time using a Web address in DNS instead of the hosts file, I've created a second folder alongside the 1st 1 called Site, too, with similar content a single HTML file, but this time saying, Welcome to site, too. Let's start in the Virtual Host configuration file by making a copy of the virtual host, but we already have, and pasting it below the 1st 1 first will change the server name. I've chosen the DNS entry that already exist local host duct TV, and I've added the site to prefix to it then we need to change the folder for the document root here and here. Then all we need to do is save this file under that sit as before, so that the changes are recognized by Apache. We need to restart the Web server, and then if we go to a Web browser, here's the virtual host that we added previously. If we open a new tab and go to sites to dot local host up TV, which is the Web address we chose, we see the content from the second virtual host. So now we've got to virtual hosts running on the same Web server, both with the content in the root, as opposed to in a sub folder. 23. Virtual document roots: Get the document root from the web address: virtual document roots. Get the document root from the Web address. You might have noticed that these virtual host configurations are very similar in both cases. The sub domain that we've chosen matches the folder name where the document root is. If we have lots of virtual hosts that share the same configuration settings, it would be better if the virtual host could automatically choose the Document Root folder based on the sub domain. We can do this in Apache using a virtual document root. Let's add one here in our Virtual host configuration file. We'll add a virtual host section as before, then will add to the server name. I'm going to use one of the existing DNS Web addresses we saw earlier. Local host Doc TV. The asterisk here is called a wildcard and will accept any sub domain off this domain. However, we can't put a wildcard here for the server name. What we need to do is put something specific in the server name like that, and at the wild card as a server alias like that. Then, instead of a document root as before, we add a virtual document root like that in here, the percent. One will be replaced by whatever the wildcard matches. So if we put the address site three that local host dot TV in a browser, the document Root folder will be site three inside this folder and so on. Then we need to add of the directory section to allow the Web server to serve files from this folder on This time, the directory section takes the parent folder of where all our content folders are as before. Once we've saved the configuration file, we need to restart Apache in the except control panel to get the change is recognized. Then, to test this, I've added some new folders alongside the ones we already had. Site three and just to give one a name that's different to the others. My new site, each one has a single HTML file in it that displays a message showing which sight it is. Let's try that in a browser site. Three that works. And let's also try my new site, and that works as well. So all these sites are configured using the same virtual host, so you can easily add another site by simply adding a new folder alongside the others. adding the content. And as we using a wildcard DNS entry, we don't need to add an address to the host file, so it just works without even having to restart the Web server. It also has the added advantage that for a large number of sites, the size of the virtual host configuration file is reduced considerably. 24. Configure Apache using .htaccess files: configure Apache using HT access files. Up to now, we've been configuring the Apache Web server using its main configuration files, the main configuration file that we can access via the exempt control panel and also the separate Virtual Host Configuration file here. Apache has many configuration options for the Web server in general, on for each virtual host. As listed in the documentation here. We've already configured the server name and document root for each virtual host. For example, configuring the Web server like this is fine on your local computer as you have full access to the Web server to be able to edit the conflict files. However, when you copy your code live to a Web server on the Internet, you might not have access to edit the Web service configuration files. This is particularly true for low cost shared hosting. That's where HD access files come in. HT Access files are special files that allow you to configure certain aspects of the Web server by putting settings in a simple text file that you place with your website files. This file is called an HD access file. If you need to change an aspect of the Web server configuration, and you don't have access to the Web service configuration files, then you might be able to do it with an HD excess file. Also, if you're going to be doing something like installing WordPress locally, are installing a framework like Lauraville. Then you need H to access files to be enabled for them to work properly in order to use HD access files. First, they need to be enabled. We'll do that next. 25. Enable .htaccess files in the virtual host configuration: enable HD access files in the virtual host configuration before we can use HD access files . First, we need to enable them to do this. We need to edit the Virtual host configuration file that we edited earlier here in the directory section of our virtual host. We need to add the allow override all directive. This tells the Web server that eight TXS files are permitted to change the Web server configuration in this directory on all of its subdirectories. Then once we've saved the file, so that's Apache recognizes the configuration changes we need to restart the Web server like that. So now HD excess files are enabled for our virtual host Here in the roots of our virtual host, let's create an HD access file. The file has to be named exactly like this. A dots are a period followed by the name HT access in lower case. And here's our HD access file ready for us to add whatever configuration options we need. Next, we'll look at an example of what you can use HD access files far 26. Using .htaccess files: common usage and an example: using HD access files, common usage and an example. So what are some of the common uses? Far HD access files? Well, you can do many things for example, restricting access to certain files or directories. Rewriting the U. R L so that all requests go through a single script and many of the things many of the common tasks are listed on these two websites. So you can just look for what you want to do and copy and paste the code you need into your HD access file. Let's look at an example. Here's the virtual host we added earlier with the one HTML file we added called index dot html. If we visit our virtual host in a browser and specify the file name, the Web server serves as the file. However, if I remove the file name and press enter, it still serves as the same file. This is because in the main configuration file for the Apache Web server here, the Director V Index directive is used here to tell the server to send the index dot html file. If no specific file is requested, this is something we can change in our HD excess file. First, let's add a new file and call it Welcome, Dr Html. I've added some basic HTML that displays a simple message. We can see this file if we specifically request it in a browser again. If we don't request a file, the Web service sends us index dot html. Changing the setting is something we can do in the HD access file. So if we add this directive to our HD excess file and set it to welcome to HTML, then when we go to a browser and request the site without specifically entering a file name now we get the Welcome to html file. We can still access index dot html if we want to, but now we've used the HD access file to change the Web server configuration for this virtual host without changing the Apache configuration files. 27. Local databases: Access phpMyAdmin and create a new database: local databases access PHP my admin and create a new database. If you're creating a website, our Web application are you're going to install existing software like WORDPRESS. You'll need to store data on the server in a database. When we installed example, we installed the Maria DB database server Andi PHP my abdomen to administer it. And just in case you're wondering, Maria DB and my SQL are basically the same. When it comes to the code you use with them, the same SQL will work and you can administer them both with PHP. My admin PHP my abdomen is the two we use for administering the databases. Toe access PHP my abdomen in exempt, Go to local host slash PHP My admin in a browser. In here, you can view all the existing databases and create new ones. So let's go ahead and create a new database would click on the databases section First. We need to give our database and name. I'll call mine example, Then we need to choose a value for the collection. The collision option effects, how text values are sorted and compared in the database. There are many possible values, but unless you know you need to use a specific one. The utf eight m before Unicode C I, which is a bit of a mouthful, is a good choice to use as this works well with accented characters. We'll click on create. And there we have our empty database ready to create tables and at the data. 28. Add a new user account and grant access to a database: add a new user account on grant access to a database before you can access a database from Cold, for example, from PHP, you need a user account that has access to the database when we have a database selected in PHP. My admin. If we click on the Privileges tab, we can see the users that currently have access. Let's create a new user. Accounts will supply a user name a password, which we type twice because we can't see what we're typing on the box to grant. All privileges on this database is already checked, so when we click on Go, it creates a new user, which automatically has access to this database to connect to a database in code, you normally need four things. The host, which in this case is local host the database name we just created. One called example, the user name and the password. So with these four things, you can connect to the database we just created using code 29. Install WordPress locally: install WordPress locally. WordPress is a very popular content management system for creating websites, blog's and so on. In this video, we're going to install it toe our local Web server. First, we'll download it by going to the WordPress Dr Park website. Cooking on download on Downloading The WordPress Zip file, once downloaded, will extract the contents of this zip file to a folder. This will look slightly different depending on your operating system, but it's basically the same process downloading and extracting a zip file. The extracted folder will be called WordPress. You can change the name of this if you like. For example, if you want to have several installs of WordPress on your computer at the same time, which you can do with no problems, I'm going to leave it as it is next. Before we start the installation process, we need to create a database. We'll do that here in PHP. My admin. If we click on the databases tab first, we enter the database name, which can be anything you like. I'm going to call it WordPress one. Then we select the Kalay Shin, which will choose UTF eight m before General C. I then click create, and there's our database. It's always good practice toe. Have a separate user account for each database, so let's create a new user for this one. If we click the Privileges tab and then and user account first, we enter the user name, which again can be anything you like, will select the host name as local. As we're only going to connect from our local Web server, we'll add a password, which will repeat as we can't see what we've typed. Grant. All privileges on our new database is all the detect, so all we need to do is scroll down and click. Go, and that's our database ready to install WordPress. Next. We need to make sure the WordPress cold we downloaded earlier is accessible in a browser. I'm going to use the virtual document root, we added earlier. You can, of course, and a virtual host with a Web address in the hosts file if you like, it's up to you. I've placed the downloaded WordPress code in this folder, and it's called WordPress. So if we visit WordPress that local house duck TV in a browser, we'll be able to view the cold in this folder. Before we do that, just make sure that the virtual host you're using has the allow override all directive set on the folder so that the HD access files work. If we do that in a browser, go to wordpress dot local host up TV. We get the WordPress set up screen. It's telling us that we need the database configuration details we just created, and we got those. So let's click on, Let's Go! And here we enter the details that we had from before The dates based name, user name, password Host is local host and will leave the table prefix as it waas. Once we've entered all those will click submit. Depending on your system, you might get this page where it tells you it can't save the WP conflict file. This is normally permissions problem, but it's easy to fix, as all you need to do is copy the code shown here and in the WordPress folder, create a file called WP Config and paste the contents. Once you've done that, go back to the browser and click the Burundian stall button into your site. Title your user name for logging in to WordPress enter a password are except the suggested one into your email and finally click Install WordPress and that set WordPress has been installed. If we click Le Guin, we can log in with the user name and password we just supplied. And here's the WordPress dashboard and we can visit our site. If we click up here, I'm visit site. So now we have WordPress installed on our local Web server. 30. Conclusion: conclusion. So what have we achieved on this course? We started by installing the required software Web server, database server and so on. Then we learned all about how Web addresses work, first using the domain name system and then the hosts file. We then used the's to create virtual hosts. Allowing Goes toe have several websites on one Web server, each with its own route and home directory. Then we saw how Apache can be configured using HD access files. And finally, we learned how to set up and configure database for use with the website. So it's easy to run several sites like this on your local computer. Here's a simple site with some basic HTML. Here we've got the WordPress software installed, and here we've got my own PHP M V C framework, all running on the same Web server and all in the route instead of in a sub folder. So all of you need to do to add another site locally when you start a new project is to decide on a Web address. Either in DNs are in the host file. Create the document root folder configure the virtual host are using existing one create the database if needed and start developing. Look out for announcements detailing updates to the course. And please don't hesitate to contact me if you need help with anything. Something explained in more detail. Help getting your Web server configured. Suggestions for additional lectures are whatever. Don't forget. If I can help in any way, please let me know. Finally, I just want to say thank you for taking this course. I really hope you found it useful. I look forward to seeing you on the next one.