SIF Website Reboot

Bersamaan dengan proyek pembuatan ID Card untuk member, yang memanfaatkan fitur verifikasi online menggunakan QRCode serta menampilkan halaman website verifikasi, maka dipandang perlu untuk sekaligus melakukan peremajaan kembali website portal Sourabaya In Frame yang kali ini menggunakan nama domain dan Url https://sif.my.id

Nama domain diatas dipilih dengan pertimbangan nama yang lebih singkat dan lebih mudah diingat, menggunakan domain registrar dalam negeri karena menggunakan domain (dot)id. Nama domain yang lebih pendek dan ringkas akan menyederhanakan level QRCode yang dihasilkan, sehingga sangat memungkinkan QRCode tersebut dicetak di halaman belakang ID Card meskipun dengan space yang sangat terbatas.

Desain website SIF kali ini didukung teknologi terbaru di bidang desain dan pemrograman. Diantaranya seperti :

• Static Site Generator : Teknik pengelolaan website tanpa menggunakan backend database. Setiap halaman website di generate otomatis berdasarkan template serta parameter dan format tertentu (Menggunakan format file Markdown). SSG yang kita gunakan saat ini adalah Zola, yang dibangun menggunakan bahasa pemrograman Rust.
• Mobile first, responsive design : Karena saat ini jumlah pengguna smartphone jauh melebihi pengguna laptop dan PC, maka desain website harus mengutamakan desain yang bisa berjalan dengan baik ketika dibuka melalui smartphone. Namun tetap harus responsive dan mampu beradaptasi optimal ketika dibuka melalui display yang lebih besar misalkan menggunakan tablet, laptop maupun PC.
• Semantic HTML5 dan CSS3 Framework : Semantic HTML merupakan spesifikasi dan cara penulisan dokumen html menggunakan tag dan section sesuai dengan bagian dan elemen masing - masing sesuai dengan tujuan penulisannya. Bingung pastinya kan? gpp nanti juga paham kalo sudah tau contohnya. Sedangkan CSS atau Cascading Style Sheet merupakan cara untuk mengatur spesifikasi visual dari elemen - elemen semantic HTML tersebut. Dan framework merupakan sekumpulan cara dan komponen untuk memudahkan kita menggunakan spesifikasi CSS itu. Kebetulan yang kita gunakan kali ini adalah TailwindCSS
• Git dan github : Merupakan perangkat dan alat utama yang paling populer saat ini di kalangan pengembang software. Teknologi Opensource ini memberikan berbagai kemudahan dan efisiensi bagi para pengembang software untuk berkolaborasi secara online, maupun bagi solo developer. Selain itu, github juga sekaligus adalah rumah bagi source code software yang sedang kita kembangkan. Dan tool Git merupakan alat untuk berinteraksi dengan sistem github.
• BeautifulSoup 4 dan Python : Sebenarnya penggunaan BeautifulSoup atau bisa kita singkat BS, yang merupakan sebuah library Python dan digunakan untuk melakukan fungsi terkait web scrapping yaitu menelusuri sebuah halaman web dan melakukan parsing terhadap konten di dalamnya secara otomatis, yang kemudian hasil parsing tersebut bisa kita gunakan sesuai keperluan dan tujuan kita. Dalam hal ini, kita melakukan penelusuran dan parsing terhadap web SIF yang berada di domain sourabayainframe.org dengan bantuan dari dokumen sitemap.xml yang di generate otomatis oleh halaman website tersebut. Selanjutnya hasil penelusuran dan parsing tersebut kita tempatkan dalam sebuah folder masing - masing sesuai judul artikelnya, serta kita ubah formatnya menjadi dokumen markdown dan menambahkan front matter atau header file yang sesuai (kita ambil judul artikel serta tanggal penerbitan artikelnya). Dalam prosesnya, kita juga mendownload setiap gambar yang menjadi bagian dari artikel tersebut ke dalam folder masing - masing artikel, sehingga hasil akhirnya berupa folder dengan nama sesuai artikel dan di dalamnya telah terdapat file artikel berformat markdown dengan nama index.md serta semua file gambar terkait artikel tersebut. Semua proses tersebut kita kerjakan secara otomatis menggunakan bantuan BeautifulSoup dan Python Script
• Netlify : Merupakan sebuah web hosting modern dengan ekosistem pendukung yang memungkinkan kita untuk menempatkan sebuah aplikasi web atau web apps dengan semua framework, dependency dan tools yang dibutuhkan oleh aplikasi web yang kita bangun. Kerennya lagi, netlify ini bisa kita hubungkan dengan halaman github yang kita kelola dan tempat kita menyimpan source code website yang kita bangun. Sehingga hanya dengan menambahkan sedikit konfigurasi dan script yang sesuai, proses melakukan update dan deploy ke server hosting bisa kita lakukan secara otomatis tanpa perlu kerepotan lagi. Jadi setiap kali kita perlu melakukan update atau bahkan sekedar menambahkan artikel dan blog posting, cukup dilakukan dari PC atau laptop tempat kita bekerja, dan hanya menjalankan perintah

  $ git add . 
  $ git commit -m "Adding article" 
  $ git push
  

  menggunakan tool Git, maka beberapa saat kemudian perubahan yang kita lakukan sudah live dan bisa diakses.

Itulah tadi sekelumit proses yang kita lakukan dibalik layar dalam usaha membangun kembali website bagi Sourabaya In Frame. Kedepannya, kita berharap lebih banyak lagi dari kita yang bisa berkontribusi dengan mengisi website ini dengan konten yang bermanfaat dan memberikan edukasi bagi masyarakat luas.

by:@adymulianto