web-9. 動態網頁與數據庫
9. 動態網頁與數據庫
9.1 動態網頁的概念
從靜態網頁到動態網頁的發展史網站建設的革命建設，它實現了用戶客戶端和網站服務器段交互方式的改變，實現了從但反饋到雙向互動的轉變，實現了從單一媒體到互動平臺的轉變，體現了當代網站建設的精髓。
- 什麽是動態網頁
動態網頁就是能夠實現用戶和服務器動態交互，滿足用戶個性化網頁請求的動態HTML（Dynamic HTML，DHTML）。
HTML是一種靜態的網頁設計語言，主要提供文本和圖形的顯示功能，但它卻難以提供對媒體、二維空間移動、精確文字定位、圖形大小和位置動態等動態頁面編輯功能。而DHTML則不同。
DHTML需要一種方法來控制文檔中所有需要控制的元素，這可以通過一些腳本語言來完成。例如：
DHTML和動態數據庫技術不同，它不是面向服務器的腳本，如JavaScript，DHTML的所有操作都可以在客戶端自己完成，除了改變頁面內容外，不需要改變服務器。頁面下載後，無論什麽時候，DHTML都可以處理頁面元素，修改頁面版面、內容和位置，並把結果不斷提供給用戶。
DHTML作為服務器自帶的功能，實際上只是一種技術概念，並不屬於一種專門的技術，而胡思多種技術綜合的結果。
目前，實現DHTML的技術主要有：客戶端的腳本程序語言、DOM（文檔對象模型）、層疊樣式表CSS
- 客戶端腳本程序語言
HTML應用中的客戶端腳本語言有JavaScript、Perl、JScript、VBScript等。在用戶瀏覽網頁的時候，當鼠標在一些圖形和控件上移動時會產生一些奇妙的變化。這些變化就是通過客戶端腳本語言來編寫和實現的。
<html>
<head>
<title>使用一個JavaScript腳本語言寫的一個動態網頁</title>
</head>
<body>
<center>測試你在20s內能單擊幾個框？</center>
<script language="JavaScript">
var total=0;
var play=false;
function display(element)
{
var now=new Date();
if(!paly)
{
play=true;
startTime=now.getTime();
}
if(now.getTime() - startTime > 2000)
{
element.checked=!element.checked;
return;
}
if(element.checked)
total++;
else
total--;
element.form.num.value=5;
}
function restart(from)
{
total=0;
paly=false;
for(var i=1;i<=100;++i)
{
form.elements[i].checked=true;
}
}
document.write("<from><center>");
document.write(‘<input type="text" value="5"‘);
document.write(‘name="num" size=10 onFocus="this.blur()"><br>‘);
document.write("<hr size=1 width=40%>");
for(var i=0;i<10;++i)
{
for(var j=0;j<10;++j)
{
document.write(‘<input type="checkbox"‘);
document.write(‘onClick="display(this)">‘);
}
document.write("<br>");
}
document.write("<hr size=1 width=40%>");
document.write(‘<input type="button" value="restart"‘);
document.write(‘onClick="restart(this.form)">‘);
document.write("</center></form>");
</script>
</body>
</html>
- 文檔對象模型（DOM）
在某種意義上說，DOM是DHTML真正意義上的核心內容，正是它使得HTML具備了活動性。DOM體現的是網頁元素的等級關系，在瀏覽器上，這些元素在指定的時間呈現。DOM包括時空背景信息，如當前時期、時間；包括瀏覽器自身的屬性，如瀏覽器的版本號；包括窗口自身屬性，如網頁的URL；最後還包括個HTML元素，如<p>標記、<div>或者表格。通過將DOM向DHTML語言公開，瀏覽器能夠使網頁更多的功能元素發揮作用。如果像日期、時間之類的元素不能自動變換，它也可以通過JavaScript修改其他元素來完成。
事件模塊（Event Model）與事件
DOM中指定元素進行變換的那部分稱為時間模塊。所謂“事件”指的是對頁面進行的動作，諸如鼠標在頁面的某一個元素上的移動（onMouseOver）、打開網頁（onLoad）、提交一個反饋表單（onSubmit）、單機反饋表輸入區（onFocus）等。
例：
<html>
<head>
<title>編輯產品信息</title>
<script>
function popOnload()
{
if(opener)opener.blockEvents();
}
function popOnUnload()
{
if(opener)opener.unblockEvents();
}
</script>
</head>
<body onload="popOnLoad();" onunload="popOnUnLoad();">
<table>
<tr>
<td>產品名</td>
<td><input type="text" value="電視機"></td>
</tr>
<tr>
<td>編號</td>
<td><input type="text" value="A001"></td>
</tr>
<tr>
<td> </td>
<td><input type="button" value="提交">
<input type="button" value="取消" onclick="window.close()">
</td>
</tr>
</table>
</body>
</html>
- 層疊樣式表（CSS）
CSS屬於DOM的一部分，它的屬性可以通過DHTML編寫的語言得到體現，因此幾乎能夠實現頁面外在視覺效果的一切變化。通過改變頁面元素的CSS屬性（如顏色、位置、大小），可以達到機器的帶寬和處理器的運行速度允許範圍內的一些效果。
註：
CSS是使網頁發生改變的對象，DOM是其具有變動性的機制，而客戶端的腳本語言是世界促成變換的程序。三者結合應用，就構成了動態的HTML。
建立一個1.html文件，一個2.css文件
1.html
<html>
<head>
<link rel="stylesheet" href="2.css" type="text/css">
</head>
<body>
<center>
<h2>歡迎使用超級系統維護軟件</h2>
<div class="table">
<table>
<tr>
<td>用戶名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>自動登錄</td>
<td><input type="checkbox" name="auto"></td>
</tr>
<tr>
<td> </td>
<td align="right"><input type="submit" value="進入" class="botton"></td>
</tr>
</table>
<div id="footer">版權所有：段立勇</div>
</div>
</center>
</body>
</html>
2.css
body,table
{
font:12px Tahoma;
margin:20px;
}
h2{
font:bolder 24px Tahoma;
color:darkred;
}
.table{
border:1px outset lightgrey;
padding:20px;
background:lightyellow;
width:300px;
}
.button{padding:2px 10px 2px 10px;
border:1 out1set white;
background:darkblue;
color:white;
font:bolder 11px Tahoma
}
#footer{
font:10px Tahoma;
margin:30px 10px 10px 10px;
text-align:right;
}
9.2 數據庫的概念
數據庫是計算機內的一個容器，用於存放使用表格組織起來的用戶數據。對這些數據進行管理的計算機軟件就稱為數據庫管理系統。在實際應用中，通常把數據庫以及用戶數據庫管理的計算機軟禁一起稱為數據庫應用系統。
Web數據庫是基於Web的數據庫應用系統。現在的Web應用程序中會大量地使用到數據庫操作。常用的數據庫軟件有SQL Server 7.0。
9.3 數據庫結構設計
數據庫的作用：
數據庫(Database)是按照數據結構來組織、存儲和管理數據的倉庫，它產生於距今六十多年前，隨著信息技術和市場的發展，特別是二十世紀九十年代以後，數據管理不再僅僅是存儲和管理數據，而轉變成用戶所需要的各種數據管理的方式。數據庫有很多種類型，從最簡單的存儲有各種數據的表格到能夠進行海量數據存儲的大型數據庫系統都在各個方面得到了廣泛的應用。
在信息化社會，充分有效地管理和利用各類信息資源，是進行科學研究和決策管理的前提條件。數據庫技術是管理信息系統、辦公自動化系統、決策支持系統等各類信息系統的核心部分，是進行科學研究和決策管理的重要技術手段。
- SQL語言簡介
結構化查詢語言（Structured Query Language，SQL）是關系數據庫管理系統（DataBase Management System，DBMS）中的標準語言，已經被眾多的關系數據庫管理系統所采用，如MSSQL Server、Access、Qracle等。
使用SQL語言，可以從數據庫中獲取數據，建立數據庫和數據庫對象，增加數據、修改數據和失信復雜的查詢功能。它允許用戶在高層的數據結構上工作，而不是對單個記錄進行操作，可操作記錄集。所有的SQL語句接受集合作為輸入，返回集合作為輸出。允許將一條語句的結果作為另一條語句的輸入。
- 數據庫結構設計
在SQL Server中，數據庫把所有的數據與數據庫對象都放在一系列操作文件中，並用文件和文件組管理這些操作系統文件。文件主要分為3中：主文件、從屬文件和日誌文件，每個文件只能屬於一個數據庫。
主文件：
它是一個數據庫的起點，一個數據庫文件只能有一個主文件且必須有一個主文件。
從屬文件：
它的數目是任意的，一般一個小型數據庫可以沒有從屬文件，而一個大的數據庫可能存在多個從屬文件。從屬文件和主文件一同存儲數據和數據庫對象。
日誌文件：
日誌文件用來存放數據庫的日誌信息，這些信息對恢復數據庫是十分關鍵的，一般一個數庫必須至少有一個日誌文件。
- sql server的作用
SQL Server 工具和實用程序
服務管理器（服務器有，客戶端沒有）
企業管理器
查詢分析器
導入和導出數據
服務器網絡實用工具
客戶端網絡實用工具
聯機幫助文檔
事件探測器
SQL Server 2000提供了大量的聯機文檔，它具有索引和全文搜索能力，可根據關鍵詞來快速查找用戶所需信息。
Have a try
Sqlserver數據庫
系統數據庫
SQL Server自己所使用的數據庫，包括：master、msdb、model、pubs、Northwind、tempdb
其中 pubs 和 Northwind 示例數據庫作為學習工具提供
安裝步驟：https://blog.csdn.net/benben513624/article/details/50516276
9.4 常用的SQL語句
T-SQL為MS SQL Server的SQL語句，在SQL Server環境下，可以使用T-SQL語言並使用Query Analyzer管理並創建數據庫。
- 創建數據庫語句
CREATE DATABASE database_name
[ON [PRIMARY]
[<filespec> [,...n]]
[,<filegroup> [,...n]]
]
[LOG ON {<filespec> [,...n]} ]
[FOR LOAD | FOR ATTACH]
<filespec> ::=
( [ NAME = logical_file_name,]
FILENAME=’os_file_name’
[, SIZE=size]
[, MAXSIZE = {max_size|UNLIMITED}]
[, FILEGROWTH =growth_increment] ) [,...n]
<filegroup> ::=
FILEGROOWUP filegroup_name <filespec> [,...n]
其中
database_name：要創建的數據庫的名稱，在SQL Server中，數據庫的名稱必須是唯一的。
ON：指明存放數據庫的磁盤文件，以及所屬的文件組（可以忽略）。
PRIMARY：定義一個主文件或者從文件組，如果PRIMARY缺省，則CREATE DATABASE語句中的第一個數據文件為主文件。
n：一個文件組中的文件個數。
LOG ON：定義一個日誌文件以及存放日誌文件的磁盤文件。
FOR LOAD：為了與早期的SQL Server保持兼容。
NAME=logical_file_name：定義數據文件的邏輯文件名。
FILENAME=’os_file_name’：定義存放數據文件的OS文件名以及路徑。
SIZE：定義數據文件的大小。
MAXSIZE：定義數據文件能增長到的最大值。
FILEGROWTH：定義數據文件的自動增長值。
此外，語句CREATE DATABASE需要在master數據中執行。
例子：
CREATE DATABASE MIS
ON PRIMARY
(
NAME = ‘MIS_Dat’,
FILENAME=’D: \MIS\MIS_Dat.mdf’,
SIZE = 5MB,
MAXSIZE = 10MB,
FILEGROWTH = 5MB
)
LOG ON
(
NAME=’MIS_Log’,
FILENAME=’D:\MIS\MIS_Log.ndf’,
SIZE=2MB,
MAXSIZE=5MB,
FILEGROWTH=20%
)
其他的語句不在贅述，詳情請看：
https://blog.csdn.net/zdwzzu2006/article/details/2298777
web-9. 動態網頁與數據庫