No Tanggal Asisten Bimbingan Pembahasan pada Asistensi Mengenai, pada Bab Paraf Dosen Pembimbing

  

KEMENTRIAN PENDIDIKAN DAN KEBUDAYAAN

UNIVERSITAS SUMATERA UTARA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN

ALAM

Jl. Bioteknologi No. 1 Kampus USU Telp. (061) 8211050 Fax. (061) 8214290 Medan-20155 Email : Dekanat@FMIPA.USU.AC.ID KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

  Nama Mahasiswa : Pratama Agung Harahap Nomor Stambuk : 1124061098 Judul Tugas Akhir : Perancangan Sistem Pakar Upaya Pengobatan

  Diri Sendiri (UPDS ) Atau Swamedikasi Dosen Pembimbing : Dr. Mardiningsih, M.Si Tanggal Mulai Bimbingan : Tanggal Selesai Bimbingan :

Pembahasan pada Tanggal Asistensi Paraf Dosen Asisten No Mengenai, pada Pembimbing Keterangan Bimbingan Bab

  1

  2

  3

  4

  5

  6

  7

  8

  Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan mahasiswa telah selesai Diketahui, Disetujui Pembimbing Utama/ Program Studi D3 Teknik Informatika Penanggung Jawab Ketua,

  Dr. Elly Rosmaini, M.Si Dr. Mardiningsih, M.Si NIP.19600201 198503 2 002 NIP. 19630405 198811 2 001

LISTING PROGRAM 1.index.php

  <html> <head> <STYLE TYPE = "text/css">

  • { margin:1px; pedding:0px; } #wrapper { width:100%; height:620px; margin:0; background : transparent ;

  } #container { width:100%; height:139%; margin: auto; background: #563c55 url(images/wood_pattern.jpg) ;

  } #topbar { width:100%; display:block; height:210px; background : transparant ; border:1px 0px 0px 0px; solid; padding:10px;

  } #navbar { width:auto; display:block; height:30px; background: green; border:0px solid;

  } #main { width:auto; height:500px; display:block; background : transparant ;

  } #column_left { width:70%; height:480px; margin:60px 0px 0px 180px; float:left; background: white url(images/upds.png) no-repeat LEFT ; border:1px solid; border-radius:12px; box-shadow: 10px 5px 5px 5px #888888;

  } #kolom_bawah { width:100%; display:block; height:50px; margin:60px 0px 0px 0px; background : transparant ;

  } #footer { width:100%; display:block; height:50px; margin:10px 0px 0px 0px; background : transparant ;

  } </STYLE> </head> <body> <div id="wrapper">

  <div id="container"> <div id="topbar">

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" /> <meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>

  <link rel="shortcut icon" href="../favicon.ico" type="image/x- icon"/> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> <style>

  { font-family:Arial; } span.reference{ position:fixed; left:10px; bottom:10px; font-size:12px;

  } ul.sdt_menu{ margin-top:50px;

  } h1.title{ text-indent:-9000px; background:transparent url(title.png) no-repeat top left; width:1314px; height:69px;

  } </style> <div class="content">

  <ul id="sdt_menu" class="sdt_menu"> <li>

  <a href="index.php"> <img src="foto/2.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap">

  <span class="sdt_link">Home</span> </span>

  </a> </li> <li>

  <a href="tampilpenyakit.php"> <img src="foto/1.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap">

  <span class="sdt_link">Daftar Penyakit</span>

  </span> </a>

  </li> <li>

  <a href="login.php"> <img src="foto/1.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">admin</span> </span>

  </a> </li>

  </ul> </div>

  <script type="text/javascript" src=" jquery/jquery.min.js"></script> <script type="text/javascript" src="jquery/jquery.easing.1.3.js"></script>

  <script type="text/javascript"> $(function() { $('#sdt_menu > li').bind('mouseenter',function(){ var $elem = $(this);

  $elem.find('img') .stop(true) .animate({

  'width':'170px', 'height':'130px', 'left':'0px'

  },400,'easeOutBack') .andSelf() .find('.sdt_wrap')

  .stop(true) .animate({'top':'170px'},500,'easeOutBack')

  .andSelf() .find('.sdt_active')

  .stop(true) .animate({'height':'140px'},300,function(){ var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length){ var left = '170px'; if($elem.parent().children().length == $elem.index()+1)left = '-170px';

  $sub_menu.show().animate({'left':left},200); }

  }); }).bind('mouseleave',function(){ var $elem = $(this); var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length)

  $sub_menu.hide().css('left','0px'); $elem.find('.sdt_active')

  .stop(true) .animate({'height':'0px'},300) .andSelf().find('img') .stop(true) .animate({

  'width':'0px', 'height':'0px', 'left':'85px'},400)

  .andSelf() .find('.sdt_wrap') .stop(true) .animate({'top':'25px'},500);

  }); }); </script>

  <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <meta name="description" content="Expanding Search Bar

  Deconstructed" /> <meta name="keywords" content="transition, search, expanding, search input, sliding input, css3, javascript" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/default.css" /> <link rel="stylesheet" type="text/css" href="css/component.css" /> <script src="jquery/modernizr.custom1.js"></script>

  </head> </div> <div class="spacer1"></div> <div id="navbar"> <div class="container"> </div> <div id="main"> <div id="column_left">

  <link href="index.css" rel="stylesheet" /> <body> <div id="wraper"> <div id="formcari"> <form method="POST" action="caripenyakit.php"> <input id="textfield" placeholder="Masukkan Penyakit ...." type="text" value=""name="cari"> <input id="button" type="submit" value="Cari"> </form> </div> </div> </body> </div> <div id="main"> </div> </div> <div id="kolom_bawah"</div> <div id="footer"> <hr/></div> </div> </body> </html>

  <html> <head> <title></title> <link href="index.css" rel="stylesheet" />

  <link href="css/style.css" rel="stylesheet" /> </head> <body>

  <div class="content"> <ul id="sdt_menu" class="sdt_menu">

  <li><a href="index.php"> <img src="foto/2.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap">

  <span class="sdt_link">Home</span> </span>

  </a> </li> <li>

  <a href="tampilpenyakit.php"> <img src="foto/1.jpg" alt=""/>

  <span class="sdt_active"></span> <span class="sdt_wrap">

  <span class="sdt_link">Daftar Penyakit</span>

  </span> </a>

  </li> </ul>

  </div> <script type="text/javascript" src=" jquery/jquery.min.js"></script>

  <script type="text/javascript" src="jquery/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() { $('#sdt_menu > li').bind('mouseenter',function(){ var $elem = $(this);

  $elem.find('img') .stop(true) .animate({

  'width':'170px', 'height':'130px', 'left':'0px'

  },400,'easeOutBack') .andSelf() .find('.sdt_wrap')

  .stop(true) .animate({'top':'170px'},500,'easeOutBack')

  .andSelf() .find('.sdt_active')

  .stop(true) .animate({'height':'140px'},300,function(){ var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length){ var left = '170px'; if($elem.parent().children().length == $elem.index()+1) left = '-170px';

  $sub_menu.show().animate({'left':left},200); } });

  }).bind('mouseleave',function(){ var $elem = $(this); var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length)

  $sub_menu.hide().css('left','0px'); $elem.find('.sdt_active') .stop(true)

  .animate({'height':'0px'},300) .andSelf().find('img') .stop(true) .animate({

  'width':'0px', 'height':'0px', 'left':'85px'},400)

  .andSelf() .find('.sdt_wrap') .stop(true) .animate({'top':'25px'},500); }); });

  </script> <div id="tampilpenyakit"> <header> Daftar Penyakit </header> <table border="0" cellspacing="1"><?php echo"<tr>

  <th>NO</th> <th>NAMA PENYAKIT</th> <th>KETERANGAN</th> </tr>"; include 'conn.php';

  $tampil = mysql_query("SELECT * FROM penyakit");$a=1; while ($row = mysql_fetch_array($tampil)) { ?> <tbody> <tr> <td style='width:35px;'><?php echo $a.'. '; ?></td> <td id="namapenyakit" style='width:450px;'> <a href="tampilkriteriapenyakit2.php?id_penyakit=<?php echo $row['id']; ?>"><?php echo $row['nama_penyakit']; ?></a></td> <td> <a href="coba.php?id_penyakit=<?php echo $row['id']; ?>">lihat</a></td></tr></tbody><?php $a=$a+1; } ?</table></div></body><

  3. style.css

  ul.sdt_menu{ margin:0; padding:0; list-style: none; font-family:"Myriad Pro", "Trebuchet MS", sans-serif; font-size:14px; width:1020px;

  } ul.sdt_menu a{ text-decoration:none; outline:none;

  } ul.sdt_menu li{ float:left; width:170px; height:85px; position:relative; cursor:pointer;

  } ul.sdt_menu li > a{ position:absolute; top:0px; left:0px; width:170px; height:85px; z-index:12; background:transparent url(../images/overlay.png) no-repeat bottom right;

  • moz-box-shadow:0px 0px 2px #000 inset;
  • webkit-box-shadow:0px 0px 2px #000 inset; box-shadow:0px 0px 2px #000 inset;

  } ul.sdt_menu li a img{ border:none; position:absolute; width:0px; height:0px; bottom:0px; left:85px; z-index:100;

  • moz-box-shadow:0px 0px 4px #000;
  • webkit-box-shadow:0px 0px 4px #000; box-shadow:0px 0px 4px #000;

  } ul.sdt_menu li span.sdt_wrap{ position:absolute; top:25px; left:0px; width:170px; height:60px; z-index:15;

  } ul.sdt_menu li span.sdt_active{ position:absolute; background:#111; top:85px; width:170px; height:10px; left:0px; z-index:14;

  • moz-box-shadow:0px 0px 4px #000 inset;
  • webkit-box-shadow:0px 0px 4px #000 inset; box-shadow:0px 0px 4px #000 inset;

  } ul.sdt_menu li span span.sdt_link, ul.sdt_menu li span span.sdt_descr, ul.sdt_menu li div.sdt_box a{ margin-left:15px; text-transform:uppercase; text-shadow:1px 1px 1px #000;

  } ul.sdt_menu li span span.sdt_link{ color:#fff; font-size:24px; float:left; clear:both;

  } ul.sdt_menu li span span.sdt_descr{ color:#0B75AF; float:left; clear:both; width:155px; /*For dumbass IE7*/ font-size:10px; letter-spacing:1px;

  } ul.sdt_menu li div.sdt_box{ display:block; position:absolute; width:170px; overflow:hidden; height:170px; top:85px; left:0px; display:none; background:#000;

  } ul.sdt_menu li div.sdt_box a{ float:left; clear:both; line-height:30px; color:#0B75AF;

  } ul.sdt_menu li div.sdt_box a:first-child{ margin-top:15px;

  } ul.sdt_menu li div.sdt_box a:hover{ color:#fff;

  }

  @import url('demo.css'); @import url('font-awesome.css');

  • ,
  • :after,
  • :before {
    • webkit-box-sizing: border-box;
    • moz-box-sizing: border-box;
    • ms-box-sizing: border-box;
    • o-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } .clearfix:after { content: ""; display: table; clear: both; } .form-3 { font-family: 'Ubuntu', 'Lato', sans-serif; font-weight: 400; width: 300px; position: relative; margin: 130px 0px 0px 300px; padding: 10px; overflow: hidden; /* Styles */

  background: #111; border-radius: 0.4em; border: 1px solid #191919; box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.08), 0 16px 10px -8px rgba(0, 0, 0, 0.6); } .form-3 label { /* Size and position */ width: 50%; float: left; padding-top: 9px; /* Styles */ color: #ddd; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 1px 0 #000; text-indent: 10px; font-weight: 700; cursor: pointer; } .form-3 input[type=text], .form-3 input[type=password] { /* Size and position */ width: 50%; float: left; padding: 8px 5px; margin-bottom: 10px; font-size: 12px; /* Styles */ background: #1f2124; /* Fallback */ background: -moz-linear-gradient(#1f2124, #27292c); background: -ms-linear-gradient(#1f2124, #27292c); background: -o-linear-gradient(#1f2124, #27292c); background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c)); background: -webkit-linear-gradient(#1f2124, #27292c); background: linear-gradient(#1f2124, #27292c); border: 1px solid #000; box-shadow: 0 1px 0 rgba(255,255,255,0.1); border-radius: 3px; /* Font styles */ font-family: 'Ubuntu', 'Lato', sans-serif; color: #fff; } .form-3 input[type=text]:hover, .form-3 input[type=password]:hover, .form-3 label:hover ~ input[type=text], .form-3 label:hover ~ input[type=password] { background: #27292c; }

  .form-3 input[type=text]:focus, .form-3 input[type=password]:focus { box-shadow: inset 0 0 2px #000; background: #494d54; border-color: #51cbee; outline: none; /* Remove Chrome outline */ } .form-3 p:nth-child(3), .form-3 p:nth-child(4) { float: left; width: 50%; } .form-3 label[for=remember] { width: auto; float: none; display: inline-block; text-transform: capitalize; font-size: 11px; font-weight: 400; letter-spacing: 0px; text-indent: 2px; } .form-3 input[type=checkbox] { margin-left: 10px; vertical-align: middle; } .form-3 input[type=submit] { /* Width and position */ width: 100%; padding: 8px 5px; /* Styles */ border: 1px solid #0273dd; /* Fallback */ border: 1px solid rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 10px 10px rgba(255,255,255,0.1); border-radius: 3px; background: #38a6f0; cursor:pointer; /* Font styles */ font-family: 'Ubuntu', 'Lato', sans-serif; color: white; font-weight: 700; font-size: 15px; text-shadow: 0 -1px 0 rgba(0,0,0,0.8); } .form-3 input[type=submit]:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); } .form-3 input[type=submit]:active { background: #287db5; box-shadow: inset 0 0 3px rgba(0,0,0,0.6); border-color: #000; /* Fallback */ border-color: rgba(0,0,0,0.9); } .no-boxshadow .form-3 input[type=submit]:hover { background: #2a92d8; } .form-3:after { /* Size and position */ content: ""; height: 1px; width: 33%; position: absolute; left: 20%; top: 0; /* Styles */ background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent); background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent); background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent); background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color- stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent)); background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent); background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent); } .form-3:before { /* Size and position */

content: ""; width: 8px; height: 5px; position: absolute; left: 34%; top: -7px; /* Styles */ border-radius: 50%; box-shadow: 0 0 6px 4px #fff; } .form-3 p:nth-child(1):before{ /* Size and position */ content:""; width:250px; height:100px; position:absolute; top:0; left:45px; /* Styles */

  • webkit-transform: rotate(75deg);
  • moz-transform: rotate(75deg);
  • ms-transform: rotate(75deg);
  • o-transform: rotate(75deg); transform: rotate(75deg); background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0)); background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0)); background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0)); background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0)); background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0)); pointer-events:none; } no-pointerevents .form-3 p:nth-child(1):before { display: none; }

  5. search.php

  <?php include "db.php"; $nama_penyakit=$_POST["nama_penyakit"]; $result=mysql_query("SELECT * FROM penyakit where nama_penyakit like '%$nama_penyakit%' ");

  $found=mysql_num_rows($result); if($found>0){ while($row=mysql_fetch_array($result)){ echo "<li>$row[nama_penyakit]</br> <a href=\"$row[link]\">$row[link]</a></li>"; } }else{ echo "<li>Tidak ada artikel yang ditemukan <li>"; } ?>

  6. admin.php

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html ns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="nicedit/nicEdit.js" type="text/javascript"></script> <script type="text/javascript"> bkLib.onDomLoaded(function(){ nicEditors.allTextAreas(({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','im age']})) }); </script> </head>

  <div class="header"> <header>Admin</header>

  </div> <div class="container">

  <div class="content1"> <div class="menu">

  <ul> <li><a href="?menu=penyakit">Penyakit</a></li> <li><a href="?menu=tips">Gejala</a></li> <li><a href="?menu=sehat">Obat</a></li> <li><a href="?menu=penyakit">Penyebab</a></li> <li><a href="?menu=logout">Penanganan</a></li>

  <li><a href="?menu=logout">logout</a></li> </ul>

  </div>

  </div> <div class="content2"> <?php include'../conn.php'; ?> <?php include'jump.php'; ?> </div>

  </div> <div class="footer"> </div>

  <body> </body> </html>

  7. login.php

  <html> <head> <STYLE TYPE = "text/css">

  • { margin:1px; pedding:0px; } #wrapper { width:100%; height:auto; margin:0; background : transparant ;

  } #container { width:100%; height:139%; margin:0 auto; background: #563c55 url(images/wood_pattern.jpg) ;

  } #topbar { width:1316px; display:block; height:210px; background : transparant ; border:1px 0px 0px 0px; solid; padding:10px;

  } div.spacer1 { clear:both; height:10px; display:block;

  } #navbar { width:auto; display:block; height:60px; background: green; border:0px solid;

  } #main { width:auto; height:500px; display:block; background : transparant ;

  } #column_left { width:70%; height:480px; margin:60px 0px 0px 180px; float:left; background: #563c55 url(images/blurred.jpg) no-repeat center top ; border:1px solid; border-radius:12px; box-shadow: 10px 5px 5px 5px #888888;

  } #kolom_bawah { width:100%; display:block; height:50px; margin:60px 0px 0px 0px; background : transparant ;

  } #footer { width:100%; display:block; height:50px; margin:10px 0px 0px 0px; background : transparant ;

  } </STYLE> </head> <body> <div id="wrapper">

  <div id="container"> <div id="topbar">

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" /> <meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>

  <link rel="shortcut icon" href="../favicon.ico" type="image/x- icon"/> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> <style>

  { font-family:Arial; } span.reference{ position:fixed; left:10px; bottom:10px; font-size:12px;

  } ul.sdt_menu{ margin-top:50px;

  } h1.title{ text-indent:-9000px; background:transparent url(title.png) no-repeat top left; width:1314px; height:69px; }

  </style> <div class="content">

  <ul id="sdt_menu" class="sdt_menu"> <li>

  <a href="index.php"> <img src="foto/2.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap">

  <span class="sdt_link">Home</span> </span>

  </a> </li> <li>

  <a href="tampilpenyakit.php"> <img src="foto/1.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap">

  <span class="sdt_link">Daftar Penyakit</span> </span>

  </a> </li>

  </ul> </div>

  <!-- The JavaScript --> <script type="text/javascript" src=" jquery/jquery.min.js"></script>

  <script type="text/javascript" src="jquery/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() {

  /**

  • for each menu element, on mouseenter,
  • we enlarge the image, and show both sdt_active span and
  • sdt_wrap span. If the element has a sub menu (sdt_box),
  • then we slide it - if the element is the last one in the menu
  • we slide it to the left, otherwise to the right
  • / $('#sdt_menu > li').bind('mouseenter',function(){ var $elem = $(this); $elem.find('img')

  .stop(true) .animate({

  'width':'170px', 'height':'130px', 'left':'0px'

  },400,'easeOutBack') .andSelf() .find('.sdt_wrap')

  .stop(true) .animate({'top':'170px'},500,'easeOutBack')

  .andSelf() .find('.sdt_active')

  .stop(true) .animate({'height':'140px'},300,function(){ var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length){ var left = '170px'; if($elem.parent().children().length == $elem.index()+1) left = '-170px';

  $sub_menu.show().animate({'left':left},200); }

  }); }).bind('mouseleave',function(){ var $elem = $(this); var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length)

  $sub_menu.hide().css('left','0px'); $elem.find('.sdt_active')

  .stop(true) .animate({'height':'0px'},300) .andSelf().find('img') .stop(true) .animate({

  'width':'0px', 'height':'0px', 'left':'85px'},400)

  .andSelf() .find('.sdt_wrap') .stop(true) .animate({'top':'25px'},500);

  }); });

  </script> </div> <div class="spacer1"></div> <div id="navbar"> <div class="container"> </div> <div id="main"> <div id="column_left">

  <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="viewport" content="width=device-width, initial- scale=1.0"> <meta name="description" content="Custom Login Form Styling with CSS3" /> <meta name="keywords" content="css3, login, form, custom, input, submit, button, html5, placeholder" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/style1.css" />

  <script src="jquery/modernizr.custom.63321.js"></script> <style> body {

  • webkit-background-size: cover;
  • moz-background-size: cover; background-size: cover;

  } .container > header h1, .container > header h2 { color: #fff; text-shadow: 0 3px 1px rgba(0,0,0,0.7);

  } </style>

  </head> <body> <div class="container">

  <section class="main"> <form class="form-3" method="POST" action="proseslogin.php"> <p class="clearfix"> <label for="login">Username</label> <input type="text" name="username" size="20" placeholder="Username"> </p> <p class="clearfix"> <label for="password">Password</label> <input type="password" name="password" size="20" placeholder="Password"> </p> <p class="clearfix"> <input type="submit" name="submit" value="Sign in"> </p> </form>

  </section> </div> </body> </div> <div id="main"> </div> </div>

  8 . Index.css

  • { margin: 0px; padding: 0px; } body{ background: #563c55 url(images/wood_pattern.jpg) } #wraper{ width: auto; height: auto; float: left; background: taransparent; } #formcari{

  padding-top:260px; padding-left:300px; } #formcari #textfield{ height: 50px; width: 400px; font-size: 20px; } #formcari #button{ height: 50px; width: 100px; font-size: 20px; } #tampilpenyakit{ width: 70%; margin: 60px 0px 0px 180px; float: left; background: #1c9505; border-radius: 12px; box-shadow: 5px 5px 5px 5px #74956e; } #tampilpenyakit table{ padding-top: 50px; padding-left: 20%; font-size: 20px; font-family: arial; margin-bottom:100px; } #tampilpenyakit table td{ margin-bottom:100px; border-bottom:black solid 2px; font-color:white;

  } #tampilpenyakit #pesan{ margin-left: 50px; margin-top: 50px; margin-bottom: 20px; font-size: 30px; } #tampilpenyakit input{ margin-left: 10px; height: 50px; width: 300px; font-size: 20px; } #tampilpenyakit #namapenyakit{ font-size: 20px; margin-left: 10px;

  } #wrapertampilkriteria{ background-color: #cfcfcf; float:left; width: 100%; font-family: Adobe Fan Heiti Std B; }

  #gejala{ background-color: #37d5d5; width: 400px; box-shadow: 5px 5px 5px 5px #74956e; margin-left: 30%; } #gejala #headgejala{ font-size: 20px; } #penyebab{ background-color: #37d5d5; width: 400px; box-shadow: 5px 5px 5px 5px #74956e; margin-left: 30%; } #penyebab #headpenyebab{ font-size: 20px; } #penyebab{ background-color: #37d5d5; width: 400px; box-shadow: 5px 5px 5px 5px #74956e; margin-left: 30%; } #penyebab #headpenyebab{ font-size: 20px; } #penanganan{ background-color: #37d5d5; width: 400px; box-shadow: 5px 5px 5px 5px #74956e; margin-left: 30%; } #penanganan #headpenanganan{ font-size: 20px; } #obat{ background-color: #37d5d5; width: 400px; box-shadow: 5px 5px 5px 5px #74956e; margin-left: 30%; } #obat #headobat{ font-size: 20px;

  } #tampilpenyakit a{ text-decoration: none; color: #ffffff; } #tampilpenyakit header{ font-size:40px; font-family:arial; margin-left:100px; margin-top:20px;

  } #content{ width: 100px; height: 60px; }