pengelanamuslim: April 2016

Archive for April 2016

Penggunaan Vue.Js dengan Node.Js dan Express.Js

April 18, 2016 1 Comment

Asalamualikum Wr. Wb. Seharian ini saya sudah berhasil menuliskan 7 artikel sekaligus dan ini merupakan sebuah rekor baru bagi saya yang biasanya menulis 2 artikel seminggu. Nah pada kesempatan kali ini saya akan menuliskan artikel tentang Penggunaan Vue.Js dengan Gabungan Node.Js dan Express.Js . Dulu saya pernah menulis artikel mengenai penginstalan dan contoh dari penggunaan NodeJs, jadi jika nda ingin belajar terlebih dahulu mengenai node js silahkan kunjungi Cara Menginstal NodeJs dan Framework Express di Windows .

Baiklah, Langkah awal yang harus diperhatikan jika ingin mengkolaborasikan noed js dengan vue js adalah pastikan node js sudah terinstal dikomputer. Untuk instalasi silahkan ikuti panduan di vido ini : https://www.youtube.com/watch?v=9qN3VioUedk atau link berikut : http://zenhuzaini.blogspot.co.id/2015/11/cara-menginstal-nodejs-dan-framework.html .

Penginstalan Express & membuat projectnya

Buat sebuah folder (letakkan terserah, bias di htdocs atau bukan) dan beri nama sembarang seperti:
Buka command promt, pastikan anda masuk cmd dengan mde administrator
Masuk ke folder di atas melalaui command promt
Masukkan “npm install –g express-generator” tanpa tanda petik., proses ini adalah proses penginstalan atau pemasangan framework express
Langkah selanjtnya yaitu membuat folder project express baru dengan cara memasukkan “ express namafolder –e” , nama folder terserah.
Setelah itu unutk mengintsla bebrapa dependency atau modul dari node pada project maka masukkan : “ cd namafolder && npm install” karena nama folder saya adalah p_vne maka menjadi “cd p_vne && npm install”.
Jika sudah, silahkan anda coba dengan memasukkan “npm start “ tanpa tanda petik kemudian coba cek di browser dengan alamat : https://localhost:3000 jika tampil seperti di bawha ni berarti anda berhasil menginstall framework express dan projectnya benar.

Mengkonfigurasi Project

Setelah berhasil menginstall express js ,langkah selanjutnya adalah dengan menginstall modeule vue .js. dengan cara :

Matikan terlebih dulu sambungan nodenya pada command promt dengan menekan tombol ctrl+c secara bersamaan.
Setelah itu masukkan “npm install –g vue” unutk menginstall modeule vue. Namun, jangan di close dulu cmdnya karena nati akan digunakan lagi unutk mengaktifkan projek node dan express.
Setelah itu buka project express yang sudah di buat tadi, kemudian buka file app.js dengan text editor. Disini saya akna menggunakan sublime.
Setelah itu ubah dir pathnya , ubah dari ‘public’ menjadi ‘node_modules’ . dimana fungsi dir ini akan berguna bagi kita unutk mengakses modul yang telah kita install.
menjadi
Setelah di ubah kemudian masuk ke folder Routes, dan bukalah file index.js
Pastikan sisi file tersebut sama seperti di bawah ini
Kemudian buka folder public dan masuklah di folder view kemudian buka file index.js dengan text editor

Setelah itu ubah isi dari file apps tersebut menjadi seperti di bawah ini

<!DOCTYPE html>
<html>
<head>
 <title><% title %></title>
</head>
<body>
<!-- meemanggil id app1 yang sudah dideklarasikan
di  viewmodel -->
<div id="demo"> 
 <input v-model="message" placeholder="ini">
 <!-- variable yang berisi nilai, 
 dimana variable ini juga di set di instansi vue -->
 <h2>{{message}}</h2>

 <h5>pretag</h5>
 <pre>
  {{ $data | json}} 
  <!--fungsi json untuk 
  mengirim data yang di ubah 
  dan menampilkannya dengan variable $data-->
 </pre>
</div>

<!-- meload vue js yang berada di satu folder-->
<script  type="text/javascript" src="/../vue/dist/vue.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script> -->

<script>
//viewmodel
var demo = new Vue({ 
 el: '#demo', 
 data: { message: 'Hello Zen!!!' } });

</script>
</body>
</html>

Kemudian jika sudah selesai, buka cmd kembali dan ketikkan “npm start”.
Kemudian masuk ke browser masukkan alamat http://localhost:3000/ di serach bar seperti di bawah ini

Nah, itu merupakan contoh dasar penggunaan Vue Js, Node Js dan Express Js dan penggunaan vue js sebagai framework front end untuk node js bisa lebih di tingkatkan.Semoga dapat bermanfaat ya, ingat jika memeiliki pertanyaan silahkan tulislah di komentar insyaAllah saya akan coba membantu sebisa saya Terimkasih. Wassalamaualaikum wr. wb.

Tutorial Vue.Js Bagian 6 : Contoh Komponen Pada Vue.js

April 18, 2016 Add Comment

Sekarang saya akan memberikan contoh terkait komponen pada vue js mengingat saya sudah menshare artikel tentang Tutorial Vue.Js Bagian 1 : Tentang Vue.Js , mengetahui bagaimana cara menginstal atau memasang vue.js , contoh helo world dengan penerapan reactive data binding, Contoh Validasi Input Data dengan V-SHOW, V-IF pada Vue.js dan contoh event handling pada vue.js . saya pikir ini saatnya untuk memperkenalkan vue component yang lengkap dengan contohnya.

Contoh Runningan programnya

Tutorial Vue.Js Bagian 6 : Contoh Komponen Pada Vue.js Publish

Dan berikut ini adalah source code dan penjelasannya

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<!-- meemanggil id app1 yang sudah dideklarasikan
di  viewmodel -->
<div id="app">
<!-- template dan atribut yang mengacu pada modelview -->
 <dihitung nama="Likes"></dihitung>
 <dihitung nama="dislikes"></dihitung>
</div>

<template id="dihitung-template">
 <h1>{{nama}}</h1>
 <button @click="count +=1">{{count}}</button>
</template>
 
<script src="vue.js"></script>
<script>
//global component
 Vue.component('dihitung',{
  template: '#dihitung-template',// inibisa di ubah

  props: ['nama'], //akan menjadi atribut pada template
      //di view

  data : function(){ //variable data yang berisi fungsi
   return { count:0}
  }
 });
 //end global component

new Vue({ //vue instance
  el: '#app' // bind to view 
 });

</script>
</body>
</html>

Baiklah, sekarang saya akan menjelaskan tentang computed proprties dimana ini akan lebih sedit susah namun mudah untuk dipahami.

Lanjut ke tutorial selanjutny : Tutorial Vue.Js Bagian 7 : Computed Properties Pada Vue.js dan Contohnya

Tutorial Vue.Js Bagian 7 : Computed Properties Pada Vue.js dan Contohnya

April 18, 2016 Add Comment

Whoah akhirnya samapi juga di tutorial vue.js bagian 7 tentang Computed Properties Pada Vue.js dan Contohnya . Well jika sebelumnya kita sudah mempelajari Vue.Js , mengetahui bagaimana cara menginstal atau memasang vue.js , contoh helo world dengan penerapan reactive data binding, Contoh Validasi Input Data dengan V-SHOW, V-IF pada Vue.js , contoh event handling pada vue.js dan vue component yang lengkap dengan contohnya. Pada Computed properties ini akan sedikit lebih sulit sedikit namun saya yakin anda pasti bisa mempelajari materi ini dengan mudah dengan contoh yang akan saya jelaskan di bawah ini.

Contoh Program 1

Tutorial Vue.Js Bagian 7 : Computed Properties Pada Vue.js dan Contohnya

Code dan penjelasan

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<!-- atribut viewmodel -->
<input type="text" v-model="points"></input>
 <h1>Skill : {{ skill }}</h1>
 
<!-- meload vue js yang berada di satu folder-->
<script src="vue.min.js"></script>
<script>
//viewmodel
 new Vue({
  el: 'body', //el menggunakan body
  data : {
   points : 50
  },

  computed : { //computed properties
   skill: function(){ // var baru yang berisi fungsi 
    if(this.points <= 100){
     return 'Beginner'

    }
    return 'Advanced'
   }
  }

});
 
</script>
</body>
</html>

Contoh 2

Computed Properties Pada Vue.js dan Contohnya

Code dan penjelasannya

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>

<input type="text" v-model="depan"></input>
<input type="text" v-model="belakang"></input>
<h1>Nama : {{ lengkap }}</h1>
 
<script src="vue.js"></script>
<script>
 new Vue({
  el: 'body',
  data : {
   depan : 'Zen',
   belakang : 'Huzaini',
   lengkap : 'Zen Huzaini'
  },

  //cara 1
  // watch: { //obj
  //  depan: function(depan){
  //   this.lengkap = depan + ' ' + this.belakang;
  //  },

  //  belakang : function(belakang){
  //   this.lengkap = this.depan + ' ' + belakang;
  //  }
  // }

  //cara 2
  computed:{
   lengkap: function(){
    return this.depan + ' ' + this.belakang;
   }
  }

});
 
</script>
</body>
</html>

Jadi begitulah sedikit pemahaman saya tentang Vue.js dan penggunaannya. Semoga dapat bermanfaat. Jangan lupa jika anda memiliki pertanyaan terkait vue.js, silahkan jangan sungkan utunk bertanya melalui komentar ya, insyaAllah saya akan menjawab sebisa saya. :)
Wassalamualaikum wr. wb

Tutorial Vue.Js Bagian 5 : Contoh Event Handling pada Vue.js

April 18, 2016 Add Comment

Setelah sedikit memahami tentang apa itu Vue.JS pada tutorial-tutorial sebelumnya yaitu Tutorial Vue.Js Bagian 1 : Tentang Vue.Js , mengetahui bagaimana cara menginstal atau memasang vue.js , contoh helo world dengan penerapan reactive data binding, Contoh Validasi Input Data dengan V-SHOW, V-IF pada Vue.js sekarang saya akan memberikan contoh event handling pada vue.js .

Berikut adalah contoh tampilan dari event handling apada vue.js

Nah, utnuk source kode serta penjelasannya silahkan simak di bawah ini :

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<div id="app">
<!-- atribut v-on:submit, v-on:submit.prevent
apa yg terjadi jika di 
submit akan mengacu pada 
method uang telang di uraikan di viewmodel -->
<form action="berhasil.html" v-on:submit="sip">
 <button type="submit">
 Submit!</button>
</form>

<form action="berhasil.html" v-on:submit.prevent="yuhu">
 <button type="submit">
 Submit Me! - With Prevent</button>
</form>
</div>
 
<!-- meload vue js yang berada di satu folder-->
<script src="vue.min.js"></script>
<script>
//viewmodel
new Vue({
  el: '#app', // bind to view
   methods : { //mengunakan method
    sip: function(){
     alert('SIP!'); //alert muncul
    },

    yuhu: function(){
     alert('SIP! - ini di prevent');
    }
   }
 });

</script>
</body>
</html>

Contoh 2

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<!-- meemanggil id app1 yang sudah dideklarasikan
di  viewmodel -->
<div id="app">
<!-- atribut dari vue js @click untuk
 proses klik yang terbinding dengan vuemodel-->
 <button type="submit" @click="hitung">
 Hitung => {{ count }} </button> 
</div>
<!-- meload vue js yang berada di satu folder-->
<script src="vue.min.js"></script>
<script>
//modelview
new Vue({
  el: '#app', // bind to view
   data : {
    count : 0
   },

   methods: { //metode
    hitung : function(){ //fungsi
     this.count += 1;
    }
   }
  
 });

</script>
</body>
</html>

Nah sekarang kita sudah mempelajari Tutorial Vue.Js Bagian 1 : Tentang Vue.Js , mengetahui bagaimana cara menginstal atau memasang vue.js , contoh helo world dengan penerapan reactive data binding, Contoh Validasi Input Data dengan V-SHOW, V-IF pada Vue.js dan contoh event handling pada vue.js . Setelah ini saya akan lanjut menjelaskan tentang vue component lengkap dengan contohnya. :)

Tutorial Vue.Js Bagian 4 : Contoh Validasi Input Data dengan V-SHOW, V-IF pada Vue.js

April 18, 2016 Add Comment

Setelah sedikit memahami tentang apa itu Vue.JS pada tutorial sebelumnya yang berjudul Tutorial Vue.Js Bagian 1 : Tentang Vue.Js , mengetahui bagaimana cara menginstal atau memasang vue.js , contoh helo world dengan penerapan reactive data binding sekarang saya akan memberikan contoh lainnya.

Contoh yang saya akan berikan disni adalah berkaitan dengan validasi input data dengan V-SHOW, V-IF pada Vue.JS.

Berikut adalah contoh dari Validasi Input Data dengan V-SHOW, V-IF pada Vue.js .

Contoh Validasi Input Data dengan V-SHOW, V-IF pada Vue.js

Nah sekarang saatnya saya memebritahukan script kode dan penjelasannya

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<!-- meemanggil id app1 yang sudah dideklarasikan
di  viewmodel -->
<div id="app">
 <form>
  <h2>V SHOW</h2>
  <!-- atribut v-show -->
  <span class="error" v-show="!pesan">
   Masukkan tulisan.. apasaja
  </span><br>

  <textarea v-model="pesan"></textarea><br>
  <button type="submit">
   Kirim Tulisan
  </button>
 </form>

 <form>
 <h2>V IF</h2>
 <!-- atribut v-if -->
  <span class="error" v-if="!pesan2">
   Masukkan tulisan.. apasaja
  </span><br>

  <textarea v-model="pesan2"></textarea><br>
  <button type="submit">
   Kirim Tulisan
  </button>
 </form>

 <form>
  <h2>V SHOW with Button</h2>
  <span class="error" v-show="!pesanbutton">
   Masukkan tulisan.. apasaja
  </span><br>

  <textarea v-model="pesanbutton"></textarea><br>
  <button type="submit" v-show="pesanbutton">
   Kirim Tulisan
  </button>
 </form>

 <pre>
  {{ $data | json}} <!--fungsi json untuk mengirim data yang di ubah -->
 </pre>



</div>

<!-- meload vue js yang berada di satu folder-->
<script src="vue.min.js"></script>
<script>
//viewmodel
new Vue({
  el: '#app', // bind to view
  data: { //var adata yang menimpan nilai di bawahnya
   pesan : '', //variable pesan
   pesan2 : '', // var pesan 2
   pesanbutton : '' // var pesan
  }
 });

</script>
</body>
</html>

Nah itu adalah contoh dari penggunaan framework vue.js untuk validasi. Berikutnya pada tutorial ke 5 saya akan menjelaskan tentang Event Handling pada Vue.js dengan contoh dan penjelasan yang insyaalah lengkap.

Tutorial Vue.Js Bagian 3 : Membuat Hello World Input Reactive dengan Vue.Js

April 18, 2016 Add Comment

Setelah sedikit memahami tentang apa itu Vue.JS pada tutorial sebelumnya yang berjudul Tutorial Vue.Js Bagian 1 : Tentang Vue.Js dan mengetahui bagaimana cara menginstal atau memasang vue.js sekarang saatnya mempelajari bagaimana cara vue.js bekerja dengan contoh contoh yang akan saya jelaskan.

Untuk contoh pertama yaitu bagaimana caranya membuat Hello World dengan Vue.Js. Namun sebelum itu saya akan menampilkan screenshoot programnya terlebih dahulu.

Membuat Hello World Input Reactive dengan Vue.Js

Membuat Hello World Input Reactive dengan Vue.Js , fungsi reactive.js pada vue.js

Berikut adalah contoh kode script dan penjelasan yang sudah ditulis didalam kode.

<html>
<head>
 <title></title>
</head>
<body>
<!-- meemanggil id app1 yang sudah dideklarasikan
di  viewmodel -->
<div id="app1"> 
 <input v-model="pesan" placeholder="ini">
 <!-- variable yang berisi nilai, 
 dimana variable ini juga di set di instansi vue -->
 <h2>{{pesan}}</h2>

 <h5>pretag</h5>
 <pre>
  {{ $data | json}} 
  <!--fungsi json untuk 
  mengirim data yang di ubah 
  dan menampilkannya dengan variable $data-->
 </pre>
</div>

<!-- meload vue js yang berada di satu folder-->
<script src="vue.min.js"></script>
<script>
//viewmodel
new Vue({
  el: '#app1', // bind to view
  data: {
   pesan : ''
  }
  
 });

</script>
</body>
</html>

Nah, program ini merupakan program yang memebrikan contoh dari fungsi reactive data binding yang dimiliki oleh vue.js . Berikut adalah script code dan penjelasannya.
Berikutnya akan ada contoh yang lebih menarik lagi yang saya akan bahs di halaman selanjutnya :
Tutorial Vue.Js Bagian 4 : Contoh Validasi Input Data dengan V-SHOW, V-IF pada Vue.js

Tutorial Vue.Js Bagian 2 : Download dan Instalasi Vue.Js

April 18, 2016 Add Comment

Setelah sedikit memahami tentang apa itu Vue.JS pada tutorial sebelumnya yang berjudul Tutorial Vue.Js Bagian 1 : Tentang Vue.Js sekarang saatnya mempelajari bagaimana proses download , penginstalan hingga pemasangan dari vue.js ini. Jadi jika saya saranakan untuk membuka artikel sebelumnya untuk sedikit menambah pengetahuan tentang apa itu Vue.js .

Mendownload File Vue.Js

Cara untu mendownload Vue Js adalah

Kunjungi situs https://vuejs.org/
Download aplikasi dengan cara mengklik install
Pilih salh satu yang dibutuhkan.
\

Keterangan :

Pilih yang development version, karena di beberapa contoh yanga akan di jelaskan setelah ini ada fungsi yang tidak bekerja jika menggunakan yang product version.

Tutorial Instalasi Vue.JS

Sebenarnya untuk penginstalan Vue.Js bervariasi sesuai dengan project yang ingin kita buat (apakah project tersebut berbasis Git, menggunakan framework lain sperti Node js atau lain sebagainya). Untuk cara yang sudah di jelaskan di atas itu merupakan sebuah cara untuk mendapatkan file vue.js secara langsung dimana file tersebut biasanya digunakan untuk penggunaan project biasa.

Berikut adalah beberapa macam penginstalan Vue.Js :

Menggunakan NPM,

biasanya jika menggunakan Node.JS

# latest stable
$ npm install vue
# latest stable + CSP-compliant
$ npm install vue@csp

Menggunakan CLI

# install vue-cli
$ npm install -g vue-cli
# create a new project using the "webpack" boilerplate
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

Dev Build, dipakai di git

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

Bower

# latest stable
$ bower install vue

Cara biasa

bagaimaan cara Download dan Instalasi Vue.Js

Cara ini biasanya digunakan pada project biasa dan laman kecil yang tida membutuhkan framework lain.

Nah karena saya sudah membahas tentang apa itu vue.js dan bagaimana cara penginstalan / download framework ini, selanjutnya saya akan memberikan contoh contoh mudah dan simple terkait penggunaan vue.js ini.

Artikel Berikutnya : Tutorial Vue.Js Bagian 3 : Membuat Hello World dengan Vue.Js

Memahami Vue Js.

April 18, 2016 Add Comment

Assalamualikum Wr. Wb

Di kesempatan kali ini saya kan membahas sedikit mengenai apa itu vue.js dan bagaimana penggunaan vue js sebagai framework javascript untuk fron-end.

Pengunaan vue sebagai framework berbasis javascript untuk front-end sangatlah simple dan mudah. Saat ini sudah banyak sekali pengguna / pengembang web yang menggunakan vue js ini.

Tentang Vue.Js

Vue.js (jika di ucapkan vjuː /, seperti view) adalah library untuk membangun antarmuka web interaktif. Tujuan dari Vue.js adalah menyediakan fungsi Reactive data binding dan fungsi mengatur komponen View yang ada dengan API yang sesederhana mungkin. Vue.js difokuskan pada lapisan tampilan saja / View. Oleh karena itu sangat mudah untuk mengambil dan untuk mengintegrasikan framework ini dengan proyek yang telah dibuat.

Apa itu Reactive Data Binding ?

Fitur yang ditawarkan oleh vue js adalah system reactive data binding yang berfungsi agar data dan DOM tetap terikat bersama-sama. Biasanya jika menggunakan jQuery secara manual dalam memanipulasi DOM, kode yang kita tulis pastilah berulang-ulang dan rawan kesalahan atau eror.

Vue.js menganut konsep tampilan data-driven. Yang berarti kita menggunakan sintaks khusus di template HTML yang kita gunakan untuk "mengikat" DOM dengan data yang dibuat. Setelah proses binding diciptakan, DOM kemudian akan bersinkronisasi dengan data. Setiap kali Anda mengubah data, DOM akan memperbaruinya dan Hal ini membuat kode kita lebih mudah untuk menulis, lebih mudah untuk alasan tentang dan lebih mudah untuk mempertahankan.

Berikut adalah gambar dari proses sinkronisasi DOM dan data yang dibuat.

Artikel ini berlanjut ke artikel selanjutnya

Tutorial Vue.Js Bagian 2 : Download & Instalasi Vue.Js

Cara Membuat Parse HTML di Blog

April 14, 2016 Add Comment

Assalamualikum wr. wb, kali ni saya akan berbagi salah satu trik blog dalam memparsing atau mengkonversi kode html agar dapat ditampilkan di blog selain itu dapat mengkonversi kode script iklan.

Dalam beberapa contoh kasus yang pernah terjadi, html parser akan menjandi sangat berguna untuk user yang inign meletakkan kode scriptnya di blaman blog agar dapat sesuai dengan source aslinya (peletakan yang sesuai). HTML parser juga sangat bermanfaat jika ingin menambahkan kode di dalam komentar, karena kode HTML yang dimasukkan dalam komentar tanpa di-parse akan dibaca sebagai perintah. Oleh karena itu, kode HTML harus di-parse terlebih dahulu agar bisa ditampilkan dalam komentar sebagai teks yang dapat dilihat.

Berikut adalah script kode parser

<script type="text/javascript">
function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&");replaced = replaced.replace(/</ig, "<");replaced = replaced.replace(/>/ig, ">");replaced = replaced.replace(/"/ig, """);replaced = replaced.replace(/±/ig, "±");replaced = replaced.replace(/©/ig, "©");replaced = replaced.replace(/®/ig, "®");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}
</script><br />
<table style="margin:0 auto"><tbody>
<tr> <td><textarea id="somewhere" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 595px"></textarea><br/>
<input onclick="convert();" style="padding: 5px;" type="button" value="Parse Script" /></td> </tr>
</tbody></table>

Pasang kode tersebut di mode html

Kemudian langsunng saja letakkan kode di atas seperti di bawah ini

Dan hasilnya akan seperti ini

Anda bisa langsung menggunakannya :)
Terimkasih sudah berkunjung :)

Source : http://buka-rahasia.blogspot.co.id/p/blogger-adsense-parser-html-encoder.html

Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding (Part 2)

April 14, 2016 8 Comments

Apabila anda baru menemukan laman ini, silahkan kunjungi dahulu

Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding Part 1 .

Nah, pada artikel sebelumnya kita sudah menyelesaikan bebrapa proses yaitu pemasangan library Google Maps dan geocoder serta konfigurasinya, databse dan juga controllernya. Setelah itu saya akan melanjutkannya ke langkah ke 3 yaitu konfigurasi file model.

3. Membuat Model

Didalam folder Model, ada satu 1 file model yang berisi fungsi model untuk menampilkan data dan menambahkan data ke database. Berikut adalah script file class model yang telah di beri penjelasan.File model ini diberi nama m_gmap.php

<?php
/**
* 
*/
class m_gmap extends CI_Model
{
  function _construct()
    {
        parent:: _construct();
    }
    //fungsi untuk menampilkan semua data
 function tampilan_semua_data()
 {
  //mengambil nilai atau data dari database
        return $this->db->get('tugas6_individumap'); 
 }

 function simpan_data($simpanlokasi) //fungsi simpan data
 {
  //memasukkan ke database
  return $this->db->insert('tugas6_individumap', $simpanlokasi); 
 }
}

?>

4. Membuat File View

Didalam folder view ini terdapat 2 file, dimana file yang pertama diberi nama v_gmap yaitu tampilan awal untuk menampilkan google map, sedangkan yang satunya adalah v_lihatdata yang berfungsi untuk menampilkan data yang sudah tersimpan sebelumnya. Berikut adalah script yang sudah disertai dengan penjelasannya.
view file v_gmap.php

<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>aset/dt/media/css/jquery.dataTables.min.css">

    <script type= 'text/javascript' src="<?php echo base_url();?>aset/dt/media/js/jquery.js"></script>
    <script type= 'text/javascript' src="<?php echo base_url();?>aset/dt/media/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>aset/bt/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>aset/bt/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>

<style type="text/css">
 body {
font-family: 'Raleway', sans-serif;
}

</style>
<script src="<?php echo base_url();?>aset/bt/js/bootstrap.js"></script>
 <?php echo $map['js']; ?>
</head>
<body>
<div class="container">
<div class="jumbotron">
  <h1>TUGAS 6 INDIVIDU</h1>
  <p>Huzaini 130411100105</p>
  <button type="button" class="btn btn-success"><a href="http://[::1]/zenhuzaini/individu_framework6/index.php/c_gmap/lihatdata">Lihat Data</a></button>

</div>
 <?php echo $map['html']; ?>
</div>

</body>
</html>

view file v_lihatdata.php

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>aset/dt/media/css/jquery.dataTables.min.css">

    <script type= 'text/javascript' src="<?php echo base_url();?>aset/dt/media/js/jquery.js"></script>
    <script type= 'text/javascript' src="<?php echo base_url();?>aset/dt/media/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>aset/bt/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>aset/bt/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>

<style type="text/css">
 body {
font-family: 'Raleway', sans-serif;
}

</style>
<script src="<?php echo base_url();?>aset/bt/js/bootstrap.js"></script>
 <title></title>
</head>
<body>
<div class="container">
<div class="jumbotron">
  <h1>TUGAS 6 INDIVIDU</h1>
  <p>Huzaini 130411100105</p>
  <?php
   echo $kemapnya;
  ?>
</div>

<table <table class="table table-striped table-advance table-hover" border="1" cellpadding="4" cellspacing="0" >
 <thead>
  <tr>
   <td >Nama Lokasi</td>
   <td>Longitude</td>
   <td>Latitude</td>
   <td>Keterangan</td>

  </tr>
 </thead>
 <tbody>
 <?php
 foreach ($datanya as $key ) {  //mengambil data
 ?>
  <tr>
   <td><?php echo $key->nama_lokasi ?></td>
   <td><?php echo $key->long ?></td>
   <td><?php echo $key->lat ?></td>
   <td><?php echo $key->keterangan ?></td>

  </tr>
 <?php
        }
 ?>
 </tbody>
</table>

</div>
</body>
</html>

Terimakasih sudah berkunjung, jika ada pertanyaan silahkan jangan malu malu untuk berkomentar :)

Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding (Part 1)

April 14, 2016 5 Comments

Assalamualikum wr. wb, pada kesempatan kali ini saya akan berbagi pengalaman saya dalam menginstal atau memasang API Google Maps di CodeIgniter lengkap dengan Geocoding yang mana ini merupakan tugas Web Framework yang telah saya dapatkan.

Baiklah, sebelumnya saya meu menjelaskan sedikit tentang Memasang API Google Maps di CodeIgniter, Untuk melakukan ini kita membutuhkan API google Maps dan library Geocoder.

Apa itu Geocoding ?

Geocoding merupakan sebuah cara untuk mentranslatekan / mentraverse longitude & latitude yang telah diketahui menjadi sebuah alamat yang utuh. Begitu juga sebaliknya.

Berikut adalah langkah langkah yang harus dilakukan.Namun, sebelum itu lihat dulu hirarki folder untuk peletakan setiap file dari libarary, controller, model hingga view.

Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding

1. Mendownload dan Pemasangan Library Google Maps API Ver.3 & Geocoder

Google Maps API Ver. 3

Merupakann library yang digunakan untuk menampilakn Google map di laman web dan dilengkapi dengan konfigurasi yang ada. seperti mengambil latitude longitude dan alamat lengkap di API Google maps Langkah langkahnya bisa dilihat di bawah ini

Mendownload library di https://github.com/BIOSTALL/CodeIgniter-Google-Maps-V3-API-Library

Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding
Ekstrak hasil download Google Maps API, kemudian letakkan di folder Application/library

Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding (Part 1)

Library Geocoder

Geocoder disini berfungsi untuk mentranslate latitude / longitude yang sudah didapatkan . Geocoder disini memiliki fungsi geocoding yaitu dapat mereverse longitude / laltitude yang di dapat ke alamat / lokasi yang terkait dan begitu juga sebaliknya.

Cara pemasangan

Membuat file bernama geocoder.php kemudian di letakkan di appliaction-> library, kemudian masukkan sintak berikut kedalam file geocoder. File ini diberi nama geocoder.php

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

 /**
 * Geocoder class
 * 
 *
 */

 class Geocoder {

  var $CI;
  private $mapquest_key;

  function __construct() {
   if(!isset($this->CI)) {
    $this->CI =& get_instance();
   }
   $this->mapquest_key = $this->CI->config->item('mapquest_app_key');
  }

  function geocode($address) {
   
   if($this->mapquest_key == '') { return FALSE; }
   if($address == '') { return FALSE; }

   $request_url = 'http://www.mapquestapi.com/geocoding/v1/address?key='.$this->mapquest_key.'&inFormat=kvp&location=' . urlencode($address);
   $response = $this->makerequest($request_url);
   if(empty($response->results[0]->locations)) {
    return FALSE;
   } else {
    $location_details = $response->results[0]->locations[0];
    return array(
     'address' => $location_details->street,
     'city' => $location_details->adminArea5,
     'state' => $location_details->adminArea3,
     'zip_code' => $location_details->postalCode,
     'county' => $location_details->adminArea4,
     'country' => $location_details->adminArea1,
     'lat' => $location_details->displayLatLng->lat,
     'lng' => $location_details->displayLatLng->lng
    );
   }
  }

  function reverse_geocode($lat, $lng) {

   if($this->mapquest_key == '') { return FALSE; }
   if($lat == '') { return FALSE; }
   if($lng == '') { return FALSE; }

   $latlng = $lat . ',' . $lng;
   $request_url = 'http://www.mapquestapi.com/geocoding/v1/reverse?key='.$this->mapquest_key.'&location=' . $latlng;
   $response = $this->makerequest($request_url);
   if(empty($response->results[0]->locations)) {
    return FALSE;
   } else {
    $location_details = $response->results[0]->locations[0];
    return array(
     'address' => $location_details->street,
     'city' => $location_details->adminArea5,
     'state' => $location_details->adminArea3,
     'zip_code' => $location_details->postalCode,
     'county' => $location_details->adminArea4,
     'country' => $location_details->adminArea1,
     'lat' => $location_details->displayLatLng->lat,
     'lng' => $location_details->displayLatLng->lng
    );
   }
  }

  function makerequest($url) {
   $session = curl_init($url);
   curl_setopt($session, CURLOPT_FOLLOWLOCATION, TRUE);
   curl_setopt($session, CURLOPT_RETURNTRANSFER, TRUE);
   $response = curl_exec($session);
   curl_close($session);
   return json_decode($response);
  }

 }

?>

Kemudian setelah itu untuk dapat mengaktifka geocoder kita harus memiliki Key API dimana key tersebut bisa di dapatkan gratis di https://developer.mapquest.com .

Setelah mendapatkan keynya, maka masuklah ke folder application-> config-> config.php. Kemudian buatlah variabel konfigurasi yang menampung key yang telah di dapat. Contohnya seperti di bawah ini :

Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding

$config['mapquest_app_key'] = 'keynya';

2. Membuat File di Controller

Di controller memiliki 1 file class yang berisi fungsi index untuk menampilkan data, fungsi geocoder untuk mentranslatekan longitude dan latitude yang telah di dapatkan. Berikut adalah script file classcontroller yang telah di beri penjelasan. File ini diberi nama c_gmap.php

<?php
/**
* 
*/
class c_gmap extends CI_Controller
{
 function __construct() //konstraktor untuk meload library, helper dan model
 {
  parent::__construct();
  //untuk meload library 
  $this->load->library('googlemaps');
  $this->load->library('geocoder');
  //untuk meload model
  $this->load->model('m_gmap');
 }

      function index(){
       //merupakan fungsi javascript ketika da lokasi yang
       //di klik maka akan mengambil nilai longitude dan latitude yang di klik
       $diklik = 'window.open("get_lokasi/"+
     event.latLng.lat()+"/"+
     event.latLng.lng(),"_self")';

  //konfigurasi untuk posisi tengah map ketika 
  //di tampilkan
     $config['center'] = '37.4419, -122.1419';
     //konfig pembesaran saat dimuat
  $config['zoom'] = 'auto';
  //mengaktifkan geocaching
  $config['geocodeCaching'] = TRUE;
  //menyimpan variabel javascript di atas
  //kedalam konfigurasi
  $config['onclick'] = $diklik;

  //menginisialisasi konfigurasi
  $this->googlemaps->initialize($config);

  //proses membuat marker
  $marker = array();
  //posisi marker
  $marker['position'] = '37.429, -122.1419';
  //menambahka marker
  $this->googlemaps->add_marker($marker);
  //membuat map
  $data['map'] = $this->googlemaps->create_map();
  //load ke view
  $this->load->view('v_gmap', $data);

    }
    //fungsi untuk mendapatkan lokasi latitude dan longitude dan melakukan proses reverse
    function get_lokasi($lat, $long){ 
  $address_details = $this->geocoder->reverse_geocode($lat, $long);
  //print_r($address_details); // This will show you relevant address details.

  //variable untuk menyimpan hasil reverse
  $alamat = $address_details['address'];
  $kota = $address_details['city'];
  $zip = $address_details['zip_code'];
  $daerah = $address_details['county'];
  $negara = $address_details['country'];

  $ket = "<b>Kota :</b> ".$kota.", <b>ZIP Code : </b>".$zip.", <b>Wilayah : </b>".$daerah.", <b>Negara :</b> ".$negara;

  //fungsi uutk menyimpan lokasi
  $simpanlokasi = array('nama_lokasi' => $alamat ,
        'long' => $long,
        'lat' => $lat ,
        'Keterangan' => $ket );

  $this->m_gmap->simpan_data($simpanlokasi);
  redirect('c_gmap/lihatdata');
    }

    //fungsi untuk melihat data
     function lihatdata(){
      //variable untu button
      $data['kemapnya'] = '<button type="button" class="btn btn-success">'.anchor('c_gmap/index','Kembali ke Laman Awal').'</button>
            </br>';

        //untuk menampilkan semua data di database
        $hasil = $this->m_gmap->tampilan_semua_data()->result();
        $data['datanya'] =  $hasil;
       
       //meload view untuk menampilkan data
       $this->load->view('v_lihatdata', $data);
 
    }


}

Nah, karena ada penyimpanan di database maka harus buat terlebih dahulu databasenya, adapun untuk database saya menggunakan cdcol yang biasanya telah tersedia di mysql xampp.

-- phpMyAdmin SQL Dump
-- version 4.0.9
-- http://www.phpmyadmin.net
--
-- Inang: 127.0.0.1
-- Waktu pembuatan: 15 Apr 2016 pada 06.20
-- Versi Server: 5.5.34
-- Versi PHP: 5.4.22

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Basis data: `cdcol`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `tugas6_individumap`
--

CREATE TABLE IF NOT EXISTS `tugas6_individumap` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama_lokasi` varchar(500) COLLATE latin1_general_ci NOT NULL,
  `long` varchar(500) COLLATE latin1_general_ci NOT NULL,
  `lat` varchar(500) COLLATE latin1_general_ci NOT NULL,
  `keterangan` varchar(1000) COLLATE latin1_general_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=17 ;

--
-- Dumping data untuk tabel `tugas6_individumap`
--

INSERT INTO `tugas6_individumap` (`id`, `nama_lokasi`, `long`, `lat`, `keterangan`) VALUES
(6, 'Buckeye Ln', '-122.16311931610107', '37.425593281117564', '<b>Kota :</b> Stanford, <b>ZIP Code : </b>94305, <b>Wilayah : </b>Santa Clara, <b>Negara :</b> US'),
(7, '', '-122.02609062194824', '37.44890100809654', '<b>Kota :</b> Sunnyvale, <b>ZIP Code : </b>94089, <b>Wilayah : </b>Santa Clara, <b>Negara :</b> US'),
(8, '12141 Tesla Rd', '-121.65229797363281', '37.638975567983245', '<b>Kota :</b> Livermore, <b>ZIP Code : </b>94550-9159, <b>Wilayah : </b>Alameda, <b>Negara :</b> US'),
(9, '159 S California Ave', '-122.14179508388042', '37.42899277673132', '<b>Kota :</b> Palo Alto, <b>ZIP Code : </b>94306-1926, <b>Wilayah : </b>Santa Clara, <b>Negara :</b> US'),
(10, '159 S California Ave', '-122.14197412133217', '37.42898212692348', '<b>Kota :</b> Palo Alto, <b>ZIP Code : </b>94306-1926, <b>Wilayah : </b>Santa Clara, <b>Negara :</b> US'),
(11, '686 Nelson Rd', '-122.15964317321777', '37.43015998649174', '<b>Kota :</b> Stanford, <b>ZIP Code : </b>94305-6107, <b>Wilayah : </b>Santa Clara, <b>Negara :</b> US'),
(12, '3414 Middlefield Rd', '-122.11765050888062', '37.42601929153404', '<b>Kota :</b> Palo Alto, <b>ZIP Code : </b>94306-3629, <b>Wilayah : </b>Santa Clara, <b>Negara :</b> US'),
(14, 'Pasir Putih 3', '106.839981561061', '-6.093893377041198', '<b>Kota :</b> Jakarta, <b>ZIP Code : </b>14410, <b>Wilayah : </b>, <b>Negara :</b> ID'),
(15, 'Jalan Harapan Indah Raya', '106.9819450378418', '-6.184246161280591', '<b>Kota :</b> Medansatria, <b>ZIP Code : </b>17125, <b>Wilayah : </b>, <b>Negara :</b> ID'),
(16, '3290 Middlefield Rd', '-122.12327241897583', '37.42682018455472', '<b>Kota :</b> Palo Alto, <b>ZIP Code : </b>94306-3046, <b>Wilayah : </b>Santa Clara, <b>Negara :</b> US');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

mengambil latitude longitude dan alamat di API Google maps

Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding

Selanjutnya artikel ini akan di teruskan ke :

Cara Memasang API Google Maps di CodeIgniter Lengkap dengan Geocoding part 2

Menjadi Mahasiswa berprestasi MAWAPRES Universitas (Bagian 2) | Tips & Trik

April 04, 2016 Add Comment

Assalamualaikum wr. Wb. Alhamdulillah banget Allah masih memberikan saya kesempatan untuk bisa menulis lagi di blog yang sepertinya mulai usang ini haha. Baik, di kesempatan kali ini saya akan melanjutkan cerita saya di postingan sebelumnya (Lumayan seru kok :’) ) , silahkan akses di halaman ini. Jika kemarin saya sudah memposting cerita tentang pengalaman saya terpilih menjadi juara mahasiswa berprestasi tingkat fakultas atau yang bahasa kerennya disebut MAWAPRES, sekarang (ia, sekarang!) saya akan menceritakan pengalaman saya terpilih menjadi mahasiswa berprestasi (MAWAPRES) di Universitas Trunojoyo Madura.

Pengalaman Menjadi Mahasiswa berprestasi MAWAPRES Universitas | Tips & Trik

Apa sih itu MAWAPRES ?

Mawapres adalah singkatan dari Mahasiswa berprestasi. Dimana MAWAPRES ini merupakan ajang yang bergengsi di kalangan mahasiswa diseluruh Indoesia untuk menjadi mahasiswa ‘terbaik’. Dari akronim tersebut pasti sudah dapat dipahami bahwa mahasiswa berprestasi berarti mahasiswa yang memiliki segudang prestasi baik itu berupa perlombaan atau organisasi.

Akan ada beberapa tahapan untuk dapat berlaga di Nasional, pertama mahasiswa harus dilombkan terlebih dahulu di tingkat fakultas kemudian di adu di tingkat universitas dan selanjutnya akan dipilih satu kandidat yang benar-benar cocok unutk menyandang title ‘mahasiswa berprestasi’ di tingkat Universitas.

Selanjutnya, yang sudah terpilih dari setiap perguruan tinggi negeri atau swasta akan di ambil beberapa candidate yang memiliki nilai tertinggi. Biasanya akan ada 30 mahasiswa yang terpilih (15 S1, 15 Diploma). So, best of luck!

Cerita Pengalaman

Baik saatnya bercerita tentang pengalaman saya on the D-day of MAWAPARES Election! Well, hari itu setelah mengikuti sebuah matakuliah dan bergegas ke rektorat (kalau tidak salah selasa, atau rabu atau kamis.. entah saya lupa.. tp sepertinya kamis, karena saya kalau tidak salah puasa di hari itu.. entahlah wkkwk).

Di ruang tunggu

Sudah banyak sekali yang menunggu. Ada yang pakai almamater, ada yang bawa text yang panjangnya mungkin sampai 5 lembar, ada yang merem melek (anak teknik, wkkwkw) dan ada yang pucat (Udah kaya vampire di film tweleg). Saya terlambat!, sudah ada yang maju, untung saja nomor antrean saya masih panjang Jadi bisa santai di ruang tunggu haha. Disini iman saya benar-benar di uji (lol). Pasalnya yang lain pada belajar, saya hanya bengong!, iya bengong!. Tapi bengongnya ya mikiran apa yang mau dibicarakan nanti didalam (mengolah kata dan kalimat) karena saya hanya latihan sebentar saja di kos h-1 sebelum lomba. Saya hanya membuat mindmap tentang apa yang akan saya presentasikan (slidenya saja mengambil sisa sisa prsentasi saat di fakultas).

Saya hanya pasrah, yang ada dalam pikiran saya adalah yang terpenting sudah dikerjakan dengan baik walau Cuma punya waktu 1 hari untuk persiapan. Saya adalah tipikal orang yang detail (pakai banget). Saya hampir selalu menyusun rencana-rencana apa yang akan saya lakukan, termasuk di perlombaan ini yaitu membuat mindmaps atau point-point yang akan saya bicarakan nanti sehingga saya tidak akan keluar dari pembahasan yang sudah saya tetapkan sendiri.

Saya tidak menghapal! Iya, bagaimana bisa menghafal, banyak sekali projek kuliah yang harus ditangani saat itu dan ada beberapa lomba yang saya sedang ikuti (lengkap deh, penderitaan … T_T haha I’m just kidding). Selain itu saya bukan orang yang menyerap sesuatu ilmu dengan menghafal, tapi lebih ke practical. Sehingga saya juga memutuskan unutk tidak mengafal dan berbicara apa adanya sesuai dengan mindmap yang sudah saya tentukan sebelumnya.

Masuk ruangan presentasi dan Tanya jawab

"Huzaini.." Iya, nama saya dipanggil. Well, I dared myself to knock the door immediately!. Masuk dengan mengucapkan salam dan sesampainya didalam saya saliman (selayaknya seorang murid kepada master,eh guru). Pengujinya ada 2 orang waktu itu, dari doesn Teknik Informatika dan pertanian kalau tidak salah. Didalam rasanya berdebar-debar (yaiyalahhhh) tapi Alhamdulillah saya bisa took it over! stayed calm and handsome lol .. satu ha yang saya inget adalah "don’t ever underestimate the power of yours". Tarik nafas, dan berikan yang terbaik.

Saya memulai presentasi dengan perkenalan terlebih dahulu (Harus dong, biar eksis! ;p) . Saya langsung memulai mempresentasikan topic permasalahan yang sudah saya pilih. Pada awalnya lancar sekali, tapi ditengah-tengah lidah mulai keseleo (lol) dan lupa vocab (karena memakai baha inggris). Tapi Alhamdulillah karena itu bukanlah permasalahan yang berarti. Alhamdulillah Allah sudah memberikan saya kelancaran dalam berbicara didepan dewan juri yang keceh buadayyy. Saya ingat bahwa saya tidak di timing, Alhamdulillah.. Karena presentasi saya lumayan panjang dan luaama sekali.

Hingga akhirnya penguji berkomentar. “Your English is very good!” kata seorang juri dari jurusan teknik informatika (NB : ini dosen tidak kenal dengan saya dan belum perah diajari oleh beliau). Kemudian pertanyaan-pertanyaan setajam silet mulai dilontarkan. Alhamdulillah saya bisa menjawabnya dengan baik dengan full english. Karena yang ditanyakan merupakan materi yang kita sampaikan weheheh. Setelah itu juri dari pertanian memberikan saya pertanyaan namun dengan menggunakan bahsa indonesia tapi saya ngeyel jawab pakai bahasa inggris mixed Indonesian, karena jika sudah di tingkat universitas menurut saya menggunakan bahasa Inggris statusnya adalah wajib untuk meningatkan opportunity menjadi mawapres utama di tingkat universitas. Bukan hanya inggris, bahasa lain juga boleh asalkan sudah diakui oeh PBB seperti arab, prancis, mandarin dll.

Topik yang di ambil

Materi yang saya ambil saat itu adalah tentang penggunaan Google note untuk meningkatkan efektifitas pembelajaran mahasisiwa. Udah gitu aja wkwk. SAya mengambil topic ini bukan karena saya adalah seorah GSA (Google Student Ambassador) tapi karena aplikasinya yang sangat helpful untuk pembelajaran mahasiswa, selain itu mudah buat saya (karena tidak harus membuat aplikasi baru yang serupa dengan beberapa peningkatan)

Pengumuman lanjut babak final

Setelah semua peserta selesai beraudisi ria, kini saatnya pengumuman pemenang. Seluruh kandidat dikumpulkan di sebuah ruangan. Seorang juri membacakan siapa saja yang lolos di tahap final. Gubrak!! “kok nama saa tidak dipanggil-panggil yaa??” .. “yasudahlah…”. Hingga akhirnya, “Huuuzaini…” . Saya langsung girang dan terpana. Karena akhirnya saya masuk. Asiiik heheh.

Saya keluar dari ruangan, lagi-lagi bingung.. ketika yang lain langsung sibuk belajar dan menghapalkan, saya Cuma duduk-duduk cantik. Namun, untuk me-refresh pikiran pada akhirnya saya harus buka laptop unutk melihat kembali materinya.

Saat Presentasi

Cukup lama saya menunggu. Yang lain sudah selesai seumua. Tinggal saya dan 1 teman saya dari mekatronika. Saat presentasi, saya masuk. Well, disambut dengan muka-muka killer para juri yang berjumlah kira kira 5 orang dari berbagai fakultas.

Saya memulai presentasi dengan rasa percaya diri dan dengan tatapan tajam menatap mata para dewan juri #eaaaaaa. Setelah itu saya memulai presentasi alhamdulilah lancar sekali bahkan menurut saya lebih baik dari sesi sebelumnya. Saking asiknya presentasi, salah seorang juri bilang “sorry, your time is up”. OMG!, padahal tinggal beberapa slide lagi! Dan sayapun meminta tambahan waktu “Can I please have 1 more minute?, I solely have several pages remain to finish”. Eh namun sayangnya tidak bisa “Sorry, you can’t”. Yah sudah lah saya pasrah hahahahahha.

Pertanyaannya saya lupa, namun itu tentang materi atau issue yang kita sampaikan dan kontribusi kita terhadap masyarakat terhadap problem solving yang kita tawarkan. Tidak akan jauh dari itu!

Alhamdulillah saya bisa menjawab semua pertanyaan dewan juri dengan baik (full english). Kemudian saya disuruh menunggu beberapa hari sebelum hasilnya di posting di website kampus.

Pengumuman Pemenang

Saya ada projekan dengan dosen di teknik informatika yang mengharuskan saya ke ruangan dosen (karena dipanggil). diruangan itu ada jurinya!, iya juri mawapres kemarin. Dia hanya tersenyum dan langsung memberikan selamat. Well, saya sempat kaget dan mulai alay tak terkendali wkwk. Saya tidak percaya saja mengapa saya yang bisa menang, padahal saya merasa sudah kalah karena prsentasi saya yang belum selesai. Sayapun bergegas untuk persiapan di tingkat Nasional. beliau bilang bahwa bukan hanya presentasi yang dinali, tapi ada aspek aspek lain dan faktor kualitas individu, #ealaah.

Setelah itu barulah saya mencari dosen pembimbing. Ini jangan dicontoh ya, saya baru mencari dosen pembimbing saat dinyatakan lolos menjadi mawapres utama kampus. Jadi pada tingat fakultas pun saya menggarapnya dari awal sendirian #mblo tanpa ada bala bantuan dari para dosen hehe, sekali lagi.. jangan ditiru.

Tips & trik berdasar pengalaman

Nah, disini saya akan berbagi tentang apa yang saya sudah lakukan untuk seleksi mawapres ini. Saya akan membaginya dalam beberapa sub biar gampang navigasinya hehe. Oke yuk!

LKTI

Pilih Topic yang saat ini sedang hot. : topik yang hot dengan pemecahan solusi yang hot juga hehe. Jika bisa carilah issue yang jika dipecahkan dapat memberikan impact besar kepada masyarakat. Ini harus! karena menurut saya akan memberikan poin lebih. Apa topiknya Harus sesuai jurusan ? menurut saya iya. Karena akan membantu kita banget. Contoh, ada permasalahan ekonomi di daerah, nah kemuadian anak teknik membuat sebuah sistem untuk memecahkan permasalahan ekonomi di daerah tersebut dll.

Cari dosen pembimbing : harus banget!, mereka bisa kita jadikan tempat untuk bersandar ketika tidak menemukan arah jalan pulang, eaaaa. Maksudnya jika kita kebingungan mereka pastinya akan membantu dan pasti mau untuk mengoreksi Tulisan kita.

Perhatikan format penulisan : biasanya akan adan ada formatnya. Seperti nomor, penulisan bab, jumlah halaman. Ini sudah tersedia di buku panduan kok.

Perbanyak pengetahuan kosa kata ilmiah atau akademis : ini berguna sekali, agar bisa menambah bobot tulisan kita. Dengan menggunakan kata ilmiah atau akademis tulisan kita akan berasa seperti tulisan professor haha dan pastinya akan menjadi nilai tambah dong.

Menulislah dengan cinta lol . menulislah dalam kondisi bahagia dan senang.. kalau tidak pastinya akn berpengaruh kepada ide dan penulisanmu.

Video

Well, jujur saya tidak buat video saat seleksi universitas karena saya buru-buru. Banyak deadline! Kalau menurut saya untuk membuat video silahkan cek sendiri video para finalis di yutup. Karena itu akan memberikan kalian referensi tentang bagaimana video seharusnya (saat opening, penceritaan masalah, solusi hingga akhir).

NB: video saya juga sudah bisa dicari sendiri di yutup

Prestasi

Ini merupakan hal yang sangat krusial. Untuk bisa melaju ke nasional, presatsi juga menjadi salah satu poin penilaian yang besar. Semakin banyak prestasi yang didapatkan pasti akan semakin besar kesempatan untuk lolos di tingkat nasional. Ingat bukan finalis loh ya, tapi prestasi juara atau penghargaan. Jika ada yang taraf internasional. Karena seluruh finalis mawapres yang lolos di tingkat nasinal memiliki prestasi internasional paling sedikit 2 hehe. Alhamdulillah saya memiliki 2 prestasi internasional yaitu terpilih menjadi Google student ambassador SEA dan mengikuti training Google di Cebu, Filipina.

Jadi jika berkeingan utnuk mendaftar mawapres ikuti dulu perlombaan-perlomban lainnya (dan menangkan) lebih-lebih jika bisa juara di tingkat nasional atau internasional. Karena yang saya tahu di UI, para calon mawapres di siapkan untuk mengikuti berbagai lomba sebelum akhirnya mengikuti Mawapres. hehe

Presentasi

Nah ini adalah tips saya saat berpresentasi. Alhamdulillah sejak SMP saya sudah di ajari utuk berpresentasi di depan kelas dan juga sudah terbiasa berpresentasi hingga saat ini hehe. cekidot

Confident: Harus percaya diri, harus! Aura tidak bisa dibohongi!. Perbanyak sholawat dan istighfar, minta sama Allah unutk dilancarkan presentasinya. Percaya kalau kita sudah melakukan yang terbaik. So just let Allah do the rest.

Jaga tatapan mata : ketika presentasi kita janagn melihat ke layar laptop atau screen atau ke cicak-cicak di dinding, tapi tatap mata para dewan juri. Hal ini untuk meyakinkan mereka bahwa apa yang kita sampaikan itu berbobot dan menggambarkan kepribadian yang luar biasa heheh.

Kesan pertama : buatlah juri merasa terkesan saat pertama melihatmu. Kamu harus bisa membuat mereka terkesan ditatapan pertama. Bagaimana ? Tatap mata mereka, senyum, dan tunjukin rasa percaya dirimu :D .

Timing : jangan lupa timing! Biasanya akan diberi waktu 10-15 menit prsentasi. Manage apa yang akan kamu bicarakan. Jangan sampai kurang dari 15 dan jangan sampai lebih heheh. Sedang-sedang saja.

Relax : jangan panic! Jangan takut! Tunjukkan jika kalian bisa untuk menyabet gelar mawapres! Beranikan diri kalian guys!

Cari pertanyaan yng mungkin bakalan ditanyakan : persiapan pertanyaan dan jawaban yang mungkin mereka akan tanyakan. Hal ini bisa membantu kamu unntuk mencegah panic yang berlebihan wkwk

Body language : bahas tubuh. Jadi saat presentasi kita bisa bebas salto atau jungkir balik eh, maksudnya adalah kita bisa mngayunkan tangan sambil jalan-jalan sedikit. Tapi jangan berlebihan ya. Yang natural saja ehhe.

Slide yang simple dan elegan. Jangan kebanyakan tulisan : buatlah prsentasi yang simple dan elegan!. Buatlah point-point penting. Bukan langsung semua di kopipes ol. Silahkan cai referensi slide yang simple dan elegan hehe. Ini penting! Karena desain yang bagus, penataan layout point yang bagus bisa memembuat juri untuk tetep give you their attention.

Jangan belajar keras di hari H : jangan pokoknya! karena kalau belajar saat hari H bisa buat kamu semkain gugup. Baca baca ingan aja untuk me-refresh materi

Bahasa inggris : menurut saya harus menggunakan bahasa inggris dong atau bahasa yang disetujui PBB selain bahasa Indonesia hehe. Well, ini merupakan point yang menurut saya dapat memberikan peluang besar untuk kamu bisa memenangkan mawapres . Karena nantinya mawapres tidak hanya berkancah di nasional saja, bisa saja dundang untuk berpresentasi di kancah internasional (kalau lulus tingkat nasinal sih hehe). Pasti sangat susah jika tidak terbiasa untuk berpresentasi dengan baik menggunakan bahasa inggris. Nah loh.

Tidak bisa bahasa inggris : Jangan panik. Masih ada beribu-ribu jalan menuju roma. Kalian bisa menggunakan metode hafalan. dan disini pastinya bakalan ada effort lebih. jangan menyerah, pasti awalnya susah. Jangan lupa untuk mencari jawaban yang mungkin akan ditanyakan, pastinya dalam bahasa inggris dong heheh. Kalau bisa 1-2 minggu sebelum d-day biasakan diri untuk berbicara sendiri di depan cermin denganmenggunakan bahasa inggris. Intinya sih untuk membuat habit baru agar tidak shock saat lomba nanti hehe

Bedoa : berdoa pasti dong ya, berdoa yang banyak semoga Allah memberikan kelancaran saat presentasi hehe.

be humble : rendah hati ya guys, jangan sombong dengan teman-teman lainnya. Terima masukan orang lain dan cobalah untuk menjadi yang terbaik

Hanya itu saja sih yang bisa saya sampaikan. namun apa yang sudah saya jelaskan di atas belum tentu pas kepada teman-teman, karena terkadang setiap orang memiliki cara sendiri utnuk memecahkan permasalahannya hehe. Semoga bisa bermanfaat, saya akan melanjutkannya ke kisah bagian ke 3 jika ada waktu luang hehe.

Wassalamualikum wr.wb