ε=(?д?`*)?? 看完這篇文章你會收獲什么?下圖為最終效果,圖片中會自帶水印,不是廣告 ,畢竟 防狼防盜防伸手黨嘛。(●′?`●) 當然啦,哈哈這個模板我也不知道當初是從哪里盜來的,嘿嘿,東湊湊西湊湊。
Paste_Image.png
看完圖后如果這個功能對你有幫助你有兩個選擇?乛?乛?
選擇一: 加群499125737 直接找群主拿代碼就好啦,都幫你打包好了哦。
選擇二:安安靜靜踏踏實實的看完此文章,跟著copy一遍,哈哈。
哈哈人生總是充滿了選擇,結果是一樣嗎?忍不住裝裝逼,提高下文章檔次。
?乛?乛?開始了。
第一步 創建文件:
好了,我知道你們跟我一樣懶文件名懶得自己敲,我幫你敲出來吧,畢竟教程標題可是說好啦,供你完美copy。Acced_Form public mail.php 小貓不吃漁原創教程.docx(哈哈哈哈)
然后我們從第一個文件夾(Acced_Form)入手吧,一個一個來,不要急,接著把下面文件也創建好吧。
第二步 做只會copy小精靈:
index.html代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- Custom Theme files -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<!--Google Fonts-->
<!--Google Fonts-->
</head>
<body>
<div class="login">
<h2>小貓不吃漁</h2>
<div class="login-top">
<h1>技術群養老申請</h1>
<form action="../mail.php" method="post">
<input name="name" value='' type="text" placeholder="稱呼" id="f_name">
<input name="email" value='' type="text" placeholder="郵箱" id="f_email">
<div class="forgot">
<input type="submit" value="提交" >
</div>
</form>
</div>
<div class="login-bottom">
<h3>我們將在稍后為您發送一份郵件, 請注意查收</h3>
</div>
</div>
</body>
<script src='js/jquery-2.0.2.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function(){
var name=$('#f_name').val();
if(name==''){
alert('稱呼不能為空');
return false;
}
var f_email=$('#f_email').val();
if(f_email ==''){
alert('郵箱不能為空');
return false;
}
if (f_email != '') {//判斷
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
if (!reg.test(f_email)) {
alert('郵箱格式不正確,請重新填寫!');
return false;
}
}
});
});
</script>
</html>
然后 我們進入css文件夾
Paste_Image.png
style.css代碼如下:
/* start editing from here */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0;padding:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
.underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
/*--login start here--*/
body{
background: url(../images/banner.jpg)repeat;
padding:100px 0px 30px 0px;
font-family: 'Roboto', sans-serif;
font-size: 100%;
}
.login {
width: 32%;
margin: 0 auto;
}
.login h2 {
font-size: 30px;
font-weight: 700;
color: #fff;
text-align: center;
margin: 0px 0px 50px 0px;
font-family: 'Droid Serif', serif;
}
.login-top {
background: #E1E1E1;
border-radius: 25px 25px 0px 0px;
-webkit-border-radius: 25px 25px 0px 0px;
-moz-border-radius: 25px 25px 0px 0px;
-o-border-radius: 25px 25px 0px 0px;
padding: 40px 60px;
}
.login-top h1 {
text-align: center;
font-size: 27px;
font-weight: 500;
color: #F45B4B;
margin: 0px 0px 20px 0px;
}
.login-top input[type="text"] {
outline: none;
font-size: 15px;
font-weight: 500;
color: #818181;
padding: 15px 20px;
background: #CACACA;
border: 1px solid #ccc;
border-radius:25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
margin: 0px 0px 12px 0px;
width: 88%;
-webkit-appearance: none;
}
.login-top input[type="password"]{
outline: none;
font-size: 15px;
font-weight: 500;
color: #818181;
padding: 15px 20px;
background: #CACACA;
border: 1px solid #ccc;
border-radius:25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
margin: 0px 0px 12px 0px;
width: 88%;
-webkit-appearance: none;
}
.forgot a{
font-size: 13px;
font-weight: 500;
color: #F45B4B;
display: inline-block;
border-right: 2px solid #F45B4B;
padding: 0px 7px 0px 0px;
}
.forgot a:hover{
color: #818181;
}
.forgot input[type="submit"] {
background: #F45B4B;
color: #FFF;
font-size: 17px;
font-weight: 400;
padding: 8px 7px;
width: 20%;
display: inline-block;
cursor: pointer;
border-radius: 6px;
-webkit-border-radius: 19px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
margin: 0px 7px 0px 3px;
outline: none;
border: none;
}
.forgot input[type="submit"]:hover {
background:#818181;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.forgot {
text-align: center;
}
.login-bottom {
background: #E15748;
padding: 30px 65px;
border-radius: 0px 0px 25px 25px;
-webkit-border-radius: 0px 0px 25px 25px;
-moz-border-radius: 0px 0px 25px 25px;
-o-border-radius: 0px 0px 25px 25px;
text-align: right;
border-top: 2px solid #AD4337;
}
.login-bottom h3 {
font-size: 14px;
font-weight: 500;
color: #fff;
}
.login-bottom h3 a {
font-size: 25px;
font-weight: 500;
color: #fff;
}
.login-bottom h3 a:hover {
color:#696969;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.copyright {
padding: 150px 0px 0px 0px;
text-align: center;
}
.copyright p {
font-size: 15px;
font-weight: 400;
color: #fff;
}
.copyright p a{
font-size: 15px;
font-weight: 400;
color: #E15748;
}
.copyright p a:hover{
color: #fff;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
/*--login end here--*/
/*--meadia quiries start here--*/
@media(max-width:1440px){
.login {
width: 35%;
}
}
@media(max-width:1366px){
.login {
width: 37%;
}
}
@media(max-width:1280px){
.login {
width: 40%;
}
}
@media(max-width:1024px){
.login {
width: 48%;
}
.copyright {
padding: 100px 0px 0px 0px;
}
}
@media(max-width:768px){
.login {
width: 65%;
}
.login-top h1 {
font-size: 25px;
}
.login-bottom h3 a {
font-size: 22px;
}
.copyright {
padding: 250px 0px 0px 0px;
}
body {
padding: 100px 0px 0px 0px;
}
.login h2 {
font-size: 28px;
}
}
@media(max-width:640px){
.login-top h1 {
font-size: 23px;
}
.forgot input[type="submit"] {
font-size: 15px;
width: 22%;
}
.login-top input[type="text"] {
padding: 12px 20px;
}
.login-top input[type="password"] {
padding: 12px 20px;
}
.login-bottom h3 a {
font-size: 19px;
}
.login-bottom h3 {
font-size: 13px;
}
.copyright {
padding: 110px 0px 0px 0px;
}
body {
padding: 110px 0px 0px 0px;
}
}
@media(max-width:480px){
.login {
width: 80%;
}
.login-top h1 {
font-size: 21px;
}
.login-top input[type="text"] {
width: 85%;
}
.login-top {
padding: 30px 40px;
}
.login-top input[type="password"] {
width: 85%;
}
.login h2 {
font-size: 25px;
}
}
@media(max-width:320px){
.login {
width: 90%;
}
.login-top {
padding: 20px 25px;
}
.login-top input[type="text"] {
width: 81%;
padding: 10px 20px;
font-size: 13px;
margin: 0px 0px 7px 0px;
}
.login-top input[type="password"] {
width: 81%;
padding: 10px 20px;
font-size: 13px;
margin: 0px 0px 7px 0px;
}
.forgot input[type="submit"] {
font-size: 11px;
width: 25%;
padding: 6px 7px;
}
.forgot a {
font-size: 11px;
}
.login-bottom {
padding: 20px 25px;
}
.login-bottom h3 {
font-size: 11px;
}
.login-bottom h3 a {
font-size: 17px;
}
body {
padding: 50px 0px 0px 0px;
}
.copyright p {
font-size: 13px;
}
.copyright p a{
font-size: 13px;
}
.login h2 {
font-size: 23px;
margin:0px 0px 35px 0px;
}
.copyright {
padding: 75px 0px 0px 0px;
}
}
/*--meadia quiries end here--*/
進入js 文件夾 創建 jquery-2.0.2.js 此文件請自行百度下載。
Paste_Image.png
進入images文件 創建banner.jpg 粘貼下圖進去就好了
Paste_Image.png
打開index.html 看看效果
Paste_Image.png
OK完美,前端搞定,那么開始我們的php代碼吧。
返回入口目錄
Paste_Image.png
注意了:這里的代碼不是純copy就可以直接用的,你需要改你的163郵箱配置,和數據庫表創建。
所以采用的是原生代碼,稍微有點基礎的都能看懂吧。(●′?`●)
打開mail.php 粘貼下面代碼:
<?php
//引入配置文件
require('public/config.php');
//執行登錄信息判斷
$link =@mysql_connect(HOST,USER,PASS) or die ('數據庫連接失敗');
//選擇數據庫,設置字符集
mysql_select_db(DBNAME,$link);
mysql_set_charset('utf8');
$name=$_POST['name'];//稱呼
$email=$_POST['email'];//郵件
//查詢郵箱是否存在
$sql="select email from wp_catmailbox where email={$email}";
$result=mysql_query($sql);
@$row=mysql_fetch_assoc($result);
if(!empty($row)){
echo "<script>alert('提交失敗,郵箱已被使用!');window.location.href='./Acced_Form/index.html';</script>";
die;
}
//執行插入語句
$asql="insert into wp_catmailbox(name,email) values('{$name}','{$email}')";
mysql_query($asql);
//執行$asql語句
$m = mysql_insert_id($link);
if($m > 0){
echo "<script>alert('提交成功,感情您的參與!');window.location.href='./Acced_Form/index.html';</script>";
//使用163郵箱服務器
$smtpserver = "smtp.163.com";
//163郵箱服務器端口
$smtpserverport = 25;
//你的163服務器郵箱賬號
$smtpusermail = "183*******@163.com";
//收件人郵箱
$smtpemailto = $email;
//你的郵箱賬號(去掉@163.com)
$smtpuser = "183******@163.com";//SMTP服務器的用戶帳號
//你的郵箱密碼
$smtppass = "dzg*****"; //SMTP服務器的用戶密碼
//郵件主題
$mailsubject = "技術養老群領養";
//郵件內容
$mailbody = "點擊下載:<a ;
//郵件格式(HTML/TXT),TXT為文本郵件
$mailtype = "HTML";
//這里面的一個true是表示使用身份驗證,否則不使用身份驗證.
$smtp = new smtp($smtpserver,$smtpserverport,true,$smtpuser,$smtppass);
//是否顯示發送的調試信息
$smtp->debug = TRUE;
//發送郵件
$smtp->sendmail($smtpemailto, $smtpusermail, $mailsubject, $mailbody, $mailtype);
}else{
echo "<script>alert('提交失敗,請稍后在試!');window.location.href='./Acced_Form/index.html';</script>";
}
最后進入public文件夾
粘貼下面代碼就行,記得數據庫配置改改
<?php
//公共配置文件
//配置數據庫信息
define('HOST','182.92.**.**');//數據庫主機名
define('USER','root');//數據庫用戶名
define('PASS','all****');//數據庫密碼
define('DBNAME',"w****");//數據庫名
class smtp
{
/* Public Variables */
var $smtp_port;
var $time_out;
var $host_name;
var $log_file;
var $relay_host;
var $debug;
var $auth;
var $user;
var $pass;
/* Private Variables */
var $sock;
/* Constractor */
function smtp($relay_host = "", $smtp_port = 25,$auth = false,$user,$pass)
{
$this->debug = FALSE;
$this->smtp_port = $smtp_port;
$this->relay_host = $relay_host;
$this->time_out = 30; //is used in fsockopen()
$this->auth = $auth;//auth
$this->user = $user;
$this->pass = $pass;
$this->host_name = "localhost"; //is used in HELO command
$this->log_file = "";
$this->sock = FALSE;
}
/* Main Function */
function sendmail($to, $from, $subject = "", $body = "", $mailtype, $cc = "", $bcc = "", $additional_headers = "")
{
$mail_from = $this->get_address($this->strip_comment($from));
$body = ereg_replace("(^|(\r\n))(\.)", "\1.\3", $body);
$header .= "MIME-Version:1.0\r\n";
if($mailtype=="HTML")
{
$header .= "Content-Type:text/html\r\n";
}
$header .= "To: ".$to."\r\n";
if ($cc != "")
{
$header .= "Cc: ".$cc."\r\n";
}
$header .= "From: $from<".$from.">\r\n";
$header .= "Subject: ".$subject."\r\n";
$header .= $additional_headers;
$header .= "Date: ".date("r")."\r\n";
$header .= "X-Mailer:By Redhat (PHP/".phpversion().")\r\n";
list($msec, $sec) = explode(" ", microtime());
$header .= "Message-ID: <".date("YmdHis", $sec).".".($msec*1000000).".".$mail_from.">\r\n";
$TO = explode(",", $this->strip_comment($to));
if ($cc != "")
{
$TO = array_merge($TO, explode(",", $this->strip_comment($cc)));
}
if ($bcc != "")
{
$TO = array_merge($TO, explode(",", $this->strip_comment($bcc)));
}
$sent = TRUE;
foreach ($TO as $rcpt_to)
{
$rcpt_to = $this->get_address($rcpt_to);
if (!$this->smtp_sockopen($rcpt_to))
{
$this->log_write("Error: Cannot send email to ".$rcpt_to."\n");
$sent = FALSE;
continue;
}
if ($this->smtp_send($this->host_name, $mail_from, $rcpt_to, $header, $body))
{
$this->log_write("E-mail has been sent to <".$rcpt_to.">\n");
}
else
{
$this->log_write("Error: Cannot send email to <".$rcpt_to.">\n");
$sent = FALSE;
}
fclose($this->sock);
$this->log_write("Disconnected from remote host\n");
}
return $sent;
}
/* Private Functions */
function smtp_send($helo, $from, $to, $header, $body = "")
{
if (!$this->smtp_putcmd("HELO", $helo))
{
return $this->smtp_error("sending HELO command");
}
#auth
if($this->auth)
{
if (!$this->smtp_putcmd("AUTH LOGIN", base64_encode($this->user)))
{
return $this->smtp_error("sending HELO command");
}
if (!$this->smtp_putcmd("", base64_encode($this->pass)))
{
return $this->smtp_error("sending HELO command");
}
}
if (!$this->smtp_putcmd("MAIL", "FROM:<".$from.">"))
{
return $this->smtp_error("sending MAIL FROM command");
}
if (!$this->smtp_putcmd("RCPT", "TO:<".$to.">"))
{
return $this->smtp_error("sending RCPT TO command");
}
if (!$this->smtp_putcmd("DATA"))
{
return $this->smtp_error("sending DATA command");
}
if (!$this->smtp_message($header, $body))
{
return $this->smtp_error("sending message");
}
if (!$this->smtp_eom())
{
return $this->smtp_error("sending <CR><LF>.<CR><LF> [EOM]");
}
if (!$this->smtp_putcmd("QUIT"))
{
return $this->smtp_error("sending QUIT command");
}
return TRUE;
}
function smtp_sockopen($address)
{
if ($this->relay_host == "")
{
return $this->smtp_sockopen_mx($address);
}
else
{
return $this->smtp_sockopen_relay();
}
}
function smtp_sockopen_relay()
{
$this->log_write("Trying to ".$this->relay_host.":".$this->smtp_port."\n");
$this->sock = @fsockopen($this->relay_host, $this->smtp_port, $errno, $errstr, $this->time_out);
if (!($this->sock && $this->smtp_ok()))
{
$this->log_write("Error: Cannot connenct to relay host ".$this->relay_host."\n");
$this->log_write("Error: ".$errstr." (".$errno.")\n");
return FALSE;
}
$this->log_write("Connected to relay host ".$this->relay_host."\n");
return TRUE;;
}
function smtp_sockopen_mx($address)
{
$domain = ereg_replace("^.+@([^@]+)$", "\1", $address);
if (!@getmxrr($domain, $MXHOSTS))
{
$this->log_write("Error: Cannot resolve MX \"".$domain."\"\n");
return FALSE;
}
foreach ($MXHOSTS as $host)
{
$this->log_write("Trying to ".$host.":".$this->smtp_port."\n");
$this->sock = @fsockopen($host, $this->smtp_port, $errno, $errstr, $this->time_out);
if (!($this->sock && $this->smtp_ok()))
{
$this->log_write("Warning: Cannot connect to mx host ".$host."\n");
$this->log_write("Error: ".$errstr." (".$errno.")\n");
continue;
}
$this->log_write("Connected to mx host ".$host."\n");
return TRUE;
}
$this->log_write("Error: Cannot connect to any mx hosts (".implode(", ", $MXHOSTS).")\n");
return FALSE;
}
function smtp_message($header, $body)
{
fputs($this->sock, $header."\r\n".$body);
$this->smtp_debug("> ".str_replace("\r\n", "\n"."> ", $header."\n> ".$body."\n> "));
return TRUE;
}
function smtp_eom()
{
fputs($this->sock, "\r\n.\r\n");
$this->smtp_debug(". [EOM]\n");
return $this->smtp_ok();
}
function smtp_ok()
{
$response = str_replace("\r\n", "", fgets($this->sock, 512));
$this->smtp_debug($response."\n");
if (!ereg("^[23]", $response))
{
fputs($this->sock, "QUIT\r\n");
fgets($this->sock, 512);
$this->log_write("Error: Remote host returned \"".$response."\"\n");
return FALSE;
}
return TRUE;
}
function smtp_putcmd($cmd, $arg = "")
{
if ($arg != "")
{
if($cmd=="")
{
$cmd = $arg;
}
else
{
$cmd = $cmd." ".$arg;
}
}
fputs($this->sock, $cmd."\r\n");
$this->smtp_debug("> ".$cmd."\n");
return $this->smtp_ok();
}
function smtp_error($string)
{
$this->log_write("Error: Error occurred while ".$string.".\n");
return FALSE;
}
function log_write($message)
{
$this->smtp_debug($message);
if ($this->log_file == "")
{
return TRUE;
}
$message = date("M d H:i:s ").get_current_user()."[".getmypid()."]: ".$message;
if (!@file_exists($this->log_file) || !($fp = @fopen($this->log_file, "a")))
{
$this->smtp_debug("Warning: Cannot open log file \"".$this->log_file."\"\n");
return FALSE;;
}
flock($fp, LOCK_EX);
fputs($fp, $message);
fclose($fp);
return TRUE;
}
function strip_comment($address)
{
$comment = "\([^()]*\)";
while (ereg($comment, $address))
{
$address = ereg_replace($comment, "", $address);
}
return $address;
}
function get_address($address)
{
$address = ereg_replace("([ \t\r\n])+", "", $address);
$address = ereg_replace("^.*<(.+)>.*$", "\1", $address);
return $address;
}
function smtp_debug($message)
{
if ($this->debug)
{
echo $message;
}
}
}
感謝您的閱讀,作者小貓不吃漁!