項目常規開發流程 · 程序員講師課件

# :-: 前端頁面與內容分析 ### 1、資源目錄結構 * `static`: 公共靜態資源目錄,如css,images,js ```css // style.css文件 .header { background-color: brown; height: 30px; } .nav li { list-style:none; min-width:80px; line-height: 30px; float: left; } .nav li a { text-decoration: none; color: white; } .nav { overflow: hidden; } .footer { height: 30px; background-color: #636363; color: white; text-align: center; line-height: 30px; } ``` > `image`目錄，公用資源圖片 <img src="http://kanyun.8car.net/php/1.jpg" width="100" height="100" alt="圖片名稱" align=center> <img src="http://kanyun.8car.net/php/4.jpg" width="100" height="100" alt="圖片名稱" align=center> <img src="http://kanyun.8car.net/php/7.jpg" width="100" height="100" alt="圖片名稱" align=center> --- ### 2、首頁制作與頁面拆分 #### 2.1 知識點 * 數組: * 索引數組: 鍵名是默認遞增整數索引 * 關聯數組: 鍵名是字符串 * 數組成員的訪問: 按鍵名訪問 * 數組的遍歷: foreach() * 二維數組的定義與訪問 #### 2.2 目錄結構 * 首頁: `index.php`,所有欄目內容的聚合 ```php <?php // 變量 $headline = '歐陽克電影'; $copyright = '歐陽克'; // 關聯數組 $navs = [ 'gc'=>'國產好劇', 'om'=>'歐美猛片', 'rh'=>'日韓新片' ]; // 二維數組 $movies = [ ['倚天屠龍記', '都挺好','如果可以這樣愛'], ['復仇者聯盟4', '波西米亞狂想曲','阿麗塔'], ['情書', '天空之城', '龍貓'] ]; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/css/style.css"> <title><?php echo $headline ?></title> </head> <body>  <div class="header"> <ul class="nav"> <li><a href="index.php">首頁</a></li> <?php foreach ($navs as $key=>$nav){ ?> <li><a href="<?php echo $key.'.php'; ?>"><?php echo $nav; ?></a></li> <?php } ?> </ul> </div>  <h2><?php echo $navs['gc']; ?></h2> <ol> <?php foreach ($movies[0] as $movie){ ?> <li><a href="#"><?php echo $movie; ?></a></li> <?php } ?> </ol>  <h2><?php echo $navs['om']; ?></h2> <ol> <?php foreach ($movies[1] as $movie){ ?> <li><a href="#"><?php echo $movie; ?></a></li> <?php } ?> </ol>  <h2><?php echo $navs['rh']; ?></h2> <ol> <?php foreach ($movies[2] as $movie){ ?> <li><a href="#"><?php echo $movie; ?></a></li> <?php } ?> </ol>  <div class="footer"> <p class="copyright"><?php echo $copyright; ?> © 版權所有</p> </div> </body> </html> ``` * `gc.php`: [欄目頁] 國產原創 ```php <?php // 變量 $copyright = '歐陽克'; // 創建二個變量來保存頁面中的動態內容 $movies = ['倚天屠龍記', '都挺好','如果可以這樣愛']; // 欄目數組的鍵名與欄目文件同名 $navs = [ 'gc'=>'國產好劇', 'om'=>'歐美猛片', 'rh'=>'日韓新片' ]; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/css/style.css"> <title><?php echo $navs['gc']; ?></title> </head> <body>  <div class="header"> <ul class="nav"> <li><a href="index.php">首頁</a></li> <?php foreach ($navs as $key=>$nav){ ?> <li><a href="<?php echo $key.'.php'; ?>"><?php echo $nav; ?></a></li> <?php } ?> </ul> </div> <h2><?php echo $navs['gc']; ?></h2> <img src="/images/1.jpg" alt="" width="300">  <ol> <?php foreach ($movies as $movie){ ?> <li><a href=""><?php echo $movie; ?></a></li> <?php } ?> </ol>  <div class="footer"> <p class="copyright"><?php echo $copyright; ?>© 版權所有</p> </div> </body> </html> ``` * `om.php`: [欄目頁] 歐美猛片 ```php <?php $copyright = '歐陽克'; // 創建二個變量來保存頁面中的動態內容 $movies = ['復仇者聯盟4', '波西米亞狂想曲','阿麗塔']; // 欄目數組的鍵名與欄目文件同名 $navs = [ 'gc'=>'國產好劇', 'om'=>'歐美猛片', 'rh'=>'日韓新片' ]; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/css/style.css"> <title><?php echo $navs['om']; ?></title> </head> <body>  <div class="header"> <ul class="nav"> <li><a href="index.php">首頁</a></li> <?php foreach ($navs as $key=>$nav){ ?> <li><a href="<?php echo $key.'.php'; ?>"><?php echo $nav; ?></a></li> <?php } ?> </ul> </div> <h2><?php echo $navs['om']; ?></h2> <img src="/images/4.jpg" alt="" width="300">  <ol> <?php foreach ($movies as $movie){ ?> <li><a href=""><?php echo $movie; ?></a></li> <?php } ?> </ol>  <div class="footer"> <p class="copyright"><?php echo $copyright; ?>© 版權所有</p> </div> </body> </html> ``` * `rh.php`: [欄目頁] 日韓推薦 ```php <?php $copyright = '歐陽克'; // 創建二個變量來保存頁面中的動態內容 $movies = ['情書', '天空之城', '龍貓']; // 欄目數組的鍵名與欄目文件同名 $navs = [ 'gc'=>'國產好劇', 'om'=>'歐美猛片', 'rh'=>'日韓新片' ]; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/css/style.css"> <title><?php echo $navs['rh']; ?></title> </head> <body>  <div class="header"> <ul class="nav"> <li><a href="index.php">首頁</a></li> <?php foreach ($navs as $key=>$nav){ ?> <li><a href="<?php echo $key.'.php'; ?>"><?php echo $nav; ?></a></li> <?php } ?> </ul> </div> <h2><?php echo $navs['rh']; ?></h2> <img src="/images/7.jpg" alt="" width="300">  <ol> <?php foreach ($movies as $movie){ ?> <li><a href=""><?php echo $movie; ?></a></li> <?php } ?> </ol>  <div class="footer"> <p class="copyright"><?php echo $copyright; ?> © 版權所有</p> </div> </body> </html> ``` ---------------------------------------- ## :-: 分離頁面公共部分 ### 3.1 知識點 * 頁面公共部分分離的優點 * 外部文件加載語句: * `include`: 加載失敗,不會終止當前腳本,只會發出警告 * `require`: 加載失敗, 終止當前腳本的執行,是致命錯誤 * `include_once / require_once `: 僅允許加載一次 > `image`目錄，公用資源圖片 <img src="http://kanyun.8car.net/php/1.jpg" width="100" height="100" alt="圖片名稱" align=center> <img src="http://kanyun.8car.net/php/2.jpg" width="100" height="100" alt="圖片名稱" align=center> <img src="http://kanyun.8car.net/php/3.jpg" width="100" height="100" alt="圖片名稱" align=center> <img src="http://kanyun.8car.net/php/4.jpg" width="100" height="100" alt="圖片名稱" align=center> <img src="http://kanyun.8car.net/php/5.jpg" width="100" height="100" alt="圖片名稱" align=center> <img src="http://kanyun.8car.net/php/6.jpg" width="100" height="100" alt="圖片名稱" align=center> <img src="http://kanyun.8car.net/php/7.jpg" width="100" height="100" alt="圖片名稱" align=center> <img src="http://kanyun.8car.net/php/8.jpg" width="100" height="100" alt="圖片名稱" align=center> <img src="http://kanyun.8car.net/php/9.jpg" width="100" height="100" alt="圖片名稱" align=center> ### 3.2 目錄結構 * `inc/header.php`: 公共頭部 ```php <?php $copyright = '歐陽克'; // 創建二維數組用來顯示所有的影視劇名稱 $movies = []; $movies[] = ['倚天屠龍記', '都挺好','如果可以這樣愛']; $movies[] = ['復仇者聯盟4', '波西米亞狂想曲','阿麗塔']; $movies[] = ['情書', '天空之城', '龍貓']; // 欄目數組的鍵名與欄目文件同名 $navs = [ 'gc'=>'國產好劇', 'om'=>'歐美猛片', 'rh'=>'日韓新片' ]; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/css/style.css"> <title><?php echo $navs['gc']; ?></title> </head> <body>  <div class="header"> <ul class="nav"> <li><a href="index.php">首頁</a></li> <?php foreach ($navs as $key=>$nav){ ?> <li><a href="<?php echo $key.'.php'; ?> "><?php echo $nav; ?></a></li> <?php } ?> </ul> </div> ``` * `footer.php`: 公共底部 ```php  <div class="footer"> <p class="copyright"><?php echo $copyright; ?> © 版權所有</p> </div> </body> </html> ``` * `index.php`: 首頁 ```php # 魔術常量 <?php require __DIR__ . '/inc/header.php'; ?> <h2><?php echo $navs['gc']; ?></h2> <ol> <?php foreach ($movies[0] as $movie){ ?> <li><a href=""><?php echo $movie; ?></a></li> <?php } ?> </ol> <h2><?php echo $navs['om']; ?></h2> <ol> <?php foreach ($movies[1] as $movie){ ?> <li><a href=""><?php echo $movie; ?></a></li> <?php } ?> </ol> <h2><?php echo $navs['rh']; ?></h2> <ol> <?php foreach ($movies[2] as $movie){ ?> <li><a href=""><?php echo $movie; ?></a></li> <?php } ?> </ol> <?php require __DIR__ . '/inc/footer.php'; ?> ``` * `gc.php`: [欄目頁] 國產原創 ```php <?php require __DIR__ . '/inc/header.php'; ?> <h2><?php echo $navs['gc']; ?></h2> <img src="/images/1.jpg" alt="" width="300"> <ol> <?php foreach ($movies[0] as $movie){ ?> <li><a href=""><?php echo $movie; ?></a></li> <?php } ?> </ol> <?php require __DIR__ . '/inc/footer.php'; ?> ``` * `om.php`: [欄目頁] 歐美猛片 ```php <?php require __DIR__ . '/inc/header.php'; ?> <h2><?php echo $navs['om']; ?></h2> <img src="/images/1.jpg" alt="" width="300"> <ol> <?php foreach ($movies[1] as $movie){ ?> <li><a href=""><?php echo $movie; ?></a></li> <?php } ?> </ol> <?php require __DIR__ . '/inc/footer.php'; ?> ``` * `rh.php`: [欄目頁] 日韓推薦 ```php <?php require __DIR__ . '/inc/header.php'; ?> <h2><?php echo $navs['rh']; ?></h2> <img src="/images/3.jpg" alt="" width="300"> <ol> <?php foreach ($movies[2] as $movie){ ?> <li><a href=""><?php echo $movie; ?></a></li> <?php } ?> </ol> <?php require __DIR__ . '/inc/footer.php'; ?> ``` ## :-: 制作公共模板 ### 1、什么是模板 * **模板**是用來展示動態數據的載體 * 在實際項目中, 許多頁面的結構是完全相同的,只是數據不同 * 對于這些頁面, 可以創建一個模板, 在調用時填充上對應數據即可 * 通過模板技術, 可以極大的簡化Web開發工作 * PHP天生就是一個模板語言,非常適合創建這種動態頁面 ### 2、創建模板數據 * 實際項目中, 模板中的數據應該來自數據庫 * 數據表查詢結果,大多是一個二維數組 * 所以, 我們先用二維數組來模擬數據表中的數據 * 這些動態數據需要在多個頁面中調用,所以放在公共文件中 * 這里選擇直接創建在`inc/header.php`中 ```php <?php // 影視劇數組 $movies = [ [ 'mov_id'=>1, 'name'=>'倚天屠龍記', 'image'=>'1.jpg', 'detail'=>'元朝末年，群雄紛起，武林動蕩。江湖傳聞，得到屠龍刀倚天劍者，可以成為武林至尊，號令天下，莫敢不從。一時間風云四起，引發了武林中對屠龍刀倚天劍的爭奪，幾段姻緣和孽緣也由此產生。武當派張翠山與天鷹教殷素素… ', 'cate_id'=>1 ], [ 'mov_id'=>2, 'name'=>'都挺好', 'image'=>'2.jpg', 'detail'=>' 蘇母的的突然離世打破了這個家庭外表的平靜，意想不到的隱患層層顯露，對毫無主見卻又自私、小氣的蘇父的安置和后續生活問題，引發了遠在國外的大哥與本城的二哥、小妹三家規律生活的不再。一直被蘇母壓制的蘇父翻… ', 'cate_id'=>1 ], [ 'mov_id'=>3, 'name'=>'如果可以這樣愛', 'image'=>'3.jpg', 'detail'=>'一對已婚男女突然徇情自殺，以為可以結束這一切，卻不料悲劇才剛剛開始——他們的愛人，耿墨池和白考兒，同時在葬禮上邂逅。面對同樣的背叛他們同時選擇報復但又同時愛上彼此，注定飽受打擊和折磨。然而他們想真心擁… ', 'cate_id'=>1 ], [ 'mov_id'=>4, 'name'=>'復仇者聯盟4', 'image'=>'4.jpg', 'detail'=>'《復仇者聯盟4：終局之戰》將是漫威宇宙“無限傳奇”（The Infinity Saga)的終結篇，是漫威電影宇宙十年的一個重要節點，結束部分英雄電影的故事，但也將展開新的劇情，呈現新的更為廣闊宏大的宇…', 'cate_id'=>2 ], [ 'mov_id'=>5, 'name'=>'波西米亞狂想曲', 'image'=>'5.jpg', 'detail'=>'弗雷迪·默丘里成名前在機場做行李搬運工。有一天，默丘里毛遂自薦加入杰·泰勒與布萊恩·梅的樂團，恰巧當天原本的主唱辭職，默丘里用自己橫跨四個八度的超廣音域說服兩人，從此開啟皇后樂團的搖滾傳奇!', 'cate_id'=>2 ], [ 'mov_id'=>6, 'name'=>'阿麗塔:戰斗天使', 'image'=>'6.jpg', 'detail'=>'弗雷迪·默丘里成名前在機場做行李搬運工。有一天，默丘里毛遂自薦加入杰·泰勒與布萊恩·梅的樂團，恰巧當天原本的主唱辭職，默丘里用自己橫跨四個八度的超廣音域說服兩人，從此開啟皇后樂團的搖滾傳奇!', 'cate_id'=>2 ], [ 'mov_id'=>7, 'name'=>'情書', 'image'=>'7.jpg', 'detail'=>'日本神戶某個飄雪的冬日，渡邊博子（中山美穗）在前未婚夫藤井樹的三周年祭日上又一次悲痛到不能自已。正因為無法抑制住對已逝戀人的思念，渡邊博子在其中學同學錄里發現“藤井樹” 在小樽市讀書時的地址時，依循著…', 'cate_id'=> 3 ], [ 'mov_id'=>8, 'name'=>'天空之城', 'image'=>'8.jpg', 'detail'=>'韓書珍將兩個女兒的教育問題和對丈夫的賢內助工作都做得井井有條，在天空之城之中也是備受矚目的女王，但其實書珍一直隱藏著不為人所知的秘密。李秀林是個充滿了關懷和情感豐沛的童話作家，在書珍的引導之下成為了天…', 'cate_id'=>3 ], [ 'mov_id'=>9, 'name'=>'龍貓', 'image'=>'9.jpg', 'detail'=>'為了方便妻子草壁靖子養病，草壁達郎決定帶著兩個女兒草壁皋月和草壁米搬到草壁靖子所在療養院附近的鄉下，父女三人入住了一間年久失修的老房子。小姐妹倆很快發現看似平凡無奇的鄉下有很多神奇的事物，無人居住的房…', 'cate_id'=>3 ], ]; // 欄目數組 $cates = [ ['cate_id'=>1, 'name'=>'gc', 'alias'=>'國產好劇'], ['cate_id'=>2, 'name'=>'om', 'alias'=>'歐美猛片'], ['cate_id'=>3, 'name'=>'rh', 'alias'=>'日韓新片'], ]; // 網站的系統設置 $system = [ 'sys_id'=>1, 'title'=>'私人影院', 'desc'=>'收集全網最新最全的影視資源', 'key'=>'國產,歐美,日韓', 'copy'=>'php中文網' ] ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../static/css/style.css"> <meta name="description" content="<?php echo $system['desc'] ?>"> <meta name="keywords" content="<?php echo $system['key'] ?>"> <title><?php echo $system['title'] ?></title> </head> <body>  <div class="header"> <ul class="nav"> <li><a href="index.php">首頁</a></li> <?php foreach ($cates as $cate) : ?> <li><a href="list.php?cate_id=<?php echo $cate['cate_id']; ?>"><?php echo $cate['alias'] ?></a></li> <?php endforeach; ?> </ul> </div> ``` ### 3、創建首頁 * `index.php`: 首頁入口 * 做為入口文件,必須具備二個基本功能 * 顯示出整個項目的基本內容 * 創建到達其它頁面的鏈接入口 ```php <?php // 加載公共頭部 include __DIR__ . "/inc/header.php"; // 使用雙重循環來遍歷二個數組 // 外層遍歷欄目數組$cates, 內層根據欄目id來查詢對應的影視劇信息 foreach ($cates as $cate) { echo "<h2>{$cate['alias']}</h2>"; echo '<ol>'; // 遍歷影視劇數組 foreach ($movies as $movie) { // 判斷當前影視劇所屬欄目是否與當前欄目id相同? if ($cate['cate_id'] === $movie['cate_id']) { echo "<li><a href='detail.php?mov_id=" .$movie['mov_id']. "'>{$movie['name']}</a></li>"; } } echo '</ol>'; } // 加載公共底部 include __DIR__ . '/inc/footer.php'; ``` ### 4、列表模板 * `list.php`: 欄目頁模板 * 做為欄目頁,只需要將`index.php`改動二處即可 * 使用GET方式接收`index.php`傳過來的欄目id * 將外層循環中的欄目名稱顯示語句放到內層循環中 ```php <?php // 加載公共頭部 include __DIR__ . '/inc/header.php'; // 將當前欄目id,, 使用GET方式,通過URL地址傳遞到列表模板list.php $cate_id = $_GET['cate_id']; // 注意: url中的內容都是字符串, 整數字符串先做類型轉換才可以 //echo gettype($cate_id);die; $cate_id = intval($cate_id); // 函數轉換 // 將index.php中的主體代碼簡單修改一下 // 只顯示一個欄目, 不需要做循環, 只需要作一個判斷即可 foreach ($cates as $cate) { // 在index.php基礎上加一層判斷,確定是否是當前欄目即可 // 如果上面的GET參數沒有做類型轉換, 那么這里就不能用===恒等 // 必須使用==, 以觸發系統的類型自動轉換機掉, 我還是建議全等操作 // == : 只比較值是否相等, === : 值與類型,都必須完全相同 if ($cate['cate_id'] === $cate_id) { echo "<h2>{$cate['alias']}</h2>"; echo '<ol>'; foreach ($movies as $movie) { if ($cate['cate_id'] == $movie['cate_id']) { echo "<li><a href='detail.php?mov_id=" .$movie['mov_id']. "'>{$movie['name']}</a></li>"; } } echo '</ol>'; break; // 結束循環 }; } // 加載公共底部 include __DIR__ . '/inc/footer.php'; ``` ### 5、內容頁模板 * `detail.php`: 詳情頁模板 * 做為詳情頁, 只需要將`list.php`改動三處即可 * GET參數接收的影視劇的id * 去掉外層循環, 不需要遍歷欄目 * 添加一些自定義樣式,顯示影視劇詳情內容 ```php <?php // 加載公共頭部 include __DIR__ . '/inc/header.php'; $mov_id = intval($_GET['mov_id']); // 復制list.php模板直接修改 foreach ($movies as $movie) { if ($movie['mov_id'] === $mov_id) { echo "<h3>{$movie['name']}</h3>"; echo '<img src="/images/'.$movie['image'].'" alt="" width="300">'; echo "<p style='text-indent: 2em'>{$movie['detail']}</p>"; } }; // 加載公共底部 include __DIR__ . '/inc/footer.php'; ```