TUGAS 1 ETIKA PROFESI TEKNOLOGI INFORMASI & KOMUNIKASI

Dear Para Pembaca

kali ini saya dan kelompok saya akan membahas tentang perubahan proses bisnis/sosial akibat teknologi yang melunturkan nilai etika tradisional yang hilang dan pelanggaran terhadap etika akan mendapatkan sanksi sosial dan sanksi hukum

Mari kita bahas dari yang pertama,berikut adalah contoh dan pembahasannya :

1)      Proses Jual Beli 

a.      Teknologi yang digunakan

-        Komputer  sebagai media yang bisa mengakses internet dan sebagai media terjalinnya transaksi tersebut 

-        Mobile Phone (handphone,) merupakann  media yang sering digunakan saat ini  dengan menggunakan sms dan sms banking .

b.      Model Kerja

Seiring dengan meningkatnya teknologi saat ini, memberi pengaruh yang besar  pada proses jual beli seperti :

-        Via Online, merupakan sarana jual beli  yang banyak digunakan masyarakat saat ini. Contoh ; Bukalapak.com , Salestock, Bli-bli.com, Toko Pedia, dan lain sebagainya. Layanan-layanan tersebut memberi kemudahan dalam proses jual-beli di kalangan masyarakat. Dalam pembayarannya dapat dilakukan melalui transfer rekening melelui ATM, kartu kredit, dan transaksi pembayarannya  bisa juga dilakukan  pada saat penerimaan barang berlangsung. Umumnya, pembayaran dilakukan sesuai dengan ketentuan yang ditetapkan oleh pihak layanan via online tersebut.

-        Proses jual-beli pilihan kedua, bisa dilakukan di mal-mal, supermarket atau minimarket seperti Matahari, Carefour, Ramayana, Alfamart, Indomaret, Giant dan sebagainya.

c.       Nilai  etika tradisional yang hilang

-        Tidak adanya tawar menawar dalam proses jual-beli.

Proses bisnis dulunya dilaksanakan secara tatap muka antara konsumen dan produsen dan disana terdapat transaksi tawar-menawar , misalnya dipasar. Akan tetapi sekarang dengan adanya jual beli via online, proses tawar-menawar jarang dilakukan lagi  karena ketentuan yang telah ditetapkan pihak layanan tersebut.

-        Kehilangan rasa saling mengenal dan silaturahmi antar konsumen dan produsen

Dengan adanya mall-mall seperti carefour atau yang sejenisnya, kita sudah kehilangan seni/tradisi tawar menawar, karena di mall-mall tersebut tidak ada barang yang bisa di tawar. Apalagi dengan adanya paypal kita jadi kehilangan etika saling silaturahmi, karena dengan adanya paypal kita bisa melakukan proses jual beli tanpa harus bertatap muka dengan penjual, demikian juga sebaliknya penjual juga tidak bisa bertemu dengan pembelinya.

            2)      Televisi 

a.      Teknologi yang digunakan

                                    Televisi sebagai media informasi.

b.      Model kerja

Televisi sebagai media informasi dari berbagai belahan dunia dari informasi teknologi, ekonomi, hokum, social dll, yang menampilkan secara nyata.

c.       Nilai tradisional yang hilang

Namun media informasi ini telah banyak menghilangkan etika tradisional diantaranya ;

-        Tayangan televisi mempengaruhi pola berpikir serta berpengaruh pada nilai sopan santun terhadap orang yang lebih tua/sesama, cara berpenampilan, sikap dan berprilaku (akhlaq seseorang ), juga menimbulkan kemalasan, dan lupa waktu.

-        Dengan tayangan - tayangan yang ditontonkan banyak membuat perubahan gaya hidup dengan meniru budaya-budaya yang ditampilkan, yang umumnya banyak menampilkan budaya orang-orang barat, seperti berpacaran, genk berandal, sopan santun yang sudah tidak sesuai etika, bahkan hingga pergaulan bebas, dan sebagainya.

             3)      PS (Playstation)

a.      Teknologi yang digunakan

Yaitu PS (Playstation). PS banyak digemari dikalangan masyarakat baik   anak anak  maupun dewasa.

b.      Model kerja

Permainan game berbagai variasi pilihan seperti game sepak bola, balap,  stategi yang terpanpang secara visual, maupun dalam bentuk 3D.

c.       Nilai tradisional yang hilang

                  Terkuburnya permainan-permainan tradisional, berkurangnya tingkat kretivitas pada anak-anak, malas belajar, ketergantungan, lupa waktu, bolos sekolah, hilangnya sopan santun, taruhan, bahkan hingga mencuri. Contoh diatas hanya sebagian dari teknologi yang merubah nilai etika tradisonal.

 

 

 Pembahasan yang kedua tentang pelanggaran etika yaitu :

SANKSI SOSIAL

Sanksi ini adalah satu dari beberapa sanksi untuk seseorang yang berbuat kesalahan (selain sanksi yang bersifat administratif seperti sanksi hukum pidana/perdata). Sanksi sosial ini tidak berupa tulisan hitam diatas putih dan seringkali bersifat implisit. Sanksi sosial terkadang mulai muncul ditataran kerabat/tetangga terdekat, namun jika seseorang sudah melakukan berbagai kesalahan yang diulang sekian lama, maka sanksi sosial ini akan semakin meruncing, sang empunya salah akan mendapat sanksi sosial dari kelompok terkecil yaitu keluarga. Idealnya keluarga akan menjadi tameng untuk si pembuat kesalahan, namun karena keluarga sudah kecewa terhadap sikap dan tindakan yang dilakukan si pemilik salah, maka keluarga pun akan ikut menjauh bahkan terkadang menjadi menyerang.

SANKSI HUKUM

Sanksi hukum adalah peraturan-peraturan yang bersifat memaksa, yang menentukan tingkah laku manusia dalam lingkungan masyarakat, yang dibuat oleh badan-badan resmi yang berwajib, pelanggaran mana terhadap peraturan-peraturan tadi berakibat diambilnya tindakan, yaitu dengan hukuman.

Contoh hukum/sanksi dari korupsi :

Pelanggaran ini termasuk hukum pidana. Sanksi yang   diberikan berupa hukuman denda berupa ganti rugi atau   penyitaan barang serta hukuman penjara.

Seperti itu yang dapat kami jelaskan,bila ada kekurangan mohon dimaklumi,
Terima Kasih










Nama Kelompok:

Rizky Arbiansyah     12165749
Robby cornelius        12162990
Wily permana            12160209
Adib wahyu               12160140
Rio Setianto               12160145

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

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