Clientserver practices DSC 340 Mike Pangburn Agenda Overview

Client-server practices DSC 340 Mike Pangburn

Agenda Overview of client-server development Editing on client (e. g. , Notepad) or directly on server (e. g. , nano) Practice Create text file from scratch on server (via nano app) Create text file from scratch on client machine (via Notepad app), then move it to server via FTP (File. Zilla) Copy code from webpage (via Firefox browser) to client, then move it to server via FTP Create hyperlinks between these 3 pages

Client-server development Two common servers: Web and FTP Both are software running on a Internet-connected computer (a big box or even a small laptop) that listens to incoming requests for files Web server software listens on port 80 (default) FTP server software listens on port 21 (default) Web (HTTP) vs. FTP communication protocol differences HTTP protocol designed for server client file sending FTP designed for bidirectional file sending and general file management Creating/deleting files and folders, renaming and moving files, setting security privileges

Client-server development Most server boxes (incl. the server we will use here at the Uof. O) are set up to be running both FTP-server and webserver software Workers typically develop content on their own laptop/PC and then upload that content to the server Upload from client server is typically done via FTP client software that talks to the FTP server software Common (free) FTP client software: File. Zilla Another option is to develop content directly on the server by interfacing with a coding environment (e. g. , an editor) that is running directly on the server E. g. , Uof. O server has common (free) editor program, called nano, that we can run to edit files directly on the Uof. O server

Client-server development Contrasting the two approaches: working client-side via FTP, or server-side via server editor (nano) Relative advantage of working client-side via FTP If you work with code on your client machine, then you are within the familiar local Windows or OS-X environment, using a familiar editor such as Notepad or Text. Edit. You will maintain copies of your code on both client and server (back up) Relative disadvantage of working client-side via FTP Extra step of copying code updates from client to server (via FTP software)

Practice Four parts to exercise 1. Create text file from scratch on server (via nano app) 2. Create text file from scratch on client machine (via Notepad app), then move it to server via FTP (File. Zilla) 3. Copy code from webpage (via Firefox browser) to client, then move it to server via FTP 4. Create hyperlinks between these 3 pages

Logging into your Uof. O server account We will begin by looking at how you can login to the server’s (in this case, the Uof. O web server) Operating System directly, giving you full control of your account Within your server account, we will then be able to run the nano editor we will use to create our first text file: page 1. html The Chiles building computer labs and classrooms have a client app called SSH Secure Shell that will let us log into the Uof. O server Hostname of the Uof. O server: shell. uoregon. edu Your standard username and password apply

Creating the test/test 2 folders Let’s first create the folder structure: After logging in, type: ls cd public_html mkdir test ls cd test ls mkdir test 2 ls cd. . ls public_html (folder) | |---> test (folder) |---> test 2 (folder) We will talk about each of these commands At this point you are back in the test folder, so this “list” command show you the test 2 folder

Create page 1 text file on server using nano app (editor) After issuing the commands on the prior slide, you are in the test folder. That is where we want the file page 1. html to be. To use the nano app to create that new file, type: nano page 1. html In the editor, then enter this text: <html> This is page one! <hr> Here’s a <a href=“page 2. html”>link</a> to the page 2 file. Here’s a <a href=“test 2/page 3. html”>link</a> to thepage 3 file. </html> Save (Write out) the file as: page 1. html and exit. Back at the command prompt, use “ls” to see if the new file is now there

Create page 2 text file on client Now let’s use your local machine’s Notepad. exe (editor) app to create the text file: page 2. html In the Notepad editor, enter this text: <html> This is page two! <hr> Here’s a <a href=“page 1. html”>link</a> to the page 1 file. Here’s a <a href=“test 2/page 3. html”>link</a> to thepage 3 file. </html> Save the file as: page 2. html on your PC Let’s now use File. Zilla to copy that file from your PC’s hard-disk to the Uof. O webserver’s hard-disk Specifically, to the public_html/test folder

Copy page 3 text to client, then to server Here’s what we want page 3. html to be: <html> This is page three! <hr> Here's a relative stye <a href=". . /page 1. html">link</a> to the page 1 file. Here's an absolute style <a href="/pangburn/test/page 1. html">link</a> to that page. Here's the fully written out <a href="http: //pages. uoregon. edu/pangburn/test/page 1. html">link</a> to that page. </html> This code is accessible via HTTP web-browsing at the URL: pages. uoregon. edu/pangburn/test 2/page 3 samplecode. html How do you copy that code from a web page and make it your own web page?

Copying existing code It is common to find some existing code that you want to use or modify (naturally, consider Intellectual Property restrictions) If you have FTP access to the hard-disk folder where the file resides, you can use an FTP client (e. g. , File. Zilla) to drag-&-drop a copy of that file to your own hard-disk Otherwise, if you have web (HTTP) access to the hard-disk folder where the file resides, you can use an HTTP client (e. g. , Firefox). Two options: File Save As… (be sure to save as raw HTML or select the “All files” option when saving, and be sure the file extension is. html) Or, you can select and copy (CTRL-C) the code to your client machine’s Clipboard, and then open Notepad and paste it In this case, you don’t have FTP access to my account, so you need to use your browser to get the copy

Copy page 3 text to client, then to server So, instead of typing this code for page 3. html: <html> This is page three! <hr> Here's a relative stye <a href=". . /page 1. html">link</a> to the page 1 file. Here's an absolute style <a href="/pangburn/test/page 1. html">link</a> to that page. Here's the fully written out <a href="http: //pages. uoregon. edu/pangburn/test/page 1. html">link</a> to that page. </html> …open pages. uoregon. edu/pangburn/test 2/page 3 samplecode. html in Firefox, then use File Save As… to save that text file to your PC’s hard-disk using the name page 3. html Specify the file format as All Files so that Firefox doesn’t know what kind of data it is dealing with and therefore Firefox won’t mess around with the text.

Copy page 3 text to client, then to server You now have a local copy of that code from the server Note: remember that could also get a copy of the code underlying page 3. html by using the browser’s View Source feature (CTRL-U), and then doing a copy-&-paste to Notepad. You still need to get a copy of that code into your webserver account’s test 2 folder. As we did with the page 2. html file, we now use File. Zilla to drag-n-drop the local page 2. html file to the server public_html (folder) | |---> test (folder) |---> test 2 (folder) Drop the page 2. html file within the test 2 folder You should have the full set of files and folders we were aiming to create (see next slide)

Goal (should be accomplished) File structure on your server account: public_html (folder) | |-------> test (folder) | |-----> page 1. html |-----> page 2. html |-----> test 2 (folder) | |-----> page 3. html Remember that there are three ways you can look at and verify your files and folders are all ther 1. Login via SSH Secure Shell and move through your folders and look at them 3 commands to use are: cd “foldername” , ls , and cd 2. Look at folders after logging in via FTP (File. Zilla) 3. Use HTTP browser (e. g. , Firefox) by navigating to: pages. uoregon. edu/’youraccount”/test/ . .