Bài viết mới:

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é. 

Thứ Tư, 20 tháng 9, 2017

Tạo giỏ hàng trực tuyến bằng Session trong ASP.NET MVC

Bài viết này hướng dẫn bạn tạo giỏ hàng trực tuyến bằng Session trong ASP.NET MVC (cụ thể là mình đang demo trên MVC 5). Chú ý rằng hướng dẫn có sử dụng LINQ và Entity Framework Database First.




Bước 1: Tạo class CartItem.cs như sau:

    public class CartItem
    {
        public string Hinh { get; set; }
        public int SanPhamID { get; set; }
        public string TenSanPham { get; set; }
        public int DonGia { get; set; }
        public int SoLuong { get; set; }
        public int ThanhTien
        {
            get
            {
                return SoLuong * DonGia;
            }
        }

    }

Bước 2: Tạo GioHangController và sửa nội dung trong action Index như sau:

        public ActionResult Index()
        {
            List<CartItem> giohang = Session["giohang"] as List<CartItem>;
            return View(giohang);

        }

Nội dung trong action Index đơn giản là gán Session có key là giohang qua biến giohang rồi truyền qua view.

Bước 3: Tạo view Index.cshtml của GioHangController, view có 1 table chứa danh sách các CartItem nằm trong biến giohang được lấy từ action Index.

@model List<CartItem>
@{
    ViewBag.Title = "Giỏ hàng của bạn";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<h2>@ViewBag.Title</h2>

@if (Model == null || Model.Count == 0)
{
    <p class="text-info text-center">
        Giỏ hàng của bạn rỗng!
    </p>
}
else
{
    <div class="row">
        <div class="col-sm-12">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <tr>
                        <th>Hình</th>
                        <th>Tên sản phẩm</th>
                        <th>Số lượng</th>
                        <th>Đơn giá</th>
                        <th>Thành tiền</th>
                        <th></th>
                    </tr>
                    @foreach (CartItem item in Model)
                {
                        <tr>
                            <td class="text-center"><img src="~/Content/Photos/SanPham/@item.Hinh" width="70" height="60" /> </td>
                            <td><a target="_blank" href="@Url.Action("ChiTiet", "SanPham", new { id = item.SanPhamID })"> @item.TenSanPham </a> </td>
                            <td>
                                <form action="@Url.Action("SuaSoLuong")" method="get">
                                    <input type="hidden" name="SanPhamID" value="@item.SanPhamID" />
                                    <input type="number" min="1" step="1" name="soluongmoi" value="@item.SoLuong" />
                                    <button type="submit" class="btn btn-primary btn-sm"> Cập nhật </button>
                                </form>
                            </td>
                            <td> @item.DonGia.ToString("#,##0").Replace(',', '.') VNĐ </td>
                            <td> @item.ThanhTien.ToString("#,##0").Replace(',', '.') VNĐ </td>

                            <td> <a href="@Url.Action("XoaKhoiGio",new { SanPhamID = item.SanPhamID})" onclick="return confirm('Bạn có chắc muốn xóa sản phẩm này?');" class="btn btn-danger btn-sm">Xóa</a> </td>
                        </tr>
                    }
                    <tr>
                        <td></td>
                        <td class="text-right">Tổng số lượng:</td>
                        <td> @Model.Sum(m => m.SoLuong) </td>
                        <td class="text-right">Tổng thành tiền:</td>
                        <td>@Model.Sum(m => m.ThanhTien).ToString("#,##0").Replace(',', '.') VNĐ </td>
                    </tr>
                </table>
            </div>
          
        </div>

    </div>

Ngoài ra trong view còn có lệnh if để kiểm tra trong trường hợp biến giohang là NULL hoặc không có item nào thì hiện thông báo rằng "giỏ hàng của bạn rỗng!".

Trong cột Số lượng mình còn tạo ra form để cho phép khách hàng sửa số lượng sản phẩm trong giỏ hàng của họ. Mỗi dòng trong table còn chứa liên kết cho phép Xóa sản phẩm khỏi giỏ hàng.

2 action SuaSoLuongXoaKhoiGio chúng ta sẽ tạo ở các bước bên dưới.

Bước 3: Tạo các nút "Đặt vào giỏ" ở bất kỳ view nào bạn muốn hiển thị để khách cho sản phẩm đấy vào giỏ hàng. Ví dụ đoạn lệnh sau hiển thị 1 nút có icon giỏ hàng cùng với thuộc tính href gọi đến action ThemVaoGio mà chúng ta sẽ tạo ở bước 4.

<a class="btn btn-success btn-sm" href="@Url.Action("ThemVaoGio", "GioHang", new { sanPhamID = Url.RequestContext.RouteData.Values["id"] })"> <span class="glyphicon glyphicon-shopping-cart"></span>  Thêm vào giỏ </a>




Bước 4: Tạo action ThemVaoGio có tham số SanPhamID và nội dung bên trong như sau:

        public RedirectToRouteResult ThemVaoGio(int SanPhamID)
        {
            if(Session["giohang"] == null) // Nếu giỏ hàng chưa được khởi tạo
            {
                Session["giohang"] = new List<CartItem>();  // Khởi tạo Session["giohang"] là 1 List<CartItem>
            }
           
            List<CartItem> giohang = Session["giohang"] as List<CartItem>;  // Gán qua biến giohang dễ code

            // Kiểm tra xem sản phẩm khách đang chọn đã có trong giỏ hàng chưa

            if (giohang.FirstOrDefault(m => m.SanPhamID == SanPhamID) == null) // ko co sp nay trong gio hang
            {
                SanPham sp = db.SanPhams.Find(SanPhamID);  // tim sp theo sanPhamID

                CartItem newItem = new CartItem()
                {
                    SanPhamID = SanPhamID,
                    TenSanPham = sp.TenSanPham,
                    SoLuong = 1,
                    Hinh = sp.Hinh,
                    DonGia = sp.DonGia

                };  // Tạo ra 1 CartItem mới

                giohang.Add(newItem);  // Thêm CartItem vào giỏ 
            }
            else
            {
                // Nếu sản phẩm khách chọn đã có trong giỏ hàng thì không thêm vào giỏ nữa mà tăng số lượng lên.
                CartItem cardItem = giohang.FirstOrDefault(m => m.SanPhamID == SanPhamID);
                cardItem.SoLuong++;
            }
            
            // Action này sẽ chuyển hướng về trang chi tiết sp khi khách hàng đặt vào giỏ thành công. Bạn có thể chuyển về chính trang khách hàng vừa đứng bằng lệnh return Redirect(Request.UrlReferrer.ToString()); nếu muốn.
            return RedirectToAction("ChiTiet", "SanPham", new { id = SanPhamID });
        }

Ý nghĩa các lệnh trong action mình đã chú thích rất rõ. Cơ bản là dùng LINQ để kiểm tra sản phẩm khách hàng chọn có tồn tại trong giỏ hàng không. Nếu không tồn tại thì thêm vào giỏ còn tồn tại rồi thì không thêm nữa mà chỉ tăng số lượng.

Bước 5: Tạo action SuaSoLuong có 2 tham số SanPhamIDsoluongmoi.

        public RedirectToRouteResult SuaSoLuong(int SanPhamID, int soluongmoi)
        {
            // tìm carditem muon sua
            List<CartItem> giohang = Session["giohang"] as List<CartItem>;
            CartItem itemSua = giohang.FirstOrDefault(m => m.SanPhamID == SanPhamID);
            if(itemSua != null)
            {
                itemSua.SoLuong = soluongmoi;
            }
            return RedirectToAction("Index");

        }

Action này thực hiện lấy ra CartItem cần sửa số lượng thông qua method FirstOrDefault sau đó cập nhật lại  thuộc tính SoLuong bằng với giá trị của tham số soluongmoi. Cuối cùng chuyển hướng về action Index để quay lại trang giỏ hàng.

Bước 6: Tạo action XoaKhoiGio có 1 tham số SanPhamID như sau:

public RedirectToRouteResult XoaKhoiGio(int SanPhamID)
        {
            List<CartItem> giohang = Session["giohang"] as List<CartItem>;
            CartItem itemXoa = giohang.FirstOrDefault(m => m.SanPhamID == SanPhamID);
            if (itemXoa != null)
            {
                giohang.Remove(itemXoa);
            }
            return RedirectToAction("Index");
        }

Action này cực kỳ đơn giản, chỉ việc tìm CartItem cần xóa và dùng method Remove để xóa khỏi Session["giohang"]

Thông qua 6 bước trên là bạn đã hoàn thành đầy đủ các chức năng cần thiết của 1 giỏ hàng trực tuyến bằng cách dùng đối tượng Session trong ASP.NET MVC. Ở bài viết sau mình sẽ hướng dẫn bạn tạo giỏ hàng bằng cơ sở dữ liệu thay vì Session, ưu điểm của cách làm này là không sợ giỏ hàng bị mất khi khách hàng lỡ tắt trình duyệt hoặc bị cúp điện đột ngột, máy bị reset bất chợt, ... Mọi thắc mắc bạn comment bên dưới bài viết để mình hỗ trợ nhé.