Selasa, 31 Mei 2011

PHP

Pengertian PHP


PHP adalah bahasa pemrograman script yang paling banyak dipakai saat ini. PHP banyak dipakai untuk memrogram situs web dinamis, walaupun tidak tertutup kemungkinan digunakan untuk pemakaian lain.
Contoh terkenal dari aplikasi PHP adalah phpBB dan MediaWiki (software di belakang Wikipedia). PHP juga dapat dilihat sebagai pilihan lain dari ASP.NET/C#/VB.NET Microsoft, ColdFusion Macromedia, JSP/Java Sun Microsystems, dan CGI/Perl. Contoh aplikasi lain yang lebih kompleks berupa CMS yang dibangun menggunakan PHP adalah Mambo, Joomla!, Postnuke, Xaraya, dan lain-lain.
Sejarah PHP
PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama FI (Form Interpreted), yang wujudnya berupa sekumpulan script yang digunakan untuk mengolah data form dari web.
Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI, kependekan dari Hypertext Preprocessing’/Form Interpreter. Dengan perilisan kode sumber ini menjadi open source, maka banyak programmer yang tertarik untuk ikut mengembangkan PHP.
Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.
Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0.
Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi.
Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek.
Kelebihan PHP dari bahasa pemrograman lain
* Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaanya.
* Web Server yang mendukung PHP dapat ditemukan dimana – mana dari mulai IIS sampai dengan apache, dengan configurasi yang relatif mudah.
* Dalam sisi pengembangan lebih mudah, karena banyaknya milis – milis dan developer yang siap membantu dalam pengembangan.
* Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena referensi yang banyak.
* PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (linux, unix, windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah system.

CSS

Menurut wikipedia, CSS (Cascading Style Sheet) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Untuk lebih jelasnya, CSS adalah suatu bahasa yang digunakan untuk mengatur tampilan suatu website, baik tata letaknya, jenis huruf, warna, dan semua yang berhubungan dengan tampilan. Pada umumnya, CSS tu digunakan untuk menformat halaman web yang ditulis dengan HTML ataupun XHTML.


Sekarang kita lanjut ke cara pemakain CSS. Cara pemakain CSS ada 2 cara. Cara yang pertama adalah dengan menggabungkan CSS langsung ke dalam satu file markup kita (internal), cara yang kedua adalah dengan cara memanggil CSS tersebut (eksternal). Trus apa yang membedakan antara keduanya itu? Pertanyaan yang bagus teman.. :) Yang membedakan adalah cara menggunakan dan cara pemanggilan CSS tersebut. Kalau kita memakai internal CSS semua kode CSS dan markup kita masukkan dalam satu file yang sama, kalo kia memakai eksternal CSS kita perlu untuk membuat link untuk menghubungkan keduanya.

Untuk penjelasan dan contoh source code dari CSS, mungkin akan saya posting di waktu yang lain. Sebab apabila saya jelaskan saat ini, akan habis berapa gelas kopi dan cemilan yang akan saya habiskan? :) hehe.. Bercanda kok...
CSS memungkinkan Anda mengontrol banyak sifat yang tidak dapat dikontrol dengan HTML saja. Sebagai contoh, Anda dapat menentukan ukuran font yang berbeda dan unit (pixel, point, dan seterusnya) untuk teks yang dipilih. Selain untuk mengatur ukuran font dalam pixel, anda juga dapat memastikan tampilan atau tata letak situs pada beberapa web browser.

HTML

Hypertext Markup Language (HTML) adalah bahasa markup yang umum digunakan untuk membuat halaman web. Sebenarnya HTML bukanlah sebuah bahasa pemrograman. Apabila di tinjau dari namanya, HTML merupakan bahasa mark-up atau penandaan terhadap sebuah dokumen teks. Tanda tersebut di gunakan untuk menentukan format atau style dari teks yang di tandai.
Pada dasarnya elemen HTML ada 2 kategori:
  1. Elemen <head> berfungsi untuk memberikan informasi atau mendeklarasikan dokumen tersebut.
  2. Elemen <body> berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan pada browser.
Sebagian besar kode HTML harus terletak di antara tag kontainer. Yaitu di awali dengan <namatag> dan di akhiri dengan </namatag>.
Berikut adalah contoh HTML:

<html>
<head>
<title>Contoh HTML</title>
</head>
<body>inilah contoh kode HTML
</body>
</html>

Kamis, 31 Maret 2011

Membuat Efek Photo Booth pada Foto Krisdayanti


Sekarang saya mau pake foto Krisdayanti untuk tutorial photoshop efek Photo booth.. harusnya sih foto yang sejenis dan beda-beda mimik mukanya.. pasti lebih oke.. tapi karena saya gak ada foto yang kayak gitu jadinya pake Foto Krisdayanti aja .. mumpung lagi rame di tipi-tipi…
Buka dokumen baru  ukuran 4 inch x 20 inch .. kalo centimeter terlalu kecil soalnya.. :)

ini penampakan dokumen baru nya :

Buka dokumen foto yang mau di pake.. saya pake foto Krisdayanti ..

Pilih salah satu foto Krisdayanti atau foto yang mau dipake lalu crop ukuran 4 inch x 5 inch.. untuk lebih jelasnya liat gambar aja deh yah..
ukuran dokumen kan 4 inch x 20 inch.. saya crop 4 inch x 5 inch biar nanti pas buat 4 foto.. ngerti kan yah ? kalo gak ngerti silahkan konsultasi ke Ki Joko Bodo .. hehehe..

sekarang aplikasikan crop tool tadi ke dalam gambar.. Drag ujung kanan atas gambar ke bawah kiri gambar .. Crop udah sesuai ukuran 4 inch x 5 inch dan 72 pixel

sekarang masukan gambar kedalam dokumen baru tadi.. dengan cara men drag ( klik > tahan > geser ) .. kalo masih ada yang nanya juga tentang DRAG.. duuhh.. kalo kata Kak Rhoma  itu namanya Ter … La… Lu ..  hehehe.. soalnya anak saya yang masih 7 tahun aja udah ngerti.. :D ..
TIPS : cara menghafal drag .. setiap mau tidur ucapkan klik > tahan > geser sebanyak 5 kali.. hehehe..

Perlakukan setiap foto sama.. supaya tidak sirik-sirikan..Crop foto yang lain lalu drag ke dalam dokumen baru.
Atur gambar sehingga berjejer  ke bawah…

sekarang kita beri border setiap foto nya..
Klik kanan layer 1 > blending option , lalu pilih stroke

kalo udah sesuai pilih Ok.. oia.. warna nya bebas yah..
supaya blending layer 1 sama dengan layer yang lain.. kita copy paste aja layer style nya..
Klik kanan layer 1 > copy layer style

Aplikasikan ke layer 2.. Klik kanan layer 2 > paste layer style
begitu selanjut nya sampe ke empat foto memiliki border yang sama

Sekarang kita memiliki 4 layer / 4 foto dengan efek yang sama..

Gabungkan semua layer dengan menekan CTRL + E dimulai dari yang paling atas..

Sekarang tinggal layer background yang isinya gambar hasil Merger / gabung..
Buat dokumen baru dengan ukuran 15 x 20 Inch dan 72 Pixel

Drag foto yang tadi di edit ke dalam dokumen baru..

Atur sehingga berada ditengah..

Supaya fotonya jadi bergelombang, Klik Filter > Distort > Shear

Ini hasil pembengkokan ..

Sekarang putar gambar nya dengan move tool atau Klik Edit > transform > rotate

supaya keliatan realistis..kita beri bayangan ..
Buat layer baru di bawah layer 1 dan diatas layer background  dan di atas Buat bayangan dengan brush tool warna hitam,

Kurangi opacity nya menjadi 50%

Supaya makin seru dan realistik.. kita beri highlight putih di foto nya.
Buat layer baru di paling atas.. Klik layer > new layer.
gunakan Brush warna putih untuk menghighlight bagian foto yang kira-kira perlu aja..

Ubah opacity nya jadi 75 %

masih keliatan brush putih nya di luar foto .. supaya gak keliatan kita join layer highlight (brush putih) dengan foto..
caranya..
Sambil menekan tombol ALT di keyboard , sorot cursor mouse ke garis diantara layer highlight brush putih dan layer foto sampe cursor mouse nya keliatan gambar dua bulatan.. lalu Klik..

Hasilnya :

Gampang kan ?

Rabu, 30 Maret 2011

Pengenalan Dasar HTML


Tulisan ini merupakan kelanjutan dari tulisan saya mengenai HTML untuk tingkat lanjut, bagi kamu yang baru bela jar sangat disarankan untuk membaca terlebih dulu materi awal kita yaitu Dasar-Dasar HTML.

3. Grafik dalam Halaman Web

Biasanya orang menggunakan gambar untuk memperindah situsnya. HTML menyediakan tag <IMG> untuk menampilkan gambar dalam halaman web. Dari berbagai macam format gambar yang ada, hanya beberapa saja yang bisa dipergunakan dalam membuat halaman web. Format gambar yang paling sering digunakan adalah GIF dan JPEG. Format penulisannya adalah:
<IMG SRC = “file_gambar” ALT = “nama_alternatif”>
Atribut SRC digunakan untuk menentukan sumber gambar. Atribut ALT berfungsi sebagai teks pengganti gambar untuk browser yang tidak bisa mendukung grafik, atau pada pihak client sengaja mematikan fasilitas pemanggilan gambar.
Contoh:
<HTML>
<HEAD>
<TITLE>Grafik dalam halaman web</TITLE>
</HEAD>
<BODY>
<P ALIGN="left">www.bugsinternetcafe.com</P>
<P ALIGN="left"><IMG SRC="bugs_logo_white.gif"  ALT="Bugs Internet Cafe Yogyakarta"></P>
</BODY>
</HTML>

Beberapa atribut pada tag <IMG> yang biasa digunakan dalam halaman-halaman web.
  • BORDER : memberikan suatu border atau batas pada gambar, default-nya = 0
  • HEIGHT, WIDTH : menentukan tinggi dan lebar suatu gambar dalam ukuran pixel
  • HSPACE, VSPACE : menentukan jarak spasi horizontal dan spasi vertikal antara gambar-gambar dengan objek di sekitarnya
  • ALIGN : mengatur perataan gambar terhadap objek di sekelilingnya. Nilainya bisa berupa LEFT, CENTER, RIGHT, BOTTOM, TOP dan MIDDLE

Contoh:
<HTML>
<HEAD>
<TITLE>Atribut IMG </TITLE>
</HEAD>
<BODY>
<P>Bugs Internet Cafe, VSPACE = 20
<BR>
<IMG SRC=".gif" WIDTH="270" HEIGTH="70" ALT="radiokampus ITB" BORDER="2"
HSPACE="20" VSPACE="20">
<BR>
www.bugsinternetcafe.com, HSPACE = 20</P>
<P>Jl.Kaliurang Km.5 No.34<IMG SRC=" bugs_logo_white.gif" WIDTH="203" HEIGHT="60"
ALT=" Bugs Internet Cafe" HSPACE="20">Yogyakarta, HSPACE = 20
<BR>
</P>
</BODY>
</HTML>

4. Table

Tabel banyak digunakan karena dapat menampilkan informasi dengan bentuk yang ringkas dan mudah dibaca. Untuk membuat tabel digunakan tag awal <TABLE> dan tag penutup </TABLE>. Tag <TABLE> mewakili beberapa bagian penting, yaitu:
  • CAPTION> … </CAPTION> digunakan untuk membentuk judul tabel. Judul tabel ini akan terletak diluar tabel, bisa di bagian atas atau bagian bawah tabel
  • <TH> … </TH> berfungsi untuk meletakkan judul tabel di bagian peling atas atau paling kiri dari suatu tabel
  • <TD> … </TD> digunakan sebagai tempat menulis data atau informasi dalam tabel

Contoh:
<HTML>
<HEAD>
<TITLE>Tabel</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>Seputar Calciomeecato</CAPTION>
<TR>
<TH>Nama Klub</TH>
<TH>Berita</TH>
</TR>
<TR>
<TD>Fiorentina</TD>
<TD>Fiorentina mendatangkan Nuno Gomes untuk menggantikan sang legenda Batigol</TD>
</TR>
<TR>
<TD>Lazio</TD>
<TD>Lazio menjadi klub dengan rekor pembelian pemain sebesar 240 miliar lira!</TD>
</TR>
<TR>
<TD>Perugia</TD>
<TD>Ahn Jung-Whan resmi menjadi pemain pinjaman Perugia</TD>
</TR>
<TR>
<TD>Udinese</TD>
<TD>Pemain Spanyol berusia 23 tahun, Luis Helguera menjadi pemain Udinese <BR>
dengan transfer senilai 349 juta lira</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Table ALIGN dan WIDTH

Perataan horizontal tabel menggunakan atribut ALIGN. ALIGN dapat bernilai LEFT untuk perataan kiri, CENTER untuk perataan di tengah dan RIGHT untuk perataan di kanan. Sedangkan untuk perataan vertikal menggunakan atribut VALIGN. VALIGN dapat bernilai TOP untuk perataan atas, MIDDLE untuk perataan di tengah dan BOTTOM untuk perataan di bawah.
Lebar tabel biasanya diatur menggunakan atribut WIDTH. Nilai WIDTH dapat dinyatakan dengan persen (%) yang menyatakan lebar tabel dalam persentase atau dinyatakan dengan pixel yang berarti ukuran sesungguhnya dari tabel.

Contoh:
<HTML>
<HEAD>
<TITLE>Tabel dengan WIDTH dan ALIGN</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="88%" HEIGHT="210">
<TR>
<TD WIDTH="30%" HEIGHT="110" VALIGN="top">Lihatlah VALIGN="top"<br>
Janganlah merasa malu mempelajari sesuatu yang tidak diketahuinya</TD>
<TD WIDTH="34%" HEIGHT="110" VALIGN="middle">Bandingkan dengan VALIGN ="middle"<br>
</TD>
<TD WIDTH="36%" HEIGHT="110" VALIGN="bottom">bagaimana dengan ini VALIGN="bottom"</TD>
</TR>
<TR>
<TD WIDTH="30%" HEIGHT="100" ALIGN="left">kalo ini ALIGN="left"</TD>
<TD WIDTH="34%" HEIGHT="100" ALIGN="center">ALIGN="center"</TD>
<TD WIDTH="36%" HEIGHT="100" ALIGN="right">Dunia diciptakan untuk
semua makhluk, bukan untuk kepentingan dunia itu sendiri, dan ini dengan ALIGN = "right"</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Table CELLSPACING dan CELLPADDING

Atribut CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat di antara dua buah sel. CELLPADDING berfungsi untuk mengatur jumlah spasi yang terdapat di antara batas/border dengan isi atau teks di dalam sel tersebut.

Contoh:
<HTML>
<HEAD>
<TITLE>Tabel dengan CELLSPACING dan CELLPADDING</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="3" CELLPADDING="5" CELLSPACING="5" WIDTH="85%">
<TR>
<TD WIDTH="43%">baris 1, kolom 1</TD>
<TD WIDTH="57%">baris 1, kolom 2</TD>
</TR>
<TR>
<TD WIDTH="43%">baris 2, kolom 1</TD>
<TD WIDTH="57%">baris 2, kolom 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Table COLSPAN dan ROWSPAN

Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi satu kolom. Sedangkan ROWSPAN digunakan untuk menggabungkan beberapa baris menjadi satu.

Contoh:
<HTML>
<HEAD>
<TITLE>Tabel dengan ROWSPAN dan 
COLSPAN</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="3" CELLPADDING="5" CELLSPACING="5" WIDTH="85%">
<TR>
<TD WIDTH="43%" ROWSPAN="2">baris 1, kolom 1<P>baris 2, kolom 1</TD>
<TD WIDTH="57%">baris 1, kolom 2</TD>
</TR>
<TR>
<TD WIDTH="57%">baris 2, kolom 2</TD>
</TR>
<TR>
<TD WIDTH="100%" COLSPAN="2">baris 3, kolom 1<P>baris 3, kolom 2</TD>
</TR>
</TABLE>
</BODY>