Basic Javascript App

Let’s start on adding some JavaScript to make the app:

 

var Gimmie = {
    $content: $('.content'),
    $form: $('form'),
    toggleLoading: function(){
        // Toggle loading indicator
        this.$content.toggleClass('content--loading');

        // Toggle the submit button so we don't get double submissions
        // http://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery
        this.$form.find('button').prop('disabled', function(i, v) { return !v; });
    },
    userInput: '',
    userInputIsValid: false,
    appId: '',
    validate: function() {
        // Use regex to test if input is valid. It's valid if:
        // 1. It begins with 'http://itunes'
        // 2. It has '/id' followed by digits in the string somewhere
        var regUrl = /^(http|https):\/\/itunes/;
        var regId = /\/id(\d+)/i;
        if ( regUrl.test(this.userInput) && regId.test(this.userInput) ) {
            this.userInputIsValid = true;
            var id = regId.exec(this.userInput);
            this.appId = id[1];
        } else {
            this.userInputIsValid = false;
            this.appId = '';
        }
    },
    throwError: function(header, text){
        // Remove animation class
        this.$content.removeClass('content--error-pop');
        // Trigger reflow
        // https://css-tricks.com/restart-css-animation/
        this.$content[0].offsetWidth = this.$content[0].offsetWidth;
        // Add classes and content
        this.$content
            .html('<p><strong>' + header + '</strong> ' + text + '</p>')
            .addClass('content--error content--error-pop');
        this.toggleLoading();
    },
    render: function(response){
        var icon = new Image();
        icon.src = response.artworkUrl512;
        icon.onload = function() {
            Gimmie.$content
                .html(this)
                .append('<p><strong>' + response.trackName + '</strong> Actual icon dimensions: ' + this.naturalWidth + '×' + this.naturalHeight + '</p>')
                .removeClass('content--error');
            Gimmie.toggleLoading();
            // If it's an iOS icon, load the mask too
            if(response.kind != 'mac-software') {
                var mask = new Image();
                mask.src = 'assets/img/icon-mask.png';
                mask.onload = function() {
                    Gimmie.$content.prepend(this);
                }
            }
        }
    }
};
$(document).ready(function(){
    e.preventDefault();
    // On page load, execute this...
    Gimmie.toggleLoading(); // call the loading function
    Gimmie.userInput = $(this).find('input').val();
    Gimmie.validate();
    if( Gimmie.userInputIsValid ) {
        /* make API request */
        $.ajax({
            url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId,
            dataType: 'JSONP'
        })
        .done(function(response) {
            // when finished
            var response = response.results[0];
            if(response && response.artworkUrl512 != null){
                Gimmie.render(response);
            } else {
                Gimmie.throwError(
                    'Invalid Response',
                    'The request you made appears to not have an associated icon. <br> Try a different URL.'
                );
            }
        })
        .fail(function(data) {
            // when request fails
            Gimmie.throwError(
                'iTunes API Error',
                'There was an error retrieving the info. Check the iTunes URL or try again later.'
            );
        });
    } else {
        /* throw an error */
        Gimmie.throwError(
            'Invalid Link',
            'You must submit a standard iTunes store link with an ID, i.e. <br> <a href="https://itunes.apple.com/us/app/twitter/id333903271?mt=8">https://itunes.apple.com/us/app/twitter/<em>id333903271</em>?mt=8</a>'
        );
    }
});

 

Angular Js 1: Auth check when change state

Controller:

...
$stateProvider
  .state('home.contact', {
    url: '/contact',
    resolve: {
      currentAuth: function(AuthFactory) {
        return AuthFactory.authPromise();
      }
    }
  });
...

Service:

...
.factory('AuthFactory', function ($q, $timeout, $rootScope) {
  var factoryObject = {
    authPromise: function () { /* promise to check is login or not */
      // Initialize a new promise
      var deferred = $q.defer();
      $timeout(function () {
        if ($rootScope.isAuthenticated) {
          deferred.resolve();
        } else {
          deferred.reject('AUTH_REQUIRED');
        }
      });
      return deferred.promise;
    }
  };
  return factoryObject;
})
...

Root Controller:

...
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
  if (error === 'AUTH_REQUIRED') {
    $state.go('home.dash');
  }
});
...j

 

ASP.NET MVC: Cơ bản về Validation

Validation (chứng thực) là một tính năng quan trọng trong ASP.NET MVC và được phát triển trong một thời gian dài. Validation vắng mặt trong phiên bản đầu tiên của asp.net mvc và thật khó để tích hợp 1 framework validation của một bên thứ 3 vì không có khả năng mở rộng. ASP.NET MVC2 đã hỗ trợ framework validation do Microsoft phát triển, tên là Data Annotations. Và trong phiên bản 3, framework validation đã hỗ trợ tốt hơn việc xác thực phía máy khách, và đây là một xu hướng của việc phát triển ứng dụng web ngày nay.

Tầm quan trọng của Validation

Giả sử nếu bạn làm một website và không kiểm tra việc nhập dữ liệu của user, chuyện gì xảy ra nếu một đoạn mã độc được gởi lên server.
Kiểm tra dữ liệu luôn là 1 thách thức đối với một lập trình viên. Bạn không chỉ kiểm tra dữ liệu ở trình duyệt mà còn phải kiểm tra dữ liệu (bao gồm cả phần logic) trên server. Việc kiểm tra ở phía client sẽ mang lại những thông tin cần thiết khi người dùng nhập dữ liệu trên form và việc kiểm tra trên server là 1 điều hết sức cần thiết, vì đây là nơi nhận bất kỳ thông tin từ 1 mạng nào đó.

ServerSide Validation

Việc kiểm tra thông tin trên server nên hoàn thành dù có kiểm tra dữ liệu ở client hay không. Người dùng có thể vô hiệu hóa Javascript hoặc làm 1 cách nào đó để vượt qua sự kiểm tra dữ liệu ở client, và server là nơi phòng vệ cuối cùng trước những dữ liệu không mong muốn. Một vài quy tắc kiểm tra đòi hỏi chỉ được thực hiện ở server, vì đây là nơi tiếp cận nguồn dữ liệu an toàn hơn so với việc tiếp cận từ trình duyệt.

Validation với Data Annotations

Data Annotations được giới thiệu trong phiên bản .NET 3.5, là 1 bộ tập hợp các thuộc tính và các class được định nghĩa trong System.ComponentModel.DataAnnotations, dùng để bổ sung thông tin cho class với metadata. MetaData gồm 1 bộ các quy tắc được dùng để chỉ ra đối tượng nào cần được kiểm tra.
Ngoài ra, các thuộc tính trong Data Annotations còn dùng để điều khiển việc hiển thị dữ liệu (ví dụ như DisplayName, DataType…)
Các attribute dùng để Validation:

  • CompareAttribute: So sánh 2 giá trị của 2 thuộc tính trong Model. Nếu bằng nhau, trả về true.
  • RemoteAttribute: Dựa trên JQuery Validation, dùng để gọi hàm trên Server thực hiện việc kiểm tra
  • RequiredAttribute: Dữ liệu không được phép rỗng.
  • RangeAttribute: Dữ liệu là số, được nhập vào thuộc phạm vi được chỉ ra
  • RegularExpressionAttribute: Dữ liệu được nhập vào được so sánh hợp lệ với biểu thức được chỉ ra.
  • StringLengthAttribute: Chỉ ra số ký tự được phép nhập vào.

Client Side Validation

Để việc kiểm tra dữ liệu thực hiện phía client, bạn cần thiết lập thuộc tính true cho 2 thuộc tính:

<add key="ClientValidationEnabled" value="true">
<add key="UnobtrusiveJavaScriptEnabled" value="true">

Ngoài ra bạn phải nhúng thêm thư viện JQuery:

<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Ví dụ Thiết kế Model: Ngoài việc mô tả các thuộc tính (properties), bạn phải thêm vào các attribute để thực hiện việc kiểm tra dữ liệu.

public class Person
{
    [Required]
    [StringLength(160)]
    public string FirstName { get; set; }

    [Required(ErrorMessage="Your lastname is required")]
    public string LastName {get; set; }

    [Range(1, 150)]
    public string Age { get; set; }

    [RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}")]
    public string Email { get; set; }

    [Compare("Email")]
    public string EmailConfirm { get; set; }

    [Remote("CheckUserName", "Account")]
    public string UserName { get; set; }
}

Attribute Compare: Bạn chỉ ra tên property cần so sánh giá trị.
Attribute Remote: chỉ ra tên Controller và Action thực hiện việc kiểm tra dữ liệu bằng Ajax.

public class AccountController : Controller
{
    //
    // GET: /Account/        

    public JsonResult CheckUserName(string username)
    {
        if (username == "anbinhtrong")
            return Json(false, JsonRequestBehavior.AllowGet);
        return Json(true, JsonRequestBehavior.AllowGet);
    }
}

Thực hiện đoạn code hiển thị dữ liệu ở View:

@using(Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <div class="editor-label">@Html.LabelFor(m => m.UserName):</div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.UserName)
            @Html.ValidationMessageFor(m => m.UserName)
        </div>  
        <div class="editor-label">@Html.LabelFor(m => m.FirstName):</div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.FirstName)
            @Html.ValidationMessageFor(m => m.FirstName)
        </div>        
        <div class="editor-label">@Html.LabelFor(m => m.LastName):</div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.LastName)
            @Html.ValidationMessageFor(m => m.LastName)
        </div>  
        <div class="editor-label">@Html.LabelFor(m => m.Age):</div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.Age)
            @Html.ValidationMessageFor(m => m.Age)
        </div>   
        <div class="editor-label">@Html.LabelFor(m => m.Email):</div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.Email)
            @Html.ValidationMessageFor(m => m.Email)
        </div>   
        <div class="editor-label">@Html.LabelFor(m => m.EmailConfirm):</div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.EmailConfirm)
            @Html.ValidationMessageFor(m => m.EmailConfirm)
        </div>             
        <input type="submit" value="Ok"/>
        <input type="reset" value="Làm lại"/>
    </fieldset>  
}

ValidationMessageFor: Hiển thị thông báo khi dữ liệu bị lỗi ở ô tương ứng. Kiểm tra dữ liệu phía Server:

[HttpPost]
public ActionResult Index(Person person,FormCollection form)
{            
    if (ModelState.IsValid)
    {
        //Do something
    }
    return View("Index");
}

ModelState.IsValid: mang giá trị false khi 1 thuộc tính nào đó mang giá trị không hợp lệ.

Kết luận 

Việc kiểm tra dữ liệu tương đối được đơn giản hóa nhờ sự hỗ trợ của thư viện Data Annotations. Nhưng đôi khi chúng ta gặp phải những tình huống phức tạp, vượt ra ngoài khả năng hỗ trợ của asp.net mvc, lúc đó chúng ta cần quay lại tìm hiểu jquery validation và tự viết riêng cho phần kiểm tra đó.

Download ví dụ: MediaFire 

ModelValidation.rar (2,16 mb)

 

 

 

CÁC HÀM XỬ LÝ SỐ TRONG SQL

1/- Hàm ABS :

Với cú pháp hàm ABS  có kết quả trả về là trị tuyệt đối (absolute) của một số bất kỳ. Kết quả trả về luôn luôn là một số dương.

Cú pháp :

SELECT ABS(NUM_EXPR1),ABS(NUMBER_EXPR2),....

[NUMBER_EXRP1,NUMBER_EXPR2 là số muốn trả về giá trị tuyệt đối]

Ví dụ :

Lấy trị tuyệt đối của hai số : 1234.56 và -1234.56

SELECT ABS(1234.56), ABS(-1234.56)

Kết quả:

---------------------------

1234.56    |    1234.56

 

2/- Hàm PI :

Với cú pháp đơn giản của hàm PI  có kết quả trả về là giá trị của hằng số pi trong toán học.

Cú pháp :

SELECT PI()

Kết quả:

---------------------------

3.1415926535897931

 

3/- Hàm POWER :

Với cú pháp hàm POWER  có kết quả trả về là phép tính lũy thừa của một số bất kỳ nào đó theo một số mũ chỉ định.

Cú pháp :

SELECT POWER(NUMBER_EXPR1,Y1),POWER(NUMBER_EXPR2,Y2),...

[NUMBER_EXPR1,NUMBER_EXPR2 là số muốn tính lũy thừa]

[Y1,Y2 là số mũ -- một số dương thực hiện phép lũy thừa.]

Ví dụ:

SELECT POWER(5,2),POWER(2,3)

Kết quả:

------------------

25      |    8

 

4/- Hàm RAND :

Với cú pháp hàm RAND  có kết quả trả về là một số thực ngẫu nhiên( là một số thực dương có miền giá trị từ 0 đến 1) mà hệ thống Microsoft SQL Server tự động tạo ra đảm bảo không trùng lắp.

Cú pháp :

SELECT RAND(NUMBER_EXPR1),RAND(NUMBER_EXPR2),...

[NUMBER_EXPR1,NUMBER_EXPR2 là một giá trị số nguyên có phạm vi không vượt quá phạm vi của kiểu dữ liệu int làm giá trị nguồn cho hệ thống tạo ra số ngẫu nhiên.]

Ví dụ:

SELECT RAND(15),RAND(2)

Kết quả:

-----------------------------------------

0.71385285481053828 | 0.7136106261841817

 

5/- Hàm ROUND :

Với cú pháp hàm ROUND  có kết quả trả về là một số đã được làm tròn.

Cú pháp:

SELECT ROUND(NUMBER_EXPR1,Y1),ROUND(NUMBER_EXPR2,Y2),...

[NUMBER_EXPR1,NUMBER_EXPR2 là số muốn làm tròn có kiểu dữ liệu là số thực.]

[Y1,Y2 là một số nguyên âm hoặc dương dùng để chỉ định vị trí muốn làm tròn, được tính từ vị trí dấu chấm thập phân.]

Ví dụ:

SELECT ROUND(123.4567,2),ROUND(123.4567,0),ROUND(123.4567,-1)

Kết quả:

-----------------------------------------

123.4600 | 123.0000 | 120.0000

 

6/- Hàm SIGN :

Với cú pháp hàm SIGN  có kết quả trả về là một con số quy định dấu của biểu thức số. Kết quả trả về là 1 nếu biểu thức số dương, là -1 nếu biểu thức số âm, là 0 nếu biểu thức số bằng không.

Cú pháp :

SELECT SIGN(NUMBER_EXPR1),SIGN(NUMBER_EXPR2),...

[NUMBER_EXPR1,NUMBER_EXPR2,... là số muốn kiểm tra dấu]

Ví dụ:

SELECT SIGN(-123.45),SIGN(123),SIGN(0)

Kết quả:

---------------------------------------------

-1.00      |      1        |       0

7/- Hàm SQRT :

Với cú pháp hàm SQRT  dùng để thực hiện việc tính căn bậc hai của một số dương bất kỳ. Kết quả trả về là một số dương.

Cú pháp :

SELECT SQRT(NUMBER_EXPR1),SQRT(NUBER_EXPR2),...

[NUMBER_EXPR1,NUMBER_EXPR2,... là số muốn tính căn bậc hai]

Ví dụ:

SELECT SQRT(9),SQRT(5)

Kết quả:

---------------------------------------

3.0            |    2.2360679774997898

 

8/Hàm FLOOR:

Với cú pháp hàm FLOOR dùng để tìm số nguyên lớn nhất nhỏ hơn hoặc bằng giá trị

Cú pháp:

SELECT FLOOR(NUMBER_EXPR1),FLOOR(NUMBER_EXPR2),...

[NUMBER_EXPR1 là số muốn tìm giá trị số nguyên lớn nhất hoặc bằng]

Ví dụ:

SELECT FLOOR(12.3),FLOOR(23.45)

Kết quả:

----------------------------------------

12               |        23

 

9/Hàm CEILING:

Với cú pháp hàm CEILING dùng để tìm số nguyên lớn nhất lớn hơn hoặc bằng giá trị.

Cú pháp:

SELECT CEILING(NUMBER_EXPR1),CEILING(NUMBER_EXPR2)

Ví dụ:

SELECT CEILING(12.3),CEILING(23.45)

Cú pháp:

----------------------------------------

13              |        24

Các công cụ hỗ trợ cần thiết (Extensions) cho Visual studio 2015

Các extensions cần thiết để hỗ trợ cho việc sử dụng, và viết code(HTML, C#, CSS, Js, v..v..) trong Visual Studio 2015.

Danh sách bao gồm:
- Web Essentials 2015.1
- Bundler & Minifier
- Web Compiler
-Image Optimizer
- Web Analyzer
- CodeMaid
- Glyphfriend
- Developer Assistant
- Bootstrap Snippet Pack
- Indent Guides
- Visual Studio 2015 Color Theme Editor.

- Supercharger

- LINQ Insight Express

- MultiEditing 

- IntelliCommand Free: Helps to remember shortcut keys. This extension is supported for Visual Studio 2010/2012 Professional and higher.