WEB前端第五十九課——時間戳、資料互動小案例-有解無憂

1.時間戳

　　程式開發中所說的時間戳，通常是指從1970年1月1日0時到當前事件的毫秒數，

　　time()方法，用于獲取當前的時間戳，結果為毫秒數，

　　date()方法，用于將時間戳結果轉換為通常的時間格式，

　　語法：date(format,timeStamp);　　//format引數用于定義日期時間格式

　　時間格式：

　　　　年：Y　4位數年份　　　　y　2位數年份

　　　　月：M　3位英文簡寫　　 F　完整英文月份　　m　2位數月份　　n　無0數字月份

　　　　日：d　2位數月第幾天　　j　無0補位月第幾天　S 月第幾天英序數后綴　　z　年第幾天

　　　　星期：D　3為英文簡寫　　l　完整英文星期幾(小寫L)

　　　　時：H　24小時制　　G　無0 24小時制　　h　12小時制　　g　無0 12小時制

　　　　　　A（AM/PM）　　a（am/pm）

　　　　分：i　2位數分鐘

　　　　秒：s　2位數秒鐘

　　　　時區：e　時區識別符號　　T　時區簡寫

　　注意：年月日與時間之間通常使用“空格”隔開，

　　　　　年月日之間的連接符通常使用“-或/”，英文日期多用“空格與of”拼接，時間之間的連接符通常使用“:”，

　　代碼示例：

<?php
    echo time();
    echo '<br>';
    echo date('Y-m-d H:i:s',time());
    echo '<br>';
    echo date('D jS \of F Y h:i:s a');   //可不寫 time()方法，
    echo '<br>';
//    設定默認時區
    date_default_timezone_set('Asia/Shanghai');
    echo date('Y-m-d H:i:s',time());
?>

2.fetch相關方法

　　⑴ fetchAll($result,resulttype)，從結果中獲取所有行資料作為關聯陣列，

　　　　引數result為必需，是由mysqli_query()、mysqli_store_result() 或 mysqli_use_result() 回傳的結果，

　　　　也可以通過result結果集識別符號通過指標呼叫 fetchAll() 方法，

　　　　引數resulttype為可選，用于規定輸出那種型別的陣列，包括“_ASSOC、_NUM\_BOTH”三種，

　　⑵ fetch_assoc($result)，從結果集中獲取一行資料作為關聯陣列，

　　⑶ fetch_row($result)，從結果集中獲取一行資料作為列舉陣列，

　　⑷ fetch_column($result)，從結果集中獲取一列資料作為列舉陣列，

　　注意：在PHP PDO中有很多關于 fetch 的預定義常量，可以通過 PDO呼叫，

3.前后臺互動案例

　　新增、洗掉、修改、文章詳情小案例

　　資料庫表結構：

　　⑴ index.php頁面

　　　　注意鏈接資料庫時，使用 try{}catch(){} 固定格式，便于連接例外問題分析；

　　　　首頁界面設計包括頁面布局和資料庫取數邏輯，HTML代碼和PHP代碼穿插結合使用；

　　　　在HTML中參考PHP代碼時，需要使用<?php ?>標識包裹；

　　　　在PHP中參考HTML代碼時，需要使用<script></script>標簽包裹；

　　　　使用 table 串列展示文章串列，PHP獲取資料庫資料時，通過字串拼接的方式生成<tr><td>行，

<?php
    try{
        $con = new PDO("mysql:host=localhost;dbname=dbTest","root","");
        $con->exec('set names utf8');       //也可以在上述PDO()方法的第一個引數中添加“charset=utf8”
        $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
        $sql = "select * from news where 1";
        $res = $con->query($sql);
        $resInfo = $res->fetchAll(PDO::FETCH_ASSOC);
//        print_r($resInfo);
        $newsInfo = "";
        if($res){
            for($i=0;$i<count($resInfo);$i++){
//            通過字串“.”點號拼接的方式獲取“$resInfo”陣列中的資訊，獲取欄位資料使用“{}”包裹變數，
                $newsInfo.="<tr>
                    <td>{$resInfo[$i]['id']}</td><td>{$resInfo[$i]['title']}</td>
                    <td>{$resInfo[$i]['author']}</td><td>{$resInfo[$i]['summary']}</td>
                    <td>{$resInfo[$i]['time']}</td>
                    <td>
                        <a href='https://www.cnblogs.com/husa/p/updNews.php?id={$resInfo[$i]['id']}'>修改</a>
                        <a href='https://www.cnblogs.com/husa/p/delNews.php?id={$resInfo[$i]['id']}'>洗掉</a>
                        <a href='https://www.cnblogs.com/husa/p/detailNews.php?id={$resInfo[$i]['id']}'>詳情</a>
                    </td>
                </tr>";
            }
        }else{
            echo '<script>alert("資料為空")</script>';
        }                             
    }catch(PDOException $e){
        echo '資料庫連接失敗！錯誤資訊：'.$e->getMessage();
    }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>秋香news</title>
    <link rel="stylesheet" href="https://www.cnblogs.com/husa/p/JSFiles/bootstrap.min.css">
    <script src="https://www.cnblogs.com/husa/p/JSFiles/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

    <style>
        .container{
            margin:20px auto;
        }
        th{
            text-align: center;
            vertical-align: middle!important;   //此處樣式需要使用“!important”強制優先，樣式才會生效！
        }

        .leftCon{
            border-left: 1px solid hotpink;
        }
        .leftCon a{
            display: block;
            margin: 10px 0;
            padding: 2px 0;
            color: darkorange;
            border-bottom: 1px solid pink;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div  >
    <div  >
        <div >
            <a href='https://www.cnblogs.com/husa/p/#'>檔案串列</a>
            <a href='https://www.cnblogs.com/husa/p/create.html'>添加文章</a>
        </div>
        <div >
            <table >
                <thead >
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">標題</th>
                    <th scope="col">作者</th>
                    <th scope="col">文章概要</th>
                    <th scope="col">時間</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody >
                    <?php
                        echo $newsInfo;
                    ?>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

　　⑵ create.html 新增文章頁面

　　　　使用 form 表單形式創建界面，表單提交的欄位 name 須與后臺接收欄位名一致！

　　　　BootStrap 組件中，label標簽的 for 屬性值與input標簽的 id 屬性值必須保持一致！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>新增文章</title>
    <link rel="stylesheet" href="https://www.cnblogs.com/husa/p/JSFiles/bootstrap.min.css">
    <script src="https://www.cnblogs.com/husa/p/JSFiles/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

    <style>
        .container{
            margin:20px auto;
        }
        .btn{
            display: block;
            margin: 0 auto;
        }

        .leftCon{
            border-left: 1px solid hotpink;
        }
        .leftCon a{
            display: block;
            margin: 5px 0;
            padding: 2px 0;
            color: darkorange;
            border-bottom: 1px solid pink;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div  >
    <div  >
        <div >
            <a href='https://www.cnblogs.com/husa/p/#'>創建文章</a>
        </div>
        <div >
<!--        form表單提交目標地址使用 action 屬性定義    -->
            <form action="submit.php" method="post">
                <div >
                    <label for="inputTitle" >標題</label>
                    <div >
                        <input type="text"  id="inputTitle" name="inputTitle">
                    </div>
                </div>
                <div >
                    <label for="inputAuthor" >作者</label>
                    <div >
                        <input type="text"  id="inputAuthor" name="inputAuthor">
                    </div>
                </div>
                <div >
                    <label for="inputSummary" >概要</label>
                    <div >
                        <input type="text"  id="inputSummary" name="inputSummary">
                    </div>
                </div>
                <div >
                    <label for="inputContent" >內容</label>
                    <div >
                        <textarea type="text"  id="inputContent" rows="15" name="inputContent"></textarea>
                    </div>
                </div>
                <button type="submit" >Submit</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

　　⑶ submit.php提交資料頁面

　　　　可使用“$_GET”或“$_POST”方法接收前臺頁面發送的資料，方法在 form method屬性中定義；

　　　　接收資料時可以使用三目運算判斷欄位值是否為空的情況；

　　　　操作時間直接使用 time() 方法生成系統時間，不需要接收；

　　　　注意設定默認時區，方法：date_default_timezone_set('Asia/Shanghai');

　　　　呼叫欄位值時，使用“{}”包裹變數；

　　　　使用“echo()”方法向前臺回傳資料，回傳內容可以是 <script>代碼，

<?php
    //接收前臺頁面提交的資訊，可通過三目運算判斷值是否為空，
    $id=isset($_POST['inputId'])?$_POST['inputId']:'';
    $title=isset($_POST['inputTitle'])?$_POST['inputTitle']:'';
    $author=isset($_POST['inputAuthor'])?$_POST['inputAuthor']:'';
    $summary=isset($_POST['inputSummary'])?$_POST['inputSummary']:'';
    $content=isset($_POST['inputContent'])?$_POST['inputContent']:'';
    date_default_timezone_set('Asia/Shanghai');
    $time=date('Y-m-d H:i:s',time());
    try{
        $con=new PDO('mysql:host=localhost;dbname=dbTest;charset=utf8','root','');
        $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
//        接收資訊寫入資料庫，SQL接收資料欄位時使用 {} 提取!!!
        if($id==''){
            $sql="insert into news(title,author,summary,content,time) values('{$title}','{$author}','{$summary}','{$content}','{$time}')";
            $res=$con->query($sql);
            if($res){
    //        回傳操作資訊，可以直接在PHP中回傳js陳述句給前臺
                echo '<script>alert("創建成功！");window.location.href="https://www.cnblogs.com/husa/p/index.php"</script>';
            }else{
                echo "創建失敗！";
            }
        }else{
            $sql="update news set title='{$title}',author='{$author}',summary='{$summary}',content='{$content}',time='{$time}' where id='{$id}'";
            $res=$con->query($sql);
            if($res){
    //        回傳操作資訊，可以直接在PHP中回傳js陳述句給前臺
                echo '<script>alert("修改成功！");window.location.href="https://www.cnblogs.com/husa/p/index.php"</script>';
            }else{
                echo "修改失敗！";
            }
        }
    }catch(PDOException $e){
        echo "資料庫連接失敗！錯誤資訊：".$e->getMessage();
    }
?>

　　⑷ delnews.php 洗掉資料

　　　　洗掉、修改、詳情操作均通過在前臺定義<a>標簽的方式，發送操作指令；

　　　　在<a>標簽中設定href鏈接地址，url后接“?”將當前操作id發送至后臺；

　　　　后臺使用“$_GET”方法接收id值，判斷洗掉對應的資料行，

<?php
    $id=isset($_GET['id'])?$_GET['id']:'';
    if($id){
        try{
            $con=new PDO('mysql:host=localhost;dbname=dbTest;charset=utf8','root','');
            $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
    //        接收資訊寫入資料庫，SQL接收資料欄位時使用 {} 提取
            $sql="delete from news where id={$id}";
            $res=$con->query($sql);
            if($res){
    //        回傳操作資訊，可以直接在PHP中回傳js陳述句給前臺
                echo '<script>alert("洗掉成功！");window.location.href="https://www.cnblogs.com/husa/p/index.php"</script>';
            }else{
                echo "洗掉失敗！";
            }
        }catch(PDOException $e){
            echo "資料庫連接失敗！錯誤資訊：".$e->getMessage();
        }
    }else{
        echo "洗掉資料ID不存在！";
    }
?>

　　⑸ updnews.php 修改資料

　　　　獲取操作資料行id后查詢資料庫，同新增資料頁面樣式展示目標資料；

　　　　在 input value屬性中設定 PHP 輸出代碼，將查詢資料展示到界面；

　　　　提交資料可以與新增提交共用后臺邏輯，使用if判斷新增還是修改，

<?php
    $id=isset($_GET['id'])?$_GET['id']:'';
    if($id){
        try{
            $con=new PDO('mysql:host=localhost;dbname=dbTest;charset=utf8','root','');
            $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
    //        接收ID值，通過id查詢該條資料，使用 {} 獲取id，
            $sql = "select * from news where id={$id}";
            $res = $con->query($sql);
            $resInfo = $res->fetchAll(PDO::FETCH_ASSOC);
//            print_r($resInfo);
        }catch(PDOException $e){
            echo "資料庫連接失敗！錯誤資訊：".$e->getMessage();
        }
    }else{
        echo "資料查詢失敗！";
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>新增文章</title>
    <link rel="stylesheet" href="https://www.cnblogs.com/husa/p/JSFiles/bootstrap.min.css">
    <script src="https://www.cnblogs.com/husa/p/JSFiles/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

    <style>
        .container{
            margin:20px auto;
        }
        .btn{
            display: block;
            margin: 0 auto;
        }

        .leftCon{
            border-left: 1px solid hotpink;
        }
        .leftCon a{
            display: block;
            margin: 5px 0;
            padding: 2px 0;
            color: darkorange;
            border-bottom: 1px solid pink;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div  >
    <div  >
        <div >
            <a href='https://www.cnblogs.com/husa/p/#'>修改文章</a>
        </div>
        <div >
<!--        form表單提交目標地址使用 action 屬性定義    -->
            <form action="update.php" method="post">
<!--            添加 id 欄位用于提交后臺時根據 id條件判斷修改哪一條資料，display隱藏顯示，   -->
                <input type="number" style="display:none" name="inputId" value="https://www.cnblogs.com/husa/p/<?php echo $resInfo[0]['id'] ?>">
                <div >
                    <label for="inputTitle" >標題</label>
                    <div >
<!--                    注意：通過<input>標簽的 value 屬性進行賦值，賦值時必須使用 PHP echo 格式輸出！！    -->
                        <input type="text"  id="inputTitle" name="inputTitle" value="https://www.cnblogs.com/husa/p/<?php echo $resInfo[0]['title'] ?>">
                    </div>
                </div>
                <div >
                    <label for="inputAuthor" >作者</label>
                    <div >
                        <input type="text"  id="inputAuthor" name="inputAuthor" value="https://www.cnblogs.com/husa/p/<?php echo $resInfo[0]['author'] ?>">
                    </div>
                </div>
                <div >
                    <label for="inputSummary" >概要</label>
                    <div >
                        <input type="text"  id="inputSummary" name="inputSummary" value="https://www.cnblogs.com/husa/p/<?php echo $resInfo[0]['summary'] ?>">
                    </div>
                </div>
                <div >
                    <label for="inputContent" >內容</label>
                    <div >
<!--                    注意：<textarea>未塊級元素，直接在標簽內部賦值！！  -->
                        <textarea type="text"  id="inputContent" rows="15" name="inputContent"><?php echo $resInfo[0]['content'] ?></textarea>
                    </div>
                </div>
                <button type="submit" >Submit</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

　　⑹ update.php 提交修改資料

<?php
    $id=isset($_POST['inputId'])?$_POST['inputId']:'';
    if($id){
        $title=isset($_POST['inputTitle'])?$_POST['inputTitle']:'';
        $author=isset($_POST['inputAuthor'])?$_POST['inputAuthor']:'';
        $summary=isset($_POST['inputSummary'])?$_POST['inputSummary']:'';
        $content=isset($_POST['inputContent'])?$_POST['inputContent']:'';
        date_default_timezone_set('Asia/Shanghai');
        $time=date('Y-m-d H:i:s',time());
        try{
            $con=new PDO("mysql:host=localhost;dbname=dbTest;charset=utf8","root","");
            $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
            $sql="update news set title='{$title}',author='{$author}',summary='{$summary}',content='{$content}',time='{$time}' where id='{$id}'";
            $res=$con->query($sql);
            if($res){
                echo '<script>alert("修改成功！");window.location.href="https://www.cnblogs.com/husa/p/index.php"</script>';
            }else{
                echo "<script>alert('修改失敗！');window.location.href='https://www.cnblogs.com/husa/p/index.php'</script>";
            }
        }catch(PDOException $err){
            echo "當前資料id不存在！".$err->getMessage();
        }
    }
?>

　　⑺ detailnews.php 查詢詳情

　　　　在PHP中通過id查詢操作資料，然后在HTML中展示結果；

　　　　HTML中展示查詢結果時，使用PHP代碼獲取資料，

<?php
    $id=isset($_GET['id'])?$_GET['id']:'';
    if($id){
        try{
            $con = new PDO("mysql:host=localhost;dbname=dbTest","root","");
            $con->exec('set names utf8');       //也可以在上述PDO()方法的第一個引數中添加“charset=utf8”
            $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
            $sql = "select * from news where id='{$id}'";
            $res = $con->query($sql);
            $resInfo = $res->fetchAll(PDO::FETCH_ASSOC);
//            print_r($resInfo);
        }catch(PDOException $e){
            echo '資料庫連接失敗！錯誤資訊：'.$e->getMessage();
        }
    }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>news正文</title>
    <link rel="stylesheet" href="https://www.cnblogs.com/husa/p/JSFiles/bootstrap.min.css">
    <script src="https://www.cnblogs.com/husa/p/JSFiles/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

    <style>
        .container{
            margin:20px auto;
        }
        h3{
            height: 50px;
        }
        small{
            height: 20px;
        }
        .leftSpan{
            left:0;
        }
        .rightSpan{
            display:block;
            right:0;
            float:right;
        }
    </style>
</head>
<body>
<div  >
    <div  >
        <div >
            <h3><?php echo $resInfo[0]['title'] ?></h3>
            <small>
                <span ><?php echo $resInfo[0]['author']?></span>
                <span ><?php echo $resInfo[0]['time'] ?></span>
            </small>
            <p style="margin:10px auto;padding:20px 0 10px;border-top:1px solid pink">
                <?php echo $resInfo[0]['summary'] ?>
            </p>
            <p><?php echo $resInfo[0]['content'] ?></p>
        <div>

    </div>
<!--         -->
</div>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/251391.html

標籤：PHP

上一篇：laravel 學習筆記 —— 神奇的服務容器

下一篇：php壓縮檔案夾并下載到本地