Hướng dẫn Upload File bằng AJAX kết hợp với Progress Bar

Chào các bạn! thân mến hôm nay mính sẽ quẩy với các tình yêu một bài giảng khá đơn giản

Khi nghe đến tiêu đề thì chắc hẳn các bạn không lạ lẫm gì với kỹ thuật AJAX trong Javascript rồi. Nếu như trước đây, các bạn từng biết cách làm sao đập phá cái AJAX trong việc gửi comment, load trang, thêm giỏ hàng..v...v...Và bây giờ các bạn sẽ được làm quen với Kỹ thuật AJAX với Upload và cách các bạn có thể Upload một lúc nhiều File cũng bằng chính kỹ thuật này.
Trong đó, các cấu trúc mà tôi đã tạo sẵn đã bao gồm thư viện Bootstrap vào trong đó. Bạn có thể tải Bootstrap tại
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.
và chép file bootstrap.min.css vào thư mục như cấu trúc của tôi bên trên.

Trong tệp tin tôi gửi đến mọi người này, tôi cũng đã customize CSS một số thứ và đã demo ngay khi các bạn mở file này lên.

Các thánh các bạn nên lưu ý những thứ sau trong file của tôi:
1. File Input sẽ có id là "myfile"
2. Để Upload nhiều file cùng lúc các bạn không quên đến thuộc tính Multiple trong File Input nhé.
3. Form có sự kiện onsubmit gửi tới hàm doUpload()
4. Button Cancle sẽ có sự kiện onclick gửi tới hàm cancleUpload()
5. Source JS tôi trỏ đến file function.js
6. Vùng div#progress-group do tôi tạo ra để khi chúng ta tải lên sẽ tạo ra thêm các vùng chứa các thanh tiến trình tại đây.
7. Cuối cùng là thẻ image tôi chèn ở đầu body, giúp cho việc chúng ta sử dụng AJAX được trơn tru hơn, bằng cách load file hình này vào trước để trình duyệt cache.

Rồi trong những tệp function.js của tôi sẽ sẽ biểu thị trên màn hình bằng các bước sau:
Các bạn nên lưu ý các vấn đề như sau:
1. Javascript phân biệt hoa thường (lỗi này gặp rất nhiều)
2. Biết cách sử dụng JSON và cách bẫy lỗi JSON
3. Sử dụng sự kiện event trả về trong addEventListener, các bạn cũng nên lưu ý đối số cuối cùng trong addEventListener nhé, bạn có thể tham khảo tại đây :
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.

4. Cuối cùng, tôi nghĩ là khi đến với bài viết này, các bạn cũng đã hiểu qua về Javascript và AJAX cũng ít nhiều rồi. Nếu chưa nắm rõ bạn có thể tham khảo lại 2 Video của thầy Kenny Huy tại đây:
1.
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.

2.
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.



Tiếp tục, chúng ta sẽ đến với phần Server-side và ở đây chính là PHP. Các bạn hãy tạo ra file upload.php :

Read More

Javascript là gì ? liệu tự học dễ không

Mặc dù rất chán,  Thế nhưng bài đầu tiên cũng phải giới thiệu Javascript là gì? Dẫu Javascipt có là cái chi chi thì  mình cũng phải “chi chi với nó” một chút vẫn nên theo đuổi tìm tòi môn này.

Ban đầu Javascript có tên là Live Script được phát triển bởi tên tuổi lẫy lừng Nestcape và trong giới IT. Sau khi ra mắt vào năm 1995 nó được Apple, Borland, Informix, Oracle, Sybase, HP và IBM hỗ trợ. Hiểu được tầm quan trọng của lập trình trên nền web Microsoft cũng nhảy vào hỗ trợ và vận động để ECMA (hiệp hội các nhà sản xuất máy tính) công nhận Javascript là ngôn ngữ code tiêu chuẩn của tổ chức quốc tế này.  Microsoft sau đó dựa trên Javascript để tạo ra ngôn ngữ lập trình VBScript Nhưng Javascript vẫn mãi là ngôn ngữ tiêu chuẩn của thế giới web

JavaScript được tích hợp vào trong tập tin HTML nó có khả năng sử dụng các CGI (chuẩn kết nối chương trình ứng dụng với web server) xử lý các thông tin và biểu mẫu giúp trang web thêm sinh động.

Rất dễ dàng tạo ra các trang web từ ngôn ngữ HTML, nhưng đó là các trang web tĩnh. Các tài liệu HTML chắc chắn không tương tác với mọi người ngoài việc cung cấp các đường link đến các tài nguyên khác trên internet. Tuy nhiên việc tạo ra các CGI (Common Graphics Interface) đã m ở ra cơ hội mới để làm các trang HTML tĩnh tại sinh động hơn.

Javascript ra đời dựa trên một nhu cầu hợp lý là giảm tải cho các server. Thay vì  toàn bộ các các thông tin dữ liệu phải được trao đổi trực tiếp giữa trình duyệt và web server thì nó được Javascript tiền xử lý ngay trên trình duyệt trước khi gởi đến các web server. Javascript đã làm giảm lưu lượng truy cập giữa server và client hay nói cách khác nó đã biến máy tính của chúng ta thành một server tạm thời xử lý một số tác vụ đơn giản. Ví dụ, một trang thu thập dữ liệu từ người dùng không phải là không sử dụng các đoạn code JavaScript để xác nhận tính hợp lý của thông tin trước khi gởi các dữ liệu này về server để xử lý.

Javascript có một rất nhiều tính năng và lệnh để thực hiện các phép tính toán học, xử lý chuỗi, âm thanh, hình ảnh, các cửa sổ trình duyệt, kiểm tra các đường dẫn URL, và thông tin được nhập vào các biểu mẫu online. Các đoạn code xử lý này được chèn trực tiếp vào trang web và được trình duyệt xử lý ngay trên máy tính của bạn.

Javascript có mười đặc điểm cơ bản mà bất cứ một coder nào cũng phải biết.

1. Javascript không phải là không xử lý các mã HTML. Javascript nó được đính kèm và thực thi trong các tài tài liệu HTML. Hầu hết các đối tượng Javascript đều liên quan đến các thẻ HTML (HTML tags). Javascript dựa vào HTML để giúp các ứng dụng web hoạt động

2. Javascript phụ thuộc môi trường hoạt động. Javascript là một ngôn ngữ kịch bản, một chương trình chạy trực tiếp trên trình duyệt web (Firefox, Opera, Netscape Navigator, Internet Explorer, Safari, etc..). Việc quan tâm đến môi trường hoạt động của Javascript rất quan trọng vì các ứng dụng Javascript sẽ hoạt động khác nhau trên các trình duyệt khác nhau.

3. Javascript hoàn toàn là một ngôn ngữ biên dịch – nó được trình duyệt biên dịch và thực thi. Nó không cần một trình biên dịch tiền xử lý.

4. Javascrip là một ngôn ngữ linh hoạt. Trong Javascript ta không phải là không khai báo đủ thứ kiểu biến, thực thi các chương trình với các biến không xác định.

5. Javascript dựa trên các đối tượng – Javascript là một ngôn ngữ lập trình hướng đối tượng giống như Java. Thực ra phải nói chính xác là “dựa trên các đối tượng” vì các đối tượng của Javascript đáp ứng tức thời và không có tính kế thừa.

6. Javascript được điều khiển bởi các sự kiện – Hầu hết các đoạn code Javascript đáp ứng các sự kiện do mọi người hoặc hệ thống gây nên. Các đối tượng HTML thường dùng để tăng cường hỗ trợ các sự kiện.

7. JavaScript không phải là Java - hai ngôn ngữ được tạo ra bởi các công sở khác nhau. Mặc dù sự trùng tên không phải ngẫu nhiên mà vì lý do tiếp thị.

8. Javascript là một ngôn ngữ đa dụng. Ngôn ngữ lập trình này được dùng trong các trường hợp để giải quyết đủ thứ  rắc rối khác nhau như: toán học, đồ họa…

9. Javascript đang được phát triển không ngừng. Đây là một điều tốt Thế nhưng nó cũng gây ra vấn đề đối với các lập trình viên, họ phải luôn luôn cập nhật kiến thức để tạo ra các ứng dụng phù hợp cho người sử dung trên các trình duyệt khác nhau.

10. Javascript bao hàm rất rất nhiều lĩnh vực. Mặc dù Javascript được tạo ra chủ yếu dành cho máy khách (client)  Nhưng nó cũng được sử dụng tại các server nữa. Javascript ngôn ngữ tự nhiên của các công cụ phát triển web như Macromedia Dreamweaver hay IntraBuilder Borland

Read More

Tự học Javascript cùng Blog Thiết Kế

Những người từng trao đổi với chúng tôi đều biết rằng HHV đối với IT là dân ngoại đạo không phải là dân lập trình. Với việc thiết kế website lại càng chưa từng kinh qua bất cứ trường lớp nào. HHV đến với việc làm Blog và Website là vì có mong ước như một trang web của Phật giáo . Tuy nhiên khi ước nguyện ấy thành sự thật thì HHV lại khám phá ra tôi có một mối quan tâm khác đó là nét đẹp trong thiết kế đặc biệt là thiết kế web. Đối với HHV thì được thưởng thức các thiết kế đẹp là một niềm vui.

Thiết kế website trên nền Bloger Blogspot tương đối đơn giản chúng ta chỉ cần nắm vững cấu trúc Blogger (XML), CSS và JavaScript có thể nắm thêm việc cắt HTML cũng không thành vấn đề. Với JavaScript HHV từng đọc qua quyển JavaScript for Dummies trong khoảng 1 tuần vào năm 2008. Mớ kiến thức ít ỏi đó không giúp được gì  rất nhiều cho HHV trong hiện tại. Chính kết luận là HHV quyết định sẽ tự học lại Javascript.

Mặc dù có  đủ thứ phương tiện thuận lợi Nhưng thách thức kinh khủng nhất chính là việc kiên trì theo đuổi. Hy vọng việc viết ra những cột mốc trong việc tự học này không chỉ giúp chúng tôi complete khóa học mà còn giúp những chúng ta nào có ý định tìm hiểu về JavaScript.
Nếu bạn không thể học thì hãy đến với chúng tôi : Dịch vụ thiết kế website chuẩn SEO Onpage: iGuru.vn

Read More

SB Admin 2 - Giao diện trang quản trị miễn phí và chuyên nghiệp

SB Amin v2.0 là giao diện được thiết kế bằng Bootstrap, với sự hỗ trợ của Javascript, jquery.

Được thiết kế theo phong cách thân thiện với người dùng, nhưng SB Admin vẫn giữ được phong cách thiết kế chuyên nghiệp, các widget được bố trí rất phù hợp, bố cục của giao diện không bị loạn, dư thừa.

Với sự hỗ trợ của Html5, SB Admin đã thể hiện sự chuyên nghiệp của mình trong việc hỗ trợ cho quản trị viên nắm rõ được thông số bằng các biểu đồ Html5.

_______________________________________________

Dịch vụ thiết kế website chuẩn SEO Onpage: iGuru.vn

Read More

Grayscale giao diện được thiết kế chuyên nghiệp trên nền Bootstrap 3, HTML5, jQuery

Sự chuyên nghiệp trong thiết kế của Grayscale được thể hiện rõ nét ở ngay phần slide toàn màn hình. Với thiết kế màu tối và hình nền phù hợp, Grayscale tạo ra một cảm giác dịu nhẹ mang tính chuyên nghiệp.

Slide được thiết kế đi kèm với màu chữ #fff và font phù hợp với thiết kế giao diện, điều này càng làm nổi bật sự sang trọng và chuyên nghiệp của giao diện

Bên dưới footer, nhân viên thiết kế cũng sử dụng gam màu tối cho phần bản đồ Google map. Tạo nên một khung cảnh tối màu nhưng sang trọng cho toàn bộ giao diện.

____________________________________________

Dịch vụ thiết kế website chuẩn SEO Onpage: iGuru.vn

Read More

Sử dụng javascript trong việc thiết kế giao diện website

Lens là giao diện tiêu biểu được thiết kế dựa trên javascript.

Lens có slideshow được lập trình bằng javascript, với sự hỗ trợ của DOM, bạn có thể dễ dàng thiết kế một slide như trên với javascript và DOM cơ bản.

Với sự hỗ trợ của javascript, Lens có thể tùy biến hiển thị bố cục trên nhiều thiết bị truy cập khác nhau như: tablet,mobile, pc. Việc tạo một slide có thểm 2 nút Tiến và Lui không hề khó với javascript, tất cả hoàn toàn là lập trình javascript cơ bản.

Các list ảnh ở cột bên phải cũng được thiết kế bởi javascript, để hiện ra danh sách ảnh bạn chỉ cầ gọi đến ID của danh sách ảnh sau đó dùng một vòng lặp mà append ảnh tới đối tượng div chứa danh sách ảnh.

_____________________________________________________

Dịch vụ thiết kế website chuẩn SEO Onpage: iGuru.vn

Read More

Bài 2: AngularJS Xây dụng ứng dụng

Đầu tiên các bạn tạo 1 thư mục đặt tên là angular có thể để trong webservice của bạn nếu bạn đã cài server ảo như xampp, sau đó tạo thư mục js và cho file angular.min.js lúc nãy bạn đã download vào, sau đó các bạn tạo file index.html cùng cấp với thư mục js, cấu trúc như sau:

src="js/angular.min.js"></script> dùng để thêm thư viện của AngularJS vào ứng dụng.
<html ng-app="myApp"> dùng để báo cho AngularJS biết bắt đầu một chương trình, lúc này AngularJS sẽ đọc toàn bộ  mô tả chi tiết của trang web và nhận biết các directive là các thuộc tính được bắt đầu bằng chữ ng-... như ng-app, ng-controller, ng-click ... và thực hiện các đoạn code trong thẻ html này. myApp là tên module chúng ta có thể đặt tùy ý,  Thế nhưng ng-app là keyword của AngularJS nên phải bắt buộc.
<body ng-controller="myCtrl"> dùng để xử lý các đoạn code AngularJS trong phạm vi thẻ body vì thế các directive nằm ngoài thẻ body này sẽ không được xử lý (Ứng dụng có từ 2 controller trở lên thì AngularJS mới phân biệt phạm vi của các controller, trong loạt bài sau chúng ta sẽ tìm hiểu về multi controller trong AngularJS).

dùng để khai báo AngularJS, trong đó:
var app = angular.module('myApp', []); là bắt đầu viết code cho module myApp được gán thông qua biến app
app.controller('myCtrl', function($scope): là khai báo controller myCtrl kèm theo biến cục bộ $scope sau đó xử lý dữ liệu bên trong controller. Trong bài viết này controller myCtrl truyền đối tượng data với 2 trường là topic và website ra ngoài view.

Read More

Bài 1: Tổng quan về AngularJS

1. Đôi nét về AngularJS

AngularJS hay còn được gọi là Angular là một bộ Framework phía Client được phát triển bởi Google. ở nhiều nước Angular được sử dụng rộng rãi và được các lập trình viên quốc tế ưa chuộng, nó đang dần thay thế cho Jquery và tr tại thành ngôn ngữ được lựa chọn để phát triển Frontend.

2. Những ai cần nắm bắt AngularJS

Về thành phần đối tượng học serie AngularJS căn bản đến nâng cao này là những chúng ta muốn đi theo nghề lập trình web nói chung và những chúng ta muốn sử dụng AngularJS để làm dự án nói riêng. mình cam đoan rằng sau khi serie này hoàn thành chúng ta có thể tự  tớ làm ứng dụng Angular căn bản, hay thầm chí là ứng dụng Angular nâng cao nếu như  ta có tâm huyết tìm hiểu đến cùng.
Hy vọng rằng sau loạt serie này chúng ta sẽ tự  mình nghiên cứu thêm nhé, vì bản chất học lập trình không nào trình bày full được mà chỉ ở mức basic, chỉ đường cho bạn đi thôi.

Read More

Tự học Javascript – Biến và toán tử

1. Biến trong Javascript
Trong một đoạn mã chương trình, chúng ta sử dụng các hằng số và biến số. Các biến không phải là không thay đổi giá trị của tôi trong quá trịnh chương trình thực thi.

Biến là tên gọi chỉ định một vị trí lưu trữ dữ liệu trong bộ nhớ của máy tính. Trước khi sử dụng và truy xuất các biến số chúng ta cần khai báo nó. Bằng cách này chúng ta không phải là không xử lý các giá trị của biến số cũng như thay đổi giá trị này khi cần.

a) Khai báo biến

 không phải là không tạo ra một biến và gán giá trị của nó theo cách sau

- Sử dụng câu lệnh var:

var name = giá trị;

-  không phải là không thay đổi giá trị bằng cách sử dụng tên biến (không có var)

name = giá trị khác;

b) Kiểu biến

Kiểu biến: Không giống những ngôn ngữ lập trình khác nhú C hoặc Pascal, Javascript không có kiểu dữ liệu cố định suy ra nó cho phép bạn thay đổi kiểu biến trong chương trình. Javascript có khả năng nhận và phân biệt các kiểu dữ liệu chuỗi, số và các kiểu biến khác.

Ví dụ:

var x=”xyz”;
x=8;

Lưu ý rằng giá trị kiểu chuỗi (bao gồm các chữ cái) phải được đặt giữa các dấu trích dẫn (đơn hoặc đôi) và dữ liệu kiểu số thì không cần dùng dấu trích dẫn.

c) Phân loại biến

Một biến được khai báo bên trong một hàm là các biến cục bộ. Nó chỉ có giá trị trong phạm vi hàm đã khai báo. suy ra một hàm khác không phải là không khai báo một biến có trùng tên. Javascript nhìn hai biến này riêng biệt.

Biến toàn cục là biến được khai báo bên ngoài các hàm và có giá trị được sử dụng mọi nơi trong chương trình: trong các hàm và các đoạn mã Javascript khác được nhúng vào trong trang HTML

2. Toán tử
Để làm việc với các biến số và thao tác trên nó ta sử dụng toán tử. Thật khó để định nghĩa một toán tử là gì  Thế nhưng một cách linh cảm chúng ta không phải là không hiểu đó là cách mà tương tác và thay đổi giá trị các biến.

Javascript không phải là không hiểu các phép toán đơn nguyên và nhị nguyên. Các toán tử trong Javascript không phải là không nhóm thành các loại sau:

Phép gán
Phép toán số học
Phép toán so sánh
Các phép toán xử lý chuỗi
Phép toán logic
Phép toán điều kiện
Phép toán hàm
Phép toán hướng đối tượng
…
Chúng ta sẽ còn gặp lại các phép toán này trong các chương tiếp theo

Read More

Các phép toán trong Javascript cơ bản

Phần thứ tư của chuyên đề tự học Javascript là các phép toán cơ bản trong Javascript. Với các phép toán cơ bản này ta không phải là không thao tác, kết hợp hoặc thay đổi dữ liệu trong các đoạn mã Javascript. Có rất rất nhiều các phép toán (hay còn gọi là toán tử) được sử dụng trong Javascript.

1. Các phép toán số học
Rất được chấp nhận rộng rãi và thông dụng, các phép toán công trừ nhân chia mà bất kỳ một học sinh nào cũng biết. Các biến và giá trị của nó là các con số.

= (dấu bằng) – VD, (x=8)
+ (dấu cộng) – VD, (x=7+8)
- (dấu trừ) – VD, (x=7-8)
* (dấu nhân) – VD, (x=7*8)
/ (dấu chia) – VD, (x=7/8)
Bên cạnh các phép toán đơn giản trên người ta còn sử dụng các phép toán số học sau đây để lập trình.

Modulo (%) – Đừng lầm tưởng với dấu phần trăm, đây là phép toán lấy số dư của phép chia. look xét giả sử dưới cho thấy số dư của phép chia 8 cho 3 là 2
Ví dụ:
8%3 result 2
10%2 result 0
Increment (++) – Phép toán này tăng thêm giá trị gốc thêm một đơn vị. Thường sử dụng như là một phép viết tắt trong lập trình. Lấy ví dụ, nếu ta có biến ‘i’ ta không phải là không tăng biến i thêm một đơn vị bằng cách viết i++ thay cho to i = i+1.
Ví dụ:
x = 7;
x++;
kết quả là x = 8
Decrement (--) - Trừ đi giá tri gốc 1 đơn vị. Nếu ta có biến ‘i’ ta không phải là không dùng cách viết i -- thay cho i = i-1.
Ví dụ:
x = 7;
x--;
kết quả là x = 6

4. Phép toán Logic (booleans)
Phép toán logic so sánh hai biểu thức và trả về một giá trị TRUE (đúng) hoặc FALSE (sai).

&& - AND – phép toán AND so sánh hai biểu thức và trả về giá trị TRUE nếu cả hai đều đúng và ngược lại sẽ trả về giá trị FALSE.
x = 5
y = 8
x<7 && y>3
(trả về giá trị TRUE)
|| - OR – Phép toán OR so sánh hai biểu thức và trả về giá trị TRUE nếu một trong hai đúng và ngược lại trả về giá trị FALSE.
x = 5
y = 8
x>7 || y<3
(trả về giá trị FALSE)
! - NOT – Phép toán NOT, phép toán phủ định trả về giá trị TRUE nếu biểu thức là sai và ngược lại nếu biểu thức đúng thì trả về giá trị FALSE .
x = 5
y = 8
!(x==y)
(trả về giá trị TRUE bởi vì 'x' khác 'y')
5. Phép toán sử dụng cho chuỗi ký tự
Phép toán cộng cũng được sử dụng để kết hợp hai biến có giá trị text với nhau

t1 = "Have a good "
t2 = "life."
t3 = t1+t2
(Giá trị trả về của biến t3 là "Have a good life.")
…
(còn tiếp)

Read More

Tự học Javascript – Câu lệnh điều kiện if, else, switch

Điều thú vị nhất Thế nhưng cũng khó khăn nhất khi học Javascript và viết các đoạn mã Javascript là cấu trúc phân nhánh. Chương trình phải lựa chọn các lệnh phù hợp cho các điều kiện khác nhau. Để làm được điều này cần sử dụng các câu lệnh điều kiện hay cấu trúc điều kiện. Ta dùng chúng để kiểm tra các điều kiện khác nhau và từ đó có phương án thao tác trên dữ liệu khác nhau.

Trong Javascirpt có các cấu trúc điều kiện như sau:

If – sử dụng câu lện if để thực thi đoạn mã nếu chỉ có một điều kiện đúng
If … else – sử dụng câu lệnh này trong hoàn cảnh phải chọn lựa 2 điều kiện, đúng hoặc ngược lại.
Switch – chọn lựa đủ thứ phương án khác nhau để thực thi.
1. Câu lệnh if trong Javascript
2.  Câu lệnh "if ... else" trong Javscript
3. Câu lệnh Switch trong Javascript

Read More

Tầm quan trọng của javascript trong lập trình thiết kế website

Vài năm trước đây, javascript còn là một ngôn ngữ kịch bản không được quan tâm nhiều, và chỉ được sử dụng trong việc tạo hiệu ứng đơn giản. Thì với sự ra đời của HTML5, Bootstrap, Nodejs đã đưa Javascript lên thành ngôn ngữ có tầm quan trọng đứng thứ 2 trong việc lập trình thiết kế website.

HTML5 đã tỏ rõ được sức mạnh của bản thân trong việc lập trình ứng dụng và cải thiện tốc độ thiết kế website của javascript. Gần như bỏ xa Flash, HTML5 đã vượt lên một cách ngoạn mục.

Nodejs đã mang đến cho javascript một bộ áo mới, khi mà javascript trở thành ngôn ngữ server, sự dễ dàng khi lập trình của javascript đã mang đến sự tiện lợi trong lập trình backend với Nodejs.

Với Nodejs bạn hoàn toàn có thể xây dựng một website với Backend và Frontend bằng javascript, điều này thật là tuyệt vời trong thiết kế website.

Ngành công nghiệp thiết kế website đã có thêm một ngôn ngữ lập trình mới với sự ra đời của Nodejs.

Read More