Web Development Introduction —Berkenalan dengan HTML

Pengenalan dasar mengenai pemrograman berplatform website.

Hanas Bp
Komunitas Android  CCIT-FTUI
4 min readAug 20, 2019

--

Assalamualakum wr.wb

Berjumpa lagi dengan gua Hanas Bayu Pratama sebagai mentor web Development. Pada kesempatan kali ini, gua akan berbagi insight mengenai bagaimana sebuah web dibuat. Kalian pasti sudah tidak asing lagi dengan website wordpress, blogger, kompas, detik, dsb. Setiap hari kalian tentunya akan mengunjungi sebuah situs baik disengaja maupun tidak disengaja. Disaat kalian berseluncur di internet terdapat kemungkinan munculnya sebuah pertanyaan dikepala kalian “Bagaimana cara membuat sebuah website?”.

Sebelum berpikir terlalu jauh, kalian harus tau dulu pengertian sebuah website.

Website adalah suatu halaman web yang saling berhubungan yang umumnya berisikan kumpulan informasi berupa data teks, gambar, animasi, audio, video maupun gabungan dari semuanya yang biasanya dibuat untuk personal, organisasi dan perusahaan.

Dari pengertian website tersebut, kita tau bahwa website dapat dibedakan menjadi dua, yaitu web bersifat statis dan dinamis.

Website bersifat statis adalah sebuah website yang informasi atau kekayaan intelektual didalamnya bersifat statis atau tidak dapat diubah dengan mudah, umumnya informasi berupa teks, gambar, maupun video dipasang pada html. Umumnya, jenis ini digunakan untuk company profile yang perubahan kontennya tidak terjadi setiap hari.

Website bersifat dinamis adalah sebuah website yang informasi atau kekayaan intelektual didalamnya dapat diubah secara mudah melalui sebuah panel admin oleh pemilik website. Umumnya konten di website ini sering berubah setiap harinya, contohnya adalah detik, vivanews, line today, dan lainnya.

Setelah menjelaskan mengenai perbedaanya, maka mari kita telaah isi komponennya. Website memiliki komponen sebagai berikut:

  1. HTML5
  2. CSS3
  3. Javascript
  4. Server-side Language (Untuk website bersifat Dinamis)
src: https://techbeacon.com

HTML5 (Hypertext Text Markup Languange) adalah sebuah bahasa markup yang digunakan untuk menampilkan isi dari web.

HTML5 mendeskripsikan struktur halaman web yang ditulis dengan element atau tag yang mendeskripsikan konten atau teks didalamnya. HTML5 merupakan pengembangan bahasa HTML yang lebih baik, lebih berarti atau semantik (semantic meaning).

Berikut ini adalah definisi dari HyperText Markup Languange (HTML)

  • HyperText: adalah istilah teks aktif, yang apabila diklik akan menuju halaman lain. Ini merupakan kemampuan dari sebuah halaman web yang dapat saling berhubungan antara halaman satu dengan lainnya.
  • Markup: Merupakan tag-tag yang biasanya diawali dengan tag pembuka (opening tag) dan tag penutup (closing tag) yang memberi kemampuan untuk menata layout atau memformat struktur halaman web pada sebuah konten teks sederhana didalam file HTML itu sendiri.
  • Language: yaitu bahasa yang digunakan oleh HTML itu sendiri. Perintah-perintah tag menggunakan bahasa yang dapat dimengerti oleh browser atau interpreter lainnya.
https://www.lautankode.com

CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, yaitu html.

CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs. CSS memudahkan kita untuk memberi warna teks, radius sebuah border, menempatkan element html dikanan, kiri, atau tengah, atau hal yang berhubungan dengan mendesign website menjadi cantik dan tamfan.

src: https://blog.pucc.or.id

Javascript adalah sebuah bahasa pemrograman yang digunakan untuk mengatur sebuah logika website untuk menjalankan interaksi dengan user secara client-side scripting.

Client-side scripting adalah interaksi bahasa pemrogaman dengan client. Client yang dimaksud disini adalah komputer milik pengguna, sehingga logika interaksi yang dilakukan terjadi di komputer milik pengguna, bukan pada server tempat website ditempatkan.

Javascript berfungsi untuk berinteraksi dengan klien, sebagai contoh kita akan mengisi tiga kolom, yaitu nama, kelas dan, nomor induk mahasiswa. Validasi client membutuhkan ketiga kolom tersebut diisi. Apabila kita tidak mengisi salah satu dari ketiga kolom tersebut maka akan muncul pesan “This Field is Required”, inilah yang disebut dengan client-side scripting.

src: https://codeburst.io/when-to-use-server-side-rendering-ssr-in-vue-js-projects-697bd925d57b

Server-side Language adalah sebuah bahasa yang berjalan pada sebuah server. Bahasa ini akan bekerja apabila client mengirimkan permintaan berupa POST atau GET dan server akan menjalankan logikanya.

Pada Komunitas Android CCIT — FTUI, untuk web development kita akan menggunakan PHP sebagai Server-side language. Pada artikel ini, kami tidak bahas secara lengkap mengenai kelebihan dan mengapa menggunakan PHP.

Namun secara singkat, PHP dipilih karena ini merupakan bahasa pemrograman website yang saat ini marak digunakan di berbagai negara, khususnya Indonesia.

https://makinrajin.com

PHP (PHP: Hypertext Prepocessor) adalah bahasa pemrograman yang bekerja di server-side scripting untuk membuat suatu website yang bersifat dinamis.

Server-side scripting adalah interaksi bahasa pemrograman melalui server. Jadi di bagian server ini akan ada pengolahan data, penambahan data, penghapusan data, dan perubahan data atau seringkali pada kalangan programmer menyebutnya CRUD (create, read, update, & delete).

Selain itu di sisi server juga melakukan keamanan data, keamanan akses data, keamanan akses website, dan hal lainnya yang berhubungan dengan keamanan.

Selain keamanan dan logika. Sisi server juga membahas performa kecepatan website ketika diakses dan kestabilan website ketika digunakan oleh banyak pengguna secara bersamaan.

Selain php, terdapat juga bahasa pemrograman server lain seperti Ruby, ASP.NET, Node.js, Java, dan Python. Untuk bahasa pemrograman juga memiliki framework yaitu kerangka kerja yang memudahkan kita dalam mengetik kode yang kita buat.

Pada Komunitas Android CCIT — FTUI, kita akan belajar membuat aplikasi berbasis website dengan framework Laravel.

Ok, itu saja penjelasan dari gua mengenai komponen-komponen web. semoga kalian mengerti.

--

--