Aplikasi PHP

Apa itu PATEN

By // In Aplikasi PHP, Tutorial PHP // 2015.12.21 // // No Comments // Read More

PATEN (Pelayanan Administrasi Terpadu Kecamatan) merupakan aplikasi terapan dari hadirnya Peraturan Menteri Dalam Negeri Nomor 4 Tahun 2010 Tentang Pedoman Pelayanan Terpadu Administrasi Kecamatan. Aplikasi Simpaten ini merupakan aplikasi yang akan mempersingkat waktu dan mempermudah masyarakat untuk mendapatkan layanan perijinan pada tingkat kecamatan. Maksud penyelenggaraan PATEN adalah mewujudkan Kecamatan sebagai pusat pelayanan masyarakat dan menjadi simpul pelayanan bagi kantor/badan pelayanan terpadu di kabupaten/kota. PATEN mempunyai tujuan untuk meningkatkan kualitas dan mendekatkan pelayanan kepada masyarakat. 

oke itu sedikit informasi mengenai apa itu PATEN, semoga dapat menambah wawasan saudara sekalian dan dapat diterapkan diseluruh Indonesia dengan baik. 

untuk melihat sekilas seperti apa gambaran Aplikasi PATEN yang kami paparkan silahkan lihat portofolio kami mengenai SIMPATEN yang kami terapkan di salah satu Kabupaten di Jawa Tengah

salam visualmedia.web.id

Apa Itu Bootstrap?

By // In Aplikasi PHP // 2015.12.12 // // No Comments // Read More

Apa itu bootstrap?

Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Bagaimana Belajar Bootstrap untuk pemula?

Untuk memulai belajar Bootstrap, Anda harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar tersebut. Baiklah langsung saja.

Persiapan:

  1. Anda Harus memiliki file distribusi BootstrapUntuk menggunakan bootstrap, terlebih dahulu Anda harus mendownload resource file atau file distribusi yang disediakan oleh bootstrap di situs resminya getbootstrap.com. Pada halaman tersebut, terdapat tombol Download Bootstrap sebagaimana terlihat pada gambar diatas, langsung saja! klik tombol tersebut. Kemudian pilih lagi Download BootstrapSetelah didownload, kemudian extract menggunakan program seperti 7zip (Gratis) atau winRAR (shareware). Sebetulnya, Anda juga bisa membuka file tersebut dengan aplikasi bawaan windows dengan cara membuka file tersebut, kemudian copy seluruh file dan paste-kan ke folder lain.
  2. Download jQuery Library Untuk Bekerja OfflineUntuk bisa mengaplikasikan bootstrap component seperti modal dialog, navigation bar dan lainnya yang membutuhkan boostrap JS, Bootstrap JS juga membutuhkan jQuery library agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery di dalam file download-nya untuk itu, kita harus mendownloadnya secara terpisah. Hal ini dilakukan agar kita bisa bekerja dan menggunakannya secara offline (tanpa koneksi internet). Silahkan download jQuery library dengan menuju situs resmi jQuery Download, pilih jQuery 1.x kemudian, download dengan mengklik link Download the compressed, production jQuery 1.11.3
  3. Anda harus memiliki code editor.Code editor penting sekali untuk memanipulasi file yang akan kita kembangkan khususnya file HTML, CSS dan Javascript sebagaimana file tersebut terdapat pada bootstrap. Anda juga bisa menggunakan Code Editor dari kami yang dibuat untuk tes atau uji coba kode. Jangan pernah menggunakan Word processor (Microsoft Word, dll) ataupun notepad untuk memanipulasi file-file tersebut. Karena aplikasi tersebut tidak cocok dan terdapat banyak kekurangan yang akan membingungkan kita sendiri nantinya.Ada banyak sekali code editor yang tersebar di internet yang dapat kita gunakan baik yang gratis maupun yang berbayar. Sebagai pemula, mungkin kita bisa memulai dengan menggunakan Notepad++. Aplikasi ini gratis dan banyak digunakan oleh developer. Download aplikasi Notepad++

Memulai…

Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:

  1. Buat Folder BaruBuatlah folder baru, beri nama misalkan “Belajar_Bootstrap”.
  2. Copy seluruh file Bootstrap ke dalam Folder Baru TersebutCopy folder css, fonts dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder baru tersebut (Belajar_Bootstrap)
  3. Copy file jQuery ke dalam folder jsCopy dan Gabungkan file jquery-1.11.3.min.js yang telah kita download kedalam folder js punya bootstrap tadi, hal ini dilakukan untuk mempermudah proses pembelajaran.
  4. Buat file htmlBuat file baru dengan notepadd++ kemudian copy code snippet yang saya sediakan dibawah ini, kemudian save dan berilah nama seperti: index.html atau default.html dan simpanlah file tersebut ke folder “Belajar_Bootstrap” yang telah dibuat diatas. Berikut kodenya:
<!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">
    <title>Bootstrap 3.3.5 Starter Template - by dul.web.id</title>

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

    <!-- HTML5 Shim and Respond.js 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>
    <!-- AWAL CONTENT  -- hapus dari sini kebawah (sampai AKHIR CONTENT) -->
    <div class="container">
      <h1>Apa Kabar Dunia?</h1>
      <!-- Small modal -->
      <button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Klik Aku</button>

      <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">

            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
            </div>
            <div class="modal-body">
              Hai... salam kenal dari <strong>dul</strong>. Jika dialog ini muncul dan Anda bisa baca tulisan ini berarti Bootstrap berhasil di load dan terintegrasi dengan baik. Selamat Belajar
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- AKHIR CONTENT - dari sini kebawah jgn dihapus -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Saatnya untuk Uji Coba

Buka file html yang telah dibuat dengan code snippet diatas, buka dengan browser terbaru misalkan Google Chrome atau Firefox jangan gunakan internet explorer. Jika file Bootstrap.css berhasil diload maka tombol button akan memiliki style ala bootstrap seperti ini:

Kita coba lagi apakah bootstrap.js berhasil di load dengan cara mengklik tombol tersebut. Apabila muncul dialog box, maka bootstrap.js berhasil di load dan siap digunakan sebagai template. Gunakan template ini untuk setiap materi pembelajaran bootstrap dan hapuslah AWAL CONTENT sampai AKHIR CONTENT untuk memulai file baru kosong tanpa konten.

Tidak mau repot? Pengen Instant? Download Aja!

Nggak mau ngikutin step-step yang sudah diuraikan diatas. Baik, dul akan share link download siap saji yang bisa digunakan untuk memulai belajar bootstrap. Ini adalah bootstrap v3.2.0 3.3.03.3.1 3.3.5 yang didalamnya sudah dul berikan template seperti diatas. Download disini

Langkah Selanjutnya Apa?

Langkah selanjutnya mungkin Anda harus sering-sering mengunjungi situs resmi bootstrap di getbootstrap.com dan mempelajari dokumentasi yang telah disediakan. disini, kami sediakan tutorial bootstrap berbahasa Indonesia secara bertahap. Nantikan Artikel menarik lainnya mengenai Bootstrap.


Update:

Bootstrap saat ini telah memiliki versi baru yaitu: Bootstrap 4 (Versi 4). Setelah versi final-nya release, dul akan mencoba membahasnya disini. Untuk info selengkapnya, silahkan kunjungi situs resminya di getbootstrap.com

Bermain dengan Bootstrap

Untuk belajar, mencoba dan bermain dengan bootstrap, klik tombol dibawah ini:

Bootstrap 3 Play

Belajar Bootstrap Itu Mudah

Belajar bootstrap itu mudah, tapi memang dibutuhkan pengetahuan dasar tentang HTML, CSS dan Javascript. Itu semua bisa Anda pelajari langkah demi langkah. selamat berkreasi 🙂

Sistem Informasi Manajemen Pengelolaan Arsip Surat (SIMPAS)

By // In Aplikasi PHP // 2015.12.12 // // 5 Comments // Read More

Selamat Datang semua, kali ini saya akan share pemanfaatan Bootstraps yang kami terapkan pada aplikasi yang kami buat yaitu Sistem Informasi Manajemen Pengelolaan Arsip Surat (SIMPAS), yang merupakan software /aplikasi yang digunakan untuk sebuah organisasi untuk mencatat data keluar masuk surat, sehingga organisasi bisa tau dengan jelas surat masuk atau surat keluar. software ini juga bisa di gunakan berbagai organisasi seperti koperasi,sekolah,perusahaan,dll.
Dengan fitur yang lengkap aplikasi ini akan memberikan kemudahan dalam proses Manajemen Surat Menyurat di instansi anda.

Manajemen Surat

Disposisi

Korespondensi Surat

Surat Internal

Surat Edaran

Fitur ini akan mencatat surat masuk dan surat keluar sehingga surat akan terarsip dengan baik
Fitur ini berguna untuk mendistribusikan surat masuk, sehingga proses distribusi surat lebih efektif dan efisien
Fitur ini digunakan untuk mencari, mencatat, keterkaitan antar surat,dengan mencatat keterkaitan surat yang masuk
fitur yang digunakan untuk surat menyurat secara elektronik (paperless)
Hampir sama dengan surat internal fitur ini dapat mengirimkan surat edaran ke semua pengguna tanpa menggunakan kertas (paperless)
berikut screeshoot aplikasinya :
beranda
manajemen surat masukForm Input Surat Masuk
Itulah sedikit tampilan dan fitur cukup lengkap. teknologi yang kami gunakan yaitu php, mysql, serta theme bootstraps tentunya untuk tampilan lebih resposive dan elegan. bagi yang belum tau apa itu bootstraps silahkan buka artike kami tentang Apa itu Bootstraps ?Semoga bermanfaat dan kalian juga dapat mengimplementasikannya. salam visualmedia.web.id