Cara Membuat Sliding Login/Register Form Panel di Blog

1 Comment
Cara Membuat Sliding Login/Register Form Panel di Blog. Bagi sobat yang pengen mempercantik blognya dengan menu register buat pengunjung setia-setianya, nih Blogging is My Life kali ini akan share mengenai Cara Membuat Sliding Login/Register Form Panel di Blog.
Register disini maksudnya yaitu agar pengunjung blog sobat bila ingin ikut menuliskan pengetahuan mereka di blog kita agar lebih mudah. Karena klo untuk login di blogger kan tidak semuanya yang memiliki akun di blogger.

untuk screen shootnya dibawah ini sob.


Gimana apakah sobat tertarik???
ya klo tertarik tak share caranya nih, tp klo kagak yaaaa... cari artikel yang lain dulu deh, jangan buru ninggalin blog ini wkwkwkwkwkwkwkw

Cara Membuat Sliding Login/Register Form Panel di Blog
1. login blog
2. buka menu rancangan >> edit HTML (centang "Expand Template Widget")
3. cari kode ]]></b:skin>
4. letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}


/* Panel Tab/button */
.tab {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}


.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}


.tab ul.login li.left {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}


.tab ul.login li.right {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}


.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;
}


.tab ul.login li a {
color: #15ADFF;
}


.tab ul.login li a:hover {
color: white;
}


.tab .sep {color:#414141}


.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}


.tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}


/* sliding panel */
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}


#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}


#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}


#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}


#panel p {
margin: 5px 0;
padding: 0;
}


#panel a {
text-decoration: none;
color: #15ADFF;
}


#panel a:hover {
color: white;
}


#panel a-lost-pwd {
display: block;
float: left;
}


#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}


#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}


#panel .content .right {
border-right: 1px solid #333;
}


#panel .content form {
margin: 0 0 10px 0;
}


#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}


#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}


#panel .content input:focus.field {
background: #545454;
}


/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}


#panel .content input.bt_login {
width: 74px;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;
}


#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;
}


#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}
5. lalu letakkan kode dibawah ini tepat dibawah kode ]]></b:skin>


<script src='http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js' type='text/javascript'/><script style='display:none' type='text/javascript'>$(document).ready(function() {


// Expand Panel
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});


// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});


// Switch buttons from &quot;Log In | Register&quot; to &quot;Close Panel&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});


});
</script>

6. lalu cari kode </body>
7. letakkan kode dibawah ini tepat diatasnya
<!-- Login -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<h1>Welcome In Blogging Is My Life</h1>
<h2>Contoh Sliding Login Dengan JQuery</h2>
<p class='grey'>Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member</p>
<h2>Tutorial Blog</h2>
<p class='grey'>Untuk membuatnya Silahkan : <a href='http://vikrymadz.blogspot.com' title='Download'>Klik Disini</a></p>
</div>


<div class='left'>
<form action='#' class='clearfix' method='post'>
<h1 class='padlock'>Member Login</h1>
<label class='grey' for='log'>Username:</label>
<input class='field' id='log' name='log' size='23' type='text' value=''/>
<label class='grey' for='pwd'>Password:</label>
<input class='field' id='pwd' name='pwd' size='23' type='password'/>
<label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label>
<div class='clear'/>
<input class='bt_login' name='submit' type='submit' value='Login'/>
<a class='lost-pwd' href='#'>Lost your password?</a>


</form>
</div>
<div class='left right'>
<form action='#' method='post'>
<h1>Not a member yet? Sign Up!</h1>
<label class='grey' for='signup'>Username:</label>
<input class='field' id='signup' name='signup' size='23' type='text' value=''/>
<label class='grey' for='email'>Email:</label>
<input class='field' id='email' name='email' size='23' type='text'/>
<label>A password will be e-mailed to you.</label>
<input class='bt_register' name='submit' type='submit' value='Register'/>
</form>
</div>


</div>
</div>
<!-- /login -->
<!-- The tab on top -->
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Halo Semuanya</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Masuk | Daftar</a>
<a class='close' href='#' id='close' style='display: none;'>Tutup Panel</a>
</li>


<li class='right'/>
</ul>
</div>
<!-- / top -->
</div>
<!-- panel -->
Perhatikan kode diatas yang diberi warna Merah dan Biru, gantilah tulisan tersebut sesuai keinginan sobat.
8. simpan dan lihat hasilnya

Sekian dari saya mengenai Cara Membuat Sliding Login/Register Form Panel di Blog. semoga bisa bermanfaat bagi sobat.

Good LUCK ^_^

image and reff by http://kode-blogger.blogspot.com/

Woro² Under Maintenance

0 Comment
lah kode tadi diletakan di atas kode ]]> ini sobat simpan dul Read more: http://www.ruki-zone.com/2011/12/woro-woro-under-maintenace.html#ixzz1n5Xp6k83

Read more at: http://www.ruki-zone.com/2011/12/woro-woro-under-maintenace.html
Copyright Allah. SWT

Membuat Catatan Pada Blogger

0 Comment
1. Buka blogger
2. Masuk Rancangan
3. Tambah Gadget pilih HTML/Javascript
4. Paste kodeini
 
<style type="text/css">
.note{background:#FFEA97 url(http://goo.gl/w4a2f) repeat-x 0 0;color:#796100;width:83%;font-weight:normal;padding:13px 15px 0;margin-bottom:2.5em;border:1px solid #E1B500;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.4);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.4);box-shadow:1px 1px 2px rgba(0,0,0,.4);position:relative;left:34px}.note p{margin-bottom:1.5em}.note p:last-child{margin-bottom:0}.note ul{margin-left:8px;margin-bottom:1.5em}.note ul:last-child{margin-bottom:0}.note li{background:url(http://goo.gl/6kexs) no-repeat 0 -95px;list-style-type:none;padding-left:18px;margin-bottom:.75em}.note h5{font-size:14px;font-weight:bold;margin:0 0 .65em}.note span{background:url(http://goo.gl/6kexs) no-repeat 100% 0;width:33px;height:40px;position:absolute;left:-34px;top:9px}
</style>
<div class="note"><h5>Notebook</h5>
<p>Let it be</p>
<ul>
<li>Never let you go</li>
<li>I always in your heart</li>
<li>I miss you so musch</li>
</ul><span></span></div>

5. Simpan dan lihat Perubahannya

Semoga Bermafaat...

Membuat Tampilan Energy Saving Mode Sendiri

0 Comment

Kalau sebelumnya saya menulis tentang Membuat Enery Saving Mode pada Blog, dalam tutorial itu tampilan Energy Saving Modenya itu masih default/dari sananya. Nahh sekarang saya akan memberitahu bagaimana membuat tampilan Energy Saving Mode seperti yang kita inginkan. Contohnya yang saya pakai ini... tunggu aja sekitar 1 menitan, nanti juga keluar tampilannya..

OK sekarang caranya :

Copy Javascript di bawah ini di Notepad :
var idleTime = 0; var standby = false; function CheckInactivity() { idleTime += 10; if(idleTime > 60) { InitializeStandBy(); } } function InitializeStandBy() { if(!standby) { var h = 0; h = jQuery(window).height(); jQuery("#energysaving").show().css({ height: "0", width: "0", left: "50%", top: "50%" }).animate({ width: "100%", height: h, left: "0", top: "0", opacity: "1" }, 1000); standby = true; } } function StopStandBy() { if(standby) { jQuery("#energysaving").animate({ width: "0", height: "0", opacity: "0", left: "50%", top: "50%" }, 500); setTimeout('jQuery("#energysaving").hide();', 800); standby = false; } } document.write('<link rel="stylesheet" href="http://www.onlineleaf.com/savetheenvironment.css" type="text/css">'); if(typeof(jQuery) == "undefined") { document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>'); } function InitJQuery() { if(typeof(jQuery) == "undefined") { setTimeout("InitJQuery();", 50); } else { jQuery(function() { jQuery(document).ready(function() { setInterval("CheckInactivity();", 10000); jQuery(this).mousemove(function(e) { idleTime = 0; StopStandBy(); }); jQuery(document).keypress(function(e) { idleTime = 0; StopStandBy(); }); jQuery("body").append('<div id="energysaving"><a href="http://freakzfiles.blogspot.com"><p><img src="http://i851.photobucket.com/albums/ab71/freakz100992/headertitle2.png"/></a><br/><font style="color: #4b4b4b;">Gerakan mouse untuk kembali ke halaman</font></p><div id="copyrightOnlineLeaf">Copyright 2011 - <font style="color: #666666;">FreakzFiles.blogspot.com</font> - All rights reserved</div></div>'); jQuery("#energysaving").hide(); }); }); } } InitJQuery();

Bagian yang di Edit adalah bagian yang berwarna merah, hijau dan biru, ganti kode yang berwarna merah dengan URL gambar kamu, kode berwarna hijau untuk warna Fontnya dan kode berwarna biru untuk teksnya.... kalau kalian mengerti kode Javascript kalian bisa setting sendiri tampilannya sesuka kalian...

Kemudian tekan Ctrl+S untuk save... simpan dengan nama : savingmode.js, lalu Save as Type: All Files..... kemudian tekan Save..

Upload File javascript tersebut pada hostingan kamu, karena disini judulnya bukan cara Upload File pada Hostingan jadi saya tidak memberikan caranya secara detail, tapi saya berikan sedikit garis besarnya...
  1. masuk ke ripway.com
  2. buat account disana kalau belum punya, lalu login
  3. Klik My Files → Upload Files
  4. kalau sudah klik Return to my Files
Nahh kalau sudah di upload, masuk ke Blogger → Rancangan → Edit HTML
Taruh kode di bawah ini diatas kode </head>

<script language="javascript" type="text/javascript" src="Link File yang kamu Upload"></script>
lalu ganti kode yang berwarna biru dengan URL File yang kamu upload di hostingan tadi...
Save Template...

Lalu lihat hasilnya, tunggu sekitar 1 menitan..

Tiện ích 3D Flash Slider cho Blogger : PieceMaker

0 Comment
 
PieceMaker 2
PieceMaker là một trong hai plugin 3D Image Slider nổi tiếng nhất của Wordpress. Trong khi cu3er chỉ dừng ở phiên bản Beta và bắt đầu thu phí trên phiên bản chính thức thì PieceMaker đã có phiên bản 2 và vẫn hoàn toàn miễn phí. Với mục đích đem đến cho Blogger các tiện ích đẹp nhằm "thay đổi cái nhìn", lần này Noct sẽ hướng dẫn cách áp dụng PieceMaker trên Blogspot.




Download PieceMaker tại đây.


Tiến hành giải nén file vừa tải về, được một thư mục, trong đó chúng ta chỉ quan tâm tới các file sau:

 -  swfobject.js
 -  piecemaker.xml
 -  piecemaker.css
 -  piecemaker.swf

Bạn upload các file này lên DROPBOX. Tiếp theo, log in vào Blogger, tạo một widget HTML/Javascript rồi paste đoạn code sau:
<script src="http://dl.dropbox.com/u/11103024/scripts/swfobject/swfobject.js" type="text/javascript">
</script>

<center><div id="piecemaker">
Put your alternative Non Flash content here.
</div></center>

<script type="text/javascript">
      var flashvars = {};
      flashvars.cssSource = "http://dl.dropbox.com/u/11103024/piecemaker.css";
    flashvars.xmlSource = "http://dl.dropbox.com/u/11103024/piecemaker.xml"; 
      var params = {};
      params.play = "true";
      params.menu = "false";
      params.scale = "showall";
      params.wmode = "transparent";
      params.allowfullscreen = "true";
      params.allowscriptaccess = "always";
      params.allownetworking = "all";  
      swfobject.embedSWF('http://dl.dropbox.com/u/11103024/piecemaker.swf', 'piecemaker', '940', '300', '10', null, flashvars, params, null);
</script>

Các link màu đỏ chính là các file mà chúng ta vừa upload lên DROPBOX, các giá trị màu xanh là kích cỡ của flash. Save widget.

Để tùy chỉnh Flash thì chúng ta edit file piecemaker.xml trong thư mục Public bằng Notepad, nó sẽ có một đoạn như thế này:
<Image Source=".../piecemaker2.png" Title="Lots of new Features">
   <Text>&lt;h1&gt;New hot Features&lt;/h1&gt;&lt;p&gt;The all new Piecemaker comes with lots of ...&lt;/p&gt;</Text>
    <Hyperlink URL="http://noct-land.blogspot.com" Target="_blank" />
 </Image>

Bạn chỉ việc thay đổi link ảnh, link feature và phần miêu tả cho phù hợp rồi save lại, nó sẽ tự động được cập nhật lên DROPBOX.

Ngoài ra, ta cũng có thể tùy chỉnh các hiệu ứng Slide theo ý thích cũng bằng cách edit piecemaker.xml, chi tiết thì bạn đọc hướng dẫn trên trang chủ chứ mình cũng không thể nói hết ở đây được.

Hiện tại thì mình thấy PieceMaker rất phổ biến bên Wordpress nhưng lại khá khiêm tốn trên Blogger, hy vọng trong tương lai sẽ có nhiều designer sử dụng Flash 3D này trên Blogspot
 
Sumber : http://noct-land.blogspot.com/2011/02/tien-ich-3d-flash-slider-cho-blogger.html

Tiện ích phân trang PageNavi và một số style

0 Comment

page navi blogger
Tiện ích phân trang vốn không còn xa lạ với Blogspot, bài này chỉ giới thiệu script hack phân trang mà mình đang dùng cùng với một số style khá đẹp để bạn lựa chọn. Đây là script phân trang từ hỗn tạp blog viết lại theo phong cách WordPress, bạn có thể tham khảo cách làm ở bài viết gốc hoặc xem dưới đây.




 Trong template, chèn đoạn CSS sau phía trên </b:skin>
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c}
.pagenavi a:visited{color:#c20c0c}
.pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none}
.pagenavi .pages,.pagenavi .current{font-weight:bold}
.pagenavi .pages{border:none}

Tiếp tục tìm đến dòng này:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
Chèn ngay sau nó:
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

Tiếp theo, tìm trong template của bạn:
<!-- navigation -->
<b:include name='nextprev'/>

Thay thế nó bằng:
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Tùy chỉnh script:
perPage: số bài viết hiển thị trong 1 trang
numPages: số trang hiển thị
firstText, lastText, nextText, prevText: các từ hiển thị cho các nút First, Last, Next, Prev

Cơ bản vậy là xong, sau đây là một số style, hãy chọn kiểu phù hợp nhất với template của bạn rồi thay thế vào đoạn code màu xanh phía trên:

Kiểu 1:

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

Kiểu 2:

.pagenavi{clear:both;margin:10px auto;text-align:left}
.pagenavi span,.pagenavi a {background:#0e0f10;font-size:12px;padding: 3px 5px;margin: 2px;border: 1px solid #333;color:#fff;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #33393f;border: 1px solid #444;text-decoration:none;}

Kiểu 3:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#24bde2;border:1px solid #4adcff;padding:3px 8px;color:#fff;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#ff6734;border:1px solid #ddd;text-decoration:none}
.pagenavi .pages{display:none}

Kiểu 4:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:-moz-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;border:1px solid #616e76;padding:4px 8px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:4px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#c70e0c;border:1px solid #782f28;text-decoration:none}
.pagenavi .pages{color:#fff}

Kiểu 5:

.pagenavi{background:#3498b9;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #2f7a93;padding:4px 0}
.pagenavi span,.pagenavi a{font-weight:bold;padding:7px 8px;color:#fff;margin:1px;font-size:11px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#236e8f;color:#fff;text-decoration:none}
.pagenavi .pages{color:#fff}

Kiểu 6:

.pagenavi{background:#f1f1f1;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #bfbfbf;padding:3px 0}
.pagenavi span,.pagenavi a{border:1px solid #f1f1f1;padding:1px 4px;color:#000;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#fffdf0;color:#000;text-decoration:none}
.pagenavi .pages{color:#666}

Kiểu 7:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#1dc1ff;padding:6px 6px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:5px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#ff9200;color:#fff;text-decoration:none}
.pagenavi .pages{display:none}

Kiểu 8:

.pagenavi{clear:both;text-align:right;margin:25px 0 10px 0;font-size:.714em;font-weight:600;line-height:1.4em}
.pagenavi span,.pagenavi a{background:#e1e1e1;border:1px solid #555;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 0 #FFF;-webkit-box-shadow:0 1px 0 #FFF;box-shadow:0 1px 0 #FFF;color:#555;margin-left:5px;padding:4px 6px 3px;text-shadow:0 1px 0 #C2C2C2}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:-moz-linear-gradient(center top,#45bc3f,#1c6318) repeat scroll 0 0 transparent;border:1px solid #00203B;text-shadow:0 -1px 0 #00203B;color:#fff;text-decoration:none}
.pagenavi .pages{background:none;border:none}

Membuat Add Comment di Blogger

1 Comment
1. Cari kode ini ]]></b:skin>
2. Kalau sudah ketemu masukkan kode ini sebelum kode di atas 

a.add_comment{text-decoration:none;color:#fff}
.add_comment{float:right;padding:6px 10px;margin:20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;text-align:center;display:inline-block;background:#d43131;background:-moz-linear-gradient(top,#ffaa9a,#f8674b 5%,#d54746);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffa493),color-stop(.03,#f8674b),to(#d54746));filter:progid:DXImageTransform.Microsoft.gradient

(startColorStr='#f8674b',EndColorStr='#d54746'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',
EndColorStr='#d54746')";-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #d1371c;border-bottom:1px solid #9f220d;color:#FFF;text-shadow:0 1px 1px #6f3a02}
.add_comment:hover{background:#c92929;background:-moz-linear-gradient(top,#ff9986,#ee5f43 5%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fa8772),color-stop(.03,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient

(startColorStr='#ee5f43',EndColorStr='#d04443'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',
EndColorStr='#d04443')";border-bottom:1px solid #9f220d}
.add_comment:focus{padding:7px 11px;color:#FFF;text-shadow:0 -1px 1px #894906;border:none;background:#bc2323;background:-moz-linear-gradient(top,#d04443,#ee5f43 95%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d04443),color-stop(.9,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient

(startColorStr='#d04443',EndColorStr='#ee5f43'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',
EndColorStr='#ee5f43')";box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-webkit-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-moz-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7}

3. Kemudian save template
4. Jangan puas dulu cari kode ini  
<b:includable id='comments' var='post'>
5. Kalau sudah ketemu masukkan kode ini setelah kode diatas
<b:if cond='data:post.numComments != 0'>
<a class='add_comment' href='#comment-form'>Add a comment</a>
<div class='clear' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$('.add_comment').click(function(){$('html,body').animate({scrollTop:$(".comment-form").offset().top},1000);});</script></b:if>

6. Kalau sudah simpan template

sekarang liat hasilnya dan anda pasti merasa puas. hehehe

Cara membuat Widget Recent Comment di Blogger

1 Comment
Membuat widget Recent Post Blogspot. Cara membuat widget recent post di blogspot / blogger dengan fasilitas RSS Feed. Widget recent post ini sangat simpel dan mudah, contohnya anda bisa lihat pada blog ini. Cara ini sama persis dengan cara membuat recent comment yang pernah saya posting sebelumnya. Ok deh silahkan ikuti langkah-langkah cara membuat widget Recent Post di blogspot berikut ini.

Cara membuat Widget Recent Post di Blogspot

  • Login ke blog ada pilih design > Pada page elemen kemudian add gadged baru
  • Pilih Feed kemudian paste link ini pada feed tersebut http://kuliah-kami.blogspot.com/feeds/comments/default
Membuat Widget Recent Post Blogspot
  • Klik continue dan beri judul widget tersebut "Recent Post" atau "Artikel Terbaru"
  • Tentukan berapa artikel yang ingin di tampilkan pada widget tersebut (maksimal 5 artikel)
  • Save dan lihat hasilnya.

Membuat Widget Recent Post di Blogspot

Membuat widget Recent Post di Blogspot memang bermacam-macam, tapi yang saya terapkan ini adalah cara yang paling simpel dan mudah di praktekkan. Kelebihan menggunakan widget recent post ini tidak akan mengganggu atau membuat Blog anda menjadi berat. ya sudah selamat mencoba cara membuat widget recent post di blogspot dan semoga sukses :)

Cara membuat Widget Recent Post di Blogger

0 Comment
Membuat widget Recent Post Blogspot. Cara membuat widget recent post di blogspot / blogger dengan fasilitas RSS Feed. Widget recent post ini sangat simpel dan mudah, contohnya anda bisa lihat pada blog ini. Cara ini sama persis dengan cara membuat recent comment yang pernah saya posting sebelumnya. Ok deh silahkan ikuti langkah-langkah cara membuat widget Recent Post di blogspot berikut ini.

Cara membuat Widget Recent Post di Blogspot

  • Login ke blog ada pilih design > Pada page elemen kemudian add gadged baru
  • Pilih Feed kemudian paste link ini pada feed tersebut http://kuliah-kami.blogspot.com/feeds/posts/default
Membuat Widget Recent Post Blogspot
  • Klik continue dan beri judul widget tersebut "Recent Post" atau "Artikel Terbaru"
  • Tentukan berapa artikel yang ingin di tampilkan pada widget tersebut (maksimal 5 artikel)
  • Save dan lihat hasilnya.

Membuat Widget Recent Post di Blogspot

Membuat widget Recent Post di Blogspot memang bermacam-macam, tapi yang saya terapkan ini adalah cara yang paling simpel dan mudah di praktekkan. Kelebihan menggunakan widget recent post ini tidak akan mengganggu atau membuat Blog anda menjadi berat. ya sudah selamat mencoba cara membuat widget recent post di blogspot dan semoga sukses :)

Membuat Gambar Bergerak Di Populer Post

0 Comment
1. Cari Code ]]></b:skin> 
2. Kalau sudah ketemu Masukkan Kode ini tepat sebelum kode di atas.
#PopularPosts1{max-width:300px}
#PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

3. Tekon Save
4. Tentukan Banyaknya Postingan yang akan di tampilkan pada Populer Post
5. Lebih jelasnya bisa lihat pada Gambar dibawah ini:


6. Lihat Hasilnya
7. Mudah bukan.....
8. Sebenarnya sudah berhasil tapi lebih baiknya cari kode ini :
 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
9. Kemudian ganti dengan kode ini:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<dd>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='60px'/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class='clear'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

10. Dan lihat Hasilnya, mudah banget kan


Cukup sekian Semoga bermafaat

Produk Software

0 Comment

1

Software sebagai perangkat lunak dari komputer, berisi kumpulan instruksi-instruksi yang dimengerti dan dijalankan oleh computer.  Instruksi-instruksi ini sengaja dibuat untuk menjadi aplikasi tertentu.  Produk software ini merupakan sesuatu yang tidak kongkrit seperti produk lainnya yang umumnya dapat dilihat dengan mata.  Tetapi software lebih banyak dipandang dari segi fungsi aplikasinya.  Secara umum software dapat dikategorikan dalam beberapa aplikasi :
  1. Sebagai suatu aplikasi yang mengantarkan kepada pengguna komputer bagaimana berkomunikasi dengan perangkat hardware computer, disebut sebagai Operating System (OS)
  2. Sebagai suatu aplikasi yang membantu manusia untuk menyelesaikan pekerjaan-pekerjaan. 

Peran software menjadi signifikan di dunia digital, bagaimana operasional system media internet?, bagaimana komunikasi BTS pada system telepon, bagaimana operasional mobilephone?, bagaimana system operasi mesin-mesin industri?; semua tidak lepas dari aplikasi software.

Sampai pada abad ini software terus mengalami perkembangan dan akan terus berkembang.  software telah menjadi salah satu bagian dunia industri terbesar.  
Pesatnya perkembangan industri software berdampak meningkatnya kebutuhan-kebutuhan akan tenaga ahli di bidang software.  Sebagai salah satu bagian penting dari Teknologi Informasi (TI), software telah menjadi perhatian khusus.  Organisasi software maupun komunitas-komunitas software di internet terus bereksperimen untuk membuat suatu metode yang efisien, akurat, efektif untuk memproduksi suatu software.  Sehingga begitu cepatnya evolusi software baik di bagian system operasi, bahasa-bahasa pemrograman pembuat software, maupun pada teknik-teknik pembuatan software.

Karakteristik Software

0 Comment
Untuk lebih mendalami tentang software maka sangatlah penting mengetahui apa karakteristik-karakteristik dari software.  Secara absolut produk software sangat berbeda dengan produk lainnya.  Seperti disebutkan sebelumnya bahwa software mempunyai sifat yang non kongkrit dan lebih dipandang berdasarkan fungsi operasinya.  Fungsi operasi tersebut yang pada dasarnya teridiri dari beberapa fungsi-fungsi pendukung ini lebih bersifat logical daripada fisikal.

Oleh karena itu software mempunyai karakteristik yang jauh berbeda jika dibandingkan dengan produk yang bersifat fisikal seperti rakitan komputer, mobil, dsb:  Perbedaan tersebut terletak pada karakteristik:
  1. Software dibangun lebih berdasarkan aktifitas rekayasa dari pada aktifitas fisik (uraikan)
  2. Software bersifat tidak akan mengalami kerusakan fungsi
  3. bersifat custom
  4. bersifat kritis

Proses Pengembangan Software Yang Bersifat Krisis

0 Comment

er 2011

Develop software berdasarkan pengalaman bersifat krisis atau mungkin lebih tepat kronis.  Software lebih dinilai berdasarkan fungsi operasinya.  Dimana fungsi tersebut dibuat berdasarkan kebutuhan dari user.  Bagaimana bersifat krisis?  Software yang baik adalah yang sanggup menyediakan properti-properti dan fungsi-fungsi yang sesuai dengan keinginan user.

Bersifat krisis karena mempertimbangkan bagaimana suatu software dapat digunakan terus, sedangkan kebutuhan spesifikasi dari user tentunya akan semakin berkembang.  Misal bertambahnya jumlah pengakses software.  Bertambahnya spesifikasi fungsi.  Oleh karena itu umumnya software membutuhkan maintenan yang lebih komplek.  Software tidak akan mengalami kerusakan dari segi fungsinya akan tetapi kebutuhan fungsi yang terus berkembang membutuhkan update versi.
Proses pengembangan suatu software yang merupakan aktifitas rekayasa dan manajemen sangat memerlukan perhatian khusus.  Proses pembuatan inipun melibatkan beberapa pihak, antara lain :
  • User
  • Developer
  • Programmer
Ketiga pihak inilah yang terkait langsung pada proses pembuatan software.  Kolaborasi dan kerjasama ketiga pihak tersebut sangat menentukan.  Oleh karena itu sisi manajemen dalam menangani proyek pembuatan software tersebut sangat menentukan kualitas dari software yang dibuat.

Kegagalan Pembuatan Software

0 Comment

Sabtu, 17 Desember 2011

Perkembangan metodologi rekayasa perangkat lunak tidak lepas dari analisa terhadap penyebab kegagalan pengerjaan proyek software.  Hingga saat ini prosesntasi kegagalan pembuatan software yang mencapai kira-kira 80% dikarenakan software tersebut bersifat kritis.  Artikel-artikel tentang rekayasa perangkat lunak mengenali penyebab kegagalan tersebut dari sisi kebiasaan negatif pihak-pihak yang terlibat dalam pembuatan software.
  Hal ini berkaitan dengan sikap dan perilaku yang cukup sulit untuk diperbaiki, kecuali disadari dan mau merubah kebiasaan tersebut.  Berikut ini disampaikan beberapa sikap dan perilaku yang menyebabkan gagalnya produk software:
  • Perilaku manajemen yang salah, Perilaku manajemen yang salah ini terutama pada sisi developer.  Manajer proyek software sering tertekan dengan bagaimana mengelola pembiayaan, menjada schedule dari keterlambatan, dan bagaimana meningkatkan kualitas software.  Kondisi ini sering melonggarkan pengamatan terhadap proses pembuatan software secara detail, apalagi terdokumentasi dengan baik.  Adanya standar prosedur pembuatan software sering tidak digunakan dengan baik selama proses pembuatan.  Hal ini menyebabkan sulitnya perawatan produk software yang dihasilkan.  Kesalahan lain yang sering dilakukan oleh developer adalah lebih mementingkan hardware daripada tool yang akan mempercepat proses pembuatan software.
  • Perilaku Customer yang salah, ada beberapa penyebab tidak tercapainya hasil software yang diinginkan oleh customer.  Dari sisi customer terdapat beberapa kesalahan yang sering kali tidak disadari sebagai penghambat proses pengembangan software:
    • Sebagian besar customer menganggap membuat suatu software itu mudah bahkan beranggapan tinggal sediakan sejumlah uang dan tunggu hasilnya.
    • Sebagian besar customer juga memberikan narasi keinginan fungsional software yang diingikan tanpa memberikan detailnya.
    • Sebagian customer tidak menempatkan waktu khusus dalam mengamati proses pembuatan software tersebut.
  • Perilaku salah bagi programmer atau praktisi, Terdapat beberapa kesalahan yang sering dilakukan oleh seorang programmer antara lain:
    • Berpikiran bahwa proyek software selesai jika program berjalan.  Dengan demikian kriteria jalannya suatu program hanya dinilai selama proses pembuatan dan parsial (asal jalan).
    • Tidak berpikir ke arah perawatan.
    • Dokumentasi dan penulisan kode-kode program yang tidak rapi.
Kesalahan-kesalahan tersebut di atas lebih mengacu pada sisi kemanusiaan, sehingga yang diperlukan adalah kesadaran untuk merubah.

Aplikasi Software

0 Comment
Software dapat diaplikasikan pada situasi apapun yang dapat dispesifikasikan secara langkah-langkah prosedural dalam bentuk algoritma.  Umumnya aplikasi software disesuaikan dengan sifat fungsi opersionalnya.
Aplikasi software dapat digolongkan dalam :
  • Software sistem
  • Software Real Time
  • Software Bisnis
  • Software scientifik
  • Software embedded
  • Spftware Personal Computer
  • Software basis Web
  • Software AI

Rekayasa Perangkat Lunak

0 Comment

2.1 Siklus Software

Bab ini mendefinisikan keseluruhan siklus aktifitas pembuatan dan pengembangan software.  Fase-fase yang terlibat dalam siklus ini akan diuraikan lebih detail dalam sub Bab selanjutnya.  Proses Pembuatan dan pengembangan software ini juga dengan jelas melibatkan aspek-aspek perangkat keras komputer.  Proses komunikasi antara software dan hardware adalah bagian dari desain suatu sistem operasional komputer, kecuali jika konfigurasi hardware telah didfinisikan sebelumnya, dan diberikan sebagai batasan-batasan dalam desain software.

Pendekatan siklus ini merupakan proses dasar untuk mengerti bagaimana rekayasa software mengalami evolusi dalam proses pembuatan maupun pengembangan software.  Diawali siklus yang disebut sebagai Tradisional atau water fall, berkembang menjadi EVO, Incremental, CASE, dan sampai terakhir pada paradigma OO (Object Oriented).

 

2.2 Metodologi Pengembangan software

Metode pengembangan perangkat lunak dikenal dengan istilah SDLC (Software Development Life Cycle).  Metodology ini menjadi perhatian sangat istimewa pada proses rekayasa perangkat lunak.  Karena dengan metodologi SDLC yang digunakan akan sangat menentukan sukses tidaknya proyek software.  Pada sub bab ini akan diuraikan secara singkat perkembangan SDLC yang ada hingga saat ini.

2.2.1 Traditional (Waterfall)

Waterfall merupakan SDLC tertua karena sifatnya yang natural.  Tanpa disadaripun programmer rata –rata menggunakan SDLC waterfall untuk menyelesaikan suatu proyek software.  Urutan SDLC waterfall ini bersifat serial dari proses perencanaan, analisa, desain, dan implementasi pada sistem.  Gambar di bawah menunjukkan urutan proses SDLC waterfall.
 
SDLC merupakan terdiri dari beberapa fase tugas-tugas dalam menyelesaikan proyek software.  Waterfall mempunyai urutan tugas sebagai berikut:
  • Definisi dan analisa kebutuhan
  • Desain software dan sistem
  • Implementasi dan pengujian unit
  • Implementasi dan pengujian sistem
  • Operasional dan perawatan

Uraian lebih lengkap terhadap tugas-tugas pengembangan suatu proyek software dapat dilihat pada Gambar berikut ini:
 
Pada Gambar 2.2 garis yang mengarahkan kembali ke pada setiap model tugas menunjukkan bagaimana perbaikan dilakukan pada setiap fase tugas tersebut.  Perbaikan ini diperoleh setelah pengujian unit sehingga didapatkan suatu feedback.  Proses perbaikan setiap fase tugas sangatlah sulit dilakukan jika menggunakan SDLC ini.  Oleh sebab itu dapat disimpulkan beberapa sifat SDLC waterfall sebagai berikut:
  • Cocok untuk proyek sederhana dan kecil
  • Tidak fleksibel untuk proyek yang mempunyai tahapan panjang
  • Sangat sulit untuk mengakomodasi perubahan kebutuhan dari customer
  • Model waterfall ini sangat sesuai jika kebutuhan-kebutuhan customer diketahui dengan baik

Evolutionary

0 Comment
Pengembangan SDLC Evolutionary ini menanggapi kelemahan metode waterfall terutama pada kebutuhan customer yang tidak diketahui dengan baik.  Proses evolutionary terdiri dari beberapa siklus selama pengerjaan proyek software tersebut.  Setiap siklus merupakan proses miniatur dari SDLC waterfall.

Pada Gambar terlihat bahwa perbedaan performa penanganan feedback dari antara waterfall dan evolutionary.  Penanganan feedback pada SDLC waterfall terjadi pada awal dan akhir pengerjaan proyek dengan jumlah yang cukup besar.  Hal ini berarti proses perbaikan kualitas software tersebut terjadi pada akhir proyek dengan perubahan yang cukup besar karena akumulasi.  Penanganan seperti ini sangat beresiko terhadap kegagalan hasil software.  Sedangkan pada SDLC evolutionary proses penanganan feedback dan perbaikan software mulai dibagi rata selama proses pengerjaan software.  Dengan demikian penanganan perbaikannya pun tidak terlalu besar, sehingga lebih mudah dan menjamin kualitas hasil software.

SDLC evolutionary digunakan untuk kebutuhan customer yang tidak pasti.  Oleh sebab itu SDLC ini dirancang untuk melibatkan customer selama proses pengerjaan software.  SDLC ini mempunyai sifat berevolusi dari mulai inisial proyek sampai akhir proyek dalam jumlah siklus tertentu.
Kelemahan dari SDLC Evo ini adalah :
Proses pengerjaan software yang kurang terlihat secara teknis
  • Struktur framework yang kurang baik terutama untuk dokumentasi pengerjaan proyek
  • Membutuhkan keahlian khusus untuk menerapkannya
Sehingga dapat disimpulkan bahwa SDLC ini dapat diterapkan pada:
  • interaksi sistem skala kecil dan sedang
  • unit pada bagian sistem yang besar
  • sistem dengan proses operasional yang singkat

RUP (Rational Unified Process)

0 Comment
Rational Unified Process (RUP) merupakan suatu metode rekayasa perangkat lunak yang dikembangkan dengan mengumpulkan berbagai best practises yang terdapat dalam industri pengembangan perangkat lunak. Ciri utama metode ini adalah menggunakan use-case driven dan pendekatan iteratif untuk siklus pengembangan perankat lunak. Gambar dibawah menunjukkan secara keseluruhan arsitektur yang dimiliki RUP.

RUP menggunakan konsep object oriented, dengan aktifitas yang berfokus pada pengembangan model dengan menggunakan Unified Model Language (UML). Melalui gambar dibawah dapat dilihat bahwa RUP memiliki, yaitu: 

Dimensi pertama digambarkan secara horizontal. Dimensi ini mewakili aspek-aspek dinamis dari pengembangan perangkat lunak. Aspek ini dijabarkan dalam tahapan pengembangan atau fase. Setiap fase akan memiliki suatu major milestone yang menandakan akhir dari awal dari phase selanjutnya. Setiap phase dapat berdiri dari satu beberapa iterasi.  Dimensi ini terdiri atas Inception, Elaboration, Construction, dan Transition

Dimensi kedua digambarkan secara vertikal. Dimensi ini mewakili aspek-aspek statis dari proses pengembangan perangkat lunak yang dikelompokkan ke dalam beberapa disiplin. Proses pengembangan perangkat lunak yang dijelaskan kedalam beberapa disiplin terdiri dari empat elemen penting, yakni who is doing, what, how dan when. Dimensi ini terdiri atas


Business Modeling, Requirement, Analysis and Design, Implementation, Test, Deployment, Configuration dan Change Manegement, Project Management, Environtment. 
 
Pada penggunaan kedua standard tersebut diatas yang berorientasi obyek (object orinted) memiliki manfaat yakni:
Improve productivity
Standard ini dapat memanfaatkan kembali komponen-komponen yang telah tersedia/dibuat sehingga dapat meningkatkan produktifitas 
Deliver high quality system
Kualitas sistem informasi dapat ditingkatkan sebagai sistem yang dibuat pada komponen­komponen yang telah teruji (well-tested dan well-proven) sehingga dapat mempercepat delivery sistem informasi yang dibuat dengan kualitas yang tinggi.
Lower maintenance cost
Standard ini dapat membantu untuk menyakinkan dampak perubahan yang terlokalisasi dan masalah dapat dengan mudah terdeteksi sehingga hasilnya biaya pemeliharaan dapat dioptimalkan atau lebih rendah dengan pengembangan informasi tanpa standard yang jelas.
Facilitate reuse
Standard ini memiliki kemampuan yang mengembangkan komponen-komponen yang dapat digunakan kembali untuk pengembangan aplikasi yang lainnya.
Manage complexity
Standard ini mudah untuk mengatur dan memonitor semua proses dari semua tahapan yang ada sehingga suatu pengembangan sistem informasi yang amat kompleks dapat dilakukan dengan aman dan sesuai dengan harapan semua manajer proyek IT/IS yakni deliver good quality software within cost and schedule time and the users accepted.

Fase-fase yang digunakan pada metodologi RUP adalah sebagai berikut:
  • Inception/insepsi
  • Elaboration/elaborasi
  • Construction/konstruksi
  • Transition/transisi

Inception
  • Menentukan Ruang lingkup proyek
  • Membuat ‘Business Case’
  • Menjawab pertanyaan “apakah yang dikerjakan dapat menciptakan ‘good business sense’ sehingga proyek dapat dilanjutkan

Elaboration
  • Menganalisa berbagai persyaratan dan resiko
  • Menetapkan ‘base line’
  • Merencanakan fase berikutnya yaitu construction

Construction
  • Melakukan sederetan iterasi
  • Pada setiap iterasi akan melibatkan proses berikut: analisa desain, implementasi dan testing

Transistion
Membuat apa yang sudah dimodelkan menjadi suatu produk jadi.  Dalam fase ini dilakukan:
  • Beta dan performance testing
  • Membuat dokumentasi tambahan seperti; training, user guides dan sales kit
  • Membuat rencana peluncuran produk ke komunitas pengguna

UML memberikan warna yang dominan pada metodologi RUP, beberapa diagram penting yang harus digunakan pada RUP adalah usecase, class diagram, sequence diagram, state diagram.  Masing-masing diagram memberikan peran yang khusus.  Sifat dari RUP ini adalah syarat dengan dokumentasi.
Peran Use Case Pada Setiap Fase
  • Inception
    • Menolong mengembangkan scope proyek
    • Menolong menetapkan penjadwalan dan anggaran
  • Elaboration
    • Menolong dalam melakukan analisa resiko
    • Menolong mempersiapkan fase berikutnya yaitu konstruksi
  • Construction
    • Melakukan sederetan iterasi
    • Pada setiap iterasi akan akan melibatkan proses berikut: analisa desain, implementasi dan testing
  • Transistion
    • Membuat apa yang sudah dimodelkan menjadi suatu produk jadi.  Dalam fase ini dilakukan:
      • Beta dan performance testing
      • Membuat dokumentasi tambahan seperti; training, user guides dan sales kit
      • Membuat rencana peluncuran produk ke komunitas pengguna

Penerapan Tahapan Metodologi Pengembagan Perangkat Lunak dengan Menggunakan RUP (Contoh Kasus)
Metodologi Rational Unified Process (RUP). Metode RUP merupakan metode pengembangan kegiatan yang berorientasi pada proses. Dalam metode ini, terdapat empat tahap pengembangan perangkat lunak yaitu:
Inception                  
Pada tahap ini pengembang mendefinisikan batasan kegiatan, melakukan analisis kebutuhan user, dan melakukan       perancangan awal perangkat lunak (perancangan arsitektural dan use case). Pada akhir fase ini, prototipe perangkat lunak versi Alpha harus sudah dirilis
Elaboration  :
Pada tahap ini dilakukan perancangan perangkat lunak mulai dari menspesifikasikan fitur perangkat lunak hingga perilisan prototipe versi Betha dari perangkat lunak.
Construction           
Pengimplementasian rancangan perangkat lunak yang telah dibuat dilakukan pada tahap ini. Pada akhir tahap ini, perangkat lunak versi akhir yang sudah disetujui administrator dirilis beserta  dokumentasi perangkat lunak.
Transition               
Instalasi , deployment dan sosialisasi perangkat lunak dilakukan pada tahap ini.

_Pasopati 2010 UYP™

Copyright 2011 Designing a dream come true.
Blogger Templates By:Noct.