如何建设网站并与数据库相连(以access为例)

当我第一次做网页的时候经历了诸多坎坷,因为网站的建设不同于普通编程语言的开发。比如java,你只需要安装好jdk,再下载个eclipse等集成开发环境你就可以开始开发了。但是网站的开发涉及多种语言,使用多个软件,因此刚开始接触实在让人挠头。不过如果能够做很好的梳理,那就没有那么困难了。

适逢一个朋友问我有关网站连接access数据库的问题,那我这里就以access数据库为例,详细讲述一下网站的开发过程。当然,开发过程多种多样,我在此处权作抛砖引玉吧。下面的过程描述我会尽量啰里啰嗦一些,力求让大家明白,诸位可不要被这么长的篇幅吓到喔,其实没那么困难。

首先我们先纵观全局,看一下开发网站需要哪些工作。

上图所示是网站建设中涉及的基本工作,下面我们梳理一下网站建设的流程

(1)使用notepad++、dreamweaver等编写网页(高手可以直接用记事本喔,不过大量开发的时候感觉挺耽误时间呢~)。网页使用的语言包括静态语言html,样式表css,脚本语言javascript,动态语言jsp、php、asp等。一般jsp开发(即传说中的j2ee)使用my eclipse集成开发环境,asp开发则使用微软出品的Visual Studio。

(2)完成网页编写后则架设服务器,将所编写的网页全部放在服务器软件的对应文件夹中(如tomcat是webapps文件夹)。为了能够正常运行服务器软件,有时还要做些配置或安装。如使用tomcat服务器软件的话就要先安装java的jdk。

(3)网页中的数据一般存放在数据库中。Jsp和php常用的是mysql数据库,asp常用的是SQL Server数据库,银行等金融机构的重要数据一般放在oracle数据库中。

下面我们通过一个简单的登录界面示例来说明网站的开发过程。

(一)编写网页

1 下载notepad++(http://notepad-plus-plus.org/download/v5.9.3.html)并安装。

安装完成后打开notepad++,新建文件login.jsp,在编辑界面中输入如下代码:

<%@page contentType=”text/html;charset=gb2312″%>

<html>

<head>

<title>测试access的登录界面</title>

</head>

<body>

<form id=”form1″ name=”form1″ method=”post” action=”testdb.jsp”>

       <div align=”center”>

              <label>用户名</label>

              <input type=”text” name=”user” id=”user” />

              <br />

              <label>密&nbsp&nbsp&nbsp码</label>

              <input type=”text” name=”password” id=”password” />

              <br />

              <br />

              <input type=”submit” name=”login” id=”login” value=”登录” />

       </div>

</form>

</body>

</html>

这里多说一句,如果用eclipse或者my eclipse做开发,需要配置一下jdk的环境变量:

(1)在桌面“我的电脑”(vista和win7中是“计算机”)图标上右键,选择“属性”,再选择“高级系统设置”,选中标签“高级”,点击下方的按钮“环境变量”。

 

(2)在“系统变量”的“Path”的内容后追加“C:\Program Files\Java\jdk1.6.0_27\bin”“C:\Program Files\Java\jre6\bin”(注意:这是我安装jdk后的路径所在,请大家对照着修改为自己安装的jdk和jre的bin文件夹的位置),各内容直接用英文的分号“;”隔开,点击确定。

 

(二)架设服务器软件

1 首先安装java的jdk(http://www.oracle.com/technetwork/java/javase/downloads/index.html

虽然当前最新版是java 7,但是鉴于CSDN上对java 7的诸多不尽人意的评价,为保险起见我们此处仍用java 6,java 7就留待以后探索吧。

 

点击jdk的下载,在新界面中首先选择接受oracle的协议(accept),然后下载windows x86版的jdk,然后安装之。

 

2 下载tomcat服务器软件(http://tomcat.apache.org/download-70.cgi

 

上图下载的是免安装版的tomcat,需要做相应配置如下(该配置过程参考了网页http://www.huomo.cn/sysapp/article-3582.html):

(1)在tomcat的安装目录的bin文件夹下(C:\apache-tomcat-7.0.21\bin)分别找到startup.bat和shutdown.bat,右键用记事本打开它们,分别在两个文件的最前面加上下面两行内容:

SET JAVA_HOME=C:\Program Files\Java\jdk1.6.0_27

SET CATALINA_HOME=C:\apache-tomcat-7.0.21

(说明:

SET JAVA_HOME=JDK目录

SET CATALINA_HOME=前面解压后Tomcat的目录或者%cd%)

这样我们可以通过双击startup.bat运行服务器,双击shutdown.bat关闭服务器。

(2)修改\conf\tomcat-users.xml文件:

在<tomcat-users>标签内加入

<role rolename=”manager”/>

<role rolename=”admin”/>

<user username=”admin” password=”admin” roles=”admin,manager”/>

这样才可以使用Tomcat的管理界面。

(3)将Tomcat加入服务

a. 修改bin目录中的service.bat文件:找到set CATALINA_HOME=%cd%,如果从来没有安装过Tomcat,或者保证Services.msc启动服务管理器检查没有Apache Tomcat系统服务,到此你就可以转到第二步了。否则,找到以下几行:

(a) set SERVICE_NAME=Tomcat5

“Tomcat5”修改成你需要的服务名,这个将是以后使用net start/stop来操作的服务名称。

(b) set PR_DISPLAYNAME=Apache Tomcat

“Apache Tomcat”改为你需要的显示服务名,这个将显示在服务管理器中。

(c) set PR_DESCRIPTION=Apache Tomcat Server –

这一行改不改无所谓,是服务的描述,根据自己的喜好决定吧。

b. 运行cmd打开控制台,进入Tomat目录/bin文件夹,输入如下命令运行。

service.bat install

程序提示:The service ‘Tomcat5(或者你修改一后的SERVICE_NAME)’ has been installed  说明服务Tomcat已经被安装成功。

顺便说一下,运行service.bat remove可以移除服务。

c. 到这里,服务添加成功,运行services.msc,可以看到添加的服务,默认状态下该服务是手动运行的,在它的属性中,将启动类型更改为“自动”,以后机器启动以后Tomcat就在后台启动了。

说明:就本示例而言,后面(2)(3)两步可以不做。当然,如果嫌上述配置步骤太复杂,我们可以直接下载下图所示的安装版的tomcat:

 

(4)我们随便打开一个浏览器,在地址栏中输入http://localhost:8080,如果可以看到tomcat的欢迎界面,则说明安装配置成功。

3. 在tomcat的webapps文件夹下新建文件夹testdb,将刚刚创建的login.html和testdb.jsp文件拷贝到其中。然后打开浏览器,在地址栏中输入http://localhost:8080/testdb/login.jsp,我们可以看到登录界面:

(三)建立数据库

1 打开2003版ACCESS,点击“文件”->“新建”。屏幕右侧出现一个新窗口,包括一些选项。选择“空数据库”,会弹出对话框,在对话框中为数据库命名为testdb.mdb,点击“创建”。

 

2 在新弹出的编辑框中,点击“使用设计器创建表”:

 

在表中“字段名称”处输入user和password,“数据类型”均设为“文本”,下方的“允许空字符串”处均设为“否”。

 

选中user,右键选择“主键”,由此可将user字段设为“主键”。

 

点击当前对话框右上方的×号,出现提示框“是否保存对表1的设计的修改”,点击“是”,在新弹出的对话框中将表名命名为“userTable”。

 

3 双击图中的userTable,在表中输入2条记录,分别是“apple,123”和“banana,321”,代表用户(user)apple的密码(password)是123,用户banana的密码是321。

 

这样就成功建立了我们需要的示例数据库。

(四)建立网页与数据库之间的连接

数据库中存入的是合法的用户名及其对应密码信息。现在我们将网站与数据库建立连接。当我们点击网页中的“登录”时,网页login.html调用testdb.jsp,用输入的用户名对数据库进行查询,得到该用户名对应的密码,然后看该密码是否与刚刚网页输入的密码相匹配。如果匹配,则返回“登录成功”的消息,否则返回“用户名或密码错误,登录失败”的消息。

1 打开“开始”菜单中的“控制面板”,找到“管理工具”中的“数据源ODBC”。

 

在“用户DSN”标签下点击“添加”。

 

选择Microsoft Access Driver,点击“完成”。

 

在弹出的对话框中输入数据源名testdbODBC,选择刚刚建立完成的数据库testdb。

 

2 用notepad++新建文件testdb.jsp(同样存放在webapps目录下的testdb中),输入如下代码(参考了http://www.jb51.net/article/6742.htm

http://developer.51cto.com/art/200909/149734.htm两个网页):

<%@page contentType=”text/html;charset=gb2312″%>

<%@page import=”java.sql.*”%>

<html>

<body>

<%

       try{

              Class.forName(“sun.jdbc.odbc.JdbcOdbcDriver”);

       }

       catch(ClassNotFoundException e){

              out.print(e);

       }

       try{

              String url = “jdbc:odbc:testdbODBC”;

              String user = request.getParameter(“user”);

              out.print(user+”,”);

              String password = request.getParameter(“password”);

              Connection conn = DriverManager.getConnection(url,”testdbODBC”,”jsp.com.cn”);

              Statement stmt = conn.createStatement();

              ResultSet rs = stmt.executeQuery(“SELECT password FROM userTable WHERE user='”+user+”‘”);

              if(!rs.next())

                     out.print(“抱歉,您的用户名或密码输入错误,登录失败~”);

              else{

                     if(rs.getString(1).equals(password))

                            out.print(“恭喜您!登录成功!”);

                     else

                            out.print(“抱歉,您的用户名或密码输入错误,登录失败~”);

              }

              rs.close();

              stmt.close();

              conn.close();

       }

       catch(Exception ex){

              out.print(ex);

       }

%>

</body>

</html>

3 打开浏览器,在地址栏输入http://localhost:8080/testdb/login.jsp,输入用户名apple和密码123,点击“登录”,出现结果如下:

 

输入错误的用户名app和密码123(或者你也可以输入其他错误的用户名和密码),点击“登录”,出现结果如下:

 

好啦,至此已完成一个简单的网页与access数据库的连接,大功告成!

4 thoughts on “如何建设网站并与数据库相连(以access为例)

  1. 2011-09-14 at 05:20

    这么详细的建站博文还真是少见啊!

    我看好你哦~

    1. 暮春小友
      admin
      2011-09-14 at 07:33

      谢谢鼓励!好开心喔~虽然花了很久时间~

  2. 2012-07-01 at 00:24

    非常详细!

    1. 暮春小友
      暮春小友
      2012-07-13 at 01:01

      谢谢!希望对大家的开发有所帮助~

Leave a Reply

Your email address will not be published. Required fields are marked *