Membuat Portal Sekolah

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

Read More

Membuat Sistem Pembayaran SPP Untuk Sekolah

MUHAMMAD AQSHOL RIFANZA - Kali ini saya akan berbagi tentang Ssitem Pembayaran SPP Untuk Sekolah. Ini saya bermaksud untuk memudahkan kasir atau bendahara sekolah agar tidak perlu menulis pada kertas yang memlelahkan.

Pengertian

SPP (Sumbangan Pembinaan Pendidikan) adalah menurut kamus besar Bahasa Indonesia SPP ada beberapa singkatan yaitu antara lain 1. Surat Persetujuan Pembayaran 2. Sumbangan Pembinaan Pendidikan 3. Surat Perjanjian Penerbitan Namun jika ada hubungannya dengan pendidikan atau sekolah, berarti SPP itu sendiri mengambil definisi no.2 dan bisa diartikan bahwa SPP adalah Sumbangan berupa dana untuk pembinaan pendidikan yang berada dalam suatu instansi pendidikan

Tujuan

Saya bertujuan untuk bendahara sekolah atau kasir bisa lebih mudah dalam melakukan transaksi, adn juga untuk menghemat kertas

Alat dan Bahan

• Laptop
• Text Editor

Proses

1. Admin melakukan login terlebih dahulu
2. Kemudian akan masuk halaman home atau beranda
3. Admin menginputkan jurusan terlebih dahulu
4. Admin menginputkan siswa 
5. Admin menginputkan tahun pelajaran
6. Admin menginputkan kelas
7. Admin melakukan transaksi pembayaran SPP
8. Admin mencetak laporan

Sceernshoot

Kesimpulan

Jadi bendahara sekolah atau kasir bisa dengan mudah melakukan transaksi danpa membuang buang tenaga untuk menulis dikertas.

Read More

Modal Bootstrap

Muhammad Aqshol Rifanza - Kesempatan ini saya akan membuat modal dengan bootstrap...

Pengertian
Modal adalah sebuah kotak dialog atau sering disebut dengan popup yang menampilkan pesana atau konfirmasi untuk suatu aksi, misalnya sobat ingn mebuat aksi menghapus data maka akan muncul kotak dialog yang kurang lebihnya seperti ini " Apakah anda ingin menghapus data ini ? " Banyak lagi yang dapat dilakukan oleh modal karna modal juga dapat menampilkan data dalam bentuk modal

Bootstrap memberikan plugin yang berfungsi untuk membuat modal, modal yang dihasilkan cukup bagus dan cara membuatnya pun mudah.

Kesimpulan
Bootstrap menyediakan fasilitas modal yang responsive dan mudah untuk digunakan. Kita tidak perlu susah payah membuat plugin modal tinggal memanggil classnya saja kita dapat membuat modal tersebut dan yang dihasilkan pun memuaskan

Referensi

• http://www.script-kiddies.org
• http://www.malasngoding.com
• http://www.w3school.com

Read More

Carrousel / Slideshow Bootstrap

Muhammad Aqshol Rifanza - Kali ini saya akan berbagi cara membuaut carrosel atau slideshow dengan menggunakan bootstrap.

Pengertian
Carousel atau sering disebut oleh kebanyakan orang slideshow merupakan sebuah proses penampilan gambar yang diberi efek slide yaitu gambar dapat berubah sesuai dengan waktu yang ditentukan atau kita dapat menggeser gambar menjadi gambar yang lain. Sangat banyak website yang menggunakan carousel atau slideshow pada website mereka untuk mempromosikan produk unggulan atau untuk tujuan lainya. Biasanya carousel diletakkan pada halaman depan seuah website dengan tampilan yang menarik agar pengunjung tertarik dan betah mengunjungi website tersebut.

Sangat susah untuk membuat carousel dengan cara manual. Dengan adanya class carousel pada Bootstrap kita dapat dengan mudah membuat carousel. Kita juga dapat menambahkan caption pada carousel kita dengan tujuan promosi atau tujuan lainya dan pastinya tampilan dari carousel tersebut mewah dan responsive.

Yang harus kita lakukan pertama kali adalah menyiapkan beberapa file gambar yang akan kita gunakan menjadi gambar yang muncul pada carousel. Disini saya sudah menyediakan 3 file gambar untuk saya jadikan gambar yang muncul pada carousel.

Siapkan gambar pada folder dengan nama images, simpan gambar pada follder images tersebut.

Kemudian Masukkan Script berikut

Carrouselnya sudah jadi, taraaa. Kemudian tambahkan class grid untuk mengatur ukuran gambar dan mengatur letak dari gambar tersebut jika sobat tidak membutuhkan class tersebut hapus saja karena grid tidak wajib diletakkan pada carousel

<div class="col-md-8 col-md-offset-2">

Lalu untuk  menambahkan indicator dari carouselnya sobat harus menambahkan class berikut

<!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

Sobat Bisa sobat otak atik sendiri, silahkan ganti gambarnya pada tag img-src dan masukkan nama gambar, slahkan ganti <h3> dan <p> sesuai keinginan sobat

 <div class="carousel-inner" role="listbox">
                <div class="item active">
                <img src="Images/1.jpg" alt="SCRIPT_KIDDIES">
                <div class="carousel-caption">
                <h3>SCRIPT_KIDDIES</h3>
                <p>Tutorial Pemrograman Web, Mobile dan Design</p>
                </div>
                </div>

Untuk membuat icon panah dan ketika panah tersebut kita klik maka gamar tersebut akan berubah gunakan class berikut ini

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
        </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
        </a>
    </div>
    </div>

Dan hasilnya akan

Kesimpulan
Dengan adanya class carousel pada Bootstrap ini kita dimudahkan untuk membuat carousel / slideshow karena kita tinggal memanggil class Bootstrap dan memahami arti dari setiap class tersebut. hmm tetapi menurut saya dibandingkan dengan class Bootstrap yang lain carousel ini yang paling susah dari pada membuat class Bootstrap yang lain.

Referensi

• http://www.script-kiddies.org
• http://www.malasngoding.com
• http://www.w3school.com

Read More

Form Bootstrap

Muhammad Aqshol Rifanza - Kali ini saya akan berbagi cara membuat form dengan bootstrap.

Membuat Form Pada Bootstrap
Ada tiga model form :

• Form dengan model Vertikal
  Form dengan model vertikal ini merupakan form default Bootstrap
• Form dengan model Inline
  Form dengan model inline adalh sebuah form yang label dan form inputnya terletak sebaris
• Form dengan model Horizontal
  Form dengan model horizontal merupakan form yang memiliki bentuk horizontal. Artinya posisi label dan input form terletak Horizontal

Untuk membuat form dengan Bootstrap sobat dapat menggunakan class "form-control" pada tag <input>, <textarea>, <select> dan element form yang bisa digunakan lainya.

Membuat Form Vertikal

Membuat Form Inline

Membuat Form Horizontal

Kesimpulan
Bootstrap telah menyediakan class form yang responsive dan terlihat modern dan kita tinggal mengkreasikanya sesuai kita.

Referensi

• http://www.script-kiddies.org
• http://www.malasngoding.com
• http://www.w3school.com

Read More

Navigasi Bar Bootstrap

Muhammad Aqshol Rifanza - Untuk membuat navigation bar dengan Bootstrap tidaklah sulit. Seperti pada tutorial - tutorial Bootstrap sebelumnya sobat hanya perlu menambah class - class yang sudah di sediakan oleh Bootstrap. Navigation bar Bootstrap dibuat dengan menggunakan tag <nav>. Dan diletakkan dalam tag <body> html paling atas 

Membuat Navigasi Bar

Dari gambar diatas, disitu dijelaskan masing-masing kegunaan dari class-class yang dalam membuat navigator Bootstrap. Dapat dilihat pada contoh diatas untuk membuat menu navigation Bootstrap gunakan class

<nav class="navbar navbar-default">

class "navbar-default" digunakan untuk membuat navigation bar dengan model standart. Sobat bisa menggantinya dengan "navbar-inverse" untuk membuat menu navigation bar Bootstrap dengan model gelap.

<div class="container-fluid">

Digunakan untuk membuat sisi menu navigation penuh atau full. Sobat bisa menggantinya menjadi

<div class="container">

Untuk membuat sisi menu navigation bar tidak penuh dapat kita gunakan class

<div class="navbar-header">

Digunakan untuk membuat bagian header dari menu navigation Bootstrap. "nabar-header" untuk mendefinisikan bagian header menu navigation. dan "navbar-brand" digunakan untuk mendefinisikan judul webiste.

<ul class="nav navbar-nav">
                <li class="active"><a href="http://www.script-kiddies22.blogspot.co.id">Home</a></li>
                <li><a href="#">Profil</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Tutorial</a></li>
            </ul>

Class diatas digunakan untuk membuat menu navigation.

<ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            </ul>

Class diatas digunakan untuk membuat link menu yang terletak pada bagian sebelah kanan dari menu navigation bar Bootstrap.

Membuat Dropdown Pada Navigasi Bar

Membuat Navigasi Responsive

Kesimpulan
Dengan adanya class nav pada Bootstrap ini kita dimudahkan untuk membuat navigation bar pada sebuah website dan kita suguhkan dengan tampilan yang rapi dan modern dan tentunya responsive di semua resolusi layar.

Referensi

• http://www.script-kiddies.org
• http://www.malasngoding.com
• http://www.w3school.com

Read More

Navigasi Tabs dan Pils Bootstrap

Muhammad Aqshol Rifanza - Ini adalah class Bootstrap yang paling banyak digunakan dan sangat besar kegunaanya dalam membangun sebuah front-end yang modern dan sangat menghemat waktu. Yaitu sobat dapat membuat navgasi tabs dan pils dengan sangat cepat dan menghemat waktu. Karena sobat hanya perlu menambahkan class - class yang disediakan oleh Bootstrap untuk membuat navigasi yang berbentuk tabs dan navigasi pils dengan Bootstrap.

Membuat Navigasi Tabs

Untuk menambahkan menu dropdown kita bisa tambahkan script :

Membuat Navigasi Pills

Kesimpulan
Dengan adanya Bootstrap ini kita dapat dimudahkan dalam membuat navigasi yang responsive dan juga terlihat modern. Dan kita juga dapat menghemat waktu dalam membuat website. jadi intinya dengan adanya Class Bootstrap nav tabs dan pils ini dapat memudahkan kita untuk mempercantik tampilan website kita

Referensi

• http://www.script-kiddies.org
• http://www.malasngoding.com
• http://www.w3school.com

Read More

Panel Bootstrap

Muhammad Aqshol Rifanza - Panel adalah sebuah kotak yang memiliki garis dan padding. Bootstrap menyediakan class panel untuk membuat kotak yang memiliki heading dan footer kotak tersebut. Panel yangyang disediakan oleh Bootstrap terdiri dari panel heading atau kepala dari panel, Panel body atau badan dari panel, dan panel footer alias panel yang terletak pada bagian bawah sebagai footer.

Ada beberapa Class Panel yang disediakan oleb Bootstrap untuk membuat panel

• panel-default Merupakan class yang digunakan untuk membuat panel dengan warna standar alias bawaan dari Bootstrap
• panel-success Merupakan class yang disediakan Bootstrap untuk membuat panel berwarna hijau
• panel-info Merupakan class yang disediakan Bootstrap untuk membuat panel berwarna biru
• panel-warning Merupakan class yang disediakan Bootstrap untuk membuat panel berwarna kuning
• panel-heading Merupakan class Bootstrap yang digunakan untuk membuat bagian kepala dari panel tersebut
• panel-body Merupakan class yang disediakan Bootstrap untuk membuat bagian badan dari panel
• panel-footer Merupakan class Bootstrap yang disediakan Bootstrap untuk membuat panel bagian bawah atau footer

Unuk menggunakan model panel yang lain sobat dapat mengganti panel-default menjadi panel-success,panel-danger,panel-warning sesuai yang saya jelaskan diatas.

Kemudian berikan isi panel dengan membuat heading, panel-body dan panel-footer,  panel-heading dan panel-footer merupakan optional. Sobat bsa menggunakanya boleh tidak sesuai keinginan sobat

Kesimpulan

Dengan adanya panel ini kita dapat dimudahkan dalam pembuatan panel pada website kita tidak perlu membuat script CSS yang panjang, dan karena adanya Bootstrap ini kita dapat dengan mudah membuat panel dan merubah warna dari panel tersebut yaitu dengan memanggil class panel tersebut.

Referensi

• http://www.script-kiddies.org
• http://www.malasngoding.com
• http://www.w3school.com

Read More