Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
- 1. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 1 BUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTOR Oleh: John Friadi 2020
- 2. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 2 KATA PENGANTAR Puji syukur penulis panjatkan kehadirat Allah SWT atas segala limpahan rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan Buku Ajar Pemrograman Web dan Perangkat Bergerak dengan App Inventor. Ucapan terima kasih yang tidak terhingga penulis sampaikan terkhusus kepada Pomotor I Prof. Ganefri, Ph.D dan Promotor II Dr. Ridwan, M.Sc.Ed yang telah membimbing serta memberikan masukan kepada penulis dalam penyelesaian buku ajar ini. Buku Ajar yang dikembangkan ini jauh dari kesempurnaan, karena sempurna hanya milik Allah SWT semata. Segala kesalahan dan kekurangan dalam penulisan ini merupakan keterbatasan penulis sebagai peneliti. Besar harapan penulis semoga ini dapat dimanfaatkan dan berguna untuk kepentingan dan kemajuan dunia pendidikan serta dapat memberikan informasi dan sumbangan pemikiran demi kemajuan ilmu pengetahuan dan teknologi dimasa akan datang. Padang, Februari 2020 Penulis John Friadi
- 3. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 3 DAFTAR ISI KATA PENGANTAR......................................................................................................................2 DAFTAR ISI..................................................................................................................................3 BAB I - KONSEP TEKNOLOGI PEMROGRAMAN WEB...................................................................6 A. Pendahuluan...............................................................................................................6 B.HTML............................................................................................................................6 C.Web Browser ...............................................................................................................7 D. Aplikasi Text Editor IDE...............................................................................................7 RANGKUMAN.........................................................................................................................8 UJI KOMPETENSI ......................................................................Error! Bookmark not defined. BAB II - INSTALASI DAN KONFIGURASI IDE...................................Error! Bookmark not defined. A. Instalasi IDE Sublime Text.................................................Error! Bookmark not defined. B. Menjalankan Sublime Text...............................................Error! Bookmark not defined. C. Merubah Tampilan Sublime Text .....................................Error! Bookmark not defined. D. Membuat File HTML.........................................................Error! Bookmark not defined. E. Menyimpan File HTML .....................................................Error! Bookmark not defined. F. Menjalankan File HMTL....................................................Error! Bookmark not defined. RANGKUMAN :.........................................................................Error! Bookmark not defined. UJI KOMPETENSI ......................................................................Error! Bookmark not defined. BAB III - FORMAT TEXT DAN HALAMAN WEB...............................Error! Bookmark not defined. A. Struktur Dasar HTML........................................................Error! Bookmark not defined. B. Tag Syntax dan Option .....................................................Error! Bookmark not defined. C. Format Teks Dalam HTML ................................................Error! Bookmark not defined. RANGKUMAN...........................................................................Error! Bookmark not defined. UJI KOMPETENSI ......................................................................Error! Bookmark not defined. BAB IV - FORMAT TABEL DAN HALAMAN WEB ............................Error! Bookmark not defined. A. Format Tabel pada Halaman Web........................................Error! Bookmark not defined. 1. Tag-Tag Tabel dalam HTML ..............................................Error! Bookmark not defined. 2. Elemen Table Tbody, Thead, Tfoot, Tr, Th, dan Td ...........Error! Bookmark not defined. 3. Cellpadding.......................................................................Error! Bookmark not defined. 4. Cellspacing........................................................................Error! Bookmark not defined. 5. Border ..............................................................................Error! Bookmark not defined. B. Format Multimedia pada Halaman Web..............................Error! Bookmark not defined. 1. Konsep Tampilan Multimedia dalam HTML......................Error! Bookmark not defined. 2. Tag Menampilkan Gambar ...................................................Error! Bookmark not defined. 3. Tag untuk Audio ...............................................................Error! Bookmark not defined.
- 4. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 4 4. Tag untuk Video ...............................................................Error! Bookmark not defined. RANGKUMAN...........................................................................Error! Bookmark not defined. UJI KOMPETENSI ......................................................................Error! Bookmark not defined. BAB VI - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEB ............Error! Bookmark not defined. A. Format Kaitan pada Halaman Web ......................................Error! Bookmark not defined. 1. Konsep Hyperlink dalam HTML ........................................Error! Bookmark not defined. 2. Tag–Tag untuk Hyperlink..................................................Error! Bookmark not defined. B. Format Formulir pada Halaman Web...............................Error! Bookmark not defined. 1. Konsep Formulir dalam HTML ..........................................Error! Bookmark not defined. 2. Penggunaan Tag Form......................................................Error! Bookmark not defined. 3. Form Option.....................................................................Error! Bookmark not defined. 4. Metode Get dan Post .......................................................Error! Bookmark not defined. 5. Tipe-Tipe Inputan dalam Form (Text, Password, Radio, Checkbox, Hidden, Button, Submit, dan File) ......................................................................Error! Bookmark not defined. RANGKUMAN...........................................................................Error! Bookmark not defined. BAB VII - PENGENALAN APPINVENTOR ........................................Error! Bookmark not defined. A. Pendahuluan ....................................................................Error! Bookmark not defined. B. Berkenalan dengan App Inventor.....................................Error! Bookmark not defined. RANGKUMAN...........................................................................Error! Bookmark not defined. UJI KOMPETENSI ......................................................................Error! Bookmark not defined. BAB VIII - INSTALASI DAN KONFIGURASI APP INVENTOR.............Error! Bookmark not defined. A. Menyiapkan App Inventor................................................Error! Bookmark not defined. RANGKUMAN...........................................................................Error! Bookmark not defined. UJI KOMPETENSI ......................................................................Error! Bookmark not defined. BAB IX - PENGENALAN IDE APP INVENTOR ..................................Error! Bookmark not defined. A. Komponen Desainer.........................................................Error! Bookmark not defined. B. Block Editor ......................................................................Error! Bookmark not defined. RANGKUMAN...........................................................................Error! Bookmark not defined. BAB X - MEMULAI APP INVENTOR................................................Error! Bookmark not defined. A. Memulai App Inventor .....................................................Error! Bookmark not defined. B. Memanggil Aplikasi App Inventor.....................................Error! Bookmark not defined. RANGKUMAN...........................................................................Error! Bookmark not defined. BAB XI - MEMBUAT APLIKASI HELLO PUSS ...................................Error! Bookmark not defined. A. Membuat Desain..............................................................Error! Bookmark not defined. B. Membuat Kode Block Program ........................................Error! Bookmark not defined. C. Menjalankan Aplikasi .......................................................Error! Bookmark not defined. BAB XII - MEMBUAT APLIKASI LOGIN ...........................................Error! Bookmark not defined.
- 5. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 5 A. Membuat Desain..............................................................Error! Bookmark not defined. B. Membuat Kode Block Program ........................................Error! Bookmark not defined. C. Menjalankan Aplikasi .......................................................Error! Bookmark not defined.
- 6. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 6 BAB I - KONSEP TEKNOLOGI PEMROGRAMAN WEB Tujuan Pembelajaran: Setelah mempelajari bab ini siswa diharapkan dapat mampu 1. Memahami tentang perkembangan teknologi informasi dan internet 2. Menjelaskan tentang HTML dan CSS 3. Mengetahui tentang Web Browser 4. Mengetahui dan Menggunakan Aplikasi Text Editor IDE A. Pendahuluan Perkembangan teknologi informasi dan internet sangat cepat sekali dan berkembang pesat. Perkembangan ini turut mempengaruhi perkembangan bahasa pemrograman, dimana pemrograman yang semula berbasis desktop, kemudian beralih ke pemrograman web dan perangkat bergerak. Seseorang yang ingin belajar bahasa pemrograman web dan harus terlebih dahulu menguasai HTML. HTML adalah singkatan dari Hypertext Markup Languange. Format umum yang digunakan dalam pemrograman web. Pemrograman web dan perangkat bergerak juga tidak terlepas dari kata-kata www (world wide web) yaitu sebuah istilah yang diberikan untuk seluruh bagian internet yang dapat di akses melalui web browser. WWW adalah kumpulan dokumen multimedia yang saling bertautan dengan menggunakan tautan hyperteks. B. HTML HTML ada singkatan dari Hypertext Markup Languange. Disebut Hypertext karena didalam HTML sebuah text dapat berfungsi lain, kita dapat membuatnya menjadi menjadi link yang dapat berpindah dari satu halaman ke halaman lainnya hanya dengan mengklik text tersebut. Walapun pada implementasinya nanti tidak hanya text yang dapat dijadikan link. Disebut Markup Language karena bahasa HTML menggunakan tanda (mark) untuk menandai bagian-bagian text. HTML merupakan bahasa dasar pembuatan web. Disebut dasar karena dalam membuat web, jika hanya menggunakan HTML tampilan web kelihatan sederhana, perlu didukung bahasa pemrograman yang mendukung untuk memanipulasi kode
- 7. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 7 HTML seperti JavaScrip dan PHP, tetapi sebelum anda belajar JavaScript dan PHP memahami HTML merupakan hala yang sangat mendasar. C. Web Browser Untuk dapat mempelajari HTML sangat dibutuhkan web browser. Terdapat beberapa web browser yang cukup banyak digunakan seperti mozila firefox, internet explorer, google chrome, operasi, safari dll. Anda bebas menggunakan web browser yang yang ada sukai. Web Browser adalah suatu program yang digunakan untuk menjelajahi internet atau untuk mencari informasi dari suatu web yang tersimpan didalam komputer. Untuk menggunakan web browser pengguna dapat mengaksesnya dengan sangat mudah. User atau pengguna hanya perlu membuka aplikasi kemudian mengetikkan alamat atau situs yang dituju, biasanya dengan menggunakan format WWW (world wide web) atau mengetikkan URL (Uniform Source Locator) pada address bar dilaman web browser. D. Aplikasi Text Editor IDE Setelah kita memiliki web browser untuk membuat kode HTML dibutuhkan aplikasi text editor yang sering disebut dengan IDE (Integrated Development Environment). Sama seperti web browser, aplikasi text editor juga cukup banyak seperti Notepad++, Komodo Edit, Dreamweaver, Sublime text dan Visual code. Dukungan tools untuk pemrograman web dan perangkat bergerak sangat kuat. Seperti yang sudah dijelaskan sebelumnya kita dapat menggunakan aplikasi text editor IDE seperti Notepad++, Komodo Edit, Dreamweaver, Sublime text dan Visual code. Untuk materi pemrograman web di bahan ajar ini kita akan menggunakan Sublime text yang mempunya cukup banyak fitur dan populer serta banyak digunakan oleh para programmer di industri digital dan kalangan web developer professional. Sublime Text adalah sebuah teks editor yang sangat canggih untuk coding, markup dan lain-lain. Anda akan menyukai antarmuka pengguna yang sangat sederhana. Sublime text mendukung sejumlah bahasa pemrograman diantaranya C, C++, C#, PHP, CSS, HTML, ASP dan banyak lagi.
- 8. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 8 RANGKUMAN 1. Perkembangan teknologi informasi dan internet sangat cepat sekali dan berkembang pesat. Perkembangan ini turut mempengaruhi perkembangan bahasa pemrograman, dimana pemrograman yang semula berbasis desktop, kemudian beralih ke pemrograman web dan perangkat bergerak 2. HTML merupakan bahasa dasar pembuatan web. HTML ada singkatan dari Hypertext Markup Languange. Disebut Hypertext karena didalam HTML sebuah text dapat berfungsi lain, kita dapat membuatnya menjadi menjadi link yang dapat berpindah dari satu halaman ke halaman lainnya hanya dengan mengklik text tersebut 3. Untuk dapat mengakses web dan html diperlukan aplikasi web browser. Terdapat beberapa web browser yang cukup banyak digunakan seperti mozila firefox, internet explorer, google chrome, operasi, safari dll. Anda bebas menggunakan web browser yang yang ada sukai 4. Web Browser adalah suatu program yang digunakan untuk menjelajahi internet atau untuk mencari informasi dari suatu web yang tersimpan didalam komputer. 5. Setelah kita memiliki web browser untuk membuat kode HTML dibutuhkan aplikasi text editor yang sering disebut dengan IDE (Integrated Development Environment). Sama seperti web browser, aplikasi text editor juga cukup banyak seperti Notepad++, Komodo Edit, Dreamweaver, Sublime text dan Visual code.