12 May 2012

ลองเล่น AngularJS

เดือนก่อนเห็น @kobkrit แนะนำ AngularJS ที่พัฒนาโดย Google ไว้ใน Google+ ลองอ่านดูก็น่าสนใจ เป็น JavaScript framework แบบ MVC สำหรับสร้าง web application วันนี้ต้องเขียน script สำหรับสร้าง password ใหม่ให้กับระบบที่ดูแลอยู่ เลยค้นไม้คันมือลองใช้ AngularJS ดูหน่อย ทำแอพพลิเคชันแบบง่ายๆ ให้ใส่ username แล้วจะสร้าง password ให้พร้อมทั้งเขียน SQL statement สำหรับเอาไปใช้ update เลยเอา code มาแปะไว้เผื่อมีคนสนใจ ใช้ง่ายดีทีเดียว

ส่วนแรกเป็น HTML ทำหน้าที่เป็น view ใน MVC
<!doctype html>
<html ng-app>
 <head>
  <title>Password Generator</title>
  <script src="./angular-1.0.0rc8.min.js"></script>
  <script src="./pwdgen.js"></script>
  <style type="text/css">
   pre { border: 1px dotted black; }
  </style>
 </head>
 <body>
  <div ng-controller="PasswordCtrl">
   <form ng-submit="genPassword()">
    <label>Name</label>
    <input type="text" ng-model="fullname" 
      placeholder="Enter name">

    <label>User Name</label>
    <input type="text" ng-model="username" 
      placeholder="Enter user name">

    <input type="submit" value="generate">
   </form>
   <div>
    <label>Output</list>
    <pre>{{outputs.list}}</pre>
    <label>SQL</list>
    <pre>{{outputs.sql}}</pre>
   </div>
  </div>
 </body>
</html>

ส่วนที่สองเป็น JavaScript สำหรับทำหน้าที่เป็น controller วิธีสร้าง password ก็ง่ายๆ แค่กำหนดชุดตัวอักษรที่จะใช้ใน password พยายามตัวตัวที่กำกวมออก แล้วก็ random มาต่อกัน 6 ตัว เป็นอันเสร็จสิ้น
function PasswordCtrl($scope) {
 $scope.outputs = {
  sql: '\n',
  list: '\n'
 };

 $scope.genPassword = function() {
  var characters = '23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjklmnpqrstuvwxyz';
  var passwd = '';
  if ($scope.outputs.sql == '\n') {
   $scope.outputs.sql = '';
   $scope.outputs.list = '';
  }
  for(i=0;i<6;i++) {
   var r = Math.floor(Math.random() * characters.length);
   passwd += characters[r];
  }
  
  $scope.outputs.list += $scope.fullname + '\t' +
    $scope.username + '\t' + passwd + '\n';
  $scope.outputs.sql += 'update faculties set password=MD5(\'' +
    passwd + '\') where username=\'' + $scope.username + '\';\n';  

  $scope.fullname = '';
  $scope.username = '';
 };
}

2 comments:

Kobkrit said...

ต่อด้วย Node.js เลยครับอาจารย์ :)

Unknown said...

ลองดูๆ อยู่เหมือนกัน จะได้ใช้ Javascript ได้ทั้งสองฝั่งเลย