Materi Workshop PHP Jepara

  BAB 1  PENGANTAR 

    Bidang Teknologi Informatika sedang digemari oleh banyak kalangan sekarang ini,                     terutama jurusan rekayasa perangkat lunak. Swasta maupun Pemerintah sedang                   berlomba­lomba meningkatkan sistem informasi manajemen di perusahaan mereka. Permintaan                   akan lulusan IT pun semakin meningkat, bukan hanya dari kuantitas sumber daya manusia                           tetapi juga kualitas ilmu pengetahuan sumber daya manusia di dunia IT. 

  PHP Indonesia berkolaborasi dengan MGMP Kudus ­ Jepara ­ Demak mengadakan                       pelatihan pembuatan website bagi guru SMK IT jurusan rekayasa perangkat lunak di kota Kudus                             ­ Jepara ­ Demak. Pada pelatihan ini PHP Indonesia akan berbagi tips tentang bagaimana cara                               membuat                          

  ​website ​. Tujuan akhir dari pelatihan ini adalah peserta mampu membuat sebuah relasi data, pembuatan sistem mengunggah foto, pembuatan halaman login atau autentikasi,                     pembuatan sistem yang di dalamnya terdapat create, update, delete, input, proses dan output.                          

  Peserta juga diharapkan mampu membedakan kegunaan dari masing­masing teknologi yang                     digunakan.  Modul ini disusun dengan tekad yang besar demi memajukan kualitas programmer di                        

  Indonesia. Modul dengan mengambil studi kasus Sistem Informasi Perpustakaan ini diharapkan                       bisa menjadi materi dasar untuk berkembang dari Junior Programmer hingga menjadi Expert                         Programmer. 

  Modul dibagi menjadi beberapa bagian yaitu yang pertama instalasi XAMPP dan Tools                         pendukung, pada bagian ini akan dibahas peralatan apa saja yang dibutuhkan dalam                         pembuatan sebuah                        

  ​website ​. Kedua adalah ​database atau basis data, bagian ini berisi penjelasan tentang apa itu basis data dan penerapan basis data dalam suatu Sistem Informasi                             Perpustakaan. Yang ketiga adalah HTML dan CSS, bagian ini berisi penjelasan singkat tentang                           apa itu HTML dan CSS, kegunaan HTML dan CSS serta penerapan HTML dan CSS dalam                               membuat tampilan sebuah                        

  ​website ​yang lebih interaktif bagi pengguna. Keempat adalah PHP,

bagian ini berisi tentang apa itu PHP dan implementasi PHP di dalam sebuah Sistem Informasi                               Perpustakaan. 

   

  STUDI KASUS 

    Pada studi kasus kali ini akan dibuat sebuah sistem informasi perpustakaan. Sistem                        

  Informasi Perpustakaan dipilih karena sistem ini memiliki komponen­komponen yang cukup                     lengkap namun juga lebih sederhana, sehingga sesuai untuk dijadikan pembelajaran.                     Komponen­komponen yang dimaksud antara lain: 

  1. Terdapat pengaplikasian CRUD 

  2. Terdapat relasi data antar tabel di database 

  3. Terdapat fitur login (authentication), upload file/gambar 

  4. Terdapat pemrosesan data (peminjaman buku, pengembalian buku dan                 perhitungan denda).  Sistem informasi perpustakaan ini dibuat untuk memudahkan dalam pencarian koleksi buku                       yang ada, pengelolaan buku dan memudahkan proses transaksi pengembalian dan peminjaman                       buku.Sistem informasi perpustakaan ini melibatkan anggota dan petugas perpustakaan.  Aktifitas yang ada di sistem ini sebagai berikut : 

  1. Pendaftaran Anggota  Pengunjung yang belum terdaftar sebagai anggota dapat melakukan pendaftaran                   dengan mengisi formulir pendaftaran anggota yang terdapat pada sistem. 

  2. Pengelolaan buku  Petugas dapat melakukan pengelolaan data buku dengan input data buku, edit data                         buku dan hapus data buku. 

  3. Peminjaman  Buku yang sudah dikelola oleh petugas perpustakaan dapat dipinjamkan kepada                     anggota pepustakaan.Anggota perpustakaan adalah pengunjung yang sudah melakukan                 proses pendaftaran anggota.Input data peminjaman dilakukan oleh petugas                 perpustakaan. 

  4. Pengembalian  Buku yang sudah dipinjam oleh anggota input data pengembaliannya dilakukan oleh                       petugas perpustakaan.Sistem akan memberikan laporan apakah pengembalian tepat                 waktu atau tidak, jika tidak sistem akan menghitung denda yang harus dibayar oleh                           anggota yang meminjam buku tersebut. 

   

  BAB 2 

  INSTALASI XAMPP & TOOLS 

    Dalam membangun sebuah sistem berbasis web kita membutuhkan sebuah aplikasi                     webserver. Web server inilah yang akan memproses kode program dan mengirim hasilnya ke                           web browser. Contoh dari aplikasi web server yang sering digunakan antar lain : ​Apache​,                            

  

Nginx ​, ​dan ​Microsoft IIS​. Selain web server, adapun yang kita butuhkan yaitu database.                          

  Database disini berperan sebagai tempat penyimpanan data yang telah diproses melalui inputan                         yang telah ditentukan. Untuk melakukan instalasi web server dan Database maupun tambahan                         paket yang lain membutuhkan waktu yang relatif lama, untuk saat ini telah ada ​bundle ​untuk                               semua kebutuhan dalam membangun sebuah sistem berbasis server side (web) antara lain :                          

  XAMPP, LAMPP, dan WAMPP.    Dalam modul ini kita menggunakan paket web server dari aplikasi Xampp, berikut cara                           instalasi dan pengunaan nya.  

  1. Instalasi XAMPP  a. Download XAMPPdi  ​

  

  b. Double Klik file instalasi xampp yang sudah didownload    akan tampil window setup instalasi XAMPP, klik  ​Next ​ untuk proses instalasi 

c. Setelah itu akan muncul window 

  ​Select Component. ​ Silahkan pilh komponen apa  saja yang akan ditentukan, lalu  ​Next 

      d. Setelah itu muncul windows Installation folder, tentukan pilihan folder untuk  menyimpan paket web server. Untuk defaultnya pada windows “C:\Xampp”  

e. Selanjutnya muncul window BitNami, langsung saja klik 

  ​Next >

   

f. Setelah itu akan tampil window bahwa XAMPP telah siap diinstal, klik 

  ​Next   

      g. Klik Next, maka akan tampil window proses instalasi   

  h. Instalasi selesai, klik  ​finish​ untuk mengakhiri dan membuka XAMPP 

   

i. Cara Start XAMPP 

  Buka aplikasi xampp. 

1. Jalankan shortcut xampp yang terdapat pada desktop 

  2. Klik tombol start pada apache untuk mengaktifkan apache web server 

  3. Klik tombol start pada Mysql untuk menjalankan MySQL server.   

  4. Taruh file­file yang sudah dibuat kedalam satu folder dan masukan ke  dalam folder htdocs pada folder xampp. Struktur folder xampp  :    j. Htdocs 

  Semua aplikasi yang akan kita buat terletak disini. Untuk mengakses aplikasi,  buka alamatdi browser. Jika ingin menjalankan file/aplikasi yang    

   Selain paket web server kita membutuhkan tools lain yang digunakan untuk melakukan                         penulisan code­code dari sistem yang akan kita bangun, antara lain Text Editor dan IDE, untuk                              

  Text Editor ada beberapa tools yang bisa kita gunakan antara lain : Notepad++, Sublime Text                               dan BlueFish. Pada modul ini kita menggunakan tools Text Editor  ​“Sublime Text 3” ​.  

  2. Instalasi Text Editor 

a. Download Sublime Text 3 di  https://www.sublimetext.com/3  sesuai dengan versi 

   windows masing­masing, windows 64bit atau windowns 32bit 

   

  b. Double klik pada file instalasi  sublime text   

     

  c. Klik next 

  d. Pilih lokasi untuk instalan sublime 

   

e. Klik install 

   

  f. selesai 

    . 

          BAB 3  DATABASE / BASIS DATA  

   

  A. Pengantar   Database atau basis data adalah kumpulan data yang disimpan secara                     sistematis di dalam komputer yang dapat diolah atau dimanipulasi menggunakan                     perangkat lunak (program aplikasi) untuk menghasilkan informasi. Pendefinisian basis                   data meliputi tipe data, struktur data dan juga batasan­batasan data yang akan disimpan.                          

  Database merupakan aspek yang sangat penting dalam sebuah sistem informasi dimana                       basis data merupakan gudang penyimpanan data yang dapat mengorganisasi data,                     menghindari duplikasi data dan hubungan antar data yang juga dapat di update. 

  Dalam penggunaan database, kita memerlukan adanya sebuah sistem yang                   berfungsi untuk mengelola database tersebut. Sehingga muncullah sebuah sistem yang                     bernama DBMS (Database Management System). Mysql merupakan Database/DBMS                 yang sering kita dengar, mengingat mysql memiliki banyak kelebihan salah satu nya                         adalah free dan memiliki komunitas yang banyak. 

  Di dalam penggunaan database ini pun, kita memerlukan sebuah tools atau alat,                         yang berfungsi untuk membantu kita mengolah database tersebut. Salah satu tools yang                         sering digunakan adalah phpmyadmin. Tools ini berbasis web, sehingga memudahkan                     pengembang tanpa harus menginstall aplikasi. Apabila anda sudah menginstall XAMPP                     dan melakukan instalasi sesuai pada Bab 2, maka tools phpmyadmin akan secara                         otomatis terinstall. Untuk mengaksesnya pastikan apache dan mysql sudah menyala,                     lalu masukkan URL       di browser. Apabila anda baru pertama           kali mengakses, maka secara otomatis akan masuk ke halaman dashboard. Untuk                       contoh penggunaannya, silahkan lanjutkan mengikuti modul ini. 

  B. Pembuatan Struktur Database  Dalam pembuatan struktur database hal­hal yang perlu diperhatikan sebagai  berikut : 

1. Membuat Database 

  Dalam pembuatan database kita dapat melalukannya dengan 2 cara, yaitu : 

a. Membuat langsung di phpMyAdmin, seperti pada gambar berikut : 

   

b. Menggunakan Command Prompt 

  Selain menggunakan tools seperti phpmyadmin, kita juga bisa  menggunakan command prompt untuk mengakses MySQL. Caranya  adalah menjalankan perintah berikut di command prompt :  1. 

  ​cd C:\xampp\mysql\bin ​(untuk pindah ke direktori tempat mysql  berada)  2. 

  ​mysql ­u root ​(untuk login/masuk ke MySQL sebagai user root)  3. 

  ​create database db_perpus;​ (untuk membuat database baru  dengan nama db_perpus)  

  2. Membuat Tabel  Tabel adalah daftar kumpulan dari beberapa data yang diatur dengan field. Untuk  membuat tabel, pilih dulu database yang akan kita gunakan dengan mengklik  daftar database yang ada di sebelah kiri, kemudian isi nama tabel dan jumlah  kolom/field yang ingin dibuat,kemudian klik tombol create. 

    Untuk isi dari tiap tabel, kolom apa saja yang dibutuhkan, ada pada  pembahasan selanjutnya. 

3. Membuat Field 

a. Di dalam 

  ​Tabel Buku​ terdapat field dan tipe data sebagai berikut :  Field  Tipe Data  Keterangan  buku_id  int  Integer : Digunakan untuk menyimpan  bilangan bulat  positif dan negatif  buku_judul  varchar  Varchar : 

  ​Digunakan untuk menyimpan  data karakter/string dengan ukuran  dinamis  buku_kategori  int    buku_deskripsi  text  Text : Digunakan untuk menyimpan data  text  buku_jumlah  int    buku_cover  varchar   

    b. Di dalam  ​Tabel Kategori​ terdapat field dan tipe data sebagai berikut : 

    Field  Tipe Data  Keterangan  kategori_id  int  Integer : Digunakan untuk menyimpan  bilangan bulat  positif dan negatif  kategori_nama  varchar  Varchar : 

  ​Digunakan untuk menyimpan  data karakter/string dengan ukuran  dinamis 

   

  c. Di dalam  ​Tabel Anggota​ terdapat field dan tipe data sebagai berikut :   

  Field  Tipe Data  Keterangan  anggota_id  int  Integer : Digunakan untuk menyimpan  bilangan bulat  positif dan negatif  anggota_nama  varchar  Varchar :  ​Digunakan untuk menyimpan  data karakter/string dengan ukuran  dinamis  anggota_alamat  text  Text : Digunakan untuk menyimpan data  text  anggota_jk  enum(L, P)  Enum : Digunakan untuk menyimpan data  enumerasi (kumpulan data)  anggota_telp  varchar   

  d. Didalam  ​Tabel Petugas​ terdapat field dan tipe data sebagai berikut : 

  Field  Tipe Data  Keterangan  petugas_id  int  Integer : Digunakan untuk menyimpan  bilangan bulat  positif dan negatif  petugas_nama  varchar  Varchar : 

  ​Digunakan untuk menyimpan  data karakter/string dengan ukuran  dinamis  petugas_username  varchar    petugas_password  varchar   

    e. Di dalam  ​Tabel Pinjam​ terdapat field dan tipe data sebagai berikut : 

    Field  Tipe 

  Data  Keterangan  pinjam_id  int  Integer : Digunakan untuk menyimpan  bilangan bulat  positif dan negatif  pinjam_buku_id  int    pinjam_anggota_id  int    pinjam_tgl_pinjam  date  Date : Digunakan untuk menyimpan  data tanggal dengan format YY:MM:DD  pinjam_tgl_jatuh_tempo  date   

   

  f. Di dalam  ​Tabel Kembali​ terdapat field dan tipe data sebagai berikut : 

    Field  Tipe Data  Keterangan  kembali_id  int  Integer : Digunakan untuk menyimpan  bilangan bulat  positif dan negatif  kembali_pinjam_id  int    kembali_tgl_kembali  date  Date : Digunakan untuk menyimpan data  tanggal dengan format YY:MM:DD  kembali_denda  double  Double : Digunakan untuk menyimpan  data yang berupa bilangan pecahan positif  dan negatif 

   

       

C. Penjelasan CREATE, INSERT, UPDATE, DELETE dan SELECT 

  1. SELECT  Perintah untuk mengambil data yang terdapat di table. 

  SELECT ​ field_yang_ingin_ditampilkan ​FROM ​nama_tabel ​WHERE ​kondisi;  2.

  INSERT  Perintah untuk memasukan data kedalam tabel di dalam database. 

  INSERT INTO  ​nama_table ​VALUES ​(isi_field_1, isi_field_2, isi_field_3, dst ... 

  );  atau 

  INSERT INTO  ​nama_table (nama_field_1, nama_field_2, nama_field_3, dst ...) 

  VALUES  ​(isi_field_1, isi_field_2, isi_field_3, dst ... ); 

  3. UPDATE  Perintah untuk memperbarui data di dalam table. 

  UPDATE  ​nama_table ​SET ​nama_field=data_baru ​WHERE 

  nama_field_id=id_data; 

  4. DELETE  Perintah untuk menghapus data di dalam table. 

  DELETE FROM ​ nama_table ​WHERE ​kondisi; 

D. Referensi 

  ●   ● ● ●  

     

  BAB 4  HTML, CSS & JavaScript  

   

  

HTML   

  Banyak orang yang bergelut dalam bidang             ​web development     ​awalnya tidak melewati       pembelajaran HTML terlebih dahulu, sebagian besar menggunakan CMS (                 ​Content Management    

  

System ​), ataupun karena kemudahan penggunaan software seperti Adobe Dreamweaver.                  

  Sehingga dari sinilah orang menyangka untuk bisa membuat website, atau mahir dalam web                           development itu harus menggunakan Adobe Dreamweaver, jadi untuk apa harus repot­repot                       belajar HTML? Sebetulnya pernyataan ini tidak 100% benar, dan juga tidak 100% salah. 

  Perlu diketahui Hypertext Markup Language (HTML) adalah bahasa markup yang umum                       digunakan untuk membuat halaman web. Sebenarnya HTML bukanlah sebuah bahasa                     pemrograman. Apabila di tinjau dari namanya, HTML merupakan bahasa markup atau                       penandaan terhadap sebuah dokumen teks. Tanda tersebut di gunakan untuk menentukan                       format atau style dari teks yang di tandai. HTML dibuat oleh Tim Berners­Lee ketika masih                               bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun                           1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti                       akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya.  

  

CSS 

  Cascading Style Sheet (CSS) merupakan salah satu bahasa markup yang digunakan                       untuk mempercantik halaman web dan mengendalikan beberapa komponen dalam sebuah web                       sehingga akan lebih terstruktur. CSS dapat digunakan untuk mengendalikan ukuran gambar,                       warna teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over,                           spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.                             CSS bisa juga diartikan sebagai bahasa style sheet yang digunakan untuk mengatur tampilan                           dokumen. 

  Dalam modul ini, kami memberi contoh kasus secara langsung yang mana harapannya                         dapat mempermudah pemahaman para pembaca.  Berikut merupakan contoh tampilan website yang akan kita buat, 

    Gambar di atas menunjukkan : kiri sudah dilakukan                        

  ​styling ​dengan menggunakan CSS, sedangankan yang kanan belum dilakukan                         ​styling. ​Untuk membuat dokumen HTML, kita dapat membuatnya dengan teks editor yang sudah terpasang pada BAB Instalasi XAMPP dan Tools.                          

  Cukup membuat dokumen baru dan simpan dengan ekstensi HTML. Sedangkan untuk                       membuat stlyle atau file CSS, cukup simpan dengan ekstensi CSS.  Berikut merupakan kode HTML untuk tampilan di atas, ketik dan simpan dengan nama  buku_form.html dan letakkan pada folder project kita di htdocs 

    <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF­8">      <title>Form Buku</title>      <link rel="stylesheet" href="css/style.css">  </head>  <body>      <div class="container clearfix">          <h1>SI Perpustakaan</h1>             <div class="sidebar">              <ul>                  <li><a href="pinjam_data.html">Peminjaman</a></li>                  <li><a  href="kembail_data.html">Pengembalian</a></li> 

                  <li><a href="kategori_data.html">Data  Kategori</a></li>                  <li><a class="active"  href="buku_data.html">Data  Buku</a></li>                  <li><a href="anggota_data.html">Data  Anggota</a></li>                  <li><a href="#" onclick="return confirm('anda yakin  akan keluar?')">Logout</a></li>              </ul>          </div>            <div class="content">              <h3>Tambah Data Buku</h3>              <form method="post">                  <p>Judul</p>                  <p><input type="text" name="judul"></p>                    <p>Kategori</p>                  <p>    <select name="kategori">    <option value="1">Fiksi</option>    <option value="2">Novel</option>    <option value="3">Komputer</option>    <option value="4">Musik</option>    </select>                  </p>                    <p>Deskripsi</p>                  <p><textarea name="deskripsi"></textarea></p>                    <p>Jumlah</p>                  <p><input type="text" name="jumlah"></p>                    <p>Cover</p>                  <p><input type="file" name="cover"></p>                    <p><input type="submit" class="btn btn­submit"  value="Simpan"></p>              </form>          </div>        </div>  </body>  </html> 

       

                                  Untuk penjelasan dari kode HTML di atas adalah sebagai berikut : 

1. HTML 

  a. Pembuatan Header website :   

  Untuk   membuat   teks format judul       bisa menggunakan tag heading. Tag heading terdiri dari beberapa level, yaitu h1                         sampai dengan h6 yang mana perbedaan terletak pada ukuran hurufnya yang                       semakin kecil. Di dalam tag                          

  ​div ​di atas terdapat atribut ​id​, ​id ini digunakan untuk     melakukan                           ​styling ​pada css dan bersifat unik atau satu saja dan dapat digunakan juga untuk memodifikasi DOM 

  ​(Document Object Model)  ​dengan JavaScript​. 

  b. Pembuatan menu pada sidebar sebelah kiri :   

  <div   class = "sidebar">   ​ ​ ​ ​

       <ul>   ​

           <li><a   href = "kategori_data.html" > Data Kategori </a></li>   ​ ​ ​ ​ ​ ​ ​ ​

           <li><a   href = "buku_data.html" > Data Buku </a></li>   ​ ​ ​ ​ ​ ​ ​ ​

           <li><a   href = "anggota_data.html" > Data Anggota </a></li>   ​ ​ ​ ​ ​ ​ ​ ​

           <li><a   href = "pinjam_data.html" > Peminjaman </a></li>   ​ ​ ​ ​ ​ ​ ​ ​

           <li><a   href = "kembali_data.html" > Pengembalian </a></li>   ​ ​ ​ ​ ​ ​ ​ ​

           <li><a   href = "#"   onclick = " return  confirm ( 'anda yakin akan  ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​

  keluar?' ) " > Logout </a></li>   ​ ​ ​ ​ ​

       </ul>   ​

  </div>

     

     

   

  <div>   </div> ,  

  ● ​ ​ ini biasa digunakan dalam pembuatan tata letak atau layout ​                   sebuah website, di dalam tag tersebut terdapat atribut                 ​class​, fungsi dari      

                   

  class, ​hampir sama dengan ​id​, hanya saja di sini dapat  

  menggunakannya   beberapa   kali.   Seperti contoh     ​class="btn  

  btn­submit active".  <ul><li>   </li></ul> ,  

  ● ​ ​ ​ ini digunakan untuk membuat                 ​list ​tanpa urutan atau

  .   dengan kata lain bullet seperti pada Ms. Word               Sedangkan untuk ​    

  ​

  <ol><li>  

  membuat membuat                 ​list dengan urutan dapat menggunakan kode ​ </li></ol> .

   

  <a   href = "#" ></a> ,  

  ● ​ ​ ​ ​ ​ tag tersebut digunakan untuk membuat ​            hyperlink sebuah website, dengan atribut href untuk               ​yang dituju. Seperti contoh        

  ​url

  <a   href = "pinjam_data.html" >Pinjam Data</a>    

  di atas     ​ ​ ​ ​ ​ artinya, Teks Pinjam       ​

  Data ketika diklik akan menuju halaman  ​pinjam_data.html. 

   

b. Pembuatan         ​bagian ​content​, di bagian ini kita membuat form input untuk                    

  ​layout data buku, yang mana dalam form tersebut akan memasukkan data ke tabel                         buku pada database yang sebelumnya sudah dibuat. 

                    ● <p></p> digunakan untuk membuat paragraf, sehingga ketika ada kode seperti ini    

      ​<p>Judul</p><p>Membuat Website</p> ​maka yang     terjadi adalah, teks “Judul” berada di atas “Membuat Website” dengan                     kata lain setelah teks “Judul” dilakukan  ​enter. 

  ● <form></form> ​pendefinisian form menggunakan tag tersebut.         

  ● <input type=”text” name=”value”> ​sudah jelas ini adalah       inputan teks dengan nama value, sama seperti tag HTML yang lain, kita                         juga dapat menambahkan atribut pada tag input tersebut. Untuk contoh                     lain pada potongan kode di atas, ada                

  ​<input type=”file”> ​untuk     membuat inputan berupa file atau upload file dan                

  ​<input   type=”submit”> ​untuk membuat tombol submit. 

        ● <select><option></option></select> ​tag tersebut digunakan   untuk membuat 

  ​drowdownlist ​..             

  ● <textarea></textarea> ​akan membuat inputan berupa teks dengan   multibaris.  c. Untuk referensi HTML yang bisa anda gunakan sebagai berikut : 

  ● ●   ●   ●  

  • {  

  sizing ​

  100 ​ %;  

      padding ​

  : ​

    ​

  15px;  

      box ​

  ­ ​

  : ​

  : ​

   border ​

  ­ ​

  box;  }    .

  ​

  sidebar li a ​

  : ​

  hover {      background

    ​

  ​

  ­ ​

  : ​

  ​

  ­ ​

  left ​

  : ​

    ​

  0;  

      margin ​

    ​

  block;      width

  0;  

  }    .

  ​

  sidebar li a {      display

  ​

  : ​

    ​

  inline ​ ­ ​

  ​

  color ​

  : ​

  ​

  : ​

    ​

  #FFF;  

  }  Tag a pada HTML, diberi 

  ​style  ​dengan  menghilangkan garis bawah dan warnanya  putih.  .

  ​

  content {      width

  : ​

   none;      color

    ​

  80 ​ %;  

      min ​

  ­ ​

  height ​

  : ​

    ​

  500px;  

  ​

  : ​

  : ​

  ​

    ​

  #3B5949;  

  }    .

  ​

  sidebar li a ​ .

  ​

  active{      background

  ­ ​

  decoration ​

  color ​

  : ​

    ​

  #3B5949;  

  }  Sidebar, ini mengatur format dalam  menampilkan sisi sebuah daftar menu atau  submenu. Dengan ketentuan lebar 20%, dan  rata kiri.  Kemudian dalam aturan 

  ​“ul”,  ​definisinya tag  <li> adalah untuk numberikan list sedangkan  tag <ul> untuk bullets list,  kedua tag ini  harus berdampingan agar bisa menampilkan  output list.   Pseudo :hover digunakan ketika menyorot  elemen, sehingga memberikan interaksi.  Sedangkan :active ketika menekan atau klik.  a {      text

  ​

  ­ ​

   none;      padding

  style ​

  ● ● ●

  100 ​ %;  

    ​

  960px;  

      max ​

  ­ ​

  width ​

  : ​

    ​

      margin ​

  ​

  : ​

    ​ ​

    ​

  auto;  

      background ​

  : ​

    ​

  : ​

  container {      width

      border ​

   sans ​

  Untuk membuat tampilan website kita menjadi menarik dan tidak kaku untuk dipandang,                         maka perlu melakukan ​styling ​menggunakan CSS. Berikut merupakan kode CSS yang

                        digunakan pada tampilan website yang kita buat dengan nama file ​style.css. ​Buat folder css