Managing a Hosted Web Site
Managing a Hosted Web Site shows how to set up a web site on a host's server and perform common server tasks. Working in two web hosting utilities, cPanel and Plesk, as well as in a custom control panel, author Ray Villalobos explores purchasing a domain, setting up FTP accounts, and configuring web mail. The course also explains setting up password protection, creating a MySQL database, and working with subdomains.
Topics include:
· Choosing server features
· Getting a domain name
· Using an FTP client
· Understanding link references
· Setting up webmail with forwards
· Protecting user information and directories
· Working with databases
· Creating shortcuts with subdomains
Introduction
Welcome
Hi! I am Ray Villalobos, and welcome to Managing a Hosted Website. In this course, we will look at how to host a website with popular web hosting providers. I will start by showing you how servers work and what things to look for when choosing a service provider. Then, I will show you how to pick a good domain name and go through the process of purchasing and setting up your website server. We will also see how to set up useful features like FTP Accounts, Mail, Password Protected Directories, databases, and subdomains with popular control panel interfaces.
We will be covering all these features plus plenty of other tools and techniques. Now let's get started with Managing a Hosted Website.
Using the exercise files
If you are a Premium member of the Lynda.com Online Training Library or ifyou’re watching this tutorial on a DVD-ROM, you have access to the Exercise Files used throughout this title. If you open the Exercise Files folder, you will find a folder with assets I used to create some of the projects on this course. You will also find a code snippets file with some code that I used on some of the videos. Finally, a Starting Points folder with subfolders for files you will need for different videos. In each movie that requires a Starting Point folder, I will ask you to open up the Exercise Files, open the Starting Points, and find the starting points for the video you're watching.
You will need to copy the Working Folder onto your Desktop and start working on the files. If you are a monthly member or annual member of Lynda.com, you don't have access to the Exercise Files, but you can work along from scratch with your own assets. So let's get started!
Working With a Hosting Provider
Introducing servers
Before we get started working with servers, you might be wondering what a server is and if you really need one for yourself or your business. The Internet was created to be a network of computer networks. The cool thing about the Internet is that it's always changing. When you turn off your computer, you break the connection to the Internet, but the Internet itself continues to exist. That way it's like a living organism that grows and shrinks depending on the computers connected to it at any point in time. When working on the Internet, a computer can act as either a client or a server.
Clients are computers that are connected to the Internet for short periods of time. They do this in order to get pieces of information, say a video on YouTube or a Wikipedia article. It can also send information or interact with other computers, like when you post a photo on Instagram with your cell phone, or chat on Facebook. Servers are also computers connected to the Internet, but unlike clients they are always running. They receive requests or information from other computers usually clients. They run different types of software that give up or serve the requested information.
Servers can serve different types of files like video, email, or chat. Each of these files are processed by different applications that understand the languages they are in and then optimized for their files. These languages are known as protocols. One of the protocols you are probably familiar with is called HTTP.There is a lot that you can do online without a server. You can create a blog using a service like Blogger or WordPress.com. You can also post videos in YouTube or upload your photos to Flickr. You can even create a Facebook fan page.
You will need a Web server when you want to have ultimate control over the experience people have when using your data. Having your own server provides more flexibility than using or renting services from another website. It let you be in control of all your information and present it in any way you want. You may for example want to run your own Internet radio station or have a great new idea for a better social network. You might even want to create a new way for people to interact with their cell phones. Running or renting a hosted server lets you have absolute flexibility over how your information is served and what services you support.
You can do a lot without a server but dreaming up the next big Internet application requires a control you can only get from your own server. 1
Understanding the different types of hosting providers
When researching hosting companies online, you need to know why some services and features are more expensive than others. Let's look at the different types of hosts and the options they offer. A hosting provider is a company that specializes in running Web servers. They provide hardware with fast connections and easy-to-use control panels for administering your site, as well as software you may want preinstalled and configured. The prices for these services vary widely from just a few dollars a month to hundreds or thousands of dollars depending on how much power and customization you need. First question to ask yourself when choosing a host is to figure out which type you need.
They tend fall into four categories; Shared, Virtual, Cloud or Dedicated hosting. Shared hosting means that your server runs your site in the same place as many other sites and services. You are sharing a fixed amount of resources, processing power, memory, and hard drives with other users. This is usually just a few dollars a month and a great place to start. The disadvantage is that problems with one host can affect the others. So in that way it's less secure than other plans. Also, power and customization is often limited.
You may not be allowed certain types of access and might not be able to install your own software. Virtual hosting means that your server runs in a virtual environment. It's like telling a single computer to behave as several machines. Each virtual server behaves as a separate entity and has a guaranteed amount of processing power, memory, and hard drive space that will only be used by that server. You can get root access so you can install your own software, but you'll still be sharing memory, hard drives, and other resources. But if one virtual box crashes it doesn't have any effect on the other service in the same location.
If you need more power or custom software, but don't want to pay for a dedicated server, then Virtual hosting is a much better option. Cloud hosting means that your server doesn't run on an actual machine, but on a cloud or network of computers. If any one computer in the cloud fails the others take over the processing needs of your website. This is more efficient than Virtual or Dedicated hosting, because websites don't always utilize 100% of the resources of a computer. If one cloud is super busy, then on a cloud server, it simply utilizes more processing power.
In this type of hosting, memory and hard drive space adjust to your needs. You pay only for what you use, so this can be more economical for larger sites and more efficient for the hosting provider. The Dedicated hosting, you get a machine or group of computers whose only purpose is to run your services. No one else shares the resources on your server and you have full root access, which means you can install whatever software or additional hardware is necessary to run your sites. You can even group servers together and create your own cloud. This is the most expensive type of hosting but also the most flexible.
There are many types of companies providing hosting services, most of them offer their own versions of these types of hosting plans. It's important to research and ask questions about how faster server will be, the number of other hosts running on the same machine and the amount of customization you'll have on any hosting plan.
Choosing server features
Server plans come with different features. Let's take a look at some of the options you might want to look for when choosing a server. When choosing your Web server, one of the most important decisions is to pick the type of operating system running on your server. Like with your computer, the operating system determines the software that you can install on your machine and the types of services that will be running. Your choices are usually between Windows and Linux operating systems. Although, either operating system can run things like PHP and SQL, they each have software that is written specifically for that operating system.
Linux is an open source operating system, which means that it's free andcustomizable by anyone with enough experience, so more cutting-edge software and services are developed quicker for these servers. Windows servers are developed by Microsoft as a commercial product, which cansometimes make them a little more expensive, but they have a lot of greatservices that let you build things quickly and efficiently. My suggestion is that you research the type of software you want to run on your server and then get a server that has the best support for it.
Scripting software asks your server to preprocess files before they are sent to your users. It's a powerful way to create dynamic websites. You need to make sure your server supports the server-side scripts you need. For example, if you are going to install WordPress, you need to make sure you can run PHP.Some servers will only allow you to run certain types of scripts. If you want to use .NET or SharePoint for example, you will only be able to do that on Windows servers. If you're looking for a server with the ability to run different types of applications, Get, Node, Python, Rails, Ruby, Pearl etcetera, make sure you know which plans and servers support the features you need.
All servers have certain physical limitations like the amount of storage, the amount of users, or how much information can be transferred at the same time. Often when looking at hosting companies, you will hear terms like unlimited storage and unlimited file transfer. Make sure you ask questions about what that means. They may technically offer unlimited storage but limit the amount of files, or even though, they may offer unlimited file transfer, they might throttle down or slow down the server if your site gets too busy.
On cheaper servers, there might be other limits, like the amount of memory your server is allowed and how many things a server is allowed to do at the same time. They might throttle or slow down the server if your site gets too busy. Those all have impacts on performance. It's best not to just go buy price, but research your choices carefully. Talk to your friends about the hosts they feel comfortable with and talk to somebody at the hosting provider to make sure your traffic needs and expectations will be met. When you are typing an address like Lynda.com into a browser, the name you use is called the domain name.
One of the options when purchasing a Web server is how many domains you can have on the same machine. Having the ability to have multiple domains in your sites, lets you have multiple websites on the same account. Check to see that what you're paying for allows you to create an adequate number of domains for your needs. Subdomains are the text that can appear before a domain name. So in addition to using a website like Lynda.com you can create a subdomain like blog.lynda.com. It takes people directly to your blog instead of your website. A hosting account might allow a number of these, so check that you're allowed to create a good number of them because they can be handy.
When you have a custom domain, you can create your own custom addresses using the domain, so instead of something like frvillalobos@gmail.com, you can use something like ray@yourdomain.com. A good hosting plan will let you create a number of email addresses or mailboxes. You might want to be able to create an address like info@yourdomain.com, that is not a real mailbox but gets forwarded to someone within your organization. Forward, it can then be reassigned to a different person if your needs change.
Mailing Lists and other services can be provided by your host, so that you cando things like send newsletters to your clients. In order to manage your server software and settings, a hosting company can provide a Control Panel, which is just an interface to make it easier for you to control and set things up on your sites. You might use something like cPanel, Plesk or even the host's own custom control panel. Each control panel is different, so if you're used to using cPanel, it might be good to check if the host runs that software or some other software.
Another important decision is the ability to host databases. Some types of servers accept only some type of databases. There is usually a limit as to how many databases you can have on cheaper plans, so make sure you have enough. For example, though the plan might allow you to host 100 domains, if they only support one MySQL database, that would limit the amount of WordPress sites you can host on the same plan to one, since each WordPress installation takes up a database. This isn't a comprehensive list of features, but just some of the most important things to look out for.
Each hosting provider should have a full list of features and be able to answer questions about their limitations.
Getting a domain name
Your domain name has an impact on how people arrive at your website, so it'simportant to pick the right domain name and make it easy to remember for users. It's something you should think about before you set up your server.Domain names should be easy to remember, hard to misspell, not too longand keyword driven. If your domain name is confusing or hard to remember people won't be able to find you. Although you can have as many as 63 letters in your domain name, it's a good idea to keep it short and to avoid abbreviations. Be wary of names that might be typed into a browser in many ways, words like Cincinnati or Massachusetts.
Careful of words with letters like c or s that might be confusing whenpronounced, words like cents or scents. Also words with silent letters like wrinkle or listen. They can be tough to spell. You might have problems with words that sound the same, words like feet or feat. When you use tough words, it's a good idea to use them with other words so that their spelling has context. Tell someone your domain name and ask them an hour later if they remember it. Better yet, wait a day and ask them if they remember it then.
If they can't remember, it perhaps it's too complicated. When you sign up for a domain name, you will also need to pick what's known as a Top Level Domain or a TLD. This is the last part of your domain as in .com .org or others. Top Level Domains are supposed to be logically related to their function or country of origin. The .com domain for example is supposed to denote a website that belongs to a company, while the .org to a government organization. .edu is supposed to be for educational organizations and each of the country codes is supposed to denote sites belonging to those countries.
For example, .ly sites are supposed to belong to sites from Libya, and the .tvsites are supposed to belong to a country named Tuvalu. The rules are often bent. Some domain registrars will allow you to register sites with a .cotld, which is technically supposed to denote sites from Columbia. There are also additional TLDs under consideration. Last year in 2011, the board governing TLDs, decided to end the restriction on how these TLDs were named. It will be possible to create generic TLDs with almost any extension.
For right now, that's extremely expensive and not yet available. It's also important to pick names with words that people might type in when searching for sites like yours in Google or other search engines. A law firm by the name of Matthews & Matthews is better off with a name like divorceatlanta.com than matthewsandmatthews.com. Search engines take a domain name of a website into consideration and if there are keywords in the name, they are better for SEO or Search Engine Optimization. Once you figure out what TLD you want to use, it's a good idea to research possible domain names before you get your server.
A great place to use is bustaname.com. It has a Quick Domain Checker where you can quickly check to see if any domains are available. If you are having a hard time finding a domain that you want with the Quick Domain Checker, you can also add a series of words and bust name will try to find domains that combine those words. Once it finds some suggestions, if you roll your mouse over the triangle to the right of each word, it will give you a list of related words that you can use. You can even create groups to avoid certain words from being combined.
There are additional options at the bottom of the screen to help you get even more combinations and options. Once you find a domain you like, you can click on the Buy button to purchase this domain directly from one of the registrars listed right here, or you could simply write down the domains you like and use them later when registering your sites. Choosing a domain name is one of the most important decisions you will need to make before setting up your site, so make sure you take the time to research and pick a domain that your users can easily find and remember.
Purchasing a domain with cPanel
Once you have picked your domain name, it's time to purchase your server from a host provider. There are many host providers to choose from. I am going to show you three popular managed website hosts that use three different types of control panels to help you manage your server. We will take a look at Bluehost, which uses a control panel called cPanel. Media Temple, we will choose a virtual server that uses Plesk as a control panel, and 1&1, which uses a custom-built control panel. Let's start with Bluehost.
From the homepage of Bluehost, I am going to choose the Sign Up Now button and the first thing I need to do is tell Bluehost which domain name I want to use. I have already picked the domain that I want to use, so I am going to type it in, the I Need a Domain Name box. Now I am going to hit the Next button and it's going to check to see if that domain name is available. Now I will fill out this Account Information area. A lot of times when signing up for these domain names, you'll see a lot of additional services. Make sure you read carefully through the services that are offered and pick the ones that you need.
In this screen, Bluehost is asking for some upgrades that you might want. Take a look at what they offer and make sure that you choose carefully the features that you want on your website. After you sign up for these services, you should receive a confirmation email from Bluehost welcoming you to the site and giving you some additional information. The next thing we'll need to do is to create a password for our account. I am going to click on this Create your password link and type in a password.
Once you type in your Password and your Verification PIN, you can hit the Submit button. Now that my password has been updated, I can use it to log in to Bluehost. Now that you have logged in, you can click on one of these tabs to go either to cPanel or your Domain Manager and continue to customize your website.
Purchasing a domain with Plesk
On Media Temple, I am going to go to the Web Hosting tab and click on theDedicated Virtual server and select this Activate button. I am going to choose the 512 MB option here and click on Activate. In this screen, I am going to type in my domain name and hit Continue Order. I picked up this domain name previously so I knew that it was available. I am going to select Continue Order and type in my Contact Information.
With Media Temple as with other providers, once you finish signing up, you'llneed to check your email so that you can complete your registration. We will need to create a password for our account by clicking on this link. Once you set a password, we can click on this link to go to the main login page. Our Primary Domain will be the domain name we typed in earlier, our Email will be the email that we used to create the account, and the Password is thepassword that we just typed in.
In Media Temple, you also have a Domain Manager area as well as a Plesk area where you can use the control panel to manage how your site works.When you click on Plesk to enter your control panel, you might see a link likethis, just click Continue to get into your Plesk Control Panel. You will need to check your email again and make sure you check out the Plesk Admin option here to set the password for Plesk. Your Username will be admin.
Now we can go back into our Plesk tab, type in the Username admin and ournew control panel and our password and click on the Log In button to log in to Plesk. From here, Plesk it will assign us an IP Address and the IP Address is just the physical location of the machine on the Internet. If you are only using one website, you don't need to worry about it. You might need to retype in your password just to make sure here, and click OK. Now for the User interface view, I am just going to choose Individual/Personal Use and you could choose one of these different interfaces, which will work fine for me. So I am going to click on OK to finish out my changes, and now I'll type in some information for the admin user.
After we type in some information for the admin user, we will need to type inLogIn information for this particular website. With Plesk, you can serve up multiple websites and each website needs to have its own individual login information. After this our Plesk setup is complete for Media Temple and we can start configuring the rest of the options for our website.
Purchasing a domain with a custom control panel
To order Web hosting with 1and1, I am going to go to 1and1.com, and then go to the Web Hosting tab, choose Web Hosting solutions, and in my case, I am going to choose a Hosting solutions for professionals - Linux. From there, I have to pick of these three different options. Depending on which option you pick, you will see that there are different parameters for the accounts and different options. I am going to choose to sign up for the first 12 months, so I am going to click on this Sign Up link right here.
I am going to check the availability of my domain, which I picked previously. I am going to hit Check. I see that my domain name is available, so I am going to hit Continue. Now I don't really want any of these other options, so I am going to make sure I click those off, and hit, No thanks, continue without selection. I don't really want a 1&1 E-Shop, so I am going to hit, No thanks, continue order. I am going to check my options here and everything looks fine to me, so I am going to click the Continue button to place my order.
And I am going to hit Continue because I'm already in the USA and it's alreadyselected as my option here. Now I am going to type in my personal information here and I am going to hit the Continue button to keep on going. Now I need to type in a password for my Control Panel. 1and1 uses a custom control panel so it will be a little bit different than most of the other websites you go to. A lot of websites use custom control panel, so this will be a good example of what those are like.
In this screen, you are going to choose your payment options. It looks like my payment has been accepted, so I am going to hit Continue and review my Contact Information. You should read the Terms & Conditions of your agreement, they are rather lengthy, and I am going to click to accept the Terms & Conditions and place the order by hitting the Order Now button. As with other services, once you complete your order, you will need to check your email for additional instructions on how to log in to your control panel.
With 1and1 you'll need to know the Customer ID to log into the control panel from 1and1. You can get to the Control Panel by going to admin.1and1.com or clicking on this link on the email. You will need to type in your Customer ID and the Password that you use when you created the account. Now you can also sign up with your domain name but chances are since I just set up this account, the domain name will not be available yet, but after the domain name is ready, I can use it to sign up instead of my Customer ID. So I am going to hit Log In and now I am ready to manage my website with the 1and1 Custom Control Panel.
Setting up Your Coding Environment
Setting up FTP accounts with cPanel
When you go to a web address like lynda.com or bluehost.com, you'reconnecting to a Web server, which is a computer that sends you files stored on its hard drive. But how did the files get there? Files can be sent to a server using a protocol or language called FTP, which stands for File Transfer Protocol. In order to send files to the server with FTP, I need to have an account that controls where on my servers the file should go. Web hosts always create a default FTP account for you. So I am going to show you where you can get your default FTP account information, as well as how to create a new account, perhaps something you can use for a client to be able to send you files.
I'm going to show you how to do this with Bluehost which uses a popular control panel called cPanel. To log into our control panel, go to the homepage of bluehost.com and find the Control Panel Login. On this next page, I want to type in the Domain name and the Account Password that we used to set up the Bluehost account. This is the Bluehost Control Panel. There are a lot of options here, but the one that we need is towards the bottom of the page under Files.Find the FTP Accounts icon and click on the link.
Here you have two options. You can add a new FTP account or use the default account that was created when you set up your Bluehost account. The login information for this account is at the bottom of the screen. You can click on the Configure FTP Client link to find the FTP information you'll need to type into your FTP client. At the bottom, you can also see links to Configuration Files you can use with popular FTP clients. If you want to create an FTP account for one of your clients, you will need to go to the top of the screen.
First, you will need to type in a Login. Your login becomes whatever you type in here plus the @ sign and the name of the domain. In this case, our Login ends up being clients@vehicleclassic.com. Now you type in a password. Notice how this control panel automatically added a path to the directory area. Our master account has complete access to all of our folders, but you can limit the client's access by typing in folder names here. This client will only have access to the clients folder, that's inside the public_html folder.
If the folder doesn't exist, it will create it for us. The public_html folder is a special folder where you can place all of the files that are going to be accessible through a browser. Click Create FTP Account, you can scroll down to the bottom of the screen and see that an additional FTP account has been added to our list of FTP accounts. Once you have an FTP account, you can use an FTP client to upload and download files. It's also nice to be able to create special FTP accounts for clients where they can drop off files.
Setting up FTP accounts with Plesk
Files can be sent to a server using a protocol or language called FTP which stands for File Transfer Protocol. I'm going to show you where you can get your default FTP Account information using Media Temple's Plesk Control Panel, as well as how to create a new account for a client to be able to send you files. To log into your control panel, go to the homepage of mediatemple.net and find the Login button. On this page, you will need to type in the Primary Domain, the Email that you used to set up your account, as well as your Account Password.
If you don't remember this, search your Inbox for an email from Media Templewith this information. This is the Media Temple Control Panel. Media Temple has two sets of control panels, one for controlling your account and one for Plesk. To get into your Plesk Control Panel, click on the Plesk button in your Media Temple Control Panel. You are going to be redirected to the Plesk interface. If you want to get there without going to the Media Temple Control Panel, you can simply type in your Domain name and add the port number 8443 at the end.
It might be nice to bookmark this for future use. Your Username will be admin and the Password will be the password you used when you created your Media Temple Plesk account. Note that this can be different than your Media Temple account. When you created your own Plesk account, an FTP account was automatically created with the information we provided. To manage our website, go to the Website & Domains tab and click on the FTP Access link. When you created your own Plesk account, an FTP account was automatically created with the information we provided.
If you want to modify your password for the default account, click on the account link. From this page, you can modify the password for this account. If you don't remember the password for your account, you can go ahead and change it here. Make sure you write down the username and password, you will need it to set up your FTP client. I will click the Cancel button to go back to my Website & Domains manager. Next, I want to create an FTP account for one of my clients. But by default an FTP Account will have access to my entire server. I don't want clients to have access to all of my files, so I need to create a folder and limit the access of my clients to only that folder.
To manage your files with the Plesk, you can go to the File Manager link. In the File Manager, we can see all of the files on our server. There's a special file called httpdocs, which is where we can put all of the files that we want people to access through the Web. I am going to click on that link because I want my clients to be able to upload documents for a website I'll be preparing for them. Now I can add a new directory by clicking on the Add New Directory link. Now I can add a new directory called clients and click OK to create that directory and add it into my httpdocs folder.
Now I am ready to create the FTP account. I am going to click on Website & Domains, and go back to the FTP Access link. Now I am going to create an additional FTP account by clicking on this Create FTP Accounts link and now I can type in the FTP account name. Under Home directory, I want this client to only have access to the client folder which is in the httpdocs folder, so I will type in /httpdocs/clients. And now I create a password for my clients and I am going to hit OK.
Once you have an FTP account, you can use an FTP client to upload and download files. It's also nice to be able to create a special FTP account for clients where they can drop off files.
Setting up FTP accounts with a custom control panel
The majority of web hosts use Control Panel software to allow users to manage servers and create FTP accounts. The FTP accounts allow users to upload and download files. Some services like 1and1 have developed their own Control Panel Interface, so let's take a look at how to manage FTP accounts with a Custom Control Panel. To log into our control panel, go to the homepage of 1and1 and find the Customer Login button. You have a couple of options when logging into your control panel. You can use the Customer ID that can be found in the email you received from 1and1 when you set up your account.
If your domain setup is complete, you can also use your domain name which is easier to remember. The custom 1and1 control panel has a lot of different sections. To manage your FTP accounts, look in the Access section for a link to the FTP account. As with other control panels, 1and1 automatically creates a default user for you. The password is the same password you used to log in to the control panel. If you need to reset your password, you can change it by clicking on the username and typing in a new password.
I will hit Cancel to go back to my FTP setup. If I want to create a new user, I will need to hit the New User button. On the next screen, I need to type in a Username. The account ID will be added to the front of my username, so my username will be the letter U, a number, then a dash, and then what I type in here. Typing your password and an optional Description, the Description can be useful if you have a lot of FTP accounts, so you can tell them apart. Next, you can see the option to give users access to an existing directory. By default, any new FTP accounts I create will have access to all of my folders.
If I look at the pop up, I can choose from the list of directories or folders on my website. Right now it's empty because my website is brand-new. I can also create a new directory so that this account can only access information in that directory. I want this account to have access only to the files in a clients folder.I will need to choose this option and call this new directory clients. I'm going to hit the Save button and 1and1 will create the FTP account. When you make changes to FTP accounts or domain names, you are going to need to wait a few minutes to make sure that those changes are available.
I am going to click on Go To Overview and you'll see that my new account has been created. This account only has access to the clients directory. And you'll see that my user account has been created, this account only has access to the clients directory. Once you have an FTP account, you can use an FTP client to upload and download files. It's also nice to be able to create a special FTP account for clients, so that they can drop off files.
Using an FTP client
Now we are ready to start uploading the files to our server and find out how toaccess those files through a browser. To get started, we are going to need an FTP client or application. If you are on a PC, you might look into FileZilla, a popular and free FTP application. On the Mac, a popular option, although not free, is an FTP client called Transmit. I like another client called Cyberduck, because it's free and available for both Macs and PC's. Once you download the software, you might need to look in your default download folder for the application.
On a Mac, applications are normally stored in the Applications directory. So I can just drag the Cyberduck application into the Applications folder, find the application in the Applications folder and drag a copy of it to our dock. Now I can open the application by clicking on its icon on the dock. If you see this, the operating system is asking you if you want to make sure, you want to open this application. Just click on open and Cyberduck will run.
You might also see a few other windows and this one is just asking you if youwant to import some bookmarks from another FTP application. I am going to hit Cancel. Cyberduck comes with some default bookmarks and since I'm not going to use them, I will go ahead and delete them. Holding down the Shift key to select more than one and then I want to click on this minus sign. To connect to your server, you can open up a temporary connection or create abookmark for your account.
Opening a temporary connection is useful if you're in a public place, so noother person using the computer will be able to log into your site. I'm on a safe computer, so I'm going to create a new bookmark. At the bottom of the window, click on the plus sign to create a new bookmark. Now I need to choose some options about this account. The first is the Protocol you want to use to connect to your server. The default Protocol is FTP but Cyberduck allows you to connect to your server with other protocols. You might try to use SFTP since it's a more secure version of FTP, although not all servers support it.
I will just leave mine as FTP. The nickname is the name that will show up in Cyberduck's list of bookmarks. I am going to call this bookmark Ageless Classic. The server name is the address Cyberduck will use to connect to your server. It will normally be your domain name. I will use the information from my Media Temple account, agelessclassic.com. Most of the time you should leave the Port option as 21. It's the default port for FTP. Ports are sometimes used when you have different computers or servers handling different services.
Next, type in the Username for this account. If you don't know your username, make sure you watch the movies on Setting up FTP accounts or check your host's control panel for an FTP account link. Now click on the Close box to complete the bookmark. Now you can double-click to login to your account.Now type in the password. If you don't want to type in the password every time, then make sure you have Add to the Keychain here, don't do this if you're using a public computer. Click on Login to log into your account.
This is a window into your server's hard drive. As you can see, there are a lot of files and folders in there. Different servers are set up differently but every server has a folder that acts as the Web server root. When somebody types in your domain name on a browser, they are taken directly into this folder. I'm using the Media Temple Plesk account here, so that folder is called httpdocs.If you're using Bluehost, your folder will be called public_html. With 1and1, the folder you login to is your web root folder.
Different hosts use different names. So whatever your host calls this folder, it's where your website will go. Let's open up this folder and take a look at it's contents. If you followed along with the movie on creating FTP accounts, you should also see a clients folder inside this folder. Almost every host will place some starter files in here. They an make your server messy, so I am going tot get rid of them. To get rid of files you see in Cyberduck, select them and click the Delete button on your keyboard. I am going to choose all the files and folders except for the client folder.
If you're using the Exercise Files from the lynda.com website, open up yourExercise Files folder and then find the Starting Points folder for this movie and copy the Working folder onto your desktop. I'm going to hold down the Option key so that I make a copy of the Working folder. I want to close this out and open up the Working folder and I will see two files inside the Working folder, one call engines.jpg and the other one called headlights.jpg. I want to place the engines.jpg file into my server.
So I'm going to click on it and drag it onto my httpdocs folder. And once they copy a file you can get to it from the web, just type in the name of your server then the filename, so I'm going to open up a browser and then type in the domain name of our server plus the name of the file. Now what of we put up a file inside a folder. Let's move the file called headlights. jpg into the clients folder, drag that on top of the clients folder, and in my browser, I want to type the name of the folder that I put the file in and then the file name.
What if you wanted to create a new folder to place all of your images? FTP clients allow you to create new folders and in Cyberduck, you can go to the File menu and select New Folder or you can right-click in the window and select New Folder. I'm going to call this folder images. Now I can move files from within this directory just by clicking and dragging them, from one place to another. So I will move the engines.jpg file into the images folder and I will move the headlights.jpg file from inside the clients folder into the images folder.
Now to get to the headlights photo, we will need to modify our URL so that itlooks for the files inside our new images folder. Now let's go ahead and delete our images folder by clicking on it and hitting the Delete button. This will delete any files inside that folder. Sometimes, when you do things on the server with Cyberduck, the window needs to be refreshed, so click on the Refresh button if you see a copy of one of the old files still in the clients folder.An FTP client is a great way to manage the files on your server.
It's very similar to working with files on your own hard drive but remember thatthis is a window into your server's hard drive, and that you can access thosefiles through any browser.
Granting additional FTP access
There are some additional FTP options you should know about. You can create shortcuts that take you directly to a specific folder or sign in to other accounts in the same server. If you are falling along with the last video, you should already have an account in Cyberduck that takes you directly to our server. This takes you to the server's hard-drive. On this hard-drive, you can see a bunch of different files, and most of the time, I will be working with the web root folder. I am using an account from Media Temple, so that folder is called httpdocs. The way the account is set up, I'll always start on this server folder.
I am going to change that so the account will go directly into the httpdocs folder. So I am going to close out of here, and start a new browser, then click on the Ageless Classic bookmark, and click on this Pencil Icon. From here, I can click to open up more options, and in this path, I am going to type in httpdocs. I am going to close this bookmark, double-click on our bookmark again, and it will take us directly into the httpdocs folder. Since this is where we do most of our work, this might be a good way to create a better shortcut.
Now I can still back up to the master folder on the server using this pop-up menu right here. We can also create copies of accounts. I am going to close this out, go to New Browser, and right-click on the bookmark that we've created and select duplicate bookmark to create another bookmark. Now, I don't have to type in the server or the account name anymore, but I am going to modify this account, so that it takes us directly to the clients folder. I am going click on this Path section here. I am going to close this out, and double -click on our new bookmark which takes us directly into the clients directory.
Now again, I can still back up to previous folders by using this pop-up at the top of Cyberduck. If you're following along with the videos on creating FTP accounts, you created an account that clients can use to log in. So let's create a bookmark for client login accounts. I am going to go to the File menu, and select New Browser, and I am going to add a bookmark by clicking on this plus (+) sign down here and I am going to call this bookmark Client Login.Our Server will be agelessclassic. com and our Username will be clients.
Now I don't need to type anything under Path because by default, this accountwill only allow access into that clients directory. I am going to close this out, I will double-click to get onto this bookmark, and you'll see that we are directly linking into our clients Login. If you're logging into this account for the first time, you might need to type in your password. Now, when we connect to this account, you'll notice that we can only see the clients folder. It's not even identified as the clients folder, and if we click on this pop-up, we can't back up to any previous folders. So as far as the client is concerned, this is the only folder that exists for them.
I am going to open up the Exercise Files folder, open up the Starting Pointsfolder, find a starting point for this video, and copy the Working Folder onto my desktop. In this folder, our client has designed a splash page that they want toupload onto our site. We will pretend we're the client, so we're going to copy this splash page onto our clients folder. Now, the file has finished uploading, I can get to this file by opening up a browser and going to our website and we can see the splash page is already on the server.
Now as far as the client is concerned, they can't see any other folders, butthey can still have access to the file on the web by going to this address which has all the folders. Now, I am going to show you that if we open up a new browser, and we login with one of our master accounts, I can still open up the clients folder and see that the file is now in there. Learning to manage our FTP accounts is really useful. We can do things like creating and editing new bookmarks, control what folders we log into, and connect to our site with different accounts.
Understanding link references
When creating webpages, you link to other documents and images using link references. You can use three different types; absolute, root relative, or relative references. It's important that you understand how each of these works, because each has advantages and disadvantages. So let's take a look.I am going to open up the Exercise Files folder and open up the Starting Points folder. Then, I am going to find the starting points for this movie, and copy the Working Folder onto my desktop. I will hold down the Option key to make a copy. Now, inside the Working Folder are some files that I want to upload onto my website.
So I am going to open up Cyberduck and I'm going to double-click into my first bookmark which links us to the web root folder of our website. If you've been following along with the previous movies, you should see a clients folder with a single file in it. I am going to open up a browser and show you that if we go to my domain name right now, I'll see a browser test page or an error page. When you go to a website address, it tries to find a special document called the default document. Usually, this document is called index. html, index.htm, default.htm, but it may have other names as well.
If it doesn't find a default document at the address you're requesting, the server will display an error page or a page like this. I am going to copy the files from my Working Folder onto my website, and since I already have a copy of the clients folder there, I am going to copy the files from the Working Folder onto my web server, and because I already have a copy of the clients folder, Cyberduck is going to ask me if I want to replace it. So I am going to hit Continue and let the files upload. Now, when I refresh the website, since I have a document called index.html, the server shows that page instead of the test page.
There's another page in this website, we can get to it by clicking on the picture on this page, clicking on the picture on the homepage worked, because the picture has an anchor tag that links to our second page. Let's go back to the first page, and analyze things a little bit further. Let's take a look at how this page is put together. You can see the code for how a page is put together by going to the View menu in Safari and selecting View Source from the Menu List. The View Source menu might be in different places in different browsers, but you can try right-clicking on different parts of the page until you get a pop-up menu that says View Source.
This is a real simple HTML page. If you need some help understanding HTML, search the lynda.com library for videos on HTML. Our page has an anchor tag with a link to a file called upcoming/shows.html. This is our second page. How does a browser know how to get to this page? Normally, to get to a webpage, you type in the URL in your browser bar. So if we wanted to pull up a new window with the upcoming page, we could type in the address agelessclassic .com/upcoming/shows.html.
This is the full address to that page, but our link doesn't look like that. The second page is in a folder called Upcoming, and the file is called shows.html. Since the Upcoming folder is in the same place as our first page, our index page, we can write the link in relation to our index.html page. This is called a relative reference. When we have files and folders, we can type the name of the folder and a slash to let the browser know to look inside that folder.
The image tag also has a relative reference to a file that is in the clients folder and is called splash.jpg. If you go to Cyberduck, you can see that the clients folder is in the same place as our index file and the splash.jpg file is inside that clients folder. Relative links are pretty easy to understand because they are relative to the current document. Let's take a look at some of the other types of link references. I am going to click on the photo on this index page, and go back to the second page. This page has three images at the very top. Let's take a look at the source code of this page, and see how each one of these images is linked.
So I am going to select View Source from this pop-up menu. You can see that the first image is linked with what's called an absolute reference. This looks for the image as if it were on a page that we were looking for through our browser's URL bar, it has the domain name of the site followed by the location of the image. The second type of link is called a Root Relative Reference. Root Relative References look exactly like absolute references without the domain name. They start with a slash and they essentially say to look for file into web root folder of this website, whatever that website is, and then look for the file from there.
The last reference is a relative reference, but it looks a little different than before. If you remember on the homepage of the site, we could get to the splash page by typing in clients/splash.jpg. That's because the clients folder was in the same folder as our index page. In this case, the Images folder is not in the same folder as this page. It's in the folder before our current page. When we want to go up a level, we can type in ../ to tell the browser to look in the parent folder for this file.
So we've got three different types of references. Which should you use? You should use absolute references when linking to sites outside your website. No matter what page or website I'm linking from, an absolute reference will be able to get to it. What are the disadvantages? An absolute reference will only work when you're online. That doesn't normally seem like a problem, but sometimes you will be working on a website on your local machine, and if for some reason the connection goes, your links or images won't show up. You shouldn't use absolute references when referring to files within your current site like we've done with this example.
If the name of our site changed, or we wanted to move files around, an absolute link won't work anymore. Absolute links aren't quite as flexible as the other two. So is it better to use a root relative or a relative reference? Well, it depends, relative links like the last image are great except that if your site has a lot of subfolders, using relative references becomes a lot of work. Take a look at the bottom of the upcoming page, there's a link to our splash image. Because the clients folder is in a level above, using relative links means I have to add the ../ at the beginning of the name.
If I was using root relative references, no matter what page I was calling this image from, a link to the clients page would look exactly the same/clients/splash.jpg. That means, go to the web root folder, and from there, find the clients folder, and then the splash.jpg file. So you think that using root relative references is the ticket except they have one weakness, they won't work on your local machine. So let's take a look. I am going to go to my Working Folder which is on my local machine, and I want to grab a copy of the shows.html file and drag it onto a browser.
Now a couple of things are happening here. You can see that the second image is not loading and my stylesheets are not loading as well. So let's take a look at the source code for this page and see what's happening. The source code is exactly the same as the page that we uploaded to our server. Since I'm using an absolute reference to my stylesheets, my stylesheet is not loading up. We're looking at this page from our hard -drive and when we tell it to go to the web root folder, our machine is not set up to understand what that means. So it doesn't find the image. In the same way, our second image which also uses an absolute link cannot find the headlights photo.
It doesn't understand what, just a slash, meaning the web root of this machine is? Understanding link references can be confusing, but it's a really important subject. You should use absolute references when linking to files outside your server. You should use root relative references when the folder structure on your site is complicated with many subfolders and you want to use consistent links to files you used often. You should use relative links if you know that the structure of your site will remain constant.
Creating a workflow
Working with websites means modifying files and uploading them to your web server via FTP. There's a couple of ways that we can do this; working with files either from our local hard-drive and then uploading them to our site, or working live from our server. Let's take a look. Before we get started, I am going to go to the Exercise Files folders and open up the Starting Points folder and then find the starting point for this movie and copy the Working Folder onto our desktop. I am going to hold down the Option key, so I can make a copy, then I am going to close this right here.
We're going to modify HTML documents, so we'll need a good text editor. On the Mac, you can use a free editor called TextWrangler. You can go to this web address or go to the App Store. On the PC, I like an editor called Notepad++. I also like an editor called Aptana Studio. It's also free and available for Macs or PCs. Aptana tends to be a little bit harder to pick up, so if you're just getting started, you might try Notepad++ or TextWrangler. I am going to install TextWrangler onto this machine.
So from the App Store, I am going to click on this Free link, and then click on Install App. You might need to type in your login information. Once it finishes downloading, you can grab the icon and drag it onto your dock for easier access. If I want to edit my web document, I can work off a local copy of the website, make changes to my documents, and then upload the changes, or I can edit documents directly from the web server. Inside our Working Folder, you'll find a copy of our website.
If you were following along with the last video, this is a slightly different version of the document. That is using relative link references, because it's a small site and I want to be able to see all of my images when working on a local copy. I am going to put the index.html file onto Safari and you'll notice that I'musing relative link references in this document, so everything looks great on my local copy. Now I am going to copy this onto my server. So I am going to open up Cyberduck and I am going to double-click on my bookmark to log in to my web server. If you see files on your server, go ahead and delete them.
I am going to select the files and I am going to hit the Delete button on thekeyboard to delete all of the files. Now I am going to grab the copies from my Working Folder, and drag them onto the Cyberduck window to copy them onto my server. Once the files are done copying, I can go to my browser, and I can pull up a new tab and pull up the Ageless Classic website. You can see that it's also working just as well as the local copy. One way to change things is by working on a copy of the site on the local machine and then uploading the changes to my server.
So I am going to click off this Transfers window and go to my Working Folder and I am going to open up the Upcoming folder and drag this shows.html file into my copy of TextWrangler. I am going to need to add some code onto this page. So I am going to go to the Exercise Files and find the codesnippets.txt document. I am going to open up my codesnippets file into TextWrangler and find the section for this movie, and copy the code, switch back into my local copy of shows.html and underneath my last list item, paste the new code.
This will add three additional photos onto the website. I am going to save these changes, and then I am going to go back into my browser, and back into the tab right here that shows our local file, you can tell this is the local file because the browser shows the word file at the beginning of the URL. If I refresh my page, I should see the three additional pictures. If I go into my other tab that has a copy of the live site, if I refresh the page, none of the photos will show up. That's because we've only updated the local copy of the file.
You can tell that this is the local copy at the top of the TextWrangler window.We can see that the file path shows that this file is on the desktop. Now that we've made the changes onto the local document, I need to upload thisdocument to our server. I am going to close the codesnippets file, and find the local copy of shows.html which is on my Working Folder, and drag it onto the Upcoming folder on our web server. It's going to ask me if I want to replace the file already on the server, so I am going to say Continue.
Once the file upload has been completed, now you can go to your website, refresh the live version of your page, and see that it's updated with the latest photos. Now, both the local copy and the live copy of our server are in sync.This is one way to work on your sites. Use a copy of the files on your server and make changes to local files, then upload into your server to see what the changes look like on the live version of the site. The advantage to this method is that we can work on changes without changing the live version of the website. If I make a mistake, no one except me will see it, and I will also have a backup of the whole site at any point in time.
We can also work from files directly from the server. So I am going to close this Transfers window, and switch back to Cyberduck. If I right-click on a file on the server, this pop-up will come up that will allow me to edit the file with a local text editor. Now, my options right here are only TextEdit. So I can change the options as I just installed the version of TextWrangler, by going to the Cyberduck menu, selecting preferences, going to the Editor Tab andchoosing an editor from this pop-up.
I guess I just installed TextWrangler, I see it as an available option. You can also ask Cyberduck to always use this application to open files. If you look carefully at the Cyberduck window, you'll see that the icon for the Edit button has now changed to the TextWrangler icon. You might also want to go into the Browser Tab and select Double click opens file in external editor.Normally, when you double-click on a file, it will download it to your default Download folder. If you click on this, when you double -click on a file, it will open it in the external editor.
So now, I am going to close this right here. If I want to edit the shows.html file that is on my live server, now if you right-click on this document, you can go to the Edit With window and you might notice that you don't see the TextWrangler in this list right here. You might need to restart the application to see the changes. At any rate, we should be able to hit this Edit button, and this file will open in our copy of TextWrangler. Now, if I go to the Window menu, I can see that there are two copies of the shows.html file. Now, we can see that TextWrangler lets us know that the top file is in the local folder, because it's in the Users folder on my hard-drive and the other file is accessed through an FTP application, which in this case is Cyberduck.
Be careful that you're editing the right file when working on a live server. Here is both of the files side-by-side. In the window itself you can also see that this one says it's on our desktop and this copy says it's on our FTP site. So I want to make sure I edit the right one. I am going to come and scroll down here, and just delete the last three items from this list. I am going to hit Delete, Save. Now as soon as I saved, you may have noticed that Cyberduck actually uploaded the file in the background. If I go back here, and I made sure that I am in the agelessclassic.com website, if I hit Refresh, you'll see that my window updates and now I only have three photos.
If I go to my local copy, if I refresh, I still have six photos, and now the files are not in sync. Working on the files live on the server is a lot quicker. Any changes you make are immediately available online, but it's also more dangerous. If you make a mistake, you have no backups of your files. I always suggest always downloading a copy of the file and editing at first, then uploading it back onto your server. If you need to make a quick change, then working on the live server is always quicker. But, it might be a good idea to back up your site often, or work from a local copy of your files and upload only when the changes have been tested.
Setting up Emails
Setting up webmail and forwards with cPanel
Once you've set up a website you might want to create some email addresses and mail forwards. Let's take a look at how Bluehost handles email accounts.First you'll need to log into your control panel so I want to go to thebluehost.com website and click on Control Panel Login. You'll need to type in your login credentials here. Once you log into the Control Panel you need to scroll down until you find the section called Mail, from the mail section click on Email Accounts. Now type in the address that you want to create and a password for the account.
You can specify how much room to allocate to this account or click on Unlimited. Now click on the Create Account button and the email account will be created. You can see that it's already down here in the list. Now if I want to check my mail I need to go to the More button and select Access Webmail.We'll need to type in the password for this account, and click Log In. When you first log into your mailbox account you'll need to choose an email client, so I'm going to choose this middle one called Roundcube.
Now there are no messages on this mailbox so I'm going to go to my Gmailaccount, and I am going to send myself an email and I'm going to go back intoRoundcube and hit the Refresh button here. You can see my test arrived just fine. I am going to go back under the control panel and I am going to hit the cPanel tab, scroll down to my Mail options to create a mail forward. A Mail Forward is an email address that doesn't get any email sent to this address will be forwarded to a box that you specify.
I don't have any forwarders configured for this current domain, so I'm going to hit Add Forwarder and add a forwarder called info@vehicleclassic.com. I can forward this address anywhere but I'll just send it to my previous email account ray@vehicleclassic.com. If I click on Discard with error to sender, then when somebody sends an email to this account, it will not get an email but receive a message that I type here. So I am going you just hit Forward to email address.I am going to hit Add Forwarder and my Forwarder is set.
I'm going to go back into Gmail and compose a new message, another test and I am going to hit the Send button. I am going to go back into the Webmail program and I'm going to go back into my Inbox, and you see that the another test email arrived just fine. Creating email addresses is pretty simple and makes your site and your email addresses look more professional. Make sure you take advantage and familiarize yourself with your host's mail features.
Setting up webmail and forwards with Plesk
Although your server might offer a lot of mail related features, it should alsoallow you to create at least a mailbox and a mail forwarding account. Let's see how to do that with Media Temple. Media Temple uses the Plesk Control Panel. You can log into your control panel by going to the Media Temple website and clicking on the Login screen. You can put your information here and get to the Media Temple Control Panel which has a link to the Plesk Control Panel, but it's a little bit quicker to get directly to the control panel of your website by typing in your web address and adding the port number 8443.
This will take you directly to the Plesk login screen. We'll type in my username and password and click Login. To manage the mail features, go to the Mail tab at the top of the screen, and to create an email address, click on Create Email Address, and type in the name of the email address you want to create, then type in a password for this account. I am going to click OK and my mailbox has been created. Now if I want to check my mail, I can go to this link right here next of the email address and it will launch Webmail.
Notice that I can also get to Webmail by typing in webmail.agelessclassic.com, I just add Webmail to my regular domain. I'll put in my log in credentials here and click the Login button, and log into my Webmail. I don't have any mail yet so I am going to go to a New tab and just type in the address that I just created and send myself an email. I am going to hit the Send button, I am going to switch to the other tab and click on Read Mail to see if my mail has gotten there, and sure enough, there is my test mail.
Now I am going to go back to Plesk and create an additional email address.This address will be for getting information about this website. I'll call it info@agelessclassic.com, and in this case I don't really want to get a mailbox, I just want to set up a forwarder. You don't need to setup a password when you're just setting up a mail forwarder. Now I want to click on this email to get more information about the email, and I'm going to click on the Forwarding tab and Switch on mail forwarding for this account.
I can type in the address that I want this email to forward right here and clickOK. Now when somebody sends email to info@agelessclassic.com, it gets forwarded to ray@agelessclassic.com. I am going to go back into my Gmail and hit Compose and just send myself a test message. I am going to hit the Send button and I am going to go back into my Webmail client and click on Get Mail. You can see that I have my another test email from the same account and this email was sent to info@agelessclassic.com.
Because I had set it forwarder, it automatically sends it to my other account.You can do a lot more stuff with email like setting Auto replies and turning on spam filter. Creating email addresses is pretty simple and makes your site look more professional. Make sure you take advantage and familiarize yourself with your host's mail features.
Setting up webmail and forwards with a custom control panel
Once you setup a website you can create email addresses and mail forwards.Let's take a look at how you can do that with 1and1. To login to your control panel go to the 1and1 website at 1and1.com and look at the top of the screen for the Customer Login link. Now type in your credentials to get into your account. Once you're logged into the control panel, look for the Communication & Online Storage and then the E-mail section right underneath that. You're going to need to click on E-mail Administration and I'll hit the Create button to create my email account. I am going to create an account with the name ray@everlastingclassic.com.
If you have additional domains, you can select them from this pop-up. You can choose the type of account that you want to create right here and it can be either a Mailbox or a Forward. We're going to need a mailbox at first, so I'm going to select Mailbox and type in some information about this account. I'll type in a password and turn on Virus Protection and Anti-SPAM. It's a good idea if you offered that to turn them on, and I am going to click on OK. 1and1 is a little bit different than most of the other control panels in that.
It handles all mail through a separate domain, so it takes a little bit longer to process the mail accounts. I am going to click on Go To Overview, and as you can see my mailbox has been created. Now I can click on this link to open Webmail for this account. I'll need to type in my credentials and click on Login. Now you might receive a message from 1and1 automatically when you create an email account. You can also go to this inbox by clicking right here.It's a pretty good mail client.
Let's go ahead and send an email from a different account. I am going to go to Gmail and send an email to ray@everlastingclassic.com and send. Now I'm going to go back into 1and1 Webmail and I'll click on this Home icon, and I'll click on this Refresh button. So as you can see my email has arrived. Now let's set up a forwarder. That's a little bit different. We'll go to the Mail control panel and you can go back to the beginning and click on E-mail Administration to get to the screen and select New from this pop-up and in this case we'll create a Forward.
A Mail Forward is an email address that doesn't get any emails sent to that address; any email sent to that address will be forwarded to a separate address. So we can create another email address for info@everlastingclassic.com. It'll be a forward and we'll have it forward to ray@everlastingclassic.com. It doesn't need to go to the everlastingclassic.com domain; it can go to any other website as well. So I'll click OK, and now this forward has been created. So now I am going to go back to Gmail and compose a new email to info@everlastingclassic.com, another test, and I am going to hit Send.
Okay, back into my Webmail and I'll hit Refresh, and you'll see that my other test has arrived. This test was sent to info@ everlastingclassic.com, and it was automatically forwarded to ray@everlastingclassic.com. Now if you want to get back into your Webmail, there's another way of doing that. I am going to go just to the 1and1 .com website, and I can click on Webmail Login, type in my login info, and click on the Login button to log into my Webmail account.That's a little bit different than in some other control panels.
1and1 makes it pretty easy to create email address and forwards. The E-mail area has a lot of additional features so make sure you take a look at that and try some of the other options.
Password Protection
Protecting user information
Just a couple of reasons why you might need to protect information on your server. Perhaps there are some documents that you want to be available to some users but not others. You might be working on some secret new designs and want to keep them away from prying eyes. There are a lot of ways to do this; you can build a logging system with PHP or some other scripting language. That can be complicated and time-consuming. Thankfully most Web hosts provide a quick way to set up simple password protected directories. In preparation for this, I've created a clients directory with an image calledsplash.jpg that I've placed in each of our domains using FTP.
If you have any questions about using FTP, make sure you checkout the movies on this course on setting up and using FTP. In the following movies I'm going to show you how to protect the folder and create a username and password with each of our different control panels.
Protecting directories with cPanel
Creating a password protected directory is pretty easy with most control panels. So let's take a look at how we can do that with Bluehost which uses to cPanel interface. So to log into control panel, go to bluehost.com and click on Control Panel Login and in this screen just type in your Domain name and Password. Once you log into the cPanel interface, you need to scroll down to the part that says Security and then click on the Password Protected Directories icon here. Now you need to tell cPanel which directory you want to open.
Now you can have it protect the entire web directory or just a specific website.We only have one website, so this is the only thing showing up right here, so Iam ready to click Go. Now we need to select the folder that we want to protect.In our case, we want to protect the clients folder. Click on that and I want to turn on Protect this directory and I'll just give it a name, it's sort of a label. I am going to hit Save, I am going to hit Go Back. And this is usually a two-step process. You have to create permissions for that folder and then create a user.So I am going to create a user here, I'll call it clients as well, and I'll type in a Password here.
And I am going to hit Add/modify authorized user. So now I am going to click to Go Back and my directory protection has been set. I am going to check that out by opening a new tab and I am going to go directly to the photo that I've uploaded at that directory and hit Enter. You just see this screen come up, and in here, you're going to type in your Username and Password. You can hit this option so that it always remembers the password and click on Log In, and now I should see the photo. Now if I refresh the page, it's not going to ask me for the password again, it'll only ask you for the password one per session, which means that if you go to a website, because also we are navigating through the website within the same half-hour or so, it won't ask you for the password.
Again, if you go to a website and then come back to the website say an hourlater, it will ask you for the password. Another way that you can get it to ask you for the password is just by quitting your browser and re-launching it again.Using this kind of password protection gives you a quick and easy way to set abasic security for any folder on your website.
Protecting directories with Plesk
Creating a password protected directory is pretty easy with most control panels. So I am going to show you how you could do that with Media Temple, which uses the Plesk interface. We'll need to log into our control panel, so you could do that by going to mediatemple.net and then clicking on this Login button right here. From this screen, you can type in your credentials and get into your control panel for Media Temple. There is a quicker way of getting directly into your Plesk control panel, you can simply type in the web address of your website and then :8443 which takes you directly to the Plesk login screen.
From here, just type in your Username and Password and click Log In. From this screen, I am going to go to Websites & Domains and I am going to scroll down a little bit and click on this Show Advanced Operations, if it's not showing, because I need to get into this Password-protected Directories here. I click on that. From here, I am going to select Add Protected Directory and I need to type in the directory that I want to protect. Plesk is going to assume that I want to log into my web root folder so you could see that the Document root is already selected as a Directory location.
If you remember from FTP that was called httpdocs, so this will take youdirectly to the web root in this case httpdocs folder, and I am going to give this thing a Title of clients. It's really just a label so that we can tell these things apart when we have a lot of these directories setup. I am going to click OK. So the protection is actually created, but we also need to create a user. So to do that I am going to click on the /clients link down here and create a user by hitting Add New User, typing in a Username, I'll type in clients here, and putting in a password for this user.
Usually when you do Password-protected Directories, it's a two-step process like that. I am going to click OK. So now your password has been created for that directory. So I can check to see if it's working by adding a new tab and typing in the address of my website and I already have a file waiting there called splash.jpg. So, if I try to go to it, it's going to ask me for a Username and Password, I will put in my user and password here and I'll hit Login, and now I can see the file just fine.
If you've recently put in your credentials to get onto this page, it's not going to ask you for that password again unless you leave the site and comeback littlebit later than half an hour. You can force it to re-ask you for that Username and Password by quitting your browser and restarting your browser again. Using this kind of password protection gives you a quick and easy way to set a basic security for any folder on your website.
Protecting directories with a custom control panel
Creating a password protected directory is easy with most control panels.Let's take a look at how we can do this with 1and1, which uses its owncustom control panel. To log into the 1and1 control panel, just go to 1and1.com, and then find the Customer Login link at the top. To get in here, you can put your customer ID or just type in the Domain name of your site, and click on Login. You can click this window off if it comes up. So from 1and1's control panel, go to the Domains & Web Space section and look for this link under Web Space called Protected Directories.
Usually creating a password protected directory is a two-step process. We need to create a user and then tell the server which directories that user has access to, so I am going to create a new user, and under Username, I amgoing to type in clients and set up a password here. I am putting Clients as a Description, and from here, I can choose to either select an existing directory or create a new directory. I already have a directory that I want called clients, so I just choose it from this pop-up window. Now I am doing both of these things right now; I am creating a username and also telling it what directories I want that username to have access to in one screen.
So I am going to hit Save. If you do this, this is a little bit confusing about the 1and1 Control Panel. You intend to want to do everything at once, but actually you need to create the Add button after you choose the Protected Directory from this pop-up window and click on Add. You can see that it's here now in the list of directories. Now, we can hit Save. Another thing about the 1and1 control panel is that some things take a little bit longer than in some of the other control panels. Now it says that you have created the password and that it's going to take approximately 30 minutes.
It doesn't always take 30 minutes, but it can. So I am going to open up a new tab and just go to my website, and then go to the clients directory and try to see if I can open the splash.jpg file. I am going to select it and then look, it didn't take half an hour, it took just a few seconds. Sometimes it does take a while, so just be patient, and eventually this window will come up. Type in your Username and Password here, and click on Login, and now I can see the picture. So from now, when a user tries to access anything on this folder, they should see that pop-up window.
Now if the user remains in the same website, it's not going to keep on asking for username and password every time you try to access something from this folder. It's only going to do that if you are on the site and you leave and come back within about half hour. You can also force it to show you that window, if you quit the browser and restart it again. Using this kind of password protection gives you a quick and easy way to set a basic security for any folder on your website.
Creating a MySQL Database
Working with databases
A task you might need to perform on your web host is to create an Access database. You can use them to do things like installing a WordPress blog on your site. Where most of the tasks you perform on a server, have pretty similar steps, even between different control panels, I found that setting up databases is where they differ the most. Most hosting plans will that you create, at least one MySQL also known as SQL database. Once you create the database, hosts provide access to the tables in the database using a web interface called PHP MySQL.
In the next few movies, we are going to create a database in each of our web hosts. We can later use this database to install a blog with WordPress onto our website. Although you don't need to know a lot about SQL to install WordPress, there is a lot of courses in the online training library. Just do a search for SQL. Couple my favorites are, MySQL Essential Training from Bill Weinman and as well as PHP MySQL Essential Training from Kevin Skoglund.
Preparing a database with cPanel
To create the database on most web hosts, you'll have to log into your controlpanel, create a user as well as a database. Let's see how we could do that with Bluehost. To log into your Bluehost control panel, just go to the bluehost.com website and then click on Control Panel Login and type in your Username and Password. On Bluehost, your username is actually your domain name. Once you log in, you need to scroll down to where it says Databases. Click on the link to MySQL Databases, and in this section, you are going to need to do a couple of things.
First, you can create the new database by adding a name of the database right here. I am going to be creating a WordPress database; I will just call this wordpress and click on Create Database. Notice that the site automatically prepends vehiclf5_, so that will be the complete name of my database. Okay, this database is being created, so I am going to click on Go Back, and thesecond thing I need to do is create a user for this database. So I am go down here to add new user, and I will also put in wordp, and I'll put in a password, and I am going to Create User.
I am going to hit Go Back. The last thing I need to do is link the user to the database. To do that, you can see that I can add a user to the database in this section and cPanel has already placed the user in the database I just created. So I am going to click on the Add button here, and in this section, I am going to give this user all privileges to this database. That means that the user can do just about whatever they want with this database. I am going to hit Go Back to go back into my setup, and all the different parts of the database and the access have been created.
If you are just creating a database, the important thing is to write down yourcredentials to access the database. You will also need the Username and Passwords, so make sure you write that down, because you will need them to install WordPress or access the database. If you need to create tables or modify records, most web hosts provide an application called PHP MySQL.Let's see where we can get to that in cPanel. I am going to click back to cPanel tab right here and then I am going to scroll down to the Databases section here, and you'll see that there is a link right there to phpMyAdmin.
So I am going to click on that, and phpMyAdmin is going to want a Username and Password. It's I already selected the username that we created, so I'll just type in my password and I am going to hit Go. This is the phpMyAdmin window, where I can create and manage databases. Creating and managing databases is a complicated matter, so if you want to find out more information I suggest you check out MySQL Essential Training from the online trading library.
Preparing a database with Plesk
To create a database on most web hosts, you'll need to log into your controlpanel, create a user, and then the database. Let's see how we can do that with Media Temple. To log into Plesk, I am going to open up a new tab and type in the address of my site followed by :8443 to get to the Plesk login screen. Here, I'm going to type in my Username and Password and click on Log In. From here, we want to go to the Websites & Domains tab and then find the Database icon and click on the link. Pretty easy to create a database, all we have to do is click on this icon right here to create the database and put in a database name.
I'll call mine wordpress, and leave these Type and Database server as they areand we'll click on OK. That creates the database. Once you created the database, we can click on Add New Database User, so that we can create a user for this database. I'll call my user a wordp and give it a password and click OK. Now, it's pretty much it. You've created a database as well as a user. The important thing when you're creating a database is to write down yourcredentials, so that you can access the database, so you'll need to rememberthat our database is called wordpress and the username is called wordp.
You'll also need the location of the database, most of the time that's going to be localhost, so write that down with your username and password. If you need to create tables or modify records, most web hosts provide an application called PHP MySQL. You can access that by clicking on this Webadminicon.Creating and managing databases is a complicated matter. If you want to find out more information, I suggest you check out MySQL Essential Training in the Online Training Library.
Creating a database with a custom control panel
To create a database on most web hosts, you'll have to log into your controlpanel, create user as well as a database. 1and1 is a bit different than most web hosts and that the databases are not part of your server but are created in a separate web host. So, the login information is slightly different. So, let's take a look at how that's done. To log into your control panel just go to 1and1.com, look at the top of the screen for the Customer Login. I'll click on that, I'll type in my domain name and password and click Login. Once, you get into your control panel, you're going to want to go to MySQL Administration, and that's under Domains & Web Space and Web Space.
I'll click on that. Here's where your databases can be set up. Depending on the plan that you have, you're going to have a number of databases that you can use. So, the screen might look a little bit different for you. So, I'm going to hit New Database right here and I'm going to type in a name for my database. I'll just call it wordpress and I'll type in a password and I'll hit Set Up. Now, this is where 1and1 is a bit different than most other web hosts. Where in most cases your hostname would always be localhost when creating a database on a server, on 1and1, you actually connect to a separate computer or a separate server that hosts the database.
You can see the host name here is different than in most other plans. So, the host name here is db etcetera, etcetera and that's definitely different than localhost, which is what you put in in most of the other plans. Now, also notice that although we put a database name, a username is also assigned to us by 1and1. So, it adds username that probably starts with like dbo and then some sort of number after that. So, make sure you copy this information carefully because you're going to need it to access your database later on. You'll definitely need the database name, the host name, the user name and then the password.
I'm going to click to Go To Overview and you'll see that my username information is right here and the setup has been started. Whenever you create a database in 1and1, it also takes a little bit longer than in most other systems.So, you may have to wait a while before your database can be accessed. So, you can just keep on hitting refresh until you see that the status for this database is ready. If you do need to create tables or modify records, most web hosts provide an application called PHP MySQL. So, you can access that by clicking on this button right here.
Creating and managing databases is a complicated matter. So, if you want to find out more information, I suggest you check out MySQL Essential Training from the Online Training Library.
Installing WordPress
Installing a WordPress blog on your website is a good way to test our database. Although, creating the databases and users is different between web hosts, installing WordPress is nearly identical. The only difference is going to be our login information will be different between web hosts. If you've been following along with our project, we've been working on a website for classic auto shows. If we click on this photo and you'll see that the second page has a link to a blog that doesn't yet exist. The databases are ready for WordPress installation but we need to install WordPress.
To install WordPress you need to go to worpress.org and click on this Download link. You should hit this button to download the latest version of WordPress and wait for it to finish. Once the download finishes, you might need to open your Downloads folder. Inside the Downloads folder, you'll see that a WordPress folder was downloaded. One of the biggest decisions you'll have to make is if you want WordPress to become your website or if you want WordPress to be a blog inside your website. If I wanted WordPress to run my entire website, then all I have to do is copy these files right onto my web server.
You should be careful when doing that because notice that WordPress comes with an index.php file and we already have an index.html file on our server.When a server encounters two index files it's going to choose one of them as the one it's supposed to display and that can get confusing. So, if you want WordPress to be your blog, in this case I will get rid of all of these files on my server. Since I just want to run WordPress as a blog on my server I've created this blog folder right here and I can copy all the WordPress files directly into that blog folder.
Although, WordPress takes just a few seconds to download, it takes a long time to upload to a server. So, I've already copied all these files into this blog folder. To install WordPress we need to do one thing to our files. Look for a file called wp-config-sample and then I'll click on it to edit it and I am going to choose the name of that file to wp-config.php. I hit Return to enter it and I am going to hit Refresh because sometimes cyber duck doesn't update the screen as well as it should. There we go.
Now, it's renamed to wp.config. Now, we need to edit this file. So, I'm going to click on it and select from the pop-up menu by right-clicking and select Edit With>TextWrangler. Now, this is the only file that I have to edit to get WordPress going. Here, I need to type in the login credentials that I received from my web host when I created the database. If you need help creating the database or figuring out how to log into your database, make sure you check the movies for each one of different web hosts. This is the information that's different between the three different web hosts.
Now, 1and1 has the information that is hardest to remember. Log into my 1and1 account, go to the Customer Login button at the top of the screen, type in your Customer ID or website address and your Password and click Login and I'm going to go to MySQL Administration. Now, here's the database information that I need. I'm going to put this into a window so that I can see it side-by-side next to my TextWrangler window. It's really just easier to copy and paste this information since it's so complicated with 1and1. So, we're going to need the database name and we need to put that right there.
So, I'm going to come in here and just copy my database name. So, you might have to type the stuff in. The username is going to be this other weird username that starts with dbo and I'll paste that username here, and the password is going to be the password that I gave it when I created the database. Now, most of the time the MySQL hostname is going to be localhost. With 1and1 this is a little bit different. The hostname is going to be over here. And looks like this one I can't just copy. So, I'm going to copy just that part of it and type in the rest of it .db etcetera, etcetera.
Now, I am going to save this file and I am going to go back into my webpage and I am going to refresh this page, which is just a link to the blog. And it looks like I make a little mistake and this is actually linking to the wrong place. It's for the Upcoming folder and then the blog. So, what I am going to do is I am going to go ahead and just go to the website/blog and then I just edit the upcoming page to link to this file.
I think the problem is that I am using relative references and I need to use anabsolute reference to get to the blog. So, let me just go ahead and do this. I'll type in everlastingclassic.com/blog. If you typed everything correctly into the wp- config file, you should see a page like this. Here, we can just start typing in information about our blog. So, this will be the Everlasting Classic Blog.We're going to need to create a Username for the blog itself. So, this is separate than all of your other usernames.
I'll just keep the username as admin and I'll type in my password. Now, we need to type in an email address here. I've already created an email. If you need help figuring out how to create an email, make sure you check out the movie on setting up emails for your web host. And I'm going to click on Install WordPress. If you want your site to appear in search engines, go ahead and click on this window and then click on Install WordPress. And I love WordPress, because it's really the simplest installation. This window always makes me happy. So, now I need to log in to WordPress with admin and the password that I put in there.
You can click on Remember Me if you don't want to see the screen again and click on Log In and you can start working on your blog. Now, I do want to fix the problem with my blog because it looks like when I click on Read our blog, it's trying to find the blog in the same folder as our Upcoming folder. So, I am going to do that by going over here into my website. I am going to open up the Upcoming folder. This should be a pretty easy change. Double-click on this to open it and find the link to my blog, change this to an absolute reference.
Now, here I can type a relative reference and since the Upcoming folder has this file and the blog is in a level above I could type in ../ or just type in arelative reference, which would look like this. We'll save this and we'll go back on to our website and refresh this page and this link should now take you directly to the blog. If you want to learn more about setting up WordPress, make sure you checkout WordPress 3 Essential Training on the online trading library.
Subdomains
Creating shortcuts with subdomains
The ability to create subdomains is a really a useful feature to have in your web host. A subdomain is what you type before a domain name. You've probably used a www before a domain as in www.lynda.com, but it doesn't have to be www, you can make anything you want. Now, why would you do this? Well there are a couple of really good reasons. You can use it to make getting to a section of your website a lot quicker. Let's say that you've prepared a place in your website with a restaurant's menu page you're working on, client's name is Mex Santos.
Say that you put this on your website called pixelprowess.com. You put this on your website under a clients folder and then with the clients name Mex Santos.Now, you've created a clients folder because you're working on multiple projects for the client and then another folder called menu because this is the project we're working on. So, every time you call the client, you'd have to say go towww.pixelprowess.com/client/mexsantos/ projects/menu to check the progress on their website, a subdomain will allow you to get to the same place just bytyping in mexsantos.pixelprowess.com.
Now, this is a place on your website many, many folders inside your website, but you can get to it by typing in a subdomain. One of the cool things about subdomains is that they behave as real domains. So, if you take a look at the source code for this website, you can see that the images are being referred to as root relative references even though the folders that these images are in are somewhere within our main website. That's important because when I move this to the mexsantos.com website I won't have to choose the URLs. If you need a review on the difference between relative, absolute, and root relative links, make sure you watch the movie on Understanding Link References.
Another way I use subdomains is when I am working on redesigns. I am going to create a folder called staging.agelessclassic.com and put a copy of the current website in there. Is that redesigned the site? I can preview the changes on this subdomain and invite other people to comment on changes. I would of course probably password protect the subdomains that only people with the appropriate credentials could see the changes. If you need help on password protection, make sure that you check out the movies on password protection.Most Control Panels make setting up subdomains easy.
In the next few movies I'm going to show you how to create subdomains in each of the control panels we've been working with.
Creating a subdomain with cPanel
Creating subdomains is a great way to create a shortcut URL to different folders on your sites. And it's pretty easy on most control panels. We're going to create a subdomain for our blog which right now is at vehicleclassic.com/blog.Let's see how we can do this on Bluehost. To log into your control panel, just go to the home page of bluehost.com and click on the Control Panel link up here and then type in your password. Once you've logged in, you're going to scroll down a little bit. So scroll down to where it says Subdomains right here.
When you click on this, it actually takes you to this tab at the very top calledDomain Manager, but if you just click on this tab from the top of the screen,you won't see this particular page. So better to go with the cPanel area and then find the link to Subdomains. So here, we're just going to type in the name of the subdomain which will be blog and it automatically types in what we need down here. The blog is in your web root folder, which in this case, for Bluehost is called public_html. Once you do that, just go ahead and hit Create and it says it's been created.
Hit Go Back and you see the subdomain has been created right here. You may have to hit this Manage Redirection link right here and just type in the URL plus /blog afterwards. We've already done this and I deleted this one time and when I came back to redo it, it kind of remembered this, so that's why mine has it automatically, but if it doesn't, just go ahead and do that just in case. Now subdomains can be a little tricky. They may take a little while to kind of take in.So let's go to our website and type in blog.vehicleclassic.com.
And as you can see, it's redirected that URL to the proper place. If you have any problems, I would suggest just kind of waiting and then trying that trick where you type in something under Manage Redirection. So knowing how to create these subdomains gives you and your clients a quicker way to get to different places on your site plus it gives you the opportunity of creating staging versions or test versions of websites.
Creating a subdomain with Plesk
Creating a subdomain is a great way to create a shortcut URL to differentfolders on your websites. And it's pretty easy on most control panels. We're going to create a subdomain for our blog which right now is atagelessclassic.com/blog and we're going to do it on Media Temple which uses the Plesk control panel. To log into your control panel, you can simply go to your website address and then put :8443, type in your login information.
So from here, we want to go to Websites & Domains and then we want to go to this bottom part right here called Add New Subdomain. And from here we want to type in the subdomain we want; in this case, it'll be blog. So the name of our subdomain will be blog.agelessclassic.com and right here we want to type in the document root. Now you have to include the web root when you do this. So in this case the web root is httpdocs and you want to put /blog and click OK.
Okay, the subdomain was created and now you can go to your website and trytyping in subdomain. Knowing how to create these gives you and your clients a quicker way to get to different places on your website and it gives you a tool that you can use when testing new versions of your websites.
Creating a subdomain with a custom control panel
Creating a subdomain is a great way to create a shortcut URL to differentfolders on your websites, and it's pretty easy to do on most control panels.We're going to create a subdomain for our blog which right now is ateverlastingclassic.com/blog and we're going to do it with 1and1. So we need to log into our control panel. I am going to go to the home page of 1and1 and find the Customer Login link right here, and then I am going to type in my domain name and my password, click on Login.
So 1and1 does it a little bit different than most websites. You're going to go to your Domains section and you have a list of domains here that have been set up. Notice you have this really weird domain name. That's kind of the default name before you actually get your own domain name. You can actually use that to get to your website. We're going to go to the New menu and select Create Subdomain. To create a subdomain, we have to choose the domain that we want to work with first. I am going to click on this area and type in the subdomain that I want. So blog, I'll click OK. I'm going to go ahead and set the destination.
This is really important, it's something that you have to do because we don'treally want the subdomain to go to the main web root directory; we want it to go to the blog folder. So I'm going to click on the subdomain that I want to modify and over here click on Destination, select Edit Destination, and from here, destinations can be Home Directory and Forward Your Domain. Forward Your Domain is kind of nice because it lets you send a subdomain to acompletely different website, so you could set yourself up a shortcut for sayyour Facebook page or your LinkedIn page or something like that.
So you would just type the URL right here that you want plus HTTP redirect.Now I just really want to go to a subfolder, so I'm going to select HomeDirectory and from this pop-up list choose Existing directory. I can also create of course a new directory if I want to, but I don't want to do that because I already have my blog folder done. I am going to come right here and select blog and click OK and then go back to my overview. So as you can see now, blog. everlastingclassic.com should go to my Web space slash blog, under Destination.
And I discovered a little glitch with the status. For some reason this control panel was not updating. It still says the Domain registration is being requested. If I go to my website and I try out my subdomain, you'll see that it's working just fine. So if it happens, just try going through the whole process of getting the subdomain and then going to the control panel, setting the destination, and just try out the subdomain every 30 minutes or so. It shouldn't take more than about an hour. Technically, they say that it takes up to 24 hours to get done, but it really doesn't take that long.
Knowing how to create subdomains gives you and your clients a quicker way to get to different places on your server plus it gives you a tool you can use when testing new versions of your sites.
Conclusion
Next steps
So you're finished with this course and perhaps you're ready to launch the next great website. Maybe you're still wondering about domain names or some of the other technologies we used on the course. So I have some good websites you can check out for additional tips when getting some of these things done. You saw me use BustAName which is one of my favorite websites to try to figureout new domain names. They have another tab on their website under Domain Maker that has a couple of crazy ways of creating domains. Now if you've been here before, it might give you this window that says Resume Last Session.
I'm going to start a new session just to start from scratch. Now in here you can start and try to find domains with a specific word, so I'll put the word road in here and then just hit the Go button and it's going to give me just kind of crazy combinations of road with something else. You can also click this button called Make Random Domains and this is going to generate crazy words and give you just some off-the-wall options. Those may not be the greatest options in the world, but a lot of times creativity is about seeing something that might not be quite good and seeing if it inspires you to find something else. There are a lot of additional resources you can find on the Web. For example, they have a cousin website called hostsearchr.com that lets you pick your plans for hosts depending on the different features that you need. Finally, if you want to find out more about HTML, I really love this course from James Williamson called Web Design Fundamentals. It's on the Online Training Library at Lynda.com and there are a lot of other courses you can check out like WordPress 3 Essential Training. I really like the way Morten teaches WordPress.
And there's also PHP with MySQL Essential Training if you're more interestedabout more technical terms like dealing with databases and working with PHP to control the databases. So whatever you do, don't forget to have fun and make a commitment to lifelong learning.
