web application introduction

WEB APPLICATION INTRODUCTION

NCU CE MWNL Shaojung Lu ([email protected])

Simple Type of Applications

Console Application Windows Application Web Application

How Do a Web Work

Request

Response

Store many web pages in the server

But How the Screen Work?

Edit HTML Manual??(Dreamweaver ? FrontPage ? Notepad or vi ?)

Retrieve data from sensors and produce the page.

How does the webpage of Taipei Feitsui Reservoir Work?

1. There is a program on the server.2. The program runs every ten minutes.3. When the program runs, it retrieves

data from the sensors and produces the web page.

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

1. Request

4. Response

DB ServerWeb Server

2. Query Data

3. Retrieve Data

More and more complicated of the web application system

1. Request

6. ResponseDB Server

Web Server

2. Query Data

5. Retrieve Data

Business Rules

3. Query Data

4. Retrieve Data

Program Languages of Web Application

CGI: Perl / C / C++ ASP: Active Server Pages – An Interpreter

Language Using the code like Visual Basic Released in 1997 (With NT4.0 Release 3)

PHP: Hypertext Preprocessor Released in 1995 Using the code like C It is hot now when using LAMP

Linux, Apache, MySQL, PHP

CGI Code Look Like?

foreach $line (@MSGSDATA) { if ($line =~ //) { $i++; } } $page=($i%$show); if ($page != 0 || $i == 0){ $page=int($i/$show)+1; } else { $page=($i/$show); } if ($cici eq “”){ $min=1; $max=$show; $cici=1; } print "Content-type: text/html\n\n"; open (FILE, $gbhead);@lines=<FILE>;close (FILE); foreach $head (@lines) { if ($head=~ //) { print "<table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"

bgcolor=\"#6699CC\" align=\"center\">"; print "<table cellpadding=\"0\" cellspacing=\"1\" border=\"1\"

bordercolor=\"104E8B\">"; print "<tr><td align=\"center\" valign=\"middle\">"; print "<center>"; print "<A HREF=\"add.htm\"><font color=\"104E8B\"> 我要留言 </A></font>\n"; print "<td align=\"center\" valign=\"middle\">";

Server Page Code Look Like?

<table width="630" height="58" border="0" align="center" cellpadding="0" cellspacing="0">

<tr><td width="12" height="19"> </td></tr> <?php do { ?> <tr> <td height="20"><img src="images/t01_p.jpg" width="5" height="5"

align="right" /></td> <td class="t01"><a href="01news_01.php?ID=<?php echo

$row_rsNews['ID']; ?>"> <?php echo $row_rsNews['Topic']; ?></a></td>

<td class="t01"><img src="images/t01_l.jpg" width="1" height="20" /></td> <td class="date"><?php echo $row_rsNews['PDate']; ?></td></tr> <?php } while ($row_rsNews = mysql_fetch_assoc($rsNews)); ?> <tr></tr> </table>

Interpreter? Fast or Slow?

ASP and PHP is all interpreter language. Java and .NET appears in the web application.

Source Code

Byte Code

Virtual Machine or FrameworkLinux Windows Solaris

Using Different VMs or Frameworks can run the same byte code file.

CGI or Server Page?

Hard coding like CGI is hard to maintain the appearance of the web page.

Using Server Page, artists can design the web page and save it to HTML. Programmers can modify the HTML into ASP or PHP.

When the program is finish by using server page, it is hard to modify the visual design.

MVC Architecture

Model

Controller

View

Model: Manage the dataController: Control Model and the view to present the data.View: The Template of display data

Is the program still running when we see the page?

How does Google implement it?

AJAX - Asynchronous JavaScript and XML

1. Request

3. Response the page and JavaScript Programs

2.The program runs.6. The server receive the XML request and response it

4. JavaScript Programs runs in your browser8. JavaScript get the response and make the change on the page.

5. Sending XML from the JavaScript Code

7. XML response

AJAX – How to write it?

Using the component XMLHttpRequest To be the main component.

Need to consider different Browser!! EVEN DIFFERENT Version of IE!!

AJAX – Using Framework Now!

We can use jQuery in all Languages. ASP.NET AJAX.NET JAVA DWR PHP XAJAX

Web Application Programmer…..You have to learn everything

HTML A Web application Language JavaScript SQL Language AJAX Framework SEO – Search Engine Optimization

Q & A

Thank you

web application introduction

Technology