Konsultan IT

Helo Work.....

Menjadi seorang master bukanlah sebuah hal yang mudah-mudah saja bukan...tidak menutup kemungkinan anda bakal jadi seorang master, tergantung profesi yang anda dalami. menyinggung kata progremer so..pasti indetik ama Souce Code yang geli-geli asyik saat mengkondingnya.

Anda tidak cukup menjadi seorang master progremer hanya berbekalan yang diturunkan oleh Dosen dimana anda mengenyam pendidikan, mukin anda perlu untuk terus belajar dan bertanya kepada temen-temen anda, Google dan berbanyaklah untuk membaca buku.

Anda pingin jadi seorang Progremer Web..? anda berkeinginan untuk membuat sebuah website yang profisional katakanlah seperti web detik.com.

Ok saya tahu jika anda berkeinginan apa yang terlebih dahulu anda siapkan dalam membuat sbuah proyek website.

Planning
Designing
Conding
Testing
Promotion
Maintenace

pada kali ini saya akan memberikan sedikit gambaran tentang proses pembuatan website dimulai dari

1. Perancanaan Web (Planning)

Sang bijak berkata, "Gagal merencanakan = Merencanakan kegagalan" Ingat To....he..he.., perencanaan harus dibuat sematang mukin kalau telor setengah matang sih Mantap@...tapi kalau perencanaan proyek setengah mateng amit amit deh bisa gatot alias Gagal Total.

Dalam perencanaan Website memiliki 4 tahap perencanaan apaan to....yaitu :

1. Menentukan tema atau tujuan website

2. Mengumpulkan data

3. Membuat kerngka situs/peta situs

4. Membuat jadwal kerja untuk setiap web devloper.

2. Mendesain Web (Web Design)

Nah ini bagian si web designer yang tugasnya berbagai juru gambar dan desain website, seperti menentukan benuk desain serta elemen-elemen yang terdapat di dalam website. Logout, content website, kombinasi warna, dan bentuk huruf yang sesuai dengan karakteristik website. Ok saya anggap anda sudah memahami dalam tata cara Mendesain.

3. Pemrograman Web (Conding)

Tahap conding merupakan tahap paling sulit dan memakan waktu yang lama di bandingkan tahap yang lain. dan tanpa conding, semua yang di buat dan di rancang termasuk desain tidak dapat berfungsi.

Conding atau scripting dalam pemrogrman web di bagi menjadi 2 yaitu: Client side scripting dan server side scriptin. untuk pengertian tentang client dan server yang telah disebuat diatas anda cari aja di google ok.

Waduh....capek uga nie ngetiknya, dan anda uga bosen membacanya kan. mending stop aja ngetik2, kita masuk tahap ngeconding aja@....

Ok saya akan memberi contoh tentang membuat sebuah website yang berjudul Gardamatang, yang harus kita cipakan tentu databasenya dulukan...he..he...

Patikan anda sudah membuat nama database nya. dan tabel data besenya. biar ente gax bingung2 Download aja di SINI. jika anda sudah mendownloadnya Extract maka akan telihat file format sql, itu merupakan file databasenya. langkah-langkah yang anda lakukan untuk memasukan database tersebut ke server localhost anda caranya :

1. buka mozilla atau internet explorer ketik localhost.

2. buat nama databasnya sesuai dengan nama database di format sql tadi.

3. kemudian klik Import dan browser file tadi lebih jelas bisa dilihat di gambar di bawah ini :

4. jika anda benar melakukannya maka akan terlihat deretan tabel database sebelah kiri.

sampai di sini cara untuk membuat databasenya sudah siap. tinggal membuat halaman website, saatnya melakukan conding program.....

1. Buka Notepat dan sikat kode ini simpan dengan ektensi index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>kabarburung.com</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper">

<div id="header"></div>

<div id="leftcontent">

 

 <?php include "kiri.php"; ?>

 

  

</div>

<div id="rightcontent">

 

 <?php include "kanan.php"; ?>

 

  

</div>

<div id="clearer"></div>

<div id="footer">Copyright © 2009 by kabarburung.com. All Rights Reserved.</div>

</div>

</body>

</html>

pada souce kode di atas merupakan halaman yang pertama sekalai di eksekusi pada saat kita menjalakan program nantinya kode include merupakan sebuah paremeter pemanggilan yang akan di tampilkan pada sebuah halaman web. Ok lanjut aja sekarang kita buat halaman kanan.php

2.kanan.php

<?php

// Form Pencarian

echo "<img src=images/search.jpg> 

 <form method=POST action='?module=hasilcari'>

 <input name=kata type=text size=20 />

 <input type=submit value=Cari />

 </form>

 <hr color=#FCEDC7 noshade=noshade>";

// Menu Kategori

echo " <img src='images/mainmenu.jpg'> ";

echo "• <a href='index.php'> Home</a> ";

$kategori=mysql_query("select * from kategori order by nama_kategori");

while($k=mysql_fetch_array($kategori)){

echo "• <a href='?module=detailkategori&id=$k[id_kategori]'> $k[nama_kategori]</a> ";

}

echo " <hr color=#FCEDC7 noshade=noshade>";

// Agenda

echo " <img src=images/agenda.jpg> ";

$agenda=mysql_query("SELECT * FROM agenda ORDER BY id_agenda DESC");

while($a=mysql_fetch_array($agenda)){

 $tgl_agenda = tgl_indo($a[tgl_mulai]);

echo "• $tgl_agenda </a> ";

echo "<a href='?module=detailagenda&id=$a[id_agenda]'> $a[tema]</a> ";

}

echo "<hr color=#FCEDC7 noshade=noshade> ";

// Banner

$banner=mysql_query("SELECT * FROM banner

 ORDER BY id_banner DESC");

while($b=mysql_fetch_array($banner)){

echo "<center><a href=$b[url]><img src='foto_banner/$b[gambar]' border=0></a></center> ";

}

?>

ini merupakan script yang di panggil di halaman index.php tadi yaitu inculde "kanan.php", kemudian kita buat lagi kiri.php

3.kiri.php

<?php

include "config/koneksi.php";

include "config/fungsi_indotgl.php";

// Modul detail berita

if ($_GET[module]=='detailberita'){

 $detail=mysql_query("SELECT * FROM berita,users

 WHERE users.username=berita.username

 AND id_berita='$_GET[id]'");

 $d = mysql_fetch_array($detail);

 $tgl = tgl_indo($d[tanggal]);

 echo "$d[hari], $tgl - $d[jam] WIB ";

 echo "$d[judul] ";

 echo "Diposting oleh : $d[nama_lengkap] - Dibaca: $d[dibaca] kali ";

// Apabila ada gambar dalam berita, tampilkan

 if ($d[gambar]!=''){

 echo "<img src='foto_berita/$d[gambar]' border=0>";

 }

 $isi_berita=nl2br($d[isi_berita]); // membuat paragraf pada isi berita

 echo "$isi_berita";

// Apabila detail berita dilihat, maka tambahkan berapa kali dibacanya

mysql_query("UPDATE berita SET dibaca=$d[dibaca]+1

 WHERE id_berita='$_GET[id]'");

}

// Modul berita per kategori

elseif ($_GET[module]=='detailkategori'){

// Tampilkan nama kategori

$sq = mysql_query("SELECT nama_kategori from kategori where id_kategori='$_GET[id]'");

$n = mysql_fetch_array($sq);

echo "» Kategori : $n[nama_kategori] ";

// Tampilkan daftar berita sesuai dengan kategori yang dipilih

 $sql = "SELECT * FROM berita WHERE id_kategori='$_GET[id]'

 ORDER BY id_berita DESC";

 $hasil = mysql_query($sql);

 $jumlah = mysql_num_rows($hasil);

 // Apabila ditemukan berita dalam kategori

 if ($jumlah > 0){

 while($r=mysql_fetch_array($hasil)){

 $tgl = tgl_indo($r[tanggal]);

 echo "$r[hari], $tgl - $r[jam] WIB ";

 echo "<a href=?module=detailberita&id=$r[id_berita]>$r[judul]</a> ";

 // Apabila ada gambar dalam berita, tampilkan

 if ($r[gambar]!=''){

 echo "<img src='foto_berita/small_$r[gambar]' width=110 border=0>";

 }

 // Tampilkan hanya sebagian isi berita

 $isi_berita = nl2br($r[isi_berita]); // membuat paragraf pada isi berita

 $isi = substr($isi_berita,0,300); // ambil sebanyak 300 karakter

 $isi = substr($isi_berita,0,strrpos($isi," ")); // potong per spasi kalimat

 echo "$isi ... <a href='?module=detailberita&id=$r[id_berita]'>Selengkapnya</a>

 <hr color=#e0cb91 noshade=noshade />";

 }

}

else{

 echo "Belum ada berita pada kategori $_GET[nama_kat]";

}

}

// Modul hasil pencarian be

rita

elseif ($_GET[module]=='hasilcari'){

echo "» Hasil Pencarian ";

 $cari = mysql_query("SELECT * FROM berita WHERE isi_berita LIKE '%$_POST[kata]%'");

 $jumlah = mysql_num_rows($cari);

// Apabila berita ditemukan sesuai dengan kata yang diinginkan

if ($jumlah > 0){

 echo "Ditemukan $jumlah berita dengan kata $_POST[kata] : <ul>";

 while($r=mysql_fetch_array($cari)){

 echo "<li><a href='?module=detailberita&id=$r[id_berita]'>$r[judul]</a></li>";

 }

 echo "</ul>";

}

else{

 echo "Tidak ditemukan berita dengan kata $_POST[kata]";

}

}

// Halaman utama (Home)

else{

// Tampilkan 4 headline berita terbaru

 $terkini= mysql_query("SELECT * FROM berita ORDER BY id_berita DESC LIMIT 4");

 while($t=mysql_fetch_array($terkini)){

 $tgl = tgl_indo($t[tanggal]);

 echo "$t[hari], $tgl - $t[jam] WIB ";

 echo "<a href=?module=detailberita&id=$t[id_berita]>$t[judul]</a> ";

 // Apabila ada gambar dalam berita, tampilkan

 if ($t[gambar]!=''){

 echo "<img src='foto_berita/small_$t[gambar]' width=110 border=0>";

 }

 // Tampilkan hanya sebagian isi berita

 $isi_berita = nl2br($t[isi_berita]); // membuat paragraf pada isi berita

 $isi = substr($isi_berita,0,300); // ambil sebanyak 300 karakter

 $isi = substr($isi_berita,0,strrpos($isi," ")); // potong per spasi kalimat

 echo "$isi ... <a href='?module=detailberita&id=$t[id_berita]'>Selengkapnya</a>

 <hr color=#e0cb91 noshade=noshade />";

 }

// Tampilkan 5 judul berita sebelumnya (tampilkan judulnya aja)

echo "<img src=images/berita_sebelumnya.jpg> ";

$sebelum=mysql_query("SELECT * FROM berita

 ORDER BY id_berita DESC LIMIT 4,5");

 while($s=mysql_fetch_array($sebelum)){

 echo "•    

 <a href='?module=detailberita&id=$s[id_berita]'>$s[judul]</a> ";

 }

}

?>

untuk mempercantik tampilan web kita buat cssnya script cssnya seperti di bawah ini,

4. style.css

body {

 font-family: Arial, Helvetica, sans-serif;

 font-size: 12px;

 color: #993300;

 background-image: url(images/kabar_02.jpg);

 background-repeat: repeat-x;

 margin: 0px;

}

#wrapper {

 background-image: url(images/kabar_08.jpg);

 background-repeat: repeat-y;

 width: 800px;

 margin-right: auto;

 margin-left: auto;

}

#wrapper #header {

 background-image: url(images/kabar_04.jpg);

 height: 135px;

 width: 800px;

}

#wrapper #leftcontent {

 float: left;

 width: 540px;

 padding-right: 10px;

 padding-left: 20px;

 line-height: 155%;

 text-align: justify;

}

#wrapper #leftcontent .image {

 background-color: #fff;

 padding: 2px;

 margin: 3px 5px 3px 0;

 border: 1px solid #ddc688;

 float: left;

}

#wrapper #rightcontent {

 background-color: #F9C235;

 float: left;

 width: 200px;

 padding-right: 5px;

 padding-left: 10px;

}

#wrapper #clearer {

 clear: both;

}

#wrapper #footer {

 font-size: 10px;

 color: #000000;

 background-image: url(images/kabar_10.jpg);

 text-align: center;

 height: 24px;

 width: 800px;

 line-height: 175%;

}

#wrapper #leftcontent a:link {

 color: #EE1C24;

 text-decoration: none;

}

#wrapper #leftcontent a:visited {

 color: #EE1C24;

 text-decoration: none;

}

#wrapper #leftcontent a:hover {

 color: #6600CC;

 text-decoration: underline;

}

#wrapper #rightcontent a:link {

 color: #993300;

 text-decoration: none;

}

#wrapper #rightcontent a:visited {

 color: #993300;

 text-decoration: none;

}

#wrapper #rightcontent a:hover {

 color: #6600CC;

 text-decoration: underline;

}

.judul {

 font-family: Georgia;

 font-size: 20px;

 line-height: 170%;

 font-weight: normal;

 color: #EE1C24;

}

.date {

 font-size: 10px;

 line-height: 135%;

 font-style: italic;

}

.posting {

 font-size: 11px;

}

.kategori {

 font-family: Georgia;

 line-height: 175%;

 font-weight: bold;

 padding-left: 10px;

}

.agenda {

 font-weight: bold;

}

Sampai tahap ini belum bisa berjalan dengan sempurna, masih banyak konding yang harus di buat lagi....untuk mempermudah anda saya akan menguploadnya di nanti berhubung dah larut malam saya sudah ngantuk......

Pages

Konsultan IT

Kamis, 17 Januari 2013

Mater PHP

Rabu, 16 Januari 2013

Teknologi Informatika

Android

Tablet

Philips Tablet 7" LCD 8GB

Windows 8

Inilah Kelebihan dan Kekurangan Windows 8

List Menu

Bahasa pemrograman apa yang anda sukai

Populer

Facebook

Pages

Konsultan IT

Kamis, 17 Januari 2013

Mater PHP

Rabu, 16 Januari 2013

Teknologi Informatika

Android

Tablet

Philips Tablet 7" LCD 8GB

Windows 8

Inilah Kelebihan dan Kekurangan Windows 8

List Menu

Langganan

Bahasa pemrograman apa yang anda sukai

Populer

Facebook