第一站:为留言板添加表单验证
首先尝试的是php,不过$SEVER_SELF提交到本页验证后要如何继续……我不知道了== ==
jquery;
validationEngine,中文doc:
当placeholder和this.value值不一样时,jquery无法出现效果。
HTML 5 <input> placeholder 属性
placeholder 属性提供可描述输入字段预期值的提示信息(hint)。
该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
<form id="formID" class="formular" action="post.php" method="post">
注意id和class的修改。
jQuery(document).ready(function()
这部分代码主要声明,页面加载后 “监听事件” 的方法。
关于这个代码可以看看JavaScript编写规范:
IIFE(Immediately-Invoked Function Expression)| 立即执行的函数表达式
使用document.ready()方法的执行速度比onload()的方法要快。
some notes:
href="#some-id"
would scroll to an element on the current page such as <div id="some-id">
.
and href=“#” means scroll to top | 滚屏到顶部
display: block;
display is CSS's most important property for controlling layout.The default for most elements is usually block or inline.
第二站:为留言板添加分页
mySQL+php的分页显示时用过mySQL的扩展关键字limit来实现的,关键字后的两个参数分别用于指定要显示记录的起始位置和指定所要显示的记录个数。
$sql="select * from users limit {$offset},{$length}";
然后三目运算符来获得当前页数。
$nowpage=@$_GET['page']?$_GET['page']:1;
这里提一下很高端的(对我来说)连接数据库方法——PDO
pdo.php
"", 'host' => "", 'db' => '', 'user' => '', 'password' => '', 'charset' => '', 'port' => '', ); private static $_pdo; public function __construct($config=array()) { if(is_array($config)) { $this->config = array_merge($this->config,$config); } } public function __set($name,$value) { if(isset($this->config[$name])) { $this->config[$name] = $value; } } public function __get($name) { if(isset($this->config[$name])) { return $this->config[$name]; } } public function run() { $dsn = $this->dbtype . ':host=' . $this->host . ';' . 'dbname=' . $this->db . ';' . 'charset=' . $this->charset . ';' . 'port=' . $this->port; try { self::$_pdo = new PDO($dsn,$this->user,$this->password,array(PDO::ATTR_PERSISTENT=>true)); //echo 'success'; } catch(Exception $e) { die('message:'.$e->getMessage()); } self::$_pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } public function fitch($sql) { $query = self::$_pdo->prepare($sql); // $query->bindparam(1,$id); // $id = 1; $query->execute(); $rs = $query->fetchAll(PDO::FETCH_ASSOC); return $rs; } public function insert($sql) { $query = self::$_pdo->prepare($sql); $query->execute(); return self::$_pdo->lastInsertId(); } public function delete($sql) { $query = self::$_pdo->prepare($sql); $rs = $query->execute(); return $rs; }}
model.php
dbtype = 'mysql';$pdos->host = '127.0.0.1';$pdos->db = 'testdb';$pdos->user = 'root';$pdos->password = '';$pdos->charset = 'utf8';$pdos->port = '3306';$pdos->run();
好吧pdo.php里的好多东西我根本看不懂。
世界不太美好,我不关心了,试试分页……
2015/10/28 17:08
因为之前每次效果做不出来就用的jquery,这次。终于把分页效果加进去了,想哭。
总结下,首先是页数计算的问题。因为用pdo连接的以前的mysql_array_fetch()返回不能用了。
首先因为面对对象根本搞不清,什么$query->fetch();
真的不会用pdo!所以正确的句式,试了千万遍:
$rs = $query->fetch(); return $rs;
好吧这么简单……留着两个讲pdo的文章:,
然后就是数据库的疯狂报错,Sytax error or access violation!
废话它根本就不认识什么$offset $length啊都不在一个文件里。
所以本页要先运行出来,把单引号改成双引号。
$sql = "select id,name,email,phone,content,time from test_message limit $offset,$length";
在pdo.php最后加入:
public function total($sql) { $query = self::$_pdo->prepare($sql); $query->execute(); $rs = $query->fetch(); return $rs; }
然后message.php里面是:
prepare($sqltot); // $arrtot->execute(); $arrtot = $pdos->total($sqltot); $pagetot=ceil($arrtot[0]/$length); //限制页数 if($nowpage>=$pagetot){ $nowpage=$pagetot; } $offset=($nowpage-1)*$length; $sql = "select id,name,email,phone,content,time from test_message limit $offset,$length"; $rs = $pdos->fitch($sql); //计算上一页和下一页 $prevpage=$nowpage-1; $nextpage=$nowpage+1; echo "上一页 下一页
"; include 'index.html'; //var_dump($rs);
然后,始终无法把翻页的链接: 上一页| 下一页 调到页面中间,各种改css,最终只有权限最高的内联: style= “”有过效果。
但是很不爽,于是各种百度学习CSS。
资源: | |
其实最终试来试去发现,顺序的问题,所以css叫层叠样式表
因为发现底部的.copy-right样式能成功,但是自己加的.page01就不行,明明属性完全是粘贴复制的,
瞬间灵光一闪,把.page01移动到紧挨.copy-right样式的后面,居然就成功了。好吧,呵呵.
样式代码:
.page01 { text-align: center;color:#fff; margin: 2em 0;}.page01 p { color: #FFDB58; font-size: 1em; font-weight:400;}.page01 p a { color:#fff;}.page01 p a:hover { /*text-decoration: underline;*/ color: #6D7B8D;}
第三站:用户登录与注册
嗯嗯,用户登录已经成功,逻辑很简单,就是检测数据库里是否有对应的用户名与密码。回到主页面后用session检查一下username判断是否登录。
$sqllog="select id from user where username='$username' and password='$password' limit 1"; $check_query = $pdos->login($sqllog);if($result = $check_query->fetch()){ //登录成功 $_SESSION['username'] = $username; $_SESSION['id'] = $result['id']; echo ""; exit; } else { exit('登录失败!点击此处 返回 重试'); }
不过密码输入时一般有MD5加密,不知为何加上就错了,打到这里突然发现……nm我数据库里密码是手动输入的明码,md5加密后能配的上才怪!!!!我太蠢了
看了好几个注册登录的代码: |
发现登录ui都有<fieldset>标签。原来<field><legend><label>是一套,嗯嗯
The HTML
<fieldset>
element is used to group several controls as well as labels () within a web form.
然后好吧,JS真的很强,想要做一个弹出的注册界面然后就发现了以下代码:
function showWindow(){ var htm="×用户注册
注册 "; $("body").append(htm); return false; } function removeWindow(){ $("#register").fadeOut(function(){ $("#register").remove(); }); $("#mask01").css({visibility:"visible"}); return false; } function center(id){ var h=$(window).height(); var w=$(window).width(); var fh=$("#"+id).height(); var fw=$("#"+id).width(); $("#"+id).css({ "top":(h-fh)/2, "left":(w-fw)/2 }); } $(window).resize(function(){ center("register"); });
.append()
Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements.
无所不能的感觉……好好研究应该可以实现各种各样的特效吧……
哭了……
cono
js里面form没办法提交嘛!然后……一小时后,我错了,可以提交,因为原来的代码连<input type="submit">都没有写提交个……但是在js里写html可读性太差了,所以把代码搬了出来不用append()。
但是效果只能用一次,再点击只有背景消失但是注册界面不弹出是闹那样。
最后还是用回去了orz。
然后submit按钮无法居中…………………………我觉得遇到好多次这个问题了,无爱
↑然而代码太多不想看所以用最简单的方法,给了<div>一个宽度,然后一点一点调到中间了。