Dreamweaver MX 2004做ASP程式

dreamweaver|程式 最近論壇和ＱＱ裡總有人問，＂我要學習ＡＳＰ但是不知道從哪裡學起？有沒有初級入門的教程？＂，其實本站中已經有好多關於ASP的教程了而且還有相關的書籍提供大家下載，可能是沒看到的原因吧？從今天開始我編寫個教程教你一步一步學習ASP，在這裡我們使用可視話的編程工具Dreamweaver MX 2004來實現開發ASP程式，在以後我將陸續給大家介紹如何開發ASP.NET、PHP，JSP。本教程寫得比較簡單，上手應該比較容易，大家跟著一步一步做就行了。我的作業系統是Win XP，所以截的圖都是XP的介面。

　　1、開啟電腦，在E盤下建立一檔案夾myweb（這個夾子就是你的網站存放點了），並且在裡面建幾個子檔案夾（就好似你網站的子目錄）

　　2、回到myweb的根目錄，右鍵選擇“共用和安全”（其實是快速地建立虛擬目錄）

　　3、出現屬性對話方塊後，選擇“Web共用”標籤，點選“共用資料夾”，出現共用別名對話方塊，選擇默然設定，確定即可。

　　4、補充說明。其實設定Web共用就是設定IIS的虛擬目錄。你可以查看到IIS中預設網站中已經有了myweb(附註：偶的OS是winXP的，其實有關IIS的操作一回事。如： winXP裡面開啟控制台－管理工具－Internet 資訊服務---本機電腦---預設網站）（註：關於在XP下安裝ＩＩＳ的方法請看：XP下安裝IIS5.1視頻教程）

　　5、以上步驟完成了建站，設虛擬目錄，下面就是把Dreamweaver MX 2004開啟了。第一步就是“管理網站”了

　　6、選擇“定義網站”，在彈出的屬性框中選“進階”標籤，從“分類”中先選“本地資訊”，右視窗中佈建網站名稱（隨便輸入，但自己要清楚其代表的意思，推薦和你網站的根檔案名稱同），本地根資料夾（這時候就指向到我們在步驟1中建的檔案夾了）。

　　7、然後設定遠程資訊，訪問選擇“本地/網路”，遠端檔案夾仍選擇我們的網站資料夾e:\myweb\

　　8、再接著“測試伺服器”，“伺服器模型”暫為ASP Javascript，“訪問”本地/網路，“測試伺服器檔案夾”仍是我們的網站資料夾e:\myweb\，“URL首碼”在http://localhost後面加入myweb，添加的東西就是我們步驟3中設定的虛擬目錄

　　9、這時，網站定義基本結束，點擊確定。出現“編輯網站”對話方塊，“完成”即可。

　　10、此時DW的網站屬性框中就將e:\myweb\內所有內容映射過來，在此需要提醒的是：Dreamweaver MX 2004中建好了網站串連，就可直接在DW中對其對應的檔案、檔案夾操作，最好不要回到我的電腦d:\myweb\裡面去操作。【 能在DW中操作的，盡量不要離開DW的編輯環境 】。

1、首先確認網站根目錄下有專門的資料庫存放目錄，比如e:\myweb下面的database檔案夾（有則Ok，無則建立）。我使用的是Microsoft Access 2003。

 　　接著開啟Microsoft Access，"檔案"---“建立”，之後選擇空資料庫，在彈出的對話方塊中選擇存放路徑並命名。

　　2、在建立的資料庫中“使用設計器建立表”，彈出的“表1”中設計你的相關欄位，注意各自的“資料類型”，還有一點很重要：欄位ID，類型自動編號，並選擇它定為主鍵。

　　3、設計完“表1”後，直接關閉該視窗，在彈出對話方塊中點擊“是”儲存“表1”，並重新命名為user。

　　此時一點需要提到：剛剛強調的設定欄位id相關是必須的，否則在儲存之後還會出現如下對話方塊，其效果還是設定類型是自動編號的關鍵字段。

　　4、這時候資料庫表user已經建立完畢。

　　5、雙擊資料庫表user，小添試一下，在彈出的user表中輸入相關內容。關閉儲存。

　　至此對資料庫、表、欄位的建立儲存工作完畢。下面就開始動用Dreamweaver操縱mdb檔案了。

1、開啟Dreamweaver MX 2004，在網站裡面先建立個ASP頁面（index.asp）,選擇建立項目中的“ASP Javascript”。開啟應用程式面板，在“應用程式”面板中選中“資料庫”標籤。只要我們在前面建立了網站，選擇了文件類型（即我們選的ASP Javascript的），並且還測試了伺服器（http://localhost/myweb/）。那現在就點擊“+”號，選擇“自訂連接字串”。

　　2、在彈出來的“自訂連接字串”對話方塊中，"串連名稱"隨便寫一個。“連接字串”就要好好填寫了。driver={Microsoft Access Driver (*.mdb)};dbq=e:\myweb\database\webjxcom.mdb。這在手工編寫ASP串連資料庫代碼中很普遍(相關文章見http://www.webjx.com/htmldata/2005-03-24/1111596140.html)

　　點擊“測試”，出現成功就可以了。

　　如果串連不成功你可以開啟Dreamweaver的協助查看一下相關的說明。

　　3、成功串連資料庫後，在DW裡其實是自動產生了一個串連檔案。位置在自動產生的Connections檔案夾中，名稱是你剛才在“自訂連接字串”隨便敲的為命名asp檔案。還可以注意到DW資料庫標籤內看到mdb檔案內的各個欄位。

　　4、串連資料庫的檔案是有了，但下面我們具體的單個頁面怎麼和資料庫連接上呢？選擇“綁定”標籤，添加“記錄集（查詢）”。單看字面意思就知道是來SQL查詢語句了。

　　5、在彈出的“記錄集”視窗中，“名稱”隨便寫個吧，也可不寫，預設的。但"串連"就要從下拉式清單中選擇你定義的連線物件了，“表格”繼續下拉選擇（註：這和設計資料庫的時候有幾張表相關的）。

　　6、其它隨便看下，其實最主要的是自動產生了SQL語句，點選“進階...”，可以看到如下圖

　　7、單擊確定後，你會發現記錄集已經綁定，所有資料庫中的欄位都顯現出來。

　　再注意下面有“插入”按鈕，完全可以將某個欄位選中，或按按鈕或拖動到index.asp頁面即可。該asp頁面就顯示資料庫裡面內容了。但只能顯示首行的，要想全部顯示。。。。Next

　　8、“插入”菜單-->>“應用程式物件”-->>“動態資料”-->>“動態表格”。如下圖：

　　9、彈出的動態表格中選擇已經幫定的記錄集，顯示幾條記錄明白說就是分頁程式的產生：資料的記錄多，內容多，就分好幾頁來顯示，每頁幾條。記錄是用表格自動產生顯示出來的，再設下表格的屬性。

　　單擊“確定”後效果如下：

　　10、這時我們就可以按F12查看效果，當然您如果對HTML代碼和CSS已經熟悉了，那麼你可以格式化一下表格，使它看起來更加漂亮！最終效果如下：

　　到現在為止你已經學會怎麼連資料庫，怎麼顯示庫表中的記錄了。等待你的就是下面怎麼插入新的記錄，怎麼修改記錄，刪除記錄等等。請繼續關注以下教程吧！


1、開啟Dreamweaver MX 2004，在網站裡面先建立個ASP頁面（index.asp）,選擇建立項目中的“ASP Javascript”。開啟應用程式面板，在“應用程式”面板中選中“資料庫”標籤。只要我們在前面建立了網站，選擇了文件類型（即我們選的ASP Javascript的），並且還測試了伺服器（http://localhost/myweb/）。那現在就點擊“+”號，選擇“自訂連接字串”。

　　2、在彈出來的“自訂連接字串”對話方塊中，"串連名稱"隨便寫一個。“連接字串”就要好好填寫了。driver={Microsoft Access Driver (*.mdb)};dbq=e:\myweb\database\webjxcom.mdb。這在手工編寫ASP串連資料庫代碼中很普遍(相關文章見http://www.webjx.com/htmldata/2005-03-24/1111596140.html)

　　點擊“測試”，出現成功就可以了。

　　如果串連不成功你可以開啟Dreamweaver的協助查看一下相關的說明。

　　3、成功串連資料庫後，在DW裡其實是自動產生了一個串連檔案。位置在自動產生的Connections檔案夾中，名稱是你剛才在“自訂連接字串”隨便敲的為命名asp檔案。還可以注意到DW資料庫標籤內看到mdb檔案內的各個欄位。

　　4、串連資料庫的檔案是有了，但下面我們具體的單個頁面怎麼和資料庫連接上呢？選擇“綁定”標籤，添加“記錄集（查詢）”。單看字面意思就知道是來SQL查詢語句了。

　　5、在彈出的“記錄集”視窗中，“名稱”隨便寫個吧，也可不寫，預設的。但"串連"就要從下拉式清單中選擇你定義的連線物件了，“表格”繼續下拉選擇（註：這和設計資料庫的時候有幾張表相關的）。

　　6、其它隨便看下，其實最主要的是自動產生了SQL語句，點選“進階...”，可以看到如下圖

　　7、單擊確定後，你會發現記錄集已經綁定，所有資料庫中的欄位都顯現出來。

　　再注意下面有“插入”按鈕，完全可以將某個欄位選中，或按按鈕或拖動到index.asp頁面即可。該asp頁面就顯示資料庫裡面內容了。但只能顯示首行的，要想全部顯示。。。。Next

　　8、“插入”菜單-->>“應用程式物件”-->>“動態資料”-->>“動態表格”。如下圖：

　　9、彈出的動態表格中選擇已經幫定的記錄集，顯示幾條記錄明白說就是分頁程式的產生：資料的記錄多，內容多，就分好幾頁來顯示，每頁幾條。記錄是用表格自動產生顯示出來的，再設下表格的屬性。

　　單擊“確定”後效果如下：

　　10、這時我們就可以按F12查看效果，當然您如果對HTML代碼和CSS已經熟悉了，那麼你可以格式化一下表格，使它看起來更加漂亮！最終效果如下：

　　到現在為止你已經學會怎麼連資料庫，怎麼顯示庫表中的記錄了。等待你的就是下面怎麼插入新的記錄，怎麼修改記錄，刪除記錄等等。請繼續關注以下教程吧！

1、在網站裡建立一檔案register.asp用來做註冊頁面，選擇建立項目中的“ASP Javascript”。同樣，因為在此之前已經建了和資料庫連接的檔案conn.asp，該檔案是全網站有效。所以在你建立的regist.asp中的“應用程式”----“資料庫”標籤裡面就自動有了"conn"。這一步是只要開始做第一步，以後都不要添加的（除非要連另外的資料庫）。

　　2、接著切換到“綁定”面板，添加記錄集，步驟和上面的一樣在此不再詳細敘述。下圖：

　　注意：在上圖中有一個“簡單...”按鈕，是實現上面兩個圖的切換的！

　　3、在regist.asp頁面做個很簡單的表單頁，內容以及form表單名最好和資料表表裡的欄位對應。如下圖：

　　相應的表單的代碼：

<form name="form1" method="post" action="">
  <table width="339" border="1" cellspacing="2" cellpadding="2">
    <tr>
      <td width="61">使用者名稱:</td>
      <td width="204"><input name="name" type="text" id="name"></td>
    </tr>
    <tr>
      <td>密　碼：</td>
      <td><input name="pass" type="text" id="pass"></td>
    </tr>
    <tr>
      <td>電子郵件：</td>
      <td><input name="email" type="text" id="email"></td>
    </tr>
    <tr>
      <td>密碼提示問題：</td>
      <td><input name="question" type="text" id="question"></td>
    </tr>
    <tr>
      <td>密碼提示答案：</td>
      <td><input name="answer" type="text" id="answer"></td>
    </tr>
    <tr>
      <td>ＯＩＣＱ：</td>
      <td><input name="oicq" type="text" id="oicq"></td>
    </tr>
    <tr>
      <td>ＩＣＱ：</td>
      <td><input name="icq" type="text" id="icq"></td>
    </tr>
    <tr>
      <td>ＭＳＮ：</td>
      <td><input name="msn" type="text" id="msn"></td>
    </tr>
    <tr>
      <td>ＵＲＬ：</td>
      <td><input name="url" type="text" id="url"></td>
    </tr>
    <tr align="right">
      <td colspan="2"><input type="submit" name="Submit" value="提交">　
        <input type="reset" name="Submit2" value="重設"></td>
    </tr>
  </table>
</form>

　　5、切換到“伺服器行為”面板，因為先前已在第2步中綁定了記錄集，所以該標籤內容中也已有記錄集這一項，這很正常。但我們要的是插入記錄，繼續按“+”，選擇“插入記錄”。

　　6、在彈出的“插入記錄”對話方塊中。“串連”選你所建； “插入到表格”順其自然； “插入後，轉到”意思是註冊成功以後要跳轉到某頁提示，先寫個，但要記得馬上要建這個頁面； “擷取值自”就是剛剛選擇的Form名了；“表單元素”中的“name插入到列中name”，意思是表單中 name輸入框中的內容插入到資料庫表name欄位中。

　　這時明白為什麼在步驟3中“內容以及form表單名最好和資料庫表裡的欄位對應”了吧，DW自動智能插入，否則你得一個一個點選。

　　7、確定以後，註冊系統已經完成了大半。（我正常到此的時間是1分鐘不到，最主要的是多多練習）但再想想註冊系統是不是不允許重名呢？那就要繼續添加一些內容。

　　在“伺服器行為”中繼續按“+”，“使用者身分識別驗證”中選“檢查新使用者名稱”。

　　8、同樣在彈出的“檢查新使用者名稱”對話方塊中，使用者名稱欄位選擇“name”表示不得重名註冊，當然也可以選擇其他的，比如email，意思就是同個email只能註冊一個。“如果已存在，則轉到”表示假如有重複的現象該怎麼辦呢？那就跳到一個出錯頁面(registbad.htm)提示。當然這頁也還沒建，先寫個檔案，和剛才的register.htm一樣記得馬上補上去。

　　9、做一些細節性的動作，比如表單裡面哪些必須添啊，哪些一定要是數字啊，email地址要包含一個@和兩個"."號啊等等。注意先選擇“提交”按鈕。“設計”面板“行為”中選擇“檢測表單”。彈出的對話方塊中就可以很輕易的點取設定了

 

　　10、再做下剛剛沒有的兩個頁子吧：regist.htm和registbad.htm(至於這兩個頁面我就不給建立了！)

　　regist.htm頁面內容大概是“註冊成功，請登入”（當然登入系統是下一篇我要寫的）。

　　registbad.html頁面內容大概就是“呵呵，對不起，有這個使用者了，還是麻煩你重新註冊下。返回！”

　　還有注意下，把“密碼提示問題”和“密碼提示答案”也填下，以後講到“找回密碼系統”的時候會用到。

　　註冊系統就到這吧，主要是插入記錄，並且驗證的不重名效果。


　1.在網站裡右鍵建立一檔案login.asp用來做登入頁面；同樣，之前已經建了和資料庫連接的檔案conn.asp。所以在面板裡“應用程式”----“資料庫”標籤裡面就自動有了"conn"。

　　2.和註冊頁面一樣，都需要到“應用程式”面板的“綁定”標籤下“+”記錄集。快顯視窗中選擇完畢後點擊“測試”，可以看到當前資料庫中滿足SQL條件的相關記錄。

　　3.在登入頁中做了Form表單，並對輸入文字框進行合理命名。

　　表單相關的代碼：

<form name="form1" method="post" action="">
  <p>
    使用者名稱:
      <input name="user" type="text" id="user">
  </p>
  <p>    密　碼:
    <input name="pass" type="text" id="pass">
</p>
  <p>
    <input type="submit" name="Submit" value="提交">
    <input type="reset" name="Submit2" value="重設">
</p>
</form>

　　4.點中Form標籤選中整個表單。

　　5.選擇“應用程式”面板中“伺服器行為”中“+”----“使用者身分識別驗證”----“登入使用者”。

　　6.彈出的對話方塊中進行具體的設定。“從表單擷取輸入”意思是從本asp頁面中選擇具體的form1表單，以及該表單中的所必有的使用者名稱欄位和密碼欄位。

　　“串連驗證”表示通過conn檔案和資料庫表進行串連設定。選擇“user表格”，使用者名稱列表和密碼列表即資料庫中的特定使用者名稱欄位和密碼欄位。很明顯，讓庫中的欄位的內容和表單中提交的內容進行驗證比較串連。

　　“登入成功，轉到”loginok.asp，該頁面是一許可權頁面，只有當登入完全正確的時候才能進入。否則是登入失敗，轉到loginbad.html。

　　7.確定後，login.asp基本完成。切換到login.asp的代碼視窗，注意！已經產生了使用者的局部變數Session：“Session("MM_Username") = MM_valUsername;”。該變數可以全站採用的。

　　8.儲存該檔案，建立一loginok.asp檔案，這是一個保護頁面，只有當使用者密碼正確登入後才會進入。否則跳轉到loginbad.html（登入失敗，可能原因是使用者名稱或密碼錯。）開啟loginok.asp，“應用程式”---“綁定”---“階段變數”。

　　9.彈出的階段變數對話方塊中，根據第7步的代碼顯示，名稱輸入MM_Username句即可。表示了Session("MM_Username") = MM_valUsername;的直接引用。

　　10.選擇建立起來的“MM_Username”，按下“插入”按鈕或者拖入頁中。可以讓不同使用者進入時動態顯示其對應的姓名。

　　11.再為loginok.asp做許可權限定，意思是你可以知道http://localhost/newgn/loginok.asp，但你單純在地址欄輸入絕對是進不了的，或者使用者密碼不正確也是進不了的。那該怎麼實現這樣的效果呢？ “伺服器行為”---“身分識別驗證”---“限制對頁的訪問”就OK了。

　　12，按“使用者名稱和密碼”進行限制，拒絕則跳轉到“loginbad.html”。

　　13.有關loginok.asp基本設定完畢。還有個loginbad.html再努力一下。很簡單，登入失敗跳轉到該頁，非法登入也同樣跳到本頁，內容很簡單。

　　具體製作方法不再詳細講述了！很簡單的啊！


1.建立第一個頁面 search.asp，其主要作用是讓尋找密碼的朋友輸入其使用者名稱，很簡單的頁面：一個name文本輸入框，和一個submit提交按鈕。

　　2.search.asp中選form標記，在相應的屬性框中，“動作”填寫search1.asp，“方法”採用post。

　　3.儲存search.asp，在網站裡面建立search1.asp，並開啟它。該頁的作用有兩個：

　　1、判斷上一頁，即search.asp所填寫名字在資料庫中是否存在。
　　2、不存在應提示出錯，存在則應將該使用者的問題（question）欄位內容顯示。具體怎麼實現呢？

　　4.search1.asp上資料庫已經連好。老方法，先綁定記錄集（“應用程式”面板--“綁定”標籤下“+”“記錄集(查詢)”）。在彈出的“記錄集”中就要好好設定了。最主要的就是“篩選”，選擇"name" "=" "表單變數" "name"。意思是，要顯示資料庫表中欄位name的內容，得有個條件，那就是：從上一頁（search.asp）中書寫的name表單內容要和庫中的欄位name值相等。

　　5.其實切換到“進階”就可以看到自動產生的SQL代碼，其中就有requeset.form("name")，意思就是把1.asp文字框中輸入的值接受過來。

　　6.在search1.asp頁面敲入不存在該使用者的提示言"這個使用者還沒有註冊，所以你就沒必要找密碼了。"

　　換行再敲入存在該使用者的語句。但與此同時還要注意把密碼問題顯示出來，以及問題的答案做成文字框。

　　7.選中search1.asp的form標籤，屬性面板中動作填寫search2.asp，方法採用post。search2.asp主要就是用來判斷問題和答案是否吻合，如吻合則顯示正確密碼了。注意！是問題和答案在一起。而我們當前只有答案可以傳過去，那我們的問題該怎麼傳到search2.asp呢？

　　8.在“你的密碼問題是：”後面插入游標，然後從“綁定”的“記錄集”中選擇“question”插入或者直接拖入到頁面。注意！這還只是顯示給使用者密碼問題，是不能將此資訊傳過去的。那怎麼樣才可以呢？

　　9.我們採用“隱藏欄位”來傳送question的值。插入一“隱藏欄位”。

　　對“隱藏欄位”的屬性進行修改：“隱藏地區”名稱就叫"question"吧，“值”點擊後面的閃電表徵圖，彈出對話方塊中選擇“question”。已經完成對“隱藏欄位”question的賦值，同樣也可以進行傳遞。

　　10.剩下的就是把search1.asp中的兩部分嚴格分開了。選中“這個使用者還沒有註冊，所以你就沒必要找密碼了。”這段文本。“應用程式”面板“伺服器行為”“+”“顯示地區”“記錄為空白則顯示地區”。彈出對話方塊中選擇剛剛建立的recordset1即可。意思很明顯：如果沒有找到滿足SQL語言查詢的記錄集就顯示該行錯誤提示。

　　11.同樣，選擇form表單，“應用程式”面板“伺服器行為”“+”“顯示地區”“記錄不為空白則顯示地區”。彈出對話方塊中選擇剛剛建立的recordset1即可。意思也很清楚：如果有滿足SQL語言查詢的記錄集就顯示問題和答案書寫框。最終效果頁應該如下：

　　總算把search1.asp搞定了。總結下，該頁主要起承上啟下的作用。先要判斷有沒有這個使用者，如果有，還有把密碼問題顯示出來，並要能傳送到下一頁search2.asp

　　12.那search2.asp就要判斷search1.asp過來的密碼問題以及答案是否和資料庫中的吻合了。又有兩個作用：不吻合，說明密碼答案錯，返回上頁再來！吻合，那就規規矩矩地給人家密碼吧，呵呵。不過有了做search1.asp的經驗，做search2.asp還不是小菜一碟！

　　13.儲存search1.asp，在網站建立search2.asp並且開啟它。老規矩，綁定記錄集（“應用程式”面板--“綁定”標籤下“+”“記錄集(查詢)”）。在彈出的“記錄集”中就要值得你要小心注意了。“篩選”，選擇"question" "=" "表單變數" "question"

　　14.但你有沒有注意到，我們要傳送兩個值給search2.asp接受的，但現在只能一個進行選擇。那該怎麼辦呢？切換到“進階”SQL的相關代碼。我們要稍加添加。SQL結構查詢語言會一點，模仿能力強一點，呵呵就過來了！“變數”添加一個“MMAnswer”，“運行值”當然就是“request.form("answer")”瞭然後把SQL語言加一下and answer = 'MMAnswer'看SQL的意思就明白了：必須要求 question and answer和資料庫表中兩欄位的值吻合。

　　15，接著象做search1.asp樣快速設計search2.asp，頁面上書寫不吻合的語句“你的問題答案不是這個吧，要不回去再試試？ ”並且選中後，同樣是“應用程式”面板“伺服器行為”“+”“顯示地區”“記錄為空白則顯示地區”。

　　接著是吻合的情況，“你的密碼是：”的後面，從“綁定”“記錄集”中選擇“pwd”插入或者直接拖入到頁面；

　　並且還要選中該部分，“應用程式”面板“伺服器行為”“+”“顯示地區”“記錄不為空白則顯示地區”。

　　整個程式製作完成！你可以自己測試下了！