Free Templates

Cara Mudah Scraping Web Content dengan NodeJs

Hallo..

Beberapa waktu lalu saya lagi belajar scraping konten web. Awalnya saya mencoba dengan bahasa pemrograman PHP. Saya pernah mencoba library http://simplehtmldom.sourceforge.net/. Dilihat dari cara penggunaan memang mudah, saya mencoba scraping halaman web sederhana memang cukup mudah. Tetapi ketika scraping halaman web yang html codenya sangat banyak dan kompleks terasa sangat berat sekali.. sangat sering laptop saya ngeblank dan  harus di shutdown secara paksa karena nggak kuat extract html dom dengan library ini.

Masih di pemrograman PHP saya mencoba library http://php.net/manual/en/simplexmlelement.xpath.php . Secara performa cukup ringan jika dibandingkan dengan simple dom html (tetapi tetep kurang cepet). Akan tetapi menurut saya kurang mudah dalam penggunaan.. saya sering stag dalam mengambil konten dengan struktur2 tag yang kompleks. Terutama pada saat mendefinisikan path dari konten yang mau diambil.. Sempet bahagia ketika di firebug bisa ngambil xpath nya.. tetapi pasrah juga ketika xpath tersebut tidak bisa jalan untuk ngambil konten yang dimaksud. hahaha :((

Akhirnya.. gugling tentang dunia perskrepan banyak yang nyaranin pake NodeJs atau Python. Nyoba Python bentar.. tetapi takut mentog juga krn belum pernah belajar python programming 😐 . Kemudian nyoba NodeJs dan ternyata ada library yang bagiku mudah banget utk di pake.. Ya namanya adalah Cheerio. Dengan libray ini kita dapat mengambil konten website layaknya kita menggunakan JQuery.. krn bisa nembak langsung dengan css selector. Krn aku lumayan sering pake JQuery jdi terasa enak banget menggunakan library ini :))

Jadi.. kali ini aku akan share scraping web sederhana menggunakan node js. Case-nya adalah seperti berikut:

  1. Saya memiliki url (single page) untk di scrap. Dalam contoh ini saya akan mengambil informasi produk dari lazada.
  2. Informasi produk tersebut saya scrap kemudian saya simpan di database MySQL yang saya buat untuk  menampung hasil skrepan.

Langkah-Langkahnya adalah:

Pertama,

Buat database dengan nama scraperdb, kemudian buat tabel products seperti berikut:

CREATE TABLE IF NOT EXISTS `products` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`original_url` text,
`sku` varchar(255) NOT NULL,
`name` varchar(255) NOT NULL,
`price` decimal(10,0) NOT NULL,
`sale_price` decimal(10,0) DEFAULT '0',
`details` text,
`description` text,
`categories` varchar(255) DEFAULT NULL,
`brand` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `sku` (`sku`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

 

Kedua, (saya asumsikan terinstall nodejs di komputer Anda , tutorial : https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-an-ubuntu-14-04-server)

Buat folder project dengan nama simple-scraper , kemudian buat file dengan nama package.json di dalam folder tersebut. Buka file package.json dan tambahkan baris kode berikut:

{
"name"         : "simple-scraper",
"version"      : "0.0.1",
"description"  : "Scrap Web Content with NodeJs",
"main"         : "main.js",
"author"       : "Sugiarto",
"dependencies" : {
"express"    : "latest",
"request"    : "latest",
"cheerio"    : "latest",
"mysql"      : "latest",
"line-reader" : "latest",
"html-to-text" : "latest"
}
}

 

Ketiga,

Buka terminal / command prompt , masuk ke folder project simple-scraper dan ketikan perintah berikut kemudian tekan enter:

 npm install

Perintah di atas akan menginstall library-library nodejs yang telah di definisikan pada file package.json

 

Keempat,

Saatnya koding untuk scraping konten dari url website yang kita inginkan. Dalam contoh ini saya akan mengambil konten dari produk di lazada. Buat file dengan nama lazada.js kemudian tambahkan kode program berikut di dalamnya.

var request = require('request');
var cheerio = require('cheerio');
var mysql = require('mysql');
var htmlToText = require('html-to-text');

var con = mysql.createConnection({
host        : "localhost",
user        : "root",
password    : "root",
database    : "scraperdb"
});

con.connect(function(err){
if(err){
console.log('Error connecting to Db');
return;
}
console.log('Connection established');
});

var url_site = 'http://www.lazada.co.id/lenovo-vibe-k4-note-55-16-gb-hitam-gratisvrglasses-tambahangaransi-7307062.html';

request(url_site, function(error, response, body) {
if(error) {
console.log("Error: " + error);
}
console.log("URL: " + url_site);
console.log("Status code: " + response.statusCode);

var $ = cheerio.load(body);

var product_sku = $('#pdtsku').text().trim();

var product_name = $('#prod_title').text().trim();

var price = 0;
var sale_price = 0;
var percent_off = 0;

if ($('#special_price_area').length > 0 && $('#special_price_area').hasClass('hidden') == false){
price = parseFloat($('.price_erase #price_box').text().replace(/\D/g,'')).toFixed(2);
sale_price = parseFloat($('#special_price_box').attr('content')).toFixed(2);
}else{
price = parseFloat($('#special_price_box').attr('content')).toFixed(2);
}

var description = htmlToText.fromString($('#productDetails').html());

var product_details = $('.product-description__block:nth-child(2)').html();

var categories = [];
$('.breadcrumb__list').find('a').each(function() {
categories.push($(this).text().trim());
});

var category_tree = categories.join(" > ");

var brand = $('#prod_brand .prod_header_brand_action:nth-child(1) a').text().trim();

console.log("Sku : " + product_sku);
console.log("name : " + product_name);
console.log("Price : " + price);
console.log("Sale Price : " + sale_price);
console.log("Product Details : " + product_details);
console.log("Description : " + description);
console.log("Categories : " + category_tree);
console.log("Brand : " + brand);

var query_sql = "INSERT INTO products (original_url,sku,name,price,sale_price,details,description,categories,brand) VALUES('" + url_site + "','" + product_sku + "','" + product_name + "','" + price + "','" + sale_price + "','" + product_details + "','" + description + "','" + categories + "','" + brand + "')";
con.query(query_sql);

process.exit();
});

 

Kemudian jalankan script tersebut dengan perintah :

node lazada.js

Hasilnyaa,,,!!

scrap-lazada

Jika tidak ada masalah, maka informasi produk dari url yang telah di definisikan di atas akan tersimpan secara otomatis ke tabel products di database MySQL Anda. Mudah bukan? selamat mencoba :))

Source code ada di https://github.com/gieart87/simple-scraper

Vicommerce – Bootstrap Template Toko Online Gratis

vicommerce

 

Features :

  • Home Page + Slider
  • Search & Product List Page
  • Single Product

DOWNLOAD

Sapi – Free Corporate Bootstrap Theme

1-landing-2Halloo semua,

Ada templet gratisan ini. sapa tau bisa bermanfaat buat kalian. Langsung aja download gaes => Sapi Free Bootstrap Theme

Tokokita : Ecommerce Bootstrap Theme Free Download

Guys…

Ini daripada njamur di hardisk mending aku share aja kyaknya :)) , siapa tau ada yg tertarik. Tampilanya seperti ini :

tokokita

Kalian bisa liat Live Demo nya jg.

Bagi yang berminat silahkan aja download langsung guys  => [Download not found]

 

“Sukripsi” – Download Free Template HTML built with Twitter Bootstrap

Haee….

Beberapa waktu lalu aku sempet iseng bikin theme HTML dengan Twitter Bootstrap.  Theme yang aku buat ini sangat sederhana sekali, hanya terdiri dari homepage, blog, detail, galleries, contact, sign in saja. Ini screenshoot dari home page  nya:

sukripsi_screenshoot

Kalian bisa download theme ini secara gratis Sukripsi Theme (3913 downloads) . Bisa dioprek2 bagi kalian yang lagi mau belajar Twitter Bootstrap.  Ato bisa kalian modifikasi untuk project web kalian. Semoga bermanfaat 🙂

Twitter Bootstrap 2 : Membuat Website Theme Portfolio dengan Bootstrap version 2.1.1

Guys… di postingan sebelumnya tentang mengenal bootstrap aku sudah sekilas bahas tentang apa itu bootstrap twitter.. Nah kali ini kita mau langsung praktek aja nih membuat website theme portfolio dengang bootstrap version 2.1.1.

Pertama : Download bootstrap 2.1.1

Kedua : Buat struktur folder seperti berikut :

Struktur Folder Theme Bootstrap

Struktur Folder Theme Bootstrap

Jadi folder projectnya adalah ‘singlefolio’, kemudian di dalamnya terdapat folder ‘bootstrap’ yang merupakan file2 utama bootstrap dan ada folder ‘asset’, yang merupakan file2 (css,img,js) tambahan sesuai yg kebutuhan kita nanti. Untuk file2 HTML nanti akan kita simpan di folder utama ‘singlefolio’.

Ketiga : Buat mockup Desain Portfolio sederhana seperti berikut

Mockup Desain

Mockup Desain

Keempat : Saatnya Koding HTML + CSS + JS

Buatlah file dengan nama index.html di folder singlefolio, dan isi dengan kode2 html seperti dibawah :

Struktur utama koding di bootstrap

Berikut ini adalah pemanggilan library2 bootstrap dan jquery :

[html]
<!DOCTYPE html>
<html>
<head>
<title>SingleFolio : Portfolio Theme with Bootstrap</title>
<!– Bootstrap –>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
</head>
<body>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
[/html]

Kode HTML Bagian Header Navigation

[html]
<div class="row">
<div id="nav" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="index.html" class="brand">SingleFolio</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="#home" class="anchorLink">Home</a></li>
<li><a href="#about" class="anchorLink">About</a></li>
<li><a href="#services" class="anchorLink">Services</a></li>
<li><a href="#portfolio" class="anchorLink">Portfolios</a></li>
<li><a href="#contact" class="anchorLink">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="base_css.html">Dropdown Menu 1</a></li>
<li><a href="components.html">Dropdowb Menu 2</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>
<form class="form-search navbar-search">
<input type="text" class="search-query input-medium" placeholder="Search">
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
[/html]

Kode HTML Bagian Splash Page (Slider Image)

[html]
<div class="row" id="home">
<div class="container welcome-message">

<h2>Bootstrap Twitter</h2>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
</div>
</div>

<div class="row">
<div class="container">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/940×300" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/940×300" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/940×300" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</div>
</div>
<br/>
[/html]

Kode HTML Bagian About Us

[html]
<div class="row" id="about">
<div class="container">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar tortor ac tortor dictum congue. Maecenas placerat, massa in aliquet consequat, enim purus convallis neque, et viverra augue purus vitae urna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar tortor ac tortor dictum congue. Maecenas placerat, massa in aliquet consequat, enim purus convallis neque, et viverra augue purus vitae urna.</p>
</div>
</div>
[/html]

Kode HTML Bagian Services

[html]
<div class="row" id="services">
<div class="container">
<div class="row">
<div class="span12">
<h2>Services</h2>
</div>
</div>
<div class="row">
<div class="span4 service-item">
<h4><i class="icon-tint"></i> Web Development</h4>
<img src="http://placehold.it/270×125" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar tortor ac tortor dictum congue. Maecenas placerat, massa in aliquet consequat, enim purus convallis neque, et viverra augue purus vitae urna.</p>
</div>

<div class="span4 service-item">
<h4><i class="icon-map-marker"></i> Mobile Development</h4>
<img src="http://placehold.it/270×125" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar tortor ac tortor dictum congue. Maecenas placerat, massa in aliquet consequat, enim purus convallis neque, et viverra augue purus vitae urna.</p>
</div>

<div class="span4 service-item">
<h4><i class="icon-wrench"></i> Network Development</h4>
<img src="http://placehold.it/270×125" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar tortor ac tortor dictum congue. Maecenas placerat, massa in aliquet consequat, enim purus convallis neque, et viverra augue purus vitae urna.</p>
</div>
</div>
</div>

</div>
[/html]

Kode HTML Bagian Portfolios:

[html]
<div id="portfolio" class="row">
<div class="container">
<h2>Portfolios</h2>
</div>
<div class="container">
<ul class="thumbnails portfolios">
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
</ul>

</div>

</div>
[/html]

Kode HTML Bagian Contact:

[html]
<div id="contact" class="row">
<div class="container">
<h2>Contact</h2>
</div>
<div class="container">
<div class="row">
<div class="span6">
<form>
<label>Name</label>
<input class="span6" type="text" placeholder="Your Name">
<label>Email Address</label>
<input class="span6" type="text" placeholder="email@example.com">
<label>Your Message</label>
<textarea class="input-xlarge span6" id="textarea" rows="6" placeholder="Type your message here."></textarea>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

<div class="span6">
<iframe width="500" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=London@51.508129,-0.128005&ie=UTF8&z=12&t=m&iwloc=near&output=embed"></iframe>
</div>
</div>
</div>
</div>
[/html]

Kode HTML Bagian Footer:

[html]
<hr>

<footer>
<div class="row">
<div class="container">
&copy; <a href="http://gie-art.com">Gie-art.com</a>
</div>
</div>
</footer>
[/html]

Okeyy… Selesaiii… :D, dan berikut ini hasilnya :
ONLINE DEMO !

Twitter Bootstrap 1 : Mengenal Twitter Bootstrap

*udah agak telat gpp ye 😐 *

Twitter bootstrap adalah tools untuk membuat user interface (HTML+CSS+Javascript) yang sangat memanjakan developer. Tools ini didistribusikan secara gratis tetapi memiliki fitur2 yang tak ternilai harganya.. ya.. aku dengan mantab mengatakan ini. Dulu ketika ada klien yg akan membuat website dengan budget yg terbatas saya selalu dipusingkan dengan pekerjaan desain. Karena pada dasarnya sya tidak punya kemampuan untk desain, dan dengan budget yang terbatas tentu akan berfikir ulang kali utk membayar temen utk mengerjakan pekerjaan desain ini.

Tetapi twitter bootstrap hadir dengan membawa begitu banyak keindahan bagi para developer web yg kurang mampu dalam mendesain. Jadi skrg bila ada klien yg akan membuat website dengan tampilan (tidak kompleks) dan budget sederhana.. Aku tidak perlu khawatir utk membayar desainer utk mengerjakannya. Dengan twitter bootstrap aku bisa… emmm.. klo hasil ya cukupan lah.

Dari sini aku kadang berfikir.. aku yg programmer tulen saja bisa membuat user interface web yang bisa dikatakan cukup layak lah… apalagi seorang desainer yg memang fokus di pengembangan user interface.. pasti hasilnya lebih WOW lagi donk.. Intinya Twitter boostrap sangat memanjakan temen2 developer semua.. 😀

Berikut ini beberapa cuplikan fitur yang dimiliki twitter bootstrap:

–  Grid System, default 12 columns

– Layout : Fixed, Fluid, Responsive

– Fundamental HTML element styles : typography, tables, forms, buttons, icons, images

– Components : dropdown, navigation, buttons groups,  breadcrumb, pagination, label, thumbnail, alert message .etc

– Javascripts : modals, dropdown, scrollspy, tab, tooltip, popover, alert, accordion, carousel .etc

Oke guys.. itu tdi sekilas tentang twitter bootstrap. Di postingan2 berikutnya akan aku bahas tentang studi kasus2 membuat user interface (web) sederhana yang aku kerjakan pake twitter bootstrap..

sampaii jumpaa… 😀