ε=(・д・`*)ハァ 看完这篇文章你会收获什么?下图为最终效果,图片中会自带水印,不是广告 ,毕竟 防狼防盗防伸手党嘛。(●´∀`●) 当然啦,哈哈这个模板我也不知道当初是从哪里盗来的,嘿嘿,东凑凑西凑凑。
看完图后如果这个功能对你有帮助你有两个选择๑乛◡乛๑
选择一: 加群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文件夹
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 此文件请自行百度下载。
进入images文件 创建banner.jpg 粘贴下图进去就好了
打开index.html 看看效果
OK完美,前端搞定,那么开始我们的php代码吧。
返回入口目录
注意了:这里的代码不是纯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 href='http://wx.guanfumuseum.org.cn/weiphp/apply.docx'>技术群养老申请表.docx</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;
}
}
}
感谢您的阅读,作者小猫不吃渔!