114查询软件

  • 时间:
  • 浏览:4
  • 来源:SSYCMS

本教程假设您对 HTML 、Photoshop 6.0 、ASP 、Access 2000 、Web 配置 已经很熟悉,同时对于 Dreamwaver MX 的静态、动态页面制作也有一定基础。 如果您对以上技术不是很熟悉,请参考相关书籍,或到本站论坛探讨。 本教程是以本人所在城市的一个 114 电话号码查询程序为主介绍的, 功能相 对简单。因此,如果您看懂了本教程,那么,不难开发出更高级的程序了。 教程共分成 8 讲,分别是:第一讲:功能设计、第二讲:设计数据库、第三 讲:设计网页图像并切图、第四讲:在 Dreamweaver MX 中建立站点,并规划站 点、第五讲:建立相关各个静态页面、第六讲:将静态页面修改为动态页面、第 七讲:编制后台管理程序、第八讲:整体测试。 下面进行第一讲:功能设计 电话号码查询大家都知道可以通过 114 电话来查, 但查询的结果仅包括电话 对应的企业或个人的名称。其它的资料无法得到,而且还需要支付电话费,如果 通过网络来实现,将会是很方便的。目前,互联网上的电话号码查询网站很多, 他们的功能都很强大, 不仅做到了最基本的电话号码查询,同时也包含了企业的 资讯、企业的宣传、乃至会员企业的产品销售等活动。他们都属于电子商务类站 点了。 我们要设计的程序可没有他们那样复杂, 那么, 我们要实现是什么功能呢? 我说一下简单的功能要求: 1、通过输入企业名称或户主名称查询电话号码; 2、企业资料包含企业的联系方式与经营介绍信息; 3、企业可以实现排名,热点企业可以显示在每次查询的企业推荐位置,实 现更好的宣传; 4、企业的经营类别可以自定义,同时可以按照企业的经营类别查询电话号 码; 5、没有登记的企业可以在线填写表格实现自动提交; 6、提供后台的管理。包括,企业提交表格的审核、企业的显示排名、重点 推荐企业的设置等; 怎么样,功能是不是还凑合?下面我再说说我们的技术特点: 1、通过 Include(包含)的形式组织页面,使程序模块化; 2、使用 Photoshop 6.0 设计页面,同时切图,方便从整体角度构造页面布 局; 3、在数据库中使用“一对多”关系来构造数据库,使其设计的更合理; 4、通过 Dreamweaver MX 设计页面,同时应用“数据库行为”来建立网页, 使您身感 Dreamweaver MX 功能之强大; 5、手工修改 Dreamweaver MX 生成的代码并解释代码,让您开发出自己想 要的功能。 怎么样,有信心吗?有的话就拿起鼠标,我们一起来! 我们的程序所用的数据库选择的微软的 Access 2000 , 选择他的原因是他比 较小巧、包含在 Office 2000 中、适合于访问量和数据量不大的应用,同时也易 于学习。如果您使用的是 SQL Server 2000 或是其它什么数据库,那么您可以根 据本教程在您的数据库系统中建立相应的库。 我们打开 Access 2000,首先 Access 会在第一个屏幕让我们选择一个已有 的数据库或是新建一个数据库,如果我们是初次使用,可以选择“空 Access 数 据库”,这是系统会让我们输入数据库名和选择数据库对应的路径。如果是打开 已经建立完毕的数据库, 可以在下面的列表框里面选择一个已经存在的。或是选 择“更多的文件...” 通过手工的方式定位数据库。如图 2-1: 不管如何,我们会进入数据库的设计视图。如图 2-2: 下面,我们新建数据表,在窗口中选择“使用设计器创建数据表”,然后建立两个 表,表名分别是行业情况表和电话号码表,分别取名为,hy 和 tele。 这里需要注意的是,我们通过在 tele 表里面建立 hy_id 字段,实现对行业表之间 “一对多关系”的建立,以方便以后扩充行业情况。同时,在电话表里面除了设置 基本的电话信息外,还设置了一些标志性字段。例如:Is_Top、Is_Good、Is_Pass。 意义为: 如果 Is_Top 的值是 1, 则此条信息将在电话号码本中的顶部显示。 Is_Good 为推荐标志,如果此字段为 1,则表示将用红字显示此条电话号码。而 Is_Pass 则表示,如果用户在线填写表单,那么填写的内容将不马上显示到查询结果中, 而是需要以后通过我们的审核,审核通过后才能显示出来。那么,如果该字段为 1,则表示已经通过审核。以上三个字段默认值均为 0。 至此, 我们的数据库便建立完毕了。大家主要注意的是关系的建立和标志性 字段的建立。这些将有效的提高我们程序的功能。 在下一部分中, 我们将介绍设计网页图像并切图,让我们的网页有个最初的 视觉效果。 如果网页中没有图像,那么效果一定很糟。对于网页图像的制作,每位朋友 都有自己的制作方法。比如,有的朋友喜欢每用到一个图像画一个图像;有的朋 友喜欢直接在别的网站找些 Gif 动画图像或将素材库里面的素材修改后直接插入 到自己的网页中。至于那种方法比较好,我不准备评价,毕竟各有各的好处。 在这里,我说说我做网页的步骤:第一步是先用 Photoshop 建立一个 760 宽 1000 多象素高的画布,在这个花布上完成每个页面图像的绘制。如果网页中有 Flash 动画,便留下位置,以后在 Flash 中制作。第二步是将画好的页面切图。第 三步, 在 Dreamweaver MX 中拼合这些切图。 第四步, 画下一个页面。 周而复始, 直至把所有的页面都画完。 这就是我画页面的步骤,当然,画页面也可以在 Fireworks 或 Imageready 中 完成, 用他们做页面的同时还可以建立动画或下拉菜单等更好的视觉效果。但因 为我们主要以程序为主, 因此就没有太追求更好的视觉效果。还有一部分人喜欢 动态 Flash 站,他们的制作顺序只有 Flash、ASP(如果用 ASP 做后台编程环境) 和数据库,我也将在以后推出一个【用 Flash MX 2004 + Dreamweaver MX 2004 + ASP + Access2000 打造 Flash 留言本】的教程中介绍。 最后说一下, 以上的步骤是一个人建立网站时的步骤。如果您的网站规模比 较大,有专门的程序员编写程序,也有相应的美工设计界面,至于数据库,甚至 还有专门建立数据库的人员。 那么建立的方法将不会仅仅这几步。毕竟我们网友 中有很多人是一个人搞网站,什么都由一个人来,那么本教程将很适合您。(但 这种形式不是正规的形式, 就像一个公司只有一个人搞,这样的公司怎么能搞大 呢。但在我国互联网发展初期,只能如此了 ^_^) 网页的切图保存在程序包中,里面包含整站切图和已经切好的小图片。至于 如何切图,请参看你的 Photoshop 书籍。 经过画网页和切图, 我们的网页布局设计已经全部搞定,剩下的事就可以建 立网页了。 如果现在您发现有些功能没有考虑到,还需要修改数据库或重新修改 网页切图。那么我可以很严厉的告诉您:“设计阶段你干什么去了?!现在才发 现程序的不足!”不过,现在想到也不算太晚,毕竟比全完成了在发现好(这是 给您吃了一个宽心丸,但尽量别出现这样的问题) 我们的页面是通过 Dreamweaver MX 排版的。 在排版前, 需要构建站点 (可 不要告诉我,您没有构造站点的习惯),构建站点是建立动态网站所必须的。因 此不能忽律。我个人强烈不推荐使用 Frontpage 制作动态网站。 首先,在 PWS 或 IIS 中建立一个 web 站点,建立方法请参照有关书籍。由于 我的机器只能安装 win98,因此我选用的是 PWS(痛苦啊),请看下图 4-1: 然后,在 web 站点所在的文件夹内建立相应的目录结构,这个步骤可以在 资源管理器中完成。图 4-2: 需要说明的是,我在我本机 E 盘的 pcitw 文件夹中建立了一个站点。然后分 别建立了 114、common、db 三个文件夹。分别为 114 的栏目文件夹、通用文件 夹和数据库文件夹。在 114 文件夹下面再建立 images 和 manage 文件夹,用于 保存 114 栏目需要用到的图片和以后的管理页面。而 Connections 文件夹为 Dreamweaver MX 自动生成的,用于保存数据库的连接情况,以后会用到(其它 的文件夹为我机器上的其它站点,不用参考) 至此,我们的 web 站点和 web 站点的目录结构已建立完毕。目录结构的建造过 程也可以在 Dreamweaver mx 中的站点窗口中完成。剩下来的就是在 Dreamweaver MX 中建立站点。 打开 Dreamweaver Mx,选择菜单->新建站点,在高级标签页中分别设置站 点信息。在本地信息类中设置站点的本地情况,在“本地根文件夹”中输入刚才建 立的 Web 站点的绝对路径(E:/pcitw);访问方式如果在本地,可以输入 http://localhost/。请看图 4-3: 如果测试在本机进行, 那么远程信息类可以不设置。 下面设置测试服务器类, 并根据情况输入资料。在服务器类型中选择 ASP Vbscript (如果你喜欢用其它 语言编写 ASP 可以选择相应的选项)访问方式选择本地/网络,表示在本地测试 页面。在测试服务器文件夹输入刚才建立的 Web 文件夹的绝对路径,这里必须 对应。 最后在 url 前缀中输入本地文件的访问方式 http://localhost/详细情况请看 图 4-4: 其它的类别设置由于本教程未用到,因此不予介绍了。 ok,我们的 web 站点、web 站点目录情况、dreamweaver Mx 站点 都建立 完毕了。以后我们构建动态网页便可以轻松完成了。 放下鼠标,拿起手柄,玩一会魂斗罗,轻松一下。 经过前几节的制作,网站前期的准备工作已初步完成,本节建开始建立 114 的各个页面。页面文件的安排是 这样的: top_114.asp: 是所有页面的顶端, 位于网站根目录下的 /common 文件夹下 面; buttom.htm:是所有页面的底端,也位于网站根目录下的 /common 文件夹 下面; 以上两个文件都是通过 ASP 的 include 命令包含在相应的页面中,这样做的 目的是使网站模块化,减少工作量。 index.asp:114 的主页 search.asp:电话号码查询结果页面; seek_tel.asp:查询表单,由于每个页面都包含查询部分,因此本部分也做成 一个单独的文件被其它文件包 含; login_tel.asp:在线填写登记的页面; disp_tele.asp:显示相信信息的页面,页面包含电话号、号码对应的单位、 单位介绍等; login_ok.asp:在线填写登记完成时候显示的页面; 各位在这里只需要注意排版方面的技巧,其它的没有什么太多的。另外,要 用 http 的形式访问这些页面,也就是 http://localhost/114/index.asp 来看主页。 一、建立数据库连接 在第四步,我们的站点就已经建立好了。在构造动态页面之前,我们先在 Dreamweaver MX 中建立和数据 库之间的连接,请按下面步骤进行: 1、在应用程序选项卡里面选择数据库项目,然后点击加号按钮并选择“自 定义连接字符串”,如图 6-1: 2、在数据源设置对话框内,分别输入数据源名称和连接字符串。连接字 符串用于连接数据库,在这里我 们先按绝对路径的格式输入:"driver={Microsoft Access Driver (*.mdb)};dbq=E:/pcitw/db/cy114db_2004.mdb" 3、在这里需要注意的是,在引号内的所有内容必须按找格式书写,数据 库的路径和文件名根据实际情况 填写,如图 6-2: 经过上面 3 个步骤,数据库的连接便建立完毕。这时在看数据库面板,便能 显示出数据库结构来。如图 6-3: 数据库连接的建立, 实质上是在我们的根目录下建立了一个 Connections 文 件夹,并在该文件夹内建立了一个和我们指定数据源名相同的 asp 文件。熟悉 asp 的朋友马上就能看明白了,里面原来是一个变量定义。页就是: MM_db114_STRING = "driver={Microsoft Access Driver (*.mdb)};dbq=E:/pcitw/db/cy114db_2004.mdb",如果我们上传到网站上,那么这 段代码可要修改,否则是连接不上数据库的。如何修改,我们将在以后说明。如 图 6-4: 至此,我们已经建立了数据库的连接,以后任何操作,只要涉及数据库的, 都要用到刚才建立的连接。当然,如果你的网站需要很多数据库,那么你将建立 多个数据库连接。因为一个连接只能对应一个数据库。 二、将 index.asp 转换为动态页面 从本小节开始, 我们逐步将前面建立的静态页面转换为动态页面,使其和数 据库相结合,以完成我们最终的页面。 首先我们要把首页转换为动态页面。在首页中,仅有右侧的“超值推荐”部分 需要从数据库中读取数据,因此,我们的目的是从数据库中的 tele 表中读取 Is_Good 字段值为 1 的记录并按降序显示就可以了。 ok,开始工作。第 1 步,建立数据集.在绑定面板,选择 记录集(查询) 菜单, 并在对话框内根据图 6-5 所示 选择相应的内容。至此,数据集已设置完毕,绑定面板已经显示了数据表的 字段情况。下面进行第 2 步,将公司名称拖动到页面中,以在页面中显示该字段 内容。参看图 6-6: 到现在为止, 我们已经将数据库中的一条记录显示在网页上了,但我们的目 的不是显示一条记录,而是显示 10 条记录。因此,我们还要构造重复区域行为, 只有那样才能将我们指定的记录数目显示到网页中。要构造重复区域行为,请选 择“服务器行为”面板中的“重复区域”,并根据图 6-7 设置,注意,选择重复区 域行为时一定要选择要设置的表格行,也就是 html 的<tr>部分。 最后, 我们设置但点击某个企业时候应该显示详细页面的连接,也就是调用 disp_tele.asp 显示电话号对应企业或个人的详细信息,在这里,我们是通过 id 参数的形式传递给 disp_tele.asp 页面的。选择页面上的动态文本,然后在地址 栏中输入如下内容:disp_tele.asp?company_id=<%=rs_cztj("id") %>,如图 6-8: 二、将 disp_tele.asp 和 right_114.asp 转换为动态页面 天啊,刚得到消息,11 月 5 号才供应暖气,我还得挺几天。痛苦啊! 今天说说 disp_tele.asp 页面的构造,本页面的功能是显示详细的企业或个 人资料。页面功能不是很复杂,Let's Go! 在这里,我们首先约定,本页面的调用格式为: “ disp_tele.asp?company_id=&hy_id=”以便在显示详细信息的同时显示该电话号 对应企业的行业推荐企业。我们不用 Dreamweaver MX 自带的那个转到详细页 行为,我们都是手工填写代码。 首先在页面中构造一个记录集,以显示指定的电话号对应企业的详细资料, 注意 url 参数部分,参见图 6-9: 记录集建立完毕后, 将字段依次拖动到页面的相应位置中。 以显示字段内容。 然后, 在构造相关行业类别对应的推荐企业记录集。本部分由于但是保存为 单独网页, 因此要修改 right_114.asp 文件。 本步操作需要使用高级记录集定义对 话框,并手工填写部分代码。参见图 6-10: 把公司名称拖动到页面中,并建立重复区域行为。最后手工修改 Dreamweaver MX 生成的代码,以便具有当没有类别参数时候显示的超值推荐。 修改内容参见图 6-11: 说明,其中黄色部分为修改了的位置。 ok,经过上面的修改,无论调用参数是否提供 hy_id 都将根据我们的意图显 示相应的超级推荐了。也就是如果没有参数将显示所有的推荐(前 10 个),如 果有则显示相应类别的前 10 个。 本节即将结束,在这里需要提醒各位,Dreamweaver MX 生成的代码最好要 研究明白了。不要期望 Dreamweaver MX 自动给你生成一个网站,你一行都不 用改。没有那种好事的。 三、将 search.asp 和 seek_tel.asp 转换为动态页面 search.asp 负责查询主页输入的关键字,也就是查询电话号码了。而 seek_tel.asp 是主页的查询区,负责填写查询关键字和查询访问选项。下面先说 说 seek_tel.asp 。 seek_tel.asp 首先要将行业列表框动态, 也就是行业列表框内的列表项来自 于数据表 hy。为了动态行业列表框,我们要先建立一个行业信息数据集,名字 叫 rs_hy。 之后, 选取列表框并在属性面板中选择动态按钮, 并在对话框中按图 6 -12 设置。 由于本页面将包含在其它页面中,因此代码中顶部的引用包含将没有用并会出 错,因此要删除这 2 行,参见图 6-13: ok,下面来制作 search.asp 页面,本页面其实就是在数据表 tele 中查找指 定的单位,如果找到了就显示出详细资料,否则显示没找到。 和往常一样,先构造一个记录集,由于需要传递很多参数,因此要通过高级 面板建立。记录集设置情况参见图 6-14: 把记录集中的相应字段拖入页面中,并建立和显示详细资料页的超连接。 由于我们想实现模糊查询, 因此有可能返回的记录集不止一条记录,所以我 们还要构造重复区域行为。参见图 6-15: 如果记录集为空则将显示错误信息,因此还要构造显示区域行为,让记录集 不为空的时候显示,如图 6-16: 再构造一个显示区域行为, 让那个没找到的提示根据情况显示,但这次需要 选定的是“如果记录集为空则显示”这个行为。 到这里, 我们的页面就修改完毕了。本节主要多次运用了重复区域行为和显 示区域行为,大家要熟悉这两个行为的使用。 四、将 login_tel.asp 转换为动态页面 打开 login_tel.asp,选择标签页里面的“应用程序”然后选择插入记录按钮, 并根据图 6-17 进行设置: 建立行业数据集, 并将其绑定到行业下拉列表框中。 同时修改 Dreamweaver MX 生成的页面为如图 6-18: 对表单执行客户端行为中的检查表单, 以检查客户填写表单时的错误和必填 项,同时汉化错误提示信息的 代码,如图 6-19: 最后,我们再构造一下 login_ok.asp,作为登记后的反馈页面。 ok,到这里,114 的前台页面就全部建立完毕了。从下一讲开始,我们讲开 始建立后台管理页面。 对于一个动态网站来说,后台管理部分必不可少。作为动态控制前台的接口,重 要性显而易见。 网站前台页面上的内容一部分是用户在线填写的(例如发布的信 息),一部分是管理员后台添加和管理的(例如错误信息的删除)。由于后台的 重要性,因此后台管理部分的入口要十分隐蔽,甚至要编写专用的登陆界面。大 型的网站或重要的程序要有很多不同分工的后台管理员来管理, 因此每个管理员 的管理权限范围和权限之间决不能互相影响。这也是非常重要的特性。 我们的 114 后台登陆密码保存在 adminloginchk.asp 中,这在大型网站和 重要程序中是不应该这么做的, 如果是那样的程序, 建议专门建立一个管理员表, 用来存放管理员列表和权限。 下面说说管理部分都包含那些页面: /manage/login.asp :管理员登陆页面 /manage/adminloginchk.asp :口令检查 /manage/admin_index.asp :管理主页 /manage/admin_top.asp :顶部 /manage/admin_buttom.asp :底部 /manage/add_hy.asp :增加行业类别 /manage/modi_hy1.asp :修改行业类别部分 1 /manage/modi_hy2.asp :修改行业类别部分 2 /manage/del_hy1.asp :删除行业类别部分 1 /manage/del_hy2.asp /manage/tel_to_disp.asp /manage/modi_tel1.asp /manage/modi_tel2.asp /manage/logout.asp :删除行业类别部分 2 :将用户自行填写的资料设置为显示 :修改电话信息部分 1 :修改电话信息部分 2 :注销部分 所有的后台管理页面部分均放置在网站根目录下的 manage 下面。 login.asp 页面是个仅提供管理员登陆的表单,本身没有其它功能。我们为登陆 的口令文本框设置为 admin_pwd,并采用 post 的形式提交。 adminloginchk.asp 页面负责检查 login.asp 输入的口令是否正确,如果正确 则设置 Session("admin_pass")="1" 否则转向到主页.代码如下: <% If Request.Form("admin_pwd")="pcitw114" Then Session("admin_pass")="1" Response.Write("admin_index.asp") Else Response.Write("../index.asp") End If %> 这里,判断管理员密码是否是我们指定的,密码可根据实际情况修改成其它的. 如果是则设置 Session,并转向到管理主页,否则转向到 114 主页.注意,在所有的管 理页面的顶部都要判断 Session,例如: <% If Session("admin_pass")<>"1" Then Response.Write("../index.asp") End If %> 通过如上代码,可以方式非法用户通过其它页面进入管理页面进行破坏. 本节介绍如何建立 add_hy.asp 页面,本页面的作用是增加行业信息。构造这方 面的功能可以直接使用工具 栏上的插入记录的功能,参见图 7-1: 并美化生成的页面,最后增加表单检查行为,以防止提交空字段。至此增加 部分的页面便构造完毕,在这 里,我们应用了增加记录的服务器行为,并增设了检查表单行为。电话号码的增 加和本例相同,就不再重复了 。 行业信息的修改部分需要 2 个步骤来完成。 第一步是让用户选择一个待修改 的行业(也就是显示行业列表) ,第二步是修改指定的那个行业信息。ok,下面我们来构造行业列表,行业列表 使用的是动态表格服务器行为 和记录集导航服务器行为。 在构造动态表格服务器行为前要先建立一个表格中要 显示数据的数据集,然后再建 立动态表格,参见图 7-2: 为行业字段设置连接,连接指向下一个页面,连接内容为: modi_hy2.asp?id=<%=rs_hy("id" %> 建立记录集导航栏,如图 7-3: 由于 modi_hy2.asp 与 add_hy.asp 页面息相近,因此,我们可以修改 add_hy.asp 页面以适合我们想要的功能 。 修改的内容主要包括建立一个指向指定记录的记录集和将记录集字段绑定到文 本输入框中,最后我们再应用 更新记录服务器行为就可以了(首先要把原来页面带的插入记录服务器行为删 除)。记录集建立的页面参见图 7 -4: 字段与文本输入框绑定如图 7-5: 建立更新记录服务器行为如图 7-6: 到现在,修改部分已经建立完毕。我们主要应用了几个服务器行为,他们功 能的强大,让我们的工作事半 功倍。 在本节的最后, 我们来构建删除行业的记录集行为。删除页面和修改页面差 不多,也是通过 2 个页面来完成 的, 第一个页面和修改的很类似,第 2 个页面应用的是删除记录服务器行为而不 是修改记录服务器行为。我们主 要是以第 2 个页面为主介绍删除记录。删除记录服务器行为的对话框见图 7-7: 经过如上的介绍,我们已经具备了构造各式各样的页面的能力。其实,在网 站编程中,无非就是增加、修 改、删除等几个重要的功能,我们掌握了这些,就能构造出强大的应用程序了。 为了能迅速构造应用程序,仅 仅熟悉 Deamweaver MX 是不够的,更重要的是,我们能够看透程序的本质,这 是最难学的。 到本节为止,【鹏程 114 Web 查询系统】已经编写完毕,根据当初的设计情况, 我们已经完成了功能的建立。 如果发现还有些当初未想到的功能,那只有待下次 升级的时候再开发了。 程序书写完毕后,并不是立刻让用户使用,而是应该自己先试用,或者让一些朋 友测试。 经过严格测试的程序才能交付到用户的手里,否则一些漏洞的出现就很 麻烦了。 在我们这个程序里面主要需要检查管理员页面是否可以被非法访问、 客户在线提 交的表单是否合法等。在限制非法访问方面我们已经采取了 Session 验证。而 在线填写表单方面,我们也检查了用户的必填项目。 最后,为了能在任意文件夹内访问本程序,必须将 Connections 文件夹里面的 连接串定义文件中的连接串修改一下,也就试修改成相对目录的形式,修改方法 如下: 源代码: MM_db114_STRING = "driver={Microsoft (*.mdb)};dbq=E:\pcitw\db\cy114db_2004.mdb" Access Driver 修改后代码: MM_db114_STRING = "driver={Microsoft Access (*.mdb)};dbq="&server.mappath("/db/cy114db_2004.mdb") Driver 这样,我们最后一步修改也完成了。我们的所有程序设计与编写彻底宣告完成! 在这里, 我对大家的关心表示感谢,同时也希望广大编程爱好者对本教程中的不 当和不足之处提出宝贵的建议和意见。也希望以后大家支持我们的网站!