Thứ Bảy, 22 tháng 4, 2017

Tùy chỉnh giao diện trong suốt Daum Pot Player.

TRONG SUỐT POTPLAYER:

Để có giao diện trong suốt thì ta dùng theme: The SameThing No Border.
Sau đó click phải chuột vào nó, chọn Skin -> On Screen Control --> Use Direct 3D.
Để có thể kéo dãn video theo khung thì ta chọn: Aspect Ratio -> Stretch.

 

Thứ Ba, 18 tháng 4, 2017

Highchart Column Drilldown

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<div id="container" style="max-width: 600px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    credits:{
        enabled: false
    },
    title: {
        text: 'Browser market'
    },
    subtitle: {
        text: 'subtitle'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Total percent market share'
        }
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            pointPadding: 0,
            groupPadding: 0.1, // khoang cach cac cot
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

    series: [{
        name: 'Brands',
        colorByPoint: true, // mau tung cot
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],
    colors: [
                '#ed4747',
                '#ed8347',
                '#edb547',
                '#eddf47',
                '#c0ed47',
                '#83ed47',
                '#42e578',
                '#42e5c7',
                '#38a8d1',
                '#4437d1',
                '#9b37d1',
                '#d1376f',
                '#d13737'
            ],
});
</script>
</body>
</html>

Thứ Hai, 17 tháng 4, 2017

Phân quyền

Các nhóm chỉ được phép truy cập trang web (Public Front-end)
  • Guest - Nhóm khách truy cập vào trang web, không có quyền hạn gì đặc biệt.
  • Registered - Nhóm thành viên đã đăng ký và đăng nhập vào trang web. Thông thường nhóm này sẽ có một số quyền hạn như truy cập vào một số chuyên mục dành riêng cho thành viên, được phép tải các tập tin hoặc trong một số trường hợp có thể đăng tin mới. Quyền hạn của nhóm Registered sẽ do người quản trị quyết định.
  • Author - Nhóm tác giả, nhóm này được phép viết bài mới (đăng tin) và sửa các bài viết của mình nhưng phải được các nhóm Publisher hoặc cấp cao hơn duyệt nội dung trước khi được đăng. 
  • Editor - Nhóm biên tập, nhóm này được phép viết bài  mới (đăng tin) và sửa bất cứ bài viết nào đang được đăng. Các bài viết được đăng mới hoặc sửa phải được các nhóm Publisher hoặc cấp cao hơn duyệt nội dung trước khi được đăng.
  • Publisher - Nhóm phát hành, nhóm này có tất cả quyền hạn của các nhóm bên trên. Ngoài ra còn có quyền duyệt và cho phép đăng các bài viết trên trang web (Front-end).

Các nhóm được phép quản lý (Public Back-end)
  • Manager - Nhóm quản lý, nhóm này có tất cả quyền hạn của các nhóm bên trên. Ngoài ra còn có quyền đăng nhập vào phần quản lý (Admin, Front-end) để quản lý (tạo mới, sửa, xóa,...) các Menu, Section, Category, Article, Component,... Nhóm này không có quyền cài đặt các thành phần mở rộng và chỉnh sửa các thông số cấu hình của trang web.
  • Admin - Nhóm quản trị, nhóm này có tất cả quyền hạn của các nhóm bên trên. Ngoài ra còn có quyền quản lý thành viên, quản lý Component, Module, Plugin.
  • Super Admin - Nhóm quản trị cấp cao nhất, nhóm này có toàn quyền quản lý trang web.

Thứ Năm, 13 tháng 4, 2017

Code first update migration to change Database (MVC5 entity)

Bước 1: Mở Package Manager Console: Tool -> Library -> Package M Console
 

Bước 2: Gõ các lệnh sau:

Enable-Migrations

----
This command has added a Migrations folder to our project, this new folder contains two files:
  • The Configuration class. This class allows you to configure how Migrations behaves for your context. For this walkthrough we will just use the default configuration. Because there is just a single Code First context in your project, Enable-Migrations has automatically filled in the context type this configuration applies to.
  • An InitialCreate migration. This migration was generated because we already had Code First create a database for us, before we enabled migrations. The code in this scaffolded migration represents the objects that have already been created in the database. In our case that is the Blog table with a BlogId and Name columns. The filename includes a timestamp to help with ordering. If the database had not already been created this InitialCreate migration would not have been added to the project. Instead, the first time we call Add-Migration the code to create these tables would be scaffolded to a new migration.
 Add-Migration
--
will scaffold the next migration based on changes you have made to your model since the last migration was created.



Update-Database
--
 will apply any pending migrations to the database.

Thứ Hai, 10 tháng 4, 2017

Delete record

1. Controller Action Method:
// GET: PersonalDetails/Delete/5
public ActionResult Delete(int? id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    PersonalDetail personalDetail = db.PersonalDetails.Find(id);
    if (personalDetail == null)
    {
        return HttpNotFound();
    }
    return View(personalDetail);
}

// POST: PersonalDetails/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
    PersonalDetail personalDetail = db.PersonalDetails.Find(id);
    db.PersonalDetails.Remove(personalDetail);
    db.SaveChanges();
    return RedirectToAction("Index");
}
 
2. Delete View Record
@model WebApplication1.Models.PersonalDetail

@{
 ViewBag.Title = "Delete";
}

<h2>Delete</h2>

<h3>Are you sure you want to delete this?</h3>
    <div>
        <h4>PersonalDetail</h4>
        <hr />
        <dl class="dl-horizontal">
            <dt>@Html.DisplayNameFor(model => model.FirstName)
            </dt>
            <dd>@Html.DisplayFor(model => model.FirstName)
            </dd>
            <dt>@Html.DisplayNameFor(model => model.LastName)
            </dt>
            <dd>@Html.DisplayFor(model => model.LastName)
            </dd>
            <dt>@Html.DisplayNameFor(model => model.Age)
            </dt>
            <dd>@Html.DisplayFor(model => model.Age)
            </dd>
            <dt>@Html.DisplayNameFor(model => model.Active)
            </dt>
            <dd>@Html.DisplayFor(model => model.Active)
            </dd>
        </dl>

        @using (Html.BeginForm()) {
@Html.AntiForgeryToken()
        <div class="form-actions no-color">
            <input type="submit" value="Delete" class="btn btn-default" />
            |
@Html.ActionLink("Back to List", "Index")
        </div>
        }
    </div>
 
 

CREATE DELETE LINK WITH MVC USING POST TO AVOID SECURITY ISSUES

CREATE DELETE LINK WITH MVC USING POST TO AVOID SECURITY ISSUES

It is fairly common to have a list of records with a hyperlink to delete a record.  The problem here is that with MVC the hyperlink will use a GET request to delete a record.  This is a fairly big security issue as anybody can browse to the URL and delete a record from your system.  In this post I’ll explain how you can use the Ajax helpers to create a hyperlink that will call your delete method without using GET.

Stephen Walther has a great post here where he explains the issue and gives a couple of different solutions; one using hand written Ajax and the other without using Ajax.  There is no point in reiterating what he has to say so it’s definately worth a read.  Here I am going to use the Ajax helpers to perform the same functionality, which minimises the code required.

I have a view that renders a table that looks like this:

Here is the Delete method in my controller:
   
[HttpDelete]
public ActionResult Delete(int id)
{
    Student student = context.Student.FirstOrDefault(s => s.ID.Equals(id));
    if (student != null)
    {
        context.DeleteObject(student);
        context.SaveChanges();
    }

    return RedirectToAction("Index");
}


In this method I am using the Entity Framework to delete a record from my database.  The problem with this method using the GET verb would be that anybody could navigate to http://www.mydomain.com/Student/Delete/1 and it would delete the record from my database. We definately don’t want this. There would also be a chance that a search engine bot could access the method, again deleting data.

You can see that I’ve decorated the method with the HttpDelete attribute. As Stephen states in his post, HTML only supports GET and POST, but as we’re using Ajax, which uses the XmlHttpRequest object we can use any of the available verbs, so delete is available.

To render my delete link on the form I am using the Ajax.ActionLink helper method:
   
<%= Ajax.ActionLink("Delete", "Delete", new { id = student.ID },
    new AjaxOptions()
    {
        HttpMethod="Delete",
        Confirm="Are you sure you want to delete this student?",
        OnComplete = "function() { $(this).parent().parent().remove() }"
    }) %>


The helper method is very similar to the Html.ActionLink method, except it will use Ajax to perform the request. The first three parameters are straight forward; the link text, the action name and the route values. The fourth parameter is an instance of AjaxOptions.

I have set three of the properties, the first being the HttpMethod which is set to delete.  This allows the request to be made to my Delete method which is decorated with the HttpDelete attribute.  I have also set the Confirm property which displays a JavaScript confirm dialog before making the request.  Lastly I’ve set the OnComplete property which is some client script that will be run once tha Ajax request has completed.  In this instance I am using jQuery to remove the row from the table.

Using this approach is a fairly simple way to use hyperlinks to delete data without using a GET request therefore improving your site’s security. Of course you may not want your site to be dependant on JavaScript in which case you can use the second approach detailed in Stephen’s post.