內容選單標籤

2019年9月26日 星期四

Class







------------------------------------------   add.php




------------------------------------------   add.html
      1 <!DOCTYPE html>
      2 <html>
      3     <head>
      4         <title>郭老師資訊學園</title>
      5         <meta charset="utf-8">
      6         <link href="WebStyle.css" rel="stylesheet" type="text/css">
      7     </head>
      8     <body>
      9         <header>
     10             <h1>功能選單</h1>
     11             <nav>修改密碼 線上測驗 療聊園地
     12             </nav>
     13         </header>
     14         <section>
     15         </section>
     16         <article>
     17             <form action="add.php" method="post">
     18                 <table>
     19                     <tr>
     20                         <td>年級</td>
     21                         <td>
     22                             <select name="gra" required>
     23                                 <option value="">請選擇</option>
     24                                 <option value="7">7</option>
     25                                 <option value="8">8</option>
     26                                 <option value="9">9</option>
     27                             </select>
     28                         </td>
     29                         <td>班級</td>
     30                         <td>
     31                             <select name="cla" required>
     32                                 <option value="">請選擇</option>
     33                                 <option value="01">01</option>
     34                                 <option value="02">02</option>
     35                                 <option value="03">03</option>
     36                                 <option value="04">04</option>
     37                                 <option value="05">05</option>
     38                                 <option value="06">06</option>
     39                                 <option value="07">07</option>
     40                                 <option value="08">08</option>
     41                                 <option value="09">09</option>
     42                                 <option value="10">10</option>
     43                                 <option value="11">11</option>
     44                                 <option value="12">12</option>
     45                                 <option value="13">13</option>
     46                                 <option value="14">14</option>
     47                                 <option value="15">15</option>
     48                                 <option value="16">16</option>
     49                                 <option value="17">17</option>
     50                                 <option value="18">18</option>
     51                                 <option value="19">19</option>
     52                             </select>
     53                         </td>
     54                         <td>座號</td>
     55                         <td>
     56                             <select name="sno" required>
     57                                 <option value="">請選擇</option>
     58                                 <option value="01">01</option>
     59                                 <option value="02">02</option>
     60                                 <option value="03">03</option>
     61                                 <option value="04">04</option>
     62                                 <option value="05">05</option>
     63                                 <option value="06">06</option>
     64                                 <option value="07">07</option>
     65                                 <option value="08">08</option>
     66                                 <option value="09">09</option>
     67                                 <option value="10">10</option>
     68                                 <option value="11">11</option>
     69                                 <option value="12">12</option>
     70                                 <option value="13">13</option>
     71                                 <option value="14">14</option>
     72                                 <option value="15">15</option>
     73                                 <option value="16">16</option>
     74                                 <option value="17">17</option>
     75                                 <option value="18">18</option>
     76                                 <option value="19">19</option>
     77                                 <option value="20">20</option>
     78                                 <option value="21">21</option>
     79                                 <option value="22">22</option>
     80                                 <option value="23">23</option>
     81                                 <option value="24">24</option>
     82                                 <option value="25">25</option>
     83                                 <option value="26">26</option>
     84                                 <option value="27">27</option>
     85                                 <option value="28">28</option>
     86                                 <option value="29">29</option>
     87                             </select>
     88                         </td>
     89                     </tr>
     90                     <tr>
     91                         <td>姓名</td>
     92                         <td>
     93                             <input name="na" type="text" required>
     94                         </td>
     95                         <td>密碼</td>
     96                         <td>
     97                             <input name="pwd" type="password" required>
     98                         </td>
     99                     </tr>
    100                      <tr>
    101                         <td>
    102                         </td>
    103                     </tr>
    104                     <tr>
    105                         <td>
    106                             <input type="submit" value="註冊資料" name="ok">
    107
    108                         </td>
    109
    110                     </tr>
    111
    112                 </table>
    113
    114             </form>
    115         </article>
    116         <footer><p>Copyright © 2019 GuoChin All Rights Reserved</p></footer>
    117     </body>
    118 </html>








------------------------------------------   login.php

      1 <?php
      2 if (isset($_POST['pwd'])){
      3         $conn=mysqli_connect("localhost","root","db123456","kkdb");
      4
      5         if (mysqli_connect_errno($conn))
      6            die("無法連線!");
      7
      8         mysqli_set_charset($conn,"utf8");
      9
     10         $sql="SELECT * FROM tblstu WHERE gra='".$_POST['gra']."' AND cla='".$_POST['cla']."'         AND sno='".$_POST['sno']."' AND pwd='".$_POST['pwd']."'";
     11         $rslt=mysqli_query($conn,$sql);
     12         $cnt=mysqli_num_rows($rslt);
     13         if ($cnt>0){
     14                 header("Location:menu.html");
     15         }
     16         else{
     17 ?>
     18                 <script language="javascript">;
     19                 alert("沒有註冊資料!請先註冊...");
     20                 window.location.href="add.html"
     21                 </script>;
     22 <?php
     23 //                header("Location:add.html");
     24         }
     25 }
     26 ?>




------------------------------------------   index.html
      1 <!DOCTYPE html>
      2 <html>
      3     <head>
      4         <title>郭老師資訊學園</title>
      5         <meta charset="utf-8">
      6         <link href="WebStyle.css" rel="stylesheet" type="text/css">
      7     </head>
      8     <body>
      9         <header>
     10             <h1>同學登入</h1>
     11             <nav>修改密碼 線上測驗 療聊園地
     12             </nav>
     13         </header>
     14         <section>
     15         </section>
     16         <article>
     17             <form action="login.php" method="post">
     18                 <table>
     19                     <tr>
     20                         <td>年級</td>
     21                         <td>
     22                             <select name="gra" required>
     23                                 <option value="">請選擇</option>
     24                                 <option value="7">7</option>
     25                                 <option value="8">8</option>
     26                                 <option value="9">9</option>
     27                             </select>
     28                         </td>
     29                         <td>班級</td>
     30                         <td>
     31                             <select name="cla" required>
     32                                 <option value="">請選擇</option>
     33                                 <option value="01">01</option>
     34                                 <option value="02">02</option>
     35                                 <option value="03">03</option>
     36                                 <option value="04">04</option>
     37                                 <option value="05">05</option>
     38                                 <option value="06">06</option>
     39                                 <option value="07">07</option>
     40                                 <option value="08">08</option>
     41                                 <option value="09">09</option>
     42                                 <option value="10">10</option>
     43                                 <option value="11">11</option>
     44                                 <option value="12">12</option>
     45                                 <option value="13">13</option>
     46                                 <option value="14">14</option>
     47                                 <option value="15">15</option>
     48                                 <option value="16">16</option>
     49                                 <option value="17">17</option>
     50                                 <option value="18">18</option>
     51                                 <option value="19">19</option>
     52                             </select>
     53                         </td>
     54                         <td>座號</td>
     55                         <td>
     56                             <select name="sno" required>
     57                                 <option value="">請選擇</option>
     58                                 <option value="01">01</option>
     59                                 <option value="02">02</option>
     60                                 <option value="03">03</option>
     61                                 <option value="04">04</option>
     62                                 <option value="05">05</option>
     63                                 <option value="06">06</option>
     64                                 <option value="07">07</option>
     65                                 <option value="08">08</option>
     66                                 <option value="09">09</option>
     67                                 <option value="10">10</option>
     68                                 <option value="11">11</option>
     69                                 <option value="12">12</option>
     70                                 <option value="13">13</option>
     71                                 <option value="14">14</option>
     72                                 <option value="15">15</option>
     73                                 <option value="16">16</option>
     74                                 <option value="17">17</option>
     75                                 <option value="18">18</option>
     76                                 <option value="19">19</option>
     77                                 <option value="20">20</option>
     78                                 <option value="21">21</option>
     79                                 <option value="22">22</option>
     80                                 <option value="23">23</option>
     81                                 <option value="24">24</option>
     82                                 <option value="25">25</option>
     83                                 <option value="26">26</option>
     84                                 <option value="27">27</option>
     85                                 <option value="28">28</option>
     86                                 <option value="29">29</option>
     87                             </select>
     88                         </td>
     89                     </tr>
     90                     <tr>
     91                         <td>密碼</td>
     92                         <td>
     93                             <input name="pwd" type="password" required>
     94                         </td>
     95                     </tr>
     96                     <tr>
     97                         <td>
     98                             <input type="submit" value="登入網站" name="ok">
     99                         </td>
    100                     </tr>
    101                 </table>
    102             </form>
    103         </article>
    104         <footer><p>Copyright © 2019 GuoChin All Rights Reserved</p></footer>
    105     </body>
    106 </html>



2019年9月25日 星期三

test

SQL file:

SQL file:

--
-- Table structure for table `players`
--

CREATE TABLE `players` (
`id` int(11) NOT NULL auto_increment,
`firstname` varchar(32) NOT NULL,
`lastname` varchar(32) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `players`
--

INSERT INTO `players` VALUES(1, 'Bob', 'Baker');
INSERT INTO `players` VALUES(2, 'Tim', 'Thomas');
INSERT INTO `players` VALUES(3, 'Rachel', 'Roberts');
INSERT INTO `players` VALUES(4, 'Sam', 'Smith');
Save these php files all in the same folder in a place where you can run them using your server (I'm assuming you are using something like WAMP for the server? I'm not sure if Dreamweaver includes something like that by default.)

connect-db.php

<?php

// server info
$server = 'localhost';
$user = 'root';
$pass = 'root';
$db = 'records2';

// connect to the database
$mysqli = new mysqli($server, $user, $pass, $db);

// show errors (remove this line if on a live site)
mysqli_report(MYSQLI_REPORT_ERROR);

?>
view.php (non-paginated -- will just display one long list of members)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>View Records</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>

<h1>View Records</h1>

<p><b>View All</b> | <a href="view-paginated.php">View Paginated</a></p>

<?php
// connect to the database
include('connect-db.php');

// get the records from the database
if ($result = $mysqli->query("SELECT * FROM players ORDER BY id"))
{
// display records if there are records to display
if ($result->num_rows > 0)
{
// display records in a table
echo "<table border='1' cellpadding='10'>";

// set table headers
echo "<tr><th>ID</th><th>First Name</th><th>Last Name</th><th></th><th></th></tr>";

while ($row = $result->fetch_object())
{
// set up a row for each record
echo "<tr>";
echo "<td>" . $row->id . "</td>";
echo "<td>" . $row->firstname . "</td>";
echo "<td>" . $row->lastname . "</td>";
echo "<td><a href='records.php?id=" . $row->id . "'>Edit</a></td>";
echo "<td><a href='delete.php?id=" . $row->id . "'>Delete</a></td>";
echo "</tr>";
}

echo "</table>";
}
// if there are no records in the database, display an alert message
else
{
echo "No results to display!";
}
}
// show an error if there is an issue with the database query
else
{
echo "Error: " . $mysqli->error;
}

// close database connection
$mysqli->close();

?>

<a href="records.php">Add New Record</a>
</body>
</html>
view-paginated.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>View Records</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>

<h1>View Records</h1>

<?php
// connect to the database
include('connect-db.php');

// number of results to show per page
$per_page = 3;

// figure out the total pages in the database
if ($result = $mysqli->query("SELECT * FROM players ORDER BY id"))
{
if ($result->num_rows != 0)
{
$total_results = $result->num_rows;
// ceil() returns the next highest integer value by rounding up value if necessary
$total_pages = ceil($total_results / $per_page);

// check if the 'page' variable is set in the URL (ex: view-paginated.php?page=1)
if (isset($_GET['page']) && is_numeric($_GET['page']))
{
$show_page = $_GET['page'];

// make sure the $show_page value is valid
if ($show_page > 0 && $show_page <= $total_pages)
{
$start = ($show_page -1) * $per_page;
$end = $start + $per_page;
}
else
{
// error - show first set of results
$start = 0;
$end = $per_page;
}
}
else
{
// if page isn't set, show first set of results
$start = 0;
$end = $per_page;
}

// display pagination
echo "<p><a href='view.php'>View All</a> | <b>View Page:</b> ";
for ($i = 1; $i <= $total_pages; $i++)
{
if (isset($_GET['page']) && $_GET['page'] == $i)
{
echo $i . " ";
}
else
{
echo "<a href='view-paginated.php?page=$i'>$i</a> ";
}
}
echo "</p>";

// display data in table
echo "<table border='1' cellpadding='10'>";
echo "<tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th></th> <th></th></tr>";

// loop through results of database query, displaying them in the table
for ($i = $start; $i < $end; $i++)
{
// make sure that PHP doesn't try to show results that don't exist
if ($i == $total_results) { break; }

// find specific row
$result->data_seek($i);
$row = $result->fetch_row();

// echo out the contents of each row into a table
echo "<tr>";
echo '<td>' . $row[0] . '</td>';
echo '<td>' . $row[1] . '</td>';
echo '<td>' . $row[2] . '</td>';
echo '<td><a href="records.php?id=' . $row[0] . '">Edit</a></td>';
echo '<td><a href="delete.php?id=' . $row[0] . '">Delete</a></td>';
echo "</tr>";
}

// close table>
echo "</table>";
}
else
{
echo "No results to display!";
}
}
// error with the query
else
{
echo "Error: " . $mysqli->error;
}

// close database connection
$mysqli->close();

?>

<a href="records.php">Add New Record</a>
</body>
</html>
</html>
records.php (create a new record/edit existing records)


<?php
/*
Allows the user to both create new records and edit existing records
*/

// connect to the database
include("connect-db.php");

// creates the new/edit record form
// since this form is used multiple times in this file, I have made it a function that is easily reusable
function renderForm($first = '', $last ='', $error = '', $id = '')
{ ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
<?php if ($id != '') { echo "Edit Record"; } else { echo "New Record"; } ?>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h1><?php if ($id != '') { echo "Edit Record"; } else { echo "New Record"; } ?></h1>
<?php if ($error != '') {
echo "<div style='padding:4px; border:1px solid red; color:red'>" . $error
. "</div>";
} ?>

<form action="" method="post">
<div>
<?php if ($id != '') { ?>
<input type="hidden" name="id" value="<?php echo $id; ?>" />
<p>ID: <?php echo $id; ?></p>
<?php } ?>

<strong>First Name: *</strong> <input type="text" name="firstname"
value="<?php echo $first; ?>"/><br/>
<strong>Last Name: *</strong> <input type="text" name="lastname"
value="<?php echo $last; ?>"/>
<p>* required</p>
<input type="submit" name="submit" value="Submit" />
</div>
</form>
</body>
</html>

<?php }



/*

EDIT RECORD

*/
// if the 'id' variable is set in the URL, we know that we need to edit a record
if (isset($_GET['id']))
{
// if the form's submit button is clicked, we need to process the form
if (isset($_POST['submit']))
{
// make sure the 'id' in the URL is valid
if (is_numeric($_POST['id']))
{
// get variables from the URL/form
$id = $_POST['id'];
$firstname = htmlentities($_POST['firstname'], ENT_QUOTES);
$lastname = htmlentities($_POST['lastname'], ENT_QUOTES);

// check that firstname and lastname are both not empty
if ($firstname == '' || $lastname == '')
{
// if they are empty, show an error message and display the form
$error = 'ERROR: Please fill in all required fields!';
renderForm($firstname, $lastname, $error, $id);
}
else
{
// if everything is fine, update the record in the database
if ($stmt = $mysqli->prepare("UPDATE players SET firstname = ?, lastname = ?
WHERE id=?"))
{
$stmt->bind_param("ssi", $firstname, $lastname, $id);
$stmt->execute();
$stmt->close();
}
// show an error message if the query has an error
else
{
echo "ERROR: could not prepare SQL statement.";
}

// redirect the user once the form is updated
header("Location: view.php");
}
}
// if the 'id' variable is not valid, show an error message
else
{
echo "Error!";
}
}
// if the form hasn't been submitted yet, get the info from the database and show the form
else
{
// make sure the 'id' value is valid
if (is_numeric($_GET['id']) && $_GET['id'] > 0)
{
// get 'id' from URL
$id = $_GET['id'];

// get the recod from the database
if($stmt = $mysqli->prepare("SELECT * FROM players WHERE id=?"))
{
$stmt->bind_param("i", $id);
$stmt->execute();

$stmt->bind_result($id, $firstname, $lastname);
$stmt->fetch();

// show the form
renderForm($firstname, $lastname, NULL, $id);

$stmt->close();
}
// show an error if the query has an error
else
{
echo "Error: could not prepare SQL statement";
}
}
// if the 'id' value is not valid, redirect the user back to the view.php page
else
{
header("Location: view.php");
}
}
}



/*

NEW RECORD

*/
// if the 'id' variable is not set in the URL, we must be creating a new record
else
{
// if the form's submit button is clicked, we need to process the form
if (isset($_POST['submit']))
{
// get the form data
$firstname = htmlentities($_POST['firstname'], ENT_QUOTES);
$lastname = htmlentities($_POST['lastname'], ENT_QUOTES);

// check that firstname and lastname are both not empty
if ($firstname == '' || $lastname == '')
{
// if they are empty, show an error message and display the form
$error = 'ERROR: Please fill in all required fields!';
renderForm($firstname, $lastname, $error);
}
else
{
// insert the new record into the database
if ($stmt = $mysqli->prepare("INSERT players (firstname, lastname) VALUES (?, ?)"))
{
$stmt->bind_param("ss", $firstname, $lastname);
$stmt->execute();
$stmt->close();
}
// show an error if the query has an error
else
{
echo "ERROR: Could not prepare SQL statement.";
}

// redirec the user
header("Location: view.php");
}

}
// if the form hasn't been submitted yet, show the form
else
{
renderForm();
}
}

// close the mysqli connection
$mysqli->close();
?>
delete.php


<?php

// connect to the database
include('connect-db.php');

// confirm that the 'id' variable has been set
if (isset($_GET['id']) && is_numeric($_GET['id']))
{
// get the 'id' variable from the URL
$id = $_GET['id'];

// delete record from database
if ($stmt = $mysqli->prepare("DELETE FROM players WHERE id = ? LIMIT 1"))
{
$stmt->bind_param("i",$id);
$stmt->execute();
$stmt->close();
}
else
{
echo "ERROR: could not prepare SQL statement.";
}
$mysqli->close();

// redirect user after delete is successful
header("Location: view.php");
}
else
// if the 'id' variable isn't set, redirect the user
{
header("Location: view.php");
}

?>

2019年9月18日 星期三

Apache+php+Mariadb 系統


MYSQLi 相關函數連結資料庫流程

  1. 先連結主機與資料庫 mysqli_connect
  2. 使用 mysqli_query() 函數設定編碼
  3. 使用 mysqli_query() 函數執行 SQL 語法,SQL語法可分為兩種
    1. SQL語法若是 insert into, delete, update 三個語法則會變更資料表內容
    2. SQL語法若是 select 語法,執行 mysqli_query() 後的結果傳遞給變數儲存,接著就可以利用  mysqli_num_rows() 取得查詢後筆數,或者利用 mysqli_fetch_array() 取出每一筆記錄
  4. 使用 mysqli_free_result() 會將 mysqli_query() 執行結果清除
  5. 使用 mysqli_close() 函數關閉 MYSQL 伺服器連結



------------------------------------------------------------------------------

<?php

if (!empty($_POST['gra']) && !empty($_POST['cla']) && !empty($_POST['sno']) && !empty($_POST['pwd'])){
        $conn=mysqli_connect("localhost","root","db123456","kkdb");
        if (mysqli_connect_errno($conn))
           die("無法連線!");
        mysqli_set_charset($conn,"utf8");
        $sql="SELECT * FROM tblstu WHERE gra='".$_POST['gra']."' AND cla='".$_POST['cla']."' AND sno='".$_POST['sno']."' AND pwd='".$_POST['pwd']."'";
echo $sql;

        $rslt=mysqli_query($conn,$sql);
        $cnt=mysqli_num_rows($rslt);
        if ($cnt==1){
                header("Location:00.php");
        }
        else{
                header("Location:index.php");
        }
}
?>


<!DOCTYPE html>
<html>
    <head>
        <title>電腦作業園</title>
        <link href="WebStyle.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <header>
            <h1>同學登入</h1>
            <p>線上測驗 討論專區 留言板區 聊天專區 修改帳號</p>

        </header>
        <article>
            <form action="<?php $_SERVER["PHP_SELF"] ?>" method="post">
                <table>
                    <tr>
                        <td>年級</td>
                        <td><select name="gra">
                            <option value="0">請選擇</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            </select>
                        </td>
                        <td>班級</td>
                        <td><select name="cla">
                            <option value="00">請選擇</option>
                            <option value="01">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                            <option value="06">06</option>
                            <option value="07">07</option>
                            <option value="08">08</option>
                            <option value="09">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            </select>
                        </td>
                        <td>座號</td>
                        <td><select name="sno">
                            <option value="00">請選擇</option>
                            <option value="01">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                            <option value="06">06</option>
                            <option value="07">07</option>
                            <option value="08">08</option>
                            <option value="09">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>

                        </td>

                         <td>密碼</td>
                        <td>
                            <input name="pwd" type="password" required>
                        </td>
                    </tr>

                     <tr>
                        <td>
                            <input type="submit" value="登入網站">
                        </td>
                    </tr>

                    <tr>
                        <td>
                        </td>
                    </tr>



                </table>
            </form>
        </article>

        <footer>
            <p>Copyright © 2019 GuoChin All Rights Reserved</p>
        </footer>
    </body>
</html>





----------------------------------------------------------------------
# yum -y install httpd
# rpm -qa | grep httpd
httpd-tools-2.4.6-90.el7.centos.x86_64
httpd-2.4.6-90.el7.centos.x86_64

# systemctl start httpd.service
# systemctl enable httpd.service
# systemctl status httpd.service

# firewall-cmd --add-service=http --permanent
# firewall-cmd --reload
# firewall-cmd --list-all

http://192.168.1.4/



# yum -y install php php-mysql php-devel php-mbstring
#  rpm -qa | grep php
php-common-5.4.16-46.el7.x86_64
php-pdo-5.4.16-46.el7.x86_64
php-mysql-5.4.16-46.el7.x86_64
php-mbstring-5.4.16-46.el7.x86_64
php-cli-5.4.16-46.el7.x86_64
php-devel-5.4.16-46.el7.x86_64
php-5.4.16-46.el7.x86_64

# vi /etc/php.ini
...
display_errors = On
...
# systemctl restart httpd.service



# yum -y install mariadb-server
mariadb-5.5.64-1.el7.x86_64
mariadb-server-5.5.64-1.el7.x86_64
mariadb-libs-5.5.64-1.el7.x86_64

# systemctl start mariadb.service
# systemctl enable mariadb.service
# systemctl status mariadb.service


# mysqladmin -u root password db123456
# mysql -u root -p
Enter password:


MariaDB [(none)]> create database kkdb character set='utf8' collate='utf8_unicode_ci';
MariaDB [(none)]> use kkdb;

MariaDB [kkdb]> create table tblstu (sid int primary key auto_increment, gra varchar(1), cla varchar(2), sno varchar(2), na varchar(10),  pwd varchar(10));

MariaDB [kkdb]> show create table tblstu \G;
*************************** 1. row ***************************
       Table: tblstu
Create Table: CREATE TABLE `tblstu` (
  `sid` int(11) NOT NULL AUTO_INCREMENT,
  `gra` varchar(1) COLLATE utf8_unicode_ci DEFAULT NULL,
  `cla` varchar(2) COLLATE utf8_unicode_ci DEFAULT NULL,
  `sno` varchar(2) COLLATE utf8_unicode_ci DEFAULT NULL,
  `na` varchar(10) COLLATE utf8_unicode_ci DEFAULT NULL,
  `pwd` varchar(10) COLLATE utf8_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`sid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci



---------------------------------------
<?php
if (!empty($_POST['gra']) && !empty($_POST['cla']) && !empty($_POST['sno']) && !empty($_POST['na']) && !empty($_POST['pwd'])){
        $conn=mysqli_connect("localhost","root","db123456","kkdb");
        if (mysqli_connect_errno($conn))
           die("無法連線!");
        mysqli_set_charset($conn,"utf8");
        $sql="INSERT tblstu(gra,cla,sno,na,pwd)VALUES('{$_POST['gra']}','{$_POST['cla']}','{$_POST['sno']}','{$_POST['na']}','{$_POST['pwd']}')";

        mysqli_query($conn,$sql);
}
?>
<!DOCTYPE html>
<html>
    <head>
        <title>電腦作業園</title>
        <link href="WebStyle.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <header>
            <h1>同學登入</h1>
            <p>線上測驗 討論專區 留言板區 聊天專區 修改帳號</p>

        </header>
        <article>
            <form action="<?php $_SERVER["PHP_SELF"] ?>" method="post">
                <table>
                    <tr>
                        <td>年級</td>
                        <td><select name="gra">
                            <option value="0">請選擇</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            </select>
                        </td>
                        <td>班級</td>
                        <td><select name="cla">
                            <option value="00">請選擇</option>
                            <option value="01">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                            <option value="06">06</option>
                            <option value="07">07</option>
                            <option value="08">08</option>
                            <option value="09">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            </select>
                        </td>
                        <td>座號</td>
                        <td><select name="sno">
                            <option value="00">請選擇</option>
                            <option value="01">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                            <option value="06">06</option>
                            <option value="07">07</option>
                            <option value="08">08</option>
                            <option value="09">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>姓名</td>
                        <td>
                            <input name="na" type="text" required>
                        </td>

                         <td>密碼</td>
                        <td>
                            <input name="pwd" type="password" required>
                        </td>
                    </tr>

                     <tr>
                        <td>
                            <input type="submit" value="登錄資料">
                        </td>
                    </tr>

                    <tr>
                        <td>
                        </td>
                    </tr>



                </table>
            </form>
        </article>

        <footer>
            <p>Copyright © 2019 GuoChin All Rights Reserved</p>
        </footer>
    </body>
</html>




-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------


MariaDB [kkdb]>  create table tblmen (mid int primary key auto_increment, na varchar(20), accnt varchar(20), pwd varchar(20));

MariaDB [kkdb]>  show create table tblmen \G;
*************************** 1. row ******
       Table: tblmen
Create Table: CREATE TABLE `tblmen` (
  `mid` int(11) NOT NULL AUTO_INCREMENT,
  `na` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,
  `accnt` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,
  `pwd` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`mid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci


MariaDB [kkdb]>  insert into tblmen values('','馬英九','act1','pwd1');

MariaDB [kkdb]> select * from tblmen;
+-----+-----------+-------+------+
| mid | na        | accnt | pwd  |
+-----+-----------+-------+------+
|   1 | 馬英九    | act1  | pwd1 |
+-----+-----------+-------+------+


# vi /var/www/html/t1.php
<?php
$conn=mysqli_connect("localhost","root","db123456","kkdb");
if (mysqli_connect_errno($conn))
   die("無法連線!");

echo mysqli_connect_errno($conn);   //0表示沒有錯誤



mysqli_set_charset($conn,"utf8");

$result=mysqli_query($conn,"select * from tblmen");
$row=mysqli_fetch_array($result);
echo $row[1];
echo $row['na'];

echo mysqli_num_rows($result);   //取得查詢結果的筆數


?>


# ls -Z /var/www
drwxr-xr-x. root root system_u:object_r:httpd_sys_content_t:s0 html

# ls -Z /var/www/html
-rw-r--r--. root root system_u:object_r:httpd_sys_content_t:s0 t1.php




---------------------------------------------------------------------------------
------------------------------------------------------
# vi /etc/php.ini
display_errors = On



---------------------------------
# yum install php-mysql -y
# systemctl restart httpd

<?PHP
    $conn=mysqli_connect("localhost","root","db123456");
    if($conn){
        echo"ok";
    }else{
        echo"error";
    }
?>




# vi /etc/selinux/config
...
SELINUX=disabled
...
# shutdown now

# sestatus
SELinux status:                 disabled



安裝apache
# yum install httpd

開啟防火牆 Selinux
# firewall-cmd --zone=public --add-port=80/tcp --permanent

# firewall-cmd --reload

開啟SELINUX

getsebool -a | grep 'httpd'

# setsebool httpd_can_network_connect on

# setsebool httpd_can_network_connect_db on

# setsebool httpd_can_sendmail on

要讓httpd寫入的目錄,例如上傳目錄
# chcon -t httpd_sys_rw_content_t /path/to/upload

要讓httpd讀取的目錄,例如網頁目錄 (預設的/var/www/html已設定)
# chcon -R -t httpd_sys_content_t /path/to/html
安裝PHP7[1]
如果你已有安裝其他版本的PHP,請先移除它們

# yum remove php*

# rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm

# rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm

# yum install php70w php70w-opcache

# yum install php70w-mysqlnd php70w-mbstring php70w-gd

# yum install php70w-pecl-imagick

設定 vi /etc/php.ini
; 時區
date.timezone =  "Asia/Taipei"
; Session 時間改一天
session.gc_maxlifetime = 86400
; 記憶體,預設128M
memory_limit = 1024M
; 上傳大小限制和時間
post_max_size = 20M
upload_max_filesize = 20M
max_input_time = 120
default_socket_timeout = 600



安裝mariadb10
建立 yum repository

# vim /etc/yum.repos.d/MariaDB.repo

[mariadb]
name = MariaDB
baseurl = http://yum.mariadb.org/10.1/centos7-amd64
gpgkey=https://yum.mariadb.org/RPM-GPG-KEY-MariaDB
gpgcheck=1

# yum install MariaDB-server MariaDB-client

啟動
# systemctl enable httpd

# systemctl enable mariadb

# systemctl start mariadb

# systemctl start httpd

你的檔案放在 /var/www/html中

開你的網頁 http://x.x.x.x/ 來測試能不能看到歡迎畫面,我發現這頁還是responsive web design。

如果出現forbidden代表selinux或檔案權限問題,如果等很久沒頁面是防火牆問題。

其他的問題原因太複雜得CASE by CASE







 HomeMySQL查詢已安裝的 MySQL / MariaDB 版本
查詢已安裝的 MySQL / MariaDB 版本 Sam Tang  23 March 2017  MySQL  No Comments


由於各個 MySQL 的版本都略有不同,而且又有 MaridDB 或 Percona 等分支版本, 很多時系統管理員都需要查詢系統內的 MySQL 版本,要查詢系統內的 MySQL 版本,以下列出幾種查詢 MySQL 版本的方法。

CLI

在 CLI 查詢 MySQL 版本十分簡單,用 mysql 指令便可以, 而且不用登入 MySQL:

$ mysql -V
執行後會輸出 MySQL 的版本, 以下是在 CentOS 用 yum 安裝 MariaDB 版本例子:

mysql Ver 15.1 Distrib 5.5.52-MariaDB, for Linux (x86_64) using readline 5.1
除了用 mysql 指令外,如果 MySQL 是用系統的套件管理工具安裝,也可以用套件管理工具查詢, 但這個方法的缺點是, 必須要知道 MySQL 版本的分支, 例如是 MySQL, MariaDB 或 Percona, 以下是查詢 MariaDB 版本的例子:



# rpm -qa | grep mariadb
執行後會有類似下的輸出:

mariadb-libs-5.5.52-1.el7.x86_64
mariadb-5.5.52-1.el7.x86_64
mariadb-server-5.5.52-1.el7.x86_64

MySQL Client
MariaDB [(none)]> select version();

2019年9月16日 星期一

class

<?php
if ($_POST["act"]=="login"){
        $db_link=mysql_connect("localhost","root","db123456");
        $db_sel=mysql_select_db("class");
        $str_sel="SELECT * FROM `tblmen` WHERE `gra`= '".$_POST["gra"]."' AND 'cla'='".$POST["cla"]."' AND 'snum'='".$POST["snum"]."' AND `pwd`='".$_POST["pwd"]."'";

echo "$str_sel";

        $result=mysql_query($str_sel);
        $data_cnt=mysql_num_rows($result);

        if ($data_cnt==1){
                header("Location:list.php");
        }else{
                header("Location:index.php");
        }

}
?>
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 align="center">會員登入</h1>
<form action="" method="post" name="formAdd">
<table align="center">
<tr>
<td>年級</td>
<td>
<select name="gra">
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
</select>
</td>
</tr>


<tr>
<td>班級</td>
<td>
<select name="cla">
  <option value="01">01</option>
  <option value="02">02</option>
  <option value="03">03</option>
  <option value="04">04</option>
  <option value="05">05</option>
  <option value="06">06</option>
  <option value="07">07</option>
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>


  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
</select>
</td>
</tr>











<tr>
<td>座號</td>
<td>
<select name="snum">
  <option value="01">01</option>
  <option value="02">02</option>
  <option value="03">03</option>
  <option value="04">04</option>

  <option value="05">05</option>
  <option value="06">06</option>
  <option value="07">07</option>
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
</select>

</td>
</tr>

<tr><td>密碼</td><td><input type="text" name="pwd"></td></tr>
<tr><td></td><td>
<input type="hidden" value="login" name="act">
<input type="submit" value="登入" name="ok">
</td></tr>
</table>
</form>
</body>
</html>

2019年9月15日 星期日

HTML5 與CSS



CSS Cascading Style Sheets 串接 (層疊) 樣式表


在HTML中引入CSS 的方法


  • 行內式:

<!DOCTYPE html>
<html>
<header>
<title>測試</title>
</header>
<body>
    <h1 style="color: white;background-color: blue">This is a line of Text.</h1>
</body> 
</html>



  • 嵌入式:

<!DOCTYPE html>
<html>
<header>
    <title>測試</title>
    <style type="text/css">
        h1{color: white;background-color: blue}
    </style>
</header>
<body>
    <h1>This is a line of Text.</h1>
</body> 
</html>



  • 匯入式:

<!DOCTYPE html>
<html>
<header>
    <title>測試</title>
    <style type="text/css">
        @import "kkStyle.css"
    </style>
</header>
<body>
    <h1>This is a line of Text.</h1>
</body> 
</html>


kkStyle.css:
h1{color: white;background-color:brown}



  1. 使用CSS規則引入外部CSS檔
  2. 網頁閃爍一下才呈現樣式效果
  3. 需引入多個CSS檔,作法:引入一個目錄CSS檔,再匯入其他獨立的CSS檔





  • 連結式:

<!DOCTYPE html>
<html>
<header>
    <title>測試</title>
    <link href="kkStyle.css" rel="stylesheet" type="text/css"/>
</header>
<body>
    <h1>This is a line of Text.</h1>
</body> 
</html>



  1. 使用HTML標籤引入外部CSS檔
  2. 網頁從一開始便呈現樣式效果
  3. 僅需引入一個CSS檔





-----------------------------------------------

CSS
基本選擇器selector


  • 標記選擇器

<!DOCTYPE html>
<html>
<header>
    <title>測試</title>
    <style type="text/css">
        h1{color: white;background-color:blueviolet}
    </style>
</header>
<body>
    <h1>This is a line of Text.</h1>
</body> 
</html>



  • 類別選擇器

<!DOCTYPE html>
<html>
<header>
    <title>測試</title>
    <style type="text/css">
        .kkH1{color: white;background-color:blueviolet}
    </style>
</header>
<body>
    <h1 class="kkH1">This is a line of Text.</h1>
</body> 
</html>

一個標記可以同時擁有兩種類別的效果,如:class="one two" ,one 與 two 分別為2種不同樣式效果




  • ID選擇器

<!DOCTYPE html>
<html>
<header>
    <title>測試</title>
    <style type="text/css">
        #kkH1{color: white;background-color:blueviolet}
    </style>
</header>
<body>
    <h1 id="kkH1">This is a line of Text.</h1>
</body> 
</html>

因為要配合 JavaScript 指令也能查找id,所以最好一個id只賦予一個HTML標記




複合選擇器

交集選擇器
聯集選擇器
後代選擇器


CSS層疊衝突時,優先順序:
行內樣式 > ID選擇器 > 類別選擇器 > 標記選擇器




-----------------------------------------------


盒子內部結構

  • 邊框 border
  • 內邊距 padding
  • 外邊距 margin

如果給4個屬性值,依次表示上、右、下、左
如果給3個屬性值,依次表示上、右左、下
如果給2個屬性值,依次表示上下、右左





-----------------------------------------------


單位
相對單位:根據使用者環境而言
em:元素的字體高度,具有繼承關係。
      瀏覽器 --> 父 --> 子 ==>> 1em=16px -->1.5em=1.5*16=24px --> 1.5em=1.5*24=36px
      建議製作網頁以 em 作為字型單位,因為當使用者瀏覽網頁時,若覺得字型大小不適,就        可以在瀏覽器中按相對比例方式變更所有字型的大小。
ex:小寫字母 x 的高度
px:根據螢幕解析度不同而大小有差異。1024*768 螢幕的 1px 比 1280*800 螢幕的 1px 要大些
%:通常設定於表格與網頁寬度

絕對單位:不受工作環境影響
cm:公分
in:吋 1 in = 2.54 cm
pt:點 1pt = 1/72 in 。Word 固定 pt 大小的文字,無論放大顯示到多大,列印出來大小是固定         的,因為是以列印設備之 pt 單位的解析度為準
pc:皮卡 1 pc = 12 pt







^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


HTML5


div、section、article,語義上從無到有,逐漸增強。
div無任何語義,僅僅用作樣式化或者腳本化,
對於一段主題性的內容,比較適用section,
而假設這段內容是可以脫離上下文,作為完整的結構體獨立存在的一段內容,那麼就適合用article。
原則上來說,能使用article的時候,也是可以使用section的。但是視情況而定,假如更適合使用article,那麼就不要使用section了。


--------------------------------   sample   ---------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試</title>
<link rel="stylesheet" media="all" href="kkStyle.css">
</head>
   
<body>
<header>
    <h1>網站布局與美化</h1>
    <nav>
        <ul><li><a href="#">正興網站</a></li></ul>
    </nav>
</header>
   
<section>
    <figure>
        <figcaption>這是我的電腦桌面</figcaption>
        <img src="1.png">
    </figure>
   
    <article>
    <p>
若親民黨主席宋楚瑜確定參選2020總統大選,則前立法院長王金平總統夢恐破滅,據媒體報導,王金平曾與宋楚瑜談論代表親民黨參選總統的意願,但親民黨較希望宋楚瑜參選,且王希望選正的而非副手,因此合作最後無疾而終。王金平3日於三重彭園湘菜館參加三重雲林同鄉會第五、六屆理事長交接典禮,現場媒體詢問是否和宋楚瑜對面會談?王金平回應,「的確有見過面」,但是報紙所報導的26日,他表示,;.,當時人在南部。
王金平3日於三重彭園湘菜館參加三重雲林同鄉會第五、六屆理事長交接典禮,現場媒體詢問是否和宋楚瑜對面會談?王金平回應,「的確有見過面」,但是報紙所報導的26日,他表示,當時人在南部參加幾場婚禮,26日並未見面。王金平3日於三重彭園湘菜館參加三重雲林同鄉會第五、六屆理事長交接典禮,現場媒體詢問是否和宋楚瑜對面會談?王金平回應,「的確有見過面」,但是報紙所報導的26日,他表示,當時人在南部參加幾場婚禮,26日並未見面。
王金平3日於三重彭園湘菜館參加三重雲林同鄉會第五、六屆理事長交接典禮,1 23456789現場媒體詢問是否和宋楚瑜對面會談?王金平回應,「的確有見過面」,但是報紙所報導的26日,他表示,當時人在南部參加幾場婚禮,26日並未見面。王金平3日於三重彭園湘菜館參加三重雲林同鄉會第五、六屆理事長交接典禮,現場媒體詢問是否和宋楚瑜對面會談?王金平回應,「的確有見過面」。     
</p>
<p>
王金平3日於三重彭園湘菜館參加三重雲林同鄉會第五、六屆理事長交接典禮,現場媒體詢問是否和宋楚瑜對面會談?王金平回應,「的確有見過面」,但是報紙所報導的26日,他表示,當時人在南部參加幾場婚禮,26日並未見面。 
</p>
<div id="rounded">       
<p class="kkp">
 據《鏡週刊》報導,王金平和宋楚瑜26日有私下會面,談及合作議題,但因王希望能代表親民黨參選總統,可宋參選總統已是親民黨黨內共識,且王希望能當正的而非副手,因此兩人會談最後無疾而終。 
</p>       
</div>
       
    </article>
</section>   

<footer><p>CopyRight @ All Right Reserve.</p></footer>
</body>
   
</html>

--------------kkStyle.css
body{
    width: 90%;
    margin: 0px auto;
    background-color: #EEFFBB;
    font-family: 新細明體,serif;
    color: #444444;
    font-size: 1em;
    line-height: 1.5em;
    letter-spacing: 3px;
}
header,section,footer{
    background-color: aliceblue;
    border-radius: 10px;
    box-shadow: 3px 3px 4px #AAAAAA;
}

header h1{
    font-family: 微軟正黑;
    font-size: 4em;
    color:aliceblue;
    text-shadow: -2px -2px 0px #FFFFFF, 2px 2px 0px #444444, 2px 2px 6px #888888;
}

article p{
    text-indent: 2em;
    text-align:justify; 
    margin: 20px;
}

#rounded{
    border-style: solid;
    border-width: 1px;
    width: 500px;
    padding: 0px;
    margin: 0px auto;
    border-radius: 20px;
    box-shadow: 3px 3px 3px #AAAAAA;
   
}
.kkp{
    display: block;
    background-color: #CC6600;
    color: #FFFFFF;
    padding: 10px 20px 18px;
    border-radius: 20px;
    //float: right;
}

section{
    //padding-left: 0px;
}
section figure img{
    width: 30%;
    float: left;
    margin-right: 15px;
    //margin-right: 0px;
}

footer p{
    font-family: sans-serif;
    font-size: 2.5em;
    text-shadow: -2px -2px 0px #FFFFFF, 2px 2px 0px #227700;    
}




--------------------------------   sample   ---------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mBot</title>
<link rel="stylesheet" media="all" href="kkStyle.css">
</head>
<body>

<header>
    <h1></h1>
</header>
 
 
<section>
<figure>
    <figcaption></figcaption>
    <img src="01.png" > 
    <img src="02.png" >
</figure>
 
 
<h2></h2> 
 

 
    <p>實作影片</p>
    <video width="400" controls>
        <source src="1.mp4" type="video/mp4">
    </video>
 
 

 
</section>
 
 
<footer><p>Copyright © 2019 GuoChin All Rights Reserved</p></footer>

 
</body> 
</html>


--------------------------------kkStyle.css
body{
    font-family: sans-serif;
    font-size: 2em;
    width: 90%;
    margin: auto;
    background-color: #F0FBD9  ;
}

header,section,footer{
    background-color: #FFF;
    display: block;
    margin: 0px 0px 0px 0px;
}

header,section,footer{ 
    border: 1px solid #CCC;
    border-bottom-right-radius: 0px 0px 50px 0px;
    box-shadow: 5px 0px 10px -3px silver;
}

header h1{
    font-family: 微軟正黑體;
    color: #D1D1D1;
    text-shadow: -1px -1px white, 1px 1px #333;
}


figure {
    border: thin #D35400 solid; 
    padding: 5px;
    margin-bottom: 200px;
}

figure img{
    width: 75%;
    margin-bottom: 100px;
}

figcaption {
    background-color: #145A32;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
    width: 75%;
}

h2{
    font-family: 微軟正黑體;
    color: #FFFC33;
    text-shadow: -1px -1px #A80214, 1px 1px #333;
}

section p{
    font-family: 標楷體;
    text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;
}

video{
    margin-bottom: 100px;
}

footer p{
    font-size: 0.75em;
    text-shadow:  0.1em 0.1em 0.05em #333;
}





--------------------------------   sample   ---------------
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
        <title></title>     
        <link href="WebStyle.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <header>
            <h1></h1>
            <nav>
            </nav>
        </header>
        <section>
        </section>
        <footer><p>Copyright © 2019 GuoChin All Rights Reserved</p></footer>
    </body>
</html>



---------------------------------------- sample



<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
        <title></title>   
        <link href="WebStyle3.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id='container'>
        <header>
            <h1>中華民國</h1>
            <nav>
                <ul>
                    <li><a href='#'>線上測驗</a></li>
                    <li><a href='#'>修改密碼</a></li>
                    <li><a href='#'>吾聊天地</a></li>
                </ul>                         
                  </nav>
        </header>     
        <section>
真的是太厲害了,用手抄寫經文,當成家裡壁紙!台南安南區一位75歲的阿伯,他七八年前退休後,就開始抄寫佛經,當成家裡的壁紙,走進他家,牆壁上、貼滿手寫經文,讓人大開眼界,他受訪時笑著說,對他來講,這也是一種修身養性的方式。
經過台南安南區這裡的透天厝,常常有人會被,這醒目的黃色壁紙,給吸引住停下來看,走近一看,上面密密麻麻的,都是用手寫的佛家經文,整整齊齊大小一致,讓人忍不住讚嘆,而作者就是這位已經75歲的徐阿伯。
這是他家不管是鐵捲門,或是壁磚上頭有護貝過的紙張,是他製作的佛經壁紙,七八年前他退休後,開始用手抄寫經文,當成修身養性的方式,慢慢地,這些妝點家裡的壁紙,讓看過的人印象深刻,阿伯的家,也成為這個區域,最有特色的房子。
        </section>
        <footer><p>Copyright © 2019 GuoChin All Rights Reserved</p></footer>
    </div>
    </body>
</html>


------------------------------------------

body {
  background-color:  #f2ffe6;
  font-family: Verdana;
}

#container {
  width: 960px;
  margin: auto;
  background-color: #ffffff;
}

h1 {
  text-align: center;
  font-size: 3em;
  color: #445566;
  font-family: Times New Roman,Arial Black, Times, Serif;
  font-weight: 500;
  margin: 0;
  padding: 20px;
}
nav {
  background-color: #45bcd2;
  height: 40px;
  margin-bottom: 20px;
  text-align: right;
}

nav ul {
  list-style: none;
  margin: 0;
  padding-top: 5px;
}

nav li {
  display: inline;
  margin-left: 10px;
  margin-right: 10px;
}

nav li a {
  color: white;
}
footer {
  height: 50px;
  background-color: lightgrey;
  text-align: center;
}


----------------------------------------------------------------------