GUI/ Client Side Programming with Framework

Kuliah Jalanan Web Programming ala TP
03. GUI/ Client Side Programming with Framework
Teguh Pribadi
http://pribadi.transcipta.com
https://www.facebook.com/pribbadi
wa/sms/telegram 0857 3600 3963
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
Teguh Pribadi
•
•
•
•
•
•
•
•
•
SD Negeri 2 Sumberarum (1997-2003)
SMP Negeri 2 Bojonegoro (2003-2006)
SMA Negeri 1 Bojonegoro (2006-2009)
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)
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
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
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
GUI/ Client Side Programming with Framework
a)
b)
c)
d)
e)
GUI/ Client Side
HTML
CSS
JavaScript
Bootstrap as a Web GUI Framework
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
GUI/ Client Side
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
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. (https://id.wikipedia.org/wiki/Web_Programing)
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
GUI/ Client Side
Konsep
Bidang Pemrograman Web
MySQL
(DDL – DML)
PHP
(Proccesing)
MODEL
DATABASE
CONTROLLER
SERVER SIDE
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
CSS
HTML
JavaScript
(User Interface)
VIEW
CLIENT SIDE
transcipta.com
HTML
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
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.
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
HTML
pendahuluan – struktur dasar
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
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.
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
HTML
script – tag – contoh
SCRIPT
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
OUTPUT
transcipta.com
HTML
script – elements
 Semua yg terdapat mulai start tag, content, end tag.
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
HTML
script – elements – contoh
SCRIPT
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
OUTPUT
transcipta.com
HTML
script – atributes
 Atribut memberikan informasi tambahan tentang
elemen.
 Atribut selalu ditentukan dalam tag awal.
 Umumnya berisi attribute_name=“value“.
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
HTML
script – atributes – contoh
SCRIPT
OUTPUT
attribute_name=“value“
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
HTML
script yg harus dipelajari (1) HTML home  HTML list
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
HTML
script yang harus dipelajari (2) HTML Image  HTML Input Attributes
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
HTML
script yang harus dipelajari (3) HTML5
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
CSS
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
CSS
pendahuluan
 Cascading Style Sheet - CSS.
 Bahasa pengaturan/ gaya dari untuk dokumen HTML.
 Ekstensi filenya (.css).
Pewarnaan
Mensetting Font
Box Model
…etc
CSS
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
CSS
sintax dasar
Berdasarkan cara pemanggilan:
 Selector Element
 Selector id
 Selector class
pribadi.transcipta.com
Berdasarkan penempatan style:
 Inline
 Internal
 Eksternal
Kuliah Jalanan Web Programming ala TP
transcipta.com
CSS
cara pemanggilan
 Selector element/ tag name
 Selector id
 Selector class
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
CSS
cara pemanggilan – selector element/tag name
SCRIPT
OUTPUT
nama deklarasi style = nama elemen/tag
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
CSS
cara pemanggilan – selector id
SCRIPT
OUTPUT
#namadeklarasi, dipanggil elemen dengan id=“namadeklarasi”
transcipta.com
pribadi.transcipta.com Kuliah Jalanan Web Programming ala TP
CSS
cara pemanggilan – selector class
SCRIPT
OUTPUT
.namadeklarasi, dipanggil elemen dengan class=“namadeklarasi”
transcipta.com
pribadi.transcipta.com Kuliah Jalanan Web Programming ala TP
CSS
penempatan style
 Inline
 Internal
 Eksternal
.
#
<head>
……
</head>
CSS
HTML
EKSTERNAL
pribadi.transcipta.com
<head>
CSS (.)(#)
</head>
HTML
INTERNAL
Kuliah Jalanan Web Programming ala TP
<p Style=“CSS”>
</p>
HTML
INLINE
transcipta.com
CSS
penempatan style – inline
CONCEPT
OUTPUT
<p Style=“CSS”>
</p>
HTML
INLINE
SCRIPT
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
CSS
penempatan style – internal
CONCEPT
OUTPUT
<head>
CSS (.)(#)
</head>
HTML
INTERNAL
SCRIPT
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
CSS
penempatan style – eksternal
CONCEPT
.
#
<head>
……
</head>
CSS
HTML
OUTPUT
EKSTERNAL
SCRIPT
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
CSS
script yg harus dipelajari (1) CSS Colors  CSS Position
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
CSS
script yg harus dipelajari (2) CSS Float  CSS Counter
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
CSS 3 (newest version of css on this decade)
script yg harus dipelajari (3) CSS3 Intro  CSS3 MQ Example
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
JavaScript
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
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.
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
JavaScript
script – konsep dasar (1)
 Kode JavaScript ditulis diantara <script> dan
</script>.
 Contoh:
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
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.
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
JavaScript
kegunaan dasar




JavaScript Can Change HTML Content
JavaScript Can Change HTML Attributes
JavaScript Can Change HTML Styles (CSS)
JavaScript Can Validate Data
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
JavaScript
kegunaan dasar – Change HTML Content
SCRIPT
OUTPUT
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
JavaScript
kegunaan dasar – Change HTML Attributes
SCRIPT
OUTPUT
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
JavaScript
kegunaan dasar – Change HTML Style (CSS)
SCRIPT
OUTPUT
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
JavaScript
kegunaan dasar – Validate Data (SCRIPT)
SCRIPT
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
JavaScript
kegunaan dasar – Validate Data (OUTPUT)
OUTPUT
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
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”)
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
Bootstrap as a Web GUI Framework
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
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.
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
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.
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
BOOTSTRAP
cetakan bootstrap - css
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
BOOTSTRAP
cetakan bootstrap - component
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
BOOTSTRAP
cetakan bootstrap - javascript
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
BOOTSTRAP
turunan
 Bootstrap  framework.
 Beberapa framework/template juga beracuan ke
bootstrap. Misal: metro UI, metro-bootstrap.
Metro ui
pribadi.transcipta.com
BOOTSTRAP
Metro-bootstrap ….
Kuliah Jalanan Web Programming ala TP
….
….
transcipta.com
STUDI KASUS
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
STUDI KASUS
kelompok 1-5
1. Pilih/cari sebuah template turunan dari bootstrap.
2. Berdasarkan studi kasus sebelumnya, buatlah view:
a) Index ( berupa table ) { Full Css },
b) Form tambah { Full Css },
c) Form edit { Full Css },
d) Alert hapus javascript.
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
Referensi
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com
Referensi
CSS

Gasston, Peter. 2015. The Book of CSS3, 2nd Edition. No Starch Press-USA

Lunn, Ian. 2013. CSS3 Foundations. Wiley Publishing-USA

Olsson, Mikael. CSS Quick Syntax Reference
HTML

F. Sikos, LesLie. 2011. Web Standards-Mastering HTML5, CSS3, dan XML. A Press-USA
JAVASCRIPT

Ambler, Timber and Cloud, Nicholas. 2015. JavaScript Frameworks for Modern Web Dev. APress-USA

Brown, Ethan. 2015. Learning JavaScript, 3rd Edition. O’Reilly Media-USA

Crockford, Douglas. 2008. JavaScript_ The Good Parts. O’Reilly Media-USA

Libby, Alex. 2014. Learning Less.js. Packt Publishing-UK

Mardan, Azat. 2015. Full Stack JavaScript, 2nd Edition. APress-USA

Rinehart, Martin. 2015. JavaScript Object Programming. APress-USA
ALL

Official. 2016. W3schools offline.

https://id.wikipedia.org/wiki/Web_Programing diakses Oktober 2016
pribadi.transcipta.com
Kuliah Jalanan Web Programming ala TP
transcipta.com