標籤

bat (54) 作品 (41) python (24) shell (17) windows (11) 虛擬機 (11) php (10) CPP (6) KMS (6) 程式設計 (6) docker (5) 使用教學 (5) xoops (4) 公文 (4) Apache2 (3) Excel (3) juniper (3) 資料庫 (3) 轉檔 (3) mysql (2) 免動手 (2) 資料結構 (2) 軟體廣播 (2) 電腦維修 (2) Android Studio (1) Apple IPAD管理 (1) Arduino (1) CSS (1) LAMP (1) NAS (1) Ubuntu (1) VHD (1) Windows Server (1) 原因 (1) 程式應用 (1) 程式積木 (1) 編輯器 (1) 雲端硬碟 (1)

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
檔案內容:



   
 
資料來源:



 

沒有留言:

張貼留言

只要點兩下,就能夠將InputAndOutput資料夾底下的子子孫孫資料夾內所有Word通通轉成PDF

  系列文章: 1. 只要點兩下,就能將一堆的Doc與Docx 轉成 PDF 1. https://skjhcreator.blogspot.com/2023/05/docdocx-pdf.html 2. 只要點兩下,就能將一堆的JPG轉成一個PDF,並以JPG所在的資料夾名稱為...