不是从零开始的网站制作

不是从零开始的网站制作

现在，如果是个人要做一个小网站或是博客，有很多速成的生成方法。可惜某门课要用 PHP 做一个网站，似乎不大合适用框架做，而给的时间只有半个学期，实际制作的时间只有三个月，对于一个没接触过 PHP 的人来说，还是稍微有点挑战。于是在这里记录一些开发的时候自学速成的小技巧和遇到的问题的解决，作为纪念。也是重新捋一下整个流程。

如果对网站制作没什么概念，也可以看一看整个过程大概是什么样的。因为写得可能可读性略差，如果是要查什么问题的解决方法，用 ctrl+F定位可能会快一点。

由于作业还没到 ddl，在这里不会涉及太多具体的代码，而是比较多碎片化的内容和比较多各种知识的指路。

开发前已经稍微接触过 html/js/css，相关的内容不会大量提及。

目录

0.HTML/CSS/JS

1.PHP/MySQL

2.准备工作

3.开始码代码

4.搬家

5.结尾

0.HTML/CSS/JS

如前面所说，这部分内容不会过多提及，只会记录一些觉得有用而以前不会的内容。需要系统自学的话，请自行查看菜鸟教程（html/css/js）和 CSDN。

0.1HTML

HTML 自然是使用 H5，主要有区别的应该就是表单这一块。善用表单的属性可以减少很多工作量，比如 maxlength和 minlength，还有 hidden，一开始写了一堆 JS，实在是有点亏。另外就是文件上传要记得 enctype="multipart/form-data"。

0.2CSS

CSS 一向有大量的骚操作，可惜我基本都不会。这次学到的有：

1. 颜色变量，先定义 :root{color-1:rgba(*.*.*.*)color-2:#*******...}，然后可以在后面用 var(color)调用。

   :root {
     --main-color: #5698c3;
   }
   .a {
     background-color: var(--main-color);
   }
   

2. 消除浮动，浮动属性很常用，但也常常导致很多困扰，这次试了很多网上的方案，找到一个比较好用的。

   .clearfix:after {
     content: "020";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
   }
   
   .clearfix {
     zoom: 1;
   }
   

3. 需要侧边栏拉满网页的某一侧，或者实现一个笼罩全网页的阴影效果，用 100%来调节是不行的。一个是边缘会留空隙，一个是会受到其他 box 的干扰。这个时候可以用绝对位置，不过用绝对位置之后其他元素的排列可能会受影响，建议谨慎使用。

   .left {
     position: fixed;
     top: 0;
     bottom: 0;
     margin: -1em 0em -1em -1em; //用负边沿消除空白
   }
   

4. 另外就是几个似乎没什么人讲的选择器，其实很简单，一看就知道用途。

   textarea,
   input[type="text"],
   [type="password"]:focus {
     ...;
   }
   

0.3JS/jQuery

本来用 JS 就主要是检查表单，这次用 JS 用得比较少，涉及到显示/隐藏等效果的都用 jQuery 实现了。jQuery 用起来还是比较方便，主要是要善用 next()/prev()/parent()/children()这几个东西。

jQuery 在 Linux 环境下引用容易出问题，找了半天没能解决，最后选择使用 CDN，反正也没差。

1.PHP/MySQL

以前没有接触过 PHP，这次跟着视频稍微学了一下，勉强会了一点。

对我而言，阻碍学 PHP 的动力主要是她要在开服务器的情况下才能跑，前置准备太过复杂，具体的内容倒是还不会太难。

系统入门同样看菜鸟教程就行了。如果有 C 的基础，大概知道以下几点也差不多就能上手了。

• 语法和 C 基本一致，注意有 ==和 ===
• 弱类型，运算的时候依靠运算符 .和 +区分 string 和 int，使用前者转为 string，使用后者转为数字
• 数组接近 C++的 map
• 可以写在 html 的任何位置，加载时自动运行。注意，PHP 的运行是同步的，在网页加载途中会全部执行，哪怕是 JS 的事件函数内部的也是，而且不会在函数调用的时候再次触发。如果需要异步操作，参阅教程里 AJAX 相关的内容。

MySQL 同样是看教程（我觉得我应该能拿点广告费），如果有 PHPMyAdmin 的话，大部分工作都可以 GUI 解决，对语言要求几乎为 0 。需要掌握的，要写进 PHP 的语句就只是搜索/插入/修改/删除，没有什么太复杂的。

2.准备工作

在稍微对工具有点了解之后，就可以开始干活了。开始码代码之前，先做一些准备工作。

先是在本机写，用 MAMP，具体内容看这篇。

3.开始码代码

也不需要什么框架或者分析，反正只是一个课程的小项目，硬写就完事了。我个人比较想早点看到成果，所以先写前端部分。因为内容需要批量生成，我写了个模板，然后用 PHP 循环输出 ，大概长这个样子（删去了一些重复的内容）：

$handle = fopen("tag_mod.php", "rb");
    $str_mod = fread($handle, filesize("tag_mod.php"));
    while ($row = $result->fetch_assoc()) {
        //打开模板
        $str = $str_mod;
        //读取模板内容
        $title = $row['title'];
        /**---开始替换---**/
        $str = str_replace("{title}", $title, $str);
        echo $str;
    }
    fclose($handle);

PHP 支持 include，所以把这部分写到另一个文件里，要用的时候引用。这样看起来比较清楚。类似的还有主页的侧边栏，也是通过 include 调用。

储存的内容很简单，大致上只用了两个表。所以交互也不复杂，我写了两个管理内容，实现增删改查的类。一个类对应一个表。两个表之间有些联系，不过我对 MySQL 这块不熟悉，最后用 PHP 解决了，可能效率上不是很高。

整个过程有两个内容稍微有点意思，一个是上传图片，一个是检查网址有效性。

3.1 上传图片

写的网站想要支持用户上传头像，那就简单写一个上传图片的功能。

上传图片首先要保证表单上有 enctype="multipart/form-data"，一开始查了半天，变量里一直只有文件名，连目录都没有，最后才发现是这个锅。

大概是 PHP4 以上就支持 $_FILES作为全局变量传递文件，用法和 $_POST基本一样，但其实变量里面不是文件本身，还需要进一步读取。

$imgfile = $_FILES['img'];
$size = $imgfile['size'];  //取得图片长度
$tmpfile = $imgfile['tmp_name'];  //图片上传上来到临时文件的路径
if ($tmpfile and is_uploaded_file($tmpfile)) { //判断上传文件是否为空，文件是不是上传的文件
            //读取图片流
        $file = fopen($tmpfile, "rb");
        $imgdata = addslashes(fread($file, $size));
        fclose($file);
     }
return $imgdata;

图片的话使用二进制保存，用 BLOB 类型存就行了，至于大小，BLOB 最大 64K ，MEDIUMBLOB 最大 16M ，LONGBLOB 最大 4G。MEDIUMBLOB 基本就够用了。

输出的时候在给一个目录写文件，这里写得比较粗糙，统一用 jpg，好在问题不会太大。然后记录路径，用 HTML 的 img 标签访问就好了。

$handle = fopen($name . ".jpg", "w");
fwrite($handle, $row['img']);
fclose($handle);
$_SESSION['img'] = "php/" . $name . ".jpg";//这里可能用cookie会更好一点，不过处理成用户退出的时候一块销毁，应该也不会有太大问题。

3.2 检查网址有效性

这个存粹是闲着无聊添加的功能，用 curl 实现，当作复习计算机网络了。

function checkValid($url)
{
    $ch = curl_init();

    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_TIMEOUT, 5);//设置超时，这里设得比较短
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    /*以下两条是终止服务端的验证，不加访问https会500*/
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
    curl_exec($ch);

    $curl_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);

    curl_close($ch);

    return ($curl_code == 200 || $curl_code == 301 || $curl_code == 302); //判断网站是否能访问，200是正常，301/302是重定向，像是b站就会重定向，一开始没加还崩了

}

4.搬家

写的差不多之后，再搬到云上，用的是 centos7，具体部署看这篇。值得一提的是，这篇教程的 PHP 版本是 5.4.16，略微有点老。可以借鉴这篇教程升级到 PHP7，但对应的 PHPMyAdmin 死活装不好，如果需要 PHPMyAdmin 的话可能要将就着用旧版本 PHP。

centos 毫无疑问是 Linux 系统，在云端需要远程操作。以前因为某种原因装过 xshell，重新把她从角落里捡回来，启动！

如果不熟悉 Linux 指令，在这个时候可能会有点抓瞎，因为没有 GUI。但简单的 Linux 指令学起来很快。只需要知道：

• cd：切换当前目录，细分为三种

  cd subfolder/subsubfolder#移动到下级文件夹
  cd /folder1/folder2#移动到绝对路径为folder1/folder2的位置
  cd ..#移动到上级文件夹
  

• ll/ls -l：查看当前目录下的文件

  ls -l
  >drwxr-xr-x 2 root  root  4096 Feb 15 14:46 cron#文件里最前面一段是权限，然后是用户组和用户...
  >drwxr-xr-x 3 mysql mysql 4096 Apr 21  2014 mysql
  

• chgrp：更改文件的用户组

  chgrp [-R] groupname filename#-R是可选项，添加表示对子目录执行相同操作，然后就是把文件名为filename的文件的用户组改成groupname
  

• chown：更改文件的用户

  chown [-R] ownername [groupname] filename#同上
  

• mkdir：创建文件夹

  mkdir foldername
  

• vi：启动 vim，vim 是 Linux 自带的编辑器，相当的古老。

  vi filename#编辑这个文件，如果没有会自动创建
  #进入之后输入i进入编辑模式，按esc退出，输入:进入底线模式，此时输入在最底下，w是保存，q是退出
  

有其他需要建议去看教程，或者直接搜索，网上还是很全的。

虽然 vim 作为老牌编辑器，用户众多，但可能还是用不顺手，而且也不可能把在本机上的内容重抄一遍。可以用 lrzsz 把本机的文件传输上去。

yum install lrzsz -y#安装
rpm -qa |grep lrzsz#检查是否安装成功，成功会放回版本号
rz [-y]#上传，追加-y会覆盖同名文件，上传到当前文件夹
sz filename#下载文件

然后重新打开 PHPMyAdmin，数据库建表，没什么复杂的地方。

最后一个问题，运行的时候发现图片没法写，一番搜索发现是权限问题，新建一个 PHP 文件

<?php echo phpinfo();?>

访问这个文件，搜索当前组和用户（可能是 apache），会发现和文件的用户和组不一样（root），用上面提到的命令修改组和用户就好了。

结尾

这样网站就可以跑起来了，虽然很简单，做完还是很有成就感，也多少学到了新知识。不过如果是正式搭网站，用框架恐怕会快得多，而且不容易出 bug，所以以后可能也不会一点一点地这样写代码了。