Sidebar

Chapter 1: Internet, Networks and TCP/IP

Chapter 2: The LINUX operating system - Setting up a Linux Web Server

Chapter 3: Your first webpage, Learning HTML and CSS

Chapter 4: Building Dynamic Websites with PHP in progress

Chapter 5: Web forms under construction

Chapter 6: Developing your first Bioinformatics web application under construction

Chapter 7: The PHP programming language: strings, arrays, functions, cycles, conditional statements, regular expressions under construction

Chapter 8: Sample Bioinformatics Web Applications under construction

chapter_3_-_your_first_webpage_-_learning_html_and_css:uploading_files_edited_locally_to_a_remote_server

3-2: Uploading local files to a remote server

Local vs Remote File Editing

In a typical workflow, html pages and scripts code are edited locally, on a client PC, where a graphical user interface, and nice graphical editing software are available. Similarly, images are generally edited offline, maybe by using a program such as Adobe Photoshop or The GIMP.

Edited files are then uploaded to the server for online publication by using an FTP client software. Mind that modern FTP clients are not limited to the use of the FTP protocol, but also allow connection with SFTP and SSH/SCP (SCP is a protocol associated to SSH, called the Secure Copy Protocol, used to transfer files over an SSH connection). This is essential for us because to upload files to one of our servers, on which OpenSSH Server was installed, we will need to select a secure protocol.

In alternative, or maybe for particular tasks and limited editing, html files or source code files can be edited directly on the server over a Terminal SSH connection with a shell editor such as nano. However graphical text editors are more friendly to use and significant amounts of web development work will usually take place locally by using tools running within a graphical desktop environment (either Linux, Mac or Windows, depending on what you have). For images, we basically have no alternative but working locally within a graphical environment, and then upload the images to the remote server.

FTP Clients - FileZilla

Several FTP clients are available, for all OS platforms. We will just consider one FTP client, which is free software licensed under the GNU Public Licence, available for all platforms, called FileZilla. Feel free to use a different software if you prefer, the basic functionalities of these FTP clients are generally well conserved, as they basically all offer a graphical interface to the underlying FTP or SSH protocols, which will not change even if you use a different software to access them.

FileZilla can be downloaded here

On the software interface there is an icon on the upper-left part (see figure 3-2-3) that provides access to the FileZilla Site Manager. This is where you can create new sites to connect to. For each site you need to enter:

  • a name, for naming the connection (this can be anything you choose, for example “University server”). In the example in figure 3-2-1 the site is called “My Site”.
  • a host address (this can be either a host name or an IP address)
  • the connection type (FTP or SFTP-SSH). We will always choose the secure protocol
  • username of your user on the server
  • remote password
Figure 3-2-1: The FileZilla Site Manager

Once a site is created and saved, you can, at any time, go to the site manager and connect to the site by pressing the connect button.

On the first connection, similarly to what happens on a first SSH connection through the Terminal, you get a Key confirmation screen (figure 3-2-2). If you tick the option checkbox you will see this confirmation screen again on subsequent connections.

Figure 3-2-2: FileZilla RSA Key check on first connection

Once you are connected, you will see a window with two panes. On the left, the local filesystem (in red in the figure), on the right the server's remote filesystem (in green).

Figure 3-2-3: FileZilla Interface

In order to upload files to the server, just select files from the left pane and drag them to the right pane, in the correct destination directory.

Before we move to building the first web page, let's have a look to available code text editors to do the job.

Chapter Sections

Discussion

Enter your comment. Wiki syntax is allowed:
JVVIB
 
chapter_3_-_your_first_webpage_-_learning_html_and_css/uploading_files_edited_locally_to_a_remote_server.txt · Last modified: 2013/02/25 17:35 by cellbiol