2021年2月21日 星期日

紀明村老師運動檢錄系統程式碼研究心得(二)登入login登出logout與使用者認證

整理:
1.只要會用滑鼠點兩下,用shell 在 ubuntu 16.04 x64 桌面版本快速安裝 運動檢錄系統
https://skjhcreator.blogspot.com/2021/03/shell-ubuntu-1604-x64.html
2.紀明村老師運動會競賽檢錄系統更新模組_學生帳號管理模組
https://skjhcreator.blogspot.com/2021/03/blog-post.html
3.二林國小紀明村老師的二林網管 PDO + SQLite 程式寫作工具箱2014.07
https://skjhcreator.blogspot.com/2021/03/pdo-sqlite-201407.html
4.用shell 在CentOS 7 minimal 64位元 安裝 紀明村老師的運動會檢錄系統
https://skjhcreator.blogspot.com/2021/02/shell-centos-7-minimal-64.html
5.紀明村老師的運動檢錄系統程式碼研究心得(一)介接CloudSchool與mysql資料庫
https://skjhcreator.blogspot.com/2021/03/cloudschoolmysql.html
6.紀明村老師運動檢錄系統程式碼研究心得(二)登入login登出logout與使用者認證
https://skjhcreator.blogspot.com/2021/02/loginlogout.html
7.紀明村老師運動檢錄系統程式碼研究心得(三)smarty
https://skjhcreator.blogspot.com/2021/02/smarty.html


20210131
    第二次看紀老師的程式,才終於懂了。這一次看了3天,總看著login.php。卻忘了要從index.php開始看。才知道要從index.php來看,並將之畫成上圖。也才懂了,為什麼原先的login.php.html裡,要將form action到{{$smarty.server.SCRIPT_NAME}}?
而這個{{$smarty.server.SCRIPT_NAME}}就是"包含當前腳本的路徑",其意義就是index.php。

20210120
    寫在前頭。老實說,要寫出這篇,自己完全不知道要從何開始。只能從這個檔案login.php.html開始寫起。
檔案名稱:login.php.html
檔案內容:
{{include file=$this->pagehead}}
<center style='font-size:10pt;'>
<img src='img/109.0209.jpg'>
<br>
 <form action='{{$smarty.server.SCRIPT_NAME}}' 
       method='post' name='f1' autocomplete='off'>
  <table width="800" align="center">
   <tr class="style8">
     <td width=35% align=center>
           <a href="https://gsuite.chc.edu.tw" target="_blank">
       <img src="img/gsuite_logo.png">
           </a>
     </td>
     <td width=65%> 
     </td>
   </tr>
   <tr class="style8">
     <td width=35% align=center>
    <font color="#FF0000">*</font>帳號:
     </td>
     <td width=65%>
   <input type='text' name='user' value='' size=10 
                placeholder="教育處 Gsuite 帳號">@chc.edu.tw
     </td>
   </tr>
   <tr class="style8">
     <td align=center>
<font color="#FF0000">*</font>密碼:
     </td>
     <td>
         <input type='password' name='pass' value='' size=16 
                placeholder="學籍系統/OpenID 密碼">
     </td>
   </tr>
   <tr class="style8">
     <td align=center>
       <font color="#FF0000">*</font>驗證碼:
     </td>
     <td>
       <img src="pass_img.php" border="0" name="pimg" 
            onclick="this.src='pass_img.php?'+ Math.random();">
       <input type=text name="CHK"  size=6  value='' class=tbox>
       <br>
      <label>
       <input type="radio" name="kind" value="G" checked>GSuite登入
      </label>
      <label>
       <input type="radio" name="kind" value="L">本機登入
      </label>
     </td>
   </tr>
   <tr>
     <td colspan=2 align=center>
       <input type='hidden' name='form_act' value=''>
       <input type='hidden' name='token' value='{{$this->token}}'>
       <input type='hidden' name='chk1' value=''>
       <input type='hidden' name='chk2' value=''>
       <input type='button'  class="button" value='-=系統登入=-' 
              onclick="if( window.confirm('確定登入?確定?')){
                         f1_sumit();
                      }" 
              style='font-size:20px;
                     background-color:#FFFFFF;
                     border:2px #003C9D solid;'>
     </td>
    </tr>
   </table>
  </form>
<script LANGUAGE='JavaScript' TYPE='text/javascript'>
function f1_sumit() {
var U=f1.user.value;
var P=f1.pass.value;
var C=f1.CHK.value;
if ( U=='' || P=='' || C=='') {
           alert('請輸入帳號密碼!');
           return ;
        }
f1.form_act.value='login';
f1.submit();
 }
</script>
{{include file=$this->pagefoot}}

   這時發現共有三個資料要填寫,分別是帳號:密碼:驗證碼:。其中帳號亦還有分成兩種,本地端彰化Gsuite兩種。
   現在我們將其縮減只剩下彰化Gsuite帳號密碼與Smarty,並移除背景、圖片、字型。讓程式碼變得簡單,好讓我們看清楚整個架構。
檔案名稱:login.html
檔案內容:
<html>
 <head>
  <meta http-equiv='CONTENT-TYPE' 
        content='text/html; charset=UTF-8'>
   <title>login與logout</title>
  <meta name='generator' content='Script By 二林網管程式產生器'>
 </head>
 <body>
  <center>
   <form action='{{$smarty.server.SCRIPT_NAME}}' 
         method='post' name='f1' autocomplete='off'>
    <table width="800" align="center">
    <tr>
 <td width=35% align=center>
     </td>
     <td width=65%> 
     </td>
    </tr>
    <tr>
 <td width=35% align=center>
  帳號:
 </td>
 <td width=65%>
    <input type='text' name='user' value='' 
      size=10 placeholder="教育處 Gsuite 帳號">@chc.edu.tw
 </td>
    </tr>
    <tr>
 <td align=center>
  密碼:
 </td>
 <td>
           <input type='password' name='pass' value='' 
             size=16 placeholder="學籍系統/OpenID 密碼">
     </td>
    </tr>
    <tr>
 <td align=center>
 </td>
 <td>
      <label>
   <input type="radio" name="kind" value="G" checked>GSuite登入
      </label>
     </td>
    </tr>
    <tr>
 <td colspan=2 align=center>
      <input type='hidden' name='form_act' value=''>
      <input type='hidden' name='chk1' value=''>
      <input type='hidden' name='chk2' value=''>
      <input type='button'  class="button" value='-=系統登入=-' 
             onclick="
             if( window.confirm('確定登入?確定?')){
               f1_sumit();
             }" >
     </td>
    </tr>
   </table>
  </form>
  <script LANGUAGE='JavaScript' TYPE='text/javascript'>
  function f1_sumit() {
var U=f1.user.value;
var P=f1.pass.value;
if ( U=='' || P=='' ) {
 alert('請輸入帳號密碼!');return ;
}
f1.form_act.value='login';
f1.submit();
}
  </script>
  <br>
   <div align='center' >
    Script By 二林網管 PDO + SQLite 程式寫作工具箱2020.01
   </div>
 </body>
</html>
呈現在網頁的樣子
   接下來,配合login.html來修改login.php。
檔案名稱:login.php
檔案內容:



   
 
資料來源:



 

沒有留言:

張貼留言

Laravel 12 Model 資料庫中的資料表,並提供與資料庫互動的介面

相關系列文章: 1. 在 windows 10 安裝 laravel 12 studentManagement環境與設定 2. laravel 12 route 路由 3. laravel 12 Blade Templates 網頁模版 4. laravel 12 Control...