Rules Lectures: Advance Web Programing

Rules Lectures: Advance Web Programing
Ifriandi Labolo Copyrights 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 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 Advance Web Programing - Ifriandi Labolo

Regulation Maksimum tatap muka > 80 % Paling lambat 15 menit Pakaian rapi dan sopan Alat komunikasi harap dikondisikan Copyrights 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 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]. Copyrights 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 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 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 Advance Web Programing - Ifriandi Labolo

How Does The Web Work ??? Request page using domain address/IP address IP Untuk Domain Google 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 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 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 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 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 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 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 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 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… ?

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 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 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 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 Advance Web Programing - Ifriandi Labolo

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

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

HTML input elements output Copyrights 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 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 Advance Web Programing - Ifriandi Labolo

HTML5 Tags Sumber : Copyrights 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 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 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 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 Advance Web Programing - Ifriandi Labolo

Rules Lectures: Advance Web Programing

Presentasi serupa

Presentasi berjudul: "Rules Lectures: Advance Web Programing"— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan

Masuk

Otorisasi melalui jaringan sosial:

Rules Lectures: Advance Web Programing

Presentasi serupa

Presentasi berjudul: "Rules Lectures: Advance Web Programing"— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan