Project creation
1.File-new-Dynamic Web Project
Create a dynamic JAVAWeb project
2. Write the project name and select the Tomcat and version to use
then next
3. This page is the storage directory of java files. By default, src is selected, and then continue to next.
4. The first box is to say the JSP file or Html file storage directory, select the default, and then check the xml file, a web.xml file will be generated, which is used to write the configuration information of the servlet.
Such a dynamic JAVAWeb project is created.
---------------------------------------------------------------------------------------------------------------------------
The following is the project directory of the project
The project is very long and can actually be compressed, but because I didn't understand it before, it basically referred to the code of the great god, so it was separated.
------------------------------------------------------------------------------------------------------------------
Let's talk about AddMessage.jsp first
Student information entry page
paste complete code
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/daohanglan1.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Student Entry</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<style>
label:before{
content:"*";
color:red;
}
label {
cursor: pointer;
display: inline-block;
padding: 3px 6px;
text-align: left;
width: 120px;
vertical-align: top;
}
#btn {
text-align:center;
}
.btn {
width: 70px;
padding:8px;
background-color: white;
border-color: black;
color: black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
text-align: center;
vertical-align: middle;
border: 1px solid black;
font-weight: 900;
font-size:13px;
}
#fieldset1{
height:500px;
}
#div1 {
height:50%;
width:100%;
}
#div2 {
margin-left:30%;
float:left;
height:50%;
width:40%;
}
.error{
color:red;
}
</style>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function(form) {
form.submit();
}
});
$().ready(function(){
$("#form1").validate({
rules:{
name:"required",
id: {
digits:true,
required:true,
maxlength:4,
minlength:4,
},
institute:"required",
professional:"required",
},
message:{
name:"Please enter a name",
id:{
digits:"Please enter 4 digits",
required:"Please enter 4 student numbers",
maxlength: "Please enter 4-digit student number",
minlength:"Please enter 4-digit student number",
},
institute:"Please enter the institute",
professional:"Please enter a professional",
}
})
});
</script>
</head>
<body>
<div >
<ul class="nav">
<li><a href="AddMessage.jsp">学生录入</a></li>
<li><a href="AddWorkTime.jsp">工时录入</a></li>
<li><a href="TimeManage.jsp">工时管理</a></li>
</ul>
</div>
<div id="div1">
<div id="div2">
<form action="AddMessage" method="post" id="form1">
<fieldset id="fieldset1">
<legend>Student Information</legend>
<p><label>学生姓名：</label><input type="text" name="name" ></p>
<p><label>性别：</label>
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女 </p>
<p><label>入学年份：</label><select name="year">
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select></p>
<p><label>学号：</label><input type="text" name="id" ></p>
<p><label>学院：</label><input type="text" name="institute" ></p>
<p><label>专业：</label><input type="text" name="professional" ></p>
<p><label>Poverty Level:</label>
<select name="level">
<option value="poor">贫困</option>
<option value="hard">特困</option>
</select></p>
<div id="btn">
<input type="submit" value="提交" class="btn"/>
</div>
</fieldset>
</form>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------
<link rel="stylesheet" type="text/css" href="css/daohanglan1.css"/>
This is the css style linked to daohanglan1.css in the css folder
The content is the style of the navigation bar and it feels good
@charset "UTF-8";
.are not{
border-top:5px solid #000000;/*Define the top border*/
border-bottom:1px solid #000000;/*Define the bottom border*/
padding:.45em .5em;/*Padding, 0.45 character height up and down, 0.5 character height left and right, relative to the font-size of the parent element*/
}
.nav a{
color:#000000;
text-decoration:none;/*The default hyperlink item is underlined, remove the underline here*/
}
.nav a:hover, .nav a:focus{/*Set the action when the mouse is on the navigation element or gets the focus (tab key)*/
background:#D3D3D3;
border-top:2px solid #D3D3D3;
border-right:10px solid #D3D3D3;
border-bottom:2px solid #D3D3D3;
border-left:10px solid #D3D3D3;
border-radius:5px;/*Set border rounded corners*/
}
.nav li {
display:inline-block;/*Inline block elements, you can set the width and height without wrapping lines*/
padding:0em 1.15em 0em 1.15em;
border-left:1px solid #000000;
}
.nav li:first-child{/*Set the style of the first child element definition*/
border-left:none;
}
The other css is the css of the table, which is also posted here. It will be used when the information is entered into the table and displayed later.
@charset "UTF-8";
input {
margin-left:20px;
}
th{
text-align: center;
width:100px;
}
td{
text-align: center;
width:100px;
}
-----------------------------------------------------------
Some jQuery plugins are used in the page because it looks comfortable
The plugin is jQuery Validate, reference link http://www.runoob.com/jquery/jquery-plugin-validate.html
To be honest, I really like the rookie tutorial
1. Directly import the js library
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
2. Write verification information
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function(form) {
form.submit(); //Submit the form information if the verification is correct
}
});
$().ready(function(){
$("#form1").validate({ //form1 is the form that formulates the rules, corresponding to the id of the form below
rules:{ //rules are rules, that is, each name in form1 corresponds to some input rules one-to-one in it, which is equivalent to verification
name:"required", //name is a required field
id: {
digits:true,//id is a digital integer
required:true,//id is a required field
maxlength:4,//maximum length 4
minlength: 4,//The minimum length is 4, so it is set that the student number must be 4 digits
},
institute:"required",
professional:"required",
},
message:{ //message is the message that pops up if there is an error
name:"Please enter a name",
id:{
digits: "Please enter 4 digits",//If the information filled in by id is not a number or an integer, the information will pop up
required:"Please enter 4 student numbers",
maxlength: "Please enter 4-digit student number",
minlength:"Please enter 4-digit student number",
},
institute:"Please enter the institute",
professional:"Please enter a professional",
}
})
});
</script>
3. The HTML of the form, the id must be form1 to correspond to javascript
<form action="AddMessage" method="post" id="form1"> <fieldset id="fieldset1"> <legend>Student Information</legend> <p><label>学生姓名：</label><input type="text" name="name" ></p> <p><label>性别：</label> <input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女 </p> <p><label>入学年份：</label><select name="year"> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> </select></p> <p><label>学号：</label><input type="text" name="id" ></p> <p><label>学院：</label><input type="text" name="institute" ></p> <p><label>专业：</label><input type="text" name="professional" ></p> <p><label>Poverty Level:</label> <select name="level"> <option value="poor">贫困</option> <option value="hard">特困</option> </select></p> <div id="btn"> <input type="submit" value="提交" class="btn"/> </div> </fieldset> </form>
Then because the form is to be submitted, there must be a button, and the type is submit, in order to submit the information
Each column must have a name, because the database records the information according to the name
-------------------------------------------------------------
In the same way, the input of working hours information is the same
AddWorkTime.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/daohanglan1.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Working hours entry</title>
<style>
label:before{
content:"*";
color:red;
}
label {
cursor: pointer;
display: inline-block;
padding: 3px 6px;
text-align: left;
width: 150px;
vertical-align: top;
}
#btn {
text-align:center;
}
.btn {
width: 70px;
padding:8px;
background-color: white;
border-color: black;
color: black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
text-align: center;
vertical-align: middle;
border: 1px solid black;
font-weight: 900;
font-size:13px;
}
#fieldset2{
height:400px;
}
#div3 {
margin-left:30%;
float:left;
height:50%;
width:40%;
}
.error{
color:red;
font-size:14px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler:function(){
form.submit();
}
});
$().ready(function() {
$("#worktime").validate({
rules:{
id:{
required:true,
maxlength:4,
minlength:4,
digits:true
},
activity:"required",
worktime:"required",
workdate:"required",
},
messages:{
id: "Please enter the correct four-digit student number"
}
});
});
</script>
</head>
<body>
<div >
<ul class="nav">
<li><a href="AddMessage.jsp">学生录入</a></li>
<li><a href="AddWorkTime.jsp">工时录入</a></li>
<li><a href="TimeManage.jsp">工时管理</a></li>
</ul>
</div>
<div id="div3">
<form id="worktime" action="AddWorkTime" method="post" >
<fieldset id="fieldset2">
<legend>Hour Information</legend>
<p><label>学生学号(4位)：</label><input type="text" name="id" class="textBox" align="left" /></p>
<p><label>活动名称：</label><input type="text" name="activity" class="textBox" align="left"/></p>
<p><label>工时数：</label><input type="text" name="worktime" class="textBox" align="left"/></p>
<p><label>日期：</label><input type="date" name="workdate" class="textBox" align="left"/></p>
<div id="btn">
<input type="submit" value="提交" class="btn">
</div>
</fieldset>
</form>
</div>
</body>
</html>