LƯU Ý LỚN

Mục đích tạo ra tool này là để luyện code webcode PHP và MySQL khi xử lý web scraping kết hợp thư viện Simple HTML DOM Parser.

Miếng trầu là đầu câu chuyện

Đã khá lâu tôi không thực sự ngồi tập trung code bất cứ cái gì. Được dịp nghỉ dài ngày, cộng với việc trời bất chợt đổ mưa lớn, thôi thì thong thả ngồi làm một cái gì đó mình thực sự thích để tâm hồn được thoải mái hơn. Ở đời này, “không có gì quý hơn độc lập – tự do”. Chỉ khi được làm cái mình thích, cái mình đam mê, cái mình thực sự hăng say tìm hiểu, bạn mới thấy được mình có thể làm tới mức nào. Như cái pet project tôi ngồi nghĩ vu vơ rồi bắt tay vào làm này, do cũng gần 1 năm không đụng tới dòng code nào nên sau khi lên ý tưởng xong, tôi cũng mất kha khá thời gian để hồi tưởng lại các hàm, các cấu trúc câu lệnh.

Một phần quan trọng nữa là tôi không có gấu để đi chơi dịp lễ nên cái tool này nó mới có cơ hội ra đời hahahaha…

Giới thiệu sơ về công cụ một chút. Nếu bạn là người quá mức nghiêm túc, một kiểu mẫu của “thanh niên nghiêm túc” thì thôi đọc tới đây thì nên dừng lại. Vì đơn giản một điều, cái ý tưởng của pet project này không được trong sáng lắm. hahaha…

huong-dan-viet-jav-search-tool-1

Xem cái video này để biết sơ sơ những gì tôi sẽ nói tiếp.

851565_387545904704627_1620979404_n

Dữ liệu trên Internet là bao la, là tràng giang đại hải. Tìm cách biến chúng thành có ích cho mình là một công việc thú vị. Nói như thế không có nghĩa là tôi đang làm theo kiểu data scientist gì cả. Chỉ đơn giản ở mức web crawling dùng kỹ thuật data scraping thôi.

Bạn có thể tham khảo về Data Scraping và Data Crawling ở đây:

https://www.promptcloud.com/blog/data-scraping-vs-data-crawling/

Tôi chỉ là kẻ ngoại đạo với việc coding nên không dám bàn nhiều về mấy cái kỹ thuật chuyên sâu này.

Ý tưởng chính: tôi muốn tạo ra một công cụ mà ở đó, khi tôi cần tìm thông tin về một đối tượng nào đó, chỉ việc nhập tên của họ vào rồi xem kết quả trả về với đầy đủ thông tin của họ (nếu được). Đối tượng tôi nhắm đến ở đây để làm dữ liệu là kho thông tin về các người mẫu AV của Nhật Bản. Nếu nắm được kỹ thuật tôi dùng trong bài viết này, bạn hoàn toàn có thể chế biến lại theo hướng trong sáng hơn bằng cách sử dụng các tập dữ liệu đầu vào khác.

Như vậy, tôi cần phải có một nguồn dữ liệu cực kỳ phong phú và đầy đủ chi tiết về từng cá nhân các diễn viên AV để có thể trả về kết quả khi tìm kiếm. Nếu đủ tinh ý, bạn sẽ đặt câu hỏi, nếu đã có một trang web nào chứa đầy đủ thông tin về các nữ diễn viên AV đó, tại sao ta cần phải tạo thêm công cụ này để rồi liên kết thêm làm chi?

Vấn đề là không phải dữ liệu ban đầu bao giờ cũng đúng với ý của bạn. Dữ liệu thiếu là điều không chấp nhận được. Nhưng dữ liệu dư thừa đôi khi cũng gây khó chịu. Chính những lúc này mà ta mới có thể vận dụng kiến thức và kỹ năng của bản thân để tùy biến lại theo ý muốn của mình.

Demo cho sản phẩm, bạn có thể xem trước tại video này trước khi bắt đầu vào bài viết chi tiết. An tâm là tôi đã lọc bằng… mắt để tìm ra các tấm hình bình thường hết mức có thể rồi.

7

Và đây là giao diện chính của công cụ, tôi phát triển dưới dạng web app.

FireShot Capture 001 - JAV Model Search Tool - thuongdaugau - localhost.png

Ta bắt đầu đi vào các phần chi tiết, hướng suy nghĩ, phân tích code của tôi trong quá trình viết ra công cụ này.

Phác thảo ý tưởng

Như đã giới thiệu sơ lược ở trên, công cụ của tôi sẽ làm chức năng tìm kiếm thông tin về một JAV idol bất kỳ, miễn là dữ liệu cơ sở có sẵn. Khi tìm được, công cụ sẽ scraping những trường thông tin được tôi chỉ định trước đó và hiển thị kết quả cho người dùng. Tôi có search một vòng các trang web “chuyên ngành” này, dĩ nhiên là chỉ thuần túy cho mục đích học tập nhằm tìm ra được trang web có dữ liệu mình cần tìm thôi. Khuyến cáo bạn khi đọc bài viết này cũng nên tránh chỗ đông người kẻo dễ bị hiểu lầm nhé!

Trong số các kết quả tìm được, tôi có thấy một trang cung cấp đúng dữ liệu tôi cần tìm.

huong-dan-viet-jav-search-tool-1.jpg

104.gif45

Cảm ơn Google đã phát triển mode Ẩn danh thần thánh cho người dùng Chrome!

Dĩ nhiên tôi sẽ che mờ đi trang web này. Tất cả chỉ nhằm mục đích luyện code thôi, không phải để phục vụ nhu cầu khác nhé.

Trước khi cắm đầu vào code, ta phải phác thảo trước ý tưởng mình sẽ làm là gì. Một điều tôi vẫn hay nói với đứa em gái là hãy phác thảo code trên giấy trước – pseudo code. Chỉ khi nguệch ngoạc trước mọi thứ bằng cách cầm lên cây bút và viết ra trên giấy, lúc ấy đầu óc ta mới có thể tư duy trọn vẹn được. Nó là một dạng tiềm thức rồi, bạn học 12 năm trời toàn là phải dùng viết với vở, sách. Đùng một cái học đại học bạn tự cho mình quyền vứt bỏ đi phương pháp truyền thống là một suy nghĩ cực kỳ sai lầm. Đứa trẻ nào cũng phải bò trước rồi mới từ từ tập đứng tập đi. Trừ mấy trường hợp hy hữu thì thôi, không chơi. Còn đã là người mới bắt đầu thì phải tập viết mã giả, tập debug trên giấy trước.

img20190429101449.jpg

Hình trên là phác thảo của tôi. Dĩ nhiên tôi viết chỉ tôi hiểu thôi haha…

Sau khi hình dung được sơ bộ các bước làm, ta có thể tóm tắt gọn lại các ý chính như sau:

– Tạo ra một công cụ dạng web app, cho phép người dùng nhập vào tên JAV idol.

– Lấy dữ liệu input đó, truy vấn lên search tool của dữ liệu cơ sở.

– Có được kết quả phù hợp, scraping các trường thông tin cần thiết và lưu trữ vào các biến cục bộ.

– Show các dữ liệu đó lên trang kết quả của công cụ để người dùng xem.

Đó là các ý chính. Nhưng khi bắt tay vào làm bạn sẽ thấy nó phát sinh thêm vô vàn các vấn đề khác nữa.

Làm ứng dụng web app, tôi chọn ngôn ngữ PHP để thao tác xử lý. Đơn giản một điều là PHP thì tôi dùng quen, sau này nếu tôi muốn nâng cao sản phẩm lên bằng cách lấy dữ liệu scraping được bỏ vào database thì tôi cũng dễ xử lý hơn vì tôi từng dùng mySQL rồi. Dĩ nhiên SQL Server tôi cũng từng làm qua :’)

Nhưng vấn đề ở đây là tôi có sử dụng thêm một library nữa là PHP Simple HTML DOM Parser. Nó sẽ hỗ trợ tôi truy cập vào các thẻ HTML của trang dữ liệu cơ sở kia và lấy ra các strings cần thiết.

Lưu ý là ta nên kiểm tra trước cấu trúc HTML của trang web database kia, để xem họ viết như thế nào rồi mới bắt tay vào làm.

Một điều thú vị khác là trang web tôi chọn để lấy dữ liệu, nó không hề có chức năng search “bình thường” cho lắm hahahaha… Khi bạn chọn search, dù có gõ mỗi tên JAV idol thôi thì nó cũng trả về kết quả là các phim của idol đó, chứ không phải thông tin cá nhân thôi.

Nhưng từ từ ta xử vụ đó sau, xem qua cấu trúc hiển thị dữ liệu trước đã.

huong-dan-viet-jav-search-tool-2.jpg

Nhìn chung thì cấu trúc các thẻ HTML của trang web này bình thường, có thể lấy ra được dữ liệu không khó khăn lắm.

Ta tiếp tục kiểm tra thêm tính năng search của trang web này. Như đã nói khi nãy thì khi search với công cụ của nó, không thể lấy được thông tin như mong muốn. Vậy thì ta thử tìm hiểu xem khi ta thực hiện bấm chuột vào một idol bất kỳ, trang web xử lý luồng dữ liệu như thế nào.

May mắn là trước đây tôi có vọc qua về một số công cụ liên quan tới web application nên vấn đề này có thể xử lý dễ dàng.

Nếu bạn từng làm về web, hẳn sẽ biết là khi người dùng thao tác với một trang web, cũng chính là đẩy các luồng HTTP request lên máy chủ của web đó. Nếu bây giờ ta chặn ngang quá trình đó để kiểm tra thông tin thì sao?

Tôi dùng công cụ BurpSuite để tạo proxy đứng giữa client và server. Như vậy tôi có thể chặn bắt các luồng thông tin để xem cấu trúc URL khi người dùng bấm xem thông tin một idol.

Cấu hình proxy với BurpSuite như thế nào, tôi không trình bày ở bài viết này đâu. Bạn có thể lục tìm trong blog của tôi. Lúc trước đã có một bài viết về vấn đề này rồi.

huong-dan-viet-jav-search-tool-3.jpg

Như vậy là ta có thể hình dung được URL khi truy vấn tới một idol bất kỳ rồi.

Vậy là ta sẽ lưu ý cho việc xử lý dữ liệu input của người dùng: chuyển tất cả sang ký tự thường, khoảng trắng sẽ được thay thế bằng dấu gạch nối.

Chuẩn bị môi trường lập trình

Do hiện tại máy thật của tôi cài quá nhiều phần mềm, nếu tôi muốn triển khai localhost PHP thì sẽ dễ bị đụng port. Giải pháp nhanh gọn là ta deploy một cái máy ảo làm môi trường sandbox rồi tiến hành thôi.

Tôi dùng VMWare Workstation để triển khai máy ảo Windows 7 (Windows nào tùy bạn), cài các công cụ cần thiết như XAMPP, Sublime Text (để code cho tiện), thư viện PHP Simple HTML DOM Parser,…

Do quá trình làm của tôi ban đầu chỉ tập trung vào việc xử lý back-end ổn trước đã, nên tôi không chú trọng lắm về giao diện. Nhưng trong bài viết này, tôi mặc định bạn phải tìm được một giao diện web front-end ổn ổn thích hợp trước đã. Việc đổ code PHP vào trong HTML không khó khăn lắm nên ta tập tích hợp luôn để đỡ tốn thời gian.

Giải thích code xử lý

Thật ra code của tôi cũng chưa được tối ưu lắm. Cụ thể là tôi không try catch trường hợp nếu tìm không ra được JAV idol nào đó thì trả về kết quả gì. Nhưng những cái đó bạn có thể tự fix được nếu muốn dùng lại code của tôi. Mọi thứ đều được chia sẻ trên Github cá nhân của tôi:

https://github.com/votinhthuong

Ta xem qua code xử lý để thấy cách ứng dụng library Simple HTML DOM Parser trong đây.

Đầu tiên ta phải import thư viện vào trước để có thể sử dụng các hàm của nó.

include(‘simple_html_dom.php’);

Mọi thao tác đều phải được thực hiện khi thỏa mãn điều kiện người có nhập dữ liệu vào ô tìm kiếm ($_POST[‘search’]) và nhấn nút tìm ($_POST[‘submit’]). Hai thông tin này chính là property “name” của cấu trúc <input> và <button> trong form ở phần code HTML.

if ( isset( $_POST[‘submit’] )  && isset( $_POST[‘search’])) {

          ….

}

Như đã nói ở trên, ta phải xử lý dữ liệu người dùng nhập vào ở đúng dạng chuẩn, như vậy mới có thể đẩy qua trang web database để tìm kiếm. Trước tiên ta phải biến input string thành chữ viết thường bằng cách dùng hàm strtolower(), sau đó thay các khoảng trắng bằng dấu gạch nối bằng hàm str_replace(). Đây mới chỉ là các hàm có sẵn của PHP, chưa đụng tới thư viện dùng thêm.

$searchValue = strtolower($_POST[‘search’]);

$searchInput = str_replace(” “,”-“,$searchValue);

Ta sử dụng function file_get_html() để thực hiện thao tác truy vấn tới database đích. Quan sát cấu trúc URL trong BurpSuite, ta có thể thấy được cấu trúc khi search một JAV idol sẽ có đường link như thế nào. Ở đây ta phải nối chuỗi mặc định kèm với biến chứa dữ liệu nhập vào của người dùng.

$html = file_get_html(‘https://jav…..com/jav/’.$searchInput.’/’);

Quan sát trong code front-end của trang web, tôi biết được hình ảnh của JAV idol nào cũng sẽ được bỏ trong thẻ div có class như bên dưới. Như vậy ta chỉ việc dùng phương thức find() để tìm tới chính xác thôi.

$img = $html->find(‘div[class=blog-image col-p0 mt10] img’,0)->src;

huong-dan-viet-jav-search-tool-4.jpg

Tương tự cho phần tên của idol, tôi cũng tìm tới đúng thẻ html và lấy ra thôi.

Lưu ý là để cho đúng, bạn nên vừa làm tới đâu vừa echo tới đó để xem kết quả có đúng không.

$name = $html->find(‘h2[class=”title-medium br-bottom”]’,0);

Tiếp theo là phần xử lý các dòng dữ liệu về thông tin của idol đó.

          $list = $html->find(‘div[class=”col-sm-4″]’,0);

          $list1 = $list->find(‘ul[class=”unstyled-list list-medium”]’,0);

          $items = array();

          foreach ($list1->find(‘li’) as $li) {

                    $items[] = $li->innertext;

          }

          $string=implode(“\n”,$items);

}

Ta quan sát cấu trúc các thẻ html một chút.

huong-dan-viet-jav-search-tool-5.jpg

Đầu tiên là các trường thông tin sẽ được đặt trong một thẻ <div>. Tiếp đó là một <ul> để quản lý tất cả các <li> bên trong.

Như vậy ta cần phải dùng find() để tìm tới được <ul>. Sau đó, tiến hành chạy một vòng lặp qua tất cả các thẻ <li> có trong <ul> đó. Với mỗi <li> lấy ra được, ta chỉ cần lấy thông tin của innertext của nó mà thôi. Đồng thời, các giá trị đó được bỏ vào một mảng cộng dồn.

Tiếp theo, nếu để như vậy mà output ra thì các dòng sẽ được nối liền nhau. Do đó, ta phải xử lý thêm bằng cách dùng hàm implode().

Tới đây có thể nói là xong được vấn đề chính rồi. Nếu cho echo các giá trị biến ra xem thử thì có thể thấy là đã hoàn tất 90% rồi.

huong-dan-viet-jav-search-tool-6.jpg

Và kết quả trả về:

huong-dan-viet-jav-search-tool-7.jpg

Tiếp theo, ta sẽ cho các kết quả hiển thị được đẹp hơn bằng cách kết hợp với giao diện web đàng hoàng. Tôi có search được một themes miễn phí khá đẹp và phù hợp.

Có lẽ phần xử lý hiển thị kết quả trong giao diện ta không cần phải nói tới nữa. Đơn giản là vì nó quá căn bản rồi. (Thật ra là do viết tới đây là cũng dài quá rồi, mỏi tay @@).

Sau đây là thành quả với giao diện đẹp hoành tráng.

This slideshow requires JavaScript.

Như vậy là tôi đã trình bày xong chi tiết về hướng đi lẫn chi tiết cách làm. Tôi không có kinh phí để public cái tool này cho chạy trên Internet, code thì khi nào vui sẽ upload lên Github.