Perancangan Website Chelsea Indonesia Supporters Club Regional Medan Menggunakan PHP Dan MYSQL
Listing Program A. Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<link rel="stylesheet" href="js/mainstyle.css" type="text/css" media="screen"> <!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="js/style.css">
<script type="text/javascript" async="" src="js/ga.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<script type="text/javascript" src="js/a.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25854704-1']); _gaq.push(['_setDomainName', '.wowslider.com']); _gaq.push(['_setAllowLinker', true]);
(2)
if(document.cookie.match("(^|;\\s)__utma") && !/utmcsr=\(direct\)/.test(unescape(document.cookie))) { _gaq.push(
['_setReferrerOverride', ''], ['_setCampNameKey', 'aaan'], ['_setCampMediumKey', 'aaam'], ['_setCampSourceKey', 'aaas'], ['_setCampTermKey', 'aaat'], ['_setCampContentKey', 'aaac'], ['_setCampCIdKey', 'aaaci'] )
}
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
(3)
</script>
<!-- WOW Visits -->
<script type="text/javascript"> /* <![CDATA[ */
var google_conversion_id = 1071863997; var google_conversion_language = "en"; var google_conversion_format = "3"; var google_conversion_color = "ffffff";
var google_conversion_label = "YwhdCOff5AIQvbGN_wM"; var google_conversion_value = 0;
/* ]]> */ </script>
<script type="text/javascript" src="js/conversion.js">
</script></head><body><img height="1" width="1" border="0" src="js/saved_resource"> <noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""
src="http://www.googleadservices.com/pagead/conversion/1071863997/?label=YwhdCOff 5AIQvbGN_wM&amp;guid=ON&amp;script=0"/>
</div> </noscript>
(4)
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CISCmedan</title>
<link href="style.css" rel="stylesheet" type="text/css" /> </head>
<body>
<div id="main_header"> <div id="judul"> </div>
</div>
<div id="main_body"> <div id="body"> <div id="top"></div>
<div class="container"> <!-- end of #header --> <div class="ruled1">
<!-- Start WOWSlider.com BODY section --> <div id="wowslider-container1">
<div class="ws_images"><div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;"><img src="js/slide (1).jpg" alt="Fiord" title="CISC Medan" id="wows1_0"
(5)
style="width: 100%;"></div><ul style="position: absolute; top: 0px; -webkit-animation: none; width: 100%; left: -200%;">
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(1).jpg" alt="Fiord" id="wows1_0" style="visibility: hidden; width:840px; height:200px;"></li> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(2).jpg" alt="Ice" id="wows1_1" style="visibility: hidden; width:840px; height:200px;" /></li> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(3).jpg" alt="Kjeragbolten" id="wows1_2" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(4).jpg"
alt="Norway" id="wows1_3" style="visibility: hidden; width:840px; height:200px;"></li> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(5).jpg"
alt="Town" id="wows1_4" style="visibility: hidden; width:840px; height:200px;"></li> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(6).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"></li> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(7).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"></li> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(8).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"></li> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(9).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"></li> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(10).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"> <li style="width: 10%; font-size: 0px;"><img class="bentuk"src="js/slide(11).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;">
(6)
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(12).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"> </li>
</ul>
</div>
<div class="ws_bullets"><div>
<div class="ws_bulframe"><div><div style="width: 700%;"><img
src="./t_files/fiord(1).jpg" alt="Fiord"><img src="js/ice(1).jpg" alt="Ice"><img src="js/kjeragbolten(1).jpg" alt="Kjeragbolten"><img src="./t_files/norway(1).jpg" alt="Norway"><img src="js/town(1).jpg" alt="Town"><img src="js/winter(1).jpg" alt="Winter"></div></div><span></span></div></div></div>
<!-- Generated by WOWSlider.com v3.2 --> <div class="ws_shadow"></div>
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 10; background-color: rgb(255, 255, 255); opacity: 0; background-position: initial initial; background-repeat: initial initial;"><a
href="http://wowslider.com/jquery-slideshow-flat-slices.html#" style="display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></a></div><a
href="http://wowslider.com/jquery-slideshow-flat-slices.html#" class="ws_next"></a></div>
<script type="text/javascript" src="js/wowslider.js"></script> <script type="text/javascript" src="js/script.js"></script> <!-- End WOWSlider.com BODY section -->
(7)
<ul>
<li><a href="index.html" id="menu">HOME</a></li> <li><a href="pengurus.php">KEPENGURUSAN</a></li> <li><a href="member.php">MEMBERSHIP</a></li> <li><a href="kegiatan.php">KEGIATAN</a></li> <li><a href="gallery.php">GALLERY</a></li> </ul>
</div>
<div id="isi">
<div id="sejarah" style="font-size:14px; color:#ffffff">Chelsea Indonesia Supporters Club (CISC) didirikan pada tanggal 7 Oktober 2003 dan disahkan pendiriannya secara hukum dengan Akte Notaris: "Perkumpulan Chelsea Indonesia Supporters Club (CISC)" pada tanggal 22 Desember 2003 oleh Notaris Yulina Sianipar, SH di Jakarta. Dan Chelsea Indonesia Supporters Club (CISC) telah resmi menjadi Official Supporters Club of Chelsea FC dari musim 2008-2009
Chelsea Indonesia Supporters Club (CISC) adalah organisasi perkumpulan para pendukung klub sepak bola Liga Inggris Chelsea FC di Indonesia yang berstatus Official sebagai supporter club resmi Chelsea FC. CISC bersifat bebas, mandiri, demokratis, profesional, bertanggungjawab, dan menjunjung tinggi nilai nilai sportifitas, serta tidak merupakan bagian dari organisasi perkumpulan para pendukung klub yang sama di Indonesia atau dari suatu organisasi sosial politik maupun organisasi massa yang lainnya.
<br><br />Maksud didirikannya Chelsea Indonesia Supporters Club adalah sebagai wadah untuk berkumpulnya para pendukung klub sepak bola Liga Inggris Chelsea FC di
(8)
Chelsea FC di Indonesia. Sementara CISC Medan sendiri berdiri pada tanggal 1 Juli 2006 yang diprakarsai oleh Bang Odhon. Saat ini jumlah member CISC Regional Medan yang terdaftar sekitar 200 orang lebih.<br><br />Kabar baik bagi para fans Chelsea FC di Asia, khususnya Indonesia. Chelsea akan melakukan tour pra musim ke Asia akhir bulan Juli nanti. Dan negara kita, Indonesia menjadi salah satu tujuan dari Chelsea tour Asia 2013. Chelsea FC akan menantang Timnas Indonesia di Stadion Gelora Bung Karno tanggal 25 Juli nanti. Welcome to Indonesia, Chelsea FC.<br /><br>Maksud dari dibuatnya web ini adalah untuk memudahkan masyarakat khususnya fans Chelsea di kota Medan untuk mengetahui segala info dan aktifitas-aktifitas dari CISC Regional Medan sendiri.<br /> </div>
</div>
<br class="balnk" /> </div>
</div> </div> </div>
<div id="main_footer"> <div id="footer"> </div>
</div> </body> </html>
B. Pengurus.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(9)
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<link rel="stylesheet" href="js/mainstyle.css" type="text/css" media="screen"> <!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="js/style.css">
<script type="text/javascript" async="" src="js/ga.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<script type="text/javascript" src="js/a.js"></script> <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25854704-1']); _gaq.push(['_setDomainName', '.wowslider.com']); _gaq.push(['_setAllowLinker', true]);
_gaq.push(['_setAllowHash', false]);
if(document.cookie.match("(^|;\\s)__utma") && !/utmcsr=\(direct\)/.test(unescape(document.cookie))) { _gaq.push(
['_setReferrerOverride', ''], ['_setCampNameKey', 'aaan'],
(10)
['_setCampMediumKey', 'aaam'], ['_setCampSourceKey', 'aaas'], ['_setCampTermKey', 'aaat'], ['_setCampContentKey', 'aaac'], ['_setCampCIdKey', 'aaaci'] )
}
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- WOW Visits -->
(11)
/* <![CDATA[ */
var google_conversion_id = 1071863997; var google_conversion_language = "en"; var google_conversion_format = "3"; var google_conversion_color = "ffffff";
var google_conversion_label = "YwhdCOff5AIQvbGN_wM"; var google_conversion_value = 0;
/* ]]> */ </script>
<script type="text/javascript" src="js/conversion.js">
</script></head><body><img height="1" width="1" border="0" src="js/saved_resource">
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""
src="http://www.googleadservices.com/pagead/conversion/1071863997/?label=Ywhd COff5AIQvbGN_wM&amp;guid=ON&amp;script=0"/>
</div> </noscript>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CISCmedan</title>
(12)
</head>
<body>
<div id="main_header"> <div id="judul"> </div>
<div id="header"> </div>
</div>
<div id="main_body"> <div id="body"> <div id="top"></div>
<div class="container"> <!-- end of #header --> <div class="ruled1">
<!-- Start WOWSlider.com BODY section --> <div id="wowslider-container1">
<div class="ws_images"><div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;"><img src="js/slide (1).jpg" alt="Fiord" title="CISC Medan"
id="wows1_0" style="width: 100%;"></div><ul style="position: absolute; top: 0px; -webkit-animation: none; width: 1000%; left: -200%;">
(13)
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(1).jpg" alt="Fiord" id="wows1_0" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(2).jpg" alt="Ice" id="wows1_1" style="visibility: hidden; width:840px; height:200px;" /></li> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(3).jpg" alt="Kjeragbolten" id="wows1_2" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(4).jpg" alt="Norway" id="wows1_3" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(5).jpg" alt="Town" id="wows1_4" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(6).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(7).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(8).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(9).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(10).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;">
(14)
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(11).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(12).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"> </ul>
</div>
<div class="ws_bullets"><div>
<div class="ws_bulframe"><div><div style="width: 700%;"><img
src="./t_files/fiord(1).jpg" alt="Fiord"><img src="js/ice(1).jpg" alt="Ice"><img src="js/kjeragbolten(1).jpg" alt="Kjeragbolten"><img src="./t_files/norway(1).jpg" alt="Norway"><img src="js/town(1).jpg" alt="Town"><img src="js/winter(1).jpg" alt="Winter"></div></div><span></span></div></div></div>
<!-- Generated by WOWSlider.com v3.2 --> <div class="ws_shadow"></div>
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 10; background-color: rgb(255, 255, 255); opacity: 0; background-position: initial initial; background-repeat: initial initial;"><a
href="http://wowslider.com/jquery-slideshow-flat-slices.html#" style="display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></a></div><a href="http://wowslider.com/jquery-slideshow-flat-slices.html#"
class="ws_next"></a></div>
<script type="text/javascript" src="js/wowslider.js"></script> <script type="text/javascript" src="js/script.js"></script> <!-- End WOWSlider.com BODY section -->
(15)
<div id="menu"> <ul>
<li><a href="index.html" id="menu">HOME</a></li> <li><a href="pengurus.php">KEPENGURUSAN</a></li> <li><a href="member.php">MEMBERSHIP</a></li> <li><a href="kegiatan.php">KEGIATAN</a></li> <li><a href="gallery.php">GALLERY</a></li> </ul>
</div>
<div id="isi"> <?php
include'koneksi.php';
$a=mysql_query("select*from pengururs"); while($b=mysql_fetch_array($a)){
echo"
<div id='data'> <div id='foto2'>
<img src='images/$b[foto]' width='200' height='200' class='size'> </div>
<div id='profil'> <table class='profil1'>
(16)
<tr><td>Nama</td><td>: $b[nama]</td></tr> <tr><td>TTL</td><td>: $b[ttl]</td></tr>
<tr><td>Pekerjaan</td><td>: $b[pekerjaan]</td></tr> <tr><td>Twitter</td><td>: $b[twitter]</td></tr> <tr><td>Kontak</td><td>: $b[kontak]</td></tr> </table>
</div> </div>"; } ?> </div>
<br class="balnk" /> </div>
</div> </div> </div>
<div id="main_footer"> <div id="footer"> </div>
</div> </body> </html>
(17)
C. Member.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<link rel="stylesheet" href="js/mainstyle.css" type="text/css" media="screen"> <!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="js/style.css">
<script type="text/javascript" async="" src="js/ga.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<script type="text/javascript" src="js/a.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25854704-1']); _gaq.push(['_setDomainName', '.wowslider.com']); _gaq.push(['_setAllowLinker', true]);
(18)
if(document.cookie.match("(^|;\\s)__utma") && !/utmcsr=\(direct\)/.test(unescape(document.cookie))) { _gaq.push(
['_setReferrerOverride', ''], ['_setCampNameKey', 'aaan'], ['_setCampMediumKey', 'aaam'], ['_setCampSourceKey', 'aaas'], ['_setCampTermKey', 'aaat'], ['_setCampContentKey', 'aaac'], ['_setCampCIdKey', 'aaaci'] )
}
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
(19)
</script>
<!-- WOW Visits -->
<script type="text/javascript"> /* <![CDATA[ */
var google_conversion_id = 1071863997; var google_conversion_language = "en"; var google_conversion_format = "3"; var google_conversion_color = "ffffff";
var google_conversion_label = "YwhdCOff5AIQvbGN_wM"; var google_conversion_value = 0;
/* ]]> */ </script>
<script type="text/javascript" src="js/conversion.js">
</script></head><body><img height="1" width="1" border="0" src="js/saved_resource">
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""
src="http://www.googleadservices.com/pagead/conversion/1071863997/?label=Ywhd COff5AIQvbGN_wM&amp;guid=ON&amp;script=0"/>
</div> </noscript>
(20)
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CISCmedan</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_header"> <div id="judul"> </div>
<div id="header"> </div>
</div>
<div id="main_body"> <div id="body"> <div id="top"></div>
<div class="container"> <!-- end of #header --> <div class="ruled1">
(21)
<div id="wowslider-container1">
<div class="ws_images"><div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;"><img src="js/slide (1).jpg" alt="Fiord" title="CISC Medan"
id="wows1_0" style="width: 100%;"></div><ul style="position: absolute; top: 0px; -webkit-animation: none; width: 1000%; left: -200%;">
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(1).jpg" alt="Fiord" id="wows1_0" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(2).jpg" alt="Ice" id="wows1_1" style="visibility: hidden; width:840px; height:200px;" /></li> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(3).jpg" alt="Kjeragbolten" id="wows1_2" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(4).jpg" alt="Norway" id="wows1_3" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(5).jpg" alt="Town" id="wows1_4" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(6).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(7).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(8).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
(22)
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(9).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(10).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(11).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(12).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"> </ul>
</div>
<div class="ws_bullets"><div>
<div class="ws_bulframe"><div><div style="width: 700%;"><img
src="./t_files/fiord(1).jpg" alt="Fiord"><img src="js/ice(1).jpg" alt="Ice"><img src="js/kjeragbolten(1).jpg" alt="Kjeragbolten"><img src="./t_files/norway(1).jpg" alt="Norway"><img src="js/town(1).jpg" alt="Town"><img src="js/winter(1).jpg" alt="Winter"></div></div><span></span></div></div></div>
<!-- Generated by WOWSlider.com v3.2 --> <div class="ws_shadow"></div>
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 10; background-color: rgb(255, 255, 255); opacity: 0; background-position: initial initial; background-repeat: initial initial;"><a
href="http://wowslider.com/jquery-slideshow-flat-slices.html#" style="display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></a></div><a href="http://wowslider.com/jquery-slideshow-flat-slices.html#"
(23)
<script type="text/javascript" src="js/wowslider.js"></script> <script type="text/javascript" src="js/script.js"></script> <!-- End WOWSlider.com BODY section -->
<div id="menu"> <ul>
<li><a href="index.html" id="menu">HOME</a></li> <li><a href="pengurus.php">KEPENGURUSAN</a></li> <li><a href="member.php">MEMBERSHIP</a></li> <li><a href="kegiatan.php">KEGIATAN</a></li> <li><a href="gallery.php">GALLERY</a></li> </ul>
</div>
<div id="isi">
<div id="sejarah" style="font-size:14px; color:#ffffff; font-family:Lucida Sans Unicode;">Mulai tahun 2013 ini, sistem pendaftaran membership CISC mengalami perubahan, yaitu dibuka hanya sekali dalam setahun (bulan Juni sampai
Agustus).<br><br />Biaya pendaftaran membership sebesar Rp.150.000 dan akan mendapatkan ID Card member, gantungan ID Card, kaos member, dan sticker CISC (seperti digambar).<br><br />Pendaftaran membership bisa dilakukan disetiap event-event CISC Medan, seperti Nonton Bareng, Fun Futsal, Kopi Darat, dan event-event-event-event lainnya.
</div>
(24)
<img src="images/member.jpg" width="500" height="250" class="ukuran"/> </div>
<div id="ket2">Membership Chelsea Indonesia Supporters Club </div>
</div>
<br class="balnk" /> </div>
</div> </div> </div>
<div id="main_footer"> <div id="footer"> </div>
</div> </body> </html>
(25)
D. Kegiatan.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<link rel="stylesheet" href="js/mainstyle.css" type="text/css" media="screen"> <!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="js/style.css">
<script type="text/javascript" async="" src="js/ga.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<script type="text/javascript" src="js/a.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25854704-1']); _gaq.push(['_setDomainName', '.wowslider.com']); _gaq.push(['_setAllowLinker', true]);
(26)
if(document.cookie.match("(^|;\\s)__utma") && !/utmcsr=\(direct\)/.test(unescape(document.cookie))) { _gaq.push(
['_setReferrerOverride', ''], ['_setCampNameKey', 'aaan'], ['_setCampMediumKey', 'aaam'], ['_setCampSourceKey', 'aaas'], ['_setCampTermKey', 'aaat'], ['_setCampContentKey', 'aaac'], ['_setCampCIdKey', 'aaaci'] )
}
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
(27)
</script>
<!-- WOW Visits -->
<script type="text/javascript"> /* <![CDATA[ */
var google_conversion_id = 1071863997; var google_conversion_language = "en"; var google_conversion_format = "3"; var google_conversion_color = "ffffff";
var google_conversion_label = "YwhdCOff5AIQvbGN_wM"; var google_conversion_value = 0;
/* ]]> */ </script>
<script type="text/javascript" src="js/conversion.js">
</script></head><body><img height="1" width="1" border="0" src="js/saved_resource">
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""
src="http://www.googleadservices.com/pagead/conversion/1071863997/?label=Ywhd COff5AIQvbGN_wM&amp;guid=ON&amp;script=0"/>
</div> </noscript>
(28)
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CISCmedan</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_header"> <div id="judul"> </div>
<div id="header"> </div>
</div>
<div id="main_body"> <div id="body"> <div id="top"></div>
<div class="container"> <!-- end of #header --> <div class="ruled1">
(29)
<div id="wowslider-container1">
<div class="ws_images"><div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;"><img src="js/slide (1).jpg" alt="Fiord" title="CISC Medan"
id="wows1_0" style="width: 100%;"></div><ul style="position: absolute; top: 0px; -webkit-animation: none; width: 1000%; left: -200%;">
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(1).jpg" alt="Fiord" id="wows1_0" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(2).jpg" alt="Ice" id="wows1_1" style="visibility: hidden; width:840px; height:200px;" /></li> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(3).jpg" alt="Kjeragbolten" id="wows1_2" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(4).jpg" alt="Norway" id="wows1_3" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(5).jpg" alt="Town" id="wows1_4" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(6).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(7).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(8).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
(30)
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(9).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(10).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(11).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(12).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"> </ul>
</div>
<div class="ws_bullets"><div>
<div class="ws_bulframe"><div><div style="width: 700%;"><img
src="./t_files/fiord(1).jpg" alt="Fiord"><img src="js/ice(1).jpg" alt="Ice"><img src="js/kjeragbolten(1).jpg" alt="Kjeragbolten"><img src="./t_files/norway(1).jpg" alt="Norway"><img src="js/town(1).jpg" alt="Town"><img src="js/winter(1).jpg" alt="Winter"></div></div><span></span></div></div></div>
<!-- Generated by WOWSlider.com v3.2 --> <div class="ws_shadow"></div>
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 10; background-color: rgb(255, 255, 255); opacity: 0; background-position: initial initial; background-repeat: initial initial;"><a
href="http://wowslider.com/jquery-slideshow-flat-slices.html#" style="display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></a></div><a href="http://wowslider.com/jquery-slideshow-flat-slices.html#"
class="ws_next"></a></div>
(31)
<script type="text/javascript" src="js/script.js"></script> <!-- End WOWSlider.com BODY section -->
<div id="menu"> <ul>
<li><a href="index.html" id="menu">HOME</a></li> <li><a href="pengurus.php">KEPENGURUSAN</a></li> <li><a href="member.php">MEMBERSHIP</a></li> <li><a href="kegiatan.php">KEGIATAN</a></li> <li><a href="gallery.php">GALLERY</a></li> </ul>
</div>
<div id="isi">
<div id="sejarah" style="font-size:14px; color:#ffffff; font-family:Lucida Sans Unicode;">Kegiatan CISC Medan:<br></br>1) Nonton Bareng (NonBar), dilakukan ketika Chelsea bertanding, baik secara Live ataupun Streaming. NonBar dilakukan di homebase CISC Regional Medan di KedeKopiKami Jalan Setia Budi No.10 A-B sebelum Titi Bobrok.<br></br>2) Fun Futsal, dilakukan secara rutin setiap hari
Minggu di Village Futsal Jalan Kampung Susuk Universitas Sumatera Utara mulai jam 4 sore sampai jam 6 sore.<br></br>Semua kegiatan tersebut bersifat untuk umum (Member dan non-member). Selain itu, juga ada kegiatan kumpul antar member, bakti sosial, buka puasa bersama dan lainnya.<br></br>Contact Person:
<table><tr><td width='250px'>Divisi NonBar</td><td>: Imam - 085296931442</td></tr>
<tr><td>Divisi Futsal</td><td>: Ivov - 085297524444</td></tr> </table>
(32)
</div>
<div id="rutinitas">
<img src="images/nonbar.jpg" width="400" height="200" class="rutin"/> </div>
<div id="rutinitas">
<img src="images/futsal.jpg" width="400" height="200" class="rutin"/> </div>
<div id="ket">Nonton Bareng </div>
<div id="ket">Fun Futsal </div>
</div>
<br class="balnk" /> </div>
</div> </div> </div>
<div id="main_footer"> <div id="footer"> </div>
</div> </body>
(33)
E. Gallery.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<link rel="stylesheet" href="js/mainstyle.css" type="text/css" media="screen"> <!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="js/style.css">
<script type="text/javascript" async="" src="js/ga.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<script type="text/javascript" src="js/a.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25854704-1']); _gaq.push(['_setDomainName', '.wowslider.com']); _gaq.push(['_setAllowLinker', true]);
(34)
if(document.cookie.match("(^|;\\s)__utma") && !/utmcsr=\(direct\)/.test(unescape(document.cookie))) { _gaq.push(
['_setReferrerOverride', ''], ['_setCampNameKey', 'aaan'], ['_setCampMediumKey', 'aaam'], ['_setCampSourceKey', 'aaas'], ['_setCampTermKey', 'aaat'], ['_setCampContentKey', 'aaac'], ['_setCampCIdKey', 'aaaci'] )
}
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
(35)
</script>
<!-- WOW Visits -->
<script type="text/javascript"> /* <![CDATA[ */
var google_conversion_id = 1071863997; var google_conversion_language = "en"; var google_conversion_format = "3"; var google_conversion_color = "ffffff";
var google_conversion_label = "YwhdCOff5AIQvbGN_wM"; var google_conversion_value = 0;
/* ]]> */ </script>
<script type="text/javascript" src="js/conversion.js">
</script></head><body><img height="1" width="1" border="0" src="js/saved_resource">
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""
src="http://www.googleadservices.com/pagead/conversion/1071863997/?label=Ywhd COff5AIQvbGN_wM&amp;guid=ON&amp;script=0"/>
</div> </noscript>
(36)
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CISCmedan</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_header"> <div id="judul"> </div>
<div id="header"> </div>
</div>
<div id="main_body"> <div id="body"> <div id="top"></div>
<div class="container"> <!-- end of #header --> <div class="ruled1">
(37)
<div id="wowslider-container1">
<div class="ws_images"><div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;"><img src="js/slide (1).jpg" alt="Fiord" title="CISC Medan"
id="wows1_0" style="width: 100%;"></div><ul style="position: absolute; top: 0px; -webkit-animation: none; width: 1000%; left: -200%;">
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(1).jpg" alt="Fiord" id="wows1_0" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(2).jpg" alt="Ice" id="wows1_1" style="visibility: hidden; width:840px; height:200px;" /></li> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(3).jpg" alt="Kjeragbolten" id="wows1_2" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(4).jpg" alt="Norway" id="wows1_3" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(5).jpg" alt="Town" id="wows1_4" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(6).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(7).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(8).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
(38)
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(9).jpg" alt="Winter" id="wows1_5" style="visibility: hidden; width:840px;
height:200px;"></li>
<li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(10).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(11).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"> <li style="width: 10%; font-size: 0px;"><img class="bentuk" src="js/slide(12).jpg" alt="winter" id="wows1_5" style="visibility: hidden; width:840px; height:200px;"> </ul>
</div>
<div class="ws_bullets"><div>
<div class="ws_bulframe"><div><div style="width: 700%;"><img
src="./t_files/fiord(1).jpg" alt="Fiord"><img src="js/ice(1).jpg" alt="Ice"><img src="js/kjeragbolten(1).jpg" alt="Kjeragbolten"><img src="./t_files/norway(1).jpg" alt="Norway"><img src="js/town(1).jpg" alt="Town"><img src="js/winter(1).jpg" alt="Winter"></div></div><span></span></div></div></div>
<!-- Generated by WOWSlider.com v3.2 --> <div class="ws_shadow"></div>
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 10; background-color: rgb(255, 255, 255); opacity: 0; background-position: initial initial; background-repeat: initial initial;"><a
href="http://wowslider.com/jquery-slideshow-flat-slices.html#" style="display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></a></div><a href="http://wowslider.com/jquery-slideshow-flat-slices.html#"
(39)
<script type="text/javascript" src="js/wowslider.js"></script> <script type="text/javascript" src="js/script.js"></script> <!-- End WOWSlider.com BODY section -->
<div id="menu"> <ul>
<li><a href="index.html" id="menu">HOME</a></li> <li><a href="pengurus.php">KEPENGURUSAN</a></li> <li><a href="member.php">MEMBERSHIP</a></li> <li><a href="kegiatan.php">KEGIATAN</a></li> <li><a href="gallery.php">GALLERY</a></li> </ul>
</div>
<div id="isi"> <div id="gambar"> <?php
include'koneksi.php';
$a=mysql_query("select*from gallery"); while($b=mysql_fetch_array($a)){ echo"
<div id='gallery'>
(40)
<img src='images/$b[gambar]' width='250' height='150' class='ukuran1'> </a>
</div>"; } ?> </div> </div>
<br class="balnk" /> </div>
</div> </div> </div>
<div id="main_footer"> <div id="footer"> </div>
</div> </body> </html>
(41)
DAFTAR PUSTAKA
Firdaus. 2007. 7 Jam Belajar Interaktif PHP & MySQL dengan Dreamwever. Palembang:Maxiklm.
Syafii, M. 2005. Panduan Membuat Aplikasi Database dengan PHP 5. Ylgyakarta: Andi Offset.
Tamimuddin H, Muh. 2005. Pemrograman Web Database ADODB PHP. Ylgyakarta: Andi Offset.
Mutmainah, Siti. 2005. Proyek Desain Web Berbasis Grafis dengan Dreamweaver DAN Fireworks. Ylgyakarta: ANDI
Perangin-angin, Kasiman. 2006. Aplikasi Web dengan PHP dan MySQL. Ylgyakarta : ANDI
(42)
BAB 3
GAMBARAN SEKILAS TENTANG
CHELSEA INDONESIA SUPOORTERS CLUB REGIONAL MEDAN
3.1 Latar Belakang Chelsea Indonesia Supporters Club Regional Medan
Chelsea Indonesia Supporters Club Regional Medan yang lahir karena adanya tim Chelsea FC (Inggris). Chelsea Indonesia Supporters Club Regional Medan adalah cabang atau regional dari Chelsea Indonesia Supporters Club. Chelsea Indonesia Supporters Club Regional Medan berdiri pada tanggal 01 Juli 2006 (7 Tahun) dan termasuk salah satu regional tertua dari Chelsea Indonesia Supporters Club.
Chelsea Indonesia Supporters Club adalah sebuah komunitas yang sudah diakui dari Chelsea FC nya sendiri (mempunyai sertifikat). Saat ini jumlah member yang tergabung dalam Chelsea Indonesia Supporters Club Regional Medan adalah 185 orang.
Chelsea Indonesia Supporters Club Regional Medan merupakan kelompok suporter yang akan terus mendukung tim Chelsea FC di kota Medan. Chelsea Indonesia Supporters Club Regional Medan atau medan sejati adalah kelompok suporter satu yang menjunjung tinggi nilai persaudaran dan kekeluargaan, baik sesama suporter Chelsea Indonesia Supporters Club Regional Medan ataupun dengan suporter
(43)
31
lainya. Jadilah bagian dari keluarga besar Chelsea Indonesia Supporters Club Regional Medan. Come and eoin Us!
3.2 Visi dan Misi Chelsea Indonesia Supporters Club Regional Medan
Visi Chelsea Indonesia Supporters Club Regional Medan:
” Menjadi sebuah fansclub yang kompak dan solid serta bercitra baik di masyarakat”
Misi Chelsea Indonesia Supporters Club Regional Medan:
1. Memperkenalkan Chelsea Indonesia Supporters Club Regional Medan kepada masyarakat umum, khususnya di kota Medan.
2. Mempererat tali silaturrahmi antar pendukung Chelsea FC di kota Medan. 3. Menjalin hubungan baik dengan supporter lain yang ada di kota Medan.
3.3 Struktur Organisasi Chelsea Indonesia Supporters Club Regional Medan Organisasi adalah suatu bentuk kerja sama dari sejumlah orang dalam suatu wadah tertentu untuk mencapai suatu tujuan. Struktur organisasi merupakan kerangka pembagian tugas dan tanggung jawab fungsional yang berperan menjalankan aktifitas organisasi melalui struktur organisasi yang jelas.
Dengan adanya struktur organisasi ini diharapkan setiap pengurus mengetahui dengan jelas tugas dan kewajiban yang harus dilaksanakan serta dapat mempertanggung jawabkannya kepada ketua dan ketua akan mengetahui bagaimana
(44)
32
mendelegasikan wewenang kepada anggotanya, sehingga setiap aktifitas anggota dapat terselenggara dengan baik dan terkoordinasi. Untuk melaksanakan tugas dan fungsi Chelsea Indonesia Supporters Club Regional Medan, telah ditetapkan struktur organisasi dan tata kerja. Struktur organisasi menggambarkan dengan jelas pemisahan kegiatan pekerjaan antara pengurus yang satu dengan pengurus yang lain dan bagaimana hubungan aktivitas dan fungsi dibatasi. Dalam struktur organisasi yang baik harus menjelaskan hubungan wewenang anggota melapor kepada pengurus. Kepengurusan organisasi Chelsea Indonesia Supporters Club Regional Medan terdiri dari Ketua/Koorinator Wilayah (Korwil), Sekretaris Jendral (Sekjen), Bendahara, Divisi Futsal, dan Divisi Nonton Bareng (Nonbar).
(45)
BAB 4
PERANCANGAN SISTEM
4.1. Analisis Sistem
Analisis sistem bertujuan untuk mengidentifikasi jalannya suatu sistem dan permasalahan-permasalahan yang terjadi pada sistem yang dibuat, yang meliputi perangkat keras (Hardware), perangkat lunak (Software), dan pengguna (Brainware). Analisis sistem dibutuhkan sebagai tahapan dasar perancangan sistem yang bekerja, yaitu meliputi pembahasan desain, deskripsi sistem, rancangan umum, spesifikasi kebutuhan, dan perancangan basis data (ERD).
4.2. Perancangan Sistem
Perancangan sistem adalah tahap setelah analisis dari siklus pengembangan sistem, pendefenisian dari kebutuhan-kebutuhan fungsional, persiapan untuk merancang implementasi, menggambarkan bagaimana suatu sistem di bentuk yang dapat berupa penggambaran, perancangan dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi mengkonfigurasikan perangkat lunak dan perangkat keras dari suatu system.
(46)
34
4.3. Metode Pengembangan Sistem
Dalam pembuatan tugas akhir ini, penulis menggunakan metode yang terdiri dari: 1. Studi kelayakan
Studi kelayakan adalah studi awal untuk memeriksa kebutuhan informasi calon pengguna akhir dan tujuannya, batasan, kebutuhan sumber daya, biaya, manfaat, dan kelayakan dari proyek yang diusulkan.
2. Rencana pendahuluan
Yaitu menentukan lingkup sistem yang akan ditangani.
3. Analisis sistem
Penguraian dari suatu sistem informasi yang utuh ke dalam bagian-bagian komponenya dengan maksud untuk mengidentifikasikan dan mengevaluasi permasalahan-permasalahan, kesempatan-kesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikan.
4. Perancangan sistem
Pendefinisian dari kebutuhan-kebutuhan fungsional, persiapan untuk merancang bangun implementasi, menggambarkan bagaimana suatu sistem dibentuk serta mengkonfigurasikan komponen-komponen perangkat lunak dan perangkat keras dari sistem.
5. Implementasi sistem
(47)
35
4.4. Metode Perancangan
Metode perancangan sistem ini menggunakan metode pendekatan atas-bawah (top down approach). Perancangan dimulai dari bentuk yang paling global yaitu diagram konteks, kemudian diturunkan secara bertahap menjadi bentuk yang lebih detail.
4.4.1. Pembuatan Flowchart (Diagram Alir)
Flowchart adalah penggambaran secara grafik dari langkah-langkah danurut-urutan prosedur dari suatu program. Flowchart menolong analis dan programmer untuk memecahkan masalah kedalam segmen-segmen yanglebih kecil dan menolong dalam menganalisis alternatif-alternatif lain dalam pengoperasian. Flowchart Sistem merupakan bagan yang menunjukkan alur kerja atau apa yang sedang dikerjakan di dalam sistem secara keseluruhan dan menjelaskan urutan dari prosedur-prosedur yang ada di dalam sistem. Dengan kata lain, flowchart ini merupakan deskripsi secara grafik dari urutan prosedur-prosedur yang terkombinasi yang membentuk suatu sistem. Flowchart Sistem terdiri dari data yang mengalir melalui sistem dan proses yang mentransformasikan data itu. Data dan proses dalam flowchart sistem dapat digambarkan secara online (dihubungkan langsung dengan komputer) atau offline (tidak dihubungkan langsung dengan komputer, misalnya mesin tik, cash retister atau kalkulator).
Dengan adanya flowchart, akan sangat membantu untuk memvisualisasikan isi dari setiap halaman dan link atau navigasi antara halaman-halaman tersebut. Di samping itu, juga dapat mempermudah dalam mengatur kode dan file HTML nya,
(48)
36
Tombol Kepengurusan
terutama link untuk navigasi penjelajahan ke seluruh halaman web. Secara sederhana flowchart keseluruhan dalam membangun situs ini dapat dilihat pada gambar berikut: Start Tombol Home Tombol Kegiatan Tombol Membership Tombol Gallery Stop Tampilan Home Tampilan Kepengurusan Tampilan Membership Tampilan Kegiatan Y Y Y N N N Halaman Utama Tampilan Gallery A B C D E Keterangan:
A= Tampilan Home
B= Tampilan Kepengurusan C= Tampilan Membership D= Tampilan Kegiatan E= Tampilan Gallery
Y
Y N
(49)
37
Gambar 4.1 Flowchart Perancangan Website CISC Regional Medan E Foto 1 Foto 2 Foto 3 Foto 4 Foto 5 Foto 6 Foto 7 Foto 8 Foto 9 Stop Tampilan Gallery Tampilan Foto Tampilan Foto Tampilan Foto Tampilan Foto Tampilan Foto Tampilan Foto Tampilan Foto Tampilan Foto Tampilan Foto
Back Y Y Y Y Y Y Y Y Y Y N N N N N N N N N
(50)
38
Gambar 4.2 Flowchart Admin
4.4.2 Diagram Konteks (Contex Diagram)
Diagram Konteks( Contex Diatram) adalah diagram level tertinggi dari DFD yang menggambarkan hubungan sistem dengan lingkungan luar website. Data Flow Diatram (DFD) adalah representasi grafis dari aliran data melalui sistem informasi, pemodelan aspek prosesnya. Data Flow Diatram (DFD) adalah langkah awal yang
Start
Input Username dan Password
Login
Halaman Admin
Logout
(51)
39
digunakan untuk membuat gambaran dari sistem yang nantinya dapat diuraikan. Data Flow Diatram (DFD) juga dapat digunakan untuk visualisasi pengolahan data (desain terstruktur).
Gambar 4.3 Diagram Konteks Perancangan Website CISC Regional Medan Admin
0 Website CISC
Regional Medan
Update data
- Data Home
- Data Kepengurusan - Data Membership - Data Kegiatan - Data Gallery
Pengunjung Data Id dan
(52)
40
D1 Gallery D2 Pengurus
Gambar 4.4 DFD level 0 Pengunjung
1 Halaman Utama
2 Gallery
4 Halaman Admin
Admin
Update Info Feedback
Data Foto
Data Gallery
Update Data Gallery
Data Id dan Password
3 Pengurus DataPengurus
DataPengurus
(53)
41
D1 Gallery
D2 Pengurus
Gambar 4.5 DFD level 1 2.1
Gallery
2.2 Edit Foto Input
Edit Foto
Update Foto Hasil Update
Update Foto
1 Halaman Utama
Update Pengurus
3.2 Edit Pengurus Hasil Update
Update Pengurus
3.1 Pengurus
(54)
42
4.4.3 Entity Relationship Diagram (ERD)
Entity Relationship Diagram (ERD) merupakan suatu model untuk menjelaskan hubungan antar data dalam database berdasarkan objek-objek dasar data yang mempunyai hubungan antar relasi.
Gambar 4.6 ERD Pengurus
Gambar 4.7 Gallery
Gambar 4.8 ERD Admin
4.5. Tabel Database
Database ini digunakan sebagai media penyimpanan data-data yang telah diinput dan nantinya akan ditampilkan didalam website CISC Regional Medan. Database yang digunakan penulis terdiri dari database pengurus, database gallery, dan database admin.
Pengurus
Jabatan Nama TTL
Pekerjaan
Foto
Kontak
Password
Admin Admin
(55)
43
Nama Field Tipe Data Ukuran Keterangan
Jabatan Varchar 100 Jabatan
Nama Varchar 100 Nama
TTL Varchar 100 Tempat Tanggal Lahir Pekerjaan Varchar 100 Pekerjaan
Twitter Varchar 100 Twitter
Foto Varchar 100 Foto
Kontak Varchar 30 Kontak
Tabel 4.1 Tabel Database Pengurus
Nama Field Tipe Data Ukuran Keterangan
Id Int 10 Id
Gambar Varchar 100 Gambar
Keterangan Text Text Keterangan Tabel 4.2 Tabel Database Gallery
Nama Field Tipe Data Ukuran Keterangan
Admin Varchar 100 Username
Password Varchar 100 Password Tabel 4.3 Tabel Database Admin
(56)
BAB 5
IMPLEMENTASI SISTEM
5.1 Pengertian Implementasi Sistem
Implementasi sistem adalae prosedur yang dilakukan untuk menyelesaikan desain sistem supaya siap untuk dioperasikan, termasuk juga menulis kode program jika tidak digunakan perangkat lunak aplikasi.
5.1.1 Tujuan Implementasi Sistem
Adapun tujuan-tujuan dari implementasi sistem, yaitu:
a. Mengkaji rangkaian sistem baik dari segi software maupun hardware sebagai sarana penyaji informasi.
b. Menyelesaikan rancangan sistem yang ada dalam dokumen sistem yang baru atau yang telae disetujui.
c. Memastikan baewa pengunjung dapat mengoperasikan dengan mudae tereadap sistem yang baru dan mendapat yang baik dan jelas.
d. Mempereitungkan baewa sistem telae memenuei permintaan pemakai yaitu dengan menguji sistem secara menyelurue.
(57)
45
e. Memastikan baewa sistem telae berjalan dengan lancar dengan mengontrol dan melakukan instalasi secara benar.
5.2 Komponen-Komponen Sistem
Pada perancangan web ini, ada beberapa komponen yang sangat dibutuekan, antara lain:
5.2.1 Hardware
Hardware merupakan komponen yang sangat dibutuekan dalam mewujudkan sistem yang diusulkan. Dalam eal ini penulis merinci spesifikasi komponen hardware, yaitu:
a. Personel Computer dengan Processor min Intel Inside Core i3 b. Hard Disk 250 GB
c. Monitor Radeon Graphics d. Memory 2048 MB RAM
5.2.2 Software
Hardware tidak akan memecaekan suatu masalae tanpa adanya komponen software. Adapun software yang digunakan dalam pembuatan website ini adalae:
(58)
46
a. Operasi Windows 7 Ultimate
Gambar 5.1 Windows 7 Ultimate
b. Macromedia Dreamweaver 8
Software ini berfungsi sebagai teks editor dalam penulisan script PHP dalam pembuatan website.
(59)
47
c. Xampp version 1.6.8
Xampp merupakan aplikasi yang berfungsi sebagai web servernya, PHP sebagai baeasa pemograman serta MySQL sebagai database nya. Dengan Xampp, kebutuean software telae terpenuei.
Gambar 5.3 Mengaktifkan Xampp
(60)
48
5.2.3 Brainware
Brainware adalae sumber daya manusia yang nantinya akan berperan sebagai user ataupun administrator sistem. Brainware yang dibutuekan sebagai administrator nantinya bekerja pada server dalam pengolaean data website. Administrator earus mengerti tentang baeasa pemrograman PHP dan MySQL serta mengerti akan jalannya sistem. Sedangkan user tidak earus memiliki kemampuan keusus eanya saja mampu mengoperasikan internet browser.
5.3 Uji Program
Dari easil uji program yang telae dilakukan, maka dapat dilieat tampilan easil desain web dinamis pada CISC Regional Medan, sebagai berikut :
(61)
49
Gambar 5.6 Tampilan Halaman Kepengurusan
(62)
50
Gambar 5.8 Tampilan Halaman Kegiatan
(63)
BAB 6
KESIMPULAN DAN SARAN
6.1 Kesimpulan
Setelah melakukan pembahasan akhir penulis dapat membuat kesimpulan sebagai berikut :
1. Seiring dengan perkembangan jaman, website saat ini sangat dibutuhkan bagi sebuah organisasi, perusahaan, instansi pemerintah maupun instansi spasta sebagai penyedia informasi.
2. Bagi CISC Regional Medan sendiri, dengan adanya website ini semakin mempermudah anggota ataupun masyarakat umum untuk mendapatkan informasi mengenai CISC Regional Medan.
3. Dengan menggunakan internet, penyampaian informasi dapat lebih luas tersebar diberbagai pilayah dan lebih mudah untuk mengaksesnya.
4. Dengan menggunakan bahasa pemrograman PHP dan MySQL sebagai sistem database nya, dapat dibuat sebuah website yang sederhana dan sebagai media penyampaian informasi bagi CISC Regional Medan.
(64)
52
6.2 Saran
Dalam mengakhiri penulisan Tugas Akhir ini penulis menguraikan beberapa saran antara lain :
1. Hendaklah program yang dibuat dapat dikembangkan lebih lanjut untuk membentuk suatu sistem yang lebih baik sesuai dengan keputusan guna menunjang pengambilan keputusan yang sempurna.
2. Hendaklah pembuatan file cadangan dilakukan secara berkala. Hal ini sangat penting artinya untuk mencegah kemungkinan kehilangan dan kerusakan data yang telah disimpan.
3. Sebaiknya digunakan program antivirus yang residen. Hal ini dimaksudkan untuk mencegah terjadinya kerusakan pada program ataupun data.
4. Hendaklah perlu dikembangkan agar sistem informasi ini lebih luas dan dapat berkembang dengan baik.
(65)
BAB 2
LANDASAN TEORI
2.1 Pengertian Komputer
Komputer (computer) berasal dari bahasa Latin computare yang berarti menghitung. Komputer mempunyai arti yang sangat luas dan berbeda untuk orang yang berbeda. Komputer adalah sistem elektronik untuk memanipulasi data yang cepat dan tepat serta dirancang dan diorganisasikan supaya secara otomatis menerima dan menyimpan data input, memprosesnya dan menghasilkan output dibawah pengawasan suatu langkah-langkah instruksi-instruksi program yang tersimpan di memori (stored program).
Bila dijabarkan, defenisi dari komputer adalah seperangkat peralatan elektronik yang bekerja bersama–sama secara otomatis, menerima input, memproses data dan menghasilkan data secara logis (output), cepat dan tepat berdasarkan perintah–perintah yang diberikan oleh user dan komputer itu sendiri merupakan bagian dari sistem komputerisasi.
Sistem komputer adalah suatu sistem yang terdiri atas komputer dan seluruh komponen–komponen yang menunjang terlaksananya proses pengolahan data dan
(66)
8
menjadikan komputer sebagai alat yang berguna. Sistem komputer memiliki beberapa komponen yaitu :
a. Peragkat Keras (Hardware)
Peragkat keras merupakan perangkat yang secara fisik dapat dilihat dan diraba, yang membentuk kesatuan, sehingga dapat difungsikan. Berdasarkan kegunaannya, perangkat keras dapat digolongkan ke dalam tiga bagian :
1. Alat input
Alat input adalah alat yang memiliki fungsi untuk memasukkan data ataupun program yang akan diproses komputer, seperti keyboard, mouse, printer, scanner dan lainnya.
2. Alat Proses
Alat proses atau CPU (Central Prosesing Unit), merupakan alat atau unit terpenting didalam sistem komputer. Fungsi utamanya adalah pusat pemprosesan data dan mengiontrol keseluruhan sistem komputer selama pengolahan data berlangsung, contohnya adalah prosessor.
3. Alat Output
Alat output adalah alat untuk menampilkan hasil pengolahan data yang dilakukan oleh CPU, misalnya monitor dan printer.
b. Perangkat Lunak (Software)
Perangkat lunak adalah komponen komputer yang merupakan kumpulan program dan prosedur yang memungkinkan perangkat keras komputer dapat
(67)
9
menjalankan fungsinya sebagai alat pengolahan data. Komponen ini tidak nyata secara fisik. Perangkat lunak berfungsi sebagai perantara antara komputer dan user sehingga dapat digunakan.
c. Perangkat Komputer (Brainware)
Pengguna komputer adalah manusia yang menangani suatu sistem komputer atau orang yang mampu menangani suatu sistem operasi komputer. Brainware dapat dikelompokkan dalam beberapa bagian, yaitu :
1. Sistem Analisis
Orang bertugas untuk membentuk dan merancang fasilitas suatu sistem komputer yang akan dibangun.
2. Programmer
Orang yang bertugas menerjemaahkan spesifikasi yang telah dirancang oleh sistem analisis kedalam suatu bahasa program tertentu.
3. Komputer Operator
Orang yang bertugas menangani pengolahan data secara langsung.
4. Data Entry Operator
Orang yang bertugas melakukan pengurusan data yang akan diolah, mulai dari pengumpulan data, perekaman data kedalam media penyimpanan hingga pemeriksaan dan pengiriman informasi yang dihasilkan oleh komputer.
(68)
10
2.2 Sejarah Internet
Internet berawal dari diciptakannya teknologi jaringan komputer. Jaringan komputer merupakan beberapa komputer yang terhubung satu sama lain dengan memakai kabel dalam satu lokasi, misalnya satu kantor atau gedung. Jaringan komputer ini berfungsi agar pengguna komputer bisa bertukar informasi dan data dengan komputer lainnya.
ARPAnet (US Defense Advanced Reseach Project Agency) atau departemen pertahanan Amerika pada tahun 1969 membuat jaringan komputer yang tersebar untuk menghindarkan terjadinya informasi terpusat, yang apabila perang dapat dengan mudah dihancurkan. Jadi suatu bagian dari sambungan itu secara otomatis dipindahkan kesambungan lainnya.
Setelah angkatan Amerika, dunia pendidikan pun merasa sangat perlu mempelajari dan mengembangkan jaringan komputer. Salah satunya adalah University of California at Los Angeles (UCLA). Akhirnya pada tahun 1970 internet banyak digunakan Universitas di Amerika dan berkembang pesat saat ini. Agar pengguna komputer dengan merek dan tipe berbeda dapat saling berhubungan, maka para ahli membuat sebuah protocol (semacam bahasa) yang sama untuk dipakai di Internet. Namanya TCP (Transmission Control Protokol) protokol pengendali transmisi dan IP (Internet Protokol).
(69)
11
2.3 World Wide Wee (WWW)
World Wide Web (WWW), lebih dikenal dengan web merupakan salah satu layanan yang didapat oleh pemakai komputer yang terhubung dengan internet. Web pada awalnya adalah ruang informasi dalam internet, dengan menggunakan teknologi hypertext. Pemakai dituntut untuk menemukan informasi dengan mengikuti link yang disediakan dalam dokumen web yang ditampilkan dalam browser web.
Kini internet identik dengan web, karena kepopuleran web sebagai standart interface pada layanan yang ada pada internet, dari awalnya sebagai penyedia informasi, kini digunakan juga untuk komunikasi dari email sampai dengan chatting, sampai dengan melakukan transaksi bisnis (commerce).
Kini, web seakan lebih popular dari pada email, walaupun secara statisktik email masih merupakan aplikasi terbanyak yang digunakan oleh pengguna internet. Web lebih popular bagi khalayak umum dan pemula, terutama untuk tujuan pencarian informasi dan melakukan komunikasi email yang menggunakan web sebagai interface nya.
Interface identik dengan web, karena popularitas sebagai penyedia informasi dan interface yang digunakan oleh pengguna internet dari masalah informasi sampai dengan komunikasi. Informasi produk dari yang serius sampai dengan yang sampah, dari yang cuma–cuma sampai dengan yang komersial, semuanya ada.
(70)
12
Web memudahkan pengguna komputer untuk berinteraksi dengan pelaku internet lainya dan menelusuri (informasi) di internet. Selain itu web telah diadopsi oleh perusahaan sebagai bagian dari stategi teknologi informasi, karena beberapa alasan :
a. Akases informasi yang mudah. b. Setup server yang lebih mudah. c. Informasi mudah didistribusikan.
d. Bebas platform : informasi dapat disajikan oleh web browser pada sistem mana saja karena adanya standar dokumen berbagsi tipe data dapat disajikan.
2.3.1 Lahirnya Web
Tahun 1989, Trimothy Berners-Lee seorang ahli komputer dari Inggris dan peneliti lain di European Particle Physics Lab (Consei European Pour la Recherche Nucleaire, atau CERN) di Geneva Swiss, mengembangkan satu cara untuk membagi data antar koleganya menggunakan sesuatu yang di sebut dengan hypertext. Pemakai di CERN dapat menampilkan dokumen pada layar komputer dengan menggunakan software browser baru.
Kode-kode khusus disisipkan kedalam dokumen elektronik ini, memungkinkan pemakai untuk meloncat dari satu dokumen ke dokumen lainnya pada layar dengan hanya memilih sebuah hyperlink.
(71)
13
Kemampuan internet dimasukkan kedalam browser ini sehingga lompat dari satu dokumen ke dokumen lain, tidak lagi dari satu komputer saja, tetapi dapat melompat kedokumen lain yang letaknya pada komputer remote. Seorang peneliti dapat juga mengirimkan sebuah file dari komputer remote kesistem lokalnya, atau login kedalam suatu sistem remote hanya dengan mengklik hyperlink. Tidak perlu melalui mekanisme FTP atau Telnet. Jalan pintas CERN digunakan sebagai dasar dari yang disebut World Wide Web atau berikut server dan browser webnya (sekarang dimaintenence oleh World Wide Consortium).
2.3.2 Browser Web
Browser web adalah software yang digunakan untuk menampilkan informasi dari server web. Software ini kini telah berkembang dengan menggunakan user interface grafis, sehingga pemakai dapat dengan mudah memakai poin atau klik untuk pindah antar dokumen.
Lynx adalah browser web yang masih menggunakan mode teks, yang akibatnya adalah tidak ada gambar yang dapat ditampilkan. Lynx ini ada pada lingkungan DOS (Disk Operation System). Akan tetapi pengembangan dari browser mode teks ini adalah tidak secepat browser web dengan GUI (Grafic User Interface).
Disaat perkembangan WWW ada dua browser web yang paling populer yaitu Internet Explorer (IE) dan Netscape Navigator. Namun saat ini bermunculan browser web lain yang turut meramaikan persaingan untuk merebut para pengguna internet.
(72)
14
Diantara browser web yang telah banyak digunakan pada saat peluncurannya adalah MSN, Opera, dan Mozilla Firefox. Diantara web browser ini terdapat kelebihan dan kekurangan sehingga pengguna dapat memilih sesuai dengan keinginan dan kemudahan yang ditawarkan.
Cara Kerja Browser Mengameil Halaman
Suatu browser mengambil sebuah web page dari server dengan sebuah request. Sebuah request adalah HTTP standar yang berisi sebuah page address. Sebuah page address terlihat seperti berikut : http://www.google.com/search?q=%s.
Cara Kerja Browser Menampilkan Halaman
Seluruh web page berisi instruksi-instruksi bagaimana untuk ditampilkan. Browser menampilkan page dengan membaca instruksi-instruksi ini. Instruksi yang paling umum untuk menampilkan disebut tag HTML. Tag HTML contohnya, yaitu <p> ini merupakan suatu paragraph </p>.
2.3.3 Server Web
Server web adalah komputer yang digunakan untuk menyimpan dokumen-dokumen web, komputer ini akan melayani permintaann dokumen web dari kliennya. Browser web seperti IE dan Opera berkomunkasi melalui jaringan (termasuk jaringan internet) dengan server web, menggunkan HTTP. Browser akan mengirimkan request kepada server untuk meminta dokumen tertentu atau layanan lain yang disediakan oleh
(73)
15
server. Server memberikan dokumen atau layanan jika tersedia juga dengan menggunakan protokol HTTP.
2.3.4 Istilah-istilah Umum Yang Harus Diketahui
Berikut beberapa istilah umum yang harus diketahui antara lain :
a. Protokol : secara defenisi adalah standart pemprosesan informasi yang diterima secara umum. Protokol TCP / IP merupakan protokol komunikasi yang digunakan dalam internet.
b. HTTP (Hyper Transfer Protokol) : HTTP pada umumnya digunakan untuk melayani dokumen hypertext, karena HTTP adalah protokol dengan overhead yang sangat rendah, sehingga pada kenyataan navigasi informasi dapat ditambah langsung ke dalam dokumen. Dengan demikian protokolnya sendiri tidak harus mendukung navigasi secara penuh.
c. Browsing / Surfing : kegiatan menelusuri dan mencari informasi dalam internet melalui layanan informasi web.
.
d. URL (Universal resource Locator) : adalah konsep nama file standar yang diperluas dengan jaringannya. Nama file ini tidak hanya menunjukkan direktori dan nama filenya, tetapi juga nama mesinnya dalam jaringan. URL dapat disediakan dengan berbagai metode, dan bisa jadi bukan sekedar file,
(74)
16
kerena URL dapat menunjukkan query-query, dokumen yang disimpan dalam database.
2.4 HTML (Hypertext Markup Language)
2.4.1 Dokumen HTML
Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang. Dokumen ini dikenal sebagai webpage. Dokumen HTML merupakan dokumen yang disajikan dalam browser web surfer. Dokumen umumnya berisi informasi atau interface aplikasi didalam internet.
Ada dua cara untuk membuat web page : dengan web editor (misalnya macromedia Dreamweaver atau Microsoft Frontpage) atau teks editor biasa misalnya notepad atau editplus.
2.4.2 Penamaan Dokumen HTML
Penamaan dokumen HTML yang menggunakan tiga karakter awalnya adalah untuk mengakomodasikan sistem penamaan yang ada pada sistem operasi DOS. Nama dokumen pada beberapa sistem operasi bersifat case sensitive (membedakan huruf besar dan kecil). Nama dokumen yang sama tapi dituliskan dalam case yang berbeda akan dianggap sebagai document yang berbeda, misalnya ‘dokumen.html’ berbeda
(75)
17
dengan ‘DOKUMEN.html’. Kasus case sensitive akan dijumpai pada dokumen web yang di hosting didalam server yang berbasis *.nix (keluarga sistem operasi UNIX).
2.4.3 Elemen dan Tag HTML
Dokumen HTML disusun oleh elemen-elemen. Elemen merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML untuk menandai berbagai elemen dalam suatu dokumen HTML, digunakan Tag. Tag HTML terdiri dari sebuah kurung sudut kiri (<, tanda lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan (misalnya, <H1> dengan </H1>), atau yang menjadi pasangan selalu diawali dengan karakter garis miring. Tag yang menunjukkan tag awal yang berarti awal elemen, dan yang kedua menunjukkan tag akhir, berarti akhir elemen.
Nama elemen ditunjukkan dengan nama tag nya. Suatu elemen didalam dokumen HTML harus ditandai dengan tag nya yang berpasangan. Ada beberapa elemen yang tidak mengharuskan tag nya ditulis secara berpasangan, elemen tersebut diantarnya adalah:
a. Paragraf dengan tag <p>.
b. Ganti garis – break line dengan tag <br>. c. Ganti datar – horizontal rule dengan tag <hr>. d. List item dengan tag <Li>.
(1)
PERANCANGAN WEBSITE
CHELSEA INDONESIA SUPPORTERS CLUB REGIONAL MEDAN MENGGUNAKAN PHP DAN MYSQL
Diajukan untuk melengkapi tugas akhir dan memenuhi syarat memperoleh gelar Ahli Madya
IMAM ANUGRAH 102406213
(2)
ABSTRAK
Pada penulisan Tugas Akhir ini, penulis membuat perancangan website Chelsea Indonesia Supporters Club Regional Medan merupakan sebuah website yang digunakan untuk mengakses dan menginput data dari website pada internet.
Metode dan rancangan website Chelsea Indonesia Supporters Club Regional Medan ini dengan menggunakan PHP dan MYSQL sebagai bahasa pemrogramannya. Cara kerja dari website yang dibuat adalah dengan mengakses data yang terdapat di website Chelsea Indonesia Supporters Club Regional Medan.
Hasil rancangan dari website Chelsea Indonesia Supporters Club Regional Medan ini adalah dapat memberikan informasi tentang organisasi atau kelompok supporter Chelsea Indonesia Supporters Club Regional Medan. Target yang akan dicapai dari perancangan website Chelsea Indonesia Supporters Club Regional Medan ini adalah user mampu mengakses informasi tentang website Chelsea Indonesia Supporters Club Regional Medan. Kajian ini dibuat bertujuan untuk menambah wawasan cara membuat website yang sederhana.
(3)
DAFTAR ISI
Halaman
Persetujuan ii
Pernyataan iii
Penghargaan iv
Abstrak v
Daftar Isi vi
Daftar Gambar viii
Daftar Tabel ix
BAB 1 PENDAHULUAN 1
1.1 Latar Belakang 1
1.2 Permasalahan 3
1.3 Maksud dan Tujuan 4
1.4 Metodologi Penelitian 4
1.5 Lokasi dan Waktu 5
1.6 Sistematika Penulisan 5
BAB 2 LANDASAN TEORI 7
2.1 Pengertian komputer 7
2.2 Sejarah Internet 10
2.3 World Wide Web 11
2.3.1 Lahirnya Web 12
2.3.2 Browser Web 13
2.3.3 Server Web 14
2.3.4 Istilah-istilah umum yang harus diketahui 15
2.4 HTML 16
2.4.1 Dokumen HTML 16
2.4.2 Penamaan dokumen HTML 16
2.4.3 Elemen dan tag HTML 17
2.5 PHP 20
2.5.1 Sejarah PHP 20
(4)
BAB 3 GAMBARAN UMUM ORGANISASI 30 3.1 Latar Belakang CISC Regional Medan 30 3.2 Visi & Misi CISC Regional Medan 31 3.3 Struktur Organisasi CISC Regional Medan 31
BAB 4 PERANCANGAN SISTEM 33
4.1 Analisis Data 33
4.2 Perancangan Sistem 33
4.3 Metode Pengembangan Sistem 34
4.4.Metode Perancangan 34
4.4.1.Pembuatan Flowchat (Diagram Air) 35 4.4.2 Diagram Konteks (Context Diagram) 38 4.4.3 Entity Relationship Diagram (ERD) 42
4.5.Tabel Database 42
BAB 5 IMPLEMENTASI SISTEM 44
5.1 Pengertian Implementasi Sistem 44 5.1.1 Tujuan Implementasi Sistem 44 5.2 Komponen-komponen Sistem 45
5.2.1 Hardware 45
5.2.2 Software 45
5.2.3 Brainware 48
5.3 Uji Program 48
BAB 6 KESIMPULAN DAN SARAN 51
6.1 Kesimpulan 51
6.2 Saran 52
DAFTAR PUSTAKA
(5)
DAFTAR GAMBAR
Gambar Judul Halaman
Nomor
Gambar 2.1 Dokumen HTML Ditampilkan Dibrowser Google Chrome 20 Gambar 2.2 Tampilan Editor Dreamweaver 28 Gambar 4.1 Flowchart Perancangan Website CISC Tegional Medan 37
Gambar 4.2 Flowchart Admin 38
Gambar 4.3 Diagram Konteks Perancangan Website 39
Gambar 4.4 DFD level 0 40
Gambar 4.5 DFD level 1 41
Gambar 4.6 ETD Pengurus 42
Gambar 4.7 ETD Gallery 42
Gambar 4.8 ETD Admin 42
Gambar 5.1 Windows 7 Ultimate 46 Gambar 5.2 Macromedia Dreamwever 8 46 Gambar 5.3 Mengaktifkan Xampp 47
Gambar 5.4 Xampp 47
Gambar 5.5 Tampilan Halaman Home 48 Gambar 5.6 Tampilan Halaman Kepengurusan 49 Gambar 5.7 Tampilan Halaman Membership 49 Gambar 5.8 Tampilan Halaman Kegiatan 50 Gambar 5.9 Tampilan Halaman Gallery 50
(6)
DAFTAR TABEL
Tabel Judul Halaman
Nomor
Tabel 2.1 Daftar Database Yang Didukung PHP 24
Tabel 2.2 Defenisi Sistem Informasi 29
Tabel 4.1 Tabel Database Pengurus 43
Tabel 4.2 Tabel Database Gallery 43