月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組二 步驟14 製作問卷管理功能

發表於 更新於 歸屬於 ， ，

後台的問卷管理功能只有做新增問卷而已，算是簡單的應用，唯一特別的要求是要前端可以直接點擊 更多 按鈕後在畫面上增加選項，而這個功能和題組一的 編輯次選單 一樣，所以我們只需要參照題組一的做法即可。

  1. 在 ./view/backend/ 目錄下建立 que.php 檔案
    在類別中引入頁面
    /Controller/Que.php
    1
    2
    3
    function backend(){
        $this->view("./view/backend/que.php");
    }
  2. 在 que.php 中建立新增問卷需要的表單格式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <fieldset>
        <legend>新增問卷</legend>
        <form action="./api/add_que.php" method="post">
        <div style="display:flex">
            <div class="clo">問卷名稱</div>
            <div><input type="text" name="subject" id="subject"></div>
        </div>
        <div class="options">
            <div class="clo" style='padding:0'>
                <label>選項</label>
                <input type="text" name="option[]" >
                <!--建立一個 `更多` 按鈕，並設定onclick事件函式-->
                <button type='button' onclick="more()">更多</button>
            </div>
        </div>
        <div class="ct">
            <input type="submit" value="新增">|
            <input type="reset" value="清空">
        </div>
        </form>
    </fieldset>

  1. 撰寫 javascript 函式 more() 用來在指定的位置插入選項
    1
    2
    3
    4
    5
    6
    7
    function more(){
        let opt= `<div class="clo" style='padding:0'>
                    <label>選項</label>
                    <input type="text" name="option[]" >
                  </div>`
        $(".options").append(opt)
    }

  1. 建立 ./api/add_que.php 檔案做為新增問卷的php程式檔
  2. 在 add_que.php 中撰寫新增問卷的程式碼
  3. 這邊要注意的是因為我們是同時把題目和選項一起送出的，而資料庫在儲存時會依照 subject_id 這個欄位來判斷這筆資料是題目還是選項，因此我們在撰寫 api 時要注意資料處理的先後順序，先處理題目的新增，才能取得題目的 id 做為選項的 subject_id 值

/api/add_que.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
include_once "../base.php";

//判斷主題是否存在而且不是空白
if(isset($_POST['subject']) && $_POST['subject']!=''){
    
    //新增主題資料
    $Que->save([
        'text'=>$_POST['subject'],
        'vote'=>0,
        'subject_id'=>0
    ]);

    //判斷選項是否存在
    if(isset($_POST['option'])){

        //根據剛才新增的主題資料去找到主題的資料id
        $subject_id=$Que->find(['text'=>$_POST['subject']])['id'];

        foreach($_POST['option'] as $option){

            //選項內容不是空白的才會進行新增
            if($option!=""){
                $Que->save([
                    'text'=>$option,
                    'vote'=>0,

                    //記得要加上主題的資料id
                    'subject_id'=>$subject_id
                ]);
            }
        }
    }
}

to("../backend.php?do=que");