ILHAM

Assalamualaikum, malam ini saya membuat post disini bukan hanya untuk meneruskan postingan yang kemarin tapi juga untuk memenuhi kewajiban saya saat melaksanakan PKL, yaitu jurnal Mingguan di Blog.. Untuk memenuhi tugas Sistem Rupabumi saya akan menggunakan Framework Laravel. Tapi sebelumnya, saya akan kenalkan dahulu siapa sih Laravel teh? haha

Laravel? What the heck is that?!

Laravel adalah sebuah framework yang digunakan untuk web development di PHP.

Kelebihannya:

Ekspresif, Simple, dan Accessible

Saya Mau Coba Nih, Bijimane Installnya?

Aplikasi Wajib yang mesti di install terlebih dahulu adalah, composer. Kamu bisa download di https://getcomposer.org/download/

1.Install Via Installer Laravel

composer global require "laravel/installer=~1.1"

Selanjutnya

laravel new sisfo

2. Install Via Composer Project

composer create-project nama_project_kamu --prefer-dist

3 Langsung
Atau kamu bisa langsung download dan simpan di htdocs seperti biasa

Nih contohnya, kalau kamu udah install:

Mohon maaf bila ada salah kata, jujur saja... Ini pengalaman pertama saya untuk terjun ke dunia web development.

Selanjutnya, kita akan mulai ke build aplikasi sistem rupabumi tea...bagaimana caranya, terus troubleshot kalo ada kesalahan. Stay tune dan salam DAMAI :)

PHP That Doesn't Hurt. Code Happy & Enjoy The Fresh Air

Membuat Aplikasi Sistem Rupabumi Desa: Riset

Kali ini saya akan menceritakan aplikasi-aplikasi apa saja yang di gunakan untuk membantu para pegawai di instansi pemerintahan...
Karena saya PKL di Bagian Perlengkapan dan Keuangan jadi hanya ada dua Aplikasi, yaitu:

SIMDA (Sistem Informasi Manajemen Daerah)

Sejalan dengan RPJM Tahun 2010-2014, dalam Renstra Tahun 2010-2014,Deputi Pengawasan Bidang Penyelenggaraan Keuangan Daerah telah menetapkan Pengembangan Sistem Informasi Manajemen Daerah sebagai kegiatan untuk mendukung capaian indikator kinerja” Meningkatnya Tingkat Opini BPK terhadap LKPD”.

Untuk mendukung tujuan tersebut, sejak tahun 2003, Deputi Pengawasan Bidang Penyelenggaraan Keuangan Daerah membentuk Satuan Tugas Pengembangan Sistem Informasi Manajemen Daerah (SIMDA), dengan tugas:

1. Mengembangkan/membuat dan melakukan pemutakhiran Program Aplikasi Komputer SIMDA yang berkaitan dengan pembangunan / peningkatan kapasitas pemerintah daerah yang sesuai dengan peraturan perundang-undangan yang berlaku atau dalam rangka pemenuhan kebutuhan manajemen daerah, mengarah ke grand design Data Base Management System (DBMS).

2. Memberikan bimbingan teknik / pelatihan kepada Satgas SIMDA Perwakilan BPKP yang akan ditugaskan dalam asistensi/implementasi Program Aplikasi Komputer SIMDA.

3. Membantu Satgas SIMDA Perwakilan BPKP melakukan asistensi implementasi Program Aplikasi Komputer SIMDA pada pemerintah daerah.

Tujuan pengembangan Program Aplikasi Sistem Informasi Manajemen Daerah ini adalah:

Menyediakan Data base mengenai kondisi di daerah yang terpadu baik dari aspek keuangan, aset daerah, kepegawaian/aparatur daerah maupun pelayanan publik yang dapat digunakan untuk penilaian kinerja instansi pemerintah daerah.
Menghasilkan informasi yang komprehensif, tepat dan akurat kepada manajemen pemerintah daerah. Informasi ini dapat digunakan sebagai bahan untuk mengambil keputusan.
Mempersiapkan aparat daerah untuk mencapai tingkat penguasaan dan pendayagunaan teknologi informasi yang lebih baik.
Memperkuat basis pemerintah daerah dalam melaksanakan otonomi daerah.

Sumber: http://www.bpkp.go.id/sakd/konten/333/Versi-2.1.bpkp

SIMKEU (Sistem Manajemen Keuangan)

Sayangnya saya gak nemu secara persis penjelasan tentang Aplikasi SIMKEU ini, jadi saya jelaskan saya menurut penjelasan sendiri yang mudah dipahami mungkin, hehe

SIMKEu ini sama seperti simda, namun khusus untuk keuangan. Jika kamu nanti di bagian Keuangan di Pemerintahan. Pasti kerjaan nya Input Data terus pake aplikasi ini.hehe

Kekurangan pada kedua aplikasi di atas menurut saya adalah, pada USER INTERFACE nya yang masih jadul. Jadu gak enak di pandang pada zaman UI yang keren-keren pada saat ini

Aplikasi Yang Ada di Pemerintahan

Bootstrap: Grid System

Sebetulnya dalam hal ini saya masih belajar, dan ini pun baru saya pelajari. Karena basic saya adalah jaringan, sekarang lagi ngulik tentang web development hehe.

btw segitu aja basa-basinya sekarang langsung to the point aja. Disini saya akan berbagi cara menambahkan Navbar menggunakan Bootstrap. Untuk yang belum tau Bootstrap dan tidak tahu cara installasinya, silahkan anda baca disini

Pertama

Saya menggunakan basic template Bootstrap, berikut source code nya. Silahkan anda ketik dan save dengan nama index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Kedua

Tambahkan script di bawah ini kedalam index sesudah tag <code>

Untuk desain komponen nya, anda bisa memilih di http://getbootstrap.com/components/#navbar

Ini cuman navbar default nya saja... hehe

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Bootstrap - Menambahkan Navigation Bar

Apa itu Bootstrap?

Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development, Atau lebih jelasnya:

Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.

Apa saja kelebihan Bootstrap?

1. Responsif

Singkat saja maksud dari responsif disini adalah tampilan yang terlihat akan menyesuaikan diri secara otomatis dengan device kita. Contohnya jika kita buka template kita di smartphone maka templatenya akan mengikuti ukuran dari layar smartphone kita

2. Punya Banyak Fitur

Twitter sendiri menyediakan cukup banyak class (dalam CSS) yang bervariasi dan mengutamakan keindahan yang mana akan lebih mempermudah kita mengerjakan suatu web

3. Compatible Dengan Banyak Browser

Class-class yang dibuat dalam bootstrap sudah compatible dengan browser2 favorit agan semua seperti mozila, chrome, opera dsb sehingga membuat bootstrap sangatlah flexible

4. Sudah Support HTML5 dan CSS3

HTML5 dan CSS3 adalah versi terbaru dan terupdate dari kedua markup language tersebut. Sehingga kita tidak kehilangan fitur2 dari mereka berdua.

Bagaimana cara mendapatkan Bootstrap?

Kamu bisa langsung download di web resmi nya http://getbootstrap.com/

Bagaimana cara installasinya?

Setelah mendownload Bootstrap, kamu ekstrak kemudian simpan hasil ekstrak tadi ke folder webroot/htdocs kamu.

Template Default Bootstrap

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Silahkan anda copy dan beri nama index.html di folder htdocs/webroot bootstrap tadi

Hasilnya:

Persentasi dan Demo Aplikasi Sistem Rupabumi Desa

Is This Final Episode? Never!

Desain User Interface Sistem Rupabumi Desa

Laravel? What the heck is that?!

Kelebihannya:

Saya Mau Coba Nih, Bijimane Installnya?

PHP That Doesn't Hurt. Code Happy & Enjoy The Fresh Air

Membuat Aplikasi Sistem Rupabumi Desa: Riset

SIMDA (Sistem Informasi Manajemen Daerah)

SIMKEU (Sistem Manajemen Keuangan)

Aplikasi Yang Ada di Pemerintahan

Apa itu Grid?

Mobile

Konten

Tata Letak

Progressive Enhancement

Cara menggunakan Bootstrap grid System

Bootstrap: Grid System

Pertama

Kedua

Bootstrap - Menambahkan Navigation Bar

Apa itu Bootstrap?

Apa saja kelebihan Bootstrap?

Bagaimana cara mendapatkan Bootstrap?

Bagaimana cara installasinya?

Template Default Bootstrap

Getting Started With Bootstrap

PKL Rasa Sekolah, Udah Nikmatin Aja...

ABOUT AUTHOR

LATEST POSTS

Categories

Advertisement

Recent Posts

About Me

Popular Posts

Advertisement

More like this

More like this

More like this

Laravel? What the heck is that?!

Kelebihannya:

Saya Mau Coba Nih, Bijimane Installnya?

More like this

More like this

SIMDA (Sistem Informasi Manajemen Daerah)

SIMKEU (Sistem Manajemen Keuangan)

More like this

Apa itu Grid?

Mobile

Konten

Tata Letak

Progressive Enhancement

Cara menggunakan Bootstrap grid System

More like this

Pertama

Kedua

More like this

Apa itu Bootstrap?

Apa saja kelebihan Bootstrap?

Bagaimana cara mendapatkan Bootstrap?

Bagaimana cara installasinya?

Template Default Bootstrap

More like this

More like this

ABOUT AUTHOR

LATEST POSTS

Categories

Advertisement

Recent Posts

About Me

Popular Posts

Advertisement