BAB 2 TINJAUAN PUSTAKA
2.3 Situs Web
2.3.4 Perancangan Situs Web
Dalam pembuatan sebuah situs web diperlukan dua bidang yang saling berhubungan satu sama lain, yaitu web programming dan web designing. Web
pemrograman web, sedangkan web designing merupakan keahlian untuk merancang dan mendesain tampilan suatu web. Untuk membangun suatu situs web yang bagus, dinamis dan interaktif, keduanya harus ada dan saling melengkapi. Menurut Suparmanto (dalam Egganimation, 2007) ada beberapa langkah-langkah yang harus dilaksanakan dalam membangun sebuah situs web adalah sebagai berikut :
a. Perencanaan dan Tujuan
b. Pemilihan dan Penggunaan program c. Mendesain Web
d. Pemograman Web
e. Penggabungan Desain dan Pemrograman Web
f. Publishing
g. Evaluasi dan Perawatan
a. Perencanaan dan Tujuan
Dalam memulai pembuatan situs web sangat diperlukan perencanaan awal, sesuai dengan tujuan dari pembuatan situs web itu sendiri. Identifikasi awal perlu diperlukan misalnya: situs web apa yang ingin dibuat, siapa saja pengunjung yang diharapkan, dan target apa yang ingin dicapai dengan pembuatan situs web ini (Egganimation, 2007).
b. Pemilihan dan Penggunaan Program
Dalam pembuatan situs web diperlukan program untuk proses desain dan pemrograman web. Pemakaian program ini dibagi menjadi dua bagian yaitu program untuk desain web dan program untuk pemrograman web. Program yang dipakai untuk
mendesain web adalah Adobe Photoshop. Dan program untuk pemograman web
adalah Adobe Dreamwaver, PHP, dan MySQL (Egganimation, 2007).
c. Desain Web
Dalam pembuatan layout serta desain situs web dapat digunakan program desain yang ada seperti Adobe Photoshop. Suatu desain yang baik yaitu dapat menggabungkan layout, warna, foto, gambar serta animasi secara baik, sehingga bagus untuk dipandang (Egganimation, 2007).
Adobe Photoshop
Adobe Photoshop atau yang biasa disebut Photoshop adalah perangkat lunak editor citra buatan Adobe Systems yang dikhususkan untuk pengeditan foto/gambar dan pembuatan efek. Perangkat lunak ini banyak digunakan oleh
dan perusahaan market leader)
untuk perangkat lunak pengolah gambar dan bersama
sebagai produk terbaik yang pernah diproduksi oleh Adobe Systems. Versi kedelapan aplikasi ini disebut dengan nama Photoshop CS, versi sembilan disebut Photoshop CS2 dan terakhir ini adalah Adobe Photoshop CS3 (Creative Suite) (Enterprise, 2007).
Meskipun pada awalnya Photoshop dirancang untuk menyunting gambar untuk cetakan berbasis kertas, Photoshop yang ada saat ini juga dapat digunakan untuk memproduksi gambar untuk web. Beberapa versi terakhir juga menyertakan
aplikasi tambahan, Photoshop juga
Photoshop dapat menerima penggunaan beberapa model warna:
da(Enterprise,
2007).
Photoshop memiliki kemampuan untuk membaca dan menulis gambar berformat raster dan vektor seperti .png, .gif, .jpeg, dan lain-lain. Photoshop juga memiliki beberapa format file khas (Enterprise, 2007):
a) .PSD (Photoshop Document) format yang menyimpan gambar dalam bentuk
layer, termasuk teks, mask, opacity, blend mode, channel warna, channel alpha, clipping paths, dan pengaturan duotone.
b) .PSB' adalah versi terbaru dari PSD yang didesain untuk file yang berukuran lebih dari
c) .PDD adalah versi lain dari PSD yang hanya dapat mendukung fitur perangkat lunak PhotshopDeluxe.
Tool dalam Adobe Photoshop adalah alat yang dapat membantu pengguna dalam mengedit. Adobe Photoshop CS3 memiliki 59 tool yang dapat dipakai oleh pengguna. Tools tersebut terdiri dari berbagai macam tool dengan kegunaan yang spesifik. Beberapa tool - tool yang ada di Photoshop antara lain : History Brush Tool, Eraser Tool, Path Selection Tool, Direct Selection tool, Pen Tool, Shape Tool, Brush Tool, Audio Annotation Tool, Eyedropper Tool, Measure Tool, Text Tool, Hand Tool
d. Pemrograman Web
Pada awalnya aplikasi web dibangun hanya dengan menggunakan bahasa yang disebut HTML dan protokol yang digunakan dinamakan HTTP. Pada perkembangan berikutnya, sejumlah skrip dan objek dikembangkan untuk memperluas kemampuan HTML (Kadir, 2002).
Pemograman web yang digunakan dalam pembuatan situs web antara lain,
Adobe Dreamweaver, PHP, dan MySQL. Penggunaan program ini disesuaikan dengan keinginanan ataupun kemampuan seorang web programming dalam membuat suatu situs web. Perbedaan antara kode pemograman satu dengan yang lainnya terletak pada cara penulisannya (Egganimation, 2007).
1. Adobe Dreamweaver
Adobe Dreamweaver merupakan
Macromedia Dreamweaver keluaran
web karena fitur-
fiturnya yang menarik dan kemudahan penggunaannya (Zaki, 2007).
Adobe Dreamweaver adalah aplikasi pembuat dan pengolah halaman web
yang sangat populer sekarang ini. Penggunaannya lebih banyak dibandingkan aplikasi sejenis lainnya. Kelebihan Dreamweaver yang banyak disukai orang adalah fiturnya yang banyak, mudah dipakai dan tersedianya kemampuan berkolaborasi dengan
software pendukung lain buatan Adope Systems (Zaki, 2007).
Area kerja untuk mendesain halaman web pada Dreamweaver disajikan dalam bentuk desain, kode, html, atau keduanya. Hal ini untuk mempermudah proses
berpengalaman pasti akan menggunakan kedua tampilan tersebut untuk mempercepat atau memperindah pendesainan. Sebagai fasilitas pendukung lain untuk mempermudah perancangan web yaitu adanya zoom dan hand tool yang sangat berguna untuk perancangan yang lebih spesifik. Format-format halaman web yang bisa dibuat antara lain:
a) HTML (HyperText Markup Language)
Halaman hypertext dasar yang paling dominan dipakai sebagi bahasa markup
untuk halaman web. HTML menyediakan fasilitas untuk menjelaskan struktur informasi dalam bentuk teks di dokumen. HTML ditulis menggunakan tag-tag
yang memungkinkan webmaster membuat halaman web dengan berbagai jenis pemformatan. Model kerja HTML diawali dengan permintaan suatu halaman
web oleh browser. Berdasarkan URL (Uniform Resource Locator) atau dikenal dengan sebutan alamat internet, browser mendapatkan alamat dari
web server, mengidentifikasi halaman yanng dikehendaki, dan menyampaikan segala informasi yang dibutuhkan oleh web server. Selanjutnya, web server
akan mencarikan berkas yang diminta dan memberikan isinya ke browser. Browser yang mendapatkan isinya segera melakukan proses penerjemahan kode HTML dan menampilkannya ke layar pemakai. Skema model kerja HTML dapat dilihat pada gambar 2.1 berikut:
Permintaan HTTP (sesuatu.html) Tanggapan HTTP Klien Gambar 2.1 Skema HTML
b) CSS (Cascading Style Sheet)
CSS adalah bahasa stylesheet yang digunakan untuk menentukan deskripsi cara penampilan dokumen yang ditulis menggunakan bahasa markup. CSS biasanya digunakan untuk mengatur tampilan halaman web yang ditulis menggunakan bahsa pemrograman HTML dan XHTML (Zaki, 2007).
2. PHP
PHP merupakan singkatan dari ”PHP: Hypertext Preprocessor” adalah skrip yang dijalankan di server. Hasilnyalah yang dikirimkan ke klien, tempat pemakai menggunakan browser. Keuntungan penggunaan PHP, kode yang menyusun program tidak perlu diedarkan ke pemakai sehingga kerahasiaan kode dapat dilindungi (Kadir, 2002).
Web Server
Browser
Secara khusus, PHP dirancang untuk membentuk web dinamis. Artinya, ia dapat membentuk suatu tampilan berdasarkan permintaan terkini. Misalnya, bisa menampilkan isi database ke halaman web. Pada prinsipnya, PHP mempunyai fungsi yang sama dengan skrip-skrip seperti ASP (Active Server Page), ColdFusion, ataupun
Perl (Kadir, 2001).
Kelahiran PHP bermula saat Rasmus Ledorf membuat sejumlah skrip Perl
yang dapat mengamati siapa saja yang melihat daftar-daftar riwayat hidupnya, yakni pada tahun 1994. Skrip-skrip ini selanjutnya dikemas menjadi tool yang disebut
Personal Home Page. Paket inilah yang menjadi cikal bakal PHP. Pada tahun 1995,
Rasmus menciptakan PHP/FI
pemrogram dapat menempelkan kode terstruktur di dalam tag HTML. Kode PHP juga bisa berkomunikasi dengan database dan melakukan perhitungan-perhitungan yang kompleks sambil jalan (Kadir, 2001).
Pada saat ini, PHP cukup populer sebagai peranti pemrograman web,
terutama di lingkungan Linux. Walaupun demikian, PHP sebenarnya juga dapat berfungsi pada server-server yang berbasis Unix, Windows NT, dan Macintosh.
Bahkan versi untuk Windows 95/98juga tersedia (Kadir, 2001).
Pada awalnya, PHP dirancang untuk diintegrasikan dengan web server Apache. Namun, belakangan PHP juga dapat bekerja dengan web server seperi PWS (Personal Web Server), IIS (Internet Information Server), dan Xitami (Kadir, 2001).
Skrip PHP berkedudukan sebagai tag dalam bahasa HTML (bahasa standar
untuk membuat halaman-halaman web). Model kerja HTML diawali dengan
dengan sebutan alamat internet, browser mendapatkan alamat dari web server,
mengidentifikasikan halaman yang dikehendaki, dan menyampaikan segala informasi yang dibutuhkan oleh web server. Selanjutnya, web server akan mencarikan berkas yang diminta klien dan memberikan isinya ke browser. Browser yang mendapatkan isinya segera melakukan proses penterjemahan kode HTML dan menampilkannya ke layar pemakai (Kadir, 2001). Konsep kerja PHP dapat dilihat pada gambar 2.2 berikut: Permintaan HTTP (sesuatu.php) Tanggapan Klien HTTP Gambar 2.2 Skema PHP 3. MySQL
MySQL merupakan software sistem manajemen basis data (Database Management System-DBMS) yang sangat populer di kalangan pemrogram web,
terutama di lingkungan Linux dengan menggunakan skrip PHP dan Perl. MySQL
Web Server
Browser Kode HTML
Mesin PHP Skrip PHP
merupakan database yang paling populer digunakan untuk membangun aplikasi web
yang menggunakan database sebagai sumber dan pengelola datanya (Sidik, 2003). Kepopuleran MySQL dimungkinkan karena kemudahannya untuk digunakan, cepat secara kinerja query, dan mencukupi untuk kebutuhan database perusahaan- perusahaan skala menengah dan kecil. MySQL merupakan database yang digunakan oleh situs-situs terkemuka di internet untuk menyimpan datanya. MySQL digunakan oleh banyak portal-portal internet sebagai basis data dari informasi yang ditampilkan pada situs web (Sidik, 2003).
MySQL memiliki beberapa keistimewaan, antara lain (Sidik, 2003): a) Portability
MySQL dapat berjalan stabil pada berbagai sistem operasi seperti
Windows, Linux, FreeBSD, Mac Os X Server, Solaris, Amiga, HP-UX dan masih banyak lagi.
b) Open Source
MySQL didistribusikan secara open source (gratis), dibawah lisensi GPL (General Public License) sehingga dapat digunakan secara cuma- cuma tanpa dipungut biaya dari situs resminya http://www.mysql.com c) Multiuser
.
MySQL dapat digunakan oleh beberapa user dalam waktu yang bersamaan tanpa mengalami masalah atau konflik. Hal ini memungkinkan sebuah database server MySQL dapat diakses klien secara bersamaan.
d) Performance Tuning
MySQL memiliki kecepatan yang menakjubkan dalam menangani query
sederhana, dengan kata lain dapat memproses lebih banyak SQL per satuan waktu.
e) Column Types
MySQL memiliki tipe kolom yang sangat kompleks, seperti
signed/unsigned integer, float, double, char, blob, text, date, time, timestamp, year, set serta enum.
f) Command and Functions
MySQL memiliki beberapa operator dan fungsi secara penuh yang mendukung perintah Select dan Where dalam query.
g) Security
MySQL memiliki beberapa lapisan sekuritas seperti level subnetmask, nama host, dan izin akses user dengan sistem perizinan yang mendetail serta password terenkripsi.
h) Scalability dan Limits
MySQL mampu menangani database dalam skala besar, dengan jumlah
record lebih dari 50 juta dan 60 ribu tabel serta 5 miliar baris. Selain itu batas indeks yang dapat ditampung mencapai 32 indeks pada tiap tabelnya.
i) Connectivity
j) Localisation
MySQL dapat mendeteksi pesan kesalahan pada client dengan menggunakan lebih dari dua puluh bahasa.
k) Interface
MySQL memiliki interface (antar muka) terhadap berbagai aplikasi dan bahasa pemrograman dengan menggunakan fungsi API (Application Programming Interface).
l) Clients dan Tools
MySQL dilengkapi dengan berbagai tool yang dapat digunakan untuk administrasi database, dan pada setiap tool yang ada disertakan petunjuk
online.
m) Struktur Tabel
MySQL memiliki struktur tabel yang lebih fleksibel dalam menangani
ALTER TABLE, dibandingkan database lainnya semacam PostgreSQL
ataupun Oracle.
Fungsi (function) adalah suatu rutin khusus yang disediakan oleh MySQL untuk melakukan manipulasi suatu data. Fungsi dalam MySQL dibedakan menjadi (Sidik, 2003):
1. Fungsi sistem
Kelompok fungsi sistem adalah kelompok fungsi yang memberikan informasi tentang pemakaian server database oleh pemakai.
2. Fungsi agregat
Fungsi agregat adalah fungsi standar di dalam SQL, suatu fungsi yang dilakukan untuk summary, merupakan fungsi statistik standar yang dikenakan pada suatu tabel atau query. Fungsi agregat merupakan fungsi
built-in yang hampir pasti ada dalam sistem database relasional. 3. Fungsi aritmatika
Fungsi aritmatika berhubungan langsung dengan manipulasi aritmatika. MySQL memiliki fasilitas dasar untuk melakukan manipulasi data numerik, seperti perkalian, penjumlahan, pengurangan, perkalian dan pembagian, yang disertakan dalam suatu perintah select. Fasilitas tersebut dikenal dengan operator aritmatika.
4. Fungsi string
Fungsi string dilakukan untuk melakukan manipulasi data teks (string). MySQL menyediakan banyak fungsi built-in untuk melakukan manipulasi teks ini.
5. Fungsi tanggal
Tanggal dalam MySQL menggunakan yanggal dari sistem Unix, tidak ada masalah sampai dengan tahu 2069. Semua tahun yang dinyatakan dengan dua digit diasumsikan tahun tersebut ada pada range tanggal antara tahun 1970 sampai 2069. Jika dimasukkan tahun 01 maka akan dianggap tahun 2001.
6. Fungsi logika
Fungsi logika merupakan fungsi yang disediakan oleh MySQL untuk melakukan evaluasi suatu ekspresi. Berdasarkan nilai ekspresi ini akan dihasilkan suatu nilai yang akan ditampilkan pada hasil query.
e. Menggabungkan Desain dan Pemrograman Web
Tahap berikutnya dari pembuatan situs web adalah dengan melakukan penggabungan desain dan pemrograman web yang telah dibuat sebelumnya. Tahap ini merupakan tahap yang paling penting, dan perlu keahlian dan perhitungan yang cermat (Egganimation, 2007).
Sebelum melakukan penggabungan desain dan pemrograman web, sebaiknya ditentukan terlebih dahulu jenis layout (tata letak) yang akan digunakan. Format
layout banyak digunakan karena banyak menampung informasi dalam suatu halaman, disamping itu layout jenis ini dapat membuat desain yang telah dibuat terlihat seimbang dan indah dilihat. Model layout split dibagi menjadi lima bagian, yaitu
header, banner, menu kiri, body dan footer (Egganimation, 2007).
Bagian header ditempati oleh desain header yang telah dibuat. Bagian menu kiri akan dipakai untuk menampilkan menu kategori. Dan terakhir bagian footer
ditempati oleh keterangan siapa pembuat situs web (Egganimation, 2007).
f. Publishing
Setelah proses pembuatan situs web selesai dan semua link dapat berfungsi dengan baik, maka langkah selanjutnya adalah dengan mempublikasikan halaman
situs web tersebut. Proses publishing ini dapat dilakukan dengan localhost (intranet) atau upload di internet (Kurniawan, 2008).
Proses publishing dengan menggunakan localhost dapat menggunakan program web server seperti Apache. Apache adalah web server yang dapat dijalankan di banyak sistem operasi (Unix, BSD, Microsoft Windows dan Novell Netware serta
platform lainnya) yang berguna untuk melayani dan memfungsikan situs web.
Protokol yang digunakan untuk melayani fasilitas web ini menggunakan HTTP (Kurniawan, 2008).
Dengan proses ini situs web yang kita buat dapat ditampilkan dikomputer tanpa terhubung dengan jaringan internet. Selanjutnya publishing yang terhubung dengan jaringan internet dapat dilakukan dengan pembelian tempat domain dan
hosting, kepada perusahaan pengelola web yang menyediakan pembelian domain dan
hosting (Egganimation, 2007).
g. Evaluasi dan perawatan
Setelah melalui proses sebelumnya, yaitu tahap perancangan, desain, pemrograman, penggabungan desain dan publishing, maka secara keseluruhan situs
web sudah selesai dan siap diakses oleh semua orang lewat internet. Tahap selanjutnya adalah proses evaluasi terhadap situs web ini. Evaluasi situs web dapat berupa proses maintenance (perawatan) bagi suatu situs web serta pengembangannya (Egganimation, 2007).