Kuliah Jalanan Web Programming ala TP 03

Kuliah Jalanan Web Programming ala TP 03
Kuliah Jalanan Web Programming ala TP 03. GUI/ Client Side Programming with Framework Teguh Pribadi wa/sms/telegram

Teguh Pribadi SD Negeri 2 Sumberarum (1997-2003)
SMP Negeri 2 Bojonegoro ( ) SMA Negeri 1 Bojonegoro ( ) UM - S1 Pend. TI (2009September-2013Maret) SMK N 6 Jember - Talentscouting Program (2013Januari–2013Juni) SMK Negeri 1 Bojonegoro (2013Juli-sekarang) AKN Bojonegoro (2013-sekarang) UDINUS – S2 Magister TI (onprogress) Founder of Kuliah Jalanan Web Programming ala TP (2015-sekarang) One of Founder Transcipta Infotama - IT Consultant, IT Training, IT Developer (2016-sekarang)

Kuliah Jalanan Web Programming ala TP
01. Brainstorming 02. Database and GUI Compiler 03. GUI/ Client Side Programming with Framework 04. Server Side Programming with Framework 05. Time to Build Simple Project

GUI/ Client Side Programming with Framework
HTML CSS JavaScript Bootstrap as a Web GUI Framework

GUI/ Client Side

GUI/ Client Side Pengertian
Teknologi web programming dimana script dijalankan komputer client, tanpa berinteraksi dengan server. Di client slide teknologi ini, code script sangat bergantung pada browser yang digunakan. (

GUI/ Client Side Konsep
Bidang Pemrograman Web MODEL DATABASE CONTROLLER SERVER SIDE VIEW CLIENT SIDE MySQL (DDL – DML) PHP (Proccesing) HTML CSS JavaScript (User Interface)

HTML pendahuluan HyperText Markup Language (HTML).
HyperText  bahasa tingkat tinggi  bahasanya mudah dipahami oleh manusia. Markup Language  Bahasa pengganti dari konsep yang ada (misal word) ke browser. Ekstensi filenya .html.

HTML pendahuluan – struktur dasar

HTML script – tag Tag-tag HTML selalu diawali dengan <…> dan diakhiri dengan </…>. Namun ada juga tag yang tidak diakhiri dengan tanda seperti tag dan lainnya.

HTML script – tag – contoh
OUTPUT

HTML script – elements Semua yg terdapat mulai start tag, content, end tag.

HTML script – elements – contoh
OUTPUT

HTML script – atributes
Atribut memberikan informasi tambahan tentang elemen. Atribut selalu ditentukan dalam tag awal. Umumnya berisi attribute_name=“value“.

HTML script – atributes – contoh
OUTPUT attribute_name=“value“

HTML script yg harus dipelajari (1) HTML home  HTML list

HTML script yang harus dipelajari (2) HTML Image  HTML Input Attributes

HTML script yang harus dipelajari (3) HTML5

CSS pendahuluan CSS Cascading Style Sheet - CSS.
Bahasa pengaturan/ gaya dari untuk dokumen HTML. Ekstensi filenya (.css). CSS Pewarnaan Mensetting Font Box Model …etc

CSS sintax dasar Berdasarkan cara pemanggilan: Selector Element
Selector id Selector class Berdasarkan penempatan style: Inline Internal Eksternal

CSS cara pemanggilan Selector element/ tag name Selector id
Selector class

CSS cara pemanggilan – selector element/tag name
SCRIPT OUTPUT nama deklarasi style = nama elemen/tag

CSS cara pemanggilan – selector id
SCRIPT OUTPUT #namadeklarasi, dipanggil elemen dengan id=“namadeklarasi”

CSS cara pemanggilan – selector class
SCRIPT OUTPUT .namadeklarasi, dipanggil elemen dengan class=“namadeklarasi”

CSS penempatan style Inline Internal Eksternal . # CSS (.)(#) HTML CSS
<head> …… </head> HTML . # CSS INTERNAL <head> CSS (.)(#) </head> HTML INLINE <p Style=“CSS”> </p> HTML

CSS penempatan style – inline
CONCEPT OUTPUT INLINE <p Style=“CSS”> </p> HTML SCRIPT

CSS penempatan style – internal
CONCEPT OUTPUT INTERNAL <head> CSS (.)(#) </head> HTML SCRIPT

CSS penempatan style – eksternal
CONCEPT OUTPUT EKSTERNAL <head> …… </head> HTML . # CSS SCRIPT

CSS script yg harus dipelajari (1) CSS Colors  CSS Position

CSS script yg harus dipelajari (2) CSS Float  CSS Counter

CSS 3 (newest version of css on this decade) script yg harus dipelajari (3) CSS3 Intro  CSS3 MQ Example

JavaScript

JavaScript pendahuluan
JavaScript adalah bahasa pemrograman yang bisa disisipkan ke HTML. Javascript berjalan di sisi Client. (baik murni client maupun sisi client yang berinteraksi dengan database). Sintaks JavaScript mirip-mirip dengan Bahasa C. JavaScript bersifat case sensitive.

JavaScript script – konsep dasar (1)
Kode JavaScript ditulis diantara <script> dan </script>. Contoh:

JavaScript script – konsep dasar (2)
Javascript dapat ditempatkan di seluruh tempat dalam file html. Namun ada beberapa pendapat bahwa efisien jika ditempatkan di footer/ setelah end tag body.

JavaScript kegunaan dasar
JavaScript Can Change HTML Content JavaScript Can Change HTML Attributes JavaScript Can Change HTML Styles (CSS) JavaScript Can Validate Data

JavaScript kegunaan dasar – Change HTML Content
OUTPUT

JavaScript kegunaan dasar – Change HTML Attributes
OUTPUT

JavaScript kegunaan dasar – Change HTML Style (CSS)
OUTPUT

JavaScript kegunaan dasar – Validate Data (SCRIPT)

JavaScript kegunaan dasar – Validate Data (OUTPUT)

JavaScript operator Operator pada JavaScript terbagi menjadi enam, yaitu : Aritmatika (Ex: + , - , : , x ) Pemberian nilai (Ex: = , += , -= , *= , /=) Pemanipulasian bit (Ex: & , | , ^) Pembanding (Ex: == , != , > , <) Logika (Ex: && , || , !) String (Ex: “Java” + “Script” =“JavaScript”)

Bootstrap as a Web GUI Framework

BOOTSTRAP pendahuluan framework
Framework  blueprint/ kerangka kerja/ cetakan. Sebuah framework yang dibuat dengan menggunakan bahasa dari html dan css. Juga menyediakan efek javascript yang dibangun dengan menggunakan jquery. ENAK? YA, karena gak usah repot-repot buat script dari awal/nol. GAK ENAK? YA, karena kita harus mempelajari cetakan script dari framework tersebut terlebih dahulu.

BOOTSTRAP pendahuluan bootstrap
Bootstrap adalah Framework tampilan/GUI. Sebuah framework yang dibuat dengan menggunakan bahasa dari html dan css. Juga menyediakan efek javascript yang dibangun dengan menggunakan jquery.

BOOTSTRAP cetakan bootstrap - css

BOOTSTRAP cetakan bootstrap - component

BOOTSTRAP cetakan bootstrap - javascript

BOOTSTRAP turunan BOOTSTRAP Metro ui Metro-bootstrap …. …. ….
Bootstrap  framework. Beberapa framework/template juga beracuan ke bootstrap. Misal: metro UI, metro-bootstrap. BOOTSTRAP Metro ui Metro-bootstrap …. …. ….

STUDI KASUS

STUDI KASUS kelompok 1-5 Pilih/cari sebuah template turunan dari bootstrap. Berdasarkan studi kasus sebelumnya, buatlah view: Index ( berupa table ) { Full Css }, Form tambah { Full Css }, Form edit { Full Css }, Alert hapus javascript.

Referensi

Referensi CSS Gasston, Peter The Book of CSS3, 2nd Edition. No Starch Press-USA Lunn, Ian CSS3 Foundations. Wiley Publishing-USA Olsson, Mikael. CSS Quick Syntax Reference HTML F. Sikos, LesLie Web Standards-Mastering HTML5, CSS3, dan XML. A Press-USA JAVASCRIPT Ambler, Timber and Cloud, Nicholas JavaScript Frameworks for Modern Web Dev. APress-USA Brown, Ethan Learning JavaScript, 3rd Edition. O’Reilly Media-USA Crockford, Douglas JavaScript_ The Good Parts. O’Reilly Media-USA Libby, Alex Learning Less.js. Packt Publishing-UK Mardan, Azat Full Stack JavaScript, 2nd Edition. APress-USA Rinehart, Martin JavaScript Object Programming. APress-USA ALL Official W3schools offline. diakses Oktober 2016

Kuliah Jalanan Web Programming ala TP 03

Presentasi serupa

Presentasi berjudul: "Kuliah Jalanan Web Programming ala TP 03"— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan

Masuk

Otorisasi melalui jaringan sosial:

Kuliah Jalanan Web Programming ala TP 03

Presentasi serupa

Presentasi berjudul: "Kuliah Jalanan Web Programming ala TP 03"— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan