-->
› › ›

Cara Cepat Membuat Portal Web

By Saturday, January 27, 2018 Add Comment Edit


Assalamu'alaikum W.W
Oke pada kesempatan kali ini saya akan membagikan cara Membuat Portal Web v.2

Judul
Membuat Portal Web

Pengertian
Menurut Wikipedia, Portal web adalah situs web yang menyediakan kemampuan tertentu yang dibuat sedemikian rupa mencoba menuruti selera para pengunjungnya. Kemampuan portal yang lebih spesifik adalah penyediaan kandungan informasi yang dapat diakses menggunakan beragam perangkat, misalnya komputer pribadi, komputer jinjing (notebook), PDA (Personal Digital Assistant), atau bahkan telepon genggam.
Latar Belakang
Sebelum membuat portal web, kita harus tahu apa itu portal web, fungsi dan contoh-contohnya. 

Maksud dan Tujuan

  • Mengetahui, memahami dan bisa membuat portal web.
  • Memenuhi proker ke-2 di BLC Telkom Klaten

Alat dan Bahan
PC, Text Editor, Bootsrap 4, Animate.CSS

Jangka Waktu
1 hari

Pembahasan
Web Portal adalah situs yang mengumpulkan dan menyediakan aneka informasi dari berbagai sumber untuk ditampilkan kepada user, jika user tertarik untuk mengetahui informasi yang ada dengan lebih lengkap, user akan diarahkan ke sumber yang aslinya. Namun pada umumnya web portal tidak hanya menampilkan informasi dari sumber luar, kadang mereka juga menampilkan informasi-informasi dalam website mereka sendiri.
Menurut Wikipedia, Portal Web adalah situs yang menyediakan kemampuan tertentu yang dibuat sedemikian rupa mencoba menuruti selera pengunjungnya. Kemampuan Portal lebih spesifik adalah penyediaan kandungan informasi yang dapat diakses menggunakan bergama perangkat, misalnya komputer pribadi, notebook, PDA, atau bahkan telepon genggam.

Berikut Langkah -langkah membuat Web Portal
  1. Download Bootsrap https://getbootstrap.com/docs/4.0/getting-started/download/
  2. Siapkan dan Buka Text Editor. Disini saya menggunakan TE Sublime 3
  3. Berikut Scriptnya
    4. 
<!DOCTYPE html>
<html>
<head>
 <title>SMK N 1 Purbalingga</title>
 <link rel="icon" href="logo.png" type="image/icon">
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <script src="js/jquery.js"></script>
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <link rel="stylesheet" type="text/css" href="css/animate.css">
 <style type="text/css">
 body{
  background-image: url('c.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-position: absolute;
  font-family: Arial;
  }.jumbotron {
   background-color:rgba(255, 99, 71, 0);
   color: white;
   text-shadow: 2px 2px 4px #000000;
  }

  .footer{
   padding: 40px 0;
   color: white;
   text-align: center;
  }
  .footer p:last-child{
   margin-bottom: 0;

  }
  .b{
   background-color:rgba(255, 99, 71, 0);
  }
  .card {
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 8px 20px 0 rgba(0,0,0,0.19);
   background-color: rgba(255, 99, 71, 0);
   color: white;
  }
  .a {
   margin-bottom:  15px;
  }
  @keyframes jello {
   from, 11.1%, to {
    transform: none;
   }

   22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
   }

   33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
   }

   44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
   }

   55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
   }

   66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
   }

   77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
   }

   88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
   }
  }


  .efek:hover{
   animation-name: jello;
   cursor: grab;
  }
 </style>
</head>
<body>
 <header>
  <div class="jumbotron">
   <center>
    <h3 class="animated bounce">Selamat Datang di Portal SMK N 1 Purbalingga</h3>
    <p  class="animated bounce">Jalan Mayor Jendral Soengkono, RT. 02 / RW. 04, Selabaya, Kalimanah</p>
    <p class="animated bounce">Kabupaten Purbalingga, Jawa Tengah 53371</p>
    <img src="logook.png" class="animated jello">
   </center>
  </div>
 </header>
 <main class="container">
  <div class="row text-center">
   <div class="col-md-2 a">
    <div class="card efek">
     <div class="card-header">EBook RPL</div>
     <div class="card-body">
      <img src="rpl.png" class="img-fluid" width="200px" height="200px">
     </div>
     <div class="card-footer center-block">
      <a href="#" class="btn btn-outline-light" role="button" data-toggle="modal" data-target="#mymodal">Selengkapnya</a>
     </div>
    </div>
   </div>
   <div class="col-md-2 a">
    <div class="card efek">
     <div class="card-header">EBook TKJ</div>
     <div class="card-body">
      <img src="tkj.jpg" class="img-fluid" width="200px" height="200px">
     </div>
     <div class="card-footer center-block">
      <a href="#" class="btn btn-outline-light" role="button">Selengkapnya</a>
     </div>
    </div>
   </div>
   <div class="col-md-2 a">
    <div class="card efek">
     <div class="card-header">EBook AK</div>
     <div class="card-body">
      <img src="ak.jpg" class="img-fluid" width="200px" height="200px">
     </div>
     <div class="card-footer center-block">
      <a href="#" class="btn btn-outline-light" role="button">Selengkapnya</a>
     </div>
    </div>
   </div>
   <div class="col-md-2 a">
    <div class="card efek">
     <div class="card-header">EBook PM</div>
     <div class="card-body">
      <img src="pm.jpeg" class="img-fluid" width="200px" height="200px">
     </div>
     <div class="card-footer center-block">
      <a href="#" class="btn btn-outline-light" role="button">Selengkapnya</a>
     </div>
    </div>
   </div>
   <div class="col-md-2 a">
    <div class="card efek">
     <div class="card-header">EBook AP</div>
     <div class="card-body">
      <img src="ap.jpg" class="img-fluid" width="200px" height="200px">
     </div>
     <div class="card-footer center-block">
      <a href="#" class="btn btn-outline-light" role="button">Selengkapnya</a>
     </div>
    </div>
   </div>
   <div class="col-md-2 a">
    <div class="card efek">
     <div class="card-header">ALL Ebook</div>
     <div class="card-body">
      <img src="repo.jpg" class="img-fluid" width="200px" height="200px">
     </div>
     <div class="card-footer center-block">
      <a href="zeref" class="btn btn-outline-light" role="button">Selengkapnya</a>
     </div>
    </div>
   </div>
  </div>
 </main>
 <footer class="footer bg-dark">
  <p>&copy; 2018 zeref.weismann.inc All right reserverd</p>
  <p>SMK N 1 Purbalingga</p>
  <p><a href="index.html">Back to Home</a></p>
 </footer>
 <div class="modal fade" id="mymodal">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <h4 class="modal-title">Pilih Bahasa Pemrogramman</h4>
    <button type="button" class="close" data-dismiss="modal">&times;</button>
   </div>
   <div class="modal-body">
    <a href="zeref/index.php?dir=RPL/Android" class="btn btn-primary" role="button" target="_blank" >Android</a>
    <a href="zeref/index.php?dir=RPL/Csharp" class="btn btn-primary" role="button"  target="_blank">C#</a>
    <a href="zeref/index.php?dir=RPL/C++" class="btn btn-primary" role="button" target="_blank" >C++</a>
    <a href="zeref/index.php?dir=RPL/CSS" class="btn btn-primary" role="button" target="_blank" >CSS</a>
    <a href="zeref/index.php?dir=RPL/HTML" class="btn btn-primary" role="button" target="_blank" >HTML</a>
    <a href="zeref/index.php?dir=RPL/Java" class="btn btn-primary" role="button" target="_blank" >Java</a>
    <a href="zeref/index.php?dir=RPL/PHP" class="btn btn-primary" role="button" target="_blank" >PHP</a>  
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
   </div>

  </div>
 </div>
</div>
 <script type="text/javascript">
  $(document).ready(function(){
   $('.efek').hover(function(){
    $(this).addClass('animated shake');
   });
  });

 </script>
</body>
</html>
  4. Berikut Hasilnya

Kesimpulan
Web Portal mengumpulkan dan menyediakan aneka informasi dari berbagai sumber untuk ditampilkan kepada user, jika user tertarik untuk mengetahui informasi yang ada dengan lebih lengkap, user akan diarahkan ke sumber yang aslinya

Referensi
https://id.wikipedia.org/wiki/Portal_web

0 Response to "Cara Cepat Membuat Portal Web "

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel