家教信息服务平台的开发

本文源码下载：点击这里

本文网站效果：一诚家教

最近想搭建一个大学生家教信息网站。实现功能包括：①家教信息发布；②大学生信息注册、登录、预约；③家教信息显示；教员库显示；④网站介绍等。

但是作为一个非计算机专业的我，完全零基础和零概念，也不知道使用什么技术！首先了解到网页是由一种html格式的文档组成，所以在网易云课堂上学了html的知识（关于前端开发的课真是很多啊），学会了制作包含文字图片之类的网页。然而我还是不会搭建网站，我想要的是一个包含数据库的网站，而不仅仅是前端，了解到后端开发的主流语言包括PHP、ASP、JSP，所以又刷了有关PHP基础知识的内容。

但学完之后我明白，网易云课堂学到的都是基础中的基础。想掌握构建建网站的实践经验，除非你掏money。而且html、php的基础知识看书比视频更节省时间，对于只是想入门web技术，没有必要事无巨细的学习，等用到的时候查一下即可。html技术就是类似贴瓷片的活儿，在学会盖房子之前研究贴瓷片就是细枝末节。值得一提的是网易公开课，尤其对于CS专业，上面有很多国外名校的视频。在此推荐一门Harvard的公开课，视频地址： building dynamic websites

 

使用的编程语言、环境以及一些工具：

使用PHP 5.6，安装XAMP建站集成软件包，使用里面的Apache、MySQL模块。Apache是很流行的服务器软件，在本地计算机中安装后，自己电脑就成了一台服务器。这对于本地调试非常方便，把网站代码放置在Apache安装路径某个特定文件下，打开浏览器输入localhost/（127.0.0.1），就可以即时查看效果。此外，还有文本编辑器：editplus；代码上传工具：flashFXP。 

必要的工具准备好之后，实际建站还需要一个域名和一个服务器主机空间（推荐hostinger，国外免费主机空间，省了备案的麻烦）。然后需要做好域名解析等。

 

看了3节视频课，觉得知识储备够了。好了，talk is cheap，马上码代码，边查边做。

下面将整个项目分为3个部分做详细介绍：

一、整体设计：家教信息服务平台的开发

二、前端设计：表单实现登录注册功能

三、后台设计：MySQL数据库的增删改查

原谅我说的如此正规，这只能算是一个新手从无到有的自我练习项目。但实在找不到更好的总结词汇，因为从时间上看，整个编程是从整体到细化的过程；从内容上看，第二部分介绍的是表单的设计，属于浏览器端的，第三部分是有关数据库的操作，属于远程端的。

 

从视频中了解到MVC设计模式，但是由于是初学，我在项目中没有用到成熟的MVC框架。而是全程按对MVC这种编程思想的理解组织代码，保证了代码的条例清晰和易扩展性。简单的理解，controller（C）就是控制器，负责显示哪个页面以及调用哪个数据库操作；model（M）代表模型，我把数据库相关操作的代码都放在此文件夹下了；view（V）视图，主要放置html代码。最终的文件目录如下所示，很简洁：

 

controller只包含了一个controller.php的文档：

 

 

<?php
//determine which page to show
if (isset($_GET['page']))
    $page = $_GET['page'];
else
    $page = 'home';

// show page
switch ($page)
{
    case 'home':
		include(V."home.php");
        break;

    case 'student':
		include(V."student.php");
        break;

    case 'tutor':
		include(V."tutor.php");
        break;

    case 'contact':
		include(V."contact.php");
        break;

    case 'about':
		include(V."about.php");
        break;

    case 'login':
		include(V."login.php");
        break;

    case 'logout':
		include(V."logout.php");
        break;

    case 'register':
		include(V."register.php");
        break;

    case 'registered':
		include(V."registered.php");
        break;

    case 'myinfo':
		include(V."myinfo.php");
        break;
		
    case 'modify':
		include(V."modify.php");
        break;

    case 'update':
		include(M."update.php");
        break;

    case 'appoint':
		include(V."appoint.php");
        break;		

    case 'appointed':
		include(V."appointed.php");
        break;
		
    case 'connect':
		include(M."connect.php");
        break;

	case 'more':
		include(V."more.php");
        break;

}
?>

 

所以，所有的php文档的显示和调用都有这段代码控制了。获得$_GET变量的值通过控制url里的参数就可以了。据说这种方式url不是静态化的，不利于seo优化。有种技术可以在服务器端将url中的？=替换成/,不做具体研究了。

V（view）下面的内容就很多了，包含所有页面的html代码。为了避免代码重复，把复用性高的代码单独提取出来（对了，在html文档中可以嵌入php代码，php文档中也可以通过echo嵌入html，都可以在浏览器中显示，怎么方便怎么来）。

比如header内容：

<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta name="author" content="joe">

	<link rel="shortcut icon" href="view/images/logo.ico">
	<!--Bootstrap-->
	<link rel='stylesheet' href='bootstrap3/css/bootstrap.min.css'>
	<!--link rel="stylesheet" href="bootstrap3/css/bootstrap-theme.min.css"-->

	<style type='text/css'>
		body {
			padding-top: 60px;
			padding-bottom: 40px;
		}
		h1,h2,h3,h4,h5 {
			font-family: "Microsoft YaHei";
		}
	</style>

包含所有页面都相同的，<meta>元信息，包含所使用的字符集,不同设备的显示细节，网站作者，logo等；为了页面美观，更重要的是还要求响应式设计，应用了非常流行的前端框架bootstrap。这样，虽然没有很高的html+CSS功底，也能使做出来的页面不至于太丑。

 

响应式的含义就是，在电脑上的网页能够在手机或者其他小屏幕的设备上完好显示，字体不会变的太小，不会被边缘遮挡，可以调整布局。

使用bootstrap只需要在header.php里添加两行代码，在html文件的最后也加入两行，写在footer.php里：

<link rel="shortcut icon" href="view/images/logo.ico">
<!--Bootstrap-->
<link rel='stylesheet' href='bootstrap3/css/bootstrap.min.css'>

footer.php也会在不同页面里大量重复，内容如下：

里面写了版权信息，比如这句“Powered by xxx”。这句表明创作者的句子足够满足我的小小虚荣心。当对怎么实现网站还没有思路时，就先写好这个吧。放图：

还有其它复用性比较高的，比如导航栏，单独放在了一个文档内，top-bar.php：

 

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
			<div class='container'>
				<div class="navbar-header">
					<button type="button" class="navbar-toggle"
					data-toggle="collapse" data-target="#mainmenu">
						<span class="sr-only">导航条</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="?page=about">一诚家教</a>
				</div><!--navbar-header-->

				<div class="collapse navbar-collapse" id="mainmenu">
					<ul class="nav navbar-nav navbar-left">
						<li <?php if($page=="home") echo "class=\"active\"";?>><a href="?page=home">首页</a></li>
						<li <?php if($page=="student") echo "class=\"active\"";?>><a href="?page=student">我是家长</a></li>
						<li <?php if($page=="tutor") echo "class=\"active\"";?>><a href="?page=tutor">我是大学生</a></li>
						<li <?php if($page=="contact") echo "class=\"active\"";?>><a href="?page=contact">联系我们</a></li>
					</ul>
				</div><!--collapse-->

			</div><!--container-->
</nav><!--navbar-->

所有的一级子网页都包含了了这个导航栏。这样做又一个好处就是所有的网页的路径都不深，至少通过一个返回键就可以回到一级子网页。用户不容易迷路，看起来简单好用。

 

在小屏幕上变成折叠的效果，都是bootstrap的作用。

到此为止，整体的框架就有了：点击"一诚家教"进入网站介绍页；“首页”显示家长发布信息和教员信息库，“我是家长”显示教员库，家长可以发布信息；“我是大学生”显示历史和最新家教需求信息，允许大学生注册，登录，预约；“联系我们”放联系方式。