The message information developed by the website message system will be sent to the designated mailbox in real time

Keywords: HTML PHP JavaScript CSS

0 is briefly

Enterprises and other industries will display company information, product information and other information through the website to attract customers.

And the message board, is the module that most websites usually set up. In general, the basic functions of message boards are divided into the following types:

The user message information is saved to the database, and the administrator logs in to the background for reference.
Real-time online customer service, customer message real-time reply;
The user message is sent to the customer service mailbox
other

Compared with the previous three situations, the first one requires login to check the message information, which may delay the information of important customers. The second one is the best, but the cost is higher. Therefore, weighing the pros and cons, for general enterprises, the effect of the third, or the combination of the first and the third will be better.

Here is a message system that uses PHP’s Mailer to construct a simple form and send it to a specified mailbox.

1 background and demand analysis

Suppose a book sales company needs to develop a set of customer message system, so that users timely feedback the process of using books, encountered all kinds of problems related to books, such as wrong answers, missing pages and so on.

Among them, users are required to feedback the following information:

The name of the feedback book material
Problems with the book

In order to facilitate the statistics, the provision of name (or nickname), QQ, mobile phone three information must be filled in one.

The general effect is as follows:

2 Feasibility study

This system is a simple message system. Details are as follows:

Technical aspects: Web technology, using HTML, JS, PHP and other programming languages;
Economic aspect: the system is small, and basically does not cost much;
Operation: the interface is simple and interactive.

3 Basic Knowledge

3.1 Front-end HTML web page design technology

The first use of HTML < form>, < table> tags, structure of the table, and the use of < input> tags to set the text and other input boxes, so as to build the interface of the whole project.

The specific basic knowledge is as follows:

< form > tag

Forms are defined using < form> and < /form>, and have properties such as name, method, Action, target, and so on.

Basic syntax:
```
	<form name="Form name" method="Submission Method" action="Handler">... ...</form>
Copy the code
```

form

Tables are defined by < table>, < TR >, < TD >, or < th> tags, representing tables, table rows, and cells, respectively.

Basic syntax:

	<table>
		<caption>The table header</caption>
		<tr><th>Column a</th><th>The column 2</th>... .</tr>
		<tr><td>Data a</td><td>Two data</td>... .</tr>...</table>
Copy the code

Table attributes (< table> attributes) :

attribute	use	attribute	use
width	Table width	cellpadding	margin
height	Table height	cellspacing	spacing
align	Table horizontal alignment	bgcolor	Table background color
border	Table border thickness	background	Tabular background image

Table row attributes (< tr> attributes) :

attribute	use
align	Horizontal alignment of cells
valign	The vertical alignment of content in a cell
bgcolor	The background color

< TD >, < tr> attributes:

attribute	use	attribute	use
align	Horizontal alignment	valign	Vertical alignment
background	The background image	bgcolor	The background color
colspan	Across a number of columns	rowspan	The number of rows
height	highly	width	The width of the

The < input > tag and its attributes

The < input> tag has six attributes: type, name, size, value, maxLength, and check.

Basic syntax:
```
<input name="Enter domain name" type="Domain type" value="Value of input field">
Copy the code
```
Where name and type are mandatory attributes:
- Name: The value of the property is the name of the variable in the responder specified by the action property in the form tag;
- Type: There are 9 types as follows
1. Text field in the following format:
```
<input  type="text" name="Text field name" maxlength="" size="" value="">
Copy the code
```
  The size and maxLength attributes define the size to display in this field and the maximum number of characters to enter.
2. Password field in the following format:
```
<input type="password"  name="Password field name" size=""  maxlength="" value="" >
Copy the code
```
  When a user enters a password, an asterisk (*) is displayed in the area instead of the entered content.
3. Radio button in the following format:
```
<input type="radio" name="" value="" checked />
Copy the code
```
  The checked property is used to set whether the radio button is selected by default. When there are multiple mutually exclusive radio buttons, set the same value of name.
4. Check box in the following format:
```
<input type="checkbox" name="" value="" checked />
Copy the code
```
  The Checked property is used to set whether the check box is selected by default. If there are multiple check boxes, you can set the same or different name values.
5. Submit button in the following format:
```
<input type="submit" name="" value=""/>
Copy the code
```
  The button that submits the form content to the server.
6. The cancel button has the following format:
```
<input type="reset" name=" " value=" "/>
Copy the code
```
  The form content is all clear, re-fill the button.
7. Image button with the following format:
```
<input type="image" src="Image"/>
Copy the code
```
  Use an image instead of the Submit button, and the source file name of the image is specified by the SRC attribute.
8. File field in the following format:
```
<input type="file" name="" size="" maxlength="">
Copy the code
```
  Upload files.
9. Hide the field in the following format:
```
<input type="hidden" name="" value="" />
Copy the code
```
  The user cannot enter information in it, which is used to presuppose certain information to be delivered.
Drop-down list boxes: < select >, < option >

In a form, the < SELECT > and < option> tags allow you to design a drop-down list or a scrollbar list in which the user can select one or more options.

Basic syntax:
```
	<select name="" size="" multiple>
		<option value="" selected>...</option>
		<option value="">...</option>...</select> 
Copy the code
```
Multi-line text box < textarea > tag

Basic syntax:
```
	<textarea  name=""  rows="" cols="" wrap="off|virtual|physical">The initial value</textarea>
Copy the code
```
Where rows sets the number of rows in the input field,

Cols sets the number of columns in the input field,

Wrap Sets whether to wrap automatically.

3.2JavaScript Script language

When the user inputs certain information, the input data needs to be verified, and the response button click event, so as to achieve a series of actions.

The specific basic knowledge is as follows:

The data type

JavaScript has the main data types: int, float, string, Boolean, null.

variable

(1) Variable declaration in the following format:

	varVariable name [= value]; (Variable declarations can be omitted)Copy the code

(2) Array declaration: there are three ways to declare arrays

var array1=new Array(a);//array1 is an array of default length
var array2=new Array(10);     			//array2 is an array of length 10
var array3=new Array("aa".12.true); 	//array1 is an array of length 3 with different element types
Copy the code

The operator

Arithmetic operators, relational operators, logical operators, string operators, bitwise operators, assignment operators, and conditional operators are provided in JavaScript. These operators are the same as the supported operators and their functions in the Java language.
Control statements

The control statements in JavaScript include branch statements (if, switch) and loop statements (while, do-while, for). The syntax rules and usage of these statements are the same as the requirements in the Java language.

The function definitions

There are two ways to declare a function in JavaScript:

1. Variable declaration

		var f = function () { /* function body */ }; 
Copy the code

2. Function expressions

		function f() { /* function body*/ } 
Copy the code

There are two ways to define functions in JavaScript:

1. Embed JavaScript directly in Web pages

use

		<script language="javascript">..................... </script>Copy the code

Encapsulating code must be placed in

		<head>.....................</head>
Copy the code

In between.

2. Link to external JavaScript files

		<script language="javascript" scr="url"></script>
Copy the code

JavaScript event

The event	The name of the event handler	When the trigger
blur	onBlur	Triggered when the element or window itself loses focus
change	onChange	Fired when a form element gets focus and the content value changes
click	onClick	Triggered when the left mouse button is clicked
focus	onFocus	Triggered when any element or window itself gets focus
keydown	onKeydown	Triggered when a keyboard key is pressed, or continuously triggered if a key is pressed all the time
load	onLoad	Fires on the Window object when the page is loaded; [Fixed] Trigger on frameset after all frames are loaded Fires when the specified object is fully loaded
select	onSelect	Triggered when text is selected
submit	onSubmit	Click the submit button when triggered on
unload	onUnload	Fires on the Window object after the page is completely unmounted; Or it can be triggered on a frameset after all frameworks are uninstalled

Reference (specify) event handlers in HTML

To specify an event handler in HTML, you need to add the corresponding event handler attribute to the HTML tag and specify the code or function name as the attribute value.

Use format:
```
< Tag attributes and their attribute values on event name ="Function name (parameter)"> 
	/ / such as:
	<input type="Button" value=Warning dialog box onclick="test()"> 
Copy the code
```

The object of the JavaScript

JavaScript has built-in objects. Common built-in objects are:

String,

Date

Browser document objects: Window, Navigator, Screen, History, Location, Documen, and so on.

The window object

The method of	describe
alert()	A warning dialog box is displayed
confirm()	Displays a confirmation dialog box, returning true when the Ok button is clicked, and false otherwise
prompt()	A prompt dialog box pops up and asks for a simple string
setTimeout(timer)	Executes code after a specified amount of time
clearTimeout()	Cancels delayed execution of specified code
setInterval()	Executes the specified code periodically
clearInterval()	Stop executing code periodically

Location object

The Location object enables the jump to a web page. In HTML, the tag < a> < /a> is used to realize the jump of the page. In JavaScript, the automatic jump of the page is realized by using the Location object.

Use format:
```
		window.location.href="Page Path";
Copy the code
```
For example, jump to sohu page:
```
		window.location.href="http://www.sohu.com";
Copy the code
```

The history object

The history object can access the browsing history of the browser window and control the browser forward and backward by using the go, back, and Forward methods.

Properties, methods	meaning
Length attribute	Total number of browsing history records
The go (index) method	The URL is loaded from the browsing history. The index parameter is the relative path to load the URL. If the index value is negative, it indicates browsing records before the current address; if the index value is positive, it indicates browsing records after the current address
Forward () method	Load the next URL from the browsing history, equivalent to history.go(1)
The back () method	Load a URL from browsing history, equivalent to history.go(-1)

The document object

After each HTML document is loaded, it initializes a Document object in memory, which stores the HTML content of the entire web page. From this object, you can obtain various information about the page form.

(1) Get the form field object

The main way to get form field objects is through form access, direct access. Suppose there is a form:

	<form action=""  name= "form1" >
		<input type="text" name= "t1"  value="" >
	</form> 
Copy the code

Then get the input field object:

① Access through the form

	var fObj=document.form1.t1;    
	var fObj=document. Form1. Elements [" t1 "]var fObj=document.forms[0].t1; 
Copy the code

② Direct access

	var fObj=document.getElementsByName("t1") [0];
	var fObj=document.getElementById("t1");     
	var fObj=document.all("t1").value
Copy the code

(2) Get the value of the form field

As the form field type is different, the method of obtaining the form field value is also different. The common methods are as follows (if the form field object is fObj) :

① Obtain the values of the text field, text box, and password box

 	var v=fObj.value;
Copy the code

② Obtain the value of the check box

For example: for the following set of check boxes:

	<input type="checkbox" name="c1" value="1"/>
	<input type="checkbox" name="c1" value="2"/>
Copy the code

Using JavaScript to value methods:

	var fObj=document.form1.c1;     Form1 is the name of the form
	var s="";
	for(var i=0; i<fObj.length; ++i){if(fObj[i].checked==true)  s=s+fObj[i].value;   
	}
Copy the code

③ Obtain the value of the radio button

For example: for the following set of radio buttons:

	<input type="radio" name="p"Checked / > and < input type ="radio" name="p"/ >Copy the code

The value method using JavaScript is as follows:

	var fObj=document.form1.p;     Form1 is the name of the form
	for(var i=0; i<fObj.length; ++i)if(fObj[i].checked)  break;
	switch(i){
		case 0:... ;break;
		case 1:... ;break;
		case 2:... ;break;
		case 3:... ;Copy the code

4 Obtain the value of the list box

For the radio list box, extract the value as follows:

	var index=fObj.selectedIndex;  		//fObj is a list object, and retrieves the selected index, starting from 0
	var val=fObj.options[index].value; 	// Retrieves the selected value
Copy the code

For multi-select lists, the values need to loop:

	var fObj=document.form1.s1;   Form1 is the name of the form
	var s="";
	for(var i=0; i<fObj.options.length; ++i){if(fObj[i].options[i].selected==true) 
			s=s+fObj.options[i].value;
	}
Copy the code

3.3 Basic PHP techniques

PHP is a powerful server-side scripting language for creating dynamic, interactive sites. In addition to the basic interface display, most of its functions are used for low-level data processing.

Basic PHP syntax

PHP scripts can be placed anywhere in the document.

The PHP script ends with:
```
        
// Here is the PHP code
? >
Copy the code
```
PHP variable rules

The variable name must start with A letter or underscore (_). The variable name cannot start with A digit. The variable name can contain only alphanumeric characters and underscores (A− Z, 0−9, and underscores). The variable name must start with A letter or underscore. The variable name cannot start with A number. The variable name can contain only alphanumeric characters and underscores (A-z, 0-9, and _). The variable name must start with A letter or underscore. The variable name must not start with A number. The variable name must contain only alphanumeric characters and underscores (A−z, 0−9, and).
```
        
	$txt="Hello world!";
	$x=5;
	$y=10.5;
? >
Copy the code
```
Echo statement

Echo is a language construct that can be used with or without parentheses: echo or echo().

Display string:


      
echo "PHP is fun! 
";
echo "Hello world! 

";
echo "I'm about to learn PHP! 

";
echo "This"." string"." was"." made"." with multiple parameters.";
? >
Copy the code

Display variables:


      
$txt1="Learn PHP";
$txt2="cxh";
$cars=array("Volvo"."BMW"."SAAB");
echo $txt1;
echo "<br>";
echo "Study PHP at $txt2";
echo "My car is a {$cars[0]}";
? >
Copy the code

The PHP string is “. , the decimal point connection.

Character coding conversion

General web pages are encoded in UTF-8 format, but emails do not support this format (garbled characters will be received), so encoding conversion is required.

Examples are as follows:
```
$phone2 = iconv('UTF-8'.'GB2312'.$phoneltemp);	// UtF-8 encoding is converted to GB2312
$succeed2 = iconv('GB2312'.'UTF-8'.$succeed);	// The opposite of the previous sentence
Copy the code
```

4 system coding implementation

4.1 Front-end display code

This section mainly shows the realization code of the form displayed at the front of the whole page. Mainly using HTML language coding.

The detailed code is as follows:

<! DOCTYPEHTML> 
<html>
<head>
    <meta charset="utf-8">
    <title>X message system</title>
    <script language="javascript" src="judgement.js"></script>
<style>
.error {color: #FF0000; text-align: left; }</style><-- make sure the mobile terminal display is normal --><meta name="viewport" content="Width = device - width, initial - scale = 1.0, the minimun - scale = 1.0, the maximum - scale = 1.0, user - scalable = no">
    
</head>< span style = "box-sizing: border-box; color: RGB (51, 51, 51);<body background="logo.png" style="background-color:blanchedalmond;">
    
<div align="center"> 	<h2>X message system</h2> </div> 
    
<form action="send.php" method="post">
    <table border="0" align="center" width="0" cellpadding="10" cellspacing="0">    
        <tr>
            <td align="right" nowrap="nowrap">Name and Nickname:</td>
            <td><input type="text" name="name" id="name" style="width:90%" placeholder="Please fill in one or more of the first three items."></td>
        </tr>
        <tr>
            <td align="right">QQ number:</td>
            <td><input type="email" name="email" id="email" style="width:90%" placeholder="Please fill in one or more of the first three items."></td>
        </tr>
        <tr>
            <td align="right">Mobile Phone Number:</td>
            <td><input type="text"  name="phone" id="phone" style="width:90%"  placeholder="Please fill in one or more of the first three items."></td>
        </tr>
        <tr>
            <td align="right">Feedback information:</td>
            <td><select name="bookSelect" id="bookSelect" size="1" style="width:90%">
                <option>Please select the feedback book</option>
                <option>Advanced Mathematics A</option>
                <option>Advanced mathematics B</option>
                <option>Linear algebra</option>
                <option>Probability theory</option>
                <option>University Physics A</option>
                <option>University Physics B</option>
                <option>Complex function</option>
                <option>Circuit analysis</option>
                <option>Circuit principle</option>                
                <option>Physical and chemical</option>                
                <option>Electronics and electricians B</option>                
                <option>Electronics and electricians C</option>                
                <option>Theoretical mechanics</option>                
                <option>Mechanics of materials</option>                
                <option>Engineering mechanics</option>                
                <option>Inorganic chemistry</option>                
                <option>Organic chemistry C</option>                
                <option>Metal technology</option>                
                <option>other</option>                
                </select>   
                <a class="error"> *</a>
            </td>
        </tr>
        <tr>
            <td align="right">Feedback information:</td>
            <td> <textarea name="comments" id="comments" rows="8" style="width: 90%"  placeholder="For example, the correct answer to question 8 in the second set should be A, the wrong answer to question 5 on page 18, and the wrong answer to question 2 in question 18 on page 20 should be 5."></textarea><a class="error"> *</a></td>
        </tr>
        
        <tr>
            <td colspan="3" align="center" height="40">
                <input type="button" name="button" value="Submit" onclick="validate()"/>
            </td>
        </tr>
        
    </table>
</form>

</body>
</html>
Copy the code

4.2 Input Verification

This part verifies the form information input by users, mainly using JavaScript programming language.

The detailed code is as follows:

// JavaScript Document

function validate(){
    var name=document.forms[0].name.value;
    var email=document.forms[0].email.value;
    var phone = document.forms[0].phone.value;
    var index=bookSelect.selectedIndex;
    var message=document.forms[0].comments.value;
    
    //var reg2= /\w+([-+.']\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*/;
    
    if(name.length<=0 &&  email.length<=0 && phone.length<=0)
        alert("Name or nickname, QQ, mobile phone please fill in at least one!"); 
    //else if(! reg2.test(email) && email.length>0 )
    // alert(" Message format is not correct! );
    else if(index==0)
        alert("Please select feedback data!");
    else if(message.length<=0)
        alert("Please input feedback!");
    else  
        document.forms[0].submit();    
}
Copy the code

4.3 Email Sending

The function of this part is to summarize the form information entered by the user in the front end and send the text information to the specified mailbox through PHPMailer after entering the verification program.

This part mainly uses PHP language to achieve, which combines some HTML.

The detailed code is as follows:


      
require 'PHPMailerAutoload.php';	// You need to send packets using third-party mail
 
$mail = new PHPMailer();
$mail->Encoding = "base64";
$mail->isSMTP(); 					// Use the SMTP service
$mail->CharSet = "GB2312";			// Use "UTF-8" encoding, but received gibberish, so use GB2312;
$mail->Host = "smtp.163.com";      	// SMTP server address of the sender
$mail->SMTPAuth = true;				// Whether to use authentication
$mail->Username = "****@163.com";   // The sender's mailbox 163 user name
$mail->Password = "yourpassword"; 	// Sender's email authorization code
$mail->SMTPSecure = "ssl";			// Use SSL
$mail->Port = 465;   				// The SSL port number of mailbox 163 is 465/994
//$mail->isHTML(true); 

$mail->setFrom("****@163.com"."Email subject");     // Set sender information
$mail->addAddress("收件人[email protected]".""); // Set recipient information. You can set multiple recipient information. Copy and paste this line to change the email address
$mail->addAddress("Addressee 2@**.com"."");  // Set recipient information. You can set multiple recipient information. Copy and paste this line to change the email address
$mail->addAddress("**@**.com".""); 	// Set recipient information. You can set multiple recipient information. Copy and paste this line to change the email address
$mail->addReplyTo("***@163.com"."Reply");   // Set the addressee information, which refers to the email address to which a reply will be sent if the recipient wants to reply
//$mail->addCC("[email protected]"); // Set the email cc addressee, can write only the address, the above Settings can also write only the address
//$mail->addBCC("[email protected]"); // Set up a secret cc
//$mail->addAttachment("bug0.jpg"); // Add attachments

// Transcode the data in the previous form.
$nametemp = $_POST['name'];
$name2 = iconv('UTF-8'.'GB2312'.$nametemp);

$emailtemp = $_POST['email'];
$email2 = iconv('UTF-8'.'GB2312'.$emailtemp);

$phoneltemp = $_POST['phone'];
$phone2 = iconv('UTF-8'.'GB2312'.$phoneltemp);

$bookSelecttemp = $_POST['bookSelect'];
$bookSelect2 = iconv('UTF-8'.'GB2312'.$bookSelecttemp);

$commentstemp = $_POST['comments'];
$comments2 = iconv('UTF-8'.'GB2312'.$commentstemp);
 
// The following is a summary of the data to send to the mailbox
$mail->Subject = "New message received on the page ~~";          // The subject of the email
$mail->Body = "User Name:.$name2."QQ Number:".$email2."Mobile phone Number:".$phone2."Feedback data:.$bookSelect2."Feedback:".$comments2;      // The body of the message

// Define the text message displayed in the success or error popup
$falied = "Message delivery failed, please contact webmaster!";
$falied2 = iconv('GB2312'.'UTF-8'.$falied);

$succeed = "Message sent successfully, we have received your feedback. This page will close, please go back. Thanks for the support!";
$succeed2 = iconv('GB2312'.'UTF-8'.$succeed);

// Send an email
// If not successful, the popup displays an error message
if(!$mail->send()){
    echo "<script language=javascript>alert('$falied2'); window.opener=null; window.top.open('','_self',''); window.close(this); </script>";
    //echo "Mailer Error: ".$mail->ErrorInfo; // Output error information
}
// Otherwise, the text message of sending success will be displayed and the web page will be closed to prevent users from clicking submit multiple times
else{
    echo "<script language=javascript>alert('$succeed2'); window.opener=null; window.top.open('','_self',''); window.close(this); </script>";
}
? >
Copy the code

5 Effect Display

First, please look at the performance display.

5.1 Home Page Display

The main page of the message system is shown in the following figure.

5.2 Non-standard display

If you do not fill in as specified, start the input validator and verify the popup

Click the submit button without entering any information, and the result is as follows:

Do not select the feedback data, click the submit button, the effect is as follows:

Without input feedback information, click the submit button and the following prompt will be displayed:

5.3 Submission Is Displayed successfully

After the information is input, click the submit button and the submission is successful. The prompt is as follows:

Then the mailbox receives the message, as shown below:

6 afterword.

The system is not difficult to write, and the scope of application is very wide, high practicability.

7 Reference Materials

[1] Java Web Application Development Techniques and Case tutorials. Zhang Jijun. China Machine Press [2] CSDN other blog

The message information developed by the website message system will be sent to the designated mailbox in real time

0 is briefly

1 background and demand analysis

2 Feasibility study

3 Basic Knowledge

3.1 Front-end HTML web page design technology

< form > tag

form

The < input > tag and its attributes

Drop-down list boxes: < select >, < option >

Multi-line text box < textarea > tag

3.2JavaScript Script language

The data type

variable

The operator

Control statements

The function definitions

JavaScript event

Reference (specify) event handlers in HTML

The object of the JavaScript

The window object

Location object

The history object

The document object

(1) Get the form field object

(2) Get the value of the form field

① Obtain the values of the text field, text box, and password box

② Obtain the value of the check box

③ Obtain the value of the radio button

4 Obtain the value of the list box

3.3 Basic PHP techniques

PHP is fun!

4 system coding implementation

4.1 Front-end display code

4.2 Input Verification

4.3 Email Sending

5 Effect Display

5.1 Home Page Display

5.2 Non-standard display

5.3 Submission Is Displayed successfully

6 afterword.

7 Reference Materials

Related Posts

Comic | late, the programmer’s computer did not shut…

Double loop TDD is used for outside-in development

SAP Netweaver and Hybris database layer