网页制作_网页制作csdn-CSDN博客

本文链接：https://blog.csdn.net/qq_44169314/article/details/112727769

使用工具

sublime:调试代码
phpstudy：建站
网云穿:外网穿透

前言

记一次计网大作业
时间：五天从零开始
老师要求课程网站：
1.界面必须美观
2.实现教师上传资料功能
3.实现教师可以批改作业的功能（下载作业，进行预览，连接数据库给分数
4.论坛功能

一、界面

界面部分使用中国站长上的模板。
一般模板都包括图标，背景，导航栏，正文，角标。

超链接

<a href="url">链接文本</a>

通过更改模板的跳转链接进行设置主页如下：
在这里插入图片描述

表单

这次很多地方都用到了表单，特去好好学习了一下表单
表单定义为用来收集不同类型的用户输入

  <form class="login-form" action="login.php" method="post">
    <input type="text"  name="name" placeholder="name"/>
    <input type="password"  name="password" placeholder="password"/>
    <p><input type="submit" name="submit" value="login"></p>
    <p class="message">Not registered? <a href="#">Create an account</a></p>
  </form>

action：动作属性定义的文件，当表单内容输入完毕后，会把数据传送到该文件进行相关的处理。（该例是执行登录的php文件
input：可以通过设置属性来执行不同操作，password属性输入的值不会按照原型显示。
placeholder：在文本输入框中的提示内容
method:请求方式，默认get，常用post和get

登录界面
3. 教师上传作业界面
在这里插入图片描述小白就是只设置一个门帘和两个入口，配色个人感觉还可以。
这部分是上传的界面，主要代码就是文件上传和下载，还有在界面部分，主要是表单的样式和div按行和列划分区块。

<div class="row">
        <div class="col-md-3">
          <form action="./upload_file.php" method="post" enctype="multipart/form-data">
            <label class='upload1' for="xFile"><img src="./images/pdf.png"></label>
            <input  type="file" id="xFile" name="myFile" style="position:absolute;clip:rect(0 0 0 0);"  /><br/>
            <div class="upload2">
              <input  class="download btn btn-warning btn-xs" type="submit" value="upload" />
            </div>
          </form>
        </div>
</div>

通过<label>标签设置input的样式，for代表样式的名字，我这里使用了一张图片
<input>属性是file时,这个标签每出现一次，一个 FileUpload 对象就会被创建。
accept属性来设置指定接收文件类型
name属性为Myfile调用自己本机文件
该元素包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件。
该元素的 value 属性保存了用户指定的文件的名称，但是当包含一个 file-upload 元素的表单被提交的时候，浏览器会向服务器发送选中的文件而不仅仅是发送文件名。 
在没有设置样式时，一般为以下的样子：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210117055259124.png)
class部分，我使用了bootstrap(看的好看些
部分样式如下：
按钮的样式

.btn-warning {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:hover {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
}

.btn-warning:focus, .btn-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}

.btn-warning.disabled, .btn-warning:disabled {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

在下载作业部分，前端代码如下：
这部分也包括在线预览的部分，使用超链接进行跳转。

<?php
session_start();
//定义目录
$fname = "./upload";//需要显示的目录
if(!empty($_SESSION["fname"]))
{
	$fname = $_SESSION["fname"];
}
$pname = dirname($fname); //取上级目录

$arr = glob($fname."/*");
foreach($arr as $v)
{
    $arr = explode('/',$v);
    $name =end($arr);
    $name = iconv("gb2312","utf-8",$name);
    $v = iconv("gb2312","utf-8",$v);

		echo "
    <div class='row-md-2'>
    <div class='heading_container2' style='font-size: x-large;'>{$name}</div>
    <a href='download.php? url={$v}' >
    <input type='button' value='Download' url='{$v}' class='download btn btn-warning btn-xs' />
    </a>&nbsp;&nbsp;
    </div>";
    echo "<br>";

    $end=pathinfo($v, PATHINFO_EXTENSION);
    if($end=='pdf'||$end=='txt'||$end=='jpg'||$end=='png'||$end=='php') 
    {?>
      <a href="<?php echo $v;?>" target="_blank">在线预览</a>
      <br>
    <?php
    }
    else
    {?>
      <a href='<?php echo"yulan.php?url=".$v?>' target="_blank">
      在线预览
    </a>
      <br>
    <?php 
    }
    echo "<br>";
}
?>

在这里插入图片描述

批改作业部分

二、后端实现部分

1.登录

php代码如下）：

<?PHP
 header("Content-Type: text/html; charset=utf8");
 if(!isset($_POST["submit"])){
  exit("错误执行");
 }//检测是否有submit操作 

 include('connect.php');//链接数据库
 $name = $_POST['name'];//post获得用户名表单值
 $passowrd = $_POST['password'];//post获得用户密码单值

 if ($name && $passowrd){//如果用户名和密码都不为空
    $sql = "select * from user where username = '$name' and password='$passowrd'";//检测数据库是否有对应的username和password的sql
    $result = mysql_query($sql);//执行sql
    $rows=mysql_num_rows($result);//返回一个数值
    if($rows){//0 false 1 true
     header("refresh:0;url=home/index.html");//如果成功跳转至welcome.html页面
     exit;
    }else{
    echo "用户名或密码错误";
    echo "
     <script>
       setTimeout(function(){window.location.href='index.html';},1000);
     </script>

    ";//如果错误使用js 1秒后跳转到登录页面重试;
    }
    

 }else{//如果用户名或密码有空
    echo "表单填写不完整";
    echo "
      <script>
       setTimeout(function(){window.location.href='index.html';},1000);
      </script>";

      //如果错误使用js 1秒后跳转到登录页面重试;
 }

 mysql_close();//关闭数据库
?>

2.注册

代码如下：

<?php 
 header("Content-Type: text/html; charset=utf8");

 if(!isset($_POST['submit'])){
  exit("错误执行");
 }//判断是否有submit操作

 $name=$_POST['name'];//post获取表单里的name
 $password=$_POST['password'];//post获取表单里的password

 include('connect.php');//链接数据库
 $q="insert into user(username,password) values ('$name','$password')";//向数据库插入表单传来的值的sql
 $reslut=mysql_query($q,$con);//执行sql
 
 if (!$reslut){
  die('Error: ' . mysql_error());//如果sql执行失败输出错误
 }else{
  echo "注册成功";//成功输出注册成功
  echo "
  <script>
   setTimeout(function(){window.location.href='index.html';},1000);
  </script>";
 }
 mysql_close($con);//关闭数据库

?>

3.文件上传

主要是使用一个函数

<?php
	header("Content_type:text/html;charset=GBK");
	//session_start();
	$imgname = $_FILES['myFile']['name'];
    $tmp = $_FILES['myFile']['tmp_name'];
	$error=$_FILES['myFile']['error'];
		
   move_uploaded_file($tmp,'../../student/uploads/upload/'.iconv("UTF-8", "GBK",$imgname)); //文件路径和函数
?>

4.文件下载

<?php
header("Content-type:text/html;charset=utf-8"); 
$url = $_GET["url"];
$arr = explode('/',$url);
$bname =end($arr);
$file_name="{$bname}"; 
$file_name=iconv("utf-8","gb2312",$file_name); 

$file_sub_path=$_SERVER['DOCUMENT_ROOT']; 
$url=iconv("utf-8","gb2312",$url); 
$file_path="{$url}"; 
//首先要判断给定的文件存在与否 
if(!file_exists($file_path)){ 
echo "没有该文件"; 
return ; 
} 
$fp=fopen($file_path,"r"); 
$file_size=filesize($file_path); 
//下载文件需要用到的头 
Header("Content-type: application/octet-stream"); 
Header("Accept-Ranges: bytes"); 
Header("Accept-Length:".$file_size); 
Header("Content-Disposition: attachment; filename=".$file_name); 
$buffer=10240000; 
$file_count=0; 
//向浏览器返回数据 
while(!feof($fp) && $file_count<$file_size){ 
$file_con=fread($fp,$buffer); 
$file_count+=$buffer; 
echo $file_con; 
} 
fclose($fp);

5.文件预览

文件预览部分采用现成的集成在线浏览网页，只需要把文件路径给好就好

<?php
header("Content-type:text/html;charset=utf-8"); 
$url = $_GET["url"];
$arr = explode('/',$url);
$bname =end($arr);
$file_name="{$bname}"; 
$file_name=iconv("utf-8","gb2312",$file_name); 
$file_sub_path=$_SERVER['DOCUMENT_ROOT']; 
$url=iconv("utf-8","gb2312",$url); 
$file_path="{$url}"; 
//首先要判断给定的文件存在与否 
if(!file_exists($file_path)){ 
echo "没有该文件"; 
return ; 
} 
$file_name=iconv("gb2312","utf-8",$file_name);
//路径改为穿透后的路径
$path='https://view.officeapps.live.com/op/view.aspx?src='.'http://w6cexp98.dongtaiyuming.net/home/teacher/uploads/upload/'.$file_name;
?>
<iframe src='<?php echo $path;?>' width='100%' height='100%' frameborder='1'>
</iframe>