2012年6月18日 星期一

note :PEAR的Calendar練習

*沒甚麼用意純粹貼程式碼上來而已,怕哪一天會用到
http://pear.php.net/package/Calendar套件下載網址

calendar.php
利用calendar顯示前一天與後一天
<?php
//從PEAR網站下載Calendar套件 http://pear.php.net/package/Calendar ,放到網站目錄裡 
//這裡只匯入Day跟Minute
require_once('C:\AppServ\www\pear_pd\Calendar-0.5.5\Day.php');
require_once('C:\AppServ\www\pear_pd\Calendar-0.5.5\Minute.php');

$Day = new Calendar_Day(2012,6,18);
$Min = new Calendar_Minute(2012,6,18,12,22);

//取得日期的時間數字
echo $Day->thisDay();   //顯示18
echo $Day->thisYear();  //顯示2012
echo "
";

//呼叫thisXXX()可加上true參數  此方法相當於mktime()
echo $Day->thisHour(true); 



//this方法還有顯示上一" "或是下一" " 分別為prevXXX() 跟nextXXX()
$Day2 = new Calendar_Day(2012,6,18);
$prevDay = $Day2->PrevDay();
echo "
昨天是".$prevDay."號";

$nextDay = $Day2->nextDay();
echo "
明天是".$nextDay."號";


?>
顯示結果 :

182012
1339977600
昨天是17號
明天是19號

calendar2.php
利用calendar做日期的驗證,檢查日期的正確性
<?
header("Content-Type:text/html;charset=UTF-8");
/*calendar也可以用來驗證表單有關於日期的資料
 需使用isValid()來驗證,結果為true或false
 若結果為false可以只用adjust()來調整
*/
if(isset($_POST))
{
 require_once('C:\AppServ\www\pear_pd\Calendar-0.5.5\Day.php');
 $day = new Calendar_Day($_POST['year'],$_POST['month'],$_POST['day']);
 //檢查
 if($day->isValid())
 {
  echo "正確日期";
 }
 else
 {
  $validator = & $day->getValidator(); //取得驗證物件
  $error = $validator->fetch();
  echo $error->getMessage();           //取得錯誤的訊息
  
  $day->adjust();
  //echo "調整後日期:".$day->thisDay();
  echo "
調整後日期:".$day->thisYear()."年".$day->thisMonth()."月".$day->thisDay()."日";
 
 }
}
?>
<html>
<head>
<title>日期驗證</title>
</head>
<body>
<form name="form1" id="form1" method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>">
請輸入您的出生年月日<br/>
<input type="text" name="year" id="year" size="5">年 
<input type="text" name="month" id="month" size="2">月 
<input type="text" name="day" id="day" size="2">日
<br/>
<input type="submit" value="驗證日期"/>
</form>
</body>
</html>

顯示結果:
若日期是正確的
如果錯誤



怎麼在Outlook 2010收到自己gmail信箱的信

晚上突然心血來潮想要試試看怎麼設定outlook
畢竟outlook雖然在念書的時候很少用,但是在商業使用上好像很有他的市場,
感覺是不能不會的一環
因為也才來試試看
話說去年學校也有辦過outlook的研習,請一個微軟MVP的講師來介紹
不過由於時間的關係,也只是大概地介紹一下,回去後我只學會怎麼設定hotmail的連接而已
那時候還沒有嘗試去設定gmail
其實我還蠻喜歡Outlook的管理介面,而且有些功能的確很方便
只是還在念書的我沒甚麼機會弄到。
好吧~
首先最簡單的方式就是參考google的設定教學

第一個步驟是最重要的步驟,首先呢,請先到自己的gmail
在您的 Gmail 帳戶中啟用 POP。設定完成時請記得按一下 [儲存變更]。
此步驟極為重要。

再來請打開你的outlook

接著照著設定
下一步~

請按是

這個部分選手動就可以了,因為最後還是會到手動的畫面。然後下一步

選擇網際網路電子郵件,然後下一步


這個步驟可就容易出錯了,左邊的訊息請填入一樣的資訊
但是你的名稱.郵件地址 使用者名稱 跟密碼會跟我不一樣
伺服器資訊請選POP3
內送  pop.gmail.com
外送 smtp.gmail.com
(這些設定都是有原因的請看
填完左邊資訊後請按右邊其他設定


其他設定請先切換"外寄伺服器"的頁籤
勾選跟我一樣的設定

接著切換到"進階"頁籤

上面的設定都要一模一樣
記住POP3要勾選加密連線SSL
外送伺服器加密類型選擇TLS 587

設定完後請按確定,接著在繼續點選下一步

按下下一步之後也就會開始測試帳戶設定,都顯示"已完成"之後就會自動開啟outlook




接著點選左方你的信箱後,就會開始慢慢更新你的信箱內容


使用PHPMailer

今天稍微一看了一下有關PEAR的書
聽說這個挺紅的,所以就研究了一下
PEAR的全名是PHP Extension and Application Repository
PEAR不知道能不能說是一種PHP的套件,一種package的概念,簡單來說只要匯入或是安裝,然後知道怎麼使用,可以減少很多開發的時間,
PEAR的特色就是它是一種物件導向的寫法
所有的套件都是以類別的形式使用
關於Mail這種寄信的PEAR,他能夠做到的比PHP的mail()函式多很多,所以才會這麼的有名氣。最需要安裝的就是Mail跟Mail_Mime
如果需要下載請前往 http://pear.php.net/
Mail 主要提供寄信的功能
Mail_Mime 可以讓郵件包含附件檔案. 使用HTML格式

如果是使用appserv的安裝環境,安裝PEAR蠻方便的,
安裝說明請看

至於如何使用MAIL,埃,這個我試了很多次,目前還沒有成功
我是使用gmail的SMTP
總是出現這樣的錯誤:
Failed to connect to ssl://smtp.gmail.com:465 [SMTP: Failed to connect socket: Unable to find the socket transport "ssl" - did you forget to enable it when you configured PHP? (code: -1, response: )]

但是呢,如果錯誤跟我一樣的人,是因為我沒有去設定php.ini有關openssl的設定
要將C:\下WINDOWS的 php.ini 中的  extension=php_openssl.dll 前面的分號(;)拿掉
啟動他才可以,雖然我啟動他了,但是還是沒有寄成功
後來改式phpMailer,卻成功了,我也很費解呢...
如果是使用phpMailer的話請看這邊教學
這篇教學我一試就成功
但是如果跟我一樣寄出去有亂碼的問題
可以將約略第10行的地方改成
$mail->CharSet = "UTF-8";

另外補充有關gmail的SMTP與POP3的設定說明 :

2012年6月12日 星期二

fancybox如何使用

fancybox如何使用
首先請先到官網下載fancybox的壓縮檔
http://fancybox.net/
下載rar壓縮檔到你的網站目錄底下,
比方說我的網站叫做myweb,而這個壓縮檔就要放在myweb裡面
然後呢,將他解壓縮,只留下文件檔就好
接著打開這個jquery.fancybox-1.3.4資料夾 :

可以看到裡面有很多檔案
index.html 就是示範檔,點開後可以看到很多範例

可以看到總共有12張小圖,然後還有下面的範例,我們只需要留一種範例就可以知道其他的原理了,首先先以notepad++開啟index.html編輯這個檔案,我們刪掉<body>與</body>之間其他語法,只留下
<a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>

另外<script type="javascript">與</script>之間只留下
<script type="text/javascript">
        $(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });
</script>

修改完後的html檔如:
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>FancyBox 1.3.4 | Demonstration</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
     <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
        $(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });
    </script>
</head>
<body>
        <a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
</body>
</html>

修改完後按下存檔在瀏覽一次,這時候只會剩一張圖片跟一種特效,

所以,一張圖片之所以可以套用的facnybox的原因有很2種:

第一,在<head>標籤裡要嵌入fancybox的css檔案與javascript檔案
這幾個是必遷入的
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
第一個是jquery的套件
第二個是mouseweel效果的javascript套件
第三個是這個fancybox的效果套件
第四個是fancybox的css檔

第二,要套用效果的圖片要有<a id="一個名稱">
如這張圖是  <a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
他的id是example4,那麼相對應的<script></script>標籤裡面也一定要有jquery去選取這個$example4,然後設定他的效果。
像這個範例中就是example4
$(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });

至於需要的甚麼樣的效果,或者是跳出來的長寬多少想要自己設定,網站上或是原本其他的example都多多少少可以看出他的設定方式,可以看他的api設定方式 http://fancybox.net/api



CKeditor的使用方式

今天在家裡弄進階網頁設計課專題的時候突然想到,我還沒有用過ckeditor編輯器!
然後就翻了一下工具書,發現書已經有點年紀了,好像有點搭不上,後來上網爬文,
找到了一篇非常棒的教學。
ckeditor真的是非常好用的套件,大概只要設定一下config設定檔,增加新資料夾叫做upload,然後在需要加入ckeditor的頁面加入javascript的匯入語法,需要變換為ckeditor的textarea標籤加入class="ckeditor"就可以了。比較需要注意的是路徑上的問題,這個我有被困擾到= =

教學可以看這篇  PHP頁面中-CKeditor網頁編輯器與CKfinder上傳整合應用

另外ckeditor跟ckfinder通常會搭配使用,步驟一樣簡單,為了讓使用者有更好的使用經驗,當然是可以的話都用了~

CKeditor下載 

CKfinder下載

2012年6月9日 星期六

假超連結的作法

這是這禮拜上進階網頁設計做的筆記,
談到假超連結的做法,我覺得老師教的這個觀念,很不錯,我好喜歡這個小技巧。
假超連結就是<a href="#">項目一..</a>
通常是希望該文字具有超連結的效果,可是並不希望他真的連結出去
做假超連結有個好處,
他跟一般超連結有個優點都是會出現一個手型的圖案暗示使用者去點按它
假超連結的作法有兩種:
1. 使用#
<a href="#">超連結第一種</a>

2.使用javascript
<a href="javascript:;">超連結第二種</a>


兩者的差別在於,使用#號的方始,當使用者按下之後會使網頁跳到畫面的最上方
而javascript卻不會有跳動的情況 

如何查詢自己的IP位置

開始==>執行==>輸入CMD==>再輸入ipconfig


2012年6月7日 星期四

小 winwin 飲料店之畫面設計

今天晚上原本要來弄一個小練習,所以下午就很興奮地,畫了一個簡陋版型,
原本只打算做"我要訂飲料"的頁面部分,後來晚上去參加送舊舞會就... 沒把他弄完了
所以只能有機會再來弄了...

首頁畫面:
主要分為四個超連結
分別是菜單(飲料的list),然後 我要訂飲料就是這次練習的表單主要的功能,在來是訂單查詢,在訂飲料的表單中會讓使用者輸入基本資料,其中姓名與電話為登入的主要資訊,再來是QnA


這個是訂單的畫面,上方為使用者輸入基本資訊,下方為訂購表單,
訂購表單分別為品名數量甜度與冰塊,品名由資料庫取出飲料的名稱,作為下拉選單。
接著送出後到下一頁。



這一頁為訂購成功後的畫面,如果可以的話比較喜歡以jquery的套件做彈跳式的畫面出現,
個人比較喜歡這種質感xdd,所以才設計這樣的DEMO畫面。

測試SyntaxHighlighter

  alert('hello syntax');
測試SyntaxHighlighter
我也想要在部落格貼上一行一行的程式碼
所以去網路找了一下這個方法
教學請看這篇: [BH] 幫 Blogger 加上 "SyntaxHighlighter" 的功能
SyntaxHighlighter網站
FORMAT MY SOURCE CODE FOR BLOGGING  ->這個網站很好用,可以幫你轉javascript語法
注意貼上語法時要避開< > 這兩個符號,要用「&lt;」和「&gt;」替代。

[補充@20130107] http://codeformatter.blogspot.tw/ 這個網站也是轉換程式碼的格式可以發佈在blogger,也是非常好用!

note:習題練習-數字轉中文數字輸出

這個題目是來自於一本工具書裡的題目(最新PHP+MYSQL+AJAX網頁程式設計)
題目的要求是要讓使用者輸入3位數(數字),然後要將這三位數字轉成中文的寫法
比方說: 123,要讓他輸出成 壹百貳十叁
還滿趣的,就試了一下,稍微有練習到字串的處理(心想乾脆一天一題好了...= = )
我的寫法很low,超級初學的寫法,不過這不是重點xd
我把這個練習拆成兩個頁面,分別是page1跟page2
page1是一個表單,讓使用者輸入數字,送出後到page2
page2必須判斷這個欄位的值使否是三位數,若不是就要回到page1
這個練習做的還不算完整,因為我沒有去去除不良標籤,也沒有去驗證是英文或是中文就不能送出。


page1 :
請輸入任何3位數字 :


page2:


<?php
header('Content-type:text/html;charset=utf-8');
echo "您所輸入的數字是 : ".$_POST['number'];


/*使用 substr()傳回部分字串,將傳來的值指定給$a*/

$a = $_POST['number'];
//strlen()先計算使用者是否真的輸入三位數
if(strlen($a)== 3)
{
 $first =  substr($a,0,1);   //第1個值
 $second = substr($a,-2,1);  //第2個值
 $third = substr($a,-1);     //第3個值
 //echo $first.$second.$third;
 echo "
以下為轉換結果:
"; //先檢查第一個位數 switch($first){ case '0': break; case '1': echo "壹百"; break; case '2': echo "貳百"; break; case '3': echo "參百"; break; case '4': echo "肆百"; break; case '5': echo "伍百"; break; case '6': echo "陸百"; break; case '7': echo "柒百"; break; case '8': echo "捌百"; break; case '9': echo "玖百"; break; } //檢查第二位數 switch($second){ case '0': echo "零"; break; case '1': echo "壹拾"; break; case '2': echo "貳拾"; break; case '3': echo "參拾"; break; case '4': echo "肆拾"; break; case '5': echo "伍拾"; break; case '6': echo "陸拾"; break; case '7': echo "柒拾"; break; case '8': echo "捌拾"; break; case '9': echo "玖拾"; break; } //檢查第三位數 switch($third){ case '0': //echo "零"; break; case '1': echo "壹"; break; case '2': echo "貳"; break; case '3': echo "參"; break; case '4': echo "肆"; break; case '5': echo "伍"; break; case '6': echo "陸"; break; case '7': echo "柒"; break; case '8': echo "捌"; break; case '9': echo "玖"; break; } } else { ?>
<script>
        alert("很抱歉,您輸入的數字不是三位數");
        location.href="page1.php";
    </script>
<?
}
?>


2012年6月5日 星期二

note : foreach改用for迴圈的寫法


比方有個購物車的後台可以設定產品項目的大分類,
我們可以將分類的名稱存成一個array,然後foreach出來(搭配ul及li標籤)PS:下面的筆記是屬於沒有從資料庫撈資料的做法


foreach寫法
<?php
     //先假設有哪幾個大分類項目 , 然後存進陣列$menu裡
     $menu = array('3C產品','時尚家居','智慧型手機','流行服飾');
?>
<ul> 
<?php
     foreach($menu as $item){    
echo '<li>'.$item.'</li>';
    }
?>
</ul>
使用變數$item來存取每個陣列元素,變數$item沒有規定一定要叫$itme,通常教科書都寫$value 。 因為範例都會這樣寫 foreach(陣列變數 as $value);



將foreach改成for的寫法
如果要將foreach寫成for的方式的話,差別在於要加一個count()函式,計算這個陣列有幾個元素,然後把這個值(陣列有幾個元素)存在一個變數裡。

<?php
$menu = array('3C產品','時尚家居','智慧型手機','流行服飾');
?>
<ul>
<?
$item_num = count($menu);  
//count()可以計算這個陣列有幾個元素
for($i=0;$i<$item_num;$i++)
{
echo '<li>'.$menu[$i].'</li>';
}
?>
</ul>

PHP Framework 的種類

最近一直瘋狂的看一些有關php framework的文章,主要是想要學習使用MVC架構,沒想到越爬越複雜,原本只看到網路上有介紹的少數framework,沒想到越爬越多,實在很驚人吶!

自從看了自由軟體鑄造廠放在youtube的CI教學影片之後理解了很多。
我覺得我應該要學習framewrok的理由,(不是說一定),而是從過去一直學習製作客製化的後台方式,的確很沒效率,更讓我心有戚戚焉的就是,沒錯! 什麼html javascript css 跟php全部雜亂無章的寫在同一個頁面實在很讓人受不了,後面維護的人更難維護,你不砍掉重練長輩還覺得是你能力不好,他可能會覺得"你應該要看懂",問題是耗很多時間在研究前人寫的code,說實在不是不好,多看看別人的code對學習者來說實在很棒,但是相對也只是浪費進行案子的速度而已,如果上位者堅持是下面的人應該要自己主動學習看他的code,那也只能當作一種學習了,只是相對的要付出做專案的時間而已。



首先介紹幾個主要的PHP framework:
目前就我知道的就是
Zend Framework.codeigniter.cakePHP. symfony  還有很多很多~

http://framework.zend.com/
這是Zend Framework的網站
Zend Framework是我在看那本冊徹底研究dw與PHP那本書時所接觸的到的,恩....以初學的角度來說,看那本書看得的確有點受挫,我在閱讀的時候很容易有銜接不上的問題發生,因為設定上有點....,一點點麻煩,但又聽說功能非常強大,功能要強大資料當然也多,下載下來解壓縮後一大堆資料看了真的很傻眼,不過在台灣算是蠻多人用的了吧


這是symfony

這是cakePHP
cakePHP我之前都沒有聽過,也很少聽到有人在用,上個月去一家台北公司面試的時候,他們竟然是用cakePHP,那也蠻厲害的,我聽說這套比較難入手... 


CI是我目前主攻的學習目標,因為他好學,而且是中文版的網站,使用手冊也是中文
由於他的設定方式比較簡單,我覺得比較適合初學的我xd
CI在台灣的推廣實在要很感謝wu-boy先生,自從我這幾天開始學ci以來,所看到的文章甚至教學影片都有他的影子,實在是受益良多
中文版討論區可以連到 : http://www.codeigniter.org.tw/forum/index.php


剛入手MVC最大的障礙
說到這個,以我這個PHP的初學者來說最大的障礙就是物件導向了吧
不管是做專題,還是工讀時所碰到的案子,都是SQL語法下一下,include其他頁面
if else判斷下一下 foreach一下資料,很少碰到物件導向
現在我覺得學ci很大的好處就是逼自己去看那些以前討厭的物件導向
會進步很快....

結論
其實我覺得當PHP學到一個沸點的時候
我的沸點是指post跟get熟透,然後會撈資料,到最後你怎麼樣也都是在做這些重複的事情
到最後有點膩了,好像沒甚麼挑戰性.....
那麼...像我的話就會想要碰一下MVC架構的framework
雖然我的物件導向都不是很熟,但是這是我想到的唯一可以讓自己有更大的進步空間的方式
要讓自己常常會有那種 "原來還可以這樣寫!"的感覺,很棒! 對我來說學習的重點在於樂在其中xdd

Adobe CS6出來了!


Adobe CS6已經出來了!
不過..我還沒試過 有點傻眼  5.5的dw我都還沒摸熟 6就出來了...
有興趣的話就先去下載試用版吧

2012年6月4日 星期一

載入css的方式

在過去,沒有css之前,設計師通常以<table>標籤將版面排的整齊,但W3C並不這麼建議,
使用css有很多好處,我自己喜歡將css與html結構分離,讓html檔看起來乾淨 .  整齊。也方便維護,(唯一我害怕的是css被寫得雜亂無章),table標籤也越來越少用了,即便是表單的排版,都能盡量不要用table就不要,table本身在設計表單要設定的屬性已經夠多了,再加個<form>標籤,然後再設定每個tr或是td的屬性,再加上各種input標籤,非常容易眼花,非常可怕,所以我也一直在邁向table-less的方向努力...


  • 載入css的方式約略可分三種:


1.從外部載入的方式  
也就是在<head>標籤裡下<link>標籤把css匯入
這種方式又稱為"外部css樣式表"(External CSS)


<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />


2.第二種是寫在該頁面的裡的css
這種方式只要把css語法放在該頁的<script>標籤就可以了,但是這種方式比較不建議
這種方式又稱為行內樣式(inline style)
因為我很少用這種方法還真的找不到甚麼範例
<script type="text/css">
a{color: red;}
a:hove{ color:yellow;}
</script>
假如你是使用行內樣式,那麼a跟a:hover的變色只會在你有加這段<script>標籤的頁面才有效果
所以之所以覺得不建議的原因是因為,維護上很麻煩
當你要換顏色時,每一頁有script的部分都要修改,那不如使用連外的方式使用一個css檔
當你想換顏色只要修改那個css改,就足以一次更換到所有有連外這個css檔的頁面了




3.第三種是使用@import的方式
注意呦,這個方式並不是屬於html的語法,他是css語法,所以他不能直接下載html的頁面
必須下載<script>標籤裡,或是副檔名.css的檔案才算數。
通常網頁只要讀到@import就會馬上再載入該樣式檔,跟<link href...>的載入方式不太一樣,當html檔獨到<link>時,並不會馬上載入,只有他讀到你要使用裡面的樣式時,他才會載入你要用的那個樣式內容。
另外,你可以@import好幾個css,比方說import base.css 也import newbass.css 他會把兩個css都帶進去。


寫法 "
<script>
@import "base.css";    /* @import url(css檔的URL); */
</script>




另外,css檔的註解方式
/*  這裡面是註解 */


前端工程師必備工具包

今天網路上看文章發現了不錯的資源
WEB前端开发工程师必备工具包(web frontend development tools)
哼哼~ 這篇  非常厲害
我覺得這已經不是只有前端開知道的事,是想做網頁的人都該知道的事
而且裡面還提到"不要告訴我你只知道使用firebug"....
我瞬間天打雷劈
我連firebug都沒用過 只用過ITtester (倒地) 而且還沒有中文化過...
這麼多工具我還沒用過幾樣
只是個參考  有興趣可以多嘗試~

另外這篇也很不錯:
如何成為一個好的前端工程師(Front-end Engineer)

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...