|
Selamat
datang di OPEN SOURCE area. Kali ini saya
akan membahas contoh-contoh script dan aplikasi dari pemrograman
web seperti PHP, ASP,
Javascript dan juga contoh atau latihan
design grafis dengan Adobe Photoshop
7.0. Atau jika ada yang ingin mengirim tutorial segera
attach ke [email protected]
; mari saling memberi, berbagi dan menerima untuk kemajuan
bersama.
PEMROGRAMAN
WEB DENGAN PHP |
Ciri-ciri
bahasa pemrograman dengan PHP biasanya memiliki script yang
diawali dengan tanda <? dan diakhiri dengan
tanda ?>. Anda dapat meletakkan script
PHP ini secara fleksibel sesuai dengan tata letak website.
Yang pasti script tersebut harus diletakkan di antara <body>
dan </body> jika menempatkan PHP sebagai embeded script
dan dapat juga menjadi PHP murni.
Text
Counter
Mari
kita mulai dengan tampilan counter yang sederhana. Counter
ini akan menampilkan angka dalam teks. Pertama-tama buat
sebuah file teks bernama counter.txt. Simpan pada direktori
home pages kita. Perlu diingat jika kita menggunakan system
unix maka mode akses file harus diset agar dapat diubah.
Gunakan perintah chmod pada shell unix (Saran : gunakan
telnet).
Contoh
:
chmod
755 fileku.txt <enter>
Untuk
lebih jelas tentang mode akses file di unix baca di tutorial
lainnya. Setelah file counter.txt telah dibuat, selanjutnya
kita membuat file counter.php
File
Counter.php
<?php
if(file_exists("counter.txt")) {
$PF = fopen("counter.txt",'r');
$count = (int) fgets($PF,4096);
fclose($PF);
$count++;
$PF = fopen("counter.txt",'w');
fputs($PF,$count);
fclose($PF);
echo $count;
}
else {
echo "No Counter";
}
?>
|
Grafik
Counter
Untuk
mode grafik maka kita siapkan 10 buah file gambar yang berisi
gambar angka 0 sampai 9. Simpan dengan nama file :
Angka0.gif
untuk gambar angka 0
Angka1.gif untuk gambar angka 1
Angka2.gif untuk gambar angka 2
Angka3.gif untuk gambar angka 3
Angka4.gif untuk gambar angka 4
Angka5.gif untuk gambar angka 5
Angka6.gif untuk gambar angka 6
Angka7.gif untuk gambar angka 7
Angka8.gif untuk gambar angka 8
Angka9.gif untuk gambar angka 9
Sama
seperti mode teks buat file pada direktori home page kita.
Setelah itu file akan berisi kode berikut ini :
File Test.php
<?php
if(file_exists("counter.txt")) {
$PF = fopen("counter.txt",'r');
$count = (int) fgets($PF,4096);
fclose($PF);
$count++;
$PF = fopen("counter.txt",'w');
fputs($PF,$count);
fclose($PF);
$digit1 = (int) (($count % 1000) / 100);
$digit2 = (int) (($count % 100) / 10);
$digit3 = (int) ($count % 10);
?>
<TABLE>
<TR><TD>
<?php
echo "<IMG SRC=\"Angka$digit1.gif\">";
?>
</TD><TD>
<?php
echo "<IMG SRC=\"Angka$digit2.gif\">";
?>
</TD><TD>
<?php
echo "<IMG SRC=\"Angka$digit3.gif\">";
?>
</TD></TR>
</TABLE>
<?php
} else {
echo "No Counter";
}
?>
|
Tip
Gunakan
format file yang berukuran kecil untuk gambar angka. Biasanya
format yang banyak digunakan untuk menampilkan gambar di
web adalah format gif dan jpeg . Format bmp memerlukan waktu
yang lebih lama untuk ditampilkan.
Aplikasi
ini relatif lebih rumit dari aplikasi Page Counter. Disini
diperlukan sebuah file teks untuk menyimpan pertanyaan , item
pilihan dan counter dari pilihan tersebut. Untuk mengetahui
bagian mana yang merupakan pertanyaan , item pilihan , atau
counter pilihan maka kita akan menggunakan karakter khusus.
Kita pilih karakter "|". Sedangkan
antara item dalam pilihan maupun item dalam counter kita pisahkan
dengan karakter ";". Untuk
memecah suatu string berdasarkan karakter tertentu kita gunakan
fungsi explode() yang akan menghasilkan nilai variable array.
Sintak
fungsi explode () :
explode(pola,string);
Pola
merupakan deret karakter yang digunakan utuk membagi. Jadi
seandainya ditemukan karakter sesuai pola string ,maka string
itu akan dibagi pada bagian tersebut.
Contoh
:
$kalimat = "Bagian 1 ; Bagian 2 ; Bagian 3";
$bagian = explode(";",$kalimat);
echo $bagian[0] , "<BR>";
echo $bagian[1] , "<BR>";
echo $bagian[2] , "<BR>";
Urutan
Kerja :
Buat
file polling.txt.
Edit file polling.txt dan tuliskan poling anda dengan format
pertanyaan "|" pilihan 1 ";" pilihan 2 ";" pilihan 3 "|"counter
1 ";" counter 2 ";" counter 3
Contoh
:
Apakah anda suka F4 ?|Ya;Tidak|0;0
Kemudian
buat file polling.php , dan tulis kode berikut :
File Polling.php
<HTML>
<HEAD> <TITLE>Polling Home</TITLE>
</HEAD>
<BODY>
<?php
if(file_exists("polling.txt")) {
echo "<FORM METHOD=POST ACTION=\"dopolling.php\">";
$PF = fopen("polling.txt",'r');
$poll = fgets($PF,4096);
fclose($PF);
$data = explode("|",$poll);
echo $data[0]."\n<BR>";
$pilihan = explode(";",$data[1]);
for($i = 0;$i < count($pilihan);$i++){
if($i == 0)
echo "<INPUT TYPE=RADIO NAME=pil VALUE=$I CHECKED>$pilihan[$i]<BR>\n";
else
echo "<INPUT TYPE=RADIO NAME=pil VALUE=$i>$pilihan[$i]<BR>\n";
}
echo "<INPUT TYPE=SUBMIT VALUE=Send>\n";
echo "</FORM>";
}
else {
echo "No Polling Today";
}
?>
</BODY>
</HTML>
|
Selanjutnya
buat file. kemudian tulis code berikut ini :
File Dopolling.php
<?php
if(file_exists("polling.txt")) {
$PF = fopen("polling.txt",'r');
$poll = fgets($PF,4096);
fclose($PF);
$data = explode("|",$poll);
$pilihan = explode(";",$data[1]);
$counter = explode(";",$data[2]);
$counter[$pil]++;
$PF = fopen("polling.txt",'w');
$poll = $data[0]."|".$data[1]."|";
for($i = 0;$i < count($counter);$i++) {
$poll .= $counter[$i].";";
}
fputs($PF,$poll);
fclose($PF);
echo $data[0],"\n<BR>";
echo "Pilihan anda $pilihan[$pil]\n<BR>";
for($i = 0;$i < count($pilihan); $i++){
echo "$pilihan[$i] = $counter[$i]\n<BR>";
}
}
?>
|
PEMROGRAMAN
WEB DENGAN ASP (Active Server Page) |
[
kembali ke atas ]
Ciri-ciri
bahasa pemrograman dengan ASP biasanya memiliki script yang
diawali dengan tanda <% dan diakhiri dengan
tanda %> pada setiap barisnya. Anda dapat
meletakkan script ASP ini secara fleksibel sesuai dengan tata
letak website. Yang pasti script tersebut harus diletakkan
di antara <body> dan </body>. Atau dapat juga
menjadi script ASP murni.
Langkah
pertama yang harus dilakukan adalah mempersiapkan gambar angka
yang diberinama 1 - 9 .gif untuk masing-masing angka dan diletakkan
dalam sebuah folder yang bernama counter_images . Kemudian
kita membuat sebuah file teks (dengan notepad) yang isinya
angka pertama yang akan tampil saat counter berjalan daniberi
nama hit_count.txt . Kemudian file kedua adalah script ASP-nya
yang diberi nama counter.asp . Isi file kedua adalah sebagai
berikut:
<html>
<head>
<title>Hit Counter</title>
</head>
<body bgcolor="white" text="black">
<div align="center">
<h1>Hit Counter</h1>
<%
'Dimension variables
Dim fsoObject 'File System Object
Dim tsObject 'Text Stream Object
Dim filObject 'File Object
Dim lngVisitorNumber 'Holds the visitor number
Dim intWriteDigitLoopCount 'Loop counter to display
the graphical hit count
'Create a File System Object variable
Set fsoObject = Server.CreateObject("Scripting.FileSystemObject")
'Initialise
a File Object with the path and name of text file
to open
Set filObject = fsoObject.GetFile(Server.MapPath("hit_count.txt"))
'Open the visitor counter text file
Set tsObject = filObject.OpenAsTextStream
'Read in the visitor number from the visitor counter
file
lngVisitorNumber = CLng(tsObject.ReadAll)
'Increment the visitor counter number by 1
lngVisitorNumber = lngVisitorNumber + 1
'Create a new visitor counter text file over writing
the previous one
Set tsObject = fsoObject.CreateTextFile(Server.MapPath("hit_count.txt"))
'Write the new visitor number to the text file
tsObject.Write CStr(lngVisitorNumber)
'Reset server objects
Set fsoObject = Nothing
Set tsObject = Nothing
Set filObject = Nothing
'HTML
output to display the visitor number
Response.Write("<font size=2>Visitor
Number</font><br>")
'Display
the hit count as text
'Response.Write(lngVisitorNumber)
'Loop
to display graphical digits
For intWriteDigitLoopCount = 1 to Len(lngVisitorNumber)
'Display the graphical hit count
Response.Write("<img src=""counter_images/")
Response.Write(Mid(lngVisitorNumber, intWriteDigitLoopCount,
1) & ".gif""")
Response.Write("alt=""" &
Mid(lngVisitorNumber, intWriteDigitLoopCount, 1)
& """>")
Next
%>
</div>
</body>
</html>
|
PEMROGRAMAN
WEB DENGAN JAVASCRIPT |
[
kembali ke atas ]
Javasript
merupakan salah satu bahasa pemrograman web yang cukup diperlukan
dalam sebuah web yang interaktif dan atraktif. Kelebihan javasript
ialah: ia berada di client-side, artinya bahwa proses berada
di komputer client sehingga setelah selesai browser men-download
maka ia akan bekerja dan tersimpan di cache. Javascript biasanya
di letakkan di antara tag HTML dan disesuaikan dengan kegunaannya.
Berikut ini saya berikan contoh-contoh script yang mungkin
bermanfaat bagi saudara. GBU...
- Animasi
teks pada status bar
<SCRIPT language=JavaScript><!-- Begin
hide
// author : SARTUA T SITUMORANG, [email protected]
/* He..he... Mau nyontek ya !!! */
var
i = 0;
var TextNumber = 0;
var TextInput = new Object();
var HelpText="";
var Text = "";
var Speed=95
var WaitSpace=" "
TextInput[0]
= "Selamat datang...";
TextInput[1] = "Di homepage saya..."
TextInput[2] = "Semoga tidak bosan"
TextInput[3] = "Kirim saran dan kritik Anda
ke.."
TextInput[4] = "[email protected]"
TextInput[5] = "GBU.."
TextInput[6] = "Peace.."
TotalTextInput
= 6; // (0, 1, 2, 3, 4, 5, 6,)
for
(var Tomer = 0; Tomer <= TotalTextInput; Tomer++)
{
TextInput[Tomer]+=WaitSpace
var TimerId
var TimerSet=false;
}
function
banner()
{
Text=rollMessage();
TimerId = setTimeout("banner()", Speed)
window.status=Text;
}
function
rollMessage ()
{
Wait_yn=false;
i++;
var CheckSpace = HelpText.substring(i-1, i);
CheckSpace = "" + CheckSpace;
if (CheckSpace == " ") {i++;}
if (i >= HelpText.length+1) {i=0; if (TextNumber
< TotalTextInput) {TextNumber++;} else {TextNumber
= 0;} init();}
Text = HelpText.substring(0, i);
return (Text);
}
function
init ()
{
Text = TextInput[TextNumber]
HelpText = Text;
}
function
kill ()
{
clearTimeout (TimerId)
}
onLoad
= banner()
//end script --></SCRIPT>
|
<script
language="JavaScript">
// author : SARTUA T SITUMORANG, [email protected]
/* He..he... Mau nyontek ya !!! */
function
getar(e)
{
if(self.moveBy)
{
for(i=50;i>0;i--)
{
for(j=e;j>0;j--)
{
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}
}
}
}
//-->
</script>
|
Selanjutnya
Anda harus menambahkan perintah berikut pada body:
<
body onload="getar(20)" dan seterusnya....
Ingin
lihat contohnya? klik di sini,
namun it's recommended not to open this earthquake.
Pada
script image clock ini Anda harus mempersiapkan file gambar
angka 0 - 9 dan diber inama sebagai beikut:
j0.gif
untuk gambar angka 0
j1.gif untuk gambar angka 1
j2.gif untuk gambar angka 2
j3.gif untuk gambar angka 3
j4.gif untuk gambar angka 4
j5.gif untuk gambar angka 5
j6.gif untuk gambar angka 6
j7.gif untuk gambar angka 7
j8.gif untuk gambar angka 8
j9.gif untuk gambar angka 9
<script
language="JavaScript">
// author : SARTUA T SITUMORANG, [email protected]
/* He..he... Mau nyontek ya !!! */
var j0 = new Image(); j0.src = "j0.gif"
var j1 = new Image(); j1.src = "j1.gif"
var j2 = new Image(); j2.src = "j2.gif"
var j3 = new Image(); j3.src = "j3.gif"
var j4 = new Image(); j4.src = "j4.gif"
var j5 = new Image(); j5.src = "j5.gif"
var j6 = new Image(); j6.src = "j6.gif"
var j7 = new Image(); j7.src = "j7.gif"
var j8 = new Image(); j8.src = "j8.gif"
var j9 = new Image(); j9.src = "j9.gif"
function
getimage(j, m, d)
{
if(document.images)
{
if(j <= 9)
{
document.images.h0.src = j0.src
document.images.h1.src = eval("j" + j
+ ".src")
}
else
{
document.images.h0.src = eval("j" + Math.floor(j/10)
+ ".src")
document.images.h1.src = eval("j" + (j%10)
+ ".src")
}
if(m
<= 9)
{
document.images.m0.src = j0.src
document.images.m1.src = eval("j" + m
+ ".src")
}
else
{
document.images.m0.src = eval("j" + Math.floor(m/10)
+ ".src")
document.images.m1.src = eval("j" + (m%10)
+ ".src")
}
if(d
<= 9)
{
document.images.d0.src = j0.src
document.images.d1.src = eval("j" + d
+ ".src")
}
else
{
document.images.d0.src = eval("j" + Math.floor(d/10)
+ ".src")
document.images.d1.src = eval("j" + (d%10)
+ ".src")
}
}
}
function
tampilkanjam()
{
var waktu = new Date()
var jam = waktu.getHours()
var menit = waktu.getMinutes()
var detik = waktu.getSeconds()
getimage(jam, menit, detik)
setTimeout("tampilkanjam()",1000)
}
</script>
|
Selanjutnya
Anda harus menambahkan perintah berikut pada body:
<
body onload="tampilkanjam()" dan
seterusnya...
- Penanggalan
berbasis teks
<script
language="JavaScript">
// author : SARTUA T SITUMORANG, [email protected]
/* He..he... Mau nyontek ya !!! */
<!--
Begin
month = new Array(12);
day = new Array(7);
month[0]="Januari"
month[1]="Febuari"
month[2]="Maret"
month[3]="April"
month[4]="Mei"
month[5]="Juni"
month[6]="Juli"
month[7]="Agustus"
month[8]="September"
month[9]="Oktober"
month[10]="November"
month[11]="Desember"
day[0]="Minggu"
day[1]="Senin"
day[2]="Selasa"
day[3]="Rabu"
day[4]="Kamis"
day[5]="Jumat"
day[6]="Sabtu"
today = new Date();
aDay = today.getDay();
aMonth = today.getMonth();
aDate = today.getDate();
aYear = today.getYear();
if (aYear < 2000) aYear = aYear + 1900;
strDate = day[aDay] + ", " + aDate + "
" + month[aMonth] + " " + aYear;
document.write(strDate);
-->
</SCRIPT>
|
DESAIN
GRAFIS DENGAN ADOBE PHOTOSHOP
|
| |
[
kembali ke atas ]
- Membuat
bola 3D
| |
1. Tahap I
Pertama Tama Buat file baru fill dengan warna backgorund.
kemudian buat layer baru. pilih tool elliptical
marquee dan buat sebua lingkaran lalu di Fill. Di
sini saya menggunakan warna coklat sebagai forgorund
dan background hitam. Anda bebas menentukan warna
lainnya.
|
| |
2. Tahap II
Kemudian
buat layer baru. pilih tool airbrush atur settingnya
dengan diameter 18 pixel dan hardness 100% dan cat
lah lingkaran tadi dengan warna putih sehingga keliatan
seperti gambar di samping.
|
| |
3. Tahap III
Kemudian
berikan effek Gaussian blur dengan radius pixel.
gambar anda skr seharusnya sudah seperti gbr di
samping
|
| |
4.Tahap Akhir
Langkah terakhir adalah mendeselect selection dan
bola anda sudah selesai. anda dapat mengubah warnanya
melalui menu Image/Adjust/Hue saturation
|
- Menggabungkan
2 objek gambar (merge pictures)
 |
Langkah1.
Kadang kita ingin menyatukan dua gambar menjadi satu,
namun transisinya tidak mudah untuk dibuat halus. Di
tutorial ini saya akan menyatukan dua buah gambar kota
yang diambil dari library master.web.id (tolong kasih
info kalau pemegang copyright gambar2 ini keberatan,
supaya bisa saya ganti dengan gambar lain), gambar2
tersebut bisa didownload dengan klik kanan dan save
as. Gambar2 tersebut sudah saya resize supaya bisa dipakai
dalam tutorial ini. |
|
Langkah 2.
Buka dokumen baru, ukuran 200x150 pixel dengan background
hitam. Pemilihan background hitam saya dasarkan atas
background kedua gambar kota tersebut juga hitam/gelap.Paste
kedua gambar tersebut ke dokumen baru ini, dan beri
nama masing2 "kota1" dan "kota2". Window "Layers" anda
seharusnya terlihat seperti disebelah. |
|
Langkah 3.
Pastikan bahwa foreground dan background color anda
adalah putih dan hitam (tombol D-X). Switch warnanya,
agar background menjadi putih dan foreground
menjadi hitam (tombol X). Pilih tool gradasi (Gradient
Tool).Pastikan bahwa gradasi yang terpilih adalah linear , dan foreground to background. Enter Quick
mask mode (yang saya beri kotak merah) . |
|
Langkah 4.
Matikan Layer visibility "kota2" dengan cara klik icon
mata yang ada di depannya. Layer itu akan kita aktifkan
nanti. Dengan layer "kota1" aktif dan bekerja dalam
quick mask mode, buat gradasi dari kiri ke kanan, menutupi
3/4 bagian dari image. Exit Quickmask mode (kembali
ke standard mode) dengan tombol  . Tekan tombol delete. Setengah dari gambar kota1 hilang,
tetapi tidak langsung (gradually). |
|
Langkah 5.
Aktifkan layer visibility layer "Kota2" dengan klik
kotak iconnya. Masuk kembali ke quickmask mode, dan
gunakan gradient tool. Kali ini mulai dari kanan
ke arah kiri menutupi 3/4 bagian dari image. Kembali
ke standard mode dan delete.
Kedua gambar tersebut sekarang sudah jadi satu dengan
transisi yang halus. |
|
Langkah 6.
Di gambar samping saya memodifikasi gambar tersebut
lebih jauh dengan hue/saturation, contrast dan sedikit
permainan text.
Trik diatas menggunakan gradation dan quick mask untuk
menghapus sebagian dari gambar secara gradually bisa
dipakai di banyak cara dan variasi. Cobalah bereksperimen
dengan type gradation yang lain, misalnya radial dan
reflected. |
 |
Langkah
1.
Pertama tama buatlah media gambar baru berukuran width=1
pixel x height=2 pixel dan pilihlah latar belakang transparant
dengan memilih Content = Transparant pada saat anda
membuat document baru ( File - New ) |
 |
Langkah
2.
Gunakan zoom pada pallete tools dan perbesar media tersebut
dengan mengklik kanan mouse anda (dalam hal ini gue
menggunakan 1600% pembesaran). |
 |
Langkah
3.
Yakinkan bahwa warna untuk foreground adalah warna hitam. |
 |
Langkah
4.
Kemudian pada Pallate Tools pilihlah icon pencil  dan warnai hingga seperti contoh di samping
ini. |
 |
Langkah
5.
Pada menu bar pilihlah menu SELECT - SELECT ALL atau
tekan CTRL-A pada keyboard anda.
Kemudian pilih kembali menu EDIT - DEFINE PATERN. |
 |
Langkah
6.
Sekarang bukalah gambar anda yang akan di beri effect
scan line. (Gue gunain gambar seperti di samping ini)
Buatlah layer baru dengan memilih menu: LAYER - NEW
LAYER atau dengan menekan SHIFT - CTRL - N pada keyboard. |
 |
Langkah
7.
Pada menu bar pilihlah menu SELECT - SELECT ALL atau
tekan CTRL-A pada keyboard anda.
Kemudian pilih kembali menu EDIT - FILL.
Pada windows FILL rubahlah Content Use menjadi PATERN,
kemudian klik OK |
 |
Langkah
8.
Pada Pallate Layer: Rubahlah option NORMAL menjadi SOFTLIGHT |
 |
Langkah
9.
Nah.. sekarang selesai deh :o) |
Langkah 1.
Buatlah media gambar baru berukuran 100 x 100 pixel
dan pilihlah latar belakang putih dengan memilih Content
= white pada saat anda membuat document baru ( File
- New ) |
|
| |
Langkah 2.
Buatlah gambar lingkaran dengan ukuran 70 x 70 pixel
dengan mengunakan elipse tools  . ( Untuk mendapatkan ukuran 70 x 70 pixel
klik 2x icon kemudian pada option Style rubahlah
Normal menjadi Fixed Style, Kemudian masukan
nilai 70 pada kolom Widht dan 70 pada kolom Height ).
|
| |
Langkah 3.
 Tentukan Warna background dan foreground sesuai
dengan warna favorite anda. dalam contoh ini gue menggunakan
background = hitam dan foreground = abu abu. |
| |
Langkah 4. 
Kemudian pilihlah icon linear gradient dan click 2x icon untuk meyakinkan bahwa
anda telah memilih option Gradient = Foreground to
Background.
Tariklah sesuai tanda panah di samping kiri ini. |
| |
Langkah 5.
Kembali seperti langkah 2 dengan membuat circle mask
denga ukuran 50 x 50 pixels. Dan tempatkan mask tersebut
tepat di tengah lingkaran 70 x 70.
Kemudian tarik kembali sesuai tanda panah di samping
kiri ini. |
| |
Langkah 6.
Kini anda telah memiliki satu tombol navigasi yang berbetuk
lingkaran. anda tinggal mengembangkan tehnik ini untuk
keperluan keperluan lain seperti menambahkan text atau
icon di tengah navigasi tersebut. Selamat mencoba :o) |
Inilah contoh yang
sudah jadi...
|
[
kembali ke atas ]
|
. ( Untuk mendapatkan ukuran 70 x 70 pixel
klik 2x icon 
Tentukan Warna background dan foreground sesuai
dengan warna favorite anda. dalam contoh ini gue menggunakan
background = hitam dan foreground = abu abu. 
dan click 2x icon 
dan buatlah tepat di tengah lingkaran sehingga
lingkaran tersebut terbelah menjadi 2 bagian dengan
cara memilih icon 
dan menggesernya seperti terlihat pada gambar
langkah 7.
dan perbesarlah hingga 1600%agar mudah untuk
membuat patern, Kemudian pilih kembali icon 
