Baru-baru ini saya membuka toko onlnie saya. Cuman permasalahannya supplier saya punya website toko online senidri dan saya harus mengambil satu per satu produknya. Supplier saya punya lebih dari 1000 produk lebih yang ready stock.
Saya malas donk kalau harus input satu-satu. Sudah baca moto blog saya toh? “Jadilah Pemalas Cerdas”. “Kemalasan” saya muncul. Gimana kalau saya grab saja semua konten websitenya dengan ilmu programming saya. Dan tara, akhirnya jadilah Toko Online saya.
Dalam waktu 2 hari saja. Semua produk sudah ada di toko online saya dan siap dijual.
Tetapi saya tidak akan membongkar semuanya bagaimana sampai bisa input di toko online saya secara otomatis, karena tutorial nya akan menjadi sangat panjang.
Tetapi, kalau banyak peminat, Saya tidak keberatan membuat tutorialnya.
Sebelum saya memulai tutorialnya, ilmu yang harus dikuasai antara lain:
- Kemampuan Programming
- Kemampuan Algoritma
- Penguasaan Bahasa Pemprograman PHP
- Penguasaan Bahasa Pemprograman Javascript
- Penguasaan Framework jQuery
- Penguasaan AJAX menggunakan Javascript
Jadi begini, untuk mengambil konten sebuah halaman website sebenarnya hanya perlu PHP saja. Cuman kalau hanya menggunakan PHP saja dan halaman yang di ambil banyak sekali. Maka yang akan terjadi adalah Request Timeout. Oleh karena itu, kita menggunakan AJAX untuk memecah tiap request hanya 1 halaman saja.
Dalam khasus ini saya akan mencoba mengambil kategori dari Tokopedia.com
Tokopedia
Sebelum saya masuk ke coding. Saya mau menjelaskan algoritma(runtutan berpikir)nya terlebih dahulu:
- Membuat script PHP untuk mengambil seluruh konten dari https://www.tokopedia.com. Yang dimaksud seluruh konten ini adalah semua script HTML pada halaman https://www.tokopedia.com saja. Bukan disemua link tokopedia.
- Memanggil script PHP dengan menggunakan AJAX dengan bantuan jQuery.
- Mengambil kategori dengan bantuan jQuery.
Membuat Script PHP Untuk Mengambil Konten Sebuah Website
<?php $url=null; if(isset($_GET['url'])) $url=$_GET['url']; if(!empty($url)) echo file_get_contents($url); ?>
Script diatas akan mengambil konten sebuah halaman website dengan parameter GET[“url”]. Simpan dengan nama getpage.php.
Contoh penggunaan: Silakan akses getpage.php?url=https://www.tokopedia.com. Maka akan mendapatkan hasil persis seperti Tokopedia.
Memanggil script PHP dengan menggunakan AJAX dengan bantuan jQuery
Sekarang buat file dengan nama index.php. Copas script dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Hi there</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// @param data content html tokopedia(index.php)
var Tokopedia = function(data) {
$scope = {};
$scope.data = data;
// Mengambil kategori-kategori tokopedia
this.getCategories = function() {
return $scope.getCategories();
}
// Private method untuk mengambil kategori tokopedia
$scope.getCategories = function() {
// Mengubah data XML menjadi object jQuery
var _jquery = $($scope.data);
// Mengambil semua tag <span class="title"> yang mempunyai parent <li> lalu <ul class ="allcat">
var _ul = _jquery.find('ul.allcat li span.title');
// Membuat variable _cat untuk menampung semua kategori
var _cat = [];
_ul.each(function(i, li) {
_cat.push($(li).text());
});
return _cat;
}
}
$(document).ready(function(){
var _url = 'getpage.php';
$.get(_url, {url: 'https://www.tokopedia.com'}, function(data) {
var tp = new Tokopedia(data);
var categories = tp.getCategories();
console.log(categories);
});
});
</script>
</head>
<body>
</body>
</html>
Nah sekarang variabel categories sudah berisi semua kategori tokopedia yang tampil dihalaman depan. Tinggal mau diapakan kategorinya. Tergantung kebutuhannya.
14 Responses
trus scriptnya ditaroh dmn ya mas, bisa di blog gak? maaf newbie
Ya di file PHP/HTML nya mas. 😀
Semisal kita search kategori trus kita ingin nampilin hasil dari kategori tersebut gmana om?
terimakasih
Mungkin yang dimaksud “autocomplete”?
Seperti ini maksudnya? https://jqueryui.com/autocomplete/#categories
Bisa 🙂
ga work lagi ya om
Sorry baru bales. Sibuk banget om.
Errornya kenapa om? Harusnya works sih, kecuali struktur HTML toped sudah berubah.
karena CORS kang, terus file_get_contents nya engga respond
Bisa di perdetail lagi kata-kata errornya seperti apa? 🙂
Bagimana scpritnya, jika hanya sebagian content saja yg di ambil tapi terupdate secara otomatis tanpa refresh?
misal kurs mata uang yg diambil dan dapat merefresh sendiri tanpa kita refresh sendiri..
Mudah saja. Tinggal jalankan saja scriptnya sewaktu update, jika tahu kapan website ybs terupdate. Jika tidak tahu, bisa menggunakan fungsi timer yang selalu menjalankan script setiap N-detik sekali. Misalkan jalankan lagi setiap 10 detik sekali.
Semoga membantu 🙂
Maaf mas mau tanya, itu kalau mau buat texarea yang ada nonya gimana yaaa?
Maaf saya kurang paham.
Maksudnya “texarea yang ada nonya” itu apa ya?
kl bs sambil di kasih tutorial via yutube gan.
mayan kan bs tambah erning dr yutub.. upss.. 😀
Terima kasih gan atas sarannya 🙂