Tuesday, October 10, 2017

Membuat Portal Sekolah

   ,  No comments

Muhammad Aqshol Rifanza - Kali ini saya akan berbagi bagaimana cara membuat portal sekolah.

Pengertian
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
Saya ingin mencoba membangun Portal Sekolah sebagai pembelajaran saya. Walaupun hanya tampilan awalnya saja tetapi sudah cukup membuat saya pusing.

Maksud dan Tujuan
Untuk memudahkan pengguna pengetahui informasi tentang sekolah.

Alat dan Bahan

  • Laptop/PC
  • LAMP Server
  • File Bootstrap
  • Text Editor
Tahapan Pelaksanaan
1. Pertama buat file index.html dan masukkan script berikut:
<!-- ============================================== -->

<!-- PORTAL SMK Wikrama 1 Jepara
// @ Author -> Muhammad Aqshol Rifanza
// @ Facebook -> www.facebook.com/Muhammad Aqshol Rifanza
// @ Code Name -> PF ( Portal Free )
// Jika Ada Permasalahan Silahkan Hubungi Saya ^_^
// Thanks to Skleton Framework , BLC TELKOM Klaten ^_^
-->

<!-- ============================================== -->

<!DOCTYPE html>
<html>
<head>
 <title>Portal SMK Wikrama 1 Jepara</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
 <meta name="description" content="Ini Adalah Portal SMK Wikrama 1 Jepara">
 <meta name="author" content="Yogi Prasetyawan">
 <meta name="keyword" content="Portal SMK">
 <link rel="stylesheet" type="text/css" href="assets/css/skeleton.css">
 <link rel="stylesheet" type="text/css" href="assets/css/style.css">
 <link rel="shortcut icon" href="assets/img/Logo_swiksara.png">
 <script type="text/javascript" src="assets/js/jquery.js"></script>
 <script type="text/javascript" src="assets/js/jquery.backstretch.min.js"></script>
</head>
<body>

<!-- GANTI BACKGROUND SILAHKAN GANTI ASSETS ... SESUAI NAMA GAMBAR ANDA -->

<script type="text/javascript">
 $.backstretch(
 [
  "assets/img/1.jpg",
  "assets/img/2.jpg",
  "assets/img/3.jpg"
 ], 
 {
  duration: 3000, 
  fade: 600
 });
</script>

<div class="transparant"></div>
<center>
<br>
 
<!-- INFORMASI TENTANG PORTAL BISA EDIT DISINI -->

<h2 style="font-family: raleway">PORTAL SMK Wikrama 1 Jepara
 <center><img class="cover" src="assets/img/Logo_swiksara.png"></center>
</h2>
 <p style="font-size: 20px;color: white;margin-top: -2%"> Jl. Kelet Ploso KM 36, Kelet, Keling, Jepara, Jawa Tengah<br>
 Kodepos <b style="font-family: lato">63153</b> Jawa Tengah
 Telp : <b style="font-family: lato">(0291) 578191</b></p>
 </h4>
 </center> 

<!-- KOTAK / BOX BISA EDIT DISINI -->

<div class="container">
 <div class="three columns">
  <div class="bungkus twelve columns">
   <center>
    <img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/graduate.png">
   </center>
  </div>
  <br>
  <a href="http://localhost/cms-sekolahku" target="new"><button style="width: 100%" class="button button-primary">WEBSITE SEKOLAH</button></a>  
 </div>
  <div class="three columns">
   <div class="bungkus twelve columns">
    <center>
    <img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/own.png">
   </div>
    <br>
    <a href="http://192.168.45.2/owncloud" target="new"><button style="width: 100%" class="button button-primary">OWNCLOUD</button></a>
    </center>
 </div>

   <div class="three columns">
  <div class="bungkus twelve columns">
   <center>
    <img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/web.png">
    </div>
    <br>
    <a href="https://192.168.45.2:10000/" target="new"><button style="width: 100%" class="button button-primary">WEBMIN</button></a>
   </center>
 </div>
  <div class="three columns">
  <div class="bungkus twelve columns">
   <center>
    <img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/radio.png">
    </div>
    <br>
    <a href="http://192.168.45.2:8000/" target="new"><button style="width: 100%" class="button button-primary">Radio Streeming</button></a>
   </center>
 </div>
 <div class="three columns">
  <div class="bungkus twelve columns">
   <center>
    <img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/football.png">
    </div>
    <br>
    <button style="width: 100%" class="button button-primary">Olahraga</button>
    </center>
  </div>
</div>
<div class="container">
   <div class="three columns">
  <div class="bungkus twelve columns">
   <center>
    <img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/student.png">
    </div>
    <br>
    <button style="width: 100%" class="button button-primary">Lab TIK</button>
   </center>
 </div>
   <div class="three columns">
  <div class="bungkus twelve columns">
   <center>
    <img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/writing.png">
    </div>
    <br>
    <button style="width: 100%" class="button button-primary">PPB Online</button>
   </center>
 </div>
   <div class="three columns">
  <div class="bungkus twelve columns">
   <center>
    <img class="gambar" style="width: 80%;margin: 0" src="assets/img/png/laptop.png">
    </div>
    <br>
    <button style="width: 100%" class="button button-primary">Social Media</button>
   </center>
 </div>
   <div class="three columns">
  <div class="bungkus twelve columns">
   <center>
    <img class="gambar" style="width: 80%;margin: 0" src="assets/img/png/smartphone.png">
    </div>
    <br>
    <button style="width: 100%" class="button button-primary">Extra kulikuler</button>
   </center>
 </div>
 <div class="three columns">
  <div class="bungkus twelve columns">
   <center>
    <img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/conference.png">
    </div>
    <br>
    <button style="width: 100%" class="button button-primary">Pengumuman</button>
    </center>
  </div>
 </div>

<!-- UNTUK BAGIAN FOOTER BISA EDIT DISINI -->

<footer>
 <p>
 Copyright &copy; 2017 SMK Wikrama 1 Jepara<br>
 Designed BY <a href="http://www.fb.com/">Muhammad Aqshol Rifanza</a> || <a href="http://www.muhammadaqsholrifanza.blogspot.co.id">Aqshol Rifanza</a>
 </p>
</footer>
</body>
</html>


2. Dan hasilnya akan begini

Kesimpulan
Portal di atas merupakan portal sistem inforamasi sekolah. Portal tersebut berfungsi untuk membatasi pengunjung dalam mengakses informasi sekolah.

Referensi

  • www.w3school.com
  • http://muhfajarshodiq.blogspot.co.id

0 comments:

Post a Comment