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

DIDIKAN 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 : Ali Syariati Nomor Stambuk : 1124061115 Judul Tugas Akhir : Perancangan Sistem Informasi Tips dan Saran

  Keluarga Sehat Berbasis Web Dosen Pembimbing : Drs. Rosman Siregar 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 Drs. Rosman Siregar M,Si NIP.19600201 198503 2 002 NIP. 196101071986011001

  

LISTING PROGRAM

LAMPIRAN

Index.php

  <!DOCTYPE html> <html lang="en" class="no-js">

  <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial- scale=1"> <title>Keluarga Sehat</title> <meta name="description" content="Inspiration for Article Intro

  Effects" /> <meta name="keywords" content="title, header, effect, scroll, inspiration, medium, web design" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/component.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

  </head> <body class="demo-2">

  <div id="container" class="container intro-effect-fadeout"> <!-- Top Navigation --> <div class="codrops-top clearfix">

  <span class="right"><a class="codrops-icon codrops-icon-drop" href="home.php?m=home"><span>Masuk ke Halaman Utama</span></a></span>

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

  <div class="bg-img"><img src="image/_t.jpg" alt="Background Image" /></div> <div class="title"> </br></br></br></br>

  <h1>Keluarga Sehat Alami</h1> <p class="subline">Inspiration for Article

  Intro Effects</p> <p>by <strong>Mark Satorini</strong>

  — Posted in <strong>Animals</strong> on <strong>May 21, 2014</strong></p>

  </div> </header> <button class="trigger" data-info="About

  Us"><span></span></button> <article class="content">

  <div> <p>Cara menyikapi sakit kini telah sangat berubah. Masyarakat kini mengharapkan semua perawatan, bahkan atas kelainan yang paling berat pun, harus berhasil. Pada umumnya masyarakat telah lebih memahami makna kesehatan. Ketika diri atau anak mereka sakit, mereka lebih ingin mengetahui penyebab gejala yang mereka alami dan seberapa cepat mereka akan sembuh.</p>

  <p>Sementara itu, kini kita juga semakin mandiri. Kebanyakan kita sadar berbagai penyakit ringan biasa, seprti pilek atau diare, tidak memerlukan bantuan ahli kesehatan atau pengobatan yang rumit. Gangguan semacam itu akan sembuh dengan sendirinya, bahkan walau tanpa mendapatkan pengobatan pun.</p>

  <p>Masalah bagi mereka yang tidak terlatih secara medis adalah bahwa keluhan semacam sakit kepala ataupun batuk bisa merupakan petunjuk awal adanya sakit yang serius. Kejadian yang paling membuat para orang tua waswas atau merasa tak berdaya adalah sakit mendadak menimpa anak-anak , terutama menimpa anak yang masih belum bisa menjelaskan keluhannya. Sejauh mana seseorang cukup aman untuk mengatasi sendiri sebuah masalah? Kapan kita harus segera menelpon dokter atau meminta bantuan layanan kesehatan? kapan kita harus segera membawa si sakit ke unit gawat darurat sebuah rumah skit?</p>

  <p>Terkadang kita menganggap sepele terhadap penyakit ringan yang mungkin adalah penyakit yang sangat serius. Untuk itulah web ini akan memberikan informasi tentang beberapa tips sehat yang dapa membuat anda menjadi lebih sehat dan terhindar dari penyakit dan berbagai informasi tentang penyakit agar anda lebih mngetahui gejala dan cara menghadapi penyakit tersebut, Serta obat herbal yang aman di konsumsi untuk tubuh dan mempunyai efek yang bagus.</p>

  <p><strong>Semoga Bermanfaat</strong></p>

  </div> </article> <section class="related">

  <span class="right"><a class="codrops-icon codrops-icon-drop" href="home.php?m=home"><span>Masuk ke Halaman Utama</span></a></span>

  <p>Sehat bukan berarti tidak akan terkena penyakit</p> <div>Lebih Baik Mencegah Dari pada

  Mengobati</h4></div> <div><h4>Terimakasih Telah Mengunjungi Web ini</h4></div>

  </section> </div><!-- /container --> <script src="js/classie.js"></script> <script>

  (function() { // detect if IE : from http://stackoverflow.com/a/16657946 var ie = (function(){ var undef,rv = -1; // Return value assumes failure. var ua = window.navigator.userAgent; var msie = ua.indexOf('MSIE '); var trident = ua.indexOf('Trident/'); if (msie > 0) {

  // IE 10 or older => return version number rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);

  } else if (trident > 0) { // IE 11 (or newer) => return version number var rvNum = ua.indexOf('rv:'); rv = parseInt(ua.substring(rvNum +

  3, ua.indexOf('.', rvNum)), 10); } return ((rv > -1) ? rv : undef);

  }()); // disable/enable scroll (mousewheel and keys) from http://stackoverflow.com/a/4770179 // left: 37, up: 38, right: 39, down: 40, // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 var keys = [32, 37, 38, 39, 40], wheelIter = 0; function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false;

  } function keydown(e) { for (var i = keys.length; i--;) { if (e.keyCode === keys[i]) { preventDefault(e); return;

  } }

  } function touchmove(e) { preventDefault(e);

  } function wheel(e) { // for IE //if( ie ) {

  //preventDefault(e); //}

  } function disable_scroll() { window.onmousewheel = document.onmousewheel = wheel; document.onkeydown = keydown; document.body.ontouchmove = touchmove;

  } function enable_scroll() { window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove

  = null; } var docElem = window.document.documentElement, scrollVal, isRevealed, noscroll, isAnimating, container = document.getElementById(

  'container' ), trigger = container.querySelector( 'button.trigger' ); function scrollY() { return window.pageYOffset || docElem.scrollTop;

  } function scrollPage() { scrollVal = scrollY(); if( noscroll && !ie ) { if( scrollVal < 0 ) return false; // keep it that way window.scrollTo( 0, 0 );

  } if( classie.has( container, 'notrans' ) ) { classie.remove( container, 'notrans' ); return false;

  } if( isAnimating ) { return false;

  } if( scrollVal <= 0 && isRevealed ) { toggle(0);

  } else if( scrollVal > 0 && !isRevealed ){ toggle(1);

  } } function toggle( reveal ) { isAnimating = true; if( reveal ) { classie.add( container, 'modify' );

  } else { noscroll = true; disable_scroll(); classie.remove( container, 'modify' );

  } // simulating the end of the transition: setTimeout( function() { isRevealed = !isRevealed; isAnimating = false; if( reveal ) { noscroll = false; enable_scroll();

  } }, 600 );

  }

  // refreshing the page... var pageScroll = scrollY(); noscroll = pageScroll === 0; disable_scroll(); if( pageScroll ) { isRevealed = true; classie.add( container, 'notrans' ); classie.add( container, 'modify' );

  } window.addEventListener( 'scroll', scrollPage ); trigger.addEventListener( 'click', function() { toggle( 'reveal' ); } );

  })(); </script>

  </body> </html>

Home.php

  <html> <header>

  <link href="main.css" rel="stylesheet" type="text/css" /> <meta charset="UTF-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Sliding Image Panels with CSS3" /> <meta name="keywords" content="sliding, background-image, css3, panel, images, slider" /> <meta name="author" content="Codrops" /> <link rel="stylesheet" type="text/css" href="demo.css" />

  </header> <body>

  <div id="header"> </div> <div id="menu">

  <nav class="codrops-demos"> <a href="home.php?m=home">Home</a> <a href="home.php?m=tips">Tips

  Sehat</a> <a href="home.php?m=penyakit">Jenis Penyakit</a> <a href="home.php?m=obat">Obat

  Herbal</a> </nav>

  </div> <div id="container">

  <?php include "koneksi.php"; ?> <div id="wrapper">

  <div id="content"> <?php include'jump.php' ?>

  </div> <div id="content2">

  <p>Artikel Terbaru</p></br></br> <?php $sql = mysql_query("SELECT * FROM home ORDER BY tanggal DESC limit 10") or die ("Query gagal dengan error:

  ".mysql_error()); while($data=mysql_fetch_array($sql)){echo"<li><a href=?m=home&act=tampil&id=$data[id]&kategori=$data[kategori]>$data[judul ]</a></li>";}

  ?> </div>

  <div id="content2"> <p><a><strong>9 Tips Untuk Hidup Sehat

  Berkualitas</strong></a></br> </p>

  <p> </p> <p><em>1.Segelas air putih di pagi hari</em>. </p> <p><em>2.Tidur yang Cukup</em>.</p> <p><em>3.Peregangan di pagi hari</em>.</p> <p><em>4.Biasakan sarapan di pagi hari</em>.</p> <p><em>5.Sempatkan waktu untuk berjalan kaki setiap hari.</em></p> <p><em>6.Lakukan interaksi sosial.</em></p> <p><em>7.Komsumsi makanan yang Alami

  ( tanpa bahan pengawet )</em>.</p>

  <p><em>8.Cari Kegiatan baru</em></p> <p><em>9.Cintai Hidup Anda</em>.</p>

  </div> </div>

  </div> <div id="footer">

  <p align="center"><a href="login.php">admin</a></p></br><p align="center">© Keluarga Sehat</p>

  </div> </body>

  </html>

Home1.php

  <?php switch($_GET[act]){ default: echo'<section class="cr-container">

  <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/> <label for="select-img-1" class="cr-label-img-

  1">1</label> <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" /> <label for="select-img-2" class="cr-label-img-

  2">2</label> <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" /> <label for="select-img-3" class="cr-label-img-

  3">3</label> <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" /> <label for="select-img-4" class="cr-label-img-

  4">4</label> <div class="clr"></div> <div class="cr-bgimg">

  <div> <span>Slice 1 - Image 1</span> <span>Slice 1 - Image 2</span> <span>Slice 1 - Image 3</span>

  <span>Slice 1 - Image 4</span> </div> <div>

  <span>Slice 2 - Image 1</span> <span>Slice 2 - Image 2</span> <span>Slice 2 - Image 3</span> <span>Slice 2 - Image 4</span>

  </div> <div>

  <span>Slice 3 - Image 1</span> <span>Slice 3 - Image 2</span> <span>Slice 3 - Image 3</span> <span>Slice 3 - Image 4</span>

  </div> <div>

  <span>Slice 4 - Image 1</span> <span>Slice 4 - Image 2</span> <span>Slice 4 - Image 3</span> <span>Slice 4 - Image 4</span>

  </div> </div> <div class="cr-titles">

  <h3><span>Sehat</span><span>Bahagia Bersama Keluarga Tercinta</span></h3>

  <h3><span>Penyakit</span><span>Bila Dibiarkan Dapat Merenggut Yang Tercinta </span></h3>

  <h3><span>Herbal</span><span>Jauh Lebih Sehat Untuk Kita</span></h3>

  <h3><span>Melayani</span><span>Kami Siap Memberi Informasi Kesehatan Untuk Anda</span></h3>

  </div> </section>';

  $batas=4; $halaman=$_GET['halaman']; if(empty($halaman)) { $posisi=0; $halaman=1; } else { $posisi=($halaman-1)*$batas; }

  $sql = mysql_query("SELECT * FROM home ORDER BY tanggal DESC limit $posisi,$batas") or die ("Query gagal dengan error: ".mysql_error()); while($data=mysql_fetch_array($sql)){ echo'<div class="KetProd"> <img class="GambarKetProd" src="image/'; echo $data['image']; echo'">'; echo"<h1 class='Judul'>"; echo

  $data['judul']; echo'</h1></br>'; echo$data['tanggal']; echo'</br>'; echo $data['keterangan']; echo"<a>. . .&nbsp</a><a href=?m=home&act=tampil&id=$data[id]&kategori=$data[kategori]><strong>La njut Baca</strong></a></div>

  ";} $tampil2=mysql_query("select * from home"); $jmldata=mysql_num_rows($tampil2); $jmlhalaman=ceil($jmldata/$batas); echo'</br></br></br></br>'; echo'<a>halaman : </a>'; for($i;$i<=$jmlhalaman;$i++) if($i!=$halaman) { echo "<a href=home.php?m=home&halaman=$i> $i </a>"; } else { echo "<b> $i </b> "; } break; case"tampil": $id=$_GET[id]; $kategori=$_GET[kategori]; if($kategori=='herbal'){$tempat='obat';} elseif($kategori=='penyakit'){$tempat='penyakit';} elseif($kategori=='sehat'){$tempat='tips';}

  $sql = mysql_query("SELECT * FROM $kategori where id='$id'") or die ("Query gagal dengan error: ".mysql_error()); while($data=mysql_fetch_array($sql)){ echo'<div class="KetProd">

  <img class="GambarKetProd" src="image/'; echo $data['image']; echo'">'; echo"<h1 class='Judul'>"; echo

  $data['judul']; echo'</h1></br>'; echo$data['tanggal']; echo'</br>'; echo $data['keterangan']; echo"</br></br></br><a href='home.php?m=home'><strong>Kembali</strong></a></div>

  ";} ?> <div id="publishcomment"> <?php $commentquery = mysql_query("SELECT * FROM komen_$kategori WHERE id_judul='$id' ORDER BY id DESC") or die(mysql_error()); $commentNum = mysql_num_rows($commentquery); echo "<h4>" . "Current comment(s)..." . "</h4>"; echo "<b>" . $commentNum . " comment(s) so far. Leave a comment..." . "</b>" . "<br />" . "<br />"; echo "<hr>"; while($row = mysql_fetch_array($commentquery)) { echo "<b>" . $row['nama'] . "</b>" . " " . " | " . " " . "<i>" .

  $row['date'] . "</i>" . "<br />" . "<br />" . $row['komentar'] . "<br />"; echo "<hr>"; } ?></div> <div id="comment"> <form name="submitcomment" method="post" action="submitcomment.php">Nama:<br> <input name="nama" type="text"><br> Email:<br><input name="email" type="text"><br> Komentar:<br><textarea name="komentar" rows="6" cols="50"></textarea><br> <input name="id_judul" value="<?php echo"$id";?>"; type="hidden"> <input name="judul" value="komen_<?php echo"$kategori";?>" type="hidden"> <input name="url" value="home.php?m=<?php echo"$tempat";?>&act=tampil&id=<?php echo"$id";?>" type="hidden"><br> <input name="tombol" value="Kirim" type="submit"></form></div> <?php break; } ?>

Demo.css

  @font-face { font-family: 'BebasNeueRegular'; src: url('fonts/BebasNeue-webfont.eot'); src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/BebasNeue-webfont.woff') format('woff'), url('fonts/BebasNeue-webfont.ttf') format('truetype'), url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; } /* CSS reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,block quote,th,td { margin:0; padding:0;

  } html,body { margin:0; padding:0; height: 100%;

  } table { border-collapse:collapse; border-spacing:0;

  } fieldset,img { border:0;

  } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal;

  } ol,ul { list-style:none;

  } caption,th { text-align:left;

  } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;

  } q:before,q:after { content:'';

  } abbr,acronym { border:0;

  } section, header{ display: block;

  } /* General Demo Style */ body{ font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD",

  Georgia, serif; background: #fff url(../images/bg.jpg) repeat top left; font-weight: 400; font-size: 15px; color: #3a2127; overflow-y: scroll;

  } a{ color: #333; text-decoration: none;

  } .container{ width: 100%; height: 100%; position: relative; text-align: center;

  } .clr{ clear: both; } .container > header{ padding: 20px 30px 10px 30px; margin: 0px 20px 10px 20px; position: relative; display: block; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); text-align: center; } .container > header h1{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 35px; line-height: 35px; position: relative; font-weight: 400; color: rgba(26,89,120,0.9); text-shadow: 1px 1px 1px rgba(0,0,0,0.1); padding: 0px 0px 5px 0px; } .container > header h1 span{ color: #7cbcd6; text-shadow: 0px 1px 1px rgba(255,255,255,0.8);

  } .container > header h2{ font-size: 16px; font-style: italic; color: #2d6277; text-shadow: 0px 1px 1px rgba(255,255,255,0.8);

  } /* Header Style */ .codrops-top{ line-height: 24px; font-size: 11px; background: rgba(255, 255, 255, 0.4); text-transform: uppercase; z-index: 9999; position: relative; box-shadow: 1px 0px 2px rgba(0,0,0,0.2);

  } .codrops-top a{ padding: 0px 10px; letter-spacing: 1px; color: #333; text-shadow: 0px 1px 1px #fff; display: block; float: left;

  } .codrops-top a:hover{ background: #fff; } .codrops-top span.right{ float: right; } .codrops-top span.right a{ float: left; display: block;

  } p.codrops-demos{ text-align:center; display: block; padding: 14px;

  } p.codrops-demos a, p.codrops-demos a.current-demo, p.codrops-demos a.current-demo:hover{ display: inline-block; font-size: 11px; font-style: italic; width: 60px; height: 60px; margin: 0px 3px; line-height: 60px; border-radius: 50%; font-weight: 800; box-shadow: 1px 1px 1px rgba(0,0,0,0.05) inset; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); background: rgba(104,171,194,0.5);

  } p.codrops-demos a:hover{ background: #4fa2c4; } p.codrops-demos a.current-demo, p.codrops-demos a.current-demo:hover{ color: rgba(104,171,194,1); background: rgba(255,255,255,0.9); box-shadow: 0px 1px 1px rgba(0,0,0,0.1);

  }

Jump.php

  <?php error_reporting(0); $index=$_GET['m']; if($index=='home'){ include('home1.php');

  } else if($index=='penyakit'){ include('penyakit.php');

  } else if($index=='tips'){ include('tips.php');

  } else if($index=='obat'){ include('obat.php');

  } else if($index=='faq'){ include('faq.php');

  } else{ echo"hahahaa"; }

  ?>

Koneksi.php

  <?php $host="localhost"; $user="root"; $password=""; $database="ta"; $koneksi=mysql_connect($host,$user,$password); mysql_select_db($database); ?>

Login.php

  <html> <head> <title></title> </head> <body> <p> </p> <p> </p> <p> </p> <form action="loginpriksa.php" method="post"> <table align="center" width="284"> <tr> <th colspan="2">Admin Keluarga Sehat Online</th> </tr> <tr> <td>User name</td> <td><input type="text" name="username" size="20"></td> </tr> <tr> <td>Password</td> <td><input type="password" name="password" size="20"></td> </tr> <tr> <td> </td> <td><input type="submit" name="Login" value="Login"></td> </tr> </table>

  </form> </body> </html>

Loginperiksa.php

  <?php session_start(); include "koneksi.php"; $username=$_POST['username']; $password=$_POST['password']; $query=mysql_query("select * from user where id='$username' and pass='$password'"); $cek=mysql_num_rows($query); if($cek){ $_SESSION['username']=$username; header('location: admin/admin.php'); } else{ echo"Anda gagal login. silahkan "; } ?> <a href="login.php">Login kembali</a>

Logout.php

  <?php session_start(); $username=$_SESSION["username"]; unset($_SESSION["username"]); header('location: ../home.php'); ?>

Main.css

  body{ background-color: white; } #header{ width: 100%; height: 300px; float: left; background: url("head.jpg") no-repeat; background-color: white; } #menu{ width: 76%; height: 41px; float: left; padding-left: 24%; background-color: white; font-size: 30px; border-bottom: 2px solid #cf4a5c; } #container{ width: 80%; margin: auto; } #wrapper{ width: 100%; height: auto; float: left; } #content{ width: 70%; height: auto; float: left; margin:10px; padding: 20px 10px 10px 20px; background-color: white; box-shadow: 0px 0px 15px #000; border-radius: 10px;

  } #content2{ width: 23%; height: auto; float: left; margin-top: 10px; padding: 10px 10px 10px 10px; background-color: white; box-shadow: 0px 0px 15px #000; border-radius: 10px;

  } #footer{ width: 100%; height: 50px; float: left; background-color: white; border-top: 1px solid grey; }

  .codrops-demos { padding: 0 0 1em; position: relative;

  } .codrops-demos a { font-weight: 800; text-transform: uppercase; font-size: 0.6em; letter-spacing: 1px; padding: 0.3em 0; opacity: 0.7; margin: 0 0.5em; white-space: nowrap; color: #cf4a5c;

  } .codrops-demos a:hover, .codrops-demos a.current-demo { opacity: 1; color: #69606b;

  } .codrops-demos a.current-demo { border-bottom: 3px solid #cf4a5c; } .related { padding: 3em 0; text-align: center; font-size: 1.5em; position: relative;

  } .demo-5 .related { width: 60%; margin-left: 40%;

  } @media screen and (max-width: 40em) {

  .codrops-icon span { display: none; } .related { font-size: 80%; }

  } .Judul { font-size: 18px; font-weight: bold; margin: 0px; } .GambarKetProd { float: left; width: 80px; margin-right: 20px; padding: 3px 3px 3px 3px; border: 1px solid #CCC; } .produk { float: left; border: 1px solid #CCC; margin-top: 20px; margin-left: 20px; } .KetProd { background-color: #fff; width: 90%; height: auto; padding: 10px 10px 10px 10px; margin: 10px; box-shadow: 0px 0px 15px #000; }

  #comment { margin:20px 0 0 20px; border: 2px solid #848484; border-radius:20px;

  • moz-border-radius:20px; max-height: 90%; font-weight: bold; color: #606060; padding: 10px; width: 440px; background-color: #dcdcdc; } #publishcomment { border: 2px solid #848484; box-shadow: 12px 12px 7px #888888; margin: 30px 0 50px 20px; padding: 10px; max-height: 100%; color: #3d3d3d; width: 550px; font-size: 12px; line-height: 15px; } #publishcomment hr { color: #ccc; }

  #publishcomment a { color: #da5700; text-decoration: none; font-weight:normal; } #publishcomment a:link { font-weight: bold; } #publishcomment a:hover { text-decoration: underline; } .cr-container{ width: 600px; height: 400px; position: relative; margin: 0 auto; overflow: hidden; border: 20px solid #fff; box-shadow: 1px 1px 3px rgba(0,0,0,0.1);

  } .cr-container label{ font-style: italic; width: 150px; height: 30px; cursor: pointer; color: #fff; line-height: 32px; font-size: 24px; float:left; position: relative; margin-top:350px; z-index: 1000;

  } .cr-container label:before{ content:''; width: 34px; height: 34px; background: rgba(130,195,217,0.9); position: absolute; left: 50%; margin-left: -17px; border-radius: 50%; box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3); z-index:-1;

  } .cr-container label:after{ width: 1px; height: 400px; content: ''; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color- stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0)

  0%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); position: absolute; bottom: -20px; right: 0px;

  } .cr-container label.cr-label-img-4:after{ width: 0px;

  } .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1, .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2, .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3, .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{ color: #68abc2; } .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before, .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before, .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before, .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{ background: #fff; box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);

  } .cr-container input{ display: none; } .cr-bgimg{ width: 600px; height: 400px; position: absolute; left: 0px; top: 0px; z-index: 1;

  } .cr-bgimg{ background-repeat: no-repeat; background-position: 0 0;

  } .cr-bgimg div{ width: 150px; height: 100%; position: relative; float: left; overflow: hidden; background-repeat: no-repeat;

  } .cr-bgimg div span{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;

  • webkit-transform: scale(1.5);
  • moz-transform: scale(1.5);
  • o-transform: scale(1.5);
  • ms-transform: scale(1.5); transform: scale(1.5);
opacity: 0; z-index: 2; text-indent: -9000px;

  } .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(1){ background-image: url(image/Agar-Tubuh-Sehat1.jpg); } .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(2){ background-image: url(image/wanita-menangis.jpg); } .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(3){ background-image: url(image/152985_obat-obatan-herbal_663_382.jpg); } .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(4){ background-image: url(image/_t1.jpg); } .cr-bgimg div:nth-child(1) span{ background-position: 0px 0px; } .cr-bgimg div:nth-child(2) span{ background-position: -150px 0px; } .cr-bgimg div:nth-child(3) span{ background-position: -300px 0px; } .cr-bgimg div:nth-child(4) span{ background-position: -450px 0px; } .cr-container input:checked ~ .cr-bgimg div span{

  • webkit-animation: scaleOut 0.6s ease-in-out;
  • moz-animation: scaleOut 0.6s ease-in-out;
  • o-animation: scaleOut 0.6s ease-in-out;
  • ms-animation: scaleOut 0.6s ease-in-out; animation: scaleOut 0.6s ease-in-out;

  } @-webkit-keyframes scaleOut{

  0%{ -webkit-transform: scale(1); opacity: 1; } 100%{ -webkit-transform: scale(1.5); opacity: 0; }

  } @-moz-keyframes scaleOut{

  0%{ -moz-transform: scale(1); opacity: 1; } 100%{ -moz-transform: scale(1.5); opacity: 0; }

  } @-o-keyframes scaleOut{

  0%{ -o-transform: scale(1); opacity: 1; } 100%{ -o-transform: scale(1.5); opacity: 0; }

  } @-ms-keyframes scaleOut{

  0%{ -ms-transform: scale(1); opacity: 1; } 100%{ -ms-transform: scale(1.5); opacity: 0; }

  } @keyframes scaleOut{

  0%{ transform: scale(1); opacity: 1; } 100%{ transform: scale(1.5); opacity: 0; }

  } .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1), .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3), .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) {

  • webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in- out, z-index 0s linear 0.6s;
  • moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
  • o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z- index 0s linear 0.6s;
  • ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z- index 0s linear 0.6s; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
  • webkit-animation: none;
  • moz-animation: none;
  • o-animation: none;
  • ms-animation: none; animation: none; opacity: 1;
  • webkit-transform: scale(1);
  • moz-transform: scale(1);
  • o-transform: scale(1);
  • ms-transform: scale(1); transform: scale(1); z-index:10000;

  } .cr-titles h3{ color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1);

  } .cr-titles h3 span{ z-index: 10000; position: absolute; width: 100%; left: 0px; text-align: center; opacity: 0; top: 50%;

  } .cr-titles h3 span:nth-child(1){ left: 0px; font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 70px; letter-spacing: 7px; color: transparent; text-shadow: 0px 0px 10px #fff;

  • webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
  • moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
  • o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
  • ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;

  } .cr-titles h3 span:nth-child(2){ margin-top: 84px; letter-spacing: 0px; background: rgba(104,171,194,0.9); font-size: 14px; padding: 10px 0px; font-style: italic; font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD",

  Georgia, serif;

  • webkit-transition: opacity 0.8s ease-in-out;
  • moz-transition: opacity 0.8s ease-in-out;
  • o-transition: opacity 0.8s ease-in-out;
  • ms-transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out;

  } .cr-container input:checked ~ .cr-titles h3 span{ opacity: 0; text-shadow: 0px 0px 30px #fff;

  } .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth- child(1), .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth- child(1), .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth- child(1), .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth- child(1){ opacity: 1; text-shadow: 0px 0px 1px #fff;

  } .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth- child(2), .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth- child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth- child(2), .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth- child(2){ opacity: 1;

  } /* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */ @media screen and (max-width: 768px) {

  .cr-container input{ display: inline; width: 24%; margin-top: 350px; z-index: 1000; position: relative;

  } .cr-container label{ display: none; }

  }

Obat.php

  <?php switch($_GET[act]){ default: $batas=6;

  $halaman=$_GET['halaman']; if(empty($halaman)) { $posisi=0; $halaman=1; } else { $posisi=($halaman-1)*$batas; }

  $sql = mysql_query("SELECT * FROM home where kategori='herbal' ORDER BY id DESC limit $posisi,$batas") or die ("Query gagal dengan error: ".mysql_error()); while($data=mysql_fetch_array($sql)){ echo'<div class="KetProd"> <img class="GambarKetProd" src="image/'; echo $data['image']; echo'">'; echo"<h1 class='Judul'>"; echo

  $data['judul']; echo'</h1></br>'; echo$data['tanggal']; echo'</br>'; echo $data['keterangan']; echo"<a>. . .&nbsp</a><a href=?m=obat&act=tampil&id=$data[id]><strong>Lanjut Baca</strong></a></div>

  ";} $tampil2=mysql_query("SELECT * FROM home where kategori='herbal' ORDER BY id DESC"); $jmldata=mysql_num_rows($tampil2); $jmlhalaman=ceil($jmldata/$batas); echo'</br></br></br></br>'; echo'<a>halaman : </a>'; for($i;$i<=$jmlhalaman;$i++) if($i!=$halaman) { echo "<a href=home.php?m=obat&halaman=$i> $i </a>"; } else { echo "<b> $i </b> "; } break; case"tampil":

  $id=$_GET[id]; $sql = mysql_query("SELECT *

  FROM herbal where id='$id'") or die ("Query gagal dengan error: ".mysql_error()); while($data=mysql_fetch_array($sql)){ echo'<div class="KetProd"> <img class="GambarKetProd" src="image/'; echo $data['image']; echo'">'; echo"<h1 class='Judul'>"; echo

  $data['judul']; echo'</h1></br>'; echo$data['tanggal']; echo'</br>'; echo $data['keterangan']; echo"</br></br></br><a href='home.php?m=obat'><strong>Kembali</strong></a></div>

  ";}

  ?> <div id="publishcomment"> <?php $commentquery = mysql_query("SELECT * FROM komen_herbal WHERE id_judul='$id' ORDER BY id DESC") or die(mysql_error()); $commentNum = mysql_num_rows($commentquery); echo "<h4>" . "Current comment(s)..." . "</h4>"; echo "<b>" . $commentNum . " comment(s) so far. Leave a comment..." . "</b>" . "<br />" . "<br />"; echo "<hr>"; while($row = mysql_fetch_array($commentquery)) { echo "<b>" . $row['nama'] . "</b>" . " " . " | " . " " . "<i>" .

  $row['date'] . "</i>" . "<br />" . "<br />" . $row['komentar'] . "<br />"; echo "<hr>"; } ?></div> <div id="comment"> <form name="submitcomment" method="post" action="submitcomment.php">Nama:<br> <input name="nama" type="text"><br> Email:<br><input name="email" type="text"><br> Komentar:<br><textarea name="komentar" rows="6" cols="50"></textarea><br> <input name="id_judul" value="<?php echo"$id";?>"; type="hidden"> <input name="judul" value="komen_herbal" type="hidden"> <input name="url" value="home.php?m=obat&act=tampil&id=<?php echo"$id";?>" type="hidden"><br> <input name="tombol" value="Kirim" type="submit"></form></div> <?php break; } ?>

Penyakit.php

  <?php switch($_GET[act]){ default:

  $batas=6; $halaman=$_GET['halaman']; if(empty($halaman))

  { $posisi=0; $halaman=1; } else { $posisi=($halaman-1)*$batas; }

  $sql = mysql_query("SELECT * FROM home where kategori='penyakit' ORDER BY id DESC ") or die ("Query gagal dengan error: ".mysql_error()); while($data=mysql_fetch_array($sql)){ echo'<div class="KetProd">

  <img class="GambarKetProd" src="image/'; echo $data['image']; echo'">'; echo"<h1 class='Judul'>"; echo

  $data['judul']; echo'</h1></br>'; echo$data['tanggal']; echo'</br>'; echo $data['keterangan']; echo"<a>. . .&nbsp</a><a href=?m=penyakit&act=tampil&id=$data[id]><strong>Lanjut Baca</strong></a></div>

  ";} $tampil2=mysql_query("SELECT * FROM home where kategori='penyakit' ORDER BY id DESC"); $jmldata=mysql_num_rows($tampil2); $jmlhalaman=ceil($jmldata/$batas); echo'</br></br></br></br>'; echo'<a>halaman : </a>'; for($i;$i<=$jmlhalaman;$i++) if($i!=$halaman) { echo "<a href=home.php?m=obat&halaman=$i> $i </a>"; } else { echo "<b> $i </b> "; } break; case"tampil":

  $id=$_GET[id]; $sql = mysql_query("SELECT *

  FROM penyakit where id='$id'") or die ("Query gagal dengan error: ".mysql_error()); while($data=mysql_fetch_array($sql)){ echo'<div class="KetProd"> <img class="GambarKetProd" src="image/'; echo $data['image']; echo'">'; echo"<h1 class='Judul'>"; echo

  $data['judul']; echo'</h1></br>'; echo$data['tanggal']; echo'</br>'; echo $data['keterangan']; echo"</br></br></br><a href='javascript:history.go(-1)'><strong>Kembali</strong></a></div>

  ";} ?> <div id="publishcomment"> <?php $commentquery = mysql_query("SELECT * FROM komen_penyakit WHERE id_judul='$id' ORDER BY id DESC") or die(mysql_error()); $commentNum = mysql_num_rows($commentquery); echo "<h4>" . "Current comment(s)..." . "</h4>"; echo "<b>" . $commentNum . " comment(s) so far. Leave a comment..." . "</b>" . "<br />" . "<br />"; echo "<hr>"; while($row = mysql_fetch_array($commentquery)) { echo "<b>" . $row['nama'] . "</b>" . " " . " | " . " " . "<i>" .