Tampilkan postingan dengan label Design Website. Tampilkan semua postingan
Tampilkan postingan dengan label Design Website. Tampilkan semua postingan

Jumat, 09 Oktober 2009

Membuat Website untuk Pemula

Anda ingin membuat website, namun Anda masih pemula atau tidak mengerti caranya?

Maka Anda bisa menemukan layanan situs gratis yang dapat memberikan informasi untuk mengembangkan website yang professional. Anda dapat berlatih menggunakan tool membangun situs yang mudah dan control panel yang user-friendly. Anda dapat mempelajari bagaimana mengatur kode dasar HTML, mendapatkan link ke website yang gratis, yang menawarkan tool drag-and-drop dalam membangun situs, dan mempelajari bagaimana dan kapan meng-upgrade ke layanan website berbayar.

Berikut beberapa langkah untuk membuat website level pemula :

Komitmen atas content yang akan dipublikasikan di website, dengan cara merencanakan halaman dan link yang Anda inginkan di kertas sebelum menuju layanan web. Anda dapat menulis paragraph mengenai diri Anda untuk website Anda, dan simpanlah di desktop dalam folder bernama “Site”. Buat folder image dan music dala folder tersebut di desktop.

Click Yahoo.com dan click “more Yahoo Services”, sebuah list alpabet yang akan tampil dengan title “Yahoo Everything”. Dalam kolom G terdapat list GeoCities, click link tersebut dan kesempatan untuk mendapatkan website gratis telah terbuka. Sign up atau log in, tergantung jika Anda sudah memiliki account di Yahoo. Ketika account untuk website gratis sudah dibuat, maka akan terbuka akses ke control panel GeoCities.

Pilih satu dari tiga cara di Yahoo untuk membuat website. Satu point dan click website builder, sebuah halaman web atau tool website pendukung, seperti Microsoft FrontPage, Adobe GoLive, dan Macromedia Dreamweaver. Jika Anda tidak bisa memutuskan, maka click “Page Builder” untuk memulai membangun halaman web. Yahoo 'Page Builder' akan membuka sebuah editor untuk customisasi website, copy atau edit paragraph dan content website yang dibuat sebelumnya dan simpan di desktop Anda. Upload gambar dan setting link navigasi. Simpan file dan situs telah siap untuk dipublikasikan.

Anda dapat membaca informasi Yahoo mengenai tag HTML, applet, javascript. Yahoo GeoCities merupakan layanan website gratis yang paling banyak memberikan informasi pembuatan website di Internet. Layanan website gratis lainnya seperti Office Live dari Microsoft, Homestead oleh Intuit, dan Bravenet dari Dave Brave, dan setiap layanan menawarkan tool yang cool dan pilihan desain.

Anda dapat menggunakan layanan situs gratis dan mempertimbangkan control panel mana yang menyediakan tool yang mudah digunakan untuk publikasi website. Copy dan paste informasi tersebut ke file dalam folder “Site” di desktop, dan Anda bisa segera melihat website buatan Anda.

Oktober, Yahoo Shut Down Geocities


Website Geocities dari Yahoo, menjadi layanan web hosting gratis dominant, bahkan sebelum term ‘blogging’ dikumandangkan. Halaman blog gratis Geocities adalah situs MySpace ala era 90-an dengan tampilan website complete plus warna primer dan text glittering di dalamnya. Situs Geocities dibuat oleh David Bohnett dan John Rezner di tahun 1994, kemudian diakuisisi Yahoo di akhir tahun 1999 dengan nilai $2 miliar dollar.

Kini Geocities sudah berjalan 10 tahun di tahun 2009 ini, dan Yahoo sepertinya akan segera mematikan Geocities. Bulan April 2009 lalu merupakan awal pertanda Geocities akan ditutup oleh Yahoo. Yahoo telah memberitahukan kepada semua pengguna Geocities bahwa layanan tersebut akan dimatikan, dan user mungkin ingin merelokasikan content mereka ke lokasi lain.

Akhirnya tiga bulan kemudian, Yahoo telah membuat keputusan final bahwa mulai 26 Oktober 2009, website blog gratis pelopor, Geocities akan benar-benar offline, selamanya.

Selasa, 29 September 2009

8 Tips Great Website Design

1. Select a colour scheme and stick to it.
If your company has a logo or preferred colours on its stationery that’s a good start. For those of you starting from scratch, choose two or three complementary colours and stick with them – don’t change colours on every page.
The most common colour schemes include:

The most common colour schemes include:

- Red, yellow and white
- Blue and white
- Red, grey and white
- Blue, orange and white
- Yellow, grey and white.

If you’re not sure what colour scheme to choose, surf the internet and find a website that you like. You can then model your colour scheme on what already exists.



2. Use templates.

Can’t find a website you really like? Another option is to choose a template. There are many templates or pre-set designs. These come as part of your web design software (such as FrontPage) or you can check out some websites that specialise in designing templates.
3. Provide an easy to use navigation system.

This is one of the most important issues to consider when designing a website. You need to ensure your visitors can find what they are looking for easily. Most websites either display their navigation bar on the left or at the top. And since most people are used to this type of navigation, it’s best to stick with it.

It also helps to include your navigation bar at the bottom of each page to save your visitors from having to scroll back to the top.

4. Don’t go overboard on special effects

Whilst it is ok to have one or two special effects to jazz up your website, spinning graphics and logos often distract your visitor from the content, not to mention they can take too long to download. Your visitors may click away even before your spinning logo finishes loading.
5. Backgrounds

Ensure your visitors can read the text on the background, ie. no black writing on dark blue background or yellow on white. Also be careful that your links are visible before and after being visited. The default for links in most programs is blue (before being visited) and burgundy (after being visited), so if you have a dark background, ensure your links are light.

6. External Links

It is a good idea to open links to other websites in a new window. That way your visitors can easily return to your site when they are finished browsing the external link

7. Site Map & Search Feature

If you website is more than 15 pages, it is useful to have a site map or a “Search” feature to ensure your visitors can easily find what they’re looking for.

8. Content is King

While it is important that your website looks clean and professional, it is far more important that you concentrate your efforts on the content and promotion.

If you want a professional website, things to stay away from include:

1. Flash intros, revolving globes, bevelled line separators, animated mail boxes
2. Loads of pop up or pop under boxes
3. Autoplay music. Allow your customer to play music only if they choose.
4. Hit counters of the free variety, which say “you are 27th visitor”
5. Date and time stamps, unless your website is updated daily or weekly
6. Busy backgrounds.

Don’t sweat the small stuff and get yourself focussed on what to include on the website and the best way to promote it. We will cover these topics in future articles.

Update, Delete Database with OOP


Penggunaan seleksi untuk menampilkan database menggunakan OOP telah penulis jelaskan sebelumnya. OOP dalam php 5 ini telah terbukti ampuh dalam menghasilkan source code yang efisien untuk menangani manajemen database. Tentu hambar rasanya jika penggemar sayur asam memakannya tanpa ada sedikitpun rasa garam di dalamnya. Nah begitu juga dengan artikel penulis sebelumnya, menampilkan database dengan OOP masih belum cukup tanpa pengetahuan selanjutnya mengenai bagaimana melakukan update dan delete record pada database menggunakan OOP ini. Oleh karena itu di sinilah penulis akan jelaskan sedikit penggunaan OOP untuk menghandle database. Untuk mempelajarinya mari buat databasenya terlebih dahulu :

-- simple cms database
create database simplecms ;
use simplecms ;
create table article( id int(4) primary key auto_increment, category varchar(225), article_title varchar(225) );
insert into article values('','web design', 'Web Design Make Over with CSS');
insert into article values('','graphic design','CorelDraw the handy tool');
insert into article values('','flash animation','Make a splash water animation');

Ya, langsung saja penulis berikan contoh kasusnya, script intinya, index.php, dan biasanya script seperti ini digunakan sebagai halaman admin. Tentunya admin disini dapat melakukan update dan delete record database.


$mysqli = new mysqli("localhost", "root", "", "simplecms");
if (mysqli_connect_errno())
{
echo("Nggak bisa konek : ".mysqli_connect_error());
exit();
}
$cat = $mysqli->prepare("select id, category, article_title from article order by id");
$cat->execute();
$cat->bind_result($id, $category, $article_title);
?>



Database in OOP Way ; Seleksi Data dengan mySqli






while ($cat->fetch())
echo ""."";
?>
SIMPLECMS CONTROL PANEL :
No Category Title
".$id." ".$category." ".$article_title."
.$id.">EDIT DELETE



if ($_REQUEST['yang_ini_didelete'] == 'ya')
{
echo "Wah... record ".$_REQUEST['id_nya']." bener-bener mau di hapus ya ?" ;
echo "



";
}

else if ($_REQUEST['delete_langsung_lah'] == 'ya')
{
$id_delete = $_POST['id'];
$cat = $mysqli->prepare("delete from article where id=?");
$cat->bind_param('i',$id);
$id = $id_delete;
$cat->execute();
echo "Database berhasil dihapus ... Anda akan diredirect dalam 2 detik";
echo "";
}

else if ($_REQUEST['yang_ini_diedit'] == 'ya')
{
$cat = $mysqli->prepare("select id, category, article_title from article where id=?");
$cat->bind_param('i',$id);
$id = $_REQUEST['id_nya'];
$cat->execute();
$cat->bind_result($id, $category, $article_title);
echo "Yang mau diedit...";
echo "";
while ($cat->fetch()) {
echo "";
echo "";
echo "";
echo "";
echo "
Category : ".$category."
Title : ";
echo $article_title ; }
echo "

";
}

else if ($_REQUEST['update_langsung_lah'] == 'ya')
{
$category = str_replace("_"," ",$_POST['category']);
$title = $_POST['title'];
$id = $_POST['id'];

$cat = $mysqli->prepare("update article SET category ='$category', article_title = '$title' where id=?");
$cat->bind_param('i',$id);
$cat->execute();

echo "Database berhasil diupdate ... Anda akan diredirect dalam 2 detik";
echo "";

}
?>




Tampilannya nanti akan seperti ini :


Potongan source code di bawah ini digunakan untuk menampilkan database dengan cara OOP. Seperti yang pernah penulis jelaskan dalam artikel pertama mengenai penggunaan OOP dalam PHP 5 untuk memanage database.

$mysqli = new mysqli("localhost", "root", "", "simplecms");
if (mysqli_connect_errno())
{
echo("Nggak bisa konek : ".mysqli_connect_error());
exit();
}
$cat = $mysqli->prepare("select id, category, article_title from article order by id");
$cat->execute();
$cat->bind_result($id, $category, $article_title);

Penjelasan detilnya dapat dilihat di artikel sebelumnya. Di sini penulis akan menjelaskan beberapa fungsi baru OOP dalam PHP 5. Lihat kembali fungsi tersebut pada baris ini :

...
$cat = $mysqli->prepare("delete from article where id=?");
$cat->bind_param('i',$id);
$id = $id_delete;
$cat->execute();
echo "Database berhasil dihapus ... Anda akan diredirect dalam 2 detik";
echo "";
...

Di dalam barisan tersebut terdapat kalimat pembentuk query sql yang sedikit berbeda, yaitu :
$cat = $mysqli->prepare("delete from article where id=?");

Terdapat tanda '?' sebagai perwakilan dari parameter syarat. Tanda tanya ini nantinya akan didefinisikan sebagai satu syarat dalam satu variable menggunakan fungsi bind_param(), sehingga jika sebuah query didefinisikannya seperti ini :
cat = $mysqli->prepare("delete from article where id=?");

maka, harus terdapat fungsi bind_param() sesudahnya, seperti :
$cat->bind_param('i',$id);

Sehingga 2 baris kalimat tersebut sama halnya dengan query biasa, jika dalam query biasa maka hasilnya seperti ini :

$cat = "delete from article where id='$id'";

Setali 3 uang. :D. Ya ya ya ... tapi coba perhatikan kembali fungsi bind_param pada kalimat tersebut :
$cat->bind_param('i',$id);

Dalam parameter pertama fungsi bind_param di isi dengan 'i'.
Kenapa dengan 'i' ?, i ini adalah perwakilan dari variable yang bertipe integer. Dalam query seperti ini delete from article where id='$id', mustahil jika mengisinya dengan string, kenapa ? lihat struktur tablenya. :D, hasilnya nanti akan 0 jika menggunakan string. Adapun type dari parameter tersebut antara lain yaitu :

i : ini untuk variable yang bertipe integer
s : ini untuk variable yang bertipe string
d : ini untuk variable yang bertipe double
b : ini untuk variable yang bertipe blob.

Ya kita lompat ke baris berikutnya :
$id = $id_delete;
Statement ini hanyalah sebuah assignment, memenuhi syarat sebelumnya.

Selanjutnya adalah menjalankan querynya, eksekusi langsung :D , yakni :
$cat->execute();

Kembali muncul satu pertanyaan, bagaimana jika menggunakan update database dalam oop ? Silahkan lihat kembali baris di bawah ini :

$cat = $mysqli->prepare("update article SET category ='$category', article_title = '$title' where id=?");
$cat->bind_param('i',$id);
$cat->execute();

Sepertinya sudah jelas ya. Smile.

Definisikan terlebih dahulu querynya :
$cat = $mysqli->prepare("update article SET category ='$category', article_title = '$title' where id=?");

Penuhi syarat query tersebut :
$cat->bind_param('i',$id);

Jalankan querynya :
$cat->execute();

Lebih dalam dengan operasi string bag.1


Operasi string begitu penting dalam dunia per-php-an. Kenapa begitu penting ? Karena melakukan pekerjaan dengan php, baik itu membangun suatu sistem informasi, membuat fasilitas searching di web, dan berbagai hal lain yang berhubungan dengan web development tak lepas dari operasi string. Begitu banyak fungsi operasi string yang ada, dan banyak pula fungsi string yang sering digunakan, sehingga penulis perlu membaginya menjadi beberapa artikel mengenai operasi string ini. Untuk artikel bagian pertama penulis akan menjelaskan 2 fungsi yang memiliki tugas tambahan selain dari mencari string. Antara lain :

* substr()
* strstr()


Substr(), memiliki fungsi untuk mengambil satu, atau banyak karakter dari suatu variable. Implementasinya seperti mengambil karakter yang dihasilkan dari fungsi DATE() –nya mysql. Contoh penggunaannya adalah sebagai berikut :


$tanggal = '012409';

$bulan = substr($date, 0, 2);
$hari = substr($date, 2, 2);
$tahun = substr($date, -2);

echo "$hari/$bulan/$tahun";
?>

Hasilnya adalah :
24/01/09

Penjelasannya adalah sebagai berikut :

$bulan = substr($date, 0, 2);
Ambil 2 karakter dari digit terdepan, hasilnya adalah 01

$hari = substr($date, 2, 2);
Ambil 2 karakter dari digit ke 3. Karena string memiliki urutan awal 0, maka angka 2 pada variable $tanggal memiliki posisi di urutan ke 2. Hasilnya adalah 24.

Untuk membuktikannya :

$tanggal = '012409';
echo $tanggal[2];
?>

hasilnya adalah :
2

Dan yang terakhir adalah
$tahun = substr($date, -2);
Ini berarti ambil 2 karakter dari belakang. Hasilnya adalah 09.


Strstr(), fungsi ini digunakan untuk mengembalikan semua string dibelakang string yang dicari. Misalnya ada sebuah kalimat :
"Ketampanan abadi terpancar dari Kegantengan sejati . --Al-k",
karakter yang dicari adalah "--",
maka hasil dari fungsi strstr() adalah "--Al-k"

Contoh penggunaanya :


$kalimat= "Ketampanan abadi terpancar dari Kegantengan sejati . --Al-k";
$tanda = '--';
$yangdicari = strstr ($kalimat, $tanda);
echo $yangdicari;
?>

Hasilnya adalah :
--Al-k

Implementasi penggunaan strstr() contohnya seperti ini :

$kalimat= "Ketampanan abadi terpancar dari Kegantengan sejati . --Al-k";
$tanda = '--';

if ($yangdicari = strstr ($kalimat, $tanda)) {
echo 'Ungkapan yang keren tadi di buat oleh '."'". substr ($yangdicari , strlen ($tanda))."'";
} else {
echo "Nggak ada ungkapan tuhh !!";
}
?>

Penjelasannya adalah sebagai berikut :

if ($yangdicari = strstr ($kalimat, $tanda)) {
jika karakter yang di cari dalam hal ini $tanda ada pada string $kalimat, maka kembalikan string yang berada di belakang tersebut kedalam variable $yangdicari.

echo 'Ungkapan yang keren tadi di buat oleh '."'". substr ($yangdicari , strlen ($tanda))."'";

bagian intinya adalah substr ($yangdicari , strlen ($tanda))

Jika di ubah kedalam nilai sebenarnya adalah
substr ("--Al-k" , 2 )

tampilkan string yang dicari tersebut dengan melewatkan tanda --.

Hasilnya adalah :
Al-k

Sehingga hasil keutuhan dari script


$kalimat= "Ketampanan abadi terpancar dari Kegantengan sejati . --Al-k";
$tanda = '--';

if ($yangdicari = strstr ($kalimat, $tanda)) {
echo 'Ungkapan yang keren tadi di buat oleh '."'". substr ($yangdicari , strlen ($tanda))."'";
} else {
echo "Nggak ada ungkapan tuhh !!";
}
?>

Adalah :

Ungkapan mantap tadi di buat oleh 'Al-k'

Cukup mudah ya ? Cukup narsis juga ! :D

Artikel Lebih dalam dengan operasi string bagian pertama saya cukupkan sampai disini. Untuk bagian ke 2 dan terakhir akan penulis jelaskan di belajar php berikutnya.

Operasi String Bagian 2


Ya, kali ini penulis akan coba sedikit jelaskan bagaimana memanfaatkan fungsi substr untuk mengubah suatu variable berisi int/float menjadi nilai mata uang.
Sebagai contohnya, dalam artikel ini penulis akan coba jelaskan bagaimana merubah,
93250750502500 menjadi Rp 93.250.750.502.500.-

Berikut adalah source code lengkapnya :


$uang = 93250750502500 ;
$digituang = strlen($uang);
$bagihabis3 = $digituang % 3 ;
$sisadigit = $digituang - 3 ;
for ($i=3;$i <= $digituang; $i+=3)
{
$uangasli = substr($uang, -$i, 3).".".$uangasli;
if ($i >= $sisadigit)
{
$uangasli = "Rp ".substr($uang, 0, $bagihabis3).".".$uangasli."-";
}
}
print $uangasli;
?>

Cara kerja script ini adalah sebagai berikut,

menghitung berapa digit angka yang akan di konversi.
$digituang = strlen($uang);

selanjutnya bagi habis variable tersebut,
$bagihabis3 = $digituang % 3 ;
hal ini digunakan untuk mewaspadai apabila nanti jumlah nilai uangnya tidak bisa dibagi habis 3.

kemudian,
$sisadigit = $digituang - 3 ;
ini digunakan sebagai persiapan untuk menampilkan angka paling depan, jika jumlah digit uang tidak bisa di habis oleh 3.

dan script intinya yang melakukan pengulangan fungsi substr,
for ($i=3;$i <= $digituang; $i+=3)
{
$uangasli = substr($uang, -$i, 3).".".$uangasli;

jika jumlah digitnya tidak bisa dibagi 3
if ($i >= $sisadigit)
{

maka ambil x angka dari depan.
$uangasli = "Rp ".substr($uang, 0, $bagihabis3).".".$uangasli."-";
}
}

print $uangasli;
?>

sebenarnya pengulangan di atas itu sama dengan fungsi di bawah ini :
$uangasli = substr($uang,-11,2).".".substr($uang,-9,3).".".substr($uang,-6,3).".".substr($uang,-3,3);

Mungkin ada kalanya anda memiliki algoritma sendiri yang lebih mantap, silahkan dikembangkan. Selamat ber-php ria. Wink

Senin, 28 September 2009

Tutorial Membuat Website Gratis (untuk pemula)

Anda tertarik untuk membuat website tetapi belum paham betul HTML? Anda bisa mencoba Yahoo Geocities. Dengan langkah-langkah berikut, dalam 10 menit website Anda sudah jadi. Anda bisa menggunakan Page Wizard untuk membuat halaman website dengan cepat tanpa pemrograman. Tidak percaya? Dicoba dulu ya …

Anda akan membuat blog atau website? Anda bisa membuat website untuk menawarkan produk, profile pribadi atau perusahaan, atau sekedar nampang. Anda bisa membuat blog untuk menyalurkan ide Anda yang isinya selalu berkembang setiap hari.

Jika Anda akan membuat blog, caranya sangat mudah. Tinggal daftar saja ke wordpress.com atau blogger.com. Tutorial membuat blog klik di sini. Jika Anda mau membuat website, Anda perlu tempat hosting. Web hosting adalah tempat menaruh file Anda di Internet. Webhosting ada yang bayar ada yang gratis. Web hosting gratis misalnya:

1. Yahoo Geocities. Alamatnya http://www.geocities.com
2. 50webs. Alamatnya http://www.50webs.com
3. Tripod. Alamatnya http://www.tripod.com

Web hosting yang bayar misalnya:

1. Bali Web Hosting. Alamatnya: http://www.balinter.net
2. Bandung web hosting. Alamatnya: http://www.qwords.com

Dalam tutorial ini hanya dibahas bagaimana membuat website di Yahoo Geocities.

Kenapa Geocities? Pertama, Anda tidak perlu repot-report registrasi ulang jika sudah memiliki email di Yahoo. Cukup login di Yahoo Mail. Trus ketik http://www.geocities.com. Otomatis Anda sudah dapat memulai website. Kedua, banyak sekali layanan web hosting yang gratis berguguran atau berubah menjadi bayar, sepertinya Geocities tidak akan seperti ini, karena jaringan Yahoo sangat kuat dan Yahoo adalah perusahaan yang cukup besar.

Okey, sekarang kita mulai membuat website. Langkah-langkahnya:

1. Klik di sini http://www.geocities.com, login dengan Yahoo ID dan password Anda.
2. Jika Anda sudah membuat website dan menyimpannya di komputer, pilih EASY UPLOAD atau klik link berikut: http://geocities.yahoo.com/v/ul.html
3. Upload file Anda.
4. Jika Anda sama sekali belum membuat website, pilih PAGE WIZARD. Klik link berikut: http://geocities.yahoo.com/v/w
5. Dalam PAGE WIZARD, pilih model yang sesuai dengan selera Anda, isi website Anda.
6. Ikuti langkah-langkah yang ada.
7. Selesai. Website Anda punya alamat: www.geocities.com/yahoo_id_anda

Cukup mudah bukan?

Selamat praktek, jangan takut salah.