() translation by (you can also view the original English article)
Di dalam tutorial ini, kamu akan melihat PyQuery, sebuah librari Python yang memungkinkanmu membuat query jQuery pada dokumen XML. Secara sintaks itu serupa dengan jQuery, dan jika kamu akrab dengan jQuery itu seharusnya mudah diikuti.
Memulai Dengan PyQuery
Untuk memulai dengan PyQuery, install paket Python menggunakan PIP.
1 |
pip install pyquery
|
Setelah kamu menginstal PyQuery, import itu ke dalam program Python.
1 |
from pyquery import PyQuery as pq |
Mari kita mulai dengan contoh dasar cara kerjanya. Pertimbangkan HTML berikut:
1 |
<div id="divMain"> |
2 |
<span>
|
3 |
Hello World |
4 |
</span>
|
5 |
</div>
|
Lewatkan input XML pada obyek PyQuery dan kamu harusnya dapat menerapkan gaya jQuery pada itu.
1 |
divMain = pq("<div id='divMain'><span>Hello World</span></div>") |
Anggaplah divMain sebagai obyek jQuery dan cetak konten HTML dari div.
1 |
print divMain('#divMain').html() |
Simpan perubahan dan coba jalankan program. Kamu harusnya memiliki output berikut:
1 |
<span>Hello World</span> |
Untuk mengakses teks Hello World dari dalam span, kodenya akan berupa:
1 |
print divMain('#divMain').text() |
Simpan perubahan dan coba jalankan code. Kamu harusnya memiliki output berikut:
1 |
Hello World |
Manipulasi Atribut Menggunakan PyQuery
Sekarang mari kita lihat bagaimana membaca atribut menggunakan librari PyQuery. Anggaplah bahwa kamu memiliki sebuah elemen HTML seperti yang ditunjukkan:
1 |
<ul id="ulMain"> |
2 |
<li>Roy</li> |
3 |
<li>Hari</li> |
4 |
</ul>
|
Gunakan librari PyQuery untuk membaca konten HTML di atas.
1 |
ulMain = pq("<ul id='ulMain'><li>Roy</li><li>Hari</li></ul>") |
Mari kita coba akses atribut ID ulMain ul.
1 |
print ulMain.attr('id') |
Simpan perubahan di atas dan coba jalankan program Python. Kamu harusnya mendapatkan ID ulMain tercetak pada terminal.
Kamu melihat bagaimana mengakses atribut ID ulMain. Mari kita coba untuk menentukan sebuah nama class untuk elemen ulMain yang sama. Untuk menentukan sebuah atribut nama class, kamu perlu menentukan nama atribut dan nilai masing-masing seperti yang ditunjukkan:
1 |
ulMain.attr('class','testclass') |
Cetak obyek ulMain dan kamu harusnya memiliki elemen dengan atribut class.
1 |
<ul id="ulMain" class="testclass"> |
2 |
<li>Roy</li> |
3 |
<li>Hari</li> |
4 |
</ul> |
Kamu juga bisa menambahkan dan mengurangi class secara langsung tanpa menggunakan metode attr. Untuk menambahkan sebuah class pada element, kamu dapat memanfaatkan metode addClass.
1 |
ulMain.addClass('test') |
Untuk menghapus class yang ada dari element, kamu dapat memanfaatkan metode removeClass.
1 |
ulMain.removeClass('test') |
Menangani CSS Menggunakan PyQuery
Terlepas dari atribut, elemen hendaknya memiliki properti CSS yang sama. Untuk menambahkan atau memodifikasi properti CSS, kamu dapat menggunakan metode css dan menentukan properti. Katakanlah kamu ingin menentukan tinggi dalam style ulMain. Code berikut akan menambahkan properti style yang diperlukan pada elemen.
1 |
ulMain.css('height','100px') |
Simpan perubahan di atas dan coba jalankan program Python. Kamu harusnya memiliki ulMain yang tercetak bersamaan dengan style baru.
1 |
<ul id="ulMain" style="height: 100px"> |
2 |
<li>Roy</li> |
3 |
<li>Hari</li> |
4 |
</ul>
|
Untuk menambahkan banyak style pada element, kamu dapat menentukannya seperti yang ditunjukkan:
1 |
ulMain.css({'height':'100px','width':'100px'}) |
Jalankan program dan kamu harusnya memiliki style yang ditambahkan pada ulMain.
1 |
<ul id="ulMain" style="width: 100px; height: 100px"> |
2 |
<li>Roy</li> |
3 |
<li>Hari</li> |
4 |
</ul> |
Membuat & Menambahkan Elements
Selama pembuatan elemen dinamis, kamu dipersyaratkan untuk membuat elemen baru dan menambahkannya pada elemen induk yang ada dimana mereka akan diterjemahkan. Mari kita lihat bagaimana membuat dan menambahkan elemen menggunakan PyQuery.
Anggaplah kamu memiliki div kontainer utama bernama divMain.
1 |
divMain = pq("<div id='divMain'></div>") |
Mari kita buat sebuah elemen span baru menggunakan PyQuery.
1 |
span = pq('<span>Hello World</span>') |
Tambahkan beberapa properti CSS pada span.
1 |
span.css({'color':'blue','font-weight':'bold'}) |
PyQuery menyediakan sebuah metode untuk menambahkan elemen pada elemen yang ada. Kamu dapat menggunakan metode append elemen span pada div divMain. Berikut codenya:
1 |
divMain.append(span) |
2 |
print divMain |
Simpan perubahan dan jalankan program. Kamu harusnya dapat melihat divMain tercetak dengan span yang baru ditambahkan pada itu.
1 |
<div id="divMain"> |
2 |
<span style="color: blue; font-weight: bold"> |
3 |
Hello World |
4 |
</span>
|
5 |
</div>
|
Kamu menggunakan metode append untuk menambahkan span pada div. Kamu memiliki metode alternatif lainnya bernama appendTo yang akan menambahkan titik pada nilai. Di dalam kasus di atas kamu dapat menggunakan metode seperti berikut:
1 |
span.appendTo(divMain) |
Menemukan Elements Menggambar PyQuery
PyQuery menyediakan metode untuk menemukan anak, elemen berikutnya, elemen terdekat, dll. Itu juga menyediakan metode untuk menyaring dan menemukan elemen di dalam titik tertentu.
Anggaplah kamu memiliki bagian HTML tertentu seperti yang ditunjukkan:
1 |
<div id="divMain"> |
2 |
<div id="content"> |
3 |
<ul> |
4 |
<li>Jade</li> |
5 |
<li>Jim</li> |
6 |
</ul> |
7 |
</div> |
8 |
<div id="list"> |
9 |
<span>Hello World</span> |
10 |
</div> |
11 |
</div> |
Tambahkan HTML berikut pada obyek PyQuery:
1 |
divMain = pq("<div id='divMain'>"+ |
2 |
"<div id='content'>"+ |
3 |
"<ul>"+ |
4 |
"<li>Jade</li>"+ |
5 |
"<li>Jim</li>"+ |
6 |
"</ul>"
|
7 |
"</div>"+ |
8 |
"<div id='list'>"+ |
9 |
"<span>Hello World</span>"
|
10 |
"</div>"+ |
11 |
"</div>") |
Mari gunakan PyQuery untuk menemukan anak div divMain. Tambahkan baris code berikut untuk mencetak anak divMain.
1 |
print divMain.children() |
Saat menjalankan program, kamu harusnya memiliki output berikut:
1 |
<div id="content"> |
2 |
<ul>
|
3 |
<li>Jade</li> |
4 |
<li>Jim</li> |
5 |
</ul>
|
6 |
</div>
|
7 |
<div id="list"><span>Hello World</span></div> |
Untuk menemukan elemen terdekat sebuah elemen, kamu dapat menggunakan metode closest. Untuk menemukan elemen div terdekat pada span, code-nya akan berupa:
1 |
print divMain('span').closest('div') |
Perintah di atas akan mengembalikan output berikut:
1 |
<div id="list"><span>Hello World</span></div> |
Sebuah metode find juga tersedia untuk menemukan elemen. Sebagai contoh, untuk menemukan span di dalam divMain, kamu perlu memanggil metode seperti yang ditunjukkan:
1 |
print divMain.find('span') |
Perintah di atas akan mengembalikan span.
1 |
<span>Hello World</span> |
Memasukkan Sebuah Element Di Dalam HTML
Sementara append melakukan pekerjaan menambahkan elemen pada elemen yang ada, terkadang kamu perlu memasukkan elemen setelah atau sebelum elemen tertentu. PyQuery menyediakan sebuah metode untuk memasukkan elemen sebelum atau setelah elemen lainnya.
Mari tentukan sebuah elemen paragraf baru untuk dimasukkan setelah span di dalam div divMain.
1 |
p = pq('<p>Welcome</p>') |
Panggil metode insertAfter pada elemen p paragraf untuk memasukkannya lagi setelah span.
1 |
p.insertAfter(divMain('span')) |
2 |
print divMain |
Simpan perubahan di atas dan jalankan program Python. Kamu harusnya memiliki output di bawah:
1 |
<div id="divMain"> |
2 |
<div id="content"> |
3 |
<ul>
|
4 |
<li>Jade</li> |
5 |
<li>Jim</li> |
6 |
</ul>
|
7 |
</div>
|
8 |
<div id="list"> |
9 |
<span>Hello World</span> |
10 |
<p>Welcome</p> |
11 |
</div>
|
12 |
</div>
|
Dengan cara serupa, kamu memiliki metode insertBefore, yang memasukkan sebelum elemen. Modifikasi code ini seperti yang ditunjukkan untuk menggunakan metode insertBefore:
1 |
p.insertBefore(divMain('span')) |
2 |
print divMain |
Simpan perubahan di atas dan jalankan program. Kamu harusnya memiliki output di bawah pada terminal:
1 |
<div id="divMain"> |
2 |
<div id="content"> |
3 |
<ul>
|
4 |
<li>Jade</li> |
5 |
<li>Jim</li> |
6 |
</ul>
|
7 |
</div>
|
8 |
<div id="list"> |
9 |
<p>Welcome</p> |
10 |
<span>Hello World</span> |
11 |
</div>
|
12 |
</div>
|
Rangkuman
Di dalam tutorial ini, kamu melihat bagaimana memulai dengan PyQuery, sebuah librari Python yang memungkinkanmu membuat query dari jQuery pada dokumen XML. Kamu melihat bagaimana memanipulasi atribut dan CSS style elemen HTML.
Kamu belajar bagaimana membuat dan menambahkan elemen pada elemen terkini dan memasukkan elemen baru sebelum dan sesudah elemen. Apa yang kamu lihat di dalam tutorial ini hanyalah ujung dari gunung es, dan ada banyak lagi yang ditawarkan librari ini.
Untuk informasi lebih detail tentang menggunakan librari ini, saya akan merekomendasikan membaca dokumentasi resmi. Silahkan beri tahu kami saranmu di dalam komentar di bawah.
