Professional Documents
Culture Documents
Pertemuan I
Target Pembelajaran
lingkup profesi desainer Web & profesi lainnya dalam tim pengembangan
Web
karakteristik Aplikasi Web
sejarah perkembangan internet & Web
konsep rekayasa Web
proses rekayasa Web
metoda-metoda rekayasa Web
kakas & teknologi yang digunakan dalam merekayasa Web
1
Modul Perkuliahan Pemrograman Web
Aplikasi – aplikasi yang secara umum ada pada Web [Pressman: 504]
2
Modul Perkuliahan Pemrograman Web
Web Developer merupakan tim yang mengerjakan pengembangan web. Terdiri dari
web desainer, web programmer, web administrator dan web master. Namun, web yang
sederhana mungkin saja dibuat oleh satu atau dua orang saja.
• Web Desainer, orang yang melakukan aktifitas desain interface, struktur, isi
(content), grafis, komponen web.
• Web Programmer, orang yang ahli dalam bahasa pemrograman web seperti
ASP, PHP, JavaScript dan Applet.
• Web Administrator, orang yang bertugas untuk memelihara web khususnya
pada server. Hal-hal yang harus dipahami secara mendalam oleh seorang web
administrator adalah tentang system operasi yang digunakan pada server, proses
penginstalan, memahami jaringan LAN, WAN, keamanan data server dan harus
dapat melakukan Troubleshooting.
• Web Master, orang yang menguasai semua bidang-bidang di atas, namun tidak
perlu harus menguasai secara mendetail, bertanggung jawab atas jalannya situs
web pada internet dan memastikan tidak ada kendala apapun pada situs web.
Tim web developer, bekerjasama dan melakukan pembagian tugas yang sesuai
dengan bidang masing-masing untuk menjamin kinerja dan web yang
dihasilkan akan semakin baik.
3
Modul Perkuliahan Pemrograman Web
Selain itu secara lebih khusus terdapat juga profesi web architec, web specialist,
web page developer dan web site developer [eko endrajit]
4
Modul Perkuliahan Pemrograman Web
• Sebuah ide untuk membuat jaringan global muncul untuk pertama kalinya pada
tahun 1963.
• Tahun 1965 muncul sebuah ide untuk membuat teknologi Hypertext. Hypertext
adalah teks yang mempunyai hubungan dengan teks lain.
• System RFC (Request for Cmments) dimulai pada tahun 1969.
• Pada bulan September 1970 terbentuk sebuah jaringan “global” untuk pertama
kalinya yang dinamakan ARPANET, yaitu sebuah jaringan computer yang terdiri dari
5 komputer yang menghubungkan antar kampus.
• Aplikasi E-mail diperkenalkan pada tahun 1972.
• Protokol TCP/IP yang digunakan untuk mengatur traffic jaringan diperkenalkan
dan didefinisikan pada tahun 1974.
• Tahun 1977 terdapat 111 komputer di internet
5
Modul Perkuliahan Pemrograman Web
• Protokol TCP/IP menjadi standar protokol untuk jaringan computer pada tahun
1980
• Tahun 1981 terdapat 213 komputer di internet.
• Tahun 1983 terdapat 502 komputer di internet.
• Tahun 1985 internet sudah menghubungkan beberapa jaringan (BIT-NET,
USENET, CSNET dan NSFNET) dan terdapat sekitar 1000 komputer yang
terhubung di internet.
• Tahun 1986 terdapat sekitar 5000 komputer di internet.
• Tahun 1987 terdapat sekitar 10000 komputer di internet.
• Tahun 1989 terdapat sekitar 100000 komputer di internet.
• Konsep WWW dan Browser dikembangkan dan dipakai di CERN (sebuah
Institusi Fisika Nuklir) pada buln Oktober 1990
• Tanggal 12 Desember 1991 sebuah web server yang pertamadi luar Eropa
dibuat.
• Tahun 1992 terdapat sekitar 1000000 komputer di internet.
• Bulan Januari 1993 terdapat 50 web server, 3 browser untuk computer Unix dan
WWW menggunakan 0,1% dari seluruh traffic di internet.
• Bulan Februari 199 diperkenalkan sebuah browser mosaic.
• Tanggal 30 April 1993 teknologi WWWsecara resmi digunakan untuk semua
orang.
• Bulan Oktober 1993 terdapat 200 web server.
• Bulan Agustus 1994 diperkenalkan Browser Netscape.
• W3C dibentuk pada tanggal 1 Oktober 1994.
• Spesifikasi HTML 4.01 diumumkan.
• Tahun 2001 terdapat sekitar 150-175 juta komputer di internet.
• Tahun 2002 terdapat lebih dari 200 juta komputer di internet dengan 840 juta
pemakai.
6
Modul Perkuliahan Pemrograman Web
1. Proses
Customer communication, dalam proses ini, kita akan dihadapkan pada dua tugas,
yaitu menganalisis bisnis dan formulasi. Menganalisis bisnis, berarti menentukan
perhitungan-perhitungan bisnis untuk aplikasi web yang akan dibuat, mengidentifikasi
stakeholder, potensi-potensi perubahan dalam lingkungan bisnis atau prediksi-prediksi
perkembangan dalam lingkungan bisnis, dan integrasi antara aplikasi web dengan
aplikai bisnis yang lainnya, basisdata, dan fungsi-fungsi yang terdefinisi. Dalam
formulasi, kita harus mampu mendeskripsikan permasalahan yang dimiliki atau yang
dimiliki stakeholder, dan aplikasi web yang dibuat harus menjadi solusi, dengan
menggunakan informasi yang tersedia.
7
Modul Perkuliahan Pemrograman Web
Modeling, mengadopsi atau menggunakan proses analisis dan desain perangkat lunak
konvensional dalam pengembangan aplikasi web.
Construction, membuat aplikasi berbasis web yang sudah dimodelkan dalam proses
modeling dengan menggunakan tool dan teknologi yang ada, yang sesuai dengan
kebutuhan.
Suatu keniscayaan, untuk melakukan modifikasi secara terus menerus misalnya dengan
berbagai perkembangan permasalahan terbarunya. Aplikasi web yang di buat harus
menjamin adaptable, sesuai dan bisa menjawab, menjadi solusi permasalahan yang
hadir berikutnya.
1. Take the time to understand business needs and product objectives, even if the
details of the WebApp are vague. Many WebApp developers erroneously believe
that vague requirements (which are quite common) relieve them from the need to be
sure that the system they are about to engineer has a legitimate business purpose.
The end result is (too often) good technical work that results in the wrong system
built for the wrong reasons for the wrong audience. If stakeholders cannot enunciate
a business need for the WebApp, proceed with extreme caution. If stakeholders
struggle to identify a set of clear objectives for the product (WebApp), do not proceed
until they can.
2. Describe how users will interact with the WebApp using a scenario-based ap-
proach. Stakeholders must be convinced to develop use-cases (discussed
throughout Part 2 of this book) to reflect how various actors will interact with the
WebApp. These scenarios can then be used (1) for project planning and tracking, (2)
to guide analysis and design modeling, and (3) as important input for the design of
8
Modul Perkuliahan Pemrograman Web
tests.
3. Develop a project plan, even if it is very brief. Base the plan on a predefined
process framework that is acceptable to all stakeholders. Because project timelines
are very short, schedule granularity should be fine; i.e., in many instances, the
project should be scheduled and tracked on a daily basis.
4. Spend some time modeling what it is that you're going to build. Generally, com-
prehensive analysis and design models are not developed during Web engineering.
However, UML class and sequence diagrams along with other selected UML
notation (e.g., state diagrams) may provide invaluable insight.
5. Review the models for consistency and quality. Formal technical reviews should
be conducted throughout a WebE project. The time spent on reviews pays important
dividends because it often eliminates rework and results in a WebApp that exhibits
high quality-thereby increasing customer satisfaction.
6. Use tools and technology that enable you to construct the system with as many
reusable components as possible. A wide array of WebApp tools are available for
virtually every aspect of WebApp construction. Many of these tools enable a Web
engineer to build significant portions of the application using reusable components.
7. Don't rely on early users to debug the WebApp-design comprehensive tests and
execute them before releasing the system. Users of a WebApp will often give it a one
chance. If it fails to perform, they move elsewhere-never to return. It is for this reason
that "test first, then deploy" should be an overriding philosophy, even if deadlines
must be stretched.
Defenisi
Persoalan
- Eksplorasi
Konsep
Analisa
Kebutuhan
- Spesifikasi
Desain
- Prototipe
Integrasi dan
Pengujian
Sistim
Rilis, Operasi 9
dan
pemeliharaan
Modul Perkuliahan Pemrograman Web
• Pertama yang perlu diketahui adalah kegunaan atau tujuan dari situs dibangun.
Secara seksama didefenisikan problem dari situs yang mengacu pada setiap goal
yang hendak dicapai.
• Setelah goal ditetapkan, kemudian ditentukan spesifikasinya. Spesifikasi ini
merupakan syarat-syarat untuk situs dimana dalam hal ini perlu dipertimbangkan
faktor audience (pemirsa).
• Langkah selanjutnya memulai pembangunan situs termasuk prototipe secara teknik
dan visual
• Selanjutnya tahap implementasi hasil dari disain dan melakukan pengujian (Integrasi
dan Pengujian).
• Terakhir adalah Rilis (Release) atau Publikasi situs. Kadang-kadang masih
diperlukan modifikasi berdasarkan umpan balik dari user.
10
Modul Perkuliahan Pemrograman Web
11
Modul Perkuliahan Pemrograman Web
Pengelolaan Dokumen
Hal ini memegang peranan penting dalam kemudahan me-maintenance sebuah
web.
Berikut adalah sebuah gambaran bagaimana pengaturan Folder:
Sediakan Dua Folder.
data-data/dokument Image, Hasil Scan, Ketikan, dll disimpan dalam Bahan
Web
Jangan campur adukkan dalam folder utama (Data WebSite yang akan di
UpLoad)
NamaWeb
Images
Gambar1.JPG
Gambar2.JPG
Logo.GIF Sebagai Halaman Cover / halaman
index.html Pertama,
Secara khusus untuk desain web, Dapat disampaikan secara ringkas bahwa
segmentasi proses desain web dalam pembuatan Artwork, difiturkan melalui :
1. Design Decisions
[Web Site Purpose – Audience – Domain Name]
12
Modul Perkuliahan Pemrograman Web
Selain Simplicity, lakukanlah selalu “ …. Keep it clean”, rancanglah web dengan rapih,
jelas dan sedetail mungkin, mulai dari struktur situs – benar-benar terstruktur dan
terorganisir, Interface – benar-benar mempunyai detail fungsi dalam mengakomodasi
system navigasi dan links sebagai penunjuk arah untuk user serta tampilan halaman
web yang bisa dibaca dengan mudah dan jelas oleh user sampai visualisasi
keseluruhan yang benar-benar menarik dan “tidak merugikan” para user.
Tujuan Desain
Pentingnya mengetahui tujuan dalam mendesain, acuan dan batasan ke
setiapsesi perancangan yang dilakukan, maka langkah awal sebelum
mendesain web, yang perlu diketahui adalah mengetahui “ tujuannya”. Apa
13
Modul Perkuliahan Pemrograman Web
yang menjadi tujuan membuat web tersebut. Statement-nya harus jelas dan
objektif. Perencanaan yang matang dan terstruktur merupakan kunci sukses
dalam mendesain web.
Simpulkanlah tujuan dengan memperhatikan hal tersebut di bawah ini :
Bagaimana bentuknya ?
14
Modul Perkuliahan Pemrograman Web
(maintenance)
15
Modul Perkuliahan Pemrograman Web
2. Metoda-metoda
Merupaka seperangkat kakas dan teknologi yang senantiasa berkembang dari waktu ke
waktu. Teknologi menekankan pada seperangkat bahasa pengkodean dan pemodelan
(contohnya HTML,VRML,XML), bahasa pemrograman seperti java, browser, tool -
toolmultimedia, site autoring tools, tool - tool koneksi ke data base, security tools,
servers and server utilities, site management and analysss tools.penjelasan lebih lanjut
dapat dipelajari melalui web site : www.wdlv.com , www.webddeveloper.com,
www.webknowhow.net, www.webreference.com
16
Modul Perkuliahan Pemrograman Web
Tugas
Carilah penjelasan untuk profesi-profesi berikut, secara lebih rinci, dalam tim
pengembangan web :
web architec, web specialist, web page developer dan web site developer
17
Modul Perkuliahan Pemrograman Web
Target pembelajaran :
Mahasiswa dapat :
18
Modul Perkuliahan Pemrograman Web
19
Modul Perkuliahan Pemrograman Web
Filosofi tersebut mengacukan bahwa pertama kali yang harus dipahami adalah
memahami Kaidah-nya lalu kemudian menerapkan konsep desain yang dibuat
dengan se-Simple mungkin – sesederhana mungkin dengan tidak mengurangi
daya tariknya. Simplicity sebagai salah satu aspek bahan kajian Kaidah Desain
Web yang cukup fundamental dalam mendesain web, merupakan salah satu
metodologi yang cukup prinsipil dan meng-global dalam merancang sebuah
situs, dimana dengan mengacukan simplicity merupakan motivator yang cukup
kompeten dan potensial serta memberi kemampuan signifikan bagi para web
designer dalam menampilkan sebuah situs web yang layak tampil di internet dan
relevan dengan fitur akses/download point.
Filosofi di atas merupakan tujuan yang diintisarikan dalam kaidah desain web.
Kaidah merupakan sebuah acuan dalam membuat sebuah konsep, untuk dikaji
berulang-ulag sebagai pemahaman lebih lanjut terhadap kontekstual merancang
sebuah web, agar web tersebut dibuat mudah dipelajari dan mudah digunakan
oleh user.
Kaidah disini bisa diartikan sebagai studi kelayakan bagi para web designer
dalam mempelajari atau memahami prosesi mendesain web dengan
mengadaptasikan dan menerapkan nilai-nilai kelayakan yang harus diterapkan
pada setiap hasil rancangannya.
… Web Design Principles – Basic Rules Designing Content, ……
20
Modul Perkuliahan Pemrograman Web
Dengan memahami kaidah Desain Web bagi seorang web designer, diharapkan
dapat membuat sebuah situs dengan tampilan situs yang mempunyai criteria-
kriteria seperti :
Tampilan yang menarik sesuai tema isi situs
Layout content page yang eye catching
Mudah dipelajari cara penggunaannya oleh pengunjung
Sistem navigasi yang mudah dan lugas digunakan oleh pengunjung
Mempunyai penggunaan dengan tingkat efisiensi yang tinggi (doing the
right things)
Mempunyai tingkat kesalahan minimal, dalam pengoperasian oleh user
Pengunjung akan merasa puas dalam mengakses situs tersebut dan
kemungkinan besar akan kembali untuk mengaksesnya
21
Modul Perkuliahan Pemrograman Web
Sepuluh (10) kaidah desain Web menurut Peter Kentie, sebagai berikut :
22
Modul Perkuliahan Pemrograman Web
Avoid busy, cluttered backgrounds that make the text in the foreground
hard to read.
Adjust the background colr to suit the background pattern. This prevents
a shock effect when opening the page.
Avoid web page that merely offer screen-filling plug—ins without
providing analternative HTML version for the user who does not have that plug-
in.
Always make background music an option ; unwanted sounds are
annoying.
Ensure readable text sizes, and do not use too many different fonts and
font sizes on the same page.
Avoid unnecessary GIF images when the same information can be
offered in text only HTML.
Be conservative with all-uppercase text-it’s difficult to read and is
associated with shouting.
Do not turn your site into “brochureware” ; try to avoid reusing exiting
information. The web is an interactive medium and requires a different approach.
Be wary of actions your visitors won’t expect. They won’t appreciate an
applet that loads suddenly or an unannounced pop-up window.
GIF animations are cool and frequently the only dynamic element on the
page. However, too many of them are not at all cool and speed suffers as well.
Regularly check your site. Pages that can no lnger be found and java or
javascript error messages aggravate the user.
23
Modul Perkuliahan Pemrograman Web
24
Modul Perkuliahan Pemrograman Web
Bandwidth
25
Modul Perkuliahan Pemrograman Web
Situs web yang baik harus mudah dipahami pada saat pertama kali pengguna
mengunjungi situs web tersebut karena pada saat itulah yang menentukan apakah
pengguna akan mengunjungi situs web itu lagi.
Dalam proses perancangan situs web, web desainer harus membuat navigasi
yang jelas bagi pengguna sehingga pengguna tidak tersesat karena link yang
disediakan tidak atau kurang jelas. Pengguna harus dapat menjelajahi semua
halaman dengan mudah. Pengguna harusmendapatkan informasi tentang
halaman yang sedang dikunjungi dan sudah dikunjungi. Perlu juga diperhatikan
kecepatan pengguna dalam mendapatkan informasi yang diinginkan misalnya
dengan cara mengatur link sedemikian rupa sehingga pengguna mendapatkan
26
Modul Perkuliahan Pemrograman Web
informasi kurang dari 5 kali melakukan klik. Hal ini sangat penting artinya untuk
kepuasan dan kenyamanan pengguna terhadap situs web.
Beberapa tips yang dapat digunakan untuk membuat struktur link dan
navigasi yang baik adalah:
• Usahakan agar navigasi yang digunakan dalam perancangan situs web
tetap konsisten.
• Sebelum membangun situs web sebaiknya membuat flowchart dari
struktur link dan navigasi.
• Mempertimbangkan prioritas dan jenis isi situs web dengan menempatkan isi
yang lebih penting pada halaman-halaman pertama dalam struktur link
dan navigasi.
7. Alat Bantu
• Site Map
Web desainer dapat menggunakan site map untuk mempermudah
pengguna dalam memahami tentang isi dan halaman pada situs web dan
dapat mempermudah pengembangan dan pemeliharaan situs web
karena hubungan antar halaman pada situs web mudah dipahami oleh
pihak-pihak yang terkait dalam pengembangan situs web seperti web
programmer, web administrator dan web desainer.
• Search Engine
27
Modul Perkuliahan Pemrograman Web
• Site Index
Selain search engine, site index juga memiliki fungsi yang sama, yaitu
untuk membantu pengguna dalam mencari informasi yang diinginkan.
• Help Sistem
Tugas web desainer untuk membuat suatu layanan Help sistem yang
dapat menjelaskan tentang hal-hal yang bersifat tutorial bagi pengguna,
misalrrya membuat sebuah halaman khusus yang berisi informasi tentang
penggunaan fasilitas e-mail, forum, cara mengakses, cara mendapatkan
password dan lain sebagainya.
8. Tampilan Visual
Tampilan visual sangat mempengaruhi persepsi awal pengguna mengenai suatu
situs web. Yang terpenting dalam tampilan visual adalah bagaimana tampilan
visual situs web dapat memberikan kesan tersendiri bagi pengguna atau secara
singkat desain yang dibuat memiliki keunikan tersendiri. Selain keunikan
tentunya juga harus dapat menarik bagi sebagian besar pengguna. Hal ini juga
penting artinya bagi tercapainya tujuan pembuatan situs web yaitu dapat menarik
pengunjung sebanyak-banyaknya ke situs web tersebut.
Beberapa hal yang perlu diperhatikan dalam pembuatan tampilan visual yang
menarik adalah sebagai berikut:
28
Modul Perkuliahan Pemrograman Web
Prinsip ini pada dasarnya adalah gabungan dari semua prinsip di atas karena
sebuah situs web yang baik harus dapat menggabungkan semua pinsip tersebut
menjadi satu kesatuan yang mendukung tujuan pembuatan situs web tersebut.
Aksesibilitas
User Oriented
Materi aksesibilitas yang berorientasi kepada Pengguna (user), meliputi :
Jadi hal ini patut menjadi pertimbangan agar situs yang kita rancang mempunyai sikap
toleransi tinggi sesuai fitur koneksi mereka, sebagai contoh : tidak mungkin kita
menambahkan fitur multimedia (e.g. movie, footage video atau file-file yang berat) untuk
29
Modul Perkuliahan Pemrograman Web
bisa diakses oleh mereka yang menggunakan koneksi dial-up, paling tidak fitur situs ini
pantas untuk mereka yang terbiasa dengan fitur koneksi cepat – high access.
Para netter sebagai pengakses internet di seluruh dunia yang akan membrowsing situs
kita, mempunyai perangkat akses yang berbeda-beda, contohnya : Platform yang
mereka gunakan- computer. Platform diklasifikasikan oleh 2 perangkat yang telah kita
kenal, yaitu Personal Computer (PC- Desktop, Laptop, Workstation, Server, dsb) dan
Mac (Macintosh). Keberadaan mekanisme fitur seperti tampilan monitor, kalibrasi warna
dan browser, pada masing-masing platform berbeda-beda. Hal ini patut dipertimbangkan
oleh para web designer, karena kemungkinan besar tampilan halaman situs yang kita
buat sesuai platform yang kita pakai ketika merancang, akan berbeda tampilannya di
platform mereka karena perbedaan tersebut. Berikut adalah contoh pertimbangan
sesuai konteks ini, diantaranya :
30
Modul Perkuliahan Pemrograman Web
Dengan mengetahui isu ini, kita dapat mem-prediksikan atau mengusahakan agar situs
yang kita rancang dapat tampil fleksible pada semua aspek isu Cross Platform ini,
dengan acuan desain yang bisa sebijaksana mungkin.
Optimasi
Pentingnya Optimasi
Acuan Langkah Optimasi
Pentingnya Optimasi
Para web designer patut bersikap bijaksana dalam mengolah tampilan dan fitur situs
sesuai hal tersebut. Langkah optimasi inilah untuk mengantisipasi isu-isu seputar akses
informasi yang layak disikapi oleh para web designer terutama masalah bandwidth yang
harus diperhitungkan.
Optimasi semua elemen desain web, mulai dari graphic berupa ilustrasi, image digital,
bitmap- vector sampai dengan format sound dan animasi multimedia, dengan
meminimalkan jumlah bytes setiap file graphic sekecil mungkin, tapi tetap menjaga
tampilan visual optilnya, merupakan langkah efficient design, dalam melayout sebuah
rancangan website, guna me-relevansi-kan kemudahan akses para user sebagai
internet audience-modem-based, dengan visualisasi yang layak dan maksimal.
31
Modul Perkuliahan Pemrograman Web
32
Modul Perkuliahan Pemrograman Web
Menyimpan pada setting optimasi kita, klik tanda +, pada optimize and swatches
33
Modul Perkuliahan Pemrograman Web
Manajemen Situs
Analoginya, Struktur Situs seperti terminal-panel atau file explorer di windows yang
sering kita gunakan dalam mengelompokkan dokumen masing-masing section di setiap
halaman web, juga memudahkan visualisasi aluran system navigasi dan alur links antar
halaman dokumen, selain itu untuk memudahkan explorasi file ketika editing halaman
web. Jika penyusunan dokumen web dalam struktur situs dapat terstrukturisasi dengan
baik, ini akan me-refleksi-kan aluran system navigasi dan links yang baik pula.
Contoh :
34
Modul Perkuliahan Pemrograman Web
35
Modul Perkuliahan Pemrograman Web
Contoh :
Contoh :
36
Modul Perkuliahan Pemrograman Web
Perlu diketahui pula bahwa proses uploading file untuk ditampilkan diinternet, juga
dikoordinasi oleh struktur situs ini. Jadi perancangan struktur situs dapat menentukan
proses final result yang benar-benar harus dipahami dalam penyusunannya oleh para
web designer.
Testing
Kelayakan Standarisasi
Validasi, Lint dan Browser Testing
Testing Script
Kelayakan Standarisasi
Acuan standarisai dari halaman web untuk layak tampil, harus diuji kelayakannya
melalui studi kelayakan standarisasi.
37
Modul Perkuliahan Pemrograman Web
Standarisasi ini dimaksudkan ntuk semua fitur web site dalam format bahasa HTML agar
sesuai dengan bahasa HTML yang standar.
Validasi
Memvalidasi HTML pada halamanweb adalah sesi pengujian jika ada technical error
pada fitur HTML. Layak dilakukan oleh para web designer dalam mengecek HTML yang
telah didesain jika ada kesalahan-kesalahan teknis dan perlu memperbaikinya.
Technical error disini diorientasikan pada kesalahan-kesalahan teknis HTML dalam hal
kompetibelitas pada browser. Ini adalah tugas dari validator sebagai toolsnya,
diantaranya adalah :
Linting
Merupakan metode lain dalam pemeriksaan kesalahan di halaman web. Jika validator
berguna untuk memeriksa kesalahan teknis pada fitur HTML, Linter berguna untuk
memeriksa kesalahan HTML secara keseluruhan, seperti missing ALT text, no HEIGHT
and WIDTH tags pada images, PERL dan sebagainya. Toolsnya dinamakan Linter,
diantaranya :
1. WWW.eblint
2. HTML Tidy
38
Modul Perkuliahan Pemrograman Web
Browser Testing
Menguji kompatibelitas halaman web merupakan langkah yang tepat bagi seorang
desainer web, dalam melihat tampilan desainnya pada multiple platforms, browser
versions, colr depths dan resolusinya. Gunakan Browser Testing ini untuk melihat
kelayakan tampilan desain kita di browser, diantaranya dengan menggunakan :
Testing Script
Jika halaman web ditambahkan dengan menggunakan fitur script, seperti Javascript,
Java, Perl, CGI dan sebagainya, pastikan halaman tersebut mendukung aksesibelitas.
Oleh karena itu, script yang akan digunakan harus diuji dulu, jalan tidaknya. Langkah
berikut merupakan contoh untuk menguji fitur script :
• Melihat Source
Pada setiap web desain tools, ada fitur opsi source. Disinilah kita bisa
melihat kesalahan penggunaan script yang mengakibatkan error
pages yang sering terjadi, kemudian kita dapat menentukan editing
untuk memperbaikinya pada source tersebut atau pada tools lain.
39
Modul Perkuliahan Pemrograman Web
script, perbaiki invalid code menjadi valid code, jika tidak menguasai
pemrograman script, beritahukan kepada web programmer untuk
memperbaikinya.
Browser Support/Availiability
Tidak ada salahnya bagi seorang web designer mengetahui berbagai jenis browser yang
mendukung fitur desain web, untuk menambah khasanah kreatif tampilan atau idea sites
yang diinginkan.
40
Modul Perkuliahan Pemrograman Web
41
Modul Perkuliahan Pemrograman Web
membantu kemudahan akses informasi para user. Ini pun disesuaikan dengan
kepentingan masing-masing situs dalam tujuannya.
Untuk informasi lebih detail bisa anda dapatkan di Confusion on the Net.
Desain Komunikasi Visual sebagai bagian dari Apply Art, merupakan akar
klasifikasi/korelasi pemahaman antara Desain Grafis, Desain Multimedia dan
Desain Web. Desain Komunikasi Visual yang menjembatani perancangan
tampilan materi promosi dan publikasi, diaplikasikan kepada 2 media, yaitu
media cetak dan media interaktif dimana media cetak oleh Desain Grafis dan
media interaktif oleh Desain Multimedia seperti animasi, video/audio editing dan
TV Commercial/Broadast, dsb.
42
Modul Perkuliahan Pemrograman Web
Seiring berkembangnya teknlogi internet, media world wide web dijadikan media
alternative sebagai media untuk promosi dan publikasi, maka aplikasi desain komunikasi
visualpun bertambah, konsep visualnya tidak hanya kepada media cetak atau media
interaktif saja, juga merambah ke media internet dengan world wide web-nya. Dari
sinilah Desain Web mulai dikenal sebagai media visualisasi yang menjembatani
tampilan materi promosi dan publikasi untuk aplikasi internet – world wide web.
Begitupun ketika sesi men-desain struktur situs dan interface. Dimana adanya
acuan-acuan yang diprinsipkan seperti kepada Graphic Design Principles dan
Multimedia Design Principles.
43
Modul Perkuliahan Pemrograman Web
44
Modul Perkuliahan Pemrograman Web
Kuis
1. Yang dimaksudkan dengan filosofi Usability Concept Maker dalam prosesi mendesain
web adalah :
2. Dengan memahami kaidah desain web, seorang desianer web diharapkan memiliki rambu
– rambu untuk menghasilkan Kriteria – kriteria berikut, kecuali :
3. Menurut Peter Kentie Fasilitas search engine, merupakan implementasi dari kaidah
berikut :
45
Modul Perkuliahan Pemrograman Web
4. Untuk menghasilkan sebuah situs web yang menarik namun tetap cepat di-load maka
sangat diperlukan untuk memperhatikan atau melakukan hal-hal berikut, kecuali :
5. Sebuah situs web yang sering memakai Java Script tidak dapat dilihat dengan optimal
melalui sebuah browser yang tidak mengijinkan pemakaian JavaScript. Untuk itu
dapat diusahakan dengan tidak memakai fitur-fitur yang mungkin "bermasalah", salah
satunya sangat dianjurkan :
a. User oriented
b. optimasi
c. manajemen situs
d. testing
e. dimensi halaman
a. TV kabel
b. Satelit
c. Dedicated line
d. Dial up
e. Radio
8. Dalam aksesibilitas, kesesuaian dengan flatform berikut (tampilan monitor 640 x 480,
46
Modul Perkuliahan Pemrograman Web
800 x 600, 1024 x 768 ; kalibrasi warna monitor indexed color, 256 color, 8,16,32 bit ;
tampilan yang compatibel dengan browser internet explorer, netscape, Opera, Neoplanet
dsb) termasuk pada kaidah
a. User oriented
b. optimasi
c. manajemen situs
d. testing
e. dimensi halaman
10. Berikut yang merupakan bagian dari kaidah testing adalah, kecuali :
a. Kelayakan standardisasi
b. Validasi
c. Linting
d. Testing script
e. Browser support/availability
Tugas :
47
Modul Perkuliahan Pemrograman Web
Pertemuan IV dan V
Dasar-Dasar HTML
Pengantar
Sejarah HTML
Tag HTML
Struktur dokumen HTML
Fungsi dan Pengunaan tag-tag dalam HTML
Link Absolut dan Relatif
Mendesain web dengan teknik Frame
Mendesain web menggunakan teknik table
Memasukkan objek gambar dan teks
Membuat link pada halaman web
Target
Mahasiswa dapat :
48
Modul Perkuliahan Pemrograman Web
Pendahuluan
HTML adalah singkatan dari Hypertext Markup Language
Suatu file HTML merupakan file text yang diapit oleh tag-tag markup
Tag markup memberitahu Web browser bagaimana halaman ditampilkan
Suatu file HTML haruslah mempunyai ekstensi sebagai htm atau html
html lebih disukai
htm digunakan karena masih ada server dengan sistim operasi
lama yang hanya dapat menangani nama “8+3” (8 characters,
dot, 3 characters)
Suatu file HTML dapat dibuat menggunakan editor text sederhana seperti notepad
Sejarah HTML
Tim Berners-Lee pada tahun 1989 yang mengusulkan suatu sistim
dokumen hypertext untuk digunakan oleh organisasi riset nuklir Eropa,
CERN. HTML yang didasarkan Standard Generalized Markup Language
(SGML) belakangan iperkenalkan pertama kali dalam sistim yang disebut
"The World-Wide Web" (WWW) pada Oktober 1990. Kronologi
perkembangan HTML sejak diperkenalkan pertamakali hingga saat ini
diperlihatkan sbb:
Oktober tahun 1990: pertama kali oleh Berners-Lee's
Musim panas tahun 1991: spesifikasi HTML di rilis pada Internet
49
Modul Perkuliahan Pemrograman Web
Desember 1998: draft untuk formulasi HTML dalam XML (eXtensible Markup
Language) dengan codename ‘Voyager’ di rilis
Januari 1999: draft kerja awal XHTML 1.0 di rilis
Desember 1999: XHTML 1.0 menjadi usulan rekomendasi W3C
September 1999: draft kerja awal XHTML 1.1 di rilis
Januari 2000: XHTML 1.0 direkomendasi oleh W3C
April 2001: XHTML 1.1 menjadi usulan rekomendasi W3C
Mei 2001: XHTML 1.1 direkomendasi oleh W3C
Tag HTML
Tag HTML digunakan untuk mark elemen HTML
Tag HTML ditempatkan dalam kurung, < … >
Kebanyakan tag HTML merupakan pasangan, <b> dan </b> (tag awal
dan akhir)
Text yang berada diantara kedua tag adalah unsur content (tag bertindak
sebagai container)
50
Modul Perkuliahan Pemrograman Web
Tag harus tersusun secara baik (properly nested ) yaitu tidak saling
tumpang tindih
Tag tidak case sensitive; <b> mempunyai arti sama dengan <B>
XHTML adalah case sensitive dan harus lower case
tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari suatu file
HTML
tag <TITLE> dan </TITLE>, Tulisan yang berada diantara tag ini akan ditampilkan
oleh browser pada bagian title yang mana merupakan title dari jendela browser.
51
Modul Perkuliahan Pemrograman Web
tag <BODY> </BODY> , menandai awal dan akhir dari badan dokumen
HTML yang ditampilkan pada browser
Fungsi dan Pengunaan tag-tag dalam HTML
Menformat Text
HTML mengandung tag yang dapat digunakan memformat tampilan tulisan
pada halaman anda. Tag yang digunakan a.l:
tag <i> dan </i> untuk membuat text italic
tag <b> and </b> untuk membuat text boldface
tag <h1>, <h2>, <h3>, <h4>, <h5>, atau <h6> untuk header dalam
dokumen dengan ukuran font besar untuk <h1>dan terkecil untuk
<h6> (lebih lanjut lihat modul)
Contoh :
Kode Hasil
<H1>Heading 1</H1> Heading 1
<H2>Heading 2</H2> Heading 2
52
Modul Perkuliahan Pemrograman Web
Citation <CITE></CITE>
Code <CODE></CODE>
Definition <DFN></DFN>
Division <DIV></DIV>
Emphasis <EM></EM>
Heading <H?></H?>
Variable <VAR></VAR>
Blinking <BLINK></BLINK>
Bold <B></B>
Center <CENTER></CENTER>
Italic <I></I>
Preformatted <PRE></PRE>
53
Modul Perkuliahan Pemrograman Web
Strikeout <S></S>
Subscript <SUB></SUB>
Superscript <SUP></SUP>
Typewriter <TT></TT>
Underline <U></U>
54
Modul Perkuliahan Pemrograman Web
Whitespace
Whitespace adalah karakter yang tidak diprint seperti: space, tab,
newline, dan lainnya
HTML memperlakukan whitespace sebagai pemisah kata, dan baris text
secara otomatis mengikuti lebar dari halaman
Untuk pidah baris halaman dapat digunakan tag <br> atau tag <p> dan
</p> membuat kumpulan text dalam satu pragraf
Tag <pre> dan </pre> dapat digunakan pada text sehingga whitespace
ditampilkan sesuai dengan apa yang ditulis (“pre” singkatan dari
“preformatted”)
55
Modul Perkuliahan Pemrograman Web
Contoh :
Kode Hasil
2 < 3, adalah benar<br> 2 < 3, adalah benar
3 > 4, adalah salah
3 > 4, adalah salah
Lists
Ada dua jenis list HTML yaitu ordered, <ol> to </ol>, dan unordered, <ul> to
</ul>
Ordered lists menggunakan nomor: 1, 2, 3, ...
Unordered lists menggunakan bullets (•)
Elements dari list adalah <li> dan </li>
Contoh :
Kode Hasil
<ul> • Sugar
<li>Sugar</li> • Chips
<li>Chips</li> • Caffeine
<li>Caffeine</li> • Chocolate
<li>Chocolate</li>
</ul>
Attributes
Beberapa tag mempunyai atribut untuk tambahan informasi:
56
Modul Perkuliahan Pemrograman Web
<ol>
<li>Sugar</li>
<li>Chips</li> 1. Sugar
<li>Caffeine</li> 2. Chips
3. Caffeine
<li>Chocolate</li>
4. Chocolate
</ol>
<ol type="A">
<li>Sugar</li>
<li>Chips</li> A. Sugar
<li>Caffeine</li> B. Chips
C. Caffeine
<li>Chocolate</li>
D. Chocolate
</ol>
57
Modul Perkuliahan Pemrograman Web
Links
Untuk me link kehalaman lain: <a href="URL"> ke halaman </a>
Contoh: I'm taking <a href =
"http://www.stmik.edu/news/index.html">Berita </a> alumni.
Link text secara otomatis akan berwarna biru dan underlined
(purple jika telah dikunjungi)
Untuk link ke bagian lain dari halaman yang sama:
Insert nama anchor: <a name="refs">References</a>
Lakukan link: <a href="#refs">My references</a>
Untuk link dari halam lain ke nama anchor:
<a href="PageURL#refs">My references</a>
• Untuk link e-mail <A HREF="mailto:psagala@yahoo.com">Mail!</A>
Images
Images (pictures) bukanlah bagain dari halaman HTML; HTML hanya
memberitahu dimana image di temukan
<img src="URL" alt="text description" width="150" height="100">
Atribut src attribute yang diperlukan sedang lainnya optional
The URL alamat dan nama image seperti:.gif, .jpg, atau .png
Atribut alt memberi text sebagai representasi jika image gagal
ditampilkan
Atribut height and width jika disertakan memperbaiki tampilan image
(jika ukuran salah maka tampilan gambar akan terganggu)
Tidak ada tag akhir </img> karena tag <img> bukan container
58
Modul Perkuliahan Pemrograman Web
<IMG SRC="URL"ALIGN=LEFT|RIGHT|
Alignment
TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
Tables
Tables digunakan untuk mengorganisir informasi dalam dua dimensi
(baris dan kolom)
59
Modul Perkuliahan Pemrograman Web
Suatu <table> dapat terdiri satu atau lebih baris table, <tr>
Setiap baris table terdiri dari satu atau lebih cell table data, <td>, atau
cell table header, <th>
Perbedaan antara <td> dan <th> hanya pada format text. Pada
cell <th> otomatis dalam format “boldface” dan “centered”
Borders (batas) pada cell dapat diberi dengan menambah attribute:
border="1" pada tag awal <table>
Contoh table:
Kode Hasil
<table border="1">
<tr>
<th>Name</th> <th>Phone</th>
</tr>
<tr>
<td>Dick</td> <td>555-1234</td>
</tr>
<tr>
<td>Jane</td> <td>555-2345</td>
</tr>
<tr>
<td>Sally</td> <td>555-3456</td>
</tr>
</table>
60
Modul Perkuliahan Pemrograman Web
<TD ALIGN=LEFT|RIGHT|CENTER
Alignment
VALIGN=TOP|MIDDLE|BOTTOM>
Frames
Frames adalah cara membagi jendela browser dalam beberapa bingkai.
Halaman HTML terpisah dapat ditempatkan pada tiap bingkai.
Framesets
Frames ditempatkan dalam frameset
Gantikan <body>...</body> dengan <frameset>...</frameset>
Pada Tag awal <frameset> gunakan atribut:
rows= nilai dari tinggi baris _
cols= nilai dari lebar koloml_
Nilai dapat berupa % atau pixel)
61
Modul Perkuliahan Pemrograman Web
Kode
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET cols="20%,80%">
<FRAMESET rows="30%,70%">
<FRAME src="overview-frame.html" name="packageListFrame">
<FRAME src="allclasses-frame.html" name="packageFrame">
</FRAMESET>
<FRAME src="overview-summary.html" name="classFrame">
</FRAMESET>
<NOFRAMES>
<H2>If you see this, you have frames turned off!</H2>
</NOFRAMES>
</HTML>
62
Modul Perkuliahan Pemrograman Web
Forms
<form> merupakans tag HTML yang digunakan untuk rancangan interface
63
Modul Perkuliahan Pemrograman Web
tag <input>
Kebanyakan elemen form menggunakan tag input dengan,
type="..." berupa: text, checkbox, radio, password, hidden,
submit, reset, button, file, atau image
Parameter tag input a.l:
name: nama dari elemen
value: “value”/nilai dari elemen
readonly: nila yang tak bisa dirobah
64
Modul Perkuliahan Pemrograman Web
disabled: user tak dapat melakukan apa pun pada elemen ini
A text field:
Hasil:
A password field:
Hasil:
textarea
65
Modul Perkuliahan Pemrograman Web
Hasil:
Buttons
• A submit button:
<input type="submit" name="Submit" value="Submit">
A reset button:
<input type="reset" name="Submit2" value="Reset">
• A plain button:
<input type="button" name="Submit3" value="Push Me">
Hasil:
Keterangan:
Submit : kirim data
Reset : restore semua lemen form ke keadaan semula
Button : ada aksi dari java script
Checkboxes
Kode Hasil
66
Modul Perkuliahan Pemrograman Web
A checkbox:
<input type="checkbox"
name="checkbox”
value="checkbox"
checked>
Radio buttons
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name="radiobutton" value="myValue2"
checked>
female
Hasil:
A menu or list:
<select name="select">
<option value="red">red</option>
<option
value="green">green</option>
<option
value="BLUE">blue</option>
</select>
Contoh lengkap:
Kode Hasil
<html>
<head>
<title>Get Identity</title>
<meta http-equiv="Content-Type"
67
Modul Perkuliahan Pemrograman Web
content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender"
value="m">Male
<input type="radio" name="gender"
value="f">Female</p>
</form>
</body>
</html>
<FORM ENCTYPE="multipart/form-
File Upload
data></FORM>
<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|
Input Field RADIO
|IMAGE|HIDDEN|SUBMIT|RESET">
68
Modul Perkuliahan Pemrograman Web
Option <OPTION>
<TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL>
Wrap Text
</TEXTAREA>
69
Modul Perkuliahan Pemrograman Web
Hasil:
70
Modul Perkuliahan Pemrograman Web
Ada dua cara menuliskan lokasi atau alamat yang dilink/dipanggil tersebut yaitu
dengan menuliskan secara lengkap URL yang dilink seperti (link _bsolute):
http://www.hair.net/~squiggie/LottzaStuff/other/images/chef.gif
Dalam contoh ini chef.gif adalah nama objek gambar yang dipanggil/dilink
dengan lokasi seperti ditunjukkan diatas. Sedangkan file yang memanggil adalah
page1.html.
Cara lain adalah dengan menuliskan alamat relatif seperti berikut (link relatif):
71
Modul Perkuliahan Pemrograman Web
72
Modul Perkuliahan Pemrograman Web
SRC=”../../../other/images/chef.gif”
browser. Adapun URL absolut digunakan jika gambar tadi terletak di server yang
sama sekali berbeda.
Dalam hal ini kita sudah menyertakan aplikasi PHP triad yang memiliki aplikasi server
lokal Apache secara include.sehingga kita bisa menampilkan hasil desain pada browser
menggunakan URL dengan alamat lokal contoh : http://localhost/www.stmik-
subang.com
73
Modul Perkuliahan Pemrograman Web
74
Modul Perkuliahan Pemrograman Web
Folder situs stmik-subang.com, memiliki sub folder image sebagai tempat menyimpan
gambar – gambar yang kita butuhkan, sebagai berikut :
75
Modul Perkuliahan Pemrograman Web
76
Modul Perkuliahan Pemrograman Web
77
Modul Perkuliahan Pemrograman Web
Code frame dalam HTML untuk mendesain halaman web yang kita inginkan :
78
Modul Perkuliahan Pemrograman Web
<frameset cols="20%,60%,20%">
</frameset>
</frameset>
79
Modul Perkuliahan Pemrograman Web
80
Modul Perkuliahan Pemrograman Web
Tampilan pada browser untuk rangka frame di ata adalah sebagai berikut :
81
Modul Perkuliahan Pemrograman Web
Membuat file baru untuk mendefinisikan bagian header adalah dengan header.html
82
Modul Perkuliahan Pemrograman Web
Misalnya kita baru mengeset atau mengisikan warna #FFFFFF pada header :
83
Modul Perkuliahan Pemrograman Web
84
Modul Perkuliahan Pemrograman Web
Kita akan menampilkan header yang telah di desain menggunakan makromedia firework
Maka pada toolbar klik image lalu cari dan klik gambar yang kita inginkan
85
Modul Perkuliahan Pemrograman Web
86
Modul Perkuliahan Pemrograman Web
Gambar yang telah kita pilih terlihat dalam kode dengan identitas IMG
Perubahan yang terdapat pada code harus di save agar tampil hasil perubahannya
dalam browser. Perubahan yang belum disimpan (di save akan terlihat dari) tanda
merah pada filenya.
87
Modul Perkuliahan Pemrograman Web
Perubahan yang telah disimpan akan terlihat dengan warna biru pada nama filenya :
88
Modul Perkuliahan Pemrograman Web
Tampak header dengan warna background dan gambar header yang kita inginkan :
89
Modul Perkuliahan Pemrograman Web
90
Modul Perkuliahan Pemrograman Web
91
Modul Perkuliahan Pemrograman Web
92
Modul Perkuliahan Pemrograman Web
<BODY bgcolor="#FFFFFF">
93
Modul Perkuliahan Pemrograman Web
</BODY>
94
Modul Perkuliahan Pemrograman Web
95
Modul Perkuliahan Pemrograman Web
<BODY bgcolor="#FFFFCC">
96
Modul Perkuliahan Pemrograman Web
<CENTER><IMG SRC="C:/apache/htdocs/stmik-
subang.com/image/yudhistira_iklan4.gif" WIDTH="100" HEIGHT="350" BORDER="0"
ALT=""></CENTER>
</BODY>
Hyperlink juga dapat berupa gambar, seperti gambar image PHP dalam menu :
97
Modul Perkuliahan Pemrograman Web
98
Modul Perkuliahan Pemrograman Web
index.html
<HTML>
<HEAD>
</HEAD>
99
Modul Perkuliahan Pemrograman Web
<frameset cols="20%,60%,20%">
</frameset>
</frameset>
</HTML>
Menu.html
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#FFFFFF">
100
Modul Perkuliahan Pemrograman Web
</BODY>
</HTML>
101
Modul Perkuliahan Pemrograman Web
<HTML>
<HEAD>
</HEAD>
<BODY>
<tr bgcolor=white>
</tr>
</table>
</BODY>
</HTML>
102
Modul Perkuliahan Pemrograman Web
103
Modul Perkuliahan Pemrograman Web
<BODY>
<tr bgcolor=white>
</tr>
</table>
</BODY>
Setelah di save pada editor edit plus, maka pada browser di refresh akan menghasilkan
tampilan sebagai berikut :
104
Modul Perkuliahan Pemrograman Web
KUIS
105
Modul Perkuliahan Pemrograman Web
106
Modul Perkuliahan Pemrograman Web
BLE>
A. B.
Pada kode HTML, apa yang membedakan secara mendasar kedua hasil
format table pada browser diatas (pilih dua) :
a. Rowspan pada tabel A untuk kolom yang berisi nilai 1 sama dengan 4
dan pada tabel B sama dengan 3
b. Rowspan pada tabel A untuk kolom yang berisi nilai 1 sama dengan
tiga dan pada tabel B sama dengan 4
c. Colspan pada tabel A untuk kolom yang berisi nilai 2 sama dengan 2
dan colspan pada tabel B sama dengan 2
d. Colspan pada tabel A untuk kolom yang berisi nilai 2 sama dengan 3
dan colspan pada tabel B sama dengan 3
e. Colspan pada tabel A untuk kolom yang berisi nilai 2 sama dengan 2
dan colspan pada tabel B sama dengan 3
107
Modul Perkuliahan Pemrograman Web
108
Modul Perkuliahan Pemrograman Web
109
Modul Perkuliahan Pemrograman Web
Tugas :
Dengan menggunakan teknik tabel dalam kode HTML Buatlah desain halaman web
dengan layout sebagai berikut
header
(lebar=500, tinggi=80)
Menu :
Profil
110
Modul Perkuliahan Pemrograman Web
(lebar=100, tinggi=320)
Footer
(lebar=500,tinggi=60)
Keterangan :
Profile dan Produk merupakan hyperlink untuk navigasi, dengan target penyimpanan
informasi pada isi(content).Informasi atau objek bebas.
111
Modul Perkuliahan Pemrograman Web
Pertemuan VI
• Text Field
• List/menu
• Radio Button
• Button
• TextArea
• Koneksi data base menggunakan PHPMYADMIN
• Pembuatan database menggunkana DBMS MYSQL
• Membuat file-file PHP
Tujuan
• Text Field
• List/menu
• Radio Button
• Button
• TextArea
• Koneksi data base menggunakan PHPMYADMIN
• Pembuatan database menggunkana DBMS MYSQL
• Membuat file-file pengolah data dengan PHP
112
Modul Perkuliahan Pemrograman Web
FORM
Sebuah halaman web biasanya menyertakan sebuah form untuk meminta pemakai
memasukkan informasi untuk persyaratan tertentu. Fungsi form ini secara umum adalah
sebagai jembatan untuk berinteraksi dengan pengunjung website. Contoh penggunaan
form pada website antara lain:
• Buku tamu
• Form pendaftaran
• Jajak pendapat
• Search engine
• Password Login
• Web Chat
Pada dasarnya fungsi sebuah form adalah sebagai input data. Data yang telah
dimasukkan tersebut diproses server melalui script server side seperti PHP atau ASP,
kemudian disimpan pada database . kemudian ditampilkan kembali pada halaman
website menggunakan script berbasis server, antara lain:
113
Modul Perkuliahan Pemrograman Web
word, bentuknya hampir sama dengan Text Field, bedanya hanya ketika diketik
sesuatu di atasnya yang muncul hanyalah bulatan hitam.
Text Area: digunakan sebagai input data yang banyak, ditampilkan lebih dari satu baris.
kecil di dalamnnya.
List/Menu: berisikan daftar pilihan yang diberikan oleh user, namun user hanya dapat
memilih satu dari beberapa pilihan tersebut.
114
Modul Perkuliahan Pemrograman Web
Jump Menu: bentuknya hampir sama dengan List/Menu, bedanya hanya daftar pilihan
di dalamnya memiliki link ke halaman lain.
Submit Button: merupakan tombol yang dapat digunakan untuk mulai memproses input
data yang dimasulclcan user
Reset Button: merupakan tombol yang dapat digunakan untuk mereset semua data
yang telah diketik ke dalam form sehingga form tersebut akan bersih kembali dari data
yang telah diketik user sebelumnya
115
Modul Perkuliahan Pemrograman Web
File Field: berbentuk kotak panjang disertai tombol browse di laiarurya. Ini digunakan
untuk mencari file yang terdapat dalam komputer karena berfungsi sebagai input file.
Penggunaannya lebih sering untuk meng-upload sebuah file.
Hidden Field: merupakan input data yang tersembunyi, biasanya nilainya sudah
ditentukan, misalnya sebagai input waktu, maka nilainya adalah waktu saat form
tersebut disubmit untuk diproses. Ketika memasukkan Hidden Field pada dokumen
website, yang tampil hanyalah sebuah simbol hidden fieldnya saja
116
Modul Perkuliahan Pemrograman Web
Dalam kondisi file sedang dibuka Hapus selamat Sehingga posisi kursor
datang ..... seperti ini
Terlihat ada kotak merah bergaris putus-putus, lalu tuliskan Input Data Pengunjung
117
Modul Perkuliahan Pemrograman Web
Tekan enter pada keyboard, sehingga letak kursor berada di bawah tulisan Input Data
Pengunjung
<div align="center">
<p> </p>
</div>
</form>
lalu dari menu insert pilih table, sehingga keluar dialog sebagai berikut :
Klik OK
118
Modul Perkuliahan Pemrograman Web
Lalu kembali pada menu insert > Form Object dan pilih Text Field
119
Modul Perkuliahan Pemrograman Web
Simpan kursor pada kolom ketiga dari baris kedua, untuk password pilih TextField
120
Modul Perkuliahan Pemrograman Web
Pada baris ketiga, untuk jenis kelamin, kita akan membuat objek form, radio button.
121
Modul Perkuliahan Pemrograman Web
Untuk baris keempat, email, kembali menggunakan Textfield, hasil dan propertiesnya
sebagai berikut :
Untuk baris kelima, tanggal lahir, kita akan menggunakan Objek Form List/Menu.
122
Modul Perkuliahan Pemrograman Web
Seleksi atau klik Objek List/Menu, lalu klik List values... pada properties
Diperoleh dialog, dan isiskan sebagi berikut (untuk semua tanggal dari 1 s/d 31) :
123
Modul Perkuliahan Pemrograman Web
Simpan kursor di sebelah kanan Objek List/Menu tanggal lahir, pilih Objek list/Menu
kembali
Lalu isikan pada dialog sebagi berikut (untuk semua nama bulan) :
124
Modul Perkuliahan Pemrograman Web
Coba Anda seleksi List/menu bulan dan lakukan klik pada window Code , maka
akan diperoleh skrip sebagai berikut :
<option value="-">-
<option value="Januari">Januari
<option value="Februari">Februari
<option value="Maret">Maret
<option value="April">April
<option value="Mei">Mei
<option value="Juni">Juni
<option value="Juli">Juli
<option value="Agustus">Agustus
<option value="September">September
<option value="Oktober">Oktober
<option value="November">November
<option value="Desember">Desember
</select>
125
Modul Perkuliahan Pemrograman Web
<option value="Ya">ya
<option value="Tidak">tidak
</select></td>
Berikut Objek Form pada baris ke delapan dengan properties dan list values serta
skripnya :
126
Modul Perkuliahan Pemrograman Web
<option value="-">-</option>
<option value="bekasi">bekasi</option>
<option value="purwakarta">purwakarta</option>
<option value="karawang">karawang</option>
<option value="subang">subang</option>
</select></td>
Pada baris kesembilan kita akan membuat Objek Form berupa Textarea, untuk
menuliskan komentar atau pesan.
127
Modul Perkuliahan Pemrograman Web
Pada baris kesepuluh, letakkan kursor pada kolom ketiga, pilih Button.
128
Modul Perkuliahan Pemrograman Web
Hasilnya :
129
Modul Perkuliahan Pemrograman Web
130
Modul Perkuliahan Pemrograman Web
Skript keseluruhan :
<TABLE>
<TR>
<TD width="159">nama</TD>
<TD width="10">:</TD>
</TR>
<TR>
<TD>password</TD>
131
Modul Perkuliahan Pemrograman Web
<TD>:</TD>
</TR>
<TR>
<TD>jenis kelamin</TD>
<TD>:</TD>
perempuan </TD>
</TR>
<TR>
<TD>email</TD>
<TD>:</TD>
</TR>
<TR>
<TD>tanggal lahir</TD>
<TD>:</TD>
132
Modul Perkuliahan Pemrograman Web
133
Modul Perkuliahan Pemrograman Web
</TD>
</TR>
<TR>
<TD>tempat lahir</TD>
<TD>:</TD>
</TR>
<TR>
<TD>:</TD>
</select></TD>
</TR>
<TR>
<TD>kewarganegaraan</TD>
134
Modul Perkuliahan Pemrograman Web
<TD>:</TD>
</SELECT> </TD>
</TR>
<TR>
<TD>:</TD>
</TR>
<TR>
<td></td>
<td></td>
<TD></TD>
</TR>
<TR colspan=3>
<td > </td>
<td> </td>
</TR>
</TABLE>
</FORM>
</td>
</tr>
135
Modul Perkuliahan Pemrograman Web
136
Modul Perkuliahan Pemrograman Web
137
Modul Perkuliahan Pemrograman Web
<body>
<p>
Indonesia
I nggris
Jepang
Korea </p>
</form>
</body>
Seperti pembuatan halaman bukutamu.html, dari halaman index.html hapus objek pada
content dan save as dengan proses_input.php
138
Modul Perkuliahan Pemrograman Web
139
Modul Perkuliahan Pemrograman Web
<!--DWLayoutTable-->
<TR>
<TD width="6"> </TD>
<?= $_POST["nama"]?>
</TD>
</TR>
<TR>
<TD valign="top">:</TD>
<TD valign="top">
<?= $_POST["pass"]?>
</TD>
140
Modul Perkuliahan Pemrograman Web
</TR>
<TR>
<TD valign="top">:</TD>
<TD valign="top">
<?= $_POST["jenkel"]?>
</TD>
</TR>
<TR>
<TD valign="top">:</TD>
<TD valign="top">
<?= $_POST["email"]?>
</TD>
</TR>
<TR>
<TD valign="top">:</TD>
<TD valign="top">
<?= 2004-$_POST["tahun"]?>
</TD>
</TR>
<TR>
<TD valign="top">:</TD>
<TD valign="top">
<?= $_POST["tempat"]?>
</TD>
141
Modul Perkuliahan Pemrograman Web
</TR>
<TR>
<TD valign="top">:</TD>
<TD valign="top">
<?= $_POST["member"]?>
</TD>
</TR>
<TR>
<TD valign="top">:</TD>
<TD valign="top">
<?= $_POST["asal"]?>
</TD>
</TR>
<TR>
<TD valign="top">
<?= $_POST["pesan"]?>
</TD>
</TR>
</TABLE>
142
Modul Perkuliahan Pemrograman Web
143
Modul Perkuliahan Pemrograman Web
144
Modul Perkuliahan Pemrograman Web
145
Modul Perkuliahan Pemrograman Web
146
Modul Perkuliahan Pemrograman Web
Biarkan jendela berikut tetap aktif, yang menandakan aplikasi server aktif :
147
Modul Perkuliahan Pemrograman Web
148
Modul Perkuliahan Pemrograman Web
Pertemuan VII
Target
Mahasiswa dapat :
149
Modul Perkuliahan Pemrograman Web
Pendahuluan
Dengan menggunakan CSS kita bisa saja mengubah tampilan font, tombol, dsb yang
ada dalam satu homepage hanya dengan melakukan perubahan pada sebuah file CSS
saja.
Contoh :
150
Modul Perkuliahan Pemrograman Web
<HTML>
<HEAD>
<BODY>
<?BODY>
< /HTML>
Dengan script HTML diatas, kita akan mendapatkan sebuah bentuk format tulisan yang
standar, format yang diakui oleh standar HTML. Sekarang kita ingin mengubah semua
bagian teks yang merupakan Heading 1 (diantara tag Hl) dari yang semula berwarna
standar menjadi berwarna biru. Sekarang, masukkan aturan CSS berikut
H1{color:blue}
Tentunya kita tidak bisa begitu saja menuliskan aturan CSS tersebut. Yang perlu kita
lakukan adalah meletakkan aturan tersebut diantara tag <style> dan </style>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<style type="text/css">
H1 {color:blue}
</style>
<BODY>
<BODY>
</HTML>
151
Modul Perkuliahan Pemrograman Web
Pada Dreamweaver, cara menambah aturan CSS pada style yang sudah ada, adalah
dengan cara :
Dengan ditambahkan aturan CSS tersebut, kita telah mengubah warna dari elemen H1
menjadi berwarna biru.
Dalam aturan CSS diatas, dikenal adanya selector(“H1”) dan deklarasinya (“color:
biue”). Deklarasinya mempunyai dua property yaitu (“color”) dan nilainya (“blue”)
Cara Penulisan
Untuk mengintegrasikan style yang telah kita definisikan dalam CSS ke dalam sebuah
halaman HTML, kita bisa menggunakan beberpa cara. Kita bisa memilih cara
pemasukan CSS sesuai dengan kebutuhan kita. Beberapa contoh (dari contoh cara
memasukkan style CSS ke da!am sebuah halaman H TML adalah :
Cara ini adalah cara yang paling mudah jika kita ingin semua halaman HTML kita
mempunyai rupa yang sama, misalnya untuk paragraph mempunyai font verdana dan
berwama hitam dengan latar putih.
Yang perlu kita lakukan adalah membuat sebuah fiie *.css yang berisi style yang ingin
kita buat. Sesudah fiie tersebut ada, lalu di dalam file HTML kita berikan link ke halaman
css tersebut.
152
Modul Perkuliahan Pemrograman Web
Ini yang kita tuliskan kedalam file css kita, misalnya simpan dengan nama style.css.
Hl ( color: blue }
Kemudian jangan lupa, di dalam file HTML kita panggil file css tersebut dengan
memakai tag "link", untuk lebih lengkapnya silahkan lihat contoh berikut.
<HEAD>
</HEAD>
<BODY bgcolor="#FFFFFF">
style.CSS.</p>
</BODY>
</HTML>
Pada Dreamweaver, cara menambah aturan CSS pada style yang sudah ada, adalah
dengan cara :
153
Modul Perkuliahan Pemrograman Web
5. Pada Dialog box Save Style File as, ketik"mystyle.css", lalu Save
6. Pada Tag , pilih p
7. Pastikan categori/ Type dan pilih Font : Verdana, Size : 12
Pada contoh diatas, semua style yang ada di file style.css akan dipakai oleh halaman
HTML yang memanggil file tersebut. Dengan cara ini, maka semua paragraph yang ada
di halaman HTML kita akan bisa diseragamkan.
Semua teks, berwarna hitam, berukuran 12 dan mempunyai font*_ Verdana, arial,
Helvetica.
Penulisan font-family: Verdana, Arial, Helvetica; maksudnya jika font verdana tidak
tersedia pada komputer pemakai, font yang dipakai selanjutnya ada!ah font Arial, jika
tidak ada juga maka yang dipakai adaiah font Helvetica, jika tidak ada juga maka font
yang digunakan adalah font standar HTML.
154
Modul Perkuliahan Pemrograman Web
Dengan cara ini, kita bisa memakai style ini berulang-ulang untuk halaman-nalaman
lainnya yang ingin kita kenakan style seperi yang ada di file css. Menuliskan
langsung ke sebuah halaman HTML (Embeded Sheet).
Jika kita hanya ingin menggunakan sebuah style ke dalam sebuah halaman HTML dan
tidak ingin berpengaruh ke halaman HTML lainnya, kita tuliskan
langsung style yang kita pakai ke halaman yang bersangkutan. Contohnya adalah sama
dengan pada contoh pertama.
155
Modul Perkuliahan Pemrograman Web
Hl ( color: blue}
</STYLE>
<TITLE>Contoh CSS dari file External</TITLE>
</HEAD>
<BODY bgcolor="#ffffff">
<H1> Cascading Style Sheet</H1>
<P>Mencoba menuliskan halaman HTML dengan memanggil file
style.CSS.</p>
<P>Semua tag Paragraph akan mempunyai bentuk yang sama</P>
<P>Kita tidak perlu memakai tag FONT lagi</P>
</BODY>
</HTML>
hasil yang didapat akan sama dengan cara meletakkan style pada halaman eksternal
Yang membedakan adalah style ini tidak akan bisa dipakai oleh halaman HTML lainnya.
Mengimport C55 dari sebuah file css ke halaman HTML (Imported Style Sheet)
Kombinasi dari kedua cara diatas adalah dengan mengimpor style yang berada di file
css lain ke halaman HTML yang ingin kita beri style. Impor maksudnya disini adalah
memasukkan style di File lain tersebut menjadi satu bagian dari Fi!e HTML
156
Modul Perkuliahan Pemrograman Web
Hasilnya akan sama dengan yang sebelumnya, yang membedakannya adalah cara
pemanggilannya dimana disini seakan-akan seluruh style yang ada di file style.css
diambil dan diletakkan di dalam file HTML kita.
157
Modul Perkuliahan Pemrograman Web
Cara penulisan ini adalah cara yang dipakai jika kita membutuhkan style yang spesifik
terhadap tiap tag HTML. Atribut-atribut style langsung diterapkan pada tag yang ingin
dikenai style. Sebagai contoh adalah style yang dipakai khusus pada sebuah tag font.
</HEAD>
<BODY bgcolor="#FFFFFF">
<P>
</P>
158
Modul Perkuliahan Pemrograman Web
</BODY>
</HTML>
Pemakaian cara penulisan style seperti ini jauh lebih fleksibel jika dibandingkan cara
yang lain karena kita menentukan secara spesifik tag apa saja yang ingin kita beri style.
Namun pemakaian ini akan mengurangi banyak keunggulan yang dimiliki oleh CSS,
misalnya dengan menggunkan cara file eksternal, kita hanya perlu mengubah satu file
CSS untuk mengubah seluruh halaman HTML yang menggunakan sebuah style tertentu.
Tapi dengan cara ini kita harus mengedit satu persatu tag HTML kita.
Menggunakan class dan selector pada CSS akan lebih mempermudah pengaturan
model dokumen kita. Sebagai contoh jika kita mempunyai dua paragraph. Paragraph
pertama berisi teori dan paragraph kedua berisi contoh. Kta bisa menggunakan dua
class berbeda untuk masing-masing paragraph. Untuk lebih jelasnya, mari kita lihat
159
Modul Perkuliahan Pemrograman Web
Perhatikan bahwa kita menggunakan 2 class disini, contoh dan teori;. C1ass tersebut
kita pakai untuk menspesifikan dari tiap paragraph.
160
Modul Perkuliahan Pemrograman Web
Kita bisa saja menggunakan class ini untuk tag HTML lainnya.
Penulisan class pada pendeklarasian style adalah dimulai dengan "."(titik) yang artinya
semua yan memakai class ini akan memakai style tersebut. Sebagai contoh lagi, kita
ingin sebuah class yang bernama sama yaitu "contoh" tapi mempunyai style yang berbeda
dan hanya berlaku untuk Heading 1(<H1>), hal ini berarti "H1.contoh" tersbut menjadi
sebuah selector untuk Heading 1 dan class "contoh". Kita tambahkan pada file HTML
tadi sbb :
<style type="text/css">
<!--
#cccccc}
-->
161
Modul Perkuliahan Pemrograman Web
</style>
</HEAD>
<BODY bgcolor="#FFFFFF">
</BODY>
</HTML>
Class yang kita pakai adalah khusus untuk Heading 1, sehingga tidak akan
mempengaruhi tag yang lainnya adalah sebagai berikut :
Pada prakteknya kita akan banyak menggunakan Class dan selector ini.
162
Modul Perkuliahan Pemrograman Web
Yang dimaksud dengan Pseudo Gass adalah class dalam CSS yang sebenarnya sudah
ada dan tidak perlu kita definisikan lagi karena termasuk standar CSS (Pseudo= semu).
Contoh Pseudo Class adalah class yang kita pakai dalam mengubah perilaku link.
Kita bisa menentukan style dari link yang ada di halaman HTML kita dengan cara ini.
Misalnya kita ingin menghilangkan garis bawah yang biasanya selalu ada pada teks
yang merupakan link.
Dengan menggunakan style a:link semua link akan berupa seperti yang kita
deklarasikan dalam class a:link. Sedangkan ketika kita mengarahkan mouse ke link
yang kita beri class a:hover yang terjadi adalah link yang ditunjuk akan berubah sesuai
dengan apa yang dideklasrasikan disitu.
163
Modul Perkuliahan Pemrograman Web
• :focus artinya style berlaku ketika mouse difokuskan pada bagian link tersebut
Berikut ini adalah beberapa contoh style yang banyak dipakai dalam mendesain sebuah
halaman web. Untuk lebih lengkapnya, anda bisa melihat refcrensinya di situs World
Wide Web Confederation (W3C) yang beralamat di http://www.w3c.org .
background
background-attachment
background-color
background-image
background-position
bacnground-repeatat
borderbcrder-bcttom
bcrder-colcr
border-style
bcrder-width
font
font-family
font-size
font-size-adjust
font-style
font-variant
font-weight
list-styie
list-style-image
164
Modul Perkuliahan Pemrograman Web
list-style-position
list-style-type
position
size
text-align
text-decoration
text-indent
text-transform
KUIS
H1 {color:blue}
</style>
165
Modul Perkuliahan Pemrograman Web
<BODY>
<BODY>
a. H1
b. <Body>
c. <P>
d. H1 dan <body>
e. <Body> dan <P>
2 <HEAD>
.
<TITLE>Contoh CSS</TITLE> </HEAD>
<style type="text/css">
H1 {color:blue}
</style>
<BODY>
<BODY>
3 <HTML>
.
<HEAD>
<style type="text/CSS">
166
Modul Perkuliahan Pemrograman Web
pre{color:blue}
</style>
</HEAD>
<BODY>
<pre>
<b color="red">
</b>
</pre>
</BODY>
</HTML>
a. aku anak pintar berwarna biru, sedangkan aku anak pintar juga
berwarna merah
b. aku anak pintar berwarna biru, dan aku anak pintar juga
berwarna biru juga
c. aku anak pintar berwarna merah, sedangkan aku anak pintar
juga berwarna biru
d. aku anak pintar berwarna merah, dan aku anak pintar juga
berwarna merah
e. aku anak pintar berwarna biru, sedangkan aku anak pintar juga
berwarna merah dan biru
4 <HEAD>
.
<style type="text/CSS">
.unggas{color:red}
.mamalia{color:blue}
</style>
</HEAD>
<BODY>
167
Modul Perkuliahan Pemrograman Web
</BODY>
168
Modul Perkuliahan Pemrograman Web
Hl ( color: blue}
</STYLE>
<TITLE>Contoh CSS dari file External</TITLE>
</HEAD>
2 HEAD>
</HEAD>
169
Modul Perkuliahan Pemrograman Web
Tugas :
Buatlah kode CSS untuk mengatur link, hyperlink yang ada pada bar menu di
tugas pertemuan VII, masing-masing sebagai berikut :
1. :visited
2. :hover
3. :active
4. :focus
170
Modul Perkuliahan Pemrograman Web
171