Client-server practices

Size: px

Start display at page:

Download "Client-server practices"

Reynold Griffith
5 years ago
Views:

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

2 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 clientà server 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 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 2

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

4 Your goal File structure on your server account: public_html (folder) > test (folder) -----> page1.html -----> page2.html -----> test2 (folder) -----> page3.html Logging into your UofO server account We will begin by looking at how you can login to the server s (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 4

Creating the test/test2 folders Let s first create the folder structure: After logging in, type: cd public_html mkdir test cd test mkdir test2 cd test2 cd.

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: <html> This is page one!

5 Creating the test/test2 folders Let s first create the folder structure: After logging in, type: cd public_html mkdir test cd test mkdir test2 cd test2 cd.. public_html (folder) ---> test (folder) ---> test2 (folder) 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: <html> This is page one! <hr> Here s a <a href= page2.html >link</a> to the page2 file. Here s a <a href= test2/page3.html >link</a> to thepage3 file. </html> Save (Write out) the file as: page1.html and exit. Back at the command prompt, use to see if the new file is now there 5

6 Create page2 text file on client Now let s use your local machine s Notepad.exe (editor) app to create the text file: page2.html In the Notepad editor, enter this text: <html> This is page two! <hr> Here s a <a href= page1.html >link</a> to the page1 file. Here s a <a href= test2/page3.html >link</a> to thepage3 file. </html> Save the file as: page2.html on your PC Let s now use FileZilla to copy that file from your PC s hard-disk to the UofO webserver s hard-disk Specifically, to the public_html/test folder Copy page3 text to client, then to server Here s what we want page3.html to be: <html> This is page three! <hr> Here's a relative stye <a href="../page1.html">link</a> to the page1 file. <br> Here's an absolute style <a href="/pangburn/test/page1.html">link</a> to that page. <br> Here's the fully written out <a href=" to that page. </html> 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? 6

7 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 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 page3 text to client, then to server So, instead of typing this code for page3.html: <html> This is page three! <hr> Here's a relative stye <a href="../page1.html">link</a> to the page1 file. <br> Here's an absolute style <a href="/pangburn/test/page1.html">link</a> to that page. <br> Here's the fully written out <a href=" to that page. </html> open pages.uoregon.edu/pangburn/test/test2/page3samplecode.html in Firefox, then use Fileà Save As to save that text file to your PC s hard-disk using the name page3.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. 7

8 Copy page3 text to client, then to server You now have a local copy of that code from the server Note: remember that could ao get a copy of the code underlying page3.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 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 public_html (folder) ---> test (folder) You should have have the full set of files and folders we were aiming to create (see next slide) ---> test2 (folder) 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,, 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/ 8

Student Website Setup

Student Website Setup In this course, students upload assignments to their websites hosted on the coislinux.austincc.edu server. Each student is supplied with a password protected account to access their individual websites.