Kuliah Jalanan Web Programming ala TP 03

Slides:



Advertisements
Presentasi serupa
Pengantar Teknologi Mobile 8
Advertisements

( Cascading Style Sheet) Bagian 1
HTML By kartika puji pangesti
Modul Design & Pemrograman Web
Konsep Pemrograman Internet
Peng. Komp & TI 2C M1 Peng. Komp & TI 2C Winda Widya A Peng. Komp & TI 2C Winda Widya A Peng. Komp & TI 2C Winda Widya A Peng. Komp & TI 2C.
Tim FT Elektro UHAMKA CSS (Cascading Style Sheet)
JAVASCRIPT.
Pengembangan Evangs Mailoa Cascading Style Sheet (CSS) dan HTML Form WEB.
Dasar-Dasar PHP.
 Programming language designed for building dynamic web applications  Server-side Scripting Internet Web Browser Apache PHP MySQL Disk Drive.
Web and Multimedia based Programming K2133 Pemrograman berbasis Web dan Multimedia 1.
PERTEMUAN KE 2 JAVA SERVER PAGES (JSP) BY : TITO SUGIHARTO
FORM Kegunaan Form : memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang di sediakan. memperoleh informasi pembelian.
CSS (Cascading Style Sheet)
PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran, warna tertentu.
Cascading Style Sheet (CSS) dan HTML Form
HTML Universitas Muhammadiyah Surakarta Yogiek Indra K.
Pemrogaman Web PHP.
Bahasa Style CSS L. Erawan.
Lutfi Budi Ilmawan Univ. Muslim Indonesia
Pemrograman Web JavaScript
Praktikum Pemrograman Web PHP
Teknologi Dasar Internet dan Web
PENGENALAN HTML, PHP, CSS & MySQL
Modul Design & Pemrograman Web
Pemrograman Web 1 Oleh Dita Rizki Amalia.
Cascading Style Sheet (CSS)
Pemrograman internet ABU SALAM, M.KOM.
Pemrograman internet ABU SALAM, M.KOM.
KOMPUTER APLIKASI IT II
(Cascading Style Sheet)
HTML CSS.
PEMETAAN VORD KEDALAM CMMI UNTUK MENINGKATKAN ANALISA KEBUTUHAN PERANGKAT LUNAK (STUDI KASUS : APLIKASI MEDIA MANAGEMENT DI PT.EBDESK INDONESIA) Mata.
JavaScript Part 1 : Pengertian dan Pengenalan JavaScript
CSS Cascading Style Sheets
Pemrograman Web Dinamis
Ir. P. Insap Santosa, M.Sc., Ph.D.
Pertemuan 2 JAVA 2 KA.
(Cascading Stylesheet)
PRAKTIKUM PEMROGRAMAN WEB
INTERNET Internet adalah suatu jaringan global yang terbentuk dari jaringan-jaringan lokal dan regional, memungkinkan komunikasi data antar komputer-komputer.
Pemrograman Berbasis WEB
Rekayasa Perangkat Lunak
Pemrograman Berbasis Web
PJ : Nuraini Purwandari
Pemrograman Web HTML (7) PHP Andy Haryoko, ST
Pengembangan Aplikasi Framework (IT657)
Prinsip Dasar Internet & Pemrograman Web
PEMROGRAMAN WEB Client Side XHTML, JAVASCRIPT.
Peng. Komp & TI 2C Peng. Komp & TI 2C Peng. Komp & TI 2C
( Cascading style sheets)
Praktikum Pengambangan Web
Assalamu’alaikum Warohmatullah Wabarokatuh Selamat Pagi 
Pemrograman Berorientasi Platform (IN315B)
Pemrograman Web 1. SAP (Satuan Acara Perkuliahan)
Pemrograman Web 7. Sintaks PHP-4 FORM & EXCEPTION HANDLING
Kuliah Jalanan Web Programming ala TP 01. Brainstroming
Kuliah Jalanan Web Programming ala TP 02. Database and GUI Compiler
PEMROGRAMAN WEB 03. OPERATOR
PEMROGRAMAN WEB 03. OPERATOR
Pemrograman Berorientasi Objek 6. Konsep dan Script OOP-2. Inheritance
PEMROGRAMAN WEB II.
PRAKTIKUM PEMROGRAMAN WEB Pertemuan 3
Cascading Style Sheet (CSS) dan HTML Form
Cascading Style Sheet (CSS) dan HTML Form
PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran, warna tertentu.
Cascading Style Sheet (CSS) dan HTML Form
INTERNET Internet adalah suatu jaringan global yang terbentuk dari jaringan-jaringan lokal dan regional, memungkinkan komunikasi data antar komputer-komputer.
Web Design CSS.
Transcript presentasi:

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