perancangan web libre

53
8/18/2014 1 PERTEMUAN 1 KONSEP DASAR WEB PENGERTIAN WEB World Wide Web (www) atau web adalah sebuah sistem penyebaran informasi melalui internet. Informasi yang dikirimkan dapat berupa teks, suara(audio), animasi, gambar dan bahkan dalam format video yang dapat diakses melalui sebuah software yang disebut browser, seperti internet explorer, mozilla firefox, opera dan lain-lain. PENGERTIAN INTERNET Internet merupakan kependekan dari kata “Internetwork”, yang berarti rangkain komputer yang terhubung menjadi beberapa rangkaian jaringan. Sistem komputer terhubung secara global dan menggunakan TCP/IP sebagai protokol. FASILITAS INTERNET Beberapa fasilitas dan layanan Internet yang saat ini sudah sangat populer : Layanan File Transfer Protocol Yaitu layanan yang memungkinkan pengguna bertukar, menyalin, dan menempatkan file data di Internet. Layanan E-mail Yaitu layanan yang memungkinkan pengguna mengirim dan menerima pesan dalam bentuk surat elektronik. Layanan Internet Relay Chat (IRC) atau Chatting Yaitu layanan yang memungkinkan pengguna berkomunikasi dan berinteraksi secara langsung dengan pengguna internet lainnya Layanan World Wide Web(WWW) Yaitu layanan yang memungkinkan pengguna melakukan surfing internet untuk memperoleh suatu data atau informasi tertentu. Ghoper Layanan pencarian file dan informasi Telnet Layanan interaksi secara remote antar komputer yang terhubung di internet VoIP Layanan komunikasi suara FASILITAS INTERNET JENIS-JENIS WEB Dalam Pengelompokan jenis web, lebih diarahkan berdasarkan kepada fungsi, sifat atau style-nya dan bahasa pemrograman yang digunakan. Berdasarkan sifat atau style-nya: 1. Web Statis 2. Web Dinamis

Upload: henbecks-ir

Post on 05-Feb-2016

79 views

Category:

Documents


0 download

DESCRIPTION

Henbecks

TRANSCRIPT

Page 1: Perancangan Web Libre

8/18/2014

1

PERTEMUAN 1

KONSEP DASAR WEB

PENGERTIAN WEB

World Wide Web (www) atau web adalah sebuah sistem penyebaran informasi melalui internet. Informasi yang

dikirimkan dapat berupa teks, suara(audio), animasi, gambar dan bahkan dalam format video yang dapat

diakses melalui sebuah software yang disebut browser, seperti internet explorer, mozilla firefox, opera dan lain-lain.

PENGERTIAN INTERNET

Internet merupakan kependekan dari kata “Internetwork”, yang berarti rangkain komputer yang terhubung menjadi

beberapa rangkaian jaringan. Sistem komputer terhubung secara global dan menggunakan TCP/IP sebagai protokol.

FASILITAS INTERNET

Beberapa fasilitas dan layanan Internet yang saat ini sudah sangat populer :

• Layanan File Transfer Protocol

Yaitu layanan yang memungkinkan pengguna bertukar,

menyalin, dan menempatkan file data di Internet.

• Layanan E-mail

Yaitu layanan yang memungkinkan pengguna mengirim dan menerima pesan dalam bentuk surat elektronik.

• Layanan Internet Relay Chat (IRC) atau Chatting

Yaitu layanan yang memungkinkan pengguna

berkomunikasi dan berinteraksi secara langsung dengan pengguna internet lainnya

• Layanan World Wide Web(WWW)

Yaitu layanan yang memungkinkan pengguna melakukan surfing internet untuk memperoleh suatu data atau informasi tertentu.

• Ghoper

Layanan pencarian file dan informasi

• Telnet

Layanan interaksi secara remote antar komputer yang

terhubung di internet

• VoIP

Layanan komunikasi suara

FASILITAS INTERNET JENIS-JENIS WEB

Dalam Pengelompokan jenis web, lebih diarahkan berdasarkan kepada fungsi, sifat atau style-nya dan

bahasa pemrograman yang digunakan.

Berdasarkan sifat atau style-nya:

1. Web Statis

2. Web Dinamis

Page 2: Perancangan Web Libre

8/18/2014

2

JENIS-JENIS WEB (Lanjutan)

1. Web Statis

Merupakan website yang content-nya sangat jarang diubah. Bahasa pemograman yang digunakan adalah HTML dan belum memanfaatkan database. Misalnya:

web profile organisasi.

2. Web Dinamis

Merupakan yag menyediakan content atau isi yang

selalu berubah-ubah setiap saat. Bahasa pemograman yang digunakan antara lain PHP, ASP, .NET dan memanfaatkan database MySQL. Misalnya detik.com.

JENIS-JENIS WEB (Lanjutan)

Berdaskan pada fungsinya, website terbagi atas:

1. Personal Website

Website yang berisi informasi pribadi seseorang.

2. Commercial Website

Website yang dimiliki oleh sebuah perusahaan yang bersifat bisnis.

3. Government Website

Website yang dimiliki oleh instansi pemerintahan, pendidikan yang bertujuan memberikan pelayanan kepada pengguna

4. Non-Profit Organization website

Dimiliki oleh organisasi yang bersifat non-profit atau tidak

bersifat bisnis.

JENIS-JENIS WEB (Lanjutan)

Berdasarkan bahasa pemrograman yang digunakan:

1. Server Side

Merupakan website yang menggunakan bahasa pemrograman yang tergantung kepada tersedianya server.

Seperti PHP, ASP, .NET dan lain sebagainya. Jika tidak ada server, maka website yang dibuat dengan bahasa pemrograman tersebut tidak dapat berfungsi sebagaimana

mestinya.

2. Client Side

Website yang tidak membutuhkan server dalam menjalankannya, cukup diakses melalui browser saja.

Misalnya HTML

ELEMEN DAN KOMPONEN WEBSITE

1. Title 11. Menu

2. Nama Domain 12. Breadcumb

3. Alamat URL 13. Form

4. Link/Tautan 14. Sharing Button

5. Header 15. PopUp

6. Konten/Isi

7. Sidebar

8. Widget

9. Footer

10.NavBar

ELEMEN DAN KOMPONEN WEBSITE

1. Title

Title adalah judul atau nama dari sebuah halaman web. Letaknya di titlebar browser.

2. Nama Domain

Nama domain adalah nama alias dari sebuah website. Nama domain disewa dari pencatat/register domain per tahun.

Domain digunakan agar manusia mudah untuk mengingat nama sebuah website. Kadangkala nama domain juga

mewakili nama sendiri, nama brand, produk maupun perusahaan. Contoh: www.bsi.ac.id.

ELEMEN DAN KOMPONEN WEBSITE

3. Alamat URL

URL singkatan dari Uniform Resource Locator. Jika sebuah halaman web kita diibaratkan dengan rumah, maka URL ini adalah alamat lengkap rumah kita.

Letaknya ada di addressbar browser. Setiap Halaman web memiliki url yang unik dan berbeda. Format URL

bermacam-macam. Namun, semuanya selalu diawali dengan nama domain website tersebut.

Page 3: Perancangan Web Libre

8/18/2014

3

4. Link/tautan

Jika kita ibaratkan lagi bahwa sebuah halaman web adalah rumah, maka link atau tautan ini adalah pintu/gerbang/lorong yang menuju ke halaman lain baik

itu yang masih satu web maupun halaman di web yang berbeda.

Contoh Link :

Ini adalah link untuk kehalaman utama(syakirurohman.net),

silahkan klik

Pengarahan link diatur dalam kode html <a href=”alamat url halaman website tujuan”>Anchor teks/ Teks yang

dilink</a>.

ELEMEN DAN KOMPONEN WEBSITE ELEMEN DAN KOMPONEN WEBSITE

5. Header

Header adalah bagian atas dari sebuah website. Biasanya berisi nama situs, logo dan deskripsinya. Header berfungsi untuk menampilkan identitas utama

dari sebuah situs.

6. Konten/Isi

Konten atau isi sebuah situs berupa informasi dan artikel yang biasanya terletak dibagian tengah. Artikel yang sedang anda baca ini juga adalah bagian dari konten.

Konten adalah bagian terpenting dari sebuah website. Konten di halaman utama sebuah web biasanya adalah

daftar posting.

ELEMEN DAN KOMPONEN WEBSITE

7. Sidebar

Sidebar adalah bagian sisi kanan maupun kiri sebuah website dan terletak di sisi konten. Sidebar biasanya berisi informasi tambahan dan navigasi dari sebuah

website. Sidebar diisi dengan widget-widget. Keberadaan sidebar ini bersifat opsional sesuai

keinginan dan desain web masing-masing. Ada yang hanya satu kolom(tanpa sidebar), ada yang hanya satu di sebelah kanan ataupun kiri, dan ada juga yang

dikedua sisi memiliki sidebar.

ELEMEN DAN KOMPONEN WEBSITE

8. Widget

Widget adalah sebuah daerah pada website yang isinya berupa informasi tertentu dan memiliki

fungsi tertentu pula. Widget tidak harus terletak pada bagian

sidebar. Widget juga bisa terletak pada bagian atas posting, footer bahkan header (walaupun sangat

jarang).

ELEMEN DAN KOMPONEN WEBSITE

9. Footer

Footer adalah bagian dasar atau paling bawah dari sebuah website. Fungsi utamanya adalah sebagai kaki dan berisi informasi hak cipta, kepemilikan, link

tambahan, sumber daya, sponsor dan kredit sebuah website bahkan menampilkan widget.

ELEMEN DAN KOMPONEN WEBSITE

Page 4: Perancangan Web Libre

8/18/2014

4

10. Navbar

Navbar adalah kependekan dari Navigation bar. Navbar merupakan bagian website yang biasanya terletak di bagian paling atas dan bersifat melayang/fixed (Selalu

terlihat walaupun di scroll). Navbar berfungsi untuk mempermudah navigasi sebuah situs. Biasanya berisi

link-link penting yang mungkin dikunjungi dalam situs itu.

ELEMEN DAN KOMPONEN WEBSITE

11. Menu

Menu adalah bagian dari website yang berisi link-link utama yang mengarah pada halaman tertentu di sebuah website. Secara fungsi hampir sama dengan navbar

yaitu untuk mempermudah navigasi di web. Namun, teknisnya sedikit berbeda karena biasanya menu tidak

melayang. Menu biasanya terletak di bawah atau di atas header.

ELEMEN DAN KOMPONEN WEBSITE

12. Breadcrumb

Breadcrumb merupakan sebuah elemen website berbentuk memanjang yang isinya adalah informasi tentang letak, posisi dan atau jalur halaman yang

sedang dikunjungi dalam website itu. Breadcrumb biasanya hanya ada di halaman spesifik/single seperti

halaman posting dan sejenisnya. Biasanya terletak di atas judul posting.

ELEMEN DAN KOMPONEN WEBSITE

13. Form

Form dalam bahasa indonesia disebut formulir. Sebagaimana

formulir kertas, form pada website juga berfungsi untuk penginputan data dari

pengakses website baik itu yang bersifat wajib maupun opsional.

Form pada website memiliki berbagai cara input seperti

Textfield, Password, ComboBox, Textarea, Radio, Checkbox,

Button dan lain-lain.

ELEMEN DAN KOMPONEN WEBSITE

14. Sharing button bar (Bar tombol berbagi)

Sharing button bar adalah tempat dimana berbagai jenis tombol berbagi ke media sosial berada. Tombol berbagi ini berfungsi

untuk membagikan posting ataupun isi pada halaman yang dikunjungi ke media

sosial pengunjung. Tombol yang paling sering ada adalah tombol like facebook, tweet Twitter, dan +1 Google+.

ELEMEN DAN KOMPONEN WEBSITE

15. Popup

Popup adalah sebuah jendela yang berisi informasi tertentu yang ingin disampaikan oleh pemilik situs.

Ketika muncul jendela popup maka elemen lain di halaman website itu

tidak akan berfungsi sebelum popup itu ditutup lagi. Ketika sebuah jendela popup muncul, biasanya

elemen lain di halaman situs itu tertutupi warna hitam transparan.

ELEMEN DAN KOMPONEN WEBSITE

Page 5: Perancangan Web Libre

8/18/2014

5

Tema dan Tujuan Pembuatan Website

Tema dan tujuan pembuatan website dibedakan menjadi 7 kategori :

1. E-Commerce(Electronic Commerce)

Proses hubungan dagang bisnis ke bisnis, memudahkan pembelian atau penjualan antar perusahaan-perusahaan,

shoping online. Proses pembayaran menggunakan Online Processing Credit Card, Money Transfer atau Cash on Delivery.

Tema dan Tujuan Pembuatan Website

2. Alat Pemasaran (Marketing Tool)

Situs ini menampilkan informasi produk atau jasa dari suatu perusahaan untuk menjaring minat konsumen. Sifatnya promosi, tampilannya simple tapi menarik. Situs ini

tidak menyediakan penjualan online, tetapi pengunjung diberi informasi dimana bisa mendapatkan produk atau

jasa yang dipromosikan

Tema dan Tujuan Pembuatan Website

3. E-Learning

Proses belajar mengajar dapat dilakukan secara online, tanpa harus bertatap muka antara siswa dengan pengajar (Sekolah Virtual).

4. Nilai Tambah(Value Added)

Website hanya digunakan sebagai informasi tambahan. Biasanya memuat informasi umum tentang perusahaan

atau lembaga, terkadang dibiarkan tanpa updating berkala.

Tema dan Tujuan Pembuatan Website

5. E-News

Berisi berita-berita yang dapat diakses di seluruh dunia. Informasinya pun tentu saja lebih cepat dari berita yang dimuat koran atau majalah konvensional.

6. Komunitas

Situs ini mewadahi pengguna untuk bisa bertukar informasi atau bahkan berdiskusi melalui Forum online.

7. Personal

Berisi tentang informasi pribadi seseorang.

Page 6: Perancangan Web Libre

8/18/2014

1

PERTEMUAN 2

REKAYASA PERANGKAT LUNAK

DAN REKAYASA WEB

PRINSIP-PRINSIP

REKAYASA PERANGKAT LUNAK (RPL)

Pada awal pengembangan perangkat lunak, para pembuat program (programmer) langsung melakukan pengodean

perangkat lunak tanpa menggunakan prosedur atau tahapan pengembangan perangkat lunak. Dan ditemuilah

kendala-kendala seiring dengan perkembangan skala sistem (sistem perangkat yang semakin besar).

SDLC atau Software Development Life Cycle atau sering disebut juga System Development Life Cycle adalah

proses mengembangkan atau mengubah suatu sistem perangkat lunak dengan menggunakan model-model dan metodologi yang digunakan orang untuk mengembangkan

sistem-sistem perangkat lunak sebelumnya.

TAHAPAN-TAHAPAN PADA SDLC

Tahapan-tahapan yang ada pada SDLC secara global adalah :

1. Inisiasi (Initiation)

2. Pengembangan Konsep Sistem (System Concept

Development)

3. Perencanaan (Planning)

4. Analisis Kebutuhan (Requirements Analysis)

5. Desain (Design)

6. Pengembangan (Development)

7. Integrasi dan Pengujian (Integration and Test)

8. Implementasi (Implementation)

9. Operasi dan Pemeliharaan (Operations and Maintenance)

10. Disposisi (Disposition)

MODEL SDLC

SDLC memiliki beberapa model dalam penerapan tahapan prosesnya. Beberapa contoh modelnya sebagai berikut :

1. Model Waterfall

Model Waterfall adalah model SDLC yang paling

sederhana. Cocok untuk pengembangan perangkat lunak dengan spesifikasi yang tidak berubah-ubah.

2. Model Prototipe

Model Prototipe cocok digunakan untuk menggali

spesifikasi kebutuhan pelanggan secara lebih detail tetapi beresiko tinggi terhadap membengkaknya biaya dan waktu proyek.

MODEL SDLC (Lanjutan)

3. Model Rapid Application Development (RAD)

Model RAD cocok digunakan pengembangan perangkat lunak yang bersifat inkremental (berkembang sedikit demi sedikit secara teratur) terutama untuk waktu

pengerjaan yang pendek.

4. Model Iteratif

Model Iteratif merupakan gabungan dari model Waterfall dan model Prototipe.

5. Model Spiral

Model Spiral cocok digunakan untuk pengembangan aplikasi dengan skala besar tetapi target waktu dan

biaya tidak terlalu mengikat.

REKAYASA WEB

Rekayasa Web adalah sebuah aplikasi yang menggunakan pendekatan sistematis, disiplin, dan terukur untuk pengembangan, operasi dan pemeliharaan aplikasi berbasis Web (Web-Based Applications).

Rekayasa Web adalah subdisiplin dari rekayasa perangkat lunak yang membantu menyediakan metodologi untuk merancang, mengembangkan, memelihara, dan melibatkan aplikasi Web.

Powel (1998) mengatakan bahwa sistem berbasis Web “melibatkan campuran antara print publishing (penerbitan cetakan) dan pengembangan perangkat lunak, antara pemasaran dan komputasi, antara komunikasi internal dan relasi eksternal, dan antara seni dan teknologi”

Page 7: Perancangan Web Libre

8/18/2014

2

REKAYASA WEB (Lanjutan)

Rekayasa Web menjadi suatu bidang yang multidisipliner dengan

masukan dari berbagai bidang ilmu yang berbeda seperti :

1. Interaksi manusia-komputer (human-computer interaction)

2. Antarmuka pengguna (user interface)

3. Perancangan dan analisis sistem (systems analysis and

design)

4. Rekayasa perangkat lunak (software engineering)

5. Rekayasa kebutuhan (requirements engineering)

6. Rekayasa hipermedia ( hypermedia engineering)

7. Struktur informasi (information structured)

8. Pengujian (tersting)

9. Pemodelan dan simulasi (modeling and simulation)

10. Manajemen proyek ( project management)

REKAYASA WEB – Bidang Multidisipliner

Gambar 3.1 Rekayasa Web bidang Multidisipliner

REKAYASA WEB DAN

REKAYASA PERANGKAT LUNAK

Meskipun rekayasa Web melibatkan pemrograman dan pengembangan perangkat lunak serta mengadopsi beberapa

prinsip-prinsip RPL, pengembangan sistem berbasis Web dan rekayasa Web berbeda dengan pengembangan

perangkat lunak dan rekayasa perangkat lunak.

Sistem berbasis Web :

1. Kebanyakan sistem berbasis Web (paling tidak saat ini) adalah halaman Web statis dan dinamis.

2. Sistem berbasis Web akan berlanjut untuk dipusatkan

pada “look and feel” yang menekankan pada penyajian dan kreativitas visual mengenai antarmuka frond-end

dengan seorang pengguna yang dapat saling berhubungan.

REKAYASA WEB DAN

REKAYASA PERANGKAT LUNAK (Lanjutan)

3. Sistem berbasis Web akan berlanjut ke pengembangan content-driven. Artinya pengembangan sistem berbasis Web akan meliputi pengembangan dari konten yang disajikan.

4. Web menerangkan ikatan yang lebih besar antara seni dan ilmu daripada yang dialami di dalam pengembangan perangkat lunak.

5. Kebanyakan sistem berbasis web dikembangkan dalam waktu yang sangat singkat sehingga sulit untuk membuat dan menerapkannya pada tingkat yang sama dengan perencanaan dan pengujian seperti yang digunakan dalam pengembangan perangkat lunak.

KEAHLIAN BIDANG REKAYASA WEB

Faktor kesuksesan proyek rekayasa Web merupakan tingkat keahlian yang dibutuhkan dari seorang perekayasa

Web untuk menguasai proses pengembangan. Menurut Seffah dan Grogono (2002), ada tiga kelompok keahlian

yang dibutuhkan oleh seorang perekayasa perangkat lunak (software engineer). Oleh karena itu seorang perekayasa Web juga diharapkan memiliki ketiga kelompok keahlian

berikut :

1. Keahlian prasyarat

2. Keahlian spesifik

3. Keahlian umum

Keahlian Prasyarat

1. Pemrograman dan pemodelan berorientasi dengan UML dan Java, atau dengan bahasa yang serupa.

2. Pengembangan basis data dengan JDBC, MySQL, dan Java Servlets, atau dengan bahasa yang serupa.

3. Pemrograman Web dengan HTML, JavaScript, CGI Script, dan PHP, atau dengan bahasa yang serupa.

4. Penyebaran dari tool authoring khusus dengan editor Web, seperti FrontPage dan Macromedia Dreamweaver untuk desain dan implementasi aplikasi berbasis Web.

Page 8: Perancangan Web Libre

8/18/2014

3

Keahlian Spesifik

1. Pemahaman rekayasa Web sebagai bidang multidisipliner yang menggabungkan teknik, rekayasa,

sosial, politik, pemasaran, legalitas, etika, budaya, estetika, dan isu pedadogis.

2. Pengembangan filosofis pengembangan rekayasa Web.

3. Pemahaman cakupan sistem dan konteks dari aplikasi

rekayasa Web.

4. Pemodelan analisis : pemahaman kebutuhan masalah, penetapan kebutuhan pengguna yang menggunakan

use case dan scenario, penetapan kebutuhan data menggunakan elas dan teknik-teknik pemodelan

analisis lainnya, dan atribut kualitas umum untuk aplikasi berbasis Web.

Keahlian Spesifik (Lanjutan)

5. Desain Web (desain situs menggunakan linear, grid, hierarki, dan struktur), Web jaringan, desain halaman,

desain antar muka, desain navigasi, desain visual, desain tipografi, style editorial layar, warna, dan

multimedia.

6. Pengembangan prototipe (prototyping), tambahan

(incremental), evolusioner, dan iteratif, pengodean program, pengujian integrasi, dan unit, pengevaluasian dan perbaikan (debugging) pengembangan solusi kode,

dan pemeriksanaan konsistensi.

7. Rekayasa dan pengujian usabilitas, interaksi manusia-

komputer, kriteria usabilitas yang berkaitan dengan kepuasan pengguna (kemudahan penggunaan, kemudahan pembelajaran, dan konsistensi)

Keahlian Umum

1. Manajemen dan perencanaan proyek.

2. Penggunaan kembali prinsip-prinsip desain, frameworks, arsitektur, dan toolkit (class libraries), memodifikasi dan menggunakan kembali analisis yang

ada (desain dan solusi kode program dan pola), perbandingan (mengenali persamaan dan perbedaan

antara permasalah baru dan solusi sebelumnya).

3. Keahlian menulis dan membaca : mempunyai kemampuan menulis dan teknik mengatur laporan dan

dokumentasi, mampu membaca teks dan dokumen.

4. Dialog komunikasi dengan stakeholder. Bekerja di

dalam tim dengan pengembang, desainer sistem, pemrogram, pengguna akhir dan klien.

AKTIVITAS REKAYASA WEB

Rekayasa Web bukanlah tugas atau aktivitas tunggal. Rekayasa Web dihadapkan pada semua aspek-aspek dari

pengembangan sistem berbasis Web, mulai dari konsep dan pengembangan untuk implementasi, evaluasi, kinerja,

dan pemeliharaan yang berkesinambungan.

Rekayasa Web menyajikan suatu pendekatan yang proaktif untuk penciptaan aplikasi Web. Sekarang ini banyak pengembang Web mengadopsi prinsip-prinsip rekayasa

Web secara khusus meliputi :

1. Analisis dan spesifikasi kebutuhan

2. Teknik-teknik dan metodologi pengembangan sistem berbasis Web

AKTIVITAS REKAYASA WEB

3. Integrasi dengan sistem warisan

4. Migrasi dari sistem warisan ke lingkungan Web 5. Pengembangan aplikasi waktu nyata berbasis Web

6. Pengujian, verifikasi, dan validasi

7. Penilaian kualitas, kontrol, dan jaminan 8. Konfigurasi dan manajemen proyek

9. Matriks web untuk estimasi usaha pengembangan 10. Evaluasi dan spesifikasi kinerja

11. Pembaruan (update) dan pemeliharaan 12. Manajemen staf, tim, dan model pengembangan

13. Manusia dan aspek-aspek budaya 14. Pengembangan user-centric, pemodelan pengguna, dan

umpan balik serta keterlibatan pengguna 15. Pengembangan aplikasi pengguna akhir

16. Pendidikan dan pelatihan

KATEGORI APLIKASI WEB

Kategori Contoh

Informasional Surat kabar on-line, katalog-katalog produk, surat

kabar, services manual, online classified, dan buku elektronik on-line.

Interaktif

(informasi user-provided atau akses dikustom)

Formulir pendaftaran, penyajian informasi yang

dikustomisasi, dan permainan on-line.

Transaksional Belanja elektronik, pemesanan barang dan

layanan, dan perbankan on-line.

Workflow Sistem penjadwalan dan perencanaan on-line,

manajemen inventori, dan pengawasan status.

Lingkungan kerja

kolaboratif

Sistem authoring terdistribusi dan tool desain

kolaboratif.

Marketplaces, komunitas

on-line

Kelompok chat, sistem yang merekomendasikan

sebuah produk, layanan, dan pelelangan on-line.

Web portal Mal belanja elektronik dan perantara on-line.

Page 9: Perancangan Web Libre

8/18/2014

1

PERTEMUAN 3

MERANCANG DAN MEMBANGUN WEB

TAHAPAN DALAM MERANCANG WEB

Tahapan dalam merancang web menggunakan Model SDLC Waterfall menyediakan pendekatan alur secara

terurut mulai dari analisis, desain, pengodean, pengujian, dan tahap pendukung (support).

Gambar 3.2 Ilustrasi Model Waterfall

TAHAPAN DALAM MERANCANG WEB

(Lanjutan) Tahapan dalam merancang Web menggunakan Model Waterfall sebagai berikut :

1. Analisis Kebutuhan

Analisis kebutuhan merupakan proses pengumpulan kebutuhan

yang dilakukan secara intensif untuk menentukan spesifikasi web agar dapat dipahami oleh pengguna.

2. Desain Perangkat Lunak

- Desain Antar Muka

- Desain Basis Data

- Desain Struktur Navigasi

3. Pembuatan Kode Program (Implementasi)

4. Pengujian (Testing)

5. Pendukung (Support) atau Pemeliharaan (Maintenance)

Analisis Kebutuhan

Secara singkat terdapat 7 jenis kebutuhan (Requirements Types)

dalam pengembangan Web sebagai berikut :

1. Functional Requirements

Menentukan kemampuan dan layanan dari web yang ditawarkan. Misalnya dalam Aplikasi Perbankan Online

(Internet Banking) terdapat fasilitas transfer uang.

2. Content Requirements

Menentukan isi aplikasi web atau konten yang terdapat dalam web yang dibuat.

3. Quality Requirements

Menentukan tingkat kualitas layanan dan kemampuan dalam

hal-hal penting seperti keamanan, kinerja, manfaat dan

kegunaan dari web.

Analisis Kebutuhan (Lanjutan)

4. System Environment Requirements

Menentukan bagaimana aplikasi web dapat diterima oleh masyarakat. Jika aplikasi web “ubiquitous” berarti harus

menyediakan layanan yang dapat dikustomisasi oleh usernya, kapanpun, dimanapun, dan untuk perangkat

apapun.

5. User Interface Requirements

Menentukan kemudahan dari penggunaan web oleh

pengguna meliputi aspek penting yang meliputi struktur navigasi dan user interface.

Analisis Kebutuhan (Lanjutan)

6. Evolution Requirements

Menentukan kemampuan web sesuai dengan evolusi yang berlangsung dengan melakukan peningkatan. Web harus

dirancang up-to-date mengikuti perkembangan zaman.

7. Project Constraint

Menentukan kendala yang mungkin dihadapi dalam

pengembangan web seperti anggaran dan jadwan, keterbatasan teknik, pemeliharaan web, pengembangan

teknologi, aturan pemerintah, dan aspek budaya.

Page 10: Perancangan Web Libre

8/18/2014

2

Desain Perangkat Lunak

Desain perangkat lunak adalah proses multilangkah yang fokus

pada pernacangan web meliputi :

- Desain Antar Muka

- Desain Basis Data

- Desain Struktur Navigasi

- Desain Antar Muka

Representasi antar muka atau spesifikasi rancangan tampilan

web. Desain web terdiri dari 2 bagian yaitu desain front-end

dan desain back-end. Bagian front-end adalah tampilan web yang dilihat oleh pengunjung ataupun member. Sedangkan

bagian back-end adalah tampilan administrator web dalam mengelola konten web, keamanan web dan konektivitas dari

situs ke server.

Desain Perangkat Lunak (Lanjutan)

- Desain Basis Data

Salah satu pemodelan basis data relational dapat dibuat dengan menggunakan ERD (Entity Relationship Diagram)

yang bertujuan untuk menggambarkan data yang berelasi pada sebuah database.

- Desain Struktur Navigasi untuk menggambarkan struktur

atau alur dari suatu web.

Struktur navigasi adalah :

Desain Perangkat Lunak (Lanjutan)

Struktur Navigasi adalah alur dari suatu program yang merupakan rancangan hubungan (rantai kerja) dari

beberapa area yang berbeda dan dapat membantu mengorganisasikan seluruh elemen pembuatan Website.

Jenis-jenis struktur navigasi :

1. Linier

2. Non-Linier

3. Hirarki

4. Campuran (Composite)

Struktur Navigasi (Lanjutan)

1. Linier

Linier merupakan struktur yang hanya mempunyai satu rangkaian cerita yang berurut. Struktur ini menampilkan satu demi satu tampilan layar secara

berurut menurut urutannya dan tidak diperbolehkan adanya percabangan. Tampilan yang dapat

ditampilkan adalah satu halaman sebelumnya atau satu halaman sesudahnya.

Struktur Navigasi (Lanjutan)

2. Hirarki

Struktur hirarki merupakan suatu struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu

pertama akan disebut sebagai master page, halaman utama ke satu. Halaman utama ini akan mempunyai

halaman percabangan yang dikatakan slave page, halaman pendukung. Jika salah satu halaman pendukung diaktifkan, maka tampilan tersebut akan

bernama master page, halaman utama kedua. Pada struktur navigasi ini tidak diperkenankan adanya

tampilan secara linier.

Struktur Navigasi (Lanjutan)

Page 11: Perancangan Web Libre

8/18/2014

3

Struktur Navigasi (Lanjutan)

3. Non-Linier

Pada struktur nonlinier diperkenankan membuat struktur navigasi bercabang, percabangan ini berbeda dengan percabangan pada struktur hirarki. Pada percabangan

nonlinier walaupun terdapat banyak percabangan tetapi tiap-tiap tampilan mempunyai kedudukan yang sama

tidak ada pada master page dan salve page.

Struktur Navigasi (Lanjutan)

4. Campuran

Struktur navigasi campuran merupakan gabungan dari ketiga struktur sebelumnya. Struktur navigasi ini banyak digunakan dalam pembuatan aplikasi

multimedia sebab dapat memberikan keinteraksian yang lebih tinggi.

Pembuatan Kode Program (Implementasi)

Rancangan yang sudah dibuat seperti rancangan antar muka, rancangan basis data, dan rancangan struktur

navigasi diimplementasikan ke perangkat lunak atau pembuatan kode program.

- Rancangan antar muka diimplementasikan ke perangkat lunak (software) editor web seperti

Dreamweaver.

- Rancangan basis data diimplementasikan ke web server seperti apache untuk membuat database dan

tabel menggunakan phpmyadmin dengan perintah SQL.

Pengujian (Testing)

Setelah implementasi desain atau rancangan web dilakukan dengan pembuatan kode program, dilakukan

pengujian untuk mengetahui kepuasan pengguna atau user terhadap web yang sudah dibuat.

Pengujian untuk validasi memiliki beberapa pendekatan sebagai berikut :

1. Black-Box Testing

2. White-Box Testing

Pengujian di tahap ini hanyalah pengujian terhadap

jalannya konten web (pengujian perangkat lunak), bukan pengujian keseluruhan dari sebuah web (Testing di pertemuan 5)

Pengujian (Testing) (Lanjutan)

1. Black-Box Testing (Pengujian kotak hitam)

Yaitu menguji perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan kode program.

Pengujian dimaksudkan untuk mengetahui apakah fungsi-fungsi, masukan, dan keluaran dari perangkat lunak sesuai

dengan spesifikasi yang dibutuhkan.

2. White-Box Testing (Pengujian kotak putih)

Yaitu menguji perangkat lunak dari segi desain dan kode

program apakah mampu menghasilkan fungsi-fungsi masukan, dan keluaran yang sesuai dengan spesifikasi

kebutuhan. Pengujian kotak putih dilakukan dengan memeriksa logika dari kode program. Seperti penggunaan

looping (pengulangan)

Pendukung (Support) atau

Pemeliharaan (Maintenance) Pendukung (Support) atau Pemeliharaan (Maintenance) dari

sebuah web dapat dilakukan dengan beberapa cara seperti berikut ini :

1. Selalu melakukan update terhadap konten web, menyesuaikan dengan informasi yang berubah atau

bertambah.

2. Melakukan pemeliharaan terhadap hardware dan software

yang digunakan, agar web dapat selalu berjalan dengan baik.

3. Melakukan back-up database secara berkala untuk menghindari hal-hal yang mengakibatkan kerusakan pada

web.

4. Melakukan evaluasi terhadap kritik dan saran dari

pengguna atau pengunjung web.

Page 12: Perancangan Web Libre

8/18/2014

4

Contoh Rancangan Antar Muka

Halaman Login

Contoh Rancangan Antar Muka

Halaman Input Nilai Mahasiswa

Contoh Rancangan Basis Data Entity Relationship Diagram (ERD)

Contoh Rancangan Basis Data

Logical Relational Structure (LRS)

Contoh Rancangan Struktur Navigasi Contoh Rancangan Implementasi

Kode Program

Page 13: Perancangan Web Libre

8/18/2014

5

Contoh Pengujian (Black-Box Testing)

Page 14: Perancangan Web Libre

8/18/2014

1

PERTEMUAN 4

MANAJEMEN WEB

SOFTWARE DESAIN WEB

1. Website Berbasis CMS

2. Website Berbasis Bahasa Pemrograman

WEBSITE BERBASIS CMS

Pengertian CMS :

Content Management System atau disingkat CMS adalah Suatu metoda mengelola sebuah content/isi. Content bisa berupa teks, suara, gambar video, animasi dan aplikasi

lainnya yang disimpan dalam sebuah database sehingga mudah dalam pengelolaannya.

CMS yang banyak dipakai saat ini adalah Website CMS(WCMS).

WEBSITE BERBASIS CMS

WCMS adalah perangkat lunak yang berfungsi untuk membangun dan memelihara/updating web, yang

dirancang sedemikian rupa sehingga proses pembuatan dan pemeliharaan web lebih mudah, efektif dan efisien,

baik bagi orang yang mengerti tentang teknologi web maupun yang tidak

WCMS yang beredar di Internet saat ini menggunakan:

• Bahasa pemrograman PHP

• Web Server apache

• Database MySQL

JENIS-JENIS WEBSITE CMS

•WCMS Portal, mempunyai banyak layanan, seperti layanan berita, forum, mailing list, e-mail dan lainnya.

Contoh: joomla, drupal, dll.

•WCMS E-Commerce, merupakan CMS yang bertujuan melakukan proses transaksi. Contoh: Prestashop,

phpShop, dll.

•WCMS E-Learning, CMS yang bertujuan untuk proses belajar mengajar jarak jauh. Contoh: aTutor, Moodle, dll.

•WCMS Forum, CMS yang menyediakan media untuk diskusi secara online. Contoh: phpBB, MyBB, dll.

•WCMS Gallery, CMS yang menyediakan wadah untuk

menampilkan gallery foto. Contoh: Galery, Copermine, dll.

•WCMS Personal/Blog, merupakan CMS yang bertujuan untuk mengelola data personal atau blog. Contoh:

Wordpress, nucleus, dll.

JENIS-JENIS WEBSITE CMS

Page 15: Perancangan Web Libre

8/18/2014

2

MANFAAT CMS

Alasan utama memilih CMS sebagai basis website yang akan dibangun adalah kemudahan yang ditawarkan, dan fitur yang lengkap. Selain itu CMS juga memberikan sejumlah manfaat, yaitu:

• Manajemen data

• Mengatur siklus hidup server

• Mendukung web templating dan standarisasi.

• Personalisasi server

• Sindikasi

• Akuntabilitas

Sistem Manajemen Konten

Aplikasi Web Berbasis Sistem Manajemen Konten

Sistem Manajemen Konten yang biasa dikenal dengan Content Management System (CMS) adalah sistem

perangkat lunak yang memungkinkan seseorang untuk mengatur proses berjalannya suatu situs web.

Beberapa tahun lalu, untuk membuat situs Web kita harus

memiliki pengetahuan tentang ilmu yang berhubungan dengan pembuatan dan pengelolaan situs Web seperti HTML, PHP, dan lain-lain

Sistem Manajemen Konten (Lanjutan)

Apa itu Konten?

Konten adalah pokok, tipe, atau unit dari informasi digital. Konten dapat berupa teks, citra, grafis, video, suara, dokumen, laporan-laporan, dan lain-lain. Dengan kata lain,

konten adalah semua hal yang dapat dikelola dalam format elektronik.

Apa itu Manajemen Konten?

Manajemen konten secara efektif adalah manajemen dari konten dengan kombinasi aturan-aturan, proses dan/atau aliran kerja.

Sistem Manajemen Konten (Lanjutan)

Apa itu Sistem Manajemen Konten?

Sistem dapat dijelaskan sebagai tool atau kombinasi tool yang memudahkan produksi yang efektif dan efisien yang menginginkan keluaran dengan menggunakan konten yang dikelola.

Kombinasi dari ketiga hal sebelumnya

CMS adalah tool yang memungkinkan berbagai staf teknis (sentralisasi) dan non-teknis (desentralisasi) untuk menciptakan, mengedit, mengelola, dan terakhir menerbitkan (di dalam sejumlah format) berbagai konten (seperti teks, grafis, video, dokumen, dan lain-lain) selama dibatasi oleh sekumpulan aturan-aturan yang disentralisasi, dan proses serta aliran kerja yang memastikan konten elektronik divalidasi.

Open Source CMS

Ada banyak aplikasi open source yang kita kenal saat ini diantaranya adalah Postnuke (www.postnuke.com),

PHPNuke (www.phpnuke.org), dan Drupal (www.drupal.org).

Semuanya merupakan aplikasi CMS yang dikembangkan dengan bahasa pemrograman PHP dan basis data MySQL.

Aplikasi ini biasa digunakan untuk keperluan berbagai informasi suatu komunitas.

Drupal Drupal adalah sebuah perangkat lunak Sistem Manajemen Konten yang bebas dan terbuka. Perangkat lunak ini didistribusikan di bawah lisesnsi GPL, pengembangan dan perawatannya dilakukan oleh ribuan komunitas pengguna dan pengembang di seluruh dunia. Drupal dapat diunduh secara bebas dan dapat dilakukan secara bebas juga sehingga memungkinkan setiap orang baik secara individu maupun komuntas untuk mempublikasikan, mengatur, dan mengorganisasikan berbagai jeni isi atau konten pada situs web. Drupal dapat digunakan untuk membangun :

1. Portal Web komunitas

2. Situs diskusi 3. Situs Web perusahaan

4. Aplikasi internal 5. Situs Web personal atau blog

6. Aplikasi komersial e-commerce, dan lain-lain.

Page 16: Perancangan Web Libre

8/18/2014

3

Drupal (Lanjutan) Keunggulan :

1. Diklaim sebagai CMS terbaik untuk saat ini (2010) dan mengalahkan Joomla!

2. Digunakan apda situs Web yang sederhana hingga situs Web profesional

3. Mudah dioperasikan

4. Dapat dijalankan di komputer lokal 5. Banyak plugin tambahan

6. Template dapat diubah-ubah sesuka hati dan mengijinkan pembuatan template

7. Mendukung SEF (Search Engine Friendly) secara default sehingga lebih mudah ditemukan di mesin pencari

Kelemahan : 1. Penggunaannya tidak telalu banyak, terutama di Indonesia

2. Pluginnya tidak sebanyak Joomla!

Joomla!

Joomla! adalah Sistem Manajemen Konten (CMS) yang bebas dan terbuka (free open source), dan ditulis dengan PHP dan basis data MySQL untuk keperluan di Internet maupun Intranet. Fitur-fitur Joomla! diantaranya adalah sistem caching untuk peningkatan performa, RSS, blogs, poling, dan lain-lain. Joomla! menggunakan lisesnsi GPL. Kata joomla berasal dari kata Swahili yang mengandung arti ‘kebersamaan’. Joomla! menggunakan Apache sebagai server Web dan MySQL untuk basis datanya.

Secara garis besar dan gamblang, Joomla! terdiri dari 3 elemen dasar, yaitu :

1. Server Web

2. Skrip PHP

3. Basis data MySQL

Joomla! (Lanjutan) 1. Server Web, diasumsikan terhubung dengan internet/intranet.

2. Skrip PHP, terdiri dari kode program dalam bahasa PHP.

3. Basis data MySQL, merupakan tempat penyimpanan konten.

Keunggulan :

1. Diklaim sebagai CMS open source dengan pengguna terbanyak di dunia.

2. Digunakan oleh situs Web yang sederhana hingga situs Web yang

profesional.

3. Mendapat kepercayaan dunia dan beberapa kali menerima penghargaan

sebagai CMS open source terbaik dunia.

4. Banyak pihak pengembang yang terus menambahkan konten-konten

Joomla!

Kelemahan :

1. Defaultnya tidak mendukung SEF, namun ada komponen pendukungnya

baik yang gratis maupun yang berbayar.

2. Terkadang plugin-plugin yang didapatkan terdapat bug atau error.

3. Terkadang ada ketidaksesuaian antara CMS dan plugin.

WordPress WordPress adalah sebuah perangkat lunak blog yang ditulis dalam PHP dan

mendukung sistem basis data MySQL. WordPress didistribusikan dengan lisensi GNU General Public License.

Keunggulan :

1. Sederhana dan cukup mudah dioperasikan

2. Akun gratis WordPress dapat dimiliki dengan mendaftar di wordpress.com

3. WordPress juga dapat dijalankan di situs Web milik kita sendiri (tidak

seperti Blogspot)

4. Mendukung adanya SEF (Search Engine Friendly) secara default sehingga lebih mudah ditemukan di mesin pencari

5. Template dapat diubah-ubah sesuka hati dan mengijinkan pembuatan

template sendiri

Kelemahan :

1. Fitur manajemennya sedikit sehingga orang menganggapnya sederhana

2. Jarang digunakan oleh situs-situs Web besar di dunia

3. Pluginnya tidak sebanyak Joomla!

WEBSITE BERBASIS BAHASA

PEMROGRAMAN

Pengertian Bahasa Pemrograman

Bahasa pemrograman adalah bahasa-bahasa yang dipakai programmer untuk menuliskan kumpulan-kumpulan instruksi(program) dalam komputer.

Bahasa pemrograman web diantaranya:

HTML, XHTML, Javascript, CSS, JQuery, PHP, ASP, dll.

WEBSITE BERBASIS BAHASA

PEMROGRAMAN

Ada beberapa jenis software yang digunakan dalam membuat aplikasi berbasis web, yaitu:

1. Software untuk desain web, seperti Adobe Photoshop,

Corel Draw, Firework, dll.

2. Editor Web, membantu seorang programmer menuliskan

kode program web. Terbagi dua, hand code dan WYSIWYG(What You See Is What You Get).

a. Hand Code menggunakan editor teks dimana hasilnya

terlihat di browser: notepad.

b. WYSIWYG bisa langsung terlihat hasilnya: Dreamweaver, Frontpage, dll.

Page 17: Perancangan Web Libre

8/18/2014

4

WEBSITE BERBASIS BAHASA

PEMROGRAMAN

3. Web Server, halaman-halaman website yang diakses oleh user melalui browser disimpan pada web server (Netscape Server, Microsoft IIS, Xitami, WebStar, Apache, dll).

4. Browser atau Web Browser, adalah software untuk menampilkan halaman website (Internet Explorer, Mozilla Firefo, Google Chrome, Opera, dll).

5. Database, agar website lebih dinamis untuk pengolahan data dan memudahkan user atau programmer memasukkan, menghapus, mengedit, menampilkan, dan mencari data (Oracle, Sql Server, MySQL).

Page 18: Perancangan Web Libre

PERTEMUAN 5

PENGUJIAN WEB

Page 19: Perancangan Web Libre

PENGUJIAN APLIKASI WEB

Pengujian (Testing) adalah instrumen penting dalam

pengembangan aplikasi web untuk mendapatkan produk yang

berkualitas dan seperti apa yang diharapkan oleh pengguna.

Testing adalah sebuah aktivitas untuk mengevaluasi kualitas dari

sebuah produk dan untuk memperbaiki produk dengan

mengidentifikasi kerusakan dan masalahnya.

Kesalahan (Error) terjadi jika hasil dari jalannya testing tidak

sama dengan hasil yang diharapkan. Error adalah perbedaan

antara nilai atau kondisi yang dihitung, diobservasi, diukur

dengan kenyataan, spesifikasi dan kebenaran teori (IEEE

standar 610.12-1990).

Page 20: Perancangan Web Libre

PENGUJIAN APLIKASI WEB (Lanjutan)

Sasaran utama testing adalah menemukan Error, tetapi

testing tidak mengarah ke perbaikan kualitas walaupun

Error telah terdeteksi dan dihilangkan.

Testing dikatakan berhasil jika Error terdeteksi, terutama

jika berhasil mendapatkan tambahan informasi mengenai

masalah dari aplikasi. Testing yang tidak menemukan

kesalahan adalah “waste of time”.

Page 21: Perancangan Web Libre

LEVEL TESTING

1. Unit Test

Merupakan pengujian unit terkecil seperti Classes, Web Pages, dll.

Pengujian yang berdiri sendiri.

Pengujian dilakukan selama tahapan implementasi.

2. Integration Tes

Merupakan evaluasi interaksi unit terintegrasi yang di tes secara berbeda dan terpisah.

3. System Test

Merupakan testing yang komplit.

Sistem yang terintegrasi.

Page 22: Perancangan Web Libre

LEVEL TESTING (Lanjutan)

5. Acceptance Test

Mengevaluasi sistem dalam organisasi dengan

bantuan klien yang berada dalam lingkungan sistem.

Menggunakan kondisi dan data real.

6. Beta Test

Merupakan tes yang informal (tanpa rencana dan

kasus) yang mempercayakan pada kreativitas

pengguna yang potensial.

Page 23: Perancangan Web Libre

PENGUJIAN SITUS WEB

Pengujian Sits Web dibagi menjadi 2 :

1. Pengujian di localhost

Sebelum mengupload situs web, dilakukan pengujian di

server lokal terlebih dahulu.

2. Pengujian di internet

Setelah diupload dilakukan pengujian untuk

memastikan bahwa web telah siap untuk digunakan.

Page 24: Perancangan Web Libre

PENGUJIAN DI LOCAL HOST

1. Pengujian Usability

2. Pengujian Sistem Navigasi (Struktur)

3. Pengujian Graphic Design (Desain Visual)

4. Pengujian Content

5. Pengujian Compability

6. Pengujian Loading Time

7. Pengujian Functionality

8. Pengujian Accesibility

9. Pengujian Interactivity

Page 25: Perancangan Web Libre

PENGUJIAN USABILITY

Parameter dari Usability:

• Kemudahan situs untuk dipelajari

• Efisien dalam penggunaan

• Mudah untuk di ingat

• Apakah situs memiliki kesalahan

• Kepuasan pengguna akan website

Page 26: Perancangan Web Libre

PENGUJIAN STRUKTUR NAVIGASI (STRUKTUR)

Parameter:

• Apakah navigasi situs web mudah dipelajari

• Apakah navigasinya sudah konsisten

• Apakah dimungkinkan untuk adanya feedback

• Apakah menawarkan alternatif navigasi lain

• Apakah menyediakan pesan visual yang jelas

Page 27: Perancangan Web Libre

PENGUJIAN GRAPHIC DESIGN (DESAIN VISUAL)

• Pengujian Graphic Design (Desain Visual) dapat diuji dengan berbagai ukuran revolusi, apakah desain web mengalami kerusakan atau tidak.

• Parameter yang digunakan:

- Apakah penggunaan format image-nya sudah benar

- Apakah komposisi warna sudah baik dan konsisten

- Apakah layout grafiknya konsisten

- Apakah text-nya mudah dibaca

- Apakah penggunaan grafik memperkuat isi text

- Apakah penggunaan animasi sudah ditempatkan

dengan tepat dan memperkuat isi text

- Jika dilihat secara keseluruhan, apakah sudah

membentuk pola yang harmonis

Page 28: Perancangan Web Libre

PENGUJIAN CONTENT Parameter:

• Apakah konten relevan dengan tujuan situs.

• Apakah konten berguna dan bermanfaat.

• Apakah gaya penulisan dan bahasa yang digunakan sudah sesuai dengan situs dan target penggunanya.

• Apakah sudah benar penulisannya dari segi bahasa dan tanda baca.

• Apakah sudah memiliki daftar penjelasan untuk istilah-istilah khusus.

• Apakah memiliki arsip dari konten dan data-data lama.

• Apakah informasi sudah objektif, valid disertai data-data dan penjelasan yang mendukung.

• Apakah memiliki daftar referensi dari sumber yang authoritative (berwenang).

• Jika konten berbentuk multimedia, apakah berhubungan dengan isi situs web.

• Apakah konten memungkinkan dan sudah up-to-date.

Page 29: Perancangan Web Libre

• Apakah kompatible dengan berbagai web browser

seperti Internet Explorer, Netscape Navigator, Opera,

Mozilla, Firefox, dsb.

• Apakah memberi alternatif untuk browser yang tidak

dapat melihat situs.

• Jika menggunakan plug-in, apakah pengguna mudah

men-downloadnya.

PENGUJIAN COMPATIBILITY

Page 30: Perancangan Web Libre

• Untuk menguji loading time, sebaiknya menggunakan

kecepatan akses terlambat, agar dapat memastikan

bahwa pengguna mau mengakses situs

PENGUJIAN LOADING TIME

• Dilakukan dengan menguji fungsi-fungsi yang ada pada

situs, apakah berjalan atau tidak. Jika tidak maka dapat

dilakukan pengecekan kode apakah sudah ditulis

dengan benar dan cara yang baik.

PENGUJIAN FUNCTIONALITY

Page 31: Perancangan Web Libre

• Memastikan bahwa situs web dapat diakses dengan baik

oleh pengguna, termasuk orang-orang cacat.

• Cara terbaik untuk memastikan bahwa suatu situs dapat

diakses adalah dengan perencanaan yang tidak tergesa-

gesa, pengembangan, pengujian dan evaluasi.

PENGUJIAN ACCESIBILITY

• Dasar interaktivitas adalah hyperlinks (link) dan

mekanisme feedback, pastikan bahwa keduanya dapat

berfungsi dengan baik.

PENGUJIAN INTERACTIVITY

Page 32: Perancangan Web Libre

PENGUJIAN DI INTERNET

• Validasi HTML dan XHTML

• Validasi CSS (Cascading Style Sheet)

• Validasi Accessibility

Page 33: Perancangan Web Libre

PERTEMUAN 6

PROMOSI DAN PEMELIHARAAN WEB

Page 34: Perancangan Web Libre

PROMOSI WEBSITE

• Bagaimana user dapat menemukan dan mendapatkan

informasi dari website adalah tujuan dari promosi web,

terutama untuk aplikasi web yang komersil.

• Promosi website terbagi 2:

1. Promosi Offline

2. Promosi Online

Page 35: Perancangan Web Libre

PROMOSI ONLINE

Melalui media konvensional seperti :

• Media Cetak

Promosi ke majalah, koran, tabloid atau media cetak lain.

• Media Elektronik

Promosi melalui televisi atau radio.

• Media lainnya seperti kartu nama, pamflet, leaflet/brosur, pop surat, billboard, spanduk/umbul-umbul, dsb.

Page 36: Perancangan Web Libre

PROMOSI ONLINE (Lanjutan)

• Newsletters

• Affiliate Marketing

• Search Engine Marketing

• Content-related Marketing

• Domain Management

• Milis

Page 37: Perancangan Web Libre

Newsletters

• Didistribusikan melalui Email.

• Merupakan media yang efektif untuk mendapatkan

pelanggan baru dan menyediakan informasi untuk

pelanggan serta membentuk relasi yang kuat.

Page 38: Perancangan Web Libre

Affiliate Marketing

• Affiliate Marketing adalah revenue sharing antara

pemasang iklan online dengan penjual online/pemilik

website melalui perdagangan online produk, jasa/service

atau pekerjaan dari aplikasi web milik sesorang yang

diintegrasikan ke aplikasi web affiliate.

• Affiliate marketing sering terkait dengan hilangnya

identitas sendiri, menawarkan bentuk yang efisien dari

iklan dengan biaya startup relatif rendah untuk menarik

lebih banyak pengunjung dan untuk membuat situs Web

populer.

Page 39: Perancangan Web Libre

• Sebagian besar perjanjian pembagian berdasarkan

model pay-per-performance, model bisnis berbasis web

yang mengumpulkan biaya hanya jika konsumen

menyelesaikan transaksi (Hoffmann and Nowak 2005,

Rappa 2003).

• Jenis Affiliate Marketing:

1. Banner exchange

2. Pay per click

3. Revenue sharing

Affiliate Marketing (Lanjutan)

Page 40: Perancangan Web Libre

• Faktor sukses dari Affiliate Marketing:

1. Integrasi ke situs afiliasi tidak boleh hanya didasarkan

pada link sederhana atau banner, tapi harus

memberikan nilai tambah kepada pengguna.

2. Sebuah topik afinitas kuat antara situs afiliasi dapat

meningkatkan minat pengguna.

3. Ketika mempersiapkan sebuah kontrak, harus

mencapai kondisi win-win condition.

Affiliate Marketing (Lanjutan)

Page 41: Perancangan Web Libre

Search Engine Marketing

• Search engine didasarkan pada konsep konvensional

information retrieval systems tahun 1960-an, yang

ditujukan untuk menyimpan dan mengambil repositori

data tekstual (Salton and McGill 1983, Baeza-Yates and

Ribeiro-Neto 1999).

• Search engine marketing (juga disebut mesin pencari

promosi) mencoba untuk memenangkan kontrak yang

relevan dengan muncul pada halaman hasil pencarian

dari layanan.

• Promosi Search engine bisa dilakukan dengan cara membayar dan bisa secara gratis.

Page 42: Perancangan Web Libre

Search engine yang sangat populer didunia diantaranya:

• Google (http://www.goggle.com)

• AllTheWeb (http://www.alltheweb.com)

• Yahoo (http://www.yahoo.com)

Search Engine Marketing (Lanjutan)

Page 43: Perancangan Web Libre

Sistem kerja mesin pencari WWW secara umum terdiri:

a. Crawler

Merupakan suatu program yang mengambil halaman-

halaman web, yang akan digunakan oleh mesin pencari.

b. Indexer

Melakukan proses pembuatan index untuk halaman-

halaman tersebut dan juga melakukan pembuatan

rangkuman dan analisis terhadap isi halaman web

c. Searcher

Berfungsi sebagai interface antara user dengan keseluruhan

sistem. Subsistem searcer menangani masukan query dari

pemakai dan kemudian melakukan pencarian terhadap isi

index untuk mencari halaman web yang cocok. Hasil proses

pencarian kemudian diberi bobot/ranking.

Search Engine Marketing (Lanjutan)

Page 44: Perancangan Web Libre

Untuk mendapatkan ranking yang tinggi meskipun hanya

menggunakan fasilitas gratis, diantaranya dengan

melakukan beberapa hal sebagai berikut:

Memberikan judul pada tag title, dianjurkan mengandung

penjelasan atas halaman dan situs web-nya.

Memberikan meta keywords pada setiap halaman web.

Hindari perulangan kata karena akan dianggap sebagai

spam oleh search engine.

Memberikan meta description, yang menggambarkan

halaman web-nya.

Gunakan tag heading untuk setiap judul pada isi halaman

web

Search Engine Marketing (Lanjutan)

Page 45: Perancangan Web Libre

• Dengan mengklik URL situs web dari hasil pencarian

search engine akan mengingat situs web yang sering

dikunjungi akan dianggap penting dan akan dinaikan

rankingnya.

• Menyertakan link situs web ke situs-situs yang memiliki

hit yang tinggi atau dianggap situs penting oleh search

engine.

• Memberikan nama file yang sesuai dengan isinya.

Search Engine Marketing (Lanjutan)

Page 46: Perancangan Web Libre

Content-Related Marketing

• Pelopor absolut berkaitan dengan konten pemasaran

yang berhubungan dengan bentuk iklan semakin populer

adalah mesin pencari Google.

• Google mengembangkan program khusus yang disebut

AdWords (http://www.adwords.google.com) untuk

menjangkau pelanggan potensial dengan cara yang

ditargetkan.

• Program tambahan ini memungkinkan untuk

menempatkan iklan yang sesuai baik pada halaman

hasil pencarian dan pada halaman situs afiliasi Web.

• Kampanye AdWords digunakan untuk menjangkau pengguna mencari kata kunci khusus dalam Google dan

memasang iklan di aplikasi Web yang terkait.

Page 47: Perancangan Web Libre

Domain Management

• Setiap aplikasi Web memiliki alamat internet yang digunakan untuk akses unik dan langsung ke Aplikasi web.

• Alamat ini memiliki arti strategis yang penting untuk tujuan pemasaran.

• Saat ini banyak perusahaan pendaftaran domain yang bertanggung jawab menetapkan dan mengelola domain dan operasi pada tingkat nasional dan global.

• Dianjurkan hanya menggunakan satu domain tunggal yang berfungsi untuk komunikasi dengan dunia luar yang disebut domain master, dan domain sekunder yang berhubungan dengan master domain dan produk maupun jasa, hal ini memungkinkan sebagai traffic-generator.

Page 48: Perancangan Web Libre

Milis

• Milis adalah sebuah alamat email yang digunakan oleh

sekelompok pengguna internet untuk melakukan

kegiatan tukar menukar informasi.

• Setiap pesan yang dikirimkan ke alamat sebuah milis,

secara otomatis akan diteruskan ke alamat email seluruh

anggotanya.

• Milis umumnya dimanfaatkan sebagai sarana diskusi

atau pertukaran informasi diantara para anggotanya.

• Milis juga dapat digunakan sebagai tempat promosi situs

web, tapi hati-hati jangan sampai email dianggap spam.

• Promosikan ke milis yang sejenis dengan situs web

dengan tidak secara langsung mengajak atau mengunjungi situs web tetapi berikan tawaran yang

bermanfaat bagi anggotanya.

Page 49: Perancangan Web Libre

PEMELIHARAAN WEBSITE

1. Upload Situs Web

Proses memindahkan atau memasang dari server lokal

ke server hosting disebut proses Upload.

Hal yang harus diperhatikan:

- Webhosting

- Teknik dan Tool untuk upload situs web

Page 50: Perancangan Web Libre

2. Memonitor dan mengevaluasi Situs Web

- Lalu lintas aliran data (Website Traffic)

Untuk melihat aliran data dapat melihat statistik situs web.

Disini dapat diketahui banyaknya pengunjung, siapa yang

mengunjungi, seberapa suka pengunjung pada website

dan juga halaman mana saja yang sering dikunjungi.

- Performa Situs (Website Performance)

Untuk melakukan evaluasi dapat digunakan performa

situs. Evaluasi meliputi : Aksesibilitas dan Performa Situs.

PEMELIHARAAN WEBSITE (Lanjutan)

Page 51: Perancangan Web Libre

FEEDBACK

• Feedback merupakan umpan balik terhadap suatu

proses, kejadian atau layanan.

• Feedback berfungsi untuk mengontrol, memberikan

kontribusi dan mengembangkan sebuah website.

• Adanya feedback memungkinkan perkembangan

sebuah website menjadi sesuai dengan kebutuhan

pengguna (Update situs web).

Page 52: Perancangan Web Libre

UPDATE SITUS WEB

• Memperbarui situs web dengan sesuatu yang baru,

dengan mempertimbangkan kebutuhan pengunjung dan

situs web itu sendiri.

• Update Situs Web

- Memperbarui Desain Web

- Memperbarui Fasilitas

- Memperbarui Content

Page 53: Perancangan Web Libre

PERTEMUAN 7

REVIEW MATERI