Home > Backend Development > PHP Tutorial > Detailed introduction to login, registration and password modification functions implemented in PHP

Detailed introduction to login, registration and password modification functions implemented in PHP

黄舟
Release: 2023-03-06 07:30:02
Original
10736 people have browsed it

The example in this article describes how to implement login, registration and password modification functions in PHP. Share it with everyone for your reference, the details are as follows:
Here is the interface layout and function implementation of registration, login, and password change:
1. Login

Detailed introduction to login, registration and password modification functions implemented in PHP
2. Forgot password
Detailed introduction to login, registration and password modification functions implemented in PHP
3. Free registration
Detailed introduction to login, registration and password modification functions implemented in PHP
Page layout:

<p id="views" class="views">
  <p id="view-login" class="page-view view-login active">
    <present name="wxuser">
      <p id="wxuser" class="form-group text-center">
        <p>
          <img src="{sh:$wxuser.headimgurl}">
        </p>
        <h4 class="nickname">{sh:$wxuser.nickname}</h4>
      </p>
    </present>
    <!--登录-->
    <p id="login" class="step">
      <h4 class="popup-title login">登录</h4>
      <p class="go-forget">忘记密码</p>
      <form class="form-horizontal" role="form" type="get">
        <p class="form-group">
          <label>手机号码</label>
          <input type="tel" name="tel" class="form-item" id="tel_num" placeholder="请输入手机号码" value="">
        </p>
        <p class="form-group">
          <label>登录密码</label>
          <input type="password" name="password" class="form-item" placeholder="请填写密码">
        </p>
        <p class="js-help-info error"></p>
      </form>
      <p class="popup-options">
        <button type="button" class="btn btn-block btn-success js-login">确认</button>
      </p>
      <p class="go-register">免费注册</p>
    </p>
    <!--注册-->
    <p id="register" class="step" style="display:none;">
      <h4 class="popup-title">注册账号</h4>
      <form role="form" class="form-horizontal">
        <p class="form-group">
          <label>手机号码</label>
          <input type="tel" name="tel" class="form-item" id="tel_num" placeholder="请输入手机号码" value="">
        </p>
        <p class="form-group form-group-r">
          <label>验证码</label>
          <button class="btn-sm btn-white js-sms-code" type="button">获取验证码</button>
          <input type="text" placeholder="请填写验证码" class="form-item" name="smscode" />
        </p>
        <p class="form-group">
          <label>登录密码</label>
          <input type="password" placeholder="设置登录密码" class="form-item" name="password" maxlength="30">
        </p>
        <p class="form-group">
          <label>确认密码</label>
          <input type="password" placeholder="确认登录密码" class="form-item" name="re_password" maxlength="30">
        </p>
        <p class="js-help-info error">
        </p>
      </form>
      <p class="popup-options">
        <button type="button" class="btn btn-block btn-success js-register">确认</button>
      </p>
      <p class="go-login">立即登录</p>
    </p>
    <!--修改密码-->
    <p id="changePwd" class="step" style="display:none;">
      <h4 class="popup-title">修改密码</h4>
      <form role="form" class="form-horizontal">
        <p class="form-group">
          <label>手机号码</label>
          <input type="tel" name="tel" class="form-item" id="tel_num" placeholder="请输入手机号码" value="">
        </p>
        <p class="form-group form-group-r">
          <label>验证码</label>
          <button class="btn-sm btn-white js-sms-excode" type="button">获取验证码</button>
          <input type="text" placeholder="请填写验证码" class="form-item" name="smscode" />
        </p>
        <p class="form-group">
          <label>新密码</label>
          <input type="password" placeholder="设置登录密码" class="form-item" name="password" maxlength="30">
        </p>
        <p class="form-group">
          <label>确认密码</label>
          <input type="password" placeholder="确认登录密码" class="form-item" name="re_password" maxlength="30">
        </p>
        <p class="js-help-info error">
        </p>
      </form>
      <p class="popup-options">
        <button type="button" class="btn btn-block btn-success js-changePwd">确认</button>
      </p>
      <p class="go-login">立即登录</p>
    </p>
  </p>
</p>
Copy after login

js processing:

<script type="text/javascript">
var tel = &#39;&#39;;
$(function() {
  var check = {
    checkPwd: function(password) {
      if (typeof password == &#39;undefined&#39; || password == &#39;&#39;) {
        return false;
      }
      return true;
    },
    checkSmscode: function(code) {
      if (typeof code == &#39;undefined&#39; || code == &#39;&#39;) {
        return false;
      }
      return true;
    },
    validTel: function(value) {
      return /^((\+86)|(86))?(1)\d{10}$/.test(&#39;&#39; + value);
    }
  }
  //登录
  $(".js-login").click(function() {
    var tel = $("#login").find("input[name=&#39;tel&#39;]").val();
    if (!check.validTel(tel)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入正确的手机号&#39;); //**提示下个页面还有
      return false;
    }
    var password = $("#login").find("input[name=&#39;password&#39;]").val();
    if (!check.checkPwd(password)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入密码&#39;);
      return false;
    }
    $(&#39;.js-login&#39;).attr("disabled", "disabled");
    $.ajax({
      url: "{sh::U(&#39;Home/userLogin&#39;)}",
      type: &#39;POST&#39;,
      dataType: "json",
      data: {
        tel: tel,
        password: password
      },
      success: function(response) {
        if (response.result) {
          location.href = response.href;
        } else {
          setTimeout(function() {
            $(&#39;.js-login&#39;).removeAttr("disabled");
          }, 500);
          $(&#39;.js-help-info&#39;).html(response.error);
        }
      },
      error: function() {
        $(&#39;.js-help-info&#39;).html("请求失败");
      }
    });
  });
  //注册
  $(".js-register").click(function() {
    var tel = $("#register").find("input[name=&#39;tel&#39;]").val();
    if (!check.validTel(tel)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入正确的手机号&#39;); //**提示下个页面还有
      return false;
    }
    var password = $("#register input[name=&#39;password&#39;]").val();
    var smscode = $("#register input[name=&#39;smscode&#39;]").val();
    var re_password = $("#register input[name=&#39;re_password&#39;]").val();
    if (!check.checkSmscode(smscode)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入验证码&#39;);
      return false;
    }
    if (!check.checkPwd(password)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入登录密码&#39;);
      return false;
    }
    if (!check.checkPwd(re_password)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入确认密码&#39;);
      return false;
    } else if (password != re_password) {
      $(&#39;.js-help-info&#39;).html(&#39;两次输入的密码不一致&#39;);
      return false;
    }
    $(&#39;.js-login&#39;).attr("disabled", "disabled");
    $.ajax({
      url: "{sh::U(&#39;Home/userRegister&#39;)}",
      type: &#39;POST&#39;,
      dataType: "json",
      data: {
        tel: tel,
        password: password,
        smscode: smscode
      },
      success: function(response) {
        if (response.result) {
          location.href = response.href;
        } else {
          setTimeout(function() {
            $(&#39;.js-login&#39;).removeAttr("disabled");
          }, 500);
          $(&#39;.js-help-info&#39;).html(response.error);
        }
      },
      error: function() {
        $(&#39;.js-help-info&#39;).html("请求失败");
      }
    });
  });
  //发送验证码
  $(&#39;.js-sms-code&#39;).click(function() {
    var tel = $(&#39;#register #tel_num&#39;).val();
    if (!check.validTel(tel)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入正确的手机号&#39;); //**提示下个页面还有
      return false;
    }
    // 检测是否已经注册
    $.ajax({
      url: "{sh::U(&#39;Home/checkTel&#39;)}",
      type: &#39;POST&#39;,
      dataType: "json",
      async: false,
      data: {
        tel: tel
      },
      success: function(json) {
        checkRes = json.status;
      },
      error: function(json) {
        $(&#39;.js-help-info&#39;).html("发送失败");
      }
    });
    if (checkRes == 1) {
      $(&#39;.js-help-info&#39;).html("已是注册用户");return false;
    }
    if (checkRes == 3) {
      $(&#39;.js-help-info&#39;).html("错误的请求");return false;
    }
    $(this).attr("disabled", "disabled").html("<span style=&#39;color:#666&#39;><span id=&#39;countdown&#39;>60</span>s 后再试</span>");
    countdown();
    $.ajax({
      url: "{sh::U(&#39;Home/sendSmscode&#39;)}",
      type: &#39;POST&#39;,
      dataType: "json",
      data: {
        tel: tel
      },
      success: function() {},
      error: function() {
        $(&#39;.js-help-info&#39;).html("发送失败");
      }
    });
  });
  //修改密码
  $(&#39;.go-forget&#39;).click(function() {
    var tel = $(&#39;#login #tel_num&#39;).val();
    $("#login").hide();
    $("#register").hide();
    $("#changePwd").show();
    $("#changePwd #tel_num").val(tel).focus();
    $(&#39;.js-help-info&#39;).html(&#39;&#39;);
  });
  //免费注册
  $(&#39;.go-register&#39;).click(function() {
    var tel = $(&#39;#login #tel_num&#39;).val();
    $("#login").hide();
    $("#changePwd").hide();
    $("#register").show();
    $("#register #tel_num").val(tel).focus();
    $(&#39;.js-help-info&#39;).html(&#39;&#39;);
  });
  //立即登录
  $(&#39;#changePwd .go-login&#39;).click(function() {
    var tel = $(&#39;#changePwd #tel_num&#39;).val();
    $("#register").hide();
    $("#changePwd").hide();
    $("#login").show();
    $("#login #tel_num").val(tel).focus();
    $(&#39;.js-help-info&#39;).html(&#39;&#39;);
  });
  //立即登录
  $(&#39;#register .go-login&#39;).click(function() {
    var tel = $(&#39;#register #tel_num&#39;).val();
    $("#register").hide();
    $("#changePwd").hide();
    $("#login").show();
    $("#login #tel_num").val(tel).focus();
    $(&#39;.js-help-info&#39;).html(&#39;&#39;);
  });
  $(&#39;.js-changePwd&#39;).click(function() {
    var tel = $("#changePwd").find("input[name=&#39;tel&#39;]").val();
    if (!check.validTel(tel)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入正确的手机号&#39;); //**提示下个页面还有
      return false;
    }
    var password = $("#changePwd input[name=&#39;password&#39;]").val();
    var smscode = $("#changePwd input[name=&#39;smscode&#39;]").val();
    var re_password = $("#changePwd input[name=&#39;re_password&#39;]").val();
    if (!check.checkSmscode(smscode)) {
      $(&#39;#changePwd .js-help-info&#39;).html(&#39;请输入验证码&#39;);
      return false;
    }
    if (!check.checkPwd(password)) {
      $(&#39;#changePwd .js-help-info&#39;).html(&#39;请输入新密码&#39;);
      return false;
    }
    if (!check.checkPwd(re_password)) {
      $(&#39;#changePwd .js-help-info&#39;).html(&#39;请输入确认密码&#39;);
      return false;
    } else if (password != re_password) {
      $(&#39;#changePwd .js-help-info&#39;).html(&#39;两次输入的密码不一致&#39;);
      return false;
    }
    $.ajax({
      url: "{sh::U(&#39;Home/changePwd&#39;)}",
      type: "POST",
      dataType: "json",
      data: {
        tel: tel,
        password: password,
        smscode: smscode
      },
      success: function(response) {
        if (response.result) {
          location.href = response.href;
        } else {
          setTimeout(function() {
            $(&#39;.js-login&#39;).removeAttr("disabled");
          }, 500);
          $(&#39;.js-help-info&#39;).html(response.error);
        }
      },
      error: function() {
        $(&#39;.js-help-info&#39;).html("请求失败");
      }
    });
  });
  //发送短信修改密码
  $(&#39;.js-sms-excode&#39;).click(function() {
    var tel = $(&#39;#changePwd #tel_num&#39;).val();
    if (!check.validTel(tel)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入正确的手机号&#39;); //**提示下个页面还有
      return false;
    }
    // 检测是否已经注册
    $.ajax({
      url: "{sh::U(&#39;Home/checkTel&#39;)}",
      type: &#39;POST&#39;,
      dataType: "json",
      async: false,
      data: {
        tel: tel
      },
      success: function(json) {
        checkRes = json.status;
      },
      error: function(json) {
        $(&#39;.js-help-info&#39;).html("发送失败");
      }
    });
    if (checkRes == 2) {
      $(&#39;.js-help-info&#39;).html("号码尚未注册");return false;
    }
    if (checkRes == 3) {
      $(&#39;.js-help-info&#39;).html("错误的请求");return false;
    }
    $(this).attr("disabled", "disabled").html("<span style=&#39;color:#666&#39;><span id=&#39;countdown&#39;>60</span>s 后再试</span>");
    countdown();
    $.ajax({
      url: "{sh::U(&#39;Home/sendSmsexcode&#39;)}",
      type: &#39;POST&#39;,
      dataType: "json",
      data: {
        tel: tel
      },
      success: function(data) {},
      error: function() {
        $(&#39;.js-help-info&#39;).html("请求失败");
      }
    });
  });
});
function countdown() { // 递归 验证码倒计时
  setTimeout(function() {
    var time = $("#countdown").text();
    if (time == 1) {
      $(&#39;.js-sms-code&#39;).removeAttr("disabled");
      $(&#39;.js-sms-code&#39;).html("发送验证码");
      $(&#39;.js-sms-excode&#39;).removeAttr("disabled");
      $(&#39;.js-sms-excode&#39;).html("发送验证码");
    } else {
      $("#countdown").text(time - 1);
      countdown();
    }
  }, 1000);
}
</script>
Copy after login

php background Processing:

//用户登录
public function userLogin() {
  if(IS_AJAX && !$this->member) {
   $tel = $this->_post(&#39;tel&#39;, &#39;trim&#39;);
   $password = $this->_post(&#39;password&#39;, &#39;trim,md5&#39;);
   $member = M(&#39;Member&#39;)->where(array(&#39;tel&#39; => $tel))->find();
   if ($member && $member[&#39;password&#39;] === $password) {
    //检测是否存在微信用户需要绑定
    if ($member[&#39;wxuser_id&#39;] == 0 && $this->wxuser) {
     M(&#39;Member&#39;)->where(array(&#39;id&#39; => $member[&#39;id&#39;]))->save(array(&#39;wxuser_id&#39; => $this->wxuser_id));
    }
    $href = session(LASTREQUEST);
    session(MEMBER, $member[&#39;id&#39;]);
    session(LASTREQUEST, null);
    $this->ajaxReturn(array(&#39;result&#39; => true, &#39;href&#39; => $href ? $href : U(&#39;Member/index&#39;)));
   } else {
    if (empty($member)) {
     $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;手机号尚未注册.&#39;));
    } else {
     $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;密码不正确.&#39;));
    }
   }
  } else {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;非法请求.&#39;));
  }
}
// 用户退出
public function userLogout() {
  session(WXUSER, null);
  session(MEMBER, null);
  $this->success(&#39;退出成功&#39;,U(&#39;Store/Member/index&#39;));
}
// 用户注册
public function userRegister() {
  $tel = $this->_post(&#39;tel&#39;, &#39;trim&#39;);
  $password = $this->_post(&#39;password&#39;, &#39;trim,md5&#39;);
  $smscode = $this->_post(&#39;smscode&#39;, &#39;trim&#39;);
  $session_smscode = session($this->smscode);
  $user_exit = M(&#39;Member&#39;)->where(array(&#39;tel&#39; => $tel))->find();
  if (!preg_match("/1[3458]{1}\d{9}$/", $tel) && $user_exit) {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;手机号不合法&#39;));
  }
  $memberModel = M(&#39;Member&#39;);
  // 检测是否已注册
  $member = $memberModel-> where(array(&#39;tel&#39; =>$tel,&#39;status&#39;=>1))->find();
  if (!empty($member)) {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;已是注册用户&#39;));
  }
  if (time() > $session_smscode[&#39;time&#39;] || $smscode != $session_smscode[&#39;code&#39;]) {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;验证码不正确&#39;)); //--调试,先把验证功能关闭
  }
  $data = array(&#39;tel&#39; => $tel, &#39;password&#39; => $password, &#39;wxuser_id&#39; => intval($this->wxuser_id), &#39;addtime&#39; => time());
  $insert_id = $memberModel->add($data);
  if ($insert_id) {
   $href = session(LASTREQUEST);
   session(MEMBER, $insert_id); //*****只是一个id值
   $this->ajaxReturn(array(&#39;result&#39; => true, &#39;href&#39; => $href ? $href : U(&#39;Member/index&#39;)));
  } else {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;操作失败&#39;, &#39;msg&#39; => M(&#39;Member&#39;)->getError()));
  }
}
//用户更改密码
public function changePwd(){
  $tel = $this->_post(&#39;tel&#39;,&#39;trim&#39;);
  $password = $this ->_post(&#39;password&#39;,&#39;trim&#39;);
  $smscode = $this ->_post(&#39;smscode&#39;,&#39;trim&#39;);
  $session_smscode = session($this ->smscode);
  if (time() > $session_smscode[&#39;time&#39;] || $smscode != $session_smscode[&#39;code&#39;]) {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;验证码不正确&#39;)); //--调试成功
  }
  $data = array(&#39;password&#39; => md5($password), &#39;addtime&#39; => time());
  $memberModel = M(&#39;Member&#39;);
  // 检测是否已注册
  $member = $memberModel-> where(array(&#39;tel&#39; =>$tel,&#39;status&#39;=>1))->find();
  if (empty($member)) {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;号码尚未注册&#39;));
  }
  if ($memberModel->where(array(&#39;tel&#39;=> $tel))->save($data)) {
   $href = session(LASTREQUEST);
   session(MEMBER, $member[&#39;id&#39;]);
   $this->ajaxReturn(array(&#39;result&#39; => true, &#39;href&#39; => $href ? $href : U(&#39;Member/index&#39;)));
  } else {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;操作失败&#39;, &#39;msg&#39; => M(&#39;Member&#39;)->getError()));
  }
}
// ajax检测号码是否注册
public function checkTel() {
  $tel = $this->_post(&#39;tel&#39;, &#39;trim&#39;);
  if (IS_AJAX && preg_match("/1[3458]{1}\d{9}$/",$tel)) {
   $memberModel = M(&#39;Member&#39;);
   $member = $memberModel->where(array(&#39;tel&#39;=>$tel,&#39;status&#39;=>1))->find();
   if (!empty($member)) {
    $this->ajaxReturn(array(&#39;status&#39; => 1, &#39;info&#39; => &#39;已注册&#39;));
   } else {
    $this->ajaxReturn(array(&#39;status&#39; => 2, &#39;info&#39; => &#39;未注册&#39;));
   }
  } else {
   $this->ajaxReturn(array(&#39;status&#39; => 3, &#39;info&#39; => &#39;错误的请求&#39;));
  }
}
//发送注册验证码
public function sendSmscode() {
  session($this->smstime, null);
  $smstime = session($this->smstime);
  $tel = $this->_post(&#39;tel&#39;, &#39;trim&#39;);
  if (IS_AJAX && (!$smstime || time() > $smstime) && preg_match("/1[3458]{1}\d{9}$/",$tel)) {
   $smscode = rand(1000, 9999);
   //发送验证码
   require LIB_PATH . &#39;ORG/Taobao-sdk-php/TopSdk.php&#39;;
   $c = new TopClient;
   $c->appkey = &#39;23307560&#39;; // 原23294081
   $c->secretKey = &#39;21ef24dd4c51e20693c5db0983c433e7&#39;; // 原0402169f466d8fed780e7f07edd25177
   $req = new AlibabaAliqinFcSmsNumSendRequest;
   $req->setSmsType("normal");
   $req->setSmsFreeSignName("注册验证");
   $req->setSmsParam(&#39;{"code":"&#39;. $smscode .&#39;","product":"【多多助店宝】"}&#39;);
   $req->setRecNum("{$tel}");
   $req->setSmsTemplateCode("SMS_5056863");
   $resp = $c->execute($req);
   if(!$resp->code) {
    //设置发送限制时间
    session($this->smstime, time() + 50);
    //设置验证码5分钟内有效
    session($this->smscode, array(&#39;code&#39; => $smscode, &#39;time&#39; => time() + 600));
   } else {
    //发送失败写入日志文件
    $log = date(&#39;Y-m-d H:i:s&#39;) . " 发送失败 sub_code:{$resp->sub_code} sub_msg:{$resp->sub_msg}" . PHP_EOL;
    file_put_contents(RUNTIME_PATH . &#39;Log/smscode.log&#39;, $log, FILE_APPEND);
   }
   $this->ajaxReturn(array(&#39;result&#39; => !$resp->code));
  } else {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;错误的请求&#39;));
  }
}
//发送修改密码验证码
public function sendSmsexcode(){
  session($this->smstime, null);
  $smstime = session($this->smstime);
  $tel = $this->_post(&#39;tel&#39;, &#39;trim&#39;);
  if (IS_AJAX && (!$smstime || time() > $smstime) && preg_match("/1[3458]{1}\d{9}$/",$tel)) {
   $smscode = rand(1000, 9999);
   //发送验证码
   require LIB_PATH . &#39;ORG/Taobao-sdk-php/TopSdk.php&#39;;
   $c = new TopClient;
   $c->appkey = &#39;23307560&#39;; // 原23294081
   $c->secretKey = &#39;21ef24dd4c51e20693c5db0983c433e7&#39;; // 原0402169f466d8fed780e7f07edd25177
   $req = new AlibabaAliqinFcSmsNumSendRequest;
   $req->setSmsType("normal");
   $req->setSmsFreeSignName("变更验证"); //短信签名固定,不可以换其他字
   $req->setSmsParam(&#39;{"code":"&#39;. $smscode .&#39;","product":"【多多助店宝】"}&#39;);
   $req->setRecNum("{$tel}");
   $req->setSmsTemplateCode("SMS_5056861");
   $resp = $c->execute($req);
   if(!$resp->code) {
    //设置发送限制时间
    session($this->smstime, time() + 50);
    //设置验证码5分钟内有效
    session($this->smscode, array(&#39;code&#39; => $smscode, &#39;time&#39; => time() + 600));
   } else {
    //发送失败写入日志文件
    $log = date(&#39;Y-m-d H:i:s&#39;) . " 发送失败 sub_code:{$resp->sub_code} sub_msg:{$resp->sub_msg}" . PHP_EOL;
    file_put_contents(RUNTIME_PATH . &#39;Log/smscode.log&#39;, $log, FILE_APPEND);
   }
   $this->ajaxReturn(array(&#39;result&#39; => !$resp->code));
  } else {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;错误的请求&#39;));
  }
}
Copy after login

Summary:
1. SMS verification is used to register and change passwords.
2. For security reasons, front-end ajax verification. The backend also performs validation.
3. The process is reasonable and can be switched freely.
4. Comprehensive functions, including login, registration, and password modification.

The above is a detailed introduction to the login, registration and password modification functions implemented by PHP. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template