Web Architecture

1. Web Architecture CPTE 212 John Beckett

2. What This Class Is About • It isn’t about all the technologies used on the web… • But we’ll mention a number of them • It isn’t about how to make a web site look good… • That’s JOUR 242. • It’s about making a web site function • Emphasis is on what goes on “underneath the hood”.

3. What We Won’t Learn In This Class • All the various technologies used on the web. • They grow faster than you can learn, so the class would last forever! • There are books (Deitel) which attempt full coverage. • They are broad but not deep. • We will learn a toolset that will do the job, knowing that in practice you’ll probably substitute some of the tools with others. • This is a foundation you can use to expand into other Web technologies

4. The Goal • We want a set of technologies that: • Lets you do what needs to be done at a basic level • Is used in the industry, so jobs are there • Covers the concepts involved so you will understand what other technologies do • Gives you a foundation on which you can build as you add skills

5. Nano-Servers • Later in the semester we’ll bring up a server for each of you running Windows • The Web server will be IIS • The server-side language is ASP

6. Languages We’ll Use • HTML 5 (successor to XHTML, HTML <5) • PHP – Server-side scripting • Includes DBMLs for connecting to databases • SQL – “Standard” language for database operations • JavaScript – Client-side scripting • ASP – Server-side on Windows platform

7. Design Considerations

8. Why Do A Web Site? • Provide information to anyone who comes • Obtain feedback • Take orders • Provide information on progress of orders

9. Architectural Comparison

10. What Goes Over the Wire

11. URL structure • [Protocol name followed by colon • [username[:password]@] • Hostname[.domain]] • Dotted format ending with top level domain. • [Path • Traditional: If it ends with a slash, it’s a directory and directory index is used. • Now: If last item is a directory and a directory index is declared in server config, it’s used. • Parameters]

12. What is HTTP? • Protocol used to transmit web materials from server to client. • Requires a TCP/IP connection such as dialup, Ethernet, Satellite link, DSL, Cell (3g,4g,7g+), or Cable Modem. • These all involve TCP/IP “tunneling” through some other protocol. • The link may be proprietary • Open architectures are winning A protocol is a set of rules for communicating. Example: “Sign language” used by some American Indian tribes

13. A Very Basic Look at HTTP This works even if we’re behind a small router, because the router translates addresses. So don’t worry about the “network translation” issue. The Internet User’s Computer Server Request Response User’s computer (client) and Server each have unique IP addresses. The actual method of delivery over the Internet is somewhat irrelevant.

14. Looking Deeper User’s Computer Request to TCP port 80 Server Response

15. Embedded Objects User’s Computer Request to TCP port 80 Server Response in HTML “Send me that image” Cute_image.jpg A given page may have many images, which the browser may request at the same time.

16. The Static model (We assume at this point that everything to be sent to the user is pre-packaged on the server.) User’s Computer HTTP Request to TCP port 80 Server HTTP Response containing HTML HTTP request: “Send me that image” HTTP Response containing image HTTP is the protocol. The request format may be an HTTP command such as “GET” The response will be HTML, or media of some sort.

17. Graphics • Sample syntax to include a graphic: • <img src=“myimage.gif” /> • Graphic types that work: • bmp – Neither compressed nor transparent • gif – Has transparency, but is not compressed • jpg – Compressed but isn’t transparent • png – Both, but emerging

18. But Wait, There’s More! • We can send information from the client to the server • In the URL line • In the headers • Web2/AJAX allows JavaScript to communicate with the server without reloading the page

19. Dynamic Web

20. HTML w/ Encapsulated Script Making It Dynamic We can make the user experience depend on something • User actions • Information known by the server. Server H.D. Rendering Engine User’s Computer Scripting Engine Request to TCP port 80 Server Response With Encapsulated Script Scripting Engine PHP JavaScript “Send me that image” Cute_image.jpg A scripting engine executes code targeted for it, adds results, then sends them onward without its code. We can use procedural code on either the server side, the client side, or both.

21. The “Evolution” of code HTML with encapsulated JavaScript HTML HTML with encapsulated PHP and JavaScript Server H.D. Rendering Engine User’s Computer Scripting Engine Server Scripting Engine PHP JavaScript “Send me that image” Cute_image.jpg Each scripting language writes what is sent onward. e.g. PHP writes HTML, and sometimes JavaScript. A scripting engine executes code targeted for it, adds results, then sends them onward without its code.

22. Client-Side Scripts JavaScript is most commonly used • Invented by Netscape • Microsoft’s alternative didn’t make it in the marketplace because Netscape’s version grabbed market share • Named for Java because Java was a hot topic, but despite its resemblance is not Java • Runs on the browser - subject to whatever issues the browser has • Does it run this form of JavaScript? • Has the user disabled some functions? • Is the user’s computer slow or distracted? • Implementation chaos has been settled by ECMA • Deprecated techniques are still being used

23. Server-side Scripting Approaches CGI – External Interpreter Module – Integrate w/Svr Microsoft’s ASP family -> ASP.NET PHP Created specifically for the web Written by people who wanted to improve on PERL, functionality similar to ASP but better syntax • Could be used with almost any interpreted procedural language (e.g. BASIC, Java,) • Originally done using PERL • Perl wasn’t designed for the web • Perl wasn’t as bad as any of the alternatives • No longer widely used

24. What is CGI? • CGI (Common Gateway Interface) is the ability of a page to invoke a separate program on the host for processing. • Usually, that program is perl. • It could be any executable program in the host’s native language.

25. Using Perl for CGI • Initially, the Web-specific functions had to be hand-coded in Perl • Libraries were added so that commonly-used functions (like obtaining POST variable values) could be done easily and consistently • Perl is still Perl: It is “eclectic” and therefore messy – like a mobile home with add-on rooms (still a trailer)

26. Mod_Perl • Perl interpreter became an added module for Apache, avoiding CGI overhead • Bringing up Perl for each page delivered • Subtle differences in how variables are handled. • Solves the performance issue. • Doesn’t solve the muddled-language issue.

27. PHP • Developed by people who did not like the messiness of Perl or performance difficulties like the CGI architecture. • Has co-evolved with Perl, each taking ideas from the other. • Clearer language than Perl • New libraries of functions deal with XML and databases. (Perl has the same.)

28. How do PHP and ASP differ? • ASP is a set of functions built-in to Microsoft Internet Information Server (IIS) which interpret a language on the server side. • (Non-Microsoft implementation: Mono) • PHP is an add-on to Apache or IIS, which interprets a language on the server side. • Neither is a function of Apache. • Both can be added.

29. How do ASP and ASP.NET differ? • ASP uses VBScript, a variant of the original BASIC language. • ASP .NET uses Visual BASIC, a more extensive and GUI-oriented system. • ASP may use compiled languages such as C++ • Extension is .asp. • ASP .NET adds a number of additional features as well. • Extension is .aspx.

30. HTML/XHTML Syntax • Page markup language used for text materials – related to SGML & XML. • Composed of tags, attributes, and text. • General form: • <tag attribute="value">text</tag> • Tags may be nested. • Tags must be symmetrical. • <tag>…</tag>

31. XHTML Syntax Note • We are using the current version of HTML, called “XHTML” • XHTML: • <img src=“mygraphic.jpg” /> • Note the slash: It is to clearly state that this is the end of the tag. We could have said: • <img src=“mygraphic.jpg”></img> We are using HTML 5 – which often does not require closing /

32. Why only one Client-Side Language and many Server-Side Languages? • To be effective, a client-side language has to be implemented on every browser that will visit your site. • The server-side language only runs on your site. So it may be any language your web server supports. • Portability may be a consideration, but PHP runs anywhere

33. MIME types • Originally developed for handling email attachments. • Same concept used for the Web: the “extension” is used to indicate how the file is to be handled. • Which helper app is to be used (CGI or module) • X- means experimental; app is sent the program or use browser plug-in

34. HTTP Request Methods • GET – Simply send the document. • HEAD – Send only header info. • Has it changed since cached? • POST – Use enclosed data to process this request (form processing). • PUT – Save this document on the server. • DELETE – Delete this document. • XMLHttpRequest – used for AJAX HTTP Transfers

35. Three-Tiered Architecture Web Server Database Server Former View Client Web App. Server Web Services Server New View The former idea of three-tiered web architecture included a client (browser), web server, and database server. The new view is that the web server is more active (for instance, connecting with more sources of data and involving more complex implementation), and connects with a Web Services server - which in turn may connect with various sources of data including database server(s). Other sources

36. What’s the Difference? Database Approach Web Services Approach Responds to an application’s request Validates and authenticates Responds • Gives an application access to the database • Select: What’s there? • Insert: Add data • Update: Change data • Service makes decisions about what will happen to database • Application makes decisions about what will happen to database

37. Implementing Apache Directives • You must restart Apache to implement any changes you make in the configuration • XAMPP has a console for doing this. • Under LINUX: #/etc/init.d/apache2 restart

38. Apache Directives • ServerName – Used for physical server. Default domain served. • ServerRoot – Where the server software is located. • ServerAdmin – Where to send complaints. • DocumentRoot – Where the Web page tree begins.

39. Apache Directives • Alias – Used for a pseudo-directory. • The homework server uses this for individuals. • Redirect – Points to another server. • Useful if you move things. • DirectoryIndex – List of possible welcome pages for a directory. Homework server says: DirectoryIndex index.html index.htm index.shtml index.cgi index.php • UserDir – Specifies directory within a user’s area if tilde (“~”) access is used.

40. IIS Configuration • Controlled with GUI • Typically Microsoft: Things move around from release to release • Mirrors Apache functionality

41. Data Bases • Good way to keep data organized • Separates data from meta-data (information on how the data is structured) • Allows programs to keep working even if database is redesigned (provided original data is still there) • Architected interface usable by many languages • Provides for placing database on any server

42. What Web Services Do • A data base server obtains and updates data based on commands given it • A Web service expands this concept to include include processing • Process Credit Card transactions • Provide real-time data such as stock quotes or weather information

43. How Web Services Function • Accept requests • Provide information • Enabling technology: XML • How data coming from Web Services is usually structured • Problem: Battle of the standards • SOAP is most common In PHP, you can treat any Web site as a Web Service with the file() function, which places the result of the http GET in a variable. This is called a “mashup”.

44. AJAX (from Wikipedia) • Ajax, shorthand for AsynchronousJavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page's interactivity, speed, and usability. • The Ajax technique uses a combination of: • XHTML (or HTML) and CSS, for marking up and styling information. • The DOM accessed with a client-sidescripting language, especially ECMAScriptimplementations such as JavaScript and JScript, to dynamically display and interact with the information presented. • The XMLHttpRequest object to exchange data asynchronously with the web server. In some Ajax frameworks and in certain situations, an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server. • And optionally: • XML is sometimes used as the format for transferring data between the server and client, although any format will work, including preformatted HTML, plain text, JSON and even EBML. These files may be created dynamically by some form of server-side scripting. • SOAP is a protocol for exchanging XML-based messages over a computer network, normally using HTTP. SOAP forms the foundation layer of the Web services stack, providing a basic messaging framework that more abstract layers can build on. • Like DHTML, LAMP and SPA, Ajax is not a technology in itself, but a term that refers to the use of a group of technologies together.

45. HTML Validator • Use http://validator.w3.org/ to test your code to see if it is “clean”. • You may wish to include the Validation icon code so you can check it later. • Failure to pass validation may result in loss of points on assignments!

46. Our Class Platform Technologies Concepts