Praktikum Pemrograman Web2 - WordPress
Panduan2012PraktikumPemrograman WebDisusun oleh :Hermawan, S.T. M.Kom.NIP. 1979 200501 1 002COMMON COMPUTING LABORATORYPROGRAM STUDI TEKNIK INFORMATIKAFAKULTAS TEKNIK UNIVERSITAS TRUNOJOYO2012
ContentsTujuan, . 3Modul Praktikum, . 3Kebutuhan Software, . 3Alur Bagi Peserta Praktikum : . 4Peraturan Praktikum :. 4Grade Penilaian Praktikum :. 4Referensi . 41.1. DTD61.2. Meta Dokumen. 61.3. Elemen HTML . 6·Title, . 6·Text 7·Image . 7·Form . 7·Drop-Box . 7·File Browser. 7·Table . 8·List 81.4. Instruksi Praktek, . 81.5. Jawablah pertanyaan berikut: . 91.6. Tugas I, . 102.1 Instruksi Praktek, . 132.2 Jawablah pertanyaan berikut: . 142.3 Tugas 143.2 Document Object Model (DOM), . 173.3 AJAX, Ashyncronous Javascript and XHTML . 203.4 Framework Javascript . 233.5 Instruksi Praktek, . 243.6 Jawablah Pertanyaan Berikut . 243.7 Tugas 24
Praktikum Pemrograman WebTujuan,1. Mahasiswa dapat membuat desain Web menggunakan HTML, CSS dan JavaScript2. Mahasiswa dapatmembuatprogram Web dinamis berbasisJavamenggunakan JSP dan Servlet, serta pemrograman dinamis menggunakanGSP dan Groovlet3. Mahasiswa dapat membuat aplikasi menggunakan framework Web GRAILSModul Praktikum,1. HTML2. CSS3. Java Script4. Server Web5. JSP & Servlet6. GSP & Groovlet7. GRAILS Scaffolding8. Aplikasi WebKebutuhan Software,1. Netbeans V.6.0 HTML Editor Plugin2. Browser Mozilla FireFox (modern browser) V.3.6 Firebug Plugin3. GRAILS Frameworks V. 3.74. Java SDK V.1.6 (Direkomendasikan SUN Oracle)5. Tomcat V.6 & Sun Oracle Glassfish Server V.3.1
Alur Bagi Peserta Praktikum :1. Peserta praktikum menerima dan kemudian mempelajari modul praktikum.2. Peserta praktikum mengerjakan tugas prepraktikum yang diberikan.3. Peserta praktikum melakukan asistensi tugas prepraktikum. Asistensi ini digunakansebagai bahan bagi asisten untuk menilai kesiapan peserta juga berfungsi sebagai ajangdiskusi peserta praktikum atas kesulitan yang dialaminya.4. Peserta praktikum mendemokan implementasi tugas praktikum kepada asisten.Peraturan Praktikum :1.Praktikan harus menghadiri setiap sesi praktikum , tidak hadir tanpa keterangan akanmenyebabkan hak menjadi praktikan gugur (nilai E).2.Tugas prepraktikum diserahkan sebelum praktikum dimulai.3.Laporan praktikum dianggap sah apabila praktikan telah melakukan asistensi sesuaidengan materi praktikum.4.Laporan resmi adalah gabungan dari semua laporan praktikum tiap sesi.Grade Penilaian Praktikum :1. Tugas Prepraktikum 10%2. Kehadiran dan tugas praktikum 20%3. Asistensi dan laporan praktikum 25%4. Laporan resmi Demo Akhir 45%Referensi Thomas A. Powell, HTML & CSS: The Complete Reference, The McGraw-Hill 2010.Molly E. Holzschlag, HTML and CSS, Addison Wesley Professional 2005.Phil Hanna, JSP: The Complete Reference, Osborne/McGraw-Hill 2001http://www.w3schools.com
Modul 1: Desain HTMLHTML (Hypertext Markup Language) adalah bahasa format dari tagXML(Extended Markup Language) yang digunakan sebagai standar tampilan darihalaman Web.HTML dapat diterima sebagai tampilan halaman Web setelah melalui prosesinterpretasi dari Web browser. Selain itu HTML memiliki struktur yang fleksibel, tanpalojik serta toleran terhadap kesalahan.Standar Minimum elemen HTML:·Document Type Declaration (DTD)·Head·Body DTD html head !—Terdiri dari elemen-elemen yang mendeklarasikan konten sebagai pendukunglingkungan seperti title, meta dokumen, CSS, Java Script -- /head body !—Terdiri dari elemen-elemen yang diinterpretasikan sebagai tampilan web -- /body /html
1.1. DTDSebagai standar versi dokumen W3C yang digunakan sebagai representasisetiap elemen pada dokumen Web,Contoh:· R/html4/loose.dtd" · R /xhtml1/DTD/xhtml1-transitional.dtd" Standar tipe dokumen tersebut dapat digunakan untuk validasi elemen halamanWeb.1.2. Meta DokumenElemen meta sebagai identitas dari halaman Web yang biasa terdiri dari owner,keywords, layout, ataupun inisialisasi proses seperti refresh.Contoh:· meta http-equiv "Content-Type" content "text/html; charset UTF-8" / · meta name "owners" content "myWeb" / · meta name "keywords" content "Sistem Informasi, Jurnal, Publikasi Ilmiah" / · meta name "layout" content "main" / · meta HTTP-EQUIV "REFRESH" content "0; url /myweb/myurl" 1.3. Elemen HTMLJenis-jenis elemen data yang akan ditampilkan pada halaman Web seperti:Form, Text, Image, Table, Drop-Box, Button dan lainnya.Contoh:·Title,Ditampilkan pada header browser
title Praktikum Pemrograman Web /title ·Text h1 Selamat Datang Di Website Kami! /h1 h2 Web Ini Adalah Tutorial Pemrograman Web /h2 h3 Praktikum Pemrograman Web /h3 p a href "http://informatika.trunojoyo.ac.id" TeknikInformatika UTM /a /span link for your success way /p ·Image img src "images/myphoto.jpg" width "180" height "200"alt "photo"/ ·Form form method "POST" action "response2.jsp"enctype "multipart/form-data" ·Drop-Box select name "My Lab" option value ’CC’ Lab. Praktikum Common Computing /option option value ’SI’ Lab. Sistem Informasi /option option value ’CAI’ Lab. Computing & AI /option /select ·File Browser input type "file" name "upload" value "" width "200" /
·Table table border "1" width "10" thead tr th NIM /th th Mahasiswa /th /tr /thead tbody tr td 123 /td td Ani Rahmawati /td /tr tr td 124 /td td Budi Susilo /td /tr /tbody /table ·ListBidang Minat: ol li Sistem Informasi ul li Data Warehousing /li li Enterprise Architecture /li /ul /li li Multimedia ul li Komputer Grafik /li li Machinema /li /ul /ol /li 1.4. Instruksi Praktek,·Buat file form1.html·Kopikan setiap kode script html sebagaimana diatas·Amati yang terjadi pada browser dengan melakukan refresh pada setiapperubahan kode·Aktifkan plugin firebug pada browser Mozilla atau chrome, kemudianlakukan inspeksi sambil melakukan perubahan-perubahan kode HTML
1.5. Jawablah pertanyaan berikut:1. Lakukanlah perubahan pada kode HTML sesuai keinginan anda, Pernakahterjadi error ketika ada kesalahan kode.?2. Cobalahubahnilaimetarefresh metaHTTP-EQUIV "REFRESH"content "5; url http://google.co.id" apa yang terjadi.?, maka jelaskan apadiantara kegunaan meta dokumen.?3. Jelaskan fungsi tag HTML pada Table: thead, tbody, tr, th serta td.!4. Coba gunakan editor WySWyG dari HTML plugin pada Netbeans sesuaidengan contoh script diatas, jelaskan seberapa membantukah penggunaantools tersebut.!Plugin Desainer HTML pada Netbeans
1.6. Tugas I,Dengan menggunakan HTML desainer yang terdapat pada Netbeans buatlahdesain form HTML, sebagai berikut:Form HTML Registrasi
Modul 2: Desain HTML & CSSCascading Style Sheet (CSS), merupakan format gaya yang digunakan padaHTML. CSS dapat merubah gaya penampilan pada setiap tag HTML.CSS dapat ditempatkan dalam 2 cara, yaitu:1. langsung didalam setiap tag HTMLcontoh: img src "images/myphoto.jpg" width "180" height "200"alt "photo" style "border-style:solid; border-color:black;borderwidth:thin"; padding:10px 10px;/ 2. mereferensi pada link file diluar yang dikhususkan untuk CSS link rel "stylesheet" type "text/css" href "main.css" / Standar desain HTML dan CSS saat ini dilakukan dengan:·pengelompokan desain sesuai pembagian elemen secara independenmenggunakan tag DIV·menggunakan link CSS untuk memudahkan manajemen dan reusability·menggunakan selektor pseudo ID dan Class.Diantara style CSS:·layouto·backgroundPosisi:oPosition, menentukan posisi elemen pada layout·Absolute, jarak mutlak sesuai koordinat tanpa pengaruh elemen lainnya·Relative, menyesuaikan dengan bagian sebelumnyaoMargin, menentukan jarak outeroPadding, menentukan jarak inner
marginDsElemenpaddingDiv (id, class)layoutGambar 2.1, Margin dan Padding pada CSS··Teksofont, jenis font yang digunakanotext, posisi textocolor, warna texsActionolink, setiap url linkoactive, url link aktifohover, saat url link disorotovisited, url link pernah dikunjungi
2.1Instruksi Praktek,1. Target membuat halaman web dengan form yang telah disesuikan CSS-nya sepertigambar berikut:Gambar 2.2, Layout dan Form2 dengan customize CSS2. Buatlah file HTML form2.html, dengan kode script HTML sebagaimana berikut:3. Buatlah file css2.css, dengan kode script CSS sebagaimana berikut:4. Amati tampilan web ketika anda melakukan perubahan-perubahan pada kode scriptCSS, jelaskan fungsi CSS pada tiap div yang menampilkan halaman sebagaimanacontoh diatas.
2.2Jawablah pertanyaan berikut:1. Jelaskan fungsi script CSS3 sebagaimana berikut dan jelaskan hasil keluaranpenggunaannya:·background-image: linear-gradient ·border-radius ·box-shadow 2. Apa perbedaan utama antara margin dan padding3. Jelaskan fungsi float dan position untuk penataan posisi elemen pada layout.4. Sebutkan 5 elemen CSS baru yang anda ketahui dan sebutkan fungsinya.2.3 TugasBuatlah desain halaman HTML & CSS dengan menu sebagaimana ditunjukkanGambar 2.2 dibawahGambar 2.3, Tugas desain HTML & CSS
Modul 3: Java ikasikanuntukmemberikan aksi secara dinamis pada halaman web. Kode javascript memiliki lojiksebagaimana bahasa pemrograman lainnya seperti C atau Java bahkan dapatmengadopsi konsep pemrograman berorientasi obyek.Seperti halnya pada CSS, kode java script dapat dituliskan langsung padahalaman web ataupun direferensikan dari file link diluar file halaman web.§ Untuk penulisan langsung, script type "text/javascript" // Java script code here.function add(){var a 1var b 2document.write (a b)return (a b)} script § Untuk penulisan link yang mereferensikan kode javascript, script src "http://googlecode.com/svn/jquery 1.5.js" /script Standar penulisan javascript mengikuti standar ANSI seperti halnya bahasa C.berikut adalah beberapa pola aturan penulisan kode bahasa pemrograman javascript:§ Tipe dataoPrimitif, tipe data dasar seperti boolean, string dan number.
script type "text/javascript" var myNumber 10;var myText ‘hello java scripter’;var test true; /script oAbstrak, tipe data abstrak seperti array, map. script type "text/javascript" !—// arrayvar myStudent new Array(10);myStudent[1] 'adi';myStudent[2] 'tina';for(i 1;i myStudent.length;i ){if(myStudent[i]! null)document.writeln(myStudent[i]);}// -- /script oSpesial, null, NaN, undefined script type "text/javascript" var myNumber 123456;document.write (myNumber);myNumber 'abcdef';document.write( isNaN( myNumber ) ? " is NaN":" is number" ); /script § Seleksi, penyeleksian kondisi seperti if dan case. script type "text/javascript" function test(number){if (number 0)alert(number " is zero");elsealert(number " is not zero");} /script input name "testNumber"onkeyup "test(this.value)"/
§ Perulangan, kondisi perulangan seperti while, for. script type "text/javascript" var n 1;while( n 5 ){document.write(n);n ;}for (i 1; i n; i ){document.write(i);} /script § Fungsi dan Obyek script type "text/javascript" var now new Date();document.write(now);document.write(" br ");var date now.getDate();document.write("tanggal: " date);document.write(" br ");var month now.getMonth();document.write("bulan: " month); /script 3.2Document Object Model (DOM),Penanganan properties, event dan method menggunakan Javascript.DOM merupakan property, event dan methode yang terdapat pada elemen an aturan CSS sesuai dengan kesamaanclassidmengidentifikasi nilai sesuai dengan id unik padaelemendocumentmereferensikan obyek HTML yang aktif untukmengakses elemen-elemen yang terkandung didalamnya
Windowmerepresentasikan HTML window pada web browserinnerHTMLmereferensikan pada seluruh kandungan teks danelemen HTML yang terkandung didalam sebuah elementertentuouterHTMLmereferensikan pada seluruh kandungan teks danelemen HTML yang terdapat diluar elemen tertentuparentElementmereferensikan parent elemen dari sebuah id elemenEventDeskripsionChangeperubahan dipicu oleh perubahan nilai pada elementertentu.onClickperubahan dipicu oleh penekanan mouse atau keyboardonFocusperubahan dipicu fokus oleh mouse atau keyboardonKeyUpperubahan dipicu setelah perubahan nilai oleh keyboardonMouseDownperubahan dipicu setelah kursor mouse menekan bagiantertentu pada elemen ataupun dokumen HTMLonMouseOverperubahan dipicu setelah kursor mouse keluar darielemen tertentu.onSelectdipicu perubahan nilai pada elemen selectoronSubmitperubahan dipicu penekanan tombol submit pada formMethodeDeskripsiclick()Memerintahkan aksi yang sama denganpenekanan tombol oleh mousecontains(element),Memerintahkan memilih elemen yangmengandung elemen tertentu didalamnya
insertAdjacentHTML(where,Memasukkan HTML (ataupun text) denganHTML)posisi BeforeBegin, AfterBegin, BeforeEnd, orAfterEnd pada elemen yang direferensikanremoveAttribute(attributeName, Menghapus elemen pada elemen ibuteName,Menambahkan atribut dan nilainya padavalue, caseSenstive).elemen yang direferensikan. html head title Using JavaScript DOM /title script language "javascript" function .innerHTML " h1 " teks " /h1 ";} /script /head body h1 Menggunakan Javascript DOM /h1 form input onkeyup "display(this.value)"/ /form div id "targetDiv" /div /body /html
3.3AJAX, Ashyncronous Javascript and XHTMLAJAX digunakan untuk mengoptimalkan perubahan data dan tampilan pada HTMLsecara MOCKUP dimana tidak diperlukan perubahan refresh pada halaman utama sehinggaperubahan dapat dilakukan secara lebih fleksibel dan efisien. Teknologi Ajax menggunakanDOM Javascript dan transfer XMLHttpRequest. Contoh penggunaan ajax seperti ditunjukkanpada Gambar 3.1.Gambar 3.1, implementasi AJAX pada Google search-engine script type "text/javascript" var XMLHttpRequestObject false;if (window.XMLHttpRequest) {XMLHttpRequestObject new XMLHttpRequest();}else if (window.ActiveXObject) {XMLHttpRequestObject newActiveXObject("Microsoft.XMLHTTP");}function getData(dataSource, divID){if(XMLHttpRequestObject) {var obj t.open("GET", e function(){if (XMLHttpRequestObject.readyState 4 &&XMLHttpRequestObject.status 200) {obj.innerHTML Object.send(null);}} /script
Pada penggunaan XMLHttpRequest, event didapatkan pada pengaksesan methodJavascript dari perubahan pada elemen HTML. XMLHttpRequest sendiri memiliki standarproperty dan method untuk penanganan pada saat permintaan client browser sampaididapatkannya balasan dari LstatusstatusTextPropertyDeskripsiabortAborts the HTTP request.getAllResponseHeadersReturns all the HTTP headers.getResponseHeaderReturns the value of an HTTP header.openOpens a request to the server.sendSends an HTTP request to the server.setRequestHeaderSets the name and value of an HTTP header.abortAborts the HTTP request.getAllResponseHeadersReturns all the HTTP headers.Contoh lengkap penggunaan AJAX dan pengaksesan dokumen XML
html head title Using Ajax with XML /title script language "javascript" var colors;var XHR false;if (window.XMLHttpRequest) {XHR new } else if (window.ActiveXObject) {XHR new ActiveXObject("Microsoft.XMLHTTP");}function getData(dataSource, divID){if(XHR) {XHR.open("GET", dataSource);var obj nge function(){if (XHR.readyState 4 && XHR.status 200) {var xmlDocument XHR.responseXML;colors rHTML "Here are the fetched colors: ul ";for (loopIndex 0; loopIndex colors.length;loopIndex ){obj.innerHTML " li " colors[loopIndex].firstChild.data " /li ";}obj.innerHTML " /ul ";}}XHR.send(null);}} /script /head body h1 Using Ajax with XML /h1 form input type "button" value "Fetch the Colors"onclick "getData('colors.xml', 'targetDiv')" /form div id "targetDiv" Ajax Here /div /body /html
3.4 Framework JavascriptDikarenakan pengaksesan DOM memerlukan pengkodean yang besar dengantingkat kesulitan yang tinggi, maka untuk mempermudah Javascript dalam pengaksesanDOM, desain UI serta Ajax maka dikembangkan berbagai framework Javascript sebagailibrary pembantu. Diantara framework JS yang terkenal adalah:·JQuery·Prototype·Yahoo·Ext JS·Dojo·MooToolsContoh penggunaan JS framework yang mudah dan singkat dengan penggunaanJQuery dengan sintaks xhr)). !DOCTYPE html html head script src "./js/jquery.min.js" /script script function load
Alur Bagi Peserta Praktikum : 1. Peserta praktikum menerima dan kemudian mempelajari modul praktikum. 2. Peserta praktikum mengerjakan tugas prepraktikum yang diberikan. 3. Peserta praktikum melakukan asistensi tugas prepraktikum. Asistensi ini digunakan sebagai bahan bagi asisten un
Praktikum Biologi Sel merupakan salah satu praktikum yang mendasari praktikum pada mata praktikum yang lain seperti Praktikum Teknik Analisa Biologi Molekuler, Praktikum Kultur Jaringan dan Sel Hewan serta Praktikum Imunologi. Petunjuk Praktikum Biologi Sel ini disusun sejak tahun akademik 2004/2006 yang saat itu hanya memuat tiga materi.
instruksi ke mesin, khususnya komputer. Bahasa pemrograman dapat digunakan untuk membuat program untuk mengontrol perilaku mesin atau untuk mengekspresikan algoritme. " Bahasa pemrograman adalah notasi untuk menulis program, yang merupakan spesifikasi dari suatu komputasi atau algoritma. (Aaby, Anthony (2001). Pengantar Bahasa Pemrograman)?
Pada praktikum bebas mahasiswa belajar mandiri untuk menentukan tanaman yang akan diidentifikasi kemudian mengkonsultasikan hasil identifikasi tanaman kepada dosen pengampu praktikum. Pada praktikum terbimbing, mahasiswa melaksanakan praktikum di kelas dimana setiap pelaksanaan praktikum hanya diberi waktu 100
2 AKD-217 Praktikum Kimia Analisis 4 2 16 3 AKD-218 Praktikum Kimia Organik 2 2 8 4 8AKD-219 Praktikum Kimia Anorganik 2 2 . Praktikan wajib membawa buku penuntun praktikum, alat tulis, alat hitung dan penunjang praktikum seperti
1. Sebelum melakukan praktikum, praktikan harus mempersiapkan diri untuk memahami tentang praktikum yang akan dikerjakan. 2. Praktikan harus hadir 15 menit sebelum praktikum dimulai. 3. Pada dasarnya tidak diadakan praktikum perorangan dan praktikan yang tidak dapat mengikuti praktikum harus ada surat keterangan dari dokter dan atau
Modul Praktikum Pemrograman Sistem STT “Adisutjipto ” 2018 Page 1 Praktikum Pemrograman Sistem . Praktikum 1 . Perintah Dasar Sistem Operasi . L. inux. POKOK BAHASAN: Format Instruksi pada Sistem Operasi Linux Perintah-Perintah Dasar pada Sistem Operasi Linux . TUJUAN BELAJAR: Setelah mempelajari materi dalam bab ini, mahasiswa diharapkan .
Praktikum Pemrograman Komputer P. Fisika Supardi, M.Si PRAKTIKUM 2 DASAR-DASAR MATLAB 2 1 Format Penulisan angka Dibawah ini diberikan format penulisan angka untuk berbagai keperluan. Format penulisan angka tersebut dapat diaktifkan melalui setting preference atau dituliskan langsung. Tabel 2
North & West Sutherland LHP – Minutes 1/3/07 1 NORTH & WEST SUTHERLAND LOCAL HEALTH CARE PARTNERSHIP Minutes of the meeting held on Thursday 1st March 2007 at 12:00 noon in the Ben Loyal Hotel, Tongue PRESENT: Dr Andreas Herfurt Lead Clinician Dr Alan Belbin GP Durness Dr Cameron Stark Public Health Consultant Dr Moray Fraser CHP Medical Director Mrs Georgia Haire CHP Assistant General .
