【PHP+MYSQL】实现登录界面的学习笔记

来源：互联网发布：阿里云共享计算型编辑：程序博客网时间：2024/05/29 16:43

目标

利用php和MySQL实现登录界面

工具

1.wampserver(简单易上手的集成安装环境！)

2.notepad++（或dw,嫌麻烦记事本也可以！）

步骤

一、首先安装wampserver

第一步：在百度软件中心下载wampserver

第二步：安装

安装过程很简单，基本都是直接下一步就行。需要注意的是有些可能不太懂这一个，这个是选择Windows浏览器，直接点击打开即可。

第三步：打开wampserver软件

你会看到右下角有一个绿色的（或者黄色、红色“w”图标）

右键

选择伟大的Chinese就ok啦！

第四步：解决端口问题（如果你执行第三步时发现图标是绿的就不用管这个步骤）

有的电脑在运行这个软件时，发现图标为橙黄色，这说明你的80端口被本电脑上的其他软件占用了这时候你需要做一些改动，让wampserver用其他的端口，例如：90

方法如下：

1、选择右下角小图标，左键

2、选择Apache下的httpd.conf文件

3、

将80改为90保存。

二、数据库设计

上一个步骤我们已经将php的环境部署完毕weampserver中也自带MySQL数据库这一步我们要创建数据库，和表
如何创建表呢？
第一步：点击phpMyAdmin，会打开你的浏览器地址栏上是http://localhost/phpmyadmin/ 你看的的界面是如图，让管理者可用Web接口管理MySQL数据库

（如果你在上一步骤中，修改了端口那你的手动输入以下地址了 http://localhost：90/phpmyadmin/）
第二步：创建数据库—点击数据库—创建数据库（例如：mylogin）
第三步：创建表—在左侧选择你的数据库—新建数据表—填写你的字段（如：表名 logintable，字段名 l_id l_name l_password,）—点击右下角的“保存”
第四步：在右边你会看到你刚建的表—点击表—选中上栏的“插入”—输入你的值（例如：如下）

三、测试你的php文件能否连接数据库

第一步：打开你的wampserver的安装目录，找到www文件夹（记住这个文件夹，以后我们要测试的网页都要放到这个文件夹下）
第二步：用notepad++或记事本打开“testmysql.php”这个文件。这是一个连接数据库的php问件。
第三步：修改你的数据库用户名和密码，因为我们的数据库名和密码都没有改，所以是默认的，将hostname改为localhost，dbuser改为root，将dbpassword删掉（单引号得留着）保存。如下：

<?php $link = mysql_connect(<span style="color:#009900;">'localhost','root','</span>'); if (!$link) { die('Could not connect to MySQL: ' . mysql_error()); } echo 'Connection OK'; mysql_close($link); ?>

第四步：在浏览器中输入http://localhost/testmysql.php，浏览器中显示Connection OK ，则为连接成功。

四、设计你的登录界面

以上我们已经将所有准备工作都做完了，下一步便是设计我们的登录界面。
第一步：首先在www文件夹下建立我们的一个文件夹来存放我们这个项目的文件，就叫“login”吧。
第二步：建立一个html文件，（例如：login.html）

代码如下：

<html><head>   <title>登录</title>   <script language="javascript"type="text/javascript" >       function check(){           var name=LoginForm.username.value;           var pwd=LoginForm.password.value;           if(name==""){                alert("请输入用户名~");                LoginForm.username.focus();                return (false);           }           if(pwd==""){                alert("请输入密码~");                LoginForm.password.focus();                return (false);           }       }   </script></head><body>   <div class="center">       <form name="LoginForm" method="post"action="login.php" onsubmit="return check(this)">           用户名:<input name="username" type="text"id="username"/><br />           密  码:<inputname="password" type="password"id="password"/><br/>           <input value="登录" type="submit" name="submit"/>           <input value="注册" type="button"onclick="javascrtpt:window.location.href='register.html'"/><br/>       </form>   </div></body></html>

第三步：建立一个访问数据库的文件（例如：Conn.php）
代码如下：

<?php   //访问数据库,读取数据   $conn =@mysql_connect("<span style="color:#33cc00;">localhost"</span>,"<span style="color:#009900;">root</span>","");   if (!$conn){      die("数据库连接失败: " . mysql_error());    }   mysql_select_db("<span style="color:#009900;">mylogin</span>",$conn);   //mylogin是我们数据库的名字   mysql_query("set character set 'gbk'");   mysql_query("set names 'gbk'");?>

第三步：建立验证登录的php文件（例如login.php）
代码如下：

<?php   //启动session会话   session_start();   //注销登录   $var = isset($_GET['action']) ? $_GET['action'] : '';   if ($var == "logout"){       unset($_SESSION['userid']);       unset($_SESSION['username']);       echo '注销登录成功！点击此处<a href=<span style="color:#009900;">"login.html"</span>>登录</a>';       exit;    }   //登录   if (!isset($_POST['submit'])){       exit('非法访问！');    }   $username = trim($_POST['<span style="color:#009900;">l_name</span>']);   $password = trim($_POST['<span style="color:#009900;">l_password</span>']);   //访问数据库，进行连接   include("conn.php");   //检查用户名密码   $sql = "<span style="color:#009900;">select l_id from logintable where l_name="."'$username'"." and l_password="."'$password'"</span>;   $result = mysql_fetch_array(mysql_query($sql));   if ($result){       //登录成功       $_SESSION['username']=$username;       $_SESSION['userid']=$result['<span style="color:#009900;">l_id</span>'];       echo $username.'欢迎你！<br />';       echo '点击此处<a href="login.php?action=logout">注销</a>登录！<br/>';   }else{       exit('失败咯！快点击此处<a href="javascript:history.back(-1);">返回</a>重试');    }?>

五、万事具备，只欠测试

回到浏览器输入
http://localhost/login/login.html
在输入框内输入你在数据库表中输入的数据，看一下你是否能登录成功。如果不成功看一下代码和相关字段能否相对应。

0 0