ULVI DINO VITA World: Resume HTML 5 dan PHP

HTML 5

Sejarah

Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application Technology Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000. Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0. Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web.

Proses standardisasi W3C

Kelompok kerja untuk teknologi aplikasi web hypertext (WHATWG) mulai menspesifikasikan HTML5 pada bulan juni 2004 dengan nama Web Applications 1.0., hingga pada bulan maret 2010 spesifikasi ini masuk ke bagian draft standar di WHATWG, dan ke dalam bagian pengurusan draft di W3C. Ian Hickson mewakili Google ,Inc menjadi editor HTML5. Pada tahun 2007 Spesifikasi HTML5 diadopsi sebagai pekerjaan permulaan untuk grup baru yang mengurus HTML di World Wide Web Consorsium (W3C). Grup ini pertama kali mempublikasikan hasil draft pekerjaan pertama mereka pada tanggal 22 januari 2008. Spesifikasi ini berstatus dalam tahap pengerjaan, dan diperkirakan akan tetap demikian selama bertahun-tahun, meskipun sebagian dari HTML5 sudah dalam tahap penyelesaian dan diimplementasikan pada penjelajah web sebelum keseluruhan spesifikasinya mencapai status rekomendasi final. Berdasarkan pada jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada akhir tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun 2008, tetapi hingga bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C. WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009. Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat rekomendasi pada tahun 2012 . Kriteria di W3C agar sebuah spesifikasi dapat 100% selesai dan penerapannya dapat dilakukan pada dua atau lebih sistem yang berbeda. Pada wawancaranya dengan TechRepublic, Hickson memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian, banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan pada produk.

Pengertian HTML5

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

Markup

Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik pada blok yang umum digunakan: yaitu elemen (<div>) dan inline (<span>), sebagai contoh (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen multimedia <audio> dan <video>. Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata seperti <font> dan <center>, yang sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet (CSS).

API baru

Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesifikasikan pengkodean application programming interfaces (APIs). antarmuka document object model (DOM) yang ada dikembangkan dan fitur de facto didokumentasikan. Beberapa APIs terbaru pada HTML5 antara lain :

· Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D). Lihat spesifikasi 1.0 untuk canvas 2D.

· Timed media playback

· Media penyimpanan luring (aplikasi web luring). Lihat Web Storage

· Penyuntingan dokumen

· Drag and Drop

· Cross-document messaging

· Manajemen sejarah kunjungan penjelajah web

· Tipe MIME dan penanggung jawab protokol registrasi.

Tidak semua teknologi di atas dimasukkan pada spesifikasi HTML5 W3C, meski teknologi tersebut telah termaktub dalam spesifikasi milik WHATWG HTML. Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan WHATWG HTML5 adalah :

· Geolocation

· Web SQL Database, media penyimpanan database lokal

· API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB)

· Web Speech API

FITUR – FITUR TAMBAHAN HTML5

HTML5 Canvas

Untuk memberikan suatu 'interaksi' pada website yang kita miliki, misalnya Flash atau Java. Hal ini akan diganti oleh elemen <canvas> pada HTML5 sebagai canvas WEB – kertas yang bias dicoreti sesuai imajinasi – atau dalam hal lain, Canvas memungkinkan untuk bereksperimen lebih pada HTML5.

Audio dan Video

Di HTML5 akan ada tag khusus untuk audio dan video file. Tag tersebut adalah <audio> dan <video> yang berfungsi untuk menyisipkan file audio dan video. Berbeda dengan versi HTML pendahulunya yang harus menyisipkan flash untuk memutar audio/video, HTML5 akan dengan mudah menyisipkan file multimedia tersebut ke dalam webnya.

Local Storage

Berfungsi sebagai pengganti cache sebagai media penyimpanan history halaman web. Local Storage memungkinkan web untuk menyimpan data cache lebih besar di storage local-nya daripada cache pada browser biasa.

Web Workers

Seringkali kita menemukan jika halaman web yang memiliki banyak Javascript membuat browser melambat dan komputer nge-hang. Tetapi dengan adanya Web Workers memungkinkan halaman web untuk memproses Javascript yang mereka miliki dengan respon yang lebih cepat dan multitasking.

Semantics

Ini adalah fitur yang paling menawan untuk web designer. Para web designer yang suka sekali memainkan elemen div, nav, dan lainnya, akan di-stop oleh fitur Semantics dalam HTML5. Semantics akan menjadi masa depan bagi para tetua tag layout dan format. Pastinya web akan menjadi lebih dinamis dan menarik akibat fitur ini.

YANG PERLU DIKETAHUI TENTANG HTML5

1. DOCTYPE

DOCTYPE ditulis sebelum tag <html>. Fungsi dari DOCTYPE adalah memberitahukan kebrowser

bahwa tipe dokumen yang digunakan adalah HTML.

Dalam dokumen HTML versi sebelumnya DOCTYPE dituliskan dengan :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

Sedangkan dalam HTML5 DOCTYPE Cuma ditulis :

<!DOCTYPE HTML>

2. Tidak adanya Type pada script dan link

source code yg baru :

source code yg lama :

3. Attribute Required

Form mempunyai fitur baru yaitu required attribute, yang akan mengecek isi dari sebuah input text apakah kosong atau tidak saat di-submit. Jika kosong maka form tidak akan di-submit.

4. Mendukung audio

HTML 5 mengenalkan <audio> element sudah mendukung penuh terhadap penggunaan audio pada

halaman web.

Penggunaannya seperti kode dibawah

Unduh File ini.

</audio>

9. Mendukung video

Dan hebatnya lagi HTML juga mengenalkan <video> element. Tapi karena codec format video tidak

semua browser mendukung, jadi video yang bisa diputar tergantung dari browser.

Penggunaannya seperti kode dibawah :

<p> Browser tidak mendukung, <a hreh=”contohvideo.mp4> Silahkan unduh video.</a> </p>

</video>

Tag-tag baru yang letaknya didalam <body>

<header>

Didalam <header> ini bisa kita isi macam-macam, misal logo, navigasi, heading dan lain-lain. Bahkan diisi <div> pun tidak masalah.

<hgroup>

Jika kita memiliki satu atau lebih dari satu heading berurutan <h1> - <h6> maka kita bisa mengelompokkannya dengan <hgroup>.

<nav>

<nav> digunakan untuk ngelink kehalaman-halaman utama dari website atau bagian dari halaman itu sendiri. Kalau untuk paging, Social Networking atau list-list yang lain yang menggunakan <ul> nggak perlu dikasih <nav>.

Sesuai namanya <article> digunakan untuk membungkus teks artikel atau teks utama dalam halaman web. Apabila kita memiliki list atau daftar <article>, misal blog, maka kita perlu membungkusnya dengan <section> jika ada elemen lain yang bukan <article> dan menerangkan tentang <article>.

<time>

digunakan untuk menunjukan waktu, biasanya digunakan untuk menunjukkan waktu publish artikel, komentar, forum dan lain sebagainya. <time>memiliki atribut datetime yang berisi waktu bisa dalam format yyyy-mm-dd atau jam seperti 19:00.

<figure> dan <figcaption>

<figure> digunakan sebagai pembungkus untuk tag <img>. Tetapi tidak selalu semua tag<img> kita bungkus dengan <figure>, hanya gambar-gambar yang utama saja atau gambar-gambar yang ingin kita beri label. Nah kita memberi labelnya dengan <figcaption>.

<aside>

<aside> digunakan sebagai sidebar pada website.

<footer>

<footer> diletakkan dibagian bawah website

PHP

Pengertian PHP

PHP singkatan dari “Hypertext Preprocessor”, yang merupakan sebuah bahasa scripting tingkat tinggi yang dipasang pada dokumen HTML. Sebagian besar sintaks dalam PHP mirip dengan bahasa C, Java dan Perl, namun pada PHP ada beberapa fungsi yang lebih spesifik. Tujuan utama dari penggunaan bahasa ini adalah untuk memungkinkan perancang web yang dinamis dan dapat bekerja secara otomatis.

Kelebihan PHP

Sebenarnya PHP mulai terlihat wah ketika situs – situs e-commerce semakin berkembang. Karenanya situs-situs yang statis mulai semakin ditinggalkan karena dianggap sudah tidak memenuhi keinginan pasar, padahal situs tersebut harus tetap dinamis. Pada saat ini bahasa PERL dan CGI sudah jauh ketinggalan jaman sehingga sebagian besar designer web banyak beralih ke bahasa server-side scripting yang lebih dinamis seperti PHP.

Seluruh aplikasi berbasis web dapat dibuat dengan PHP. Namun kekuatan yang paling utama PHP adalah pada konektivitasnya dengan system database di dalam web. Sistem database yang dapat didukung oleh PHP adalah:

· MySQL

· Oracle

· Sybase

· PostgreSQL

· Microsoft SQL Server

· dBASE

· IBM DB2

· Interbase

· ODBC

· Unix DBM, dll.

PHP dapat berjalan di berbagai sistem operasi seperti Windows 98/NT, UNIX, LINUX, Solaris maupun Macintosh. PHP merupakan software yang open source yang dapat anda download secara gratis dari situs resminya yaitu http://www.php.net.
Software ini juga dapat berjalan pada web server seperti PWS (Personal Web Server), Apache, IIS, AOLServer, fhttpd, phttpd dan sebagainya. PHP juga merupakan bahasa pemograman yang dapat kita kembangkan sendiri seperti untuk menambah fungsi-fungsi baru.

Keunggulan lainnya dari PHP adalah bahwa PHP juga mendukung komunikasi dengan layanan seperti protocol IMAP, SNMP, NNTP, POP3 dan bahkan HTTP. PHP dapat diinstal sebagai bagian atau modul dari Apache web server atau sebagai CGI script yang mandiri. Banyak keuntungan yang dapat diperoleh jika menggunakan PHP sebagai modul dari apache, di antaranya adalah:

· Tingkat keamanan yang cukup tinggi

· Waktu eksekusi yang lebih cepat dibandingkan dengan bahasa pemograman web lainnya yang berorientasi pada server-side scripting .

· Akses ke system database yang lebih fleksibel, seperti MySQL.

Hubungan PHP dengan HTML

Seperti yang kita tahu, halaman web biasanya disusun dari kode-kode html yang disimpan dalam sebuah file berekstensi .html . File html inilah dikirimkan oleh server (atau file) ke browser, kemudian browser akan menerjemahkan kode-kode tersebut sehingga menghasilkan suatu tampilan yang indah.

Lain halnya dengan program php, program ini harus diterjemahkan oleh web-server sehingga menghasilkan kode html yang dikirim ke browser agar dapat ditampilkan. Program ini dapat berdiri sendiri ataupun disisipkan di antara kode-kode html sehingga dapat langsung ditampilkan bersama dengan kode-kode html tersebut.

Program php dapat ditambahkan dengan mengapit program tersebut di antara tanda <? dan ?> . Tanda- tanda tersebut biasanya disebut tanda untuk escaping dari kode html. File html yang telah dibubuhi program php harus diganti ekstensi-nya menjadi .php3 atau .php.

PHP merupakan bahasa pemrograman web yang bersifat server-side scripting , di mana script-nya menyatu dengan HTML dan berada di server. Artinya adalah sintaks dan perintah-perintah yang kita berikan akan sepenuhnya dijalankan di server tetapi disertakan HTML biasa. PHP akan dieksekusi di server dan digunakan untuk membuat halaman web yang dinamis seperti ASP (Active Server Pages) dan JSP (Java Server Pages).

Prinsip Kerja Server Side Scripting

Kesimpulannya adalah PHP dan HTML membutuhkan satu sama lain untuk membuatnya lebih baik dan lebih fungsional.

Persiapan Memulai Pemrograman PHP

Pada dasarnya untuk memulai pemrograman PHP kita membutuhkan beberapa komponen utama, yaitu :

· Web Server

Web server ini digunakan untuk melayani permintaan client untuk koneksi transfer data dengan format HTTP, dimana PHP merupakan bahasa pemrograman server-side scripting. Contoh Web server : Apache, IIS.

· Database Server

Database server berfungsi sebagai server yang melayani kebutuhan database kepada semua client secara cepat dan handal seperti penyimpanan, pembacaan, editing, dsb. Contoh Database server : MySQL, PostgreSQL.

· PHP

PHP merupakan komponen utama program yang akan memroses skrip-skrip PHP sehingga dapat berjalan di webserver.

Ketiga komponen tersebut merupakan komponen pokok yang harus dipenuhi untuk dapat memulai pemrograman PHP. Tanpa adanya salah satu dari komponen tersebut maka dapat dipastikan program yang nantinya dihasilkan tidak akan sesuai dengan keinginan kita.

Sumber:

http://id.wikipedia.org/wiki/HTML5

http://hastomo.net/php/pengertian-dan-sejarah-php/

http://hastomo.net/php/kelebihan-php/

http://hastomo.net/php/hubungan-php-dengan-html/

http://hastomo.net/php/persiapan-memulai-pemrograman-php/

https://docs.google.com/document/d/1Gc27ivw5tK1pFluCFI0gGqFho27ESd49Tn7bKq2Nxfo/edit