#front end #web dev #backend Saat ini lebih dari 80% orang di dunia menggunakan smartphone dan pastinya aplikasi mobile seakan menjadi sangat dibutuhkan.Kebanyakan aplikasi mobile saat ini merupakan jenis aplikasi native yaitu aplikasi yang dibuat spesifik untuk satu platform dan dapat menggunakan fitur fitur platform tersebut,contohnya aplikasi android yang dibuat menggunakan bahasa pemograman java dan aplikasi iOS yang dibuat menggunakan bahasa pemograman swift pasti akan sulit jika kita ingin membuat aplikasi cross platform,tapi ada teknologi yang membantu kita membuat aplikasi web yang sudah ada dapat di install di berbagai platform dan memilki performa seperti aplikasi native yaitu PWA atau progresive web app.Berikut adalah penjelasan tentang apa itu PWA.
## Apa itu PWA
PWA adalah sebuah aplikasi web yang telah di optimisasi sehingga lebih cepat di akses dan memberikan pengalaman layaknya aplikasi mobile biasa.Karena dibuat menggunakan teknologi web PWA pastinya dapat dibuat menggunakan bahasa yang biasa digunakan untuk membangun website yaitu html,css dan javascript dan karena hal ini pula PWA jadi lebih mudah dibuat daripada aplikasi native,jadi selama ada browser di perangkat kita dapat menginstall dan menggunakan PWA seperti aplikasi mobile pada umumnya.PWA juga tidak membutuhkan SDK(system development kit) agar aplikasi dapat berjalan dengan sempurna,PWA hanya membutuhkan 2 file penting yaitu `manifest.json` yang berisi data data bagaimana aplikasi akan ditampilkan pada perangkat mobile dan file service worker yaitu sebuah file javscript yang berjalan di background dan memberikan fitur seperti notifikasi dan melakukan caching sehingga kita dapat mengakses PWA meski jaringan lambat atau tidak stabil.
## Kelebihan dan kekurangan PWA
#### Kelebihan
Berikut adalah kelebihan dari PWA
1. Ukuran yang kecil dari aplikasi native
2. PWA dapat digunakan offline karena memilki service worker yang menghandel caching
3. PWA tidak membutuhkan platform publisher seperti app store atau google play,PWA dapat digunakan langsung di browser atau dapat diinstall di perangkat
4. Mudah dibuat hanya menggunakan bahasa untuk membuat web
5. Update dapat dilakukan otomatis
### Kekurangan
Berikut adalah kekurangan dari PWA
1. Teknologi PWA merupakan teknologi yang baru jadi masih ada perangkat yang belum mendukung PWA
2. Lebih boros baterai daripada aplikasi native
3. Browser versi terdahulu tidak suport PWA
## Contoh PWA
Berikut adalah contoh dari PWA
1. Twitter
2. Pinterest
3. Trivago
4. Forbes
5. Uber dan lainnya
Dan itulah penjelasan tentang apa itu PWA.
sumber :
- https://www.niagahoster.co.id/blog/progressive-web-app/
- https://idcloudhost.com/mengenal-apa-itu-progressive-web-app-pwa/
- https://yoast.com/what-is-a-progressive-web-app-pwa/
- https://softwarebrothers.co/blog/progressive-web-apps-pros-cons-cost-and-popular-technologies-used-for-development/
- https://www.c-sharpcorner.com/article/what-is-a-pwa/
- https://avengering.com/en/why-use-the-pwa-what-are-advantages-and-disadvantagesof-pwa-part-2/
- https://medium.com/iquii/progressive-web-app-pwa-what-they-are-pros-and-cons-and-the-main-examples-on-the-market-318f4538c670
#front end #web dev #backend Secara penggunan teknologinya web dapat dibagi menjadi 2 kelompok yaitu web statis dan web dinamis,lalu apa itu web statis dan dinamis? apa perbedaanya/ dan apa saja teknologi yang digunakan untuk memebuat nya? berikut adalah penjeasannya.
## Apa itu web statis
Web statis adalah jenis web yang paling pertama muncul,user tidak bisa melakukan interaksi terhadap konten dan tampilannya,web hanya bisa diubah melalui coding langsung,user hanya bisa membaca kontennya saja.Umumnya web jenis ini merupakan web landing page atau halaman promosi yang kontennya tidak banyak berubah.
### kelebihan web statis
Berikut adalah beberapa kelebihan web statis
1. Lebih mudah dibuat
2. Tidak ada sistem yang rumit dalam web seperti database
3. Lebih cepat dari web dinamis
4. Lebih mudah di hosting
### Kekurangan web statis
Berikut adalah beberapa kekurangan web statis
1. Lebih sulit update konten karena update konten sama dengan update website
2. Fungsionalitas terbatas
## Apa itu web dinamis
Kebalikan dari statis konten di dalam web dinamis dapat diubah ubah oleh user ataupun admin,jadi jika kita adalah admin web tersebut kita tidak perlu membuka kode jika ingin mengubah konten web tersebut.Web dinamis juga dapat menggunakan database sehingga memungkinkan menyimpan setiap data dari web Dalam pembuatannya web jenis ini harus menggunakan bahasa server yang dapat mengubah konten web jika terjadi perubahan di sisi klien,untuk komunikasi ke server bisa menggunakan REST API ataupun langsung melakukan query ke database.
### Kelebihan web dinamis
Berikut adalah beberapa kelebihan dari web dinamis
1. Mudah melakukan update konten
2. Fungsionalitas lebih dari web statis
3. Lebih interaktif dari web statis
4. Lebih mudah di manage
### Kekurangan web dinamis
Berikut adalah beberapa kekurangan dari web dinamis
1. Lebih sulit dibuat
2. Lebih sulit dihosting
3. Memiliki sistem yang lebih rumit dari web statis
4. Lebih lambat dari web statis
## Teknologi pembuatan web statis dan dinamis
Berikut adalah teknologi yang dapat digunakan untuk membangun web statis ataupun dinamis
### Web statis
Untuk web statis sebenarnya hanya menggunakan bahasa html,css dan js saja,lalu apa ada tools seperti framework yang memudahkan pembuatan web statis?tentu saja ada,namanya adalah static site generator.Dengan menggunakan static site generator kita dapat membuat web statis dengan mudah dan bisa dibilang web kita sedikit lebih dinamis,karena kita dapat mengupdate konten dengan mudah tapi juga tidak langsung di dalam web layaknya web dinamis karena konten akan digenerate dalam bentuk file html bukan disimpan ke database.Berikut adalah beberapa contoh dari static site generator :
1. Hugo
2. Pelican
3. Jekyll
4. Gatsby
5. Sapper
dan lainnya
### Web dinamis
Untuk web dinamis kita bisa menggunakan framework serta bahasa pemograman server yang sudah pernah kita bahas [disini](https://alphacode.pythonanywhere.com/read/5-framework-back-end-terbaik),tapi apakah ada teknologi yang bisa membuat web dinamis tanpa harus ngoding? tentu saja ada,tekonologi tersebut bernama cms atau content management sistem,dengan cms kita bisa membuat sebuah web dinamis hampir tanpa melakukan coding karena cms sudah menyiapkan hal hal yang digunakan untuk membuat web dinamis contohnya seperti database,selain itu beberapa cms memiliki fitur plugin jadi kita bisa menambah fitur web dengan mudah.Berikut adalah beberapa contoh dari cms:
1. Wordpress
2. Blogspot
3. Wix
4. Joomla
5. Drupal
dan lainnnya
Dan itulah penjelasan tentang perbedaan antara web statis dan dinamis.
sumber :
- https://www.dicoding.com/blog/ngoding-web-dinamis-atau-statis/
- https://www.zesty.io/mindshare/marketing-technology/dynamic-vs-static-websites/
- https://wpamelia.com/static-vs-dynamic-website/
- https://kakinfotech.com/blog/static-website-design/advantages-disadvantages-static-website/
- https://www.weblinkindia.net/blog/static-vs-dynamic-website-advantages-disadvantages
- https://www.goodoldgeek.com/5-benefits-of-dynamic-website/
- https://www.gatsbyjs.com/docs/glossary/static-site-generator/
#programming #front end #web dev Jika ingin membuat web kita menjadi lebih interaktif saat digunakan oleh user seharusnya kita menggunakan javascript ,dimana kita dapat memanipulasi dom atau document object model dimana kita langsung bisa memanipulasi html tanpa harus merefresh website,tapi program dom di javascript memiliki sintaks yang agak panjang dan lumayan sulit untuk digunakan,disinilah jquery hadir.
## Apa itu jquery
Jquery adalah sebuah library javascript yang dibuat oleh John Resig pada tahun 2006.Jquery digunakan untuk mempermudah manipulasi dan mempersingkat sintaks dom pada javscript,contoh program mengganti sebuah text:
javascript :
```javascript
document.getElementById("demo").textContent = "Text changed!";
```
javascript + jquery :
```javascript
$("#demo").text("Text changed!");
```
kedua kode diatas memiliki hasil yang sama yaitu mengubah text di elemen yang ber id demo menjadi "Text changed!"
nah,selain bisa memanipulasi text yang ada di html,javscript bisa melakukan : manipulasi css pada elemen html,manipulasi atribut pada elemen html,manipulasi animasi pada elemen html,event handling dan lain sebagainya.Selain itu jquery memiliki fitur untuk menambahkan plugin,jadi kita bisa menambahkan fitur fitur baru selain fitur default diatas.
## Instalasi jquery
Ada berbagai cara untuk menginstall jquery,berikut adalah beberapa caranya :
#### 1.Menggunaka npm
Jika di perangkat kalian memiliki node js kalian bisa menggunakan npm untuk menginstall jquery:
```bash
npm install jquery
```
setelah download berhasil kalian bisa menyambungkan jquery ke html kalian.
#### 2.Menggunakan link
Jika ingin menggunakan link tambahkan :
```bash
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```
diantara tag body di html kalian,kalian juga bisa mendownloadnya langsung dan menyambungkannya ke html
## Fitur fitur utama jquery
Berikut adalah beberapa fitur utama pada jquery :
1. Manipulasi html
2. Manipulasi css
3. Manipulasi dom
4. Menambahkan animasi dan effect dengan mudah
5. Ajax yang bisa digunakan untuk mengambil data dari api
6. Membaca data json
7. Bisa menambahkan fitur dengan plugin
## Keuntungan dan kelebihan jquery
Berikut adalah keuntungan dan kekurangan dari jquery :
#### keuntungan :
1. Mudah untuk digunakan
2. Fitur ajax untuk mempermudah pengambilan data dari api
3. Dokumentasi yang lengkap
### kekurangan :
1. Ukuran yang cukup berat(200kb)
2. Kadang dianggap sudah usang dan kalah dengan library javascript yang lebih modern(meski masih populer),contoh : react,vue,svelte
3. Lambat (jika dibandingkan dengan library yang modern)
dan itulah penjelasan mengenai library jquery
sumber :
- https://www.niagahoster.co.id/blog/jquery-adalah/
- https://www.javatpoint.com/what-is-jquery
- https://www.coursereport.com/blog/what-is-jquery
#front end #web dev Jika kita sedang menggunakan google,pasti kita melihat deskripsi singkat tentang website dan juga judul dari artikel ataupun web tersebut. Informasi tentang web tersebut dimuat dalam tag meta html,selain bisa menampilkan deskripsi dan judul yang bisa menarik pengguna google meta tag juga punya bermacam fungsi lainnya. Berikut adalah penjelasan tag meta pada html.
## Apa itu tag meta html
tag meta htmladalah tag yang berada di antara tag head,tag ini berguna untuk menampilkan informasi sebuah website dan juga pengturan website seperti viewport,refresh dan lainnya.Meta tag sangat berpengaruh dalam seo(search engine optimization0 sebuah website agar bisa muncul di tingkat teratas sebuah mesin pencari.
## Jenis jenis meta tag
Berikut adalah jenis jenis meta tag utama
### 1.Meta tag title
Meta tag ini adalah meta tag yang mengatur judul sebuah website dan bisa terlihat di mesin pencari serta di bagian tab browser.Contoh :
```html
<title>judul</title>
```
### 2.Meta tag decription
Meta tag description ini adalah tag meta yang akan memununculkan deskripsi singkat di mesin pencari.Contoh :
```html
<meta name="description" content="Alphacode adalah website blog seputar teknologi informasi ">
```
### 3.Meta tag keyword
Meta tag keyword adalah tag meta yang mengatur kata kunci sebuah website dan akan digunakan oleh mesin pencari untuk mencocokan pencarian pengguna dengan konten sebuah website.Contoh :
```html
<meta name="keywords" content="tutorial,blog,web dev,html">
```
### 4.Meta tag author
Meta tag author digunakan untuk memberitahu penulis atau pemiliki sebuah website/artikel biasanya meta tag ini ada di artikel penelitian dan jurnal.Contoh :
```html
<meta name="author" content="Alfarizi">
```
### 5.Meta tag refresh dan viewport
Selain meta tag yang mengatur informasi web ke mesin pencari,ada lagi meta tag yang mengatur bagaimana sebuah website akan ditampilkan dan direresh secara otomatis,meta tag itu adalah meta tag viewport dan refresh.Meta tag viewport adalah meta tag yang mengtur bagaimana sebuah website ditampilkan disebuah viewport atau layar,sedangkan meta tag refresh digunakan untuk menentukan waktu interval web akan otomatis di refresh.Contoh meta tag refresh dan viewport :
refresh:
```html
<meta http-equiv="refresh" content="30">
```
viewport :
```html
<meta name="viewport" content="width=device-width, initial-scale=1.
```
### 5.Meta tag open graph
Jika kita ingin membagikan web kita di sosial media pastinya kita ingin web tersebut ditampilkan dengan menarik layaknya sebuah postingan maka kita sebaiknya menggunakan meta tag open graph.Sebenarnya meta tag ini adalah sekumpulan meta tag yang digunakan untuk menampilkan web kita media sosial tidak seperti meta tag sebelumnya yang hanya ada satu.Contoh meta tag open graph :
```html
<meta property="og:title" content="Apa itu tag html" />
<meta property="og:description" content="Penjelasan tentang apa itu html dan apa kegunaanya dalam membuat website" />
<meta property="og:image" content="https://gambar_html.png" />
```
dan itulah penjelasan mengenai meta tag pada html.
sumber :
- https://makinrajin.com/blog/meta-html/
- https://www.rumahweb.com/journal/meta-tag-adalah/
- https://ahrefs.com/blog/open-graph-meta-tags/
- https://www.w3schools.com/tags/tag_meta.asp
#front end #web dev #bahasa pemograman Kita tahu jika html adalah salah satu bahasa penting pada sebuah website dan menjadi wadah untuk bahasa pendukung lain yaitu css dan javascript,tapi apakah html termasuk bahasa pemograman,berikut adalah penjelasannya?
## Kenapa html bukan bahasa pemograman?
Jawabannya singkatnya bahkan sudah ada di kepanjangan dari html itu sendiri,yaitu Hypertext **Markup language**,atau dalam bahasa indonesia berarti bahasa markup hypertext.Lalu untuk jawaban panjangnya,html termasul ke dalam bahasa markup, yang mana bahasa markup hanya akan mengatur bagaimana sebuah dokumen di tampilkan, dan untuk html ia akan mengatur bagaimana tampilan sebuah web seperti mengatur heading,menebalkan huruf,membuat tabel dan lain sebagainya,karena pada dasarnya web adalah kumpulan dokumen yang dapat di akses melalui internet.Bahasa markup seperti html tidak bisa melakukan apa yang biasa dilakukan oleh bahasa pemograman yaitu melakukan penyelesaian masalah logika,karena html tidak memilki if statement,looping dan fitur lain yang biasa kita temukan dalam bahasa pemograman.Jadi sebenarnya kurang tepat menyebut html sebagai "Bahasa pemograman html" karena html sama sekali tidak bisa melakukan penyelesaian masalah logika ataupun matematika.
## Tools untuk html
Lalu apakah ada software/tools yang membantu kita untuk menambah fitur pemograman pada html?tentu saja ada,beberapa contohnya ada framework javascript seperti react,vue atau svelte dan juga ada jenis tools lain yang membantu kita membawa fitur pemograman ke html yaitu template engine.Template engine sebenarnya memilki tujuan yang hampir sama yaitu membuat tampilan html menggunakan bahasa pemograman ,bedanya template engine tidak hanya menggunakan bahasa javascript,contohnya ada jinja2 yang menggunakan python,blade dengan php dan Haml dengan ruby.Perbeedaan lainnya juga terletak pada letak kode diproses. Jika pada framework frontend javascript, browser langsung akan memahami javascript dan merender tampilan sesuai yang ada pada javascript,tapi pada template engine sebelum file-file untuk website dikirim ke browser client, server akan mengubah kode template tersebut menjadi html terlebih dahulu dan client akan menerima tampilan html lengkap dari server. Bahkan dengan hanya menggunakan javascript kita juga dapat membuat html dapat sedikit lebih "programble" dengan menggunakn dom(document object model).
Dan itulah alasan kenapa html bukanlah bahasa pemograman.
sumber:
- https://ischool.syr.edu/why-html-is-not-a-programming-language/
- https://www.educative.io/edpresso/what-are-template-engines
#web dev #backend Dalam pengembangan web terdapat istilah session dan cookies keduanya memiliki fungsi yang sama yaitu sebagai penyimpanan sementara data user yang masuk ke dalam web dan data itu dapat digunakan kembali oleh user,misalnya data saat login sukses,user tidak perlu melakukan login setiap mengunjungi web.Meskipun memiliki fungsi yang sama session dan cookies adalah 2 hal yang berbeda.Berikut adalah perbedaan session dan cookies.
## Apa itu session
Session adalah kumpulan data sementara yang disimpan di server.Session dibuat saat user masuk atau login ke sebuah website dan akan dihapus jika user tersebut logout atau menutup browser di perangkatnya.Data session yang di simpan di server memiliki keamanan yang baik karena disimpan dalam bentuk binary di server.Data yang disimpan pada session dapat berupa tipe data apapaun dan dapat menyimpan hingga 128mb dan juga dapat menyimpan lebih dari satu variabel session.Session biasanya digunakan untuk menyimpan informasi sensitif seperti id user,karena data yang di simpan di server sulit untuk diubah.
## Apa itu cookies
Jika session adalah data yang disimpan pada server maka cookies adalah data yang disimpan pada browser.Cookies ini berbentuk teks dan memiliki batas ukuran yang sangat kecil yaitu hanya 4kb dan hanya mampu menyimpan tipe data string serta terbatas jumlah variabelnya.Cookies dibuat saat user masuk ke sebuah web yang datanya dikirim lalu di simpan di browser dan dapat dihapus sesuai waktu yang ditentukan oleh user di browser nya.Cookies ini dapat menyimpan data saat user menjelajahi web jadi cookies ini biasanya digunakan untuk keperluan periklanan.Dari segi keamanan cookies kurang aman daripada session karena cookies disimpan di user dan bisa saja user melakukan hal yang tidak baik melalui cookies.
## Perbedaan session dan cookies
Session dan cookies memiliki perbedaan sebagai berikut :
##### Penyimpanan
- Session : disimpan di server
- Cookies : disimpan di browser
##### Batas penyimpanan data
- Session : Dapat menyimpan data hingga 128 mb
- Cookies : Dapat menyimpan data hingga 4kb
##### Kapan dihapus
- Session : Dihapus saat user logout atau menutup browser
- Cookies : Dihapus sesuai waktu yang ditentukan user di browser
##### Keamanan
- Session : Memiliki keamanan yang baik karena data di simpan di server dan berbentuk binary
- Cookies : Memiliki keamanan yang kurang karena di simpan di browser dan hanya dalam bentuk teks
##### Jumlah data yang disimpan
- Session : Dapat menyimpan lebih banyak variabel daripada cookies
- Cookies : Dapat menyimpan variabel berjumlah terbatas
Dan itulah perbedaan session dan cookies.
sumber :
- https://perbedaan.budisma.net/perbedaan-session-dan-cookies.html
- https://www.geeksforgeeks.org/difference-between-session-and-cookies/
- http://diatas7000kaki.blogspot.com/2018/03/perbedaan-cookies-dan-session.html
- https://www.javatpoint.com/session-vs-cookies
- https://www.guru99.com/difference-between-cookie-session.html
#web dev #backend #bahasa pemograman Seperti yang kita tau javascript adalah satu2nya bahasa pemograman yang merupakan bagian 3 bahasa wajib web development,javascript tampak powerfull dan dapat diandalkan dalam web dev, tapi sayangnya javascript hanya bisa dijalankan di lingkungan browser.Tapi ada satu teknologi yang "membebaskan" javascript dari browser yaitu node js,dengan node js seorang developer mampu membuat aplikasi dengan javascript tanpa tergantung oleh browser seperti,aplikasi command line,aplikasi desktop,server website,api dll.
## Apa itu node js
Node js adalah software runtime enviroment atau singkatnya tempat untuk menjalankan javascript diluar browser yang dibuat oleh Ryan Dahl pada tahun 2009.Node js juga merupakan software open source dan cross platform sehingga dapat digunakan di berbagai os,dan pastinya gratis.Node js dibangun menggunakan V8 javscript engine dari google sehingga kode javascript dapat lebih cepat di eksekusi dan memiliki performa yang tinggi.Dengan node js juga javascript yang awalnya merupakan bahasa front end kini sudah bisa menjajal dunia back end,hal ini sangat membantu para web developer yang tinggal mempelajari lebih lanjut dari bahasa javascript ini dan tidak perlu mempelajari bahasa back end lain,seperti php,python,ruby atau c# atau bisa hanya menggunakan 3 bahasa web(html,css,js).
## Fitur node js
Node js memiliki beberapa fitur sebagai berikut :
1. **Performa yang tinggi dan asynchronous**
seperti yang dikatakan di atas,dengan V8 javascript engine dari google node js dapat mengeksekusi kode dengan performa yang tinggi.
2. **Asynchronous dan event driven**
Semua proses di node js dijalankan secara asynchronous artinya proses dapat berjalan tanpa harus menunggu proses lainnya selesai,dan node js menggunakan event driven sehingga setelah suatu proses selai maka node js akan mengirimkan notifikasi atau sinyal untuk menjalankan proses sebelumnya
3. **Tidak perlu server eksternal**
Node js memiliki library bawaan yang memampukan membuat server lokal tanpa bantuan software lain seperti apache atau nginx
dan masih banyak lagi
## Contoh jenis aplikasi yang dibuat menggunakan node js
1. Aplikasi desktop
2. Aplikasi command line
3. Fullstack website
4. Api(application programming interface)
5. Spa(singgle page aplication)
6. IoT(internet of things)
Nah itulah penjelasan singkat tentang node js.dengan node js javascript yang awalnya hanya bisa digunakan di browser kini dapat digunakan untuk berbagai hal yang diluar pengembangan web,dan dengan node js web semakin mudah dibuat tanpa harus mempelajari bahasa pemograman diluar 3 bahasa web.
Alfarizi