电子商务网站建设实训指导书

山西药科职业学院 电子商务网站建设与维护 实训指导书 执笔人 贾文雅 王一 日 期 2011 年 2 月 29 日 实训一 建立 Web 应用开发及运行环境 一 实训目的 1 掌握 Web 运行环境的建立方法 2 掌握 JSP 应用环境的建立 二 实训环境 Windows XP 2000 2003 操作系统 JDK6 Tomcat 6 0 MyEclipse 6 5 三 实训内容 1 安装 JDK6 2 安装服务器软件 Tomcat 6 0 3 安装 配置 SQL Server 2005 4 安装网络购书系统 5 安装 配置 MyEclipse 6 四 实训步骤 一 安装 JDK6 1 安装 JDK6 默认安装 2 配置系统环境变量 1 右击桌面上 我的电脑 选择 属性 在弹出的 系统属性 窗 口中选择 高级 标签 2 单击 环境变量 按钮 在 系统变量 列表框中选择 Path 参数 并单击 编辑 按钮 在变量值前面加入 JAVA 的路径 C Program Files Java jdk1 6 0 11 bin 确定 3 单击 新建 按钮 设置环境变量 CLASSPATH 其变量值为 3 测试安装结果 1 打开记事本 编辑一简单的 JAVA 程序 保存至 C 如图 1 1 所示 图图 1 11 1 JAVAJAVA 小程序小程序 2 在 DOS 命令提示符下执行 C Javac HW java 在当前目录下生 成 HW class 文件 3 在 DOS 命令提示符下运行 C Java HW 显示 Hello World 如图 1 2 所示 图 1 2 JAVA 程序运行结果 二 安装服务器软件 Tomcat 6 1 Tomcat 安装 Choose install Location 建议为 C Tomcat 6 0 如图 1 3 所示 Java Virtual Machine 为 C Program Files Java jdk1 6 0 11 如图 1 4 所示 其余默认安装 图图 1 31 3 tomcattomcat 6 6 0 0 安装路径安装路径 图图 1 41 4 J2SEJ2SE 路径路径 2 测试 Tomcat 确认 Tomcat 处于运行状态 在浏览器地址输入 http 127 0 0 1 8080 或 http localhost 8080 如看到 Tomcat 主页表 示安装成功 3 编写第 1 个 JSP 程序 1 在 Tomcat 6 0 的 webapps ex D02 目录文件下新建 ex2 01 jsp 文件 打开记事本 编写如图 1 5 所示的程序 图 1 5 JSP 小程序 2 在浏览器地址栏输入 http 127 0 0 1 8080 ex D02 ex2 01 jsp 运行此程序 可以看到运行结果 三 安装及配置 SQL Server 2005 1 安装 SQL Server 2005 2 开始 运行 输入 services msc 命令 如图 1 6 所示 打 开 服务 窗口 图图 1 61 6 JSPJSP 小程序小程序 3 鼠标右键启动 3 个服务 SQL Server SQL Server Agent SQL Server Browser 4 开始 程序 Microsoft SQL Server 2005 配置工具 SQL Server 外围应用配置器 服务和连接的外围应用应用配置器 远程 连接 选择 本地连接和远程连接 选择 同时使用 TCP IP 和 named pipes 确定 5 启动 SQL Server 2005 开始 程序 Microsoft SQL Server 2005 SQL Server Management Studio 打开 对象资源管理器 鼠 标右击服务器名称 属性 安全性 服务器身份验证 SQL Server 和 Windows 身份验证模式 6 对象资源管理器 安全性 登录名 sa 右键 属性 状态 启用登录 7 对象资源管理器 安全性 登录名 sa 右键 属性 常规 取消 强制实施密码策略 密码重设 空 8 对象资源管理器 鼠标右击服务器名称 重新启动 四 安装网络购书系统 1 首先将 bookshop 整个文件夹拷贝到 tomcat 发布目录 webapps 下 2 导入数据库 1 打开 SQL Server 2005 的 对象资源管理器 窗口 鼠标右击 数 据库 还原数据库 显示 还原为数据库 窗口 2 在 目标数据库 文本框中输入数据库名称 bookshop 选择 源设备 单选按钮 单击右侧的 选择文件 按钮 弹出 指定备份 窗口 3 单击 添加 按钮 进入 定位备份文件 窗口 文件类型 选择 所有文件 选择文件 Tomcat 6 0 webapps bookshop bookshop0804 文件 确定 如图 1 7 所示 图图 1 71 7 选择数据库文件选择数据库文件 4 勾选 选择用于还原的备份集 如图 1 8 所示 图 1 8 勾选 选择用于还原的备份集 5 选择左侧的 项 注意数据库的还原位置 图 1 9 数据库的还原位置 3 创建数据源 1 打开 控制面板 管理工具 数据源 ODBC 选择 系统 DSN 选项卡 2 单击 添加 按钮 弹出 创建新数据源 对话框 3 选择 SQL Server 单击 完成 按钮 4 弹出 创建到 SQL Server 的新数据源 窗口 在 名称 文本框输入数据 源名称 在网上书店中 为数据源起名 bookshoplk 在服务器文本框输入 SQL 2005 的服务器名称 如 LZM 34B2062D547 单击 下一步 按钮 如图 1 10 所示 图图 1 101 10 创建数据库窗口创建数据库窗口 5 在弹出的窗口中选择 使用用户输入登录 ID 和密码的 SQL Server 验 证 单选按钮 在 登录 ID 和 密码 文本框中输入对 bookshop 数据库有 存取权限的 SQL Server 账号 sa 和密码 无 单击 下一步 按钮 6 在弹出的窗口中 选择 更改默认的数据库为 复选框 并选择 bookshop 数据库 单击 下一步 按钮 7 在弹出的窗口中单击 完成 按钮 8 在弹出的 ODBC Microsoft SQL Server 安装 窗口中单击 测试数据 源 按钮 9 弹出 SQL Server ODBC 数据源测试 窗口 如果对话框提示测试成功 表示 DSN 设置正确 单击 确定 按钮 完成系统 DSN 的建立 4 网站的发布 重启 tomcat 在浏览器地址栏中输入 http 127 0 0 1 8080 bookshop 初始账号和密码 pds pass http 127 0 0 1 8080 bookshop admin 初始账号和密码 admin pass 五 安装及配置 MyEclipse 1 安装 MyEclipse 运行 MyEclipse 6 5 0GA E3 3 exe 文件安装 Eclipse 2 输入序列号 启动 Eclipse6 5 弹出 Subscription Key Information 窗口 单击 Enter Subscription 按钮 Name flowbyte cn Serial sLR8ZC 图图 1 111 11 输入序列号输入序列号 3 汉化 将 eclipse 文件夹拷贝到 MyEclipse 6 5 的根目录下 将 eclipse 文件夹内的 文件覆盖 在拷贝的过程中会出现文件覆盖的弹出窗口 单击 确定 重新 启动 MyEclipse 6 5 4 运用 MyEclipse6 5 制作第一个 JSP 程序 启动 MyEclipse 6 5 配置环境 窗口 首选项 找到左 边树型菜单中的 MyEclipse Enterprice Workbench server Tomcat Tomcat 6 x 如图 1 12 所示 directory 为 tomcat6 0 的安装根 目录路径 图 1 12 在 首选项 中配置 tomcat 安装路径 选择左边树型菜单中的 tomcat 6 x JDK 单击右边的 Add 按钮 弹出 Tomcat Add JVM 窗口 单击 JRE 主目录右侧的 浏 览 的按钮 找到 jdk1 6 0 11 文件夹所在位置 如图 1 13 所示 图 1 13 jdk1 6 0 11 文件夹所在位置 3 创建 web project 文件 新建 web project Optional Maven Support 在 project name 中输入一个工程名字 如图 1 14 所示 点击 完成 后在左侧的 包资源管理器 中出现 图 1 14 创建 web project 4 右击 MyProiect WebRoot 新建 JSP 弹击 Create a new JSP page 窗口 如图 1 15 所示 在 File Name 文本框中输入 JSP 文件的名 字 如 login jsp 图 1 15 新建 JSP 文件菜单 5 打开 JSP 文件进行编辑 6 部署 JSP 项目 点击 工具栏中的按钮 打开 Project Deployments 窗口 单击 Add 按钮 选 中容器 tomcat 6 x 单击 完 成 按钮 如图 1 16 所示 部署完成 在 Tomcat 6 0 webapps 下生成 votew 文件夹及 MyEclipse 工作 区 vote WebRoot 文件夹下的所有文件 图 1 16 部属 JSP 项目 7 部署完毕 接下来启动 tomcat 服务 点击工具栏中的 按钮旁边 的三角形 选中 tomcat start 8 最后到 IE 浏览器中打开运行 http localhost 8080 MyProject login jsp 实训 2 HTML 的表格和表单 一 实训目的要求 1 掌握 HTML 表格的概念 2 掌握 HTML 表单的概念 3 熟练掌握 HTML 表格的制作方法的技巧 4 学会 HTML 表单的制作方法 二 实训内容及操作步骤 操作一 1 打开记事本软件 2 输入以下内容 简单表格制作方法 学生基本情况表 姓名性别年龄籍贯总分 专业特长 王小林男25宁波567 电子商务软件开发 朱风烽男23上海542 现代物流网络游戏 孙伟萍女22南京587 计算机ASP 语言 张生笑女24苏州512 电子商务数据库开发 周卫文男25上海541 现代物流网络游戏 3 将文件保存在 D student 141 txt 4 将文件保存在 D student 141 html 5 运行 141 html 文件后得到的结果 操作二 1 打开记事本软件 2 输入以下内容 复杂表格制作方法 教学业绩定量表 大项系项完成课时自评分 自评分考评分 教 学 业 绩 50 分 教 学 工 作 量 40 分 满教 学工作量 180 课时得 40 分 每超 50 课时加 1 分 双肩挑人员工作量减半 第一学期课程名称授课班级完成课时 48 分45 分 VB 程序设计 电子商务概论 VFP 数据库管理 计算机 电子商务 现代物流 80 课时 48 课时 76 课时 第二学期电子商务网站建 设 网络营销与策划 商业信息技术电子商务 电子商务 电子商务80 课时 76 课时 48 课时 论文指导24 人 教学效果 10 分 考核优秀为 10 分 良好为 8 分 一般为 5 分 较差不计分 本项按已通过的教学评估的结果打分 尚未进行 教学评估的 由系 教研室组织考核 进行打分 学院评估结果有效期为二年 3 将文件保存在 D student 142 txt 4 将文件保存在 D student 142 html 5 运行 142 html 文件后得到的结果 操作三 1 打开记事本软件 2 输入以下内容 简单表单制作方法 学生学习情况调查表 姓名 学号 男 女 所在城市 上海 南京 宁波 北京 西安 您喜欢的课程 电子商务 VB 程序设计 C 程序设计 西方经济学 网络营销 网站建设 ASP 程序设计 电子商务与物流 3 将文件保存在 D student 143 txt 4 将文件保存在 D student 143 html 5 运行 143 html 文件后得到的结果 操作四 1 打开记事本软件 2 输入以下内容 复杂表单制作方法 商品信息反馈表 客户名称 账号 密码 单位性质 国营集体 个体 合资 独资 所在城市 上海 南京 宁波 北京 西安 您喜欢的商品 笔记本电脑 数码照相机 数字电视机 彩信手机 滚筒洗衣机 数字电冰箱 欧式燃气灶 中央空调 建议和意见 您有什么好的建议和 意思请写在这里 3 将文件保存在 D student 144 txt 4 将文件保存在 D student 144 html 5 运行 144 html 文件后得到的结果 小结 通过以上的实训可以使学生掌握表格和表单的概念 学会表格的制作方法和技 巧 掌握表单的一般制作方法 表格各单元格中的颜色可以根据以下的几个命令得到 表格的背景色彩 行的背景色彩 表元的背景色彩 或 rrggbb 16 进制 RGB 数码 或者是下列预定义色彩名称 Black 黑色 Olive 橄榄色 Teal 深青色 Red 红色 Blue 蓝色 Maroon 茶色 Navy 深蓝色 Gray 灰色 Lime 浅绿色 Fuchsia 紫红色 White 白色 Green 绿色 Purple 紫色 Silver 银色 Yellow 黄色 Aqua 水绿色 思考题 1 表格标题的位置由什么属性决定 请说出其格式 2 表格的边框尺寸由什么属性决定 请说出其格式 3 说出表格单元格内的文字对齐方式 请说出其格式 4 如何实现跨多行 多列的表元 请说出其格式 实训三实训三 网页设计基础网页设计基础 HTML 语言语言 实训前的准备 1 检查是否连接了 Internet 2 检查操作系统是否 Windows 98 2000 或 Windows XP 3 在除 C 盘上 可以在 D 盘 E 盘 或其他逻辑盘 创建一个新文件夹 名字为 student 4 检查系统是否有 Word 2000 Dreamweaver FrontPage 记事本等软件 一 实训目的 1 了解 HTML 文档结构 2 初步掌握基本标记的使用 3 能够运用 MyEclipse 6 5 制作简单网页 二 实训环境 Windows XP 2000 2003 操作系统 MyEclipse 6 5 三 实训内容 1 使用 MyEclipse 6 5 制作只有一行文字的网页 了解 HTML 文档结构 2 在 IE 浏览器中打开编写的网页文件 查看运行效果 3 在网页中添加文本内容 并对页面格式进行设置排版 制作一个简单文 字内容的网页 4 在网页中添加图片 并对页面格式进行设置排版 制作一个简单图文内 容的网页 5 制作一个索引网页 建立与前面网页之间的超连接 6 制作一个简单的个人主页 四 实训步骤 1 使用 MyEclipse 编辑 HTML 文件 1 开始 程序 MyEclipse 6 5 MyEclipse 6 5 2 文件 新建 项目 常规 项目 单击 下一步 按钮 3 文件 新建 HTML Advanced Templates 4 观察网页的基本结构 了解基本结构所用标记的作用 保存文件 在 IE 浏览器中查看网页运行效果 5 在空白网页的标记之间输入文字 上海商学院 存盘并查看运行效 果 2 制作一个简单文字内容的网页 1 新建一个空白网页 2 添加适量文字 3 利用 HTML 文字标记进行版面编排 要求 使用标题 分段 分行 段落对齐方式 设置字体 字体 大小 颜色 风格 插入水平线等 4 保存文件 文件名为 1 htm 5 在 IE 浏览器中查看网页运行效果 6 重复 的过程 更改标记属性 观察运行效果 3 制作一个简单图文内容的网页 1 新建一个空白网页 在网页中添加适量文字 利用 HTML 文字标记 进行版面编排 2 运用 HTML 标记插入图片 设置图片的属性 进行图文混排 3 保存文件 文件名为 2 htm 查看网页运行效果 4 建立超链接 1 新建一个空白网页 在网页中添加三个超链接 分别链接到前面制作 的网页 1 htm 和 2 htm 上 保存文件 查看网页运行效果 进行链接测 试 2 在网页中建立其它网站的超链接 分别链接到 上海商学守 主 页 http www sbs edu cn 新浪网 主页 http www sina com cn 查看网页运行效果 进行链接测试 5 制作一个简单的个人主页 根据前面的练习 制作个人主页 要求 有个人简介 图片 超链接等内 容 作到页面美观 内容充实 五 实训要求 1 独立完成实训内容 2 保存制作的网页 3 记录实训过程存在的问题 书写实训报告 六 思考题 1 网页的基本结构包括哪些部分 各部分的功能是什么 2 网页设计中有哪些常用的图片类型 如何设置属性 3 网页设计中如何设置超链接 实训四实训四 网页设计基础网页设计基础 CSS 基本语法基本语法 实训前的准备 1 检查是否连接了 Internet 2 检查操作系统是否 Windows XP 3 在除 C 盘上 可以在 D 盘 E 盘 或其他逻辑盘 创建一个新文件夹 名字为 student 4 检查系统是否有 Word 2003 Dreamweaver FrontPage 记事本等软件 一 实训目的一 实训目的 1 了解 XHTML 2 掌握在网页中引用 CSS 的方法 3 掌握 CSS 的基本语法规则 4 掌握 CSS 的常用选择器 5 掌握使用 Dreamweaver 定义 CSS 的方法 二 实训环境二 实训环境 Windows XP 2000 2003 操作系统 MyEclipse 6 5 三 三 实训内容 1 CSS 的引入和基本选择器应用 2 利用 CSS 对网页进行控制 3 利用 W3school 网站进行 CSS 的练习 四 实训步骤 1 CSS 的引入和基本选择器应用 1 内嵌样式表 将定义的样式以 text css 样式定义形式插入到文档的 Head 区 此种 方法样式将影响当前整个页面 建立网页 Css1 htm 代码如下 H1 color red Font family 华文行揩 宋体 Body color black Font size 9pt fnt color blue Font family 隶书 Font size 14pt 这是标题一 这是正文 这是使用 Fnt 类后的效果 2 行内样式 将定义的样式以标记的属性形式插入 如 此种方法样式只影响当前标记所影响的区域 建立网页 Css2 htm 代码如下 H1 color red Font family 华文行揩 宋体 Body color black Font size 9pt fnt color blue Font family 隶书 Font size 14pt 这是标题一 这是正文 这是使用 Fnt 类后的效果 30 这是中效果只使用于此段 3 外部样式表 将所有样式的信息存放在一个单独的文件中 扩展名为 Css 然后用把 它链接到每个 HTML 页面中 如果你希望样式能够影响你站点上的所有文件 这是很好的办法 链接格式 2 利用 CSS 对网页进行控制 1 创建如图 4 1 所示页面 css3 htm 图图 4 14 1 未使用未使用 CSSCSS 样式前的网页样式前的网页 2 建立样式文件 style css 格式化上面页面如图 4 2 所示 实训五 六实训五 六 VBScript 综合实训综合实训 实训前的准备 1 检查是否连接了 Internet 2 检查操作系统是否 Windows 98 2000 或 Windows XP 3 在除 C 盘上 可以在 D 盘 E 盘 或其他逻辑盘 创建一个新文件夹 名字为 student 4 检查系统是否有 Word 2000 Dreamweaver FrontPage 记事本等软件 一 实训目的 1 了解 VBScript 的运行环境 2 熟悉 VBScript 的编辑工具 3 熟悉 VBScript 在 HTML 中的应用 4 了解 VBScript 的数据类型 和常用函数的基本应用 5 熟悉 VBScript 的过程 条件语句 循环语句的基本应用 二 实训内容及操作步骤 操作一 VBScript 中 if then else 语句应用实训 1 打开记事本或者 Dreamweaver 软件 2 输入以下内容 If Then Else 的应用 Sub GreetingMessage If Hour Now 8 Then MsgBox 您早 ElseIf Hour Now 12 Then MsgBox 早上好 ElseIf Hour Now 14 Then MsgBox 午安 ElseIf Hour Now 17 Then MsgBox 下午好 ElseIf Hour Now 22 Then MsgBox 晚上好 Else MsgBox 晚安 End If end sub GreetingMessage 3 将文件保存在 D student if txt 编辑修改用 4 将文件保存在 D student if asp 运行用 5 运行 if asp 文件后即可得到结果 操作二 VBScript 中 Select Case 应用实训 1 打开记事本或者 Dreamweaver 软件 2 输入以下内容 Select Case 的应用 dim op x y z op x 21 y 32 SelectCase op 调用 SelectCase 过程 sub SelectCase Name Select Case Name Case z x y msgbox 值为 全 不安全 不好说 3 将文件保存在 D student counter txt 4 将文件保存在 D student counter asp 5 在地址栏中输入 http localhost student counter asp 即可运行 操作四 Content Linking 组件应用实训 1 打开记事本 2 输入以下内容 page0 asp 前 言 page1 asp 第 1 章 page2 asp 第 2 章 page3 asp 第 3 章 page4 asp 第 4 章 page5 asp 第 5 章 page6 asp 第 6 章 3 将文件保存在 D student link txt 4 打开记事本或者 Dreamweaver 软件 5 输入以下内容 content linking 组件的简单应用 电子图书导航 a href 6 将文件保存在 D student clinking asp 7 在地址栏中输入 http localhost student clinking asp 即可运行 操作五 FileSystem 组件应用实训 1 打开记事本 2 输入以下内容 张三 教师 XX 大学 李四 教师 XX 职业技术学院 3 将文件保存在 C Inetpub wwwroot user txt 4 输入以下内容 FileSystem 组件的简单应用 创建一个 FileSystmObject 对象的实例 filepath server mappath user txt Set fso CreateObject Scripting FileSystemObject 打开文件 Set file fso OpenTextFile filepath 1 False do until file AtEndOfStream Response write 姓名 名 职业 工作单位 3 将文件保存在 C Inetpub wwwroot fso html 4 输入以下内容 FileSystem 组件的简单应用 6 将文件保存在 C Inetpub wwwroot fso asp 7 在地址栏中输入 http localhost fso htm 运行后 8 然后输入如图内容 点击 提交 按钮 则查看 user txt 文件 小结 本节主要讲述了 ASP 的一些比较实用的组件如 Ad Rotator 组件 FileSystem 组件 Content Linking 组件 Counter 组件 Browser Capbilities 组件 Jmail 组 件的基本应用 在使用组件之前 首先需要创建一个它的实例 通常我们采用 ASP 提供的 Server CreateObject 方法 然后可以在 ASP 文件中随意的应用 内置对象的属性 方法 集合 通过以上的实训可以使学生了解 ASP 的内置组件的基本应用 让学生能够对 ASP 的内置组件有一个深入的了解 能够有针对性的编写一些程序 思考题 1 采用 Ad Rotator 组件制作和管理广告 编写一个轮显广告条 2 采用 FileSystem 组件 编写一个 ASP 页面 获取计算机的所有驱动器和驱动 器的信息 3 采用 Browser Capbilities 组件 编写一个 ASP 页面 获取浏览器 是否支持 cookies 和 jScript javaApplets 的信息 4 采用 Jmail 组件 编写一个 ASP 程序 实现邮件群发的功能 总结 通过实训 总结自己掌握程度 分析出错原因 提出改进措施 实训十实训十 电子商务网站建设实例电子商务网站建设实例 图书管理系统实训图书管理系统实训 本实训主要介绍如何实现简单的查询管理系统的基本功能 实训前的准备 1 检查操作系统是否 Windows 98 2000 或 Windows XP 2 检查在 Windows 98 系统上是否安装 PWS 在 Windows 2000 系统上是否安装 IIS5 0 3 打开浏览器在地址栏里面输入 127 0 0 1 测试服务器主页面是否正常运行 4 检查系统是否有 Access 2000 Dreamweaver FrontPage 记事本等软件 一 实训目的要求 1 熟悉 ASP 的编程和运行环境 2 了解一般管理系统所支持的功能 3 掌握查询功能的实现方法 4 掌握添加 删除 修改功能的实现方法 二 系统功能与要求 作为一个功能非常简单的图书管理系统 主要能够实现对已有书目的查询以及 添加 删除 修改等功能 在查询功能当中最好能够同时提供多种查询方式 满足各类用户查询的需要 同时为了考虑到系统的安全性问题 设置专门的访 问权限 在登录时还要验证用户身份的合法性 这个系统的设计思路同样可以 应用于学生学籍管理系统 成绩查询系统和通讯录等 为了帮助大家掌握简单 的管理系统的实现方法 能够举一反三处理类似相关的问题 1 本实训所要实现的功能 1 系统用户注册 2 系统用户进入系统时验证用户身份 3 未经注册的用户进入系统时显示登录失败提示 4 系统提供按照不同方式查询功能 5 系统用户可以添加 删除 修改数据 2 数据库的逻辑设计 本实训用的是 Access 数据库 要求在目录 D Inetpub wwwroot wjh 下建一个名 称为 users mdb 和 bookitem 数据库 本实训需要建立 ODBC 数据源 一个数据 库用来存放用户注册的信息 另一个数据库用来存放图书书目信息 所以两个 数据源名称为 qhusers 和 qhbook 其中连接 qhbook 的代码放在 public asp 文件 中 3 数据表结构 1 用户注册表 users 2 书目登记表 bookitem 实训内容及操作步骤 操作一 设计用户登录的页面 1 打开 Dreamweaver Mx 或 Frontpage