家教信息服务平台的开发

本文源码下载:点击这里本文网站效果:一诚家教最近想搭建一个大学生家教信息网站。实现功能包括:①家教信息发布;②大学生信息注册、登录、预约;③家教信息显示;教员库显示;④网站介绍等。但是作为一个非计算机专业的我,完全零基础和零概念,也不知道使用什么技术!首先了解到网页是由一种html格式的文档组成,所以在网易云课堂上学了html的知识(关于前端开发的课真是很多啊),学会了制作包含文字图片之类的网页。...

家教信息服务平台的开发

本文源码下载:点击这里

本文网站效果:一诚家教

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

但是作为一个非计算机专业的我,完全零基础和零概念,也不知道使用什么技术!首先了解到网页是由一种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 showif (isset($_GET['page'])) $page = $_GET['page'];else $page = 'home';// show pageswitch ($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的作用。


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


源文地址:https://www.guoxiongfei.cn/csdn/1495.html