月光林地的網頁技術部

網頁課程教材

0%

發表於 更新於 歸屬於 ， ，

整理好素材及開完資料表後，接著我們會製作DB類別檔，把會用到的一些功能都封裝在DB類別中，並將可能會用到一些全域變數或設定也都放在這個檔案中

建立題組專用共用函式檔

建完各個類別後，為了後續的操作方便，我們將這些類別都引入到一個檔案中，而這個檔案又會分別被 index.php 及 backend.php 引入，相當於整個網站的所有頁面都可以引用到這個檔案的內容。

./api/db.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
session_start();       //啟用session功能
date_default_timezone_set("Asia/Taipei");   //設定網站的時區為亞洲台北

//簡易的自訂函式
/**
 * 用來顯示陣列內容-除錯時使用
 */
function dd($array){
    echo "<pre>";
    print_r($array);
    echo "</pre>";
}

/**
 * 簡化header('location:')的使用
 * 將請求導向其他檔案或頁面
 */
function to($url){
    header("location:".$url);
}


//宣告各個類別的物件變數
$Bottom=new DB('bottom');
$Mem=new DB('mem');
$Admin=new DB('admins');
$Type=new DB('types');
$Goods=new DB('goods');
$Order=new DB('orders');

接著將這個檔案引入到 index.php 及 backend.php 中：

/index.php 、 /back.php

1
2
3
4
<?php include_once "./api/db.php"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0039) -->
<html xmlns="http://www.w3.org/1999/xhtml">

發表於 更新於 歸屬於 ， ，
  1. 建立 ./css, ./js, ./api, ./icon, ./img, ./front, ./back 等常用目錄以利檔案分類及管理
  2. 將素材檔中的 .css, .js, 及 icon 圖檔複製到相應的目錄下，商品的圖檔也一併先複製到 ./img，這可以相當程度的簡化解題的步驟。



  1. 此題組版型中沒有包含jQuery，請至函式庫目錄下或其他題組的素材中複製jQuery檔案至 ./js目錄下

閱讀全文 »

發表於 更新於 歸屬於 ， ，

這邊題目給出的指示需要摸擬一個影廳的座位狀況，然後使用者可以點選座位來訂票，所以會需要一些建置前端頁面的工作；

這邊會先由前端頁面使用ajax來傳送電影id，日期，場次等資訊到api，然後在api程式中使用php來取出已訂位的資料，建置完座位區後，再以js來完成前端劃位的操作，最後再把訂單資料送到後端去儲存，完成整個訂票的功能。

閱讀全文 »

發表於 更新於 歸屬於 ， ，

線上訂票功能我們分兩部份來製作，一個是電影選擇的功能，一個是劃位及完成訂票的功能，這邊主要都是使用ajax來完成的，所以重點放在如何取得前端的資料並傳送給後端去做處理，相較題組一二的ajax功能，這邊使用到的ajax複雜度提升不少。

閱讀全文 »

發表於 更新於 歸屬於 ， ，

動畫的部份我們主要是使用jquery內建的fadeIn()、slideDown()、show()等簡單的動畫方式，較複雜的動畫可以參考jQuery animate()函式的使用說明。

這邊的js中有多加了幾段額外的程式，用來做按鈕的控制或是避免錯誤，但檢定時，可視作答時間來決定要不要多寫這些內容。

閱讀全文 »

發表於 更新於 歸屬於 ， ，

預告片動畫算是有難度的一個製作項目，這邊採用做法是依照示意給出的範例來製作，實際檢定時，可以視時間減少一些功能或檢查的工作，讓解題速度可以快一些，在撰寫javascript的動畫相關功能時，要稍微注意js動畫執行上的一些小問題，確保動畫能依照預期的效果來進行。

閱讀全文 »

發表於 更新於 歸屬於 ， ，

題組三的三個前台功能中，院線片清單算是簡單的，主要就是照題意來列出至少六部上映中的院線片再加上分頁功能就可以了；

但是由於素材提供的css樣式和題目的不一樣，所以css的部份，我們會採用自行撰寫來解決，內建的css我們可以先註解掉不使用。

1
2
<!--這是預告片動畫的css檔，先註解或刪除不使用-->
<!--<link href="./css/s2.css" rel="stylesheet" type="text/css">-->
閱讀全文 »