SEJARAH DAN PERKEMBANGAN WEBSITE

Sejarah Website

Website pertama kali ditemukan oleh Sir Timothy John, Tim Berners-Lee. Pada tahun 1991 website terhubung dengan jaringan.Ttujuan dari dibuatnya website pada saat itu yakni untuk mempermudah tukar menukar dan memperbaharui informasi kepada sesama peneliti di tempat mereka bekerja. Dengan demikian pengertian website saat itu masih sebatas tukar menukar informasi, bukan pengertian website secara terminologi.

Website dipublikasikan ke publik setelah adanya pengumuman dari CERN pada tanggal 30 april 1993. CERN menyatakan bahwa website dapat digunakan secara gratis oleh semua orang. Pada saat ini pengertian website sudah masuk ke dalam ranah publik karena sudah bisa digunakan oleh semua orang dimanapun dan kapanpun.

Dimbleweb mencoba menjelaskan tipe dan jenis dari website yang ada pada umumnya.

Secara garis besar, website bisa digolongkan menjadi 3 bagian yaitu:

1.      Website Statis

2.      Website Dinamis

3.      Website Interaktif

Website Statis adalah web yang mempunyai halaman tidak berubah. Artinya adalah untuk melakukan perubahan pada suatu halaman dilakukan secara manual dengan mengedit code yang menjadi struktur dari website tersebut.

Website Dinamis merupakan website yang secara struktur diperuntukan untuk update sesering mungkin. Biasanya selain utama yang bisa diakses oleh user pada umumnya, juga disediakan halaman backend untuk mengedit kontent dari website. Contoh umum mengenai website dinamis adalah web berita atau web portal yang didalamnya terdapat fasilitas berita, polling dan sebagainya.

Website Interaktif adalah web yang saat ini memang sedang booming. Salah satu contoh website interaktif adalah blog dan forum. Di website ini user bisa berinteraksi dan beradu argument mengenai apa yang menjadi pemikiran mereka. Biasanya website seperti memiliki moderator untuk mengatur supaya topik yang diperbincangkan tidak keluar jalur.

Ketiga jenis website diatas merupakan jenis website yang sering dibuat oleh setiap developer di Indonesia seperti jasa pembuatan website, dimana yang paling diminati adalah jenis yang DINAMIS, dikarenakan pemilik website dapat melakukan pengubahan content secara mandiri.

Pengertian Web

World Wide Web, yang lebih populer disingkat dengan WWW merupakan satu buah ruang informasi yg digunakan oleh pengenal global yg dinamakan dengan URL (Uniform Resource Locator) utk mengenal pasti sumber daya berguna. WWW tidak jarang dianggap sama dengan Internet dengan cara total, meski sebenarnya WWW sendiri hanyalah bagian daripada Internet. baca juga sejarah internet.

WWW merupakan kumpulan situs server dari seluruh dunia yg memiliki kegunaan untuk menyediakan data & info utk bisa digunakan bersama. WWW ialah sektor yg paling menarik dari Internet. Lewat web, para customer bisa terhubung informasi-informasi yg tidak hanya berupa teks namun mampu pula berupa gambar, nada, video & animasi.

Perkembangan Web

Sejak web ditemukan tahun 1990, Web semakin populer dan menjadi layanan internet dengan pengguna terbanyak. Sebagian pengguna internet bahkan mengira kalau Web adalah satu satunya layanan di internet. Teknologi Web pun terus bergulir dari era web 1.0, web 2.0 dan trend menuju web 3.0. Sayangnya, ciri ciri antara versi web 1.0,sampai 3.0 tidak ada kata sepakat antar para pakar. Namun demikian, bukan berarti kita tidak tahu polanya. Berikut ini adalah pola dari masing masing versi web menurut bebeberapa sumber yang saya baca.

Web 1.0

Web 1.0 dimulai sejak web era 90an. Ciri utama dari era ini adalah informasi yang bersifat statis.

Ciri - ciri dari web 1.0

    ·   Website umumnya bersifat static yang jarang berubah atau samasekali tidak berubah.

    ·   Website umumnya tidak interaktif.

    ·   Umumnya teknologi yang dipakai adalah teknologi tertutup.

    ·   Kebanyakan desain webnya menggunakan Frame.

    ·  Tampilan kombinasi warna dan textnya terlihat norak karena hanya terbatas pada 16 warna dan 6 jenis font.

    ·  Informasi yang ada umumnya berupa berita text dan gambar.

Teknologi web 1.0

   ·   HTML dasar, CSS dasar dan Javascript.

   ·   Flash dan Java applet.

   ·   Browser populer adalah Netscape dan Internet Explorer.

   ·   Koneksi internet masih dial up maximal 56kbps.

Web  2.0

Web 2.0 dimulai sejak era 2005 sampai sekarang, Ciri khas adari era ini adalah user generated content  dan jejaring social.

Ciri dari web 2.0

   ·   Website bersifat dinamis dan interaktif dengan adanya teknologi AJAX.

   · User bukan hanya sebagai konsumen tetapi juga sebagai produsen informasi dalam istilah populer adalah user generated content(contoh youtube atau wikipedia).

   ·   Teknologi yang dipakai umumnya open source.

   ·   Desain web menggunakan CSS layout.

   ·   Informasi terdiri dari text, gambar, audio, video  dan animasi.

   ·   Web sebagai media berkomunikasi dan berkolaborasi.

   ·   Jejaring social mendominasi di era ini.

   ·   Munculnya startup.

   · Munculnya jenis website seperti microbloging, photo dan video sharing, online bookmarking, blog dan jejaring social.

Teknologi  di Web 2.0

·   Ajax dan jQuery serta Javascript library mendominasi.

·   Meningkatnya penggunaan HTML5 dan makin menurunnya pengguna Flash.

·   Mobile Web dan Responsive web design.

·   XML dan JSON untuk pertukaran data.

·   Web API dan Mashup (Mashup adalah istilah menggabungkan beberapa layanan menjadi satu, contoh menampilkan tweet di Google maps).

·   Browser yang popular adalah Chrome,safari dan Firefox.

·   koneksi internet menggunakan broadband (>1MB/s).

·   Android dan iOS mendominasi pengguna mobile web.

Web  3.0

Web 3.0 adalah generasi selanjutnya dari teknologi web.  Ciri dari web 3.0 ada pada akses mobile, Semantic web dan personalifikasi.  Beberapa website yang dianggap merupakan cikal bakal dari web 3.0 adalah Instagram. Instagram disebut sebut sebagai awal dari generasi web 3.0 karena layanan ini hanya tersedia lewat mobile Device.

Ciri ciri Web 3.0

   ·  Integrasi web kedalam produk Rumah tangga seperti TV, Kulkas atau Jendala pintar atau home entertainment contoh produk ini adalah Smart windows dari samsung atau Google Nexus Q .

   ·   Semantic Web, Contoh dari penggunaan dari semantic web adalah Knowledge graph di Google Search.

   ·   Natural language  prosesing. Perintah menggunakan suara. Contohnya adalah Siri, Voice Action Android atau Voice search di Google.

   · Location based service dan personifikasi informasi. Web tidak lagi memberikan informasi, namun solusi. Contoh layanan ini      adalah Layar dan Google Now.

   ·   Komputer (dan web)  yang bisa dipakai , Contoh dari produk ini adalah Google glass.

Teknologi web 3.0

Untuk teknologi yang mendominasi web 3.0 adalah sbb:

   ·   Semantic Web (Contoh knowledge graph).

   ·   Artificial Intelegence (Siri).

   ·   Realtime comunication & colaboration (Google docs, Google Wave).

   ·   Augment Reality (Layar, aplikasi di android).

   ·   Computer generated Information (Contoh Wolfram Alpha).

   ·   HTML5 dan Cloud teknologi.

Desain Web

Pengertian web design

Desaign web adalah seni dan proses dalam menciptakan halaman web tunggal atau keseluruhan

dan bisa melibatkan estetika dan seluk beluk mekanis dari suatu operasi situs web walaupun yang

utama memusatkan pada tampilan dan cita rasa.Sedangakan aspek yang mencangkup pada design

web antara lain menciptakan animasi dan grafik,pemilihan warna ,grafik dan font.

Hal yang harus dikuasai oleh seorang web designer :

1. Penguasaan cita rasa seni

        Mengeksplorasi Imajinasinya dan menggali cita rasa seninya yang dituangkan

        kedalam halaman web.

        Mampu memilih warna yang baik dan memadukannya dengan warna yang lain

        sehingga menciptakan pepaduan warna yang serasi.

        Mampu membuat bentuk atau skeysa yang baik dari bentuk halaman web.

        Mampu menggabukan imajinasi atau ide original dan menggabungkannya dari pihak client.

        Mampu menempatkan komponen multimedia pada bagian-bagian tertentu sehingga

        halaman web lebih menarik.

2. Penguasaan tool pendukung perancangan web

•      Program aplikasi pengatur layout web
•       Macromedia dreamweaver,Ms.Frontpage,edit plus,php dll. 
•       Program aplikasi pembuat animasi
•       Macromedia Flash ,Swish 
•      Program aplikasi pembuat design grafis
•     Photoshop, Corel ,Paint dll.

3. Penguasaan membuat Interface 

4. Penguasaan Bahasa pemrograman

Fungsi situs web

Sebelum mendesign , sebaiknya kita mngetahui dan memahami beberapa fungsi situs web agar

design yang dibuat sesuai dengan fungsi situs web.Secara umum fungsi situs web adalah sebagai

berikut:

1.    Fungsi Komunikasi

        Situs web tang berfungsi sebagai komunikasi pada umumnya adalah web dinamis.Karena

dibuat menggunakan pemrograman web(server side)maka dilengkapi dengan fasilitas yang

memberikan fungsi-fungsi komunikasi seperti web mail ,formanthec,chatting,forum dll.

2. Fungsi Informasi

       Menekankan pada kualitas konten,karena tujuan situs ini mnyampaikan isinya.

Sebaiknya berisi teks dan grafik

Fasilitas yang memberikan fungsi informasi,news,file,company,library,prefences

dll

3. Fungsi Entertaiment

      Sebagai sarana hiburan/penggunaan animasi gambar dan element bergerak dapat

meningkatkan mutu persentasi design,meski tetap harus mempertimbangkan kecepatan

downloadnya.

Contoh fungsi Entertaiment: game online,film online,music online dll.

4.Fungsi Transaksi

     Situs web dapat dijadikan transaksi bisnis baik barang jasa,dll.situs web menghubungkan

perusahaan konsumen dan komunitas tertentu melalui sarana elektronik.Pembayarannya

bisa memudahkan kartu kredit,transfer atauupun membayar langsung.

Cara kerja Web

1.      Browser web mengambil sebuah informasi berupa requst yang berisi alamat web/page

address.

2.      Web server memberikan feedback berupa perintah response untuk setiap request yang

dilanjutkan dengan memberikan informasi yang diminta oleh web browser.

3.      Kemudian Browser web menampilkan informasi yang elah diterima dari server web yang

disimpan dalam sebuah dokumen web formatnya berupa HTTP.

Web terdiri dari 4 bagian:

1.HTTP(Hyper Text Type Protocol)

Standard aturan yang digunakan untuk melakukan komunikasi jaringan pada komputer.

2. URL (Uniform Resource Locator)

Alamat yang digunakan untuk mengakses situs web.

URL terbagi menjadi beberapa bagian:

·        Anchor name

·        Protocol transfer(http,ftp dll)

·        Host name

·        Path/nama file

·        Document file name

3.Client server

4.HTML(Markup Languange)

Konsep HTML

HTML adalah kependekan dari Hyper Text Markup Language, yaitu sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web. Si HTML inilah yang menyusun sebuah halaman web menjadi sebagaimana yang kita lihat melalui browser (penjelajah internet). So, belajar HTML dan mengerti bagaimana cara HTML bekerja akan sangat penting jika kamu ingin terjun ke dunia web development.

Sebenernya ketika bekerja dalam menampilkan dan menyusun sebuah halaman web si HTML ini nggak sendiri, dia juga dibantu oleh teman-temannya yang lain yaitu si CSS dan si JavaScript. Si HTML sendiri bertugas menyusun kerangka halaman web, si CSS yang akan merapihkan dan memperindah tampilan halaman web, sedangkan si JavaScript-lah yang bertugas membuat halaman web menjadi lebih interaktif. Pada kesempatan yang lain kita akan coba membahas CSS dan JavaScript, tapi untuk kali ini marilah kita buat si HTML menjadi tokoh utama :D

Perlu diperhatikan, HTML bukanlah sebuah bahasa pemrograman. HTML merupakan bahasa markup yang berisi perintah-perintah dengan format tertentu yang terstruktur untuk menampilkan tampilan tertentu. Baik, mari kita buat menjadi lebih sederhana. Misalnya di halaman web kita sering melihat ada teks yang ditulis tebal seperti berikut:

tulisan tebal

Nah untuk bisa membuat sebuah tulisan tebal seperti di atas, maka kita bisa membuatnya dengan HTML dengan kode berikut:

<strong>tulisan tebal</strong>

Sederhananya adalah, jika kita menuliskan kode seperti di atas, maka nanti si browser akan menampilkan tulisan tebal. Jadi HTML adalah format penulisan kode tertetu yang mampu dimengerti oleh browser untuk menampilkan tampilan tertentu.

Oke sekarang saya paham, selanjutnya dimana saya bisa menulis kode HTML dan bagaimana caranya?

Benar, untuk dapat membuat sebuah halaman web dan dapat ditampilkan oleh browser sebagaimana yang kita inginkan tentu dong ada aturan dan formatnya. Nggak mungkin kita tulis kode-kode HTML di Photoshop kemudian kita jalankan melalui browser. Ya nggak akan jalanlah. Untuk menulis kode HTML kita bisa menggunakan software code editor seperti Notepad, Notepad++, Sublime Text, Atom, atau yang lainnya. Dan agar kode kita mampu dibaca oleh browser dengan baik kita harus menyimpannya dalam format HTML yaitu .htm atau .html.

Berikut ini contoh sederhana penulisan kode HTML:

<!DOCTYPE HTML>
<html>
	<head>
		<title>Selamat Datang HTML</title>
	</head>
	<body>
		<p>Halo dunia!</p>

		<p><b>Tulisan tebal</b>, <i>tulisan miring</i>, <u>tulisan bergaris bawah</u></p>
	</body>
</html>

Kita bisa menuliskan kode tersebut pada code editor seperti Notepad, Sublime Text atau yang lainnya. Adapun code editor yang saya gunakan disini adalah Sublime Text 2. Sekali lagi kamu bebas menggunakan code editor yang lain, itu hanya masalah pilihan saja.

Kemudian kita simpan dengan format .htm atau .html, misalnya disini untuk contoh di atas kita simpan dengan nama index.html. Maka berikut ini tampilannya jika dibuka melalui browser:

Pada contoh kode HTML di atas kita bisa melihat bahwa untuk memulai menulis kode HTML maka kita harus memulainya dengan kode <html> dan ditutup dengan </html>. Adapun mengenai kode <!DOCTYPE HTML> itu berfungsi sebagai pengenal HTML5 (di lain kesempatan insya Allah akan kita bahas), sementara ikuti saja seperti demikian.

Kode-kode yang ada di antara <head> dan </head> berfungsi untuk memberikan informasi tambahan kepada browser, untuk contoh di atas misalnya ada <title> yang artinya memberikan informasi ke browser bahwa halaman web yang dibuat ini memiliki judul Selamat Datang HTML.

Apa yang ingin kita tampilkan pada browser terletak di antara kode <body> dan </body>. Yups, itulah inti dari kode kita. Disitulah kode-kode yang akan menyusun halaman web ditulis.

Sebagai penutup untuk panduan belajar HTML dasar ini saya ingin memberitahukan bahwa ada dua hal lainnya terkait HTML yang harus dipahami untuk memulai belajar HTML, yaitu TAG dan Atribut.

TAG

Sebenernya dari awal kita membahas HTML kita sudah berbicara tentang TAG, hanya saja belum saya jelaskan detailnya. TAG sederhananya adalah kode-kode tertentu yang menjadi pengenal bahwa kode tersebut adalah HTML dan bisa diterjemahkan oleh browser dengan tampilan tertentu. Misalnya tadi, untuk membuat sebuah tulisan tebal, maka kita bisa menggunakan TAG STRONG, atau TAG B. Untuk membuat paragraf kita bisa menggunakan TAG P. Dan masih banyak TAG HTML lainnya, tentunya dengan fungsi yang berbeda-beda. Dikesempatan lain akan kita pelajari lebih jauh. Untuk menuliskan TAG HTML kita bisa menggunakan huruf kecil ataupun kapital, bebas-bebas saja, browser sudah mengenalinya kok.

ATRIBUT

Atribut adalah karakteristik tambahan pada suatu TAG. Misalnya seperti yang sebelumnya sudah saya informasikan bahwa untuk membuat paragraf kita bisa menggunakan TAG P. Secara default paragraf yang akan ditampilkan oleh TAG Padalah rata kiri. Tapi jika kita ingin membuatnya rata tengah, kita bisa menambahkan atribut ALIGN dengan value CENTER ke dalam TAG P tersebut. Misalnya seperti berikut:

<p align="center">Untuk menampilkan tulisan rata tengah</p>

Setiap TAG memiliki atributnya masing-masing tergantung bagaimana sifat dari TAG tersebut. Dan sama seperti halnya dengan TAG, kita juga bebas menggunakan huruf kecil atau kapital dalam menuliskan atribut di dalam HTML.

Demikianlah sedikit panduan belajar HTML dasar, semoga dapat bermanfaat bagi temen-temen yang sedang dalam proses belajar untuk menjadi web developer. Tenang saja, belajar HTML itu nggak susah kok, asalkan dicoba untuk dipraktekan dan terus berlatih pasti akan mudah untuk dikuasai. Ini adalah tutorial pertama pada seri belajar html yang saya tulis, kedepannya saya akan coba melanjutkan pembahasan belajar html ini dengan tutorial-tutorial lainnya. Untuk tutorial selanjutnya kita akan coba belajar tentang konsep elemen di HTML.

Dan buat kamu yang ingin belajar secara interactive tentang HTML, kamu juga bisa belajar melalui Interactive Coding HTML, kami sudah menyusun materinya sedemikian rupa agar mudah dipahami. Sekali lagi selamat belajar.

Instalasi Web Server Apache, PHP, dan MySQL dengan XAMPP

Sebelum belajar PHP lebih lanjut, kita mempelajari cara installasi web server apache, php, dan mysql dengan XAMPP terlebih dahulu.

Halaman web yang ditulis dengan PHP harus diproses dalam sebuah aplikasi yang dinamakan Web Server, tidak seperti kode HTML yang dapat langsung berjalan di web browser. Web server inilah yang akan menerjemahkan kode PHP menjadi HTML dan mengirimnya ke web browser untuk ditampilkan.

Untuk menjalankan kode PHP, kita setidaknya membutuhkan 3 jenis program, yakni:
Aplikasi Web Server
Aplikasi PHP
Aplikasi Web Browser.

Untuk aplikasi web server, terdapat beberapa pilihan. Saat ini web server yang sering digunakan adalah Apache, Nginx, dan Microsoft IIS. Apache dan Nginx merupakan aplikasi open source dan dapat digunakan dengan gratis. Namun kali ini kita akan menjalankan PHP menggunakan Apache, karena Apache masih menjadi aplikasi web server yang paling banyak dipakai saat ini. Web Server Apache bisa di dapat di alamat: http://mirror.reverse.net/pub/apache/httpd/binaries/win32/.

Aplikasi selanjutnya adalah PHP itu sendiri. PHP bekerja sebagai “penerjemah” di dalam web server. PHP bisa di dapat di situs resminya dialamat: http://windows.php.net/download/

Akan tetapi, proses instalasi web server Apache dan PHP secara terpisah akan membutuhkan waktu yang cukup lama dan juga butuh pengetahuan tentang konfigurasi Apache. Berita baiknya, terdapat banyak aplikasi yang membundel Apache+PHP. Beberapa diantaranya adalah PHPTriad, Appserv, XAMPP dan WAMP. 

Aplikasi terakhir yang kita butuhkan adalah web browser. 

Cara Menginstall XAMPP 1.8.3

XAMPP adalah singkatan dari aplikasi dalam ‘paketnya’, yaitu: X (berarti cross-platform, maksudnya tersedia dalam berbagai sistem operasi), Apache Web Server, MySQL, PHP dan Perl. Dengan menginstall XAMPP, secara tidak langsung kita telah menginstall keempat aplikasi tersebut.

XAMPP juga menyediakan versi portable yang bisa diinstall di flashdisk, terdiri dari bentuk aplikasi (exe), zip dan 7zip. Untuk XAMPP versi ini, anda bisa mendapatkannya di http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/1.8.3/.

Dalam contoh kali ini saya menggunakan versi XAMPP 1.8.3 dalam bentuk file exe sebesar 140 MB. Anda juga boleh menggunakan versi portable yang memiliki ukuran file lebih kecil.

Setelah aplikasi installer XAMPP berhasil di unduh, langkah selanjutnya adalah menginstall XAMPP. Double klik file xampp-win32-1.8.3-5-VC11-installer (mungkin nama file XAMPP anda akan sedikit berbeda).

Apabila pada komputer terpasang anti virus, akan muncul jendela peringatan untuk sementara mematikan anti virus. Anda boleh mengikuti instruksi ini, atau mengabaikannya dan lanjut ke tahap selanjutnya.

Jika anda menggunakan Windows Vista atau 7, akan muncul tampilan peringatan untuk tidak menginstall XAMPP pada folder default di C:\Program Files. Hal ini disebabkan proteksi keamanan dari Windows akan menghalangi beberapa fitur dari XAMPP. Karena itu sebaiknya folder instalasi XAMPP kita pindahkan ke D:\XAMPP.

Setelah 2 jendela peringatan, jendela tampilan awal instalasi XAMPP akan muncul, klik next untuk melanjutkan.

Tampilan berikutnya adalah “Select Component”, pada layar ini anda bisa memilih aplikasi apa saja yang akan diinstall. Disarankan untuk membiarkan pilihan default, dalam hal ini semua aplikasi akan diinstall. Namun jika anda memiliki kendala akan keterbatasan ruang harddisk, anda bisa memilih aplikasi penting seperti Apache, MySQL, PHP, dan phpmyadmin. Setelah itu, lanjutkan dengan klik tombol next.

Pada tampilan berikutnya, “Installation Folder” anda dapat mengubah folder instalasi default XAMPP ke folder lain, dalam contoh ini saya akan memindahkannya ke D:\xampp. Lalu klik next untuk melanjutkan.

Tampilan layar “Bitnami for XAMPP” adalah iklan produk installer CMS dari XAMPP. Karena kita tidak memerlukannya saat ini. Hapus centang dari pilihan “Learn more about BitNami for XAMPP”, lalu klik tombol next.

Jika semuanya berjalan lancar, tampilan berikutnya adalah “Ready to Install”, klik tombol next untuk memulai proses instalasi.

Proses intallasi akan berjalan beberapa saat, hingga layar tampilan menjadi “Completing the XAMPP”. Biarkan ceklist “Do you want to start the Control Panel now?” karena kita akan langsung mencoba XAMPP setelah ini.

Akhiri proses installasi XAMPP dengan klik tombol Finish.

Setelah XAMPP berhasil diinstal, akan muncul layar “XAMPP Control Panel”. Pada jendela inilah kita akan menjalankan seluruh aplikasi yang ada di XAMPP, yang diantaranya adalah Apache Web Server dan MySQL.

Untuk test drive dari XAMPP, langsung saja klik tombol Start pada bagian Action Apache. Sesaat kemudian Module Apache akan berwarna hijau menandakan aplikasi Web server Apache sudah berjalan.

Jika anda melihat halaman XAMPP, berarti instalasi XAMPP telah berhasil dan Web Server Apache telah berjalan.

Sampai disini, XAMPP telah berhasil diinstal dan kita telah siap untuk mulai mempelajari PHP