Localhost Setup for Web Development: Apache, WordPress & Drupal Setup | Chris Dixon | Skillshare

Localhost Setup for Web Development: Apache, WordPress & Drupal Setup

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (28m)
    • 1. Introduction

      1:34
    • 2. Localhost installation & setup

      7:50
    • 3. WordPress installation & setup

      9:01
    • 4. Drupal installation & setup

      8:14
    • 5. Thank you

      1:00

About This Class

When building websites in HTML, CSS & Javascript, it is easy to see what we are building because these languages work in the browser.

However when we want to move onto creating dynamic, database driven websites, we have to do things differently. We can either pay for a live web server which may not be an option during development, or we can simulate a web server on our development computer.

That is what this course is all about. I will show you how to install and setup a localhost to allow you to display websites created using serverside languages such as PHP. 

Then we move on to show you how easy it can be to install popular content management systems, WordPress and Drupal, including how to set up and add mySQL databases.

This course doe's not cover how to build websites, I have other courses available if thats what you need, but you will be left with the skills to successfully set up websites locally.

So if you need some help setting up a localhost, installing WordPress or Drupal, this is the course for you!

Transcripts

1. Introduction : Welcome. My name is Chris. If you're looking for a quick and effective guide to create in a localhost on your development machine, or if you need some help installing popular content management systems such as WordPress or Drupal, then this is the course for you. When building websites using HTML, CSS, and JavaScript, we can easily see what we're building because we work inside the browser. However, when we move on to building dynamic websites using languages such as PHP, we need a web server to process this. You either have the choice to develop a website using a live web server, possibly costing money, or you can setup a localhost to develop on your own computer. We'll get straight to the point by first of all showing you how to download and setup a localhost using a package which not only handles a web server side, but also allows us to create databases for our websites to interact with. I will show you how to get up and running to display standard PHP websites. Then we'll move on to the installation and setup of the popular content management systems, WordPress and Drupal to leave you ready to begin creating websites. This course will not cover how to build websites, but you will be left with the skills you need to get started. We'll build in dynamic websites locally. If you need some help with localhosts, setting up WordPress, or Drupal, hit the sign-up button now to get started. 2. Localhost installation & setup: So now let's get to work on installing our local host on our own computer. I'm going to head over to my web browser, and I want to search for MAMP, which is M-A-M-P. Then we need the MAMP to info. Would you select up. For this video, I'm going to use the MAMP package, which gives us Apache, the MySQL for our databases and also PHP. As well as the server-side languages. There is different local hosts which you can download, such as XAMPP or EXAMPP. I'm going to use a MAMP for this video. It's free to use, it's free to download, and it's available for both Windows and Mac. To get started, just click on the "Download" button, and then you scroll down to the version of your choice. I'm going to use in the Mac version. Click on the "Download" button to get us started. Just give that a few moments to download. Basically, MAMP is a package which includes a web server. So replicates a web server on your own computer. You can work with server-side languages such as PHP, without having to upload your website to a live web server. Also allows us to create MySQL databases that you can interact with. It can basically develop your website on your own computer. Then once it's finished, you can upload it and start only paying for a web server once your website is complete. There is a pro version available with MAMP, but the normal version is more than good enough for our purposes. Just give a few moments to download, and I'll return in just a minute. Welcome back. Hopefully, the MAMP package has been now downloaded onto your system. If you just go through the installation process in the usual way. I'm going to click "Continue" and agree to the license, install for all users, and I will go for the standard installation. Then just let that install. There we go. Now that's fully installed on the system. Actually get rid of this for now. Depending if you're using a Mac or Windows, just head over to the location which you've installed it. In my case, it's in the applications, and there is a MAMP pro, the standard MAMP folder. Just click on the "MAMP" folder. Then you can see inside there is various different files. But the one we're going to be mainly concentrating on is the HT docs, which is short for the hypertext documents. This is basically the folder or the location which we are going to put our websites in, that we want to be served up by the local host. I'll just leave it off just for one second. I'm going to create a new folder just on the desktop. I'm just going to simply call this PHP website. Just as a quick example. None is going to open this up inside the brackets as an example. Distract the N. I'm going to create a new page. I'm going to create a very basic index page using PHP. To say that inside the folder as index.php. Then open up our PHP brackets, and also the closing tag. I'm just going to create a simple echo. Then I'll put this between H1 tags. We're going to make a message say in PHP, website is working. Then save that. If you know how to open this up inside the browser, you should know there's a problem. Let's opened so up inside a Chrome. Just scroll down and find your web browser. That's the contents of our index page, but it's not exactly what we wanted. Because when we're serving these pages as a website, we don't want to display all the PHP, we just want the content or the HTML to be returned. In our case, we just want the text in between. Now what we need to do to get this to work is we need to drag our PHP Website folder inside the HT docs. Just drag it over and drop down inside there. Then if you just open up our MAMP program, and then click on "Start a service". You know it's in the top corner [inaudible] the Apache server, and MySQL. If we scroll down, we can see some information. We've got the host as a local host and the user and password is being set to root. That's all working correctly. Inside the MAMP program, if we click on the preferences, you can find out a little bit more about the version of PHP we're using. In click on the "Ports". The Apache port is one which you are going to be using inside the browser. That's double eight, double eight. If you go back over to chrome, and now we can reopen our index.php inside the local host. Then if we type in local host, and then we need a colon. Then because we're using port 8888, just typed out inside there. Then to get our folders we can either just go into it, just as is a, and will we see exactly what is inside the HT docs. In our case it shows PHP website, or you can actually type that in at the end of the URL. You click on "Cider". There we go. Now rather than having all the PHP tags on the echo printing to the screen, we've now got the actual HTML returned. Now the PHP Website is now working, as it on alive webserver. If for any different files or folders inside the HT docs, you just need to use exactly the same local host, the double eight, double eight. Then just change the forward slash to the directory that you put inside there. You can see which directory we working on if you just go into the web server. You can see there's our file path to the HT docs. If want to look a little bit further into it, you can also click on the "Start" page, and it takes you back to the welcome sign. You can click on the "Tools", and you get an options go to PHP, my admin. That's the set that we need to use if we want to create any databases. You can also see on the right-hand side all the different versions of PHP, Python, and Apache for example, that we're currently using. We'll just leave that video there. That's how we can create a local host on your own machine, and several PHP websites without the need for a live web server. 3. WordPress installation & setup: Welcome back. Now we should have our localhost. Also, open our machine using MAMP. We've created a simple PHP website just as an example of how the localhost works. In this video, we're now going to move on one step further. I'm going to download WordPress. When developing WordPress websites, you have the same options as other PHP websites. You can either serve them on a live web server, and you may need to pay for that service, or when developing a new website you can install it on your own machine. We can use MAMP or a localhost to get that all working. The reason we need to do that is because WordPress is wrote in PHP. This is why we need the localhost to get it all working. To install WordPress, just go over to Google Chrome, and then I'm going do a search just for our WordPress and then scroll down. The one we need is WordPress.org. WordPress is actually really easy to get installed. We just start by clicking the "Download WordPress" button and then click on the Chrome version. It's not that big a file, so it doesn't take long to download. WordPress claims that the installation should only take five minutes. It usually takes even less than that. Just go into the downloads and then unzip the package. Just double-click on there. Then we have the WordPress folder. Then just like all our other PHP websites, you then need to download WordPress and then drug it over into the htdocs. Now we've got the normal PHP website and also the WordPress package. We'll just get rid of that now. Then before we actually go through with the installation scripts that we need to do for WordPress, we need to actually create a database to work with. If you go over to MAMP and click on "Open WebStart Page", and then go to "Tools", "phpMyAdmin", and it's actually pretty simple to get started with the databases. Just click on the "Databases" tab, and then you should see Create Database, just below that we can add a name. I'm just going to call mine wordpress-demo and then click on "Create". Once I've selected, just click on "Privileges". This is the section where we can add different users. We can add a user that can access or edit the database. You've got two options. You can either create a new user or you can stick with the standard real user which has all privileges, meaning you have the rights to pretty much anything that you want with the database. You can set up different users with different privileges and with also different passwords. But for now I'm just going to stick with the real user, which has the username of root on the password of root. Then before we run the installation scripts, I'm just going to go over to Brackets, and then we need to just edit one of the files. I'll just to go into WordPress, and then I'll just expand this a little bit longer. You can see there's a folder called wp-config-sample, just drag that into your text editor. There is one or two things we need to do. This is the base configuration for WordPress. We basically need to edit the database information just so WordPress can connect with the database. If you scroll down, in my case, it's on line 23, we need to add the database name. We called our database wordpress-demo. If you called yours something else just change that accordingly. The username was root. The password, by default, is also set to root. The host name is localhost, you probably won't need to change that. Then if you scroll down a little bit further, we need to create some unique keys and salts, this is for security. WordPress gives you a link. You can just copy this link which is being provided. Copy that, and then go over to Google Chrome and paste in. Then we've got a randomly generated set of numbers, just select all and copy, and then we can paste these back into our config file. Just delete this section and then paste in the keys and salts which you just copied. Then scroll down to the database table prefix, and this changes from the default. This can be anything that you want. I'm just going to call it wpdemo, and then save that. Then just close down Brackets. Then go back over to the WordPress folder inside the htdocs; "Applications", "htdocs", "wordpress", and then the file that we've just edited, wp-config-sample. The last thing we need to do is just rename it and remove the word, sample, from the end so it's just wp-config. Then go over to your browser, and then we need to go to localhost:8888/wordpress. Choose a language which you prefer, and then click on "Continue". Then we just need to provide some information about the website that we're creating. The site title, I'm going to call it WordPress Demo, add a username, and then you can add a password, I should call mine demo. Then just confirm if it's a weak password. Obviously, you wouldn't have this in a live website. Then put inside an e-mail. Then lastly, you have the choice if you want search engines to index this site. It doesn't really matter this demo, so I'm just going to click "Install WordPress". There you go. That's it. WordPress is all now successfully installed. If you want to check out the website or the admin area, just click on "Login", put in the username, and the password in my case was demo, and then login. Then we take into the back-end of WordPress or the dashboard. This is not intended to be a demonstration of how to use WordPress, but basically have the dashboard and the menu on the left where you add different posts, different web pages, you can change the appearance by adding new themes, different menus, you can also search through the plugins and add different plugins to add functionality. You can manage users and there's various different settings to customize your blog or website. If you want to check out what the website looks like by default, just click on the website's name and you'll be taken to the front-end. By default, WordPress is a blog front-end. You can see some demo posts. There's a search box and there's a sidebar which shows some recent blog posts, recent comments, and different categories and archives. If you want to do some customizations, just have a click on the blog name and that'll take you back to the dashboard, or you can just click on the "Customize" tab. You can do some really quick changes, such as changing the images, different colors, and various service settings. Then once you finish that, just click on "Save". That's it. That's how quick and easy it can be to install WordPress on your own machine to begin development without the need for a live web server. 4. Drupal installation & setup: Welcome back. So far we've taken a look at how we can install a local host on our own machine, which can then serve our PHP websites. We've also taken a look at how we can install WordPress locally. So we can begin to create WordPress websites without needing a live web server. In this video, we are going to take a look at another popular content management system, which is also built in PHP called Drupal. If you just go over to Google and search for Drupal, which is D-R-U-P-A-L. Now we need to go to drupal.org. Drupal is also really popular and really good for creating websites. At the time of recording this video, we've just got onto Drupal version 8, which has got lots of great improvements from previous versions. To get started, go to the top bar and click on "Download and Extend." Then we need to download the Drupal core. Click on the "Download" button there, and then if you scroll down you can see various different versions we can install. I'm going to go for the latest version and then select the download on the left. Then just like we did with WordPress, we need to go to the Downloads folder, and then unzip that package. I'm just going to call this Drupal, and then put this over into the htdocs. In applications, MAMP and htdocs. Then just drug it inside the Drupal folder and I shall move the app, make sure it's inside the htdocs. There we go. That seems to be in the right place now. Now we've got the Drupal folder, the PHP website, and also the WordPress folder. Let's now go over to phpMyAdmin, and then go into the menu on the left-hand side and select New, and then create a database for the Drupal installation, so drupal-demo. Again, just like the WordPress installation, I'm just going to leave at the root user and also the password as root. But you can add a new user with a different password if you prefer. This is also really easy to install. I'll just go over to Chrome and go to localhost 8888/drupal, and then "Enter." Select your language, Save and Continue. I'm going to go for the standard installation. Then we check into the list of requirements. We've got pretty much all this covered with the MAMP installation. If you get the message about the caution, we don't need to worry too much about that because we're not on a live web server yet. We don't need to worry about that. We can go down to the bottom and click on "Continue Anyway," the database. We've got a MySQL database with the database name of drupal-demo. The username is root, and the default password is also roots. Click on "Save." Then I should start the installation. It doesn't actually take long to install so just give that a few moments. Once that's installed, we'll then take into the site configuration page. We can just put in some basic information about the website. Just Drupal demo for the site's name, I'll add an e-mail address into there, a username and a password. I'm just going to call this demo once again, and then confirm that. Again, we're given a message if the password is weak, but don't worry about that for this demo, set the default country. You just put your country inside of there. You can also change the time zone if you want, and then leave the notifications unchecked or in checked, just whichever you prefer. Click "Save" and that's it. That's Drupal now setup. This is the default homepage. You can see when you go to Drupal. It's pretty basic, but it's a starting point to create your own website. This is not intended to be a course for how to use Drupal, but you can quickly get started creating your website, just with the menu at the top. I'll just click on Content, you can add things such as articles for press releases, news or blog posts. You can create basic pages which you can use things such as about us or contact pages. The Structure and Blocks are just different party website, which are modular and you can put them inside different regions. In the Bartik theme, if you click on the Demonstrate block regions, you'll get an image and it'll show you all the areas of the website. For example, we've got the primary menu, the header section, the secondary menu, and then we can grab blocks of content. We can place them inside the sections. Appearance is the area which you're going to use for changing to different themes. We're using the Bartik default theme and also the Seven admin theme. Just like WordPress, there's many different free and paid themes that you can download or if you're up for the challenge, you can even create your own. Next, we've got the Extend tab. The Extend tab is used to add different modules to the standard Drupal core. If you scroll down, you can see all the different modules which are provided by default. There's hundreds of thousands of different modules which you can download, and a lot of them it's for free if you want to add more functionality to your website. The configuration or the settings page, you can change various things such as the site information. This is where you go to change configuration for your site. You can check out the performance, if you've got any errors or logs. You can also check those out too. You can change regions, you can change the date format and many more other things. You can also manage the users from the People tab. You can create users, you can remove users. You can change the user's different permissions and allow them access to different parts of your website. There's also a report overview, and lastly a help menu if you get stuck with any parts of Drupal, just click on the help topics at the bottom and you can get some more information or even clarification about some of the terms Drupal uses, such as fields. That's it. That's how you install Drupal on a localhost without the need for a live web server. 5. Thank you: That's the end of this course. A big thank you for joining me. I hope it's filled you with the confidence to set up a local host on your own machine. In a short space of time, we've covered the installation of Mamp, which has given us a Apache server. It gives you the ability to set up MySQL databases and also allows us to serve dynamic websites on our own computer during development without the need for a live web server. We then moved on to popular content management systems. We've started with showing you how to download, how to install and then how to set up WordPress and also link it to a database. We then moved on to how to set up an install Drupal, another popular content management system. We'll have both WordPress and Drupal all setup and ready to go with their own databases. You could begin to create your own websites using those. Thanks for joining me, and that's the end of this course.