KARTU BIMBINGAN TUGAS AKHIR MAHASISWA
LAMPIRAN
KEMENTERIAN PENDIDIKAN NASIONAL UNIVERSITAS SUMATERA UTARA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM Jln. Bioteknologi No. 1 Kampus USU Telp. (061) 8212050-8214920. Fax. (061) 8214290 Medan 20155 KARTU BIMBINGAN TUGAS AKHIR MAHASISWA
Nama : FERDINAN SIMARMATA Nomor Induk Mahasiswa : 102406052 Judul Tugas Akhir : SISTEM INFORMASI BERBASIS WEB DI SMA NEGERI 6 TANJUNG BALAI Dosen Pembimbing : Drs. ROSMAN SIREGAR, M.Si Tanggal Mulai Bimbingan : September 2013 Tanggal Selesai Bimbingan : Februari 2014
TANGGAL PEMBAHASAN ASISTENSI PARAF DOSEN KETERANGAN
No
BIMBINGAN MENGENAI BAB PEMBIMBING
1 ACC JUDUL/ PROPOSAL
2 BAB I
3 BAB II
4 BAB III
5 BAB IV
6 BAB V
7
8 UJI PROGRAM Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan mahasiswa telah selesai Diketahui, Disetujui,
Departemen Matematika FMIPA USU Pembimbing Utama/ Ketua, Penanggung Jawab Prof.Dr.Tulus,VordipL.Math.,M.Si. Drs. Rosman Siregar, M.Si. NIP: 19620901 198803 1 002 NIP : 196101071986011001
KEMENTERIAN PENDIDIKAN NASIONAL UNIVERSITAS SUMATERA UTARA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM Jln. Bioteknologi No. 1 Kampus USU Telp. (061) 8212050-8214920. Fax. (061) 8214290 Medan 20155 KARTU BIMBINGAN TUGAS AKHIR MAHASISWA
Nama : FERDINAN SIMARMATA Nomor Induk Mahasiswa : 102406052 Judul Tugas Akhir : SISTEM INFORMASI BERBASIS WEB DI SMA NEGERI 6 TANJUNG BALAI Dosen Pembimbing : Drs. ROSMAN SIREGAR Tanggal Mulai Bimbingan : September 2013 Tanggal Selesai Bimbingan : Desember 2013
TANGGAL PEMBAHASAN ASISTENSI PARAF DOSEN KETERANGAN
No
BIMBINGAN MENGENAI BAB PEMBIMBING
1
2
3
4
5
6
7
8 Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan mahasiswa telah selesai Diketahui, Disetujui,
Departemen Matematika FMIPA USU Pembimbing Utama/ Ketua, Penanggung Jawab Prof.Dr.Tulus,VordipL.Math.,M.Si. Drs. Rosman Siregar NIP: 19620901 198803 1 002 NIP : 196101071986011001
Hasil uji program tugas akhir
Yang bertanda tangan di bawah ini, menerangkan bahwa Mahasiswa Tugas Akhir
Program studi D3 Teknik Informatika: Nama : FERDINAN SIMARMATA N I M : 102406052 Program Studi : D3 TEKNIK INFORMATIKAJudul Tugas Akhir : SISTEM INFORMASI BERBASIS WEB DI SMA NEGERI
6 TANJUNGBALAI
Telah melaksanakan tes program Tugas Akhir Mahasiswa tersebut di atas pada
tanggal : , JANUARI 2014Dengan Hasil : SUKSES / GAGAL
Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran Ujian Meja
Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU
Medan Medan, Januari 2014Dosen Pembimbing Drs. Rosman Siregar, M.Si Nip. 19511227 198503 1 002
Koneksi.php
<?php mysql_connect("localhost","root","ferdinan"); mysql_select_db("sma6"); ?>
Sma6/index.php
<?php include "header.php"; ?> <div class="utama"> <?php include "slider.php";?> <?php include("koneksi.php"); ?> <div class="col-md-4"> <div class="todo"> <ul> <li class="todo-done"> <div class="todo-icon fui-list"></div> <div class="todo-content"> <h4 class="todo-name"> Pentas <strong>Seni</strong><strong></strong> </h4>
12 November 2013 </div> </li> <li class="todo-done"> <div class="todo-icon fui-list"></div> <div class="todo-content"> <h4 class="todo-name"> Pertandingan <strong>Olahraga</strong> </h4>
15 November 2013 </div> </li> <li class="todo-done"> <div class="todo-icon fui-list"></div> <div class="todo-content"> <h4 class="todo-name"> Pekan <strong>Ilmiah</strong> </h4>
21 November 2013 </div> </li> <li class="todo-done"> <div class="todo-icon fui-eye"></div> <div class="todo-content"> <h4 class="todo-name"> Jumat <strong>Bersih</strong> </h4>
22 November 2013 </div> </li> </ul> </div> </div>
</div> <div class="para"> <div class="parag"> <h5>Sejarah SMA Negeri 6 Tanjung Balai </h5> <img src="Gallery/phpgallery/images/examples/image-1.jpg" width="250px" height="200px"><br> Kepala sekolah yang pertama adalah Drs.Kani Napitupulu dari bulan Juli s/d Nopember 2006, Kepala Sekolah yang kedua Drs.Palmer Manurung dari Januari 2007 s/d September 2011. Sedangkan Kepala Sekolah yang ketiga Amer Simarmata, S.Pd dari Oktober 2011 s/d sekarang. </p> </div> <div class="parag"> <h5>Visi dan Misi </h5> <p> </p> </div> </div> <?php include "footer.php"; ?>
Header.php <html> <head>
<meta charset="utf-8"> <title>Selamat Datang di SMA Negeri 6 Tanjung Balai</title> <meta name="viewport" content="width=device-width, initial- scale=1.0">
<meta name="description" content="sma negeri 6 tanjung balai, Lakukan yang terbaik"> <!-- Loading Bootstrap --> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <!-- Loading Flat UI --> <link href="css/flat-ui.css" rel="stylesheet"> <link href="css/demo.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link rel="shortcut icon" href="images/favicon.png"> <link href="css/styles-asa.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery- 2.0.3.min.js"></script> <script type="text/javascript" src="js/jquery.simplyscroll.js"></script> </head> <body> <div class="content"> <div class="header"> <?php //include "socialbed.php"; ?>
<img src="images/favicon.png"> </div> <div class="navbar navbar-inverse"> <div class="navbar-header">
<button type="button" class="btn btn-navbar" data- toggle="collapse" data-target=".navbar-collapse-02"></button> </div> <div class="navbar-collapse collapse navbar-collapse-02">
<ul class="nav navbar-nav navbar-left"> <li class="active"> <a href="index.php"> Home
<span class="navbar-unread">1</span> </a> </li> <li>
<a href="#"> Profil Pandang</a></li> </a>
<ul> <li><a href="overview.php">Selayang <li> <a href="sejarah.php">Sejarah Sekolah</a> </li> <li><a href="visimisi.php">Visi dan Misi</a></li>
</ul> <!-- /Sub menu --> </li> <li> <a href="#">
Aplikasi online </a> <ul> <li><a href="admin">Administrator</a></li> <li><a href="guru">Guru/Wali kelas</a></li>
<li><a href="siswa">Siswa</a></li> </ul> <!-- /Sub menu --> </li> <li>
<a href="prestasi.php"> Prestasi </a> </li>
<li> <a href="galeri.php"> Galeri </a>
</li> <li> <a href="kontak.php"> Kontak
</li> </a> </ul> </div><!--/.nav -->
</div>
Footer.php <footer> <div class="container">
<div class="row"> <div class="col-md-7">
<h3 class="footer-title">Tentang SMA Negeri 6
Tanjungbalai</h3>
<p>Website Resmi SMA Negeri 6 Tanjung Balai</p>
<p>All Rights Reserved</p> <p>Medan 2013</p> </div> <!-- /col-md-7 --><div class="col-md-5"> <div class="footer-banner"> <h3 class="footer-title">Links</h3> <ul>
<li><a href="guru/">Aplikasi Guru</a></li> <li><a href="siswa/">Aplikasi Siswa</a></li> <li><a href="guru/">Aplikasi Wali Kelas</a></li>
<li>Portal Belajar Tingkat SMA</li>
<li><a-Dukasi.net</li> </ul></div> </div> </div> </div>
</footer> </div> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-select.js"></script> <script src="js/bootstrap-switch.js"></script> <script src="js/flatui-checkbox.js"></script> <script src="js/flatui-radio.js"></script> <script src="js/jquery.tagsinput.js"></script> <script src="js/jquery.placeholder.js"></script> <script src="bootstrap/js/google-code- prettify/prettify.js"></script> <script src="js/application.js"></script> </body>
</html> Overview.php
<?php include "header.php"; ?> <div class="utama"> <div class="para"> <div class="parag"> <h5>Sejarah SMA Negeri 6 Tanjung Balai </h5> <p>
<strong>SMA Negeri 6 Kota Tanjung Balai</strong> mulai beroperasi (berdiri) tahun 2006. Selama 6 (enam) bulan menumpang di SMP Negeri 2 kota Tanjung balai yaitu mulai bulan Juli s/d Desember 2006 dan bulan Januari 2007 baru menempati gedung sendiri yaitu gedung SMA Negeri 6 Kota Tanjungbalai yang sekarang. Pada awalnya bangunan gedung SMA Negeri 6 Kota Tanjungbalai terdiri dari 1 (satu) kantor Kepala Sekolah dan Tata Usaha, 5 (lima) ruang kelas belajar dan 1 (satu) Laboratorium IPA. <p>Tahun pertama menerima murid 5 (lima) kelas dan tahun kedua 5 (lima) kelas sehingga pada Tahun Pelajaran 2007/2008 kelas X (sepuluh) masuk sore hari sementara kelas XI (sebelas) pagi hari atau 2 ship.</p><p> Kepala sekolah yang pertama adalah Drs.Kani Napitupulu dari bulan Juli s/d Nopember 2006, Kepala Sekolah yang kedua Drs.Palmer Manurung dari Januari 2007 s/d September 2011. Sedangkan Kepala Sekolah yang ketiga Amer Simarmata, S.Pd dari Oktober 2011 s/d sekarang. </p> </div> <div class="parag"> <h5>Visi dan Misi </h5> <p> <strong>SMA Negeri 6 Kota Tanjung Balai</strong> mulai beroperasi (berdiri) tahun 2006. Selama 6 (enam) bulan menumpang di SMP Negeri 2 kota Tanjung balai yaitu mulai bulan Juli s/d Desember 2006 dan bulan Januari 2007 baru menempati gedung sendiri yaitu gedung SMA Negeri 6 Kota Tanjungbalai yang sekarang. Pada awalnya bangunan gedung SMA Negeri 6 Kota Tanjungbalai terdiri dari 1 (satu) kantor Kepala Sekolah dan Tata Usaha, 5 (lima) ruang kelas belajar dan 1 (satu) Laboratorium IPA. <p>Tahun pertama menerima murid 5 (lima) kelas dan tahun kedua 5 (lima) kelas sehingga pada Tahun Pelajaran 2007/2008 kelas X (sepuluh) masuk sore hari sementara kelas XI (sebelas) pagi hari atau 2 ship.</p><p> Kepala sekolah yang pertama adalah Drs.Kani Napitupulu dari bulan Juli s/d Nopember 2006, Kepala Sekolah yang kedua Drs.Palmer Manurung dari Januari 2007 s/d September 2011. Sedangkan Kepala Sekolah yang ketiga Amer Simarmata, S.Pd dari Oktober 2011 s/d sekarang. </p> </div> </div> <?php include "footer.php"; ?>
Sejarah.php
<?php include "header.php"; ?> <div class="utama"> <div class="parag1"> <h5>Sejarah SMA Negeri 6 Tanjung Balai </h5> <p> <strong>SMA Negeri 6 Kota Tanjung Balai</strong> mulai beroperasi (berdiri) tahun 2006. Selama 6 (enam) bulan menumpang di SMP Negeri 2 kota Tanjung
balai yaitu mulai bulan Juli s/d Desember 2006 dan bulan Januari 2007 baru menempati gedung sendiri yaitu gedung SMA Negeri 6 Kota Tanjungbalai yang sekarang. Pada awalnya bangunan gedung SMA Negeri 6 Kota Tanjungbalai terdiri dari 1 (satu) kantor Kepala Sekolah dan Tata Usaha, 5 (lima) ruang kelas belajar dan 1 (satu) Laboratorium IPA. <p>Tahun pertama menerima murid 5 (lima) kelas dan tahun kedua 5 (lima) kelas sehingga pada Tahun Pelajaran 2007/2008 kelas X (sepuluh) masuk sore hari sementara kelas XI (sebelas) pagi hari atau 2 ship.</p><p> Kepala sekolah yang pertama adalah Drs.Kani Napitupulu dari bulan Juli s/d Nopember 2006, Kepala Sekolah yang kedua Drs.Palmer Manurung dari Januari 2007 s/d September 2011. Sedangkan Kepala Sekolah yang ketiga Amer Simarmata, S.Pd dari Oktober 2011 s/d sekarang. </p> </div> </div> <?php include "footer.php"; ?>
Visimisi.php
<?php include "header.php"; ?> <div class="utama"> <div class="parag1"> <h5>VISI </h5> <p> <strong>“UNGGUL DALAM ILMU PENGETAHUAN DAN TEKNOLOGI SERTA BERPRESTASI MELALUI OLAH RAGA, BAHASA DAN SENI, BERDASARKAN IMAN DAN TAQWA.”</strong> <h5>MISI </h5> <ol> <li>Mengembangkan Program Pendidikan untuk meningkatkan Pengetahuan di Bidang IPTEK Serta Meningkatkan Prestasi dan Bidang Olah raga, Bahasa dan Seni Dengan Hasil Terbaik.</li> <li>Membantu dan Memfasilitasi Pengembangan Potensi Siswa Secara Utuh</li> <li>Menerapkan Disiplin di Segala Bidang.</li> <li>Membentuk dan Membina Group Seni dan Bahasa yang terampil</li> <li>Membentuk dan Membina Tim Olah Raga Yang Berkualifikasi</li> <li>Menampilkan Semangat Kerja dan Belajar Yang Tinggi.</li> <li>Memupuk Rasa Persaudaraan Dan Sikap Sopan Santun Terhadap Orang Lain.</li> <li>Membudayakan Wawasan Wiyata Mandala Bagi Seluruh Warga Sekolah.</li> <li>Menumbuh Kembangkan Rasa Tulus dan Ikhlas Dalam Tugas dan Tanggung Jawab Diemban Warga Sekolah.</li> <li>Meningkatkan Efektifitas dan Efisiensi Proses Pembelajaran Secara Maksimal</li> </ol> </p> </div>
</div> <?php include "footer.php"; ?>
Admin/index.php
<?php SESSION_START(); if(isset($_SESSION['id'])){ header("location:home.php"); } ?> <html> <head> <meta charset="utf-8"> <title>Selamat Datang di SMA Negeri 6 Tanjung Balai</title> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <meta name="description" content="sma negeri 6 tanjung balai, Lakukan yang terbaik"> <!-- Loading Bootstrap --> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <!-- Loading Flat UI --> <link href="../css/flat-ui.css" rel="stylesheet"> <link href="../css/demo.css" rel="stylesheet"> <link href="../css/style.css" rel="stylesheet"> <link rel="shortcut icon" href="../images/favicon.png"> <script type="text/javascript" src="../js/jquery- 2.0.3.min.js"></script> <script type="text/javascript" src="../js/jquery.simplyscroll.js"></script> <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> </head> <body> <div class="login"> <div class="login-screen"> <div class="login-icon"> <img src="../images/admin.png" alt="Selamat datang di Halaman Admin"> <h4>Login <small>Administrator</small></h4> </div> <h5>Login Administrator</h5> <div class="login-form"> <div class="form-group"> <form action="login-exec.php" method="post"> <input name="id" type="text" class="form-control login- field" value="" placeholder="Masukkan ID" id="login-name"> <label class="login-field-icon fui-user" for="login- name"></label> </div> <div class="form-group">
<input name="password" type="password" class="form- control login-field" value="" placeholder="Password" id="login-pass"> <label class="login-field-icon fui-lock" for="login- pass"></label> </div> <input type="submit" class="btn btn-primary btn-lg btn- block" value="Login"> <a class="login-link" href="#">Lupa Password?</a> </div> </div> </div> </body> </html>
Guru/index.php
<?php SESSION_START(); if(isset($_SESSION['idg'])){ header("location:home.php"); } ?> <html> <head> <meta charset="utf-8"> <title>Selamat Datang di SMA Negeri 6 Tanjung Balai</title> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <meta name="description" content="sma negeri 6 tanjung balai, Lakukan yang terbaik"> <!-- Loading Bootstrap --> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <!-- Loading Flat UI --> <link href="../css/flat-ui.css" rel="stylesheet"> <link href="../css/demo.css" rel="stylesheet"> <link href="../css/style.css" rel="stylesheet"> <link rel="shortcut icon" href="../images/favicon.png"> <script type="text/javascript" src="../js/jquery- 2.0.3.min.js"></script> <script type="text/javascript" src="../js/jquery.simplyscroll.js"></script> <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> </head> <body> <div class="login"> <div class="login-screen"> <div class="login-icon"> <img src="../images/icons/teachers.png" alt="Selamat datang di Halaman Admin"> <h4>Login <small>Guru / Wali kelas</small></h4> </div> <h5>Login Guru/Wali</h5> <div class="login-form"> <div class="form-group">
<form action="login-exec.php" method="post"> <input name="id" type="text" class="form-control login- field" value="" placeholder="ID Guru" id="login-name"> <label class="login-field-icon fui-user" for="login- name"></label> </div> <div class="form-group"> <input name="password" type="password" class="form- control login-field" value="" placeholder="Password" id="login-pass"> <label class="login-field-icon fui-lock" for="login- pass"></label> </div> <input type="submit" class="btn btn-primary btn-lg btn- block" value="Login"> <a class="login-link" href="#">Lupa Password?</a> </div> </div> </div> </body> </html>
Siswa/index.php
<?php SESSION_START(); if(isset($_SESSION['ids'])){ header("location:home.php"); } ?> <html> <head> <meta charset="utf-8"> <title>Selamat Datang di SMA Negeri 6 Tanjung Balai</title> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <meta name="description" content="sma negeri 6 tanjung balai, Lakukan yang terbaik"> <!-- Loading Bootstrap --> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <!-- Loading Flat UI --> <link href="../css/flat-ui.css" rel="stylesheet"> <link href="../css/demo.css" rel="stylesheet"> <link href="../css/style.css" rel="stylesheet"> <link rel="shortcut icon" href="../images/favicon.png"> <script type="text/javascript" src="../js/jquery- 2.0.3.min.js"></script> <script type="text/javascript" src="../js/jquery.simplyscroll.js"></script> <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> </head> <body> <div class="login"> <div class="login-screen"> <div class="login-icon">
<img src="../images/icons/student.png" alt="Selamat datang di Halaman Admin"> <h4>Login <small>Siswa</small></h4> </div> <h5>Login Siswa</h5> <div class="login-form"> <div class="form-group"> <form action="login-exec.php" method="post"> <input name="id" type="text" class="form-control login- field" value="" placeholder="Nomor Induk Siswa" id="login-name"> <label class="login-field-icon fui-user" for="login- name"></label> </div> <div class="form-group"> <input name="password" type="password" class="form- control login-field" value="" placeholder="Password" id="login-pass"> <label class="login-field-icon fui-lock" for="login- pass"></label> </div> <input type="submit" class="btn btn-primary btn-lg btn- block" value="Login"> <a class="login-link" href="#">Lupa Password?</a> </div> </div> </div> </body> </html>
Berita.php
<?php include "header.php"; ?> <div class="utama2 white"> <?php $idb=$_GET['id']; include "koneksi.php"; $kueri=mysql_query("SELECT * FROM berita WHERE id=$idb"); while($data=mysql_fetch_array($kueri)){ ?> <h1 class="jdl"><?php echo $data['judul']; ?></h1> <div class="section"> <img class="gbr" src="<?php echo "berita/images/".$data['gambar'] ?>"> <div class="isi"><p> <b>Tanjungbalai</b> -- <?php echo $data['isi']; ?> </p> </div> <?php } ?> </div> <?php include "footer.php"; ?>
Gallery.php
<link href="Gallery/phpgallery/css/lightbox.css" rel="stylesheet"> <link href="Gallery/phpgallery/css/screen.css" rel="stylesheet"> <script type="text/javascript" src="Gallery/phpgallery/js/jquery.smooth-scroll.min.js"></script> <script type="text/javascript" src="Gallery/phpgallery/js/lightbox.js"></script> <?php include "header.php"; ?> <div class="utama"> <div class="imageRow"> <div class="set"> <?php include('Gallery/phpgallery/config.php'); $result = mysql_query("SELECT * FROM photos"); while($row = mysql_fetch_array($result)) { echo '<div class="single"><div class="wrap"> <a href="Gallery/phpgallery/'.$row['location'].'" rel="lightbox[plants]" title="'.$row['caption'].'"><img src="Gallery/phpgallery/'.$row['location'].'" alt="Plants: image 1 0f 4 thumb" /></a> </div></div>'; } ?> </div> </div> </div> <?php include "footer.php"; ?>
Kontak.php
<?php include "header.php"; ?> <div class="utama"> <div class="parag1"> <p> SMA Negeri 6 Tanjung Balai <br> Jl. Anggur Kel. Bunga Tanjung <br> Kec. Datuk Bandar Timur <br> Kode Pos: <b>21367</b> </p> </div> <?php include "footer.php"; ?>
Prestasi.php
<?php include "header.php"; ?> <div class="utama"> <div class="parag1"> <h5>Prestasi Sekolah </h5> <p> <ol> <li>Juara I Olimpiade Pertamina Fisika Tingkat Provinsi, Tahun 2010</li> <li>Juara I Sepakbola Tingkat Provinsi, Tahun 2013 </li> <li>Juara III Olimpiade Sains Matematika Tingkat Kabupaten Tahun 2012</li> <li>Piagam Penghargaan Sebagai Sekolah dengan pengelolaan Dana BOS Terbaik se kota TanjungBalai</li> <li>Piagam Penghargaan Sebagai Kepala Sekolah Terbaik se kota Tanjungbalai</li> </ol> </p> </div> </div> <?php include "footer.php"; ?>
Slider.php
<div id="homeFlash"> <script type="text/javascript"> $(document).ready(function() { //Click and Hover events for thumbnail list $("ul#carousel-btns-id li:first").addClass('on'); $("ul#carousel-btns-id li").hover(function(){ //Set Variables clearInterval(slideshowStateRef); var imgSrc = $(this).find('a').attr("id"); //Get Main Image URL var imgLink = $(this).find('a').attr("href"); //Get Link to story var imgTitle = $(this).find('h1').text(); //Get Tile of Selected if ($(this).is(".on")) { //If it's already active, then... return false; // Don't Change State
} else { //Animate the Teaser //$("img#selected-img").stop(true, true); $("img#selected-img").attr({ src: imgSrc , alt: imgTitle}); 0},100 ); // $("#headling-panel-id h1 a").stop(true, true); // $("#headling-panel-id h1 a").animate({ opacity: $("#headling-panel-id h1 a").text(imgTitle); } $("ul#carousel-btns-id li").removeClass('on'); //Remove class of 'active' on all lists $(this).addClass('on'); //add class of 'active' on this list only //add class of 'active' on this list only return false; },function(){ clearInterval(slideshowStateRef); } ) $("#carousel-container-id").children().hover( function () { clearInterval(slideshowStateRef); }, function () { slideshowStateRef = setInterval("slideShowState()", 800); } 6000); ); // var slideshow = setInterval("imageRotate()", slideshowStateRef = setInterval("slideShowState()", 800); });//Close Function var slideShowBGPos = 0; var slideshowStateRef = null; function slideShowState() { if (slideShowBGPos >= 189) { slideShowBGPos = 0; imageRotate(); } else { } slideShowBGPos += 27; $("#slideshow-state ").css({'background-position' : '0px -' + slideShowBGPos +'px'}); // console.log(slideShowBGPos); } function imageRotate() { var $active = $('ul#carousel-btns-id li.on'); var $next = $active.next().length ? $active.next() : $('ul#carousel-btns-id li:first');
if(!$next.is('li')) { var $newNext = $next.next(); for(var i = 0; i <10; i ++) { if($newNext.is('li')) { $next = $newNext; break; } $newNext = $newNext.next(); } } $next.addClass('on') $active.removeClass('on'); var imgSrc = $('ul#carousel-btns-id li.on a').attr("id"); //Get Main Image URL var imgLink = $('ul#carousel-btns-id li.on a').attr("href"); //Get Link to story var imgTitle = $('ul#carousel-btns-id li.on a h1').text(); //Get Tile of Selected //$("img#selected-img").stop(true, true); //$("img#selected-img").animate({ opacity: 0.5},100 ); $("img#selected-img").attr({ src: imgSrc , alt: imgTitle}); //$("#headling-panel-id h1 a").stop(true, true); //$("#headling-panel-id h1 a").animate({ opacity: 0},100 ); $("#headling-panel-id h1 a").text(imgTitle); } </script> <div class="carousel-container" id="carousel-container-id"> <img class="main-img" id="selected-img" src="images/aa.jpg" alt="Berita 1"> <div class="headling-panel" id="headling-panel-id"> <h1><a href="news/latest- news/reds-agree-aspas-deal-in-principle"></a></h1> <div id="slideshow-state" style="background-position: 0px -189px;"></div> </div> <ul class="carousel-btns" id="carousel-btns-id"> <?php include "koneksi.php"; $kueri=mysql_query("SELECT * FROM berita ORDER BY id LIMIT 5"); while($data=mysql_fetch_array($kueri)){ ?> <li class=""><a href="berita.php?id=<?php echo $data['id']; ?>" id="<?php echo "berita/images/".$data['gambar']; ?>"><img src="<?php echo "berita/images/".$data['gambar']; ?>"><h1><?php echo $data['judul']; ?></h1></a></li>
<?php } ?> </ul> </div> </div>
Style.css
.content{ //padding-left:100px; display:block; width: 1024; margin: 0 auto; padding-top: 0px; //background-color:#9dabc2; //background-image:url("../images/mini-bg.png"); } #homeFlash{margin:-1px 0 0 0;height:300px; float:left}#PageComments_holder{background:#EEE;padding:10px} .carousel- container{width:646px;height:316px;background:#ebebeb;overflow:hidden ;position:relative;} .carousel-container- small{width:518px;height:296px;background:#ebebeb;overflow:hidden;pos ition:relative} ul.carousel-btns{list-style- type:none;position:absolute;top:0;right:0;margin:0;padding:0; background:url(../images/news-carousel-btn-shadow.png) top left repeat-y} .carousel-container-small ul.carousel-btns{height:295px} ul.carousel-btns li{background:#1abc9c; url(images/news-carousel-btn- red.jpg) top left no-repeat;margin:0 0 0 18px; padding:0;width:234px;display:block;height:59px} ul.carousel-btns li a{background:#fff url(images/news-carousel-btn- white.jpg) top left no-repeat; color:#666;text- decoration:none;display:block;width:234px;height:59px} ul.carousel-btns li a:hover{background:0;color:#fff} ul.carousel-btns li a h1{float:left;width:144px;height:32px;overflow:hidden; font-family:'Anton',sans-serif;font-size:16px;font- weight:normal;margin:13px 0 0 0;padding:0 5px 0 0;text- transform:uppercase;line-height:16px} .headling-panel{background:url(../images/news-carousel-hl- bg.png) top left repeat; margin-left:-20px; border:transparent 1px solid;width:415px;height:auto;position:absolute;left:16px;bottom:17px ;padding:5px 40px 10px 10px;} .carousel-container-small .headling-panel{background:url(images/news- carousel-hl-bg.png) top left repeat; border:#d87b7b 1px solid;width:200px;height:28px;position:absolute;left:16px;bottom:17px ;padding:5px 40px 10px 10px}
.headling-panel h1{margin:0;padding:0;font-family:'Anton',sans- serif;font-size:13px;font-weight:normal;text- transform:uppercase;line-height:14px} .headling-panel h1 a{font-size:26px;font-weight:normal;text- transform:uppercase;color:#FFF;text-decoration:none;line-height:26px} .carousel-container-small .headling-panel h1{margin:0;padding:0;font- family:'Anton',sans-serif} .carousel-container-small .headling-panel h1 a{font-size:17px;font- weight:normal;text-transform:uppercase;color:#FFF;text- decoration:none;line-height:17px} ul.carousel-btns li a img{width:65px;height:44px;border:#31e05a; 1px solid;float:left;padding:0;margin:5px 10px 0 5px; background:#fff url(../images/preload.gif) 8px 6px no-repeat} ul.carousel-btns li a:hover img{width:79px;height:55px;border:#1abc9c 2px solid;float:left;padding:0;margin:0 3px 0 -4px} ul.carousel-btns li.on a img{width:79px;height:55px;border:#FC0 2px solid;float:left;padding:0;margin:0 3px 0 -4px} ul.carousel-btns li.on a{background:0;color:#fff}img.more- news{position:absolute;top:17px;left:16px} img#selected-img{background:#fff url(../images/preload.gif) 180px 120px no-repeat;width:auto!important;height:295px;display:block} .carousel-container-small img#selected-img{width:288px}#slideshow- state{height:26px;width:26px;position:absolute;top:10px;right:10px; background-image:url(images/slideshow-state.png);background- position:0 26px;background-repeat:no-repeat} .carousel-container-small #slideshow-state{top:5px} .para{ margin-bottom:20px; height:automatic; display:block; } .parag{ float:left; width:500px; margin-top:20px; padding:15px; background-color:#bdc3c7; } .parag1{ float:left; width:1024px; margin-top:20px; padding:15px; background-color:#bdc3c7; } .utama{ height:auto; width:1024px; margin-bottom:20px; display:block; } .utama2{ padding:15px;
height:auto; width:1024px; margin-bottom:20px; display:block; background-color:#fff; min-height:500px; } .header{ padding-top:50px; padding-left:50px; background-image:url(../images/header.png); background-size: 100% auto; //background-color:#000; height:250px; margin-bottom:5px; } .tnilai{ } @import url(http://fonts.googleapis.com/css?family=Open+Sans:400); @import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font- awesome.css"; #buttons { border-radius: 5px; padding: 14px 7px; background: transparent; width: 500px; overflow: hidden; margin-left: 150px auto 0; //box-shadow:0 2px 3px rgba(71, 71, 71, 0.31); } .button { background: #DCE0E0; position: relative; display: block; float: left; height: 40px; margin: 0 7px; overflow: hidden; width: 150px; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .icon { display: block; float: left; position: relative;
z-index: 3; height: 100%; vertical- align: top; width: 38px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px; text-align: center; } .icon i { color: #fff; line-height: 42px; } .slide { z-index: 2; display: block; margin: 0; height: 100%; left: 38px; position: absolute; width: 112px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px; } .slide p { font-family: Open Sans; font-weight: 400; border-left: 1px solid #fff; border-left: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 16px; left: 0; margin: 0; position: absolute; text-align: center; top: 10px; width: 100%; } .button .slide { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .facebook iframe { display: block; position: absolute;