Web Design Layout Plus Implementasi jQuery Tab Content

November 26th, 2008 by dr.emi

Welcome back friend ! tutorial ini menjelaskan bagaimana membuat sebuah layout yang interaktif. Penggabungan dari designing web layout menggunakan photoshop dan Editing dengan HTML+CSS. Kemudian mengimplementasikannya menggunakan jQuery Ajax saat meload PHP Content

 

Yang lu perlukan adalah:

-Photoshop
-HTML+CSS
-jQuery Ajax
-PHP

Part I Designing Website Layout

Buka Photoshop lu, bikin ukuran kanvas kaya gini:

Pilih Rectangle Marquee Tool, bikin objek header ke gini:

Apply beberapa layer style :

Liat dlu hasilna

Sekarang bikin garis berwarna putih make single row marquee tool, antara gradien dan drop shadow. fill line make warna putih

Gunakan rounded rectangle tool bwat mbikin navigation button, gunakan radius sesuai keinginan lu

apply layer style

Semua gradien ada dalam paket download tutorial na

Pencet [CTRL+Click] pada layer navigation button, bwat mbikin seleksi sekitar button.

Pilih seleksi Eliptical Marquee Tool dengan option option : Intersect with selection. Truzzz buat seleksi oval diatas seleksi sebelumna

Lu bakalan dapet hasil seleksi ke gini

Pencet [CTRL+D] bwat Deselect

Tros transform objek na vertikal, dengan mencet [CTRL+T] -> Flip Vertical

Pilih menu Filter > Blur > Gaussian Blur. Kasiin 2 px radius.

dan ubah blending layerna menjadi Overlay

Kasi text button na juga

Lu bisa group ksmua layer navigasi ke dalam satu group, dan duplikat gorup na mnjadi beberapa group

Hampir selesai layoutna, kasiin objek icon dan text sebagai title web na

Terakhir bikinin footer dengan cara sederhana kaya mbikin header

Review dlo hasil akhir layout na

Part II Slicing Images

Bagian ini kita bakalan ambil gambar tertentu saja, ambil bagian na dengan slicing tool yang nantina bakalan diperlukan bwat bikin code CSS na

Pertama adlah slice navigasi

Pilih File > Save for Web and Device

Inget ye: pilihna nyang Selected Slice dowank

Selanjutna terusin ke slice berikutna, kaya bg-header, bg-footer dan logo

Jadi lu bakalan dapet beberapa images yang dibutuhkan dalam coding CSS na

Part III Make HTML+CSS Code

Bwat mbikin web lu knceng di load saat dibuka di browser, Less Table adaalh salah satu cra terbaik :)

Gw paling suka bagian ini, buka Dreamweaver lu, bikin file CSS

Nah ini code CSS na:

  <style type="text/css">
html,body{
margin:0;
padding:0;
border:0;
/* \*/
height:100%;
/* Last height declaration hidden from Mac IE 5.x */
}
body {
background:#ffffff url(images/bg-header.gif) 0 0 repeat-x;
color:#000000;
min-width:960px;
}
#mainPan {
width:960px;
position:relative;
margin:0 auto;
}
#bodyPan {
width:960px;
margin:0 auto;
}
#headerPan {
width:960px;
height:127px;
margin:0px;
padding:0px;
}
#headerPan img.logo {
border:0px;
width:148px;
height:69px;
margin-left:20px;
margin-top:10px;
}
/* MENU TAB NAVIGATION */
#tabs {
line-height:normal;
top: 25px;
right:10px;
position:absolute;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#ffffff;
float:left;
background:url(images/bg-navigasi.gif) no-repeat left top;
margin:0;
padding-top:10px;
text-decoration:none;
width:137px;
height:59px;
text-align:center; /*for IE + FF right here*/
}
#tabs a:hover {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color: #FFCC00;
}
.spacer {
margin-bottom:20px;
}
/* CONTENT */
#contenPan {
font-size:11px;
color:#666666;
font-family:Arial, Helvetica, sans-serif;
width:960px;
margin:0px;
}
#contenPan h2 {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#006699;
}
#contenPan a {
color:#0066CC;
text-decoration:none;
}
#contenPan a:hover {
color: #FF0000;
text-decoration:none;
}
/* FOOTER */
#footerMainPan {
position:relative;
clear: both;
width:100%;
height:138px; /*for FF add 10px;*/
overflow:hidden;
background:url(images/bg-footer.gif) 30px center repeat-x;
text-align:center;
}
#footerPan {
padding-top:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #666666;
width:960px;
height:88px;
background: url(images/cutter.gif) right top no-repeat;
margin:0px;
}
#footerPan a {
color: #0099FF; text-decoration:none;
}
#footerPan a:hover {
color: #333399; text-decoration:none;
}
</style>

save dan kasi nama style.css

sekarang kite bakalan mbikin index.html

dan ini code ma:

<div id="mainPan">
<div id="bodyPan">

<div id="headerPan">
<img src="images/logo.gif" class="logo" />
<div id="tabs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">AJAX</a></li>
</ul>
</div>
</div>

<div id="contenPan">
<h2>Heloo....</h2>
<p>This is main Content <a href="#">[link]</a></p>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
</div>

</div>

</div>
<div id="footerMainPan">
<div id="footerPan">
&copy; 2008 Web Design Ajax jQuery.
<a href="http://www.psdremi.co.cc" target="_blank">
PSDREMI.CO.CC
</a>
</div>
</div>

Gw rasa cuma sgitu code na, gw yakin lu bakalan familiar kok :)

Part IV Adding jQuery Ajax Scripts to Load Contents

Lu pada tau jQuery kan ? kalo belom, baca pengenalan tentang jQuery dlo yak di web na :)

Pada bagian ini kita butuh jQuery script library, sedangkan plugin ga diperlukan.

Cuma kasi baris ini di HTML na, bwat ngeload jQuery Javascript Library na

<script src="jquery-1.2.6.js" type="text/javascript"></script>

dan kasi code javascripts bwat mbikin fungsi untuk meload external content pada contentPan Div

<script type="text/javascript">
$(function(){
$("#ajax_display").ajaxStart(function(){
$(this).html('<p><img src="images/ajax-loader.gif" /></p>');
});
$("#ajax_display").ajaxSuccess(function(){
$(this).html('');
});
$("#ajax_display").ajaxError(function(url){
alert('jQuery ajax is error ');
});
});
function loadContent(id) {
$("#contenPan").hide();
$("#contenPan").load("php-loader.php?cPub="+id+"", '', callback);
}
function callback() {
$("#contenPan").show();
}
$(document).ready(loadContent(id));
</script>

Simple line:

  $(this).html('<p><img src="images/ajax-loader.gif" /></p>');

/*this line will load the ajax-loader.gif while progress on request*/

dan code berikut ini diperlukan bwat memanngil data content

  function loadContent(id) {
$("#contenPan").hide();
$("#contenPan").load("php-loader.php?cPub="+id+"", '', callback);
}
function callback() {
$("#contenPan").show();
}

php-loader.php adalah file PHP yang bertugas memberikan value dalam bentuk HTML, value ini akan direquest oleh jQuery Ajax untuk di load ke contentPan Div

Kalo lu liat pada akhir variable GET na berupa variable cPub, maka kita bakalan bikin file PHP yang menggunakan kondisi pemilihan variable GET, ni code na:

<?
$allCount = 60; //just to simulation for data ready
if($_GET['cPub'] == 2)
{
echo "<h2>Photoshop</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is Photoshop Content. ";
}
echo "</p>";
sleep(2);
}
elseif($_GET['cPub'] == 3)
{
echo "<h2>CSS</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is CSS Content. ";
}
echo "</p>";
sleep(2);
}
elseif($_GET['cPub'] == 4)
{
echo "<h2>PHP</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is PHP Content. ";
}
echo "</p>";
sleep(2);
}
elseif($_GET['cPub'] == 5)
{
echo "<h2>AJAX</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is AJAX Content. ";
}
echo "</p>";
sleep(2);
}
else
{
echo "<h2>Home</h2>";
echo "<p><a href=''>this is a link</a></p>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "Welcome back friend ! this tutorial explain about how to designing web layout with Photoshop+CSS and then using Ajax jQuery to implementad how to Load PHP Content. ";
}
echo "</p>";
}
?>

Gw pake sleep(2) bwat mensimulasikan loading content yang cukup lama

Kayakna smua udah lengkap, tinggal lu upload ke webserver biar PHP na bekerja. ni screen shoot na

Tutorial ini gw input juga dalam bahasa inggris di PSDREMI.CO.CC dan Good-tutorials.Com

Best Regard, dr.emi

Popularity: 56% [?]

Download Demo
Bookmark Subscribe
Hello my fox! Glad to see you today!

If you love my tutorial, please chose any action from the left button.

30 Comments

dr.emi Said:  

Menggunakan jQuery lebih mudah dari pada musti megatur HTTPResponse Pada Ajax basic. Karena di dalam jQuery beberapa kelebihan nya sudah cukup untuk menghandle keperluan mendasar, kaya preloader, tab navigasi, implementasi frame, animasi dll.

tomy Said:  

thns dr.emi atas tutorna ! :d

exa Said:  

hade pisan lahh ??

mo dipelajari dlu yahh,,

ntar klo ad kesusahan boleh nanya yahhh???

dr.emi Said:  

boleh boleh aja exa :) )

forum gw selalu terbuka untuk siapa aja kok …

dr.emi Said:  

ouw !!! perbanyak tutor bhs inggris aja ah :=))

exa Said:  

mas emi,,
klo cara ngegunain library jquery nya gmn ?
soalna gue bingung liat script libraryna..
mohon petunjuknya yah

lion Said:  

Dr emi!!! SAya kesulitan dibagian membuat bayangan putih dibwh button…
Uda saya [CTRL+CLick] Layer lalu saya select pake OVAL SElection tapi bagian yg saya seleksi tidak menjadi putih..
Apa sebabnya???
Mohon tutorialnya diperjelas..
Thx

rusyad Said:  

Thanks pak dokter, ijin donlod ya…nanti tak pelajari dulu.

nieth Said:  

dr. emi, kok kalanin di localhost g mau sii,, hasil downloadan nya??? kira2 knapa yaaa??

cholid Said:  

Saya baru belajar aplikasi web neh,, terima kasih atas tutorialnya… ;)

dewik Said:  

bos…
ajarin cara bikin tabel2nya website juga dunk…
ya…kek layout awal gitu deeh….
tengkyu

bogiro Said:  

Emang ngga tanggung-tanggung dr.emi kalo ngasih ilmu…angkat 1000 jempol

gunawan Said:  

mas saya gimana kalau cara bikin sidebarnya ya

ziah Said:  

dr.emi….
dirimuw cerdas sekali !!! tutorialnya lengkap,jelas,komplit,n bermanfaat banget !!!
makaci udah bagi iLmuna dr.emi yg baik hati ^^v

Rhien Said:  

Keren mas

terima kasih ya atas ilmunya….

dd Said:  

keren…keren..bisa belajar dikit2 neh tentang tutorial.

zen Said:  

mas aq nih pemula mau coba bikin website pribadi…sangat terbantu dengan tutorialnya tapi saya masih sangat awam dengan bahasa2 pemrograman yang sangat asing..bila berkenan mas di tutorianya di sertakan pengertian selengkapnya(kamus)kata maksudnya ..contohnya apa itu PHP,Dreamwever,CSS,HTML,Jquery ajax apa fungsinya,bagaiamana mendapatkan aplikasinya,dll…thanks mas

dr.emi Said:  

hmmm gini zen, ini tutorialnya ADVANCE, jadi asumsi guwe saat membuatnya adalah user telah memahami penggunaan dan pengertian apa itu PHP,Dreamwever,CSS,HTML,Jquery ajax. Untuk belajar dari awal, ada baiknya kamu searching dulu di Google, semua pengertian dan penjelasan apa dan untuk apa PHP,Dreamwever,CSS,HTML,Jquery ajax itu ada smua.

kamu bisa pelajari dari awal dulu tentang istilah2 itu baru mempelajari tutorial ini :)

thanks

rahmat ilham Said:  

mas dremi, saya ingin membuat website yang bentuknya dan fungsinya seperti oneNote pada office 2007, apa yang harus saya lakukan. tolong tutorialnya… oh ya… mohon penjelesan tentang js ajax php sebab sya kesulitan mencari softwarenya..

feto Said:  

keren banget artikelnya terutama coding nya tapi saya masih newbie dalam JQuery jadi mohon di posting artikel yang lebih mendasar tentang JQuery…^_^

terima kasih infonya, silakan mampir yaa ke sini dan jika mau artikel menarik lainnya silakan berkunjung ke sini yaaa…

Ammar Said:  

Mas, terus terang saya masih bingung apa itu yg namanya jQuery, coz blm pernah blajar :D
tapi saya kmrn liat menu dock apple bisa dipakai di dreamweaver dengan memakai jqDock, plugin nya jQuery ya, source nya ada di http://www.wizzud.com/jqDock/

nah yg saya mau tanyai ketika saya dah download tu file, saya bingung masukin gambar menu nya di dreamweaver agar bisa kaya menu apple/jqDock ini..trima kasih atas jawabannya, saya sangat mengharapkan jawaban nya krn ini untuk tugas akhir saya :D .

gingin Said:  

bero…
link donlotan+prikitiew nya broken tuh
.hikshiks :(

dr.emi Said:  

@gingin
tengks berok bwat infona. ni link donlot baru ama demona. link tombol demo dan donlot dibawah tutorial juga udah diupdate.

DEMO:
http://dremi.org/dremi_info/demo/Web%20Design%20Layout%20Plus%20jQuery%20Tab%20Content/index.html

DoNLOT:
http://www.4shared.com/file/4fG2n4O8/jQuerytab-dremi.html

gingin Said:  

@Yth: dr.emi

makasih berat berok..
ane langsung menuju TKP
ijin sedot juga link nya.
sukses yah berok.

ane bakal sering maen dimarih dahh.. :-)

Armin Said:  

edan ini, tutorialnya langsung sehalaman…gkgkk..
sukses brow, can’t stop to design…

albano Lopez Said:  

It’s perfect….! i like it….

Ilmu photoshop « ALIMUN MANTU Said:  

[...] 15. Web Design Layout Plus Implementasi jQuery Tab Content [...]

DUNIA DESAIN » Blog Archive » 27 Kumpulan Tutorial Desain Photoshop Said:  

[...] Colorize button dalam keadaan ON. Pindahkan slide dan masukkan nilai seperti ini.[...] 15. Web Design Layout Plus Implementasi jQuery Tab Content Welcome back friend ! tutorial ini menjelaskan bagaimana membuat sebuah layout yang interaktif. [...]

Hi.. ! Wanna say anything about my tutorial ?
Just say it with fill the comment form.
Comment Form
 

 
 
 
 
 
Category
stack

Switch to our mobile site