BAB 5 KP IMPLEMENTASI SISTEM
26
BAB 5 IMPLEMENTASI SISTEM Pada bab ini akan dijelaskan mengenai pembuatan website “B21 Print”. Implementasinya akan dibagi menjadi tiga bagian. Bagian pertama akan membahas mengenai lingkungan implementasi. Bagian kedua akan membahas implementasi pembuatan website. Pada tiap bagian akan dijelaskan setiap tahap dari implementasinya. 5.1 Implementasi Perangkat Lunak Seluruh sistem dan media yang ada dalam kerja praktek ini dibuat dengan menggunakan beberapa software, sebagai berikut : Adobe Photoshop CS3 dan Adobe Illustrator CS3 untuk melakukan pengolahan dan pengeditan gambar- gambar bitmap yang ada dalam website.
description
berikut ini bab 5 implementasi sistem pembuatan website B21 Print
Transcript of BAB 5 KP IMPLEMENTASI SISTEM
Aplikasi game untuk mempermudah pembelajaran dalam memahami kebudayaan di Indonesia untuk anak sekolah dasar
BAB 5IMPLEMENTASI SISTEM
Pada bab ini akan dijelaskan mengenai pembuatan website B21 Print. Implementasinya akan dibagi menjadi tiga bagian. Bagian pertama akan membahas mengenai lingkungan implementasi. Bagian kedua akan membahas implementasi pembuatan website. Pada tiap bagian akan dijelaskan setiap tahap dari implementasinya.
5.1Implementasi Perangkat Lunak
Seluruh sistem dan media yang ada dalam kerja praktek ini dibuat dengan menggunakan beberapa software, sebagai berikut :
Adobe Photoshop CS3 dan Adobe Illustrator CS3 untuk melakukan pengolahan dan pengeditan gambar-gambar bitmap yang ada dalam website. Adobe Dreamweaver CS3 untuk pembuatan website dinamis dengan mengkombinasikan HTML, CSS, dan PHP.
AppServ untuk pembuatan database dan pembuat login admin dan mengedit halaman website5.2Implementasi Pembuatan Website Dinamis
Pada sub-bab ini akan dijelaskan mengenai proses dan tahapan pembuatan website B21 Print berdasarkan analisa dan desain sistem yang telah dijelaskan dan dibahas pada bab sebelumnya. Berikut adalah penjelasan dari pembuatan design interface website B21 Print. 5.2.1Pembuatan Interface WebsiteBerdasarkan rancangan desain interface dari desain sistem pada bab sebelumnya, pembuatan interface untuk website dilakukan dengan mendesain layout di Adobe Photoshop, kemudian menyimpan potongan-potongan gambar yang kemudian dimasukkan ke dalam Adobe Dreamweaver dengan HTML dan CSS. Hasil implementasi desain interface dapat dilihat pada gambar 5.1..
Gambar 5.2 Kode desain interface Website5.2.2 Pembuatan Coding WebsiteDalam aplikasi ini menggunakan 3 koding, yaitu HTML, CSS, javascript dan PHP . Koding penghubung HTML dan CSS, bisa dilihat pada listing 5.1Listing 5.1 Kode Penghubung HTML dan CSS
Untuk menampilkan hasil CSS di dalam file HTML, digunakan tag div. Implementasinya dapat dilihat seperti pada coding untuk menampilkan menu yang dapat dilihat pada listing 5.2.Listing 5.2. Coding HTML untuk header dan menu
.style2 {color: #FFFFFF}
.style3 {color: #000000}
#red_content {
float: left;
width: 960px;
}
.slideshow a#vlb{display:none}
- Home
- Tentang Kami
- Info Cetak
- Pesan
- Bantuan
Potongan coding CSS untuk div header dan menu tersebut dapat dilihat pada coding 5.3Listing 5.3. Coding CSS untuk header dan menu#red_header {
width: 960px;
height: 250px;
background: url(images/red_header.jpg) center top no-repeat
}
#red_menu {
clear: both;
width: 960px;
height: 36px;
background: url(images/red_menu.png) no-repeat;
}
#red_menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#red_menu ul li {
padding: 0;
margin: 0;
display: block;
float: left;
background: url(images/red_menu_divider.jpg) no-repeat right center
}
#red_menu ul li ul li{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#red_menu ul .last {
background: none;
}
#red_menu ul li a {
float: left;
display: block;
height: 36px;
line-height: 36px;
font-size: 14px;
font-weight: bold;
color: #bd1e24;
padding: 0 30px;
text-align: center;
text-decoration: none;
outline: none;
border: none;
}
#red_menu ul li a:hover, #red_menu ul .current {
color: #fff;
background: url(images/red_menu_hover.png) no-repeat center right
}
#red_menu ul .home {
color: #fff;
background: url(images/red_menu_hover.png) no-repeat center left
}Potongan coding untuk menampilkan chat live (yahoo messeger dan digsby) bisa dilihat pada coding 5.4 dan 5.5
Listing 5.4 Coding live chat yahoo messeger pada HTML
Listing 5.5. Coding live chat digsby pada HTML
Berikut ini adalah potongan coding CSS untuk konten website, potongan coding bisa dilihat pada coding 5.6Listing 5.6. Coding isi konten pada CSS
#red_banner {
clear: both;
width: 960px;
height: 200px;
position: relative;
}
#red_banner .banner_text {
position: absolute;
width: 150px;
height: 150px;
left: 7px;
top: 7px;
background: url(images/red_logo.jpg) no-repeat top left;
}
#red_banner .banner_text2 {
position: absolute;
width: 280px;
height: 200px;
left: 674px;
top: 6px;
background:url(images/promo.png) no-repeat top center;
}
#red_banner .banner_text3 {
position: absolute;
width: 280px;
height: 32px;
left: 303px;
top: 90px;
background:url(images/flashbanner.png) no-repeat top center;
}
#red_banner .banner_link{
display: block;
position: absolute;
width: 45px;
height: 45px;
right: 292px;
top: 88px;
cursor: default;
background: transparent;
}
#red_right_sidebar {
width: 260px;
float: right;
}
.p_box { padding: 30px; border-bottom: 1px dotted #ccc }
.p_box h2 { font-size: 18px; margin-bottom: 15px }
.image_frame { display: inline-block; float: left; margin-right: 20px; width: 124px; height: 127px; background: url(images/red_image_frame.png) no-repeat }.image_frame img { padding: 18px 0 0 19px; }
a.read_more { display: block; margin-top: 40px; float: right; width: 118px; height: 40px; background: url(images/red_read_more.png) no-repeat }
.sb_box { padding-bottom: 15px; margin-bottom: 15px }
.sb_ads { display: block; margin-bottom: 20px }
.news_box { padding: 20px 10px 20px; border-bottom: 1px dotted #ccc }
.news_box h3 { font-size: 16px; margin-bottom: 5px }
#special_box { position: relative; margin-top: 20px; border: 1px solid #ccc; border-top: 4px solid #ccc; padding: 20px 10px }
#special_box h3 { font-size: 16px; font-weight: bold }
#special_box .sb_text { position: absolute; top: 60px; right: 10px; width: 120px; display: block; }
#special_box h4 { font-size: 12px; font-weight: bold; margin-bottom: 5px }
.content_title {
position: relative;
display: block;
height: 33px;
line-height: 33px;
padding: 0 10px;
background: url(images/red_h1r.jpg) center left no-repeat;
font-size: 18px;
color: #6c6969;
}
.content_title span {
position: absolute;
left: -4px;
top: -1px;
width: 10px;
height: 33px;
background: url(images/red_h1r.jpg) no-repeat center left
}
#contact_form {
padding: 0;
width: 430px;
}
#contact_form form {
margin: 0px;
padding: 0px;
}
#contact_form form .input_field {
width: 280px;
padding: 5px;
color: #333333;
background: #f2f2f2;
border: 1px solid #999999;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
margin-top: 5px;
}
#contact_form form label {
display: block;
width: 100px;
margin-right: 12px;
font-size: 13px;
}
#contact_form form textarea {
width: 360px;
height: 140px;
padding: 5px;
color: #333333;
background: #f2f2f2;
border: 1px solid #999999;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
margin-top: 5px;
}
#contact_form form .submit_btn {
padding: 8px 14px;
color: #333333;
background: #f2f2f2;
border: 1px solid #999999;
font-size: 14px;
margin: 0px 100px 10px 0px;
}
Berikut ini adalah tampilan coding CSS pada footer.
Listing 5.7. Coding CSS pada footer#red_footer_wrapper {
clear: both;
width: 100%;
background: #720207;
}
#red_footer {
clear: both;
width: 960px;
padding: 15px 10px;
margin: 0 auto;
color: #d3d2d2;
text-align: center;
}
#red_footer a {
color: #d3d2d2;
text-decoration: underline;
}
5.2.3 Pembuatan Coding PHP login admin
5.2.4 Pembuatan Coding html untuk photo
5.2.5 Pembuatan Coding java script untuk photo
5.2.6 isi dari koding java script mootools.js(function(){this.MooTools={version:"1.3.2",build:"c9f1ff10e9e7facb65e9481049ed1b450959d587"};var o=this.typeOf=function(i){if(i==null){return"null";}if(i.$family){return i.$family();
}if(i.nodeName){if(i.nodeType==1){return"element";}if(i.nodeType==3){return(/\S/).test(i.nodeValue)?"textnode":"whitespace";}}else{if(typeof i.length=="number"){if(i.callee){return"arguments";
}if("item" in i){return"collection";}}}return typeof i;};var j=this.instanceOf=function(t,i){if(t==null){return false;}var s=t.$constructor||t.constructor;
while(s){if(s===i){return true;}s=s.parent;}return t instanceof i;};var f=this.Function;var p=true;for(var k in {toString:1}){p=null;}if(p){p=["hasOwnProperty","valueOf","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","constructor"];
}f.prototype.overloadSetter=function(s){var i=this;return function(u,t){if(u==null){return this;}if(s||typeof u!="string"){for(var v in u){i.call(this,v,u[v]);
}if(p){for(var w=p.length;w--;){v=p[w];if(u.hasOwnProperty(v)){i.call(this,v,u[v]);}}}}else{i.call(this,u,t);}return this;};};f.prototype.overloadGetter=function(s){var i=this;
return function(u){var v,t;if(s||typeof u!="string"){v=u;}else{if(arguments.length>1){v=arguments;}}if(v){t={};for(var w=0;w
