Oleh | Dibuat | Dibaca 5.578 kali | 1 komentar

Kali ini saya akan berbagi mengenai teknik dan cara membuat website. Dulu membuat website adalah pekerjaan yang hanya bisa dilakukan oleh orang-orang tertentu. Tapi kini, saya yakin semua orang pasti bisa bikin website sendiri, baik itu website statis maupun website dinamis. Website statis adalah website yang fix, tidak mengalami perubahan secara berkala dan terjadwal, contohnya web profil. Berbeda definisinya, web dinamis yakni website yang terlihat lebih atraktif dan interaktif dengan perubahan konten yang dilakukan secara berkala, entah tahunan, bulanan, harian atupun setiap detik. Contoh web dinamis: situs penjualan online, jejaring sosial, blog, aplikasi web, dan lain-lain.

Okey, langsung saja kita ke pokok bahasan.

Website

Dalam membuat website ada beberapa (minimal 2) pemrograman yang harus kita ketahui, minimal dasar-dasar yang pokok. Adapun pemrograman tersebut adalah HTML dan/atau PHP plus CSS. HTML berfungsi untuk menginterpresent visual code menjadi visual interface di browser. Adapun CSS berguna untuk memanipulasi tampilan agar menarik dilihatnya.

Tanpa membahas sisi program, kita lanjutkan pembahasan.

Yang Harus Disiapkan Dalam Membuat Website

Kalo kita membuat website yang harus disiapkan tentunya adalah file-file desain dan template.

  1. File-file Desain
    File desain meliputi gambar-gambar yang digunakn di website, meliputi gambar untuk latar, image, logo dan sebagainya. Dalam hal pemilihan gambar, ingatlah 2 hal: tipe dan resolusi. Pilihlah gambar dengan resolusi yang tidak telalu tinggi agar loading halaman tidak dihabiskan oleh loading gambar. Biasanya resolusi yang diapliasikan untuk desain adalah 70 dpi. Adapun yang kedua, tipe, pilihlah tipe gambar yang memiliki tingkat kompresi lumayan bagus. Jangan gunakan gambar BMP atau TIFF untuk website, tapi pilihlah JPG (quality 90 kebawah), PNG atau GIF.
    Trik mengompres file gambar (JPG dan PNG) akan saya buatkan di posting khusus nanti.

  2. File Template
    File template meliputi file inti, yakni PHP (untuk web dinamis) dan/atau HTML. File template sebuah web hendaknya diupayakan dibagi menjadi beberapa bagian. Hal ini umum dilakukan oleh web developer, termasuk saya yang telah menerapkan konsep ini sejak dulu. Biasanya sebuah file di sebuah website terdiri dari bagian-bagian seperti berikut:
    Sampel Layout Website
    - header
    - footer
    - sidebar
    - konten
    Silahkan lihat sampel layoutnya pada gambar di bawah

  3. File Stylesheet (Desai Manipulasi)
    File stylesheet alangkah baiknya kalo kita pisahkan dari halaman HTML atau PHP. Tujuannya adalah mempermudah proses editing ketika ingin ganti desain warna misalnya, atau ganti gambar background. File styleshet biasanya berekstensi .css
    Untuk tutorial CSS ada di web saya.

Teknik Membuat Website

Sebenarnya membuat website tidak wajib memerlukan trik, yang penting jadi dan menarik, namun alangkah baiknya jika kita menerapkan trik-trik tertentu agar semuanya jadi lebih baik, disisi user atau pengunjung maupun kita sebagai admin atau pemilik. Adapun trik-trik yang perlu kita ketahui adalah:

  • Pemilihan resolusi dan tipe image atau gambar (sudah dijelaskan di atas)

  • Pemisahan file mejadi beberapa bagian, misalnya header.php, footer.php, sidebar.php, index.php, style.css.

  • Penggabungan file-file menjadi satu template menggunakan metode "include" (PHP)

Baiklah, anggap saja kita sudah memiliki file header.php, footer.php, sidebar.php, index.php dan style.css. Sekarang saya akan memberikan cara penggabungannya. Dalam hal ini saya contohkan di file index.php (homepage)

<?php include "header.php"; ?>
baa bla bla isi website disini
<?php include "footer.php"; ?>

Sederhana bukan???? Mungkin diantara temen-temen semua ada yang bertanya, kenapa harus dipisah, bikin repot tuh. Ya sih bikin repot tapi saya yakin akan lebih repot lagi kelo semuanya ditumpuk jadi satu file. Repotnya ketika kita akan merubah salah satu bagian, misalnya kita kan menambahkan banner di sidebar. Tentu kita harus merubah seluruh file, tapi kalo kita gunakan konsep seperti saya tadi cukup satu file yang dirubah dan selesai sudah... tidak makan waktu dan tenaga yang lebih.

Sebagai bahan praktik, silakan lihat source codenya disini:
1. file header.php
2. file footer.php
3. file sidebar.php
4. file style.css
5. file index.php

NB: Silahkan hapus "?v=source" pada URL untuk melihat tampilannya!

IBX5A4393D5E2AD7