Author: tuanitpro

Hướng dẫn thay đổi background Visual Studio

Khi bạn là một tín đồ của .NET, thường xuyên làm việc với Visual Studio IDE, hẳn bạn sẽ có lúc cảm thấy nhàm chán giao diện của nó. Chỉ có vài Themes đơn giản, nhưng cũng không được nổi bật lắm.

Cũng như Desktop của bạn, lâu lâu chúng ta muốn thay đổi background của nó một chút cho bắt mắt, hay đỡ nhàm chán, đồng thời cũng thể hiện cá nhân hóa của bạn trên màn hình làm việc.

Thật thú vị là chúng ta có một Extension của Visual Studio đó là ClaudiaIDE. Nó cho phép chúng ta thay đổi background làm việc của Visual Studio bằng cách thay đổi hình nền giao diện làm việc. Tải ClaudiaIDE tại đây.
ClaudiaIDE là một mã nguồn mở được chia sẻ tại Github. Nếu bạn có hứng thú có thể tham gia phát triển nó tại: https://github.com/buchizo/ClaudiaIDE

ClaudiaIDE khá thú vị khi cho phép bạn chọn 1 ảnh nền, hay cả 1 thư mục chứa ảnh để thay đổi theo kiểu Slide show. Giống y chang desktop của bạn.

ClaudiaIDE-1
Sau khi cài đặt chúng ta vào mục Tools->Options->ClaudiaIDE để cài đặt lại theo ý thích cá nhân.

ClaudiaIDE-2

Một số thông số cài đặt
###Image
Image background type
– Single: Chỉ chọn 1 ảnh làm nền
– Slideshow: Chọn nhiều ảnh làm nền
– Opacity: Điều chỉnh độ mờ của ảnh nền
###Layout
– Horizontal Alignment: Vị trí của ảnh (Left, Right, Center)
– Vertical Alignment: Vị trí của ảnh (Top, Bottom, Center)
###SingleImage
– File Path: Đường dẫn hình ảnh của bạn
###Slideshow
– Directory Path: Đường dẫn thư mục chứa ảnh
– Image animation interval: Thời gian hiệu ứng chuyển ảnh
– Image extensions: .png, .jpg định dạng ảnh cho phép
– Update interval: Thời gian thay đổi giữa 2 ảnh

Chúc các bạn thành công, và đừng quên chia sẻ giao diện làm việc mới trên Visual Studio của bạn nhé. ?

PHP Upload file

Upload file là một vấn đề quan trọng và cần thiết khi lập trình web. Chúng ta cần tải hình ảnh lên hosting, tải file ….
Đoạn code nhỏ trong php sau đây cho phép bạn làm thực hiện điều đó thật đơn giản.

PHP Upload file
PHP Upload file

Cấu hình file “php.ini”

Đầu tiên, để chắc chắn PHP cho phép upload file, chúng ta cần kiểm tra trong file php.ini. Trong file php.ini tìm đến dòng file_uploads gán = On

file_uploads = On

Thiết kế trang html

<!DOCTYPE html>
<html>
<body>
<h1>PHP - Upload file demo <a href="http://tuanitpro.com">http://tuanitpro.com</a></h1>
<form action="upload2.php" method="post" enctype="multipart/form-data">
    Chọn file upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Tải lên" name="submit">
</form>
<hr/>

</body>
</html>

Có vài quy tắc bạn cần nhớ.

  • Form phải để phương thức POST
  • Bắt buộc phải có thuộc tính
    enctype="multipart/form-data"
  • action của form chỉ đến trang upload2.php, là trang chứa code PHP thực hiện phía server.

Code trang upload2.php

<?php

if(isset($_POST["submit"])) {
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
	// Kiểm tra file upload lên có phải là ảnh không?

    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File có định dạng - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "Chỉ cho phép hình ảnh.";
        $uploadOk = 0;
    }
 
// Kiểm tra file tồn tại hay chưa?
if (file_exists($target_file)) {
    echo "File đã tồn tại.";
    $uploadOk = 0;
}
// Kiểm tra kích thước file 500000 byte
if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "File quá lớn.";
    $uploadOk = 0;
}
// Kiểm tra định dạng ảnh hợp lệ không?
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Chỉ cho phép các định dạng sau: JPG, JPEG, PNG & GIF";
    $uploadOk = 0;
}
// Kiểm tra điều kiện trước khi upload?
if ($uploadOk == 0) {
    echo "Upload thất bại.";
// Nếu ok thì cho phép upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        echo " File ".$target_dir. basename( $_FILES["fileToUpload"]["name"]). " upload thành công.";
        echo '<br/><img src="'.$target_dir. basename( $_FILES["fileToUpload"]["name"]).'" width="160" />';
    } else {
        echo "Upload file thất bại, vui lòng thử lại.";
    }
}
}
?>

Một số giải thích:

  • $target_dir = “uploads/” – thư mục chứa file tải lên. Nằm cùng cấp với upload2.php
  • $target_file đường dẫn tập tin được tải lên
  • $uploadOk=1 để kiểm tra dữ liệu trước khi upload
  • $imageFileType kiểm tra phần mở rộng của tập tin
  • Tiếp theo kiểm tra xem ảnh có thật hay bị giả mạo (vd: social.php => social.png)

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

POST & GET trong lập trình web

Trong lập trình web có 2 phương thức rất quan trọng chúng ta thường dùng đó là POST & GET. Nó giống như cốt lỗi khi làm lập trình web. Bởi vì POST và GET cung cấp cho chúng ta cách lấy thông tin đầu vào từ phía client, sau đó gửi lên máy chủ Web Server để xử lý. Không có thông tin chúng ta không thể xử lý gì cả.

Nôm na thì nó như vầy:

POST & GET

GET

Phương thức GET dữ liệu sẽ được hiển thị trên thanh địa chỉ: VD: http://tuanitpro.com/?s=ajax. GET áp dụng khi dữ liệu chỉ đọc, không nên dùng khi ghi xuống CSDL. Bởi vì khi dùng GET thì thông tin quá lộ liễu. Dễ thấy nhất là khi tìm kiếm, lấy mẩu tin theo ID. http://tuanitpro.com/?id=1&categoryid=2&x=3&y=4. Khi dùng GET thì tất cả các field trong form đều hiển thị hết lên thanh địa chỉ.

GET Method

VD chúng ta có form đăng nhập như sau:

<form action="login.php" method="GET"> // Nếu chúng ta không quy định method, mặc định là GET
First name:<br>
<input type="text" name="username" value="tuanitpro">
<br>
Last name:<br>
<input type="password" name="password" value="123">
<br><br>
<input type="submit" value="Submit">
</form>

Khi chúng ta nhấn submit, nó sẽ gửi sang trang login.php như sau:
http://tuanitpro.com/login.php?username=tuanitpro&password=123. Như vậy quá nguy hiểm khi có ai đứng gần bạn.
Cách lấy dữ liệu.

PHP: $_GET["username"]
ASP.NET: Request.QueryString["tuanitpro"]
JAVA: request.getParameter("username");

Và có một điều quan trọng, các hacker rất thích dựa vào GET để khai thác tấn công SQL Injection. Nếu dùng GET các bạn nên mã hóa query string để an toàn hơn.

POST

Khác với GET, phương thức POST cũng gửi dữ liệu lên web server, nhưng nó chạy ngầm bên dưới, hoàn toàn không hiển thị. Các bạn thường thấy khi đăng ký thành viên, đăng nhập, thêm một bài mới. Tức là nó có can thiệp với cơ sở dữ liệu. Tất nhiên chúng ta hoàn toàn có thể dùng GET. Tuy nhiên vì lý do bảo mật (tất nhiên không hoàn toàn tuyệt đối), chúng ta nên dùng POST.

POST Method

Khi dùng POST

<form action="login.php" method="POST">
First name:<br>
<input type="text" name="username" value="tuanitpro"/>
<br>
Last name:<br>
<input type="password" name="password" value="123"/>
<br><br>
<input type="submit" value="Submit">
</form>

Dữ liệu cũng gửi lên Server để trang login.php xử lý, nhưng nó chạy ngầm, và không hiển thị gì cả. An toàn hơn GET rất nhiều. Bạn nào không tin thì login facebook.com thử.

Cách lấy dữ liệu.

PHP: $_POST["username"]
ASP.NET: var username = username.Text
JAVA: request.getParameter("username");

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

CRUD using Ajax in ASP.NET MVC

Trong quá trình học và làm lập trình, bạn thường nghe nói nhiều đến Ajax, được khuyên dùng Ajax trong nhiều câu trả lời. Vậy ajax là gì? Ứng dụng ajax vào có khó hay không? Trong video dưới đây mình sẽ hướng dẫn các bạn cách thêm, xóa, sửa, lấy dữ liệu bằng Ajax trong ASP.NET MVC (Các bạn hoàn toàn có thể ứng dụng vào cho ngôn ngữ lập trình khác như PHP chằng hạn…)

Video Demo CRUD using Ajax in ASP.NET MVC

Tóm tắt Video

  • Ajax là gì?
  • Tạo Cơ sở dữ liệu bảng Student (lưu thông tin sinh viên)
  • Tạo dự án ASP.NET MVC mới
  • Tạo class xử lý thêm, xóa sửa
  • Tạo form thêm sinh viên
  • Viết code cho Controller
  • Viết code cho file javascript

Bạn hoàn toàn có thể ứng dụng Ajax trong nhiều trường hợp: đăng nhập, đăng ký, tìm kiếm thông tin, giỏ hàng….
Nếu bạn đã hoàn thành theo hướng dẫn mà vẫn gặp khó khăn, hãy tải mã nguồn ứng dụng tại đây:  Download

Cảm ơn bạn đọc và mình luôn đánh giá cao phản hồi của bạn.

Javascript Popup Window to return value to Parent Window

Chào các bạn.
Khi lập trình, hay thiết kế web chúng ta có nhu cầu lấy dữ liệu từ một trang thứ 2 mà không muốn load lại trang chính. Chúng ta có thể dùng popup windows. Ví dụ như chọn một sản phẩm từ danh sách sản phẩm, chọn một nhân viên từ danh sách…. Tất nhiên cũng ta vẫn còn có nhiều cách khác nhau.

Javascript Popup Window to return value to parent window
Javascript Popup Window to return value to parent window

Hướng dẫn sau cho phép bạn tạo một trang popup và lấy dữ liệu đưa vào form của chúng ta. Đây chỉ là code HTML và Javascript, vậy nên bạn có thể áp dụng bất cứ chỗ nào bạn muốn (PHP, ASP.NET, MVC….).

Chúng ta cần 2 file. 1 file chứa form (parent) và 1 file chứa dữ liệu chúng ta muốn lấy (child).

Code trang parent.html

<body>
    <div class="container">
        <h3>Javascript Popup Window to return value to parent Window</h3>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    Họ tên:&nbsp;
                </td>

                <td>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Chọn nhân viên..." id="txtName">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" onclick="SelectName()">Chọn...</button>
                        </span>
                    </div><!-- /input-group -->
                </td>
            </tr>
        </table>
        <br />
        <p>            
            <a href="http://tuanitpro.comjavascript-popup-window-to-return-value-to-parent-window">Hướng dẫn lấy dữ liệu từ Popup Javascript.</a>
        </p>
        <script type="text/javascript">
            var popup;
            function SelectName() {
                popup = window.open("/Home/Popup", "Popup", "width=400,height=300"); // Thay dường dẫn file bạn muốn mở
                popup.focus();
            }
        </script>
    </div>

Code file child.html

<body>
    <div>
        <h3>Danh sách nhân viên</h3>
        Click vào tên nhân viên để chọn
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td><a href="#" onclick="return SetName('Ngọc Trinh');">Ngọc Trinh</a></td>
                    <td>Otto</td>
                    <td>mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td><a href="#" onclick="return SetName('Phương Trinh');">Phương Trinh</a></td>
                    <td>Thornton</td>
                    <td>fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td><a href="#" onclick="return SetName('Lệ Rơi');">Lệ Rơi</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td><a href="#" onclick="return SetName('Bà Tưng');">Bà Tưng</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td><a href="#" onclick="return SetName('Kenny Sang');">Kenny Sang</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        function SetName(value) {
            if (window.opener != null && !window.opener.closed) {
                var txtName = window.opener.document.getElementById("txtName"); // ID này là của parent form
                txtName.value = value;
            }
            window.close();
        }
    </script>
</body>

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

Multiple file upload in ASP.NET MVC

Khi lập trình web với ASP.NET MVC hay bất kỳ ngôn ngữ nào khác như PHP chẳng hạn, chúng ta đều gặp những tình huống liên quan đến Upload file lên hosting, dễ thấy nhất là upload hình sản phẩm cho một sản phẩm nào đó.

Với ASP.NET MVC chúng ta dễ dàng làm được điều đó, bạn có thể upload 1 file hoặc upload nhiều file (Multiple file upload) trong ASP.NET MVC cùng lúc. Nó cực kỳ hữu ích trong nhiều trường hợp. Đoạn code nhỏ sau đây sẽ minh họa cho vấn đề này.

Multiple file upload in ASP.NET MVC
Multiple file upload in ASP.NET MVC

Code HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Upload file trong ASP.NET MVC</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var max_fields = 10; //maximum input boxes allowed
            var wrapper = $(".myinput"); //Fields wrapper
            var add_button = $(".btnAddNew"); //Add button ID

            var x = 0; //initlal text box count
            $(add_button).click(function (e) { //on add input button click
                e.preventDefault();
                if (x < max_fields) { //max input box allowed
                    x++; //text box increment
                    $(wrapper).append('<div>   <input type="file" name="uploadFile['+x+']" /><a href="#" class="btnRemove">Xóa</a></div>'); //add input box
                }
            });

            $(wrapper).on("click", ".btnRemove", function (e) { //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            })
        });
    </script>
</head>
<body>
    <div>
        <h2>Upload file trong ASP.NET MVC</h2>
        <div style="color:red">
            @Html.Raw(TempData["Msg"])
        </div>
        <fieldset>
            <legend>Upload file</legend>
            @using (Html.BeginForm("Upload", "Upload", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {

                <label>Chọn file: </label>
                <br />
                <input type="file" name="uploadFile" required /><br />

                <input type="submit" value="Upload" />

            }
        </fieldset>
        <hr />
        <h3>Upload nhiều file trong ASP.NET MVC</h3>
        <fieldset>
            <legend>Upload multi file</legend>
            @using (Html.BeginForm("UploadMulti", "Upload", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {

                <label>Chọn file: </label><br />
                <a class="btnAddNew" href="#">Thêm</a>
                <br />
                <div id="myinput" class="myinput">
                    <input type="file" name="uploadFile[0]" required /><br />
                </div>
                <br />
                <input type="submit" value="Upload" />

            }
        </fieldset>

Code cs

/**   FileName: UploadController.cs 
          Project Name: DateTime Ajax
          Date Created: 12/17/2014 11:30:58 PM 
          Description:  File Upload trong ASP.NET MVC
          Version: 0.0.0.0 
          Author: Lê Thanh Tuấn - Khoa CNTT
          Author Email: [email protected] 
          Author Mobile: 0976060432
          Author URI: https://tuanitpro.com 
          License: 
     */

    public class UploadController : Controller
    {
        // GET: Upload
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Upload(HttpPostedFileBase uploadFile)
        {
            if (ModelState.IsValid)
            {
                string filePath = Path.Combine(HttpContext.Server.MapPath("/Uploads/demo"),
                                               Path.GetFileName(uploadFile.FileName));
                uploadFile.SaveAs(filePath);
                TempData["Msg"] = string.Format("Upload file {0} thành công", uploadFile.FileName);
            }
            return RedirectToAction("Index");
        }

        [HttpPost]
        public ActionResult UploadMulti(List<HttpPostedFileBase> uploadFile)
        {
            string abc = "";
            string def = "";
            foreach (var item in uploadFile)
            {

                string filePath = Path.Combine(HttpContext.Server.MapPath("/Uploads/demo"),
                                               Path.GetFileName(item.FileName));
                item.SaveAs(filePath);

                abc = string.Format("Upload {0} file thành công", uploadFile.Count);

                def += item.FileName + "; ";


            }
            TempData["Msg"] = abc + "</br>" + def;
            return RedirectToAction("Index");
        }
    }

Live demo

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

Vừa gà vừa chó, bó lại cho tròn, ba mươi sáu con, một trăm chân chẵn. Hỏi mấy gà, mấy chó?

Có một bài toán dân gian khá thú vị như sau:

Vừa gà vừa chó
Bó lại cho tròn
Ba mươi sáu(36) con
Một trăm(100) chân chẵn
Hỏi mấy gà, mấy chó?

Đây là bài toán vui, từ khi học tiểu học mình đã biết, lên trung học, học giải phương trình cũng gặp lại nó. Và bây giờ, làm lập trình, tự dưng nhớ tới nó, nên viết ra đây, coi như chia sẻ cho các bạn mới học lập trình có thêm hào hứng, giải quyết các bài tập nho nhỏ, vui vẻ tương tự.

Cách giải nó như sau:

Gọi x là số gà
Số chó là: 36 – x
Số chân gà: 2x
Số chân chó: 4(36-x)
theo đề bài ta có:
2x + 4(36 – x) =100
2x + 144 – 4x = 100
2x = 144 – 100
2x = 44
x = 22
Vậy số gà là 22 con
Số chó : 36 – 22 = 14
—
Bạn bảo mấy con chó đặt 2 chân trước lên ghế,tổng số chân dưới đất sẽ là 36 x 2  = 72 chân. Suy ra số chân trên ghế là 28 chân.
Vậy có 14 con chó ….
—
Dùng hệ phương trình
Gọi x là gà, y là chó
Ta có hệ pt:
x + y = 36
2x + 4y = 100
Giải hệ pt
x = 22,y = 14
Vậy gà có 22 con, chó có 14 con. Mời các bạn chia sẻ thêm cách giải hay, thú vị khác nữa nhé.

Vậy thì làm sao để giải nó bằng cách lập trình. Đây không phải vấn đề khó với nhiều bạn, tuy nhiên mình thấy vui vẻ, nên vẫn viết ra đây.

Sau đây là cách giải trong một số ngôn ngữ lập trình như Pascal, C++, C#, Java, PHP, ASP.NET, Javascript. Trường hợp máy bạn không cài sẵn IDE, bạn có thể sử dụng trang web http://ideone.com để chạy thử code.

Vì số con là 36 và số chân là 100. Giả sử tất cả là chó, thì số con tối đa là 100/4 = 25 (con). Tối thiểu là 36 / 4 = 9 (con). Như vậy chúng ta chỉ cần sử dụng vòng lặp for từ 9->25. Tối ưu hơn so với từ 0 -> 36

Pascal


program HelloWorld;
var i :Integer;
begin
   writeln('Giai bai toan dan gian bang Pascal');
writeln('Vua ga vua cho');
writeln('Bo lai cho tron');
writeln('Ba muoi sau(36) con');
writeln('Mot tram(100) chan chan');
writeln('Hoi may ga, may cho?');
for i:= 9 to 25 do
if((i * 2 + (36 - i) * 4) = 100) then
writeln('So ga la: ', i);
writeln('So cho la: ', 36 - i);
end.

C++

#include 
#include;
#include;
using namespace std;
int main(){
cout << "Gia bai toan dan gian trong C++\n";
cout << "Vua ga vua cho\n";
cout << "Bo lai cho tron\n";
cout << "Ba muoi sau(36) con\n";
cout << "Mot tram(100) chan chan\n";
cout << "Hoi may ga, may cho?\n";
cout << "\n";
for (int i = 9; i < 25; i++)
{
if ((i * 2 + (36 - i) * 4) == 100){
cout << "So ga la: " << i << "\n";
cout << "So cho la: " << (36 - i) << "\n";
                        break;
}
}
}

Java

public class Main {
public Main() {
// TODO Auto-generated constructor stub
}
/**
* @param args
*/
public static void main(String[] args) {
// TODO Auto-generated method stub
System.out.println("Giải bài toán dân gian trong Java");
System.out.println("Vừa gà vừa chó");
System.out.println("Bó lại cho tròn");
System.out.println("Ba mươi sáu(36) con");
System.out.println("Một trăm(100) chân chẵn");
System.out.println("Hỏi mấy gà, mấy chó?\n");
for(int i = 9; i < 25; i++){
if((i*2+(36-i)*4)==100){
System.out.println("Số gà là: " + i);
System.out.println("Số chó là: " + i);
}
}
}
}

C#

class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Gia bai toan dan gian trong C#");
            Console.Write("Vua ga vua cho\n");
            Console.Write("Bo lai cho tron\n");
            Console.Write("Ba muoi sau(36) con\n");
            Console.Write("Mot tram(100) chan chan\n");
            Console.WriteLine("Hoi may ga, may cho?\n");
            for (int i = 9; i <= 25; i++)
            {
                if ((2 * i + (36 - i) * 4) == 100)
                {
                    Console.WriteLine("So ga la: " + i);
                    Console.WriteLine("So cho la: " + (36 - i));
                    break;
                }
            }
            Console.ReadKey();
        }
    }

ASP.NET

void GiaiBaiToanDanGian()
    {
        StringBuilder sb = new StringBuilder();
        for (int i = 9; i < 25; i++)
        {
            if ((i * 2 + (36 - i) * 4) == 100)
            {
                sb.AppendLine("Số gà là: " + i);
                sb.AppendLine("Số chó là: " + (36 - i));
            }
        }
        Label1.Text = sb.ToString();
    }

PHP




Bài toán dân gian


Giải bài toán dân gian trong PHP

Vừa gà vừa chó 

Bó lại cho tròn 

Ba mươi sáu(36) con 

Một trăm(100) chân chẵn

Hỏi mấy gà, mấy chó?



';
echo 'Số chó là: '.(36 - $i);
}
}
?>

Javascript


alert('Giai bai toan dan gian');for(i = 9; i < 25; i++){if((i * 2 + (36-i)*4) === 100){alert('Số gà là: ' + i + '; Số chó là: '+(36-i));}}

Chúc các bạn học lập trình vui vẻ