問題討論區


【PHP 語法與資料庫】文章精華區


【問題】 動態 N 階選單 By Dreamweaver & PHP MySQL



動態 N 階選單 By Dreamweaver & PHP MySQL
飛肯老師
註冊日期:
2008/7/12 0:51
留言: 19
  • 範例介紹動態3階層選單,只要你看的懂在幹嘛很容易延伸為更多階層

  • 表單內的所有欄位值處理保存值的問題,包括選單預選值、文字欄位值

    後面就開始這個「3+2郵遞區號」的範例製作,你可以點選這裡觀看完成的範例。



     環境與需準備的


    基本上這邊所需用的就是一般的Dreamweaver, PHP MySQL環境,不過會用到一個擴充元件來輔助。


     


     資料庫


     既然是一個3+2郵遞區號的範例,而且要介紹到3階層,所以在資料庫這邊就是會有3個資料表,分別記錄縣市(county)、鄉鎮(town)與郵遞區號(zip)的資訊。


    01.PNG


    county資料表:


    02.PNG


    town資料表:


    其中的 tCounty 欄位對應著 county 資料表中的主鍵欄位 cID,以前面兩筆記錄 tCounty=1 為例,所以它們是屬於 county 資料表中 cID 欄位為 1 的記錄、也就是台北縣的鄉鎮。


    03.PNG


    zip資料表:


    同樣的在這邊 zTown 欄位亦對應著 town 資料表中的主鍵欄位 tID。


    04.PNG


    而這三個資料表中的cName、tName、zName欄位值都會用來作為選單的「標籤」,選單「值」的部分就會用到 county 與 town 的主鍵欄位,好讓它們下一層的選單得以篩選出所需的記錄作為選項。


     


    頁面


    接著是頁面的部分名稱為 dymenu.php,這邊準備了一個文字欄位、三個選單與一個按鈕,置於表單 form1 中。


    範例規劃是,在使用者點選選單時能夠將表單內的資訊 POST 給自己處理,且即使選單以外的表單元件已經填寫了資訊,在動作之後值依然能夠保留,講白話就是假設使用者先填了『姓名』,在他點選選單後文字欄位已經填過的資訊依然會被保留,雖然這對  JavaScript  版本的多階選單來講是非常理所當然的,但在這邊是要靠 POST 送出的資訊來重新篩選各個階層選單所需的選項,所以還是要另做處理。


    其中:



    • 姓名文字欄位命名為 name

    • 郵遞區號部分選單依序命名為 county、town、zip


    所以你可以預料當按下按鈕或是變更縣市 county、鄉鎮 town 選單後表單內的資訊都會 POST 送出,這時就能以$_POST['name']、$_POST['county']、$_POST['town']、$_POST['zip']取得對應的值。


    05.PNG


    建立各階選單資料集


    首先建立三個選單的資料集,在縣市部分沒什麼好做的,把所有縣市篩選出來就對了。


    06.PNG


    在鄉鎮的部分是需要篩選對應縣市所屬的鄉鎮的,前面已經規劃縣市選單 county 會 POST 所需資訊,所以在建立資料集的時候就可以直接篩選『tCounty 欄位 = 表單變數 county』。


    07.PNG


    同樣的在郵遞區號部分就是篩選『zTown 欄位 = 表單變數 town』


    08.PNG


    接著我們直接在『繫結』面板中定義這幾個表單變數方便操作。


    09.PNG



    10.PNG


     


    動態選單


    在Dreamweaver中可以很輕鬆的以資料集來作為選單的項目,先來設置縣市部分,點選選單後就可以在『屬性』列找到「動態…」的按鈕。


    11.PNG


    接著就選擇對應的資料集以及選單值、標籤的欄位即可,因為下一階層的選單都需要靠上一層選單所 POST 的值來篩選所屬的紀錄作為選單項目,所以值的部分會是主鍵欄位 cID,屆時表單 POST 後這個值就可以給下一階 town 選單所要用的 rs_town 資料集用來篩選指定縣市的鄉鎮所用。


    接著還有一件事情就是我們需要使這個選單能夠保留使用者前一次所選擇的資訊,在 Dreamweaver 中可以利用這邊『選取的值等於』來處理,在這邊可以指定一個變數給選單,當選單中的某個選項『值』等於該變數時,就會預設選取該項目,點選圖示中滑鼠指到的位置。


    12.PNG


    在這邊就可以選擇該表單變數 county 了,所以之前才會在『繫結』面板定義,否則就要自己key code。


    13.PNG


    設置完的縣市選單就像這個樣子,選單的標籤會是 rs_county 資料集裡的 cName 欄位、值則是 cID 欄位,且頁面 POST 給自己之後預設選取的項目就可以維持。


    14.PNG


    接著這是鄉鎮選單 town。


    15.PNG


    最後是郵遞區號選單 zip。


    16.PNG


    接著於『繫結』面板拖曳表單變數 name 至文字欄位中,所以到目前為止只要頁面 POST 資訊給自己,所有表單元件值、選單項目都能夠被保留。


    17.PNG


    剩下的問題就是怎麼在點選縣市、鄉鎮選單時就能夠直接 POST 資訊給自己,現在只能看到第一階的縣市選單理有項目,因為第二、三階的選單項目都必須依據上一階選單所 POST 的資訊來篩選項目,而在 Dreamweaver 中若指定篩選的變數為空值預設是會帶入 -1 來篩選,也就篩選不到任何資訊,所以二、三階選單都會是空的,不過實際上你可以讓二、三階選單的預設篩選變數值為第一筆資訊對應的值,否則它們一開始基本上就一定會是空的。


    18.PNG


     


    選單處理



    接著要處理縣市、鄉鎮選單在選擇項目後能夠做 POST 的動作,方式很簡單就先點選要處理的選單,然後於『標籤檢視窗 \ 行為』面板中新增『Submit Form』,『行為』在各個Dreamweaver中的位置有一點小差異。


    19.PNG


    接著就可以設置所要 POST 的表單,沒什麼好選的,目的就是自己dymenu.php。


    20.PNG


    完成之後可以在清單中看到這樣的資訊,同樣的除了上面的縣市選單需要以外,鄉鎮選單 town 也需要在選擇項目後 POST,就依據同樣的方法來做處理。


    21.PNG


    接著就來測試吧,首先在文字欄位填上資訊,然後於縣市選單中選擇一個項目。


    22.PNG


    然後你就可以看到文字欄位中的資訊會被保留住,選擇一下第二階選單。


    23.PNG


    毫無疑問的第三階選單就會顯示所有位於該範圍內的項目。


    24.PNG


    還有問題?


    到目前為止看起來整個 N 階層選單已經運作無誤了,不過其實是有一點問題的,我們來套用一下【插入記錄】試試,預計要讓使用者在按下「送出」按鈕後可以將姓名以及所選擇地區的郵遞區號能夠記錄到資料庫中。


    25.PNG


    接著嘗試選擇第一階選單。


    26.PNG


    結果畫面出現錯誤訊息了,很明顯是因為整個程式跑去做【插入記錄】的部分,因為在選擇第一階選單的時候頁面就將表單 form1 裡的資訊全部以 POST 送給自己。


    27.PNG


    但在 Dreamweaver 中對插入、更新、刪除等伺服器行為的處理方式只是去檢查收到的 POST 資訊是否有內定會新增的隱藏欄位 MM_insert(更新紀錄為MM_update),若有的話就會做指定的動作。


    28.PNG


    實際上在套用伺服器行為後Dreamweaver就會將該作用的表單『動作』目標指向自己,並且想辦法包含所有已經帶上的URL參數(上圖34-37列)。


    29.PNG


    所以就想辦法處理一下吧,這裡的方式就是去變更這個 Dreamweaver 表單『動作』目標會指向目的,使它會帶上一個我們自訂的 URL參數(35-40),然後在要做指定伺服器行為動作前所要檢查的部分多去檢查這個 URL變數 是否存在(42),如果該 URL變數 存在就表示這個 POST 的動作是按鈕所觸發的,否則單純選擇選單時是不會有的。


    30.PNG


    這樣就完成了,你可以點選這裡觀看完成的範例。



  • 2010/2/13 19:18
     


    回覆: 動態 N 階選單 By Dreamweaver & PHP MySQL
    會員一級
    註冊日期:
    2010/8/22 15:11
    留言: 1
    飛肯老師您好:
      我的繫結堥S有表單變數要到那裡下載?謝謝

    2010/8/22 15:24
     


    回覆: 動態 N 階選單 By Dreamweaver & PHP MySQL
    會員一級
    註冊日期:
    2010/8/25 12:57
    留言: 1
    飛肯老師:
      我照您的步驟下去做之後,可以做出選完county之後,town就出現與county相對應的資料,然後選完town之後,zip就出現與town相對應的資料.一切看起來好像沒有問題,可是後來我發現,我出來的畫面不像飛肯老師一樣,老師的是在沒有選出county之前,town下拉式選單的資料是空的,而在沒有選出town之前,zip下拉式選單的資料也是空的.而我的是一開始三個下拉式選單就已經出現資料了!而且如果我選完county之後,town下拉式選單的資料是對應county的資料沒錯,可是zip沒有跟著對應(因為town還沒有選值所以沒有執行onChange的關係),如果這個時候選擇送出那zip的值就跟town毫無關係.即county選3,而town的值為5,zip的值為30284(其實應該是23867).
      我有將我的javascript和老師您的javascript拿來對照看看,內容都一樣,真不知道錯在那裡?我現在把我的步驟寫出來讓飛肯老師看一下漏了那個步驟:
    1.建立第一個資料集:名稱rs_county/連線/表格選county/確定
    2.建立第二個資料集:名稱rs_town/連線/表格選town/篩選器tCounty=表單變數county/確定
    3.建立第三個資料集:名稱rs_zip/連線/表格選zip/篩選器zTown=表單變數town/確定
    4.繫結/+/表單變數
    5.county設定動態選單:屬性/動態.../rs_county/值tID/標籤tName/選取的值等於Form的county
    6.town設定動態選單:屬性/動態.../rs_town/值cID/標籤cName/選取的值等於Form的town
    7.zip設定動態選單:屬性/動態.../rs_zip/值zID/標籤zName/選取的值等於Form的zip
    8.點選select#county/行為/+/FlevOOware/Submit Form/Form Action選擇action的網頁
    9.點選select#town/行為/+/FlevOOware/Submit Form/Form Action選擇action的網頁


    以上步驟不知道那裡有錯?還請飛肯老師抽空指點!謝謝!

    2010/8/25 13:51
     


    回覆: 動態 N 階選單 By Dreamweaver & PHP MySQL
    會員一級
    註冊日期:
    2010/8/29 21:30
    留言: 2
    老師好

    你好 這個範例讓我學了很多

    我有一個問題: 我可以做單一個多階動態選單 OR 單一個靜態選單+文字欄位 的多條件搜尋

    但是動態選單+文字欄位的建搜尋卻沒有辦法 因為在動態選單的表單必需用POST才能做出 但是搜尋條件的表單卻要用 GET才

    可以(我在老師出的書上面學到的~好像是老師在讀碩班的時候出的那本書 我有看序= =)

    請問要怎麼解決這個問題? 謝謝

    2010/8/29 21:33
     


    回覆: 回覆: 動態 N 階選單 By Dreamweaver & PHP MySQL
    飛肯老師
    註冊日期:
    2008/7/12 0:51
    留言: 19
    POST變數有嗎?
    這是基本內建的不用另外下載

    2010/9/6 0:34
     


    回覆: 回覆: 動態 N 階選單 By Dreamweaver & PHP MySQL
    飛肯老師
    註冊日期:
    2008/7/12 0:51
    留言: 19
    原始碼在
    http://cttlee.cc/php/examples/dymenu/dymenu.phpx
    你可以比對看看

    2010/9/6 0:35
     


    回覆: 回覆: 動態 N 階選單 By Dreamweaver & PHP MySQL
    飛肯老師
    註冊日期:
    2008/7/12 0:51
    留言: 19
    POST或GET都是我們自己可以決定的
    搜尋改成POST就是在資料集的進階介面將帶入SQL的變數改為從$_POST['xxx']取得

    2010/9/6 0:37
     


    回覆: 回覆: 回覆: 動態 N 階選單 By Dreamweaver & PHP MySQL
    會員一級
    註冊日期:
    2010/8/29 21:30
    留言: 2
    SORRY

    我在已經在老師另一個網站4度C提出我真正的疑問了

    是我問題問錯

    2010/9/6 16:50
     


    回覆: 動態 N 階選單 By Dreamweaver & PHP MySQL
    會員一級
    註冊日期:
    2009/3/6 20:20
    留言: 1
    請問老師!如果是用ASP語法的話!最後的指向目標該如何改?
    由於看不懂PHP語法!所以請教~

    2010/11/19 13:23
     


    回覆: 動態 N 階選單 By Dreamweaver & PHP MySQL
    會員一級
    註冊日期:
    2013/4/23 14:23
    留言: 1
    請問怎麼設定
    其中的 tCounty 欄位對應著 county 資料表中的主鍵欄位 cID
    是要在資料庫裡面設外來鍵嗎?

    2013/4/23 14:27
     









    [高級搜索]


     

    課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

     

    【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
    服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

     

    台北市短期補習班立案 第 6631 號

    TOP

    【 Flycan.com 】 Powered by XOOPS