php网站制作(3)-thinkphp3.2.1简单案例实现
2014-05-30 10:15
615 查看
以大学页面展示为内容,简单实现了大学页面展示包括动态展示大学图片、大学简介、用户评分、用户关注、用户登录
index控制器:/web/App/Home/Controller/IndexController.class.php
展示模板:/web/App/Home/View/Index/univpage.html
控制五星评分的js+css+php
js:/web/App/Home/View/Index/review.js
css:/web/App/Home/View/Index/review.css
用户关注写入数据库的原生php脚本(js ajax如何调用thinkphp方法还未明了)
/web/App/Home/View/Index/review.php
控制用户登录对话框弹出的js+css
js
/web/App/Home/View/Index/login_box.js
css:
/web/App/Home/View/Index/login_box.css
用户点击关注js+php
js /web/App/Home/View/Index/interest.js
用户关注操作写入数据库php
/web/App/Home/View/Index/interest.php
index控制器:/web/App/Home/Controller/IndexController.class.php
<pre name="code" class="php"><?php /* * 该部分主要作用是生成大学页面,展示大学信息以及用户评分 关注 留言公共展示,主要: 1.根据url输入参数动态生成大学信息,包括大学图片以及简介等,并将变量输出到对应html模板 2.网站入口页面(首页)index.html关联 */ namespace Home\Controller; use Think\Controller; class IndexController extends Controller { public function index() { // $this->show ( 'F:\web\App\Home\Controller\index(控制器)\index方法' ); // 网站首页模板使用,index.html $this->display (); } public function univpage($id) { //用户登录状态查看 登录为1,未登录为0 session_start (); $user_id = $_SESSION ["user_id"]; if ($user_id==null) { $user_state=0; } else { $user_state=1; } $this->user_state = $user_state; // 根据输入id显示学校图片 // 图片路径 $picpath = '/images/' . $id . '.jpg'; // 进行模板变量赋值 $this->picpath = $picpath; $this->univ_id = $id; // 实例化模型 $Univ = M ( 'univ_basic_info' ); // 查找相关符合条件字段,使用数组默认为and关系,可添加'_logic'=>'or' 改为或 // 如果getField方法传入多个字段名称的话,默认返回一个关联数组(数组中包含数组),以第一个字段的值为索引 $result = $Univ->where ( array ( 'univ_id' => $id ) )->getField ( 'univ_introduce,interest_num,review_num' ); // dump($result); // 读取数组第一个元素(也就是所有需要元素) $result = current ( $result ); // dump($result); $interest_num = $result ["interest_num"]; $univ_introduce = $result ["univ_introduce"]; $review_num = $result ["review_num"]; // echo $univ_introduce; //用户登录表单控制器方法url $login_url=U('Userinfo/login_submit'); // 将变量映射到html模板 $this->univ_introduce = $univ_introduce; $this->interest_num = $interest_num; $this->review_num = $review_num; $this->login_url= $login_url; $this->display (); } public function interest() { // $this->show ( 'F:\web\App\Home\Controller\index(控制器)\index方法' ); $this->display (); } public function login() { // $this->show ( 'F:\web\App\Home\Controller\index(控制器)\index方法' ); $this->display (); } }
展示模板:/web/App/Home/View/Index/univpage.html
<!-- 大学页面,展示大学相关信息 --> <html> <head> <link rel="stylesheet" type="text/css" href="/App/Home/View/Index/review.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div class="uniinfo" id="uniinfo"> hello, {$picpath}! <img src={$picpath} height="200" width="288"> </br> hello, {$univ_introduce}!</br> 关注人数:{$interest_num}</br> 评分人数:{$review_num}</br> 用户状态:{$user_state} <!-- 将从控制器方法传递来的变量在js标签当中复制,使得js可以方便调用 --> <script> var univ_id = {$univ_id}; /* alert(univ_id); 可以直接在相关的js及ajax调用*/ //用户登录状态参数 js判断此参数弹出登陆界面 var user_state={$user_state}; </script> </div> <!-- 用户评分部分 --> <div class="background" id="background"> <div class="mainContent" id="mainContent"> <div class="gen3"> <div class="shop-rating"> <span class="title">感觉怎么样?</span> <ul class="rating-level" id="stars2"> <li><a href="javascript:void(0);" class="one-star" value="20">20</a></li> <li><a href="javascript:void(0);" class="two-stars" value="40">40</a></li> <li><a href="javascript:void(0);" class="three-stars" value="60">60</a></li> <li><a href="javascript:void(0);" class="four-stars" value="80">80</a></li> <li><a href="javascript:void(0);" class="five-stars" value="100">100</a></li> </ul> <span id="stars2-tips" class="result"></span> <input type="hidden" id="stars2-input" name="b" value="" size="2"> </div> <!-- 引入js文件 --> <script language="javascript" type="text/javascript" src="/App/Home/View/Index/review.js"></script> </div> </div> <!-- 点击用户关注--> <!-- 首先判断用户是否登录 没有登录则弹出登录对话框--> <div class="interest_button" id="interest_button"> <button type="button" onclick="loadXMLDoc()">关注</button> <input type="button" onclick="popup_show()" value='登录' /> </div> <!-- 没有登录弹出对话框 --> <!-- 引入弹出登录对话框相关js 和css --> <link rel="stylesheet" type="text/css" href="/App/Home/View/Index/login_box.css"> <script language="javascript" type="text/javascript" src="/App/Home/View/Index/login_box.js"></script> <!-- <include file="Index/login" /> --> <div class="sample_popup" id="popup" style="visibility: hidden; display: none;"> <div class="menu_form_header" id="popup_drag">您好,请先登录:</div> <div class="menu_form_body"> <form action={$login_url} method="get"> <table> <tr> <th>Username:</th> <td><input class="field" type="text" name="user_name" onfocus="select();" /></td> </tr> <tr> <th>Password:</th> <td><input class="field" type="password" name="user_password" onfocus="select();" /></td> </tr> <tr> <th></th> <td><input class="btn" type="submit" value="Submit" /></td> </tr> </table> </form> </div> </div> <!-- 用户关注状态展示 --> <div id="interest_state"></div> <script language="javascript" type="text/javascript" src="/App/Home/View/Index/interest.js"></script> </body> </html>
控制五星评分的js+css+php
js:/web/App/Home/View/Index/review.js
var TB = function() { /* * 该函数为ajax函数 主要是对实现用户点击评分五星,实现对大学评分 * 1.对浏览器进行判断 * 2.用户点击调用review.php脚本 * 3.传递参数 * */ // alert(univ_id); var T$ = function(id) { return document.getElementById(id) } var T$$ = function(r, t) { return (r || document).getElementsByTagName(t) } var Stars = function(cid, rid, hid, config) { var lis = T$$(T$(cid), 'li'), curA; for ( var i = 0, len = lis.length; i < len; i++) { lis[i]._val = i; lis[i].onclick = function() { // 用户点击五角星时生成相应的分数 score = T$$(this, 'a')[0].getAttribute('value'); T$(rid).innerHTML = '<em>' + (T$(hid).value = score) + '分</em> - ' + config.info[this._val]; curA = T$$(T$(cid), 'a')[T$(hid).value / config.step - 1]; // ajax传递变量至php 保存到mysql var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, // Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } // 执行数据库操作php脚本 // 注意此处url变量输入只能够使用?不能使用/ var url = "/App/Home/View/Index/review.php?score=" + score + "&univ_id=" + univ_id; //alert(url);// 检验js传值是否成功 xmlhttp.open("GET", url, true); xmlhttp.send(); }; lis[i].onmouseout = function() { curA && (curA.className += config.curcss); } lis[i].onmouseover = function() { curA && (curA.className = curA.className.replace( config.curcss, '')); } } }; return { Stars : Stars } }().Stars('stars2', 'stars2-tips', 'stars2-input', { 'info' : [ '极差', '不怎么好', '一般吧', '不错', '非常好' ], 'curcss' : ' current-rating', 'step' : 20 });
css:/web/App/Home/View/Index/review.css
ul,li { margin: 0; padding: 0; border: 0; } .shop-rating { height: 25px; overflow: hidden; zoom: 1; padding: 2px 0; position: relative; z-index: 999; font: 12px Arial; color: #000; line-height: 1.2em; } .shop-rating span { height: 23px; display: block; line-height: 23px; float: left; } .shop-rating span.title { width: 125px; text-align: right; margin-right: 5px; } .shop-rating ul { float: left; } .shop-rating .result { margin-left: 20px; padding-top: 2px; } .shop-rating .result span { color: #ff6d02; } .rating-level,.rating-level a { background: url(/images/o_star.png) no-repeat scroll 1000px 1000px; } .rating-level { background-position: 0px 0px; width: 120px; height: 23px; position: relative; z-index: 1000; } .shop-rating .result em { color: #f60; font-family: arial; font-weight: bold; } .rating-level li { display: inline; } .rating-level a { line-height: 23px; height: 23px; position: absolute; top: 0px; left: 0px; text-indent: -999em; *zoom: 1; outline: none; } .rating-level a.one-star { width: 20%; z-index: 6; } .rating-level a.two-stars { width: 40%; z-index: 5; } .rating-level a.three-stars { width: 60%; z-index: 4; } .rating-level a.four-stars { width: 80%; z-index: 3; } .rating-level a.five-stars { width: 100%; z-index: 2; } .rating-level .current-rating,.rating-level a:hover { background-position: 0 -28px } .rating-level a.one-star:hover,.rating-level a.two-stars:hover,.rating-level a.one-star.current-rating,.rating-level a.two-stars.current-rating { background-position: 0 -116px; } .rating-level .three-stars .current-rating,.rating-level .four-stars .current-rating,.rating-level .five-stars .current-rating { background-position: 0 -28px; }
用户关注写入数据库的原生php脚本(js ajax如何调用thinkphp方法还未明了)
/web/App/Home/View/Index/review.php
<?php /* * 该部分主要是用户点击五星评分之后,将操作保存如数据库,主要包括: * 1.获取js ajax传递过来的univ_id 以及分数score参数 * 2.univ_basic_info中增加用户评分数量 * 3.univ_basic_info计算用户评分平均分数 * */ //获取传递过来的变量分数score和大学id $score = $_GET ["score"]; echo $score; $id = $_GET ["univ_id"]; //连接数据库 include_once '/web/cnn.php'; mysql_select_db ( "univinfo", $con ); //更新数据库,并计算平均值 $sql = "UPDATE univ_basic_info SET review_num =review_num+1,average_score=('".$score."' +(review_num-1)*average_score)/review_num WHERE univ_id ='" . $id . "'"; mysql_query ( $sql ); mysql_close ( $con );
控制用户登录对话框弹出的js+css
js
/web/App/Home/View/Index/login_box.js
var popup_dragging = false; var popup_target; var popup_mouseX; var popup_mouseY; var popup_mouseposX; var popup_mouseposY; var popup_oldfunction; function popup_display(x) { var win = window.open(); for ( var i in x) win.document.write(i + ' = ' + x[i] + '<br>'); } function popup_mousedown(e) { var ie = navigator.appName == "Microsoft Internet Explorer"; if (ie && window.event.button != 1) return; if (!ie && e.button != 0) return; popup_dragging = true; popup_target = this['target']; popup_mouseX = ie ? window.event.clientX : e.clientX; popup_mouseY = ie ? window.event.clientY : e.clientY; if (ie) popup_oldfunction = document.onselectstart; else popup_oldfunction = document.onmousedown; if (ie) document.onselectstart = new Function("return false;"); else document.onmousedown = new Function("return false;"); } function popup_mousemove(e) { if (!popup_dragging) return; var ie = navigator.appName == "Microsoft Internet Explorer"; var element = document.getElementById(popup_target); var mouseX = ie ? window.event.clientX : e.clientX; var mouseY = ie ? window.event.clientY : e.clientY; element.style.left = (element.offsetLeft + mouseX - popup_mouseX) + 'px'; element.style.top = (element.offsetTop + mouseY - popup_mouseY) + 'px'; popup_mouseX = ie ? window.event.clientX : e.clientX; popup_mouseY = ie ? window.event.clientY : e.clientY; } function popup_mouseup(e) { if (!popup_dragging) return; popup_dragging = false; var ie = navigator.appName == "Microsoft Internet Explorer"; var element = document.getElementById(popup_target); if (ie) document.onselectstart = popup_oldfunction; else document.onmousedown = popup_oldfunction; } function popup_exit(e) { var ie = navigator.appName == "Microsoft Internet Explorer"; var element = document.getElementById(popup_target); popup_mouseup(e); element.style.visibility = 'hidden'; element.style.display = 'none'; } function popup_show() { //alert('wewe'); //用过用户登录状态参数为0,表示没有登录则弹出登录窗口 if (user_state == 0) { element = document.getElementById('popup'); drag_element = document.getElementById('popup_drag'); exit_element = document.getElementById('popup_exit'); element.style.position = "absolute"; element.style.visibility = "visible"; element.style.display = "block"; element.style.left = (document.documentElement.scrollLeft + popup_mouseposX - 10) + 'px'; element.style.top = (document.documentElement.scrollTop + popup_mouseposY - 10) + 'px'; drag_element['target'] = 'popup'; drag_element.onmousedown = popup_mousedown; exit_element.onclick = popup_exit; } } function popup_mousepos(e) { var ie = navigator.appName == "Microsoft Internet Explorer"; popup_mouseposX = ie ? window.event.clientX : e.clientX; popup_mouseposY = ie ? window.event.clientY : e.clientY; } if (navigator.appName == "Microsoft Internet Explorer") document.attachEvent('onmousedown', popup_mousepos); else document.addEventListener('mousedown', popup_mousepos, false); if (navigator.appName == "Microsoft Internet Explorer") document.attachEvent('onmousemove', popup_mousemove); else document.addEventListener('mousemove', popup_mousemove, false); if (navigator.appName == "Microsoft Internet Explorer") document.attachEvent('onmouseup', popup_mouseup); else document.addEventListener('mouseup', popup_mouseup, false);
css:
/web/App/Home/View/Index/login_box.css
@CHARSET "UTF-8"; div.sample_popup { z-index: +1; } div.menu_form_header { cursor: move } div.sample_popup div.menu_form_header { border: 1px solid black; border-bottom: 0px; cursor: default; width: 200px; height: 20px; line-height: 19px; vertical-align: middle; background: url('http://codefans.net/jscss/demoimg/200904/20title.png') no-repeat; text-decoration: none; font-family: "Times New Roman", Serif; font-weight: 900; font-size: 13px; color: #206040; } div.sample_popup div.menu_form_body { border: 1px solid black; width: 200px; background: url('http://codefans.net/jscss/demoimg/200904/logbg.png') no-repeat left bottom; } div.sample_popup img.menu_form_exit { float: right; margin: 4px 5px 0px 0px; cursor: pointer; } div.sample_popup table { border-collapse: collapse; width: 100%; } div.sample_popup th { width: 1%; padding: 0px 5px 1px 0px; text-align: left; font-family: "Times New Roman", Serif; font-weight: 900; font-size: 13px; color: #004060; } div.sample_popup td { width: 99%; padding: 0px 0px 1px 0px; } div.sample_popup form { margin: 0px; padding: 8px 10px 10px 10px; } div.sample_popup input.field { border: 1px solid #808080; width: 95%; font-family: Arial, Sans-Serif; font-size: 12px; } div.sample_popup input.btn { margin-top: 2px; border: 1px solid #808080; background-color: #DDFFDD; font-family: Verdana, Sans-Serif; font-size: 11px; } a { color: #FF0000; text-decoration: none; }
用户点击关注js+php
js /web/App/Home/View/Index/interest.js
function loadXMLDoc() /* * 该函数为ajax函数 主要是对实现用户点击关注按钮,实现对大学关注 * 1.对浏览器进行判断 * 2.用户点击调用interest.php脚本 * 3.传递参数 * 4.判断用户是否登录,如果没有登录则弹出登录界面 * */ { if (user_state==0) { // alert("请先登录"); //调用login_box.js当中的方法 统一页面直接调用 popup_show(); } var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("interest_state").innerHTML=xmlhttp.responseText; } } //xmlhttp.open("GET","/App/Home/View/Index/js.txt",true); //var url = "/App/Home/View/Index/interest.php?univ_id=" + univ_id; var url = "/App/Home/View/Index/interest.php?univ_id=" + univ_id; xmlhttp.open("GET",url,true); xmlhttp.send(); }
用户关注操作写入数据库php
/web/App/Home/View/Index/interest.php
<?php /* * 该部分主要是用户点击页面关注按钮之后,将操作保存如数据库,主要包括: 1.获取js ajax interest.js文件传递过来的大学id参数 2.从session当中判断用户是否登录 3.从seesion当中获取登录用户的id 4.向univ_user_interest添加关注对应数据 5.修改univ_basic_info中大学用户关注数目 */ // session获取参数 session_start (); $user_id = $_SESSION ["user_id"]; $univ_id = $_GET ["univ_id"]; // 连接数据库 include_once '/web/cnn.php'; $sql = "SELECT count(*) as count FROM univ_user_interest WHERE univ_id ='" . $univ_id . "'and user_id='" . $user_id . "'"; $result = mysql_query ( $sql ); $row = mysql_fetch_array ( $result ); $ifexist = $row ['count']; // echo $ifexist; // 判断用户是否已经关注,如果没有则进行关注 if ($ifexist != 0) { echo "您已经关注"; } else { // 添加判断语句 判断where(user_id=$user_id, univ_id=$univ_id)是否已 // 经存在 不存在将用户关注信息添加到数据库 $sql = "INSERT INTO univ_user_interest (user_id, univ_id) VALUES ('" . $user_id . "', '" . $univ_id . "')"; echo "关注成功"; mysql_query ( $sql ); // 数据表univ_basic_info 当中的关注数量interest_num增加1 $sql = "UPDATE univ_basic_info SET interest_num =interest_num+1 WHERE univ_id ='" . $univ_id . "'"; mysql_query ( $sql ); } // 断开数据库连接 mysql_close ( $con );
相关文章推荐
- php网站制作(2)-thinkphp3.2.1简单框架学习
- php网站制作(4)-thinkphp jQuery ajax实现后台数据交互
- 网站制作一 : 从简单做起,通过a属性实现导航图片切换
- php网站制作(1)-简单介绍,开发环境搭建
- PHP+MYSQL+SESSION+ThinkPHP实现简单购物车功能
- php实现一个简单的购物网站
- PHP实现一个多功能购物网站的案例
- [翻译]案例学习:仅使用Redis+PHP设计实现一个简单的Twitter
- thinkphp制作404跳转页的简单实现方法
- php token命令的简单实现,可用于网站平台的对接
- php ajax网站浏览统计功能的简单实现第1/2页
- [PHP]进阶教程:服务器端嵌入(SSI)实现多个页面之间的引用与简单案例
- 简单 PHP + MySQL 数据库动态网站制作
- 简单 PHP + MySQL 数据库动态网站制作 -- 摘抄
- PHP网站使用JavaScript和Iframe简单实现部分刷新效果
- 转[翻译]案例学习:仅使用Redis+PHP设计实现一个简单的Twitter
- php ajax网站浏览统计功能的简单实现第1/2页
- PHP简单实现记录网站访问量功能示例
- PHP中网站OA功能的简单实现
- PHP+MYSQL+SESSION+ThinkPHP实现简单购物车功能