1. Client-server practices DSC340 Mike Pangburn

2. 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 (FileZilla) Copy code from webpage (via Firefox browser) to client, then move it to server via FTP Create hyperlinks between these 3 pages

3. 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

4. Client-server development Most server boxes (incl. the server we will use here at the UofO) 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: FileZilla 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., UofO server has common (free) editor program, called nano, that we can run to edit files directly on the UofO server

5. 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 TextEdit. 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)

6. 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 (FileZilla) 3.Copy code from webpage (via Firefox browser) to client, then move it to server via FTP 4.Create hyperlinks between these 3 pages

7. Your goal File structure on your server account: public_html (folder) | |-------> test (folder) | |-----> page1.html |-----> page2.html |-----> test2 (folder) | |-----> page3.html

8. Logging into your UofO server account We will begin by looking at how you can login to the servers (in this case, the UofO 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: page1.html The Chiles building computer labs and classrooms have a client app called SSH Secure Shell that will let us log into the UofO server Hostname of the UofO server: shell.uoregon.edu Your standard username and password apply

9. Creating the test/test2 folders Lets first create the folder structure : After logging in, type: ls cd public_html mkdir test ls cd test ls mkdir test2 ls cd test2 ls cd.. ls public_html (folder) | |---> test (folder) |---> test2 (folder)

10. Create page1 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 page1.html to be. To use the nano app to create that new file, type: nano page1.html In the editor, then enter this text: Save (Write out) the file as: page1.html and exit. Back at the command prompt, use ls to see if the new file is now there This is page one! Heres a link to the page2 file. Heres a link to thepage3 file.

11. Create page2 text file on client Now lets use your local machines Notepad.exe (editor) app to create the text file: page2.html In the Notepad editor, enter this text: Save the file as: page2.html on your PC Lets now use FileZilla to copy that file from your PCs hard-disk to the UofO webservers hard-disk Specifically, to the public_html/test folder This is page two! Heres a link to the page1 file. Heres a link to thepage3 file.

12. Copy page3 text to client, then to server Heres what we want page3.html to be: This code is accessible via HTTP web-browsing at the URL: pages.uoregon.edu/pangburn/test/test2/page3samplecode.html How do you copy that code from a web page and make it your own web page? This is page three! Here's a relative stye link to the page1 file. Here's an absolute style link to that page. Here's the fully written out link to that page.

13. 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., FileZilla ) 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 machines Clipboard, and then open Notepad and paste it In this case, you dont have FTP access to my account, so you need to use your browser to get the copy

14. Copy page3 text to client, then to server So, instead of typing this code for page3.html: …open pages.uoregon.edu/pangburn/test/test2/page3samplecode.html in Firefox, then use File Save As… to save that text file to your PCs hard-disk using the name page3.html Specify the file format as All Files so that Firefox doesnt know what kind of data it is dealing with and therefore Firefox wont mess around with the text. This is page three! Here's a relative stye link to the page1 file. Here's an absolute style link to that page. Here's the fully written out link to that page.

15. Copy page3 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 page3.html by using the browsers 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 accounts test2 folder. As we did with the page2.html file, we now use FileZilla to drag-n-drop the local page2.html file to the server Drop the page2.html file within the test2 folder You should have have the full set of files and folders we were aiming to create (see next slide) public_html (folder) | |---> test (folder) |---> test2 (folder)

16. Goal (should be accomplished) File structure on your server account: public_html (folder) | |-------> test (folder) | |-----> page1.html |-----> page2.html |-----> test2 (folder) | |-----> page3.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 (FileZilla) 3.Use HTTP browser (e.g., Firefox) by navigating to: pages.uoregon.edu/youraccount/test/