Tugas Pengantar Web Science 2.1

2.1 Sebutkan dan jelaskan arsitektur dari web dan berikan contohnyaArsitektur Website adalah suatu pendekatan terhadap desain dan perencanaan situs yang mencakup arsitektur itu sendiri, melibatkan teknis, kriteria estetis dan fungsional. Atau dengan kata lain Arsitektur Website itu juga berupa ilmu atau cara untuk membuat suatu karya menjadi lebih bagus atau memiliki nilai estetika.
Bagian dari arsitektur website:

·       HTTP ( Hypertext Transfer Protocol)

HTTP adalah sebuah protokol jaringan lapisan aplikasi yang digunakan untuk sistem informasi terdistribusi, kolaboratif, dan menggunakan hipermedia. Penggunaannya banyak pada pengambilan sumber daya yang saling terhubung dengan tautan, yang disebut dengan dokumen hiperteks, yang kemudian membentuk World Wide Web pada tahun 1990 oleh fisikawan Inggris, Tim Berners-Lee. Hingga kini, ada dua versi mayor dari protokol HTTP, yakni HTTP/1.0 yang menggunakan koneksi terpisah untuk setiap dokumen, dan HTTP/1.1 yang dapat menggunakan koneksi yang sama untuk melakukan transaksi. Dengan demikian, HTTP/1.1 bisa lebih cepat karena memang tidak usah membuang waktu untuk pembuatan koneksi berulang-ulang.Pengembangan standar HTTP telah dilaksanakan oleh Konsorsium World Wide Web (World Wide Web Consortium/W3C) dan juga Internet Engineering Task Force (IETF), yang berujung pada publikasi beberapa dokumen Request for Comments (RFC), dan yang paling banyak dirujuk adalah RFC 2616 (yang dipublikasikan pada bulan Juni 1999), yang mendefinisikan HTTP/1.1.

Adapun contoh permintan dari Http adalah sebagai berikut:

Connect to 116.199.xxx.xxx on port 80 … ok

GET /2017/10/pengertian-http-fungsi-http-cara-kerja-http-contoh-http-/  HTTP/1.1

Host: www.studinews.co.id

Connection: keep-alive

User-Agent: Mozilla/58 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.15) Gecko/20110303 

AlexaToolbar/alxf-2.11 Firefox/3.6.15 GTB7.1

Accept-Encoding: gzip

Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7

Cache-Control: no-cache

Accept-Language: de,en;q=0.7,en-us;q=0.3

·       WWW ( World Wide Web)

WWW (World Wide Web) merupakan kumpulan web server dari seluruh dunia yang berfungsi menyediakan data dan informasi untuk dapat digunakan bersama.WWW atau biasa disebut web adalah bagian yang paling menarik dari Internet. Melalui web, dapat mengakses informasi-informasi yang tidak hanya berupa teks tetapi bisa juga berupa gambar, suara, video dan animasi. Fasilitas ini tergolong masih baru dibandingkan surel (email), sebenarnya WWW merupakan kumpulan dokumen-dokumen yang sangat banyak yang berada pada komputer server (web server), di mana server-server ini tersebar di lima benua termasuk Indonesia, dan terhubung menjadi satu melalui jaringan Internet. Dokumen-dokumen informasi ini disimpan atau dibuat dengan format HTML (Hypertext Markup Language). Suatu halaman dokumen informasi dapat terdiri atas teks yang saling terkait dengan teks lainnya atau bahkan dengan dokumen lain. Keterkaitan halaman lewat teks ini disebut hypertext. Dokumen infomasi ini tidak hanya terdiri dari teks tetapi dapat juga berupa gambar, mengandung suara bahkan klip video. Kaitan antar-dokumen yang seperti itu biasa disebut hypermedia. Jadi dapat disimpulkan bahwa WWW adalah sekelompok dokumen multimedia yang saling terkoneksi menggunakan hyperteks link. Dengan mengklik hyperlink, maka bisa berpindah dari satu dokumen ke dokumen lainnya.

Contoh dari WWW adalah www.google.com, www.yahoo.com, www.youtube.com

·       URL (Universal Resource Locator)

URL( universal resource locator) merupakan suatu konsep penamaan lokasi standar dari suatu file,direktori,computer, dan lokasi komputernya sesuai dengan metode yang digunakan. URL tidak hanya dapat menunjuk ke suatu file tapi dapat juga menunjuk suatu query, dokumen dalam suatu database atau hasil dari perintah finger atau perintah archie . secara umum dapat digambarkan penulisan url : metode://nama_file[:nomor_port]. Jenis metode yang digunakan pada url adalah file,http,news,gopher,telnet.

Contoh https://www.youtube.com/results?search_query=best+cat+videos,  https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/220px-Google_2015_logo.svg.png.

·       XML (Extensible Markup Languange)

XML (Extensible Markup Language) merupakan bahasa web turunan dari SGML (Standart Generalized Markup Language) yang ada sebelumnya. XML hampir sama dengan HTML, dimana keduanya sama-sama turunan dari SGML. Teknologi XML dikembangkan mulai tahun 1966 dan mendapatkan pengakuan dari Worl Wide Web Consortium (W3C) pada bulan Februari 1998. Sedangkan SGML sendiri telah dikembangkan pada awal tahun 1980-an. Pada saat HTML dikembangkan pada tahun 1990, para penggagas XML mengadopsi bagian paling penting SGML dan dengan berpedoman pada pengembangan HTML menghasilkan bahasa markup yang tidak kalah hebatnya dengan SGML.XML tidak mempunyai definisi secara tepat karena ada yang berpendapat bahwa XML bukanlah suatu bahasa pemrograman,melainkan XML merupakan sintaks yang digunakan untuk menjelaskan bahasa markup lain (Dournaee,2002), sehingga dinamakan meta-language. Meskipun demikian pendapat yang XML bukan merupakan bahasa markup, didasarkan bahwa XML merupakan bahasa markup terpisah untuk tujuan terpisah. Selain itu XML bukanlah solusi semua hal untuk tujuan semua user.

Contoh XML

<?xml version="1.0" encoding="UTF-8"?>

 <Resep nama="roti" waktu_persiapan="5 menit" waktu_masak="3 jam">

   <judul>Roti tawar</judul>

   <bahan jumlah="3" satuan="cangkir">tepung</bahan>

   <bahan jumlah="0,25" satuan="ons">ragi</bahan>

   <bahan jumlah="1,5" satuan="cangkir">air hangat</bahan>

   <bahan jumlah="1" satuan="sendok teh">garam</bahan>

   <Cara_membuat>

    <langkah>Campur semua bahan dan uleni adonan sampai merata.</langkah>

    <langkah>Tutup dengan kain lembap dan biarkan selama satu jam di ruangan yang hangat.</langkah>

    <langkah>Ulangi lagi, letakkan di loyang dan panggang di oven.</langkah>

    <langkah>Keluarkan, hidangkan</langkah>

   </Cara_membuat>

</Resep>

·       JavaScript

JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan di browser. Javascript dipanggil untuk memberikan fungsi pada halaman web dengan meletakannya secara internal pada halaman html diantara tag atau dibuat pada file terpisah ( eksternal ) dan lalu di link menggunakan pada bagian , seperti CSS. Fungsi Javascript adalah Secara fungsional, Javascript digunakan untuk menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan javascript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.

<button id="tombol">Klik saya!</button>

<script>

  var tombol = document.getElementById("tombol");

  tombol.addEventListener("click", function()

  {

    alert("Belajar Memahami Apa itu Javascript. Javascript adalah sebuah bahasa pemrograman blabla");

  });

</script>

·       Ajax

AJAX disini adalah singkatan dari Asynchronous JavaScript and XML. Pada intinya ajax itu merupakan gabungan beberapa teknologi yang bertujuan untuk menghindari page reload. Dengan menghindari page reload, kita dapat menghindari paradigma click-and-wait serta memberikan sebuah fitur yang cukup kompleks pada website seperti validasi data secara realtime, drag n drop dan fitur-fitur lain yang belum dimiliki web biasa. Dengan AJAX, suatu aplikasi web dapat mengambil data kemudian diolah di client melalui request asynchronous HTTP yang diinisiasi oleh Javascript, sehingga dapat mengupdate bagian-bagian tertentu dari web tanpa harus memanggil keseluruhan halaman web. Request ini dapat dieksekusi dalam beberapa cara dan beberapa format transmisi data. Dikombinasikannya cara pengambilan data remote dengan interaktivitas dari Document Object Model (DOM) telah menghasilkan generasi terbaru dari aplikasi web yang mengebrak aturan-aturan tradisional tentang apa yang dapat terjadi di dalam web.

Contoh Ajax

Script HTML : contoh_ajax_sederhana.html

<!DOCTYPE html>

<html>

     <head>

               <title>Contoh Ajax Sederhana</title>

               <meta  charset="UTF-8">

                          <script>

                                    function loadXMLDoc()

                                    {

                                    var xmlhttp;

                                    if (window.XMLHttpRequest)

                                    {// code for IE7+, Firefox, Chrome, Opera, Safari

                                    xmlhttp=new XMLHttpRequest();

                                    }

                                    else

                                    {// code for IE6, IE5

                                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

                                    }

                               xmlhttp.onreadystatechange=function()

                                    {

                                    if (xmlhttp.readyState==4 && xmlhttp.status==200)

                                    {

                               document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

                                    }

                                    }

                               xmlhttp.open("GET","ajax_info.txt",true);

                                    xmlhttp.send();

                                    }

               </script>

     </head>

     <body>

               <div id="myDiv"><h2>Let AJAX change this text</h2></div>

               <button type="button" onClick="loadXMLDoc()">Change Content</button>

     </body>

</html>