Rules Lectures: Advance Web Programing Ifriandi Labolo Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo Marking Class Kehadiran : 20% Tugas : 20% Quiz : 20% UTS : 20% UAS : 20% Practicum Modul : 40% Tugas Besar : 60% Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo Core Curiculum 1. Pengantar Pemrograman Web Lanjut 2. HTML 4 : Review (1) 3. HTML 4 : Review (2) 4. HTML 5 : Pengantar, Komponen 5. Cascading Style Sheet (CSS 3) 6. Javascript : Pengantar , Variabel 7. Javascript : Struktur kontrol, Fungsi , JQuery 8. PHP : Instalasi, Pengantar, Variabel (1) 9. PHP : Struktur kontrol, fungsi, OOP (2) 10. PHP + MySQL : CRUD (Create, Read, Update, Delete) (1) 11. PHP + MySQL : CRUD (Create, Read, Update, Delete) (2) 12. Aplikasi WEB dengan PHP + MYSQL (1) 13. Aplikasi WEB dengan PHP + MYSQL (2) 14. Aplikasi WEB dengan PHP + MYSQL (3) Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo Regulation Maksimum tatap muka > 80 % Paling lambat 15 menit Pakaian rapi dan sopan Alat komunikasi harap dikondisikan Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

ifriandilabolo Education : SDN 61 Gorontalo (2000) SMP Negeri 1 Gorontalo (2003) SMA Negeri 3 Gorontalo (2006) (S1) STMIK Ichsan Gorontalo (2010) (S2) Universitas Dian Nuswantoro Semarang (2012) Computer Interest / Programing Application : Information System Geographic Information System (GIS) Intelligent System Mobile Programing Computer Security Publications Journal: Fuzzy Inference System Pengenalan Emosi Pada Musik (2012) Penerapan SMS Gateway Untuk Sistem Antrian Pasien (2013) Geographic Information System Penyebaran Wilayah Pendidikan (2014)

Advance Web Programing: Review Web Programing (Week 1 – 4) Ifriandi Labolo Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo References Steven M. Schafer, Web Standards Programmer’s Reference: HTML, CSS, JavaScript®, Perl, Python, and PHP. Indiana, United States of America: Wiley Publishing, Inc., 2005. Jasson W. Gilmore, Begining PHP and MySQL, Third Edition ed. New York, United States Of America: Springer, 2008. w3schools. (1999) w3schools.com. [Online]. http://www.w3schools.com/ Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Review HTML Objective : Mahasiswa dapat mengetahui pengertian dan cara kerja internet Mahasiswa dapat mengetahui jenis – jenis pemrograman web Mahasiswa dapat mengetahui tentang HTML Mahasiswa dapat mengetahui element dan atribut HTML

(Review) The Basic Of HTML What is the WWW (World Wide Web) ??? How does the web Work ??? What is HTML ??? What is the basic syntax of HTML ??? Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Whats is the WWW (World Wide Web) ??? The World Wide Web is a network of computers that, using the Internet, are able to exchange text, graphics, and even multimedia content using standard protocols [1]. Adalah salah satu bentuk layanan yang dapat diakses melalui internet. Biasa disingkat sebagai Web. Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo Server vs Client Servers — special computers that are set up for the distinct purpose of delivering content. Clients — which are generally desktop computers but can also be dedicated terminals, mobile devices, and more — access the servers’ content via a browser. The browser is a specialized application for displaying Web content. Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo How Does The Web Work ??? Request page using domain address/IP address IP Untuk Domain Google 74.125.235.2 DNS (Domain Name System) Adalah suatu sistem penamaan standar komputer-komputer di internet dengan tujuan untuk mempermudah pengelolaan server komputer internet. HTTP Adalah protokol yang menentukan aturan yang perlu diikuti oleh web browser dalam meminta dan mengambil suatu dokumen oleh web server dalam menyediakan dokumen yang diminta web browser. Protokol ini merupakan protokol standar yang digunakan untuk mengakses dokumen HTML Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo Untuk mengkases halaman web kita membutuhkan : WEB BROWSER Berjalan pada komputer user Merupakan tool untuk melakukan navigasi di web Menampilkan dokumen web Contoh-contoh: MS Internet Explorer  Windows Netscape Navigator/Communicator  Multi Opera  Multi Google Chrome Mozila Firefox Safari Dll.. Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo Web Programming Web dapat dikategorikan menjadi dua, yaitu Web statis web yang menampilkan informasi-informasi yang sifatnya statis (tetap) Web dinamis atau interaktif. web yang menampilkan informasi serta dapat berinteraksi dengan user yang sifatnya dinamis. Sehingga untuk membuat web dinamis dibutuhkan kemampuan pemrograman web. Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo Dua kategori web programming: Client Side Programming Pemrograman yang code programnya di eksekusi di sisi client (Contoh : Javascript) Server Side Programming Perograma yang code programnya di eksekusi di sisi server (Contoh : PHP) Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo Whats is HTML ??? Hypertext Markup Language (HTML) was devised as an easy means to format textual documents. HTML is a language for describing web pages [2]. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language The purpose of the tags are to describe page content HTML and HTTP were both invented by Tim Berners-Lee (1989). He wanted to give the institute’s researchers a simple markup language that would enable them to share their research papers via the Internet. Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo HTML Syntax Tag - Digunakan untuk menentukan tingkah laku web browser. Dinyatakan dengan tanda lebih kecil “<“ (tag awal) dan tanda lebih besar “>” (tag akhir). Tag kontainer: <namatag> ..... </namatag> Element – Jenis-jenis dari tag. HTML mempunyai banyak elemen untuk berbagai keperluan dengan berbagai bentuk penggunaan. Attribute - Digunakan untuk memodifikasi nilai dari elemen HTML. Suatu elemen biasanya akan mempunyai banyak atribut. Contoh Penggunaan Tag Tulisan ini harus ditulis dengan huruf <b> Tebal </b> Tulisan ini harus ditulis dengen huruf <i> Miring </i> Tulisan ini harus ditulis dengan huruf <b><i>Tebal dan Miring </i></b> Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

HTML (Hyper Text Marqub Language) HTML Element : <b>  bold : untuk mencetak tebal suatu text <a>  anchor : untuk memuat link ke dokumen lain menggunakan atribut href <br>  digunakan untuk berpindah ke baris baru <font>  untuk mendefinisikan huruf (jenis, warna, dan ukuran) <form>  untuk medefiniskan form masukan dari penggunan <table>  untuk membuat tabel dalam halaman web Dan masih banyak lagi ……  Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo Struktur HTML4 Struktur HTML 4 <html> <head> <title>Untitled Document</title> </head> <body> Tempat Menuliskan Kode HTML </body> </html> Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Basic Of HTML Objective : Mahasiswa dapat mengetahui tentang HTML Mahasiswa dapat mengetahui element dan atribut HTML Mahasiswa dapat membuat program sederahan berbasis HTML

Programing Jokes Programer itu romantis… ?

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo 1. Atribut HTML : bgcolor [latihan1.html] <bgcolor> merupakan atribut untuk setiap komponen yang memiliki bidang <bgcolor> digunakan untuk merubah warna latar belakang Syntax : <namaelement bgcolor=“hexa warna”> Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

2. Atribut HTML : background – [latihan2.html] <background> merupakan atribut untuk setiap komponen yang memiliki bidang <backgorund> digunakan untuk merubah latar belakang dengan menggunakan gambar Syntax : <namaelement background=“namagambar”> Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo 3. Atribut HTML : table – [latihan3.html] Tables are defined with the <table> tag A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). Td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo HTML Forms HTML forms are used to pass data to a server. Form dapat berisi elemen input seperti, text fields, checkboxes, radio-buttons, submit buttons and more. Form juga dapat berisi select lists, textarea, fieldset, legend, and label elements. Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo HTML input elemnts output output Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo HTML input elements output output Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo HTML input elements output Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Type this code – latihan4.html <!DOCTYPE html> <html> <head> <title>Form input data</title> </head> <body> <h1>Form Input Data</h1> <form name="frmInput" method="post"> Nama : <input type="text" name="nama"> <br> Jenis Kelamin : <input type="radio" name="kelamin" value="Pria" checked="checked"> Pria <input type="radio" name="kelamin" value="Wanita"> Wanita <br> Agama : <select name="agama"><br> <option value="Islam">Islam</option> <option value="Kristen Katolik">Kristen Katolik</option> <option value="Kristen Protestan">Kristen Protestan</option> <option value="Budha">Budha</option> <option value="Hindu">Hindu</option> </select> <br> Alamat : <textarea name="alamat" cols="40" rows="3"></textarea><br> <input type="submit" name="btn_simpan" value="Simpan Data"> <input type="reset" name="btn_batal" value="Batal"> </form> </body> </html> Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo Whats New in HTML 5 ??? HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors. New Fiturs in HTML5 HTML5 Multimedia HTML5 Graphics HTML5 Local Storage HTML5 Semantic and Forms HTML5 CSS 3 Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo HTML5 Tags Sumber : http://www.w3schools.com/html5/html5_reference.asp Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo HTML5 Tags Sumber : http://www.w3schools.com/html5/html5_reference.asp Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo HTML5 Syntax Struktur HTML 5 <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Format Artikel dengan HTML5 Try this code !! <!DOCTYPE html> <html> <body> <article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT.....</p> </article> </body> </html> OUTPUT : Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo Memainkan File Audio – [latihan5.html] <!DOCTYPE html> <html> <body> <audio controls="controls"> <source src=“file_mp3_anda.mp3" type="audio/mp3" /> Your browser does not support the audio element. </audio> </body> </html> OUTPUT : Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo Tugas 1 : Kerjakan semua latihan (latihan1.html – latihan5.html) yang ada pada materi ini. Buatlah aplikasi sederhana untuk memainkan lagu favorit anda menggunakan tag audio pada html 5.. Tugas diperiksa langsung di laptop/komputer masing-masing pada pertemuan minggu depan.. Copyrights 2012 - Advance Web Programing - Ifriandi Labolo

Copyrights 2012 - Advance Web Programing - Ifriandi Labolo