Bài viết mới:

Thứ Tư, 11 tháng 4, 2018

Format code PHP online thông qua website phpbeautifier.com

http://phpbeautifier.com

Nếu IDE của bạn không hỗ trợ tính năng format code theo ý muốn thì bạn hãy truy cập ngay website này http://phpbeautifier.com/ . Tại đây bạn có thể upload file PHP hoặc dán đoạn code muốn format vào ô textbox. Sau đó bạn có thể chọn phong cách thụt lề code ở bên phải ví dụ Allman style.
Cuối cùng bạn click nút Beautify là code của bạn sẽ có được làm đẹp và rõ ràng hơn rồi. Rất đơn giản và tiện ích đúng không nào.

Thứ Ba, 27 tháng 3, 2018

Sử dụng rePCAPTCHA để chống spam và các loại lạm dụng tự động trên website của bạn

reCAPTCHA bảo vệ bạn khỏi spam và các loại lạm dụng tự động khác nhau. Bài viết này hướng dẫn bạn đăng ký reCAPTCHA V2 (version 2) và cài đặt vào ứng dụng web trên 2 ngôn ngữ PHP và ASP.NET.


Bước 1: Truy cập địa chỉ https://www.google.com/recaptcha và click Get reCAPTCHA. Nếu bạn chưa đăng nhập tài khoản gmail thì đăng nhập để tiếp tục.

Bước 2: Trong form Register a new site bạn nhập tên của reCAPTCHA  tùy ý, chọn reCAPTCHA V2, điền danh sách các domain mà có thể sử dụng reCAPCHA này với mỗi domain nằm trên 1 dòng và check vào dòng Accept the reCAPTCHA Terms of Service. Cuối cùng click Register để đăng ký reCAPTCHA mới. (Xem hình minh họa bên dưới)

Lúc này bạn sẽ nhìn thấy 2 cặp khóa Site key  Secret key. 

Khóa Site key dùng để gọi dịch vụ reCAPTCHA trên trang web hoặc ứng dụng di động của bạn. (khóa này được phép công khai)

Khóa Secret key cho phép giao tiếp ứng dụng web phía backend của bạn và máy chủ reCAPTCHA để xác minh phản hồi của người dùng. (khóa này cần được giữ bí mật)

Bước 3: Các bạn bổ sung thẻ script và thẻ div sau vào trang của bạn theo mẫu dưới.

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Demo reCAPTCHA</title>
    <!-- 1. Khai báo thẻ script sau -->
    <script src="https://www.google.com/recaptcha/api.js?hl=vi" async defer></script>
</head>
<body>
    <form action="" method="post">
        <!-- 2. Thêm thẻ div sau vào form của bạn. Thay sitekey thành site key của bạn -->
        <div class="g-recaptcha" hl="" data-sitekey="sitekeycuaban"></div>
        <br>
        <input type="submit" value="Submit">
    </form>
 
  
</body>
</html>

Bạn nhớ thay sitekeycuaban thành site key bạn vừa nhận được nhé.

Kết quả

Hình ảnh sau khi chạy trang web




Bước 4:


4.1 Code C#


Trước tiên bạn cần cài đặt thêm gói Newtonsoft.Json  bằng lệnh install-package Newtonsoft.Json ở cửa sổ Package Manage Console hoặc cài trực tiếp từ giao diện Nuget Package Manager.


Sau đó bên bạn khai báo thêm 3 lệnh using Newtonsoft.Json.Linq; using System.Net; System.Collections.Specialized;

Bên action method bạn xử lý như mẫu sau:

        [HttpPost]
        public ActionResult Index(FormCollection frm)
        {
            string recaptcha_token = frm["g-recaptcha-response"];
            string responseInString = "";
            string url = "https://www.google.com/recaptcha/api/siteverify";
            using (var wb = new WebClient())
            {
                var data = new NameValueCollection();
                data["response"] = recaptcha_token;
                data["secret"] = "secretkeycuaban";
                var response = wb.UploadValues(url, "POST", data);
                responseInString = Encoding.UTF8.GetString(response);
            }
            dynamic result = JObject.Parse(responseInString);
            if(result.success == false)
            {
                // Báo lỗi "recaptcha khong hop le"     
            }
            else
            {
               // tiep tuc xu ly
            }
            return View();
        }


Bạn nhớ thay "secretkeycuaban" thành secrect key của bạn là ok.

Project demo ASP.NET bạn tải ở đây https://drive.google.com/open?id=1_rQfTBiDq6SmJ3Hx5sX63d0p-Clv4X87

4.2 Code PHP


if(isset($_POST['g-recaptcha-response']))
    {
          $recaptcha_token = $_POST['g-recaptcha-response'];
          $url = "https://www.google.com/recaptcha/api/siteverify";
          $data = array('response' => $recaptcha_token, 'secret' => 'secretkeycuaban');
          // use key 'http' even if you send the request to https://...
            $options = array(
                'http' => array(
                    'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
                    'method'  => 'POST',
                    'content' => http_build_query($data)
                )
            );
            $context  = stream_context_create($options);
            $responseInString = file_get_contents($url, false, $context);
            $result = json_decode($responseInString, true);
            if($result['success'] == true)
            {
               // xu ly
           
            }
            else
            {
               // bao loi sai recaptcha
            }
    }

Bạn nhớ thay "secretkeycuaban" thành secrect key của bạn là ok.


Nếu thay bài viết hữu ích nhờ like và share nhé. ^^

Thứ Tư, 14 tháng 2, 2018

Cài tiện ích Handy Tab trong Google Chrome


Thay đổi trang tab mới của bạn với bảng điều khiển cá nhân có tính năng thời tiết, công việc, ghi chú, hình nền đẹp và hơn thế nữa.

Trang tab mới nhanh, hữu ích có tất cả những gì bạn cần để bắt đầu duyệt. Nâng cấp trang chủ Chrome của bạn bằng các app hữu ích, truy cập nhanh vào các trang web nổi tiếng với cách bố trí tuyệt vời. Handy Tab mang đến cho bạn bảng điều khiển cá nhân tuyệt vời nhất.

Cách cài đặt rất đơn giản. Bạn truy cập địa chỉ chrome://extensions/ và click "Tải thêm tiện ích" cuối trang. Sau đó tìm kiếm Handy Tab và cài đặt (xem hình)




Mình giới thiệu 1 số tính năng hay của tiện ích này mang lại.

Tính năng Weather hiển thị thời tiết ở khu vực của bạn

Tính năng To-Do để tạo danh sách các công việc bạn chưa hoàn thành(To-Do) và đã hoàn thành (Done)

Tiện ích Notes để tạo ra các ghi chú của bạn

Tiện ích Bookmarks để quản lý dấu trang của bạn với giao diện dễ nhìn hơn
Ngoài ra còn nhiều tính năng khác bạn có thể tìm hiểu khi cài đặt xong tiện ích này. Chúc bạn cài đặt thành công và ứng dụng tốt tiện ích Handy Tab.

Thứ Sáu, 12 tháng 1, 2018

Làm thế nào để Facebook thông báo ngay lập tức khi có người dùng bình luận ở Facebook Comment Plugin trong website của bạn?

Có thể việc cài đặt plugin comment của facebook vào website là rất đơn giản với bạn nhưng bạn sẽ thắc mắc tại sao facebook không gửi thông báo cho bạn khi có user bình luận (như hình dưới). Bài viết này sẽ hướng dẫn bạn cách "thêm người kiểm duyệt bình luận" vào ứng dụng developer facebook của bạn.

Kết quả khi cài đặt thành công

Bước 1: Đăng nhập Facebook và truy cập vào link https://developers.facebook.com/tools/comments 

Bước 2: Chọn ứng dụng mà bạn muốn kiểm duyệt bình luận. Ví dụ mình chọn ứng dụng Chuyên lập trình của mình.


Bước 3: Click "Cài đặt" và chọn tab "Người kiểm duyệt". Sau đó thêm chính bạn hoặc nhiều người khác mà bạn muốn đặt là người kiểm duyệt bình luận facebook trên ứng dụng bạn chọn. (Xem hình ví dụ)


Bước 4: Click "Lưu".

Vậy là xong. Rất đơn giản nhưng cực kỳ quan trọng đối với những website bạn muốn theo dõi bình luận của người dùng. Bây giờ khi có bất kỳ người dùng bình luận vào website của bạn thì facebook sẽ thông báo trực tiếp đến bạn. Bạn thử kiểm tra xem nhé.

Chủ Nhật, 10 tháng 12, 2017

Tạo chức năng xóa hàng loạt record trong ASP.NET MVC

Một chức năng phổ biến ở các trang quản trị là xóa hàng loạt record. Bài viết này hướng dẫn bạn thực hành tạo chức năng đó.

Giả sử mình có trang hiển thị danh sách sản phẩm như sau.


Bây giờ mình thiết kế thêm 1 cột ở cuối table để hiển thị các nút checkbox cho phép người dùng lựa chọn các sản phẩm muốn xóa.



Chú ý rằng nút checkbox trên cùng sẽ là nút checkall nghĩa là khi quản trị viên check vào nút này thì mặc định tất cả các checkbox phía dưới sẽ được chọn. Nội dung thiết kế nút checkall như sau:



Mình đặt id cho nút này là checkall.

Dưới đây là nội dung thiết kế các nút checkbox bên dưới. Các nút checkbox này mình đặt name là dsxoa và có value là Id của sản phẩm đó.





Thêm đoạn script sau để khi check vào nút checkall thì tất cả checkbox dsxoa sẽ được chọn và ngược lại khi bỏ checkall thì tất cả checkbox dsxoa cũng bỏ chọn.



Tạo tag form gọi đến action Delete với method="post". Chúng ta sẽ tạo action này khi hoàn thành thiết kế View. Nội dung tag table sẽ được bọc vào trong form này (xem hình dưới).


Bổ sung tag <tr></tr> vào cuối các tag tr khác. Đây là dòng cuối cùng của table, dòng này chỉ hiển thị nút submit Xóa.



Khi click Xóa form sẽ được đệ trình lên server, nó sẽ gửi toàn bộ các giá trị Id của các checkbox  được chọn về action Delete. Do đó action Delete cần có 1 tham số là 1 mảng số nguyên (vì cột Id trong CSDL của mình là kiểu int) với tên biến là dsxoa (vì name của các nút checkbox mình đặt là dsxoa).

Cuối cùng bổ sung action Delete vào controller, nội dung action Delete sẽ như sau. 


Mình duyệt qua các  giá trị Id trong mảng dsxoa sau đó tìm sản phẩm theo Id và xóa sản phẩm đó khỏi CSDL. 

Chúc các bạn thực hành thành công.

Thứ Hai, 23 tháng 10, 2017

Hướng dẫn tạo popup hiển thị hình ảnh bằng jquery và css3



Hiệu ứng này có thể bạn đã thấy ở 1 số website rồi nhỉ. Các bước tạo hiệu ứng Popup hiển thị hình ảnh này như sau.

Bước 1: Thêm class popupImage vào các hình ảnh muốn hiện popup khi người dùng click vào.
Ví dụ:
<ul>
<li><img class="popupImage" width="600px" height="auto" alt="Image 1" src="image1.jpg" /></li>
<li><img class="popupImage" width="600px" height="auto" alt="Image 2" src="image2.jpg" /></li>
<li><img class="popupImage" width="600px" height="auto" alt="Image 3" src="image3.jpg" /></li>
</ul>

Bước 2: Dán thêm đoạn HTML hiển thị popup sau vào thẻ body.

               <!-- The Modal -->
<div id="modalShowImage" class="modal-Image">
  <!-- The Close Button -->
  <span class="close">&times;</span>
  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">
  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>

Bước 3: Tạo file popupImage.css với nội dung như sau:

/* Style the Image Used to Trigger the Modal */
.popupImage {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
} .popupImage:hover {opacity: 0.7;} /* The Modal (background) */
.modal-Image {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
} /* Modal Content (Image) */
.modal-Image .modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
} /* Caption of Modal Image (Image Text) - Same Width as the Image */
.modal-Image #caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
} /* Add Animation - Zoom in the Modal */
.modal-Image .modal-content, .modal-Image #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
} @-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
} @keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
} /* The Close Button */
.modal-Image .close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
} .modal-Image .close:hover,
.modal-Image .close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
} /* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-Image .modal-content {
width: 100%;
}
} 

Bước 4: Khai báo file css vào trong thẻ head.

<link rel="stylesheet" href="popupImage.css" type="text/css" />

Bước 3: Khai báo thư viện jquery và đoạn script sau vào thẻ head hoặc cuối thẻ <body>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script>
$(function(){
// Event khi người dùng click vào hình ảnh có class popupImage
$(".popupImage").click(function(){
var modal = document.getElementById("modalShowImage");  // Tạo biến modal lấy ra element có Id  modalShowImage
var captionText = document.getElementById("caption");  // Tạo biến captionText lấy ra từ element có Id caption
var modalImg = document.getElementById("img01");   // Tạo biến modalImg lấy ra từ element có Id img01
modal.style.display = "block";    // Hiển thị  popup
modalImg.src = $(this).attr("src");  // Gán thuộc tính src của hình ảnh trong popup
    captionText.innerHTML = $(this).attr("alt");   // Gán giá trị cho caption theo thuộc tính alt của hình
});
// Event khi người dùng click nút Close popup
$(".modal-Image .close").click(function(){
var modal = document.getElementById("modalShowImage");
modal.style.display = 'none';  // Ẩn popup
});
});
</script>

Thứ Năm, 21 tháng 9, 2017

Tích hợp Live Chat Facebook vào website

Thành quả mà bạn có được là website của bạn có thêm khung chat như ở website https://nicklmht.vn này đây.

Bước 1: Dán đoạn mã sau vào thẻ body của website bạn.

<div id="fb-root"></div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.10";
  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fbchatbox hidden-xs" style="position:fixed;right:10px;bottom:0;z-index:9999">
    <div class="fb-page" data-href="LinkFanpage" data-small-header="true" data-adapt-container-width="false" data-height="300" data-width="300" data-hide-cover="true" data-show-facepile="true" data-show-posts="false" data-tabs="messages"><div class="fb-xfbml-parse-ignore"><blockquote cite="LinkFanpage"><a href="LinkFanpage">LinkFanpage</a></blockquote></div></div>
    <span class="hide" id="closefbchat" style="right:0px;white-space: nowrap;position:absolute;bottom:299px;width:300px;padding:7px; background: #44619D;color: #fff;cursor: pointer;">Tắt Hỗ Trợ</span>
</div>

Tiếp đó bạn thay LinkFanpage thành địa chỉ Fanpage của bạn vào nhé.

Bước 2: Thêm thẻ style sau vào trong thẻ head:

    <style>
        .hide{
            display:none;
        }
    </style>

Bước 3: Thêm 2 thẻ script sau vào trong thẻ head:

<script src= "https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

            crossorigin="anonymous"></script>

<script>
    if (localStorage.getItem("fbchatclose") == 1) {

        jQuery('.fb-page').toggleClass('hide');

        jQuery('#closefbchat').html('<i class="fa fa-comments fa-2x"></i> Hỗ Trợ Khách Hàng').css({ 'bottom': 0 });
    }

    setTimeout(function () {
        $("#closefbchat").removeClass("hide");
    }, 1000);


    jQuery('#closefbchat').click(function () {
        jQuery('.fb-page').toggleClass('hide');
        if (jQuery('.fb-page').hasClass('hide')) {
            localStorage.setItem("fbchatclose", 1);
           
            jQuery('#closefbchat').html('<i class="fa fa-comments fa-2x"></i> Hỗ Trợ Khách Hàng').css({ 'bottom': 0 });
        }
        else {
            localStorage.setItem("fbchatclose", 0);
            jQuery('#closefbchat').text('Tắt Hỗ Trợ').css({ 'bottom': 299 });
        }
    });
    </script>

Và đây là thành quả của mình.



Chúc bạn tích hợp thành công nhé.