Trong thời gian này mình có làm một ứng dụng chat, trong đó có tính năng upload file và hình ảnh. Và mình đã gặp một vấn đề với các hình ảnh được chụp bằng điện thoại. Đó là hình ảnh bị hiển thị sai hướng, do khi chụp người dùng đã để dọc điện thoại, dẫn đến lúc hiển thị hình ảnh trên trang web, thay vì hình ảnh hiển thị thẳng đứng thì lại nằm ngang. Giống như thế này:
Và công việc của mình là phải xác định được, hình ảnh đó bị sai thế nào, để hiển thị lại cho đúng.
Khi bắt đầu một dự án AngularJS chúng ta có rất nhiều việc phải làm như tạo cấu trúc thư mục, viết code để tự động build các file js, css, chuẩn bị code để test… Dĩ nhiên ta có thể tự mình lần lượt làm các việc đó, hoặc như trước đây, tôi tạo sẵn một thư mục dự án mẫu rồi khi nào dùng sẽ copy qua dùng lại. Tuy nhiên vẫn tốt hơn nếu như có một công cụ giúp mình làm các việc kể trên, và trong bài này tôi giới thiệu đến các bạn công cụ generator-boom, một công cụ sinh code AngularJS dành cho Yeoman.
Gulp is the streaming build system. Gulp’s use of streams and code-over-configuration makes for a simpler and more intuitive build. I didn’t use Gulp or Grunt before. Today, I hear about it and decide to use it on my project. What I write here is not a tutorial, it just what I do with Gulp.
To install Gulp we must have node installed. Nodejs can be installed from here http://nodejs.org/
– Gulp: We should install gulp globally
|
|
Thời gian trước, có người nói với tôi rằng nên sử dụng Bower để cài đặt những gói thư viện js, css phía client site của một plugin tôi đang phát triển. Tôi cũng chỉ ậm ừ qua, và nghĩ rằng không cần thiết lắm bởi vì hiện tại những thư viện đó vẫn đang chạy tốt.
Vậy tại sao hôm nay tôi lại giới thiệu về bower cho các bạn, đơn giản vì anh bạn đó của tôi đã sử dụng bower cho dự án của mình. Khi anh ta gởi source code cho tôi nó không hề có các thư viện nào như jquery, angulajs, boostrap… và anh ta bảo tôi cài vào đi.
Lúc đó tôi mới mày mò lên các trang web để tải về các thư viện từ jquery, angularjs, boostrap …. rồi copy nó vào thư mục code.
– Không! Không cần phải làm như vậy.
Anh ta nói. “Chỉ cần sử dụng bower install “. Và quả nhiên, bower đã tự động cài hết các gói thư viện cho tôi. Thật tuyệt vời!
Trong bài viết này, tôi sẽ chỉ ra hai cách để tạo ajax upload. Cách thứ nhất sử dụng Jquery cùng với plugin Form Plugin của nó và cách thứ hai dành cho bạn nào muốn mày mò vọc code để tự mình viết riêng phần upload chỉ dùng javacript. Ở bài viết này, tôi sử dụng PHP để viết phần server.
Ngày hôm nay, trong khi đang làm, tôi bắt gặp 2 trường hợp cần giải quyết với jquery. Trường hợp thứ nhất là bắt sự kiện khi người dùng kích chuột bên ngoài một phần tử và trường hợp thứ hai là kiểm tra một phần tử có đang hiển thị hay không.
Cách giải quyết hai trường hợp này cũng khá đơn giản, nhưng tôi nghĩ nõ cũng sẽ làm ta mất một số thời gian nếu như chưa biết. Vì vậy tôi sẽ chia sẽ hai thủ thuật này ở đây.
Trong khi sử dụng JQuery, có nhiều trường hợp tôi tự hỏi làm sao để kiểm tra một phần tử có tồn tại hay không. Chẳng hạn như div có id là “exist” đã có hay chưa.
Ngay khi nảy ra câu hỏi tôi nghĩ ngay đến một cách kiểm tra đơn giản:
|
|
Nhưng thực tế thì cách trên hoàn toàn sai bởi vì khi sử dụng $() nó luôn trả về một đối tượng cho dù không tồn tại phần tử ta muốn xác định thì nó cũng sẽ trả về một đối tượng rỗng. Vì vậy điều kiện trong câu lệnh if sẽ luôn luôn đúng.
Trong đối tượng JQuery nó đã có chứa thành phần DOM. Để lấy được thành phần DOM từ đối tượng JQuery ta có thể sử dụng phương thức get() .
Đã bao giờ bạn muốn trích xuất thông tin từ một trang web bằng PHP, chẳng hạn như giá cổ phiếu, giá vàng, nội dung bài báo… công việc đầu tiên là bạn sẽ đọc nội dung của trang web đó rồi tìm đến phần tử chứa nội dung cần lấy. Hẳn các bạn đã từng thử nhiều cách bằng hàm tìm chuỗi hoặc dùng biểu thức chính quy và bạn thấy nó thật phức tạp, hoặc nếu trên trang web đó có thay đổi lại cấu trúc thì chúng ta cũng phải rất vất vã để sửa lại hàm lấy thông tin của mình.
Và rồi bạn tự hỏi rằng, ước gì mình có thể thao tác với nội dung trang web đó đơn giản như bạn đã làm với JQuery, bạn có thể lấy các thẻ bằng ID hoặc là class của nó.
Và đây, tôi xin giới thiệu đến cho các bạn một thư viện PHP có thể giúp bạn làm việc với các phần tử HTML đơn giản như các bạn đang làm với Jquery. Các bạn có thể đi qua từng phần tử, lấy nội dung của nó, thậm chí có thể thay đổi nội dung bên trong của 1 phần tử, thay đổi class,…
PQlite sẽ giúp chúng ta làm phần khó.