Dynamic web page homework - easy to understand [with source code sharing] - based on ASP and Ajax technology

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">
              &nbsp;&nbsp;<% =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.         

Tags: ASP.NET Front-end Ajax server

Posted on Fri, 29 Oct 2021 12:40:16 -0400 by colinexl