Talk about demand: This function is similar to the mail function, when the user submits some suggestions and comments on the site, the background will be deposited into the Oracle database. The administrator then logs on to the site and sees comments and suggestions that have not been read and read, and can mark unread comments and suggestions as read.
Below, this is the administrator's viewing interface:
Click Read to switch to this interface:
The code is now posted below.
First we need a tab switch tab, the CSS code is as follows:
. TabPanel ul{height:30px;border-bottom:1px solid #aaa;}. TabPanel ul li{float:left;margin:0 2px 0 0;border:1px solid #aaa; Font-size:14px;height:29px;line-height:30px;width:111px;text-align:center;cursor: pointer;text-shadow:0 1px 0 #fff; border-radius:4px 4px 0 0;box-shadow:inset 0 1px 0 rgba (255, 255, 255, 0.5); background: #ddd; background:-moz-lin Ear-gradient (Top, #eee, #ddd), background:-webkit-gradient (linear, left top, left bottom, from (#eee), to (#ddd));}. TabPanel. hit{border-bottom:1px solid #fff; cursor:pointer;color:black;text-shadow:0 1px 0 #fff; background: #fff; background:-webkit-gradient (linear, left top, left bottom, from (#e1e1e1), to (#fff)); Background:-moz-linear-gradient (Top, #e1e1e1, #fff);}. pane{border:1px solid #aaa; Border-top:0;min-height:100px;background-color: #fff;d isplay:none;}. Pane p{padding:15px 15px 0 10px;}. Pane h4{padding:15px 15px 0 10px;font-size:18px;font-weight:bold;}
Also need a small section of JS to control the Tab tab, give it hit the class and remove hits the class has completed the click Transition Effect:
<script type= "Text/javascript" >$ (function () {$ ('. TabPanel ul li '). Click (function () {$ (this). addclass (' hit '). Siblings (). Removeclass (' hit '), $ ('. Panes>div:eq (' +$ (This). Index () + ') '). Show (). siblings (). Hide ();})}) </script>
This part is found on the Internet, you can also write a suitable for yourself.
The HTML template code for the tab is as follows:
<div class= "TabPanel" ><ul><li class= "hit" >Tab1</li><li>Tab2</li><li> Tab3</li></ul><div class= "panes" ><div class= "Pane" style= "Display:block;" >
The front-end section is almost complete!Then write backstage.
First, let's look at the table structure of the database:
Then write the action code based on this table field. In this case, we have two main operations, one is to query out all the data in the table and then put it in two tab options, and the second is to mark the information you have seen as read. Here I write only an action class, using the Flag field to determine which operation to take. The first action occurs when Flag=1, and a second operation when Flag=3.
So my action class code is as follows:
Package Com.cn.useraction;import Java.sql.connection;import Java.sql.drivermanager;import Java.sql.preparedstatement;import Java.sql.resultset;import Java.sql.sqlexception;import java.util.ArrayList; Import Java.util.list;import Java.util.map;//import Javax.servlet.http.httpservletrequest;import Org.apache.commons.logging.log;import Org.apache.commons.logging.logfactory;import Com.opensymphony.xwork2.actioncontext;import Com.opensymphony.xwork2.actionsupport;import Com.cn.beans.UserBean; Import com.cn.util.DBConnection; @SuppressWarnings ({"Serial", "unused"}) public class Admincommentaction extends Actionsupport {private static log log = Logfactory.getlog (admincommentaction.class);p rivate list<userbean> Userlist;private string Commentid;private string flag;static int i = 0;public string Getcommentid () {return commentid;} public void Setcommentid (String commentid) {this.commentid = Commentid;} Public String Getflag () {return flag;} public void Setflag (String flag) {This.flag = flag;} PuBlic list<userbean> getuserlist () {return userlist;} public void Setuserlist (list<userbean> userlist) {this.userlist = userlist;} /** * View User comments and Suggestions * * @return list<userbean> List */private list<userbean> admincomment () {log.info ("get admin Comment info ... "); list<userbean> list = new arraylist<userbean> (); UserBean user; String Sql=null; Connection conn = Dbconnection.getconn (); sql = "SELECT * from Ts_comment ORDER by create_date Desc"; PreparedStatement pstmt;try {pstmt = conn.preparestatement (sql); ResultSet rs = Pstmt.executequery (); while (Rs.next ()) {user = new UserBean (); User.setusername (rs.getstring ("username") ), User.setcontact (rs.getstring ("Contact")), User.setcomment (rs.getstring ("commented")), User.setcommentid ( Rs.getstring ("comment_id")), User.setadminflag (rs.getstring ("Admin_flag")), User.setdate (rs.getstring ("Create_ Date ")); List.add (user);}} catch (SQLException e) {e.printstacktrace ();} return list;} /** * Administrator Tag Read * * @return i */private static int aDminflagupdate (String commentid) {Connection conn = Dbconnection.getconn (); String sql=null;sql = "Update ts_comment set admin_flag=1 where comment_id= '" +commentid+ ""; PreparedStatement pstmt;try {pstmt = conn.preparestatement (sql); i = Pstmt.executeupdate (); System.out.println ("Update resutl:" + i);p stmt.close (); Conn.close ();} catch (SQLException e) {e.printstacktrace ();} return i;} Public String admin_comment () throws Exception {log.info ("admin_comment.action ..."), if (Flag.equals ("3")) {//tag read System.out.println (Commentid), Adminflagupdate (Commentid), if (i==0) {return "error";} else {return "Success_read";}} else {userlist = Admincomment (), if (userlist.size () > 0) {return "success";} else {return "error";}}}
Userbean I will not post, just a few get and set.
The foreground code that triggers this action is as follows (that is, jumping from one interface to the interface):
<input style= "cursor:pointer;border-radius:4px 4px 4px 4px;padding:5px;width:100%;margin:2px 0;" type= "button" onclick= "window.location.href= ' admin_comment.action?flag=0 '" value= "View User opinion suggestions" >
In addition, here is a small trick, that is, I clicked "marked as read", the direct page refresh, display the results of the operation, and not jump to other interfaces. This will use one of the struts2 's actions to jump to the function of another action, that is, after the action of the second action is completed, jump to the action of the first action. In this, Struts.xml should be configured like this:
<action name= "admin_comment" class= "com.cn.useraction.AdminCommentAction" method= "Admin_comment" ><result Name= "Success" >/admin_comment.jsp</result><result name= "Success_read" type= "Redirectaction" >/ Admin_comment.action?flag=1</result><result name= "Error" >/error.jsp</result></action>
End of background. Finally, the front end is displayed. I am from the background to the unread data and read data (in the database Admin_flag equals 0 and 1) are queried, in the front-end need to classify display, this time used to struts2 <s:if> tags, that is, admin_flag=0 data into the unread, Data equal to 1 is placed in the read. Finally, add some CSS effects to form the above look. This part of the front-end code is as follows (replace the template Code of the Tab tab above):<div class= "TabPanel" style= "width:900px;margin:30px auto;" ><ul style= "List-style:none;" ><li class= "hit" > Unread </li><li> Read </li></ul><div class= "panes" ><div class= " Pane "style=" Display:block; " >
So the whole from front to back from the back to the front of a process is completed, the effect is good!Struts2+oracle enable administrators to view user-submitted comment features