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

Can't select between radio buttons in HTML?

修正一下

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 以此類推。

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