Membuat Web Personal dari Foto dengan Photoshop( Lanjutan )

Catatan ini merupakan lanjutan dari catatan saya sebelumnya Membuat template Web Personal dari Foto dengan Photoshop...Bagi saudara yang ingin melanjutkan membaca catatan ini alangkah lebih baiknya membaca catatan saya sebelumnya yang saya sebut diatas.

Pada catatan ini saya akan menjelaskan bagaimana memfungsikan semua menu dan mengisi conten  dengan menu yang telah kita buat pada tutorial sebelumnya.

Sebelum melangkah lebih mundur eh lebih jauh dalam catatan ini terlebih dahulu saudara harus menginstal aplikasi PSPad untuk editor kode program. Jika saudara belum punya silahkan downlond atau saudara cari sama si mbahnya google juga boleh, aplikasi ini di jamin gratis dan ringan untuk digunakan .

Okay mengintip sedikit pada catatan sebelumnya, pada catatan sebelumnya kita telah menyimpan hasil akhirnya pada sebuah folder yang diberi nama folder Myweb, di dalam folder ini terdapat  satu folder dengan namaimages dan satu file dengan nama index.html, didalam folder images terdapat potongan-potongan gambar yang telah kita seleksi menggunakan slice tool (penjelasan pada catatan sebelumnya), sedngkan file index.html berisi script yang memanggil potongan-potongan gambar didalam folder images untuk ditampilkan dihalaman browser kesayangan anda, dan pada catatan ini kita akan bermain-main pada file index.html.

Langsung saja jalankan aplikasi PSPad yang sudah terinstal dikomputer saudara dan mari kita lanjutkan pada langkah-langkah berikut ini :

Langkah pertama :

1. Buka file index.html dengan browser kesayangan saudara ( disini saya menggunakan firefox ), pada browser terlihat tampilan website disebelah kiri, disini kita akan mengarahkan tampilan web ke tengah browser, caranya bagaimana....? ikuti cara ke2
2. Buka file index.html dengan aplikasi PSPad, caranya : pada pojok kanan atas aplikasi PSPad click File -> Open terus cari file index.html di dalam folder ygang saudara simpan terus click tombol open (mudah bukan...hehe). Terus dalam script < table id=... width=... height=... border=... cellpadding=... cellspasing=...> tambahkan dengan align=center, sehingga menjadi < table id=... width=... height=... border=... cellpadding=... cellspasing=... align=center> seperti contoh gambar berikut :
   
                                         
3. Buka kembali file index yang di browser saudara dan refresh, sekarang tampilan web saudara sudah berada di tengah, selanjutnya untuk kita melangkah lagi..

Langkah Kedua bagian Menu :

1. Ada 4 menu yang akan kita link kan dengan masing-masing file, yaitu menu HOME dengan file index.html, PROFILE dengan profile.html, GALERY FOTO dengan galery.html dan LINK dengan link.html...loh file profile.html, galery.html dan link.html nya dmn...sabaaarrr kita kasih link dulu semua menunya, ikuti cara kedua :
2. Buka file index.html dengan PSPad terus cari script yang memanggil nama potongan gambar dari tiap menu ( silahkan lihat potongan gambar dalam folder images jika ngung-bingung ), terus tambah kan script berikut sebelum script image < a href=index.html> untuk menu Home, < a href=profile.html>untuk menu Profile, < a href=galery.html> untuk menu Galery Foto dan < a href=link.html> untuk menu Link dan tiap akhir script image tambahkan dengan < /a> sehingga scriptnya menjadi :

Script Menu HOME	< a href=index.html> < img src=images/index_04.gif width=... height=...  alt="" > < /a>
Script Menu PROFILE	< a href=profile.html> < img src=images/index_05.gif width=... height=...  alt="" > < /a>
Script Menu GALERY FOTO	< a href=galery.html> < img src=images/index_06.gif width=... height=...  alt="" > < /a>
Script Menu LINK	< a href=link.html> < img src=images/index_07.gif width=... height=...  alt="" > < /a>
Ket: Tulisan yang di cetak merah yang ditambahkan, fungsinya untuk membuat link pada masing-masing menu.

3. Selanjutnya Buka file index.html dengan browser firefox, ow ow oww tampilan layout jadi hancur berantakan seperti gambar berikut, jangan takut kita akan atur kembali :
   
4. Tambahkan border=0 seperti pada tabel di bawah, 

Script Menu HOME	< a href=index.html> < img src=images/index_04.gif width=... height=...  alt="" border=0> < /a>
Script Menu PROFILE	< a href=profile.html> < img src=images/index_05.gif width=... height=...  alt="" border=0> < /a>
Script Menu GALERY FOTO	< a href=galery.html> < img src=images/index_06.gif width=... height=...  alt="" border=0> < /a>
Script Menu LINK	< a href=link.html> < img src=images/index_07.gif width=... height=...  alt="" border=0> < /a>
Ket: Tulisan yang di cetak biru yang ditambahkan, fungsinya untuk menghilangkan border pada gambar.

5. Setelah saudara menambahkan script tersebut buka kembali file index saudara dengan browser firefox dan lihat hasilnya.

6. Selanjutnya kita membuat file profile.html, galery.html dan link.html, caranya : buka file index.html dengan PSPad, terus Save As file index.html ini dengan nama profile.html dan lakukan sekali lagi Save As dengan nama galery.html dan terakhir Save As dengan nama link.html, tempat Save As file harus dalam folder MyWeb Sehingga sekarang kita memiliki 4 file html seperti gmbar berikut:  
   
7. okelahlah kalaw begitu kita lanjut lagi....^_*

Langkah Ketiga, bagian Content :

1. Pada bagian content kita akan modif sedikit tag html dengan menambahkan Cascading Styles Sheet (CSS), caranya Buka file index.html dengan PSPad kemudian tambahkan CSS dalam tabel dibawah diantara tag < head> seperti dalam tabel berikut :

< html> < head> < title>My-Web< /title> < style type="text/css"> #content {  background:url(images/index_10.gif);     padding:0;     border:0;     width:499px;     height:386px; } #content #dalam{     background: none;     width: 450px;     height: 350px;     margin-left: 30px;     } .content-text{     font: 12px Comic;     background:none;     margin-left: 30px;     color: Gray;     } .img2{     float: left;     margin: 0 5px 5px 0;     border: 4px solid gray;     } < /style> < /head>

Ket : bagian background: url(images/index_10.gif); memanggil potongan gambar pada bagian content

2. Selanjutnya pada bagian tag html yang memanggil potongan gambar untuk content ganti dengan tag CSS berikut, seperti dalam tabel :

< tr>    < td colspan="5">       < div id=content>          < div id=dalam>< span class=content-text>     < p> ISI Content < /p> < /span>< /div>< /div> < /td>     < /tr>

Ket : yang dicetak biru tempat mengisi  content.

3. Kemudian isi bagian Content, diisi pada bagian Isi content yang ditulis biru pada tabel diatas seperti tabel di bawah ini mengisi bagian content file index.html...

< p>Welcome to Avril Lavigne website, and its dedicated to her smoldering lips, big blue eyes and pale skin which make for an enticing package, one that will only get better with age. < /p>

4. Buka file index.html dengan browser firefox saudara, kita telah berhasil mengisi content index, berhasil...berhasil...berhasiiil....
5. Selanjutnya Untuk mengisi content Profile, Saudara tinggal ikuti Langkah Ketiga cara 1 sampai 2 atau copy-kan aje script tersebut dalam file profil.html. Di bagian content Profil kita akan menampilkan sebuah foto dihalaman web Profile, sebelum lanjut maju kedepan buat dulu sebuah folder didalam folder Myweb dengan nama folder img dan simpan didalam folder tersebut sebuah foto dengan nama avril.jpg, tag menampilkan foto dan isi content untuk profile lihat tabel berikut:
6.  

< p>< img class=img2 src="img/avril.jpg" mce_src="img/avril.jpg" width="105" height="140">             Avril Lavigne dilahirkan disebuah kota kecil,             Napanee, Ontario. Kemampuan Avril dalam bernyanyi telah diketahui sejak ia berumur 2 tahun,              Keluarga Avril pindah ke Napanee saat dia berumur 5 tahun. Pada tahun 1998,             Avril memenangkan kompetisi bernyanyi dalam tour resmi penyanyi Kanada, Shania Twain.             Avril menyanyikan lagu Shania yang berjudul What Made You Say That.< br />

Ket : Bagian yang dicetak biru untuk memanggil gambar dengan nama avril.jpg yang berada di dalam folder img dan ditampilkan di halaman profile web.

7. Selanjutnya untuk content galery foto saudara tinggal mengikuti langkah ketiga cara 5 diatas, sebelumnya saudara harus menambahkan beberapa foto kedalam folder img untuk ditampilkan di halaman galeri foto, tag untuk memanggilnya lihat dalam tabel berikut :

< p>< img class=img2 src="img/avril2.jpg" width="105" height="140">        < img class=img2 src="img/avril3.jpg" width="105" height="140">       < img class=img2 src="img/avril4.jpg" width="105" height="140">< /p>

Ket: tulisan yang saya cetak biru tebal merupakan nama file foto

8. Selanjutnya untuk content link, ikuti cara 5 diatas, dan isi contentnya seperti dalam tabel berikut :

< p>Link Music : < /p> < a href=http://www.stafaband.info target=_blank>Stafaband  < /a>

Ket: tulisan yang warna biru adalah link ke webnya stafaband.com, dan tulisan yang saya cetak tebal biru adalah link yang ditampilkan di halaman web.

9. Sekarang saudara tinggal jalankan webnya di browser dan click masing-masing menu untuk melihat hasilnya...horeee webnya dah jadi...hehehee 

Okay saudara...selesai sudah pembuatan Web Personal ini, saudara bisa download hasil akhir dari pembuatan web ini di menu download pada website ini dengan nama project website personal. Untuk masing-masing halaman webnya silahkan lihat di bawah ini :

1. Halaman HOME 
   
2. Halaman PROFILE  
   
3. Halaman GALERY FOTO 
   
4. Halaman LINK 
   

Catatan : Pembuatan Web ini merupakan salah satu cara merancang web dengan TABEL, selain menggunakan tabel ada cara lain dengan menggunakan DIV ( full script CSS ). Ada Kelebihan dan kekurangan dalam membangun web dengan menggunakan TABEL dan DIV ini, semakin saudara banyak belajar membangun web dengan menggunakan 2 cara ini semakin tau kekurangan dan kelebihannya...makanya kalau ingin pintar...ya belajar...hahaha..kayak iklan aj...Di lain waktu saya akan menuliskan tutorial membangun web dengan menggunaka CSS ini. Maaf kalau dalam penyampaian dalam catatan ini agak beribet...maklum baru belajar....kekkekekeee 

SemangArt Belajar...:)

Read More

Membuat Template Web Personal dari Foto dengan Photoshop

Kali ini kita akan membuat sebuah template web personal dengan editor photoshop. Dalam pembuatan template ini kita mengunakan sebuah foto ato gambar dengan memberikan nuansa full color pada foto dan membentuknya menjadi sebuah template web dan selanjutanya kita bisa membangun template ini menjadi website personal. Walaupun bisa dibilang pembuatan tempalate web ini tidak terlalu rumit atau sangat sederhana sekali tapi bukankah lebih baik belajar dari yang mudah dan yang sederhana dulu untuk mencapai sebuah yang wah wah wah atau yang lebih baik,hehehe.

Sebelum kita lanjut pada catatan ini cara membuat template web personal dari foto dengan menggunakan photoshop, tentunya terlebih dahulu saudara telah menyediakan sebuah gambar atau foto (disini saya menggunakan fotonya Avril Lavigne, kenapa fotonya Avril Lavigne...? hmmm...kenapa ya.....kenapa ya....mbuh....*_^ ) dan juga jangan lupa seperti penggalan judulnya " dengan photoshop " tentunya di komputer saudara telah ter-instal aplikasi Photoshop. Jika sudah...mari kita mulai pembuatan template sederhana ini:

Langkah pertama:

1. Jalankan Phothoshop saudara lalu pada pojok kiri atas click File -> Open, cari gambar yang telah saudara sediakan lalu click tombol open, disini saya menggunakan fotonya Avril Lavign :

2. Selanjutnya buat kanvas/layer baru, caranya click File ->New, untuk setingan Width dan Height sesuaikan dengan gambar saudara ( disini saya menggunakan Width: 770pixel dan Height: 570pixel ) sedangkan untuk background contentnya pilih transparant, trus click OK. 
3. Selanjutnya drag/tarik gambar kedalam layer yang baru kita buat, lalu sesuaikan gambar dengan layar yang baru caranya tinggal menarik ke pinggiran layar baru dengan menggunakan Move tool  
   
4. jika sudah click move tool sekali lagi, klw ada peringatan click aja tombol apply...
5. Ok langkah pertama sudah selesai, saudara dapat lihat pada pojok kanan bawah pada photoshop sudah memiiki dua buah layer, layer1 berupa layer kosong dan layer2 berupa gambar yang sudah didrag...selanjutnya kita akan bermain-main pada layar ini. 

Langkah Kedua, memberi style :

1. Click kanan pada Layer2 yang saya sebut diatas terus pilih dan click Blending Option seperti gambar.
   
2. Kemudaian muncul Layer Style, pada layer style silahkan saudara ceklis dan bermain-main untuk menentukan setingan style atau efect yang diberikan menurut selera saudara sendiri...disini saya memberikan effect atau ceklis pada -> Inner Shadow , Inner Glow dan Satin seperti gambar berikut. 
   

Langkah Ketiga, membuat bagian header :

1. Membuat Tulisan MY WEB pada header, caranya click Horizontal Type Tool ( huruf T pada tool panel sebelah kiri ) . 
   
2. Selanjutnya saudara tinggal menuliskan kata MY WEB pada layer gambar, disini silahkan saudara ganti jenis font, warna atau ukuran font sesuai yang diinginkan, untuk mengatur letak font gunakan move tool. Jika ingin memberikan style pada tulisan my web caranya sama pada langkah kedua cuma disini yang di click pada layer my web seperti gambar. 
   
3. Pada header saya menambah sebuah kotak cara membuatnya click Rounded Rectangle Tool ( gambar kotak pada tool panel sebelah kiri ) seperti pada gambar : 
   
4. Selanjutnya tinggal membuat kotak pada bagian header, tambahkan style pada kotak caranya sama dengan langkah kedua diatas tapi disini dengan meng-click Shape 1 pada tab layer seperti pada gambar :
   

Langkah Keempat, Membuat Menu :

1. Disini saya membuat Menu HOME, PROFILE, GALERY FOTO dan LINK. Untuk membuat menu ini caranya sama dengan langkah ketiga cara 1 dan 2 membuat Tulisan MY WEB, cuma disini saudara harus membuatnya satu-satu dan untuk mengatur penempatannya gunakan move tool. 
2. Untuk membuat menu menjadi bentuk tombol, caranya tambah Rounded Rectangle Tool pada      tiap menu dan atur Style, Opacity dan Fill seperti gambar berikut : 
   
3. Pada gambar diatas dapat saudara lihat saya memberikan Style Effect : Inner Shadow, Outer Glowdan Gradient Overlay yang saya lingkari kotak orange dan pada kotak merah Opacity 47% dan Fill 89%,  disini saudara bisa mengatur sendiri sesuai style yang saudara inginkan dengan cara diatas.   

Langkah Kelima, membuat Ruang Content :

1. Sedikit penjelasan, Apa itu ruang content...? Disini saya artikan sebagai ruang untuk menampilkan isi dari menu. Semoga Aja kagak salah...hehehee
2. Cara Membuat ruang content, Disini saya menempatkan sebuah Rectangle Tool, caranya Click Rectangle Tool atau gambar kotak pada tool panel sebelah kiri, lalu buatlah kotak pada layer gambar sesuai dengan ruang content yang telah saudara sediakan dan aturlah stylenya seperti penjelasan Langkah kedua diatas, disini saya memberikan ceklis pada Outer Glow dan Inner Glow.
3. Untuk Mengatur agar kotak kelihatan Transparant, Pada Tab Layers Kanan Bawah Atur Opacity: 25% dan Fillnya: 13%.
4. okay....sampai disini layout template sudah jadi seperti gambar dibawah :
   

Langkah Enam, Menyeleksi bagian layout template :

1. seleksi bagian-bagian layout yang akan di fungsikan pada website dengan menggunakan Slice Tool (gambar pisau pada tool panel ). 
   
2. Pertama, seleksi pada bagian header,
3. Kedua, seleksi pada bagian menu, disini kita harus seleksi satu-satu bagian menu, jadi disini terdapat 4 bagian seleksi
4. Ketiga, seleksi pada bagian Content
5. Dan terakhir seleksi pada bagian-bagian lain yang tersisa pada layout template, seperti pada gambar berikut :
   
6. Sampai disini saya anggap seleksi layout sudah topmarkotop deh....*_^

Langkah Tujuh, Menyimpan Layout Template :

1. Okay Langsung Saja, pada pojok kanan atas Click File -> Click Save For Web & Devices. lalu akan muncul layar wizard untuk setingan savenya. Disini saudara bisa memilih format gambar yang akan di save dan setingan lainnya.
2. Jika saudara sudah memilih format gambarnya lalu tekan tombol save, lalu akan muncul layar Save Optimized As.
3. Disini saya sarankan saudara membuat sebuah folder dulu, caranya langsung Click kanan aja pada ruang kosong pada Save optimized As -> pilih New -> Folder -> beri nama Myweb -> lalu simpan Template Saudara di dalam folder tersebut, sebelum di save beri file name saudara dengan index dan pilih opsiHTML dan Images untuk save as type. 
   
4. Silakan buka folder Myweb lalu click file index yang telah kita simpan dengan browser kesayanagan saudara...sip markusip template yang kita buat telah selesai...tapi disini baru berbentuk gambar...hehehee

Okay Sampai disini Template Web Personal dari foto yang kita buat dengan photoshop sudah selesai, selanjutnya saya akan menjelaskan bagaimana memfungsikan semua menu dan menjadikan Website Personal untuk Saudara ... Tapi berhubung mata udah setengah watt dan saya mw mimpi indah malam ini saya tidur dulu...hahihuheho.....

Read More

Belajar Pemrograman PHP

PHP adalah bahasa pemrograman yang relatif sangat mudah dipelajari karena sangat fleksibel dan tidak memerlukan aturan yang ketat dalam penulisan programnya. Nah, untuk bisa emmpelajarinya at least kamu harus memahami beberapa hal yang dasar terlebih dahulu. Kita mulai dengan urutan ilmu yang sebaiknya dikuasai terlebih dahulu ya.

Urutan Belajar Pemrograman PHP

Pertama sekali, kamu harus udah terbiasa nginternet. ini hukumnya wajib dan mandatory, karena PHP adalah bahasa pemrograman yang ditujukan untuk pemrograman di dunia internet. Perhatikan contoh-contoh web dinamis yang pernah kamu telusuri dan kamu pasti sudah melihat bahwa aplikasi web interaktif sangat bervariasi dan bermanfaat. Dengan melihat banyak contoh yang ada, maka kreasi kamu akan lebih kratif.

Kalau udah sering nginternet, kamu harus memahami dulu cara kerja pemrograman Internet. Kamu bisa mulai dengan mempelajari bagaimana sebuah halaman web dapat tampil di layar komputer kamu dari web server yang letaknya jauh di belahan bumi lain. Salah satu sumber yang baik adalah http://w3school.org check that out!

Setelah punya bayangan tentang cara kerja internet, kamu bisa mulai belajar pemrograman HTML dulu untuk membuat halaman web statis. Kamu perlu menguasai HTML ini demi keindahan tampilan web site yang akan kamu bikin. Lengkapi pengetahuan kamu dengan tambahan ilmu lain seperti CSS yang akan membuat kamu mudah dalam mengubah tampilan web kamu dalam waktu singkat.

Kalau udah cukup mateng di HTML, kamu udah bisa mulai melangkahkan kaki kamu untuk mempelajari pemrograman PHP. Hal ini akan memberikan kemampuan baru pada web site yang kamu buat yaitu sifat interaktif dengan pengunjung web site kamu. Sebagai salah satu sumbernya, kamu bisa belajar php di tutorial yang ada di situs ini.

Nah, saat kamu udah mulai mempelajari pemrograman PHP, kamu akan sampai ke satu titik di mana kamu akan membutuhkan database. Database ini berguna untuk membuat web site kamu lebih bermanfaat lagi yaitu dengan membuat kamu bisa menyimpan data untuk dan dari pengunjung web site kamu dalam jumlah besar dan menampilkannya dengan lebih mudah.

Ok, kalau udah sampai tahap ini, kamu udah memiliki semua kemampuan dasar untuk membuat website. Selanjutnya kamu tinggal mengasah kemampuan yang kamu miliki dengan banyak mempelajari script yang sudah ada. Kamu bahkan bisa membuat program PHP yang canggih tanpa perlu menuliskan setiap kode dari awal. Gunakan script yang ada untul membantu kamu melakukan development website PHP kamu dengan jauh lebih cepat. Kunjungi website http://hotscripts.com sebagai salah satu sumber kamu, dan aktiflah di berbagai forum PHP yang ada.

Terakhir.. Praktek, praktek dan praktek... SemangArt :)

Read More

Membuat Accordion Menu dengan JQuery

Menu Accordion digunakan untuk menimalisir ruang dari sebuah halaman website. Cara kerja menu accordion sangat simpel dan hanya membutuhkan tempat yang sedikit dari ruang website, karna menu-menu ditempatkan dalam sebuah menu utama, dimana jika sebuah menu terbuka menu yang lain akan tertutup. 

Di catatan kali ini saya akan memberikan cara membuat menu accordion dengan Jquey yang sederhana.

Untuk membuat Menu Accordion kita membutuhkan file JQuery yang mana dapat didownload secara gratis diJQuery.com . Setelah file JQuery saudara download tempatkan dalam sebuah folder dimana didalam folder ini kita juga akan menyimpan file css dan html, selanjutnya untuk membuat menu accordionnya ikuti langkah berikut :

Langkah petama membuat file css :

1. Buka editor saudara, disini saya menggunakan editor PSPad untuk membuat file css. 
2. Kemudian buat file css di bawah ini :

.accordion {       width: 250px;       border: 1px dotted #222;       } .accordion-menu {       background-color: #666;       border-style: solid;       border-width: 1px 1px 2px;       border-color: #ccc #ccc #666;       padding: 3px;       cursor: pointer;       color: #333;       text-shadow: 0 1px 0 #fff;       margin: 0;       } .accordion-isi {       padding: 8px 4px 4px;       }

3. Simpan file css diatas didalam folder yang telah kita buat sebelumnya dengan nama file accordion.css.

Langkah Kedua, implementasikan kode Jquery :

1. Implementasi kode jQurey seperti tabel berikut :

$(document).ready(function() {     $('.accordion .accordion-menu')         .next('.accordion-isi')         .filter(':not(:first)')         .hide();         $('.accordion > .accordion-menu').click(function(){                 var selfClick = $(this).next('div:frst').is(':visible');         if(selfClick) {             return;         }            $(this)               .parent()               .find('> div:visible')               .slideToggle();            $(this)               .next('div:first')               .sildeToggle();       }); });

2. implementasi kode Jquery diatas akan ditempatkan dalam markup html dimana fungsinya yang akan mengatur animasi accordion menu. 

Langkah Ketiga membuat markup HTML :

1. Panggil file JQuery dan file CSS yang telah dibuat, tempatkan diantara tag < head> 

< link rel="stylesheet" type="text/css" href="accordion.css> < script type="text/javascript" src="jqurey-1.5.1.js> < /script>

2. Kemudian buat tag htmlnya seperti tabel berikut :

< div class="accordion">     < h3 class="accordion-menu">Menu Pertama< /h3>     < div class="accordion-isi">         < ul>            < li>Link1< /li>            < li>Link2< /li>         < ul>     < /div>          < h3 class="accordion-menu">Menu Kedua< /h3>     < div class="accordion-isi">         < p>Content accordion tidak hanya list saja, paragraph pun bisa< /p>     < /div>          < h3 class="accordion-menu">Menu Ketiga< /h3>     < div class="accordion-isi">         < h3>Title< /h3>         < p>Isi accordion bisa apa saja, terserah anda< /p>     < /div>          < h3 class="accordion-menu">Menu Keempat< /h3>     < div class="accordion-isi">         < ol>             < li>Link 1< /li>             < li>Link 2< /li>             < li>Link 3< /li>         < /ol>     < /div>   < /div>

Ket : didalam tag < > tidak ada spasi.

3. Sehigga keseluruhan dari kode dalam htmlnya sebagai berikut :

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> < html>   < head>   < title>Accordion Menu< /title>   < link rel="stylesheet" type="text/css" href="accordion.css" mce_href="accordion.css">   < script type="text/javascript" src="/jquery-1.5.1.js" mce_src="/jquery-1.5.1.js">< /script>   < script type="text/javascript">     $(document).ready(function(){         $('.accordion .accordion-menu')             .next('.accordion-isi')             .filter(':not(:first)')             .hide();         $('.accordion > .accordion-menu').click(function(){             var selfClick = $(this).next('div:first').is(':visible');             if(selfClick) {               return;             }             $(this)                 .parent()                 .find('> div:visible')                 .slideToggle();             $(this)                 .next('div:first')                 .slideToggle();          });     });     < /script> < /head> < body>   < div class="accordion">     < h3 class="accordion-menu">Menu Pertama< /h3>     < div class="accordion-isi">         < ul>            < li>Link1< /li>            < li>Link2< /li>         < ul>     < /div>          < h3 class="accordion-menu">Menu Kedua< /h3>     < div class="accordion-isi">         < p>Content accordion tidak hanya list saja, paragraph pun bisa< /p>     < /div>          < h3 class="accordion-menu">Menu Ketiga< /h3>     < div class="accordion-isi">         < h3>Title< /h3>         < p>Isi accordion bisa apa saja, terserah anda< /p>     < /div>          < h3 class="accordion-menu">Menu Keempat< /h3>     < div class="accordion-isi">         < ol>             < li>Link 1< /li>             < li>Link 2< /li>             < li>Link 3< /li>         < /ol>     < /div>   < /div> < /body> < /html>

Ket : didalam tag < > tidak ada spasi..disini saya kasih spasi karna saya tidak memakai syntakhl.

4. Selesai sudah Accordion Menu yang kita buat, file yang sudah jadi silahkan download pada menu download pada web ini dengan nama file Accordion Menu Dengan JQuery, semoga bermanfaat dan bisa dikembangkan lagi...Terima kasih...( *_^ )

Read More

Pengenalan dan Cara Penggunaan JQuery

JQuery merupakan suatu framework (pustaka) Javascript yang menekankan bagaimana interaksi antara Javascript dengan HTML. Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak developer web menggunakannya. JQuery memiliki slogan“Write less, do more” yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.

JQuery adalah library open source dengan lisensi GNU ( General Public License ) dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping, hanya sekitar 60 KB dan hanya terdiri dari satu file, sehingga dengan menggunakan JQuery akan jauh lebih cepat dan mudah dalam perpindahan dokument HTML, penggunaan animasi di dalam web sehingga terlihat seperti menggunakan flash.

Cara Penerapan JQuery...

Karna JQuery merupakan sebuah pustaka/library, tentunya saudara harus memiliki JQuerynya terlebih dahulu. Silahkan Download library JQuery di http://jquery.com setelah itu silahkan simpan di folder dalam drive saudara ( misal D:/jquery/ file library jquery ).

Selanjutnya saya akan berikan contoh penggunaan JQuery bagaimana menampilkan dan menutup sebuah gambar dengan menggunakan dua buah tombol.

Contoh :

< html>    < head>      < title>Contoh Penerapan JQuery< /title>      < script type="text/javascript" src="jquery-1.5.2.min.js" mce_src="jquery-1.5.2.min.js">< /script>      < script type="text/javascript">        $(document).ready(function(){            $(".tutup_gambar").click(function(){               $("#gambar").hide("slow");            });            $(".tampil_gambar").click(function(){               $("#gambar").show("slow");            });        });       < /script>    < /head>    < body>      < button class="tutup_gambar">Tutup Gambar< /button>      < button class="tampil_gambar">Tampil Gambar< /button>      < p>< img id="gambar" src="yonand.jpg" mce_src="yonand.jpg" style="border:7px solid; padding:5px;"/>< /p>    < /body>  < /html>

 Simpan file diatas dengan index.html, di tempatkan persis sama dengan file library JQuery yg telah didownload, kemudian tempatkan juga sebuah gambar dengan nama yonand.jpg.

 penjelasan untuk script diatas :

fungsinya memanggil library JQuery yang didownload.	< script type="text/javascript" src="jquery-1.5.2.min.js" mce_src="jquery-1.5.2.min.js">< /script>
JQuery memastikan bahwa elemen yang diinginkan sudah ditampilkan dihalaman web.	$(document).ready(function()
Setelah semua Elemen ditampilkan, kemudian jQuery akan memilih elemen berdasarkan id, class atau tag. Atau lebih dikenal denganselector.	$(".tutup_gambar") $(".tampil_gambar") $("#gambar")
Setelah elemen dipilih, berikutnya adalah memberikan aksi/operasi terhadap elemen       yang sudah dipilih. Contoh disamping-> show.	$(".tampil_gambar").click(function(){               $("#gambar").show("slow");            });

Memahami sedikit tentang JQuery :

$ -> merupakan simbol  JQuery. {"id/class/tag"} -> Elemen/Slector pd Jquery .addclass("XXX") -> memberi perintah pada elemen

$("id/class/tag").addclass("XXX")

Intinya dari Fungsi JQuery akan mencari suatu elemen tertentu yang telah didefenisikan pada bagian body, kemudian akan mengeksekusi bagian elemen terssebut sesuai dengan perintah yang diberikan.

Sekian pengenalan Jquerynya semoga dari sedikit penjelasan diatas bisa saudara kembangkan lagi..

Read More