课程设计报告
题 目 人机交互
web界面课程设计
课 程 名 称 人机交互基础教程 院 部 名 称 软件工程 专 业 软件工程 班 级 学 生 姓 名 学 号 课程设计地点 课程设计学时 32课时 指 导 教 师
金陵科技学院教务处制
目录
一 实验目的和要求 ......................................................................................................................... 3 二 预备知识 ..................................................................................................................................... 3
1 图形用户界面的三个重要思想； ....................................................................................... 3 2 图形用户界面设计的一般原则； ....................................................................................... 3 3 人机交互界面表示模型与实现； ....................................................................................... 3 4 人机交互界面可用性评估方法； ....................................................................................... 4 三 实验内容与步骤： ..................................................................................................................... 4
1 实验内容 ............................................................................................................................... 4 2 web界面表示模型与实现，代码放在附录中 .................................................................... 5 3 Web界面截图 ....................................................................................................................... 5 4 可用性分析与评估 ............................................................................................................. 11 附录：............................................................................................................................................. 11
一 实验目的和要求
1 熟悉人机交互界面的设计原则； 2 熟悉人机交互界面的模型和实现； 3 熟悉人机交互界面的可用性评估；
二 预备知识
1 图形用户界面的三个重要思想；
(1)桌面隐喻(desktop metaphor)
指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。 隐喻的表现方法:静态图标、动画、视频 (2)所见即所得(What You See Is What You Get，WYSIWYG) 显示的用户交互行为与应用程序最终产生的结果是一致的。 (3)直接操纵(direct manipulation)
直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。直接操纵的对象是命令、数据或是对数据的某种操作。
2 图形用户界面设计的一般原则；
(1)界面要具有一致性 (2)常用操作要有快捷方式 (3)提供必要的错误处理功能 (4)提供信息反馈 (5)允许操作可逆
(6)设计良好的联机帮助
(7)合理划分并高效的使用显示屏幕
3 人机交互界面表示模型与实现；
(1)行为模型：主要从用户和任务的角度考虑如何描述人机交互界面
(2)结构模型：主要从系统的角度来表示人机交互界面 (3)模型转换 (4)表现模型
4 人机交互界面可用性评估方法；
(1)用户模型法 (2)启发式评估 (3)认知性遍历 (4)用户测试 (5)用户调查 (6)放声思考法
三 实验内容与步骤：
1 实验内容
利用NetBeansIDE完成一个登录注册界面的设计。 用户登录、注册功能： 登录项： 用户名、密码；
1）根据用户的选择进入用户界面或注册界面；
2）注册后需要与后台数据库对接，查询注册中的用户名是否重复，如果重复则提示用户重新注册，否则提示用户注册成功并跳转到登录界面；
3）登录后需要与后台数据库对接，查询用户名和密码是否正确，如果正确则提示成功，否则让用户重新登录；
2 web界面表示模型与实现，代码放在附录中
结合GOMS和LOTOS对任务“登录注册功能”的描述
3 Web界面截图
1)首页
2）登录界面
登录成功界面
登录成功后进入系统界面
登录失败界面
3）注册界面
注册名已被注册过，注册失败界面
注册成功界面
注册成功后直接跳转到登录界面
4 可用性分析与评估
1）有效性：该系统达到了实验目标，实现了用户登录和注册功能；
2）效率：该系统能够快速地将用户信息导入数据库，界面转换反应快；
3）吸引力：界面简洁大方，能够带给用户好心情，功能实现反应快；
4）容错能力：暂时还没有针对容错能力采取方法和措施，有待改善；
5）易于学习：实验的要求包括用户登录和注册功能，目前自然还不存在用户不会使用的难以理解的问题。操作方便。
附录：
Index.jsp:
首页
首页
登录
注册
Login.jsp:
用户登录
登录
Register.jsp:
用户注册
注册
LoginServlet.java:
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package cn.edu.djtu;
import java.io.IOException;
import java.io.PrintWriter;
import static java.lang.System.out;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import javax.swing.JOptionPane;
/**
*
* @author Administrator
*/
@WebServlet(name = "LoginServlet", urlPatterns = {"/LoginServlet"})
public class LoginServlet extends HttpServlet {
/**
* Processes requests for both HTTP GET and POST * methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
String name=request.getParameter("name");
String pwd=request.getParameter("pwd");
Connection conn=null;
PreparedStatement prst=null;
ResultSet rs=null;
String url="jdbc:derby://localhost:1527/sample";
String driver="org.apache.derby.jdbc.ClientDriver";
String user="app";
String password="app";
try (PrintWriter out = response.getWriter()) {
Class.forName(driver);
conn=DriverManager.getConnection(url, user, password);
String sql1="select * from users where name=? ";
String sql2="select * from users where name=? and pwd=?";
prst=conn.prepareStatement(sql1);
prst.setString(1,name);
rs=prst.executeQuery();
if(rs.next()){
prst=conn.prepareStatement(sql2);
prst.setString(1,name);
prst.setString(2,pwd);
rs=prst.executeQuery();
if(rs.next()){
HttpSession session=request.getSession();
session.setAttribute("name",name);
request.getRequestDispatcher("page.jsp").forward(request, response);
}else{
JOptionPane.showMessageDialog(null, "登录失败，密码错误！"); request.getRequestDispatcher("login.jsp").forward(request, response); }
}else{
JOptionPane.showMessageDialog(null, "登录失败，该用户不存在！"); request.getRequestDispatcher("login.jsp").forward(request, response); }
} catch (ClassNotFoundException ex) {
Logger.getLogger(LoginServlet.class.getName()).log(Level.SEVERE, null, ex); } catch (SQLException ex) {
Logger.getLogger(LoginServlet.class.getName()).log(Level.SEVERE, null, ex); }finally{
if(rs!=null){
try {
rs.close();
} catch (SQLException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
if(prst!=null){
try {
prst.close();
} catch (SQLException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
if(conn!=null){
try {
conn.close();
} catch (SQLException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
out.close();
}
}
//
/**
* Handles the HTTP GET method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
/**
* Handles the HTTP POST method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}//
}
InterUserServlet.java:
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package cn.edu.djtu;
import java.io.IOException;
import java.io.PrintWriter;
import static java.lang.System.out;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.swing.JOptionPane;
/**
*
* @author Administrator
*/
@WebServlet(name = "InterUserServlet", urlPatterns = {"/InterUserServlet"})
public class InterUserServlet extends HttpServlet {
/**
* Processes requests for both HTTP GET and POST * methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
String name=request.getParameter("name");
String pwd=request.getParameter("pwd");
Connection conn=null;
PreparedStatement prst=null;
ResultSet rs=null;
String url="jdbc:derby://localhost:1527/sample";
String driver="org.apache.derby.jdbc.ClientDriver";
String user="app";
String password="app";
try (PrintWriter out = response.getWriter()) {
Class.forName(driver);
conn=DriverManager.getConnection(url, user, password);
String sql1="select * from users where name=?";
String sql2="insert into users values(?,?)";
prst=conn.prepareStatement(sql1);
prst.setString(1,name);
rs=prst.executeQuery();
if(rs.next()){
JOptionPane.showMessageDialog(null, "该用户名已被注册,请重新输入"); response.sendRedirect("register.jsp");
}else{
prst=conn.prepareStatement(sql2);
prst.setString(1,name);
prst.setString(2,pwd);
prst.executeUpdate();
JOptionPane.showMessageDialog(null, "注册成功");
response.sendRedirect("login.jsp");
}
} catch (SQLException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex); } catch (ClassNotFoundException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex); }finally{
if(rs!=null){
try {
rs.close();
} catch (SQLException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
if(prst!=null){
try {
prst.close();
} catch (SQLException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
if(conn!=null){
try {
conn.close();
} catch (SQLException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
out.close();
}
}
//
/**
* Handles the HTTP GET method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
/**
* Handles the HTTP POST method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}//
}
课程设计报告
题 目 人机交互
web界面课程设计
课 程 名 称 人机交互基础教程 院 部 名 称 软件工程 专 业 软件工程 班 级 学 生 姓 名 学 号 课程设计地点 课程设计学时 32课时 指 导 教 师
金陵科技学院教务处制
目录
一 实验目的和要求 ......................................................................................................................... 3 二 预备知识 ..................................................................................................................................... 3
1 图形用户界面的三个重要思想； ....................................................................................... 3 2 图形用户界面设计的一般原则； ....................................................................................... 3 3 人机交互界面表示模型与实现； ....................................................................................... 3 4 人机交互界面可用性评估方法； ....................................................................................... 4 三 实验内容与步骤： ..................................................................................................................... 4
1 实验内容 ............................................................................................................................... 4 2 web界面表示模型与实现，代码放在附录中 .................................................................... 5 3 Web界面截图 ....................................................................................................................... 5 4 可用性分析与评估 ............................................................................................................. 11 附录：............................................................................................................................................. 11
一 实验目的和要求
1 熟悉人机交互界面的设计原则； 2 熟悉人机交互界面的模型和实现； 3 熟悉人机交互界面的可用性评估；
二 预备知识
1 图形用户界面的三个重要思想；
(1)桌面隐喻(desktop metaphor)
指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。 隐喻的表现方法:静态图标、动画、视频 (2)所见即所得(What You See Is What You Get，WYSIWYG) 显示的用户交互行为与应用程序最终产生的结果是一致的。 (3)直接操纵(direct manipulation)
直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。直接操纵的对象是命令、数据或是对数据的某种操作。
2 图形用户界面设计的一般原则；
(1)界面要具有一致性 (2)常用操作要有快捷方式 (3)提供必要的错误处理功能 (4)提供信息反馈 (5)允许操作可逆
(6)设计良好的联机帮助
(7)合理划分并高效的使用显示屏幕
3 人机交互界面表示模型与实现；
(1)行为模型：主要从用户和任务的角度考虑如何描述人机交互界面
(2)结构模型：主要从系统的角度来表示人机交互界面 (3)模型转换 (4)表现模型
4 人机交互界面可用性评估方法；
(1)用户模型法 (2)启发式评估 (3)认知性遍历 (4)用户测试 (5)用户调查 (6)放声思考法
三 实验内容与步骤：
1 实验内容
利用NetBeansIDE完成一个登录注册界面的设计。 用户登录、注册功能： 登录项： 用户名、密码；
1）根据用户的选择进入用户界面或注册界面；
2）注册后需要与后台数据库对接，查询注册中的用户名是否重复，如果重复则提示用户重新注册，否则提示用户注册成功并跳转到登录界面；
3）登录后需要与后台数据库对接，查询用户名和密码是否正确，如果正确则提示成功，否则让用户重新登录；
2 web界面表示模型与实现，代码放在附录中
结合GOMS和LOTOS对任务“登录注册功能”的描述
3 Web界面截图
1)首页
2）登录界面
登录成功界面
登录成功后进入系统界面
登录失败界面
3）注册界面
注册名已被注册过，注册失败界面
注册成功界面
注册成功后直接跳转到登录界面
4 可用性分析与评估
1）有效性：该系统达到了实验目标，实现了用户登录和注册功能；
2）效率：该系统能够快速地将用户信息导入数据库，界面转换反应快；
3）吸引力：界面简洁大方，能够带给用户好心情，功能实现反应快；
4）容错能力：暂时还没有针对容错能力采取方法和措施，有待改善；
5）易于学习：实验的要求包括用户登录和注册功能，目前自然还不存在用户不会使用的难以理解的问题。操作方便。
附录：
Index.jsp:
首页
首页
登录
注册
Login.jsp:
用户登录
登录
Register.jsp:
用户注册
注册
LoginServlet.java:
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package cn.edu.djtu;
import java.io.IOException;
import java.io.PrintWriter;
import static java.lang.System.out;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import javax.swing.JOptionPane;
/**
*
* @author Administrator
*/
@WebServlet(name = "LoginServlet", urlPatterns = {"/LoginServlet"})
public class LoginServlet extends HttpServlet {
/**
* Processes requests for both HTTP GET and POST * methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
String name=request.getParameter("name");
String pwd=request.getParameter("pwd");
Connection conn=null;
PreparedStatement prst=null;
ResultSet rs=null;
String url="jdbc:derby://localhost:1527/sample";
String driver="org.apache.derby.jdbc.ClientDriver";
String user="app";
String password="app";
try (PrintWriter out = response.getWriter()) {
Class.forName(driver);
conn=DriverManager.getConnection(url, user, password);
String sql1="select * from users where name=? ";
String sql2="select * from users where name=? and pwd=?";
prst=conn.prepareStatement(sql1);
prst.setString(1,name);
rs=prst.executeQuery();
if(rs.next()){
prst=conn.prepareStatement(sql2);
prst.setString(1,name);
prst.setString(2,pwd);
rs=prst.executeQuery();
if(rs.next()){
HttpSession session=request.getSession();
session.setAttribute("name",name);
request.getRequestDispatcher("page.jsp").forward(request, response);
}else{
JOptionPane.showMessageDialog(null, "登录失败，密码错误！"); request.getRequestDispatcher("login.jsp").forward(request, response); }
}else{
JOptionPane.showMessageDialog(null, "登录失败，该用户不存在！"); request.getRequestDispatcher("login.jsp").forward(request, response); }
} catch (ClassNotFoundException ex) {
Logger.getLogger(LoginServlet.class.getName()).log(Level.SEVERE, null, ex); } catch (SQLException ex) {
Logger.getLogger(LoginServlet.class.getName()).log(Level.SEVERE, null, ex); }finally{
if(rs!=null){
try {
rs.close();
} catch (SQLException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
if(prst!=null){
try {
prst.close();
} catch (SQLException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
if(conn!=null){
try {
conn.close();
} catch (SQLException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
out.close();
}
}
//
/**
* Handles the HTTP GET method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
/**
* Handles the HTTP POST method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}//
}
InterUserServlet.java:
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package cn.edu.djtu;
import java.io.IOException;
import java.io.PrintWriter;
import static java.lang.System.out;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.swing.JOptionPane;
/**
*
* @author Administrator
*/
@WebServlet(name = "InterUserServlet", urlPatterns = {"/InterUserServlet"})
public class InterUserServlet extends HttpServlet {
/**
* Processes requests for both HTTP GET and POST * methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
String name=request.getParameter("name");
String pwd=request.getParameter("pwd");
Connection conn=null;
PreparedStatement prst=null;
ResultSet rs=null;
String url="jdbc:derby://localhost:1527/sample";
String driver="org.apache.derby.jdbc.ClientDriver";
String user="app";
String password="app";
try (PrintWriter out = response.getWriter()) {
Class.forName(driver);
conn=DriverManager.getConnection(url, user, password);
String sql1="select * from users where name=?";
String sql2="insert into users values(?,?)";
prst=conn.prepareStatement(sql1);
prst.setString(1,name);
rs=prst.executeQuery();
if(rs.next()){
JOptionPane.showMessageDialog(null, "该用户名已被注册,请重新输入"); response.sendRedirect("register.jsp");
}else{
prst=conn.prepareStatement(sql2);
prst.setString(1,name);
prst.setString(2,pwd);
prst.executeUpdate();
JOptionPane.showMessageDialog(null, "注册成功");
response.sendRedirect("login.jsp");
}
} catch (SQLException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex); } catch (ClassNotFoundException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex); }finally{
if(rs!=null){
try {
rs.close();
} catch (SQLException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
if(prst!=null){
try {
prst.close();
} catch (SQLException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
if(conn!=null){
try {
conn.close();
} catch (SQLException ex) {
Logger.getLogger(InterUserServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
out.close();
}
}
//
/**
* Handles the HTTP GET method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
/**
* Handles the HTTP POST method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}//
}