This is a week's cooking chicken homework, which is provided for everyone to share and learn. It is a passenger theme dynamic website based on ASP and VBScript. It has the functions of login registration and online message. It is connected to the local database. It needs to configure the IIS environment, then put the folder in the IIS folder and enter it in the browser http://localhost/ File name.asp , you can open it.
Network disk link: https://pan.baidu.com/s/19f5T6h-7thy_3dbiOKyhCg
Extraction code: ffbv
Development of passenger theme web page based on Ajax Technology
Abstract: This report mainly focuses on the work of Traveller passenger website. The content is divided into four parts: work introduction, work design and development, work effect display, work analysis and summary.
Key words: Ajax technology ASP program jQuery framework Access database VBScript
Traveller tourist website, a tourist website that provides tourists with a platform for scenic spot recommendation, exchange and sharing, is a relatively complete website developed after flexibly combining and using their existing HTML development knowledge and the new knowledge learned in the dynamic web course.
This website is divided into five pages:
. login page
Users can log in. After successful login, they can enter the home page of the website.
. registration page
Users can register. After successful registration, they can log in to the website with their new account and password.
. modify password page
The user can modify the password. After successful modification, he can log in to the website with the original account and new password.
. home page
This page provides users with recommendations and introductions of scenic spots. After clicking the scenic spot, the user can view the latest introduction of each scenic spot. If it is an administrator, the background information of the scenic spot can be updated.
Introduction to scenic spots:
. message page
This page is a page for communication and sharing among passengers. Users can view the message records of other passengers here, which makes the communication between users more convenient.
Message Board:
. interface design
The color matching theme of the website is simple and atmospheric. The font is set to gray or black, which mainly displays the information of scenic spots, improves the visual satisfaction, and makes the website more in line with the tourism theme.
The content of the web page is a rectangle with a white background. The typesetting is a relatively simple and modern form, which clearly shows the contents to users.
. structural design
. functional design
The functions of this website include: registering account, changing password, login account, scenic spot recommendation, communication and sharing, contacting us, etc. There is certain interactivity in the user's operations. If the format of account password is incorrect during registration, the web page will return an error prompt to remind the user to fill in again.
. core development
- Registration function (the codes for login and password modification are similar)
<% '-----------------------Connect to database---------------------------------
Dim conn
Set conn=Server.CreateObject("ADODB.Connection")
dp = "data\yh.mdb" 'Database location relative to this file
conn.open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(""&dp&"")
<!-- '-----------------------Create Recordset--------------------------------- -->
<!-- Set rs = conn.Execute("Select * From yh Order By ID DESC") -->
%>This function depends on a register.asp (the above header file needs to be introduced).
<!--#include file="conn.asp" -->
In register.asp, the user fills in the basic information in the form. After filling in, the user submits the form content with Ajax technology, and inserts the registration information into the yhmm table of the database through ASP program.
Fill in the form code (of course, you can change the style yourself):
<form method="post" action="?state=reg" class="a">
<table align="center" >
<tr>
<td colspan="2">
<h1 align="center" style="color:rgb(1, 178, 223)">User registration</h1>
</td>
</tr>
<tr>
<td>account number/user name</td>
<td><input type="text" name="username" autocomplete="off" id="input" placeholder="4-16 Characters"></td>
</tr>
<tr>
<td>password</td>
<td><input type="password" name="password" id="input" placeholder="6-16 Bit letter or number combination"></td>
</tr>
<tr>
<td>Enter the password again</td>
<td><input type="password" name="password_again" id="input" placeholder="Enter the password again"></td>
</tr>
<!-- <tr>
<td>Gender</td>
<td>
<select name="sex" id="selectlist">
<option value="male">male</option>
<option value="female">female</option>
</select>
</td>
</tr>
<tr>
<td>identity</td>
<td>
<select name="sex" id="selectlist">
<option value="male">male</option>
<option value="female">female</option>
</select>
</td>
</tr> -->
<tr>
<td>phone number</td>
<td><input type="text" name="phone" id="input" placeholder="phone number"></td>
</tr>
<tr>
<td>mailbox</td>
<td><input type="text" name="mail" id="input" autocomplete="off" placeholder="mailbox"></td>
</tr>
<tr>
<td></td>
<td id="small" ><u><a href="login.asp">Existing account?</a></u></td>
</tr>
<tr>
<td colspan="2">
<div align="center" style="margin: 5px;">
<input name="button" id="button" type="submit" value="register">
</div>
</td>
</tr>
</table>
</form>Implement registration:
<!---------------------------------- Registration function ----------------------------->
<%
if Request.QueryString("state")="reg" then 'if Request.ServerVariables("REQUEST_METHOD")="POST" then
if request.Form("username")="" or request.Form("password")="" or request.Form("phone")="" or request.Form("mail")="" or request.Form("password_again")="" then
response.Write("<script>alert('All items are required!!');history.go(-1);</script>") 'Judge whether the user name, password, mobile phone number and email are empty. If any item is empty, it will not pass
<!-- response.Redirect "register.asp" -->
else
if len(request.Form("username")) < 4 then
'Judge whether the user name is less than four digits. If it is less than four digits, it cannot pass
response.Write("<script>alert(' The user name cannot be less than four words');history.go(-1);</script>")
else
if len(request.Form("password")) < 5 or len(request.Form("password"))> 16 then
response.Write("<script>alert('The password cannot be less than 5 bits or more than 16 bits'); history.go(-1);</script>")
else
if request.Form("password") <> request.Form("password_again") then
'The two passwords are different
response.Write("<script>alert('The two passwords are different!'); history.go(-1);</script>")
else
set rs = server.CreateObject("adodb.recordset")
rs.open "select * from [yhmm]",conn,1,3
rs.addnew
rs("username")=request.Form("username") 'rs("field")=value
rs("password")=request.Form("password")
rs("phone")=request.Form("phone")
rs("mail")=request.Form("mail")
rs.update
response.write "<script>alert('Registration succeeded!!!'); location.href = 'login.asp'</script>"
'Prompt for successful registration
' response.end
end if
end if
end if
end if
end if
%>- Password modification function (similar to registration)
This function depends on a modify.asp.
Similar to the registration function, the user fills in the information in the form on this page. First verify whether the filling format is correct, and then transfer the form content to their own processing. First search in the database yhmm table according to the information filled in by the user. If there is a recordset, it means that the information filled in by the user is correct and can be modified. After modification, jump to the Login.asp login page. If the modification fails, an error message will be returned.
code:
<!------------------------- Change Password ---------------------------->
<% if request.QueryString("state")="mdy" then 'Judge whether it is in login status
response.write("modifying...")
us = trim(request.Form("username"))
ph = trim(request.Form("phone"))
em = trim(request.Form("email"))
pw = trim(request.Form("password"))
pwa = trim(request.Form("password_again"))
if us = "" or ph = "" or em = "" then
response.Write("<script>alert('All items are required!');history.go(-1);</script>") 'Prompt return
else
'Query whether it is in the database
set rs = server.CreateObject("adodb.recordset")
sql = "select * from [yhmm] where username='"&us&"'"
rs.open sql,conn,1,1 '1,1 Is read-only data, 1,3 Yes, insert data, 2,3 Yes, modify the data
if not rs.eof then 'If it is not empty, the data is available
if rs("phone") = ph then 'The password is also correct
session("username") = rs("username")
'A class of solutions used to maintain state between client and server ④. occasionally session Also used to refer to the storage structure of this solution, such as "put" xxx Save in session "Inside"
session("phone")=rs("phone")
session("mail")=rs("mail")
session("ident")=rs("ident")
'response.write "<script>alert('The mobile phone is correct!!!'); parent.window.history.go(-1);</script>"
if rs("mail") = em then 'Correct mailbox
'response.write "<script>alert('Correct mailbox!!!'); parent.window.history.go(-1);</script>"
if rs("password") = pw then 'Same password
response.write "<script>alert('The password cannot be the same as the original password!!!'); parent.window.history.go(-1);</script>"
else
if len(request.Form("password")) < 5 or len(request.Form("password"))> 16 then
response.write "<script>alert('The password cannot be less than 5 bits or more than 16 bits'); parent.window.history.go(-1);</script>"
else
if pw = pwa then
set rs = server.CreateObject("adodb.recordset")
rs.open "select * from [yhmm] where username='"&us&"'",conn,1,3
rs("password")=request.Form("password")
rs.update
response.write "<script>alert('Password modified successfully!!'); location.href = 'login.asp';</script>"
end if
end if
end if
else
response.write "<script>alert('Incorrect mailbox!!!'); parent.window.history.go(-1);</script>"
end if
else
response.write "<script>alert('Wrong password!!!'); parent.window.history.go(-1);</script>"
end if 'End judgment
else
response.Write("<script>alert('User does not exist!!!'); parent.window.history.go(-1);</script>")
end if
end if
end if
%>- Login function
This function relies on a login.asp.
Similarly, similar to the functions of registration and password modification, users fill in information in the form of login.asp. First verify whether the filling format is correct, and then transfer the form content to their own processing. Search in the database yhmm table according to the information filled in by users. If there is a record set, it shows that the user account and password are filled in correctly. ASP creates a session object to record the account information, Then jump to the index.asp login page. If the login fails, an error message will be returned.
code:
<!----------------------------- Sign in ------------------------------->
<% if request.QueryString("state")="login" then 'Judge whether it is in login status
response.write("login...")
us = trim(request.Form("username"))
pw = trim(request.Form("password"))
if us = "" or pw = "" then
response.Write("<script>alert('User name and password cannot be empty!');history.go(-1);</script>") 'Prompt return
else
'Query whether it is in the database
set rs = server.CreateObject("adodb.recordset")
sql = "select * from [yhmm] where username='"&us&"'"
rs.open sql,conn,1,1 '1,1 Is read-only data, 1,3 Yes, insert data, 2,3 Yes, modify the data
if not rs.eof then 'If it is not empty, the data is available
if rs("password") = pw then 'The password is also correct
session("username") = rs("username")
'A class of solutions used to maintain state between client and server ④. occasionally session Also used to refer to the storage structure of this solution, such as "put" xxx Save in session "Inside"
session("phone")=rs("phone")'there session It can be read on the home page after login
session("mail")=rs("mail")
session("ident")=rs("ident")
response.write "<script>alert('Login succeeded!!!'); location.href = 'index.asp?in=1'</script>"
else
response.write "<script>alert('Wrong password!!!'); parent.window.history.go(-1);</script>"
end if 'End judgment
else
response.Write("<script>alert('User does not exist!!!'); parent.window.history.go(-1);</script>")
end if
end if
end if
%>- Dynamic update of scenic spot information
Because the new update of scenic spots needs to read the pictures and other information in the database, the scenic spot information cannot be presented without basic information. After selecting a scenic spot in the user's main interface, pass the serial number corresponding to the scenic spot as a parameter to the scenic spot presentation interface, and then click index_ Get this parameter in intro.asp, find the record set corresponding to the scenic spot, and read and display the text, pictures and other information. Administrators can update content in the background.
The main difficulty is to read the picture. Here I use access text to store the picture path, and then read it in asp
After the user selects the scenic spot, jump and pass the parameters to this asp:
<a href="index_intro.asp?sid=1"></a>
Then get the value of SID here : request("sid")
<!------------------------- Introduction to scenic spots ----------------------------------->
<%
if IsEmpty(request("sid")) then
response.write "The passed parameter is null!"
end if
set rs=server.CreateObject("adodb.recordset") 'Create record object
Sql="select * from spots where sid="&request("sid")&"" 'Sql
rs.open Sql,conn,1,1
if not (rs.eof and rs.bof) then
' response.Write "Find scenic spots sid="&request("sid")&"data"
Name_cn = rs("name_cn")
Name_en = rs("name_en")
spot_content = rs("content")
pic1_src = rs("img1")
pic2_src = rs("img2")
pic3_src = rs("img3")
'response.write "Hyperlink 1 is______"&rs("img3")&"_______XXX"
end if
%>
<div>
<div class="bg_2">
<div class="title_cn"><% =Name_cn%></div>
<div class="title_en"><% =Name_en%></div>
<div style="text-align: center;font-size: smaller;">[Content can be managed in the background]</div>
</div>
<div class="content">
<% =spot_content %>
</div>
<div>
<img style="margin-bottom: 30px;" width="900px" height="800px" src="<%=rs("img1")%>" ></div>
<img style="margin-bottom: 30px;" width="900px" height="800px" src="<%=rs("img2")%>" ></div>
<img style="margin-bottom: 30px;" width="900px" height="800px" src="<%=rs("img3")%>" ></div>
</div>
</table>No refresh display of message board information
The update of the message area needs to read the message records and other information in the database in time. Without basic information, the message function cannot be carried out. Therefore, the message area should be updated after each successful message submission and return to the current page. The data loading form here is similar to that of the scenic spot display area. Ajax is used to send the client request to lyb.asp, and the table data is updated in lyb.asp.
In addition, VBscript and Ajax are used to operate the record set. A page only shows the number of priority messages, and realizes the function of turning pages, which makes the browsable information space larger.
Submission of message board information
The message data loading form here is similar to that of the registration section. The comment content is transformed into a record collection and transmitted to lyb.asp, and the content is inserted into the database. At the same time, the page is updated without refresh.