PHP Simple Tutorial - 考前複習神器

今天用會做出東西的方式來教各位寫寫php,剛好學生下週段考,順便給他們練習哈!

首先到https://html5up.net/ 挑選自己喜歡的模板。

載下來,丟到我們的xampp\htdocs中。

將index.html右鍵重新命名成index.php。

打開檔案後,我們在瀏覽器選到想要修改的文字,按右鍵 > Inspect (檢查),

就能找到程式碼的位置,回到編譯器修改成你喜歡的文字~,這邊就放題目囉!

同樣的方法,大約第36行,我們把題目打上去。

接下來要寫上選項,這邊我們就用php的方法加上php的專屬標籤。

<?php ?>

我們想把選項以Arrays方式儲存,並以print_r測試印出。

<?php$arr = array("a"=>"dabc","b"=>"dcba","c"=>"dcab","d"=>"abcd");$cr_ans = "c";print_r($arr);?>

foreach 可以很方便地用來索引陣列資料結構裡的元素。其語法如下:

foreach(array_expression as $value) statement

foreach(array_expression as $key => $value) statem

foreach($arr as $key => $value){echo "$key: $value";}

echo 裡面是可以包html標籤的唷!

要做出可以單選的效果就是radio button了呢!

foreach($arr as $key => $value){echo "<input type=\"radio\" value=\"$key\"><label>$key: $value</label>";}

實際點點看,發現沒法點。爬一下文是Radio有幾個條件要設定。

  1. Having the same name groups a set of radio buttons into a single radio group
  2. The name is used to generate the form data to be submitted to the server

修正一下

echo "<input type=\"radio\" id=\"$key\" name=\"ans\" value=\"$key\"><label for=\"$key\">$key: $value</label>";

就能夠點囉!

下一步,我們要製作答案送出後的驗證。

首先我們在送出的按鈕右邊添加div來加點文字,大概像下圖這樣。

<ul class="actions"> <li><input type="submit" value="送出">&nbsp;&nbsp;&nbsp;  <div style="float:right;">  <p style="color:green;">答對了!</p>  </div>  </li></ul>

同時也建立"答錯了",用顏色來區分。

<p style="color:green;">答對了!</p><p style="color:red;">答錯了!</p>

當點擊送出後,php會驗證你的選項對不對,所以我們就用$_GET[]去接收前端送出去的答案,之後程式碼會長這樣。

isset() 是當裡面的變數被定義時會傳回true

加上issset() 就能避免還沒選擇答案導致未被定義造成的錯誤囉!

另外請注意 \在這邊指的是跳脫符號唷! 要不然會被當作字串處理呢!

\”color:green;\”

接下來要把題目匯入資料庫,製作隨機問題。

首先開啟xampp control panel > Apache > Config >phpMyAdmin (config.inc.php)

修改

$cfg[‘Servers’][$i][‘auth_type’] = ‘cookie’;
$cfg[‘Servers’][$i][‘user’] = ‘root’;
$cfg[‘Servers’][$i][‘password’] = ‘eyes123456’;

在瀏覽器上方輸入 http://localhost/phpmyadmin

輸入 root 後按Enter

在使用者帳號頁面 找到 root localhost 點擊編輯權限。

修改密碼後儲存即可~

接下來會被強制登出,使用修改好的帳密登入 root/{your password}

首先要建立題庫,在資料庫頁面中新增資料庫pre_exam編碼為urf8_general_ci

資料表內總共需要七欄,分別是流水號、題目、選項A、B、C、D、答案。

這邊題目使用https://www2.tchcvs.tc.edu.tw/online/examweb/BrowContent.asp

點擊新增資料

其中answer的0 表示答案為A ,1=>B 以此類推。

題目來自 國立高雄大學資訊基本能力檢定 計算機概論與應用軟體題庫

NTUT CSIE | Biomedical Informatics Lab | github.com/stwater20 | sectools.tw

NTUT CSIE | Biomedical Informatics Lab | github.com/stwater20 | sectools.tw