NHỮNG TÍNH NĂNG KHÔNG THÊ THIẾU KHI THIÊT KẾ WEB MỚI

Thiết kế web là công việc đòi hỏi có sự sáng tạo, song bên cạnh đó cũng có những căn bản cần có trong website bởi nó đóng góp vào thành công của một website, hay lớn hơn là thành công của một doanh nghiệp.

 

Hầu hết mọi doanh nghiệp đều có một website nhưng không phải mọi website đều thành công. Và hầu hết các chủ doanh nghiệp nhận ra điều này rất sớm. Họ cho xây dựng những website rất đẹp mắt, rất cầu kì, độc đáo nhưng một điều rằng chúng không mang lại đúng traffic và khách hàng như ý. Phải chăng có lỗi trong những website này. Hoàn toàn có thể.Thiết kế web là một phần quan trọng khi nó quyết định thành công của một website.

Tương tác với khách hàng

Tương tác với khách hàng

Người dùng vào đến website của bạn do thích một sản phẩm hoặc tính năng nào đó website bạn đưa ra. Kèm theo đó, có thể họ có những câu hỏi hay thắc mắc, đơn giản thôi nhưng bạn nên chuẩn bị kĩ lưỡng để trả lời chúng. Ebook, video, newsletter hay chat trực tuyến… là những cách hữu ích giúp người dùng có được thông tin họ cần. Và người dùng sẽ nhớ bạn vì điều đó. Bạn cũng có thể lập diễn đàn (forum) để họ chia sẻ thông tin giữa các khách hàng với nhau cũng như bạn có thể gửi họ những coupon, hàng dùng thử, quà tặng miễn phí.

Tích hợp social media

Tích hợp Social Media

Các trang mạng xã hội hiện nay xuất hiện rất nhiều và bạn nên có mặt trên tất cả các trang mạng xã hội này, nếu có thể. Việc tích hợp các nền tảng này vào website là thiết thực bởi nó hỗ trợ SEO, tăng khả năng xuất hiện cho nội dung và sản phẩm của bạn, cũng như tăng được traffic và thứ hạng các trang trên website.

Responsive web design và điều hướng rõ ràng

Responsive design và điều hướng rõ ràng

Khách truy cập, họ đến website của bạn từ nhiều quốc gia và họ sử dụng nhiều loại máy tính khác nhau. Với responsive design, website của bạn sẽ tự động điều chỉnh cho phù hợp kích thước thiết bị họ sử dụng. Ví dụ, nếu người dùng sử dụng smartphone hay tablet (máy tính bảng) thì website sẽ chuyển sang giao diện một cột hoặc hai cột, tùy vào thiết bị. Vào tới website, người dùng lại muốn thấy các thẻ, các liên kết hay các nút ngay trong tầm tay, dễ dàng đưa họ tới đúng trang họ muốn. Do đó responsive design cũng phải có một giao diện rõ ràng và gọn gang, tự động hướng người dùng tới các sản phẩm và các nút mua hàng, shopping cart. Amazon và Ebay là những ví dụ cụ thể cho thiết kế này. Các trang tự động co dãn còn các nút mua hàng và shopping cart rất dễ nhận ra ngay với những khách hàng mới vào website lần đầu.

SEO

Tối ưu hóa website với công cụ tìm kiếm cũng là một tính năng cần có để đảm bảo có được đúng khách hàng và đúng traffic vào website của bạn. Các bài viết chứa các từ khóa thích hợp sẽ giúp kéo về đúng traffic và cải thiện tình hình website của bạn.

Bảo mật thông tin khách hàng

Bảo mật thông tin khách hàng

Cuối cùng và không kém phần quan trọng là tính năng bảo mật thông tin khách hàng. Đây là cơ sở đảm bảo website của bạn là uy tín, đáng tin cậy và giữ khách hàng tiếp tục giao dịch với bạn. Website nên tích hợp phương pháp bảo mật như SSL để tự bảo vệ mình và chống nạn ăn trộm thông tin khách hàng.

Trên đây chỉ là một vài gợi ý nhỏ cho website của bạn nhưng bạn đừng vội bỏ qua sức mạnh của chúng. Một website tuy đơn giản nhưng có thiết kế tốt thực sự có thể cực kì hiệu quả khi mang lại khách hàng và traffic, đảm bảo thành công của một website.

Read More»

HTML 5 - Tương lai web

HTML5 cho phép tạo ra các trang web có thể hoạt động tốt trên nhiều trình duyệt khác nhau của bất kỳ thiết bị nào. Không những vậy, HTML5 còn đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú hơn.

Hiện nay, công nghệ dành cho thiết bị di động ngày càng phát triển. Nếu như trước đây, bạn phải dùng chiếc máy tính để bàn (MTĐB) cồng kềnh cùng trình duyệt web IE (Internet Explorer) để lướt web, thì giờ đây với máy tính xách tay (MTXT), điện thoại thông minh (ĐTTM) cùng rất nhiều trình duyệt khác (Firefox, Opera…) bạn có thể dễ dàng lướt “net” ở bất kỳ đâu. Tuy nhiên với các thiết bị, trình duyệt web khác nhau, nội dung hiển thị trên màn hình sẽ khác nhau. Chẳng hạn, trên máy tính bạn xem trang thiết kề web này rất tốt, nhưng trên ĐTTM thì giao diện và cấu trúc trang bị xáo trộn. Hay bạn có thể xem phim rất tốt với IE nhưng với Firefox thì không.

Vậy giải pháp nào để người dùng có thể sử dụng bất kỳ trình duyệt trên bất kỳ thiết bị nào cũng có thể xem được đầy đủ, trọn vẹn nội dung, thông tin trên internet.
HTML5 cho phép nhà phát triển, lập trình web tạo ra các trang web có thể hoạt động tốt trên nhiều trình duyệt khác nhau của bất kỳ thiết bị nào – từ MTĐB, MTXT cho đến ĐTTM. Không những vậy, HTML5 còn đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú hơn.

Một số phần tử mới

HTML5 vẫn giữ lại các cấu trúc cơ bản như <HEADER>, <FOOTER>, nhưng được bổ sung các phần tử mới, chẳng hạn <CANVAS>, <AUDIO>. 

Các phần tử trong cấu trúc mới

• <HEADER>: chứa thông tin giới thiệu của một phần hay một trang hoặc bất cứ thông tin gì của tiêu đề tài liệu hay tiêu đề nội dung của một bảng.

• <NAV>: chứa đường liên kết đến trang khác hoặc phần khác trên cùng trang, không nhất thiết chứa tất cả liên kết, chỉ cần đường chuyển hướng chính.

• <SECTION>: đại diện cho một phần tài liệu hay ứng dụng, cách thức hoạt động tương tự <DIV>.

• <ARTICLE>: đại diện một phần của trang, có thể đứng độc lập, chẳng hạn blog post, forum entry… hay bất kỳ thành phần nội dung đứng độc lập nào.

• <ASIDE>: đại diện cho nội dung có liên quan đến phần tài liệu chính hay các đoạn trích dẫn.

• <FOOTER>: đánh dấu không chỉ cuối trang hiện hành mà còn mỗi phần có trong trang. Vì vậy, <FOOTER> có thể dùng nhiều lần trong một trang.

Hình bên dưới sẽ giúp bạn thấy rõ hơn cấu trúc mới:

<HEADER>, <FOOTER> không chỉ đại diện cho phần đầu, phần cuối của trang hiện hành, mà còn là đại diện phần đầu, phần cuối của một phần tài liệu, hơn nữa, bạn có thể dùng <THEAD>, <TFOOT> trong các bảng dữ liệu. Việc sử dụng cấu trúc với các phần tử mới này giúp việc lập trình thuận tiện hơn.

Một số đặc điểm mới

Với sự đóng góp, cải tiến của các nhà phát triển trình duyệt như Google (trình duyệt Chrome), Apple (Safari), Mozilla (Firefox),…; HTML5 giờ đây đang dần hoàn thiện và có nhiều đặc tính khá tinh tế: 

Lưu trữ ngoại tuyến (offline): cho phép lưu trữ dữ liệu liên tục hay từng phần mà không cần cài đặt tính năng bổ sung (plug-in), tương tự như Google Gears. 

Miền vẽ (canvas drawing) cho phép tương tác trực tiếp với hình ảnh, biểu đồ, các đối tượng trong game (game component) thông qua các mã lập trình và tương tác người dùng – không cần Flash hay các plug-in.

Truyền nhận hình ảnh (video) và âm thanh (audio) trung thực: hiện đang trong quá trình hoàn thiện và thống nhất các chuẩn định dạng. Đến một ngày nào đó, YouTube và Pandora có thể sẽ không cần đến Flash nhưng vẫn đem đến cho bạn những đoạn video, âm thanh hấp dẫn.

Định vị người dùng (geolocation): HTML5 có thể giúp xác định vị trí của bạn và dùng nó để thực hiện cho một công việc nào đó, chẳng hạn phục vụ cho các kết quả tìm kiếm, cập nhật Twitter hay dùng cho các thiết bị định vị. HTML5 không giới hạn API của nhà cung cấp hay công cụ trình duyệt nào. 

Mẫu nhập thông minh (smarter form): hộp tìm kiếm, dòng nhập thông tin, vùng thông tin hợp lệ… sẽ được kiểm soát tốt hơn, ít gây phiền toái cho người dùng khi họ điền thông tin, dữ liệu.

Tiếp cận các ứng dụng web dễ dàng (web application focus): chẳng hạn như việc xây dựng các trang wiki, công cụ kéo thả, bảng thảo luận, chat thời gian thực. Việc thực hiện các ứng dụng này sẽ nhanh chóng hơn và chúng có thể làm việc như nhau trên các trình duyệt.

Lợi ích mà HTML5 đem lại

Lợi ích to lớn nhất mà HTML5 đem lại là khả năng hỗ trợ API (Application Programming Interface - giao diện lập trình ứng dụng) và DOM (Document Object Model – mô hình đối tượng tài liệu hay cây cấu trúc dữ liệu).

HTML5 cho phép mở rộng dễ dàng với API. Điều này sẽ giúp các nhà phát triển tự do hơn trong việc sáng tạo các ứng dụng thân thiện hơn với người dùng khi mà họ còn lệ thuộc vào nền tảng Flash - lưu trữ dữ liệu và trình diễn ảnh động. Cùng với việc hỗ trợ bộ nhớ ứng dụng (application cache) và khả năng offline, HTML5 sẽ mở ra nhiều cơ hội tương lai cho các ứng dụng thiết kê web. Khả năng offline có thể hình dung như việc Thunderbird, Outlook cho phép bạn kiểm tra email ngay cả khi bạn làm việc offline nhưng với HTML5 bạn sẽ thực hiện điều này qua trình duyệt. Đây là cầu nối quan trọng để mối “lương duyên” giữa máy tính cá nhân và môi trường web sớm hiện thực hơn. Google Gears cho chúng ta khả năng lưu trữ dữ liệu offline, Flash đem đến cho người dùng những trải nghiệm về sức mạnh của bộ nhớ ứng dụng (Pandora dùng nó để lưu trữ thông tin người dùng). Với HTML5, những khả năng này hiện đã sẵn sàng và có thể dễ dàng mở rộng với JavaScript.

Một lợi ích nữa, với HTML5, nhà phát triển chỉ cần lập trình một lần là có thể dùng được trên nhiều hệ thống, không như Flash hay các plug-in khác luôn cần có nhiều phiên bản khác nhau dành cho mỗi nền tảng. 

Mặc dù Flash, SilverLight… vẫn là các plug-in đang hoạt động tốt, nhưng các nhà phát triển vẫn ra sức ủng hộ HTML5. Đơn giản vì: thứ nhất, tuy Flash hoạt động tốt nhưng đôi khi nó gây ra hiện tượng rò bộ nhớ (memory leak) hay làm nghẽn hệ thống (crash); thứ hai, HTML5 giúp tập trung, quản lý các phần tử tương tác trên trang web một cách tự nhiên, dựa vào các đoạn mã; thứ 3, HTML5 giúp JavaScipt hiện thực dễ dàng hơn. Một điểm nữa cho HTML5 là khả năng hỗ trợ nhà lập trình chuyển đổi từ XHTML.

Một khi có nhiều trình duyệt và nhiều nhà phát triển hỗ trợ các chuẩn tương tác video, audio của HTML5, thì ý tưởng về một cửa hàng cung cấp ứng dụng dùng được trên nhiều thiết bị, nền tảng – ĐTTM, MTĐB, MTXT, Windows, Mac, Linux – sẽ trở thành hiện thực.

Ứng dụng

HTML5 hiện đang được sử dụng trên một số điện thoại có trình duyệt nền tảng Webkit như Palm Pre, iPhone 3Gs, Google Android. Gần đây, Google cũng đã tích hợp sẵn HTML5 vào Wave nhằm xây dựng ứng dụng tất cả trong một từ blog, wiki, IM (instant messaging), e-mail cho đến giao tiếp đồng bộ. Trình duyệt Firefox 3.5 cũng đã hỗ trợ HTML5 với các thẻ <VIDEO> và <AUDIO>, theo định dạng .ogg.

HTML5 vẫn đang còn là bản dự thảo, nhưng với sự hỗ trợ mạnh mẽ từ các nhà phát triển trình duyệt Google, Apple, Mozilla… thì nó có khả năng “khuynh đảo” thị trường ứng dụng web, và sớm trở thành chuẩn web chính thức. Một số trình duyệt có hỗ trợ HTML5 (tùy mức độ): Firefox, Chrome, Safari, Opera.

Read More»

Việt hoá ASP.NET Forum của Microsoft

1. Giới thiệu

ASP.NET Forum là một diễn đàn (forum) hoàn toàn miễn phí được viết trên ngôn ngữ lập trình C# (C sharp) và kỹ thuật thiết kế web ASP.NET. Do khả năng hiểu biết giới hạn về các diễn đàn hiện có trên mạng, tôi không chắc là diễn đàn này nhanh và có nhiều tính năng như một số các diễn đàn khác, nhưng tôi thấy diễn đàn này có các đặc tính ưu việt sau đâỵ

ạ Diễn đàn hoàn toàn sử dụng kỹ thuật object-oriented (do viết trên C#) nên khả năng mở rộng lập trình trong tương lai (expandability) hầu như không giới hạn. C# có sẵn các thư viện lập trình (library) chứa các hàm số thông dụng như mở đóng một tập tin trên server, nối với databases, hàm xử lý chuỗi ký tự (strings), vân vân ...

b. Sử dụng lối viết mã nguồn riêng biệt từ html tags, nên đọc và hiểu mã tương đối dễ hơn các diễn đàn khác. Ngoài ra, người thiết kế mạng có thể làm việc riêng biệt và không lệ thuộc vào lập trình viên. Ta sẽ thấy rõ hơn khi xem cách cài đặt Việt ngữ vào thiết kế web ASP.NET Forum ở các phần dướị

c. Mã được chuyển sang bytecode và được truy cập theo object, chứ không dùng phương pháp diễn dịch (interpreting) nên chắc chắn là nhanh hơn so với diễn dịch.

d. (Mong các bạn đóng góp thêm ... :-) )

ẹ Lập trình với c# tự thân đã thích thú hơn so với các ngôn ngữ khác như C, C++, perl, Visual Basic. (phần này objective, VB programmer có thể nói C# is a pain in the ... to code with.)

Diễn đàn ASP.NET do Microsoft bảo trợ và có 2 lập trình viên làm việc full-time, nên source code nhìn rất sáng sủa trật tự, không chắp vá và thời vụ.

2. Các Ứng dụng phải có trước khi tạo ASP.NET Forum.

Người viết bài này không có ý định mở một forum website, nên các chỉ dẫn dưới đây đều được làm ở máy cá nhân tại nhà, chứ không setup từ xa (remotelỵ) Để setup forum bạn cần có:

- Windows 2000 hay XP hay NT4 (SP5+),
- IIS installed,
- SQL Server or MSDE installed,
- AspNetForums install file lấy từ http://asp.net/ (600+ KB)
- Visual C#.NET
- unicode zip file của anh Trần Anh Tuấn http://www.avys.de/

3. Các bước thực hiện

ạ install asp.net forums theo cách chỉ dẫn của Microsoft, nhớ phải dùng Version 1 (nếu không database chứa datatype saị)

b. Dưới directory C:\AspNetForums, bạn sẽ có vài directories, nhưng 2 cái quan trọng nhất là AspNetForums dùng để chứa ASP.NET files (user interface) và Engine directory dùng để chứa tất cả source codẹ Ta sẽ phải edit một số files cuả cả hai directories nàỵ

c. Unzip tất cả các files của unicodẹzip sao cho có directory c:\AspNetForums\AspNetForums\js\ , directory này dùng để chứa các javascript files anh Tuấn đã viết. (Cám ơn anh nhiềụ) Trong directory cũng có 1 file mẫu tên unicode.html, mở file này dùng text editor của bạn. Mình sẽ cut-n-paste vài đọan từ nó.

d. Mở file: C:\AspNetForums\AspNetForums\EditPost.aspx, xong cut&paste 1 đoạn từ unicode.html vào phần <HEAD> tag:

 ...

<HTML>
  <HEAD>
    <AspNetForums:StyleSkin runat="server" ID="Styleskin1" />
    <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    
                   
    
    <!-- Example 3:         
    *
    Nạp bộ gõ, giao diện với các tính năng mở rộng, các bảng mã.
    Trước khi submit form tự động nhận dạng mã 
    và chuyển văn bản thành unicode rồi mới gửi đến server
    
    Scripts cần tới: vietuni8.js, vumodẹjs, vumaps.js
    *
    -->                                                                                   
    
    <!--
    !!! Note: use full URI for web apps, ẹg.: src="http://www.mysite.net/js/vietuni8.js"
    -->
    <script language="JavaScript1.2" src="js/vietuni8.js" type='text/javascript'></script>
    <script language="JavaScript1.2" src="js/vumods.js" type='text/javascript'></script>
<script language="JavaScript1.2" src="js/vumaps.js" type='text/javascript'></script>
  </HEAD>
  <body leftmargin="0" bottommargin="0" rightmargin="0" topmargin="0" marginheight="0" marginwidth="0">
    <form runat="server">

   ....

ẹ Mở file: C:\AspNetForums\AspNetForums\AđPost.aspx và làm tương tự như phần d. Mục đích của chúng ta là thông báo cho browser chỗ để tìm kiếm các external javascript files và dồng thời dùng unicode charset (charset=iso-8859-1.) Hai files EditPost & AđPost.aspx là hai files mà forum sẽ gọi mỗi khi người dùng muốn viết bài mớị (Hình như phần edit bài không cho phép đối với người dùng thường, chỉ có admin mới có quyền edit post.)

f. Mở file C:\AspNetForums\AspNetForums\skins\default\Skins\Skin-Post.ascx để sửạ File này là một user control và cũng là một default file for skinning. Skinning (da) có nghĩa là mình (admin) có khả năng chế ra các loại màu mè thêm thắt, nhưng sau lưng thì vẫn dùng các controls như nhau tuy khác skin. Đây là toàn bộ file sau khi sửa, các đoạn tô đỏ là các chỗ sửa:

<%@ Register TagPrefix="AspNetForums" Namespace="AspNetForums.Controls" Assembly="AspNetForums" %>
<%@ Control %>
<table cellSpacing="0" border="0">
  <tr>
    <td><ASPNETFORUMS:WHEREAMI id="Whereami1" runat="server"></ASPNETFORUMS:WHEREAMI></td>
  </tr>
</table>
<p>
  <table class="tableBorder" cellSpacing="1" cellPađing="3" width="100%">
    <tr>
      <th class="tableHeaderText" align="left" height="25">
         <asp:label id="PostTitle" runat="server"></asp:label>
      </th>
    </tr>
    <span id="ReplyTo" runat="server" visible="false">
      <tr>
        <td class="forumRow">
          <table cellSpacing="1" cellPađing="3">
            <tr>
              <td colSpan="2"><span class="normalTextSmall">The message you are replying to: </span></td>
            </tr>
            <tr>
              <td vAlign="top" noWrap align="right"><span class="normalTextSmallBold">Posted By: </span></td>
              <td vAlign="top" align="left"><asp:hyperlink id="ReplyPostedBy" Runat="server" CssClass="normalTextSmall"></asp:hyperlink><asp:label id="ReplyPostedByDate" Runat="server" CssClass="normalTextSmall"></asp:label></td>
            </tr>
            <tr>
              <td vAlign="top" align="right"><span class="normalTextSmallBold">Subject: </span></td>
              <td vAlign="top" align="left"><asp:hyperlink id="ReplySubject" runat="server" CssClass="normalTextSmall"></asp:hyperlink></td>
            </tr>
            <tr>
              <td vAlign="top" align="right"><span class="normalTextSmallBold">Message: </span></td>
              <td vAlign="top" align="left"><span class="normalTextSmall"><asp:label id="ReplyBody" runat="server"></asp:label>
                </span></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="forumAlternate"> 
        </td>
      </tr>
    </span><span id="Preview" runat="server" visible="false">
      <tr>
        <td class="forumRow">
          <table cellSpacing="1" cellPađing="3" width="75%" border="0">
            <tr>
              <td vAlign="top" align="left"><span class="normalTextSmallBold"><asp:label id="PreviewSubject" runat="server"></asp:label>
                </span><br>
                <span class="normalTextSmall">
                  <asp:label id="PreviewBody" runat="server"></asp:label>
                </span></td>
            </tr>
            <tr>
              <td> 
              </td>
            </tr>
            <tr>
              <td vAlign="top" align="left"><asp:button id="BackButton" Runat="server" Text=" < Back to Edit Mode "></asp:button> 
                <asp:button id="PreviewPostButton" Runat="server" Text=" Post "></asp:button></td>
            </tr>
            <tr>
              <td> 
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </span><span id="Post" runat="server" visible="true">
      <tr>
        <td class="forumRow">
          <table cellSpacing="1" cellPađing="3">
            <tr>
              <td vAlign="top" nowrap align="right"><span class="normalTextSmallBold">Author: </span></td>
              <td vAlign="top" align="left" colSpan="2"><span class="normalTextSmall"><asp:label id="PostAuthor" runat="server"></asp:label>
                </span></td>
            </tr>
            <span id="Edit" runat="server" visible="false">
              <tr>
                <td vAlign="top" nowrap align="right"><span class="normalTextSmallBold">Editing Post As: </span></td>
                <td vAlign="top" align="left" colSpan="2"><span class="normalTextSmall"><asp:label id="PostEditor" runat="server"></asp:label>
                  </span></td>
              </tr>
            </span>
            <tr>
              <td nowrap valign="center" align="right"><span class="normalTextSmallBold">Subject: </span></td>
              <td vAlign="top" align="left"><textarea id="PostSubject" runat="server" columns="55" rows="1" onkeyup="telexingVietUC(this,event);" ></textarea></td>

              <td><asp:requiredfieldvalidator id="RequiredFieldValidator1" runat="server" CssClass="validationWarningSmall" ErrorMessage="RequiredFieldValidator" ControlToValidate="PostSubject">Subject required.</asp:requiredfieldvalidator></td>
            </tr>
            <tr>
              <td vAlign="top" nowrap align="right"><span class="normalTextSmallBold">Message: </span></td>
              <td vAlign="top" align="left"><textarea id="PostBody" cols="80" TextMode="MultiLine" rows="15" onkeyup="telexingVietUC(this,event);" runat="server"></textarea></td>
              <td vAlign="top"><asp:requiredfieldvalidator id="RequiredFieldValidator2" runat="server" CssClass="validationWarningSmall" ErrorMessage="RequiredFieldValidator" ControlToValidate="PostBody" EnableClientScript="False">You must supply a messagẹ</asp:requiredfieldvalidator></td>
            </tr>
            <span id="EditNotes" runat="server" visible="false">
              <tr>
                <td vAlign="top" nowrap align="right"><span class="normalTextSmallBold">Edit Notes: </span></td>
                <td vAlign="top" align="left" colSpan="2"><textarea id="EditNotesBody"  cols="80" TextMode="MultiLine" rows="15" onkeyup="telexingVietUC(this,event);" runat="server"></textarea></td>

              </tr>
            </span>
 <br>
 <input type=radio name="switcher" value="OFF" checked onfocus="setTypingMode(0)">Off</input>
 <input type=radio name="switcher" value="TELEX" onfocus="setTypingMode(1)">Telex</input>
 <input type=radio name="switcher" value="vnVni" onfocus="setTypingMode(2)">VNI</input>
 <input type=radio name="switcher" value="vnViqr" onfocus="setTypingMode(3)">VIQR</input>
 <br>

            <span id="AllowPinnedPosts" runat="server" visible="false">
              <tr>
                <td vAlign="center" align="right" width="91"><span class="normalTextSmallBold">Pinned Post: 
          </span></td>
                <td vAlign="top" align="left"><span class="normalTextSmall"><asp:dropdownlist id="PinnedPost" runat="server"></asp:dropdownlist>
                  </span></td>
              </tr>
            </span>
            <tr>
              <td vAlign="center" align="right" width="93"><span class="normalTextSmallBold"> </span></td>
              <td vAlign="top" align="left"><span class="normalTextSmall"><asp:checkbox id="AllowReplies" runat="server" Text=" Do not allow replies to this post."></asp:checkbox>
                </span></td>
            </tr>
            <tr>
              <td vAlign="top" align="right" colSpan="2"><asp:button CausesValidation="false" id="Cancel" Runat="server" Text=" Cancel "></asp:button> 
                <asp:button id="PreviewButton" Runat="server" Text=" Preview > "></asp:button></td>
            </tr>
            <tr>
              <td vAlign="top" align="right" colSpan="2">
                <asp:button id="PostButton" Runat="server" Text=" Post "></asp:button></td>
            </tr>
          </table>
        </td>
      </tr>
    </span>
  </table>
</p>
<p>
<table cellSpacing="0" border="0">
  <tr>
    <td><ASPNETFORUMS:WHEREAMI ShowHome="true" id="Whereami2" runat="server"></ASPNETFORUMS:WHEREAMI></td>
  </tr>
</table>

Basically, mình thế 1 label (PostSubject) và hai TextBoxes (PostBody & EditNotesBody) thành 3 textarea server-side HtmlControls. Chuyển như vậy làm html server controls có thể lấy hoặc gán giá trị trên server (dùng InnerText property), cùng lúc đó mình vẫn có thể gán javascript on client-side onkeyup="telexingVietUC(this,event);" để máy có thể chạy javascipt function mỗi khi mình bỏ dấụ

g. Mở AspNetForums.sln (solution) dưới C:\AspNetForums\Engine, sau đó đổi qua release build. Rebuild the solution, hy vọng mọi sự tốt đẹp và Visual Studio cùng lúc update AspNetForums.dll dưới directory C:\AspNetForums\AspNetForums\bin

h. Vẫn trong VC#, mở file CreateEditPost.cs nằm dưới control folder. Ráng tìm và thay các đoạn sau đây:

- thêm using vào đầu file: using System.Web.UỊHtmlControls;

- Sửa method DisplayEdit() thành:

        private void DisplayEdit(Control controlTemplate) {
            PostDetails post = null;
            Label label;
            HtmlTextArea textbox;
            HtmlTextArea textbox2;
            Button button;

            if (Mode != CreateEditPostModẹEditPost)
                return;

            // Get the post to edit
            try {
                post = GetPostForEdit();
            } catch (CannotEditPostException) {
                HttpContext.Current.ResponsẹRedirect(Globals.UrlMessage + Convert.ToInt32(Messages.UnableToEditPost));
                HttpContext.Current.ResponsẹEnd();
            }

            // Set the visibility
            ((Control) controlTemplatẹFindControl("Edit")).Visible = true;
            ((Control) controlTemplatẹFindControl("EditNotes")).Visible = true;

            // Set the title
            ((Label) controlTemplatẹFindControl("PostTitle")).Text = Globals.HtmlDecode(EditMessageText);

            // Set the editor of the post
            ((Label) controlTemplatẹFindControl("PostEditor")).Text = user.Username;

            // Set the Username
            label = (Label) controlTemplatẹFindControl("PostAuthor");
            label.Text = post.Username;
 
            // Set the Subject
            textbox = (HtmlTextArea) controlTemplatẹFindControl("PostSubject");
            textbox.InnerText = post.Subject;

            // Set the Body
            textbox2 = (HtmlTextArea) controlTemplatẹFindControl("PostBody");
            textbox2.InnerText = post.Body;
 
            // Find the checkbox
            allowNoReplies = (CheckBox) controlTemplatẹFindControl("AllowReplies");

            // Wireup the preview button
            button = (Button) controlTemplatẹFindControl("PreviewButton");
            button.Click += new System.EventHandler(PreviewButton_Click);

            // Wire up the cancel button
            button = (Button) controlTemplatẹFindControl("Cancel");
            button.Click += new System.EventHandler(CancelButton_Click);

            // Wire up the post button
            button = (Button) controlTemplatẹFindControl("PostButton");
            button.Click += new System.EventHandler(PostButton_Click);
        }

Sửa PreviewButton_Click() thành

       private void PreviewButton_Click(Object sender, EventArgs e) {
            Control form;
            Label label;
            HtmlTextArea textbox;
            HtmlTextArea textbox2;
            Button button;

            // only do this stuff if the page is valid
            if (!PagẹIsValid) 
                return;
   
            // The event was raised by a button in the user control
            // the is the UI for the form -- get the Parent, ẹg. the User Control
            form = ((Control)sender).Parent;

            // Find and enable the Preview display
            form.FindControl("Preview").Visible = true;

            // Find and hide the ReplyTo display and Post
            form.FindControl("ReplyTo").Visible = false;
            form.FindControl("Post").Visible = false;

            // Set the title text
            ((Label) form.FindControl("PostTitle")).Text = "Preview Message";

            // Preview the post subject
            label = (Label) form.FindControl("PreviewSubject");
            textbox = (HtmlTextArea) form.FindControl("PostSubject");
            label.Text = Globals.HtmlEncode(textbox.InnerText);

            // Preview the post body
            label = (Label) form.FindControl("PreviewBody");
            textbox2 = (HtmlTextArea) form.FindControl("PostBody");

            // Are we in edit modẻ
            /*
            if (Mode == CreateEditPostModẹEditPost) {
                string editNotes = CreateEditNotes(form);
                label.Text = Globals.FormatPostBody(editNotes + textbox2.InnerText) + Globals.FormatSignature(user.Signature);
            } else {
            }
            */
            label.Text = Globals.FormatPostBody(textbox2.InnerText) + Globals.FormatSignature(user.Signature);
[/red]
        }

-sửa CreateEditNotes() thành:

        private string CreateEditNotes(Control form) {
            string editNotes;
            HtmlTextArea textbox;

            // Get the edit notes that the editor submitted
            textbox = (HtmlTextArea) form.FindControl("EditNotesBody");

            // Create the edit notes string
            editNotes = "[Edit by=\"" + user.Username + "\"]" + textbox.InnerText + "[/Edit]\n";

            return editNotes;
        }

-sửa PostButton_Click () thành:

       private void PostButton_Click (Object sender, EventArgs e) {
            Control form;
            Post postRepliedTo;

            // Only proceed if the post is valid
            if (!PagẹIsValid) 
                return;
   
            // Get the user control that the click originated from
            form = ((Control)sender).Parent;

            // When we ađ a new post, we want to get back the NewPostID, so that we
            // can automagically redirect the user to the page showing the post.
            // If iNewPostID comes back as 0, though, that means that the post needs
            // to be approved first, so the user is taken to a page explaining this.
            Post newPost = null; 
            Post postToAđ = new Post();   
   
            postToAđ.Username = Context.User.IdentitỵName;
            postToAđ.ForumID = postToAđ.ParentID = 0;
            postToAđ.Subject = ((HtmlTextArea) form.FindControl("PostSubject")).InnerText;
            postToAđ.Body = ((HtmlTextArea) form.FindControl("PostBody")).InnerText;[/red]
            postToAđ.IsLocked = allowNoReplies.Checked;

    .....
        }

Sau đó thì recompile & hopefully mọi việc sẽ trôi chảy và bạn sẽ có thể viết được tiếng Việt.

4. Kết luận 

Đây mới chỉ là bước đầu trong việc Việt hoá ASP.NET Forum, có nhiều việc khác có thể làm như làm một pulldown ngay trong header của forum để nhớ cách input chữ Việt mà forum member sử dụng, hoặc upgrade lên MViệt của nvcv, hay thêm vào các tính năng đa dạng như đã thấy trong site www.thanhda.com.

Người viết bài này hy vọng các bạn yêu thích ASP.NET & C# sẽ thử và làm giàu thêm trên viên gạch lót đường mà người viết đã mày mò tìm ra, mong lắm thaỵ

Read More»