简单样例之：div+css+javascript+php+mysql

来源：互联网发布：winner2016淘宝造物节编辑：程序博客网时间：2024/06/07 07:08

作为新手，在学习网站开发时，总会有点不知所措。前端开发涉及的内容很多：table布局、div布局、css样式、javascript、框架等等，后台语言的选择、数据库操作、服务器配置、与前端的交互等等，为了便于学习和对原理的领悟，本篇设计了一个最小化系统，任何复杂的网页都是从最小的系统慢慢完善复杂化，这也将帮助你更好地进行后期的学习及开发。

该简单样例采用div布局，调用css样式文件进行显示。通过javascript语言的应用改变css的样式，再利用php语言调用数据库，并将数据库数据以表格是形式呈现。

div布局文件代码：(test.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>简单测试系统</title> <link rel="stylesheet" type="text/css" href="css/test.css"/> <script src="/SimpleExemple/js/test.js" type="text/javascript"></script></head><body><div id="container"><div id="header"><h1>Main Title of Web Page</h1></div><div id="menu"><h2>Menu</h2><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></div><div id="content">Content goes here</div><div id="footer">Copyright W3School.com.cn</div><input type="button" id="btn_test" value="点击改变样式" onClick="change()"/> </div></body></html>

css样式文件(test.css)：

// JavaScript Documentfunction change(){alert("测试改变样式！");document.getElementById("footer").style.backgroundColor="rgb(255,0,0)";document.getElementById("footer").innerHTML="哈哈哈，我变了！！";}

数据库连接文件：conn.php

<?phpheader("Content-Type:text/html;charset=utf-8");$dbms="mysql";$dbName="mysql";$user="root";$pwd="";$host="localhost";$dsn="$dbms:host=$host;dbname=$dbName";try{$pdo=new PDO($dsn,$user,$pwd);echo "PDO连接MySQL成功！";}catch(Exception $e){echo $e->getMessage()."<br>";}?>

数据显示及网页展示：tableData.php

<table width="500" border="1px" cellspacing="0" cellpadding="0" bordercolor="rgb(255,0,0)"><tr><td>name</td><td>id</td></tr><?phpinclude_once("conn.php") ;$query="select * from testtb";$result=$pdo->prepare($query);$result->execute();$res=$result->fetchAll(PDO::FETCH_ASSOC);for($i=0;$i<count($res);$i++){?>  <tr>    <td align="center" valign="middle"><?php echo $res[$i]['name'];?></td>    <td align="center" valign="middle"><?php echo $res[$i]['id'];?></td>  </tr><?php}?></table><?phpinclude("test.html");?>

相信经过测试学习这些代码，你对div布局，css样式，javascript，php之间的关系会有一个清晰的了解，而复杂的网页开发就只需将每块进行深入即可。

该系统测试结果：

（1）Div布局

(2)利用javascript改变样式

（3）调用数据库，并进行数据显示

这个作为学习的例子给大家参考，相信会有所收获的。

0 0