Thứ Sáu, 12 tháng 9, 2014

Cách tạo website với drupal 7

Drupal 7 là phần mềm mã nguồn mở dùng để phát triển gần như tất cả các loại website, từ blog và site nhỏ đến mạng xã hội cộng tác lớn, đồng thời lại dễ sử dụng. Bạn có thể trải nghiệm Drupal 7 mà không cần cài đặt phần mềm, không cần có hosting lẫn domain, nhờ dịch vụ trực tuyến Drupal Gardens.
Drupal là một hệ thống quản trị nội dung (CMS) mã nguồn mở dựa trên ngôn ngữ PHP. Trong tháng 1 vừa qua, Dries Buytaert đã cho ra mắt phiên bản Drupal 7 với nhiều cải tiến về giao diện và tính năng, giúp người dùng tạo ra một website có cấu trúc linh hoạt với khả năng tùy biến cao cho nhiều đối tượng như bài viết, bình luận, gán thuộc tính cho cả tag… Nếu chưa có điều kiện mua hosting, domain để tự mình trải nghiệm Drupal 7, nhưng bạn học lập trình web với Drupal 7 vẫn có thể dùng thử mã nguồn này trên Internet bằng dịch vụ Drupal Gardens. Theo giới thiệu tại trang chủ, bạn sẽ dễ dàng tạo ra một website chỉ trong thời gian là 15 phút, với nhiều module như Forum, Blog, Contact, Comment, Menu, Aggregator, vv…
1. Đăng ký tài khoản
Đầu tiên, bạn truy cập vào website www.drupalgardens.com rồi bấm Create a free site để tiến hành đăng ký. Ở trang mới hiện ra, bạn điền đầy đủ các thông tin Site Url – tên website (tên miền con dạng abc.drupalgardens. com), Username – tên tà i khoản, Password – mật khẩu, E-mail address – địa chỉ thư điện tử, Word verification – nhập mã xác thực, bấm Continue. Đến bước Choose a template, bạn chọn một mẫu trong khung bên dưới dòng chữ Select a pre-built template, gồm có bốn mẫu: Campaign template (tạo diễn đàn để thảo luận và trao đổi), Product template (tạo một trang web để giới thiệu sản phẩm hoặc dịch vụ), Blog template (tạo một trang tin cá nhân), Create your own template (tự chọn những tính năng hay những module tích hợp trong hai mục Features, Pages and Blocks). Bên cạnh những thiết lập mặc định của mẫu, bạn có thể thêm hay bớt tính năng tùy theo nhu cầu lập web, bấm Create site.
Tiếp theo, bạn cần đăng nhập vào hộp thư đã đăng ký để kích hoạt tài khoản (tìm thư Account detail for…) và xác thực thông tin để tránh bị xóa tài khoản (tìm thư Please verify your email…).
Lưu ý, để website hiển thị đầy đủ nội dung, bạn nên sử dụng trình duyệt Google Chrome trong quá trình tạo website.
2. Quản lý website
Sau khi đã hoàn tất các bước khởi tạo website, bạn đăng nhập vào tài khoản quản trị do dịch vụ cung cấp để bắt đầu việc thiết kế website. Trong cửa sổ quản trị website, bạn sử dụng những tính năng trên thanh menu để quản lý website, gồm có các tính năng sau: Dashboard (nơi quản lý toàn bộ thông tin liên quan đến website), Content (khu vực quản lý bài viết, bình luận, kiểm duyệt các tập tin đa phương tiện), Structure (quản lý cấu trúc của website), Appearance (thiết lập và tạo mới giao diện), People (nơi quản lý thành viên, nội quy trang web, phân quyền cho thành viên), Modules (kích hoạt hoặc ngưng sử dụng các module tính năng), Configuration (quản lý những thiết lập quan trọng), Reports (những báo cáo cần thiết liên quan đến hoạ t động của website), My sites (quản lý website đã tạo, tạo mới website).
- Thiết lập giao diện
Nếu chỉ với giao diện mặc định mà Drupal Gardens cung cấp lúc khởi tạ o, website chưa thể đáp ứng được yêu cầu thiết kế, bạn cần phải thay đổi một số thiết lập về giao diện ở tính năng Appearance.
Ở thẻ Themes, bạn chọn lại một mẫu giao diện trong danh sách Gardens themes hoặc chọn My themes để sử dụng giao diện đã chọn. Bên cạnh đó, bạn sử dụng tính năng Palettes trong thẻ Brand cho việc phối màu trên giao diện, các bảng màu trong danh sách khá phù hợp với nhiều website hiện nay. Tính năng Logo giúp bạn thêm vào biểu tượng (Logo) và hình nhỏ trên thanh tiêu đề (Favicon), bấm và o nút Browse rồi duyệt đến tập tinh ảnh đã chuẩn bị. Đối với cách bố trí nội dụng trên website, thẻ Layout đưa ra một số cách cho bạn lựa chọn, với hình minh họa là ba khung chữ nhật chứa ba chữ A, B, C. Thẻ Style quy định font, cỡ, màu sắc và kiểu chữ, đường viền và khoảng cách giữa các khung, hình nền và cách hiển thị, bạn bấm vào đối tượng cần thay đổi trên trang và thiết lập. Khi xong, bạn bấm Save as để lưu lại, nhập vài ký tự vào hộp thoại Save theme as hiện ra.
- Thay đổi cấu trúc website Để thay đổi vị trí của cá c khung tính năng trên trang web, bạn bấm vào liên kết Block trong thẻ Structure. Với mỗi khung tính năng ở cột Block, bạn chọn vị trí tương ứ ng ở cộ t Region và bấm configure để thêm một vài thiết lập nâng cao. Ví dụ, với khung Site name (ở mục Header), bạn có thể chọn lại vị trí khác thay vì vị trí mặc định Header, bấm Configure. Trong trang tiếp theo, bạn thay đổi tên ở ô Site name, chọn vị trí trong khung Region Settings, thiế t lậ p khả năng trông thấy khung tính năng (Block) ở các đối tượng Pages, Contents styles, Roles và Users. Khi xong, bấm Save block để thay đổi có hiệu lực. Bạn thực hiện tương tự Site slogan – câu khẩu hiệu trên website.
Tiếp theo, bạ n cần thay đổi các menu mặc định Home, About, Blog, New, Forum, Contact. Trong thẻ Stucture, bạn sử dụng tính năng Menus để tạo mới, chỉnh sửa, bố trí lại các menu. Ứng với mỗi menu trong cột Menu link, bạn có thể ngưng kích hoạt chúng bằng cách bỏ dấu kiểm ở ô tương ứng của cột Enable. Ngoài ra, bạn bấm vào liên kết Edit để chỉnh sửa các thuộc tính Menu link title – tên menu, Path – đường dẫn, Description – chú thích (được hiển thị khi đưa trỏ chuột đến menu), Parent link – chọn menu chứ a menu đang thiết lập, bấm Save.
Đối với Forum, bạn bấm Edit forum để chỉnh sửa nhóm chuyên mục mặc định Discussion. Bạn nhập vào ô Forum name – nhóm chuyên mục, Description – gợi ý ngắn gọn về nhóm chuyên mục, bấm Save. Nếu cần thêm nhóm chuyên mục thì bạn bấm Add forum rồi điền vào các thông tin, bấm Save. Lưu ý, bạn có thể nhập tiếng Việt có dấu bằng các font chữ hỗ trợ bảng mã Unicode.
- Thêm vào module
Ngoài những module đã tích hợp trong lúc khởi tạo website, bạn còn có thể thêm và o các module khá c bằng thẻ Module. Một số module chưa được kích hoạt như Aggregator – tính năng cập nhật tin tức thời (RSS, RDF, Atom feeds), Content Translation – cho phép dịch sang các ngôn ngữ khá c, Poll – cho phép khảo sát với dạng câu hỏi trắc nghiệm, Gallery – bộ sưu tập các tập tin đa phương tiện, Google Analytics – cho phép nhúng mã phân tích website của Google… Khi xong, bấm Save Configuration.
- Quản lý nội dung
Thẻ Content giúp người quản trị dễ dàng quản lý nội dung, bài viết, kiểm duyệt phần bình luận trên website. Để thêm vào bài viết mới, bạn bấm Add content rồi chọn kiểu nội dung cần đăng trong danh sách Home, gồm có Basic page – nội dung cơ bản, Blog entry – bài viết trên blog, Forum topic – chủ đề thảo luận trên diễn đàn, Gallery – phòng trưng bày, News item – tin tức mới, Poll – khảo sát trực tuyến. Ví dụ, với dạng bài viết tại News item, bạn nhập tiêu đề bài viết vào ô Title, từ khóa ở ô Tags (cách nhau bởi dấu phẩy), sử dụng các công cụ soạn thảo văn bản để nhập nội dung bài viết vào khung Body, bấm Add media để chèn hình ảnh, âm thanh và video. Ngoài ra, bạn có thể thêm một vài tùy chọn nâng cao như Menu Settings, URL path settings, Authoring imformation, Publishing options, xong bấm Save. Nếu số lượng bài viết trên website khá nhiều thì bạn dùng tính năng bộ lọc Filter trong khung Show any items where để tìm nhanh bài viết. Các bài viết sẽ được phân loại theo tình trạng hiển thị (Status), kiểu nội dung (Type).
Thẻ Comments là nơi quản lý những ý kiến bình luận của khách truy cập website. Danh sách ý kiến được phân làm hai loại Publish comment (ý kiến được hiển thị trên web), Unapproved comments (ý kiến chưa được kiểm duyệt). Để cho phép hiển thị, bạn đánh dấu chọn vào ô phía trước ý kiến đã duyệt rồi chọn Publish the selected comments, bấm Update.
Ngoài các tính năng đã nêu, Drupal Gardens còn nhiều tính năng khác giú p quản lý tốt website như tìm kiếm, quản lý thành viên, phân quyền quản trị website, gửi thư mời gia nhập, đổi tên miền, báo cáo hoạt động website…

Thứ Năm, 11 tháng 9, 2014

Các hàm thông dụng trong wordpress

WordPress có một thư viện các hàm viết sẵn khổng lồ (Ở phiên bản 3.0.1 là khoảng 3240 hàm PHP). Ở đây mình chỉ giới thiệu một số hàm thông dụng trong template WordPress
Hàm lấy thông tin website
get_bloginfo($show)
$show
  • ‘name’ – Trả về tiêu đề Website
  • ‘description’ – Trả về mô tả Website
  • ‘admin_email’ – Trả về email của admin
  • ‘site_url’ – Trả về url của Website
  • 'Home’ – Trả về url trang ch
Các hàm lấy nội dung
  1. get_header(‘{tên_header}’) - Lấy nội dung từ file header_{tên_header}.php . Ví dụ: lấy nội dung file header_trang_chu.php <?php get_header(‘trang_chu’);?>. File header mặc định là header.php ta gọi <?php get_header();?>
  2. get_footer(‘{tên_footer}’) – Lấy nội dung từ file footer_{tên_footer}.php .Ví dụ: lấy nội dung file footer_trang_chu.php – <?php get_footer(‘trang_chu’);?>. File footer mặc định là footer.php ta gọi <?php get_footer();?>
  3. get_sidebar(‘{tên_sidebar}’) – Lấy nội dung từ file sidebar_{tên_sidebar}.php .Ví dụ: lấy nội dung file sidebar_lienhe.php – <?php get_sidebar(‘lienhe’);?>. File sidebar mặc định là sidebar.php ta gọi <?php get_sidebar();?>
Các hàm sử dụng cho Post, Page, Custom Post Type, Attachment
  1. the_ID() – In ra ID của Bài Viết hiện tại. Nếu muốn lấy ID Bài viết ta dùng hàm get_the_ID() (có thể dùng$post->ID)
  2. the_title() - In ra Tiêu đề của Bài Viết hiện tại. Lấy Tiêu đề Bài viết ta dùng get_the_title() (có thể dùng$post->post_title)
  3. the_content() - In ra Nội dung Bài viết (đã qua filter the_content). Lấy Nội dung Bài viết get_the_content()(có thể dùng $post->post_content)
  4. the_author() - In ra Tên tác giả Bài viết. Lấy tên tác giả ta dùng get_the_author(). Lấy ID của author$post->post_author
  5. the_category(‘,’) – In ra danh sách danh mục của bài viết, cách nhau bởi dấu ‘,’
  6. the_time(‘{định dạng ngày tháng}’) – In ra thời gian Bài viết được publish. Ví dụ: the_time(‘d-m-Y’) sẽ in ra 04-09-2013
  7. the_permalink() – In ra liên kết tới bài viết. Lấy liên kết bài viết get_the_permalink() hoặcget_permalink($post->ID)
  8. the_post_thumbnail($size,$attr) - In ra hình featured của bài viết. Ví dụ:the_post_thumbnail(‘large’,array(‘alt’='Test’))

Vòng lặp, điều kiện ‘WordPress’
  1. <?php if(have_posts()): ?> Nếu có Bài viết
  2. <?php endif; ?> Đóng điều kiện
  3. <?php while(have_posts()): the_posts(); ?> Xem tất cả các Post thỏa điều kiện
  4. <?php endwhile;?> Kết thúc vòng lặp

Sử dụng Ajax trong lập trình ASP.NET

Ajax ngày càng được sử dụng rộng rãi, nó giúp xoá mờ khoảng cách giữa máy tính (desktop) và Internet. Trong số báo TGVT A tháng 12/2005 tác giả Phạm Công Định đã có bài giới thiệu tổng quát về kỹ thuật lập trình web sử dụng Ajax, tiếp tục chủ đề này, trong bài viết này tôi giới thiệu một công cụ phát triển ứng dụng kiểu Ajax với ASP.NEThttp://viettamduc.com/khoa-hoc/dao-tao-aspnet/khoa-hoc-lap-trinh-website-tren-ngon-ngu-aspnet.

Ajax.NET
Ajax.NET là thư viện Ajax cho .NET được phát triển bởi tác giả người Đức tên là Michael Schwarz (info@schwarz-interactive.de), mục đích nhằm giúp lập trình viên .NET dễ dàng khai thác sức mạnh của Ajax trong các ứng dụng web của mình. Thư viện này được cung cấp miễn phí trên Internet, bạn có thể yêu cầu tác giả cho tải về cả mã nguồn nếu muốn. Thư viện Ajax.NET hiện cũng được phát triển dưới một dự án nguồn mở tên là BorgWorX Ajax.NET (http://www.borgworx.net/) với nhiều chức năng mở rộng. Ở đây tôi chỉ đề cập tới phiên bản Ajax.NET đầu, sau khi làm quen với thư viện này bạn có thể dễ dàng khám phá phiên bản mở rộng trong dự án nguồn mở trên, thậm chí tham gia dự án này.
 
Ajax.NET giúp lập trình viên sử dụng Ajax mà không phải bận tâm đến mã lệnh tương tác trực tiếp với các đối tượng XMLHttpRequest, xử lý dữ liệu XML, DOM. Bằng cách sử dụng những khả năng của môi trường lập trình .NET như HttpHandler, reflection, attributes... nó tự động sinh ra những mã lệnh cần thiết giúp việc tương tác giữa client/server hoàn toàn "trong suốt" cũng như đơn giản hoá việc gọi hàm, xử lý những dữ liệu phức tạp như mảng, bảng, đối tượng trên phía client.

Để hiểu rõ về cách hoạt động cũng như sử dụng Ajax.NET trong một ứng dụng ASP.NET, tôi trình bày từng bước thực hiện một ứng dụng minh hoạ đơn giản. Ứng dụng là một form đăng ký thành viên như chúng ta thường gặp trên các diễn đàn, hoặc đăng ký tài khoản e-mail... Nguyên tắc hoạt động của form là mỗi khi có thành viên mới đăng ký sẽ sử dụng Ajax để kiểm tra xem tên (username) đã có chưa và hiển thị danh sách các thành phố dựa trên quốc gia mà thành viên sinh sống. Các thay đổi sẽ thực hiện ở "hậu trường" mà không phải thực hiện nạp lại toàn bộ trang web hay lưu tạm một lượng lớn dữ liệu ở client như cách thông thường.

Bạn có thể tham khảo ứng dụng minh hoạ của bài viết này tại http://www.mobicolors.com/Tiendq/AjaxDemo/, file zip chứa toàn bộ mã nguồn của ứng dụng cũng có thể tải về từ địa chỉ trên. Ứng dụng này được xây dựng với Visual Studio 2005 phiên bản CTP 09/2005, sử dụng ngôn ngữ C#, tuy nhiên các kỹ thuật trình bày ở đây sẽ không có gì khác biệt khi sử dụng với VB.NET hoặc Visual Studio .NET 2003.

Cài đặt ban đầu
Trước tiên cần tạo một website mới trong VS2005, sau đó bạn tạo một tham chiếu (reference) tới thư viện Ajax.NET (file AjaxPro.dll nếu sử dụng với VS.NET 2003, hoặc file AjaxPro.2.dll nếu là VS2005). Thư viện Ajax.NET Professional sử dụng trong bài viết này là phiên bản mới nhất 5.11.4.2, có thể tải về từ http://www.schwarz-interactive.de.

Tiếp theo, cài đặt HttpHandler của Ajax.NET vào website vừa tạo bằng cách thêm các dòng sau đây vào file Web.config (nếu sử dụng VS2005 bạn phải tự thêm file này vào website).


type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>

...


Các bước trên chỉ cần thực hiện một lần với một website, sau đó chúng ta chuyển sang phần khai báo và viết các hàm xử lý trên phía server.

Xây dựng các hàm Ajax phía server
Nhìn chung việc xây dựng các hàm để xử lý những yêu cầu từ phía client không có gì khác so với các các quy định của .NET, ngoại trừ một việc là những hàm này sẽ được "đánh dấu" bằng một thuộc tính tên là AjaxMethodAttribute và có một số hạn chế sẽ được trình bày ở phần sau. Dưới đây là khai báo của hàm CheckAvailablity sử dụng trong ứng dụng để kiểm tra xem một username đã được đăng ký chưa. Để tập trung vào chủ đề chính, tôi chỉ đơn giản lưu username vào một biến session, như vậy là trong cùng một session sẽ không đăng ký được hai thành viên có username giống nhau.

[AjaxPro.AjaxMethod]

public bool CheckAvailablity(string userName)
{
  return (null == Session[userName]);
}

Hàm CheckAvailability hoàn toàn có thể được sử dụng lại trong các hàm khác ở phía server mà không phải thay đổi gì cả, ví dụ hàm này được dùng để kiểm tra username khi người sử dụng nhấn vào nút Sign Up, phát sinh sự kiện postback gửi dữ liệu về xử lý trên server:

protected void btnSignUp_Click(object sender, EventArgs e)
{
  if (CheckAvailablity(txtUserName.Text))
  {
    // register new user...
  }
  // ...
}

Cũng tương tự cách khai báo như trên, chúng ta có hàm GetStateList dùng để trả về danh sách các thành phố của quốc gia tương ứng mỗi khi người sử dụng thay đổi tên quốc gia ở phía client. Hàm này trả về một đối tượng kiểu DataTable, tuy nhiên với sự hỗ trợ của Ajax.NET sẽ không có khó khăn gì để xử lý và hiển thị dữ liệu này trên form ở phía client.

[AjaxPro.AjaxMethod]

public DataTable GetStateList(int countryIndex)
{
  DataTable dt = new DataTable();
  dt.Columns.Add("StateCode", typeof(string));
  dt.Columns.Add("StateName", typeof(string));
  // populate state list
  return dt;
}

Cuối cùng, để các hàm trên có thể được gọi từ phía client thì chúng ta cần phải đăng ký với Ajax.NET. Sau khi đăng ký với Ajax.NET, thường thực hiện trong hàm xử lý sự kiện Page_Load của trang web, Ajax.NET sẽ tự động sinh ra các mã lệnh JavaScript cần thiết của các hàm này ở phía client. Khi các hàm ở client được gọi thực hiện, dữ liệu sẽ chuyển tới các hàm tương ứng trên server để xử lý và trả về kết quả sau đó.

public partial class Tiendq_AjaxDemo : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    AjaxPro.Utility.RegisterTypeForAjax(typeof(Tiendq_AjaxDemo));
    if (false == IsPostBack)
    {
      // ...
    }
  }
  // ...
}

Sử dụng hàm Ajax ở client
Sau khi xây dựng xong các hàm Ajax phía server, chúng ta có thể sử dụng các hàm này ở client (mã lệnh viết bằng JavaScript) với cú pháp như đã khai báo ở phía server (mã lệnh viết bằng C#), việc gọi hàm có thể thực hiện đồng bộ (synchronous) hoặc bất đồng bộ (asynchronous). Khi gọi hàm theo kiểu synchronous sẽ nhận được dữ liệu trả về tức thời (hoặc phải chờ tuỳ theo tốc độ của kết nối tới server), khi gọi hàm theo kiểu bất đồng bộ (asynchronous) thì dữ liệu sẽ được trả về qua một hàm callback, đoạn mã lệnh thực hiện gọi hàm trong trường hợp này sẽ tiếp tục thực hiện và không cần chờ dữ liệu trả về từ phía server. Hàm callback sẽ được gọi khi có dữ liệu từ server trả về sau đó.

Gọi hàm theo kiểu đồng bộ:

function OnCheckAvailablity(userName)
{
  var res = Tiendq_AjaxDemo.CheckAvailablity(userName);
  alert(res.value);
}

Gọi hàm theo kiểu bất đồng bộ:

function OnCheckAvailablity(userName)
{
  Tiendq_AjaxDemo.CheckAvailablity(userName,
  OnCheckAvailablity_Callback);
}

function OnCheckAvailablity_Callback(res)
{
  if (null != res.error)
  {
    alert("Error message goes here!");
    return;
  }

  if (res.value)
  {
    // process data
  }

  else
  {
   // raise error
  }
}

Trong cả hai trường hợp gọi hàm trên, dữ liệu trả về là một đối tượng có cấu trúc như sau:
 Tên trường  Mô tả 
 Value  Dữ liệu trả về khi gọi thực hiện hàm phía server, kiểu dữ liệu thực sự phụ thuộc vào khai báo hàm phía server (có thể là chuỗi ký tự, số nguyên, mảng,...). 
 Error  Thông báo lỗi nếu có. 
 Request  Dữ liệu trả về của đối tượng XMLHttpRequest, trường hợp muốn lấy thêm các thông tin trả về khác. Xem tài liệu về đối tượng XMLHttpRequest để biết chi tiết. 
 Context  Tham chiếu tới đối tượng phía client. 
Sau đây sẽ là phần mã lệnh gọi thực hiện các hàm CheckAvailablity và GetStateList ở phía client mà chúng ta đã khai báo ở phần trên. Hàm CheckAvailablity sẽ được gọi thực hiện khi người sử dụng nhấn vào nút Check để kiểm tra username muốn đăng ký đã tồn tại chưa, hàm GetStateList được gọi mỗi khi người sử dụng chọn quốc gia khác nhau để cập nhật lại danh sách thành phố của quốc gia đó:

function OnCheckAvailablity(userName)
{
    if (userName.length > 0)
        Tiendq_AjaxDemo.CheckAvailablity(userName,
  OnCheckAvailablity_Callback);
    else
        alert("User name is required field.");
}
function OnCheckAvailablity_Callback(res)
{
    if (null != res.error)
    {
        alert("Error message goes here!");
        return;
    }
   
    if (res.value)
    {
        document.all("lblCheckStatus").innerHTML = "" + document.forms[0].txtUserName.value + " is available."
        document.all("lblCheckStatus").className = "cssAvailable";
    }
    else
    {
        document.all("lblCheckStatus").innerHTML = "" + document.forms[0].txtUserName.value + " is not available."
        document.all("lblCheckStatus").className = "cssNotAvailable";
    }
}
function OnSelectCountry(countryIndex)
{
    if (countryIndex > 0)
        Tiendq_AjaxDemo.GetStateList(countryIndex, GetStateList_Callback);
    else
    {
        ResetStateList();
        document.forms[0].cboStates.disabled = true;
    }
}
function GetStateList_Callback(res)
{
    if (null != res.error)
    {
        alert("Error message goes here!");
        return;
    }
   
    var dt = res.value;
    if ((null != dt) && ("object" == typeof(dt)))
    {
        document.forms[0].cboStates.disabled = false;
        ResetStateList();
        var oItem = null;
        for (var i = 0; i < dt.Rows.length; ++ i)
        {
            oItem = document.createElement("OPTION");
            oItem.text = dt.Rows[i].StateName;
            oItem.value = dt.Rows[i].StateCode;
            document.forms[0].cboStates.add(oItem);
        }
    }
}

Nhờ có Ajax.NET, ở đoạn mã lệnh JavaScript trên kiểu dữ liệu phức tạp DataTable trả về từ hàm GetStateList có thể xử lý dễ dàng theo cách quen thuộc như dùng ngôn ngữ của .NET (C#, VB.NET). Hoàn toàn không cần thao tác với XML, hay DOM.
Một số chú ý
Ở ứng dụng này tôi mới chỉ minh hoạ trường hợp gọi hàm được khai báo trong cùng một lớp của trang web, trường hợp khai báo hàm trong một Web User Control hoặc trong một lớp khác thì cần phải đăng ký với Ajax.NET như sau.

Khai báo đăng ký Ajax.NET cho Web User Control, trong đó WebUserControl1 là tên của lớp user control có các hàm sử dụng Ajax:

AjaxPro.Utility.RegisterTypeForAjax(typeof(WebUserControl1), this.Page);

Khai báo đăng ký với Ajax.NET cho lớp Class1 có các hàm sử dụng Ajax:

AjaxPro.Utility.RegisterTypeForAjax(typeof(Class1));

Tương tự, nếu kiểu dữ liệu trả về là một đối tượng tự xây dựng thì ta cũng phải đăng ký như Class1 ở trên.

Như đã đề cập ở phần trên của bài viết, có một số hạn chế khi xây dựng các hàm Ajax để gọi từ phía client cần phải chú ý:

• Để truy cập các biến Request, Response, Session, Cache... cần phải sử dụng thông qua biến HttpContext.Current.

• Nếu muốn hàm Ajax sử dụng các biến lưu trong session thì phải chỉ rõ khi khai báo thuộc tính AjaxMethodAttribute. Ví dụ hàm CheckAvailablity ở trên cần phải được khai báo đúng như sau:

AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.Read)]

public bool CheckAvailablity(string userName)
{
   return (null == Session[userName]);
}

Trong đó HttpSessionStateRequirement là một enum định nghĩa các kiểu truy nhập vào biến session mà hàm CheckAvailability sẽ sử dụng.

• Khi hàm Ajax được gọi sẽ không phát sinh ra sự kiện postback ở phía server, do đó hàm xử lý sự kiện Page_Load cũng sẽ không được gọi, và hàm Ajax không thể truy cập các control có trên trang web (server control).

Ứng dụng đơn giản trên chỉ là minh hoạ cho việc sử dụng thư viện Ajax.NET với ASP.NET, còn nhiều tính năng nữa của thư viện này chưa trình bày được trong phạm vi bài viết như caching, hỗ trợ chuyển đổi kiểu dữ liệu, context... Bạn có thể tự tìm hiểu chi tiết sau khi đã làm quen với thư viện này.

Nghề lập trình muốn thành công phải có đam mê

Chỉ với một chiếc máy tính, một căn phòng nhỏ cùng theo mơ ước được viết lách các lệnh code, rồi tự tay tạo ra các chương trình đã trở thành mục tiêu của biết bao chàng trai, cô gái theo đuổi ngành Công nghệ Thông tin (CNTT). Tuy nhiên, để trở thành một lập trình viên giỏi bạn phải thực đam mê và quyết tâm theo đuổi ước mơ.


Không phải nghề khô khan
Công việc của người lập trình được gọi là software engineering. Để làm ra một phần mềm, trước hết người ta phải tạo ra một “bản thiết kế” (framework), mỗi lập trình viên đảm nhiệm một phần việc, sau đó các phần được kết nối lại tạo thành một sản phẩm hoàn chỉnh. Lập trình viên được ví là những thợ “coding” (người ngồi gõ những dòng lệnh (code) trên máy tính), làm ra các phần mềm hoặc chỉnh sửa, phát triển nó dựa trên các công cụ lập trình.
Đối với dân xã hội, được bay nhảy ngoài cuộc sống, được va chạm với mọi người bằng ngôn ngữ đời thường thì ngược lại, Lập trình viên (LTV) lại sử dụng và giao tiếp bằng ngôn ngữ máy tính như Java, C++, C#, php, Asp, ASP.Net…, những ngôn ngữ tưởng chừng như khô khan nhưng lại không phải vậy.
Khác với các ngành nghề khác, LTV là nghề có đặc thù riêng biệt. Bạn muốn trở thành LTV thì cần phải có sự logic trong tư duy, sự tỉ mi chi tiết, vừa có khả năng làm việc nhóm, vừa phải có tính tự lập cao… Tất cả những yếu tố đó tạo nên sự sáng tạo, say mê trong công việc đối với dân Lập trình. Đặc biệt đối với những bạn theo đuổi nghề lập trình web, nếu không có sự sáng tạo sẽ không tạo lên được các trang web đẹp mắt phù hợp với thị yếu người xem.
Có thể nói, suy nghĩ logic là một điều quan trọng nhất trong lập trình. Bạn phải có đủ nhạy bén, linh hoạt và khả năng phán xét cao để giải quyết một vấn đề triệt để bằng phương pháp logic. Vì thế, nếu không có khả năng suy luận logic thì chắc chắn một điều nghề lập trình không thích hợp với bạn. Bạn sẽ cảm thấy nhàm chán và nhức đầu khi theo đuổi các đoạn code của chương trình, các vấn đề về debug (gỡ rối), về lỗi, về dấu chấm, dấu phẩy…
Theo đuổi ngành CNTT nói chung cũng như ngành LTV nói riêng, bạn sẽ luôn linh hoạt trong công việc cùng với sự sáng tạo trong kỹ năng, phân tích yêu cầu của dự án, đưa ra giải pháp thiết kế công nghệ mới. Điều này sẽ giúp bạn không bị động và nhàm chán trong công việc, cuộc sống sẽ luôn bận rộn và thú vị hơn.
Hãy chú ý, ngoài khả năng sáng tạo và logic, bạn cần có các kỹ năng làm việc theo nhóm và độc lập. Đây là yếu tố giúp bạn hoàn thành công việc nhanh hay chậm, khoa học hay không khoa học, hiệu quả hay thất bại. Thời gian rất quan trọng, bạn cần phải lập kế hoạch cụ thể, lên trình tự cho công việc của bạn để bạn hoàn thành dự án đúng quy định.
Có thể, với nhiều bạn, làm việc một mình dễ dàng nhưng khi kết hợp với nhóm lại trở nên lúng túng và khó hòa nhập. Học cách làm việc theo nhóm không chỉ giúp bạn hoàn thành tốt công việc mà còn nâng cao tinh thần đồng đội, khả năng giao tiếp và truyền đạt tốt hơn.
“Tự lực cánh sinh”
Lướt qua nhiều diễn đàn, bạn sẽ không khỏi bối rối, nghi ngại khi nộp hồ sơ vào học ngành CNTT. Nhiều thành viên cho rằng, đây là một nghề vất vả và khó thành công khi mà hiện nay CNTT đang bão hòa, nhiều trường đua nhau mở khoa, ngành liên quan đến CNTT; hay như bạn lo ngại về các chương trình học liệu có thực sự hiệu quả hay xa rời thực tế.
Nhưng đó chỉ là một khía cạnh nhỏ của vấn đề. Không chỉ riêng ngành CNTT, mà đối với bất cứ ngành nào cũng đều bão hòa và khó xin việc nếu như sinh viên luôn thụ động trong các bài giảng của giáo viên, không trao dồi kiến thức ngoại ngữ, không có khả năng nắm bắt cơ hội việc làm, thì chắc chắn sẽ khó thành công trong công việc cũng như cuộc sống.

Sinh viên cần chủ động hơn nữa trong việc học liên quan đến CNTT
Xã hội ngày càng phát triển, ngành CNTT luôn được nhà nước ưu tiên hàng đầu, rất nhiều doanh nghiệp nước ngoài vào Việt Nam đầu tư trong lĩnh vực Công nghệ. Vì thế, đặc thù của ngành không chỉ đòi hỏi các bạn có kiến thức chuyên môn thông qua trường học, mà quan trọng là kỹ năng làm việc thực tế. Điều này phụ thuộc rất nhiều vào nỗ lực của bạn, hãy biết tận dụng những cơ hội việc làm về CNTT dành cho sinh viên để bạn trao dồi thêm kinh nghiệm khi còn trong ghế nhà trường.
Bạn không chạy, người khác vẫn chạy. Bạn không giỏi ngoại ngữ, người khác vẫn giỏi. Vậy ai sẽ là người thất bại nếu không phải là bạn. Vì vậy, ngay từ bây giờ hãy lựa chọn cho mình môi trường học CNTT có sự tích hợp của cả kỹ năng chuyên ngành lẫn ngoại ngữ để phù hợp với xu thế phát triển của xã hội.
Bạn có thể lựa chọn các trường Đại học hoặc lựa chọn các trường đào tạo chuyên về CNTT. Sự lựa chọn thuộc về bạn, quan trọng dù bạn học ở đâu thì cũng hãy luôn chủ động và tự mình học hỏi, đừng quá phụ thuộc vào sách vở và thầy cô. Và đặc biệt, với nghề LTV hãy bắt đầu học từ đam mê, có như vậy mới thực sự giúp bạn thành công.

Hướng dẫn tạo hiệu ứng 3D động cho logo trong Photoshop CS6

Trong hướng dẫn nhanh này, chúng ta sẽ tìm hiểu cách tạo ra logo có hiệu ứng chuyển động 3D bằng cách sử dụng Photoshop CS6. Hãy bắt đầu cùng học photoshop CS6.


Đầu tiên ta lấy logo của Envato để thực hành nhé!!

logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Bước 1

Mở logo trong Photoshop. Chú ý, đây là file PND đã transparency— Đây là điều rất quan trọng để chúng ta chuyển đổi nó sang 3D. Bạn không cần thiết phải điều chỉnh kích thước của hình ảnh, chúng ta chỉ cần thay đổi một chút ở cuối sau khi chúng ta Save nó như Animation (hình ảnh động).


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Bước 2

Chọn công cụ Crop Tool và mở rộng không gian ở trên và dưới như hình minh họa. Nhấn Enter để áp dụng thay đổi.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Sử dụng công cụ Rectangular Marquee Tool để chọn text ' envato’ (hình ảnh lá không chọn) và click vào icon “Add Layer Mask” trên bảng Layers Panel. Điều này làm cho file chỉ còn text.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Bước 3

Để cho mọi việc dễ dàng hơn, đổi tên layer chỉ có text là “Text”. Chọn và tạo bản sao của Layer này, đổi tên là “Leaf,” sau đó, click vào layer Mask (mục đích của mask là chúng ta có thể chỉnh sửa). Nhấn Command/Ctrl + I để đảo ngược vùng chọn và do đó, lá sẽ được chọn. Kết quả sẽ giống với hình ảnh ban đầu của chúng ta, chỉ khác là chúng ở 2 layer riêng biệt.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Chọn Layer “Leaf’, vào Layer > Layer Mask > Apply. Điều này sẽ loại bỏ tất cả các điểm ảnh (pixels) đã ẩn bởi mask.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Tiếp theo, vào 3D > New 3D Extrusion From Selected Layer. Điều này sẽ kích hoạt tự động lưới 3D trên Scene của chúng ta. Nếu không, bạn có thể vào Window > Workspace > 3D để mở. Chú ý, Layer “Leaf” bây giờ xuất hiện như một Layer 3D object.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Bước 4

Trong bảng 3D, chọn đối tượng (object) “Leaf” (ký hiệu là icon ngôi sao) và vào Properties Panel, thiết lập Extrusion Depth là 35. Ngoài ra, bỏ chọn Catch Shadows và Cast Shadows.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Bây giờ, chúng ta cần Move object “Leaf” ở vị trí trung tâm của Scene. Trước khi chúng ta thực hiện, nó sẽ giúp thay đổi camera để có được một cái nhìn tốt hơn. Chọn Layer “Current View” trong bảng 3D Panel, sau đó chọn View là “Top”.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Trên Canvas, sử dụng widget trên màn hình để xác định vị trí Leaf ở trung tâm của Scene cho chính xác (thể hiện ở điểm giao giữa 2 đường xanh và đỏ) .


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Bước 5

Hiện tại, Canvas của chúng ta đang hiển thị ở Top View. Chọn “Default Camera” trong bảng 3D Panel để Reset lại camera. Chú ý rằng, object Leaf không đặt đúng ở vị trí và chúng ta sẽ chỉnh sửa ở bước tiếp theo.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Bây giờ, điều chỉnh Leaf đúng vị trí của nó. Để thực hiện, sử dụng các công cụ Camera ở menu trên cùng và dịch chuyển camera cho đến khi logo được đặt đúng. Bằng cách dịch chuyển Camera chúng ta đã có thể làm cho object Laef trở về đúng vị trí của nó. Điều quan trọng là chúng ta không di chuyển object Leaf như chúng ta đã làm ở bước 4.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Bước 6

Tiếp theo, chúng ta sẽ tạo hình ảnh chuyển động (Animate)—click vào Create Video Timeline ở bảng Timeline Panel. Nếu bạn không tìm thấy bảng Timeline Panel, vào Window > Timeline.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Sau khi đã chọn, bạn sẽ thất tất cả các Layer của mình được hiển thị như các Layer video trong Timeline. Trong trường hợp này, chúng ta sẽ có 2 layer video riêng biệt.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Bước 7

Khi chúng ta muốn tạo Animate cho object “Leaf”, chúng ta cần phải truy cập vào các thuộc tính của nó trong Timeline. Twirl-down Layer “Leaf” để hiển thị tất cả các thuộc tính có thể Animate. Đối với Aniamtion này, chúng ta sẽ tập trung vào “3D Scene Position.”


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Click vào icon đồng hồ bấm giờ để Enable (kích hoạt) Keyframe Animation. Điều này sẽ add thêm keyframe đầu tiên cho Timeline của chúng ta (ký hiệu như viên kim cương màu vàng).


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Khi Keyframe Animation được Enabled, Photoshop sẽ tự động add một keyframe khi chúng ta thay đổi vị trí của Scene (hoặc xoay). Trước khi chúng ta bắt đầu xoay Scene, chúng ta cần xác định thời gian để nó tạo hiệu ứng Animate. Để làm điều này, kéo nó đến thời gian hiện hành mà bạn muốn (Current Time Indicator) trên thanh Time (thể hiện trên các thanh trượt màu xanh).


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Bước 8

Quay trở lại bảng 3D Panel, chọn Layer “Scene” và vào bảng Properties Panel. Trong bảng Properties Panel, chọn icon Coordinate và thay đổi giá trị “góc Y” là 360. Điều này sẽ xoay Scene một góc Y- 360 độ.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Chú ý rằng, keyframe mới đã được add trên Timeline của chúng ta. Sử dụng Current Time Indicator, bạn có thể dịch chuyển qua lại để xem các đối tượng 3D Animate của chúng ta trông như thế nào. Khi object “Leaf” được đặt đúng ở vị trí trung tâm của Scene, bạn sẽ thấy Leaf (hình ảnh chiếc lá) xoay tại chỗ.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Bước 9

Mục tiêu của chúng ta là làm cho object “Leaf” xoay quanh trục của nó khi hiển thị. Để làm được việc này, chúng ta cần tạo bản sao của Layer “Leaf”. Trong bảng Layers Panel và copy layer nàu. Chú ý, khi copy layer này nó sẽ có cả Timeline.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Tiếp theo, điều chỉnh timeline cho đến khi object “Leaf” như hình bên dưới.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Chọn layer video “Leaf copy” và kéo nó vào đường màu đỏ. Layer video này đã được cắt và bắt đầu chuyển động sau ¾ thời gian.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Tiếp theo, kéo phần chuyển động đầu tiên của chúng ta ở vị trí như hình bên dưới.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Cuối cùng, kéo Layer video “Leaf copy” vào dòng màu đỏ. Và hình ảnh của chúng ta sẽ có sự chuyển động mượt mà hơn.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Bước 10

Trước khi chúng ta Render bất kỳ Frame nào, chúng ta cần xem lại các Frame trên Photoshop mà chúng ta muốn Render. Sử dụng Current Time Indicator để điều chỉnh Animation tại các điểm mà chúng ta muốn đối tượng xoay đủ một vòng. Thiết lập thanh trượt như hình bên dưới.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Bước 11

Sau khi Scene đã hoàn thành, bạn cần thiết lập hình ảnh động GIF cuối cùng. Sẽ có 2 lựa chọn để saver hình ảnh động: Một là, save nhanh với hình ảnh GIF với chất lượng thấp; hai là chúng ta sẽ mất khá nhiều thời gian, nhưng bù lại bạn sẽ có được hình ảnh GIF chất lượng cao.

Đầu tiên, vào File > Save for Web. Ở tùy chọn này bỏ qua quá trình dựng hình và save nó. Nhưng trước khi save, chúng ta cần điều chỉnh một vài cài đặt cho đến khi bạn thấy phù hợp.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Đây là một ví dụ về hình ảnh chuyển động cuối cùng bằng cách sử dụng cách 1. Chú ý rằng các cạnh của chiếc là có xuất hiện răng cưa.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Bước 12

Cách thứ 2, chúng ta sẽ Render Scene. Vào File > Export > Render Video và thiết lập các thay đổi như bên dưới.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Sau khi tất cả các frame được Render, chúng ta có thể mở nó như một hình ảnh động. Vào File > Open As và đến folder chứa tất cả các frame mà chúng ta đã tạo ra. Chọn frame đầu tiên và click “Image Sequence” ở bên dưới của cửa sổ. Click Open. Bạn sẽ thấy một hộp thoại Frame Rate, chỉ cần click OK là xong.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Các hình ảnh sẽ được kết xuất tự động như là một hình động mới.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6


Redering cuối cùng

Bước cuối cùng, để lưu hình ảnh động như file GIF chúng ta chỉ cần lặp lại bước 11 là ok.


logo, envato, vnwordpress.com, tutorial, 3d, gif, ảnh động, photoshop cs6