Miễn 100% phí hồ sơ du học Nhật + Tặng 5~9 triệu/bạn

Sunday, February 4, 2018

Nhật ký làm trang Login page

Phạm trù: Lập trình (programming)

Đại nghĩa của hôm nay là gì?
今日の大義はなんでしょう。

Lại nói về lập trình: Tôi chắc chắn chẳng biết gì về lập trình cả! Tôi chỉ lợi dụng trí tuệ nhân tạo Google để học tập thôi. Điều quan trọng vẫn là TƯ DUY LẬP TRÌNH và LÝ TƯỞNG LẬP TRÌNH.

Bạn học đại học là để có khả năng tư duy và khả năng học tập. Tôi có khả năng này thông qua việc du học Nhật Bản.

Chém gió: Lập trình ngày nay gần như là bắt buộc trong mọi công việc, nếu không hiệu suất sẽ rất thấp và không cạnh tranh được với máy móc nữa. Các bạn cần bắt đầu học lập trình sớm.
Tôi dự đoán sắp tới môn lập trình sẽ là môn bắt buộc trong các trường học VN. Bạn cũng có thể mở trường tư dạy lập trình và xây dựng sự nghiệp được đấy.

Lý tưởng lập trình: Vì sao cần trang Login Page?

Để tạo màn hình quản lý (CMS = content management system) nhằm quản lý nội dung mà chỉ riêng bạn truy cập được. Chắc chắn bạn không hề muốn "bàn tay lông lá" nào đó can thiệp vào hệ thống của bạn. Người dùng trang web thì chỉ nên xem kết quả sau cùng thôi, vì system của bạn đâu phải chế độ dân chủ?

Trang Login Page nhìn kiểu này:

Nếu Login Name hoặc Password sai sẽ bị báo lỗi

Công cụ  và cách làm trang Login Page vối PHP

Tôi chạy thử trên Localhost, do đó:
- Máy đã cài XAMPP (Apache + PHP + MySQL vv)
- Từ ứng dụng XAMPP sẽ mở PHP MyAdmin để tạo database (DB) và user kết nối DB

Tài liệu để bắt chước: PHP - MySQL Login //tutorialspoint

Tuy nhiên, khi bạn bắt chước thì sẽ bị một loạt lỗi, nên phải biết cách sửa lỗi, hơn nữa, tài liệu không hướng dẫn bạn tạo DB nữa, nên cũng sẽ bị báo lỗi.

Debug một số lỗi như sau:
Warning: mysqli_connect(): (HY000/2002): No connection could be made because the target machine actively refused it. in C:\xampp\htdocs\test\config.php on line 6
=> Lỗi dòng define('DB_SERVER', 'localhost:3036'); sửa lại là: define('DB_SERVER', 'localhost');
Notice: Undefined variable: error in C:\xampp\htdocs\test\login.php on line 66
=> Lỗi không định nghĩa biến $error => Debug: Thêm $error = ""; vào ngay sau session_start(); (dòng 3 file login.php)
Fatal error: Uncaught Error: Call to undefined function session_register() in C:\xampp\htdocs\test\login.php:23 Stack trace: #0 {main} thrown in C:\xampp\htdocs\test\login.php on line 23
=> PHP version hiện tại không dùng hàm session_register() nữa => Debug: Comment out thành // session_register("myusername");

Hướng dẫn full cách làm Login page đơn giản và ăn sẵn

Step 1: Tạo thư mục "test" trong C:\xampp\htdocs\
(C:\xampp\htdocs\ là thư mục chính public_html của localhost, khi gõ localhost lên trình duyệt như Chrome vv sẽ chạy file trong thư mục này).

Thư mục của chúng ta là: C:\xampp\htdocs\test\

Chúng ta sẽ chạy thử tại đây. Khi truy cập từ trình duyệt sẽ là địa chỉ localhost/test.

Step 2: Tạo DB (database) và user truy cập DB

Từ XAMPP nhấp Admin của MySQL để mở PHP MyAdmin.



Từ home của PHPMyAdmin (hình ngôi nhà) chọn tab User accounts => Add user account

User = testdb => Check tạo luôn DB cùng tên "testdb"
Host = Local => Host name = localhost
Password = dbpass

Sau đó Edit priveledges để cấp quyền sao cho Grant = Nhẽ.

Tóm lại:
DB = testdb
User = testdb
Host = localhost
Pass = dbpass

Step 3: Tạo table lưu thông tin đăng nhập

Table name = admin
Fields: id (INT, PRIMARY, AI = auto incremented), username (VARCHAR 100, UNIQUE), passcode (VARCHAR 100), active (INT)

Tạo bản ghi ví dụ username = testadmin, passcode = testpass

Look like this:


Step 4: Tạo các file PHP để thực hiện

Trong thư mục test nhé! Chỗ đánh dấu vàng là tôi sửa để code chạy được.

config.php
<?php
   //define('DB_SERVER', 'localhost:3036');
   define('DB_SERVER', 'localhost');

   define('DB_USERNAME', 'testdb');
   define('DB_PASSWORD', 'dbpass');
   define('DB_DATABASE', 'testdb');
   $db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>
login.php
<?php
   include("config.php");
   session_start();
 
   $error = "";
   if($_SERVER["REQUEST_METHOD"] == "POST") {
      // username and password sent from form
   
      $myusername = mysqli_real_escape_string($db,$_POST['username']);
      $mypassword = mysqli_real_escape_string($db,$_POST['password']);
   
      //$sql = "SELECT id FROM admin WHERE username = '$myusername' and passcode = '$mypassword'";
  $sql = "SELECT * FROM admin WHERE username = '$myusername' and passcode = '$mypassword'";
      $result = mysqli_query($db,$sql);
      $row = mysqli_fetch_array($result,MYSQLI_ASSOC);
      $active = $row['active'];
   
      $count = mysqli_num_rows($result);
   
      // If result matched $myusername and $mypassword, table row must be 1 row
      if($count == 1) {
        // session_register("myusername");
         $_SESSION['login_user'] = $myusername;
       
         header("location: welcome.php");
      }else {
         $error = "Your Login Name or Password is invalid";
      }
   }
?>
<html>
   <head>
      <title>Login Page</title>
      <style type = "text/css">
         body {
            font-family:Arial, Helvetica, sans-serif;
            font-size:14px;
         }
         label {
            font-weight:bold;
            width:100px;
            font-size:14px;
         }
         .box {
            border:#666666 solid 1px;
         }
      </style>
   </head>
   <body bgcolor = "#FFFFFF">
      <div align = "center">
         <div style = "width:300px; border: solid 1px #333333; " align = "left">
            <div style = "background-color:#333333; color:#FFFFFF; padding:3px;"><b>Login</b></div>             <div style = "margin:30px">
               <form action = "" method = "post">
                  <label>UserName  :</label><input type = "text" name = "username" class = "box"/><br /><br />
                  <label>Password  :</label><input type = "password" name = "password" class = "box" /><br/><br />
                  <input type = "submit" value = " Submit "/><br />
               </form>
               <div style = "font-size:11px; color:#cc0000; margin-top:10px"><?php echo $error; ?</div>
            </div>          </div>       </div>
   </body>
</html>
welcome.php
<?php
   include('session.php');
?>
<html>
   <head>
      <title>Welcome </title>
   </head>
   <body>
      <h1>Welcome <?php echo $login_session; ?></h1>
      <h2><a href = "logout.php">Sign Out</a></h2>
   </body>
</html>
logout.php
<?php
   session_start();
   if(session_destroy()) {
      header("Location: login.php");
   }
?>
session.php
<?php
   include('config.php');
   session_start();
 
   $user_check = $_SESSION['login_user'];
   $ses_sql = mysqli_query($db,"select username from admin where username = '$user_check' ");
   $row = mysqli_fetch_array($ses_sql,MYSQLI_ASSOC);
   $login_session = $row['username'];
   if(!isset($_SESSION['login_user'])){
      header("location:login.php");
   }
?>
Step 5: Mở trang Login
Trên trình duyệt (Chrome vv) nhập địa chỉ localhost/test/login.php
Cố tình nhập sai account.
Sau đó nhập đúng và nhìn thấy "hậu quả":


Đại nghĩa hôm nay chỉ tới đây thôi. Lần tới chắc mã hóa mật khẩu cho yên tâm nhỉ? Hay thôi?
Mark

Study more:
Enabling SSL (https protocol) with xampp in a local PHP project
(http: port 80, https: port 443)

No comments:

Post a Comment