6. Introduction to Web Programming

Transcription

1 6. Introduction to Web Programming CT451 Internet Programming Course Notes by: Dr. Mostafa Dahshan Department of Computer Engineering College of Computer and Information Sciences King Saud University

2 6. Introduction to Web Programming Web Applications Web Applications Client/Server applications Client: browser Server: web server Client submits request Server processes client s request Server responds Client process and display server s response M. Dahshan CT451 Internet Programming Page 2 of 24

3 6. Introduction to Web Programming Server-Side Applications Server-Side Applications Processing is done at the server Server responds with HTML code Client only renders HTML code Example: CGI (PHP, ASP.net, Perl, CodeFusion) Advantages Browser independent Portable Disadvantages More overhead on server Slower Not suitable for interactive applications M. Dahshan CT451 Internet Programming Page 3 of 24

4 6. Introduction to Web Programming Hybrid Applications Hybrid Applications Not pure client side or server side Most web applications combine both Server side for data processing Client side for interactive user interface M. Dahshan CT451 Internet Programming Page 4 of 24

5 6. Introduction to Web Programming Common Gateway Interface (CGI) Common Gateway Interface (CGI) Standard interface between external applications and web servers Web server execute CGI program in real time set some environment variables execute program (fork, exec) redirect sdtin to program, stdout to browser M. Dahshan CT451 Internet Programming Page 5 of 24

6 6. Introduction to Web Programming Common Gateway Interface (CGI) Common Gateway Interface (CGI) M. Dahshan CT451 Internet Programming Page 6 of 24

7 6. Introduction to Web Programming CGI Environment Variables CGI Environment Variables REQUEST_METHOD GET: data is sent as part of URL POST: data sent in stdin QUERY_STRING list of variable names and their values CONTENT_LENGTH length of data in bytes (for POST method) M. Dahshan CT451 Internet Programming Page 7 of 24

8 6. Introduction to Web Programming Request Method: GET Request Method: GET GET /cgi-bin/mult.cgi?x=5&y=10 HTTP/1.1 GET /cgi-bin/mult.cgi?x=5&y=10 HTTP/1.1 Request method Resource name i.e CGI program Query string M. Dahshan CT451 Internet Programming Page 8 of 24

9 6. Introduction to Web Programming URL Encoding URL Encoding Variables are separated by & Alphanumeric characters not encoded Most non-alphanumeric encoded as %XX XX is the hex ASCII value of character Space: encoded as + e.g. data = Salam Alykom! form.cgi?data=salam+alykom%21 = is encoded as %3D + is encoded as %2B M. Dahshan CT451 Internet Programming Page 9 of 24

10 6. Introduction to Web Programming Request Method: POST Request Method: POST POST /cgi-bin/post1.cgi HTTP/1.1 Data (query string) is sent to stdin Data is encoded using same URL encoding CONTENT_LENGTH set to byte length of data M. Dahshan CT451 Internet Programming Page 10 of 24

11 6. Introduction to Web Programming Examples Examples dyntable.c calc.c get1.html get1.c post1.html post1.c M. Dahshan CT451 Internet Programming Page 11 of 24

12 6. Introduction to Web Programming When to use GET or POST? When to use GET or POST? GET recommended for retrieving data search queries POST recommended for storing or updating data sending M. Dahshan CT451 Internet Programming Page 12 of 24

13 6. Introduction to Web Programming Reasons to use POST Reasons to use POST Form data is too large Form data contain non-ascii characters Make form processing less visible to user hidden fields note: user can still view source! GET is more friendly to search engines M. Dahshan CT451 Internet Programming Page 13 of 24

14 6. Introduction to Web Programming Client Side Applications: JavaScript Client Side Applications: JavaScript Dynamic contents of web pages Handle user events click mouse over form submit document load Can be used to validate form before submit M. Dahshan CT451 Internet Programming Page 14 of 24

15 6. Introduction to Web Programming DOM - Document Object Model DOM - Document Object Model Represent web page (document) as an object Allow manipulation of page contents HTML Style sheets (CSS) Events Access to DOM provided by JavaScript Examples textbox1.style.visibility = "visible"; document.form1.username.value = "ahmed"; M. Dahshan CT451 Internet Programming Page 15 of 24

16 6. Introduction to Web Programming Example: jscalc1.html Example: jscalc1.html Simple calculator add, subtract, multiply two numbers all processing done on client side M. Dahshan CT451 Internet Programming Page 16 of 24

17 6. Introduction to Web Programming XML - Extensible Markup Language XML - Extensible Markup Language Markup language (similar to HTML) Extensible: can define tags Used for data representation data exchange database representation document formats (MS Office, Open Office, ) M. Dahshan CT451 Internet Programming Page 17 of 24

18 6. Introduction to Web Programming Example: studentdb.xml Example: studentdb.xml <?xml version = "1.0"?> <studentdb> <student> <name>ahmad Mohammad</name> <id> </id> <enrollments semester = "sp09"> <class> <name>network Programming</name> <number>cen 463</number> </class> </enrollments> </student> M. Dahshan CT451 Internet Programming Page 18 of 24

19 6. Introduction to Web Programming Example: studentdb.xml <student> <name>ibrahim Saad</name> <id> </id> <enrollments semester = "sp09"> <class> <name>network Security</name> <number>cen 448</number> </class> </enrollments> </student> </studentdb> M. Dahshan CT451 Internet Programming Page 19 of 24

20 6. Introduction to Web Programming AJAX - Asynchronous JavaScript and XML AJAX - Asynchronous JavaScript and XML Web development technique Combines existing technologies JavaScript, HTML, XML, CSS, Create interactive web applications JavaScript send server queries in background using XMLHttpRequest object Speed animation, no interference with display M. Dahshan CT451 Internet Programming Page 20 of 24

21 6. Introduction to Web Programming Example: ajax1.html + checkname.c Example: ajax1.html + checkname.c User registration form Send request to server in background Server checks if username already taken Result returned to page No need to submit form and reload page M. Dahshan CT451 Internet Programming Page 21 of 24

22 6. Introduction to Web Programming Additional References Additional References Getting Started with CGI Programming in C Common Gateway Interface CGI Made Really Easy CGI Programming cgi-lib M. Dahshan CT451 Internet Programming Page 22 of 24

23 6. Introduction to Web Programming Additional References cgic: an ANSI C library for CGI Programming Methods GET and POST in HTML forms JavaScript XML - Universal format for data: Ajax Tutorial M. Dahshan CT451 Internet Programming Page 23 of 24

24 6. Introduction to Web Programming Additional References AJAX Very Dynamic Web Interfaces Beginning Ajax M. Dahshan CT451 Internet Programming Page 24 of 24