WEB APPLICATION  INTRODUCTION NCU CE MWNL Shaojung Lu (shaojung@gmail.com)
Simple Type of Applications <ul><li>Console Application </li></ul><ul><li>Windows Application  </li></ul><ul><li>Web Appli...
How Do a Web Work Store many web pages in the server Request Response
But How the Screen Work? Edit HTML Manual?? (Dreamweaver ? FrontPage ? Notepad or vi ?) Retrieve data from sensors and pro...
How does the webpage of Taipei Feitsui Reservoir Work? <ul><li>There is a program on the server. </li></ul><ul><li>The pro...
How does the interaction function on the web site work? 1. Request 3. Response 2.The program runs.
More complicated of the web application system DB Server Web Server 2. Query Data 3. Retrieve Data 1. Request 4. Response
More and more complicated of the web application system DB Server Web Server 2. Query Data 5. Retrieve Data Business Rules...
Program Languages of Web Application <ul><li>CGI: Perl / C / C++ </li></ul><ul><li>ASP: Active Server Pages – An Interpret...
CGI Code Look Like? <ul><li>foreach $line (@MSGSDATA) { if ($line =~ /<!--(.*)-->/) { $i++; } } </li></ul><ul><li>$page=($...
Server Page Code Look Like? <ul><li><table width=&quot;630&quot; height=&quot;58&quot; border=&quot;0&quot; align=&quot;ce...
Interpreter? Fast or Slow? <ul><li>ASP and PHP is all interpreter language. </li></ul><ul><li>Java and .NET appears in the...
CGI or Server Page? <ul><li>Hard coding like CGI is hard to maintain the appearance of the web page. </li></ul><ul><li>Usi...
MVC Architecture Model Controller View Model: Manage the data Controller: Control Model and the view to present the data. ...
Is the program still running when we see the page?
How does Google implement it?
AJAX - Asynchronous JavaScript and XML 4. JavaScript Programs runs in your browser 8. JavaScript get the response and make...
AJAX – How to write it? <ul><li>Using the component XMLHttpRequest To be the main component. </li></ul><ul><li>Need to con...
AJAX – Using Framework Now! <ul><li>We can use jQuery in all Languages. </li></ul><ul><li>ASP.NET    AJAX.NET </li></ul><...
Web Application Programmer….. You have to learn everything <ul><li>HTML </li></ul><ul><li>A Web application Language </li>...
<ul><li>Q & A </li></ul>Thank you
Upcoming SlideShare
Loading in...5
×

Web Application Introduction

1,330
-1

Published on

A brief introduction to web application.

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
  • Fantastically simple presentation! If only it was this simple for real...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,330
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
52
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Web Application Introduction

  1. 1. WEB APPLICATION INTRODUCTION NCU CE MWNL Shaojung Lu (shaojung@gmail.com)
  2. 2. Simple Type of Applications <ul><li>Console Application </li></ul><ul><li>Windows Application </li></ul><ul><li>Web Application </li></ul>
  3. 3. How Do a Web Work Store many web pages in the server Request Response
  4. 4. But How the Screen Work? Edit HTML Manual?? (Dreamweaver ? FrontPage ? Notepad or vi ?) Retrieve data from sensors and produce the page.
  5. 5. How does the webpage of Taipei Feitsui Reservoir Work? <ul><li>There is a program on the server. </li></ul><ul><li>The program runs every ten minutes. </li></ul><ul><li>When the program runs, it retrieves data from the sensors and produces the web page. </li></ul>
  6. 6. How does the interaction function on the web site work? 1. Request 3. Response 2.The program runs.
  7. 7. More complicated of the web application system DB Server Web Server 2. Query Data 3. Retrieve Data 1. Request 4. Response
  8. 8. More and more complicated of the web application system DB Server Web Server 2. Query Data 5. Retrieve Data Business Rules 3. Query Data 4. Retrieve Data 1. Request 6. Response
  9. 9. Program Languages of Web Application <ul><li>CGI: Perl / C / C++ </li></ul><ul><li>ASP: Active Server Pages – An Interpreter Language </li></ul><ul><ul><li>Using the code like Visual Basic </li></ul></ul><ul><ul><li>Released in 1997 (With NT4.0 Release 3) </li></ul></ul><ul><li>PHP: Hypertext Preprocessor </li></ul><ul><ul><li>Released in 1995 </li></ul></ul><ul><ul><li>Using the code like C </li></ul></ul><ul><ul><li>It is hot now when using LAMP </li></ul></ul><ul><ul><ul><li>Linux, Apache, MySQL, PHP </li></ul></ul></ul>
  10. 10. CGI Code Look Like? <ul><li>foreach $line (@MSGSDATA) { if ($line =~ /<!--(.*)-->/) { $i++; } } </li></ul><ul><li>$page=($i%$show); if ($page != 0 || $i == 0){ $page=int($i/$show)+1; } </li></ul><ul><li>else { $page=($i/$show); } </li></ul><ul><li>if ($cici eq “”){ $min=1; $max=$show; $cici=1; } </li></ul><ul><li>print &quot;Content-type: text/html &quot;; </li></ul><ul><li>open (FILE, $gbhead);@lines=<FILE>;close (FILE); </li></ul><ul><li>foreach $head (@lines) { </li></ul><ul><li>if ($head=~ /<!--counter-->/) { </li></ul><ul><li>print &quot;<table width=&quot;100%&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; bgcolor=&quot;#6699CC&quot; align=&quot;center&quot;>&quot;; </li></ul><ul><li>print &quot;<table cellpadding=&quot;0&quot; cellspacing=&quot;1&quot; border=&quot;1&quot; bordercolor=&quot;104E8B&quot;>&quot;; </li></ul><ul><li>print &quot;<tr><td align=&quot;center&quot; valign=&quot;middle&quot;>&quot;; </li></ul><ul><li>print &quot;<center>&quot;; </li></ul><ul><li>print &quot;<A HREF=&quot;add.htm&quot;><font color=&quot;104E8B&quot;> 我要留言 </A></font> &quot;; </li></ul><ul><li>print &quot;<td align=&quot;center&quot; valign=&quot;middle&quot;>&quot;; </li></ul>
  11. 11. Server Page Code Look Like? <ul><li><table width=&quot;630&quot; height=&quot;58&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;> </li></ul><ul><li><tr><td width=&quot;12&quot; height=&quot;19&quot;>&nbsp;</td></tr> </li></ul><ul><li><?php do { ?> </li></ul><ul><li><tr> </li></ul><ul><li><td height=&quot;20&quot;><img src=&quot;images/t01_p.jpg&quot; width=&quot;5&quot; height=&quot;5&quot; align=&quot;right&quot; /></td> </li></ul><ul><li><td class=&quot;t01&quot;><a href=&quot;01news_01.php?ID= <?php echo $row_rsNews['ID']; ?> &quot;>&nbsp; <?php echo $row_rsNews['Topic']; ?> </a></td> </li></ul><ul><li><td class=&quot;t01&quot;><img src=&quot;images/t01_l.jpg&quot; width=&quot;1&quot; height=&quot;20&quot; /></td> </li></ul><ul><li><td class=&quot;date&quot;> <?php echo $row_rsNews['PDate']; ?> </td></tr> </li></ul><ul><li><?php } while ($row_rsNews = mysql_fetch_assoc($rsNews)); ?> </li></ul><ul><li><tr></tr> </li></ul><ul><li></table> </li></ul>
  12. 12. Interpreter? Fast or Slow? <ul><li>ASP and PHP is all interpreter language. </li></ul><ul><li>Java and .NET appears in the web application. </li></ul>Source Code Byte Code Virtual Machine or Framework Linux Windows Solaris Using Different VMs or Frameworks can run the same byte code file.
  13. 13. CGI or Server Page? <ul><li>Hard coding like CGI is hard to maintain the appearance of the web page. </li></ul><ul><li>Using Server Page, artists can design the web page and save it to HTML. Programmers can modify the HTML into ASP or PHP. </li></ul><ul><li>When the program is finish by using server page, it is hard to modify the visual design. </li></ul>
  14. 14. MVC Architecture Model Controller View Model: Manage the data Controller: Control Model and the view to present the data. View: The Template of display data
  15. 15. Is the program still running when we see the page?
  16. 16. How does Google implement it?
  17. 17. AJAX - Asynchronous JavaScript and XML 4. JavaScript Programs runs in your browser 8. JavaScript get the response and make the change on the page. 5. Sending XML from the JavaScript Code 7. XML response 1. Request 3. Response the page and JavaScript Programs 2.The program runs. 6. The server receive the XML request and response it
  18. 18. AJAX – How to write it? <ul><li>Using the component XMLHttpRequest To be the main component. </li></ul><ul><li>Need to consider different Browser!! </li></ul><ul><li>EVEN DIFFERENT Version of IE!! </li></ul>
  19. 19. AJAX – Using Framework Now! <ul><li>We can use jQuery in all Languages. </li></ul><ul><li>ASP.NET  AJAX.NET </li></ul><ul><li>JAVA  DWR </li></ul><ul><li>PHP  XAJAX </li></ul>
  20. 20. Web Application Programmer….. You have to learn everything <ul><li>HTML </li></ul><ul><li>A Web application Language </li></ul><ul><li>JavaScript </li></ul><ul><li>SQL Language </li></ul><ul><li>AJAX Framework </li></ul><ul><li>SEO – Search Engine Optimization </li></ul>
  21. 21. <ul><li>Q & A </li></ul>Thank you
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×