我們的網站基本上已經掛上去使用也沒有什麼大問題了
不過中心小姐還是希望可以增加一些功能
於是她就問了我能不能做一個"連絡我們"的表單
就是很像留言板那樣，不過是寄到我們的信箱
大概是長這個樣子的↓
https://contest.bhuntr.com/tw/chinese.characters.design/contact
於是我就試試看了
google後的結果發現
其實網路上真的有人問這個問題
發現這個需要有支援php的平台 + SMTP 伺服器(port 25)才可以有的功能
幸好我記得計算機中心開放給我們的平台是有支援php且編碼是UTF-8
如果沒有就要請他們架才行，要怎麼架php我就懶得講了……
以前也是有不好的回憶=_=’’
如果真要說困難點大概就在於編碼吧
一定要記得把自己的環境編碼設成UTF-8
首先我真的找到了範例
http://www.freecontactform.com/email_form.php
這個範例真的非常完整
在Basic website form HTML的部分
除了一個地方有小瑕疵
第23行<td valign="top""> 要改成 <td valign="top">
在The PHP Code which captures and Emails your website form的部分
只要改兩個地方
你的Email(第9行)跟信件標題(第11行)
檔名記得要改成send_form_email.php 不然就是記得要跟上面的HTML第1行對應
然後很快的我就收到了測試信
對初學者而言
這個程式碼真是簡單又明瞭阿
後來我就將程式碼改成我需要的樣子
但是果然如上一篇所說
事情......總是不會那麼順利……=”=
雖然這個程式碼直接就可以用了
但是畢竟是國外的網站提供的範例
基本上根本不會考慮到中文的問題
第75行 $string_exp = "/^[A-Za-z .'-]+$/";
這個東西是正規表達式(Regular Expression)
配合下面的preg_match
這個程式只能輸入英文
Orz|||
因為我還不是很懂正規表達式
所以我先把這個拿掉變成$string_exp = "//"
但是打中文寄信還是會變成亂碼
我做了測試
這個程式碼在網頁處理後執行出來的結果是沒有問題的
但是寄信到信箱就會有問題了
因此
問題還是出在程式碼上面
那麼這次我就好好的研究程式碼
其實這個php程式碼主要是用它的寄信函式mail()寄信
所以問題有可能是出在這個函式身上
幸好最後還是讓我找到原因了
https://phpclass.wordpress.com/2009/06/18/php-mail-%E5%AF%84%E4%BF%A1%E4%BA%82%E7%A2%BC%E5%95%8F%E9%A1%8C/
一開始我有找到一個語法，上面的網頁也有說到
Encoded-word 編碼方式
=?<字集>?<編碼方式>?<編碼內容>?=
主要設定在 寄件者或主旨有出現中文字的地方
e.g.
"=?UTF8?B?".base64_encode(中文)."?="
在中文處打上要顯示的中文就好
夾帶有中文的變數也沒問題
e.g.
$Name="中文";
"=?UTF8?B?".base64_encode($Name)."?="
但是我並沒有這個的問題
那這個程式碼問題在哪呢?
這網頁裡面有說到原因如下:
等到我們收到剛才寄出的信後，才發現中文部份全是亂碼！為什麼呢？因為我們沒有設定寄出的信件編碼為 utf-8
在我們原本的程式碼裡面我們是使用純文字的方式寄信的
如果想要把內容編碼為UTF-8
我們就要把信件內容變成網頁格式才行
而裡面也有說到:
解決的方式則是在 檔頭($headers) 裡設定編碼方式
內容的編碼方式
Content-Type: text/html; charset=utf-8\r\n
Content-Transfer-Encoding:8bit\n\r
以上兩行為設定信件內容的編碼方式，其中 \r\n 為換行的意思，如同 HTML 裡的 <br>
所以我將php程式修改如下↓
// create email headers
$headers = "Content-type: text/html; charset=UTF-8\r\n";
$headers .= 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
其中程式碼裡面的"."有"+"的意思
所以可以把變數字串全部都串起來
而".="就是接在該變數的後面而不是取代的意思
這樣修改之後
終於解決了內容亂碼的問題
可是因為信件內容變成了網頁模式
所以內容的換行也必須變成<br>才行
可是在<textarea>裡面所打的內容在寄信的時候換行符號會被吃掉
所以必須解決這個問題↓
http://blog.allenchou.cc/php-textarea-return/
原來
PHP有個內建函數叫做 nl2br
它可以把內容的換行符號全都變成<br>
所以我又把程式碼修改如下:
$email_subject = $_POST['email_subject']; // required
$first_name = $_POST['first_name']; // required
$last_name = $_POST['last_name']; // required
$email_from = $_POST['email']; // required
//nl2br 可以自動把換行換成<br>
$comments = nl2br($_POST['comments']); // required
判斷式後
$email_message = "<p>Form details below.</p>"; //加上<p>換行
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
//加上<br>換行
$email_message .= "Subject: ".clean_string($email_subject)."<br>";
$email_message .= "First Name: ".clean_string($first_name)."<br>";
$email_message .= "Last Name: ".clean_string($last_name)."<br>";
$email_message .= "Email: ".clean_string($email_from)."<br>";
$email_message .= "<p>Comments: </p>".clean_string($comments)."<br>";
這樣改寫之後
我們信件內容不再只有一行了
信件內容也修改好之後
終於要處理最難處理的地方──正規表達式(Regular Expression)
我阿
是
真的
看不懂=”=
其實
我是真的完全看不懂阿
所以貼上去沒有作用也是完全不知道為什麼
最後
我決定還是重新去認識這些符號代表什麼意思
可是我最後還是沒有全部搞懂
>”<
http://www.ksana.tw/productivity/RegularExpressionTutorialVer350.pdf
沒想到網路上還有講義可以看↑
整理了一些學會的東西
不過這個東西都可以出一本書了
我的筆記絕對寫得很不專業拉XD
1.Regular Expression (正則表達式or REGEXP)是一種表示法(語言)，主要是用來做字串的比對、刪除、替換或拷貝重製等工作。它可以表示特定的字串族群，也就是一種集合的表示法。
2.想要學會怎麼寫，就必須先知道字的分類，就是認識字元族(Character class)
3. "["和"]"就是在REGEXP搜尋指令中使用的特用字元(metacharacter)。把一群字元放入[ ]之中，就可以定義一個臨時的集合，我們也可以說是一個臨時的沒有名字的「字元族」。
4. 補字元族(Negated Character Classes) [^ ]，補集合就是「除了後面的字元族外的全部都算」，所以如果只有[^ ]所表示的意思就是所有字元(因為^後面沒有東西，沒有東西的補集合就是所有東西囉)。
5.符號|在正規表達式也是or的效果
然後…然後…老實說這就是目前的極限了
因為我還是搞不懂中文的表示法
就算上面有寫說這個字族裡有中文
我還是沒辦法輸入中文
最後這是我寫的樣子……
$string_exp = "/[^x00-xff]|^[A-Za-z .\'-]+$/";
這樣的寫法就是中文，英文，數字還有符號都可以
如果只有純數字也不行
因為這樣其實就可以了
所以……就這樣了拉>”<!!!!!!
(躲)
功能齊全了之後剩下來的就是美化了
因為範例網頁的表單樣式有半透明的效果
所以我也跟著模仿
首先是CSS要怎麼寫
因為我們製作表單所用的html語法是<input>
<input>裡面的type有很多種屬性
沒辦法直接就input{}這樣寫
所以能不能針對type的類型個別去寫CSS呢???
裡面有說到:
CSS的定義中，有selector的定義，可以幫助我們完成這個工作。
因為文章是2008年的文章
所以我想現在的瀏覽器應該都支援這個寫法了
這個網頁還有教其他種CSS Attribute Selectors的寫法
http://www.w3schools.com/css/css_attribute_selectors.asp
結合這兩個網頁
CSS是這樣子寫的:
CSS [attribute=value] Selector
雖然是2005年很舊的文章，不過還是可以用呢
主要是這三行:
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
基本上就是加上這三行才能讓各瀏覽器通用
所以我的CSS最後寫得像這樣:
input[type="text"] {
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
input[type="submit"] {
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
border-style:solid;
border-color:#900;
border-width:1px;
padding:3px;
}
最後的成品長這樣
按了送出之後
收到的信是長這樣
這次的經驗讓我學會了最簡單的靜態網頁還有一點點php
我覺得還蠻開心的
希望之後可以挑戰資料庫......>_<!!!
留言列表
