Introduction to FTP
This tutorial doesn't go in detail on what things are and how they work, but rather explains in a simple manner how to transfer files to the web server.
FTP program
FTP stands for File Transfer Protocol. Just think of it as a way to transfer files from your PC to and from a web server. To FTP files to your server you will need your FTP login information (FTP address, username and password) which you would have received from us and a FTP client.
In this tutorial I will use the FileZilla FTP client. FileZilla is a very popular and useful FTP program and best of all - it's FREE. You can use any other FTP client though - they all work in a more or less similar way. Most webdesign programs now have this built in but they all work similar.
So, go to FileZilla Homepage and download your copy. Windows users make sure you download the .exe file!
Initial Steps
Execute the downloaded exe file and install FileZilla on your computer. The default installation settings are recommended for most users. After installation launch the program.
First of all you need to setup your website.
To do that click the Site Manager icon (the very left icon on the toolbar, see Screenshot 1 below) or go to File > Site Manager.
See screenshot bellow for further assistance.
Screenshot 1: FileZilla interface, red circle on Site Manager Button.
The "Site Manager" window will open. To add a new site follow the steps bellow:
Click "New site" and type in your domain name e.g. zawebs.com (without the http://www.) in the in the “Host:” field , and port 21 in the “Port:” field.
"FTP" should be selected under "Server type".
"Logon type" must be set to "Normal" so you can type in your username and password below (your username and your password has been provided to you by ZAWebs).
Replace “example” in the “User:” field with the username provided to you by ZAWebs, insert your password provided to you by ZAWebs.
Your Site manager should now look something like Screenshot 2:
See screenshots bellow for further assistance.
Screenshot 2.1: Site Manager(set up)
Under the site manager screen, select the “Advanced“ tab at the top of the window.
In the “Default remote directory:” field insert the following line: “/public_html/” (without the inverted commas).
This will save you time each time that you open the programme, it will automatically take you to the directory that you use to edit the contents of your website.
The “Default local directory:” field is the folder on your computer where you have saved your website. You can keep this also as an up-to-date back-up of your website.
You will have to manually browse to the directory.
Screenshot 2.2: Site Manager(advanced)
There after click the “Connect” button at the bottom of the window in order to connect to your server.
The programme should have now connected to your server successfully. We've got connection!
If it hasn’t connected successfully please try the steps again, or contact your internet service provider and ask if there are any problems regarding your internet connection.
Note the two main windows of the program.
The left one is "Local Site" (your computer) and the right one is "Remote Site" (your server).
The local site will be the folder that you specified in the advanced set-up of the programme, it is the location of you website files on your computer.
The remote site is your website that you specified in the host section of the set-up of the programme. This is all the information that is currently on your ftp website.
On the left hand side of the screen bellow the local site is a split screen with all of the files and folders that are inside the local directory that you have specified.
On the right hand side of the screen under remote site are all the files and folders that you have on the server, in other words all of the files, folders and information regarding the layout of your website.
The screen right at the bottom of programme is where you drag and drop files and/or folders from your local site that you wish to be viewed on your website.
To transfer files to the server double-click each file/folder in your "Local Site" window, or select all files/folders you want to transfer and drag them with your mouse to the "Remote Site" folder (make sure you don't select the icon for moving one directory up though!). You can select multiple files or folders by holding down the Control (Ctrl) key on your keyboard.
FileZilla will start transferring selected files to your server automatically as soon as you have dropped the files into the “Remote site” field. You will see upload progress in the "Transfer Queue" window which is the bottom window in FileZilla.
See screenshot bellow for further assistance.
Screenshot 5: Transferring files to the server
The green bar in the space indicates the progress of the file, how far it is from completing. Once all the files have been uplaoded you should see your website on the internet.
