Mengenal Ionic Framework

ionic-guide

MasPram – Semoga pembaca dalam keadaan sehat selalu, amin. Kali ini saya akan membahas mengenai Ionic Framework. Apa sih Ionic Framework? mungkin dari namanya kelihatannya merupakan nama minuman. Bukan, ionic bukan nama sebuah minuman melainkan sebuah framewok yang dikhususkan untuk membangun aplikasi mobile hybrid dengan HTML5, CSS dan AngularJS. Ionic menggunakan Node.js SASS, AngularJS sebagai engine-nya. Ionic dilengkapi dengan komponen-komponen CSS seperti button, list, card, form, grids, tabs, icon dan masih banyak lagi. Selain itu memungkinkan aplikasi dapat berjalan dibeberapa platform smartphone. Jadi Ionic itu merupakan teknologi web yang bisa digunakan untuk membuat suatu aplikasi mobile. Karena hybrid maka aplikasi hanya dibuat 1 kali tetapi sudah bisa dirilis di lebih dari 1 platform alias cross-platform.

Kelebihan

  • Mempersingkat waktu pembuatan dan pengambangan.
  • Gratis dan bebas digunakan untuk kepentingan pribadi maupun komersil.

Kekurangan

  • Masih sebatas framework, jika untuk membungkusnya menjadi aplikasi Android, iOS atau windows phone tetap menggunakan Phonegap

Cara menggunakan Ionic Framework

  • Untuk mempelajari lebih lanjut ionic framework dapat mengunjungi situs resminya di Ionic Framewok
  • Install terlebih dahulu Git For Windows dan opisional console [Disini]
  • Install terlebih dahulu Node.js  [Disini]
  • Buka CMD atau Command Prompt. Cek apakah sudah terinstall node.js atau belum. Ketikkan node -v

nodecek

  • Cek NPM (Node Package Manager). Ini sudah terinstall bersamaan dengan install nodejs. Tools ini akan sangat membantu saat menambahkan module nodejs akan terinstall secara default di C:\Program Files\nodejs\node_modules\npm\bin.
    Ketikkan npm -v di CMD

npmcek

  • Ketikan npm install –g cordova kemudian enter, Tunggu sampai proses install cordova selesai dan ini membutuhkan koneksi internet. Jika seudah selesai buka cmd dan cek cordova
  • Ketikan npm install –g ionic kemudian enter, Tunggu sampai proses install cordova selesai dan ini membutuhkan koneksi internet. Jika seudah selesai buka cmd dan cek ionic
  • Selanjutnya jalankan ionic menggunakan CMD, ketikkan seperti dibawah ini

ionicstart

  • Akan otomatis membuat folder myapp di desktop anda

des

  • Selanjutnya jalankan file project yang sudah terbuat tadi seperti dibawah ini, secara otomatis akan muncul di webbrowser anda.

ionicmyapp

myfirstapp

 

Sekian dan terimakasih, semoga bermanfaat 🙂

Advertisements

Sejarah phpMyAdmin

MasPram – Assalamualaikum, semoga pembaca dalam keadaan sehat selalu. Kali ini saya akan membahas mengenai apa itu phpMyAdmin, sejarah, dan fungsinya. Monggo [Silahkan] disimak.

Apa itu phpMyAdmin?

phpmyadmin

Tampilan phpMyadmin

phpMyadmin merupakan perangkat lunak bebas (Open Source) yang ditulis dalam bahasa pemrograman PHP yang digunakan untuk menangani administrasi MySQL melalui Jejaring Jagat Jembar (World Wide Web). phpMyAdmin mendukung berbagai operasi MySQL, diantaranya (mengelola basis data, tabel-tabel, bidang (fields), relasi (relations), indeks, pengguna (users), perizinan (permissions), dan lain-lain). Intinya software ini digunakan untuk pengolahan database berbasis MySql.

Sejarah

Pada mulanya sebelum ada phpMyAdmin para pengelola database menggunakan perintah command text. Pada linux menggunakan Terminal dan sedangkan pada pengguna Windows menggunakan Command Prompt (Cmd).

Karena MySQL adalah sistem manajemen database RDBMS tanpa GUI untuk mengelolanya. Semakin berkembangnya penggunaan MySQL memicu pihak pengembang ketiga untuk mengembangkan sistem GUI grafis untuk melakukan manajemen database pada MySQL.

image

Tobias Ratschiller

Pengembangan phpMyAdmin dimulai pada tahun 1998 oleh Tobias Ratschiller seorang konsultan IT. Ratschiller mengerjakan sebuah program bernama MySQL-Webadmin dengan bebas, yang merupakan produk dari Petrus Kuppelwieser, yang telah berhenti mengembangkannnya pada saat itu. Ratschiller menulis kode baru untuk phpmyadmin, dan ditingkatkan pada konsep dari proyek Kuppelwiesser. Ratschiller meninggalkan proyek phpMyAdmin pada tahun 2001. Sekarang, Sebuah tim dari delapan pengembang yang dipimpin oleh Oliver Muller meneruskan pengembangan phpMyAdmin di SourceForge.net.

sourceforge

Sourceforge.net

Fitur

Beberapa fitur dalam phpMyAdmin :

  • Antarmuka berbasis web.
    • Dukungan banyak fitur MySQL:
      • menelusuri dan drop basisdata (database), tabel, pandangan (view), bidang (fields) dan indeks.
      • membuat, menyalin, drop, dan mengubah nama basis data, tabel, kolom dan indeks.
      • pemeliharaan server, basis data dan tabel, dengan server konfigurasi.
      • melaksanakan, mengedit dan penunjuk pernyataan-SQL, bahkan batch-queries
      • mengelola pengguna MySQL dan hak istimewa.
      • mengelola prosedur penyimpanan.
  • Impor data dari CSV dan SQL
  • Ekspor data ke berbagai format: CSV, SQL, XML, PDF, ISO / IEC 26300 – OpenDocument Text dan Spreadsheet, Word, Excel, LATEKS dan lain-lain
  • Membuat grafik PDF dari tampilan basis data anda.
  • Membuat kompleks query menggunakan Query-by-example. (QBE)
  • Pencarian global dalam basis data.
  • Transformasi data disimpan ke dalam format yang menggunakan satu set fungsi yang telah ditetapkan, seperti menampilkan data blob-data atau download-link.

Sejak versi 3.0.0, phpMyAdmin bergabung dengan GoPHP5 dan bisa menciptakan kompatibilitas kode dengan versi PHP dan MySQL lama. Versi 3 ke atas memerlukan setidaknya PHP 5.2 dan MySQL 5. PhpMyAdmin pernah memenangkan beberapa penghargaan, diantaranya sebagai aplikasi berbasis PHP terbaik serta mendapatkan predikat sebagai “Tool terbaik untuk SysAdmins” dari komunitas SourceForge.net. Hingga kini PhpMyAdmin telah dikembangkan lebih dari belasan tahun dan secara konsisten memperbaiki kualitasnya.

 

Cara menampilkan dan mengatur datepicker bootstrap hanya Bulan dan Tahun saja

Assalamualaikum, Pada postingan sebelumnya telah dibahas tentang menampilkan hanya tahun saja [disini], kali ini saya akan membahas bagaimana cara menampilkan datepicker bootstrap hanya yang ditampilkan tahun dan bulan saja. Yang semulanya datepicker menampilkan tampilan kalender pada umumnya, kali ini hanya tahun dan bulan saja.Monggo diperhatikan, kemudian dipraktekkan.

Tambahkan script dibawah ini pada script code javascript untuk memanggil datepicker bootstrap:

$("#datepicker").datepicker( {
   format: 'MM yyyy',
                viewMode: "months",
                minViewMode: "months",
                autoClose: true
});

month year bootstrap

Untuk lihat hasilnya : Demo

Semoga bermanfaat 🙂

Jika ada masalah hubungi admin melalui : Facebook | WA { +6285273357370 }

 

Cara Merubah Format Bahasa Bootstrap Datepicker

datepicker-indonesia

Assalamualaikum, semoga dalam keadaan sehat selalu. Kali ini saya akan membahas bagaimana caranya merubah tampilan bootstrap datepicker mengikuti lokasi atau negara yang diingingkan. Seperti contoh, kita menggunakan bootstrap datepicker dan ingin merubahnya menggunakan format bahasa indonesia, secara default bootstrap datepicker menggunakan format bahasa inggris. Cukup mudah untuk merubahnya anda cukup mengikuti langkah-langkah dibawah ini :

  • Cari format bahasa yang kita inginkan di CDNJS.com
  • Setelah memilih bahasa yang diinginkan copy script yang ada di cdnjs.com tadi.
  • Masukkan link script yang telah di copy tadi kedalam stuktur HTML tepat berada didalam “<Head>disini </Head>”
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/id.js
  • Lalu buat form untuk memunculkan bootstrap datepickernya.
<div class="container">
<h3>Bahasa Indonesia</h3>
<div class="form-group col-md-3">
<div class='input-group date datepicker' >
<input type='text' class="form-control placementT" id="fecha">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
                                                                        

</div>

  • Kemudian sisipkan script code javascript dibawah ini didalam “<Head>disini</Head> seperti dibawah ini.
 
        $(document).ready(function () {
            $('.input-group.date').datetimepicker({
                locale: 'id',
            });
        });
    

Keterangan :

  • Pada script javascript, locale: ‘id’ anda dapat merubah id menjadi de (bahasa jerman) dll.
  • Pastikan anda sudah memasukkan atau memanggil link/file bootstrap.min.css,  jquery.min.js, bootstrap-datetimepicker.min.css, moment.js, dan bootstrap-datetimepicker.min.js didalam head.
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/id.js"></script>

Demo | Download [Dropbox] | Download [Mediafire]

Semoga bermanfaat dan terimakasih atas kunjungannya 🙂

 

Jika ada masalah hubungi admin melalui : Facebook | WA { +6285273357370 }

 

 

 

 

Cara merubah ukuran text input Bootstrap menggunakan Css3

Assalamualaikum, sesuai judul diatas maka kali ini saya akan membahas bagaimana caranya merubah ukuran text input bootstrap menggunakan css3. Sering kali kita lihat pada tampilan text input, select dan button bootstrap terkadang extra large ataupun besar, membuat tampilan kurang enak dipandang. Nah, terkadang kita menggunakan class input-lg, input-xm juga tidak dapat merubah ukurannya. Tidak perlu khawatir kita akan merubahnya menggunakan bantuan css3.

Berikut ini penjelasannya :

HTML :

<input type="text" class="input-small" />

CSS3:

.input-small {
  width: 210px;
  height: 20px !important;
  margin-bottom: 10px !important;
  line-height: 11px !important;
  font-size: 10px !important;
}

Demo

Jika ada masalah hubungi admin melalui : Facebook | WA { +6285273357370 }

Cara menampilkan dan mengatur datepicker bootstrap hanya Tahun saja dan Posisi.

Sebelum memulainya, masih ada yang bertanya apa itu bootstrap? kalau masih banyak yang belum tahu sebelumnya sudah dibahas disini. Untuk bagaimana penggunannya silahkan kunjungi situs resmi Bootstrap disana lengkap bagaimana menggunakan bootstrap.

Kali ini saya akan membahas bagaimana cara menampilkan datepicker bootstrap hanya yang ditampilkan tahun saja. Yang semulanya datepicker menampilkan tampilan kalender pada umumnya, kali ini hanya tahun saja. Monggo diperhatikan, kemudian dipraktekkan.

Tambahkan script dibawah ini pada script code javascript untuk memanggil datepicker bootstrap:

$("#datepicker").datepicker( {
    format: " yyyy",
    viewMode: "years", 
    minViewMode: "years"
});

Maka hasilnya seperti ini:

year

Misal pada tampilan datepicker muncul diposisi atas, untuk menampilkan datepicker diposisi bawah maka tambahkan script ini dibawah javascript minViewMode diatas :

 orientation: 'auto top'

Dapat digunakan di ASP.NET VB

Demo

WAMP SERVER

wamp-server-install

Wamp Server adalam kepanjangan dari singkatan dari dari Windows and the principal components of the package:Apache, MySQL and PHP ( Perl or Python). Wamp server tidak jauh berbeda fungsinya dengan aplikasi yang sering digunakan kebanyakan programer yaitu Xampp. Dimana Wamp Server dapat dijalankan komputer tanpa memerlukan sambungan Internet. Dengan kata lain, wampserver digunakan untuk membuat web server lokal pada komputer guna memudahkan perancangan dan pembuatan web sebelum dipublikasikan ke internet atau jaringan lokal (LAN).

WampServer is a Windows web development environment. It allows you to create web applications with Apache2, PHP and a MySQL database. Alongside, PhpMyAdmin allows you to manage easily your

Untuk penjelasan selanjutnya dan download aplikasinya silahkan kunjungi situs resmi Wamp Server

mas pramMas Pram, Lahir di Rantau Prapat, 21 Maret 1993. Saat ini aktif di dunia pendidikan sebagai staff pengajar di berbagai sekolah menengah kejuruan  dan Perguruan Tinggi Swasta di Kota Pekanbaru Riau.  Keahlian dibidang Website Dev, Game Dev dan Grafis.

Info Contact :

Facebook   : Pram Eko

No.Hp        : 085273357370

Semoga bermanfaat dan terimakasih