Thursday, November 29, 2018

TUGAS 4 WEB PROGRAMING

Dear Pembaca,

Kali ini saya akan menshare pembuatan web sederhana untuk model rumus lingkarang,kali ini saya membuat dengan CI (codeigniter),jadi ada beberapa sub file untuk disave,yaitu model,controller,view.

Yang pertama kalian buat adalah model terlebih dahulu,masukan scriptnya dibawah ini dan disave pada folder model :

<?php
class lingkaran_model extends CI_Model{
 //mendefinisikan kosntanta untuk nilai PHI
 const PHI = 3.14;

 //atributt model
 private $jarijari;

 //metode untuk menentukan nilai $jarijari
 public function set_jarijari($r){
  $this->jarijari=$r;
 }

 //metode untuk mengambil nilai $jarijari
 public function get_jarijari(){
  return $this->jarijari;
 }

 //metode untuk menghitung luas lingkaran
 public function hitung_luas(){
  return self::PHI*$this->jarijari*$this->jarijari;
 }

 //metode untuk menghitung keliling lingkaran
 public function hitung_keliling(){
  return 2*self::PHI*$this->jarijari;
 }
}

kemudian yang kedua,masukan script dibawah ini dan disave di folder controller.

<?php
class lingkaran extends CI_Controller{
 Public function index(){
  if (isset($_POST['proses'])){
   //meload model lingkaran_model
   $this->load->model('lingkaran_model');

   //menangkap model yang telah dimuat oleh controller
   $model=$this->lingkaran_model;

   //Mengambil nilai dari form input
   $jarijari=$_POST['inputjari'];

   //menentukan nilai jari jari
   $model->set_jarijari($jarijari);

   //memuat view dan mengirimkan $model ke view
   $this->load->view('lingkaranview',array('model'=>$model));
  }else{
   $this->load->view('lingkaranview');
  }
 }
}

Dan yang terakhir masukan script dibawah ini dan disave di folder view.

<!DOCTYPE html>
<html>
<head>
 <title>Demo Model, View, Controller</title>
</head>
<body>
 <form action="http://localhost/rental_buku/index.php/lingkaran" method="post">
  <h1>Model Rumus Lingkaran</h1><br>
  <input type="text" name="inputjari" placeholder="Masukan Jari-Jari">
  <input type="submit" name="proses" value="Proses"><br><br>
 
  <?php error_reporting(0) ;?>
  <table>
   <tr>
    <!-- memanggil metode get_jarijari() dari objek $model -->
    <td>Nilai Jari Jari</td>
    <td>:</td>
    <td><?php echo $model->get_jarijari();?></td>
   </tr>
   <tr>
    <!-- memanggil metode hitung_luas() dari objek $model -->
    <td>Luas Lingkaran</td>
    <td>:</td>
    <td><?php echo $model->hitung_luas();?></td>
   </tr>
   <tr>
    <!-- memanggil metode hitung_keliling() dari objek $model -->
    <td>Keliling Lingkaran</td>
    <td>:</td>
    <td><?php echo $model->hitung_keliling();?></td>
   </tr>
  </table>
  <br>
  <table>
   <tr>
    <td>Nama</td>
    <td>:</td>
    <td>Rizky Arbiansyah</td>
   </tr>
   <tr>
    <td>Nim</td>
    <td>:</td>
    <td>12165749</td>
   </tr>
   <tr>
    <td>Kelas</td>
    <td>:</td>
    <td>12.5D.11</td>
   </tr>
  </table>
 </form> 
</body>
</html>


Maka tampilan outputnya akan seperti dibawah ini :















Terima Kasih Telah berkunjung
Posted by at No comments:

Sunday, November 4, 2018

Pembuatan Web sederhana "Perpustakaan BSI" (Kuis pemrograman web BSI)

Dear Pembaca

Salam Sejahtera,
Kali ini saya akan memposting cara pembuatan web sederhana dengan tema "Perpustakaan BSI" untuk memenuhi nilai kuis Pemrograman Web.
Akan ada beberapa script yang akan saya posting,

1.Script dan screenshoot menu utama
yang pertama adalah script di menu utama (sebelum log in)
Berikut adalah scriptnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/Style.css">
    <title>Perpus BSI</title>
</head>
<body>
<h1><marquee>Selamat Datang Di Perpustakaan Universitas Bina Sarana Informatika</marquee></h1>   
    <div id="container">
        <div class="header">Perpustakaan Universitas BSI</div>
            <div class="main">
                <div class="left">
                    <h3 align="center">Menu</h3>
                    <ul>
                        <li><a href='formlogin.html'>Login</a></li>
                        <li><a href='alert.html'>Home</a></li>
                        <li><a href='alert.html'>Daftar Buku</a></li>
                    </ul>
                </div>
                <div class="middle">
                    <h3 align="center">HOT ITEM</h3>
                    <h2 align="center">Belajar CSS</h2><br>
                    <div align="center">
                        <img src="images/belajarcss.jpg" width="350" height="50">
                    </div>
                </div>
                <div class="right">
                    <h3 align="center">Buku Terpopuler</h3>
                        <p>
                            <ul>
                                <li><a href='alert.html'>Web Design</a></li>
                                <li><a href='alert.html'>Pemrograman</a></li>
                                <li><a href='alert.html'>Database</a></li>
                                </ul>
                        </p>
                </div>
            </div>
    </div>
<div class="footer"><p align="center">Coppyrigth  Perpustakaan BSI</a></p>
</div>
</div>
</body>
</html>

Dan berikut adalah screenshootnya :













2.Script dan screenshoot "Alert Message"
Kemudian script selanjutnya adalah script alert dimana pada saat kita mengklik selain login maka akan timbul alert atau message "Anda harus Login terlebih dahulu",berikut adalah scriptnya :

<html>
<head>
<script type="text/javascript">
function message()
{
alert("Anda Harus Login Terlebih Dahulu")
}
</script>
</head>
<body onload="message()">
</body>
</html>

dan screenshootnya seperti ini :















3.Script dan screenshoot Form Login
berikutnya  adalah script form Login untuk akses masuk :

<!DOCTYPE html>
<html>
<head>
 <title>log in | Administrator</title>
 <style>
  body{margin: 200px 500px; background:aqua;}
 </style>
</head>
<body>
 <form action="index2.html" method="post">
  <h3>Welcome To Administrator</h3>
  <hr>

  <table>
   <tr>
    <td>user name</td><td>:</td><td>  <input type="text" name="username"/></td>
   </tr>
   <tr>
    <td>Password </td><td>:</td><td> <input type="password" name="password"/></td>
   </tr>
   <tr>
    <td></td><td></td> <td><input type="submit" name="login" value="log in"/> <input type="submit" name="cancel" value="cancel"/></td>
   </tr>
  </table>
 </form>
</body>
</html>

Dan screenshootnya seperti ini :













4.Script dan screenshoot Menu utama setelah Login

Setelah login berhasil kita masuk kemenu utama,berikut adalah scriptnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/Style.css">
    <title>Perpus BSI</title>
</head>
<body>
<h1><marquee>Perpustakaan Universitas Bina Sarana Informatika</marquee></h1>   
    <div id="container">
        <div class="header">Selamat Datang Mr.Rizky</div>
            <div class="main">
                <div class="left">
                    <h3 align="center">Menu</h3>
                    <ul>
                        <li><a href='index.html'>Logout</a></li>
                        <li><a href='daftar_buku.html'>Daftar Buku</a></li>
                    </ul>
                </div>
                <div class="middle">
                    <h3 align="center">Berita</h3>
                    <h2 align="center">30 Tahun Menyandang Akademik,BSI Mejadi Universitas</h2><br>
                    <div align="center">
                        <img src="images/univbsi.jpg" width="350" height="50">
                    </div>
                        <p><a href='beritabsi.html'>Baca Selengkapnya >></a></p>
                </div>
                <div class="right">
                    <h3 align="center">Buku Terpopuler</h3>
                        <p>
                            <ul>
                                <li><a href='bukuwebdesign.html'>Web Design</a></li>
                                <li><a href='bukupemrograman.html'>Pemrograman</a></li>
                                <li><a href='bukudatabase.html'>Database</a></li>
                                </ul>
                        </p>
                </div>
            </div>
    </div>
<div class="footer"><p align="center">Coppyrigth  2018 Perpustakaan BSI</a></p>
</div>
</div>
</body>
</html>

dan screenshootnya seperti ini :













5.Script dan screenshoot "Berita Seputar BSI"

Ada ikon berita ditengah tengah web yang dapat kita klik dan kita baca,untuk scriptnya sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/Style.css">
    <title>Perpustakaan BSI</title>
</head>
<body>
    <div id="container">
        <div class="header"><img src="images/perpusbsi.jpg" width="100" height="100"><h1>Perpustakaan Universitas BSI</h1></div>
         <h5>Selamat Datang, Rizky</h5>

            <div class="main">
                <div class="left">
                    <h3 align="center">Menu</h3>
                    <ul>
                        <li><a href='index.html'>Logout</a></li>
                        <li><a href='index2.html'>Home</a></li>
<li><a href='daftar_buku.html'>Daftar Buku</a></li>
                    </ul>
            <br>

                    <h3 align="center">Buku Terpopuler</h3>
                        <p>
                            <ul>
                                <li><a href='bukuwebdesign.html'>Web Design</a></li>
                                <li><a href='bukupemrograman.html'>Pemrograman</a></li>
                                <li><a href='bukudatabase.html'>Database</a></li>
                                </ul>
                        </p>
                </div>





                </div>
                <div class="middle2">
                    <h2 align="left">Seputar BSI</h2><br>
                    <div align="center">
</div> <img src="images/univbsi.jpg" width="800" height="300">
</br>
</br>
SETELAH 30 tahun menyandang sebagai Akademi, kampus Bina Sarana Informatika (BSI) kini telah berubah menjadi Universitas.

Perubahan status ini merupakan penggabungan 21 dari 24 perguruan yang ada di BSI.

Direktur BSI Naba Aji Notoseputro mengatakan, perubahan nama Akademi BSI menjadi Universitas BSI melalui proses yang cukup panjang.

Perubahan ini dilakukan sebagai salah satu kesiapan BSI dalam menghadapi era disruptif atau pasar baru di bidang teknologi informasi (TI).

"Dengan memiliki enam akademi di 25 kampus se-Indonesia, maka pihak Yayasan BSI berinisiatif untuk menyatukan akademi yang dimiliki untuk menjadi satu berupa universitas," kata Naba Aji saat jumpa pers di BSI Convention Center, Kecamatan Bekasi Utara, Kota Bekasi, Minggu (16/9).

Dalam kesempatan itu, hadir Sekretaris Jendral Kementerian Riset, Teknologi dan Pendidikan Tinggi (Kemenristekdikti) Ainun Na'im, Direktur Jendral Pembelajaran dan Kemahasiswaan Kemenristekdikti Intan Ahmad dan Kepala Lembaga Layanan Pendidikan Tinggi Wilayah III DKI Jakarta Ilah Sailah.

Perubahan status akademis menjadi universitas ini ditandai dengan penyerahan Surat Keputusan Perubahan Akademi BSI dari Ainun kepada Naba Aji.

Naba memastikan, perubahan status ini tidak akan berdampak pada kenaikan tarif kuliah bagi para mahasiswa.

Menurut dia, tarif yang diberlakukan pada mahasiswa akan tetap sama hingga satu sampai dua tahun.

"Sasaran kami adalah masyarakat menengah, bukan masyarakat yang premium, sehingga pasca perubahan ini biaya kuliah akan tetap sama sampai 1-2 tahun dan tentunya menyesuaikan kondisi," ujar Naba.



Artikel ini telah tayang di Wartakotalive dengan judul 30 Tahun Menyandang Akademi, Kampus BSI Kini jadi Universitas, http://wartakota.tribunnews.com/2018/09/16/30-tahun-menyandang-akademi-kampus-bsi-kini-jadi-universitas.
Penulis: Fitriyandi Al Fajri
Editor: Andy Pribadi
   
</div>
<div class="footer"><p align="center">Copyright © 2018 - Perpustakaan BSI</a></p>
</div>
</body>
</html>

Kemudian Screenshootnya seperti gambar dibawah ini :












6.Script dan screenshoot "Daftar Buku"

Scriptnya adalah sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/Style.css">
    <title>Perpustakaan BSI</title>
</head>
<body>
    <div id="container">
        <div class="header"><img src="images/perpusbsi.jpg" width="100" height="100"><h1>Perpustakaan Universitas BSI</h1></div>
         <h5>Selamat Datang, Rizky</h5>

            <div class="main">
                <div class="left">
                    <h3 align="center">Menu</h3>
                    <ul>
                        <li><a href='index.html'>Logout</a></li>
                        <li><a href='index2.html'>Home</a></li>
                    </ul>
            <br>

                    <h3 align="center">Buku Terpopuler</h3>
                        <p>
                            <ul>
                                <li><a href='bukuwebdesign.html'>Web Design</a></li>
                                <li><a href='bukupemrograman.html'>Pemrograman</a></li>
                                <li><a href='bukudatabase.html'>Database</a></li>
                                </ul>
                        </p>
                </div>





                </div>
                <div class="middle2">
                    <h2 align="left">Daftar Buku</h2><br>
                    <div align="center">
</div>

    <table border=1>
<tr>
<th > <img src="buku1.jpg" width="200" height="200"> </th>
<th > <img src="buku2.jpg" width="200" height="200"> </th>
<th > <img src="buku3.jpg" width="200" height="200"> </th>
</tr>

<tr>
<th > <img src="buku4.jpg" width="200" height="200"> </th>
<th > <img src="buku5.jpg" width="200" height="200"> </th>
<th > <img src="buku6.jpg" width="200" height="200"> </th>
</tr>

<tr>
<th > <img src="buku7.jpg" width="200" height="200"> </th>
<th > <img src="buku8.jpg" width="200" height="200"> </th>
<th > <img src="buku9.jpg" width="200" height="200"> </th>
</tr>

<tr>
<th > <img src="buku10.jpg" width="200" height="200"> </th>
<th > <img src="buku11.jpg" width="200" height="200"> </th>
<th > <img src="buku12.jpg" width="200" height="200"> </th>
</tr>

</table>
</div>
<div class="footer"><p align="center">Copyright © 2018 - Perpustakaan BSI</a></p>
</div>
</body>
</html>

Dan screenshootnya :













7.Script dan screenshoot buku terpopuler >> web design

Scriptnya adalah :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/Style.css">
    <title>Perpustakaan BSI</title>
</head>
<body>
    <div id="container">
        <div class="header"><img src="images/perpusbsi.jpg" width="100" height="100"><h1>Perpustakaan Universitas BSI</h1></div>
         <h5>Selamat Datang, Rizky</h5>

            <div class="main">
                <div class="left">
                    <h3 align="center">Menu</h3>
                    <ul>
                        <li><a href='index.html'>Logout</a></li>
                        <li><a href='index2.html'>Home</a></li>
<li><a href='daftar_buku.html'>Daftar Buku</a></li>
                    </ul>
            <br>

                    <h3 align="center">Buku Terpopuler</h3>
                        <p>
                            <ul>
                                <li><a href="#">Web Design</a></li>
                                <li><a href='bukupemrograman.html'>Pemrograman</a></li>
                                <li><a href='bukudatabase.html'>Database</a></li>
                                </ul>
                        </p>
                </div>





                </div>
                <div class="middle2">
                    <h2 align="left">Web Design</h2><br>
                    <div align="center">
</div>

    <table border=1>
<tr>
<th > <img src="bukuwebdesign/1.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/2.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/3.jpg" width="200" height="200"> </th>
</tr>

<tr>
<th > <img src="bukuwebdesign/4.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/5.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/6.jpg" width="200" height="200"> </th>
</tr>

<tr>
<th > <img src="bukuwebdesign/7.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/8.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/9.jpg" width="200" height="200"> </th>
</tr>

<tr>
<th > <img src="bukuwebdesign/10.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/11.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/12.jpg" width="200" height="200"> </th>
</tr>

</table>
</div>
</body>
</html>

Kemudian Screenshootnya :













8.Script dan screenshoot buku terpopuler >> pemrograman

Scriptnya adalah :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/Style.css">
    <title>Perpustakaan BSI</title>
</head>
<body>
    <div id="container">
        <div class="header"><img src="images/perpusbsi.jpg" width="100" height="100"><h1>Perpustakaan Universitas BSI</h1></div>
         <h5>Selamat Datang, Rizky</h5>

            <div class="main">
                <div class="left">
                    <h3 align="center">Menu</h3>
                    <ul>
                        <li><a href='index.html'>Logout</a></li>
                        <li><a href='index2.html'>Home</a></li>
<li><a href='daftar_buku.html'>Daftar Buku</a></li>
                    </ul>
            <br>

                    <h3 align="center">Buku Terpopuler</h3>
                        <p>
                            <ul>
                                <li><a href='bukuwebdesign.html'>Web Design</a></li>
                                <li><a href="#">Pemrograman</a></li>
                                <li><a href='bukudatabase.html'>Database</a></li>
                                </ul>
                        </p>
                </div>





                </div>
                <div class="middle2">
                    <h2 align="left">Pemrograman</h2><br>
                    <div align="center">
</div>

    <table border=1>
<tr>
<th > <img src="bukupemrograman/1.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/2.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/3.jpg" width="200" height="200"> </th>
</tr>

<tr>
<th > <img src="bukupemrograman/4.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/5.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/6.jpg" width="200" height="200"> </th>
</tr>

<tr>
<th > <img src="bukupemrograman/7.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/8.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/9.jpg" width="200" height="200"> </th>
</tr>

<tr>
<th > <img src="bukupemrograman/10.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/11.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/12.jpg" width="200" height="200"> </th>
</tr>

</table>
</div>
<div class="footer"><p align="center">Copyright © 2018 - Perpustakaan BSI</a></p>
</div>
</body>
</html>



Dan screenshootnya :













9.Script dan screenshoot buku terpopuler >> Database

Sciptnya adalah :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/Style.css">
    <title>Perpustakaan BSI</title>
</head>
<body>
    <div id="container">
        <div class="header"><img src="images/perpusbsi.jpg" width="100" height="100"><h1>Perpustakaan Universitas BSI</h1></div>
         <h5>Selamat Datang, Rizky</h5>

            <div class="main">
                <div class="left">
                    <h3 align="center">Menu</h3>
                    <ul>
                        <li><a href='index.html'>Logout</a></li>
                        <li><a href='index2.html'>Home</a></li>
<li><a href='daftar_buku.html'>Daftar Buku</a></li>
                    </ul>
            <br>

                    <h3 align="center">Buku Terpopuler</h3>
                        <p>
                            <ul>
                                <li><a href='bukuwebdesign.html'>Web Design</a></li>
                                <li><a href='bukupemrograman.html'>Pemrograman</a></li>
                                <li><a href="#">Database</a></li>
                                </ul>
                        </p>
                </div>





                </div>
                <div class="middle2">
                    <h2 align="left">Database</h2><br>
                    <div align="center">
</div>

    <table border=1>
<tr>
<th > <img src="bukudatabase/1.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/2.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/3.jpg" width="200" height="200"> </th>
</tr>

<tr>
<th > <img src="bukudatabase/4.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/5.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/6.jpg" width="200" height="200"> </th>
</tr>

<tr>
<th > <img src="bukudatabase/7.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/8.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/9.jpg" width="200" height="200"> </th>
</tr>

<tr>
<th > <img src="bukudatabase/10.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/11.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/12.jpg" width="200" height="200"> </th>
</tr>

</table>
</div>
<div class="footer"><p align="center">Copyright © 2018 - Perpustakaan BSI</a></p>
</div>
</body>
</html>


Dan screenshootnya seperti ini :























10.Script CSS style

Berikut adalah script css untuk design dan warna pada Web :

*{
    padding :0 ;
    margin  :0 ;
}

body{
    width: 100%;
    background-color: #f1f1f2;

}

marquee{
    background-color: #bcbabe;
    color: #black
}

p{
    margin-bottom: 20px;
    line-height: 1.5em;
}


h3{
    font : white;
    border-bottom: 1px solid #08010f;
}

a{
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: inherit;
    font-size: 20px;
    color: #d4d2db;
}

a:hover{
    color: #ff0000;
}

#container{
    max-width: 100%;
    background: #a1d6e2;
    overflow: hidden;
    margin : 60px 50px;
    padding: 10px 50px  10px 50px;
}

.header{
   
    font-size: 30px;
    text-align : center;
    background-color: #1995ad;
}

.header h1{
   
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
}

/* main */

.left{
    width: 250px;
    border: 1px solid #dedede;
    padding: 10px;
    margin: 10px;
    float: left;
    background-color: #0c5986;
}

.left ul{
    list-style-type: none;
}

.left ul li{
    display: block;
}

.left ul li a{
    display: block;
    border-bottom: 1px solid #dedede;
    margin-bottom: 10px;
    padding: 10px 5px;
    font:  #64bed4;
}

.left ul li a:hover{
    color: #ca1414 ;
}

.middle{
    width: 500px;
    border: 1px solid #dedede;
    padding: 5px;
    margin: 10px;
    float: left;
}
.middle2{
    width: 800px;
    border: 1px solid #dedede;
    padding: 5px;
    margin: 10px;
    float: left;
}

.middle img{
    background-image: img src="images/..vizta.jpg";
    max-width: 100%;
    height: auto;
}

.middle a{
    font-weight: bold;
}

.right{
    width: 250px;
    border: 1px solid #dedede;
    padding: 10px;
    margin: 10px;
    float: left;
    background-color: #0c5986;
}

.right ul{
    list-style-type: none;
}

.right ul li{
    display: block;
}

.right ul li a{
    display: block;
    border-bottom: 1px solid #dedede;
    margin-bottom: 10px;
    padding: 10px 5px;
}

.right ul li a:hover{
    color: #ca1414;
}

#footer{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 28pt;
    color: #6813c9;
    clear: both;
    border: 1px solid #dedede;
    padding: 15px;
}

@media screen and(max-width:995px){
    #container{
        width: 100%;
    }
    #left-columm{
        width: 70%;
    }
    #right-columm{
        width: 30%;
    }
    img{
        width: 100%;
    }
}

/* MEDIA QUIRIES (Responsive)***********/

@media screen and (max-width:1080px){
    .container{
        width: 100%;
    }
    .left{
        width: 25%;
        background: #0c7575d7;
    }
    .middle{
        width: 68%;
        float: right;
    }
    .right{
        clear: both;
        padding: 1% 4%;
        width: auto;
        float: none;
        background: #0c7575d7; 
    }
}

/* Untuk ukuran layar 700px kebawah  */

@media screen and (max-width:780px){
    .header,
    .footer{
        text-align: center;
    }
    .left{
        width: auto;
        float: none;
    }

    .middle{
        width: auto;
        float:  none;
    }

    .right{
        width: auto;
        float: none;
    }
}



Demikianlah yang bisa saya share kepada kawan kawan tentang cara pembuatan web sederhana "Perpustakaan BSI" semoga bermanfaat dan sekiranya ada yang ingin ditambahkan seperti kritik atau saran bisa diisi dikolom komentar

Terima Kasih
Posted by at No comments:

Wednesday, October 10, 2018

PEMBUATAN WEB SEDERHANA PEMESANAN DI "TOKO CAT GUNA BANGUN JAYA"

Dear Para Pembaca,

Kali ini saya akan sharing pembuatan web sederhana pemesanan cat disalah satu contoh toko.
ada 2 script untuk web kali ini,yang pertama untuk form input dan kedua untuk form output atau struk.

untuk script inputan form sebagai berikut :

<html>
<head>
<title>Input Data Pesanan </title>
</head>
<body>
<pre><h1> TOKO CAT GUNA BANGUN JAYA </h1> </br>
<form action="tampilstruk.php" method="post">
Nama Customer : <input type="text" name="nama" size="25"></br>
Alamat : <input type="text" name="alamat" size="25"> <td></br>
Jenis Cat : <select name="jeniscat" value="pilih">
<option>Mowilex</option>
<option>Danapaint</option>
<option>Catylac</option></select></br>
Warna Cat : <input type="radio" name="warnacat" value="Merah">Merah <input type="radio" name="warnacat" value="Biru">Biru <input type="radio" name="warnacat" value="Kuning">Kuning
<p>
Jumlah Beli : <input type="text" name="jumlahbeli" size="25"> <td></br>
</pre>
<input type="submit" name="Hitung" value="Hitung">
<input type="reset" name="batal" value="batal">
</form>
</html>

dan screen shoot nya seperti ini :


Kemudian untuk script outputnya sebagai berikut :

<head>
<title> Data Pesanan  </title>
</head>
<body>
<h2> Toko Cat Guna Bangun Jaya </h2>
--------------------------------------------------------------------<br>
<?php
function border ()
{
echo "<pre>------------------------</pre>
";
}
$nm=$_POST['nama'];
$alamat=$_POST['alamat'];
$jen_cat=$_POST['jeniscat'];
$warna=$_POST['warnacat'];
$jumbel=$_POST['jumlahbeli'];
if ($jen_cat=="Mowilex") {$a=20000;}
else if ($jen_cat=="Danapaint") {$a=30000;}
else if ($jen_cat=="Catylac") {$a=40000;}
$total=$a*$jumbel;
echo "<p>
";
echo "<pre>";
echo "Nama Customer : $nm<br>";
echo "Alamat : $alamat<br>";
echo "Jenis Cat : $jen_cat<br>";
echo "Warna : $warna<br>";
echo "Harga : " ; echo "Rp.".number_format ($a);
echo "<br>";
echo "Jumlah Beli : $jumbel<br>";
echo "----------------------------------------------------<br>";
echo "Total Harga : "; echo "Rp.".number_format($total);
if ($jumbel>=5) {$b=$total*5/100;}
 else if ($jumbel>=10) {$b=$total*10/100;}
 else {$b=0;}
echo "<br>";
echo "Diskon : "; echo "Rp.".number_format($b);
$totbay=$total-$b;
echo "<br>";
echo "----------------------------------------------------<br>";
echo "Total Bayar : " ; echo "Rp.".number_format($totbay);
echo "<br>";
echo "<br>";
echo "<a href='forminputpesanan.php'>Kembali";
?>
</body>

dan hasil nya seperti ini :









Terima kasih telah berkunjung semoga bermanfaat ...
Posted by at No comments:

Monday, October 8, 2018

Jenis Perangkat Jaringan

Dear Pembaca,

Kali ini saya akan memposting tentang beberapa macam atau jenis perangkat jaringan.
yang pertama adalah :

Repeater

             Repeater berasar dari kata Repeat yang berarti pengulangan,jadi repeater secara sederhana dapat diartikan dengan pengulangan kembali.dalam ilmu komputer repeater merupakan alat yang berguna untuk mengulang dan  meneruskan kembali signal ke daerah sekitar perangkat ini atau secara singkat berguna untuk menguatkan signal sehingga dapat digunakan untuk cangkupan wilayah yang lebih luas.Sistem kerja repeater adalah melalui signal wireless,dengan menggunakan alat ini,maka penggunaan kabel yang riwet dan semraut pun dapat dihindari.Dengan signal yang lebih kuat proses pengiriman dan penerimaan data antar sesama pengguna perangkat jaringan ataupun melalui jaringan dapat dilakukan dengan








Bridge

            Berbeda dengan reapeter,bridge adalah suatu alat yang dapat menghubungkan jaringan komputer LAN (local area Network) dengan jaringan LAN yang lain.Alat ini bekerja pada data Link layer model OSI (Open System Interconnection),karena itu bridge bisa menyambungkan jaringan komputer yang memakai metode transmisi atau medium access control yang tidak sama atau berbeda.bridge memetakan alamat ethernet dari setiap titik atau node yang terdapat pada masing-masing segmen jaringan komputer,dan hanya dapat memperbolehkan lalu lintas data yang memang dibutuhkan melintasi bridge.itulah prinsip atau cara kerja dari bridge.








Network interface Card (NIC)


            NIC (Network Interface Card) atau biasa disebut kartu jaringan merupakan perangkat yang menyediakan media untuk menghubungkan antar komputer,bekerja pada layer physical dan data Link,yang menghubungkan komputer dengan perangkat jaringan lainnya yang umumnya berupa switch LAN. Kartu LAN ini dikoneksikan ke switch melalui media kabel jaringan,yang umum sekarang ini adalah kabel UTP cat5e (kabel standard UTP yang mendukung kecepatan Gigabit).




Posted by at No comments:

Saturday, September 29, 2018

Menghitung Volume Kubus Menggunakan Operator Aritmatika & Operator String

Dear pembaca,

Kali ini saya akan share script pembuatan web sederhana menghitung volume kubus menggunakan operator aritmatika dan operator string.

Dibawah ini adalah scriptnya :

<?php
$teks1="Belajar Menghitung";
$teks2=" Volume Kubus";
$hasil=$teks1.$teks2;
echo "$hasil<br>";
echo "Panjang Sisi kubus = 15 <br>";
$psikub=15;
$volum=$psikub*$psikub*$psikub;
echo "Volume kubus = $volum cm3<br>";
?>

Dan tampilan outputnya akan seperti ini :


Sekian dan terima kasih .
Posted by at No comments:

Tuesday, September 25, 2018

Contoh Pembuatan WEB sederhana "Penjualan Kamera Online"

Dear pembaca,

Kali ini saya akan memposting script pembuatan web sederhana untuk memenuhi tugas pertama dimata kuliah pemograman web,semoga bermanfaat dan berikut scriptnya :



<html>
<head>
<title> Penjualan kamera online</title>
</head>
<body>
<h1>SALE !!! </h1>
<table border="1">
<tr>
<td colspan="3" align="center" bgcolor="#FFDEAD"><h3>DAFTAR PRODUK</h3></td>
</tr>
<tr>
<td rowspan="4" bgcolor="DDA0DD" ><img src="kamera.jpg" height="100" width"100"/> </td>
<td rowspan="2" bgcolor="7FFFD4" > NAMA PRODUK </td>
</tr>
<tr>
<td bgcolor="00FFF"> CANON EOS M10 KIT EF-M 15-40MM  </td>
</tr>
<tr>
<td bgcolor="E6E6FA"> HARGA </td>
<td bgcolor="FFF0F5"> RP 4,899,000 </td>
</tr>
<tr>
<td bgcolor="FFEFD5"> FITUR PRODUK </td>
<td bgcolor="FFDAB9" align="center"> - KAMERA MIRRORLESS <br>
- EFEKTIFITAS PIKSEL : 18 MP <br>
- TIPE SENSOR : CMOS DIGIC 6<br>
- LAYAR : 3.0 INCH <br>
- MEMILIKI LAMPU FLASH DENGAN JARAK JANGKAUAN HINGGA 5 METER
</td>
</tr>
</table>
</body>
</html>

Setelah kalian run pada web,maka tampilannya akan seperti ini





Sekian dan Terima Kasih




Posted by at No comments:

Friday, September 21, 2018

JENIS JENIS JARINGAN KOMPUTER


PAN (Personal Area Network)


Jaringan Yang satu ini adalah jaringan komunikasi satu perangkat dengan perangkat lainnya dalam jarak yang sangat dekat,kontrol pada jaringan PAN dilakukan dengan authoritas pribadi yang menggunakan teknologi WAP (Wireless Application Protocol) dan bluetooth contoh penggunaan Jaringan PAN adalah HP yang dikoneksikan dengan laptop menggunakan bluetooth.







     LAN (Local Area Network)

             Adalah jaringan komputer dengan skala kecil (lokal) seperti gedung perkantoran,sekolah atau rumah.LAN dapat berdiri sendiri tanpa terhubung oleh jaringan luar atau internet.Dengan menggunakan jaringan LAN anda dapat dengan mudah bebagi resource dengan komputer lain.tetapi menjadikan keamanan yang rentan.Admin jaringan berperan penting dalam hal mencegah user yang tidak sah untuk mengakses data pada jaringan




WAN (Wide Area Network)

             Jaringan yang satu ini mencangkup area yang sangat luas sebagai contoh jaringan komputer antar wilayah,kota,atau bahkan negara.karna radiusnya yang sangat luas WAN menggunakan sarana fasilitas transmisi seperti telepon,kabel bawah laut ataupun satelit.dengan semakin mudahnya arus informasi dan juga transfer data akan lebih memudahkan informasi yang datang keluar menjadi lebih cepat.tetapi dibalik semua itu ada beberapa kendala yang dihadapi seperti biaya operasional yang mahal karena maintenancenya sangat luas,rentan terhadap hacker atau ancama dari luar lainnya



MAN (Metropolitan Area Network)

           Jaringan komputer yang jangkauannya lebih luas serta lebih canggih dibandingkan dengan LAN.Jangkauan jaringan ini berkisar hingga 10-50 KM,jaringan MAN hanya mempunyai satu atau dua kabel namun tidak dilengkapi dengan elemen switching yang dapat berfungsi untuk membuat rancangan menjadi lebih simpel.Kabel tersebut juga berfungsi untuk mengatur paket daya dengan melalui kabel output.beberapa kelebihan jaringan MAN ini antara lain Transaksi yang dilakukan real-time (data yang ada di server pusat akan diupdate saat itu juga),tetapi kekurangannya sendiri adalah instalasi dari infrastruktur jaringan tidak mudah dan jika terjadi trouble pada jaringan semisal network,trouble shoot akan rumit untuk mengatasinya








Posted by at No comments:
Subscribe to: Comments (Atom)