1. 1 Welcome to CSC 301 Web Programming Charles Frank

2. Course Goals  Learn to create Web-based client / server applications  Learn popular Web programming / scripting languages  Learn some simple Web-oriented database techniques  Learn some issues around designing and testing client-server programming (there are differences from programming for a single computer) 2

3. Software  A Web browser such as Microsoft Internet Explorer 7+, Mozilla Firefox, Safari etc.  A code-based HTML editor (not a WYSIWYG…), or a text editor Notepad, Notepad++ on Win, SimpleText on Mac PHP Coder IDE, http://www.phpide.com/http://www.phpide.com/  A Web server, such as Apache HTTP Server or Microsoft Internet Information Services  PHP 5.x → a server-side scripting language developed by the PHP group (http://www.php.net)http://www.php.net  MySQL 4.1+ → an open source database management system developed MySQL AB (http://www.mysql.com)http://www.mysql.com 3

4. Organization  Server is cscdb.nku.edu (Web + Database)  Account name is ?  Password is ?  Access through: FTP ○ connect using WS_FTP LE (http://cscdb.nku.edu/csc301/frank/wsftp6.zip)http://cscdb.nku.edu/csc301/frank/wsftp6.zip ○ upload your files ○ test your programs 4

5. Organization  To access your Web pages, go to http://cscdb.nku.edu/csc301/username/...  Your account will have a directory called as your username Your html start pages go here Good practices is to name main page index.html Browser access will go to this directory 5

6. WWW Client/Server Model 6 Web client/server architecture

7. The Client/Server Model  The Internet and the www function according to the client/server model or paradigm  Term “Client/Server” : Can describe a relationship between two computer programs – the "client" and the "server". ○ Client - requests some type of service (such as a file or database access) from the server. ○ Server - fulfills the request and transmits the results to the client over a network Refers also to computers, joined by a network, that run the client / server programs. 7

8. Web Clients and Servers Web client  Refers to both a computer and an application running on that computer  As a machine - connected to the Internet when needed  As an application: Program that runs on a user's computer ○ Called a Browser Communicates user's commands (=requests for Web resources) to the Web and interprets and displays the responses (=Web pages) 8

9. Web Clients and Servers Web Client  Can execute some limited computational tasks e.g. Java applets, Javascript  Generally act as a “smart terminal” and can't run applications on their own.  Uses HTTP (Hypertext Transfer Protocol)

10. Web Clients and Servers Web Server  Refers to both a computer and a program running on that computer  As a computer: Continually connected to the Internet Runs web server software (such as Apache or Internet Information Server) 10

11. Web Servers  As an application: Receives messages from a client and performs the requested service ○ Send back status code, web page, and associated files ○ Execute a script or program ○ Log message traffic ○ Provide secure communications ○ Support many simultaneous clients Uses HTTP (Hypertext Transfer Protocol) 11

12. WWW Client/Server Model HTTP protocol the main protocol used for communication between a browser and a Web server 12

13. HTTP protocol works by sending commands over a TCP connection The browser initiates a TCP connection to the web server. The browser sends request for a particular web page. The browser reads the contents of the web page from the TCP connection and displays it. The browser closes the TCP connection used to transfer the web page.

14. HTTP protocol Each separate item in a web page (e.g., pictures, audio) requires a separate TCP connection. HTTP specifies commands that the client issues to the server and the responses that the server sends back to the client.

15. 15 User of the client machine types in a URL URL = Uniform Resource Locator, represents the address of a resource on the Internet Recall the anatomy of an URL, consists of: protocol, domain name, hierarchical location of file on web server, resource name Serving a Page

16. 16 Server name is translated to an IP address via DNS client (Netscape) server (Apache) http://www.smallco.com/index.html 192.22.107.5 Serving a Page

17. 17 Client connects to server using IP address and port number Serving a Page

18. 18 Client determines path and file to request Serving a Page

19. 19 Client sends HTTP request to server Serving a Page

20. 20 Server determines which file to send Serving a Page

21. 21 Server sends response code and the document Serving a Page

22. 22 Connection is broken Serving a Page

23. 23 HTTP is Stateless = no persistent client/server connection Generic not tied to web browsers exclusively can serve any data type from a command window, you can connect to a Web server and request resources as a Web browser does; in a command window: telnet cscdb.nku.edu 80 get /csc301/campana1/processPostFormData.php HTTP/1.0 Serving a Page

24. Client-Server Capabilities Clients can: Format output for display Accept user input Do limited computation Including verification of user input Modify attributes of displayed page 24

25. Client-Server Capabilities Clients can't: Read or write files (other than very simple ones) Access databases Share data among users

26. Client-Server Capabilities Servers can: Retrieve and send web pages Create dynamic web pages Read and write files Access databases Share web pages among many users 26

27. Client-Server Capabilities Servers can't: Display web pages themselves Interact directly with the user Modify displayed pages in real-time (e.g. highlight item when mouse passes over it)

28. More about Web Client-Server Architecture  A system consisting of a client and a server is known as a two-tier system Client tier, or user interface tier, or “front end” Server, or “back end” 28

29. More about Web Client-Server Architecture  A three-tier, or multi-tier, client/server system consists of three distinct pieces: Client tier Processing tier, or middle tier – still the Web server Data storage tier  In both cases – distributed application = multiple computers share the computing responsibility for a single application

30. More about Web Client-Server Architecture 30 The design of a three-tier client/server system The two-tier client-server architecture is a physical arrangement in which the client and the server are two separate computers. Three-tier client-server architecture is more conceptual than physical as the storage tier and the processing tier can be located on the same server…

31. Client-Side or Server-Side?  In some cases, decision is simple: If you want to control the Web browser → where / tool? If you want to access a database on a server → where / tool? 31

32. Client-Side or Server-Side?  Tasks that both sides can accomplish (such as validating forms)? General rule: use client-side scripting to handle user interface processing and light processing, such as validation; use server- side scripting for intensive calculations and data storage