20200512-php-baseclass-9

4_file.php

<?php
print_r($_POST);
print_r($_FILES);//或使用var_dump

//試著理解以下內容與差異

echo $_FILES["mypic"]["name"]."<br/>";	//原檔案名稱
echo $_FILES["mypic"]["tmp_name"]."<br/>";//暫存路徑
echo $_FILES["mypic"]["size"]."<br/>";//檔案byte, max 2mb，除非要改php上傳限制
echo $_FILES["mypic"]["type"]."<br/>";//檔案類型

//將檔案儲存到伺服器位置的方式為
copy($_FILES["mypic"]["tmp_name"],"upload/".$_FILES["mypic"]["name"]); // copy(from,to)

//上傳檔案時也可以改名
$newname=date("YmdHis")."_".$_FILES["mypic"]["name"];
copy($_FILES["mypic"]["tmp_name"],"upload/".$newname); // copy(from,to)

//unlink("upload/".$newname);  //刪除網路空間內的檔案

?>
<form method="post" enctype="multipart/form-data">
<input type="file" name="mypic">
<input type="submit" value="上傳">
</form>

readme.md

homework 名片模擬器

1. 建立資料夾為5_homework,內含 index.php(表單),api,php(驗證處理),preview.php(預覽資訊),以及多個版型檔案

2. 設計index.php畫面為表單網頁，表單欄位可輸入

   • 姓名
   • 職稱
   • 聯絡電話
   • 電子信箱
   • 技能簡介
   • 人像照片
   • 下拉選單選擇版型
   • 按鈕有[預覽]，能提交form資料到api.php

3. 設計api.php，能將form表單的資料包含圖片路徑(記得存入空間)一起轉成SESSION或COOKIE，接著導向到preview.php。導向連結用header('location:preview.php');

4. 設計preview.php，主要是能自動依版型(link到layout.css)跟session資訊(或cookie) 整合到HTML，成為完整的vCard畫面。另外提供返回按鈕，設計為<button onclick="window.history.go(-1)">回頁面</button>

5. 發揮所學去規劃HTML+CSS，或者去偷老師的示範網站。可以把background-img跟css都放在資料夾theme內。

api.php

<?php
//print_r($_FILES);

//先處理圖片存放
copy($_FILES['who']['tmp_name'],"upload/".$_FILES['who']['name']);

//把所有資料做一個陣列塞到到SESSION去
$tmp=$_POST;
$tmp['who']=$_FILES['who']['name'];

session_start();
$_SESSION['info']=$tmp;
// print_r($_SESSION);

//轉址到preview.php去
header('location:preview.php');

?>

black.css

.card-main {
  margin: 5% auto 0;
  width: 450px;
  background: url('black.jpg');
  background-size: cover;
  box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.46);
  font-family: "Microsoft JhengHei", "Apple LiGothic Medium", Arial, serif;
  text-align: center;
  overflow: hidden;
  color:#999;
  padding:3% 5%;
}

.hr {
  background: linear-gradient(90deg, #80808000, gray, #80808000);
  height: 1px;
  width: 80%;
  border: 0;
}

.who {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  margin-top: 20px;
  border: 6px solid #eee;
}

.clr {
  color:#333;
  background-color: #d4c8b5;
}

.box {
  border-radius: 5px;
  background: url('white.jpg');
  padding: 10px;
  margin: 10px;
  color: black;
  font-weight: bold;
  letter-spacing:3px;
}

green.css

.card-main {
  margin: 5% auto 0;
  width: 450px;
  background: url('green.jpg');
  background-size: cover;
  box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.46);
  font-family: "Microsoft JhengHei", "Apple LiGothic Medium", Arial, serif;
  text-align: center;
  overflow: hidden;
  color:#ccc;
  padding:3% 5%;
}

.hr {
  background: linear-gradient(90deg, #80808000, white, #80808000);
  height: 1px;
  width: 80%;
  border: 0;
}

.who {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  margin-top: 20px;
  border: 6px solid #ccc;
}

.clr {
  color:#000;
  background-color: #e1d1c1;
}

.box {
  border-radius: 5px;
  background: url('pink.jpg');
  padding: 10px;
  margin: 10px;
  color: black;
  font-weight: bold;
  letter-spacing:3px;
}

index.php

<style>
  .main {
    margin: 5% auto;
    text-align: center;
    width: 400px;
  }

  .data {
    text-align: left;
    padding: 0 20px;
    border: #000 2px solid;
    margin-bottom: 20px;
  }
  .data p{
    min-width:300px;
  }
</style>

<div class="main">
  <h1>vCard產生器</h1>
  <form action="api.php" method="post" enctype="multipart/form-data">
    <div class="data">
      <p>你的名字 | <input type="text" name="user" value="泰山下智久"></p>
      <p>職位名稱 | <input type="text" name="title" value="網頁設計師"></p>
      <p>
        <span style="vertical-align:top">技能說明 | </span>
        <textarea name="skill" cols=30 rows=10>HTML/CSS網頁概念基礎,PHP/MySQL資料處理,JS/JQ前端網頁設計,AI/PS平片影像處理,UI/UX設計規劃</textarea>
      </p>
      <p>email | <input type="text" name="mail" value="goldtimes5@gmail.com"></p>
      <p>手機號碼 | <input type="text" name="phone" value="0988-588-088"></p>
      <hr>
      <p>人像照 | <input type="file" name="who"></p>
      <p>版型選擇 |
        <select name="layout">
          <option value="green" selected>寶石綠</option>
          <option value="pink">大地褐</option>
          <option value="black">星空黑</option>
          <option value="white">雲彩白</option>
        </select>
      </p>
    </div>

    <input type="submit" value="送出預覽">
  </form>



</div>

pink.css

.card-main {
  margin: 5% auto 0;
  width: 450px;
  background: url('pink.jpg');
  background-size: cover;
  box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.46);
  font-family: "Microsoft JhengHei", "Apple LiGothic Medium", Arial, serif;
  text-align: center;
  overflow: hidden;
  color:#333;
  padding:3% 5%;
}

.hr {
  background: linear-gradient(90deg, #80808000, gray, #80808000);
  height: 1px;
  width: 80%;
  border: 0;
}

.who {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  margin-top: 20px;
  border: 6px solid #555;
}

.clr {
  color:#fff;
  background-color: #203e47;
}

.box {
  border-radius: 5px;
  background: url('green.jpg');
  padding: 10px;
  margin: 10px;
  color: white;
  font-weight: bold;
  letter-spacing:3px;
}

preview.php

<?php
session_start();
?>
<link rel="stylesheet" type="text/css" href="theme/<?=$_SESSION['info']['layout']?>.css">

<div class="card-main">
	<img src="upload/<?=$_SESSION['info']['who']?>" class="who">
	<h2>關於<span class="clr"><?=$_SESSION['info']['user']?></span></h2>
	<h4 class="clr" style="letter-spacing:10px;"><?=$_SESSION['info']['title']?></h4>
	<hr class="hr">
	<p><?=$_SESSION['info']['skill']?></p>
	<div class="box"><?=$_SESSION['info']['mail']?></div>
	<div class="box"><?=$_SESSION['info']['phone']?></div>
</div>
<button style="margin:50px auto;display:block" onclick="window.history.go(-1)">回頁面</button>

white.css

.card-main {
  margin: 5% auto 0;
  width: 450px;
  background: url('white.jpg');
  background-size: cover;
  box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.46);
  font-family: "Microsoft JhengHei", "Apple LiGothic Medium", Arial, serif;
  text-align: center;
  overflow: hidden;
  color:#333;
  padding:3% 5%;
}

.hr {
  background: linear-gradient(90deg, #80808000, gray, #80808000);
  height: 1px;
  width: 80%;
  border: 0;
}

.who {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  margin-top: 20px;
  border: 6px solid #eee;
}

.clr {
  color:#eee;
  background-color: #333;
}

.box {
  border-radius: 5px;
  background: url('black.jpg');
  padding: 10px;
  margin: 10px;
  color: white;
  letter-spacing:3px;
}