Tampilkan postingan dengan label Dokumentasi. Tampilkan semua postingan
Tampilkan postingan dengan label Dokumentasi. Tampilkan semua postingan

Anchor Tag dalam HTML untuk membuat Link

Add Comment
Anchor Tag dalam HTML untuk membuat Link - Selamat pagi menjelang siang, dalam rangka mendokumentasikan hasil belajar, seperti biasa penulis akan melanjutkan pembahasan yang sebelumnya yakni masih seputar pondasi HTML untuk front end web development, namun kali ini kita akan belajar tentang Anchor tag. Dimana untuk mudahnya anchor tag <a> digunakan untuk membuat link dalam HTML yang dimana ketika di klik akan berpindah pada link yang dituju.

Untuk artikel yang sebelumnya yakni tentang beberapa semantic tag dalam HTML seperti tag section, tag article, tag header dan tag footer, untuk membacanya teman-teman dapat mengunjungi artikel berikut ini Semantic tag section, article, header dan footer dalam HTML dan untuk artikel sebelumnya juga penulis telah membagikan pembahasan osp kebumian yang bisa dilihat dalam artikel berikut ini Pembahasan OSP SMA Kebumian tahun 2018 secara rinci

Achor tag <a> ini ditutup dengan </a> dan biasanya untuk link yang dituju akan dituliskan dalam href="link yang dituju" serta diletakan pada kata yang diapit oleh anchor tag pembuka dan penutupnya, jadi untuk lengkapnya seperti ini kira-kira. 

<a href="www.semangat27.com">Semangat27</a>
hasil
Semangat27
Selain di isi dengan link, link yang dituju bisa juga diisi dengan addres html yang lainnya yang ingin dituju. Sebagai contoh silakan teman-teman membuat 2 file HTML pada sublime text 3 yang sebelumnya sudah di install dalam komputer, jika bingung caranya silakan cari artikelnya diblog ini dengan melihat pada label HTML atau Front End blog ini. Lihat dibawah ini untuk filenya.

File pertama beri nama index.html

<!DOCTYPE html>
<html>
<head>
<title>This is an index file</title>
</head>
<body>
<h1>Semangat27.com Company</h1>
<section>
<h2>About</h2>
</section>
<section>
<h2>Contact</h2>
</section>
<section>
<h2>Our Article</h2>
<article>
<header>
<h3>article title</h3>
</header>
<p>
contents of the article
</p>
<footer>
footnotes usually contain labels
</footer>
</article>
</section>
<section>
<h2>Portofolio</h2>
</section>
<footer>
<a href="term and condition.html">term and condition</a>
</footer>
</body>
</html>

dan file kedua dengan nama term and condition.html

<!DOCTYPE html>
<html>
<head>
<title>term and condition</title>
</head>
<body>
<h1>term and condition</h1>
<p>content for term and condition</p>
<footer>Copyright things</footer>
</body>
</html>

Perhatikan anchor tag <a href="term and condition.html">term and condition</a> yang ketika diklik pada hasil index.html akan menuju term and condition.html. Untuk hasil dari index.html akan seperti dibawah ini.


Perhatikan gambar diatas, hasil dari anchor tag akan berupa link berwarna biru dengan garis bawah yang bisa diklik dan ketika diklik akan menuju hasil dari term and condition.html yang hasilnya seperti gambar dibawah ini.

Jika bingung silakan lihat video berikut ini yak, tapi dalam bahasa inggris hehe tapi penulis yakin kalian pandai jadi pasti paham wkwk.


Ya demikian lah dokumentasi untuk hari ini yang dimana juga merupakan pertanda bahwa berakhir juga artikel kali ini, semoga bermanfaat dan apabila ada pertanyaan tulis di kolom komentar dibawah yak, sekian dari penulis, penulis mau kulak belanjaan buat toko dulu hehe, maklum liburan dirumah jadi harus bantu emak. byebye

Semantic tag section, article, header dan footer dalam HTML

Add Comment
Semantic tag section, article, header dan footer dalam HTML - selamat pagi para pengunjung semangat27.com, kali ini seperti biasa penulis akan menuliskan kembali dokumentasi dari hasil belajar penulis dalam mempelajari HTML untuk front-end web development, semoga dapat bermanfaat untuk para pembaca dan dapat ingat selalu dalam benak penulis hehe. Baiklah langsung saja dalam artikel kali ini akan dibahas sepemahaman penulis tentang tag section, article, header dan footer.

Jadi dari apa yang penulis pelajari, tag <section> ini merupakan tag bagian atau seksi yang merepresentasikan suatu bagian dari dokumen atau aplikasi. Secara kontekstual, tag <section></section> adalah element yang digunakan untuk tujuan mengelompokkan suatu konten atau dokumen menjadi beberapa bagian yang berdasarkan pada tema. Gampangannya untuk membuat artikel deh ya hehe. Secara sekilas penggunaan section mungkin mirip dengan tag div, tetapi tag section ini tidak ditujukan sebagai container yang menampung element yang bertujuan untuk memberi style/mendesain melalui CSS.

Tag section ini biasanya di kolaborasikan didalamnya dengan element heading seperti <h1> hingga <h6> sebagai pembeda judul atau dapat pula ditulis dengan element <article>, <header> dan <footer> didalamnya. Tag <article> sendiri merupakan tag mark up untuk suatu konten yang independent yang dapat berdiri sendiri seperti postingan blog, komentar atau sejenisnya. Sedangkan tag <header> digunakan sebagai konten pengantar atau pembuka, didalamnya berisi element heading seperti <h1> sampai <h6>. Dan yang terakhir, yakni tag <footer> merupakan suatu catatan kaki, seperti catatan kaki pada suatu artikel.

Untuk lebih memahaminya silakan tuliskan kode dibawah ini pada sublime text 3 (versi offline) atau jsbin.com (versi online), penjelasan mengenai keduanya dapat dibaca pada artikel berikut ini Plugin Sublime Text 3 yang Wajib bagi Pemula sampai Profesional Programmer. Baik langsung saja berikut adalah kode yang didalamnya berisi kode tag <section>, <article>, <header> dan <footer>.

<!DOCTYPE html>
<html>
<head>
<title>This is an index file</title>
</head>
<body>
<h1>Semangat27.com Company</h1>
<section>
<h2>About</h2>
</section>
<section>
<h2>Contact</h2>
</section>
<section>
<h2>Our Article</h2>
<article>
<header>
<h3>article title</h3>
</header>
<p>
contents of the article
</p>
<footer>
footnotes usually contain labels
</footer>
</article>
</section>
<section>
<h2>Portofolio</h2>
</section>
</body>
</html>
-------------------------------------------------------------
Hasil

Semangat27.com Company




About

Contact

Our Article

article title

contents of the article
footnotes usually contain labels

Portofolio

----------------------------------------------------------------

untuk hasil dalam jsbin.com bisa dilihat pada gambar dibawah ini


Untuk video panduan lengkapnya silakan lihat pada video berikut ini, namun ini berbahasa inggris hehe


dan untuk file .html nya silakan lihat pada akun github berikut ini.

Plugin Sublime Text 3 yang Wajib bagi Pemula sampai Profesional Programmer

Add Comment
Plugin Sublime Text 3 yang Wajib bagi Pemula sampai Profesional Programer - Selamat pagi para pengunjung, kali ini penulis kembali mendokumentasikan hasil belajar terkait fundamental seorang front end web development dimana dalam sesi pertamanya diajari tentang HTML. Jadi inti dari yang penulis tangkap HTML ini merupakan markup language yang mana akan berjalan ketika me mark sesuatu didalam tag, sebagai contoh tag <b> akan membuat teks tebal ketika me mark suatu kata yang ada didalamnya.

<b>Semangat27</b>
hasil
Semangat27
kata Semangat27 harus diapit dengan tag <b> dan penutupnya </b> agar bisa tebal. Berikutnya pada web development sendiri terdapat tag yang wajib ada yakni tag <header> dan tag <body>, dimana tag <header> berisi code yang didalamnya tidak ditampilkan pada layar sedangkan tag <body> berisi kode yang akan ditampilkan pada layar, intinya seperti itu. Untuk menampilkan hasil code HTML pada layar komputer teman-teman kita dapat menggunakan browser, yang direkomendasikan dalam course yang penulis ikuti yakni dengan browser chrome. Sedangkan untuk menuliskan code kita dapat menggunakan tools sublime text 3 untuk versi offline (harus install) dan menggunakan jsbin.com untuk versi online (harus memiliki koneksi internet).

Artikel sebelumnya Div dan Span dalam HTML untuk belajar Front End Web Dev

Untuk dapat menginstall sublime text 3, teman-teman hanya perlu mengunjungi url ini https://www.sublimetext.com/3 kemudian pilih sublime sesuai dengan sistem operasi yang teman-teman gunakan. Ada Mac, Windows 64 bit dan 32 bit serta untuk linuk 64 bit dan 32 bit, portable version juga tersedia disana. Sedangkan untuk menggunakan jsbin.com, teman-teman bisa mengunjungi langsung jsbin.com dan langsung menggunakannya tanpa perlu registrasi terlebih dahulu, jsbin.com ini juga akan menyimpan kode yang dituliskan disana, cukup dengan mengunjungi url contohnya seperti ini https://jsbin.com/zabakax/edit?html. Di jsbin.com sendiri tidak hanya untuk HTML saja akan tetapi untuk css, javascript juga bisa.

Code awal untuk melakukan front end web development kurang lebih seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
yakni terdapat Doctype html sebagai tanda bahwa kode tersebut ditulis dengan html 5 kemudian tag html, tag head yang didalamnya terdapat tag title yang ditulis secara hierarchical. Kemudian terdapat tag body yang nantinya isi didalamnya akan ditampilkan dalam layar komputer dibrowser.

Sebagai seorang pemula tentulah menulis code html sebanyak diatas (padahal sedikit) akan sangat lama dan bahkan susah karena tidak hafal satu per satu. Maka dari itulah dibutuhkan kemudahan untuk menuliskannya, hehe. Dalam sublime text dan jsbin terdapat kemudahan itu, akan tetapi pada artikel kali ini penulis akan menuliskan kemudahan yang ada pada sublime text 3 yakni dengan menggunakan plugin yang ada didalamnya.

Pertama dan paling utama yang harus dilakukan adalah menginstall plugin Package Control. Jadi plugin package control yang ada disublime text 3 ini seperti ini dari plugin lainnya. Cara installnya sangat mudah, dengan hanya copas code yang tersedia dalam link ini https://packagecontrol.io/installation kemudian paste kan dalam console sublime text 3 dengan cara klik View >>Show Console.

Setelah selesai di install maka berikutnya teman-teman perlu menginstal beberapa plugin yang ada dalam package control tersebut, beberapa plugin yang wajib digunakan dari para pemula sama profesional hehe, yakni dengan cara :

  • Pastikan koneksi internet ada, karena kita akan menginstall plugin dari server sublime text 3
  • crtl + shift+ p
  • lalu cari package control: install package
  • kemudian pilih beberapa package seperti Alignment, All Autocomplete, BracketHighlighter, Can I Use, BocBlockr, SideBarEnhamcements, Terminal dan trimmer.
Alignment : Agar code rapih berbentuk hirarki
All Autocomplete : Agar mendeteksi ketika menulis sedikit langsung penuh dengan code yang akan dituliskan, sepert code awal yang langsung tertulis ketika baru mengetikan <h maka akan muncul langsung pada sublime text 3 suggestion html yang ketika di enter akan muncul code lengkap standar awal penulisan html (pastika sudah mensave dalam format .html filenya dikomputer).

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
 dan seterusnya untuk fungsi plugin lain dapat teman-teman lihat didalam sublime text 3 langsung dengan cara

  • ctrl + shift + p
  • kemudian cari package control: list package
maka akan muncul list dari package yang sudah teman-teman install dalam sublime text 3, berikut keterangan fungsi dari plugin tersebut. Contohnya seperti dibawah ini.


Demikian artikel kali ini semoga bermanfaat, bagikan jika memang perlu dibagi agar dapat menjadi amal jariyah Allahuma Aamiin dan jangan lupa ikuti blog ini agar penulis dapat terus bersemangat menuliskan dokumentasi belajar penulis. Mohon maaf bila ada kekurangan, karena memang tulisan ini dibuat untuk dokumentasi pribadi agar penulis tidak lupa jika sewaktu-waktu ingin mengulangnya kembali dan apabila ada pertanyaan sialakan tuliskan pada kolom komentar dibawah, sampai jumpa di artikel selanjutnya, byebye.

Div dan Span dalam HTML untuk belajar Front End Web Dev

Add Comment
Div dan Span dalam HTML untuk belajar Front End Web Dev - Alhamdulillah kali ini penulis sedikit belajar tentang div dan span dalam HTML, seperti biasa setelah belajar penulis akan menuliskan dokumentasinya dalam blog ini yang semoga bermanfaat bagi teman-teman yang lainnya. Mohon maaf jika tulisan ini kurang sempurna, semoga teman-teman berkenan menambahi jika terdapat kekurangan dengan menuliskan tambahan pada kolom komentar dibawah.
Banyak yang mengatakan bahwa tag <div> dan <span> merupakan tag yang tidak memiliki makna apa-apa, namun kedua tag ini menjadi tag yang paling sering digunakan dalam struktur web. Tag <div> dan <span> merupakan tag pembeda yang menjadi container atau pembatas dengan struktur html lainnya, biasanya digunakan dalam menuliskan kode CSS dalam HTML, karena memang tag ini tidak memiliki style bawaan sehingga bisa dengan mudah diubag stylenya dengan menggunakan CSS. Digunakan atribut id untuk tag <div> dan class untuk tag <span> sebagai pembeda keduan tag yang satu dengan yang lainnya.

Sebelum kita menuju penerapan dari CSS pada kedua tag html ini ada baiknya jika kita melihat terlebih dahulu fungsi dari kedua tag ini, yang mana tag <div> sebagai block-line dan tag <span> sebagai in-line. Teman-teman dapat menggunakan cloud jsbin.com untuk belajar HTML, CSS dan JS karena eksekusi  hasi dapat dilakukan langsung tanpa perlu menginstal program tambahan di PC teman-teman.


Tanpa kedua tag
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  before the div.this is some content after the div.
</body>
</html>
Hasil
before the div.this is some content after the div.


dengan tag <div>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  before the div.<div>this is some content</div>after the div.
</body>
</html>
Hasil
before the div.
this is some content
after the div.


dengan tag <span>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  before the div.<div>this is some content</div><span>after the div.</span>something else.
</body>
</html>
Hasil
before the div.
this is some content
after the div.something else. 
Nah itulah hasil dari tag <div> dan tag <span> yang mana tag <div> yang merupakan block-line akan menjadi container line yang terdapat tag <div> dengan line lainnya, sedangkan tag <span> akan menjadi pembatas kata terdapat dalam tag yang terdapat dalam satu line.

Untuk contoh dengan CCS silakan lihat dibawah ini.

<!DOCTYPE html>
<html>
 <style type="text/css">
   #kalimat{
      font-style: italic;
      }
   .miring{
      font-weight: bold;
      }
 </style>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>JS Bin</title>
</head>
<body>
   <p>
       <strong>Ini adalah <em>Sebuah</em> paragraf </strong>
   </p>
   <div id="kalimat">
       Ini juga <span class="miring">Sebuah</span> paragraf
   </div>
</body>
</html>
Hasil
Ini adalah Sebuah paragrafIni juga Sebuah paragraf
Ya demikian lah untuk artikel kali ini semoga bermanfaat. Apabila ada bertanyaan silakan tuliskan pada kolom komentar dibawah yak.

Cara Convert Pdf to Text pada Python dengan Library pdfminer

Add Comment
Cara Convert Pdf to Text dengan Library pdfminer Python - Bismillahirahmanirahin, alhamdulillah akhirnya bisa kembali mengupdate blog ini dengan konten yang insya Allah bermanfaat. Kali ini penulis akan berbagi bagaimana memperoleh data teks yang terdapat dalam suatu file pdf dengan menggunakan pemrograman dalam bahasa python dengan library pdfminer. 

Sebelumnya mungkin teman-teman pasti telah mengetahui bahwa ada library dalam bahasa pemrograman python yang dapat digunakan untuk mengkonversi data file pdf untuk diambil teksnya saja atau convert pdf to text on python seperti library PyPDF2, PyMuPDF, tika package, pdfminer dan lain sebagainya. Kemudian teman-teman pasti mencari contoh kodingannya, tapi ternyata tidak menemukan satupun yang berjalan atau menemukan akan tetapi teman-teman bingung karena dituliskan penjelasannya dalam bahasa inggris? Nah kali ini akan dibagikan contoh kodingnya, semoga bermanfaat yaa hehe

Artikel sebelumnya Biterm Topic Model untuk Pemodelan Topik pada Teks Pendek

Baiklah langsung saja berikut adalah kodingannya, akan tetapi penulis membuatnya di colaboratory google sehingga tidak perlu menginstall sendiri pada perangkat PC penulis, karena google colaboratory merupakan cloud Jupyter notebook gratis yang disediakan oleh google.

Pertama-tama, karena menggunakan google colaboratory maka silakan anda masuk kedalam google drive anda lalu kemudian buat colaboratory baru, lebih lengkap cara membuat file colaboratory digoogle drive silakan baca artikel ini

File pdf yang akan penulis ambil teksnya terdapat dalam Google Drive penulis dengan nama kbbi.pdf dan kira-kira isinya seperti gambar dibawah ini.




Berikutnya karena dicolaboratory tidak ada modul atau library pdfminer, maka kita harus menginstallnya terlebih dahulu dengan pip install ya. Dan karena menggunakan python 3 maka gunakan kode pip seperti berikut ini.
!pip install pdfminer.six
Selanjutnya tuliskan kode untuk mengautentikasi akun gdrive teman-teman agar teman-teman dapat me load file pdf yang terdapat dalam drive teman-teman.
from google.colab import drive
drive.mount('/content/drive')
Kunjungi link yang muncul kemudian ikuti alurnya hingga teman-teman mendapatkan token untuk autentifikasi akun google drive anda. Selanjutnya silakan teman-teman berpindah pada direktori tempat teman-teman menyimpan file pdf nya, contohnya seperti dibawah ini. Jangan lupa juga untuk mengecek isi dari direktori tersebut dengan ls
%cd /content/drive/'My Drive'/'Pindahan Skripsi'
!ls 
Berikutnya silakan akses library pdfminer dengan menuliskan kode dibawah ini dalam code cell google colaboratory.
import io
from pdfminer.converter import TextConverter
from pdfminer.pdfinterp import PDFPageInterpreter
from pdfminer.pdfinterp import PDFResourceManager
from pdfminer.pdfpage import PDFPage 
Buat fungsi untuk mengkonversi pdf menjadi teks dengan kode seperti yang ada dibawah ini.
def extract_text_from_pdf(pdf_path):
    resource_manager = PDFResourceManager()
    fake_file_handle = io.StringIO()
    converter = TextConverter(resource_manager, fake_file_handle)
    page_interpreter = PDFPageInterpreter(resource_manager, converter)
    with open(pdf_path, 'rb') as fh:
        for page in PDFPage.get_pages(fh,
                                      caching=True,
                                      check_extractable=True):
            page_interpreter.process_page(page)
        text = fake_file_handle.getvalue()
    # close open handles
    converter.close()
    fake_file_handle.close()
    if text:
        return text
Terakhir akses fungsi tersebut untuk file pdf yang ingin anda ambil data teksnya, gunakan kode seperti dibawah ini. Disini penulis ingin mengambil teks yang ada dalam file pdf bernama kbbi
pdftotext = extract_text_from_pdf('kbbi.pdf')
print(pdftotext)
 Hasil yang didapat dari proses diatas adalah seperti pada gambar dibawah ini


Demikianlah how to convert pdf to text in python with pdfminer, semoga bermanfaat. Bagi teman-teman yang ingin melihat code pada google colaboratory silakan kunjugi link berikut ini dan untuk githubnya berikut ini