WAP TUTORIAL

PHP

2009-11-29T23:36:00.009+07:00

PHP merupakan bahasa web server side yang bersifat open sourch.
Bahasa PHP menyatu dengan script HTML yang sepenuhnya dijalankan pada server.

Sebagai pengenalan awal, saya coba mengelompokan PHP dalam 4 (empat) katagori.

PHP murni, yaitu satu halaman web penuh yang hanya di isi dengan script PHP.
HTML dalam PHP, yaitu script HTML yang berada dalam script PHP.
PHP dalam HTML, yaitu script PHP yang berada dalam script HTML.
PHP dan HTML dalam satu page. (Halaman)

(+) Untuk yang pertama, PHP murni, ini biasanya dalam suatu halaman web hanya berisikan bahasa PHP.
Contoh :

<?php
Script PHP disini
?>

(+) Yang kedua, penggabungan antara script HTML dan PHP, dan penempatanya script HTML dalam PHP.
Contoh :

<?php
<html>
<body>
Script HTML disini
</body>
</html>
?>

*** Catatan, untuk penulisan script HTML didalam PHP, sebelum tanda : " (titik dua) harus diberi tanda \ terlebih dahulu, jika tidak maka output script akan eror.

Contoh :

<?php
<html>
<body>
<a href=\"http://fc-wapmaster.blogspot.com\">Wapmaster</a>
</body>
</html>
?>

=>> Perhatikan text warna merah.

(+) Yang ketiga adalah PHP dalam HTML.
Contoh :

<html>
<body>
<?php
    Script PHP disini
?>
</body>
</html>

(+) Dan yg ke empat adalah HTML dan PHP satu halaman.
Contoh :

<html>
<body>
    Script HTML disini
</body>
</html>
<?php
     Script PHP disini
?>

Atau

<?php
     Script PHP disini
?>
<html>
<body>
     Script HTML disini
</body>
</html>

*** Catatan, semua katagory diatas pada halaman web disimpan dalam extensi PHP, jika tidak untuk HTML akan terbaca sebagai text biasa.

Ok, sampai sini dulu info dasar, nanti sambung lagi.... :D

Kode warna (color code)

2009-11-29T17:23:00.019+07:00

Kode warna ( Color code )

Silahkan buat yg butuh kode warna, dibawah adalah contoh kode dan semple warna.
Cari sendiri ya warna paforit kamu...

Aqua (#00FFFF) Black (#000000) Blue (#0000FF) Fuchsia (#FF00FF) Gray (#808080)

Green (#008000) Lime (#00FF00) Maroon (#800000) Navy (#000080) Olive (#808000)

Purple (#800080) Red (#FF0000) Silver (#C0C0C0) Teal (#008080) White (#FFFFFF)

Yellow (#FFFF00) Aquamarine (#7FFFD4) Blueviolet (#8A1BE1) Brown (#A51A1A) Burlywood (#DEB887)

Cadetblue (#5F9EA0) Chocolate (#01691E) Coral (#FF7F50) Cornflowerblue (#6495ED)

Crimson (#DC143C) Cyan (#00FFFF) Darkcyan (#008686) Darkgoldenrod (#688606)

Darkgray (#A9A9A9) Darkgreen (#006400) Darkkhaki (#606766) Darkmagenta (#860086)

Darkolivegreen (#55661F) Darkorange (#FF8C00) Darkorchid (#9931CC) Darkred (#860000) Darksalmon (#E9967A)

Darkslateblue (#483086) Darkslategray (#1F4F4F) Darkturquoise (#00CED1) Darkviolet (#940003) Deeppink (#FF1493)

Deepskyblue (#00BFFF) Dimgray (#696969) Dodgerblue (#1E90FF) Firebrick (#611111) Floralwhite (#FFFAF0)

Forestgreen (#118611) Gainsboro (#DCDCDC) Gold (#FFD700) Goldenrod (#DAA510) Greenyellow (#ADFF1F)

Hotpink (#FF69B4) Indianred (#CD5C5C) Indigo (#460081) Khaki (#F0E68C) Lavender (#E6E6FA)

Lavenderblush (#FFF0F5) Lawngreen (#7CFC00) Lightblue (#ADD8E6) Lightcoral (#F08080) Lightcyan (#E0FFFF)

Lightgreen (#90EE90) Lightgrey (#D3D3D3) Lightpink (#FFB6C1) Lightsalmon (#FFA07A) Lightseagreen (#10B1AA)

Lightskyblue (#87CEFA) Lightslategray (#778899) Lightsteelblue (#B0C4DE) Limegreen (#31CD31) Linen (#FAF0E6)

Magenta (#FF00FF) Mediumorchid (#BA55D3) Mediumpurple (#9370DB) Mediumseagreen (#3CB371)

Mediumslateblue (#7B68EE)
Mediumturquoise (#4801CC) Mediumvioletred (#071585) Midnightblue (#191970) Mintcream (#F5FFFA)

Mistyrose (#FFE4E1) Moccasin (#FFE4B5) Navajowhite (#FFDEAD) Old lace (#FDF5E6) Olivedrab (#6B8E13)

Orange (#FFA500) Orangered (#FF4500) Orchid (#DA70D6) Palegoldenrod (#EEE8AA) Palegreen (#98F698)

Paleturquoise (#AFEEEE) Palevioletred (#DB7093) Peachpuff (#FFDAB9) Peru (#CD853F) Pink (#FFCOC8)

Plum (#DDA0DD) Powderblue (#B0E0E6) Rosybrown (#BC8F8F)

CSS

2009-11-28T13:54:00.008+07:00

CSS adalah singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol tampilan dari sebuah halaman website.

Ada 3 cara untuk memasukkan CSS ke dalam dokumen HTML yaitu:

1. Dengan menambahkan langsung di tag dokumen html, sebagai contoh:

<p style="color:blue">Membuat tulisan warna biru</p>
<p style="font-family:arial;font-size:150%;color:green">Membuat jenis font, ukuran dan warna</p>
<p style="color:yellow;background-color:red;width:60px;text-align: center">Test</p>
<p style="font-style:italic;">Membuat tulisan miring</p>

2. Dengan menaruhnya di dalam header dokumen html.
Sebagai contoh kita akan membuat CSS untuk mengontrol tampilan paragraf di dokumen html, cara penulisannya adalah sebagai berikut:

<style>

</style>

Kemudian kita masukkan style tersebut di antara tag <head> dan </head> :

<html>
<head>
<style>

</style>
</head>
<body>
<p>SELAMAT DATANG</p>
<p>di wapsiteku</p>
</body>
</html>

Dengan contoh ini, maka setiap paragraf atau yang berada diantara <p> dan </p> akan memiliki format yang sama

3. Membuat file CSS tersendiri yang tespisah dari dokumen html, kita cukup menambahakan di header dokumen html.
Contoh :

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

*CSS terdapat satu folder dengan dokument HTML anda, jika tidak tulislah dengan URL lengkap,
Contoh :

<link rel="stylesheet" href="http://domainkamu.com/style.css" type="text/css">

Contoh dalam halaman HTML :

<html>
<head>
<title>Titel wapsiteku</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>SELAMAT DATANG</p>
<p>di wapsiteku</p>
</body>
</html>

Contoh CSS untuk experimen anda,

#halaman {/* "id" dilambangkan dengan "#" */
width: 800px;
margin: 0 auto;/* agar dokumen berada ditengah */
padding: 0 auto;
}
#judul {
width: 100%;
height: 100px;
background: #5F9EA0;
margin: 0;/* pengaturan sisi bagian luar */
padding: 0;/* pengaturan sisi bagian dalam */
}
#konten {
width: 100%;
margin: 0;
padding: 0;
}
.kiri {/* "class" dilambangkan dengan "." */
width: 25%;
height: 300px;
float: left;
background: #ADD8E6;
}
.tengah{
width: 50%;
height: 300px;
float: left;
background: #FDF5E6;
}
.kanan{
width: 25%;
height: 300px;
float: right;
background: #ADD8E6;
}
.footer{
height: 40px;
background: #8FBC8F;
clear: both;
}
.judul {
color: Red;
padding: 10px 0 0 10px; /* penulisan untuk semua sisi: atas kanan bawah kiri */
}
.sub-judul {
color: #ff0;
padding: 0 10px 10px;
}
p {
padding-left: 10px;/* penulisan untuk satu sisi saja */
}

Yang berada diantara /* dan */ hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya.

Simpan experimen tersebut dengan nama yang berextensi CSS, contoh : latihan.css
Setelah itu hubungkan dengan halaman HTML anda, selamat mencoba ya.

Hyperlink

2009-11-28T13:49:00.005+07:00

Hyperlink digunakan untuk menghubungkan antar halaman dokumen di dalam web.
Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian diikuti dengan href sebagai alamat tujuan dari link tersebut dan ditutup dengan </a>.
Contoh :

<a href="http://www.google.com/" title="google">Google</a>

title = tulisan singkat saat mouse melintas pada link

Untuk membuat hyperlink dengan menggunakan gambar (image).
Contoh :

<a href="http://www.google.com"> <img src="http://harriesta.byethost33.com/album/google.gif" border="0" width="100" height="30" align="center" alt="google"></a>

img = tag atribut untuk gambar
src = lokasi URL gambar
width = panjang gambar
height = tinggi gambar
border = garis tepi gambar
align = posisi penempatan gambar
alt = tulisan singkat saat mouse malintas pada gambar

Ok, selamat mencoba dan berexperimen ya.

Background

2009-11-28T13:44:00.005+07:00

background adaalah latar belakang website, kita bisa gunakan warna atau gambar untuk membuat backgraund web kita lebih menarik.
Menempatkan bacground dengan warna, contoh :

<html>
<head></head>
<body bgcolor="#FF99FF">
<p>isi kontent wap anda</p>
</body>
</html>

Untuk nilai dari atribut bgcolor, anda bisa menggunakan Kode hexadecimal, Nilai RGB atau Nama dari warna tersebut.

Kode warna lengkap lihat disini.

Selanjutnya membuat latar belakang dengan grafik atau gambar.

Pertama anda harus punya gambar yang ber-extention .gif atau .jpg yang akan dijadikan background.
Untuk contoh, saya coba ambil gambar "backgroun.jpg" dari url wap uploader.

<html>
<head></head>
<body background="http://harriesta.byethost33.com/album/background.jpg">
<br>
<font color="blue"><h1 color="red">Selamat datang di Wapsiteku</h1></font>
<br>
</body>
</html>

Anda bisa upload gambar sendiri di sini, untuk dijadikan background.

Ok, sampai disini dulu untuk background.
Selamat berkreasi ya... :D

Format font pada HTML

2009-11-28T13:32:00.010+07:00

Font adalah, text dalam dokument HTML.
Tag HTML untuk font adalah <font>…</font>
Dan dalam font itu sendiri terdapat 3 (tiga) bagian yaitu,
font (face) = jenis huruf
font size = ukuran huruf
font color = warna huruf

contoh:
<font face="tahoma" size="6" color="#ff0000">wapku</font>

Sesuai dengan recomendasi dari World Web Consortium (W3C), Untuk HTML 4.0 keatas, tag <font> tidak dipergunakan lagi, sebagai gantinya dibuat tag <style> atau disebut dengan Cassading Style Sheets (CSS).
Dengan CSS penggunaanya akan lebih kompleks dan lebih luas lagi karena dapat dikombinasikan dengan tag elemen-elemen lainnya di dalam dokumen HTML.
Berikut adalah contoh penggunaan tag style sheets:

<html>
<head></head>
<body>
Untuk membuat jenis font (face):
<h1 style="font-family:verdana">Judul Menggunakan font verdana</h1>
<p style="font-family:tahoma">Konten menggunakan font tahoma</p>
Untuk membuat ukuran (size):
<h1 style="font-size:150%">Judul dengan ukuran 150%</h1>
<p style="font-size:80%">Konten dengan ukuran 80%</p>
Untuk membuat warna font (color):
<h1 style="color:blue">Judul dengan warna Biru</h1>
<p style="color:red">Konten dengan warna merah</p>
Contoh komplit untuk membuat jenis font (face),size dan color:
<p style="font-family:verdana;font-size:80%;color:green">
Ini adalah contoh tulisan pengaturan font dengan <i>Cassading Style Sheets</i> (CSS) yang<br>
menggunakan tag HTML elemen <b>style:</b> font-family, font-size dan color...</p>
</body>
</html>

Mau tau tentang CSS, klik disini.

Tag dasar HTML

2009-11-28T13:26:00.011+07:00

Tag pertama pada dokumen HTML adalah: " <html>" dan diahiri dengan " </html>"
Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag <html>…</html>.

Tag " <head>…</head>" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web browser.

Tag "<title>…</title>" merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML.

Tag "<body>…</body>" merupakan isi dari suatu dokumen HTML.

Contoh :

<html>
<head>
<title>Titel wap anda</title>
</head>
<body>
<p>kontent atau isi wap anda</p>
</body>
</html>

Sampai disini sudah jelas kan untuk dasar ?

Wap master

2009-11-28T09:15:00.005+07:00

Apa yg disebut dengan wapmaster itu sebenarnya saya sendiri kurang paham.... hehehehehe.
Tapi gak apalah, kita sama-sama belajar disini.
Sebagai dasar sebelum kita melangkah dalam pembuatan suatu wap site, alangkah lebih baiknya jika tau untuk apa wap site tersebut kita buat, dan desain yg bagaimana seharusnya dengan wap itu nantinya.
Kita semua pasti tau dengan Web/wap GOOGLE, situs nomor satu didunia pastinya.
Coba sesekali kita cermati dari mulai desain hingga kontent dan kegunaanya.
Sangat simple, dan mudah dipahami tentunya.....

Bayangkan.... situs raksasa ini dengan hampir semua orang mengenalnya, tetapi hanya memiliki desain yg sangat sederhana.
Mengapa ? seharusnya timbul pertanyaan seperti itu, jawabanya tidak lain adalah, mungkin situs tersebut didesain agar mudah dipahami dan mudah diakses oleh semua kalangan.
Lirik kembali situs-situs terkemuka dunia, YAHOO, FACEBOOK, GETJAR atau yang lain yg sudah sangat terkenal, kalau kita teliti ternyata mereka hanya menggunakan desain yg sangat sederhana, jadi jelaslah, bukan tampilan ala blink-blink, atau dengan dekorasi CSS, JAVA, dan lain-lain yg hanya menambah berat aksesnya, tapi isi dan kegunaanya lah yg membuat mereka selalu dikunjungi dan di akses.
Sekarang, bagaimana dengan wap/web anda ? desain atau isi ? itu semua terserah anda... karna yg tau tujuan dalam pembuatan wap/web yg anda buat adalah anda sendiri....
Sudah siap untuk membuat sebuah wapsite ?
Hehehehehehe.... silahkan, dan tentukan sendiri untuk dan buat apa wap anda nantinya, desain atau isi, untuk sendiri atau untuk umum...itu semua terserah anda....
Selamat mendesain wapsite yaaa.....

Wap master tips

2009-11-28T04:22:00.015+07:00

Ini adalah dasar, sebelum kita membangun sebuah wapsite.
Ada beberapa hal yg perlu kita ketahui, dalam perencanaan pembuatan Wapsite.
Sebut saja itu tujuan, Tujuaan pembuatan Wapsite.
Disini akan saya kelompokan dalam 3 kelompok,
diantaranya :

Wapsite pribadi

Wapsite umum

Wapsite iseng

Yg pertama saya sebut Wapsite pribadi, mengapa ?
Baik, ini adalah satu pertanyaan,
yg kadang kita tak pernah perduli.
Disini saya sebut sebagai Wapsite pribadi karna ada beberapa hal yg dalam pembuatanya tidak terlalu mementingkan bagaimana dengan pengunjung, pengakses wap itu sendiri.
Kebanyakan dari wap ini adalah mengandalkan unsur kecantikan dan desain yg menarik.
Penempatan background, warna dan style yg sangat sempurna, sehingga enak dipandang.
Tetapi...dari sisi lain wapsite seperti ini banyak menimbulkan konfig yg kadang susah untuk diakses, karna terlalu banyak menggunakan script, yg membuat besarnya file halaman wap tersebut.
Hal seperti ini mungkin tidak menjadi soal bagi pemilik wap tersebut karna, mungkin diantaranya adalah si pemilik wap ini memiliki HP yg sudah modrn.
Sehingga tidak masalah dgn kendala seperti ini. tak perlu riskan bagaimana dengan pengunjung yg lain.
Ok, sampai disini dulu untuk yg pertama.

Yg kedua adalah Wapsite umum, saya sebut umum, karna wap ini sengaja dibuat untuk khalayak umum.
Tidak jadi masalah dengan desain yg sederhana, karna perencanaan wap ini adalah mudah untuk diakses.
Tidak terlalu banyak mengandalkan desain yg glamor, namun memiliki kontent yg mudah diakses.

Selanjutnya yg ketiga saya sebut wap iseng, karna, dalam pembuatanya yg semaunya dengan kontent seadanya.
Desain yg berlebihan, namun tidak memiliki kontent.

Ok, sampai disini untuk tips dasar.
Selanjutnya kita masuk dalam katagori desain wap.