Pages

Subscribe:

Ads 468x60px

Labels

2014年11月3日 星期一

動態選單 By Dreamweaver & PHP MySQL

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

資料庫

 既然是一個3+2郵遞區號的範例,而且要介紹到3階層,所以在資料庫這邊就是會有3個資料表,
分別記錄縣市(county)、鄉鎮(town)與郵遞區號(zip)的資訊。
01  
county資料表:
02  
town資料表:
其中的 tCounty 欄位對應著 county 資料表中的主鍵欄位 cID,以前面兩筆記錄 tCounty=1 為例,
所以它們是屬於 county 資料表中 cID 欄位為 1 的記錄、也就是台北縣的鄉鎮。
03  
zip資料表:
同樣的在這邊 zTown 欄位亦對應著 town 資料表中的主鍵欄位 tID。
04  
而這三個資料表中的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  

建立各階選單資料集

首先建立三個選單的資料集,在縣市部分沒什麼好做的,把所有縣市篩選出來就對了。
06  
在鄉鎮的部分是需要篩選對應縣市所屬的鄉鎮的,前面已經規劃縣市選單 county 會 POST 所需資訊,
所以在建立資料集的時候就可以直接篩選『tCounty 欄位 = 表單變數 county』。
07  
同樣的在郵遞區號部分就是篩選『zTown 欄位 = 表單變數 town』
08  
接著我們直接在『繫結』面板中定義這幾個表單變數方便操作。
09  
10  

動態選單

在Dreamweaver中可以很輕鬆的以資料集來作為選單的項目,先來設置縣市部分,點選選單後就可以在『屬性』列找到「動態…」的按鈕。
11  
接著就選擇對應的資料集以及選單值、標籤的欄位即可,因為下一階層的選單都需要靠上一層選單所 POST 的值來篩選所屬的紀錄作為選單項目,所以值的部分會是主鍵欄位 cID,屆時表單 POST 後這個值就可以給下一階 town 選單所要用的 rs_town 資料集用來篩選指定縣市的鄉鎮所用。
接著還有一件事情就是我們需要使這個選單能夠保留使用者前一次所選擇的資訊,在 Dreamweaver 中可以利用這邊『選取的值等於』來處理,在這邊可以指定一個變數給選單,當選單中的某個選項『值』等於該變數時,就會預設選取該項目,點選圖示中滑鼠指到的位置。
12    
在這邊就可以選擇該表單變數 county 了,所以之前才會在『繫結』面板定義,否則就要自己key code。
13  
設置完的縣市選單就像這個樣子,
選單的標籤會是 rs_county 資料集裡的 cName 欄位、值則是 cID 欄位,
且頁面 POST 給自己之後預設選取的項目就可以維持。
14  
接著這是鄉鎮選單 town。
15  
最後是郵遞區號選單 zip。
16  
接著於『繫結』面板拖曳表單變數 name 至文字欄位中,
所以到目前為止只要頁面 POST 資訊給自己,所有表單元件值、選單項目都能夠被保留。
17  
剩下的問題就是怎麼在點選縣市、鄉鎮選單時就能夠直接 POST 資訊給自己,
現在只能看到第一階的縣市選單理有項目,
因為第二、三階的選單項目都必須依據上一階選單所 POST 的資訊來篩選項目,
而在 Dreamweaver 中若指定篩選的變數為空值預設是會帶入 -1 來篩選,
也就篩選不到任何資訊,所以二、三階選單都會是空的,
不過實際上你可以讓二、三階選單的預設篩選變數值為第一筆資訊對應的值,
否則它們一開始基本上就一定會是空的。
18  
 
Loading ... Loading ...

選單處理

接著要處理縣市、鄉鎮選單在選擇項目後能夠做 POST 的動作,方式很簡單就先點選要處理的選單,
然後於『標籤檢視窗 \ 行為』面板中新增『Submit Form』,
『行為』在各個Dreamweaver中的位置有一點小差異。
19  
接著就可以設置所要 POST 的表單,沒什麼好選的,目的就是自己dymenu.php。
20  
完成之後可以在清單中看到這樣的資訊,同樣的除了上面的縣市選單需要以外,
鄉鎮選單 town 也需要在選擇項目後 POST,就依據同樣的方法來做處理。
21  
接著就來測試吧,首先在文字欄位填上資訊,然後於縣市選單中選擇一個項目。
22  
然後你就可以看到文字欄位中的資訊會被保留住,選擇一下第二階選單。
23  
毫無疑問的第三階選單就會顯示所有位於該範圍內的項目。
24  

還有問題?

到目前為止看起來整個 N 階層選單已經運作無誤了,
不過其實是有一點問題的,我們來套用一下【插入記錄】試試,
預計要讓使用者在按下「送出」按鈕後可以將姓名以及所選擇地區的郵遞區號能夠記錄到資料庫中。
25  
接著嘗試選擇第一階選單。
26  
結果畫面出現錯誤訊息了,很明顯是因為整個程式跑去做【插入記錄】的部分,
因為在選擇第一階選單的時候頁面就將表單 form1 裡的資訊全部以 POST 送給自己。
27  
但在 Dreamweaver 中對插入、更新、刪除等伺服器行為的處理方式只是去檢查收到的 POST 資訊是
否有內定會新增的隱藏欄位 MM_insert(更新紀錄為MM_update),
若有的話就會做指定的動作。
28  
實際上在套用伺服器行為後Dreamweaver就會將該作用的表單『動作』目標指向自己,
並且想辦法包含所有已經帶上的URL參數(上圖34-37列)。
29  
所以就想辦法處理一下吧,這裡的方式就是去變更這個 Dreamweaver 表單『動作』目標會指向目的,
使它會帶上一個我們自訂的 URL參數(35-40),
然後在要做指定伺服器行為動作前所要檢查的部分多去檢查這個 URL變數 是否存在(42),
如果該 URL變數 存在就表示這個 POST 的動作是按鈕所觸發的,
否則單純選擇選單時是不會有的。
30  
  

2014年11月2日 星期日

update & delete multiple records PHP mysql tutorial [ENG]

Update/Delete Multiple Rows using PHP

We are well expertise with PHP CRUD operations by accessing MySQL via PHP logic. Yet, we have seen about how to update and delete table rows one at a time. This article deals with selecting multiple rows for applying update/delete operations.
For selecting multiple rows, we are going to use checkbox input for submitting selected rows reference. We can get selected checkbox values via jQuery AJAX post or by accessing form from PHP after page refresh.

Steps in PHP Multiple Rows Update/Delete

While implementing multiple rows update or delete, we need to follow some steps. All the steps listed below is suitable for updating multiple rows. But, step 2, 3 is not required for deleting multiple rows. Instead, we can show a Javascript popup to ask for confirmation of delete.
php_mutiple_row_update_delete
  1. Selecting rows using checkbox input.
  2. Show form UI for updating table columns.
  3. Submit array of row details to PHP.
  4. Iterate into row details array to apply update/delete query for each.
First, let us start coding for updating multiple rows. And then, we can simplify it for delete operation by removing unwanted steps like form submit and etc.

Multiple Rows Update using Checkbox

We are going to take similar example seen in PHP CRUD article. From that example, let us take list_user.php and edit_user.php and continue with the list of steps stated above. With these steps, we should make little changes on list_user.php and edit_user.php.

Selecting Rows using Checkboxes.

For each users row, we need to add checkbox input while iterating over a loop with query result. So, we should create another column with user’s list view for checkbox input.
So, while printing user table entries dynamically to the list view, the loop should contain the following items.
php
$i=0;
while($row = mysql_fetch_array($result)) {
if($i%2==0)
$classname="evenRow";
else
$classname="oddRow";
?>
php if(isset($classname)) echo $classname;?>">
php echo $row["userId"]; ?>" >
php echo $row["userName"]; ?> php echo $row["firstName"]; ?> php echo $row["lastName"]; ?> php echo $row["userId"]; ?>" class="link"> alt='Edit' title='Edit' src='images/edit.png' width='15px' height='15px' hspace='10' /> php echo $row["userId"]; ?>" class="link"> alt='Delete' title='Delete' src='images/delete.png' width='15px' height='15px'hspace='10' /> php $i++; } ?>
The HTML tags will recursively created with dynamic values for each iteration of the loop. Checkbox added for each user’s row will contain their id, accordingly, as its value. And, it will look like,
php_multiple_rows_with_checkbox
These values will be passed as an array of user ids to PHP page. With these selected checkbox values, the form is submitted via Javascript. On clickinh Update button, it will trigger setUpdateAction() event handler to set form action attribute before submit. And the script is,
function setUpdateAction() {
document.frmUser.action = "edit_user.php";
document.frmUser.submit();
}

Show Edit Form for Selected Rows.

Previously, we have seen about how to handle edit for each record. So, we showed only one tile containing single user details. But now, we should show multiple tiles, since we are updating multiple users at a time.
For that, we need to make two main changes with the edit_user.php, we have seen in PHP CRUD.
  • We should create editable form elements containing user details recursively for each user. This is similar to that we have done with user’s list view. The only difference is that we are displaying them with form input element to create edit interface.
  • And then, the second change, we should keep all elements name as an array. For example, if the element name is userName, then, it should be specified as userName[]. We can have more clearance on seeing the code below.
php
$rowCount = count($_POST["users"]);
for($i=0;$i<$rowCount;$i++) {
$result = mysql_query("SELECT * FROM users WHERE userId='" . $_POST["users"][$i] . "'");
$row[$i]= mysql_fetch_array($result);
?>




 border="0" cellpadding="10" cellspacing="0" width="500" align="center" class="tblSaveForm">


Username
php echo $row[$i]['userId']; ?>">php echo $row[$i]['userName']; ?>"> Password php echo $row[$i]['password']; ?>"> First Name php echo $row[$i]['firstName']; ?>"> Last Name php echo $row[$i]['lastName']; ?>"> php } ?>

Submitting Array of Updated Values.

We are specifying each input as an array. So, on submitting this multiple user information, array of user information for each user, will be passed to PHP code.

PHP Multi Dimensional Array Iteration.

By iterating over this multi dimensional array, each user record will be updated by setting current iteration values to MySQL UPDATE query. After successful update, the page will be redirected to list view by using PHP location header. And the PHP code is,
php
$conn = mysql_connect("localhost","root","");
mysql_select_db("phppot_examples",$conn);

if(isset($_POST["submit"]) && $_POST["submit"]!="") {
$usersCount = count($_POST["userName"]);
for($i=0;$i<$usersCount;$i++) {
mysql_query("UPDATE users set userName='" . $_POST["userName"][$i] . "', password='" . $_POST["password"][$i] . "', firstName='" . $_POST["firstName"][$i] . "', lastName='" . $_POST["lastName"][$i] . "' WHERE userId='" . $_POST["userId"][$i] . "'");
}
header("Location:list_user.php");
}
?>

Deleting Multiple Rows using PHP

Delete is very simple compared with update. Because, we need not show any user interface and it requires only the array of selected row ids. For multi row delete also we are submitting selected rows by using Javascript. As shown in the following script, we can use Javascript confirm() function, to get confirmation before delete.
function setDeleteAction() {
if(confirm("Are you sure want to delete these rows?")) {
document.frmUser.action = "delete_user.php";
document.frmUser.submit();
}
}
In PHP page, DELETE query is executed with MySQL WHERE clause specifying condition to match appropriate user id in each iteration. And the PHP code for delete will be as follows.
php
$conn = mysql_connect("localhost","root","");
mysql_select_db("phppot_examples",$conn);
$rowCount = count($_POST["users"]);
for($i=0;$i<$rowCount;$i++) {
mysql_query("DELETE FROM users WHERE userId='" . $_POST["users"][$i] . "'");
}
header("Location:list_user.php");
?>
This MySQL tutorial was added on September 23, 2013.

Free Dreamweaver Course - Shopping Cart Lesson 1

2014年10月30日 星期四

一秒內連上無線基地台,使用 QR Code 快速產生Wifi network 設定資料

一秒內連上無線基地台,使用 QR Code 快速產生Wifi network 設定資料
所需要的工具
QR Code Generator
http://zxing.appspot.com/generator/
很簡單


到這網站
先選Contents為 Wifi network
SSID就填你的無線AP的SSID
Password就是無顯的Password
Network Type就選你的安全模式
再點Generate
再點Download


Download之後
把他印在會議室門口
或是需要用到無線連接的地方
只要用QR Scan工具
您就可以不需要告訴客人設定資料
一秒馬上連上無線網路
要更改
只要換QR Code的條碼就好了
是不是很方便啊 ^^

2014年10月26日 星期日

[Dreamweaver教學] 網站PHP檔案UTF-8編碼或不明的空格問題(解決:設定BOM)

一般我們在寫網頁程時,網站PHP檔案普遍會採用UTF-8編碼,但常常遇到編碼為UTF-8後還是會因不明原因出現「????亂碼」。或是將檔案丟到伺服器後,畫面會出現不明的「空格」。如果你是Dreamweaver使用者,只要依下列設定將BOM檔頭去除,即可解決這個問題。
1. 到Dreamweaver > 修改> 頁面屬性
dreamweaver

2.在「標題/編碼方式」(快速鍵:Ctrl+J),去除「包含Unicode簽名(BOM)」選項勾選即可。
3. 完成。

至於為什麼要去除「包含Unicode簽名(BOM)」,網路上的網友對這部份有清楚的說明,就請大家自行參考囉。

參考網頁:
关于bom以及utf-8的问题Dreamweaver中除去BOM的方法
http://hi.baidu.com/383215209/item/f4e95d76ae15fd2cd7a89cf5


Read more: http://www.cadiis.com.tw/lessons-learned/291-dreamweaver-utf8-code#ixzz3HGXjO7QL

2014年10月25日 星期六

Nokia走入歷史! 新品牌改名「微軟Lumia」

「Nokia」(諾基亞)的粉絲要傷心了!微軟公司24日正式宣布,將「Microsoft Lumia」取代「Nokia Lumia」品牌,往後Lumia系列手機將以新名稱與大眾見面。
微軟公司於今年四月份正式宣布完成併購諾基亞行動通訊部門業務後,曾於22日向媒體表示,未來一個月內,「Nokia」及「Windows Phone」品牌將進行更名,「Nokia Lumia」手機計畫改為「Microsoft Lumia」;據《每日郵報》報導,「Nokia」昨日於官方網站中發布文章,證實這項消息,最新的Lumia830與Lumia730/735將成為「Nokia Lumia」品牌的末代手機。
對此,微軟手機市場行銷部門資深副總圖拉(Tuula Rytilä)表示,目前改名過程已經進行中,未來系列產品、通路等都會陸續更名,至於「Lumia」的現有產品會繼續銷售,低階非智慧型手機也會以「Nokia」品牌繼續販賣。