畢業設計 之 六 網站搭建學習筆記

時間  2019-11-09
標籤 畢業設計 網站 搭建 學習 筆記 欄目 網站開發 简体版
原文   原文鏈接

畢業設計 之 六 網站搭建學習筆記

做者：20135216
平臺：windows10
軟件：XAMPP，DreamWeaver
說明：該筆記是對創建網站（除PHP語法外）相關內容的基礎學習；主要是form表單、CSS以及HTTP身份驗證

1、表單提交

表單處理是一個多進程。首先，建立一張表單，以供用戶輸入詳細的請求信息。接着，輸入的數據被髮送到網頁服務器，在服務器裏這些數據獲得編譯和錯誤檢測。若是PHP代碼標識出一個或多個須要從新輸入的字段，則帶有相關錯誤信息的表單會被從新顯示。當精確的輸入信息知足代碼須要時，代碼會採起一些調用數據庫的行動。php

1.創建表單

  1. 表單元素
    • 一個打開的表單標記與一個關閉的表單標記
    • 一個指定的POST或GET方法的提交類型
    • 一個或多個輸入字段
    • 表單數據提交的目的地址URL

  2. 例子css

    <?php
     echo <<<_END
     <html>
     <head>
     <title>Form Test</title>
     </head>
     <body>
     <form method = "post" action = "fromtest.php">
     what is your name?
     <input type = "text" name = "name">
     <input type = "submit">
     </form>
     </body>
     </html>
     _END;
 ?>
    • 效果以下
    • 注意：一個.php文件中，在輸出多行HTML文檔的時候，都必須使用echo <<<_END……_END;的形式
  3. 恢復提交的數據
    • 由於以上的例子在點擊提交以後，信息就不會再顯示了，爲了能讓輸入的名字仍然顯示出來，能夠對代碼稍做修改

    • 示例html

      <?php
  if(isset($_POST['name'])
      $name = $_POST['name'];
  else
      $name = "(not entered)";

  echo <<<_END
  <html>
  <head>
  <title>Form Test</title>
  </head>
  <body>
  your name is:$name<br>
  <form method = "post" action = "fromtest.php">
  what is your name?
  <input type = "text" name = "name">
  <input type = "submit">
  </form>
  </body>
  </html>
  _END;
  ?>
    • 說明：與前例不一樣之處在於，本例中前幾行在檢測$_POST 相關數組提交的字段名。該數組包含了HTML表單中每一個字段的元素。由於被使用的輸入名是name，表單方法是POST，因此每個$_POST數組的元素name包含$_POST['name']中的值

    • isset函數用來檢測$_POST['name']是否已經被賦值。若已經被賦值，則輸出一條單句進行顯示web

  4. 默認值
    • 舉例：用網頁表單爲網站客戶提供默認值。如一個地產網站上提供一個小的還款計算器。輸入的默認值是25年和6%的利息，所以，用戶能夠簡單鍵入要借的本金總數或每個月能夠支付的錢數

    • 代碼算法

      <form method = "post" action = "calc.php"><pre>
  loan amount <input type = "text" name = "monthly">
  monthly repayment <input type = "text" name ="years" value = "25">
  number of years <input type = "text" name = "years" value = "25">
  Interest Rate <input type = "text" name = "rate" value = "6">
  <input type = "submit">
  </pre></form>

    • 說明：value屬性字段顯示默認值，用戶能夠按意願對 其進行修改數據庫

  5. 輸入類型

    • 文本框windows

      <input type = "text" name = "name" size = "size"(制定文本框寬度) maxlength = "[容許輸入字符的最大值]" value = "[默認值]">

    • 文本域數組

      <textarea name = "[名稱]" cols = "[長度]" rows = "[長度]" wrap = "type">
  This is default text.
  </textarea>
      • 說明：cols與rows用當前字體的字符間隔來肯定文本域的大小；wrap屬性控制輸入到文本框的文本能夠換行以及如何將這個換行發送到服務器

    • 複選框（默認複選框是方形的）瀏覽器

      <input type = "checkbox" name = "name" value = "value" checked = "checked">

      • 例子（這種狀況下，只有最後一個被選中的複選框纔會被提交；以前被選中的值都會被忽略）安全

        Vanilla <input type = "checkbox" name = "ice" value = "Vanilla" >
  Chocolate <input type = "checkbox" name = "ice" value = "Chocolate" >
  Strawberry <input type = "checkbox" name = "ice" value = "Strawberry" >

      • 例子（容許多個選項被選中並提交，這裏提交的是一個數組）

        Vanilla <input type = "checkbox" name = "ice[]" value = "Vanilla" >
  Chocolate <input type = "checkbox" name = "ice[]" value = "Chocolate" >
  Strawberry <input type = "checkbox" name = "ice[]" value = "Strawberry" >
    • 單選框（全部的按鈕必須使用相同的名字）

      • 例子

        Vanilla <input type = "radio" name = "ice" value = "1" >
  Chocolate <input type = "radio" name = "ice" value = "2" checked = "checked" >（默認值）
  Strawberry <input type = "radio" name = "ice" value = "3" >
      • 效果
    • 隱藏字段

      • 有時將表單字段隱藏起來，便於對錶單的輸入狀態進行跟蹤。好比

        echo '<input type = "hidden" name = "submitted" value = "yes">'

      • 好比第一次PHP程序接收輸入的時候，這行代碼沒有被執行，因此沒有叫作submitted的字段出現。PHP程序從新建立表單，增長輸入字段。而後，當瀏覽者從新提交表單時，PHP程序接受進行並將submitted字段設置爲「yes"

    • select
      • 用於建立下拉選項列表，提供單選或多選

      • 例子

        <select name = "veg" size = 4(顯示行數) multiple = "multiple（多選；無此屬性則爲單選）">
  <option value = "Peas">Peas</option>
  <option value = "Beans">Beans</option>
  <option value = "Carrots">Carrots</option>
  <option value = "Cabbage">Cabbage</option>
  </select>
      • 效果
    • Lables
      • 運用標籤環繞表單元素，使得任意可見部分可選；文本並不像超連接那樣加上下劃線，而是當鼠標通過它時將文本光標變成箭頭光標

      • 例子

        <label>8am-noon<input type = "radio" name = "time" value = "1"></label>
  6. 實例程序
    • 建立.php文件，將PHP與HTML表單連在集成在一塊兒
    • 效果

    • 代碼

      <?php
  $f = $c = '';
  if(isset($_POST['f']))
      $f = sanitizeString($_POST['f']);
  if(isset($_POST['c']))
      $c = sanitizeString($_POST['c']);
  if($f != '')
  {
      $c= intval((5/9)*($f - 32));
      $out = "$f'f equals $c 'c";
  }
  else if($c != '')
  {
      $f = intval((9/5)*$c+32);//intval函數將結果轉換爲整型值
      $out = "$c 'c equals $f 'f";
  }
  else
      $out = "";

  echo <<<_END
  <html>
  <head>
  <title>Temperature Converter</title>
  </head>
  <body>
  <pre>
  Enter either Fahrenheit or Celsius and click on Convert

  <b>$out</b>
  <form method = "post" action = "exercise2.php">
  Fahrenheit <input type = "text" name = "f" size = "7">
     Celsius <input type = "text" name = "c" size = "7">
             <input type = "submit" value = "Convert">
  </form>
  </pre>
  </body>
  </html>     
  _END;

  function sanitizeString($var)
  {
      $var = stripslashes($var);//返回已經剝離反斜槓的字符串
      $var = strip_tags($var);//剝去字符串中的HTML、PHP、XML標籤
      $var = htmlentities($var);//將字符轉換爲HTML實體，其中，沒法被識別的字符集將被忽略
      return $var;
  }

  ?>

2.HTTP身份驗證

  1. HTTP身份驗證使用web服務器爲應用程序管理用戶名和密碼。這適合大多數應用程序中的用戶登陸
  2. PHP身份驗證

    • 代碼

      <?php
      if(isset($_SERVER['PHP_AUTH_USER'])&& isset($_SERVER['PHP_AUTH_PW']))
      {
          echo "Welcome user:" . $_SERVER['PHP_AUTH_USER'] . "Password:" . $_SERVER['PHP_AUTH_PW'];
      }
      else
      {
          header('WWW-Authenticate:Basic realm = "Restricted Section"');//basic realm就是被保護部分的名稱
          header('HTTP/1.0 401 Unauthorized');
          die("Please enter your username and password"); 
      }
  ?>
    • 效果
    • 解釋
      • 程序首先尋找$_SERVER['PHP_AUTH_USER'])和$_SERVER['PHP_AUTH_PW']，當這兩個值有至少一個不存在的時候，用戶身份就不會被驗證，而且傳送header信息時會出現如圖5所示的提示信息。
      • 若是用戶填寫這兩個字段，程序會再次從頂部運行。
      • 若是用戶單擊取消按鈕，則程序基礎運行後面的兩行代碼，發送後面的header信息和錯誤信息
  3. 進階版PHP身份驗證
    • 添加了對有效用戶名和密碼的檢驗環節

    • 代碼

      <?php
  $username = 'admin';
  $password = 'letmein';


  if(isset($_SERVER['PHP_AUTH_USER'])&& isset($_SERVER['PHP_AUTH_PW']))
  {
      if($_SERVER['PHP_AUTH_USER'] == $username && $_SERVER['PHP_AUTH_PW'] == $password )
          echo "you are now logged in";
      else 
          die("Invalid username / password combination");//給黑客提供的信息越少越好
  }
  else
  {
      header('WWW-Authenticate:Basic realm = "Restricted Section"');
      header('HTTP/1.0 401 Unauthorized');
      die("Please enter your username and password"); 
  }
  ?>
  4. 保存用戶名和密碼
    • 使用PHP哈希函數在目前看來具備最高的安全性

    • 舉例

      $token = hash('ripemd128','mypassword');

    • 補充：ripemd128是一種能夠替換md5的開源算法

3.CSS（層疊樣式表）

  1. 添加樣式方法

    • 直接在HTML的頭部標籤之間添加

      <head>
  <title>Hello World</title>
  <style>
  h1{color:red;font-size:3em;font-family:Arial; }
  </style>

    • 導入樣式表：將樣式運用到整個網站的話，更好的方法是將樣式放在獨立文件中，使用時進行導入

      <style>
  @import url("style.css");
  </style>

    • 從HTML內部導入樣式表（不能用於將一根樣式表導入到另外一個樣式表，不能放在一對style標記內）

    • 使用ID

      <div id = 'welcome'>Hello there</div>
  (對應的CSS語句以下)
  #welcome {font-style:italic;color:blue;}
  (#的使用指明只有名爲welcome的ID纔會用這條語句來設置樣式)
    • 使用類

      • 至關於使用ID的進階版，能夠爲多個元素設置同一種樣式

        <div class = 'welcome'>Hello there</div>
  (對應的CSS語句以下)
  .welcome {font-style:italic;color:blue;}
  2. CSS規則
    1. 選擇器：每條語句都要以一個selector（選擇器）開始，指定要施加規則的項目
    2. 優先級（由高到低）：
      • 內聯樣式：直接爲元素設計的樣式
      • 內部樣式：建立在style標記內的樣式
      • 外部樣式表

    3. 屬性選擇器：避免使用ID和類引用屬性

      [type = "submit"]{width:100px;}//將屬性爲type = "submit"的全部元素設置爲100像素寬
 form input[type = "submit"] {width:100px;}//爲擁有這一屬性的表單input元素設置爲100像素寬
  3. CSS層疊
    • 目的：解決瀏覽器所支持的各類不一樣類型樣式表之間潛在衝突的方法；根據建立者、建立樣式的方法以及選擇的類型屬性優先級來應用它們
    • 特殊
      • ！important聲明強制一個規則擁有更高的優先級

      • 好比：

        p{color:#ff0000 !important;}//以前全部等價的設定都會被覆蓋，以後全部等價的處理規則也會被忽略
    • div和span元素之間的區別
      • div元素具備無限的寬度（至少相對瀏覽器邊界而言）；span元素只有它所包含的文本那麼寬
      • span元素後面的文本或者對象能夠折返環繞，所以邊界複雜
  4. 字體和排版
    • CSS主要設置四種字體屬性：family（字體族），style（樣式），size（大小），weight（粗細）
  5. 管理文本樣式
    • 文本修飾（text-decoration)：包括下/上劃線、刪除線
    • 間距（word-spacing & letter-spacing）：以像素爲單位
    • 對齊（text-align）：包括兩端對齊、居中、左對齊和右對齊
    • 縮進（text-indent）
  6. CSS顏色
    • color：前景色
    • background-color：背景色
    • 單個參數
      • aqua(水藍色)
      • black
      • blue
      • fuchsia（紫紅色）
      • gray
      • green
      • lime（黃綠色）
      • maroon（醬紫）
      • navy（深藍）
      • olive（橄欖綠）
      • purple
      • red
      • silver
      • teal（青色）
      • white
      • yellow
    • 複合參數
      • ffffff（依次爲紅-綠-藍）
  7. 定位

    • 絕對定位

      #object{position:absolute;top:100px;left:200px}

    • 相對定位（相對於對象在原始文檔中的位置）

      #object{position:relative;top:100px;left:200px}

    • 固定定位（當文檔滾動時，對象仍然保持在它原來的位置上）

      #object{position:fixed;top:100px;left:200px}

參考

1.書籍

  1. 《PHP、MySQL與JavaScript學習手冊（第4版）》Robin Nixon著，侯榮濤 侯碩楠 韓進 譯

2.網址

  1. PHP教程 http://www.w3school.com.cn/php/
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程