2015年3月6日 星期五

[教學] PHP & MySQL 學習筆記 第二堂(圖片插入,隨機函數使用)


第二堂課的主要目標是要寫學會插入圖片,並且可以讓圖片在每一次登入網站時隨機選擇一張呈現。

為了要完成這個遊戲,我們有幾個不同的學習目標
1.在網頁中插入圖片
2.使用隨機函數,讓圖片可以隨機呈現

完成的成果就像這樣
本堂課會學習到的語法包含

rand(起始值,結束值):建立隨機整數

這次,就讓我們用目前全家正夯的醜比頭來練習嗎(真的有夠醜的阿XDD)

(圖片來源均來自全家官網

將圖片插入網頁中

首先,為了要讓網站上能夠隨機呈現不同的醜比頭公仔,我們要學會使用隨機函數,一樣使用DW當作我們的編輯平台。

先把所有醜比頭的圖片檔案,放入我們的伺服器資料夾當中

原始的路徑一樣是C:\AppServ\www\PJChender

新建一個資料夾,把醜比頭都放進去


接著打開DW,一樣記得要打開的是PHP的檔案

接著,我們要學習匯入圖片,圖片匯入的方式可以透過HTML語法加以匯入,但DW可以直接插入圖片,因此我們就不用再去記圖片插入的語法了。

 插入的方法如下:



「影像標籤輔助功能屬性」這個部分取消就好
透過DW插入後,自動就會幫我們產生一段程式碼。


接著,一樣另存新檔

 位置一樣要存在我的虛擬的server裡面

 打開網頁,我們就可以看到我們剛剛建立的醜比頭嘍。


練習使用隨機函數

現在,我們要練習,讓我們的醜比頭可以隨機播放,建立隨機變數的方法有三種

方法一:直接在圖片的地方加入隨機函數

方法二:建立變數的第一種方法

前一個方法在程式碼短的時候還堪使用,但是程式碼一多就會變的很亂,因此我們還是要學習建立變數的方法。

在下面的圖片中,我們用///**/來加入註解,真正的程式碼只有最後兩行,
分別是
$num=rand(1,6);
$表示要建立一個新的變數,num則是變數名稱,而這個變數是由1~6組成的隨機數字

echo '.$num.'.png" width="255" height="295" / >';
在這裡面我們把剛剛的隨機變數插入,由於單引號內並不能讀取變數
所以我們要另外加兩個單引號,把變數區隔開來,另外要再加上「.」把變數和文字連結。


方法三:建立變數的第二種方法
由於前一個方法,必需要用單引號把變數隔開,並且加上小數點加以連結,還是麻煩了一些,在php裡面,單引號和雙引號是不一樣的,雙引號裡面是可以加入變數的

作法很簡單,我們把這段函數的前後都加上雙引號("),接著,把裡面所有的雙引號都刪掉,就完成了!


我們可以比較一下方法二和方法三的語法,兩種方式都能夠呈現出隨機的圖片


大家可以看看完成的成果

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

0 意見:

張貼留言