[Kuliah Rekayasa Web] Manipulasi Desain Web dengan Template

Bicara tentang keberhasilan pengembangan website, tentu tidak bisa terlepas dari desain yang menarik. Tetapi hari gini, menghasilkan desain web yang menarik bukanlah pekerjaan yang susah. Ada banyak model desain yang telah disediakan oleh internet agar seseorang tidak perlu susah-sudah dalam memikirkan sebuah desain. Model desain itu seringkali dikenal dengan istilah template.

Ada banyak situs menyediakan berbagai template website yang dapat di unduh secara gratis, dapat diedit dan dimodifikasi menjadi website sesuai dengan keinginan Anda. Tentu dengan syarat dan ketentuan berlaku, seperti misalnya tetap mencantumkan footer back-link yang ada pada template tersebut. Latihan kita kali ini adalah mencoba untuk memanipulasi salah satu template yang akan kita ambil dari situs DoTemplate, untuk kemudian menghubungkannya dengan database yang kita buat sendiri.

Tentang DoTemplate
DoTemplate merupakan salah satu situs penyedia template yang bisa diunduh, dimodifikasi dan bebas  disebarluaskan secara gratis. Lihat saja penjelasan lisensi yang ada pada situs ini sebagai berikut.

License : this template is provided for free. You are free to use it, share it, redistribute it, modify it in any way you want as long as you keep a visible link back to doTemplate.com in the footer.

Artinya bahwa kita bebas menggunakan, membagikan, mendistribusikan kembali, atau memodifikasi sesuai keinginan, dengan syarat bahwa kita tidak boleh menghapus linkback ke doTemplate.com yang ada pada footer setiap tempatenya. Sip.. Sekarang mari kita coba untuk memanfaatkan template situs ini.

Langkah 1 : Pilih template dan Unduh ke Harddisk Anda

Langkah pertama tentu Anda harus mengunduh template yang Anda inginkan. Sebelum mengunduh, Anda dapat melakukan modifikasi sederhana dari template yang Anda pilih seperti mengganti header, mengubah warna, mengubah jenis huruf dan sebagainya.  Setelah itu simpan template ke harddisk Anda. Jangan lupa, jika Anda menggunakan PHP-My SQL, Anda harus menyimpan file unduhan ini ke default folder engine web server Anda seperti misalnya di dalam folder www atau htdocs.

Mengedit Index.html hasil download dengan Editplus

Langkah 2 : Modifikasi Template dengan EditPlus 

Selanjutnya Anda bisa memodifikasi template tersebut dengan menggunakan tools. Bisa Macromedia Dreamweaver atau minimal menggunakan EditPlus. Dengan Editplus, Anda bisa langsung memodifikasi kode-kode program template Anda. Setidaknya modifikasi menu, tampilan, tulisan-tulisannya dan sebagainya agar sesuai dengan keinginan.

Contoh Hasil Modifikasi Template

Langkah 3 : Mengkoneksikan Template dengan Database 

Jika Anda ingin mengisi halaman depan dari template tersebut dengan database, misalnya diisi dengan berita-berita yang bisa diinput dan diupdate dari database, maka tentu kita harus membuat databasenya terlebih dahulu. Sebagai contoh, akan dibuat sebuah database Personal dan tabel Welcome yang isinya akan ditampilkan di halaman depan web Anda. Maka Anda bisa membuat database tersebut dengan MySQL, menggunakan tools PHPMyAdmin seperti di bawah ini.

Membuat Database Personal dan Tabel Welcome dengan MySQL

Isi tabel welcome dengan data ucapan selamat datang sesuai keinginan.
Selanjutnya untuk melengkapi koneksi ke database, langkah berikutnya adalah membuat skrip koneksi.php seperti berikut ini.

<?php
$host="localhost";
$username="root";
$userpass="root";
$dbase="personal";

$koneksi=mysql_connect($host,$username,$userpass)  or die (mysql_error());
if($koneksi) 
   {
  mysql_select_db($dbase,$koneksi) or die (mysql_error());
   }
else 
   {
  echo "koneksi gagal";
   }
?>

Langkah terakhir adalah mengedit bagian ucapan selamat datang dengan skrip PHP untuk mengambil isi data base dan menampilkannya di halaman web. Skrip yang harus Anda sisipkan adalah adalah sebagai berikut.

<?php
include("koneksi.php");
$qry=mysql_query("select * from welcome");
$cek=mysql_fetch_row($qry);

if(empty($cek[0]))
{
echo ("Tidak ada berita");
}
else
{
$kueri = mysql_query("select * from welcome");
while ($baris=mysql_fetch_row($kueri)) 
{
echo("<b>$baris[1]</b><BR>");
echo("$baris[2]");
}
}
?>

Jika scrip di atas sudah di sisipkan pada halaman web, selanjutnya simpan kembali file index.html tapi ubah namanya menjadi index.php. Selanjutnya jalankan index.php melalui localhost. Jika hasilnya benar, maka isi database welcome akan tampil di halaman depan web seperti di bawah ini.

Halaman depan sudah menampilkan isi database

Dann... Akhirnya halaman depan sudah berisi database yang Anda buat.
Kata Dora : "berhasil.. berhasil.. berhasil.." hehehe...

Tugas Minggu Depan :
Lengkapi Web personal tersebut dengan data Berita dan data Agenda Kegiatan yang Anda ambil dari database buatan sendiri. Dikumpulkan  18 Juni 2014, pas praktikum.
Tuhan memberkati.

Posted in: Kulah : Rekayasa Perangkat Lunak,Kuliah : Rekayasa Web