不是从零开始的网站制作

不是从零开始的网站制作

现在,如果是个人要做一个小网站或是博客,有很多速成的生成方法。可惜某门课要用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,主要有区别的应该就是表单这一块。善用表单的属性可以减少很多工作量,比如maxlengthminlength,还有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,所以以后可能也不会一点一点地这样写代码了。

猜你喜欢

转载自www.cnblogs.com/wengsy150943/p/12796411.html