Showing posts with label Web. Show all posts
Showing posts with label Web. Show all posts

Sunday, July 13, 2008

Create Album with PHP and Database (3)

Files : Table for uploading, adminup.php

1. Upload images to the server



<form method="post" enctype="multipart/form-data" action="adminup.php">
<table width="480" border="0" cellpadding="1" cellspacing="1" class="box">
<tr>
<td width=150 class=side>Name</td>
<td width="330" class=sidetitle>
<?
if($_GET['user']){
echo $_GET['user'];
echo '<input name="name" type="hidden" value="'.$_GET['user'].'">';
}
?>
</td>
</tr>
<tr>
<td width=150 class=side>Album title</td>
<td width="330" class=sidetitle>
<?
if($_GET['albumname']){
echo $_GET['albumname'];
echo '<input name="album" type="hidden" value="'.$_GET['albumname'].'">';
}
?>
</td>
</tr>
<tr>
<td width="480" colspan=2>
<?
if($_GET['id']){
echo '<input name="index" type="hidden" value="'.$_GET['id'].'">';
}
?>
</td>
</tr>
<tr>
<td width=150 class=side>Picture 1</td>
<td width="330" class=sidetitle>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input name="userfile1" type="file" id="userfile1">
</td>
</tr>
<tr>
<td width=150 class=side>Picture 2</td>
<td width="330" class=sidetitle>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input name="userfile2" type="file" id="userfile2">
</td>
</tr>
<tr>
<td width=150 class=side>Picture 3</td>
<td width="330" class=sidetitle>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input name="userfile3" type="file" id="userfile3">
</td>
</tr>
<tr>
<td width=150 class=side>Picture 4</td>
<td width="330" class=sidetitle>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input name="userfile4" type="file" id="userfile4">
</td>
</tr>
<tr>
<td width=150 class=side>Picture 5</td>
<td width="330" class=sidetitle>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input name="userfile5" type="file" id="userfile5">
</td>
</tr>
<tr>
<td width=150 class=side>Picture 6</td>
<td width="330" class=sidetitle>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input name="userfile6" type="file" id="userfile1">
</td>
</tr>
<tr>
<td width=150 class=side>Picture 7</td>
<td width="330" class=sidetitle>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input name="userfile7" type="file" id="userfile2">
</td>
</tr>
<tr>
<td width=150 class=side>Picture 8</td>
<td width="330" class=sidetitle>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input name="userfile8" type="file" id="userfile3">
</td>
</tr>
<tr>
<td width=150 class=side>Picture 9</td>
<td width="330" class=sidetitle>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input name="userfile9" type="file" id="userfile4">
</td>
</tr>
<tr>
<td width=150 class=side>Picture 10</td>
<td width="330" class=sidetitle>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input name="userfile10" type="file" id="userfile5">
</td>
</tr>
<tr>
<td width="480" class=sidetitle colspan=2><input name="upload" type="submit" class="box" id="upload" value=" Upload "></td>
</tr>
</table>
</form>


2.when the users click the submit button, it will call adminup.php which is shown below.
adminup.php
<?php

$album=$_POST['album'];
$name=$_POST['name'];
$album_num=$_POST['index'];

$db_conn=mysql_connect("your server", "your id", "your pwd");
mysql_select_db("your database");


//看看這本相簿有多少張相片
$query = "select * from upload where album_num=$album_num";
$result=mysql_query($query);
$how_many_pic=mysql_num_rows($result);

for($i=1;$i<=10;$i++){
$temp="userfile".$i;

if(isset($_POST['upload']) && $_FILES[$temp]['size'] > 0)
{
$fileName = $_FILES[$temp]['name'];
$tmpName = $_FILES[$temp]['tmp_name'];
$fileSize = $_FILES[$temp]['size'];
$fileType = $_FILES[$temp]['type'];

$fp = fopen($tmpName, 'r');
$content = fread($fp, filesize($tmpName));
$content = addslashes($content);
fclose($fp);

$margin = getimagesize($tmpName);
$width=$margin[0];
$height=$margin[1];

if(!get_magic_quotes_gpc())
{
$fileName = addslashes($fileName);
}

$how_many_pic++;

//Insert the picture into the database. And the table
//to store the pictures is called 'upload'
$query = "INSERT INTO upload (name, size, type, content, album_name, album_num, pic_num, author, width, height ) ".
"VALUES ('$fileName', '$fileSize', '$fileType', '$content', '$album', '$album_num', '$how_many_pic', '$name' , '$width', '$height')";

mysql_query($query) or die('Error, query failed');
}
}

echo '<meta http-equiv=refresh content=0;url="adminpic.php?id='.$album_num.'&user='.$name.'&page=1">';
exit;
?>


How to show the pictures we upload will be introduced next time.

Sunday, July 6, 2008

Create Album with PHP and Database (2)

Files : Table 'album' , adminaddalbum.php

1. Table 'album' to store the albums created
Before uploading images, we have to create a table to record the album that the user create.



Then create an album.
The code are as follows.
if($user){
echo '<form id="form1" method="post" action="adminaddalbum.php">';
echo '<table width=480>';
echo '<tr>';
echo '<td align="center" colspan="2" class="side" width=480><b>Create an Album</b></td>';
echo '</tr>';
echo '<tr>';
echo '<td class="side" width=150>ID</td>';
echo '<td class="sidetitle" width=330>';
echo $user;
echo '<input type="hidden" name="username" value="'.$user.'">';
echo '</td>';
echo '</tr>';
echo '<tr>';
echo '<td class="side" width=150>Album title</td>';
echo '<td class="sidetitle" width=330><input type="text" name="title"></td>';
echo '</tr>';
echo '<tr>';
echo '<td class="sidetitle" width=150><input type="submit" name="Submit" value="Submit"></td>';
echo '<td class="sidetitle" width=330><input type="reset" name="Reset" value="Reset"></td></tr>';
echo '</tr>';
echo '</table>';
echo '</form>';
}else{
echo '<font size=2>You need to log in and must be a member of NCKU ee97a.</font>';
}


I have to first address that in my own website, if the customer wanna create an album, he or she must log in first. Once they log in, the id will be recorded in the variable $user. So if they are sure to log in, the variable $user will not be NULL, and the code above will do the "if" part not the "else" part. The actual layout of the form in the code is shown in the picture below.



Press submit button and the album will be created. Once the submit button is pressed, it will trigger the "adminaddalbum.php." The code is shown below.

2. adminaddalbum.php
<?
$album=$_POST['title'];
$name=$_POST['username'];

$db_conn=mysql_connect("your server", "your id", "your pwd");
mysql_select_db("your database");

$query = "select * from album order by num";
$result=mysql_query($query);
$num_all=mysql_num_rows($result);

$q=mysql_fetch_array($result);
$big=$q[num];

for($i=1;$i<=$num_all;$i++){
$q=mysql_fetch_array($result);
$temp=$q[num];
if($temp>$big) $big=$temp;
}

$how_many_album=$big+1;

//將相簿紀錄到資料庫當中
$query = "INSERT INTO album (num, name, author) "."VALUES ('$how_many_album', '$album', '$name')";
mysql_query($query) or die('Error, query failed');

echo '<meta http-equiv=refresh content=0;url="adminpic.php?id='.$how_many_album.'&user='.$name.'&page=1">';
exit;
?>


The next time we will talk about uploading images.

Sunday, May 18, 2008

Create Album with PHP and Database (1)

Use PHP and database to create an album consists of parts:
  1. create a table in the database
  2. write an PHP file to upload images
  3. write an PHP file to view the album
Today we just introduce how I create a table in my database.



The picture above is the structure of the table in my database.
Let's explain those parameters a little bit.
  1. id is just an index that will be auto incremented by the system but has no great significance.
  2. name is the name of the picture you store.
  3. type is the content type of that image. (e.g. jpeg, gif, or png etc..)
  4. size is the size(kB or MB) of the image.
  5. content is the image content. Note here that you have to set the attribute of this to mediumblob in order to store the image in the database.
  6. album_name is the name of the album that a picture belongs to.
  7. album_num is the tag of the the album that a picture belongs to.
  8. pic_num is the index of that picture in the album it belongs to.
  9. author is the name of the owner of that picture.
  10. width is the width of that picture.
  11. height is the height of that picture.
We will talk more about how to upload the image to the database.
Basically it is the same as you upload a text to the server.
Anyway, we will continue to discuss this in a later time.

Use Javascript to Connect with PHP

The text below (c) By Mark Kahn @ http://www.htmlgoodies.com/primers/jsp/article.php/3608046

You've probably heard the term "AJAX" thrown around recently. Basically it's a fancy name for a technology that's been around for years. Over the past year or so, however, AJAX-style JavaScript has become increasingly popular among many developers and we're starting to see some amazing things come from it. Google Maps and GMail are two of the most well known AJAX applications, but companies all over the web are starting to incorporate it into their sites.

AJAX stands for Asynchronous JavaScript And XML. All it really consists of is JavaScript, just like you would have in any other application, and an XMLHTTP connection to your web server. That's it! The general idea is that when you need to pull data from a server you can just go and get the specific data you need instead of refreshing the entire page.


To start with, AJAX almost always relies on a server-side language such as PHP or ASP. When your users need to get new data, the JavaScript requests it, and the server will probably query a database and then return the data. This data can be returned in several forms. If it is structured, then you will generally have XML or JSON data. If it is very simple data (such as getting a description for an item), you will often see people just writing that data directly to the AJAX response.

Creating an XMLHttp Object

The first thing we need to do when creating an AJAX request is to create an XMLHTTP object. Netscape/Firefox, Opera and other browsers have this object built-in. Internet Explorer uses an ActiveXObject. So we create one function that works for all of these browsers:




var XMLHttpRequestObject = createXMLHttpRequestObject();

function createXMLHttpRequestObject()
{
var XMLHttpRequestObject = false;

try
{
XMLHttpRequestObject = new XMLHttpRequest();
}
catch(e)
{
var aryXmlHttp = new Array(
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP",
"MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0"
);
for (var i=0; i<aryXmlHttp.length && !XMLHttpRequestObject; i++)
{
try
{
XMLHttpRequestObject = new ActiveXObject(aryXmlHttp[i]);
}
catch (e) {}
}
}

if (!XMLHttpRequestObject)
{
alert("Error: failed to create the XMLHttpRequest object.");
}
else
{
return XMLHttpRequestObject;
}
}


Connect with PHP

Once you create an XMLHttp object, you can use the following function in your html file to connect to PHP in your server. As you can see, this function has two input variable. The first, dataSource, is the PHP file name that you want to connect with. The second, divID, is the div name that you will put extra info. or the output of the PHP file after connecting to that PHP file.


function getData(dataSource, divID)
{
if(XMLHttpRequestObject)
{
dataSource += "&parm="+new Date().getTime();
var objDiv = document.getElementById(divID);

XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
try
{
switch(XMLHttpRequestObject.readyState)
{
case 1:
objDiv.innerHTML = '<br><br><img src=../background/index/loading.gif alt=Loading...><br>Loading...';
break;
case 4:
if(XMLHttpRequestObject.status == 200)
{
objDiv.innerHTML = XMLHttpRequestObject.responseText;
}
else
{
objDiv.innerHTML = 'Error getting from php result...';
}
break;
}
}
catch(e){}
}
try
{
XMLHttpRequestObject.send(null);
}
catch(e){}
}
}





For more info., go check http://www.htmlgoodies.com/primers/jsp/article.php/3608046

Monday, February 11, 2008

New Style of My Website



In this winter vacation, I changed the style of my website. To be frank, the style was inspire by that of my Imeem website. I really like that black and gray colors. Anyway, let me briefly introduce my new site a little bit.

FEATURES
  1. First of all, the background is simply black or gray.
  2. The login panel is changed with javascript and css codes. If you don't log in yet, it will pop up a layer or a panel for you to log in when you click either the login item on the top right or the Academy Sharing on the Service column. It is worthy to note that when the login panel pops up, you are not allowed to click any other links. The idea of this is that the panel is set on the top of of any other item.
  3. I have added my any other websites, such as myBlogger, Imeem, and youtube. Also, my class website is included of course.

To sum up, there are any other features that you can discover yourself. And I will provide more for any of you. Hope any one will have a happy lunar new year.

Sunday, September 23, 2007

Web Developer




(c) http://chrispederick.com

As a web developer, I truly recommend that this is a great tool.
It simply has some features as follows:

  1. Disable cache, java, javascript, and so on.

  2. Handle the cookies on your computer whether to delete them or disable them.

  3. View or enable or disable CSS.

  4. Deal with some properties if images.

  5. View Source and debug .



It still has more features, and we just name a few here.
Hope you will get interested in this tool.
If you want to get more information or download it, check out the site:
http://chrispederick.com/work/web-developer/

Moreover, you can even get its source code on the site.
But here we provide you with that as follows:

  1. Using the CVS web interface

  2. Using anonymous CVS with the following commands (password is guest) :
    cvs -d :pserver:guest@mozdev.org:/cvs login
    cvs -d :pserver:guest@mozdev.org:/cvs co webdeveloper

Saturday, August 18, 2007

Figugle最新首頁樣式




這次首頁的頁面選擇有增加了不少
總共有8種樣式,供使用者選擇
(1)天藍色系
(2)銀灰色系
(3)海洋色系
(4)橙橘色系
(5)青草色系
(6)橄欖色系
(7)粉紅色系
(8)紫嫣色系

嘗試新樣式:Figugle首頁


這個功能一樣是用javascript所做
每次使用者選擇一個樣式
網頁會以cookie紀錄下來
所以下次開啟仍會是你之前選擇的樣式

cookie和session

以前在寫登入系統時
在使用者登入時
我會利用session註冊
但是同學跟我反應說
常常會有網頁過期的現象
於是我開始使用cookie
也就是在使用者登入後
以cookie紀錄他的帳號密碼跟等級
如此一來便不會有網頁過期的問題
而且只要你不將cookie刪除
你便可以直接進入登入後的畫面
也就是說你不用經過登入的頁面

以下是使用PHP設定cookie的方法
setcookie("TestCookie", $user, time()+7200000);
setcookie("Testpwd", $pwd, time()+7200000);
setcookie("Testlevel", $level, time()+7200000);

以第一個來說
(1) TestCookie是你要將cookie取什麼名字,以便日後讀取
(2) $user則是你要存在此cookie的值
(3) time()+7200000則是cookie存在的時間,換句話說,
time()+7200000秒代表此cookie會在設定完2000小時
才會消失

相反的,若要取cookie,方式如下
$user=$_COOKIE["TestCookie"];
$pwd=$_COOKIE["Testpwd"];
$level=$_COOKIE["Testlevel"];

當然,中括號中的TestCookie等等為之前設定時索取的名字
如果寫錯,程式會讀取不到,他也不會有任何錯誤訊息

登入系統的寫法

登入系統的寫法眾多
我習慣用的是用JAVASCRIPT或PHP寫的

這兩種的寫法基本上一樣
最大的差別在於
JAVASCRIPT無法做到密碼保密
但是PHP可以

在寫程式前
我們要先建立一個表單,也就是使用FORM語法
在這裡我們先介紹PHP的寫法


(圖一)

他會顯示如下

帳號:
密碼:


當使用者填完表單按下送出後
表單中的資料會藉由POST的方式
傳送到iccfish.php的CGI程式執行

在這裡我們先解釋一下
所謂的POST指的是說在資料的傳送中
他是被放至於封包的資料欄位裡面
而並非是串接在超連結的尾巴

而CGI程式指的是資料送到遠端後
遠端主機會呼叫一個程式來負責處理送達的資料
這個程式就叫做CGI程式

在iccfish.php當中,我們的寫法如下(不考慮使用資料庫)



值得注意的是
在這裡中括號裡面一定要寫user_name和user_passwd
因為在圖一中我們送出的表單當中
帳號和密碼的name欄分別寫著user_name和user_passwd
如果你為照著寫的話
程式會不知道這個變數是誰
當然網頁也不會跟你說哪裡有錯
所以要注意一下

如果今天你有使用到資料庫的話
那麼iccfish.php可以改寫成如下



最後說到JAVASCRIPT的寫法



而function的內容如下



從這裡我們也可以說明一下為什麼
JAVASCRIPT可以無法保密了
因為在使用者瀏覽網頁時,只要點看原始碼
或查看.js等的檔案
一定可以看到其帳號跟密碼
但是PHP卻會完全隱藏
這也就是為什麼大多數的密碼認證
都使用PHP而不使用JAVASCRIPT了

Friday, July 27, 2007

Figugle Flash 編排

Flash網頁的重點在於右邊的點選欄
點選欄中分有過去的庫存和現今的影片音樂

以下的部分我們將以點選欄的程式說起

點選欄中的每一個連結,當你點選之後
他會呼叫一個程式,並且丟一個參數給該程式
點選不同的,其呼叫的程式相同,但是所丟出去的參數不同
如下圖所示:








當你按下第一個Heart Journey時,他會呼叫insert這個程式
並且傳入一個參數'1'
其他的當然也相同,只是傳入的參數不同罷了

接下來,當程式被呼叫後,究竟發生了什麼事情呢?
首先,我們必須先知道說這個叫做insert的程式是被放在一個叫flash.js的檔案中
當你按下第一個Heart Journey時,程式被呼叫如下:







在程式當中,簡單說,我們先宣告一個string的乘載變數
當你按下第一個Heart Journey時,他會跑第一個if
接著,我們將我們要成呈現在網頁上的東西
全部加到string當中
最後再以
document.getElementById('showcase').innerHTML=string;
更改頁面的原始碼即可
其他的也是同樣的道理

Figugle日記編排

基本上原本的Figugle日記
其基本架構可以分為4個部分
banner, link, content, footer

1.banner為橫幅的擺放區塊
2.link為本站的連結區塊
3.content為每篇日記的主要內容
4.footer為網頁底邊橫幅

由於日記篇的部分和本站其他的的編排及功能類似
所以不再多加贅述

現今Figugle的日記也分為三個部分
1.Figugle過去的庫存
2.奇摩的部落格:站長的心情寫真
3.Blogspot的部落格:網頁、程式或其他的介紹和分享

但是整體來說,由於過去的庫存皆為站長細心的精作
固不管在美工也好,編排也好,都較其他兩者精美

但是不管如何,也希望大家能多多支持

Sunday, July 15, 2007

Figugle首頁編排

首頁主要的架構是依照奇摩的樣式來的
整體來說,整個框架共有11個分割
包含有上端的 search engine 、 左邊的 sidebar
中間的 left1、left2、left3、left4
以及右邊的 right1、right2、right3、ad
還有下面的 tip

首先先講到分割 div
一般人在設計網頁的時候,在編排上
往往會使用表格去調整,但是表格會有一個缺點
那就是在編排時,常常會分割出額外的儲存格
這些儲存格往往只是用來定位某些東西,沒有其他用途
而且用表格定位,往往就被定死了,其他的東西你很難調整
因此,這對使用上,多少會增加額外浪費

所以為了改進這個,我們可以使用 div
使用div的好處是他可以隨著你要加入網頁的東西
進行大小的配置,位置的話也可以由css進行定位
因此,他的位置可以浮動,不會被定的死死的
而且由於其大小可以自由設定,也較不會浪費空間
但是缺點是過度分割的結果,程式難免會覺得凌亂

在來說到這11個分割,基本上裡面的東西都一樣
在div當中,都有一個表格加以呈現
其中 sidebar 是導覽列
left1、left2、left3、left4則分別表示課業分享、日記類、同學、娛樂
right1、right2、right3則分別表示動態變化列、更新列、訪客人數
tip則為版權、日期及服務介紹列
search engine 則使用Google的搜尋引擎

另外,本頁面也可以改變版面的顏色
當使用者改變頁面的時候,會有一個cookie紀錄在客戶端
在之後使用者再進到這個頁面時,網頁會先去偵查客戶端的cookie
假若沒有cookie紀錄,則網頁會使用原來的灰色頁面
反之,則會使用使用者先前選擇的

Wednesday, July 11, 2007

Figugle應用Web2.0概念

由於Web2.0概念的發達
在未來的網站開發中
我的個人網站中課業分享的部分
會採用此一概念
我目前的想法是說
同樣的我還是會提供考古題提供參考
但是答案的部分主要分為兩個部分
一個是開放給會員撰寫答案
對於他人寫不對的地方或是有要補充的
會員可以給予更改
這就好像是Wikipedia一樣
當然,我也會在稍後提供我寫的答案上去

以上只提供現階段的想法
從下一篇開始,我會開始介紹個人網站的架構的編排撰寫
順序如下:首頁、日記、娛樂

Tuesday, June 26, 2007

Web2.0簡介

Written By John J. WU

以新視窗展開此篇文章


壹、摘要

近年來,隨著網路技術的發展,各大網站已漸漸由單向的資訊提供者,轉變為可提供使用者改寫與更新,也就是Web2.0的概念。本文首先會介紹Web2.0的基本概念和架構,並介紹其特點以及應用。最後,我們將利用Web2.0的概念,實際設計一個符合此理念的網站。

貳、本文

隨著科技的進步和資訊轟炸,傳統的網路Web1.0,也就是有伺服器單方面提供訊息的方式,已漸漸難以符合大眾的需求。隨之而起的,便是可以提供雙向互動的,並且可以提供使用者創新改寫的網路服務,也就是所謂的Web2.0

而在談Web2.0之前,首先我們先簡略介紹Web1.0Web1.0其實嚴格來說,它並不是一種網路的架構或是組織,而僅僅是一種概念。它的主要精神在於以靜態的方式提供使用者想要的資訊。換言之,在Web1.0的概念下,網路上的資源都使由網路管理員或程式設計師進行管理或編寫,使用者只能透過瀏覽器「讀」取訊息,並沒有其他權限更改網頁的內容。因此,它基本上就像是CS(Client-Server)模式一樣,只是單純客戶端提出要求,伺服端傳送相對應的資訊回去。

然而,Web2.0卻打破了Web1.0只有單向傳輸的概念。所謂的Web2.0,基本上也只是一種概念。它的基本精神在於希望將過去各自獨立的伺服器改變為開放式的,也就是說,它希望不單單只有網頁設計師或管理員可以更動網頁資料,透過一個固定的平台,我們任何一個客戶端也可以擁有此權限更改網頁的內容。因此,基於這個概念,Web2.0主要有以下幾個特色以及應用:

一、網路被視為一個平台。對Web2.0來說,網路乍看之下像是由一個主要的伺服器管理或一個重心一般,而不是好多個各自獨立的主伺服器。從這個重心出發,透過網路虛擬的平台,許多的應用程式可以在上面執行,許多資訊也可以相互傳遞,客戶端也可以讀寫各種訊息。拿Google來說,Google一開始便是建立在網路上的,它透過許多伺服器建立起來的強大平台,提供網路搜尋以及各種桌面程式的應用,例如Google Docs & Spreadsheets以及各大部落格便是以網路作為平台,提供類似MS Woed的服務。

二、引領群體智慧。誠如前面所述,Web2.0它可以提供各個使用者改寫網頁的內容,不是只有單一一方。以最著名的Wikipedia來說,Wikipedia的內容是有各個網友一點一滴累積起來的。在它所提供的平台上,針對一個議題,大家盡量提供自己所知道的,進行闡述根補充,而對於別人說錯的,你也可以進行更改。同樣的,現在Yahoo所提供的知識,也是讓會員可以在網路上發表問題,其他網友可以登入回答並且幫助他。因此,所謂的群體智慧,便是想這樣透過網路集結大家的力量和知識,在這個無遠弗界的虛擬世界中,建立一個強大的知識庫。

三、跨平台。Web2.02.0在解釋上並不是說它增加了哪些其他新的功能,而是徹底實現網路平台真正的潛力。也由於它是透過網路提供各種服務,所以在執行上並不會有所謂跨平台的問題。當然,使用者也不必額外買新的硬體或軟體,因為一切執行以及程式的更新都是在網路上就處理好了。

四、擁有資料掌握一切。隨著網路的演進,擁有強大的資料庫以及掌握資料的所有權是十分重要的。以提供衛星地圖的幾家公司而言,它們都花下大筆金錢在建立資料庫上,此外,在許多汽車衛星導航面板上,常常會標上它們各自公司的商標。另外,我們也可以從另外一個角度來看。由於在Web2.0的概念下,許多網站提共讀寫更改的介面(例如Wikipedia),因此,掌握絕對資料或知識的人,相對來說也較有資料的掌控權。

五、開放原始碼。為了讓使用者可以更改網頁內容,多數提供Web2.0的網站都會開放網頁原始碼,比方說在台灣為人熟知的無名小站,便提供更改CSS的服務,而像Google提供的Blogger,則是連網頁的原始碼(包括CSS樣式表)也開放給使用者。這樣的好處除了可以開放大家改善各網站或軟體的效能,同時也可以讓使用者將其內容或樣式改成自己喜歡的。

對我而言,Web2.0其實是一個很好玩又很有趣的概念。因為過去的網頁其價值建築在設計師一開始的規劃與服務,但是現在網頁的內容及其價值反而是建立在各為客戶跟網友之上。另外,外加RIAOSS的概念,我們也可以執行桌面上的應用程式,相當的方便。不過,因為我本身也有自己架設網站,要完成上面說的這些特色,在程式撰寫上其實不是難事,難是難在這類型的服務,通常必須有強大的資料庫支撐。比方說,如果我要建立一個像維基百科一樣的網站,也許我所要做的就是建立一個大型的資料庫,在資料庫中必須存有各個網頁的資料,另外,我還必須撰寫一個如PHP或是ASP的程式以供使用者更改資料庫內容,因此,我們可以看出說資料庫的管理和穩定,對於提供Web2.0的網路服務來說,是相當重要的。

而基於Web2.0的概念,若要我設計一個全新的網站,我想要架一個網站它可以提供各種MS Office介面,雖然這類型的服務已經被實現了,不過我還是想試試看。我的設計概念是這樣子的:首先,先架設一個強大的資料庫。接著,在資料庫上,結合AjaxRIA的概念,撰寫類似WordExcelPowerPointAccess等桌面應用程式。最後,以PHPHTML撰寫網站的基本頁面,提供資料庫的連結、桌面應用程式的原始碼開放、樣式表的開放,以及個人文件可以在網路上播放和隱藏。而細看這些流程,除了樣式表的提供之外,其他的部分皆需要一個團對來執行。此外,就如同我前面所說的,資料庫的穩定度和安全也相對來說是設計上的一大考量。

整體來說,Web2.0是個蠻新鮮的概念,如同P2P大破網路CS模型的藩籬,由各個電腦提供各自的力量,Web2.0也同樣透過大家的力量,讓整個網路就像一個龐大的資料庫,大家也可以貢獻自己的力量和知識,相互提供訊息,並且也可以改善和盡情發揮網路潛藏的功能,讓網路的服務在只限於小小的平台,而是將大家結合成更大的平台,提供更好更多的服務。

參、參考文獻

1. 什麼是Web2.0(無日期)。網上營銷新觀察。民國96626日,取自:http://www.marketingman.net/FAQ/0051.htm

2. Web2.0(民國96625)WIKIPEDIA。民國96626日,取自:http://en.wikipedia.org/wiki/Web2.0

3. What is Web2.0-Design Patterns and Business Models for the Next Generation of Software(民國94930)O’REILLY。民國96626日,取自:http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html

4. 什麼是Web2.0()(民國9536)Intelligent times。民國96626日,取自:http://www.itmag.org.tw/magazine/article_single_138.htm

5. 什麼是Web2.0()(民國95525)Intelligent times。民國96626日,取自:http://www.itmag.org.tw/magazine/article_single_234.htm

6. SOA+RIA+OSS=Web2.0(民國95916)SearchWebServices.com。民國96626日,取自:http://searchwebservices.techtarget.com/tip/0,289483,sid26_gci1215261,00.html

7. LONG TAIL(民國9593) Intelligent times。民國96626日,取自:http://www.itmag.org.tw/magazine/article_single_308.htm

淺談P2P

Written By John J. WU

以新視窗展開此篇文章


壹、摘要

P2P(Peer-to-peer)的開發之下,此一網路架構帶給我們無限的便利。透過點對點的傳輸,不管是在資源或頻寬上都有顯著的增加。在本文當中,我們先從傳統的網路架構談起,接著再說到P2P的特色,並且與其作比較。最後,我們再從P2P被限制談起,說明著作權的侵犯與我的看法,並且再進一步介紹其他正當合法的軟體。

貳、本文

P2P(Peer-to-peer),無疑地,為現今網路架構上一個重要的應用。從BTMSNSkype都廣泛應用到這個概念。而相較於傳統的網路架構(Client-Server Model),其較為動態且自動化。以下,我們將分別探討這兩種架構間的差異及優缺點,並且進一步討論其應用跟限制。

傳統的網路架構(Client-Server Model),主要將網路分為客戶端和伺服端。所謂的客戶端,一般是指我們使用者的瀏覽器、電子信箱等等,而伺服端則指的是遠端的HTTP主機或是資料庫、終端機等等。在運作方面,首先,客戶端會送出訊息或請求,接著這個封包會傳至伺服主機或是經由CGI處理,再將結果傳回到客戶端。以網頁的系統來說,當一個或多個使用者填入帳號密碼後,瀏覽器會將此訊息藉由HTTP的封包送給CGIDatabase,然後再把登入的訊息送回給客戶端。

簡單來說,Client-Server Model大致上有以下一些特色。以客戶端來說,它利用圖形介面的方式(GUI),主動提出請求,並且等待遠端的回應。此外,一個客戶端可能同時連上很多主機。而對伺服端來說,它則是被動的等待客戶端傳來訊息,當封包送達時再進行處理、回應。而相對於客戶端,一台主機或伺服器可能要同時面對並處理多個客戶端傳來的訊息。除此之外,伺服端的設計有可能是有記憶效應的(Stateful),也就是說客戶端的一切請求都會被伺服端記住,當下一次客戶端要再請求資料時,伺服端會終止或是另外處理。

就優點來說,Client-Server Model的主要優點在於其安全性和管理的方便。在管理方面,由於此架構有中央處理的機制,當中央主機要進行升級或資料更動時(比方說Web主機IP的變動),並不會影響到客戶端對主機的連接以及對資源的需求。此外,由於中央控管的方式,對於資源的管理和分配較為簡單,而且對資料的安全性跟可靠度也相對較高,因為除了伺服端外,客戶端並無權更改資料的內容。

而就缺點來說,Client-Server Model的缺點其實就是來自於其中央控制的機構。當過多的客戶端請求送達伺服端時,由於伺服端的buffer並非無限,此點終將使伺服端難以負荷,以致網路癱瘓。另外一個缺點則是,當伺服端遭受攻擊或摧毀,其對外的連線將完全中斷。此現象就好像一般家用電話的Circuit Switch,當一個區域的電信分局遭受破壞,我們便無法打電話到外面去。因此,基於這些缺點,P2P便開始慢慢的發展起來。

P2P的網路架構,它打破了傳統主從(Master and Slave)網路的型式,它並沒有固定的客戶端或伺服端;換言之,每一台電腦都可以是伺服端或是客戶端。在整體的架構方面,首先必須先強調的是,在此之下的每台電腦皆被看作是一個節點,而節點和節點之間的連結是靠著一條虛擬的線,但是溝通上還TCP/IP的方式。此外,在架構上還分有CentralizedDecentralizedUnstructuredStructureHybrid等五種。拿UnstructuredStructure來說,前者Unstructured主要使用者為Gnutella,其特色在於點跟點之間並沒有系統化或邏輯化的管理,而且在搜尋的方式上,是隨機選擇節點進行,而執行所需的代價和結果,一般皆無法預期且每次都不相同。相較之下,Structure(用於CANChord等等)則擁有邏輯化的系統管理,而在搜尋上則採用了hash key的方式。

在運作方面,大體而言,當一個客戶端發出請求時,它會先查看它所連結的節點是否的在線上,接著它再將封包送給在線上的各個節點。當這些節點擁有符合此封包請求的資源, 這個節點便會把資源送回給發送訊息的客戶端。相反的,假使這些節點並沒有符合此客戶所要的資源時,它們會將封包往下傳送給它們所連結的其他節點,如此下去,當取得資源時,此資源會透過這些中間點往回傳給那個發送者。當然,假使客戶端的請求一直無回應,此封包當然也不會一直傳遞下去,而會在一定的時間後在網路上被刪除,這就是TTL(Time-to-leave)的概念。

簡單說來,P2P的網路架構有下列一些特色:

一、Overlay。如同前面所述,P2P上的每個節點,本身都可以是客戶端也可以是伺服端,且每個都是靠虛擬的線連結。如此之下,對每個節點來說,其實都是一起共用彼此的資源、頻寬,此點相較於Client-Server Model資源掌握在單一伺服端來說,在彈性上較大。

二、動態連結。由於每個節點都會連結到多個節點,因此當其中一個點發出請求時,只要有另外一個節點在線上,便可以此進行資料的搜尋。它並不需要每個點都必須在線上。但是相反的,Client-Server Model在伺服端斷線或遭破壞時,客戶端便無法向其進行資料的要求。

三、穩定。誠如第二點說的,假使P2P上的任何一個點遭到破壞,其實並不會影響整體的運作,因為它還是可以透過其他點進行運作。這就像是Packet Switch的概念一般,當傳遞中的一點無法前進時,封包會自動找尋其他可行之點進行傳輸,不會受限於固定的線路,因此較為穩定。當然,Client-Server Model則非如此。

四、匿名。這個特色可以保護資源的擁有者和請求者。簡單來說,當一號節點向二號節點要求資源時,一號節點無法得知二號節的請求是它本身所需要的,抑或是它代替別人詢問的;相反的,假使一號節點擁有該資源時,二號節點當然也不知道其是否為一號節點本身所有,還是它向其他點所要得。因此,對於防止網路侵權的人來說,此為一嚴重的問題。因為像Client-Server Model,客戶端到伺服端的所有連結其時都會被紀錄在伺服端當中,所以對誰向誰取的盜版的資料或軟體,其實非常好調查。然而,對P2P來說,對於特定的某一點進行調查其實都不對,因為我們難以知道這個連結紀錄其真正的起點和終點到底在哪裡。

因此,針對上述的特色,P2P的優點在於其每有一個中央的控制機構(除了Napster),且每個點一起分享大家的資源、頻寬等等;所以當網路上的節點越來越多時,大家共享的東西將會越來越多,而且並不需要外增加硬體的需求量。此外,其整體架構較為穩定,不易受到破壞。而就其缺點來說,在資料的搜尋上其實較沒有效率,因為你不知道什麼時候會找到所需的資料,也因此搜尋所需的時間不無法事先預料。

再談完了傳統的和現今流行的P2P架構及特色後,我們接下來要說的,便是現今許多學術或商業團體其實都蠻限制P2P的使用。其實這個原因相當簡單,因為透過P2P的軟體,許多音樂、軟體或文件在未經授權的的情形下,在網路上流傳,造成著作權被侵犯的現象。對此,許多學術和學校網路開始針對P2P的軟體進行封鎖。就我的看法,其實學校網路或其他學術或商業網路,並沒有限制此一軟體的必要。當初在設計P2P的時候,其實並沒有考慮到著作權等問題,所以或許該說其實限制P2P不太合理,因為造成此一濫用且侵權的,是使用者自己,而非P2P本身。然而,話雖如此,我們也很難限制使用者使用P2P,因為即使不使用P2P軟體,還是有很多其他方法取得我們想要的東西。因此,如何在其中取得平衡,我想是比較重要,但也蠻困難的。對我的來說,可能比較好的方法是在每個軟體上加上些編碼,讓使用者在下載時,此馬會透過封包回傳給著作者,以防止盜版或侵權。雖然我知道這種方法也會被破解,但就我曉得的,MatLab軟體便是使用此一技術防止盜載。但無論如何,最後還歸結到我們使用者的道德心。即使使用P2P下載歌曲、音樂或其他軟體十分容易跟快速,但是站在著作者的角度想想,這些都是他們嘔心瀝血的創作,當然也是他們掙錢的工具,我們在未經同意之下取用,是否有曾考慮過它們的感受跟心情呢?如果是你,你又會如何呢?

但是,縱使P2P在使用上有其弊端,我們還是可以將其用在正確且無違法之下。比方說,現在流行的Skype軟體,即是利用Packet Switch的方式,將聲音在網路上傳播,雖然相對於傳統的電話系統其沒有好的品質,使用介面也較為複雜,但是其費用小的優點,也身受跨國電話使用者的喜愛。此外,在一間公司裡面,文件分享跟協同是很重要的,而在P2P發展之前,都是靠內部門戶系統和協作服務器,但是對於資料更新來說卻是相當麻煩的。然而,在使用P2P之下,漸漸打破此一藩籬。另外,在重視高性能計算的科技公司當中,P2P透過其節點共同分享頻寬和資源,實現了此一效能。

總的來說,P2P的開發,讓我們在網路的使用上多了一種選擇,在資源的使用上也較為快速且豐富。儘管在現今的法律下有些許的爭議,但是我相信,只要我們秉持著基本的道德觀念,再加上技術的持續開發,P2P一定可以為我們帶來更大的便利跟好處。當然,伴隨著傳統的Client-Server Model,我們的網路將會更加的友善和豐富。

參、文獻參考

1. Skype說明(無日期)Skype。民國96617日,取自:http://www.skype.com/intl/zh-Hant/download/explained.html

2. Can Erten(民國96331)P2P介紹和互聯網應用。民國96617日,取自:http://www.yeeyan.com/articles/view/huahua/666

3. Client-Sever(民國9663)WIKIPEDIA。民國96617日,取自:http://en.wikipedia.org/wiki/Client-server

4. Peer-to-peer(民國96612)WIKIPEDIA。民國96617日,取自:http://en.wikipedia.org/wiki/P2p

5. Anonymous P2P(民國96612)WIKIPEDIA。民國96617日,取自:http://en.wikipedia.org/wiki/Anonymous_P2P

6. 同儕式網路虛擬環境(無日期)ACN Lab。民國96617日,取自:http://acnlab.csie.ncu.edu.tw/research.php#p2p-nve

7. P2P遇上著作權法(民國941013)。明沂法律事務所。民國96617日,取自:http://www.mingyi-law.com/word.asp?ID=183

8. 火線話題:傳輸軟體一把抓?住宿生當心觸法(民國941117)。中正e報。民國96617日,取自:http://enews.ccu.edu.tw/modules/news/article.php?storyid=453

9. 電算中心該不該禁止學生使用P2P軟體?(民國96516)。龍華電子報。民國96617日,取自:http://www.lhu.edu.tw/e_paper/95/lunghwa_paper_95015/special_column.htm

桌面應用程式和網路應用程式

Written By John J. WU

這篇文章使我自己寫的

主要在介紹桌面應用程式和網路應用程式的區別:

以新視窗展開此篇文章

壹、摘要

鑒於近來RIA的蓬勃發展,我們必須更加了解桌面應用程式和網路應用程式(如JavaScript)的一些相關訊息。在本文當中,我們將會從兩種應用程式的特性談起,諸如其安全性、程式執行的方式等等。接著,再進一步比較兩者的優缺點,以及身為程式設計師,就程式設計上說來,我們應該注意哪些規範跟限制。最後,基於前面所做的一些比較跟探討,在未來的發展中,我們希望相關單位(W3C)等能更加致力於兩種程式的結合,讓使用者不管在桌面或是網路上的使用上,能更加多元、豐富。

貳、本文

近年來,RIA在資訊界廣為盛行。所謂的RIA (Rich Internet Application)是一種在網際網路上運行的應用程式,有著如同桌面應用程式的行為、功能、快速回應、直覺與體驗,也融合了網際網路應用程式容易開發與低成本的特性。RIA正是結合桌面應用程式與網路的優點,讓網站使用者能透過Flash生動活潑的人機介面,來使用各樣各式的網路應用服務,透過這個特性,RIA將成為未來網際網路上一個不可避免的趨勢。然而,在這之前,我們必須先了解桌面應用程式與網路介面程式的優缺點及設計開發,才能進一步研究RIA等應用程式。

首先,談到網路應用程式。網路「應用」程式的出發點,是希望能在不同硬體以及系統上執行的,在這裡我們以JavaScript為例。簡單的來說,JavaScript為一個Script language,它主要的功能在於提供網路上高階語言的控制。一般說來,JavaScript有以下幾個特色:

第一、 JavaScript是屬於跨平台的語言,也就是說,當你在撰寫JavaScript時,基本上你可不用去管今天是要放在什麼作業系統或者是要用什麼瀏覽器去觀看,因為JavaScript跟這些其實都沒有很直接的關係,只跟你的瀏覽器要怎麼去解釋或編譯有關。所以,不管今天你在Linux或是在Window用Firefox看,其實都是可以的。

第二、 JavaScript是一個Interpreted language。意思是說,JavaScript和Java一樣皆非以machine code的形式進行傳送,而是以中間碼的型式到了客戶端在進行轉換執行。也正因為如此,JavaScript和Java才都可以跨平台。

第三、 JavaScript為事件驅動的語言。換言之,當客戶端再視窗或網頁上啟動一個事件時,比方說按個按鈕或移動滑鼠,JavaScript才會被驅動,除非此網頁的JavaScript是在一開始載入時便開始執行,例如在網頁的body標籤中使用onLoad,但基本上這個也算是一種事件。

第四、 JavaScript沒有變數型態上的問題。它不像一般的程式語言,整數即整數,浮點數即浮點數,它的型態是不固定,因此相對來說較為簡單,但是當然也會引伸一些缺點。

因此,基於這些特色,JavaScript主要的優點在於它可以橫跨所有平台,要你的瀏覽器允許JavaScript載入並且可以正確無誤的解釋它,就可以將它執行。除此之外,它的其他優點還有安全性和開放性。以安全性來說,JavaScript如同一般的網路應用程式,它是不能對客戶端的系統進行資料的改寫或變動,當然對遠端也不能產生影響。而以開放型而言,JavaScript的檔案是開放原始碼的,所以基本上放在一個網頁上的JavaScript檔案,大家都可以觀看的到,所以當然也較沒隱私,可是也沒有侵犯隱私的問題。

反過來說,JavaScript的優點其實相對的也是其很大的缺點。拿跨平台和安全性來說,JavaScript之所以可以有這兩個優點,就是犧牲了其安全性所帶來的好處─不能對客戶端的系統進行資料的改寫或變動,因此,即使你可以提交HTML的網頁,但是這些送出去的封包資料並無法經由JavaScript進行處理傳送給伺服端,而必須以CGI(Common Gateway Interface)進行處理。此外,對於開放性這一點,JavaScript較不適合用於需要帳號密碼認證的網頁,因為這些資料一般都寫在JavaScript的.js檔中,很容易遭到破解,危險性高。所以,此種網頁便適合用php等網頁語言來撰寫。另外,由於JavaScript本身在客戶端才會被編譯,所以就即時性來說,可能會稍微差一點。

而對程式設計師來講,基於跨平台和安全性,在程式上便不能有讀寫的功能。值得一提的是,雖然說JavaScript為跨平台,但誠如前面所說的,JavaScript的執行和瀏覽器的解釋有關,因此,在MS Internet Explorer上面能執行的,在Mozilla、FireFox不見得能執行,例如:window.event.keyCode、offsetX等等,這是程式設計師所要考慮的。

其次,談到桌面應用程式。桌面應用程式不像網路應用程式,它不一定需要符合各種系統或是硬體的環境規格或標準。簡單來說,此種應用程式的出發點在於能快速的處理本地端的資料,至於本地端的系統支不支援,其實比較不在意。一般來說,桌面應用程式有以下一些特色:

第一、 桌面應用程式不一定要跨平台。所以,一般說來這類型的程式設 計都以C++或是C。這些語言在使用上,編譯時便直接轉成執行檔,因此,其對系統的依賴性便相當大。

第二、 桌面應用程式並非Interface language。換言之,它不像Java等還有中間碼,即使它在取出執行時需要經過解碼,但意義上不一樣。

第三、 桌面應用程式基本上也是「事件」啟動的。當我們安裝好軟體程式後,如同網路應用程式,其本身也是在等待我們運用滑鼠或鍵盤,將它開啟執行。舉個例子,當我們要使用MS Word時,我們會先在捷徑或圖示上按兩下,此時,CPU會透過Fetch、Decode、Execute三個步驟,從硬碟取出來,在透過GUI(Graphic User Interface)呈現在我們面前。

基於上述所說的,桌面應用程式當然也有其優缺點。其優點主要有即時性佳、資料安全性相對佳、對於硬體以及系統資源的使用直接且方便(效能或是應用考量)。逐一來說,由於桌面應用程式安裝在用戶端的電腦上,我們只要透過滑鼠、命令提示字元或DOS介面提供命令便可執行,即時性高,不必像Java還需要再轉成執行檔。而對資料安全來說,一般來說,在沒有網路的情形下,本地端的資料其實不會流傳出去。但是,對JavaScript或Java而言,當用戶將資料傳送出去時,程式高超的人很容易撰寫一支程式,將此封包攔截下來或是取得內部的資料。雖然說現在跨平台的語言如Java有增加認證的功能,但是還是有一定的風險存在,這也呼應到前面談到如果網頁有認證功能,需改用其他隱密性較高的語言較為安全。另外,基於它為本地端的程式,它可以直接對系統或硬碟進行存取或改寫的動作,如此一來,就效率來說會大大的提升。

接著,談到缺點。桌面應用程式最大的缺點在於它很容易遭到盜版(有版權的問題),和軟體的更新機制建立較為複雜。以市面上大大小小的軟體套件,盜版的數目眾多,流傳甚廣,且大部分的軟體(除了免費或是公開原始碼的之外)皆屬於某公司或人物的智慧財產,易有侵權的糾紛。而軟體更新的部分,主要有兩種方式:以光碟片的方式、以網路的方式。拿Windows Update來說,它是藉由網路來進行更新。也許你會說,它是藉由網路,那這樣算是屬於網路應用軟體。但其實不然,即使其是透過網路,它就功能上來說屬於系統程式,嚴格說來,它算是幫助使用者方便使用電腦而不是提供特殊應用的應用程式。

而對程式設計師來講,基於即時性和方便性,我們所需考慮的是這個程式所執行的速度以及使用介面的親近性。當然,此程式所佔的硬體大小也是我們該考慮的項目之一。此外,在設計之前,我們也必須清楚,這支程式所執行的平台為何,是在Linux、Window抑或是兩者皆可,這些都會影響工程師在撰寫上的指令限制跟方法。

總的來說,不管是網路應用程式或是桌面應用程式都有其優缺點,端看使用者是使用哪個部分以及站在哪個角度來看。而在不久的未來,將桌面程式與網路程式結合(RIA)的現象,會慢慢增加。雖然此可以介面可以提供如桌面應用程式一般,而且可能影響以後不需硬碟安裝等功能,但是其接受程度和親切感,以及使用的方便性仍需大眾決定。當然,我們也希望透過相關單位(如:W3C)等的整合開法,可是使我們不管是在桌面或是網路的使用化,可以更佳豐富、更加多元。

參、參考資料與文獻引用:

1. 吳信輝(無日期)。《資訊新知》:網頁技術的新趨勢—RIA(Rich internet application。民國96年6月14日,取自:http://www.ascc.sinica.edu.tw/nl/93/2019/02.txt

2. [WDC] 在桌面及 Web 執行應用程式(民國96年4月14日)。ericsk’s blog。民國96年6月14日,取自:http://blog.ericsk.org/archives/559

3. 陳沖、麦中凡(無日期)。JavaScript概述。民國96年6月14日,取自:http://www.netcity.net.cn/club/school/javascript/jsgenerl.htm


Saturday, June 23, 2007

強推的部落格

最近在寫多媒體的報告
常常要找很多資料
偶然間逛到一個部落格
裡面講了很多網路跟程式的東西
我比較感興趣的是作者在談
一些微軟程式和Linux程式的部分

老實說 最早接觸Linux是大一的時候
豬給我4片吧 redhead的光碟片
但其實我要沒什麼在用 因為我真的不會用
我不像他很會嘗試OS 而且我怕用錯了
我就等著被家人揍的說
所以嘛....
不過最近豬他灌了這個
改天等他有空的時候 還要再教我更多的東西

總之 我要介紹的是那個部落格啦
雖然感覺作者還蠻 恩恩 奇特的
但大家可以看看吧

hoamon's sandbox

Monday, June 4, 2007

簡介ICMP

資料來源:http://www.ipv6.org.tw/rfc/chineseRFC2001-2500/2463.htm

1.Introduction
RFC 793和RFC 2463主要為制定ICMP(Internet Control Message Protocol)的Message format,RFC793適用於IPv4,RFC 2463適用於IPv6,ICMP是用來讓gateway或destination host能和source host通訊,如欲傳回資料處理發生錯誤的訊息,ICMP為架構在IP上為較高階層的protocol,而且和IP一樣,並不保證一定能無誤的傳送接收,它的作用為feedback problems給source host。同ICMP作用的ICMPv6,則是在IPv6上所使用。

2.Message format
2.1 ICMP
ICMP前八個bit為型態欄位,決定資料的格式,其他欄位內容如標示為unused,則為保留做近一步擴充使用,在傳送時需設為0,一般而言,header fields應包含下列幾項欄位。

-1. version 4
-2. IHL
Internet header length in 32-bit words.
-3. Type of Service 0
-4. Total Length
標頭和資料的長度(以byte為單位)
-5. Identification, Flags, Fragment Offset
-6. Time to Live
在每個機器處理資料時,將其值(單位為秒)減少,
所以其值至少須大於gateway的個數,資
料才能順
利通過
-7. Protocol 1
-8. Header Checksum
將header內所有的16 bit words取一的補數加總,
再取一的補數後置於此欄位,計算
checksum時,
本身欄位視為0。
-9. Source Address
組成ICMP的gateway or host的address
-10. Destination Address
訊息欲送往的gateway or host的address


以下將簡介ICMP包含幾種訊息

1. Destination Unreachable Message

Code:
0Net無法達到
1Host無法達到
2Protocol無法達到
3Port無法達到
4Fragmentation needed and DF set5Source route失敗

用法:
Ex1.
如network的distance趨近無限大,使資料的destination address無法送達,此時gateway可送destination unreachable message給source host.
Ex2.
如在destination host因indicated protocol module或process port無法動作,此時可送destination unreachable message給source host.

Ex3.
當datagram須分割傳送時,但Don’t Fragment flat is on,此時gateway必須忽略此datagram並傳回destination unreachable message.

2. Time Exceeded Message

Code:
0傳送時間超過time to live的時間
1超過分段集合的時間

用法:
Ex1.
當gateway發覺datagram的time to live欄位其值為0,此時須忽略此datagram,並傳送time exceeded message給source host.
Ex2.
當host由於missing fragments無法完成集合fragmented datagram,此時time exceeded message

3. Parameter Problem Message

Code: 0 = 由pointer表示錯誤所在

Pointer:
If code=0, 表示那個byte發生錯誤
用法:
Ex1.
當gateway或host處理datagram時,發現header parameters有問題,無法完成處理程序,此時須忽略此datagram,並傳送parameter problem message給source host.


4. Source Quench Message

用法:
Ex1.
當datagram到達速度比處理還快,destination host送出source quench message給source host
Ex2.
若gateway沒有buffer來queue the datagram,送出source quench message給source host
註.
source host收到source quench message即降低傳送速率,直到沒有再收到source quench message為止

5. Redirect Message

Code:
0Redirect datagram for the Network
1Redirect datagram for the Host
2Redirect datagram for the Type of Service and Network
3Redirect datagram for the Type of Service and Host

Gateway Internet Address :
Datagram欲傳送至Gateway的位址

用法:
Ex1.
gateway(G1)接收到由host傳送過來的datagram,由自身的routing table建立下一個gateway(G2)的位址,若G2和host的source address位於相同的網路上,即傳redirect message給host,通知host傳送datagram至destination network,G2是最短的路徑。

6. Echo or Echo Reply Message


Type:
0Echo replay message
8Echo message

Identifier:
幫助matching request and replies

Sequence Number:
幫助matching request and replies

用法:
當接收到echo message時,須回傳echo reply message

註:
1.the identifier might be used like a port in TCP to identify a session
2.the sequence number might be incremented on each echo request sent.
the echoer returns these same values in the echo reply.

7. Timestamp or Timestamp Reply Message

Type:
13timestamp message
14timestamp reply message

Identifier:
幫助matching timestamp and replies
Sequence Number:
幫助matching timestamp and replies
註:
Originate Timestamp: sender在傳送前最後touch message的時間
Receive Timestamp: echoer在接收時首先touch message的時間
Transmit Timestamp: echoer在傳送前最後touch message的時間
用法:
If the time is not available in milliseconds or cannot be provided with respect to
midnight UT then any time can be inserted in a timestamp.

8. Information Request or Information Reply Message

Type:
15information request message
16information reply message
用法:
This message may be sent with the source network in the IP header source and
destination address fields zero.The reply IP module should send the reply with
the address fully specified.

2.2 ICMPv6
general format:

Type: 表示訊息的型別,決定其他資料的格式
Code: 根據Type,為Message的附加階層
Checksum: 偵測ICMPv6 message或IPv6 header是否有損壞

以下將簡介ICMPv6包含幾種訊息

1.Destination Unreachable Message(Error Message)

Code:
0沒有路線到目的地
1目的地管理上的停止通訊
2無指定
3address無法達到
4port無法達到

用法:
Ex1.
假如無法傳送的原因是在forwarding node’s routing table缺少matching entry
Code=0

Ex2.
假如無法傳送的原因是administrative prohibition
Code=1

2.Packet Too Big Message (Error Message)

MTU: The Maximum Transmission Unit of the next-hop link.

用法:
Ex1.
當router的packet大小大於MTU時,以致無法繼續傳送,此時送出Packet
Too Big Message

3.Time Exceeded Message


Code:
0hop limit exceed in transmit
1fragment reassembly time exceeded

用法:
Ex1.
當router收到Hop Limit of zero的packet,須忽略此packet,並送出Time Exceeded Message,表示initial Hop Limit value太小或routing loop.

4.Parameter Problem Message (Error Message)

Code:
0erroneous header field encountered
1unrecognized Next Header type encountered
2unrecognized IPv6 option encountered

Pointer: 表示packet的那個byte發生錯誤

用法:
Ex1.當IPv6 node處理packet時,在IPv6 header or extension headers發現錯誤,即忽略此packet,並送出Parameter Problem Message,表示錯誤的位置和型別


5.Echo Request Message (Information Message)

Identifier: 幫助matching Echo Replies to this Echo Request
Sequence Number: 幫助matching Echo Replies to this Echo Request

用法:
node 實行Echo responder function,即收到Echo Requests,送出對應的Echo Replies

Sunday, June 3, 2007

網頁嵌入音樂或影片

***以下是擷錄自奇摩的知識:決戰250!!先生女士***

Flash語法跟MV語法一樣唷~請看下面語法!

【一般音樂撥放器語法】
《embed src="%E9%9F%B3%E6%A8%82%E7%B6%B2%E5%9D%80" autostart="1" loop="1" volume="0" height="40" width="140"》《/embed》

【隱藏音樂撥放器語法】
《embed src="%E9%9F%B3%E6%A8%82%E7%B6%B2%E5%9D%80" volume="100" autostart="true" hidden="true" loop="-1"》《/embed》

【MV播放器語法】
《embed style="width: 320px; height: 290px;" src="MV%E7%B6%B2%E5%9D%80" type="" enablecontextmenu="" autostart="" height="400" width="450"》《/embed》

說明:(音樂&MV通用)

╔width改撥放器的寬度,height改撥放器的高度。
╠hidden=false 是顯示撥放器,true是隱藏撥放器。
╠loop=1 表示撥放一次即停止,loop=-1表示無限撥放。
╠ autostart=true 表示自動撥放,false則為不自動撥放。
╚ volume="100"設定音量大小,數值是0~100。

【播放器顏色】
半透明:Alpha(style=1) 預覽 ;
Alpha(style=2) 預覽 ; Alpha(style=3) 預覽
銀色:gray 預覽
黑色:xray 預覽
互補色:invert 預覽
藍色:把語法中的"FILTER: invert; "砍掉就行了(別忘了;後的空格!)
預覽

【播放器大小】
WIDTH: 320px; HEIGHT: 290px是播放器的長跟寬
只要依喜好改數字就好了~
或者直接到進階編輯器調大小和位置(從四角拖拉才不會變形)

另外一種是直接貼影片語法:

A. http://www.youtube.com/ ◀這裡影片很多 用搜尋方便又快
(以伊藤由奈∥Endless Story舉例)
右邊有個【Embed】:
《object height="350" width="425"》
《param name="movie" value="http://www.youtube.com/v/I7IfP6Oy3Xk"》
《embed src="http://www.youtube.com/v/I7IfP6Oy3Xk"
type="application/x-shockwave-flash" height="350" width="425"》《/embed》

《/object》
☞如果你是要貼在無名的話 只要貼藍色部份就好了

B. http://www.im.tv/vlog/ ◀這裡影片也很多 用搜尋,too
(以蔡健雅∥beautiful love舉例)
右下角有個【嵌入語法】:
《object height="255" width="340"》
《param name="movie" value="http://myvlog.im.tv/?id=462279&mid=327447"》
《embed src="http://myvlog.im.tv/?id=462279&mid=327447"
type="application/x-shockwave-flash" height="255" width="340"》《/embed》
《/object》
☞如果你是要貼在無名的話 只要貼藍色部份就好了

語法可以貼在:
a.相簿 → 編輯相簿 → 【相簿描述】裡
b.個人資料 → 修改個人資料 → 【學歷~自我介紹】任一欄裡
c.留言版 → 留言版管理 → 【留言版描述】裡
d.網誌 → 網誌管理 → 【網誌描述】裡 (進頁面就會聽到)
e.網誌 → 資料夾管理 → 連結管理 →【名稱】裡
☞e.要把後面【網址】內的網址刪掉! (進頁面就會聽到)
f.網誌 → 發表新文章 →【一般編輯器】裡 (進單一文章才會聽到)

【注意!】網誌語法要貼在一般編輯器 發表後再用進階編輯器作修改
如果直接貼進階編輯器 發表後是出現語法而不是播放器!

【注意!】A跟B兩種播放器不能用進階編輯器做任何修改 會造成無法顯
示請從語法中的width='xxx' height='xxx'中直接該改數字!

***希望對大家有些幫助***