ITEC 334 Fall 2010 Online (Business) Application Development

1. ITEC 334 Fall 2010Online (Business) Application Development Course Introduction,Dynamic Web Pages & Scripting Professor J. Alberto Espinosa

2. My Background • Coordinator for undergraduate IST concentration • Started at AU in Fall’02 • Previously at Carnegie Mellon University • PhD and MS in IS at Carnegie Mellon • Also, BS Mechanical Engineering & MBA • Several years of working experience • Designing, implementing and managing IT & as CFO • Mostly in international contexts • Teach: ITEC 200, ITEC 630/ITEC 455 business analysis and database, ITEC 334 web applications • Research focus: • IT support for global & geographically distributed collaboration • Global software team coordination across distance and time zones

3. Contact • Office: KSB 33 • Office hours on Blackboard and course web site • Telephone: • Office: 202-885-1958 • Fax: 202-885-1992 • E-mail: alberto@american.edu • Web: http://auapps.american.edu/~alberto

4. Agenda • Course Introduction • Dynamic Web Pages & Scripting

5. CourseIntroduction

6. Introduction • “Online (Business) Application Development” • Textbook: NO required textbook • Only optional resource books – see syllabus:http://auapps.american.edu/~alberto/itec334/syllabus.html • Generally, we will meet in FS&IT lab, but we will meet in the classroom some times, per the class schedule:http://auapps.american.edu/~alberto/itec334/schedule.html

7. Course Objectives • Help students develop an understanding and hands-on experience on how to develop and implement web business applications online. • Take students step by step through this process while learning the fundamentals of web application programming – NOT a heavy duty programming course. • Learn how to manipulate and access data from databases through the web – i.e., to be able to handleonline business transactions. • Provide students with a practical and hands-on experience

8. Class Web Site • Current versions of syllabus, class schedule, lecture notes, and homework assignments will be posted on the Blackboard class web site. Class announcements, grades, and e-reserve articles will be available via Blackboard only • Course Syllabus also available at (let’s explore it):http://auapps.american.edu/~alberto/itec334/syllabus.html • Class Schedule also available at (we will explore this later): http://auapps.american.edu/~alberto/itec334/schedule.html • All homework assignments, lecture slides, and other class materials will be available via the Class Schedule link above, and also via Blackboard. See: • Class Notes: http://www.ksbit.net/scripts/itec334/notes.html • Tutorials: http://www.w3schools.com/

9. Dynamic Web Pages and Scripting

10. Client-Server Architecture with Static Web Pages • HTTP (hypertext transfer protocol): • Standard communication protocol between web client applications (i.e., browsers) and servers • Web client requests connection and page to web server • Web server connects to web client • Web server searches and sends page to web client (AS IS) • Web server disconnects from browser • Web Server Main Roles: • Grant, deny, open and terminate connections with web clients • Store, search and send requested pages • Web clients (browsers) Main Roles: • Request, receive and interpret pages from Web servers • Format and display page per HTML description

11. Static Web Sites

12. Static HTML via HTTP Web Server Microsoft Internet Information Server (IIS) Apache Open connection and find HTML file file.html = Connectto server andrequestHTML file Send HTML file “as is” and close connection Client Browser Internet Explorer Netscape Navigator file.html

13. HTML (Hypertext Markup Language) • Is a “page description” language– NOT a programming language – very STATIC • It contains • Text(i.e., the information to display) and • Tags(i.e., describing how the information will be displayed) • Format: <TAGattrib1=value1 attrib2=value2….>Text</TAG> • Some tags don’t need attributes – e.g., <BOLD> • Some tags do – e.g., <FONT size=2 color=blue> • Always need a beginning tag, e.g. <U> (underline) • And some times an ending tag, e.g. <U>Hello!</U> Example: <FONT SIZE=2><BOLD>Hello!! </BOLD><U>there</U></FONT>Displays as:Hello!!there Other examples

14. Static Web Site Components Graphics Files (jpg,gif,etc.) HTML Tags StaticWebPage StaticWebSite HTML File Text OtherFiles(video, sound) OtherWeb Pages

15. Static HTML:HTTP Shortcomings • Corporate information is dynamic • As corporate information changes, • Database contents change too • Web pages need to change too • By hand? Or, do we link to databases? • How to customize displays for different users?

16. Dynamic Web Application Components Graphics Files (jpg,gif,etc.) OtherPrograms, etc. Server-Side Scripts HTML Tags StaticWebPage DynamicWebPage DynamicWeb Application HTML File Text OtherFiles(video, sound) OtherWeb Pages Client-Side Scripts

17. Where does a script execute? A web script can be written to run on the web client (i.e., browser) or server. Web Scripts What is a web script? is a short program that is embedded on a web page. • Client-side scripts:scripts embedded in a web page which are processed (run) by the browserAFTER the web page has been downloaded to the client computer • Server-side scripts:scripts embedded in a web page which are processed (run) by the web serverBEFORE the web page is sent to the browser How to make web pages Dynamic? 2 generic approaches (workarounds) to overcome static HTML:

18. Client-Side Scripting

19. Dynamic Web Pages with Client-Side Scripts Web Server Microsoft Internet Information Server (IIS) Apache Open connection and find HTML file file.htmlwith client-sidescripts = Connectto server andrequestHTML file Send HTML file with scripts“as is” and close connection Client Browser Internet Explorer Netscape Navigator Display file.html&executescripts

20. Client-Side Scripting • Client-side scripts are commands embedded in (written within) an HTML file • Browsers need capability to process scripts • Processing is done by browser AFTER the page has been received from the server • Very useful for interactive and visual effects • The Browser MUST support the scripting language used to write the script • Most popular client-side scripting languages: JavaScript, Visual Basic Script (VB Script) • One HTML page can have more than one script and each one can be written in a different language, but the common practice is to write all the scripts in the same language

21. Client-Side ScriptingEmbedding Client-Side Scripts in HTML HTML lines <SCRIPT LANGUAGE = “JavaScript”> script lines </SCRIPT> More HTML lines <SCRIPT LANGUAGE = “Perl”> script lines </SCRIPT> More HTML lines …………

22. Example 1

23. Example 2 • See: http://faculty.vassar.edu/lowry/kappa.html

24. Example 3 Other examples: http://auapps.american.edu/~alberto/images/BouncingDots.html http://auapps.american.edu/~alberto/images/BouncingHearts.html

25. Server-Side Scripting

26. Server-Side Scripting • Script commands are embedded in HTML file • The server must have capability to process scripts • Processing is done by web server BEFORE page is sent to browser • Useful to customize pages based on data stored on the server (databases, images, etc.) • And for centralized processing (at the server) • Web severmust support the scripting language • For example: • Microsoft’s Active Server Pages (ASP) • Which is a web scripting environment • It runs on Microsoft IIS (Internet Info Server) Web Servers • Supports VB Script or JScript (MS version of JavaScript) • Other scripting languages • PHP: Like ASP, Open Source for Apache servers • Perl: used with CGI scripts (Unix servers)

27. Service Request Response:DynamicallyFormattedHTML Pagew/Results Client-Server Computing:Web Application with Server-Side Scripts WebServer Database Query String Client Query Results Results Network Database Server(usually runs in the same computer as the web server) ClickSubmit Browser Server

28. Request file.html Response HTML doc Generated On-the-Fly HTML doc Fetched (+ Client-Side scripts, if any) Request file.asp  file.aspfile.asp = file.html file.html Dynamic Web Pages with (ASP) Server-Side Scripts Microsoft’s Web Server(ASP + MS Access or SQL Server) Process Scripts SQL Query (if any) file.asp asp.dll Web Server Databases Query Results(record set) file.html Client Browser Internet Explorer Netscape Navigator file.html file.html

29. How ASP Works: • Server script file needs to be named .asp (instead of .html) • User clicks on URL with .asp file • Browser sends request for .asp file to server • Web server notices file extension .asp and • Loads a program (DLL) called ASP.DLL • Which processes this and other .asp files • Server generates a “new” web file • Contains all original HTML stuff • Plus processing results from ASP scripts • These are dynamically formatted w/HTML tags • Server sends the “new” web file to the browser • Not the“original”ASP file!!

30. Server-Side Scripting with Microsoft’s ASP • Embedded scripts in HTML page HTML code (i.e., tags and text) <%‘ Everything after <% is an ASP script ‘ Note: use quote for comments ASP script code (using VB Script as default or other as declared) ………..………. ……………….... %>‘ ASP script ends with %> More HTML code <% more ASP %> Etc.

31. HTML <H3>Welcome to my page</H3> <H2>Here is my product list</H2> <P>Thank you very much for inquiring about our products Dynamically generated HTML lines by ASP <P> <B>Product Price</B> <HR> <P>Hammer ……... $8.50 <P>Pliers ……….… $7.79 <P>Screwdriver ..… $4.50 <P>Power Drill ….. $49.99 <P>Chainsaw …… $95.95 <P>Wrench ……….. $6.50 HTML Dynamic HTML with ASP ASP file on web server (file.asp) ≠ HTML file sent to browser (file.asp) <H3>Welcome to my page</H3> <H2>Here is my product list</H2> <% ‘Start ASP script Open a database connection SQL queries to database Copy results to a record set Display records one at a time Close database connection %> ‘End ASP script <P>Thank you very much for inquiring about our products

32. Common Uses of ASP with Databases • Register a client (add a record) • Membership maintenance (add/update records) • List products & services (select query) • Place orders (add records in database) • Track order status (select query) • Tech support (add and view record) • Fill out a survey (add records in database)

33. See: http://www.jibe4fun.com/scripts/orders/

34. ASP HTML Both Example: ASP (Query) Script

35. Example: Query Results Sent to Browser(HTML dynamically generated by previous ASP script) <IMG SRC="music22.gif"><B>Alberto's Music Instruments, Inc.<p> <TABLE BORDER="0"><B>Customer List</B> <TR><TH>ClientID</TH> <TH>Client Name</TH> <TH>Shipping Address</TH> <TH>Telephone</TH> </TR> <TR><TD>josee</TD> <TD>Alberto Espinosa</TD> <TD>Schenley Park, GSIA Building, #20</TD> <TD>412-268-3681<BR></TD> </TR> <TR><TD>sandy</TD> <TD>Sandra Slaughter</TD> <TD>5000 Forbes Avenue, Pittsburgh PA 15213</TD> <TD>412-268-3681<BR></TD> </TR> etc. </TABLE></BODY></HTML>

36. See: http://www.jibe4fun.com/scripts/orders/Customer_List.asp

37. Using Forms with ASP, HTML and Databases • Capture data from user using HTML forms • Feed form data to an ASP script • Which is what the “Submit” button does • HTML forms contain data items with field names • Which are passed to ASP scripts for processing • Often used to embed an SQL command • To query a database (product list, etc.) • Or to insert records in a database (orders, etc.)

38. On submit,Pass on to Form Object Example: HTML Form (Data Input)Doesn’t have to be ASP, can be plain HTML <B>Customer Registration</B><P> <FORM ACTION= “http://www.jibe4fun.com/scripts/orders/customerSubmit.asp” METHOD=“POST”> <TABLE> <TR><TD>Please enter a customer ID (4 to 16 characters)</TD> <TD><INPUT TYPE=“text” SIZE=“35” NAME="CustomerID"> </TD></TR> <TR><TD>Please enter your name</TD> <TD><INPUT TYPE=“text” SIZE=“35” NAME="CustName"> </TD></TR> etc. </TABLE> <INPUT TYPE="submit" VALUE=“Submit”></TD></TR> </TABLE> </FORM>

39. See: http://www.jibe4fun.com/scripts/orders/Customer_Input.htmlhttp://www.jibe4fun.com/scripts/orders/

40. Request From Form Object Add record in database Example: ASP Processing Data from Forms <!-- customerSubmit.asp --> ASP script HTML

41. Other Related Technologies Client-Side Processing: • Java applets (like client-side scripts but these are full programs) • AJAX (Asynchronous JavaScript and XML – dynamic pages that retrieve data from the server)

42. Other Related Technologies Server-Side Processing: • JSP (Java Server Pages): Sun's version of ASP (*.jsp files) • ASP.NET newer Microsoft development framework • ColdFusion (*.cfm files by Adobe’s Macromedia) http://www.macromedia.com/ • PHP (*.php files – like ASP but is open source ) • Lotus Notes & Domino IBM, http://lotus.com/home.nsf/welcome/domino

43. Setting Up Your Own Domain & Site Steps (more on this later): • Register your own domain name or use the domain established for this course: www.ksbit.net. There are many domain registration services ($10 to $30 per year to keep your domain name active – note: you can register your domain name when you purchase your web hosting plan – see below) • Contract web hosting services with a company to hold your web pages – there are hundreds of web hosting services ranging from ($100 per year to highly priced commercial-strength e-commerce services. For this course, you need a web hosting service that supports Microsoft ASP. The web hosting service used for this course is Alentus Premier Plan: http://www.alentus.com/hosting/premierplan.asp • Go to your domain name service provider, edit your domain details and enter your web hosting service server name (or location – your service provider will send you this information) • Design, populate, upload and register your database(s) ODBC DSN. • Design, develop and upload your HTML files and scripts

44. Course Overview • Brief database refresher • HTML and Cascading Stylesheets (CSS) • Introduction to programming concepts and object orientation • Client-side scripting (JavaScript) • Server-side scripting (ASP and VBScript) • Security and business issues Let’s look at the class schedule:http://auapps.american.edu/~alberto/itec334/schedule.html

45. Web Hosting Setup

46. Setting Up Your Own Domain & Site Steps: • Register your own domain name or use the domain established for this course: www.ksbit.net. There are many domain registration services ($10 to $30 per year to keep your domain name active – note: you can register your domain name when you purchase your web hosting plan – see below) • Contract web hosting services with a company to hold your web pages – there are hundreds of web hosting services ranging from ($100 per year to highly priced commercial-strength e-commerce services. For this course, you need a web hosting service that supports Microsoft ASP. The web hosting service used for this course is Alentus Premier Plan: http://www.alentus.com/hosting/premierplan.asp • Go to your domain name service provider, edit your domain details and enter your web hosting service server name (or location – your service provider will send you this information) • Design, populate, upload and register your database(s) ODBC DSN. • Design, develop and upload your HTML files and scripts

47. Registering your own Domain (example) http://www.alentus.com/hosting/

48. Editing Domain Name Details (example) https://www.domainname.com

49. Connecting to Your Web Hosting Service via FTP(Note: I use IPSwitch’s FTP, but there are many other FTP products and some are free) Your FTP account user ID Your assigned password

50. Uploading Files via FTP Download Button Upload Button