2015年3月15日 星期日

[教學] PHP & MySQL 學習筆記 第四堂(表單製作;回圈建立;訂單、問卷的製作與儲存)


第四堂課,我們要來練習製作一個貨品的訂購表單,什麼是訂購表單呢?也就是透過網路就可以下單,選擇你要購買的物品、出貨地點和數量;另外表單也可以用來製作問卷。
可以玩玩看這次的成果喔:

本堂課會學到的語法包含:
for(起始值;結束值;設定){ }:回圈使用
$_POST[ ]:讀取透過post傳輸的資料
fopen(檔案名稱,開啟模式):開啟檔案,可分為awr
fwrite(檔案名稱,寫入內容):寫入檔案
fclose(檔案名稱):關閉檔案

在這堂課開始前,我們要說明怎麼樣可以直接在DW裡面預覽我們的網頁,上次我們的方法是開啟Chrome,接著輸入我們虛擬伺服器的網址,其實我們可以把我們虛擬伺服器的網址內建在DW中,方法如下:

首先開啟DreamWeaver

接著按照以下步驟開始設定



最後,開啟一個之前寫好的php檔,然後按上方的地球,點選「預覽於chrome」,我們就可以測試看看設定有沒有成功

如果成功的話,會直接開啟我們檔案的連結。

訂購表單製作

建立訂購表單畫面

首先,開啟一個php檔,這裡我們把檔名取做p4
接著進到「設計」欄位
點選上方的「表單」,然後點最左邊的選項來建立表單
接著在表單裡面輸入我們欲收集的項目
在姓名、電話、和地址的後方,我們要新增文字欄位
這個地方可以直接取消即可

文字欄位建立好後,救會長像這樣
在箱數的地方,我們想要建立選單,然訂購人用選的,而不是自己輸入的。
建立好後的選單長這樣,這時候選單裡面還是沒有值的
我們點一下選單,接這按最下方的「清單值」

這時候為跳出一個表單可以輸入,這裡「項目標籤」指的是填表單的人看到的值;「值」的地方則是電腦記錄的內容。在這個例子中,項目標籤和值是一樣的,因為選一箱,就是1。

選單的程式碼長這樣

選單的網頁就是長這樣
點選「文字選項」後,一樣可以到最下方編輯一些細項,像是文字的長度、字元數等等。

最後要設計一個「按扭」,讓對方可以提交表單
按鈕設計好後會長這樣

讓我們來看一下這個網頁的程式碼是長什麼樣子吧。首先,我們可以看到每個項目都包含有name和id。其中,name是給後端語言去判讀的(像是這裡學的php),id則是給前端語言去判讀的(像CSS、jQery)。

這裡我把name都改成熟悉的名字,之後讓php去判讀。id的地方因為我們用不到,就不再去做修改。


回圈的使用

上方我們建立了一個下拉式選單,讓客戶可以選擇要訂的箱數,可是我們只建立了1-3,如果我們今天有大量貨源,希望客戶可以一次訂購許多的貨物(例如:30箱)時,我們可以怎麼做呢?

除了利用複製,重複貼上一次又一次的程式碼外,我們可以直接利用回圈的形式,怎麼用呢?

首先,一樣要利用我們的起手勢,輸入,裡面放入echo,外面用雙引號把要輸入的東西圈起來;接著就可以把裡面的雙引號拿掉

php裡面,回圈的寫法要利用for(){},for(起始值;結束值;設定){內容}


這裡我們用$建立一個變數叫i,i的起始值是1,結束值是小於等於30,i++則是指每次加1。接著我們把echo裡面原本的文字改成變數「$i」,這時候這段語法就會跑30次。

利用回圈,我們就可以在短短的程式碼中,建立一個1~30的下拉式選單了!

建立訂單資訊頁面


接著,我們要來建立資訊訂單的頁面,這一頁的目的是讓訂購的人,可以看到他填寫的訂單訊息,進一步可以確認訊息填寫沒有錯誤。

我們先開啟一個新的php檔,叫做p4-2。

同樣利用設計,將網頁設計好

接著,我們要先回到p4(表單建立)的頁面,點選整個表單,然後點選下方的資料夾圖示

選擇我們要將資料回傳到p4-1.php這個資料檔

這時候我們可以看到我們的程式碼多了一些東西。簡單說明一下。
這裡我們利用的是post這個方法(post一定要小寫)傳輸資料,當網友按下傳送時,會把資料傳至p4-1.php這個資料檔中。(關於post可以見更多的參考資料;另外種是用上堂課教的GET這裡有簡單比較這兩種的差別,GET會顯示在網址上且資料傳輸量較小,POST不會顯示在網址上,可傳輸的資料檔較大)。

接著,我們要回訂單資訊的頁面(p4-1),這裡我們又要用到PHP的指令,我希望把剛剛透過POST方法傳輸的資料呈現出來,因此我用了echo,並且使用了$_POST,針對name這個變項。


把同樣的指令,改成讀取不同的變項。

趕快來預覽看看吧!這時候會出現剛剛製作好的表單(p4),輸入好後按下送出。
成功的話,網站上就會呈現你的訂單資訊了喔!
由於我們寫的語法相當簡單,如果有人亂填或漏填,我們都不會記錄到,它即使沒填,也可以提交,這點可能會令我們感到有些苦惱,為了要防堵這樣的情形,一般我們要利用到前端語法,可是我們這門課沒有學前端語法怎麼辦呢?這時候,可以用馬老師寫的一個DW套件,安裝後,在DW的「常用」裡面就會多一個勾勾的方框

點選方框後,就能根據不同的項目去做更進一步的設定了。

儲存訂單資訊頁面


最後,我們要學習把訂單資訊存起來,總不能只是讓網友看到他填的表單資訊,可是卻沒有把它填寫的資料存起來吧!

這裡,我們要練習把資料儲存成記事本檔(.txt)。

首先,建立一個記事本檔,叫做p4-2.txt。

這時候我們回到剛剛的p4-1,為了之後儲存資料的方便,我們把我們剛剛讀取的資料利用$都變成一個變數,並寫在整個網頁的最上方。

原本寫在網頁中的內容,就可以用變數取代了

接著我們要來寫一段程式碼,請他幫我們把剛剛透過POST傳送的資料儲存起來,這裡會用到「打開(OPEN)」、「寫入(WRITE)」和「關閉(CLOSE)」這三個指令。

在PHP中使用這三個指令中,需要在前面加上f,所以完整的語法是
fopen(檔案名稱,開啟模式),開啟模式說明簡單可以分成awr這三種,可點入看更多說明。
fwrite(檔案名稱,寫入內容)
fclose(檔案名稱)

填入正確的語法,這裡在open的地方,我要請它打開剛剛建立的p4-2.txt這個檔案,接著,我要請它用寫入原檔(a)的方式;如果用覆蓋(w)的話,則每次有一個人填完之後,前一筆訂單就不見了;唯讀(r)的話更不可能寫入檔案。

寫好後存檔,一樣打開一開始寫的p4.php這個檔案,填入表單後,我們一樣會在p4-1看到我們甜的訂單資訊,這時候回到DW,會跳出一個警告視窗,它告訴我們,我們的p4-2.txt被修改了(我們把資料存進來了),要不要重新載入,按下「是」。

這時候,你就會在p4-2的txt檔中,看到你剛剛填寫的資料嘍。

但是,你會發現一個小問題,就是當有許多人輸入資料後,資料不會自己換行,而是一直寫在後面耶!

要解決這樣的問題,只要在最後加上\r\n,就可以了,這是告訴記事本的檔案說,請幫我換行的意思。

再重新輸入一次資料,是不是就自動換好行了呢?

最後,也可以在fwrite裡面打更詳細的資訊,但要記得不能使用全形,不然資料讀取會出問題

是不是變得更精美了呢?

老師說,業界在做的時候,並不會讓出貨的工讀生去打開txt這個檔案,因為要是工讀生不小心把檔案刪掉就慘了,因此會建立另一個HTML檔,工讀生就打開這個html檔就好,不會刪到原本的記事本檔。(google到一篇用JavaScript寫的語法,可以在html中讀取txt檔,可以參考看看

然我們來看看我們這次完成的成果吧!


以上內容均為本人在馬老師雲端研究室學習所整理之筆記
Share:

0 意見:

張貼留言