Kuliah Jalanan Web Programming ala TP 03 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
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)
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. (https://id.wikipedia.org/wiki/Web_Programing)
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
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
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. 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