利用html+css+mysql+php来快速的制作动态网页（以制作一个博客网站为列）

共53个文件

php：18个

js：16个

css：5个

5星 · 超过95%的资源需积分: 50 133 浏览量 2017-08-14 19:51:17 上传评论 87 收藏 529KB RAR 举报

在本项目中，我们将探讨如何使用HTML、CSS、MySQL和PHP技术快速构建一个动态的博客网站。这四个组件是Web开发中的基础，它们共同协作，为用户提供交互式、数据驱动的网页体验。以下是对每个部分的详细说明： 1. HTML（超文本标记语言）：HTML是网页的基础结构，定义了页面的布局和内容。在博客网站中，HTML用于创建文章的标题、正文、作者信息、日期等元素。例如，`<h1>`标签用于大标题，`<p>`标签用于段落，`<a>`标签用于链接，而`<img>`则用于插入图片。 2. CSS（层叠样式表）：CSS负责网页的外观和布局设计。通过CSS，我们可以设置颜色、字体、间距、背景以及响应式设计，使网站在不同设备上都能有良好的展示效果。例如，我们可以用`.post-title`选择器来定制文章标题的样式，`.content`选择器可以调整文章内容的样式，`.author-info`则可以控制作者信息的显示。 3. MySQL：这是一个关系型数据库管理系统，用于存储和管理网站的数据，如用户账户、博客文章、评论等。在博客网站中，我们需要创建数据库表，如`posts`（包含文章ID、标题、内容、发布日期等字段）、`users`（包含用户名、密码、电子邮件等字段）和`comments`（包含评论ID、文章ID、用户ID、评论内容和时间戳等字段）。通过SQL语句，我们可以执行数据的增删改查操作。 4. PHP：这是一种服务器端脚本语言，用于处理用户请求并与数据库交互。在博客网站中，PHP可以用来接收用户提交的表单数据（如发表文章、评论），验证输入，然后将这些数据插入到MySQL数据库。同时，PHP还可以从数据库检索数据并动态生成HTML页面。例如，我们可能有一个`index.php`文件，它会从数据库获取最新文章并显示在首页；`post.php`文件则用于显示特定文章的详细信息，通过PHP接收文章ID并查询相应的数据库记录。在实际操作过程中，首先需要配置好服务器环境（如安装Apache或Nginx服务器、PHP解析器和MySQL服务器），然后编写HTML模板文件，定义页面结构。接着，用CSS文件来美化这些模板。接下来，创建MySQL数据库并设计数据表结构，最后用PHP编写逻辑代码，实现用户与数据库的交互。为了便于理解，你可以参考提供的博客资源，其中包含了具体的代码示例和步骤详解。通过实践，你可以更好地掌握这些技术，并逐步构建起自己的动态博客网站。在开发过程中，别忘了定期备份数据，保持代码整洁，并考虑安全性，比如对用户输入进行过滤和验证，防止SQL注入等攻击。随着技能的提升，你还可以尝试添加更多的功能，如用户注册登录、搜索功能、评论点赞等，使你的博客网站更加完善。

资源推荐

资源详情

资源评论

收起资源包目录

blog.rar （53个子文件）

blog

core

input.class.php 837B

db.class.php 754B

read.php 2KB

admin

home.php 573B

logout.php 109B

blog_upload.php 804B

check.php 656B

auser.php 2KB

blog_add.php 4KB

blog.php 3KB

nav.inc.php 2KB

setting.php 1KB

auser_add.php 3KB

upfiles

吕超章.jpg 13KB

index.php 2KB

header.inc.php 607B

config.php 754B

theme

bootstrap

fonts

glyphicons-halflings-regular.woff2 18KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.eot 20KB

npm.js 484B

bootstrap.js 68KB

bootstrap.min.js 36KB

css

bootstrap.css 143KB

bootstrap-theme.min.css 23KB

bootstrap.css.map 380KB

bootstrap.min.css 118KB

bootstrap-theme.min.css.map 25KB

bootstrap-theme.css.map 47KB

bootstrap.min.css.map 529KB

bootstrap-theme.css 26KB

simditor

images

image.png 10KB

scripts

uploader.min.js 4KB

hotkeys.js 5KB

module.min.js 3KB

jquery.min.js 82KB

simditor.min.js 100KB

module.js 5KB

uploader.js 7KB

hotkeys.min.js 3KB

simditor.js 173KB

styles

fonticon.scss 11KB

editor.scss 13KB

simditor.scss 57B

simditor.css 27KB

canvas-particle.js 5KB

jquery.min.js 81KB

jquery-3.2.1.min.js 85KB

css

image

<?php /*后台除去管理员登录界面，均需加载这个文件，来验证该页面管理员是否登录*/ include ('check.php'); /*取出传来的pid从而判断是添加还是修改操作*/ $pid=$input->get('pid'); /*初始化page，为了区别添加还是修改操作*/ $page=array( 'title' => '', 'author' => '', 'content' => '', ); /*如果pid大于0，可以得出并不是添加操作，而是修改操作*/ if($pid>0){ $sql="select * from page where pid ='{$pid}' "; $res=$db->query($sql); $page=$res->fetch_array(MYSQLI_ASSOC); } /*对于添加操作操作而言，账户或密码不能为空*/ if($input->get('do')=='add'){ $title=$input->post('title'); $author=$input->post('author'); $content=$input->post('content'); if(empty($title)||empty($author)||empty($content)){ echo("数据不能为空"); } /*如果aid大于1，则得出更新操作，否则执行添加操作*/ if($pid>0){ $uptime=time(); $sqlTpl="UPDATE page set title='%s',author='%s',content='%s',uptime='%d' where pid='%d' "; $sql=sprintf($sqlTpl,$title,$author,$content,$uptime,$pid); } else{ $intime=time(); $sqlTpl="INSERT INTO page(`title`,`author`,`content`,`intime`,`uptime`) values('%s','%s','%s','%d','%d')"; $sql=sprintf($sqlTpl,$title,$author,$content,$intime,0); } /*判断是否有结果*/ $is=$db->query($sql); if($is){ header("location:blog.php"); }else{ echo "执行失败"; } } ?>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>添加博客</title> <?php include(PATH . '/header.inc.php');?>  <link rel="stylesheet" type="text/css" href="../theme/simditor/styles/simditor.css" /> <script type="text/javascript" src="../theme/simditor/scripts/module.js"></script> <script type="text/javascript" src="../theme/simditor/scripts/hotkeys.js"></script> <script type="text/javascript" src="../theme/simditor/scripts/uploader.js"></script> <script type="text/javascript" src="../theme/simditor/scripts/simditor.js"></script> </head> <body> <?php include('nav.inc.php');?> <div class="container"> <h2> 博客管理 <small class="pull-right"><a class='btn btn-default' href="blog.php">返回</a></small></h2> <hr/> <div class="rows"> <form class="form-horizontal" role="form" action="blog_add.php?do=add&pid=<?php echo $pid;?>" method="post"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">标题</label> <div class="col-sm-6"> <input type="text" class="form-control" name="title" placeholder="请输入标题" value='<?php echo $page['title'];?>'> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">作者</label> <div class="col-sm-4"> <input type="text" class="form-control" name="author" placeholder="请输入作者" value='<?php echo $page['author'];?>' > </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">正文</label> <div class="col-sm-8"> <textarea id="content" name="content" class="form-control"><?php echo $page['content'];?></textarea>  <script> var editor = new Simditor({ textarea: $('#content'), upload:{ url:'blog_upload.php', fileKey:'file1' } //optional options }); </script> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-6"> <button type="submit" class="btn btn-default">提交</button> </div> </div> </form> </div> </div> </body> </html>

评论收藏

内容反馈