Browsed by
Category: Uncategorized

Membuat form html posting ke telegram

Membuat form html posting ke telegram

Mungkin bro pernah mengalami ingin membuat form di html dan tanpa ribet-ribet ga pengen bikin database buat nampung form tersebut.
Selain menampung ke database bisa Mysql – MariaDB atau apa aja lah… hasil form juga ribet kan mesti diperiksa manual dengan membuka aplikasi dulu…

Nah sekarang kan zamannya keterbukaan (open access) kenapa ga memanfaatin layanan pihak ketiga aja ya…
Layanan pihak ketiga bisa menggunakan misalnya emailing dengan memanfaatkan php_mailer dari php atau layanan lainnya seperti api dari telegram atau  WA (ga terbuka banget sih WA mengenai keterbukaan akses mereka jadi ini ga rekomended).

Pada awalnya saya udah memanfaatkan email sistem (gmail) untuk menampung dan menerima hasil isian form HTML namun sepertinya layanan gmail cukup ketat dan berdasarkan pengalaman apabila anda merubah hosting maka tentunya akan diblokir oleh Google terhadap akses ke pengiriman emailnya.. (walah repot jadinya ada klien menuliskan pesan ternyata ga sampai-sampai deh). Pemblokiran akses pengiriman email ini tidak hanya apabila ada perubahan IP namun  dari aktivitas yang mencurigakan oleh Google. Dengan menggunkan sistem emailing ini sepertinya kurang handal diterapkan.

Artikel ini akan membahas metode kedua yakni memanfaatkan Api (Application Programming Interface) yang disediakan oleh telegram melalui bot.

untuk menerapkannya anda bisa baca dulu referensi bot telegram disini
Perlu diperhatikan bahwa metode akses API disini menggunakan polling bukan webhooks… nah apa sih perbedaaan dua metode tersebut, akang yohanes sudah mengajari kita disini untuk lebih jelasnya buka ya guys

Berikut langkah perlangkahnya… tenang aja guys ga rumit ko….

1.  Buat dulu botnya, minta permisi dulu sama bosnya bot alias BotFather caranya :

2. ketikan /start pada BotFather

3. Buat bot baru …. lihat dibawah ini perintahnya :

4. Sekarang tambahkan bot tadi sebagai teman anda ya…

5. Ketikkan perintah berikut ini :

6. Sekarang bisa deh kita akses pesan tersebut yang diterima oleh bot dengan arahkan browser anda ke url ini :
https://api.telegram.org/botTokenBotAnda/getUpdates

makan akan menghasilkan data json sebagai berikut :

{"ok":true,"result":[{"update_id":301413893,
"message":{"message_id":3,"from":{"id":xxxxxx,"is_bot":false,"first_name":"muhammad","last_name":"hendra","username":"muhammad_hendra","language_code":"en"},"chat":{"id":xxxxxx,"first_name":"muhammad","last_name":"hendra","username":"muhammad_hendra","type":"private"},"date":1510796658,"text":"fafafa"}}

nah yang perlu bro perhatikan dan simpan adalah nilai chat_id di data json diatas. Dari nilai chat_id tersebutlah kita bisa mengkoneksikan form html kita dengan telegram.

sekarang tinggal tuliskan koding php berikut :

Koding php telegram api
 
  1. //File Name telegram_post.php
  2. $email = $_POST['email'];
  3. $pesan = $_POST['pesan'];
  4. $date = date('d F Y').'%0A';
  5. $message = $date.'Bro ada pesan ni di share-system.com dari '.$email.' : %0A'.$pesan.'';
  6. $api = 'https://api.telegram.org/botTokenBotAnda/sendMessage?chat_id=xxxx&text='.$message.'';
  7. $ch = curl_init($api);
  8. curl_setopt($ch, CURLOPT_HEADER, false);
  9. curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  10. curl_setopt($ch, CURLOPT_POST, 1);
  11. curl_setopt($ch, CURLOPT_POSTFIELDS, ($params));
  12. curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  13. $result = curl_exec($ch);
  14. curl_close($ch);
  15. var_dump($api);

Jangan lupa ya guys buat form HTMLnya… dan jangan lupa coba klo ada error silahkan komentar ya.. biar kita sama-sama diskusikan (pelit coding  😛 )

oke guys karena gua lagi baik nih form htmlnya… ya… :

 
 
  1. <form action="telegram_post.php" method="post" data-form-title="MESSAGE" id="frmpesan">
  2. <input type="hidden" value="nWmyXojkFcrwN18JgVE77mVh1UhMHd/Lk3kD63XTVSh/kwfJk0usXWaWvuX4Rwwk5KB0TiZ/FxIpTdXPw7KRS6KDW3m149e/aSLWs6wi97Sm2e13G9wjVfLESYXg0SvX" data-form-email="true">
  3. <div class="form-group" align="center" style="margin-bottom: 0; padding-top: 8px;">
  4. <h5>Kontak Kami Sekarang Juga</h5>
  5. </div>
  6. <div class="form-group">
  7. <label class="form-control-label" for="contacts3-2l-email">Email<span class="form-asterisk">*</span></label>
  8. <input type="email" class="form-control input-sm input-inverse" name="email" data-form-field="Email" id="contacts3-2l-email" >
  9. </div>
  10. <div class="form-group">
  11. <label class="form-control-label" for="contacts3-2l-message">Pesan<span class="form-asterisk">*</span></label>
  12. <textarea class="form-control input-sm input-inverse" name="message" data-form-field="Message" rows="5" id="contacts3-2l-message"></textarea>
  13. </div>
  14. <div><a href="#" class="btn btn-sm btn-black" id="btnkirim" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Sending Email">Kirim Pesan!</a></div>
  15. </form>

oke guys gampang kan…

Benchmark Sublime Text 3 vs Visual Code

Benchmark Sublime Text 3 vs Visual Code

 

Sebelum kita head to head antara ST3 dan vscode perlu ada pengantar dulu guy, skripsi aja klo ga ada bab 1 dan 3 ga bakal nyampe ke bab 4 lho. Ingikut deh ajaran dosen terdahulu mesti ada pengatar biar asik… hehe…

Sublime Text 3

Sublime text  dikembangkan merupakan editor source code proprietary sejak 18 januari 2008 lalu yang dikembangkan dengan menggunakan Bahasa Pyhton. ST ini mendukung banyak Bahasa pemograman dari bahasa sql, css, php, javascript, java, c++ dan banyak lagi. . Yang paling menarik dari ST3 adalah adanya ekosistem plugin yang sangat berjibun yang dapat dimanfaatkan dengan adanya package control. Namun sayangnya package control ini tidak ada secara default jadi harus di install secara manual lho. Klo pengen tahu plugin apa saja yang perlu bisa cek pada artikel saya yang dituliskan pada blog ini ya guys.

Daftar plugin wajib di Sublime Text 3

.

Sublime text ini karena bersifat proprietary bukan open source (CMIIW) sehingga pengembangannya bukan pada komunitas tapi pada perusahaan  atau developer yang menjual code editor ini yakni Jon Skinner. Dampaknya adalah pengembangannya terkesan lambat klo pengen bukti yang versi 3 aja (Sublime text 3) sampai artikel ini ditulis masih aja versi BETA alias belum stable sejak di rilis pertama dari tanggal 29 January 2013.

Sublime Text 3 is currently in beta. The latest build is 3126.

Last develop :  23 September 2016

 

liat deh di halaman github mereka ga ada source code untuk ST3 ini, mana ada tuh source code mereka dirilis :

 

Vscode

Vs code atau Visual Studio Code merupakan editor koding atau source code editor yang dibangun dan dikembangkan oleh Microsoft diperuntukkan bagi berbagai platform OS. VScode dibuat dengan berdasarkan Electron. Suatu Framework yang digunakan untuk men deploy node.js.

VsCode diumumkan pada tanggal 29 April 2015 oleh Microsoft dan kemudian dirilis dalam lisensi MIT pada tanggan 18 November 2015 yang saat itu di posting di halaman github sebagai open source pada tanggal 14 April 2016.

ini nih halaman github mereka, bisa dilihat berapa banyak yang berkontribusi dalam mengembangkan app ini dan secara rentang waktu app ini pengembangannya sangat aktif (12 Juli 2017).

 

Time to benchmark, let’s go

Jadi benchmark ini tentang closed source dan open source. Waduh terlalu frontal guy.. tujuan artikel ini bukan membandingkan closed source source editor dan open source source editor loh… terlalu luas jika kita membandingkan dua konsep tersebut. Artikel ini cukup agar menjadi referensi dan sebagai catatan artikel ini hanya relevan untuk versi yang penulis tulis saat ini ya ST3 build version 3126 dan Vscode 1.13. dan benchmark ini hanya membahas yang penulis pahami untuk membandingkan tingkat kecepatan dan konsumsi resource dua app ini dengan menggunakan app windows ga tau klo di linux atau MacOS dan ga tau deh klo pakai metode lain yang mungkin pembaca pahami lebih relevan dalam membenchmark.

Ingat ya guys tulisan ini tidak membandingkan yang mana yang paling bagus baik dari segi fitur dan lain sebagainya tapi hanya tulisan pembanding kecepatan saja.

Sebelum kita lanjut melakukan benchmark maka agar fair kita perlu menonaktifkan seluruh plugin yang penulis pasang pada aplikasi sebelum menonaktifkan perlu dulu diketahui paket apa aja yang terpasang berikut paket yang terpasang dan dijelaskan sekalian cara menonaktifkan paket yang ada :

Cara menonaktifkan paket di sublime text 3 yakni :

Gambar :

Letak file sublime.settings : C:\Users\yourName\AppData\Roaming\Sublime Text 3\Packages\User

Screenshot melihat paket aktif

Screen shot setting di ignored package

jadinya begini :

Restart, periksa apakah masih ada paket yang terload misalnya dengan menekan tombol kombinasi ctrl+shift+p . jika tidak ada perintah misalnya kita ketikkan install maka jelas package control telah non aktif.

 

Nah sekarang saatnya kita lakukan Benchmark dengan melihat penggunaan memory dan cpu (screenshot), metode benchmark sangat sederhana cukup dilakukan melalui monitoring task manager :

Dapat dilihat bahwa VScode sangat kecil dalam menggunakan konsumsi memory hanya sekitar 15 MB lebih dikit dan ST3 waduh.. .berapa kali lipatnya Vscode dalam memakai sumber daya 51Mb guys… keterlaluan kau ST3 jadi gara2 kau aku harus upgrade RAM.. wkwkwkw.

Selesai guy. sudah siap move on nih.. hehehe… klo belum siap gpp saya juga ko.. hehehe….

Give your appreciation please share this article bro  😀 Jangan lupa diskusikan apabila ada yang tidak jelas di kolom komentar dibawah ini.

 

Cara membuat floating label dengan javascript

Cara membuat floating label dengan javascript

Pernah kan guys kalian lihat tampilan form dengan format berikut :

Tampilan diatas merupakan tampilan form pada aplikasi android yang seringkali kita temui. Title yang dikasih dengan kode warna itu oren tersebut disebut dengan floating label. User Interface atau tampilan aplikasi dengan menggunakan format label floating / melayang tersebut sangat bermanfaat.  Berikut beberapa manfaatnya :

Pertama element label akan lebih mudah dibaca dan akan lebih ringkas dalam pembuatan form karena developer tidak perlu menambahkan element html di tiap form input.

Kedua, floating label ini akan mempermudah bagi user yang sudah terbiasa bagi interface mobile untuk berinteraksi di app yang dibangun dengan basis web.

Walaupun diantara beberapa kemudahan tersebut, label melayang di tidak bisa dibuat secara mudah. HTML 5 tidak menyediakan secara langsung dukungan terhadap floting label tersebut. Tidak seperti misalnya dukungan terhadap attribut required yang telah didukung oleh HTML 5 dan banyak browser terkini sehingga dengan menambahkan attribut tersebut anda tidak perlu menyertakan library validasi javascript untuk mengecek input yang harus diisi oleh user.

Ada dua cara dalam menerapkan floating label tersebut :

  1. Dengan menambahkan library javascript misalnya yang tersedia di alamat berikut : https://datuhealth.github.io/floating-label/

label floating atau label melayang2.  Membuat sendiri koding floating tabel tersebut dengan javascript dan css.

Disini kita akan membahas langkah 2 yakni membuat sendiri floating label tersebut dengan javascript dan css.

  1. Buat file floating-placeholder.js atau tambahkan coding berikut di halaman html dalam block <script> –disini tambahkan </script>
 
 
/*Addding placeholder floating*/
$(document).on('focus','input.floating_placeholder, select.floating_placeholder, textarea.floating_placeholder ',function(e){
    var placeholder = $(this).attr('placeholder');
    var placeholder_dom = '<span class="floating_placeholder" style="display: none;">'+placeholder+'<span>';
   
    if ($(this).prev('span.floating_placeholder').length != 1) 
    {
        $(this).before(placeholder_dom);
          $(this).prev().css('color', '#535FFC');
         $(this).prev().fadeIn();
    }
    else { 
        //$(this).before(placeholder_dom);
        $(this).prev().css('color', '#535FFC');
         $(this).prev().fadeIn();
       
    }
});
$(document).on('blur','input, select, textarea',function(e){
     $(this).prev('span.floating_placeholder').css('color', '#B4B4B4');
    //$(this).prev('i').css('color', ''); 
});
/*End placeholder floating style*/

 

2. Tuliskan coding css berikut :

 
 
span.floating_placeholder { font-size: 12px; display:block }

 

that’s it silahkan coba sendiri guys….

Apa kamu punya library atau script javascript sendiri… sharing disini dong guys…

 

cara agar script jquery jalan di load ajax

cara agar script jquery jalan di load ajax

yo…  pasti deh kita pernah ketemu jika kita pernah menload suatu dom dari hasil eksekusi ajax tapi kok script javascript tidak jalan. misalnya kita mencoba mengeksekusi fungsi tertentu jika ada event di suatu selector/dom. atau misalnya saja kita buat script yang akan menghilangkan suatu element div tertentu tapi ko setelah dari hasil load ajax tidak jalan script / fungsi tersebut. Kita akan membagikan bagaimana trik agar seluruh script yang kita tulis akan dapat berjalan di dom hasil dari dom ajax.

biasanya kita akan menangkap event yang disediakan oleh jquery dengan menggunakan script berikut :

 
 
  1. $(document).ready(function() { 
  2.  $("#someIDdiv").on("click", function(){    
  3.   alert("The paragraph was clicked.");  
  4.  }); 
  5. });

script diatas hanya akan berjalan pada dom yang sudah terload atau script diatas tidak akan jalan jika id #someIDdiv merupakan hasil dari load ajax. Agar script dapat berjalan maka script diatas dapat kita rubah dengan script berikut.

 
 
  1. $(document).on("click", "#someIDdiv", function(e) {
  2. //proses fungsi javascript disini ya bro
  3. });

Demikian atas perhatiannya terima kasih… hahah kaya dokumen resmi aja. sudah bro selamat coding lagi .

Chit-chat dengan Hacker

Chit-chat dengan Hacker

Beberapa waktu yang lalu saya diberikan akses ke salah satu situs pemerintahan kabupaten. Tujuan pihak instansi memberikan akses tersebut adalah mulai mengaktifkan domain mereka sehingga dapat lebih produktif dengan menginstalasi webapps mereka ke lingkup publik. Tahap awal adalah saya perlu tahu dahulu fitur yang ada di hosting tersebut.

sayangnya hosting tersebut ternyata sangat lemah dari sisi keamanannya dan tentu saja dimanfaatkan oleh scripter sebagai ajang latihan penetration testing 😀 .

system-domain-kena-hack

syukurnya hacker meninggalkan jejak di halaman deface tersebut agar dapat dihubungi.. hehe…

Email kontak yang ditinggalkan menimbulkan rasa ingin tahu saya tentang hacker ini. Saya percaya bahwa keberhasilan memasuki sistem tidak semuanya dilakukan oleh oknum yang berniat jahat namun seringkali dilakukan oleh scipter tertentu hanya untuk menguji kemampuan mereka dalam meretas sistem saja atau menegur sysadmin terhadap pengelolaan sistem mereka yang lemah dari sisi keamanan seperti pada artikel berikut dimana sang hacker menegur sysadmin yang belum juga mengupdate library imagemagick yang versi sebelumnya terdapat vulnerability . Bermodal kontak email ini saya mencoba untuk mengirimkan surel dengan tujuan mengetahui intensi dan menggali info mengenai aktivitas hacker ini. berikut akan kami bagikan komunikasi saya dengan sang hacker.

 

share-system.com percakapan dengan hacker

pekerjaan selanjutnya adalah menyampaikan ke administrator server tentang hal diatas. 🙂

"